diff --git a/docs/design/drawing-card-schema.md b/docs/design/drawing-card-schema.md
new file mode 100644
index 00000000..1f7ac869
--- /dev/null
+++ b/docs/design/drawing-card-schema.md
@@ -0,0 +1,108 @@
+# Drawing-card JSON schema (T-317 / D-91 / D-103) — draft
+
+Status: **draft for build**, SVG-substrate model (D-103), refined from the
+T-317 wireframe set, 2026-06-28.
+
+## Model — what this is, and what it is NOT
+
+- **SVG is the substrate.** The card's primitive / scene-graph layer **is SVG**;
+  the clide-owned `CustomPaint` **SVG renderer (T-320) is the engine** the rest
+  builds on (D-103).
+- It is **not** the HTML Canvas 2D API and **not** a third-party package. SVG is
+  a document *format* we render ourselves — "own the rendering stack" holds.
+  ("HTML `<canvas>`" in D-91 was only a mental model, chosen to reject Obsidian's
+  `.canvas` schema; never an API to port.)
+- The card is **two layers**:
+  1. **SVG content** — painted by the SVG renderer.
+  2. A thin **Flutter overlay** — the clide chrome that is *not* content
+     (per-object label/description captions, lightbox affordance), anchored to
+     SVG elements via `data-*` attributes.
+- **Display-only** (D-78); re-rendered from the document. The **graph template
+  is the live-widget exception** (below).
+
+## Document envelope
+
+```json
+{
+  "card":     { "label": "Build pipeline", "description": "…" },  // optional caption (overlay)
+  "template": "icon",                                            // optional → template sugar
+  "…template fields…": "…",
+  "svg":      "<svg viewBox='0 0 480 360'>…</svg>"               // primitive mode = raw SVG
+  // or "svgPath": "diagram.svg"
+}
+```
+
+- **Template mode** — `template` names a component; clide lowers it to SVG
+  (+ overlay anchors).
+- **Primitive mode** — `svg` (inline) or `svgPath` — arbitrary SVG, the escape
+  hatch. One less invented format; external SVG / graphviz / mermaid render free.
+- Card size comes from the SVG `viewBox` (or `width`/`height`); the painter scales
+  to the pane width.
+
+## Primitive layer = a bounded SVG subset
+
+The renderer supports the subset our templates + d2 / graphviz / mermaid emit —
+**not** a full SVG engine:
+
+- shapes: `rect`, `line`, `polyline`, `polygon`, `circle`, `ellipse`, `path`
+- `text` (incl. the bundled **Phosphor** font for glyphs)
+- `image` (`href` → resolved path; raster)
+- `g` + `transform` (translate / scale), basic `fill` / `stroke` /
+  `stroke-width` / `opacity`, `rx`/`ry` corners
+- **Out of scope** unless a template needs it (decide then): filters,
+  animations, rich gradients, `foreignObject`, scripting.
+
+`color` everywhere is an **arbitrary value** (hex / named) — content, not a clide
+`SurfaceTokens` token (D-7 governs clide chrome, not rendered content).
+
+## Overlay (clide chrome, layered over the SVG)
+
+Flutter widgets anchored to SVG elements that carry:
+
+- `data-label` → themed caption beneath the element's bounding box
+- `data-description` → secondary caption line
+- `data-lightbox` (on `<image>`) → click-to-zoom affordance
+
+Templates emit these attributes; raw-SVG authors may add them. The icon
+template's `data-label` is also the bridge to the interaction-zone choice list.
+
+## Templates (lower to SVG + overlay)
+
+| template | lowers to | ticket |
+|----------|-----------|--------|
+| `image`   | `<image href>` + `data-lightbox` + caption attrs | T-316 |
+| `icon`    | `<text font=Phosphor>` glyphs at 10,11,12,13,14,15,18,20,24,32,48 + hero 52; per-item `data-label`/`data-description`/color | T-313 |
+| `compare` | two+ `<image>` side by side in a `<g>`, per-image `data-lightbox` + captions | T-319 |
+| `svg`     | identity — the source *is* the SVG | T-320 |
+| `d2`      | compile d2 → SVG → render | T-494 |
+| `graph`   | **exception** — hosts the live native graph subsystem widget (D-46 / T-323), not static SVG | T-321 |
+
+## CLI / transport (D-6 parity)
+
+`clide draw --file doc.json` (or inline JSON). **Flutter-free** handler validates,
+publishes on a `draw` MessageBus channel; the Claude extension injects the card —
+mirroring `image.show`. The shipped `image show` (T-249/T-252) stays as
+convenience and migrates onto this card later (D-91). `--stdin` deferred (T-315);
+`--file` is the path.
+
+## Error contract
+
+Unknown `template`, unparseable / unsupported SVG, bad `href` / glyph / `color`
+→ honest `IpcError` (`userError` / `notFound`), surfaced like `image.show` —
+**never a blank card**.
+
+## Build sequence (D-103)
+
+1. **T-320 — the SVG renderer (engine):** parse + paint the bounded SVG subset.
+2. **T-318 — envelope + template dispatch + the Flutter overlay** (`data-*` →
+   captions / lightbox) on top of the renderer.
+3. **Templates:** image / icon (T-316 / T-313) → compare (T-319) → d2 (T-494) →
+   graph (T-321, after the graph subsystem T-323).
+
+## Open decisions (resolve before the relevant step)
+
+- **SVG subset boundary (T-320):** now the substrate — bound it to what our
+  templates + d2 / graphviz emit; expand deliberately.
+- **D2 compiler (T-494):** shell out to a `d2` binary as a pql-style supporter
+  tool, vs. vendor.
+- **Graph (T-321):** gated on the native graph subsystem (D-46 / T-323).
diff --git a/docs/design/wireframes/conversation/canvas-core.json b/docs/design/wireframes/conversation/canvas-core.json
new file mode 100644
index 00000000..433942ce
--- /dev/null
+++ b/docs/design/wireframes/conversation/canvas-core.json
@@ -0,0 +1,64 @@
+{
+  "name": "Drawing Card Core (T-318)",
+  "shapes": {
+    "title": { "type": "Text", "left": 60, "top": 38, "text": "clide drawing card — core: canvas engine + JSON schema + template dispatch (T-318)", "fontColor": "#c8d0e0", "fontSize": 14 },
+    "subtitle": { "type": "Text", "left": 60, "top": 60, "text": "the dispatch shell under every card type — a JSON document renders as raw primitives OR via a named template that lowers onto the same primitive scene (hybrid)", "fontColor": "#6a7280", "fontSize": 11 },
+    "cliLine": { "type": "Text", "left": 60, "top": 84, "text": "clide draw --file doc.json   —   Flutter-free handler → MessageBus → Claude-extension injection (mirrors image.show)", "fontColor": "#6a7280", "fontSize": 11 },
+
+    "inputBox": { "type": "Rectangle", "left": 400, "top": 110, "width": 300, "height": 58, "fillColor": "#14171c", "strokeColor": "#333340", "corners": [6, 6, 6, 6] },
+    "inT": { "type": "Text", "parent": "inputBox", "left": 418, "top": 122, "text": "Drawing-card JSON document", "fontColor": "#e2e8f5", "fontSize": 13 },
+    "inT2": { "type": "Text", "parent": "inputBox", "left": 418, "top": 144, "text": "{ \"template\"?: \"…\", \"objects\": [ … ] }", "fontColor": "#9aa3b5", "fontSize": 11 },
+
+    "coreBox": { "type": "Rectangle", "left": 360, "top": 200, "width": 380, "height": 60, "fillColor": "#1a1e24", "strokeColor": "#4a5570", "corners": [8, 8, 8, 8] },
+    "coreT": { "type": "Text", "parent": "coreBox", "left": 384, "top": 212, "text": "Drawing-card core (T-318)", "fontColor": "#e2e8f5", "fontSize": 14 },
+    "coreT2": { "type": "Text", "parent": "coreBox", "left": 384, "top": 234, "text": "JSON schema · primitive renderer · template dispatch", "fontColor": "#8a93a6", "fontSize": 11 },
+
+    "primBox": { "type": "Rectangle", "left": 110, "top": 312, "width": 360, "height": 150, "fillColor": "#161a20", "strokeColor": "#333340", "corners": [8, 8, 8, 8] },
+    "primH": { "type": "Text", "parent": "primBox", "left": 130, "top": 326, "text": "PRIMITIVE scene-graph", "fontColor": "#e2e8f5", "fontSize": 13 },
+    "primS": { "type": "Text", "parent": "primBox", "left": 130, "top": 348, "text": "objects drawn at coordinates", "fontColor": "#8a93a6", "fontSize": 11 },
+    "pc1": { "type": "Rectangle", "parent": "primBox", "left": 130, "top": 376, "width": 56, "height": 24, "fillColor": "#2a3040", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4] },
+    "pc1t": { "type": "Text", "parent": "pc1", "left": 144, "top": 382, "text": "rect", "fontColor": "#c8d0e0", "fontSize": 10 },
+    "pc2": { "type": "Rectangle", "parent": "primBox", "left": 194, "top": 376, "width": 56, "height": 24, "fillColor": "#2a3040", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4] },
+    "pc2t": { "type": "Text", "parent": "pc2", "left": 208, "top": 382, "text": "line", "fontColor": "#c8d0e0", "fontSize": 10 },
+    "pc3": { "type": "Rectangle", "parent": "primBox", "left": 258, "top": 376, "width": 56, "height": 24, "fillColor": "#2a3040", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4] },
+    "pc3t": { "type": "Text", "parent": "pc3", "left": 272, "top": 382, "text": "text", "fontColor": "#c8d0e0", "fontSize": 10 },
+    "pc4": { "type": "Rectangle", "parent": "primBox", "left": 322, "top": 376, "width": 56, "height": 24, "fillColor": "#2a3040", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4] },
+    "pc4t": { "type": "Text", "parent": "pc4", "left": 334, "top": 382, "text": "glyph", "fontColor": "#c8d0e0", "fontSize": 10 },
+    "pc5": { "type": "Rectangle", "parent": "primBox", "left": 386, "top": 376, "width": 56, "height": 24, "fillColor": "#2a3040", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4] },
+    "pc5t": { "type": "Text", "parent": "pc5", "left": 398, "top": 382, "text": "image", "fontColor": "#c8d0e0", "fontSize": 10 },
+    "primNote": { "type": "Text", "parent": "primBox", "left": 130, "top": 420, "text": "{ \"type\": \"rect\", \"x\":.., \"y\":.., \"w\":.., \"h\":.. }", "fontColor": "#6a7280", "fontSize": 10 },
+
+    "tmplBox": { "type": "Rectangle", "left": 640, "top": 312, "width": 360, "height": 212, "fillColor": "#161a20", "strokeColor": "#333340", "corners": [8, 8, 8, 8] },
+    "tmplH": { "type": "Text", "parent": "tmplBox", "left": 660, "top": 326, "text": "TEMPLATE dispatch", "fontColor": "#e2e8f5", "fontSize": 13 },
+    "tmplS": { "type": "Text", "parent": "tmplBox", "left": 660, "top": 348, "text": "named component → predefined renderer (children)", "fontColor": "#8a93a6", "fontSize": 11 },
+    "tc1": { "type": "Rectangle", "parent": "tmplBox", "left": 660, "top": 374, "width": 150, "height": 26, "fillColor": "#2a3040", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4] },
+    "tc1t": { "type": "Text", "parent": "tc1", "left": 674, "top": 381, "text": "image  ·  T-316", "fontColor": "#c8d0e0", "fontSize": 10 },
+    "tc2": { "type": "Rectangle", "parent": "tmplBox", "left": 822, "top": 374, "width": 150, "height": 26, "fillColor": "#2a3040", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4] },
+    "tc2t": { "type": "Text", "parent": "tc2", "left": 836, "top": 381, "text": "icon  ·  T-313", "fontColor": "#c8d0e0", "fontSize": 10 },
+    "tc3": { "type": "Rectangle", "parent": "tmplBox", "left": 660, "top": 408, "width": 150, "height": 26, "fillColor": "#2a3040", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4] },
+    "tc3t": { "type": "Text", "parent": "tc3", "left": 674, "top": 415, "text": "svg  ·  T-320", "fontColor": "#c8d0e0", "fontSize": 10 },
+    "tc4": { "type": "Rectangle", "parent": "tmplBox", "left": 822, "top": 408, "width": 150, "height": 26, "fillColor": "#2a3040", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4] },
+    "tc4t": { "type": "Text", "parent": "tc4", "left": 836, "top": 415, "text": "d2  ·  T-494", "fontColor": "#c8d0e0", "fontSize": 10 },
+    "tc5": { "type": "Rectangle", "parent": "tmplBox", "left": 660, "top": 442, "width": 150, "height": 26, "fillColor": "#2a3040", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4] },
+    "tc5t": { "type": "Text", "parent": "tc5", "left": 674, "top": 449, "text": "compare  ·  T-319", "fontColor": "#c8d0e0", "fontSize": 10 },
+    "tc6": { "type": "Rectangle", "parent": "tmplBox", "left": 822, "top": 442, "width": 150, "height": 26, "fillColor": "#2a3040", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4] },
+    "tc6t": { "type": "Text", "parent": "tc6", "left": 836, "top": 449, "text": "graph  ·  T-321", "fontColor": "#c8d0e0", "fontSize": 10 },
+    "tmplNote": { "type": "Text", "parent": "tmplBox", "left": 660, "top": 486, "text": "{ \"template\": \"svg\", \"source\": … }", "fontColor": "#6a7280", "fontSize": 10 },
+
+    "lowerLab": { "type": "Text", "left": 486, "top": 380, "text": "lower onto the", "fontColor": "#c8d8f0", "fontSize": 10 },
+    "lowerLab2": { "type": "Text", "left": 486, "top": 396, "text": "primitive scene (hybrid)", "fontColor": "#c8d8f0", "fontSize": 10 },
+
+    "canvasBox": { "type": "Rectangle", "left": 320, "top": 556, "width": 400, "height": 64, "fillColor": "#1a1e24", "strokeColor": "#4a5570", "corners": [8, 8, 8, 8] },
+    "cvT": { "type": "Text", "parent": "canvasBox", "left": 344, "top": 568, "text": "CustomPaint canvas — in the conversation pane", "fontColor": "#e2e8f5", "fontSize": 12 },
+    "cvT2": { "type": "Text", "parent": "canvasBox", "left": 344, "top": 590, "text": "+ shared per-object label / description widget (only when present)", "fontColor": "#8a93a6", "fontSize": 10 },
+
+    "foot": { "type": "Text", "left": 60, "top": 638, "text": "Display-only (D-78). Unknown template / primitive → clear userError. Templates (image · icon · svg · d2 · compare · graph) are separate children of this engine.", "fontColor": "#6a7280", "fontSize": 11 }
+  },
+  "connectors": {
+    "c1": { "tailId": "inputBox", "headId": "coreBox", "strokeColor": "#c8d8f0" },
+    "c2": { "tailId": "coreBox", "headId": "primBox", "strokeColor": "#6a7a98" },
+    "c3": { "tailId": "coreBox", "headId": "tmplBox", "strokeColor": "#6a7a98" },
+    "c4": { "tailId": "tmplBox", "headId": "primBox", "strokeColor": "#c8d8f0" },
+    "c5": { "tailId": "primBox", "headId": "canvasBox", "strokeColor": "#c8d8f0" }
+  }
+}
diff --git a/docs/design/wireframes/conversation/canvas-core.png b/docs/design/wireframes/conversation/canvas-core.png
new file mode 100644
index 00000000..88bf8829
Binary files /dev/null and b/docs/design/wireframes/conversation/canvas-core.png differ
diff --git a/docs/design/wireframes/conversation/compare-card.json b/docs/design/wireframes/conversation/compare-card.json
new file mode 100644
index 00000000..f994528c
--- /dev/null
+++ b/docs/design/wireframes/conversation/compare-card.json
@@ -0,0 +1,40 @@
+{
+  "name": "Compare / Before-After Card (T-319)",
+  "shapes": {
+    "title": { "type": "Text", "left": 60, "top": 40, "text": "clide drawing card — compare / before-after (T-319)", "fontColor": "#c8d0e0", "fontSize": 14 },
+    "subtitle": { "type": "Text", "left": 60, "top": 62, "text": "two (or more) images side by side; each with an optional label + description and lightbox-on-click — shares the image template", "fontColor": "#6a7280", "fontSize": 11 },
+
+    "jsonBox": { "type": "Rectangle", "left": 60, "top": 92, "width": 600, "height": 116, "fillColor": "#14171c", "strokeColor": "#333340", "corners": [6, 6, 6, 6] },
+    "j1": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 104, "text": "{ \"template\": \"compare\", \"items\": [", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "j2": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 126, "text": "  { \"path\": \"before.png\", \"label\": \"Before\", \"description\": \"…\" },", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "j3": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 148, "text": "  { \"path\": \"after.png\",  \"label\": \"After\",  \"description\": \"…\" }", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "j4": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 170, "text": "] }", "fontColor": "#9aa3b5", "fontSize": 11 },
+
+    "cli": { "type": "Text", "left": 60, "top": 226, "text": "clide draw --file compare.json", "fontColor": "#c8d8f0", "fontSize": 12 },
+
+    "card": { "type": "Rectangle", "left": 60, "top": 262, "width": 960, "height": 278, "fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [8, 8, 8, 8] },
+    "cardLabel": { "type": "Text", "parent": "card", "left": 84, "top": 282, "text": "HUD — before / after", "fontColor": "#e2e8f5", "fontSize": 16 },
+    "vdiv": { "type": "Rectangle", "parent": "card", "left": 540, "top": 300, "width": 1, "height": 216, "fillColor": "#333340", "strokeColor": "#333340" },
+
+    "labelL": { "type": "Text", "parent": "card", "left": 84, "top": 312, "text": "Before", "fontColor": "#e2e8f5", "fontSize": 14 },
+    "descL": { "type": "Text", "parent": "card", "left": 84, "top": 334, "text": "cramped status row", "fontColor": "#8a93a6", "fontSize": 11 },
+    "imgL": { "type": "Rectangle", "parent": "card", "left": 84, "top": 356, "width": 430, "height": 150, "fillColor": "#2a3040", "strokeColor": "#333340", "corners": [4, 4, 4, 4] },
+    "imgLname": { "type": "Text", "parent": "imgL", "left": 256, "top": 424, "text": "before.png", "fontColor": "#6a7280", "fontSize": 12 },
+    "zoomL": { "type": "Rectangle", "parent": "imgL", "left": 470, "top": 364, "width": 36, "height": 18, "fillColor": "#1a1e24", "strokeColor": "#3a4250", "corners": [3, 3, 3, 3] },
+    "zoomLt": { "type": "Text", "parent": "zoomL", "left": 476, "top": 367, "text": "zoom", "fontColor": "#8a93a6", "fontSize": 9 },
+
+    "labelR": { "type": "Text", "parent": "card", "left": 566, "top": 312, "text": "After", "fontColor": "#e2e8f5", "fontSize": 14 },
+    "descR": { "type": "Text", "parent": "card", "left": 566, "top": 334, "text": "roomy, aligned status row", "fontColor": "#8a93a6", "fontSize": 11 },
+    "imgR": { "type": "Rectangle", "parent": "card", "left": 566, "top": 356, "width": 430, "height": 150, "fillColor": "#2a3040", "strokeColor": "#333340", "corners": [4, 4, 4, 4] },
+    "imgRname": { "type": "Text", "parent": "imgR", "left": 740, "top": 424, "text": "after.png", "fontColor": "#6a7280", "fontSize": 12 },
+    "zoomR": { "type": "Rectangle", "parent": "imgR", "left": 952, "top": 364, "width": 36, "height": 18, "fillColor": "#1a1e24", "strokeColor": "#3a4250", "corners": [3, 3, 3, 3] },
+    "zoomRt": { "type": "Text", "parent": "zoomR", "left": 958, "top": 367, "text": "zoom", "fontColor": "#8a93a6", "fontSize": 9 },
+
+    "lightboxCap": { "type": "Text", "parent": "card", "left": 84, "top": 516, "text": "click either image → lightbox (shared with the image card)", "fontColor": "#6a7280", "fontSize": 10 },
+
+    "foot": { "type": "Text", "left": 60, "top": 562, "text": "Two or more items, side by side. Per-object label + description via the shared widget (T-318). Display-only (D-78).", "fontColor": "#6a7280", "fontSize": 11 }
+  },
+  "connectors": {
+    "flow": { "tailId": "jsonBox", "headId": "card", "strokeColor": "#3a4250" }
+  }
+}
diff --git a/docs/design/wireframes/conversation/compare-card.png b/docs/design/wireframes/conversation/compare-card.png
new file mode 100644
index 00000000..5c4f335e
Binary files /dev/null and b/docs/design/wireframes/conversation/compare-card.png differ
diff --git a/docs/design/wireframes/conversation/d2-render-card.json b/docs/design/wireframes/conversation/d2-render-card.json
new file mode 100644
index 00000000..e4ed223c
--- /dev/null
+++ b/docs/design/wireframes/conversation/d2-render-card.json
@@ -0,0 +1,58 @@
+{
+  "name": "D2 Diagram Card",
+  "shapes": {
+    "title": { "type": "Text", "left": 60, "top": 40, "text": "clide drawing card — D2 diagram (T-494 · separate type, reuses the SVG widget T-320)", "fontColor": "#c8d0e0", "fontSize": 14 },
+    "subtitle": { "type": "Text", "left": 60, "top": 62, "text": "the rendered diagram leads; the d2 source folds into a collapsed “view d2 source” disclosure (collapser pattern, T-305)", "fontColor": "#6a7280", "fontSize": 11 },
+
+    "card1": { "type": "Rectangle", "left": 60, "top": 100, "width": 460, "height": 302, "fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [8, 8, 8, 8] },
+    "label1": { "type": "Text", "parent": "card1", "left": 84, "top": 122, "text": "Build pipeline", "fontColor": "#e2e8f5", "fontSize": 16 },
+    "region1": { "type": "Rectangle", "parent": "card1", "left": 84, "top": 154, "width": 412, "height": 180, "fillColor": "#14171c", "strokeColor": "#2a3040", "corners": [4, 4, 4, 4] },
+    "wm1": { "type": "Text", "parent": "region1", "left": 462, "top": 314, "text": "SVG", "fontColor": "#39424f", "fontSize": 11 },
+    "n1": { "type": "Rectangle", "parent": "region1", "left": 108, "top": 232, "width": 72, "height": 30, "fillColor": "#2a3040", "strokeColor": "#6a7a98", "corners": [4, 4, 4, 4] },
+    "n1t": { "type": "Text", "parent": "n1", "left": 124, "top": 241, "text": "fetch", "fontColor": "#c8d0e0", "fontSize": 11 },
+    "n2": { "type": "Rectangle", "parent": "region1", "left": 212, "top": 232, "width": 72, "height": 30, "fillColor": "#2a3040", "strokeColor": "#6a7a98", "corners": [4, 4, 4, 4] },
+    "n2t": { "type": "Text", "parent": "n2", "left": 228, "top": 241, "text": "build", "fontColor": "#c8d0e0", "fontSize": 11 },
+    "n3": { "type": "Rectangle", "parent": "region1", "left": 340, "top": 196, "width": 72, "height": 30, "fillColor": "#2a3040", "strokeColor": "#6a7a98", "corners": [4, 4, 4, 4] },
+    "n3t": { "type": "Text", "parent": "n3", "left": 360, "top": 205, "text": "test", "fontColor": "#c8d0e0", "fontSize": 11 },
+    "n4": { "type": "Rectangle", "parent": "region1", "left": 340, "top": 268, "width": 72, "height": 30, "fillColor": "#2a3040", "strokeColor": "#6a7a98", "corners": [4, 4, 4, 4] },
+    "n4t": { "type": "Text", "parent": "n4", "left": 352, "top": 277, "text": "deploy", "fontColor": "#c8d0e0", "fontSize": 11 },
+    "disc1": { "type": "Rectangle", "parent": "card1", "left": 84, "top": 348, "width": 412, "height": 34, "fillColor": "#181c22", "strokeColor": "#2a3040", "corners": [4, 4, 4, 4] },
+    "chev1": { "type": "Text", "parent": "disc1", "left": 98, "top": 356, "text": "▸", "fontColor": "#8a93a6", "fontSize": 13 },
+    "disc1t": { "type": "Text", "parent": "disc1", "left": 118, "top": 358, "text": "view d2 source", "fontColor": "#8a93a6", "fontSize": 12 },
+    "stateCap1": { "type": "Text", "left": 84, "top": 412, "text": "collapsed — diagram only", "fontColor": "#6a7280", "fontSize": 11 },
+
+    "card2": { "type": "Rectangle", "left": 560, "top": 100, "width": 460, "height": 384, "fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [8, 8, 8, 8] },
+    "label2": { "type": "Text", "parent": "card2", "left": 584, "top": 122, "text": "Build pipeline", "fontColor": "#e2e8f5", "fontSize": 16 },
+    "region2": { "type": "Rectangle", "parent": "card2", "left": 584, "top": 154, "width": 412, "height": 180, "fillColor": "#14171c", "strokeColor": "#2a3040", "corners": [4, 4, 4, 4] },
+    "wm2": { "type": "Text", "parent": "region2", "left": 962, "top": 314, "text": "SVG", "fontColor": "#39424f", "fontSize": 11 },
+    "m1": { "type": "Rectangle", "parent": "region2", "left": 608, "top": 232, "width": 72, "height": 30, "fillColor": "#2a3040", "strokeColor": "#6a7a98", "corners": [4, 4, 4, 4] },
+    "m1t": { "type": "Text", "parent": "m1", "left": 624, "top": 241, "text": "fetch", "fontColor": "#c8d0e0", "fontSize": 11 },
+    "m2": { "type": "Rectangle", "parent": "region2", "left": 712, "top": 232, "width": 72, "height": 30, "fillColor": "#2a3040", "strokeColor": "#6a7a98", "corners": [4, 4, 4, 4] },
+    "m2t": { "type": "Text", "parent": "m2", "left": 728, "top": 241, "text": "build", "fontColor": "#c8d0e0", "fontSize": 11 },
+    "m3": { "type": "Rectangle", "parent": "region2", "left": 840, "top": 196, "width": 72, "height": 30, "fillColor": "#2a3040", "strokeColor": "#6a7a98", "corners": [4, 4, 4, 4] },
+    "m3t": { "type": "Text", "parent": "m3", "left": 860, "top": 205, "text": "test", "fontColor": "#c8d0e0", "fontSize": 11 },
+    "m4": { "type": "Rectangle", "parent": "region2", "left": 840, "top": 268, "width": 72, "height": 30, "fillColor": "#2a3040", "strokeColor": "#6a7a98", "corners": [4, 4, 4, 4] },
+    "m4t": { "type": "Text", "parent": "m4", "left": 852, "top": 277, "text": "deploy", "fontColor": "#c8d0e0", "fontSize": 11 },
+    "disc2": { "type": "Rectangle", "parent": "card2", "left": 584, "top": 348, "width": 412, "height": 34, "fillColor": "#181c22", "strokeColor": "#2a3040", "corners": [4, 4, 4, 4] },
+    "chev2": { "type": "Text", "parent": "disc2", "left": 598, "top": 356, "text": "▾", "fontColor": "#c8d0e0", "fontSize": 13 },
+    "disc2t": { "type": "Text", "parent": "disc2", "left": 618, "top": 358, "text": "view d2 source", "fontColor": "#c8d0e0", "fontSize": 12 },
+    "srcBox": { "type": "Rectangle", "parent": "card2", "left": 584, "top": 388, "width": 412, "height": 82, "fillColor": "#14171c", "strokeColor": "#2a3040", "corners": [4, 4, 4, 4] },
+    "sd1": { "type": "Text", "parent": "srcBox", "left": 600, "top": 398, "text": "direction: right", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "sd2": { "type": "Text", "parent": "srcBox", "left": 600, "top": 420, "text": "fetch -> build -> test", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "sd3": { "type": "Text", "parent": "srcBox", "left": 600, "top": 442, "text": "build -> deploy", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "stateCap2": { "type": "Text", "left": 584, "top": 494, "text": "expanded — d2 source revealed", "fontColor": "#6a7280", "fontSize": 11 },
+
+    "expandLab": { "type": "Text", "left": 528, "top": 330, "text": "expand", "fontColor": "#c8d8f0", "fontSize": 10 },
+
+    "foot": { "type": "Text", "left": 60, "top": 520, "text": "D2 → SVG compile in front; renders via the T-320 SVG widget.  clide draw --file pipeline.d2  (type inferred from .d2)", "fontColor": "#6a7280", "fontSize": 11 }
+  },
+  "connectors": {
+    "e1": { "tailId": "n1", "headId": "n2", "strokeColor": "#6a7a98" },
+    "e2": { "tailId": "n2", "headId": "n3", "strokeColor": "#6a7a98" },
+    "e3": { "tailId": "n2", "headId": "n4", "strokeColor": "#6a7a98" },
+    "f1": { "tailId": "m1", "headId": "m2", "strokeColor": "#6a7a98" },
+    "f2": { "tailId": "m2", "headId": "m3", "strokeColor": "#6a7a98" },
+    "f3": { "tailId": "m2", "headId": "m4", "strokeColor": "#6a7a98" },
+    "expand": { "tailId": "disc1", "headId": "disc2", "strokeColor": "#3a4250" }
+  }
+}
diff --git a/docs/design/wireframes/conversation/d2-render-card.png b/docs/design/wireframes/conversation/d2-render-card.png
new file mode 100644
index 00000000..1c813ca2
Binary files /dev/null and b/docs/design/wireframes/conversation/d2-render-card.png differ
diff --git a/docs/design/wireframes/conversation/graph-card.json b/docs/design/wireframes/conversation/graph-card.json
new file mode 100644
index 00000000..accd68b6
--- /dev/null
+++ b/docs/design/wireframes/conversation/graph-card.json
@@ -0,0 +1,45 @@
+{
+  "name": "Graph Render Card (T-321)",
+  "shapes": {
+    "title": { "type": "Text", "left": 60, "top": 40, "text": "clide drawing card — graph render (T-321)", "fontColor": "#c8d0e0", "fontSize": 14 },
+    "subtitle": { "type": "Text", "left": 60, "top": 62, "text": "renders a node/edge graph from JSON — embeds clide's native graph subsystem (CustomPaint, D-46 / T-323), not a new renderer", "fontColor": "#6a7280", "fontSize": 11 },
+
+    "jsonBox": { "type": "Rectangle", "left": 60, "top": 110, "width": 400, "height": 196, "fillColor": "#14171c", "strokeColor": "#333340", "corners": [6, 6, 6, 6] },
+    "j1": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 124, "text": "{ \"template\": \"graph\",", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "j2": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 146, "text": "  \"nodes\": [\"app\",\"ipc\",\"pty\",\"git\",\"pql\"],", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "j3": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 168, "text": "  \"edges\": [[\"app\",\"ipc\"],[\"ipc\",\"pty\"],", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "j4": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 190, "text": "            [\"ipc\",\"git\"],[\"git\",\"pql\"],[\"app\",\"git\"]],", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "j5": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 212, "text": "  \"label\": \"subsystem links\" }", "fontColor": "#9aa3b5", "fontSize": 11 },
+
+    "cli": { "type": "Text", "left": 60, "top": 328, "text": "clide draw --file graph.json", "fontColor": "#c8d8f0", "fontSize": 12 },
+    "cliNote": { "type": "Text", "left": 60, "top": 350, "text": "(nodes + edges inline, or a path to a graph file)", "fontColor": "#6a7280", "fontSize": 11 },
+
+    "card": { "type": "Rectangle", "left": 560, "top": 110, "width": 480, "height": 360, "fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [8, 8, 8, 8] },
+    "region": { "type": "Rectangle", "parent": "card", "left": 584, "top": 134, "width": 432, "height": 256, "fillColor": "#14171c", "strokeColor": "#2a3040", "corners": [4, 4, 4, 4] },
+    "wm": { "type": "Text", "parent": "region", "left": 980, "top": 372, "text": "graph", "fontColor": "#39424f", "fontSize": 11 },
+
+    "na": { "type": "Ellipse", "parent": "region", "left": 644, "top": 168, "width": 46, "height": 46, "fillColor": "#2a3040", "strokeColor": "#6a7a98" },
+    "nat": { "type": "Text", "parent": "na", "left": 657, "top": 184, "text": "app", "fontColor": "#c8d0e0", "fontSize": 11 },
+    "ni": { "type": "Ellipse", "parent": "region", "left": 766, "top": 206, "width": 46, "height": 46, "fillColor": "#2a3040", "strokeColor": "#6a7a98" },
+    "nit": { "type": "Text", "parent": "ni", "left": 781, "top": 222, "text": "ipc", "fontColor": "#c8d0e0", "fontSize": 11 },
+    "np": { "type": "Ellipse", "parent": "region", "left": 898, "top": 166, "width": 46, "height": 46, "fillColor": "#2a3040", "strokeColor": "#6a7a98" },
+    "npt": { "type": "Text", "parent": "np", "left": 911, "top": 182, "text": "pty", "fontColor": "#c8d0e0", "fontSize": 11 },
+    "ng": { "type": "Ellipse", "parent": "region", "left": 760, "top": 306, "width": 46, "height": 46, "fillColor": "#2a3040", "strokeColor": "#6a7a98" },
+    "ngt": { "type": "Text", "parent": "ng", "left": 773, "top": 322, "text": "git", "fontColor": "#c8d0e0", "fontSize": 11 },
+    "nq": { "type": "Ellipse", "parent": "region", "left": 904, "top": 298, "width": 46, "height": 46, "fillColor": "#2a3040", "strokeColor": "#6a7a98" },
+    "nqt": { "type": "Text", "parent": "nq", "left": 917, "top": 314, "text": "pql", "fontColor": "#c8d0e0", "fontSize": 11 },
+
+    "label": { "type": "Text", "parent": "card", "left": 584, "top": 402, "text": "subsystem links", "fontColor": "#e2e8f5", "fontSize": 14 },
+    "desc": { "type": "Text", "parent": "card", "left": 584, "top": 424, "text": "how the core pieces connect", "fontColor": "#8a93a6", "fontSize": 11 },
+
+    "foot": { "type": "Text", "left": 60, "top": 500, "text": "Embeds clide's native graph subsystem (CustomPaint, D-46 / T-323) — the card hosts it, doesn't fork it. Label + description beneath via T-318. Display-only (D-78).", "fontColor": "#6a7280", "fontSize": 11 }
+  },
+  "connectors": {
+    "flow": { "tailId": "jsonBox", "headId": "card", "strokeColor": "#3a4250" },
+    "ea": { "tailId": "na", "headId": "ni", "strokeColor": "#6a7a98" },
+    "eb": { "tailId": "ni", "headId": "np", "strokeColor": "#6a7a98" },
+    "ec": { "tailId": "ni", "headId": "ng", "strokeColor": "#6a7a98" },
+    "ed": { "tailId": "ng", "headId": "nq", "strokeColor": "#6a7a98" },
+    "ee": { "tailId": "na", "headId": "ng", "strokeColor": "#6a7a98" }
+  }
+}
diff --git a/docs/design/wireframes/conversation/graph-card.png b/docs/design/wireframes/conversation/graph-card.png
new file mode 100644
index 00000000..46225b63
Binary files /dev/null and b/docs/design/wireframes/conversation/graph-card.png differ
diff --git a/docs/design/wireframes/conversation/icon-glyph-card.json b/docs/design/wireframes/conversation/icon-glyph-card.json
new file mode 100644
index 00000000..b37589c5
--- /dev/null
+++ b/docs/design/wireframes/conversation/icon-glyph-card.json
@@ -0,0 +1,78 @@
+{
+  "name": "Icon Glyph Card (T-313)",
+  "shapes": {
+    "title": { "type": "Text", "left": 60, "top": 44, "text": "clide icon show — Phosphor glyph card (T-313)", "fontColor": "#c8d0e0", "fontSize": 14 },
+    "subtitle": { "type": "Text", "left": 60, "top": 66, "text": "per-entry label + description · hero (52) + a strip of size samples from 10 up to 48 px", "fontColor": "#6a7280", "fontSize": 11 },
+
+    "cli1": { "type": "Text", "left": 60, "top": 98, "text": "clide icon show gear folder gauge", "fontColor": "#c8d8f0", "fontSize": 12 },
+    "cli1n": { "type": "Text", "left": 372, "top": 98, "text": "— bare variadic preview", "fontColor": "#6a7280", "fontSize": 11 },
+    "cli2": { "type": "Text", "left": 60, "top": 118, "text": "clide icon show --file icons.json", "fontColor": "#c8d8f0", "fontSize": 12 },
+    "cli2n": { "type": "Text", "left": 372, "top": 118, "text": "— labelled entries: [{icon, label, description}, …]", "fontColor": "#6a7280", "fontSize": 11 },
+    "glyphNote": { "type": "Text", "left": 60, "top": 140, "text": "(wireframe: neutral marks stand in for glyphs — Frame0 has no Phosphor font; real card paints via PhosphorIconPainter)", "fontColor": "#566070", "fontSize": 10 },
+
+    "card": { "type": "Rectangle", "left": 60, "top": 168, "width": 960, "height": 350, "fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [8, 8, 8, 8] },
+
+    "hero1": { "type": "Rectangle", "left": 84, "top": 192, "width": 92, "height": 92, "fillColor": "#2a3040", "strokeColor": "#333340", "corners": [8, 8, 8, 8] },
+    "hero1g": { "type": "Ellipse", "left": 106, "top": 214, "width": 48, "height": 48, "fillColor": "#c8d8f0", "strokeColor": "#c8d8f0" },
+    "hero1cap": { "type": "Text", "left": 90, "top": 290, "text": "hero · 52", "fontColor": "#6a7280", "fontSize": 10 },
+    "label1": { "type": "Text", "left": 200, "top": 192, "text": "Settings", "fontColor": "#e2e8f5", "fontSize": 16 },
+    "desc1": { "type": "Text", "left": 200, "top": 216, "text": "global scope", "fontColor": "#8a93a6", "fontSize": 12 },
+    "sizecap1": { "type": "Text", "left": 200, "top": 240, "text": "samples (px)", "fontColor": "#6a7280", "fontSize": 10 },
+
+    "a1": { "type": "Rectangle", "left": 200, "top": 302, "width": 10, "height": 10, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "a1l": { "type": "Text", "left": 200, "top": 318, "text": "10", "fontColor": "#6a7280", "fontSize": 9 },
+    "a2": { "type": "Rectangle", "left": 218, "top": 301, "width": 11, "height": 11, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "a2l": { "type": "Text", "left": 218, "top": 318, "text": "11", "fontColor": "#6a7280", "fontSize": 9 },
+    "a3": { "type": "Rectangle", "left": 237, "top": 300, "width": 12, "height": 12, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "a3l": { "type": "Text", "left": 238, "top": 318, "text": "12", "fontColor": "#6a7280", "fontSize": 9 },
+    "a4": { "type": "Rectangle", "left": 257, "top": 299, "width": 13, "height": 13, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "a4l": { "type": "Text", "left": 258, "top": 318, "text": "13", "fontColor": "#6a7280", "fontSize": 9 },
+    "a5": { "type": "Rectangle", "left": 278, "top": 298, "width": 14, "height": 14, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "a5l": { "type": "Text", "left": 280, "top": 318, "text": "14", "fontColor": "#6a7280", "fontSize": 9 },
+    "a6": { "type": "Rectangle", "left": 300, "top": 297, "width": 15, "height": 15, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "a6l": { "type": "Text", "left": 302, "top": 318, "text": "15", "fontColor": "#6a7280", "fontSize": 9 },
+    "a7": { "type": "Rectangle", "left": 323, "top": 294, "width": 18, "height": 18, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "a7l": { "type": "Text", "left": 327, "top": 318, "text": "18", "fontColor": "#6a7280", "fontSize": 9 },
+    "a8": { "type": "Rectangle", "left": 349, "top": 292, "width": 20, "height": 20, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "a8l": { "type": "Text", "left": 354, "top": 318, "text": "20", "fontColor": "#6a7280", "fontSize": 9 },
+    "a9": { "type": "Rectangle", "left": 377, "top": 288, "width": 24, "height": 24, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "a9l": { "type": "Text", "left": 384, "top": 318, "text": "24", "fontColor": "#6a7280", "fontSize": 9 },
+    "a10": { "type": "Rectangle", "left": 409, "top": 280, "width": 32, "height": 32, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "a10l": { "type": "Text", "left": 420, "top": 318, "text": "32", "fontColor": "#6a7280", "fontSize": 9 },
+    "a11": { "type": "Rectangle", "left": 449, "top": 264, "width": 48, "height": 48, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "a11l": { "type": "Text", "left": 468, "top": 318, "text": "48", "fontColor": "#6a7280", "fontSize": 9 },
+
+    "divider": { "type": "Rectangle", "left": 84, "top": 336, "width": 912, "height": 1, "fillColor": "#333340", "strokeColor": "#333340" },
+
+    "hero2": { "type": "Rectangle", "left": 84, "top": 360, "width": 92, "height": 92, "fillColor": "#2a3040", "strokeColor": "#333340", "corners": [8, 8, 8, 8] },
+    "hero2g": { "type": "Ellipse", "left": 106, "top": 382, "width": 48, "height": 48, "fillColor": "#9fb0c8", "strokeColor": "#9fb0c8" },
+    "hero2cap": { "type": "Text", "left": 90, "top": 458, "text": "hero · 52", "fontColor": "#6a7280", "fontSize": 10 },
+    "label2": { "type": "Text", "left": 200, "top": 360, "text": "Folder", "fontColor": "#e2e8f5", "fontSize": 16 },
+    "desc2": { "type": "Text", "left": 200, "top": 384, "text": "workspace tree", "fontColor": "#8a93a6", "fontSize": 12 },
+    "sizecap2": { "type": "Text", "left": 200, "top": 408, "text": "same scale, per entry", "fontColor": "#6a7280", "fontSize": 10 },
+
+    "b1": { "type": "Rectangle", "left": 200, "top": 470, "width": 10, "height": 10, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "b2": { "type": "Rectangle", "left": 218, "top": 469, "width": 11, "height": 11, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "b3": { "type": "Rectangle", "left": 237, "top": 468, "width": 12, "height": 12, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "b4": { "type": "Rectangle", "left": 257, "top": 467, "width": 13, "height": 13, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "b5": { "type": "Rectangle", "left": 278, "top": 466, "width": 14, "height": 14, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "b6": { "type": "Rectangle", "left": 300, "top": 465, "width": 15, "height": 15, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "b7": { "type": "Rectangle", "left": 323, "top": 462, "width": 18, "height": 18, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "b8": { "type": "Rectangle", "left": 349, "top": 460, "width": 20, "height": 20, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "b9": { "type": "Rectangle", "left": 377, "top": 456, "width": 24, "height": 24, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "b10": { "type": "Rectangle", "left": 409, "top": 448, "width": 32, "height": 32, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+    "b11": { "type": "Rectangle", "left": 449, "top": 432, "width": 48, "height": 48, "fillColor": "#6a7a98", "strokeColor": "#6a7a98", "corners": [2, 2, 2, 2] },
+
+    "tagMeta": { "type": "Text", "left": 880, "top": 196, "text": "label + description", "fontColor": "#c8d8f0", "fontSize": 11 },
+    "tagHero": { "type": "Text", "left": 880, "top": 226, "text": "hero · 52", "fontColor": "#c8d8f0", "fontSize": 11 },
+    "tagSizes": { "type": "Text", "left": 880, "top": 286, "text": "size samples 10→48", "fontColor": "#c8d8f0", "fontSize": 11 },
+
+    "foot1": { "type": "Text", "left": 60, "top": 536, "text": "Display-only (D-78): the card shows options; selection happens in the convo box. Per-entry labels bridge card → interaction-zone choice list.", "fontColor": "#6a7280", "fontSize": 11 },
+    "foot2": { "type": "Text", "left": 60, "top": 556, "text": "Without label/description, entries collapse to a bare glyph grid.", "fontColor": "#566070", "fontSize": 11 }
+  },
+  "connectors": {
+    "cMeta": { "tailId": "tagMeta", "headId": "label1", "strokeColor": "#3a4250" },
+    "cHero": { "tailId": "tagHero", "headId": "hero1", "strokeColor": "#3a4250" },
+    "cSizes": { "tailId": "tagSizes", "headId": "a11", "strokeColor": "#3a4250" }
+  }
+}
diff --git a/docs/design/wireframes/conversation/icon-glyph-card.png b/docs/design/wireframes/conversation/icon-glyph-card.png
new file mode 100644
index 00000000..1b89bc3c
Binary files /dev/null and b/docs/design/wireframes/conversation/icon-glyph-card.png differ
diff --git a/docs/design/wireframes/conversation/image-annotation-card.json b/docs/design/wireframes/conversation/image-annotation-card.json
new file mode 100644
index 00000000..5e495186
--- /dev/null
+++ b/docs/design/wireframes/conversation/image-annotation-card.json
@@ -0,0 +1,71 @@
+{
+  "name": "Image Annotation Flow (T-316)",
+  "shapes": {
+    "title": {
+      "type": "Text",
+      "left": 60, "top": 56,
+      "text": "clide image show — annotated image card (T-316, variant a: text metadata)",
+      "fontColor": "#c8d0e0", "fontSize": 14
+    },
+
+    "jsonBox": {
+      "type": "Rectangle",
+      "left": 60, "top": 110, "width": 380, "height": 200,
+      "fillColor": "#14171c", "strokeColor": "#333340", "corners": [6, 6, 6, 6]
+    },
+    "j1": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 124, "text": "{", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "j2": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 146, "text": "  \"path\": \"docs/shot.png\",", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "j3": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 168, "text": "  \"label\": \"HUD v3\",", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "j4": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 190, "text": "  \"description\": \"status row cramped\",", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "j5": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 212, "text": "  \"caption\": \"before the fix\"", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "j6": { "type": "Text", "parent": "jsonBox", "left": 76, "top": 234, "text": "}", "fontColor": "#9aa3b5", "fontSize": 11 },
+
+    "cli": {
+      "type": "Text",
+      "left": 60, "top": 330,
+      "text": "clide image show docs/shot.png --file meta.json",
+      "fontColor": "#c8d8f0", "fontSize": 12
+    },
+    "cliNote": {
+      "type": "Text",
+      "left": 60, "top": 354,
+      "text": "(same payload via --stdin once T-315 lands; --caption form still works)",
+      "fontColor": "#6a7280", "fontSize": 11
+    },
+
+    "card": {
+      "type": "Rectangle",
+      "left": 560, "top": 110, "width": 480, "height": 430,
+      "fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [8, 8, 8, 8]
+    },
+    "cardLabel": { "type": "Text", "parent": "card", "left": 584, "top": 134, "text": "HUD v3", "fontColor": "#e2e8f5", "fontSize": 16 },
+    "cardDesc": { "type": "Text", "parent": "card", "left": 584, "top": 164, "text": "Status row cramped — the clock overlaps the battery at narrow widths.", "fontColor": "#8a93a6", "fontSize": 12 },
+    "cardImage": {
+      "type": "Rectangle",
+      "parent": "card",
+      "left": 584, "top": 200, "width": 432, "height": 250,
+      "fillColor": "#2a3040", "strokeColor": "#333340", "corners": [4, 4, 4, 4]
+    },
+    "cardImageName": { "type": "Text", "parent": "cardImage", "left": 730, "top": 318, "text": "docs/shot.png", "fontColor": "#6a7280", "fontSize": 12 },
+    "cardCaption": { "type": "Text", "parent": "card", "left": 584, "top": 468, "text": "before the fix", "fontColor": "#8a93a6", "fontSize": 11 },
+
+    "tagLabel": { "type": "Text", "left": 1052, "top": 134, "text": "label", "fontColor": "#c8d8f0", "fontSize": 11 },
+    "tagDesc": { "type": "Text", "left": 1052, "top": 164, "text": "description", "fontColor": "#c8d8f0", "fontSize": 11 },
+    "tagImage": { "type": "Text", "left": 1052, "top": 318, "text": "path", "fontColor": "#c8d8f0", "fontSize": 11 },
+    "tagCaption": { "type": "Text", "left": 1052, "top": 468, "text": "caption", "fontColor": "#c8d8f0", "fontSize": 11 },
+
+    "followup": {
+      "type": "Text",
+      "left": 560, "top": 558,
+      "text": "Variant (b) follow-up: visual markers / numbered callouts painted at {x,y} over the image (CustomPaint).",
+      "fontColor": "#6a7280", "fontSize": 11
+    }
+  },
+  "connectors": {
+    "flow": { "tailId": "jsonBox", "headId": "card", "strokeColor": "#c8d8f0" },
+    "mLabel": { "tailId": "tagLabel", "headId": "cardLabel", "strokeColor": "#3a4250" },
+    "mDesc": { "tailId": "tagDesc", "headId": "cardDesc", "strokeColor": "#3a4250" },
+    "mImage": { "tailId": "tagImage", "headId": "cardImage", "strokeColor": "#3a4250" },
+    "mCaption": { "tailId": "tagCaption", "headId": "cardCaption", "strokeColor": "#3a4250" }
+  }
+}
diff --git a/docs/design/wireframes/conversation/image-annotation-card.png b/docs/design/wireframes/conversation/image-annotation-card.png
new file mode 100644
index 00000000..9fb54541
Binary files /dev/null and b/docs/design/wireframes/conversation/image-annotation-card.png differ
diff --git a/docs/design/wireframes/conversation/svg-render-card.json b/docs/design/wireframes/conversation/svg-render-card.json
new file mode 100644
index 00000000..e9802ae2
--- /dev/null
+++ b/docs/design/wireframes/conversation/svg-render-card.json
@@ -0,0 +1,42 @@
+{
+  "name": "SVG Render Card (T-320)",
+  "shapes": {
+    "title": { "type": "Text", "left": 60, "top": 44, "text": "clide drawing card — SVG render (T-320)", "fontColor": "#c8d0e0", "fontSize": 14 },
+    "subtitle": { "type": "Text", "left": 60, "top": 66, "text": "a drawing-card template (T-318 dispatch): renders a vector SVG natively in the conversation pane — separate type from the raster image card", "fontColor": "#6a7280", "fontSize": 11 },
+
+    "srcBox": { "type": "Rectangle", "left": 60, "top": 110, "width": 380, "height": 178, "fillColor": "#14171c", "strokeColor": "#333340", "corners": [6, 6, 6, 6] },
+    "s1": { "type": "Text", "parent": "srcBox", "left": 76, "top": 124, "text": "{", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "s2": { "type": "Text", "parent": "srcBox", "left": 76, "top": 146, "text": "  \"template\": \"svg\",", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "s3": { "type": "Text", "parent": "srcBox", "left": 76, "top": 168, "text": "  \"title\": \"Build pipeline\",", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "s4": { "type": "Text", "parent": "srcBox", "left": 76, "top": 190, "text": "  \"source\": \"<svg>…</svg>\"   // or a .svg path", "fontColor": "#9aa3b5", "fontSize": 11 },
+    "s5": { "type": "Text", "parent": "srcBox", "left": 76, "top": 212, "text": "}", "fontColor": "#9aa3b5", "fontSize": 11 },
+
+    "cli": { "type": "Text", "left": 60, "top": 308, "text": "clide draw --file pipeline.json", "fontColor": "#c8d8f0", "fontSize": 12 },
+    "cliNote": { "type": "Text", "left": 60, "top": 330, "text": "(inline SVG string or a .svg path; clide owns the SVG renderer — vector, no raster rasterise)", "fontColor": "#6a7280", "fontSize": 11 },
+
+    "card": { "type": "Rectangle", "left": 560, "top": 110, "width": 480, "height": 362, "fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [8, 8, 8, 8] },
+    "cardLabel": { "type": "Text", "parent": "card", "left": 584, "top": 132, "text": "Build pipeline", "fontColor": "#e2e8f5", "fontSize": 16 },
+
+    "region": { "type": "Rectangle", "parent": "card", "left": 584, "top": 168, "width": 432, "height": 248, "fillColor": "#14171c", "strokeColor": "#2a3040", "corners": [4, 4, 4, 4] },
+    "rgWatermark": { "type": "Text", "parent": "region", "left": 968, "top": 392, "text": "SVG", "fontColor": "#39424f", "fontSize": 11 },
+
+    "n1": { "type": "Rectangle", "parent": "region", "left": 612, "top": 214, "width": 96, "height": 40, "fillColor": "#2a3040", "strokeColor": "#6a7a98", "corners": [4, 4, 4, 4] },
+    "n1t": { "type": "Text", "parent": "n1", "left": 636, "top": 226, "text": "fetch", "fontColor": "#c8d0e0", "fontSize": 12 },
+    "n2": { "type": "Rectangle", "parent": "region", "left": 772, "top": 214, "width": 96, "height": 40, "fillColor": "#2a3040", "strokeColor": "#6a7a98", "corners": [4, 4, 4, 4] },
+    "n2t": { "type": "Text", "parent": "n2", "left": 798, "top": 226, "text": "build", "fontColor": "#c8d0e0", "fontSize": 12 },
+    "n3": { "type": "Rectangle", "parent": "region", "left": 772, "top": 320, "width": 96, "height": 40, "fillColor": "#2a3040", "strokeColor": "#6a7a98", "corners": [4, 4, 4, 4] },
+    "n3t": { "type": "Text", "parent": "n3", "left": 802, "top": 332, "text": "test", "fontColor": "#c8d0e0", "fontSize": 12 },
+
+    "caption": { "type": "Text", "parent": "card", "left": 584, "top": 430, "text": "rendered SVG — crisp at any zoom (vector)", "fontColor": "#8a93a6", "fontSize": 11 },
+
+    "tagRender": { "type": "Text", "left": 1058, "top": 286, "text": "in-pane\nSVG widget", "fontColor": "#c8d8f0", "fontSize": 11 },
+
+    "foot": { "type": "Text", "left": 60, "top": 500, "text": "The D2 card (next frame) reuses THIS widget — D2 compiles to SVG, then renders through the same path.", "fontColor": "#6a7280", "fontSize": 11 }
+  },
+  "connectors": {
+    "flow": { "tailId": "srcBox", "headId": "card", "strokeColor": "#c8d8f0" },
+    "e1": { "tailId": "n1", "headId": "n2", "strokeColor": "#6a7a98" },
+    "e2": { "tailId": "n2", "headId": "n3", "strokeColor": "#6a7a98" },
+    "tRender": { "tailId": "tagRender", "headId": "region", "strokeColor": "#3a4250" }
+  }
+}
diff --git a/docs/design/wireframes/conversation/svg-render-card.png b/docs/design/wireframes/conversation/svg-render-card.png
new file mode 100644
index 00000000..7dc8a89b
Binary files /dev/null and b/docs/design/wireframes/conversation/svg-render-card.png differ