diffback-review 1.2.0 → 1.3.0

package/dist/cli.js

@@ -6,6 +6,85 @@ import { execSync } from "child_process";
 import { createHash } from "crypto";
 import { readFileSync, writeFileSync, mkdirSync, rmSync, existsSync } from "fs";
 import { resolve, basename } from "path";
+
+// src/feedback.ts
+function generateFeedback(state) {
+  const lines = [];
+  const filesWithFeedback = [];
+  for (const [path, review] of Object.entries(state.files)) {
+    if (review.comments.length > 0) {
+      filesWithFeedback.push(path);
+    }
+  }
+  const totalComments = filesWithFeedback.reduce((sum, p) => sum + state.files[p].comments.length, 0) + state.generalComments.length;
+  lines.push("# Code Review Feedback");
+  lines.push("");
+  lines.push(
+    `${filesWithFeedback.length} files need changes. ${totalComments} comments total.`
+  );
+  for (const path of filesWithFeedback) {
+    const review = state.files[path];
+    lines.push("");
+    lines.push(`## ${path}`);
+    for (const comment of review.comments) {
+      const lineRef = comment.line ? `L${comment.line}` : "General";
+      if (comment.suggestion) {
+        lines.push(`- ${lineRef}: ${comment.text}`);
+        lines.push("  ```");
+        lines.push(`  ${comment.suggestion}`);
+        lines.push("  ```");
+      } else {
+        lines.push(`- ${lineRef}: ${comment.text}`);
+      }
+    }
+  }
+  if (state.generalComments.length > 0) {
+    lines.push("");
+    lines.push("## General");
+    for (const comment of state.generalComments) {
+      lines.push(`- ${comment.text}`);
+    }
+  }
+  return lines.join("\n");
+}
+
+// src/state.ts
+function reconcileState(state, changedFiles, hashFile2) {
+  const currentPaths = new Set(changedFiles.map((f) => f.path));
+  let hasChanges = false;
+  for (const path of Object.keys(state.files)) {
+    if (!currentPaths.has(path)) {
+      delete state.files[path];
+    }
+  }
+  for (const path of currentPaths) {
+    const currentHash = hashFile2(path);
+    const existing = state.files[path];
+    if (existing) {
+      if (existing.hash !== currentHash) {
+        if (existing.comments.length > 0) {
+          const archived = existing.comments.map((c) => ({
+            ...c,
+            archivedAt: (/* @__PURE__ */ new Date()).toISOString(),
+            round: state.round
+          }));
+          existing.archivedComments = [...existing.archivedComments || [], ...archived];
+        }
+        existing.status = "pending";
+        existing.hash = currentHash;
+        existing.comments = [];
+        existing.changedSinceReview = true;
+        hasChanges = true;
+      }
+    }
+  }
+  if (hasChanges) {
+    state.round = (state.round || 1) + 1;
+  }
+  return state;
+}
+
+// src/cli.ts
 var cwd = process.cwd();
 var projectName = basename(cwd);
 function getBranchName() {
@@ -91,6 +170,22 @@ function getChangedFiles() {
       }
     }
   }
+  if (hasCommits()) {
+    try {
+      const numstat = execSync("git diff --numstat HEAD", { cwd, encoding: "utf-8" }).trim();
+      if (numstat) {
+        for (const line of numstat.split("\n")) {
+          const [add, del, path] = line.split("	");
+          const file = files.find((f) => f.path === path);
+          if (file && add !== "-") {
+            file.additions = parseInt(add) || 0;
+            file.deletions = parseInt(del) || 0;
+          }
+        }
+      }
+    } catch {
+    }
+  }
   return files.sort((a, b) => a.path.localeCompare(b.path));
 }
 function getFileDiff(filePath) {
@@ -151,74 +246,17 @@ function hashFile(filePath) {
 function loadState() {
   try {
     const data = readFileSync(getStateFile(), "utf-8");
-    return JSON.parse(data);
+    const state = JSON.parse(data);
+    if (!state.round) state.round = 1;
+    return state;
   } catch {
-    return { files: {}, generalComments: [] };
+    return { round: 1, files: {}, generalComments: [] };
   }
 }
 function saveState(state) {
   mkdirSync(getStateDir(), { recursive: true });
   writeFileSync(getStateFile(), JSON.stringify(state, null, 2));
 }
-function reconcileState(state, changedFiles) {
-  const currentPaths = new Set(changedFiles.map((f) => f.path));
-  for (const path of Object.keys(state.files)) {
-    if (!currentPaths.has(path)) {
-      delete state.files[path];
-    }
-  }
-  for (const path of currentPaths) {
-    const currentHash = hashFile(path);
-    const existing = state.files[path];
-    if (existing) {
-      if (existing.hash !== currentHash) {
-        existing.status = "pending";
-        existing.hash = currentHash;
-        existing.changedSinceReview = true;
-      }
-    }
-  }
-  return state;
-}
-function generateFeedback(state) {
-  const lines = [];
-  const filesWithFeedback = [];
-  for (const [path, review] of Object.entries(state.files)) {
-    if (review.comments.length > 0) {
-      filesWithFeedback.push(path);
-    }
-  }
-  const totalComments = filesWithFeedback.reduce((sum, p) => sum + state.files[p].comments.length, 0) + state.generalComments.length;
-  lines.push("# Code Review Feedback");
-  lines.push("");
-  lines.push(
-    `${filesWithFeedback.length} files need changes. ${totalComments} comments total.`
-  );
-  for (const path of filesWithFeedback) {
-    const review = state.files[path];
-    lines.push("");
-    lines.push(`## ${path}`);
-    for (const comment of review.comments) {
-      const lineRef = comment.line ? `L${comment.line}` : "General";
-      if (comment.suggestion) {
-        lines.push(`- ${lineRef}: ${comment.text}`);
-        lines.push("  ```");
-        lines.push(`  ${comment.suggestion}`);
-        lines.push("  ```");
-      } else {
-        lines.push(`- ${lineRef}: ${comment.text}`);
-      }
-    }
-  }
-  if (state.generalComments.length > 0) {
-    lines.push("");
-    lines.push("## General");
-    for (const comment of state.generalComments) {
-      lines.push(`- ${comment.text}`);
-    }
-  }
-  return lines.join("\n");
-}
 function copyToClipboard(text) {
   try {
     const platform = process.platform;
@@ -255,7 +293,7 @@ function startServer(port) {
     process.exit(0);
   }
   let state = loadState();
-  state = reconcileState(state, changedFiles);
+  state = reconcileState(state, changedFiles, hashFile);
   saveState(state);
   const server = http.createServer(async (req, res) => {
     const url = new URL(req.url || "/", `http://localhost:${port}`);
@@ -283,8 +321,9 @@ function startServer(port) {
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/base16/solarized-dark.min.css">
   <script src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
   <style>
-    /* Solarized Dark */
     :root {
+      --sidebar-width: 280px;
+      /* Theme colors - overridden by theme classes */
       --bg: #002b36;
       --bg-secondary: #073642;
       --bg-tertiary: #0a4050;
@@ -300,8 +339,133 @@ function startServer(port) {
       --red: #dc322f;
       --magenta: #d33682;
       --violet: #6c71c4;
-      --sidebar-width: 280px;
-    }
+      /* Diff backgrounds */
+      --diff-ins-bg: #0a3d0a;
+      --diff-ins-highlight: #1a5c1a;
+      --diff-del-bg: #3d0a0a;
+      --diff-del-highlight: #5c1a1a;
+      --diff-ins-linenumber: #082e08;
+      --diff-del-linenumber: #2e0808;
+      /* Syntax highlighting */
+      --hl-keyword: #859900;
+      --hl-string: #2aa198;
+      --hl-type: #b58900;
+      --hl-function: #268bd2;
+      --hl-number: #d33682;
+      --hl-comment: #586e75;
+      --hl-attr: #b58900;
+      --hl-meta: #cb4b16;
+      --hl-variable: #268bd2;
+      --hl-regexp: #dc322f;
+      --hl-symbol: #6c71c4;
+    }
+
+    /* Solarized Dark (default) */
+    .theme-solarized-dark {
+      --bg: #002b36; --bg-secondary: #073642; --bg-tertiary: #0a4050;
+      --border: #586e75; --text: #93a1a1; --text-bright: #eee8d5; --text-muted: #657b83;
+      --accent: #268bd2; --cyan: #2aa198; --green: #859900; --yellow: #b58900;
+      --orange: #cb4b16; --red: #dc322f; --magenta: #d33682; --violet: #6c71c4;
+      --diff-ins-bg: #0a3d0a; --diff-ins-highlight: #1a5c1a;
+      --diff-del-bg: #3d0a0a; --diff-del-highlight: #5c1a1a;
+      --diff-ins-linenumber: #082e08; --diff-del-linenumber: #2e0808;
+      --hl-keyword: #859900; --hl-string: #2aa198; --hl-type: #b58900;
+      --hl-function: #268bd2; --hl-number: #d33682; --hl-comment: #586e75;
+      --hl-attr: #b58900; --hl-meta: #cb4b16; --hl-variable: #268bd2;
+      --hl-regexp: #dc322f; --hl-symbol: #6c71c4;
+    }
+
+    /* Monokai */
+    .theme-monokai {
+      --bg: #272822; --bg-secondary: #1e1f1c; --bg-tertiary: #3e3d32;
+      --border: #49483e; --text: #f8f8f2; --text-bright: #f8f8f0; --text-muted: #75715e;
+      --accent: #66d9ef; --cyan: #66d9ef; --green: #a6e22e; --yellow: #e6db74;
+      --orange: #fd971f; --red: #f92672; --magenta: #f92672; --violet: #ae81ff;
+      --diff-ins-bg: #2b3d0a; --diff-ins-highlight: #3d5c1a;
+      --diff-del-bg: #3d0a1a; --diff-del-highlight: #5c1a2a;
+      --diff-ins-linenumber: #232e08; --diff-del-linenumber: #2e0815;
+      --hl-keyword: #f92672; --hl-string: #e6db74; --hl-type: #66d9ef;
+      --hl-function: #a6e22e; --hl-number: #ae81ff; --hl-comment: #75715e;
+      --hl-attr: #a6e22e; --hl-meta: #f92672; --hl-variable: #f8f8f2;
+      --hl-regexp: #e6db74; --hl-symbol: #ae81ff;
+    }
+
+    /* GitHub Light */
+    .theme-github-light {
+      --bg: #ffffff; --bg-secondary: #f6f8fa; --bg-tertiary: #eaeef2;
+      --border: #d0d7de; --text: #1f2328; --text-bright: #1f2328; --text-muted: #656d76;
+      --accent: #0969da; --cyan: #0969da; --green: #1a7f37; --yellow: #9a6700;
+      --orange: #bc4c00; --red: #cf222e; --magenta: #8250df; --violet: #8250df;
+      --diff-ins-bg: #e6ffec; --diff-ins-highlight: #ccffd8;
+      --diff-del-bg: #ffebe9; --diff-del-highlight: #ffd7d5;
+      --diff-ins-linenumber: #e6ffec; --diff-del-linenumber: #ffebe9;
+      --hl-keyword: #cf222e; --hl-string: #0a3069; --hl-type: #8250df;
+      --hl-function: #6639ba; --hl-number: #0550ae; --hl-comment: #6e7781;
+      --hl-attr: #953800; --hl-meta: #cf222e; --hl-variable: #953800;
+      --hl-regexp: #0550ae; --hl-symbol: #8250df;
+    }
+
+    /* GitHub Light: force all diff2html backgrounds to white */
+    .theme-github-light .d2h-wrapper,
+    .theme-github-light .d2h-file-wrapper,
+    .theme-github-light .d2h-file-diff .d2h-code-pane,
+    .theme-github-light .d2h-code-line,
+    .theme-github-light .d2h-code-side-line,
+    .theme-github-light .d2h-diff-table,
+    .theme-github-light .d2h-diff-tbody,
+    .theme-github-light .d2h-code-line-ctn,
+    .theme-github-light td.d2h-code-line-ctn,
+    .theme-github-light tr {
+      background: #ffffff !important;
+    }
+    .theme-github-light .d2h-code-line-ctn,
+    .theme-github-light .d2h-code-line-ctn * {
+      color: #1f2328 !important;
+    }
+    /* Re-apply syntax colors over the forced text color */
+    .theme-github-light .d2h-code-line-ctn .hljs-keyword,
+    .theme-github-light .d2h-code-line-ctn .hljs-selector-tag { color: #cf222e !important; }
+    .theme-github-light .d2h-code-line-ctn .hljs-string { color: #0a3069 !important; }
+    .theme-github-light .d2h-code-line-ctn .hljs-built_in,
+    .theme-github-light .d2h-code-line-ctn .hljs-type,
+    .theme-github-light .d2h-code-line-ctn .hljs-title.class_ { color: #8250df !important; }
+    .theme-github-light .d2h-code-line-ctn .hljs-function,
+    .theme-github-light .d2h-code-line-ctn .hljs-title { color: #6639ba !important; }
+    .theme-github-light .d2h-code-line-ctn .hljs-number,
+    .theme-github-light .d2h-code-line-ctn .hljs-literal { color: #0550ae !important; }
+    .theme-github-light .d2h-code-line-ctn .hljs-comment,
+    .theme-github-light .d2h-code-line-ctn .hljs-quote { color: #6e7781 !important; }
+    .theme-github-light .d2h-code-line-ctn .hljs-attr,
+    .theme-github-light .d2h-code-line-ctn .hljs-variable { color: #953800 !important; }
+    .theme-github-light .d2h-code-line-ctn .hljs-meta { color: #cf222e !important; }
+    /* Light theme diff backgrounds */
+    .theme-github-light .d2h-ins,
+    .theme-github-light .d2h-ins .d2h-code-line-ctn { background: #e6ffec !important; }
+    .theme-github-light .d2h-ins .d2h-code-line-ctn ins { background: #ccffd8 !important; }
+    .theme-github-light .d2h-del,
+    .theme-github-light .d2h-del .d2h-code-line-ctn { background: #ffebe9 !important; }
+    .theme-github-light .d2h-del .d2h-code-line-ctn del { background: #ffd7d5 !important; }
+    .theme-github-light .d2h-ins .d2h-code-linenumber { background: #e6ffec !important; }
+    .theme-github-light .d2h-del .d2h-code-linenumber { background: #ffebe9 !important; }
+    .theme-github-light .d2h-file-header,
+    .theme-github-light .d2h-file-wrapper {
+      border-color: #d0d7de !important;
+    }
+    .theme-github-light .d2h-code-linenumber {
+      background: #f6f8fa !important;
+      color: #8c959f !important;
+      border-color: #d0d7de !important;
+    }
+
+    /* GitHub Light: scrollbar and fold overrides */
+    .theme-github-light ::-webkit-scrollbar-thumb { background: #d0d7de; }
+    .theme-github-light ::-webkit-scrollbar-thumb:hover { background: #8c959f; }
+    .theme-github-light .fold-indicator { color: #0969da; background: #f6f8fa; }
+    .theme-github-light .fold-indicator:hover { background: #eaeef2; }
+    .theme-github-light .fold-lines { color: #656d76; }
+    .theme-github-light .fold-line-num { color: #8c959f; }
+    .theme-github-light .comment-marker { background: #9a6700; }
+    .theme-github-light .inline-comment-bubble { background: #f6f8fa; border-left-color: #9a6700; color: #1f2328; }
 
     * { margin: 0; padding: 0; box-sizing: border-box; }
 
@@ -319,8 +483,8 @@ function startServer(port) {
     .toolbar {
       display: flex;
       align-items: center;
-      gap: 12px;
-      padding: 8px 16px;
+      gap: 8px;
+      padding: 6px 12px;
       background: var(--bg-secondary);
       border-bottom: 1px solid var(--border);
       flex-shrink: 0;
@@ -329,11 +493,22 @@ function startServer(port) {
       font-weight: 600;
       font-size: 14px;
       color: var(--text-bright);
-      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+    .toolbar-spacer { flex: 1; }
+    .toolbar-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
     }
     .toolbar-stats {
       font-size: 13px;
       color: var(--text-muted);
+      white-space: nowrap;
     }
     .toolbar-stats .count { color: var(--cyan); font-weight: 600; }
     .btn {
@@ -347,6 +522,17 @@ function startServer(port) {
       font-weight: 500;
     }
     .btn:hover { border-color: var(--accent); }
+    select.btn {
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='%2393a1a1'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 8px center;
+      padding-right: 22px;
+    }
+    select.btn option {
+      background: var(--bg-secondary);
+      color: var(--text);
+    }
     .btn-primary {
       background: var(--accent);
       color: var(--bg);
@@ -359,6 +545,7 @@ function startServer(port) {
       color: var(--orange);
     }
     .btn-danger:hover { background: var(--orange); color: var(--bg); }
+    .btn { white-space: nowrap; }
 
     /* Main layout */
     .main {
@@ -370,14 +557,30 @@ function startServer(port) {
     /* Sidebar */
     .sidebar {
       width: var(--sidebar-width);
+      min-width: 180px;
+      max-width: 600px;
       border-right: 1px solid var(--border);
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
       overflow: hidden;
+      position: relative;
+    }
+    .sidebar-resize {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 4px;
+      height: 100%;
+      cursor: col-resize;
+      z-index: 20;
+    }
+    .sidebar-resize:hover,
+    .sidebar-resize.dragging {
+      background: var(--accent);
     }
     .sidebar-header {
-      padding: 8px 12px;
+      padding: 6px 12px;
       font-size: 12px;
       font-weight: 600;
       color: var(--text-muted);
@@ -385,7 +588,29 @@ function startServer(port) {
       letter-spacing: 0.5px;
       border-bottom: 1px solid var(--border);
       background: var(--bg-secondary);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .filter-bar {
+      display: flex;
+      gap: 2px;
     }
+    .filter-btn {
+      background: none;
+      border: 1px solid transparent;
+      color: var(--text-muted);
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 3px;
+      cursor: pointer;
+      text-transform: none;
+      letter-spacing: 0;
+      font-weight: 400;
+    }
+    .filter-btn:hover { color: var(--text); border-color: var(--border); }
+    .filter-btn.active { color: var(--cyan); border-color: var(--cyan); font-weight: 600; }
     .file-list {
       flex: 1;
       overflow-y: auto;
@@ -424,16 +649,35 @@ function startServer(port) {
       font-size: 12px;
     }
     .file-dir { color: var(--text-muted); }
+    .file-stats {
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 10px;
+      flex-shrink: 0;
+      display: flex;
+      gap: 4px;
+    }
+    .file-stats .stat-add { color: var(--green); }
+    .file-stats .stat-del { color: var(--orange); }
 
     /* Shortcuts legend in sidebar */
     .shortcuts-legend {
-      padding: 8px 12px;
+      padding: 0;
       border-top: 1px solid var(--border);
       background: var(--bg-secondary);
       font-size: 11px;
       color: var(--text-muted);
       flex-shrink: 0;
     }
+    .shortcuts-toggle {
+      padding: 6px 12px;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+    }
+    .shortcuts-toggle:hover { color: var(--text); }
+    .shortcuts-body {
+      padding: 0 12px 6px;
+    }
     .shortcuts-legend div {
       display: flex;
       justify-content: space-between;
@@ -468,6 +712,7 @@ function startServer(port) {
       border-bottom: 1px solid var(--border);
       flex-shrink: 0;
       z-index: 10;
+      overflow-x: auto;
     }
     .file-nav-btn {
       background: none;
@@ -589,8 +834,7 @@ function startServer(port) {
       gap: 8px;
       align-items: flex-start;
     }
-    .add-comment input[type="number"] {
-      width: 60px;
+    .add-comment input[type="text"] {
       padding: 6px 8px;
       background: var(--bg);
       border: 1px solid var(--border);
@@ -624,6 +868,79 @@ function startServer(port) {
       margin-top: 4px;
       display: inline-block;
     }
+    .quick-comments {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      padding: 6px 16px;
+      border-top: 1px solid var(--border);
+    }
+    .quick-btn {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      color: var(--text-muted);
+      font-size: 11px;
+      padding: 2px 8px;
+      border-radius: 12px;
+      cursor: pointer;
+    }
+    .quick-btn:hover { color: var(--text); border-color: var(--accent); }
+    .archived-section {
+      border-top: 1px dashed var(--border);
+      padding: 6px 16px;
+    }
+    .archived-header {
+      font-size: 11px;
+      color: var(--text-muted);
+      cursor: pointer;
+      padding: 4px 0;
+    }
+    .archived-header:hover { color: var(--text); }
+    .archived-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 6px 0;
+      font-size: 12px;
+      color: var(--text-muted);
+      border-bottom: 1px solid var(--border);
+    }
+    .archived-item:last-child { border-bottom: none; }
+    .archived-item .archived-round {
+      font-size: 10px;
+      background: var(--violet);
+      color: var(--bg);
+      border-radius: 3px;
+      padding: 1px 6px;
+      flex-shrink: 0;
+      font-weight: 600;
+    }
+    .archived-item .archived-text { flex: 1; }
+    /* Inline archived comment bubble (dimmed, dashed border) */
+    .inline-archived-bubble {
+      margin: 4px 8px 4px 60px;
+      padding: 5px 10px;
+      background: transparent;
+      border: 1px dashed var(--border);
+      border-left: 3px dashed var(--violet);
+      border-radius: 4px;
+      font-size: 11px;
+      color: var(--text-muted);
+      line-height: 1.4;
+      display: flex;
+      align-items: flex-start;
+      gap: 6px;
+      opacity: 0.7;
+    }
+    .inline-archived-bubble .archived-round {
+      font-size: 9px;
+      background: var(--violet);
+      color: var(--bg);
+      border-radius: 3px;
+      padding: 1px 5px;
+      flex-shrink: 0;
+      font-weight: 600;
+    }
     .suggestion-input {
       margin-top: 4px;
     }
@@ -720,11 +1037,13 @@ function startServer(port) {
     ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
     ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
 
-    /* Line click hint */
-    .d2h-code-linenumber { cursor: pointer; }
+    /* Line number click hint - only the number column is clickable */
+    .d2h-code-linenumber { cursor: pointer; user-select: none; }
     .d2h-code-linenumber:hover {
       background: rgba(38, 139, 210, 0.25) !important;
     }
+    /* Code content is freely selectable */
+    .d2h-code-line-ctn { cursor: text; user-select: text; }
 
     /* ---- diff2html Solarized Dark overrides ---- */
     .d2h-file-header, .d2h-file-wrapper {
@@ -749,51 +1068,51 @@ function startServer(port) {
     }
     /* Default text color for non-highlighted code */
     .d2h-code-line-ctn, .d2h-code-line-ctn * {
-      color: #93a1a1;
+      color: var(--text);
     }
-    /* Let highlight.js syntax colors take priority */
+    /* Syntax highlighting via CSS variables (theme-aware) */
     .d2h-code-line-ctn .hljs-keyword,
     .d2h-code-line-ctn .hljs-selector-tag,
-    .d2h-code-line-ctn .hljs-deletion { color: #859900 !important; }
+    .d2h-code-line-ctn .hljs-deletion { color: var(--hl-keyword) !important; }
     .d2h-code-line-ctn .hljs-string,
-    .d2h-code-line-ctn .hljs-addition { color: #2aa198 !important; }
+    .d2h-code-line-ctn .hljs-addition { color: var(--hl-string) !important; }
     .d2h-code-line-ctn .hljs-built_in,
-    .d2h-code-line-ctn .hljs-type { color: #b58900 !important; }
+    .d2h-code-line-ctn .hljs-type { color: var(--hl-type) !important; }
     .d2h-code-line-ctn .hljs-function,
-    .d2h-code-line-ctn .hljs-title { color: #268bd2 !important; }
+    .d2h-code-line-ctn .hljs-title { color: var(--hl-function) !important; }
     .d2h-code-line-ctn .hljs-number,
-    .d2h-code-line-ctn .hljs-literal { color: #d33682 !important; }
+    .d2h-code-line-ctn .hljs-literal { color: var(--hl-number) !important; }
     .d2h-code-line-ctn .hljs-comment,
-    .d2h-code-line-ctn .hljs-quote { color: #586e75 !important; font-style: italic; }
+    .d2h-code-line-ctn .hljs-quote { color: var(--hl-comment) !important; font-style: italic; }
     .d2h-code-line-ctn .hljs-attr,
-    .d2h-code-line-ctn .hljs-attribute { color: #b58900 !important; }
-    .d2h-code-line-ctn .hljs-params { color: #93a1a1 !important; }
+    .d2h-code-line-ctn .hljs-attribute { color: var(--hl-attr) !important; }
+    .d2h-code-line-ctn .hljs-params { color: var(--text) !important; }
     .d2h-code-line-ctn .hljs-meta,
-    .d2h-code-line-ctn .hljs-meta .hljs-keyword { color: #cb4b16 !important; }
+    .d2h-code-line-ctn .hljs-meta .hljs-keyword { color: var(--hl-meta) !important; }
     .d2h-code-line-ctn .hljs-class .hljs-title,
-    .d2h-code-line-ctn .hljs-title.class_ { color: #b58900 !important; }
+    .d2h-code-line-ctn .hljs-title.class_ { color: var(--hl-type) !important; }
     .d2h-code-line-ctn .hljs-variable,
-    .d2h-code-line-ctn .hljs-template-variable { color: #268bd2 !important; }
-    .d2h-code-line-ctn .hljs-regexp { color: #dc322f !important; }
-    .d2h-code-line-ctn .hljs-symbol { color: #6c71c4 !important; }
+    .d2h-code-line-ctn .hljs-template-variable { color: var(--hl-variable) !important; }
+    .d2h-code-line-ctn .hljs-regexp { color: var(--hl-regexp) !important; }
+    .d2h-code-line-ctn .hljs-symbol { color: var(--hl-symbol) !important; }
     .d2h-code-line-ctn .hljs-selector-class,
-    .d2h-code-line-ctn .hljs-selector-id { color: #268bd2 !important; }
+    .d2h-code-line-ctn .hljs-selector-id { color: var(--hl-function) !important; }
     /* Added lines */
     .d2h-ins, .d2h-ins .d2h-code-line-ctn {
-      background: #0a3d0a !important;
+      background: var(--diff-ins-bg) !important;
     }
     .d2h-ins .d2h-code-line-ctn ins,
     .d2h-ins.d2h-change .d2h-code-line-ctn ins {
-      background: #1a5c1a !important;
+      background: var(--diff-ins-highlight) !important;
       text-decoration: none !important;
     }
     /* Deleted lines */
     .d2h-del, .d2h-del .d2h-code-line-ctn {
-      background: #3d0a0a !important;
+      background: var(--diff-del-bg) !important;
     }
     .d2h-del .d2h-code-line-ctn del,
     .d2h-del.d2h-change .d2h-code-line-ctn del {
-      background: #5c1a1a !important;
+      background: var(--diff-del-highlight) !important;
       text-decoration: none !important;
     }
     /* Info/hunk headers - visually hidden but in DOM for fold indicator positioning */
@@ -807,17 +1126,17 @@ function startServer(port) {
     }
     /* Line numbers */
     .d2h-code-linenumber {
-      background: #073642 !important;
-      color: #657b83 !important;
-      border-color: #586e75 !important;
+      background: var(--bg-secondary) !important;
+      color: var(--text-muted) !important;
+      border-color: var(--border) !important;
     }
     .d2h-ins .d2h-code-linenumber {
-      background: #082e08 !important;
-      color: #839496 !important;
+      background: var(--diff-ins-linenumber) !important;
+      color: var(--text-muted) !important;
     }
     .d2h-del .d2h-code-linenumber {
-      background: #2e0808 !important;
-      color: #839496 !important;
+      background: var(--diff-del-linenumber) !important;
+      color: var(--text-muted) !important;
     }
     /* Empty placeholder cells */
     .d2h-code-side-emptyplaceholder, .d2h-emptyplaceholder {
@@ -890,7 +1209,25 @@ function startServer(port) {
       width: 8px;
       height: 8px;
       border-radius: 50%;
-      background: var(--yellow);
+      cursor: pointer;
+      z-index: 5;
+    }
+    .comment-marker.marker-current {
+      background: var(--orange);
+    }
+    .comment-marker.marker-archived {
+      background: transparent;
+      border: 2px solid var(--violet);
+    }
+    .comment-marker:hover { opacity: 0.8; }
+    /* Selected line range highlighting */
+    tr.line-selected td {
+      outline: 1px solid var(--accent);
+      outline-offset: -1px;
+    }
+    tr.line-selected .d2h-code-linenumber {
+      background: rgba(38, 139, 210, 0.25) !important;
+      color: var(--text-bright) !important;
     }
     .inline-comment-row td {
       padding: 0 !important;
@@ -907,7 +1244,20 @@ function startServer(port) {
       font-size: 12px;
       color: var(--text-bright);
       line-height: 1.4;
+      display: flex;
+      align-items: flex-start;
+      gap: 6px;
     }
+    .inline-comment-bubble .inline-content { flex: 1; }
+    .inline-comment-delete {
+      color: var(--text-muted);
+      cursor: pointer;
+      font-size: 15px;
+      line-height: 1;
+      padding: 0 2px;
+      flex-shrink: 0;
+    }
+    .inline-comment-delete:hover { color: var(--orange); }
     .inline-comment-bubble .inline-line-ref {
       color: var(--cyan);
       font-family: "SF Mono", "Fira Code", monospace;
@@ -930,21 +1280,43 @@ function startServer(port) {
 <body>
   <div class="toolbar">
     <div class="toolbar-title" id="toolbar-title">diffback</div>
-    <div class="toolbar-stats" id="toolbar-stats"></div>
-    <button class="btn btn-primary" id="btn-generate" title="Generate feedback prompt">Generate Feedback</button>
-    <button class="btn btn-danger" id="btn-finish" title="Finish review and clean up state">Finish Review</button>
+    <div class="toolbar-spacer"></div>
+    <div class="toolbar-actions">
+      <div class="toolbar-stats" id="toolbar-stats"></div>
+      <select id="theme-selector" class="btn" title="Change theme" style="padding:4px 8px;cursor:pointer;">
+        <option value="solarized-dark">Solarized Dark</option>
+        <option value="monokai">Monokai</option>
+        <option value="github-light">GitHub Light</option>
+      </select>
+      <button class="btn btn-primary" id="btn-generate" title="Generate feedback prompt">Generate</button>
+      <button class="btn btn-danger" id="btn-finish" title="Finish review and clean up state">Finish</button>
+    </div>
   </div>
 
   <div class="main">
-    <div class="sidebar">
-      <div class="sidebar-header">Files</div>
+    <div class="sidebar" id="sidebar">
+      <div class="sidebar-resize" id="sidebar-resize"></div>
+      <div class="sidebar-header">
+        <span>Files</span>
+        <div class="filter-bar" id="filter-bar">
+          <button class="filter-btn active" data-filter="all">All</button>
+          <button class="filter-btn" data-filter="pending">Pending</button>
+          <button class="filter-btn" data-filter="viewed">Viewed</button>
+          <button class="filter-btn" data-filter="feedback">Feedback</button>
+        </div>
+      </div>
       <div class="file-list" id="file-list"></div>
       <div class="shortcuts-legend">
-        <div><span>Prev/Next file</span> <span><kbd>k</kbd> <kbd>j</kbd></span></div>
-        <div><span>Viewed file</span> <kbd>a</kbd></div>
-        <div><span>Add comment</span> <kbd>c</kbd></div>
-        <div><span>Generate feedback</span> <kbd>g</kbd></div>
-        <div><span>Send comment</span> <kbd>Cmd+Enter</kbd></div>
+        <div class="shortcuts-toggle" id="shortcuts-toggle">
+          <span>Shortcuts</span> <span id="shortcuts-arrow">&blacktriangleright;</span>
+        </div>
+        <div class="shortcuts-body" id="shortcuts-body" style="display:none;">
+          <div><span>Prev/Next file</span> <span><kbd>k</kbd> <kbd>j</kbd></span></div>
+          <div><span>Viewed file</span> <kbd>a</kbd></div>
+          <div><span>Add comment</span> <kbd>c</kbd></div>
+          <div><span>Generate feedback</span> <kbd>g</kbd></div>
+          <div><span>Send comment</span> <kbd>Cmd+Enter</kbd></div>
+        </div>
       </div>
     </div>
 
@@ -953,8 +1325,7 @@ function startServer(port) {
     </div>
   </div>
 
-  <script>
-    // --- State ---
+  <script>    // --- State ---
     let appState = {
       files: [],
       generalComments: [],
@@ -962,7 +1333,9 @@ function startServer(port) {
       projectName: '',
       selectedFile: null,
       currentDiff: null,
-      fileContents: {}, // cache for expanded fold content
+      fileContents: {},
+      filter: 'all',
+      round: 1,
     };
 
     // --- API ---
@@ -981,6 +1354,7 @@ function startServer(port) {
       appState.generalComments = data.generalComments || [];
       appState.summary = data.summary;
       appState.projectName = data.projectName;
+      appState.round = data.round || 1;
       renderToolbar();
       renderFileList();
     }
@@ -1020,8 +1394,19 @@ function startServer(port) {
     }
 
     // --- Navigation helpers ---
+    function getFilteredFiles() {
+      return appState.files.filter(f => {
+        if (appState.filter === 'all') return true;
+        const status = f.review?.status;
+        if (appState.filter === 'pending') return !status || status === 'pending';
+        if (appState.filter === 'viewed') return status === 'reviewed';
+        if (appState.filter === 'feedback') return status === 'has-feedback' || (f.review?.comments?.length > 0);
+        return true;
+      });
+    }
+
     function navigateFile(direction) {
-      const files = appState.files;
+      const files = getFilteredFiles();
       if (files.length === 0) return;
       const currentIdx = files.findIndex(f => f.path === appState.selectedFile);
       let next;
@@ -1049,7 +1434,9 @@ function startServer(port) {
       const container = document.getElementById('file-list');
       container.innerHTML = '';
 
-      for (const file of appState.files) {
+      const filtered = getFilteredFiles();
+
+      for (const file of filtered) {
         const el = document.createElement('div');
         el.className = 'file-item' + (appState.selectedFile === file.path ? ' active' : '');
         el.dataset.path = file.path;
@@ -1090,11 +1477,36 @@ function startServer(port) {
         el.appendChild(statusIcon);
         el.appendChild(reviewIcon);
         el.appendChild(pathEl);
+
+        // Line stats (+/-)
+        if (file.additions !== undefined || file.deletions !== undefined) {
+          const stats = document.createElement('span');
+          stats.className = 'file-stats';
+          const add = file.additions || 0;
+          const del = file.deletions || 0;
+          if (add > 0) stats.innerHTML += \`<span class="stat-add">+\${add}</span>\`;
+          if (del > 0) stats.innerHTML += \`<span class="stat-del">-\${del}</span>\`;
+          el.appendChild(stats);
+        }
+
         el.addEventListener('click', () => loadDiff(file.path));
         container.appendChild(el);
       }
+
+      // Update filter button counts
+      document.querySelectorAll('.filter-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.filter === appState.filter);
+      });
     }
 
+    // --- Filter handlers ---
+    document.getElementById('filter-bar').addEventListener('click', (e) => {
+      const btn = e.target.closest('.filter-btn');
+      if (!btn) return;
+      appState.filter = btn.dataset.filter;
+      renderFileList();
+    });
+
     // --- Parse hunk ranges from @@ header ---
     function parseHunkHeader(headerText) {
       // @@ -oldStart,oldCount +newStart,newCount @@
@@ -1183,51 +1595,171 @@ function startServer(port) {
     }
 
     // --- Insert inline comment markers & bubbles ---
-    function insertInlineComments(diffContainer, comments) {
-      const lineComments = comments.filter(c => c.line !== null);
-      if (lineComments.length === 0) return;
-
-      // Group comments by line number
-      const byLine = {};
-      for (const c of lineComments) {
-        if (!byLine[c.line]) byLine[c.line] = [];
-        byLine[c.line].push(c);
+    function getCommentEndLine(comment) {
+      // Returns the last line number for a comment (for range "15-22" returns 22, for "15" returns 15)
+      if (!comment.line) return null;
+      const parts = String(comment.line).split('-');
+      return parseInt(parts[parts.length - 1]);
+    }
+    function getCommentStartLine(comment) {
+      if (!comment.line) return null;
+      return parseInt(String(comment.line).split('-')[0]);
+    }
+
+    function insertInlineComments(diffContainer, comments, archivedComments) {
+      // Build a map of line -> { current: [...], archived: [...] }
+      const lineData = {};
+
+      for (const c of comments.filter(c => c.line !== null)) {
+        const endLine = getCommentEndLine(c);
+        const startLine = getCommentStartLine(c);
+        if (!endLine) continue;
+        if (!lineData[endLine]) lineData[endLine] = { current: [], archived: [], markerLines: new Set() };
+        lineData[endLine].current.push(c);
+        for (let l = startLine; l <= endLine; l++) lineData[endLine].markerLines.add(l);
+      }
+
+      for (const c of (archivedComments || []).filter(c => c.line !== null)) {
+        const endLine = getCommentEndLine(c);
+        if (!endLine) continue;
+        if (!lineData[endLine]) lineData[endLine] = { current: [], archived: [], markerLines: new Set() };
+        lineData[endLine].archived.push(c);
+      }
+
+      // Collect all marker lines (for range highlighting)
+      const allMarkerLines = new Set();
+      for (const data of Object.values(lineData)) {
+        for (const l of data.markerLines) allMarkerLines.add(l);
       }
 
-      // Find all line number cells and match
       diffContainer.querySelectorAll('.d2h-code-linenumber').forEach(el => {
         const lineNum2 = el.querySelector('.line-num2')?.textContent?.trim();
         const num = parseInt(lineNum2);
-        if (isNaN(num) || !byLine[num]) return;
+        if (isNaN(num)) return;
+
+        const data = lineData[num];
+        const hasCurrent = data?.current.length > 0;
+        const hasArchived = data?.archived.length > 0;
+        const isInRange = allMarkerLines.has(num) && !data; // part of a range but not the end line
+
+        if (!hasCurrent && !hasArchived && !isInRange) return;
 
-        // Add marker dot
         el.style.position = 'relative';
-        const marker = document.createElement('span');
-        marker.className = 'comment-marker';
-        el.appendChild(marker);
 
-        // Insert comment bubble row after this line's <tr>
+        // Add marker dots (can have both current and archived on same line)
+        if (hasCurrent) {
+          const marker = document.createElement('span');
+          marker.className = 'comment-marker marker-current';
+          marker.title = 'Toggle comments';
+          el.appendChild(marker);
+        }
+        if (hasArchived) {
+          const marker = document.createElement('span');
+          marker.className = 'comment-marker marker-archived';
+          marker.style.left = hasCurrent ? '12px' : '2px'; // offset if both
+          marker.title = 'Toggle archived comments';
+          el.appendChild(marker);
+        }
+        if (isInRange) {
+          const marker = document.createElement('span');
+          marker.className = 'comment-marker marker-current';
+          marker.style.opacity = '0.4';
+          el.appendChild(marker);
+        }
+
+        if (!data) return;
         const tr = el.closest('tr');
         if (!tr) return;
 
-        for (const comment of byLine[num]) {
+        // Create current comment bubbles (visible by default)
+        const currentRows = [];
+        for (const comment of data.current) {
           const commentTr = document.createElement('tr');
-          commentTr.className = 'inline-comment-row';
+          commentTr.className = 'inline-comment-row inline-current';
           const td = document.createElement('td');
           td.colSpan = 99;
           td.innerHTML = \`
             <div class="inline-comment-bubble">
-              <span class="inline-line-ref">L\${comment.line}</span>
-              \${escapeHtml(comment.text)}
-              \${comment.suggestion ? \`<div class="inline-suggestion">\${escapeHtml(comment.suggestion)}</div>\` : ''}
+              <div class="inline-content">
+                <span class="inline-line-ref">L\${comment.line}</span>
+                \${escapeHtml(comment.text)}
+                \${comment.suggestion ? \`<div class="inline-suggestion">\${escapeHtml(comment.suggestion)}</div>\` : ''}
+              </div>
+              <span class="inline-comment-delete" data-id="\${comment.id}" title="Delete comment">&times;</span>
             </div>
           \`;
+          td.querySelector('.inline-comment-delete').addEventListener('click', () => {
+            const file = appState.files.find(f => f.path === appState.selectedFile);
+            if (!file) return;
+            const review = file.review || { comments: [] };
+            const newComments = (review.comments || []).filter(c => c.id !== comment.id);
+            const newStatus = newComments.length > 0 ? 'has-feedback' : 'pending';
+            const diffEl2 = document.querySelector('.diff-container');
+            const scrollTop = diffEl2 ? diffEl2.scrollTop : 0;
+            saveReview(file.path, newStatus, newComments).then(() => {
+              loadDiff(file.path).then(() => {
+                const newDiffEl = document.querySelector('.diff-container');
+                if (newDiffEl) newDiffEl.scrollTop = scrollTop;
+              });
+            });
+          });
           commentTr.appendChild(td);
-          tr.after(commentTr);
+          currentRows.push(commentTr);
+        }
+
+        // Create archived comment bubbles (hidden by default)
+        const archivedRows = [];
+        for (const ac of data.archived) {
+          const archTr = document.createElement('tr');
+          archTr.className = 'inline-comment-row inline-archived';
+          archTr.style.display = 'none';
+          const td = document.createElement('td');
+          td.colSpan = 99;
+          td.innerHTML = \`
+            <div class="inline-archived-bubble">
+              <span class="archived-round">R\${ac.round}</span>
+              <span class="inline-line-ref">L\${ac.line}</span>
+              <span>\${escapeHtml(ac.text)}\${ac.suggestion ? \`<div class="inline-suggestion">\${escapeHtml(ac.suggestion)}</div>\` : ''}</span>
+            </div>
+          \`;
+          archTr.appendChild(td);
+          archivedRows.push(archTr);
+        }
+
+        // Insert all rows after tr
+        let insertAfter = tr;
+        for (const row of currentRows) {
+          insertAfter.after(row);
+          insertAfter = row;
+        }
+        for (const row of archivedRows) {
+          insertAfter.after(row);
+          insertAfter = row;
         }
 
-        // Remove from map so we don't double-insert
-        delete byLine[num];
+        // Click orange marker to toggle current bubbles
+        const currentMarker = el.querySelector('.marker-current');
+        if (currentMarker && currentRows.length > 0) {
+          currentMarker.addEventListener('mousedown', (ev) => { ev.preventDefault(); ev.stopPropagation(); });
+          currentMarker.addEventListener('mouseup', (ev) => {
+            ev.stopPropagation();
+            const visible = currentRows[0].style.display !== 'none';
+            currentRows.forEach(r => r.style.display = visible ? 'none' : '');
+          });
+        }
+
+        // Click violet marker to toggle archived bubbles
+        const archivedMarker = el.querySelector('.marker-archived');
+        if (archivedMarker && archivedRows.length > 0) {
+          archivedMarker.addEventListener('mousedown', (ev) => { ev.preventDefault(); ev.stopPropagation(); });
+          archivedMarker.addEventListener('mouseup', (ev) => {
+            ev.stopPropagation();
+            const visible = archivedRows[0].style.display !== 'none';
+            archivedRows.forEach(r => r.style.display = visible ? 'none' : '');
+          });
+        }
+
+        delete lineData[num];
       });
     }
 
@@ -1289,20 +1821,61 @@ function startServer(port) {
           // Post-render: folds, inline comments, line click handlers
           setTimeout(() => {
             insertFoldIndicators(diffContainer, appState.currentDiff.diff, file.path);
-            insertInlineComments(diffContainer, comments);
+            insertInlineComments(diffContainer, comments, review.archivedComments || []);
+
+            // Line selection state
+            let rangeStart = null;
+
+            function highlightRange(s, e) {
+              diffContainer.querySelectorAll('tr.line-selected').forEach(r => r.classList.remove('line-selected'));
+              if (s === null) return;
+              diffContainer.querySelectorAll('.d2h-code-linenumber').forEach(numEl => {
+                const ln = parseInt(numEl.querySelector('.line-num2')?.textContent?.trim());
+                if (!isNaN(ln) && ln >= s && ln <= e) {
+                  const row = numEl.closest('tr');
+                  if (row) row.classList.add('line-selected');
+                }
+              });
+            }
 
+            // Click line numbers: click to select/deselect, shift+click to extend range
+            // Use mousedown+mouseup to ignore drags
             diffContainer.querySelectorAll('.d2h-code-linenumber').forEach(el => {
-              el.addEventListener('click', () => {
+              let mouseDownPos = null;
+              el.addEventListener('mousedown', (ev) => {
+                mouseDownPos = { x: ev.clientX, y: ev.clientY };
+                ev.preventDefault(); // Prevent text selection starting from line numbers
+              });
+              el.addEventListener('mouseup', (ev) => {
+                // Ignore if dragged more than 5px (user was selecting text)
+                if (!mouseDownPos) return;
+                const dx = Math.abs(ev.clientX - mouseDownPos.x);
+                const dy = Math.abs(ev.clientY - mouseDownPos.y);
+                mouseDownPos = null;
+                if (dx > 5 || dy > 5) return;
+
                 const lineNum = el.querySelector('.line-num2')?.textContent?.trim()
-                  || el.querySelector('.line-num1')?.textContent?.trim()
-                  || el.textContent?.trim();
+                  || el.querySelector('.line-num1')?.textContent?.trim();
                 const num = parseInt(lineNum);
-                if (!isNaN(num)) {
-                  const lineInput = document.getElementById('comment-line');
-                  if (lineInput) {
-                    lineInput.value = num;
-                    document.getElementById('comment-text')?.focus();
-                  }
+                if (isNaN(num)) return;
+
+                const lineInput = document.getElementById('comment-line');
+                const currentVal = lineInput?.value.trim() || '';
+
+                if (ev.shiftKey && rangeStart !== null) {
+                  const s = Math.min(rangeStart, num);
+                  const e = Math.max(rangeStart, num);
+                  if (lineInput) lineInput.value = s === e ? String(s) : \`\${s}-\${e}\`;
+                  highlightRange(s, e);
+                } else if (currentVal && (rangeStart === num || currentVal.includes('-'))) {
+                  rangeStart = null;
+                  if (lineInput) lineInput.value = '';
+                  highlightRange(null, null);
+                } else {
+                  rangeStart = num;
+                  if (lineInput) lineInput.value = String(num);
+                  highlightRange(num, num);
+                  document.getElementById('comment-text')?.focus();
                 }
               });
             });
@@ -1358,7 +1931,7 @@ function startServer(port) {
       addComment.className = 'add-comment';
       addComment.innerHTML = \`
         <div class="add-comment-row">
-          <input type="number" id="comment-line" placeholder="Line" min="1" title="Line number (leave empty for general file comment)">
+          <input type="text" id="comment-line" placeholder="L# or L#-#" style="width:80px;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:12px;font-family:'SF Mono','Fira Code',monospace;" title="Line number or range (e.g. 42 or 15-22). Leave empty for general file comment.">
           <textarea id="comment-text" placeholder="Add a comment (line optional)..." rows="1"></textarea>
           <button class="btn" id="btn-add-comment">Add</button>
         </div>
@@ -1368,6 +1941,49 @@ function startServer(port) {
         </div>
       \`;
       reviewSection.appendChild(addComment);
+
+      // Quick comment buttons
+      const quickComments = document.createElement('div');
+      quickComments.className = 'quick-comments';
+      const presets = ['Naming', 'Missing test', 'Unnecessary change', 'Delete this file', 'Needs refactor', 'Wrong approach'];
+      for (const preset of presets) {
+        const btn = document.createElement('button');
+        btn.className = 'quick-btn';
+        btn.textContent = preset;
+        btn.addEventListener('click', () => {
+          const textArea = document.getElementById('comment-text');
+          if (textArea) {
+            textArea.value = preset;
+            textArea.focus();
+          }
+        });
+        quickComments.appendChild(btn);
+      }
+      reviewSection.appendChild(quickComments);
+
+      // Archived comments from previous rounds
+      const archived = review.archivedComments || [];
+      if (archived.length > 0) {
+        const archivedSection = document.createElement('div');
+        archivedSection.className = 'archived-section';
+        archivedSection.innerHTML = \`<div class="archived-header" id="toggle-archived">Previous round comments (\${archived.length}) \\u25B8</div>\`;
+        const archivedList = document.createElement('div');
+        archivedList.id = 'archived-list';
+        archivedList.style.display = 'none';
+        for (const ac of archived) {
+          const item = document.createElement('div');
+          item.className = 'archived-item';
+          item.innerHTML = \`
+            <span class="archived-round">R\${ac.round}</span>
+            <span class="comment-line-ref">\${ac.line ? 'L' + ac.line : 'General'}</span>
+            <span class="archived-text">\${escapeHtml(ac.text)}\${ac.suggestion ? \`<div class="comment-suggestion">\${escapeHtml(ac.suggestion)}</div>\` : ''}</span>
+          \`;
+          archivedList.appendChild(item);
+        }
+        archivedSection.appendChild(archivedList);
+        reviewSection.appendChild(archivedSection);
+      }
+
       container.appendChild(reviewSection);
 
       // General comments section
@@ -1423,11 +2039,23 @@ function startServer(port) {
         body.style.display = body.style.display === 'none' ? 'block' : 'none';
       });
 
+      // Archived comments toggle
+      const toggleArchived = document.getElementById('toggle-archived');
+      if (toggleArchived) {
+        toggleArchived.addEventListener('click', () => {
+          const list = document.getElementById('archived-list');
+          const isHidden = list.style.display === 'none';
+          list.style.display = isHidden ? 'block' : 'none';
+          toggleArchived.textContent = \`Previous round comments (\${archived.length}) \${isHidden ? '\\u25BE' : '\\u25B8'}\`;
+        });
+      }
+
       function addFileComment() {
         const text = document.getElementById('comment-text').value.trim();
         if (!text) return;
 
-        const line = parseInt(document.getElementById('comment-line').value) || null;
+        const lineRaw = document.getElementById('comment-line').value.trim();
+        const line = lineRaw || null; // Keep as string for ranges like "15-22"
         const suggestion = document.getElementById('comment-suggestion')?.value.trim() || null;
 
         const newComment = {
@@ -1583,11 +2211,12 @@ function startServer(port) {
     // --- Keyboard shortcuts ---
     document.addEventListener('keydown', (e) => {
       if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
 
-      if (e.key === 'j' || e.key === 'ArrowDown') {
+      if (e.key === 'j') {
         e.preventDefault();
         navigateFile('next');
-      } else if (e.key === 'k' || e.key === 'ArrowUp') {
+      } else if (e.key === 'k') {
         e.preventDefault();
         navigateFile('prev');
       } else if (e.key === 'a') {
@@ -1621,9 +2250,69 @@ function startServer(port) {
       }
     }, 3000);
 
+    // --- Shortcuts toggle ---
+    document.getElementById('shortcuts-toggle').addEventListener('click', () => {
+      const body = document.getElementById('shortcuts-body');
+      const arrow = document.getElementById('shortcuts-arrow');
+      const hidden = body.style.display === 'none';
+      body.style.display = hidden ? 'block' : 'none';
+      arrow.innerHTML = hidden ? '\\u25BE' : '\\u25B8';
+    });
+
+    // --- Sidebar resize ---
+    (() => {
+      const sidebar = document.getElementById('sidebar');
+      const handle = document.getElementById('sidebar-resize');
+      let dragging = false;
+
+      handle.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        dragging = true;
+        handle.classList.add('dragging');
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+      });
+
+      document.addEventListener('mousemove', (e) => {
+        if (!dragging) return;
+        const newWidth = Math.min(600, Math.max(180, e.clientX));
+        sidebar.style.width = newWidth + 'px';
+      });
+
+      document.addEventListener('mouseup', () => {
+        if (!dragging) return;
+        dragging = false;
+        handle.classList.remove('dragging');
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        localStorage.setItem('diffback-sidebar-width', sidebar.style.width);
+      });
+
+      // Restore saved width
+      const saved = localStorage.getItem('diffback-sidebar-width');
+      if (saved) sidebar.style.width = saved;
+    })();
+
+    // --- Theme switcher ---
+    function setTheme(name) {
+      document.documentElement.className = \`theme-\${name}\`;
+      localStorage.setItem('diffback-theme', name);
+      document.getElementById('theme-selector').value = name;
+    }
+
+    document.getElementById('theme-selector').addEventListener('change', (e) => {
+      setTheme(e.target.value);
+      // Re-render diff to apply new colors
+      if (appState.selectedFile) loadDiff(appState.selectedFile);
+    });
+
+    // Load saved theme
+    const savedTheme = localStorage.getItem('diffback-theme') || 'solarized-dark';
+    setTheme(savedTheme);
+
     // --- Init ---
     loadFiles();
-  </script>
+</script>
 </body>
 </html>
 `);
@@ -1631,7 +2320,7 @@ function startServer(port) {
       }
       if (path === "/api/files" && req.method === "GET") {
         const currentFiles = getChangedFiles();
-        state = reconcileState(state, currentFiles);
+        state = reconcileState(state, currentFiles, hashFile);
         saveState(state);
         const filesWithReview = currentFiles.map((f) => ({
           ...f,
@@ -1648,7 +2337,8 @@ function startServer(port) {
             hasFeedback,
             pending: currentFiles.length - reviewed - hasFeedback
           },
-          projectName
+          projectName,
+          round: state.round
         });
         return;
       }
@@ -1690,10 +2380,12 @@ function startServer(port) {
       if (path === "/api/review" && req.method === "POST") {
         const body = JSON.parse(await parseBody(req));
         const { path: filePath, status, comments } = body;
+        const existing = state.files[filePath];
         state.files[filePath] = {
           status,
           hash: hashFile(filePath),
           comments: comments || [],
+          archivedComments: existing?.archivedComments || [],
           changedSinceReview: false
         };
         saveState(state);