@flanksource/clicky-ui 0.3.25 → 0.3.26

package/dist/devtools/tabs/InspectionTab.js

@@ -0,0 +1,316 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Button } from "../../components/button.js";
+import { DataTable } from "../../data/DataTable.js";
+import { DebugClient } from "../debugClient.js";
+import { InspectionCaches } from "./InspectionCaches.js";
+const CACHE_COLUMNS = [
+  { key: "policy", label: "Cache", shrink: true, minWidth: 180, filterable: true },
+  {
+    key: "cached",
+    label: "Result",
+    shrink: true,
+    minWidth: 90,
+    filterable: true,
+    render: (value) => value === true ? "hit" : "miss"
+  },
+  {
+    key: "elapsedMs",
+    label: "Waited",
+    align: "right",
+    shrink: true,
+    render: (value) => `${Number(value ?? 0).toFixed(1)}ms`,
+    sortValue: (value) => Number(value ?? 0)
+  },
+  {
+    key: "ageMs",
+    label: "Age",
+    align: "right",
+    shrink: true,
+    render: (value) => formatAge(Number(value ?? 0)),
+    sortValue: (value) => Number(value ?? 0)
+  },
+  { key: "state", label: "State", shrink: true, minWidth: 80 },
+  {
+    key: "refreshError",
+    label: "Note",
+    grow: true,
+    render: (value, row) => row.error || String(value ?? "")
+  }
+];
+const PROBE_COLUMNS = [
+  { key: "column", label: "Column", shrink: true, minWidth: 160 },
+  { key: "field", label: "Field", shrink: true, minWidth: 160 },
+  { key: "distinct", label: "Distinct", align: "right", shrink: true },
+  { key: "limit", label: "Limit", align: "right", shrink: true },
+  {
+    key: "kind",
+    label: "Chose",
+    shrink: true,
+    minWidth: 110,
+    // An empty kind means the count came back under the limit and nothing had
+    // to change — which is an answer, so it is spelled out rather than blank.
+    render: (value) => String(value ?? "") === "" ? "left as-is" : String(value)
+  },
+  {
+    key: "cached",
+    label: "Counted",
+    shrink: true,
+    minWidth: 90,
+    render: (value) => value === true ? "from cache" : "this run"
+  }
+];
+function InspectionTab({
+  record,
+  client,
+  inspections,
+  probes,
+  refreshInspection = false,
+  onRefreshInspectionChange,
+  caches
+}) {
+  const loaded = useInspection(record, client, inspections, probes);
+  const [manualDetail, setManualDetail] = useState();
+  useEffect(() => setManualDetail(void 0), [record == null ? void 0 : record.id]);
+  const displayedInspections = (manualDetail == null ? void 0 : manualDetail.inspections) ?? loaded.inspections;
+  const displayedProbes = (manualDetail == null ? void 0 : manualDetail.probes) ?? loaded.probes;
+  return (
+    // Three sections stacked, so this scrolls as one region rather than
+    // bounding each table separately — a five-row list with its own scrollbar
+    // reads as truncated when it is complete.
+    /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col gap-density-4 overflow-auto p-density-3", children: [
+      /* @__PURE__ */ jsx(
+        InspectionCaches,
+        {
+          ...client ? { client } : {},
+          refreshInspection,
+          onRefreshInspectionChange: onRefreshInspectionChange ?? (() => void 0),
+          ...caches !== void 0 ? { caches } : {}
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ManualInspection,
+        {
+          record,
+          operations: loaded.operations,
+          client,
+          onComplete: setManualDetail
+        }
+      ),
+      loaded.error ? /* @__PURE__ */ jsx(Empty, { className: "text-destructive", children: loaded.error }) : null,
+      !loaded.error && displayedInspections.length === 0 && displayedProbes.length === 0 ? /* @__PURE__ */ jsx(Empty, { children: record ? "This capture looked nothing up — every column it needed was already described." : "Select a capture in Queries to see the metadata it looked up." }) : null,
+      displayedInspections.length > 0 ? /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx(Heading, { children: "Metadata cache" }),
+        /* @__PURE__ */ jsx(
+          DataTable,
+          {
+            data: displayedInspections.map((row, index) => ({
+              ...row,
+              id: `${row.key}-${index}`
+            })),
+            columns: CACHE_COLUMNS,
+            emptyMessage: "No cache lookups"
+          }
+        )
+      ] }) : null,
+      displayedProbes.length > 0 ? /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx(Heading, { children: "Column cardinality" }),
+        /* @__PURE__ */ jsx(
+          DataTable,
+          {
+            data: displayedProbes.map((row, index) => ({
+              ...row,
+              id: `${row.column}-${index}`
+            })),
+            columns: PROBE_COLUMNS,
+            emptyMessage: "No cardinality probes"
+          }
+        )
+      ] }) : null
+    ] })
+  );
+}
+function ManualInspection({
+  record,
+  operations,
+  client,
+  onComplete
+}) {
+  const [selected, setSelected] = useState(0);
+  const [columns, setColumns] = useState("");
+  const [refresh, setRefresh] = useState(true);
+  const [running, setRunning] = useState(false);
+  const [outcome, setOutcome] = useState();
+  useEffect(() => {
+    setSelected(0);
+    setColumns("");
+    setOutcome(void 0);
+  }, [record == null ? void 0 : record.id]);
+  const operation = operations[selected];
+  if (!record) {
+    return /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx(Heading, { children: "Run inspection" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "Select a capture first; its provider request supplies the connection and query." })
+    ] });
+  }
+  if (!operation) {
+    return /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx(Heading, { children: "Run inspection" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "This capture has no provider operation that can be inspected." })
+    ] });
+  }
+  const query = operation.request.rendered || operation.request.query || "";
+  const connection = operation.request.connection;
+  const request = {
+    provider: operation.provider,
+    ...connection ? { connection } : {},
+    query,
+    ...operation.request.options ? { options: operation.request.options } : {},
+    columns: parseColumns(columns),
+    refresh
+  };
+  const run = async () => {
+    var _a, _b;
+    setRunning(true);
+    setOutcome(void 0);
+    try {
+      const detail = await (client ?? new DebugClient()).runInspection(request);
+      onComplete(detail);
+      const failure = detail.summary.error ?? ((_b = (_a = detail.operations) == null ? void 0 : _a.find((item) => item.error)) == null ? void 0 : _b.error);
+      setOutcome(
+        failure ? `Inspection completed with an error: ${failure}` : `Inspection ${detail.summary.id} completed.`
+      );
+    } catch (failure) {
+      setOutcome(failure instanceof Error ? failure.message : String(failure));
+    } finally {
+      setRunning(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-density-2 rounded border border-border p-density-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-density-2", children: [
+      /* @__PURE__ */ jsx(Heading, { children: "Run inspection" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
+        operation.provider,
+        " · ",
+        connection || "inline connection"
+      ] })
+    ] }),
+    operations.length > 1 ? /* @__PURE__ */ jsxs("label", { className: "grid gap-density-1 text-xs", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Provider operation" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: "rounded border border-border bg-background px-density-2 py-density-1",
+          value: selected,
+          onChange: (event) => setSelected(Number(event.target.value)),
+          children: operations.map((item, index) => /* @__PURE__ */ jsxs("option", { value: index, children: [
+            index + 1,
+            ". ",
+            item.provider,
+            " · ",
+            item.request.connection || "inline connection"
+          ] }, `${item.provider}-${index}`))
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs("label", { className: "grid gap-density-1 text-xs", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Columns to inspect" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "aria-label": "Columns to inspect",
+          className: "rounded border border-border bg-background px-density-2 py-density-1 font-mono",
+          value: columns,
+          placeholder: "Auto-detect, or enter comma-separated names",
+          onChange: (event) => setColumns(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("code", { className: "max-h-20 overflow-auto whitespace-pre-wrap rounded bg-muted/40 p-density-2 text-xs", children: query }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-density-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-density-1 text-xs", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: refresh,
+            onChange: (event) => setRefresh(event.target.checked)
+          }
+        ),
+        "Refresh cached metadata"
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", disabled: running || query === "", onClick: () => void run(), children: running ? "Running inspection…" : "Run inspection" })
+    ] }),
+    outcome ? /* @__PURE__ */ jsx("p", { className: outcome.includes("error") ? "text-destructive text-xs" : "text-muted-foreground text-xs", children: outcome }) : null
+  ] });
+}
+function parseColumns(value) {
+  return [...new Set(value.split(",").map((column) => column.trim()).filter(Boolean))];
+}
+function Heading({ children }) {
+  return /* @__PURE__ */ jsx("h3", { className: "mb-density-2 font-medium text-muted-foreground text-xs uppercase tracking-wide", children });
+}
+function Empty({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: `p-density-6 text-center text-muted-foreground text-sm ${className ?? ""}`, children });
+}
+function useInspection(record, client, providedInspections, providedProbes) {
+  const [inspections, setInspections] = useState(providedInspections ?? []);
+  const [probes, setProbes] = useState(providedProbes ?? []);
+  const [operations, setOperations] = useState(
+    summaryOperations(record)
+  );
+  const [error, setError] = useState();
+  useEffect(() => {
+    if (providedInspections !== void 0 || providedProbes !== void 0) {
+      setInspections(providedInspections ?? []);
+      setProbes(providedProbes ?? []);
+      setOperations(summaryOperations(record));
+      return;
+    }
+    if (!record) {
+      setInspections([]);
+      setProbes([]);
+      setOperations([]);
+      return;
+    }
+    let cancelled = false;
+    setError(void 0);
+    setInspections([]);
+    setProbes([]);
+    setOperations(summaryOperations(record));
+    (client ?? new DebugClient()).detail(record.id).then((detail) => {
+      if (cancelled) return;
+      setInspections(detail.inspections ?? []);
+      setProbes(detail.probes ?? []);
+      setOperations(detail.operations ?? summaryOperations(record));
+    }).catch((failure) => {
+      if (!cancelled) setError(failure instanceof Error ? failure.message : String(failure));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [record, client, providedInspections, providedProbes]);
+  return { inspections, probes, operations, error };
+}
+function summaryOperations(record) {
+  return ((record == null ? void 0 : record.operations) ?? []).map((operation) => ({
+    provider: operation.provider,
+    request: {
+      ...operation.query ? { query: operation.query, rendered: operation.query } : {},
+      ...operation.connection ? { connection: operation.connection } : {},
+      ...operation.method ? { method: operation.method } : {},
+      ...operation.url ? { url: operation.url } : {}
+    },
+    ...operation.error ? { error: operation.error } : {}
+  }));
+}
+function formatAge(ageMs) {
+  if (ageMs < 1e3) return `${ageMs}ms`;
+  if (ageMs < 6e4) return `${(ageMs / 1e3).toFixed(0)}s`;
+  if (ageMs < 36e5) return `${(ageMs / 6e4).toFixed(0)}m`;
+  return `${(ageMs / 36e5).toFixed(1)}h`;
+}
+export {
+  InspectionTab
+};
+//# sourceMappingURL=InspectionTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InspectionTab.js","sources":["../../../src/devtools/tabs/InspectionTab.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { DataTable, type DataTableColumn } from \"../../data/DataTable\";\nimport {\n  DebugClient,\n  type ManualInspectionRequest,\n} from \"../debugClient\";\nimport type { QueryBrowserDiagnostics } from \"../../data/query-browser/QueryBrowser.types\";\nimport type {\n  CardinalityProbe,\n  ExecutionDetail,\n  ExecutionSummary,\n  InspectionCacheStats,\n  InspectionRecord,\n} from \"../types\";\nimport { InspectionCaches } from \"./InspectionCaches\";\n\n/**\n * What the request paid to describe its own columns.\n *\n * Two questions live here, and both are otherwise unanswerable from outside the\n * server. \"Why did opening this profile take four seconds once and 200ms\n * after?\" is the cache table: a miss pays the whole fill, a hit pays nothing,\n * and the elapsed column is the difference. \"Why is this column a free-text box\n * instead of a dropdown?\" is the probe table: a distinct count above the lookup\n * limit is the entire reason, and reading the provider's source was previously\n * the only way to learn it.\n */\n\nexport type InspectionTabProps = {\n  record?: ExecutionSummary | undefined;\n  client?: DebugClient | undefined;\n  /** Pre-loaded rows, for a story or a test that has no server. */\n  inspections?: InspectionRecord[] | undefined;\n  probes?: CardinalityProbe[] | undefined;\n  /** Rebuild every metadata lookup on subsequent requests. */\n  refreshInspection?: boolean | undefined;\n  onRefreshInspectionChange?: ((refresh: boolean) => void) | undefined;\n  /** Pre-loaded cache stats, for a story or a test that has no server. */\n  caches?: InspectionCacheStats[] | undefined;\n};\n\ntype CacheRow = Record<string, unknown> & InspectionRecord & { id: string };\ntype ProbeRow = Record<string, unknown> & CardinalityProbe & { id: string };\n\nconst CACHE_COLUMNS: DataTableColumn<CacheRow>[] = [\n  { key: \"policy\", label: \"Cache\", shrink: true, minWidth: 180, filterable: true },\n  {\n    key: \"cached\",\n    label: \"Result\",\n    shrink: true,\n    minWidth: 90,\n    filterable: true,\n    render: (value) => (value === true ? \"hit\" : \"miss\"),\n  },\n  {\n    key: \"elapsedMs\",\n    label: \"Waited\",\n    align: \"right\",\n    shrink: true,\n    render: (value) => `${Number(value ?? 0).toFixed(1)}ms`,\n    sortValue: (value) => Number(value ?? 0),\n  },\n  {\n    key: \"ageMs\",\n    label: \"Age\",\n    align: \"right\",\n    shrink: true,\n    render: (value) => formatAge(Number(value ?? 0)),\n    sortValue: (value) => Number(value ?? 0),\n  },\n  { key: \"state\", label: \"State\", shrink: true, minWidth: 80 },\n  {\n    key: \"refreshError\",\n    label: \"Note\",\n    grow: true,\n    render: (value, row) => row.error || String(value ?? \"\"),\n  },\n];\n\nconst PROBE_COLUMNS: DataTableColumn<ProbeRow>[] = [\n  { key: \"column\", label: \"Column\", shrink: true, minWidth: 160 },\n  { key: \"field\", label: \"Field\", shrink: true, minWidth: 160 },\n  { key: \"distinct\", label: \"Distinct\", align: \"right\", shrink: true },\n  { key: \"limit\", label: \"Limit\", align: \"right\", shrink: true },\n  {\n    key: \"kind\",\n    label: \"Chose\",\n    shrink: true,\n    minWidth: 110,\n    // An empty kind means the count came back under the limit and nothing had\n    // to change — which is an answer, so it is spelled out rather than blank.\n    render: (value) => (String(value ?? \"\") === \"\" ? \"left as-is\" : String(value)),\n  },\n  {\n    key: \"cached\",\n    label: \"Counted\",\n    shrink: true,\n    minWidth: 90,\n    render: (value) => (value === true ? \"from cache\" : \"this run\"),\n  },\n];\n\nexport function InspectionTab({\n  record,\n  client,\n  inspections,\n  probes,\n  refreshInspection = false,\n  onRefreshInspectionChange,\n  caches,\n}: InspectionTabProps) {\n  const loaded = useInspection(record, client, inspections, probes);\n  const [manualDetail, setManualDetail] = useState<ExecutionDetail | undefined>();\n\n  useEffect(() => setManualDetail(undefined), [record?.id]);\n\n  const displayedInspections = manualDetail?.inspections ?? loaded.inspections;\n  const displayedProbes = manualDetail?.probes ?? loaded.probes;\n\n  return (\n    // Three sections stacked, so this scrolls as one region rather than\n    // bounding each table separately — a five-row list with its own scrollbar\n    // reads as truncated when it is complete.\n    <div className=\"flex h-full min-h-0 flex-col gap-density-4 overflow-auto p-density-3\">\n      {/* Always first, and always present: the caches are the server's state,\n          not the selected capture's, so they are worth reading — and flushable —\n          even before anything has run. */}\n      <InspectionCaches\n        {...(client ? { client } : {})}\n        refreshInspection={refreshInspection}\n        onRefreshInspectionChange={onRefreshInspectionChange ?? (() => undefined)}\n        {...(caches !== undefined ? { caches } : {})}\n      />\n\n      <ManualInspection\n        record={record}\n        operations={loaded.operations}\n        client={client}\n        onComplete={setManualDetail}\n      />\n\n      {loaded.error ? <Empty className=\"text-destructive\">{loaded.error}</Empty> : null}\n      {!loaded.error && displayedInspections.length === 0 && displayedProbes.length === 0 ? (\n        <Empty>\n          {record\n            ? \"This capture looked nothing up — every column it needed was already described.\"\n            : \"Select a capture in Queries to see the metadata it looked up.\"}\n        </Empty>\n      ) : null}\n\n      {displayedInspections.length > 0 ? (\n        <section>\n          <Heading>Metadata cache</Heading>\n          <DataTable<CacheRow>\n            data={displayedInspections.map((row, index) => ({\n              ...row,\n              id: `${row.key}-${index}`,\n            }))}\n            columns={CACHE_COLUMNS}\n            emptyMessage=\"No cache lookups\"\n          />\n        </section>\n      ) : null}\n\n      {displayedProbes.length > 0 ? (\n        <section>\n          <Heading>Column cardinality</Heading>\n          <DataTable<ProbeRow>\n            data={displayedProbes.map((row, index) => ({\n              ...row,\n              id: `${row.column}-${index}`,\n            }))}\n            columns={PROBE_COLUMNS}\n            emptyMessage=\"No cardinality probes\"\n          />\n        </section>\n      ) : null}\n    </div>\n  );\n}\n\nfunction ManualInspection({\n  record,\n  operations,\n  client,\n  onComplete,\n}: {\n  record: ExecutionSummary | undefined;\n  operations: QueryBrowserDiagnostics[];\n  client: DebugClient | undefined;\n  onComplete: (detail: ExecutionDetail) => void;\n}) {\n  const [selected, setSelected] = useState(0);\n  const [columns, setColumns] = useState(\"\");\n  const [refresh, setRefresh] = useState(true);\n  const [running, setRunning] = useState(false);\n  const [outcome, setOutcome] = useState<string | undefined>();\n\n  useEffect(() => {\n    setSelected(0);\n    setColumns(\"\");\n    setOutcome(undefined);\n  }, [record?.id]);\n\n  const operation = operations[selected];\n  if (!record) {\n    return (\n      <section>\n        <Heading>Run inspection</Heading>\n        <p className=\"text-muted-foreground text-sm\">\n          Select a capture first; its provider request supplies the connection and query.\n        </p>\n      </section>\n    );\n  }\n  if (!operation) {\n    return (\n      <section>\n        <Heading>Run inspection</Heading>\n        <p className=\"text-muted-foreground text-sm\">\n          This capture has no provider operation that can be inspected.\n        </p>\n      </section>\n    );\n  }\n\n  const query = operation.request.rendered || operation.request.query || \"\";\n  const connection = operation.request.connection;\n  const request: ManualInspectionRequest = {\n    provider: operation.provider,\n    ...(connection ? { connection } : {}),\n    query,\n    ...(operation.request.options ? { options: operation.request.options } : {}),\n    columns: parseColumns(columns),\n    refresh,\n  };\n\n  const run = async () => {\n    setRunning(true);\n    setOutcome(undefined);\n    try {\n      const detail = await (client ?? new DebugClient()).runInspection(request);\n      onComplete(detail);\n      const failure = detail.summary.error ?? detail.operations?.find((item) => item.error)?.error;\n      setOutcome(\n        failure\n          ? `Inspection completed with an error: ${failure}`\n          : `Inspection ${detail.summary.id} completed.`,\n      );\n    } catch (failure: unknown) {\n      setOutcome(failure instanceof Error ? failure.message : String(failure));\n    } finally {\n      setRunning(false);\n    }\n  };\n\n  return (\n    <section className=\"flex flex-col gap-density-2 rounded border border-border p-density-3\">\n      <div className=\"flex flex-wrap items-center justify-between gap-density-2\">\n        <Heading>Run inspection</Heading>\n        <span className=\"text-muted-foreground text-xs\">\n          {operation.provider} · {connection || \"inline connection\"}\n        </span>\n      </div>\n      {operations.length > 1 ? (\n        <label className=\"grid gap-density-1 text-xs\">\n          <span className=\"text-muted-foreground\">Provider operation</span>\n          <select\n            className=\"rounded border border-border bg-background px-density-2 py-density-1\"\n            value={selected}\n            onChange={(event) => setSelected(Number(event.target.value))}\n          >\n            {operations.map((item, index) => (\n              <option key={`${item.provider}-${index}`} value={index}>\n                {index + 1}. {item.provider} · {item.request.connection || \"inline connection\"}\n              </option>\n            ))}\n          </select>\n        </label>\n      ) : null}\n      <label className=\"grid gap-density-1 text-xs\">\n        <span className=\"text-muted-foreground\">Columns to inspect</span>\n        <input\n          aria-label=\"Columns to inspect\"\n          className=\"rounded border border-border bg-background px-density-2 py-density-1 font-mono\"\n          value={columns}\n          placeholder=\"Auto-detect, or enter comma-separated names\"\n          onChange={(event) => setColumns(event.target.value)}\n        />\n      </label>\n      <code className=\"max-h-20 overflow-auto whitespace-pre-wrap rounded bg-muted/40 p-density-2 text-xs\">\n        {query}\n      </code>\n      <div className=\"flex flex-wrap items-center justify-between gap-density-2\">\n        <label className=\"flex items-center gap-density-1 text-xs\">\n          <input\n            type=\"checkbox\"\n            checked={refresh}\n            onChange={(event) => setRefresh(event.target.checked)}\n          />\n          Refresh cached metadata\n        </label>\n        <Button size=\"sm\" disabled={running || query === \"\"} onClick={() => void run()}>\n          {running ? \"Running inspection…\" : \"Run inspection\"}\n        </Button>\n      </div>\n      {outcome ? (\n        <p className={outcome.includes(\"error\") ? \"text-destructive text-xs\" : \"text-muted-foreground text-xs\"}>\n          {outcome}\n        </p>\n      ) : null}\n    </section>\n  );\n}\n\nfunction parseColumns(value: string): string[] {\n  return [...new Set(value.split(\",\").map((column) => column.trim()).filter(Boolean))];\n}\n\nfunction Heading({ children }: { children: React.ReactNode }) {\n  return (\n    <h3 className=\"mb-density-2 font-medium text-muted-foreground text-xs uppercase tracking-wide\">\n      {children}\n    </h3>\n  );\n}\n\nfunction Empty({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <div className={`p-density-6 text-center text-muted-foreground text-sm ${className ?? \"\"}`}>\n      {children}\n    </div>\n  );\n}\n\nfunction useInspection(\n  record: ExecutionSummary | undefined,\n  client: DebugClient | undefined,\n  providedInspections: InspectionRecord[] | undefined,\n  providedProbes: CardinalityProbe[] | undefined,\n) {\n  const [inspections, setInspections] = useState<InspectionRecord[]>(providedInspections ?? []);\n  const [probes, setProbes] = useState<CardinalityProbe[]>(providedProbes ?? []);\n  const [operations, setOperations] = useState<QueryBrowserDiagnostics[]>(\n    summaryOperations(record),\n  );\n  const [error, setError] = useState<string | undefined>();\n\n  useEffect(() => {\n    if (providedInspections !== undefined || providedProbes !== undefined) {\n      setInspections(providedInspections ?? []);\n      setProbes(providedProbes ?? []);\n      setOperations(summaryOperations(record));\n      return;\n    }\n    if (!record) {\n      setInspections([]);\n      setProbes([]);\n      setOperations([]);\n      return;\n    }\n    let cancelled = false;\n    setError(undefined);\n    setInspections([]);\n    setProbes([]);\n    setOperations(summaryOperations(record));\n    (client ?? new DebugClient())\n      .detail(record.id)\n      .then((detail) => {\n        if (cancelled) return;\n        setInspections(detail.inspections ?? []);\n        setProbes(detail.probes ?? []);\n        setOperations(detail.operations ?? summaryOperations(record));\n      })\n      .catch((failure: unknown) => {\n        if (!cancelled) setError(failure instanceof Error ? failure.message : String(failure));\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [record, client, providedInspections, providedProbes]);\n\n  return { inspections, probes, operations, error };\n}\n\nfunction summaryOperations(record: ExecutionSummary | undefined): QueryBrowserDiagnostics[] {\n  return (record?.operations ?? []).map((operation) => ({\n    provider: operation.provider,\n    request: {\n      ...(operation.query ? { query: operation.query, rendered: operation.query } : {}),\n      ...(operation.connection ? { connection: operation.connection } : {}),\n      ...(operation.method ? { method: operation.method } : {}),\n      ...(operation.url ? { url: operation.url } : {}),\n    },\n    ...(operation.error ? { error: operation.error } : {}),\n  }));\n}\n\nfunction formatAge(ageMs: number): string {\n  if (ageMs < 1000) return `${ageMs}ms`;\n  if (ageMs < 60_000) return `${(ageMs / 1000).toFixed(0)}s`;\n  if (ageMs < 3_600_000) return `${(ageMs / 60_000).toFixed(0)}m`;\n  return `${(ageMs / 3_600_000).toFixed(1)}h`;\n}\n"],"names":[],"mappings":"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"}

package/dist/devtools/tabs/NetworkTab.cjs

@@ -0,0 +1,91 @@
+"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 HarPanel = require("../../data/har/HarPanel.cjs");
+const debugClient = require("../debugClient.cjs");
+function NetworkTab({ record, client, entries: provided, search }) {
+  const { entries, error, sensitive, loading } = useHarEntries(record, client, provided);
+  if (!record && !provided) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Empty, { children: "Select a capture in Queries to see the HTTP calls it made." });
+  }
+  if (loading) return /* @__PURE__ */ jsxRuntime.jsx(Empty, { children: "Loading HTTP traffic…" });
+  if (error) return /* @__PURE__ */ jsxRuntime.jsx(Empty, { className: "text-destructive", children: error });
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Empty, { children: "This capture made no HTTP calls — its provider does not speak HTTP." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-density-2 border-border border-b px-density-3 py-density-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground text-xs", children: [
+        entries.length,
+        " request",
+        entries.length === 1 ? "" : "s",
+        sensitive ? " · contains credentials — do not share this export" : ""
+      ] }),
+      record ? /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          size: "sm",
+          variant: "outline",
+          onClick: () => downloadHar(record.id, client),
+          children: "Export HAR"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx(HarPanel.HarPanel, { entries, ...search !== void 0 ? { search } : {} }) })
+  ] });
+}
+function Empty({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `p-density-6 text-center text-muted-foreground text-sm ${className ?? ""}`, children });
+}
+function useHarEntries(record, client, provided) {
+  const [entries, setEntries] = react.useState(provided ?? []);
+  const [sensitive, setSensitive] = react.useState(false);
+  const [error, setError] = react.useState();
+  const [loading, setLoading] = react.useState(false);
+  react.useEffect(() => {
+    if (provided !== void 0) {
+      setEntries(provided);
+      return;
+    }
+    if (!record) {
+      setEntries([]);
+      return;
+    }
+    if (record.counts.harEntries === 0) {
+      setEntries([]);
+      setSensitive(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(void 0);
+    (client ?? new debugClient.DebugClient()).detail(record.id).then((detail) => {
+      var _a;
+      if (cancelled) return;
+      setEntries(((_a = detail.har) == null ? void 0 : _a.log.entries) ?? []);
+      setSensitive(detail.harSensitive === true);
+    }).catch((failure) => {
+      if (!cancelled) setError(failure instanceof Error ? failure.message : String(failure));
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [record, client, provided]);
+  return { entries, error, sensitive, loading };
+}
+async function downloadHar(id, client) {
+  const file = await (client ?? new debugClient.DebugClient()).har(id);
+  const blob = new Blob([JSON.stringify(file, null, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = `${id}.har`;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+exports.NetworkTab = NetworkTab;
+//# sourceMappingURL=NetworkTab.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkTab.cjs","sources":["../../../src/devtools/tabs/NetworkTab.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { HarPanel } from \"../../data/har/HarPanel\";\nimport { DebugClient } from \"../debugClient\";\nimport type { ExecutionSummary, HAREntry } from \"../types\";\n\n/**\n * The HTTP traffic a capture rode on, given the producer it never had.\n *\n * HarPanel has shipped in this library with no data source on either side of\n * the wire. The entries here are real HAR 1.2 built by the server's own\n * collector, which is why \"Export HAR\" produces a file Chrome devtools opens\n * directly rather than a lookalike.\n */\n\nexport type NetworkTabProps = {\n  /** The record whose traffic to show; the most recent one with entries by default. */\n  record?: ExecutionSummary | undefined;\n  client?: DebugClient | undefined;\n  /** Pre-loaded entries, for a story or a test that has no server. */\n  entries?: HAREntry[] | undefined;\n  search?: string | undefined;\n};\n\nexport function NetworkTab({ record, client, entries: provided, search }: NetworkTabProps) {\n  const { entries, error, sensitive, loading } = useHarEntries(record, client, provided);\n\n  if (!record && !provided) {\n    return (\n      <Empty>Select a capture in Queries to see the HTTP calls it made.</Empty>\n    );\n  }\n  if (loading) return <Empty>Loading HTTP traffic…</Empty>;\n  if (error) return <Empty className=\"text-destructive\">{error}</Empty>;\n  if (entries.length === 0) {\n    return <Empty>This capture made no HTTP calls — its provider does not speak HTTP.</Empty>;\n  }\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"flex items-center justify-between gap-density-2 border-border border-b px-density-3 py-density-2\">\n        <span className=\"text-muted-foreground text-xs\">\n          {entries.length} request{entries.length === 1 ? \"\" : \"s\"}\n          {/* Never softened: a capture taken with credential logging on is a\n              different kind of file, and whoever shares it has to know. */}\n          {sensitive ? \" · contains credentials — do not share this export\" : \"\"}\n        </span>\n        {record ? (\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => downloadHar(record.id, client)}\n          >\n            Export HAR\n          </Button>\n        ) : null}\n      </div>\n      <div className=\"flex min-h-0 flex-1 flex-col\">\n        <HarPanel entries={entries} {...(search !== undefined ? { search } : {})} />\n      </div>\n    </div>\n  );\n}\n\nfunction Empty({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <div className={`p-density-6 text-center text-muted-foreground text-sm ${className ?? \"\"}`}>\n      {children}\n    </div>\n  );\n}\n\nfunction useHarEntries(\n  record: ExecutionSummary | undefined,\n  client: DebugClient | undefined,\n  provided: HAREntry[] | undefined,\n) {\n  const [entries, setEntries] = useState<HAREntry[]>(provided ?? []);\n  const [sensitive, setSensitive] = useState(false);\n  const [error, setError] = useState<string | undefined>();\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    if (provided !== undefined) {\n      setEntries(provided);\n      return;\n    }\n    if (!record) {\n      setEntries([]);\n      return;\n    }\n    // Nothing to fetch when the summary already says there was no traffic —\n    // the counts exist so a badge, and this, can skip the round trip.\n    if (record.counts.harEntries === 0) {\n      setEntries([]);\n      setSensitive(false);\n      return;\n    }\n    let cancelled = false;\n    setLoading(true);\n    setError(undefined);\n    (client ?? new DebugClient())\n      .detail(record.id)\n      .then((detail) => {\n        if (cancelled) return;\n        setEntries(detail.har?.log.entries ?? []);\n        setSensitive(detail.harSensitive === true);\n      })\n      .catch((failure: unknown) => {\n        if (!cancelled) setError(failure instanceof Error ? failure.message : String(failure));\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [record, client, provided]);\n\n  return { entries, error, sensitive, loading };\n}\n\nasync function downloadHar(id: string, client?: DebugClient): Promise<void> {\n  const file = await (client ?? new DebugClient()).har(id);\n  const blob = new Blob([JSON.stringify(file, null, 2)], { type: \"application/json\" });\n  const url = URL.createObjectURL(blob);\n  const anchor = document.createElement(\"a\");\n  anchor.href = url;\n  anchor.download = `${id}.har`;\n  anchor.click();\n  URL.revokeObjectURL(url);\n}\n"],"names":["jsx","jsxs","Button","HarPanel","useState","useEffect","DebugClient"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import { DebugClient } from '../debugClient';
+import { ExecutionSummary, HAREntry } from '../types';
+/**
+ * The HTTP traffic a capture rode on, given the producer it never had.
+ *
+ * HarPanel has shipped in this library with no data source on either side of
+ * the wire. The entries here are real HAR 1.2 built by the server's own
+ * collector, which is why "Export HAR" produces a file Chrome devtools opens
+ * directly rather than a lookalike.
+ */
+export type NetworkTabProps = {
+    /** The record whose traffic to show; the most recent one with entries by default. */
+    record?: ExecutionSummary | undefined;
+    client?: DebugClient | undefined;
+    /** Pre-loaded entries, for a story or a test that has no server. */
+    entries?: HAREntry[] | undefined;
+    search?: string | undefined;
+};
+export declare function NetworkTab({ record, client, entries: provided, search }: NetworkTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NetworkTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkTab.d.ts","sourceRoot":"","sources":["../../../src/devtools/tabs/NetworkTab.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAE3D;;;;;;;GAOG;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B,qFAAqF;IACrF,MAAM,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACtC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,oEAAoE;IACpE,OAAO,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,eAAe,2CAsCxF"}

package/dist/devtools/tabs/NetworkTab.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Button } from "../../components/button.js";
+import { HarPanel } from "../../data/har/HarPanel.js";
+import { DebugClient } from "../debugClient.js";
+function NetworkTab({ record, client, entries: provided, search }) {
+  const { entries, error, sensitive, loading } = useHarEntries(record, client, provided);
+  if (!record && !provided) {
+    return /* @__PURE__ */ jsx(Empty, { children: "Select a capture in Queries to see the HTTP calls it made." });
+  }
+  if (loading) return /* @__PURE__ */ jsx(Empty, { children: "Loading HTTP traffic…" });
+  if (error) return /* @__PURE__ */ jsx(Empty, { className: "text-destructive", children: error });
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(Empty, { children: "This capture made no HTTP calls — its provider does not speak HTTP." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-density-2 border-border border-b px-density-3 py-density-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
+        entries.length,
+        " request",
+        entries.length === 1 ? "" : "s",
+        sensitive ? " · contains credentials — do not share this export" : ""
+      ] }),
+      record ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "outline",
+          onClick: () => downloadHar(record.id, client),
+          children: "Export HAR"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx(HarPanel, { entries, ...search !== void 0 ? { search } : {} }) })
+  ] });
+}
+function Empty({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: `p-density-6 text-center text-muted-foreground text-sm ${className ?? ""}`, children });
+}
+function useHarEntries(record, client, provided) {
+  const [entries, setEntries] = useState(provided ?? []);
+  const [sensitive, setSensitive] = useState(false);
+  const [error, setError] = useState();
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (provided !== void 0) {
+      setEntries(provided);
+      return;
+    }
+    if (!record) {
+      setEntries([]);
+      return;
+    }
+    if (record.counts.harEntries === 0) {
+      setEntries([]);
+      setSensitive(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(void 0);
+    (client ?? new DebugClient()).detail(record.id).then((detail) => {
+      var _a;
+      if (cancelled) return;
+      setEntries(((_a = detail.har) == null ? void 0 : _a.log.entries) ?? []);
+      setSensitive(detail.harSensitive === true);
+    }).catch((failure) => {
+      if (!cancelled) setError(failure instanceof Error ? failure.message : String(failure));
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [record, client, provided]);
+  return { entries, error, sensitive, loading };
+}
+async function downloadHar(id, client) {
+  const file = await (client ?? new DebugClient()).har(id);
+  const blob = new Blob([JSON.stringify(file, null, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = `${id}.har`;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+export {
+  NetworkTab
+};
+//# sourceMappingURL=NetworkTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkTab.js","sources":["../../../src/devtools/tabs/NetworkTab.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { HarPanel } from \"../../data/har/HarPanel\";\nimport { DebugClient } from \"../debugClient\";\nimport type { ExecutionSummary, HAREntry } from \"../types\";\n\n/**\n * The HTTP traffic a capture rode on, given the producer it never had.\n *\n * HarPanel has shipped in this library with no data source on either side of\n * the wire. The entries here are real HAR 1.2 built by the server's own\n * collector, which is why \"Export HAR\" produces a file Chrome devtools opens\n * directly rather than a lookalike.\n */\n\nexport type NetworkTabProps = {\n  /** The record whose traffic to show; the most recent one with entries by default. */\n  record?: ExecutionSummary | undefined;\n  client?: DebugClient | undefined;\n  /** Pre-loaded entries, for a story or a test that has no server. */\n  entries?: HAREntry[] | undefined;\n  search?: string | undefined;\n};\n\nexport function NetworkTab({ record, client, entries: provided, search }: NetworkTabProps) {\n  const { entries, error, sensitive, loading } = useHarEntries(record, client, provided);\n\n  if (!record && !provided) {\n    return (\n      <Empty>Select a capture in Queries to see the HTTP calls it made.</Empty>\n    );\n  }\n  if (loading) return <Empty>Loading HTTP traffic…</Empty>;\n  if (error) return <Empty className=\"text-destructive\">{error}</Empty>;\n  if (entries.length === 0) {\n    return <Empty>This capture made no HTTP calls — its provider does not speak HTTP.</Empty>;\n  }\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"flex items-center justify-between gap-density-2 border-border border-b px-density-3 py-density-2\">\n        <span className=\"text-muted-foreground text-xs\">\n          {entries.length} request{entries.length === 1 ? \"\" : \"s\"}\n          {/* Never softened: a capture taken with credential logging on is a\n              different kind of file, and whoever shares it has to know. */}\n          {sensitive ? \" · contains credentials — do not share this export\" : \"\"}\n        </span>\n        {record ? (\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => downloadHar(record.id, client)}\n          >\n            Export HAR\n          </Button>\n        ) : null}\n      </div>\n      <div className=\"flex min-h-0 flex-1 flex-col\">\n        <HarPanel entries={entries} {...(search !== undefined ? { search } : {})} />\n      </div>\n    </div>\n  );\n}\n\nfunction Empty({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <div className={`p-density-6 text-center text-muted-foreground text-sm ${className ?? \"\"}`}>\n      {children}\n    </div>\n  );\n}\n\nfunction useHarEntries(\n  record: ExecutionSummary | undefined,\n  client: DebugClient | undefined,\n  provided: HAREntry[] | undefined,\n) {\n  const [entries, setEntries] = useState<HAREntry[]>(provided ?? []);\n  const [sensitive, setSensitive] = useState(false);\n  const [error, setError] = useState<string | undefined>();\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    if (provided !== undefined) {\n      setEntries(provided);\n      return;\n    }\n    if (!record) {\n      setEntries([]);\n      return;\n    }\n    // Nothing to fetch when the summary already says there was no traffic —\n    // the counts exist so a badge, and this, can skip the round trip.\n    if (record.counts.harEntries === 0) {\n      setEntries([]);\n      setSensitive(false);\n      return;\n    }\n    let cancelled = false;\n    setLoading(true);\n    setError(undefined);\n    (client ?? new DebugClient())\n      .detail(record.id)\n      .then((detail) => {\n        if (cancelled) return;\n        setEntries(detail.har?.log.entries ?? []);\n        setSensitive(detail.harSensitive === true);\n      })\n      .catch((failure: unknown) => {\n        if (!cancelled) setError(failure instanceof Error ? failure.message : String(failure));\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [record, client, provided]);\n\n  return { entries, error, sensitive, loading };\n}\n\nasync function downloadHar(id: string, client?: DebugClient): Promise<void> {\n  const file = await (client ?? new DebugClient()).har(id);\n  const blob = new Blob([JSON.stringify(file, null, 2)], { type: \"application/json\" });\n  const url = URL.createObjectURL(blob);\n  const anchor = document.createElement(\"a\");\n  anchor.href = url;\n  anchor.download = `${id}.har`;\n  anchor.click();\n  URL.revokeObjectURL(url);\n}\n"],"names":[],"mappings":"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"}