@bod.ee/db 0.12.8 → 0.13.1

package/admin/src/components/tabs/TabPane.tsx

@@ -0,0 +1,151 @@
+import { useState, useEffect } from 'react';
+import ReadWrite from './ReadWrite';
+import Query from './Query';
+import Subscriptions from './Subscriptions';
+import AuthRules from './AuthRules';
+import Advanced from './Advanced';
+import Streams from './Streams';
+import MessageQueue from './MessageQueue';
+import Replication from './Replication';
+import VFS from './VFS';
+import Cache from './Cache';
+import KeyAuth from './KeyAuth';
+import StressTests from './StressTests';
+import View from './View';
+
+const TABS = [
+  { id: 'rw', label: 'Read / Write' },
+  { id: 'query', label: 'Query Builder' },
+  { id: 'subs', label: 'Live Subscriptions' },
+  { id: 'auth', label: 'Auth & Rules' },
+  { id: 'advanced', label: 'Advanced' },
+  { id: 'streams', label: 'Streams' },
+  { id: 'mq', label: 'MQ' },
+  { id: 'repl', label: 'Replication' },
+  { id: 'vfs', label: 'VFS' },
+  { id: 'cache', label: 'Cache' },
+  { id: 'keyauth', label: 'KeyAuth' },
+  { id: 'stress', label: 'Stress Tests' },
+  { id: 'view', label: 'View' },
+];
+
+const PERSIST_FIELDS = ['rw-path','rw-value','upd-value','q-path','sub-path','auth-test-path','rw-auth-token','auth-token','push-path','push-value','batch-value','tf-path','tf-value','ttl-path','ttl-value','fts-path','fts-content','fts-query','fts-prefix','vec-path','vec-embedding','vec-query','vec-prefix'];
+const DEFAULT_VALUES: Record<string, string> = {
+  'rw-path': 'users/alice',
+  'rw-value': '{ "name": "Alice", "age": 30, "role": "admin" }',
+  'upd-value': '{ "users/alice/age": 31, "users/bob/role": "admin" }',
+  'q-path': 'users',
+  'sub-path': 'users',
+  'auth-test-path': 'users/alice',
+  'push-path': 'logs',
+  'push-value': `{ "level": "info", "msg": "hello from admin", "ts": ${Date.now()} }`,
+  'batch-value': '[\n  { "op": "set", "path": "counters/views", "value": 42 },\n  { "op": "push", "path": "logs", "value": { "msg": "batch test" } }\n]',
+  'tf-path': 'counters/likes',
+  'tf-value': '1',
+  'ttl-path': 'sessions/demo',
+  'ttl-value': '{ "token": "abc123", "user": "alice" }',
+  'fts-path': 'users/alice',
+  'fts-content': 'Alice is an admin user who manages the system',
+  'fts-query': 'admin',
+  'fts-prefix': 'users',
+  'vec-path': 'users/alice',
+  'vec-embedding': JSON.stringify(Array.from({ length: 384 }, (_, i) => +(Math.sin(i * 0.1) * 0.5).toFixed(4))),
+  'vec-query': JSON.stringify(Array.from({ length: 384 }, (_, i) => +(Math.sin(i * 0.1) * 0.5).toFixed(4))),
+  'vec-prefix': 'users',
+};
+
+function persistFields() {
+  const state: Record<string, string> = {};
+  for (const id of PERSIST_FIELDS) {
+    const el = document.getElementById(id) as HTMLInputElement;
+    if (el) state[id] = el.value;
+  }
+  localStorage.setItem('zuzdb:fields', JSON.stringify(state));
+}
+
+function restoreFields() {
+  const saved = localStorage.getItem('zuzdb:fields');
+  try {
+    const state = JSON.parse(saved ?? '{}');
+    const hasState = saved && Object.keys(state).some((k) => state[k]);
+    for (const id of PERSIST_FIELDS) {
+      const el = document.getElementById(id) as HTMLInputElement;
+      if (!el) continue;
+      if (hasState && state[id]) el.value = state[id];
+      else if (DEFAULT_VALUES[id]) el.value = DEFAULT_VALUES[id];
+    }
+  } catch {}
+}
+
+export default function TabPane() {
+  const [activeTab, setActiveTab] = useState(() => {
+    return new URLSearchParams(location.search).get('tab') || localStorage.getItem('zuzdb:tab') || 'rw';
+  });
+
+  function showTab(id: string) {
+    setActiveTab(id);
+    const url = new URL(location.href);
+    url.searchParams.set('tab', id);
+    history.replaceState(null, '', url);
+    localStorage.setItem('zuzdb:tab', id);
+  }
+
+  // Restore field values after render
+  useEffect(() => {
+    restoreFields();
+    // Attach persist listeners
+    for (const id of PERSIST_FIELDS) {
+      const el = document.getElementById(id);
+      if (el) el.addEventListener('input', persistFields);
+    }
+    return () => {
+      for (const id of PERSIST_FIELDS) {
+        const el = document.getElementById(id);
+        if (el) el.removeEventListener('input', persistFields);
+      }
+    };
+  }, [activeTab]);
+
+  // Listen for programmatic tab switches (from tree selectPath)
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const tab = (e as CustomEvent).detail as string;
+      showTab(tab);
+    };
+    window.addEventListener('zuzdb:tab', handler);
+    window.addEventListener('zuzdb:selectPath', () => showTab('view'));
+    return () => {
+      window.removeEventListener('zuzdb:tab', handler);
+    };
+  }, []);
+
+  return (
+    <>
+      <div className="tabs">
+        {TABS.map(t => (
+          <div
+            key={t.id}
+            className={`tab${activeTab === t.id ? ' active' : ''}`}
+            onClick={() => showTab(t.id)}
+          >
+            {t.label}
+          </div>
+        ))}
+      </div>
+
+      <div className={`panel${activeTab === 'rw' ? ' active' : ''}`} id="panel-rw"><ReadWrite /></div>
+      <div className={`panel${activeTab === 'query' ? ' active' : ''}`} id="panel-query"><Query /></div>
+      <div className={`panel${activeTab === 'subs' ? ' active' : ''}`} id="panel-subs"><Subscriptions /></div>
+      <div className={`panel${activeTab === 'auth' ? ' active' : ''}`} id="panel-auth"><AuthRules active={activeTab === 'auth'} /></div>
+      <div className={`panel${activeTab === 'advanced' ? ' active' : ''}`} id="panel-advanced"><Advanced /></div>
+      <div className={`panel${activeTab === 'streams' ? ' active' : ''}`} id="panel-streams"><Streams /></div>
+      <div className={`panel${activeTab === 'mq' ? ' active' : ''}`} id="panel-mq"><MessageQueue /></div>
+      <div className={`panel${activeTab === 'repl' ? ' active' : ''}`} id="panel-repl"><Replication active={activeTab === 'repl'} /></div>
+      <div className={`panel${activeTab === 'vfs' ? ' active' : ''}`} id="panel-vfs"><VFS active={activeTab === 'vfs'} /></div>
+      <div className={`panel${activeTab === 'cache' ? ' active' : ''}`} id="panel-cache"><Cache /></div>
+      <div className={`panel${activeTab === 'keyauth' ? ' active' : ''}`} id="panel-keyauth"><KeyAuth active={activeTab === 'keyauth'} /></div>
+      <div className={`panel${activeTab === 'stress' ? ' active' : ''}`} id="panel-stress"><StressTests /></div>
+      <div className={`panel${activeTab === 'view' ? ' active' : ''}`} id="panel-view"><View /></div>
+    </>
+  );
+}

package/admin/src/components/tabs/VFS.tsx

@@ -0,0 +1,435 @@
+import { useEffect, useRef } from 'react';
+import { showStatus, apiFetch } from './utils';
+
+interface Props { active: boolean; }
+
+interface VfsItem {
+  name: string;
+  isDir: boolean;
+  size?: number;
+  mime?: string;
+  mtime?: number | string;
+}
+
+function vfsFormatSize(b?: number): string {
+  if (b == null) return '—';
+  if (b < 1024) return b + ' B';
+  if (b < 1024 * 1024) return (b / 1024).toFixed(1) + ' KB';
+  return (b / (1024 * 1024)).toFixed(1) + ' MB';
+}
+
+function vfsFormatDate(ts?: number | string): string {
+  if (!ts) return '';
+  const d = new Date(typeof ts === 'number' ? ts : ts);
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
+export default function VFS({ active }: Props) {
+  const vfsPathRef = useRef('');
+  const vfsSelectedRef = useRef<(VfsItem & { fullPath: string }) | null>(null);
+  const vfsItemsRef = useRef<VfsItem[]>([]);
+
+  useEffect(() => { if (active) vfsNavigate(''); }, [active]);
+
+  async function vfsNavigate(path: string) {
+    vfsPathRef.current = (path || '').replace(/^\/+|\/+$/g, '');
+    vfsSelectedRef.current = null;
+    const previewEl = document.getElementById('vfs-preview') as HTMLElement;
+    if (previewEl) previewEl.style.display = 'none';
+
+    // Breadcrumb
+    const bc = document.getElementById('vfs-breadcrumb') as HTMLElement;
+    const segs = vfsPathRef.current ? vfsPathRef.current.split('/') : [];
+    let bcHtml = `<span style="cursor:pointer;color:#569cd6" data-path="">&#47;</span>`;
+    let built = '';
+    for (let i = 0; i < segs.length; i++) {
+      built += (i ? '/' : '') + segs[i];
+      const p = built;
+      bcHtml += ` &gt; <span style="cursor:pointer;color:#569cd6" data-path="${p}">${segs[i]}</span>`;
+    }
+    bc.innerHTML = bcHtml;
+    bc.querySelectorAll('span[data-path]').forEach(s => {
+      s.addEventListener('click', () => vfsNavigate((s as HTMLElement).dataset.path || ''));
+    });
+
+    const tbl = document.getElementById('vfs-table') as HTMLElement;
+    const t0 = performance.now();
+    try {
+      const json = await apiFetch('/files/' + (vfsPathRef.current || '') + '?list=1');
+      const ms = performance.now() - t0;
+      if (!json.ok) { tbl.innerHTML = `<div style="padding:12px;color:#f44">Error: ${json.error || 'Failed'}</div>`; return; }
+      const items = (json.data as VfsItem[]) || [];
+      items.sort((a, b) => {
+        if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+        return (a.name || '').localeCompare(b.name || '');
+      });
+      vfsItemsRef.current = items;
+      showStatus('vfs-explorer-status', items.length + ' items', true, ms);
+      if (!items.length) {
+        tbl.innerHTML = '<div style="padding:20px;text-align:center;color:#555">Empty directory</div>';
+        return;
+      }
+      const svgDl = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
+      const svgRn = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.83 2.83 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>';
+      const svgDel = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/></svg>';
+      const btnBase = 'display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0';
+      let rows = '<table style="width:100%;border-collapse:collapse"><tbody>';
+      for (let idx = 0; idx < items.length; idx++) {
+        const item = items[idx];
+        const icon = item.isDir ? '📁' : '📄';
+        const fp = (vfsPathRef.current ? vfsPathRef.current + '/' + item.name : item.name);
+        const dlStyle = item.isDir ? btnBase + ';visibility:hidden' : btnBase;
+        const actions = `<span class="vfs-row-actions" style="display:flex;gap:3px;align-items:center;visibility:hidden">
+          <button class="sm" style="${dlStyle}" data-action="download" data-idx="${idx}" data-fp="${fp}" title="Download">${svgDl}</button>
+          <button class="sm" style="${btnBase}" data-action="rename" data-idx="${idx}" data-fp="${fp}" title="Rename">${svgRn}</button>
+          <button class="danger sm" style="${btnBase}" data-action="delete" data-idx="${idx}" data-fp="${fp}" title="Delete">${svgDel}</button>
+        </span>`;
+        rows += `<tr style="cursor:pointer;padding:0;border-bottom:1px solid #1a1a1a;height:34px" data-idx="${idx}" data-fp="${fp}" data-isdir="${item.isDir}">
+          <td style="width:28px;padding:6px 4px 6px 10px">${icon}</td>
+          <td style="color:#ccc;padding:6px 4px">${item.name || ''}</td>
+          <td style="width:70px;text-align:right;color:#888;padding:6px 4px">${item.isDir ? '' : vfsFormatSize(item.size)}</td>
+          <td style="width:70px;text-align:right;color:#666;padding:6px 4px">${vfsFormatDate(item.mtime)}</td>
+          <td style="width:90px;text-align:right;padding:6px 10px 6px 4px">${actions}</td>
+        </tr>`;
+      }
+      rows += '</tbody></table>';
+      tbl.innerHTML = rows;
+
+      // Attach events
+      tbl.querySelectorAll('tr[data-idx]').forEach(tr => {
+        const el = tr as HTMLElement;
+        el.addEventListener('mouseover', () => {
+          el.style.background = '#1e1e1e';
+          (el.querySelector('.vfs-row-actions') as HTMLElement)?.style.setProperty('visibility', 'visible');
+        });
+        el.addEventListener('mouseout', () => {
+          el.style.background = '';
+          (el.querySelector('.vfs-row-actions') as HTMLElement)?.style.setProperty('visibility', 'hidden');
+        });
+        el.addEventListener('click', (e) => {
+          const actionBtn = (e.target as HTMLElement).closest('[data-action]') as HTMLElement;
+          if (actionBtn) {
+            e.stopPropagation();
+            const idx = Number(actionBtn.dataset.idx);
+            const fp = actionBtn.dataset.fp!;
+            const action = actionBtn.dataset.action!;
+            vfsItemsRef.current[idx] && (vfsSelectedRef.current = { ...vfsItemsRef.current[idx], fullPath: fp });
+            if (action === 'download') vfsDownload();
+            else if (action === 'rename') vfsRename();
+            else if (action === 'delete' && confirm('Delete ' + vfsItemsRef.current[idx].name + '?')) vfsDeleteSel();
+          } else {
+            const idx = Number(el.dataset.idx);
+            const fp = el.dataset.fp!;
+            if (el.dataset.isdir === 'true') vfsNavigate(fp);
+            else vfsPreview(idx, fp);
+          }
+        });
+      });
+    } catch (e: unknown) {
+      tbl.innerHTML = `<div style="padding:12px;color:#f44">${(e as Error).message}</div>`;
+    }
+  }
+
+  async function vfsPreview(idx: number, fullPath: string) {
+    vfsSelectedRef.current = { ...vfsItemsRef.current[idx], fullPath };
+    const item = vfsSelectedRef.current;
+    const panel = document.getElementById('vfs-preview') as HTMLElement;
+    const body = document.getElementById('vfs-preview-body') as HTMLElement;
+    (document.getElementById('vfs-preview-name') as HTMLElement).textContent = item.name;
+    (document.getElementById('vfs-preview-info') as HTMLElement).textContent = vfsFormatSize(item.size) + (item.mime ? ' · ' + item.mime : '');
+    panel.style.display = 'block';
+    body.textContent = 'Loading…';
+    const textTypes = ['text/', 'application/json', 'application/xml', 'application/javascript', 'application/typescript', 'application/yaml', 'application/toml'];
+    const isText = !item.mime || textTypes.some(t => (item.mime || '').startsWith(t)) || (item.size || 0) === 0;
+    if (isText && (item.size || 0) > 0) {
+      try {
+        const res = await fetch('/files/' + fullPath);
+        if (!res.ok) { body.textContent = 'Failed to load'; return; }
+        const text = await res.text();
+        body.textContent = text.length > 50000 ? text.slice(0, 50000) + '\n… (truncated)' : text;
+      } catch (e: unknown) { body.textContent = (e as Error).message; }
+    } else if ((item.size || 0) === 0) {
+      body.textContent = '(empty file)';
+    } else {
+      body.textContent = `Binary file · ${vfsFormatSize(item.size)} · ${item.mime || 'unknown type'}\n\nUse Download to save.`;
+    }
+  }
+
+  async function vfsUploadHere() {
+    const fileInput = document.getElementById('vfs-upload-file') as HTMLInputElement;
+    if (!fileInput.files?.length) return;
+    const file = fileInput.files[0];
+    const path = (vfsPathRef.current ? vfsPathRef.current + '/' : '') + file.name;
+    const t0 = performance.now();
+    try {
+      const json = await apiFetch('/files/' + path, { method: 'POST', body: file, headers: { 'Content-Type': file.type || 'application/octet-stream' } });
+      showStatus('vfs-explorer-status', json.ok ? 'Uploaded ' + file.name : (json.error as string || 'Failed'), !!json.ok, performance.now() - t0);
+    } catch (e: unknown) { showStatus('vfs-explorer-status', (e as Error).message, false, performance.now() - t0); }
+    fileInput.value = '';
+    vfsNavigate(vfsPathRef.current);
+  }
+
+  async function vfsSyncFolder() {
+    if (!(window as unknown as { showDirectoryPicker?: () => Promise<FileSystemDirectoryHandle> }).showDirectoryPicker) { alert('Browser does not support directory picker (use Chrome/Edge)'); return; }
+    let dirHandle: FileSystemDirectoryHandle;
+    try { dirHandle = await (window as unknown as { showDirectoryPicker: () => Promise<FileSystemDirectoryHandle> }).showDirectoryPicker(); }
+    catch { return; }
+    const basePath = vfsPathRef.current ? vfsPathRef.current + '/' + dirHandle.name : dirHandle.name;
+    async function collectFiles(handle: FileSystemDirectoryHandle, prefix: string): Promise<Array<{ path: string; handle: FileSystemFileHandle }>> {
+      const files: Array<{ path: string; handle: FileSystemFileHandle }> = [];
+      for await (const [name, entry] of (handle as unknown as Iterable<[string, FileSystemHandle]>)) {
+        const path = prefix ? prefix + '/' + name : name;
+        if (entry.kind === 'file') files.push({ path, handle: entry as FileSystemFileHandle });
+        else files.push(...await collectFiles(entry as FileSystemDirectoryHandle, path));
+      }
+      return files;
+    }
+    showStatus('vfs-explorer-status', 'Scanning folder…', true);
+    const files = await collectFiles(dirHandle, '');
+    if (!files.length) { showStatus('vfs-explorer-status', 'Folder is empty', false); return; }
+    const t0 = performance.now();
+    let ok = 0, fail = 0;
+    showStatus('vfs-explorer-status', 'Uploading 0/' + files.length + '…', true);
+    for (let i = 0; i < files.length; i += 5) {
+      const batch = files.slice(i, i + 5);
+      const results = await Promise.allSettled(batch.map(async (f) => {
+        const file = await f.handle.getFile();
+        const json = await apiFetch('/files/' + basePath + '/' + f.path, { method: 'POST', body: file, headers: { 'Content-Type': file.type || 'application/octet-stream' } });
+        if (!json.ok) throw new Error(json.error as string);
+      }));
+      for (const r of results) r.status === 'fulfilled' ? ok++ : fail++;
+      showStatus('vfs-explorer-status', 'Uploading ' + (ok + fail) + '/' + files.length + '…', true);
+    }
+    showStatus('vfs-explorer-status', 'Synced ' + ok + ' files' + (fail ? ', ' + fail + ' failed' : ''), !fail, performance.now() - t0);
+    vfsNavigate(vfsPathRef.current);
+  }
+
+  async function vfsMkdirHere() {
+    const name = prompt('Folder name:');
+    if (!name) return;
+    const path = (vfsPathRef.current ? vfsPathRef.current + '/' : '') + name;
+    const t0 = performance.now();
+    try {
+      const json = await apiFetch('/files/' + path + '?mkdir=1', { method: 'POST' });
+      showStatus('vfs-explorer-status', json.ok ? 'Created ' + name : (json.error as string || 'Failed'), !!json.ok, performance.now() - t0);
+    } catch (e: unknown) { showStatus('vfs-explorer-status', (e as Error).message, false, performance.now() - t0); }
+    vfsNavigate(vfsPathRef.current);
+  }
+
+  async function vfsDownload() {
+    if (!vfsSelectedRef.current) return;
+    const t0 = performance.now();
+    try {
+      const res = await fetch('/files/' + vfsSelectedRef.current.fullPath);
+      if (!res.ok) return showStatus('vfs-explorer-status', 'Not found', false, performance.now() - t0);
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a'); a.href = url; a.download = vfsSelectedRef.current.name;
+      document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
+      showStatus('vfs-explorer-status', 'Downloaded ' + vfsSelectedRef.current.name + ' (' + vfsFormatSize(blob.size) + ')', true, performance.now() - t0);
+    } catch (e: unknown) { showStatus('vfs-explorer-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function vfsRename() {
+    if (!vfsSelectedRef.current) return;
+    const newName = prompt('New name:', vfsSelectedRef.current.name);
+    if (!newName || newName === vfsSelectedRef.current.name) return;
+    const dst = (vfsPathRef.current ? vfsPathRef.current + '/' : '') + newName;
+    const t0 = performance.now();
+    try {
+      const json = await apiFetch('/files/' + vfsSelectedRef.current.fullPath + '?move=' + encodeURIComponent(dst), { method: 'PUT' });
+      showStatus('vfs-explorer-status', json.ok ? 'Renamed → ' + newName : (json.error as string || 'Failed'), !!json.ok, performance.now() - t0);
+    } catch (e: unknown) { showStatus('vfs-explorer-status', (e as Error).message, false, performance.now() - t0); }
+    vfsNavigate(vfsPathRef.current);
+  }
+
+  async function vfsDeleteSel() {
+    if (!vfsSelectedRef.current) return;
+    const t0 = performance.now();
+    try {
+      const json = await apiFetch('/files/' + vfsSelectedRef.current.fullPath, { method: 'DELETE' });
+      showStatus('vfs-explorer-status', json.ok ? 'Deleted ' + vfsSelectedRef.current.name : (json.error as string || 'Failed'), !!json.ok, performance.now() - t0);
+    } catch (e: unknown) { showStatus('vfs-explorer-status', (e as Error).message, false, performance.now() - t0); }
+    vfsSelectedRef.current = null;
+    (document.getElementById('vfs-preview') as HTMLElement).style.display = 'none';
+    vfsNavigate(vfsPathRef.current);
+  }
+
+  // Advanced API ops
+  async function doVfsUpload() {
+    const path = (document.getElementById('vfs-upload-path') as HTMLInputElement).value.trim();
+    const fileInput = document.getElementById('vfs-adv-upload-file') as HTMLInputElement;
+    if (!path) return showStatus('vfs-upload-status', 'Path required', false);
+    if (!fileInput.files?.length) return showStatus('vfs-upload-status', 'Select a file', false);
+    const file = fileInput.files[0];
+    const t0 = performance.now();
+    try {
+      const json = await apiFetch('/files/' + path, { method: 'POST', body: file, headers: { 'Content-Type': file.type || 'application/octet-stream' } });
+      const ms = performance.now() - t0;
+      if (json.ok) {
+        for (const id of ['vfs-download-path','vfs-stat-path','vfs-delete-path','vfs-move-src']) (document.getElementById(id) as HTMLInputElement).value = path;
+        const dir = path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : '';
+        (document.getElementById('vfs-list-path') as HTMLInputElement).value = dir || '/';
+      }
+      const d = json.data as { size: number; mime: string } | undefined;
+      showStatus('vfs-upload-status', json.ok ? `Uploaded ${d?.size} bytes (${d?.mime})` : (json.error as string || 'Failed'), !!json.ok, ms);
+    } catch (e: unknown) { showStatus('vfs-upload-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doVfsDownload() {
+    const path = (document.getElementById('vfs-download-path') as HTMLInputElement).value.trim();
+    if (!path) return showStatus('vfs-download-status', 'Path required', false);
+    const t0 = performance.now();
+    try {
+      const res = await fetch('/files/' + path);
+      if (!res.ok) { showStatus('vfs-download-status', 'Not found', false, performance.now() - t0); return; }
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a'); a.href = url; a.download = path.split('/').pop()!;
+      document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
+      showStatus('vfs-download-status', `Downloaded ${blob.size} bytes`, true, performance.now() - t0);
+    } catch (e: unknown) { showStatus('vfs-download-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doVfsStat() {
+    const path = (document.getElementById('vfs-stat-path') as HTMLInputElement).value.trim();
+    if (!path) return showStatus('vfs-stat-status', 'Path required', false);
+    const t0 = performance.now();
+    try {
+      const json = await apiFetch('/files/' + path + '?stat=1');
+      const ms = performance.now() - t0;
+      const el = document.getElementById('vfs-stat-result') as HTMLElement;
+      if (json.ok) { el.style.display = 'block'; el.textContent = JSON.stringify(json.data, null, 2); }
+      else { el.style.display = 'none'; }
+      const d = json.data as { isDir: boolean; name: string; size: number } | undefined;
+      showStatus('vfs-stat-status', json.ok ? `${d?.isDir ? 'Dir' : 'File'}: ${d?.name} (${d?.size}b)` : (json.error as string || 'Not found'), !!json.ok, ms);
+    } catch (e: unknown) { showStatus('vfs-stat-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doVfsList() {
+    const path = (document.getElementById('vfs-list-path') as HTMLInputElement).value.trim();
+    if (!path) return showStatus('vfs-list-status', 'Path required', false);
+    const t0 = performance.now();
+    try {
+      const json = await apiFetch('/files/' + path + '?list=1');
+      const ms = performance.now() - t0;
+      const el = document.getElementById('vfs-list-result') as HTMLElement;
+      if (json.ok) { el.style.display = 'block'; el.textContent = JSON.stringify(json.data, null, 2); }
+      else { el.style.display = 'none'; }
+      showStatus('vfs-list-status', json.ok ? `${(json.data as unknown[]).length} entries` : (json.error as string || 'Failed'), !!json.ok, ms);
+    } catch (e: unknown) { showStatus('vfs-list-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doVfsMkdir() {
+    const path = (document.getElementById('vfs-mkdir-path') as HTMLInputElement).value.trim();
+    if (!path) return showStatus('vfs-mkdir-status', 'Path required', false);
+    const t0 = performance.now();
+    try {
+      const json = await apiFetch('/files/' + path + '?mkdir=1', { method: 'POST' });
+      showStatus('vfs-mkdir-status', json.ok ? `Created: ${path}` : (json.error as string || 'Failed'), !!json.ok, performance.now() - t0);
+    } catch (e: unknown) { showStatus('vfs-mkdir-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doVfsMove() {
+    const src = (document.getElementById('vfs-move-src') as HTMLInputElement).value.trim();
+    const dst = (document.getElementById('vfs-move-dst') as HTMLInputElement).value.trim();
+    if (!src || !dst) return showStatus('vfs-move-status', 'Both paths required', false);
+    const t0 = performance.now();
+    try {
+      const json = await apiFetch('/files/' + src + '?move=' + encodeURIComponent(dst), { method: 'PUT' });
+      showStatus('vfs-move-status', json.ok ? `Moved → ${(json.data as { path: string }).path}` : (json.error as string || 'Failed'), !!json.ok, performance.now() - t0);
+    } catch (e: unknown) { showStatus('vfs-move-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doVfsDelete() {
+    const path = (document.getElementById('vfs-delete-path') as HTMLInputElement).value.trim();
+    if (!path) return showStatus('vfs-delete-status', 'Path required', false);
+    const t0 = performance.now();
+    try {
+      const json = await apiFetch('/files/' + path, { method: 'DELETE' });
+      showStatus('vfs-delete-status', json.ok ? `Deleted: ${path}` : (json.error as string || 'Failed'), !!json.ok, performance.now() - t0);
+    } catch (e: unknown) { showStatus('vfs-delete-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  return (
+    <>
+      <div id="vfs-toolbar" style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
+        <div id="vfs-breadcrumb" style={{ flex: 1, fontSize: 13, color: '#ccc', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}></div>
+        <input id="vfs-upload-file" type="file" style={{ display: 'none' }} onChange={vfsUploadHere} />
+        <button className="success sm" onClick={() => (document.getElementById('vfs-upload-file') as HTMLInputElement).click()}>Upload</button>
+        <button className="sm" onClick={vfsSyncFolder}>Sync Folder</button>
+        <button className="sm" onClick={vfsMkdirHere}>New Folder</button>
+        <button className="sm icon" onClick={() => vfsNavigate(vfsPathRef.current)} title="Reload">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
+        </button>
+      </div>
+      <div id="vfs-table" style={{ border: '1px solid #222', borderRadius: 3, overflow: 'auto', maxHeight: 320, fontSize: 12 }}>
+        <div style={{ padding: 20, textAlign: 'center', color: '#555' }}>Loading…</div>
+      </div>
+      <div id="vfs-explorer-status" style={{ marginTop: 4 }}></div>
+      <div id="vfs-preview" style={{ display: 'none', marginTop: 6, border: '1px solid #222', borderRadius: 3, overflow: 'hidden' }}>
+        <div id="vfs-preview-header" style={{ padding: '6px 10px', borderBottom: '1px solid #222', display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
+          <span id="vfs-preview-name" style={{ color: '#569cd6', fontWeight: 'bold' }}></span>
+          <span id="vfs-preview-info" style={{ color: '#888' }}></span>
+          <span style={{ flex: 1 }}></span>
+          <button className="sm" onClick={vfsDownload}>Download</button>
+          <button className="sm" onClick={vfsRename}>Rename</button>
+          <button className="danger sm" onClick={() => { if (confirm('Delete?')) vfsDeleteSel(); }}>Delete</button>
+          <button className="sm" onClick={() => { (document.getElementById('vfs-preview') as HTMLElement).style.display = 'none'; }}>✕</button>
+        </div>
+        <div id="vfs-preview-body" style={{ padding: 10, maxHeight: 250, overflow: 'auto', fontSize: 12, color: '#ccc', whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}></div>
+      </div>
+      <details style={{ marginTop: 12 }}>
+        <summary style={{ cursor: 'pointer', color: '#888', fontSize: 11 }}>Advanced (raw API)</summary>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 8 }}>
+          <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+            <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Upload File</label>
+            <div className="row">
+              <input id="vfs-upload-path" type="text" placeholder="docs/readme.txt" style={{ flex: 2 }} />
+              <input id="vfs-adv-upload-file" type="file" style={{ flex: 2 }} onChange={(e) => { if (e.target.files?.[0]) (document.getElementById('vfs-upload-path') as HTMLInputElement).value = e.target.files[0].name; }} />
+              <button className="success" onClick={doVfsUpload}>UPLOAD</button>
+            </div>
+            <div id="vfs-upload-status" style={{ marginTop: 4 }}></div>
+          </div>
+          <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+            <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Download File</label>
+            <div className="row"><input id="vfs-download-path" type="text" placeholder="docs/readme.txt" style={{ flex: 2 }} /><button onClick={doVfsDownload}>DOWNLOAD</button></div>
+            <div id="vfs-download-status" style={{ marginTop: 4 }}></div>
+          </div>
+          <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+            <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Stat</label>
+            <div className="row"><input id="vfs-stat-path" type="text" placeholder="docs/readme.txt" style={{ flex: 2 }} /><button onClick={doVfsStat}>STAT</button></div>
+            <div id="vfs-stat-status" style={{ marginTop: 4 }}></div>
+            <div className="result" id="vfs-stat-result" style={{ marginTop: 4, display: 'none', maxHeight: 200 }}>—</div>
+          </div>
+          <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+            <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>List Directory</label>
+            <div className="row"><input id="vfs-list-path" type="text" placeholder="docs" style={{ flex: 2 }} /><button onClick={doVfsList}>LIST</button></div>
+            <div id="vfs-list-status" style={{ marginTop: 4 }}></div>
+            <div className="result" id="vfs-list-result" style={{ marginTop: 4, display: 'none', maxHeight: 300 }}>—</div>
+          </div>
+          <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+            <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Mkdir</label>
+            <div className="row"><input id="vfs-mkdir-path" type="text" placeholder="docs/drafts" style={{ flex: 2 }} /><button className="success" onClick={doVfsMkdir}>MKDIR</button></div>
+            <div id="vfs-mkdir-status" style={{ marginTop: 4 }}></div>
+          </div>
+          <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+            <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Move / Rename</label>
+            <div className="row">
+              <input id="vfs-move-src" type="text" placeholder="docs/old.txt" style={{ flex: 2 }} />
+              <span style={{ color: '#555' }}>→</span>
+              <input id="vfs-move-dst" type="text" placeholder="docs/new.txt" style={{ flex: 2 }} />
+              <button onClick={doVfsMove}>MOVE</button>
+            </div>
+            <div id="vfs-move-status" style={{ marginTop: 4 }}></div>
+          </div>
+          <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+            <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Delete</label>
+            <div className="row"><input id="vfs-delete-path" type="text" placeholder="docs/readme.txt" style={{ flex: 2 }} /><button className="danger" onClick={() => { if (confirm('Delete this file?')) doVfsDelete(); }}>DELETE</button></div>
+            <div id="vfs-delete-status" style={{ marginTop: 4 }}></div>
+          </div>
+        </div>
+      </details>
+    </>
+  );
+}

package/admin/src/components/tabs/View.tsx

@@ -0,0 +1,14 @@
+export default function View() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, height: '100%' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <span style={{ color: '#888', fontSize: 12 }}>Path:</span>
+        <span id="view-path" style={{ color: '#4ec9b0', fontFamily: 'monospace', fontSize: 13 }}>—</span>
+        <span id="view-time" style={{ color: '#555', fontSize: 11 }}></span>
+      </div>
+      <pre id="view-result" style={{ flex: 1, margin: 0, padding: 12, background: '#0a0a0a', border: '1px solid #2a2a2a', borderRadius: 4, overflow: 'auto', color: '#d4d4d4', fontSize: 13, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
+        Select a node in the tree to view its data.
+      </pre>
+    </div>
+  );
+}

package/admin/src/components/tabs/utils.ts

@@ -0,0 +1,25 @@
+export function showStatus(id: string, msg: string, ok: boolean, ms?: number) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.className = 'status ' + (ok ? 'ok' : 'err');
+  el.textContent = ms != null ? `${msg} (${ms.toFixed(1)}ms)` : msg;
+}
+
+export function escHtml(s: string) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+export async function apiFetch(url: string, opts?: RequestInit): Promise<Record<string, unknown>> {
+  let res: Response;
+  try { res = await fetch(url, opts); } catch (e: unknown) { return { ok: false, error: (e as Error).message }; }
+  const ct = res.headers.get('content-type') || '';
+  if (ct.includes('application/json')) {
+    try { return await res.json(); } catch (e: unknown) { return { ok: false, error: 'Invalid JSON: ' + (e as Error).message }; }
+  }
+  const text = await res.text().catch(() => res.statusText);
+  return { ok: false, error: res.status + ' ' + (text || res.statusText) };
+}
+
+export function refreshTreePath(path: string) {
+  (window as unknown as Record<string, (...args: unknown[]) => void>).__treeRefreshPath?.(path);
+}