improve editor for KV

.gitignore

@@ -23,3 +23,5 @@ go.work
 dashboard/node_modules/*
 dist/*
 dashboard/dist/*
+editor/dist/
+editor/node_modules/

editor/package-lock.json

@@ -1,13 +1,14 @@
 {
-  "name": "@meta-sort/editor",
+  "name": "@meta-core/editor",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "@meta-sort/editor",
+      "name": "@meta-core/editor",
       "version": "0.1.0",
       "dependencies": {
+        "iso-639-3": "^3.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -1246,6 +1247,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/iso-639-3": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/iso-639-3/-/iso-639-3-3.0.1.tgz",
+      "integrity": "sha512-SdljCYXOexv/JmbQ0tvigHN43yECoscVpe2y2hlEqy/CStXQlroPhZLj7zKLRiGqLJfw8k7B973UAMDoQczVgQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

editor/src/api/kvApi.ts

@@ -0,0 +1,136 @@
+// Client for the meta-core /api/kv endpoints. The keyspace is a slash-tree of
+// string-valued keys; this module wraps the S3-style listing, search, and
+// per-key get/put/delete operations.
+
+const API_BASE = '/api/kv';
+
+export interface KVTreeResponse {
+  prefix: string;
+  delimiter: string;
+  branches: string[];
+  leaves: string[];
+  cursor: string;
+  hasMore: boolean;
+}
+
+export interface KVSearchResponse {
+  contains: string;
+  keys: string[];
+  truncated: boolean;
+}
+
+export interface KVFindMatch {
+  key: string;
+  value: string;
+  entryPath: string;
+  field: string;
+}
+
+export interface KVFindResponse {
+  contains: string;
+  fields: string[];
+  matches: KVFindMatch[];
+  truncated: boolean;
+}
+
+export interface KVValueResponse {
+  key: string;
+  type: string;
+  value: string;
+  exists: boolean;
+}
+
+export interface KVInfoResponse {
+  prefix: string;
+  fileCount: number;
+  keyCount: number;
+  totalSize: number;
+  memoryUsage: string;
+}
+
+async function jsonOrThrow<T>(res: Response): Promise<T> {
+  if (!res.ok) {
+    let msg = `HTTP ${res.status}`;
+    try {
+      const body = await res.json();
+      if (body?.message) msg = body.message;
+      else if (body?.error) msg = body.error;
+    } catch {}
+    throw new Error(msg);
+  }
+  return res.json();
+}
+
+export const KVAPI = {
+  async info(): Promise<KVInfoResponse> {
+    return jsonOrThrow(await fetch(`${API_BASE}/info`));
+  },
+
+  async tree(params: {
+    prefix?: string;
+    delimiter?: string;
+    cursor?: string;
+    max?: number;
+  }): Promise<KVTreeResponse> {
+    const q = new URLSearchParams();
+    if (params.prefix !== undefined) q.set('prefix', params.prefix);
+    if (params.delimiter !== undefined) q.set('delimiter', params.delimiter);
+    if (params.cursor) q.set('cursor', params.cursor);
+    if (params.max) q.set('max', String(params.max));
+    return jsonOrThrow(await fetch(`${API_BASE}/tree?${q}`));
+  },
+
+  // Walk multiple SCAN cycles until the keyspace is exhausted or a soft cap
+  // is reached. Useful for branches with up to a few thousand children where
+  // pagination UX would just be a worse spinner.
+  async treeAll(prefix: string, delimiter: string, softCap = 5000): Promise<KVTreeResponse> {
+    const seenLeaves = new Set<string>();
+    const seenBranches = new Set<string>();
+    let cursor = '';
+    while (true) {
+      const page = await this.tree({ prefix, delimiter, cursor, max: 1000 });
+      for (const k of page.leaves) seenLeaves.add(k);
+      for (const k of page.branches) seenBranches.add(k);
+      cursor = page.cursor;
+      if (!page.hasMore) break;
+      if (seenLeaves.size + seenBranches.size >= softCap) break;
+    }
+    return {
+      prefix,
+      delimiter,
+      branches: [...seenBranches].sort(),
+      leaves: [...seenLeaves].sort(),
+      cursor,
+      hasMore: cursor !== '0' && cursor !== '',
+    };
+  },
+
+  async search(contains: string, limit = 500): Promise<KVSearchResponse> {
+    const q = new URLSearchParams({ contains, limit: String(limit) });
+    return jsonOrThrow(await fetch(`${API_BASE}/search?${q}`));
+  },
+
+  async find(contains: string, fields: string[], limit = 200): Promise<KVFindResponse> {
+    const q = new URLSearchParams({ contains, fields: fields.join(','), limit: String(limit) });
+    return jsonOrThrow(await fetch(`${API_BASE}/find?${q}`));
+  },
+
+  async get(key: string): Promise<KVValueResponse> {
+    const q = new URLSearchParams({ key });
+    return jsonOrThrow(await fetch(`${API_BASE}/value?${q}`));
+  },
+
+  async put(key: string, value: string): Promise<KVValueResponse> {
+    const res = await fetch(`${API_BASE}/value`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key, value }),
+    });
+    return jsonOrThrow(res);
+  },
+
+  async del(key: string): Promise<{ key: string; deleted: boolean }> {
+    const q = new URLSearchParams({ key });
+    return jsonOrThrow(await fetch(`${API_BASE}/value?${q}`, { method: 'DELETE' }));
+  },
+};

editor/src/kv/FilteredKVTree.tsx

@@ -0,0 +1,233 @@
+import { useEffect, useMemo, useState } from 'react';
+import { KVAPI, KVFindMatch } from '../api/kvApi';
+
+interface Props {
+  matches: KVFindMatch[];
+  truncated: boolean;
+  searching: boolean;
+  selectedKey: string | null;
+  expandedPaths: Set<string>;
+  onSelectLeaf: (key: string) => void;
+  onSelectBranch: (path: string) => void;
+  onToggleBranch: (path: string, willOpen: boolean) => void;
+}
+
+// FilteredKVTree is the search-active counterpart to KVTree. Instead of
+// replacing the tree with a flat results list, it shows only the file
+// branches that contain matches, with the matched (field, value) pairs
+// rendered inline as sub-lines under each branch.
+//
+// Branches remain expandable: clicking one fetches the full subtree via
+// KVAPI.treeAll just like the main tree, so the user can drill into every
+// key of a matching file without clearing the search first.
+export function FilteredKVTree({
+  matches, truncated, searching,
+  selectedKey, expandedPaths,
+  onSelectLeaf, onSelectBranch, onToggleBranch,
+}: Props) {
+  // Group matches by their entryPath (file:<hash>/) so each entry is one row
+  // with potentially multiple hit previews.
+  const groups = useMemo(() => {
+    const m = new Map<string, KVFindMatch[]>();
+    for (const x of matches) {
+      const arr = m.get(x.entryPath);
+      if (arr) arr.push(x);
+      else m.set(x.entryPath, [x]);
+    }
+    return m;
+  }, [matches]);
+
+  return (
+    <div className="kv-filtered">
+      <div className="kv-search-header">
+        {searching
+          ? 'searching…'
+          : `${matches.length} match${matches.length === 1 ? '' : 'es'} in ${groups.size} file${groups.size === 1 ? '' : 's'}${truncated ? ' (truncated)' : ''}`}
+      </div>
+      {[...groups.entries()]
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([entryPath, hits]) => (
+          <FilteredEntry
+            key={entryPath}
+            entryPath={entryPath}
+            hits={hits}
+            selectedKey={selectedKey}
+            expanded={expandedPaths.has(entryPath)}
+            onSelectLeaf={onSelectLeaf}
+            onSelectBranch={onSelectBranch}
+            onToggleBranch={onToggleBranch}
+          />
+        ))}
+    </div>
+  );
+}
+
+interface EntryProps {
+  entryPath: string;
+  hits: KVFindMatch[];
+  selectedKey: string | null;
+  expanded: boolean;
+  onSelectLeaf: (key: string) => void;
+  onSelectBranch: (path: string) => void;
+  onToggleBranch: (path: string, willOpen: boolean) => void;
+}
+
+function FilteredEntry({
+  entryPath, hits, selectedKey, expanded,
+  onSelectLeaf, onSelectBranch, onToggleBranch,
+}: EntryProps) {
+  // We deliberately do NOT mark the matched-leaf rows as "selected" via the
+  // tree row's selected style — the inline hit lines are themselves the
+  // selected indicator (they're highlighted when their key is current).
+  const isBranchSelected = entryPath === selectedKey;
+  const HIT_PREVIEW = 4;
+
+  return (
+    <div className="kv-filtered-entry">
+      <div
+        className={`kv-tree-row kv-tree-branch${isBranchSelected ? ' selected' : ''}`}
+        style={{ paddingLeft: 4 }}
+        onClick={() => {
+          onToggleBranch(entryPath, !expanded);
+          onSelectBranch(entryPath);
+        }}
+      >
+        <span className="kv-tree-toggle">{expanded ? '▾' : '▸'}</span>
+        <span className="kv-tree-label">{entryPath}</span>
+        <span className="kv-filtered-count" title={`${hits.length} match${hits.length === 1 ? '' : 'es'}`}>
+          {hits.length}
+        </span>
+      </div>
+
+      <div className="kv-filtered-hits">
+        {hits.slice(0, HIT_PREVIEW).map((h) => (
+          <div
+            key={h.key}
+            className={`kv-filtered-hit${h.key === selectedKey ? ' selected' : ''}`}
+            onClick={(e) => { e.stopPropagation(); onSelectLeaf(h.key); }}
+            title={h.value}
+          >
+            <span className="kv-filtered-hit-field">{h.field}</span>
+            <span className="kv-filtered-hit-value">{h.value}</span>
+          </div>
+        ))}
+        {hits.length > HIT_PREVIEW && (
+          <div className="kv-filtered-more">
+            +{hits.length - HIT_PREVIEW} more match{hits.length - HIT_PREVIEW === 1 ? '' : 'es'}
+            {!expanded && ' · expand to see all keys'}
+          </div>
+        )}
+      </div>
+
+      {expanded && (
+        <LazySubtree
+          path={entryPath}
+          depth={1}
+          selectedKey={selectedKey}
+          onSelectLeaf={onSelectLeaf}
+          onSelectBranch={onSelectBranch}
+        />
+      )}
+    </div>
+  );
+}
+
+interface SubtreeProps {
+  path: string;
+  depth: number;
+  selectedKey: string | null;
+  onSelectLeaf: (key: string) => void;
+  onSelectBranch: (path: string) => void;
+}
+
+interface SubtreeData {
+  loading: boolean;
+  branches: string[];
+  leaves: string[];
+  error?: string;
+}
+
+// LazySubtree fetches its children once on mount and renders them. Sub-
+// branches are themselves LazyBranch components that fetch their own
+// children on first expand — recursion all the way down without the global
+// expandedPaths state of the main KVTree.
+function LazySubtree({ path, depth, selectedKey, onSelectLeaf, onSelectBranch }: SubtreeProps) {
+  const [data, setData] = useState<SubtreeData>({ loading: true, branches: [], leaves: [] });
+
+  useEffect(() => {
+    let cancelled = false;
+    KVAPI.treeAll(path, '/', 5000)
+      .then((r) => { if (!cancelled) setData({ loading: false, branches: r.branches, leaves: r.leaves }); })
+      .catch((e) => { if (!cancelled) setData({ loading: false, branches: [], leaves: [], error: e.message }); });
+    return () => { cancelled = true; };
+  }, [path]);
+
+  if (data.loading) {
+    return <div className="kv-tree-loading" style={{ paddingLeft: depth * 14 + 18 }}>loading…</div>;
+  }
+  if (data.error) {
+    return <div className="kv-tree-error" style={{ paddingLeft: depth * 14 + 18 }}>{data.error}</div>;
+  }
+
+  return (
+    <>
+      {data.branches.map((b) => (
+        <LazyBranch
+          key={b}
+          path={b}
+          parentPath={path}
+          depth={depth}
+          selectedKey={selectedKey}
+          onSelectLeaf={onSelectLeaf}
+          onSelectBranch={onSelectBranch}
+        />
+      ))}
+      {data.leaves.map((l) => (
+        <div
+          key={l}
+          className={`kv-tree-row kv-tree-leaf${l === selectedKey ? ' selected' : ''}`}
+          style={{ paddingLeft: depth * 14 + 4 }}
+          onClick={() => onSelectLeaf(l)}
+        >
+          <span className="kv-tree-leaf-dot">•</span>
+          <span className="kv-tree-label">{l.slice(path.length)}</span>
+        </div>
+      ))}
+    </>
+  );
+}
+
+interface LazyBranchProps {
+  path: string;
+  parentPath: string;
+  depth: number;
+  selectedKey: string | null;
+  onSelectLeaf: (key: string) => void;
+  onSelectBranch: (path: string) => void;
+}
+
+function LazyBranch({ path, parentPath, depth, selectedKey, onSelectLeaf, onSelectBranch }: LazyBranchProps) {
+  const [expanded, setExpanded] = useState(false);
+  const label = path.slice(parentPath.length);
+  return (
+    <>
+      <div
+        className={`kv-tree-row kv-tree-branch${path === selectedKey ? ' selected' : ''}`}
+        style={{ paddingLeft: depth * 14 + 4 }}
+        onClick={() => { setExpanded(!expanded); onSelectBranch(path); }}
+      >
+        <span className="kv-tree-toggle">{expanded ? '▾' : '▸'}</span>
+        <span className="kv-tree-label">{label}</span>
+      </div>
+      {expanded && (
+        <LazySubtree
+          path={path}
+          depth={depth + 1}
+          selectedKey={selectedKey}
+          onSelectLeaf={onSelectLeaf}
+          onSelectBranch={onSelectBranch}
+        />
+      )}
+    </>
+  );
+}

editor/src/kv/KVApp.css

@@ -0,0 +1,524 @@
+/* KV Tree Editor — fills the iframe viewport with a 2-pane layout. */
+
+.kv-app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  background: #fafbfc;
+  color: #1f2330;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 13px;
+}
+
+/* ── Header ───────────────────────────────────────────────────────────── */
+.kv-app-header {
+  border-bottom: 1px solid #e2e6ee;
+  padding: 8px 12px;
+  background: #fff;
+  flex: 0 0 auto;
+}
+
+.kv-app-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.kv-search-input {
+  flex: 1;
+  padding: 7px 11px;
+  border: 1px solid #d1d6e0;
+  border-radius: 6px;
+  font-size: 13px;
+  background: #fff;
+  outline: none;
+}
+.kv-search-input:focus { border-color: #6c7afa; box-shadow: 0 0 0 2px rgba(108, 122, 250, 0.2); }
+
+.kv-app-stats {
+  font-size: 12px;
+  color: #8089a0;
+  white-space: nowrap;
+}
+
+.kv-app-breadcrumb {
+  margin-top: 6px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  font-size: 12px;
+}
+.kv-crumb-label {
+  color: #8089a0;
+  margin-right: 4px;
+}
+.kv-crumb {
+  border: none;
+  background: transparent;
+  padding: 1px 4px;
+  border-radius: 3px;
+  cursor: pointer;
+  color: #4a5170;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.kv-crumb:hover { background: #eef0fb; color: #2a2f48; }
+
+/* ── Body ─────────────────────────────────────────────────────────────── */
+.kv-app-body {
+  flex: 1 1 auto;
+  display: flex;
+  min-height: 0;
+}
+
+.kv-app-left {
+  flex: 0 0 38%;
+  min-width: 280px;
+  max-width: 600px;
+  border-right: 1px solid #e2e6ee;
+  background: #fff;
+  overflow: auto;
+}
+
+.kv-app-right {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 16px 20px;
+  background: #fafbfc;
+}
+
+/* ── Tree ─────────────────────────────────────────────────────────────── */
+.kv-tree {
+  padding: 4px 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12.5px;
+}
+
+.kv-tree-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.kv-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.kv-tree-row:hover { background: #f3f5fb; }
+
+.kv-tree-toggle {
+  display: inline-block;
+  width: 12px;
+  color: #8089a0;
+  font-size: 10px;
+}
+
+.kv-tree-leaf-dot {
+  display: inline-block;
+  width: 12px;
+  color: #c5cad6;
+}
+
+.kv-tree-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kv-tree-branch .kv-tree-label {
+  color: #2a3050;
+  font-weight: 500;
+}
+
+.kv-tree-leaf .kv-tree-label {
+  color: #4a5170;
+}
+
+.kv-tree-row.selected {
+  background: #e7eafd;
+  color: #2532a3;
+}
+.kv-tree-row.selected:hover { background: #dde2fc; }
+
+.kv-tree-loading,
+.kv-tree-empty,
+.kv-tree-error {
+  font-size: 12px;
+  color: #8089a0;
+  padding: 4px 8px;
+  font-style: italic;
+}
+.kv-tree-error { color: #c0392b; }
+
+/* ── Right pane (leaf / branch) ───────────────────────────────────────── */
+.kv-leaf, .kv-branch {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.kv-leaf-key {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: #f0f2f8;
+  border: 1px solid #e2e6ee;
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+.kv-leaf-key-text {
+  flex: 1;
+  word-break: break-all;
+  color: #2a3050;
+}
+
+.kv-leaf-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.kv-leaf-label {
+  font-size: 12px;
+  color: #6e7790;
+  font-weight: 500;
+}
+.kv-leaf-type {
+  border: 1px solid #d1d6e0;
+  border-radius: 5px;
+  padding: 4px 8px;
+  font-size: 12px;
+  background: #fff;
+}
+.kv-leaf-hint {
+  font-size: 12px;
+  color: #6e7790;
+  font-style: italic;
+}
+
+.kv-leaf-input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid #d1d6e0;
+  border-radius: 5px;
+  font-size: 13px;
+  background: #fff;
+  outline: none;
+  box-sizing: border-box;
+}
+.kv-leaf-input:focus { border-color: #6c7afa; box-shadow: 0 0 0 2px rgba(108, 122, 250, 0.2); }
+
+.kv-leaf-textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid #d1d6e0;
+  border-radius: 5px;
+  font-size: 13px;
+  background: #fff;
+  outline: none;
+  resize: vertical;
+  box-sizing: border-box;
+  font-family: inherit;
+}
+.kv-leaf-textarea:focus { border-color: #6c7afa; box-shadow: 0 0 0 2px rgba(108, 122, 250, 0.2); }
+
+.kv-leaf-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.kv-leaf-url {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.kv-leaf-url-open {
+  font-size: 12px;
+  color: #6c7afa;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.kv-leaf-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ── Branch ───────────────────────────────────────────────────────────── */
+.kv-branch-section {
+  border: 1px solid #e2e6ee;
+  border-radius: 6px;
+  background: #fff;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.kv-branch-section h4 {
+  margin: 0;
+  font-size: 13px;
+  color: #2a3050;
+}
+.kv-branch-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.kv-branch-prefix {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  color: #6e7790;
+  background: #f0f2f8;
+  padding: 6px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  max-width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.kv-branch-note {
+  margin: 0;
+  font-size: 12px;
+  color: #6e7790;
+  line-height: 1.4;
+}
+
+/* ── Buttons ──────────────────────────────────────────────────────────── */
+.kv-btn {
+  border: 1px solid #d1d6e0;
+  background: #fff;
+  color: #2a3050;
+  padding: 6px 14px;
+  border-radius: 5px;
+  font-size: 12.5px;
+  cursor: pointer;
+}
+.kv-btn:hover:not(:disabled) { background: #f3f5fb; border-color: #b8c0d0; }
+.kv-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.kv-btn-primary {
+  background: #6c7afa;
+  border-color: #6c7afa;
+  color: #fff;
+}
+.kv-btn-primary:hover:not(:disabled) {
+  background: #5868e8;
+  border-color: #5868e8;
+}
+
+.kv-btn-danger {
+  border-color: #e0788a;
+  color: #c0392b;
+}
+.kv-btn-danger:hover:not(:disabled) {
+  background: #fdecef;
+  border-color: #c0392b;
+}
+
+.kv-btn-icon {
+  border: 1px solid transparent;
+  background: transparent;
+  color: #6e7790;
+  padding: 2px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+.kv-btn-icon:hover { background: #eef0fb; color: #2a3050; }
+
+/* ── Pane status ──────────────────────────────────────────────────────── */
+.kv-pane-status {
+  color: #6e7790;
+  font-size: 12.5px;
+  padding: 8px 0;
+}
+.kv-pane-empty {
+  text-align: center;
+  padding: 80px 20px;
+  font-size: 14px;
+}
+.kv-pane-hint {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #8089a0;
+}
+
+/* ── Field chips (configure search-in fields) ─────────────────────────── */
+.kv-chips {
+  margin-top: 6px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+}
+.kv-chips-label {
+  font-size: 12px;
+  color: #8089a0;
+  margin-right: 4px;
+}
+.kv-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: #eef0fb;
+  border: 1px solid #d5dafa;
+  color: #2a3050;
+  border-radius: 12px;
+  padding: 1px 4px 1px 8px;
+  font-size: 11.5px;
+}
+.kv-chip code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11.5px;
+}
+.kv-chip-x {
+  border: none;
+  background: transparent;
+  color: #6e7790;
+  cursor: pointer;
+  padding: 0 4px;
+  font-size: 14px;
+  line-height: 1;
+}
+.kv-chip-x:hover { color: #c0392b; }
+.kv-chip-input {
+  border: 1px dashed #c5cad6;
+  background: transparent;
+  border-radius: 12px;
+  padding: 2px 8px;
+  font-size: 11.5px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  outline: none;
+  min-width: 90px;
+}
+.kv-chip-input:focus { border-style: solid; border-color: #6c7afa; }
+
+/* ── Search header (shared across filter mode) ────────────────────────── */
+.kv-search-header {
+  padding: 6px 10px;
+  font-size: 11px;
+  color: #6e7790;
+  background: #f3f5fb;
+  border-bottom: 1px solid #e2e6ee;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+/* ── Filtered tree (search-active state) ──────────────────────────────── */
+.kv-filtered {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12.5px;
+}
+.kv-filtered-entry {
+  border-bottom: 1px solid #f0f2f8;
+}
+.kv-filtered-count {
+  margin-left: auto;
+  background: #eef0fb;
+  color: #4a5170;
+  padding: 0 6px;
+  border-radius: 9px;
+  font-size: 10.5px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-weight: 600;
+}
+.kv-filtered-hits {
+  padding: 2px 4px 4px 24px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+}
+.kv-filtered-hit {
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+  padding: 2px 6px;
+  border-radius: 3px;
+  cursor: pointer;
+  line-height: 1.35;
+}
+.kv-filtered-hit:hover { background: #f3f5fb; }
+.kv-filtered-hit.selected {
+  background: #e7eafd;
+}
+.kv-filtered-hit-field {
+  background: #eef0fb;
+  color: #4a5170;
+  padding: 0 5px;
+  border-radius: 3px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10.5px;
+  flex: 0 0 auto;
+}
+.kv-filtered-hit-value {
+  color: #2a3050;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.kv-filtered-more {
+  padding: 2px 6px 0;
+  font-size: 11px;
+  font-style: italic;
+  color: #8089a0;
+}
+
+/* ── Toasts ───────────────────────────────────────────────────────────── */
+.kv-toast-stack {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 6px;
+  z-index: 1000;
+  max-width: 480px;
+}
+.kv-toast {
+  background: #2a3050;
+  color: #fff;
+  border-radius: 6px;
+  padding: 9px 12px;
+  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
+  font-size: 12.5px;
+}
+.kv-toast-success { background: #2f9e44; }
+.kv-toast-error { background: #c0392b; }
+.kv-toast-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  justify-content: space-between;
+}
+.kv-toast-text {
+  flex: 1;
+  word-break: break-word;
+}
+.kv-toast-close {
+  border: none;
+  background: transparent;
+  color: rgba(255,255,255,0.8);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+}
+.kv-toast-close:hover { color: #fff; }
+.kv-toast-details {
+  margin: 6px 0 0;
+  padding-left: 18px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  color: rgba(255,255,255,0.85);
+  max-height: 160px;
+  overflow: auto;
+}

editor/src/kv/KVApp.tsx

@@ -0,0 +1,244 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { KVAPI, KVFindMatch, KVInfoResponse } from '../api/kvApi';
+import { ancestorBranches, KVTree } from './KVTree';
+import { FilteredKVTree } from './FilteredKVTree';
+import { KVLeafEditor } from './KVLeafEditor';
+import { KVBranchEditor } from './KVBranchEditor';
+import { SearchFieldChips } from './SearchFieldChips';
+import { ToastStack, makeToast } from './Toast';
+import { ToastEntry } from './types';
+import './KVApp.css';
+
+const SEARCH_FIELDS_LS_KEY = 'kv-editor.searchFields.v1';
+const DEFAULT_SEARCH_FIELDS = ['originalTitle', 'filePath', 'fileName', 'plot/eng'];
+
+function loadSearchFields(): string[] {
+  try {
+    const raw = localStorage.getItem(SEARCH_FIELDS_LS_KEY);
+    if (!raw) return DEFAULT_SEARCH_FIELDS;
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed) && parsed.every((x) => typeof x === 'string')) return parsed;
+  } catch {}
+  return DEFAULT_SEARCH_FIELDS;
+}
+
+// Top-level shell. Two panes inside the iframe:
+//   left  — lazy tree of the keyspace
+//   right — leaf editor (when a leaf is selected) or branch editor (branch).
+//
+// A sticky header carries the search bar, the breadcrumb, and basic stats.
+export default function KVApp() {
+  // Selected node. branchPath is set when a branch is selected; selectedKey
+  // when a leaf is. Mutually exclusive.
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+  const [branchPath, setBranchPath] = useState<string | null>(null);
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set(['']));
+  const [searchInput, setSearchInput] = useState('');
+  const [searchFields, setSearchFields] = useState<string[]>(loadSearchFields);
+  const [searchResults, setSearchResults] = useState<KVFindMatch[] | null>(null);
+  const [searchTruncated, setSearchTruncated] = useState(false);
+  const [searching, setSearching] = useState(false);
+  const [info, setInfo] = useState<KVInfoResponse | null>(null);
+  const [reloadToken, setReloadToken] = useState(0);
+  const [toasts, setToasts] = useState<ToastEntry[]>([]);
+  const searchTimerRef = useRef<number | null>(null);
+
+  const pushToast = (t: ToastEntry) => setToasts((cur) => [...cur, t]);
+  const dismissToast = (id: number) => setToasts((cur) => cur.filter((t) => t.id !== id));
+
+  useEffect(() => {
+    KVAPI.info().then(setInfo).catch(() => {});
+  }, [reloadToken]);
+
+  // Deep-link: /editor/file/<hashId> opens the tree pre-expanded at that hash.
+  useEffect(() => {
+    const m = window.location.pathname.match(/\/file\/([a-z0-9]+)$/i);
+    if (m) {
+      const hashId = m[1];
+      const branch = `file:${hashId}/`;
+      setExpandedPaths((cur) => new Set([...cur, '', 'file:', branch]));
+      setBranchPath(branch);
+    }
+  }, []);
+
+  // Persist field list across reloads.
+  useEffect(() => {
+    try { localStorage.setItem(SEARCH_FIELDS_LS_KEY, JSON.stringify(searchFields)); } catch {}
+  }, [searchFields]);
+
+  // Debounced live value-search across configured fields. Empty input clears.
+  useEffect(() => {
+    if (searchTimerRef.current) window.clearTimeout(searchTimerRef.current);
+    if (!searchInput.trim() || searchFields.length === 0) {
+      setSearchResults(null);
+      setSearchTruncated(false);
+      setSearching(false);
+      return;
+    }
+    setSearching(true);
+    searchTimerRef.current = window.setTimeout(async () => {
+      try {
+        const r = await KVAPI.find(searchInput.trim(), searchFields, 200);
+        setSearchResults(r.matches);
+        setSearchTruncated(r.truncated);
+      } catch (e: any) {
+        pushToast(makeToast('error', `Search failed: ${e.message}`));
+      } finally {
+        setSearching(false);
+      }
+    }, 250);
+    return () => {
+      if (searchTimerRef.current) window.clearTimeout(searchTimerRef.current);
+    };
+  }, [searchInput, searchFields]);
+
+  // Jump to a key from a search hit: select it, expand all ancestor branches.
+  const jumpToKey = (key: string) => {
+    const ancestors = ancestorBranches(key);
+    setExpandedPaths((cur) => new Set([...cur, '', ...ancestors]));
+    if (key.endsWith('/') || key.endsWith(':')) {
+      setBranchPath(key);
+      setSelectedKey(null);
+    } else {
+      setSelectedKey(key);
+      setBranchPath(null);
+    }
+  };
+
+  const breadcrumb = useMemo(() => {
+    const target = selectedKey ?? branchPath ?? '';
+    if (!target) return null;
+    const parts: { label: string; path: string }[] = [];
+    let i = 0;
+    while (i < target.length) {
+      let next = -1;
+      for (const d of [':', '/']) {
+        const idx = target.indexOf(d, i);
+        if (idx >= 0 && (next < 0 || idx < next)) next = idx;
+      }
+      if (next < 0) {
+        parts.push({ label: target.slice(i), path: target });
+        break;
+      }
+      parts.push({ label: target.slice(i, next + 1), path: target.slice(0, next + 1) });
+      i = next + 1;
+    }
+    return parts;
+  }, [selectedKey, branchPath]);
+
+  return (
+    <div className="kv-app">
+      <header className="kv-app-header">
+        <div className="kv-app-search">
+          <input
+            type="search"
+            className="kv-search-input"
+            placeholder="filter by value across configured fields…"
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            autoFocus
+          />
+          {searchInput && (
+            <button className="kv-btn-icon" onClick={() => setSearchInput('')} title="clear">×</button>
+          )}
+          <span className="kv-app-stats">
+            {info ? `${info.keyCount} files · ${info.memoryUsage}` : ''}
+          </span>
+          <button
+            className="kv-btn"
+            onClick={() => setReloadToken((n) => n + 1)}
+            title="refresh tree"
+          >Refresh</button>
+        </div>
+        <SearchFieldChips fields={searchFields} onChange={setSearchFields} />
+        {breadcrumb && breadcrumb.length > 0 && (
+          <div className="kv-app-breadcrumb">
+            <span className="kv-crumb-label">path:</span>
+            {breadcrumb.map((b, i) => (
+              <button
+                key={i}
+                className="kv-crumb"
+                onClick={() => jumpToKey(b.path)}
+              >{b.label}</button>
+            ))}
+          </div>
+        )}
+      </header>
+
+      <div className="kv-app-body">
+        <aside className="kv-app-left">
+          {searchResults !== null ? (
+            <FilteredKVTree
+              matches={searchResults}
+              truncated={searchTruncated}
+              searching={searching}
+              selectedKey={selectedKey}
+              expandedPaths={expandedPaths}
+              onSelectLeaf={(k) => { setSelectedKey(k); setBranchPath(null); }}
+              onSelectBranch={(p) => { setBranchPath(p); setSelectedKey(null); }}
+              onToggleBranch={(p, willOpen) => {
+                setExpandedPaths((cur) => {
+                  const next = new Set(cur);
+                  if (willOpen) next.add(p); else next.delete(p);
+                  return next;
+                });
+              }}
+            />
+          ) : (
+            <KVTree
+              selectedKey={selectedKey}
+              expandedPaths={expandedPaths}
+              reloadToken={reloadToken}
+              onSelectLeaf={(k) => { setSelectedKey(k); setBranchPath(null); }}
+              onSelectBranch={(p) => { setBranchPath(p); setSelectedKey(null); }}
+              onToggleBranch={(p, willOpen) => {
+                setExpandedPaths((cur) => {
+                  const next = new Set(cur);
+                  if (willOpen) next.add(p); else next.delete(p);
+                  return next;
+                });
+              }}
+            />
+          )}
+        </aside>
+        <main className="kv-app-right">
+          {selectedKey ? (
+            <KVLeafEditor
+              selectedKey={selectedKey}
+              reloadToken={reloadToken}
+              onSaved={() => {
+                pushToast(makeToast('success', `Saved ${selectedKey}`));
+                setReloadToken((n) => n + 1);
+              }}
+              onDeleted={() => {
+                pushToast(makeToast('success', `Deleted ${selectedKey}`));
+                setSelectedKey(null);
+                setReloadToken((n) => n + 1);
+              }}
+              onError={(msg) => pushToast(makeToast('error', msg))}
+            />
+          ) : branchPath ? (
+            <KVBranchEditor
+              branchPath={branchPath}
+              reloadToken={reloadToken}
+              onChanged={(info, errors) => {
+                pushToast(makeToast(errors && errors.length > 0 ? 'error' : 'success', info, errors));
+                setReloadToken((n) => n + 1);
+              }}
+            />
+          ) : (
+            <div className="kv-pane-status kv-pane-empty">
+              Select a key from the tree.
+              <div className="kv-pane-hint">
+                Click a branch to add / rename / delete a subtree, or a leaf to edit its value.
+              </div>
+            </div>
+          )}
+        </main>
+      </div>
+
+      <ToastStack toasts={toasts} onDismiss={dismissToast} />
+    </div>
+  );
+}
+

editor/src/kv/KVBranchEditor.tsx

@@ -0,0 +1,194 @@
+import { useEffect, useState } from 'react';
+import { KVAPI } from '../api/kvApi';
+
+interface Props {
+  // Branch path, ends with the delimiter (":" or "/").
+  branchPath: string;
+  reloadToken: number;
+  onChanged: (info: string, errors?: string[]) => void;
+}
+
+// Branch operations are non-atomic — each per-key write/delete goes one round
+// trip to Redis and may fail individually. Failures collect into a list and
+// surface via the parent's toast stack. Per the design, we accept partial
+// failure and surface what failed.
+export function KVBranchEditor({ branchPath, reloadToken, onChanged }: Props) {
+  const [count, setCount] = useState<number | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [newChild, setNewChild] = useState('');
+  const [newValue, setNewValue] = useState('');
+  const [renameTo, setRenameTo] = useState('');
+
+  // Use the search endpoint with the branch path as the substring to count
+  // descendants. Truncated when there are more than the limit; we just show
+  // an approximate count.
+  useEffect(() => {
+    let cancelled = false;
+    KVAPI.search(branchPath, 5000)
+      .then((r) => {
+        if (cancelled) return;
+        // Filter to true descendants (those starting with branchPath).
+        const descendants = r.keys.filter((k) => k.startsWith(branchPath));
+        setCount(descendants.length);
+      })
+      .catch(() => { if (!cancelled) setCount(null); });
+    return () => { cancelled = true; };
+  }, [branchPath, reloadToken]);
+
+  // Walk all descendants and run an op against each, collecting failures.
+  const forEachDescendant = async (op: (key: string) => Promise<void>): Promise<string[]> => {
+    const r = await KVAPI.search(branchPath, 5000);
+    const keys = r.keys.filter((k) => k.startsWith(branchPath));
+    const errors: string[] = [];
+    for (const k of keys) {
+      try { await op(k); } catch (e: any) { errors.push(`${k}: ${e.message}`); }
+    }
+    return errors;
+  };
+
+  const addChild = async () => {
+    if (!newChild) return;
+    const childKey = branchPath + newChild;
+    setBusy(true);
+    try {
+      await KVAPI.put(childKey, newValue);
+      setNewChild('');
+      setNewValue('');
+      onChanged(`Created ${childKey}`);
+    } catch (e: any) {
+      onChanged(`Failed to create ${childKey}`, [e.message]);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const deleteSubtree = async () => {
+    if (!confirm(`Delete every key under ${branchPath} (${count ?? '?'} entries)?`)) return;
+    setBusy(true);
+    try {
+      const errors = await forEachDescendant((k) => KVAPI.del(k).then(() => undefined));
+      if (errors.length === 0) {
+        onChanged(`Deleted subtree ${branchPath}`);
+      } else {
+        onChanged(`Deleted subtree ${branchPath} with ${errors.length} failure(s)`, errors);
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const renameBranch = async () => {
+    if (!renameTo) return;
+    const target = renameTo.endsWith('/') || renameTo.endsWith(':') ? renameTo : renameTo + '/';
+    if (target === branchPath) return;
+    if (!confirm(`Rename ${branchPath} → ${target}? This copies ${count ?? '?'} keys then deletes the originals.`)) return;
+    setBusy(true);
+    try {
+      // Pass 1: copy
+      const r = await KVAPI.search(branchPath, 5000);
+      const keys = r.keys.filter((k) => k.startsWith(branchPath));
+      const copyErrors: string[] = [];
+      for (const oldKey of keys) {
+        try {
+          const v = await KVAPI.get(oldKey);
+          if (!v.exists || v.type !== 'string') {
+            copyErrors.push(`${oldKey}: skipped (type ${v.type || 'missing'})`);
+            continue;
+          }
+          const newKey = target + oldKey.slice(branchPath.length);
+          await KVAPI.put(newKey, v.value);
+        } catch (e: any) {
+          copyErrors.push(`${oldKey}: ${e.message}`);
+        }
+      }
+      // Pass 2: delete originals (only the ones we successfully copied)
+      const failedOldKeys = new Set(copyErrors.map((e) => e.split(':')[0]));
+      const deleteErrors: string[] = [];
+      for (const oldKey of keys) {
+        if (failedOldKeys.has(oldKey)) continue;
+        try { await KVAPI.del(oldKey); } catch (e: any) { deleteErrors.push(`${oldKey}: ${e.message}`); }
+      }
+      const allErrors = [...copyErrors, ...deleteErrors];
+      if (allErrors.length === 0) {
+        onChanged(`Renamed ${branchPath} → ${target}`);
+      } else {
+        onChanged(`Renamed ${branchPath} → ${target} with ${allErrors.length} failure(s)`, allErrors);
+      }
+      setRenameTo('');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="kv-branch">
+      <div className="kv-leaf-key">
+        <code className="kv-leaf-key-text">{branchPath}</code>
+        <button
+          className="kv-btn-icon"
+          onClick={() => navigator.clipboard.writeText(branchPath)}
+          title="copy path"
+        >⧉</button>
+      </div>
+
+      <div className="kv-pane-status">
+        {count == null ? 'counting…' : `${count} descendant key${count === 1 ? '' : 's'}`}
+      </div>
+
+      <section className="kv-branch-section">
+        <h4>Add child</h4>
+        <div className="kv-branch-row">
+          <span className="kv-branch-prefix">{branchPath}</span>
+          <input
+            className="kv-leaf-input"
+            placeholder="child path (may contain /)"
+            value={newChild}
+            onChange={(e) => setNewChild(e.target.value)}
+            disabled={busy}
+          />
+        </div>
+        <input
+          className="kv-leaf-input"
+          placeholder="value"
+          value={newValue}
+          onChange={(e) => setNewValue(e.target.value)}
+          disabled={busy}
+        />
+        <button className="kv-btn kv-btn-primary" disabled={!newChild || busy} onClick={addChild}>
+          Add
+        </button>
+      </section>
+
+      <section className="kv-branch-section">
+        <h4>Rename branch</h4>
+        <div className="kv-branch-row">
+          <span className="kv-branch-prefix">→</span>
+          <input
+            className="kv-leaf-input"
+            placeholder="new prefix (e.g. file:newhash/)"
+            value={renameTo}
+            onChange={(e) => setRenameTo(e.target.value)}
+            disabled={busy}
+          />
+        </div>
+        <p className="kv-branch-note">
+          Non-atomic: copies each descendant to the new prefix then deletes the original.
+          Failures are surfaced individually.
+        </p>
+        <button className="kv-btn" disabled={!renameTo || busy} onClick={renameBranch}>
+          Rename
+        </button>
+      </section>
+
+      <section className="kv-branch-section">
+        <h4>Delete subtree</h4>
+        <p className="kv-branch-note">
+          Deletes every descendant key. Cannot be undone.
+        </p>
+        <button className="kv-btn kv-btn-danger" disabled={busy || count === 0} onClick={deleteSubtree}>
+          Delete {count ?? ''} key{count === 1 ? '' : 's'}
+        </button>
+      </section>
+    </div>
+  );
+}

editor/src/kv/KVLeafEditor.tsx

@@ -0,0 +1,257 @@
+import { useEffect, useState } from 'react';
+import { KVAPI } from '../api/kvApi';
+import { LanguageCombobox } from '../components/LanguageCombobox';
+import { ALL_TYPES, describeType, detectType } from './typeHeuristics';
+import { FieldType } from './types';
+
+interface Props {
+  // Full Redis key path of the selected leaf.
+  selectedKey: string;
+  // Bumped after a delete or external change to force refetch.
+  reloadToken: number;
+  onSaved: () => void;
+  onDeleted: () => void;
+  onError: (msg: string) => void;
+}
+
+export function KVLeafEditor({ selectedKey, reloadToken, onSaved, onDeleted, onError }: Props) {
+  const [original, setOriginal] = useState<string>('');
+  const [draft, setDraft] = useState<string>('');
+  const [exists, setExists] = useState<boolean>(true);
+  const [redisType, setRedisType] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  // Manual override for the inferred type. "auto" defers to detectType.
+  const [typeOverride, setTypeOverride] = useState<FieldType>('auto');
+  const detected = detectType(selectedKey, original);
+  const effectiveType = typeOverride === 'auto' ? detected : typeOverride;
+
+  // Reset override when the selected key changes — the previous override
+  // doesn't apply to a different leaf.
+  useEffect(() => { setTypeOverride('auto'); }, [selectedKey]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    KVAPI.get(selectedKey)
+      .then((r) => {
+        if (cancelled) return;
+        setOriginal(r.value);
+        setDraft(r.value);
+        setExists(r.exists);
+        setRedisType(r.type);
+      })
+      .catch((e) => onError(e.message))
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [selectedKey, reloadToken, onError]);
+
+  const dirty = draft !== original;
+  const editable = exists ? redisType === 'string' || redisType === '' : true;
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      await KVAPI.put(selectedKey, draft);
+      setOriginal(draft);
+      setExists(true);
+      setRedisType('string');
+      onSaved();
+    } catch (e: any) {
+      onError(e.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const del = async () => {
+    if (!confirm(`Delete ${selectedKey}?`)) return;
+    setSaving(true);
+    try {
+      await KVAPI.del(selectedKey);
+      onDeleted();
+    } catch (e: any) {
+      onError(e.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return <div className="kv-pane-status">loading…</div>;
+  }
+
+  if (!editable) {
+    return (
+      <div className="kv-leaf">
+        <KeyHeader keyPath={selectedKey} />
+        <div className="kv-pane-status">
+          Key has Redis type <code>{redisType}</code> — only string-typed values are editable here.
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="kv-leaf">
+      <KeyHeader keyPath={selectedKey} />
+
+      <div className="kv-leaf-meta">
+        <label className="kv-leaf-label">Type</label>
+        <select
+          className="kv-leaf-type"
+          value={typeOverride}
+          onChange={(e) => setTypeOverride(e.target.value as FieldType)}
+        >
+          {ALL_TYPES.map((t) => (
+            <option key={t} value={t}>
+              {t === 'auto' ? `auto (${describeType(detected)})` : describeType(t)}
+            </option>
+          ))}
+        </select>
+        {!exists && <span className="kv-leaf-hint">new key — save to create</span>}
+      </div>
+
+      <ValueEditor type={effectiveType} value={draft} onChange={setDraft} />
+
+      <div className="kv-leaf-actions">
+        <button
+          className="kv-btn kv-btn-primary"
+          onClick={save}
+          disabled={!dirty || saving}
+        >{saving ? 'saving…' : exists ? 'Save' : 'Create'}</button>
+        <button
+          className="kv-btn"
+          onClick={() => setDraft(original)}
+          disabled={!dirty || saving}
+        >Reset</button>
+        {exists && (
+          <button
+            className="kv-btn kv-btn-danger"
+            onClick={del}
+            disabled={saving}
+          >Delete</button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function KeyHeader({ keyPath }: { keyPath: string }) {
+  return (
+    <div className="kv-leaf-key">
+      <code className="kv-leaf-key-text">{keyPath}</code>
+      <button
+        className="kv-btn-icon"
+        onClick={() => navigator.clipboard.writeText(keyPath)}
+        title="copy key"
+      >⧉</button>
+    </div>
+  );
+}
+
+interface ValueProps {
+  type: FieldType;
+  value: string;
+  onChange: (v: string) => void;
+}
+
+function ValueEditor({ type, value, onChange }: ValueProps) {
+  switch (type) {
+    case 'bool':
+      return (
+        <select
+          className="kv-leaf-input"
+          value={value === 'true' ? 'true' : value === 'false' ? 'false' : ''}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          <option value="">(unset)</option>
+          <option value="true">true</option>
+          <option value="false">false</option>
+        </select>
+      );
+    case 'number':
+      return (
+        <input
+          type="number"
+          className="kv-leaf-input"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+    case 'datetime':
+      return (
+        <input
+          type="datetime-local"
+          className="kv-leaf-input"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+    case 'lang':
+      return (
+        <LanguageCombobox value={value} onChange={onChange} />
+      );
+    case 'url':
+      return (
+        <div className="kv-leaf-url">
+          <input
+            type="url"
+            className="kv-leaf-input"
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+          />
+          {value && (
+            <a className="kv-leaf-url-open" href={value} target="_blank" rel="noreferrer">open ↗</a>
+          )}
+        </div>
+      );
+    case 'json':
+      return (
+        <textarea
+          className="kv-leaf-textarea kv-leaf-mono"
+          rows={12}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          spellCheck={false}
+        />
+      );
+    case 'text':
+      return (
+        <textarea
+          className="kv-leaf-textarea"
+          rows={8}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+    case 'hash':
+      return (
+        <div className="kv-leaf-url">
+          <input
+            type="text"
+            className="kv-leaf-input kv-leaf-mono"
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            spellCheck={false}
+          />
+          <button
+            className="kv-btn-icon"
+            onClick={() => navigator.clipboard.writeText(value)}
+            title="copy"
+          >⧉</button>
+        </div>
+      );
+    case 'string':
+    default:
+      return (
+        <input
+          type="text"
+          className="kv-leaf-input"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+  }
+}

editor/src/kv/KVTree.tsx

@@ -0,0 +1,255 @@
+import { useEffect, useMemo, useState } from 'react';
+import { KVAPI } from '../api/kvApi';
+
+// A node in the lazy tree. branch-typed nodes have an associated path that
+// ends with the delimiter and lazy-load their children on first expand.
+type NodeKind = 'branch' | 'leaf';
+
+interface TreeNode {
+  kind: NodeKind;
+  // Display label: the segment of the path under the parent.
+  label: string;
+  // Full key path. For branches, ends with the delimiter.
+  path: string;
+}
+
+interface BranchState {
+  loaded: boolean;
+  loading: boolean;
+  error?: string;
+  children: TreeNode[];
+}
+
+// Sub-segment of a path used as the visible label for a branch / leaf.
+// Splits on either ":" or "/" so file:abc/title/eng becomes file: > abc > title > eng.
+function labelOf(path: string, parentPath: string): string {
+  const rest = path.slice(parentPath.length);
+  // The "rest" includes a trailing delimiter for branches; strip it for display.
+  return rest.replace(/[/:]+$/, '');
+}
+
+// Hide internal Redis structures from the tree:
+//   - the `meta:` namespace (event streams, internal state)
+//   - bare top-level leaves under a colon-namespace like file:__index__ and
+//     file:events (Redis sets / streams that aren't user data).
+function isHiddenNode(node: TreeNode): boolean {
+  if (node.kind === 'branch' && node.path === 'meta:') return true;
+  if (node.kind === 'leaf' && /^[^/]+:[^/]+$/.test(node.path)) return true;
+  return false;
+}
+
+interface Props {
+  // Selected leaf path (full key) — highlighted.
+  selectedKey: string | null;
+  // When set, the tree forces these branches open (used for auto-expand on
+  // search hit or deep-link).
+  expandedPaths: Set<string>;
+  onSelectLeaf: (key: string) => void;
+  onSelectBranch: (path: string) => void;
+  onToggleBranch: (path: string, willOpen: boolean) => void;
+  // Bumping this triggers a full reload of root and any expanded branches.
+  reloadToken: number;
+}
+
+export function KVTree({
+  selectedKey,
+  expandedPaths,
+  onSelectLeaf,
+  onSelectBranch,
+  onToggleBranch,
+  reloadToken,
+}: Props) {
+  // Map of branch path → load state. The empty key "" represents the root.
+  const [branches, setBranches] = useState<Record<string, BranchState>>({});
+
+  // Load (or reload) a branch's children from the API. The root is special-
+  // cased: we list at prefix="" with delimiter=":" to surface the namespaces.
+  const loadBranch = async (path: string) => {
+    setBranches((b) => ({
+      ...b,
+      [path]: { loaded: false, loading: true, children: b[path]?.children ?? [] },
+    }));
+    try {
+      const isRoot = path === '';
+      const delim = isRoot ? ':' : '/';
+      const resp = await KVAPI.treeAll(path, delim, 5000);
+      const branchNodes: TreeNode[] = resp.branches.map((p) => ({
+        kind: 'branch',
+        label: labelOf(p, path) + delim,
+        path: p,
+      }));
+      const leafNodes: TreeNode[] = resp.leaves.map((p) => ({
+        kind: 'leaf',
+        label: labelOf(p, path),
+        path: p,
+      }));
+      const children = [...branchNodes, ...leafNodes];
+      setBranches((b) => ({
+        ...b,
+        [path]: { loaded: true, loading: false, children },
+      }));
+    } catch (err: any) {
+      setBranches((b) => ({
+        ...b,
+        [path]: { loaded: false, loading: false, children: [], error: err.message },
+      }));
+    }
+  };
+
+  // On reloadToken change, refetch root and every currently-expanded branch.
+  useEffect(() => {
+    loadBranch('');
+    for (const p of expandedPaths) {
+      if (p !== '') loadBranch(p);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reloadToken]);
+
+  // Whenever expandedPaths gains a path we haven't loaded yet, lazy-load it.
+  useEffect(() => {
+    for (const p of expandedPaths) {
+      if (p === '') continue;
+      const state = branches[p];
+      if (!state || (!state.loaded && !state.loading)) {
+        loadBranch(p);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [expandedPaths]);
+
+  return (
+    <div className="kv-tree">
+      <Branch
+        path=""
+        state={branches['']}
+        depth={0}
+        expandedPaths={expandedPaths}
+        branches={branches}
+        selectedKey={selectedKey}
+        onSelectLeaf={onSelectLeaf}
+        onSelectBranch={onSelectBranch}
+        onToggleBranch={(p, open) => {
+          onToggleBranch(p, open);
+          if (open && (!branches[p] || !branches[p].loaded)) loadBranch(p);
+        }}
+      />
+    </div>
+  );
+}
+
+interface BranchProps {
+  path: string;
+  state: BranchState | undefined;
+  depth: number;
+  expandedPaths: Set<string>;
+  branches: Record<string, BranchState>;
+  selectedKey: string | null;
+  onSelectLeaf: (key: string) => void;
+  onSelectBranch: (path: string) => void;
+  onToggleBranch: (path: string, willOpen: boolean) => void;
+}
+
+function Branch({
+  state, depth, expandedPaths, branches,
+  selectedKey, onSelectLeaf, onSelectBranch, onToggleBranch,
+}: BranchProps) {
+  if (!state) {
+    return null;
+  }
+  if (state.loading && state.children.length === 0) {
+    return <div className="kv-tree-loading" style={{ paddingLeft: depth * 14 + 18 }}>loading…</div>;
+  }
+  if (state.error) {
+    return <div className="kv-tree-error" style={{ paddingLeft: depth * 14 + 18 }}>error: {state.error}</div>;
+  }
+  const visibleChildren = state.children.filter((c) => !isHiddenNode(c));
+  if (visibleChildren.length === 0) {
+    return <div className="kv-tree-empty" style={{ paddingLeft: depth * 14 + 18 }}>(empty)</div>;
+  }
+  return (
+    <ul className="kv-tree-list">
+      {visibleChildren.map((node) => {
+        if (node.kind === 'branch') {
+          const open = expandedPaths.has(node.path);
+          const childState = branches[node.path];
+          return (
+            <li key={node.path}>
+              <div
+                className={`kv-tree-row kv-tree-branch${open ? ' open' : ''}`}
+                style={{ paddingLeft: depth * 14 + 4 }}
+                onClick={() => {
+                  onToggleBranch(node.path, !open);
+                  onSelectBranch(node.path);
+                }}
+              >
+                <span className="kv-tree-toggle">{open ? '▾' : '▸'}</span>
+                <span className="kv-tree-label">{node.label}</span>
+              </div>
+              {open && (
+                <Branch
+                  path={node.path}
+                  state={childState}
+                  depth={depth + 1}
+                  expandedPaths={expandedPaths}
+                  branches={branches}
+                  selectedKey={selectedKey}
+                  onSelectLeaf={onSelectLeaf}
+                  onSelectBranch={onSelectBranch}
+                  onToggleBranch={onToggleBranch}
+                />
+              )}
+            </li>
+          );
+        }
+        const isSelected = node.path === selectedKey;
+        return (
+          <li key={node.path}>
+            <div
+              className={`kv-tree-row kv-tree-leaf${isSelected ? ' selected' : ''}`}
+              style={{ paddingLeft: depth * 14 + 4 }}
+              onClick={() => onSelectLeaf(node.path)}
+            >
+              <span className="kv-tree-leaf-dot">•</span>
+              <span className="kv-tree-label">{node.label}</span>
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+// Helper: given a key path with both ":" and "/" separators, return the list
+// of ancestor branch paths that need to be expanded to reveal it.
+export function ancestorBranches(key: string): string[] {
+  const out: string[] = [];
+  let i = 0;
+  while (i < key.length) {
+    const next = nextSep(key, i);
+    if (next < 0) break;
+    out.push(key.slice(0, next + 1));
+    i = next + 1;
+  }
+  return out;
+}
+
+function nextSep(s: string, from: number): number {
+  let best = -1;
+  for (const d of [':', '/']) {
+    const idx = s.indexOf(d, from);
+    if (idx >= 0 && (best < 0 || idx < best)) best = idx;
+  }
+  return best;
+}
+
+// Memoize the ancestor calculation across renders (used by the search-hit
+// auto-expand).
+export function useAncestorBranches(key: string | null): Set<string> {
+  return useMemo(() => {
+    if (!key) return new Set();
+    return new Set(ancestorBranches(key));
+  }, [key]);
+}
+
+// Re-export for convenience in the shell
+export type { TreeNode };

editor/src/kv/SearchFieldChips.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+
+interface Props {
+  fields: string[];
+  onChange: (fields: string[]) => void;
+}
+
+// Pill list of field names that the value-search uses. Each pill is removable;
+// the inline input adds a new field on Enter or comma. Persisting to
+// localStorage is the parent's responsibility.
+export function SearchFieldChips({ fields, onChange }: Props) {
+  const [input, setInput] = useState('');
+
+  const add = (raw: string) => {
+    const next = raw.trim().replace(/,+$/, '');
+    if (!next) return;
+    if (fields.includes(next)) return;
+    onChange([...fields, next]);
+    setInput('');
+  };
+
+  const remove = (f: string) => onChange(fields.filter((x) => x !== f));
+
+  return (
+    <div className="kv-chips">
+      <span className="kv-chips-label">search in:</span>
+      {fields.map((f) => (
+        <span key={f} className="kv-chip">
+          <code>{f}</code>
+          <button
+            className="kv-chip-x"
+            onClick={() => remove(f)}
+            title={`remove ${f}`}
+            aria-label={`remove ${f}`}
+          >×</button>
+        </span>
+      ))}
+      <input
+        className="kv-chip-input"
+        type="text"
+        value={input}
+        placeholder="+ field"
+        onChange={(e) => {
+          const v = e.target.value;
+          if (v.endsWith(',')) add(v);
+          else setInput(v);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') { e.preventDefault(); add(input); }
+          if (e.key === 'Backspace' && input === '' && fields.length > 0) {
+            remove(fields[fields.length - 1]);
+          }
+        }}
+      />
+    </div>
+  );
+}

editor/src/kv/Toast.tsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { ToastEntry } from './types';
+
+interface Props {
+  toasts: ToastEntry[];
+  onDismiss: (id: number) => void;
+}
+
+export function ToastStack({ toasts, onDismiss }: Props) {
+  return (
+    <div className="kv-toast-stack">
+      {toasts.map((t) => (
+        <Toast key={t.id} entry={t} onDismiss={() => onDismiss(t.id)} />
+      ))}
+    </div>
+  );
+}
+
+function Toast({ entry, onDismiss }: { entry: ToastEntry; onDismiss: () => void }) {
+  useEffect(() => {
+    if (entry.kind === 'error') return;
+    const timer = setTimeout(onDismiss, 4500);
+    return () => clearTimeout(timer);
+  }, [entry.kind, onDismiss]);
+
+  return (
+    <div className={`kv-toast kv-toast-${entry.kind}`}>
+      <div className="kv-toast-row">
+        <span className="kv-toast-text">{entry.text}</span>
+        <button className="kv-toast-close" onClick={onDismiss} aria-label="dismiss">×</button>
+      </div>
+      {entry.details && entry.details.length > 0 && (
+        <ul className="kv-toast-details">
+          {entry.details.slice(0, 8).map((d, i) => <li key={i}>{d}</li>)}
+          {entry.details.length > 8 && <li>… {entry.details.length - 8} more</li>}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+let nextId = 1;
+export function makeToast(kind: ToastEntry['kind'], text: string, details?: string[]): ToastEntry {
+  return { id: nextId++, kind, text, details };
+}

editor/src/kv/typeHeuristics.ts

@@ -0,0 +1,59 @@
+import { FieldType } from './types';
+
+// Path-pattern table. The leftmost segment of the path that matches wins.
+// Order matters: more specific patterns should appear first.
+const PATH_PATTERNS: Array<[RegExp, FieldType]> = [
+  [/(^|\/)(language|lang|audioLang|subLang)$/i, 'lang'],
+  [/(^|\/)(cid_|hash$|sha\d|midhash|md5|crc32)/i, 'hash'],
+  [/(^|\/)(duration|bitrate|fps|width|height|count|size|sizeByte|increment|episode|season|year|runtime|trackId|index)$/i, 'number'],
+  [/(^|\/)(enabled|active|disabled|isHidden|hidden|favorite|watched)$/i, 'bool'],
+  [/(^|\/)(url|uri|href|link|posterUrl|backdropUrl|imageUrl)$/i, 'url'],
+  [/(^|\/)(.+_at|.+At|.+Date|.+Time|timestamp|createdAt|updatedAt)$/i, 'datetime'],
+  [/(^|\/)(description|overview|notes?|comment|summary|nfo)$/i, 'text'],
+];
+
+export function detectFromPath(path: string): FieldType | null {
+  for (const [re, t] of PATH_PATTERNS) {
+    if (re.test(path)) return t;
+  }
+  return null;
+}
+
+export function detectFromValue(v: string): FieldType {
+  if (v === '') return 'string';
+  if (v === 'true' || v === 'false') return 'bool';
+  if (/^-?\d+$/.test(v)) return 'number';
+  if (/^-?\d*\.\d+$/.test(v)) return 'number';
+  if (/^https?:\/\//i.test(v)) return 'url';
+  const trimmed = v.trim();
+  if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+    try { JSON.parse(trimmed); return 'json'; } catch {}
+  }
+  if (v.includes('\n') || v.length > 200) return 'text';
+  return 'string';
+}
+
+// Combine path and value heuristics. Path wins when it matches; otherwise
+// fall back to value shape.
+export function detectType(path: string, value: string): FieldType {
+  return detectFromPath(path) ?? detectFromValue(value);
+}
+
+export const ALL_TYPES: FieldType[] = [
+  'auto', 'string', 'text', 'number', 'bool', 'json', 'url', 'lang', 'datetime', 'hash',
+];
+
+export function describeType(t: FieldType): string {
+  switch (t) {
+    case 'auto': return 'auto';
+    case 'string': return 'string';
+    case 'text': return 'text (multiline)';
+    case 'number': return 'number';
+    case 'bool': return 'bool';
+    case 'json': return 'json';
+    case 'url': return 'url';
+    case 'lang': return 'language code';
+    case 'datetime': return 'datetime';
+    case 'hash': return 'hash / cid';
+  }
+}

editor/src/kv/types.ts

@@ -0,0 +1,19 @@
+// Inferred type for a leaf value. "auto" defers to the heuristic detector.
+export type FieldType =
+  | 'auto'
+  | 'string'
+  | 'number'
+  | 'bool'
+  | 'json'
+  | 'url'
+  | 'text'
+  | 'lang'
+  | 'datetime'
+  | 'hash';
+
+export interface ToastEntry {
+  id: number;
+  kind: 'info' | 'success' | 'error';
+  text: string;
+  details?: string[];
+}

editor/src/main.tsx

@@ -1,10 +1,10 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
-import App from './App.tsx';
+import KVApp from './kv/KVApp.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <KVApp />
   </StrictMode>,
 );

editor/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/kvApi.ts","./src/api/metadataApi.ts","./src/components/BulkMetadataEditor.tsx","./src/components/DynamicFieldRenderer.tsx","./src/components/DynamicPluginSection.tsx","./src/components/FileList.tsx","./src/components/KVTreeView.tsx","./src/components/LanguageCombobox.tsx","./src/components/MetadataEditor.tsx","./src/components/SearchBar.tsx","./src/kv/FilteredKVTree.tsx","./src/kv/KVApp.tsx","./src/kv/KVBranchEditor.tsx","./src/kv/KVLeafEditor.tsx","./src/kv/KVTree.tsx","./src/kv/SearchFieldChips.tsx","./src/kv/Toast.tsx","./src/kv/typeHeuristics.ts","./src/kv/types.ts","./src/types/index.ts","./src/utils/formatting.ts"],"version":"5.9.3"}

internal/api/kv.go

@@ -1,12 +1,14 @@
 package api
 
 import (
+	"encoding/json"
 	"net/http"
 	"net/url"
 	"strconv"
 	"strings"
 
 	"github.com/gorilla/mux"
+	"github.com/metazla/meta-core/internal/storage"
 )
 
 // KVInfoResponse is the response for GET /api/kv/info
@@ -184,3 +186,287 @@ func (s *Server) handleKVGetKey(w http.ResponseWriter, r *http.Request) {
 
 	writeJSON(w, http.StatusOK, response)
 }
+
+// KVTreeResponse is the response for GET /api/kv/tree
+type KVTreeResponse struct {
+	Prefix    string   `json:"prefix"`
+	Delimiter string   `json:"delimiter"`
+	Branches  []string `json:"branches"`
+	Leaves    []string `json:"leaves"`
+	Cursor    string   `json:"cursor"`
+	HasMore   bool     `json:"hasMore"`
+}
+
+// KVSearchResponse is the response for GET /api/kv/search
+type KVSearchResponse struct {
+	Contains  string   `json:"contains"`
+	Keys      []string `json:"keys"`
+	Truncated bool     `json:"truncated"`
+}
+
+// KVFindResponse is the response for GET /api/kv/find
+type KVFindResponse struct {
+	Contains  string             `json:"contains"`
+	Fields    []string           `json:"fields"`
+	Matches   []storage.FindMatch `json:"matches"`
+	Truncated bool               `json:"truncated"`
+}
+
+// KVValueResponse is the response for GET /api/kv/value
+type KVValueResponse struct {
+	Key    string `json:"key"`
+	Type   string `json:"type"`
+	Value  string `json:"value"`
+	Exists bool   `json:"exists"`
+}
+
+// KVValuePutRequest is the body for PUT /api/kv/value
+type KVValuePutRequest struct {
+	Key   string `json:"key"`
+	Value string `json:"value"`
+}
+
+// KVValueDeleteResponse is the response for DELETE /api/kv/value
+type KVValueDeleteResponse struct {
+	Key     string `json:"key"`
+	Deleted bool   `json:"deleted"`
+}
+
+// handleKVTree handles GET /api/kv/tree?prefix=&delimiter=/&cursor=0&max=500
+//
+// Lists the immediate children at prefix. When delimiter is set, keys with a
+// further delimiter are collapsed into branches. Pass the returned cursor back
+// to continue when hasMore is true.
+func (s *Server) handleKVTree(w http.ResponseWriter, r *http.Request) {
+	if !s.storage.IsConnected() {
+		writeError(w, http.StatusServiceUnavailable, "storage not connected")
+		return
+	}
+
+	q := r.URL.Query()
+	prefix := q.Get("prefix")
+	delimiter := q.Get("delimiter")
+	cursor := q.Get("cursor")
+
+	maxResults := 500
+	if v := q.Get("max"); v != "" {
+		if n, err := strconv.Atoi(v); err == nil && n > 0 {
+			maxResults = n
+		}
+	}
+
+	leaves, branches, nextCursor, err := s.storage.ScanKeys(prefix, delimiter, cursor, maxResults)
+	if err != nil {
+		writeError(w, http.StatusInternalServerError, err.Error())
+		return
+	}
+
+	writeJSON(w, http.StatusOK, KVTreeResponse{
+		Prefix:    prefix,
+		Delimiter: delimiter,
+		Branches:  branches,
+		Leaves:    leaves,
+		Cursor:    nextCursor,
+		HasMore:   nextCursor != "0",
+	})
+}
+
+// handleKVFind handles GET /api/kv/find?contains=&fields=a,b,c&limit=200
+//
+// Value-search: scans every key whose path ends with /<field> for each
+// configured field, then returns those whose value contains the substring
+// (case-insensitive). Used as the editor's "filter the view" action.
+func (s *Server) handleKVFind(w http.ResponseWriter, r *http.Request) {
+	if !s.storage.IsConnected() {
+		writeError(w, http.StatusServiceUnavailable, "storage not connected")
+		return
+	}
+
+	q := r.URL.Query()
+	contains := q.Get("contains")
+	if contains == "" {
+		writeError(w, http.StatusBadRequest, "contains is required")
+		return
+	}
+	fieldsParam := q.Get("fields")
+	if fieldsParam == "" {
+		writeError(w, http.StatusBadRequest, "fields is required (comma-separated)")
+		return
+	}
+	fields := strings.Split(fieldsParam, ",")
+	for i := range fields {
+		fields[i] = strings.TrimSpace(fields[i])
+	}
+
+	limit := 200
+	if v := q.Get("limit"); v != "" {
+		if n, err := strconv.Atoi(v); err == nil && n > 0 {
+			limit = n
+		}
+	}
+
+	matches, truncated, err := s.storage.FindByValue(contains, fields, limit)
+	if err != nil {
+		writeError(w, http.StatusInternalServerError, err.Error())
+		return
+	}
+	if matches == nil {
+		matches = []storage.FindMatch{}
+	}
+
+	writeJSON(w, http.StatusOK, KVFindResponse{
+		Contains:  contains,
+		Fields:    fields,
+		Matches:   matches,
+		Truncated: truncated,
+	})
+}
+
+// handleKVSearch handles GET /api/kv/search?contains=&limit=500
+func (s *Server) handleKVSearch(w http.ResponseWriter, r *http.Request) {
+	if !s.storage.IsConnected() {
+		writeError(w, http.StatusServiceUnavailable, "storage not connected")
+		return
+	}
+
+	q := r.URL.Query()
+	contains := q.Get("contains")
+	if contains == "" {
+		writeError(w, http.StatusBadRequest, "contains is required")
+		return
+	}
+
+	limit := 500
+	if v := q.Get("limit"); v != "" {
+		if n, err := strconv.Atoi(v); err == nil && n > 0 {
+			limit = n
+		}
+	}
+
+	keys, truncated, err := s.storage.SearchKeys(contains, limit)
+	if err != nil {
+		writeError(w, http.StatusInternalServerError, err.Error())
+		return
+	}
+
+	writeJSON(w, http.StatusOK, KVSearchResponse{
+		Contains:  contains,
+		Keys:      keys,
+		Truncated: truncated,
+	})
+}
+
+// handleKVValueGet handles GET /api/kv/value?key=...
+func (s *Server) handleKVValueGet(w http.ResponseWriter, r *http.Request) {
+	if !s.storage.IsConnected() {
+		writeError(w, http.StatusServiceUnavailable, "storage not connected")
+		return
+	}
+
+	key := r.URL.Query().Get("key")
+	if key == "" {
+		writeError(w, http.StatusBadRequest, "key is required")
+		return
+	}
+
+	kind, value, exists, err := s.storage.GetKeyInfo(key)
+	if err != nil {
+		writeError(w, http.StatusInternalServerError, err.Error())
+		return
+	}
+
+	writeJSON(w, http.StatusOK, KVValueResponse{
+		Key:    key,
+		Type:   kind,
+		Value:  value,
+		Exists: exists,
+	})
+}
+
+// handleKVValuePut handles PUT /api/kv/value with body {key, value}.
+// Maintains the file index when the key matches file:<hashId>/...
+func (s *Server) handleKVValuePut(w http.ResponseWriter, r *http.Request) {
+	if !s.storage.IsConnected() {
+		writeError(w, http.StatusServiceUnavailable, "storage not connected")
+		return
+	}
+
+	var req KVValuePutRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		writeError(w, http.StatusBadRequest, "invalid JSON body")
+		return
+	}
+	if req.Key == "" {
+		writeError(w, http.StatusBadRequest, "key is required")
+		return
+	}
+
+	if err := s.storage.SetRawValue(req.Key, req.Value); err != nil {
+		writeError(w, http.StatusConflict, err.Error())
+		return
+	}
+
+	if hashID := extractFileHashID(req.Key); hashID != "" {
+		if err := s.storage.IndexAdd(hashID); err != nil {
+			// Non-fatal: the value was written; index entry is best-effort.
+			// Surface in the log path of writeJSON via response header.
+			w.Header().Set("X-KV-Index-Warning", err.Error())
+		}
+	}
+
+	writeJSON(w, http.StatusOK, KVValueResponse{
+		Key:    req.Key,
+		Type:   "string",
+		Value:  req.Value,
+		Exists: true,
+	})
+}
+
+// handleKVValueDelete handles DELETE /api/kv/value?key=...
+// When the key matches file:<hashId>/..., removes the file index entry if no
+// sibling keys remain after the delete.
+func (s *Server) handleKVValueDelete(w http.ResponseWriter, r *http.Request) {
+	if !s.storage.IsConnected() {
+		writeError(w, http.StatusServiceUnavailable, "storage not connected")
+		return
+	}
+
+	key := r.URL.Query().Get("key")
+	if key == "" {
+		writeError(w, http.StatusBadRequest, "key is required")
+		return
+	}
+
+	deleted, err := s.storage.DeleteRawKey(key)
+	if err != nil {
+		writeError(w, http.StatusInternalServerError, err.Error())
+		return
+	}
+
+	if deleted {
+		if hashID := extractFileHashID(key); hashID != "" {
+			if _, err := s.storage.IndexRemoveIfEmpty(hashID); err != nil {
+				w.Header().Set("X-KV-Index-Warning", err.Error())
+			}
+		}
+	}
+
+	writeJSON(w, http.StatusOK, KVValueDeleteResponse{
+		Key:     key,
+		Deleted: deleted,
+	})
+}
+
+// extractFileHashID returns the hashID for a key shaped like file:<hashId>/...
+// Returns "" when the key does not follow that convention.
+func extractFileHashID(key string) string {
+	if !strings.HasPrefix(key, "file:") {
+		return ""
+	}
+	rest := strings.TrimPrefix(key, "file:")
+	slash := strings.Index(rest, "/")
+	if slash <= 0 {
+		return ""
+	}
+	return rest[:slash]
+}

internal/api/server.go

@@ -135,6 +135,12 @@ func (s *Server) setupRoutes() {
 	// KV Browser API routes
 	s.router.HandleFunc("/api/kv/info", s.handleKVInfo).Methods("GET")
 	s.router.HandleFunc("/api/kv/keys", s.handleKVKeys).Methods("GET")
+	s.router.HandleFunc("/api/kv/tree", s.handleKVTree).Methods("GET")
+	s.router.HandleFunc("/api/kv/search", s.handleKVSearch).Methods("GET")
+	s.router.HandleFunc("/api/kv/find", s.handleKVFind).Methods("GET")
+	s.router.HandleFunc("/api/kv/value", s.handleKVValueGet).Methods("GET")
+	s.router.HandleFunc("/api/kv/value", s.handleKVValuePut).Methods("PUT")
+	s.router.HandleFunc("/api/kv/value", s.handleKVValueDelete).Methods("DELETE")
 	s.router.HandleFunc("/api/kv/key/{key:.*}", s.handleKVGetKey).Methods("GET")
 
 	// Metadata operations - base endpoints

internal/storage/client.go

@@ -4,6 +4,8 @@ import (
 	"context"
 	"fmt"
 	"log"
+	"sort"
+	"strconv"
 	"strings"
 	"sync"
 	"time"
@@ -620,6 +622,378 @@ func (c *Client) ClearAllMetadata() (int64, error) {
 	return deletedCount, nil
 }
 
+// ScanKeys lists the immediate children at the given prefix, S3-style.
+//
+// Walks the keyspace under prefix using Redis SCAN. When delimiter is set,
+// keys with a delimiter occurrence after the prefix collapse into a branch
+// path (the prefix up to and including that first delimiter); the rest are
+// returned as leaves. When delimiter is empty all matching keys are leaves.
+//
+// Continues SCAN-ing until either the keyspace is exhausted (nextCursor == "0")
+// or leaves+branches reaches maxResults — whichever comes first. The caller
+// passes nextCursor back to continue. Results are deduped and sorted.
+func (c *Client) ScanKeys(prefix, delimiter, cursorStr string, maxResults int) ([]string, []string, string, error) {
+	c.mu.RLock()
+	defer c.mu.RUnlock()
+
+	if c.client == nil {
+		return nil, nil, "", fmt.Errorf("not connected")
+	}
+
+	if maxResults <= 0 {
+		maxResults = 500
+	}
+
+	var cursor uint64
+	if cursorStr != "" {
+		if v, err := strconv.ParseUint(cursorStr, 10, 64); err == nil {
+			cursor = v
+		}
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 30*time.Second)
+	defer cancel()
+
+	fullPrefix := c.buildKey(prefix)
+	pattern := escapeGlob(fullPrefix) + "*"
+
+	leafSet := make(map[string]struct{})
+	branchSet := make(map[string]struct{})
+
+	for {
+		// SCAN COUNT is a hint; ask for a larger batch when grouping by
+		// delimiter since many keys collapse into one branch.
+		scanCount := int64(maxResults * 4)
+		if scanCount > 5000 {
+			scanCount = 5000
+		}
+		keys, next, err := c.client.Scan(ctx, cursor, pattern, scanCount).Result()
+		if err != nil {
+			return nil, nil, "", fmt.Errorf("scan failed: %w", err)
+		}
+		for _, k := range keys {
+			userKey := strings.TrimPrefix(k, c.prefix)
+			suffix := strings.TrimPrefix(userKey, prefix)
+			if delimiter != "" {
+				if idx := strings.Index(suffix, delimiter); idx >= 0 {
+					branchSet[prefix+suffix[:idx+len(delimiter)]] = struct{}{}
+					continue
+				}
+			}
+			leafSet[userKey] = struct{}{}
+		}
+		cursor = next
+		if cursor == 0 {
+			break
+		}
+		if len(leafSet)+len(branchSet) >= maxResults {
+			break
+		}
+	}
+
+	leaves := make([]string, 0, len(leafSet))
+	for k := range leafSet {
+		leaves = append(leaves, k)
+	}
+	branches := make([]string, 0, len(branchSet))
+	for k := range branchSet {
+		branches = append(branches, k)
+	}
+	sort.Strings(leaves)
+	sort.Strings(branches)
+	return leaves, branches, strconv.FormatUint(cursor, 10), nil
+}
+
+// FindMatch is a single value-search hit.
+type FindMatch struct {
+	Key       string `json:"key"`
+	Value     string `json:"value"`
+	EntryPath string `json:"entryPath"`
+	Field     string `json:"field"`
+}
+
+// FindByValue scans every key whose path ends with /<field> for each field
+// in fields, MGETs them, and returns the keys whose value contains the
+// substring (case-insensitive). Returns truncated when limit was hit before
+// the scan exhausted.
+//
+// EntryPath is the parent prefix up to (and including) the slash before
+// field — i.e. the file branch path. Useful for revealing the matched entry
+// in the tree.
+func (c *Client) FindByValue(contains string, fields []string, limit int) ([]FindMatch, bool, error) {
+	c.mu.RLock()
+	defer c.mu.RUnlock()
+
+	if c.client == nil {
+		return nil, false, fmt.Errorf("not connected")
+	}
+	if contains == "" || len(fields) == 0 {
+		return nil, false, nil
+	}
+	if limit <= 0 {
+		limit = 200
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 60*time.Second)
+	defer cancel()
+
+	needle := strings.ToLower(contains)
+	var matches []FindMatch
+	truncated := false
+
+	for _, field := range fields {
+		field = strings.TrimSpace(field)
+		if field == "" {
+			continue
+		}
+		if len(matches) >= limit {
+			truncated = true
+			break
+		}
+		// Walk all keys ending with /field via SCAN MATCH "*/<field>".
+		pattern := "*/" + escapeGlob(field)
+		if c.prefix != "" {
+			pattern = escapeGlob(c.prefix) + pattern
+		}
+		var keysToFetch []string
+		var cursor uint64
+		for {
+			keys, next, err := c.client.Scan(ctx, cursor, pattern, 1000).Result()
+			if err != nil {
+				return nil, false, fmt.Errorf("scan failed: %w", err)
+			}
+			keysToFetch = append(keysToFetch, keys...)
+			cursor = next
+			if cursor == 0 {
+				break
+			}
+			if len(keysToFetch) > 20000 {
+				break
+			}
+		}
+		// MGET in chunks (Redis limits the number of args per command).
+		for chunkStart := 0; chunkStart < len(keysToFetch); chunkStart += 500 {
+			chunkEnd := chunkStart + 500
+			if chunkEnd > len(keysToFetch) {
+				chunkEnd = len(keysToFetch)
+			}
+			chunk := keysToFetch[chunkStart:chunkEnd]
+			values, err := c.client.MGet(ctx, chunk...).Result()
+			if err != nil {
+				return nil, false, fmt.Errorf("mget failed: %w", err)
+			}
+			for i, v := range values {
+				if v == nil {
+					continue
+				}
+				sv, _ := v.(string)
+				if !strings.Contains(strings.ToLower(sv), needle) {
+					continue
+				}
+				userKey := strings.TrimPrefix(chunk[i], c.prefix)
+				entryPath := strings.TrimSuffix(userKey, field)
+				matches = append(matches, FindMatch{
+					Key:       userKey,
+					Value:     sv,
+					EntryPath: entryPath,
+					Field:     field,
+				})
+				if len(matches) >= limit {
+					truncated = true
+					break
+				}
+			}
+			if truncated {
+				break
+			}
+		}
+	}
+
+	sort.Slice(matches, func(i, j int) bool { return matches[i].Key < matches[j].Key })
+	return matches, truncated, nil
+}
+
+// SearchKeys returns up to limit keys whose full path contains the substring.
+// truncated is true when the search stopped at limit before exhausting Redis.
+func (c *Client) SearchKeys(contains string, limit int) ([]string, bool, error) {
+	c.mu.RLock()
+	defer c.mu.RUnlock()
+
+	if c.client == nil {
+		return nil, false, fmt.Errorf("not connected")
+	}
+
+	if contains == "" {
+		return nil, false, nil
+	}
+	if limit <= 0 {
+		limit = 500
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 30*time.Second)
+	defer cancel()
+
+	pattern := escapeGlob(c.prefix) + "*" + escapeGlob(contains) + "*"
+
+	results := make([]string, 0, limit)
+	truncated := false
+	var cursor uint64
+	for {
+		keys, next, err := c.client.Scan(ctx, cursor, pattern, 1000).Result()
+		if err != nil {
+			return nil, false, fmt.Errorf("scan failed: %w", err)
+		}
+		for _, k := range keys {
+			if len(results) >= limit {
+				truncated = true
+				break
+			}
+			results = append(results, strings.TrimPrefix(k, c.prefix))
+		}
+		cursor = next
+		if truncated || cursor == 0 {
+			break
+		}
+	}
+	sort.Strings(results)
+	return results, truncated, nil
+}
+
+// GetKeyInfo returns the Redis type ("string", "set", "hash", ...) and, for
+// string-typed keys, the value. exists is false when the key is absent.
+func (c *Client) GetKeyInfo(key string) (kind string, value string, exists bool, err error) {
+	c.mu.RLock()
+	defer c.mu.RUnlock()
+
+	if c.client == nil {
+		return "", "", false, fmt.Errorf("not connected")
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	full := c.buildKey(key)
+	t, err := c.client.Type(ctx, full).Result()
+	if err != nil {
+		return "", "", false, fmt.Errorf("type failed: %w", err)
+	}
+	if t == "none" {
+		return "", "", false, nil
+	}
+	if t != "string" {
+		return t, "", true, nil
+	}
+	v, err := c.client.Get(ctx, full).Result()
+	if err == redis.Nil {
+		return "", "", false, nil
+	}
+	if err != nil {
+		return "", "", false, fmt.Errorf("get failed: %w", err)
+	}
+	return "string", v, true, nil
+}
+
+// SetRawValue writes a string value at the exact key. Refuses to overwrite a
+// key whose existing Redis type is not "string".
+func (c *Client) SetRawValue(key, value string) error {
+	c.mu.Lock()
+	defer c.mu.Unlock()
+
+	if c.client == nil {
+		return fmt.Errorf("not connected")
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	full := c.buildKey(key)
+	t, err := c.client.Type(ctx, full).Result()
+	if err != nil {
+		return fmt.Errorf("type failed: %w", err)
+	}
+	if t != "none" && t != "string" {
+		return fmt.Errorf("key has incompatible type %q (only string is editable)", t)
+	}
+	return c.client.Set(ctx, full, value, 0).Err()
+}
+
+// DeleteRawKey deletes the exact key. Returns true if the key existed.
+func (c *Client) DeleteRawKey(key string) (bool, error) {
+	c.mu.Lock()
+	defer c.mu.Unlock()
+
+	if c.client == nil {
+		return false, fmt.Errorf("not connected")
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	n, err := c.client.Del(ctx, c.buildKey(key)).Result()
+	if err != nil {
+		return false, err
+	}
+	return n > 0, nil
+}
+
+// IndexAdd adds a hash ID to the file index set. Idempotent.
+func (c *Client) IndexAdd(hashID string) error {
+	c.mu.Lock()
+	defer c.mu.Unlock()
+
+	if c.client == nil {
+		return fmt.Errorf("not connected")
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	return c.client.SAdd(ctx, c.buildIndexKey(), hashID).Err()
+}
+
+// IndexRemoveIfEmpty removes hashID from the index set when no
+// file:<hashID>/* keys remain. Returns true if the index entry was removed.
+func (c *Client) IndexRemoveIfEmpty(hashID string) (bool, error) {
+	c.mu.Lock()
+	defer c.mu.Unlock()
+
+	if c.client == nil {
+		return false, fmt.Errorf("not connected")
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	prefix := c.buildKeyPrefix(hashID)
+	keys, _, err := c.client.Scan(ctx, 0, prefix+"*", 1).Result()
+	if err != nil {
+		return false, fmt.Errorf("scan failed: %w", err)
+	}
+	if len(keys) > 0 {
+		return false, nil
+	}
+	removed, err := c.client.SRem(ctx, c.buildIndexKey(), hashID).Result()
+	if err != nil {
+		return false, fmt.Errorf("srem failed: %w", err)
+	}
+	return removed > 0, nil
+}
+
+// escapeGlob escapes Redis SCAN MATCH glob metacharacters so a literal string
+// can be embedded inside a pattern. Redis uses *, ?, [, \ as metacharacters.
+func escapeGlob(s string) string {
+	var b strings.Builder
+	b.Grow(len(s))
+	for _, r := range s {
+		switch r {
+		case '*', '?', '[', ']', '\\':
+			b.WriteByte('\\')
+		}
+		b.WriteRune(r)
+	}
+	return b.String()
+}
+
 // GetRedisClient returns the underlying redis client for advanced operations
 func (c *Client) GetRedisClient() *redis.Client {
 	c.mu.RLock()