critique 0.1.43 → 0.1.47

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# 0.1.47
+
+- Add vim-style keyboard navigation:
+  - `G` (Shift+g) - scroll to bottom
+  - `gg` (double-tap g) - scroll to top
+  - `Ctrl+D` - half page down
+  - `Ctrl+U` - half page up
+- `review` command: change debug console toggle from `Ctrl+D` to `Ctrl+Z` (consistent with main viewer)
+- Fix theme loading on Windows by using `fileURLToPath` for proper path conversion
+
+# 0.1.46
+
+- Add directory tree view at top of diff TUIs (default, review, web commands)
+- Switch opentui packages to npm releases (from pkg.pr.new preview URLs)
+- Add missing `marked` dependency
+- Fix Q and Escape keys not working to exit when there are no changes to display (fixes #16)
+
+# 0.1.45
+
+- Support git range syntax in single argument: `critique origin/main...HEAD` or `critique main..feature`
+
+# 0.1.44
+
+- Fix parsing error with submodule status lines:
+  - Handle "Submodule name contains modified content" lines
+  - Handle "Submodule name contains untracked content" lines
+  - Handle "Submodule name (new commits)" and similar status lines
+
 # 0.1.43
 
 - Show full submodule diffs instead of just commit hashes:

package/package.json

@@ -2,7 +2,7 @@
   "name": "critique",
   "module": "src/diff.tsx",
   "type": "module",
-  "version": "0.1.43",
+  "version": "0.1.47",
   "private": false,
   "bin": "./src/cli.tsx",
   "scripts": {
@@ -22,15 +22,16 @@
     "wrangler": "^4.19.1"
   },
   "dependencies": {
-    "@agentclientprotocol/sdk": "^0.12.0",
+    "@agentclientprotocol/sdk": "^0.13.1",
     "@clack/prompts": "1.0.0-alpha.9",
-    "@opentui/core": "https://pkg.pr.new/anomalyco/opentui/@opentui/core@367a94087821b3b5feedd35bbb57df43b10a286e",
-    "@opentui/react": "https://pkg.pr.new/anomalyco/opentui/@opentui/react@367a94087821b3b5feedd35bbb57df43b10a286e",
-    "@parcel/watcher": "^2.5.1",
+    "@opentui/core": "^0",
+    "@opentui/react": "^0",
+    "@parcel/watcher": "^2.5.6",
     "cac": "^6.7.14",
     "diff": "^8.0.2",
     "ghostty-opentui": "^1.3.12",
     "js-yaml": "^4.1.1",
+    "marked": "^17.0.1",
     "picocolors": "^1.1.1",
     "react": "^19.2.0",
     "zustand": "^5.0.8"

package/src/cli.tsx

@@ -27,11 +27,12 @@ import { join } from "path";
 import { create } from "zustand";
 import Dropdown from "./dropdown.tsx";
 import { debounce } from "./utils.ts";
-import { DiffView } from "./components/diff-view.tsx";
+import { DiffView, DirectoryTreeView } from "./components/index.ts";
 import { logger } from "./logger.ts";
 import {
   buildGitCommand,
   getFileName,
+  getFileStatus,
   countChanges,
   getViewMode,
   processFiles,
@@ -40,6 +41,7 @@ import {
   IGNORED_FILES,
   type ParsedFile,
 } from "./diff-utils.ts";
+import type { TreeFileInfo } from "./directory-tree.ts";
 
 // Lazy-load watcher only when --watch is used
 let watcherModule: typeof import("@parcel/watcher") | null = null;
@@ -1258,6 +1260,9 @@ function App({ parsedFiles }: AppProps) {
   const scrollboxRef = React.useRef<ScrollBoxRenderable | null>(null);
   const fileRefs = React.useRef<Map<number, BoxRenderable>>(new Map());
 
+  // Ref for double-tap detection (gg)
+  const lastKeyRef = React.useRef<{ key: string; time: number } | null>(null);
+
   useOnResize(
     React.useCallback((newWidth: number) => {
       setWidth(newWidth);
@@ -1293,7 +1298,43 @@ function App({ parsedFiles }: AppProps) {
 
     if (key.name === "z" && key.ctrl) {
       renderer.console.toggle();
+      return;
     }
+
+    // Vim-style scroll navigation
+    const scrollbox = scrollboxRef.current;
+    if (scrollbox) {
+      // G - go to bottom
+      if (key.name === "g" && key.shift) {
+        scrollbox.scrollBy(1, "content");
+        return;
+      }
+
+      // gg - go to top (double-tap within 300ms)
+      if (key.name === "g" && !key.shift && !key.ctrl) {
+        const now = Date.now();
+        if (lastKeyRef.current?.key === "g" && now - lastKeyRef.current.time < 300) {
+          scrollbox.scrollTo(0);
+          lastKeyRef.current = null;
+        } else {
+          lastKeyRef.current = { key: "g", time: now };
+        }
+        return;
+      }
+
+      // Ctrl+D - half page down
+      if (key.ctrl && key.name === "d") {
+        scrollbox.scrollBy(0.5, "viewport");
+        return;
+      }
+
+      // Ctrl+U - half page up
+      if (key.ctrl && key.name === "u") {
+        scrollbox.scrollBy(-0.5, "viewport");
+        return;
+      }
+    }
+
     if (key.option) {
       if (key.eventType === "release") {
         scrollAcceleration.multiplier = 1;
@@ -1332,10 +1373,20 @@ function App({ parsedFiles }: AppProps) {
     };
   });
 
-  const handleFileSelect = (value: string) => {
-    const index = parseInt(value, 10);
-    
-    // Scroll to file (scrollbox is always mounted)
+  // Build tree data for directory tree view
+  const treeFiles: TreeFileInfo[] = parsedFiles.map((file, idx) => {
+    const { additions, deletions } = countChanges(file.hunks);
+    return {
+      path: getFileName(file),
+      status: getFileStatus(file),
+      additions,
+      deletions,
+      fileIndex: idx,
+    };
+  });
+
+  // Scroll to file by index
+  const scrollToFile = (index: number) => {
     const scrollbox = scrollboxRef.current;
     const fileRef = fileRefs.current.get(index);
     if (scrollbox && fileRef) {
@@ -1343,10 +1394,18 @@ function App({ parsedFiles }: AppProps) {
       const targetY = fileRef.y - contentY;
       scrollbox.scrollTo(Math.max(0, targetY));
     }
-    
+  };
+
+  const handleFileSelect = (value: string) => {
+    const index = parseInt(value, 10);
+    scrollToFile(index);
     setShowDropdown(false);
   };
 
+  const handleTreeFileSelect = (fileIndex: number) => {
+    scrollToFile(fileIndex);
+  };
+
   const themeOptions = themeNames.map((name) => ({
     title: name,
     value: name,
@@ -1365,6 +1424,15 @@ function App({ parsedFiles }: AppProps) {
   // Render all files content (used in both theme picker preview and main view)
   const renderAllFiles = () => (
     <box style={{ flexDirection: "column" }}>
+      {/* Directory tree at the top */}
+      <box style={{ marginBottom: 2 }}>
+        <DirectoryTreeView
+          files={treeFiles}
+          onFileSelect={handleTreeFileSelect}
+          themeName={activeTheme}
+        />
+      </box>
+
       {parsedFiles.map((file, idx) => {
         const fileName = getFileName(file);
         const filetype = detectFiletype(fileName);
@@ -1612,6 +1680,15 @@ cli
           ParsedFile[] | null
         >(null);
 
+        const watchRenderer = useRenderer();
+
+        // Handle exit keys (Q, Escape) for loading and empty states
+        useKeyboard((key) => {
+          if (key.name === "escape" || key.name === "q") {
+            watchRenderer.destroy();
+          }
+        });
+
         React.useEffect(() => {
           const fetchDiff = async () => {
             try {

package/src/components/directory-tree-view.tsx

@@ -0,0 +1,133 @@
+// DirectoryTreeView - Renders a directory tree with file status colors and change counts.
+// Shows added files in green, modified in orange, deleted in red.
+// Change counts (+n,-n) use green/red for the numbers, brackets are muted.
+// Supports click-to-scroll via onFileSelect callback.
+
+import * as React from "react"
+import { buildDirectoryTree, type TreeFileInfo, type TreeNode } from "../directory-tree.ts"
+import { getResolvedTheme, rgbaToHex } from "../themes.ts"
+
+export interface DirectoryTreeViewProps {
+  /** Files to display in the tree */
+  files: TreeFileInfo[]
+  /** Callback when a file is clicked (receives fileIndex) */
+  onFileSelect?: (fileIndex: number) => void
+  /** Theme name for colors */
+  themeName: string
+}
+
+/**
+ * Get the color for a file based on its status
+ * Uses diff colors from theme: green (added), red (deleted), default text (modified)
+ */
+function getStatusColor(status: "added" | "modified" | "deleted", theme: ReturnType<typeof getResolvedTheme>): string {
+  switch (status) {
+    case "added":
+      return rgbaToHex(theme.diffAdded) // green
+    case "deleted":
+      return rgbaToHex(theme.diffRemoved) // red
+    case "modified":
+      return rgbaToHex(theme.text) // default text color, same as folders
+  }
+}
+
+interface TreeNodeLineProps {
+  node: TreeNode
+  theme: ReturnType<typeof getResolvedTheme>
+  mutedColor: string
+  textColor: string
+  onSelect?: () => void
+}
+
+/**
+ * Render a single tree node line with proper colors
+ */
+const TreeNodeLine: React.FC<TreeNodeLineProps> = ({
+  node,
+  theme,
+  mutedColor,
+  textColor,
+  onSelect,
+}) => {
+  const [isHovered, setIsHovered] = React.useState(false)
+
+  if (node.isFile) {
+    // File node - colorize based on status
+    const pathColor = node.status ? getStatusColor(node.status, theme) : textColor
+    const addColor = rgbaToHex(theme.diffAdded) // green
+    const delColor = rgbaToHex(theme.diffRemoved) // red
+    const hasAdditions = (node.additions ?? 0) > 0
+    const hasDeletions = (node.deletions ?? 0) > 0
+
+    return (
+      <box
+        style={{
+          flexDirection: "row",
+          backgroundColor: isHovered ? rgbaToHex(theme.backgroundPanel) : undefined,
+        }}
+        onMouseMove={() => setIsHovered(true)}
+        onMouseOut={() => setIsHovered(false)}
+        onMouseDown={onSelect}
+      >
+        <text fg={mutedColor}>{node.prefix}{node.connector}</text>
+        <text fg={pathColor}>{node.displayPath}</text>
+        <text fg={mutedColor}> (</text>
+        {hasAdditions && <text fg={addColor}>+{node.additions}</text>}
+        {hasAdditions && hasDeletions && <text fg={mutedColor}>,</text>}
+        {hasDeletions && <text fg={delColor}>-{node.deletions}</text>}
+        <text fg={mutedColor}>)</text>
+      </box>
+    )
+  }
+
+  // Directory node - use muted color for everything
+  return (
+    <box style={{ flexDirection: "row" }}>
+      <text fg={mutedColor}>{node.prefix}{node.connector}</text>
+      <text fg={textColor}>{node.displayPath}</text>
+    </box>
+  )
+}
+
+/**
+ * DirectoryTreeView component
+ * Renders a directory tree with file status colors and click-to-scroll support
+ */
+export function DirectoryTreeView({
+  files,
+  onFileSelect,
+  themeName,
+}: DirectoryTreeViewProps) {
+  const nodes = React.useMemo(() => buildDirectoryTree(files), [files])
+  const resolvedTheme = getResolvedTheme(themeName)
+  const mutedColor = rgbaToHex(resolvedTheme.textMuted)
+  const textColor = rgbaToHex(resolvedTheme.text)
+
+  if (nodes.length === 0) {
+    return null
+  }
+
+  return (
+    <box
+      style={{
+        alignSelf: "center",
+        flexDirection: "column",
+      }}
+    >
+      {nodes.map((node, idx) => (
+        <TreeNodeLine
+          key={idx}
+          node={node}
+          theme={resolvedTheme}
+          mutedColor={mutedColor}
+          textColor={textColor}
+          onSelect={
+            node.isFile && node.fileIndex !== undefined && onFileSelect
+              ? () => onFileSelect(node.fileIndex!)
+              : undefined
+          }
+        />
+      ))}
+    </box>
+  )
+}

package/src/components/index.ts

@@ -2,3 +2,4 @@
 // Exports reusable components used across main diff view and review mode.
 
 export { DiffView, type DiffViewProps } from "./diff-view.tsx"
+export { DirectoryTreeView, type DirectoryTreeViewProps } from "./directory-tree-view.tsx"

package/src/diff-utils.ts

@@ -3,15 +3,27 @@
 // and provides helpers for unified/split view mode selection.
 
 /**
- * Strip submodule header lines from git diff output.
- * git diff --submodule=diff adds "Submodule name hash1..hash2:" lines
- * that the diff parser doesn't understand.
+ * Strip submodule status lines from git diff output.
+ * git diff --submodule=diff adds various status lines that the diff parser doesn't understand:
+ * - "Submodule name hash1..hash2:" (header before submodule diff)
+ * - "Submodule name contains modified content"
+ * - "Submodule name contains untracked content"
+ * - "Submodule name (new commits)"
+ * - "Submodule name (commits not present)"
  */
 export function stripSubmoduleHeaders(diffOutput: string): string {
-  // Match lines like "Submodule errore 1bf6fc8..d746b25:"
   return diffOutput
     .split("\n")
-    .filter((line) => !line.match(/^Submodule \S+ [a-f0-9]+\.\.[a-f0-9]+:$/))
+    .filter((line) => {
+      // Match lines like "Submodule errore 1bf6fc8..d746b25:"
+      if (line.match(/^Submodule \S+ [a-f0-9]+\.\.[a-f0-9]+:?$/)) return false;
+      // Match lines like "Submodule unframer contains modified content"
+      if (line.match(/^Submodule \S+ contains (modified|untracked) content$/))
+        return false;
+      // Match lines like "Submodule name (new commits)" or "(commits not present)"
+      if (line.match(/^Submodule \S+ \(.*\)$/)) return false;
+      return true;
+    })
     .join("\n");
 }
 
@@ -76,6 +88,22 @@ export function buildGitCommand(options: GitCommandOptions): string {
   if (options.base && options.head) {
     return `git diff ${options.base}...${options.head} --no-prefix ${submoduleArg} ${contextArg} ${filterArg}`.trim();
   }
+  // Detect range syntax in single base argument (e.g., "origin/main...HEAD" or "main..feature")
+  if (options.base && !options.head) {
+    // Three-dot syntax: A...B (merge-base to B, like GitHub PRs)
+    const threeDotsMatch = options.base.match(/^(.+)\.\.\.(.+)$/);
+    if (threeDotsMatch) {
+      const [, rangeBase, rangeHead] = threeDotsMatch;
+      return `git diff ${rangeBase}...${rangeHead} --no-prefix ${submoduleArg} ${contextArg} ${filterArg}`.trim();
+    }
+
+    // Two-dot syntax: A..B (commits in B not in A)
+    const twoDotsMatch = options.base.match(/^(.+)\.\.(.+)$/);
+    if (twoDotsMatch) {
+      const [, rangeBase, rangeHead] = twoDotsMatch;
+      return `git diff ${rangeBase}..${rangeHead} --no-prefix ${submoduleArg} ${contextArg} ${filterArg}`.trim();
+    }
+  }
   // Single ref: show that commit's changes
   if (options.base) {
     return `git show ${options.base} --no-prefix ${submoduleArg} ${contextArg} ${filterArg}`.trim();
@@ -83,6 +111,24 @@ export function buildGitCommand(options: GitCommandOptions): string {
   return `git add -N . && git diff --no-prefix ${submoduleArg} ${contextArg} ${filterArg}`.trim();
 }
 
+/**
+ * Get file status from parsed diff file based on /dev/null presence
+ * - added: oldFileName is /dev/null (new file)
+ * - deleted: newFileName is /dev/null (removed file)
+ * - modified: both files exist (changed file)
+ */
+export function getFileStatus(file: {
+  oldFileName?: string;
+  newFileName?: string;
+}): "added" | "modified" | "deleted" {
+  const oldName = file.oldFileName;
+  const newName = file.newFileName;
+
+  if (!oldName || oldName === "/dev/null") return "added";
+  if (!newName || newName === "/dev/null") return "deleted";
+  return "modified";
+}
+
 /**
  * Get filename from parsed diff file, handling /dev/null for new/deleted files
  */

package/src/directory-tree.test.tsx

@@ -0,0 +1,332 @@
+// Tests for directory tree building and rendering
+// Uses opentui test renderer with captureCharFrame() for visual testing
+
+import { afterEach, describe, expect, it } from "bun:test"
+import { testRender } from "@opentui/react/test-utils"
+import { buildDirectoryTree, type TreeFileInfo, type TreeNode } from "./directory-tree.ts"
+import { DirectoryTreeView } from "./components/directory-tree-view.tsx"
+
+/**
+ * Simple component to render tree nodes as text for testing
+ */
+function TreeRenderer({ nodes }: { nodes: TreeNode[] }) {
+  return (
+    <box style={{ flexDirection: "column" }}>
+      {nodes.map((node, idx) => {
+        // Build the line: prefix + connector + path + optional stats
+        const statsStr = node.isFile
+          ? ` (+${node.additions},-${node.deletions})`
+          : ""
+
+        return (
+          <text key={idx}>
+            {node.prefix}
+            {node.connector}
+            {node.displayPath}
+            {statsStr}
+          </text>
+        )
+      })}
+    </box>
+  )
+}
+
+describe("buildDirectoryTree", () => {
+  it("should return empty array for no files", () => {
+    const result = buildDirectoryTree([])
+    expect(result).toEqual([])
+  })
+
+  it("should handle single file at root", () => {
+    const files: TreeFileInfo[] = [
+      { path: "README.md", status: "modified", additions: 5, deletions: 2 },
+    ]
+    const result = buildDirectoryTree(files)
+    expect(result).toHaveLength(1)
+    expect(result[0]!.displayPath).toBe("README.md")
+    expect(result[0]!.isFile).toBe(true)
+    expect(result[0]!.status).toBe("modified")
+  })
+
+  it("should collapse single-child directories", () => {
+    const files: TreeFileInfo[] = [
+      { path: "src/components/Button.tsx", status: "added", additions: 50, deletions: 0 },
+    ]
+    const result = buildDirectoryTree(files)
+    // Should collapse src/components into one directory node
+    expect(result).toHaveLength(2)
+    expect(result[0]!.displayPath).toBe("src/components")
+    expect(result[0]!.isFile).toBe(false)
+    expect(result[1]!.displayPath).toBe("Button.tsx")
+    expect(result[1]!.isFile).toBe(true)
+  })
+})
+
+describe("TreeRenderer visual tests", () => {
+  let testSetup: Awaited<ReturnType<typeof testRender>>
+
+  afterEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  it("should render single file", async () => {
+    const files: TreeFileInfo[] = [
+      { path: "package.json", status: "modified", additions: 1, deletions: 1 },
+    ]
+    const nodes = buildDirectoryTree(files)
+
+    testSetup = await testRender(<TreeRenderer nodes={nodes} />, {
+      width: 50,
+      height: 5,
+    })
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+    expect(frame).toMatchInlineSnapshot(`
+      "└── package.json (+1,-1)                          
+                                                        
+                                                        
+                                                        
+                                                        
+      "
+    `)
+  })
+
+  it("should render multiple root files", async () => {
+    const files: TreeFileInfo[] = [
+      { path: "package.json", status: "modified", additions: 1, deletions: 1 },
+      { path: "README.md", status: "added", additions: 20, deletions: 0 },
+      { path: "tsconfig.json", status: "deleted", additions: 0, deletions: 15 },
+    ]
+    const nodes = buildDirectoryTree(files)
+
+    testSetup = await testRender(<TreeRenderer nodes={nodes} />, {
+      width: 50,
+      height: 7,
+    })
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+    expect(frame).toMatchInlineSnapshot(`
+      "├── package.json (+1,-1)                          
+      ├── README.md (+20,-0)                            
+      └── tsconfig.json (+0,-15)                        
+                                                        
+                                                        
+                                                        
+                                                        
+      "
+    `)
+  })
+
+  it("should render nested directories with proper connectors", async () => {
+    const files: TreeFileInfo[] = [
+      { path: "src/index.ts", status: "modified", additions: 5, deletions: 2 },
+      { path: "src/utils.ts", status: "added", additions: 30, deletions: 0 },
+    ]
+    const nodes = buildDirectoryTree(files)
+
+    testSetup = await testRender(<TreeRenderer nodes={nodes} />, {
+      width: 50,
+      height: 7,
+    })
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+    expect(frame).toMatchInlineSnapshot(`
+      "└── src                                           
+          ├── index.ts (+5,-2)                          
+          └── utils.ts (+30,-0)                         
+                                                        
+                                                        
+                                                        
+                                                        
+      "
+    `)
+  })
+
+  it("should collapse single-child directories", async () => {
+    const files: TreeFileInfo[] = [
+      { path: "src/components/Button.tsx", status: "added", additions: 50, deletions: 0 },
+      { path: "src/components/Input.tsx", status: "added", additions: 40, deletions: 0 },
+    ]
+    const nodes = buildDirectoryTree(files)
+
+    testSetup = await testRender(<TreeRenderer nodes={nodes} />, {
+      width: 50,
+      height: 7,
+    })
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+    expect(frame).toMatchInlineSnapshot(`
+      "└── src/components                                
+          ├── Button.tsx (+50,-0)                       
+          └── Input.tsx (+40,-0)                        
+                                                        
+                                                        
+                                                        
+                                                        
+      "
+    `)
+  })
+
+  it("should render complex nested structure", async () => {
+    const files: TreeFileInfo[] = [
+      { path: "package.json", status: "modified", additions: 2, deletions: 1, fileIndex: 0 },
+      { path: "src/index.ts", status: "modified", additions: 10, deletions: 5, fileIndex: 1 },
+      { path: "src/components/Button.tsx", status: "added", additions: 50, deletions: 0, fileIndex: 2 },
+      { path: "src/components/Input.tsx", status: "modified", additions: 15, deletions: 8, fileIndex: 3 },
+      { path: "src/utils/helpers.ts", status: "deleted", additions: 0, deletions: 30, fileIndex: 4 },
+      { path: "tests/index.test.ts", status: "added", additions: 25, deletions: 0, fileIndex: 5 },
+    ]
+    const nodes = buildDirectoryTree(files)
+
+    testSetup = await testRender(<TreeRenderer nodes={nodes} />, {
+      width: 60,
+      height: 15,
+    })
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+    expect(frame).toMatchInlineSnapshot(`
+      "├── package.json (+2,-1)                                    
+      ├── src                                                     
+      │   ├── index.ts (+10,-5)                                   
+      │   ├── components                                          
+      │   │   ├── Button.tsx (+50,-0)                             
+      │   │   └── Input.tsx (+15,-8)                              
+      │   └── utils                                               
+      │       └── helpers.ts (+0,-30)                             
+      └── tests                                                   
+          └── index.test.ts (+25,-0)                              
+                                                                  
+                                                                  
+                                                                  
+                                                                  
+                                                                  
+      "
+    `)
+  })
+
+  it("should handle deeply nested paths with collapse", async () => {
+    const files: TreeFileInfo[] = [
+      { path: "packages/core/src/lib/utils/helpers.ts", status: "modified", additions: 5, deletions: 3 },
+      { path: "packages/core/src/lib/utils/format.ts", status: "added", additions: 20, deletions: 0 },
+    ]
+    const nodes = buildDirectoryTree(files)
+
+    testSetup = await testRender(<TreeRenderer nodes={nodes} />, {
+      width: 60,
+      height: 7,
+    })
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+    expect(frame).toMatchInlineSnapshot(`
+      "└── packages/core/src/lib/utils                             
+          ├── helpers.ts (+5,-3)                                  
+          └── format.ts (+20,-0)                                  
+                                                                  
+                                                                  
+                                                                  
+                                                                  
+      "
+    `)
+  })
+
+  it("should handle sibling directories at different levels", async () => {
+    const files: TreeFileInfo[] = [
+      { path: "src/api/routes.ts", status: "modified", additions: 10, deletions: 5 },
+      { path: "src/api/handlers.ts", status: "added", additions: 30, deletions: 0 },
+      { path: "src/db/models.ts", status: "modified", additions: 8, deletions: 2 },
+      { path: "lib/utils.ts", status: "added", additions: 15, deletions: 0 },
+    ]
+    const nodes = buildDirectoryTree(files)
+
+    testSetup = await testRender(<TreeRenderer nodes={nodes} />, {
+      width: 60,
+      height: 12,
+    })
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+    expect(frame).toMatchInlineSnapshot(`
+      "├── src                                                     
+      │   ├── api                                                 
+      │   │   ├── routes.ts (+10,-5)                              
+      │   │   └── handlers.ts (+30,-0)                            
+      │   └── db                                                  
+      │       └── models.ts (+8,-2)                               
+      └── lib                                                     
+          └── utils.ts (+15,-0)                                   
+                                                                  
+                                                                  
+                                                                  
+                                                                  
+      "
+    `)
+  })
+})
+
+describe("DirectoryTreeView component", () => {
+  let testSetup: Awaited<ReturnType<typeof testRender>>
+
+  afterEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  it("should render tree without border", async () => {
+    const files: TreeFileInfo[] = [
+      { path: "src/index.ts", status: "modified", additions: 5, deletions: 2, fileIndex: 0 },
+      { path: "src/utils.ts", status: "added", additions: 30, deletions: 0, fileIndex: 1 },
+      { path: "README.md", status: "deleted", additions: 0, deletions: 15, fileIndex: 2 },
+    ]
+
+    testSetup = await testRender(
+      <DirectoryTreeView files={files} themeName="github" />,
+      { width: 60, height: 12 },
+    )
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+    expect(frame).toMatchInlineSnapshot(`
+      "                  ├── src                                   
+                        │   ├── index.ts (+5,-2)                  
+                        │   └── utils.ts (+30)                    
+                        └── README.md (-15)                       
+                                                                  
+                                                                  
+                                                                  
+                                                                  
+                                                                  
+                                                                  
+                                                                  
+                                                                  
+      "
+    `)
+  })
+
+  it("should render empty when no files", async () => {
+    testSetup = await testRender(
+      <DirectoryTreeView files={[]} themeName="github" />,
+      { width: 40, height: 5 },
+    )
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+    // Should render nothing (DirectoryTreeView returns null for empty)
+    expect(frame).toMatchInlineSnapshot(`
+      "                                        
+                                              
+                                              
+                                              
+                                              
+      "
+    `)
+  })
+})

package/src/directory-tree.ts

@@ -0,0 +1,200 @@
+// Directory tree builder for displaying file changes in a tree structure.
+// Builds a collapsible tree from file paths with status colors and change counts.
+// Returns structured nodes that can be rendered by DirectoryTreeView component.
+
+/**
+ * File status based on git diff
+ */
+export type FileStatus = "added" | "modified" | "deleted"
+
+/**
+ * Input file info for tree building
+ */
+export interface TreeFileInfo {
+  path: string
+  status: FileStatus
+  additions: number
+  deletions: number
+  /** Optional index for scroll-to functionality */
+  fileIndex?: number
+}
+
+/**
+ * A single node in the rendered tree output
+ */
+export interface TreeNode {
+  /** Display path (may be collapsed, e.g., "src/components") */
+  displayPath: string
+  /** Whether this is a file (true) or directory (false) */
+  isFile: boolean
+  /** File index for scroll-to (only for files) */
+  fileIndex?: number
+  /** File status (only for files) */
+  status?: FileStatus
+  /** Number of added lines (only for files) */
+  additions?: number
+  /** Number of deleted lines (only for files) */
+  deletions?: number
+  /** Tree connector character: "├── " or "└── " */
+  connector: string
+  /** Prefix string for tree lines, e.g., "│   " */
+  prefix: string
+}
+
+interface InternalTreeNode {
+  path: string
+  title?: string
+  fileIndex?: number
+  status?: FileStatus
+  additions?: number
+  deletions?: number
+  children: InternalTreeNode[]
+}
+
+/**
+ * Build a directory tree from file paths
+ * @param files Array of file info objects
+ * @returns Array of TreeNode objects ready for rendering
+ */
+export function buildDirectoryTree(files: TreeFileInfo[]): TreeNode[] {
+  if (files.length === 0) {
+    return []
+  }
+
+  const tree = buildInternalTree(files)
+  return flattenTree(tree)
+}
+
+/**
+ * Build internal tree structure from file paths
+ */
+function buildInternalTree(files: TreeFileInfo[]): InternalTreeNode[] {
+  const root: InternalTreeNode[] = []
+  const nodeMap = new Map<string, InternalTreeNode>()
+
+  for (const file of files) {
+    const parts = file.path.split("/").filter((part) => part !== "")
+    let currentPath = ""
+    let currentLevel = root
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]!
+      currentPath = currentPath ? `${currentPath}/${part}` : part
+
+      let node = nodeMap.get(currentPath)
+      if (!node) {
+        node = {
+          path: currentPath,
+          children: [],
+        }
+        nodeMap.set(currentPath, node)
+        currentLevel.push(node)
+      }
+
+      // On the final part, assign file info
+      if (i === parts.length - 1) {
+        node.title = part
+        node.fileIndex = file.fileIndex
+        node.status = file.status
+        node.additions = file.additions
+        node.deletions = file.deletions
+      }
+
+      currentLevel = node.children
+    }
+  }
+
+  return root
+}
+
+/**
+ * Get the base name from a path
+ */
+function getName(node: InternalTreeNode): string {
+  const parts = node.path.split("/")
+  return parts[parts.length - 1] || node.path
+}
+
+/**
+ * Collapse directories that only contain a single subdirectory (no files)
+ */
+function collapseNode(node: InternalTreeNode): {
+  path: string
+  collapsed: boolean
+  children: InternalTreeNode[]
+  originalNode: InternalTreeNode
+} {
+  let currentNode = node
+  let collapsedPath = getName(currentNode)
+
+  // Keep collapsing while:
+  // - Current node has exactly one child
+  // - Current node is not a file (no status/title means it's a directory)
+  // - The single child is also a directory (no status)
+  while (
+    currentNode.children.length === 1 &&
+    currentNode.status === undefined &&
+    currentNode.children[0]!.status === undefined &&
+    currentNode.children[0]!.children.length > 0
+  ) {
+    currentNode = currentNode.children[0]!
+    collapsedPath = collapsedPath + "/" + getName(currentNode)
+  }
+
+  return {
+    path: collapsedPath,
+    collapsed: collapsedPath !== getName(node),
+    children: currentNode.children,
+    originalNode: currentNode,
+  }
+}
+
+/**
+ * Flatten the tree into a linear array of TreeNode objects
+ */
+function flattenTree(tree: InternalTreeNode[]): TreeNode[] {
+  const result: TreeNode[] = []
+
+  function processNode(
+    node: InternalTreeNode,
+    prefix: string,
+    isLast: boolean,
+    isRoot: boolean,
+  ): void {
+    const collapsed = collapseNode(node)
+    const displayPath = collapsed.path
+    const connector = isLast ? "\u2514\u2500\u2500 " : "\u251c\u2500\u2500 "
+
+    // Determine if this is a file (has status) or directory
+    const isFile = collapsed.originalNode.status !== undefined
+
+    result.push({
+      displayPath,
+      isFile,
+      fileIndex: collapsed.originalNode.fileIndex,
+      status: collapsed.originalNode.status,
+      additions: collapsed.originalNode.additions,
+      deletions: collapsed.originalNode.deletions,
+      connector,
+      prefix,
+    })
+
+    // Process children
+    if (collapsed.children.length > 0) {
+      const childPrefix = prefix + (isLast ? "    " : "\u2502   ")
+
+      collapsed.children.forEach((child, idx) => {
+        const childIsLast = idx === collapsed.children.length - 1
+        processNode(child, childPrefix, childIsLast, false)
+      })
+    }
+  }
+
+  // Process root level nodes
+  tree.forEach((node, idx) => {
+    const isLast = idx === tree.length - 1
+    processNode(node, "", isLast, true)
+  })
+
+  return result
+}

package/src/review/review-app.tsx

@@ -4,11 +4,12 @@
 
 import * as React from "react"
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react"
-import { MacOSScrollAccel, SyntaxStyle, BoxRenderable, CodeRenderable, TextRenderable } from "@opentui/core"
+import { MacOSScrollAccel, SyntaxStyle, BoxRenderable, CodeRenderable, TextRenderable, ScrollBoxRenderable } from "@opentui/core"
 import type { Token } from "marked"
 import { getResolvedTheme, getSyntaxTheme, defaultThemeName, themeNames, rgbaToHex } from "../themes.ts"
 import { detectFiletype, countChanges, getViewMode } from "../diff-utils.ts"
-import { DiffView } from "../components/diff-view.tsx"
+import { DiffView, DirectoryTreeView } from "../components/index.ts"
+import type { TreeFileInfo } from "../directory-tree.ts"
 import { watchReviewYaml } from "./yaml-watcher.ts"
 import { createSubHunk } from "./hunk-parser.ts"
 import { parseDiagram } from "./diagram-parser.ts"
@@ -52,6 +53,10 @@ export function ReviewApp({
   const [showThemePicker, setShowThemePicker] = React.useState(false)
   const [previewTheme, setPreviewTheme] = React.useState<string | null>(null)
 
+  // Refs for vim-style scroll navigation
+  const scrollboxRef = React.useRef<ScrollBoxRenderable | null>(null)
+  const lastKeyRef = React.useRef<{ key: string; time: number } | null>(null)
+
   // Get theme from store
   const themeName = useAppStore((s) => s.themeName)
   // Use preview theme if hovering, otherwise use selected theme
@@ -75,8 +80,8 @@ export function ReviewApp({
 
   // Keyboard navigation
   useKeyboard((key) => {
-    // Ctrl+D toggles debug console
-    if (key.ctrl && key.name === "d") {
+    // Ctrl+Z toggles debug console
+    if (key.ctrl && key.name === "z") {
       renderer.console.toggle()
       return
     }
@@ -98,6 +103,40 @@ export function ReviewApp({
       setShowThemePicker(true)
       return
     }
+
+    // Vim-style scroll navigation
+    const scrollbox = scrollboxRef.current
+    if (scrollbox) {
+      // G - go to bottom
+      if (key.name === "g" && key.shift) {
+        scrollbox.scrollBy(1, "content")
+        return
+      }
+
+      // gg - go to top (double-tap within 300ms)
+      if (key.name === "g" && !key.shift && !key.ctrl) {
+        const now = Date.now()
+        if (lastKeyRef.current?.key === "g" && now - lastKeyRef.current.time < 300) {
+          scrollbox.scrollTo(0)
+          lastKeyRef.current = null
+        } else {
+          lastKeyRef.current = { key: "g", time: now }
+        }
+        return
+      }
+
+      // Ctrl+D - half page down
+      if (key.ctrl && key.name === "d") {
+        scrollbox.scrollBy(0.5, "viewport")
+        return
+      }
+
+      // Ctrl+U - half page up
+      if (key.ctrl && key.name === "u") {
+        scrollbox.scrollBy(-0.5, "viewport")
+        return
+      }
+    }
   })
 
   const themeOptions = themeNames.map((name) => ({
@@ -175,6 +214,7 @@ export function ReviewApp({
       themeName={activeTheme}
       width={width}
       renderer={renderer}
+      scrollboxRef={scrollboxRef}
     />
   )
 }
@@ -232,6 +272,7 @@ export interface ReviewAppViewProps {
   showFooter?: boolean // defaults to true, set false for web rendering
   renderer?: any // Optional renderer for variable-width markdown
   gap?: number // Gap between markdown descriptions and hunks (default: 2)
+  scrollboxRef?: React.RefObject<ScrollBoxRenderable | null> // For vim-style navigation
 }
 
 /**
@@ -247,12 +288,50 @@ export function ReviewAppView({
   showFooter = true,
   renderer,
   gap = 2,
+  scrollboxRef,
 }: ReviewAppViewProps) {
   const [scrollAcceleration] = React.useState(() => new ScrollAcceleration())
 
   // Create a map of hunk ID to hunk for quick lookup
   const hunkMap = React.useMemo(() => new Map(hunks.map((h) => [h.id, h])), [hunks])
 
+  // Build tree data from all hunks, grouped by filename
+  // Aggregates additions/deletions per file
+  const treeFiles: TreeFileInfo[] = React.useMemo(() => {
+    const fileMap = new Map<string, { additions: number; deletions: number; firstIndex: number }>()
+    
+    for (let i = 0; i < hunks.length; i++) {
+      const hunk = hunks[i]!
+      const existing = fileMap.get(hunk.filename)
+      const { additions, deletions } = countChanges([{ lines: hunk.lines }])
+      
+      if (existing) {
+        existing.additions += additions
+        existing.deletions += deletions
+      } else {
+        fileMap.set(hunk.filename, { additions, deletions, firstIndex: i })
+      }
+    }
+    
+    // Determine status for each file (simplified: all are modified in review context)
+    // In practice, we could look at the hunk headers for more accurate status
+    const result: TreeFileInfo[] = []
+    for (const [filename, data] of fileMap) {
+      let status: "added" | "modified" | "deleted" = "modified"
+      if (data.deletions === 0 && data.additions > 0) status = "added"
+      else if (data.additions === 0 && data.deletions > 0) status = "deleted"
+      
+      result.push({
+        path: filename,
+        status,
+        additions: data.additions,
+        deletions: data.deletions,
+        fileIndex: data.firstIndex,
+      })
+    }
+    return result
+  }, [hunks])
+
   const resolvedTheme = getResolvedTheme(themeName)
   const bgColor = rgbaToHex(resolvedTheme.background)
 
@@ -325,6 +404,7 @@ export function ReviewAppView({
     >
       {/* Scrollable content - shows ALL groups */}
       <scrollbox
+        ref={scrollboxRef}
         scrollAcceleration={scrollAcceleration}
         style={{
           flexGrow: 1,
@@ -347,6 +427,16 @@ export function ReviewAppView({
         focused
       >
         <box style={{ flexDirection: "column" }}>
+          {/* Directory tree at the top - updates as hunks arrive */}
+          {treeFiles.length > 0 && (
+            <box style={{ marginBottom: gap }}>
+              <DirectoryTreeView
+                files={treeFiles}
+                themeName={themeName}
+              />
+            </box>
+          )}
+
           {groups.map((group, groupIdx) => {
             // Resolve hunks from group - supports both hunkIds and hunkId with lineRange
             const groupHunks = resolveGroupHunks(group, hunkMap)

package/src/themes.ts

@@ -3,6 +3,7 @@
 // and provides both UI colors and Tree-sitter compatible syntax styles.
 
 import { parseColor, RGBA } from "@opentui/core";
+import { fileURLToPath } from "url";
 
 // Only import the default theme statically for fast startup
 // Other themes are loaded on-demand when selected
@@ -25,6 +26,11 @@ interface ThemeJson {
 export interface ResolvedTheme {
   // UI colors
   primary: RGBA;
+  // Status colors
+  success: RGBA;
+  error: RGBA;
+  warning: RGBA;
+  info: RGBA;
   // Syntax colors
   syntaxComment: RGBA;
   syntaxKeyword: RGBA;
@@ -39,7 +45,10 @@ export interface ResolvedTheme {
   text: RGBA;
   textMuted: RGBA;
   conceal: RGBA;
-  // Diff colors
+  // Diff colors (foreground)
+  diffAdded: RGBA;
+  diffRemoved: RGBA;
+  // Diff colors (background)
   diffAddedBg: RGBA;
   diffRemovedBg: RGBA;
   diffContextBg: RGBA;
@@ -133,8 +142,9 @@ function loadTheme(name: string): ThemeJson {
   try {
     // Use dynamic import with synchronous pattern for JSON
     // This works because JSON imports are resolved at bundle time by Bun
-    const themePath = new URL(`./themes/${fileName}`, import.meta.url).pathname;
+    const themeUrl = new URL(`./themes/${fileName}`, import.meta.url);
     // Read file synchronously using Node fs (works in Bun)
+    const themePath = fileURLToPath(themeUrl);
     const fs = require("fs");
     const content = fs.readFileSync(themePath, "utf-8");
     const themeJson = JSON.parse(content) as ThemeJson;
@@ -177,8 +187,20 @@ function resolveTheme(
 
   const text = resolveColor(t.text ?? fallbackText);
 
+  // Fallback colors for status (green, red, yellow, orange)
+  const fallbackGreen: ColorValue = "#3fb950";
+  const fallbackRed: ColorValue = "#f85149";
+  const fallbackYellow: ColorValue = "#e3b341";
+  const fallbackOrange: ColorValue = "#d29922";
+
   return {
     primary: resolveColor(t.primary ?? t.syntaxFunction ?? fallbackGray),
+    // Status colors
+    success: resolveColor(t.success ?? fallbackGreen),
+    error: resolveColor(t.error ?? fallbackRed),
+    warning: resolveColor(t.warning ?? fallbackYellow),
+    info: resolveColor(t.info ?? fallbackOrange),
+    // Syntax colors
     syntaxComment: resolveColor(t.syntaxComment ?? fallbackGray),
     syntaxKeyword: resolveColor(t.syntaxKeyword ?? fallbackGray),
     syntaxFunction: resolveColor(t.syntaxFunction ?? fallbackGray),
@@ -191,6 +213,10 @@ function resolveTheme(
     text,
     textMuted: resolveColor(t.textMuted ?? fallbackGray),
     conceal: resolveColor(t.conceal ?? t.textMuted ?? fallbackGray),
+    // Diff foreground colors
+    diffAdded: resolveColor(t.diffAdded ?? t.success ?? fallbackGreen),
+    diffRemoved: resolveColor(t.diffRemoved ?? t.error ?? fallbackRed),
+    // Diff background colors
     diffAddedBg: resolveColor(t.diffAddedBg ?? "#1e3a1e"),
     diffRemovedBg: resolveColor(t.diffRemovedBg ?? "#3a1e1e"),
     diffContextBg: resolveColor(t.diffContextBg ?? fallbackBg),