theokit 0.1.0-alpha.8 → 0.2.1

package/dist/devtools/entry.js

@@ -1,3 +1,14 @@
+import {
+  CHANNEL_CSRF_WARN,
+  CHANNEL_ERROR,
+  CHANNEL_MANIFEST,
+  CHANNEL_REQUEST,
+  CHANNEL_ROUTE_MATCHED,
+  RING_BUFFER_CAP,
+  STORAGE_VERSION,
+  dispatcher,
+  initialState
+} from "../chunk-KJVEJILQ.js";
 import "../chunk-DGUM43GV.js";
 
 // src/devtools/entry.tsx
@@ -433,9 +444,448 @@ function Indicator() {
   );
 }
 
-// src/devtools/components/Tabs/CsrfReadinessTab.tsx
-import { useEffect as useEffect2, useState, useCallback as useCallback2 } from "react";
+// src/devtools/components/Tabs/ActionsTab.tsx
+import { useState } from "react";
+
+// src/devtools/actions-row-state.ts
+function toggleExpandedIds(prev, id) {
+  const next = new Set(prev);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    next.add(id);
+  }
+  return next;
+}
+
+// src/devtools/pii-mask.ts
+var SENSITIVE_KEY_PATTERN = /(password|token|secret|api_?key|apikey|credit_?card|ssn|cpf|cnpj)/i;
+function isSensitiveKey(key) {
+  return SENSITIVE_KEY_PATTERN.test(key);
+}
+function maskPiiFields(value) {
+  if (value === null || value === void 0) return value;
+  if (typeof value !== "object") return value;
+  if (Array.isArray(value)) {
+    return value.map((item) => maskPiiFields(item));
+  }
+  const out = {};
+  for (const [key, val] of Object.entries(value)) {
+    if (isSensitiveKey(key)) {
+      out[key] = "***";
+    } else {
+      out[key] = maskPiiFields(val);
+    }
+  }
+  return out;
+}
+
+// src/devtools/components/Tabs/ActionsTab.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function formatTime(ts) {
+  const d = new Date(ts);
+  return d.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+function formatPayload(value, reveal) {
+  const display = reveal ? value : maskPiiFields(value);
+  try {
+    return JSON.stringify(display, null, 2);
+  } catch {
+    return "<unserializable>";
+  }
+}
+function buildActionsStyles(styles) {
+  return {
+    header: styles.css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
+      color: ${tokens.colors.textMuted};
+      font-size: ${tokens.font.sizeXs};
+      border-bottom: 1px solid ${tokens.colors.borderSubtle};
+    `,
+    clearBtn: styles.css`
+      appearance: none;
+      background: transparent;
+      color: ${tokens.colors.textMuted};
+      border: 1px solid ${tokens.colors.borderSubtle};
+      padding: 2px 6px;
+      border-radius: ${tokens.radius.sm};
+      cursor: pointer;
+      font-size: ${tokens.font.sizeXs};
+      &:hover { color: ${tokens.colors.text}; }
+    `,
+    rowContainer: styles.css`
+      border-bottom: 1px solid ${tokens.colors.borderSubtle};
+      font-size: ${tokens.font.sizeXs};
+    `,
+    rowSummary: styles.css`
+      display: grid;
+      grid-template-columns: 24px 80px 1fr 80px 80px;
+      gap: ${tokens.spacing.sm};
+      align-items: center;
+      width: 100%;
+      padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
+      background: transparent;
+      border: none;
+      color: ${tokens.colors.text};
+      text-align: left;
+      cursor: pointer;
+      font-family: ${tokens.font.family};
+      font-size: ${tokens.font.sizeXs};
+      &:hover { background: ${tokens.colors.bgPanelHover}; }
+      &[aria-expanded='true'] { background: ${tokens.colors.bgPanelHover}; }
+      .chev { color: ${tokens.colors.textMuted}; font-family: ${tokens.font.mono}; }
+      .name { font-family: ${tokens.font.mono}; }
+      .time { color: ${tokens.colors.textMuted}; font-family: ${tokens.font.mono}; }
+      .status-success { color: ${tokens.colors.accent}; }
+      .status-error { color: #c92a2a; }
+      .duration { color: ${tokens.colors.textMuted}; text-align: right; }
+    `,
+    detail: styles.css`
+      padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+      background: ${tokens.colors.bgPanelHover};
+      border-top: 1px dashed ${tokens.colors.borderSubtle};
+      font-size: ${tokens.font.sizeXs};
+      pre {
+        margin: 0;
+        padding: ${tokens.spacing.xs};
+        background: ${tokens.colors.borderSubtle};
+        border-radius: ${tokens.radius.sm};
+        overflow: auto;
+        max-height: 200px;
+        font-family: ${tokens.font.mono};
+      }
+      .reveal-btn {
+        appearance: none;
+        background: transparent;
+        color: ${tokens.colors.textMuted};
+        border: 1px solid ${tokens.colors.borderSubtle};
+        padding: 2px 8px;
+        margin-bottom: ${tokens.spacing.xs};
+        border-radius: ${tokens.radius.sm};
+        cursor: pointer;
+        font-size: ${tokens.font.sizeXs};
+      }
+      .reveal-btn:hover { color: ${tokens.colors.text}; }
+      .section { margin-top: ${tokens.spacing.sm}; }
+      .field-errors { margin-top: ${tokens.spacing.xs}; color: #c92a2a; }
+      .field-errors li { margin-left: ${tokens.spacing.md}; }
+    `
+  };
+}
+function ActionsEmptyState() {
+  return /* @__PURE__ */ jsxs("div", { style: { color: tokens.colors.textMuted, padding: tokens.spacing.md }, children: [
+    "No action calls yet. Trigger a server action (via ",
+    /* @__PURE__ */ jsx3("code", { children: "useAction" }),
+    " or direct",
+    " ",
+    /* @__PURE__ */ jsx3("code", { children: "POST /_actions/<name>" }),
+    ") to see it here. Production builds tree-shake this telemetry path."
+  ] });
+}
+function ActionsTab() {
+  const { state, dispatch, styles } = useDevtoolsContext();
+  const [revealedIds, setRevealedIds] = useState(() => /* @__PURE__ */ new Set());
+  const [expandedIds, setExpandedIds] = useState(() => /* @__PURE__ */ new Set());
+  if (state.actionCalls.length === 0) return /* @__PURE__ */ jsx3(ActionsEmptyState, {});
+  const cls = buildActionsStyles(styles);
+  const toggleReveal = (id) => {
+    setRevealedIds((prev) => toggleExpandedIds(prev, id));
+  };
+  const toggleExpand = (id) => {
+    setExpandedIds((prev) => toggleExpandedIds(prev, id));
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-testid": "devtools-actions-tab", children: [
+    /* @__PURE__ */ jsx3(
+      ActionsHeader,
+      {
+        className: cls.header,
+        clearBtnClass: cls.clearBtn,
+        count: state.actionCalls.length,
+        onClear: () => {
+          dispatch({ type: "RESET_ACTION_CALLS" });
+          setRevealedIds(/* @__PURE__ */ new Set());
+          setExpandedIds(/* @__PURE__ */ new Set());
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx3("div", { children: state.actionCalls.map((r) => /* @__PURE__ */ jsx3(
+      ActionRow,
+      {
+        record: r,
+        containerClass: cls.rowContainer,
+        summaryClass: cls.rowSummary,
+        detailClass: cls.detail,
+        expanded: expandedIds.has(r.id),
+        revealed: revealedIds.has(r.id),
+        onToggleExpand: () => {
+          toggleExpand(r.id);
+        },
+        onToggleReveal: () => {
+          toggleReveal(r.id);
+        }
+      },
+      r.id
+    )) })
+  ] });
+}
+function ActionsHeader({
+  className,
+  clearBtnClass,
+  count,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      count,
+      " call",
+      count === 1 ? "" : "s"
+    ] }),
+    /* @__PURE__ */ jsx3("button", { type: "button", className: clearBtnClass, onClick: onClear, children: "Clear" })
+  ] });
+}
+function ActionRow({
+  record,
+  containerClass,
+  summaryClass,
+  detailClass,
+  expanded,
+  revealed,
+  onToggleExpand,
+  onToggleReveal
+}) {
+  const statusClass = record.status === "success" ? "status-success" : "status-error";
+  return /* @__PURE__ */ jsxs("div", { className: containerClass, "data-testid": "devtools-action-row", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: summaryClass,
+        onClick: onToggleExpand,
+        "aria-expanded": expanded,
+        title: `${record.name} \u2014 click to ${expanded ? "collapse" : "expand"} details`,
+        children: [
+          /* @__PURE__ */ jsx3("span", { className: "chev", children: expanded ? "\u25BC" : "\u25B6" }),
+          /* @__PURE__ */ jsx3("span", { className: "time", children: formatTime(record.timestamp) }),
+          /* @__PURE__ */ jsx3("span", { className: "name", children: record.name }),
+          /* @__PURE__ */ jsx3("span", { className: statusClass, children: record.status }),
+          /* @__PURE__ */ jsxs("span", { className: "duration", children: [
+            record.durationMs,
+            "ms"
+          ] })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs("div", { className: detailClass, children: [
+      /* @__PURE__ */ jsx3("button", { type: "button", className: "reveal-btn", onClick: onToggleReveal, children: revealed ? "Hide values" : "Reveal values" }),
+      /* @__PURE__ */ jsxs("div", { className: "section", children: [
+        /* @__PURE__ */ jsx3("strong", { children: "Input" }),
+        /* @__PURE__ */ jsx3("pre", { children: formatPayload(record.input, revealed) })
+      ] }),
+      record.status === "success" && record.output !== void 0 && /* @__PURE__ */ jsxs("div", { className: "section", children: [
+        /* @__PURE__ */ jsx3("strong", { children: "Output" }),
+        /* @__PURE__ */ jsx3("pre", { children: formatPayload(record.output, revealed) })
+      ] }),
+      record.status === "error" && record.error && /* @__PURE__ */ jsx3(ActionDetailError, { error: record.error })
+    ] })
+  ] });
+}
+function ActionDetailError({ error }) {
+  return /* @__PURE__ */ jsxs("div", { className: "section", children: [
+    /* @__PURE__ */ jsxs("strong", { children: [
+      "Error: ",
+      error.code
+    ] }),
+    /* @__PURE__ */ jsx3("p", { children: error.message }),
+    error.fields && Object.keys(error.fields).length > 0 && /* @__PURE__ */ jsx3("ul", { className: "field-errors", children: Object.entries(error.fields).map(([field, msgs]) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsxs("strong", { children: [
+        field || "(root)",
+        ":"
+      ] }),
+      " ",
+      msgs.join("; ")
+    ] }, field)) })
+  ] });
+}
+
+// src/devtools/components/Tabs/AgentsTab.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function formatTime2(ts) {
+  const d = new Date(ts);
+  return d.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+function formatCost(usd) {
+  if (usd === 0) return "$0.0000";
+  if (usd < 1e-4) return `<$0.0001`;
+  return `$${usd.toFixed(4)}`;
+}
+function AgentsTab() {
+  const { state, dispatch, styles } = useDevtoolsContext();
+  if (state.agentRuns.length === 0) {
+    return /* @__PURE__ */ jsxs2("div", { style: { color: tokens.colors.textMuted, padding: tokens.spacing.md }, children: [
+      "No agent runs yet. Trigger a request to an endpoint using ",
+      /* @__PURE__ */ jsx4("code", { children: "trackAgentRun" }),
+      " to see it here. (Wired in the saas template; opt-in elsewhere.)"
+    ] });
+  }
+  const totalCost = state.agentRuns.reduce((sum, r) => sum + r.costUsd, 0);
+  const totalIn = state.agentRuns.reduce((sum, r) => sum + r.tokensInput, 0);
+  const totalOut = state.agentRuns.reduce((sum, r) => sum + r.tokensOutput, 0);
+  const headerClass = styles.css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
+    color: ${tokens.colors.textMuted};
+    font-size: ${tokens.font.sizeXs};
+    border-bottom: 1px solid ${tokens.colors.borderSubtle};
+  `;
+  const clearBtn = styles.css`
+    appearance: none;
+    background: transparent;
+    color: ${tokens.colors.textMuted};
+    border: 1px solid ${tokens.colors.borderSubtle};
+    padding: 2px 6px;
+    border-radius: ${tokens.radius.sm};
+    cursor: pointer;
+    font-size: ${tokens.font.sizeXs};
+    &:hover { color: ${tokens.colors.text}; }
+  `;
+  const tableClass = styles.css`
+    width: 100%;
+    border-collapse: collapse;
+    font-size: ${tokens.font.sizeXs};
+    th, td {
+      text-align: left;
+      padding: 4px 8px;
+      border-bottom: 1px solid ${tokens.colors.borderSubtle};
+    }
+    th {
+      color: ${tokens.colors.textMuted};
+      font-weight: 500;
+      font-size: ${tokens.font.sizeXs};
+    }
+    tr.status-error td { color: #c92a2a; }
+    tr.status-aborted td { color: ${tokens.colors.textMuted}; }
+  `;
+  return /* @__PURE__ */ jsxs2("div", { "data-testid": "devtools-agents-tab", children: [
+    /* @__PURE__ */ jsxs2("div", { className: headerClass, children: [
+      /* @__PURE__ */ jsxs2("span", { children: [
+        state.agentRuns.length,
+        " run",
+        state.agentRuns.length === 1 ? "" : "s",
+        " \xB7 ",
+        "tokens ",
+        totalIn,
+        "/",
+        totalOut,
+        " \xB7 ",
+        formatCost(totalCost),
+        " total"
+      ] }),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: clearBtn,
+          onClick: () => {
+            dispatch({ type: "RESET_AGENT_RUNS" });
+          },
+          children: "clear"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("table", { className: tableClass, children: [
+      /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+        /* @__PURE__ */ jsx4("th", { children: "Time" }),
+        /* @__PURE__ */ jsx4("th", { children: "User" }),
+        /* @__PURE__ */ jsx4("th", { children: "Model" }),
+        /* @__PURE__ */ jsx4("th", { children: "Tokens (in/out)" }),
+        /* @__PURE__ */ jsx4("th", { children: "Cost" }),
+        /* @__PURE__ */ jsx4("th", { children: "Status" })
+      ] }) }),
+      /* @__PURE__ */ jsx4("tbody", { children: state.agentRuns.map((run) => /* @__PURE__ */ jsxs2("tr", { className: `status-${run.status}`, children: [
+        /* @__PURE__ */ jsx4("td", { children: formatTime2(run.timestamp) }),
+        /* @__PURE__ */ jsx4("td", { children: run.userId }),
+        /* @__PURE__ */ jsx4("td", { children: run.model }),
+        /* @__PURE__ */ jsxs2("td", { children: [
+          run.tokensInput,
+          "/",
+          run.tokensOutput
+        ] }),
+        /* @__PURE__ */ jsx4("td", { children: formatCost(run.costUsd) }),
+        /* @__PURE__ */ jsx4("td", { children: run.status })
+      ] }, run.id)) })
+    ] })
+  ] });
+}
+
+// src/devtools/components/Tabs/CsrfReadinessTab.tsx
+import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2 } from "react";
+
+// src/devtools/csrf-readiness-classify.ts
+var NETWORK_ERROR_PATTERN = /failed to fetch|networkerror|network request failed/i;
+function classifyCsrfReadinessError(input) {
+  if (input.kind === "http") {
+    return classifyHttpStatus(input.status);
+  }
+  return classifyThrown(input.error);
+}
+function classifyHttpStatus(status) {
+  if (status === 404) {
+    return {
+      kind: "store-not-wired",
+      summary: `Endpoint returned 404 \u2014 /__theo/csrf-readiness not registered.`,
+      hint: "Wire `csrfReadinessStore` in the api-middleware options to enable this tab."
+    };
+  }
+  if (status === 401 || status === 403) {
+    return {
+      kind: "unauthorized",
+      summary: `Endpoint returned ${String(status)} \u2014 the readiness route is auth-gated.`,
+      hint: "Authenticate (e.g. via session) before opening this tab, or move the route outside of requireAuth."
+    };
+  }
+  if (status >= 500 && status < 600) {
+    return {
+      kind: "server-crash",
+      summary: `Endpoint returned ${String(status)} \u2014 the readiness handler threw.`,
+      hint: "Check dev server logs (terminal running `theokit dev`) for the underlying stack trace."
+    };
+  }
+  return {
+    kind: "unexpected-status",
+    summary: `Endpoint returned unexpected status ${String(status)}.`,
+    hint: "This is not a status the readiness route normally emits. Inspect the response body in Network tab."
+  };
+}
+function classifyThrown(error) {
+  if (error instanceof Error && error.name === "AbortError") {
+    return {
+      kind: "aborted",
+      summary: "Request aborted.",
+      hint: ""
+    };
+  }
+  const message = error instanceof Error ? error.message : String(error);
+  if (error instanceof TypeError && NETWORK_ERROR_PATTERN.test(message)) {
+    return {
+      kind: "server-unreachable",
+      summary: "Dev server unreachable \u2014 request failed before any HTTP response.",
+      hint: "Restart the dev server (`theokit dev`) and verify the port matches the browser URL."
+    };
+  }
+  return {
+    kind: "unknown-error",
+    summary: message.length > 0 ? message : "Unknown error",
+    hint: "Open the browser DevTools Network panel to inspect the failed request."
+  };
+}
+
+// src/devtools/components/Tabs/CsrfReadinessTab.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function buildTabStyles(styles) {
   return {
     container: styles.css`
@@ -477,13 +927,13 @@ function ReadinessRow({
   rowClass,
   route
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: rowClass, children: [
-    /* @__PURE__ */ jsx3("span", { style: { color: tokens.colors.accent }, children: route.method }),
-    /* @__PURE__ */ jsxs("span", { children: [
+  return /* @__PURE__ */ jsxs3("div", { className: rowClass, children: [
+    /* @__PURE__ */ jsx5("span", { style: { color: tokens.colors.accent }, children: route.method }),
+    /* @__PURE__ */ jsxs3("span", { children: [
       route.path,
-      /* @__PURE__ */ jsx3("span", { style: { color: tokens.colors.textMuted, marginLeft: tokens.spacing.sm }, children: route.reason })
+      /* @__PURE__ */ jsx5("span", { style: { color: tokens.colors.textMuted, marginLeft: tokens.spacing.sm }, children: route.reason })
     ] }),
-    /* @__PURE__ */ jsxs("span", { style: { color: tokens.colors.textMuted }, children: [
+    /* @__PURE__ */ jsxs3("span", { style: { color: tokens.colors.textMuted }, children: [
       "\xD7",
       String(route.count)
     ] })
@@ -492,21 +942,23 @@ function ReadinessRow({
 function CsrfReadinessTab() {
   const { styles } = useDevtoolsContext();
   const cls = buildTabStyles(styles);
-  const [data, setData] = useState(null);
-  const [error, setError] = useState(null);
-  const [busy, setBusy] = useState(false);
+  const [data, setData] = useState2(null);
+  const [error, setError] = useState2(null);
+  const [busy, setBusy] = useState2(false);
   const fetchData = useCallback2(async () => {
     try {
       const res = await fetch("/__theo/csrf-readiness");
       if (!res.ok) {
-        setError(`Endpoint returned ${String(res.status)} \u2014 is csrfReadinessStore wired?`);
+        setError(classifyCsrfReadinessError({ kind: "http", status: res.status }));
         return;
       }
       const json = await res.json();
       setData(json);
       setError(null);
     } catch (e) {
-      setError(e instanceof Error ? e.message : "fetch failed");
+      const classified = classifyCsrfReadinessError({ kind: "thrown", error: e });
+      if (classified.kind === "aborted") return;
+      setError(classified);
     }
   }, []);
   useEffect2(() => {
@@ -529,24 +981,28 @@ function CsrfReadinessTab() {
     }
   }, [fetchData]);
   if (error) {
-    return /* @__PURE__ */ jsxs("div", { className: cls.container, "data-testid": "devtools-csrf-readiness-error", children: [
-      /* @__PURE__ */ jsx3("div", { style: { color: tokens.colors.error.csrf }, children: error }),
-      /* @__PURE__ */ jsxs("p", { style: { color: tokens.colors.textMuted, marginTop: tokens.spacing.sm }, children: [
-        "Wire ",
-        /* @__PURE__ */ jsx3("code", { children: "csrfReadinessStore" }),
-        " in the api-middleware options to enable this tab."
-      ] })
-    ] });
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: cls.container,
+        "data-testid": "devtools-csrf-readiness-error",
+        "data-error-kind": error.kind,
+        children: [
+          /* @__PURE__ */ jsx5("div", { style: { color: tokens.colors.error.csrf }, children: error.summary }),
+          error.hint.length > 0 && /* @__PURE__ */ jsx5("p", { style: { color: tokens.colors.textMuted, marginTop: tokens.spacing.sm }, children: error.hint })
+        ]
+      }
+    );
   }
   if (data === null) {
-    return /* @__PURE__ */ jsx3("div", { className: cls.container, "data-testid": "devtools-csrf-readiness-loading", children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx5("div", { className: cls.container, "data-testid": "devtools-csrf-readiness-loading", children: "Loading\u2026" });
   }
   const isEmpty = data.totalEvents === 0;
   const testid = isEmpty ? "devtools-csrf-readiness-empty" : "devtools-csrf-readiness";
-  return /* @__PURE__ */ jsxs("div", { className: cls.container, "data-testid": testid, children: [
-    /* @__PURE__ */ jsxs("div", { className: cls.headerRow, children: [
-      /* @__PURE__ */ jsx3("strong", { children: isEmpty ? "CSRF Readiness" : `CSRF Readiness \u2014 ${String(data.totalEvents)} event(s) across ${String(data.routes.length)} route(s)` }),
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3("div", { className: cls.container, "data-testid": testid, children: [
+    /* @__PURE__ */ jsxs3("div", { className: cls.headerRow, children: [
+      /* @__PURE__ */ jsx5("strong", { children: isEmpty ? "CSRF Readiness" : `CSRF Readiness \u2014 ${String(data.totalEvents)} event(s) across ${String(data.routes.length)} route(s)` }),
+      /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -559,13 +1015,13 @@ function CsrfReadinessTab() {
         }
       )
     ] }),
-    isEmpty ? /* @__PURE__ */ jsx3("div", { style: { color: tokens.colors.textMuted }, children: "No csrf.warn events recorded. Endpoints are ready for 0.3.0 strict CSRF." }) : data.routes.map((r) => /* @__PURE__ */ jsx3(ReadinessRow, { rowClass: cls.row, route: r }, `${r.method} ${r.path} ${r.reason}`))
+    isEmpty ? /* @__PURE__ */ jsx5("div", { style: { color: tokens.colors.textMuted }, children: "No csrf.warn events recorded. Endpoints are ready for 0.3.0 strict CSRF." }) : data.routes.map((r) => /* @__PURE__ */ jsx5(ReadinessRow, { rowClass: cls.row, route: r }, `${r.method} ${r.path} ${r.reason}`))
   ] });
 }
 
 // src/devtools/components/ErrorRow.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var STACK_DISPLAY_LIMIT = 4096;
 function truncateStackForDisplay(stack, limit = STACK_DISPLAY_LIMIT) {
   if (!stack) return null;
@@ -596,7 +1052,7 @@ function typeIcon(type) {
   }
 }
 function ErrorRow({ error }) {
-  const [expanded, setExpanded] = useState2(false);
+  const [expanded, setExpanded] = useState3(false);
   const { styles } = useDevtoolsContext();
   const containerClass = styles.css`
     display: block;
@@ -643,8 +1099,8 @@ function ErrorRow({ error }) {
   `;
   const displayedStack = truncateStackForDisplay(error.stack);
   const showDocsLink = typeof error.docsUrl === "string" && error.docsUrl.length > 0;
-  return /* @__PURE__ */ jsxs2("div", { className: containerClass, "data-testid": "devtools-error-row", children: [
-    /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4("div", { className: containerClass, "data-testid": "devtools-error-row", children: [
+    /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
@@ -655,9 +1111,9 @@ function ErrorRow({ error }) {
         "aria-expanded": expanded,
         title: error.message,
         children: [
-          /* @__PURE__ */ jsx4("span", { className: iconClass, "aria-hidden": "true", children: typeIcon(error.type) }),
-          /* @__PURE__ */ jsx4("span", { className: msgClass, children: error.message }),
-          error.code && /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx6("span", { className: iconClass, "aria-hidden": "true", children: typeIcon(error.type) }),
+          /* @__PURE__ */ jsx6("span", { className: msgClass, children: error.message }),
+          error.code && /* @__PURE__ */ jsx6(
             "span",
             {
               style: {
@@ -671,8 +1127,8 @@ function ErrorRow({ error }) {
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsxs2("div", { className: detailsClass, children: [
-      showDocsLink && /* @__PURE__ */ jsx4("div", { style: { marginBottom: tokens.spacing.sm }, children: /* @__PURE__ */ jsx4(
+    expanded && /* @__PURE__ */ jsxs4("div", { className: detailsClass, children: [
+      showDocsLink && /* @__PURE__ */ jsx6("div", { style: { marginBottom: tokens.spacing.sm }, children: /* @__PURE__ */ jsx6(
         "a",
         {
           href: error.docsUrl,
@@ -682,7 +1138,7 @@ function ErrorRow({ error }) {
           children: "Open migration guide"
         }
       ) }),
-      displayedStack && /* @__PURE__ */ jsx4(
+      displayedStack && /* @__PURE__ */ jsx6(
         "pre",
         {
           style: {
@@ -706,11 +1162,11 @@ function ErrorRow({ error }) {
 }
 
 // src/devtools/components/Tabs/ErrorsTab.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function ErrorsTab() {
   const { state, dispatch, styles } = useDevtoolsContext();
   if (state.errors.length === 0) {
-    return /* @__PURE__ */ jsx5("div", { style: { color: tokens.colors.textMuted, padding: tokens.spacing.md }, children: "No errors yet. csrf.warn, console.error and unhandled rejections will surface here." });
+    return /* @__PURE__ */ jsx7("div", { style: { color: tokens.colors.textMuted, padding: tokens.spacing.md }, children: "No errors yet. csrf.warn, console.error and unhandled rejections will surface here." });
   }
   const headerClass = styles.css`
     display: flex;
@@ -732,14 +1188,14 @@ function ErrorsTab() {
     font-size: ${tokens.font.sizeXs};
     &:hover { color: ${tokens.colors.text}; }
   `;
-  return /* @__PURE__ */ jsxs3("div", { "data-testid": "devtools-errors-tab", children: [
-    /* @__PURE__ */ jsxs3("div", { className: headerClass, children: [
-      /* @__PURE__ */ jsxs3("span", { children: [
+  return /* @__PURE__ */ jsxs5("div", { "data-testid": "devtools-errors-tab", children: [
+    /* @__PURE__ */ jsxs5("div", { className: headerClass, children: [
+      /* @__PURE__ */ jsxs5("span", { children: [
         state.errors.length,
         " error",
         state.errors.length === 1 ? "" : "s"
       ] }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -751,16 +1207,16 @@ function ErrorsTab() {
         }
       )
     ] }),
-    state.errors.map((err) => /* @__PURE__ */ jsx5(ErrorRow, { error: err }, err.id))
+    state.errors.map((err) => /* @__PURE__ */ jsx7(ErrorRow, { error: err }, err.id))
   ] });
 }
 
 // src/devtools/components/RequestRow.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 
 // src/devtools/components/JSONExplorer.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var PAGE_SIZE = 100;
 var MAX_STRING_DISPLAY = 256;
 function describe(value) {
@@ -782,8 +1238,8 @@ function JSONExplorer({
   defaultExpanded = false,
   depth = 0
 }) {
-  const [expanded, setExpanded] = useState3(defaultExpanded);
-  const [pageIndex, setPageIndex] = useState3(0);
+  const [expanded, setExpanded] = useState4(defaultExpanded);
+  const [pageIndex, setPageIndex] = useState4(0);
   const { styles } = useDevtoolsContext();
   const rowClass = styles.css`
     font-family: ${tokens.font.mono};
@@ -808,26 +1264,26 @@ function JSONExplorer({
   const keyClass = styles.css`color: ${tokens.colors.accent};`;
   const valClass = styles.css`color: ${tokens.colors.textMuted};`;
   if (value === null || value === void 0 || typeof value !== "object") {
-    return /* @__PURE__ */ jsxs4("div", { className: rowClass, children: [
-      /* @__PURE__ */ jsx6("span", { className: keyClass, children: label }),
+    return /* @__PURE__ */ jsxs6("div", { className: rowClass, children: [
+      /* @__PURE__ */ jsx8("span", { className: keyClass, children: label }),
       ":",
       " ",
-      /* @__PURE__ */ jsx6("span", { className: valClass, children: describe(value) })
+      /* @__PURE__ */ jsx8("span", { className: valClass, children: describe(value) })
     ] });
   }
   const entries = Array.isArray(value) ? value.map((v, i) => [String(i), v]) : Object.entries(value);
   if (entries.length === 0) {
-    return /* @__PURE__ */ jsxs4("div", { className: rowClass, children: [
-      /* @__PURE__ */ jsx6("span", { className: keyClass, children: label }),
+    return /* @__PURE__ */ jsxs6("div", { className: rowClass, children: [
+      /* @__PURE__ */ jsx8("span", { className: keyClass, children: label }),
       ":",
       " ",
-      /* @__PURE__ */ jsx6("span", { className: valClass, children: Array.isArray(value) ? "[]" : "{}" })
+      /* @__PURE__ */ jsx8("span", { className: valClass, children: Array.isArray(value) ? "[]" : "{}" })
     ] });
   }
   const totalPages = Math.ceil(entries.length / PAGE_SIZE);
   const slice = entries.slice(pageIndex * PAGE_SIZE, (pageIndex + 1) * PAGE_SIZE);
-  return /* @__PURE__ */ jsxs4("div", { className: rowClass, children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6("div", { className: rowClass, children: [
+    /* @__PURE__ */ jsxs6(
       "button",
       {
         type: "button",
@@ -837,15 +1293,15 @@ function JSONExplorer({
         },
         "aria-expanded": expanded,
         children: [
-          /* @__PURE__ */ jsx6("span", { children: expanded ? "\u25BE" : "\u25B8" }),
-          /* @__PURE__ */ jsx6("span", { className: keyClass, children: label }),
-          /* @__PURE__ */ jsx6("span", { className: valClass, children: describe(value) })
+          /* @__PURE__ */ jsx8("span", { children: expanded ? "\u25BE" : "\u25B8" }),
+          /* @__PURE__ */ jsx8("span", { className: keyClass, children: label }),
+          /* @__PURE__ */ jsx8("span", { className: valClass, children: describe(value) })
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsxs4("div", { children: [
-      slice.map(([k, v]) => /* @__PURE__ */ jsx6(JSONExplorer, { label: k, value: v, depth: depth + 1 }, k)),
-      totalPages > 1 && /* @__PURE__ */ jsxs4(
+    expanded && /* @__PURE__ */ jsxs6("div", { children: [
+      slice.map(([k, v]) => /* @__PURE__ */ jsx8(JSONExplorer, { label: k, value: v, depth: depth + 1 }, k)),
+      totalPages > 1 && /* @__PURE__ */ jsxs6(
         "div",
         {
           className: styles.css`padding-left: ${(depth + 1) * 12}px; color: ${tokens.colors.textMuted}; font-size: ${tokens.font.sizeXs};`,
@@ -854,7 +1310,7 @@ function JSONExplorer({
             pageIndex + 1,
             "/",
             totalPages,
-            pageIndex > 0 && /* @__PURE__ */ jsx6(
+            pageIndex > 0 && /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -865,7 +1321,7 @@ function JSONExplorer({
                 children: "prev"
               }
             ),
-            pageIndex < totalPages - 1 && /* @__PURE__ */ jsx6(
+            pageIndex < totalPages - 1 && /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -884,7 +1340,7 @@ function JSONExplorer({
 }
 
 // src/devtools/components/RequestRow.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function buildRequestRowStyles(styles, request) {
   return {
     container: styles.css`
@@ -960,7 +1416,7 @@ function formatDuration(ms) {
   return `${Math.round(ms)}ms`;
 }
 function RequestRow({ request }) {
-  const [expanded, setExpanded] = useState4(false);
+  const [expanded, setExpanded] = useState5(false);
   const { styles } = useDevtoolsContext();
   const cls = buildRequestRowStyles(styles, request);
   const containerClass = cls.container;
@@ -973,8 +1429,8 @@ function RequestRow({ request }) {
   const detailsClass = cls.details;
   const displayDuration = formatDuration(request.durationMs);
   const displayStatus = request.status === 0 ? "failed" : String(request.status);
-  return /* @__PURE__ */ jsxs5("div", { className: containerClass, "data-testid": "devtools-request-row", children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7("div", { className: containerClass, "data-testid": "devtools-request-row", children: [
+    /* @__PURE__ */ jsxs7(
       "button",
       {
         type: "button",
@@ -985,19 +1441,19 @@ function RequestRow({ request }) {
         "aria-expanded": expanded,
         title: request.path,
         children: [
-          /* @__PURE__ */ jsx7("span", { className: methodBadge, children: request.method }),
-          /* @__PURE__ */ jsx7("span", { className: pathClass, children: request.path }),
-          /* @__PURE__ */ jsx7("span", { className: statusClass, children: displayStatus }),
-          /* @__PURE__ */ jsx7("span", { className: durClass, children: displayDuration }),
-          /* @__PURE__ */ jsx7("span", { className: traceClass, children: request.traceId.slice(0, 8) })
+          /* @__PURE__ */ jsx9("span", { className: methodBadge, children: request.method }),
+          /* @__PURE__ */ jsx9("span", { className: pathClass, children: request.path }),
+          /* @__PURE__ */ jsx9("span", { className: statusClass, children: displayStatus }),
+          /* @__PURE__ */ jsx9("span", { className: durClass, children: displayDuration }),
+          /* @__PURE__ */ jsx9("span", { className: traceClass, children: request.traceId.slice(0, 8) })
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsxs5("div", { className: detailsClass, children: [
-      request.csrfWarn && /* @__PURE__ */ jsxs5("div", { style: { color: tokens.colors.error.csrf, marginBottom: tokens.spacing.sm }, children: [
+    expanded && /* @__PURE__ */ jsxs7("div", { className: detailsClass, children: [
+      request.csrfWarn && /* @__PURE__ */ jsxs7("div", { style: { color: tokens.colors.error.csrf, marginBottom: tokens.spacing.sm }, children: [
         "CSRF warn:",
         " ",
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx9(
           "a",
           {
             href: request.csrfWarn.docsUrl,
@@ -1008,8 +1464,8 @@ function RequestRow({ request }) {
           }
         )
       ] }),
-      request.headers && /* @__PURE__ */ jsx7(JSONExplorer, { label: "headers", value: request.headers, defaultExpanded: false }),
-      request.bodyPreview !== void 0 && request.bodyPreview !== "" && /* @__PURE__ */ jsxs5(
+      request.headers && /* @__PURE__ */ jsx9(JSONExplorer, { label: "headers", value: request.headers, defaultExpanded: false }),
+      request.bodyPreview !== void 0 && request.bodyPreview !== "" && /* @__PURE__ */ jsxs7(
         "div",
         {
           style: {
@@ -1022,7 +1478,7 @@ function RequestRow({ request }) {
             "body",
             request.bodyTruncated ? ` (truncated, ${request.bodyLength} bytes)` : "",
             ":",
-            /* @__PURE__ */ jsx7("pre", { style: { marginTop: 4, whiteSpace: "pre-wrap", wordBreak: "break-all" }, children: request.bodyPreview })
+            /* @__PURE__ */ jsx9("pre", { style: { marginTop: 4, whiteSpace: "pre-wrap", wordBreak: "break-all" }, children: request.bodyPreview })
           ]
         }
       )
@@ -1031,11 +1487,11 @@ function RequestRow({ request }) {
 }
 
 // src/devtools/components/Tabs/RequestsTab.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function RequestsTab() {
   const { state, dispatch, styles } = useDevtoolsContext();
   if (state.requests.length === 0) {
-    return /* @__PURE__ */ jsx8("div", { style: { color: tokens.colors.textMuted, padding: tokens.spacing.md }, children: "No requests yet. Make a fetch call in your app to see it here." });
+    return /* @__PURE__ */ jsx10("div", { style: { color: tokens.colors.textMuted, padding: tokens.spacing.md }, children: "No requests yet. Make a fetch call in your app to see it here." });
   }
   const headerClass = styles.css`
     display: flex;
@@ -1057,14 +1513,14 @@ function RequestsTab() {
     font-size: ${tokens.font.sizeXs};
     &:hover { color: ${tokens.colors.text}; }
   `;
-  return /* @__PURE__ */ jsxs6("div", { "data-testid": "devtools-requests-tab", children: [
-    /* @__PURE__ */ jsxs6("div", { className: headerClass, children: [
-      /* @__PURE__ */ jsxs6("span", { children: [
+  return /* @__PURE__ */ jsxs8("div", { "data-testid": "devtools-requests-tab", children: [
+    /* @__PURE__ */ jsxs8("div", { className: headerClass, children: [
+      /* @__PURE__ */ jsxs8("span", { children: [
         state.requests.length,
         " request",
         state.requests.length === 1 ? "" : "s"
       ] }),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
@@ -1076,16 +1532,16 @@ function RequestsTab() {
         }
       )
     ] }),
-    state.requests.map((req) => /* @__PURE__ */ jsx8(RequestRow, { request: req }, req.id))
+    state.requests.map((req) => /* @__PURE__ */ jsx10(RequestRow, { request: req }, req.id))
   ] });
 }
 
 // src/devtools/components/Tabs/RoutesTab.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function RoutesTab() {
   const { state, styles } = useDevtoolsContext();
   if (!state.routeManifest || state.routeManifest.routes.length === 0) {
-    return /* @__PURE__ */ jsx9("div", { style: { color: tokens.colors.textMuted, padding: tokens.spacing.md }, children: "Routes will appear when the manifest loads." });
+    return /* @__PURE__ */ jsx11("div", { style: { color: tokens.colors.textMuted, padding: tokens.spacing.md }, children: "Routes will appear when the manifest loads." });
   }
   const rowClass = styles.css`
     display: flex;
@@ -1114,9 +1570,9 @@ function RoutesTab() {
       console.warn("[theo devtools] Editor not configured");
     });
   }
-  return /* @__PURE__ */ jsx9("div", { "data-testid": "devtools-routes-tab", children: state.routeManifest.routes.map((route) => {
+  return /* @__PURE__ */ jsx11("div", { "data-testid": "devtools-routes-tab", children: state.routeManifest.routes.map((route) => {
     const active = state.activeRoutePath === route.path || state.activeChain.includes(route.absoluteFilePath);
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs9(
       "button",
       {
         type: "button",
@@ -1127,7 +1583,7 @@ function RoutesTab() {
         },
         title: `Open ${route.absoluteFilePath} in editor`,
         children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx11(
             "span",
             {
               style: {
@@ -1137,8 +1593,8 @@ function RoutesTab() {
               children: active ? "\u25B8" : " "
             }
           ),
-          /* @__PURE__ */ jsx9("span", { style: { flex: 1 }, children: route.path }),
-          /* @__PURE__ */ jsx9("span", { style: { color: tokens.colors.textDim, fontSize: tokens.font.sizeXs }, children: route.absoluteFilePath.split("/").slice(-2).join("/") })
+          /* @__PURE__ */ jsx11("span", { style: { flex: 1 }, children: route.path }),
+          /* @__PURE__ */ jsx11("span", { style: { color: tokens.colors.textDim, fontSize: tokens.font.sizeXs }, children: route.absoluteFilePath.split("/").slice(-2).join("/") })
         ]
       },
       route.absoluteFilePath
@@ -1147,7 +1603,7 @@ function RoutesTab() {
 }
 
 // src/devtools/components/Tabs/SettingsTab.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right"];
 var THEMES = ["light", "dark", "system"];
 function SettingsTab() {
@@ -1168,11 +1624,11 @@ function SettingsTab() {
     color: ${tokens.colors.text};
     font-size: ${tokens.font.sizeSm};
   `;
-  return /* @__PURE__ */ jsxs8("div", { "data-testid": "devtools-settings-tab", style: { padding: tokens.spacing.md }, children: [
-    /* @__PURE__ */ jsxs8("fieldset", { className: sectionClass, style: { border: 0, padding: 0, margin: 0 }, children: [
-      /* @__PURE__ */ jsx10("legend", { className: headingClass, children: "Position" }),
-      POSITIONS.map((p) => /* @__PURE__ */ jsxs8("label", { className: radioRowClass, children: [
-        /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs10("div", { "data-testid": "devtools-settings-tab", style: { padding: tokens.spacing.md }, children: [
+    /* @__PURE__ */ jsxs10("fieldset", { className: sectionClass, style: { border: 0, padding: 0, margin: 0 }, children: [
+      /* @__PURE__ */ jsx12("legend", { className: headingClass, children: "Position" }),
+      POSITIONS.map((p) => /* @__PURE__ */ jsxs10("label", { className: radioRowClass, children: [
+        /* @__PURE__ */ jsx12(
           "input",
           {
             type: "radio",
@@ -1184,13 +1640,13 @@ function SettingsTab() {
             }
           }
         ),
-        /* @__PURE__ */ jsx10("span", { children: p })
+        /* @__PURE__ */ jsx12("span", { children: p })
       ] }, p))
     ] }),
-    /* @__PURE__ */ jsxs8("fieldset", { className: sectionClass, style: { border: 0, padding: 0, margin: 0 }, children: [
-      /* @__PURE__ */ jsx10("legend", { className: headingClass, children: "Theme" }),
-      THEMES.map((t) => /* @__PURE__ */ jsxs8("label", { className: radioRowClass, children: [
-        /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsxs10("fieldset", { className: sectionClass, style: { border: 0, padding: 0, margin: 0 }, children: [
+      /* @__PURE__ */ jsx12("legend", { className: headingClass, children: "Theme" }),
+      THEMES.map((t) => /* @__PURE__ */ jsxs10("label", { className: radioRowClass, children: [
+        /* @__PURE__ */ jsx12(
           "input",
           {
             type: "radio",
@@ -1202,15 +1658,23 @@ function SettingsTab() {
             }
           }
         ),
-        /* @__PURE__ */ jsx10("span", { children: t })
+        /* @__PURE__ */ jsx12("span", { children: t })
       ] }, t))
     ] })
   ] });
 }
 
 // src/devtools/components/Panel.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var TABS = ["requests", "routes", "errors", "csrf-readiness", "settings"];
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var TABS = [
+  "requests",
+  "routes",
+  "agents",
+  "actions",
+  "errors",
+  "csrf-readiness",
+  "settings"
+];
 function buildPanelStyles(styles, vertical, horizontal, verticalOffset) {
   return {
     panel: styles.css`
@@ -1295,7 +1759,7 @@ function Panel() {
   const tabBtnClass = cls.tabBtn;
   const closeBtnClass = cls.closeBtn;
   const bodyClass = cls.body;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       role: "dialog",
@@ -1303,9 +1767,9 @@ function Panel() {
       "data-theo-devtools-panel": "",
       className: panelClass,
       children: [
-        /* @__PURE__ */ jsxs9("div", { className: headerClass, children: [
-          /* @__PURE__ */ jsxs9("div", { className: tabsClass, role: "tablist", children: [
-            /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsxs11("div", { className: headerClass, children: [
+          /* @__PURE__ */ jsxs11("div", { className: tabsClass, role: "tablist", children: [
+            /* @__PURE__ */ jsx13(
               "span",
               {
                 className: styles.css`
@@ -1315,10 +1779,10 @@ function Panel() {
               opacity: 0.9;
             `,
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx11(TheoLogo, { size: 16 })
+                children: /* @__PURE__ */ jsx13(TheoLogo, { size: 16 })
               }
             ),
-            TABS.map((t) => /* @__PURE__ */ jsx11(
+            TABS.map((t) => /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -1334,7 +1798,7 @@ function Panel() {
               t
             ))
           ] }),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -1347,107 +1811,20 @@ function Panel() {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs9("div", { className: bodyClass, "data-testid": "devtools-tab-body", children: [
-          state.activeTab === "requests" && /* @__PURE__ */ jsx11(RequestsTab, {}),
-          state.activeTab === "routes" && /* @__PURE__ */ jsx11(RoutesTab, {}),
-          state.activeTab === "errors" && /* @__PURE__ */ jsx11(ErrorsTab, {}),
-          state.activeTab === "csrf-readiness" && /* @__PURE__ */ jsx11(CsrfReadinessTab, {}),
-          state.activeTab === "settings" && /* @__PURE__ */ jsx11(SettingsTab, {})
+        /* @__PURE__ */ jsxs11("div", { className: bodyClass, "data-testid": "devtools-tab-body", children: [
+          state.activeTab === "requests" && /* @__PURE__ */ jsx13(RequestsTab, {}),
+          state.activeTab === "routes" && /* @__PURE__ */ jsx13(RoutesTab, {}),
+          state.activeTab === "agents" && /* @__PURE__ */ jsx13(AgentsTab, {}),
+          state.activeTab === "actions" && /* @__PURE__ */ jsx13(ActionsTab, {}),
+          state.activeTab === "errors" && /* @__PURE__ */ jsx13(ErrorsTab, {}),
+          state.activeTab === "csrf-readiness" && /* @__PURE__ */ jsx13(CsrfReadinessTab, {}),
+          state.activeTab === "settings" && /* @__PURE__ */ jsx13(SettingsTab, {})
         ] })
       ]
     }
   );
 }
 
-// src/devtools/shared.ts
-var RING_BUFFER_CAP = 50;
-var MAX_QUEUE_SIZE = 100;
-var STORAGE_VERSION = 1;
-var initialState = {
-  open: false,
-  visible: true,
-  position: "bottom-right",
-  theme: "system",
-  activeTab: "requests",
-  requests: [],
-  errors: [],
-  routeManifest: null,
-  activeRoutePath: null,
-  activeChain: []
-};
-var CHANNEL_REQUEST = "theo:devtools:request";
-var CHANNEL_ERROR = "theo:devtools:error";
-var CHANNEL_CSRF_WARN = "theo:devtools:csrf.warn";
-var CHANNEL_MANIFEST = "theo:devtools:manifest";
-var CHANNEL_ROUTE_MATCHED = "theo:devtools:route-matched";
-
-// src/devtools/dispatcher.ts
-var _dispatch = null;
-var _queue = [];
-function queuable(fn) {
-  return (...args) => {
-    if (_dispatch) {
-      try {
-        fn(_dispatch, ...args);
-      } catch (err) {
-        console.error("[theo devtools] dispatch failed", err);
-      }
-    } else {
-      if (_queue.length >= MAX_QUEUE_SIZE) _queue.shift();
-      _queue.push((d) => {
-        fn(d, ...args);
-      });
-    }
-  };
-}
-function flushQueue() {
-  while (_queue.length) {
-    const fn = _queue.shift();
-    if (!fn || !_dispatch) break;
-    try {
-      fn(_dispatch);
-    } catch (err) {
-      console.error("[theo devtools] queued event failed", err);
-    }
-  }
-}
-var dispatcher = {
-  onRequest: queuable((d, req) => {
-    d({ type: "REQUEST_ADD", request: req });
-  }),
-  onError: queuable((d, err) => {
-    d({ type: "ERROR_ADD", error: err });
-  }),
-  onCsrfWarn: queuable((d, payload) => {
-    d({ type: "CSRF_WARN", payload });
-  }),
-  onManifestUpdated: queuable((d, manifest) => {
-    d({ type: "MANIFEST_UPDATED", manifest });
-  }),
-  onRouteMatched: queuable((d, path, chain) => {
-    d({ type: "ROUTE_MATCHED", path, chain });
-  }),
-  /**
-   * Wire React's dispatch function in. Idempotent (EC-24): only the
-   * NULL → non-null transition flushes the queue; subsequent non-null
-   * sets just replace the reference (used for StrictMode re-mount).
-   */
-  setDispatch(d) {
-    const prev = _dispatch;
-    _dispatch = d;
-    if (d && !prev) flushQueue();
-  },
-  /** Testing helper — clear queue + dispatch reference between tests. */
-  _reset() {
-    _dispatch = null;
-    _queue.length = 0;
-  },
-  /** Testing helper — observe queue length. */
-  _queueLength() {
-    return _queue.length;
-  }
-};
-
 // src/devtools/hmr-bridge.ts
 function getHot() {
   try {
@@ -1577,13 +1954,13 @@ function useActiveRoute() {
 }
 
 // src/devtools/hooks/useResolvedTheme.ts
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
 function getSystemTheme() {
   if (typeof window === "undefined") return "dark";
   return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
 }
 function useResolvedTheme(theme) {
-  const [systemTheme, setSystemTheme] = useState5(() => getSystemTheme());
+  const [systemTheme, setSystemTheme] = useState6(() => getSystemTheme());
   useEffect4(() => {
     if (theme !== "system") return;
     if (typeof window === "undefined") return;
@@ -1640,6 +2017,16 @@ function useShortcuts() {
   }, [dispatch, state.open]);
 }
 
+// src/devtools/install-global.ts
+function noopCleanup() {
+}
+function installDispatcherGlobal() {
+  if (typeof window === "undefined") return noopCleanup;
+  const w = window;
+  w.__theoDevtoolsDispatcher = dispatcher;
+  return noopCleanup;
+}
+
 // src/devtools/persistence.ts
 var STORAGE_KEYS = {
   version: "theo-devtools-storage-version",
@@ -1731,6 +2118,45 @@ function writeToStorage(s) {
 function appendCapped(arr, item, cap = RING_BUFFER_CAP) {
   return [item, ...arr].slice(0, cap);
 }
+function reduceAppend(state, action) {
+  switch (action.type) {
+    case "REQUEST_ADD":
+      return { ...state, requests: appendCapped(state.requests, action.request) };
+    case "ERROR_ADD":
+      return { ...state, errors: appendCapped(state.errors, action.error) };
+    case "AGENT_RUN_ADD":
+      return { ...state, agentRuns: appendCapped(state.agentRuns, action.run) };
+    case "ACTION_CALL_ADD":
+      return { ...state, actionCalls: appendCapped(state.actionCalls, action.record) };
+    default:
+      return null;
+  }
+}
+function reduceReset(state, action) {
+  switch (action.type) {
+    case "RESET_REQUESTS":
+      return { ...state, requests: [] };
+    case "RESET_ERRORS":
+      return { ...state, errors: [] };
+    case "RESET_AGENT_RUNS":
+      return { ...state, agentRuns: [] };
+    case "RESET_ACTION_CALLS":
+      return { ...state, actionCalls: [] };
+    default:
+      return null;
+  }
+}
+function csrfWarnToErrorRecord(payload) {
+  return {
+    // eslint-disable-next-line sonarjs/pseudo-random -- non-secret correlation id for devtools UI
+    id: `csrf-${String(Date.now())}-${Math.random().toString(36).slice(2, 8)}`,
+    type: "csrf.warn",
+    message: `CSRF warn: ${payload.method} ${payload.path} \u2014 ${payload.reason}`,
+    code: payload.code,
+    docsUrl: payload.docsUrl,
+    timestamp: Date.now()
+  };
+}
 function devtoolsReducer(state, action) {
   switch (action.type) {
     case "TOGGLE_PANEL":
@@ -1743,32 +2169,14 @@ function devtoolsReducer(state, action) {
       return { ...state, position: action.position };
     case "SET_THEME":
       return { ...state, theme: action.theme };
-    case "REQUEST_ADD":
-      return { ...state, requests: appendCapped(state.requests, action.request) };
-    case "ERROR_ADD":
-      return { ...state, errors: appendCapped(state.errors, action.error) };
-    case "CSRF_WARN": {
-      const errorRecord = {
-        // eslint-disable-next-line sonarjs/pseudo-random -- non-secret correlation id for devtools UI
-        id: `csrf-${String(Date.now())}-${Math.random().toString(36).slice(2, 8)}`,
-        type: "csrf.warn",
-        message: `CSRF warn: ${action.payload.method} ${action.payload.path} \u2014 ${action.payload.reason}`,
-        code: action.payload.code,
-        docsUrl: action.payload.docsUrl,
-        timestamp: Date.now()
-      };
-      return { ...state, errors: appendCapped(state.errors, errorRecord) };
-    }
+    case "CSRF_WARN":
+      return { ...state, errors: appendCapped(state.errors, csrfWarnToErrorRecord(action.payload)) };
     case "MANIFEST_UPDATED":
       return { ...state, routeManifest: action.manifest };
     case "ROUTE_MATCHED":
       return { ...state, activeRoutePath: action.path, activeChain: action.chain };
-    case "RESET_REQUESTS":
-      return { ...state, requests: [] };
-    case "RESET_ERRORS":
-      return { ...state, errors: [] };
     default:
-      return state;
+      return reduceAppend(state, action) ?? reduceReset(state, action) ?? state;
   }
 }
 
@@ -1799,7 +2207,7 @@ function createStyles(shadowRoot) {
 }
 
 // src/devtools/Overlay.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function ActiveRouteTracker() {
   useActiveRoute();
   return null;
@@ -1810,7 +2218,7 @@ function ShortcutsTracker() {
 }
 function ThemeVars({ resolved }) {
   const css = `:host { color-scheme: ${resolved}; ${buildThemeCssVars(resolved)} }`;
-  return /* @__PURE__ */ jsx12("style", { "data-theo-devtools-theme": resolved, children: css });
+  return /* @__PURE__ */ jsx14("style", { "data-theo-devtools-theme": resolved, children: css });
 }
 function Overlay({ shadowRoot }) {
   const [state, dispatch] = useReducer(
@@ -1832,8 +2240,10 @@ function Overlay({ shadowRoot }) {
   }, [state.position, state.theme, state.open, state.activeTab, state.visible]);
   useInsertionEffect(() => {
     dispatcher.setDispatch(dispatch);
+    const uninstall = installDispatcherGlobal();
     return () => {
       dispatcher.setDispatch(null);
+      uninstall();
     };
   }, []);
   useEffect6(() => {
@@ -1842,17 +2252,17 @@ function Overlay({ shadowRoot }) {
       sub.unsubscribe();
     };
   }, []);
-  return /* @__PURE__ */ jsx12(DevtoolsContext.Provider, { value: { shadowRoot, state, dispatch, styles }, children: /* @__PURE__ */ jsxs10(ShadowPortal, { children: [
-    /* @__PURE__ */ jsx12(ThemeVars, { resolved: resolvedTheme }),
-    /* @__PURE__ */ jsx12(ActiveRouteTracker, {}),
-    /* @__PURE__ */ jsx12(ShortcutsTracker, {}),
-    /* @__PURE__ */ jsx12(Indicator, {}),
-    /* @__PURE__ */ jsx12(Panel, {})
+  return /* @__PURE__ */ jsx14(DevtoolsContext.Provider, { value: { shadowRoot, state, dispatch, styles }, children: /* @__PURE__ */ jsxs12(ShadowPortal, { children: [
+    /* @__PURE__ */ jsx14(ThemeVars, { resolved: resolvedTheme }),
+    /* @__PURE__ */ jsx14(ActiveRouteTracker, {}),
+    /* @__PURE__ */ jsx14(ShortcutsTracker, {}),
+    /* @__PURE__ */ jsx14(Indicator, {}),
+    /* @__PURE__ */ jsx14(Panel, {})
   ] }) });
 }
 
 // src/devtools/entry.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var PORTAL_TAG = "theo-devtools-portal";
 function definePortalElement() {
   if (typeof customElements === "undefined") return;
@@ -1879,7 +2289,7 @@ function mount() {
   shadowRoot.appendChild(reactRootHost);
   const root = createRoot(reactRootHost);
   root.render(
-    /* @__PURE__ */ jsx13(StrictMode, { children: /* @__PURE__ */ jsx13(Overlay, { shadowRoot }) })
+    /* @__PURE__ */ jsx15(StrictMode, { children: /* @__PURE__ */ jsx15(Overlay, { shadowRoot }) })
   );
 }
 if (typeof document !== "undefined") {