react-detective 0.0.0-stage → 0.1.0

package/dist/client.js

@@ -0,0 +1,2028 @@
+// src/client/fiber.ts
+function readLiveData(el, componentName) {
+  const fiberKey = Object.keys(el).find((k) => k.startsWith("__reactFiber$"));
+  let fiber = fiberKey ? el[fiberKey] : null;
+  while (fiber) {
+    if (typeof fiber.type !== "string" && fiberName(fiber) === componentName) {
+      const current = currentFiber(fiber);
+      const owner = current._debugOwner && typeof current._debugOwner.type !== "string" ? fiberName(current._debugOwner) : void 0;
+      return { props: serialize(stripChildren(current.memoizedProps)), state: readHookState(current), contexts: readContexts(current), hooks: readHooks(current), owner };
+    }
+    fiber = fiber.return;
+  }
+  return {};
+}
+function currentFiber(fiber) {
+  const alt = fiber.alternate;
+  if (!alt) return fiber;
+  let top = fiber;
+  while (top.return) top = top.return;
+  const root = top.stateNode?.current;
+  if (!root) return fiber;
+  const stack = [root];
+  while (stack.length) {
+    const node = stack.pop();
+    if (node === fiber) return fiber;
+    if (node === alt) return alt;
+    if (node.sibling) stack.push(node.sibling);
+    if (node.child) stack.push(node.child);
+  }
+  return fiber;
+}
+function fiberName(fiber) {
+  const t = fiber.type;
+  if (!t) return;
+  if (typeof t === "function") return t.displayName || t.name;
+  return t.displayName || t.render?.displayName || t.render?.name || t.type?.displayName || t.type?.name;
+}
+function stripChildren(props2) {
+  if (!props2 || typeof props2 !== "object") return props2;
+  const { children, ...rest } = props2;
+  return children === void 0 ? rest : { ...rest, children: "[children]" };
+}
+function readContexts(fiber) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  let dep = fiber.dependencies?.firstContext;
+  let guard = 0;
+  while (dep && guard++ < 50) {
+    if (!seen.has(dep.context)) {
+      seen.add(dep.context);
+      out.push(serialize(dep.memoizedValue));
+    }
+    dep = dep.next;
+  }
+  return out.length ? out : void 0;
+}
+function readHooks(fiber) {
+  if (fiber.tag === 1) return void 0;
+  const out = [];
+  let hook = fiber.memoizedState;
+  let guard = 0;
+  while (hook && guard++ < 100) {
+    out.push({ isState: !!hook.queue && "lastRenderedState" in hook.queue, stored: hook.memoizedState });
+    hook = hook.next;
+  }
+  return out.length ? out : void 0;
+}
+function readHookState(fiber) {
+  if (fiber.tag === 1) return fiber.memoizedState ? [serialize(fiber.memoizedState)] : void 0;
+  const out = [];
+  let hook = fiber.memoizedState;
+  let guard = 0;
+  while (hook && guard++ < 50) {
+    if (hook.queue && "lastRenderedState" in hook.queue) out.push(serialize(hook.memoizedState));
+    hook = hook.next;
+  }
+  return out.length ? out : void 0;
+}
+function serialize(value, depth = 0, seen = /* @__PURE__ */ new WeakSet()) {
+  if (value === null || value === void 0) return value;
+  const type = typeof value;
+  if (type === "string") return value.length > 300 ? value.slice(0, 300) + "\u2026" : value;
+  if (type === "number" || type === "boolean") return value;
+  if (type === "bigint") return `${value}n`;
+  if (type === "symbol") return String(value);
+  if (type === "function") return `[Function ${value.name || "anonymous"}]`;
+  const obj = value;
+  if (obj.$$typeof) return `[React element${obj.type ? ` <${typeof obj.type === "string" ? obj.type : obj.type.displayName || obj.type.name || "?"}>` : ""}]`;
+  if (typeof Element !== "undefined" && obj instanceof Element) return `[DOM <${obj.tagName.toLowerCase()}>]`;
+  if (obj instanceof Date) return obj.toISOString();
+  if (seen.has(obj)) return "[Circular]";
+  if (depth >= 5) return Array.isArray(obj) ? `[Array(${obj.length})]` : "[Object]";
+  seen.add(obj);
+  if (Array.isArray(obj)) {
+    const items = obj.slice(0, 10).map((v) => serialize(v, depth + 1, seen));
+    if (obj.length > 10) items.push(`\u2026 ${obj.length - 10} more`);
+    return items;
+  }
+  if (obj instanceof Map) return { "[Map]": serialize(Object.fromEntries([...obj.entries()].slice(0, 10)), depth + 1, seen) };
+  if (obj instanceof Set) return { "[Set]": serialize([...obj].slice(0, 10), depth + 1, seen) };
+  const out = {};
+  const keys = Object.keys(obj);
+  for (const k of keys.slice(0, 25)) out[k] = serialize(obj[k], depth + 1, seen);
+  if (keys.length > 25) out["\u2026"] = `${keys.length - 25} more keys`;
+  return out;
+}
+
+// src/client/markdown.ts
+var FILE_REF = /^([\w@.\-/[\]()]+\.(?:[cm]?[jt]sx?|css|scss|json|md))(?::(\d+))?(?::(\d+))?$/;
+var esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+function inline(text) {
+  const codes = [];
+  const withSlots = text.replace(/`([^`]+)`/g, (_, code2) => {
+    const m = code2.match(FILE_REF);
+    codes.push(
+      m ? `<a class="src" data-file="${esc(m[1])}" data-line="${m[2] ?? 1}" data-col="${m[3] ?? 1}"><code>${esc(code2)}</code></a>` : `<code>${esc(code2)}</code>`
+    );
+    return `\0${codes.length - 1}\0`;
+  });
+  return esc(withSlots).replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/(^|[^*\w])\*(?!\s)(.+?)\*(?!\w)/g, "$1<em>$2</em>").replace(/\[([^\]]+)\]\((https?:[^)\s]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>').replace(/\u0000(\d+)\u0000/g, (_, i) => codes[Number(i)]);
+}
+function renderMarkdown(md) {
+  const lines = md.replace(/\r\n/g, "\n").split("\n");
+  const out = [];
+  let list = null;
+  let para = [];
+  const flushPara = () => {
+    if (para.length) out.push(`<p>${inline(para.join(" "))}</p>`);
+    para = [];
+  };
+  const closeList = () => {
+    if (list) out.push(`</${list}>`);
+    list = null;
+  };
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const fence = line.match(/^```(\w*)/);
+    if (fence) {
+      flushPara();
+      closeList();
+      const body = [];
+      while (++i < lines.length && !lines[i].startsWith("```")) body.push(lines[i]);
+      out.push(`<pre><code>${esc(body.join("\n"))}</code></pre>`);
+      continue;
+    }
+    const heading = line.match(/^(#{1,4})\s+(.*)/);
+    if (heading) {
+      flushPara();
+      closeList();
+      const level = Math.min(heading[1].length + 1, 5);
+      out.push(`<h${level}>${inline(heading[2])}</h${level}>`);
+      continue;
+    }
+    const item = line.match(/^\s*(?:([-*+])|(\d+)[.)])\s+(.*)/);
+    if (item) {
+      flushPara();
+      const kind = item[1] ? "ul" : "ol";
+      if (list !== kind) {
+        closeList();
+        out.push(`<${kind}>`);
+        list = kind;
+      }
+      out.push(`<li>${inline(item[3])}</li>`);
+      continue;
+    }
+    if (!line.trim()) {
+      flushPara();
+      closeList();
+      continue;
+    }
+    if (list && /^\s{2,}/.test(line)) {
+      out[out.length - 1] = out[out.length - 1].replace(/<\/li>$/, ` ${inline(line.trim())}</li>`);
+      continue;
+    }
+    closeList();
+    para.push(line.trim());
+  }
+  flushPara();
+  closeList();
+  return out.join("\n");
+}
+
+// src/client/evaluate.ts
+var code = (text) => `[Code ${text.trim()}]`;
+var FUNCTION = "[Function anonymous]";
+function evaluate(text, known) {
+  const src = text.trim();
+  let i = 0;
+  let resolved = false;
+  class Bail extends Error {
+  }
+  const bail = () => {
+    throw new Bail();
+  };
+  const ws = () => {
+    while (i < src.length && /\s/.test(src[i])) i++;
+  };
+  const peek = () => src[i];
+  const eat = (c) => {
+    ws();
+    if (src[i] !== c) bail();
+    i++;
+  };
+  const skipString = () => {
+    const quote = src[i++];
+    while (i < src.length && src[i] !== quote) {
+      if (src[i] === "\\") i += 2;
+      else if (quote === "`" && src[i] === "$" && src[i + 1] === "{") {
+        i += 2;
+        skipTo("}");
+        i++;
+      } else i++;
+    }
+    i++;
+  };
+  const skipTo = (stop = "") => {
+    let depth = 0;
+    while (i < src.length) {
+      const c = src[i];
+      if (c === '"' || c === "'" || c === "`") {
+        skipString();
+        continue;
+      }
+      if (depth === 0 && (c === stop || !stop && ",)]}".includes(c))) return;
+      if ("([{".includes(c)) depth++;
+      else if (")]}".includes(c)) depth--;
+      i++;
+    }
+  };
+  const expression = () => {
+    ws();
+    const start = i;
+    if (/^(async\s+)?(\([^()]*\)|[\w$]+)\s*=>|^(async\s+)?function\b/.test(src.slice(i))) {
+      skipTo();
+      return FUNCTION;
+    }
+    const resolvedBefore = resolved;
+    try {
+      const value2 = primary();
+      ws();
+      if (i < src.length && !",)]}".includes(peek())) bail();
+      return value2;
+    } catch (e) {
+      if (!(e instanceof Bail)) throw e;
+      resolved = resolvedBefore;
+      i = start;
+      skipTo();
+      return code(src.slice(start, i));
+    }
+  };
+  const primary = () => {
+    ws();
+    const c = peek();
+    if (c === '"' || c === "'") return stringLiteral();
+    if (c === "`") return template();
+    if (c === "[") return array();
+    if (c === "{") return object();
+    if (c === "(") {
+      i++;
+      const inner = expression();
+      eat(")");
+      return postfix(inner);
+    }
+    const num = src.slice(i).match(/^-?(\d[\d_]*\.?\d*(e[+-]?\d+)?|\.\d+)/i);
+    if (num) {
+      i += num[0].length;
+      resolved = true;
+      return Number(num[0].replace(/_/g, ""));
+    }
+    const id = src.slice(i).match(/^[A-Za-z_$][\w$]*/);
+    if (!id) return bail();
+    i += id[0].length;
+    const literals = { true: true, false: false, null: null, undefined: void 0 };
+    if (id[0] in literals) {
+      resolved = true;
+      return literals[id[0]];
+    }
+    if (!known.has(id[0])) return bail();
+    resolved = true;
+    return postfix(known.get(id[0]));
+  };
+  const postfix = (value2) => {
+    for (; ; ) {
+      ws();
+      const optional = src.startsWith("?.", i);
+      if (optional) i += 2;
+      if (peek() === "[") {
+        i++;
+        const key = expression();
+        eat("]");
+        if (typeof key !== "string" && typeof key !== "number") return bail();
+        value2 = member(value2, key, optional);
+      } else if (peek() === "(") return bail();
+      else if (optional || peek() === "." && src[i + 1] !== ".") {
+        if (!optional) i++;
+        ws();
+        const name = src.slice(i).match(/^[A-Za-z_$][\w$]*/);
+        if (!name) return bail();
+        i += name[0].length;
+        value2 = member(value2, name[0], optional);
+      } else return value2;
+    }
+  };
+  const member = (value2, key, optional) => {
+    if (value2 === null || value2 === void 0) return optional ? void 0 : bail();
+    if (Array.isArray(value2) && key === "length") return value2.length;
+    if (typeof value2 === "string" && key === "length") return value2.length;
+    if (typeof value2 !== "object" || !(key in value2)) return bail();
+    return value2[key];
+  };
+  const stringLiteral = () => {
+    const quote = src[i++];
+    let out = "";
+    while (i < src.length && src[i] !== quote) {
+      if (src[i] === "\\") {
+        const next = src[i + 1];
+        out += next === "n" ? "\n" : next === "t" ? "	" : next;
+        i += 2;
+      } else out += src[i++];
+    }
+    i++;
+    resolved = true;
+    return out;
+  };
+  const template = () => {
+    i++;
+    let out = "";
+    while (i < src.length && src[i] !== "`") {
+      if (src[i] === "\\") {
+        out += src[i + 1];
+        i += 2;
+      } else if (src[i] === "$" && src[i + 1] === "{") {
+        i += 2;
+        const part = expression();
+        if (typeof part === "string" && part.startsWith("[Code ")) bail();
+        out += typeof part === "object" && part !== null ? JSON.stringify(part) : String(part);
+        eat("}");
+      } else out += src[i++];
+    }
+    i++;
+    resolved = true;
+    return out;
+  };
+  const array = () => {
+    i++;
+    const out = [];
+    for (; ; ) {
+      ws();
+      if (peek() === "]") break;
+      if (src.startsWith("...", i)) {
+        i += 3;
+        const spread = expression();
+        if (Array.isArray(spread)) out.push(...spread);
+        else out.push(typeof spread === "string" && spread.startsWith("[Code ") ? code(`...${spread.slice(6, -1)}`) : bail());
+      } else out.push(expression());
+      ws();
+      if (peek() === ",") i++;
+      else break;
+    }
+    eat("]");
+    return out;
+  };
+  const object = () => {
+    i++;
+    const out = {};
+    for (; ; ) {
+      ws();
+      if (peek() === "}") break;
+      if (src.startsWith("...", i)) {
+        i += 3;
+        const spread = expression();
+        if (spread && typeof spread === "object" && !Array.isArray(spread)) Object.assign(out, spread);
+        else out["\u2026"] = typeof spread === "string" && spread.startsWith("[Code ") ? code(`...${spread.slice(6, -1)}`) : spread;
+      } else {
+        const keyStart = i;
+        let key;
+        if (peek() === '"' || peek() === "'") key = stringLiteral();
+        else if (peek() === "[") {
+          skipTo(":");
+          key = src.slice(keyStart, i).trim();
+        } else {
+          const name = src.slice(i).match(/^[A-Za-z_$][\w$]*|^\d+/);
+          if (!name) return bail();
+          key = name[0];
+          i += key.length;
+        }
+        ws();
+        if (peek() === ":") {
+          i++;
+          out[key] = expression();
+        } else if (peek() === "(") {
+          skipTo();
+          out[key] = FUNCTION;
+        } else {
+          out[key] = known.has(key) ? (resolved = true, known.get(key)) : code(key);
+        }
+      }
+      ws();
+      if (peek() === ",") i++;
+      else break;
+    }
+    eat("}");
+    return out;
+  };
+  const value = expression();
+  return { value, resolved };
+}
+
+// src/client/value.ts
+var span = (cls, text) => `<span class="${cls}">${esc(text)}</span>`;
+function special(s) {
+  let m = s.match(/^\[Code (.*)\]$/s);
+  if (m) return span("v-code", m[1].length > 40 ? `${m[1].slice(0, 39)}\u2026` : m[1]);
+  m = s.match(/^\[Function (.*)\]$/);
+  if (m) return span("v-fn", `\u0192 ${m[1] === "anonymous" ? "" : m[1]}()`);
+  m = s.match(/^\[React element <(.+)>\]$/);
+  if (m) return span("v-el", `<${m[1]} />`);
+  if (/^\[React element\]$/.test(s)) return span("v-el", "<element />");
+  if (/^\[(children|Circular|Object|Array\(\d+\)|DOM <[^>]+>)\]$/.test(s)) return span("v-meta", s.slice(1, -1));
+  return null;
+}
+function preview(v, depth = 0) {
+  if (v === null) return span("v-null", "null");
+  if (v === void 0) return span("v-null", "undefined");
+  if (typeof v === "boolean") return span("v-bool", String(v));
+  if (typeof v === "number") return span("v-num", String(v));
+  if (typeof v === "string") {
+    const s = special(v);
+    if (s) return s;
+    return span("v-str", `"${v.length > 40 ? v.slice(0, 39) + "\u2026" : v}"`);
+  }
+  if (Array.isArray(v)) {
+    if (depth > 0) return span("v-meta", `Array(${v.length})`);
+    const shown = v.slice(0, 3).map((x) => preview(x, depth + 1));
+    return `<span class="v-meta">(${v.length})</span> [${shown.join(", ")}${v.length > 3 ? ", \u2026" : ""}]`;
+  }
+  if (typeof v === "object") {
+    const entries = Object.entries(v);
+    if (depth > 0) return span("v-meta", entries.length ? "{\u2026}" : "{}");
+    const shown = entries.slice(0, 3).map(([k, x]) => `${span("v-key", k)}: ${preview(x, depth + 1)}`);
+    return `{ ${shown.join(", ")}${entries.length > 3 ? `, ${span("v-meta", `+${entries.length - 3}`)}` : ""} }`;
+  }
+  return span("v-meta", String(v));
+}
+function isExpandable(v) {
+  return v !== null && typeof v === "object" && Object.keys(v).length > 0;
+}
+function tree(v, depth = 0) {
+  const entries = Array.isArray(v) ? v.map((x, i) => [String(i), x]) : Object.entries(v);
+  return `<div class="vt">${entries.map(([k, x]) => {
+    const row = `<span class="vt-tw"></span><span class="v-key">${esc(k)}</span><span class="vt-val">${preview(x)}</span>`;
+    return isExpandable(x) && depth < 8 ? `<details class="vt-node"><summary class="vt-row">${row}</summary>${tree(x, depth + 1)}</details>` : `<div class="vt-row">${row}</div>`;
+  }).join("")}</div>`;
+}
+function valueBox(v, label) {
+  const expandable = isExpandable(v);
+  return `<div class="val ${expandable ? "expandable" : ""}" ${expandable ? 'title="Click to expand"' : ""}>
+    <div class="val-line">
+      ${label ? `<span class="val-label">${esc(label)}</span>` : ""}
+      <span class="val-preview">${preview(v)}</span>
+      ${expandable ? '<span class="val-chevron">\u25B8</span>' : ""}
+    </div>
+    ${expandable ? `<div class="val-tree">${tree(v)}</div>` : ""}
+  </div>`;
+}
+
+// src/client/card.ts
+var svg = (body) => `<svg viewBox="0 0 24 24" aria-hidden="true">${body}</svg>`;
+var ICONS = {
+  // Braces: a value the component holds.
+  state: svg(`<path d="M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1"/>`),
+  // A chain link: a reference that's kept between renders.
+  ref: svg(`<path d="M10 13.5a4.5 4.5 0 0 0 6.4.4l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2"/><path d="M14 10.5a4.5 4.5 0 0 0-6.4-.4l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2"/>`),
+  // Broadcast: provided from somewhere above.
+  context: svg(`<circle cx="12" cy="12" r="2" fill="currentColor"/><path d="M8 8a5.7 5.7 0 0 0 0 8M16 8a5.7 5.7 0 0 1 0 8M5 5a10 10 0 0 0 0 14M19 5a10 10 0 0 1 0 14"/>`),
+  // A cube: a packaged, reusable piece of logic.
+  hook: svg(`<path d="M12 2.5 3.5 7v10l8.5 4.5 8.5-4.5V7z"/><path d="M3.5 7 12 11.5 20.5 7M12 11.5v10"/>`),
+  derived: "x",
+  function: "\u0192",
+  // A bolt, drawn rather than the ⚡ emoji, which renders in its own colours.
+  effect: svg(`<path d="M13 2.5 4.5 13.5H12l-1 8 8.5-11H12z"/>`),
+  render: "&lt;&gt;",
+  // A padlock: fixed, defined outside the component.
+  constant: svg(`<rect x="4.5" y="11" width="15" height="10" rx="2"/><path d="M8 11V7.5a4 4 0 0 1 8 0V11"/>`),
+  other: "\u2022"
+};
+var KINDS = {
+  state: { icon: ICONS.state, label: "state (useState)" },
+  ref: { icon: ICONS.ref, label: "ref (useRef)" },
+  context: { icon: ICONS.context, label: "context (useContext)" },
+  store: { icon: ICONS.context, label: "external store (useSyncExternalStore)", tag: "store" },
+  hook: { icon: ICONS.hook, label: "custom hook" },
+  derived: { icon: ICONS.derived, label: "computed during render" },
+  memo: { icon: ICONS.derived, label: "memoized value (useMemo)", tag: "useMemo" },
+  callback: { icon: ICONS.function, label: "memoized callback (useCallback)", tag: "useCallback" },
+  function: { icon: ICONS.function, label: "function" },
+  effect: { icon: ICONS.effect, label: "effect (useEffect)" },
+  render: { icon: ICONS.render, label: "rendered output" },
+  constant: { icon: ICONS.constant, label: "constant" }
+};
+var USUAL_HOOK = { state: "useState", ref: "useRef", context: "useContext", store: "useSyncExternalStore", effect: "useEffect" };
+var HOOK_LABELS = {
+  useReducer: "state updated by a reducer (useReducer)",
+  useTransition: "whether a transition is pending (useTransition)",
+  useOptimistic: "state shown optimistically while an action runs (useOptimistic)",
+  useActionState: "state of a form action (useActionState)",
+  useFormStatus: "status of the enclosing form (useFormStatus)",
+  useDeferredValue: "a value that lags behind during urgent updates (useDeferredValue)",
+  useId: "a unique id, stable across renders (useId)",
+  use: "context (use)",
+  useLayoutEffect: "effect that runs before paint (useLayoutEffect)",
+  useInsertionEffect: "effect that runs before layout effects (useInsertionEffect)"
+};
+var GROUPS = [
+  { kinds: ["state"], title: "State", hint: "type", about: "useState, plus other hooks that hold a value (tagged): useReducer, useTransition, useOptimistic, useActionState", cls: "state" },
+  { kinds: ["ref"], title: "Refs", hint: "type", about: "useRef, and useImperativeHandle: what a parent's ref to this component sees", cls: "ref" },
+  { kinds: ["context", "store"], title: "Subscriptions", hint: "returns", about: "Values read from outside the component that re-render it when they change: context from a provider above it (useContext, or use, tagged), or an external store (useSyncExternalStore, tagged store)", cls: "context" },
+  { kinds: ["hook"], title: "Hooks", hint: "signature", about: "Custom hooks it calls; ones from a package are tagged with it", cls: "hook" },
+  { kinds: ["derived", "memo"], title: "Computed values", hint: "type", about: "Worked out on each render, or kept by a hook (tagged): useMemo, useDeferredValue, useId", cls: "derived" },
+  { kinds: ["function", "callback"], title: "Functions", hint: "signature", about: "Handlers and helpers (useCallback ones are tagged)", cls: "function" },
+  { kinds: ["effect"], title: "Effects", hint: "timing", about: "useEffect (useLayoutEffect and useInsertionEffect are tagged), each with when it runs: only on mount, after every render, or on mount and when its dependencies change", cls: "effect" },
+  { kinds: ["render"], title: "Renders", hint: "shown when", about: "Parts of the returned JSX", cls: "render" },
+  { kinds: ["constant"], title: "Constants", hint: "type", about: "Defined outside the component", cls: "constant" }
+];
+function renderCard(card, ctx) {
+  card = { ...card, outline: flattenSelf(card.outline, ctx.component) };
+  const values = liveStateValues(card, ctx.live, ctx.slots);
+  return [overview(card), props(card, ctx.live), outline(card, ctx, values), usedIn(card, ctx.live), history(card)].join("");
+}
+function settled(v) {
+  if (v === null || typeof v !== "object" || !("status" in v) || !("then" in v)) return v;
+  const p = v;
+  return p.status === "fulfilled" ? p.value : p.status === "rejected" ? p.reason : v;
+}
+function liveStateValues(card, live, slots) {
+  const map = /* @__PURE__ */ new Map();
+  const add = (item, v) => {
+    if (!item) return;
+    if (!map.has(item)) map.set(item, []);
+    map.get(item).push(v);
+  };
+  const base = (name) => name.replace(/\(.*$/, "").trim();
+  const hookItem = (hook) => card.outline.find((o) => (o.kind === "hook" || o.kind === "context") && base(o.name) === hook);
+  const spread = (parent, key, name, value) => {
+    const given = (parent?.children ?? []).filter((c) => c.reads !== void 0);
+    const own = (child2, v) => {
+      if (child2.kind !== "function") add(child2, { value: v, name: child2.name, fromHook: false });
+    };
+    const whole = given.find((c) => c.reads === "");
+    if (key === "" && whole) return void own(whole, value);
+    if (key === "" && given.length && value !== null && typeof value === "object") {
+      for (const child2 of given) {
+        if (child2.reads in value) own(child2, value[child2.reads]);
+      }
+      return;
+    }
+    if (key && whole) return void add(whole, { value, key, name, fromHook: false, part: true });
+    const child = key ? given.find((c) => c.reads === key || c.name === key || `[${c.reads}]` === key) : void 0;
+    if (child) return void own(child, value);
+    if (parent?.kind === "hook") return;
+    add(parent, { value, key, name, fromHook: true });
+  };
+  const addOwned = (s, value) => spread(hookItem(s.owner), s.key, s.name, value);
+  const addOwn = (item, v) => !v.dep && item?.children.some((c) => c.reads !== void 0) ? spread(item, "", v.name, v.value) : add(item, v);
+  const states = live.state ?? [];
+  const contexts = live.contexts ?? [];
+  if (slots && slots.states.length === states.length) {
+    slots.states.forEach((s, i) => {
+      const value = settled(states[i]);
+      if (s.owner) return addOwned(s, value);
+      add(card.outline.find((o) => o.kind === "state" && base(o.name) === s.name), { value, key: s.key, name: s.name, fromHook: false });
+    });
+  } else {
+    stateNames(card, live).forEach((label, i) => {
+      const item = card.outline.find((o) => o.kind === "state" && o.name === label || o.kind === "hook" && label.startsWith(base(o.name)));
+      add(item, { value: states[i], key: item?.kind === "state" ? void 0 : label, name: label, fromHook: item?.kind === "hook" });
+    });
+  }
+  matchOtherHooks(card, live, slots, addOwn, addOwned);
+  const distinct = [...new Set(slots?.contexts.map((s) => s.name) ?? [])];
+  if (slots && distinct.length === contexts.length) {
+    slots.contexts.forEach((s) => {
+      const i = distinct.indexOf(s.name);
+      if (s.owner) return addOwned(s, contexts[i]);
+      const item = card.outline.find((o) => o.kind === "context" && (base(o.name) === s.name || o.name.includes(s.name) || o.from === s.name || (o.type ?? "").includes(s.name)));
+      addOwn(item, { value: contexts[i], key: s.key, name: s.name, fromHook: false });
+    });
+  }
+  const passed = live.props && typeof live.props === "object" ? live.props : {};
+  for (const handle of card.outline.filter((o) => o.hook === "useImperativeHandle")) {
+    const current = passed[handleRef(handle)]?.current;
+    if (current !== void 0) spread(handle, "", handle.name, current);
+  }
+  const known = new Map(Object.entries(live.props && typeof live.props === "object" ? live.props : {}));
+  for (const vals of map.values()) for (const v of vals) if (!v.fromHook && !v.dep) known.set(v.name, v.value);
+  map.known = known;
+  return map;
+}
+var handleRef = (item) => item.name.match(/^useImperativeHandle\(([\w$]+)\)/)?.[1] ?? "";
+var STATE_HOOKS = /* @__PURE__ */ new Set(["useState", "useReducer", "useOptimistic", "useTransition", "useActionState"]);
+var VALUE_HOOKS = /* @__PURE__ */ new Set(["useSyncExternalStore", "useDeferredValue", "useId"]);
+var EFFECT_HOOKS = /* @__PURE__ */ new Set(["useEffect", "useLayoutEffect", "useInsertionEffect", "useImperativeHandle"]);
+function matchOtherHooks(card, live, slots, add, addOwned) {
+  const entries = live.hooks ?? [];
+  const list = slots?.hooks ?? [];
+  const base = (name) => name.replace(/\(.*$/, "").trim();
+  const effects = card.outline.filter((o) => o.kind === "effect");
+  let effectIndex = 0;
+  const memos = /* @__PURE__ */ new Set();
+  const handles = card.outline.filter((o) => o.hook === "useImperativeHandle");
+  let handleIndex = 0;
+  let slot;
+  const addDeps = (item, deps) => {
+    if (!item || !slot.deps?.length || !Array.isArray(deps)) return;
+    slot.deps.forEach((name, d) => add(item, { value: serialize(deps[d]), name, fromHook: false, dep: true }));
+  };
+  for (let i = 0; i < list.length && i < entries.length; i++) {
+    slot = list[i];
+    const { isState, stored } = entries[i];
+    const isObj = stored !== null && typeof stored === "object";
+    const fits = STATE_HOOKS.has(slot.hook) ? slot.name.endsWith("(internal)") || isState : slot.hook === "useRef" ? isObj && "current" in stored : slot.hook === "useMemo" || slot.hook === "useCallback" ? Array.isArray(stored) && stored.length === 2 : EFFECT_HOOKS.has(slot.hook) ? isObj && ("create" in stored || "deps" in stored) : true;
+    if (!fits) return;
+    const value = slot.hook === "useRef" ? serialize(stored.current) : slot.hook === "useMemo" ? serialize(stored[0]) : VALUE_HOOKS.has(slot.hook) && !slot.name.endsWith("(internal)") ? serialize(stored) : MISSING;
+    if (slot.owner) {
+      if (value !== MISSING) addOwned(slot, value);
+      continue;
+    }
+    if (VALUE_HOOKS.has(slot.hook) && value !== MISSING) {
+      const item = card.outline.find((o) => (o.kind === "store" || o.kind === "state" || o.kind === "derived") && base(o.name) === slot.name);
+      add(item, { value, name: slot.name, fromHook: false });
+    } else if (slot.hook === "useRef") {
+      const item = card.outline.find((o) => o.kind === "ref" && base(o.name) === slot.name);
+      add(item, { value: serialize(stored.current), name: slot.name, fromHook: false });
+    } else if (slot.hook === "useMemo") {
+      const item = card.outline.find((o) => (o.kind === "memo" || o.kind === "derived") && base(o.name) === slot.name && !memos.has(o));
+      if (item) memos.add(item);
+      add(item, { value: serialize(stored[0]), name: slot.name, fromHook: false });
+      addDeps(item, stored[1]);
+    } else if (slot.hook === "useCallback") {
+      addDeps(card.outline.find((o) => o.kind === "callback" && base(o.name) === slot.name), stored[1]);
+    } else if (slot.hook === "useImperativeHandle") {
+      const item = handles[handleIndex++];
+      addDeps(item, stored.deps);
+    } else if (EFFECT_HOOKS.has(slot.hook)) {
+      const item = effects[effectIndex++];
+      addDeps(item, stored.deps);
+    }
+  }
+}
+function presentValues(all) {
+  const deps = all.filter((v) => v.dep);
+  const depsBox = deps.length ? valueBox(Object.fromEntries(deps.map((v) => [v.name, v.value])), "Current dependencies") : "";
+  return ownValues(all.filter((v) => !v.dep)) + depsBox;
+}
+function ownValues(vals) {
+  if (!vals.length) return "";
+  if (vals[0].part) return valueBox(Object.fromEntries(vals.map((v) => [v.key, v.value])), "Current");
+  if (!vals[0].fromHook) return valueBox(vals[0].value, "Current");
+  const returned = vals.filter((v) => v.key !== void 0);
+  const internal = vals.filter((v) => v.key === void 0);
+  const whole = returned.find((v) => v.key === "");
+  const shown = whole ? whole.value : returned.length ? Object.fromEntries(returned.map((v) => [v.key, v.value])) : void 0;
+  const blocks = [
+    // Read alongside the hook's signature: "Current arguments" → "Current return".
+    shown !== void 0 ? valueBox(shown, "Current return") : "",
+    ...internal.map((v) => valueBox(v.value, `Internal \xB7 ${v.name}`))
+  ];
+  return blocks.join("");
+}
+var MISSING = /* @__PURE__ */ Symbol("missing");
+function hookArguments(item, known) {
+  const call = item.name.match(/^[\w$]+\((.*)\)$/s);
+  const args = call ? splitTopLevel(call[1]) : [];
+  if (!args.length) return "";
+  const params = parameterNames(item.type ?? "");
+  const results = args.map((arg) => evaluate(arg, known));
+  if (!results.some((r) => r.resolved)) return "";
+  if (args.length === 1 && !params[0]) return valueBox(results[0].value, "Current arguments");
+  const out = {};
+  results.forEach((r, i) => {
+    out[params[i] ?? (/^[\w$]+$/.test(args[i]) ? args[i] : `argument ${i + 1}`)] = r.value;
+  });
+  return valueBox(out, "Current arguments");
+}
+function parameterNames(signature) {
+  if (!signature.startsWith("(")) return [];
+  let depth = 0;
+  for (let i = 0; i < signature.length; i++) {
+    const c = signature[i];
+    if ("([{<".includes(c)) depth++;
+    else if (")]}>".includes(c) && signature[i - 1] !== "=") depth--;
+    if (depth === 0) return splitTopLevel(signature.slice(1, i)).map((p) => p.replace(/^\.\.\./, "").match(/^[A-Za-z_$][\w$]*/)?.[0]);
+  }
+  return [];
+}
+function compactArg(arg) {
+  const a = arg.trim();
+  if (a.startsWith("{") && a.endsWith("}")) {
+    const keys = splitTopLevel(a.slice(1, -1)).map((p) => p.match(/^(\.\.\.)?\s*["']?[\w$]+/)?.[0].replace(/["']/g, "") ?? "\u2026");
+    return keys.length ? `{ ${keys.join(", ")} }` : "{}";
+  }
+  const fn = a.match(/^(async\s+)?(\([^)]*\)|[\w$]+)\s*=>/);
+  if (fn) return `${fn[1] ?? ""}${fn[2]} => \u2026`;
+  if (/^(async\s+)?function\b/.test(a)) return "function \u2026";
+  return a.length > 40 ? `${a.slice(0, 39)}\u2026` : a;
+}
+function splitTopLevel(text) {
+  const parts = [];
+  let depth = 0;
+  let quote = "";
+  let start = 0;
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i];
+    if (quote) {
+      if (c === quote && text[i - 1] !== "\\") quote = "";
+    } else if (c === '"' || c === "'" || c === "`") quote = c;
+    else if ("([{<".includes(c)) depth++;
+    else if (")]}>".includes(c) && text[i - 1] !== "=") depth--;
+    else if (c === "," && depth === 0) {
+      parts.push(text.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+  const last = text.slice(start).trim();
+  if (last) parts.push(last);
+  return parts;
+}
+function flattenSelf(outline2, component) {
+  const [only] = outline2;
+  if (outline2.length !== 1 || !only.children.length || !only.name.includes(component)) return outline2;
+  return only.children;
+}
+function stateNames(card, live) {
+  const count = live.state?.length ?? 0;
+  const names = [];
+  const order = card.outline.filter((i) => i.kind === "state" || i.kind === "hook");
+  for (const [i, item] of order.entries()) {
+    if (item.kind === "state") {
+      names.push(item.name);
+      continue;
+    }
+    if (i === order.length - 1) {
+      const hook = item.name.replace(/\(.*$/, "");
+      const rest = count - names.length;
+      for (let n = 1; n <= rest; n++) names.push(rest > 1 ? `${hook} \xB7 ${n}` : hook);
+    }
+    break;
+  }
+  return names.length === count ? names : [];
+}
+function section(id, title, body, opts = {}) {
+  return `<details class="sec" data-sec="${id}" ${opts.open === false ? "" : "open"}>
+    <summary><span class="sec-title">${title}</span>${opts.count !== void 0 ? `<span class="count">${opts.count}</span>` : ""}${opts.extra ?? ""}</summary>
+    <div class="sec-body">${body}</div>
+  </details>`;
+}
+function overview(card) {
+  if (!card.summary) {
+    return section("overview", "Overview", `<p class="summary pending">The AI is writing the overview and explanations. Meanwhile, everything below is read straight from the code.</p>`);
+  }
+  return section("overview", "Overview", `<p class="summary">${inline(card.summary)}</p>`);
+}
+function propRow(name, type, description, value, hasValue, note = "") {
+  return `<div class="prop" data-def="${esc(name.replace(/\?$/, ""))}">
+    <div class="prop-head">
+      <code class="prop-name">${esc(name)}</code>
+      ${type ? `<code class="prop-type" title="${esc(type)}">${esc(type)}</code>` : ""}
+    </div>
+    <div class="prop-body">
+      ${description ? `<div class="prop-desc">${inline(description)}</div>` : ""}
+      ${note}
+      ${hasValue ? valueBox(value, "Current") : ""}
+    </div>
+  </div>`;
+}
+function props(card, live) {
+  const liveProps = live.props && typeof live.props === "object" ? live.props : {};
+  const exposes = /* @__PURE__ */ new Map();
+  for (const o of card.outline) if (o.hook === "useImperativeHandle") exposes.set(handleRef(o), o.children.map((c) => c.name));
+  const rows = card.props.map((p) => {
+    const names = exposes.get(p.name);
+    const note = names?.length ? `<div class="prop-desc">Exposes ${names.map((n) => `<code>${esc(n)}</code>`).join(", ")} to the parent through useImperativeHandle.</div>` : "";
+    return propRow(p.name + (p.optional ? "?" : ""), p.type, p.description, liveProps[p.name], p.name in liveProps && !names, note);
+  });
+  const described = new Set(card.props.map((p) => p.name));
+  for (const [k, v] of Object.entries(liveProps)) {
+    if (!described.has(k)) rows.push(propRow(k, "", "", v, true));
+  }
+  if (!rows.length) return "";
+  return section("props", "Props", rows.join(""), { count: rows.length });
+}
+function outline(card, ctx, values) {
+  if (!card.outline.length) return "";
+  const count = (items) => items.reduce((n, i) => n + 1 + count(i.children ?? []), 0);
+  const total = count(card.outline);
+  const known = new Set(GROUPS.flatMap((g) => g.kinds));
+  const groups = [...GROUPS, { kinds: [], title: "Other", hint: "", about: "", cls: "other" }].map((g) => ({
+    ...g,
+    items: card.outline.filter((i) => g.cls === "other" ? !known.has(i.kind) : g.kinds.includes(i.kind))
+  }));
+  const body = groups.filter((g) => g.items.length).map(
+    (g) => `<details class="ol-group" open>
+        <summary class="ol-group-head" title="${esc(g.about)}">
+          <span class="ol-icon k-${g.cls}">${ICONS[g.cls]}</span>
+          <span class="ol-group-title">${g.title}</span>
+          <span class="ol-group-hint">${g.hint ? `<span class="ol-hint-label">${esc(g.hint)}</span>` : ""}</span>
+          <span class="count">${g.items.length}</span>
+        </summary>
+        <ul class="outline">${g.items.map((item) => outlineNode(item, ctx, values)).join("")}</ul>
+      </details>`
+  ).join("");
+  return section("outline", "Outline", body, {
+    count: total,
+    extra: `<button class="link expand-all" data-expand-all title="Expand or collapse every explanation">expand all</button>`
+  });
+}
+function fact(label, cls, html) {
+  return `<div class="fact fact-${cls}"><span class="val-label">${label}</span><span class="fact-val">${html}</span></div>`;
+}
+function effectDeps(when) {
+  const list = when.trim().match(/^\[(.*)\]$/s);
+  return list ? splitTopLevel(list[1]) : null;
+}
+function effectTiming(when, hook = "") {
+  const w = when.trim();
+  const deps = effectDeps(w);
+  const timing = deps?.length === 0 || /^(on |only on )?mount|once|mount only/i.test(w) ? "only on mount" : /every render|no dep/i.test(w) ? "after every render" : deps?.length || !w ? "on mount and when dependencies change" : w;
+  const phase = hook === "useLayoutEffect" ? "before paint" : hook === "useInsertionEffect" ? "before layout" : "";
+  return [timing, phase].filter(Boolean).join(" \xB7 ");
+}
+function callParts(name) {
+  const call = name.match(/^(use[\w$]*)\((.*)\)$/s);
+  return call ? { shown: call[1], args: call[2].trim() } : { shown: name, args: "" };
+}
+function outlineNode(item, ctx, values, parent) {
+  const { shown, args } = callParts(item.name);
+  const fromCall = item.reads !== void 0 && parent ? `${callParts(parent.name).shown}${parent.kind === "state" ? "" : "()"}` : "";
+  const base = KINDS[item.kind] ?? { icon: ICONS.other, label: item.kind };
+  const kind = fromCall ? parent?.kind === "state" ? { ...base, label: `updates ${parent.name}` } : { ...base, label: `${item.kind === "derived" ? "value" : "function"} from ${fromCall}`, tag: void 0 } : item.hook === "useImperativeHandle" ? { ...base, label: "what a parent's ref sees (useImperativeHandle)" } : item.hook && HOOK_LABELS[item.hook] ? { ...base, label: HOOK_LABELS[item.hook] } : item.kind === "hook" && item.from ? { ...base, label: `hook from ${item.from}` } : base;
+  const tagText = kind.tag ?? (item.hook && item.hook !== USUAL_HOOK[item.kind] ? item.hook : "");
+  const tag = tagText && !shown.startsWith(tagText) ? tagText : "";
+  const children = item.children ?? [];
+  const facts = { type: item.type ?? "", initial: item.initial ?? "", when: item.when ?? "" };
+  const liveArgs = item.kind === "hook" ? hookArguments(item, values.known ?? /* @__PURE__ */ new Map()) : "";
+  const block = liveArgs + presentValues(values.get(item) ?? []);
+  const typePill = facts.type ? `<span class="ol-type" title="${esc(facts.type)}">${esc(facts.type)}</span>` : "";
+  const timed = item.kind === "effect" || item.kind === "memo" || item.kind === "callback" || item.hook === "useImperativeHandle";
+  const when = !timed ? facts.when : item.kind === "effect" ? effectTiming(facts.when, item.hook) : effectTiming(facts.when).replace("after every render", "on every render");
+  const whenChip = when ? `<span class="ol-when" title="${esc(facts.when)}">${esc(when)}</span>` : "";
+  const constant = item.kind === "constant" ? ctx.slots?.constants?.[item.name] : void 0;
+  const returns = item.returns;
+  const factRows = [
+    facts.initial && fact("Initial", "initial", `<code>${esc(facts.initial)}</code>`),
+    constant && fact("Value", "value", `<code>${esc(constant)}</code>`),
+    returns && (item.kind === "effect" ? fact("Cleanup", "cleanup", inline(returns)) : fact("Returns", "returns", inline(returns))),
+    // An effect's dependencies, when there are no live ones to show them with.
+    timed && !block && effectDeps(facts.when)?.length && fact("Dependencies", "deps", effectDeps(facts.when).map((d) => `<code>${esc(d)}</code>`).join(", ")),
+    // A hook's arguments as written, when there are no live ones to show.
+    item.kind === "hook" && args && !liveArgs && fact("Arguments", "args", `<code title="${esc(args)}">${esc(splitTopLevel(args).map(compactArg).join(", "))}</code>`)
+  ].filter(Boolean);
+  const transient = item.kind === "derived" && !fromCall && !block ? `<div class="ol-note">Worked out on every render and not stored by React, so there's no live value to show.</div>` : "";
+  return `<li class="ol-node kc-${item.kind}" data-def="${esc(shown)}">
+    <div class="ol-row" title="Click to explain">
+      <span class="ol-icon k-${item.kind}" title="${esc(kind.label)}">${kind.icon}</span>
+      <span class="ol-name" title="${esc(item.name)}">${esc(shown)}</span>
+      ${tag ? `<span class="ol-tag">${esc(tag)}</span>` : ""}
+      ${item.from && !shown.includes(item.from) ? `<span class="ol-tag ol-from" title="${item.kind === "hook" ? "From the package" : "Reads"} ${esc(item.from)}">${esc(item.from)}</span>` : ""}
+      ${typePill}${whenChip}
+      <a class="src ol-goto" data-file="${esc(ctx.file)}" data-line="${item.line}" data-col="1" title="Open line ${item.line} in editor">${item.line}</a>
+    </div>
+    <div class="ol-expl">
+      ${inline(item.explanation)}
+      ${factRows.length ? `<div class="ol-facts">${factRows.join("")}</div>` : ""}
+      ${block ? `<div class="ol-now">${block}</div>` : ""}${transient}
+    </div>
+    ${children.length ? `<ul class="outline">${children.map((c) => outlineNode(c, ctx, values, item)).join("")}</ul>` : ""}
+  </li>`;
+}
+function usedIn(card, live) {
+  if (!card.usedIn.length) return "";
+  const current = thisCallSite(card, live);
+  const body = card.usedIn.map((u) => {
+    const file = u.ref.replace(/:\d+(:\d+)?$/, "");
+    const line = u.ref.match(/:(\d+)/)?.[1] ?? "1";
+    const props2 = (u.props ?? []).map((p) => {
+      const shown = p.name === "children" && p.value.startsWith("<") ? `${p.value.match(/^<[\w.]+/)?.[0] ?? "<\u2026"} \u2026>` : compactArg(p.value);
+      const value = p.line ? `<a class="src prop-type used-var" data-file="${esc(file)}" data-line="${p.line}" data-col="1" title="${esc(p.value)}: declared on line ${p.line}">${esc(shown)} \u2197</a>` : `<code class="prop-type" title="${esc(p.value)}">${esc(shown)}</code>`;
+      return `<code class="prop-name">${esc(p.name === "..." ? "{...}" : p.name)}</code><span class="used-val">${value}</span>`;
+    });
+    return `<div class="used${u === current ? " current" : ""}">
+        <div class="used-head">
+          <a class="src ref" data-file="${esc(file)}" data-line="${line}" data-col="1" title="Open ${esc(u.ref)} in editor">${esc(file.split("/").pop())}:${line}</a>
+          ${u.parent ? `<span class="used-in">in <code>&lt;${esc(u.parent)}&gt;</code></span>` : ""}
+          ${u === current ? `<span class="used-this" title="The instance you're inspecting was rendered here">this one</span>` : ""}
+        </div>
+        ${props2.length ? `<div class="used-props">${props2.join("")}</div>` : ""}
+      </div>`;
+  }).join("");
+  return section("used", "Used in", `<div class="used-list">${body}</div>`, { count: card.usedIn.length });
+}
+function thisCallSite(card, live) {
+  if (!live.owner) return void 0;
+  const candidates = card.usedIn.filter((u) => u.parent === live.owner);
+  if (candidates.length <= 1) return candidates[0];
+  const passed = live.props && typeof live.props === "object" ? live.props : {};
+  const matches = candidates.filter(
+    (u) => (u.props ?? []).every((p) => {
+      if (p.name === "..." || p.name === "children" || p.name === "key" || p.name === "ref") return true;
+      const r = evaluate(p.value, /* @__PURE__ */ new Map());
+      if (!r.resolved || typeof r.value === "string" && r.value.startsWith("[Code ")) return true;
+      return JSON.stringify(r.value) === JSON.stringify(passed[p.name]);
+    })
+  );
+  return matches.length === 1 ? matches[0] : void 0;
+}
+function history(card) {
+  if (!card.history.length) return "";
+  const body = `<ol class="timeline">${card.history.map(
+    (h) => `<li>
+        <div class="tl-meta"><code>${esc(h.commit)}</code>${h.date ? ` \xB7 ${esc(h.date)}` : ""}${h.author ? ` \xB7 ${esc(h.author)}` : ""}</div>
+        <div class="tl-why">${inline(h.why)}</div>
+      </li>`
+  ).join("")}</ol>`;
+  return section("history", "History", body, { count: card.history.length, open: false });
+}
+
+// src/client/types.ts
+var TARGETS = ".prop-type, .ol-type, code";
+function linkTypes(root, types) {
+  if (!types.size) return;
+  const re = new RegExp(`\\b(${[...types.keys()].map((n) => n.replace(/[$]/g, "\\$")).join("|")})\\b`, "g");
+  for (const el of root.querySelectorAll(TARGETS)) {
+    if (el.closest("a, pre, .tp-code")) continue;
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    const nodes = [];
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) if (!n.parentElement?.closest(".type-ref")) nodes.push(n);
+    for (const node of nodes) {
+      const text = node.data;
+      re.lastIndex = 0;
+      if (!re.test(text)) continue;
+      const span2 = document.createElement("span");
+      span2.innerHTML = esc(text).replace(re, (name) => typeLink(types.get(name)));
+      node.replaceWith(...span2.childNodes);
+    }
+  }
+}
+function typeLink(t) {
+  return `<a class="src type-ref" data-type="${esc(t.name)}" data-file="${esc(t.file)}" data-line="${t.line}" data-col="1">${esc(t.name)}</a>`;
+}
+function typePopover(t, types) {
+  const re = new RegExp(`\\b(${[...types.keys()].join("|")})\\b`, "g");
+  const code2 = esc(t.code).replace(re, (name) => name === t.name ? name : typeLink(types.get(name)));
+  return `<div class="tp-head">
+      <span class="tp-kind">${esc(t.kind)}</span><span class="tp-name">${esc(t.name)}</span>
+      <a class="src tp-file" data-file="${esc(t.file)}" data-line="${t.line}" data-col="1" title="Open in editor">${esc(t.file.split("/").pop())}:${t.line} \u2197</a>
+    </div>
+    <pre class="tp-code">${code2}</pre>`;
+}
+
+// src/client/symbols.ts
+var REF = /^([A-Za-z_$][\w$]*)(?:\.[\w$]+)*(?:\(.*\))?$/s;
+function definitions(root) {
+  const defs = /* @__PURE__ */ new Map();
+  for (const el of root.querySelectorAll("[data-def]")) {
+    if (!defs.has(el.dataset.def)) defs.set(el.dataset.def, el);
+  }
+  return defs;
+}
+function findDefinition(root, name) {
+  return definitions(root).get(name) ?? null;
+}
+var SKIP = "a, pre, .ol-row, .prop-head, .tp-head, .val, .sym-ref, .used-list";
+var CODE_LIKE = /^(?:[a-z][a-z0-9]*[A-Z][\w$]*|[A-Za-z$][\w$]*[_$][\w$]*)$/;
+var kindOf = (def) => [...def.classList].find((c) => c.startsWith("kc-")) ?? "kc-prop";
+function linkSymbols(root) {
+  const defs = definitions(root);
+  if (!defs.size) return;
+  for (const code2 of root.querySelectorAll("code:not(.sym-ref)")) {
+    if (code2.closest(SKIP) || code2.querySelector("a")) continue;
+    const name = code2.textContent.trim().match(REF)?.[1];
+    const def = name ? defs.get(name) : void 0;
+    if (!def || code2.closest("[data-def]") === def) continue;
+    code2.classList.add("sym-ref", kindOf(def));
+    code2.dataset.sym = name;
+  }
+  const prose = [...defs.keys()].filter((n) => CODE_LIKE.test(n));
+  if (!prose.length) return;
+  const re = new RegExp(`(?<![\\w$.])(${prose.map((n) => n.replace(/\$/g, "\\$")).join("|")})(?![\\w$])`, "g");
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  const nodes = [];
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+    const parent = n.parentElement;
+    if (parent && !parent.closest(`${SKIP}, code, summary, button, .steps`)) nodes.push(n);
+  }
+  for (const node of nodes) {
+    re.lastIndex = 0;
+    if (!re.test(node.data)) continue;
+    const own = node.parentElement.closest("[data-def]");
+    const span2 = document.createElement("span");
+    span2.innerHTML = esc(node.data).replace(re, (name) => {
+      const def = defs.get(name);
+      return def === own ? name : `<span class="sym-ref ${kindOf(def)}" data-sym="${esc(name)}">${name}</span>`;
+    });
+    node.replaceWith(...span2.childNodes);
+  }
+}
+function symbolPopover(def) {
+  if (def.classList.contains("prop")) {
+    const type = def.querySelector(".prop-type")?.textContent ?? "";
+    const desc = def.querySelector(".prop-desc")?.innerHTML ?? "";
+    const value = def.querySelector(".prop-body > .val")?.outerHTML ?? "";
+    return `<div class="tp-head">
+        <span class="tp-kind">prop</span><span class="tp-name">${esc(def.dataset.def)}</span>
+        ${type ? `<span class="ol-type sp-type">${esc(type)}</span>` : ""}
+      </div>
+      <div class="sp-body">${desc}${value}</div>`;
+  }
+  const row = def.querySelector(":scope > .ol-row");
+  const icon = row.querySelector(".ol-icon")?.outerHTML ?? "";
+  const pill = row.querySelector(".ol-type, .ol-when");
+  const goto = row.querySelector(".ol-goto");
+  const expl = def.querySelector(":scope > .ol-expl").cloneNode(true);
+  expl.querySelector(".ol-note")?.remove();
+  const boxes = [...expl.querySelectorAll(".ol-facts, .ol-now")].map((b) => (b.remove(), b.outerHTML)).join("");
+  return `<div class="sp ${[...def.classList].filter((c) => c.startsWith("kc-")).join(" ")}">
+      <div class="tp-head">
+        ${icon}<span class="tp-name">${esc(def.dataset.def)}</span>
+        ${pill ? `<span class="ol-type sp-type">${esc(pill.textContent)}</span>` : ""}
+        ${goto ? `<a class="src tp-file" data-file="${esc(goto.dataset.file)}" data-line="${goto.dataset.line}" data-col="1" title="Open in editor">L${goto.dataset.line} \u2197</a>` : ""}
+      </div>
+      <div class="sp-body">${expl.innerHTML.trim()}${boxes}</div>
+    </div>`;
+}
+function revealDefinition(def) {
+  for (let d = def.closest("details"); d; d = d.parentElement.closest("details")) d.open = true;
+  if (def.classList.contains("ol-node")) def.classList.add("open");
+  def.scrollIntoView({ block: "center", behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
+  def.classList.remove("flash");
+  void def.offsetWidth;
+  def.classList.add("flash");
+}
+
+// src/client/styles.ts
+var STYLES = (
+  /* css */
+  `
+:host { all: initial; }
+* { box-sizing: border-box; }
+.box, .tip, .launcher, .panel, .type-pop {
+  /* Monotone: neutral greys with a muted violet-grey accent, so the outline's kind colours are the only real colour. */
+  --accent: #5d5873;
+  --bg: #ffffff; --fg: #33303d; --muted: #6f6c7c; --line: #e6e6e9; --soft: #f5f5f6; --code: #efeff1;
+  font: 13px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: var(--fg);
+}
+@media (prefers-color-scheme: dark) {
+  .box, .tip, .launcher, .panel, .type-pop {
+    --accent: #b1adc4;
+    --bg: #18181b; --fg: #dddbe6; --muted: #9a97a8; --line: #2d2d31; --soft: #212124; --code: #28282c;
+  }
+}
+[hidden] { display: none !important; }
+
+.box {
+  position: fixed; top: 0; left: 0;
+  border: 2px solid var(--accent); border-radius: 4px;
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  transition: transform 60ms ease-out, width 60ms ease-out, height 60ms ease-out;
+}
+.box.selected { background: none; border-style: dashed; }
+
+.tip {
+  position: fixed; top: 0; left: 0; max-width: min(560px, calc(100vw - 8px));
+  display: flex; gap: 8px; align-items: baseline;
+  padding: 4px 8px; border-radius: 6px;
+  background: var(--fg); color: var(--bg); white-space: nowrap; overflow: hidden;
+  box-shadow: 0 4px 16px rgb(0 0 0 / .25);
+}
+.tip .name { font: 600 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.tip .path { font-size: 11px; opacity: .75; overflow: hidden; text-overflow: ellipsis; }
+
+.launcher {
+  pointer-events: auto; position: fixed; touch-action: none; user-select: none;
+  display: flex; align-items: center; gap: 6px;
+  padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px;
+  background: var(--bg); color: var(--muted); cursor: pointer;
+  box-shadow: 0 2px 10px rgb(0 0 0 / .12); opacity: .75; transition: opacity .15s;
+}
+/* Drag it anywhere; it snaps to the nearest corner (remembered per browser). */
+.launcher[data-corner="br"] { right: 12px; bottom: 12px; }
+.launcher[data-corner="bl"] { left: 12px; bottom: 12px; }
+.launcher[data-corner="tr"] { right: 12px; top: 12px; }
+.launcher[data-corner="tl"] { left: 12px; top: 12px; }
+.launcher.dragging { cursor: grabbing; opacity: 1; box-shadow: 0 8px 24px rgb(0 0 0 / .25); }
+.launcher:hover, .launcher.active { opacity: 1; color: var(--fg); }
+.launcher .hat { width: 18px; height: 18px; flex-shrink: 0; transform-origin: 30% 80%; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
+.launcher .hat .band { fill: var(--bg); }
+.launcher:hover .hat { transform: rotate(-14deg) translateY(-1px); }  /* tips the hat */
+.launcher.active .hat { color: var(--accent); animation: sleuth 2.2s ease-in-out infinite; }
+@keyframes sleuth { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg) translateX(-1px); } 60% { transform: rotate(6deg) translateX(1px); } }
+@media (prefers-reduced-motion: reduce) { .launcher .hat { transition: none; animation: none !important; } }
+/* While inspecting, the label turns into a prompt and the key hint shows how to stop. */
+.launcher .on, .launcher.active .off { display: none; }
+.launcher.active .on { display: inline; }
+.launcher kbd { font: 11px ui-monospace, monospace; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--soft); }
+
+.panel {
+  pointer-events: auto; position: fixed; top: 0; right: 0; bottom: 0;
+  width: min(460px, 100vw); display: flex; flex-direction: column;
+  background: var(--bg); border-left: 1px solid var(--line);
+  box-shadow: -8px 0 32px rgb(0 0 0 / .12);
+}
+header { position: relative; padding: 12px 44px 12px 16px; border-bottom: 1px solid var(--line); }
+.title { display: flex; align-items: center; gap: 4px; min-width: 0; }
+.title-link { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 3px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--soft); text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s; }
+.title-link:hover { background: var(--code); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
+.title-goto { font-size: 12px; color: var(--muted); }
+.title-link:hover .title-goto { color: var(--accent); }
+header .close { position: absolute; top: 8px; right: 8px; }
+h1 { margin: 0; font: 600 16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--fg); overflow-wrap: anywhere; }
+button { font: inherit; color: inherit; }
+.icon { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; font-size: 15px; }
+.icon:hover { background: var(--soft); color: var(--fg); }
+.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; margin: -2px 0 4px -4px; font: 11px ui-monospace, monospace; color: var(--muted); }
+.crumbs button { border: 0; background: none; padding: 1px 4px; border-radius: 4px; cursor: pointer; color: var(--muted); font: inherit; }
+.crumbs button:hover { background: var(--soft); color: var(--fg); }
+.crumbs .sep { opacity: .45; }
+
+.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
+.meta-row:not(:has(> :not([hidden]))) { display: none; }
+.meta-row > :not([hidden]) ~ :not([hidden])::before { content: "\xB7"; margin: 0 7px; opacity: .6; }
+.status, .gitinfo { cursor: default; white-space: nowrap; }
+.gitinfo .tag { margin-left: 4px; }
+
+.body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; }
+.progress { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; color: var(--muted); }
+/* Busy indicator: a magnifying glass searching about. */
+.spinner { position: relative; flex-shrink: 0; width: 16px; height: 16px; animation: search 1.6s ease-in-out infinite; }
+.spinner::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border: 2px solid var(--accent); border-radius: 50%; }
+.spinner::after { content: ""; position: absolute; left: 10px; top: 9px; width: 2.5px; height: 7px; border-radius: 1px; background: var(--accent); transform: rotate(-45deg); transform-origin: top center; }
+@keyframes search { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(3px, -2px); } 50% { transform: translate(0, -4px); } 75% { transform: translate(-3px, -1px); } }
+@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
+.steps { list-style: none; margin: 0; padding: 0 0 0 26px; font: 12px ui-monospace, monospace; color: var(--muted); }
+.steps li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .55; }
+.steps li:last-child { opacity: 1; }
+
+.md h2, .md h3, .md h4 { margin: 18px 0 6px; font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
+.md h2:first-child { margin-top: 14px; }
+.md p, .md ul, .md ol { margin: 0 0 8px; }
+.md ul, .md ol { padding-left: 20px; }
+.md li { margin: 2px 0; }
+.md code, .md pre { font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.md code { padding: 1px 4px; border-radius: 4px; background: var(--code); overflow-wrap: anywhere; }
+.md pre { padding: 10px; border-radius: 6px; background: var(--code); overflow-x: auto; }
+.md pre code { padding: 0; background: none; }
+/* Web links anywhere in the panel; without this they'd get the browser's dark blue, unreadable in dark mode. */
+a[href] { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
+a[href]:hover { color: var(--fg); }
+.banner a[href], .error a[href] { color: inherit; font-weight: 600; }
+.md a { color: var(--accent); }
+.md a.src { cursor: pointer; text-decoration: none; }
+.md a.src code { color: var(--accent); }
+.md a.src:hover code { text-decoration: underline; }
+.meta { margin-top: 12px; font-size: 11px; color: var(--muted); }
+.link { border: 0; padding: 0; background: none; color: var(--accent); cursor: pointer; font-size: inherit; }
+.error { margin: 14px 0; padding: 10px 12px; border-radius: 6px; background: color-mix(in srgb, #e5484d 12%, var(--bg)); color: #c62a2f; overflow-wrap: anywhere; }
+@media (prefers-color-scheme: dark) {
+  .error { color: #ff9592; }
+}
+
+/* ---------- explanation card ---------- */
+.card code { font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 0 3px; border-radius: 3px; background: var(--code); }
+a.ref { font: 11px ui-monospace, monospace; color: var(--muted); text-decoration: none; cursor: pointer; white-space: nowrap; }
+a.ref:hover { color: var(--accent); text-decoration: underline; }
+
+.sec { border-top: 1px solid var(--line); }
+.sec:first-child { border-top: 0; }
+.sec > summary { display: flex; align-items: center; gap: 6px; padding: 12px 0 8px; cursor: pointer; list-style: none; user-select: none; }
+.sec > summary::-webkit-details-marker { display: none; }
+.sec > summary::before { content: "\u25B8"; font-size: 10px; color: var(--muted); transition: transform .15s; }
+.sec[open] > summary::before { transform: rotate(90deg); }
+.sec-title { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
+.count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--soft); font-size: 11px; text-align: center; color: var(--muted); }
+.expand-all { margin-left: auto; font-size: 11px; }
+.sec-body { padding-bottom: 10px; }
+
+.summary { margin: 0; font-size: 14px; line-height: 1.55; }
+.summary.pending { font-size: 12.5px; color: var(--muted); font-style: italic; }
+/* Read-from-source outline while the AI writes: explanations are still empty, so items open to just their facts. */
+.card.skeleton .ol-expl:not(:has(.ol-facts, .ol-now, .ol-note)) { display: none !important; }
+
+/* live values, devtools-style */
+.v-str { color: #c2410c; }
+.v-num { color: #2563eb; }
+.v-bool { color: #9333ea; }
+.v-null { color: var(--muted); font-style: italic; }
+.v-fn { color: #a24d9c; font-style: italic; }
+.v-el { color: #0d8a7c; }
+.v-meta { color: var(--muted); }
+/* Code that couldn't be worked out to a value: as written, muted and italic so it doesn't read as a string. */
+.v-code { color: var(--muted); font-style: italic; }
+.v-key { color: var(--muted); }
+@media (prefers-color-scheme: dark) {
+  .v-str { color: #f0a46b; }
+  .v-num { color: #8ab4ff; }
+  .v-bool { color: #d2a8ff; }
+  .v-fn { color: #d7a0d3; }
+  .v-el { color: #6ad3c2; }
+}
+
+.val { margin-top: 6px; border-radius: 6px; background: var(--soft); border: 1px solid var(--line); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.val.expandable { cursor: pointer; }
+.val.expandable:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
+.val-line { display: flex; align-items: baseline; gap: 8px; padding: 3px 8px; min-width: 0; }
+/* Labels take the colour of what they belong to (--kc: an outline item's group colour, else the accent).
+   Live values ("Current") get a filled, gently pulsing dot. */
+.val-label { flex-shrink: 0; font: 700 9.5px ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--kc, var(--accent)); }
+.val-label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 0; animation: live 2.4s ease-in-out infinite; }
+.fact .val-label::before { content: none; }
+@keyframes live { 50% { opacity: .35; } }
+@media (prefers-reduced-motion: reduce) { .val-label::before { animation: none; } }
+.val-preview { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.val-chevron { flex-shrink: 0; font-size: 10px; color: var(--muted); transition: transform .15s; }
+.val.open .val-chevron { transform: rotate(90deg); }
+.val-tree { display: none; padding: 2px 8px 6px; border-top: 1px solid var(--line); cursor: text; }
+.val.open .val-tree { display: block; }
+.vt .vt { padding-left: 14px; }
+.vt-row { display: flex; align-items: baseline; gap: 4px; padding: 1px 0; min-width: 0; list-style: none; }
+.vt-row::-webkit-details-marker { display: none; }
+summary.vt-row { cursor: pointer; border-radius: 3px; }
+summary.vt-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
+.vt-tw { flex-shrink: 0; width: 10px; font-size: 9px; color: var(--muted); }
+summary.vt-row .vt-tw::before { content: "\u25B8"; display: inline-block; transition: transform .12s; }
+.vt-node[open] > summary.vt-row .vt-tw::before { transform: rotate(90deg); }
+.vt-row > .v-key { flex-shrink: 0; }
+.vt-row > .v-key::after { content: ":"; margin-right: 4px; }
+.vt-val { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* props: docs-style rows */
+.prop { display: grid; grid-template-columns: minmax(90px, 30%) 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
+.prop:first-child { border-top: 0; padding-top: 2px; }
+.prop-head { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
+.card .prop-name { padding: 0; background: none; font-weight: 650; color: var(--fg); overflow-wrap: anywhere; }
+.card .prop-type { max-width: 100%; padding: 1px 6px; border-radius: 4px; font-size: 11px; color: var(--muted); background: var(--code); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.prop-body { min-width: 0; }
+.prop-desc { font-size: 12.5px; }
+.prop-desc + .val { margin-top: 6px; }
+.prop-body > .val:first-child { margin-top: 0; }
+
+/* outline tree, in the spirit of VS Code's outline view */
+.ol-group + .ol-group { margin-top: 10px; }
+.ol-group-head { display: flex; align-items: center; gap: 7px; padding: 4px 6px 3px; border-radius: 4px; cursor: pointer; list-style: none; user-select: none; }
+.ol-group-head::-webkit-details-marker { display: none; }
+.ol-group-head:hover { background: var(--soft); }
+.ol-group-head::before { content: "\u25B8"; width: 8px; font-size: 9px; color: var(--muted); transition: transform .12s; }
+.ol-group[open] > .ol-group-head::before { transform: rotate(90deg); }
+.ol-group-title { font-size: 12px; font-weight: 650; }
+.ol-group-hint { flex: 1; }
+.ol-hint-label { font: 10.5px ui-monospace, monospace; color: var(--muted); padding: 0 5px; border-radius: 3px; border: 1px dashed var(--line); }
+
+/* custom types: linked in code-like text, definition in a hover popover */
+.type-ref { color: inherit; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); text-underline-offset: 2px; cursor: pointer; }
+.type-ref:hover { color: var(--accent); text-decoration-style: solid; }
+.type-pop { pointer-events: auto; position: fixed; z-index: 2; max-width: min(420px, calc(100vw - 16px)); border-radius: 8px; border: 1px solid var(--line); background: var(--bg); box-shadow: 0 8px 28px rgb(0 0 0 / .28); overflow: hidden; }
+.tp-head { display: flex; align-items: baseline; gap: 7px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--soft); }
+.tp-kind { font: 10px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
+.tp-name { flex: 1; font: 600 12.5px ui-monospace, monospace; color: var(--fg); }
+.tp-file { font: 11px ui-monospace, monospace; color: var(--muted); text-decoration: none; cursor: pointer; }
+.tp-file:hover { color: var(--accent); text-decoration: underline; }
+.tp-code { margin: 0; padding: 8px 10px; max-height: 320px; overflow: auto; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
+/* Symbol references: underlined in their outline kind colour; hover previews the definition, click jumps to it. */
+.kc-prop { --kc: var(--accent); }
+/* Symbol references read as tinted chips in their outline kind colour, so names stand out when skimming.
+   (Text is mixed toward the foreground so lighter kind colours stay readable.) */
+.panel .sym-ref, .type-pop .sym-ref {
+  cursor: pointer; padding: 0 4px; border-radius: 4px; white-space: nowrap;
+  font: 500 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: color-mix(in srgb, var(--kc, var(--accent)) 78%, var(--fg));
+  background: color-mix(in srgb, var(--kc, var(--accent)) 15%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc, var(--accent)) 22%, transparent);
+  transition: background .12s, box-shadow .12s;
+}
+.panel .sym-ref:hover, .type-pop .sym-ref:hover {
+  background: color-mix(in srgb, var(--kc, var(--accent)) 26%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc, var(--accent)) 55%, transparent);
+}
+.sp-body { max-height: 340px; overflow: auto; padding: 8px 10px 10px; font-size: 12.5px; }
+.sp-body .ol-facts { margin-top: 8px; }
+.sp-body .val { background: var(--bg); }
+.sp-body .val-label { min-width: 64px; }
+.sp-type { max-width: 50%; }
+.tp-head .ol-icon { align-self: center; }
+.tp-head .tp-file { margin-left: auto; }
+/* Go to definition: briefly highlight where we landed. */
+.ol-node.flash > .ol-row, .prop.flash { animation: flash 1.4s ease-out; }
+@keyframes flash { 0%, 30% { background: color-mix(in srgb, var(--kc, var(--accent)) 26%, transparent); } }
+@media (prefers-reduced-motion: reduce) { .ol-node.flash > .ol-row, .prop.flash { animation-duration: .01s; } }
+.ol-group .outline { margin-left: 15px; padding-left: 8px; border-left: 1px solid var(--line); }
+.ol-tag { flex-shrink: 0; font: 10px ui-monospace, monospace; padding: 0 4px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); }
+.ol-now { margin-top: 6px; }
+.outline { list-style: none; margin: 0; padding: 0; }
+.outline .outline { margin-left: 11px; padding-left: 10px; border-left: 1px solid var(--line); }
+.ol-row { display: flex; align-items: center; gap: 7px; padding: 3px 6px; border-radius: 4px; cursor: pointer; min-width: 0; }
+.ol-row:hover { background: var(--soft); }
+.ol-node.open > .ol-row { background: var(--soft); }
+.ol-icon { flex-shrink: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; font: 700 10px ui-monospace, monospace; }
+.ol-icon svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
+.ol-name { flex-shrink: 0; font: 12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.ol-type { flex-shrink: 1; min-width: 0; max-width: 45%; padding: 0 6px; border-radius: 4px; background: var(--code); font: 11px/1.6 ui-monospace, monospace; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ol-when { flex-shrink: 1; min-width: 0; padding: 0 6px; border-radius: 4px; border: 1px dashed var(--line); font: 11px/1.6 ui-monospace, monospace; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ol-goto { margin-left: auto; }
+/* Long types are cut off in the row; opening the item shows the whole thing in place. */
+.ol-node.open > .ol-row { align-items: flex-start; flex-wrap: wrap; }
+.ol-node.open > .ol-row .ol-type, .ol-node.open > .ol-row .ol-when { max-width: none; white-space: normal; overflow-wrap: anywhere; }
+/* Secondary facts (initial value, returns, cleanup\u2026) as labelled boxes, like "Current". */
+.ol-facts { display: grid; gap: 5px; margin-top: 10px; }
+.ol-facts + .ol-now .val:first-child { margin-top: 5px; }
+.fact { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); }
+.fact-val { min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
+.fact-val code { font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 0; background: none; }
+.ol-expl .val-label { min-width: 64px; }
+.ol-expl .val { background: var(--bg); }
+.ol-note { margin-top: 6px; font-size: 11.5px; color: var(--muted); font-style: italic; }
+.ol-goto { flex-shrink: 0; font: 10.5px ui-monospace, monospace; color: var(--muted); text-decoration: none; opacity: 0; padding: 0 2px; }
+.ol-row:hover .ol-goto, .ol-node.open > .ol-row .ol-goto { opacity: 1; }
+.ol-goto:hover { color: var(--accent); text-decoration: underline; }
+.ol-goto::before { content: "L"; opacity: .6; }
+.ol-expl { display: none; margin: 2px 0 6px 31px; padding: 6px 10px; border-left: 2px solid var(--kc, var(--accent)); font-size: 12.5px; background: var(--soft); border-radius: 0 4px 4px 0; }
+.ol-node.open > .ol-expl { display: block; }
+/* One colour per kind, spread around the colour wheel so no two groups look alike.
+   It drives the group icon, the item's labels and the expanded panel's edge. */
+.kc-state, .k-state { --kc: #9d5fc9; }
+.kc-callback, .kc-function, .k-callback, .k-function { --kc: #c2418f; }
+.kc-render, .k-render { --kc: #d0453f; }
+.kc-effect, .k-effect { --kc: #d27a12; }
+.kc-hook, .k-hook { --kc: #a68f0b; }
+.kc-ref, .k-ref { --kc: #2e9a52; }
+.kc-context, .kc-store, .k-context, .k-store { --kc: #12918e; }
+.kc-derived, .kc-memo, .k-derived, .k-memo { --kc: #3a7fc4; }
+.kc-constant, .kc-other, .k-constant, .k-other { --kc: var(--muted); }
+.ol-icon[class*="k-"] { background: color-mix(in srgb, var(--kc) 20%, transparent); color: var(--kc); }
+/* Brighter in dark mode so the kinds stay vivid against the dark panel. */
+@media (prefers-color-scheme: dark) {
+  .kc-state, .k-state { --kc: #c495f2; }
+  .kc-callback, .kc-function, .k-callback, .k-function { --kc: #f07cc0; }
+  .kc-render, .k-render { --kc: #ff7b72; }
+  .kc-effect, .k-effect { --kc: #ffab4a; }
+  .kc-hook, .k-hook { --kc: #e8cd45; }
+  .kc-ref, .k-ref { --kc: #5fd987; }
+  .kc-context, .kc-store, .k-context, .k-store { --kc: #44d4cd; }
+  .kc-derived, .kc-memo, .k-derived, .k-memo { --kc: #74b4ff; }
+  .ol-icon[class*="k-"] { background: color-mix(in srgb, var(--kc) 24%, transparent); }
+}
+.k-render { font-size: 9px; }
+
+/* Used in: like the props rows (these are props, as a parent passes them), one block per place. */
+.used { padding: 10px 0; border-top: 1px solid var(--line); }
+.used:first-child { border-top: 0; padding-top: 2px; }
+.used-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 12.5px; }
+.used-head a.ref { color: var(--fg); font: 650 12px ui-monospace, monospace; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; }
+.used-head a.ref:hover { color: var(--accent); text-decoration: none; border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
+.used-in { color: var(--muted); }
+.used-in code { background: none; padding: 0; }
+.used-this { margin-left: auto; font-size: 11px; color: var(--accent); }
+.used-this::before { content: "\u25CF "; font-size: 8px; vertical-align: 1px; }
+.used-props { display: grid; grid-template-columns: minmax(90px, 30%) 1fr; gap: 6px 12px; margin-top: 8px; align-items: baseline; }
+.used-props .prop-name { font-weight: normal; }
+.used-val { min-width: 0; display: flex; }
+.card a.used-var { text-decoration: none; cursor: pointer; }
+.card a.used-var:hover { color: var(--accent); }
+
+.timeline { list-style: none; margin: 4px 0 0 5px; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
+.timeline li { position: relative; margin: 0 0 10px; }
+.timeline li::before { content: ""; position: absolute; left: -21px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
+.tl-meta { font-size: 11px; color: var(--muted); }
+.tl-why { font-size: 12.5px; }
+
+.banner { margin: 14px 0 0; padding: 8px 10px; border-radius: 6px; font-size: 12px; background: color-mix(in srgb, #f5a524 16%, var(--bg)); color: var(--fg); overflow-wrap: anywhere; }
+.banner code { font: 11px ui-monospace, monospace; }
+.stale { opacity: .45; pointer-events: none; }
+.diffs { margin-top: 6px; }
+.diffs summary { cursor: pointer; color: var(--accent); }
+.difffile { margin: 8px 0 2px; font: 600 11px ui-monospace, monospace; }
+pre.diff { margin: 0; padding: 6px 0; max-height: 240px; overflow: auto; border-radius: 4px; background: var(--bg); font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+pre.diff span { display: block; padding: 0 8px; white-space: pre; }
+pre.diff .add { background: color-mix(in srgb, #30a46c 18%, transparent); }
+pre.diff .del { background: color-mix(in srgb, #e5484d 18%, transparent); }
+pre.diff .hunk { color: var(--muted); }
+
+.meta code { font: 11px ui-monospace, monospace; }
+
+.history { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
+.history h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
+.qa { border-bottom: 1px solid var(--line); }
+.qa > summary { padding: 7px 0; cursor: pointer; font-weight: 550; }
+.qa[open] > summary { color: var(--accent); }
+.qa-body { padding: 0 0 8px 14px; }
+.qa-body .progress { margin-top: 2px; }
+.tag { font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, #f5a524 22%, var(--bg)); }
+
+
+.ask { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--soft); }
+.ask input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); font: inherit; outline: none; }
+.ask input:focus { border-color: var(--accent); }
+.ask button { padding: 0 12px; border: 0; border-radius: 6px; background: var(--fg); color: var(--bg); font-weight: 600; cursor: pointer; }
+.ask button:hover { background: var(--accent); }
+`
+);
+
+// src/client/index.ts
+var LOC_ATTR = "data-rd-loc";
+var COMP_ATTR = "data-rd-comp";
+function parseLoc(el) {
+  const raw = el.getAttribute(LOC_ATTR);
+  const m = raw?.match(/^(.*):(\d+):(\d+)$/);
+  return m ? { file: m[1], line: +m[2], column: +m[3] } : null;
+}
+function resolveTarget(start) {
+  const el = start?.closest(`[${COMP_ATTR}]`);
+  if (!el) return null;
+  const comp = el.getAttribute(COMP_ATTR);
+  const file = parseLoc(el)?.file;
+  let root = el;
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    if (p.getAttribute(COMP_ATTR) !== comp || parseLoc(p)?.file !== file) break;
+    root = p;
+  }
+  const loc = parseLoc(root);
+  if (!loc) return null;
+  return { comp, ...loc, root, el: start };
+}
+function componentChain(t) {
+  const chain = [t];
+  let cur = t.root.parentElement;
+  while (cur) {
+    const parent = resolveTarget(cur);
+    if (!parent) break;
+    chain.unshift(parent);
+    cur = parent.root.parentElement;
+  }
+  return chain;
+}
+function modelName(id) {
+  const m = id.match(/^claude-([a-z]+)-(\d+)(?:-(\d+))?/);
+  return m ? `${m[1][0].toUpperCase()}${m[1].slice(1)} ${m[2]}${m[3] && m[3].length < 3 ? `.${m[3]}` : ""}` : id;
+}
+function init(options) {
+  const w = window;
+  if (w.__reactDetective) return w.__reactDetective;
+  const endpoint = options.endpoint.replace(/\/$/, "");
+  const host = document.createElement("react-detective");
+  host.style.cssText = "position:fixed;inset:0;pointer-events:none;z-index:2147483647;";
+  const shadow = host.attachShadow({ mode: "open" });
+  shadow.innerHTML = `<style>${STYLES}</style>
+    <div class="box" hidden></div>
+    <div class="box selected" hidden></div>
+    <div class="tip" hidden></div>
+    <button class="launcher" title="React Detective: press Alt (or click here) to inspect, then click any component. Esc to stop.">
+      <svg class="hat" viewBox="0 0 24 24" aria-hidden="true">
+        <path fill="currentColor" d="M1.5 16.6c2.7 1.8 6.4 2.6 10.5 2.6s7.8-.8 10.5-2.6c-1.5-.5-3-.8-4.4-.9l-1.3-7.4c-.3-1.7-1.4-2.5-2.6-2.1L12 7l-2.2-.8c-1.2-.4-2.3.4-2.6 2.1l-1.3 7.4c-1.4.1-2.9.4-4.4.9z"/>
+        <path class="band" d="M6.1 13.2c3.9.9 7.9.9 11.8 0l.35 2.1c-4.1 1-8.4 1-12.5 0z"/>
+      </svg>
+      <span class="label"><span class="off">Detective</span><span class="on">Select a component to inspect</span></span><kbd class="off">Alt</kbd><kbd class="on" title="Press Esc to stop inspecting">Esc</kbd>
+    </button>
+    <aside class="panel" hidden></aside>
+    <div class="type-pop" hidden></div>`;
+  document.documentElement.appendChild(host);
+  const $ = (sel) => shadow.querySelector(sel);
+  const hoverBox = $(".box:not(.selected)");
+  const selectedBox = $(".box.selected");
+  const tip = $(".tip");
+  const launcher = $(".launcher");
+  const panel = $(".panel");
+  const pop = $(".type-pop");
+  let currentTypes = /* @__PURE__ */ new Map();
+  if (options.showLauncher === false) launcher.hidden = true;
+  let altDown = false;
+  let sticky = false;
+  let hovered = null;
+  let selected = null;
+  let pointer = { x: -1, y: -1 };
+  let request = null;
+  let raf = 0;
+  const inspecting = () => altDown || sticky;
+  function setInspecting() {
+    const on = inspecting();
+    launcher.classList.toggle("active", on);
+    document.documentElement.style.cursor = on ? "crosshair" : "";
+    if (on) updateHover();
+    else hideHover();
+  }
+  function place(box, el) {
+    const r = el.getBoundingClientRect();
+    box.hidden = false;
+    box.style.transform = `translate(${r.left}px, ${r.top}px)`;
+    box.style.width = `${r.width}px`;
+    box.style.height = `${r.height}px`;
+    return r;
+  }
+  function hideHover() {
+    hovered = null;
+    hoverBox.hidden = true;
+    tip.hidden = true;
+  }
+  function updateHover() {
+    if (!inspecting() || pointer.x < 0) return;
+    const el = document.elementFromPoint(pointer.x, pointer.y);
+    const t = el && !host.contains(el) ? resolveTarget(el) : null;
+    if (!t) return hideHover();
+    hovered = t;
+    const r = place(hoverBox, t.root);
+    tip.hidden = false;
+    tip.innerHTML = `<span class="name">&lt;${esc(t.comp)}&gt;</span><span class="path">${esc(t.file)}:${t.line}</span>`;
+    const tr = tip.getBoundingClientRect();
+    const top = r.top - tr.height - 6 >= 0 ? r.top - tr.height - 6 : Math.min(r.bottom + 6, innerHeight - tr.height - 4);
+    const left = Math.max(4, Math.min(r.left, innerWidth - tr.width - 4));
+    tip.style.transform = `translate(${left}px, ${top}px)`;
+  }
+  function trackSelected() {
+    cancelAnimationFrame(raf);
+    const tick = () => {
+      if (!selected || !selected.root.isConnected) {
+        selectedBox.hidden = true;
+        return;
+      }
+      place(selectedBox, selected.root);
+      raf = requestAnimationFrame(tick);
+    };
+    tick();
+  }
+  function select(t) {
+    selected = t;
+    sticky = false;
+    setInspecting();
+    trackSelected();
+    const chain = componentChain(t);
+    const live = readLiveData(t.root, t.comp);
+    currentTypes = /* @__PURE__ */ new Map();
+    pop.hidden = true;
+    panel.hidden = false;
+    panel.innerHTML = `
+      <header>
+        ${chain.length > 1 ? `<nav class="crumbs" title="Rendered inside these components. Click one to inspect it.">${chain.slice(0, -1).map((c, i) => `<button data-crumb="${i}">${esc(c.comp)}</button>`).join('<span class="sep">\u203A</span>')}<span class="sep">\u203A</span></nav>` : ""}
+        <button class="icon close" title="Close (Esc)">\u2715</button>
+        <div class="title">
+          <a class="src title-link" data-file="${esc(t.file)}" data-line="${t.line}" data-col="${t.column}" title="Open ${esc(t.file)}:${t.line} in your editor">
+            <h1>&lt;${esc(t.comp)}&gt;</h1><span class="title-goto">\u2197</span>
+          </a>
+          <button class="icon refresh" title="Regenerate the explanation">\u21BB</button>
+        </div>
+        <div class="meta-row">
+          <span class="status" hidden></span>
+          <span class="gitinfo" hidden></span>
+        </div>
+      </header>
+      <div class="body">
+        <section class="explanation"></section>
+        <section class="history" hidden></section>
+      </div>
+      <form class="ask">
+        <input name="q" placeholder="Ask about &lt;${esc(t.comp)}&gt;\u2026 (e.g. when does it re-render?)" autocomplete="off" />
+        <button type="submit">Ask</button>
+      </form>`;
+    panel.querySelector(".close").addEventListener("click", closePanel);
+    panel.querySelector(".refresh").addEventListener("click", () => run(true));
+    panel.querySelectorAll("[data-crumb]").forEach(
+      (b) => b.addEventListener("click", () => select(chain[Number(b.dataset.crumb)]))
+    );
+    panel.querySelector("form").addEventListener("submit", (e) => {
+      e.preventDefault();
+      const input = e.target.q;
+      const q = input.value.trim();
+      if (!q) return;
+      input.value = "";
+      ask(q);
+    });
+    function ask(q) {
+      const list = questionList();
+      const key = normalizeQuestion(q);
+      let entry = [...list.querySelectorAll(".qa")].find((d) => d.dataset.key === key);
+      if (!entry) {
+        entry = document.createElement("details");
+        entry.className = "qa";
+        entry.dataset.key = key;
+        entry.innerHTML = `<summary>${esc(q)}</summary><div class="qa-body"></div>`;
+      }
+      entry.querySelector(".tag")?.remove();
+      list.append(entry);
+      entry.open = true;
+      updateQuestionCount();
+      entry.scrollIntoView({ behavior: "smooth", block: "start" });
+      stream({ question: q }, entry.querySelector(".qa-body"), false);
+    }
+    function questionList() {
+      const section2 = panel.querySelector(".history");
+      if (!section2.querySelector(".qa-list")) {
+        section2.innerHTML = `<h3>Questions asked <span class="count">0</span></h3><div class="qa-list"></div>`;
+      }
+      section2.hidden = false;
+      return section2.querySelector(".qa-list");
+    }
+    function updateQuestionCount() {
+      const section2 = panel.querySelector(".history");
+      section2.querySelector(".count").textContent = String(section2.querySelectorAll(".qa").length);
+    }
+    function setStatus(text, detail = "") {
+      const el = panel.querySelector(".status");
+      el.textContent = text;
+      el.title = detail;
+      el.hidden = !text;
+    }
+    function renderGitLine(last, uncommitted) {
+      const el = panel.querySelector(".gitinfo");
+      if (!last) return;
+      el.innerHTML = `${esc(last.author)}, ${esc(shortDate(last.date))}${uncommitted ? ' <span class="tag">uncommitted</span>' : ""}`;
+      el.title = `Last changed in ${last.sha}: ${last.subject}${uncommitted ? "\nThe file also has uncommitted changes." : ""}`;
+      el.hidden = false;
+    }
+    let historyRendered = false;
+    function renderHistory(questions) {
+      if (historyRendered || !questions.length) return;
+      historyRendered = true;
+      const list = questionList();
+      list.innerHTML = questions.map(
+        (q) => `<details class="qa" data-key="${esc(normalizeQuestion(q.question))}">
+            <summary>${esc(q.question)}${q.stale ? ' <span class="tag">outdated</span>' : ""}</summary>
+            <div class="qa-body">
+              <div class="md">${renderMarkdown(q.answer)}</div>
+              <div class="meta">${timeAgo(q.createdAt)}${q.stale ? ` \xB7 code changed since \xB7 <button class="link" data-reask>ask again</button>` : ""}</div>
+            </div>
+          </details>`
+      ).join("");
+      updateQuestionCount();
+      list.querySelectorAll("[data-reask]").forEach(
+        (b) => b.addEventListener("click", () => ask(b.closest(".qa").querySelector("summary").textContent.trim()))
+      );
+    }
+    const run = (refresh) => stream({ refresh }, panel.querySelector(".explanation"), true);
+    run(false);
+    function stream(extra, target, primary) {
+      if (primary) request?.abort();
+      const ctrl = new AbortController();
+      if (primary) request = ctrl;
+      const progressHtml = (label) => `<div class="progress"><div class="spinner"></div><span>${label}</span></div><ul class="steps"></ul>`;
+      const current = primary ? target.querySelector(".card")?.outerHTML ?? "" : "";
+      target.innerHTML = progressHtml(current ? "Regenerating\u2026" : "Exploring the codebase\u2026") + (current ? `<div class="stale">${current}</div>` : "");
+      if (primary) setStatus("");
+      else target.closest("details")?.setAttribute("open", "");
+      let steps = target.querySelector(".steps");
+      const content = (ev) => primary && ev.card ? `<div class="card">${renderCard(ev.card, { component: t.comp, file: t.file, live, slots: ev.slots })}</div>` : `<div class="md">${renderMarkdown(ev.markdown)}</div>`;
+      const body = {
+        component: t.comp,
+        file: t.file,
+        line: t.line,
+        chain: chain.map((c) => c.comp),
+        props: live.props,
+        state: live.state,
+        elementText: t.el.innerText?.trim().slice(0, 200) || void 0,
+        ...extra
+      };
+      readStream(`${endpoint}/explain`, body, ctrl.signal, (ev) => {
+        for (const def of ev.types ?? []) currentTypes.set(def.name, def);
+        handle(ev);
+        if (ev.type === "result" || ev.type === "stale" || ev.type === "history" || ev.type === "skeleton") {
+          const body2 = panel.querySelector(".body");
+          linkTypes(body2, currentTypes);
+          linkSymbols(body2);
+        }
+      }).catch((err) => {
+        if (ctrl.signal.aborted) return;
+        target.innerHTML = `<div class="error">Could not reach the react-detective server at <code>${esc(endpoint)}</code>.<br>${esc(String(err?.message ?? err))}</div>`;
+      });
+      function handle(ev) {
+        if (ev.type === "progress") {
+          const li = document.createElement("li");
+          li.textContent = ev.text;
+          steps.appendChild(li);
+          while (steps.children.length > 6) steps.firstElementChild.remove();
+        } else if (ev.type === "skeleton") {
+          if (!primary || current) return;
+          const done = steps.innerHTML;
+          target.innerHTML = progressHtml("Writing the explanations\u2026") + `<div class="card skeleton">${renderCard(ev.card, { component: t.comp, file: t.file, live, slots: ev.slots })}</div>`;
+          steps = target.querySelector(".steps");
+          steps.innerHTML = done;
+        } else if (ev.type === "context") {
+          renderGitLine(ev.lastChange, ev.uncommitted);
+        } else if (ev.type === "history") {
+          renderHistory(ev.questions);
+        } else if (ev.type === "stale") {
+          const changes = ev.changes;
+          const files = changes.map((c) => `<code>${esc(c.file)}</code>${c.deleted ? " (deleted)" : ""}`).join(", ");
+          const diffs = changes.filter((c) => c.diff);
+          target.innerHTML = `<div class="banner">Code changed since this was written${ev.git ? ` at <code>${esc(ev.git.commit)}</code>` : ""} (${files}).
+              If the changes were significant, you might need to <button class="link" data-regenerate>generate a new explanation</button>.
+              ${diffs.length ? `<details class="diffs"><summary>Show what changed</summary>${diffs.map((c) => renderDiff(c.diff)).join("")}</details>` : ""}
+            </div>
+            ${progressHtml("Re-reading what changed\u2026")}
+            <div class="stale">${content(ev)}</div>`;
+          steps = target.querySelector(".steps");
+          target.querySelector("[data-regenerate]")?.addEventListener("click", () => run(true));
+        } else if (ev.type === "result") {
+          let meta = "";
+          const at = ev.git ? ` at <code>${esc(ev.git.commit)}</code>${ev.git.branch && ev.git.branch !== "HEAD" ? ` (${esc(ev.git.branch)})` : ""}${ev.git.dirty ? " with uncommitted changes" : ""}` : "";
+          let short = "";
+          if (ev.cached) {
+            meta = primary ? `Saved ${timeAgo(ev.createdAt)}${at} \xB7 code unchanged` : `Answered before (${timeAgo(ev.createdAt)}${at}) \xB7 code unchanged`;
+            short = `Saved ${timeAgo(ev.createdAt)}`;
+          } else {
+            short = `Generated just now${ev.costUsd ? ` \xB7 $${ev.costUsd.toFixed(2)}` : ""}`;
+            const bits = [`Explored live${at}`];
+            if (ev.model) bits.push(modelName(ev.model));
+            if (ev.turns) bits.push(`${ev.turns} step${ev.turns === 1 ? "" : "s"}`);
+            if (ev.filesRead !== void 0) bits.push(`read ${ev.filesRead} file${ev.filesRead === 1 ? "" : "s"}`);
+            const reused = [
+              ev.notesReused && `${ev.notesReused} note${ev.notesReused === 1 ? "" : "s"}`,
+              ev.exportsReused && `${ev.exportsReused} import${ev.exportsReused === 1 ? "" : "s"}`,
+              ev.answersReused && `${ev.answersReused} past answer${ev.answersReused === 1 ? "" : "s"}`
+            ].filter(Boolean);
+            if (reused.length) bits.push(`reused ${reused.join(" + ")}`);
+            if (ev.costUsd) bits.push(`~$${ev.costUsd.toFixed(3)}`);
+            meta = bits.join(" \xB7 ");
+          }
+          if (primary) {
+            setStatus(short, meta.replace(/<[^>]+>/g, ""));
+            target.innerHTML = content(ev);
+          } else {
+            target.innerHTML = `${content(ev)}<div class="meta">${meta}</div>`;
+            target.closest("details")?.setAttribute("open", "");
+          }
+        } else if (ev.type === "error") {
+          if (primary) setStatus("");
+          const message = esc(ev.message).replace(/^(ANTHROPIC_API_KEY=.*)$/m, "<code>$1</code>").replace(/(https:\/\/\S+?)(\.?)(?=\s|$)/g, '<a href="$1" target="_blank" rel="noopener">$1</a>$2').replace(/\n/g, "<br>");
+          const box = `<div class="${ev.code === "no-api-key" ? "banner" : "error"}">${message}</div>`;
+          const skeleton = target.querySelector(".card.skeleton");
+          const dimmed = target.querySelector(":scope > .stale");
+          if (!dimmed && !skeleton) return void (target.innerHTML = box);
+          target.querySelectorAll(":scope > .progress, :scope > .steps").forEach((el) => el.remove());
+          dimmed?.replaceWith(...dimmed.childNodes);
+          const pending = skeleton?.querySelector(".summary.pending");
+          if (pending) pending.textContent = "No explanation yet. The outline below is read straight from the code.";
+          target.insertAdjacentHTML("afterbegin", box);
+        }
+      }
+    }
+  }
+  function closePanel() {
+    request?.abort();
+    selected = null;
+    panel.hidden = true;
+    pop.hidden = true;
+    selectedBox.hidden = true;
+    cancelAnimationFrame(raf);
+  }
+  let hideTimer = 0;
+  let shownFor = null;
+  function showRef(ref) {
+    clearTimeout(hideTimer);
+    if (ref === shownFor && !pop.hidden) return;
+    let html = "";
+    if (ref.dataset.type) {
+      const def = currentTypes.get(ref.dataset.type);
+      if (def) html = typePopover(def, currentTypes);
+    } else {
+      const def = findDefinition(panel, ref.dataset.sym);
+      if (def) html = symbolPopover(def);
+    }
+    if (!html) return;
+    const inPop = pop.contains(ref);
+    pop.innerHTML = html;
+    pop.hidden = false;
+    shownFor = inPop ? null : ref;
+    if (inPop) return;
+    pop.style.left = "0px";
+    pop.style.top = "0px";
+    const r = ref.getBoundingClientRect();
+    const p = pop.getBoundingClientRect();
+    const left = Math.max(8, Math.min(r.left, innerWidth - p.width - 8));
+    const top = r.bottom + 6 + p.height < innerHeight - 8 ? r.bottom + 6 : Math.max(8, r.top - p.height - 6);
+    pop.style.left = `${left}px`;
+    pop.style.top = `${top}px`;
+  }
+  const hidePopSoon = () => {
+    clearTimeout(hideTimer);
+    hideTimer = window.setTimeout(() => pop.hidden = true, 200);
+  };
+  for (const el of [panel, pop]) {
+    el.addEventListener("mouseover", (e) => {
+      const ref = e.target.closest(".type-ref, .sym-ref");
+      if (ref && !(el === pop && ref.classList.contains("sym-ref"))) showRef(ref);
+      else if (el === pop) clearTimeout(hideTimer);
+    });
+    el.addEventListener("mouseout", (e) => {
+      if (el === pop || e.target.closest(".type-ref, .sym-ref")) hidePopSoon();
+    });
+  }
+  pop.addEventListener("click", (e) => onPanelClick(e));
+  panel.addEventListener("click", (e) => onPanelClick(e));
+  function onPanelClick(e) {
+    const target = e.target;
+    const a = target.closest("a.src");
+    if (a) {
+      e.preventDefault();
+      fetch(`${endpoint}/open`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ file: a.dataset.file, line: a.dataset.line, column: a.dataset.col })
+      }).catch(() => {
+      });
+      return;
+    }
+    const sym = target.closest(".sym-ref");
+    if (sym) {
+      const def = findDefinition(panel, sym.dataset.sym);
+      if (def) {
+        e.preventDefault();
+        pop.hidden = true;
+        revealDefinition(def);
+      }
+      return;
+    }
+    const all = target.closest("[data-expand-all]");
+    if (all) {
+      e.preventDefault();
+      const sec = all.closest(".sec");
+      const nodes = [...sec?.querySelectorAll(".ol-node") ?? []];
+      const groups = [...sec?.querySelectorAll("details.ol-group") ?? []];
+      const open = nodes.some((n) => !n.classList.contains("open")) || groups.some((g) => !g.open);
+      nodes.forEach((n) => n.classList.toggle("open", open));
+      if (open) groups.forEach((g) => g.open = true);
+      all.textContent = open ? "collapse all" : "expand all";
+      return;
+    }
+    const row = target.closest(".ol-row");
+    if (row) return row.parentElement.classList.toggle("open");
+    const value = target.closest(".expandable");
+    if (value && !target.closest(".val-tree")) value.classList.toggle("open");
+  }
+  launcher.addEventListener("click", (e) => {
+    if (justDragged) {
+      justDragged = false;
+      return e.preventDefault();
+    }
+    sticky = !sticky;
+    setInspecting();
+  });
+  const CORNER_KEY = "react-detective:launcher-corner";
+  let justDragged = false;
+  function setCorner(c) {
+    launcher.dataset.corner = c;
+  }
+  try {
+    const saved = localStorage.getItem(CORNER_KEY);
+    setCorner(saved === "tl" || saved === "tr" || saved === "bl" ? saved : "br");
+  } catch {
+    setCorner("br");
+  }
+  launcher.addEventListener("pointerdown", (down) => {
+    if (down.button !== 0) return;
+    const start = launcher.getBoundingClientRect();
+    launcher.setPointerCapture(down.pointerId);
+    let dragging = false;
+    const move = (e) => {
+      const dx = e.clientX - down.clientX;
+      const dy = e.clientY - down.clientY;
+      if (!dragging && Math.hypot(dx, dy) < 5) return;
+      if (!dragging) {
+        dragging = true;
+        launcher.classList.add("dragging");
+      }
+      const x = Math.max(0, Math.min(innerWidth - start.width, start.left + dx));
+      const y = Math.max(0, Math.min(innerHeight - start.height, start.top + dy));
+      launcher.style.cssText = `left:${x}px;top:${y}px;right:auto;bottom:auto;`;
+    };
+    const up = () => {
+      launcher.removeEventListener("pointermove", move);
+      launcher.removeEventListener("pointerup", up);
+      launcher.removeEventListener("pointercancel", up);
+      if (!dragging) return;
+      justDragged = true;
+      setTimeout(() => justDragged = false, 0);
+      const from = launcher.getBoundingClientRect();
+      const cx = from.left + from.width / 2;
+      const cy = from.top + from.height / 2;
+      const corner = `${cy < innerHeight / 2 ? "t" : "b"}${cx < innerWidth / 2 ? "l" : "r"}`;
+      launcher.style.cssText = "";
+      launcher.classList.remove("dragging");
+      setCorner(corner);
+      try {
+        localStorage.setItem(CORNER_KEY, corner);
+      } catch {
+      }
+      const to = launcher.getBoundingClientRect();
+      launcher.animate(
+        [{ transform: `translate(${from.left - to.left}px, ${from.top - to.top}px)` }, { transform: "none" }],
+        { duration: matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 220, easing: "cubic-bezier(.2, .9, .3, 1.15)" }
+      );
+    };
+    launcher.addEventListener("pointermove", move);
+    launcher.addEventListener("pointerup", up);
+    launcher.addEventListener("pointercancel", up);
+  });
+  const onMove = (e) => {
+    pointer = { x: e.clientX, y: e.clientY };
+    if (inspecting()) updateHover();
+  };
+  let altAlone = false;
+  const onKeyDown = (e) => {
+    if (e.key === "Alt") {
+      if (!altDown) {
+        altDown = true;
+        altAlone = true;
+        setInspecting();
+      }
+      e.preventDefault();
+      return;
+    }
+    altAlone = false;
+    if (e.key === "Escape") {
+      if (sticky) {
+        sticky = false;
+        setInspecting();
+      } else if (selected) closePanel();
+    }
+  };
+  const onKeyUp = (e) => {
+    if (e.key === "Alt") {
+      altDown = false;
+      if (altAlone) sticky = !sticky;
+      altAlone = false;
+      setInspecting();
+      e.preventDefault();
+    }
+  };
+  const onBlur = () => {
+    altDown = false;
+    altAlone = false;
+    setInspecting();
+  };
+  const swallow = (e) => {
+    if (e.type === "pointerdown") altAlone = false;
+    if (!inspecting() || !hovered || host.contains(e.target)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    if (e.type === "click") select(hovered);
+  };
+  const onScroll = () => inspecting() && updateHover();
+  addEventListener("pointermove", onMove, { capture: true, passive: true });
+  addEventListener("keydown", onKeyDown, true);
+  addEventListener("keyup", onKeyUp, true);
+  addEventListener("blur", onBlur);
+  addEventListener("scroll", onScroll, { capture: true, passive: true });
+  for (const type of ["pointerdown", "mousedown", "pointerup", "mouseup", "click"]) addEventListener(type, swallow, true);
+  const cleanup = () => {
+    request?.abort();
+    cancelAnimationFrame(raf);
+    removeEventListener("pointermove", onMove, true);
+    removeEventListener("keydown", onKeyDown, true);
+    removeEventListener("keyup", onKeyUp, true);
+    removeEventListener("blur", onBlur);
+    removeEventListener("scroll", onScroll, true);
+    for (const type of ["pointerdown", "mousedown", "pointerup", "mouseup", "click"]) removeEventListener(type, swallow, true);
+    document.documentElement.style.cursor = "";
+    host.remove();
+    delete w.__reactDetective;
+  };
+  w.__reactDetective = cleanup;
+  return cleanup;
+}
+async function readStream(url, body, signal, onEvent) {
+  const res = await fetch(url, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body),
+    signal
+  });
+  if (!res.ok || !res.body) {
+    const text = await res.text().catch(() => "");
+    let message = text;
+    try {
+      message = JSON.parse(text).error ?? text;
+    } catch {
+    }
+    throw new Error(`${res.status} ${message}`);
+  }
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buf = "";
+  for (; ; ) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buf += decoder.decode(value, { stream: true });
+    let nl;
+    while ((nl = buf.indexOf("\n")) >= 0) {
+      const line = buf.slice(0, nl).trim();
+      buf = buf.slice(nl + 1);
+      if (line) onEvent(JSON.parse(line));
+    }
+  }
+}
+function renderDiff(diff) {
+  const lines = diff.split("\n").filter((l) => !l.startsWith("--- ") && !l.startsWith("+++ ") && !l.startsWith("Index:") && !l.startsWith("\\ No newline")).map((l) => {
+    const cls = l.startsWith("@@") ? "hunk" : l.startsWith("+") ? "add" : l.startsWith("-") ? "del" : "";
+    return `<span class="${cls}">${esc(l) || " "}</span>`;
+  }).join("");
+  const file = diff.match(/^\+\+\+ b\/(.+?)(\t|$)/m)?.[1] ?? "";
+  return `<div class="difffile">${esc(file)}</div><pre class="diff">${lines}</pre>`;
+}
+function timeAgo(ts) {
+  if (!ts) return "";
+  const s = Math.round((Date.now() - ts) / 1e3);
+  if (s < 60) return "just now";
+  if (s < 3600) return `${Math.round(s / 60)}m ago`;
+  if (s < 86400) return `${Math.round(s / 3600)}h ago`;
+  return `${Math.round(s / 86400)}d ago`;
+}
+function normalizeQuestion(q) {
+  return q.toLowerCase().replace(/[^\p{L}\p{N}]+/gu, " ").trim();
+}
+function shortDate(iso) {
+  const d = /* @__PURE__ */ new Date(`${iso}T00:00:00`);
+  if (isNaN(d.getTime())) return iso;
+  const sameYear = d.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear();
+  return d.toLocaleDateString(void 0, { month: "short", day: "numeric", ...sameYear ? {} : { year: "numeric" } });
+}
+export {
+  init
+};