@flanksource/clicky-ui 0.3.25 → 0.3.27

package/dist/devtools/DebugConsoleButton.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { subscribeToDebugConsole, debugConsoleOpen, revealDebugConsole } from "../data/debugConsoleSignal.js";
+import { cn } from "../lib/utils.js";
+import { debugStore } from "./debugStore.js";
+import { UiDebug } from "../icons/components/UiDebug.js";
+function DebugConsoleButton({
+  label = "Debug console",
+  className,
+  store = debugStore
+}) {
+  const open = useSyncExternalStore(subscribeToDebugConsole, debugConsoleOpen, () => false);
+  const state = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const failures = state.records.filter(hasFailed).length;
+  const badge = failures > 0 ? failures : state.records.length;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      "aria-pressed": open,
+      title: triggerTitle(state.records.length, failures, open),
+      onClick: () => revealDebugConsole({ toggle: true }),
+      className: cn(
+        "relative inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-transparent text-foreground transition-colors hover:bg-accent",
+        open && "bg-accent",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(UiDebug, { className: "size-5", "aria-hidden": true }),
+        badge > 0 ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "-right-0.5 -top-0.5 absolute min-w-4 rounded-full px-1 text-[10px] leading-4 tabular-nums",
+              failures > 0 ? "bg-destructive text-destructive-foreground" : "bg-muted text-muted-foreground"
+            ),
+            children: badge > 99 ? "99+" : badge
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function hasFailed(record) {
+  return Boolean(record.error) || record.status !== void 0 && record.status >= 400;
+}
+function triggerTitle(records, failures, open) {
+  const action = open ? "Hide" : "Show";
+  if (records === 0) return `${action} the debug console`;
+  const captures = `${records} capture${records === 1 ? "" : "s"}`;
+  if (failures === 0) return `${action} the debug console — ${captures}`;
+  return `${action} the debug console — ${captures}, ${failures} failed`;
+}
+export {
+  DebugConsoleButton
+};
+//# sourceMappingURL=DebugConsoleButton.js.map

package/dist/devtools/DebugConsoleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugConsoleButton.js","sources":["../../src/devtools/DebugConsoleButton.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport {\n  debugConsoleOpen,\n  revealDebugConsole,\n  subscribeToDebugConsole,\n} from \"../data/debugConsoleSignal\";\nimport { UiDebug } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { debugStore, type DebugStore } from \"./debugStore\";\n\n/**\n * The console's trigger, styled as navbar chrome for AppShell's actions slot.\n *\n * It replaced a collapsed status bar pinned under the page. The bar cost a\n * strip of every screen to say something only a developer wants, and it sat\n * where a page's own footer belongs; the navbar is where an app's other global\n * affordances already are, beside the chat trigger.\n *\n * The badge is what the bar was actually for. A trigger that says nothing gives\n * no reason to press it — \"3 errors\" does.\n */\n\nexport type DebugConsoleButtonProps = {\n  label?: string | undefined;\n  className?: string | undefined;\n  /** The capture store to count. Defaults to the shared one the dock streams into. */\n  store?: DebugStore | undefined;\n};\n\nexport function DebugConsoleButton({\n  label = \"Debug console\",\n  className,\n  store = debugStore,\n}: DebugConsoleButtonProps) {\n  const open = useSyncExternalStore(subscribeToDebugConsole, debugConsoleOpen, () => false);\n  const state = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n  const failures = state.records.filter(hasFailed).length;\n  const badge = failures > 0 ? failures : state.records.length;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      aria-pressed={open}\n      title={triggerTitle(state.records.length, failures, open)}\n      onClick={() => revealDebugConsole({ toggle: true })}\n      className={cn(\n        \"relative inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-transparent text-foreground transition-colors hover:bg-accent\",\n        open && \"bg-accent\",\n        className,\n      )}\n    >\n      <UiDebug className=\"size-5\" aria-hidden />\n      {badge > 0 ? (\n        <span\n          aria-hidden\n          className={cn(\n            \"-right-0.5 -top-0.5 absolute min-w-4 rounded-full px-1 text-[10px] leading-4 tabular-nums\",\n            failures > 0\n              ? \"bg-destructive text-destructive-foreground\"\n              : \"bg-muted text-muted-foreground\",\n          )}\n        >\n          {badge > 99 ? \"99+\" : badge}\n        </span>\n      ) : null}\n    </button>\n  );\n}\n\n/**\n * A failed capture is either one the transport reported an error for or one\n * whose status came back 4xx/5xx — a record can carry the second without the\n * first when the handler wrote the status itself.\n */\nfunction hasFailed(record: { error?: string | undefined; status?: number | undefined }): boolean {\n  return Boolean(record.error) || (record.status !== undefined && record.status >= 400);\n}\n\nfunction triggerTitle(records: number, failures: number, open: boolean): string {\n  const action = open ? \"Hide\" : \"Show\";\n  if (records === 0) return `${action} the debug console`;\n  const captures = `${records} capture${records === 1 ? \"\" : \"s\"}`;\n  if (failures === 0) return `${action} the debug console — ${captures}`;\n  return `${action} the debug console — ${captures}, ${failures} failed`;\n}\n"],"names":[],"mappings":";;;;;;AA6BO,SAAS,mBAAmB;AAAA,EACjC,QAAQ;AAAA,EACR;AAAA,EACA,QAAQ;AACV,GAA4B;AAC1B,QAAM,OAAO,qBAAqB,yBAAyB,kBAAkB,MAAM,KAAK;AACxF,QAAM,QAAQ,qBAAqB,MAAM,WAAW,MAAM,aAAa,MAAM,WAAW;AACxF,QAAM,WAAW,MAAM,QAAQ,OAAO,SAAS,EAAE;AACjD,QAAM,QAAQ,WAAW,IAAI,WAAW,MAAM,QAAQ;AAEtD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd,OAAO,aAAa,MAAM,QAAQ,QAAQ,UAAU,IAAI;AAAA,MACxD,SAAS,MAAM,mBAAmB,EAAE,QAAQ,MAAM;AAAA,MAClD,WAAW;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,SAAA,EAAQ,WAAU,UAAS,eAAW,MAAC;AAAA,QACvC,QAAQ,IACP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAW;AAAA,cACT;AAAA,cACA,WAAW,IACP,+CACA;AAAA,YAAA;AAAA,YAGL,UAAA,QAAQ,KAAK,QAAQ;AAAA,UAAA;AAAA,QAAA,IAEtB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAAS,UAAU,QAA8E;AAC/F,SAAO,QAAQ,OAAO,KAAK,KAAM,OAAO,WAAW,UAAa,OAAO,UAAU;AACnF;AAEA,SAAS,aAAa,SAAiB,UAAkB,MAAuB;AAC9E,QAAM,SAAS,OAAO,SAAS;AAC/B,MAAI,YAAY,EAAG,QAAO,GAAG,MAAM;AACnC,QAAM,WAAW,GAAG,OAAO,WAAW,YAAY,IAAI,KAAK,GAAG;AAC9D,MAAI,aAAa,EAAG,QAAO,GAAG,MAAM,wBAAwB,QAAQ;AACpE,SAAO,GAAG,MAAM,wBAAwB,QAAQ,KAAK,QAAQ;AAC/D;"}

package/dist/devtools/DebugConsoleDock.cjs

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const debugConsoleSignal = require("../data/debugConsoleSignal.cjs");
+const DebugConsole = require("./DebugConsole.cjs");
+const debugStore = require("./debugStore.cjs");
+const useDebugStream = require("./useDebugStream.cjs");
+const dockState = require("./dockState.cjs");
+const MIN_DOCK_HEIGHT = 160;
+const DEFAULT_DOCK_HEIGHT = 320;
+const HEIGHT_STORAGE_KEY = "clicky-ui.devtools.height";
+function DebugConsoleDock({
+  client,
+  store = debugStore.debugStore,
+  defaultOpen,
+  createEventSource
+}) {
+  const initial = dockState.readDockState();
+  const [open, setOpen] = react.useState(defaultOpen ?? initial.open);
+  const [tab, setTab] = react.useState(initial.tab);
+  const [height, setHeight] = react.useState(() => readHeight());
+  const state = useDebugStream.useDebugStream({ enabled: open, client, store, createEventSource });
+  react.useEffect(() => {
+    store.setLevel(initial.level);
+  }, []);
+  react.useEffect(() => {
+    dockState.writeDockState({ open, tab, level: state.level });
+    debugConsoleSignal.setDebugCaptureLevel(open ? state.level : "off");
+    debugConsoleSignal.setDebugRefreshInspection(open && state.refreshInspection);
+    debugConsoleSignal.setDebugConsoleOpen(open);
+  }, [open, tab, state.level, state.refreshInspection]);
+  react.useEffect(
+    () => debugConsoleSignal.registerDebugConsole((request) => {
+      setOpen((current) => request.toggle ? !current : true);
+      if (request.tab) setTab(request.tab);
+    }),
+    []
+  );
+  react.useEffect(() => () => debugConsoleSignal.setDebugConsoleOpen(false), []);
+  const startResize = useResizeHandle(height, (next) => {
+    setHeight(next);
+    writeHeight(next);
+  });
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex shrink-0 flex-col border-border border-t bg-background",
+      style: { height },
+      "data-testid": "devtools-dock",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Resize console",
+            className: "h-1 w-full cursor-row-resize bg-transparent hover:bg-border",
+            onMouseDown: startResize
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx(
+          DebugConsole.DebugConsole,
+          {
+            state,
+            store,
+            client,
+            tab,
+            onTabChange: setTab,
+            onClose: () => setOpen(false)
+          }
+        ) })
+      ]
+    }
+  );
+}
+function useResizeHandle(height, onHeight) {
+  const heightRef = react.useRef(height);
+  heightRef.current = height;
+  return react.useCallback(
+    (event) => {
+      event.preventDefault();
+      const startY = event.clientY;
+      const startHeight = heightRef.current;
+      const onMove = (move) => {
+        onHeight(Math.max(MIN_DOCK_HEIGHT, startHeight + (startY - move.clientY)));
+      };
+      const onUp = () => {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [onHeight]
+  );
+}
+function readHeight() {
+  var _a;
+  if (typeof window === "undefined") return DEFAULT_DOCK_HEIGHT;
+  const stored = Number((_a = window.localStorage) == null ? void 0 : _a.getItem(HEIGHT_STORAGE_KEY));
+  return Number.isFinite(stored) && stored >= MIN_DOCK_HEIGHT ? stored : DEFAULT_DOCK_HEIGHT;
+}
+function writeHeight(height) {
+  var _a;
+  if (typeof window === "undefined") return;
+  (_a = window.localStorage) == null ? void 0 : _a.setItem(HEIGHT_STORAGE_KEY, String(height));
+}
+exports.DEFAULT_DOCK_HEIGHT = DEFAULT_DOCK_HEIGHT;
+exports.DebugConsoleDock = DebugConsoleDock;
+exports.MIN_DOCK_HEIGHT = MIN_DOCK_HEIGHT;
+//# sourceMappingURL=DebugConsoleDock.cjs.map

package/dist/devtools/DebugConsoleDock.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugConsoleDock.cjs","sources":["../../src/devtools/DebugConsoleDock.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  registerDebugConsole,\n  setDebugCaptureLevel,\n  setDebugConsoleOpen,\n  setDebugRefreshInspection,\n} from \"../data/debugConsoleSignal\";\nimport { DebugClient } from \"./debugClient\";\nimport { DebugConsole, type DebugTab } from \"./DebugConsole\";\nimport { debugStore, type DebugStore } from \"./debugStore\";\nimport { useDebugStream } from \"./useDebugStream\";\nimport { readDockState, writeDockState } from \"./dockState\";\n\n/**\n * Where the console lives: a flex sibling that shrinks the page, not an overlay\n * on top of it.\n *\n * Chrome devtools docks for a reason — an overlay hides the rows you opened the\n * console to explain. A sibling costs the host one wrapper it already has, and\n * covers the takeover pages that bypass the app shell entirely, which a shell\n * slot would not.\n */\n\nexport const MIN_DOCK_HEIGHT = 160;\nexport const DEFAULT_DOCK_HEIGHT = 320;\nconst HEIGHT_STORAGE_KEY = \"clicky-ui.devtools.height\";\n\nexport type DebugConsoleDockProps = {\n  client?: DebugClient | undefined;\n  store?: DebugStore | undefined;\n  /** Starts open. Otherwise the dock renders nothing until its trigger is used. */\n  defaultOpen?: boolean | undefined;\n  /**\n   * Builds the stream connection. A host whose API needs an auth-wrapped\n   * EventSource supplies one; a test supplies one that never connects.\n   */\n  createEventSource?: ((url: string) => EventSource) | undefined;\n};\n\nexport function DebugConsoleDock({\n  client,\n  store = debugStore,\n  defaultOpen,\n  createEventSource,\n}: DebugConsoleDockProps) {\n  const initial = readDockState();\n  const [open, setOpen] = useState(defaultOpen ?? initial.open);\n  const [tab, setTab] = useState<DebugTab>(initial.tab);\n  const [height, setHeight] = useState(() => readHeight());\n\n  // Only an open console holds the stream. A closed one that kept streaming\n  // would make \"the console is off\" untrue for the server.\n  const state = useDebugStream({ enabled: open, client, store, createEventSource });\n\n  // A link that names a level arms at it, once. After that the picker owns the\n  // level, so re-applying it on every render would make the control unusable.\n  useEffect(() => {\n    store.setLevel(initial.level);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- seeded from the URL at mount only\n  }, []);\n\n  useEffect(() => {\n    writeDockState({ open, tab, level: state.level });\n    // Published for the call sites that fetch without going through the wrapped\n    // client — they arm from this rather than from a flag of their own.\n    setDebugCaptureLevel(open ? state.level : \"off\");\n    // Dropped with the console, like the level: a rebuild-everything setting\n    // left on behind a closed console would make every page slow with nothing\n    // on screen to explain why.\n    setDebugRefreshInspection(open && state.refreshInspection);\n    // And for the trigger, which lives in the app's navbar rather than in this\n    // tree and cannot otherwise tell whether it is showing an open console.\n    setDebugConsoleOpen(open);\n  }, [open, tab, state.level, state.refreshInspection]);\n\n  // Registering is also what makes the trigger and a table's \"Debug\" menu item\n  // appear: both are offered only where a console exists to reveal.\n  useEffect(\n    () =>\n      registerDebugConsole((request) => {\n        setOpen((current) => (request.toggle ? !current : true));\n        if (request.tab) setTab(request.tab as DebugTab);\n      }),\n    [],\n  );\n\n  // Unmounting has to retract the claim as well as the registration, or the\n  // trigger keeps rendering pressed against a console that is gone.\n  useEffect(() => () => setDebugConsoleOpen(false), []);\n\n  const startResize = useResizeHandle(height, (next) => {\n    setHeight(next);\n    writeHeight(next);\n  });\n\n  // Closed, the dock occupies nothing at all. Its trigger — and the counts that\n  // used to justify a permanent strip here — live in the navbar instead; see\n  // DebugConsoleButton.\n  if (!open) return null;\n\n  return (\n    <div\n      className=\"flex shrink-0 flex-col border-border border-t bg-background\"\n      style={{ height }}\n      data-testid=\"devtools-dock\"\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Resize console\"\n        className=\"h-1 w-full cursor-row-resize bg-transparent hover:bg-border\"\n        onMouseDown={startResize}\n      />\n      <div className=\"flex min-h-0 flex-1 flex-col\">\n        <DebugConsole\n          state={state}\n          store={store}\n          client={client}\n          tab={tab}\n          onTabChange={setTab}\n          onClose={() => setOpen(false)}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction useResizeHandle(height: number, onHeight: (next: number) => void) {\n  const heightRef = useRef(height);\n  heightRef.current = height;\n\n  return useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      const startY = event.clientY;\n      const startHeight = heightRef.current;\n      const onMove = (move: MouseEvent) => {\n        // Dragging up grows the dock, so the delta is inverted: the handle is on\n        // its top edge.\n        onHeight(Math.max(MIN_DOCK_HEIGHT, startHeight + (startY - move.clientY)));\n      };\n      const onUp = () => {\n        window.removeEventListener(\"mousemove\", onMove);\n        window.removeEventListener(\"mouseup\", onUp);\n      };\n      window.addEventListener(\"mousemove\", onMove);\n      window.addEventListener(\"mouseup\", onUp);\n    },\n    [onHeight],\n  );\n}\n\nfunction readHeight(): number {\n  if (typeof window === \"undefined\") return DEFAULT_DOCK_HEIGHT;\n  const stored = Number(window.localStorage?.getItem(HEIGHT_STORAGE_KEY));\n  return Number.isFinite(stored) && stored >= MIN_DOCK_HEIGHT ? stored : DEFAULT_DOCK_HEIGHT;\n}\n\nfunction writeHeight(height: number): void {\n  if (typeof window === \"undefined\") return;\n  window.localStorage?.setItem(HEIGHT_STORAGE_KEY, String(height));\n}\n"],"names":["debugStore","readDockState","useState","useDebugStream","useEffect","writeDockState","setDebugCaptureLevel","setDebugRefreshInspection","setDebugConsoleOpen","registerDebugConsole","jsxs","jsx","DebugConsole","useRef","useCallback"],"mappings":"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"}

package/dist/devtools/DebugConsoleDock.d.ts

@@ -0,0 +1,26 @@
+import { DebugClient } from './debugClient';
+import { DebugStore } from './debugStore';
+/**
+ * Where the console lives: a flex sibling that shrinks the page, not an overlay
+ * on top of it.
+ *
+ * Chrome devtools docks for a reason — an overlay hides the rows you opened the
+ * console to explain. A sibling costs the host one wrapper it already has, and
+ * covers the takeover pages that bypass the app shell entirely, which a shell
+ * slot would not.
+ */
+export declare const MIN_DOCK_HEIGHT = 160;
+export declare const DEFAULT_DOCK_HEIGHT = 320;
+export type DebugConsoleDockProps = {
+    client?: DebugClient | undefined;
+    store?: DebugStore | undefined;
+    /** Starts open. Otherwise the dock renders nothing until its trigger is used. */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Builds the stream connection. A host whose API needs an auth-wrapped
+     * EventSource supplies one; a test supplies one that never connects.
+     */
+    createEventSource?: ((url: string) => EventSource) | undefined;
+};
+export declare function DebugConsoleDock({ client, store, defaultOpen, createEventSource, }: DebugConsoleDockProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=DebugConsoleDock.d.ts.map

package/dist/devtools/DebugConsoleDock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugConsoleDock.d.ts","sourceRoot":"","sources":["../../src/devtools/DebugConsoleDock.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAc,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI3D;;;;;;;;GAQG;AAEH,eAAO,MAAM,eAAe,MAAM,CAAC;AACnC,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAGvC,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,WAAW,CAAC,GAAG,SAAS,CAAC;CAChE,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,KAAkB,EAClB,WAAW,EACX,iBAAiB,GAClB,EAAE,qBAAqB,kDAgFvB"}

package/dist/devtools/DebugConsoleDock.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { setDebugCaptureLevel, setDebugRefreshInspection, setDebugConsoleOpen, registerDebugConsole } from "../data/debugConsoleSignal.js";
+import { DebugConsole } from "./DebugConsole.js";
+import { debugStore } from "./debugStore.js";
+import { useDebugStream } from "./useDebugStream.js";
+import { readDockState, writeDockState } from "./dockState.js";
+const MIN_DOCK_HEIGHT = 160;
+const DEFAULT_DOCK_HEIGHT = 320;
+const HEIGHT_STORAGE_KEY = "clicky-ui.devtools.height";
+function DebugConsoleDock({
+  client,
+  store = debugStore,
+  defaultOpen,
+  createEventSource
+}) {
+  const initial = readDockState();
+  const [open, setOpen] = useState(defaultOpen ?? initial.open);
+  const [tab, setTab] = useState(initial.tab);
+  const [height, setHeight] = useState(() => readHeight());
+  const state = useDebugStream({ enabled: open, client, store, createEventSource });
+  useEffect(() => {
+    store.setLevel(initial.level);
+  }, []);
+  useEffect(() => {
+    writeDockState({ open, tab, level: state.level });
+    setDebugCaptureLevel(open ? state.level : "off");
+    setDebugRefreshInspection(open && state.refreshInspection);
+    setDebugConsoleOpen(open);
+  }, [open, tab, state.level, state.refreshInspection]);
+  useEffect(
+    () => registerDebugConsole((request) => {
+      setOpen((current) => request.toggle ? !current : true);
+      if (request.tab) setTab(request.tab);
+    }),
+    []
+  );
+  useEffect(() => () => setDebugConsoleOpen(false), []);
+  const startResize = useResizeHandle(height, (next) => {
+    setHeight(next);
+    writeHeight(next);
+  });
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex shrink-0 flex-col border-border border-t bg-background",
+      style: { height },
+      "data-testid": "devtools-dock",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Resize console",
+            className: "h-1 w-full cursor-row-resize bg-transparent hover:bg-border",
+            onMouseDown: startResize
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx(
+          DebugConsole,
+          {
+            state,
+            store,
+            client,
+            tab,
+            onTabChange: setTab,
+            onClose: () => setOpen(false)
+          }
+        ) })
+      ]
+    }
+  );
+}
+function useResizeHandle(height, onHeight) {
+  const heightRef = useRef(height);
+  heightRef.current = height;
+  return useCallback(
+    (event) => {
+      event.preventDefault();
+      const startY = event.clientY;
+      const startHeight = heightRef.current;
+      const onMove = (move) => {
+        onHeight(Math.max(MIN_DOCK_HEIGHT, startHeight + (startY - move.clientY)));
+      };
+      const onUp = () => {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [onHeight]
+  );
+}
+function readHeight() {
+  var _a;
+  if (typeof window === "undefined") return DEFAULT_DOCK_HEIGHT;
+  const stored = Number((_a = window.localStorage) == null ? void 0 : _a.getItem(HEIGHT_STORAGE_KEY));
+  return Number.isFinite(stored) && stored >= MIN_DOCK_HEIGHT ? stored : DEFAULT_DOCK_HEIGHT;
+}
+function writeHeight(height) {
+  var _a;
+  if (typeof window === "undefined") return;
+  (_a = window.localStorage) == null ? void 0 : _a.setItem(HEIGHT_STORAGE_KEY, String(height));
+}
+export {
+  DEFAULT_DOCK_HEIGHT,
+  DebugConsoleDock,
+  MIN_DOCK_HEIGHT
+};
+//# sourceMappingURL=DebugConsoleDock.js.map

package/dist/devtools/DebugConsoleDock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugConsoleDock.js","sources":["../../src/devtools/DebugConsoleDock.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  registerDebugConsole,\n  setDebugCaptureLevel,\n  setDebugConsoleOpen,\n  setDebugRefreshInspection,\n} from \"../data/debugConsoleSignal\";\nimport { DebugClient } from \"./debugClient\";\nimport { DebugConsole, type DebugTab } from \"./DebugConsole\";\nimport { debugStore, type DebugStore } from \"./debugStore\";\nimport { useDebugStream } from \"./useDebugStream\";\nimport { readDockState, writeDockState } from \"./dockState\";\n\n/**\n * Where the console lives: a flex sibling that shrinks the page, not an overlay\n * on top of it.\n *\n * Chrome devtools docks for a reason — an overlay hides the rows you opened the\n * console to explain. A sibling costs the host one wrapper it already has, and\n * covers the takeover pages that bypass the app shell entirely, which a shell\n * slot would not.\n */\n\nexport const MIN_DOCK_HEIGHT = 160;\nexport const DEFAULT_DOCK_HEIGHT = 320;\nconst HEIGHT_STORAGE_KEY = \"clicky-ui.devtools.height\";\n\nexport type DebugConsoleDockProps = {\n  client?: DebugClient | undefined;\n  store?: DebugStore | undefined;\n  /** Starts open. Otherwise the dock renders nothing until its trigger is used. */\n  defaultOpen?: boolean | undefined;\n  /**\n   * Builds the stream connection. A host whose API needs an auth-wrapped\n   * EventSource supplies one; a test supplies one that never connects.\n   */\n  createEventSource?: ((url: string) => EventSource) | undefined;\n};\n\nexport function DebugConsoleDock({\n  client,\n  store = debugStore,\n  defaultOpen,\n  createEventSource,\n}: DebugConsoleDockProps) {\n  const initial = readDockState();\n  const [open, setOpen] = useState(defaultOpen ?? initial.open);\n  const [tab, setTab] = useState<DebugTab>(initial.tab);\n  const [height, setHeight] = useState(() => readHeight());\n\n  // Only an open console holds the stream. A closed one that kept streaming\n  // would make \"the console is off\" untrue for the server.\n  const state = useDebugStream({ enabled: open, client, store, createEventSource });\n\n  // A link that names a level arms at it, once. After that the picker owns the\n  // level, so re-applying it on every render would make the control unusable.\n  useEffect(() => {\n    store.setLevel(initial.level);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- seeded from the URL at mount only\n  }, []);\n\n  useEffect(() => {\n    writeDockState({ open, tab, level: state.level });\n    // Published for the call sites that fetch without going through the wrapped\n    // client — they arm from this rather than from a flag of their own.\n    setDebugCaptureLevel(open ? state.level : \"off\");\n    // Dropped with the console, like the level: a rebuild-everything setting\n    // left on behind a closed console would make every page slow with nothing\n    // on screen to explain why.\n    setDebugRefreshInspection(open && state.refreshInspection);\n    // And for the trigger, which lives in the app's navbar rather than in this\n    // tree and cannot otherwise tell whether it is showing an open console.\n    setDebugConsoleOpen(open);\n  }, [open, tab, state.level, state.refreshInspection]);\n\n  // Registering is also what makes the trigger and a table's \"Debug\" menu item\n  // appear: both are offered only where a console exists to reveal.\n  useEffect(\n    () =>\n      registerDebugConsole((request) => {\n        setOpen((current) => (request.toggle ? !current : true));\n        if (request.tab) setTab(request.tab as DebugTab);\n      }),\n    [],\n  );\n\n  // Unmounting has to retract the claim as well as the registration, or the\n  // trigger keeps rendering pressed against a console that is gone.\n  useEffect(() => () => setDebugConsoleOpen(false), []);\n\n  const startResize = useResizeHandle(height, (next) => {\n    setHeight(next);\n    writeHeight(next);\n  });\n\n  // Closed, the dock occupies nothing at all. Its trigger — and the counts that\n  // used to justify a permanent strip here — live in the navbar instead; see\n  // DebugConsoleButton.\n  if (!open) return null;\n\n  return (\n    <div\n      className=\"flex shrink-0 flex-col border-border border-t bg-background\"\n      style={{ height }}\n      data-testid=\"devtools-dock\"\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Resize console\"\n        className=\"h-1 w-full cursor-row-resize bg-transparent hover:bg-border\"\n        onMouseDown={startResize}\n      />\n      <div className=\"flex min-h-0 flex-1 flex-col\">\n        <DebugConsole\n          state={state}\n          store={store}\n          client={client}\n          tab={tab}\n          onTabChange={setTab}\n          onClose={() => setOpen(false)}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction useResizeHandle(height: number, onHeight: (next: number) => void) {\n  const heightRef = useRef(height);\n  heightRef.current = height;\n\n  return useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      const startY = event.clientY;\n      const startHeight = heightRef.current;\n      const onMove = (move: MouseEvent) => {\n        // Dragging up grows the dock, so the delta is inverted: the handle is on\n        // its top edge.\n        onHeight(Math.max(MIN_DOCK_HEIGHT, startHeight + (startY - move.clientY)));\n      };\n      const onUp = () => {\n        window.removeEventListener(\"mousemove\", onMove);\n        window.removeEventListener(\"mouseup\", onUp);\n      };\n      window.addEventListener(\"mousemove\", onMove);\n      window.addEventListener(\"mouseup\", onUp);\n    },\n    [onHeight],\n  );\n}\n\nfunction readHeight(): number {\n  if (typeof window === \"undefined\") return DEFAULT_DOCK_HEIGHT;\n  const stored = Number(window.localStorage?.getItem(HEIGHT_STORAGE_KEY));\n  return Number.isFinite(stored) && stored >= MIN_DOCK_HEIGHT ? stored : DEFAULT_DOCK_HEIGHT;\n}\n\nfunction writeHeight(height: number): void {\n  if (typeof window === \"undefined\") return;\n  window.localStorage?.setItem(HEIGHT_STORAGE_KEY, String(height));\n}\n"],"names":[],"mappings":"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"}

package/dist/devtools/ExecutionDetail.cjs

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const CodeBlock = require("../data/CodeBlock.cjs");
+const JsonView = require("../data/JsonView.cjs");
+const debugClient = require("./debugClient.cjs");
+function ExecutionDetail({ record, client, detail: provided }) {
+  const { detail, error, loading } = useExecutionDetail(record.id, client, provided);
+  if (provided === void 0 && loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-density-4 text-muted-foreground text-sm", children: "Loading capture…" });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-density-4 text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-destructive", children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx(RerunHint, { record })
+    ] });
+  }
+  if (!detail) return null;
+  const operations = detail.operations ?? [];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-density-4 p-density-4", children: [
+    record.error ? /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap font-mono text-destructive text-xs", children: record.error })
+    ] }) : null,
+    operations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: "This request reached no provider — nothing ran that could be explained." }) : operations.map((diagnostics, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      OperationDetail,
+      {
+        index: index + 1,
+        total: operations.length,
+        diagnostics
+      },
+      `${diagnostics.provider}-${index}`
+    )),
+    detail.logs && detail.logs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(SectionLabel, { children: [
+        "Log lines (",
+        detail.logs.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-64 overflow-auto rounded border border-border bg-muted/30 p-density-2 font-mono text-xs", children: detail.logs.map((line) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "whitespace-pre-wrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: line.level }),
+        " ",
+        line.message
+      ] }, `${line.source}-${line.sequence}`)) })
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(RerunHint, { record })
+  ] });
+}
+function OperationDetail({
+  index,
+  total,
+  diagnostics
+}) {
+  const request = diagnostics.request ?? {};
+  const response = diagnostics.response ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col gap-density-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(SectionLabel, { children: [
+      total > 1 ? `Operation ${index} of ${total} — ` : "",
+      diagnostics.provider,
+      request.connection ? ` · ${request.connection}` : ""
+    ] }),
+    request.query ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { source: request.query, language: "sql" }) : null,
+    request.rendered && request.rendered !== request.query ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Rendered from the profile" }),
+      /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { source: request.rendered, language: "sql" })
+    ] }) : null,
+    request.arguments && request.arguments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Bound arguments" }),
+      /* @__PURE__ */ jsxRuntime.jsx(JsonView.JsonView, { data: request.arguments })
+    ] }) : null,
+    request.method || request.url ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-mono text-xs", children: [
+      request.method,
+      " ",
+      request.url,
+      typeof response.status === "number" ? ` → ${response.status}` : ""
+    ] }) : null,
+    request.options && Object.keys(request.options).length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Options" }),
+      /* @__PURE__ */ jsxRuntime.jsx(JsonView.JsonView, { data: request.options })
+    ] }) : null,
+    response.preview ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(SectionLabel, { children: [
+        "Response preview",
+        response.truncated ? " (truncated)" : ""
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { source: response.preview, language: "json" })
+    ] }) : null,
+    diagnostics.error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap font-mono text-destructive text-xs", children: diagnostics.error }) : null
+  ] });
+}
+function RerunHint({ record }) {
+  if (record.level === "trace2" || record.level === "trace3" || record.level === "trace4") return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground text-xs", children: [
+    "Captured at ",
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: record.level }),
+    ". Response bodies are only buffered at ",
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: "trace2" }),
+    " — raise the level and run it again to see them."
+  ] });
+}
+function SectionLabel({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-density-1 font-medium text-muted-foreground text-xs uppercase tracking-wide", children });
+}
+function useExecutionDetail(id, client, provided) {
+  const [detail, setDetail] = react.useState(provided);
+  const [error, setError] = react.useState();
+  const [loading, setLoading] = react.useState(provided === void 0);
+  react.useEffect(() => {
+    if (provided !== void 0) {
+      setDetail(provided);
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(void 0);
+    (client ?? new debugClient.DebugClient()).detail(id).then((payload) => {
+      if (!cancelled) setDetail(payload);
+    }).catch((failure) => {
+      if (cancelled) return;
+      setError(
+        failure instanceof debugClient.DetailEvictedError ? `${failure.message}. The summary above is all that survives.` : failure instanceof Error ? failure.message : String(failure)
+      );
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [id, client, provided]);
+  return { detail, error, loading };
+}
+exports.ExecutionDetail = ExecutionDetail;
+//# sourceMappingURL=ExecutionDetail.cjs.map

package/dist/devtools/ExecutionDetail.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutionDetail.cjs","sources":["../../src/devtools/ExecutionDetail.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { CodeBlock } from \"../data/CodeBlock\";\nimport { JsonView } from \"../data/JsonView\";\nimport type { QueryBrowserDiagnostics } from \"../data/query-browser/QueryBrowser.types\";\nimport { DebugClient, DetailEvictedError } from \"./debugClient\";\nimport type { ExecutionDetail as ExecutionDetailPayload, ExecutionSummary } from \"./types\";\n\n/**\n * The pane behind one row: what the execution actually sent, what came back,\n * and the lines it wrote on the way.\n *\n * Everything here is fetched by record id — it is the run that already\n * happened, not a re-run of it. That is the whole point of the console: the old\n * \"Debug\" dialog answered \"what does this URL run\" by running it a second time,\n * so what you inspected was never the execution that misbehaved.\n */\n\nexport type ExecutionDetailProps = {\n  record: ExecutionSummary;\n  client?: DebugClient | undefined;\n  /** Pre-loaded detail, for a story or a test that has no server. */\n  detail?: ExecutionDetailPayload | undefined;\n};\n\nexport function ExecutionDetail({ record, client, detail: provided }: ExecutionDetailProps) {\n  const { detail, error, loading } = useExecutionDetail(record.id, client, provided);\n\n  if (provided === undefined && loading) {\n    return <div className=\"p-density-4 text-muted-foreground text-sm\">Loading capture…</div>;\n  }\n  if (error) {\n    return (\n      <div className=\"p-density-4 text-sm\">\n        <p className=\"text-destructive\">{error}</p>\n        <RerunHint record={record} />\n      </div>\n    );\n  }\n  if (!detail) return null;\n\n  const operations = detail.operations ?? [];\n  return (\n    <div className=\"flex flex-col gap-density-4 p-density-4\">\n      {record.error ? (\n        <section>\n          <SectionLabel>Error</SectionLabel>\n          <p className=\"whitespace-pre-wrap font-mono text-destructive text-xs\">{record.error}</p>\n        </section>\n      ) : null}\n\n      {operations.length === 0 ? (\n        <p className=\"text-muted-foreground text-sm\">\n          This request reached no provider — nothing ran that could be explained.\n        </p>\n      ) : (\n        operations.map((diagnostics, index) => (\n          <OperationDetail\n            key={`${diagnostics.provider}-${index}`}\n            index={index + 1}\n            total={operations.length}\n            diagnostics={diagnostics}\n          />\n        ))\n      )}\n\n      {detail.logs && detail.logs.length > 0 ? (\n        <section>\n          <SectionLabel>Log lines ({detail.logs.length})</SectionLabel>\n          <div className=\"max-h-64 overflow-auto rounded border border-border bg-muted/30 p-density-2 font-mono text-xs\">\n            {detail.logs.map((line) => (\n              <div key={`${line.source}-${line.sequence}`} className=\"whitespace-pre-wrap\">\n                <span className=\"text-muted-foreground\">{line.level}</span> {line.message}\n              </div>\n            ))}\n          </div>\n        </section>\n      ) : null}\n\n      <RerunHint record={record} />\n    </div>\n  );\n}\n\nfunction OperationDetail({\n  index,\n  total,\n  diagnostics,\n}: {\n  index: number;\n  total: number;\n  diagnostics: QueryBrowserDiagnostics;\n}) {\n  const request = diagnostics.request ?? {};\n  const response = diagnostics.response ?? {};\n  return (\n    <section className=\"flex flex-col gap-density-3\">\n      <SectionLabel>\n        {total > 1 ? `Operation ${index} of ${total} — ` : \"\"}\n        {diagnostics.provider}\n        {request.connection ? ` · ${request.connection}` : \"\"}\n      </SectionLabel>\n\n      {request.query ? <CodeBlock source={request.query} language=\"sql\" /> : null}\n      {/* Shown only when it differs: for most providers the two are equal, and a\n          second identical block reads as a second query. */}\n      {request.rendered && request.rendered !== request.query ? (\n        <div>\n          <SectionLabel>Rendered from the profile</SectionLabel>\n          <CodeBlock source={request.rendered} language=\"sql\" />\n        </div>\n      ) : null}\n\n      {request.arguments && request.arguments.length > 0 ? (\n        <div>\n          <SectionLabel>Bound arguments</SectionLabel>\n          <JsonView data={request.arguments} />\n        </div>\n      ) : null}\n\n      {request.method || request.url ? (\n        <p className=\"font-mono text-xs\">\n          {request.method} {request.url}\n          {typeof response.status === \"number\" ? ` → ${response.status}` : \"\"}\n        </p>\n      ) : null}\n\n      {request.options && Object.keys(request.options).length > 0 ? (\n        <div>\n          <SectionLabel>Options</SectionLabel>\n          <JsonView data={request.options} />\n        </div>\n      ) : null}\n\n      {response.preview ? (\n        <div>\n          <SectionLabel>\n            Response preview\n            {response.truncated ? \" (truncated)\" : \"\"}\n          </SectionLabel>\n          <CodeBlock source={response.preview} language=\"json\" />\n        </div>\n      ) : null}\n\n      {diagnostics.error ? (\n        <p className=\"whitespace-pre-wrap font-mono text-destructive text-xs\">{diagnostics.error}</p>\n      ) : null}\n    </section>\n  );\n}\n\n/**\n * A run captured below the level needed for what you are looking for cannot be\n * enriched retroactively — the bodies were never buffered. Saying so, and\n * naming the level that would have them, is the honest answer.\n */\nfunction RerunHint({ record }: { record: ExecutionSummary }) {\n  if (record.level === \"trace2\" || record.level === \"trace3\" || record.level === \"trace4\") return null;\n  return (\n    <p className=\"text-muted-foreground text-xs\">\n      Captured at <span className=\"font-mono\">{record.level}</span>. Response bodies are only\n      buffered at <span className=\"font-mono\">trace2</span> — raise the level and run it again to\n      see them.\n    </p>\n  );\n}\n\nfunction SectionLabel({ children }: { children: React.ReactNode }) {\n  return (\n    <p className=\"mb-density-1 font-medium text-muted-foreground text-xs uppercase tracking-wide\">\n      {children}\n    </p>\n  );\n}\n\nfunction useExecutionDetail(\n  id: string,\n  client: DebugClient | undefined,\n  provided: ExecutionDetailPayload | undefined,\n) {\n  const [detail, setDetail] = useState<ExecutionDetailPayload | undefined>(provided);\n  const [error, setError] = useState<string | undefined>();\n  const [loading, setLoading] = useState(provided === undefined);\n\n  useEffect(() => {\n    if (provided !== undefined) {\n      setDetail(provided);\n      setLoading(false);\n      return;\n    }\n    let cancelled = false;\n    setLoading(true);\n    setError(undefined);\n    (client ?? new DebugClient())\n      .detail(id)\n      .then((payload) => {\n        if (!cancelled) setDetail(payload);\n      })\n      .catch((failure: unknown) => {\n        if (cancelled) return;\n        setError(\n          failure instanceof DetailEvictedError\n            ? `${failure.message}. The summary above is all that survives.`\n            : failure instanceof Error\n              ? failure.message\n              : String(failure),\n        );\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [id, client, provided]);\n\n  return { detail, error, loading };\n}\n"],"names":["jsx","jsxs","CodeBlock","JsonView","useState","useEffect","DebugClient","DetailEvictedError"],"mappings":"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"}

package/dist/devtools/ExecutionDetail.d.ts

@@ -0,0 +1,19 @@
+import { DebugClient } from './debugClient';
+import { ExecutionDetail as ExecutionDetailPayload, ExecutionSummary } from './types';
+/**
+ * The pane behind one row: what the execution actually sent, what came back,
+ * and the lines it wrote on the way.
+ *
+ * Everything here is fetched by record id — it is the run that already
+ * happened, not a re-run of it. That is the whole point of the console: the old
+ * "Debug" dialog answered "what does this URL run" by running it a second time,
+ * so what you inspected was never the execution that misbehaved.
+ */
+export type ExecutionDetailProps = {
+    record: ExecutionSummary;
+    client?: DebugClient | undefined;
+    /** Pre-loaded detail, for a story or a test that has no server. */
+    detail?: ExecutionDetailPayload | undefined;
+};
+export declare function ExecutionDetail({ record, client, detail: provided }: ExecutionDetailProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ExecutionDetail.d.ts.map

package/dist/devtools/ExecutionDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutionDetail.d.ts","sourceRoot":"","sources":["../../src/devtools/ExecutionDetail.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAsB,MAAM,eAAe,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,IAAI,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3F;;;;;;;;GAQG;AAEH,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,gBAAgB,CAAC;IACzB,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,mEAAmE;IACnE,MAAM,CAAC,EAAE,sBAAsB,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,oBAAoB,kDAyDzF"}