@polderlabs/bizar 7.0.2 → 8.0.0

package/bizar-dash/src/web/views/memory/ObsidianPanel.tsx

@@ -1,650 +0,0 @@
-// src/web/views/memory/ObsidianPanel.tsx — vault browser + note CRUD + backlinks.
-import { useEffect, useMemo, useState } from 'react';
-import {
-  ChevronDown,
-  ChevronRight,
-  FilePlus,
-  FileText,
-  Folder,
-  Loader2,
-  Pencil,
-  RefreshCw,
-  Search as SearchIcon,
-  Trash2,
-  X,
-} from 'lucide-react';
-import { Button } from '../../components/Button';
-import { Card, CardMeta, CardTitle } from '../../components/Card';
-import { EmptyState } from '../../components/EmptyState';
-import { Spinner } from '../../components/Spinner';
-import { useToast } from '../../components/Toast';
-import { useModal } from '../../components/Modal';
-import { api } from '../../lib/api';
-import { formatTime, formatRelative, cn } from '../../lib/utils';
-
-type Note = {
-  relPath: string;
-  frontmatter: Record<string, unknown>;
-  body: string;
-  raw: string;
-  mtime: number;
-  size: number;
-  schemaValid: boolean;
-};
-
-type TreeNode = {
-  name: string;
-  path: string;
-  type: 'folder' | 'note';
-  size?: number;
-  mtime?: number;
-  children?: TreeNode[];
-};
-
-type Backlink = {
-  fromRelPath: string;
-  fromTitle: string;
-  snippet: string;
-  mtime: number;
-};
-
-type Props = { refreshKey: number };
-
-export function ObsidianPanel({ refreshKey }: Props) {
-  const toast = useToast();
-  const modal = useModal();
-  const [notes, setNotes] = useState<Note[]>([]);
-  const [tree, setTree] = useState<TreeNode | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [searchQ, setSearchQ] = useState('');
-  const [searchResults, setSearchResults] = useState<Note[] | null>(null);
-  const [searching, setSearching] = useState(false);
-  const [selected, setSelected] = useState<string | null>(null);
-  const [backlinks, setBacklinks] = useState<Backlink[]>([]);
-
-  const reload = async () => {
-    setLoading(true);
-    try {
-      const [n, t] = await Promise.all([
-        api.get<{ notes: Note[] }>('/memory/notes').catch(() => ({ notes: [] })),
-        api.get<{ tree: TreeNode | null }>('/memory/obsidian/tree').catch(() => ({ tree: null })),
-      ]);
-      setNotes(n.notes || []);
-      setTree(t.tree);
-      if (selected && !n.notes?.find((x) => x.relPath === selected)) {
-        setSelected(null);
-        setBacklinks([]);
-      }
-    } catch (err) {
-      toast.error(`Vault load failed: ${(err as Error).message}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    reload();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [refreshKey]);
-
-  // Debounced search
-  useEffect(() => {
-    if (!searchQ.trim()) {
-      setSearchResults(null);
-      return;
-    }
-    setSearching(true);
-    const t = setTimeout(async () => {
-      try {
-        const r = await api.get<{ results: Array<{ relPath: string; snippet: string; score: number }> }>(
-          `/memory/search?q=${encodeURIComponent(searchQ)}&limit=50`,
-        );
-        const pathSet = new Set((r.results || []).map((x) => x.relPath));
-        setSearchResults(notes.filter((n) => pathSet.has(n.relPath)));
-      } catch (err) {
-        toast.error(`Search failed: ${(err as Error).message}`);
-      } finally {
-        setSearching(false);
-      }
-    }, 240);
-    return () => clearTimeout(t);
-  }, [searchQ, notes, toast]);
-
-  const onSelect = async (relPath: string) => {
-    setSelected(relPath);
-    try {
-      const r = await api.get<{ backlinks: Backlink[] }>(
-        `/memory/obsidian/backlinks?note=${encodeURIComponent(relPath)}`,
-      );
-      setBacklinks(r.backlinks || []);
-    } catch {
-      setBacklinks([]);
-    }
-  };
-
-  const onCreate = () => {
-    modal.open({
-      title: 'New note',
-      width: 720,
-      children: (
-        <NoteEditor
-          mode="create"
-          onSave={async (relPath, frontmatter, body) => {
-            try {
-              await api.post('/memory/notes', { path: relPath, frontmatter, body });
-              toast.success(`Created ${relPath}.`);
-              modal.close();
-              await reload();
-              onSelect(relPath);
-            } catch (err) {
-              toast.error(`Create failed: ${(err as Error).message}`);
-            }
-          }}
-          onCancel={() => modal.close()}
-        />
-      ),
-    });
-  };
-
-  const onEdit = async (relPath: string) => {
-    try {
-      const note = await api.get<Note>(`/memory/notes/${relPath.split('/').map(encodeURIComponent).join('/')}`);
-      modal.open({
-        title: `Edit ${relPath}`,
-        width: 720,
-        children: (
-          <NoteEditor
-            mode="edit"
-            initial={{ relPath: note.relPath, frontmatter: note.frontmatter, body: note.body }}
-            onSave={async (rp, frontmatter, body) => {
-              try {
-                await api.put(`/memory/notes/${rp.split('/').map(encodeURIComponent).join('/')}`, {
-                  frontmatter, body,
-                });
-                toast.success(`Saved ${rp}.`);
-                modal.close();
-                await reload();
-                onSelect(rp);
-              } catch (err) {
-                toast.error(`Save failed: ${(err as Error).message}`);
-              }
-            }}
-            onCancel={() => modal.close()}
-          />
-        ),
-      });
-    } catch (err) {
-      toast.error(`Load failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onDelete = async (relPath: string) => {
-    if (!confirm(`Delete ${relPath}? This cannot be undone.`)) return;
-    try {
-      await api.del(`/memory/notes/${relPath.split('/').map(encodeURIComponent).join('/')}`);
-      toast.success(`Deleted ${relPath}.`);
-      if (selected === relPath) setSelected(null);
-      await reload();
-    } catch (err) {
-      toast.error(`Delete failed: ${(err as Error).message}`);
-    }
-  };
-
-  const sortedNotes = useMemo(() => {
-    return [...notes].sort((a, b) => b.mtime - a.mtime);
-  }, [notes]);
-
-  const displayed = searchResults ?? sortedNotes;
-
-  if (loading && !notes.length) {
-    return (
-      <div className="view-loading">
-        <Spinner size="lg" />
-        <p>Loading vault…</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="memory-panel-content memory-obsidian-grid">
-      {/* ── Folder tree (left) ─────────────────────────────────────── */}
-      <Card variant="outlined" className="memory-tree-card">
-        <CardTitle>
-          <Folder size={14} /> Folders
-        </CardTitle>
-        <CardMeta>{tree ? `${countFolders(tree)} folder(s)` : 'no vault'}</CardMeta>
-        <div className="memory-tree-body">
-          {tree ? <TreeView node={tree} depth={0} onSelect={onSelect} selected={selected} /> : null}
-        </div>
-      </Card>
-
-      {/* ── Note list (center) ─────────────────────────────────────── */}
-      <div className="memory-obsidian-list-col">
-        <div className="memory-list-toolbar">
-          <div className="search-input">
-            <SearchIcon size={14} aria-hidden />
-            <label htmlFor="obsidian-search" className="sr-only">Search notes</label>
-            <input
-              id="obsidian-search"
-              type="text"
-              className="input"
-              placeholder="Search notes…"
-              value={searchQ}
-              onChange={(e) => setSearchQ(e.target.value)}
-              aria-label="Search notes"
-            />
-            {searchQ && (
-              <button
-                type="button"
-                className="icon-btn"
-                onClick={() => setSearchQ('')}
-                aria-label="Clear search"
-              >
-                <X size={12} />
-              </button>
-            )}
-          </div>
-          <Button variant="primary" size="sm" onClick={onCreate}>
-            <FilePlus size={12} /> New note
-          </Button>
-          <Button variant="ghost" size="sm" onClick={reload} title="Refresh">
-            <RefreshCw size={12} />
-          </Button>
-        </div>
-        {searching && <div className="muted text-sm">Searching…</div>}
-        {displayed.length === 0 ? (
-          <EmptyState
-            icon={<FileText size={28} />}
-            title="No notes"
-            message={
-              notes.length === 0
-                ? 'No notes in this vault yet. Click "New note" to create one.'
-                : `No notes match "${searchQ}".`
-            }
-          />
-        ) : (
-          <ul className="memory-note-list">
-            {displayed.map((n) => (
-              <li
-                key={n.relPath}
-                className={cn('memory-note-card', selected === n.relPath && 'memory-note-card-active')}
-              >
-                <button
-                  type="button"
-                  className="memory-note-card-main"
-                  onClick={() => onSelect(n.relPath)}
-                >
-                  <div className="memory-note-card-title">
-                    <FileText size={12} />
-                    <span>{titleOf(n)}</span>
-                  </div>
-                  <div className="memory-note-card-meta">
-                    <code className="muted">{n.relPath}</code>
-                    <span className="muted">· {formatRelative(n.mtime)}</span>
-                    {!n.schemaValid && <span className="memory-pill-warn">schema</span>}
-                  </div>
-                </button>
-                <div className="memory-note-card-actions">
-                  <button
-                    type="button"
-                    className="icon-btn"
-                    onClick={() => onEdit(n.relPath)}
-                    aria-label={`Edit ${n.relPath}`}
-                    title="Edit"
-                  >
-                    <Pencil size={12} />
-                  </button>
-                  <button
-                    type="button"
-                    className="icon-btn"
-                    onClick={() => onDelete(n.relPath)}
-                    aria-label={`Delete ${n.relPath}`}
-                    title="Delete"
-                  >
-                    <Trash2 size={12} />
-                  </button>
-                </div>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-
-      {/* ── Detail pane (right) ────────────────────────────────────── */}
-      <div className="memory-obsidian-detail-col">
-        {selected ? (
-          <NoteDetail relPath={selected} onClose={() => setSelected(null)} />
-        ) : (
-          <EmptyState
-            icon={<FileText size={28} />}
-            title="Pick a note"
-            message="Select a note from the list to view its content, frontmatter, and backlinks."
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ── Tree view ─────────────────────────────────────────────────────────────
-
-/**
- * Coerce a note's title to a renderable string. frontmatter.title is
- * `unknown` per the schema, so this guards against non-string values.
- */
-function titleOf(n: Note): string {
-  const t = n.frontmatter?.title;
-  if (typeof t === 'string' && t.trim()) return t;
-  return n.relPath.replace(/\.md$/i, '');
-}
-
-function TreeView({
-  node,
-  depth,
-  onSelect,
-  selected,
-}: {
-  node: TreeNode;
-  depth: number;
-  onSelect: (path: string) => void;
-  selected: string | null;
-}) {
-  const [open, setOpen] = useState(depth < 2);
-  if (node.type === 'note') {
-    return (
-      <button
-        type="button"
-        className={cn('memory-tree-node memory-tree-node-note', selected === node.path && 'memory-tree-node-active')}
-        style={{ paddingLeft: 6 + depth * 12 }}
-        onClick={() => onSelect(node.path)}
-      >
-        <FileText size={11} />
-        <span>{node.name}</span>
-      </button>
-    );
-  }
-  return (
-    <div className="memory-tree-folder">
-      <button
-        type="button"
-        className="memory-tree-node memory-tree-node-folder"
-        style={{ paddingLeft: 6 + depth * 12 }}
-        onClick={() => setOpen((v) => !v)}
-      >
-        {open ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
-        <Folder size={11} />
-        <span>{node.name || 'vault'}</span>
-        {node.children && node.children.length > 0 && (
-          <span className="muted text-xs">{node.children.length}</span>
-        )}
-      </button>
-      {open && node.children && (
-        <div className="memory-tree-children">
-          {node.children.map((c, i) => (
-            <TreeView key={`${c.path}-${i}`} node={c} depth={depth + 1} onSelect={onSelect} selected={selected} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function countFolders(node: TreeNode): number {
-  if (node.type === 'note') return 0;
-  return 1 + (node.children || []).reduce((acc, c) => acc + countFolders(c), 0);
-}
-
-// ── Note detail ───────────────────────────────────────────────────────────
-
-function NoteDetail({ relPath, onClose }: { relPath: string; onClose: () => void }) {
-  const [note, setNote] = useState<Note | null>(null);
-  const [backlinks, setBacklinks] = useState<Backlink[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let cancelled = false;
-    setLoading(true);
-    (async () => {
-      try {
-        const [n, b] = await Promise.all([
-          api.get<Note>(`/memory/notes/${relPath.split('/').map(encodeURIComponent).join('/')}`),
-          api.get<{ backlinks: Backlink[] }>(`/memory/obsidian/backlinks?note=${encodeURIComponent(relPath)}`),
-        ]);
-        if (cancelled) return;
-        setNote(n);
-        setBacklinks(b.backlinks || []);
-      } catch {
-        if (!cancelled) setNote(null);
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    })();
-    return () => { cancelled = true; };
-  }, [relPath]);
-
-  if (loading) {
-    return (
-      <div className="view-loading"><Spinner size="sm" /></div>
-    );
-  }
-  if (!note) return <div className="muted">Note not found.</div>;
-
-  const tags = Array.isArray(note.frontmatter?.tags) ? note.frontmatter.tags : [];
-  const links = Array.isArray(note.frontmatter?.links) ? note.frontmatter.links : [];
-
-  return (
-    <div className="memory-note-detail">
-      <div className="memory-note-detail-head">
-        <h3>{titleOf(note)}</h3>
-        <button type="button" className="icon-btn" onClick={onClose} aria-label="Close">
-          <X size={12} />
-        </button>
-      </div>
-      <div className="memory-note-detail-meta">
-        <code>{relPath}</code>
-        <span className="muted">· modified {formatTime(note.mtime)}</span>
-      </div>
-      {tags.length > 0 && (
-        <div className="memory-tag-row">
-          {tags.map((t, i) => (
-            <span key={i} className="memory-tag">{String(t)}</span>
-          ))}
-        </div>
-      )}
-      <pre className="memory-note-body mono text-sm">{note.body}</pre>
-      {backlinks.length > 0 && (
-        <div className="memory-backlinks">
-          <h4>Backlinks</h4>
-          <ul>
-            {backlinks.map((b) => (
-              <li key={b.fromRelPath}>
-                <code>{b.fromRelPath}</code>
-                <p className="muted text-sm">{b.snippet}</p>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-      {links.length > 0 && (
-        <div className="memory-backlinks">
-          <h4>Forward links</h4>
-          <ul>
-            {links.map((l, i) => (
-              <li key={i}><code>{String(l)}</code></li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── Note editor modal body ────────────────────────────────────────────────
-
-function NoteEditor({
-  mode,
-  initial,
-  onSave,
-  onCancel,
-}: {
-  mode: 'create' | 'edit';
-  initial?: { relPath: string; frontmatter: Record<string, unknown>; body: string };
-  onSave: (relPath: string, frontmatter: Record<string, unknown>, body: string) => void | Promise<void>;
-  onCancel: () => void;
-}) {
-  const [relPath, setRelPath] = useState(initial?.relPath || 'untitled.md');
-  const [frontmatterYaml, setFrontmatterYaml] = useState(
-    initial?.frontmatter ? yamlStringify(initial.frontmatter) : 'title: ""\ntags: []\n',
-  );
-  const [body, setBody] = useState(initial?.body || '');
-  const [busy, setBusy] = useState(false);
-  const toast = useToast();
-
-  const onSubmit = async () => {
-    if (!relPath.endsWith('.md')) {
-      toast.error('Path must end in .md');
-      return;
-    }
-    let fm: Record<string, unknown>;
-    try {
-      fm = yamlParse(frontmatterYaml) || {};
-    } catch (err) {
-      toast.error(`Frontmatter parse failed: ${(err as Error).message}`);
-      return;
-    }
-    setBusy(true);
-    try {
-      await onSave(relPath, fm, body);
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  return (
-    <div className="memory-editor-modal">
-      <label className="field-label" htmlFor="obsidian-note-path">Path</label>
-      <input
-        id="obsidian-note-path"
-        type="text"
-        className="input mono"
-        value={relPath}
-        onChange={(e) => setRelPath(e.target.value)}
-        disabled={mode === 'edit'}
-        placeholder="notes/example.md"
-      />
-      <label className="field-label" htmlFor="obsidian-note-frontmatter" style={{ marginTop: 12 }}>Frontmatter (YAML)</label>
-      <textarea
-        id="obsidian-note-frontmatter"
-        className="memory-editor-textarea mono text-sm"
-        rows={6}
-        value={frontmatterYaml}
-        onChange={(e) => setFrontmatterYaml(e.target.value)}
-        aria-label="Frontmatter YAML"
-      />
-      <label className="field-label" htmlFor="obsidian-note-body" style={{ marginTop: 12 }}>Body (Markdown)</label>
-      <textarea
-        id="obsidian-note-body"
-        className="memory-editor-textarea mono text-sm"
-        rows={14}
-        value={body}
-        onChange={(e) => setBody(e.target.value)}
-        aria-label="Body markdown"
-      />
-      <div className="modal-footer-actions" style={{ marginTop: 12 }}>
-        <Button variant="ghost" onClick={onCancel} disabled={busy}>Cancel</Button>
-        <Button variant="primary" onClick={onSubmit} disabled={busy}>
-          {busy && <Loader2 size={12} className="memory-spin" />}
-          {mode === 'create' ? 'Create' : 'Save'}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-// ── Tiny YAML helpers (avoid pulling a 100kB lib into the bundle) ────────
-
-function yamlStringify(obj: Record<string, unknown>): string {
-  // Best-effort: dump top-level scalar / list / nested-map fields.
-  // Good enough for the note editor — the server re-validates anyway.
-  const lines: string[] = [];
-  for (const [k, v] of Object.entries(obj)) {
-    if (v === null || v === undefined) continue;
-    if (Array.isArray(v)) {
-      if (v.length === 0) { lines.push(`${k}: []`); continue; }
-      lines.push(`${k}:`);
-      for (const item of v) lines.push(`  - ${yamlScalar(item)}`);
-    } else if (typeof v === 'object') {
-      lines.push(`${k}:`);
-      for (const [kk, vv] of Object.entries(v as Record<string, unknown>)) {
-        lines.push(`  ${kk}: ${yamlScalar(vv)}`);
-      }
-    } else {
-      lines.push(`${k}: ${yamlScalar(v)}`);
-    }
-  }
-  return lines.join('\n');
-}
-
-function yamlScalar(v: unknown): string {
-  if (typeof v === 'string') {
-    if (/[:#\n"']/.test(v) || v === '') return JSON.stringify(v);
-    return v;
-  }
-  if (typeof v === 'number' || typeof v === 'boolean') return String(v);
-  return JSON.stringify(v);
-}
-
-function yamlParse(s: string): Record<string, unknown> {
-  const out: Record<string, unknown> = {};
-  const lines = s.split(/\r?\n/);
-  let i = 0;
-  while (i < lines.length) {
-    const line = lines[i];
-    if (!line.trim() || line.trim().startsWith('#')) { i++; continue; }
-    const m = line.match(/^([A-Za-z_][\w-]*):\s*(.*)$/);
-    if (!m) { i++; continue; }
-    const [, key, rest] = m;
-    if (rest === '') {
-      // Nested mapping or list follows.
-      const block: Record<string, unknown> = {};
-      const list: unknown[] = [];
-      let isList = false;
-      let isMap = false;
-      while (i + 1 < lines.length) {
-        const next = lines[i + 1];
-        if (!next.startsWith('  ')) break;
-        if (next.startsWith('  - ')) {
-          isList = true;
-          list.push(parseScalar(next.slice(4)));
-          i++;
-        } else {
-          isMap = true;
-          const nm = next.match(/^  ([A-Za-z_][\w-]*):\s*(.*)$/);
-          if (nm) {
-            block[nm[1]] = parseScalar(nm[2]);
-          }
-          i++;
-        }
-      }
-      out[key] = isList && !isMap ? list : (isMap ? block : {});
-    } else {
-      out[key] = parseScalar(rest);
-    }
-    i++;
-  }
-  return out;
-}
-
-function parseScalar(v: string): unknown {
-  const t = v.trim();
-  if (t === '') return '';
-  if (t === 'true') return true;
-  if (t === 'false') return false;
-  if (t === 'null' || t === '~') return null;
-  if (/^-?\d+$/.test(t)) return parseInt(t, 10);
-  if (/^-?\d+\.\d+$/.test(t)) return parseFloat(t);
-  if ((t.startsWith('"') && t.endsWith('"')) || (t.startsWith("'") && t.endsWith("'"))) {
-    return t.slice(1, -1);
-  }
-  return t;
-}