create-walle 0.9.21 → 0.9.23

package/template/claude-task-manager/public/js/reviews.js

@@ -5,6 +5,13 @@
 
 const CR = {};
 let pinnedProjects = []; // Array of pinned project paths, persisted via savePref
+let projectChooserState = {
+  projects: [],
+  query: '',
+  filter: 'all',
+  scan: null,
+};
+let projectChooserRefreshTimer = null;
 
 let crState = {
   reviewType: 'code',    // code | doc
@@ -16,8 +23,10 @@ let crState = {
   files: [],             // Parsed diff files
   activeFile: null,      // Currently viewed file path
   comments: [],          // All comments for current review
+  viewedFiles: new Set(),// Paths marked "Viewed" (review progress), persisted per review+base
   diffMode: 'unified',   // unified | split
   document: null,         // Current document artifact in doc review mode
+  documentCandidates: null,
   docViewMode: 'rendered',// rendered | source | split
   activeBlock: null,      // Current document block id
   docLine: 1,
@@ -40,7 +49,10 @@ async function api(path, method, body) {
   let data = null;
   try { data = await res.json(); } catch (_) {}
   if (!res.ok || (data && data.error)) {
-    throw new Error((data && data.error) || ('HTTP ' + res.status));
+    const err = new Error((data && data.error) || ('HTTP ' + res.status));
+    err.status = res.status;
+    err.data = data;
+    throw err;
   }
   return data || {};
 }
@@ -54,6 +66,63 @@ function basename(p) {
   return String(p || '').split('/').filter(Boolean).pop() || 'document';
 }
 
+function replaceHash(hash) {
+  history.replaceState(null, '', location.pathname + location.search + (hash || ''));
+}
+
+function paramsFromHash(hash) {
+  const raw = String(hash || '').replace(/^#/, '');
+  const amp = raw.indexOf('&');
+  if (amp >= 0) return new URLSearchParams(raw.slice(amp + 1));
+  return new URLSearchParams(raw);
+}
+
+function sessionIdFromHash(hash) {
+  const raw = String(hash || '').replace(/^#/, '');
+  if (raw.startsWith('session=')) return decodeURIComponent(raw.slice('session='.length));
+  const params = paramsFromHash(hash);
+  return params.get('session') || params.get('sessionId') || '';
+}
+
+function activateSessionRoute(sessionId) {
+  if (!sessionId) return false;
+  const state = window._ctmState || window.state;
+  if (state) {
+    state.pendingHashSession = sessionId;
+    state.pendingHashType = 'active';
+  }
+  if (state?.sessions && typeof state.sessions.has === 'function' && state.sessions.has(sessionId) &&
+      typeof window.activateTab === 'function') {
+    window.activateTab(sessionId);
+  } else {
+    replaceHash('#session=' + encodeURIComponent(sessionId));
+  }
+  return true;
+}
+
+function isRecoverableDocumentOpenError(err) {
+  const status = Number(err && (err.status || err.statusCode)) || 0;
+  if (status === 400 || status === 404) return true;
+  return /document not found|relative document path requires|document path must be a file|unsupported document type/i
+    .test(String(err && err.message || ''));
+}
+
+function recoverFailedDocumentReviewNavigation(err, opts, previousHash) {
+  if (!isRecoverableDocumentOpenError(err)) return false;
+  const currentHash = String(location.hash || '');
+  const sessionId = opts?.sessionId || sessionIdFromHash(currentHash) || sessionIdFromHash(previousHash);
+  if (activateSessionRoute(sessionId)) return true;
+  if (previousHash && previousHash !== currentHash && !String(previousHash).startsWith('#review&type=doc')) {
+    replaceHash(previousHash);
+    return true;
+  }
+  if (currentHash.startsWith('#review') || currentHash === '#codereview') {
+    replaceHash('#review');
+    return true;
+  }
+  return false;
+}
+
 function markdownToSafeHtml(markdown) {
   const text = String(markdown || '');
   if (typeof marked !== 'undefined' && typeof DOMPurify !== 'undefined') {
@@ -125,30 +194,347 @@ CR.loadPinnedProjects = function(prefs) {
   if (prefs && Array.isArray(prefs)) pinnedProjects = prefs;
 };
 
+function homeShortPath(value) {
+  return String(value || '').replace(/^\/Users\/[^/]+/, '~');
+}
+
+function reviewTargetInfo(project) {
+  const projectPath = String(project?.path || project?.cwd || '');
+  const name = String(project?.name || basename(projectPath) || 'folder');
+  const branch = String(project?.branch || '');
+  const claudeMatch = projectPath.match(/^(.*)\/\.claude\/worktrees\/([^/]+)(?:\/(.*))?$/);
+  const walleMatch = projectPath.match(/^(.*)\/\.walle\/worktrees\/([^/]+)(?:\/(.*))?$/);
+  const genericMatch = projectPath.match(/^(.*)\/\.worktrees\/([^/]+)(?:\/(.*))?$/);
+  const match = claudeMatch || walleMatch || genericMatch;
+
+  if (match) {
+    const provider = match === claudeMatch ? 'Claude' : match === walleMatch ? 'Wall-E' : '';
+    const repoRoot = match[1] || '';
+    const worktreeName = match[2] || name;
+    const innerFolder = match[3] || '';
+    return {
+      kind: match === claudeMatch ? 'claude-worktree' : match === walleMatch ? 'walle-worktree' : 'worktree',
+      label: provider ? `${provider} worktree` : 'Worktree',
+      isWorktree: true,
+      displayName: name,
+      worktreeName,
+      repoName: basename(repoRoot),
+      repoRoot,
+      innerFolder,
+      path: projectPath,
+      shortPath: homeShortPath(projectPath),
+      branch,
+    };
+  }
+
+  const looksLikeGit = !!branch;
+  return {
+    kind: looksLikeGit && branch === 'main' ? 'main-checkout' : looksLikeGit ? 'git-folder' : 'folder',
+    label: looksLikeGit && branch === 'main' ? 'Main checkout' : looksLikeGit ? 'Git folder' : 'Folder',
+    isWorktree: false,
+    displayName: name,
+    worktreeName: '',
+    repoName: name,
+    repoRoot: projectPath,
+    innerFolder: '',
+    path: projectPath,
+    shortPath: homeShortPath(projectPath),
+    branch,
+  };
+}
+
+function projectMatchesChooserFilter(project, info) {
+  const filter = projectChooserState.filter || 'all';
+  if (filter === 'changed') return Number(project.fileCount || 0) > 0;
+  if (filter === 'worktrees') return !!info.isWorktree;
+  if (filter === 'main') return !info.isWorktree;
+  return true;
+}
+
+function projectMatchesChooserQuery(project, info) {
+  const query = String(projectChooserState.query || '').trim().toLowerCase();
+  if (!query) return true;
+  const sessionsText = (project.sessions || []).map(s => s.label || s.id || '').join(' ');
+  const haystack = [
+    project.name,
+    project.path,
+    project.branch,
+    info.label,
+    info.displayName,
+    info.worktreeName,
+    info.repoName,
+    sessionsText,
+  ].join(' ').toLowerCase();
+  return haystack.includes(query);
+}
+
+function filteredReviewProjects() {
+  return (projectChooserState.projects || []).filter((project) => {
+    const info = reviewTargetInfo(project);
+    return projectMatchesChooserFilter(project, info) && projectMatchesChooserQuery(project, info);
+  });
+}
+
+function reviewProjectChooserCounts(projects) {
+  const changed = projects.filter(p => Number(p.fileCount || 0) > 0).length;
+  const worktrees = projects.filter(p => reviewTargetInfo(p).isWorktree).length;
+  return {
+    total: projects.length,
+    changed,
+    worktrees,
+    folders: Math.max(0, projects.length - worktrees),
+  };
+}
+
+function scheduleProjectChooserRefresh(delayMs) {
+  if (projectChooserRefreshTimer) return;
+  projectChooserRefreshTimer = setTimeout(() => {
+    projectChooserRefreshTimer = null;
+    if (crState._view === 'projects' && document.getElementById('codereview-panel')?.classList.contains('active')) {
+      CR.showProjectList({ quiet: true });
+    }
+  }, Math.max(100, Number(delayMs || 1000)));
+}
+
+function updateProjectChooserPolling(scan) {
+  if (scan && scan.running) {
+    scheduleProjectChooserRefresh(1400);
+  } else if (projectChooserRefreshTimer) {
+    clearTimeout(projectChooserRefreshTimer);
+    projectChooserRefreshTimer = null;
+  }
+}
+
+function renderProjectScanStatus() {
+  const scan = projectChooserState.scan || {};
+  if (scan.running) {
+    const existing = (projectChooserState.projects || []).length;
+    return `<span class="cr-project-scan-status active"><span class="spinner"></span>${existing ? 'Refreshing counts' : 'Finding projects'}</span>`;
+  }
+  if (scan.error) {
+    return `<span class="cr-project-scan-status error">Refresh failed</span>`;
+  }
+  if (scan.builtAt) {
+    return `<span class="cr-project-scan-status">Updated ${escHtml(formatTimeAgo(scan.builtAt))}</span>`;
+  }
+  return '';
+}
+
+function renderReviewProjectFilterButton(filter, label, count) {
+  const active = projectChooserState.filter === filter ? ' active' : '';
+  const suffix = typeof count === 'number' ? ` <span>${count}</span>` : '';
+  return `<button class="cr-project-filter${active}" type="button" data-filter="${escAttr(filter)}" onclick="CR.setProjectFilter('${escAttr(filter)}')">${escHtml(label)}${suffix}</button>`;
+}
+
+function renderReviewProjectResults() {
+  const projects = filteredReviewProjects();
+  if (!projects.length) {
+    const query = String(projectChooserState.query || '').trim();
+    if (!query && projectChooserState.scan && projectChooserState.scan.running) {
+      return `<div class="cr-project-empty-state">
+        <div class="cr-project-empty-title">Refreshing review targets</div>
+        <div class="cr-project-empty-copy">Project discovery is running in the background. The page stays responsive while git counts load.</div>
+      </div>`;
+    }
+    return `<div class="cr-project-empty-state">
+      <div class="cr-project-empty-title">No matching review targets</div>
+      <div class="cr-project-empty-copy">${query ? 'Try a folder, worktree, branch, or session name.' : 'Change the filter to see more folders and worktrees.'}</div>
+    </div>`;
+  }
+
+  let html = '<div class="cr-project-list">';
+  for (const p of projects) {
+    const info = reviewTargetInfo(p);
+    const sessions = p.sessions || [];
+    const hasChanges = Number(p.fileCount || 0) > 0;
+    const isPinned = pinnedProjects.includes(p.path);
+    const firstSessionId = sessions.length ? sessions[0].id : '';
+    const targetLabel = info.isWorktree
+      ? `${info.label}: ${info.worktreeName}`
+      : info.label;
+
+    const sessionRows = renderReviewProjectSessionRows(p);
+    const filesHtml = hasChanges ? `<div class="cr-project-files" aria-label="Changed files">${(p.files || []).map(f =>
+      `<span class="cr-project-file">${escHtml(f.path)} <span class="cr-file-add">+${f.additions}</span> <span class="cr-file-del">-${f.deletions}</span></span>`
+    ).join('')}</div>` : '';
+
+    html += `<div class="cr-project-card ${hasChanges ? 'has-changes' : ''}${isPinned ? ' pinned' : ''}"
+      data-project-path="${escAttr(p.path)}"
+      role="button"
+      tabindex="0"
+      aria-label="Review ${escAttr(targetLabel)}"
+      onclick="CR.openReviewForProject('${escAttr(p.path)}', '${escAttr(firstSessionId)}')"
+      onkeydown="CR.onProjectCardKey(event, '${escAttr(p.path)}', '${escAttr(firstSessionId)}')"
+      ${isPinned ? `draggable="true" ondragstart="CR.onPinnedDragStart(event)" ondragover="CR.onPinnedDragOver(event)" ondragleave="CR.onPinnedDragLeave(event)" ondrop="CR.onPinnedDrop(event)"` : ''}>
+      <div class="cr-project-card-header">
+        <div class="cr-project-card-left">
+          ${isPinned ? '<span class="cr-drag-handle" title="Drag to reorder">&#8942;</span>' : ''}
+          <button class="cr-pin-btn ${isPinned ? 'pinned' : ''}" onclick="event.stopPropagation(); CR.togglePinProject('${escAttr(p.path)}')" title="${isPinned ? 'Unpin target' : 'Pin target'}">&#x1F4CC;</button>
+          <div class="cr-project-title-group">
+            <span class="cr-project-name">${escHtml(info.displayName)}</span>
+            ${info.isWorktree ? `<span class="cr-worktree-name" title="${escAttr(info.repoRoot)}">${escHtml(info.worktreeName)}</span>` : ''}
+          </div>
+        </div>
+        <div class="cr-project-status-row">
+          <span class="cr-target-type ${escAttr(info.kind)}">${escHtml(info.label)}</span>
+          ${p.branch ? `<span class="cr-header-branch">${escHtml(p.branch)}</span>` : ''}
+          <span class="cr-project-session-count">${sessions.length} session${sessions.length !== 1 ? 's' : ''}</span>
+          ${hasChanges ? `<span class="cr-project-badge">${p.fileCount} file${p.fileCount !== 1 ? 's' : ''} changed</span>` : '<span class="cr-project-clean">Clean</span>'}
+        </div>
+      </div>
+      <div class="cr-project-path-grid">
+        <span class="cr-path-label">Folder</span>
+        <span class="cr-project-path" title="${escAttr(p.path)}">${escHtml(info.shortPath)}</span>
+        ${info.isWorktree ? `<span class="cr-path-label">Source</span><span class="cr-project-path" title="${escAttr(info.repoRoot)}">${escHtml(info.repoName || homeShortPath(info.repoRoot))}</span>` : ''}
+      </div>
+      <div class="cr-project-card-actions">
+        <button class="cr-btn primary cr-review-target-btn" type="button" onclick="event.stopPropagation(); CR.openReviewForProject('${escAttr(p.path)}', '${escAttr(firstSessionId)}')">Review this ${info.isWorktree ? 'worktree' : 'folder'}</button>
+        <span class="cr-project-action-hint">${info.isWorktree ? 'Exact worktree checkout' : 'Exact folder checkout'}</span>
+      </div>
+      ${sessionRows}
+      ${filesHtml}
+    </div>`;
+  }
+  html += '</div>';
+  return html;
+}
+
+// Session labels are derived from a session's first message, which often leaks CTM/agent
+// command wrappers (e.g. <command-message>pua:pua-en</command-message>) and bare URLs.
+// Strip those so the chooser shows a clean, human-readable hint.
+function _cleanReviewLabel(text) {
+  let t = String(text || '');
+  t = t.replace(/<command-(?:message|name|args|stdout|stderr)>[\s\S]*?<\/command-(?:message|name|args|stdout|stderr)>/gi, ' ');
+  t = t.replace(/<\/?[a-z][^>]*>/gi, ' '); // any other stray tags (e.g. unmatched command-* )
+  t = t.replace(/\s+/g, ' ').trim();
+  return t;
+}
+
+function renderReviewProjectSessionRows(project) {
+  const sessions = project.sessions || [];
+  if (!sessions.length) return '';
+  const maxVisible = 3;
+  let html = '<div class="cr-project-session-section"><div class="cr-session-section-label">Optional session context</div><div class="cr-project-session-list">';
+  for (let i = 0; i < sessions.length; i++) {
+    const s = sessions[i];
+    const hidden = i >= maxVisible ? ' hidden' : '';
+    const activeTag = s.active ? '<span class="cr-session-active">Active</span>' : '';
+    const timeAgo = formatTimeAgo(s.modifiedAt || s.fileModifiedAt);
+    html += `<div class="cr-project-session-item${hidden}" data-overflow="${i >= maxVisible ? '1' : '0'}"
+      onclick="event.stopPropagation(); CR.openReviewForProject('${escAttr(project.path)}', '${escAttr(s.id)}')"
+      title="${escAttr(s.id)}">
+      ${activeTag}
+      <span class="cr-session-label">${escHtml(_cleanReviewLabel(s.label) || s.id.slice(0, 8))}</span>
+      <span class="cr-session-time">${escHtml(timeAgo)}</span>
+    </div>`;
+  }
+  if (sessions.length > maxVisible) {
+    html += `<button class="cr-session-toggle" onclick="event.stopPropagation(); CR.toggleSessionList(this)">
+      +${sessions.length - maxVisible} more session${sessions.length - maxVisible > 1 ? 's' : ''}
+    </button>`;
+  }
+  html += '</div></div>';
+  return html;
+}
+
+function renderReviewProjectChooser(projects) {
+  const counts = reviewProjectChooserCounts(projects);
+  return `<div class="cr-project-picker">
+    <div class="cr-project-chooser-header">
+      <div class="cr-project-chooser-copy">
+        <div class="cr-picker-eyebrow">Review</div>
+        <h2>Choose folder or worktree</h2>
+        <p>Select the exact checkout to review. Session rows are optional context; the folder or worktree is the review target.</p>
+      </div>
+      ${renderProjectScanStatus()}
+    </div>
+    <div class="cr-project-toolbar">
+      <label class="cr-project-search">
+        <span class="cr-project-search-icon">&#x2315;</span>
+        <input type="search" value="${escAttr(projectChooserState.query)}" placeholder="Search folders, worktrees, branches, sessions..." aria-label="Search review targets" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" oninput="CR.setProjectSearch(this.value)">
+      </label>
+      <div class="cr-project-filters" aria-label="Filter review targets">
+        ${renderReviewProjectFilterButton('all', 'All', counts.total)}
+        ${renderReviewProjectFilterButton('changed', 'Changed', counts.changed)}
+        ${renderReviewProjectFilterButton('worktrees', 'Worktrees', counts.worktrees)}
+        ${renderReviewProjectFilterButton('main', 'Folders', counts.folders)}
+      </div>
+      <span class="cr-project-result-count" id="cr-project-result-count"></span>
+    </div>
+    <div class="cr-project-results" id="cr-project-results">${renderReviewProjectResults()}</div>
+  </div>`;
+}
+
+function updateReviewProjectResults() {
+  const results = document.getElementById('cr-project-results');
+  if (results) results.innerHTML = renderReviewProjectResults();
+  const count = document.getElementById('cr-project-result-count');
+  if (count) {
+    const filtered = filteredReviewProjects().length;
+    const total = (projectChooserState.projects || []).length;
+    count.textContent = filtered === total ? `${total} targets` : `${filtered} of ${total}`;
+  }
+  document.querySelectorAll('.cr-project-filter').forEach((button) => {
+    button.classList.toggle('active', button.dataset.filter === projectChooserState.filter);
+  });
+}
+
+CR.setProjectSearch = function(value) {
+  projectChooserState.query = String(value || '');
+  updateReviewProjectResults();
+};
+
+CR.setProjectFilter = function(filter) {
+  projectChooserState.filter = ['all', 'changed', 'worktrees', 'main'].includes(filter) ? filter : 'all';
+  updateReviewProjectResults();
+};
+
+CR.onProjectCardKey = function(event, projectPath, sessionId) {
+  if (!event || (event.key !== 'Enter' && event.key !== ' ')) return;
+  event.preventDefault();
+  CR.openReviewForProject(projectPath, sessionId || '');
+};
+
 // --- Show project list (default view when panel opens) ---
-CR.showProjectList = async function() {
+CR.showProjectList = async function(options = {}) {
   const seq = ++crState._projectSeq;
+  const quiet = !!options.quiet;
   crState._view = 'projects';
   crState.reviewType = 'code';
   crState.reviewId = null;
   crState.document = null;
+  crState.documentCandidates = null;
   crState.activeBlock = null;
   const header = document.getElementById('cr-header');
   const tree = document.getElementById('cr-file-tree');
   const area = document.getElementById('cr-diff-area');
   const footer = document.getElementById('cr-footer');
 
-  if (header) header.innerHTML = '<span class="cr-header-title">Code Review</span>';
+  // Chooser view has no file tree — hide the empty left rail (restored on open).
+  document.getElementById('codereview-panel')?.classList.add('cr-choosing');
+  if (header) header.innerHTML = '<span class="cr-header-title">Review</span>';
   if (tree) tree.innerHTML = '';
   if (footer) footer.innerHTML = '';
-  if (area) area.innerHTML = '<div class="cr-loading"><span class="spinner"></span> Scanning projects...</div>';
+  if (area && (!quiet || !(projectChooserState.projects || []).length)) {
+    area.innerHTML = projectChooserState.projects.length
+      ? renderReviewProjectChooser(projectChooserState.projects)
+      : '<div class="cr-loading"><span class="spinner"></span> Loading cached review targets...</div>';
+  }
 
   try {
     const data = await api('/reviews/tracked-projects');
     if (seq !== crState._projectSeq || crState._view !== 'projects') return;
     const projects = data.projects || [];
+    projectChooserState.scan = data.scan || null;
 
     if (projects.length === 0) {
+      if (projectChooserState.scan && projectChooserState.scan.running) {
+        projectChooserState.projects = [];
+        if (area) area.innerHTML = renderReviewProjectChooser([]);
+        updateReviewProjectResults();
+        updateProjectChooserPolling(projectChooserState.scan);
+        return;
+      }
       if (area) area.innerHTML = `<div class="cr-diff-empty">
         <div style="text-align:center">
           <div style="font-size:32px;opacity:0.3;margin-bottom:12px">&#x1F4C1;</div>
@@ -170,63 +556,14 @@ CR.showProjectList = async function() {
       return 0; // Keep original (most recent) order for unpinned
     });
 
-    // Render project cards
-    let html = '<div class="cr-project-list">';
-    for (const p of projects) {
-      const hasChanges = p.fileCount > 0;
-      const isPinned = pinnedProjects.includes(p.path);
-      const firstSessionId = p.sessions.length ? p.sessions[0].id : '';
-
-      // Sessions list (collapsed if > 3, show all with toggle)
-      const maxVisible = 3;
-      let sessionsHtml = '';
-      if (p.sessions.length > 0) {
-        sessionsHtml = '<div class="cr-project-session-list">';
-        for (let i = 0; i < p.sessions.length; i++) {
-          const s = p.sessions[i];
-          const hidden = i >= maxVisible ? ' hidden' : '';
-          const activeTag = s.active ? '<span class="cr-session-active">Active</span>' : '';
-          const timeAgo = formatTimeAgo(s.modifiedAt);
-          sessionsHtml += `<div class="cr-project-session-item${hidden}" data-overflow="${i >= maxVisible ? '1' : '0'}"
-            onclick="event.stopPropagation(); CR.openReviewForProject('${escAttr(p.path)}', '${escAttr(s.id)}')"
-            title="${escAttr(s.id)}">
-            ${activeTag}
-            <span class="cr-session-label">${escHtml(s.label)}</span>
-            <span class="cr-session-time">${escHtml(timeAgo)}</span>
-          </div>`;
-        }
-        if (p.sessions.length > maxVisible) {
-          sessionsHtml += `<button class="cr-session-toggle" onclick="event.stopPropagation(); CR.toggleSessionList(this)">
-            +${p.sessions.length - maxVisible} more session${p.sessions.length - maxVisible > 1 ? 's' : ''}
-          </button>`;
-        }
-        sessionsHtml += '</div>';
-      }
-
-      html += `<div class="cr-project-card ${hasChanges ? 'has-changes' : ''}${isPinned ? ' pinned' : ''}"
-        data-project-path="${escAttr(p.path)}"
-        onclick="CR.openReviewForProject('${escAttr(p.path)}', '${escAttr(firstSessionId)}')"
-        ${isPinned ? `draggable="true" ondragstart="CR.onPinnedDragStart(event)" ondragover="CR.onPinnedDragOver(event)" ondragleave="CR.onPinnedDragLeave(event)" ondrop="CR.onPinnedDrop(event)"` : ''}>
-        <div class="cr-project-card-header">
-          ${isPinned ? '<span class="cr-drag-handle" title="Drag to reorder">&#8942;</span>' : ''}
-          <button class="cr-pin-btn ${isPinned ? 'pinned' : ''}" onclick="event.stopPropagation(); CR.togglePinProject('${escAttr(p.path)}')" title="${isPinned ? 'Unpin project' : 'Pin to top'}">&#x1F4CC;</button>
-          <span class="cr-project-name">${escHtml(p.name)}</span>
-          ${p.branch ? `<span class="cr-header-branch">${escHtml(p.branch)}</span>` : ''}
-          <span class="cr-project-session-count">${p.sessions.length} session${p.sessions.length !== 1 ? 's' : ''}</span>
-          ${hasChanges ? `<span class="cr-project-badge">${p.fileCount} file${p.fileCount !== 1 ? 's' : ''} changed</span>` : '<span class="cr-project-clean">Clean</span>'}
-        </div>
-        <div class="cr-project-path">${escHtml(p.path)}</div>
-        ${sessionsHtml}
-        ${hasChanges ? `<div class="cr-project-files">${p.files.map(f =>
-          `<span class="cr-project-file">${escHtml(f.path)} <span class="cr-file-add">+${f.additions}</span> <span class="cr-file-del">-${f.deletions}</span></span>`
-        ).join('')}</div>` : ''}
-      </div>`;
-    }
-    html += '</div>';
-    if (area) area.innerHTML = html;
+    projectChooserState.projects = projects;
+    if (area) area.innerHTML = renderReviewProjectChooser(projects);
+    updateReviewProjectResults();
+    updateProjectChooserPolling(projectChooserState.scan);
   } catch (e) {
     if (seq !== crState._projectSeq || crState._view !== 'projects') return;
     if (area) area.innerHTML = `<div class="cr-diff-empty" style="color:var(--red)">Failed to load projects: ${escHtml(e.message)}</div>`;
+    updateProjectChooserPolling(null);
   }
 };
 
@@ -281,10 +618,14 @@ CR.openReview = async function(sessionId, projectPath) {
   crState.baseRef = '';
   crState.files = [];
   crState.comments = [];
+  crState.viewedFiles = new Set();
+  try { crState.diffMode = localStorage.getItem('ctm.review.diffMode') === 'split' ? 'split' : 'unified'; } catch {}
   crState.activeFile = null;
   crState.reviewId = null;
   crState.document = null;
+  crState.documentCandidates = null;
   crState.activeBlock = null;
+  document.getElementById('codereview-panel')?.classList.remove('cr-choosing');
 
   // Show panel
   if (typeof window.activateTab === 'function') {
@@ -296,7 +637,7 @@ CR.openReview = async function(sessionId, projectPath) {
   }
 
   // Update URL hash with folder info
-  const hashParts = ['#codereview'];
+  const hashParts = ['#review'];
   if (projectPath) hashParts.push('project=' + encodeURIComponent(projectPath));
   if (sessionId) hashParts.push('session=' + encodeURIComponent(sessionId));
   history.replaceState(null, '', location.pathname + location.search + hashParts.join('&'));
@@ -305,22 +646,28 @@ CR.openReview = async function(sessionId, projectPath) {
   renderLoading();
 
   try {
-    // Load branch, commits, and rich commit log in parallel
-    const [branchData, commitsData, logData] = await Promise.all([
+    // Load branch, commits, rich commit log, and the default review base in parallel
+    const [branchData, commitsData, logData, baseInfo] = await Promise.all([
       api(`/reviews/branch?project=${encodeURIComponent(projectPath)}`),
       api(`/reviews/commits?project=${encodeURIComponent(projectPath)}`),
       api(`/reviews/commit-log?project=${encodeURIComponent(projectPath)}&count=20`),
+      api(`/reviews/base-info?project=${encodeURIComponent(projectPath)}`).catch(() => null),
     ]);
     if (seq !== crState._openSeq || crState._view !== 'review') return;
     crState.branch = branchData.branch || '';
     crState._commitLog = logData.commits || [];
+    crState._baseInfo = baseInfo;
+    // Default to "all branch work vs main" (PR model); fall back through uncommitted →
+    // working tree → staged to the first base that actually has changes, so a freshly
+    // opened project never lands on a misleading empty "No changes detected" screen.
+    crState.baseRef = pickInitialBaseRef(baseInfo);
     renderHeader(commitsData.commits || []);
 
     // Create review record in DB
     const { id } = await api('/reviews', 'POST', {
       session_id: sessionId,
       project_path: projectPath,
-      base_ref: '',
+      base_ref: crState.baseRef,
     });
     if (seq !== crState._openSeq || crState._view !== 'review') return;
     crState.reviewId = id;
@@ -336,11 +683,13 @@ CR.openReview = async function(sessionId, projectPath) {
 };
 
 CR.openDocumentReview = async function(filePath, line, opts) {
+  opts = opts || {};
   const seq = ++crState._openSeq;
   const targetLine = Math.max(1, Number(line) || 1);
+  const previousHash = location.hash || '';
   crState._view = 'review';
   crState.reviewType = 'doc';
-  crState.sessionId = opts?.sessionId || null;
+  crState.sessionId = opts.sessionId || null;
   crState.projectPath = null;
   crState.baseRef = '';
   crState.branch = '';
@@ -349,8 +698,10 @@ CR.openDocumentReview = async function(filePath, line, opts) {
   crState.activeFile = filePath || null;
   crState.reviewId = null;
   crState.document = null;
+  crState.documentCandidates = null;
   crState.activeBlock = null;
   crState.docLine = targetLine;
+  document.getElementById('codereview-panel')?.classList.remove('cr-choosing');
 
   if (typeof window.activateTab === 'function') {
     if (!window._ctmState.tabOrder.includes('codereview')) {
@@ -360,9 +711,13 @@ CR.openDocumentReview = async function(filePath, line, opts) {
     if (typeof window.renderTabs === 'function') window.renderTabs();
   }
 
-  history.replaceState(null, '', location.pathname + location.search
-    + '#review&type=doc&path=' + encodeURIComponent(filePath || '')
-    + '&line=' + encodeURIComponent(String(targetLine)));
+  const routeParams = new URLSearchParams();
+  routeParams.set('type', 'doc');
+  routeParams.set('path', filePath || '');
+  routeParams.set('line', String(targetLine));
+  if (opts.cwd) routeParams.set('cwd', opts.cwd);
+  if (crState.sessionId) routeParams.set('session', crState.sessionId);
+  history.replaceState(null, '', location.pathname + location.search + '#review&' + routeParams.toString());
 
   renderDocHeader();
   renderLoading();
@@ -371,27 +726,103 @@ CR.openDocumentReview = async function(filePath, line, opts) {
     const data = await api('/reviews/document-review', 'POST', {
       path: filePath,
       line: targetLine,
+      cwd: opts.cwd || undefined,
       session_id: crState.sessionId || undefined,
     });
     if (seq !== crState._openSeq || crState.reviewType !== 'doc') return;
     crState.reviewId = data.id;
     crState.document = data.document || null;
+    crState.documentCandidates = null;
     crState.projectPath = crState.document?.projectRoot || data.review?.project_path || null;
     crState.activeFile = crState.document?.path || filePath;
     crState.comments = data.review?.comments || [];
     const targetBlock = findDocBlockForLine(crState.document?.line || targetLine);
     crState.activeBlock = targetBlock?.id || null;
+    if (crState.document?.path) {
+      const canonicalParams = new URLSearchParams();
+      canonicalParams.set('type', 'doc');
+      canonicalParams.set('path', crState.document.path);
+      canonicalParams.set('line', String(crState.document.line || targetLine));
+      if (crState.sessionId) canonicalParams.set('session', crState.sessionId);
+      history.replaceState(null, '', location.pathname + location.search + '#review&' + canonicalParams.toString());
+    }
     renderDocHeader();
     renderDocTree();
     renderDocReview();
   } catch (e) {
     if (seq !== crState._openSeq || crState.reviewType !== 'doc') return;
+    if (e?.data?.code === 'EAMBIGUOUS' && Array.isArray(e.data.candidates) && e.data.candidates.length) {
+      renderDocumentCandidateChooser(filePath, targetLine, opts, e.data.candidates);
+      if (typeof window.toast === 'function') window.toast('Choose which document to review', { type: 'info' });
+      return;
+    }
     const area = document.getElementById('cr-diff-area');
     if (area) area.innerHTML = `<div class="cr-diff-empty" style="color:var(--red)">Failed to open document review: ${escHtml(e.message)}</div>`;
     if (typeof window.toast === 'function') window.toast('Failed to open document review: ' + e.message, { type: 'error' });
+    recoverFailedDocumentReviewNavigation(e, opts, previousHash);
   }
 };
 
+CR.openDocumentReference = async function(rawReference, opts) {
+  const parsed = window.CTMDocLinks && typeof window.CTMDocLinks.splitReference === 'function'
+    ? window.CTMDocLinks.splitReference(rawReference, opts && opts.line)
+    : { path: String(rawReference || ''), line: opts && opts.line || 1 };
+  return CR.openDocumentReview(parsed.path, parsed.line, opts || {});
+};
+
+CR.openDocumentCandidate = function(index) {
+  const state = crState.documentCandidates;
+  const candidate = state && Array.isArray(state.candidates) ? state.candidates[index] : null;
+  if (!candidate || !candidate.path) return;
+  const opts = Object.assign({}, state.opts || {});
+  delete opts.cwd;
+  return CR.openDocumentReview(candidate.path, state.line || 1, opts);
+};
+
+function renderDocumentCandidateChooser(rawPath, line, opts, candidates) {
+  crState.documentCandidates = {
+    rawPath: rawPath || '',
+    line: Math.max(1, Number(line) || 1),
+    opts: Object.assign({}, opts || {}),
+    candidates: candidates.slice(0, 50),
+  };
+  crState.document = null;
+  crState.projectPath = candidates[0]?.projectRoot || null;
+  crState.comments = [];
+  crState.activeBlock = null;
+  renderDocHeader();
+  const tree = document.getElementById('cr-file-tree');
+  const footer = document.getElementById('cr-footer');
+  const area = document.getElementById('cr-diff-area');
+  if (tree) {
+    tree.innerHTML = candidates.slice(0, 50).map((candidate, index) => `
+      <div class="cr-file-item ${index === 0 ? 'active' : ''}" onclick="CR.openDocumentCandidate(${index})">
+        <span class="cr-file-icon">MD</span>
+        <span class="cr-file-name">${escHtml(candidate.relativePath || candidate.path || '')}</span>
+      </div>
+    `).join('');
+  }
+  if (footer) footer.innerHTML = '';
+  if (!area) return;
+  const title = escHtml(rawPath || 'document');
+  const list = candidates.slice(0, 50).map((candidate, index) => `
+    <button class="cr-doc-candidate" type="button" onclick="CR.openDocumentCandidate(${index})">
+      <span class="cr-doc-candidate-name">${escHtml(candidate.relativePath || basename(candidate.path))}</span>
+      <span class="cr-doc-candidate-path">${escHtml(candidate.projectRoot || '')}</span>
+    </button>
+  `).join('');
+  area.innerHTML = `
+    <div class="cr-doc-candidate-shell">
+      <div class="cr-doc-candidate-panel">
+        <div class="cr-doc-candidate-eyebrow">Document Review</div>
+        <h2>Choose the document for ${title}</h2>
+        <p>The reference matches multiple Markdown/text files in this project. Pick the artifact to review; CTM will then canonicalize the route to the exact file.</p>
+        <div class="cr-doc-candidate-list">${list}</div>
+      </div>
+    </div>
+  `;
+}
+
 async function loadDiff() {
   const seq = ++crState._diffSeq;
   renderLoading();
@@ -407,6 +838,7 @@ async function loadDiff() {
       api(`/reviews/${crState.reviewId}`, 'PUT', { file_count: crState.files.length }).catch(() => {});
     }
 
+    _loadViewedFiles();
     if (crState.files.length === 0) {
       renderNoChanges();
     } else {
@@ -431,15 +863,108 @@ CR.changeBase = async function(value) {
 
 CR.refreshDiff = function() { loadDiff(); };
 
+// Diff layout: 'unified' (default) or 'split' (side-by-side). Persisted globally.
+CR.setDiffMode = function(mode) {
+  mode = mode === 'split' ? 'split' : 'unified';
+  if (crState.diffMode === mode) return;
+  crState.diffMode = mode;
+  try { localStorage.setItem('ctm.review.diffMode', mode); } catch {}
+  renderHeader();
+  if (crState.reviewType === 'code' && crState.files.length) renderDiff();
+};
+
+// --- "Viewed" file state + review progress (persisted per review+base in localStorage) ---
+function _viewedStorageKey() {
+  // Key by project + base (stable across reopens) rather than the ephemeral review row id,
+  // which is recreated on each open and would lose viewed-state between sessions.
+  return `ctm.review.viewed.${crState.projectPath || 'none'}.${crState.baseRef || 'wt'}`;
+}
+function _loadViewedFiles() {
+  crState.viewedFiles = new Set();
+  try {
+    const raw = localStorage.getItem(_viewedStorageKey());
+    if (raw) {
+      const arr = JSON.parse(raw);
+      const present = new Set(crState.files.map(f => f.path));
+      // Drop stale entries for files no longer in the diff (e.g. after a base change).
+      for (const p of arr) if (present.has(p)) crState.viewedFiles.add(p);
+    }
+  } catch {}
+}
+function _saveViewedFiles() {
+  try { localStorage.setItem(_viewedStorageKey(), JSON.stringify([...crState.viewedFiles])); } catch {}
+}
+CR.toggleViewed = function(filePath, ev) {
+  if (ev) { ev.stopPropagation(); ev.preventDefault(); }
+  if (crState.viewedFiles.has(filePath)) crState.viewedFiles.delete(filePath);
+  else crState.viewedFiles.add(filePath);
+  _saveViewedFiles();
+  // Update just the affected DOM: the tree item + the diff section collapse + progress.
+  renderFileTree();
+  const section = document.querySelector(`.cr-diff-file-section[data-file-path="${CSS.escape(filePath)}"]`);
+  if (section) section.classList.toggle('viewed', crState.viewedFiles.has(filePath));
+  _renderReviewProgress();
+};
+CR.markAllViewed = function(viewed) {
+  crState.viewedFiles = viewed ? new Set(crState.files.map(f => f.path)) : new Set();
+  _saveViewedFiles();
+  renderFileTree();
+  renderDiff();
+};
+// Progress indicator ("N / M reviewed" + bar) lives in the footer; updated in place.
+function _renderReviewProgress() {
+  const el = document.getElementById('cr-progress');
+  if (!el) return;
+  const total = crState.files.length;
+  const done = crState.files.filter(f => crState.viewedFiles.has(f.path)).length;
+  const pct = total ? Math.round((done / total) * 100) : 0;
+  el.innerHTML = total
+    ? `<span class="cr-progress-label">${done} / ${total} reviewed</span>
+       <span class="cr-progress-bar"><span class="cr-progress-fill" style="width:${pct}%"></span></span>`
+    : '';
+}
+
+// Order the "working-set" bases by preference for the initial view, given base-info counts.
+// On a feature branch: all-branch-work → all-uncommitted → working tree → staged.
+// On main/detached: all-uncommitted → working tree → staged.
+function _workingBaseOrder(baseInfo) {
+  const c = (baseInfo && baseInfo.counts) || {};
+  const vsMain = ['--vs-main', 'All changes vs ' + ((baseInfo && baseInfo.mainBranch) || 'main'), c['vs-main'] || 0];
+  const rest = [
+    ['--uncommitted', 'All uncommitted', c['uncommitted'] || 0],
+    ['', 'Working tree (unstaged)', c['working'] || 0],
+    ['--staged', 'Staged changes', c['staged'] || 0],
+  ];
+  return (baseInfo && baseInfo.kind === 'vs-main') ? [vsMain, ...rest] : rest;
+}
+
+// Choose the initial base ref: the first working-set base with a non-zero count, else the
+// server's default sentinel (so a truly-clean repo still shows an honest empty state).
+function pickInitialBaseRef(baseInfo) {
+  if (!baseInfo) return '';
+  const firstNonEmpty = _workingBaseOrder(baseInfo).find(([, , n]) => n > 0);
+  return firstNonEmpty ? firstNonEmpty[0] : (baseInfo.defaultBase || '');
+}
+
 // --- Render functions ---
 
 function renderHeader(commits) {
   const h = document.getElementById('cr-header');
   if (!h) return;
-  const backLink = `<a class="cr-back-link" onclick="CR.backToSession()">&#x2190; Back to Projects</a>`;
-  const branchBadge = crState.branch
-    ? `<span class="cr-header-branch">${escHtml(crState.branch)}</span>`
-    : '';
+  const backLink = `<a class="cr-back-link" onclick="CR.backToSession()">&#x2190; Change target</a>`;
+  const targetInfo = reviewTargetInfo({
+    path: crState.projectPath,
+    name: basename(crState.projectPath),
+    branch: crState.branch,
+  });
+  const targetMeta = targetInfo.isWorktree
+    ? `${targetInfo.label} · ${targetInfo.worktreeName}`
+    : targetInfo.label;
+  const targetHtml = `<div class="cr-review-target" title="${escAttr(crState.projectPath || '')}">
+    <span class="cr-review-target-kicker">Target</span>
+    <span class="cr-review-target-name">${escHtml(targetInfo.displayName)}</span>
+    <span class="cr-review-target-meta">${escHtml(targetMeta)}${crState.branch ? ` · ${escHtml(crState.branch)}` : ''}</span>
+  </div>`;
   const modeTabs = `<div class="cr-review-mode-tabs" aria-label="Review type">
     <button class="cr-review-mode-btn active" type="button">Code</button>
     <button class="cr-review-mode-btn" type="button" onclick="CR.showDocumentOpenState()" title="Open a Markdown document URL to review docs">Docs</button>
@@ -449,35 +974,40 @@ function renderHeader(commits) {
   // logMap keyed by both full SHA and short SHA for flexible lookup
   const logMap = {};
   for (const lc of (crState._commitLog || [])) { logMap[lc.sha] = lc; logMap[lc.shortSha] = lc; }
-  let baseOptions = `<option value=""${crState.baseRef === '' ? ' selected' : ''}>Working tree (unstaged)</option>`;
-  baseOptions += `<option value="--staged"${crState.baseRef === '--staged' ? ' selected' : ''}>Staged changes</option>`;
-  if (commits) {
-    for (const c of commits) {
+  // Working-set bases first (all branch work / uncommitted / working / staged), each
+  // labelled with its file count so the choice is obvious; then a commits group.
+  const _countSuffix = (n) => (typeof n === 'number' ? ` (${n})` : '');
+  let baseOptions = '';
+  for (const [val, label, count] of _workingBaseOrder(crState._baseInfo)) {
+    const sel = crState.baseRef === val ? ' selected' : '';
+    baseOptions += `<option value="${escAttr(val)}"${sel}>${escHtml(label)}${_countSuffix(count)}</option>`;
+  }
+  let commitOptions = '';
+  const commitList = commits || crState._commits;
+  if (commits) crState._commits = commits; // store for later re-render
+  if (commitList) {
+    for (const c of commitList) {
       const sel = crState.baseRef === c.sha ? ' selected' : '';
       const rich = logMap[c.sha];
       const meta = rich ? ` \u00B7 ${rich.author.split(' ')[0]} \u00B7 ${formatCommitDate(rich.authorDate)}` : '';
-      baseOptions += `<option value="${escHtml(c.sha)}"${sel}>${escHtml(c.sha.slice(0,7))} ${escHtml(c.message.slice(0,40))}${meta}</option>`;
-    }
-    // Store for later re-render
-    crState._commits = commits;
-  } else if (crState._commits) {
-    for (const c of crState._commits) {
-      const sel = crState.baseRef === c.sha ? ' selected' : '';
-      const rich = logMap[c.sha];
-      const meta = rich ? ` \u00B7 ${rich.author.split(' ')[0]} \u00B7 ${formatCommitDate(rich.authorDate)}` : '';
-      baseOptions += `<option value="${escHtml(c.sha)}"${sel}>${escHtml(c.sha.slice(0,7))} ${escHtml(c.message.slice(0,40))}${meta}</option>`;
+      commitOptions += `<option value="${escHtml(c.sha)}"${sel}>${escHtml(c.sha.slice(0,7))} ${escHtml(c.message.slice(0,40))}${meta}</option>`;
     }
   }
+  const commitGroup = commitOptions ? `<optgroup label="Since a commit">${commitOptions}</optgroup>` : '';
 
   h.innerHTML = `
     ${backLink}
     <span class="cr-header-title">Review</span>
     ${modeTabs}
-    ${branchBadge}
+    ${targetHtml}
     <div class="cr-header-actions">
       <button class="cr-chat-toggle" onclick="CR.toggleChat()" title="Toggle AI Chat (Cmd+Shift+C)" id="cr-chat-toggle-btn">&#x1F4AC; Chat</button>
-      <label style="font-size:11px;color:var(--fg-dim)">Base:</label>
-      <select class="cr-base-select" onchange="CR.changeBase(this.value)">${baseOptions}</select>
+      <div class="cr-diff-mode-toggle" role="group" aria-label="Diff layout">
+        <button class="cr-diff-mode-btn ${crState.diffMode !== 'split' ? 'active' : ''}" type="button" onclick="CR.setDiffMode('unified')" title="Unified diff">Unified</button>
+        <button class="cr-diff-mode-btn ${crState.diffMode === 'split' ? 'active' : ''}" type="button" onclick="CR.setDiffMode('split')" title="Side-by-side diff">Split</button>
+      </div>
+      <label class="cr-compare-label">Compare:</label>
+      <select class="cr-base-select" onchange="CR.changeBase(this.value)"><optgroup label="Changes">${baseOptions}</optgroup>${commitGroup}</select>
       <button class="cr-btn" onclick="CR.refreshDiff()" title="Refresh diff">&#x21BB; Refresh</button>
       <div class="send-dropdown-wrap" id="cr-send-dropdown-wrap">
         <button class="cr-btn primary btn-main" onclick="CR.submitReview()" id="cr-submit-btn" disabled>Send</button>
@@ -530,6 +1060,7 @@ CR.showDocumentOpenState = function() {
   crState._view = 'review';
   crState.reviewId = null;
   crState.document = null;
+  crState.documentCandidates = null;
   crState.comments = [];
   renderDocHeader();
   const tree = document.getElementById('cr-file-tree');
@@ -577,8 +1108,11 @@ function renderDocTree() {
   for (const block of headings) {
     const count = docCommentsForBlock(block).filter(c => c.status === 'open').length;
     const active = crState.activeBlock === block.id;
+    // TOC entry: no leading `#` glyph; hierarchy is shown via padding-left
+    // (cr-doc-level-N classes from CSS). The empty cr-file-icon span is
+    // retained so the existing icon+name+badge layout stays predictable.
     html += `<div class="cr-file-item cr-doc-heading cr-doc-level-${Math.min(block.level || 1, 6)} ${active ? 'active' : ''}" onclick="CR.selectDocBlock('${escAttr(block.id)}')">
-      <span class="cr-file-icon">#</span>
+      <span class="cr-file-icon" aria-hidden="true"></span>
       <span class="cr-file-name" title="${escAttr(block.text)}">${escHtml(block.text)}</span>
       ${count ? `<span class="cr-file-badge">${count}</span>` : ''}
     </div>`;
@@ -622,9 +1156,70 @@ function renderDocReview() {
   } else {
     area.scrollTop = 0;
   }
+  setupDocScrollSpy(area);
   renderFooter();
 }
 
+// Scroll-spy: highlight the TOC entry for the heading-block currently in
+// view. Uses IntersectionObserver scoped to the rendered pane so the active
+// block tracks the user's reading position. Re-runs after every renderDoc
+// because the DOM is rebuilt each time.
+let _docScrollSpyObserver = null;
+function setupDocScrollSpy(area) {
+  if (_docScrollSpyObserver) { try { _docScrollSpyObserver.disconnect(); } catch {} _docScrollSpyObserver = null; }
+  if (!area || typeof IntersectionObserver !== 'function') return;
+  const pane = area.querySelector('.cr-doc-rendered-pane');
+  if (!pane) return;
+  const blocks = Array.from(pane.querySelectorAll('.cr-doc-block'));
+  if (!blocks.length) return;
+
+  // Map block id → its heading block id (for non-heading blocks, attribute
+  // them to the nearest preceding heading so the TOC stays anchored).
+  const headingFor = new Map();
+  let lastHeadingId = null;
+  for (const block of blocks) {
+    const blockId = block.getAttribute('data-block-id');
+    const isHeading = !!block.querySelector('.cr-doc-markdown > h1, .cr-doc-markdown > h2, .cr-doc-markdown > h3, .cr-doc-markdown > h4, .cr-doc-markdown > h5, .cr-doc-markdown > h6');
+    if (isHeading) lastHeadingId = blockId;
+    headingFor.set(blockId, lastHeadingId);
+  }
+
+  const tree = document.getElementById('cr-file-tree');
+  const setActive = (headingId) => {
+    if (!tree) return;
+    tree.querySelectorAll('.cr-doc-heading.active').forEach(el => el.classList.remove('active'));
+    if (!headingId) return;
+    const escaped = (typeof CSS !== 'undefined' && CSS.escape) ? CSS.escape(headingId) : headingId.replace(/"/g, '');
+    const sel = `.cr-doc-heading[onclick*="${escaped}"]`;
+    const target = tree.querySelector(sel);
+    if (target) target.classList.add('active');
+  };
+
+  // Track the topmost intersecting block. Threshold 0 + rootMargin
+  // forces the "active" block to be the one just below the top of the
+  // viewport — same pattern as Stripe Docs and Notion.
+  const visible = new Map();
+  _docScrollSpyObserver = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      const id = entry.target.getAttribute('data-block-id');
+      if (entry.isIntersecting) visible.set(id, entry.boundingClientRect.top);
+      else visible.delete(id);
+    }
+    if (!visible.size) return;
+    // Choose the entry with the smallest top — i.e. closest to the top of viewport.
+    let topId = null, topY = Infinity;
+    for (const [id, y] of visible) {
+      if (y < topY) { topY = y; topId = id; }
+    }
+    setActive(headingFor.get(topId) || null);
+  }, {
+    root: area,
+    rootMargin: '-12px 0px -70% 0px',  // active = block crossing the top 30% band
+    threshold: 0,
+  });
+  blocks.forEach(b => _docScrollSpyObserver.observe(b));
+}
+
 function renderDocRenderedPane(doc) {
   let html = `<article class="cr-doc-article" data-doc-path="${escAttr(doc.path)}">`;
   for (const block of doc.blocks) {
@@ -812,9 +1407,13 @@ function renderLoading() {
 function renderNoChanges() {
   const area = document.getElementById('cr-diff-area');
   const tree = document.getElementById('cr-file-tree');
-  const message = crState.baseRef === '--staged'
-    ? 'No staged changes'
-    : (crState.baseRef ? `Commit ${crState.baseRef.slice(0,7)} has no file changes` : 'Working tree is clean against HEAD');
+  const mainBranch = (crState._baseInfo && crState._baseInfo.mainBranch) || 'main';
+  let message;
+  if (crState.baseRef === '--vs-main') message = `This branch has no changes vs ${mainBranch}`;
+  else if (crState.baseRef === '--uncommitted') message = 'Nothing uncommitted — working tree and index are clean';
+  else if (crState.baseRef === '--staged') message = 'No staged changes';
+  else if (crState.baseRef) message = `Commit ${crState.baseRef.slice(0,7)} has no file changes`;
+  else message = 'Working tree is clean against HEAD';
   if (area) area.innerHTML = `<div class="cr-no-changes">
     <div class="cr-no-changes-icon">&#x2714;</div>
     <div class="cr-no-changes-text">No changes detected</div>
@@ -846,8 +1445,12 @@ function renderFileTree() {
     const fExt = (f.path.match(/\.[^.]+$/) || [''])[0].toLowerCase();
     const isImage = f.isBinary && imgExts.includes(fExt);
     const icon = f.isNew ? '&#x2795;' : f.isDeleted ? '&#x2796;' : isImage ? '&#x1F5BC;' : f.isBinary ? '&#x1F4E6;' : '&#x1F4C4;';
-    return `<div class="cr-file-item ${isActive ? 'active' : ''} ${commentCount ? 'has-comments' : ''}"
+    const viewed = crState.viewedFiles.has(f.path);
+    return `<div class="cr-file-item ${isActive ? 'active' : ''} ${commentCount ? 'has-comments' : ''} ${viewed ? 'viewed' : ''}"
                  onclick="CR.selectFile('${escAttr(f.path)}')">
+      <span class="cr-file-viewed ${viewed ? 'on' : ''}" role="checkbox" aria-checked="${viewed}"
+            title="${viewed ? 'Mark as not viewed' : 'Mark as viewed'} (v)"
+            onclick="CR.toggleViewed('${escAttr(f.path)}', event)">${viewed ? '&#x2714;' : ''}</span>
       <span class="cr-file-icon">${icon}</span>
       <span class="cr-file-name" title="${escHtml(f.path)}">${escHtml(f.path)}</span>
       <span class="cr-file-stats">
@@ -857,6 +1460,7 @@ function renderFileTree() {
       ${commentCount ? `<span class="cr-file-badge">${commentCount}</span>` : ''}
     </div>`;
   }).join('');
+  _renderReviewProgress();
 }
 
 CR.selectFile = function(filePath) {
@@ -905,6 +1509,151 @@ function _renderCommitSummaryCard(c) {
   return html;
 }
 
+// Comment threads anchored exactly at (file, lineNum, side). Shared by unified + split.
+function _commentThreadRows(file, lineNum, side) {
+  if (!lineNum) return '';
+  const threadComments = crState.comments.filter(c =>
+    c.file_path === file.path && c.side === side && (c.line_end || c.line_start) === lineNum
+  );
+  return threadComments.length ? renderCommentThread(threadComments, file.path, lineNum, side) : '';
+}
+
+// An "expand hidden context" row. from/to are new-side line numbers; oldDelta maps a new
+// line number to its old number (oldNum = newNum + oldDelta) in the unchanged gap.
+function _expandRow(file, from, to, oldDelta) {
+  const count = to > 0 ? (to - from + 1) : 0;
+  if (to > 0 && count <= 0) return '';
+  const label = count > 0 ? `Expand ${count} line${count > 1 ? 's' : ''}` : 'Expand remaining lines';
+  return `<tr class="cr-diff-expand-row"><td colspan="4">
+    <button class="cr-expand-btn" onclick="CR.expandContext(this, '${escAttr(file.path)}', ${from}, ${to}, ${oldDelta})">&#x22EF; ${label}</button>
+  </td></tr>`;
+}
+
+// Unified diff table for one file (old + new gutters, single content column).
+function _renderFileDiffUnified(file) {
+  let html = '<table class="cr-diff-table" data-file-path="' + escAttr(file.path) + '"><tbody>';
+  for (let hi = 0; hi < file.hunks.length; hi++) {
+    const hunk = file.hunks[hi];
+    // Expand row for the gap before this hunk (leading context, or between hunks).
+    if (!file.isNew && !file.isDeleted) {
+      const oldDelta = hunk.oldStart - hunk.newStart;
+      if (hi === 0) {
+        if (hunk.newStart > 1) html += _expandRow(file, 1, hunk.newStart - 1, oldDelta);
+      } else {
+        const prev = file.hunks[hi - 1];
+        const gapStart = prev.newStart + prev.newLines;
+        const gapEnd = hunk.newStart - 1;
+        if (gapEnd >= gapStart) html += _expandRow(file, gapStart, gapEnd, oldDelta);
+      }
+    }
+    html += `<tr class="cr-diff-hunk-header"><td colspan="4">@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@ ${escHtml(hunk.header)}</td></tr>`;
+    for (const line of hunk.lines) {
+      const cls = line.type === 'add' ? 'add' : line.type === 'del' ? 'del' : '';
+      const prefix = line.type === 'add' ? '+' : line.type === 'del' ? '-' : ' ';
+      const oldNum = line.oldNum != null ? line.oldNum : '';
+      const newNum = line.newNum != null ? line.newNum : '';
+      const side = line.type === 'del' ? 'old' : 'new';
+      const lineNum = newNum || oldNum;
+      const lineId = `${file.path}:${side}:${lineNum}`;
+      html += `<tr class="cr-diff-line ${cls}" data-line-id="${escAttr(lineId)}" data-file="${escAttr(file.path)}" data-line="${lineNum}" data-side="${side}">
+        <td class="cr-line-num" onmousedown="CR.onLineClick(event, '${escAttr(file.path)}', ${oldNum || 'null'}, '${side}')">${oldNum}</td>
+        <td class="cr-line-num" onmousedown="CR.onLineClick(event, '${escAttr(file.path)}', ${newNum || 'null'}, 'new')">${newNum}</td>
+        <td class="cr-line-prefix">${prefix}</td>
+        <td class="cr-line-content">${escHtml(line.content)}</td>
+      </tr>`;
+      html += _commentThreadRows(file, lineNum, side);
+    }
+  }
+  // Trailing expand row (context after the last hunk, to end of file).
+  if (!file.isNew && !file.isDeleted && file.hunks.length) {
+    const last = file.hunks[file.hunks.length - 1];
+    const lastNewEnd = last.newStart + last.newLines - 1;
+    const oldDelta = (last.oldStart + last.oldLines - 1) - lastNewEnd;
+    html += _expandRow(file, lastNewEnd + 1, 0, oldDelta);
+  }
+  return html + '</tbody></table>';
+}
+
+// Fetch hidden context lines and splice them in where the "Expand" row was clicked.
+CR.expandContext = async function(btn, filePath, from, to, oldDelta) {
+  if (!btn || btn._loading) return;
+  btn._loading = true;
+  const row = btn.closest('tr');
+  const original = btn.innerHTML;
+  btn.innerHTML = '&#x22EF; Loading…';
+  try {
+    const q = new URLSearchParams({ project: crState.projectPath, path: filePath, from: String(from) });
+    if (to > 0) q.set('to', String(to));
+    if (crState.baseRef) q.set('ref', crState.baseRef);
+    const data = await api('/reviews/file-lines?' + q.toString());
+    const lines = data.lines || [];
+    if (!lines.length) { row.remove(); return; }
+    const rowsHtml = lines.map(l => {
+      const newNum = l.num;
+      const oldNum = newNum + oldDelta;
+      const lineId = `${filePath}:new:${newNum}`;
+      return `<tr class="cr-diff-line" data-line-id="${escAttr(lineId)}" data-file="${escAttr(filePath)}" data-line="${newNum}" data-side="new">
+        <td class="cr-line-num" onmousedown="CR.onLineClick(event, '${escAttr(filePath)}', ${oldNum}, 'old')">${oldNum}</td>
+        <td class="cr-line-num" onmousedown="CR.onLineClick(event, '${escAttr(filePath)}', ${newNum}, 'new')">${newNum}</td>
+        <td class="cr-line-prefix"> </td>
+        <td class="cr-line-content">${escHtml(l.text)}</td>
+      </tr>`;
+    }).join('');
+    row.insertAdjacentHTML('beforebegin', rowsHtml);
+    row.remove();
+  } catch (e) {
+    btn.innerHTML = original;
+    btn._loading = false;
+    if (typeof window.toast === 'function') window.toast('Could not expand context: ' + e.message, { type: 'error' });
+  }
+};
+
+// Align hunk lines into side-by-side rows: context lines pair 1:1; runs of deletions and
+// additions are paired index-wise (extra rows on one side get a blank cell opposite).
+function _alignHunkRows(lines) {
+  const rows = [];
+  let dels = [], adds = [];
+  const flush = () => {
+    const n = Math.max(dels.length, adds.length);
+    for (let i = 0; i < n; i++) rows.push({ left: dels[i] || null, right: adds[i] || null });
+    dels = []; adds = [];
+  };
+  for (const line of lines) {
+    if (line.type === 'del') dels.push(line);
+    else if (line.type === 'add') adds.push(line);
+    else { flush(); rows.push({ left: line, right: line, ctx: true }); }
+  }
+  flush();
+  return rows;
+}
+
+// Side-by-side diff table for one file (old | new columns).
+function _renderFileDiffSplit(file) {
+  const fp = escAttr(file.path);
+  const cell = (line, sideNum, sideName, sideCls) => {
+    if (!line) return `<td class="cr-line-num"></td><td class="cr-line-content cr-split-empty"></td>`;
+    const num = line[sideNum] != null ? line[sideNum] : '';
+    return `<td class="cr-line-num" onmousedown="CR.onLineClick(event, '${fp}', ${num || 'null'}, '${sideName}')">${num}</td>
+      <td class="cr-line-content ${sideCls}">${escHtml(line.content)}</td>`;
+  };
+  let html = '<table class="cr-diff-table split"><tbody>';
+  for (const hunk of file.hunks) {
+    html += `<tr class="cr-diff-hunk-header"><td colspan="4">@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@ ${escHtml(hunk.header)}</td></tr>`;
+    for (const row of _alignHunkRows(hunk.lines)) {
+      const leftCls = row.ctx ? '' : (row.left ? 'del' : '');
+      const rightCls = row.ctx ? '' : (row.right ? 'add' : '');
+      html += `<tr class="cr-diff-line-split">
+        ${cell(row.left, 'oldNum', 'old', leftCls)}
+        ${cell(row.right, 'newNum', 'new', rightCls)}
+      </tr>`;
+      // Comment threads: anchor under the new side when present, else the old side.
+      if (row.right && row.right.newNum != null) html += _commentThreadRows(file, row.right.newNum, 'new');
+      else if (row.left && row.left.oldNum != null) html += _commentThreadRows(file, row.left.oldNum, 'old');
+    }
+  }
+  return html + '</tbody></table>';
+}
+
 function renderDiff() {
   const area = document.getElementById('cr-diff-area');
   if (!area) return;
@@ -954,9 +1703,13 @@ function renderDiff() {
   for (const file of crState.files) {
     const fileId = 'cr-file-' + escAttr(file.path);
 
-    // Sticky file header
-    html += `<div class="cr-diff-file-section" id="${fileId}" data-file-path="${escAttr(file.path)}">`;
+    // Sticky file header — viewed files collapse to just this header (click to expand).
+    const viewed = crState.viewedFiles.has(file.path);
+    html += `<div class="cr-diff-file-section ${viewed ? 'viewed' : ''}" id="${fileId}" data-file-path="${escAttr(file.path)}">`;
     html += `<div class="cr-diff-file-header sticky">
+      <span class="cr-diff-file-viewed ${viewed ? 'on' : ''}" role="checkbox" aria-checked="${viewed}"
+            title="${viewed ? 'Mark as not viewed' : 'Mark as viewed'} (v)"
+            onclick="CR.toggleViewed('${escAttr(file.path)}', event)">${viewed ? '&#x2714; Viewed' : 'Viewed'}</span>
       <span class="cr-diff-file-path">${escHtml(file.path)}</span>
       <span class="cr-file-stats" style="font-size:12px">
         <span class="cr-file-add">+${file.additions}</span>
@@ -984,41 +1737,8 @@ function renderDiff() {
       continue;
     }
 
-    // Diff table
-    html += '<table class="cr-diff-table"><tbody>';
-
-    for (const hunk of file.hunks) {
-      html += `<tr class="cr-diff-hunk-header"><td colspan="4">@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@ ${escHtml(hunk.header)}</td></tr>`;
-
-      for (let i = 0; i < hunk.lines.length; i++) {
-        const line = hunk.lines[i];
-        const cls = line.type === 'add' ? 'add' : line.type === 'del' ? 'del' : '';
-        const prefix = line.type === 'add' ? '+' : line.type === 'del' ? '-' : ' ';
-        const oldNum = line.oldNum != null ? line.oldNum : '';
-        const newNum = line.newNum != null ? line.newNum : '';
-        const lineId = `${file.path}:${line.type === 'del' ? 'old' : 'new'}:${newNum || oldNum}`;
-
-        html += `<tr class="cr-diff-line ${cls}" data-line-id="${escAttr(lineId)}" data-file="${escAttr(file.path)}" data-line="${newNum || oldNum}" data-side="${line.type === 'del' ? 'old' : 'new'}">
-          <td class="cr-line-num" onmousedown="CR.onLineClick(event, '${escAttr(file.path)}', ${oldNum || 'null'}, '${line.type === 'del' ? 'old' : 'new'}')">${oldNum}</td>
-          <td class="cr-line-num" onmousedown="CR.onLineClick(event, '${escAttr(file.path)}', ${newNum || 'null'}, 'new')">${newNum}</td>
-          <td class="cr-line-prefix">${prefix}</td>
-          <td class="cr-line-content">${escHtml(line.content)}</td>
-        </tr>`;
-
-        // Insert comment threads after this line
-        const lineNum = newNum || oldNum;
-        const side = line.type === 'del' ? 'old' : 'new';
-        const lineComments = crState.comments.filter(c =>
-          c.file_path === file.path && c.line_start <= lineNum && (c.line_end || c.line_start) >= lineNum && c.side === side
-        );
-        const threadComments = lineComments.filter(c => (c.line_end || c.line_start) === lineNum);
-        if (threadComments.length > 0) {
-          html += renderCommentThread(threadComments, file.path, lineNum, side);
-        }
-      }
-    }
-
-    html += '</tbody></table>';
+    // Diff table — unified or side-by-side depending on crState.diffMode
+    html += crState.diffMode === 'split' ? _renderFileDiffSplit(file) : _renderFileDiffUnified(file);
     html += '</div>'; // close file section
   }
 
@@ -1118,8 +1838,14 @@ function renderFooter() {
       ? `${openComments.length} ${commentWord} (${parts.join(', ')}) across ${fileCount} files`
       : `${fileCount} files changed, no comments yet`);
 
+  const resolveAllBtn = openComments.length > 1
+    ? `<button class="cr-btn cr-resolve-all" onclick="CR.resolveAllComments()" title="Resolve all open comments">Resolve all (${openComments.length})</button>`
+    : '';
+
   footer.innerHTML = `
     <div class="cr-footer-summary">${summary}</div>
+    <div class="cr-progress" id="cr-progress"></div>
+    ${resolveAllBtn}
     <div class="send-dropdown-wrap" id="cr-footer-send-wrap">
       <button class="cr-btn primary btn-main cr-footer-submit" onclick="CR.submitReview()" ${openComments.length === 0 ? 'disabled' : ''}>Send</button>
       <button class="cr-btn primary btn-caret" onclick="CR.toggleSendDropdown(event)" ${openComments.length === 0 ? 'disabled' : ''}>&#9660;</button>
@@ -1130,6 +1856,8 @@ function renderFooter() {
   // Also update submit button in header
   const submitBtn = document.getElementById('cr-submit-btn');
   if (submitBtn) submitBtn.disabled = openComments.length === 0;
+
+  _renderReviewProgress();
 }
 
 // --- Line selection (click-drag or shift-click) → add comment ---
@@ -1297,6 +2025,18 @@ CR.resolveComment = async function(commentId) {
   }
 };
 
+CR.resolveAllComments = async function() {
+  const open = crState.comments.filter(c => c.status === 'open');
+  if (!open.length) return;
+  if (typeof window.confirm === 'function' && !window.confirm(`Resolve all ${open.length} open comment${open.length > 1 ? 's' : ''}?`)) return;
+  // Optimistic local update + render once; persist each in parallel.
+  open.forEach(c => { c.status = 'resolved'; });
+  renderCurrentReviewSurface();
+  const results = await Promise.allSettled(open.map(c => api(`/review-comments/${c.id}`, 'PUT', { status: 'resolved' })));
+  const failed = results.filter(r => r.status === 'rejected').length;
+  if (failed && typeof window.toast === 'function') window.toast(`${failed} comment(s) failed to resolve — reload to retry`, { type: 'error' });
+};
+
 CR.reopenComment = async function(commentId) {
   try {
     await api(`/review-comments/${commentId}`, 'PUT', { status: 'open' });
@@ -1669,11 +2409,23 @@ CR.handleFilesChanged = function(msg) {
   for (const count of projectChanges.values()) total += count;
   updateBadge(total);
 
-  // Refresh project list if it's currently visible (not in a diff review)
-  if (!crState.reviewId) {
+  // Keep the chooser responsive: update the visible cached row immediately and
+  // let the server's bounded background scan refresh exact branch/file metadata.
+  if (!crState.reviewId && crState._view === 'projects') {
     const panel = document.getElementById('codereview-panel');
     if (panel && panel.classList.contains('active')) {
-      CR.showProjectList();
+      const projects = projectChooserState.projects || [];
+      const project = projects.find(p => p && p.path === msg.project);
+      if (project) {
+        project.fileCount = Number(msg.fileCount || 0);
+        if (Array.isArray(msg.files)) {
+          project.files = msg.files.map(f => typeof f === 'string'
+            ? { path: f, additions: 0, deletions: 0 }
+            : f).filter(Boolean);
+        }
+        updateReviewProjectResults();
+      }
+      scheduleProjectChooserRefresh(1800);
     }
   }
 
@@ -1688,6 +2440,15 @@ CR.handleFilesChanged = function(msg) {
   }
 };
 
+CR.handleReviewProjectsUpdated = function(msg) {
+  if (crState._view !== 'projects') return;
+  const panel = document.getElementById('codereview-panel');
+  if (!panel || !panel.classList.contains('active')) return;
+  projectChooserState.scan = msg && msg.scan ? msg.scan : projectChooserState.scan;
+  updateReviewProjectResults();
+  scheduleProjectChooserRefresh(msg && msg.scan && msg.scan.running ? 1200 : 150);
+};
+
 function updateBadge(count) {
   let badge = document.getElementById('cr-nav-badge');
   const navBtn = document.querySelector('[data-nav="codereview"]');
@@ -1878,6 +2639,9 @@ document.addEventListener('keydown', function(e) {
   } else if ((e.key === 'k' || e.key === '[') && curIdx > 0) {
     e.preventDefault();
     CR.selectFile(crState.files[curIdx - 1].path);
+  } else if (e.key === 'v' && crState.reviewType === 'code') {
+    e.preventDefault();
+    CR.toggleViewed(crState.activeFile);
   }
 });
 
@@ -1934,7 +2698,11 @@ window.crState = crState;
 if (window._ctmState?.pendingDocumentReview) {
   const pending = window._ctmState.pendingDocumentReview;
   delete window._ctmState.pendingDocumentReview;
-  setTimeout(() => CR.openDocumentReview(pending.path, pending.line || 1), 0);
+  setTimeout(() => CR.openDocumentReview(pending.path, pending.line || 1, {
+    cwd: pending.cwd || '',
+    sessionId: pending.sessionId || '',
+    fromHash: !!pending.fromHash,
+  }), 0);
 }
 
 })();