feat(console): the last step of the setup: two cards, and an example page in the preview (FRU-242)

[sakuga-agent]

Not critical. Review balanced asked below. The orchestrator may merge it.

Base main: the stack under it is merged (#259, #260, #267, #270), and the branch is one commit on main. Step 3 is in routes/setup-install.tsx, after the split of the setup in #267.

Part of FRU-242 (parent FRU-230, « Simpler flow »): the first of its two parts, what works with the data of today. Screen 01 of the mockup of 2026-10-13, state install. The ticket stays open for its second part.

Arbitrations that apply (orchestrator, 2026-10-13, on delegation from Mathieu). Q5: « A preview of your site » is a fixed illustration. Waiting, so not built: Q8 (the extension signed in from the console) and FRU-237 (the summary of the sites, which says that a first note came).

What changes

• The last step is two cards, as on the mockup: « Browser extension » and « Script tag », one under the other in the column, side by side where there is room.
• The preview is the example page of the mockup once a site is added (preview-scene.tsx): the address of the site in the bar, the shop that does not exist, the two buttons of the widget and the hint « Click Leave feedback, then any part of the page. ». It asks the site of the person for nothing: no frame, no request (the spec counts the requests to the site: none). Its caption is « An example page. Pins show the same way on your site. », as the ticket says, in place of « A preview of your site. ».
• The picture is aria-hidden and inert: its two buttons are drawn, and take no focus and no press.
• « Open the console » replaces « Finish », and is always there.
• install-options.tsx shares its logic (useCopy, useConnect, EXTENSION_GUIDE) between the Sites screen and the setup. The Sites screen is not redrawn here.
• One line of root.tsx, asked for by the agent of the workspace screens: the two dark banners have a rule under them (border-rail-active), so they do not run into the dark rail.

What the mockup has and this step does not, and why

On the mockup	Here	Why
« Signs in with this account. No code to type. », and « Add to Chrome » alone	« Add it, then connect this browser: a page opens, and you click the Fruitback icon there. », « Add to Chrome », and « Connect this browser » under it	Q8 is open: the extension is still connected from the console, with a code nobody types. Without « Connect this browser » the card would lead nowhere today.
« Add to Chrome » → the Chrome Web Store	→ the page of the documentation that says how to install it	The extension is in no store (FRU-130; decided for #270 on 2026-10-13: the mockup's words, the link to the documentation).
« Waiting for your first note. » before the sentence, role="status"	The sentence alone: « Open the site, click Leave feedback, then any part of the page. » + « Open {site} »	Nothing tells the console that a note came (FRU-237). A step that says it waits, and never stops waiting, would be false. The words come back with the second part.
The step done (« Extension on in Chrome », « First note received just now »), the conclusion « Your first note is in », the pin and the note on the picture	Not built	The second part of the ticket, with FRU-237.
The script: src, data-fruitback-client, defer	The same with data-fruitback-endpoint	Inventory A24, checked: the widget reads its worker in that attribute only (packages/element: an element with no endpoint mounts nothing). The script is two lines longer.
« Members see their pins on every visit. » always	« Every visitor sees the pins. » for a site that everyone sees	The ticket's correction: the sentence of the mockup is true of a site of members only.

Against the mockup

Built at 1440 × 900 and 390 × 844, system font, with sample words as wide as the mockup's (see #267).

Element, at 1440	Mockup x, y, w, h	Built x, y, w, h
step 3 title	160, 466, 352.2, 26	160, 465.5, 352.2, 26
« Change » (words)	405, 412, 51.8, 21	405.6, 412, 51.8, 21
« Browser extension »	179, 553, 314.2, 18	179, 553, 314.2, 18
« Add to Chrome »	179, 663, 314.2, 46	179, 682, 314.2, 44
« Script tag »	179, 759, 314.2, 18	179, 817, 314.2, 18
« Copy script »	179, 945, 314.2, 44	179, 1040.6, 314.2, 44
preview	568, 113, 759.8, 698.5	568.2, 113, 759.8, 698.5
picture: settings	1117, 723, 36, 36	within 2 px (held by the spec)
picture: « Leave feedback »	1161, 721, 147.8, 40	within 2 px (held by the spec)

What differs, and why. The first card is 58 px taller: its line has two lines and not one (19.5 px), « Connect this browser » is under « Add to Chrome » (41 px), and the link is 44 px high where the mockup's <a> is 46. The second card is 37 px taller: the script has two lines more. So « Script tag » is 58 px lower and « Copy script » 95.6 px lower than on the mockup. The page at 390 is 390 × 2078 for the mockup's 390 × 1935, for the same reasons. Everything above the first card, and the whole preview, is where the mockup has it.

Captures cannot be uploaded from the agent. They are on the machine sakuga-mini: built, ~/.claude/agent-coord/scratch/fru-sf-entree/fru-242/built-01-setup-install-<1440|390>.png with every box in built-boxes.json; mockup, ~/.claude/agent-coord/maquettes/simpler-flow/shots/01-setup-install-<1440|390>.png.

The colours of the example page

preview-scene.css holds ten colours and a serif that are the example site's (#f6f6f3, #2f4a3a, Georgia…), as the inventory of the mockup says: « a sample site, not Fruitback ». They are no tokens, the file says so at its top, and nothing else takes them. What is Fruitback's on the picture (the two buttons, the hint) uses the tokens of app.css. tokens.test.ts still refuses a colour written in a .tsx.

French, sentence by sentence (the mockup has none)

English	French
An example page. Pins show the same way on your site.	Une page d’exemple. Les pins s’affichent de la même façon sur votre site.
Leave feedback	Laisser un feedback (the widget's own word for its button)
Click Leave feedback, then any part of the page.	Cliquez sur Laisser un feedback, puis sur n’importe quelle partie de la page.
Use one, or both.	Utilisez l’un, ou les deux.
Browser extension	Extension de navigateur
Nothing to deploy. Right for a client's site you cannot touch.	Rien à déployer. Convient au site d’un client auquel vous ne pouvez pas toucher.
Add it, then connect this browser: a page opens, and you click the Fruitback icon there.	Ajoutez-la, puis connectez ce navigateur : une page s’ouvre, et vous y cliquez sur l’icône Fruitback.
Script tag	Balise de script
Before the closing body tag. Members see their pins on every visit.	Avant la balise body fermante. Les membres voient leurs pins à chaque visite.
Before the closing body tag. Every visitor sees the pins.	Avant la balise body fermante. Chaque visiteur voit les pins.
Copy script	Copier le script
Open the site, click Leave feedback, then any part of the page.	Ouvrez le site, cliquez sur Laisser un feedback, puis sur n’importe quelle partie de la page.
Open the console	Ouvrir la console

The words of the example shop (« Acme Outdoor », « Pack light, walk far. ») are the picture's and stay in English, as on the mockup; no screen reader reads them. Removed: « Finish ».

Tests

e2e/console-setup.spec.ts, 20 tests (4 new). Against a worker on PGlite: after « Add site » the script names the site as the worker made it, « Copy script » puts that script in the clipboard, « Connect this browser » opens the pairing page with a code after the #, no request went to the site of the person, and « Open the console » leads to the sites. With stubs: the two cards and the example page with the boxes of the mockup (on macOS), the picture hidden and inert with nothing in it that takes focus, axe (no violation), a site that everyone sees, a copy the browser refuses. The test at 390 and 320 px, in English and French, now walks the new step with a long host.

Ran locally

pnpm format, pnpm lint, pnpm typecheck, console test (93) and build pass. Console specs against this branch: console-setup 20, console-invitation 11, console-kit 18, console-narrow 5, console-site-address 4: all pass.

Not verified

Firefox, Safari, a screen reader. inert is read by the test in Chromium only.

🤖 Generated with Claude Code

---

Sakuga Review · Score de confiance : 4/5

Fusionnable : refactor propre des hooks et nouvelle étape 3 ; seuls des points mineurs et quelques éléments non vérifiables.

Constats

1.  new URL(site.origin) sans garde dans le rendu apps/console/app/routes/setup-install.tsx:22
   Si site.origin n'est pas une URL valide, new URL lève pendant le rendu et fait planter l'écran. setup.tsx fait déjà le même appel, et le worker valide l'origine, donc le cas est improbable. Correction : Aucune action nécessaire si le worker garantit l'origine ; sinon entourer l'appel d'un try/catch.

Résumé

La PR extrait useCopy et useConnect de InstallOptions, ajoute l'étape 3 du setup en deux cartes (PutOnSite) et une scène d'exemple statique dans l'aperçu. J'ai relu les hooks, la nouvelle étape, les traductions françaises et l'appelant sites.tsx, qui reste compatible. Les composants de ui.tsx (OptionCard, AutoGrid, LinkButton avec space, Snippet avec className, BrowserFrame avec enfants) ne sont pas montrés dans le contexte.

Diagramme

%%{init: {'theme': 'neutral'}}%%
flowchart LR
A["setup.tsx"] --> B["PutOnSite"]
B --> C["useCopy"]
B --> D["useConnect"]
C --> E["install-options.tsx"]
D --> E
A --> F["PreviewScene"]
G["sites.tsx"] --> H["InstallOptions"]
H --> E

Loading

Non relu

• apps/console/app/ui.tsx: OptionCard, AutoGrid, LinkButton, Snippet et BrowserFrame ne sont pas montrés, leurs props n'ont pas été vérifiées
• apps/console/app/preview-scene.css: style seulement

_{Revues (2) · Dernier commit relu : feat(console): the last step of the setup: two ... · Niveau balanced · anthropic/claude-sonnet-5.5 · 0,111 $}

[sakuga-review]

Score de confiance : 4/5 · ✅ Rien de bloquant · Le changement peut être fusionné : je n'ai trouvé aucun défaut bloquant dans le diff fourni. Deux points restent non vérifiés (le composant BrowserFrame et la mise en page de la carte de script), d'où le score de 4.

_{Niveau lite · anthropic/claude-haiku-5.5 · 0,006 $ · Le résumé, le diagramme et la liste des constats sont à la fin de la description de la PR.}

[sakuga-review]

Score de confiance : 4/5 · ✅ Rien de bloquant · La PR peut être fusionnée : je n'ai relevé aucun défaut critique ou majeur dans le diff lu, et les points non vérifiés sont listés dans not_reviewed.

_{Niveau lite · anthropic/claude-haiku-5.5 · 0,007 $ · Le résumé, le diagramme et la liste des constats sont à la fin de la description de la PR.}

[sakuga-review]

Score de confiance : 4/5 · ⚠️ Rien de bloquant · Mergeable après une vérification : aucun défaut bloquant établi dans le diff, mais le retrait du conteneur min-w-0 de l'étape 3 peut faire défiler la page à l'horizontale et doit être contrôlé.

_{Niveau lite · anthropic/claude-haiku-5.5 · 0,007 $ · Le résumé, le diagramme et la liste des constats sont à la fin de la description de la PR.}

[sakuga-review]

Score de confiance : 4/5 · ⚠️ Rien de bloquant · Mergeable après un contrôle de la mise en page de l'étape 3 : aucune régression fonctionnelle certaine n'apparaît dans le diff, mais le script peut désormais élargir la colonne et faire défiler la page en largeur.

_{Niveau lite · anthropic/claude-haiku-5.5 · 0,007 $ · Le résumé, le diagramme et la liste des constats sont à la fin de la description de la PR.}

[sakuga-agent]

@sakuga-review review balanced

Asked now that its diff is its own: the stack under it is merged, and the branch is one commit on main.

[sakuga-review]

Score de confiance : 4/5 · ⚠️ Rien de bloquant · Fusionnable : refactor propre des hooks et nouvelle étape 3 ; seuls des points mineurs et quelques éléments non vérifiables.

_{Niveau balanced · anthropic/claude-sonnet-5.5 · 0,111 $ · Le résumé, le diagramme et la liste des constats sont à la fin de la description de la PR.}

[sakuga-agent]

On the two P2 of the reviews of 7d104c9 (lite and balanced, both 4/5):

Lite, the script can widen the grid and scroll the page sideways. Measured, it does not. The case « no state of the setup scrolls sideways on a phone » (e2e/console-setup.spec.ts, in English and in French) reaches step 3 with a long host and reads scrollWidth at 390 and 320 px: 0 px of sideways scroll. The script is the Snippet of the kit, which scrolls in its own box (overflow-x: auto, focusable). AutoGrid has minmax(min(100%, …), 1fr) tracks, and OptionCard has min-width: 0 (#260, console-kit.spec.ts at 390 px).

Balanced, new URL(site.origin) in the render. The origin is the one the worker wrote from an address it validated (origin of a parsed URL, never free text). The Sites screen and the step before read it the same way. No change.