pathnote 0.1.0 → 0.2.1

package/src/workspace.js

@@ -0,0 +1,244 @@
+// The folders Pathnote may touch. Every path from the AI is checked against them: it must be
+// inside one of the folders (after following symlinks), not in a skipped folder, and not a
+// file that usually holds secrets.
+import fs from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+import { isDocument, isImage, documentText, imageContent, MAX_DOC } from './documents.js';
+
+const SKIP = new Set(['.git', '.obsidian', '.trash', '.Trash', 'node_modules', '.build', 'build', 'DerivedData', 'dist', '.wrangler', '.venv', '__pycache__']);
+// Word and LibreOffice leave these lock files next to open documents
+const LOCK = /^(~\$|\.~lock\.)/;
+const SECRET_DIRS = new Set(['secrets', '.ssh', '.gnupg', '.aws']);
+const SECRET_FILE = /^(\.env(\..*)?|.*\.(pem|p8|p12|key|keystore|jks)|id_(rsa|ed25519|ecdsa)(\.pub)?|credentials\.json|token\.json|client_secret.*\.json|\.npmrc|\.netrc)$/i;
+const TEXT = /\.(md|mdx|txt|markdown|csv|tsv|json|jsonc|ya?ml|toml|ini|cfg|conf|xml|html?|css|scss|js|mjs|cjs|jsx|ts|tsx|py|rb|go|rs|java|kt|swift|m|h|c|cc|cpp|hpp|cs|php|sh|zsh|bash|sql|r|lua|tex|bib|srt|vtt|log)$/i;
+const LINK = /\[\[([^\]|#]+)(?:#[^\]|]*)?(?:\|[^\]]*)?\]\]/g;
+const MAX_READ = 2 * 1024 * 1024;
+const MAX_SEARCH = 512 * 1024;
+export const MAX_NODES = 6000;
+
+const BLOCKED = 'macOS is blocking access to this folder. Allow it in System Settings → Privacy & Security → Files and Folders (for the app that runs Pathnote), then try again.';
+
+// macOS holds file calls on protected folders (Desktop, Downloads, iCloud Drive) until the user
+// answers a permission prompt, possibly forever. Give up after `ms` instead of hanging.
+const timeout = (promise, ms) => Promise.race([promise, new Promise((_, no) => setTimeout(() => no(Object.assign(new Error(BLOCKED), { code: 'EBLOCKED' })), ms))]);
+
+const exists = p => fs.access(p).then(() => true, () => false);
+
+// First file under `dir` that looks like it holds secrets, or null
+async function findSecret(dir) {
+  for (const e of await fs.readdir(dir, { withFileTypes: true })) {
+    const abs = path.join(dir, e.name);
+    if (SECRET_FILE.test(e.name) || (e.isDirectory() && SECRET_DIRS.has(e.name))) return abs;
+    if (e.isDirectory()) { const found = await findSecret(abs); if (found) return found; }
+  }
+  return null;
+}
+
+const expand = p => String(p || '').trim().replace(/^~(?=$|\/)/, os.homedir());
+
+export class Workspace {
+  constructor(folders) {
+    this.roots = [...new Set(folders.map(f => path.resolve(expand(f))))];
+    this.id = this.roots.join('\n');
+  }
+
+  // Full path for something the AI named. Relative paths are allowed when there is one folder.
+  resolve(p) {
+    let s = expand(p);
+    if (!s) throw new Error('Path is empty.');
+    if (!path.isAbsolute(s)) {
+      if (this.roots.length > 1) throw new Error(`Use a full path, e.g. ${path.join(this.roots[0], s)}`);
+      s = path.join(this.roots[0], s);
+    }
+    const abs = path.resolve(s);
+    const root = this.rootOf(abs);
+    if (!root) throw new Error(`"${p}" is outside the connected folders: ${this.roots.join(', ')}`);
+    const parts = path.relative(root, abs).split(path.sep);
+    if (parts.some(x => SKIP.has(x))) throw new Error(`"${p}" is in a folder Pathnote skips.`);
+    if (parts.some(x => SECRET_DIRS.has(x)) || SECRET_FILE.test(path.basename(abs))) throw new Error(`"${p}" looks like it holds secrets, so Pathnote won't open it.`);
+    return abs;
+  }
+
+  rootOf(abs) {
+    return this.roots.find(r => abs === r || abs.startsWith(r + path.sep));
+  }
+
+  // resolve(), then the same check after following symlinks
+  async real(p) {
+    const abs = this.resolve(p);
+    let at = abs;
+    for (;;) {
+      try { at = await timeout(fs.realpath(at), 5000); break; } catch (e) { if (e.code !== 'ENOENT') throw e; at = path.dirname(at); }
+    }
+    const roots = await Promise.all(this.roots.map(r => fs.realpath(r).catch(() => r)));
+    if (!roots.some(r => at === r || at.startsWith(r + path.sep))) throw new Error(`"${p}" leads outside the connected folders.`);
+    return abs;
+  }
+
+  // Immediate contents of a folder; folders end with "/"
+  async list(dir) {
+    const abs = await this.real(dir);
+    const out = [];
+    for (const e of await timeout(fs.readdir(abs, { withFileTypes: true }), 5000)) {
+      if (e.name.startsWith('.') || LOCK.test(e.name) || SKIP.has(e.name) || SECRET_DIRS.has(e.name) || SECRET_FILE.test(e.name)) continue;
+      out.push(e.isDirectory() ? e.name + '/' : e.name);
+    }
+    return out.sort();
+  }
+
+  async read(p) {
+    const abs = await this.real(p);
+    const st = await timeout(fs.stat(abs), 5000);
+    if (st.isDirectory()) throw new Error(`"${p}" is a folder. Use list_files.`);
+    if (st.size > MAX_READ) throw new Error(`"${p}" is ${(st.size / 1048576).toFixed(1)} MB; Pathnote reads files up to 2 MB.`);
+    const buf = await timeout(fs.readFile(abs), 10000);
+    if (buf.subarray(0, 8000).includes(0)) throw new Error(`"${p}" is not a text file.`);
+    return buf.toString('utf8');
+  }
+
+  // Anything the AI can take in: text as is, documents as their text, pictures as images
+  async open(p) {
+    const abs = await this.real(p);
+    if (!isDocument(abs) && !isImage(abs)) return { kind: 'text', text: await this.read(abs) };
+    const st = await timeout(fs.stat(abs), 5000);
+    if (st.size > MAX_DOC) throw new Error(`"${p}" is ${(st.size / 1048576).toFixed(1)} MB; Pathnote opens documents and images up to 50 MB.`);
+    const buf = await timeout(fs.readFile(abs), 15000);
+    if (isImage(abs)) return { kind: 'image', ...(await timeout(imageContent(abs, buf), 20000)) };
+    return { kind: 'document', text: await timeout(documentText(abs, buf), 30000) };
+  }
+
+  // Document text for search, kept until the file changes
+  async docText(abs) {
+    const st = await fs.stat(abs);
+    if (st.size > MAX_DOC) return null;
+    const hit = this.docs?.get(abs);
+    if (hit?.mtime === st.mtimeMs) return hit.text;
+    const text = await timeout(documentText(abs, await fs.readFile(abs)), 15000);
+    (this.docs ??= new Map()).set(abs, { mtime: st.mtimeMs, text });
+    return text;
+  }
+
+  // Read every document's text once in the background, so the first search doesn't wait for it
+  async warm() {
+    for (const it of await this.walk()) {
+      if (it.kind === 'file' && isDocument(it.id)) await this.docText(it.id).catch(() => {});
+    }
+  }
+
+  async readOrNull(p) {
+    try { return await this.read(p); } catch (e) { if (e.code === 'ENOENT') return null; throw e; }
+  }
+
+  async write(p, text) {
+    const abs = await this.real(p);
+    if (isDocument(abs) || isImage(abs)) throw new Error(`Pathnote can read ${path.extname(abs)} files but not write them.`);
+    await timeout(fs.mkdir(path.dirname(abs), { recursive: true }), 5000);
+    await timeout(fs.writeFile(abs, text, 'utf8'), 10000);
+  }
+
+  // Move a file or folder (any type) to a new path in the connected folders. Never overwrites,
+  // and refuses folders that hold secret files, since those would leave the protected place.
+  async move(from, to) {
+    const src = await this.real(from), dst = await this.real(to);
+    if (this.roots.includes(src)) throw new Error(`"${from}" is a connected folder itself; move what is inside it instead.`);
+    const st = await timeout(fs.stat(src), 5000);
+    if (await exists(dst)) throw new Error(`"${to}" already exists; Pathnote never overwrites.`);
+    if (dst.startsWith(src + path.sep)) throw new Error(`Can't move "${from}" into itself.`);
+    if (st.isDirectory()) {
+      const secret = await findSecret(src);
+      if (secret) throw new Error(`"${from}" holds a file that looks like a secret (${path.relative(src, secret)}), so Pathnote won't move it.`);
+    }
+    await timeout(fs.mkdir(path.dirname(dst), { recursive: true }), 5000);
+    try {
+      await fs.rename(src, dst);
+    } catch (e) {
+      if (e.code !== 'EXDEV') throw e;
+      // different disk (e.g. iCloud Drive): copy, then remove the original
+      await fs.cp(src, dst, { recursive: true, errorOnExist: true, force: false, preserveTimestamps: true });
+      await fs.rm(src, { recursive: true });
+    }
+    return { from: src, to: dst, dir: st.isDirectory() };
+  }
+
+  async remove(p) {
+    await fs.rm(await this.real(p), { force: true });
+  }
+
+  // Every folder and file under the roots, minus skipped, hidden and secret ones. Stops at MAX_NODES.
+  async walk() {
+    // All folders at once, so several blocked ones cost one timeout, not one each
+    const per = await Promise.all(this.roots.map(async r => {
+      const mine = [{ id: r, kind: 'root', parent: null }];
+      try {
+        await timeout(this.visit(r, mine, MAX_NODES), 4000);
+        return { items: mine };
+      } catch (e) {
+        if (e.code !== 'EBLOCKED') throw e;
+        return { items: mine.slice(0, 1), blocked: r };
+      }
+    }));
+    this.blocked = per.filter(x => x.blocked).map(x => x.blocked);
+    return per.flatMap(x => x.items).slice(0, MAX_NODES);
+  }
+
+  async visit(root, items, max) {
+    const visit = async (dir, depth) => {
+      let entries;
+      try { entries = await fs.readdir(dir, { withFileTypes: true }); } catch { return; }
+      entries.sort((a, b) => a.name.localeCompare(b.name));
+      for (const e of entries) {
+        if (items.length >= max) return;
+        if (e.name.startsWith('.') || LOCK.test(e.name) || SKIP.has(e.name) || SECRET_DIRS.has(e.name) || SECRET_FILE.test(e.name)) continue;
+        const abs = path.join(dir, e.name);
+        if (e.isDirectory()) { items.push({ id: abs, kind: 'dir', parent: dir }); await visit(abs, depth + 1); }
+        else if (e.isFile()) items.push({ id: abs, kind: 'file', parent: dir });
+      }
+    };
+    await visit(root, 1);
+  }
+
+  // Text files and documents ranked by how often the query's words appear, file-name matches counted extra
+  async search(query, limit = 10) {
+    const words = String(query).toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length) return [];
+    const hits = [];
+    for (const it of await this.walk()) {
+      if (it.kind !== 'file' || !(TEXT.test(it.id) || isDocument(it.id))) continue;
+      let text;
+      try {
+        if (isDocument(it.id)) text = await this.docText(it.id);
+        else {
+          const st = await fs.stat(it.id);
+          if (st.size > MAX_SEARCH) continue;
+          text = await timeout(fs.readFile(it.id, 'utf8'), 3000);
+        }
+      } catch { continue; }
+      if (!text) continue;
+      const lower = text.toLowerCase(), name = path.basename(it.id).toLowerCase();
+      let score = 0;
+      for (const w of words) { score += lower.split(w).length - 1; if (name.includes(w)) score += 5; }
+      if (!score) continue;
+      const at = Math.max(0, lower.indexOf(words.find(w => lower.includes(w)) ?? words[0]));
+      hits.push({ path: it.id, score, snippet: text.slice(Math.max(0, at - 60), at + 140).replace(/\s+/g, ' ').trim() });
+    }
+    return hits.sort((a, b) => b.score - a.score).slice(0, limit);
+  }
+
+  // Folder tree for the viewer, plus [[wikilinks]] between markdown notes (resolved by name, like Obsidian)
+  async graph() {
+    const items = await this.walk();
+    const notes = items.filter(i => i.kind === 'file' && /\.md$/i.test(i.id));
+    const byName = new Map(notes.map(n => [path.basename(n.id, path.extname(n.id)).toLowerCase(), n.id]));
+    const links = [];
+    for (const n of notes) {
+      let text;
+      try { text = await fs.readFile(n.id, 'utf8'); } catch { continue; }
+      for (const m of text.matchAll(LINK)) {
+        const target = byName.get(path.basename(m[1].trim()).toLowerCase());
+        if (target && target !== n.id) links.push([n.id, target]);
+      }
+    }
+    return { roots: this.roots, items, links, blocked: this.blocked, capped: items.length >= MAX_NODES };
+  }
+}

package/viewer/index.html

@@ -31,6 +31,8 @@ body { background: var(--bg); color: var(--ink); font: 400 14px/1.43 var(--font)
 .graph { position: relative; min-width: 0; min-height: 0; border-right: 1px solid var(--line); }
 svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
 svg.drag { cursor: grabbing; }
+.note { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 11px; background: var(--surface); color: var(--muted); font-size: 12px; }
+.note b { color: var(--ink); font-weight: 600; }
 .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); padding: 24px; text-align: center; pointer-events: none; }
 .log { display: flex; flex-direction: column; min-height: 0; }
 .log h2 { font-size: 14px; font-weight: 600; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
@@ -50,12 +52,21 @@ li .btn { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
 .btn:disabled { opacity: .4; cursor: default; }
 .hint { padding: 16px; color: var(--muted); }
 
-.link { stroke: var(--line); stroke-width: 1; }
+/* --k = user units per screen pixel, so dots, labels and lines keep their on-screen size while zooming */
+svg { --k: 1; }
+line { vector-effect: non-scaling-stroke; }
+.tree { stroke: var(--line); stroke-width: 1; }
+.link { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: .35; }
 .trail { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset .6s ease-in-out, opacity .4s; }
 .src { stroke: var(--accent); stroke-width: 1.5; opacity: .6; }
-.node .dot { fill: var(--node); transition: fill .3s; }
-.node text { font: 400 11px var(--font); fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
-.node .ring { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0; }
+.node .dot { fill: var(--node); transition: fill .3s; r: calc(var(--k) * 3.5px); }
+.node.dir .dot { r: calc(var(--k) * 5px); }
+.node.root .dot { r: calc(var(--k) * 8px); fill: var(--ink); }
+.node text { font-family: var(--font); font-size: calc(var(--k) * 11px); fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: calc(var(--k) * 4px); stroke-linejoin: round; pointer-events: none; display: none; }
+.node.root text { font-size: calc(var(--k) * 13px); font-weight: 600; fill: var(--ink); }
+.node.root text, .node.top text, .node.hit text, .node.visited text, .node.written text, svg.near .node.dir text, svg.close .node text { display: inline; }
+.node .ring { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0; r: calc(var(--k) * 11px); vector-effect: non-scaling-stroke; }
+.node .pulse { r: calc(var(--k) * 6px); }
 .node.hit .ring { opacity: 1; }
 .node.visited .dot, .node.written .dot { fill: var(--accent); }
 .node.visited text, .node.written text { fill: var(--ink); font-weight: 600; }
@@ -74,13 +85,14 @@ li .btn { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
 <body>
 <div class="bar">
   <strong>Pathnote</strong>
-  <span class="vault" id="vault"></span>
+  <span class="vault" id="roots"></span>
   <span class="chip" id="status"><i></i><span id="statusText"></span></span>
 </div>
 <div class="main">
   <div class="graph">
     <svg id="g" role="img"></svg>
     <div class="empty" id="empty" hidden></div>
+    <p class="note" id="note" hidden></p>
   </div>
   <div class="log">
     <h2><span id="logTitle"></span><button class="btn" id="clear" type="button"></button></h2>
@@ -92,12 +104,16 @@ li .btn { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
 const ko = (navigator.language || '').toLowerCase().startsWith('ko');
 const L = ko ? {
   live: '연결됨', off: '연결 끊김', activity: '작업 기록', clear: '경로 지우기', undo: '되돌리기', undone: '되돌림',
-  wait: 'AI가 노트를 검색하거나 읽으면 여기에 기록이 쌓입니다.', empty: '이 폴더에 .md 노트가 없습니다.',
-  hits: n => `${n}개 찾음`, created: '새 노트', graph: '노트 그래프와 AI가 지나간 경로'
+  wait: 'AI가 파일을 찾거나 읽으면 여기에 기록이 쌓입니다.', empty: '연결된 폴더가 비어 있습니다.',
+  hits: n => `${n}개 찾음`, created: '새 파일', graph: '연결된 폴더 구조와 AI가 지나간 경로',
+  capped: n => `파일이 많아 ${n}개까지만 그렸습니다.`, folders: n => `폴더 ${n}개`,
+  blocked: 'macOS가 막고 있어 비어 보이는 폴더: ', allow: ' 시스템 설정 → 개인정보 보호 및 보안 → 파일 및 폴더에서 Pathnote를 실행하는 앱(Claude 등)에 허용한 뒤 새로고침하세요.'
 } : {
   live: 'Live', off: 'Disconnected', activity: 'Activity', clear: 'Clear path', undo: 'Undo', undone: 'undone',
-  wait: 'When the AI searches or reads your notes, it shows up here.', empty: 'No .md notes in this folder.',
-  hits: n => `${n} found`, created: 'new note', graph: 'Note graph with the path the AI took'
+  wait: 'When the AI looks through or reads your files, it shows up here.', empty: 'The connected folders are empty.',
+  hits: n => `${n} found`, created: 'new file', graph: 'Connected folders and the path the AI took',
+  capped: n => `Too many files; drew the first ${n}.`, folders: n => `${n} folders`,
+  blocked: 'macOS is blocking these folders, so they look empty: ', allow: ' Allow them in System Settings → Privacy & Security → Files and Folders for the app that runs Pathnote (e.g. Claude), then reload.'
 };
 document.documentElement.lang = ko ? 'ko' : 'en';
 document.getElementById('logTitle').textContent = L.activity;
@@ -107,81 +123,124 @@ document.getElementById('hint').textContent = L.wait;
 const NS = 'http://www.w3.org/2000/svg';
 const svg = document.getElementById('g');
 svg.setAttribute('aria-label', L.graph);
-const view = el('g'), gLinks = el('g'), gTrail = el('g'), gNodes = el('g');
-view.append(gLinks, gTrail, gNodes);
+const view = el('g'), gTree = el('g'), gLinks = el('g'), gTrail = el('g'), gNodes = el('g');
+view.append(gTree, gLinks, gTrail, gNodes);
 svg.append(view);
-const pos = new Map(), nodeEl = new Map();
-let current = null, sources = new Set(), vb = { x: 0, y: 0, w: 1000, h: 700 };
+const pos = new Map(), nodeEl = new Map(), angleOf = new Map(), depthOf = new Map();
+const RING = 160;
+// connected folders sit on a wide first ring so their names don't crowd the middle
+const radius = depth => (depth + 1.5) * RING;
+let current = null, sources = new Set(), vb = { x: -500, y: -500, w: 1000, h: 1000 };
 
 function el(tag, attrs = {}) {
   const e = document.createElementNS(NS, tag);
   for (const k in attrs) e.setAttribute(k, attrs[k]);
   return e;
 }
-const name = p => p.split('/').pop().replace(/\.md$/i, '');
+const base = p => p.split('/').filter(Boolean).pop() || p;
+const parentOf = p => p.slice(0, p.lastIndexOf('/')) || '/';
 
-// Small force layout: nodes push apart, links pull together, everything drifts to the middle
-function layout(nodes, edges) {
-  const n = nodes.length, P = nodes.map((_, i) => {
-    const a = i * 2.39996, r = 30 * Math.sqrt(i + 1);
-    return { x: r * Math.cos(a), y: r * Math.sin(a), vx: 0, vy: 0 };
-  });
-  const idx = new Map(nodes.map((id, i) => [id, i]));
-  const E = edges.map(([a, b]) => [idx.get(a), idx.get(b)]);
-  const steps = n > 600 ? 80 : 250;
-  for (let s = 0; s < steps; s++) {
-    const cool = 1 - s / steps;
-    for (let i = 0; i < n; i++) for (let j = i + 1; j < n; j++) {
-      const dx = P[i].x - P[j].x, dy = P[i].y - P[j].y, d2 = dx * dx + dy * dy + 0.01;
-      if (d2 > 90000) continue;
-      const f = 1800 / d2;
-      P[i].vx += dx * f; P[i].vy += dy * f; P[j].vx -= dx * f; P[j].vy -= dy * f;
-    }
-    for (const [a, b] of E) {
-      const dx = P[b].x - P[a].x, dy = P[b].y - P[a].y, d = Math.hypot(dx, dy) + 0.01, f = (d - 90) * 0.02 / d;
-      P[a].vx += dx * f; P[a].vy += dy * f; P[b].vx -= dx * f; P[b].vy -= dy * f;
+// Radial tree: each folder gets a slice of the circle sized by how many files it holds,
+// and sits one ring further out than its parent
+function layout(items) {
+  const kids = new Map([['', []]]);
+  for (const it of items) {
+    const p = it.kind === 'root' ? '' : it.parent;
+    if (!kids.has(p)) kids.set(p, []);
+    kids.get(p).push(it.id);
+  }
+  const leaves = new Map();
+  const count = id => {
+    const c = kids.get(id) || [];
+    const n = c.length ? c.reduce((s, k) => s + count(k), 0) : 1;
+    leaves.set(id, n);
+    return n;
+  };
+  count('');
+  // a connected folder with few files still gets a readable share of the circle
+  const total = leaves.get('');
+  for (const r of kids.get('')) leaves.set(r, Math.max(leaves.get(r), total * 0.1));
+  leaves.set('', kids.get('').reduce((s, r) => s + leaves.get(r), 0));
+  const place = (id, a0, a1, depth) => {
+    const a = (a0 + a1) / 2;
+    if (id) {
+      pos.set(id, [Math.cos(a) * radius(depth), Math.sin(a) * radius(depth)]);
+      angleOf.set(id, a); depthOf.set(id, depth);
     }
-    for (const p of P) {
-      p.vx -= p.x * 0.004; p.vy -= p.y * 0.004;
-      p.x += Math.max(-20, Math.min(20, p.vx)) * cool; p.y += Math.max(-20, Math.min(20, p.vy)) * cool;
-      p.vx *= 0.5; p.vy *= 0.5;
+    let at = a0;
+    const sum = (kids.get(id) || []).reduce((s, k) => s + leaves.get(k), 0);
+    for (const k of kids.get(id) || []) {
+      const span = (a1 - a0) * leaves.get(k) / sum;
+      place(k, at, at + span, depth + 1);
+      at += span;
     }
-  }
-  nodes.forEach((id, i) => pos.set(id, [P[i].x, P[i].y]));
+  };
+  place('', -Math.PI / 2, Math.PI * 1.5, 0);
+}
+
+function setView() {
+  svg.setAttribute('viewBox', `${vb.x} ${vb.y} ${vb.w} ${vb.h}`);
+  const k = vb.w / Math.max(1, svg.clientWidth);
+  svg.style.setProperty('--k', k);
+  svg.classList.toggle('near', k < 1.2);
+  svg.classList.toggle('close', k < 0.5);
 }
 
 function fit() {
   const pts = [...pos.values()];
-  if (!pts.length) return;
+  if (!pts.length) return setView();
   const xs = pts.map(p => p[0]), ys = pts.map(p => p[1]);
-  const pad = 60, x0 = Math.min(...xs) - pad, y0 = Math.min(...ys) - pad;
-  vb = { x: x0, y: y0, w: Math.max(...xs) + pad - x0, h: Math.max(...ys) + pad - y0 };
-  svg.setAttribute('viewBox', `${vb.x} ${vb.y} ${vb.w} ${vb.h}`);
+  const pad = 80, x0 = Math.min(...xs) - pad, y0 = Math.min(...ys) - pad;
+  const w = Math.max(...xs) + pad - x0, h = Math.max(...ys) + pad - y0;
+  // keep the drawing's aspect so it isn't squashed in a wide panel
+  const r = svg.clientWidth / Math.max(1, svg.clientHeight);
+  // leave room for file names, which run sideways past the outermost dots
+  const label = 220 * Math.max(w, h * r) / Math.max(1, svg.clientWidth);
+  const size = Math.max(w + 2 * label, h * r);
+  vb = { x: x0 + w / 2 - size / 2, y: y0 + h / 2 - size / r / 2, w: size, h: size / r };
+  setView();
 }
 
-function addNode(id) {
+function addNode(id, kind, top) {
   const [x, y] = pos.get(id);
-  const g = el('g', { class: 'node' });
-  g.append(el('circle', { class: 'pulse', cx: x, cy: y, r: 7 }), el('circle', { class: 'ring', cx: x, cy: y, r: 13 }),
-    el('circle', { class: 'dot', cx: x, cy: y, r: 6 }));
-  const t = el('text', { x, y: y + 22, 'text-anchor': 'middle' });
-  t.textContent = name(id);
+  const g = el('g', { class: `node ${kind}${top ? ' top' : ''}` });
+  g.append(el('circle', { class: 'pulse', cx: x, cy: y }), el('circle', { class: 'ring', cx: x, cy: y }), el('circle', { class: 'dot', cx: x, cy: y }));
+  const a = angleOf.get(id) ?? 0, right = Math.cos(a) >= 0;
+  const t = el('text', { x, y, dx: right ? '0.9em' : '-0.9em', dy: '0.35em', 'text-anchor': right ? 'start' : 'end' });
+  t.textContent = base(id);
   const title = el('title'); title.textContent = id;
   g.append(t, title);
   gNodes.append(g);
   nodeEl.set(id, g);
 }
 
+function treeLine(a, b) {
+  const [x1, y1] = pos.get(a), [x2, y2] = pos.get(b);
+  gTree.append(el('line', { class: 'tree', x1, y1, x2, y2 }));
+}
+
 async function loadGraph() {
-  const { nodes, edges } = await (await fetch('/api/graph')).json();
-  document.getElementById('empty').hidden = nodes.length > 0;
-  document.getElementById('empty').textContent = L.empty;
-  layout(nodes, edges);
-  for (const [a, b] of edges) {
+  const g = await (await fetch('/api/graph')).json();
+  document.getElementById('roots').textContent = g.roots.map(base).join(' · ');
+  document.getElementById('roots').title = g.roots.join('\n');
+  const empty = document.getElementById('empty');
+  empty.hidden = g.items.some(i => i.kind !== 'root') && !g.capped;
+  empty.textContent = g.capped ? L.capped(g.items.length) : L.empty;
+  const note = document.getElementById('note');
+  note.hidden = !g.blocked?.length;
+  if (g.blocked?.length) {
+    note.textContent = '';
+    const b = document.createElement('b'); b.textContent = L.blocked + g.blocked.map(base).join(', ') + '.';
+    note.append(b, L.allow);
+  }
+  layout(g.items);
+  const isRoot = new Set(g.roots);
+  for (const it of g.items) if (it.parent && pos.has(it.parent)) treeLine(it.parent, it.id);
+  for (const it of g.items) addNode(it.id, it.kind, it.kind === 'dir' && isRoot.has(it.parent));
+  for (const [a, b] of g.links) {
     const [x1, y1] = pos.get(a), [x2, y2] = pos.get(b);
     gLinks.append(el('line', { class: 'link', x1, y1, x2, y2 }));
   }
-  nodes.forEach(addNode);
   fit();
 }
 
@@ -202,17 +261,30 @@ function setCurrent(id) {
   nodeEl.get(id)?.classList.add('current');
 }
 
-// A note the AI created: place it next to the notes it read
-function ensureNode(id) {
+// A file the AI created: put it one ring outside its folder
+function ensureNode(id, kind = 'file') {
   if (pos.has(id)) return;
-  const src = [...sources].map(s => pos.get(s)).filter(Boolean);
-  const cx = src.length ? src.reduce((a, p) => a + p[0], 0) / src.length : vb.x + vb.w / 2;
-  const cy = src.length ? src.reduce((a, p) => a + p[1], 0) / src.length : vb.y + vb.h / 2;
-  pos.set(id, [cx + 50, cy - 40]);
-  addNode(id);
+  const parent = parentOf(id);
+  if (pos.has(parent)) {
+    const a = (angleOf.get(parent) ?? 0) + (Math.random() - 0.5) * 0.08, d = (depthOf.get(parent) ?? 1) + 1;
+    pos.set(id, [Math.cos(a) * radius(d), Math.sin(a) * radius(d)]); angleOf.set(id, a); depthOf.set(id, d);
+    treeLine(parent, id);
+  } else {
+    pos.set(id, [vb.x + vb.w / 2, vb.y + vb.h / 2]);
+  }
+  addNode(id, kind);
   document.getElementById('empty').hidden = true;
 }
 
+// Move along the path to a node: line from the last place the AI was
+function visit(id, live) {
+  if (!nodeEl.has(id)) return;
+  if (current && current !== id) line('trail', current, id, live);
+  const g = nodeEl.get(id);
+  g.classList.remove('hit'); g.classList.add('visited');
+  setCurrent(id);
+}
+
 const logEl = document.getElementById('log');
 function addLog(e, tool, text, live) {
   document.getElementById('hint').hidden = true;
@@ -222,7 +294,7 @@ function addLog(e, tool, text, live) {
   if (e.type === 'undo') li.classList.add('undo');
   const a = document.createElement('span'); a.className = 'tool'; a.textContent = tool;
   const tm = document.createElement('time'); tm.textContent = new Date(e.t).toLocaleTimeString();
-  const b = document.createElement('span'); b.className = 'text'; b.textContent = text;
+  const b = document.createElement('span'); b.className = 'text'; b.textContent = text; b.title = e.path || '';
   li.append(a, tm, b);
   if (e.reason) { const w = document.createElement('span'); w.className = 'why'; w.textContent = e.reason; li.append(w); }
   if (e.changeId && e.type !== 'undo') {
@@ -242,32 +314,48 @@ function addLog(e, tool, text, live) {
   logEl.scrollTop = logEl.scrollHeight;
 }
 
+// Show paths shortly: the connected folder's name, then the rest
+function short(p) {
+  const root = rootsList.find(r => p === r || p.startsWith(r + '/'));
+  return root ? base(root) + p.slice(root.length) : p;
+}
+let rootsList = [];
+
 function onEvent(e, live) {
   if (e.type === 'search') {
     for (const h of e.hits) nodeEl.get(h)?.classList.add('hit');
-    addLog(e, 'search_vault', `"${e.query}" · ${L.hits(e.hits.length)}`, live);
+    addLog(e, 'search_files', `"${e.query}" · ${L.hits(e.hits.length)}`, live);
+  } else if (e.type === 'list') {
+    visit(e.path, live);
+    addLog(e, 'list_files', short(e.path) + '/', live);
   } else if (e.type === 'read') {
-    const g = nodeEl.get(e.path);
-    if (g) {
-      if (current && current !== e.path) line('trail', current, e.path, live);
-      g.classList.remove('hit'); g.classList.add('visited');
-      sources.add(e.path); setCurrent(e.path);
-    }
-    addLog(e, 'read_note', e.path, live);
+    visit(e.path, live);
+    if (nodeEl.has(e.path)) sources.add(e.path);
+    addLog(e, 'read_file', short(e.path), live);
   } else if (e.type === 'write' || e.type === 'edit') {
     ensureNode(e.path);
-    for (const s of sources) if (s !== e.path) line('src', s, e.path, live);
+    for (const s of sources) if (s !== e.path && pos.has(s)) line('src', s, e.path, live);
     const g = nodeEl.get(e.path);
     g.classList.remove('gone'); g.classList.add('written');
     setCurrent(e.path);
-    addLog(e, e.type === 'write' ? 'write_note' : 'edit_note', e.created ? `${e.path} (${L.created})` : e.path, live);
+    addLog(e, e.type === 'write' ? 'write_file' : 'edit_file', e.created ? `${short(e.path)} (${L.created})` : short(e.path), live);
+  } else if (e.type === 'move') {
+    visit(e.from, live);
+    ensureNode(e.path, e.dir ? 'dir' : 'file');
+    if (pos.has(e.from)) line('src', e.from, e.path, live);
+    nodeEl.get(e.from)?.classList.add('gone');
+    const g = nodeEl.get(e.path);
+    g.classList.remove('gone'); g.classList.add('written');
+    setCurrent(e.path);
+    addLog(e, 'move_file', `${short(e.from)} → ${short(e.path)}`, live);
   } else if (e.type === 'undo') {
+    if (e.back) nodeEl.get(e.back)?.classList.remove('gone');
     if (e.created) {
       nodeEl.get(e.path)?.classList.add('gone');
       gTrail.querySelectorAll(`[data-to="${CSS.escape(e.path)}"]`).forEach(l => l.style.opacity = 0);
     }
     logEl.querySelectorAll(`[data-change="${e.changeId}"]`).forEach(b => { b.disabled = true; b.textContent = L.undone; });
-    addLog(e, 'undo', e.path, live);
+    addLog(e, 'undo', short(e.path), live);
   }
 }
 
@@ -277,14 +365,14 @@ document.getElementById('clear').onclick = () => {
   current = null; sources = new Set();
 };
 
-// Drag to pan, wheel to zoom
+// Drag to pan, wheel or pinch to zoom
 let drag = null;
 svg.addEventListener('pointerdown', e => { drag = { x: e.clientX, y: e.clientY, vb: { ...vb } }; svg.classList.add('drag'); svg.setPointerCapture(e.pointerId); });
 svg.addEventListener('pointermove', e => {
   if (!drag) return;
   const k = vb.w / svg.clientWidth;
   vb.x = drag.vb.x - (e.clientX - drag.x) * k; vb.y = drag.vb.y - (e.clientY - drag.y) * k;
-  svg.setAttribute('viewBox', `${vb.x} ${vb.y} ${vb.w} ${vb.h}`);
+  setView();
 });
 svg.addEventListener('pointerup', () => { drag = null; svg.classList.remove('drag'); });
 svg.addEventListener('wheel', e => {
@@ -292,14 +380,16 @@ svg.addEventListener('wheel', e => {
   const k = Math.exp(e.deltaY * 0.0015), r = svg.getBoundingClientRect();
   const mx = vb.x + (e.clientX - r.left) / r.width * vb.w, my = vb.y + (e.clientY - r.top) / r.height * vb.h;
   vb = { x: mx - (mx - vb.x) * k, y: my - (my - vb.y) * k, w: vb.w * k, h: vb.h * k };
-  svg.setAttribute('viewBox', `${vb.x} ${vb.y} ${vb.w} ${vb.h}`);
+  setView();
 }, { passive: false });
+addEventListener('resize', fit);
 
 (async () => {
   const info = await (await fetch('/api/info')).json();
-  document.getElementById('vault').textContent = info.vault;
+  rootsList = info.roots;
   await loadGraph();
   const status = document.getElementById('status'), statusText = document.getElementById('statusText');
+  statusText.textContent = L.off;
   let replay = true;
   const es = new EventSource('/api/events');
   es.onopen = () => { status.classList.add('on'); statusText.textContent = L.live; setTimeout(() => { replay = false; }, 300); };
@@ -311,7 +401,6 @@ svg.addEventListener('wheel', e => {
     seen.add(e.key);
     onEvent(e, !replay);
   };
-  statusText.textContent = L.off;
 })();
 </script>
 </body>