Add bot graphics

Bots can now show a concept as a visual: create_graphic (with
update_graphic, read_graphic and list_graphics, on every run, no computer
needed) stores one HTML document in bot_graphics, per user like the
conversation, and the chat renders its [graphic:ID] ref as an inline card
sized to fit, with a large view and a page of its own (no rail).

Graphic HTML is treated as hostile: it is only served at /graphics/<id>
with a CSP sandbox allowing scripts under an origin of its own and no
network, loading only the vendored Chart.js and Mermaid from
/graphics-lib/. The document carries the app's theme vars and scrollbars,
reports its height to the thread, and a frame that navigates away is
closed.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/pages/admin/bots/[bot_id]/(partials)/graphic-ref-card.tsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import Button from "@moduletrace/twui/layout/Button";
+import Link from "@moduletrace/twui/layout/Link";
+import Span from "@moduletrace/twui/layout/Span";
+import { ChartColumn, Maximize2, SquareArrowOutUpRight } from "lucide-react";
+import GraphicFrame from "@/src/components/general/graphic-frame";
+import GraphicViewerModal from "@/src/components/general/graphic-viewer-modal";
+import { AppData } from "@/src/data/app-data";
+import { graphicPageHref } from "@/src/utils/graphic-url";
+import useBotGraphic from "../(hooks)/use-bot-graphic";
+
+type Props = {
+    graphic_id: number;
+};
+
+const ActionClassName =
+    "shrink-0 p-1! text-ink-secondary dark:text-ink-secondary hover:text-ink rounded-default-xs";
+
+/**
+ * A graphic a bot made (`graphicRef`), shown where the bot named it: its
+ * title and the graphic itself, sized to fit (up to
+ * `AppData.BotGraphicInlineMaxHeight`), with ways to open it large or on
+ * its own page. Built from spans, since the ref sits in a paragraph.
+ * Anyone it wasn't made for sees its number only.
+ */
+export default function GraphicRefCard({ graphic_id }: Props) {
+    const { view, loading } = useBotGraphic({ graphic_id });
+    const [open, setOpen] = useState(false);
+
+    if (!view) {
+        return (
+            <Span className="font-bold">
+                {loading
+                    ? `graphic ${graphic_id}`
+                    : `graphic ${graphic_id} (not available)`}
+            </Span>
+        );
+    }
+
+    return (
+        <Span className="flex w-full flex-col my-1 overflow-hidden rounded-default border border-solid border-hairline">
+            <Span className="flex w-full flex-nowrap items-center gap-2 pl-3 pr-1.5 py-1.5 border-0 border-b border-solid border-hairline bg-surface">
+                <ChartColumn
+                    size={14}
+                    aria-hidden
+                    className="shrink-0 text-ink-secondary"
+                />
+                <Span className="min-w-0 grow truncate text-[13px] leading-5 font-bold text-ink">
+                    {view.title}
+                </Span>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    color="text"
+                    title="Open large"
+                    aria-label="Open large"
+                    onClick={() => setOpen(true)}
+                    className={ActionClassName}
+                >
+                    <Maximize2 size={14} aria-hidden />
+                </Button>
+                <Link
+                    href={graphicPageHref({
+                        graphic_id: view.id,
+                        bot_id: view.bot_id,
+                    })}
+                    title="Open on its own page"
+                    aria-label="Open on its own page"
+                    className={ActionClassName}
+                    target="_blank"
+                >
+                    <SquareArrowOutUpRight size={14} aria-hidden />
+                </Link>
+            </Span>
+            <GraphicFrame
+                graphic_id={view.id}
+                title={view.title}
+                version={view.version}
+                max_height={AppData.BotGraphicInlineMaxHeight}
+            />
+            {open ? (
+                <GraphicViewerModal
+                    graphic={view}
+                    onClose={() => setOpen(false)}
+                />
+            ) : null}
+        </Span>
+    );
+}

src/pages/admin/bots/[bot_id]/(partials)/markdown-link.tsx

@@ -13,10 +13,12 @@ import {
     WorkspaceRefHrefPrefix,
 } from "@/src/utils/link-computer-refs";
 import { parseFolderRefHref } from "@/src/utils/folder-ref";
+import { graphicRefId } from "@/src/utils/graphic-ref";
 import BotRefChip from "./bot-ref-chip";
 import ComputerRefChip from "./computer-ref-chip";
 import FileRefChip from "./file-ref-chip";
 import FolderRefChip from "./folder-ref-chip";
+import GraphicRefCard from "./graphic-ref-card";
 import HookProposalRefChip from "./hook-proposal-ref-chip";
 import ProposalRefChip from "./proposal-ref-chip";
 import SecretRefChip from "./secret-ref-chip";
@@ -32,7 +34,7 @@ import WorkspaceRefChip from "./workspace-ref-chip";
  * folder it named a chip that opens it in the files browser, an MCP server,
  * tool, skill or hook it proposed a chip that opens the confirm card, a
  * secret it showed a masked chip, a secret it asked for a chip that opens
- * the card it's typed into;
+ * the card it's typed into, a graphic it made the graphic itself;
  * anything else opens in a new tab.
  */
 export default function MarkdownLink({ href, children }: ComponentProps<"a">) {
@@ -99,6 +101,10 @@ export default function MarkdownLink({ href, children }: ComponentProps<"a">) {
         if (request_id) return <SecretRequestRefChip request_id={request_id} />;
     }
 
+    const graphic_id = graphicRefId({ href });
+
+    if (graphic_id) return <GraphicRefCard graphic_id={graphic_id} />;
+
     const folder_ref = parseFolderRefHref({ href });
 
     if (folder_ref) return <FolderRefChip spec={folder_ref.spec} path={folder_ref.path} />;