diffback-review 1.1.0

package/dist/cli.js

@@ -0,0 +1,1761 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import http from "http";
+import { execSync } from "child_process";
+import { createHash } from "crypto";
+import { readFileSync, writeFileSync, mkdirSync, rmSync, existsSync } from "fs";
+import { resolve, basename } from "path";
+var cwd = process.cwd();
+var projectName = basename(cwd);
+function getBranchName() {
+  try {
+    return execSync("git rev-parse --abbrev-ref HEAD", { cwd, encoding: "utf-8" }).trim();
+  } catch {
+    return "unknown";
+  }
+}
+function getStateDir() {
+  const branch = getBranchName();
+  return resolve(cwd, ".diffback-local-diffs", branch);
+}
+function getStateFile() {
+  return resolve(getStateDir(), "state.json");
+}
+function isGitRepo() {
+  try {
+    execSync("git rev-parse --is-inside-work-tree", { cwd, stdio: "pipe" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+function hasCommits() {
+  try {
+    execSync("git rev-parse HEAD", { cwd, stdio: "pipe" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+function getChangedFiles() {
+  const files = [];
+  if (hasCommits()) {
+    const diff = execSync("git diff --name-status HEAD", { cwd, encoding: "utf-8" }).trim();
+    if (diff) {
+      for (const line of diff.split("\n")) {
+        const parts = line.split("	");
+        const code = parts[0];
+        if (code.startsWith("R")) {
+          files.push({ path: parts[2], status: "renamed", oldPath: parts[1] });
+        } else if (code === "M") {
+          files.push({ path: parts[1], status: "modified" });
+        } else if (code === "D") {
+          files.push({ path: parts[1], status: "deleted" });
+        } else if (code === "A") {
+          files.push({ path: parts[1], status: "added" });
+        }
+      }
+    }
+  }
+  const untracked = execSync("git ls-files --others --exclude-standard", {
+    cwd,
+    encoding: "utf-8"
+  }).trim();
+  if (untracked) {
+    for (const path of untracked.split("\n")) {
+      if (path.startsWith(".diffback-local-diffs/")) continue;
+      if (!files.some((f) => f.path === path)) {
+        files.push({ path, status: "added" });
+      }
+    }
+  }
+  if (hasCommits()) {
+    const staged = execSync("git diff --name-status --cached HEAD", { cwd, encoding: "utf-8" }).trim();
+    if (staged) {
+      for (const line of staged.split("\n")) {
+        const parts = line.split("	");
+        const code = parts[0];
+        const path = code.startsWith("R") ? parts[2] : parts[1];
+        if (!files.some((f) => f.path === path)) {
+          if (code.startsWith("R")) {
+            files.push({ path, status: "renamed", oldPath: parts[1] });
+          } else if (code === "M") {
+            files.push({ path, status: "modified" });
+          } else if (code === "D") {
+            files.push({ path, status: "deleted" });
+          } else if (code === "A") {
+            files.push({ path, status: "added" });
+          }
+        }
+      }
+    }
+  }
+  return files.sort((a, b) => a.path.localeCompare(b.path));
+}
+function getFileDiff(filePath) {
+  const absPath = resolve(cwd, filePath);
+  try {
+    const numstat = execSync(`git diff --numstat HEAD -- "${filePath}"`, {
+      cwd,
+      encoding: "utf-8"
+    }).trim();
+    if (numstat && numstat.startsWith("-	-	")) {
+      return `Binary file ${filePath} has changed`;
+    }
+  } catch {
+  }
+  if (hasCommits()) {
+    const diff = execSync(`git diff HEAD -- "${filePath}"`, { cwd, encoding: "utf-8" });
+    if (diff.trim()) return diff;
+    const stagedDiff = execSync(`git diff --cached HEAD -- "${filePath}"`, { cwd, encoding: "utf-8" });
+    if (stagedDiff.trim()) return stagedDiff;
+  }
+  if (existsSync(absPath)) {
+    const content = readFileSync(absPath, "utf-8");
+    const lines = content.split("\n");
+    const diffLines = [
+      `--- /dev/null`,
+      `+++ b/${filePath}`,
+      `@@ -0,0 +1,${lines.length} @@`,
+      ...lines.map((l) => `+${l}`)
+    ];
+    return diffLines.join("\n");
+  }
+  if (hasCommits()) {
+    try {
+      const content = execSync(`git show HEAD:"${filePath}"`, { cwd, encoding: "utf-8" });
+      const lines = content.split("\n");
+      const diffLines = [
+        `--- a/${filePath}`,
+        `+++ /dev/null`,
+        `@@ -1,${lines.length} +0,0 @@`,
+        ...lines.map((l) => `-${l}`)
+      ];
+      return diffLines.join("\n");
+    } catch {
+      return `File ${filePath} was deleted`;
+    }
+  }
+  return "";
+}
+function hashFile(filePath) {
+  const absPath = resolve(cwd, filePath);
+  try {
+    const content = readFileSync(absPath);
+    return createHash("sha256").update(content).digest("hex").slice(0, 16);
+  } catch {
+    return "deleted";
+  }
+}
+function loadState() {
+  try {
+    const data = readFileSync(getStateFile(), "utf-8");
+    return JSON.parse(data);
+  } catch {
+    return { 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;
+    if (platform === "darwin") {
+      execSync("pbcopy", { input: text });
+    } else if (platform === "linux") {
+      execSync("xclip -selection clipboard", { input: text });
+    } else if (platform === "win32") {
+      execSync("clip", { input: text });
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+function parseBody(req) {
+  return new Promise((resolve2) => {
+    let body = "";
+    req.on("data", (chunk) => body += chunk.toString());
+    req.on("end", () => resolve2(body));
+  });
+}
+function json(res, data, status = 200) {
+  res.writeHead(status, {
+    "Content-Type": "application/json",
+    "Access-Control-Allow-Origin": "*"
+  });
+  res.end(JSON.stringify(data));
+}
+function startServer(port) {
+  const changedFiles = getChangedFiles();
+  if (changedFiles.length === 0) {
+    console.log("No uncommitted changes found. Nothing to review.");
+    process.exit(0);
+  }
+  let state = loadState();
+  state = reconcileState(state, changedFiles);
+  saveState(state);
+  const server = http.createServer(async (req, res) => {
+    const url = new URL(req.url || "/", `http://localhost:${port}`);
+    const path = url.pathname;
+    if (req.method === "OPTIONS") {
+      res.writeHead(204, {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+        "Access-Control-Allow-Headers": "Content-Type"
+      });
+      res.end();
+      return;
+    }
+    try {
+      if (path === "/" && req.method === "GET") {
+        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+        res.end(`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Code Review</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>\u{1F50D}</text></svg>">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
+  <style>
+    /* Solarized Dark */
+    :root {
+      --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;
+      --sidebar-width: 280px;
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    /* Toolbar */
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 16px;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    .toolbar-title {
+      font-weight: 600;
+      font-size: 14px;
+      color: var(--text-bright);
+      flex: 1;
+    }
+    .toolbar-stats {
+      font-size: 13px;
+      color: var(--text-muted);
+    }
+    .toolbar-stats .count { color: var(--cyan); font-weight: 600; }
+    .btn {
+      padding: 5px 12px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--bg-tertiary);
+      color: var(--text);
+      font-size: 12px;
+      cursor: pointer;
+      font-weight: 500;
+    }
+    .btn:hover { border-color: var(--accent); }
+    .btn-primary {
+      background: var(--accent);
+      color: var(--bg);
+      border-color: var(--accent);
+      font-weight: 600;
+    }
+    .btn-primary:hover { opacity: 0.9; }
+    .btn-danger {
+      border-color: var(--orange);
+      color: var(--orange);
+    }
+    .btn-danger:hover { background: var(--orange); color: var(--bg); }
+
+    /* Main layout */
+    .main {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    /* Sidebar */
+    .sidebar {
+      width: var(--sidebar-width);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+    .sidebar-header {
+      padding: 8px 12px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      border-bottom: 1px solid var(--border);
+      background: var(--bg-secondary);
+    }
+    .file-list {
+      flex: 1;
+      overflow-y: auto;
+    }
+    .file-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      cursor: pointer;
+      font-size: 13px;
+      border-bottom: 1px solid var(--border);
+      transition: background 0.1s;
+    }
+    .file-item:hover { background: var(--bg-tertiary); }
+    .file-item.active { background: var(--bg-tertiary); border-left: 2px solid var(--cyan); }
+    .file-status-icon {
+      width: 18px;
+      text-align: center;
+      flex-shrink: 0;
+      font-size: 12px;
+      font-weight: 700;
+    }
+    .file-review-icon {
+      width: 18px;
+      text-align: center;
+      flex-shrink: 0;
+      font-size: 11px;
+    }
+    .file-path {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 12px;
+    }
+    .file-dir { color: var(--text-muted); }
+
+    /* Shortcuts legend in sidebar */
+    .shortcuts-legend {
+      padding: 8px 12px;
+      border-top: 1px solid var(--border);
+      background: var(--bg-secondary);
+      font-size: 11px;
+      color: var(--text-muted);
+      flex-shrink: 0;
+    }
+    .shortcuts-legend div {
+      display: flex;
+      justify-content: space-between;
+      padding: 2px 0;
+    }
+    .shortcuts-legend kbd {
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      border-radius: 3px;
+      padding: 0 4px;
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 10px;
+      color: var(--text-bright);
+    }
+
+    /* Content area */
+    .content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      position: relative;
+    }
+
+    /* File header */
+    .file-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+      z-index: 10;
+    }
+    .file-nav-btn {
+      background: none;
+      border: 1px solid var(--border);
+      color: var(--text);
+      cursor: pointer;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 14px;
+      line-height: 1;
+    }
+    .file-nav-btn:hover { border-color: var(--cyan); color: var(--cyan); }
+    .file-header-path {
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 13px;
+      flex: 1;
+      color: var(--text-bright);
+    }
+    .file-header .badge {
+      font-size: 11px;
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-weight: 500;
+    }
+    .badge-added { background: rgba(133, 153, 0, 0.2); color: var(--green); }
+    .badge-modified { background: rgba(181, 137, 0, 0.2); color: var(--yellow); }
+    .badge-deleted { background: rgba(203, 75, 22, 0.2); color: var(--orange); }
+    .badge-renamed { background: rgba(108, 113, 196, 0.2); color: var(--violet); }
+    .badge-changed { background: rgba(203, 75, 22, 0.15); color: var(--orange); font-size: 10px; }
+
+    /* Diff viewer */
+    .diff-container {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: auto;
+      position: relative;
+      z-index: 1;
+    }
+    .diff-container .d2h-wrapper { background: var(--bg); }
+    .empty-state {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      color: var(--text-muted);
+      font-size: 14px;
+    }
+
+    /* Review section */
+    .review-section {
+      border-top: 1px solid var(--border);
+      background: var(--bg-secondary);
+      flex-shrink: 0;
+      max-height: 40%;
+      overflow-y: auto;
+      position: relative;
+      z-index: 10;
+    }
+    .review-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      border-bottom: 1px solid var(--border);
+    }
+    .comments-list {
+      padding: 8px 16px;
+    }
+    .comment-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 8px 0;
+      border-bottom: 1px solid var(--border);
+      font-size: 13px;
+    }
+    .comment-item:last-child { border-bottom: none; }
+    .comment-line-ref {
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 11px;
+      color: var(--cyan);
+      background: rgba(42, 161, 152, 0.15);
+      padding: 2px 6px;
+      border-radius: 4px;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+    .comment-text { flex: 1; line-height: 1.4; }
+    .comment-suggestion {
+      margin-top: 4px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      padding: 6px 8px;
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 12px;
+      white-space: pre-wrap;
+    }
+    .comment-delete {
+      color: var(--text-muted);
+      cursor: pointer;
+      font-size: 14px;
+      padding: 0 4px;
+      flex-shrink: 0;
+    }
+    .comment-delete:hover { color: var(--orange); }
+
+    /* Add comment form */
+    .add-comment {
+      padding: 8px 16px;
+      border-top: 1px solid var(--border);
+    }
+    .add-comment-row {
+      display: flex;
+      gap: 8px;
+      align-items: flex-start;
+    }
+    .add-comment input[type="number"] {
+      width: 60px;
+      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;
+    }
+    .add-comment textarea {
+      flex: 1;
+      padding: 6px 8px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      color: var(--text);
+      font-size: 13px;
+      font-family: inherit;
+      resize: vertical;
+      min-height: 32px;
+      max-height: 120px;
+    }
+    .add-comment input:focus,
+    .add-comment textarea:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+    .suggestion-toggle {
+      font-size: 11px;
+      color: var(--accent);
+      cursor: pointer;
+      margin-top: 4px;
+      display: inline-block;
+    }
+    .suggestion-input {
+      margin-top: 4px;
+    }
+    .suggestion-input textarea {
+      width: 100%;
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 12px;
+    }
+
+    /* General comments section */
+    .general-section {
+      border-top: 2px solid var(--border);
+      background: var(--bg-secondary);
+      flex-shrink: 0;
+      position: relative;
+      z-index: 10;
+    }
+    .general-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      border-bottom: 1px solid var(--border);
+      cursor: pointer;
+    }
+    .general-header:hover { color: var(--text); }
+    .general-body {
+      max-height: 200px;
+      overflow-y: auto;
+    }
+
+    /* Modal */
+    .modal-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 100;
+    }
+    .modal {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      width: 80%;
+      max-width: 800px;
+      max-height: 80vh;
+      display: flex;
+      flex-direction: column;
+    }
+    .modal-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border);
+      font-weight: 600;
+    }
+    .modal-header .modal-title { flex: 1; }
+    .modal-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+    }
+    .modal-body pre {
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 13px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .modal-footer {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 16px;
+      border-top: 1px solid var(--border);
+      justify-content: flex-end;
+    }
+    .copied-msg {
+      color: var(--cyan);
+      font-size: 13px;
+      font-weight: 500;
+    }
+
+    /* Scrollbar */
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-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; }
+    .d2h-code-linenumber:hover {
+      background: rgba(38, 139, 210, 0.25) !important;
+    }
+
+    /* ---- diff2html Solarized Dark overrides ---- */
+    .d2h-file-header, .d2h-file-wrapper {
+      border-color: var(--border) !important;
+    }
+    .d2h-wrapper, .d2h-file-wrapper {
+      background: var(--bg) !important;
+    }
+    .d2h-file-diff .d2h-code-pane {
+      background: var(--bg) !important;
+    }
+    /* Force table to fill width */
+    .d2h-diff-table {
+      width: 100% !important;
+    }
+    .d2h-code-line, .d2h-code-side-line {
+      background: var(--bg) !important;
+      color: var(--text) !important;
+      width: 100% !important;
+    }
+    .d2h-code-line-ctn {
+      color: var(--text) !important;
+      width: 100% !important;
+    }
+    /* Added lines */
+    .d2h-ins, .d2h-ins .d2h-code-line-ctn {
+      background: #0a3d0a !important;
+      color: #eee8d5 !important;
+    }
+    .d2h-ins .d2h-code-line-ctn ins,
+    .d2h-ins.d2h-change .d2h-code-line-ctn ins {
+      background: #1a5c1a !important;
+      color: #eee8d5 !important;
+      text-decoration: none !important;
+    }
+    /* Deleted lines */
+    .d2h-del, .d2h-del .d2h-code-line-ctn {
+      background: #3d0a0a !important;
+      color: #eee8d5 !important;
+    }
+    .d2h-del .d2h-code-line-ctn del,
+    .d2h-del.d2h-change .d2h-code-line-ctn del {
+      background: #5c1a1a !important;
+      color: #eee8d5 !important;
+      text-decoration: none !important;
+    }
+    /* Info/hunk headers - visually hidden but in DOM for fold indicator positioning */
+    .d2h-info {
+      height: 0 !important;
+      padding: 0 !important;
+      overflow: hidden !important;
+      border: none !important;
+      line-height: 0 !important;
+      font-size: 0 !important;
+    }
+    /* Line numbers */
+    .d2h-code-linenumber {
+      background: #073642 !important;
+      color: #657b83 !important;
+      border-color: #586e75 !important;
+    }
+    .d2h-ins .d2h-code-linenumber {
+      background: #082e08 !important;
+      color: #839496 !important;
+    }
+    .d2h-del .d2h-code-linenumber {
+      background: #2e0808 !important;
+      color: #839496 !important;
+    }
+    /* Empty placeholder cells */
+    .d2h-code-side-emptyplaceholder, .d2h-emptyplaceholder {
+      background: var(--bg-tertiary) !important;
+      border-color: var(--border) !important;
+    }
+
+    /* ---- Code fold/expand indicator ---- */
+    .fold-indicator {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 16px 4px 60px;
+      background: var(--bg-secondary);
+      border-top: 1px solid var(--border);
+      border-bottom: 1px solid var(--border);
+      color: var(--accent);
+      font-size: 12px;
+      cursor: pointer;
+      user-select: none;
+      font-family: "SF Mono", "Fira Code", monospace;
+    }
+    .fold-indicator:hover {
+      background: var(--bg-tertiary);
+      color: var(--cyan);
+    }
+    .fold-indicator .fold-icon {
+      transition: transform 0.15s;
+    }
+    .fold-indicator.expanded .fold-icon {
+      transform: rotate(90deg);
+    }
+    .fold-lines {
+      background: var(--bg);
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 13px;
+      color: var(--text-muted);
+      overflow: hidden;
+    }
+    .fold-lines.collapsed {
+      display: none;
+    }
+    .fold-line {
+      display: flex;
+      padding: 0 8px;
+      line-height: 20px;
+    }
+    .fold-line-num {
+      width: 50px;
+      text-align: right;
+      padding-right: 12px;
+      color: #586e75;
+      flex-shrink: 0;
+      user-select: none;
+    }
+    .fold-line-content {
+      flex: 1;
+      white-space: pre;
+    }
+
+    /* ---- Inline comment markers & bubbles ---- */
+    .has-comment .d2h-code-linenumber {
+      position: relative;
+    }
+    .comment-marker {
+      position: absolute;
+      left: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--yellow);
+    }
+    .inline-comment-row td {
+      padding: 0 !important;
+      border: none !important;
+      background: var(--bg-secondary) !important;
+    }
+    .inline-comment-bubble {
+      margin: 4px 8px 4px 60px;
+      padding: 6px 10px;
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      border-left: 3px solid var(--yellow);
+      border-radius: 4px;
+      font-size: 12px;
+      color: var(--text-bright);
+      line-height: 1.4;
+    }
+    .inline-comment-bubble .inline-line-ref {
+      color: var(--cyan);
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 11px;
+      margin-right: 6px;
+    }
+    .inline-comment-bubble .inline-suggestion {
+      margin-top: 4px;
+      padding: 4px 6px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 3px;
+      font-family: "SF Mono", "Fira Code", monospace;
+      font-size: 11px;
+      white-space: pre-wrap;
+      color: var(--text);
+    }
+  </style>
+</head>
+<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>
+
+  <div class="main">
+    <div class="sidebar">
+      <div class="sidebar-header">Files</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>
+    </div>
+
+    <div class="content" id="content">
+      <div class="empty-state" id="empty-state">Select a file to review</div>
+    </div>
+  </div>
+
+  <script>
+    // --- State ---
+    let appState = {
+      files: [],
+      generalComments: [],
+      summary: null,
+      projectName: '',
+      selectedFile: null,
+      currentDiff: null,
+      fileContents: {}, // cache for expanded fold content
+    };
+
+    // --- API ---
+    async function api(path, opts = {}) {
+      const res = await fetch(path, {
+        headers: { 'Content-Type': 'application/json' },
+        ...opts,
+        body: opts.body ? JSON.stringify(opts.body) : undefined,
+      });
+      return res.json();
+    }
+
+    async function loadFiles() {
+      const data = await api('/api/files');
+      appState.files = data.files;
+      appState.generalComments = data.generalComments || [];
+      appState.summary = data.summary;
+      appState.projectName = data.projectName;
+      renderToolbar();
+      renderFileList();
+    }
+
+    async function loadDiff(filePath) {
+      const data = await api(\`/api/diff?path=\${encodeURIComponent(filePath)}\`);
+      appState.currentDiff = data;
+      appState.selectedFile = filePath;
+      renderContent();
+      document.querySelectorAll('.file-item').forEach(el => {
+        el.classList.toggle('active', el.dataset.path === filePath);
+      });
+    }
+
+    async function saveReview(filePath, status, comments) {
+      await api('/api/review', {
+        method: 'POST',
+        body: { path: filePath, status, comments },
+      });
+      await loadFiles();
+    }
+
+    async function saveGeneralComments() {
+      await api('/api/general-comments', {
+        method: 'POST',
+        body: { comments: appState.generalComments },
+      });
+    }
+
+    async function getFileContent(filePath) {
+      if (appState.fileContents[filePath]) return appState.fileContents[filePath];
+      const data = await api(\`/api/file-content?path=\${encodeURIComponent(filePath)}\`);
+      if (data.content) {
+        appState.fileContents[filePath] = data.content;
+      }
+      return data.content || '';
+    }
+
+    // --- Navigation helpers ---
+    function navigateFile(direction) {
+      const files = appState.files;
+      if (files.length === 0) return;
+      const currentIdx = files.findIndex(f => f.path === appState.selectedFile);
+      let next;
+      if (direction === 'next') {
+        next = currentIdx < files.length - 1 ? currentIdx + 1 : 0;
+      } else {
+        next = currentIdx > 0 ? currentIdx - 1 : files.length - 1;
+      }
+      loadDiff(files[next].path);
+    }
+
+    // --- Render: Toolbar ---
+    function renderToolbar() {
+      document.getElementById('toolbar-title').textContent = \`diffback: \${appState.projectName}\`;
+      document.title = \`Review: \${appState.projectName}\`;
+      const s = appState.summary;
+      if (s) {
+        document.getElementById('toolbar-stats').innerHTML =
+          \`<span class="count">\${s.reviewed + s.hasFeedback}</span>/\${s.total} reviewed\`;
+      }
+    }
+
+    // --- Render: File List ---
+    function renderFileList() {
+      const container = document.getElementById('file-list');
+      container.innerHTML = '';
+
+      for (const file of appState.files) {
+        const el = document.createElement('div');
+        el.className = 'file-item' + (appState.selectedFile === file.path ? ' active' : '');
+        el.dataset.path = file.path;
+
+        const statusIcon = document.createElement('span');
+        statusIcon.className = 'file-status-icon';
+        if (file.status === 'added') { statusIcon.textContent = 'A'; statusIcon.style.color = 'var(--accent)'; }
+        else if (file.status === 'modified') { statusIcon.textContent = 'M'; statusIcon.style.color = 'var(--yellow)'; }
+        else if (file.status === 'deleted') { statusIcon.textContent = 'D'; statusIcon.style.color = 'var(--orange)'; }
+        else if (file.status === 'renamed') { statusIcon.textContent = 'R'; statusIcon.style.color = 'var(--violet)'; }
+
+        const reviewIcon = document.createElement('span');
+        reviewIcon.className = 'file-review-icon';
+        if (file.review?.status === 'reviewed') {
+          reviewIcon.textContent = '\\u2713';
+          reviewIcon.style.color = 'var(--cyan)';
+        } else if (file.review?.status === 'has-feedback') {
+          reviewIcon.textContent = '\\u25CF';
+          reviewIcon.style.color = 'var(--yellow)';
+        } else {
+          reviewIcon.textContent = '\\u25CB';
+          reviewIcon.style.color = 'var(--text-muted)';
+        }
+
+        const pathEl = document.createElement('span');
+        pathEl.className = 'file-path';
+        const parts = file.path.split('/');
+        if (parts.length > 1) {
+          const dir = document.createElement('span');
+          dir.className = 'file-dir';
+          dir.textContent = parts.slice(0, -1).join('/') + '/';
+          pathEl.appendChild(dir);
+          pathEl.appendChild(document.createTextNode(parts[parts.length - 1]));
+        } else {
+          pathEl.textContent = file.path;
+        }
+
+        el.appendChild(statusIcon);
+        el.appendChild(reviewIcon);
+        el.appendChild(pathEl);
+        el.addEventListener('click', () => loadDiff(file.path));
+        container.appendChild(el);
+      }
+    }
+
+    // --- Parse hunk ranges from @@ header ---
+    function parseHunkHeader(headerText) {
+      // @@ -oldStart,oldCount +newStart,newCount @@
+      const match = headerText.match(/@@ -(\\d+)(?:,(\\d+))? \\+(\\d+)(?:,(\\d+))? @@/);
+      if (!match) return null;
+      return {
+        oldStart: parseInt(match[1]),
+        oldCount: match[2] !== undefined ? parseInt(match[2]) : 1,
+        newStart: parseInt(match[3]),
+        newCount: match[4] !== undefined ? parseInt(match[4]) : 1,
+      };
+    }
+
+    // --- Insert fold indicators between hunks ---
+    function insertFoldIndicators(diffContainer, diffText, filePath) {
+      const hunkHeaders = [];
+      const lines = diffText.split('\\n');
+      for (const line of lines) {
+        const parsed = parseHunkHeader(line);
+        if (parsed) hunkHeaders.push(parsed);
+      }
+
+      if (hunkHeaders.length === 0) return;
+
+      const infoElements = diffContainer.querySelectorAll('.d2h-info');
+
+      // For each pair of consecutive hunks, add a fold between them
+      for (let i = 1; i < hunkHeaders.length && i < infoElements.length; i++) {
+        const prevHunk = hunkHeaders[i - 1];
+        const currHunk = hunkHeaders[i];
+        const prevEnd = prevHunk.newStart + prevHunk.newCount - 1;
+        const currStart = currHunk.newStart;
+        const hiddenLines = currStart - prevEnd - 1;
+
+        if (hiddenLines <= 0) continue;
+
+        insertFoldAtElement(infoElements[i], filePath, prevEnd + 1, currStart - 1, hiddenLines, \`fold-\${i}\`);
+      }
+    }
+
+    function insertFoldAtElement(infoEl, filePath, startLine, endLine, hiddenLines, foldId) {
+      const parentRow = infoEl.closest('tr');
+      if (!parentRow) return;
+
+      const fold = document.createElement('div');
+      fold.className = 'fold-indicator';
+      fold.innerHTML = \`<span class="fold-icon">\\u25B6</span> \${hiddenLines} lines hidden (\${startLine}\\u2013\${endLine})\`;
+
+      const foldContent = document.createElement('div');
+      foldContent.className = 'fold-lines collapsed';
+
+      const tr = document.createElement('tr');
+      const td = document.createElement('td');
+      td.colSpan = 99;
+      td.style.padding = '0';
+      td.style.border = 'none';
+      td.appendChild(fold);
+      td.appendChild(foldContent);
+      tr.appendChild(td);
+
+      parentRow.parentElement.insertBefore(tr, parentRow);
+
+      fold.addEventListener('click', async () => {
+        const isExpanded = !foldContent.classList.contains('collapsed');
+        if (isExpanded) {
+          foldContent.classList.add('collapsed');
+          fold.classList.remove('expanded');
+        } else {
+          if (!foldContent.dataset.loaded) {
+            const fileContent = await getFileContent(filePath);
+            const allLines = fileContent.split('\\n');
+            const start = startLine - 1;
+            const end = endLine;
+            const slice = allLines.slice(start, end);
+
+            foldContent.innerHTML = slice.map((line, idx) => {
+              const lineNum = start + idx + 1;
+              return \`<div class="fold-line"><span class="fold-line-num">\${lineNum}</span><span class="fold-line-content">\${escapeHtml(line)}</span></div>\`;
+            }).join('');
+            foldContent.dataset.loaded = 'true';
+          }
+          foldContent.classList.remove('collapsed');
+          fold.classList.add('expanded');
+        }
+      });
+    }
+
+    // --- 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);
+      }
+
+      // 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;
+
+        // 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>
+        const tr = el.closest('tr');
+        if (!tr) return;
+
+        for (const comment of byLine[num]) {
+          const commentTr = document.createElement('tr');
+          commentTr.className = 'inline-comment-row';
+          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>
+          \`;
+          commentTr.appendChild(td);
+          tr.after(commentTr);
+        }
+
+        // Remove from map so we don't double-insert
+        delete byLine[num];
+      });
+    }
+
+    // --- Render: Content (diff + review) ---
+    function renderContent() {
+      const container = document.getElementById('content');
+      const file = appState.files.find(f => f.path === appState.selectedFile);
+      if (!file || !appState.currentDiff) {
+        container.innerHTML = '<div class="empty-state">Select a file to review</div>';
+        return;
+      }
+
+      const review = file.review || { status: 'pending', comments: [], hash: '' };
+      const comments = review.comments || [];
+
+      container.innerHTML = '';
+
+      // File header with navigation arrows
+      const currentIdx = appState.files.findIndex(f => f.path === appState.selectedFile);
+      const header = document.createElement('div');
+      header.className = 'file-header';
+      header.innerHTML = \`
+        <button class="file-nav-btn" id="btn-prev" title="Previous file (k)">\\u25B2</button>
+        <button class="file-nav-btn" id="btn-next" title="Next file (j)">\\u25BC</button>
+        <span class="file-header-path">\${escapeHtml(file.path)}</span>
+        <span style="color: var(--text-muted); font-size: 12px;">\${currentIdx + 1}/\${appState.files.length}</span>
+        \${file.review?.changedSinceReview ? '<span class="badge badge-changed">Changed since review</span>' : ''}
+        <span class="badge badge-\${file.status}">\${file.status}</span>
+        <button class="btn \${review.status === 'reviewed' ? 'btn-primary' : ''}" id="btn-approve">
+          \${review.status === 'reviewed' ? '\\u2713 Viewed' : 'Mark Viewed'}
+        </button>
+      \`;
+      container.appendChild(header);
+
+      // Nav button handlers
+      header.querySelector('#btn-prev').addEventListener('click', () => navigateFile('prev'));
+      header.querySelector('#btn-next').addEventListener('click', () => navigateFile('next'));
+
+      // Diff viewer
+      const diffContainer = document.createElement('div');
+      diffContainer.className = 'diff-container';
+      if (appState.currentDiff.diff) {
+        try {
+          const diff2htmlUi = new Diff2HtmlUI(diffContainer, appState.currentDiff.diff, {
+            drawFileList: false,
+            matching: 'lines',
+            outputFormat: 'line-by-line',
+            highlight: true,
+            fileListToggle: false,
+            fileListStartVisible: false,
+            fileContentToggle: false,
+          });
+          diff2htmlUi.draw();
+
+          // Hide diff2html's own file header
+          const d2hHeader = diffContainer.querySelector('.d2h-file-header');
+          if (d2hHeader) d2hHeader.style.display = 'none';
+
+          // Post-render: folds, inline comments, line click handlers
+          setTimeout(() => {
+            insertFoldIndicators(diffContainer, appState.currentDiff.diff, file.path);
+            insertInlineComments(diffContainer, comments);
+
+            diffContainer.querySelectorAll('.d2h-code-linenumber').forEach(el => {
+              el.addEventListener('click', () => {
+                const lineNum = el.querySelector('.line-num2')?.textContent?.trim()
+                  || el.querySelector('.line-num1')?.textContent?.trim()
+                  || el.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();
+                  }
+                }
+              });
+            });
+          }, 80);
+        } catch (err) {
+          diffContainer.innerHTML = \`<pre style="padding: 16px; font-size: 13px; white-space: pre-wrap;">\${escapeHtml(appState.currentDiff.diff)}</pre>\`;
+        }
+      } else {
+        diffContainer.innerHTML = '<div class="empty-state">No diff available</div>';
+      }
+      container.appendChild(diffContainer);
+
+      // Review section
+      const reviewSection = document.createElement('div');
+      reviewSection.className = 'review-section';
+
+      const reviewHeader = document.createElement('div');
+      reviewHeader.className = 'review-header';
+      reviewHeader.textContent = \`File Comments (\${comments.length})\`;
+      reviewSection.appendChild(reviewHeader);
+
+      if (comments.length > 0) {
+        const commentsList = document.createElement('div');
+        commentsList.className = 'comments-list';
+        for (const comment of comments) {
+          const item = document.createElement('div');
+          item.className = 'comment-item';
+          item.innerHTML = \`
+            <span class="comment-line-ref">\${comment.line ? 'L' + comment.line : 'General'}</span>
+            <div class="comment-text">
+              \${escapeHtml(comment.text)}
+              \${comment.suggestion ? \`<div class="comment-suggestion">\${escapeHtml(comment.suggestion)}</div>\` : ''}
+            </div>
+            <span class="comment-delete" data-id="\${comment.id}" title="Delete comment">&times;</span>
+          \`;
+          commentsList.appendChild(item);
+        }
+        reviewSection.appendChild(commentsList);
+
+        commentsList.querySelectorAll('.comment-delete').forEach(el => {
+          el.addEventListener('click', () => {
+            const id = el.dataset.id;
+            const newComments = comments.filter(c => c.id !== id);
+            const newStatus = newComments.length > 0 ? 'has-feedback' : 'pending';
+            saveReview(file.path, newStatus, newComments).then(() => {
+              if (appState.selectedFile === file.path) loadDiff(file.path);
+            });
+          });
+        });
+      }
+
+      const addComment = document.createElement('div');
+      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)">
+          <textarea id="comment-text" placeholder="Add a comment (line optional)..." rows="1"></textarea>
+          <button class="btn" id="btn-add-comment">Add</button>
+        </div>
+        <span class="suggestion-toggle" id="toggle-suggestion">+ Add code suggestion</span>
+        <div class="suggestion-input" id="suggestion-input" style="display: none;">
+          <textarea id="comment-suggestion" placeholder="Suggested code..." rows="3"></textarea>
+        </div>
+      \`;
+      reviewSection.appendChild(addComment);
+      container.appendChild(reviewSection);
+
+      // General comments section
+      const generalSection = document.createElement('div');
+      generalSection.className = 'general-section';
+      generalSection.innerHTML = \`
+        <div class="general-header" id="toggle-general">
+          General Comments (\${appState.generalComments.length}) \\u25BE
+        </div>
+        <div class="general-body" id="general-body">
+          <div class="comments-list" id="general-comments-list"></div>
+          <div class="add-comment">
+            <div class="add-comment-row">
+              <textarea id="general-comment-text" placeholder="Add a general comment (not tied to any file)..." rows="1" style="flex:1;"></textarea>
+              <button class="btn" id="btn-add-general">Add</button>
+            </div>
+          </div>
+        </div>
+      \`;
+      container.appendChild(generalSection);
+
+      renderGeneralComments();
+
+      // --- Event handlers ---
+
+      document.getElementById('btn-approve').addEventListener('click', () => {
+        if (review.status === 'reviewed') {
+          // Un-view: stay on same file
+          saveReview(file.path, 'pending', comments).then(() => loadDiff(file.path));
+        } else {
+          // Viewed and advance to next file
+          saveReview(file.path, 'reviewed', comments).then(() => navigateFile('next'));
+        }
+      });
+
+      document.getElementById('btn-add-comment').addEventListener('click', addFileComment);
+      document.getElementById('comment-text').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) addFileComment();
+      });
+
+      document.getElementById('toggle-suggestion').addEventListener('click', () => {
+        const input = document.getElementById('suggestion-input');
+        input.style.display = input.style.display === 'none' ? 'block' : 'none';
+      });
+
+      document.getElementById('btn-add-general').addEventListener('click', addGeneralComment);
+      document.getElementById('general-comment-text').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) addGeneralComment();
+      });
+
+      document.getElementById('toggle-general').addEventListener('click', () => {
+        const body = document.getElementById('general-body');
+        body.style.display = body.style.display === 'none' ? 'block' : 'none';
+      });
+
+      function addFileComment() {
+        const text = document.getElementById('comment-text').value.trim();
+        if (!text) return;
+
+        const line = parseInt(document.getElementById('comment-line').value) || null;
+        const suggestion = document.getElementById('comment-suggestion')?.value.trim() || null;
+
+        const newComment = {
+          id: 'c-' + Date.now(),
+          line,
+          text,
+          suggestion,
+        };
+
+        // Save scroll position before re-render
+        const diffEl = document.querySelector('.diff-container');
+        const scrollTop = diffEl ? diffEl.scrollTop : 0;
+
+        const newComments = [...comments, newComment];
+        saveReview(file.path, 'has-feedback', newComments).then(() => {
+          loadDiff(file.path).then(() => {
+            // Restore scroll position
+            const newDiffEl = document.querySelector('.diff-container');
+            if (newDiffEl) newDiffEl.scrollTop = scrollTop;
+          });
+        });
+      }
+
+      function addGeneralComment() {
+        const text = document.getElementById('general-comment-text').value.trim();
+        if (!text) return;
+
+        appState.generalComments.push({
+          id: 'g-' + Date.now(),
+          text,
+        });
+        saveGeneralComments().then(() => {
+          document.getElementById('general-comment-text').value = '';
+          renderGeneralComments();
+          loadFiles();
+        });
+      }
+    }
+
+    function renderGeneralComments() {
+      const list = document.getElementById('general-comments-list');
+      if (!list) return;
+
+      list.innerHTML = '';
+      for (const comment of appState.generalComments) {
+        const item = document.createElement('div');
+        item.className = 'comment-item';
+        item.innerHTML = \`
+          <span class="comment-text">\${escapeHtml(comment.text)}</span>
+          <span class="comment-delete" data-id="\${comment.id}" title="Delete">&times;</span>
+        \`;
+        list.appendChild(item);
+      }
+
+      list.querySelectorAll('.comment-delete').forEach(el => {
+        el.addEventListener('click', () => {
+          appState.generalComments = appState.generalComments.filter(c => c.id !== el.dataset.id);
+          saveGeneralComments().then(() => {
+            renderGeneralComments();
+            loadFiles();
+          });
+        });
+      });
+
+      const header = document.getElementById('toggle-general');
+      if (header) {
+        header.textContent = \`General Comments (\${appState.generalComments.length}) \\u25BE\`;
+      }
+    }
+
+    // --- Generate Feedback ---
+    document.getElementById('btn-generate').addEventListener('click', async () => {
+      const data = await api('/api/generate', { method: 'POST', body: {} });
+      showFeedbackModal(data.prompt);
+    });
+
+    function showFeedbackModal(prompt) {
+      const overlay = document.createElement('div');
+      overlay.className = 'modal-overlay';
+      overlay.innerHTML = \`
+        <div class="modal">
+          <div class="modal-header">
+            <span class="modal-title">Generated Feedback Prompt</span>
+            <button class="btn" id="modal-close">&times;</button>
+          </div>
+          <div class="modal-body">
+            <pre id="modal-prompt">\${escapeHtml(prompt)}</pre>
+          </div>
+          <div class="modal-footer">
+            <span class="copied-msg" id="copied-msg" style="display: none;">Copied!</span>
+            <button class="btn btn-primary" id="modal-copy">Copy to Clipboard</button>
+          </div>
+        </div>
+      \`;
+      document.body.appendChild(overlay);
+
+      overlay.querySelector('#modal-close').addEventListener('click', () => overlay.remove());
+      overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) overlay.remove();
+      });
+      document.addEventListener('keydown', function handler(e) {
+        if (e.key === 'Escape') {
+          overlay.remove();
+          document.removeEventListener('keydown', handler);
+        }
+      });
+
+      overlay.querySelector('#modal-copy').addEventListener('click', async () => {
+        await api('/api/clipboard', { method: 'POST', body: { text: prompt } });
+        const msg = overlay.querySelector('#copied-msg');
+        msg.style.display = 'inline';
+        setTimeout(() => msg.style.display = 'none', 2000);
+      });
+
+      // Auto-copy on open
+      api('/api/clipboard', { method: 'POST', body: { text: prompt } });
+    }
+
+    // --- Finish Review ---
+    document.getElementById('btn-finish').addEventListener('click', async () => {
+      if (!confirm('Finish review and clear all state? This cannot be undone.')) return;
+      await api('/api/reset', { method: 'POST', body: {} });
+
+      // Show goodbye screen with countdown
+      document.body.innerHTML = \`
+        <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:#002b36;color:#93a1a1;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;text-align:center;gap:16px;">
+          <div style="font-size:48px;">&#128640;</div>
+          <div style="font-size:22px;color:#eee8d5;font-weight:600;">Thanks for using diffback!</div>
+          <div style="font-size:14px;color:#657b83;">Review state cleared. Go ship that feedback.</div>
+          <div style="margin-top:24px;font-size:13px;color:#586e75;">Closing in <span id="countdown">5</span>s...</div>
+        </div>
+      \`;
+
+      let seconds = 5;
+      const interval = setInterval(() => {
+        seconds--;
+        const el = document.getElementById('countdown');
+        if (el) el.textContent = String(seconds);
+        if (seconds <= 0) {
+          clearInterval(interval);
+          window.close();
+        }
+      }, 1000);
+    });
+
+    // --- Helpers ---
+    function escapeHtml(str) {
+      const div = document.createElement('div');
+      div.textContent = str;
+      return div.innerHTML;
+    }
+
+    // --- Keyboard shortcuts ---
+    document.addEventListener('keydown', (e) => {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+      if (e.key === 'j' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        navigateFile('next');
+      } else if (e.key === 'k' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        navigateFile('prev');
+      } else if (e.key === 'a') {
+        if (appState.selectedFile) {
+          document.getElementById('btn-approve')?.click();
+        }
+      } else if (e.key === 'c') {
+        e.preventDefault();
+        document.getElementById('comment-text')?.focus();
+      } else if (e.key === 'g') {
+        document.getElementById('btn-generate').click();
+      }
+    });
+
+    // --- Polling: refresh file list every 3s to detect external changes ---
+    setInterval(async () => {
+      const prev = JSON.stringify(appState.files.map(f => ({ p: f.path, s: f.review?.status, h: f.review?.hash, ch: f.review?.changedSinceReview })));
+      await loadFiles();
+      const curr = JSON.stringify(appState.files.map(f => ({ p: f.path, s: f.review?.status, h: f.review?.hash, ch: f.review?.changedSinceReview })));
+      // If the currently selected file changed, refresh its diff
+      if (prev !== curr && appState.selectedFile) {
+        const file = appState.files.find(f => f.path === appState.selectedFile);
+        if (file?.review?.changedSinceReview) {
+          // Preserve scroll
+          const diffEl = document.querySelector('.diff-container');
+          const scrollTop = diffEl ? diffEl.scrollTop : 0;
+          await loadDiff(appState.selectedFile);
+          const newDiffEl = document.querySelector('.diff-container');
+          if (newDiffEl) newDiffEl.scrollTop = scrollTop;
+        }
+      }
+    }, 3000);
+
+    // --- Init ---
+    loadFiles();
+  </script>
+</body>
+</html>
+`);
+        return;
+      }
+      if (path === "/api/files" && req.method === "GET") {
+        const currentFiles = getChangedFiles();
+        state = reconcileState(state, currentFiles);
+        saveState(state);
+        const filesWithReview = currentFiles.map((f) => ({
+          ...f,
+          review: state.files[f.path] || null
+        }));
+        const reviewed = Object.values(state.files).filter((f) => f.status === "reviewed").length;
+        const hasFeedback = Object.values(state.files).filter((f) => f.status === "has-feedback").length;
+        json(res, {
+          files: filesWithReview,
+          generalComments: state.generalComments,
+          summary: {
+            total: currentFiles.length,
+            reviewed,
+            hasFeedback,
+            pending: currentFiles.length - reviewed - hasFeedback
+          },
+          projectName
+        });
+        return;
+      }
+      if (path === "/api/diff" && req.method === "GET") {
+        const filePath = url.searchParams.get("path");
+        if (!filePath) {
+          json(res, { error: "Missing path parameter" }, 400);
+          return;
+        }
+        const diff = getFileDiff(filePath);
+        const file = changedFiles.find((f) => f.path === filePath);
+        json(res, {
+          path: filePath,
+          diff,
+          status: file?.status || "modified"
+        });
+        return;
+      }
+      if (path === "/api/file-content" && req.method === "GET") {
+        const filePath = url.searchParams.get("path");
+        if (!filePath) {
+          json(res, { error: "Missing path parameter" }, 400);
+          return;
+        }
+        const absPath = resolve(cwd, filePath);
+        try {
+          const content = readFileSync(absPath, "utf-8");
+          json(res, { path: filePath, content });
+        } catch {
+          try {
+            const content = execSync(`git show HEAD:"${filePath}"`, { cwd, encoding: "utf-8" });
+            json(res, { path: filePath, content });
+          } catch {
+            json(res, { error: "File not found" }, 404);
+          }
+        }
+        return;
+      }
+      if (path === "/api/review" && req.method === "POST") {
+        const body = JSON.parse(await parseBody(req));
+        const { path: filePath, status, comments } = body;
+        state.files[filePath] = {
+          status,
+          hash: hashFile(filePath),
+          comments: comments || [],
+          changedSinceReview: false
+        };
+        saveState(state);
+        json(res, { ok: true });
+        return;
+      }
+      if (path === "/api/general-comments" && req.method === "POST") {
+        const body = JSON.parse(await parseBody(req));
+        state.generalComments = body.comments;
+        saveState(state);
+        json(res, { ok: true });
+        return;
+      }
+      if (path === "/api/generate" && req.method === "POST") {
+        state = loadState();
+        const prompt = generateFeedback(state);
+        json(res, { prompt });
+        return;
+      }
+      if (path === "/api/clipboard" && req.method === "POST") {
+        const body = JSON.parse(await parseBody(req));
+        const ok = copyToClipboard(body.text);
+        json(res, { ok });
+        return;
+      }
+      if (path === "/api/reset" && req.method === "POST") {
+        try {
+          rmSync(getStateDir(), { recursive: true, force: true });
+        } catch {
+        }
+        json(res, { ok: true });
+        setTimeout(() => {
+          console.log("\n  Review finished. State cleared. Bye!");
+          server.close();
+          process.exit(0);
+        }, 6e3);
+        return;
+      }
+      res.writeHead(404);
+      res.end("Not found");
+    } catch (err) {
+      console.error("Server error:", err);
+      json(res, { error: String(err) }, 500);
+    }
+  });
+  server.listen(port, () => {
+    console.log(`
+  diffback: ${projectName}`);
+    console.log(`  ${changedFiles.length} files with changes`);
+    console.log(`  http://localhost:${port}
+`);
+    console.log("  Press Ctrl+C to stop\n");
+    import("open").then((mod) => mod.default(`http://localhost:${port}`));
+  });
+  process.on("SIGINT", () => {
+    console.log("\n  Stopped.");
+    server.close();
+    process.exit(0);
+  });
+  process.on("SIGTERM", () => {
+    server.close();
+    process.exit(0);
+  });
+}
+function main() {
+  if (!isGitRepo()) {
+    console.error("Error: not a git repository. Run diffback from a git project directory.");
+    process.exit(1);
+  }
+  const args = process.argv.slice(2);
+  let port = 3847;
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "--port" && args[i + 1]) {
+      port = parseInt(args[i + 1], 10);
+      i++;
+    } else if (args[i] === "--help" || args[i] === "-h") {
+      console.log(`
+  diffback - Review AI-generated code changes
+
+  Usage: diffback [options]
+
+  Options:
+    --port <number>  Port to use (default: 3847)
+    --help, -h       Show this help
+`);
+      process.exit(0);
+    }
+  }
+  startServer(port);
+}
+main();