PRDCT-693: show the Build locally stages as a strip, with the Open app dialog

[Iamfle4ka]

Linear: PRDCT-693 · stacked on #1147

Why

Nikita asked for pictures on Build locally: a screenshot of the process, or the Getting Started "line with dots, one dot per stage". He chose a static strip over an animated clip, one per path, plus one real screenshot.

What changed

• A shared src/components/StageStrip.astro draws numbered dots on a line, with a bold title and one line of text per stage. It's the look of the Getting Started hub poster. Styles are .stage-strip* in custom.css, and the markdown twin prints each strip as a numbered list.
  • The strip is horizontal while the content column is wider than 36rem and vertical below that. It uses a container query, because the sidebar makes the column narrow between 800 and 1400 px.
  • Dots and line are --kbc-blue-600, where white numerals pass 4.5:1. Both themes follow the tokens.
  • Getting Started's CourseLine (PRDCT-487: Getting Started rerun on a Free Plan project, with a course-style hub and a 10-second clip #1144) draws its course the same way from its own data. Whether the two become one is for the style audit.
• build-locally gets two strips, under the intros of "With an AI agent" and "By hand". Stages with a section of their own link to it, and every line comes from sentences the page already has.
  • The by-hand strip follows the terminal route only, and a small "From a terminal" caption above it says so. The UI route pushes before it connects, so it keeps its own section, Sync to your project.
• I checked where the product puts the password. On 29 September I started test app 74021867 in project 264 and stopped it again afterwards. On its page, Open App opens a dialog with the app address and the password, hidden, each with a copy button. A stopped app's page shows no password, though I didn't open its Open App dialog.
  • Four pages put the password "next to Open App" or said it "sits on the app's configuration page, ready to copy": build-locally, getting-started (Kai), authentication and troubleshooting. They now say to click Open App and copy it from the dialog. reference.md adds the dialog to its Open App line, and the Kai page's manual path mentions it at step 7. Both say "on a running app" or "behind a password", because that is what was seen. Apps Kai built or created in the UI were not checked, and the pages flag them with a VERIFY(Nikita).
• A screenshot of that dialog, public/data-apps/open-app-dialog.png (40 KB), sits in "Check the app" under the password step. It's cropped to the dialog, and the password shows as dots. Check the app also gets a line for the MCP route: the draft preview comes first, and Open App arrives once production is deployed.
• That evidence replaces the VERIFY(Michal Ševčík) note that asked where the password shows, in the comment under Check the app. The same check showed Edit with Kai in the header and Duplicate with Kai in the ⋯ menu, where operate and publish-and-share say Modify with Kai and Copy app. Those two pages and reference.md get a VERIFY(Michal Ševčík) rather than a change, because the labels may depend on who built the app.

Checks

• The build is clean, with no StageStrip warning. check-cli-reference has 0 findings, audit-phase2 0 broken links and 0 missing images, and docs-link-redirect-check against PRDCT-693: put Apps prerequisites in the shared Before you start box #1147 0 blockers and 0 warnings.
• The twin prints both strips as numbered lists, with no <StageStrip or <li left.
• Preview, both strips:
  • horizontal at 1440 and 1280 px in light and dark, and at 1024 px in dark;
  • vertical at 820 px with the sidebar showing;
  • at 375 px, 343 px wide with nothing overflowing.
• fact-checker ran twice, first on build-locally, authentication, troubleshooting, operate and publish-and-share, then on getting-started and reference. Neither found anything critical.
  • The first run found two MAJORs. "Shows the password" became "has … with a copy button", because the dialog hides it, and the by-hand strip now follows the terminal route only.
  • After the second, the Kai and reference lines stick to what was seen, and the cases nobody checked carry a VERIFY.
• guide-tester found no blockers. After its review:
  • stage 3 says you approve the agent's commands;
  • Check the app covers the MCP route and puts the screenshot under the password step;
  • linked stage titles are underlined without a hover, which phones don't have.
• checker returned FIX twice and PASS on the third pass. The first two passes caught the password line I missed on the Kai page and in reference, the late edits that had skipped the fact-check and the humanizer, and some wording.
• After the 30 September merge, checker, fact-checker and guide-tester ran again on build-locally, with no blocking findings. fact-checker couldn't confirm the dialog beyond europe-west3, so the evidence comment now carries a VERIFY(Nikita) for us-east4.

Merge order

#1146 first, then #1147, then this one. I'll retarget each PR as the one below it lands.

On 30 September the fixes for Miro's review on #1146 moved "What you get by default" below Check the app, and a follow-up commit took the password location out of it. This branch merged both through #1147. The agent strip now sits right above Set up your client, and Check the app says what the dialog holds.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
connection-docs	Ready	Preview	Sep 30, 2026 1:46pm UTC

[linear-code]

PRDCT-693