@guidekit/react 0.1.0-beta.1

package/dist/devtools.js

@@ -0,0 +1,574 @@
+import { GuideKitContext } from './chunk-4NUEGCBT.js';
+import { useContext, useState, useCallback, useSyncExternalStore, useRef, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var MAX_EVENT_LOG = 200;
+var TAB_LABELS = {
+  state: "State",
+  events: "Events",
+  sections: "Sections",
+  ratelimits: "Rate Limits"
+};
+var TAB_ORDER = ["state", "events", "sections", "ratelimits"];
+var S = {
+  container: {
+    position: "fixed",
+    top: 24,
+    right: 24,
+    zIndex: 2147483646,
+    fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace",
+    fontSize: 12,
+    lineHeight: 1.5,
+    color: "#e2e8f0",
+    pointerEvents: "auto"
+  },
+  toggle: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 12px",
+    border: "1px solid #334155",
+    borderRadius: 8,
+    background: "#1e293b",
+    color: "#94a3b8",
+    cursor: "pointer",
+    fontSize: 11,
+    fontFamily: "inherit",
+    whiteSpace: "nowrap"
+  },
+  panel: {
+    width: 420,
+    maxHeight: 520,
+    background: "#0f172a",
+    border: "1px solid #334155",
+    borderRadius: 10,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 20px 60px rgba(0,0,0,0.5)"
+  },
+  titleBar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "8px 12px",
+    background: "#1e293b",
+    borderBottom: "1px solid #334155",
+    flexShrink: 0
+  },
+  titleText: {
+    fontWeight: 700,
+    fontSize: 12,
+    color: "#e2e8f0",
+    margin: 0
+  },
+  closeBtn: {
+    background: "none",
+    border: "none",
+    color: "#64748b",
+    cursor: "pointer",
+    fontSize: 16,
+    lineHeight: 1,
+    padding: "0 4px",
+    fontFamily: "inherit"
+  },
+  tabBar: {
+    display: "flex",
+    borderBottom: "1px solid #334155",
+    background: "#1e293b",
+    flexShrink: 0
+  },
+  tab: (active) => ({
+    flex: 1,
+    padding: "6px 8px",
+    background: active ? "#0f172a" : "transparent",
+    color: active ? "#e2e8f0" : "#64748b",
+    border: "none",
+    borderBottom: active ? "2px solid #6366f1" : "2px solid transparent",
+    cursor: "pointer",
+    fontSize: 11,
+    fontFamily: "inherit",
+    fontWeight: active ? 600 : 400,
+    transition: "color 0.15s, background 0.15s"
+  }),
+  tabContent: {
+    flex: 1,
+    overflow: "auto",
+    padding: 12,
+    minHeight: 200,
+    maxHeight: 400
+  },
+  row: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "4px 0",
+    borderBottom: "1px solid #1e293b"
+  },
+  label: {
+    color: "#94a3b8",
+    fontSize: 11
+  },
+  value: {
+    color: "#e2e8f0",
+    fontSize: 11,
+    fontWeight: 600
+  },
+  badge: (color) => ({
+    display: "inline-block",
+    padding: "1px 6px",
+    borderRadius: 4,
+    fontSize: 10,
+    fontWeight: 600,
+    background: color,
+    color: "#fff"
+  }),
+  eventRow: {
+    padding: "3px 0",
+    borderBottom: "1px solid #1e293b",
+    wordBreak: "break-all"
+  },
+  eventTime: {
+    color: "#475569",
+    fontSize: 10,
+    marginRight: 6
+  },
+  eventName: {
+    color: "#818cf8",
+    fontSize: 11,
+    fontWeight: 600
+  },
+  eventData: {
+    color: "#64748b",
+    fontSize: 10,
+    marginLeft: 4,
+    display: "block",
+    whiteSpace: "pre-wrap",
+    maxHeight: 60,
+    overflow: "hidden"
+  },
+  sectionRow: {
+    padding: "4px 0",
+    borderBottom: "1px solid #1e293b"
+  },
+  sectionId: {
+    color: "#38bdf8",
+    fontSize: 11,
+    fontWeight: 600
+  },
+  sectionMeta: {
+    color: "#64748b",
+    fontSize: 10,
+    display: "flex",
+    gap: 8,
+    marginTop: 2
+  },
+  meter: {
+    height: 6,
+    borderRadius: 3,
+    background: "#1e293b",
+    overflow: "hidden",
+    marginTop: 4
+  },
+  meterFill: (pct, color) => ({
+    height: "100%",
+    width: `${Math.min(pct, 100)}%`,
+    background: color,
+    borderRadius: 3,
+    transition: "width 0.3s ease"
+  }),
+  emptyState: {
+    color: "#475569",
+    textAlign: "center",
+    padding: "24px 0",
+    fontSize: 11
+  },
+  clearBtn: {
+    background: "#1e293b",
+    border: "1px solid #334155",
+    color: "#94a3b8",
+    cursor: "pointer",
+    fontSize: 10,
+    padding: "2px 8px",
+    borderRadius: 4,
+    fontFamily: "inherit"
+  }
+};
+function statusColor(status) {
+  switch (status) {
+    case "idle":
+      return "#475569";
+    case "listening":
+      return "#22c55e";
+    case "processing":
+      return "#f59e0b";
+    case "speaking":
+      return "#6366f1";
+    case "error":
+      return "#ef4444";
+    default:
+      return "#475569";
+  }
+}
+function formatTime(ts) {
+  const d = new Date(ts);
+  const h = d.getHours().toString().padStart(2, "0");
+  const m = d.getMinutes().toString().padStart(2, "0");
+  const s = d.getSeconds().toString().padStart(2, "0");
+  const ms = d.getMilliseconds().toString().padStart(3, "0");
+  return `${h}:${m}:${s}.${ms}`;
+}
+function truncateJSON(data, maxLen = 120) {
+  try {
+    const json = JSON.stringify(data);
+    if (json.length > maxLen) return json.slice(0, maxLen) + "...";
+    return json;
+  } catch {
+    return String(data);
+  }
+}
+function StateTab({ core }) {
+  const subscribe = useCallback(
+    (listener) => core.subscribe(listener),
+    [core]
+  );
+  const getSnapshot = useCallback(() => core.getSnapshot(), [core]);
+  const store = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const agentStatus = store.status.agentState.status;
+  const isReady = store.status.isReady;
+  const isListening = store.voice.isListening;
+  const isSpeaking = store.voice.isSpeaking;
+  const hasVoice = core.hasVoice;
+  const quietMode = core.quietMode;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { style: S.row, children: [
+      /* @__PURE__ */ jsx("span", { style: S.label, children: "isReady" }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: S.badge(isReady ? "#22c55e" : "#ef4444"),
+          children: isReady ? "true" : "false"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: S.row, children: [
+      /* @__PURE__ */ jsx("span", { style: S.label, children: "agentState" }),
+      /* @__PURE__ */ jsx("span", { style: S.badge(statusColor(agentStatus)), children: agentStatus })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: S.row, children: [
+      /* @__PURE__ */ jsx("span", { style: S.label, children: "isListening" }),
+      /* @__PURE__ */ jsx("span", { style: S.value, children: String(isListening) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: S.row, children: [
+      /* @__PURE__ */ jsx("span", { style: S.label, children: "isSpeaking" }),
+      /* @__PURE__ */ jsx("span", { style: S.value, children: String(isSpeaking) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: S.row, children: [
+      /* @__PURE__ */ jsx("span", { style: S.label, children: "hasVoice" }),
+      /* @__PURE__ */ jsx("span", { style: S.value, children: String(hasVoice) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: S.row, children: [
+      /* @__PURE__ */ jsx("span", { style: S.label, children: "quietMode" }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: S.badge(quietMode ? "#f59e0b" : "#475569"),
+          children: quietMode ? "on" : "off"
+        }
+      )
+    ] }),
+    store.status.error && /* @__PURE__ */ jsxs("div", { style: { marginTop: 8 }, children: [
+      /* @__PURE__ */ jsx("div", { style: { ...S.label, marginBottom: 4 }, children: "Error" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            background: "#1e293b",
+            padding: 8,
+            borderRadius: 6,
+            color: "#fca5a5",
+            fontSize: 10,
+            whiteSpace: "pre-wrap",
+            maxHeight: 80,
+            overflow: "auto"
+          },
+          children: store.status.error.message
+        }
+      )
+    ] })
+  ] });
+}
+function EventsTab({ core }) {
+  const [events, setEvents] = useState([]);
+  const idRef = useRef(0);
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    const unsub = core.bus.onAny((data, eventName) => {
+      setEvents((prev) => {
+        const next = [
+          ...prev,
+          {
+            id: ++idRef.current,
+            timestamp: Date.now(),
+            name: eventName,
+            data
+          }
+        ];
+        if (next.length > MAX_EVENT_LOG) {
+          return next.slice(next.length - MAX_EVENT_LOG);
+        }
+        return next;
+      });
+    });
+    return unsub;
+  }, [core]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [events.length]);
+  const handleClear = useCallback(() => {
+    setEvents([]);
+    idRef.current = 0;
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: 8
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { style: S.label, children: [
+            events.length,
+            " events"
+          ] }),
+          /* @__PURE__ */ jsx("button", { style: S.clearBtn, onClick: handleClear, children: "Clear" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        style: { maxHeight: 340, overflow: "auto" },
+        children: events.length === 0 ? /* @__PURE__ */ jsx("div", { style: S.emptyState, children: "No events yet." }) : events.map((evt) => /* @__PURE__ */ jsxs("div", { style: S.eventRow, children: [
+          /* @__PURE__ */ jsx("span", { style: S.eventTime, children: formatTime(evt.timestamp) }),
+          /* @__PURE__ */ jsx("span", { style: S.eventName, children: evt.name }),
+          /* @__PURE__ */ jsx("span", { style: S.eventData, children: truncateJSON(evt.data) })
+        ] }, evt.id))
+      }
+    )
+  ] });
+}
+function SectionsTab({ core }) {
+  const [sections, setSections] = useState([]);
+  const subscribe = useCallback(
+    (listener) => core.subscribe(listener),
+    [core]
+  );
+  const getSnapshot = useCallback(
+    () => core.pageModel?.sections ?? [],
+    [core]
+  );
+  const liveSections = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  useEffect(() => {
+    setSections(liveSections);
+  }, [liveSections]);
+  useEffect(() => {
+    const unsub = core.bus.on("dom:scan-complete", () => {
+      setSections(core.pageModel?.sections ?? []);
+    });
+    return unsub;
+  }, [core]);
+  if (sections.length === 0) {
+    return /* @__PURE__ */ jsx("div", { style: S.emptyState, children: "No sections discovered." });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { style: { ...S.label, marginBottom: 8 }, children: [
+      sections.length,
+      " section",
+      sections.length !== 1 ? "s" : ""
+    ] }),
+    sections.map((sec) => /* @__PURE__ */ jsxs("div", { style: S.sectionRow, children: [
+      /* @__PURE__ */ jsx("div", { style: S.sectionId, children: sec.id }),
+      sec.label && /* @__PURE__ */ jsx("div", { style: { color: "#cbd5e1", fontSize: 11 }, children: sec.label }),
+      /* @__PURE__ */ jsxs("div", { style: S.sectionMeta, children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "score: ",
+          sec.score
+        ] }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "visible:",
+          " ",
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                color: sec.isVisible ? "#22c55e" : "#ef4444",
+                fontWeight: 600
+              },
+              children: sec.isVisible ? "yes" : "no"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "ratio: ",
+          Math.round(sec.visibilityRatio * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "depth: ",
+          sec.depth
+        ] })
+      ] })
+    ] }, sec.id))
+  ] });
+}
+function RateLimitsTab({ core }) {
+  const [rlState, setRlState] = useState(
+    core.rateLimiterState
+  );
+  useEffect(() => {
+    const id = setInterval(() => {
+      setRlState(core.rateLimiterState);
+    }, 1e3);
+    return () => clearInterval(id);
+  }, [core]);
+  const maxLLM = 10;
+  const maxSTT = 60;
+  const maxTTS = 5e4;
+  const llmPct = rlState.llmCallsInWindow / maxLLM * 100;
+  const sttPct = rlState.sttMinutesUsed / maxSTT * 100;
+  const ttsPct = rlState.ttsCharsUsed / maxTTS * 100;
+  const meterColor = (pct) => pct >= 90 ? "#ef4444" : pct >= 60 ? "#f59e0b" : "#22c55e";
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: S.row, children: [
+        /* @__PURE__ */ jsx("span", { style: S.label, children: "LLM calls (1 min window)" }),
+        /* @__PURE__ */ jsxs("span", { style: S.value, children: [
+          rlState.llmCallsInWindow,
+          " / ",
+          maxLLM
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: S.meter, children: /* @__PURE__ */ jsx("div", { style: S.meterFill(llmPct, meterColor(llmPct)) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: S.row, children: [
+        /* @__PURE__ */ jsx("span", { style: S.label, children: "STT minutes (session)" }),
+        /* @__PURE__ */ jsxs("span", { style: S.value, children: [
+          rlState.sttMinutesUsed.toFixed(2),
+          " / ",
+          maxSTT
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: S.meter, children: /* @__PURE__ */ jsx("div", { style: S.meterFill(sttPct, meterColor(sttPct)) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: S.row, children: [
+        /* @__PURE__ */ jsx("span", { style: S.label, children: "TTS chars (session)" }),
+        /* @__PURE__ */ jsxs("span", { style: S.value, children: [
+          rlState.ttsCharsUsed.toLocaleString(),
+          " / ",
+          maxTTS.toLocaleString()
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: S.meter, children: /* @__PURE__ */ jsx("div", { style: S.meterFill(ttsPct, meterColor(ttsPct)) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          ...S.label,
+          fontSize: 10,
+          marginTop: 8,
+          color: "#475569"
+        },
+        children: [
+          "Window started:",
+          " ",
+          rlState.llmWindowStart ? formatTime(rlState.llmWindowStart) : "N/A"
+        ]
+      }
+    )
+  ] });
+}
+function GuideKitDevTools(props) {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DevToolsInner, { core: props?.core });
+}
+function DevToolsInner({ core: coreProp }) {
+  const contextCore = useContext(GuideKitContext);
+  const core = coreProp ?? contextCore;
+  const [collapsed, setCollapsed] = useState(true);
+  const [activeTab, setActiveTab] = useState("state");
+  if (!core) {
+    return /* @__PURE__ */ jsx("div", { style: S.container, children: /* @__PURE__ */ jsx("div", { style: S.toggle, children: /* @__PURE__ */ jsx("span", { style: { color: "#ef4444", fontWeight: 600 }, children: "GuideKit DevTools: no core instance found" }) }) });
+  }
+  if (collapsed) {
+    return /* @__PURE__ */ jsx("div", { style: S.container, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        style: S.toggle,
+        onClick: () => setCollapsed(false),
+        title: "Open GuideKit DevTools",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                background: "#6366f1",
+                display: "inline-block",
+                flexShrink: 0
+              }
+            }
+          ),
+          "GuideKit DevTools"
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { style: S.container, children: /* @__PURE__ */ jsxs("div", { style: S.panel, children: [
+    /* @__PURE__ */ jsxs("div", { style: S.titleBar, children: [
+      /* @__PURE__ */ jsx("span", { style: S.titleText, children: "GuideKit DevTools" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          style: S.closeBtn,
+          onClick: () => setCollapsed(true),
+          title: "Close",
+          children: "x"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: S.tabBar, children: TAB_ORDER.map((id) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        style: S.tab(activeTab === id),
+        onClick: () => setActiveTab(id),
+        children: TAB_LABELS[id]
+      },
+      id
+    )) }),
+    /* @__PURE__ */ jsxs("div", { style: S.tabContent, children: [
+      activeTab === "state" && /* @__PURE__ */ jsx(StateTab, { core }),
+      activeTab === "events" && /* @__PURE__ */ jsx(EventsTab, { core }),
+      activeTab === "sections" && /* @__PURE__ */ jsx(SectionsTab, { core }),
+      activeTab === "ratelimits" && /* @__PURE__ */ jsx(RateLimitsTab, { core })
+    ] })
+  ] }) });
+}
+
+export { GuideKitDevTools };
+//# sourceMappingURL=devtools.js.map
+//# sourceMappingURL=devtools.js.map

package/dist/devtools.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/devtools.tsx"],"names":[],"mappings":"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","file":"devtools.js","sourcesContent":["// ---------------------------------------------------------------------------\n// @guidekit/react/devtools — Development-only DevTools panel\n// ---------------------------------------------------------------------------\n//\n// A collapsible, fixed-position panel that surfaces internal SDK state for\n// debugging: agent state, live event log, discovered page sections, and\n// rate-limiter counters.\n//\n// Usage:\n//   import { GuideKitDevTools } from '@guidekit/react/devtools';\n//   <GuideKitProvider ...>\n//     <App />\n//     {process.env.NODE_ENV === 'development' && <GuideKitDevTools />}\n//   </GuideKitProvider>\n// ---------------------------------------------------------------------------\n\nimport {\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  useCallback,\n  useSyncExternalStore,\n} from 'react';\nimport type { GuideKitCore } from '@guidekit/core';\nimport type { RateLimiterState, PageSection } from '@guidekit/core';\n\nimport { GuideKitContext } from './_context.js';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype TabId = 'state' | 'events' | 'sections' | 'ratelimits';\n\ninterface EventLogEntry {\n  id: number;\n  timestamp: number;\n  name: string;\n  data: unknown;\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst MAX_EVENT_LOG = 200;\n\nconst TAB_LABELS: Record<TabId, string> = {\n  state: 'State',\n  events: 'Events',\n  sections: 'Sections',\n  ratelimits: 'Rate Limits',\n};\n\nconst TAB_ORDER: TabId[] = ['state', 'events', 'sections', 'ratelimits'];\n\n// ---------------------------------------------------------------------------\n// Styles (inline — devtools live outside Shadow DOM)\n// ---------------------------------------------------------------------------\n\nconst S = {\n  container: {\n    position: 'fixed' as const,\n    top: 24,\n    right: 24,\n    zIndex: 2147483646,\n    fontFamily:\n      \"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace\",\n    fontSize: 12,\n    lineHeight: 1.5,\n    color: '#e2e8f0',\n    pointerEvents: 'auto' as const,\n  },\n\n  toggle: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 6,\n    padding: '6px 12px',\n    border: '1px solid #334155',\n    borderRadius: 8,\n    background: '#1e293b',\n    color: '#94a3b8',\n    cursor: 'pointer',\n    fontSize: 11,\n    fontFamily: 'inherit',\n    whiteSpace: 'nowrap' as const,\n  },\n\n  panel: {\n    width: 420,\n    maxHeight: 520,\n    background: '#0f172a',\n    border: '1px solid #334155',\n    borderRadius: 10,\n    overflow: 'hidden',\n    display: 'flex',\n    flexDirection: 'column' as const,\n    boxShadow: '0 20px 60px rgba(0,0,0,0.5)',\n  },\n\n  titleBar: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '8px 12px',\n    background: '#1e293b',\n    borderBottom: '1px solid #334155',\n    flexShrink: 0,\n  },\n\n  titleText: {\n    fontWeight: 700,\n    fontSize: 12,\n    color: '#e2e8f0',\n    margin: 0,\n  },\n\n  closeBtn: {\n    background: 'none',\n    border: 'none',\n    color: '#64748b',\n    cursor: 'pointer',\n    fontSize: 16,\n    lineHeight: 1,\n    padding: '0 4px',\n    fontFamily: 'inherit',\n  },\n\n  tabBar: {\n    display: 'flex',\n    borderBottom: '1px solid #334155',\n    background: '#1e293b',\n    flexShrink: 0,\n  },\n\n  tab: (active: boolean) => ({\n    flex: 1,\n    padding: '6px 8px',\n    background: active ? '#0f172a' : 'transparent',\n    color: active ? '#e2e8f0' : '#64748b',\n    border: 'none',\n    borderBottom: active ? '2px solid #6366f1' : '2px solid transparent',\n    cursor: 'pointer',\n    fontSize: 11,\n    fontFamily: 'inherit',\n    fontWeight: active ? 600 : 400,\n    transition: 'color 0.15s, background 0.15s',\n  }),\n\n  tabContent: {\n    flex: 1,\n    overflow: 'auto',\n    padding: 12,\n    minHeight: 200,\n    maxHeight: 400,\n  },\n\n  row: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    padding: '4px 0',\n    borderBottom: '1px solid #1e293b',\n  },\n\n  label: {\n    color: '#94a3b8',\n    fontSize: 11,\n  },\n\n  value: {\n    color: '#e2e8f0',\n    fontSize: 11,\n    fontWeight: 600,\n  },\n\n  badge: (color: string) => ({\n    display: 'inline-block',\n    padding: '1px 6px',\n    borderRadius: 4,\n    fontSize: 10,\n    fontWeight: 600,\n    background: color,\n    color: '#fff',\n  }),\n\n  eventRow: {\n    padding: '3px 0',\n    borderBottom: '1px solid #1e293b',\n    wordBreak: 'break-all' as const,\n  },\n\n  eventTime: {\n    color: '#475569',\n    fontSize: 10,\n    marginRight: 6,\n  },\n\n  eventName: {\n    color: '#818cf8',\n    fontSize: 11,\n    fontWeight: 600,\n  },\n\n  eventData: {\n    color: '#64748b',\n    fontSize: 10,\n    marginLeft: 4,\n    display: 'block',\n    whiteSpace: 'pre-wrap' as const,\n    maxHeight: 60,\n    overflow: 'hidden',\n  },\n\n  sectionRow: {\n    padding: '4px 0',\n    borderBottom: '1px solid #1e293b',\n  },\n\n  sectionId: {\n    color: '#38bdf8',\n    fontSize: 11,\n    fontWeight: 600,\n  },\n\n  sectionMeta: {\n    color: '#64748b',\n    fontSize: 10,\n    display: 'flex',\n    gap: 8,\n    marginTop: 2,\n  },\n\n  meter: {\n    height: 6,\n    borderRadius: 3,\n    background: '#1e293b',\n    overflow: 'hidden',\n    marginTop: 4,\n  },\n\n  meterFill: (pct: number, color: string) => ({\n    height: '100%',\n    width: `${Math.min(pct, 100)}%`,\n    background: color,\n    borderRadius: 3,\n    transition: 'width 0.3s ease',\n  }),\n\n  emptyState: {\n    color: '#475569',\n    textAlign: 'center' as const,\n    padding: '24px 0',\n    fontSize: 11,\n  },\n\n  clearBtn: {\n    background: '#1e293b',\n    border: '1px solid #334155',\n    color: '#94a3b8',\n    cursor: 'pointer',\n    fontSize: 10,\n    padding: '2px 8px',\n    borderRadius: 4,\n    fontFamily: 'inherit',\n  },\n} as const;\n\n// ---------------------------------------------------------------------------\n// Status badge color helper\n// ---------------------------------------------------------------------------\n\nfunction statusColor(status: string): string {\n  switch (status) {\n    case 'idle':\n      return '#475569';\n    case 'listening':\n      return '#22c55e';\n    case 'processing':\n      return '#f59e0b';\n    case 'speaking':\n      return '#6366f1';\n    case 'error':\n      return '#ef4444';\n    default:\n      return '#475569';\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Time formatter\n// ---------------------------------------------------------------------------\n\nfunction formatTime(ts: number): string {\n  const d = new Date(ts);\n  const h = d.getHours().toString().padStart(2, '0');\n  const m = d.getMinutes().toString().padStart(2, '0');\n  const s = d.getSeconds().toString().padStart(2, '0');\n  const ms = d.getMilliseconds().toString().padStart(3, '0');\n  return `${h}:${m}:${s}.${ms}`;\n}\n\n// ---------------------------------------------------------------------------\n// Truncated JSON renderer\n// ---------------------------------------------------------------------------\n\nfunction truncateJSON(data: unknown, maxLen = 120): string {\n  try {\n    const json = JSON.stringify(data);\n    if (json.length > maxLen) return json.slice(0, maxLen) + '...';\n    return json;\n  } catch {\n    return String(data);\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Tab: State\n// ---------------------------------------------------------------------------\n\nfunction StateTab({ core }: { core: GuideKitCore }) {\n  const subscribe = useCallback(\n    (listener: () => void) => core.subscribe(listener),\n    [core],\n  );\n  const getSnapshot = useCallback(() => core.getSnapshot(), [core]);\n  const store = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  const agentStatus = store.status.agentState.status;\n  const isReady = store.status.isReady;\n  const isListening = store.voice.isListening;\n  const isSpeaking = store.voice.isSpeaking;\n  const hasVoice = core.hasVoice;\n  const quietMode = core.quietMode;\n\n  return (\n    <div>\n      <div style={S.row}>\n        <span style={S.label}>isReady</span>\n        <span\n          style={S.badge(isReady ? '#22c55e' : '#ef4444')}\n        >\n          {isReady ? 'true' : 'false'}\n        </span>\n      </div>\n\n      <div style={S.row}>\n        <span style={S.label}>agentState</span>\n        <span style={S.badge(statusColor(agentStatus))}>{agentStatus}</span>\n      </div>\n\n      <div style={S.row}>\n        <span style={S.label}>isListening</span>\n        <span style={S.value}>{String(isListening)}</span>\n      </div>\n\n      <div style={S.row}>\n        <span style={S.label}>isSpeaking</span>\n        <span style={S.value}>{String(isSpeaking)}</span>\n      </div>\n\n      <div style={S.row}>\n        <span style={S.label}>hasVoice</span>\n        <span style={S.value}>{String(hasVoice)}</span>\n      </div>\n\n      <div style={S.row}>\n        <span style={S.label}>quietMode</span>\n        <span\n          style={S.badge(quietMode ? '#f59e0b' : '#475569')}\n        >\n          {quietMode ? 'on' : 'off'}\n        </span>\n      </div>\n\n      {store.status.error && (\n        <div style={{ marginTop: 8 }}>\n          <div style={{ ...S.label, marginBottom: 4 }}>Error</div>\n          <div\n            style={{\n              background: '#1e293b',\n              padding: 8,\n              borderRadius: 6,\n              color: '#fca5a5',\n              fontSize: 10,\n              whiteSpace: 'pre-wrap',\n              maxHeight: 80,\n              overflow: 'auto',\n            }}\n          >\n            {store.status.error.message}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Tab: Events\n// ---------------------------------------------------------------------------\n\nfunction EventsTab({ core }: { core: GuideKitCore }) {\n  const [events, setEvents] = useState<EventLogEntry[]>([]);\n  const idRef = useRef(0);\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    const unsub = core.bus.onAny((data, eventName) => {\n      setEvents((prev) => {\n        const next = [\n          ...prev,\n          {\n            id: ++idRef.current,\n            timestamp: Date.now(),\n            name: eventName,\n            data,\n          },\n        ];\n        if (next.length > MAX_EVENT_LOG) {\n          return next.slice(next.length - MAX_EVENT_LOG);\n        }\n        return next;\n      });\n    });\n    return unsub;\n  }, [core]);\n\n  // Auto-scroll to bottom\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (el) {\n      el.scrollTop = el.scrollHeight;\n    }\n  }, [events.length]);\n\n  const handleClear = useCallback(() => {\n    setEvents([]);\n    idRef.current = 0;\n  }, []);\n\n  return (\n    <div>\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          marginBottom: 8,\n        }}\n      >\n        <span style={S.label}>{events.length} events</span>\n        <button style={S.clearBtn} onClick={handleClear}>\n          Clear\n        </button>\n      </div>\n\n      <div\n        ref={scrollRef}\n        style={{ maxHeight: 340, overflow: 'auto' }}\n      >\n        {events.length === 0 ? (\n          <div style={S.emptyState}>No events yet.</div>\n        ) : (\n          events.map((evt) => (\n            <div key={evt.id} style={S.eventRow}>\n              <span style={S.eventTime}>{formatTime(evt.timestamp)}</span>\n              <span style={S.eventName}>{evt.name}</span>\n              <span style={S.eventData}>{truncateJSON(evt.data)}</span>\n            </div>\n          ))\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Tab: Sections\n// ---------------------------------------------------------------------------\n\nfunction SectionsTab({ core }: { core: GuideKitCore }) {\n  const [sections, setSections] = useState<PageSection[]>([]);\n\n  // Re-read pageModel whenever the store notifies\n  const subscribe = useCallback(\n    (listener: () => void) => core.subscribe(listener),\n    [core],\n  );\n  const getSnapshot = useCallback(\n    () => core.pageModel?.sections ?? [],\n    [core],\n  );\n  const liveSections = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  // Also listen for dom:scan-complete to catch page model refreshes\n  useEffect(() => {\n    setSections(liveSections);\n  }, [liveSections]);\n\n  useEffect(() => {\n    const unsub = core.bus.on('dom:scan-complete', () => {\n      setSections(core.pageModel?.sections ?? []);\n    });\n    return unsub;\n  }, [core]);\n\n  if (sections.length === 0) {\n    return <div style={S.emptyState}>No sections discovered.</div>;\n  }\n\n  return (\n    <div>\n      <div style={{ ...S.label, marginBottom: 8 }}>\n        {sections.length} section{sections.length !== 1 ? 's' : ''}\n      </div>\n      {sections.map((sec) => (\n        <div key={sec.id} style={S.sectionRow}>\n          <div style={S.sectionId}>{sec.id}</div>\n          {sec.label && (\n            <div style={{ color: '#cbd5e1', fontSize: 11 }}>{sec.label}</div>\n          )}\n          <div style={S.sectionMeta}>\n            <span>score: {sec.score}</span>\n            <span>\n              visible:{' '}\n              <span\n                style={{\n                  color: sec.isVisible ? '#22c55e' : '#ef4444',\n                  fontWeight: 600,\n                }}\n              >\n                {sec.isVisible ? 'yes' : 'no'}\n              </span>\n            </span>\n            <span>\n              ratio: {Math.round(sec.visibilityRatio * 100)}%\n            </span>\n            <span>depth: {sec.depth}</span>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Tab: Rate Limits\n// ---------------------------------------------------------------------------\n\nfunction RateLimitsTab({ core }: { core: GuideKitCore }) {\n  const [rlState, setRlState] = useState<RateLimiterState>(\n    core.rateLimiterState,\n  );\n\n  // Refresh every second to keep the display live\n  useEffect(() => {\n    const id = setInterval(() => {\n      setRlState(core.rateLimiterState);\n    }, 1000);\n    return () => clearInterval(id);\n  }, [core]);\n\n  // Default limits for percentage calculations\n  const maxLLM = 10;\n  const maxSTT = 60;\n  const maxTTS = 50_000;\n\n  const llmPct = (rlState.llmCallsInWindow / maxLLM) * 100;\n  const sttPct = (rlState.sttMinutesUsed / maxSTT) * 100;\n  const ttsPct = (rlState.ttsCharsUsed / maxTTS) * 100;\n\n  const meterColor = (pct: number) =>\n    pct >= 90 ? '#ef4444' : pct >= 60 ? '#f59e0b' : '#22c55e';\n\n  return (\n    <div>\n      {/* LLM calls */}\n      <div style={{ marginBottom: 12 }}>\n        <div style={S.row}>\n          <span style={S.label}>LLM calls (1 min window)</span>\n          <span style={S.value}>\n            {rlState.llmCallsInWindow} / {maxLLM}\n          </span>\n        </div>\n        <div style={S.meter}>\n          <div style={S.meterFill(llmPct, meterColor(llmPct))} />\n        </div>\n      </div>\n\n      {/* STT minutes */}\n      <div style={{ marginBottom: 12 }}>\n        <div style={S.row}>\n          <span style={S.label}>STT minutes (session)</span>\n          <span style={S.value}>\n            {rlState.sttMinutesUsed.toFixed(2)} / {maxSTT}\n          </span>\n        </div>\n        <div style={S.meter}>\n          <div style={S.meterFill(sttPct, meterColor(sttPct))} />\n        </div>\n      </div>\n\n      {/* TTS characters */}\n      <div style={{ marginBottom: 12 }}>\n        <div style={S.row}>\n          <span style={S.label}>TTS chars (session)</span>\n          <span style={S.value}>\n            {rlState.ttsCharsUsed.toLocaleString()} / {maxTTS.toLocaleString()}\n          </span>\n        </div>\n        <div style={S.meter}>\n          <div style={S.meterFill(ttsPct, meterColor(ttsPct))} />\n        </div>\n      </div>\n\n      <div\n        style={{\n          ...S.label,\n          fontSize: 10,\n          marginTop: 8,\n          color: '#475569',\n        }}\n      >\n        Window started:{' '}\n        {rlState.llmWindowStart\n          ? formatTime(rlState.llmWindowStart)\n          : 'N/A'}\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Main Component: GuideKitDevTools\n// ---------------------------------------------------------------------------\n\nexport interface GuideKitDevToolsProps {\n  /** Pass a GuideKitCore instance directly. If omitted, reads from context. */\n  core?: GuideKitCore;\n}\n\nexport function GuideKitDevTools(props?: GuideKitDevToolsProps) {\n  // SSR guard\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  return <DevToolsInner core={props?.core} />;\n}\n\n/**\n * Inner component separated so that the SSR guard at the top level is a\n * plain null return without hooks (avoids React hooks-after-early-return\n * warnings).\n */\nfunction DevToolsInner({ core: coreProp }: { core?: GuideKitCore }) {\n  const contextCore = useContext(GuideKitContext);\n  const core = coreProp ?? contextCore;\n\n  const [collapsed, setCollapsed] = useState(true);\n  const [activeTab, setActiveTab] = useState<TabId>('state');\n\n  if (!core) {\n    return (\n      <div style={S.container}>\n        <div style={S.toggle}>\n          <span style={{ color: '#ef4444', fontWeight: 600 }}>\n            GuideKit DevTools: no core instance found\n          </span>\n        </div>\n      </div>\n    );\n  }\n\n  if (collapsed) {\n    return (\n      <div style={S.container}>\n        <button\n          style={S.toggle}\n          onClick={() => setCollapsed(false)}\n          title=\"Open GuideKit DevTools\"\n        >\n          <span\n            style={{\n              width: 8,\n              height: 8,\n              borderRadius: '50%',\n              background: '#6366f1',\n              display: 'inline-block',\n              flexShrink: 0,\n            }}\n          />\n          GuideKit DevTools\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div style={S.container}>\n      <div style={S.panel}>\n        {/* Title bar */}\n        <div style={S.titleBar}>\n          <span style={S.titleText}>GuideKit DevTools</span>\n          <button\n            style={S.closeBtn}\n            onClick={() => setCollapsed(true)}\n            title=\"Close\"\n          >\n            x\n          </button>\n        </div>\n\n        {/* Tab bar */}\n        <div style={S.tabBar}>\n          {TAB_ORDER.map((id) => (\n            <button\n              key={id}\n              style={S.tab(activeTab === id)}\n              onClick={() => setActiveTab(id)}\n            >\n              {TAB_LABELS[id]}\n            </button>\n          ))}\n        </div>\n\n        {/* Tab content */}\n        <div style={S.tabContent}>\n          {activeTab === 'state' && <StateTab core={core} />}\n          {activeTab === 'events' && <EventsTab core={core} />}\n          {activeTab === 'sections' && <SectionsTab core={core} />}\n          {activeTab === 'ratelimits' && <RateLimitsTab core={core} />}\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}