claudeck 1.1.0 → 1.2.0

package/README.md

@@ -44,6 +44,7 @@ User data lives in `~/.claudeck/` (config, database, plugins) — safe for NPX u
 
 - **Zero-framework** — Vanilla JS, 6 npm dependencies, no build step
 - **Full agent orchestration** — Chains, DAGs, orchestrator, and monitoring dashboard
+- **Persistent memory** — Cross-session project knowledge with FTS5 search and AI optimization
 - **Cost visibility** — Per-session tracking, daily charts, token breakdowns
 - **Works everywhere** — PWA, mobile responsive, Telegram AFK approval
 - **Extensible** — Full-stack plugin system with auto-discovery
@@ -58,6 +59,8 @@ User data lives in `~/.claudeck/` (config, database, plugins) — safe for NPX u
 - **Parallel mode** — 2x2 grid of 4 independent conversations
 - Background sessions that keep running when you switch away
 - Session search, pinning, auto-generated titles
+- **Session branching** — fork any conversation at an assistant message to explore alternatives
+- **Message recall** — press `↑` on empty input to cycle through previous messages, or click the history button to browse and re-use
 - Voice input via Web Speech API (Chrome/Safari)
 
 ### Autonomous Agents
@@ -77,7 +80,8 @@ User data lives in `~/.claudeck/` (config, database, plugins) — safe for NPX u
 ### Code & Files
 
 - **File Explorer** — Lazy tree, syntax-highlighted preview, drag-to-chat
-- **Git Panel** — Branch switching, staging, commit, log
+- **Git Panel** — Branch switching, staging, commit, log, inline diff viewer
+- **Git Worktrees** — Run any chat/agent task in an isolated worktree; merge, diff, or discard results
 - **Repos Manager** — Organize repos in nested groups with GitHub links
 - Code diff viewer with LCS-based line highlighting
 
@@ -87,6 +91,34 @@ User data lives in `~/.claudeck/` (config, database, plugins) — safe for NPX u
 - Input/output token breakdown, streaming token counter
 - Error pattern analysis (9 categories), tool usage stats
 
+### Persistent Memory
+
+- Cross-session project knowledge that survives restarts
+- Auto-capture from assistant responses using pattern-based heuristic extraction
+- `/remember` command for manual memory creation
+- FTS5 full-text search with relevance scoring and time-decay
+- AI-powered optimization (consolidation via Claude Haiku)
+- Memory panel in right sidebar with search, filtering, and inline editing
+
+### Notifications
+
+- **Notification Bell** — Persistent notification history with unread badge in the header
+- Background session events (completed, errored, input needed) logged automatically
+- Agent completion/error notifications with cost and duration metrics
+- Full history modal with type/status filters, bulk actions, and pagination
+- 4 read strategies: explicit click, mark all, auto-read on view, click-through to session
+- Real-time cross-tab sync via WebSocket broadcasts
+
+### Skills Marketplace
+
+- **SkillsMP Integration** — Browse and install agent skills from the [SkillsMP](https://skillsmp.com/) registry
+- Keyword search and AI semantic search with mode toggle
+- Install skills globally (`~/.claude/skills/`) or per-project (`.claude/skills/`)
+- Enable/disable skills via toggle (renames `SKILL.md` ↔ `SKILL.md.disabled`)
+- Installed skills auto-register as `/` slash commands
+- "Skill used" system messages in chat for both user-invoked and model-invoked skills
+- Token-gated — enter your free SkillsMP API key to activate
+
 ### Integrations
 
 - **MCP Manager** — Add/edit/remove MCP servers (global + per-project)
@@ -127,8 +159,11 @@ browser ──── WebSocket ──── server.js ──── Claude Code S
                           server/routes/         ~/.claudeck/
                           server/agent-loop.js     ├── config/     (JSON configs)
                           server/orchestrator.js   ├── plugins/    (user plugins)
-                          server/dag-executor.js   ├── data.db     (SQLite)
-                          plugins/                 └── .env        (VAPID keys)
+                          server/dag-executor.js   ├── data.db     (SQLite + memories)
+                          server/notification-logger.js
+                          server/utils/git-worktree.js
+                          server/memory-optimizer.js └── .env      (VAPID keys)
+                          plugins/
 ```
 
 | Layer | Technology |
@@ -147,7 +182,8 @@ browser ──── WebSocket ──── server.js ──── Claude Code S
 ```
 /clear /new /parallel /export /theme /shortcuts       App
 /costs /analytics                                      Dashboards
-/files /git /repos /events /mcp /tips                  Panels
+/files /git /repos /events /mcp /tips /skills           Panels
+/remember                                              Memory
 /review-pr /onboard-repo /migration-plan /code-health  Workflows
 /agent-pr-reviewer /agent-bug-hunter /agent-test-writer Agents
 /orchestrate /monitor /chain-* /dag-*                   Multi-Agent
@@ -165,8 +201,9 @@ browser ──── WebSocket ──── server.js ──── Claude Code S
 | `Cmd+N` | New session |
 | `Cmd+B` | Toggle right panel |
 | `Cmd+/` | Show all shortcuts |
-| `Cmd+Shift+E/G/R/V/T` | Files / Git / Repos / Events / Tips |
+| `Cmd+Shift+E/G/R/V/T` | Files / Git / Repos / Events / Tips  |
 | `Cmd+1`-`4` | Focus parallel pane |
+| `↑` / `↓` | Recall previous/next message (empty input) |
 
 ---
 
@@ -185,7 +222,8 @@ All user data lives in `~/.claudeck/` (override with `CLAUDECK_HOME`):
 │   ├── agent-dags.json       Dependency graphs
 │   ├── repos.json            Repository groups
 │   ├── bot-prompt.json       Assistant bot prompt
-│   └── telegram-config.json  Telegram config
+│   ├── telegram-config.json  Telegram config
+│   └── skillsmp-config.json  Skills Marketplace config
 ├── plugins/                  User-installed plugins
 ├── data.db                   SQLite database
 └── .env                      VAPID keys, port config
@@ -199,7 +237,7 @@ See [CONFIGURATION.md](docs/CONFIGURATION.md) for the full guide.
 
 ## Plugins
 
-Claudeck includes 6 built-in plugins and supports user plugins via `~/.claudeck/plugins/`:
+Claudeck includes 7 built-in plugins and supports user plugins via `~/.claudeck/plugins/`:
 
 | Plugin | Description |
 |--------|-------------|
@@ -228,6 +266,7 @@ npx skills add https://github.com/hamedafarag/claudeck-skills
 |----------|-------------|
 | [DOCUMENTATION.md](docs/DOCUMENTATION.md) | Full feature docs, API reference, database schema |
 | [CONFIGURATION.md](docs/CONFIGURATION.md) | User data directory, config files, plugin system |
+| [AGENT-ARCHITECTURE.md](docs/AGENT-ARCHITECTURE.md) | How agents, chains, DAGs, and orchestrator work |
 | [CROSS-PLATFORM-AUDIT.md](docs/CROSS-PLATFORM-AUDIT.md) | Windows/Linux compatibility |
 | [COMPETITIVE-ANALYSIS.md](docs/COMPETITIVE-ANALYSIS.md) | Feature comparison with similar tools |
 

package/config/skillsmp-config.json

@@ -0,0 +1,5 @@
+{
+  "apiKey": "",
+  "defaultScope": "project",
+  "searchMode": "keyword"
+}

package/db.js

@@ -81,6 +81,9 @@ try { db.exec(`ALTER TABLE sessions ADD COLUMN summary TEXT DEFAULT NULL`); } ca
 try { db.exec(`ALTER TABLE todos ADD COLUMN archived INTEGER DEFAULT 0`); } catch { /* exists */ }
 // Todo priority (0=none, 1=low, 2=medium, 3=high)
 try { db.exec(`ALTER TABLE todos ADD COLUMN priority INTEGER DEFAULT 0`); } catch { /* exists */ }
+// Session branching / conversation forking
+try { db.exec(`ALTER TABLE sessions ADD COLUMN parent_session_id TEXT DEFAULT NULL`); } catch { /* exists */ }
+try { db.exec(`ALTER TABLE sessions ADD COLUMN fork_message_id INTEGER DEFAULT NULL`); } catch { /* exists */ }
 
 // Agent context (shared memory between agents in a chain/orchestration run)
 db.exec(`
@@ -167,6 +170,41 @@ db.exec(`
   END;
 `);
 
+// ── Notifications table ──────────────────────────────────
+db.exec(`
+  CREATE TABLE IF NOT EXISTS notifications (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    type TEXT NOT NULL,
+    title TEXT NOT NULL,
+    body TEXT,
+    metadata TEXT,
+    source_session_id TEXT,
+    source_agent_id TEXT,
+    read_at INTEGER DEFAULT NULL,
+    created_at INTEGER DEFAULT (unixepoch())
+  );
+  CREATE INDEX IF NOT EXISTS idx_notif_created ON notifications(created_at DESC);
+  CREATE INDEX IF NOT EXISTS idx_notif_unread ON notifications(read_at) WHERE read_at IS NULL;
+`);
+
+// ── Worktrees table ──────────────────────────────────────
+db.exec(`
+  CREATE TABLE IF NOT EXISTS worktrees (
+    id TEXT PRIMARY KEY,
+    session_id TEXT,
+    project_path TEXT NOT NULL,
+    worktree_path TEXT NOT NULL,
+    branch_name TEXT NOT NULL,
+    base_branch TEXT NOT NULL,
+    status TEXT DEFAULT 'active',
+    user_prompt TEXT,
+    created_at INTEGER DEFAULT (unixepoch()),
+    completed_at INTEGER DEFAULT NULL
+  );
+  CREATE INDEX IF NOT EXISTS idx_wt_project ON worktrees(project_path);
+  CREATE INDEX IF NOT EXISTS idx_wt_status ON worktrees(status);
+`);
+
 // Backfill content_hash for existing rows
 const unhashed = db.prepare(`SELECT id, project_path, content FROM memories WHERE content_hash IS NULL`).all();
 if (unhashed.length > 0) {
@@ -208,6 +246,7 @@ db.exec(`
   CREATE INDEX IF NOT EXISTS idx_costs_created_at ON costs(created_at);
   CREATE INDEX IF NOT EXISTS idx_sessions_project_path ON sessions(project_path);
   CREATE INDEX IF NOT EXISTS idx_sessions_pinned_last_used ON sessions(pinned DESC, last_used_at DESC);
+  CREATE INDEX IF NOT EXISTS idx_sessions_parent ON sessions(parent_session_id) WHERE parent_session_id IS NOT NULL;
 `);
 
 // Deduplicated mode CASE subquery — used in 4 session listing queries
@@ -289,6 +328,22 @@ const stmts = {
     `SELECT s.*, ${MODE_CASE}
      FROM sessions s WHERE (s.title LIKE ? OR s.project_name LIKE ?) ORDER BY s.pinned DESC, s.last_used_at DESC LIMIT ?`
   ),
+  // Session branching
+  getMessagesByIdRange: db.prepare(
+    `SELECT role, content, created_at FROM messages WHERE session_id = ? AND id <= ? AND chat_id IS NULL ORDER BY id ASC`
+  ),
+  getLastMessageId: db.prepare(
+    `SELECT MAX(id) as maxId FROM messages WHERE session_id = ? AND chat_id IS NULL`
+  ),
+  getBranches: db.prepare(
+    `SELECT s.*, ${MODE_CASE} FROM sessions s WHERE s.parent_session_id = ? ORDER BY s.created_at DESC`
+  ),
+  getBranchCount: db.prepare(
+    `SELECT COUNT(*) as count FROM sessions WHERE parent_session_id = ?`
+  ),
+  orphanChildren: db.prepare(
+    `UPDATE sessions SET parent_session_id = NULL WHERE parent_session_id = ?`
+  ),
   getSessionCosts: db.prepare(
     `SELECT s.id, s.title, s.project_name, s.last_used_at,
             COALESCE(SUM(c.cost_usd), 0) AS total_cost,
@@ -460,12 +515,74 @@ export function searchSessions(query, limit = 20, projectPath) {
 }
 
 export const deleteSession = db.transaction((id) => {
+  // Orphan child forks before deleting parent
+  stmts.orphanChildren.run(id);
   db.prepare("DELETE FROM claude_sessions WHERE session_id = ?").run(id);
   db.prepare("DELETE FROM costs WHERE session_id = ?").run(id);
   db.prepare("DELETE FROM messages WHERE session_id = ?").run(id);
   db.prepare("DELETE FROM sessions WHERE id = ?").run(id);
 });
 
+// ── Session Branching / Forking ─────────────────────────
+export const forkSession = db.transaction((parentSessionId, forkMessageId) => {
+  const parent = stmts.getSession.get(parentSessionId);
+  if (!parent) throw new Error("Session not found");
+
+  if (!forkMessageId) {
+    const last = stmts.getLastMessageId.get(parentSessionId);
+    forkMessageId = last?.maxId;
+    if (!forkMessageId) throw new Error("No messages to fork");
+  }
+
+  const newId = createHash("sha256")
+    .update(parentSessionId + Date.now() + Math.random())
+    .digest("hex")
+    .slice(0, 36);
+  const title = `Fork of: ${parent.title || parent.project_name || "Untitled"}`;
+
+  db.prepare(
+    `INSERT INTO sessions (id, project_name, project_path, title, parent_session_id, fork_message_id)
+     VALUES (?, ?, ?, ?, ?, ?)`
+  ).run(newId, parent.project_name, parent.project_path, title, parentSessionId, forkMessageId);
+
+  const messages = stmts.getMessagesByIdRange.all(parentSessionId, forkMessageId);
+  const insertMsg = db.prepare(
+    "INSERT INTO messages (session_id, role, content, created_at) VALUES (?, ?, ?, ?)"
+  );
+  for (const msg of messages) {
+    insertMsg.run(newId, msg.role, msg.content, msg.created_at);
+  }
+
+  return stmts.getSession.get(newId);
+});
+
+export function getSessionBranches(sessionId) {
+  return stmts.getBranches.all(sessionId);
+}
+
+export function getSessionBranchCount(sessionId) {
+  return stmts.getBranchCount.get(sessionId).count;
+}
+
+export function getSessionLineage(sessionId) {
+  const ancestors = [];
+  let current = stmts.getSession.get(sessionId);
+  while (current && current.parent_session_id) {
+    const parent = stmts.getSession.get(current.parent_session_id);
+    if (!parent) break;
+    ancestors.unshift(parent);
+    current = parent;
+  }
+  // Get siblings (other forks of the same parent)
+  const session = stmts.getSession.get(sessionId);
+  let siblings = [];
+  if (session?.parent_session_id) {
+    siblings = stmts.getBranches.all(session.parent_session_id)
+      .filter(s => s.id !== sessionId);
+  }
+  return { ancestors, siblings };
+}
+
 export function getSessionCosts(projectPath) {
   if (projectPath) {
     return stmts.getSessionCosts.all(projectPath);
@@ -1263,6 +1380,137 @@ export function getAgentRunsDaily() {
   return runStmts.dailyRuns.all();
 }
 
+// ── Notifications ────────────────────────────────────────
+const notifStmts = {
+  insert: db.prepare(
+    `INSERT INTO notifications (type, title, body, metadata, source_session_id, source_agent_id)
+     VALUES (?, ?, ?, ?, ?, ?)`
+  ),
+  history: db.prepare(
+    `SELECT * FROM notifications ORDER BY created_at DESC LIMIT ? OFFSET ?`
+  ),
+  historyUnread: db.prepare(
+    `SELECT * FROM notifications WHERE read_at IS NULL ORDER BY created_at DESC LIMIT ? OFFSET ?`
+  ),
+  historyByType: db.prepare(
+    `SELECT * FROM notifications WHERE type = ? ORDER BY created_at DESC LIMIT ? OFFSET ?`
+  ),
+  historyByTypeUnread: db.prepare(
+    `SELECT * FROM notifications WHERE type = ? AND read_at IS NULL ORDER BY created_at DESC LIMIT ? OFFSET ?`
+  ),
+  unreadCount: db.prepare(
+    `SELECT COUNT(*) as count FROM notifications WHERE read_at IS NULL`
+  ),
+  markRead: db.prepare(
+    `UPDATE notifications SET read_at = unixepoch() WHERE id = ? AND read_at IS NULL`
+  ),
+  markAllRead: db.prepare(
+    `UPDATE notifications SET read_at = unixepoch() WHERE read_at IS NULL`
+  ),
+  markReadBefore: db.prepare(
+    `UPDATE notifications SET read_at = unixepoch() WHERE read_at IS NULL AND created_at < ?`
+  ),
+  purgeOld: db.prepare(
+    `DELETE FROM notifications WHERE created_at < unixepoch() - (? * 86400)`
+  ),
+  markStaleRead: db.prepare(
+    `UPDATE notifications SET read_at = unixepoch() WHERE read_at IS NULL AND created_at < unixepoch() - (7 * 86400)`
+  ),
+};
+
+export function createNotification(type, title, body = null, metadata = null, sourceSessionId = null, sourceAgentId = null) {
+  const result = notifStmts.insert.run(type, title, body, metadata, sourceSessionId, sourceAgentId);
+  return {
+    id: result.lastInsertRowid,
+    type, title, body, metadata,
+    source_session_id: sourceSessionId,
+    source_agent_id: sourceAgentId,
+    read_at: null,
+    created_at: Math.floor(Date.now() / 1000),
+  };
+}
+
+export function getNotificationHistory(limit = 20, offset = 0, unreadOnly = false, type = null) {
+  if (type && unreadOnly) return notifStmts.historyByTypeUnread.all(type, limit, offset);
+  if (type) return notifStmts.historyByType.all(type, limit, offset);
+  if (unreadOnly) return notifStmts.historyUnread.all(limit, offset);
+  return notifStmts.history.all(limit, offset);
+}
+
+export function getUnreadNotificationCount() {
+  return notifStmts.unreadCount.get().count;
+}
+
+export function markNotificationsRead(ids) {
+  const tx = db.transaction((idList) => {
+    for (const id of idList) notifStmts.markRead.run(id);
+  });
+  tx(ids);
+}
+
+export function markAllNotificationsRead() {
+  notifStmts.markAllRead.run();
+}
+
+export function markNotificationsReadBefore(timestamp) {
+  notifStmts.markReadBefore.run(timestamp);
+}
+
+export function purgeOldNotifications(days = 90) {
+  notifStmts.markStaleRead.run();
+  notifStmts.purgeOld.run(days);
+}
+
+// ── Worktrees ─────────────────────────────────────────────
+const wtStmts = {
+  create: db.prepare(
+    `INSERT INTO worktrees (id, session_id, project_path, worktree_path, branch_name, base_branch, status, user_prompt)
+     VALUES (?, ?, ?, ?, ?, ?, 'active', ?)`
+  ),
+  get: db.prepare(`SELECT * FROM worktrees WHERE id = ?`),
+  listByProject: db.prepare(
+    `SELECT * FROM worktrees WHERE project_path = ? ORDER BY created_at DESC`
+  ),
+  listActive: db.prepare(
+    `SELECT * FROM worktrees WHERE status IN ('active', 'completed') ORDER BY created_at DESC`
+  ),
+  updateStatus: db.prepare(
+    `UPDATE worktrees SET status = ?, completed_at = unixepoch() WHERE id = ?`
+  ),
+  updateSession: db.prepare(
+    `UPDATE worktrees SET session_id = ? WHERE id = ?`
+  ),
+  delete: db.prepare(`DELETE FROM worktrees WHERE id = ?`),
+};
+
+export function createWorktreeRecord(id, sessionId, projectPath, worktreePath, branchName, baseBranch, userPrompt) {
+  wtStmts.create.run(id, sessionId, projectPath, worktreePath, branchName, baseBranch, userPrompt);
+}
+
+export function getWorktreeRecord(id) {
+  return wtStmts.get.get(id);
+}
+
+export function listWorktreesByProject(projectPath) {
+  return wtStmts.listByProject.all(projectPath);
+}
+
+export function listActiveWorktrees() {
+  return wtStmts.listActive.all();
+}
+
+export function updateWorktreeStatus(id, status) {
+  wtStmts.updateStatus.run(status, id);
+}
+
+export function updateWorktreeSession(id, sessionId) {
+  wtStmts.updateSession.run(sessionId, id);
+}
+
+export function deleteWorktreeRecord(id) {
+  wtStmts.delete.run(id);
+}
+
 // ── Memories (persistent cross-session context) ──────────
 function hashContent(projectPath, content) {
   return createHash("sha256").update(`${projectPath}:${content}`).digest("hex");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeck",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "description": "A browser-based UI for Claude Code — chat, run workflows, manage MCP servers, track costs, and orchestrate autonomous agents from a local web interface. Installable as a PWA.",
   "main": "server.js",
@@ -42,7 +42,10 @@
     "node": ">=18.0.0"
   },
   "scripts": {
-    "start": "node server.js"
+    "start": "node server.js",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@anthropic-ai/claude-code": "^1.0.128",
@@ -51,5 +54,11 @@
     "express": "^4",
     "web-push": "^3.6.7",
     "ws": "^8"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^4.1.0",
+    "happy-dom": "^20.8.4",
+    "supertest": "^7.2.2",
+    "vitest": "^4.1.0"
   }
 }

package/public/css/panels/git-panel.css

@@ -55,6 +55,9 @@
 }
 
 .git-status-group-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   font-size: 10px;
   font-weight: 600;
   color: var(--text-dim);
@@ -63,6 +66,23 @@
   padding: 6px 10px 2px;
 }
 
+.git-bulk-action {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 10px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  padding: 0 4px;
+  border-radius: var(--radius);
+  transition: color 0.15s;
+}
+
+.git-bulk-action:hover {
+  color: var(--accent);
+}
+
 .git-status-file {
   display: flex;
   align-items: center;
@@ -97,6 +117,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--text);
+  cursor: pointer;
+}
+
+.git-status-name:hover {
+  color: var(--accent);
+  text-decoration: underline;
 }
 
 .git-status-action {
@@ -219,3 +245,197 @@
 .git-empty svg {
   opacity: 0.4;
 }
+
+/* Discard button */
+.git-discard-btn:hover {
+  color: var(--error) !important;
+}
+
+/* Branch info bar */
+.git-branch-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  font-size: 11px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary);
+}
+
+.git-branch-icon {
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.git-branch-info strong {
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.git-branch-tracking {
+  margin-left: auto;
+  font-size: 10px;
+  display: flex;
+  gap: 6px;
+}
+
+.git-branch-ahead {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.git-branch-behind {
+  color: var(--warning);
+  font-weight: 600;
+}
+
+.git-branch-synced {
+  color: var(--text-dim);
+  font-style: italic;
+}
+
+/* Clickable commit hashes */
+.git-log-hash {
+  cursor: pointer;
+}
+
+.git-log-hash:hover {
+  text-decoration: underline;
+}
+
+/* Branch switch error */
+.git-branch-error {
+  font-size: 10px;
+  color: var(--error);
+  padding: 4px 8px;
+  line-height: 1.3;
+}
+
+/* Diff modal — large size */
+.git-diff-modal {
+  max-width: 90vw;
+  width: 1000px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Scrollable diff body */
+.git-diff-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.git-diff-body::-webkit-scrollbar { width: 6px; }
+.git-diff-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+
+.git-diff-empty {
+  text-align: center;
+  color: var(--text-dim);
+  padding: 32px;
+  font-size: 13px;
+}
+
+/* Per-file section */
+.git-diff-file {
+  margin-bottom: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.git-diff-file-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-tertiary);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+}
+
+.git-diff-file-header:hover {
+  background: var(--bg-secondary);
+}
+
+.git-diff-chevron {
+  flex-shrink: 0;
+  color: var(--text-dim);
+  transition: transform 0.15s;
+}
+
+.git-diff-file.collapsed .git-diff-chevron {
+  transform: rotate(-90deg);
+}
+
+.git-diff-file.collapsed .git-diff-file-content {
+  display: none;
+}
+
+.git-diff-file-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.git-diff-file-stats {
+  display: flex;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.diff-stat-add { color: #3fb950; font-weight: 600; }
+.diff-stat-del { color: #f85149; font-weight: 600; }
+
+/* Diff content block (inside per-file section) */
+.git-diff-file-content {
+  max-height: none;
+  border: none;
+  border-radius: 0;
+  border-top: 1px solid var(--border);
+  margin: 0;
+}
+
+/* Colored diff in modal */
+.git-diff-content {
+  max-height: 75vh;
+  overflow: auto;
+  padding: 12px 16px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  white-space: pre;
+  line-height: 1.5;
+  color: var(--text);
+  tab-size: 4;
+}
+
+.diff-line-added {
+  color: #3fb950;
+}
+
+.diff-line-removed {
+  color: #f85149;
+}
+
+.diff-line-hunk {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.diff-line-meta {
+  color: var(--text-dim);
+  font-weight: 600;
+}