theokit 0.2.0 → 0.2.1

package/dist/devtools/entry.js

@@ -8,7 +8,7 @@ import {
   STORAGE_VERSION,
   dispatcher,
   initialState
-} from "../chunk-OK2PJOLK.js";
+} from "../chunk-KJVEJILQ.js";
 import "../chunk-DGUM43GV.js";
 
 // src/devtools/entry.tsx
@@ -444,12 +444,278 @@ function Indicator() {
   );
 }
 
-// src/devtools/components/Tabs/AgentsTab.tsx
+// 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`;
@@ -458,9 +724,9 @@ function formatCost(usd) {
 function AgentsTab() {
   const { state, dispatch, styles } = useDevtoolsContext();
   if (state.agentRuns.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { style: { color: tokens.colors.textMuted, padding: tokens.spacing.md }, children: [
+    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__ */ jsx3("code", { children: "trackAgentRun" }),
+      /* @__PURE__ */ jsx4("code", { children: "trackAgentRun" }),
       " to see it here. (Wired in the saas template; opt-in elsewhere.)"
     ] });
   }
@@ -504,9 +770,9 @@ function AgentsTab() {
     tr.status-error td { color: #c92a2a; }
     tr.status-aborted td { color: ${tokens.colors.textMuted}; }
   `;
-  return /* @__PURE__ */ jsxs("div", { "data-testid": "devtools-agents-tab", children: [
-    /* @__PURE__ */ jsxs("div", { className: headerClass, children: [
-      /* @__PURE__ */ jsxs("span", { children: [
+  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",
@@ -519,7 +785,7 @@ function AgentsTab() {
         formatCost(totalCost),
         " total"
       ] }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -531,34 +797,95 @@ function AgentsTab() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("table", { className: tableClass, children: [
-      /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx3("th", { children: "Time" }),
-        /* @__PURE__ */ jsx3("th", { children: "User" }),
-        /* @__PURE__ */ jsx3("th", { children: "Model" }),
-        /* @__PURE__ */ jsx3("th", { children: "Tokens (in/out)" }),
-        /* @__PURE__ */ jsx3("th", { children: "Cost" }),
-        /* @__PURE__ */ jsx3("th", { children: "Status" })
+    /* @__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__ */ jsx3("tbody", { children: state.agentRuns.map((run) => /* @__PURE__ */ jsxs("tr", { className: `status-${run.status}`, children: [
-        /* @__PURE__ */ jsx3("td", { children: formatTime(run.timestamp) }),
-        /* @__PURE__ */ jsx3("td", { children: run.userId }),
-        /* @__PURE__ */ jsx3("td", { children: run.model }),
-        /* @__PURE__ */ jsxs("td", { children: [
+      /* @__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__ */ jsx3("td", { children: formatCost(run.costUsd) }),
-        /* @__PURE__ */ jsx3("td", { children: run.status })
+        /* @__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, useCallback as useCallback2 } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+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`
@@ -600,13 +927,13 @@ function ReadinessRow({
   rowClass,
   route
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: rowClass, children: [
-    /* @__PURE__ */ jsx4("span", { style: { color: tokens.colors.accent }, children: route.method }),
-    /* @__PURE__ */ jsxs2("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__ */ jsx4("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__ */ jsxs2("span", { style: { color: tokens.colors.textMuted }, children: [
+    /* @__PURE__ */ jsxs3("span", { style: { color: tokens.colors.textMuted }, children: [
       "\xD7",
       String(route.count)
     ] })
@@ -615,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(() => {
@@ -652,24 +981,28 @@ function CsrfReadinessTab() {
     }
   }, [fetchData]);
   if (error) {
-    return /* @__PURE__ */ jsxs2("div", { className: cls.container, "data-testid": "devtools-csrf-readiness-error", children: [
-      /* @__PURE__ */ jsx4("div", { style: { color: tokens.colors.error.csrf }, children: error }),
-      /* @__PURE__ */ jsxs2("p", { style: { color: tokens.colors.textMuted, marginTop: tokens.spacing.sm }, children: [
-        "Wire ",
-        /* @__PURE__ */ jsx4("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__ */ jsx4("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__ */ jsxs2("div", { className: cls.container, "data-testid": testid, children: [
-    /* @__PURE__ */ jsxs2("div", { className: cls.headerRow, children: [
-      /* @__PURE__ */ jsx4("strong", { children: isEmpty ? "CSRF Readiness" : `CSRF Readiness \u2014 ${String(data.totalEvents)} event(s) across ${String(data.routes.length)} route(s)` }),
-      /* @__PURE__ */ jsx4(
+  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",
@@ -682,13 +1015,13 @@ function CsrfReadinessTab() {
         }
       )
     ] }),
-    isEmpty ? /* @__PURE__ */ jsx4("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__ */ jsx4(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 jsx5, jsxs as jsxs3 } 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;
@@ -719,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;
@@ -766,8 +1099,8 @@ function ErrorRow({ error }) {
   `;
   const displayedStack = truncateStackForDisplay(error.stack);
   const showDocsLink = typeof error.docsUrl === "string" && error.docsUrl.length > 0;
-  return /* @__PURE__ */ jsxs3("div", { className: containerClass, "data-testid": "devtools-error-row", children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4("div", { className: containerClass, "data-testid": "devtools-error-row", children: [
+    /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
@@ -778,9 +1111,9 @@ function ErrorRow({ error }) {
         "aria-expanded": expanded,
         title: error.message,
         children: [
-          /* @__PURE__ */ jsx5("span", { className: iconClass, "aria-hidden": "true", children: typeIcon(error.type) }),
-          /* @__PURE__ */ jsx5("span", { className: msgClass, children: error.message }),
-          error.code && /* @__PURE__ */ jsx5(
+          /* @__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: {
@@ -794,8 +1127,8 @@ function ErrorRow({ error }) {
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsxs3("div", { className: detailsClass, children: [
-      showDocsLink && /* @__PURE__ */ jsx5("div", { style: { marginBottom: tokens.spacing.sm }, children: /* @__PURE__ */ jsx5(
+    expanded && /* @__PURE__ */ jsxs4("div", { className: detailsClass, children: [
+      showDocsLink && /* @__PURE__ */ jsx6("div", { style: { marginBottom: tokens.spacing.sm }, children: /* @__PURE__ */ jsx6(
         "a",
         {
           href: error.docsUrl,
@@ -805,7 +1138,7 @@ function ErrorRow({ error }) {
           children: "Open migration guide"
         }
       ) }),
-      displayedStack && /* @__PURE__ */ jsx5(
+      displayedStack && /* @__PURE__ */ jsx6(
         "pre",
         {
           style: {
@@ -829,11 +1162,11 @@ function ErrorRow({ error }) {
 }
 
 // src/devtools/components/Tabs/ErrorsTab.tsx
-import { jsx as jsx6, jsxs as jsxs4 } 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__ */ jsx6("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;
@@ -855,14 +1188,14 @@ function ErrorsTab() {
     font-size: ${tokens.font.sizeXs};
     &:hover { color: ${tokens.colors.text}; }
   `;
-  return /* @__PURE__ */ jsxs4("div", { "data-testid": "devtools-errors-tab", children: [
-    /* @__PURE__ */ jsxs4("div", { className: headerClass, children: [
-      /* @__PURE__ */ jsxs4("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__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -874,16 +1207,16 @@ function ErrorsTab() {
         }
       )
     ] }),
-    state.errors.map((err) => /* @__PURE__ */ jsx6(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 jsx7, jsxs as jsxs5 } 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) {
@@ -905,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};
@@ -931,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__ */ jsxs5("div", { className: rowClass, children: [
-      /* @__PURE__ */ jsx7("span", { className: keyClass, children: label }),
+    return /* @__PURE__ */ jsxs6("div", { className: rowClass, children: [
+      /* @__PURE__ */ jsx8("span", { className: keyClass, children: label }),
       ":",
       " ",
-      /* @__PURE__ */ jsx7("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__ */ jsxs5("div", { className: rowClass, children: [
-      /* @__PURE__ */ jsx7("span", { className: keyClass, children: label }),
+    return /* @__PURE__ */ jsxs6("div", { className: rowClass, children: [
+      /* @__PURE__ */ jsx8("span", { className: keyClass, children: label }),
       ":",
       " ",
-      /* @__PURE__ */ jsx7("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__ */ jsxs5("div", { className: rowClass, children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6("div", { className: rowClass, children: [
+    /* @__PURE__ */ jsxs6(
       "button",
       {
         type: "button",
@@ -960,15 +1293,15 @@ function JSONExplorer({
         },
         "aria-expanded": expanded,
         children: [
-          /* @__PURE__ */ jsx7("span", { children: expanded ? "\u25BE" : "\u25B8" }),
-          /* @__PURE__ */ jsx7("span", { className: keyClass, children: label }),
-          /* @__PURE__ */ jsx7("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__ */ jsxs5("div", { children: [
-      slice.map(([k, v]) => /* @__PURE__ */ jsx7(JSONExplorer, { label: k, value: v, depth: depth + 1 }, k)),
-      totalPages > 1 && /* @__PURE__ */ jsxs5(
+    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};`,
@@ -977,7 +1310,7 @@ function JSONExplorer({
             pageIndex + 1,
             "/",
             totalPages,
-            pageIndex > 0 && /* @__PURE__ */ jsx7(
+            pageIndex > 0 && /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -988,7 +1321,7 @@ function JSONExplorer({
                 children: "prev"
               }
             ),
-            pageIndex < totalPages - 1 && /* @__PURE__ */ jsx7(
+            pageIndex < totalPages - 1 && /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -1007,7 +1340,7 @@ function JSONExplorer({
 }
 
 // src/devtools/components/RequestRow.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function buildRequestRowStyles(styles, request) {
   return {
     container: styles.css`
@@ -1083,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;
@@ -1096,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__ */ jsxs6("div", { className: containerClass, "data-testid": "devtools-request-row", children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7("div", { className: containerClass, "data-testid": "devtools-request-row", children: [
+    /* @__PURE__ */ jsxs7(
       "button",
       {
         type: "button",
@@ -1108,19 +1441,19 @@ function RequestRow({ request }) {
         "aria-expanded": expanded,
         title: request.path,
         children: [
-          /* @__PURE__ */ jsx8("span", { className: methodBadge, children: request.method }),
-          /* @__PURE__ */ jsx8("span", { className: pathClass, children: request.path }),
-          /* @__PURE__ */ jsx8("span", { className: statusClass, children: displayStatus }),
-          /* @__PURE__ */ jsx8("span", { className: durClass, children: displayDuration }),
-          /* @__PURE__ */ jsx8("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__ */ jsxs6("div", { className: detailsClass, children: [
-      request.csrfWarn && /* @__PURE__ */ jsxs6("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__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "a",
           {
             href: request.csrfWarn.docsUrl,
@@ -1131,8 +1464,8 @@ function RequestRow({ request }) {
           }
         )
       ] }),
-      request.headers && /* @__PURE__ */ jsx8(JSONExplorer, { label: "headers", value: request.headers, defaultExpanded: false }),
-      request.bodyPreview !== void 0 && request.bodyPreview !== "" && /* @__PURE__ */ jsxs6(
+      request.headers && /* @__PURE__ */ jsx9(JSONExplorer, { label: "headers", value: request.headers, defaultExpanded: false }),
+      request.bodyPreview !== void 0 && request.bodyPreview !== "" && /* @__PURE__ */ jsxs7(
         "div",
         {
           style: {
@@ -1145,7 +1478,7 @@ function RequestRow({ request }) {
             "body",
             request.bodyTruncated ? ` (truncated, ${request.bodyLength} bytes)` : "",
             ":",
-            /* @__PURE__ */ jsx8("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 })
           ]
         }
       )
@@ -1154,11 +1487,11 @@ function RequestRow({ request }) {
 }
 
 // src/devtools/components/Tabs/RequestsTab.tsx
-import { jsx as jsx9, jsxs as jsxs7 } 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__ */ jsx9("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;
@@ -1180,14 +1513,14 @@ function RequestsTab() {
     font-size: ${tokens.font.sizeXs};
     &:hover { color: ${tokens.colors.text}; }
   `;
-  return /* @__PURE__ */ jsxs7("div", { "data-testid": "devtools-requests-tab", children: [
-    /* @__PURE__ */ jsxs7("div", { className: headerClass, children: [
-      /* @__PURE__ */ jsxs7("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__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
@@ -1199,16 +1532,16 @@ function RequestsTab() {
         }
       )
     ] }),
-    state.requests.map((req) => /* @__PURE__ */ jsx9(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 jsx10, jsxs as jsxs8 } 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__ */ jsx10("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;
@@ -1237,9 +1570,9 @@ function RoutesTab() {
       console.warn("[theo devtools] Editor not configured");
     });
   }
-  return /* @__PURE__ */ jsx10("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__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(
       "button",
       {
         type: "button",
@@ -1250,7 +1583,7 @@ function RoutesTab() {
         },
         title: `Open ${route.absoluteFilePath} in editor`,
         children: [
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "span",
             {
               style: {
@@ -1260,8 +1593,8 @@ function RoutesTab() {
               children: active ? "\u25B8" : " "
             }
           ),
-          /* @__PURE__ */ jsx10("span", { style: { flex: 1 }, children: route.path }),
-          /* @__PURE__ */ jsx10("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
@@ -1270,7 +1603,7 @@ function RoutesTab() {
 }
 
 // src/devtools/components/Tabs/SettingsTab.tsx
-import { jsx as jsx11, jsxs as jsxs9 } 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() {
@@ -1291,11 +1624,11 @@ function SettingsTab() {
     color: ${tokens.colors.text};
     font-size: ${tokens.font.sizeSm};
   `;
-  return /* @__PURE__ */ jsxs9("div", { "data-testid": "devtools-settings-tab", style: { padding: tokens.spacing.md }, children: [
-    /* @__PURE__ */ jsxs9("fieldset", { className: sectionClass, style: { border: 0, padding: 0, margin: 0 }, children: [
-      /* @__PURE__ */ jsx11("legend", { className: headingClass, children: "Position" }),
-      POSITIONS.map((p) => /* @__PURE__ */ jsxs9("label", { className: radioRowClass, children: [
-        /* @__PURE__ */ jsx11(
+  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",
@@ -1307,13 +1640,13 @@ function SettingsTab() {
             }
           }
         ),
-        /* @__PURE__ */ jsx11("span", { children: p })
+        /* @__PURE__ */ jsx12("span", { children: p })
       ] }, p))
     ] }),
-    /* @__PURE__ */ jsxs9("fieldset", { className: sectionClass, style: { border: 0, padding: 0, margin: 0 }, children: [
-      /* @__PURE__ */ jsx11("legend", { className: headingClass, children: "Theme" }),
-      THEMES.map((t) => /* @__PURE__ */ jsxs9("label", { className: radioRowClass, children: [
-        /* @__PURE__ */ jsx11(
+    /* @__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",
@@ -1325,18 +1658,19 @@ function SettingsTab() {
             }
           }
         ),
-        /* @__PURE__ */ jsx11("span", { children: t })
+        /* @__PURE__ */ jsx12("span", { children: t })
       ] }, t))
     ] })
   ] });
 }
 
 // src/devtools/components/Panel.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var TABS = [
   "requests",
   "routes",
   "agents",
+  "actions",
   "errors",
   "csrf-readiness",
   "settings"
@@ -1425,7 +1759,7 @@ function Panel() {
   const tabBtnClass = cls.tabBtn;
   const closeBtnClass = cls.closeBtn;
   const bodyClass = cls.body;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       role: "dialog",
@@ -1433,9 +1767,9 @@ function Panel() {
       "data-theo-devtools-panel": "",
       className: panelClass,
       children: [
-        /* @__PURE__ */ jsxs10("div", { className: headerClass, children: [
-          /* @__PURE__ */ jsxs10("div", { className: tabsClass, role: "tablist", children: [
-            /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsxs11("div", { className: headerClass, children: [
+          /* @__PURE__ */ jsxs11("div", { className: tabsClass, role: "tablist", children: [
+            /* @__PURE__ */ jsx13(
               "span",
               {
                 className: styles.css`
@@ -1445,10 +1779,10 @@ function Panel() {
               opacity: 0.9;
             `,
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx12(TheoLogo, { size: 16 })
+                children: /* @__PURE__ */ jsx13(TheoLogo, { size: 16 })
               }
             ),
-            TABS.map((t) => /* @__PURE__ */ jsx12(
+            TABS.map((t) => /* @__PURE__ */ jsx13(
               "button",
               {
                 type: "button",
@@ -1464,7 +1798,7 @@ function Panel() {
               t
             ))
           ] }),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -1477,13 +1811,14 @@ function Panel() {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs10("div", { className: bodyClass, "data-testid": "devtools-tab-body", children: [
-          state.activeTab === "requests" && /* @__PURE__ */ jsx12(RequestsTab, {}),
-          state.activeTab === "routes" && /* @__PURE__ */ jsx12(RoutesTab, {}),
-          state.activeTab === "agents" && /* @__PURE__ */ jsx12(AgentsTab, {}),
-          state.activeTab === "errors" && /* @__PURE__ */ jsx12(ErrorsTab, {}),
-          state.activeTab === "csrf-readiness" && /* @__PURE__ */ jsx12(CsrfReadinessTab, {}),
-          state.activeTab === "settings" && /* @__PURE__ */ jsx12(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, {})
         ] })
       ]
     }
@@ -1619,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;
@@ -1682,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",
@@ -1773,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":
@@ -1785,36 +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 "AGENT_RUN_ADD":
-      return { ...state, agentRuns: appendCapped(state.agentRuns, action.run) };
-    case "RESET_REQUESTS":
-      return { ...state, requests: [] };
-    case "RESET_ERRORS":
-      return { ...state, errors: [] };
-    case "RESET_AGENT_RUNS":
-      return { ...state, agentRuns: [] };
     default:
-      return state;
+      return reduceAppend(state, action) ?? reduceReset(state, action) ?? state;
   }
 }
 
@@ -1845,7 +2207,7 @@ function createStyles(shadowRoot) {
 }
 
 // src/devtools/Overlay.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function ActiveRouteTracker() {
   useActiveRoute();
   return null;
@@ -1856,7 +2218,7 @@ function ShortcutsTracker() {
 }
 function ThemeVars({ resolved }) {
   const css = `:host { color-scheme: ${resolved}; ${buildThemeCssVars(resolved)} }`;
-  return /* @__PURE__ */ jsx13("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(
@@ -1878,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(() => {
@@ -1888,17 +2252,17 @@ function Overlay({ shadowRoot }) {
       sub.unsubscribe();
     };
   }, []);
-  return /* @__PURE__ */ jsx13(DevtoolsContext.Provider, { value: { shadowRoot, state, dispatch, styles }, children: /* @__PURE__ */ jsxs11(ShadowPortal, { children: [
-    /* @__PURE__ */ jsx13(ThemeVars, { resolved: resolvedTheme }),
-    /* @__PURE__ */ jsx13(ActiveRouteTracker, {}),
-    /* @__PURE__ */ jsx13(ShortcutsTracker, {}),
-    /* @__PURE__ */ jsx13(Indicator, {}),
-    /* @__PURE__ */ jsx13(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 jsx14 } 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;
@@ -1925,7 +2289,7 @@ function mount() {
   shadowRoot.appendChild(reactRootHost);
   const root = createRoot(reactRootHost);
   root.render(
-    /* @__PURE__ */ jsx14(StrictMode, { children: /* @__PURE__ */ jsx14(Overlay, { shadowRoot }) })
+    /* @__PURE__ */ jsx15(StrictMode, { children: /* @__PURE__ */ jsx15(Overlay, { shadowRoot }) })
   );
 }
 if (typeof document !== "undefined") {