handling files when stages and dirty at once

.helder/config.default.json

@@ -11,7 +11,8 @@
     "confirmDiscard": true,
     "confirmStage": false,
     "confirmUnstage": false,
-    "defaultDiffMode": "diff"
+    "defaultDiffMode": "diff",
+    "refreshInterval": 10000
   },
   "files": {
     "exclude": [],

CLAUDE.md

@@ -51,6 +51,7 @@ A dark-only (no light mode, no theme toggle) Electron desktop code workbench for
 - **The four diff view modes (Original / Updated / Diff / Split) all derive from one original-text + updated-text pair per changed file.** The prototype computes this with an LCS line diff (`buildDiff()` in `design/src/data.js`); production should prefer real `git diff` output but keep the same four derived views and the same color language everywhere: **red = removed/changed-from, green = added/changed-to**, syntax highlighting on in all modes.
 - **The agent pane is just a terminal running the `claude` CLI** (`ai.command`, default `claude`, auto-launched when `ai.autoLaunch` is on). The bottom pane is a normal shell PTY. The prototype's simulated agent session (`agentSeed`, `runAgent`, `bootAgent` in `terminals.jsx`) exists only to show the visual style — keep the styling, drop the fakery.
 - **Chrome budget:** title bar + tab strip + panel headers + status bar combined should stay ≈10% of vertical height. Keep it minimal.
+- **`console.*` is not a log — use the logger.** Helder runs one process per project window, and every window past the first is spawned by `spawnInstance()` with `stdio: 'ignore'`; launched from Finder there's no terminal either. Console output is therefore discarded in real use. Log through `src/main/logger.ts` (main) or `src/renderer/src/log.ts` → `rlog` (renderer, forwarded over IPC to the same file). Never add a bare `catch {}` on an IPC/FS/git path: log the cause, then handle it.
 
 ## Confirmed decisions (the "Open assumptions" in DESIGN.md are resolved — do not re-ask)
 
@@ -74,6 +75,17 @@ Settings are project-scoped, living in a `.helder/` folder in the opened project
 - Effective value = `config.json` if present, else `config.default.json`, merged key by key.
 - `.helder/theme.css` — custom CSS theme applied over the built-in dark theme; **code font and font size live here**, not in the config files.
 
+## Logging & crash diagnostics
+
+One file, `~/Library/Logs/Helder/helder.log` (rotates at 2 MB, keeps 3), written **synchronously** so a line survives the process dying right after it. Reachable from **Help → Open Log** and from the crash panel's *Open Log* button. Main and renderer both write to it, so a failure reads as one chronological story.
+
+- `src/main/logger.ts` — the sink. Deliberately imports NO electron so it stays unit-testable (`test/logger.test.ts`); `initLogger({dir})` is handed the path by the caller. Every process logs its pid, since sibling project windows share the file.
+- `src/main/diagnostics.ts` — `initDiagnostics()` runs **before** `app.whenReady()` (crashReporter must start early; `app.setName` must precede `app.getPath('logs')` or logs land in `~/Library/Logs/Electron`). Hooks `uncaughtException`, `unhandledRejection`, `render-process-gone` (the blank-window crash), `child-process-gone`, `preload-error`, `unresponsive`, and renderer console warnings/errors. Native minidumps (node-pty can segfault) go to `app.getPath('crashDumps')`, local only — nothing is uploaded.
+- `src/main/index.ts` — the `handle()` / `on()` wrappers around `ipcMain`: every IPC failure is logged with channel + args, then **rethrown** so renderer behaviour is unchanged. Calls over 1 s log a `slow` warning. Note both wrappers must call `ipcMain.handle`/`ipcMain.on` — a rename that rewrites those lines makes the wrappers infinitely recursive and silently registers **no handlers at all** (every IPC then fails with "No handler registered").
+- `src/renderer/src/log.ts` — `rlog` + `installErrorLogging()` (window `error`, `unhandledrejection`). Called from `main.tsx` before first render. `ErrorBoundary` logs the component stack, which exists nowhere else.
+
+Keep warnings honest: an expected event must not log as WARN (see `killing` in `pty-service.ts` — deliberate kills log INFO). A log full of false alarms is a log nobody reads.
+
 ## Design tokens
 
 Canonical source is the `:root` block in `design_handoff_helder_workbench/design/styles.css`. Surfaces are cool charcoal (`--bg-0` editor `#16171a` → `--bg-3` headers/tabs `#23262b`); single cool-blue accent `--accent #4d8dff`; git status `--add #5cbd6b` / `--del #e0696a` / `--mod #d8a85c` / `--ren #5aa6d6`. File-type icons are 15×15 monogram chips (no brand logos). Recreate UI icons as a small inline-SVG set (or Lucide), keeping the monogram chips for file types. Respect `prefers-reduced-motion`; keep motion subtle.
@@ -98,4 +110,6 @@ Canonical source is the `:root` block in `design_handoff_helder_workbench/design
 - `npm run lint` — ESLint (flat config in `eslint.config.js`). `.prettierrc.json` defines formatting (not auto-applied).
 - `npm run pack` — unpacked app into `dist/` (electron-builder, unsigned). `npm run dist` / `dist:mac` for distributables. App icon comes from `build/icon.png`. Native `node-pty` + `rg` are asar-unpacked so they load when packaged.
 
+**The mac build must be ad-hoc signed — `build/adhoc-sign.cjs` (the `afterPack` hook) does this.** `mac.identity: null` skips signing, which leaves the .app carrying only the linker signature Apple put on the prebuilt Electron binary: it reports `Identifier=Electron`, seals no resources, and does not bind our Info.plist. macOS reads that as a tampered bundle and kills it with *"Malware Blocked and Moved to Trash"*. A real ad-hoc signature over the whole bundle (with `build/entitlements.mac.plist` for JIT + library validation) fixes it. Still not notarized, so a copy opened from the DMG carries a quarantine flag — clear it with `xattr -dr com.apple.quarantine /Applications/Helder.app` or ship a Developer ID build.
+
 Keep all five green (typecheck · lint · test · build, and pack when touching main/packaging) when changing code.

build/adhoc-sign.cjs

@@ -0,0 +1,44 @@
+// Ad-hoc sign the macOS bundle after electron-builder packs it.
+//
+// Why this exists: `mac.identity: null` tells electron-builder to skip signing
+// altogether. The .app then keeps only the linker signature that Apple put on
+// the prebuilt Electron binary. That signature says `Identifier=Electron`,
+// seals no resources, and does not bind our Info.plist. macOS reads a bundle
+// like that as tampered-with and shows "Malware Blocked and Moved to Trash".
+//
+// A real ad-hoc signature over the whole bundle fixes it. The app stays
+// unsigned in the Developer ID sense (no notarization, so a *downloaded* copy
+// still needs the quarantine flag cleared), but it is no longer flagged as
+// malware and runs fine locally.
+//
+// Replace this with a Developer ID identity + notarization when the app ships.
+const { execFileSync } = require('node:child_process')
+const path = require('node:path')
+
+exports.default = async function adhocSign(context) {
+  if (context.electronPlatformName !== 'darwin') return
+
+  const appName = context.packager.appInfo.productFilename
+  const appPath = path.join(context.appOutDir, `${appName}.app`)
+  const entitlements = path.join(__dirname, 'entitlements.mac.plist')
+
+  console.log(`  • ad-hoc signing  ${appPath}`)
+  execFileSync(
+    'codesign',
+    [
+      '--force',
+      '--deep',
+      '--sign',
+      '-',
+      '--options',
+      'runtime',
+      '--entitlements',
+      entitlements,
+      appPath
+    ],
+    { stdio: 'inherit' }
+  )
+
+  // Fail the build rather than ship a bundle macOS will quarantine again.
+  execFileSync('codesign', ['--verify', '--deep', '--strict', appPath], { stdio: 'inherit' })
+}

build/entitlements.mac.plist

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+  <!-- V8 compiles JavaScript at runtime. -->
+  <key>com.apple.security.cs.allow-jit</key>
+  <true/>
+  <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+  <true/>
+  <!-- Electron sets dyld vars when it spawns its own helpers. -->
+  <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+  <true/>
+  <!-- node-pty is a native addon signed with a different (ad-hoc) identity. -->
+  <key>com.apple.security.cs.disable-library-validation</key>
+  <true/>
+</dict>
+</plist>

electron-builder.yml

@@ -14,6 +14,9 @@ asarUnpack:
   - '**/node_modules/node-pty/**'
   - '**/node_modules/@vscode/ripgrep/**'
   - '**/node_modules/@vscode/ripgrep-*/**'
+# Ad-hoc signs the .app on macOS. Without it the bundle keeps only Electron's
+# linker signature, seals no resources, and macOS blocks it as malware.
+afterPack: build/adhoc-sign.cjs
 mac:
   category: public.app-category.developer-tools
   target:
@@ -22,8 +25,20 @@ mac:
   # Local/unsigned build: ad-hoc signed by electron-builder, no notarization.
   identity: null
   artifactName: ${productName}-${version}-${arch}.${ext}
+  files:
+    # Keep the cross-build leftovers (see win:) out of the mac package.
+    - '!**/node_modules/@vscode/ripgrep-win32-*/**'
 win:
   target: nsis
+  # Cross-built from macOS with `-c.npmRebuild=false`: node-pty can't be
+  # cross-compiled, but it ships prebuilds/win32-* and its loader falls back
+  # to those when build/Release is absent. The win32 rg binary is provided by
+  # manually extracting @vscode/ripgrep-win32-x64 into node_modules (npm
+  # refuses to install it on darwin).
+  files:
+    - '!**/node_modules/node-pty/build/**'
+    - '!**/node_modules/@vscode/ripgrep-darwin-*/**'
+    - '!**/node_modules/@vscode/ripgrep-linux-*/**'
 linux:
   target: AppImage
   category: Development

eslint.config.js

@@ -29,6 +29,12 @@ export default tseslint.config(
     files: ['test/**/*.{ts,tsx}'],
     languageOptions: { globals: { ...globals.node, ...globals.browser } },
   },
+  {
+    // electron-builder hooks: plain CommonJS, run by node outside the app.
+    files: ['build/**/*.cjs'],
+    languageOptions: { globals: { ...globals.node }, sourceType: 'commonjs' },
+    rules: { '@typescript-eslint/no-require-imports': 'off' },
+  },
   {
     rules: {
       '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],

src/main/config.ts

@@ -15,7 +15,7 @@ export type DiffMode = 'original' | 'updated' | 'diff'
 export interface HelderConfig {
   ai: { command: string; autoLaunch: boolean }
   editor: { autoSave: boolean; tabSize: number }
-  git: { confirmDiscard: boolean; confirmStage: boolean; confirmUnstage: boolean; defaultDiffMode: DiffMode }
+  git: { confirmDiscard: boolean; confirmStage: boolean; confirmUnstage: boolean; defaultDiffMode: DiffMode; refreshInterval: number }
   files: { exclude: string[]; followGitignore: boolean }
   terminal: { shell: string | null }
   session: { restoreOnLaunch: boolean }
@@ -24,7 +24,7 @@ export interface HelderConfig {
 export const DEFAULTS: HelderConfig = {
   ai: { command: 'claude', autoLaunch: true },
   editor: { autoSave: false, tabSize: 4 },
-  git: { confirmDiscard: true, confirmStage: false, confirmUnstage: false, defaultDiffMode: 'diff' },
+  git: { confirmDiscard: true, confirmStage: false, confirmUnstage: false, defaultDiffMode: 'diff', refreshInterval: 10000 },
   files: { exclude: [], followGitignore: false },
   terminal: { shell: null },
   session: { restoreOnLaunch: true },

src/main/diagnostics.ts

@@ -0,0 +1,188 @@
+import { app, crashReporter, dialog, shell, BrowserWindow, type WebContents } from 'electron'
+import { formatErr, getLogDir, getLogPath, initLogger, log, logger } from './logger'
+
+/**
+ * Everything that turns a silent death into a log line. Wires the process-,
+ * app- and window-level failure hooks Electron gives us, none of which were
+ * connected before — which is why crashes left no trace.
+ *
+ * The hooks, and the crash each one actually catches:
+ *   uncaughtException / unhandledRejection → a throw in OUR main-process code
+ *   render-process-gone                    → the renderer died (OOM, segfault):
+ *                                            the classic "window went blank//white"
+ *   child-process-gone                     → GPU / utility process died
+ *   preload-error                          → preload threw: `window.helder` is
+ *                                            undefined and the app silently falls
+ *                                            back to MOCK DATA (see CLAUDE.md)
+ *   unresponsive                           → main thread wedged (the beachball)
+ *   crashReporter minidumps                → NATIVE crashes (node-pty is native,
+ *                                            and a segfault there takes the whole
+ *                                            process down with no JS hook at all)
+ */
+
+let fatalDialogOpen = false
+
+/** Call FIRST, before app.whenReady() — crashReporter must start early to catch
+ * native crashes, and the log file should exist before anything can fail. */
+export function initDiagnostics(isDev: boolean): void {
+  // app.getPath('logs') is ~/Library/Logs/<name> on macOS, so the name must be
+  // set before we ask for the path or the folder is called "Electron".
+  app.setName('Helder')
+
+  initLogger({ dir: app.getPath('logs'), mirror: isDev })
+
+  // Native minidumps for crashes no JS handler can see. Local only — nothing is
+  // uploaded anywhere (there is no server, and this is a personal tool).
+  try {
+    crashReporter.start({ productName: 'Helder', companyName: 'Helder', uploadToServer: false })
+  } catch (e) {
+    logger.warn('crash', 'crashReporter failed to start', { err: formatErr(e) })
+  }
+
+  logger.info('session', 'starting', {
+    version: app.getVersion(),
+    electron: process.versions.electron,
+    chrome: process.versions.chrome,
+    node: process.versions.node,
+    platform: `${process.platform} ${process.arch}`,
+    packaged: app.isPackaged,
+    dev: isDev,
+    crashDumps: app.getPath('crashDumps'),
+    argv: process.argv.slice(1),
+    project: process.env.HELDER_PROJECT ?? null,
+  })
+
+  installProcessHooks()
+  installAppHooks()
+}
+
+function installProcessHooks(): void {
+  process.on('uncaughtException', (err, origin) => {
+    logger.error('fatal', `uncaughtException (${origin})`, err)
+    showFatal(err)
+  })
+
+  process.on('unhandledRejection', (reason) => {
+    // Not fatal in itself, but it's how a forgotten `await` on a failing IPC
+    // handler shows up — and the stack here is the only place the cause exists.
+    logger.error('fatal', 'unhandledRejection', reason)
+  })
+
+  process.on('warning', (w) => {
+    // Surfaces the "MaxListenersExceeded" / deprecation warnings that precede
+    // a leak-driven crash.
+    logger.warn('node', w.name, { message: w.message, stack: w.stack })
+  })
+
+  app.on('before-quit', () => logger.info('session', 'quitting'))
+}
+
+function installAppHooks(): void {
+  // THE renderer-crash hook. `reason` is the useful bit: 'crashed', 'oom',
+  // 'killed', 'launch-failed'.
+  app.on('render-process-gone', (_e, contents, details) => {
+    logger.error('renderer', `render process gone: ${details.reason}`, undefined, {
+      exitCode: details.exitCode,
+      reason: details.reason,
+      url: safeUrl(contents),
+    })
+    if (details.reason !== 'clean-exit') {
+      showFatal(new Error(`The window crashed (${details.reason}, exit ${details.exitCode}). See the log for details.`))
+    }
+  })
+
+  app.on('child-process-gone', (_e, details) => {
+    logger.error('child', `${details.type} process gone: ${details.reason}`, undefined, {
+      exitCode: details.exitCode,
+      serviceName: details.serviceName,
+      name: details.name,
+    })
+  })
+
+  // A preload failure is silent-by-design in Electron and the single nastiest
+  // failure mode this app has: no window.helder → the renderer quietly serves
+  // mock data and "terminal not available", as if nothing were wrong.
+  app.on('web-contents-created', (_e, contents) => {
+    contents.on('preload-error', (_ev, preloadPath, error) => {
+      logger.error('preload', 'preload script threw — window.helder will be undefined (mock-data fallback)', error, { preloadPath })
+    })
+    contents.on('console-message', (...a: unknown[]) => {
+      // Electron ≥36 passes a single event object; older versions pass
+      // (event, level, message, line, sourceId). Support both so a version bump
+      // doesn't quietly stop capturing renderer console output.
+      const d = normaliseConsoleMessage(a)
+      if (!d || d.level < 2) return // warnings + errors only; skip log/info noise
+      log(d.level >= 3 ? 'error' : 'warn', 'console', d.message, { source: d.source, line: d.line })
+    })
+  })
+}
+
+/** Electron changed the console-message signature in v36; accept both shapes. */
+export function normaliseConsoleMessage(args: unknown[]): { level: number; message: string; source: string; line: number } | null {
+  const first = args[0] as Record<string, unknown> | undefined
+  if (first && typeof first === 'object' && 'message' in first && 'level' in first) {
+    const lvl = first.level
+    const asNum = typeof lvl === 'string' ? { debug: 0, info: 1, verbose: 1, warning: 2, error: 3 }[lvl] ?? 1 : Number(lvl)
+    return {
+      level: asNum,
+      message: String(first.message),
+      source: String(first.sourceId ?? ''),
+      line: Number(first.lineNumber ?? 0),
+    }
+  }
+  if (args.length >= 3 && typeof args[1] === 'number') {
+    return { level: args[1] as number, message: String(args[2]), source: String(args[4] ?? ''), line: Number(args[3] ?? 0) }
+  }
+  return null
+}
+
+function safeUrl(contents: WebContents | null): string {
+  try { return contents?.getURL() ?? '' } catch { return '' }
+}
+
+/** Watch for the beachball: log it (with a stack-free note) rather than let the
+ * user guess whether the app is hung or just slow. */
+export function watchWindow(win: BrowserWindow): void {
+  win.on('unresponsive', () => logger.warn('window', 'became unresponsive (main thread blocked)'))
+  win.on('responsive', () => logger.info('window', 'responsive again'))
+  win.webContents.on('did-fail-load', (_e, code, desc, url) => {
+    logger.error('window', 'did-fail-load', undefined, { code, desc, url })
+  })
+}
+
+/**
+ * Tell the user something died, and put the log one click away — a crash the
+ * user can't report is a crash we can't fix. Guarded so a crash loop doesn't
+ * stack a hundred dialogs.
+ */
+function showFatal(err: unknown): void {
+  if (fatalDialogOpen) return
+  fatalDialogOpen = true
+  const { message } = formatErr(err)
+  const logPath = getLogPath()
+  Promise.resolve(dialog.showMessageBox({
+    type: 'error',
+    buttons: logPath ? ['Open Log', 'Ignore'] : ['Ignore'],
+    defaultId: 0,
+    cancelId: logPath ? 1 : 0,
+    message: 'Helder hit an error',
+    detail: `${message}\n\n${logPath ? `Logged to ${logPath}` : ''}`,
+  })).then(({ response }) => {
+    if (logPath && response === 0) openLog()
+  }).catch(() => { /* dialog can fail pre-ready; the log line is what matters */ })
+    .finally(() => { fatalDialogOpen = false })
+}
+
+/** Open the log in the default text editor. */
+export function openLog(): void {
+  const p = getLogPath()
+  if (p) shell.openPath(p).catch(() => {})
+}
+
+/** Reveal the log folder (all rotated files + siblings) in Finder. */
+export function revealLog(): void {
+  const p = getLogPath()
+  if (p) shell.showItemInFolder(p)
+}
+
+export { getLogDir, getLogPath }

src/main/fs-service.ts

@@ -202,6 +202,32 @@ export async function readProjectFile(root: string, rel: string): Promise<string
   return buf.toString('utf8')
 }
 
+const IMAGE_MIME: Record<string, string> = {
+  png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', jfif: 'image/jpeg',
+  gif: 'image/gif', webp: 'image/webp', svg: 'image/svg+xml', bmp: 'image/bmp',
+  ico: 'image/x-icon', avif: 'image/avif', apng: 'image/apng',
+}
+const MAX_IMAGE_BYTES = 25_000_000
+
+/** Read an image file as a `data:` URL for the viewer's <img> — the renderer
+ * can't touch the filesystem, and a data URL sidesteps file:// path/escaping
+ * concerns entirely. Returns '' for a non-image extension, a path escaping the
+ * root, or an oversized/unreadable file. */
+export async function readImageDataUrl(root: string, rel: string): Promise<string> {
+  const ext = rel.split('.').pop()?.toLowerCase() ?? ''
+  const mime = IMAGE_MIME[ext]
+  if (!mime) return ''
+  const target = join(root, rel)
+  if (relative(root, target).startsWith('..')) return ''
+  try {
+    const buf = await readFile(target)
+    if (buf.length > MAX_IMAGE_BYTES) return ''
+    return `data:${mime};base64,${buf.toString('base64')}`
+  } catch {
+    return ''
+  }
+}
+
 /** Write a text file (relative path). Used by the editable buffer's save. */
 export async function writeProjectFile(root: string, rel: string, content: string): Promise<void> {
   await writeFile(join(root, rel), content, 'utf8')

src/main/git-service.ts

@@ -76,19 +76,41 @@ async function git(root: string, args: string[]): Promise<string> {
   return stdout
 }
 
-/** Map a porcelain code pair to our display letter + staged flag. */
+/** Map one porcelain status code to our display letter. */
-export function classify(index: string, working: string): { letter: GitStatusLetter; staged: boolean } {
+function letterFor(code: string): GitStatusLetter {
-  const staged = index !== ' ' && index !== '?'
-  const code = staged ? index : working
-  let letter: GitStatusLetter
   switch (code) {
-    case 'A': case 'C': case '?': letter = 'A'; break
+    case 'A': case 'C': case '?': return 'A'
-    case 'D': letter = 'D'; break
+    case 'D': return 'D'
-    case 'R': letter = 'R'; break
+    case 'R': return 'R'
-    case 'U': letter = 'M'; break
+    case 'U': return 'M'
-    case 'M': default: letter = 'M'; break
+    default: return 'M'
   }
-  return { letter, staged }
+}
+
+/** A merge conflict. Git reports both sides, but neither half can be staged on
+ * its own, so a conflict stays one row. */
+function isConflict(index: string, working: string): boolean {
+  return index === 'U' || working === 'U'
+    || (index === 'A' && working === 'A')
+    || (index === 'D' && working === 'D')
+}
+
+export interface GitRowSpec { letter: GitStatusLetter; staged: boolean }
+
+/**
+ * Split a porcelain code pair into the rows the git panel shows.
+ *
+ * A file can be staged AND changed again on disk. Git reports that as "MM".
+ * That is two rows: one staged (HEAD vs index) and one unstaged (index vs
+ * disk). Folding it into a single row hid the newer edit completely.
+ */
+export function classify(index: string, working: string): GitRowSpec[] {
+  if (isConflict(index, working)) return [{ letter: 'M', staged: true }]
+  const rows: GitRowSpec[] = []
+  if (index !== ' ' && index !== '?') rows.push({ letter: letterFor(index), staged: true })
+  if (working !== ' ') rows.push({ letter: letterFor(working), staged: false })
+  // Should not happen (git does not report a clean file), but never drop an entry.
+  return rows.length ? rows : [{ letter: letterFor(index), staged: true }]
 }
 
 /** Parse a `## ...` porcelain branch header into a display branch name. */
@@ -135,6 +157,15 @@ async function headText(root: string, path: string): Promise<string> {
   }
 }
 
+/** The staged copy of a file: the blob sitting in the index. */
+async function indexText(root: string, path: string): Promise<string> {
+  try {
+    return await git(root, ['show', `:${path}`])
+  } catch {
+    return ''
+  }
+}
+
 async function diskText(root: string, path: string): Promise<string> {
   try {
     const buf = await readFile(join(root, path))
@@ -214,14 +245,31 @@ async function doLoad(root: string): Promise<GitLoad | null> {
   // re-reads ALL of them, which is the dominant cost of a reload. Run them with
   // bounded concurrency instead so the spawns overlap (cap keeps us well under
   // macOS's low default FD limit). Order is preserved by index.
-  const changes = await mapLimit(files, 12, async (f) => {
+  const changes = (await mapLimit(files, 12, async (f) => {
-    const { letter, staged } = classify(f.index, f.working)
+    const rows = classify(f.index, f.working)
-    const isNew = f.index === '?' || f.index === 'A'
+    const stagedRow = rows.find((r) => r.staged)
-    const isDeleted = letter === 'D'
+    const workRow = rows.find((r) => !r.staged)
-    const original = isNew ? '' : await headText(root, f.path)
+    // The index blob is only needed when a file sits in BOTH groups. With one
-    const updated = isDeleted ? '' : await diskText(root, f.path)
+    // row the index copy equals HEAD (unstaged only) or the disk copy (staged
-    return { path: f.path, status: letter, staged, original, updated } as GitChange
+    // only), so the common case still costs no extra `git show`.
-  })
+    const both = !!stagedRow && !!workRow
+    const idx = both ? await indexText(root, f.path) : ''
+    const out: GitChange[] = []
+    if (stagedRow) {
+      // Staged row: HEAD -> index.
+      const original = stagedRow.letter === 'A' ? '' : await headText(root, f.path)
+      const updated = stagedRow.letter === 'D' ? '' : both ? idx : await diskText(root, f.path)
+      out.push({ path: f.path, status: stagedRow.letter, staged: true, original, updated })
+    }
+    if (workRow) {
+      // Unstaged row: index -> disk. An untracked file has no index copy.
+      const untracked = f.index === '?'
+      const original = untracked ? '' : both ? idx : await headText(root, f.path)
+      const updated = workRow.letter === 'D' ? '' : await diskText(root, f.path)
+      out.push({ path: f.path, status: workRow.letter, staged: false, original, updated })
+    }
+    return out
+  })).flat()
 
   return { branch, changes }
 }

src/main/index.ts

@@ -4,15 +4,22 @@ import { spawn } from 'node:child_process'
 import { app, dialog, shell, BrowserWindow, ipcMain, Menu } from 'electron'
 import { watch, type FSWatcher } from 'chokidar'
 import { addRecentProject, getName, getRecentProjects, getRoot, openDialog, setRoot } from './project'
-import { createProjectDir, createProjectFile, deleteProjectFile, readAll, readDirChildren, readProjectFile, readTree, writeProjectFile } from './fs-service'
+import { createProjectDir, createProjectFile, deleteProjectFile, readAll, readDirChildren, readImageDataUrl, readProjectFile, readTree, writeProjectFile } from './fs-service'
 import { commit, discard, load, push, stage, unstage } from './git-service'
 import { createPty, killAllPtys, killPty, ptyAvailable, resizePty, writePty } from './pty-service'
 import { getConfig, getRecent, getThemeCss, resolveConfig, setRecent } from './config'
 import { listFiles, searchContent } from './search-service'
+import { initDiagnostics, openLog, revealLog, watchWindow } from './diagnostics'
+import { getLogPath, log, logger, type LogLevel } from './logger'
 
 const isDev = !!process.env['ELECTRON_RENDERER_URL']
 const isMac = process.platform === 'darwin'
 
+// Before anything else can fail: start the crash reporter, open the log file and
+// hook uncaughtException / render-process-gone / preload-error. Everything below
+// (including a throw at module load) is logged from here on.
+initDiagnostics(isDev)
+
 const WATCH_IGNORE = new Set([
   'node_modules', '.git', 'out', 'dist', 'build', '.next', '.nuxt',
   '.cache', 'coverage', 'vendor', '.idea', '.vscode', '.helder', '.turbo',
@@ -114,6 +121,7 @@ async function openFolderFlow(win: BrowserWindow | null): Promise<boolean> {
   startWatcher()
   startConfigWatcher()
   startGitWatcher()
+  syncWindowTitle()
   return true
 }
 
@@ -144,16 +152,20 @@ function buildAppMenu(): Menu {
     {
       label: 'View',
       submenu: [
-        // ⌘R refreshes git status + the file explorer instead of reloading the
+        // ⌘R refreshes the three left columns instead of reloading the window:
-        // window. We send the same "project changed" ping the disk watchers use,
+        // git status (Col A), the file explorer (Col B), and the open file in the
-        // which makes the renderer re-read git + the file tree. Reload / Force
+        // viewer re-read from disk (Col C). We send a dedicated `view:refresh`
-        // Reload are intentionally omitted so ⌘R never blows away app state.
+        // ping — distinct from the disk watchers' `project:changed` — so only an
+        // explicit ⌘R force-reloads the viewer from disk; background watcher pings
+        // keep refreshing git + tree without blowing away the editor buffer.
+        // Reload / Force Reload are intentionally omitted so ⌘R never blows away
+        // app state.
         {
           label: 'Refresh',
           accelerator: 'CmdOrCtrl+R',
           click: (_m, win) => {
             const bw = win instanceof BrowserWindow ? win : BrowserWindow.getFocusedWindow()
-            bw?.webContents.send('project:changed')
+            bw?.webContents.send('view:refresh')
           },
         },
         { type: 'separator' },
@@ -167,10 +179,28 @@ function buildAppMenu(): Menu {
       ],
     },
     { role: 'windowMenu' },
+    {
+      role: 'help',
+      submenu: [
+        // A crash you can't read is a crash you can't fix — keep the log one
+        // click away rather than buried in ~/Library/Logs.
+        { label: 'Open Log', click: () => openLog() },
+        { label: 'Reveal Log in Finder', click: () => revealLog() },
+      ],
+    },
   ]
   return Menu.buildFromTemplate(template)
 }
 
+/** macOS Dock right-click menu. Sits above the system items (Show All Windows,
+ * Hide, Quit) that macOS appends itself. It mirrors File → New Window so a new
+ * project window is one right-click away, even with no window focused. */
+function buildDockMenu(): Menu {
+  return Menu.buildFromTemplate([
+    { label: 'New Window', click: () => spawnInstance() },
+  ])
+}
+
 function startWatcher(): void {
   if (watcher) { watcher.close(); watcher = null }
   const root = getRoot()
@@ -186,54 +216,108 @@ function startWatcher(): void {
   watcher.on('add', ping).on('change', ping).on('unlink', ping).on('addDir', ping).on('unlinkDir', ping)
 }
 
+/**
+ * ipcMain.handle + logging. Every IPC failure used to die in a renderer-side
+ * `catch {}` that showed a generic toast ("Create failed") and dropped the
+ * actual cause, so the log records the channel, its args and the error, then
+ * RETHROWS so the renderer keeps behaving exactly as before.
+ *
+ * Slow calls get a line too: an FS/git handler blocking for seconds is the
+ * symptom that precedes a beachball, and it's invisible otherwise.
+ */
+const SLOW_MS = 1000
+
+function handle(channel: string, fn: (e: Electron.IpcMainInvokeEvent, ...args: never[]) => unknown): void {
+  ipcMain.handle(channel, async (e, ...args) => {
+    const started = Date.now()
+    try {
+      const out = await fn(e, ...(args as never[]))
+      const ms = Date.now() - started
+      if (ms >= SLOW_MS) logger.warn('ipc', `${channel} slow`, { ms, args: previewArgs(args) })
+      return out
+    } catch (err) {
+      logger.error('ipc', `${channel} failed`, err, { args: previewArgs(args), ms: Date.now() - started })
+      throw err
+    }
+  })
+}
+
+/** Log-safe args: file CONTENT (fs:write) would swamp the log, so cap length. */
+function previewArgs(args: unknown[]): unknown[] {
+  return args.map((a) => (typeof a === 'string' && a.length > 120 ? `${a.slice(0, 120)}… (${a.length} chars)` : a))
+}
+
+/** Same, for the fire-and-forget `ipcMain.on` channels. */
+function on(channel: string, fn: (e: Electron.IpcMainEvent, ...args: never[]) => void): void {
+  ipcMain.on(channel, (e, ...args) => {
+    try {
+      fn(e, ...(args as never[]))
+    } catch (err) {
+      logger.error('ipc', `${channel} failed`, err, { args: previewArgs(args) })
+    }
+  })
+}
+
 function registerIpc(): void {
-  ipcMain.handle('project:current', () => ({ root: getRoot(), name: getName() }))
+  handle('project:current', () => ({ root: getRoot(), name: getName() }))
-  ipcMain.handle('project:open', async (e) => {
+  handle('project:open', async (e) => {
     await openFolderFlow(BrowserWindow.fromWebContents(e.sender))
     return { root: getRoot(), name: getName() }
   })
-  ipcMain.handle('projects:recent', () => getRecentProjects())
+  handle('projects:recent', () => getRecentProjects())
-  ipcMain.handle('project:openPath', async (_e, path: string) => {
+  handle('project:openPath', async (_e, path: string) => {
     setRoot(path)
     const r = getRoot()
     if (r) { await resolveConfig(r); startWatcher(); startConfigWatcher(); startGitWatcher() }
+    syncWindowTitle()
     broadcast('project:changed')
     return { root: getRoot(), name: getName() }
   })
 
-  ipcMain.handle('fs:tree', () => { const r = getRoot(); return r ? readTree(r) : null })
+  handle('fs:tree', () => { const r = getRoot(); return r ? readTree(r) : null })
-  ipcMain.handle('fs:files', () => { const r = getRoot(); return r ? readAll(r) : {} })
+  handle('fs:files', () => { const r = getRoot(); return r ? readAll(r) : {} })
-  ipcMain.handle('fs:readDir', (_e, rel: string) => { const r = getRoot(); return r ? readDirChildren(r, rel) : [] })
+  handle('fs:readDir', (_e, rel: string) => { const r = getRoot(); return r ? readDirChildren(r, rel) : [] })
-  ipcMain.handle('fs:read', (_e, rel: string) => { const r = getRoot(); return r ? readProjectFile(r, rel) : '' })
+  handle('fs:read', (_e, rel: string) => { const r = getRoot(); return r ? readProjectFile(r, rel) : '' })
-  ipcMain.handle('fs:write', (_e, rel: string, content: string) => { const r = getRoot(); if (r) return writeProjectFile(r, rel, content) })
+  handle('fs:imageDataUrl', (_e, rel: string) => { const r = getRoot(); return r ? readImageDataUrl(r, rel) : '' })
-  ipcMain.handle('fs:delete', (_e, rel: string) => { const r = getRoot(); if (r) return deleteProjectFile(r, rel) })
+  handle('fs:write', (_e, rel: string, content: string) => { const r = getRoot(); if (r) return writeProjectFile(r, rel, content) })
-  ipcMain.handle('fs:create', (_e, rel: string) => { const r = getRoot(); if (r) return createProjectFile(r, rel) })
+  handle('fs:delete', (_e, rel: string) => { const r = getRoot(); if (r) return deleteProjectFile(r, rel) })
-  ipcMain.handle('fs:mkdir', (_e, rel: string) => { const r = getRoot(); if (r) return createProjectDir(r, rel) })
+  handle('fs:create', (_e, rel: string) => { const r = getRoot(); if (r) return createProjectFile(r, rel) })
-  ipcMain.handle('shell:reveal', (_e, rel: string) => { const r = getRoot(); if (r) shell.showItemInFolder(join(r, rel)) })
+  handle('fs:mkdir', (_e, rel: string) => { const r = getRoot(); if (r) return createProjectDir(r, rel) })
+  handle('shell:reveal', (_e, rel: string) => { const r = getRoot(); if (r) shell.showItemInFolder(join(r, rel)) })
 
-  ipcMain.handle('git:load', () => { const r = getRoot(); return r ? load(r) : null })
+  handle('git:load', () => { const r = getRoot(); return r ? load(r) : null })
-  ipcMain.handle('git:stage', (_e, paths: string[]) => { const r = getRoot(); if (r) return stage(r, paths) })
+  handle('git:stage', (_e, paths: string[]) => { const r = getRoot(); if (r) return stage(r, paths) })
-  ipcMain.handle('git:unstage', (_e, paths: string[]) => { const r = getRoot(); if (r) return unstage(r, paths) })
+  handle('git:unstage', (_e, paths: string[]) => { const r = getRoot(); if (r) return unstage(r, paths) })
-  ipcMain.handle('git:commit', (_e, message: string) => { const r = getRoot(); if (r) return commit(r, message) })
+  handle('git:commit', (_e, message: string) => { const r = getRoot(); if (r) return commit(r, message) })
-  ipcMain.handle('git:push', () => { const r = getRoot(); return r ? push(r) : { ok: false, message: 'No project open' } })
+  handle('git:push', () => { const r = getRoot(); return r ? push(r) : { ok: false, message: 'No project open' } })
-  ipcMain.handle('git:discard', (_e, paths: string[]) => { const r = getRoot(); if (r) return discard(r, paths) })
+  handle('git:discard', (_e, paths: string[]) => { const r = getRoot(); if (r) return discard(r, paths) })
 
-  ipcMain.handle('pty:available', () => ptyAvailable())
+  handle('pty:available', () => ptyAvailable())
-  ipcMain.handle('pty:create', (e, kind: 'agent' | 'shell', cols: number, rows: number) => createPty(e.sender, kind, cols, rows))
+  handle('pty:create', (e, kind: 'agent' | 'shell', cols: number, rows: number) => createPty(e.sender, kind, cols, rows))
-  ipcMain.on('pty:write', (_e, id: number, data: string) => writePty(id, data))
+  on('pty:write', (_e, id: number, data: string) => writePty(id, data))
-  ipcMain.on('pty:resize', (_e, id: number, cols: number, rows: number) => resizePty(id, cols, rows))
+  on('pty:resize', (_e, id: number, cols: number, rows: number) => resizePty(id, cols, rows))
-  ipcMain.on('pty:kill', (_e, id: number) => killPty(id))
+  on('pty:kill', (_e, id: number) => killPty(id))
 
-  ipcMain.handle('config:get', () => getConfig())
+  handle('config:get', () => getConfig())
-  ipcMain.handle('config:theme', () => getThemeCss())
+  handle('config:theme', () => getThemeCss())
 
-  ipcMain.handle('recent:get', () => { const r = getRoot(); return r ? getRecent(r) : [] })
+  handle('recent:get', () => { const r = getRoot(); return r ? getRecent(r) : [] })
-  ipcMain.handle('recent:set', (_e, list: string[]) => { const r = getRoot(); if (r) return setRecent(r, list) })
+  handle('recent:set', (_e, list: string[]) => { const r = getRoot(); if (r) return setRecent(r, list) })
 
-  ipcMain.handle('search:content', (_e, query: string) => { const r = getRoot(); return r ? searchContent(r, query) : [] })
+  handle('search:content', (_e, query: string) => { const r = getRoot(); return r ? searchContent(r, query) : [] })
-  ipcMain.handle('search:files', () => { const r = getRoot(); return r ? listFiles(r) : [] })
+  handle('search:files', () => { const r = getRoot(); return r ? listFiles(r) : [] })
 
-  ipcMain.handle('dialog:unsavedClose', async (e, path: string) => {
+  // The renderer's window into the same log file (see renderer/src/log.ts): its
+  // uncaught errors, promise rejections and ErrorBoundary catches land here, so
+  // main-process and renderer failures interleave in ONE chronological file.
+  on('log:write', (_e, level: LogLevel, scope: string, msg: string, ctx?: unknown) => {
+    log(level, scope, msg, ctx)
+  })
+  handle('log:path', () => getLogPath())
+  handle('log:open', () => openLog())
+  handle('log:reveal', () => revealLog())
+
+  handle('dialog:unsavedClose', async (e, path: string) => {
     const win = BrowserWindow.fromWebContents(e.sender)
     const opts: Electron.MessageBoxOptions = {
       type: 'warning',
@@ -248,6 +332,13 @@ function registerIpc(): void {
   })
 }
 
+/** The window title is the open project's folder name (falling back to the app
+ * name when nothing is open). Push it to every window after a project change. */
+function syncWindowTitle(): void {
+  const title = getName() || 'Helder'
+  for (const w of BrowserWindow.getAllWindows()) w.setTitle(title)
+}
+
 function createWindow(): void {
   const win = new BrowserWindow({
     width: 1680,
@@ -256,6 +347,7 @@ function createWindow(): void {
     minHeight: 680,
     show: false,
     backgroundColor: '#16171a',
+    title: getName() || 'Helder',
     titleBarStyle: isMac ? 'hiddenInset' : 'default',
     trafficLightPosition: isMac ? { x: 14, y: 12 } : undefined,
     webPreferences: {
@@ -266,7 +358,10 @@ function createWindow(): void {
     },
   })
 
+  // Keep the renderer's <title>Helder</title> from clobbering the folder name.
+  win.on('page-title-updated', (e) => e.preventDefault())
   win.on('ready-to-show', () => win.show())
+  watchWindow(win)
 
   win.webContents.setWindowOpenHandler(({ url }) => {
     shell.openExternal(url)
@@ -281,10 +376,14 @@ function createWindow(): void {
 }
 
 app.whenReady().then(async () => {
-  app.setName('Helder')
+  // app.setName already ran in initDiagnostics — it has to happen before
+  // app.getPath('logs') resolves, or the log lands in ~/Library/Logs/Electron.
   Menu.setApplicationMenu(buildAppMenu())
+  // app.dock exists on macOS only.
+  app.dock?.setMenu(buildDockMenu())
   registerIpc()
   const initialRoot = getRoot()
+  logger.info('session', 'ready', { root: initialRoot, logPath: getLogPath() })
   if (initialRoot) {
     await resolveConfig(initialRoot)
     await addRecentProject(initialRoot)
@@ -297,6 +396,10 @@ app.whenReady().then(async () => {
   app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) createWindow()
   })
+}).catch((e) => {
+  // A throw in startup (bad config, unreadable project) otherwise leaves a
+  // window-less app with no message at all.
+  logger.error('session', 'startup failed', e)
 })
 
 app.on('window-all-closed', () => {

src/main/logger.ts

@@ -0,0 +1,169 @@
+import { appendFileSync, mkdirSync, renameSync, statSync, unlinkSync } from 'node:fs'
+import { join } from 'node:path'
+
+/**
+ * The app's one log sink: a plain-text file under the OS log dir, written
+ * SYNCHRONOUSLY so a line survives the process dying moments later.
+ *
+ * Why a file at all: `console.*` goes nowhere in real use. Helder runs one
+ * process per project window, and every window past the first is spawned by
+ * `spawnInstance()` with `stdio: 'ignore'` — its output is discarded. Launched
+ * from Finder there's no terminal attached either. Before this, a crash left
+ * literally no trace; that's what made "it crashed sometimes" undebuggable.
+ *
+ * This module deliberately does NOT import electron, so it stays unit-testable.
+ * `initLogger()` is handed the directory by the caller (see diagnostics.ts).
+ */
+
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error'
+
+const LEVELS: Record<LogLevel, number> = { debug: 10, info: 20, warn: 30, error: 40 }
+
+/** Rotate at 2 MB, keep 3 old files (~8 MB worst case for a dev tool's log). */
+const MAX_BYTES = 2 * 1024 * 1024
+const KEEP = 3
+
+interface LoggerState {
+  file: string | null
+  dir: string | null
+  min: number
+  mirror: boolean
+  /** Byte size tracked in-process so the common path avoids a stat() per line. */
+  size: number
+}
+
+const state: LoggerState = { file: null, dir: null, min: LEVELS.debug, mirror: false, size: 0 }
+
+/** Absolute path of the active log file, or null before initLogger(). */
+export function getLogPath(): string | null {
+  return state.file
+}
+
+export function getLogDir(): string | null {
+  return state.dir
+}
+
+/**
+ * Point the logger at `dir` (created if needed). Safe to call once per process.
+ * `mirror` also echoes to the console, which is useful in `npm run dev` where a
+ * terminal IS attached. `level` gates the floor (default: everything).
+ */
+export function initLogger(opts: { dir: string; mirror?: boolean; level?: LogLevel }): void {
+  state.dir = opts.dir
+  state.file = join(opts.dir, 'helder.log')
+  state.mirror = !!opts.mirror
+  state.min = LEVELS[opts.level ?? 'debug']
+  try {
+    mkdirSync(opts.dir, { recursive: true })
+    state.size = statSync(state.file).size
+  } catch {
+    // Missing file is the normal first-run case (size stays 0). A genuinely
+    // unwritable dir surfaces on the first write() instead, which no-ops.
+    state.size = 0
+  }
+}
+
+/**
+ * `helder.log` → `helder.1.log` → … → dropped after KEEP. Called when the live
+ * file crosses MAX_BYTES. Several project processes share one file and could in
+ * principle rotate at the same moment; the renames are best-effort and a lost
+ * race costs at most some log lines, never a crash — hence the blanket catch.
+ */
+function rotate(): void {
+  const dir = state.dir
+  const file = state.file
+  if (!dir || !file) return
+  try {
+    const oldest = join(dir, `helder.${KEEP}.log`)
+    try { unlinkSync(oldest) } catch { /* wasn't there */ }
+    for (let i = KEEP - 1; i >= 1; i--) {
+      try { renameSync(join(dir, `helder.${i}.log`), join(dir, `helder.${i + 1}.log`)) } catch { /* gap in the chain */ }
+    }
+    renameSync(file, join(dir, 'helder.1.log'))
+    state.size = 0
+  } catch { /* another process rotated first; keep appending */ }
+}
+
+/** JSON that can't throw on cycles/BigInt — a logger must never be the crash. */
+function safeJson(value: unknown): string {
+  const seen = new WeakSet<object>()
+  try {
+    return JSON.stringify(value, (_k, v) => {
+      if (typeof v === 'bigint') return `${v}n`
+      if (typeof v === 'function') return `[Function ${v.name || 'anonymous'}]`
+      if (typeof v === 'object' && v !== null) {
+        if (seen.has(v as object)) return '[Circular]'
+        seen.add(v as object)
+      }
+      return v
+    }) ?? String(value)
+  } catch {
+    return '[unserializable]'
+  }
+}
+
+/**
+ * Normalise anything thrown into a loggable shape. Non-Errors get stringified
+ * (people throw strings), and `cause` is followed so wrapped errors keep their
+ * root cause — usually the line that actually explains the failure.
+ */
+export function formatErr(e: unknown): { message: string; stack?: string; cause?: string } {
+  if (e instanceof Error) {
+    const out: { message: string; stack?: string; cause?: string } = { message: e.message }
+    if (e.stack) out.stack = e.stack
+    if (e.cause !== undefined) out.cause = e.cause instanceof Error ? (e.cause.stack || e.cause.message) : safeJson(e.cause)
+    return out
+  }
+  return { message: typeof e === 'string' ? e : safeJson(e) }
+}
+
+/**
+ * One log line: ISO ts · level · pid · scope · message · context JSON.
+ *
+ * Continuation lines are indented, never bare: a message can carry newlines of
+ * its own (Electron's console warnings do, and so does any stack passed as the
+ * message), and an unindented second line is indistinguishable from a new entry
+ * to both a human skimming the file and to `grep`.
+ */
+export function formatLine(level: LogLevel, scope: string, msg: string, ctx: unknown, pid: number, now: string): string {
+  const head = `${now} ${level.toUpperCase().padEnd(5)} ${String(pid).padStart(5)} ${scope.padEnd(9)} ${indent(msg)}`
+  if (ctx === undefined) return head + '\n'
+  return head + ' ' + indent(safeJson(ctx)) + '\n'
+}
+
+function indent(s: string): string {
+  return s.replace(/\r?\n/g, '\n    ')
+}
+
+export function log(level: LogLevel, scope: string, msg: string, ctx?: unknown): void {
+  if (LEVELS[level] < state.min) return
+  const line = formatLine(level, scope, msg, ctx, process.pid, new Date().toISOString())
+
+  if (state.mirror) {
+    const fn = level === 'error' ? console.error : level === 'warn' ? console.warn : console.log
+    fn(line.trimEnd())
+  }
+
+  const file = state.file
+  if (!file) return
+  if (state.size + line.length > MAX_BYTES) rotate()
+  try {
+    // Sync + O_APPEND: the write lands before an imminent crash can eat it, and
+    // concurrent appends from sibling project processes don't interleave.
+    appendFileSync(file, line, { encoding: 'utf8' })
+    state.size += Buffer.byteLength(line)
+  } catch { /* disk full / no permission — never let logging break the app */ }
+}
+
+export const logger = {
+  debug: (scope: string, msg: string, ctx?: unknown): void => log('debug', scope, msg, ctx),
+  info: (scope: string, msg: string, ctx?: unknown): void => log('info', scope, msg, ctx),
+  warn: (scope: string, msg: string, ctx?: unknown): void => log('warn', scope, msg, ctx),
+  error: (scope: string, msg: string, err?: unknown, ctx?: Record<string, unknown>): void =>
+    log('error', scope, msg, err === undefined ? ctx : { ...ctx, err: formatErr(err) }),
+}
+
+/** Reset for tests. Not used by the app. */
+export function _resetLogger(): void {
+  state.file = null; state.dir = null; state.min = LEVELS.debug; state.mirror = false; state.size = 0
+}

src/main/pty-service.ts

@@ -2,6 +2,7 @@ import { createRequire } from 'node:module'
 import type { WebContents } from 'electron'
 import { getRoot } from './project'
 import { getConfig } from './config'
+import { logger } from './logger'
 
 /**
  * Real PTYs. The agent pane is a shell that auto-launches the `claude` CLI; the
@@ -19,10 +20,14 @@ let pty: PtyModule | null = null
 try {
   pty = require('node-pty') as PtyModule
 } catch (e) {
-  console.error('[helder] node-pty unavailable — run `npm run rebuild`:', (e as Error).message)
+  logger.error('pty', 'node-pty unavailable — run `npm run rebuild`', e)
 }
 
 const terms = new Map<number, import('node-pty').IPty>()
+/** Ids we killed on purpose (pane closed, window quitting, StrictMode remount).
+ * Their exit is expected, so it must NOT be logged as a warning — a log full of
+ * false alarms is a log nobody reads. */
+const killing = new Set<number>()
 let seq = 0
 
 /**
@@ -45,6 +50,13 @@ function ptyEnv(): { [key: string]: string } {
   if (process.platform !== 'win32' && !env.LC_ALL && !env.LC_CTYPE && !env.LANG) {
     env.LANG = 'en_US.UTF-8'
   }
+  // Same inheritance gap as locale, but for color: a terminal launch leaks
+  // COLORTERM=truecolor so `claude` renders its UI backgrounds as exact 24-bit
+  // colors; the GUI-launched packaged app has none, so claude falls back to a
+  // 256/16-color approximation and the same backgrounds shift shade. Match both.
+  if (process.platform !== 'win32' && !env.COLORTERM) {
+    env.COLORTERM = 'truecolor'
+  }
   return env
 }
 
@@ -60,7 +72,10 @@ export function ptyAvailable(): boolean {
 }
 
 export function createPty(sender: WebContents, kind: 'agent' | 'shell', cols: number, rows: number): number {
-  if (!pty) return -1
+  if (!pty) {
+    logger.warn('pty', `create(${kind}) refused — node-pty never loaded`)
+    return -1
+  }
   const cwd = getRoot() || process.env.HOME || process.cwd()
   const shell = defaultShell()
   const ai = getConfig().ai
@@ -71,7 +86,7 @@ export function createPty(sender: WebContents, kind: 'agent' | 'shell', cols: nu
   // echoed command cluttering the pane; claude takes over a clean terminal.
   const args = launchAgent ? ['-i', '-c', ai.command] : []
   const proc = pty.spawn(shell, args, {
-    name: 'xterm-color',
+    name: 'xterm-256color',
     cols: cols || 80,
     rows: rows || 24,
     cwd,
@@ -79,9 +94,21 @@ export function createPty(sender: WebContents, kind: 'agent' | 'shell', cols: nu
   })
   const id = ++seq
   terms.set(id, proc)
+  logger.info('pty', `spawned ${kind}`, { id, pid: proc.pid, shell, args, cwd })
 
   proc.onData((data) => { if (!sender.isDestroyed()) sender.send('pty:data', { id, data }) })
-  proc.onExit(() => { terms.delete(id); if (!sender.isDestroyed()) sender.send('pty:exit', { id }) })
+  proc.onExit(({ exitCode, signal }) => {
+    terms.delete(id)
+    // The agent pane dying on its own (`claude` not on PATH, OOM-killed,
+    // segfault) looks from the UI like "the terminal just went blank" — the exit
+    // code and signal are the only evidence of what actually happened. An exit we
+    // asked for is routine, so only an unrequested one is a warning.
+    const expected = killing.delete(id)
+    const abnormal = !expected && (exitCode !== 0 || (signal != null && signal !== 0))
+    if (abnormal) logger.warn('pty', `${kind} exited unexpectedly`, { id, exitCode, signal })
+    else logger.info('pty', `${kind} exited`, { id, exitCode, expected })
+    if (!sender.isDestroyed()) sender.send('pty:exit', { id })
+  })
 
   // Windows path keeps the type-into-shell launch (no `-i -c` semantics there).
   if (kind === 'agent' && ai.autoLaunch && process.platform === 'win32') {
@@ -100,10 +127,10 @@ export function resizePty(id: number, cols: number, rows: number): void {
 
 export function killPty(id: number): void {
   const p = terms.get(id)
-  if (p) { try { p.kill() } catch { /* already gone */ } terms.delete(id) }
+  if (p) { killing.add(id); try { p.kill() } catch { /* already gone */ } terms.delete(id) }
 }
 
 export function killAllPtys(): void {
-  for (const p of terms.values()) { try { p.kill() } catch { /* noop */ } }
+  for (const [id, p] of terms) { killing.add(id); try { p.kill() } catch { /* noop */ } }
   terms.clear()
 }

src/preload/index.ts

@@ -25,6 +25,7 @@ const api = {
     readDir: (path: string) => ipcRenderer.invoke('fs:readDir', path),
     files: () => ipcRenderer.invoke('fs:files'),
     read: (path: string) => ipcRenderer.invoke('fs:read', path),
+    imageDataUrl: (path: string): Promise<string> => ipcRenderer.invoke('fs:imageDataUrl', path),
     write: (path: string, content: string): Promise<void> => ipcRenderer.invoke('fs:write', path, content),
     delete: (path: string): Promise<void> => ipcRenderer.invoke('fs:delete', path),
     create: (path: string): Promise<void> => ipcRenderer.invoke('fs:create', path),
@@ -83,6 +84,18 @@ const api = {
       ipcRenderer.invoke('dialog:unsavedClose', path),
   },
 
+  /** Renderer errors → the main process log file (see renderer/src/log.ts).
+   * `write` is fire-and-forget on purpose: logging must never await, and must
+   * never be able to reject into the very handler that's reporting a failure. */
+  log: {
+    write: (level: 'debug' | 'info' | 'warn' | 'error', scope: string, msg: string, ctx?: unknown): void => {
+      ipcRenderer.send('log:write', level, scope, msg, ctx)
+    },
+    path: (): Promise<string | null> => ipcRenderer.invoke('log:path'),
+    open: (): Promise<void> => ipcRenderer.invoke('log:open'),
+    reveal: (): Promise<void> => ipcRenderer.invoke('log:reveal'),
+  },
+
   /** Subscribe to "the project changed on disk" pings. Returns an unsubscribe. */
   onProjectChanged: (cb: () => void): (() => void) => {
     const handler = (): void => cb()
@@ -96,6 +109,13 @@ const api = {
     ipcRenderer.on('config:changed', handler)
     return () => ipcRenderer.removeListener('config:changed', handler)
   },
+
+  /** Subscribe to explicit ⌘R refresh requests (git + tree + viewer). Returns an unsubscribe. */
+  onRefresh: (cb: () => void): (() => void) => {
+    const handler = (): void => cb()
+    ipcRenderer.on('view:refresh', handler)
+    return () => ipcRenderer.removeListener('view:refresh', handler)
+  },
 }
 
 if (process.contextIsolated) {

src/renderer/src/App.tsx

@@ -8,9 +8,10 @@ import { Terminal, lid } from './terminals'
 import { ConfirmModal, ContextMenu, HelpModal, HistoryModal, NamePopup, PassPopup, ProjectsModal, SearchModal, Toasts } from './overlays'
 import { ProjectLauncher } from './launcher'
 import type { Menu, Toast } from './overlays'
-import type { FileNode, GitStatus } from './types'
+import type { DiffSide, FileNode, GitStatus } from './types'
 import { useProject, useProjectActions } from './project'
 import { HL } from './highlight'
+import { rlog } from './log'
 import { loadJson, loadNum, saveJson, saveNum } from './persist'
 
 const NO_COMMITTED = new Set<string>()
@@ -76,6 +77,9 @@ export function App(): React.ReactElement {
 
   const [active, setActive] = useState<string | null>(null)
   const [tabMode, setTabMode] = useState<Record<string, Mode>>({})
+  // Which git row opened each tab. Only Diff and Split follow it: Original and
+  // Actual always show HEAD and the file on disk.
+  const [tabSide, setTabSide] = useState<Record<string, DiffSide>>({})
   const [openDirs, setOpenDirs] = useState<Set<string>>(new Set())
   const [cursor, setCursor] = useState<Cursor | null>(null)
   const [selection, setSelection] = useState<Selection | null>(null)
@@ -100,6 +104,7 @@ export function App(): React.ReactElement {
   const [buffers, setBuffers] = useState<Record<string, string>>({})
   const buffersRef = useRef(buffers); buffersRef.current = buffers
   const projRef = useRef(proj); projRef.current = proj
+  const activeRef = useRef(active); activeRef.current = active
   const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   function diskText(path: string): string { return proj.files[path] ?? '' }
@@ -124,7 +129,10 @@ export function App(): React.ReactElement {
         }).catch(() => {})
         actions.refreshGit()
       })
-      .catch(() => toast('Save failed', path))
+      // A failed save is the one error here that can lose work, so it gets the
+      // reason logged (permissions, read-only volume, file vanished) — the toast
+      // alone can't say why.
+      .catch((e) => { rlog.error('save', 'write failed', e, { path, bytes: text.length }); toast('Save failed', path) })
   }
   function saveActive(): void {
     if (!active) return
@@ -208,10 +216,11 @@ export function App(): React.ReactElement {
   // currently-visible nodes (honouring expansion + the hidden-files toggle).
   const gitNav = useMemo(() => {
     const visible = proj.changes.filter((c) => !NO_COMMITTED.has(c.path))
-    const stagedRows = visible.filter((c) => proj.staged.has(c.path))
+    const stagedRows = visible.filter((c) => c.staged)
-    const changeRows = visible.filter((c) => !proj.staged.has(c.path))
+    const changeRows = visible.filter((c) => !c.staged)
-    return [...stagedRows, ...changeRows].map((c) => c.path)
+    // Rows, not paths: one file can sit in both groups (staged, then edited again).
-  }, [proj.changes, proj.staged])
+    return [...stagedRows, ...changeRows].map((c) => ({ id: c.id, path: c.path, staged: c.staged }))
+  }, [proj.changes])
   const treeNav = useMemo(() => {
     const out: { path: string; type: 'dir' | 'file' }[] = []
     const walk = (node: FileNode): void => {
@@ -226,7 +235,8 @@ export function App(): React.ReactElement {
     if (proj.tree) walk(proj.tree)
     return out
   }, [proj.tree, openDirs, showHidden])
-  const gitSelPath = gitNav[gitSel] ?? null
+  const gitSelRow = gitNav[gitSel] ?? null
+  const gitSelPath = gitSelRow?.path ?? null
   const treeSelItem = treeNav[treeSel] ?? null
 
   // Keep the row cursors in range as the lists shrink/grow.
@@ -280,10 +290,10 @@ export function App(): React.ReactElement {
     if (!proj.ready || sessionRoot.current === proj.root) return
     sessionRoot.current = proj.root
     recentReady.current = false
-    setHistory([]); setActive(null); setTabMode({})
+    setHistory([]); setActive(null); setTabMode({}); setTabSide({})
     if (proj.config.session.restoreOnLaunch) {
-      const saved = loadJson<{ active: string | null; tabMode: Record<string, Mode> } | null>(`helder.session:${proj.root}`, null)
+      const saved = loadJson<{ active: string | null; tabMode: Record<string, Mode>; tabSide?: Record<string, DiffSide> } | null>(`helder.session:${proj.root}`, null)
-      if (saved) { setActive(saved.active ?? null); setTabMode(saved.tabMode ?? {}) }
+      if (saved) { setActive(saved.active ?? null); setTabMode(saved.tabMode ?? {}); setTabSide(saved.tabSide ?? {}) }
     }
     const bridge = window.helder
     if (bridge) bridge.recent.get().then((list) => { setHistory(list); recentReady.current = true }).catch(() => { recentReady.current = true })
@@ -299,8 +309,8 @@ export function App(): React.ReactElement {
 
   useEffect(() => {
     if (sessionRoot.current !== proj.root || !proj.config.session.restoreOnLaunch) return
-    saveJson(`helder.session:${proj.root}`, { active, tabMode })
+    saveJson(`helder.session:${proj.root}`, { active, tabMode, tabSide })
-  }, [active, tabMode, proj.root, proj.config.session.restoreOnLaunch])
+  }, [active, tabMode, tabSide, proj.root, proj.config.session.restoreOnLaunch])
 
   function toast(title: string, ref?: string): void {
     const id = lid()
@@ -351,7 +361,7 @@ export function App(): React.ReactElement {
   async function deleteEntry(path: string, isDir: boolean): Promise<void> {
     const bridge = window.helder
     if (bridge) {
-      try { await bridge.fs.delete(path) } catch { toast('Delete failed', path); return }
+      try { await bridge.fs.delete(path) } catch (e) { rlog.error('fs', 'delete failed', e, { path, isDir }); toast('Delete failed', path); return }
     }
     const inside = (p: string): boolean => p === path || (isDir && p.startsWith(path + '/'))
     setHistory((h) => h.filter((p) => !inside(p)))
@@ -370,7 +380,7 @@ export function App(): React.ReactElement {
     const rel = (dir ? dir + '/' : '') + name.replace(/^\/+/, '')
     const bridge = window.helder
     if (bridge) {
-      try { await bridge.fs.create(rel) } catch { toast('Create failed', rel); return }
+      try { await bridge.fs.create(rel) } catch (e) { rlog.error('fs', 'create file failed', e, { path: rel }); toast('Create failed', rel); return }
     }
     if (dir) setOpenDirs((d) => { const n = new Set(d); n.add(dir); return n })
     actions.refresh()
@@ -385,7 +395,7 @@ export function App(): React.ReactElement {
     const rel = (dir ? dir + '/' : '') + name.replace(/^\/+/, '').replace(/\/+$/, '')
     const bridge = window.helder
     if (bridge) {
-      try { await bridge.fs.mkdir(rel) } catch { toast('Create failed', rel); return }
+      try { await bridge.fs.mkdir(rel) } catch (e) { rlog.error('fs', 'create folder failed', e, { path: rel }); toast('Create failed', rel); return }
     }
     setOpenDirs((d) => { const n = new Set(d); if (dir) n.add(dir); n.add(rel); return n })
     actions.refresh()
@@ -411,7 +421,7 @@ export function App(): React.ReactElement {
     actions.unstage(p)
   }
 
-  function openFile(path: string, opts: { diff?: boolean; line?: number } = {}): void {
+  function openFile(path: string, opts: { diff?: boolean; line?: number; side?: DiffSide } = {}): void {
     const changed = !!proj.diffs[path]
     setFocusZone('editor')
     setHistory((h) => [path, ...h.filter((p) => p !== path)].slice(0, 100))
@@ -421,6 +431,14 @@ export function App(): React.ReactElement {
     // Unchanged files only have the plain editable "code" view.
     const openMode: Mode = changed ? (opts.diff ? 'diff' : 'updated') : 'code'
     setTabMode((m) => ({ ...m, [path]: openMode }))
+    // Remember which git row this came from, so Diff/Split show that half. An
+    // explorer click carries no side and falls back to the whole file.
+    setTabSide((m) => {
+      const n = { ...m }
+      if (opts.side) n[path] = opts.side
+      else delete n[path]
+      return n
+    })
     reveal(path)
     if (opts.line) {
       // The updated/code views render in the CodeEditor (a textarea over a <pre>),
@@ -506,7 +524,8 @@ export function App(): React.ReactElement {
     }
     if (target.kind === 'git') {
       items.push({ sep: true })
-      const isStaged = proj.staged.has(target.path)
+      // The row carries its own flag: a file can have a staged and an unstaged row.
+      const isStaged = target.staged ?? proj.staged.has(target.path)
       items.push(isStaged
         ? { icon: Icon.minus({ style: { color: 'var(--mod)' } }), label: 'Unstage changes', onClick: () => unstageGuarded(target.path) }
         : { icon: Icon.plus({ style: { color: 'var(--add)' } }), label: 'Stage changes', onClick: () => stageGuarded(target.path) })
@@ -546,7 +565,7 @@ export function App(): React.ReactElement {
     if (activePanel === 'git' && gitSelPath) {
       const row = document.querySelector('.git-row.kbd') as HTMLElement | null
       const r = row?.getBoundingClientRect()
-      openMenuAt(row ? rowAnchorX(row) : 220, r ? r.top + 4 : 120, { path: gitSelPath, kind: 'git', staged: proj.staged.has(gitSelPath) })
+      openMenuAt(row ? rowAnchorX(row) : 220, r ? r.top + 4 : 120, { path: gitSelPath, kind: 'git', staged: gitSelRow?.staged })
       return true
     }
     if (activePanel === 'tree' && treeSelItem) {
@@ -559,7 +578,7 @@ export function App(): React.ReactElement {
   }
   // ↵ inside Git/Explorer: open the selected file (git → diff), toggle a folder.
   function openPanelSelection(): boolean {
-    if (activePanel === 'git' && gitSelPath) { openFile(gitSelPath, { diff: true }); return true }
+    if (activePanel === 'git' && gitSelRow) { openFile(gitSelRow.path, { diff: true, side: gitSelRow.staged ? 'staged' : 'unstaged' }); return true }
     if (activePanel === 'tree' && treeSelItem) {
       if (treeSelItem.type === 'dir') toggleDir(treeSelItem.path)
       else openFile(treeSelItem.path)
@@ -712,7 +731,7 @@ export function App(): React.ReactElement {
       else if (meta && e.key === 'Enter') {
         if (ae && ae.classList.contains('commit-input')) return
         e.preventDefault()
-        if (commitMsg.trim() && proj.changes.some((c) => proj.staged.has(c.path))) commit()
+        if (commitMsg.trim() && proj.changes.some((c) => c.staged)) commit()
       }
       // ⌘C focuses the commit message (but let native copy run when there's a selection).
       else if (meta && e.key.toLowerCase() === 'c') {
@@ -733,7 +752,61 @@ export function App(): React.ReactElement {
     return () => window.removeEventListener('keydown', onKey)
   }, [active, splitFor, overlay, focusZone, history, tabMode, commitMsg, proj, selection, confirm, menu, activePanel, gitNav, treeNav, gitSel, treeSel])
 
+  // ⌘R (View → Refresh, main process sends `view:refresh`) reloads the three
+  // left columns: git status (A) + the file tree (B) via a full project reload,
+  // and the open file in the viewer (C) re-read from disk. The viewer reload
+  // drops any in-memory buffer so the editable view shows on-disk truth — an
+  // explicit refresh is exactly when the user wants whatever the agent just
+  // wrote, the same "on-disk wins" rule used on file open / mode change.
+  // A refresh reads from disk, so nothing may visibly change — the columns then
+  // look inert and the keypress feels lost. Flash A/B/C light grey for ~250 ms so
+  // ⌘R always reads as "that landed". Two class names (a/b) alternate because a
+  // CSS animation only restarts when the animation-name changes: on a second ⌘R
+  // inside the window, re-adding the same class would replay nothing.
+  const [flashTick, setFlashTick] = useState(0)
+  const flashTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const flashClass = flashTick === 0 ? '' : (flashTick % 2 ? ' refresh-flash-a' : ' refresh-flash-b')
+  useEffect(() => () => { if (flashTimer.current) clearTimeout(flashTimer.current) }, [])
+
+  useEffect(() => {
+    if (!window.helder) return
+    return window.helder.onRefresh(() => {
+      actions.refresh()
+      const path = activeRef.current
+      if (path) reloadFromDisk(path)
+      setFlashTick((n) => n + 1)
+      if (flashTimer.current) clearTimeout(flashTimer.current)
+      flashTimer.current = setTimeout(() => setFlashTick(0), 400)
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Re-read git status the moment the Git column (Col A) gains focus, so it
+  // reflects on-disk truth whenever the user turns to it — e.g. after the agent
+  // rewrote files while focus was elsewhere. Git-only fast path (no tree/index
+  // re-walk); the FS watcher stays the backstop for everything else.
+  useEffect(() => {
+    if (activePanel === 'git') actions.refreshGit()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activePanel])
+
+  // Poll git status on an interval as a backstop for the FS watcher: an external
+  // tool (the agent, the git CLI) rewriting files *should* fire the watcher's
+  // project:changed, but a missed filesystem event would otherwise leave the Git
+  // column stale until the next manual ⌘R. Interval is config-driven
+  // (git.refreshInterval ms; 0 disables). Fast path — git status only.
+  useEffect(() => {
+    if (!window.helder) return
+    const ms = proj.config.git.refreshInterval
+    if (!ms || ms <= 0) return
+    const id = setInterval(() => actions.refreshGit(), ms)
+    return () => clearInterval(id)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [proj.config.git.refreshInterval])
+
   const mode: Mode = (active && tabMode[active]) || (active && proj.diffs[active] ? defaultMode : 'code')
+  // Which half the open tab shows. Also lights up the matching git row.
+  const activeSide: DiffSide | null = (active && tabSide[active]) || null
 
   const crumb = active ? active.split('/') : []
 
@@ -789,17 +862,17 @@ export function App(): React.ReactElement {
 
       {/* workbench */}
       <div className="workbench">
-        <div className={'col' + (activePanel === 'git' ? ' panel-active' : '')} style={{ width: gitW, flex: '0 0 ' + gitW + 'px' }}
+        <div className={'col' + (activePanel === 'git' ? ' panel-active' : '') + flashClass} style={{ width: gitW, flex: '0 0 ' + gitW + 'px' }}
           onMouseDownCapture={() => setActivePanel('git')}>
-          <GitPanel branch={proj.branch} changes={proj.changes} staged={proj.staged} committed={NO_COMMITTED}
+          <GitPanel branch={proj.branch} changes={proj.changes} committed={NO_COMMITTED}
             commitMsg={commitMsg} setCommitMsg={setCommitMsg}
             onStage={stageGuarded} onUnstage={unstageGuarded} onStageAll={actions.stageAll} onUnstageAll={actions.unstageAll} onCommit={commit} onPush={push}
-            onOpen={openFile} onContext={openMenu} activePath={active} ctxPath={menu?.path ?? null}
+            onOpen={openFile} onContext={openMenu} activePath={active} activeSide={activeSide} ctxPath={menu?.path ?? null}
-            kbdPath={activePanel === 'git' ? gitSelPath : null} showDir={gitW > 300} />
+            kbdId={activePanel === 'git' ? gitSelRow?.id ?? null : null} showDir={gitW > 300} />
         </div>
         <Splitter onDelta={(dx) => { setAutoResize(false); setGitW((w) => clamp(w + dx, 160, 460)) }} />
 
-        <div className={'col' + (activePanel === 'tree' ? ' panel-active' : '')} style={{ width: treeW, flex: '0 0 ' + treeW + 'px' }}
+        <div className={'col' + (activePanel === 'tree' ? ' panel-active' : '') + flashClass} style={{ width: treeW, flex: '0 0 ' + treeW + 'px' }}
           onMouseDownCapture={() => setActivePanel('tree')}>
           {proj.tree ? (
             <FileTree tree={proj.tree} openDirs={openDirs} toggleDir={toggleDir} onOpen={openFile}
@@ -811,8 +884,8 @@ export function App(): React.ReactElement {
         </div>
         <Splitter onDelta={(dx) => { setAutoResize(false); setTreeW((w) => clamp(w + dx, 160, 520)) }} />
 
-        <div className={'col editor-col' + (activePanel === 'editor' ? ' panel-active' : '')} onMouseDownCapture={() => { setFocusZone('editor'); setActivePanel('editor') }}>
+        <div className={'col editor-col' + (activePanel === 'editor' ? ' panel-active' : '') + flashClass} onMouseDownCapture={() => { setFocusZone('editor'); setActivePanel('editor') }}>
-          <Editor active={active} mode={mode}
+          <Editor active={active} mode={mode} side={activeSide}
             setMode={(m) => { if (active) { setTabMode((mm) => ({ ...mm, [active]: m })); setSplitFor(null); reloadFromDisk(active) } }}
             onContext={openMenu}
             onSplit={(p) => setSplitFor(p)} splitOpen={splitFor === active}
@@ -831,7 +904,7 @@ export function App(): React.ReactElement {
       </div>
 
       {/* overlays */}
-      {splitFor && <SplitView path={splitFor} onClose={() => setSplitFor(null)} onContext={openMenu} />}
+      {splitFor && <SplitView path={splitFor} side={tabSide[splitFor] ?? null} onClose={() => setSplitFor(null)} onContext={openMenu} />}
       {passPopup && <PassPopup x={passPopup.x} y={passPopup.y} refStr={passPopup.ref} code={passPopup.code}
         onConfirm={(payload) => {
           window.dispatchEvent(new CustomEvent('agentPaste', { detail: payload }))

src/renderer/src/components.tsx

@@ -1,6 +1,6 @@
 /* Shared icons, FileIcon, GitPanel, FileTree */
 import React, { Fragment } from 'react'
-import type { Change, FileNode, GitStatus } from './types'
+import type { Change, DiffSide, FileNode, GitStatus } from './types'
 import { HL } from './highlight'
 
 type SvgProps = React.SVGProps<SVGSVGElement>
@@ -55,7 +55,7 @@ export function FileIcon({ path }: { path: string }): React.ReactElement {
 }
 
 /* Shared callback signatures used across panels. */
-export type OpenFile = (path: string, opts?: { diff?: boolean; line?: number }) => void
+export type OpenFile = (path: string, opts?: { diff?: boolean; line?: number; side?: DiffSide }) => void
 export interface ContextTarget {
   path: string
   kind: 'editor' | 'dir' | 'file' | 'git'
@@ -67,23 +67,27 @@ export interface ContextTarget {
 export type OnContext = (e: React.MouseEvent, target: ContextTarget) => void
 
 /* ============ Git / Source Control panel ============ */
-function GitRow({ c, staged, activePath, ctxPath, kbdPath, showDir, onOpen, onContext, onToggleStage }: {
+function GitRow({ c, activePath, activeSide, ctxPath, kbdId, showDir, onOpen, onContext, onToggleStage }: {
   c: Change
-  staged: boolean
   activePath: string | null
+  /** Which half the open tab is showing, so only that row lights up. */
+  activeSide: DiffSide | null
   ctxPath: string | null
-  kbdPath: string | null
+  kbdId: string | null
   showDir: boolean
   onOpen: OpenFile
   onContext: OnContext
   onToggleStage: (path: string) => void
 }): React.ReactElement {
+  const staged = c.staged
+  const side: DiffSide = staged ? 'staged' : 'unstaged'
   const name = c.path.split('/').pop()
   const dir = c.path.split('/').slice(0, -1).join('/')
   const dirShown = showDir && !!dir
+  const isActive = activePath === c.path && (!activeSide || activeSide === side)
   return (
-    <div className={'git-row' + (activePath === c.path ? ' active' : '') + (ctxPath === c.path ? ' ctx' : '') + (kbdPath === c.path ? ' kbd' : '')}
+    <div className={'git-row' + (isActive ? ' active' : '') + (ctxPath === c.path ? ' ctx' : '') + (kbdId === c.id ? ' kbd' : '')}
-      onClick={() => onOpen(c.path, { diff: true })}
+      onClick={() => onOpen(c.path, { diff: true, side })}
       onContextMenu={(e) => onContext(e, { path: c.path, kind: 'git', staged })}
       title={c.path}>
       <span className={'git-stat ' + c.status}>{c.status}</span>
@@ -98,10 +102,9 @@ function GitRow({ c, staged, activePath, ctxPath, kbdPath, showDir, onOpen, onCo
   )
 }
 
-export function GitPanel({ branch, changes, staged, committed, commitMsg, setCommitMsg, onStage, onUnstage, onStageAll, onUnstageAll, onCommit, onPush, onOpen, onContext, activePath, ctxPath, kbdPath, showDir }: {
+export function GitPanel({ branch, changes, committed, commitMsg, setCommitMsg, onStage, onUnstage, onStageAll, onUnstageAll, onCommit, onPush, onOpen, onContext, activePath, activeSide, ctxPath, kbdId, showDir }: {
   branch: string
   changes: Change[]
-  staged: Set<string>
   committed: Set<string>
   commitMsg: string
   setCommitMsg: (v: string) => void
@@ -114,13 +117,14 @@ export function GitPanel({ branch, changes, staged, committed, commitMsg, setCom
   onOpen: OpenFile
   onContext: OnContext
   activePath: string | null
+  activeSide: DiffSide | null
   ctxPath: string | null
-  kbdPath: string | null
+  kbdId: string | null
   showDir: boolean
 }): React.ReactElement {
   const visible = changes.filter((c) => !committed.has(c.path))
-  const stagedList = visible.filter((c) => staged.has(c.path))
+  const stagedList = visible.filter((c) => c.staged)
-  const changesList = visible.filter((c) => !staged.has(c.path))
+  const changesList = visible.filter((c) => !c.staged)
   const totals = visible.reduce((a, c) => ({ add: a.add + c.add, del: a.del + c.del }), { add: 0, del: 0 })
   const canCommit = stagedList.length > 0 && commitMsg.trim().length > 0
 
@@ -144,7 +148,7 @@ export function GitPanel({ branch, changes, staged, committed, commitMsg, setCom
               {stagedList.length > 0 && <button className="grp-act" title="Unstage all" onClick={onUnstageAll}>{Icon.minus()}</button>}
             </div>
             {stagedList.length > 0 ? stagedList.map((c) => (
-              <GitRow key={c.path} c={c} staged={true} activePath={activePath} ctxPath={ctxPath} kbdPath={kbdPath} showDir={showDir}
+              <GitRow key={c.id} c={c} activePath={activePath} activeSide={activeSide} ctxPath={ctxPath} kbdId={kbdId} showDir={showDir}
                 onOpen={onOpen} onContext={onContext} onToggleStage={onUnstage} />
             )) : (
               <div className="git-none">Nothing staged — use <span className="key">+</span> to stage a file</div>
@@ -157,7 +161,7 @@ export function GitPanel({ branch, changes, staged, committed, commitMsg, setCom
               {changesList.length > 0 && <button className="grp-act" title="Stage all" onClick={onStageAll}>{Icon.plus()}</button>}
             </div>
             {changesList.length > 0 ? changesList.map((c) => (
-              <GitRow key={c.path} c={c} staged={false} activePath={activePath} ctxPath={ctxPath} kbdPath={kbdPath} showDir={showDir}
+              <GitRow key={c.id} c={c} activePath={activePath} activeSide={activeSide} ctxPath={ctxPath} kbdId={kbdId} showDir={showDir}
                 onOpen={onOpen} onContext={onContext} onToggleStage={onStage} />
             )) : (
               <div className="git-none">All changes staged</div>

src/renderer/src/data.ts

@@ -6,6 +6,7 @@
  * same original/updated text pair per changed file, so keep buildDiff()'s
  * output shape. */
 import type { Change, Diff, FileNode, Project } from './types'
+import { rowId } from './types'
 import { buildDiff } from './diff'
 
 // ---- working-tree (current / updated) file contents ----------------
@@ -651,7 +652,8 @@ const changes: Change[] = changeDefs.map((c) => {
     original: orig,
     updated: upd,
   })
-  return { path: c.path, status: c.status, add: d.add, del: d.del, deleted: c.status === 'D' }
+  // Mock rows are all unstaged here; project.tsx flips the staged ones over.
+  return { path: c.path, status: c.status, add: d.add, del: d.del, deleted: c.status === 'D', staged: false, id: rowId(c.path, false) }
 })
 
 export const PROJECT: Project = {

src/renderer/src/editor.tsx

@@ -1,6 +1,7 @@
 /* Editor: four view modes (Original / Updated / Diff / Split) + line selection */
-import React, { Fragment, useMemo, useRef } from 'react'
+import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react'
-import type { Diff, ViewLine } from './types'
+import type { Diff, DiffSide, ViewLine } from './types'
+import { rowId } from './types'
 import { useProject } from './project'
 import { HL } from './highlight'
 import { renderMarkdown } from './markdown'
@@ -91,6 +92,32 @@ function MarkdownView({ path, text, onContext }: { path: string; text: string; o
   )
 }
 
+/* Image preview: fetches the file as a data: URL from main (the renderer can't
+ * read the filesystem) and shows it centred on the editor surface. Read-only. */
+function ImageView({ path, onContext }: { path: string; onContext: OnContext }): React.ReactElement {
+  const [src, setSrc] = useState('')
+  const [failed, setFailed] = useState(false)
+  useEffect(() => {
+    let alive = true
+    setSrc(''); setFailed(false)
+    const bridge = window.helder
+    if (!bridge) { setFailed(true); return }
+    bridge.fs.imageDataUrl(path)
+      .then((url) => { if (alive) { if (url) setSrc(url); else setFailed(true) } })
+      .catch(() => { if (alive) setFailed(true) })
+    return () => { alive = false }
+  }, [path])
+  return (
+    <div className="img-view" onContextMenu={(e) => { e.preventDefault(); onContext(e, { path, kind: 'editor', line: 1 }) }}>
+      {src
+        ? <img className="img-view-img" src={src} alt={path.split('/').pop()} />
+        : failed
+          ? <div className="empty-ed"><div className="big" style={{ color: 'var(--fg-3)' }}>Can’t preview this image</div></div>
+          : null}
+    </div>
+  )
+}
+
 /* Generic pane: renders an array of line descriptors with selection + caret + context. */
 function PaneView({ cacheKey, path, lines, lang, showSign, cursor, selection, setCursor, setSelection, onContext }: {
   cacheKey: string
@@ -197,7 +224,9 @@ function PaneView({ cacheKey, path, lines, lang, showSign, cursor, selection, se
   )
 }
 
-/* Build the line descriptors for a given mode. */
+/* Build the line descriptors for a given mode. The caller picks which diff to
+ * pass: Original and Actual always get the file-level HEAD-vs-disk pair, while
+ * Diff gets the pair of the git row you clicked. */
 function buildLines(mode: Mode, diff: Diff | null, fileText: string | undefined): { lines: ViewLine[]; showSign: boolean } {
   if (mode === 'original' && diff) return { lines: diff.left.map((l) => ({ no: l.no, text: l.text, row: l.mark === 'del' ? 'bar-del' : null })), showSign: false }
   if (mode === 'updated' && diff) return { lines: diff.right.map((l) => ({ no: l.no, text: l.text, row: l.mark === 'add' ? 'bar-add' : null })), showSign: false }
@@ -218,9 +247,11 @@ function segmentsFor(hasDiff: boolean, isMarkdown: boolean): { id: Mode; label:
   return segs
 }
 
-export function Editor({ active, mode, setMode, onContext, onSplit, splitOpen, cursor, selection, setCursor, setSelection, bufferText, onEdit }: {
+export function Editor({ active, mode, side, setMode, onContext, onSplit, splitOpen, cursor, selection, setCursor, setSelection, bufferText, onEdit }: {
   active: string | null
   mode: Mode
+  /** Which git row opened this tab. Only Diff and Split follow it. */
+  side: DiffSide | null
   setMode: (m: Mode) => void
   onContext: OnContext
   onSplit: (path: string) => void
@@ -234,10 +265,16 @@ export function Editor({ active, mode, setMode, onContext, onSplit, splitOpen, c
 }): React.ReactElement {
   const PROJECT = useProject()
   const tab = active ? { path: active } : null
+  const isImage = tab ? HL.isImage(tab.path) : false
   const change = tab ? PROJECT.changes.find((c) => c.path === tab.path) : null
+  // Original / Actual always show the whole file: HEAD vs disk.
   const diff = tab ? PROJECT.diffs[tab.path] : null
+  // Diff / Split show the half you clicked in the git panel. A file with only
+  // one row has an identical pair either way.
+  const rowDiff = (tab && side ? PROJECT.rowDiffs[rowId(tab.path, side === 'staged')] : null) || diff
+  const bothSides = !!tab && !!PROJECT.rowDiffs[rowId(tab.path, true)] && !!PROJECT.rowDiffs[rowId(tab.path, false)]
   const lang = tab ? HL.langFor(tab.path) : null
-  const hasDiff = !!(change && diff)
+  const hasDiff = !isImage && !!(change && diff)
   const isMarkdown = lang === 'markdown'
   const segments = segmentsFor(hasDiff, isMarkdown)
 
@@ -249,16 +286,24 @@ export function Editor({ active, mode, setMode, onContext, onSplit, splitOpen, c
   else if (hasDiff) effMode = mode === 'code' || mode === 'preview' ? 'updated' : mode
   else effMode = 'code'
 
+  // The diff actually on screen: the row pair for Diff, the whole file otherwise.
+  const shown = effMode === 'diff' ? rowDiff : diff
   let built: { lines: ViewLine[]; showSign: boolean } | null = null
   if (tab && effMode !== 'preview') {
-    if (hasDiff) built = buildLines(effMode, diff, PROJECT.files[tab.path])
+    if (hasDiff) built = buildLines(effMode, shown, PROJECT.files[tab.path])
     else built = buildLines('code', null, PROJECT.files[tab.path])
   }
 
-  const statusWord = change ? (change.status === 'A' ? 'Added' : change.status === 'D' ? 'Deleted' : 'Modified') : ''
+  // File-level status, taken from the whole-file diff rather than a single row:
+  // a file can be staged as modified and deleted on disk at the same time.
+  const fileStatus = diff ? (diff.deleted ? 'D' : diff.added ? 'A' : 'M') : change?.status
+  const statusWord = fileStatus === 'A' ? 'Added' : fileStatus === 'D' ? 'Deleted' : 'Modified'
   const activeSeg = splitOpen ? 'split' : effMode
-  const emptyUpdated = effMode === 'updated' && built && built.lines.length === 0
+  // Keyed off the git status, not the line count: an empty file that still exists
-  const emptyOriginal = effMode === 'original' && built && built.lines.length === 0
+  // (a just-created one, or one emptied by hand) has zero lines too, and must get
+  // the editor rather than the "deleted" placeholder.
+  const emptyUpdated = effMode === 'updated' && fileStatus === 'D'
+  const emptyOriginal = effMode === 'original' && fileStatus === 'A'
   // Editable in the live-buffer modes; Original/Diff/Preview stay read-only views.
   const editable = effMode === 'code' || effMode === 'updated'
 
@@ -282,13 +327,19 @@ export function Editor({ active, mode, setMode, onContext, onSplit, splitOpen, c
           <div className="diff-bar">
             {change ? (
               <Fragment>
-                <span className={'git-stat ' + change.status} style={{ width: 'auto' }}>{statusWord}</span>
+                <span className={'git-stat ' + fileStatus} style={{ width: 'auto' }}>{statusWord}</span>
-                {change.add > 0 && <span className="a">+{change.add}</span>}
+                {!!shown && shown.add > 0 && <span className="a">+{shown.add}</span>}
-                {change.del > 0 && <span className="d">−{change.del}</span>}
+                {!!shown && shown.del > 0 && <span className="d">−{shown.del}</span>}
+                {/* Only ambiguous when the file is staged AND edited again: say
+                    which pair the diff is comparing. */}
+                {bothSides && effMode === 'diff' && (
+                  <span className="db-side">{side === 'unstaged' ? 'staged → actual' : 'HEAD → staged'}</span>
+                )}
               </Fragment>
             ) : (
-              <span className="db-lang">{HL.langLabel(tab.path)}</span>
+              <span className="db-lang">{isImage ? 'Image' : HL.langLabel(tab.path)}</span>
             )}
+            {!isImage && (
               <div className="seg">
                 {segments.map((s) => (
                   <button key={s.id} className={activeSeg === s.id ? 'on' : ''} onClick={() => setMode(s.id)}>{s.label}</button>
@@ -300,8 +351,11 @@ export function Editor({ active, mode, setMode, onContext, onSplit, splitOpen, c
                   </button>
                 )}
               </div>
+            )}
           </div>
-          {effMode === 'preview' ? (
+          {isImage ? (
+            <ImageView path={tab.path} onContext={onContext} />
+          ) : effMode === 'preview' ? (
             <MarkdownView path={tab.path} text={bufferText} onContext={onContext} />
           ) : emptyUpdated ? (
             <div className="empty-ed"><div className="big" style={{ color: 'var(--del)' }}>No updated version</div><div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--fg-3)' }}>This file was deleted in the change.</div></div>
@@ -310,7 +364,7 @@ export function Editor({ active, mode, setMode, onContext, onSplit, splitOpen, c
           ) : editable ? (
             <CodeEditor path={tab.path} text={bufferText} lang={lang} onChange={onEdit} onContext={onContext} />
           ) : (
-            built && <PaneView cacheKey={tab.path + ':' + effMode} path={tab.path} lines={built.lines}
+            built && <PaneView cacheKey={tab.path + ':' + effMode + ':' + (effMode === 'diff' ? side ?? '' : '')} path={tab.path} lines={built.lines}
               lang={lang} showSign={built.showSign} cursor={cursor} selection={selection}
               setCursor={setCursor} setSelection={setSelection} onContext={onContext} />
           )}
@@ -321,20 +375,24 @@ export function Editor({ active, mode, setMode, onContext, onSplit, splitOpen, c
 }
 
 /* Full-screen side-by-side split view */
-export function SplitView({ path, onClose, onContext }: {
+export function SplitView({ path, side, onClose, onContext }: {
   path: string
+  /** Which git row opened this file. Split compares that row's pair. */
+  side: DiffSide | null
   onClose: () => void
   onContext: OnContext
 }): React.ReactElement {
   const PROJECT = useProject()
-  const diff = PROJECT.diffs[path]
+  const diff = (side ? PROJECT.rowDiffs[rowId(path, side === 'staged')] : null) || PROJECT.diffs[path]
   const lang = HL.langFor(path)
   const leftRef = useRef<HTMLDivElement>(null), rightRef = useRef<HTMLDivElement>(null)
   const lock = useRef(false)
   const change = PROJECT.changes.find((c) => c.path === path)
+  const splitStatus = diff.deleted ? 'D' : diff.added ? 'A' : 'M'
+  const bothSides = !!PROJECT.rowDiffs[rowId(path, true)] && !!PROJECT.rowDiffs[rowId(path, false)]
 
-  const leftHtml = useMemo(() => diff.split.map((r) => r.l ? HL.hlLine(r.l.text, lang) : ''), [path])
+  const leftHtml = useMemo(() => diff.split.map((r) => r.l ? HL.hlLine(r.l.text, lang) : ''), [path, side])
-  const rightHtml = useMemo(() => diff.split.map((r) => r.r ? HL.hlLine(r.r.text, lang) : ''), [path])
+  const rightHtml = useMemo(() => diff.split.map((r) => r.r ? HL.hlLine(r.r.text, lang) : ''), [path, side])
 
   function sync(from: HTMLDivElement | null, to: HTMLDivElement | null): void {
     if (lock.current || !from || !to) return
@@ -356,9 +414,10 @@ export function SplitView({ path, onClose, onContext }: {
       <div className="split-head">
         <FileIcon path={path} />
         <span className="sh-name">{path}</span>
-        {change && <span className={'git-stat ' + change.status} style={{ width: 'auto' }}>{change.status === 'A' ? 'Added' : change.status === 'D' ? 'Deleted' : 'Modified'}</span>}
+        {change && <span className={'git-stat ' + splitStatus} style={{ width: 'auto' }}>{splitStatus === 'A' ? 'Added' : splitStatus === 'D' ? 'Deleted' : 'Modified'}</span>}
-        {change && change.add > 0 && <span className="a" style={{ fontFamily: 'var(--mono)', color: 'var(--add)' }}>+{change.add}</span>}
+        {diff.add > 0 && <span className="a" style={{ fontFamily: 'var(--mono)', color: 'var(--add)' }}>+{diff.add}</span>}
-        {change && change.del > 0 && <span className="d" style={{ fontFamily: 'var(--mono)', color: 'var(--del)' }}>−{change.del}</span>}
+        {diff.del > 0 && <span className="d" style={{ fontFamily: 'var(--mono)', color: 'var(--del)' }}>−{diff.del}</span>}
+        {bothSides && <span className="db-side">{side === 'unstaged' ? 'staged → actual' : 'HEAD → staged'}</span>}
         <button className="split-exit" onClick={onClose}>
           <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M7 1.5h3.5V5M5 10.5H1.5V7M10.5 1.5L7 5M1.5 10.5L5 7" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" /></svg>
           Collapse <kbd>Esc</kbd>

src/renderer/src/env.d.ts

@@ -23,6 +23,7 @@ interface HelderBridge {
     readDir: (path: string) => Promise<FileNode[]>
     files: () => Promise<Record<string, string>>
     read: (path: string) => Promise<string>
+    imageDataUrl: (path: string) => Promise<string>
     write: (path: string, content: string) => Promise<void>
     delete: (path: string) => Promise<void>
     create: (path: string) => Promise<void>
@@ -63,8 +64,15 @@ interface HelderBridge {
   dialog: {
     unsavedClose: (path: string) => Promise<'save' | 'discard' | 'cancel'>
   }
+  log: {
+    write: (level: 'debug' | 'info' | 'warn' | 'error', scope: string, msg: string, ctx?: unknown) => void
+    path: () => Promise<string | null>
+    open: () => Promise<void>
+    reveal: () => Promise<void>
+  }
   onProjectChanged: (cb: () => void) => () => void
   onConfigChanged: (cb: () => void) => () => void
+  onRefresh: (cb: () => void) => () => void
 }
 
 declare global {

src/renderer/src/error-boundary.tsx

@@ -1,24 +1,29 @@
 import React from 'react'
+import { rlog } from './log'
 
 interface State {
   error: Error | null
+  stack: string | null
 }
 
 /** Catches render-time errors anywhere in the tree and shows a dark, recoverable
  * panel instead of a blank window. */
 export class ErrorBoundary extends React.Component<{ children: React.ReactNode }, State> {
-  state: State = { error: null }
+  state: State = { error: null, stack: null }
 
   static getDerivedStateFromError(error: Error): State {
-    return { error }
+    return { error, stack: null }
   }
 
   componentDidCatch(error: Error, info: React.ErrorInfo): void {
-    console.error('[helder] render error:', error, info.componentStack)
+    // The component stack is the part that says WHICH panel blew up — it exists
+    // only here, so it has to be logged now or it's gone.
+    rlog.error('react', 'render error', error, { componentStack: info.componentStack })
+    this.setState({ stack: info.componentStack ?? null })
   }
 
   render(): React.ReactNode {
-    const { error } = this.state
+    const { error, stack } = this.state
     if (!error) return this.props.children
     return (
       <div style={{
@@ -30,11 +35,18 @@ export class ErrorBoundary extends React.Component<{ children: React.ReactNode }
           maxWidth: 720, maxHeight: 280, overflow: 'auto', margin: 0, padding: 14, textAlign: 'left',
           fontFamily: 'var(--code-font)', fontSize: 12, color: 'var(--del)',
           background: 'var(--bg-2)', border: '1px solid var(--border-2)', borderRadius: 8, whiteSpace: 'pre-wrap',
-        }}>{error.message}</pre>
+        }}>{(error.stack || error.message) + (stack ? '\n' + stack : '')}</pre>
+        <div style={{ display: 'flex', gap: 8 }}>
           <button onClick={() => location.reload()} style={{
             background: 'var(--accent)', color: '#0c1320', border: 0, borderRadius: 7, fontWeight: 600,
             padding: '7px 14px', cursor: 'pointer', fontSize: 12,
           }}>Reload</button>
+          {/* The panel shows this one error; the log has what led up to it. */}
+          <button onClick={() => window.helder?.log.open()} style={{
+            background: 'var(--bg-3)', color: 'var(--fg-1)', border: '1px solid var(--border-2)', borderRadius: 7,
+            padding: '7px 14px', cursor: 'pointer', fontSize: 12,
+          }}>Open Log</button>
+        </div>
       </div>
     )
   }

src/renderer/src/highlight.ts

@@ -34,6 +34,12 @@ function ext(path: string): string {
   return i >= 0 ? base.slice(i + 1).toLowerCase() : ''
 }
 
+// Files the viewer renders as a picture (<img>) rather than as text/code.
+const IMAGE_EXT = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp', 'ico', 'avif', 'apng', 'jfif'])
+function isImage(path: string): boolean {
+  return IMAGE_EXT.has(ext(path))
+}
+
 function langFor(path: string): string | null {
   return EXT_LANG[ext(path)] || null
 }
@@ -112,4 +118,4 @@ function iconFor(path: string): IconMeta {
   return ICONS[ext(path)] || { c: '#7d838c', t: base.slice(0, 2) || '·' }
 }
 
-export const HL = { ext, langFor, langLabel, hlLine, hlText, iconFor, escapeHtml }
+export const HL = { ext, langFor, langLabel, isImage, hlLine, hlText, iconFor, escapeHtml }

src/renderer/src/log.ts

@@ -0,0 +1,75 @@
+/**
+ * Renderer → main log bridge. Everything here ends up in the SAME file the main
+ * process writes, so a crash reads as one chronological story ("git:load failed
+ * … then the render process went OOM") instead of two disconnected halves.
+ *
+ * Without this, a renderer exception only ever reached DevTools — which nobody
+ * has open at the moment things actually break.
+ */
+
+type Level = 'debug' | 'info' | 'warn' | 'error'
+
+interface ErrLike { message: string; stack?: string; name?: string }
+
+/** Structured-clone-safe: an Error survives IPC as `{}` unless unpacked here. */
+function pack(e: unknown): ErrLike | { value: string } {
+  if (e instanceof Error) {
+    const out: ErrLike = { message: e.message, name: e.name }
+    if (e.stack) out.stack = e.stack
+    return out
+  }
+  if (typeof e === 'string') return { value: e }
+  try { return { value: JSON.stringify(e) ?? String(e) } } catch { return { value: String(e) } }
+}
+
+function send(level: Level, scope: string, msg: string, ctx?: unknown): void {
+  const bridge = window.helder
+  // No bridge = browser preview (or a broken preload). Console is all we have.
+  if (!bridge?.log) {
+    const fn = level === 'error' ? console.error : level === 'warn' ? console.warn : console.log
+    fn(`[helder] ${scope}: ${msg}`, ctx ?? '')
+    return
+  }
+  try { bridge.log.write(level, scope, msg, ctx) } catch { /* never let logging throw */ }
+}
+
+export const rlog = {
+  debug: (scope: string, msg: string, ctx?: unknown): void => send('debug', scope, msg, ctx),
+  info: (scope: string, msg: string, ctx?: unknown): void => send('info', scope, msg, ctx),
+  warn: (scope: string, msg: string, ctx?: unknown): void => send('warn', scope, msg, ctx),
+  error: (scope: string, msg: string, err?: unknown, ctx?: Record<string, unknown>): void =>
+    send('error', scope, msg, err === undefined ? ctx : { ...ctx, err: pack(err) }),
+}
+
+let installed = false
+
+/** Hook the renderer's global failure paths. Call once, as early as possible. */
+export function installErrorLogging(): void {
+  if (installed) return
+  installed = true
+
+  // Uncaught throws outside React's render phase: event handlers, timers, and
+  // the async IPC callbacks that make up most of this app.
+  window.addEventListener('error', (e) => {
+    // Resource load failures (a missing font/image) arrive here with no `error`
+    // and target the element — worth a line, but they aren't exceptions.
+    if (e.error === undefined && e.target && e.target !== window) {
+      const el = e.target as HTMLElement & { src?: string; href?: string }
+      rlog.warn('resource', `failed to load ${el.tagName?.toLowerCase?.() ?? 'resource'}`, { url: el.src || el.href || '' })
+      return
+    }
+    rlog.error('renderer', e.message || 'uncaught error', e.error, { source: e.filename, line: e.lineno, col: e.colno })
+  }, true)
+
+  // The one that matters most here: every window.helder.* call is a promise, so
+  // a rejected IPC with no .catch() lands here and nowhere else.
+  window.addEventListener('unhandledrejection', (e) => {
+    rlog.error('renderer', 'unhandled promise rejection', e.reason)
+  })
+
+  rlog.info('renderer', 'window loaded', {
+    url: location.href,
+    bridge: !!window.helder,
+    screen: `${window.innerWidth}x${window.innerHeight}`,
+  })
+}

src/renderer/src/main.tsx

@@ -14,6 +14,10 @@ import './styles.css'
 import { App } from './App'
 import { ProjectProvider } from './project'
 import { ErrorBoundary } from './error-boundary'
+import { installErrorLogging } from './log'
+
+// Before the first render, so an exception during mount is already captured.
+installErrorLogging()
 
 createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

src/renderer/src/project.tsx

@@ -3,9 +3,10 @@
  * already consumed from the mock. When window.helder is absent (e.g. a plain
  * browser preview) it falls back to the mock so the UI still renders. */
 import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import type { Change, Diff, FileNode, HelderConfig } from './types'
+import type { Change, Diff, FileNode, GitStatus, HelderConfig } from './types'
-import { DEFAULT_CONFIG } from './types'
+import { DEFAULT_CONFIG, rowId } from './types'
 import { makeDiff } from './diff'
+import { rlog } from './log'
 import { PROJECT as MOCK } from './data'
 
 export interface RecentProject { path: string; name: string }
@@ -16,8 +17,13 @@ export interface ProjectData {
   branch: string
   tree: FileNode | null
   files: Record<string, string>
+  /** Git rows. One file can appear twice: staged and unstaged (see Change.id). */
   changes: Change[]
+  /** Per file: HEAD vs disk. Drives the Original and Actual views. */
   diffs: Record<string, Diff>
+  /** Per row id: that row's own pair. Drives Diff and Split. */
+  rowDiffs: Record<string, Diff>
+  /** Paths that have a staged row. */
   staged: Set<string>
   config: HelderConfig
   isRepo: boolean
@@ -72,18 +78,36 @@ export interface ProjectActions {
 
 const MOCK_STAGED = ['src/Service/PaymentService.php', 'config/app.json']
 
+/** Preview mode has no index, so each mock file is one row. The staged set says
+ * which group it lands in. */
+function mockChanges(staged: Set<string>): Change[] {
+  return MOCK.changes.map((c) => {
+    const s = staged.has(c.path)
+    return { ...c, staged: s, id: rowId(c.path, s) }
+  })
+}
+
+function mockRowDiffs(changes: Change[]): Record<string, Diff> {
+  const out: Record<string, Diff> = {}
+  for (const c of changes) out[c.id] = MOCK.diffs[c.path]
+  return out
+}
+
 function mockData(): ProjectData {
+  const staged = new Set(MOCK_STAGED)
+  const changes = mockChanges(staged)
   return {
     // non-null root so browser-preview shows the workbench, not the launcher
     name: MOCK.name, root: '/mock/' + MOCK.name, branch: MOCK.branch,
-    tree: MOCK.tree, files: MOCK.files, changes: MOCK.changes, diffs: MOCK.diffs,
+    tree: MOCK.tree, files: MOCK.files, changes, diffs: MOCK.diffs,
-    staged: new Set(MOCK_STAGED), config: DEFAULT_CONFIG, isRepo: true, ready: true, recents: [],
+    rowDiffs: mockRowDiffs(changes),
+    staged, config: DEFAULT_CONFIG, isRepo: true, ready: true, recents: [],
   }
 }
 
 const emptyData: ProjectData = {
   name: 'Loading…', root: null, branch: '—', tree: null, files: {},
-  changes: [], diffs: {}, staged: new Set(), config: DEFAULT_CONFIG, isRepo: false, ready: false, recents: [],
+  changes: [], diffs: {}, rowDiffs: {}, staged: new Set(), config: DEFAULT_CONFIG, isRepo: false, ready: false, recents: [],
 }
 
 const Ctx = createContext<{ data: ProjectData; actions: ProjectActions }>({
@@ -94,19 +118,32 @@ const Ctx = createContext<{ data: ProjectData; actions: ProjectActions }>({
 /** Map a git.load() result into the git-derived slice of ProjectData. Shared by
  * the full reload and the git-only fast path so the two stay in lockstep. */
 type GitLoadResult = Awaited<ReturnType<NonNullable<typeof window.helder>['git']['load']>>
-function deriveGit(git: GitLoadResult): Pick<ProjectData, 'branch' | 'changes' | 'diffs' | 'staged' | 'isRepo'> {
+function deriveGit(git: GitLoadResult): Pick<ProjectData, 'branch' | 'changes' | 'diffs' | 'rowDiffs' | 'staged' | 'isRepo'> {
   const changes: Change[] = []
+  const rowDiffs: Record<string, Diff> = {}
   const diffs: Record<string, Diff> = {}
   const staged = new Set<string>()
+  // File-level pair for Original vs Actual. HEAD is the staged row's left side,
+  // disk is the unstaged row's right side. With a single row both come from it,
+  // because the index then matches whichever end is missing.
+  const whole = new Map<string, { head: string; disk: string; status: GitStatus }>()
   if (git) {
     for (const c of git.changes) {
       const d = makeDiff(c.status, c.original, c.updated)
-      diffs[c.path] = d
+      const id = rowId(c.path, c.staged)
-      changes.push({ path: c.path, status: c.status, add: d.add, del: d.del, deleted: c.status === 'D' })
+      rowDiffs[id] = d
+      changes.push({ id, path: c.path, status: c.status, add: d.add, del: d.del, deleted: c.status === 'D', staged: c.staged })
       if (c.staged) staged.add(c.path)
+      const prev = whole.get(c.path)
+      if (!prev) whole.set(c.path, { head: c.original, disk: c.updated, status: c.status })
+      else if (c.staged) whole.set(c.path, { ...prev, head: c.original })
+      // The unstaged row owns the disk copy and the file-level status: a file
+      // staged as modified but deleted on disk reads as deleted.
+      else whole.set(c.path, { head: prev.head, disk: c.updated, status: c.status })
     }
   }
-  return { branch: git ? git.branch : '—', changes, diffs, staged, isRepo: !!git }
+  for (const [path, w] of whole) diffs[path] = makeDiff(w.status, w.head, w.disk)
+  return { branch: git ? git.branch : '—', changes, diffs, rowDiffs, staged, isRepo: !!git }
 }
 
 export function useProject(): ProjectData {
@@ -122,6 +159,13 @@ export function ProjectProvider({ children }: { children: React.ReactNode }): Re
   const dataRef = useRef(data)
   dataRef.current = data
   const loadSeq = useRef(0)
+  // Git has its OWN counter. It used to share loadSeq, which quietly broke ⌘R:
+  // the git poll (git.refreshInterval, 10s) and the git-column focus refresh
+  // both bump the counter, so any full reload still in flight — the tree walk is
+  // the slow part — saw seq !== loadSeq and bailed out completely. The tree then
+  // never updated while git kept looking fine. Two counters: a git-only read can
+  // no longer cancel a tree read, and each still settles on its newest result.
+  const gitSeq = useRef(0)
 
   async function loadReal(): Promise<void> {
     if (!bridge) return
@@ -130,6 +174,7 @@ export function ProjectProvider({ children }: { children: React.ReactNode }): Re
     // apply its result — otherwise a slow/transient mid-checkout read can
     // resolve last and clobber the correct settled state.
     const seq = ++loadSeq.current
+    const gseq = ++gitSeq.current
     const cur = await bridge.project.current()
     if (seq !== loadSeq.current) return
     // Bare launch (Spotlight / no project): flip ready immediately so the
@@ -146,10 +191,13 @@ export function ProjectProvider({ children }: { children: React.ReactNode }): Re
     ])
     if (seq !== loadSeq.current) return
     applyTheme(theme)
+    // The git slice is only applied if no newer git-only read has started since;
+    // otherwise keep the fresher git state and update everything else.
+    const gitFresh = gseq === gitSeq.current
     setData((d) => ({
       name: cur.name, root: cur.root,
       tree, files: d.root === cur.root ? d.files : {}, config, ready: true, recents: d.recents,
-      ...deriveGit(git),
+      ...(gitFresh ? deriveGit(git) : { branch: d.branch, changes: d.changes, diffs: d.diffs, rowDiffs: d.rowDiffs, staged: d.staged, isRepo: d.isRepo }),
     }))
     // The whole-repo content index is only a fallback (real viewing/search go
     // through fs.read + ripgrep), and reading every file serially costs seconds.
@@ -165,13 +213,13 @@ export function ProjectProvider({ children }: { children: React.ReactNode }): Re
   // re-read ONLY git status and patch the git fields, skipping the full
   // loadReal() that also re-walks the file tree + content index. This is the
   // direct, immediate refresh those actions trigger — the .git watcher stays a
-  // backstop for git changes made by external tools. Shares loadSeq so a
+  // backstop for git changes made by external tools. Uses gitSeq only, so it
-  // concurrent full reload still settles to the newest read.
+  // never cancels an in-flight full reload (see the gitSeq note above).
   async function loadGit(): Promise<void> {
     if (!bridge) return
-    const seq = ++loadSeq.current
+    const seq = ++gitSeq.current
     const git = await bridge.git.load()
-    if (seq !== loadSeq.current) return
+    if (seq !== gitSeq.current) return
     setData((d) => ({ ...d, ...deriveGit(git) }))
   }
 
@@ -200,7 +248,11 @@ export function ProjectProvider({ children }: { children: React.ReactNode }): Re
     if (!bridge) {
       // ---- mock-mode actions (preview only) ----
       const setStaged = (fn: (s: Set<string>) => Set<string>): void =>
-        setData((d) => ({ ...d, staged: fn(new Set(d.staged)) }))
+        setData((d) => {
+          const staged = fn(new Set(d.staged))
+          const changes = mockChanges(staged).filter((c) => d.changes.some((o) => o.path === c.path))
+          return { ...d, staged, changes, rowDiffs: mockRowDiffs(changes) }
+        })
       return {
         openFolder: () => {},
         openProjectPath: () => {},
@@ -209,12 +261,12 @@ export function ProjectProvider({ children }: { children: React.ReactNode }): Re
         refreshGit: () => {},
         stage: (p) => setStaged((s) => (s.add(p), s)),
         unstage: (p) => setStaged((s) => (s.delete(p), s)),
-        stageAll: () => setData((d) => ({ ...d, staged: new Set(d.changes.map((c) => c.path)) })),
+        stageAll: () => setStaged(() => new Set(dataRef.current.changes.map((c) => c.path))),
-        unstageAll: () => setData((d) => ({ ...d, staged: new Set() })),
+        unstageAll: () => setStaged(() => new Set()),
         commit: async (_msg) => {
           const cur = dataRef.current
-          const n = cur.changes.filter((c) => cur.staged.has(c.path)).length
+          const n = new Set(cur.changes.filter((c) => c.staged).map((c) => c.path)).size
-          setData((d) => ({ ...d, changes: d.changes.filter((c) => !d.staged.has(c.path)), staged: new Set() }))
+          setData((d) => ({ ...d, changes: d.changes.filter((c) => !c.staged), staged: new Set() }))
           return n
         },
         push: async () => ({ ok: true, message: 'Pushed (preview)' }),
@@ -242,8 +294,9 @@ export function ProjectProvider({ children }: { children: React.ReactNode }): Re
       stage: (p) => after(bridge.git.stage([p])),
       unstage: (p) => after(bridge.git.unstage([p])),
       stageAll: () => {
-        const cur = dataRef.current
+        // Every path with an unstaged row — including files that already have a
-        const unstaged = cur.changes.filter((c) => !cur.staged.has(c.path)).map((c) => c.path)
+        // staged row and were edited again since.
+        const unstaged = [...new Set(dataRef.current.changes.filter((c) => !c.staged).map((c) => c.path))]
         if (unstaged.length) after(bridge.git.stage(unstaged))
       },
       unstageAll: () => {
@@ -252,7 +305,7 @@ export function ProjectProvider({ children }: { children: React.ReactNode }): Re
       },
       commit: async (msg) => {
         const cur = dataRef.current
-        const n = cur.changes.filter((c) => cur.staged.has(c.path)).length
+        const n = new Set(cur.changes.filter((c) => c.staged).map((c) => c.path)).size
         await bridge.git.commit(msg)
         await loadGit()
         return n
@@ -267,14 +320,17 @@ export function ProjectProvider({ children }: { children: React.ReactNode }): Re
         if (dataRef.current.files[path] != null) return
         bridge.fs.read(path).then((txt) => {
           setData((d) => (d.files[path] != null ? d : { ...d, files: { ...d.files, [path]: txt } }))
-        }).catch(() => {})
+        }).catch((e) => rlog.error('fs', 'prime read failed', e, { path }))
       },
       reloadFile: async (path) => {
         try {
           const txt = await bridge.fs.read(path)
           setData((d) => ({ ...d, files: { ...d.files, [path]: txt } }))
           return txt
-        } catch {
+        } catch (e) {
+          // Falling back to the cached copy means the editor shows content that
+          // is NOT what's on disk — a save from here can clobber. Worth a line.
+          rlog.error('fs', 'reload failed — serving cached content', e, { path })
           return dataRef.current.files[path] ?? ''
         }
       },

src/renderer/src/styles.css

@@ -119,14 +119,27 @@ body {
 
 .workbench { flex:1; display:flex; min-height:0; }
 
-.col { display:flex; flex-direction:column; height:100%; min-width:0; background:var(--bg-2); }
+/* --col-bg holds each column's resting background so the ⌘R flash below can
+   animate back to it, whichever state the column is in. */
+.col { display:flex; flex-direction:column; height:100%; min-width:0; --col-bg:var(--bg-2); background:var(--col-bg); }
 /* Editor (C) shares the side panels' background (--bg-2), matching B (and A). */
 .col.editor-col { flex:1; min-width:240px; }
-.col.right-col { background:var(--bg-1); }
+.col.right-col { --col-bg:var(--bg-1); background:var(--col-bg); }
 /* Active panel: subtle lighter-gray tint on the focused column. C uses the same
    tint as the side panels, so the file view stays in step with B in/out of focus. */
-.col.panel-active { background:#22252a; }
+.col.panel-active { --col-bg:#22252a; background:var(--col-bg); }
-.col.right-col.panel-active { background:#1e2024; }
+.col.right-col.panel-active { --col-bg:#1e2024; background:var(--col-bg); }
+
+/* ⌘R refresh flash: A, B and C blink light grey and fade back. Two identical
+   animations (a/b) alternate so a second ⌘R replays it — a CSS animation only
+   restarts when the animation-name changes. */
+.col.refresh-flash-a { animation:col-refresh-a 260ms ease-out; }
+.col.refresh-flash-b { animation:col-refresh-b 260ms ease-out; }
+@keyframes col-refresh-a { 0% { background:#3a4048; } 100% { background:var(--col-bg); } }
+@keyframes col-refresh-b { 0% { background:#3a4048; } 100% { background:var(--col-bg); } }
+@media (prefers-reduced-motion:reduce) {
+  .col.refresh-flash-a, .col.refresh-flash-b { animation-duration:180ms; animation-timing-function:steps(2); }
+}
 
 .splitter { flex:0 0 5px; cursor:col-resize; background:transparent; position:relative; z-index:5; }
 .splitter::after { content:""; position:absolute; inset:0 2px; background:var(--border); transition:background .12s; }
@@ -245,6 +258,26 @@ body {
 .diff-bar .seg button.on { background:var(--accent-soft); color:var(--fg-0); }
 .diff-bar .seg .split-btn svg { opacity:.85; }
 .diff-bar .db-lang { font-family:var(--mono); font-size:10.5px; color:var(--fg-3); letter-spacing:.02em; }
+/* Which pair the diff compares. Only shown when a file is staged AND edited
+   again, so the two git rows can be told apart. */
+.db-side {
+  font-family:var(--mono); font-size:10px; color:var(--fg-3); letter-spacing:.02em;
+  padding:1px 5px; border:1px solid var(--border); border-radius:4px; white-space:nowrap;
+}
+
+/* image preview (viewer shows a picture, not text) */
+.img-view { flex:1; min-height:0; overflow:auto; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg-0); }
+.img-view-img {
+  max-width:100%; max-height:100%; object-fit:contain; border-radius:6px;
+  /* Checkerboard so transparent PNGs/SVGs read clearly on the dark surface. */
+  background-color:#2a2d33;
+  background-image:
+    linear-gradient(45deg, #232529 25%, transparent 25%), linear-gradient(-45deg, #232529 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #232529 75%), linear-gradient(-45deg, transparent 75%, #232529 75%);
+  background-size:20px 20px;
+  background-position:0 0, 0 10px, 10px -10px, -10px 0;
+  box-shadow:0 4px 24px rgba(0,0,0,.4);
+}
 
 /* rendered-markdown preview (Preview view option) */
 .md-view { flex:1; overflow:auto; padding:8px 0 48px; }
@@ -448,7 +481,9 @@ body {
 .ce-gutter { padding-top:6px; will-change:transform; }
 .ce-gutter div { height:20px; line-height:20px; text-align:right; padding-right:14px; color:var(--fg-3); font-family:var(--code-font); font-size:12px; user-select:none; }
 .ce-scroll { flex:1; min-width:0; overflow:auto; position:relative; }
-.ce-inner { position:relative; width:max-content; min-width:100%; }
+/* min-height keeps the inset:0 textarea filling the pane on short/empty files,
+   so a click anywhere in the blank area below the last line still lands. */
+.ce-inner { position:relative; width:max-content; min-width:100%; min-height:100%; }
 .ce-pre, .ce-ta {
   margin:0; padding:6px 16px 40px 6px; border:0;
   font-family:var(--code-font); font-size:var(--code-size); line-height:20px;

src/renderer/src/types.ts

@@ -45,6 +45,21 @@ export interface Change {
   add: number
   del: number
   deleted: boolean
+  /** True when this row is the staged half of the file. A file that is staged
+   * and then edited again produces two rows, one in each group. */
+  staged: boolean
+  /** Row identity. Path alone is no longer unique — see `staged`. */
+  id: string
+}
+
+/** Which half of a file's changes a diff view shows. `staged` is HEAD vs the
+ * index, `unstaged` is the index vs disk. Absent means the whole file: HEAD vs
+ * disk, which is what Original and Actual always show. */
+export type DiffSide = 'staged' | 'unstaged'
+
+/** Row id for a git change. Keeps the two halves of one file apart. */
+export function rowId(path: string, staged: boolean): string {
+  return (staged ? 's:' : 'w:') + path
 }
 
 export interface Project {
@@ -71,7 +86,7 @@ export type DiffMode = 'original' | 'updated' | 'diff'
 export interface HelderConfig {
   ai: { command: string; autoLaunch: boolean }
   editor: { autoSave: boolean; tabSize: number }
-  git: { confirmDiscard: boolean; confirmStage: boolean; confirmUnstage: boolean; defaultDiffMode: DiffMode }
+  git: { confirmDiscard: boolean; confirmStage: boolean; confirmUnstage: boolean; defaultDiffMode: DiffMode; refreshInterval: number }
   files: { exclude: string[]; followGitignore: boolean }
   terminal: { shell: string | null }
   session: { restoreOnLaunch: boolean }
@@ -80,7 +95,7 @@ export interface HelderConfig {
 export const DEFAULT_CONFIG: HelderConfig = {
   ai: { command: 'claude', autoLaunch: true },
   editor: { autoSave: false, tabSize: 4 },
-  git: { confirmDiscard: true, confirmStage: false, confirmUnstage: false, defaultDiffMode: 'diff' },
+  git: { confirmDiscard: true, confirmStage: false, confirmUnstage: false, defaultDiffMode: 'diff', refreshInterval: 10000 },
   files: { exclude: [], followGitignore: true },
   terminal: { shell: null },
   session: { restoreOnLaunch: true },

test/git-two-rows.test.tsx

@@ -0,0 +1,167 @@
+// @vitest-environment jsdom
+//
+// A file can be staged and then edited again. Git calls that "MM": two rows,
+// one per group. These tests drive the renderer with such a payload and check
+// that Diff follows the row you clicked, while Original and Actual do not.
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
+import React from 'react'
+
+vi.mock('../src/renderer/src/terminals', () => {
+  let n = 0
+  return { Terminal: () => null, lid: () => ++n }
+})
+
+import { App } from '../src/renderer/src/App'
+import { ProjectProvider } from '../src/renderer/src/project'
+
+const HEAD = 'a\nb\nc\n'
+const INDEX = 'a\nSTAGED\nc\n'
+const DISK = 'a\nSTAGED\nc\nAFTER-STAGING\n'
+
+/** Minimal preload bridge: enough for the store to boot with real git rows. */
+function stubBridge(): void {
+  const noop = (): void => {}
+  const off = (): (() => void) => noop
+  ;(window as unknown as { helder: unknown }).helder = {
+    platform: 'darwin',
+    clipboard: { writeText: noop, readText: () => '' },
+    project: {
+      current: async () => ({ root: '/repo', name: 'repo' }),
+      open: async () => ({ root: '/repo', name: 'repo' }),
+      openPath: async () => ({ root: '/repo', name: 'repo' }),
+      recent: async () => [],
+    },
+    fs: {
+      tree: async () => ({ name: 'repo', type: 'dir', path: '', children: [{ name: 'demo.txt', type: 'file', path: 'demo.txt' }] }),
+      readDir: async () => [],
+      files: async () => ({ 'demo.txt': DISK }),
+      read: async () => DISK,
+      imageDataUrl: async () => '',
+      write: async () => {},
+      delete: async () => {},
+      create: async () => {},
+      mkdir: async () => {},
+    },
+    shell: { reveal: noop },
+    git: {
+      // Exactly what git-service now returns for porcelain "MM".
+      load: async () => ({
+        branch: 'main',
+        changes: [
+          { path: 'demo.txt', status: 'M', staged: true, original: HEAD, updated: INDEX },
+          { path: 'demo.txt', status: 'M', staged: false, original: INDEX, updated: DISK },
+        ],
+      }),
+      stage: async () => {}, unstage: async () => {}, commit: async () => {},
+      push: async () => ({ ok: true, message: '' }), discard: async () => {},
+    },
+    pty: { available: async () => false, create: async () => 1, write: noop, resize: noop, kill: noop, onData: off, onExit: off },
+    config: { get: async () => (await import('../src/renderer/src/types')).DEFAULT_CONFIG, theme: async () => '' },
+    recent: { get: async () => [], set: async () => {} },
+    search: { content: async () => [], files: async () => [] },
+    dialog: { unsavedClose: async () => 'cancel' },
+    log: { write: noop, path: async () => null, open: async () => {}, reveal: async () => {} },
+    onProjectChanged: off,
+    onConfigChanged: off,
+    onRefresh: off,
+  }
+}
+
+beforeAll(() => {
+  globalThis.ResizeObserver = class { observe(): void {} unobserve(): void {} disconnect(): void {} } as never
+  if (!Element.prototype.scrollIntoView) Element.prototype.scrollIntoView = (): void => {}
+})
+beforeEach(stubBridge)
+afterEach(() => {
+  cleanup()
+  localStorage.clear()
+  delete (window as unknown as { helder?: unknown }).helder
+})
+
+/** Row text of the view currently on screen. */
+function viewText(c: HTMLElement): string {
+  return Array.from(c.querySelectorAll('.editor .ln-row')).map((el) => el.textContent ?? '').join('\n')
+}
+
+function group(c: HTMLElement, label: 'Staged Changes' | 'Changes'): HTMLElement[] {
+  const heads = Array.from(c.querySelectorAll<HTMLElement>('.git-group'))
+  const head = heads.find((h) => h.textContent?.startsWith(label))!
+  const rows: HTMLElement[] = []
+  for (let el = head.nextElementSibling; el; el = el.nextElementSibling) {
+    if (el.classList.contains('git-group') || el.classList.contains('git-divider')) break
+    if (el.classList.contains('git-row')) rows.push(el as HTMLElement)
+  }
+  return rows
+}
+
+async function boot(): Promise<HTMLElement> {
+  const c = render(<ProjectProvider><App /></ProjectProvider>).container
+  await waitFor(() => {
+    if (c.querySelectorAll('.git-row').length < 2) throw new Error('git not ready')
+  })
+  return c
+}
+
+describe('a file that is staged and then edited again', () => {
+  it('shows up in both groups', async () => {
+    const c = await boot()
+    expect(group(c, 'Staged Changes').map((r) => r.getAttribute('title'))).toEqual(['demo.txt'])
+    expect(group(c, 'Changes').map((r) => r.getAttribute('title'))).toEqual(['demo.txt'])
+  })
+
+  it('Diff on the staged row compares HEAD with the staged copy', async () => {
+    const c = await boot()
+    fireEvent.click(group(c, 'Staged Changes')[0])
+    await waitFor(() => expect(c.querySelector('.diff-bar')).toBeTruthy())
+    const text = viewText(c)
+    expect(text).toContain('b')
+    expect(text).toContain('STAGED')
+    // The later edit is not part of what is staged, so it must not show here.
+    expect(text).not.toContain('AFTER-STAGING')
+  })
+
+  it('Diff on the unstaged row compares the staged copy with disk', async () => {
+    const c = await boot()
+    fireEvent.click(group(c, 'Changes')[0])
+    await waitFor(() => expect(c.querySelector('.diff-bar')).toBeTruthy())
+    const text = viewText(c)
+    expect(text).toContain('AFTER-STAGING')
+    // 'b' was already replaced before staging, so this half must not mention it.
+    expect(text.split('\n').some((l) => l.trim() === 'b')).toBe(false)
+  })
+
+  it('labels which pair the diff is comparing', async () => {
+    const c = await boot()
+    fireEvent.click(group(c, 'Staged Changes')[0])
+    await waitFor(() => expect(c.querySelector('.db-side')?.textContent).toBe('HEAD → staged'))
+    fireEvent.click(group(c, 'Changes')[0])
+    await waitFor(() => expect(c.querySelector('.db-side')?.textContent).toBe('staged → actual'))
+  })
+
+  it('Original stays HEAD and Actual stays the file on disk, from either row', async () => {
+    const c = await boot()
+    for (const label of ['Staged Changes', 'Changes'] as const) {
+      fireEvent.click(group(c, label)[0])
+      await waitFor(() => expect(c.querySelector('.diff-bar')).toBeTruthy())
+
+      const original = Array.from(c.querySelectorAll<HTMLElement>('.seg button')).find((b) => b.textContent === 'Original')!
+      fireEvent.click(original)
+      await waitFor(() => expect(viewText(c)).toContain('b'))
+      expect(viewText(c)).not.toContain('AFTER-STAGING')
+
+      const actual = Array.from(c.querySelectorAll<HTMLElement>('.seg button')).find((b) => b.textContent === 'Actual')!
+      fireEvent.click(actual)
+      await waitFor(() => expect(c.querySelector('.ce-ta')).toBeTruthy())
+      expect((c.querySelector('.ce-ta') as HTMLTextAreaElement).value).toBe(DISK)
+    }
+  })
+
+  it('only the row you opened is highlighted', async () => {
+    const c = await boot()
+    fireEvent.click(group(c, 'Changes')[0])
+    await waitFor(() => expect(c.querySelector('.git-row.active')).toBeTruthy())
+    expect(c.querySelectorAll('.git-row.active')).toHaveLength(1)
+    expect(group(c, 'Changes')[0].classList.contains('active')).toBe(true)
+  })
+})

test/git.test.ts

@@ -9,17 +9,33 @@ import { classify, discard, load, stage } from '../src/main/git-service'
 
 describe('classify', () => {
   it('reads the index code as staged, working code as unstaged', () => {
-    expect(classify('M', ' ')).toEqual({ letter: 'M', staged: true })
+    expect(classify('M', ' ')).toEqual([{ letter: 'M', staged: true }])
-    expect(classify(' ', 'M')).toEqual({ letter: 'M', staged: false })
+    expect(classify(' ', 'M')).toEqual([{ letter: 'M', staged: false }])
-    expect(classify('A', ' ')).toEqual({ letter: 'A', staged: true })
+    expect(classify('A', ' ')).toEqual([{ letter: 'A', staged: true }])
-    expect(classify('D', ' ')).toEqual({ letter: 'D', staged: true })
+    expect(classify('D', ' ')).toEqual([{ letter: 'D', staged: true }])
-    expect(classify('R', ' ')).toEqual({ letter: 'R', staged: true })
+    expect(classify('R', ' ')).toEqual([{ letter: 'R', staged: true }])
   })
   it('treats untracked as a new (A) unstaged file', () => {
-    expect(classify('?', '?')).toEqual({ letter: 'A', staged: false })
+    expect(classify('?', '?')).toEqual([{ letter: 'A', staged: false }])
   })
-  it('maps unmerged (U) to modified', () => {
+  it('splits a staged-then-edited file into two rows', () => {
-    expect(classify('U', 'U').letter).toBe('M')
+    expect(classify('M', 'M')).toEqual([
+      { letter: 'M', staged: true },
+      { letter: 'M', staged: false },
+    ])
+    expect(classify('A', 'M')).toEqual([
+      { letter: 'A', staged: true },
+      { letter: 'M', staged: false },
+    ])
+    expect(classify('M', 'D')).toEqual([
+      { letter: 'M', staged: true },
+      { letter: 'D', staged: false },
+    ])
+  })
+  it('keeps a merge conflict as one row', () => {
+    expect(classify('U', 'U')).toEqual([{ letter: 'M', staged: true }])
+    expect(classify('A', 'A')).toEqual([{ letter: 'M', staged: true }])
+    expect(classify('D', 'D')).toEqual([{ letter: 'M', staged: true }])
   })
 })
 
@@ -77,6 +93,51 @@ describe('load (integration against a temp repo)', () => {
     expect(res!.changes.find((c) => c.path === 'a.txt')?.staged).toBe(true)
   })
 
+  it('shows a staged-then-edited file in both groups, each with its own pair', async () => {
+    dir = await repo()
+    await writeFile(join(dir, 'a.txt'), '1\nSTAGED\n3\n')
+    await stage(dir, ['a.txt'])
+    await writeFile(join(dir, 'a.txt'), '1\nSTAGED\n3\n4\n')
+    const res = await load(dir)
+    const rows = res!.changes.filter((c) => c.path === 'a.txt')
+    expect(rows).toHaveLength(2)
+
+    // Staged row: HEAD -> index. It must NOT include the newer edit.
+    const s = rows.find((c) => c.staged)!
+    expect(s.original).toBe('1\n2\n3\n')
+    expect(s.updated).toBe('1\nSTAGED\n3\n')
+
+    // Unstaged row: index -> disk. Only the newer edit.
+    const w = rows.find((c) => !c.staged)!
+    expect(w.original).toBe('1\nSTAGED\n3\n')
+    expect(w.updated).toBe('1\nSTAGED\n3\n4\n')
+  })
+
+  it('gives a staged-new file that was edited again both rows', async () => {
+    dir = await repo()
+    await writeFile(join(dir, 'fresh.txt'), 'one\n')
+    await stage(dir, ['fresh.txt'])
+    await writeFile(join(dir, 'fresh.txt'), 'one\ntwo\n')
+    const res = await load(dir)
+    const rows = res!.changes.filter((c) => c.path === 'fresh.txt')
+    expect(rows.map((r) => [r.status, r.staged])).toEqual([['A', true], ['M', false]])
+    expect(rows[0].original).toBe('')
+    expect(rows[0].updated).toBe('one\n')
+    expect(rows[1].original).toBe('one\n')
+    expect(rows[1].updated).toBe('one\ntwo\n')
+  })
+
+  it('keeps one row when a file is only staged', async () => {
+    dir = await repo()
+    await writeFile(join(dir, 'a.txt'), '1\n2\n3\n4\n')
+    await stage(dir, ['a.txt'])
+    const rows = (await load(dir))!.changes.filter((c) => c.path === 'a.txt')
+    expect(rows).toHaveLength(1)
+    expect(rows[0].staged).toBe(true)
+    expect(rows[0].original).toBe('1\n2\n3\n')
+    expect(rows[0].updated).toBe('1\n2\n3\n4\n')
+  })
+
   it('discard reverts a modified tracked file to HEAD', async () => {
     dir = await repo()
     await writeFile(join(dir, 'a.txt'), '1\nCHANGED\n3\n')

test/logger.test.ts

@@ -0,0 +1,151 @@
+import { describe, expect, it, beforeEach, afterEach } from 'vitest'
+import { mkdtempSync, readFileSync, rmSync, existsSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { _resetLogger, formatErr, formatLine, getLogPath, initLogger, log, logger } from '../src/main/logger'
+
+let dir: string
+
+beforeEach(() => {
+  dir = mkdtempSync(join(tmpdir(), 'helder-log-'))
+  _resetLogger()
+})
+afterEach(() => {
+  _resetLogger()
+  rmSync(dir, { recursive: true, force: true })
+})
+
+function read(): string {
+  return readFileSync(join(dir, 'helder.log'), 'utf8')
+}
+
+describe('formatLine', () => {
+  it('lays out ts, padded level, pid, scope and message', () => {
+    const line = formatLine('info', 'git', 'loaded', undefined, 42, '2026-07-15T10:00:00.000Z')
+    expect(line).toBe('2026-07-15T10:00:00.000Z INFO     42 git       loaded\n')
+  })
+
+  it('appends context as JSON', () => {
+    const line = formatLine('warn', 'ipc', 'slow', { ms: 1200 }, 7, '2026-07-15T10:00:00.000Z')
+    expect(line).toContain('{"ms":1200}')
+    expect(line.endsWith('\n')).toBe(true)
+  })
+
+  it('indents a multi-line message so a continuation never looks like a new entry', () => {
+    // Electron's own console warnings arrive with embedded newlines.
+    const line = formatLine('warn', 'console', 'line one\nline two', undefined, 1, 'T')
+    expect(line).toBe('T WARN      1 console   line one\n    line two\n')
+    // Every line after the first is indented → an entry always starts at col 0.
+    for (const l of line.trimEnd().split('\n').slice(1)) expect(l.startsWith('    ')).toBe(true)
+  })
+
+  it('indents multi-line context too', () => {
+    const line = formatLine('error', 'x', 'boom', { stack: 'a\nb' }, 1, 'T')
+    // JSON escapes the \n inside the string value, so this stays a single line.
+    expect(line.split('\n').filter(Boolean)).toHaveLength(1)
+  })
+})
+
+describe('formatErr', () => {
+  it('keeps message and stack', () => {
+    const e = new Error('nope')
+    const out = formatErr(e)
+    expect(out.message).toBe('nope')
+    expect(out.stack).toContain('nope')
+  })
+
+  it('follows cause — the line that usually explains the failure', () => {
+    const root = new Error('EACCES')
+    const e = new Error('save failed', { cause: root })
+    expect(formatErr(e).cause).toContain('EACCES')
+  })
+
+  it('survives a thrown string', () => {
+    expect(formatErr('just a string').message).toBe('just a string')
+  })
+
+  it('survives a thrown non-Error object', () => {
+    expect(formatErr({ code: 7 }).message).toBe('{"code":7}')
+  })
+
+  it('does not throw on circular values', () => {
+    const a: Record<string, unknown> = {}
+    a.self = a
+    expect(() => formatErr(a)).not.toThrow()
+    expect(formatErr(a).message).toContain('Circular')
+  })
+})
+
+describe('log', () => {
+  it('creates the file and appends lines', () => {
+    initLogger({ dir })
+    logger.info('boot', 'hello')
+    logger.warn('boot', 'careful')
+    const out = read()
+    expect(out).toContain('INFO')
+    expect(out).toContain('hello')
+    expect(out).toContain('WARN')
+    expect(out.trim().split('\n')).toHaveLength(2)
+  })
+
+  it('creates a missing directory', () => {
+    const nested = join(dir, 'a', 'b')
+    initLogger({ dir: nested })
+    logger.info('x', 'y')
+    expect(existsSync(join(nested, 'helder.log'))).toBe(true)
+  })
+
+  it('records the error with its stack', () => {
+    initLogger({ dir })
+    logger.error('save', 'write failed', new Error('EACCES: permission denied'), { path: 'a.ts' })
+    const out = read()
+    expect(out).toContain('EACCES: permission denied')
+    expect(out).toContain('"path":"a.ts"')
+    expect(out).toContain('"stack"')
+  })
+
+  it('honours the level floor', () => {
+    initLogger({ dir, level: 'warn' })
+    logger.debug('x', 'debug line')
+    logger.info('x', 'info line')
+    logger.error('x', 'error line')
+    const out = read()
+    expect(out).not.toContain('debug line')
+    expect(out).not.toContain('info line')
+    expect(out).toContain('error line')
+  })
+
+  it('is a no-op before initLogger rather than throwing', () => {
+    expect(() => logger.info('x', 'y')).not.toThrow()
+    expect(getLogPath()).toBeNull()
+  })
+
+  it('exposes the active path', () => {
+    initLogger({ dir })
+    expect(getLogPath()).toBe(join(dir, 'helder.log'))
+  })
+
+  it('never throws even when the log path is unwritable', () => {
+    // Point at a path whose parent is a FILE: every append must fail.
+    const wall = join(dir, 'wall')
+    writeFileSync(wall, 'x')
+    initLogger({ dir: join(wall, 'sub') })
+    expect(() => logger.error('x', 'still fine')).not.toThrow()
+  })
+})
+
+describe('rotation', () => {
+  it('rolls the file once it passes the size cap and keeps writing', () => {
+    initLogger({ dir })
+    const big = 'x'.repeat(4000)
+    // 2MB cap / ~4KB per line → ~525 lines to trip it. 700 is comfortably past.
+    for (let i = 0; i < 700; i++) log('info', 'bulk', big)
+
+    expect(existsSync(join(dir, 'helder.1.log'))).toBe(true)
+    // The live file is the post-rotation one and is still being appended to.
+    logger.info('after', 'still logging')
+    expect(read()).toContain('still logging')
+    // And it's small again — proof the rotation actually moved the bytes.
+    expect(read().length).toBeLessThan(4000 * 700)
+  })
+})