theokit 0.2.4 → 0.4.0

package/dist/devtools/entry.js

@@ -1,4 +1,5 @@
 import {
+  CHANNEL_AGENT_STREAM,
   CHANNEL_CSRF_WARN,
   CHANNEL_ERROR,
   CHANNEL_MANIFEST,
@@ -8,16 +9,95 @@ import {
   STORAGE_VERSION,
   dispatcher,
   initialState
-} from "../chunk-KJVEJILQ.js";
+} from "../chunk-5PU65T5W.js";
 import "../chunk-DGUM43GV.js";
 
-// src/devtools/entry.tsx
+// src/devtools/dom/entry.tsx
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
-// src/devtools/Overlay.tsx
+// src/devtools/dom/Overlay.tsx
 import { useEffect as useEffect6, useInsertionEffect, useMemo, useReducer } from "react";
 
+// src/devtools/bridge/hmr-bridge.ts
+function getHot() {
+  try {
+    const hot = import.meta.hot;
+    if (hot) return hot;
+  } catch {
+  }
+  const g = globalThis.__theoViteHotForTests;
+  return g ?? null;
+}
+function wrap(label, fn) {
+  return (data) => {
+    try {
+      fn(data);
+    } catch (err) {
+      console.error(`[theo devtools] ${label} callback failed`, err);
+    }
+  };
+}
+function subscribeToServerEvents(dispatcher2) {
+  const hot = getHot();
+  if (!hot) {
+    return {
+      unsubscribe() {
+      }
+    };
+  }
+  const reqHandler = wrap("request", (req) => {
+    dispatcher2.onRequest(req);
+  });
+  const errHandler = wrap("error", (err) => {
+    dispatcher2.onError(err);
+  });
+  const csrfHandler = wrap("csrf.warn", (p) => {
+    dispatcher2.onCsrfWarn(p);
+  });
+  const manifestHandler = wrap("manifest", (m) => {
+    dispatcher2.onManifestUpdated(m);
+  });
+  const routeMatchedHandler = wrap(
+    "route-matched",
+    ({ path, chain }) => {
+      dispatcher2.onRouteMatched(path, chain);
+    }
+  );
+  const agentStreamHandler = wrap("agent-stream", (event) => {
+    dispatcher2.onAgentStreamEvent(event);
+  });
+  hot.on(CHANNEL_REQUEST, reqHandler);
+  hot.on(CHANNEL_ERROR, errHandler);
+  hot.on(CHANNEL_CSRF_WARN, csrfHandler);
+  hot.on(CHANNEL_MANIFEST, manifestHandler);
+  hot.on(CHANNEL_ROUTE_MATCHED, routeMatchedHandler);
+  hot.on(CHANNEL_AGENT_STREAM, agentStreamHandler);
+  try {
+    hot.send?.("theo:devtools:request-manifest", null);
+  } catch {
+  }
+  return {
+    unsubscribe() {
+      hot.off?.(CHANNEL_REQUEST, reqHandler);
+      hot.off?.(CHANNEL_ERROR, errHandler);
+      hot.off?.(CHANNEL_CSRF_WARN, csrfHandler);
+      hot.off?.(CHANNEL_MANIFEST, manifestHandler);
+      hot.off?.(CHANNEL_ROUTE_MATCHED, routeMatchedHandler);
+    }
+  };
+}
+
+// src/devtools/bridge/install-global.ts
+function noopCleanup() {
+}
+function installDispatcherGlobal() {
+  if (typeof window === "undefined") return noopCleanup;
+  const w = window;
+  w.__theoDevtoolsDispatcher = dispatcher;
+  return noopCleanup;
+}
+
 // src/devtools/hooks/useDevtoolsContext.ts
 import { createContext, useContext } from "react";
 var DevtoolsContext = createContext(null);
@@ -447,18 +527,7 @@ function Indicator() {
 // 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
+// src/devtools/format/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);
@@ -480,6 +549,17 @@ function maskPiiFields(value) {
   return out;
 }
 
+// src/devtools/state/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/components/Tabs/ActionsTab.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function formatTime(ts) {
@@ -711,7 +791,7 @@ function ActionDetailError({ error }) {
 }
 
 // src/devtools/components/Tabs/AgentsTab.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, 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" });
@@ -818,6 +898,29 @@ function AgentsTab() {
         /* @__PURE__ */ jsx4("td", { children: formatCost(run.costUsd) }),
         /* @__PURE__ */ jsx4("td", { children: run.status })
       ] }, run.id)) })
+    ] }),
+    state.agentStreamEvents.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2("div", { className: headerClass, style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ jsxs2("span", { children: [
+          "\u{1F534} Live Stream (",
+          state.agentStreamEvents.length,
+          " events)"
+        ] }),
+        /* @__PURE__ */ jsx4("button", { type: "button", className: clearBtn, onClick: () => dispatch({ type: "RESET_AGENT_STREAM" }), children: "clear" })
+      ] }),
+      /* @__PURE__ */ jsx4("div", { style: { maxHeight: 200, overflow: "auto", fontSize: tokens.font.sizeXs, fontFamily: "monospace" }, children: state.agentStreamEvents.slice(-30).map((e, i) => /* @__PURE__ */ jsxs2("div", { style: { padding: "2px 4px", borderBottom: `1px solid ${tokens.colors.border}` }, children: [
+        /* @__PURE__ */ jsx4("span", { style: { color: tokens.colors.textDim }, children: new Date(e.timestamp).toLocaleTimeString() }),
+        " ",
+        /* @__PURE__ */ jsx4("span", { style: { color: e.type === "error" ? "#c92a2a" : tokens.colors.accent }, children: e.type }),
+        e.content && /* @__PURE__ */ jsxs2("span", { style: { color: tokens.colors.text }, children: [
+          " ",
+          e.content.substring(0, 80)
+        ] }),
+        e.toolName && /* @__PURE__ */ jsxs2("span", { style: { color: tokens.colors.textMuted }, children: [
+          " \u2192 ",
+          e.toolName
+        ] })
+      ] }, i)) })
     ] })
   ] });
 }
@@ -825,7 +928,7 @@ function AgentsTab() {
 // src/devtools/components/Tabs/CsrfReadinessTab.tsx
 import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2 } from "react";
 
-// src/devtools/csrf-readiness-classify.ts
+// src/devtools/format/csrf-readiness-classify.ts
 var NETWORK_ERROR_PATTERN = /failed to fetch|networkerror|network request failed/i;
 function classifyCsrfReadinessError(input) {
   if (input.kind === "http") {
@@ -1570,36 +1673,58 @@ function RoutesTab() {
       console.warn("[theo devtools] Editor not configured");
     });
   }
-  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__ */ jsxs9(
-      "button",
+  return /* @__PURE__ */ jsxs9("div", { "data-testid": "devtools-routes-tab", children: [
+    /* @__PURE__ */ jsx11(
+      "a",
       {
-        type: "button",
-        className: rowClass,
-        "data-active": active,
-        onClick: () => {
-          openInEditor(route.absoluteFilePath);
+        href: "/__theo/openapi/docs",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: styles.css`
+          display: inline-block;
+          margin-bottom: 8px;
+          padding: 4px 10px;
+          font-size: ${tokens.font.sizeSm};
+          color: ${tokens.colors.accent};
+          border: 1px solid ${tokens.colors.accent};
+          border-radius: 4px;
+          text-decoration: none;
+          &:hover { background: ${tokens.colors.accent}22; }
+        `,
+        children: "\u{1F4D6} View API Docs"
+      }
+    ),
+    state.routeManifest.routes.map((route) => {
+      const active = state.activeRoutePath === route.path || state.activeChain.includes(route.absoluteFilePath);
+      return /* @__PURE__ */ jsxs9(
+        "button",
+        {
+          type: "button",
+          className: rowClass,
+          "data-active": active,
+          onClick: () => {
+            openInEditor(route.absoluteFilePath);
+          },
+          title: `Open ${route.absoluteFilePath} in editor`,
+          children: [
+            /* @__PURE__ */ jsx11(
+              "span",
+              {
+                style: {
+                  color: active ? tokens.colors.accent : tokens.colors.textMuted,
+                  minWidth: 12
+                },
+                children: active ? "\u25B8" : " "
+              }
+            ),
+            /* @__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("/") })
+          ]
         },
-        title: `Open ${route.absoluteFilePath} in editor`,
-        children: [
-          /* @__PURE__ */ jsx11(
-            "span",
-            {
-              style: {
-                color: active ? tokens.colors.accent : tokens.colors.textMuted,
-                minWidth: 12
-              },
-              children: active ? "\u25B8" : " "
-            }
-          ),
-          /* @__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
-    );
-  }) });
+        route.absoluteFilePath
+      );
+    })
+  ] });
 }
 
 // src/devtools/components/Tabs/SettingsTab.tsx
@@ -1825,71 +1950,6 @@ function Panel() {
   );
 }
 
-// src/devtools/hmr-bridge.ts
-function getHot() {
-  try {
-    const hot = import.meta.hot;
-    if (hot) return hot;
-  } catch {
-  }
-  const g = globalThis.__theoViteHotForTests;
-  return g ?? null;
-}
-function wrap(label, fn) {
-  return (data) => {
-    try {
-      fn(data);
-    } catch (err) {
-      console.error(`[theo devtools] ${label} callback failed`, err);
-    }
-  };
-}
-function subscribeToServerEvents(dispatcher2) {
-  const hot = getHot();
-  if (!hot) {
-    return {
-      unsubscribe() {
-      }
-    };
-  }
-  const reqHandler = wrap("request", (req) => {
-    dispatcher2.onRequest(req);
-  });
-  const errHandler = wrap("error", (err) => {
-    dispatcher2.onError(err);
-  });
-  const csrfHandler = wrap("csrf.warn", (p) => {
-    dispatcher2.onCsrfWarn(p);
-  });
-  const manifestHandler = wrap("manifest", (m) => {
-    dispatcher2.onManifestUpdated(m);
-  });
-  const routeMatchedHandler = wrap(
-    "route-matched",
-    ({ path, chain }) => {
-      dispatcher2.onRouteMatched(path, chain);
-    }
-  );
-  hot.on(CHANNEL_REQUEST, reqHandler);
-  hot.on(CHANNEL_ERROR, errHandler);
-  hot.on(CHANNEL_CSRF_WARN, csrfHandler);
-  hot.on(CHANNEL_MANIFEST, manifestHandler);
-  hot.on(CHANNEL_ROUTE_MATCHED, routeMatchedHandler);
-  try {
-    hot.send?.("theo:devtools:request-manifest", null);
-  } catch {
-  }
-  return {
-    unsubscribe() {
-      hot.off?.(CHANNEL_REQUEST, reqHandler);
-      hot.off?.(CHANNEL_ERROR, errHandler);
-      hot.off?.(CHANNEL_CSRF_WARN, csrfHandler);
-      hot.off?.(CHANNEL_MANIFEST, manifestHandler);
-      hot.off?.(CHANNEL_ROUTE_MATCHED, routeMatchedHandler);
-    }
-  };
-}
-
 // src/devtools/hooks/useActiveRoute.ts
 import { useEffect as useEffect3 } from "react";
 var LOCATION_CHANGE_EVENT = "theo:devtools:locationchange";
@@ -2017,17 +2077,7 @@ 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
+// src/devtools/state/persistence.ts
 var STORAGE_KEYS = {
   version: "theo-devtools-storage-version",
   position: "theo-devtools-position",
@@ -2114,7 +2164,7 @@ function writeToStorage(s) {
   writeKey(STORAGE_KEYS.visible, s.visible);
 }
 
-// src/devtools/reducer.ts
+// src/devtools/state/reducer.ts
 function appendCapped(arr, item, cap = RING_BUFFER_CAP) {
   return [item, ...arr].slice(0, cap);
 }
@@ -2128,6 +2178,8 @@ function reduceAppend(state, action) {
       return { ...state, agentRuns: appendCapped(state.agentRuns, action.run) };
     case "ACTION_CALL_ADD":
       return { ...state, actionCalls: appendCapped(state.actionCalls, action.record) };
+    case "AGENT_STREAM_EVENT":
+      return { ...state, agentStreamEvents: appendCapped(state.agentStreamEvents, action.event) };
     default:
       return null;
   }
@@ -2142,6 +2194,8 @@ function reduceReset(state, action) {
       return { ...state, agentRuns: [] };
     case "RESET_ACTION_CALLS":
       return { ...state, actionCalls: [] };
+    case "RESET_AGENT_STREAM":
+      return { ...state, agentStreamEvents: [] };
     default:
       return null;
   }
@@ -2180,13 +2234,6 @@ function devtoolsReducer(state, action) {
   }
 }
 
-// src/devtools/shadow-portal.tsx
-import { createPortal } from "react-dom";
-function ShadowPortal({ children }) {
-  const { shadowRoot } = useDevtoolsContext();
-  return createPortal(children, shadowRoot);
-}
-
 // src/devtools/styles/styles.ts
 import { css as gooberCss, setup as gooberSetup } from "goober";
 var _initialized = null;
@@ -2206,7 +2253,14 @@ function createStyles(shadowRoot) {
   return { css: bound };
 }
 
-// src/devtools/Overlay.tsx
+// src/devtools/dom/shadow-portal.tsx
+import { createPortal } from "react-dom";
+function ShadowPortal({ children }) {
+  const { shadowRoot } = useDevtoolsContext();
+  return createPortal(children, shadowRoot);
+}
+
+// src/devtools/dom/Overlay.tsx
 import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function ActiveRouteTracker() {
   useActiveRoute();
@@ -2261,7 +2315,7 @@ function Overlay({ shadowRoot }) {
   ] }) });
 }
 
-// src/devtools/entry.tsx
+// src/devtools/dom/entry.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 var PORTAL_TAG = "theo-devtools-portal";
 function definePortalElement() {