@flanksource/clicky-ui 0.2.13 → 0.2.15

package/dist/data/cache-browser/CacheDetailPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CacheDetailPanel.js","sources":["../../../src/data/cache-browser/CacheDetailPanel.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useQuery, useQueryClient } from \"@tanstack/react-query\";\nimport { cn } from \"../../lib/utils\";\nimport { formatBytes, formatDuration, formatShort } from \"../../lib/format\";\nimport { Icon } from \"../Icon\";\nimport { UiFolder, UiRefresh, UiTrash } from \"../../icons\";\nimport { KeyValueList } from \"../KeyValueList\";\nimport { TabButton } from \"../TabButton\";\nimport { Section } from \"../../layout/Section\";\nimport { cacheQueryKeys, type CacheClient } from \"./api\";\nimport type { CacheAdapterRegistry } from \"./adapter\";\nimport { CacheValue } from \"./CacheValue\";\nimport { isLeaf, type CacheTreeNode } from \"./types\";\n\nexport type CacheDetailPanelProps = {\n  client: CacheClient;\n  registry: CacheAdapterRegistry;\n  node: CacheTreeNode;\n  /** Called after the node (key or whole prefix) was deleted. */\n  onDeleted?: (node: CacheTreeNode) => void;\n  /** Drill into a child prefix/key from the subtree overview. */\n  onSelect?: (node: CacheTreeNode) => void;\n  className?: string;\n};\n\n/**\n * Right-hand pane of the cache browser: full key detail (metadata + adapter\n * or type-aware value rendering) for leaves, an aggregated subtree overview\n * for prefix groups.\n */\nexport function CacheDetailPanel(props: CacheDetailPanelProps) {\n  return isLeaf(props.node) ? <KeyPanel {...props} /> : <PrefixPanel {...props} />;\n}\n\nfunction KeyPanel({ client, registry, node, onDeleted, className }: CacheDetailPanelProps) {\n  const queryClient = useQueryClient();\n  const key = node.key!;\n  const detail = useQuery({\n    queryKey: cacheQueryKeys.key(client.baseUrl, key),\n    queryFn: () => client.key(key),\n  });\n  const [activeTab, setActiveTab] = useState(\"value\");\n\n  const ctx = { node, detail: detail.data ?? null, client };\n  const adapter = registry.resolveDetail(node, detail.data ?? null);\n  const tabs = registry.resolveTabs(ctx);\n\n  const remove = async () => {\n    if (!window.confirm(`Delete key ${key}?`)) return;\n    await client.deleteKey(key);\n    await queryClient.invalidateQueries({ queryKey: cacheQueryKeys.all(client.baseUrl) });\n    onDeleted?.(node);\n  };\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col gap-density-3 overflow-y-auto p-density-3\", className)}>\n      <PanelHeader\n        title={key}\n        onRefresh={() => detail.refetch()}\n        onDelete={remove}\n        deleteLabel=\"Delete key\"\n      />\n      {detail.isError && <PanelError error={detail.error} />}\n      {detail.data && (\n        <>\n          <KeyValueList\n            items={[\n              { key: \"type\", label: \"Type\", value: <code>{detail.data.type}</code> },\n              {\n                key: \"ttl\",\n                label: \"TTL\",\n                value:\n                  detail.data.ttlSeconds < 0\n                    ? \"none\"\n                    : formatDuration(detail.data.ttlSeconds, { from: \"s\" }),\n              },\n              {\n                key: \"bytes\",\n                label: \"Memory\",\n                value: formatBytes(detail.data.bytes),\n                hidden: !detail.data.bytes,\n              },\n              { key: \"length\", label: \"Length\", value: formatShort(detail.data.length) },\n            ]}\n          />\n          {tabs.length > 0 && (\n            <div role=\"tablist\" className=\"flex flex-wrap items-center gap-1\">\n              <TabButton\n                active={activeTab === \"value\"}\n                onClick={() => setActiveTab(\"value\")}\n                label=\"Value\"\n              />\n              {tabs.map((tab) => (\n                <TabButton\n                  key={tab.id}\n                  active={activeTab === tab.id}\n                  onClick={() => setActiveTab(tab.id)}\n                  label={tab.label}\n                />\n              ))}\n            </div>\n          )}\n          {activeTab === \"value\"\n            ? (adapter?.renderDetail?.(ctx) ?? <CacheValue detail={detail.data} />)\n            : tabs.find((t) => t.id === activeTab)?.render()}\n        </>\n      )}\n      {detail.isLoading && <div className=\"text-sm text-muted-foreground\">Loading key…</div>}\n    </div>\n  );\n}\n\nfunction PrefixPanel({ client, node, onDeleted, onSelect, className }: CacheDetailPanelProps) {\n  const queryClient = useQueryClient();\n  const prefix = node.prefix ?? \"\";\n  const subtree = useQuery({\n    queryKey: cacheQueryKeys.tree(client.baseUrl, prefix),\n    queryFn: () => client.tree(prefix),\n  });\n\n  const remove = async () => {\n    const count = subtree.data?.keys ?? node.keys;\n    if (!window.confirm(`Delete all ${count} keys under ${prefix}?`)) return;\n    await client.deletePrefix(prefix);\n    await queryClient.invalidateQueries({ queryKey: cacheQueryKeys.all(client.baseUrl) });\n    onDeleted?.(node);\n  };\n\n  const children = subtree.data?.nodes ?? [];\n  const maxKeys = Math.max(1, ...children.map((c) => c.keys));\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col gap-density-3 overflow-y-auto p-density-3\", className)}>\n      <PanelHeader\n        title={\n          <span className=\"inline-flex items-center gap-1.5\">\n            <Icon icon={UiFolder} className=\"text-muted-foreground\" />\n            {prefix}\n          </span>\n        }\n        onRefresh={() => subtree.refetch()}\n        onDelete={remove}\n        deleteLabel=\"Delete prefix\"\n      />\n      {subtree.isError && <PanelError error={subtree.error} />}\n      {subtree.data && (\n        <Section\n          title={`${formatShort(subtree.data.keys)} keys${subtree.data.truncated ? \"+\" : \"\"}`}\n          summary={`${children.length} children`}\n        >\n          <div className=\"flex flex-col\">\n            {children.map((child) => (\n              <button\n                key={child.prefix ?? child.key ?? child.name}\n                type=\"button\"\n                onClick={() => onSelect?.(child)}\n                className=\"grid grid-cols-[minmax(0,14rem)_minmax(0,1fr)_4rem] items-center gap-density-3 rounded px-density-2 py-density-1 text-left text-sm hover:bg-accent\"\n              >\n                <span className=\"truncate font-mono text-xs\">{child.name}</span>\n                <span className=\"h-2 overflow-hidden rounded bg-muted\">\n                  <span\n                    className=\"block h-full bg-primary/60\"\n                    style={{ width: `${(child.keys / maxKeys) * 100}%` }}\n                  />\n                </span>\n                <span className=\"text-right text-xs text-muted-foreground\">\n                  {formatShort(child.keys)}\n                </span>\n              </button>\n            ))}\n          </div>\n        </Section>\n      )}\n      {subtree.isLoading && <div className=\"text-sm text-muted-foreground\">Loading prefix…</div>}\n    </div>\n  );\n}\n\nfunction PanelHeader({\n  title,\n  onRefresh,\n  onDelete,\n  deleteLabel,\n}: {\n  title: React.ReactNode;\n  onRefresh: () => void;\n  onDelete: () => void;\n  deleteLabel: string;\n}) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <h3 className=\"min-w-0 flex-1 truncate font-mono text-sm font-semibold\">{title}</h3>\n      <button\n        type=\"button\"\n        onClick={onRefresh}\n        aria-label=\"Refresh\"\n        title=\"Refresh\"\n        className=\"inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n      >\n        <Icon icon={UiRefresh} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        onClick={onDelete}\n        aria-label={deleteLabel}\n        title={deleteLabel}\n        className=\"inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive\"\n      >\n        <Icon icon={UiTrash} className=\"text-sm\" />\n      </button>\n    </div>\n  );\n}\n\nfunction PanelError({ error }: { error: unknown }) {\n  return (\n    <div className=\"rounded-md border border-red-300 bg-red-50 px-density-3 py-density-2 text-xs text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200\">\n      {error instanceof Error ? error.message : String(error)}\n    </div>\n  );\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/data/cache-browser/CacheStatsOverview.cjs

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactQuery = require("@tanstack/react-query");
+const utils = require("../../lib/utils.cjs");
+const format = require("../../lib/format.cjs");
+const Gauge = require("../Gauge.cjs");
+const api = require("./api.cjs");
+const UiDatabase = require("../../icons/components/UiDatabase.cjs");
+const UiMemoryStick = require("../../icons/components/UiMemoryStick.cjs");
+const UiClock = require("../../icons/components/UiClock.cjs");
+function CacheStatsOverview({
+  client,
+  rootPrefix = "",
+  onSelect,
+  className
+}) {
+  var _a, _b;
+  const stats = reactQuery.useQuery({
+    queryKey: api.cacheQueryKeys.stats(client.baseUrl),
+    queryFn: () => client.stats()
+  });
+  const tree = reactQuery.useQuery({
+    queryKey: api.cacheQueryKeys.tree(client.baseUrl, rootPrefix),
+    queryFn: () => client.tree(rootPrefix)
+  });
+  const s = stats.data;
+  const hitTotal = ((s == null ? void 0 : s.hits) ?? 0) + ((s == null ? void 0 : s.misses) ?? 0);
+  const nodes = ((_a = tree.data) == null ? void 0 : _a.nodes) ?? [];
+  const maxKeys = Math.max(1, ...nodes.map((n) => n.keys));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex min-h-0 flex-col gap-density-3 overflow-y-auto p-density-3", className), children: [
+    stats.isError && /* @__PURE__ */ jsxRuntime.jsx(OverviewError, { error: stats.error }),
+    (s == null ? void 0 : s.infoError) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-yellow-300 bg-yellow-50 px-density-3 py-density-2 text-xs text-yellow-800 dark:border-yellow-700 dark:bg-yellow-950 dark:text-yellow-200", children: [
+      "Server stats unavailable: ",
+      s.infoError
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-density-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Gauge.Gauge,
+        {
+          label: "Keys",
+          icon: UiDatabase.UiDatabase,
+          value: (s == null ? void 0 : s.keys) ?? 0,
+          max: (s == null ? void 0 : s.keys) ?? 0,
+          suffix: "",
+          subtitle: (s == null ? void 0 : s.keysTruncated) ? "lower bound (scan capped)" : void 0,
+          meta: format.formatShort(s == null ? void 0 : s.keys)
+        }
+      ),
+      !!(s == null ? void 0 : s.usedMemoryBytes) && /* @__PURE__ */ jsxRuntime.jsx(
+        Gauge.Gauge,
+        {
+          label: "Memory",
+          icon: UiMemoryStick.UiMemoryStick,
+          value: s.usedMemoryBytes,
+          max: s.maxMemoryBytes || s.usedMemoryBytes,
+          suffix: "",
+          tone: memoryTone(s.usedMemoryBytes, s.maxMemoryBytes),
+          subtitle: s.maxMemoryBytes ? `of ${format.formatBytes(s.maxMemoryBytes)}` : "no maxmemory",
+          meta: format.formatBytes(s.usedMemoryBytes)
+        }
+      ),
+      hitTotal > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        Gauge.Gauge,
+        {
+          label: "Hit rate",
+          value: Math.round(((s == null ? void 0 : s.hits) ?? 0) / hitTotal * 100),
+          subtitle: `${format.formatShort(s == null ? void 0 : s.hits)} hits / ${format.formatShort(s == null ? void 0 : s.misses)} misses`,
+          meta: (s == null ? void 0 : s.evictedKeys) ? `${format.formatShort(s.evictedKeys)} evicted` : void 0
+        }
+      ),
+      !!(s == null ? void 0 : s.uptimeSeconds) && /* @__PURE__ */ jsxRuntime.jsx(
+        Gauge.Gauge,
+        {
+          label: "Uptime",
+          icon: UiClock.UiClock,
+          value: s.uptimeSeconds,
+          max: s.uptimeSeconds,
+          suffix: "",
+          subtitle: s.version ? `v${s.version}` : void 0,
+          meta: format.formatDuration(s.uptimeSeconds, { from: "s" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "mb-density-2 text-sm font-semibold", children: [
+        "Keys by prefix",
+        ((_b = tree.data) == null ? void 0 : _b.truncated) ? " (truncated)" : ""
+      ] }),
+      tree.isError && /* @__PURE__ */ jsxRuntime.jsx(OverviewError, { error: tree.error }),
+      tree.isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Loading keys…" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect == null ? void 0 : onSelect(node),
+          className: "grid grid-cols-[minmax(0,14rem)_minmax(0,1fr)_4rem] items-center gap-density-3 rounded px-density-2 py-density-1 text-left text-sm hover:bg-accent",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-mono text-xs", children: node.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 overflow-hidden rounded bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "block h-full bg-primary/60",
+                style: { width: `${node.keys / maxKeys * 100}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-right text-xs text-muted-foreground", children: format.formatShort(node.keys) })
+          ]
+        },
+        node.prefix ?? node.key ?? node.name
+      )) })
+    ] })
+  ] });
+}
+function memoryTone(used, max) {
+  if (!max) return "neutral";
+  const pct = used / max;
+  if (pct >= 0.9) return "danger";
+  if (pct >= 0.75) return "warning";
+  return "success";
+}
+function OverviewError({ error }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-red-300 bg-red-50 px-density-3 py-density-2 text-xs text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200", children: error instanceof Error ? error.message : String(error) });
+}
+exports.CacheStatsOverview = CacheStatsOverview;
+//# sourceMappingURL=CacheStatsOverview.cjs.map

package/dist/data/cache-browser/CacheStatsOverview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CacheStatsOverview.cjs","sources":["../../../src/data/cache-browser/CacheStatsOverview.tsx"],"sourcesContent":["import { useQuery } from \"@tanstack/react-query\";\nimport { cn } from \"../../lib/utils\";\nimport { formatBytes, formatDuration, formatShort } from \"../../lib/format\";\nimport { Gauge } from \"../Gauge\";\nimport { UiClock, UiDatabase, UiMemoryStick } from \"../../icons\";\nimport { cacheQueryKeys, type CacheClient } from \"./api\";\nimport type { CacheTreeNode } from \"./types\";\n\nexport type CacheStatsOverviewProps = {\n  client: CacheClient;\n  /** Logical prefix the overview aggregates; matches the tree's rootPrefix. */\n  rootPrefix?: string;\n  /** Drill into a top-level prefix/key from the breakdown rows. */\n  onSelect?: (node: CacheTreeNode) => void;\n  className?: string;\n};\n\n/**\n * Whole-keyspace overview: server stats (memory, hit rate, uptime) plus a\n * keys-per-prefix breakdown of the top tree level. Shown when nothing is\n * selected in the browser.\n */\nexport function CacheStatsOverview({\n  client,\n  rootPrefix = \"\",\n  onSelect,\n  className,\n}: CacheStatsOverviewProps) {\n  const stats = useQuery({\n    queryKey: cacheQueryKeys.stats(client.baseUrl),\n    queryFn: () => client.stats(),\n  });\n  const tree = useQuery({\n    queryKey: cacheQueryKeys.tree(client.baseUrl, rootPrefix),\n    queryFn: () => client.tree(rootPrefix),\n  });\n\n  const s = stats.data;\n  const hitTotal = (s?.hits ?? 0) + (s?.misses ?? 0);\n  const nodes = tree.data?.nodes ?? [];\n  const maxKeys = Math.max(1, ...nodes.map((n) => n.keys));\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col gap-density-3 overflow-y-auto p-density-3\", className)}>\n      {stats.isError && <OverviewError error={stats.error} />}\n      {s?.infoError && (\n        <div className=\"rounded-md border border-yellow-300 bg-yellow-50 px-density-3 py-density-2 text-xs text-yellow-800 dark:border-yellow-700 dark:bg-yellow-950 dark:text-yellow-200\">\n          Server stats unavailable: {s.infoError}\n        </div>\n      )}\n\n      <div className=\"flex flex-wrap gap-density-3\">\n        <Gauge\n          label=\"Keys\"\n          icon={UiDatabase}\n          value={s?.keys ?? 0}\n          max={s?.keys ?? 0}\n          suffix=\"\"\n          subtitle={s?.keysTruncated ? \"lower bound (scan capped)\" : undefined}\n          meta={formatShort(s?.keys)}\n        />\n        {!!s?.usedMemoryBytes && (\n          <Gauge\n            label=\"Memory\"\n            icon={UiMemoryStick}\n            value={s.usedMemoryBytes}\n            max={s.maxMemoryBytes || s.usedMemoryBytes}\n            suffix=\"\"\n            tone={memoryTone(s.usedMemoryBytes, s.maxMemoryBytes)}\n            subtitle={s.maxMemoryBytes ? `of ${formatBytes(s.maxMemoryBytes)}` : \"no maxmemory\"}\n            meta={formatBytes(s.usedMemoryBytes)}\n          />\n        )}\n        {hitTotal > 0 && (\n          <Gauge\n            label=\"Hit rate\"\n            value={Math.round(((s?.hits ?? 0) / hitTotal) * 100)}\n            subtitle={`${formatShort(s?.hits)} hits / ${formatShort(s?.misses)} misses`}\n            meta={s?.evictedKeys ? `${formatShort(s.evictedKeys)} evicted` : undefined}\n          />\n        )}\n        {!!s?.uptimeSeconds && (\n          <Gauge\n            label=\"Uptime\"\n            icon={UiClock}\n            value={s.uptimeSeconds}\n            max={s.uptimeSeconds}\n            suffix=\"\"\n            subtitle={s.version ? `v${s.version}` : undefined}\n            meta={formatDuration(s.uptimeSeconds, { from: \"s\" })}\n          />\n        )}\n      </div>\n\n      <div>\n        <h3 className=\"mb-density-2 text-sm font-semibold\">\n          Keys by prefix{tree.data?.truncated ? \" (truncated)\" : \"\"}\n        </h3>\n        {tree.isError && <OverviewError error={tree.error} />}\n        {tree.isLoading && <div className=\"text-sm text-muted-foreground\">Loading keys…</div>}\n        <div className=\"flex flex-col\">\n          {nodes.map((node) => (\n            <button\n              key={node.prefix ?? node.key ?? node.name}\n              type=\"button\"\n              onClick={() => onSelect?.(node)}\n              className=\"grid grid-cols-[minmax(0,14rem)_minmax(0,1fr)_4rem] items-center gap-density-3 rounded px-density-2 py-density-1 text-left text-sm hover:bg-accent\"\n            >\n              <span className=\"truncate font-mono text-xs\">{node.name}</span>\n              <span className=\"h-2 overflow-hidden rounded bg-muted\">\n                <span\n                  className=\"block h-full bg-primary/60\"\n                  style={{ width: `${(node.keys / maxKeys) * 100}%` }}\n                />\n              </span>\n              <span className=\"text-right text-xs text-muted-foreground\">\n                {formatShort(node.keys)}\n              </span>\n            </button>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction memoryTone(used: number, max?: number) {\n  if (!max) return \"neutral\" as const;\n  const pct = used / max;\n  if (pct >= 0.9) return \"danger\" as const;\n  if (pct >= 0.75) return \"warning\" as const;\n  return \"success\" as const;\n}\n\nfunction OverviewError({ error }: { error: unknown }) {\n  return (\n    <div className=\"rounded-md border border-red-300 bg-red-50 px-density-3 py-density-2 text-xs text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200\">\n      {error instanceof Error ? error.message : String(error)}\n    </div>\n  );\n}\n"],"names":["useQuery","cacheQueryKeys","cn","jsx","jsxs","Gauge","UiDatabase","formatShort","UiMemoryStick","formatBytes","UiClock","formatDuration"],"mappings":"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"}

package/dist/data/cache-browser/CacheStatsOverview.d.ts

@@ -0,0 +1,17 @@
+import { CacheClient } from './api';
+import { CacheTreeNode } from './types';
+export type CacheStatsOverviewProps = {
+    client: CacheClient;
+    /** Logical prefix the overview aggregates; matches the tree's rootPrefix. */
+    rootPrefix?: string;
+    /** Drill into a top-level prefix/key from the breakdown rows. */
+    onSelect?: (node: CacheTreeNode) => void;
+    className?: string;
+};
+/**
+ * Whole-keyspace overview: server stats (memory, hit rate, uptime) plus a
+ * keys-per-prefix breakdown of the top tree level. Shown when nothing is
+ * selected in the browser.
+ */
+export declare function CacheStatsOverview({ client, rootPrefix, onSelect, className, }: CacheStatsOverviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CacheStatsOverview.d.ts.map

package/dist/data/cache-browser/CacheStatsOverview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CacheStatsOverview.d.ts","sourceRoot":"","sources":["../../../src/data/cache-browser/CacheStatsOverview.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,WAAW,CAAC;IACpB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,UAAe,EACf,QAAQ,EACR,SAAS,GACV,EAAE,uBAAuB,2CAiGzB"}

package/dist/data/cache-browser/CacheStatsOverview.js

@@ -0,0 +1,126 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { cn } from "../../lib/utils.js";
+import { formatShort, formatBytes, formatDuration } from "../../lib/format.js";
+import { Gauge } from "../Gauge.js";
+import { cacheQueryKeys } from "./api.js";
+import { UiDatabase } from "../../icons/components/UiDatabase.js";
+import { UiMemoryStick } from "../../icons/components/UiMemoryStick.js";
+import { UiClock } from "../../icons/components/UiClock.js";
+function CacheStatsOverview({
+  client,
+  rootPrefix = "",
+  onSelect,
+  className
+}) {
+  var _a, _b;
+  const stats = useQuery({
+    queryKey: cacheQueryKeys.stats(client.baseUrl),
+    queryFn: () => client.stats()
+  });
+  const tree = useQuery({
+    queryKey: cacheQueryKeys.tree(client.baseUrl, rootPrefix),
+    queryFn: () => client.tree(rootPrefix)
+  });
+  const s = stats.data;
+  const hitTotal = ((s == null ? void 0 : s.hits) ?? 0) + ((s == null ? void 0 : s.misses) ?? 0);
+  const nodes = ((_a = tree.data) == null ? void 0 : _a.nodes) ?? [];
+  const maxKeys = Math.max(1, ...nodes.map((n) => n.keys));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-col gap-density-3 overflow-y-auto p-density-3", className), children: [
+    stats.isError && /* @__PURE__ */ jsx(OverviewError, { error: stats.error }),
+    (s == null ? void 0 : s.infoError) && /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-yellow-300 bg-yellow-50 px-density-3 py-density-2 text-xs text-yellow-800 dark:border-yellow-700 dark:bg-yellow-950 dark:text-yellow-200", children: [
+      "Server stats unavailable: ",
+      s.infoError
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-density-3", children: [
+      /* @__PURE__ */ jsx(
+        Gauge,
+        {
+          label: "Keys",
+          icon: UiDatabase,
+          value: (s == null ? void 0 : s.keys) ?? 0,
+          max: (s == null ? void 0 : s.keys) ?? 0,
+          suffix: "",
+          subtitle: (s == null ? void 0 : s.keysTruncated) ? "lower bound (scan capped)" : void 0,
+          meta: formatShort(s == null ? void 0 : s.keys)
+        }
+      ),
+      !!(s == null ? void 0 : s.usedMemoryBytes) && /* @__PURE__ */ jsx(
+        Gauge,
+        {
+          label: "Memory",
+          icon: UiMemoryStick,
+          value: s.usedMemoryBytes,
+          max: s.maxMemoryBytes || s.usedMemoryBytes,
+          suffix: "",
+          tone: memoryTone(s.usedMemoryBytes, s.maxMemoryBytes),
+          subtitle: s.maxMemoryBytes ? `of ${formatBytes(s.maxMemoryBytes)}` : "no maxmemory",
+          meta: formatBytes(s.usedMemoryBytes)
+        }
+      ),
+      hitTotal > 0 && /* @__PURE__ */ jsx(
+        Gauge,
+        {
+          label: "Hit rate",
+          value: Math.round(((s == null ? void 0 : s.hits) ?? 0) / hitTotal * 100),
+          subtitle: `${formatShort(s == null ? void 0 : s.hits)} hits / ${formatShort(s == null ? void 0 : s.misses)} misses`,
+          meta: (s == null ? void 0 : s.evictedKeys) ? `${formatShort(s.evictedKeys)} evicted` : void 0
+        }
+      ),
+      !!(s == null ? void 0 : s.uptimeSeconds) && /* @__PURE__ */ jsx(
+        Gauge,
+        {
+          label: "Uptime",
+          icon: UiClock,
+          value: s.uptimeSeconds,
+          max: s.uptimeSeconds,
+          suffix: "",
+          subtitle: s.version ? `v${s.version}` : void 0,
+          meta: formatDuration(s.uptimeSeconds, { from: "s" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("h3", { className: "mb-density-2 text-sm font-semibold", children: [
+        "Keys by prefix",
+        ((_b = tree.data) == null ? void 0 : _b.truncated) ? " (truncated)" : ""
+      ] }),
+      tree.isError && /* @__PURE__ */ jsx(OverviewError, { error: tree.error }),
+      tree.isLoading && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading keys…" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: nodes.map((node) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect == null ? void 0 : onSelect(node),
+          className: "grid grid-cols-[minmax(0,14rem)_minmax(0,1fr)_4rem] items-center gap-density-3 rounded px-density-2 py-density-1 text-left text-sm hover:bg-accent",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-xs", children: node.name }),
+            /* @__PURE__ */ jsx("span", { className: "h-2 overflow-hidden rounded bg-muted", children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block h-full bg-primary/60",
+                style: { width: `${node.keys / maxKeys * 100}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { className: "text-right text-xs text-muted-foreground", children: formatShort(node.keys) })
+          ]
+        },
+        node.prefix ?? node.key ?? node.name
+      )) })
+    ] })
+  ] });
+}
+function memoryTone(used, max) {
+  if (!max) return "neutral";
+  const pct = used / max;
+  if (pct >= 0.9) return "danger";
+  if (pct >= 0.75) return "warning";
+  return "success";
+}
+function OverviewError({ error }) {
+  return /* @__PURE__ */ jsx("div", { className: "rounded-md border border-red-300 bg-red-50 px-density-3 py-density-2 text-xs text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200", children: error instanceof Error ? error.message : String(error) });
+}
+export {
+  CacheStatsOverview
+};
+//# sourceMappingURL=CacheStatsOverview.js.map

package/dist/data/cache-browser/CacheStatsOverview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CacheStatsOverview.js","sources":["../../../src/data/cache-browser/CacheStatsOverview.tsx"],"sourcesContent":["import { useQuery } from \"@tanstack/react-query\";\nimport { cn } from \"../../lib/utils\";\nimport { formatBytes, formatDuration, formatShort } from \"../../lib/format\";\nimport { Gauge } from \"../Gauge\";\nimport { UiClock, UiDatabase, UiMemoryStick } from \"../../icons\";\nimport { cacheQueryKeys, type CacheClient } from \"./api\";\nimport type { CacheTreeNode } from \"./types\";\n\nexport type CacheStatsOverviewProps = {\n  client: CacheClient;\n  /** Logical prefix the overview aggregates; matches the tree's rootPrefix. */\n  rootPrefix?: string;\n  /** Drill into a top-level prefix/key from the breakdown rows. */\n  onSelect?: (node: CacheTreeNode) => void;\n  className?: string;\n};\n\n/**\n * Whole-keyspace overview: server stats (memory, hit rate, uptime) plus a\n * keys-per-prefix breakdown of the top tree level. Shown when nothing is\n * selected in the browser.\n */\nexport function CacheStatsOverview({\n  client,\n  rootPrefix = \"\",\n  onSelect,\n  className,\n}: CacheStatsOverviewProps) {\n  const stats = useQuery({\n    queryKey: cacheQueryKeys.stats(client.baseUrl),\n    queryFn: () => client.stats(),\n  });\n  const tree = useQuery({\n    queryKey: cacheQueryKeys.tree(client.baseUrl, rootPrefix),\n    queryFn: () => client.tree(rootPrefix),\n  });\n\n  const s = stats.data;\n  const hitTotal = (s?.hits ?? 0) + (s?.misses ?? 0);\n  const nodes = tree.data?.nodes ?? [];\n  const maxKeys = Math.max(1, ...nodes.map((n) => n.keys));\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col gap-density-3 overflow-y-auto p-density-3\", className)}>\n      {stats.isError && <OverviewError error={stats.error} />}\n      {s?.infoError && (\n        <div className=\"rounded-md border border-yellow-300 bg-yellow-50 px-density-3 py-density-2 text-xs text-yellow-800 dark:border-yellow-700 dark:bg-yellow-950 dark:text-yellow-200\">\n          Server stats unavailable: {s.infoError}\n        </div>\n      )}\n\n      <div className=\"flex flex-wrap gap-density-3\">\n        <Gauge\n          label=\"Keys\"\n          icon={UiDatabase}\n          value={s?.keys ?? 0}\n          max={s?.keys ?? 0}\n          suffix=\"\"\n          subtitle={s?.keysTruncated ? \"lower bound (scan capped)\" : undefined}\n          meta={formatShort(s?.keys)}\n        />\n        {!!s?.usedMemoryBytes && (\n          <Gauge\n            label=\"Memory\"\n            icon={UiMemoryStick}\n            value={s.usedMemoryBytes}\n            max={s.maxMemoryBytes || s.usedMemoryBytes}\n            suffix=\"\"\n            tone={memoryTone(s.usedMemoryBytes, s.maxMemoryBytes)}\n            subtitle={s.maxMemoryBytes ? `of ${formatBytes(s.maxMemoryBytes)}` : \"no maxmemory\"}\n            meta={formatBytes(s.usedMemoryBytes)}\n          />\n        )}\n        {hitTotal > 0 && (\n          <Gauge\n            label=\"Hit rate\"\n            value={Math.round(((s?.hits ?? 0) / hitTotal) * 100)}\n            subtitle={`${formatShort(s?.hits)} hits / ${formatShort(s?.misses)} misses`}\n            meta={s?.evictedKeys ? `${formatShort(s.evictedKeys)} evicted` : undefined}\n          />\n        )}\n        {!!s?.uptimeSeconds && (\n          <Gauge\n            label=\"Uptime\"\n            icon={UiClock}\n            value={s.uptimeSeconds}\n            max={s.uptimeSeconds}\n            suffix=\"\"\n            subtitle={s.version ? `v${s.version}` : undefined}\n            meta={formatDuration(s.uptimeSeconds, { from: \"s\" })}\n          />\n        )}\n      </div>\n\n      <div>\n        <h3 className=\"mb-density-2 text-sm font-semibold\">\n          Keys by prefix{tree.data?.truncated ? \" (truncated)\" : \"\"}\n        </h3>\n        {tree.isError && <OverviewError error={tree.error} />}\n        {tree.isLoading && <div className=\"text-sm text-muted-foreground\">Loading keys…</div>}\n        <div className=\"flex flex-col\">\n          {nodes.map((node) => (\n            <button\n              key={node.prefix ?? node.key ?? node.name}\n              type=\"button\"\n              onClick={() => onSelect?.(node)}\n              className=\"grid grid-cols-[minmax(0,14rem)_minmax(0,1fr)_4rem] items-center gap-density-3 rounded px-density-2 py-density-1 text-left text-sm hover:bg-accent\"\n            >\n              <span className=\"truncate font-mono text-xs\">{node.name}</span>\n              <span className=\"h-2 overflow-hidden rounded bg-muted\">\n                <span\n                  className=\"block h-full bg-primary/60\"\n                  style={{ width: `${(node.keys / maxKeys) * 100}%` }}\n                />\n              </span>\n              <span className=\"text-right text-xs text-muted-foreground\">\n                {formatShort(node.keys)}\n              </span>\n            </button>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction memoryTone(used: number, max?: number) {\n  if (!max) return \"neutral\" as const;\n  const pct = used / max;\n  if (pct >= 0.9) return \"danger\" as const;\n  if (pct >= 0.75) return \"warning\" as const;\n  return \"success\" as const;\n}\n\nfunction OverviewError({ error }: { error: unknown }) {\n  return (\n    <div className=\"rounded-md border border-red-300 bg-red-50 px-density-3 py-density-2 text-xs text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200\">\n      {error instanceof Error ? error.message : String(error)}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/cache-browser/CacheTree.cjs

@@ -0,0 +1,189 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactQuery = require("@tanstack/react-query");
+const utils = require("../../lib/utils.cjs");
+const format = require("../../lib/format.cjs");
+const Icon = require("../Icon.cjs");
+const Tree = require("../Tree.cjs");
+const api = require("./api.cjs");
+const types = require("./types.cjs");
+const UiLayers = require("../../icons/components/UiLayers.cjs");
+const UiTag = require("../../icons/components/UiTag.cjs");
+const UiListFlat = require("../../icons/components/UiListFlat.cjs");
+const UiBraces = require("../../icons/components/UiBraces.cjs");
+const UiFileText = require("../../icons/components/UiFileText.cjs");
+const UiKey = require("../../icons/components/UiKey.cjs");
+const UiFolder = require("../../icons/components/UiFolder.cjs");
+const UiSearch = require("../../icons/components/UiSearch.cjs");
+const UiClose = require("../../icons/components/UiClose.cjs");
+const typeIcons = {
+  string: UiFileText.UiFileText,
+  hash: UiBraces.UiBraces,
+  list: UiListFlat.UiListFlat,
+  set: UiTag.UiTag,
+  zset: UiLayers.UiLayers
+};
+function CacheTree({
+  client,
+  registry,
+  rootPrefix = "",
+  selected,
+  onSelect,
+  className
+}) {
+  var _a, _b, _c;
+  const [searchInput, setSearchInput] = react.useState("");
+  const [search, setSearch] = react.useState("");
+  react.useEffect(() => {
+    const handle = setTimeout(() => setSearch(searchInput.trim()), 300);
+    return () => clearTimeout(handle);
+  }, [searchInput]);
+  const root = reactQuery.useQuery({
+    queryKey: api.cacheQueryKeys.tree(client.baseUrl, rootPrefix),
+    queryFn: () => client.tree(rootPrefix)
+  });
+  const searchResults = reactQuery.useQuery({
+    queryKey: api.cacheQueryKeys.search(client.baseUrl, search),
+    queryFn: () => client.search(search),
+    enabled: search.length > 0
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex min-h-0 flex-col", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "m-density-2 flex items-center gap-2 rounded-md border border-border bg-background px-2 py-1 text-xs shadow-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSearch.UiSearch, className: "text-xs text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "search",
+          value: searchInput,
+          onChange: (e) => setSearchInput(e.target.value),
+          placeholder: "Search keys",
+          "aria-label": "Search cache keys",
+          className: "h-5 w-full border-0 bg-transparent p-0 text-xs outline-none placeholder:text-muted-foreground"
+        }
+      ),
+      searchInput && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSearchInput(""),
+          "aria-label": "Clear key search",
+          className: "inline-flex items-center rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-xs" })
+        }
+      )
+    ] }),
+    root.isError && /* @__PURE__ */ jsxRuntime.jsx(QueryError, { error: root.error }),
+    search ? /* @__PURE__ */ jsxRuntime.jsx(
+      SearchResults,
+      {
+        nodes: ((_a = searchResults.data) == null ? void 0 : _a.keys) ?? [],
+        truncated: ((_b = searchResults.data) == null ? void 0 : _b.truncated) ?? false,
+        loading: searchResults.isLoading,
+        error: searchResults.isError ? searchResults.error : null,
+        registry,
+        client,
+        selected,
+        onSelect
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      Tree.Tree,
+      {
+        roots: ((_c = root.data) == null ? void 0 : _c.nodes) ?? [],
+        className: "min-h-0 flex-1",
+        empty: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-4 text-sm text-muted-foreground", children: root.isLoading ? "Loading keys…" : "No keys found." }),
+        getKey: (node) => node.prefix ?? node.key ?? node.name,
+        getChildren: () => void 0,
+        hasMoreChildren: (node) => !types.isLeaf(node),
+        loadChildren: async (node) => (await client.tree(node.prefix ?? "")).nodes,
+        selected,
+        onSelect,
+        defaultOpen: () => false,
+        getSearchText: (node) => node.name,
+        renderRow: ({ node, selected: isSelected, error }) => /* @__PURE__ */ jsxRuntime.jsx(
+          CacheNodeRow,
+          {
+            node,
+            selected: isSelected,
+            error,
+            registry,
+            client
+          }
+        )
+      }
+    )
+  ] });
+}
+function SearchResults({
+  nodes,
+  truncated,
+  loading,
+  error,
+  registry,
+  client,
+  selected,
+  onSelect
+}) {
+  if (error) return /* @__PURE__ */ jsxRuntime.jsx(QueryError, { error });
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-4 text-sm text-muted-foreground", children: "Searching…" });
+  }
+  if (nodes.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-4 text-sm text-muted-foreground", children: "No matching keys." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-0 flex-1 overflow-auto", role: "listbox", "aria-label": "Matching cache keys", children: [
+    truncated && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-1 text-xs text-muted-foreground", children: [
+      "Showing the first ",
+      nodes.length,
+      " matches — refine the search to narrow down."
+    ] }),
+    nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": (selected == null ? void 0 : selected.key) === node.key,
+        onClick: () => onSelect(node),
+        className: utils.cn(
+          "flex w-full items-center gap-1.5 px-2 py-1 text-left text-sm",
+          (selected == null ? void 0 : selected.key) === node.key ? "border-l-2 border-primary bg-primary/10" : "hover:bg-accent"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(CacheNodeRow, { node, selected: (selected == null ? void 0 : selected.key) === node.key, registry, client })
+      },
+      node.key ?? node.name
+    ))
+  ] });
+}
+function CacheNodeRow({
+  node,
+  selected: _selected,
+  error,
+  registry,
+  client
+}) {
+  const adapter = registry.resolveRowIcon(node, null);
+  const icon = adapter ? adapter.renderRowIcon({ node, detail: null, client }) : /* @__PURE__ */ jsxRuntime.jsx(
+    Icon.Icon,
+    {
+      icon: types.isLeaf(node) ? typeIcons[node.type ?? ""] ?? UiKey.UiKey : UiFolder.UiFolder,
+      className: "shrink-0 text-xs text-muted-foreground"
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [
+    icon,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-mono text-xs", children: node.name }),
+    !types.isLeaf(node) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1.5 text-[10px] text-muted-foreground", children: [
+      node.bytes ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: format.formatBytes(node.bytes) }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-1.5", children: format.formatShort(node.keys) })
+    ] }),
+    types.isLeaf(node) && node.bytes ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 text-[10px] text-muted-foreground", children: format.formatBytes(node.bytes) }) : null,
+    error != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[10px] text-red-600 dark:text-red-400", children: "load failed" })
+  ] });
+}
+function QueryError({ error }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-density-2 rounded-md border border-red-300 bg-red-50 px-density-3 py-density-2 text-xs text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200", children: error instanceof Error ? error.message : String(error) });
+}
+exports.CacheNodeRow = CacheNodeRow;
+exports.CacheTree = CacheTree;
+//# sourceMappingURL=CacheTree.cjs.map

package/dist/data/cache-browser/CacheTree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CacheTree.cjs","sources":["../../../src/data/cache-browser/CacheTree.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { cn } from \"../../lib/utils\";\nimport { formatBytes, formatShort } from \"../../lib/format\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport {\n  UiBraces,\n  UiClose,\n  UiFileText,\n  UiFolder,\n  UiKey,\n  UiLayers,\n  UiListFlat,\n  UiSearch,\n  UiTag,\n} from \"../../icons\";\nimport { Tree } from \"../Tree\";\nimport { cacheQueryKeys, type CacheClient } from \"./api\";\nimport type { CacheAdapterRegistry } from \"./adapter\";\nimport { isLeaf, type CacheTreeNode } from \"./types\";\n\nconst typeIcons: Record<string, StaticIconComponent> = {\n  string: UiFileText,\n  hash: UiBraces,\n  list: UiListFlat,\n  set: UiTag,\n  zset: UiLayers,\n};\n\nexport type CacheTreeProps = {\n  client: CacheClient;\n  registry: CacheAdapterRegistry;\n  /** Logical prefix the tree is rooted at; empty browses the whole keyspace. */\n  rootPrefix?: string;\n  selected: CacheTreeNode | null;\n  onSelect: (node: CacheTreeNode | null) => void;\n  className?: string;\n};\n\n/**\n * Lazy key tree over the cache-browser tree endpoint, with a server-side\n * substring search that swaps the tree for a flat result list while active.\n * (The tree's own toolbar filter still narrows already-loaded nodes.)\n */\nexport function CacheTree({\n  client,\n  registry,\n  rootPrefix = \"\",\n  selected,\n  onSelect,\n  className,\n}: CacheTreeProps) {\n  const [searchInput, setSearchInput] = useState(\"\");\n  const [search, setSearch] = useState(\"\");\n  useEffect(() => {\n    const handle = setTimeout(() => setSearch(searchInput.trim()), 300);\n    return () => clearTimeout(handle);\n  }, [searchInput]);\n\n  const root = useQuery({\n    queryKey: cacheQueryKeys.tree(client.baseUrl, rootPrefix),\n    queryFn: () => client.tree(rootPrefix),\n  });\n\n  const searchResults = useQuery({\n    queryKey: cacheQueryKeys.search(client.baseUrl, search),\n    queryFn: () => client.search(search),\n    enabled: search.length > 0,\n  });\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col\", className)}>\n      <label className=\"m-density-2 flex items-center gap-2 rounded-md border border-border bg-background px-2 py-1 text-xs shadow-sm\">\n        <Icon icon={UiSearch} className=\"text-xs text-muted-foreground\" />\n        <input\n          type=\"search\"\n          value={searchInput}\n          onChange={(e) => setSearchInput(e.target.value)}\n          placeholder=\"Search keys\"\n          aria-label=\"Search cache keys\"\n          className=\"h-5 w-full border-0 bg-transparent p-0 text-xs outline-none placeholder:text-muted-foreground\"\n        />\n        {searchInput && (\n          <button\n            type=\"button\"\n            onClick={() => setSearchInput(\"\")}\n            aria-label=\"Clear key search\"\n            className=\"inline-flex items-center rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n          >\n            <Icon icon={UiClose} className=\"text-xs\" />\n          </button>\n        )}\n      </label>\n\n      {root.isError && <QueryError error={root.error} />}\n\n      {search ? (\n        <SearchResults\n          nodes={searchResults.data?.keys ?? []}\n          truncated={searchResults.data?.truncated ?? false}\n          loading={searchResults.isLoading}\n          error={searchResults.isError ? searchResults.error : null}\n          registry={registry}\n          client={client}\n          selected={selected}\n          onSelect={onSelect}\n        />\n      ) : (\n        <Tree<CacheTreeNode>\n          roots={root.data?.nodes ?? []}\n          className=\"min-h-0 flex-1\"\n          empty={\n            <div className=\"px-3 py-4 text-sm text-muted-foreground\">\n              {root.isLoading ? \"Loading keys…\" : \"No keys found.\"}\n            </div>\n          }\n          getKey={(node) => node.prefix ?? node.key ?? node.name}\n          getChildren={() => undefined}\n          hasMoreChildren={(node) => !isLeaf(node)}\n          loadChildren={async (node) => (await client.tree(node.prefix ?? \"\")).nodes}\n          selected={selected}\n          onSelect={onSelect}\n          defaultOpen={() => false}\n          getSearchText={(node) => node.name}\n          renderRow={({ node, selected: isSelected, error }) => (\n            <CacheNodeRow\n              node={node}\n              selected={isSelected}\n              error={error}\n              registry={registry}\n              client={client}\n            />\n          )}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction SearchResults({\n  nodes,\n  truncated,\n  loading,\n  error,\n  registry,\n  client,\n  selected,\n  onSelect,\n}: {\n  nodes: CacheTreeNode[];\n  truncated: boolean;\n  loading: boolean;\n  error: unknown;\n  registry: CacheAdapterRegistry;\n  client: CacheClient;\n  selected: CacheTreeNode | null;\n  onSelect: (node: CacheTreeNode) => void;\n}) {\n  if (error) return <QueryError error={error} />;\n  if (loading) {\n    return <div className=\"px-3 py-4 text-sm text-muted-foreground\">Searching…</div>;\n  }\n  if (nodes.length === 0) {\n    return <div className=\"px-3 py-4 text-sm text-muted-foreground\">No matching keys.</div>;\n  }\n  return (\n    <div className=\"min-h-0 flex-1 overflow-auto\" role=\"listbox\" aria-label=\"Matching cache keys\">\n      {truncated && (\n        <div className=\"px-3 py-1 text-xs text-muted-foreground\">\n          Showing the first {nodes.length} matches — refine the search to narrow down.\n        </div>\n      )}\n      {nodes.map((node) => (\n        <button\n          key={node.key ?? node.name}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={selected?.key === node.key}\n          onClick={() => onSelect(node)}\n          className={cn(\n            \"flex w-full items-center gap-1.5 px-2 py-1 text-left text-sm\",\n            selected?.key === node.key\n              ? \"border-l-2 border-primary bg-primary/10\"\n              : \"hover:bg-accent\",\n          )}\n        >\n          <CacheNodeRow node={node} selected={selected?.key === node.key} registry={registry} client={client} />\n        </button>\n      ))}\n    </div>\n  );\n}\n\n/** Shared row body: adapter icon (or type/folder icon), name and size hints. */\nexport function CacheNodeRow({\n  node,\n  selected: _selected,\n  error,\n  registry,\n  client,\n}: {\n  node: CacheTreeNode;\n  selected: boolean;\n  error?: unknown;\n  registry: CacheAdapterRegistry;\n  client: CacheClient;\n}) {\n  const adapter = registry.resolveRowIcon(node, null);\n  const icon = adapter ? (\n    adapter.renderRowIcon!({ node, detail: null, client })\n  ) : (\n    <Icon\n      icon={isLeaf(node) ? (typeIcons[node.type ?? \"\"] ?? UiKey) : UiFolder}\n      className=\"shrink-0 text-xs text-muted-foreground\"\n    />\n  );\n  return (\n    <span className=\"flex min-w-0 flex-1 items-center gap-1.5\">\n      {icon}\n      <span className=\"truncate font-mono text-xs\">{node.name}</span>\n      {!isLeaf(node) && (\n        <span className=\"ml-auto flex shrink-0 items-center gap-1.5 text-[10px] text-muted-foreground\">\n          {node.bytes ? <span>{formatBytes(node.bytes)}</span> : null}\n          <span className=\"rounded-full bg-muted px-1.5\">\n            {formatShort(node.keys)}\n          </span>\n        </span>\n      )}\n      {isLeaf(node) && node.bytes ? (\n        <span className=\"ml-auto shrink-0 text-[10px] text-muted-foreground\">\n          {formatBytes(node.bytes)}\n        </span>\n      ) : null}\n      {error != null && (\n        <span className=\"shrink-0 text-[10px] text-red-600 dark:text-red-400\">\n          load failed\n        </span>\n      )}\n    </span>\n  );\n}\n\nfunction QueryError({ error }: { error: unknown }) {\n  return (\n    <div className=\"m-density-2 rounded-md border border-red-300 bg-red-50 px-density-3 py-density-2 text-xs text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200\">\n      {error instanceof Error ? error.message : String(error)}\n    </div>\n  );\n}\n"],"names":["UiFileText","UiBraces","UiListFlat","UiTag","UiLayers","useState","useEffect","useQuery","cacheQueryKeys","cn","jsxs","jsx","Icon","UiSearch","UiClose","Tree","isLeaf","UiKey","UiFolder","formatShort","formatBytes"],"mappings":"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"}

package/dist/data/cache-browser/CacheTree.d.ts

@@ -0,0 +1,27 @@
+import { CacheClient } from './api';
+import { CacheAdapterRegistry } from './adapter';
+import { CacheTreeNode } from './types';
+export type CacheTreeProps = {
+    client: CacheClient;
+    registry: CacheAdapterRegistry;
+    /** Logical prefix the tree is rooted at; empty browses the whole keyspace. */
+    rootPrefix?: string;
+    selected: CacheTreeNode | null;
+    onSelect: (node: CacheTreeNode | null) => void;
+    className?: string;
+};
+/**
+ * Lazy key tree over the cache-browser tree endpoint, with a server-side
+ * substring search that swaps the tree for a flat result list while active.
+ * (The tree's own toolbar filter still narrows already-loaded nodes.)
+ */
+export declare function CacheTree({ client, registry, rootPrefix, selected, onSelect, className, }: CacheTreeProps): import("react/jsx-runtime").JSX.Element;
+/** Shared row body: adapter icon (or type/folder icon), name and size hints. */
+export declare function CacheNodeRow({ node, selected: _selected, error, registry, client, }: {
+    node: CacheTreeNode;
+    selected: boolean;
+    error?: unknown;
+    registry: CacheAdapterRegistry;
+    client: CacheClient;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CacheTree.d.ts.map

package/dist/data/cache-browser/CacheTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CacheTree.d.ts","sourceRoot":"","sources":["../../../src/data/cache-browser/CacheTree.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAUrD,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAQ,EACR,UAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,2CAsFhB;AAwDD,gFAAgF;AAChF,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,QAAQ,EAAE,SAAS,EACnB,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE;IACD,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,MAAM,EAAE,WAAW,CAAC;CACrB,2CAkCA"}