akanjs 3.0.0-alpha.26 → 3.0.0-alpha.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "3.0.0-alpha.26",
+  "version": "3.0.0-alpha.28",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/server/systemPageDocument.tsx

@@ -39,7 +39,7 @@ export const SYSTEM_PAGE_STATUS_COPY = {
 } as const;
 
 export const SYSTEM_PAGE_STYLE = `
-:root { color-scheme: dark; --akan-primary: #ff493b; --akan-secondary: #2b2e33; --akan-accent: #d1a23b; --akan-foreground: #ffffff; --akan-background: #1a1a1a; --akan-base-200: #2a2a2a; --akan-error: #f02020; }
+:root { color-scheme: dark; --akan-primary: #ff493b; --akan-secondary: #2b2e33; --akan-accent: #d1a23b; --akan-foreground: #ffffff; --akan-background: #1a1a1a; --akan-error: #f02020; }
 body { margin: 0; min-height: 100vh; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--akan-background); color: var(--akan-foreground); }
 a { color: inherit; }
 .akan-system-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; box-sizing: border-box; background: radial-gradient(circle at top left, rgba(255, 73, 59, 0.16), transparent 34%), linear-gradient(135deg, var(--akan-background), #111); }

package/types/server/systemPageDocument.d.ts

@@ -32,7 +32,7 @@ export declare const SYSTEM_PAGE_STATUS_COPY: {
         readonly actionLabel: "Back to safety";
     };
 };
-export declare const SYSTEM_PAGE_STYLE = "\n:root { color-scheme: dark; --akan-primary: #ff493b; --akan-secondary: #2b2e33; --akan-accent: #d1a23b; --akan-foreground: #ffffff; --akan-background: #1a1a1a; --akan-base-200: #2a2a2a; --akan-error: #f02020; }\nbody { margin: 0; min-height: 100vh; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif; background: var(--akan-background); color: var(--akan-foreground); }\na { color: inherit; }\n.akan-system-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; box-sizing: border-box; background: radial-gradient(circle at top left, rgba(255, 73, 59, 0.16), transparent 34%), linear-gradient(135deg, var(--akan-background), #111); }\n.akan-system-card { width: min(720px, 100%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 32px; background: linear-gradient(145deg, rgba(42, 42, 42, 0.96), rgba(43, 46, 51, 0.78)); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36); padding: clamp(28px, 6vw, 56px); }\n.akan-system-status { margin: 0 0 18px; font-weight: 800; font-size: clamp(4rem, 18vw, 8rem); line-height: 0.85; letter-spacing: -0.08em; color: var(--akan-primary); }\n.akan-system-eyebrow { margin: 0 0 10px; color: var(--akan-accent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }\n.akan-system-title { margin: 0; max-width: 12ch; font-size: clamp(2rem, 7vw, 4rem); line-height: 0.95; letter-spacing: -0.055em; color: var(--akan-foreground); }\n.akan-system-description { margin: 22px 0 0; max-width: 56ch; color: rgba(255, 255, 255, 0.76); font-size: 1.05rem; line-height: 1.75; }\n.akan-system-path { margin: 22px 0 0; overflow-wrap: anywhere; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(26, 26, 26, 0.72); padding: 12px 14px; color: rgba(255, 255, 255, 0.72); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.88rem; }\n.akan-system-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }\n.akan-system-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--akan-primary); border-radius: 999px; background: var(--akan-primary); box-shadow: 0 12px 34px rgba(255, 73, 59, 0.26); color: var(--akan-foreground); padding: 0 18px; font-weight: 800; text-decoration: none; }\n.akan-system-secondary { border: 1px solid rgba(255, 255, 255, 0.12); background: var(--akan-secondary); color: var(--akan-foreground); }\n.akan-system-details { margin-top: 28px; max-height: 260px; overflow: auto; border-radius: 18px; background: rgba(26, 26, 26, 0.82); border: 1px solid rgba(240, 32, 32, 0.22); padding: 16px; color: rgba(255, 255, 255, 0.78); font-size: 0.82rem; line-height: 1.55; white-space: pre-wrap; }\n";
+export declare const SYSTEM_PAGE_STYLE = "\n:root { color-scheme: dark; --akan-primary: #ff493b; --akan-secondary: #2b2e33; --akan-accent: #d1a23b; --akan-foreground: #ffffff; --akan-background: #1a1a1a; --akan-error: #f02020; }\nbody { margin: 0; min-height: 100vh; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif; background: var(--akan-background); color: var(--akan-foreground); }\na { color: inherit; }\n.akan-system-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; box-sizing: border-box; background: radial-gradient(circle at top left, rgba(255, 73, 59, 0.16), transparent 34%), linear-gradient(135deg, var(--akan-background), #111); }\n.akan-system-card { width: min(720px, 100%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 32px; background: linear-gradient(145deg, rgba(42, 42, 42, 0.96), rgba(43, 46, 51, 0.78)); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36); padding: clamp(28px, 6vw, 56px); }\n.akan-system-status { margin: 0 0 18px; font-weight: 800; font-size: clamp(4rem, 18vw, 8rem); line-height: 0.85; letter-spacing: -0.08em; color: var(--akan-primary); }\n.akan-system-eyebrow { margin: 0 0 10px; color: var(--akan-accent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }\n.akan-system-title { margin: 0; max-width: 12ch; font-size: clamp(2rem, 7vw, 4rem); line-height: 0.95; letter-spacing: -0.055em; color: var(--akan-foreground); }\n.akan-system-description { margin: 22px 0 0; max-width: 56ch; color: rgba(255, 255, 255, 0.76); font-size: 1.05rem; line-height: 1.75; }\n.akan-system-path { margin: 22px 0 0; overflow-wrap: anywhere; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(26, 26, 26, 0.72); padding: 12px 14px; color: rgba(255, 255, 255, 0.72); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.88rem; }\n.akan-system-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }\n.akan-system-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--akan-primary); border-radius: 999px; background: var(--akan-primary); box-shadow: 0 12px 34px rgba(255, 73, 59, 0.26); color: var(--akan-foreground); padding: 0 18px; font-weight: 800; text-decoration: none; }\n.akan-system-secondary { border: 1px solid rgba(255, 255, 255, 0.12); background: var(--akan-secondary); color: var(--akan-foreground); }\n.akan-system-details { margin-top: 28px; max-height: 260px; overflow: auto; border-radius: 18px; background: rgba(26, 26, 26, 0.82); border: 1px solid rgba(240, 32, 32, 0.22); padding: 16px; color: rgba(255, 255, 255, 0.78); font-size: 0.82rem; line-height: 1.55; white-space: pre-wrap; }\n";
 export declare function createSystemPageDocument(options: SystemPageOptions): ReactNode;
 export declare function getSystemPageErrorDetails(error: unknown): string;
 export declare function getSystemPageHomeHref({ pathname, i18n, basePaths, headerBasePath, }: SystemPageHomeHrefOptions): string;

package/types/ui/Agent/Markdown.d.ts

@@ -0,0 +1,11 @@
+interface MarkdownProps {
+    className?: string;
+    children: string;
+}
+/**
+ * The chat's own markdown renderer: React elements, never `dangerouslySetInnerHTML`, and no parser dependency.
+ * `Bun.markdown` is the obvious candidate and cannot serve this — it is a runtime API the bundler passes through
+ * verbatim, so it is undefined in the browser, and assistant text arrives here as SSE deltas the client accrues.
+ */
+export default function Markdown({ className, children }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/types/ui/Agent/markdownBlocks.d.ts

@@ -0,0 +1,34 @@
+import { type TableBlock } from "./markdownTable.d.ts";
+export interface MarkdownItem {
+    depth: number;
+    ordered: boolean;
+    num: number;
+    text: string;
+}
+export type MarkdownBlock = {
+    kind: "code";
+    text: string;
+} | {
+    kind: "heading";
+    level: number;
+    text: string;
+} | {
+    kind: "list";
+    items: MarkdownItem[];
+} | {
+    kind: "quote";
+    text: string;
+} | {
+    kind: "rule";
+} | {
+    kind: "para";
+    text: string;
+} | TableBlock;
+/**
+ * Block scanner for assistant chat text — the CommonMark subset a model actually emits over this wire.
+ */
+export declare class MarkdownBlocks {
+    #private;
+    static of(source: string): MarkdownBlock[];
+    constructor(source: string);
+}

package/types/ui/Agent/markdownSpans.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from "react";
+export declare const spans: (text: string) => ReactNode[];

package/types/ui/Agent/markdownTable.d.ts

@@ -0,0 +1,16 @@
+export type Align = "left" | "center" | "right";
+export interface TableBlock {
+    kind: "table";
+    aligns: (Align | null)[];
+    head: string[];
+    rows: string[][];
+}
+/** GFM table scan, kept out of the block scanner because the delimiter row makes it the one shape that has to
+ *  read the line after the one it starts on. */
+export declare class MarkdownTable {
+    #private;
+    static at(lines: string[], at: number): {
+        block: TableBlock;
+        next: number;
+    } | null;
+}

package/types/ui/Model/AdminPanel.d.ts

@@ -18,6 +18,9 @@ interface AdminPanelProps<T extends string, State, Input, Full extends {
             [key: string]: any;
         };
     };
+    template?: any;
+    unit?: any;
+    view?: any;
     /** Summary column to query descriptor. Only a column this map names becomes a link to its filtered listing. */
     queryMap?: {
         [key: string]: unknown;
@@ -31,5 +34,5 @@ export default function AdminPanel<RefName extends string, State, Input, Full ex
     id: string;
 }, Light extends {
     id: string;
-}>({ slice, components, queryMap, summaryColumns, insightColumns, renderInsight, renderDashboard, ...props }: AdminPanelProps<RefName, State, Input, Full, Light>): import("react/jsx-runtime").JSX.Element;
+}>({ slice, components, queryMap, template, unit, view, summaryColumns, insightColumns, renderInsight, renderDashboard, ...props }: AdminPanelProps<RefName, State, Input, Full, Light>): import("react/jsx-runtime").JSX.Element;
 export {};

package/ui/Agent/Approval.tsx

@@ -13,7 +13,7 @@ export default function Approval({ className, approval }: ApprovalProps) {
   return (
     <div className={cn("flex flex-col gap-2 border-warning/30 border-t bg-warning/10 px-4 py-3", className)}>
       <p className="text-sm">{approval.message}</p>
-      <pre className="max-h-24 overflow-auto rounded-field bg-base-100/60 p-2 font-mono text-[10px]">
+      <pre className="max-h-24 overflow-auto rounded-field bg-background/60 p-2 font-mono text-[10px]">
         {JSON.stringify(approval.args, null, 2)}
       </pre>
       <div className="flex justify-end gap-2">

package/ui/Agent/Bubble.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "akanjs/client";
 import type { ChatMessage, ToolCallResult } from "../../vendor/use-agentic";
+import Markdown from "./Markdown";
 
 interface BubbleProps {
   className?: string;
@@ -63,7 +64,7 @@ export default function Bubble({ className, message, results }: BubbleProps) {
   const isDrafting = !message.text && !message.toolCalls?.length && !message.error;
   return (
     <div className={cn("flex max-w-[85%] flex-col gap-1 self-start", className)}>
-      {message.text ? <p className="whitespace-pre-wrap text-sm">{message.text}</p> : null}
+      {message.text ? <Markdown className="text-sm">{message.text}</Markdown> : null}
       {(message.toolCalls ?? []).map((call) => (
         <Row key={call.id} args={call.args} name={call.name} result={results?.get(call.id)} />
       ))}

package/ui/Agent/Chat.tsx

@@ -3,7 +3,7 @@ import { cn, fetch, usePage } from "akanjs/client";
 import type { PromptResult } from "akanjs/signal";
 import { AgentContext, type AgentPrompt, AgentPrompts, ensureStoreSurface } from "akanjs/store";
 import { useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
-import { AiOutlineClear, AiOutlineClose, AiOutlineRobot } from "react-icons/ai";
+import { AiOutlineClear, AiOutlineClose } from "react-icons/ai";
 import { type AgentRunner, AgentSession, SessionContext } from "../../vendor/use-agentic";
 import { Button } from "../Button";
 import { inputRecipe } from "../recipe";
@@ -26,6 +26,8 @@ export interface ChatProps {
   persist?: PersistOption;
 }
 
+const isApplePlatform = () => /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
+
 /**
  * The user-facing half of the in-page agent: one floating chat wired to the same surface the dock inspects.
  * The conversation loop runs in this browser session — every tool call executes here, gated by the approval
@@ -63,10 +65,31 @@ export const DefaultChat = ({
   );
   const [open, setOpen] = useState(defaultOpen);
   const [draft, setDraft] = useState("");
+  const [hotkey, setHotkey] = useState<{ label: string; keys: string } | null>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     listRef.current?.scrollTo({ top: listRef.current.scrollHeight });
   }, [version, open]);
+  useEffect(() => {
+    const apple = isApplePlatform();
+    setHotkey(apple ? { label: "⌘ L", keys: "Meta+L" } : { label: "Ctrl+L", keys: "Control+L" });
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.repeat || event.key.toLowerCase() !== "l" || event.shiftKey || event.altKey) return;
+      const chord = apple ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
+      if (!chord) return;
+      event.preventDefault();
+      setOpen(true);
+      inputRef.current?.focus();
+    };
+    
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    inputRef.current?.focus();
+  }, [open]);
   const runPrompt = async (prompt: AgentPrompt, args: string[]) => {
     const usage = `/${prompt.name} ${prompt.args.map((arg) => `<${arg.name}>`).join(" ")}`.trim();
     if (args.length < prompt.args.filter((arg) => arg.required).length) {
@@ -121,16 +144,33 @@ export const DefaultChat = ({
   if (!open)
     return (
       <button
+        aria-keyshortcuts={hotkey?.keys}
         aria-label={l("base.agent")}
         data-agent-ui=""
         className={cn(
-          "fixed right-4 bottom-4 z-50 flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform hover:scale-105",
+          "group/agent fixed right-4 bottom-4 z-50 flex size-12 items-center justify-center rounded-full border border-primary/20 bg-primary/90 text-primary-foreground shadow-lg shadow-primary/30 transition-transform hover:scale-105",
           className,
         )}
         onClick={() => setOpen(true)}
         type="button"
       >
-        <AiOutlineRobot className="text-2xl" />
+        {hotkey ? (
+          <kbd className="pointer-events-none absolute right-full mr-3 hidden rounded-lg border border-border bg-background px-2 py-0.5 font-mono text-foreground/50 text-xs opacity-0 shadow-sm group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100 md:block">
+            {hotkey.label}
+          </kbd>
+        ) : null}
+        <svg className="size-7" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill="currentColor"
+            d="M40 18 C43.6 43.6 54.4 54.4 80 58 C54.4 61.6 43.6 72.4 40 98
+       C36.4 72.4 25.6 61.6 0 58 C25.6 54.4 36.4 43.6 40 18 Z"
+          />
+          <path
+            fill="currentColor"
+            d="M80 2 C81.8 14.8 87.2 20.2 100 22 C87.2 23.8 81.8 29.2 80 42
+       C78.2 29.2 72.8 23.8 60 22 C72.8 20.2 78.2 14.8 80 2 Z"
+          />
+        </svg>
       </button>
     );
   return (
@@ -142,7 +182,7 @@ export const DefaultChat = ({
         className,
       )}
     >
-      <header className="flex items-center gap-2 border-base-content/5 border-b px-4 py-3">
+      <header className="flex items-center gap-2 border-foreground/5 border-b px-4 py-3">
         <span className="font-semibold text-sm">{title ?? l("base.agent")}</span>
         {session.isRunning ? <span className="size-2 animate-pulse rounded-full bg-primary" /> : null}
         <span className="ml-auto flex items-center gap-2">
@@ -175,7 +215,7 @@ export const DefaultChat = ({
       </div>
       {session.pendingApproval ? <Approval approval={session.pendingApproval} /> : null}
       {menu.length ? (
-        <div className="flex max-h-40 flex-col overflow-y-auto border-base-content/5 border-t py-1">
+        <div className="flex max-h-40 flex-col overflow-y-auto border-foreground/5 border-t py-1">
           {menu.map((prompt) => (
             <button
               className="flex items-baseline gap-2 px-4 py-1.5 text-left hover:bg-muted"
@@ -196,10 +236,11 @@ export const DefaultChat = ({
           ))}
         </div>
       ) : null}
-      <div className="flex items-center gap-2 border-base-content/5 border-t p-3">
+      <div className="flex items-center gap-2 border-foreground/5 border-t p-3">
         <input
           className={inputRecipe({ size: "sm" }, "flex-1")}
           onChange={(event) => setDraft(event.target.value)}
+          ref={inputRef}
           onKeyDown={(event) => {
             if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
             event.preventDefault();

package/ui/Agent/Context.tsx

@@ -29,7 +29,7 @@ export default function Context({ className }: ContextProps) {
         Assemble
       </button>
       {shown ? (
-        <pre className="mt-2 max-h-60 overflow-auto rounded-field bg-base-100/60 p-2 text-[10px] leading-tight">
+        <pre className="mt-2 max-h-60 overflow-auto rounded-field bg-background/60 p-2 text-[10px] leading-tight">
           {shown}
         </pre>
       ) : null}

package/ui/Agent/Dock.tsx

@@ -41,7 +41,7 @@ export const Dock = ({ className, bridge, surface, open = false }: DockProps) =>
     <aside
       data-agent-ui=""
       className={cn(
-        "fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-80 flex-col gap-2 overflow-y-auto rounded-box border border-base-content/10 bg-base-100/95 p-3 shadow-lg",
+        "fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-80 flex-col gap-2 overflow-y-auto rounded-box border border-foreground/10 bg-background/95 p-3 shadow-lg",
         className,
       )}
     >

package/ui/Agent/Markdown.tsx

@@ -0,0 +1,125 @@
+"use client";
+import { cn } from "akanjs/client";
+import type { ReactNode } from "react";
+import { type MarkdownBlock, MarkdownBlocks, type MarkdownItem } from "./markdownBlocks";
+import { spans } from "./markdownSpans";
+import type { Align, TableBlock } from "./markdownTable";
+
+const alignClass: { [key in Align]: string } = { left: "text-left", center: "text-center", right: "text-right" };
+
+interface ListProps {
+  className?: string;
+  items: MarkdownItem[];
+}
+
+/** Folds the scanner's flat depth-scored items back into real nested lists, so a nested run carries its own
+ *  marker and leaves the outer numbering alone — a hidden `li` still advances an `ol`'s counter. */
+const List = ({ className, items }: ListProps) => {
+  const rows: ReactNode[] = [];
+  for (let at = 0; at < items.length; ) {
+    const item = items[at];
+    const nested: MarkdownItem[] = [];
+    for (at += 1; at < items.length && items[at].depth > item.depth; at += 1) nested.push(items[at]);
+    rows.push(
+      <li key={at}>
+        {spans(item.text)}
+        {nested.length ? <List className="pl-4" items={nested} /> : null}
+      </li>,
+    );
+  }
+  const [first] = items;
+  return first.ordered ? (
+    <ol className={cn("list-inside list-decimal", className)} start={first.num}>
+      {rows}
+    </ol>
+  ) : (
+    <ul className={cn("list-inside list-disc", className)}>{rows}</ul>
+  );
+};
+
+interface TableProps {
+  block: TableBlock;
+}
+
+const Table = ({ block }: TableProps) => {
+  const cellClass = block.head.map((_, idx) => {
+    const align = block.aligns[idx];
+    return align ? alignClass[align] : "";
+  });
+  return (
+
+    <div className="overflow-x-auto">
+      <table className="min-w-full border-collapse">
+        <thead>
+          <tr className="bg-muted/40">
+            {block.head.map((cell, idx) => (
+              <th className={cn("border-base-content/10 border-b px-2 py-1 text-left", cellClass[idx])} key={idx}>
+                {spans(cell)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {block.rows.map((row, rowIdx) => (
+            <tr key={rowIdx}>
+              {row.map((cell, idx) => (
+                <td className={cn("border-base-content/5 border-b px-2 py-1 text-left", cellClass[idx])} key={idx}>
+                  {spans(cell)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+interface BlockProps {
+  block: MarkdownBlock;
+}
+
+const Block = ({ block }: BlockProps) => {
+  switch (block.kind) {
+    case "code":
+      return (
+        <pre className="overflow-x-auto rounded-field bg-muted p-2 font-mono text-[11px] leading-tight">
+          {block.text}
+        </pre>
+      );
+    case "heading":
+      return <p className={cn("font-semibold", block.level <= 2 && "text-base")}>{spans(block.text)}</p>;
+    case "list":
+      return <List items={block.items} />;
+    case "table":
+      return <Table block={block} />;
+    case "quote":
+      return (
+        <blockquote className="border-foreground/20 border-l-2 pl-2 text-foreground/70">{spans(block.text)}</blockquote>
+      );
+    case "rule":
+      return <hr className="border-foreground/10" />;
+    default:
+      return <p>{spans(block.text)}</p>;
+  }
+};
+
+interface MarkdownProps {
+  className?: string;
+  children: string;
+}
+
+/**
+ * The chat's own markdown renderer: React elements, never `dangerouslySetInnerHTML`, and no parser dependency.
+ * `Bun.markdown` is the obvious candidate and cannot serve this — it is a runtime API the bundler passes through
+ * verbatim, so it is undefined in the browser, and assistant text arrives here as SSE deltas the client accrues.
+ */
+export default function Markdown({ className, children }: MarkdownProps) {
+  return (
+    <div className={cn("flex flex-col gap-2 break-words", className)}>
+      {MarkdownBlocks.of(children).map((block, idx) => (
+        <Block block={block} key={idx} />
+      ))}
+    </div>
+  );
+}

package/ui/Agent/Tool.tsx

@@ -37,7 +37,7 @@ export default function Tool({ className, surface, tool, onRun }: ToolProps) {
     onRun();
   };
   return (
-    <details className={cn("rounded-field bg-base-100/60 px-2 py-1", className)}>
+    <details className={cn("rounded-field bg-background/60 px-2 py-1", className)}>
       <summary className="flex cursor-pointer list-none items-center gap-2 [&::-webkit-details-marker]:hidden">
         <span
           className={cn(

package/ui/Agent/Transcript.tsx

@@ -17,7 +17,7 @@ export default function Transcript({ className, calls }: TranscriptProps) {
   return (
     <div className={cn("flex flex-col gap-1", className)}>
       {calls.map((call, idx) => (
-        <div className="flex flex-col rounded-field bg-base-100/60 px-2 py-1" key={idx}>
+        <div className="flex flex-col rounded-field bg-background/60 px-2 py-1" key={idx}>
           <div className="flex items-baseline gap-2">
             <span className="truncate font-mono text-xs">{call.name}</span>
             <span className="ml-auto shrink-0 text-[10px] text-foreground/40">

package/ui/Agent/markdownBlocks.ts

@@ -0,0 +1,135 @@
+import { MarkdownTable, type TableBlock } from "./markdownTable";
+
+export interface MarkdownItem {
+  depth: number;
+  ordered: boolean;
+  num: number;
+  text: string;
+}
+
+export type MarkdownBlock =
+  | { kind: "code"; text: string }
+  | { kind: "heading"; level: number; text: string }
+  | { kind: "list"; items: MarkdownItem[] }
+  | { kind: "quote"; text: string }
+  | { kind: "rule" }
+  | { kind: "para"; text: string }
+  | TableBlock;
+
+const fence = /^ {0,3}(```|~~~)/;
+const heading = /^ {0,3}(#{1,6})\s+(.*)$/;
+const rule = /^ {0,3}(?:-{3,}|\*{3,}|_{3,})\s*$/;
+const quote = /^ {0,3}> ?(.*)$/;
+const bullet = /^(\s*)[-*+]\s+(.*)$/;
+const ordered = /^(\s*)(\d{1,9})[.)]\s+(.*)$/;
+const lazyLine = /^\s+\S/;
+
+/**
+ * Block scanner for assistant chat text — the CommonMark subset a model actually emits over this wire.
+ */
+export class MarkdownBlocks {
+  static of(source: string): MarkdownBlock[] {
+    return new MarkdownBlocks(source).#run();
+  }
+
+  readonly #lines: string[];
+  readonly #blocks: MarkdownBlock[] = [];
+  #at = 0;
+
+  constructor(source: string) {
+    this.#lines = source.replace(/\r\n?/g, "\n").split("\n");
+  }
+
+  #run() {
+    while (this.#at < this.#lines.length) {
+      const line = this.#lines[this.#at];
+      const head = heading.exec(line);
+      const fenced = fence.exec(line);
+      const table = MarkdownTable.at(this.#lines, this.#at);
+      if (!line.trim()) this.#at += 1;
+      else if (fenced) this.#code(fenced[1]);
+      else if (rule.test(line)) this.#take({ kind: "rule" });
+      else if (head) this.#take({ kind: "heading", level: head[1].length, text: head[2] });
+      else if (quote.test(line)) this.#quote();
+      else if (ordered.test(line)) this.#list(true);
+      else if (bullet.test(line)) this.#list(false);
+      else if (table) {
+        this.#blocks.push(table.block);
+        this.#at = table.next;
+      } else this.#para();
+    }
+    return this.#blocks;
+  }
+
+  #take(block: MarkdownBlock) {
+    this.#blocks.push(block);
+    this.#at += 1;
+  }
+
+  #code(marker: string) {
+    this.#at += 1;
+    const body: string[] = [];
+    while (this.#at < this.#lines.length) {
+      const line = this.#lines[this.#at];
+      this.#at += 1;
+      if (line.trimStart().startsWith(marker)) break;
+      body.push(line);
+    }
+    this.#blocks.push({ kind: "code", text: body.join("\n") });
+  }
+
+  #quote() {
+    const lines: string[] = [];
+    while (this.#at < this.#lines.length) {
+      const match = quote.exec(this.#lines[this.#at]);
+      if (!match) break;
+      lines.push(match[1]);
+      this.#at += 1;
+    }
+    this.#blocks.push({ kind: "quote", text: lines.join(" ").trim() });
+  }
+
+  #list(isOrdered: boolean) {
+    const items: MarkdownItem[] = [];
+    while (this.#at < this.#lines.length) {
+      const line = this.#lines[this.#at];
+      const item = MarkdownBlocks.#item(line, isOrdered);
+      const open = items.at(-1);
+      if (item) items.push(item);
+      else if (open && lazyLine.test(line)) open.text += ` ${line.trim()}`;
+      else break;
+      this.#at += 1;
+    }
+    this.#blocks.push({ kind: "list", items });
+  }
+
+  static #item(line: string, isOrdered: boolean): MarkdownItem | null {
+    const numbered = ordered.exec(line);
+    const bulleted = bullet.exec(line);
+    const other = isOrdered ? bulleted : numbered;
+    const match = (isOrdered ? numbered : bulleted) ?? (other?.[1].length ? other : null);
+    if (!match) return null;
+    const carriesNum = match === numbered;
+    return {
+      depth: Math.floor(match[1].length / 2),
+      ordered: carriesNum,
+      num: carriesNum ? Number(match[2]) : 0,
+      text: carriesNum ? match[3] : match[2],
+    };
+  }
+
+  #para() {
+    const lines: string[] = [];
+    while (this.#at < this.#lines.length) {
+      const line = this.#lines[this.#at];
+      if (!line.trim() || this.#opensBlock(line) || MarkdownTable.at(this.#lines, this.#at)) break;
+      lines.push(line.trim());
+      this.#at += 1;
+    }
+    this.#blocks.push({ kind: "para", text: lines.join(" ") });
+  }
+
+  #opensBlock(line: string) {
+    return [fence, heading, rule, quote, bullet, ordered].some((pattern) => pattern.test(line));
+  }
+}

package/ui/Agent/markdownSpans.tsx

@@ -0,0 +1,49 @@
+"use client";
+import type { ReactNode } from "react";
+
+const inline =
+  /(!?)\[([^\]]*)\]\(((?:[^\s()]|\([^\s()]*\))+)\)|`([^`]+)`|\*\*([\s\S]+?)\*\*|\*([^*\n]+?)\*|~~([\s\S]+?)~~/g;
+
+const isSafeHref = (href: string) => !/^[a-z][a-z0-9+.-]*:/i.test(href) || /^(?:https?|mailto|tel):/i.test(href);
+
+export const spans = (text: string): ReactNode[] => {
+  const nodes: ReactNode[] = [];
+  let cut = 0;
+  for (const match of text.matchAll(inline)) {
+    const at = match.index;
+    const [, image, label, href, code, strong, em, del] = match;
+    if (at > cut) nodes.push(text.slice(cut, at));
+    cut = at + match[0].length;
+    if (href)
+      nodes.push(
+        image || !isSafeHref(href) ? (
+          label
+        ) : (
+          <a className="underline" href={href} key={at} rel="noreferrer" target="_blank">
+            {spans(label)}
+          </a>
+        ),
+      );
+    else if (code)
+      nodes.push(
+        <code className="rounded-field bg-muted px-1 font-mono text-[11px]" key={at}>
+          {code}
+        </code>,
+      );
+    else if (strong)
+      nodes.push(
+        <strong className="font-semibold" key={at}>
+          {spans(strong)}
+        </strong>,
+      );
+    else if (em) nodes.push(<em key={at}>{spans(em)}</em>);
+    else if (del)
+      nodes.push(
+        <del className="opacity-60" key={at}>
+          {spans(del)}
+        </del>,
+      );
+  }
+  if (cut < text.length) nodes.push(text.slice(cut));
+  return nodes;
+};

package/ui/Agent/markdownTable.ts

@@ -0,0 +1,54 @@
+export type Align = "left" | "center" | "right";
+
+export interface TableBlock {
+  kind: "table";
+  aligns: (Align | null)[];
+  head: string[];
+  rows: string[][];
+}
+
+const cellSplit = /(?<!\\)\|/;
+const delimiter = /^:?-+:?$/;
+
+/** GFM table scan, kept out of the block scanner because the delimiter row makes it the one shape that has to
+ *  read the line after the one it starts on. */
+export class MarkdownTable {
+  static at(lines: string[], at: number): { block: TableBlock; next: number } | null {
+    const header = lines[at];
+    const aligns = MarkdownTable.#aligns(lines[at + 1]);
+    if (!header?.includes("|") || !aligns) return null;
+    const head = MarkdownTable.#cells(header);
+    const rows: string[][] = [];
+    let next = at + 2;
+    for (; next < lines.length; next += 1) {
+      const line = lines[next];
+      if (!line.trim() || !line.includes("|")) break;
+      const cells = MarkdownTable.#cells(line);
+
+      rows.push(head.map((_, idx) => cells[idx] ?? ""));
+    }
+    return { block: { kind: "table", aligns, head, rows }, next };
+  }
+
+  static #cells(line: string): string[] {
+    return line
+      .trim()
+      .replace(/^\|/, "")
+      .replace(/(?<!\\)\|$/, "")
+      .split(cellSplit)
+      .map((cell) => cell.trim().replace(/\\\|/g, "|"));
+  }
+
+  /** The delimiter row is what separates a table from a paragraph that merely contains a pipe, and from the
+   *  `---` of a rule — which is why the pipe is required of it rather than of the header. */
+  static #aligns(line: string | undefined): (Align | null)[] | null {
+    if (!line?.includes("|")) return null;
+    const cells = MarkdownTable.#cells(line);
+    if (!cells.every((cell) => delimiter.test(cell))) return null;
+    return cells.map((cell) => {
+      const closed = cell.endsWith(":");
+      if (cell.startsWith(":")) return closed ? "center" : "left";
+      return closed ? "right" : null;
+    });
+  }
+}

package/ui/Model/AdminPanel.tsx

@@ -14,6 +14,9 @@ interface AdminPanelProps<T extends string, State, Input, Full extends { id: str
     Unit: { [key: string]: any };
     View: { [key: string]: any };
   };
+  template?: any;
+  unit?: any;
+  view?: any;
   /** Summary column to query descriptor. Only a column this map names becomes a link to its filtered listing. */
   queryMap?: { [key: string]: unknown };
   /** Keys of the app's `summary` state shown as dashboard tiles above the list. */
@@ -32,6 +35,9 @@ export default function AdminPanel<
   slice,
   components,
   queryMap,
+  template,
+  unit,
+  view,
   summaryColumns,
   insightColumns = [],
   renderInsight = ({ insight }) => (
@@ -52,9 +58,15 @@ export default function AdminPanel<
   ...props
 }: AdminPanelProps<RefName, State, Input, Full, Light>) {
   const { sliceName } = slice;
-  const Unit = components.Unit.General as ((props: ModelProps<any, any>) => ReactNode) | undefined;
-  const Template = components.Template.General as ((props: { [key in RefName]: Full }) => ReactNode) | undefined;
-  const View = components.View.General as ComponentType<{ [key in RefName]: Full }> | undefined;
+  const Unit = (unit ?? components.Unit.General ?? components.Unit.Card ?? Object.values(components.Unit).at(0)) as
+    | ((props: ModelProps<any, any>) => ReactNode)
+    | undefined;
+  const Template = (template ?? components.Template.General ?? Object.values(components.Template).at(0)) as
+    | ((props: { [key in RefName]: Full }) => ReactNode)
+    | undefined;
+  const View = (view ?? components.View.General ?? Object.values(components.View).at(0)) as
+    | ComponentType<{ [key in RefName]: Full }>
+    | undefined;
   return (
     <Data.ListContainer
       slice={slice}