Editing the sections

Each of the seven sections has an editor suited to its content: prose for free writing, structured cards where shape matters, and embedded visual tools for the rest.

Prose sections: Problem, Scope

Read as rendered markdown. Hit Edit to open a markdown editor with live preview, then Save or Cancel. Editing is disabled until the section has content (you can't edit an empty draft before the AI fills it).

Structured sections: Users, Architecture, Pages

These are always editable inline. Add, remove, and edit cards directly, and every change writes through to the backend automatically.

• Users: persona cards: a name ("Creator", "Fan") and a description.
• Architecture: five canonical rows: persistence, backend services, smart contracts, third-party integrations, deployment target. Each row's status (ok / none / warning) is derived from its content.
• Pages: a typed list of screens, each with a name, description, and its sections.

Embedded sections: Environment, User journeys

These embed a dedicated tool with its own state, independent of the rest of the PRD:

• Environment: the project's env vars panel (stack, hosts, integrations).
• User journeys: a visual canvas (see below).

Their tab indicator turns green simply when they have content.

Tab status dots

Every tab shows a status dot:

• Grey: empty
• Green: has content
• Amber: edited after approval (a pending change waiting to be re-approved)

User journeys canvas

The journeys section renders as a visual graph. Each persona gets a horizontal lane; nodes flow left to right from the persona's intent through pages and actions to a success state.

• Node types: page (rectangle), action (rounded), decision (diamond), success (green check).
• View modes: Separate (one lane per persona) or Merged (all personas in one graph).
• Interaction: click a lane to focus it and dim the others; zoom, pan, and fit-to-view; click a page node to jump to the Pages tab.