Document detail recipe
Rendered
Goal
When a founder, board secretary, or counsel opens a specific document (a SAFE, a board consent, an indemnification agreement), they need to verify (1) where it is in its lifecycle, (2) who's signed, (3) what tokens / scopes touched it, and (4) what they can do next (re-send, void, archive). The document-detail recipe puts the lifecycle bar at the top and lays the data + actions out so the user can read top-to-bottom without scrolling for action affordances.
Layout breakdown
Two-column inspector inside the authenticated dashboard shell. Region map:
┌─ AppBreadcrumb ──────────────────────────────────────────────────┐
│ Entities › Waypoint › Documents › Q3 SAFE (doc_a1b2c3) │
├─ Section: Lifecycle bar (full-bleed Pill row) ────────────────────┤
│ ● Draft ─── ● Sent ─── ◌ Partially signed ─── Executed │
├─ Section: Body (8/12 + 4/12 at ≥ 1024px) ─────────────────────────┤
│ ┌── Primary column (8/12) ──┐ ┌── Action rail (4/12) ──┐ │
│ │ Card: Identity │ │ Card: Actions │ │
│ │ Doc ID doc_… │ │ [Send reminder] │ │
│ │ Type SAFE │ │ [Void document] │ │
│ │ Template v3.1 │ │ [Download PDF] │ │
│ │ Created 2026-… │ │ Card: Tokens that │ │
│ │ Authorized by res_… │ │ touched this │ │
│ │ SignatureStack │ │ • tier_3 token (…) │ │
│ │ Pending signers + envelope│ │ • tier_2 token (…) │ │
│ │ Card: Audit trail │ │ Card: Related │ │
│ │ Timeline.* feed scoped │ │ • Subscription Agmt │ │
│ │ to this document │ │ • Side letter │ │
│ └────────────────────────────┘ └─────────────────────────┘ │
└────────────────────────────────────────────────────────────────────┘Component manifest
| Region | Component | Why over alternatives |
|---|---|---|
| Breadcrumb | AppBreadcrumb | Hierarchical context; mono crumb for the doc ID |
| Lifecycle bar | SlidingPill with size="md" + lifecycle dots | The state-machine progression reads as a switcher; SlidingPill conveys "this is the current state" |
| Identity card | Card with a 2-col grid | Plain elevated container; values use MonoChip for IDs |
| Signature region | SignatureStack | The canonical multi-signer surface — preserves the envelope semantics |
| Audit trail | Timeline.* (Timeline) | Composable event-feed atoms scoped to the document |
| Action rail | Card + Button | Stacked buttons in the rail; primary action ("Send reminder") at the top |
| Tokens touched | Card + token list | Plain card; each token row links to the token-detail page |
| Related documents | Card + link list | Cross-document links from the resolution's authorization chain |
Responsive behaviour
| Breakpoint | Layout |
|---|---|
< 768px | Single column. Lifecycle bar full-width; Identity, SignatureStack, Audit, Actions, Tokens, Related stack vertically |
768–1023px | Single column with wider cards |
≥ 1024px | Two columns: Identity + SignatureStack + Audit in primary (8/12); Actions + Tokens + Related in rail (4/12) |
States
| State | Trigger | Behaviour |
|---|---|---|
| Draft | Document.execution_status: draft | Lifecycle bar shows "Draft" filled; SignatureStack hidden; Actions card shows "Send for signature" primary |
| Sent | execution_status: sent | Lifecycle bar advances; SignatureStack shows envelope with zero signatures; Actions card shows "Re-send" + "Void" |
| Partially signed | execution_status: partially_signed | Lifecycle bar shows current state; SignatureStack shows per-signer pills; primary action "Send reminder" |
| Executed | execution_status: executed | Lifecycle bar fully advanced; SignatureStack converts to static audit list; Actions card shows "Download PDF" + "Archive" |
| Void | execution_status: void | Lifecycle bar shows a single red "Void" state; banner above body explains who voided and when |
| Superseded | execution_status: superseded | Banner links to the superseding document; body is read-only |
Implementation
Source: apps/app/app/(authenticated)/documents/[id]/page.tsx. Server component; document data fetched server-side. The lifecycle bar reads Document.execution_status and maps to the SlidingPill items. SignatureStack hydrates from Document.signing_envelope.recipients[].
Source
apps/app/app/(authenticated)/documents/[id]/page.tsxDocs corpus
The Matter docs landing — pill-shaped Cmd+K search at the top, endpoint-card grid below with method badges, lifecycle-grouped sections (Create / Manage / Exit / Platform), and inline TOC. Canonical layout in apps/docs/.
Board meeting
Full-screen board-meeting surface — agenda, attendance, action items, materials, pending consents. The canonical board-composer layout in apps/app/(authenticated)/entities/[id]/board/.