Skip to content

feat(ade, onboarding): redesign the setup dialog and the guided tour - #1

Closed
arihantcodes wants to merge 2 commits into
mainfrom
arihantcodes/onboarding-ui-updates
Closed

arihantcodes wants to merge 2 commits into
mainfrom
arihantcodes/onboarding-ui-updates

Conversation

@arihantcodes

Copy link
Copy Markdown
Owner

Summary

Redesign of the first-run setup dialog (ade/web/src/components/onboarding) and the guided tour page (onboarding/ui) so both read as one system.

Setup dialog

  • Frame and stepper. 760×620 with a 200px rail holding a vertical stepper: 24px numbered dots on a hairline that fills as steps complete, a one-line description per step, a check that cross-fades in when a step is done. Finished steps go back on click; the current one carries aria-current="step"; steps ahead are plain text so Tab only stops on things that act. Below the @lg container width the rail becomes a one-row stepper.
  • One spacing and surface system. 24px gutter, 56px footer, a close-button strip the body never scrolls under, 12px-cornered pill buttons with semibold labels, pill chips, bordered cards with hairline dividers. Every hover and selected fill uses the console's surface tokens, so each state is the same step in both themes.
  • Models. Sign-in commands in a dark terminal block with bash colouring and a copy button. The engine log moved onto the same surface and is no longer a nested scroller.
  • Judge. What Judge does up front (three uses, one line each), then a checkbox list that reads as a choice, with the hint saying what to do.
  • Ready. The harness template's four example prompts as cards. A click opens a new chat with the message prefilled, the prompt's agent profile selected, and the first model from its priority list that the machine has, with its effort. Served by console::onboarding::prompts when the ADE has it (upstream feat: onboarding feedback — Chromium setup step, pinned response language, ports, and no polling iii-hq/workers#1329), built in otherwise. The guided tour offer stays.
  • Fix. compose::add and compose::remove now pass the file the daemon loaded (from compose::list), so a daemon started with --file from another directory no longer fails with "no worker-compose.yaml here".

Guided tour

Same system: a vertical stepper with the open step's content in a card under its title, pill chips for state, the trigger as a disclosure onto a terminal block, grid-track expand/collapse that can reverse midway, the console sans at the dialog's 13px scale. No nested scroll containers.

Verification

  • pnpm typecheck, Biome on the onboarding directories, and the onboarding unit tests (64) pass; the full web suite passes apart from two pre-existing flaky cases unrelated to this change (ProviderConfigurationPanel, MermaidDiagram).
  • Worker UI build passes typecheck and the strict design-rule lint; the worker's node tests pass.
  • Walked all four steps by keyboard in Chromium in both themes and at 390px: fresh open focuses the primary action, Enter advances, Escape closes, no horizontal overflow. Example-prompt cards open a chat with the right text, profile and model. The tour renders the new page live, toggles by keyboard, and shows a focus ring.

Notes

🤖 Generated with Claude Code

Setup dialog (ade/web/src/components/onboarding):
- 760×620 frame with a 200px rail: a vertical stepper of numbered dots on a
  hairline that fills as steps complete, with a one-line description per
  step; a one-row stepper below the @lg container width. Finished steps go
  back on click; the current one carries aria-current; steps ahead are text.
- One spacing system (24px gutter, 56px footer, a close-button strip the body
  never scrolls under), 12px-cornered pill buttons with semibold labels,
  pill chips, bordered cards with hairline dividers, and surface-token hovers
  and selection so every state is the same step in both themes.
- Models: sign-in commands in a dark terminal block with bash colouring and a
  copy button; the engine log on the same surface, no longer a nested
  scroller. Judge: what Judge does up front, then a checkbox list that reads
  as a choice. Ready: the harness template's four example prompts as cards
  that open a new chat with the message, agent profile and model ready;
  served by console::onboarding::prompts when the ADE has it, built in
  otherwise. The guided tour stays.
- compose::add and compose::remove name the file the daemon loaded
  (compose::list), so a daemon started with --file from another directory no
  longer fails with "no worker-compose.yaml here".

Guided tour (onboarding/ui): the same system — a vertical stepper with the
open step's content in a card under its title, pill chips for state, the
trigger as a disclosure onto a terminal block, grid-track expand/collapse
that can reverse midway, and the console sans at the dialog's scale.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Oct 9, 2026

Copy link
Copy Markdown

skill-check — worker

0 verified, 82 skipped (no docs/).

Layer Result
structure ✓
vale ✓
render ✓

Three for three. Nicely done.

Large fills in the setup dialog and the tour — cards, rows, strips, the
code surface, the soft secondary button — use the neutral palette one step
per theme instead of the alpha surface ramp, which read as a grey slab
across a whole card in the light theme. A checked card is neutral-100 with a
neutral-400 stroke (neutral-900 with neutral-600 in the dark theme). Small
controls keep surface-hover.

The command and engine-log blocks are a light panel with dark code colours
in the light theme and the raised dark panel in the dark theme, in both the
dialog and the tour.

Ready no longer lists where the keys live: that line read as jargon.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@arihantcodes

Copy link
Copy Markdown
Owner Author

Superseded by iii-hq#1367, opened against the main repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant