theokit 0.1.0-alpha.8 → 0.2.0

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-OK2PJOLK.js";
 import "../chunk-DGUM43GV.js";
 
 // src/devtools/entry.tsx
@@ -433,9 +444,121 @@ function Indicator() {
   );
 }
 
+// src/devtools/components/Tabs/AgentsTab.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 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__ */ jsxs("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" }),
+      " 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__ */ jsxs("div", { "data-testid": "devtools-agents-tab", children: [
+    /* @__PURE__ */ jsxs("div", { className: headerClass, children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        state.agentRuns.length,
+        " run",
+        state.agentRuns.length === 1 ? "" : "s",
+        " \xB7 ",
+        "tokens ",
+        totalIn,
+        "/",
+        totalOut,
+        " \xB7 ",
+        formatCost(totalCost),
+        " total"
+      ] }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: clearBtn,
+          onClick: () => {
+            dispatch({ type: "RESET_AGENT_RUNS" });
+          },
+          children: "clear"
+        }
+      )
+    ] }),
+    /* @__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__ */ 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: [
+          run.tokensInput,
+          "/",
+          run.tokensOutput
+        ] }),
+        /* @__PURE__ */ jsx3("td", { children: formatCost(run.costUsd) }),
+        /* @__PURE__ */ jsx3("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 jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function buildTabStyles(styles) {
   return {
     container: styles.css`
@@ -477,13 +600,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__ */ jsxs2("div", { className: rowClass, children: [
+    /* @__PURE__ */ jsx4("span", { style: { color: tokens.colors.accent }, children: route.method }),
+    /* @__PURE__ */ jsxs2("span", { children: [
       route.path,
-      /* @__PURE__ */ jsx3("span", { style: { color: tokens.colors.textMuted, marginLeft: tokens.spacing.sm }, children: route.reason })
+      /* @__PURE__ */ jsx4("span", { style: { color: tokens.colors.textMuted, marginLeft: tokens.spacing.sm }, children: route.reason })
     ] }),
-    /* @__PURE__ */ jsxs("span", { style: { color: tokens.colors.textMuted }, children: [
+    /* @__PURE__ */ jsxs2("span", { style: { color: tokens.colors.textMuted }, children: [
       "\xD7",
       String(route.count)
     ] })
@@ -529,24 +652,24 @@ 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: [
+    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__ */ jsx3("code", { children: "csrfReadinessStore" }),
+        /* @__PURE__ */ jsx4("code", { children: "csrfReadinessStore" }),
         " in the api-middleware options to enable this tab."
       ] })
     ] });
   }
   if (data === null) {
-    return /* @__PURE__ */ jsx3("div", { className: cls.container, "data-testid": "devtools-csrf-readiness-loading", children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx4("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__ */ 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(
         "button",
         {
           type: "button",
@@ -559,13 +682,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__ */ 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}`))
   ] });
 }
 
 // src/devtools/components/ErrorRow.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var STACK_DISPLAY_LIMIT = 4096;
 function truncateStackForDisplay(stack, limit = STACK_DISPLAY_LIMIT) {
   if (!stack) return null;
@@ -643,8 +766,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__ */ jsxs3("div", { className: containerClass, "data-testid": "devtools-error-row", children: [
+    /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
@@ -655,9 +778,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__ */ jsx5("span", { className: iconClass, "aria-hidden": "true", children: typeIcon(error.type) }),
+          /* @__PURE__ */ jsx5("span", { className: msgClass, children: error.message }),
+          error.code && /* @__PURE__ */ jsx5(
             "span",
             {
               style: {
@@ -671,8 +794,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__ */ jsxs3("div", { className: detailsClass, children: [
+      showDocsLink && /* @__PURE__ */ jsx5("div", { style: { marginBottom: tokens.spacing.sm }, children: /* @__PURE__ */ jsx5(
         "a",
         {
           href: error.docsUrl,
@@ -682,7 +805,7 @@ function ErrorRow({ error }) {
           children: "Open migration guide"
         }
       ) }),
-      displayedStack && /* @__PURE__ */ jsx4(
+      displayedStack && /* @__PURE__ */ jsx5(
         "pre",
         {
           style: {
@@ -706,11 +829,11 @@ function ErrorRow({ error }) {
 }
 
 // src/devtools/components/Tabs/ErrorsTab.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } 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__ */ 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." });
   }
   const headerClass = styles.css`
     display: flex;
@@ -732,14 +855,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__ */ jsxs4("div", { "data-testid": "devtools-errors-tab", children: [
+    /* @__PURE__ */ jsxs4("div", { className: headerClass, children: [
+      /* @__PURE__ */ jsxs4("span", { children: [
         state.errors.length,
         " error",
         state.errors.length === 1 ? "" : "s"
       ] }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -751,7 +874,7 @@ function ErrorsTab() {
         }
       )
     ] }),
-    state.errors.map((err) => /* @__PURE__ */ jsx5(ErrorRow, { error: err }, err.id))
+    state.errors.map((err) => /* @__PURE__ */ jsx6(ErrorRow, { error: err }, err.id))
   ] });
 }
 
@@ -760,7 +883,7 @@ import { useState as useState4 } 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 { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var PAGE_SIZE = 100;
 var MAX_STRING_DISPLAY = 256;
 function describe(value) {
@@ -808,26 +931,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__ */ jsxs5("div", { className: rowClass, children: [
+      /* @__PURE__ */ jsx7("span", { className: keyClass, children: label }),
       ":",
       " ",
-      /* @__PURE__ */ jsx6("span", { className: valClass, children: describe(value) })
+      /* @__PURE__ */ jsx7("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__ */ jsxs5("div", { className: rowClass, children: [
+      /* @__PURE__ */ jsx7("span", { className: keyClass, children: label }),
       ":",
       " ",
-      /* @__PURE__ */ jsx6("span", { className: valClass, children: Array.isArray(value) ? "[]" : "{}" })
+      /* @__PURE__ */ jsx7("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__ */ jsxs5("div", { className: rowClass, children: [
+    /* @__PURE__ */ jsxs5(
       "button",
       {
         type: "button",
@@ -837,15 +960,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__ */ jsx7("span", { children: expanded ? "\u25BE" : "\u25B8" }),
+          /* @__PURE__ */ jsx7("span", { className: keyClass, children: label }),
+          /* @__PURE__ */ jsx7("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__ */ jsxs5("div", { children: [
+      slice.map(([k, v]) => /* @__PURE__ */ jsx7(JSONExplorer, { label: k, value: v, depth: depth + 1 }, k)),
+      totalPages > 1 && /* @__PURE__ */ jsxs5(
         "div",
         {
           className: styles.css`padding-left: ${(depth + 1) * 12}px; color: ${tokens.colors.textMuted}; font-size: ${tokens.font.sizeXs};`,
@@ -854,7 +977,7 @@ function JSONExplorer({
             pageIndex + 1,
             "/",
             totalPages,
-            pageIndex > 0 && /* @__PURE__ */ jsx6(
+            pageIndex > 0 && /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -865,7 +988,7 @@ function JSONExplorer({
                 children: "prev"
               }
             ),
-            pageIndex < totalPages - 1 && /* @__PURE__ */ jsx6(
+            pageIndex < totalPages - 1 && /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -884,7 +1007,7 @@ function JSONExplorer({
 }
 
 // src/devtools/components/RequestRow.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function buildRequestRowStyles(styles, request) {
   return {
     container: styles.css`
@@ -973,8 +1096,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__ */ jsxs6("div", { className: containerClass, "data-testid": "devtools-request-row", children: [
+    /* @__PURE__ */ jsxs6(
       "button",
       {
         type: "button",
@@ -985,19 +1108,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__ */ 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) })
         ]
       }
     ),
-    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__ */ jsxs6("div", { className: detailsClass, children: [
+      request.csrfWarn && /* @__PURE__ */ jsxs6("div", { style: { color: tokens.colors.error.csrf, marginBottom: tokens.spacing.sm }, children: [
         "CSRF warn:",
         " ",
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "a",
           {
             href: request.csrfWarn.docsUrl,
@@ -1008,8 +1131,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__ */ jsx8(JSONExplorer, { label: "headers", value: request.headers, defaultExpanded: false }),
+      request.bodyPreview !== void 0 && request.bodyPreview !== "" && /* @__PURE__ */ jsxs6(
         "div",
         {
           style: {
@@ -1022,7 +1145,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__ */ jsx8("pre", { style: { marginTop: 4, whiteSpace: "pre-wrap", wordBreak: "break-all" }, children: request.bodyPreview })
           ]
         }
       )
@@ -1031,11 +1154,11 @@ function RequestRow({ request }) {
 }
 
 // src/devtools/components/Tabs/RequestsTab.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } 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__ */ 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." });
   }
   const headerClass = styles.css`
     display: flex;
@@ -1057,14 +1180,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__ */ jsxs7("div", { "data-testid": "devtools-requests-tab", children: [
+    /* @__PURE__ */ jsxs7("div", { className: headerClass, children: [
+      /* @__PURE__ */ jsxs7("span", { children: [
         state.requests.length,
         " request",
         state.requests.length === 1 ? "" : "s"
       ] }),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
@@ -1076,16 +1199,16 @@ function RequestsTab() {
         }
       )
     ] }),
-    state.requests.map((req) => /* @__PURE__ */ jsx8(RequestRow, { request: req }, req.id))
+    state.requests.map((req) => /* @__PURE__ */ jsx9(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 jsx10, jsxs as jsxs8 } 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__ */ jsx10("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 +1237,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__ */ jsx10("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__ */ jsxs8(
       "button",
       {
         type: "button",
@@ -1127,7 +1250,7 @@ function RoutesTab() {
         },
         title: `Open ${route.absoluteFilePath} in editor`,
         children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             "span",
             {
               style: {
@@ -1137,8 +1260,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__ */ 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("/") })
         ]
       },
       route.absoluteFilePath
@@ -1147,7 +1270,7 @@ function RoutesTab() {
 }
 
 // src/devtools/components/Tabs/SettingsTab.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right"];
 var THEMES = ["light", "dark", "system"];
 function SettingsTab() {
@@ -1168,11 +1291,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__ */ 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(
           "input",
           {
             type: "radio",
@@ -1184,13 +1307,13 @@ function SettingsTab() {
             }
           }
         ),
-        /* @__PURE__ */ jsx10("span", { children: p })
+        /* @__PURE__ */ jsx11("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__ */ 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(
           "input",
           {
             type: "radio",
@@ -1202,15 +1325,22 @@ function SettingsTab() {
             }
           }
         ),
-        /* @__PURE__ */ jsx10("span", { children: t })
+        /* @__PURE__ */ jsx11("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 jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var TABS = [
+  "requests",
+  "routes",
+  "agents",
+  "errors",
+  "csrf-readiness",
+  "settings"
+];
 function buildPanelStyles(styles, vertical, horizontal, verticalOffset) {
   return {
     panel: styles.css`
@@ -1295,7 +1425,7 @@ function Panel() {
   const tabBtnClass = cls.tabBtn;
   const closeBtnClass = cls.closeBtn;
   const bodyClass = cls.body;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       role: "dialog",
@@ -1303,9 +1433,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__ */ jsxs10("div", { className: headerClass, children: [
+          /* @__PURE__ */ jsxs10("div", { className: tabsClass, role: "tablist", children: [
+            /* @__PURE__ */ jsx12(
               "span",
               {
                 className: styles.css`
@@ -1315,10 +1445,10 @@ function Panel() {
               opacity: 0.9;
             `,
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx11(TheoLogo, { size: 16 })
+                children: /* @__PURE__ */ jsx12(TheoLogo, { size: 16 })
               }
             ),
-            TABS.map((t) => /* @__PURE__ */ jsx11(
+            TABS.map((t) => /* @__PURE__ */ jsx12(
               "button",
               {
                 type: "button",
@@ -1334,7 +1464,7 @@ function Panel() {
               t
             ))
           ] }),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
@@ -1347,107 +1477,19 @@ 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__ */ 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, {})
         ] })
       ]
     }
   );
 }
 
-// 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 {
@@ -1763,10 +1805,14 @@ function devtoolsReducer(state, action) {
       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;
   }
@@ -1799,7 +1845,7 @@ function createStyles(shadowRoot) {
 }
 
 // src/devtools/Overlay.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function ActiveRouteTracker() {
   useActiveRoute();
   return null;
@@ -1810,7 +1856,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__ */ jsx13("style", { "data-theo-devtools-theme": resolved, children: css });
 }
 function Overlay({ shadowRoot }) {
   const [state, dispatch] = useReducer(
@@ -1842,17 +1888,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__ */ 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, {})
   ] }) });
 }
 
 // src/devtools/entry.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var PORTAL_TAG = "theo-devtools-portal";
 function definePortalElement() {
   if (typeof customElements === "undefined") return;
@@ -1879,7 +1925,7 @@ function mount() {
   shadowRoot.appendChild(reactRootHost);
   const root = createRoot(reactRootHost);
   root.render(
-    /* @__PURE__ */ jsx13(StrictMode, { children: /* @__PURE__ */ jsx13(Overlay, { shadowRoot }) })
+    /* @__PURE__ */ jsx14(StrictMode, { children: /* @__PURE__ */ jsx14(Overlay, { shadowRoot }) })
   );
 }
 if (typeof document !== "undefined") {