[Makisuo]

Every step flow drew its own progress line: a mono trail on connect pages, a sans one in the Google Cloud dialog, slash crumbs in onboarding, a numbered uppercase 1 WRITE / 2 REVIEW in the status page dialogs, and nothing in the Cost add-source dialogs. They now share one kit component.

What changed

• answerTrail (packages/views/src/ui/answer-trail.ts) replaces stepTrail and the three hand-rolled trails. Done steps are receipt chips with the answer they were given ("Acme", "Cloudflare"), the current step is underlined in primary, later steps are muted. Sans, no numbers. A done step that can be reopened (onboarding) is a button named "Acme, go to Name".
• Moved onto it: /sources/new and every connect flow it frames (AWS, Google Cloud, Cloudflare, Railway, PlanetScale, Supabase, GitHub, Prometheus), the Google Cloud configure dialog, onboarding, and the status page incident dialogs.
• Cost add-source dialogs gain a Provider → Connect trail. Its chip is not a button, so the dialog's first focus stays on its field; Back is in the footer.
• maple/one-step-trail flags aria-current="step" anywhere but the kit component, so a new flow can't grow a second trail. Documented in docs/design-rules.md.

Before / after

	Before	After
Connect page
Connect a source
Setup dialog
Onboarding
Cost dialog

After, more states: onboarding with a done answer chip, the Cost picker, and the connect page in light mode.

Onboarding, plan step	Cost picker	Light

Verification

• apps/web and packages/views typecheck; bun run lint:foldkit clean.
• Scene tests over sources, onboarding, infra integrations, integrations, status pages, cost and the labs: 130 files, 1265 tests pass. The status page test now asserts aria-current="step" on Write instead of pinning the old numbered text.
• The new rule fires on h.AriaCurrent("step") and { "aria-current": "step" } in a probe file, and is quiet on the kit file.
• Screenshots from /lab/* (aws-connection, sources, gcp-connect, onboarding, cost).

The status page incident dialog does not open from the lab's editor page in headless Chrome, so it has no screenshot; the scene test covers it.

🤖 Generated with Claude Code

---

^{Open in [code]smith · Need help on this PR? Tag @codesmith-bot with what you need.}

Summary by CodeRabbit

• New Features
  • Added consistent progress trails to source connections, onboarding, setup flows, and incident dialogs.
  • Trails show completed steps and their answers, highlight the current step, distinguish upcoming steps, and flag blocked steps. Completed steps can be clickable where navigation is available.
  • Source setup progress appears while choosing a provider and connecting supported sources.
• Improvements
  • Connection dialogs now display setup progress alongside their title and description.
  • Onboarding progress navigation is hidden on smaller screens.
  • Completed steps are clearly identified in source connection flows.

[coderabbitai]

No actionable comments were generated in the recent review.

Walkthrough

The pull request adds a shared answer-trail component and replaces local progress renderers across source setup, onboarding, GCP setup, and incident dialogs. It adds a lint rule for step markers and updates the design rules.

Changes: Shared step-progress trail

Layer / File(s)	Summary
Shared trail component packages/views/src/ui/answer-trail.ts, packages/views/src/ui/step-trail.ts, packages/views/src/ui/INDEX.md	Adds answerTrail with step states, answers, optional click handlers, and accessible step markers. Removes stepTrail and updates the UI index.
Source connection dialogs apps/web/src/page/kit/connection-step.ts, apps/web/src/page/cost/view-add-trail.ts, apps/web/src/page/cost/view-add-source.ts, apps/web/src/page/cost/view-add-planetscale.ts, apps/web/src/page/cost/view-add-vercel.ts	Adds an optional trail to connectionStep. Source-addition dialogs supply provider and connection progress; credential replacement omits the trail.
Existing step flows apps/web/src/page/infra-integrations/gcp/integration/view-gcp-configure-parts.ts, apps/web/src/page/onboarding/quick-start-view.ts, apps/web/src/page/sources/new/view-trail.ts, apps/web/src/page/status-pages/editor/view-incident-dialogs.ts, apps/web/src/page/status-pages/editor/editor.scene.test.ts, apps/web/src/page/sources/new/*-flow.scene.test.ts, apps/web/src/page/sources/new/new.scene.test.ts	Replaces local progress rendering with answerTrail. Tests check the incident-dialog current-step marker and completed source-flow step labels.
Trail guidance and lint enforcement docs/design-rules.md, scripts/oxlint-plugins/consistency-rules.mjs, .oxlintrc.json	Documents the answerTrail requirement and adds an enabled lint rule for step markers outside the shared component. Existing lint checks are also reformatted.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Merge Risk: Minimal · up to 67b26

This change swaps several step-progress indicators for one shared trail and adds a lint rule that enforces it. It carries little risk and is a reversible UI-only change.

Pre-merge checks: 4

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title "feat(ui): one answer trail for every step flow" matches the main change. The PR adds a shared answerTrail component (packages/views/src/ui/answer-trail.ts), replaces the separate progress i…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Title check

Explanation

The title "feat(ui): one answer trail for every step flow" matches the main change. The PR adds a shared answerTrail component (packages/views/src/ui/answer-trail.ts), replaces the separate progress indicators in connect flows, the GCP configure dialog, onboarding, and status page incident dialogs, and removes stepTrail. The title is short, specific, and uses a conventional commit prefix. It does not list files or use vague wording.

Finishing Touches

Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn

Recent review info

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 596b5980-172b-4a74-8865-d0e6acb5d6e9

Commits

Reviewing files that changed from the base of the PR and between dd44707 and 67b267c.

Files selected for processing: 1

• packages/views/src/ui/answer-trail.ts

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 0 remain after this review.

[maple-review-bot]

1 inline note from Maple's review. The score and summary are in the review comment above.

[Makisuo]

A long answer now truncates inside its chip (from the review's untested case). At 390px with a stress-tested answer, the page has no horizontal overflow:

[maple-review-bot]

Maple review

🟢 Confidence 9/10 · safe to merge. Contained CSS fix in one kit view; the shrink chain that makes the ellipsis appear is verified by reading the classes, and the truncation itself has no test.
_{no findings · tests partial −1 · risk medium}

Replaces five hand-rolled step trails with one kit answerTrail; the last commit lets a long answer ellipsize inside its receipt chip instead of pushing the trail past a phone's width. Safe to merge.

• answerTrail replaces stepTrail and the hand-rolled trails in connect pages, onboarding, GCP and status page dialogs
• A done chip renders its answer in a truncate span, with the check icon shrink-0
• maple/one-step-trail confines aria-current="step" to the kit

_{67b267c · What was checked, coverage and telemetry details are on the Maple / review check. Reply "won't fix" to dismiss a finding, or mention @maple-review-bot to ask about one.}