akanjs 3.0.0-alpha.28 → 3.0.0-alpha.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "3.0.0-alpha.28",
+  "version": "3.0.0-alpha.29",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -213,7 +213,6 @@
     "firebase": "^12.13.0",
     "happy-dom": "^20.11.2",
     "ioredis": "^5.10.1",
-    "mermaid": "^11.15.0",
     "postgres": "^3.4.9",
     "protobufjs": "^8.4.0",
     "react": "19.2.7",
@@ -316,9 +315,6 @@
     "ioredis": {
       "optional": true
     },
-    "mermaid": {
-      "optional": true
-    },
     "postgres": {
       "optional": true
     },

package/types/ui/Constant/Graph.d.ts

@@ -0,0 +1,10 @@
+import { type SchemaGraphEdge, type SchemaGraphNode } from "./schemaGraph.d.ts";
+export interface GraphProps {
+    className?: string;
+    title?: string;
+    nodes: SchemaGraphNode[];
+    edges: SchemaGraphEdge[];
+    selectedId?: string | null;
+    onSelect?: (nodeId: string) => void;
+}
+export declare const Graph: ({ className, title, nodes, edges, selectedId, onSelect }: GraphProps) => import("react/jsx-runtime").JSX.Element;

package/types/ui/Constant/index.d.ts

@@ -1,6 +1,7 @@
 import Doc from "./Doc.d.ts";
 export * from "./schemaDoc.d.ts";
+export * from "./schemaGraph.d.ts";
 export declare const Constant: {
     Doc: typeof Doc;
-    Mermaid: ({ chart, title, className, highlightNodes, onSelectNode }: import("./Mermaid.d.ts").MermaidProps) => import("react/jsx-runtime").JSX.Element;
+    Graph: ({ className, title, nodes, edges, selectedId, onSelect }: import("./Graph.d.ts").GraphProps) => import("react/jsx-runtime").JSX.Element;
 };

package/types/ui/Constant/schemaGraph.d.ts

@@ -0,0 +1,39 @@
+export type SchemaNodeKind = "database" | "scalar" | "external";
+export interface SchemaGraphNode {
+    id: string;
+    refName: string;
+    title: string;
+    subtitle: string;
+    kind: SchemaNodeKind;
+}
+export interface SchemaGraphEdge {
+    from: string;
+    to: string;
+    label: string;
+}
+export interface PlacedNode extends SchemaGraphNode {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    textX: number;
+    titleText: string;
+    subtitleText: string;
+}
+export interface PlacedEdge extends SchemaGraphEdge {
+    path: string;
+    labelX: number;
+    labelY: number;
+}
+/**
+ * Layered left-to-right placement (longest-path layering + barycenter ordering), the same shape a `flowchart LR`
+ * produces without the renderer. Pure geometry so it is unit-testable and runs identically on the server.
+ */
+export declare class SchemaGraphLayout {
+    #private;
+    readonly nodes: PlacedNode[];
+    readonly edges: PlacedEdge[];
+    readonly width: number;
+    readonly height: number;
+    constructor(nodes: SchemaGraphNode[], edges: SchemaGraphEdge[]);
+}

package/types/ui/DraggableList.d.ts

@@ -12,7 +12,7 @@ interface DragListProps<V> {
 }
 interface Cursor {
     className?: string;
-    children: any;
+    children: ReactNode;
 }
 interface ItemProps {
     value: any;

package/types/ui/Layout/BottomTab.d.ts

@@ -1,7 +1,8 @@
+import type { ReactNode } from "react";
 interface TabType {
     name: string;
-    icon: React.ReactNode;
-    activeIcon?: React.ReactNode;
+    icon: ReactNode;
+    activeIcon?: ReactNode;
     notiCount?: number;
     href: string;
 }

package/types/ui/Loading/ProgressBar.d.ts

@@ -3,4 +3,8 @@ export interface ProgressBarProps {
     value: number;
     max: number;
 }
+/**
+ * A div track rather than a native `<progress>`. `accent-color` themes only the fill; the track keeps the UA
+ * grey, which reads as a light bar on a dark theme, and no browser applies the element's radius to the fill.
+ */
 export declare const ProgressBar: ({ className, value, max }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;

package/types/ui/Loading/Spin.d.ts

@@ -3,5 +3,6 @@ export interface SpinProps {
     indicator?: ReactNode;
     isCenter?: boolean;
     className?: string;
+    size?: "sm" | "md" | "lg";
 }
-export declare const Spin: ({ indicator, isCenter, className }: SpinProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Spin: ({ indicator, isCenter, className, size }: SpinProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -14,7 +14,7 @@ interface EditModelProps<Full> {
     edit?: ClientEdit<string, Full> | Partial<Full>;
     /** Store modal name that should activate this editor. */
     modal?: string;
-    children: any;
+    children: ReactNode;
     /** Custom loading overlay wrapper, or false to disable the default overlay. */
     loadingWrapper?: boolean | ((props: {
         children?: any;

package/types/ui/Pagination.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode } from "react";
 export interface PaginationProps {
     /** Current 1-based page number. */
     currentPage: number;
@@ -17,7 +17,7 @@ export interface PaginationProps {
         pageNumClassName?: string;
     };
 }
-export declare const DefaultPagination: FC<PaginationProps>;
+export declare const DefaultPagination: ({ currentPage, total, onPageSelect, itemsPerPage, renderEmpty, classNames, }: PaginationProps) => import("react/jsx-runtime").JSX.Element | null;
 /**
  * Pager. Resolves to a route-scoped override when a `page/**\/_overrides.tsx` in
  * the route's ancestry declares one, otherwise renders {@link DefaultPagination}.

package/types/ui/Radio.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 export interface RadioProps {
     value: string | number | null;
     className?: string;

package/types/ui/Reference/Collapse.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+interface CollapseProps {
+    className?: string;
+    contentClassName?: string;
+    summary: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+}
+/** 레퍼런스 카드의 접이식 컨테이너. daisyui `collapse` 대신 네이티브 `<details>/<summary>` — 열고 닫는 데 JS 가 없다. */
+export declare const Collapse: ({ summary, children, open, className, contentClassName }: CollapseProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/types/ui/Reference/Panel.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode, RefObject } from "react";
+import { docBorder } from "./style.d.ts";
+interface PanelProps {
+    className?: string;
+    bodyClassName?: string;
+    label?: string;
+    meta?: ReactNode;
+    tone?: Parameters<typeof docBorder>[0];
+    /** Rendered outside the scrolling body so it can cover the whole panel. */
+    overlay?: ReactNode;
+    children: ReactNode;
+}
+export declare const Panel: ({ className, bodyClassName, label, meta, tone, overlay, children }: PanelProps) => import("react/jsx-runtime").JSX.Element;
+interface CodeProps {
+    className?: string;
+    label?: string;
+    code: string;
+    tone?: PanelProps["tone"];
+    meta?: ReactNode;
+    placeholder?: string;
+    bodyRef?: RefObject<HTMLPreElement | null>;
+    overlay?: ReactNode;
+}
+/**
+ * Read-only code surface. A `<pre>` rather than a `<textarea>`: every one of these panels ignored what was typed
+ * into it, so the caret and the resize grip were promising an edit that never landed anywhere.
+ */
+export declare const Code: ({ className, label, code, tone, meta, placeholder, bodyRef, overlay }: CodeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/types/ui/Reference/Segmented.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export interface SegmentedItem<Key extends string> {
+    key: Key;
+    label: ReactNode;
+    icon?: ReactNode;
+}
+interface SegmentedProps<Key extends string> {
+    className?: string;
+    items: readonly SegmentedItem<Key>[];
+    value: Key;
+    onChange: (value: Key) => void;
+}
+/** The track and its items are also the shape of a multi-select chip group, which `Segmented` itself cannot be. */
+export declare const segmentTrackClass = "inline-flex w-fit flex-wrap gap-1 rounded-field bg-muted p-1";
+export declare const segmentItemClass: (active: boolean) => string;
+export declare const Segmented: <Key extends string>({ className, items, value, onChange }: SegmentedProps<Key>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/types/ui/Reference/Summary.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+interface SummaryCardProps {
+    className?: string;
+    label: string;
+    value: number | string;
+}
+export declare const SummaryCard: ({ className, label, value }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
+interface SummaryGridProps {
+    className?: string;
+    children: ReactNode;
+}
+export declare const SummaryGrid: ({ className, children }: SummaryGridProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/types/ui/Reference/Toolbar.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+interface ToolbarProps {
+    className?: string;
+    children: ReactNode;
+}
+export declare const Toolbar: ({ className, children }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
+interface ToolbarFieldProps {
+    className?: string;
+    label: string;
+    children: ReactNode;
+}
+export declare const ToolbarField: ({ className, label, children }: ToolbarFieldProps) => import("react/jsx-runtime").JSX.Element;
+interface SectionProps {
+    className?: string;
+    title: string;
+    action?: ReactNode;
+    children: ReactNode;
+}
+/** Titled band with a rule running to the edge, so a long document reads as sections rather than as one list. */
+export declare const Section: ({ className, title, action, children }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/types/ui/Reference/dictText.d.ts

@@ -0,0 +1,6 @@
+interface Translator {
+    _: (key: string) => string;
+}
+/** `l._` echoes an absent key back, and a raw `user.signal.x.desc` reads as prose on a document surface. */
+export declare const dictText: (l: Translator, key: string) => string;
+export {};

package/types/ui/Reference/index.d.ts

@@ -0,0 +1,7 @@
+export { Collapse } from "./Collapse.d.ts";
+export { dictText } from "./dictText.d.ts";
+export { Code, Panel } from "./Panel.d.ts";
+export { Segmented, type SegmentedItem, segmentItemClass, segmentTrackClass } from "./Segmented.d.ts";
+export { SummaryCard, SummaryGrid } from "./Summary.d.ts";
+export { docDash, docPill, docUi, type Tone } from "./style.d.ts";
+export { Section, Toolbar, ToolbarField } from "./Toolbar.d.ts";

package/types/ui/Reference/style.d.ts

@@ -0,0 +1,20 @@
+export type Tone = "info" | "success" | "warning" | "error" | "muted";
+/** Shared vocabulary for the generated reference surfaces — Constant schema docs and Signal API docs. */
+export declare const docUi: {
+    card: string;
+    panel: string;
+    tablePanel: string;
+    sectionLabel: string;
+    sectionTitle: string;
+    pageTitle: string;
+    sectionDescription: string;
+    prose: string;
+    key: string;
+    subLabel: string;
+    tableClass: string;
+    emptyPanel: string;
+};
+export declare const docPill: (tone: Tone, className?: string) => string;
+export declare const docBorder: (tone: Tone) => string;
+/** Absent optional cell. One glyph everywhere, so an empty column reads as empty rather than as data. */
+export declare const docDash = "text-foreground/25";

package/types/ui/Reference.d.ts

@@ -0,0 +1 @@
+export * from "./Reference/index.d.ts";

package/types/ui/Signal/Doc.d.ts

@@ -2,7 +2,7 @@ import { type FetchProxy } from "akanjs/fetch";
 import { type ReactNode } from "react";
 declare function Doc(): import("react/jsx-runtime").JSX.Element;
 declare namespace Doc {
-    var Setting: ({ guardNames, roleTypes, roleKeys, }: DocSettingProps) => import("react/jsx-runtime").JSX.Element;
+    var Setting: ({ guardNames, roleTypes, roleKeys, search, onSearch, }: DocSettingProps) => import("react/jsx-runtime").JSX.Element;
     var AuthModal: ({ children }: DocAuthModalProps) => import("react/jsx-runtime").JSX.Element;
     var DocSignals: ({ fetch }: DocSignalsProps) => import("react/jsx-runtime").JSX.Element;
     var DocSignal: ({ refName, fetch }: DocSignalProps) => import("react/jsx-runtime").JSX.Element;
@@ -15,6 +15,8 @@ interface DocSettingProps {
     roleKeys?: {
         [key: string]: string;
     };
+    search?: string;
+    onSearch?: (search: string) => void;
 }
 interface DocAuthModalProps {
     children: ReactNode;

package/types/ui/Signal/Object.d.ts

@@ -3,7 +3,7 @@ import { type ConstantCls } from "akanjs/constant";
 declare function Object(): import("react/jsx-runtime").JSX.Element;
 declare namespace Object {
     var Type: ({ objRef, arrDepth, nullable }: ObjectTypeProps) => import("react/jsx-runtime").JSX.Element;
-    var Detail: ({ objRef }: ObjectDetailProps) => import("react/jsx-runtime").JSX.Element;
+    var Detail: ({ className, objRef }: ObjectDetailProps) => import("react/jsx-runtime").JSX.Element;
     var Schema: ({ objRef }: ObjectSchemaProps) => import("react/jsx-runtime").JSX.Element;
 }
 export default Object;
@@ -13,6 +13,7 @@ interface ObjectTypeProps {
     nullable?: boolean;
 }
 interface ObjectDetailProps {
+    className?: string;
     objRef: ConstantCls;
 }
 interface ObjectSchemaProps {

package/types/ui/Signal/RestApi.d.ts

@@ -2,7 +2,7 @@ import { type FetchProxy } from "akanjs/fetch";
 import type { SerializedEndpoint } from "akanjs/signal";
 declare function RestApi(): import("react/jsx-runtime").JSX.Element;
 declare namespace RestApi {
-    var Endpoints: ({ refName, fetch, prefix, endpoints, openAll, httpUri }: RestApiEndpointsProps) => import("react/jsx-runtime").JSX.Element;
+    var Endpoints: ({ refName, fetch, prefix, endpoints, openAll, httpUri, search }: RestApiEndpointsProps) => import("react/jsx-runtime").JSX.Element;
     var Endpoint: ({ refName, fetch, signalPrefix, endpointKey, endpoint, open, httpUri, }: RestApiEndpointProps) => import("react/jsx-runtime").JSX.Element;
     var Interface: ({ refName, endpointKey, endpoint }: RestApiInterfaceProps) => import("react/jsx-runtime").JSX.Element;
     var Try: ({ signalPrefix, refName, endpointKey, endpoint, fetch, httpUri }: RestApiTryProps) => import("react/jsx-runtime").JSX.Element;
@@ -15,6 +15,7 @@ interface RestApiEndpointsProps {
     endpoints?: string[];
     openAll?: boolean;
     httpUri?: string;
+    search?: string;
 }
 interface RestApiEndpointProps {
     refName: string;

package/types/ui/Signal/WebSocket.d.ts

@@ -1,11 +1,12 @@
 import type { FetchProxy } from "akanjs/fetch";
 declare function WebSocket(): import("react/jsx-runtime").JSX.Element;
 declare namespace WebSocket {
-    var Endpoints: ({ refName, fetch, openAll }: WebSocketEndpointsProps) => import("react/jsx-runtime").JSX.Element;
+    var Endpoints: ({ refName, fetch, openAll, search }: WebSocketEndpointsProps) => import("react/jsx-runtime").JSX.Element;
 }
 export default WebSocket;
 interface WebSocketEndpointsProps {
     refName: string;
     fetch: FetchProxy;
     openAll?: boolean;
+    search?: string;
 }

package/types/ui/Signal/endpointEntries.d.ts

@@ -0,0 +1,10 @@
+import { type FetchProxy } from "akanjs/fetch";
+import type { SerializedEndpoint } from "akanjs/signal";
+export interface EndpointEntry {
+    key: string;
+    endpoint: SerializedEndpoint;
+}
+export declare const isWsEndpoint: (endpoint: SerializedEndpoint) => boolean;
+/** Generated CRUD, slice reads, and hand-written endpoints in one list — what the summary counts and the list share. */
+export declare const endpointEntriesOf: (refName: string, fetch: FetchProxy) => EndpointEntry[];
+export declare const matchesSearch: (key: string, path: string, search: string) => boolean;

package/types/ui/Signal/style.d.ts

@@ -1,17 +1,15 @@
+import { type Tone } from "../Reference.d.ts";
 export declare const signalUi: {
-    sectionTitle: string;
-    sectionDescription: string;
-    sectionPanel: string;
-    tablePanel: string;
-    tableClass: string;
     inputRow: string;
     inputLabel: string;
-    codePanel: string;
 };
-/** Writes carry the accent, reads do not — so the two write types are named and everything else reads. */
-export declare const getEndpointBadgeClassName: (type: string) => string;
+/** Only a mutation is a POST — enumerating that side leaves a `prompt` a GET beside the queries, and lets a
+ *  read-shaped type added later inherit the right verb rather than be mislabelled. */
+export declare const getMethodLabel: (type: string) => string;
+export declare const getMethodBadgeClassName: (type: string) => string;
+export declare const getWsBadgeClassName: (type: string) => string;
 export declare const getGuardBadgeClassName: (guard: string) => string;
-/** Published to agents carries the accent; opted in and refused is outlined, because it is a thing to go fix. */
+/** Published to agents is quiet; refused is amber, because it is a thing to go fix. */
 export declare const getMcpBadgeClassName: (exposed: boolean) => string;
+export declare const getStatusTone: (status: string) => Tone;
 export declare const getStatusBadgeClassName: (status: string) => string;
-export declare const getStatusTextareaClassName: (status: string) => "" | "border-primary" | "pointer-events-none opacity-50" | "border-destructive text-destructive";

package/types/ui/System/Messages.d.ts

@@ -1 +1 @@
-export declare const Messages: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const Messages: () => import("react").ReactPortal | null;

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-background/60 p-2 font-mono text-[10px]">
+      <pre className="scrollbar-thin 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

@@ -24,7 +24,7 @@ interface RowProps {
 const Row = ({ name, args, result }: RowProps) => (
   <div className="flex items-baseline gap-2 rounded-field bg-muted px-2 py-1">
     {result ? (
-      <span className={cn("shrink-0 text-[10px]", result.error ? "text-error" : "text-success")}>
+      <span className={cn("shrink-0 text-[10px]", result.error ? "text-destructive" : "text-success")}>
         {result.error ? "✕" : "✓"}
       </span>
     ) : (
@@ -34,7 +34,7 @@ const Row = ({ name, args, result }: RowProps) => (
     {args && Object.keys(args).length ? (
       <span className="truncate font-mono text-[10px] text-foreground/50">{JSON.stringify(args)}</span>
     ) : null}
-    {result?.error ? <span className="truncate text-[10px] text-error">{result.error}</span> : null}
+    {result?.error ? <span className="truncate text-[10px] text-destructive">{result.error}</span> : null}
     {result?.changes?.length ? (
       <span className="ml-auto shrink-0 text-[10px] text-foreground/40">Δ {result.changes.length}</span>
     ) : null}
@@ -68,7 +68,7 @@ export default function Bubble({ className, message, results }: BubbleProps) {
       {(message.toolCalls ?? []).map((call) => (
         <Row key={call.id} args={call.args} name={call.name} result={results?.get(call.id)} />
       ))}
-      {message.error ? <p className="text-error text-xs">{message.error}</p> : null}
+      {message.error ? <p className="text-destructive text-xs">{message.error}</p> : null}
       {isDrafting ? <span className="size-2 animate-pulse rounded-full bg-foreground/30" /> : null}
     </div>
   );

package/ui/Agent/Chat.tsx

@@ -155,7 +155,7 @@ export const DefaultChat = ({
         type="button"
       >
         {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">
+          <kbd className="pointer-events-none absolute right-full mr-3 hidden rounded-field 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}
@@ -206,7 +206,7 @@ export const DefaultChat = ({
           </button>
         </span>
       </header>
-      <div className="flex flex-1 flex-col gap-2 overflow-y-auto px-4 py-3" ref={listRef}>
+      <div className="scrollbar-thin flex flex-1 flex-col gap-2 overflow-y-auto px-4 py-3" ref={listRef}>
         {bubbles.length ? (
           bubbles
         ) : (
@@ -215,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-foreground/5 border-t py-1">
+        <div className="scrollbar-thin 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"

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-background/60 p-2 text-[10px] leading-tight">
+        <pre className="scrollbar-thin 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-foreground/10 bg-background/95 p-3 shadow-lg",
+        "scrollbar-thin fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-80 flex-col gap-2 overflow-y-auto rounded-box border border-border bg-background/95 p-3 shadow-lg",
         className,
       )}
     >

package/ui/Agent/Markdown.tsx

@@ -53,7 +53,7 @@ const Table = ({ block }: TableProps) => {
         <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}>
+              <th className={cn("border-border border-b px-2 py-1 text-left", cellClass[idx])} key={idx}>
                 {spans(cell)}
               </th>
             ))}
@@ -63,7 +63,7 @@ const Table = ({ block }: TableProps) => {
           {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}>
+                <td className={cn("border-border/60 border-b px-2 py-1 text-left", cellClass[idx])} key={idx}>
                   {spans(cell)}
                 </td>
               ))}

package/ui/Agent/StateKey.tsx

@@ -37,7 +37,9 @@ export default function StateKey({ className, bridge, name, entry, live }: State
         </span>
       </button>
       {shown ? (
-        <pre className="max-h-40 overflow-auto rounded-field bg-muted p-2 text-[10px] leading-tight">{shown}</pre>
+        <pre className="scrollbar-thin max-h-40 overflow-auto rounded-field bg-muted p-2 text-[10px] leading-tight">
+          {shown}
+        </pre>
       ) : null}
     </div>
   );

package/ui/Agent/Tool.tsx

@@ -66,7 +66,7 @@ export default function Tool({ className, surface, tool, onRun }: ToolProps) {
         <button className={buttonRecipe({ size: "xs" })} onClick={run} type="button">
           Run
         </button>
-        {error ? <p className="text-error text-xs">{error}</p> : null}
+        {error ? <p className="text-destructive text-xs">{error}</p> : null}
       </div>
     </details>
   );

package/ui/Agent/Transcript.tsx

@@ -25,7 +25,7 @@ export default function Transcript({ className, calls }: TranscriptProps) {
             </span>
           </div>
           <span className="truncate font-mono text-[10px] text-foreground/50">{JSON.stringify(call.args)}</span>
-          {call.error ? <span className="text-[10px] text-error">{call.error}</span> : null}
+          {call.error ? <span className="text-[10px] text-destructive">{call.error}</span> : null}
         </div>
       ))}
     </div>