From fb3d31ba8b772bbca130f829423df7e61afd7820 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Sun, 21 Jun 2026 09:26:31 -0500
Subject: [PATCH 1/5] feat(desktop): add Update now button to About panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The About > Updates panel only surfaced "See what's new" when an update
was available, which just opens the changelog overlay — there was no way
to start the install directly from About. Add an "Update now" primary
button that opens the updates overlay (for apply progress) and kicks off
the install for the active target (backend in remote mode, else client).
---
 apps/desktop/src/app/settings/about-settings.tsx | 14 ++++++++++----
 apps/desktop/src/i18n/en.ts                      |  1 +
 apps/desktop/src/i18n/ja.ts                      |  1 +
 apps/desktop/src/i18n/types.ts                   |  1 +
 apps/desktop/src/i18n/zh-hant.ts                 |  1 +
 apps/desktop/src/i18n/zh.ts                      |  1 +
 apps/desktop/src/store/updates.ts                | 14 ++++++++++++++
 7 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/app/settings/about-settings.tsx b/apps/desktop/src/app/settings/about-settings.tsx
index cef90450ef2..c1d56115d6c 100644
--- a/apps/desktop/src/app/settings/about-settings.tsx
+++ b/apps/desktop/src/app/settings/about-settings.tsx
@@ -13,7 +13,8 @@ import {
   $updateStatus,
   checkUpdates,
   openUpdatesWindow,
-  refreshDesktopVersion
+  refreshDesktopVersion,
+  startActiveUpdate
 } from '@/store/updates'
 
 import { ListRow, SectionHeading, SettingsContent } from './primitives'
@@ -141,9 +142,14 @@ export function AboutSettings() {
             </Button>
 
             {behind > 0 && supported && !applying && (
-              <Button onClick={() => openUpdatesWindow()} size="sm">
-                {a.seeWhatsNew}
-              </Button>
+              <>
+                <Button onClick={() => startActiveUpdate()} size="sm">
+                  {a.updateNow}
+                </Button>
+                <Button onClick={() => openUpdatesWindow()} size="sm" variant="textStrong">
+                  {a.seeWhatsNew}
+                </Button>
+              </>
             )}
 
             <Button asChild className="ml-auto" size="sm" variant="text">
diff --git a/apps/desktop/src/i18n/en.ts b/apps/desktop/src/i18n/en.ts
index 704ed5f8e56..ea2a6f745bb 100644
--- a/apps/desktop/src/i18n/en.ts
+++ b/apps/desktop/src/i18n/en.ts
@@ -384,6 +384,7 @@ export const en: Translations = {
       checkNow: 'Check now',
       checking: 'Checking…',
       seeWhatsNew: "See what's new",
+      updateNow: 'Update now',
       releaseNotes: 'Release notes',
       onLatest: "You're on the latest version.",
       installing: 'An update is currently installing.',
diff --git a/apps/desktop/src/i18n/ja.ts b/apps/desktop/src/i18n/ja.ts
index a3109b94ffa..b02f90486d9 100644
--- a/apps/desktop/src/i18n/ja.ts
+++ b/apps/desktop/src/i18n/ja.ts
@@ -506,6 +506,7 @@ export const ja = defineLocale({
       checkNow: '今すぐ確認',
       checking: '確認中…',
       seeWhatsNew: '新機能を見る',
+      updateNow: '今すぐ更新',
       releaseNotes: 'リリースノート',
       onLatest: '最新バージョンです。',
       installing: '更新をインストール中です。',
diff --git a/apps/desktop/src/i18n/types.ts b/apps/desktop/src/i18n/types.ts
index 7cb915b6ac3..d03568d6d35 100644
--- a/apps/desktop/src/i18n/types.ts
+++ b/apps/desktop/src/i18n/types.ts
@@ -281,6 +281,7 @@ export interface Translations {
       checkNow: string
       checking: string
       seeWhatsNew: string
+      updateNow: string
       releaseNotes: string
       onLatest: string
       installing: string
diff --git a/apps/desktop/src/i18n/zh-hant.ts b/apps/desktop/src/i18n/zh-hant.ts
index 23fc6027b42..f739bfa8e5f 100644
--- a/apps/desktop/src/i18n/zh-hant.ts
+++ b/apps/desktop/src/i18n/zh-hant.ts
@@ -494,6 +494,7 @@ export const zhHant = defineLocale({
       checkNow: '立即檢查',
       checking: '檢查中…',
       seeWhatsNew: '查看新增內容',
+      updateNow: '立即更新',
       releaseNotes: '發行說明',
       onLatest: '你已是最新版本。',
       installing: '正在安裝更新。',
diff --git a/apps/desktop/src/i18n/zh.ts b/apps/desktop/src/i18n/zh.ts
index 271ca9e4899..5cf9e23d982 100644
--- a/apps/desktop/src/i18n/zh.ts
+++ b/apps/desktop/src/i18n/zh.ts
@@ -582,6 +582,7 @@ export const zh: Translations = {
       checkNow: '立即检查',
       checking: '检查中…',
       seeWhatsNew: '查看新增内容',
+      updateNow: '立即更新',
       releaseNotes: '发行说明',
       onLatest: '你已是最新版本。',
       installing: '正在安装更新。',
diff --git a/apps/desktop/src/store/updates.ts b/apps/desktop/src/store/updates.ts
index b9338314e70..f83b27e76e0 100644
--- a/apps/desktop/src/store/updates.ts
+++ b/apps/desktop/src/store/updates.ts
@@ -195,6 +195,20 @@ export function openUpdatesWindow(): void {
   openUpdateOverlayFor(isRemoteMode() ? 'backend' : 'client')
 }
 
+/**
+ * Start applying the available update for the active target right away. Opens
+ * the updates overlay first so the user sees apply progress (the overlay
+ * renders ApplyingView once `applying` flips true), then kicks off the install.
+ * Used by the "Update now" affordance on the About panel, which would otherwise
+ * only be able to open the changelog overlay.
+ */
+export function startActiveUpdate(): void {
+  const target: UpdateTarget = isRemoteMode() ? 'backend' : 'client'
+  $updateOverlayTarget.set(target)
+  $updateOverlayOpen.set(true)
+  void (target === 'backend' ? applyBackendUpdate() : applyUpdates())
+}
+
 /** Re-read the running app's version from the Electron main process and
  *  publish it on `$desktopVersion`. Called when the About panel mounts, the
  *  update flow finishes, and the window regains focus, so the About text

From a61baa96157241c2e422fd85b3527bee14b41c62 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Mon, 22 Jun 2026 05:04:13 -0500
Subject: [PATCH 2/5] feat(desktop): PR-style file diffs in chat

Render write_file/edit_file/patch as a reviewable diff instead of raw
result JSON, closer to a Cursor/T3 per-edit review.

- Unified diff via FileDiffPanel: strip git file-header + @@ hunk noise,
  drop the +/- gutter, color by line with a 2px gutter accent, full-bleed
  to the card, transparent context lines, compact scroll height.
- Header shows filename + language icon + +N/-N stats; full path moves to
  a hover tooltip (no Edited verb, no ms).
- Treat the three file-edit tools uniformly (isFileEditTool); read diff
  from inline_diff or patch's diff field; suppress raw-arg detail.
- Reusable FileTypeIcon primitive sharing the code-block icon mapping
  (codiconForFilename), codicon fallback.
- Per-row scaffolding fade (not the group wrapper, which trapped child
  opacity); expanded edits stay full, collapsed fade; keyboard-only focus
  lift. Hide diff-less rehydrated creates that read as dupes.
---
 .../assistant-ui/tool-fallback-model.test.ts  |  55 +++++++-
 .../assistant-ui/tool-fallback-model.ts       | 122 +++++++++++++++---
 .../components/assistant-ui/tool-fallback.tsx | 104 ++++++++++++---
 .../src/components/chat/diff-lines.tsx        | 122 +++++++++++++++++-
 .../src/components/ui/file-type-icon.tsx      |  22 ++++
 apps/desktop/src/lib/markdown-code.ts         |  50 +++++++
 apps/desktop/src/styles.css                   |  26 +++-
 7 files changed, 451 insertions(+), 50 deletions(-)
 create mode 100644 apps/desktop/src/components/ui/file-type-icon.tsx

diff --git a/apps/desktop/src/components/assistant-ui/tool-fallback-model.test.ts b/apps/desktop/src/components/assistant-ui/tool-fallback-model.test.ts
index 55b7755973e..bf4409384c0 100644
--- a/apps/desktop/src/components/assistant-ui/tool-fallback-model.test.ts
+++ b/apps/desktop/src/components/assistant-ui/tool-fallback-model.test.ts
@@ -1,6 +1,11 @@
 import { describe, expect, it } from 'vitest'
 
-import { buildToolView, type ToolPart } from './tool-fallback-model'
+import {
+  buildToolView,
+  countDiffLineStats,
+  inlineDiffFromResult,
+  type ToolPart
+} from './tool-fallback-model'
 
 const part = (overrides: Partial<ToolPart>): ToolPart => ({
   args: {},
@@ -64,3 +69,51 @@ describe('buildToolView terminal exit-code status', () => {
     )
   })
 })
+
+describe('buildToolView file edit diffs', () => {
+  const patchDiff = '--- a/src/demo.ts\n+++ b/src/demo.ts\n@@ -1 +1 @@\n-old\n+new'
+
+  it('reads inline_diff and diff fields from patch results', () => {
+    expect(inlineDiffFromResult({ inline_diff: patchDiff })).toBe(patchDiff)
+    expect(inlineDiffFromResult({ diff: patchDiff })).toBe(patchDiff)
+  })
+
+  it('suppresses raw patch args when a diff is available', () => {
+    const view = buildToolView(
+      part({
+        args: { context: 'src/demo.ts', mode: 'replace', new_string: 'new', path: 'src/demo.ts' },
+        result: { diff: patchDiff, success: true },
+        toolName: 'patch'
+      }),
+      patchDiff
+    )
+
+    expect(view.title).toBe('demo.ts')
+    expect(view.subtitle).toBe('src/demo.ts')
+    expect(view.detail).toBe('')
+    expect(view.inlineDiff).toBe(patchDiff)
+  })
+
+  it('shows path subtitle instead of patch args JSON while pending', () => {
+    const view = buildToolView(
+      part({
+        args: { context: 'src/demo.ts', mode: 'replace', new_string: 'new', path: 'src/demo.ts' },
+        result: undefined,
+        toolName: 'patch'
+      }),
+      ''
+    )
+
+    expect(view.title).toBe('demo.ts')
+    expect(view.subtitle).toBe('src/demo.ts')
+    expect(view.detail).toBe('')
+  })
+})
+
+describe('countDiffLineStats', () => {
+  it('counts added and removed lines', () => {
+    expect(
+      countDiffLineStats(`--- a/x\n+++ b/x\n@@\n-old\n+new\n context\n+another`)
+    ).toEqual({ added: 2, removed: 1 })
+  })
+})
diff --git a/apps/desktop/src/components/assistant-ui/tool-fallback-model.ts b/apps/desktop/src/components/assistant-ui/tool-fallback-model.ts
index 3618d8011fb..6e67b0b9a4b 100644
--- a/apps/desktop/src/components/assistant-ui/tool-fallback-model.ts
+++ b/apps/desktop/src/components/assistant-ui/tool-fallback-model.ts
@@ -72,6 +72,46 @@ export interface MessageRunningStateSlice {
   }
 }
 
+const FILE_EDIT_TOOL_NAMES = new Set(['edit_file', 'patch', 'write_file'])
+
+export function isFileEditTool(toolName: string): boolean {
+  return FILE_EDIT_TOOL_NAMES.has(toolName)
+}
+
+export interface DiffLineStats {
+  added: number
+  removed: number
+}
+
+export function countDiffLineStats(diff: string): DiffLineStats {
+  let added = 0
+  let removed = 0
+
+  for (const line of diff.split('\n')) {
+    if (line.startsWith('+') && !line.startsWith('+++')) {
+      added += 1
+    } else if (line.startsWith('-') && !line.startsWith('---')) {
+      removed += 1
+    }
+  }
+
+  return { added, removed }
+}
+
+function fileEditPath(args: Record<string, unknown>, result: Record<string, unknown>): string {
+  return (
+    firstStringField(args, ['path', 'file', 'filepath']) ||
+    firstStringField(result, ['path', 'file', 'filepath', 'resolved_path']) ||
+    htmlPathFromInlineDiff(firstStringField(result, ['inline_diff', 'diff']))
+  )
+}
+
+function fileEditBasename(path: string): string {
+  const normalized = path.replace(/\\/g, '/').trim()
+
+  return normalized.split('/').filter(Boolean).pop() || normalized
+}
+
 const TOOL_META: Record<string, ToolMeta> = {
   browser_click: { done: 'Clicked page element', pending: 'Clicking page element', icon: 'globe', tone: 'browser' },
   browser_fill: { done: 'Filled form field', pending: 'Filling form field', icon: 'globe', tone: 'browser' },
@@ -95,7 +135,7 @@ const TOOL_META: Record<string, ToolMeta> = {
   execute_code: { done: 'Ran code', pending: 'Running code', icon: 'terminal', tone: 'terminal' },
   image_generate: { done: 'Generated image', pending: 'Generating image', icon: 'file-media', tone: 'image' },
   list_files: { done: 'Listed files', pending: 'Listing files', icon: 'files', tone: 'file' },
-  patch: { done: 'Patched file', pending: 'Patching file', icon: 'diff', tone: 'file' },
+  patch: { done: 'Patched file', pending: 'Patching file', icon: 'edit', tone: 'file' },
   read_file: { done: 'Read file', pending: 'Reading file', icon: 'file', tone: 'file' },
   search_files: { done: 'Searched files', pending: 'Searching files', icon: 'search', tone: 'file' },
   session_search_recall: {
@@ -797,8 +837,8 @@ function toolPreviewTarget(toolName: string, args: Record<string, unknown>, resu
     return looksLikeUrl(explicit) ? explicit : findFirstUrl(args, result)
   }
 
-  if (toolName === 'write_file' || toolName === 'edit_file') {
-    return htmlPathFromInlineDiff(firstStringField(result, ['inline_diff']))
+  if (isFileEditTool(toolName)) {
+    return htmlPathFromInlineDiff(firstStringField(result, ['inline_diff', 'diff']))
   }
 
   return ''
@@ -858,9 +898,17 @@ function stripDividerLines(value: string): string {
 }
 
 export function inlineDiffFromResult(result: unknown): string {
-  const value = parseMaybeObject(result).inline_diff
+  const record = parseMaybeObject(result)
 
-  return typeof value === 'string' ? stripInlineDiffChrome(value) : ''
+  for (const key of ['inline_diff', 'diff']) {
+    const value = record[key]
+
+    if (typeof value === 'string' && value.trim()) {
+      return stripInlineDiffChrome(value)
+    }
+  }
+
+  return ''
 }
 
 // Falls back to a string only when there's something concrete to render —
@@ -1047,15 +1095,22 @@ function toolSubtitle(
     return command ? compactPreview(command, 120) : 'Executed command'
   }
 
-  if (toolName === 'read_file' || toolName === 'write_file' || toolName === 'edit_file') {
-    const path =
-      firstStringField(argsRecord, ['path', 'file', 'filepath']) ||
-      htmlPathFromInlineDiff(firstStringField(resultRecord, ['inline_diff']))
+  if (toolName === 'read_file' || isFileEditTool(toolName)) {
+    const isEdit = isFileEditTool(toolName)
 
-    return (
-      path ||
-      (firstStringField(resultRecord, ['inline_diff']) ? 'Changed file' : fallbackDetailText(argsRecord, resultRecord))
-    )
+    const path = isEdit
+      ? fileEditPath(argsRecord, resultRecord)
+      : firstStringField(argsRecord, ['path', 'file', 'filepath'])
+
+    if (path) {
+      return path
+    }
+
+    if (!isEdit) {
+      return fallbackDetailText(argsRecord, resultRecord)
+    }
+
+    return inlineDiffFromResult(resultRecord) ? 'Changed file' : ''
   }
 
   if (toolName === 'web_extract') {
@@ -1153,8 +1208,22 @@ function toolDetailText(
     }
   }
 
-  if (part.toolName === 'write_file' || part.toolName === 'edit_file') {
-    return inlineDiffFromResult(part.result) ? '' : fallbackDetailText(argsRecord, resultRecord)
+  if (isFileEditTool(part.toolName)) {
+    if (inlineDiffFromResult(part.result)) {
+      return ''
+    }
+
+    const summary = firstStringField(resultRecord, ['message', 'summary'])
+
+    if (summary) {
+      return summary
+    }
+
+    if (fileEditPath(argsRecord, resultRecord)) {
+      return ''
+    }
+
+    return fallbackDetailText(argsRecord, resultRecord)
   }
 
   if (part.toolName === 'web_search') {
@@ -1253,8 +1322,12 @@ export function toolCopyPayload(part: ToolPart, view: ToolView): { label: string
     }
   }
 
-  if (part.toolName === 'write_file' || part.toolName === 'edit_file') {
-    const path = firstStringField(args, ['path', 'file', 'filepath'])
+  if (isFileEditTool(part.toolName)) {
+    if (view.inlineDiff.trim()) {
+      return { label: copy.file, text: view.inlineDiff }
+    }
+
+    const path = fileEditPath(args, result)
 
     if (path) {
       return { label: copy.path, text: path }
@@ -1304,6 +1377,14 @@ function dynamicTitle(
     }
   }
 
+  if (isFileEditTool(part.toolName)) {
+    const path = fileEditPath(args, result)
+
+    if (path) {
+      return fileEditBasename(path)
+    }
+  }
+
   return fallback
 }
 
@@ -1317,7 +1398,12 @@ export function buildToolView(part: ToolPart, inlineDiff: string): ToolView {
   const title = dynamicTitle(part, argsRecord, resultRecord, baseTitle)
   const titleEnriched = title !== baseTitle
   const baseSubtitle = error || toolSubtitle(part, argsRecord, resultRecord)
-  const keepSubtitleWithTitle = part.toolName === 'terminal' || part.toolName === 'execute_code'
+
+  const keepSubtitleWithTitle =
+    part.toolName === 'terminal' ||
+    part.toolName === 'execute_code' ||
+    (isFileEditTool(part.toolName) && Boolean(baseSubtitle.trim()))
+
   const subtitle = titleEnriched && !error && !keepSubtitleWithTitle ? '' : baseSubtitle
   const detailBody = stripDividerLines(toolDetailText(part, argsRecord, resultRecord))
 
diff --git a/apps/desktop/src/components/assistant-ui/tool-fallback.tsx b/apps/desktop/src/components/assistant-ui/tool-fallback.tsx
index e93eabe1557..900d4767f7b 100644
--- a/apps/desktop/src/components/assistant-ui/tool-fallback.tsx
+++ b/apps/desktop/src/components/assistant-ui/tool-fallback.tsx
@@ -8,7 +8,7 @@ import { AnsiText } from '@/components/assistant-ui/ansi-text'
 import { useElapsedSeconds } from '@/components/chat/activity-timer'
 import { ActivityTimerText } from '@/components/chat/activity-timer-text'
 import { CompactMarkdown } from '@/components/chat/compact-markdown'
-import { DiffLines } from '@/components/chat/diff-lines'
+import { FileDiffPanel } from '@/components/chat/diff-lines'
 import { DisclosureRow } from '@/components/chat/disclosure-row'
 import { PreviewAttachment } from '@/components/chat/preview-attachment'
 import { ZoomableImage } from '@/components/chat/zoomable-image'
@@ -16,6 +16,7 @@ import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import { CopyButton } from '@/components/ui/copy-button'
 import { FadeText } from '@/components/ui/fade-text'
+import { FileTypeIcon } from '@/components/ui/file-type-icon'
 import { GlyphSpinner } from '@/components/ui/glyph-spinner'
 import { ToolIcon } from '@/components/ui/tool-icon'
 import { Tip } from '@/components/ui/tooltip'
@@ -32,7 +33,9 @@ import { PendingToolApproval } from './tool-approval'
 import {
   buildToolView,
   cleanVisibleText,
+  countDiffLineStats,
   inlineDiffFromResult,
+  isFileEditTool,
   isPreviewableTarget,
   looksRedundant,
   type SearchResultRow,
@@ -133,9 +136,21 @@ function statusGlyph(status: ToolStatus, copy: ToolStatusCopy): ReactNode {
 // Leading glyph for any tool-row header. Status (running/error/warning)
 // takes precedence; otherwise falls back to the tool's codicon. Returns
 // null when neither applies so callers can render unconditionally.
-function ToolGlyph({ copy, icon, status }: { copy: ToolStatusCopy; icon?: string; status?: ToolStatus }) {
+function ToolGlyph({
+  copy,
+  filePath,
+  icon,
+  status
+}: {
+  copy: ToolStatusCopy
+  filePath?: string
+  icon?: string
+  status?: ToolStatus
+}) {
   const node = status ? (
     statusGlyph(status, copy)
+  ) : filePath ? (
+    <FileTypeIcon className="text-(--ui-text-tertiary)" path={filePath} size="0.875rem" />
   ) : icon ? (
     <ToolIcon className="text-(--ui-text-tertiary)" name={icon} size="0.875rem" />
   ) : null
@@ -204,8 +219,13 @@ function ToolEntry({ part }: ToolEntryProps) {
   const toolViewMode = useStore($toolViewMode)
   const disclosureId = `tool-entry:${messageId}:${toolPartDisclosureId(part)}`
   const dismissed = useStore($toolRowDismissed(disclosureId))
-  const open = useDisclosureOpen(disclosureId)
   const isPending = messageRunning && part.result === undefined
+  const liveDiffs = useStore($toolInlineDiffs)
+  const sideDiff = part.toolCallId ? liveDiffs[part.toolCallId] || '' : ''
+  const inlineDiff = stripInlineDiffChrome(sideDiff) || inlineDiffFromResult(part.result)
+  const isFileEdit = isFileEditTool(part.toolName)
+  const defaultOpen = Boolean(inlineDiff)
+  const open = useDisclosureOpen(disclosureId, defaultOpen)
   const canDismiss = !isPending && !embedded
   // Only animate entries that mount while their message is actively
   // streaming — historical sessions mount with `messageRunning === false`,
@@ -213,9 +233,6 @@ function ToolEntry({ part }: ToolEntryProps) {
   // handles its own enter animation, so embedded children skip it.
   const enterRef = useEnterAnimation(messageRunning && !embedded, `tool-entry:${disclosureId}`)
   const elapsed = useElapsedSeconds(isPending, `tool:${disclosureId}`)
-  const liveDiffs = useStore($toolInlineDiffs)
-  const sideDiff = part.toolCallId ? liveDiffs[part.toolCallId] || '' : ''
-  const inlineDiff = stripInlineDiffChrome(sideDiff) || inlineDiffFromResult(part.result)
 
   // Stale parts (no result, but message stopped running) get a synthetic
   // empty result so buildToolView treats them as completed-no-output.
@@ -253,11 +270,12 @@ function ToolEntry({ part }: ToolEntryProps) {
   const detailMatchesSubtitle = looksRedundant(view.subtitle, view.detail)
 
   const showDetail =
-    (view.status === 'error' && Boolean(detailSections.summary || detailSections.body)) ||
-    (view.status !== 'error' &&
-      Boolean(view.detail) &&
-      !looksRedundant(view.title, view.detail) &&
-      !detailMatchesSubtitle)
+    !view.inlineDiff &&
+    ((view.status === 'error' && Boolean(detailSections.summary || detailSections.body)) ||
+      (view.status !== 'error' &&
+        Boolean(view.detail) &&
+        !looksRedundant(view.title, view.detail) &&
+        !detailMatchesSubtitle))
 
   const renderDetailAsCode =
     view.status !== 'error' &&
@@ -283,6 +301,13 @@ function ToolEntry({ part }: ToolEntryProps) {
 
   const copyAction = useMemo(() => toolCopyPayload(part, view), [part, view])
 
+  const diffStats = useMemo(
+    () => (isFileEdit && view.inlineDiff ? countDiffLineStats(view.inlineDiff) : null),
+    [isFileEdit, view.inlineDiff]
+  )
+
+  const showDiffStats = !isPending && Boolean(diffStats && (diffStats.added > 0 || diffStats.removed > 0))
+
   // The header trailing slot only carries the live duration timer while the
   // tool is running. The copy control used to live here too, but an
   // `opacity-0` (yet still clickable) button straddling the caret/duration made
@@ -299,7 +324,12 @@ function ToolEntry({ part }: ToolEntryProps) {
     <Tip label={statusCopy.dismiss}>
       <Button
         aria-label={statusCopy.dismiss}
-        className="size-5 rounded-md text-(--ui-text-tertiary) opacity-0 transition-opacity hover:text-(--ui-text-primary) hover:opacity-100 group-hover/disclosure-row:opacity-80 group-focus-within/disclosure-row:opacity-80"
+        className={cn(
+          'size-5 rounded-md text-(--ui-text-tertiary) transition-opacity hover:text-(--ui-text-primary) hover:opacity-100',
+          open
+            ? 'opacity-80'
+            : 'opacity-0 group-hover/disclosure-row:opacity-80 group-focus-within/disclosure-row:opacity-80'
+        )}
         onClick={event => {
           event.stopPropagation()
           dismissToolRow(disclosureId)
@@ -317,13 +347,24 @@ function ToolEntry({ part }: ToolEntryProps) {
     return null
   }
 
+  // A completed file edit with no diff to review is a bare, unexpandable row.
+  // This is almost always a `write_file` create after a reload: only `patch`
+  // persists its diff in the tool result, so creates rehydrate diff-less and
+  // read like dead duplicates of the real diff row. Hide them — but keep
+  // in-flight writes (activity) and failures (errors) visible.
+  if (isFileEdit && !isPending && view.status !== 'error' && !view.inlineDiff) {
+    return null
+  }
+
   return (
     <div
       className={cn(
         'min-w-0 max-w-full overflow-hidden text-[length:var(--conversation-tool-font-size)] text-(--ui-text-tertiary)',
         open && 'rounded-[0.625rem] border border-(--ui-stroke-tertiary)'
       )}
+      data-file-edit={isFileEdit && open ? '' : undefined}
       data-slot="tool-block"
+      data-tool-row=""
       ref={enterRef}
     >
       <div className={cn(open && 'border-b border-(--ui-stroke-tertiary) px-2 py-1.5')}>
@@ -333,8 +374,16 @@ function ToolEntry({ part }: ToolEntryProps) {
           open={open}
           trailing={trailing}
         >
-          <span className="flex min-w-0 items-center gap-1.5">
-            <ToolGlyph copy={copy} icon={view.icon} status={leadingStatus(isPending, view.status)} />
+          <span
+            className="flex min-w-0 items-center gap-1.5"
+            title={isFileEdit && view.subtitle ? view.subtitle : undefined}
+          >
+            <ToolGlyph
+              copy={copy}
+              filePath={isFileEdit ? view.subtitle : undefined}
+              icon={view.icon}
+              status={leadingStatus(isPending, view.status)}
+            />
             <FadeText
               className={cn(
                 TOOL_HEADER_TITLE_CLASS,
@@ -346,7 +395,17 @@ function ToolEntry({ part }: ToolEntryProps) {
               {view.title}
             </FadeText>
             {!isPending && view.countLabel && <span className={TOOL_HEADER_DURATION_CLASS}>{view.countLabel}</span>}
-            {!isPending && view.durationLabel && (
+            {showDiffStats && diffStats && (
+              <span className="flex shrink-0 items-center gap-1 font-mono text-[0.625rem] tabular-nums">
+                {diffStats.added > 0 && (
+                  <span className="text-emerald-600 dark:text-emerald-400">+{diffStats.added}</span>
+                )}
+                {diffStats.removed > 0 && (
+                  <span className="text-rose-600 dark:text-rose-400">−{diffStats.removed}</span>
+                )}
+              </span>
+            )}
+            {!isFileEdit && !isPending && view.durationLabel && (
               <span className={TOOL_HEADER_DURATION_CLASS}>{view.durationLabel}</span>
             )}
           </span>
@@ -358,7 +417,7 @@ function ToolEntry({ part }: ToolEntryProps) {
           {copyAction.text && (
             <CopyButton
               appearance="inline"
-              className="absolute right-1.5 top-1.5 z-10 h-5 gap-0 rounded-md border border-(--ui-stroke-tertiary) bg-background/80 px-1 opacity-60 backdrop-blur-sm transition-opacity hover:opacity-100 focus-visible:opacity-100"
+              className="absolute right-1.5 top-1.5 z-10 h-5 gap-0 rounded-md border border-(--ui-stroke-tertiary) bg-background/80 px-1 opacity-100 backdrop-blur-sm transition-opacity hover:opacity-100 focus-visible:opacity-100"
               iconClassName="size-3"
               label={copyAction.label}
               showLabel={false}
@@ -380,6 +439,7 @@ function ToolEntry({ part }: ToolEntryProps) {
               <SearchResultsList hits={view.searchHits} />
             </div>
           )}
+          {view.inlineDiff && <FileDiffPanel diff={view.inlineDiff} />}
           {showDetail &&
             toolViewMode !== 'technical' &&
             (view.status === 'error' ? (
@@ -448,14 +508,21 @@ function ToolEntry({ part }: ToolEntryProps) {
               </pre>
             </details>
           )}
-          {toolViewMode === 'technical' && (
+          {toolViewMode === 'technical' && !(isFileEdit && view.inlineDiff) && (
             <pre className={cn(TOOL_SECTION_PRE_CLASS, 'whitespace-pre-wrap wrap-anywhere')}>
               {rawTechnicalTrace(part.args, part.result)}
             </pre>
           )}
+          {toolViewMode === 'technical' && isFileEdit && view.inlineDiff && (
+            <details className="max-w-full">
+              <summary className={cn(TOOL_SECTION_LABEL_CLASS, 'mb-0 cursor-pointer')}>Tool payload</summary>
+              <pre className={cn(TOOL_SECTION_PRE_CLASS, 'mt-1 whitespace-pre-wrap wrap-anywhere')}>
+                {rawTechnicalTrace(part.args, part.result)}
+              </pre>
+            </details>
+          )}
         </div>
       )}
-      {open && view.inlineDiff && <DiffLines text={view.inlineDiff} />}
     </div>
   )
 }
@@ -488,6 +555,7 @@ export const ToolGroupSlot: FC<PropsWithChildren<{ endIndex: number; startIndex:
       <div
         className="grid min-w-0 max-w-full gap-(--tool-row-gap) overflow-hidden"
         data-slot="tool-block"
+        data-tool-group=""
         ref={enterRef}
       >
         {children}
diff --git a/apps/desktop/src/components/chat/diff-lines.tsx b/apps/desktop/src/components/chat/diff-lines.tsx
index a6e025ae2ac..a8a1bfc314b 100644
--- a/apps/desktop/src/components/chat/diff-lines.tsx
+++ b/apps/desktop/src/components/chat/diff-lines.tsx
@@ -15,11 +15,17 @@ interface DiffLineKind {
 
 const DIFF_LINE_KINDS: DiffLineKind[] = [
   {
-    className: 'text-emerald-700 dark:text-emerald-300',
+    className: 'border-emerald-500 bg-emerald-500/12 text-emerald-800 dark:text-emerald-200',
     match: line => line.startsWith('+') && !line.startsWith('+++')
   },
-  { className: 'text-rose-700 dark:text-rose-300', match: line => line.startsWith('-') && !line.startsWith('---') },
-  { className: 'text-sky-700 dark:text-sky-300', match: line => line.startsWith('@@') },
+  {
+    className: 'border-rose-500 bg-rose-500/12 text-rose-800 dark:text-rose-200',
+    match: line => line.startsWith('-') && !line.startsWith('---')
+  },
+  {
+    className: 'text-sky-700 dark:text-sky-300',
+    match: line => line.startsWith('@@')
+  },
   {
     className: 'text-muted-foreground/70',
     match: line => line.startsWith('---') || line.startsWith('+++') || / → /.test(line.slice(0, 60))
@@ -30,25 +36,127 @@ function classifyLine(line: string): string | undefined {
   return DIFF_LINE_KINDS.find(kind => kind.match(line))?.className
 }
 
+// Drop the leading +/-/space gutter character so changes read by color alone
+// (like Cursor), keeping the rest of the indentation intact. Hunk headers
+// (`@@`) and any stray file headers are left untouched.
+function stripDiffMarker(line: string): string {
+  if (line.startsWith('@@')) {
+    return line
+  }
+
+  if ((line.startsWith('+') && !line.startsWith('+++')) || (line.startsWith('-') && !line.startsWith('---'))) {
+    return line.slice(1)
+  }
+
+  if (line.startsWith(' ')) {
+    return line.slice(1)
+  }
+
+  return line
+}
+
+interface DisplayLine {
+  className?: string
+  text: string
+}
+
+// Build the rendered line list: drop `@@ … @@` hunk headers (git noise in a
+// GUI) and the +/- gutter, but keep a blank separator between hunks so
+// multi-hunk diffs don't visually merge.
+function toDisplayLines(text: string): DisplayLine[] {
+  const out: DisplayLine[] = []
+  let emitted = false
+
+  for (const line of text.split('\n')) {
+    if (line.startsWith('@@')) {
+      if (emitted) {
+        out.push({ text: '' })
+      }
+
+      continue
+    }
+
+    out.push({ className: classifyLine(line), text: stripDiffMarker(line) })
+    emitted = true
+  }
+
+  return out
+}
+
 interface DiffLinesProps extends Omit<React.ComponentProps<'pre'>, 'children'> {
   text: string
 }
 
 export function DiffLines({ className, text, ...props }: DiffLinesProps) {
+  const lines = React.useMemo(() => toDisplayLines(text), [text])
+
   return (
     <pre
       className={cn(
-        'mt-1 mb-1.5 max-h-96 max-w-full min-w-0 overflow-auto rounded-md border border-border/60 bg-muted/35 px-2.5 py-1.5 font-mono text-[0.7rem] leading-relaxed text-muted-foreground',
+        'max-h-[12rem] max-w-full min-w-0 overflow-auto overscroll-contain px-0 py-1 font-mono text-[0.7rem] leading-relaxed text-(--ui-text-secondary)',
         className
       )}
       data-slot="diff-lines"
       {...props}
     >
-      {text.split('\n').map((line, index) => (
-        <span className={cn('block min-w-max whitespace-pre', classifyLine(line))} key={`${index}-${line}`}>
-          {line || ' '}
+      {lines.map((line, index) => (
+        <span
+          className={cn('block min-w-max border-l-2 border-transparent whitespace-pre px-2.5 py-px', line.className)}
+          key={`${index}-${line.text}`}
+        >
+          {line.text || ' '}
         </span>
       ))}
     </pre>
   )
 }
+
+// Git-style unified diffs arrive with a file-header preamble — `diff --git`,
+// `index …`, `--- a/path`, `+++ b/path`, and Hermes' own `a/path → b/path`
+// arrow line. That preamble just repeats the path (which the tool row already
+// shows) and reads especially badly for absolute paths (`a//Users/…`). Strip
+// the leading header zone up to the first hunk so the panel shows only hunks +
+// changes, the way Cursor does.
+const DIFF_HEADER_PREFIXES = ['diff --git', 'index ', '--- ', '+++ ', 'similarity ', 'rename ', 'new file', 'deleted file']
+
+function isArrowHeaderLine(line: string): boolean {
+  const trimmed = line.trim()
+
+  return trimmed.includes('→') && /^\S.*→\s*\S+$/.test(trimmed) && !/^[+\-@]/.test(trimmed)
+}
+
+/** Exported for tests. */
+export function stripDiffFileHeaders(diff: string): string {
+  const lines = diff.split('\n')
+  let start = 0
+
+  for (; start < lines.length; start += 1) {
+    const line = lines[start]
+
+    if (line.startsWith('@@')) {
+      break
+    }
+
+    if (line.trim() === '' || isArrowHeaderLine(line) || DIFF_HEADER_PREFIXES.some(prefix => line.startsWith(prefix))) {
+      continue
+    }
+
+    break
+  }
+
+  return lines.slice(start).join('\n')
+}
+
+interface FileDiffPanelProps {
+  diff: string
+}
+
+export function FileDiffPanel({ diff }: FileDiffPanelProps) {
+  const display = React.useMemo(() => stripDiffFileHeaders(diff), [diff])
+
+  // Bleed out of the tool-card body's `p-1.5` so changed-line tints/borders run
+  // flush to the card edges (rounded corners clip via the card's overflow).
+  // `max-w-none` lifts the base `max-w-full` cap that would otherwise stop the
+  // negative margins from widening the block.
+  return <DiffLines className="-mx-1.5 -mb-1.5 max-w-none" data-slot="file-diff-panel" text={display} />
+}
diff --git a/apps/desktop/src/components/ui/file-type-icon.tsx b/apps/desktop/src/components/ui/file-type-icon.tsx
new file mode 100644
index 00000000000..fe40c4f2437
--- /dev/null
+++ b/apps/desktop/src/components/ui/file-type-icon.tsx
@@ -0,0 +1,22 @@
+import { ToolIcon, type ToolIconProps } from '@/components/ui/tool-icon'
+import { codiconForFilename, codiconForLanguage } from '@/lib/markdown-code'
+
+export interface FileTypeIconProps extends Omit<ToolIconProps, 'name'> {
+  /** A code-fence language tag (e.g. `ts`, `json`). Used when no `path`. */
+  language?: string
+  /** A file path or bare name; its extension selects the icon. Wins over `language`. */
+  path?: string
+}
+
+/**
+ * Icon for a file or code language, resolved through the one mapping shared
+ * with code blocks (`codiconForFilename` / `codiconForLanguage`). Renders via
+ * `ToolIcon`, so it uses a filled glyph when one exists and falls back to the
+ * outline codicon font otherwise. Pass a `path` for file rows or a `language`
+ * for fenced code.
+ */
+export function FileTypeIcon({ language, path, ...props }: FileTypeIconProps) {
+  const name = path ? codiconForFilename(path) : codiconForLanguage(language)
+
+  return <ToolIcon name={name} {...props} />
+}
diff --git a/apps/desktop/src/lib/markdown-code.ts b/apps/desktop/src/lib/markdown-code.ts
index 0b105727490..6c34b1fcac3 100644
--- a/apps/desktop/src/lib/markdown-code.ts
+++ b/apps/desktop/src/lib/markdown-code.ts
@@ -108,6 +108,56 @@ export function codiconForLanguage(language: string | undefined): string {
   return CODICON_BY_LANGUAGE[sanitizeLanguageTag(language || '')] || 'code'
 }
 
+// File extension → language tag, so a filename can resolve to the same icon a
+// fenced code block of that language would get. Only extensions that map to a
+// non-generic codicon need an entry; everything else falls through to `code`.
+const LANGUAGE_BY_EXTENSION: Record<string, string> = {
+  bash: 'bash',
+  cfg: 'ini',
+  conf: 'ini',
+  css: 'css',
+  dockerfile: 'dockerfile',
+  env: 'env',
+  gql: 'graphql',
+  graphql: 'graphql',
+  ini: 'ini',
+  json: 'json',
+  json5: 'json',
+  less: 'less',
+  markdown: 'markdown',
+  md: 'markdown',
+  mdx: 'markdown',
+  mmd: 'mermaid',
+  ps1: 'powershell',
+  psql: 'sql',
+  sass: 'sass',
+  scss: 'scss',
+  sh: 'bash',
+  sql: 'sql',
+  svg: 'svg',
+  toml: 'toml',
+  yaml: 'yaml',
+  yml: 'yml',
+  zsh: 'zsh'
+}
+
+// Pick an icon for a file path by its extension (or bare name like
+// `Dockerfile`), reusing the language→codicon map so file-edit rows and code
+// blocks share one visual vocabulary. Unknown / generic code files get `code`.
+export function codiconForFilename(path: string | undefined): string {
+  const base = (path || '').replace(/\\/g, '/').split('/').pop()?.trim().toLowerCase() || ''
+
+  if (!base) {
+    return 'code'
+  }
+
+  const dot = base.lastIndexOf('.')
+  const token = dot > 0 ? base.slice(dot + 1) : base
+  const language = LANGUAGE_BY_EXTENSION[token] || token
+
+  return codiconForLanguage(language)
+}
+
 function proseLineCount(body: string): number {
   return body.split('\n').filter(line => {
     const trimmed = line.trim()
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index 36ef859ce12..f3fe3da0d28 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -1214,19 +1214,33 @@ canvas {
   background: transparent !important;
 }
 
-[data-slot='aui_assistant-message-content'] > :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']) {
+/* Fade scaffolding so the prose reading column stays primary. Two targets:
+   a thinking disclosure fades as one block, and each *individual* tool row
+   (`[data-tool-row]`) fades on its own. We deliberately do NOT fade the tool
+   group wrapper (`[data-tool-group]`): opacity on a parent opens a stacking
+   context, so a child row can never be more opaque than the group — that made
+   it impossible to keep one row lit (an open diff) while its siblings faded.
+   With the fade per-row, each row hovers/focuses independently. */
+[data-slot='aui_assistant-message-content'] > [data-slot='aui_thinking-disclosure'],
+[data-slot='aui_assistant-message-content'] [data-slot='tool-block'][data-tool-row] {
   opacity: 0.67;
   transition: opacity 120ms ease-out;
 }
 
-[data-slot='aui_assistant-message-content']
-  > :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']):is(:hover, :focus-within) {
+/* Lift on hover or *keyboard* focus only. `:focus-within` also matches the
+   focus a mouse click leaves on the disclosure toggle, which kept a row lit
+   after you clicked to collapse it; `:has(:focus-visible)` excludes that. */
+[data-slot='aui_assistant-message-content'] > [data-slot='aui_thinking-disclosure']:is(:hover, :has(:focus-visible)),
+[data-slot='aui_assistant-message-content'] [data-slot='tool-block'][data-tool-row]:is(:hover, :has(:focus-visible)) {
   opacity: 1;
 }
 
-/* A generated image is the deliverable, not scaffolding — keep it at full
-   strength instead of dimming it until hover. */
-[data-slot='aui_assistant-message-content'] > [data-slot='tool-block']:has([data-slot='aui_generated-image']) {
+/* File edits (write_file / edit_file / patch) are the deliverable, not
+   scaffolding — the diff is what the user reviews, like a PR. An *expanded*
+   edit stays at full strength; collapsed it fades like any other row. The
+   `data-file-edit` marker sits on the same row element and is only present
+   while the row is open. */
+[data-slot='aui_assistant-message-content'] [data-slot='tool-block'][data-tool-row][data-file-edit] {
   opacity: 1;
 }
 

From c6fbd5a10494541ec3f29b77bc639e6ce3441c18 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Mon, 22 Jun 2026 05:05:34 -0500
Subject: [PATCH 3/5] style(desktop): lead --dt-font-mono with bundled
 JetBrains Mono

Code/diff blocks preferred a system Cascadia Code before the bundled
JetBrains Mono, so they drifted from the terminal (which leads with
JetBrains Mono) on machines where Cascadia is installed. Reorder so every
mono surface uses the face we actually ship.
---
 apps/desktop/src/styles.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index f3fe3da0d28..a56b87186df 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -299,8 +299,11 @@
       'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji;
     /* Key caps always use the native UI face — never theme typography overrides. */
     --dt-font-kbd: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
+    /* JetBrains Mono first — the face we bundle (@font-face above) and the
+       terminal's primary — so code/diff match the terminal on every platform
+       instead of drifting to a system Cascadia Code where it's installed. */
     --dt-font-mono:
-      'Cascadia Code', 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace, 'Apple Color Emoji',
+      'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace, 'Apple Color Emoji',
       'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji;
     --dt-base-size: 1rem;
     --dt-line-height: 1.5;

From ac128af1cec30238f21376273ce4f96088a800bd Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Mon, 22 Jun 2026 05:10:23 -0500
Subject: [PATCH 4/5] feat(desktop): syntax-highlight inline diffs via Shiki
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Unify the diff renderer onto the same Shiki path as code blocks: highlight
the marker-stripped change content in the file's language, then a per-line
transformer layers the add/remove tint + gutter accent on top. Falls back
to the plain color-only renderer when the language is unknown, over budget,
or while Shiki loads.

- shikiLanguageForFilename(): extension → bundled-language id (shared
  filename-token helper with codiconForFilename).
- code display:grid so full-width line tints don't double with newline
  nodes; theme surface stripped so context lines stay transparent.
---
 .../components/assistant-ui/tool-fallback.tsx |   2 +-
 .../src/components/chat/diff-lines.tsx        | 253 +++++++++++-------
 apps/desktop/src/lib/markdown-code.ts         |  97 ++++++-
 apps/desktop/src/styles.css                   |  15 ++
 4 files changed, 254 insertions(+), 113 deletions(-)

diff --git a/apps/desktop/src/components/assistant-ui/tool-fallback.tsx b/apps/desktop/src/components/assistant-ui/tool-fallback.tsx
index 900d4767f7b..8d6a7eb157c 100644
--- a/apps/desktop/src/components/assistant-ui/tool-fallback.tsx
+++ b/apps/desktop/src/components/assistant-ui/tool-fallback.tsx
@@ -439,7 +439,7 @@ function ToolEntry({ part }: ToolEntryProps) {
               <SearchResultsList hits={view.searchHits} />
             </div>
           )}
-          {view.inlineDiff && <FileDiffPanel diff={view.inlineDiff} />}
+          {view.inlineDiff && <FileDiffPanel diff={view.inlineDiff} path={isFileEdit ? view.subtitle : undefined} />}
           {showDetail &&
             toolViewMode !== 'technical' &&
             (view.status === 'error' ? (
diff --git a/apps/desktop/src/components/chat/diff-lines.tsx b/apps/desktop/src/components/chat/diff-lines.tsx
index a8a1bfc314b..fefc8024475 100644
--- a/apps/desktop/src/components/chat/diff-lines.tsx
+++ b/apps/desktop/src/components/chat/diff-lines.tsx
@@ -1,122 +1,82 @@
-import * as React from 'react'
+'use client'
 
+import type { ReactNode } from 'react'
+import * as React from 'react'
+import { useShikiHighlighter } from 'react-shiki'
+import type { ShikiTransformer } from 'shiki'
+
+import { exceedsHighlightBudget } from '@/components/chat/shiki-highlighter'
+import { shikiLanguageForFilename } from '@/lib/markdown-code'
 import { cn } from '@/lib/utils'
 
 /**
- * Per-line classed renderer for unified diffs. Lives outside `CodeCard` so
- * tool-result panels (already nested inside a tool card) don't double-shell;
- * for markdown ` ```diff ` fences the standard `CodeCard` + Shiki path runs
- * instead and gives equivalent coloring.
+ * Renders a unified diff for a tool's file edit. Two paths share one parse:
+ *  - `SyntaxDiff` highlights the change *content* in the file's language via
+ *    Shiki, then a per-line transformer paints the add/remove tint on top.
+ *  - `DiffLines` is the color-only fallback (no language, over budget, or while
+ *    Shiki loads).
+ * Both drop git file-headers + `@@` hunk noise and the `+/-` gutter so changes
+ * read by color + a 2px gutter accent, the way Cursor does.
  */
-interface DiffLineKind {
-  className?: string
-  match: (line: string) => boolean
+const SHIKI_THEME = { dark: 'github-dark-default', light: 'github-light-default' } as const
+
+type DiffKind = 'add' | 'context' | 'remove'
+
+interface DiffLine {
+  kind: DiffKind
+  text: string
 }
 
-const DIFF_LINE_KINDS: DiffLineKind[] = [
-  {
-    className: 'border-emerald-500 bg-emerald-500/12 text-emerald-800 dark:text-emerald-200',
-    match: line => line.startsWith('+') && !line.startsWith('+++')
-  },
-  {
-    className: 'border-rose-500 bg-rose-500/12 text-rose-800 dark:text-rose-200',
-    match: line => line.startsWith('-') && !line.startsWith('---')
-  },
-  {
-    className: 'text-sky-700 dark:text-sky-300',
-    match: line => line.startsWith('@@')
-  },
-  {
-    className: 'text-muted-foreground/70',
-    match: line => line.startsWith('---') || line.startsWith('+++') || / → /.test(line.slice(0, 60))
+// Tint + 2px gutter accent per change kind. Text color is included for the
+// plain renderer; the Shiki path omits it so syntax colors win, layering only
+// the background + border.
+const DIFF_KIND_TINT: Record<DiffKind, string> = {
+  add: 'border-emerald-500 bg-emerald-500/12',
+  context: 'border-transparent',
+  remove: 'border-rose-500 bg-rose-500/12'
+}
+
+const DIFF_KIND_TEXT: Record<DiffKind, string> = {
+  add: 'text-emerald-800 dark:text-emerald-200',
+  context: '',
+  remove: 'text-rose-800 dark:text-rose-200'
+}
+
+const DIFF_LINE_BASE = 'block min-w-max whitespace-pre border-l-2 px-2.5 py-px'
+
+// Bleed out of the tool-card body's `p-1.5` so tints/borders run flush to the
+// card edges (rounded corners clip via the card's overflow); compact height
+// with internal scroll like a code block.
+const DIFF_BOX_CLASS =
+  '-mx-1.5 -mb-1.5 max-h-[12rem] max-w-none min-w-0 overflow-auto overscroll-contain font-mono text-[0.7rem] leading-relaxed text-(--ui-text-secondary)'
+
+function diffKind(line: string): DiffKind {
+  if (line.startsWith('+') && !line.startsWith('+++')) {
+    return 'add'
   }
-]
 
-function classifyLine(line: string): string | undefined {
-  return DIFF_LINE_KINDS.find(kind => kind.match(line))?.className
+  if (line.startsWith('-') && !line.startsWith('---')) {
+    return 'remove'
+  }
+
+  return 'context'
 }
 
-// Drop the leading +/-/space gutter character so changes read by color alone
-// (like Cursor), keeping the rest of the indentation intact. Hunk headers
-// (`@@`) and any stray file headers are left untouched.
+// Drop the leading +/-/space gutter so changes read by color alone, keeping the
+// rest of the indentation intact.
 function stripDiffMarker(line: string): string {
-  if (line.startsWith('@@')) {
-    return line
-  }
-
-  if ((line.startsWith('+') && !line.startsWith('+++')) || (line.startsWith('-') && !line.startsWith('---'))) {
-    return line.slice(1)
-  }
-
-  if (line.startsWith(' ')) {
+  if (diffKind(line) !== 'context' || line.startsWith(' ')) {
     return line.slice(1)
   }
 
   return line
 }
 
-interface DisplayLine {
-  className?: string
-  text: string
-}
-
-// Build the rendered line list: drop `@@ … @@` hunk headers (git noise in a
-// GUI) and the +/- gutter, but keep a blank separator between hunks so
-// multi-hunk diffs don't visually merge.
-function toDisplayLines(text: string): DisplayLine[] {
-  const out: DisplayLine[] = []
-  let emitted = false
-
-  for (const line of text.split('\n')) {
-    if (line.startsWith('@@')) {
-      if (emitted) {
-        out.push({ text: '' })
-      }
-
-      continue
-    }
-
-    out.push({ className: classifyLine(line), text: stripDiffMarker(line) })
-    emitted = true
-  }
-
-  return out
-}
-
-interface DiffLinesProps extends Omit<React.ComponentProps<'pre'>, 'children'> {
-  text: string
-}
-
-export function DiffLines({ className, text, ...props }: DiffLinesProps) {
-  const lines = React.useMemo(() => toDisplayLines(text), [text])
-
-  return (
-    <pre
-      className={cn(
-        'max-h-[12rem] max-w-full min-w-0 overflow-auto overscroll-contain px-0 py-1 font-mono text-[0.7rem] leading-relaxed text-(--ui-text-secondary)',
-        className
-      )}
-      data-slot="diff-lines"
-      {...props}
-    >
-      {lines.map((line, index) => (
-        <span
-          className={cn('block min-w-max border-l-2 border-transparent whitespace-pre px-2.5 py-px', line.className)}
-          key={`${index}-${line.text}`}
-        >
-          {line.text || ' '}
-        </span>
-      ))}
-    </pre>
-  )
-}
-
 // Git-style unified diffs arrive with a file-header preamble — `diff --git`,
 // `index …`, `--- a/path`, `+++ b/path`, and Hermes' own `a/path → b/path`
 // arrow line. That preamble just repeats the path (which the tool row already
 // shows) and reads especially badly for absolute paths (`a//Users/…`). Strip
-// the leading header zone up to the first hunk so the panel shows only hunks +
-// changes, the way Cursor does.
+// the leading header zone up to the first hunk.
 const DIFF_HEADER_PREFIXES = ['diff --git', 'index ', '--- ', '+++ ', 'similarity ', 'rename ', 'new file', 'deleted file']
 
 function isArrowHeaderLine(line: string): boolean {
@@ -147,16 +107,101 @@ export function stripDiffFileHeaders(diff: string): string {
   return lines.slice(start).join('\n')
 }
 
+// Cleaned diff → renderable lines: file-headers + `@@` hunks dropped (a blank
+// separator kept between hunks), markers stripped, kind recorded.
+function parseDiff(diff: string): DiffLine[] {
+  const out: DiffLine[] = []
+  let emitted = false
+
+  for (const line of stripDiffFileHeaders(diff).split('\n')) {
+    if (line.startsWith('@@')) {
+      if (emitted) {
+        out.push({ kind: 'context', text: '' })
+      }
+
+      continue
+    }
+
+    out.push({ kind: diffKind(line), text: stripDiffMarker(line) })
+    emitted = true
+  }
+
+  return out
+}
+
+function DiffBody({ lines, syntax }: { lines: DiffLine[]; syntax?: boolean }) {
+  return (
+    <>
+      {lines.map((line, index) => (
+        <span
+          className={cn(DIFF_LINE_BASE, DIFF_KIND_TINT[line.kind], !syntax && DIFF_KIND_TEXT[line.kind])}
+          key={`${index}-${line.text}`}
+        >
+          {line.text || ' '}
+        </span>
+      ))}
+    </>
+  )
+}
+
+// Shiki transformer: tag each `.line` with the diff tint for its kind, so the
+// syntax-highlighted output keeps add/remove backgrounds + the gutter accent.
+function diffLineTransformer(kinds: DiffKind[]): ShikiTransformer {
+  return {
+    line(node, line) {
+      const kind = kinds[line - 1] ?? 'context'
+
+      const existing = Array.isArray(node.properties.className)
+        ? (node.properties.className as string[])
+        : node.properties.className
+          ? [String(node.properties.className)]
+          : []
+
+      node.properties.className = [...existing, DIFF_LINE_BASE, DIFF_KIND_TINT[kind]]
+    }
+  }
+}
+
+function SyntaxDiff({ language, lines }: { language: string; lines: DiffLine[] }) {
+  const code = React.useMemo(() => lines.map(line => line.text).join('\n'), [lines])
+  const transformers = React.useMemo(() => [diffLineTransformer(lines.map(line => line.kind))], [lines])
+
+  const highlighted = useShikiHighlighter(code, language, SHIKI_THEME, {
+    defaultColor: 'light-dark()',
+    transformers
+  })
+
+  // Until Shiki resolves, show the plain colored diff so there's no flash.
+  return (highlighted as ReactNode) ?? <DiffBody lines={lines} />
+}
+
+interface DiffLinesProps extends Omit<React.ComponentProps<'pre'>, 'children'> {
+  text: string
+}
+
+export function DiffLines({ className, text, ...props }: DiffLinesProps) {
+  const lines = React.useMemo(() => parseDiff(text), [text])
+
+  return (
+    <pre className={cn(DIFF_BOX_CLASS, className)} data-slot="diff-lines" {...props}>
+      <DiffBody lines={lines} />
+    </pre>
+  )
+}
+
 interface FileDiffPanelProps {
   diff: string
+  path?: string
 }
 
-export function FileDiffPanel({ diff }: FileDiffPanelProps) {
-  const display = React.useMemo(() => stripDiffFileHeaders(diff), [diff])
+export function FileDiffPanel({ diff, path }: FileDiffPanelProps) {
+  const lines = React.useMemo(() => parseDiff(diff), [diff])
+  const language = shikiLanguageForFilename(path)
+  const canHighlight = Boolean(language) && !exceedsHighlightBudget(diff)
 
-  // Bleed out of the tool-card body's `p-1.5` so changed-line tints/borders run
-  // flush to the card edges (rounded corners clip via the card's overflow).
-  // `max-w-none` lifts the base `max-w-full` cap that would otherwise stop the
-  // negative margins from widening the block.
-  return <DiffLines className="-mx-1.5 -mb-1.5 max-w-none" data-slot="file-diff-panel" text={display} />
+  return (
+    <div className={DIFF_BOX_CLASS} data-slot="file-diff-panel">
+      {canHighlight ? <SyntaxDiff language={language} lines={lines} /> : <DiffBody lines={lines} />}
+    </div>
+  )
 }
diff --git a/apps/desktop/src/lib/markdown-code.ts b/apps/desktop/src/lib/markdown-code.ts
index 6c34b1fcac3..3d9f3e5e1b6 100644
--- a/apps/desktop/src/lib/markdown-code.ts
+++ b/apps/desktop/src/lib/markdown-code.ts
@@ -145,19 +145,100 @@ const LANGUAGE_BY_EXTENSION: Record<string, string> = {
 // `Dockerfile`), reusing the language→codicon map so file-edit rows and code
 // blocks share one visual vocabulary. Unknown / generic code files get `code`.
 export function codiconForFilename(path: string | undefined): string {
-  const base = (path || '').replace(/\\/g, '/').split('/').pop()?.trim().toLowerCase() || ''
-
-  if (!base) {
-    return 'code'
-  }
-
-  const dot = base.lastIndexOf('.')
-  const token = dot > 0 ? base.slice(dot + 1) : base
+  const token = filenameExtToken(path)
   const language = LANGUAGE_BY_EXTENSION[token] || token
 
   return codiconForLanguage(language)
 }
 
+// Last path segment's extension (or the bare lowercased name for `Dockerfile`,
+// `Makefile`, …). Shared by the icon and Shiki-language resolvers.
+function filenameExtToken(path: string | undefined): string {
+  const base = (path || '').replace(/\\/g, '/').split('/').pop()?.trim().toLowerCase() || ''
+  const dot = base.lastIndexOf('.')
+
+  return dot > 0 ? base.slice(dot + 1) : base
+}
+
+// File extension → Shiki bundled-language id, for syntax-highlighting diffs in
+// the editing tool's own language. Unknown extensions return '' so callers fall
+// back to the plain color-only diff renderer.
+const SHIKI_LANGUAGE_BY_EXTENSION: Record<string, string> = {
+  astro: 'astro',
+  bash: 'bash',
+  c: 'c',
+  cc: 'cpp',
+  cjs: 'javascript',
+  clj: 'clojure',
+  cpp: 'cpp',
+  cs: 'csharp',
+  css: 'css',
+  cxx: 'cpp',
+  dart: 'dart',
+  dockerfile: 'docker',
+  ex: 'elixir',
+  exs: 'elixir',
+  fish: 'fish',
+  go: 'go',
+  gql: 'graphql',
+  graphql: 'graphql',
+  h: 'c',
+  hpp: 'cpp',
+  hs: 'haskell',
+  htm: 'html',
+  html: 'html',
+  ini: 'ini',
+  java: 'java',
+  jl: 'julia',
+  js: 'javascript',
+  json: 'json',
+  json5: 'json5',
+  jsonc: 'jsonc',
+  jsx: 'jsx',
+  kt: 'kotlin',
+  kts: 'kotlin',
+  less: 'less',
+  lua: 'lua',
+  makefile: 'make',
+  markdown: 'markdown',
+  md: 'markdown',
+  mdx: 'mdx',
+  mjs: 'javascript',
+  ml: 'ocaml',
+  mts: 'typescript',
+  nix: 'nix',
+  php: 'php',
+  pl: 'perl',
+  proto: 'proto',
+  ps1: 'powershell',
+  py: 'python',
+  pyi: 'python',
+  r: 'r',
+  rb: 'ruby',
+  rs: 'rust',
+  sass: 'sass',
+  scala: 'scala',
+  scss: 'scss',
+  sh: 'bash',
+  sql: 'sql',
+  svelte: 'svelte',
+  swift: 'swift',
+  tf: 'terraform',
+  toml: 'toml',
+  ts: 'typescript',
+  tsx: 'tsx',
+  vue: 'vue',
+  xml: 'xml',
+  yaml: 'yaml',
+  yml: 'yaml',
+  zig: 'zig',
+  zsh: 'bash'
+}
+
+export function shikiLanguageForFilename(path: string | undefined): string {
+  return SHIKI_LANGUAGE_BY_EXTENSION[filenameExtToken(path)] || ''
+}
+
 function proseLineCount(body: string): number {
   return body.split('\n').filter(line => {
     const trimmed = line.trim()
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index a56b87186df..4ddc226b305 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -1238,6 +1238,21 @@ canvas {
   opacity: 1;
 }
 
+/* Syntax-highlighted inline diff (Shiki): strip the theme's own surface +
+   default margins so context lines stay transparent and each changed line owns
+   its tint. `display: grid` on the code puts one `.line` per row and drops the
+   whitespace-only `\n` nodes between them — without it, full-width block lines
+   double up with the literal newlines (phantom blank rows). */
+[data-slot='file-diff-panel'] .shiki,
+[data-slot='file-diff-panel'] .shiki code {
+  margin: 0;
+  background: transparent !important;
+}
+
+[data-slot='file-diff-panel'] .shiki code {
+  display: grid;
+}
+
 /* File edits (write_file / edit_file / patch) are the deliverable, not
    scaffolding — the diff is what the user reviews, like a PR. An *expanded*
    edit stays at full strength; collapsed it fades like any other row. The

From 61c266b0dc75562a97dc0a377a7dc141d0b0a5ac Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Mon, 22 Jun 2026 05:16:18 -0500
Subject: [PATCH 5/5] style(desktop): soften dark-mode syntax highlighting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Share one SHIKI_THEME (github-dark-dimmed) across code blocks and inline
diffs so they can't drift, and pull token saturation/brightness back via a
`.shiki` dark-mode filter. The dimmed theme alone only changes the
background — which both surfaces strip — so the bright foregrounds needed
the filter to actually calm down.
---
 apps/desktop/src/components/chat/diff-lines.tsx        | 4 +---
 apps/desktop/src/components/chat/shiki-highlighter.tsx | 5 ++++-
 apps/desktop/src/styles.css                            | 8 ++++++++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/components/chat/diff-lines.tsx b/apps/desktop/src/components/chat/diff-lines.tsx
index fefc8024475..767e6029c6e 100644
--- a/apps/desktop/src/components/chat/diff-lines.tsx
+++ b/apps/desktop/src/components/chat/diff-lines.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useShikiHighlighter } from 'react-shiki'
 import type { ShikiTransformer } from 'shiki'
 
-import { exceedsHighlightBudget } from '@/components/chat/shiki-highlighter'
+import { exceedsHighlightBudget, SHIKI_THEME } from '@/components/chat/shiki-highlighter'
 import { shikiLanguageForFilename } from '@/lib/markdown-code'
 import { cn } from '@/lib/utils'
 
@@ -18,8 +18,6 @@ import { cn } from '@/lib/utils'
  * Both drop git file-headers + `@@` hunk noise and the `+/-` gutter so changes
  * read by color + a 2px gutter accent, the way Cursor does.
  */
-const SHIKI_THEME = { dark: 'github-dark-default', light: 'github-light-default' } as const
-
 type DiffKind = 'add' | 'context' | 'remove'
 
 interface DiffLine {
diff --git a/apps/desktop/src/components/chat/shiki-highlighter.tsx b/apps/desktop/src/components/chat/shiki-highlighter.tsx
index 5a047a62657..b984e60f3c8 100644
--- a/apps/desktop/src/components/chat/shiki-highlighter.tsx
+++ b/apps/desktop/src/components/chat/shiki-highlighter.tsx
@@ -30,7 +30,10 @@ interface HermesSyntaxHighlighterProps extends SyntaxHighlighterProps {
   defer?: boolean
 }
 
-const SHIKI_THEME = { dark: 'github-dark-default', light: 'github-light-default' } as const
+// `github-dark-dimmed` is GitHub's lower-contrast dark palette — the vivid
+// `github-dark-default` tokens read harsh at our small code size. Shared by the
+// inline diff renderer too (see diff-lines.tsx) so code + diffs match.
+export const SHIKI_THEME = { dark: 'github-dark-dimmed', light: 'github-light-default' } as const
 
 /**
  * `github-light-default` colors comments `#6e7781` (~4.2:1 against the code
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index 4ddc226b305..9487b636dfb 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -1253,6 +1253,14 @@ canvas {
   display: grid;
 }
 
+/* The github-dark token palette reads candy-bright at our small code size.
+   `github-dark-dimmed` only dims the *background* (which we strip), so soften
+   the token *foregrounds* directly — a small saturation + brightness pullback,
+   hues preserved — for both code blocks and inline diffs. Dark mode only. */
+.dark .shiki {
+  filter: saturate(0.82) brightness(0.92);
+}
+
 /* File edits (write_file / edit_file / patch) are the deliverable, not
    scaffolding — the diff is what the user reviews, like a PR. An *expanded*
    edit stays at full strength; collapsed it fades like any other row. The