11 - Templates Catalog

The complete set of screen templates an nx-agent app may need, indexed by what the user is trying to build.

03-layout.md defines the 7 archetypes (List / Detail / Form / Workbench / Dashboard / Canvas / Focus) and 6 in-spec templates (A–F). references/attio-layout-decision-guide.md supplies the decision trees that route a screen into the right archetype.

This file fills the remaining surfaces: the use-case index, the net-new templates not yet specified, and the per-screen mapping for nx-agent.

Scope rule. When a use case is already covered by Templates A–F in 03-layout.md or by an existing decision tree in attio-layout-decision-guide.md, this file points there. New anatomy lives only for templates not specified elsewhere.

One level deeper. This file says which template to pick. 13-section-anatomy.md goes inside the template — what areas exist, what each area is for, what’s required, and the 15 canonical row patterns (Toggle, Slider, Select, Action, Info, Danger, etc.). Open 13 once you’ve picked a template here.

Prereqs: 03-layout.md, references/attio-layout-decision-guide.md.

Use-case index — what to build, where to look

Find the use case in column 1. Column 2 names the archetype. Column 3 names the template (A–F from 03-layout.md, or a Gxx letter for templates specified later in this file). Column 4 is the canonical authority — open that doc first.

Discovery / browse — many things at once

Use case	Archetype	Template	Authority
Scan many records (sort/filter/bulk)	List	Default List page (Type 1)	03-layout.md → Type 1
Visual-first picking (logos, avatars)	List	G1 Gallery grid	This doc
Pipeline / status-driven movement	List	Kanban (`<BoardView>`)	03-layout.md → Plan 2 primitives
Time-anchored events (when, not what)	List	G2 Calendar	This doc
Dependency / phase view	List	G3 Timeline	This doc
Geographic data	List	G4 Map	This doc
Hierarchical / nested data	List	G5 Tree	This doc

Detail — one thing in depth

Use case	Archetype	Template	Authority
Record with activity + properties	Detail	B (3a Split)	03-layout.md → Template B
Many distinct config surfaces	Detail	3b Tabbed full-page	03-layout.md → Detail sub-shapes
List-primary, ephemeral preview	Detail	3c Drawer	03-layout.md → Detail sub-shapes
Read-only artifact (audit entry, run result)	Detail	3a Split, no edits	03-layout.md → Template B (drop ActionBar)
Compare two versions / variants	Detail	G6 Compare/Diff	This doc

Creation / editing

Use case	Archetype	Template	Authority
≤4 fields, single screen	Form	Quick Create Dialog	06-flows.md → Pattern A
Many fields, single linear page	Form	Dedicated create page (Pattern B)	06-flows.md → Pattern B
3+ steps, branching, onboarding-grade	Focus	F (Focus wizard)	03-layout.md → Template F
CSV / JSON ingestion	Focus	G7 Bulk Import wizard	This doc
Spreadsheet-paced rapid entry	List	Inline new-row in `<DataTable>`	03-layout.md → Type 1 + DataTable

Configuration / settings

Use case	Archetype	Template	Authority
Single-column persistent settings	Form	D (Settings)	03-layout.md → Template D
Tab with list-of-items + per-item config	Form	E (Split form)	03-layout.md → Template E
Account / billing	Form	D + invoice table	03-layout.md → Template D
Team management	List	Default List + invite page	03-layout.md → Type 1
API keys / integrations	List + Focus	Default List + Focus for OAuth	03-layout.md → Type 1 + Template F
Permissions matrix	Form	G8 Permissions matrix	This doc

Dashboards / monitoring

Use case	Archetype	Template	Authority
Landing summary (KPI strip)	Dashboard	A (Dashboard)	03-layout.md → Template A
Single-metric drilldown	Dashboard	A + chart focus	03-layout.md → Template A
Real-time / live in-flight	Dashboard	C (Monitoring)	03-layout.md → Template C
Forensic event review	List	G9 Audit Log	This doc

Workflow / canvas

Use case	Archetype	Template	Authority
Visual node-graph editing	Canvas	G10 Node-Graph Canvas	This doc
Author + see effect (prompt + run)	Workbench	G11 Editor + Preview	This doc
Sequential timeline editing	Canvas	G3 Timeline (editor mode)	This doc

System / utility — every app needs these

Use case	Archetype	Template	Authority
Zero-data first-run	(in archetype)	EmptyState	05-patterns.md → Empty State
404 / 403 / 500 / offline	(in archetype)	Exception template	03-layout.md → Exception
Auth (login, SSO, 2FA)	Standalone	G12 Auth	This doc
Global search / command palette	Overlay	G13 Command Palette	This doc
Notifications inbox	Detail (3c)	G14 Notifications	This doc
Help / changelog	Form (D)	D + article list	03-layout.md → Template D
Maintenance / status	Standalone	G15 Status Page	This doc

Net-new templates

These templates are not specified elsewhere. Each entry follows a single shape: purpose · archetype · anatomy · primary actions · empty · loading · mobile · when not to use. Skip a template until you build the screen — premature primitives are debt.

G1 — Gallery card grid

Purpose. Visual-first browsing where the thumbnail does most of the discrimination work (agent avatars, voice samples, knowledge-base covers).

Archetype. List. The page is still a List page — <ListPageBar> + <PageContent spaced> — only the content area swaps <DataTable> for <CardGrid>.

Anatomy.

<ListPageBar title="Agents" actions={<Button size="sm">+ New</Button>}>
  <SearchInput />
</ListPageBar>
<PageContent spaced>
  <ContentToolbar>{/* filters */}</ContentToolbar>
  <CardGrid columns={3}>
    {items.map(i => <Card key={i.id} role="link" onClick={…}>…</Card>)}
  </CardGrid>
</PageContent>

Primary actions. ”+ New” stays in the page bar (zone ①). Card click opens detail. No per-card buttons except ghost icon-xs overflow.

Empty. <EmptyState> — same component as table-mode.

Loading. Skeleton cards in the same grid (<Skeleton className="h-40" /> × N).

Mobile. <CardGrid> already collapses to one column at <md.

When NOT to use. When the user needs to compare multiple attributes across rows — that’s a Table. Cards are for picking-by-look, tables are for scanning-by-value. Density is the deciding question: if you can’t fit ≥ 12 records in the viewport with cards, switch to a table.

G2 — Calendar view

Purpose. Records anchored to a date or time window (call schedules, agent run windows, planned events).

Archetype. List. URL-backed via ?view=calendar on a screen that earns a <ViewSwitcher>. Calendar is one view, table is another.

Anatomy.

<ListPageBar title="Schedule" actions={<Button size="sm">+ Event</Button>}>
  <ViewSwitcher views={[{id:'calendar',…},{id:'table',…}]} />
</ListPageBar>
<PageContent>
  {/* Top row: month/week/day toggle + today + arrow nav */}
  <ContentToolbar>{/* date controls */}</ContentToolbar>
  <CalendarGrid mode="month" events={events} />
</PageContent>

Primary actions. ”+ Event” in page bar. Click empty cell → quick-create dialog. Drag event → reschedule (optimistic, see 05-patterns.md → Optimistic update).

Empty per cell. Faded ”—”. Don’t render “no events” copy in every empty cell; the cell itself is the copy.

Loading. Skeleton chips inside cells, not a full-page skeleton.

Mobile. Degrade to agenda list (a flat list grouped by date). Don’t try to render a month grid below md.

When NOT to use. When time isn’t the dominant axis. A list of recordings ordered by createdat is a Table, not a Calendar — calendar implies the user picks a _date, not a record.

G3 — Timeline / Gantt view

Purpose. Sequential or dependent work (rollout phases, agent deployment stages, bulk-job progress with subtasks).

Archetype. List (read mode) or Canvas (edit mode). Pick by whether bars are draggable.

Anatomy.

[ListPageBar with date-range picker]
[PageContent]
  [horizontal time axis]
  [row label]──[bar]──[bar]──
  [row label]────[bar]────────

Primary actions. Drag bar to extend (Canvas mode). Click bar → drawer with details (List mode).

Mobile. Degrade to a list ordered by start date. Gantt does not work below md.

When NOT to use. When there are no dependencies — that’s a Calendar (time-anchored points) or a List (just records in order).

G4 — Map view

Purpose. Geographic context (call origin, customer locations, infrastructure regions).

Archetype. List. View via <ViewSwitcher>.

Anatomy.

<PageContent> (no spacing — full-bleed)
  <Map>
    [floating filter card top-left]
    [legend bottom-right]
    [cluster pins]
  </Map>
</PageContent>

Mobile. Map full-screen; toggle to a list via a pill.

When NOT to use. When location is just one column among many — render in a Table with a tiny lat/lng cell.

G5 — Tree view

Purpose. Strictly hierarchical data (workflow node IA, org chart, file folders, prompt section outline).

Archetype. List. Tree is a render shape, not a new archetype.

Anatomy. Indented rows; chevron on parents; 16px indent per depth level; max 5 visible depths before forcing horizontal scroll. Use Radix accordion-style semantics if rows expand; use plain link rows if rows are nav targets.

When NOT to use. When the hierarchy is shallow (≤2 levels) — a flat List with a “parent” column is simpler. Trees deeper than 5 levels are a sign the data model needs flattening.

G6 — Compare / Diff view

Purpose. Two versions of the same thing side-by-side (prompt versions, agent A/B configs, schema diffs).

Archetype. Detail (3a Split, repurposed). The “left main” and “right panel” become the two compared sides; activity sidebar is replaced by the diff legend.

Anatomy.

<DetailPageBar title="Compare" backTo="…" />
<div className="flex flex-1 overflow-hidden">
  <PageContent>{/* left side, scrollable */}</PageContent>
  <div className="border-l">{/* right side, scrollable, synced */}</div>
</div>

Primary actions. “Promote left” / “Promote right” in page bar (zone ①). Mode toggle (side-by-side ↔ unified) in <ContentToolbar> at the top of each side.

Mobile. Toggle between sides via a segmented control. Side-by-side is forbidden below md.

When NOT to use. When you only have one thing — that’s a Detail page, not a Compare.

G7 — Bulk Import wizard

Purpose. CSV / JSON ingestion that requires field-mapping.

Archetype. Focus. Specialization of Template F.

Anatomy. Same <FocusLayout> shell as F, with a fixed step sequence: Upload → Map → Preview → Confirm → Result. Map step has two columns: source columns (left, draggable / pickable) → target fields (right, dropzones). Preview shows the first 10 rows with validation highlights.

Primary actions. Inherits Focus action bar. Last-step button label = “Start import”.

Empty (between steps). N/A — wizards are never empty.

Loading. Per-step skeleton inside the centered content; the stepper stays visible.

See also. 06-flows.md → Import for the full flow including post-success result.

When NOT to use. Single-file, single-format upload that does not need mapping — that’s a Quick Create Dialog with a file input.

G8 — Permissions matrix

Purpose. Role × resource grid where the cell is a checkbox or scope dropdown.

Archetype. Form. Renders inside Template D (Settings) — it is one <FormSection> with a special table inside.

Anatomy.

<FormSection title="Permissions">
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead>Resource</TableHead>
        {roles.map(r => <TableHead key={r}>{r}</TableHead>)}
      </TableRow>
    </TableHeader>
    <TableBody>
      {resources.map(res => (
        <TableRow key={res}>
          <TableCell className="font-medium">{res}</TableCell>
          {roles.map(r => <TableCell key={r}><Checkbox checked={…} onChange={…}/></TableCell>)}
        </TableRow>
      ))}
    </TableBody>
  </Table>
</FormSection>
<ActionBar>…</ActionBar>

Primary actions. Sticky <ActionBar> at the bottom — Save commits the matrix. “Reset to default” lives in the section header (zone ②, outline sm).

Mobile. The matrix degrades to per-role accordion — each role becomes an expandable section listing its resources. Side-by-side roles do not work below md.

When NOT to use. When you only have ≤3 roles or ≤5 resources — render as plain <Checkbox> rows in a <FormSection> instead.

G9 — Audit Log

Purpose. Forensic event review. Every action a user or system took, with payload.

Archetype. List. The detail-on-click is a 3c Drawer because the user triages many events sequentially.

Anatomy. A dense <DataTable> with timestamp as the first column. Filters by actor, action, resource, time-range. Row click opens a 3c Drawer with the full JSON payload pretty-printed inside <pre className="font-mono text-xs">.

Density. 28px row height (the dense default — not the 32–40px of conventional lists). Audit logs are scanned, not browsed.

Primary actions. None in the page bar (audit is read-only). “Export” lives in <ContentToolbar> (zone ③).

Empty. “No events match these filters.” + “Clear filters” — never the blank-slate variant (audit is never truly empty for an established account).

Loading. Skeleton rows.

Mobile. The drawer is full-viewport. Filter chips collapse into a bottom sheet.

When NOT to use. When events are user-actionable (assign, dismiss, resolve) — that’s an Inbox (use <InboxList>), not an audit log.

G10 — Node-Graph Canvas

Purpose. Visual programming — agent workflows, automations.

Archetype. Canvas. Specialization beyond 03-layout.md’s “full-viewport canvas + overlay controls” line.

Anatomy.

[Toolbar — zoom, undo/redo, run, publish] (top, h-12, shrink-0)
[Body — full viewport, no PageContent]
  [Left palette — draggable nodes, w-56]
  [Canvas — infinite, react-flow / xyflow]
  [Right inspector — selected node config, w-80, only when selection]
  [Minimap bottom-right]

Primary actions. “Run” / “Publish” top-right of toolbar (zone ①). Node-level actions on hover.

Empty (no flow yet). “Drag a node to begin” hint centered on the canvas. Do not render an <EmptyState> — the empty canvas is itself the empty state.

Loading. Skeleton nodes positioned at last-known coords (loaded from server) until full graph loads.

Mobile. Read-only / view-only mode. Editing the graph below md is forbidden.

Save model. Auto-save Model C — 1–2 s debounce after every node move or property change. Surface a quiet “Saved 2 s ago” in the toolbar. Explicit ⌘S is a fallback. See 06-flows.md → Save / commit semantics.

When NOT to use. When the flow is linear (no branching) — that’s a Wizard or a list of steps.

G11 — Editor + Preview split

Purpose. Author + see effect. Prompt editor + sample run, code editor + rendered output, system prompt + token preview.

Archetype. Workbench. Use the existing <SplitContent> primitive.

Anatomy.

<DetailPageBar />
<SplitContent sidebarWidth="50%">
  <PromptEditor />          {/* left = author, 50% */}
  <PreviewPane />           {/* right = effect, 50% */}
</SplitContent>

Primary actions. “Run” in the page bar (zone ①). The action commits the editor’s current content and renders the preview.

Save model. Auto-save (Model C) for the editor side; the preview reflects the latest saved content (not unsaved keystrokes — that produces flicker).

Mobile. Stack vertically: editor top, preview bottom. Use a tab toggle when both can’t fit comfortably.

When NOT to use. When the preview is async / long (e.g., a full agent test run) — that’s not Editor+Preview, that’s an editor + a tests tab. The preview has to feel real-time (< 500ms) for the split to make sense.

G12 — Auth

Purpose. Login, SSO, 2FA, password reset.

Archetype. Standalone (exempt from <AppLayout> — see 03-layout.md → Exemptions).

Anatomy.

<div className="grid h-screen place-items-center">
  <Card className="w-[400px]">
    <CardHeader><BrandLogo /><H2>Sign in</H2></CardHeader>
    <CardContent className="space-y-4">
      <FormField name="email" />
      <FormField name="password" />
      <FormError />
      <Button className="w-full" type="submit">Sign in</Button>
      <Separator />
      <Button variant="outline" className="w-full">Continue with SSO</Button>
    </CardContent>
  </Card>
</div>

2FA variant. Replace the email/password form with a 6-digit code input grid + “Resend code” link.

Loading. <ActionButton mutation={loginMutation}> for submit; no skeleton (the form is always rendered).

Primary actions. Full-width button is allowed inside the auth <Card> (one of the four card-allowed contexts in 03-layout.md → Cards). Outside auth, full-width buttons remain forbidden.

See also. 06-flows.md → Auth flows. The flow doc owns the redirect / token-refresh / sign-out logic; this template owns only the layout.

G13 — Command Palette (⌘K)

Purpose. Power-user global jump — pages, records, actions.

Archetype. Overlay. Lives outside the page archetype as a portal-rendered modal.

Anatomy.

[Modal centered top-third, max-w-2xl]
  [Search input — auto-focused on open]
  [Grouped results]
    Recents · 3
    Pages · 5
    Records · matching query
    Actions · matching query
  [Footer: ↑↓ navigate · ↵ select · esc close]

Primary actions. Each result is the action — Enter selects.

Empty. “No results” + suggestion: “Try a record name, page name, or action.” Never an EmptyState card — the palette is too tight.

Loading. Spinner inside the search input. Result groups appear progressively as their data loads.

Keyboard contract. ⌘K opens. ↑↓ moves selection. Enter activates. Esc closes. ⌘+number jumps to a result group. The palette is keyboard-only (mouse works but is slower) — never add per-row icons.

Mobile. Full-viewport sheet. ⌘K is rare on mobile; expose a ⌕ icon in <ListPageBar> instead.

When NOT to use. When the action is page-local — that belongs in a <DropdownMenu> or a /-focused search input. Command palette is for app-wide jumps.

G14 — Notifications inbox

Purpose. App-level inbox of events that affect the user (assignments, mentions, approval requests).

Archetype. Detail (3c Drawer) or List with <InboxList> — pick by whether the user triages here all day.

Anatomy. Use <InboxList> (Plan 2 primitive — see 03-layout.md → Plan 2 primitives). Left list grouped by date. Right preview with quick actions. j / k / e keyboard triage.

Primary actions. “Mark all read” in the page bar (zone ①, outline sm). Per-item: archive, mark read, navigate-to-source.

Empty. “You’re all caught up.” + “All notifications appear here.” Never offer a CTA — there’s nothing to create.

Loading. Skeleton list items.

Mobile. Single column; tap an item to navigate to a full-screen detail.

When NOT to use. When the events are passive (no user action required) — that’s a Toast or an Activity feed inside a record (3a Split right panel).

G15 — Status / Maintenance page

Purpose. System health communication. Public or in-app.

Archetype. Standalone (exempt from <AppLayout>).

Anatomy.

[Big banner — green/yellow/red]
  Status · "All systems normal" · Last updated 2 min ago
[Grid of components — auth, api, db, etc.]
  Component name · status pill · uptime % · graph
[Incident timeline below]
  Date · title · status · last update

Primary actions. “Subscribe to updates” (outline) in the banner. “Report an issue” (link) in the footer.

Mobile. Single-column stack. The banner stays full-width; the component grid becomes a list.

When NOT to use. As an in-app modal — status pages are URLs the user visits, not surfaces inside the app. The in-app equivalent is an offline banner (05-patterns.md → Error handling hierarchy).

Master use-case decision tree

When you don’t know which template to reach for. Walk top-down; first “yes” wins. Most decisions land you in 03-layout.md or attio-layout-decision-guide.md — this tree adds the upstream “which doc do I open” step.

Q1. Is this a system surface (auth, search, status, exception)?
    yes → G12 / G13 / G15 / Exception template (above).
    no  → Q2.

Q2. Is the user creating something?
    yes → How big a commit?
      - ≤4 fields, single screen        → Quick Create Dialog (06-flows.md Pattern A)
      - many fields, single linear page → Dedicated create page (06-flows.md Pattern B)
      - 3+ branching steps              → Template F (Focus wizard)
      - CSV ingestion                   → G7 Bulk Import
      - spreadsheet rapid entry         → Inline new-row in <DataTable>
    no  → Q3.

Q3. Is the user configuring (per-tenant, persistent settings)?
    yes → Many surfaces or one?
      - one form, top-to-bottom         → Template D (Settings)
      - tab with list-of-items + config → Template E (Split form)
      - role × resource grid            → G8 Permissions matrix
    no  → Q4.

Q4. Is the user looking at ONE thing?
    yes → How is it used? → attio-layout-decision-guide.md DT2
      - record with activity            → Template B (Detail 3a Split)
      - many config surfaces            → Detail 3b Tabbed
      - list-primary, ephemeral preview → Detail 3c Drawer
      - compare two versions            → G6 Compare/Diff
      - visual logic editor             → G10 Node-Graph Canvas
      - author + see effect             → G11 Editor + Preview
    no  → Q5.

Q5. Is the user looking at MANY things?
    yes → Dominant access pattern? → attio-layout-decision-guide.md DT1
      - sort/filter/scan attributes     → Template Type 1 List
      - visual identity matters         → G1 Gallery card grid
      - status/pipeline movement        → Kanban (BoardView)
      - time-anchored                   → G2 Calendar / G3 Timeline
      - geographic                      → G4 Map
      - hierarchical                    → G5 Tree
      - forensic events                 → G9 Audit Log
      - actionable events (triage)      → G14 Notifications inbox
    no  → Q6.

Q6. Is the user monitoring?
    yes → Real-time vs summary?
      - summary KPI strip               → Template A (Dashboard)
      - real-time / live                → Template C (Monitoring)
      - single-metric drilldown         → Template A + chart focus
    no  → reconsider; one of Q1–Q5 should have matched.

If Q1–Q6 all return no, the screen is probably misconceived — pause and brainstorm before designing.

Per-screen mapping — nx-agent routes

The authoritative per-route map lives in references/attio-layout-decision-guide.md → Per-screen mapping. The table below extends it with templates that emerged after that doc was written.

Route	Archetype	Template
`/agents`	List	Type 1 + optional G1 toggle
`/agents/:id`	Detail	B (3a Split)
`/agents/:id/workflow`	Canvas	G10 Node-Graph
`/agents/:id/tools`	Form	E (Split form)
`/agents/:id/knowledge-base`	Form	E (Split form)
`/agents/:id/widget`	Workbench	G11 Editor + Preview
`/agents/:id/tests`	List	Type 1 + 3c Drawer for run details
`/agents/new`	Focus	F (Focus wizard)
`/agents/import`	Focus	G7 Bulk Import
`/tools`	List	Type 1
`/review`	List	Type 1 + Kanban via `<ViewSwitcher>`
`/review/:id`	Detail	B (3a Split) — earned by activity
`/account/billing`	Form	D (Settings)
`/account/team`	List	Type 1
`/account/permissions`	Form	G8 Permissions matrix
`/audit`	List	G9 Audit Log
`/notifications`	List	G14 Notifications
`/login`, `/2fa`	Standalone	G12 Auth
`/status`	Standalone	G15 Status
(overlay, ⌘K everywhere)	Overlay	G13 Command Palette

Update this table whenever a new route lands. The compliance gate is: a route exists, the route has a template assigned in this table, and the implementation matches the template’s authority doc.

Next: 12-cross-cutting-patterns.md. See also references/attio-layout-decision-guide.md for the per-screen decision walkthrough.