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/layouts/bots/(data)/rail-drawer-context.ts

@@ -5,6 +5,11 @@ import { createContext } from "react";
 export type RailDrawerContextObject = {
     open: boolean;
     setOpen: (open: boolean) => void;
+    /**
+     * False on a page without the rail (`isRaillessPage`), where the menu
+     * button has nothing to open.
+     */
+    has_rail: boolean;
 };
 
 /**
@@ -14,4 +19,5 @@ export type RailDrawerContextObject = {
 export const RailDrawerContext = createContext<RailDrawerContextObject>({
     open: false,
     setOpen: () => {},
+    has_rail: true,
 });

src/layouts/bots/(partials)/rail-drawer-button.tsx

@@ -6,10 +6,13 @@ import HeaderIconButton from "@/src/components/general/header-icon-button";
 import { RailDrawerContext } from "../(data)/rail-drawer-context";
 
 /**
- * Opens the rail's drawer below `md`; the inline rail has no need for it.
+ * Opens the rail's drawer below `md`; the inline rail has no need for it,
+ * and a page without the rail has none to open.
  */
 export default function RailDrawerButton() {
-    const { setOpen } = useContext(RailDrawerContext);
+    const { setOpen, has_rail } = useContext(RailDrawerContext);
+
+    if (!has_rail) return null;
 
     return (
         <span className="inline-flex md:hidden">

src/layouts/bots/(utils)/is-railless-page.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, test } from "bun:test";
+import isRaillessPage from "./is-railless-page";
+
+describe("isRaillessPage", () => {
+    test("a graphic's own page has no rail", () => {
+        expect(isRaillessPage({ pathname: "/admin/bots/3/graphics/5" })).toBe(true);
+        expect(isRaillessPage({ pathname: "/admin/bots/3/graphics/5/" })).toBe(true);
+    });
+
+    test("every other page keeps it", () => {
+        expect(isRaillessPage({ pathname: "/admin/bots/3" })).toBe(false);
+        expect(isRaillessPage({ pathname: "/admin/bots/3/graphics" })).toBe(false);
+        expect(isRaillessPage({ pathname: "/admin/settings/general" })).toBe(false);
+        expect(isRaillessPage({ pathname: undefined })).toBe(false);
+    });
+});

src/layouts/bots/(utils)/is-railless-page.ts

@@ -0,0 +1,8 @@
+/**
+ * Pages that fill the window without the rail: a bot graphic's own page
+ * (`/admin/bots/<bot>/graphics/<id>`), which is about one graphic and
+ * leads back to its conversation from its header.
+ */
+export default function isRaillessPage({ pathname }: { pathname?: string | null }) {
+    return /^\/admin\/bots\/\d+\/graphics\/\d+\/?$/.test(pathname || "");
+}

src/layouts/bots/index.tsx

@@ -11,11 +11,13 @@ import BotsRail from "./(sections)/bots-rail";
 import LiveSocket from "./(sections)/live-socket";
 import AddFlow from "./(partials)/add-flow";
 import OfflineBanner from "./(partials)/offline-banner";
+import isRaillessPage from "./(utils)/is-railless-page";
 
 /**
  * Full-bleed shell for every `/admin/*` page: the rail of bot conversations
  * and workspaces, then the page (a conversation, a workspace, or
- * settings), inside the Add flow both can open. No cards, no shadows;
+ * settings), inside the Add flow both can open. A graphic's own page
+ * (`isRaillessPage`) goes without the rail. No cards, no shadows;
  * regions are separated by 1px hairlines. Below `md` the rail slides over
  * the page instead of taking width. Height is `dvh`, so the on-screen
  * keyboard doesn't push the composer out of view.
@@ -50,9 +52,11 @@ export default function BotsLayout({
         return () => window.removeEventListener("keydown", onKeyDown);
     }, [drawer_open]);
 
+    const has_rail = !isRaillessPage({ pathname });
+
     const drawer = useMemo(
-        () => ({ open: drawer_open, setOpen: setDrawerOpen }),
-        [drawer_open],
+        () => ({ open: drawer_open, setOpen: setDrawerOpen, has_rail }),
+        [drawer_open, has_rail],
     );
 
     return (
@@ -61,7 +65,7 @@ export default function BotsLayout({
                 <Stack className="w-full h-dvh gap-0! items-stretch overflow-hidden bg-paper text-ink pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]">
                     {online ? null : <OfflineBanner />}
                     <Row className="grow min-h-0 w-full gap-0! flex-nowrap items-stretch overflow-hidden">
-                        <BotsRail />
+                        {has_rail ? <BotsRail /> : null}
                         <Row className="grow min-w-0 h-full gap-0! flex-nowrap items-stretch">
                             {children}
                         </Row>