[jhodapp]

Description

Third of five PRs for the stepped "New session" dialog. Adds StepDialog, the shared shell every stepped modal in the redesign uses (New session first). Not mounted anywhere yet. Stacked on #523.

Changes

• ui/step-dialog.tsx: on Radix Dialog parts. Desktop (≥900px): fixed 860 × 560/520 two-pane modal, 300px white rail (title, optional header, step list with current row and done checks, optional footer), well pane with the step title, a body that's the only scroll region, and a pinned footer (confirm pill or hint, "n of m", 48px prev/next circles). Below 900px: full-screen step view with a 56px top bar ("New session · 2 of 3"), the rail content in the body, and a sticky footer (back circle, Next or confirm pill).
• Keyboard: Esc, scrim click and × close; Enter confirms when the confirm is enabled and focus isn't in a field.
• Tokens: bg-scrim, shadow-modal, rail-current, rail-border, light and dark.
• Style guide: a Stepped modal entry, including the full-screen step view (closes that open item).

Screenshots / Videos Showing UI Changes (if applicable)

None yet; the New session dialog PR mounts it.

Testing Strategy

• 18 tests written as the spec first: roles and names, rail, slots, prev/next, confirm and hint, Esc, Enter rules, both layouts. All 2626 tests pass, tsc and lint clean.

[greptile-apps]

Confidence Score: 4/5

[Low impact] The PR adds a dialog component but does not mount it in an active screen.

The PR appears safe to merge with a non-blocking issue: resizing clears values held inside the step body.

Findings

1.  Resizing clears the search ▶

Summary

Adds StepDialog, a shared desktop and mobile stepped modal, with navigation, confirmation, keyboard shortcuts, theme tokens, and 18 tests.

• Stepped workflows use a shared dialog that changes with screen width.

_{Reviews (1) · Last reviewed commit: "feat(design): add StepDialog, the shared..." · Reviewed by Greptile}