Project shell.
The chrome around every phase — top bar, rail, panels.
Every project page wears the same chrome — top bar, pipeline rail on the left, content in the middle, an optional panel on the right. This page maps every region.
Top bar #
Left to right:
- Pipeline-toggle button (desktop only) — collapses or expands the left pipeline rail.
- Breadcrumb — Dashboard → project name → phase code · phase name. The project name is editable inline; click and type.
- Discovery badge — shown only on brownfield projects.
- Progress percentage and bar — combined completion across all nine phases.
- Search / command palette (
⌘K) — see Command palette. - Help icon — links to the Phases doc.
- Theme toggle — light / dark.
- Profile — your personal page.
The bar is sticky; it doesn't scroll away as you move through long phases.
- Git indicator (linked projects, desktop) — shows the branch and the commit the spec was last synced with. Click it for the spec history and to restore an earlier version. See GitLab integration.
Left pipeline rail #
The vertical stack of phase markers on the left is the pipeline nav. Each marker has:
- A status dot — empty, drafting, needs-review, complete.
- A code (P-01..P-09) and an icon.
- The phase name (visible when the rail is expanded; tooltip-only when collapsed).
Click any marker to jump to that phase. Locked phases are still clickable — you just can't edit them.
The rail collapses to icon-only at lower screen widths. The toggle button at the top of the bar restores the full width.
Center editor #
The phase content. Form fields, AI-drafted sections, structured tables, whatever the phase produces. Each field is inline-edit by default — display shows the value, hovering reveals a small Pencil icon, click to edit. ⌘ Enter saves; Esc cancels.
Locked phases dim every field and disable editing. To change a locked phase, propose an amendment.
Right rail (desktop) #
A vertical column of icon buttons stacked on the right edge. Clicking one slides a panel in from the right; clicking again closes it. Only one panel is visible at a time.
| Icon | Panel |
|---|---|
| Graph | Project graph view (entities, relationships) |
| Message | Interview — AI chat |
| Share | Share settings + link |
| Paperclip | Assets — file attachments |
| Git fork | Amendments |
| File-pen | Wishes |
| Eye | Live spec preview |
| Settings | Project-specific settings, including the GitLab link |
| Git branch | GitLab sync: check, diff, push and pull. Shown at the end of the rail once the project is linked to GitLab |
Pending counts (wishes, amendments) show as small badges on the icon.
Bottom of the editor #
Each phase ends with a horizontal bar containing:
- Phase lock toggle — locks or unlocks the current phase. Changes the status dot in the rail.
- Previous phase / Next phase — jumps to the adjacent phase without going through the rail.
Mobile #
Below lg width, the left rail moves into a sheet drawer accessible from the pipeline-toggle button. The right rail's icons collapse into a single overflow menu. The center editor takes the full screen width.