@cueplusplus/ui 0.2.0 → 0.5.0

package/manifest/components/message-attachments.json

@@ -0,0 +1,63 @@
+{
+  "name": "MessageAttachments",
+  "slug": "message-attachments",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The files a turn carried, as received rather than as staged. An image gets a preview\ntile that opens; anything else gets a row with its size and, for a document, its\npage count.",
+  "props": [
+    {
+      "name": "attachments",
+      "type": "readonly MessageAttachmentItem[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Files carried by the message. Images render as a thumbnail row, everything else as\na chip."
+    },
+    {
+      "name": "onOpen",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when an attachment is opened for preview."
+    }
+  ],
+  "typeReferences": [
+    "Omit<ComponentProps<\"div\">, \"children\" | \"attachments\" | \"onOpen\"> & {\n  /**\n   * Files carried by the message. Images render as a thumbnail row, everything else as\n   * a chip.\n   */\n  attachments: readonly MessageAttachmentItem[];\n  /** Called when an attachment is opened for preview. */\n  onOpen?: (id: string) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-bg",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-2",
+    "--cue-text-body"
+  ],
+  "summary": "The files a turn carried, as received rather than as staged.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/message-attachments",
+  "mdUrl": "/docs/components/message-attachments.md",
+  "jsonUrl": "/r/components/message-attachments.json",
+  "specimens": [
+    {
+      "title": "MessageAttachments",
+      "group": "elements-thread",
+      "components": [
+        "MessageAttachments"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"image, file, document\" wide>\n    <MessageAttachments attachments={ATTACHMENTS} onOpen={() => undefined} />\n  </Specimen>\n  <Specimen label=\"one document\" wide>\n    <MessageAttachments attachments={ATTACHMENTS.slice(2)} />\n  </Specimen>\n</Specimens>",
+      "note": "Files as received, not as staged: an image gets a preview tile that opens, a document gets its page count, anything else gets its size. Upstream's uploader lives in the composer — this is the read-only other end of it.",
+      "interaction": "every row is one button with its name as the label; the image tile grows very slightly under the pointer, and holds still under reduced motion."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/message-branches.json

@@ -0,0 +1,71 @@
+{
+  "name": "MessageBranches",
+  "slug": "message-branches",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Navigate between regenerated versions of the same answer without losing your place.",
+  "props": [
+    {
+      "name": "variants",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Alternate regenerated answers the user can step through."
+    },
+    {
+      "name": "index",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Which variant is currently displayed."
+    },
+    {
+      "name": "onIndexChange",
+      "type": "(index: number) => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Called when the previous or next branch control is pressed."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\"\n>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-text-body"
+  ],
+  "summary": "Navigate between regenerated versions of the same answer without losing your place.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { MessageBranches } from \"@cueplusplus/ui/elements\";\n\n<MessageBranches\n  variants={[\"First answer.\", \"Second answer.\"]}\n  index={0}\n  onIndexChange={setIndex}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/message-branches",
+  "mdUrl": "/docs/components/message-branches.md",
+  "jsonUrl": "/r/components/message-branches.json",
+  "specimens": [
+    {
+      "title": "MessageBranches",
+      "group": "elements-thread",
+      "components": [
+        "MessageBranches"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"two versions\" wide>\n    <MessageBranches variants={BRANCHES} index={branch} onIndexChange={setBranch} />\n  </Specimen>\n  <Specimen label=\"one version — nowhere to go\" wide>\n    <MessageBranches\n      variants={BRANCHES.slice(0, 1)}\n      index={0}\n      onIndexChange={() => undefined}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Two answers to the same question, and a way through them that does not lose your place. The counter is the whole affordance — `2 / 2` is what tells you a second version exists at all — and it wraps at both ends rather than dead-ending.",
+      "interaction": "both arrows are named and go disabled when there is only one version, which is the honest state for a turn nobody has regenerated."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/message-list.json

@@ -0,0 +1,100 @@
+{
+  "name": "MessageList",
+  "slug": "message-list",
+  "group": "chat",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The transcript scroller: sticks to the bottom, and stops fighting you the\nmoment you scroll up.\n\nFollowing is a *mode*, not a scroll position. While pinned to the bottom the\nview follows new turns; scroll up to read something and it lets go and offers\na \"jump to latest\" pill instead — because a stream that yanks the viewport\nmid-sentence is the single most common reason people stop reading a chat\npane. Coming back to the bottom re-arms it.\n\nIt follows a turn that is still growing, too — the items container is watched\nfor growth, so a streaming bubble keeps the bottom in view without the host\nadding anything, while something merely collapsing leaves the view alone. And\nwhen you have scrolled up, a turn that grows offers the pill instead of\npulling you down.\n\nDeliberately **not** virtualised. A virtualiser needs a measurable row height\nand chat turns are variable-height by nature; the cost of getting that wrong\n(jumping scrollbars) is worse than the cost of a few hundred DOM nodes. When\na thread really is unbounded, page it — do not virtualise it.",
+  "props": [
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The turns, oldest first — normally {@link Message }s."
+    },
+    {
+      "name": "follow",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Stick to the bottom as turns arrive. Defaults to `true`."
+    },
+    {
+      "name": "height",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Fixed height in px at the 16px root, emitted as rem. Omit to fill the parent."
+    },
+    {
+      "name": "jumpLabel",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": "Jump to latest",
+      "description": "Label on the catch-up pill. Defaults to `\"Jump to latest\"`."
+    },
+    {
+      "name": "emptyLabel",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": "No messages yet",
+      "description": "What to say before the first turn. Defaults to `\"No messages yet\"`."
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the transcript. Required in practice — name the thread."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"onScroll\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border-overlay",
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-space-2",
+    "--cue-space-4",
+    "--cue-space-6",
+    "--cue-surface-2",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "The transcript scroller: sticks to the bottom, and stops fighting you the moment you scroll up.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<MessageList aria-label=\"Thread\" height={480}>\n  {turns.map((t) => <Message key={t.id} agent={t.agent}>{t.text}</Message>)}\n</MessageList>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/message-list",
+  "mdUrl": "/docs/components/message-list.md",
+  "jsonUrl": "/r/components/message-list.json",
+  "specimens": [
+    {
+      "title": "MessageList",
+      "group": "chat",
+      "components": [
+        "MessageList"
+      ],
+      "code": "<MessageList height={220} follow className=\"w-full max-w-[42rem]\">\n  {Array.from({ length: 14 }, (_, index) => (\n    <Message\n      key={index}\n      role={index % 2 === 0 ? \"user\" : \"agent\"}\n      agent={index % 2 === 0 ? undefined : \"patcher\"}\n      author={index % 2 === 0 ? \"Criss\" : \"Patcher\"}\n    >\n      Frame {index}: 512 slots at 44 Hz.\n    </Message>\n  ))}\n</MessageList>",
+      "note": "A stick-to-bottom scroller. Scroll away and it offers to jump back to the latest rather than yanking you there.",
+      "interaction": "the jump control is a button, and it appears only once you have actually scrolled off the tail."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/message-pair.json

@@ -0,0 +1,86 @@
+{
+  "name": "MessagePair",
+  "slug": "message-pair",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A user bubble and a streaming assistant reply, with actions that appear on hover.",
+  "props": [
+    {
+      "name": "userMessage",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Text shown in the user bubble on the right."
+    },
+    {
+      "name": "words",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Assistant reply broken into words for streaming."
+    },
+    {
+      "name": "visibleWords",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many assistant words are currently visible."
+    },
+    {
+      "name": "streaming",
+      "type": "boolean",
+      "required": true,
+      "defaultValue": null,
+      "description": "When true the newest assistant words tint blue as they arrive."
+    },
+    {
+      "name": "variant",
+      "type": "\"flat\" | \"bubble\"",
+      "required": false,
+      "defaultValue": "bubble",
+      "description": "bubble wraps the user message in a surface; flat renders it as plain right-aligned\ntext."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\"\n>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg",
+    "--cue-radius-overlay",
+    "--cue-stream",
+    "--cue-text-body"
+  ],
+  "summary": "A user bubble and a streaming assistant reply, with actions that appear on hover.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { MessagePair } from \"@cueplusplus/ui/elements\";\n\n<MessagePair\n  userMessage=\"Explain the composer.\"\n  words={[\"Here\", \"is\", \"a\", \"short\", \"reply.\"]}\n  visibleWords={5}\n  streaming={false}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/message-pair",
+  "mdUrl": "/docs/components/message-pair.md",
+  "jsonUrl": "/r/components/message-pair.json",
+  "specimens": [
+    {
+      "title": "MessagePair",
+      "group": "elements-thread",
+      "components": [
+        "MessagePair"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"bubble · streaming\" wide>\n    <MessagePair\n      userMessage=\"Plot's in. Front truss, universe 3.\"\n      words={SPOKEN}\n      visibleWords={5}\n      streaming\n    />\n  </Specimen>\n  <Specimen label=\"flat · settled\" wide>\n    <MessagePair\n      userMessage=\"Plot's in. Front truss, universe 3.\"\n      words={SPOKEN}\n      visibleWords={SPOKEN.length}\n      streaming={false}\n      variant=\"flat\"\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A whole turn in one element: what was asked, and the answer streaming under it with its actions waiting on hover. The two variants are the two house styles for a user turn — a bubble, or right-aligned text with no chrome at all.",
+      "interaction": "the action row is invisible until the turn is hovered *or* focused, which is what keeps a keyboard from losing it. Both buttons are named."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/message-queue.json

@@ -0,0 +1,74 @@
+{
+  "name": "MessageQueue",
+  "slug": "message-queue",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Turns you typed while a run was in flight, stacked and cancelable until it finishes.",
+  "props": [
+    {
+      "name": "running",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The turn currently in flight, shown above the queue."
+    },
+    {
+      "name": "queued",
+      "type": "readonly QueuedMessage[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Turns waiting to send, in the order they will drain once the run finishes."
+    },
+    {
+      "name": "onCancel",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when a queued turn is removed before it ever sends."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"running\" | \"queued\" | \"onCancel\"\n> & {\n  /** The turn currently in flight, shown above the queue. */\n  running: string;\n  /** Turns waiting to send, in the order they will drain once the run finishes. */\n  queued: readonly QueuedMessage[];\n  /** Called when a queued turn is removed before it ever sends. */\n  onCancel?: (id: string) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-stream",
+    "--cue-text-body"
+  ],
+  "summary": "Turns you typed while a run was in flight, stacked and cancelable until it finishes.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { MessageQueue } from \"@cueplusplus/ui/elements\";\n\n<MessageQueue\n  running=\"Fix the converter and add a guard\"\n  queued={[{ id: \"a\", text: \"Also add a changeset\" }]}\n  onCancel={(id) => drop(id)}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/message-queue",
+  "mdUrl": "/docs/components/message-queue.md",
+  "jsonUrl": "/r/components/message-queue.json",
+  "specimens": [
+    {
+      "title": "MessageQueue",
+      "group": "elements-thread",
+      "components": [
+        "MessageQueue"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"one running, two queued\" wide>\n    <MessageQueue\n      running=\"Patching universe 3\"\n      queued={queue}\n      onCancel={(id) => setQueue((current) => current.filter((item) => item.id !== id))}\n    />\n  </Specimen>\n  <Specimen label=\"nothing queued\" wide>\n    <MessageQueue running=\"Patching universe 3\" queued={[]} />\n  </Specimen>\n</Specimens>",
+      "note": "What you typed while the last run was still out. The turn in flight pings at the top; everything behind it is numbered, cancellable and explicitly told when it will go. A queue that did not say 'sends when this finishes' would look like a list of failures.",
+      "interaction": "each row's × is a named button — the message text is in the label, so five rows do not all read as 'Remove'."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/message-timing.json

@@ -0,0 +1,62 @@
+{
+  "name": "MessageTiming",
+  "slug": "message-timing",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "What the turn cost: time to first token, throughput, tokens, money.",
+  "props": [
+    {
+      "name": "stats",
+      "type": "readonly TimingStat[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Label and value pairs, pre-formatted. Show fewer while streaming and the full set\nonce the turn settles."
+    },
+    {
+      "name": "streaming",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": null,
+      "description": "Tints the values blue while they are still moving."
+    }
+  ],
+  "typeReferences": [
+    "Omit<ComponentProps<\"div\">, \"children\" | \"stats\" | \"streaming\"> & {\n  /**\n   * Label and value pairs, pre-formatted. Show fewer while streaming and the full set\n   * once the turn settles.\n   */\n  stats: readonly TimingStat[];\n  /** Tints the values blue while they are still moving. */\n  streaming?: boolean;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-stream"
+  ],
+  "summary": "What the turn cost: time to first token, throughput, tokens, money.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { MessageTiming } from \"@cueplusplus/ui/elements\";\n\n<MessageTiming\n  stats={[\n    { label: \"ttft\", value: \"0.4s\" },\n    { label: \"total\", value: \"2.6s\" },\n  ]}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/message-timing",
+  "mdUrl": "/docs/components/message-timing.md",
+  "jsonUrl": "/r/components/message-timing.json",
+  "specimens": [
+    {
+      "title": "MessageTiming",
+      "group": "elements-thread",
+      "components": [
+        "MessageTiming"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"streaming\" wide>\n    <MessageTiming stats={TIMING.slice(0, 2)} streaming />\n  </Specimen>\n  <Specimen label=\"settled\" wide>\n    <MessageTiming stats={TIMING} />\n  </Specimen>\n</Specimens>",
+      "note": "What the turn cost, in the footer where a reader can ignore it. The values are strings the caller already formatted; while the turn is still streaming they sit in the live hue and settle into ink when it lands, so the row doubles as a state.",
+      "interaction": "none. It is four label/value pairs in mono, tabular so the numbers do not jitter as they update."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/message.json

@@ -0,0 +1,116 @@
+{
+  "name": "Message",
+  "slug": "message",
+  "group": "chat",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "One turn in a conversation.\n\nContent is rendered as React nodes, verbatim: there is no markdown or HTML\npath here on purpose. Model output is untrusted text, and a component that\nquietly parsed it would make every consumer of this library one prompt away\nfrom an injection. Callers that want rich text pass their own renderer as\nchildren and own that decision.\n\nThe author line is mono micro and inked in the agent's own colour, so a\nmulti-agent thread is scannable by hue before it is readable by name.\n\nStatic markup — no `\"use client\"`; a transcript renders on the server.",
+  "props": [
+    {
+      "name": "role",
+      "type": "\"agent\" | \"user\" | \"system\"",
+      "required": false,
+      "defaultValue": "agent",
+      "description": "Who is speaking. Defaults to `\"agent\"`."
+    },
+    {
+      "name": "agent",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The speaking agent's slug. Names the turn and inks the author line and the\n`--agent-color` custom property, which anything nested reads."
+    },
+    {
+      "name": "rootAgent",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Slug of the orchestrator, so its turns take the theme accent."
+    },
+    {
+      "name": "author",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Author line override. Defaults to `\"You\"` for the user and to `agent` otherwise."
+    },
+    {
+      "name": "timestamp",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Rendered opposite the author — pass a formatted time, not a `Date`."
+    },
+    {
+      "name": "pending",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "The turn is still streaming: shows a caret and announces it."
+    },
+    {
+      "name": "footer",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Slot under the body — attachments, warnings, retry actions."
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The turn itself."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"role\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-radius-scale",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-surface-1",
+    "--cue-text-body",
+    "--cue-text-micro"
+  ],
+  "summary": "One turn in a conversation.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Message agent=\"researcher\" timestamp=\"14:02\">Found three references.</Message>\n<Message role=\"user\">Patch universe 3.</Message>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/message",
+  "mdUrl": "/docs/components/message.md",
+  "jsonUrl": "/r/components/message.json",
+  "specimens": [
+    {
+      "title": "Message",
+      "group": "chat",
+      "components": [
+        "Message"
+      ],
+      "code": "<div className=\"flex w-full max-w-[42rem] flex-col gap-(--cue-space-4)\">\n  <Message role=\"user\" author=\"Criss\" timestamp=\"18:04\">\n    Patch the front truss on universe 1 and write a cue for house-to-half.\n  </Message>\n  <Message role=\"agent\" agent=\"patcher\" author=\"Patcher\" timestamp=\"18:04\">\n    6 fixtures patched to channels 1 to 48. Cue 1 written with a 3.0s fade.\n  </Message>\n  <Message role=\"agent\" agent=\"reviewer\" author=\"Reviewer\" pending>\n    Checking the patch against the plot.\n  </Message>\n  <Message role=\"system\" timestamp=\"18:05\">\n    Run paused: waiting on an answer.\n  </Message>\n  <Message\n    role=\"agent\"\n    agent=\"cue-writer\"\n    author=\"Cue writer\"\n    footer={<Chip tone=\"ok\">applied</Chip>}\n  >\n    Cue 2 follows cue 1 automatically.\n  </Message>\n</div>",
+      "note": "Three roles. The bubble radii are asymmetric and mirrored by role, and the author line is mono micro. Nothing here parses markdown: model output is an untrusted string, and a component that rendered it as markup would make every consumer one prompt away from an injection.",
+      "interaction": "none. A message is a record."
+    }
+  ],
+  "todo": true
+}