feat(claw-app): replace first-run demo with a how-to video bento - #2052
Merged
Conversation
Auto-connect now wires up agents at launch, so the first-run screen no longer needs to lead with 'install the MCP'. Swap the single setup demo for a video-first how-to bento that teaches how to put BrowserClaw to work. - New bento: a mixed-size grid of poster tiles (one featured, a rail, a wide tile) that open a shared lightbox player. Lite-YouTube facade: tiles render as posters and only one nocookie iframe mounts, on click, so nothing streams until asked. Content lives in a small manifest; posters derive from the video thumbnail with an optional per-video override. - Retire the single CDN demo and the numbered 01/02/03 step strip; the strip is replaced by a connected-agents line read from the live connection list, making the auto-connect result visible. - Reframe the hero subhead from setup to learning. - Allow the nocookie embed via an explicit extension-pages CSP; img-src and connect-src stay unlisted so poster URLs and the local API keep working. Placeholder line-up repeats two BrowserOS videos to fill the grid; real how-to clips and branded poster URLs drop into the manifest later.
Contributor
Greptile SummaryReplaces the first-run setup demo with video-first onboarding and surfaces connected agents from the live connection list.
Confidence Score: 5/5The PR appears safe to merge. No blocking failure remains. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
C[Cockpit] --> S{Onboarding state}
S -->|first-run or waiting| O[CockpitOnboarding]
O --> F[VideoFeature poster]
O --> P[Starter task and connected-agent chips]
S -->|ready| R[RecentActivity]
R --> V[Collapsible VideoRail]
F --> L[Shared VideoLightbox]
V --> L
L --> M[Self-hosted video]
Reviews (2): Last reviewed commit: "feat(claw-app): serve the new self-hoste..." | Re-trigger Greptile |
Contributor
✅ Tests passed — 2540/2544
|
The how-to bento's YouTube iframe failed with player error 153 in the packed extension: the newtab runs from a chrome-extension origin, so the embed request carries no referrer YouTube will accept and the player refuses to start. Add a declarativeNetRequest rule that sets a valid youtube.com Referer on requests to youtube-nocookie.com, scoped to that domain so normal YouTube browsing is untouched. Uses declarativeNetRequestWithHostAccess over the extension's existing host access rather than broad network control.
The declarativeNetRequest Referer rewrite did not clear YouTube player error 153 in the packed extension. Reverting it; the how-to lightbox will play a self-hosted video instead of a YouTube embed.
A YouTube iframe cannot play from the extension's chrome-extension origin (player error 153), so the lightbox now plays a self-hosted mp4 in a native video element. Posters still come from the YouTube thumbnail. For now every tile plays the previous first-run demo clip; per-video self-hosted URLs drop into the manifest's videoUrl later. Drops the now-unused youtube-nocookie CSP so the manifest returns to the MV3 default.
… homepage A subtle strip of BrowserClaw videos at the bottom of the ready-state cockpit: a single horizontally-scrolling row of poster tiles that open the shared lightbox, foldable to a one-line handle so it never disturbs the workflow above. Fold state persists in localStorage (default expanded). Reuses the onboarding video manifest, tile, and player; adds a compact 'rail' variant to VideoTile and mounts VideoRail after RecentActivity.
… recent activity Team feedback on the first-run redesign: - Five onboarding videos read as odd; show a single focused hero video instead. Replace the bento with VideoFeature (one large poster that opens the shared lightbox) and retire VideoBento. - The learn-BrowserClaw rail sat at the very bottom; move it to sit between the recent-activity bento and the tail list. RecentActivity gains an `interlude` slot rendered there, and Cockpit passes the rail into it.
…olumn layout Team feedback: the single full-width video was too big and the CTA, prompt, and connected line floated as disconnected parts. Rebuild for a modern, welcoming first-run: - Two-column split: a constrained demo video (7/12) beside a cohesive start panel (5/12) instead of a giant video with floating elements. - Start panel groups the connected-agent chips, the first-task heading, the prompt with a full-width Copy task button, and a tie-back to the cockpit. - Connected agents render as chips with a +N overflow, not a raw mono list. - Retire the stale Set up MCP endpoint button; /mcp becomes a quiet Manage agents footer link. Warmer hero copy and eyebrow. - VideoFeature scaled for the narrower column; StarterPromptTile gains a block variant.
…eflow Center the welcome in the viewport and stretch the demo video to the start panel's height so the two columns align instead of stranding content in the top-left, and wash the demo poster in the session-card navy so a loud placeholder thumbnail reads as an on-brand video card. Replace the swap-in waiting banner with a fixed-height status line whose text changes in place, so copying the starter task no longer grows the panel (and, with the columns height-linked, the video beside it).
See whether the first-run onboarding video is watched and which calls to action get used: - onboarding_video_opened (surface: onboarding | rail) when a tile opens the lightbox - onboarding_video_played / _paused / _resumed / _completed from the player, so a click on the video reads as pause/resume and the initial autoplay as played - onboarding_task_copied when the starter task is copied - onboarding_link_clicked (link: docs | manage) for the footer links Events carry only scalar metadata (tile id, span, surface, link), never titles or urls, per the catalog privacy rule.
Replace the holdover first-run demo clip with the shared onboarding recording now on the CDN. The first-run hero and the Learn BrowserClaw rail both play it via videoUrlFor's shared fallback.
Contributor
Author
…poster The first-run hero now shows the recording's own YouTube thumbnail via an explicit poster on the featured entry, instead of the placeholder tile's derived thumbnail.
…opup The first-run video no longer opens a lightbox on click; it plays inline in the hero and autoplays. Playback tries with sound and falls back to muted when the browser blocks unmuted autoplay (stock Chromium applies this to extension pages too), so the demo always starts and the reader can unmute via the controls. The rail keeps its click-to-open lightbox. Factor the playback events into a shared useOnboardingVideoTracking hook so the inline hero and the lightbox share one played/paused/resumed/completed path.
The first-run connected-agents row capped at four chips and collapsed the rest into a +N. Render every harness so the reader sees all connected agents; the row already wraps to multiple lines.
…rice research Change the panel label to a generic "Paste this prompt into your agent" and the starter task to a BrowserClaw streaming-price lookup across Netflix, Disney plus, Hulu, Max, and Apple TV.
The first-run shell test asserted the old poster's video title; the inline hero no longer renders it. Assert the recording source instead, matching the onboarding component tests.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Auto-connect now wires up agents at launch, so the first-run cockpit screen no longer needs to lead with "install the MCP." This swaps the single setup demo for a video-first how-to bento that teaches how to put BrowserClaw to work with your agents.
Changes
youtube-nocookieiframe mounts, only when a tile is clicked, so nothing streams (and no cookies are set) until the reader asks. Content lives in a small manifest; posters derive from the video thumbnail with an optional per-videoposteroverride.01/02/03step strip. The strip is replaced by a connected-agents line read from the live connection list, so the auto-connect result is visible.extension_pagespolicy allows the nocookie embed viaframe-src, keepingscript-src/object-srcat'self';img-srcandconnect-srcstay unlisted so poster URLs and the local API keep loading.Placeholder content
The line-up currently repeats two BrowserOS videos to fill the five tiles. Real how-to clips and branded poster URLs swap into the manifest later without touching layout.
Validation
typecheck,biome, and the cockpit test suites pass (65 tests). The bento and lightbox render under SSR.