akanjs 3.1.2-rc.2 → 3.1.2-rc.3

package/common/akanGraph.ts

@@ -0,0 +1,57 @@
+export type AkanGraphNodeKind =
+  | "model"
+  | "scalar"
+  | "enum"
+  | "query"
+  | "slice"
+  | "endpoint"
+  | "guard"
+  | "method"
+  | "action"
+  | "component";
+
+export type AkanGraphEdgeKind = "field" | "guard" | "calls" | "fetches" | "uses";
+
+export interface AkanGraphLocation {
+  file: string;
+  line: number;
+  column: number;
+}
+
+export interface AkanGraphField {
+  name: string;
+  type: string | null;
+  array: boolean;
+  optional: boolean;
+  ref: string | null;
+  declaredIn: string;
+  at: AkanGraphLocation;
+}
+
+export interface AkanGraphNode {
+  id: string;
+  kind: AkanGraphNodeKind;
+  name: string;
+  label: string;
+  owner: string | null;
+  module: string | null;
+  detail: string[];
+  at: AkanGraphLocation | null;
+  fields?: AkanGraphField[];
+  values?: string[];
+}
+
+export interface AkanGraphEdge {
+  from: string;
+  to: string;
+  kind: AkanGraphEdgeKind;
+  label: string | null;
+  count: number;
+  at: AkanGraphLocation | null;
+}
+
+export interface AkanGraph {
+  version: 1;
+  nodes: AkanGraphNode[];
+  edges: AkanGraphEdge[];
+}

package/common/index.ts

@@ -1,3 +1,12 @@
+export type {
+  AkanGraph,
+  AkanGraphEdge,
+  AkanGraphEdgeKind,
+  AkanGraphField,
+  AkanGraphLocation,
+  AkanGraphNode,
+  AkanGraphNodeKind,
+} from "./akanGraph";
 export {
   databaseStateNames,
   endpointNames,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "3.1.2-rc.2",
+  "version": "3.1.2-rc.3",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/server/akanApp.ts

@@ -9,7 +9,7 @@ import { getApiPrefix, getWsPrefix, normalizeRoutePrefix, resetEnvCache } from "
 import { CrossSiteGuard } from "../signal/CrossSiteGuard";
 import { isTraceEnabled } from "../signal/trace";
 import { AKAN_CHILD_HOST, makeAkanChildProxyHeaders } from "./akanAppHeaders";
-import type { BuilderCsrReq, BuilderCsrRes, BuilderMessage, BuilderReq, BuilderRes } from "./artifact";
+import type { BuilderMessage, BuilderRequest, BuilderResponse } from "./artifact";
 import { type AssetHeaderOptions, applySecurityHeaders, assetHeaders } from "./assetHeaders";
 import { compressResponse, compressStreamResponse, encodedFileResponse } from "./contentEncoding";
 import { isPortInUseError } from "./lifecycle/portInUse";
@@ -1150,6 +1150,7 @@ export class AkanApp {
         return;
       case "build-route":
       case "build-csr":
+      case "build-graph":
         this.#forwardBuilderReq(idx, message);
         return;
     }
@@ -1169,6 +1170,7 @@ export class AkanApp {
         return;
       case "build-route-res":
       case "build-csr-res":
+      case "build-graph-res":
         this.#forwardBuilderRes(message);
         return;
     }
@@ -1354,13 +1356,13 @@ export class AkanApp {
     }
   }
 
-  #forwardBuilderReq(childIdx: number, message: BuilderReq | BuilderCsrReq) {
+  #forwardBuilderReq(childIdx: number, message: BuilderRequest) {
     const gatewayReqId = this.#nextBuilderReqId++;
     this.#builderReqMap.set(gatewayReqId, { childIdx, childLocalId: message.id });
-    process.send?.({ ...message, id: gatewayReqId } satisfies BuilderReq | BuilderCsrReq);
+    process.send?.({ ...message, id: gatewayReqId } satisfies BuilderRequest);
   }
 
-  #forwardBuilderRes(message: BuilderRes | BuilderCsrRes) {
+  #forwardBuilderRes(message: BuilderResponse) {
     const request = this.#builderReqMap.get(message.id);
     if (!request) {
       this.logger.warn(`No child found for ${message.type} id=${message.id}`);
@@ -1369,7 +1371,7 @@ export class AkanApp {
     this.#builderReqMap.delete(message.id);
     const child = this.#children.get(request.childIdx);
     if (!child || child.proc.killed) return;
-    this.#sendToChild(child, { ...message, id: request.childLocalId } satisfies BuilderRes | BuilderCsrRes);
+    this.#sendToChild(child, { ...message, id: request.childLocalId } satisfies BuilderResponse);
   }
 
   #fanoutToFederation(message: AkanIpcMessage | BuilderMessage, exceptIdx?: number) {

package/server/akanServer.ts

@@ -782,6 +782,7 @@ export class AkanServer {
       websocketPrefix: this.websocketPrefix,
       openapi: this.openapi,
       getStatus: () => this.status,
+      buildGraph: webRouter ? () => webRouter.buildGraph() : undefined,
     }).createRoutes();
     return { ...openapiRoutes, ...mcpRoutes, ...devtoolsRoutes, ...soloRoutes };
   }

package/server/artifact/builderRpc.ts

@@ -1,11 +1,10 @@
 import { Logger } from "akanjs/common";
 import type {
-  BuilderCsrReq,
-  BuilderCsrRes,
   BuilderEvent,
   BuilderMessage,
-  BuilderReq,
-  BuilderRes,
+  BuilderRequest,
+  BuilderResponse,
+  BuildGraphPayload,
   BuildRouteClientResult,
   BuildRouteResultPayload,
   CsrUpdatedPayload,
@@ -31,7 +30,7 @@ export class BuilderRpc {
   readonly #logger = new Logger("BuilderRpc");
   readonly #pending = new Map<number, { resolve: (v: unknown) => void; reject: (e: Error) => void }>();
   readonly #offMessage: () => void;
-  readonly #send: (msg: BuilderReq | BuilderCsrReq) => void;
+  readonly #send: (msg: BuilderRequest) => void;
   #nextId = 1;
   #disposed = false;
 
@@ -40,13 +39,13 @@ export class BuilderRpc {
       throw new Error("[builder] process.send unavailable — backend must be spawned by the CLI with ipc enabled");
     this.#send = process.send.bind(process);
     this.#offMessage = this.#listen((msg) => {
-      if (msg.type === "build-route-res" || msg.type === "build-csr-res") {
-        const res = msg as BuilderRes | BuilderCsrRes;
+      if (msg.type === "build-route-res" || msg.type === "build-csr-res" || msg.type === "build-graph-res") {
+        const res = msg as BuilderResponse;
         const waiter = this.#pending.get(res.id);
         if (!waiter) return;
         this.#pending.delete(res.id);
         if (!res.ok) waiter.reject(new Error(`[builder] ${res.type} failed: ${res.error}`));
-        else waiter.resolve(res.type === "build-route-res" ? res.data : undefined);
+        else waiter.resolve(res.type === "build-csr-res" ? undefined : res.data);
         return;
       }
       const ev = msg as BuilderEvent;
@@ -114,6 +113,10 @@ export class BuilderRpc {
     );
   }
 
+  async buildGraph(): Promise<BuildGraphPayload> {
+    return await this.#request<BuildGraphPayload>("build-graph", (id) => this.#send({ type: "build-graph", id }));
+  }
+
   static #timeoutMs(): number {
     const configured = Number(process.env.AKAN_BUILDER_RPC_TIMEOUT_MS);
     if (Number.isFinite(configured) && configured > 0) return configured;

package/server/artifact/ipcTypes.ts

@@ -1,3 +1,4 @@
+import type { AkanGraph } from "akanjs/common";
 import type { SsrManifest } from "../ssrTypes";
 
 export interface BuildRouteResultPayload {
@@ -80,6 +81,17 @@ export type BuilderCsrRes =
   | { type: "build-csr-res"; id: number; ok: true }
   | { type: "build-csr-res"; id: number; ok: false; error: string };
 
+export interface BuildGraphPayload {
+  workspaceRoot: string;
+  graph: AkanGraph;
+}
+
+export type BuilderGraphReq = { type: "build-graph"; id: number };
+
+export type BuilderGraphRes =
+  | { type: "build-graph-res"; id: number; ok: true; data: BuildGraphPayload }
+  | { type: "build-graph-res"; id: number; ok: false; error: string };
+
 /** Drain and exit (the only way bundler memory returns to the OS); draining, not killing, keeps a rebuild whole. */
 export type BuilderControl = { type: "builder-shutdown"; reason: string };
 
@@ -164,7 +176,11 @@ export type BuilderEvent =
   /** The boot builds settled (the SSR registry's, and CSR's when the env arms it): their workers are a boot's peak. */
   | { type: "boot-armed" };
 
-export type BuilderMessage = BuilderReq | BuilderRes | BuilderCsrReq | BuilderCsrRes | BuilderControl | BuilderEvent;
+export type BuilderRequest = BuilderReq | BuilderCsrReq | BuilderGraphReq;
+
+export type BuilderResponse = BuilderRes | BuilderCsrRes | BuilderGraphRes;
+
+export type BuilderMessage = BuilderRequest | BuilderResponse | BuilderControl | BuilderEvent;
 
 export interface ClientManifestEntry {
   id: string;

package/server/devtools/devtoolsRouter.ts

@@ -2,11 +2,13 @@ import type { BaseEnv } from "akanjs/base";
 import { Logger } from "akanjs/common";
 import { DictionaryRegistry, type RootDictionary } from "akanjs/dictionary";
 import { isLocalDevRuntime } from "../../signal/trace";
+import type { BuildGraphPayload } from "../artifact";
 import type { DiLifecycle } from "../di/diLifecycle";
 import type { HttpRoutes } from "../types";
 import { ConstantSerializer } from "./constantSerializer";
 import { DepsSerializer } from "./depsSerializer";
 import { SignalSerializer } from "./signalSerializer";
+import { StudioRoute } from "./studio/studioRoute";
 import type { DevtoolsApp, DevtoolsEnvelope, DevtoolsIndex, DictionaryData } from "./types";
 
 export interface DevtoolsRouterContext {
@@ -18,6 +20,7 @@ export interface DevtoolsRouterContext {
   websocketPrefix: string;
   openapi: boolean;
   getStatus: () => string;
+  buildGraph?: () => Promise<BuildGraphPayload | null>;
 }
 
 /** Builtin routes, not signals: off `/api` and guards, and never in the `serializedSignal` payload sent to clients. */
@@ -41,7 +44,14 @@ export class DevtoolsRouter {
 
   createRoutes(): HttpRoutes {
     if (!DevtoolsRouter.isEnabled(this.#context.env)) return {};
+    const studio = new StudioRoute({
+      basePath: `${DevtoolsRouter.basePath}/studio`,
+      appName: this.#context.env.appName,
+      buildGraph: this.#context.buildGraph ?? null,
+    });
     return {
+      [`${DevtoolsRouter.basePath}/studio`]: { GET: (req: Request) => this.#gated(() => studio.page(req)) },
+      [`${DevtoolsRouter.basePath}/studio/graph`]: { GET: () => this.#gated(() => studio.graph()) },
       [`${DevtoolsRouter.basePath}/devtools`]: { GET: () => DevtoolsRouter.#json(this.#index()) },
       [`${DevtoolsRouter.basePath}/constant`]: {
         GET: () => this.#respond("constant", () => ConstantSerializer.serialize()),
@@ -100,6 +110,11 @@ export class DevtoolsRouter {
     }
   }
 
+  async #gated(respond: () => Promise<Response>): Promise<Response> {
+    if (!DevtoolsRouter.isEnabled(this.#context.env)) return DevtoolsRouter.#json({ error: "Not found" }, 404);
+    return await respond();
+  }
+
   #envelope<Kind extends string, Data>(kind: Kind, data: Data): DevtoolsEnvelope<Kind, Data> {
     return { kind, version: 1, generatedAt: new Date().toISOString(), app: this.#app(), data };
   }

package/server/devtools/studio/studioDocument.tsx

@@ -0,0 +1,202 @@
+import type { AkanGraphLocation } from "akanjs/common";
+import type { BuildGraphPayload } from "../../artifact";
+import { type StudioBox, StudioLayout, type StudioScene, type StudioView } from "./studioLayout";
+import { studioRuntime } from "./studioRuntime";
+import { studioStyle } from "./studioStyle";
+
+export type StudioEditor = "vscode" | "cursor";
+
+export interface StudioQuery {
+  view: StudioView;
+  module: string | null;
+  editor: StudioEditor;
+}
+
+export interface StudioDocumentProps {
+  basePath: string;
+  appName: string;
+  payload: BuildGraphPayload;
+  query: StudioQuery;
+}
+
+const editorLabels: { [editor in StudioEditor]: string } = { vscode: "VS Code", cursor: "Cursor" };
+const viewLabels: { [view in StudioView]: string } = { erd: "ERD", signals: "Signals" };
+const charWidth = 7.3;
+const kindShownIn: { [view in StudioView]: Set<string> } = {
+  erd: new Set(["model", "scalar", "enum"]),
+  signals: new Set(["endpoint", "slice", "query", "model"]),
+};
+const clip = (text: string, max: number) => (text.length > max ? `${text.slice(0, max - 1)}…` : text);
+
+export class StudioDocument {
+  static render({ basePath, appName, payload, query }: StudioDocumentProps) {
+    const modules = StudioLayout.modulesOf(payload.graph);
+    const scene =
+      query.view === "erd"
+        ? StudioLayout.erd(payload.graph, query.module)
+        : StudioLayout.signals(payload.graph, query.module ?? modules[0] ?? null);
+    const hrefOf = (next: Partial<StudioQuery>) => StudioDocument.href(basePath, { ...query, ...next });
+    const openOf = (at: AkanGraphLocation | null) =>
+      at ? StudioDocument.editorHref(query.editor, payload.workspaceRoot, at) : undefined;
+    return (
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <title>{`Akan Studio · ${appName}`}</title>
+          <style>{studioStyle}</style>
+        </head>
+        <body>
+          <header>
+            <strong>Akan Studio</strong>
+            <span className="muted">{appName}</span>
+            <nav>
+              {(["erd", "signals"] as const).map((view) => (
+                <a key={view} href={hrefOf({ view })} aria-current={view === query.view ? "page" : undefined}>
+                  {viewLabels[view]}
+                </a>
+              ))}
+            </nav>
+            <form method="get" action={basePath}>
+              <input type="hidden" name="view" value={query.view} />
+              <input type="hidden" name="editor" value={query.editor} />
+              <select name="module" defaultValue={query.module ?? ""} data-studio-module="">
+                {query.view === "erd" ? <option value="">All modules</option> : null}
+                {modules.map((module) => (
+                  <option key={module} value={module}>
+                    {module}
+                  </option>
+                ))}
+              </select>
+              <noscript>
+                <button type="submit">Show</button>
+              </noscript>
+            </form>
+            <input type="search" placeholder="Filter by name" data-studio-filter="" />
+            <span className="muted">{`${scene.boxes.length} nodes · ${scene.links.length} edges`}</span>
+            <nav className="end">
+              {(["vscode", "cursor"] as const).map((editor) => (
+                <a key={editor} href={hrefOf({ editor })} aria-current={editor === query.editor ? "true" : undefined}>
+                  {editorLabels[editor]}
+                </a>
+              ))}
+              <a href={`${basePath}/graph`}>JSON</a>
+            </nav>
+          </header>
+          <main>
+            {scene.boxes.length ? (
+              StudioDocument.#svg(scene, query.view, openOf)
+            ) : (
+              <p className="empty">Nothing to draw here. Pick another module or view.</p>
+            )}
+          </main>
+          {StudioDocument.#runtime()}
+        </body>
+      </html>
+    );
+  }
+
+  static unavailable(appName: string, reason: string) {
+    return (
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8" />
+          <title>{`Akan Studio · ${appName}`}</title>
+          <style>{studioStyle}</style>
+        </head>
+        <body>
+          <p className="empty">{reason}</p>
+          {StudioDocument.#runtime()}
+        </body>
+      </html>
+    );
+  }
+
+  static #runtime() {
+    return (
+      
+      <script dangerouslySetInnerHTML={{ __html: `(${studioRuntime.toString()})();` }} />
+    );
+  }
+
+  static href(basePath: string, { view, module, editor }: StudioQuery): string {
+    const search = new URLSearchParams({ view, editor });
+    if (module) search.set("module", module);
+    return `${basePath}?${search.toString()}`;
+  }
+
+  static editorHref(editor: StudioEditor, workspaceRoot: string, at: AkanGraphLocation): string {
+    const root = workspaceRoot.replace(/\\/g, "/").replace(/\/$/, "");
+    const file = `${root.startsWith("/") ? "" : "/"}${root}/${at.file}`;
+    return `${editor}://file${encodeURI(file)}:${at.line}:${at.column}`;
+  }
+
+  static #svg(scene: StudioScene, view: StudioView, openOf: (at: AkanGraphLocation | null) => string | undefined) {
+    return (
+      <svg data-studio="" width={scene.width} height={scene.height} viewBox={`0 0 ${scene.width} ${scene.height}`}>
+        <defs>
+          <marker id="arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto">
+            <path d="M0,0 L8,4 L0,8 z" className="arrow" />
+          </marker>
+        </defs>
+        {scene.columns.map((column) =>
+          column.label ? (
+            <text key={column.x} className="column" x={column.x} y={24}>
+              {column.label}
+            </text>
+          ) : null,
+        )}
+        <g>
+          {scene.links.map(({ edge, path }) => (
+            <path
+              key={`${edge.from}>${edge.to}>${edge.kind}>${edge.label ?? ""}`}
+              d={path}
+              className={`link ${edge.kind}`}
+              data-from={edge.from}
+              data-to={edge.to}
+              markerEnd="url(#arrow)"
+            >
+              <title>{`${edge.kind} ${edge.label ?? ""}${edge.count > 1 ? ` ×${edge.count}` : ""}`}</title>
+            </path>
+          ))}
+        </g>
+        <g>{scene.boxes.map((box) => StudioDocument.#box(box, view, openOf))}</g>
+      </svg>
+    );
+  }
+
+  static #box(
+    { node, x, y, width, height, rows }: StudioBox,
+    view: StudioView,
+    openOf: (at: AkanGraphLocation | null) => string | undefined,
+  ) {
+    const lib = node.owner?.startsWith("libs/") ? node.owner.slice(5) : null;
+    const kind = [lib, kindShownIn[view].has(node.kind) ? node.kind : null].filter(Boolean).join(" · ");
+    const chars = Math.floor((width - 24) / charWidth);
+    return (
+      <g key={node.id} className={`box ${node.kind}`} data-node={node.id} data-label={node.label}>
+        <title>{node.at ? `${node.label}\n${node.at.file}:${node.at.line}` : node.label}</title>
+        <rect x={x} y={y} width={width} height={height} rx={6} />
+        <rect className="bar" x={x} y={y} width={4} height={height} rx={2} />
+        <a href={openOf(node.at)}>
+          <text className="title" x={x + 12} y={y + 18}>
+            {clip(node.label, kind ? chars - kind.length - 1 : chars)}
+          </text>
+        </a>
+        <text className="kind" x={x + width - 10} y={y + 18} textAnchor="end">
+          {kind}
+        </text>
+        {rows.map((row, idx) => (
+          <a key={idx} href={openOf(row.at)}>
+            <text x={x + 12} y={row.y + 4}>
+              {clip(row.text, row.hint ? chars - row.hint.length - 1 : chars)}
+            </text>
+            <text className="hint" x={x + width - 10} y={row.y + 4} textAnchor="end">
+              {row.hint}
+            </text>
+          </a>
+        ))}
+      </g>
+    );
+  }
+}

package/server/devtools/studio/studioLayout.ts

@@ -0,0 +1,224 @@
+import type { AkanGraph, AkanGraphEdge, AkanGraphLocation, AkanGraphNode, AkanGraphNodeKind } from "akanjs/common";
+
+export type StudioView = "erd" | "signals";
+
+export interface StudioRow {
+  text: string;
+  hint: string;
+  y: number;
+  at: AkanGraphLocation | null;
+}
+
+export interface StudioBox {
+  node: AkanGraphNode;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rows: StudioRow[];
+}
+
+export interface StudioLink {
+  edge: AkanGraphEdge;
+  path: string;
+}
+
+export interface StudioColumn {
+  label: string;
+  x: number;
+}
+
+export interface StudioScene {
+  boxes: StudioBox[];
+  links: StudioLink[];
+  columns: StudioColumn[];
+  width: number;
+  height: number;
+}
+
+const columnGap = 112;
+const boxGap = 16;
+const headerHeight = 28;
+const rowHeight = 18;
+const padding = 24;
+const columnTop = 40;
+const maxColumnHeight = 1800;
+const typeKinds = new Set<AkanGraphNodeKind>(["model", "scalar", "enum"]);
+const flowColumns: { label: string; kinds: AkanGraphNodeKind[] }[] = [
+  { label: "Components", kinds: ["component"] },
+  { label: "Store actions", kinds: ["action"] },
+  { label: "Endpoints & slices", kinds: ["endpoint", "slice"] },
+  { label: "Service methods", kinds: ["method"] },
+  { label: "Queries & models", kinds: ["query", "model"] },
+];
+const flowColumnOf = new Map(flowColumns.flatMap(({ kinds }, idx) => kinds.map((kind) => [kind, idx] as const)));
+const flowEdgeKinds = new Set(["calls", "fetches", "uses"]);
+
+export class StudioLayout {
+  static modulesOf(graph: AkanGraph): string[] {
+    const modules = new Set<string>();
+    
+    for (const node of graph.nodes)
+      if (node.module && node.kind !== "component" && flowColumnOf.has(node.kind)) modules.add(node.module);
+    return [...modules].sort();
+  }
+
+  static erd(graph: AkanGraph, module: string | null): StudioScene {
+    const types = graph.nodes.filter((node) => typeKinds.has(node.kind));
+    const fieldEdges = graph.edges.filter((edge) => edge.kind === "field");
+    const { nodes, edges } = StudioLayout.#around(types, fieldEdges, module);
+    const ranks = StudioLayout.#ranks(nodes, edges);
+    const groups = [...new Set(ranks.values())]
+      .sort((a, b) => a - b)
+      .map((rank) => nodes.filter((node) => ranks.get(node.id) === rank));
+    return StudioLayout.#place(groups, edges, { width: 248, labels: null, rowsOf: StudioLayout.#typeRows });
+  }
+
+  static signals(graph: AkanGraph, module: string | null): StudioScene {
+    const flowNodes = graph.nodes.filter((node) => flowColumnOf.has(node.kind));
+    const flowEdges = graph.edges.filter((edge) => flowEdgeKinds.has(edge.kind));
+    const { nodes, edges } = StudioLayout.#around(flowNodes, flowEdges, module);
+    const groups = flowColumns.map((_, idx) => nodes.filter((node) => flowColumnOf.get(node.kind) === idx));
+    return StudioLayout.#place(groups, edges, {
+      width: 264,
+      labels: flowColumns.map(({ label }) => label),
+      rowsOf: StudioLayout.#chipRows,
+    });
+  }
+
+  static #around(nodes: AkanGraphNode[], edges: AkanGraphEdge[], module: string | null) {
+    const byId = new Map(nodes.map((node) => [node.id, node]));
+    const linked = edges.filter((edge) => byId.has(edge.from) && byId.has(edge.to));
+    if (!module) return { nodes, edges: linked };
+    const seeds = new Set(nodes.filter((node) => node.module === module).map((node) => node.id));
+    const kept = linked.filter((edge) => seeds.has(edge.from) || seeds.has(edge.to));
+    const ids = new Set([...seeds, ...kept.flatMap((edge) => [edge.from, edge.to])]);
+    return { nodes: nodes.filter((node) => ids.has(node.id)), edges: kept };
+  }
+
+  static #ranks(nodes: AkanGraphNode[], edges: AkanGraphEdge[]) {
+    const out = new Map<string, string[]>();
+    for (const edge of edges) out.set(edge.from, [...(out.get(edge.from) ?? []), edge.to]);
+    const state = new Map<string, "open" | "done">();
+    const order: string[] = [];
+    const visit = (id: string) => {
+      if (state.has(id)) return;
+      state.set(id, "open");
+      for (const to of out.get(id) ?? []) if (state.get(to) !== "open") visit(to);
+      state.set(id, "done");
+      order.push(id);
+    };
+    for (const node of nodes) visit(node.id);
+    order.reverse();
+    const position = new Map(order.map((id, idx) => [id, idx]));
+    const ranks = new Map(nodes.map((node) => [node.id, 0]));
+    for (const id of order)
+      for (const to of out.get(id) ?? [])
+        if ((position.get(to) ?? 0) > (position.get(id) ?? 0))
+          ranks.set(to, Math.max(ranks.get(to) ?? 0, (ranks.get(id) ?? 0) + 1));
+    return ranks;
+  }
+
+  static #typeRows(node: AkanGraphNode): Omit<StudioRow, "y">[] {
+    if (node.values) return node.values.map((value) => ({ text: value, hint: "", at: null }));
+    return (node.fields ?? []).map((field) => ({
+      text: field.name,
+      hint: `${field.type ?? "?"}${field.array ? "[]" : ""}${field.optional ? "?" : ""}`,
+      at: field.at,
+    }));
+  }
+
+  static #chipRows(node: AkanGraphNode): Omit<StudioRow, "y">[] {
+    return node.detail.length ? [{ text: node.detail.join(" · "), hint: "", at: null }] : [];
+  }
+
+  static #place(
+    groups: AkanGraphNode[][],
+    edges: AkanGraphEdge[],
+    {
+      width,
+      labels,
+      rowsOf,
+    }: { width: number; labels: string[] | null; rowsOf: (node: AkanGraphNode) => Omit<StudioRow, "y">[] },
+  ): StudioScene {
+    const ordered = StudioLayout.#order(groups, edges);
+    const boxes: StudioBox[] = [];
+    const columns: StudioColumn[] = [];
+    let x = padding;
+    let height = 0;
+    ordered.forEach((group, idx) => {
+      if (labels && !group.length) return;
+      columns.push({ label: labels?.[idx] ?? "", x });
+      let y = columnTop;
+      for (const node of group) {
+        const rows = rowsOf(node);
+        const boxHeight = headerHeight + rows.length * rowHeight + (rows.length ? 6 : 0);
+        if (y > columnTop && y + boxHeight > maxColumnHeight) {
+          x += width + boxGap * 2;
+          y = columnTop;
+        }
+        const placed = rows.map((row, rowIdx) => ({
+          ...row,
+          y: y + headerHeight + rowIdx * rowHeight + rowHeight / 2,
+        }));
+        boxes.push({ node, x, y, width, height: boxHeight, rows: placed });
+        y += boxHeight + boxGap;
+        height = Math.max(height, y);
+      }
+      x += width + columnGap;
+    });
+    const boxOf = new Map(boxes.map((box) => [box.node.id, box]));
+    const links = edges.flatMap((edge) => {
+      const from = boxOf.get(edge.from);
+      const to = boxOf.get(edge.to);
+      return from && to ? [{ edge, path: StudioLayout.#path(from, to, edge) }] : [];
+    });
+    return { boxes, links, columns, width: x - columnGap + padding, height: height + padding };
+  }
+
+  static #order(groups: AkanGraphNode[][], edges: AkanGraphEdge[]): AkanGraphNode[][] {
+    const byLabel = (a: AkanGraphNode, b: AkanGraphNode) => (a.label < b.label ? -1 : a.label > b.label ? 1 : 0);
+    const ordered = groups.map((group) => [...group].sort(byLabel));
+    const neighbors = new Map<string, string[]>();
+    for (const { from, to } of edges) {
+      neighbors.set(from, [...(neighbors.get(from) ?? []), to]);
+      neighbors.set(to, [...(neighbors.get(to) ?? []), from]);
+    }
+    const sweep = (indices: number[]) => {
+      const position = new Map(ordered.flatMap((group) => group.map((node, idx) => [node.id, idx] as const)));
+      for (const idx of indices) {
+        const center = (node: AkanGraphNode) => {
+          const around = (neighbors.get(node.id) ?? []).flatMap((id) => {
+            const at = position.get(id);
+            return at === undefined ? [] : [at];
+          });
+          return around.length ? around.reduce((sum, at) => sum + at, 0) / around.length : (position.get(node.id) ?? 0);
+        };
+        const centers = new Map(ordered[idx].map((node) => [node.id, center(node)]));
+        ordered[idx].sort((a, b) => (centers.get(a.id) ?? 0) - (centers.get(b.id) ?? 0));
+        for (const [at, node] of ordered[idx].entries()) position.set(node.id, at);
+      }
+    };
+    const forward = ordered.map((_, idx) => idx).slice(1);
+    sweep(forward);
+    sweep([...forward].reverse().map((idx) => idx - 1));
+    return ordered;
+  }
+
+  static #path(from: StudioBox, to: StudioBox, edge: AkanGraphEdge): string {
+    const row =
+      edge.kind === "field"
+        ? from.rows.find(({ text }) => edge.label === text || edge.label === `${text}[]`)
+        : undefined;
+    const y1 = row?.y ?? from.y + headerHeight / 2;
+    const y2 = to.y + headerHeight / 2;
+    const x1 = from.x + from.width;
+    if (to.x > from.x + from.width) {
+      const bend = Math.max(40, (to.x - x1) / 2);
+      return `M${x1},${y1} C${x1 + bend},${y1} ${to.x - bend},${y2} ${to.x},${y2}`;
+    }
+    const x2 = to.x + to.width;
+    const loop = Math.max(x1, x2) + 48;
+    return `M${x1},${y1} C${loop},${y1} ${loop},${y2} ${x2},${y2}`;
+  }
+}

package/server/devtools/studio/studioRoute.ts

@@ -0,0 +1,73 @@
+import { Logger } from "akanjs/common";
+import type { ReactNode } from "react";
+import type { BuildGraphPayload } from "../../artifact";
+import { createSystemPageHeaders } from "../../systemPages";
+import { StudioDocument, type StudioEditor, type StudioQuery } from "./studioDocument";
+
+export interface StudioRouteContext {
+  basePath: string;
+  appName: string;
+  buildGraph: (() => Promise<BuildGraphPayload | null>) | null;
+}
+
+const editors = new Set<StudioEditor>(["vscode", "cursor"]);
+
+export class StudioRoute {
+  static readonly logger = new Logger("StudioRoute");
+  readonly #context: StudioRouteContext;
+
+  constructor(context: StudioRouteContext) {
+    this.#context = context;
+  }
+
+  static queryOf(url: URL): StudioQuery {
+    const view = url.searchParams.get("view") === "signals" ? "signals" : "erd";
+    const editor = url.searchParams.get("editor");
+    return {
+      view,
+      module: url.searchParams.get("module") || null,
+      editor: editor && editors.has(editor as StudioEditor) ? (editor as StudioEditor) : "vscode",
+    };
+  }
+
+  async page(req: Request): Promise<Response> {
+    const { basePath, appName } = this.#context;
+    const loaded = await this.#load();
+    if ("error" in loaded) return await StudioRoute.#html(StudioDocument.unavailable(appName, loaded.error), 503);
+    const query = StudioRoute.queryOf(new URL(req.url));
+    return await StudioRoute.#html(StudioDocument.render({ basePath, appName, payload: loaded.payload, query }), 200);
+  }
+
+  async graph(): Promise<Response> {
+    const loaded = await this.#load();
+    if ("error" in loaded)
+      return Response.json({ error: loaded.error }, { status: 503, headers: { "Cache-Control": "no-store" } });
+    return Response.json(loaded.payload, { headers: { "Cache-Control": "no-store" } });
+  }
+
+  async #load(): Promise<{ payload: BuildGraphPayload } | { error: string }> {
+    const { buildGraph } = this.#context;
+    try {
+      const payload = buildGraph ? await buildGraph() : null;
+      return payload
+        ? { payload }
+        : { error: "Akan Studio reads the graph from the dev builder; open it under `akan start`." };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      StudioRoute.logger.warn(`Failed to build the Akan Graph: ${message}`);
+      return { error: message };
+    }
+  }
+
+  static #headers(): Headers {
+    const headers = createSystemPageHeaders();
+    headers.delete("X-Frame-Options");
+    headers.set("Content-Security-Policy", "frame-ancestors 'self' vscode-webview: vscode-file:; base-uri 'self'");
+    return headers;
+  }
+
+  static async #html(document: ReactNode, status: number): Promise<Response> {
+    const { renderToReadableStream } = await import("react-dom/server.browser");
+    return new Response(await renderToReadableStream(document), { status, headers: StudioRoute.#headers() });
+  }
+}

package/server/devtools/studio/studioRuntime.ts

@@ -0,0 +1,65 @@
+export const studioRuntime = () => {
+  if (window.parent !== window) {
+    let host: string | null = null;
+    window.addEventListener("message", (event) => {
+      if (event.source !== window.parent || !event.origin.startsWith("vscode-webview:")) return;
+      if ((event.data as { type?: unknown } | null)?.type !== "akan-studio:host") return;
+      host = event.origin;
+      window.parent.postMessage({ type: "akan-studio:ready", href: location.href }, host);
+    });
+    document.addEventListener("click", (event) => {
+      const href = event.target instanceof Element ? event.target.closest("a[href]")?.getAttribute("href") : null;
+      const source = href?.match(/^[a-z-]+:\/\/file(\/.+):(\d+):(\d+)$/);
+      if (!host || !source) return;
+      event.preventDefault();
+      const [, path, line, column] = source;
+      window.parent.postMessage(
+        { type: "akan-studio:open", path: decodeURI(path), line: +line, column: +column },
+        host,
+      );
+    });
+  }
+  const select = document.querySelector<HTMLSelectElement>("select[data-studio-module]");
+  select?.addEventListener("change", () => select.form?.submit());
+  const svg = document.querySelector<SVGSVGElement>("svg[data-studio]");
+  if (!svg) return;
+  const links = [...svg.querySelectorAll<SVGPathElement>("path[data-from]")];
+  const boxes = new Map(
+    [...svg.querySelectorAll<SVGGElement>("g[data-node]")].map((box) => [box.dataset.node ?? "", box] as const),
+  );
+  let pinned: string | null = null;
+  const focus = (id: string | null) => {
+    svg.classList.toggle("focused", id !== null);
+    const near = new Set(id ? [id] : []);
+    for (const link of links) {
+      const isHot = id !== null && (link.dataset.from === id || link.dataset.to === id);
+      link.classList.toggle("hot", isHot);
+      if (isHot) for (const end of [link.dataset.from, link.dataset.to]) if (end) near.add(end);
+    }
+    for (const [key, box] of boxes) box.classList.toggle("hot", near.has(key));
+  };
+  for (const [id, box] of boxes) {
+    box.addEventListener("mouseenter", () => {
+      if (!pinned) focus(id);
+    });
+    box.addEventListener("mouseleave", () => {
+      if (!pinned) focus(null);
+    });
+    box.addEventListener("click", (event) => {
+      if (event.target instanceof Element && event.target.closest("a[href]")) return;
+      pinned = pinned === id ? null : id;
+      focus(pinned ?? id);
+    });
+  }
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape") return;
+    pinned = null;
+    focus(null);
+  });
+  const filter = document.querySelector<HTMLInputElement>("input[data-studio-filter]");
+  filter?.addEventListener("input", () => {
+    const query = filter.value.trim().toLowerCase();
+    for (const box of boxes.values())
+      box.classList.toggle("muted", query !== "" && !(box.dataset.label ?? "").toLowerCase().includes(query));
+  });
+};

package/server/devtools/studio/studioStyle.ts

@@ -0,0 +1,39 @@
+export const studioStyle = `
+:root { color-scheme: light dark; --bg: #f6f6f7; --fg: #1d1d1f; --muted: #6e6e73; --panel: #ffffff; --line: #c9c9ce;
+  --model: #2563eb; --scalar: #0d9488; --enum: #9333ea; --query: #64748b; --slice: #ea580c; --endpoint: #dc2626;
+  --method: #0891b2; --action: #16a34a; --component: #ca8a04; }
+@media (prefers-color-scheme: dark) {
+  :root { --bg: #111113; --fg: #ececf1; --muted: #9a9aa3; --panel: #1c1c1f; --line: #3d3d44; }
+}
+body { margin: 0; font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--fg); }
+header { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
+  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
+header nav { display: flex; gap: 4px; }
+header nav.end { margin-left: auto; }
+header a { color: inherit; text-decoration: none; padding: 4px 8px; border-radius: 6px; }
+header a[aria-current] { background: var(--line); }
+header select, header input { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line);
+  border-radius: 6px; padding: 4px 8px; }
+.muted { color: var(--muted); }
+.empty { padding: 48px; color: var(--muted); }
+main { overflow: auto; }
+svg { display: block; }
+svg text { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; fill: var(--fg); }
+svg a { cursor: pointer; }
+svg a:hover text { text-decoration: underline; }
+.column { fill: var(--muted); font-weight: 600; letter-spacing: 0.04em; }
+.box { cursor: default; }
+.box rect { fill: var(--panel); stroke: var(--line); }
+.box rect.bar { fill: currentColor; stroke: none; }
+.box .title { font-weight: 600; }
+.box .kind, .box .hint { fill: var(--muted); }
+.box.model { color: var(--model); } .box.scalar { color: var(--scalar); } .box.enum { color: var(--enum); }
+.box.query { color: var(--query); } .box.slice { color: var(--slice); } .box.endpoint { color: var(--endpoint); }
+.box.method { color: var(--method); } .box.action { color: var(--action); } .box.component { color: var(--component); }
+.link { fill: none; stroke: var(--line); stroke-width: 1.25; }
+.link.fetches { stroke-dasharray: 5 3; }
+.link.uses { stroke-dasharray: 2 3; }
+.arrow { fill: var(--muted); }
+svg.focused .box:not(.hot), svg.focused .link:not(.hot), .box.muted { opacity: 0.16; }
+.link.hot { stroke: var(--fg); stroke-width: 2; }
+`;

package/server/webRouter.ts

@@ -23,6 +23,7 @@ import type { PagePromptSource } from "../signal/mcp/pagePrompt";
 import { SignalContext } from "../signal/signalContext";
 import {
   type BuilderRpc,
+  type BuildGraphPayload,
   type MergedManifest,
   RouteClientCache,
   type RouteSeedIndex,
@@ -808,6 +809,9 @@ export class WebRouter {
     };
     return { renderEnvRoutes, hmrHub: this.#hub, builderRpc: this.#builderRpc };
   }
+  async buildGraph(): Promise<BuildGraphPayload | null> {
+    return this.#builderRpc ? await this.#builderRpc.buildGraph() : null;
+  }
   refreshHmrState(): void {
     this.#devHmr?.refreshRegistryState();
   }

package/types/common/akanGraph.d.ts

@@ -0,0 +1,41 @@
+export type AkanGraphNodeKind = "model" | "scalar" | "enum" | "query" | "slice" | "endpoint" | "guard" | "method" | "action" | "component";
+export type AkanGraphEdgeKind = "field" | "guard" | "calls" | "fetches" | "uses";
+export interface AkanGraphLocation {
+    file: string;
+    line: number;
+    column: number;
+}
+export interface AkanGraphField {
+    name: string;
+    type: string | null;
+    array: boolean;
+    optional: boolean;
+    ref: string | null;
+    declaredIn: string;
+    at: AkanGraphLocation;
+}
+export interface AkanGraphNode {
+    id: string;
+    kind: AkanGraphNodeKind;
+    name: string;
+    label: string;
+    owner: string | null;
+    module: string | null;
+    detail: string[];
+    at: AkanGraphLocation | null;
+    fields?: AkanGraphField[];
+    values?: string[];
+}
+export interface AkanGraphEdge {
+    from: string;
+    to: string;
+    kind: AkanGraphEdgeKind;
+    label: string | null;
+    count: number;
+    at: AkanGraphLocation | null;
+}
+export interface AkanGraph {
+    version: 1;
+    nodes: AkanGraphNode[];
+    edges: AkanGraphEdge[];
+}

package/types/common/index.d.ts

@@ -1,3 +1,4 @@
+export type { AkanGraph, AkanGraphEdge, AkanGraphEdgeKind, AkanGraphField, AkanGraphLocation, AkanGraphNode, AkanGraphNodeKind, } from "./akanGraph.d.ts";
 export { databaseStateNames, endpointNames, formSetterNames, modelNames, moduleNames, queryNames, sliceNames, stateSetterName, } from "./akanNames.d.ts";
 export { AppHosts } from "./appHosts.d.ts";
 export { applyMixins, getAllPropertyDescriptors } from "./applyMixins.d.ts";

package/types/constant/constantRegistry.d.ts

@@ -8,7 +8,7 @@ export declare class ConstantRegistry {
     static enum: Map<string, EnumInstance>;
     static value: Map<string, unknown>;
     static modelRefNameMap: Map<new (...args: never[]) => unknown, string>;
-    static origin: Map<`database:${string}` | `scalar:${string}` | `enum:${string}`, string[]>;
+    static origin: Map<`scalar:${string}` | `enum:${string}` | `database:${string}`, string[]>;
     static getOrigin(kind: ConstantOriginKind, key: string): string[];
     static assertConsistentRefNames(skippedOrigins?: readonly string[]): void;
     static has(modelRef: Cls): boolean;

package/types/server/artifact/builderRpc.d.ts

@@ -1,4 +1,4 @@
-import type { BuildRouteClientResult, CsrUpdatedPayload, CssPayload, DevBuildStatus, PagesBundlePayload, SsrUpdatedPayload } from "./ipcTypes.d.ts";
+import type { BuildGraphPayload, BuildRouteClientResult, CsrUpdatedPayload, CssPayload, DevBuildStatus, PagesBundlePayload, SsrUpdatedPayload } from "./ipcTypes.d.ts";
 export interface BuilderRpcEventHandlers {
     /** A watcher batch changed files: clear the route cache and broadcast a dev reload. */
     onInvalidate?: (event: {
@@ -30,5 +30,6 @@ export declare class BuilderRpc {
     buildCsr(reason: string, { shell }?: {
         shell?: boolean;
     }): Promise<void>;
+    buildGraph(): Promise<BuildGraphPayload>;
     dispose(): void;
 }

package/types/server/artifact/ipcTypes.d.ts

@@ -1,3 +1,4 @@
+import type { AkanGraph } from "akanjs/common";
 import type { SsrManifest } from "../ssrTypes.d.ts";
 export interface BuildRouteResultPayload {
     manifestDelta: Record<string, {
@@ -93,6 +94,25 @@ export type BuilderCsrRes = {
     ok: false;
     error: string;
 };
+export interface BuildGraphPayload {
+    workspaceRoot: string;
+    graph: AkanGraph;
+}
+export type BuilderGraphReq = {
+    type: "build-graph";
+    id: number;
+};
+export type BuilderGraphRes = {
+    type: "build-graph-res";
+    id: number;
+    ok: true;
+    data: BuildGraphPayload;
+} | {
+    type: "build-graph-res";
+    id: number;
+    ok: false;
+    error: string;
+};
 /** Drain and exit (the only way bundler memory returns to the OS); draining, not killing, keeps a rebuild whole. */
 export type BuilderControl = {
     type: "builder-shutdown";
@@ -189,7 +209,9 @@ export type BuilderEvent = {
  | {
     type: "boot-armed";
 };
-export type BuilderMessage = BuilderReq | BuilderRes | BuilderCsrReq | BuilderCsrRes | BuilderControl | BuilderEvent;
+export type BuilderRequest = BuilderReq | BuilderCsrReq | BuilderGraphReq;
+export type BuilderResponse = BuilderRes | BuilderCsrRes | BuilderGraphRes;
+export type BuilderMessage = BuilderRequest | BuilderResponse | BuilderControl | BuilderEvent;
 export interface ClientManifestEntry {
     id: string;
     chunks: string[];

package/types/server/devtools/devtoolsRouter.d.ts

@@ -1,5 +1,6 @@
 import type { BaseEnv } from "akanjs/base";
 import { Logger } from "akanjs/common";
+import type { BuildGraphPayload } from "../artifact.d.ts";
 import type { DiLifecycle } from "../di/diLifecycle.d.ts";
 import type { HttpRoutes } from "../types.d.ts";
 export interface DevtoolsRouterContext {
@@ -11,6 +12,7 @@ export interface DevtoolsRouterContext {
     websocketPrefix: string;
     openapi: boolean;
     getStatus: () => string;
+    buildGraph?: () => Promise<BuildGraphPayload | null>;
 }
 /** Builtin routes, not signals: off `/api` and guards, and never in the `serializedSignal` payload sent to clients. */
 export declare class DevtoolsRouter {

package/types/server/devtools/studio/studioDocument.d.ts

@@ -0,0 +1,22 @@
+import type { AkanGraphLocation } from "akanjs/common";
+import type { BuildGraphPayload } from "../../artifact.d.ts";
+import { type StudioView } from "./studioLayout.d.ts";
+export type StudioEditor = "vscode" | "cursor";
+export interface StudioQuery {
+    view: StudioView;
+    module: string | null;
+    editor: StudioEditor;
+}
+export interface StudioDocumentProps {
+    basePath: string;
+    appName: string;
+    payload: BuildGraphPayload;
+    query: StudioQuery;
+}
+export declare class StudioDocument {
+    #private;
+    static render({ basePath, appName, payload, query }: StudioDocumentProps): import("react").JSX.Element;
+    static unavailable(appName: string, reason: string): import("react").JSX.Element;
+    static href(basePath: string, { view, module, editor }: StudioQuery): string;
+    static editorHref(editor: StudioEditor, workspaceRoot: string, at: AkanGraphLocation): string;
+}

package/types/server/devtools/studio/studioLayout.d.ts

@@ -0,0 +1,37 @@
+import type { AkanGraph, AkanGraphEdge, AkanGraphLocation, AkanGraphNode } from "akanjs/common";
+export type StudioView = "erd" | "signals";
+export interface StudioRow {
+    text: string;
+    hint: string;
+    y: number;
+    at: AkanGraphLocation | null;
+}
+export interface StudioBox {
+    node: AkanGraphNode;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rows: StudioRow[];
+}
+export interface StudioLink {
+    edge: AkanGraphEdge;
+    path: string;
+}
+export interface StudioColumn {
+    label: string;
+    x: number;
+}
+export interface StudioScene {
+    boxes: StudioBox[];
+    links: StudioLink[];
+    columns: StudioColumn[];
+    width: number;
+    height: number;
+}
+export declare class StudioLayout {
+    #private;
+    static modulesOf(graph: AkanGraph): string[];
+    static erd(graph: AkanGraph, module: string | null): StudioScene;
+    static signals(graph: AkanGraph, module: string | null): StudioScene;
+}

package/types/server/devtools/studio/studioRoute.d.ts

@@ -0,0 +1,16 @@
+import { Logger } from "akanjs/common";
+import type { BuildGraphPayload } from "../../artifact.d.ts";
+import { type StudioQuery } from "./studioDocument.d.ts";
+export interface StudioRouteContext {
+    basePath: string;
+    appName: string;
+    buildGraph: (() => Promise<BuildGraphPayload | null>) | null;
+}
+export declare class StudioRoute {
+    #private;
+    static readonly logger: Logger;
+    constructor(context: StudioRouteContext);
+    static queryOf(url: URL): StudioQuery;
+    page(req: Request): Promise<Response>;
+    graph(): Promise<Response>;
+}

package/types/server/devtools/studio/studioRuntime.d.ts

@@ -0,0 +1 @@
+export declare const studioRuntime: () => void;

package/types/server/devtools/studio/studioStyle.d.ts

@@ -0,0 +1 @@
+export declare const studioStyle = "\n:root { color-scheme: light dark; --bg: #f6f6f7; --fg: #1d1d1f; --muted: #6e6e73; --panel: #ffffff; --line: #c9c9ce;\n  --model: #2563eb; --scalar: #0d9488; --enum: #9333ea; --query: #64748b; --slice: #ea580c; --endpoint: #dc2626;\n  --method: #0891b2; --action: #16a34a; --component: #ca8a04; }\n@media (prefers-color-scheme: dark) {\n  :root { --bg: #111113; --fg: #ececf1; --muted: #9a9aa3; --panel: #1c1c1f; --line: #3d3d44; }\n}\nbody { margin: 0; font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--fg); }\nheader { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;\n  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }\nheader nav { display: flex; gap: 4px; }\nheader nav.end { margin-left: auto; }\nheader a { color: inherit; text-decoration: none; padding: 4px 8px; border-radius: 6px; }\nheader a[aria-current] { background: var(--line); }\nheader select, header input { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line);\n  border-radius: 6px; padding: 4px 8px; }\n.muted { color: var(--muted); }\n.empty { padding: 48px; color: var(--muted); }\nmain { overflow: auto; }\nsvg { display: block; }\nsvg text { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; fill: var(--fg); }\nsvg a { cursor: pointer; }\nsvg a:hover text { text-decoration: underline; }\n.column { fill: var(--muted); font-weight: 600; letter-spacing: 0.04em; }\n.box { cursor: default; }\n.box rect { fill: var(--panel); stroke: var(--line); }\n.box rect.bar { fill: currentColor; stroke: none; }\n.box .title { font-weight: 600; }\n.box .kind, .box .hint { fill: var(--muted); }\n.box.model { color: var(--model); } .box.scalar { color: var(--scalar); } .box.enum { color: var(--enum); }\n.box.query { color: var(--query); } .box.slice { color: var(--slice); } .box.endpoint { color: var(--endpoint); }\n.box.method { color: var(--method); } .box.action { color: var(--action); } .box.component { color: var(--component); }\n.link { fill: none; stroke: var(--line); stroke-width: 1.25; }\n.link.fetches { stroke-dasharray: 5 3; }\n.link.uses { stroke-dasharray: 2 3; }\n.arrow { fill: var(--muted); }\nsvg.focused .box:not(.hot), svg.focused .link:not(.hot), .box.muted { opacity: 0.16; }\n.link.hot { stroke: var(--fg); stroke-width: 2; }\n";

package/types/server/migration/migrationCommand.d.ts

@@ -27,7 +27,7 @@ export declare class MigrationCommand {
     static parse(argv: string[], invokedAs?: string): MigrationArgs;
     static run(runner: MigrationRunner, args: MigrationArgs): Promise<MigrationCommandResult>;
     static failure(action: MigrationAction | null, error: unknown): MigrationCommandResult;
-    static exitCode(result: MigrationCommandResult): 0 | 1 | 2 | 3;
-    static print(result: MigrationCommandResult, json: boolean): Promise<0 | 1 | 2 | 3>;
+    static exitCode(result: MigrationCommandResult): 1 | 0 | 2 | 3;
+    static print(result: MigrationCommandResult, json: boolean): Promise<1 | 0 | 2 | 3>;
     static render(result: MigrationCommandResult, json: boolean): string;
 }

package/types/server/migration/migrations.d.ts

@@ -8,5 +8,5 @@ export declare class Migrations {
     /** On a started server: the runner writes through its database adaptor. */
     runner(server: AkanServer): MigrationRunner;
     /** Boots `server` with no listener or schedule, runs one action, and prints its result last. Returns the exit code. */
-    command(server: AkanServer, argv: string[], invokedAs?: string): Promise<0 | 1 | 2 | 3>;
+    command(server: AkanServer, argv: string[], invokedAs?: string): Promise<1 | 0 | 2 | 3>;
 }

package/types/server/webRouter.d.ts

@@ -3,7 +3,7 @@ import { type AkanI18nConfig, type LogRecord } from "akanjs/common";
 import { type AkanRequestStore } from "akanjs/fetch";
 import type { AkanMetricsReport } from "akanjs/service";
 import type { PagePromptSource } from "../signal/mcp/pagePrompt.d.ts";
-import { type BuilderRpc, type RouteSeedIndex, type RoutesManifest } from "./artifact.d.ts";
+import { type BuilderRpc, type BuildGraphPayload, type RouteSeedIndex, type RoutesManifest } from "./artifact.d.ts";
 import { type RouteCacheInvalidation, type RouteCacheRenderState } from "./cachePolicy.d.ts";
 import type { HmrWsData, HmrWsHub } from "./hmr/wsHub.d.ts";
 import type { McpAppShellSource } from "./mcp/McpApps.d.ts";
@@ -66,6 +66,7 @@ export declare class WebRouter {
         hmrHub: HmrWsHub | null;
         builderRpc: BuilderRpc | null;
     }>;
+    buildGraph(): Promise<BuildGraphPayload | null>;
     refreshHmrState(): void;
     hmrBuildErrors(): {
         phase: string;

package/types/ui/recipe/inputRecipe.d.ts

@@ -1,13 +1,13 @@
 /** 입력 표면 look — Input/TextArea/DatePicker 가 공유하는 필드 셸. kind 로 한 줄 필드(field)/멀티라인(area)/네이티브 `<select>`(select), tone 으로 강조/오류 상태를 고른다. */
 export declare const inputRecipe: (variants?: Omit<({
-    kind?: "select" | "field" | "area" | undefined;
+    kind?: "field" | "select" | "area" | undefined;
     size?: "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     tone?: "default" | "error" | "primary" | undefined;
 } & {
     class?: import("tailwind-variants/lite").ClassValue;
     className?: never;
 }) | ({
-    kind?: "select" | "field" | "area" | undefined;
+    kind?: "field" | "select" | "area" | undefined;
     size?: "xl" | "lg" | "md" | "sm" | "xs" | undefined;
     tone?: "default" | "error" | "primary" | undefined;
 } & {