@flanksource/clicky-ui 0.3.25 → 0.3.26

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

@@ -0,0 +1 @@
+{"version":3,"file":"dockState.d.ts","sourceRoot":"","sources":["../../src/devtools/dockState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmC,KAAK,UAAU,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAE1F;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,UAAU,iBAAiB,CAAC;AACzC,eAAO,MAAM,SAAS,gBAAgB,CAAC;AACvC,eAAO,MAAM,WAAW,kBAAkB,CAAC;AAE3C,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,QAAQ,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,SAIhC,CAAC;AAEF,wBAAgB,aAAa,CAAC,MAAM,SAAkB,GAAG,SAAS,CASjE;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAWrD"}

package/dist/devtools/dockState.js

@@ -0,0 +1,51 @@
+import { DEFAULT_DEBUG_LEVEL, DEBUG_TABS } from "./types.js";
+const DOCK_PARAM = "__debug_open";
+const TAB_PARAM = "__debug_tab";
+const LEVEL_PARAM = "__debug_level";
+const DEFAULT_DOCK_STATE = {
+  open: false,
+  tab: "queries",
+  level: DEFAULT_DEBUG_LEVEL
+};
+function readDockState(search = currentSearch()) {
+  const params = new URLSearchParams(search);
+  const tab = params.get(TAB_PARAM);
+  const level = params.get(LEVEL_PARAM);
+  return {
+    open: params.get(DOCK_PARAM) === "1",
+    tab: isTab(tab) ? tab : DEFAULT_DOCK_STATE.tab,
+    level: level ?? DEFAULT_DOCK_STATE.level
+  };
+}
+function writeDockState(state) {
+  var _a;
+  if (typeof window === "undefined" || !((_a = window.history) == null ? void 0 : _a.replaceState)) return;
+  const url = new URL(window.location.href);
+  setOrDelete(url.searchParams, DOCK_PARAM, state.open ? "1" : null);
+  setOrDelete(url.searchParams, TAB_PARAM, state.open && state.tab !== "queries" ? state.tab : null);
+  setOrDelete(
+    url.searchParams,
+    LEVEL_PARAM,
+    state.open && state.level !== DEFAULT_DEBUG_LEVEL ? state.level : null
+  );
+  window.history.replaceState(window.history.state, "", url.toString());
+}
+function setOrDelete(params, key, value) {
+  if (value === null) params.delete(key);
+  else params.set(key, value);
+}
+function isTab(value) {
+  return value !== null && DEBUG_TABS.includes(value);
+}
+function currentSearch() {
+  return typeof window === "undefined" ? "" : window.location.search;
+}
+export {
+  DEFAULT_DOCK_STATE,
+  DOCK_PARAM,
+  LEVEL_PARAM,
+  TAB_PARAM,
+  readDockState,
+  writeDockState
+};
+//# sourceMappingURL=dockState.js.map

package/dist/devtools/dockState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dockState.js","sources":["../../src/devtools/dockState.ts"],"sourcesContent":["import { DEBUG_TABS, DEFAULT_DEBUG_LEVEL, type DebugLevel, type DebugTab } from \"./types\";\n\n/**\n * Open/closed, the active tab and the capture level live in the URL.\n *\n * A broken state is worth sharing: \"open this profile with the console on\n * Network at trace2\" is the whole message, and a link is how it gets sent.\n * Height stays in localStorage — it is a preference about this screen, not a\n * fact about what is being debugged.\n *\n * The `__` prefix follows the app's own reserved-parameter convention, so these\n * are never mistaken for filter params, and they are written with\n * `history.replaceState` so opening a tab does not fill the back button.\n */\n\nexport const DOCK_PARAM = \"__debug_open\";\nexport const TAB_PARAM = \"__debug_tab\";\nexport const LEVEL_PARAM = \"__debug_level\";\n\nexport type DockState = {\n  open: boolean;\n  tab: DebugTab;\n  level: DebugLevel;\n};\n\nexport const DEFAULT_DOCK_STATE: DockState = {\n  open: false,\n  tab: \"queries\",\n  level: DEFAULT_DEBUG_LEVEL,\n};\n\nexport function readDockState(search = currentSearch()): DockState {\n  const params = new URLSearchParams(search);\n  const tab = params.get(TAB_PARAM);\n  const level = params.get(LEVEL_PARAM);\n  return {\n    open: params.get(DOCK_PARAM) === \"1\",\n    tab: isTab(tab) ? tab : DEFAULT_DOCK_STATE.tab,\n    level: (level as DebugLevel | null) ?? DEFAULT_DOCK_STATE.level,\n  };\n}\n\n/**\n * Writes the dock's state back to the URL, dropping the defaults.\n *\n * A closed console leaves no trace in the address bar — the ordinary case must\n * not make every link the user copies carry debug parameters.\n */\nexport function writeDockState(state: DockState): void {\n  if (typeof window === \"undefined\" || !window.history?.replaceState) return;\n  const url = new URL(window.location.href);\n  setOrDelete(url.searchParams, DOCK_PARAM, state.open ? \"1\" : null);\n  setOrDelete(url.searchParams, TAB_PARAM, state.open && state.tab !== \"queries\" ? state.tab : null);\n  setOrDelete(\n    url.searchParams,\n    LEVEL_PARAM,\n    state.open && state.level !== DEFAULT_DEBUG_LEVEL ? state.level : null,\n  );\n  window.history.replaceState(window.history.state, \"\", url.toString());\n}\n\nfunction setOrDelete(params: URLSearchParams, key: string, value: string | null): void {\n  if (value === null) params.delete(key);\n  else params.set(key, value);\n}\n\nfunction isTab(value: string | null): value is DebugTab {\n  return value !== null && (DEBUG_TABS as readonly string[]).includes(value);\n}\n\nfunction currentSearch(): string {\n  return typeof window === \"undefined\" ? \"\" : window.location.search;\n}\n"],"names":[],"mappings":";AAeO,MAAM,aAAa;AACnB,MAAM,YAAY;AAClB,MAAM,cAAc;AAQpB,MAAM,qBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AACT;AAEO,SAAS,cAAc,SAAS,iBAA4B;AACjE,QAAM,SAAS,IAAI,gBAAgB,MAAM;AACzC,QAAM,MAAM,OAAO,IAAI,SAAS;AAChC,QAAM,QAAQ,OAAO,IAAI,WAAW;AACpC,SAAO;AAAA,IACL,MAAM,OAAO,IAAI,UAAU,MAAM;AAAA,IACjC,KAAK,MAAM,GAAG,IAAI,MAAM,mBAAmB;AAAA,IAC3C,OAAQ,SAA+B,mBAAmB;AAAA,EAAA;AAE9D;AAQO,SAAS,eAAe,OAAwB;;AACrD,MAAI,OAAO,WAAW,eAAe,GAAC,YAAO,YAAP,mBAAgB,cAAc;AACpE,QAAM,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI;AACxC,cAAY,IAAI,cAAc,YAAY,MAAM,OAAO,MAAM,IAAI;AACjE,cAAY,IAAI,cAAc,WAAW,MAAM,QAAQ,MAAM,QAAQ,YAAY,MAAM,MAAM,IAAI;AACjG;AAAA,IACE,IAAI;AAAA,IACJ;AAAA,IACA,MAAM,QAAQ,MAAM,UAAU,sBAAsB,MAAM,QAAQ;AAAA,EAAA;AAEpE,SAAO,QAAQ,aAAa,OAAO,QAAQ,OAAO,IAAI,IAAI,UAAU;AACtE;AAEA,SAAS,YAAY,QAAyB,KAAa,OAA4B;AACrF,MAAI,UAAU,KAAM,QAAO,OAAO,GAAG;AAAA,MAChC,QAAO,IAAI,KAAK,KAAK;AAC5B;AAEA,SAAS,MAAM,OAAyC;AACtD,SAAO,UAAU,QAAS,WAAiC,SAAS,KAAK;AAC3E;AAEA,SAAS,gBAAwB;AAC/B,SAAO,OAAO,WAAW,cAAc,KAAK,OAAO,SAAS;AAC9D;"}

package/dist/devtools/tabs/ConsoleTab.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const LogsTable = require("../../data/LogsTable.cjs");
+function ConsoleTab({ lines, recordId, search }) {
+  const rows = react.useMemo(() => {
+    const scoped = recordId ? lines.filter((line) => line.recordId === recordId) : lines;
+    return scoped.map(toLogRecord);
+  }, [lines, recordId]);
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-density-6 text-center text-muted-foreground text-sm", children: recordId ? "This capture logged nothing." : "No server log lines yet. The tail starts when the console connects." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LogsTable.LogsTable,
+    {
+      logs: rows,
+      ...search === void 0 ? { showGlobalFilter: true } : { globalFilter: search },
+      showRawDetails: true
+    }
+  );
+}
+function toLogRecord(line) {
+  return {
+    timestamp: line.time,
+    level: line.level,
+    logger: line.logger ?? "",
+    message: line.message,
+    tags: [line.source, line.event, line.recordId ? `record:${line.recordId.slice(0, 8)}` : ""].filter(
+      Boolean
+    ),
+    ...line.values
+  };
+}
+exports.ConsoleTab = ConsoleTab;
+//# sourceMappingURL=ConsoleTab.cjs.map

package/dist/devtools/tabs/ConsoleTab.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsoleTab.cjs","sources":["../../../src/devtools/tabs/ConsoleTab.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { LogsTable } from \"../../data/LogsTable\";\nimport type { DebugLogLine } from \"../types\";\n\n/**\n * The server's own log, live in the browser.\n *\n * Two sources are merged here, and the seam is labelled rather than hidden.\n * A `request` line was captured structurally, with its values intact, at the\n * level the console armed; a `process` line was scraped from the writer the\n * logger was already using and has been rendered to text by the time it\n * arrives. Presenting them as one undifferentiated stream would imply the\n * second is as trustworthy as the first.\n */\n\nexport type ConsoleTabProps = {\n  lines: DebugLogLine[];\n  /** Show only lines belonging to this record. */\n  recordId?: string | undefined;\n  search?: string | undefined;\n};\n\nexport function ConsoleTab({ lines, recordId, search }: ConsoleTabProps) {\n  const rows = useMemo(() => {\n    const scoped = recordId ? lines.filter((line) => line.recordId === recordId) : lines;\n    return scoped.map(toLogRecord);\n  }, [lines, recordId]);\n\n  if (rows.length === 0) {\n    return (\n      <div className=\"p-density-6 text-center text-muted-foreground text-sm\">\n        {recordId\n          ? \"This capture logged nothing.\"\n          : \"No server log lines yet. The tail starts when the console connects.\"}\n      </div>\n    );\n  }\n\n  return (\n    <LogsTable\n      logs={rows}\n      {...(search === undefined ? { showGlobalFilter: true } : { globalFilter: search })}\n      showRawDetails\n    />\n  );\n}\n\n/**\n * Maps a line onto the canonical log row LogsTable normalizes.\n *\n * `seam` rather than an extra column: the tag list is where a row's provenance\n * already lives, and a column that reads \"request\" on most rows and \"process\"\n * on the rest would cost width to say very little.\n */\nfunction toLogRecord(line: DebugLogLine): Record<string, unknown> {\n  return {\n    timestamp: line.time,\n    level: line.level,\n    logger: line.logger ?? \"\",\n    message: line.message,\n    tags: [line.source, line.event, line.recordId ? `record:${line.recordId.slice(0, 8)}` : \"\"].filter(\n      Boolean,\n    ),\n    ...line.values,\n  };\n}\n"],"names":["useMemo","jsx","LogsTable"],"mappings":";;;;;AAsBO,SAAS,WAAW,EAAE,OAAO,UAAU,UAA2B;AACvE,QAAM,OAAOA,MAAAA,QAAQ,MAAM;AACzB,UAAM,SAAS,WAAW,MAAM,OAAO,CAAC,SAAS,KAAK,aAAa,QAAQ,IAAI;AAC/E,WAAO,OAAO,IAAI,WAAW;AAAA,EAC/B,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,MAAI,KAAK,WAAW,GAAG;AACrB,0CACG,OAAA,EAAI,WAAU,yDACZ,UAAA,WACG,iCACA,uEACN;AAAA,EAEJ;AAEA,SACEC,2BAAAA;AAAAA,IAACC,UAAAA;AAAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACL,GAAI,WAAW,SAAY,EAAE,kBAAkB,SAAS,EAAE,cAAc,OAAA;AAAA,MACzE,gBAAc;AAAA,IAAA;AAAA,EAAA;AAGpB;AASA,SAAS,YAAY,MAA6C;AAChE,SAAO;AAAA,IACL,WAAW,KAAK;AAAA,IAChB,OAAO,KAAK;AAAA,IACZ,QAAQ,KAAK,UAAU;AAAA,IACvB,SAAS,KAAK;AAAA,IACd,MAAM,CAAC,KAAK,QAAQ,KAAK,OAAO,KAAK,WAAW,UAAU,KAAK,SAAS,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;AAAA,MAC1F;AAAA,IAAA;AAAA,IAEF,GAAG,KAAK;AAAA,EAAA;AAEZ;;"}

package/dist/devtools/tabs/ConsoleTab.d.ts

@@ -0,0 +1,19 @@
+import { DebugLogLine } from '../types';
+/**
+ * The server's own log, live in the browser.
+ *
+ * Two sources are merged here, and the seam is labelled rather than hidden.
+ * A `request` line was captured structurally, with its values intact, at the
+ * level the console armed; a `process` line was scraped from the writer the
+ * logger was already using and has been rendered to text by the time it
+ * arrives. Presenting them as one undifferentiated stream would imply the
+ * second is as trustworthy as the first.
+ */
+export type ConsoleTabProps = {
+    lines: DebugLogLine[];
+    /** Show only lines belonging to this record. */
+    recordId?: string | undefined;
+    search?: string | undefined;
+};
+export declare function ConsoleTab({ lines, recordId, search }: ConsoleTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConsoleTab.d.ts.map

package/dist/devtools/tabs/ConsoleTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsoleTab.d.ts","sourceRoot":"","sources":["../../../src/devtools/tabs/ConsoleTab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C;;;;;;;;;GASG;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,eAAe,2CAuBtE"}

package/dist/devtools/tabs/ConsoleTab.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { LogsTable } from "../../data/LogsTable.js";
+function ConsoleTab({ lines, recordId, search }) {
+  const rows = useMemo(() => {
+    const scoped = recordId ? lines.filter((line) => line.recordId === recordId) : lines;
+    return scoped.map(toLogRecord);
+  }, [lines, recordId]);
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "p-density-6 text-center text-muted-foreground text-sm", children: recordId ? "This capture logged nothing." : "No server log lines yet. The tail starts when the console connects." });
+  }
+  return /* @__PURE__ */ jsx(
+    LogsTable,
+    {
+      logs: rows,
+      ...search === void 0 ? { showGlobalFilter: true } : { globalFilter: search },
+      showRawDetails: true
+    }
+  );
+}
+function toLogRecord(line) {
+  return {
+    timestamp: line.time,
+    level: line.level,
+    logger: line.logger ?? "",
+    message: line.message,
+    tags: [line.source, line.event, line.recordId ? `record:${line.recordId.slice(0, 8)}` : ""].filter(
+      Boolean
+    ),
+    ...line.values
+  };
+}
+export {
+  ConsoleTab
+};
+//# sourceMappingURL=ConsoleTab.js.map

package/dist/devtools/tabs/ConsoleTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsoleTab.js","sources":["../../../src/devtools/tabs/ConsoleTab.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { LogsTable } from \"../../data/LogsTable\";\nimport type { DebugLogLine } from \"../types\";\n\n/**\n * The server's own log, live in the browser.\n *\n * Two sources are merged here, and the seam is labelled rather than hidden.\n * A `request` line was captured structurally, with its values intact, at the\n * level the console armed; a `process` line was scraped from the writer the\n * logger was already using and has been rendered to text by the time it\n * arrives. Presenting them as one undifferentiated stream would imply the\n * second is as trustworthy as the first.\n */\n\nexport type ConsoleTabProps = {\n  lines: DebugLogLine[];\n  /** Show only lines belonging to this record. */\n  recordId?: string | undefined;\n  search?: string | undefined;\n};\n\nexport function ConsoleTab({ lines, recordId, search }: ConsoleTabProps) {\n  const rows = useMemo(() => {\n    const scoped = recordId ? lines.filter((line) => line.recordId === recordId) : lines;\n    return scoped.map(toLogRecord);\n  }, [lines, recordId]);\n\n  if (rows.length === 0) {\n    return (\n      <div className=\"p-density-6 text-center text-muted-foreground text-sm\">\n        {recordId\n          ? \"This capture logged nothing.\"\n          : \"No server log lines yet. The tail starts when the console connects.\"}\n      </div>\n    );\n  }\n\n  return (\n    <LogsTable\n      logs={rows}\n      {...(search === undefined ? { showGlobalFilter: true } : { globalFilter: search })}\n      showRawDetails\n    />\n  );\n}\n\n/**\n * Maps a line onto the canonical log row LogsTable normalizes.\n *\n * `seam` rather than an extra column: the tag list is where a row's provenance\n * already lives, and a column that reads \"request\" on most rows and \"process\"\n * on the rest would cost width to say very little.\n */\nfunction toLogRecord(line: DebugLogLine): Record<string, unknown> {\n  return {\n    timestamp: line.time,\n    level: line.level,\n    logger: line.logger ?? \"\",\n    message: line.message,\n    tags: [line.source, line.event, line.recordId ? `record:${line.recordId.slice(0, 8)}` : \"\"].filter(\n      Boolean,\n    ),\n    ...line.values,\n  };\n}\n"],"names":[],"mappings":";;;AAsBO,SAAS,WAAW,EAAE,OAAO,UAAU,UAA2B;AACvE,QAAM,OAAO,QAAQ,MAAM;AACzB,UAAM,SAAS,WAAW,MAAM,OAAO,CAAC,SAAS,KAAK,aAAa,QAAQ,IAAI;AAC/E,WAAO,OAAO,IAAI,WAAW;AAAA,EAC/B,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,MAAI,KAAK,WAAW,GAAG;AACrB,+BACG,OAAA,EAAI,WAAU,yDACZ,UAAA,WACG,iCACA,uEACN;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACL,GAAI,WAAW,SAAY,EAAE,kBAAkB,SAAS,EAAE,cAAc,OAAA;AAAA,MACzE,gBAAc;AAAA,IAAA;AAAA,EAAA;AAGpB;AASA,SAAS,YAAY,MAA6C;AAChE,SAAO;AAAA,IACL,WAAW,KAAK;AAAA,IAChB,OAAO,KAAK;AAAA,IACZ,QAAQ,KAAK,UAAU;AAAA,IACvB,SAAS,KAAK;AAAA,IACd,MAAM,CAAC,KAAK,QAAQ,KAAK,OAAO,KAAK,WAAW,UAAU,KAAK,SAAS,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;AAAA,MAC1F;AAAA,IAAA;AAAA,IAEF,GAAG,KAAK;AAAA,EAAA;AAEZ;"}

package/dist/devtools/tabs/InspectionCaches.cjs

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const button = require("../../components/button.cjs");
+const DataTable = require("../../data/DataTable.cjs");
+const debugClient = require("../debugClient.cjs");
+function InspectionCaches({
+  client,
+  refreshInspection,
+  onRefreshInspectionChange,
+  caches: provided
+}) {
+  const { caches, error, reload } = useCaches(client, provided);
+  const [flushing, setFlushing] = react.useState(null);
+  const [outcome, setOutcome] = react.useState();
+  const flush = react.useCallback(
+    async (policy) => {
+      setFlushing(policy ?? "*");
+      setOutcome(void 0);
+      try {
+        const result = await (client ?? new debugClient.DebugClient()).flushInspection(
+          policy ? { policy } : {}
+        );
+        setOutcome(
+          result.entries === 0 ? "Nothing was cached to drop." : `Dropped ${result.entries} ${result.entries === 1 ? "entry" : "entries"} from ${result.caches.length} ${result.caches.length === 1 ? "cache" : "caches"}.`
+        );
+        await reload();
+      } catch (failure) {
+        setOutcome(failure instanceof Error ? failure.message : String(failure));
+      } finally {
+        setFlushing(null);
+      }
+    },
+    [client, reload]
+  );
+  const columns = [
+    { key: "policy", label: "Cache", grow: true, minWidth: 200 },
+    {
+      key: "entries",
+      label: "Entries",
+      align: "right",
+      shrink: true,
+      render: (value, row) => `${Number(value ?? 0)} / ${row.maxEntries}`,
+      sortValue: (value) => Number(value ?? 0)
+    },
+    {
+      key: "filling",
+      label: "Filling",
+      align: "right",
+      shrink: true,
+      // Blank rather than "0": a column of zeros with one occasional 1 buries
+      // the only value that means anything here.
+      render: (value) => Number(value ?? 0) > 0 ? String(value) : ""
+    },
+    {
+      key: "freshForSeconds",
+      label: "Fresh for",
+      align: "right",
+      shrink: true,
+      render: (value) => formatDuration(Number(value ?? 0)),
+      sortValue: (value) => Number(value ?? 0)
+    },
+    {
+      key: "id",
+      label: "",
+      shrink: true,
+      render: (_value, row) => /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          size: "sm",
+          variant: "ghost",
+          disabled: flushing !== null || row.entries === 0,
+          onClick: () => void flush(row.policy),
+          children: flushing === row.policy ? "Flushing…" : "Flush"
+        }
+      )
+    }
+  ];
+  const held = caches.reduce((total, cache) => total + cache.entries, 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col gap-density-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-density-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Metadata caches" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-density-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-density-1 text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: refreshInspection,
+              onChange: (event) => onRefreshInspectionChange(event.target.checked)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { title: "Every request this console arms rebuilds the metadata it reads, instead of using the cache. Costs only your requests.", children: "Rebuild on every request" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            size: "sm",
+            variant: "outline",
+            disabled: flushing !== null || held === 0,
+            onClick: () => void flush(),
+            title: "Drops cached metadata for every request that follows, not just yours.",
+            children: flushing === "*" ? "Flushing…" : "Flush all"
+          }
+        )
+      ] })
+    ] }),
+    refreshInspection ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: "Rebuilding on every request. Pages will be slower until this is switched off — it is dropped automatically when the console closes." }) : null,
+    outcome ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: outcome }) : null,
+    error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-destructive text-xs", children: error }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DataTable.DataTable,
+      {
+        data: caches.map((cache) => ({ ...cache, id: cache.policy })),
+        columns,
+        emptyMessage: "This server registered no metadata caches."
+      }
+    )
+  ] });
+}
+function useCaches(client, provided) {
+  const [caches, setCaches] = react.useState(provided ?? []);
+  const [error, setError] = react.useState();
+  const reload = react.useCallback(async () => {
+    if (provided !== void 0) return;
+    try {
+      setCaches((await (client ?? new debugClient.DebugClient()).inspection()).caches);
+      setError(void 0);
+    } catch (failure) {
+      setError(failure instanceof Error ? failure.message : String(failure));
+    }
+  }, [client, provided]);
+  react.useEffect(() => {
+    if (provided !== void 0) {
+      setCaches(provided);
+      return;
+    }
+    void reload();
+  }, [provided, reload]);
+  return { caches, error, reload };
+}
+function formatDuration(seconds) {
+  if (seconds < 60) return `${seconds}s`;
+  if (seconds < 3600) return `${Math.round(seconds / 60)}m`;
+  if (seconds < 86400) return `${Math.round(seconds / 3600)}h`;
+  return `${Math.round(seconds / 86400)}d`;
+}
+exports.InspectionCaches = InspectionCaches;
+//# sourceMappingURL=InspectionCaches.cjs.map

package/dist/devtools/tabs/InspectionCaches.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InspectionCaches.cjs","sources":["../../../src/devtools/tabs/InspectionCaches.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { DataTable, type DataTableColumn } from \"../../data/DataTable\";\nimport { DebugClient } from \"../debugClient\";\nimport type { InspectionCacheStats } from \"../types\";\n\n/**\n * The controls for the metadata caches: what the server is holding, and the two\n * ways to make it stop.\n *\n * The two are not interchangeable and the wording says so. **Rebuild on every\n * request** costs the caller who asked and leaves everyone else reading the\n * cache; **flush** drops the entry for every request that follows. One is a way\n * to check your own page, the other is an intervention on a running server, and\n * a console that presented them as the same button would invite the second when\n * the first was meant.\n */\n\nexport type InspectionCachesProps = {\n  client?: DebugClient | undefined;\n  /** Rebuild every metadata lookup on subsequent requests. */\n  refreshInspection: boolean;\n  onRefreshInspectionChange: (refresh: boolean) => void;\n  /** Pre-loaded rows, for a story or a test that has no server. */\n  caches?: InspectionCacheStats[] | undefined;\n};\n\ntype CacheRow = Record<string, unknown> & InspectionCacheStats & { id: string };\n\nexport function InspectionCaches({\n  client,\n  refreshInspection,\n  onRefreshInspectionChange,\n  caches: provided,\n}: InspectionCachesProps) {\n  const { caches, error, reload } = useCaches(client, provided);\n  const [flushing, setFlushing] = useState<string | null>(null);\n  const [outcome, setOutcome] = useState<string | undefined>();\n\n  const flush = useCallback(\n    async (policy?: string) => {\n      setFlushing(policy ?? \"*\");\n      setOutcome(undefined);\n      try {\n        const result = await (client ?? new DebugClient()).flushInspection(\n          policy ? { policy } : {},\n        );\n        // Stated either way. An empty flush and a broken one look identical\n        // without the count, and the operator would conclude the second.\n        setOutcome(\n          result.entries === 0\n            ? \"Nothing was cached to drop.\"\n            : `Dropped ${result.entries} ${result.entries === 1 ? \"entry\" : \"entries\"} from ${result.caches.length} ${result.caches.length === 1 ? \"cache\" : \"caches\"}.`,\n        );\n        await reload();\n      } catch (failure: unknown) {\n        setOutcome(failure instanceof Error ? failure.message : String(failure));\n      } finally {\n        setFlushing(null);\n      }\n    },\n    [client, reload],\n  );\n\n  const columns: DataTableColumn<CacheRow>[] = [\n    { key: \"policy\", label: \"Cache\", grow: true, minWidth: 200 },\n    {\n      key: \"entries\",\n      label: \"Entries\",\n      align: \"right\",\n      shrink: true,\n      render: (value, row) => `${Number(value ?? 0)} / ${row.maxEntries}`,\n      sortValue: (value) => Number(value ?? 0),\n    },\n    {\n      key: \"filling\",\n      label: \"Filling\",\n      align: \"right\",\n      shrink: true,\n      // Blank rather than \"0\": a column of zeros with one occasional 1 buries\n      // the only value that means anything here.\n      render: (value) => (Number(value ?? 0) > 0 ? String(value) : \"\"),\n    },\n    {\n      key: \"freshForSeconds\",\n      label: \"Fresh for\",\n      align: \"right\",\n      shrink: true,\n      render: (value) => formatDuration(Number(value ?? 0)),\n      sortValue: (value) => Number(value ?? 0),\n    },\n    {\n      key: \"id\",\n      label: \"\",\n      shrink: true,\n      render: (_value, row) => (\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          disabled={flushing !== null || row.entries === 0}\n          onClick={() => void flush(row.policy)}\n        >\n          {flushing === row.policy ? \"Flushing…\" : \"Flush\"}\n        </Button>\n      ),\n    },\n  ];\n\n  const held = caches.reduce((total, cache) => total + cache.entries, 0);\n\n  return (\n    <section className=\"flex flex-col gap-density-2\">\n      <div className=\"flex flex-wrap items-center justify-between gap-density-2\">\n        <h3 className=\"font-medium text-muted-foreground text-xs uppercase tracking-wide\">\n          Metadata caches\n        </h3>\n        <div className=\"flex items-center gap-density-3\">\n          <label className=\"flex items-center gap-density-1 text-xs\">\n            <input\n              type=\"checkbox\"\n              checked={refreshInspection}\n              onChange={(event) => onRefreshInspectionChange(event.target.checked)}\n            />\n            <span title=\"Every request this console arms rebuilds the metadata it reads, instead of using the cache. Costs only your requests.\">\n              Rebuild on every request\n            </span>\n          </label>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={flushing !== null || held === 0}\n            onClick={() => void flush()}\n            title=\"Drops cached metadata for every request that follows, not just yours.\"\n          >\n            {flushing === \"*\" ? \"Flushing…\" : \"Flush all\"}\n          </Button>\n        </div>\n      </div>\n\n      {refreshInspection ? (\n        <p className=\"text-muted-foreground text-xs\">\n          Rebuilding on every request. Pages will be slower until this is switched off — it is\n          dropped automatically when the console closes.\n        </p>\n      ) : null}\n      {outcome ? <p className=\"text-muted-foreground text-xs\">{outcome}</p> : null}\n      {error ? <p className=\"text-destructive text-xs\">{error}</p> : null}\n\n      <DataTable<CacheRow>\n        data={caches.map((cache) => ({ ...cache, id: cache.policy }))}\n        columns={columns}\n        emptyMessage=\"This server registered no metadata caches.\"\n      />\n    </section>\n  );\n}\n\nfunction useCaches(client: DebugClient | undefined, provided: InspectionCacheStats[] | undefined) {\n  const [caches, setCaches] = useState<InspectionCacheStats[]>(provided ?? []);\n  const [error, setError] = useState<string | undefined>();\n\n  const reload = useCallback(async () => {\n    if (provided !== undefined) return;\n    try {\n      setCaches((await (client ?? new DebugClient()).inspection()).caches);\n      setError(undefined);\n    } catch (failure: unknown) {\n      setError(failure instanceof Error ? failure.message : String(failure));\n    }\n  }, [client, provided]);\n\n  useEffect(() => {\n    if (provided !== undefined) {\n      setCaches(provided);\n      return;\n    }\n    void reload();\n  }, [provided, reload]);\n\n  return { caches, error, reload };\n}\n\nfunction formatDuration(seconds: number): string {\n  if (seconds < 60) return `${seconds}s`;\n  if (seconds < 3600) return `${Math.round(seconds / 60)}m`;\n  if (seconds < 86_400) return `${Math.round(seconds / 3600)}h`;\n  return `${Math.round(seconds / 86_400)}d`;\n}\n"],"names":["useState","useCallback","DebugClient","jsx","Button","jsxs","DataTable","useEffect"],"mappings":"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"}

package/dist/devtools/tabs/InspectionCaches.d.ts

@@ -0,0 +1,23 @@
+import { DebugClient } from '../debugClient';
+import { InspectionCacheStats } from '../types';
+/**
+ * The controls for the metadata caches: what the server is holding, and the two
+ * ways to make it stop.
+ *
+ * The two are not interchangeable and the wording says so. **Rebuild on every
+ * request** costs the caller who asked and leaves everyone else reading the
+ * cache; **flush** drops the entry for every request that follows. One is a way
+ * to check your own page, the other is an intervention on a running server, and
+ * a console that presented them as the same button would invite the second when
+ * the first was meant.
+ */
+export type InspectionCachesProps = {
+    client?: DebugClient | undefined;
+    /** Rebuild every metadata lookup on subsequent requests. */
+    refreshInspection: boolean;
+    onRefreshInspectionChange: (refresh: boolean) => void;
+    /** Pre-loaded rows, for a story or a test that has no server. */
+    caches?: InspectionCacheStats[] | undefined;
+};
+export declare function InspectionCaches({ client, refreshInspection, onRefreshInspectionChange, caches: provided, }: InspectionCachesProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InspectionCaches.d.ts.map

package/dist/devtools/tabs/InspectionCaches.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InspectionCaches.d.ts","sourceRoot":"","sources":["../../../src/devtools/tabs/InspectionCaches.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD;;;;;;;;;;GAUG;AAEH,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,4DAA4D;IAC5D,iBAAiB,EAAE,OAAO,CAAC;IAC3B,yBAAyB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,iEAAiE;IACjE,MAAM,CAAC,EAAE,oBAAoB,EAAE,GAAG,SAAS,CAAC;CAC7C,CAAC;AAIF,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,iBAAiB,EACjB,yBAAyB,EACzB,MAAM,EAAE,QAAQ,GACjB,EAAE,qBAAqB,2CAyHvB"}

package/dist/devtools/tabs/InspectionCaches.js

@@ -0,0 +1,150 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { Button } from "../../components/button.js";
+import { DataTable } from "../../data/DataTable.js";
+import { DebugClient } from "../debugClient.js";
+function InspectionCaches({
+  client,
+  refreshInspection,
+  onRefreshInspectionChange,
+  caches: provided
+}) {
+  const { caches, error, reload } = useCaches(client, provided);
+  const [flushing, setFlushing] = useState(null);
+  const [outcome, setOutcome] = useState();
+  const flush = useCallback(
+    async (policy) => {
+      setFlushing(policy ?? "*");
+      setOutcome(void 0);
+      try {
+        const result = await (client ?? new DebugClient()).flushInspection(
+          policy ? { policy } : {}
+        );
+        setOutcome(
+          result.entries === 0 ? "Nothing was cached to drop." : `Dropped ${result.entries} ${result.entries === 1 ? "entry" : "entries"} from ${result.caches.length} ${result.caches.length === 1 ? "cache" : "caches"}.`
+        );
+        await reload();
+      } catch (failure) {
+        setOutcome(failure instanceof Error ? failure.message : String(failure));
+      } finally {
+        setFlushing(null);
+      }
+    },
+    [client, reload]
+  );
+  const columns = [
+    { key: "policy", label: "Cache", grow: true, minWidth: 200 },
+    {
+      key: "entries",
+      label: "Entries",
+      align: "right",
+      shrink: true,
+      render: (value, row) => `${Number(value ?? 0)} / ${row.maxEntries}`,
+      sortValue: (value) => Number(value ?? 0)
+    },
+    {
+      key: "filling",
+      label: "Filling",
+      align: "right",
+      shrink: true,
+      // Blank rather than "0": a column of zeros with one occasional 1 buries
+      // the only value that means anything here.
+      render: (value) => Number(value ?? 0) > 0 ? String(value) : ""
+    },
+    {
+      key: "freshForSeconds",
+      label: "Fresh for",
+      align: "right",
+      shrink: true,
+      render: (value) => formatDuration(Number(value ?? 0)),
+      sortValue: (value) => Number(value ?? 0)
+    },
+    {
+      key: "id",
+      label: "",
+      shrink: true,
+      render: (_value, row) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "ghost",
+          disabled: flushing !== null || row.entries === 0,
+          onClick: () => void flush(row.policy),
+          children: flushing === row.policy ? "Flushing…" : "Flush"
+        }
+      )
+    }
+  ];
+  const held = caches.reduce((total, cache) => total + cache.entries, 0);
+  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-density-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-density-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Metadata caches" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-density-3", children: [
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-density-1 text-xs", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: refreshInspection,
+              onChange: (event) => onRefreshInspectionChange(event.target.checked)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { title: "Every request this console arms rebuilds the metadata it reads, instead of using the cache. Costs only your requests.", children: "Rebuild on every request" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            disabled: flushing !== null || held === 0,
+            onClick: () => void flush(),
+            title: "Drops cached metadata for every request that follows, not just yours.",
+            children: flushing === "*" ? "Flushing…" : "Flush all"
+          }
+        )
+      ] })
+    ] }),
+    refreshInspection ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Rebuilding on every request. Pages will be slower until this is switched off — it is dropped automatically when the console closes." }) : null,
+    outcome ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: outcome }) : null,
+    error ? /* @__PURE__ */ jsx("p", { className: "text-destructive text-xs", children: error }) : null,
+    /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        data: caches.map((cache) => ({ ...cache, id: cache.policy })),
+        columns,
+        emptyMessage: "This server registered no metadata caches."
+      }
+    )
+  ] });
+}
+function useCaches(client, provided) {
+  const [caches, setCaches] = useState(provided ?? []);
+  const [error, setError] = useState();
+  const reload = useCallback(async () => {
+    if (provided !== void 0) return;
+    try {
+      setCaches((await (client ?? new DebugClient()).inspection()).caches);
+      setError(void 0);
+    } catch (failure) {
+      setError(failure instanceof Error ? failure.message : String(failure));
+    }
+  }, [client, provided]);
+  useEffect(() => {
+    if (provided !== void 0) {
+      setCaches(provided);
+      return;
+    }
+    void reload();
+  }, [provided, reload]);
+  return { caches, error, reload };
+}
+function formatDuration(seconds) {
+  if (seconds < 60) return `${seconds}s`;
+  if (seconds < 3600) return `${Math.round(seconds / 60)}m`;
+  if (seconds < 86400) return `${Math.round(seconds / 3600)}h`;
+  return `${Math.round(seconds / 86400)}d`;
+}
+export {
+  InspectionCaches
+};
+//# sourceMappingURL=InspectionCaches.js.map

package/dist/devtools/tabs/InspectionCaches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InspectionCaches.js","sources":["../../../src/devtools/tabs/InspectionCaches.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { DataTable, type DataTableColumn } from \"../../data/DataTable\";\nimport { DebugClient } from \"../debugClient\";\nimport type { InspectionCacheStats } from \"../types\";\n\n/**\n * The controls for the metadata caches: what the server is holding, and the two\n * ways to make it stop.\n *\n * The two are not interchangeable and the wording says so. **Rebuild on every\n * request** costs the caller who asked and leaves everyone else reading the\n * cache; **flush** drops the entry for every request that follows. One is a way\n * to check your own page, the other is an intervention on a running server, and\n * a console that presented them as the same button would invite the second when\n * the first was meant.\n */\n\nexport type InspectionCachesProps = {\n  client?: DebugClient | undefined;\n  /** Rebuild every metadata lookup on subsequent requests. */\n  refreshInspection: boolean;\n  onRefreshInspectionChange: (refresh: boolean) => void;\n  /** Pre-loaded rows, for a story or a test that has no server. */\n  caches?: InspectionCacheStats[] | undefined;\n};\n\ntype CacheRow = Record<string, unknown> & InspectionCacheStats & { id: string };\n\nexport function InspectionCaches({\n  client,\n  refreshInspection,\n  onRefreshInspectionChange,\n  caches: provided,\n}: InspectionCachesProps) {\n  const { caches, error, reload } = useCaches(client, provided);\n  const [flushing, setFlushing] = useState<string | null>(null);\n  const [outcome, setOutcome] = useState<string | undefined>();\n\n  const flush = useCallback(\n    async (policy?: string) => {\n      setFlushing(policy ?? \"*\");\n      setOutcome(undefined);\n      try {\n        const result = await (client ?? new DebugClient()).flushInspection(\n          policy ? { policy } : {},\n        );\n        // Stated either way. An empty flush and a broken one look identical\n        // without the count, and the operator would conclude the second.\n        setOutcome(\n          result.entries === 0\n            ? \"Nothing was cached to drop.\"\n            : `Dropped ${result.entries} ${result.entries === 1 ? \"entry\" : \"entries\"} from ${result.caches.length} ${result.caches.length === 1 ? \"cache\" : \"caches\"}.`,\n        );\n        await reload();\n      } catch (failure: unknown) {\n        setOutcome(failure instanceof Error ? failure.message : String(failure));\n      } finally {\n        setFlushing(null);\n      }\n    },\n    [client, reload],\n  );\n\n  const columns: DataTableColumn<CacheRow>[] = [\n    { key: \"policy\", label: \"Cache\", grow: true, minWidth: 200 },\n    {\n      key: \"entries\",\n      label: \"Entries\",\n      align: \"right\",\n      shrink: true,\n      render: (value, row) => `${Number(value ?? 0)} / ${row.maxEntries}`,\n      sortValue: (value) => Number(value ?? 0),\n    },\n    {\n      key: \"filling\",\n      label: \"Filling\",\n      align: \"right\",\n      shrink: true,\n      // Blank rather than \"0\": a column of zeros with one occasional 1 buries\n      // the only value that means anything here.\n      render: (value) => (Number(value ?? 0) > 0 ? String(value) : \"\"),\n    },\n    {\n      key: \"freshForSeconds\",\n      label: \"Fresh for\",\n      align: \"right\",\n      shrink: true,\n      render: (value) => formatDuration(Number(value ?? 0)),\n      sortValue: (value) => Number(value ?? 0),\n    },\n    {\n      key: \"id\",\n      label: \"\",\n      shrink: true,\n      render: (_value, row) => (\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          disabled={flushing !== null || row.entries === 0}\n          onClick={() => void flush(row.policy)}\n        >\n          {flushing === row.policy ? \"Flushing…\" : \"Flush\"}\n        </Button>\n      ),\n    },\n  ];\n\n  const held = caches.reduce((total, cache) => total + cache.entries, 0);\n\n  return (\n    <section className=\"flex flex-col gap-density-2\">\n      <div className=\"flex flex-wrap items-center justify-between gap-density-2\">\n        <h3 className=\"font-medium text-muted-foreground text-xs uppercase tracking-wide\">\n          Metadata caches\n        </h3>\n        <div className=\"flex items-center gap-density-3\">\n          <label className=\"flex items-center gap-density-1 text-xs\">\n            <input\n              type=\"checkbox\"\n              checked={refreshInspection}\n              onChange={(event) => onRefreshInspectionChange(event.target.checked)}\n            />\n            <span title=\"Every request this console arms rebuilds the metadata it reads, instead of using the cache. Costs only your requests.\">\n              Rebuild on every request\n            </span>\n          </label>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={flushing !== null || held === 0}\n            onClick={() => void flush()}\n            title=\"Drops cached metadata for every request that follows, not just yours.\"\n          >\n            {flushing === \"*\" ? \"Flushing…\" : \"Flush all\"}\n          </Button>\n        </div>\n      </div>\n\n      {refreshInspection ? (\n        <p className=\"text-muted-foreground text-xs\">\n          Rebuilding on every request. Pages will be slower until this is switched off — it is\n          dropped automatically when the console closes.\n        </p>\n      ) : null}\n      {outcome ? <p className=\"text-muted-foreground text-xs\">{outcome}</p> : null}\n      {error ? <p className=\"text-destructive text-xs\">{error}</p> : null}\n\n      <DataTable<CacheRow>\n        data={caches.map((cache) => ({ ...cache, id: cache.policy }))}\n        columns={columns}\n        emptyMessage=\"This server registered no metadata caches.\"\n      />\n    </section>\n  );\n}\n\nfunction useCaches(client: DebugClient | undefined, provided: InspectionCacheStats[] | undefined) {\n  const [caches, setCaches] = useState<InspectionCacheStats[]>(provided ?? []);\n  const [error, setError] = useState<string | undefined>();\n\n  const reload = useCallback(async () => {\n    if (provided !== undefined) return;\n    try {\n      setCaches((await (client ?? new DebugClient()).inspection()).caches);\n      setError(undefined);\n    } catch (failure: unknown) {\n      setError(failure instanceof Error ? failure.message : String(failure));\n    }\n  }, [client, provided]);\n\n  useEffect(() => {\n    if (provided !== undefined) {\n      setCaches(provided);\n      return;\n    }\n    void reload();\n  }, [provided, reload]);\n\n  return { caches, error, reload };\n}\n\nfunction formatDuration(seconds: number): string {\n  if (seconds < 60) return `${seconds}s`;\n  if (seconds < 3600) return `${Math.round(seconds / 60)}m`;\n  if (seconds < 86_400) return `${Math.round(seconds / 3600)}h`;\n  return `${Math.round(seconds / 86_400)}d`;\n}\n"],"names":[],"mappings":";;;;;AA6BO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAA0B;AACxB,QAAM,EAAE,QAAQ,OAAO,WAAW,UAAU,QAAQ,QAAQ;AAC5D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAC5D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAA;AAE9B,QAAM,QAAQ;AAAA,IACZ,OAAO,WAAoB;AACzB,kBAAY,UAAU,GAAG;AACzB,iBAAW,MAAS;AACpB,UAAI;AACF,cAAM,SAAS,OAAO,UAAU,IAAI,eAAe;AAAA,UACjD,SAAS,EAAE,WAAW,CAAA;AAAA,QAAC;AAIzB;AAAA,UACE,OAAO,YAAY,IACf,gCACA,WAAW,OAAO,OAAO,IAAI,OAAO,YAAY,IAAI,UAAU,SAAS,SAAS,OAAO,OAAO,MAAM,IAAI,OAAO,OAAO,WAAW,IAAI,UAAU,QAAQ;AAAA,QAAA;AAE7J,cAAM,OAAA;AAAA,MACR,SAAS,SAAkB;AACzB,mBAAW,mBAAmB,QAAQ,QAAQ,UAAU,OAAO,OAAO,CAAC;AAAA,MACzE,UAAA;AACE,oBAAY,IAAI;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,MAAM;AAAA,EAAA;AAGjB,QAAM,UAAuC;AAAA,IAC3C,EAAE,KAAK,UAAU,OAAO,SAAS,MAAM,MAAM,UAAU,IAAA;AAAA,IACvD;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,CAAC,OAAO,QAAQ,GAAG,OAAO,SAAS,CAAC,CAAC,MAAM,IAAI,UAAU;AAAA,MACjE,WAAW,CAAC,UAAU,OAAO,SAAS,CAAC;AAAA,IAAA;AAAA,IAEzC;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA;AAAA;AAAA,MAGR,QAAQ,CAAC,UAAW,OAAO,SAAS,CAAC,IAAI,IAAI,OAAO,KAAK,IAAI;AAAA,IAAA;AAAA,IAE/D;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,CAAC,UAAU,eAAe,OAAO,SAAS,CAAC,CAAC;AAAA,MACpD,WAAW,CAAC,UAAU,OAAO,SAAS,CAAC;AAAA,IAAA;AAAA,IAEzC;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,CAAC,QAAQ,QACf;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,UAAU,aAAa,QAAQ,IAAI,YAAY;AAAA,UAC/C,SAAS,MAAM,KAAK,MAAM,IAAI,MAAM;AAAA,UAEnC,UAAA,aAAa,IAAI,SAAS,cAAc;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3C;AAAA,EAEJ;AAGF,QAAM,OAAO,OAAO,OAAO,CAAC,OAAO,UAAU,QAAQ,MAAM,SAAS,CAAC;AAErE,SACE,qBAAC,WAAA,EAAQ,WAAU,+BACjB,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,6DACb,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,WAAU,qEAAoE,UAAA,mBAElF;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,QAAA,qBAAC,SAAA,EAAM,WAAU,2CACf,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,UAAU,CAAC,UAAU,0BAA0B,MAAM,OAAO,OAAO;AAAA,YAAA;AAAA,UAAA;AAAA,UAErE,oBAAC,QAAA,EAAK,OAAM,yHAAwH,UAAA,2BAAA,CAEpI;AAAA,QAAA,GACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,UAAU,aAAa,QAAQ,SAAS;AAAA,YACxC,SAAS,MAAM,KAAK,MAAA;AAAA,YACpB,OAAM;AAAA,YAEL,UAAA,aAAa,MAAM,cAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAEC,oBACC,oBAAC,KAAA,EAAE,WAAU,iCAAgC,iJAG7C,IACE;AAAA,IACH,UAAU,oBAAC,KAAA,EAAE,WAAU,iCAAiC,mBAAQ,IAAO;AAAA,IACvE,QAAQ,oBAAC,KAAA,EAAE,WAAU,4BAA4B,iBAAM,IAAO;AAAA,IAE/D;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,OAAO,IAAI,CAAC,WAAW,EAAE,GAAG,OAAO,IAAI,MAAM,OAAA,EAAS;AAAA,QAC5D;AAAA,QACA,cAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GACF;AAEJ;AAEA,SAAS,UAAU,QAAiC,UAA8C;AAChG,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiC,YAAY,CAAA,CAAE;AAC3E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAA;AAE1B,QAAM,SAAS,YAAY,YAAY;AACrC,QAAI,aAAa,OAAW;AAC5B,QAAI;AACF,iBAAW,OAAO,UAAU,IAAI,eAAe,WAAA,GAAc,MAAM;AACnE,eAAS,MAAS;AAAA,IACpB,SAAS,SAAkB;AACzB,eAAS,mBAAmB,QAAQ,QAAQ,UAAU,OAAO,OAAO,CAAC;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,YAAU,MAAM;AACd,QAAI,aAAa,QAAW;AAC1B,gBAAU,QAAQ;AAClB;AAAA,IACF;AACA,SAAK,OAAA;AAAA,EACP,GAAG,CAAC,UAAU,MAAM,CAAC;AAErB,SAAO,EAAE,QAAQ,OAAO,OAAA;AAC1B;AAEA,SAAS,eAAe,SAAyB;AAC/C,MAAI,UAAU,GAAI,QAAO,GAAG,OAAO;AACnC,MAAI,UAAU,KAAM,QAAO,GAAG,KAAK,MAAM,UAAU,EAAE,CAAC;AACtD,MAAI,UAAU,MAAQ,QAAO,GAAG,KAAK,MAAM,UAAU,IAAI,CAAC;AAC1D,SAAO,GAAG,KAAK,MAAM,UAAU,KAAM,CAAC;AACxC;"}