@flanksource/clicky-ui 0.2.14 → 0.2.16

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

@@ -0,0 +1,193 @@
+"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 KeyValueList = require("../KeyValueList.cjs");
+const TabButton = require("../TabButton.cjs");
+const Section = require("../../layout/Section.cjs");
+const api = require("./api.cjs");
+const CacheValue = require("./CacheValue.cjs");
+const types = require("./types.cjs");
+const UiFolder = require("../../icons/components/UiFolder.cjs");
+const UiRefresh = require("../../icons/components/UiRefresh.cjs");
+const UiTrash = require("../../icons/components/UiTrash.cjs");
+function CacheDetailPanel(props) {
+  return types.isLeaf(props.node) ? /* @__PURE__ */ jsxRuntime.jsx(KeyPanel, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(PrefixPanel, { ...props });
+}
+function KeyPanel({ client, registry, node, onDeleted, className }) {
+  var _a, _b;
+  const queryClient = reactQuery.useQueryClient();
+  const key = node.key;
+  const detail = reactQuery.useQuery({
+    queryKey: api.cacheQueryKeys.key(client.baseUrl, key),
+    queryFn: () => client.key(key)
+  });
+  const [activeTab, setActiveTab] = react.useState("value");
+  const ctx = { node, detail: detail.data ?? null, client };
+  const adapter = registry.resolveDetail(node, detail.data ?? null);
+  const tabs = registry.resolveTabs(ctx);
+  const remove = async () => {
+    if (!window.confirm(`Delete key ${key}?`)) return;
+    await client.deleteKey(key);
+    await queryClient.invalidateQueries({ queryKey: api.cacheQueryKeys.all(client.baseUrl) });
+    onDeleted == null ? void 0 : onDeleted(node);
+  };
+  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: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PanelHeader,
+      {
+        title: key,
+        onRefresh: () => detail.refetch(),
+        onDelete: remove,
+        deleteLabel: "Delete key"
+      }
+    ),
+    detail.isError && /* @__PURE__ */ jsxRuntime.jsx(PanelError, { error: detail.error }),
+    detail.data && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        KeyValueList.KeyValueList,
+        {
+          items: [
+            { key: "type", label: "Type", value: /* @__PURE__ */ jsxRuntime.jsx("code", { children: detail.data.type }) },
+            {
+              key: "ttl",
+              label: "TTL",
+              value: detail.data.ttlSeconds < 0 ? "none" : format.formatDuration(detail.data.ttlSeconds, { from: "s" })
+            },
+            {
+              key: "bytes",
+              label: "Memory",
+              value: format.formatBytes(detail.data.bytes),
+              hidden: !detail.data.bytes
+            },
+            { key: "length", label: "Length", value: format.formatShort(detail.data.length) }
+          ]
+        }
+      ),
+      tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "tablist", className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TabButton.TabButton,
+          {
+            active: activeTab === "value",
+            onClick: () => setActiveTab("value"),
+            label: "Value"
+          }
+        ),
+        tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+          TabButton.TabButton,
+          {
+            active: activeTab === tab.id,
+            onClick: () => setActiveTab(tab.id),
+            label: tab.label
+          },
+          tab.id
+        ))
+      ] }),
+      activeTab === "value" ? ((_a = adapter == null ? void 0 : adapter.renderDetail) == null ? void 0 : _a.call(adapter, ctx)) ?? /* @__PURE__ */ jsxRuntime.jsx(CacheValue.CacheValue, { detail: detail.data }) : (_b = tabs.find((t) => t.id === activeTab)) == null ? void 0 : _b.render()
+    ] }),
+    detail.isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Loading key…" })
+  ] });
+}
+function PrefixPanel({ client, node, onDeleted, onSelect, className }) {
+  var _a;
+  const queryClient = reactQuery.useQueryClient();
+  const prefix = node.prefix ?? "";
+  const subtree = reactQuery.useQuery({
+    queryKey: api.cacheQueryKeys.tree(client.baseUrl, prefix),
+    queryFn: () => client.tree(prefix)
+  });
+  const remove = async () => {
+    var _a2;
+    const count = ((_a2 = subtree.data) == null ? void 0 : _a2.keys) ?? node.keys;
+    if (!window.confirm(`Delete all ${count} keys under ${prefix}?`)) return;
+    await client.deletePrefix(prefix);
+    await queryClient.invalidateQueries({ queryKey: api.cacheQueryKeys.all(client.baseUrl) });
+    onDeleted == null ? void 0 : onDeleted(node);
+  };
+  const children = ((_a = subtree.data) == null ? void 0 : _a.nodes) ?? [];
+  const maxKeys = Math.max(1, ...children.map((c) => c.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: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PanelHeader,
+      {
+        title: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiFolder.UiFolder, className: "text-muted-foreground" }),
+          prefix
+        ] }),
+        onRefresh: () => subtree.refetch(),
+        onDelete: remove,
+        deleteLabel: "Delete prefix"
+      }
+    ),
+    subtree.isError && /* @__PURE__ */ jsxRuntime.jsx(PanelError, { error: subtree.error }),
+    subtree.data && /* @__PURE__ */ jsxRuntime.jsx(
+      Section.Section,
+      {
+        title: `${format.formatShort(subtree.data.keys)} keys${subtree.data.truncated ? "+" : ""}`,
+        summary: `${children.length} children`,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: children.map((child) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect == null ? void 0 : onSelect(child),
+            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: child.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: `${child.keys / maxKeys * 100}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-right text-xs text-muted-foreground", children: format.formatShort(child.keys) })
+            ]
+          },
+          child.prefix ?? child.key ?? child.name
+        )) })
+      }
+    ),
+    subtree.isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Loading prefix…" })
+  ] });
+}
+function PanelHeader({
+  title,
+  onRefresh,
+  onDelete,
+  deleteLabel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "min-w-0 flex-1 truncate font-mono text-sm font-semibold", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onRefresh,
+        "aria-label": "Refresh",
+        title: "Refresh",
+        className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiRefresh.UiRefresh, className: "text-sm" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onDelete,
+        "aria-label": deleteLabel,
+        title: deleteLabel,
+        className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiTrash.UiTrash, className: "text-sm" })
+      }
+    )
+  ] });
+}
+function PanelError({ 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.CacheDetailPanel = CacheDetailPanel;
+//# sourceMappingURL=CacheDetailPanel.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CacheDetailPanel.cjs","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":["isLeaf","jsx","useQueryClient","useQuery","cacheQueryKeys","useState","cn","jsxs","Fragment","KeyValueList","formatDuration","formatBytes","formatShort","TabButton","CacheValue","_a","Icon","UiFolder","Section","UiRefresh","UiTrash"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import { CacheClient } from './api';
+import { CacheAdapterRegistry } from './adapter';
+import { CacheTreeNode } from './types';
+export type CacheDetailPanelProps = {
+    client: CacheClient;
+    registry: CacheAdapterRegistry;
+    node: CacheTreeNode;
+    /** Called after the node (key or whole prefix) was deleted. */
+    onDeleted?: (node: CacheTreeNode) => void;
+    /** Drill into a child prefix/key from the subtree overview. */
+    onSelect?: (node: CacheTreeNode) => void;
+    className?: string;
+};
+/**
+ * Right-hand pane of the cache browser: full key detail (metadata + adapter
+ * or type-aware value rendering) for leaves, an aggregated subtree overview
+ * for prefix groups.
+ */
+export declare function CacheDetailPanel(props: CacheDetailPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CacheDetailPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CacheDetailPanel.d.ts","sourceRoot":"","sources":["../../../src/data/cache-browser/CacheDetailPanel.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAEtD,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAE5D"}

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

@@ -0,0 +1,193 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useQueryClient, useQuery } from "@tanstack/react-query";
+import { cn } from "../../lib/utils.js";
+import { formatDuration, formatBytes, formatShort } from "../../lib/format.js";
+import { Icon } from "../Icon.js";
+import { KeyValueList } from "../KeyValueList.js";
+import { TabButton } from "../TabButton.js";
+import { Section } from "../../layout/Section.js";
+import { cacheQueryKeys } from "./api.js";
+import { CacheValue } from "./CacheValue.js";
+import { isLeaf } from "./types.js";
+import { UiFolder } from "../../icons/components/UiFolder.js";
+import { UiRefresh } from "../../icons/components/UiRefresh.js";
+import { UiTrash } from "../../icons/components/UiTrash.js";
+function CacheDetailPanel(props) {
+  return isLeaf(props.node) ? /* @__PURE__ */ jsx(KeyPanel, { ...props }) : /* @__PURE__ */ jsx(PrefixPanel, { ...props });
+}
+function KeyPanel({ client, registry, node, onDeleted, className }) {
+  var _a, _b;
+  const queryClient = useQueryClient();
+  const key = node.key;
+  const detail = useQuery({
+    queryKey: cacheQueryKeys.key(client.baseUrl, key),
+    queryFn: () => client.key(key)
+  });
+  const [activeTab, setActiveTab] = useState("value");
+  const ctx = { node, detail: detail.data ?? null, client };
+  const adapter = registry.resolveDetail(node, detail.data ?? null);
+  const tabs = registry.resolveTabs(ctx);
+  const remove = async () => {
+    if (!window.confirm(`Delete key ${key}?`)) return;
+    await client.deleteKey(key);
+    await queryClient.invalidateQueries({ queryKey: cacheQueryKeys.all(client.baseUrl) });
+    onDeleted == null ? void 0 : onDeleted(node);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-col gap-density-3 overflow-y-auto p-density-3", className), children: [
+    /* @__PURE__ */ jsx(
+      PanelHeader,
+      {
+        title: key,
+        onRefresh: () => detail.refetch(),
+        onDelete: remove,
+        deleteLabel: "Delete key"
+      }
+    ),
+    detail.isError && /* @__PURE__ */ jsx(PanelError, { error: detail.error }),
+    detail.data && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        KeyValueList,
+        {
+          items: [
+            { key: "type", label: "Type", value: /* @__PURE__ */ jsx("code", { children: detail.data.type }) },
+            {
+              key: "ttl",
+              label: "TTL",
+              value: detail.data.ttlSeconds < 0 ? "none" : formatDuration(detail.data.ttlSeconds, { from: "s" })
+            },
+            {
+              key: "bytes",
+              label: "Memory",
+              value: formatBytes(detail.data.bytes),
+              hidden: !detail.data.bytes
+            },
+            { key: "length", label: "Length", value: formatShort(detail.data.length) }
+          ]
+        }
+      ),
+      tabs.length > 0 && /* @__PURE__ */ jsxs("div", { role: "tablist", className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          TabButton,
+          {
+            active: activeTab === "value",
+            onClick: () => setActiveTab("value"),
+            label: "Value"
+          }
+        ),
+        tabs.map((tab) => /* @__PURE__ */ jsx(
+          TabButton,
+          {
+            active: activeTab === tab.id,
+            onClick: () => setActiveTab(tab.id),
+            label: tab.label
+          },
+          tab.id
+        ))
+      ] }),
+      activeTab === "value" ? ((_a = adapter == null ? void 0 : adapter.renderDetail) == null ? void 0 : _a.call(adapter, ctx)) ?? /* @__PURE__ */ jsx(CacheValue, { detail: detail.data }) : (_b = tabs.find((t) => t.id === activeTab)) == null ? void 0 : _b.render()
+    ] }),
+    detail.isLoading && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading key…" })
+  ] });
+}
+function PrefixPanel({ client, node, onDeleted, onSelect, className }) {
+  var _a;
+  const queryClient = useQueryClient();
+  const prefix = node.prefix ?? "";
+  const subtree = useQuery({
+    queryKey: cacheQueryKeys.tree(client.baseUrl, prefix),
+    queryFn: () => client.tree(prefix)
+  });
+  const remove = async () => {
+    var _a2;
+    const count = ((_a2 = subtree.data) == null ? void 0 : _a2.keys) ?? node.keys;
+    if (!window.confirm(`Delete all ${count} keys under ${prefix}?`)) return;
+    await client.deletePrefix(prefix);
+    await queryClient.invalidateQueries({ queryKey: cacheQueryKeys.all(client.baseUrl) });
+    onDeleted == null ? void 0 : onDeleted(node);
+  };
+  const children = ((_a = subtree.data) == null ? void 0 : _a.nodes) ?? [];
+  const maxKeys = Math.max(1, ...children.map((c) => c.keys));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-col gap-density-3 overflow-y-auto p-density-3", className), children: [
+    /* @__PURE__ */ jsx(
+      PanelHeader,
+      {
+        title: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(Icon, { icon: UiFolder, className: "text-muted-foreground" }),
+          prefix
+        ] }),
+        onRefresh: () => subtree.refetch(),
+        onDelete: remove,
+        deleteLabel: "Delete prefix"
+      }
+    ),
+    subtree.isError && /* @__PURE__ */ jsx(PanelError, { error: subtree.error }),
+    subtree.data && /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: `${formatShort(subtree.data.keys)} keys${subtree.data.truncated ? "+" : ""}`,
+        summary: `${children.length} children`,
+        children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: children.map((child) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect == null ? void 0 : onSelect(child),
+            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: child.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: `${child.keys / maxKeys * 100}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsx("span", { className: "text-right text-xs text-muted-foreground", children: formatShort(child.keys) })
+            ]
+          },
+          child.prefix ?? child.key ?? child.name
+        )) })
+      }
+    ),
+    subtree.isLoading && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading prefix…" })
+  ] });
+}
+function PanelHeader({
+  title,
+  onRefresh,
+  onDelete,
+  deleteLabel
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("h3", { className: "min-w-0 flex-1 truncate font-mono text-sm font-semibold", children: title }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onRefresh,
+        "aria-label": "Refresh",
+        title: "Refresh",
+        className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+        children: /* @__PURE__ */ jsx(Icon, { icon: UiRefresh, className: "text-sm" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onDelete,
+        "aria-label": deleteLabel,
+        title: deleteLabel,
+        className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+        children: /* @__PURE__ */ jsx(Icon, { icon: UiTrash, className: "text-sm" })
+      }
+    )
+  ] });
+}
+function PanelError({ 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 {
+  CacheDetailPanel
+};
+//# sourceMappingURL=CacheDetailPanel.js.map

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