claude-simple 0.1.0

package/public/files.js

@@ -0,0 +1,476 @@
+// files.js — Files tab with upload / download / delete + text/office preview
+import { effect, delegate, esc, $ } from './lib.js';
+import { currentProject, currentTab, filesRoot, filesPath, viewingFile, ctx } from './state.js';
+import { api, authHeaders, authQuery } from './api.js';
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function fileIcon(name) {
+  const ext = name.split('.').pop()?.toLowerCase();
+  return {
+    js: '📄', ts: '📄', jsx: '📄', tsx: '📄', py: '🐍', md: '📝', json: '⚙️',
+    html: '🌐', css: '🎨', sh: '⚡', env: '🔑',
+    docx: '📘', pptx: '📙', xlsx: '📗', pdf: '📕',
+  }[ext] || '📄';
+}
+
+function extOf(path) {
+  const base = (path || '').split('/').pop() || '';
+  const i = base.lastIndexOf('.');
+  return i >= 0 ? base.slice(i + 1).toLowerCase() : '';
+}
+
+function officeKind(path) {
+  const e = extOf(path);
+  return e === 'docx' || e === 'pptx' || e === 'xlsx' || e === 'pdf' ? e : null;
+}
+
+function sizeLabel(size) {
+  if (size == null) return '';
+  if (size > 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+  if (size > 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${size} B`;
+}
+
+function base64ToArrayBuffer(b64) {
+  const bin = atob(b64);
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+  return bytes.buffer;
+}
+
+const _scriptLoads = new Map();
+function loadScript(src) {
+  if (_scriptLoads.has(src)) return _scriptLoads.get(src);
+  const p = new Promise((resolve, reject) => {
+    const existing = document.querySelector(`script[data-src="${src}"]`);
+    if (existing) {
+      if (existing.dataset.loaded === '1') return resolve();
+      existing.addEventListener('load', () => resolve());
+      existing.addEventListener('error', () => reject(new Error(`Failed to load ${src}`)));
+      return;
+    }
+    const s = document.createElement('script');
+    s.src = src;
+    s.async = true;
+    s.dataset.src = src;
+    s.onload = () => { s.dataset.loaded = '1'; resolve(); };
+    s.onerror = () => reject(new Error(`Failed to load ${src}`));
+    document.head.appendChild(s);
+  });
+  _scriptLoads.set(src, p);
+  return p;
+}
+
+/** Map filename / path → highlight.js language id (or '' for plain text). */
+function langFromPath(path) {
+  const base = (path || '').split('/').pop() || '';
+  const lower = base.toLowerCase();
+  const byName = {
+    dockerfile: 'dockerfile', makefile: 'makefile', gemfile: 'ruby',
+    rakefile: 'ruby', procfile: 'yaml', 'cmakelists.txt': 'cmake',
+  };
+  if (byName[lower]) return byName[lower];
+  const ext = lower.includes('.') ? lower.split('.').pop() : '';
+  const map = {
+    js: 'javascript', mjs: 'javascript', cjs: 'javascript', jsx: 'javascript',
+    ts: 'typescript', tsx: 'typescript', mts: 'typescript', cts: 'typescript',
+    py: 'python', pyw: 'python', pyi: 'python',
+    rb: 'ruby', go: 'go', rs: 'rust', java: 'java', kt: 'kotlin', kts: 'kotlin',
+    c: 'c', h: 'c', cpp: 'cpp', cc: 'cpp', cxx: 'cpp', hpp: 'cpp', hh: 'cpp',
+    cs: 'csharp', swift: 'swift', php: 'php', scala: 'scala',
+    sh: 'bash', bash: 'bash', zsh: 'bash', fish: 'bash',
+    ps1: 'powershell', psm1: 'powershell',
+    html: 'xml', htm: 'xml', xhtml: 'xml', xml: 'xml', svg: 'xml',
+    css: 'css', scss: 'scss', less: 'less',
+    json: 'json', jsonc: 'json', json5: 'json',
+    yml: 'yaml', yaml: 'yaml', toml: 'ini', ini: 'ini', conf: 'ini', env: 'bash',
+    md: 'markdown', mdx: 'markdown', markdown: 'markdown',
+    sql: 'sql', graphql: 'graphql', gql: 'graphql',
+    vue: 'xml', svelte: 'xml',
+    r: 'r', lua: 'lua', pl: 'perl', pm: 'perl',
+    dart: 'dart', ex: 'elixir', exs: 'elixir', erl: 'erlang',
+    zig: 'zig', nim: 'nim', clj: 'clojure', cljs: 'clojure',
+    diff: 'diff', patch: 'diff',
+    dockerfile: 'dockerfile',
+  };
+  return map[ext] || '';
+}
+
+function highlightFilePreview(root) {
+  if (!root || typeof hljs === 'undefined') return;
+  root.querySelectorAll('pre code.file-preview-code').forEach(el => {
+    try {
+      delete el.dataset.highlighted;
+      hljs.highlightElement(el);
+    } catch { /* unknown language / empty */ }
+  });
+}
+
+function fileChrome(path, size, kindLabel) {
+  const sizeStr = sizeLabel(size);
+  return `
+    <div class="flex items-center gap-2 px-4 py-1.5 border-b border-base-300 flex-shrink-0 bg-base-200">
+      <span class="text-xs text-base-content/40 flex-1 truncate">${esc(path)} · ${esc(sizeStr)}${kindLabel ? ` · <span class="text-primary/70">${esc(kindLabel)}</span>` : ''}</span>
+      <button class="btn btn-ghost btn-xs" data-download-path="${esc(path)}">↓ Download</button>
+    </div>`;
+}
+
+// ── Directory / text render ───────────────────────────────────────────────────
+function renderDir(files) {
+  if (!Array.isArray(files) || !files.length) {
+    return '<div class="p-4 text-xs text-base-content/40">Empty directory</div>';
+  }
+  files.sort((a, b) => (b.isDir - a.isDir) || a.name.localeCompare(b.name));
+  return files.map(f => `
+    <div class="flex items-center gap-2 px-4 py-1.5 hover:bg-base-300 group"
+         ${f.isDir ? `data-dir-path="${esc(f.path)}"` : `data-file-path="${esc(f.path)}"`}>
+      <span class="cursor-pointer flex-shrink-0">${f.isDir ? '📁' : fileIcon(f.name)}</span>
+      <span class="text-sm flex-1 truncate cursor-pointer ${f.isDir ? 'text-primary' : ''}">${esc(f.name)}</span>
+      ${!f.isDir ? `
+        <button class="opacity-0 group-hover:opacity-100 btn btn-ghost btn-xs px-1 text-base-content/40 hover:text-base-content"
+                data-download-path="${esc(f.path)}" title="Download">↓</button>
+        <button class="opacity-0 group-hover:opacity-100 btn btn-ghost btn-xs px-1 text-error/60 hover:text-error"
+                data-delete-path="${esc(f.path)}" title="Delete">✕</button>` : ''}
+    </div>`).join('');
+}
+
+function renderTextFile(path, content, size) {
+  const isBinary = /[\x00-\x08\x0e-\x1f]/.test(content.slice(0, 512));
+  const lang = langFromPath(path);
+  const langClass = lang ? `language-${esc(lang)}` : '';
+  const body = isBinary
+    ? `<div class="p-4 text-xs text-base-content/40">Binary file — <button class="text-primary hover:underline" data-download-path="${esc(path)}">Download</button></div>`
+    : `<pre class="file-preview p-4 font-mono text-xs leading-relaxed overflow-auto flex-1 m-0"><code class="hljs file-preview-code ${langClass}">${esc(content)}</code></pre>`;
+  return fileChrome(path, size, isBinary ? 'binary' : (lang || 'text')) + body;
+}
+
+// ── Office previews ───────────────────────────────────────────────────────────
+async function renderDocx(arrayBuffer) {
+  await loadScript('https://cdn.jsdelivr.net/npm/mammoth@1.8.0/mammoth.browser.min.js');
+  if (typeof mammoth === 'undefined') throw new Error('mammoth failed to load');
+  const result = await mammoth.convertToHtml({ arrayBuffer });
+  const warn = result.messages?.length
+    ? `<div class="office-warn text-xs text-warning/80 px-3 py-1">${result.messages.length} conversion note(s)</div>`
+    : '';
+  return `<div class="office-preview office-docx overflow-auto flex-1 p-4 md">${warn}<div class="office-docx-body">${result.value || '<p class="text-base-content/40">Empty document</p>'}</div></div>`;
+}
+
+async function renderXlsx(arrayBuffer) {
+  await loadScript('https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js');
+  if (typeof XLSX === 'undefined') throw new Error('SheetJS failed to load');
+  const wb = XLSX.read(new Uint8Array(arrayBuffer), { type: 'array' });
+  const names = wb.SheetNames || [];
+  if (!names.length) {
+    return `<div class="p-4 text-xs text-base-content/40">Empty workbook</div>`;
+  }
+  const tabs = names.map((n, i) =>
+    `<button type="button" class="office-sheet-tab${i === 0 ? ' active' : ''}" data-sheet-idx="${i}">${esc(n)}</button>`
+  ).join('');
+  const sheets = names.map((n, i) => {
+    const sheet = wb.Sheets[n];
+    // sheet_to_html is fine for preview; escape not needed — SheetJS emits tags
+    let html;
+    try {
+      html = XLSX.utils.sheet_to_html(sheet, { id: `xlsx-sheet-${i}`, editable: false });
+    } catch {
+      html = '<p class="text-base-content/40 text-xs p-2">Unable to render this sheet</p>';
+    }
+    return `<div class="office-sheet-pane${i === 0 ? '' : ' hidden'}" data-sheet-pane="${i}">${html}</div>`;
+  }).join('');
+  return `
+    <div class="office-preview office-xlsx flex flex-col flex-1 min-h-0 overflow-hidden">
+      <div class="office-sheet-tabs flex gap-1 px-2 py-1.5 border-b border-base-300 overflow-x-auto flex-shrink-0 bg-base-200">${tabs}</div>
+      <div class="office-sheet-body flex-1 overflow-auto p-2">${sheets}</div>
+    </div>`;
+}
+
+function pptxExtractSlideTexts(xml) {
+  // Collect <a:t>…</a:t> runs; group roughly by paragraph breaks via </a:p>
+  const parts = [];
+  const paraRe = /<a:p[\s>][\s\S]*?<\/a:p>/g;
+  const textRe = /<a:t(?:\s[^>]*)?>([\s\S]*?)<\/a:t>/g;
+  let m;
+  const paras = xml.match(paraRe) || [xml];
+  for (const para of paras) {
+    const runs = [];
+    textRe.lastIndex = 0;
+    while ((m = textRe.exec(para)) !== null) {
+      const t = m[1]
+        .replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&')
+        .replace(/&quot;/g, '"').replace(/&apos;/g, "'");
+      if (t) runs.push(t);
+    }
+    if (runs.length) parts.push(runs.join(''));
+  }
+  return parts;
+}
+
+async function renderPptx(arrayBuffer) {
+  await loadScript('https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js');
+  if (typeof JSZip === 'undefined') throw new Error('JSZip failed to load');
+  const zip = await JSZip.loadAsync(arrayBuffer);
+  const slideFiles = Object.keys(zip.files)
+    .filter(n => /^ppt\/slides\/slide\d+\.xml$/i.test(n))
+    .sort((a, b) => {
+      const na = parseInt(a.match(/slide(\d+)/i)?.[1] || '0', 10);
+      const nb = parseInt(b.match(/slide(\d+)/i)?.[1] || '0', 10);
+      return na - nb;
+    });
+  if (!slideFiles.length) {
+    return `<div class="p-4 text-xs text-base-content/40">No slides found in this presentation</div>`;
+  }
+  const cards = [];
+  for (let i = 0; i < slideFiles.length; i++) {
+    const xml = await zip.files[slideFiles[i]].async('string');
+    const lines = pptxExtractSlideTexts(xml);
+    const body = lines.length
+      ? lines.map(l => `<p>${esc(l)}</p>`).join('')
+      : '<p class="text-base-content/40 italic">（此页无可提取文本 / 可能以图片为主）</p>';
+    cards.push(`
+      <article class="office-slide-card">
+        <header class="office-slide-num">Slide ${i + 1}</header>
+        <div class="office-slide-body">${body}</div>
+      </article>`);
+  }
+  return `
+    <div class="office-preview office-pptx overflow-auto flex-1 p-3 space-y-3">
+      <p class="text-xs text-base-content/50 px-1">文本预览（版式/图片不还原）· ${slideFiles.length} slide(s)</p>
+      ${cards.join('')}
+    </div>`;
+}
+
+async function ensurePdfJs() {
+  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js');
+  if (typeof pdfjsLib === 'undefined') throw new Error('pdf.js failed to load');
+  pdfjsLib.GlobalWorkerOptions.workerSrc =
+    'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+  return pdfjsLib;
+}
+
+async function renderPdf(arrayBuffer) {
+  const pdfjs = await ensurePdfJs();
+  const pdf = await pdfjs.getDocument({ data: arrayBuffer }).promise;
+  const total = pdf.numPages;
+  const maxPages = Math.min(total, 40); // cap for memory / UX
+  const pagesHtml = [];
+  for (let i = 1; i <= maxPages; i++) {
+    const page = await pdf.getPage(i);
+    const baseViewport = page.getViewport({ scale: 1 });
+    // Fit ~820px wide (readable on sidebar layout)
+    const scale = Math.min(1.5, 820 / baseViewport.width);
+    const viewport = page.getViewport({ scale });
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.floor(viewport.width);
+    canvas.height = Math.floor(viewport.height);
+    canvas.className = 'office-pdf-page';
+    canvas.dataset.page = String(i);
+    await page.render({ canvasContext: canvas.getContext('2d'), viewport }).promise;
+    pagesHtml.push(`
+      <figure class="office-pdf-figure">
+        <figcaption class="office-pdf-cap">Page ${i} / ${total}</figcaption>
+        ${canvas.outerHTML}
+      </figure>`);
+  }
+  const more = total > maxPages
+    ? `<p class="text-xs text-base-content/50 px-2">Showing first ${maxPages} of ${total} pages — download for full file.</p>`
+    : '';
+  return `
+    <div class="office-preview office-pdf overflow-auto flex-1 p-3 space-y-3">
+      <p class="text-xs text-base-content/50 px-1">PDF preview · ${total} page(s)</p>
+      ${more}
+      ${pagesHtml.join('')}
+    </div>`;
+}
+
+async function renderOfficeFile(path, base64, size) {
+  const kind = officeKind(path);
+  const labels = { docx: 'Word', pptx: 'PowerPoint', xlsx: 'Excel', pdf: 'PDF' };
+  const ab = base64ToArrayBuffer(base64);
+  let body;
+  if (kind === 'docx') body = await renderDocx(ab);
+  else if (kind === 'xlsx') body = await renderXlsx(ab);
+  else if (kind === 'pptx') body = await renderPptx(ab);
+  else if (kind === 'pdf') body = await renderPdf(ab);
+  else throw new Error('Unsupported office type');
+  return fileChrome(path, size, labels[kind] || kind) + body;
+}
+
+function buildBreadcrumb(pathStr, isFile) {
+  const parts = pathStr ? pathStr.split('/') : [];
+  const dirs = isFile ? parts.slice(0, -1) : parts;
+  let h = `<span class="cursor-pointer text-primary hover:underline" data-dir-path="">root</span>`;
+  let cum = '';
+  for (const p of dirs) {
+    cum = cum ? `${cum}/${p}` : p;
+    h += ` <span class="text-base-content/40">/</span> <span class="cursor-pointer text-primary hover:underline" data-dir-path="${esc(cum)}">${esc(p)}</span>`;
+  }
+  if (isFile) h += ` <span class="text-base-content/40">/</span> <span>${esc(parts.at(-1))}</span>`;
+  return h;
+}
+
+// ── Upload ────────────────────────────────────────────────────────────────────
+function triggerUpload() {
+  const proj = currentProject.peek();
+  const root = filesRoot.peek() || proj?.path;
+  if (!root) return;
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.multiple = true;
+  input.addEventListener('change', async () => {
+    const dir = filesPath.peek();
+    const id = proj?.id || '_';
+    const files = [...input.files];
+    let failed = false;
+    for (const file of files) {
+      const destPath = dir ? `${dir}/${file.name}` : file.name;
+      const url = `/api/projects/${id}/file?root=${encodeURIComponent(root)}&path=${encodeURIComponent(destPath)}`;
+      try {
+        const res = await fetch(url, {
+          method: 'POST',
+          headers: authHeaders(),
+          body: file,
+          duplex: 'half',
+        });
+        if (!res.ok) { const d = await res.json().catch(() => ({})); throw new Error(d.error || `HTTP ${res.status}`); }
+      } catch (e) { alert(`Upload failed (${file.name}): ${e.message}`); failed = true; break; }
+    }
+    if (!failed) {
+      const cur = filesPath.peek();
+      filesPath.value = cur + '\x00';
+      filesPath.value = cur;
+    }
+  });
+  input.click();
+}
+
+function downloadFile(proj, filePath) {
+  const root = filesRoot.peek() || proj?.path || '';
+  const id = proj?.id || '_';
+  const qs = authQuery({
+    root,
+    path: filePath,
+    download: 'true',
+  });
+  const url = `/api/projects/${id}/file?${qs}`;
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filePath.split('/').pop();
+  a.click();
+}
+
+async function deleteFile(proj, filePath) {
+  if (!confirm(`Delete "${filePath.split('/').pop()}"?`)) return;
+  const root = filesRoot.peek() || proj?.path || '';
+  const id = proj?.id || '_';
+  try {
+    await api('DELETE', `/api/projects/${id}/file?root=${encodeURIComponent(root)}&path=${encodeURIComponent(filePath)}`);
+    filesPath.value = filesPath.peek() + ' ';
+    filesPath.value = filesPath.peek().trimEnd();
+  } catch (e) { alert(`Delete failed: ${e.message}`); }
+}
+
+async function showFile(area, file, data, signal) {
+  const size = data.size ?? (typeof data.content === 'string' ? data.content.length : 0);
+  const kind = officeKind(file);
+  if (kind && data.encoding === 'base64') {
+    area.innerHTML = fileChrome(file, size, kind) +
+      `<div class="p-4 text-xs text-base-content/40">Parsing ${kind.toUpperCase()}…</div>`;
+    try {
+      const html = await renderOfficeFile(file, data.content, size);
+      if (signal.aborted) return;
+      area.innerHTML = html;
+    } catch (e) {
+      if (signal.aborted) return;
+      area.innerHTML = fileChrome(file, size, kind) +
+        `<div class="p-4 text-xs text-error">Preview failed: ${esc(e.message)} — <button class="text-primary hover:underline" data-download-path="${esc(file)}">Download</button></div>`;
+    }
+    return;
+  }
+  if (data.encoding === 'base64') {
+    area.innerHTML = fileChrome(file, size, 'binary') +
+      `<div class="p-4 text-xs text-base-content/40">Binary file — <button class="text-primary hover:underline" data-download-path="${esc(file)}">Download</button></div>`;
+    return;
+  }
+  area.innerHTML = renderTextFile(file, data.content || '', size);
+  highlightFilePreview(area);
+}
+
+// ── Init ──────────────────────────────────────────────────────────────────────
+export function initFilesTab() {
+  effect(() => {
+    const bc = $('files-breadcrumb');
+    if (!bc) return;
+    const isFile = viewingFile.value !== null;
+    bc.innerHTML = `
+      ${buildBreadcrumb(viewingFile.value ?? filesPath.value, isFile)}
+      <div class="flex-1"></div>
+      ${!isFile ? `<button id="btn-upload" class="btn btn-ghost btn-xs text-base-content/50 hover:text-base-content">↑ Upload</button>` : ''}`;
+  });
+
+  effect(() => {
+    const tab = currentTab.value;
+    const proj = currentProject.value;
+    // Prefer explicit filesRoot; else session cwd on the selected machine
+    const root = (filesRoot.value || proj?.path || '').trim();
+    const file = viewingFile.value;
+    const dir = filesPath.value;
+    const area = $('files-area');
+    if (!area) return;
+    const ctrl = new AbortController();
+    if (tab !== 'files') { return () => ctrl.abort(); }
+    if (!root) {
+      area.innerHTML = '<div class="p-4 text-xs text-base-content/40">No path yet — open a session (uses that machine&apos;s cwd) or type an absolute path and press Go.</div>';
+      return () => ctrl.abort();
+    }
+    const id = proj?.id || '_';
+    area.innerHTML = '<div class="p-4 text-xs text-base-content/40">Loading…</div>';
+    if (file !== null) {
+      api('GET', `/api/projects/${id}/file?root=${encodeURIComponent(root)}&path=${encodeURIComponent(file)}`, undefined, ctrl.signal)
+        .then(d => { if (!ctrl.signal.aborted) return showFile(area, file, d, ctrl.signal); })
+        .catch(e => {
+          if (!ctrl.signal.aborted && e?.name !== 'AbortError') {
+            area.innerHTML = `<div class="p-4 text-xs text-error">${esc(e.message)}</div>`;
+          }
+        });
+    } else {
+      api('GET', `/api/projects/${id}/files?root=${encodeURIComponent(root)}&path=${encodeURIComponent(dir)}`, undefined, ctrl.signal)
+        .then(d => {
+          if (ctrl.signal.aborted) return;
+          const list = Array.isArray(d) ? d : (Array.isArray(d?.files) ? d.files : null);
+          if (!list) {
+            area.innerHTML = `<div class="p-4 text-xs text-error">${esc(d?.error || 'Invalid directory listing')}</div>`;
+            return;
+          }
+          area.innerHTML = renderDir(list);
+        })
+        .catch(e => {
+          if (!ctrl.signal.aborted && e?.name !== 'AbortError') {
+            area.innerHTML = `<div class="p-4 text-xs text-error">${esc(e.message)}</div>`;
+          }
+        });
+    }
+    return () => ctrl.abort();
+  });
+
+  delegate.on('click', '[data-dir-path]', (_, el) => { viewingFile.value = null; filesPath.value = el.dataset.dirPath; });
+  delegate.on('click', '[data-file-path]', (_, el) => { viewingFile.value = el.dataset.filePath; });
+  delegate.on('click', '#btn-upload', () => triggerUpload());
+  delegate.on('click', '[data-download-path]', (_, el) => {
+    const proj = currentProject.peek();
+    if (proj) downloadFile(proj, el.dataset.downloadPath);
+  });
+  delegate.on('click', '[data-delete-path]', (_, el) => {
+    const proj = currentProject.peek();
+    if (proj) deleteFile(proj, el.dataset.deletePath);
+  });
+  // Excel sheet tabs
+  delegate.on('click', '.office-sheet-tab', (_, el) => {
+    const root = el.closest('.office-xlsx');
+    if (!root) return;
+    const idx = el.dataset.sheetIdx;
+    root.querySelectorAll('.office-sheet-tab').forEach(t => t.classList.toggle('active', t === el));
+    root.querySelectorAll('.office-sheet-pane').forEach(p => {
+      p.classList.toggle('hidden', p.dataset.sheetPane !== idx);
+    });
+  });
+}

package/public/git.js

@@ -0,0 +1,130 @@
+// git.js — Git tab
+import { signal, effect, delegate, esc, $ } from './lib.js';
+import { currentProject, currentTab, gitRoot } from './state.js';
+import { api } from './api.js';
+
+const diffStaged = signal(false);
+
+function renderGraph(raw) {
+  if (!raw) return '<span class="text-base-content/40">No commits</span>';
+  return raw.split('\n').map(line => {
+    const escaped = esc(line);
+    return escaped
+      .replace(/\b([0-9a-f]{7})\b/, '<span class="gh">$1</span>')
+      .replace(/\(([^)]*)\)/, '<span style="color:oklch(var(--wa))">($1)</span>');
+  }).join('\n');
+}
+
+function gitRenderer(data) {
+  if (!data) return '';
+  if (!data.isGit) return '<div class="p-4 text-sm text-base-content/50">Not a git repository</div>';
+  const statusColor = { M: 'text-warning', D: 'text-error' };
+  return `
+    <div class="px-4 py-2 text-xs text-base-content/50 border-b border-base-300">
+      Branch: <span class="text-success font-semibold">${esc(data.branch)}</span>
+    </div>
+    ${!data.files.length
+      ? '<div class="px-4 py-2 text-sm text-base-content/50">Working tree clean</div>'
+      : data.files.map(f => `
+        <div class="flex items-center gap-3 px-4 py-1 text-sm">
+          <span class="font-mono text-xs w-5 flex-shrink-0 ${statusColor[f.status] || 'text-success'}">${esc(f.status)}</span>
+          <span class="break-all">${esc(f.file)}</span>
+        </div>`).join('')
+    }
+    <div class="border-t border-base-300 p-4">
+      <div class="flex gap-4 text-xs mb-3">
+        <span id="diff-unstaged" class="cursor-pointer text-primary">Unstaged</span>
+        <span id="diff-staged"   class="cursor-pointer text-base-content/50">Staged</span>
+      </div>
+      <div id="diff-content" class="font-mono text-xs overflow-auto max-h-[30vh] whitespace-pre"></div>
+    </div>
+    <div class="border-t border-base-300">
+      <div class="flex items-center justify-between px-4 py-2 text-xs text-base-content/50 cursor-pointer select-none" id="git-graph-toggle">
+        <span class="uppercase tracking-wider font-medium">Git Graph</span>
+        <span id="git-graph-chevron" class="text-[10px]">▶</span>
+      </div>
+      <div id="git-graph-panel" class="hidden px-4 pb-4">
+        <div id="git-graph-content" class="git-graph overflow-x-auto max-h-[35vh] overflow-y-auto">
+          <span class="text-base-content/40">Loading…</span>
+        </div>
+      </div>
+    </div>`;
+}
+
+function renderDiff(diff) {
+  return diff.split('\n').map(line => {
+    if (line.startsWith('+') && !line.startsWith('+++')) return `<span class="diff-add">${esc(line)}</span>`;
+    if (line.startsWith('-') && !line.startsWith('---')) return `<span class="diff-del">${esc(line)}</span>`;
+    if (line.startsWith('@@'))                           return `<span class="diff-hunk">${esc(line)}</span>`;
+    if (/^(diff |index |---|[+]{3})/.test(line))         return `<span class="diff-head">${esc(line)}</span>`;
+    return `<span>${esc(line)}</span>`;
+  }).join('\n');
+}
+
+export function initGitTab() {
+  // Git status panel
+  effect(() => {
+    const tab  = currentTab.value;
+    const proj = currentProject.value;
+    const root = gitRoot.value || proj?.path;
+    const area = $('git-area');
+    if (!area) return;
+    const ctrl = new AbortController();
+    if (tab !== 'git') return () => ctrl.abort();
+    if (!root) {
+      area.innerHTML = '<div class="p-4 text-sm text-base-content/50">Enter a project root above, or open a session with a working directory.</div>';
+      return () => ctrl.abort();
+    }
+    const id = proj?.id || '_';
+    area.innerHTML = '<div class="p-4 text-xs text-base-content/40">Loading…</div>';
+    api('GET', `/api/projects/${id}/git/status?root=${encodeURIComponent(root)}`, undefined, ctrl.signal)
+      .then(d => { if (!ctrl.signal.aborted) area.innerHTML = gitRenderer(d); })
+      .catch(e => { if (!ctrl.signal.aborted && e?.name !== 'AbortError')
+        area.innerHTML = `<div class="p-4 text-xs text-error">${esc(e?.message ?? String(e))}</div>`; });
+    return () => ctrl.abort();
+  });
+
+  // Diff panel
+  effect(() => {
+    const proj   = currentProject.value;
+    const root   = gitRoot.value || proj?.path;
+    const staged = diffStaged.value;
+    const target = $('diff-content');
+    if (!target || !root) return;
+    const id   = proj?.id || '_';
+    const ctrl = new AbortController();
+    api('GET', `/api/projects/${id}/git/diff?root=${encodeURIComponent(root)}${staged ? '&staged=true' : ''}`, undefined, ctrl.signal)
+      .then(d => { if (!ctrl.signal.aborted) target.innerHTML = d?.diff ? renderDiff(d.diff) : '<span class="text-base-content/40">No changes</span>'; })
+      .catch(e => { if (!ctrl.signal.aborted && e?.name !== 'AbortError')
+        target.innerHTML = `<span class="text-error">${esc(e?.message ?? String(e))}</span>`; });
+    return () => ctrl.abort();
+  });
+
+  delegate.on('click', '#diff-unstaged, #diff-staged', (_, el) => {
+    const staged = el.id === 'diff-staged';
+    diffStaged.value = staged;
+    $('diff-unstaged').className = `cursor-pointer ${staged ? 'text-base-content/50' : 'text-primary'}`;
+    $('diff-staged').className   = `cursor-pointer ${staged ? 'text-primary' : 'text-base-content/50'}`;
+  });
+
+  // Git graph — load on expand
+  delegate.on('click', '#git-graph-toggle', () => {
+    const panel   = $('git-graph-panel');
+    const chevron = $('git-graph-chevron');
+    const open    = panel.classList.toggle('hidden');
+    chevron.textContent = open ? '▶' : '▼';
+    if (!open) loadGraph();
+  });
+}
+
+function loadGraph() {
+  const proj    = currentProject.peek();
+  const root    = gitRoot.peek() || proj?.path;
+  const content = $('git-graph-content');
+  if (!root || !content) return;
+  const id = proj?.id || '_';
+  content.innerHTML = '<span class="text-base-content/40">Loading…</span>';
+  api('GET', `/api/projects/${id}/git/log?root=${encodeURIComponent(root)}`)
+    .then(d => { content.innerHTML = d.graph ? renderGraph(d.graph) : '<span class="text-base-content/40">No commits</span>'; })
+    .catch(e => { content.innerHTML = `<span class="text-error">${esc(e.message)}</span>`; });
+}

package/public/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <!-- FOUC / calendar flash: decide before first paint -->
+  <script>
+  (function () {
+    try {
+      var theme = localStorage.getItem('theme') || 'dark';
+      document.documentElement.setAttribute('data-theme', theme);
+      var token = localStorage.getItem('token');
+      var hash = location.hash || '';
+      var restore = !!(token && /^#\/session\//.test(hash));
+      document.documentElement.classList.add('boot-pending');
+      if (restore) document.documentElement.classList.add('boot-restore');
+      if (token) document.documentElement.classList.add('boot-authed');
+    } catch (e) {
+      document.documentElement.classList.add('boot-pending');
+    }
+  })();
+  </script>
+  <style>
+    /* Hide app tree until JS has built the correct first screen */
+    html.boot-pending #root {
+      visibility: hidden !important;
+    }
+    html.boot-ready #root {
+      visibility: visible !important;
+    }
+    /* Session deep-link: never show welcome calendar during boot */
+    html.boot-restore #welcome {
+      display: none !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+    html.boot-restore #project-view {
+      display: flex !important;
+      flex-direction: column !important;
+      flex: 1 1 0 !important;
+      min-height: 0 !important;
+      overflow: hidden !important;
+    }
+    html.boot-restore #auth-screen,
+    html.boot-authed #auth-screen {
+      display: none !important;
+    }
+  </style>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <title>Claude Code</title>
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@5/daisyui.css" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked@9/marked.min.js"></script>
+  <link id="hljs-theme" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github-dark.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/highlight.min.js"></script>
+  <link rel="stylesheet" href="style.css?v=boot-2">
+</head>
+<body class="h-dvh overflow-hidden flex flex-col bg-base-100 text-base-content">
+  <div id="root" class="flex flex-col flex-1 overflow-hidden"></div>
+  <script type="module" src="app.js"></script>
+</body>
+</html>

package/public/lib.js

@@ -0,0 +1,2 @@
+export * from 'https://cdn.jsdelivr.net/gh/forechoandlook/mini-react@latest/dist/mini-react.min.js';
+// doc from https://cdn.jsdelivr.net/gh/forechoandlook/mini-react@latest/README.mini.md