feat: inline file change preview in run timeline

Show expandable file change previews on tool-call timeline events
when file changes are present. Each tool-call row gains a compact
summary (file count, +/- stats, GitHub-style stats bar) that
expands to per-file entries with collapsible unified diffs.

- FileChangePreview component in chat/ feature directory
- DiffLine with background highlighting for additions/deletions
- DiffStatsBar mini visualization (5-block addition/deletion ratio)
- New file detection with FilePlus2 icon and 'new' badge
- TimelineEventRow restructured to wrapper div for proper nesting

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

.github/workflows/release.yml

@@ -96,20 +96,12 @@ jobs:
         include:
           - os: windows-latest
             label: Windows
-            release_dir_name: Aryx-windows-x64
-            asset_path: release/Aryx-windows-x64-setup.exe
           - os: macos-15-intel
             label: macOS (x64)
-            release_dir_name: Aryx-macos-x64
-            asset_path: release/Aryx-macos-x64.dmg
           - os: macos-15
             label: macOS (arm64)
-            release_dir_name: Aryx-macos-arm64
-            asset_path: release/Aryx-macos-arm64.dmg
           - os: ubuntu-latest
             label: Linux
-            release_dir_name: Aryx-linux-x64
-            asset_path: release/aryx-linux-x64.deb
 
     steps:
       - name: Check out repository
@@ -131,28 +123,96 @@ jobs:
           sudo apt-get update
           sudo apt-get install -y libsecret-1-dev
 
-      - name: Install Inno Setup
-        if: runner.os == 'Windows'
-        shell: pwsh
-        run: choco install innosetup -y --no-progress
-
       - name: Install dependencies
         run: bun install --frozen-lockfile
 
-      - name: Package current platform
-        run: bun run package
-
-      - name: Ad-hoc sign macOS app bundle
+      - name: Prepare Apple signing assets
         if: runner.os == 'macOS'
-        run: codesign --force --deep --sign - "release/${{ matrix.release_dir_name }}/Aryx.app"
-
-      - name: Create platform installer
-        run: bun run scripts/create-installer.ts
-
-      - name: Upload asset to GitHub release
         shell: bash
+        env:
+          APPLE_CERT_P12_BASE64: ${{ secrets.APPLE_CERT_P12_BASE64 }}
+          APPLE_CERT_PASSWORD: ${{ secrets.APPLE_CERT_PASSWORD }}
+          APPLE_API_KEY_P8: ${{ secrets.APPLE_API_KEY_P8 }}
+          APPLE_API_KEY_ID: ${{ secrets.APPLE_API_KEY_ID }}
+          APPLE_API_ISSUER: ${{ secrets.APPLE_API_ISSUER }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+        run: |
+          write_github_env() {
+            local name="$1"
+            local value="$2"
+            local delimiter
+            delimiter="ARYX_ENV_$(uuidgen | tr '[:lower:]' '[:upper:]')"
+            {
+              printf '%s<<%s\n' "$name" "$delimiter"
+              printf '%s\n' "$value"
+              printf '%s\n' "$delimiter"
+            } >> "$GITHUB_ENV"
+          }
+
+          if [[ -z "$APPLE_CERT_P12_BASE64" ]]; then
+            echo "Missing required secret: APPLE_CERT_P12_BASE64" >&2
+            exit 1
+          fi
+          if [[ -z "$APPLE_CERT_PASSWORD" ]]; then
+            echo "Missing required secret: APPLE_CERT_PASSWORD" >&2
+            exit 1
+          fi
+          if [[ -z "$APPLE_API_KEY_P8" ]]; then
+            echo "Missing required secret: APPLE_API_KEY_P8" >&2
+            exit 1
+          fi
+          if [[ -z "$APPLE_API_KEY_ID" ]]; then
+            echo "Missing required secret: APPLE_API_KEY_ID" >&2
+            exit 1
+          fi
+          if [[ -z "$APPLE_API_ISSUER" ]]; then
+            echo "Missing required secret: APPLE_API_ISSUER" >&2
+            exit 1
+          fi
+          if [[ -z "$APPLE_TEAM_ID" ]]; then
+            echo "Missing required secret: APPLE_TEAM_ID" >&2
+            exit 1
+          fi
+
+          CERT_PATH="$RUNNER_TEMP/apple-signing.p12"
+          API_KEY_PATH="$RUNNER_TEMP/AuthKey_${APPLE_API_KEY_ID}.p8"
+
+          CERT_PATH="$CERT_PATH" python3 - <<'PY'
+          import base64
+          import os
+          from pathlib import Path
+
+          raw_value = os.environ["APPLE_CERT_P12_BASE64"]
+          normalized_value = "".join(raw_value.split())
+          if not normalized_value:
+              raise SystemExit("APPLE_CERT_P12_BASE64 is empty after whitespace normalization")
+
+          decoded = base64.b64decode(normalized_value, validate=True)
+          if not decoded:
+              raise SystemExit("Decoded Apple signing certificate is empty")
+
+          Path(os.environ["CERT_PATH"]).write_bytes(decoded)
+          PY
+          printf '%s' "$APPLE_API_KEY_P8" > "$API_KEY_PATH"
+
+          if [[ ! -s "$CERT_PATH" ]]; then
+            echo "Decoded Apple signing certificate file is empty." >&2
+            exit 1
+          fi
+
+          if ! openssl pkcs12 -in "$CERT_PATH" -noout -passin env:APPLE_CERT_PASSWORD >/dev/null 2>&1; then
+            echo "Decoded Apple signing certificate could not be opened with APPLE_CERT_PASSWORD." >&2
+            exit 1
+          fi
+
+          write_github_env "CSC_LINK" "$CERT_PATH"
+          write_github_env "CSC_KEY_PASSWORD" "$APPLE_CERT_PASSWORD"
+          write_github_env "APPLE_API_KEY" "$API_KEY_PATH"
+          write_github_env "APPLE_API_KEY_ID" "$APPLE_API_KEY_ID"
+          write_github_env "APPLE_API_ISSUER" "$APPLE_API_ISSUER"
+          write_github_env "APPLE_TEAM_ID" "$APPLE_TEAM_ID"
+
+      - name: Build and publish release artifacts
         env:
           GH_TOKEN: ${{ github.token }}
-          TAG_NAME: ${{ github.ref_name }}
-          ASSET_PATH: ${{ matrix.asset_path }}
-        run: gh release upload "$TAG_NAME" "$ASSET_PATH" --clobber
+        run: bun run publish-release

ARCHITECTURE.md

@@ -220,6 +220,8 @@ The protocol also carries **turn-scoped lifecycle events** alongside output delt
 
 These events flow through a single `onTurnScopedEvent` callback on the `runTurn` command, avoiding per-event-type callback proliferation. The main process maps each event to a `SessionEventRecord` and pushes it to the renderer, where lightweight state maps (activity, usage, turn-event log) consume them without touching the persisted workspace.
 
+Tool-call activity records can also be enriched with a stable `toolCallId` and aggregated file-change preview payloads (`path`, unified diff, and optional new-file contents). The sidecar derives those previews from Copilot SDK write permission requests, and the main process merges repeated write events by `toolCallId` into the persisted run timeline so future UI surfaces can render file previews without reinterpreting approval payloads.
+
 The same boundary also supports server-scoped sidecar commands that do not require a live Copilot session. The new `get-quota` command uses the SDK's `account.getQuota` RPC to fetch account quota snapshots on demand, then returns them as a `quota-result` protocol event followed by the usual `command-complete` sentinel.
 
 For project-backed sessions, the sidecar also discovers GitHub Copilot CLI hook definitions from `.github/hooks/*.json` under the repository root. Those files are parsed and merged once per run bundle, then projected onto the SDK session hook delegates. Hook commands run synchronously in the sidecar through the platform shell, with stdin JSON payloads shaped to match Copilot CLI hook expectations as closely as the SDK allows. Hook failures are logged to stderr and treated as non-fatal diagnostics, while `preToolUse` hook outputs can still deny a tool call before Aryx falls back to its built-in approval policy.
@@ -344,9 +346,11 @@ The build pipeline is organized around three layers:
 
 - building the Electron renderer and main process assets
 - publishing the sidecar for the target runtime
-- assembling a platform-specific release bundle
+- packaging platform artifacts with electron-builder
 
-Release automation validates the app across Windows, macOS, and Linux, and tag-based releases publish platform bundles directly to GitHub Releases, including both macOS x64 and arm64 artifacts.
+electron-builder bundles the packaged Electron app, copies the published sidecar into `resources/sidecar`, produces Windows NSIS installers, macOS DMG + ZIP artifacts, and Linux AppImages, and uploads the release assets plus update metadata to GitHub Releases. Tagged macOS release jobs now materialize the certificate and App Store Connect key from repository secrets into temporary files on the runner, export the standard `electron-builder` signing and notarization environment variables from those files, and package with checked-in hardened-runtime entitlements so native modules still run correctly under code signing. The main process consumes the published metadata through `electron-updater`, which checks GitHub Releases for packaged builds and can stage a restart-based update install.
+
+Current Windows builds are unsigned, so the packaging config disables executable resource editing/signing and skips Windows update signature verification until a code-signing certificate is available. The packaging scripts also clear `release/` before each build so local packaging runs cannot accidentally mix stale artifacts with current ones.
 
 This packaging model matches the runtime architecture: one desktop shell plus one dedicated AI execution process.
 

README.md

@@ -124,7 +124,19 @@ To package the current platform into `release/`, run:
 
 - `bun run package`
 
-GitHub Actions now runs validation on pushes and pull requests, and pushing a git tag creates a GitHub release with Windows, macOS (x64 and arm64), and Linux assets uploaded directly to the release.
+To create the installable artifacts for the current platform, run:
+
+- `bun run installer`
+
+To publish packaged artifacts and update metadata to GitHub Releases, run:
+
+- `bun run publish-release`
+
+GitHub Actions runs validation on pushes and pull requests, and tagged releases now use `electron-builder` to publish Windows (NSIS), macOS (DMG + ZIP for updater metadata), and Linux (AppImage) artifacts directly to GitHub Releases. Packaged builds use `electron-updater` against those releases for in-app updates.
+
+Tagged macOS release jobs now prepare signing assets from the GitHub secrets `APPLE_CERT_P12_BASE64`, `APPLE_CERT_PASSWORD`, `APPLE_API_KEY_P8`, `APPLE_API_KEY_ID`, `APPLE_API_ISSUER`, and `APPLE_TEAM_ID`, then export the standard `electron-builder` environment variables (`CSC_LINK`, `CSC_KEY_PASSWORD`, `APPLE_API_KEY`, `APPLE_API_KEY_ID`, `APPLE_API_ISSUER`, `APPLE_TEAM_ID`) before packaging. That same release path signs and notarizes the macOS artifacts as part of publication.
+
+Windows builds are currently packaged without Authenticode signing, so Aryx disables `electron-updater`'s Windows signature verification until a signing certificate is configured. macOS auto-update metadata still requires a ZIP artifact alongside the DMG build.
 
 ## Current focus
 

assets/entitlements.mac.inherit.plist

@@ -0,0 +1,12 @@
+<?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>
+  <key>com.apple.security.cs.allow-jit</key>
+  <true/>
+  <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+  <true/>
+  <key>com.apple.security.cs.disable-library-validation</key>
+  <true/>
+</dict>
+</plist>

assets/entitlements.mac.plist

@@ -0,0 +1,12 @@
+<?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>
+  <key>com.apple.security.cs.allow-jit</key>
+  <true/>
+  <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+  <true/>
+  <key>com.apple.security.cs.disable-library-validation</key>
+  <true/>
+</dict>
+</plist>

assets/installer/linux/aryx.desktop

@@ -1,9 +0,0 @@
-[Desktop Entry]
-Name=Aryx
-Comment=Copilot-powered agent workflow orchestrator
-Exec=/opt/aryx/Aryx %U
-Icon=aryx
-Terminal=false
-Type=Application
-Categories=Development;
-StartupWMClass=Aryx

assets/installer/windows.iss

@@ -1,86 +0,0 @@
-; Inno Setup script for Aryx
-; Dynamic values are read from environment variables set by the build script.
-
-#define PRODUCT_NAME "Aryx"
-#define PRODUCT_PUBLISHER "David Kaya"
-#define PRODUCT_VERSION GetEnv("ARYX_BUILD_VERSION")
-#define SOURCE_DIR GetEnv("ARYX_BUILD_SOURCE_DIR")
-#define OUTPUT_DIR GetEnv("ARYX_BUILD_OUTPUT_DIR")
-#define OUTPUT_FILENAME GetEnv("ARYX_BUILD_OUTPUT_FILENAME")
-#define ICON_PATH GetEnv("ARYX_BUILD_ICON_PATH")
-
-#if PRODUCT_VERSION == ""
-  #error "ARYX_BUILD_VERSION environment variable must be set."
-#endif
-#if SOURCE_DIR == ""
-  #error "ARYX_BUILD_SOURCE_DIR environment variable must be set."
-#endif
-#if OUTPUT_DIR == ""
-  #error "ARYX_BUILD_OUTPUT_DIR environment variable must be set."
-#endif
-#if OUTPUT_FILENAME == ""
-  #error "ARYX_BUILD_OUTPUT_FILENAME environment variable must be set."
-#endif
-#if ICON_PATH == ""
-  #define ICON_PATH SOURCE_DIR + "\" + PRODUCT_NAME + ".exe"
-#endif
-
-[Setup]
-AppId={{B8A3E7F1-4D2C-4A9B-8E6F-1C3D5A7B9E0F}
-AppName={#PRODUCT_NAME}
-AppVersion={#PRODUCT_VERSION}
-AppPublisher={#PRODUCT_PUBLISHER}
-AppSupportURL=https://github.com/davidkaya/aryx
-DefaultDirName={localappdata}\Programs\{#PRODUCT_NAME}
-DefaultGroupName={#PRODUCT_NAME}
-PrivilegesRequired=lowest
-OutputDir={#OUTPUT_DIR}
-OutputBaseFilename={#OUTPUT_FILENAME}
-Compression=lzma2/ultra64
-SolidCompression=yes
-SetupIconFile={#ICON_PATH}
-UninstallDisplayIcon={app}\{#PRODUCT_NAME}.exe
-WizardStyle=modern
-DisableProgramGroupPage=yes
-CloseApplications=force
-RestartApplications=no
-
-[Languages]
-Name: "english"; MessagesFile: "compiler:Default.isl"
-
-[Files]
-Source: "{#SOURCE_DIR}\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
-
-[Icons]
-Name: "{group}\{#PRODUCT_NAME}"; Filename: "{app}\{#PRODUCT_NAME}.exe"
-Name: "{autodesktop}\{#PRODUCT_NAME}"; Filename: "{app}\{#PRODUCT_NAME}.exe"; Tasks: desktopicon
-
-[Tasks]
-Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked
-
-[Run]
-Filename: "{app}\{#PRODUCT_NAME}.exe"; Description: "{cm:LaunchProgram,{#PRODUCT_NAME}}"; Flags: nowait postinstall skipifsilent
-
-[UninstallDelete]
-Type: filesandordirs; Name: "{app}"
-
-[Code]
-procedure CurStepChanged(CurStep: TSetupStep);
-var
-  ResultCode: Integer;
-begin
-  if CurStep = ssInstall then
-  begin
-    Exec('taskkill', '/F /IM {#PRODUCT_NAME}.exe', '', SW_HIDE, ewWaitUntilTerminated, ResultCode);
-  end;
-end;
-
-procedure CurUninstallStepChanged(CurUninstallStep: TUninstallStep);
-var
-  ResultCode: Integer;
-begin
-  if CurUninstallStep = usUninstall then
-  begin
-    Exec('taskkill', '/F /IM {#PRODUCT_NAME}.exe', '', SW_HIDE, ewWaitUntilTerminated, ResultCode);
-  end;
-end;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aryx",
-  "version": "1.0.0",
+  "version": "0.0.8",
   "description": "Electron orchestrator for Copilot-powered agent workflows across multiple projects.",
   "private": true,
   "main": "dist-electron/main/index.js",
@@ -8,8 +8,9 @@
     "dev": "electron-vite dev",
     "build:electron": "electron-vite build",
     "build": "bun run build:electron && bun run sidecar:build",
-    "package": "bun run build:electron && bun run sidecar:publish && bun run scripts/package-electron.ts",
-    "installer": "bun run package && bun run scripts/create-installer.ts",
+    "package": "bun run scripts/clean-release.ts && bun run build:electron && bun run sidecar:publish && electron-builder --dir --publish never",
+    "installer": "bun run scripts/clean-release.ts && bun run build:electron && bun run sidecar:publish && electron-builder --publish never",
+    "publish-release": "bun run scripts/clean-release.ts && bun run build:electron && bun run sidecar:publish && electron-builder --publish always",
     "preview": "electron-vite preview",
     "lsp:typescript": "typescript-language-server --stdio",
     "typecheck": "tsc --noEmit -p tsconfig.json",
@@ -33,7 +34,6 @@
   "packageManager": "bun@1.3.6",
   "devDependencies": {
     "@dagrejs/dagre": "^3.0.0",
-    "@electron/asar": "^4.1.1",
     "@lexical/code": "0.42.0",
     "@lexical/headless": "0.42.0",
     "@lexical/link": "0.42.0",
@@ -52,11 +52,11 @@
     "@xyflow/react": "^12.10.1",
     "bun-types": "^1.3.11",
     "electron": "^41.0.3",
+    "electron-builder": "^26.8.1",
     "electron-vite": "^5.0.0",
     "highlight.js": "^11.11.1",
     "lexical": "0.42.0",
     "lucide-react": "^0.577.0",
-    "rcedit": "^5.0.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-markdown": "^10.1.0",
@@ -68,7 +68,94 @@
     "yaml": "^2.8.3"
   },
   "dependencies": {
+    "@fontsource-variable/dm-sans": "^5.2.8",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@fontsource-variable/outfit": "^5.2.8",
+    "electron-updater": "^6.8.3",
     "keytar": "^7.9.0",
+    "motion": "^12.38.0",
     "node-pty": "^1.1.0"
+  },
+  "build": {
+    "appId": "com.davidkaya.aryx",
+    "productName": "Aryx",
+    "directories": {
+      "buildResources": "assets",
+      "output": "release"
+    },
+    "files": [
+      "package.json",
+      "dist-electron/**/*",
+      "dist/**/*",
+      "assets/**/*"
+    ],
+    "extraResources": [
+      {
+        "from": "dist-sidecar",
+        "to": "sidecar",
+        "filter": [
+          "**/*"
+        ]
+      }
+    ],
+    "asar": true,
+    "asarUnpack": [
+      "**/*.node"
+    ],
+    "electronLanguages": [
+      "en-US"
+    ],
+    "electronUpdaterCompatibility": ">=2.16",
+    "npmRebuild": false,
+    "publish": {
+      "provider": "github",
+      "owner": "davidkaya",
+      "repo": "aryx"
+    },
+    "win": {
+      "target": [
+        "nsis"
+      ],
+      "icon": "assets/icons/windows/icon.ico",
+      "artifactName": "Aryx-windows-${arch}.${ext}",
+      "signAndEditExecutable": false,
+      "verifyUpdateCodeSignature": false
+    },
+    "nsis": {
+      "oneClick": false,
+      "perMachine": false,
+      "allowToChangeInstallationDirectory": true,
+      "installerIcon": "assets/icons/windows/icon.ico",
+      "uninstallerIcon": "assets/icons/windows/icon.ico"
+    },
+    "mac": {
+      "target": [
+        "dmg",
+        "zip"
+      ],
+      "icon": "assets/icons/macos/icon.icns",
+      "category": "public.app-category.developer-tools",
+      "hardenedRuntime": true,
+      "entitlements": "assets/entitlements.mac.plist",
+      "entitlementsInherit": "assets/entitlements.mac.inherit.plist",
+      "gatekeeperAssess": false,
+      "notarize": true,
+      "artifactName": "Aryx-macos-${arch}.${ext}"
+    },
+    "linux": {
+      "target": [
+        "AppImage"
+      ],
+      "icon": "assets/icons/linux/icons",
+      "category": "Development",
+      "artifactName": "Aryx-linux-${arch}.${ext}",
+      "desktop": {
+        "entry": {
+          "Name": "Aryx",
+          "Comment": "Copilot-powered agent workflow orchestrator",
+          "StartupWMClass": "Aryx"
+        }
+      }
+    }
   }
 }

scripts/clean-release.ts

@@ -0,0 +1,9 @@
+import { rm } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const scriptDirectory = dirname(fileURLToPath(import.meta.url));
+const repositoryRoot = resolve(scriptDirectory, '..');
+const releaseDirectory = resolve(repositoryRoot, 'release');
+
+await rm(releaseDirectory, { recursive: true, force: true });

scripts/create-installer.ts

@@ -1,227 +0,0 @@
-import { spawn } from 'node:child_process';
-import { constants } from 'node:fs';
-import {
-  access,
-  cp,
-  mkdir,
-  readFile,
-  symlink,
-  writeFile,
-} from 'node:fs/promises';
-import { dirname, join, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import { productName, resolveReleaseTarget } from './releaseTarget';
-
-function runCommand(command: string, args: string[], cwd: string): Promise<void> {
-  return new Promise((resolvePromise, rejectPromise) => {
-    const child = spawn(command, args, {
-      cwd,
-      stdio: 'inherit',
-    });
-
-    child.on('error', rejectPromise);
-    child.on('exit', (code, signal) => {
-      if (code === 0) {
-        resolvePromise();
-        return;
-      }
-
-      if (signal) {
-        rejectPromise(new Error(`${command} exited because of signal ${signal}.`));
-        return;
-      }
-
-      rejectPromise(new Error(`${command} exited with code ${code ?? 'unknown'}.`));
-    });
-  });
-}
-
-async function pathExists(path: string): Promise<boolean> {
-  try {
-    await access(path, constants.F_OK);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-const scriptDirectory = dirname(fileURLToPath(import.meta.url));
-const repositoryRoot = resolve(scriptDirectory, '..');
-const releaseTarget = resolveReleaseTarget(process.platform, process.arch);
-const releaseRootDirectory = join(repositoryRoot, 'release');
-const packagedAppDirectory = join(releaseRootDirectory, releaseTarget.outputDirectoryName);
-const installerOutputPath = join(releaseRootDirectory, releaseTarget.installerAssetName);
-const installerAssetsDirectory = join(repositoryRoot, 'assets', 'installer');
-
-async function readVersion(): Promise<string> {
-  const packageJson = JSON.parse(
-    await readFile(join(repositoryRoot, 'package.json'), 'utf8'),
-  ) as { version: string };
-  return packageJson.version;
-}
-
-// --- Windows: Inno Setup installer ---
-
-async function resolveInnoSetupCompilerPath(): Promise<string> {
-  const candidates = [
-    'C:\\Program Files (x86)\\Inno Setup 6\\ISCC.exe',
-    'C:\\Program Files\\Inno Setup 6\\ISCC.exe',
-    'iscc',
-  ];
-
-  for (const candidate of candidates) {
-    if (candidate.includes('\\') && (await pathExists(candidate))) {
-      return candidate;
-    }
-  }
-
-  return 'iscc';
-}
-
-async function createWindowsInstaller(version: string): Promise<void> {
-  const issScript = join(installerAssetsDirectory, 'windows.iss');
-  const isccPath = await resolveInnoSetupCompilerPath();
-  const outputFilename = releaseTarget.installerAssetName.replace(/\.exe$/, '');
-  const iconPath = join(repositoryRoot, 'assets', 'icons', 'windows', 'icon.ico');
-
-  process.env.ARYX_BUILD_VERSION = version;
-  process.env.ARYX_BUILD_SOURCE_DIR = packagedAppDirectory;
-  process.env.ARYX_BUILD_OUTPUT_DIR = releaseRootDirectory;
-  process.env.ARYX_BUILD_OUTPUT_FILENAME = outputFilename;
-  process.env.ARYX_BUILD_ICON_PATH = iconPath;
-
-  await runCommand(isccPath, [issScript], repositoryRoot);
-}
-
-// --- macOS: DMG disk image ---
-
-async function createMacInstaller(): Promise<void> {
-  const appBundleName = releaseTarget.appBundleName;
-  if (!appBundleName) {
-    throw new Error('macOS installer requires an app bundle name.');
-  }
-
-  const appBundlePath = join(packagedAppDirectory, appBundleName);
-  // Use macOS's native disk image tooling so packaging does not depend on
-  // create-dmg's native node-gyp install path on CI runners.
-  await runCommand(
-    'hdiutil',
-    [
-      'create',
-      '-volname',
-      productName,
-      '-srcfolder',
-      appBundlePath,
-      '-ov',
-      '-format',
-      'UDZO',
-      installerOutputPath,
-    ],
-    repositoryRoot,
-  );
-}
-
-// --- Linux: .deb package ---
-
-const linuxIconSizes = ['16x16', '32x32', '48x48', '64x64', '128x128', '256x256', '512x512'];
-
-async function createLinuxInstaller(version: string): Promise<void> {
-  const stagingDirectory = join(releaseRootDirectory, 'deb-staging');
-  const debianDirectory = join(stagingDirectory, 'DEBIAN');
-  const optDirectory = join(stagingDirectory, 'opt', 'aryx');
-  const binDirectory = join(stagingDirectory, 'usr', 'bin');
-  const applicationsDirectory = join(stagingDirectory, 'usr', 'share', 'applications');
-
-  await mkdir(debianDirectory, { recursive: true });
-  await mkdir(binDirectory, { recursive: true });
-  await mkdir(applicationsDirectory, { recursive: true });
-
-  // Copy packaged app into /opt/aryx/
-  await cp(packagedAppDirectory, optDirectory, { recursive: true });
-
-  // Create symlink /usr/bin/aryx -> /opt/aryx/Aryx
-  await symlink('/opt/aryx/Aryx', join(binDirectory, 'aryx'));
-
-  // Copy desktop entry
-  await cp(
-    join(installerAssetsDirectory, 'linux', 'aryx.desktop'),
-    join(applicationsDirectory, 'aryx.desktop'),
-  );
-
-  // Install icons into hicolor theme
-  const sourceIconsDirectory = join(repositoryRoot, 'assets', 'icons', 'linux', 'icons');
-  for (const size of linuxIconSizes) {
-    const sourceIcon = join(sourceIconsDirectory, `${size}.png`);
-    if (!(await pathExists(sourceIcon))) {
-      continue;
-    }
-
-    const targetIconDirectory = join(
-      stagingDirectory, 'usr', 'share', 'icons', 'hicolor', size, 'apps',
-    );
-    await mkdir(targetIconDirectory, { recursive: true });
-    await cp(sourceIcon, join(targetIconDirectory, 'aryx.png'));
-  }
-
-  // Determine installed size (in KB)
-  const { stdout } = await new Promise<{ stdout: string }>((resolvePromise, rejectPromise) => {
-    const child = spawn('du', ['-sk', optDirectory], { stdio: ['pipe', 'pipe', 'pipe'] });
-    let out = '';
-    child.stdout.on('data', (data: Buffer) => { out += data.toString(); });
-    child.on('error', rejectPromise);
-    child.on('exit', () => resolvePromise({ stdout: out }));
-  });
-  const installedSizeKb = parseInt(stdout.split('\t')[0] ?? '0', 10);
-
-  const debArch = releaseTarget.arch === 'x64' ? 'amd64' : 'arm64';
-
-  // Write DEBIAN/control
-  const controlContent = [
-    `Package: aryx`,
-    `Version: ${version}`,
-    `Section: devel`,
-    `Priority: optional`,
-    `Architecture: ${debArch}`,
-    `Installed-Size: ${installedSizeKb}`,
-    `Depends: libsecret-1-0`,
-    `Maintainer: David Kaya`,
-    `Description: ${productName} — Copilot-powered agent workflow orchestrator`,
-    `  Electron desktop app for orchestrating Copilot-driven agent workflows`,
-    `  across multiple projects.`,
-    '',
-  ].join('\n');
-
-  await writeFile(join(debianDirectory, 'control'), controlContent);
-
-  // Build the .deb
-  await runCommand(
-    'dpkg-deb',
-    ['--build', '--root-owner-group', stagingDirectory, installerOutputPath],
-    repositoryRoot,
-  );
-}
-
-// --- Entry point ---
-
-if (!(await pathExists(packagedAppDirectory))) {
-  throw new Error(
-    `Packaged app not found at ${packagedAppDirectory}. Run "bun run package" first.`,
-  );
-}
-
-const version = await readVersion();
-
-switch (releaseTarget.platform) {
-  case 'win32':
-    await createWindowsInstaller(version);
-    break;
-  case 'darwin':
-    await createMacInstaller();
-    break;
-  case 'linux':
-    await createLinuxInstaller(version);
-    break;
-}
-
-console.log(`Created installer: ${installerOutputPath}`);

scripts/package-electron.ts

@@ -1,332 +0,0 @@
-import { constants } from 'node:fs';
-import { access, chmod, cp, mkdir, readdir, readFile, rename, rm, writeFile } from 'node:fs/promises';
-import { dirname, join, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import { createPackageWithOptions } from '@electron/asar';
-
-import {
-  macBundleIdentifier,
-  productName,
-  resolveReleaseTarget,
-  type ReleaseTarget,
-} from './releaseTarget';
-
-interface PackageManifest {
-  readonly name: string;
-  readonly productName: string;
-  readonly version: string;
-  readonly description?: string;
-  readonly main: string;
-  readonly author?: string;
-  readonly license?: string;
-}
-
-interface RootPackageJson {
-  readonly name: string;
-  readonly version: string;
-  readonly description?: string;
-  readonly main: string;
-  readonly author?: string;
-  readonly license?: string;
-  readonly dependencies?: Record<string, string>;
-}
-
-const scriptDirectory = dirname(fileURLToPath(import.meta.url));
-const repositoryRoot = resolve(scriptDirectory, '..');
-const assetDirectory = join(repositoryRoot, 'assets');
-const genericIconPath = join(assetDirectory, 'icons', 'icon.png');
-const windowsIconPath = join(assetDirectory, 'icons', 'windows', 'icon.ico');
-const macosIconPath = join(assetDirectory, 'icons', 'macos', 'icon.icns');
-const rendererBuildDirectory = join(repositoryRoot, 'dist');
-const electronBuildDirectory = join(repositoryRoot, 'dist-electron');
-const releaseTarget = resolveReleaseTarget(process.platform, process.arch);
-const releaseRootDirectory = join(repositoryRoot, 'release');
-const outputDirectory = join(releaseRootDirectory, releaseTarget.outputDirectoryName);
-const electronDistributionDirectory = releaseTarget.platform === 'darwin'
-  ? join(repositoryRoot, 'node_modules', 'electron', 'dist', 'Electron.app')
-  : join(repositoryRoot, 'node_modules', 'electron', 'dist');
-const publishedSidecarDirectory = join(repositoryRoot, 'dist-sidecar', releaseTarget.dotnetRuntime);
-
-async function ensurePathExists(path: string, label: string): Promise<void> {
-  try {
-    await access(path, constants.F_OK);
-  } catch {
-    throw new Error(`${label} was not found at ${path}.`);
-  }
-}
-
-async function pathExists(path: string): Promise<boolean> {
-  try {
-    await access(path, constants.F_OK);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-async function readJson<T>(path: string): Promise<T> {
-  return JSON.parse(await readFile(path, 'utf8')) as T;
-}
-
-async function collectRuntimeDependencies(): Promise<string[]> {
-  const rootPackageJson = await readJson<RootPackageJson>(join(repositoryRoot, 'package.json'));
-  const dependencies = new Set(Object.keys(rootPackageJson.dependencies ?? {}));
-  const queue = [...dependencies];
-
-  while (queue.length > 0) {
-    const dependencyName = queue.shift();
-    if (!dependencyName) {
-      continue;
-    }
-
-    const dependencyPackageJsonPath = join(
-      repositoryRoot,
-      'node_modules',
-      ...dependencyName.split('/'),
-      'package.json',
-    );
-    if (!(await pathExists(dependencyPackageJsonPath))) {
-      dependencies.delete(dependencyName);
-      continue;
-    }
-
-    const dependencyPackageJson = await readJson<{
-      readonly dependencies?: Record<string, string>;
-      readonly optionalDependencies?: Record<string, string>;
-    }>(dependencyPackageJsonPath);
-
-    for (const transitiveDependency of Object.keys({
-      ...(dependencyPackageJson.dependencies ?? {}),
-      ...(dependencyPackageJson.optionalDependencies ?? {}),
-    })) {
-      if (!dependencies.has(transitiveDependency)) {
-        dependencies.add(transitiveDependency);
-        queue.push(transitiveDependency);
-      }
-    }
-  }
-
-  return [...dependencies].sort();
-}
-
-async function copyRuntimeDependencies(
-  packagedAppDirectory: string,
-  dependencyNames: string[],
-): Promise<void> {
-  const packagedNodeModulesDirectory = join(packagedAppDirectory, 'node_modules');
-  await mkdir(packagedNodeModulesDirectory, { recursive: true });
-
-  for (const dependencyName of dependencyNames) {
-    const dependencyPathParts = dependencyName.split('/');
-    const sourceDirectory = join(repositoryRoot, 'node_modules', ...dependencyPathParts);
-    const targetDirectory = join(packagedNodeModulesDirectory, ...dependencyPathParts);
-    await mkdir(dirname(targetDirectory), { recursive: true });
-    await cp(sourceDirectory, targetDirectory, { recursive: true });
-  }
-}
-
-async function writePackagedManifest(packagedAppDirectory: string): Promise<PackageManifest> {
-  const sourcePackageJson = await readJson<RootPackageJson>(join(repositoryRoot, 'package.json'));
-  const packagedManifest: PackageManifest = {
-    name: sourcePackageJson.name,
-    productName,
-    version: sourcePackageJson.version,
-    description: sourcePackageJson.description,
-    main: sourcePackageJson.main,
-    author: sourcePackageJson.author,
-    license: sourcePackageJson.license,
-  };
-
-  await writeFile(
-    join(packagedAppDirectory, 'package.json'),
-    `${JSON.stringify(packagedManifest, null, 2)}\n`,
-  );
-
-  return packagedManifest;
-}
-
-async function copyApplicationPayload(
-  packagedAppDirectory: string,
-  outputResourcesDirectory: string,
-  dependencyNames: string[],
-): Promise<PackageManifest> {
-  await mkdir(packagedAppDirectory, { recursive: true });
-
-  const manifest = await writePackagedManifest(packagedAppDirectory);
-  await Promise.all([
-    cp(assetDirectory, join(packagedAppDirectory, 'assets'), { recursive: true }),
-    cp(rendererBuildDirectory, join(packagedAppDirectory, 'dist'), { recursive: true }),
-    cp(electronBuildDirectory, join(packagedAppDirectory, 'dist-electron'), { recursive: true }),
-    cp(publishedSidecarDirectory, join(outputResourcesDirectory, 'sidecar'), { recursive: true }),
-  ]);
-
-  await copyRuntimeDependencies(packagedAppDirectory, dependencyNames);
-
-  const asarPath = join(outputResourcesDirectory, 'app.asar');
-  await createPackageWithOptions(packagedAppDirectory, asarPath, {
-    unpack: '**/*.node',
-  });
-  await rm(packagedAppDirectory, { recursive: true });
-
-  return manifest;
-}
-
-async function ensureExecutable(path: string, mode = 0o755): Promise<void> {
-  await chmod(path, mode);
-}
-
-function replacePlistValue(plistContents: string, key: string, value: string): string {
-  const pattern = new RegExp(`(<key>${key}</key>\\s*<string>)([^<]*)(</string>)`);
-  if (!pattern.test(plistContents)) {
-    throw new Error(`Could not find ${key} in macOS Info.plist.`);
-  }
-
-  return plistContents.replace(pattern, `$1${value}$3`);
-}
-
-async function applyMacMetadata(appBundleDirectory: string, version: string): Promise<void> {
-  const infoPlistPath = join(appBundleDirectory, 'Contents', 'Info.plist');
-  let infoPlistContents = await readFile(infoPlistPath, 'utf8');
-  infoPlistContents = replacePlistValue(infoPlistContents, 'CFBundleDisplayName', productName);
-  infoPlistContents = replacePlistValue(infoPlistContents, 'CFBundleExecutable', productName);
-  infoPlistContents = replacePlistValue(infoPlistContents, 'CFBundleIconFile', 'icon.icns');
-  infoPlistContents = replacePlistValue(infoPlistContents, 'CFBundleIdentifier', macBundleIdentifier);
-  infoPlistContents = replacePlistValue(infoPlistContents, 'CFBundleName', productName);
-  infoPlistContents = replacePlistValue(infoPlistContents, 'CFBundleShortVersionString', version);
-  infoPlistContents = replacePlistValue(infoPlistContents, 'CFBundleVersion', version);
-  await writeFile(infoPlistPath, infoPlistContents);
-
-  const sourceExecutablePath = join(appBundleDirectory, 'Contents', 'MacOS', 'Electron');
-  const targetExecutablePath = join(appBundleDirectory, 'Contents', 'MacOS', productName);
-  await rename(sourceExecutablePath, targetExecutablePath);
-  await ensureExecutable(targetExecutablePath);
-  await cp(macosIconPath, join(appBundleDirectory, 'Contents', 'Resources', 'icon.icns'));
-}
-
-async function stripUnneededElectronFiles(electronOutputDirectory: string): Promise<void> {
-  const filesToRemove = ['LICENSES.chromium.html', 'LICENSE'];
-  const resourcesToRemove = ['default_app.asar'];
-  await Promise.all([
-    ...filesToRemove.map((file) => rm(join(electronOutputDirectory, file), { force: true })),
-    ...resourcesToRemove.map((file) =>
-      rm(join(electronOutputDirectory, 'resources', file), { force: true }),
-    ),
-  ]);
-
-  const localesDirectory = join(electronOutputDirectory, 'locales');
-  if (await pathExists(localesDirectory)) {
-    const localeFiles = await readdir(localesDirectory);
-    await Promise.all(
-      localeFiles
-        .filter((file) => file !== 'en-US.pak')
-        .map((file) => rm(join(localesDirectory, file))),
-    );
-  }
-}
-
-async function stripMacElectronFiles(resourcesDirectory: string): Promise<void> {
-  await rm(join(resourcesDirectory, 'LICENSES.chromium.html'), { force: true });
-
-  const entries = await readdir(resourcesDirectory);
-  const unusedLproj = entries.filter(
-    (entry) => entry.endsWith('.lproj') && entry !== 'en.lproj',
-  );
-  await Promise.all(
-    unusedLproj.map((dir) => rm(join(resourcesDirectory, dir), { recursive: true })),
-  );
-}
-
-async function packageWindows(dependencyNames: string[]): Promise<void> {
-  const packagedExecutablePath = join(outputDirectory, `${productName}.exe`);
-  const packagedAppDirectory = join(outputDirectory, 'resources', 'app');
-  const outputResourcesDirectory = join(outputDirectory, 'resources');
-
-  await cp(electronDistributionDirectory, outputDirectory, { recursive: true });
-  await stripUnneededElectronFiles(outputDirectory);
-  await rename(join(outputDirectory, 'electron.exe'), packagedExecutablePath);
-  await copyApplicationPayload(packagedAppDirectory, outputResourcesDirectory, dependencyNames);
-
-  const { rcedit } = await import('rcedit');
-  await rcedit(packagedExecutablePath, { icon: windowsIconPath });
-}
-
-async function packageMac(dependencyNames: string[]): Promise<void> {
-  const appBundleName = releaseTarget.appBundleName;
-  if (!appBundleName) {
-    throw new Error('macOS packaging requires an app bundle name.');
-  }
-
-  const appBundleDirectory = join(outputDirectory, appBundleName);
-  const packagedAppDirectory = join(appBundleDirectory, 'Contents', 'Resources', 'app');
-  const outputResourcesDirectory = join(appBundleDirectory, 'Contents', 'Resources');
-
-  await cp(electronDistributionDirectory, appBundleDirectory, { recursive: true });
-  await stripMacElectronFiles(join(appBundleDirectory, 'Contents', 'Resources'));
-  const manifest = await copyApplicationPayload(packagedAppDirectory, outputResourcesDirectory, dependencyNames);
-  await applyMacMetadata(appBundleDirectory, manifest.version);
-  await ensureExecutable(join(outputResourcesDirectory, 'sidecar', releaseTarget.sidecarExecutableName));
-}
-
-async function packageLinux(dependencyNames: string[]): Promise<void> {
-  const packagedExecutableName = releaseTarget.packagedExecutableName;
-  if (!packagedExecutableName) {
-    throw new Error('Linux packaging requires a packaged executable name.');
-  }
-
-  const packagedExecutablePath = join(outputDirectory, packagedExecutableName);
-  const packagedAppDirectory = join(outputDirectory, 'resources', 'app');
-  const outputResourcesDirectory = join(outputDirectory, 'resources');
-  const chromeSandboxPath = join(outputDirectory, 'chrome-sandbox');
-
-  await cp(electronDistributionDirectory, outputDirectory, { recursive: true });
-  await stripUnneededElectronFiles(outputDirectory);
-  await rename(join(outputDirectory, 'electron'), packagedExecutablePath);
-  await ensureExecutable(packagedExecutablePath);
-  await copyApplicationPayload(packagedAppDirectory, outputResourcesDirectory, dependencyNames);
-  await ensureExecutable(join(outputResourcesDirectory, 'sidecar', releaseTarget.sidecarExecutableName));
-
-  if (await pathExists(chromeSandboxPath)) {
-    await chmod(chromeSandboxPath, 0o4755);
-  }
-}
-
-async function packageCurrentPlatform(target: ReleaseTarget, dependencyNames: string[]): Promise<void> {
-  switch (target.platform) {
-    case 'win32':
-      await packageWindows(dependencyNames);
-      return;
-    case 'darwin':
-      await packageMac(dependencyNames);
-      return;
-    case 'linux':
-      await packageLinux(dependencyNames);
-      return;
-  }
-}
-
-await Promise.all([
-  ensurePathExists(assetDirectory, 'Application assets'),
-  ensurePathExists(genericIconPath, 'Source application icon'),
-  ensurePathExists(electronDistributionDirectory, 'Electron runtime'),
-  ensurePathExists(rendererBuildDirectory, 'Renderer build output'),
-  ensurePathExists(electronBuildDirectory, 'Electron build output'),
-  ensurePathExists(publishedSidecarDirectory, 'Published sidecar output'),
-]);
-
-if (releaseTarget.platform === 'win32') {
-  await ensurePathExists(windowsIconPath, 'Windows application icon');
-}
-
-if (releaseTarget.platform === 'darwin') {
-  await ensurePathExists(macosIconPath, 'macOS application icon');
-}
-
-const runtimeDependencies = await collectRuntimeDependencies();
-
-await rm(outputDirectory, { recursive: true, force: true });
-await mkdir(releaseRootDirectory, { recursive: true });
-await packageCurrentPlatform(releaseTarget, runtimeDependencies);
-
-console.log(`Packaged ${productName} for ${releaseTarget.platformLabel} to ${outputDirectory}`);
-console.log(`Bundled ${runtimeDependencies.length} runtime dependencies and the self-contained .NET sidecar.`);

scripts/publish-sidecar.ts

@@ -3,8 +3,6 @@ import { rm } from 'node:fs/promises';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { resolveReleaseTarget } from './releaseTarget';
-
 function runCommand(command: string, args: string[], cwd: string): Promise<void> {
   return new Promise((resolvePromise, rejectPromise) => {
     const child = spawn(command, args, {
@@ -29,9 +27,40 @@ function runCommand(command: string, args: string[], cwd: string): Promise<void>
   });
 }
 
+type SupportedPlatform = 'win32' | 'darwin' | 'linux';
+type SupportedArch = 'x64' | 'arm64';
+
+function resolveDotnetRuntime(platform: NodeJS.Platform, arch: NodeJS.Architecture): `${string}-${SupportedArch}` {
+  if (arch !== 'x64' && arch !== 'arm64') {
+    throw new Error(`Unsupported architecture for sidecar publish: ${arch}`);
+  }
+
+  switch (platform) {
+    case 'win32':
+      return `win-${arch}`;
+    case 'darwin':
+      return `osx-${arch}`;
+    case 'linux':
+      return `linux-${arch}`;
+    default:
+      throw new Error(`Unsupported platform for sidecar publish: ${platform}`);
+  }
+}
+
+function resolvePlatformLabel(platform: SupportedPlatform): 'windows' | 'macos' | 'linux' {
+  switch (platform) {
+    case 'win32':
+      return 'windows';
+    case 'darwin':
+      return 'macos';
+    case 'linux':
+      return 'linux';
+  }
+}
+
 const scriptDirectory = dirname(fileURLToPath(import.meta.url));
 const repositoryRoot = resolve(scriptDirectory, '..');
-const releaseTarget = resolveReleaseTarget(process.platform, process.arch);
+const dotnetRuntime = resolveDotnetRuntime(process.platform, process.arch);
 const sidecarProjectPath = join(
   repositoryRoot,
   'sidecar',
@@ -39,7 +68,7 @@ const sidecarProjectPath = join(
   'Aryx.AgentHost',
   'Aryx.AgentHost.csproj',
 );
-const outputDirectory = join(repositoryRoot, 'dist-sidecar', releaseTarget.dotnetRuntime);
+const outputDirectory = join(repositoryRoot, 'dist-sidecar');
 
 await rm(outputDirectory, { recursive: true, force: true });
 
@@ -51,7 +80,7 @@ await runCommand(
     '-c',
     'Release',
     '-r',
-    releaseTarget.dotnetRuntime,
+    dotnetRuntime,
     '--self-contained',
     'true',
     '-p:DebugType=None',
@@ -65,4 +94,4 @@ await runCommand(
   repositoryRoot,
 );
 
-console.log(`Published sidecar for ${releaseTarget.platformLabel} (${releaseTarget.dotnetRuntime}) to ${outputDirectory}`);
+console.log(`Published sidecar for ${resolvePlatformLabel(process.platform as SupportedPlatform)} (${dotnetRuntime}) to ${outputDirectory}`);

scripts/releaseTarget.ts

@@ -1,87 +0,0 @@
-export const productName = 'Aryx';
-export const macBundleIdentifier = 'com.davidkaya.aryx';
-
-type SupportedPlatform = 'win32' | 'darwin' | 'linux';
-type SupportedArch = 'x64' | 'arm64';
-
-export interface ReleaseTarget {
-  readonly platform: SupportedPlatform;
-  readonly arch: SupportedArch;
-  readonly platformLabel: 'windows' | 'macos' | 'linux';
-  readonly dotnetRuntime: `${string}-${SupportedArch}`;
-  readonly outputDirectoryName: string;
-  readonly archiveBaseName: string;
-  readonly installerAssetName: string;
-  readonly sidecarExecutableName: string;
-  readonly packagedExecutableName?: string;
-  readonly appBundleName?: string;
-}
-
-function resolveSupportedArch(
-  platform: SupportedPlatform,
-  arch: NodeJS.Architecture,
-): SupportedArch {
-  if (arch === 'x64' || arch === 'arm64') {
-    return arch;
-  }
-
-  throw new Error(`Unsupported architecture for ${platform}: ${arch}`);
-}
-
-export function resolveReleaseTarget(
-  platform: NodeJS.Platform,
-  arch: NodeJS.Architecture,
-): ReleaseTarget {
-  switch (platform) {
-    case 'win32': {
-      const supportedArch = resolveSupportedArch(platform, arch);
-      const archiveBaseName = `${productName}-windows-${supportedArch}`;
-
-      return {
-        platform,
-        arch: supportedArch,
-        platformLabel: 'windows',
-        dotnetRuntime: `win-${supportedArch}`,
-        outputDirectoryName: archiveBaseName,
-        archiveBaseName,
-        installerAssetName: `${archiveBaseName}-setup.exe`,
-        sidecarExecutableName: 'Aryx.AgentHost.exe',
-        packagedExecutableName: `${productName}.exe`,
-      };
-    }
-    case 'darwin': {
-      const supportedArch = resolveSupportedArch(platform, arch);
-      const archiveBaseName = `${productName}-macos-${supportedArch}`;
-
-      return {
-        platform,
-        arch: supportedArch,
-        platformLabel: 'macos',
-        dotnetRuntime: `osx-${supportedArch}`,
-        outputDirectoryName: archiveBaseName,
-        archiveBaseName,
-        installerAssetName: `${archiveBaseName}.dmg`,
-        sidecarExecutableName: 'Aryx.AgentHost',
-        appBundleName: `${productName}.app`,
-      };
-    }
-    case 'linux': {
-      const supportedArch = resolveSupportedArch(platform, arch);
-      const archiveBaseName = `${productName}-linux-${supportedArch}`;
-
-      return {
-        platform,
-        arch: supportedArch,
-        platformLabel: 'linux',
-        dotnetRuntime: `linux-${supportedArch}`,
-        outputDirectoryName: archiveBaseName,
-        archiveBaseName,
-        installerAssetName: `aryx-linux-${supportedArch}.deb`,
-        sidecarExecutableName: 'Aryx.AgentHost',
-        packagedExecutableName: productName,
-      };
-    }
-    default:
-      throw new Error(`Unsupported release platform: ${platform}`);
-  }
-}

sidecar/src/Aryx.AgentHost/Contracts/ProtocolModels.cs

@@ -340,6 +340,8 @@ public sealed class AgentActivityEventDto : SidecarEventDto
     public string? SourceAgentId { get; init; }
     public string? SourceAgentName { get; init; }
     public string? ToolName { get; init; }
+    public string? ToolCallId { get; init; }
+    public IReadOnlyList<ToolCallFileChangeDto>? FileChanges { get; init; }
 }
 
 public sealed class SubagentEventDto : SidecarEventDto
@@ -503,6 +505,13 @@ public sealed class PermissionDetailDto
     public string? HookMessage { get; init; }
 }
 
+public sealed class ToolCallFileChangeDto
+{
+    public string Path { get; init; } = string.Empty;
+    public string? Diff { get; init; }
+    public string? NewFileContents { get; init; }
+}
+
 public sealed class ApprovalRequestedEventDto : SidecarEventDto
 {
     public string SessionId { get; init; } = string.Empty;

sidecar/src/Aryx.AgentHost/Services/AryxCopilotAgent.cs

@@ -15,6 +15,7 @@ internal sealed class AryxCopilotAgent : AIAgent, IAsyncDisposable
     private const string DefaultName = "GitHub Copilot Agent";
     private const string DefaultDescription = "An AI agent powered by GitHub Copilot";
     private const string HandoffToolPrefix = "handoff_to_";
+    private static readonly JsonSerializerOptions ToolArgumentJsonOptions = JsonSerialization.CreateWebOptions();
     private readonly CopilotClient _copilotClient;
     private readonly string? _id;
     private readonly string _name;
@@ -473,11 +474,11 @@ internal sealed class AryxCopilotAgent : AIAgent, IAsyncDisposable
                 return null;
             }
 
-            return JsonSerializer.Deserialize<Dictionary<string, object?>>(jsonElement.GetRawText());
+            return JsonSerializer.Deserialize<Dictionary<string, object?>>(jsonElement.GetRawText(), ToolArgumentJsonOptions);
         }
 
-        string json = JsonSerializer.Serialize(arguments, arguments.GetType());
-        return JsonSerializer.Deserialize<Dictionary<string, object?>>(json);
+        string json = JsonSerializer.Serialize(arguments, arguments.GetType(), ToolArgumentJsonOptions);
+        return JsonSerializer.Deserialize<Dictionary<string, object?>>(json, ToolArgumentJsonOptions);
     }
 
     internal static async Task<(List<UserMessageDataAttachmentsItem>? Attachments, string? MessageMode, string? TempDir)> ProcessMessageAttachmentsAsync(
@@ -601,6 +602,8 @@ internal sealed class AryxCopilotAgent : AIAgent, IAsyncDisposable
 
 internal sealed class AryxCopilotAgentSession : AgentSession
 {
+    private static readonly JsonSerializerOptions DefaultJsonOptions = JsonSerialization.CreateWebOptions();
+
     public AryxCopilotAgentSession()
     {
     }
@@ -617,7 +620,7 @@ internal sealed class AryxCopilotAgentSession : AgentSession
 
     internal JsonElement Serialize(JsonSerializerOptions? jsonSerializerOptions = null)
     {
-        JsonSerializerOptions options = jsonSerializerOptions ?? new JsonSerializerOptions(JsonSerializerDefaults.Web);
+        JsonSerializerOptions options = jsonSerializerOptions ?? DefaultJsonOptions;
         return JsonSerializer.SerializeToElement(this, options);
     }
 
@@ -630,7 +633,7 @@ internal sealed class AryxCopilotAgentSession : AgentSession
             throw new ArgumentException("The serialized session state must be a JSON object.", nameof(serializedState));
         }
 
-        JsonSerializerOptions options = jsonSerializerOptions ?? new JsonSerializerOptions(JsonSerializerDefaults.Web);
+        JsonSerializerOptions options = jsonSerializerOptions ?? DefaultJsonOptions;
         return serializedState.Deserialize<AryxCopilotAgentSession>(options)
             ?? new AryxCopilotAgentSession();
     }

sidecar/src/Aryx.AgentHost/Services/CopilotApprovalCoordinator.cs

@@ -19,6 +19,7 @@ internal sealed class CopilotApprovalCoordinator
     private const string MemoryPermissionKind = "memory";
     private const string CustomToolPermissionKind = "custom-tool";
     private const string HookPermissionKind = "hook";
+    private const string ToolCallingActivityType = "tool-calling";
 
     private readonly ConcurrentDictionary<string, PendingApprovalRequest> _pendingApprovals = new(StringComparer.Ordinal);
     private readonly ConcurrentDictionary<string, ConcurrentDictionary<string, byte>> _requestApprovedTools = new(StringComparer.Ordinal);
@@ -54,11 +55,40 @@ internal sealed class CopilotApprovalCoordinator
         IReadOnlyDictionary<string, string> toolNamesByCallId,
         Func<ApprovalRequestedEventDto, Task> onApproval,
         CancellationToken cancellationToken)
+    {
+        return await RequestApprovalAsync(
+                command,
+                agent,
+                request,
+                invocation,
+                toolNamesByCallId,
+                onActivity: null,
+                onApproval,
+                cancellationToken)
+            .ConfigureAwait(false);
+    }
+
+    public async Task<PermissionRequestResult> RequestApprovalAsync(
+        RunTurnCommandDto command,
+        PatternAgentDefinitionDto agent,
+        PermissionRequest request,
+        PermissionInvocation invocation,
+        IReadOnlyDictionary<string, string> toolNamesByCallId,
+        Func<AgentActivityEventDto, Task>? onActivity,
+        Func<ApprovalRequestedEventDto, Task> onApproval,
+        CancellationToken cancellationToken)
     {
         string? toolName = ResolveApprovalToolName(request, toolNamesByCallId);
         string? autoApprovedToolName = ResolveAutoApprovedToolName(request);
         string? mcpServerApprovalKey = ResolveMcpServerApprovalKey(request);
         string? approvalCacheKey = ResolveApprovalCacheKey(toolName, autoApprovedToolName);
+
+        AgentActivityEventDto? fileChangeActivity = BuildToolCallFileChangeActivity(command, agent, request, toolName);
+        if (fileChangeActivity is not null && onActivity is not null)
+        {
+            await onActivity(fileChangeActivity).ConfigureAwait(false);
+        }
+
         if (IsToolApprovedForRequest(command.RequestId, approvalCacheKey)
             || !RequiresToolCallApproval(command.Pattern.ApprovalPolicy, agent.Id, toolName, autoApprovedToolName, mcpServerApprovalKey))
         {
@@ -154,6 +184,46 @@ internal sealed class CopilotApprovalCoordinator
         };
     }
 
+    internal static AgentActivityEventDto? BuildToolCallFileChangeActivity(
+        RunTurnCommandDto command,
+        PatternAgentDefinitionDto agent,
+        PermissionRequest request,
+        string? toolName)
+    {
+        if (request is not PermissionRequestWrite write)
+        {
+            return null;
+        }
+
+        string? filePath = NormalizeOptionalString(write.FileName);
+        if (filePath is null)
+        {
+            return null;
+        }
+
+        string agentName = string.IsNullOrWhiteSpace(agent.Name) ? agent.Id : agent.Name;
+        return new AgentActivityEventDto
+        {
+            Type = "agent-activity",
+            RequestId = command.RequestId,
+            SessionId = command.SessionId,
+            ActivityType = ToolCallingActivityType,
+            AgentId = NormalizeOptionalString(agent.Id),
+            AgentName = NormalizeOptionalString(agentName),
+            ToolName = NormalizeOptionalString(toolName),
+            ToolCallId = NormalizeOptionalString(write.ToolCallId),
+            FileChanges =
+            [
+                new ToolCallFileChangeDto
+                {
+                    Path = filePath,
+                    Diff = NormalizeOptionalPreviewText(write.Diff),
+                    NewFileContents = NormalizeOptionalPreviewText(write.NewFileContents),
+                },
+            ],
+        };
+    }
+
     internal static PermissionDetailDto BuildPermissionDetail(PermissionRequest request)
     {
         ArgumentNullException.ThrowIfNull(request);
@@ -495,6 +565,11 @@ internal sealed class CopilotApprovalCoordinator
         return string.IsNullOrWhiteSpace(value) ? null : value.Trim();
     }
 
+    private static string? NormalizeOptionalPreviewText(string? value)
+    {
+        return string.IsNullOrWhiteSpace(value) ? null : value;
+    }
+
     private static IReadOnlyList<string>? NormalizeOptionalStringList(IEnumerable<string?> values)
     {
         List<string> normalized = values

sidecar/src/Aryx.AgentHost/Services/CopilotSessionHooks.cs

@@ -7,13 +7,20 @@ namespace Aryx.AgentHost.Services;
 
 internal static class CopilotSessionHooks
 {
+    private const string AskUserToolName = "ask_user";
     private const string AllowDecision = "allow";
     private const string AskDecision = "ask";
     private const string DenyDecision = "deny";
-    private static readonly JsonSerializerOptions HookJsonOptions = new(JsonSerializerDefaults.Web)
+    private const string HandoffToolPrefix = "handoff_to_";
+    private const string ReportIntentToolName = "report_intent";
+    private const string TaskCompleteToolName = "task_complete";
+    private static readonly HashSet<string> AlwaysAllowedToolNames = new(StringComparer.OrdinalIgnoreCase)
     {
-        DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull,
+        AskUserToolName,
+        ReportIntentToolName,
+        TaskCompleteToolName,
     };
+    private static readonly JsonSerializerOptions HookJsonOptions = CreateHookJsonOptions();
 
     public static SessionHooks Create(
         RunTurnCommandDto command,
@@ -216,11 +223,20 @@ internal static class CopilotSessionHooks
         PatternAgentDefinitionDto agentDefinition,
         PreToolUseHookInput input)
     {
+        string? toolName = Normalize(input.ToolName);
+        if (IsAlwaysAllowedTool(toolName))
+        {
+            return new PreToolUseHookOutput
+            {
+                PermissionDecision = AllowDecision,
+            };
+        }
+
         bool requiresApproval = CopilotApprovalCoordinator.RequiresToolCallApproval(
             command.Pattern.ApprovalPolicy,
             agentDefinition.Id,
-            Normalize(input.ToolName),
-            Normalize(input.ToolName));
+            toolName,
+            toolName);
 
         return new PreToolUseHookOutput
         {
@@ -262,6 +278,21 @@ internal static class CopilotSessionHooks
     private static string SerializeHookValue(object? value)
         => JsonSerializer.Serialize(value, HookJsonOptions);
 
+    private static JsonSerializerOptions CreateHookJsonOptions()
+    {
+        JsonSerializerOptions options = JsonSerialization.CreateWebOptions();
+        options.DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull;
+        return options;
+    }
+
+    private static bool IsAlwaysAllowedTool(string? toolName)
+    {
+        string? normalizedToolName = Normalize(toolName);
+        return normalizedToolName is not null
+            && (AlwaysAllowedToolNames.Contains(normalizedToolName)
+                || normalizedToolName.StartsWith(HandoffToolPrefix, StringComparison.OrdinalIgnoreCase));
+    }
+
     private static string? Normalize(string? value)
         => string.IsNullOrWhiteSpace(value) ? null : value.Trim();
 

sidecar/src/Aryx.AgentHost/Services/CopilotWorkflowRunner.cs

@@ -50,6 +50,7 @@ public sealed class CopilotWorkflowRunner : ITurnWorkflowRunner
                     request,
                     invocation,
                     state.ToolNamesByCallId,
+                    activity => EmitActivityAsync(command, state, activity, onEvent),
                     onApproval,
                     runCancellation.Token),
                 (agent, request, invocation) => _userInputCoordinator.RequestUserInputAsync(

sidecar/src/Aryx.AgentHost/Services/HookConfigLoader.cs

@@ -5,12 +5,7 @@ namespace Aryx.AgentHost.Services;
 
 internal static class HookConfigLoader
 {
-    private static readonly JsonSerializerOptions JsonOptions = new(JsonSerializerDefaults.Web)
-    {
-        AllowTrailingCommas = true,
-        PropertyNameCaseInsensitive = true,
-        ReadCommentHandling = JsonCommentHandling.Skip,
-    };
+    private static readonly JsonSerializerOptions JsonOptions = CreateJsonOptions();
 
     public static async Task<ResolvedHookSet> LoadAsync(string projectPath, CancellationToken cancellationToken)
     {
@@ -204,4 +199,13 @@ internal static class HookConfigLoader
 
     private static string? NormalizeOptionalString(string? value)
         => string.IsNullOrWhiteSpace(value) ? null : value.Trim();
+
+    private static JsonSerializerOptions CreateJsonOptions()
+    {
+        JsonSerializerOptions options = JsonSerialization.CreateWebOptions();
+        options.AllowTrailingCommas = true;
+        options.PropertyNameCaseInsensitive = true;
+        options.ReadCommentHandling = JsonCommentHandling.Skip;
+        return options;
+    }
 }

sidecar/src/Aryx.AgentHost/Services/JsonSerialization.cs

@@ -0,0 +1,15 @@
+using System.Text.Json;
+using System.Text.Json.Serialization.Metadata;
+
+namespace Aryx.AgentHost.Services;
+
+internal static class JsonSerialization
+{
+    public static JsonSerializerOptions CreateWebOptions()
+    {
+        return new JsonSerializerOptions(JsonSerializerDefaults.Web)
+        {
+            TypeInfoResolver = new DefaultJsonTypeInfoResolver(),
+        };
+    }
+}

sidecar/src/Aryx.AgentHost/Services/QuotaSnapshotMapper.cs

@@ -6,10 +6,7 @@ namespace Aryx.AgentHost.Services;
 
 internal static class QuotaSnapshotMapper
 {
-    private static readonly JsonSerializerOptions JsonOptions = new(JsonSerializerDefaults.Web)
-    {
-        PropertyNameCaseInsensitive = true,
-    };
+    private static readonly JsonSerializerOptions JsonOptions = CreateJsonOptions();
 
     public static Dictionary<string, QuotaSnapshotDto> Map(
         IReadOnlyDictionary<string, AccountGetQuotaResultQuotaSnapshotsValue>? snapshots)
@@ -102,4 +99,11 @@ internal static class QuotaSnapshotMapper
 
         return deserialized is null ? null : Map(deserialized);
     }
+
+    private static JsonSerializerOptions CreateJsonOptions()
+    {
+        JsonSerializerOptions options = JsonSerialization.CreateWebOptions();
+        options.PropertyNameCaseInsensitive = true;
+        return options;
+    }
 }

sidecar/src/Aryx.AgentHost/Services/SidecarProtocolHost.cs

@@ -67,11 +67,9 @@ public sealed class SidecarProtocolHost
         _workflowRunner = workflowRunner ?? new CopilotWorkflowRunner(_patternValidator);
         _capabilitiesProvider = capabilitiesProvider ?? BuildCapabilitiesAsync;
         _sessionManager = sessionManager ?? new CopilotSessionManager();
-        _jsonOptions = new JsonSerializerOptions(JsonSerializerDefaults.Web)
-        {
-            DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull,
-            PropertyNameCaseInsensitive = true,
-        };
+        _jsonOptions = JsonSerialization.CreateWebOptions();
+        _jsonOptions.DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull;
+        _jsonOptions.PropertyNameCaseInsensitive = true;
         _commandHandlers = new Dictionary<string, Func<CommandContext, Task>>(StringComparer.Ordinal)
         {
             [DescribeCapabilitiesCommandType] = HandleDescribeCapabilitiesAsync,

sidecar/src/Aryx.AgentHost/Services/WorkflowRequestInfoInterpreter.cs

@@ -12,6 +12,7 @@ internal static class WorkflowRequestInfoInterpreter
     private const string ToolCallingActivityType = "tool-calling";
     private const string CodeInterpreterToolName = "code interpreter";
     private const string ImageGenerationToolName = "image generation";
+    private static readonly JsonSerializerOptions JsonOptions = JsonSerialization.CreateWebOptions();
 
     public static AgentActivityEventDto? TryCreateActivityFromRequest(
         RunTurnCommandDto command,
@@ -73,6 +74,7 @@ internal static class WorkflowRequestInfoInterpreter
             AgentId = activeAgent.AgentId,
             AgentName = activeAgent.AgentName,
             ToolName = tool.ToolName,
+            ToolCallId = tool.ToolCallId,
         };
     }
 
@@ -193,8 +195,8 @@ internal static class WorkflowRequestInfoInterpreter
 
     private static WorkflowRequestHandoffPayload? DeserializeHandoffPayload(object handoffValue)
     {
-        string json = JsonSerializer.Serialize(handoffValue, handoffValue.GetType());
-        return JsonSerializer.Deserialize<WorkflowRequestHandoffPayload>(json);
+        string json = JsonSerializer.Serialize(handoffValue, handoffValue.GetType(), JsonOptions);
+        return JsonSerializer.Deserialize<WorkflowRequestHandoffPayload>(json, JsonOptions);
     }
 
     private abstract record RequestInterpretation;

sidecar/tests/Aryx.AgentHost.Tests/CopilotSessionHooksTests.cs

@@ -106,6 +106,27 @@ public sealed class CopilotSessionHooksTests
         Assert.Single(runner.Invocations);
     }
 
+    [Theory]
+    [InlineData("ask_user")]
+    [InlineData("report_intent")]
+    [InlineData("task_complete")]
+    [InlineData("handoff_to_2")]
+    [InlineData("handoff_to_specialist")]
+    public async Task Create_PreToolUseAutoAllowsInfrastructureTools(string toolName)
+    {
+        RunTurnCommandDto command = CreateCommandWithToolApproval();
+        SessionHooks hooks = CopilotSessionHooks.Create(command, command.Pattern.Agents[0], ResolvedHookSet.Empty, new RecordingHookCommandRunner());
+
+        PreToolUseHookOutput? decision = await hooks.OnPreToolUse!(
+            new PreToolUseHookInput
+            {
+                ToolName = toolName,
+            },
+            null!);
+
+        Assert.Equal("allow", decision?.PermissionDecision);
+    }
+
     [Fact]
     public async Task Create_RunsConfiguredNonPreToolHooks()
     {

sidecar/tests/Aryx.AgentHost.Tests/CopilotWorkflowRunnerTests.cs

@@ -1368,6 +1368,70 @@ public sealed class CopilotWorkflowRunnerTests
         Assert.Equal(PermissionRequestResultKind.Approved, result.Kind);
     }
 
+    [Fact]
+    public async Task RequestApprovalAsync_EmitsFileChangeActivityForWriteRequests()
+    {
+        CopilotApprovalCoordinator coordinator = new();
+        AgentActivityEventDto? observedActivity = null;
+        ApprovalRequestedEventDto? observedApproval = null;
+        RunTurnCommandDto command = CreateApprovalCommand();
+
+        Task<PermissionRequestResult> pending = coordinator.RequestApprovalAsync(
+            command,
+            command.Pattern.Agents[0],
+            new PermissionRequestWrite
+            {
+                Kind = "write",
+                ToolCallId = "tool-call-write-1",
+                Intention = "Update the README",
+                FileName = "README.md",
+                Diff = "@@ -1 +1 @@",
+                NewFileContents = "# Aryx\n",
+            },
+            new PermissionInvocation
+            {
+                SessionId = "copilot-session-1",
+            },
+            new Dictionary<string, string>(StringComparer.Ordinal)
+            {
+                ["tool-call-write-1"] = "apply_patch",
+            },
+            activity =>
+            {
+                observedActivity = activity;
+                return Task.CompletedTask;
+            },
+            approval =>
+            {
+                observedApproval = approval;
+                return Task.CompletedTask;
+            },
+            CancellationToken.None);
+
+        Assert.False(pending.IsCompleted);
+        Assert.NotNull(observedActivity);
+        Assert.NotNull(observedApproval);
+        Assert.Equal("tool-calling", observedActivity!.ActivityType);
+        Assert.Equal("apply_patch", observedActivity.ToolName);
+        Assert.Equal("tool-call-write-1", observedActivity.ToolCallId);
+
+        ToolCallFileChangeDto preview = Assert.Single(observedActivity.FileChanges!);
+        Assert.Equal("README.md", preview.Path);
+        Assert.Equal("@@ -1 +1 @@", preview.Diff);
+        Assert.Equal("# Aryx\n", preview.NewFileContents);
+
+        await coordinator.ResolveApprovalAsync(
+            new ResolveApprovalCommandDto
+            {
+                ApprovalId = observedApproval!.ApprovalId,
+                Decision = "approved",
+            },
+            CancellationToken.None);
+
+        PermissionRequestResult result = await pending;
+        Assert.Equal(PermissionRequestResultKind.Approved, result.Kind);
+    }
+
     [Fact]
     public async Task RequestApprovalAsync_AutoApprovesToolsThatDoNotRequireApproval()
     {

sidecar/tests/Aryx.AgentHost.Tests/JsonSerializationTests.cs

@@ -0,0 +1,41 @@
+using System.Text.Json;
+using System.Text.Json.Serialization.Metadata;
+using Aryx.AgentHost.Services;
+
+namespace Aryx.AgentHost.Tests;
+
+public sealed class JsonSerializationTests
+{
+    [Fact]
+    public void CreateWebOptions_UsesDefaultJsonTypeInfoResolver()
+    {
+        JsonSerializerOptions options = JsonSerialization.CreateWebOptions();
+
+        Assert.IsType<DefaultJsonTypeInfoResolver>(options.TypeInfoResolver);
+    }
+
+    [Fact]
+    public void CreateWebOptions_RoundTripsRuntimeTypedPayloads()
+    {
+        JsonSerializerOptions options = JsonSerialization.CreateWebOptions();
+        object payload = new TestPayload
+        {
+            Type = "describe-capabilities",
+            RequestId = "req-1",
+        };
+
+        string json = JsonSerializer.Serialize(payload, payload.GetType(), options);
+        TestPayload? deserialized = JsonSerializer.Deserialize<TestPayload>(json, options);
+
+        Assert.NotNull(deserialized);
+        Assert.Equal("describe-capabilities", deserialized.Type);
+        Assert.Equal("req-1", deserialized.RequestId);
+    }
+
+    private sealed class TestPayload
+    {
+        public string? Type { get; init; }
+
+        public string? RequestId { get; init; }
+    }
+}

src/main/AryxAppService.ts

@@ -8,12 +8,13 @@ import type {
   AgentActivityEvent,
   ApprovalRequestedEvent,
   ExitPlanModeRequestedEvent,
+  MessageMode,
   McpOauthRequiredEvent,
   RunTurnCustomAgentConfig,
   RunTurnToolingConfig,
   SidecarCapabilities,
-  TurnDeltaEvent,
   UserInputRequestedEvent,
+  TurnDeltaEvent,
 } from '@shared/contracts/sidecar';
 import type { TurnScopedEvent } from '@main/sidecar/runTurnPending';
 import {
@@ -62,14 +63,19 @@ import {
 } from '@shared/domain/approval';
 import { isScratchpadProject, type ProjectRecord } from '@shared/domain/project';
 import {
+  branchSessionRecord,
   duplicateSessionRecord,
+  editAndResendSessionRecord,
   querySessions as queryWorkspaceSessions,
+  regenerateSessionRecord,
   renameSessionRecord,
+  setSessionMessagePinnedRecord,
   type QuerySessionsInput,
   type SessionQueryResult,
 } from '@shared/domain/sessionLibrary';
 import type { SessionEventRecord } from '@shared/domain/event';
 import type { TerminalExitInfo, TerminalSnapshot } from '@shared/domain/terminal';
+import type { ChatMessageAttachment } from '@shared/domain/attachment';
 import {
   applySessionApprovalSettings,
   applySessionModelConfig,
@@ -257,6 +263,11 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
     return this.workspace;
   }
 
+  /** Returns the in-memory workspace without loading from disk. Used for synchronous checks. */
+  getCachedWorkspace(): WorkspaceState | undefined {
+    return this.workspace;
+  }
+
   async dispose(): Promise<void> {
     this.ptyManager.dispose();
     await this.sidecar.dispose();
@@ -503,6 +514,18 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
     return this.persistAndBroadcast(workspace);
   }
 
+  async setNotificationsEnabled(enabled: boolean): Promise<WorkspaceState> {
+    const workspace = await this.loadWorkspace();
+    workspace.settings.notificationsEnabled = enabled;
+    return this.persistAndBroadcast(workspace);
+  }
+
+  async setMinimizeToTray(enabled: boolean): Promise<WorkspaceState> {
+    const workspace = await this.loadWorkspace();
+    workspace.settings.minimizeToTray = enabled;
+    return this.persistAndBroadcast(workspace);
+  }
+
   async describeTerminal(): Promise<TerminalSnapshot | undefined> {
     return this.ptyManager.getSnapshot();
   }
@@ -686,6 +709,32 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
     return this.persistAndBroadcast(workspace);
   }
 
+  async branchSession(sessionId: string, messageId: string): Promise<WorkspaceState> {
+    const workspace = await this.loadWorkspace();
+    const session = this.requireSession(workspace, sessionId);
+    const pattern = this.requirePattern(workspace, session.patternId);
+    const branch = branchSessionRecord(session, pattern, createId('session'), messageId, nowIso());
+    if (isScratchpadProject(branch.projectId)) {
+      branch.cwd = undefined;
+    }
+
+    await this.ensureScratchpadSessionDirectory(branch);
+    workspace.sessions.unshift(branch);
+    workspace.selectedProjectId = branch.projectId;
+    workspace.selectedPatternId = branch.patternId;
+    workspace.selectedSessionId = branch.id;
+    return this.persistAndBroadcast(workspace);
+  }
+
+  async setSessionMessagePinned(sessionId: string, messageId: string, isPinned: boolean): Promise<WorkspaceState> {
+    const workspace = await this.loadWorkspace();
+    const session = this.requireSession(workspace, sessionId);
+    const updated = setSessionMessagePinnedRecord(session, messageId, isPinned, nowIso());
+
+    Object.assign(session, updated);
+    return this.persistAndBroadcast(workspace);
+  }
+
   async renameSession(sessionId: string, title: string): Promise<WorkspaceState> {
     const workspace = await this.loadWorkspace();
     const session = this.requireSession(workspace, sessionId);
@@ -744,11 +793,117 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
     return this.persistAndBroadcast(workspace);
   }
 
+  async regenerateSessionMessage(sessionId: string, messageId: string): Promise<void> {
+    const workspace = await this.loadWorkspace();
+    const session = this.requireSession(workspace, sessionId);
+    if (session.status === 'running') {
+      throw new Error('Wait for the current response or approval checkpoint to finish before regenerating a message.');
+    }
+
+    const project = this.requireProject(workspace, session.projectId);
+    const pattern = this.requirePattern(workspace, session.patternId);
+    const effectivePattern = this.applyProjectCustomizationToPattern(
+      await this.buildEffectivePattern(pattern, session),
+      project,
+    );
+    const projectInstructions = resolveProjectInstructionsContent(project.customization);
+    const occurredAt = nowIso();
+    const regeneratedSession = regenerateSessionRecord(
+      session,
+      effectivePattern,
+      createId('session'),
+      messageId,
+      occurredAt,
+    );
+    if (isScratchpadProject(regeneratedSession.projectId)) {
+      regeneratedSession.cwd = undefined;
+    }
+
+    await this.ensureScratchpadSessionDirectory(regeneratedSession);
+    workspace.sessions.unshift(regeneratedSession);
+    workspace.selectedProjectId = regeneratedSession.projectId;
+    workspace.selectedPatternId = regeneratedSession.patternId;
+    workspace.selectedSessionId = regeneratedSession.id;
+
+    const triggerMessage = regeneratedSession.messages.at(-1);
+    if (!triggerMessage || triggerMessage.role !== 'user') {
+      throw new Error('Regenerated session is missing the user message needed to replay the turn.');
+    }
+
+    await this.runPreparedSessionTurn(workspace, regeneratedSession, project, effectivePattern, projectInstructions, {
+      occurredAt,
+      requestId: createId('turn'),
+      triggerMessageId: triggerMessage.id,
+    });
+  }
+
+  async editAndResendSessionMessage(
+    sessionId: string,
+    messageId: string,
+    content: string,
+    attachments?: ChatMessageAttachment[],
+  ): Promise<void> {
+    const workspace = await this.loadWorkspace();
+    const session = this.requireSession(workspace, sessionId);
+    if (session.status === 'running') {
+      throw new Error('Wait for the current response or approval checkpoint to finish before editing and resending a message.');
+    }
+
+    const sourceMessage = session.messages.find((message) => message.id === messageId);
+    if (!sourceMessage) {
+      throw new Error(`Message ${messageId} not found in session ${session.id}.`);
+    }
+
+    const preparedContent = prepareChatMessageContent(content);
+    if (!preparedContent) {
+      throw new Error('Message content is required.');
+    }
+
+    const project = this.requireProject(workspace, session.projectId);
+    const pattern = this.requirePattern(workspace, session.patternId);
+    const effectivePattern = this.applyProjectCustomizationToPattern(
+      await this.buildEffectivePattern(pattern, session),
+      project,
+    );
+    const projectInstructions = resolveProjectInstructionsContent(project.customization);
+    const occurredAt = nowIso();
+    const nextAttachments = attachments === undefined ? sourceMessage.attachments : attachments;
+    const editedSession = editAndResendSessionRecord(
+      session,
+      effectivePattern,
+      createId('session'),
+      messageId,
+      preparedContent,
+      occurredAt,
+      nextAttachments,
+    );
+    if (isScratchpadProject(editedSession.projectId)) {
+      editedSession.cwd = undefined;
+    }
+
+    await this.ensureScratchpadSessionDirectory(editedSession);
+    workspace.sessions.unshift(editedSession);
+    workspace.selectedProjectId = editedSession.projectId;
+    workspace.selectedPatternId = editedSession.patternId;
+    workspace.selectedSessionId = editedSession.id;
+
+    const triggerMessage = editedSession.messages.at(-1);
+    if (!triggerMessage || triggerMessage.role !== 'user') {
+      throw new Error('Edited session is missing the user message needed to replay the turn.');
+    }
+
+    await this.runPreparedSessionTurn(workspace, editedSession, project, effectivePattern, projectInstructions, {
+      occurredAt,
+      requestId: createId('turn'),
+      triggerMessageId: triggerMessage.id,
+    });
+  }
+
   async sendSessionMessage(
     sessionId: string,
     content: string,
-    attachments?: import('@shared/domain/attachment').ChatMessageAttachment[],
-    messageMode?: import('@shared/contracts/sidecar').MessageMode,
+    attachments?: ChatMessageAttachment[],
+    messageMode?: MessageMode,
   ): Promise<void> {
     const workspace = await this.loadWorkspace();
     const session = this.requireSession(workspace, sessionId);
@@ -771,7 +926,6 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
     }
 
     const requestId = createId('turn');
-    const workspaceKind = isScratchpadProject(project) ? 'scratchpad' : 'project';
     const occurredAt = nowIso();
     const userMessageId = createId('msg');
     session.messages.push({
@@ -782,103 +936,13 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
       createdAt: occurredAt,
       attachments: attachments?.length ? attachments : undefined,
     });
-    session.title = resolveSessionTitle(session, effectivePattern, session.messages);
-    session.status = 'running';
-    session.lastError = undefined;
-    session.pendingPlanReview = undefined;
-    session.pendingMcpAuth = undefined;
-    session.updatedAt = occurredAt;
-    session.runs = [
-      createSessionRunRecord({
-        requestId,
-        project,
-        workspaceKind,
-        pattern: effectivePattern,
-        triggerMessageId: userMessageId,
-        startedAt: occurredAt,
-      }),
-      ...session.runs,
-    ];
-
-    await this.persistAndBroadcast(workspace);
-    this.emitSessionEvent({
-      sessionId: session.id,
-      kind: 'status',
-      status: 'running',
+    await this.runPreparedSessionTurn(workspace, session, project, effectivePattern, projectInstructions, {
       occurredAt,
+      requestId,
+      triggerMessageId: userMessageId,
+      messageMode,
+      attachments,
     });
-
-    try {
-      const responseMessages = await this.sidecar.runTurn(
-        {
-          type: 'run-turn',
-          requestId,
-          sessionId: session.id,
-          projectPath: session.cwd ?? project.path,
-          workspaceKind,
-          mode: session.interactionMode ?? 'interactive',
-          messageMode,
-          projectInstructions,
-          pattern: effectivePattern,
-          messages: session.messages,
-          attachments: attachments?.length ? attachments : undefined,
-          tooling: this.buildRunTurnToolingConfig(workspace, session),
-        },
-        async (event) => {
-          await this.applyTurnDelta(workspace, session.id, requestId, event);
-        },
-        async (event) => {
-          await this.applyAgentActivity(workspace, session.id, requestId, event);
-        },
-        async (event) => {
-          await this.handleApprovalRequested(workspace, session.id, requestId, event, (decision, alwaysApprove) =>
-            this.sidecar.resolveApproval(event.approvalId, decision, alwaysApprove));
-        },
-        async (event) => {
-          await this.handleUserInputRequested(workspace, session.id, requestId, event, (answer, wasFreeform) =>
-            this.sidecar.resolveUserInput(event.userInputId, answer, wasFreeform));
-        },
-        async (event) => {
-          await this.handleMcpOAuthRequired(workspace, session.id, event);
-        },
-        async (event) => {
-          await this.handleExitPlanModeRequested(workspace, session.id, event);
-        },
-        async (event) => {
-          await this.handleTurnScopedEvent(workspace, session.id, event);
-        },
-      );
-
-      await this.awaitFinalResponseApproval(workspace, session.id, requestId, effectivePattern, responseMessages);
-      this.finalizeTurn(workspace, session.id, requestId, responseMessages);
-      await this.persistAndBroadcast(workspace);
-    } catch (error) {
-      if (error instanceof TurnCancelledError) {
-        this.finalizeCancelledTurn(workspace, session, requestId);
-        await this.persistAndBroadcast(workspace);
-        return;
-      }
-
-      const failedAt = nowIso();
-      session.status = 'error';
-      session.lastError = error instanceof Error ? error.message : String(error);
-      session.updatedAt = failedAt;
-
-      const failedRun = this.updateSessionRun(session, requestId, (run) =>
-        failSessionRunRecord(run, failedAt, session.lastError ?? 'Unknown error.'));
-
-      this.emitSessionEvent({
-        sessionId: session.id,
-        kind: 'error',
-        occurredAt: failedAt,
-        error: session.lastError,
-      });
-      if (failedRun) {
-        this.emitRunUpdated(session.id, failedAt, failedRun);
-      }
-
-      await this.persistAndBroadcast(workspace);
-    }
   }
 
   async cancelSessionTurn(sessionId: string): Promise<void> {
@@ -1221,6 +1285,122 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
     }
   }
 
+  private async runPreparedSessionTurn(
+    workspace: WorkspaceState,
+    session: SessionRecord,
+    project: ProjectRecord,
+    effectivePattern: PatternDefinition,
+    projectInstructions: string | undefined,
+    options: {
+      occurredAt: string;
+      requestId: string;
+      triggerMessageId: string;
+      messageMode?: MessageMode;
+      attachments?: ChatMessageAttachment[];
+    },
+  ): Promise<void> {
+    const workspaceKind = isScratchpadProject(project) ? 'scratchpad' : 'project';
+    const { occurredAt, requestId, triggerMessageId, messageMode, attachments } = options;
+
+    session.title = resolveSessionTitle(session, effectivePattern, session.messages);
+    session.status = 'running';
+    session.lastError = undefined;
+    session.pendingPlanReview = undefined;
+    session.pendingMcpAuth = undefined;
+    session.updatedAt = occurredAt;
+    session.runs = [
+      createSessionRunRecord({
+        requestId,
+        project,
+        workspaceKind,
+        pattern: effectivePattern,
+        triggerMessageId,
+        startedAt: occurredAt,
+      }),
+      ...session.runs,
+    ];
+
+    await this.persistAndBroadcast(workspace);
+    this.emitSessionEvent({
+      sessionId: session.id,
+      kind: 'status',
+      status: 'running',
+      occurredAt,
+    });
+
+    try {
+      const responseMessages = await this.sidecar.runTurn(
+        {
+          type: 'run-turn',
+          requestId,
+          sessionId: session.id,
+          projectPath: session.cwd ?? project.path,
+          workspaceKind,
+          mode: session.interactionMode ?? 'interactive',
+          messageMode,
+          projectInstructions,
+          pattern: effectivePattern,
+          messages: session.messages,
+          attachments: attachments?.length ? attachments : undefined,
+          tooling: this.buildRunTurnToolingConfig(workspace, session),
+        },
+        async (event) => {
+          await this.applyTurnDelta(workspace, session.id, requestId, event);
+        },
+        async (event) => {
+          await this.applyAgentActivity(workspace, session.id, requestId, event);
+        },
+        async (event) => {
+          await this.handleApprovalRequested(workspace, session.id, requestId, event, (decision, alwaysApprove) =>
+            this.sidecar.resolveApproval(event.approvalId, decision, alwaysApprove));
+        },
+        async (event) => {
+          await this.handleUserInputRequested(workspace, session.id, requestId, event, (answer, wasFreeform) =>
+            this.sidecar.resolveUserInput(event.userInputId, answer, wasFreeform));
+        },
+        async (event) => {
+          await this.handleMcpOAuthRequired(workspace, session.id, event);
+        },
+        async (event) => {
+          await this.handleExitPlanModeRequested(workspace, session.id, event);
+        },
+        async (event) => {
+          await this.handleTurnScopedEvent(workspace, session.id, event);
+        },
+      );
+
+      await this.awaitFinalResponseApproval(workspace, session.id, requestId, effectivePattern, responseMessages);
+      this.finalizeTurn(workspace, session.id, requestId, responseMessages);
+      await this.persistAndBroadcast(workspace);
+    } catch (error) {
+      if (error instanceof TurnCancelledError) {
+        this.finalizeCancelledTurn(workspace, session, requestId);
+        await this.persistAndBroadcast(workspace);
+        return;
+      }
+
+      const failedAt = nowIso();
+      session.status = 'error';
+      session.lastError = error instanceof Error ? error.message : String(error);
+      session.updatedAt = failedAt;
+
+      const failedRun = this.updateSessionRun(session, requestId, (run) =>
+        failSessionRunRecord(run, failedAt, session.lastError ?? 'Unknown error.'));
+
+      this.emitSessionEvent({
+        sessionId: session.id,
+        kind: 'error',
+        occurredAt: failedAt,
+        error: session.lastError,
+      });
+      if (failedRun) {
+        this.emitRunUpdated(session.id, failedAt, failedRun);
+      }
+
+      await this.persistAndBroadcast(workspace);
+    }
+  }
+
   async updateSessionTooling(
     sessionId: string,
     enabledMcpServerIds: string[],
@@ -1555,6 +1735,8 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
           sourceAgentId: event.sourceAgentId,
           sourceAgentName: event.sourceAgentName,
           toolName: event.toolName,
+          toolCallId: event.toolCallId,
+          fileChanges: event.fileChanges,
         }));
     }
     if (nextRun) {
@@ -1573,6 +1755,8 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
       sourceAgentId: event.sourceAgentId,
       sourceAgentName: event.sourceAgentName,
       toolName: event.toolName,
+      toolCallId: event.toolCallId,
+      fileChanges: event.fileChanges,
     });
   }
 

src/main/index.ts

@@ -3,43 +3,84 @@ import type { BrowserWindow as BrowserWindowType } from 'electron';
 
 import { registerIpcHandlers } from '@main/ipc/registerIpcHandlers';
 import { AryxAppService } from '@main/AryxAppService';
+import { AutoUpdateService } from '@main/services/autoUpdater';
 import { createMainWindow } from '@main/windows/createMainWindow';
 import { applyTitleBarTheme } from '@main/windows/titleBarTheme';
+import { SystemTray, setupCloseToTray, showAndFocusWindow } from '@main/services/systemTray';
 
 const { app, BrowserWindow } = electron;
 
 let mainWindow: BrowserWindowType | undefined;
 let appService: AryxAppService | undefined;
+let systemTray: SystemTray | undefined;
+let autoUpdateService: AutoUpdateService | undefined;
 
 async function bootstrap(): Promise<void> {
   appService = new AryxAppService();
+  autoUpdateService?.dispose();
+  autoUpdateService = new AutoUpdateService({ isPackaged: app.isPackaged });
 
   mainWindow = createMainWindow();
-  registerIpcHandlers(mainWindow, appService);
+  registerIpcHandlers(mainWindow, appService, autoUpdateService);
 
   // Apply persisted theme to the title bar overlay
   const workspace = await appService.loadWorkspace();
   applyTitleBarTheme(mainWindow, workspace.settings.theme);
 
+  // Set up system tray
+  systemTray = new SystemTray({
+    onShowWindow: showAndFocusWindow,
+    onCreateScratchpad: () => {
+      showAndFocusWindow();
+      mainWindow?.webContents.send('tray:create-scratchpad');
+    },
+    onQuit: () => app.quit(),
+  });
+  systemTray.create();
+  systemTray.updateRunningCount(workspace);
+
+  // Intercept close to hide to tray when the setting is enabled
+  setupCloseToTray(mainWindow, () => {
+    const currentWorkspace = appService?.getCachedWorkspace();
+    return currentWorkspace?.settings.minimizeToTray === true;
+  });
+
+  // Keep tray status in sync when workspace changes
+  appService.on('workspace-updated', (updatedWorkspace) => {
+    systemTray?.updateRunningCount(updatedWorkspace);
+  });
+
   if (!app.isPackaged) {
     mainWindow.webContents.openDevTools({ mode: 'detach' });
   }
+
+  autoUpdateService.start();
 }
 
 app.whenReady().then(bootstrap);
 
 app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit();
-  }
+  // When minimize-to-tray is enabled, don't quit on window close
+  if (process.platform === 'darwin') return;
+
+  const windows = BrowserWindow.getAllWindows();
+  const allHidden = windows.length > 0 && windows.every((w) => !w.isVisible());
+  if (allHidden) return;
+
+  app.quit();
 });
 
 app.on('activate', async () => {
   if (BrowserWindow.getAllWindows().length === 0) {
     await bootstrap();
+  } else {
+    showAndFocusWindow();
   }
 });
 
 app.on('before-quit', async () => {
+  autoUpdateService?.dispose();
+  autoUpdateService = undefined;
+  systemTray?.dispose();
   await appService?.dispose();
 });

src/main/ipc/registerIpcHandlers.ts

@@ -3,11 +3,14 @@ import type { BrowserWindow } from 'electron';
 
 import { ipcChannels } from '@shared/contracts/channels';
 import type {
+  BranchSessionInput,
   CancelSessionTurnInput,
   CreateSessionInput,
   DismissSessionMcpAuthInput,
   DismissSessionPlanReviewInput,
   DeleteSessionInput,
+  EditAndResendSessionMessageInput,
+  RegenerateSessionMessageInput,
   StartSessionMcpAuthInput,
   DuplicateSessionInput,
   RenameSessionInput,
@@ -25,6 +28,7 @@ import type {
   SetProjectAgentProfileEnabledInput,
   SetSessionArchivedInput,
   SetSessionInteractionModeInput,
+  SetSessionMessagePinnedInput,
   SetSessionPinnedInput,
   SetTerminalHeightInput,
   ResizeTerminalInput,
@@ -36,11 +40,18 @@ import type { QuerySessionsInput } from '@shared/domain/sessionLibrary';
 import type { AppearanceTheme } from '@shared/domain/tooling';
 
 import { AryxAppService } from '@main/AryxAppService';
+import { AutoUpdateService } from '@main/services/autoUpdater';
+import { createDesktopNotificationHandler } from '@main/services/desktopNotifications';
 import { applyTitleBarTheme } from '@main/windows/titleBarTheme';
+import type { UpdateStatus } from '@shared/contracts/ipc';
 
 const { ipcMain } = electron;
 
-export function registerIpcHandlers(window: BrowserWindow, service: AryxAppService): void {
+export function registerIpcHandlers(
+  window: BrowserWindow,
+  service: AryxAppService,
+  autoUpdateService: AutoUpdateService,
+): void {
   ipcMain.handle(ipcChannels.describeSidecarCapabilities, () => service.describeSidecarCapabilities());
   ipcMain.handle(ipcChannels.refreshSidecarCapabilities, () => service.refreshSidecarCapabilities());
   ipcMain.handle(ipcChannels.loadWorkspace, () => service.loadWorkspace());
@@ -86,6 +97,18 @@ export function registerIpcHandlers(window: BrowserWindow, service: AryxAppServi
     ipcChannels.setTerminalHeight,
     (_event, input: SetTerminalHeightInput) => service.setTerminalHeight(input.height),
   );
+  ipcMain.handle(
+    ipcChannels.setNotificationsEnabled,
+    (_event, enabled: boolean) => service.setNotificationsEnabled(enabled),
+  );
+  ipcMain.handle(
+    ipcChannels.setMinimizeToTray,
+    (_event, enabled: boolean) => service.setMinimizeToTray(enabled),
+  );
+  ipcMain.handle(ipcChannels.checkForUpdates, () => autoUpdateService.checkForUpdates());
+  ipcMain.handle(ipcChannels.installUpdate, () => {
+    autoUpdateService.installUpdate();
+  });
   ipcMain.handle(ipcChannels.saveMcpServer, (_event, input: SaveMcpServerInput) =>
     service.saveMcpServer(input.server),
   );
@@ -126,6 +149,12 @@ export function registerIpcHandlers(window: BrowserWindow, service: AryxAppServi
   ipcMain.handle(ipcChannels.duplicateSession, (_event, input: DuplicateSessionInput) =>
     service.duplicateSession(input.sessionId),
   );
+  ipcMain.handle(ipcChannels.branchSession, (_event, input: BranchSessionInput) =>
+    service.branchSession(input.sessionId, input.messageId),
+  );
+  ipcMain.handle(ipcChannels.setSessionMessagePinned, (_event, input: SetSessionMessagePinnedInput) =>
+    service.setSessionMessagePinned(input.sessionId, input.messageId, input.isPinned),
+  );
   ipcMain.handle(ipcChannels.renameSession, (_event, input: RenameSessionInput) =>
     service.renameSession(input.sessionId, input.title),
   );
@@ -138,6 +167,12 @@ export function registerIpcHandlers(window: BrowserWindow, service: AryxAppServi
   ipcMain.handle(ipcChannels.deleteSession, (_event, input: DeleteSessionInput) =>
     service.deleteSession(input.sessionId),
   );
+  ipcMain.handle(ipcChannels.regenerateSessionMessage, (_event, input: RegenerateSessionMessageInput) =>
+    service.regenerateSessionMessage(input.sessionId, input.messageId),
+  );
+  ipcMain.handle(ipcChannels.editAndResendSessionMessage, (_event, input: EditAndResendSessionMessageInput) =>
+    service.editAndResendSessionMessage(input.sessionId, input.messageId, input.content, input.attachments),
+  );
   ipcMain.handle(ipcChannels.sendSessionMessage, (_event, input: SendSessionMessageInput) =>
     service.sendSessionMessage(input.sessionId, input.content, input.attachments, input.messageMode),
   );
@@ -183,6 +218,24 @@ export function registerIpcHandlers(window: BrowserWindow, service: AryxAppServi
     window.webContents.send(ipcChannels.sessionEvent, event);
   });
 
+  // Desktop notifications for run completion, failure, and approval requests
+  const handleNotification = createDesktopNotificationHandler(
+    () => window,
+    () => service.getCachedWorkspace(),
+    (sessionId) => service.selectSession(sessionId),
+  );
+  service.on('session-event', handleNotification);
+
+  const sendUpdateStatus = (status: UpdateStatus) => {
+    if (!window.isDestroyed()) {
+      window.webContents.send(ipcChannels.updateStatus, status);
+    }
+  };
+  autoUpdateService.onStatus(sendUpdateStatus);
+  window.webContents.on('did-finish-load', () => {
+    sendUpdateStatus(autoUpdateService.getStatus());
+  });
+
   service.on('terminal-data', (data) => {
     window.webContents.send(ipcChannels.terminalData, data);
   });

src/main/persistence/workspaceRepository.ts

@@ -6,7 +6,7 @@ import { isScratchpadProject, mergeScratchpadProject } from '@shared/domain/proj
 import { normalizeDiscoveredToolingState } from '@shared/domain/discoveredTooling';
 import { normalizeProjectCustomizationState } from '@shared/domain/projectCustomization';
 import { normalizeSessionRunRecords } from '@shared/domain/runTimeline';
-import type { SessionRecord } from '@shared/domain/session';
+import { normalizeSessionBranchOrigin, type SessionRecord } from '@shared/domain/session';
 import {
   normalizeSessionToolingSelection,
   normalizeWorkspaceSettings,
@@ -81,6 +81,7 @@ export class WorkspaceRepository {
     const sessions = await Promise.all((stored.sessions ?? []).map(async (session): Promise<SessionRecord> => {
       const normalizedSession: SessionRecord = {
         ...session,
+        branchOrigin: normalizeSessionBranchOrigin(session.branchOrigin),
         runs: normalizeSessionRunRecords(session.runs),
         tooling: normalizeSessionToolingSelection(session.tooling),
         approvalSettings: normalizeSessionApprovalSettings(session.approvalSettings),

src/main/services/autoUpdater.ts

@@ -0,0 +1,281 @@
+import electronUpdater from 'electron-updater';
+
+import type {
+  UpdateDownloadProgress,
+  UpdateStatus,
+} from '@shared/contracts/ipc';
+
+interface AutoUpdateInfoLike {
+  version?: string | null;
+  releaseDate?: string | null;
+  releaseNotes?: unknown;
+}
+
+interface AutoUpdateProgressLike {
+  bytesPerSecond: number;
+  percent: number;
+  total: number;
+  transferred: number;
+}
+
+type AutoUpdateListener = (...args: any[]) => void;
+
+interface AutoUpdaterLike {
+  autoDownload: boolean;
+  autoInstallOnAppQuit: boolean;
+  on(event: string, listener: AutoUpdateListener): this;
+  removeListener(event: string, listener: AutoUpdateListener): this;
+  checkForUpdates(): Promise<unknown>;
+  quitAndInstall(): void;
+}
+
+export interface AutoUpdateScheduler {
+  setTimeout(callback: () => void, delayMs: number): unknown;
+  clearTimeout(handle: unknown): void;
+  setInterval(callback: () => void, delayMs: number): unknown;
+  clearInterval(handle: unknown): void;
+}
+
+export interface AutoUpdateServiceOptions {
+  isPackaged: boolean;
+  startupDelayMs?: number;
+  recheckIntervalMs?: number;
+  updater?: AutoUpdaterLike;
+  scheduler?: AutoUpdateScheduler;
+}
+
+const DEFAULT_STARTUP_DELAY_MS = 10_000;
+const DEFAULT_RECHECK_INTERVAL_MS = 4 * 60 * 60 * 1000;
+
+const defaultScheduler: AutoUpdateScheduler = {
+  setTimeout: (callback, delayMs) => globalThis.setTimeout(callback, delayMs),
+  clearTimeout: (handle) => globalThis.clearTimeout(handle as ReturnType<typeof setTimeout>),
+  setInterval: (callback, delayMs) => globalThis.setInterval(callback, delayMs),
+  clearInterval: (handle) => globalThis.clearInterval(handle as ReturnType<typeof setInterval>),
+};
+
+function normalizeOptionalString(value: string | null | undefined): string | undefined {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed : undefined;
+}
+
+function normalizeReleaseNotes(value: unknown): string | undefined {
+  if (typeof value === 'string') {
+    return normalizeOptionalString(value);
+  }
+
+  if (!Array.isArray(value)) {
+    return undefined;
+  }
+
+  const notes = value
+    .map((item) => {
+      if (typeof item === 'string') {
+        return normalizeOptionalString(item);
+      }
+
+      if (!item || typeof item !== 'object') {
+        return undefined;
+      }
+
+      const record = item as { note?: unknown; version?: unknown };
+      const version = typeof record.version === 'string' ? normalizeOptionalString(record.version) : undefined;
+      const note = typeof record.note === 'string' ? normalizeOptionalString(record.note) : undefined;
+      if (version && note) {
+        return `${version}\n${note}`;
+      }
+
+      return note ?? version;
+    })
+    .filter((entry): entry is string => Boolean(entry));
+
+  return notes.length > 0 ? notes.join('\n\n') : undefined;
+}
+
+function normalizeProgress(progress: AutoUpdateProgressLike): UpdateDownloadProgress {
+  return {
+    bytesPerSecond: progress.bytesPerSecond,
+    percent: progress.percent,
+    total: progress.total,
+    transferred: progress.transferred,
+  };
+}
+
+function createStatusFromInfo(
+  state: Extract<UpdateStatus['state'], 'available' | 'downloaded'>,
+  info: AutoUpdateInfoLike,
+): UpdateStatus {
+  return {
+    state,
+    version: normalizeOptionalString(info.version),
+    releaseDate: normalizeOptionalString(info.releaseDate),
+    releaseNotes: normalizeReleaseNotes(info.releaseNotes),
+  };
+}
+
+function resolveErrorMessage(error: unknown): string {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  if (typeof error === 'string') {
+    return error;
+  }
+
+  return 'Unknown update error.';
+}
+
+export class AutoUpdateService {
+  private readonly updater: AutoUpdaterLike;
+
+  private readonly scheduler: AutoUpdateScheduler;
+
+  private readonly listeners = new Set<(status: UpdateStatus) => void>();
+
+  private status: UpdateStatus = { state: 'idle' };
+
+  private started = false;
+
+  private initialCheckHandle?: unknown;
+
+  private periodicCheckHandle?: unknown;
+
+  private pendingCheck?: Promise<UpdateStatus>;
+
+  private readonly checkingListener = () => {
+    this.publishStatus({ state: 'checking' });
+  };
+
+  private readonly availableListener = (info: AutoUpdateInfoLike) => {
+    this.publishStatus(createStatusFromInfo('available', info));
+  };
+
+  private readonly notAvailableListener = () => {
+    this.publishStatus({ state: 'idle' });
+  };
+
+  private readonly progressListener = (progress: AutoUpdateProgressLike) => {
+    this.publishStatus({
+      ...this.status,
+      state: 'downloading',
+      downloadProgress: normalizeProgress(progress),
+    });
+  };
+
+  private readonly downloadedListener = (info: AutoUpdateInfoLike) => {
+    this.publishStatus(createStatusFromInfo('downloaded', info));
+  };
+
+  private readonly errorListener = (error: unknown) => {
+    this.publishStatus({
+      ...this.status,
+      state: 'error',
+      error: resolveErrorMessage(error),
+    });
+  };
+
+  constructor(private readonly options: AutoUpdateServiceOptions) {
+    this.updater = options.updater
+      ?? (electronUpdater as { autoUpdater: AutoUpdaterLike }).autoUpdater;
+    this.scheduler = options.scheduler ?? defaultScheduler;
+    this.updater.autoDownload = true;
+    this.updater.autoInstallOnAppQuit = false;
+
+    this.updater.on('checking-for-update', this.checkingListener);
+    this.updater.on('update-available', this.availableListener);
+    this.updater.on('update-not-available', this.notAvailableListener);
+    this.updater.on('download-progress', this.progressListener);
+    this.updater.on('update-downloaded', this.downloadedListener);
+    this.updater.on('error', this.errorListener);
+  }
+
+  start(): void {
+    if (this.started || !this.options.isPackaged) {
+      return;
+    }
+
+    this.started = true;
+    this.initialCheckHandle = this.scheduler.setTimeout(() => {
+      void this.checkForUpdates();
+    }, this.options.startupDelayMs ?? DEFAULT_STARTUP_DELAY_MS);
+    this.periodicCheckHandle = this.scheduler.setInterval(() => {
+      void this.checkForUpdates();
+    }, this.options.recheckIntervalMs ?? DEFAULT_RECHECK_INTERVAL_MS);
+  }
+
+  getStatus(): UpdateStatus {
+    return this.cloneStatus(this.status);
+  }
+
+  onStatus(listener: (status: UpdateStatus) => void): () => void {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  async checkForUpdates(): Promise<UpdateStatus> {
+    if (!this.options.isPackaged) {
+      return this.getStatus();
+    }
+
+    if (this.pendingCheck) {
+      return this.pendingCheck;
+    }
+
+    const request = this.updater.checkForUpdates()
+      .catch((error) => {
+        this.errorListener(error);
+      })
+      .then(() => this.getStatus())
+      .finally(() => {
+        if (this.pendingCheck === request) {
+          this.pendingCheck = undefined;
+        }
+      });
+
+    this.pendingCheck = request;
+    return request;
+  }
+
+  installUpdate(): void {
+    if (this.status.state !== 'downloaded') {
+      return;
+    }
+
+    this.updater.quitAndInstall();
+  }
+
+  dispose(): void {
+    if (this.initialCheckHandle !== undefined) {
+      this.scheduler.clearTimeout(this.initialCheckHandle);
+      this.initialCheckHandle = undefined;
+    }
+
+    if (this.periodicCheckHandle !== undefined) {
+      this.scheduler.clearInterval(this.periodicCheckHandle);
+      this.periodicCheckHandle = undefined;
+    }
+
+    this.updater.removeListener('checking-for-update', this.checkingListener);
+    this.updater.removeListener('update-available', this.availableListener);
+    this.updater.removeListener('update-not-available', this.notAvailableListener);
+    this.updater.removeListener('download-progress', this.progressListener);
+    this.updater.removeListener('update-downloaded', this.downloadedListener);
+    this.updater.removeListener('error', this.errorListener);
+    this.listeners.clear();
+  }
+
+  private publishStatus(status: UpdateStatus): void {
+    this.status = this.cloneStatus(status);
+    for (const listener of this.listeners) {
+      listener(this.cloneStatus(this.status));
+    }
+  }
+
+  private cloneStatus(status: UpdateStatus): UpdateStatus {
+    return status.downloadProgress
+      ? { ...status, downloadProgress: { ...status.downloadProgress } }
+      : { ...status };
+  }
+}

src/main/services/desktopNotifications.ts

@@ -0,0 +1,86 @@
+import electron from 'electron';
+import type { BrowserWindow } from 'electron';
+
+import type { SessionEventRecord } from '@shared/domain/event';
+import type { WorkspaceState } from '@shared/domain/workspace';
+
+const { Notification } = electron;
+
+/**
+ * Creates a handler that shows native OS notifications for session run
+ * completions, failures, and approval requests when the window is unfocused.
+ *
+ * Clicking a notification focuses the window and selects the relevant session.
+ */
+export function createDesktopNotificationHandler(
+  getWindow: () => BrowserWindow | undefined,
+  getWorkspace: () => WorkspaceState | undefined,
+  selectSession: (sessionId: string) => Promise<WorkspaceState>,
+): (event: SessionEventRecord) => void {
+  const runningSessions = new Set<string>();
+  const notifiedApprovals = new Set<string>();
+
+  return (event: SessionEventRecord) => {
+    const window = getWindow();
+    if (window?.isFocused()) return;
+
+    const workspace = getWorkspace();
+    if (workspace?.settings.notificationsEnabled === false) return;
+
+    if (!Notification.isSupported()) return;
+
+    const session = workspace?.sessions.find((s) => s.id === event.sessionId);
+    const sessionTitle = session?.title ?? 'Session';
+
+    // Track running sessions to detect completion/failure transitions
+    if (event.kind === 'status') {
+      if (event.status === 'running') {
+        runningSessions.add(event.sessionId);
+        return;
+      }
+
+      if (!runningSessions.has(event.sessionId)) return;
+      runningSessions.delete(event.sessionId);
+
+      if (event.status === 'idle') {
+        showNotification('Run completed', sessionTitle, event.sessionId, window, selectSession);
+      } else if (event.status === 'error') {
+        showNotification('Run failed', sessionTitle, event.sessionId, window, selectSession);
+      }
+      return;
+    }
+
+    // Detect new approval requests from run-updated events
+    if (event.kind === 'run-updated' && event.run) {
+      const approvalEvent = [...event.run.events]
+        .reverse()
+        .find((e) => e.kind === 'approval' && e.status === 'running');
+
+      if (approvalEvent?.approvalId && !notifiedApprovals.has(approvalEvent.approvalId)) {
+        notifiedApprovals.add(approvalEvent.approvalId);
+        const body = approvalEvent.approvalTitle
+          ? `${sessionTitle}: ${approvalEvent.approvalTitle}`
+          : sessionTitle;
+        showNotification('Approval needed', body, event.sessionId, window, selectSession);
+      }
+    }
+  };
+}
+
+function showNotification(
+  title: string,
+  body: string,
+  sessionId: string,
+  window: BrowserWindow | undefined,
+  selectSession: (sessionId: string) => Promise<WorkspaceState>,
+): void {
+  const notification = new Notification({ title, body, silent: false });
+
+  notification.on('click', () => {
+    window?.show();
+    window?.focus();
+    void selectSession(sessionId);
+  });
+
+  notification.show();
+}

src/main/services/systemTray.ts

@@ -0,0 +1,142 @@
+import electron from 'electron';
+import { join } from 'node:path';
+
+import type { WorkspaceState } from '@shared/domain/workspace';
+
+const { app, Menu, Tray, nativeImage, BrowserWindow } = electron;
+type TrayType = InstanceType<typeof Tray>;
+type NativeImageType = ReturnType<typeof nativeImage.createFromPath>;
+
+export interface SystemTrayOptions {
+  onShowWindow: () => void;
+  onCreateScratchpad: () => void;
+  onQuit: () => void;
+}
+
+function resolveTrayIcon(): NativeImageType {
+  const basePath = app.getAppPath();
+
+  if (process.platform === 'win32') {
+    return nativeImage.createFromPath(join(basePath, 'assets', 'icons', 'windows', 'icon.ico'));
+  }
+
+  // Use a smaller icon for tray on Linux/macOS — 32x32 for crispness
+  const pngPath =
+    process.platform === 'linux'
+      ? join(basePath, 'assets', 'icons', 'linux', 'icons', '32x32.png')
+      : join(basePath, 'assets', 'icons', 'icon.png');
+
+  const image = nativeImage.createFromPath(pngPath);
+
+  // Resize to 16x16 for system tray standard size
+  return image.resize({ width: 16, height: 16 });
+}
+
+function buildContextMenu(options: SystemTrayOptions, runningCount: number): Electron.Menu {
+  const statusLabel =
+    runningCount > 0 ? `${runningCount} session${runningCount > 1 ? 's' : ''} running` : 'No active sessions';
+
+  return Menu.buildFromTemplate([
+    { label: 'Open Aryx', click: options.onShowWindow, type: 'normal' },
+    { type: 'separator' },
+    { label: 'Quick Scratchpad', click: options.onCreateScratchpad, type: 'normal' },
+    { type: 'separator' },
+    { label: statusLabel, enabled: false, type: 'normal' },
+    { type: 'separator' },
+    { label: 'Quit', click: options.onQuit, type: 'normal' },
+  ]);
+}
+
+export class SystemTray {
+  private tray: TrayType | null = null;
+  private options: SystemTrayOptions;
+  private runningCount = 0;
+
+  constructor(options: SystemTrayOptions) {
+    this.options = options;
+  }
+
+  create(): void {
+    if (this.tray) return;
+
+    const icon = resolveTrayIcon();
+    this.tray = new Tray(icon);
+    this.tray.setToolTip('Aryx');
+    this.tray.setContextMenu(buildContextMenu(this.options, this.runningCount));
+
+    this.tray.on('click', () => {
+      this.options.onShowWindow();
+    });
+  }
+
+  updateRunningCount(workspace: WorkspaceState): void {
+    const count = workspace.sessions.filter((s) => !s.isArchived && s.status === 'running').length;
+    if (count === this.runningCount) return;
+
+    this.runningCount = count;
+    this.tray?.setContextMenu(buildContextMenu(this.options, count));
+
+    const tooltip = count > 0 ? `Aryx — ${count} running` : 'Aryx';
+    this.tray?.setToolTip(tooltip);
+  }
+
+  isMinimizeToTrayEnabled(workspace: WorkspaceState): boolean {
+    return workspace.settings.minimizeToTray === true;
+  }
+
+  dispose(): void {
+    this.tray?.destroy();
+    this.tray = null;
+  }
+}
+
+/**
+ * Intercept window close to hide to tray instead of quitting, when the setting is enabled.
+ * Returns true if the close was intercepted (window hidden), false if it should proceed normally.
+ */
+export function setupCloseToTray(
+  window: Electron.BrowserWindow,
+  getMinimizeToTray: () => boolean,
+): void {
+  let forceQuit = false;
+
+  // On macOS, Cmd+Q triggers before-quit before the close event
+  app.on('before-quit', () => {
+    forceQuit = true;
+  });
+
+  window.on('close', (event) => {
+    if (forceQuit) return;
+
+    if (getMinimizeToTray()) {
+      event.preventDefault();
+      window.hide();
+
+      // On macOS, also hide from the dock when minimized to tray
+      if (process.platform === 'darwin') {
+        app.dock?.hide();
+      }
+    }
+  });
+}
+
+/**
+ * Show and focus the main window, restoring from tray if hidden.
+ */
+export function showAndFocusWindow(): void {
+  const windows = BrowserWindow.getAllWindows();
+  const mainWindow = windows[0];
+  if (!mainWindow) return;
+
+  // On macOS, show the dock icon again
+  if (process.platform === 'darwin') {
+    app.dock?.show();
+  }
+
+  if (mainWindow.isMinimized()) {
+    mainWindow.restore();
+  }
+
+  mainWindow.show();
+  mainWindow.focus();
+}

src/preload/index.ts

@@ -26,6 +26,10 @@ const api: ElectronApi = {
   setPatternFavorite: (input) => ipcRenderer.invoke(ipcChannels.setPatternFavorite, input),
   setTheme: (theme) => ipcRenderer.invoke(ipcChannels.setTheme, theme),
   setTerminalHeight: (input) => ipcRenderer.invoke(ipcChannels.setTerminalHeight, input),
+  setNotificationsEnabled: (enabled) => ipcRenderer.invoke(ipcChannels.setNotificationsEnabled, enabled),
+  setMinimizeToTray: (enabled) => ipcRenderer.invoke(ipcChannels.setMinimizeToTray, enabled),
+  checkForUpdates: () => ipcRenderer.invoke(ipcChannels.checkForUpdates),
+  installUpdate: () => ipcRenderer.invoke(ipcChannels.installUpdate),
   saveMcpServer: (input) => ipcRenderer.invoke(ipcChannels.saveMcpServer, input),
   deleteMcpServer: (serverId) => ipcRenderer.invoke(ipcChannels.deleteMcpServer, serverId),
   saveLspProfile: (input) => ipcRenderer.invoke(ipcChannels.saveLspProfile, input),
@@ -45,10 +49,14 @@ const api: ElectronApi = {
     ipcRenderer.invoke(ipcChannels.updateSessionApprovalSettings, input),
   createSession: (input) => ipcRenderer.invoke(ipcChannels.createSession, input),
   duplicateSession: (input) => ipcRenderer.invoke(ipcChannels.duplicateSession, input),
+  branchSession: (input) => ipcRenderer.invoke(ipcChannels.branchSession, input),
+  setSessionMessagePinned: (input) => ipcRenderer.invoke(ipcChannels.setSessionMessagePinned, input),
   renameSession: (input) => ipcRenderer.invoke(ipcChannels.renameSession, input),
   setSessionPinned: (input) => ipcRenderer.invoke(ipcChannels.setSessionPinned, input),
   setSessionArchived: (input) => ipcRenderer.invoke(ipcChannels.setSessionArchived, input),
   deleteSession: (input) => ipcRenderer.invoke(ipcChannels.deleteSession, input),
+  regenerateSessionMessage: (input) => ipcRenderer.invoke(ipcChannels.regenerateSessionMessage, input),
+  editAndResendSessionMessage: (input) => ipcRenderer.invoke(ipcChannels.editAndResendSessionMessage, input),
   sendSessionMessage: (input) => ipcRenderer.invoke(ipcChannels.sendSessionMessage, input),
   cancelSessionTurn: (input) => ipcRenderer.invoke(ipcChannels.cancelSessionTurn, input),
   resolveSessionApproval: (input) => ipcRenderer.invoke(ipcChannels.resolveSessionApproval, input),
@@ -94,6 +102,19 @@ const api: ElectronApi = {
     ipcRenderer.on(ipcChannels.sessionEvent, handler);
     return () => ipcRenderer.off(ipcChannels.sessionEvent, handler);
   },
+  onUpdateStatus: (listener) => {
+    const handler = (_event: Electron.IpcRendererEvent, status: Parameters<typeof listener>[0]) =>
+      listener(status);
+
+    ipcRenderer.on(ipcChannels.updateStatus, handler);
+    return () => ipcRenderer.off(ipcChannels.updateStatus, handler);
+  },
+  onTrayCreateScratchpad: (listener) => {
+    const handler = () => listener();
+
+    ipcRenderer.on(ipcChannels.trayCreateScratchpad, handler);
+    return () => ipcRenderer.off(ipcChannels.trayCreateScratchpad, handler);
+  },
 };
 
 contextBridge.exposeInMainWorld('aryxApi', api);

src/renderer/App.tsx

@@ -1,11 +1,14 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { AppShell } from '@renderer/components/AppShell';
 import { ActivityPanel } from '@renderer/components/ActivityPanel';
 import { ChatPane } from '@renderer/components/ChatPane';
+import { CommandPalette } from '@renderer/components/CommandPalette';
 import { DiscoveredToolingModal } from '@renderer/components/DiscoveredToolingModal';
+import { KeyboardShortcutsPanel } from '@renderer/components/KeyboardShortcutsPanel';
 import { NewSessionModal } from '@renderer/components/NewSessionModal';
 import { ProjectSettingsPanel } from '@renderer/components/ProjectSettingsPanel';
+import { SessionSearchPanel } from '@renderer/components/SessionSearchPanel';
 import { SettingsPanel } from '@renderer/components/SettingsPanel';
 import { Sidebar } from '@renderer/components/Sidebar';
 import { TerminalPanel, DEFAULT_HEIGHT as DEFAULT_TERMINAL_HEIGHT, MIN_HEIGHT as MIN_TERMINAL_HEIGHT } from '@renderer/components/TerminalPanel';
@@ -112,6 +115,9 @@ export default function App() {
   const [projectSettingsId, setProjectSettingsId] = useState<string>();
   const [newSessionProjectId, setNewSessionProjectId] = useState<string>();
   const [showDiscoveryModal, setShowDiscoveryModal] = useState(false);
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
+  const [showShortcuts, setShowShortcuts] = useState(false);
+  const [showSearch, setShowSearch] = useState(false);
 
   // Terminal state
   const [terminalOpen, setTerminalOpen] = useState(false);
@@ -264,14 +270,164 @@ export default function App() {
     if (hasPendingDiscoveries) setShowDiscoveryModal(true);
   }, [hasPendingDiscoveries]);
 
-  // Terminal: Ctrl+` toggle + track running state
+  // Keep refs for values the keyboard handler reads — avoids re-registering on every render.
+  const workspaceRef = useRef(workspace);
+  workspaceRef.current = workspace;
+  const showSettingsRef = useRef(showSettings);
+  showSettingsRef.current = showSettings;
+  const showShortcutsRef = useRef(showShortcuts);
+  showShortcutsRef.current = showShortcuts;
+  const commandPaletteOpenRef = useRef(commandPaletteOpen);
+  commandPaletteOpenRef.current = commandPaletteOpen;
+  const projectSettingsIdRef = useRef(projectSettingsId);
+  projectSettingsIdRef.current = projectSettingsId;
+  const newSessionProjectIdRef = useRef(newSessionProjectId);
+  newSessionProjectIdRef.current = newSessionProjectId;
+
+  // ── Global keyboard shortcuts ──
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
+      const mod = e.ctrlKey || e.metaKey;
+      const ws = workspaceRef.current;
+
+      // Ignore keyboard shortcuts while typing in inputs (except our global combos)
+      const target = e.target as HTMLElement;
+      const isInput = target.tagName === 'INPUT'
+        || target.tagName === 'TEXTAREA'
+        || target.isContentEditable;
+
+      // ── Ctrl+` — Toggle terminal ──
       if (e.ctrlKey && e.key === '`') {
         e.preventDefault();
         setTerminalOpen((prev) => !prev);
+        return;
+      }
+
+      // ── Ctrl/Cmd+K — Command palette ──
+      if (mod && e.key === 'k') {
+        e.preventDefault();
+        setCommandPaletteOpen((prev) => !prev);
+        return;
+      }
+
+      // ── Ctrl/Cmd+/ — Keyboard shortcuts cheat sheet ──
+      if (mod && e.key === '/') {
+        e.preventDefault();
+        setShowShortcuts((prev) => !prev);
+        return;
+      }
+
+      // ── Ctrl/Cmd+Shift+F — Search sessions ──
+      if (mod && e.shiftKey && e.key === 'F') {
+        e.preventDefault();
+        setShowSearch((prev) => !prev);
+        return;
+      }
+
+      // ── Ctrl/Cmd+, — Open settings ──
+      if (mod && e.key === ',') {
+        e.preventDefault();
+        setShowSettings(true);
+        return;
+      }
+
+      // ── Escape — Close overlays or cancel running turn ──
+      if (e.key === 'Escape') {
+        // Close overlays in priority order (command palette and shortcuts use their own capture listeners)
+        if (projectSettingsIdRef.current) {
+          e.preventDefault();
+          setProjectSettingsId(undefined);
+          return;
+        }
+        if (showSettingsRef.current) {
+          e.preventDefault();
+          setShowSettings(false);
+          return;
+        }
+        if (newSessionProjectIdRef.current) {
+          e.preventDefault();
+          setNewSessionProjectId(undefined);
+          return;
+        }
+
+        // If nothing is open, cancel a running turn on the selected session
+        if (ws) {
+          const session = ws.sessions.find((s) => s.id === ws.selectedSessionId);
+          if (session?.status === 'running' && !isInput) {
+            e.preventDefault();
+            void api.cancelSessionTurn({ sessionId: session.id });
+            return;
+          }
+        }
+        return;
+      }
+
+      // Skip remaining shortcuts when focus is in an input field
+      if (isInput) return;
+
+      // ── Ctrl/Cmd+N — New session ──
+      if (mod && e.key === 'n') {
+        e.preventDefault();
+        if (ws) {
+          const defaultProjectId =
+            ws.selectedProjectId ??
+            ws.projects.find((p) => !isScratchpadProject(p))?.id;
+          if (defaultProjectId) {
+            setNewSessionProjectId(defaultProjectId);
+          }
+        }
+        return;
+      }
+
+      // ── Ctrl/Cmd+W — Archive / close current session ──
+      if (mod && e.key === 'w') {
+        e.preventDefault();
+        if (ws?.selectedSessionId) {
+          void api.setSessionArchived({ sessionId: ws.selectedSessionId, isArchived: true });
+        }
+        return;
+      }
+
+      // ── Ctrl+Tab / Ctrl+Shift+Tab — Cycle sessions ──
+      if (e.ctrlKey && e.key === 'Tab') {
+        e.preventDefault();
+        if (ws) {
+          const activeSessions = ws.sessions.filter((s) => !s.isArchived);
+          if (activeSessions.length > 1) {
+            const currentIdx = activeSessions.findIndex((s) => s.id === ws.selectedSessionId);
+            const direction = e.shiftKey ? -1 : 1;
+            const nextIdx = (currentIdx + direction + activeSessions.length) % activeSessions.length;
+            void api.selectSession(activeSessions[nextIdx].id);
+          }
+        }
+        return;
+      }
+
+      // ── Ctrl/Cmd+. — Quick approve pending tool call ──
+      if (mod && e.key === '.') {
+        e.preventDefault();
+        if (ws?.selectedSessionId) {
+          const session = ws.sessions.find((s) => s.id === ws.selectedSessionId);
+          if (session?.pendingApproval?.status === 'pending') {
+            void api.resolveSessionApproval({
+              sessionId: session.id,
+              approvalId: session.pendingApproval.id,
+              decision: 'approved',
+            });
+          }
+        }
+        return;
+      }
+
+      // ── Ctrl/Cmd+L — Focus the composer ──
+      if (mod && e.key === 'l') {
+        e.preventDefault();
+        const editor = document.querySelector<HTMLElement>('.markdown-composer-editable');
+        editor?.focus();
+        return;
       }
     };
+
     window.addEventListener('keydown', handleKeyDown);
 
     // Track terminal running state via exit events
@@ -329,6 +485,13 @@ export default function App() {
     }
   }, [api, workspace]);
 
+  // Listen for tray "Quick Scratchpad" action
+  const scratchpadRef = useRef(handleCreateScratchpad);
+  scratchpadRef.current = handleCreateScratchpad;
+  useEffect(() => {
+    return api.onTrayCreateScratchpad(() => scratchpadRef.current());
+  }, [api]);
+
   const projectForSettings = useMemo(
     () => workspace?.projects.find((p) => p.id === projectSettingsId),
     [workspace?.projects, projectSettingsId],
@@ -408,6 +571,23 @@ export default function App() {
               autoApprovedToolNames: settings.autoApprovedToolNames,
             });
           }}
+          onBranchFromMessage={(messageId) => {
+            void api.branchSession({ sessionId: selectedSession.id, messageId });
+          }}
+          onPinMessage={(messageId, isPinned) => {
+            void api.setSessionMessagePinned({ sessionId: selectedSession.id, messageId, isPinned });
+          }}
+          onRegenerateMessage={(messageId) => {
+            void api.regenerateSessionMessage({ sessionId: selectedSession.id, messageId });
+          }}
+          onEditAndResendMessage={(messageId, content) => {
+            void api.editAndResendSessionMessage({ sessionId: selectedSession.id, messageId, content });
+          }}
+          branchOriginLabel={
+            selectedSession.branchOrigin
+              ? workspace.sessions.find((s) => s.id === selectedSession.branchOrigin!.sourceSessionId)?.title
+              : undefined
+          }
           availableModels={availableModels}
           mcpProbingServerIds={workspace.mcpProbingServerIds}
           onTerminalToggle={handleTerminalToggle}
@@ -436,6 +616,7 @@ export default function App() {
     content = (
       <WelcomePane
         hasProjects={hasUserProjects}
+        connectionStatus={sidecarCapabilities?.connection.status}
         onAddProject={() => void api.addProject()}
         onNewScratchpad={() => handleCreateScratchpad()}
         onOpenSettings={() => setShowSettings(true)}
@@ -479,6 +660,10 @@ export default function App() {
           await api.savePattern({ pattern });
         }}
         onSetTheme={(theme) => void api.setTheme(theme)}
+        notificationsEnabled={workspace.settings.notificationsEnabled !== false}
+        onSetNotificationsEnabled={(enabled) => void api.setNotificationsEnabled(enabled)}
+        minimizeToTray={workspace.settings.minimizeToTray === true}
+        onSetMinimizeToTray={(enabled) => void api.setMinimizeToTray(enabled)}
         onOpenAppDataFolder={() => void api.openAppDataFolder()}
         onResetLocalWorkspace={async () => {
           const fresh = await api.resetLocalWorkspace();
@@ -607,6 +792,54 @@ export default function App() {
           }}
         />
       )}
+
+      {commandPaletteOpen && workspace && (
+        <CommandPalette
+          workspace={workspace}
+          onClose={() => setCommandPaletteOpen(false)}
+          onSelectSession={(sessionId) => {
+            void api.selectSession(sessionId);
+          }}
+          onSelectProject={(projectId) => {
+            void api.selectProject(projectId);
+          }}
+          onNewSession={(projectId) => {
+            setNewSessionProjectId(projectId);
+          }}
+          onCreateScratchpad={handleCreateScratchpad}
+          onOpenSettings={() => setShowSettings(true)}
+          onOpenProjectSettings={(projectId) => setProjectSettingsId(projectId)}
+          onToggleTerminal={handleTerminalToggle}
+          onSetTheme={(theme) => void api.setTheme(theme)}
+          onDuplicateSession={(sessionId) => {
+            void api.duplicateSession({ sessionId });
+          }}
+          onPinSession={(sessionId, isPinned) => {
+            void api.setSessionPinned({ sessionId, isPinned });
+          }}
+          onArchiveSession={(sessionId, isArchived) => {
+            void api.setSessionArchived({ sessionId, isArchived });
+          }}
+          onAddProject={() => void api.addProject()}
+          onOpenAppDataFolder={() => void api.openAppDataFolder()}
+          onShowShortcuts={() => setShowShortcuts(true)}
+          onShowSearch={() => setShowSearch(true)}
+        />
+      )}
+
+      {showShortcuts && (
+        <KeyboardShortcutsPanel onClose={() => setShowShortcuts(false)} />
+      )}
+
+      {showSearch && workspace && (
+        <SessionSearchPanel
+          workspace={workspace}
+          onClose={() => setShowSearch(false)}
+          onSelectSession={(sessionId) => {
+            void api.selectSession(sessionId);
+          }}
+        />
+      )}
     </>
   );
 }

src/renderer/components/ActivityPanel.tsx

@@ -24,12 +24,12 @@ import { ProviderIcon } from './ProviderIcons';
 /* ── Mode accent colours ───────────────────────────────────── */
 
 const modeAccent: Record<OrchestrationMode, { dot: string; bar: string; label: string }> = {
-  single:       { dot: 'bg-indigo-400',  bar: 'bg-indigo-500/60',  label: 'text-indigo-400' },
-  sequential:   { dot: 'bg-amber-400',   bar: 'bg-amber-500/60',   label: 'text-amber-400' },
-  concurrent:   { dot: 'bg-emerald-400', bar: 'bg-emerald-500/60', label: 'text-emerald-400' },
-  handoff:      { dot: 'bg-sky-400',     bar: 'bg-sky-500/60',     label: 'text-sky-400' },
-  'group-chat': { dot: 'bg-violet-400',  bar: 'bg-violet-500/60',  label: 'text-violet-400' },
-  magentic:     { dot: 'bg-zinc-500',    bar: 'bg-zinc-600/60',    label: 'text-zinc-500' },
+  single:       { dot: 'bg-[#245CF9]',                       bar: 'bg-[#245CF9] opacity-60',                       label: 'text-[#245CF9]' },
+  sequential:   { dot: 'bg-[var(--color-status-warning)]',   bar: 'bg-[var(--color-status-warning)] opacity-60',   label: 'text-[var(--color-status-warning)]' },
+  concurrent:   { dot: 'bg-[var(--color-status-success)]',   bar: 'bg-[var(--color-status-success)] opacity-60',   label: 'text-[var(--color-status-success)]' },
+  handoff:      { dot: 'bg-[var(--color-accent-sky)]',       bar: 'bg-[var(--color-accent-sky)] opacity-60',       label: 'text-[var(--color-accent-sky)]' },
+  'group-chat': { dot: 'bg-[var(--color-accent-purple)]',   bar: 'bg-[var(--color-accent-purple)] opacity-60',   label: 'text-[var(--color-accent-purple)]' },
+  magentic:     { dot: 'bg-[var(--color-text-muted)]',       bar: 'bg-[var(--color-text-muted)] opacity-60',       label: 'text-[var(--color-text-muted)]' },
 };
 
 /* ── Helpers ───────────────────────────────────────────────── */
@@ -62,7 +62,7 @@ const modeLabels: Record<OrchestrationMode, string> = {
 
 function SectionHeader({ children }: { children: ReactNode }) {
   return (
-    <h3 className="mb-2 flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-zinc-600">
+    <h3 className="font-display mb-2 flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
       {children}
     </h3>
   );
@@ -87,7 +87,7 @@ function AgentRow({
   const isCompleted = isAgentActivityCompleted(row.activity);
 
   return (
-    <div className={`relative flex gap-2.5 py-2.5 ${isLast ? '' : 'border-b border-zinc-800/50'}`}>
+    <div className={`relative flex gap-2.5 py-2.5 ${isLast ? '' : 'border-b border-[var(--color-border-subtle)]'}`}>
       {/* Left accent bar — visible only when this agent is actively working */}
       {isActive && (
         <div className={`absolute -left-3 bottom-2 top-2 w-[3px] rounded-full ${accent.bar}`} />
@@ -96,12 +96,12 @@ function AgentRow({
       {/* Status dot */}
       <div className="flex shrink-0 pt-0.5">
         <span
-          className={`size-2 rounded-full ${
+          className={`size-2 rounded-full transition-all duration-200 ${
             isActive
-              ? `animate-pulse ${accent.dot}`
+              ? `animate-pulse ${accent.dot} ring-2 ring-[var(--color-border-glow)]`
               : isCompleted
-                ? 'bg-emerald-400'
-                : 'bg-zinc-700'
+                ? 'bg-[var(--color-status-success)]'
+                : 'bg-[var(--color-surface-3)]'
           }`}
         />
       </div>
@@ -109,13 +109,13 @@ function AgentRow({
       {/* Content */}
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-1.5">
-          <span className="truncate text-[12px] font-medium text-zinc-200">{row.agentName}</span>
+          <span className="truncate text-[12px] font-medium text-[var(--color-text-primary)]">{row.agentName}</span>
         </div>
 
         {/* Model + effort inline */}
         {agent && (
           <div className="mt-1 flex flex-wrap items-center gap-1">
-            <span className="inline-flex items-center gap-1 text-[10px] text-zinc-500">
+            <span className="inline-flex items-center gap-1 text-[10px] text-[var(--color-text-muted)]">
               {(() => {
                 const prov = inferProvider(agent.model);
                 return prov ? <ProviderIcon provider={prov} className="size-2.5" /> : null;
@@ -124,8 +124,8 @@ function AgentRow({
             </span>
             {agent.reasoningEffort && (
               <>
-                <span className="text-[10px] text-zinc-700">·</span>
-                <span className="inline-flex items-center gap-0.5 text-[10px] text-zinc-500">
+                <span className="text-[10px] text-[var(--color-text-muted)]">·</span>
+                <span className="inline-flex items-center gap-0.5 text-[10px] text-[var(--color-text-muted)]">
                   <Sparkles className="size-2" />
                   {formatEffort(agent.reasoningEffort)}
                 </span>
@@ -141,8 +141,8 @@ function AgentRow({
               isActive
                 ? accent.label
                 : isCompleted
-                  ? 'text-emerald-400'
-                  : 'text-zinc-600'
+                  ? 'text-[var(--color-status-success)]'
+                  : 'text-[var(--color-text-muted)]'
             }`}
           >
             {formatAgentActivityLabel(row.activity)}
@@ -151,20 +151,20 @@ function AgentRow({
 
         {/* Per-agent usage summary */}
         {agentUsage && agentUsage.requestCount > 0 && (
-          <div className="mt-0.5 flex items-center gap-1 text-[10px] text-zinc-600">
-            <span className="tabular-nums">{formatTokenCount(agentUsage.inputTokens)} in</span>
-            <span className="text-zinc-700">·</span>
-            <span className="tabular-nums">{formatTokenCount(agentUsage.outputTokens)} out</span>
+          <div className="mt-0.5 flex items-center gap-1 text-[10px] text-[var(--color-text-muted)]">
+            <span className="font-mono tabular-nums">{formatTokenCount(agentUsage.inputTokens)} in</span>
+            <span className="text-[var(--color-text-muted)]">·</span>
+            <span className="font-mono tabular-nums">{formatTokenCount(agentUsage.outputTokens)} out</span>
             {agentUsage.cost > 0 && (
               <>
-                <span className="text-zinc-700">·</span>
-                <span className="tabular-nums">{agentUsage.cost.toFixed(2)} cost</span>
+                <span className="text-[var(--color-text-muted)]">·</span>
+                <span className="font-mono tabular-nums">{agentUsage.cost.toFixed(2)} cost</span>
               </>
             )}
             {agentUsage.durationMs > 0 && (
               <>
-                <span className="text-zinc-700">·</span>
-                <span className="tabular-nums">{formatDuration(agentUsage.durationMs)}</span>
+                <span className="text-[var(--color-text-muted)]">·</span>
+                <span className="font-mono tabular-nums">{formatDuration(agentUsage.durationMs)}</span>
               </>
             )}
           </div>
@@ -182,15 +182,15 @@ function TurnEventIcon({ kind, phase, success }: { kind: SessionEventKind; phase
   const base = 'size-3';
   switch (kind) {
     case 'subagent':
-      return <ArrowRight className={`${base} ${success === false ? 'text-red-400' : 'text-sky-400'}`} />;
+      return <ArrowRight className={`${base} ${success === false ? 'text-[var(--color-status-error)]' : 'text-[var(--color-accent-sky)]'}`} />;
     case 'hook-lifecycle':
-      return <Cog className={`${base} ${phase === 'start' ? 'animate-spin text-amber-400' : success === false ? 'text-red-400' : 'text-emerald-400'}`} />;
+      return <Cog className={`${base} ${phase === 'start' ? 'animate-spin text-[var(--color-status-warning)]' : success === false ? 'text-[var(--color-status-error)]' : 'text-[var(--color-status-success)]'}`} />;
     case 'skill-invoked':
-      return <Sparkles className={`${base} text-violet-400`} />;
+      return <Sparkles className={`${base} text-[var(--color-accent-purple)]`} />;
     case 'session-compaction':
-      return <CheckCircle2 className={`${base} ${phase === 'start' ? 'animate-pulse text-amber-400' : 'text-emerald-400'}`} />;
+      return <CheckCircle2 className={`${base} ${phase === 'start' ? 'animate-pulse text-[var(--color-status-warning)]' : 'text-[var(--color-status-success)]'}`} />;
     default:
-      return <Zap className={`${base} text-zinc-500`} />;
+      return <Zap className={`${base} text-[var(--color-text-muted)]`} />;
   }
 }
 
@@ -238,19 +238,19 @@ export function ActivityPanel({
       {/* Header — top padding clears the title bar overlay zone */}
       <div className="drag-region border-b border-[var(--color-border)] px-4 pb-3 pt-3">
         <div className="flex min-h-8 items-center gap-2">
-          <Activity className="size-4 text-zinc-500" />
-          <span className="text-[12px] font-semibold uppercase tracking-[0.12em] text-zinc-400">
+          <Activity className="size-4 text-[var(--color-text-muted)]" />
+          <span className="font-display text-[12px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-secondary)]">
             Activity
           </span>
           {hasPendingApproval ? (
             <span className="flex items-center gap-1">
-              <ShieldAlert className="size-3 text-amber-400" />
-              <span className="text-[9px] font-semibold uppercase tracking-wider text-amber-400">
+              <ShieldAlert className="size-3 text-[var(--color-status-warning)]" />
+              <span className="text-[9px] font-semibold uppercase tracking-wider text-[var(--color-status-warning)]">
                 Approval{totalApprovalCount > 1 ? `s (${totalApprovalCount})` : ''}
               </span>
             </span>
           ) : isBusy ? (
-            <span className="size-1.5 animate-pulse rounded-full bg-blue-400" />
+            <span className="size-1.5 animate-pulse rounded-full bg-[var(--color-status-info)]" />
           ) : null}
         </div>
       </div>
@@ -261,7 +261,7 @@ export function ActivityPanel({
           <SectionHeader>
             <Users className="size-3" />
             <span>Agents</span>
-            <span className="rounded-full bg-zinc-800 px-1.5 py-0.5 text-[9px] tabular-nums text-zinc-500">
+            <span className="font-mono rounded-full bg-[var(--color-surface-2)] px-1.5 py-0.5 text-[9px] tabular-nums text-[var(--color-text-muted)]">
               {activityRows.length}
             </span>
             <span className={`ml-auto text-[9px] font-medium normal-case tracking-normal ${accent.label}`}>
@@ -270,7 +270,7 @@ export function ActivityPanel({
           </SectionHeader>
 
           {activityRows.length > 0 ? (
-            <div className="rounded-lg border border-zinc-800 bg-zinc-900/40 px-3">
+            <div className="glass-surface rounded-lg px-3">
               {activityRows.map((row, index) => {
                 const agentKey = row.activity?.agentId ?? row.key;
                 const agentUsage = sessionRequestUsage?.perAgent[agentKey]
@@ -288,7 +288,7 @@ export function ActivityPanel({
               })}
             </div>
           ) : (
-            <p className="py-4 text-center text-[11px] text-zinc-600">No agents configured</p>
+            <p className="py-4 text-center text-[11px] text-[var(--color-text-muted)]">No agents configured</p>
           )}
         </div>
 
@@ -300,32 +300,32 @@ export function ActivityPanel({
               <span>Session Usage</span>
             </SectionHeader>
 
-            <div className="rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2.5">
-              <div className="flex flex-wrap items-center gap-1.5 text-[11px] text-zinc-400">
-                <span className="font-medium tabular-nums">
+            <div className="glass-surface rounded-lg px-3 py-2.5">
+              <div className="flex flex-wrap items-center gap-1.5 text-[11px] text-[var(--color-text-secondary)]">
+                <span className="font-mono font-medium tabular-nums">
                   {sessionRequestUsage.requestCount} premium request{sessionRequestUsage.requestCount === 1 ? '' : 's'}
                 </span>
                 {sessionRequestUsage.totalNanoAiu > 0 && (
                   <>
-                    <span className="text-zinc-700">·</span>
-                    <span className="tabular-nums">{formatNanoAiu(sessionRequestUsage.totalNanoAiu)} AIU</span>
+                    <span className="text-[var(--color-text-muted)]">·</span>
+                    <span className="font-mono tabular-nums">{formatNanoAiu(sessionRequestUsage.totalNanoAiu)} AIU</span>
                   </>
                 )}
               </div>
-              <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[10px] text-zinc-500">
-                <span className="tabular-nums">{formatTokenCount(sessionRequestUsage.totalInputTokens)} in</span>
-                <span className="text-zinc-700">·</span>
-                <span className="tabular-nums">{formatTokenCount(sessionRequestUsage.totalOutputTokens)} out</span>
+              <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[10px] text-[var(--color-text-muted)]">
+                <span className="font-mono tabular-nums">{formatTokenCount(sessionRequestUsage.totalInputTokens)} in</span>
+                <span className="text-[var(--color-text-muted)]">·</span>
+                <span className="font-mono tabular-nums">{formatTokenCount(sessionRequestUsage.totalOutputTokens)} out</span>
                 {sessionRequestUsage.totalCost > 0 && (
                   <>
-                    <span className="text-zinc-700">·</span>
-                    <span className="tabular-nums">{sessionRequestUsage.totalCost.toFixed(2)} cost</span>
+                    <span className="text-[var(--color-text-muted)]">·</span>
+                    <span className="font-mono tabular-nums">{sessionRequestUsage.totalCost.toFixed(2)} cost</span>
                   </>
                 )}
                 {sessionRequestUsage.totalDurationMs > 0 && (
                   <>
-                    <span className="text-zinc-700">·</span>
-                    <span className="tabular-nums">{formatDuration(sessionRequestUsage.totalDurationMs)} total</span>
+                    <span className="text-[var(--color-text-muted)]">·</span>
+                    <span className="font-mono tabular-nums">{formatDuration(sessionRequestUsage.totalDurationMs)} total</span>
                   </>
                 )}
               </div>
@@ -339,7 +339,7 @@ export function ActivityPanel({
             <Clock className="size-3" />
             <span>Timeline</span>
             {session.runs.length > 0 && (
-              <span className="rounded-full bg-zinc-800 px-1.5 py-0.5 text-[9px] tabular-nums text-zinc-500">
+              <span className="font-mono rounded-full bg-[var(--color-surface-2)] px-1.5 py-0.5 text-[9px] tabular-nums text-[var(--color-text-muted)]">
                 {session.runs.length}
               </span>
             )}
@@ -354,12 +354,12 @@ export function ActivityPanel({
             <SectionHeader>
               <Zap className="size-3" />
               <span>Events</span>
-              <span className="rounded-full bg-zinc-800 px-1.5 py-0.5 text-[9px] tabular-nums text-zinc-500">
+              <span className="font-mono rounded-full bg-[var(--color-surface-2)] px-1.5 py-0.5 text-[9px] tabular-nums text-[var(--color-text-muted)]">
                 {turnEvents.length}
               </span>
             </SectionHeader>
 
-            <div className="space-y-0.5 rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2">
+            <div className="glass-surface space-y-0.5 rounded-lg px-3 py-2">
               {turnEvents.slice().reverse().map((entry, index) => (
                 <div key={index} className="flex items-start gap-2 py-1">
                   <div className="mt-0.5 shrink-0">
@@ -367,13 +367,13 @@ export function ActivityPanel({
                   </div>
                   <div className="min-w-0 flex-1">
                     <div className="flex items-center gap-1.5">
-                      <span className="text-[11px] font-medium text-zinc-300">{entry.label}</span>
-                      <span className="ml-auto shrink-0 text-[9px] tabular-nums text-zinc-700">
+                      <span className="text-[11px] font-medium text-[var(--color-text-secondary)]">{entry.label}</span>
+                      <span className="font-mono ml-auto shrink-0 text-[9px] tabular-nums text-[var(--color-text-muted)]">
                         {formatTurnEventTimestamp(entry.occurredAt)}
                       </span>
                     </div>
                     {entry.detail && (
-                      <p className="text-[10px] leading-snug text-zinc-600">{entry.detail}</p>
+                      <p className="text-[10px] leading-snug text-[var(--color-text-muted)]">{entry.detail}</p>
                     )}
                   </div>
                 </div>

src/renderer/components/AgentConfigFields.tsx

@@ -18,9 +18,9 @@ function TierBadge({ tier }: { tier: ModelDefinition['tier'] }) {
   }
 
   const styles = {
-    premium: 'bg-amber-500/10 text-amber-400',
-    standard: 'bg-zinc-700/50 text-zinc-500',
-    fast: 'bg-emerald-500/10 text-emerald-400',
+    premium: 'bg-[var(--color-status-warning)]/10 text-[var(--color-status-warning)]',
+    standard: 'bg-[var(--color-surface-3)]/50 text-[var(--color-text-muted)]',
+    fast: 'bg-[var(--color-status-success)]/10 text-[var(--color-status-success)]',
   };
 
   return (
@@ -75,10 +75,10 @@ export function ModelSelect({
 
   return (
     <label className="block space-y-1.5">
-      <span className="text-[12px] font-medium text-zinc-400">{label}</span>
+      <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">{label}</span>
       <div className="relative" ref={containerRef}>
         <button
-          className="flex w-full items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-left text-[13px] text-zinc-100 outline-none transition hover:border-zinc-600 focus:border-indigo-500/50 disabled:cursor-not-allowed disabled:opacity-60"
+          className="flex w-full items-center gap-2 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 text-left text-[13px] text-[var(--color-text-primary)] outline-none transition-all duration-200 hover:border-[var(--color-border)] focus:border-[var(--color-accent)]/50 disabled:cursor-not-allowed disabled:opacity-60"
           disabled={disabled}
           onClick={() => setOpen((current) => !current)}
           type="button"
@@ -86,25 +86,25 @@ export function ModelSelect({
           {provider && <ProviderIcon provider={provider} />}
           <span className="flex-1 truncate">{selected?.name ?? (value || 'Select model')}</span>
           <ChevronDown
-            className={`size-3.5 text-zinc-500 transition ${open ? 'rotate-180' : ''}`}
+            className={`size-3.5 text-[var(--color-text-muted)] transition ${open ? 'rotate-180' : ''}`}
           />
         </button>
 
         {open && !disabled && (
-          <div className="absolute z-30 mt-1 max-h-72 w-full overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
+          <div className="absolute z-30 mt-1 max-h-72 w-full overflow-y-auto rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] py-1 shadow-[0_16px_64px_rgba(0,0,0,0.5)]">
             {groupedModels.map((providerGroup) => {
               return (
                 <div key={providerGroup.id}>
                   <div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
                     <ProviderIcon provider={providerGroup.id} />
-                    <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+                    <span className="text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                       {providerGroup.label}
                     </span>
                   </div>
                   {providerGroup.models.map((model) => (
                     <button
-                      className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                        model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
+                      className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition-all duration-200 hover:bg-[var(--color-surface-3)] ${
+                        model.id === value ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]' : 'text-[var(--color-text-secondary)]'
                       }`}
                       key={model.id}
                       onClick={() => {
@@ -122,13 +122,13 @@ export function ModelSelect({
             })}
             {otherModels.length > 0 && (
               <div>
-                <div className="px-3 pb-1 pt-2.5 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+                <div className="px-3 pb-1 pt-2.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                   Other
                 </div>
                 {otherModels.map((model) => (
                   <button
-                    className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                      model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
+                    className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition-all duration-200 hover:bg-[var(--color-surface-3)] ${
+                      model.id === value ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]' : 'text-[var(--color-text-secondary)]'
                     }`}
                     key={model.id}
                     onClick={() => {
@@ -173,15 +173,15 @@ export function ReasoningEffortSelect({
   if (supportedEfforts && supportedEfforts.length === 0) {
     return (
       <label className="block space-y-1.5">
-        <span className="text-[12px] font-medium text-zinc-400">{label}</span>
+        <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">{label}</span>
         <div className="relative">
           <input
-            className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 pr-9 text-[13px] text-zinc-500 outline-none"
+            className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 pr-9 text-[13px] text-[var(--color-text-muted)] outline-none"
             disabled
             readOnly
             value="Not supported for this model"
           />
-          <Sparkles className="pointer-events-none absolute right-3 top-1/2 size-3.5 -translate-y-1/2 text-zinc-600" />
+          <Sparkles className="pointer-events-none absolute right-3 top-1/2 size-3.5 -translate-y-1/2 text-[var(--color-text-muted)]" />
         </div>
       </label>
     );
@@ -189,10 +189,10 @@ export function ReasoningEffortSelect({
 
   return (
     <label className="block space-y-1.5">
-      <span className="text-[12px] font-medium text-zinc-400">{label}</span>
+      <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">{label}</span>
       <div className="relative">
         <select
-          className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 pr-9 text-[13px] text-zinc-100 outline-none transition focus:border-indigo-500/50 disabled:cursor-not-allowed disabled:opacity-60"
+          className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 pr-9 text-[13px] text-[var(--color-text-primary)] outline-none transition focus:border-[var(--color-accent)]/50 disabled:cursor-not-allowed disabled:opacity-60"
           disabled={disabled || !selectedValue}
           onChange={(event) => onChange(event.target.value as ReasoningEffort)}
           value={selectedValue}
@@ -203,7 +203,7 @@ export function ReasoningEffortSelect({
             </option>
           ))}
         </select>
-        <Sparkles className="pointer-events-none absolute right-3 top-1/2 size-3.5 -translate-y-1/2 text-zinc-500" />
+        <Sparkles className="pointer-events-none absolute right-3 top-1/2 size-3.5 -translate-y-1/2 text-[var(--color-text-muted)]" />
       </div>
     </label>
   );

src/renderer/components/AppShell.tsx

@@ -10,22 +10,33 @@ interface AppShellProps {
 
 export function AppShell({ sidebar, content, detailPanel, terminalPanel, overlay }: AppShellProps) {
   return (
-    <div className="relative flex h-screen bg-[var(--color-surface-0)] text-zinc-100">
+    <div className="relative flex h-screen bg-[var(--color-surface-0)] text-[var(--color-text-primary)]">
       {/* Full-width drag region matching the title bar overlay height */}
       <div className="drag-region absolute inset-x-0 top-0 z-10 h-3" />
 
-      <aside className="flex w-72 shrink-0 flex-col border-r border-[var(--color-border)] bg-[var(--color-surface-1)]">
+      {/* Sidebar */}
+      <aside className="flex w-72 shrink-0 flex-col border-r border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]">
         {sidebar}
       </aside>
+
+      {/* Main content + terminal */}
       <main className="relative flex min-w-0 flex-1 flex-col">
-        <div className="min-h-0 flex-1">{content}</div>
+        {/* Ambient glow behind active content area */}
+        <div
+          className="pointer-events-none absolute inset-0 opacity-30"
+          style={{ background: 'var(--gradient-glow)' }}
+        />
+        <div className="relative min-h-0 flex-1">{content}</div>
         {terminalPanel}
       </main>
+
+      {/* Detail panel */}
       {detailPanel && (
-        <aside className="flex w-64 shrink-0 flex-col border-l border-[var(--color-border)] bg-[var(--color-surface-1)]">
+        <aside className="flex w-64 shrink-0 flex-col border-l border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]">
           {detailPanel}
         </aside>
       )}
+
       {overlay}
     </div>
   );

src/renderer/components/ChatPane.tsx

@@ -1,9 +1,11 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { AlertCircle, ArrowUp, Bot, Circle, ClipboardList, GitBranch, Loader2, MessageCircleQuestion, Paperclip, ShieldAlert, Square, User, X } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AlertCircle, ArrowUp, Bookmark, Bot, Circle, ClipboardList, GitBranch, Loader2, MessageCircleQuestion, Paperclip, RefreshCw, ShieldAlert, Square, User, X } from 'lucide-react';
 
 import { MarkdownContent } from '@renderer/components/MarkdownContent';
 import { MarkdownComposer, type MarkdownComposerHandle } from '@renderer/components/MarkdownComposer';
 import { ApprovalBanner, QueuedApprovalsList } from '@renderer/components/chat/ApprovalBanner';
+import { MessageActions } from '@renderer/components/chat/MessageActions';
+import { MessageEditComposer } from '@renderer/components/chat/MessageEditComposer';
 import { PlanReviewBanner } from '@renderer/components/chat/PlanReviewBanner';
 import { McpAuthBanner } from '@renderer/components/chat/McpAuthBanner';
 import { UserInputBanner } from '@renderer/components/chat/UserInputBanner';
@@ -26,7 +28,7 @@ import {
 } from '@shared/domain/models';
 import { type PatternDefinition, type ReasoningEffort } from '@shared/domain/pattern';
 import { isScratchpadProject, type ProjectRecord } from '@shared/domain/project';
-import { resolveSessionToolingSelection, type SessionRecord } from '@shared/domain/session';
+import { resolveSessionToolingSelection, type SessionBranchOriginAction, type SessionRecord } from '@shared/domain/session';
 import {
   groupApprovalToolsByProvider,
   listApprovalToolDefinitions,
@@ -64,6 +66,11 @@ interface ChatPaneProps {
   }) => Promise<unknown>;
   onUpdateSessionTooling?: (selection: SessionToolingSelection) => void;
   onUpdateSessionApprovalSettings?: (settings: { autoApprovedToolNames?: string[] }) => void;
+  onBranchFromMessage?: (messageId: string) => void;
+  onPinMessage?: (messageId: string, isPinned: boolean) => void;
+  onRegenerateMessage?: (messageId: string) => void;
+  onEditAndResendMessage?: (messageId: string, content: string) => void;
+  branchOriginLabel?: string;
 }
 
 export function ChatPane({
@@ -90,6 +97,11 @@ export function ChatPane({
   onUpdateSessionModelConfig,
   onUpdateSessionTooling,
   onUpdateSessionApprovalSettings,
+  onBranchFromMessage,
+  onPinMessage,
+  onRegenerateMessage,
+  onEditAndResendMessage,
+  branchOriginLabel,
 }: ChatPaneProps) {
   const [hasComposerContent, setHasComposerContent] = useState(false);
   const [configError, setConfigError] = useState<string>();
@@ -97,10 +109,17 @@ export function ChatPane({
   const [isResolvingApproval, setIsResolvingApproval] = useState(false);
   const [isSubmittingUserInput, setIsSubmittingUserInput] = useState(false);
   const [isUpdatingSessionModelConfig, setIsUpdatingSessionModelConfig] = useState(false);
+  const [editingMessageId, setEditingMessageId] = useState<string>();
   const transcriptRef = useRef<HTMLDivElement>(null);
   const composerRef = useRef<MarkdownComposerHandle>(null);
 
   const isSessionBusy = session.status === 'running';
+  const lastAssistantIndex = useMemo(() => {
+    for (let i = session.messages.length - 1; i >= 0; i--) {
+      if (session.messages[i].role === 'assistant') return i;
+    }
+    return -1;
+  }, [session.messages]);
   const pendingApproval = session.pendingApproval?.status === 'pending' ? session.pendingApproval : undefined;
   const queuedApprovals = (session.pendingApprovalQueue ?? []).filter((a) => a.status === 'pending');
   const totalPendingCount = (pendingApproval ? 1 : 0) + queuedApprovals.length;
@@ -170,6 +189,7 @@ export function ChatPane({
     setApprovalError(undefined);
     setIsResolvingApproval(false);
     setIsUpdatingSessionModelConfig(false);
+    setEditingMessageId(undefined);
   }, [session.id]);
 
   function handleComposerSubmit(content: string) {
@@ -179,6 +199,18 @@ export function ChatPane({
     void onSend(content, attachments, messageMode);
   }
 
+  const handleCopyMessage = useCallback((content: string) => {
+    void navigator.clipboard.writeText(content);
+  }, []);
+
+  const handleEditSave = useCallback(
+    (messageId: string, content: string) => {
+      setEditingMessageId(undefined);
+      onEditAndResendMessage?.(messageId, content);
+    },
+    [onEditAndResendMessage],
+  );
+
   function handleDismissPlan() {
     onDismissPlanReview?.();
   }
@@ -250,16 +282,16 @@ export function ChatPane({
   return (
     <div className="flex h-full flex-col">
       {/* Header — extra top padding clears the title bar overlay zone */}
-      <header className="drag-region border-b border-[var(--color-border)] px-6 pb-3 pt-3">
+      <header className="drag-region border-b border-[var(--color-border-subtle)] px-6 pb-3 pt-3">
         <div className="flex min-h-8 items-center justify-between">
           <div className="min-w-0">
-            <h2 className="truncate text-[13px] font-semibold leading-tight text-zinc-100">{session.title}</h2>
-            <p className="truncate text-[11px] leading-tight text-zinc-500">
+            <h2 className="font-display truncate text-[13px] font-semibold leading-tight text-[var(--color-text-primary)]">{session.title}</h2>
+            <p className="truncate text-[11px] leading-tight text-[var(--color-text-muted)]">
               {isScratchpad
                 ? `Scratchpad · ${pattern.name}`
                 : `${project.name} · ${pattern.name} · ${pattern.mode}`}
               {!isScratchpad && project.git?.status === 'ready' && (
-                <span className="ml-2 inline-flex items-center gap-1 text-zinc-600">
+                <span className="ml-2 inline-flex items-center gap-1 text-[var(--color-text-muted)]">
                   <GitBranch className="inline size-2.5" />
                   {project.git.branch ?? project.git.head?.shortHash ?? 'HEAD'}
                   {project.git.isDirty && (
@@ -273,31 +305,31 @@ export function ChatPane({
           </div>
           <div className="flex items-center gap-2">
             {pendingApproval && (
-              <div className="flex items-center gap-1.5 text-[12px] font-medium text-amber-400">
+              <div className="flex items-center gap-1.5 text-[12px] font-medium text-[var(--color-status-warning)]">
                 <ShieldAlert className="size-3.5" />
                 Awaiting approval
                 {queuedApprovals.length > 0 && (
-                  <span className="rounded-full bg-amber-500/15 px-1.5 py-0.5 text-[10px] tabular-nums">
+                  <span className="rounded-full bg-[var(--color-status-warning)]/15 px-1.5 py-0.5 text-[10px] tabular-nums">
                     +{queuedApprovals.length} queued
                   </span>
                 )}
               </div>
             )}
             {pendingUserInput && !pendingApproval && (
-              <div className="flex items-center gap-1.5 text-[12px] font-medium text-blue-400">
+              <div className="flex items-center gap-1.5 text-[12px] font-medium text-[var(--color-accent-sky)]">
                 <MessageCircleQuestion className="size-3.5" />
                 Awaiting your input
               </div>
             )}
-            {isSessionBusy && !pendingApproval && !pendingUserInput && <span className="size-2 animate-pulse rounded-full bg-blue-400" />}
+            {isSessionBusy && !pendingApproval && !pendingUserInput && <span className="size-2 animate-pulse rounded-full bg-[var(--color-accent-sky)]" />}
             {session.status === 'error' && (
-              <div className="flex items-center gap-1.5 text-[12px] text-red-400">
+              <div className="flex items-center gap-1.5 text-[12px] text-[var(--color-status-error)]">
                 <AlertCircle className="size-3.5" />
                 Error
               </div>
             )}
             {session.status === 'idle' && !pendingApproval && !pendingUserInput && session.messages.length > 0 && (
-              <span className="text-[12px] text-zinc-600">
+              <span className="text-[12px] text-[var(--color-text-muted)]">
                 {session.messages.length} message{session.messages.length === 1 ? '' : 's'}
               </span>
             )}
@@ -309,54 +341,67 @@ export function ChatPane({
       <div className="flex-1 overflow-y-auto" ref={transcriptRef}>
         {session.messages.length === 0 ? (
           <div className="flex h-full flex-col items-center justify-center gap-2 px-6 text-center">
-            <Bot className="size-10 text-zinc-800" />
-            <p className="text-[13px] text-zinc-500">Send a message to start the conversation</p>
-            <p className="text-[12px] text-zinc-700">
+            <Bot className="size-10 text-[var(--color-surface-3)]" />
+            <p className="text-[13px] text-[var(--color-text-muted)]">Send a message to start the conversation</p>
+            <p className="text-[12px] text-[var(--color-text-muted)]">
               {isScratchpad ? (
                 <>
                   Scratchpad is ready for ad-hoc questions using{' '}
-                  <span className="text-zinc-500">{pattern.name}</span>
+                  <span className="text-[var(--color-text-secondary)]">{pattern.name}</span>
                 </>
               ) : (
                 <>
-                  Using <span className="text-zinc-500">{pattern.name}</span> in{' '}
-                  <span className="text-zinc-500">{project.name}</span>
+                  Using <span className="text-[var(--color-text-secondary)]">{pattern.name}</span> in{' '}
+                  <span className="text-[var(--color-text-secondary)]">{project.name}</span>
                 </>
               )}
             </p>
           </div>
         ) : (
           <div className="mx-auto max-w-3xl px-6 py-4">
+            {/* Branch origin banner */}
+            {session.branchOrigin && (
+              <BranchOriginBanner
+                action={session.branchOrigin.action}
+                label={branchOriginLabel}
+              />
+            )}
             <div className="space-y-1">
               {session.messages.map((message, index) => {
                 const isUser = message.role === 'user';
+                const isEditing = editingMessageId === message.id;
+                const isLastAssistant = index === lastAssistantIndex;
                 const phase = getAssistantMessagePhase(session, message, index);
                 const assistantContainerClass =
                   phase === 'thinking'
-                    ? 'border-sky-500/20 bg-sky-500/5'
+                    ? 'border-[var(--color-accent-sky)]/20 bg-[var(--color-accent-sky)]/5'
                     : phase === 'final'
-                      ? 'border-emerald-500/20 bg-emerald-500/5'
-                      : 'border-zinc-800 bg-zinc-900/40';
+                      ? 'border-[var(--color-status-success)]/20 bg-[var(--color-status-success)]/5'
+                      : 'border-[var(--color-border)] bg-[var(--color-surface-1)]/40';
                 const assistantBadgeClass =
                   phase === 'thinking'
-                    ? 'border-sky-400/20 bg-sky-400/10 text-sky-300'
-                    : 'border-emerald-400/20 bg-emerald-400/10 text-emerald-300';
+                    ? 'border-[var(--color-accent-sky)]/20 bg-[var(--color-accent-sky)]/10 text-[var(--color-accent-sky)]'
+                    : 'border-[var(--color-status-success)]/20 bg-[var(--color-status-success)]/10 text-[var(--color-status-success)]';
                 const phaseLabel =
                   phase === 'thinking' ? 'Thinking' : phase === 'final' ? 'Final' : undefined;
+                const showActions = !isSessionBusy && !message.pending;
 
                 return (
-                  <div className="group py-3" data-message-id={message.id} key={message.id}>
+                  <div className="message-enter group py-3" data-message-id={message.id} key={message.id}>
                     <div className="flex gap-3">
                       <div
                         className={`mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full ${
-                          isUser ? 'bg-indigo-600 text-white' : 'bg-zinc-800 text-zinc-400'
+                          isUser ? 'brand-gradient-bg text-white' : 'bg-[var(--color-surface-2)] text-[var(--color-text-secondary)]'
                         }`}
                       >
                         {isUser ? <User className="size-3.5" /> : <Bot className="size-3.5" />}
                       </div>
                       <div className="min-w-0 flex-1">
-                        <div className="mb-1 flex items-center gap-2 text-[12px] font-medium text-zinc-400">
+                        <div className="mb-1 flex items-center gap-2 text-[12px] font-medium text-[var(--color-text-secondary)]">
                           <span>{message.authorName}</span>
+                          {message.isPinned && (
+                            <Bookmark className="size-3 fill-[var(--color-accent-sky)] text-[var(--color-accent-sky)]" />
+                          )}
                           {!isUser && phaseLabel && (
                             <span
                               className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.08em] ${assistantBadgeClass}`}
@@ -364,48 +409,71 @@ export function ChatPane({
                               {phaseLabel}
                             </span>
                           )}
-                        </div>
-                        <div
-                          className={
-                            isUser
-                              ? 'text-[14px] leading-relaxed text-zinc-200'
-                              : `rounded-xl border px-4 py-3 text-[14px] leading-relaxed text-zinc-200 ${assistantContainerClass}`
-                          }
-                        >
-                          {/* Attachment thumbnails */}
-                          {isUser && message.attachments && message.attachments.length > 0 && (
-                            <div className="mb-2 flex flex-wrap gap-2">
-                              {message.attachments.map((att, attIdx) =>
-                                isImageAttachment(att) ? (
-                                  <img
-                                    key={attIdx}
-                                    alt={getAttachmentDisplayName(att)}
-                                    className="max-h-48 max-w-xs rounded-lg border border-zinc-700 object-cover"
-                                    src={`data:${att.mimeType};base64,${att.data}`}
-                                  />
-                                ) : (
-                                  <div
-                                    key={attIdx}
-                                    className="flex items-center gap-1.5 rounded-lg border border-zinc-700 bg-zinc-800 px-2 py-1 text-[11px] text-zinc-400"
-                                  >
-                                    <Paperclip className="size-3" />
-                                    {getAttachmentDisplayName(att)}
-                                  </div>
-                                ),
-                              )}
+                          {showActions && (
+                            <div className="ml-auto">
+                              <MessageActions
+                                message={message}
+                                isLastAssistant={isLastAssistant}
+                                onCopy={() => handleCopyMessage(message.content)}
+                                onPin={() => onPinMessage?.(message.id, !message.isPinned)}
+                                onBranch={() => onBranchFromMessage?.(message.id)}
+                                onRegenerate={onRegenerateMessage ? () => onRegenerateMessage(message.id) : undefined}
+                                onEdit={onEditAndResendMessage && isUser ? () => setEditingMessageId(message.id) : undefined}
+                              />
                             </div>
                           )}
-                          {!isUser && message.pending ? (
-                            <div className="whitespace-pre-wrap break-words text-[14px] leading-relaxed text-zinc-200">
-                              {message.content}
-                            </div>
-                          ) : (
-                            <MarkdownContent content={message.content} />
-                          )}
-                          {message.pending && message.content && (
-                            <span className="mt-1 inline-block h-4 w-[2px] animate-pulse rounded-sm bg-zinc-400" />
-                          )}
                         </div>
+
+                        {/* Edit mode */}
+                        {isEditing ? (
+                          <MessageEditComposer
+                            initialContent={message.content}
+                            onSave={(content) => handleEditSave(message.id, content)}
+                            onCancel={() => setEditingMessageId(undefined)}
+                          />
+                        ) : (
+                          <div
+                            className={
+                              isUser
+                                ? 'text-[14px] leading-relaxed text-[var(--color-text-primary)]'
+                                : `rounded-xl border px-4 py-3 text-[14px] leading-relaxed text-[var(--color-text-primary)] ${assistantContainerClass}`
+                            }
+                          >
+                            {/* Attachment thumbnails */}
+                            {isUser && message.attachments && message.attachments.length > 0 && (
+                              <div className="mb-2 flex flex-wrap gap-2">
+                                {message.attachments.map((att, attIdx) =>
+                                  isImageAttachment(att) ? (
+                                    <img
+                                      key={attIdx}
+                                      alt={getAttachmentDisplayName(att)}
+                                      className="max-h-48 max-w-xs rounded-lg border border-[var(--color-border)] object-cover"
+                                      src={`data:${att.mimeType};base64,${att.data}`}
+                                    />
+                                  ) : (
+                                    <div
+                                      key={attIdx}
+                                      className="flex items-center gap-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-2)] px-2 py-1 text-[11px] text-[var(--color-text-secondary)]"
+                                    >
+                                      <Paperclip className="size-3" />
+                                      {getAttachmentDisplayName(att)}
+                                    </div>
+                                  ),
+                                )}
+                              </div>
+                            )}
+                            {!isUser && message.pending ? (
+                              <div className="whitespace-pre-wrap break-words text-[14px] leading-relaxed text-[var(--color-text-primary)]">
+                                {message.content}
+                              </div>
+                            ) : (
+                              <MarkdownContent content={message.content} />
+                            )}
+                            {message.pending && message.content && (
+                              <span className="mt-1 inline-block h-4 w-[2px] animate-pulse rounded-sm bg-[var(--color-accent)]" />
+                            )}
+                          </div>
+                        )}
                         {message.pending && !message.content && <ThinkingDots />}
                       </div>
                     </div>
@@ -423,24 +491,24 @@ export function ChatPane({
       </div>
 
       {/* Input area */}
-      <div className="border-t border-[var(--color-border)] px-6 py-4">
+      <div className="border-t border-[var(--color-border-subtle)] px-6 py-4">
         {session.lastError && (
-          <div className="mb-3 flex items-start gap-2 rounded-lg bg-red-500/10 px-3 py-2 text-[13px] text-red-300">
-            <AlertCircle className="mt-0.5 size-4 shrink-0 text-red-400" />
+          <div className="mb-3 flex items-start gap-2 rounded-lg bg-[var(--color-status-error)]/10 px-3 py-2 text-[13px] text-[var(--color-status-error)]">
+            <AlertCircle className="mt-0.5 size-4 shrink-0 text-[var(--color-status-error)]" />
             <span>{session.lastError}</span>
           </div>
         )}
 
         {configError && (
-          <div className="mb-3 flex items-start gap-2 rounded-lg bg-red-500/10 px-3 py-2 text-[13px] text-red-300">
-            <AlertCircle className="mt-0.5 size-4 shrink-0 text-red-400" />
+          <div className="mb-3 flex items-start gap-2 rounded-lg bg-[var(--color-status-error)]/10 px-3 py-2 text-[13px] text-[var(--color-status-error)]">
+            <AlertCircle className="mt-0.5 size-4 shrink-0 text-[var(--color-status-error)]" />
             <span>{configError}</span>
           </div>
         )}
 
         {approvalError && (
-          <div className="mb-3 flex items-start gap-2 rounded-lg bg-red-500/10 px-3 py-2 text-[13px] text-red-300">
-            <AlertCircle className="mt-0.5 size-4 shrink-0 text-red-400" />
+          <div className="mb-3 flex items-start gap-2 rounded-lg bg-[var(--color-status-error)]/10 px-3 py-2 text-[13px] text-[var(--color-status-error)]">
+            <AlertCircle className="mt-0.5 size-4 shrink-0 text-[var(--color-status-error)]" />
             <span>{approvalError}</span>
           </div>
         )}
@@ -448,7 +516,7 @@ export function ChatPane({
         <div className="mx-auto max-w-3xl">
           {/* Pending approval banner */}
           {pendingApproval && (
-            <div className="mb-3 space-y-2">
+            <div className="banner-slide-enter mb-3 space-y-2">
               <ApprovalBanner
                 approval={pendingApproval}
                 isResolving={isResolvingApproval}
@@ -544,7 +612,7 @@ export function ChatPane({
                     value={sessionReasoningEffort}
                   />
                   {isUpdatingSessionModelConfig && (
-                    <Loader2 className="size-3 animate-spin text-zinc-500" />
+                  <Loader2 className="size-3 animate-spin text-[var(--color-text-muted)]" />
                   )}
                 </div>
               )}
@@ -584,13 +652,13 @@ export function ChatPane({
               {pendingAttachments.map((attachment, index) => (
                 <div
                   key={index}
-                  className="flex items-center gap-1.5 rounded-lg border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 text-[11px] text-zinc-300"
+                  className="flex items-center gap-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-2)] px-2.5 py-1.5 text-[11px] text-[var(--color-text-secondary)]"
                 >
-                  <Paperclip className="size-3 text-zinc-500" />
+                  <Paperclip className="size-3 text-[var(--color-text-muted)]" />
                   <span className="max-w-[160px] truncate">{getAttachmentDisplayName(attachment)}</span>
                   <button
                     aria-label="Remove attachment"
-                    className="ml-1 rounded p-0.5 text-zinc-500 hover:bg-zinc-700 hover:text-zinc-300"
+                    className="ml-1 rounded p-0.5 text-[var(--color-text-muted)] hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
                     onClick={() => setPendingAttachments((prev) => prev.filter((_, i) => i !== index))}
                     type="button"
                   >
@@ -601,7 +669,7 @@ export function ChatPane({
             </div>
           )}
 
-          <div className="rounded-xl border border-zinc-700 bg-zinc-900 transition-colors focus-within:border-indigo-500/50">
+          <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-1)] transition-all duration-200 focus-within:border-[var(--color-border-glow)] focus-within:shadow-[0_0_16px_rgba(36,92,249,0.06)]">
             <MarkdownComposer
               ref={composerRef}
               disabled={isComposerDisabled}
@@ -651,7 +719,7 @@ export function ChatPane({
                 {/* Attachment picker */}
                 <button
                   aria-label="Attach image"
-                  className="flex size-8 items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+                  className="flex size-8 items-center justify-center rounded-lg text-[var(--color-text-muted)] transition-all duration-150 hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text-primary)]"
                   disabled={isComposerDisabled}
                   onClick={() => {
                     const input = document.createElement('input');
@@ -685,10 +753,10 @@ export function ChatPane({
                   <button
                     aria-label={isPlanMode ? 'Switch to interactive mode' : 'Switch to plan mode'}
                     aria-pressed={isPlanMode}
-                    className={`flex size-8 items-center justify-center rounded-lg transition ${
+                    className={`flex size-8 items-center justify-center rounded-lg transition-all duration-150 ${
                       isPlanMode
-                        ? 'bg-emerald-600/20 text-emerald-400 hover:bg-emerald-600/30'
-                        : 'text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300'
+                        ? 'bg-[var(--color-status-success)]/20 text-[var(--color-status-success)] hover:bg-[var(--color-status-success)]/30'
+                        : 'text-[var(--color-text-muted)] hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text-primary)]'
                     }`}
                     disabled={isComposerDisabled}
                     onClick={() => onSetInteractionMode(isPlanMode ? 'interactive' : 'plan')}
@@ -700,16 +768,16 @@ export function ChatPane({
 
                 {/* Send / Stop / Steer button */}
                 <button
-                  className={`flex size-8 items-center justify-center rounded-lg transition ${
+                  className={`flex size-8 items-center justify-center rounded-lg transition-all duration-150 ${
                     isSessionBusy && !hasComposerContent && pendingAttachments.length === 0
-                      ? 'bg-red-600/80 text-white hover:bg-red-500'
+                      ? 'bg-[var(--color-status-error)]/80 text-white hover:bg-[var(--color-status-error)]'
                       : canSubmitInput || pendingAttachments.length > 0
                         ? isSessionBusy
-                          ? 'bg-amber-600 text-white hover:bg-amber-500'
+                          ? 'bg-[var(--color-status-warning)] text-white hover:brightness-110'
                           : isPlanMode
-                            ? 'bg-emerald-600 text-white hover:bg-emerald-500'
-                            : 'bg-indigo-600 text-white hover:bg-indigo-500'
-                        : 'bg-zinc-800 text-zinc-600'
+                            ? 'bg-[var(--color-status-success)] text-white hover:brightness-110'
+                            : 'brand-gradient-bg text-white shadow-[0_2px_12px_rgba(36,92,249,0.25)] hover:shadow-[0_4px_20px_rgba(36,92,249,0.35)]'
+                        : 'bg-[var(--color-surface-2)] text-[var(--color-text-muted)]'
                   }`}
                   disabled={!canSubmitInput && !isSessionBusy && pendingAttachments.length === 0}
                   onClick={() => {
@@ -741,16 +809,16 @@ export function ChatPane({
             </MarkdownComposer>
             {isPlanMode && !isSessionBusy && (
               <div className="flex items-center gap-1.5 px-3 pb-1.5 pt-0.5">
-                <div className="size-1.5 rounded-full bg-emerald-500" />
-                <span className="text-[10px] font-medium text-emerald-400/80">
+                <div className="size-1.5 rounded-full bg-[var(--color-status-success)]" />
+                <span className="text-[10px] font-medium text-[var(--color-status-success)]/80">
                   Plan mode — the agent will propose a plan instead of implementing
                 </span>
               </div>
             )}
             {isSessionBusy && (hasComposerContent || pendingAttachments.length > 0) && (
               <div className="flex items-center gap-1.5 px-3 pb-1.5 pt-0.5">
-                <div className="size-1.5 rounded-full bg-amber-500" />
-                <span className="text-[10px] font-medium text-amber-400/80">
+                <div className="size-1.5 rounded-full bg-[var(--color-status-warning)]" />
+                <span className="text-[10px] font-medium text-[var(--color-status-warning)]/80">
                   Steering — your message will be injected into the current turn
                 </span>
               </div>
@@ -760,15 +828,15 @@ export function ChatPane({
           {/* Session usage bar */}
           {sessionUsage && sessionUsage.tokenLimit > 0 && (
             <div className="px-1 pt-1.5">
-              <div className="flex items-center gap-2 text-[10px] text-zinc-500">
-                <div className="h-1 flex-1 overflow-hidden rounded-full bg-zinc-800">
+              <div className="flex items-center gap-2 text-[10px] text-[var(--color-text-muted)]">
+                <div className="h-1 flex-1 overflow-hidden rounded-full bg-[var(--color-surface-2)]">
                   <div
                     className={`h-full rounded-full transition-all ${
                       sessionUsage.currentTokens / sessionUsage.tokenLimit > 0.9
-                        ? 'bg-red-500'
+                        ? 'bg-[var(--color-status-error)]'
                         : sessionUsage.currentTokens / sessionUsage.tokenLimit > 0.7
-                          ? 'bg-amber-500'
-                          : 'bg-indigo-500/60'
+                          ? 'bg-[var(--color-status-warning)]'
+                          : 'bg-[var(--color-accent)]/60'
                     }`}
                     style={{ width: `${Math.min(100, (sessionUsage.currentTokens / sessionUsage.tokenLimit) * 100)}%` }}
                   />
@@ -784,3 +852,31 @@ export function ChatPane({
     </div>
   );
 }
+
+/* ── Branch origin banner ───────────────────────────────────── */
+
+function BranchOriginBanner({ action, label }: { action?: SessionBranchOriginAction; label?: string }) {
+  const icon =
+    action === 'regenerate'
+      ? <RefreshCw className="size-3.5 shrink-0 text-[var(--color-accent-sky)]" />
+      : <GitBranch className="size-3.5 shrink-0 text-[var(--color-accent)]" />;
+
+  const verb =
+    action === 'regenerate'
+      ? 'Regenerated from'
+      : action === 'edit-and-resend'
+        ? 'Edited & resent from'
+        : 'Branched from';
+
+  return (
+    <div className="mb-4 flex items-center gap-2.5 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]/60 px-3.5 py-2.5 text-[12px] text-[var(--color-text-secondary)]">
+      {icon}
+      <span>
+        {verb}{' '}
+        <span className="font-medium text-[var(--color-text-primary)]">
+          {label ?? 'a previous session'}
+        </span>
+      </span>
+    </div>
+  );
+}

src/renderer/components/CommandPalette.tsx

@@ -0,0 +1,497 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Archive,
+  Copy,
+  FolderOpen,
+  FolderPlus,
+  Keyboard,
+  MessageSquare,
+  Monitor,
+  Moon,
+  Pin,
+  PinOff,
+  Plus,
+  Search,
+  Settings,
+  Sparkles,
+  Sun,
+  Terminal,
+} from 'lucide-react';
+
+import type { AppearanceTheme } from '@shared/domain/tooling';
+import { isScratchpadProject } from '@shared/domain/project';
+import type { WorkspaceState } from '@shared/domain/workspace';
+import { shortcutKeys } from '@renderer/lib/keyboardShortcuts';
+
+interface PaletteCommand {
+  id: string;
+  label: string;
+  category: string;
+  keywords?: string;
+  shortcut?: string;
+  icon: React.ReactNode;
+  action: () => void;
+}
+
+export interface CommandPaletteProps {
+  workspace: WorkspaceState;
+  onClose: () => void;
+  onSelectSession: (sessionId: string) => void;
+  onSelectProject: (projectId: string) => void;
+  onNewSession: (projectId: string) => void;
+  onCreateScratchpad: () => void;
+  onOpenSettings: () => void;
+  onOpenProjectSettings: (projectId: string) => void;
+  onToggleTerminal: () => void;
+  onSetTheme: (theme: AppearanceTheme) => void;
+  onDuplicateSession: (sessionId: string) => void;
+  onPinSession: (sessionId: string, isPinned: boolean) => void;
+  onArchiveSession: (sessionId: string, isArchived: boolean) => void;
+  onAddProject: () => void;
+  onOpenAppDataFolder: () => void;
+  onShowShortcuts: () => void;
+  onShowSearch: () => void;
+}
+
+/** Score how well `query` matches `text` (and optional `keywords`). 0 = no match. */
+function matchScore(query: string, text: string, keywords?: string): number {
+  if (!query) return 1;
+  const q = query.toLowerCase();
+  const t = text.toLowerCase();
+
+  if (t.startsWith(q)) return 4;
+  if (t.split(/\s+/).some((w) => w.startsWith(q))) return 3;
+  if (t.includes(q)) return 2;
+  if (keywords?.toLowerCase().includes(q)) return 1.5;
+
+  const tokens = q.split(/\s+/).filter(Boolean);
+  if (tokens.length > 1) {
+    const combined = `${t} ${keywords?.toLowerCase() ?? ''}`;
+    if (tokens.every((tok) => combined.includes(tok))) return 1;
+  }
+  return 0;
+}
+
+const ICON = 'size-4';
+
+export function CommandPalette({
+  workspace,
+  onClose,
+  onSelectSession,
+  onSelectProject,
+  onNewSession,
+  onCreateScratchpad,
+  onOpenSettings,
+  onOpenProjectSettings,
+  onToggleTerminal,
+  onSetTheme,
+  onDuplicateSession,
+  onPinSession,
+  onArchiveSession,
+  onAddProject,
+  onOpenAppDataFolder,
+  onShowShortcuts,
+  onShowSearch,
+}: CommandPaletteProps) {
+  const [query, setQuery] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Intercept Escape in capture phase so it doesn't leak to other overlays
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscape, true);
+    return () => document.removeEventListener('keydown', handleEscape, true);
+  }, [onClose]);
+
+  const selectedSession = useMemo(() => {
+    const id = workspace.selectedSessionId;
+    return id ? workspace.sessions.find((s) => s.id === id) : undefined;
+  }, [workspace.sessions, workspace.selectedSessionId]);
+
+  const selectedProject = useMemo(() => {
+    const id = workspace.selectedProjectId;
+    return id ? workspace.projects.find((p) => p.id === id) : undefined;
+  }, [workspace.projects, workspace.selectedProjectId]);
+
+  const commands = useMemo<PaletteCommand[]>(() => {
+    const cmds: PaletteCommand[] = [];
+
+    // ── Sessions ──
+    const sessions = workspace.sessions
+      .filter((s) => !s.isArchived)
+      .sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
+
+    for (const s of sessions) {
+      const project = workspace.projects.find((p) => p.id === s.projectId);
+      const isCurrent = s.id === workspace.selectedSessionId;
+      cmds.push({
+        id: `session-${s.id}`,
+        label: `${s.title}${isCurrent ? ' (current)' : ''}`,
+        category: 'Sessions',
+        keywords: `switch ${project?.name ?? ''} ${s.status}`,
+        icon: <MessageSquare className={ICON} />,
+        action: () => onSelectSession(s.id),
+      });
+    }
+
+    // ── Actions ──
+    const defaultProjectId =
+      workspace.selectedProjectId ??
+      workspace.projects.find((p) => !isScratchpadProject(p))?.id;
+
+    if (defaultProjectId) {
+      cmds.push({
+        id: 'new-session',
+        label: 'New Session',
+        category: 'Actions',
+        keywords: 'create start',
+        shortcut: shortcutKeys('new-session'),
+        icon: <Plus className={ICON} />,
+        action: () => onNewSession(defaultProjectId),
+      });
+    }
+
+    cmds.push({
+      id: 'new-scratchpad',
+      label: 'Quick Scratchpad',
+      category: 'Actions',
+      keywords: 'create new scratch quick note',
+      icon: <Sparkles className={ICON} />,
+      action: onCreateScratchpad,
+    });
+
+    // ── Current session ──
+    if (selectedSession) {
+      cmds.push({
+        id: 'duplicate-session',
+        label: 'Duplicate Session',
+        category: 'Session',
+        keywords: 'copy clone',
+        icon: <Copy className={ICON} />,
+        action: () => onDuplicateSession(selectedSession.id),
+      });
+      cmds.push({
+        id: 'pin-session',
+        label: selectedSession.isPinned ? 'Unpin Session' : 'Pin Session',
+        category: 'Session',
+        keywords: 'pin unpin sticky',
+        icon: selectedSession.isPinned ? <PinOff className={ICON} /> : <Pin className={ICON} />,
+        action: () => onPinSession(selectedSession.id, !selectedSession.isPinned),
+      });
+      cmds.push({
+        id: 'archive-session',
+        label: 'Archive Session',
+        category: 'Session',
+        keywords: 'archive hide remove close',
+        shortcut: shortcutKeys('close-session'),
+        icon: <Archive className={ICON} />,
+        action: () => onArchiveSession(selectedSession.id, true),
+      });
+    }
+
+    // ── Projects ──
+    const userProjects = workspace.projects.filter((p) => !isScratchpadProject(p));
+    for (const p of userProjects) {
+      const isCurrent = p.id === workspace.selectedProjectId;
+      cmds.push({
+        id: `project-${p.id}`,
+        label: `${p.name}${isCurrent ? ' (current)' : ''}`,
+        category: 'Projects',
+        keywords: `switch folder ${p.path}`,
+        icon: <FolderOpen className={ICON} />,
+        action: () => onSelectProject(p.id),
+      });
+    }
+    cmds.push({
+      id: 'add-project',
+      label: 'Add Project',
+      category: 'Projects',
+      keywords: 'folder new open browse',
+      icon: <FolderPlus className={ICON} />,
+      action: onAddProject,
+    });
+
+    // ── General ──
+    cmds.push({
+      id: 'search-sessions',
+      label: 'Search Sessions',
+      category: 'General',
+      keywords: 'find search messages content text',
+      shortcut: shortcutKeys('search-sessions'),
+      icon: <Search className={ICON} />,
+      action: onShowSearch,
+    });
+
+    cmds.push({
+      id: 'settings',
+      label: 'Open Settings',
+      category: 'General',
+      keywords: 'preferences config options',
+      shortcut: shortcutKeys('settings'),
+      icon: <Settings className={ICON} />,
+      action: onOpenSettings,
+    });
+
+    if (selectedProject && !isScratchpadProject(selectedProject)) {
+      cmds.push({
+        id: 'project-settings',
+        label: `Project Settings — ${selectedProject.name}`,
+        category: 'General',
+        keywords: 'project config options customization',
+        icon: <Settings className={ICON} />,
+        action: () => onOpenProjectSettings(selectedProject.id),
+      });
+    }
+
+    cmds.push({
+      id: 'toggle-terminal',
+      label: 'Toggle Terminal',
+      category: 'General',
+      keywords: 'terminal console shell command',
+      shortcut: shortcutKeys('toggle-terminal'),
+      icon: <Terminal className={ICON} />,
+      action: onToggleTerminal,
+    });
+
+    cmds.push({
+      id: 'app-data',
+      label: 'Open App Data Folder',
+      category: 'General',
+      keywords: 'data storage files folder workspace',
+      icon: <FolderOpen className={ICON} />,
+      action: onOpenAppDataFolder,
+    });
+
+    cmds.push({
+      id: 'keyboard-shortcuts',
+      label: 'Keyboard Shortcuts',
+      category: 'General',
+      keywords: 'keys keybindings hotkeys help cheatsheet',
+      shortcut: shortcutKeys('shortcut-help'),
+      icon: <Keyboard className={ICON} />,
+      action: onShowShortcuts,
+    });
+
+    // ── Theme ──
+    cmds.push({
+      id: 'theme-dark',
+      label: 'Dark Theme',
+      category: 'Theme',
+      keywords: 'appearance dark mode night',
+      icon: <Moon className={ICON} />,
+      action: () => onSetTheme('dark'),
+    });
+    cmds.push({
+      id: 'theme-light',
+      label: 'Light Theme',
+      category: 'Theme',
+      keywords: 'appearance light mode day',
+      icon: <Sun className={ICON} />,
+      action: () => onSetTheme('light'),
+    });
+    cmds.push({
+      id: 'theme-system',
+      label: 'System Theme',
+      category: 'Theme',
+      keywords: 'appearance auto system follow',
+      icon: <Monitor className={ICON} />,
+      action: () => onSetTheme('system'),
+    });
+
+    return cmds;
+  }, [
+    workspace, selectedSession, selectedProject,
+    onSelectSession, onSelectProject, onNewSession, onCreateScratchpad,
+    onOpenSettings, onOpenProjectSettings, onToggleTerminal, onSetTheme,
+    onDuplicateSession, onPinSession, onArchiveSession, onAddProject,
+    onOpenAppDataFolder, onShowShortcuts, onShowSearch,
+  ]);
+
+  const filteredCommands = useMemo(() => {
+    if (!query.trim()) return commands;
+    return commands
+      .map((cmd) => ({ cmd, score: matchScore(query, cmd.label, cmd.keywords) }))
+      .filter(({ score }) => score > 0)
+      .sort((a, b) => b.score - a.score)
+      .map(({ cmd }) => cmd);
+  }, [commands, query]);
+
+  const groupedCommands = useMemo(() => {
+    const groups: { category: string; commands: PaletteCommand[] }[] = [];
+    const seen = new Set<string>();
+    for (const cmd of filteredCommands) {
+      if (!seen.has(cmd.category)) {
+        seen.add(cmd.category);
+        groups.push({ category: cmd.category, commands: [] });
+      }
+      groups.find((g) => g.category === cmd.category)!.commands.push(cmd);
+    }
+    return groups;
+  }, [filteredCommands]);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [query]);
+
+  const executeCommand = useCallback(
+    (cmd: PaletteCommand) => {
+      onClose();
+      cmd.action();
+    },
+    [onClose],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (filteredCommands.length > 0) {
+          setSelectedIndex((i) => Math.min(i + 1, filteredCommands.length - 1));
+        }
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        const cmd = filteredCommands[selectedIndex];
+        if (cmd) executeCommand(cmd);
+      }
+    },
+    [filteredCommands, selectedIndex, executeCommand],
+  );
+
+  useEffect(() => {
+    const item = listRef.current?.querySelector(`[data-palette-index="${selectedIndex}"]`);
+    item?.scrollIntoView({ block: 'nearest' });
+  }, [selectedIndex]);
+
+  let flatIndex = 0;
+
+  return (
+    <div
+      className="palette-backdrop-enter fixed inset-0 z-[60] flex justify-center bg-[#07080e]/80 pt-[18vh] backdrop-blur-sm"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Command palette"
+    >
+      <div
+        className="palette-enter glow-border flex h-fit max-h-[min(420px,60vh)] w-full max-w-xl flex-col overflow-hidden rounded-xl bg-[var(--color-surface-1)] shadow-[0_16px_64px_rgba(0,0,0,0.5)]"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
+      >
+        {/* Search input */}
+        <div className="flex items-center gap-3 border-b border-[var(--color-border)] px-4">
+          <Search className="size-4 shrink-0 text-[var(--color-text-muted)]" />
+          <input
+            ref={inputRef}
+            type="text"
+            className="flex-1 bg-transparent py-3.5 text-[14px] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-muted)]"
+            placeholder="Type a command…"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            aria-label="Search commands"
+            autoComplete="off"
+            spellCheck={false}
+          />
+          {query && (
+            <button
+              className="shrink-0 rounded px-1.5 py-0.5 text-[11px] text-[var(--color-text-muted)] transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)]"
+              onClick={() => setQuery('')}
+              type="button"
+            >
+              Clear
+            </button>
+          )}
+        </div>
+
+        {/* Results */}
+        <div ref={listRef} className="flex-1 overflow-y-auto py-1.5" role="listbox">
+          {groupedCommands.length === 0 ? (
+            <div className="px-4 py-8 text-center text-[13px] text-[var(--color-text-muted)]">
+              No matching commands
+            </div>
+          ) : (
+            groupedCommands.map((group) => (
+              <div key={group.category}>
+                <div className="px-4 pb-1 pt-2.5 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+                  {group.category}
+                </div>
+                {group.commands.map((cmd) => {
+                  const index = flatIndex++;
+                  const isSelected = index === selectedIndex;
+                  return (
+                    <button
+                      key={cmd.id}
+                      data-palette-index={index}
+                      className={`flex w-full items-center gap-3 px-4 py-2 text-left text-[13px] transition-colors ${
+                        isSelected
+                          ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-primary)]'
+                          : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-glass-hover)] hover:text-[var(--color-text-primary)]'
+                      }`}
+                      onClick={() => executeCommand(cmd)}
+                      onMouseEnter={() => setSelectedIndex(index)}
+                      role="option"
+                      aria-selected={isSelected}
+                      type="button"
+                    >
+                      <span
+                        className={
+                          isSelected
+                            ? 'text-[var(--color-text-accent)]'
+                            : 'text-[var(--color-text-muted)]'
+                        }
+                      >
+                        {cmd.icon}
+                      </span>
+                      <span className="flex-1 truncate">{cmd.label}</span>
+                      {cmd.shortcut && (
+                        <kbd className="rounded border border-[var(--color-border)] bg-[var(--color-surface-0)] px-1.5 py-0.5 font-mono text-[10px] text-[var(--color-text-muted)]">
+                          {cmd.shortcut}
+                        </kbd>
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Footer hints */}
+        <div className="flex items-center gap-4 border-t border-[var(--color-border)] px-4 py-2 text-[11px] text-[var(--color-text-muted)]">
+          <span className="flex items-center gap-1">
+            <kbd className="rounded border border-[var(--color-border-subtle)] px-1 font-mono text-[10px]">
+              ↑↓
+            </kbd>
+            navigate
+          </span>
+          <span className="flex items-center gap-1">
+            <kbd className="rounded border border-[var(--color-border-subtle)] px-1 font-mono text-[10px]">
+              ↵
+            </kbd>
+            select
+          </span>
+          <span className="flex items-center gap-1">
+            <kbd className="rounded border border-[var(--color-border-subtle)] px-1 font-mono text-[10px]">
+              esc
+            </kbd>
+            close
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/renderer/components/CopilotStatusCard.tsx

@@ -44,35 +44,35 @@ function getStatusConfig(status: SidecarConnectionStatus): StatusConfig {
   switch (status) {
     case 'ready':
       return {
-        icon: <CheckCircle2 className="size-4 text-emerald-400" />,
+        icon: <CheckCircle2 className="size-4 text-[var(--color-status-success)]" />,
         label: 'Connected to GitHub Copilot',
-        accentClasses: 'text-emerald-400',
-        dotClasses: 'bg-emerald-400',
+        accentClasses: 'text-[var(--color-status-success)]',
+        dotClasses: 'bg-[var(--color-status-success)]',
       };
     case 'copilot-cli-missing':
       return {
-        icon: <Download className="size-4 text-amber-400" />,
+        icon: <Download className="size-4 text-[var(--color-status-warning)]" />,
         label: 'Copilot CLI not found',
-        accentClasses: 'text-amber-400',
-        dotClasses: 'bg-amber-400',
+        accentClasses: 'text-[var(--color-status-warning)]',
+        dotClasses: 'bg-[var(--color-status-warning)]',
         actionIcon: <Terminal className="size-3" />,
         actionLabel: 'Install the copilot CLI and ensure it is on your PATH',
       };
     case 'copilot-auth-required':
       return {
-        icon: <LogIn className="size-4 text-blue-400" />,
+        icon: <LogIn className="size-4 text-[var(--color-status-info)]" />,
         label: 'Sign-in required',
-        accentClasses: 'text-blue-400',
-        dotClasses: 'bg-blue-400',
+        accentClasses: 'text-[var(--color-status-info)]',
+        dotClasses: 'bg-[var(--color-status-info)]',
         actionIcon: <Terminal className="size-3" />,
         actionLabel: 'Run copilot auth login in your terminal, then refresh',
       };
     case 'copilot-error':
       return {
-        icon: <XCircle className="size-4 text-red-400" />,
+        icon: <XCircle className="size-4 text-[var(--color-status-error)]" />,
         label: 'Connection error',
-        accentClasses: 'text-red-400',
-        dotClasses: 'bg-red-400',
+        accentClasses: 'text-[var(--color-status-error)]',
+        dotClasses: 'bg-[var(--color-status-error)]',
       };
   }
 }
@@ -108,21 +108,21 @@ function VersionBadge({ status, installedVersion }: { status: SidecarCopilotCliV
   switch (status) {
     case 'latest':
       return (
-        <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-400">
+        <span className="inline-flex items-center gap-1 rounded-full bg-[var(--color-status-success)]/10 px-2 py-0.5 text-[10px] font-medium text-[var(--color-status-success)]">
           <CheckCircle2 className="size-2.5" />
           {versionLabel ?? 'Up to date'}
         </span>
       );
     case 'outdated':
       return (
-        <span className="inline-flex items-center gap-1 rounded-full bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-400">
+        <span className="inline-flex items-center gap-1 rounded-full bg-[var(--color-status-warning)]/10 px-2 py-0.5 text-[10px] font-medium text-[var(--color-status-warning)]">
           <ArrowUpCircle className="size-2.5" />
           Update available
         </span>
       );
     case 'unknown':
       return (
-        <span className="inline-flex items-center gap-1 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-medium text-zinc-500">
+        <span className="inline-flex items-center gap-1 rounded-full bg-[var(--color-surface-3)] px-2 py-0.5 text-[10px] font-medium text-[var(--color-text-muted)]">
           {versionLabel ?? 'Version unknown'}
         </span>
       );
@@ -183,8 +183,8 @@ function QuotaSection({
   if (loading) {
     return (
       <div className="flex items-center gap-2 py-2">
-        <Loader2 className="size-3.5 animate-spin text-zinc-500" />
-        <span className="text-[12px] text-zinc-500">Loading quota…</span>
+        <Loader2 className="size-3.5 animate-spin text-[var(--color-text-muted)]" />
+        <span className="text-[12px] text-[var(--color-text-muted)]">Loading quota…</span>
       </div>
     );
   }
@@ -192,8 +192,8 @@ function QuotaSection({
   if (error) {
     return (
       <div className="flex items-center gap-2 py-2">
-        <XCircle className="size-3.5 text-red-400" />
-        <span className="text-[12px] text-zinc-500">Could not load quota</span>
+        <XCircle className="size-3.5 text-[var(--color-status-error)]" />
+        <span className="text-[12px] text-[var(--color-text-muted)]">Could not load quota</span>
       </div>
     );
   }
@@ -201,7 +201,7 @@ function QuotaSection({
   if (!quotaData || Object.keys(quotaData).length === 0) {
     return (
       <div className="py-2">
-        <span className="text-[12px] text-zinc-600">No quota data available</span>
+        <span className="text-[12px] text-[var(--color-text-muted)]">No quota data available</span>
       </div>
     );
   }
@@ -213,42 +213,42 @@ function QuotaSection({
           ? (snapshot.usedRequests / snapshot.entitlementRequests) * 100
           : 0;
         const barColor = usedPct > 90
-          ? 'bg-red-500'
+          ? 'bg-[var(--color-status-error)]'
           : usedPct > 70
-            ? 'bg-amber-500'
-            : 'bg-indigo-500/60';
+            ? 'bg-[var(--color-status-warning)]'
+            : 'bg-[var(--color-accent)]/60';
 
         return (
           <div key={key} className="space-y-1.5">
             <div className="flex items-center justify-between">
-              <span className="text-[12px] font-medium text-zinc-300">
+              <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">
                 {formatQuotaTypeLabel(key)}
               </span>
-              <span className="text-[11px] tabular-nums text-zinc-500">
+              <span className="text-[11px] tabular-nums text-[var(--color-text-muted)]">
                 {Math.round(snapshot.remainingPercentage)}% remaining
               </span>
             </div>
-            <div className="h-1.5 overflow-hidden rounded-full bg-zinc-800">
+            <div className="h-1.5 overflow-hidden rounded-full bg-[var(--color-surface-3)]">
               <div
                 className={`h-full rounded-full transition-all ${barColor}`}
                 style={{ width: `${Math.min(100, usedPct)}%` }}
               />
             </div>
-            <div className="flex items-center gap-1.5 text-[10px] text-zinc-500">
+            <div className="flex items-center gap-1.5 text-[10px] text-[var(--color-text-muted)]">
               <span className="tabular-nums">
                 {Math.round(snapshot.usedRequests)} of {Math.round(snapshot.entitlementRequests)} used
               </span>
               {snapshot.overage > 0 && (
                 <>
-                  <span className="text-zinc-700">·</span>
-                  <span className="tabular-nums text-amber-400">
+                  <span className="text-[var(--color-text-muted)]">·</span>
+                  <span className="tabular-nums text-[var(--color-status-warning)]">
                     {Math.round(snapshot.overage)} overage
                   </span>
                 </>
               )}
               {snapshot.resetDate && (
                 <>
-                  <span className="text-zinc-700">·</span>
+                  <span className="text-[var(--color-text-muted)]">·</span>
                   <span>Resets {formatResetDate(snapshot.resetDate)}</span>
                 </>
               )}
@@ -276,34 +276,34 @@ function AccountSection({ connection }: { connection: SidecarConnectionDiagnosti
     <div className="space-y-2.5">
       {/* Identity row */}
       <div className="flex items-center gap-2">
-        <User className="size-3.5 text-zinc-500" />
+        <User className="size-3.5 text-[var(--color-text-muted)]" />
         {hasLogin ? (
           <div className="flex items-center gap-1.5 text-[12px]">
-            <span className="font-medium text-zinc-200">{account.login}</span>
+            <span className="font-medium text-[var(--color-text-primary)]">{account.login}</span>
             {account.host && (
-              <span className="text-zinc-500">· {account.host}</span>
+              <span className="text-[var(--color-text-muted)]">· {account.host}</span>
             )}
           </div>
         ) : (
-          <span className="text-[12px] text-zinc-500">{account.statusMessage}</span>
+          <span className="text-[12px] text-[var(--color-text-muted)]">{account.statusMessage}</span>
         )}
       </div>
 
       {/* Organizations */}
       {hasOrgs && (
         <div className="flex items-start gap-2">
-          <Building2 className="mt-0.5 size-3.5 shrink-0 text-zinc-500" />
+          <Building2 className="mt-0.5 size-3.5 shrink-0 text-[var(--color-text-muted)]" />
           <div className="flex flex-wrap items-center gap-1">
             {visibleOrgs.map((org) => (
               <span
-                className="rounded-md bg-zinc-800 px-1.5 py-0.5 text-[10px] font-medium text-zinc-400"
+                className="rounded-md bg-[var(--color-surface-3)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--color-text-secondary)]"
                 key={org}
               >
                 {org}
               </span>
             ))}
             {remainingOrgs > 0 && (
-              <span className="text-[10px] text-zinc-600">+{remainingOrgs} more</span>
+              <span className="text-[10px] text-[var(--color-text-muted)]">+{remainingOrgs} more</span>
             )}
           </div>
         </div>
@@ -323,10 +323,10 @@ export function CopilotStatusCard({
 
   if (!connection) {
     return (
-      <div className="flex items-center gap-3 rounded-xl border border-[var(--color-border)] bg-zinc-900/40 px-4 py-3">
-        <Cpu className="size-4 text-zinc-600" />
-        <span className="text-[13px] text-zinc-500">Checking connection…</span>
-        <RefreshCw className="ml-auto size-3.5 animate-spin text-zinc-600" />
+      <div className="flex items-center gap-3 rounded-xl border border-[var(--color-border)] bg-[var(--color-glass)] px-4 py-3">
+        <Cpu className="size-4 text-[var(--color-text-muted)]" />
+        <span className="text-[13px] text-[var(--color-text-muted)]">Checking connection…</span>
+        <RefreshCw className="ml-auto size-3.5 animate-spin text-[var(--color-text-muted)]" />
       </div>
     );
   }
@@ -347,7 +347,7 @@ export function CopilotStatusCard({
           {config.label}
         </span>
         {isHealthy && (
-          <span className="text-[12px] text-zinc-500">
+          <span className="text-[12px] text-[var(--color-text-muted)]">
             · {modelCount} model{modelCount === 1 ? '' : 's'} available
           </span>
         )}
@@ -359,10 +359,10 @@ export function CopilotStatusCard({
             />
           )}
           {checkedLabel && (
-            <span className="text-[11px] text-zinc-600">{checkedLabel}</span>
+            <span className="text-[11px] text-[var(--color-text-muted)]">{checkedLabel}</span>
           )}
           <button
-            className="flex size-6 items-center justify-center rounded-md text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300 disabled:opacity-50"
+            className="flex size-6 items-center justify-center rounded-md text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)] disabled:opacity-50"
             disabled={isRefreshing}
             onClick={onRefresh}
             title="Refresh connection status"
@@ -381,11 +381,11 @@ export function CopilotStatusCard({
       {/* Usage & Quota (when healthy and callback provided) */}
       {isHealthy && onGetQuota && (
         <div className="space-y-2">
-          <div className="flex items-center gap-1.5 text-[11px] font-medium text-zinc-400">
+          <div className="flex items-center gap-1.5 text-[11px] font-medium text-[var(--color-text-secondary)]">
             <BarChart3 className="size-3" />
             <span>Usage &amp; Quota</span>
           </div>
-          <div className="rounded-lg border border-zinc-800/60 bg-zinc-900/40 px-3 py-2.5">
+          <div className="rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-glass)] px-3 py-2.5">
             <QuotaSection onGetQuota={onGetQuota} />
           </div>
         </div>
@@ -393,9 +393,9 @@ export function CopilotStatusCard({
 
       {/* Action hint for non-ready states */}
       {!isHealthy && config.actionLabel && (
-        <div className="flex items-start gap-2 rounded-lg border border-zinc-800 bg-zinc-900/60 px-3 py-2.5">
+        <div className="flex items-start gap-2 rounded-lg border border-[var(--color-border)] bg-[var(--color-glass)] px-3 py-2.5">
           <div className="mt-0.5 shrink-0">{config.actionIcon}</div>
-          <p className="text-[12px] leading-relaxed text-zinc-400">{config.actionLabel}</p>
+          <p className="text-[12px] leading-relaxed text-[var(--color-text-secondary)]">{config.actionLabel}</p>
         </div>
       )}
 
@@ -403,7 +403,7 @@ export function CopilotStatusCard({
       {isHealthy && hasDetail && (
         <div className="space-y-2">
           <button
-            className="flex w-full items-center gap-1.5 text-[11px] text-zinc-600 transition hover:text-zinc-400"
+            className="flex w-full items-center gap-1.5 text-[11px] text-[var(--color-text-muted)] transition-all duration-200 hover:text-[var(--color-text-secondary)]"
             onClick={() => setShowDetails((prev) => !prev)}
             type="button"
           >
@@ -412,26 +412,26 @@ export function CopilotStatusCard({
           </button>
 
           {showDetails && (
-            <div className="overflow-hidden rounded-lg border border-zinc-800/60 bg-zinc-900/40">
+            <div className="overflow-hidden rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-glass)]">
               {connection.copilotCliPath && (
-                <div className="border-b border-zinc-800/40 px-3 py-2">
-                  <span className="text-[10px] font-medium uppercase tracking-wider text-zinc-600">CLI path</span>
-                  <p className="mt-0.5 break-all font-mono text-[11px] text-zinc-400" title={connection.copilotCliPath}>
+                <div className="border-b border-[var(--color-border-subtle)] px-3 py-2">
+                  <span className="text-[10px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">CLI path</span>
+                  <p className="mt-0.5 break-all font-mono text-[11px] text-[var(--color-text-secondary)]" title={connection.copilotCliPath}>
                     {connection.copilotCliPath}
                   </p>
                 </div>
               )}
               {hasVersionInfo && connection.copilotCliVersion!.status === 'outdated' && connection.copilotCliVersion!.latestVersion && (
-                <div className="border-b border-zinc-800/40 px-3 py-2">
-                  <span className="text-[10px] font-medium uppercase tracking-wider text-zinc-600">Latest version</span>
-                  <p className="mt-0.5 font-mono text-[11px] text-zinc-400">
+                <div className="border-b border-[var(--color-border-subtle)] px-3 py-2">
+                  <span className="text-[10px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">Latest version</span>
+                  <p className="mt-0.5 font-mono text-[11px] text-[var(--color-text-secondary)]">
                     {connection.copilotCliVersion!.latestVersion}
                   </p>
                 </div>
               )}
               <div className="px-3 py-2">
-                <span className="text-[10px] font-medium uppercase tracking-wider text-zinc-600">Last checked</span>
-                <p className="mt-0.5 text-[11px] text-zinc-400">
+                <span className="text-[10px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">Last checked</span>
+                <p className="mt-0.5 text-[11px] text-[var(--color-text-secondary)]">
                   {new Date(connection.checkedAt).toLocaleString()}
                 </p>
               </div>
@@ -442,17 +442,17 @@ export function CopilotStatusCard({
 
       {/* Error detail for non-ready states */}
       {!isHealthy && hasDetail && (
-        <div className="overflow-hidden rounded-lg border border-zinc-800/60 bg-zinc-900/40">
-          <div className="border-b border-zinc-800/40 px-3 py-2">
-            <span className="text-[10px] font-medium uppercase tracking-wider text-zinc-600">CLI path</span>
-            <p className="mt-0.5 break-all font-mono text-[11px] text-zinc-400" title={connection.copilotCliPath}>
+        <div className="overflow-hidden rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-glass)]">
+          <div className="border-b border-[var(--color-border-subtle)] px-3 py-2">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">CLI path</span>
+            <p className="mt-0.5 break-all font-mono text-[11px] text-[var(--color-text-secondary)]" title={connection.copilotCliPath}>
               {shortenPath(connection.copilotCliPath!)}
             </p>
           </div>
           {connection.detail && (
             <div className="px-3 py-2">
-              <span className="text-[10px] font-medium uppercase tracking-wider text-zinc-600">Error detail</span>
-              <p className="mt-0.5 break-words text-[11px] text-zinc-400">{connection.detail}</p>
+              <span className="text-[10px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">Error detail</span>
+              <p className="mt-0.5 break-words text-[11px] text-[var(--color-text-secondary)]">{connection.detail}</p>
             </div>
           )}
         </div>

src/renderer/components/DiscoveredToolingModal.tsx

@@ -81,20 +81,20 @@ export function DiscoveredToolingModal({
     <div
       aria-labelledby="discovered-tooling-title"
       aria-modal="true"
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      className="overlay-backdrop-enter fixed inset-0 z-50 flex items-center justify-center bg-[#07080e]/90 backdrop-blur-sm"
       role="dialog"
     >
-      <div className="flex max-h-[80vh] w-full max-w-lg flex-col rounded-xl border border-zinc-800 bg-zinc-900 shadow-2xl">
+      <div className="overlay-panel-enter flex max-h-[80vh] w-full max-w-lg flex-col rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-1)] shadow-[0_16px_64px_rgba(0,0,0,0.5)]">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-zinc-800 px-5 py-4">
+        <div className="flex items-center justify-between border-b border-[var(--color-border)] px-5 py-4">
           <div className="flex items-center gap-2.5">
-            <FileSearch className="size-4 text-indigo-400" />
-            <h2 id="discovered-tooling-title" className="text-[13px] font-semibold text-zinc-100">
+            <FileSearch className="size-4 text-[var(--color-text-accent)]" />
+            <h2 id="discovered-tooling-title" className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">
               MCP servers found in config files
             </h2>
           </div>
           <button
-            className="flex size-7 items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+            className="flex size-7 items-center justify-center rounded-lg text-[var(--color-text-muted)] transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)]"
             onClick={onClose}
             type="button"
           >
@@ -104,7 +104,7 @@ export function DiscoveredToolingModal({
 
         {/* Body */}
         <div className="flex-1 overflow-y-auto px-5 py-4">
-          <p className="mb-4 text-[12px] leading-relaxed text-zinc-500">
+          <p className="mb-4 text-[12px] leading-relaxed text-[var(--color-text-muted)]">
             The following MCP servers were found in your config files. Accept the ones you want to
             use, or dismiss those you don&apos;t need. Accepted servers become available for session tooling.
           </p>
@@ -127,20 +127,20 @@ export function DiscoveredToolingModal({
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-between border-t border-zinc-800 px-5 py-3">
-          <span className="text-[12px] text-zinc-600">
+        <div className="flex items-center justify-between border-t border-[var(--color-border)] px-5 py-3">
+          <span className="text-[12px] text-[var(--color-text-muted)]">
             {totalPending} server{totalPending === 1 ? '' : 's'} pending review
           </span>
           <div className="flex items-center gap-2">
             <button
-              className="rounded-lg px-3 py-1.5 text-[13px] text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+              className="rounded-lg px-3 py-1.5 text-[13px] text-[var(--color-text-secondary)] transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
               onClick={handleDismissAll}
               type="button"
             >
               Dismiss All
             </button>
             <button
-              className="rounded-lg bg-indigo-600 px-3 py-1.5 text-[13px] font-medium text-white transition hover:bg-indigo-500"
+              className="rounded-lg bg-[var(--color-accent)] px-3 py-1.5 text-[13px] font-medium text-white transition hover:bg-[var(--color-accent-sky)]"
               onClick={handleAcceptAll}
               type="button"
             >
@@ -166,15 +166,15 @@ function DiscoveredGroup({
 }) {
   return (
     <div className="mb-4">
-      <div className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-zinc-600">
+      <div className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
         {scopeLabel}
       </div>
       {groups.map((group) => (
         <div className="mb-3" key={group.sourceLabel}>
-          <div className="mb-1.5 flex items-center gap-1.5 text-[11px] text-zinc-500">
+          <div className="mb-1.5 flex items-center gap-1.5 text-[11px] text-[var(--color-text-muted)]">
             <span className="truncate font-medium">{group.sourceLabel}</span>
-            <span className="text-zinc-700">·</span>
-            <span className="text-zinc-600">
+            <span className="text-[var(--color-text-muted)]">·</span>
+            <span className="text-[var(--color-text-muted)]">
               {group.servers.length} server{group.servers.length === 1 ? '' : 's'}
             </span>
           </div>
@@ -211,22 +211,22 @@ function ServerRow({
       : server.url || 'No URL';
 
   return (
-    <div className="group flex items-center gap-3 rounded-lg border border-zinc-800/60 bg-zinc-800/20 px-3 py-2.5">
-      <Server className="size-3.5 shrink-0 text-zinc-600" />
+    <div className="group flex items-center gap-3 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-glass)] px-3 py-2.5">
+      <Server className="size-3.5 shrink-0 text-[var(--color-text-muted)]" />
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <span className="truncate text-[13px] font-medium text-zinc-200">
+          <span className="truncate text-[13px] font-medium text-[var(--color-text-primary)]">
             {server.name}
           </span>
-          <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-zinc-500">
+          <span className="rounded-full bg-[var(--color-surface-3)] px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]">
             {server.transport}
           </span>
         </div>
-        <p className="mt-0.5 truncate text-[12px] text-zinc-500">{detail}</p>
+        <p className="mt-0.5 truncate text-[12px] text-[var(--color-text-muted)]">{detail}</p>
       </div>
       <div className="flex items-center gap-1">
         <button
-          className="flex size-7 items-center justify-center rounded-md text-zinc-600 transition hover:bg-red-500/10 hover:text-red-400"
+          className="flex size-7 items-center justify-center rounded-md text-[var(--color-text-muted)] transition hover:bg-[var(--color-status-error)]/10 hover:text-[var(--color-status-error)]"
           onClick={onDismiss}
           title="Dismiss"
           type="button"
@@ -234,7 +234,7 @@ function ServerRow({
           <XCircle className="size-3.5" />
         </button>
         <button
-          className="flex size-7 items-center justify-center rounded-md text-zinc-600 transition hover:bg-emerald-500/10 hover:text-emerald-400"
+          className="flex size-7 items-center justify-center rounded-md text-[var(--color-text-muted)] transition hover:bg-[var(--color-status-success)]/10 hover:text-[var(--color-status-success)]"
           onClick={onAccept}
           title="Accept"
           type="button"

src/renderer/components/KeyboardShortcutsPanel.tsx

@@ -0,0 +1,120 @@
+import { useEffect } from 'react';
+import { Keyboard } from 'lucide-react';
+
+import { shortcuts, type ShortcutDefinition } from '@renderer/lib/keyboardShortcuts';
+
+interface KeyboardShortcutsPanelProps {
+  onClose: () => void;
+}
+
+const categoryOrder = ['Navigation', 'Sessions', 'Workspace', 'General'] as const;
+
+function groupByCategory(defs: ShortcutDefinition[]): Map<string, ShortcutDefinition[]> {
+  const groups = new Map<string, ShortcutDefinition[]>();
+  for (const def of defs) {
+    const list = groups.get(def.category) ?? [];
+    list.push(def);
+    groups.set(def.category, list);
+  }
+  return groups;
+}
+
+export function KeyboardShortcutsPanel({ onClose }: KeyboardShortcutsPanelProps) {
+  // Escape to close — capture phase so it doesn't propagate
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscape, true);
+    return () => document.removeEventListener('keydown', handleEscape, true);
+  }, [onClose]);
+
+  const grouped = groupByCategory(shortcuts);
+
+  return (
+    <div
+      className="palette-backdrop-enter fixed inset-0 z-[70] flex items-center justify-center bg-[#07080e]/80 backdrop-blur-sm"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="shortcuts-title"
+    >
+      <div
+        className="palette-enter w-full max-w-lg overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-1)] shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center gap-3 border-b border-[var(--color-border)] px-5 py-3.5">
+          <Keyboard className="size-4 text-[var(--color-text-accent)]" />
+          <h2
+            id="shortcuts-title"
+            className="font-display text-[14px] font-semibold text-[var(--color-text-primary)]"
+          >
+            Keyboard Shortcuts
+          </h2>
+          <span className="ml-auto text-[11px] text-[var(--color-text-muted)]">
+            Press <Kbd>Esc</Kbd> to close
+          </span>
+        </div>
+
+        {/* Body — two-column grid of categories */}
+        <div className="grid grid-cols-2 gap-x-6 gap-y-5 px-5 py-4">
+          {categoryOrder.map((cat) => {
+            const items = grouped.get(cat);
+            if (!items?.length) return null;
+            return (
+              <div key={cat}>
+                <h3 className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+                  {cat}
+                </h3>
+                <ul className="space-y-1.5">
+                  {items.map((item) => (
+                    <li
+                      key={item.id}
+                      className="flex items-center justify-between gap-3 text-[12.5px]"
+                    >
+                      <span className="truncate text-[var(--color-text-secondary)]">
+                        {item.label}
+                      </span>
+                      <ShortcutBadge keys={item.keys} />
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-[var(--color-border)] px-5 py-2.5 text-[11px] text-[var(--color-text-muted)]">
+          Tip: Use the command palette for even more actions
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Inline keyboard key cap. */
+function Kbd({ children }: { children: React.ReactNode }) {
+  return (
+    <kbd className="rounded border border-[var(--color-border)] bg-[var(--color-surface-0)] px-1.5 py-0.5 font-mono text-[10px] text-[var(--color-text-muted)]">
+      {children}
+    </kbd>
+  );
+}
+
+/** Renders a compound shortcut like "Ctrl+Shift+Tab" as joined key caps. */
+function ShortcutBadge({ keys }: { keys: string }) {
+  const parts = keys.split('+');
+  return (
+    <span className="flex shrink-0 items-center gap-0.5">
+      {parts.map((part, i) => (
+        <Kbd key={i}>{part}</Kbd>
+      ))}
+    </span>
+  );
+}

src/renderer/components/MarkdownComposer.tsx

@@ -677,11 +677,11 @@ function ToolbarPlugin({ disabled }: { disabled: boolean }) {
   }, [editor]);
 
   return (
-    <div className="flex items-center gap-0.5 border-b border-zinc-700/50 px-2 py-1">
+    <div className="flex items-center gap-0.5 border-b border-[var(--color-border)]/50 px-2 py-1">
       <ToolbarButton active={state.isBold} disabled={disabled} icon={<Bold className="size-3.5" />} onClick={formatBold} onMouseDown={preventFocus} title="Bold (Ctrl+B)" />
       <ToolbarButton active={state.isItalic} disabled={disabled} icon={<Italic className="size-3.5" />} onClick={formatItalic} onMouseDown={preventFocus} title="Italic (Ctrl+I)" />
       <ToolbarButton active={state.isCode} disabled={disabled} icon={<Code className="size-3.5" />} onClick={formatInlineCode} onMouseDown={preventFocus} title="Inline Code" />
-      <div className="mx-1 h-4 w-px bg-zinc-700/50" />
+      <div className="mx-1 h-4 w-px bg-[var(--color-border)]/50" />
       <ToolbarButton active={state.blockType === 'ul'} disabled={disabled} icon={<List className="size-3.5" />} onClick={toggleBulletList} onMouseDown={preventFocus} title="Bullet List" />
       <ToolbarButton active={state.blockType === 'ol'} disabled={disabled} icon={<ListOrdered className="size-3.5" />} onClick={toggleNumberedList} onMouseDown={preventFocus} title="Numbered List" />
       <ToolbarButton active={state.blockType === 'code'} disabled={disabled} icon={<Braces className="size-3.5" />} onClick={toggleCodeBlock} onMouseDown={preventFocus} title="Code Block" />
@@ -709,8 +709,8 @@ function ToolbarButton({
       aria-pressed={active}
       className={`flex size-7 items-center justify-center rounded transition ${
         active
-          ? 'bg-indigo-600/30 text-indigo-300'
-          : 'text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300'
+          ? 'bg-[var(--color-accent)]/30 text-[var(--color-accent-sky)]'
+          : 'text-[var(--color-text-muted)] hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)]'
       } ${disabled ? 'pointer-events-none opacity-50' : ''}`}
       disabled={disabled}
       onClick={onClick}

src/renderer/components/NewSessionModal.tsx

@@ -57,13 +57,13 @@ export function NewSessionModal({
   const canCreate = projectId && patternId;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="new-session-title">
-      <div className="w-full max-w-md rounded-xl border border-zinc-800 bg-zinc-900 shadow-2xl">
+    <div className="overlay-backdrop-enter fixed inset-0 z-50 flex items-center justify-center bg-[#07080e]/90 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="new-session-title">
+      <div className="overlay-panel-enter w-full max-w-md rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-1)] shadow-[0_16px_64px_rgba(0,0,0,0.5)]">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-zinc-800 px-5 py-4">
-          <h2 id="new-session-title" className="text-[13px] font-semibold text-zinc-100">New Session</h2>
+        <div className="flex items-center justify-between border-b border-[var(--color-border)] px-5 py-4">
+          <h2 id="new-session-title" className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">New Session</h2>
           <button
-            className="flex size-7 items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+            className="flex size-7 items-center justify-center rounded-lg text-[var(--color-text-muted)] transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)]"
             onClick={onClose}
             type="button"
           >
@@ -74,9 +74,9 @@ export function NewSessionModal({
         {/* Body */}
         <div className="space-y-4 px-5 py-5">
           <label className="block space-y-1.5">
-            <span className="text-[12px] font-medium text-zinc-400">Project</span>
+            <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">Project</span>
             <select
-              className="w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-[13px] text-zinc-100 outline-none transition focus:border-indigo-500/50"
+              className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-0)] px-3 py-2 text-[13px] text-[var(--color-text-primary)] outline-none transition focus:border-[var(--color-accent)]/50"
               onChange={(e) => setProjectId(e.target.value)}
               value={projectId}
             >
@@ -89,28 +89,28 @@ export function NewSessionModal({
           </label>
 
           <label className="block space-y-1.5">
-            <span className="text-[12px] font-medium text-zinc-400">Pattern</span>
-            <div className="space-y-1 rounded-lg border border-zinc-700 bg-zinc-950 p-1.5">
+            <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">Pattern</span>
+            <div className="space-y-1 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-0)] p-1.5">
               {availablePatterns.map((p) => (
                 <div
                   key={p.id}
                   className={`flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-[13px] transition ${
                     patternId === p.id
-                      ? 'bg-indigo-500/15 text-zinc-100 ring-1 ring-indigo-500/25'
-                      : 'text-zinc-300 hover:bg-zinc-800/60'
+                      ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-primary)] ring-1 ring-[var(--color-border-glow)]'
+                      : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-glass-hover)]'
                   }`}
                   onClick={() => setPatternId(p.id)}
                 >
                   <span className="flex-1 truncate">
                     {p.name}
-                    <span className="ml-1.5 text-[11px] text-zinc-500">({p.mode})</span>
+                    <span className="ml-1.5 text-[11px] text-[var(--color-text-muted)]">({p.mode})</span>
                   </span>
                   {onTogglePatternFavorite && (
                     <button
                       className={`shrink-0 transition ${
                         p.isFavorite
-                          ? 'text-amber-400 hover:text-amber-300'
-                          : 'text-zinc-700 hover:text-zinc-400'
+                          ? 'text-[var(--color-status-warning)] hover:text-[var(--color-status-warning)]'
+                          : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
                       }`}
                       onClick={(e) => {
                         e.stopPropagation();
@@ -126,7 +126,7 @@ export function NewSessionModal({
               ))}
             </div>
             {patternId && (
-              <p className="text-[12px] text-zinc-600">
+              <p className="text-[12px] text-[var(--color-text-muted)]">
                 {availablePatterns.find((p) => p.id === patternId)?.description}
               </p>
             )}
@@ -134,16 +134,16 @@ export function NewSessionModal({
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-2 border-t border-zinc-800 px-5 py-3">
+        <div className="flex items-center justify-end gap-2 border-t border-[var(--color-border)] px-5 py-3">
           <button
-            className="rounded-lg px-4 py-1.5 text-[13px] text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+            className="rounded-lg px-4 py-1.5 text-[13px] text-[var(--color-text-secondary)] transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
             onClick={onClose}
             type="button"
           >
             Cancel
           </button>
           <button
-            className="rounded-lg bg-indigo-600 px-4 py-1.5 text-[13px] font-medium text-white transition hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
+            className="rounded-lg bg-[var(--color-accent)] px-4 py-1.5 text-[13px] font-medium text-white transition hover:bg-[var(--color-accent-sky)] disabled:cursor-not-allowed disabled:opacity-40"
             disabled={!canCreate}
             onClick={() => canCreate && onCreate(projectId, patternId)}
             type="button"

src/renderer/components/PatternEditor.tsx

@@ -105,10 +105,10 @@ function InputField({
   placeholder?: string;
 }) {
   const baseClasses =
-    'w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 placeholder-zinc-600 outline-none transition focus:border-indigo-500/50';
+    'w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 text-[13px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition-all duration-200 focus:border-[var(--color-accent)]/50';
   return (
     <label className="block space-y-1.5">
-      <span className="text-[12px] font-medium text-zinc-400">{label}</span>
+      <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">{label}</span>
       {multiline ? (
         <textarea
           className={`${baseClasses} min-h-20 resize-y`}
@@ -242,17 +242,17 @@ export function PatternEditor({
       <div className="drag-region flex items-center justify-between border-b border-[var(--color-border)] pb-3 pl-5 pr-36 pt-3">
         <div className="flex items-center gap-3">
           <button
-            className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+            className="no-drag flex size-8 items-center justify-center rounded-lg text-[var(--color-text-secondary)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
             onClick={onBack}
             type="button"
           >
             <ChevronLeft className="size-4" />
           </button>
           <div>
-            <h3 className="text-[13px] font-semibold text-zinc-100">
+            <h3 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">
               {pattern.name || 'Untitled pattern'}
             </h3>
-            <p className="text-[12px] text-zinc-500">
+            <p className="text-[12px] text-[var(--color-text-muted)]">
               {isBuiltin ? 'Built-in pattern' : 'Custom pattern'}
             </p>
           </div>
@@ -260,7 +260,7 @@ export function PatternEditor({
         <div className="no-drag flex items-center gap-2">
           {!isBuiltin && onDelete && (
             <button
-              className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] text-red-400 transition hover:bg-red-500/10"
+              className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] text-[var(--color-status-error)] transition-all duration-200 hover:bg-[var(--color-status-error)]/10"
               onClick={onDelete}
               type="button"
             >
@@ -269,7 +269,7 @@ export function PatternEditor({
             </button>
           )}
           <button
-            className="rounded-lg bg-indigo-600 px-4 py-1.5 text-[13px] font-medium text-white transition hover:bg-indigo-500"
+            className="rounded-lg bg-[var(--color-accent)] px-4 py-1.5 text-[13px] font-medium text-white transition-all duration-200 hover:bg-[var(--color-accent-sky)]"
             onClick={onSave}
             type="button"
           >
@@ -290,8 +290,8 @@ export function PatternEditor({
                   <div
                     className={`flex items-start gap-2 rounded-lg px-3 py-2 text-[12px] ${
                       issue.level === 'error'
-                        ? 'bg-red-500/10 text-red-300'
-                        : 'bg-amber-500/10 text-amber-300'
+                        ? 'bg-[var(--color-status-error)]/10 text-[var(--color-status-error)]'
+                        : 'bg-[var(--color-status-warning)]/10 text-[var(--color-status-warning)]'
                     }`}
                     key={`${issue.field ?? 'v'}-${i}`}
                   >
@@ -301,7 +301,7 @@ export function PatternEditor({
                 ))}
               </div>
             ) : (
-              <div className="flex items-center gap-2 rounded-lg bg-emerald-500/10 px-3 py-2 text-[12px] text-emerald-300">
+              <div className="flex items-center gap-2 rounded-lg bg-[var(--color-status-success)]/10 px-3 py-2 text-[12px] text-[var(--color-status-success)]">
                 <CheckCircle className="size-3.5" />
                 Pattern is valid
               </div>
@@ -310,11 +310,11 @@ export function PatternEditor({
 
           {/* Graph canvas */}
           <div className="flex items-center justify-between px-5 pt-4">
-            <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+            <h4 className="text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
               Topology
             </h4>
             <button
-              className="flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-[12px] font-medium text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+              className="flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-[12px] font-medium text-[var(--color-text-secondary)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
               onClick={addAgent}
               type="button"
             >
@@ -335,11 +335,11 @@ export function PatternEditor({
           </div>
 
           {/* Scrollable settings below graph */}
-          <div className="max-h-[45%] overflow-y-auto border-t border-zinc-800/50 px-5 py-5">
+          <div className="max-h-[45%] overflow-y-auto border-t border-[var(--color-border-subtle)] px-5 py-5">
             <div className="space-y-8">
               {/* General */}
               <section className="space-y-4">
-                <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+                <h4 className="text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                   General
                 </h4>
                 <div className="grid gap-3 sm:grid-cols-2">
@@ -360,7 +360,7 @@ export function PatternEditor({
 
               {/* Mode selector */}
               <section className="space-y-4">
-                <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+                <h4 className="text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                   Orchestration Mode
                 </h4>
                 <div className="grid grid-cols-3 gap-2">
@@ -372,12 +372,12 @@ export function PatternEditor({
 
                     return (
                       <button
-                        className={`flex flex-col rounded-xl border p-2.5 text-left transition ${
+                        className={`flex flex-col rounded-xl border p-2.5 text-left transition-all duration-200 ${
                           selected
-                            ? 'border-indigo-500/40 bg-indigo-500/5 ring-1 ring-indigo-500/20'
+                            ? 'border-[var(--color-border-glow)] bg-[var(--color-accent-muted)] ring-1 ring-[var(--color-border-glow)]'
                             : disabled
-                              ? 'cursor-not-allowed border-zinc-800/50 opacity-40'
-                              : 'border-zinc-800 hover:border-zinc-700 hover:bg-zinc-900/60'
+                              ? 'cursor-not-allowed border-[var(--color-border-subtle)] opacity-40'
+                              : 'border-[var(--color-border)] hover:border-[var(--color-border)] hover:bg-[var(--color-glass)]'
                         }`}
                         disabled={disabled}
                         key={mode}
@@ -386,17 +386,17 @@ export function PatternEditor({
                       >
                         <div className="flex items-center gap-1.5">
                           <Icon
-                            className={`size-3.5 ${selected ? 'text-indigo-400' : 'text-zinc-500'}`}
+                            className={`size-3.5 ${selected ? 'text-[var(--color-text-accent)]' : 'text-[var(--color-text-muted)]'}`}
                           />
                           <span
                             className={`text-[11px] font-semibold ${
-                              selected ? 'text-indigo-200' : 'text-zinc-300'
+                              selected ? 'text-[var(--color-text-accent)]' : 'text-[var(--color-text-secondary)]'
                             }`}
                           >
                             {info.label}
                           </span>
                         </div>
-                        <p className="mt-1 text-[10px] leading-snug text-zinc-500">
+                        <p className="mt-1 text-[10px] leading-snug text-[var(--color-text-muted)]">
                           {info.description}
                         </p>
                       </button>
@@ -407,12 +407,11 @@ export function PatternEditor({
 
               {/* Approval checkpoints */}
               <section className="space-y-4">
-                <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+                <h4 className="text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                   Approval Checkpoints
                 </h4>
 
-                <p className="text-[11px] leading-relaxed text-zinc-600">
-                  Pause the run for human review before risky actions or publishing responses.
+                <p className="text-[11px] leading-relaxed text-[var(--color-text-muted)]">
                 </p>
 
                 <div className="space-y-3">
@@ -426,15 +425,15 @@ export function PatternEditor({
                     scopedAgentIds={checkpointAgentIds('tool-call')}
                     onScopeChange={(agentIds) => setCheckpointAgentScope('tool-call', agentIds)}
                   >
-                    <div className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+                    <div className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                       Auto-approved tools
                     </div>
-                    <p className="mb-3 text-[11px] leading-relaxed text-zinc-600">
+                    <p className="mb-3 text-[11px] leading-relaxed text-[var(--color-text-muted)]">
                       Tools marked as auto-approved will skip manual review.
                       Sessions can override these defaults from the Activity panel.
                     </p>
                     {approvalTools.length === 0 ? (
-                      <p className="py-2 text-center text-[11px] text-zinc-600">
+                      <p className="py-2 text-center text-[11px] text-[var(--color-text-muted)]">
                         No tools available yet. Connect MCP servers or wait for runtime capabilities to load.
                       </p>
                     ) : (
@@ -462,9 +461,9 @@ export function PatternEditor({
         </div>
 
         {/* Right column: node inspector */}
-        <div className="w-[320px] shrink-0 overflow-y-auto border-l border-zinc-800/50 bg-zinc-900/30">
-          <div className="border-b border-zinc-800/50 px-4 py-3">
-            <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+        <div className="w-[320px] shrink-0 overflow-y-auto border-l border-[var(--color-border-subtle)] bg-[var(--color-glass)]">
+          <div className="border-b border-[var(--color-border-subtle)] px-4 py-3">
+            <h4 className="text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
               Inspector
             </h4>
           </div>
@@ -518,26 +517,26 @@ function ApprovalCheckpointRow({
   }
 
   return (
-    <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+    <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-glass)] p-4">
       <button className="flex w-full items-center gap-3 text-left" onClick={() => onToggle(!enabled)} type="button">
-        <ShieldCheck className={`size-4 shrink-0 ${enabled ? 'text-indigo-400' : 'text-zinc-600'}`} />
+        <ShieldCheck className={`size-4 shrink-0 ${enabled ? 'text-[var(--color-text-accent)]' : 'text-[var(--color-text-muted)]'}`} />
         <div className="min-w-0 flex-1">
-          <span className="text-[12px] font-medium text-zinc-200">{label}</span>
-          <p className="text-[11px] text-zinc-500">{description}</p>
+          <span className="text-[12px] font-medium text-[var(--color-text-primary)]">{label}</span>
+          <p className="text-[11px] text-[var(--color-text-muted)]">{description}</p>
         </div>
         <ToggleSwitch enabled={enabled} />
       </button>
 
       {/* Agent scope selector */}
       {enabled && agents.length > 1 && (
-        <div className="mt-3 border-t border-zinc-800/50 pt-3">
+        <div className="mt-3 border-t border-[var(--color-border-subtle)] pt-3">
           <div className="mb-2 flex items-center gap-2">
-            <span className="text-[11px] font-medium text-zinc-400">Scope</span>
+            <span className="text-[11px] font-medium text-[var(--color-text-secondary)]">Scope</span>
             <button
-              className={`rounded-full px-2 py-0.5 text-[10px] font-medium transition ${
+              className={`rounded-full px-2 py-0.5 text-[10px] font-medium transition-all duration-200 ${
                 isAllAgents
-                  ? 'bg-indigo-500/15 text-indigo-300'
-                  : 'bg-zinc-800 text-zinc-500 hover:text-zinc-400'
+                  ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]'
+                  : 'bg-[var(--color-surface-3)] text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
               }`}
               onClick={() => onScopeChange(undefined)}
               type="button"
@@ -545,10 +544,10 @@ function ApprovalCheckpointRow({
               All agents
             </button>
             <button
-              className={`rounded-full px-2 py-0.5 text-[10px] font-medium transition ${
+              className={`rounded-full px-2 py-0.5 text-[10px] font-medium transition-all duration-200 ${
                 !isAllAgents
-                  ? 'bg-indigo-500/15 text-indigo-300'
-                  : 'bg-zinc-800 text-zinc-500 hover:text-zinc-400'
+                  ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]'
+                  : 'bg-[var(--color-surface-3)] text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
               }`}
               onClick={() => onScopeChange([])}
               type="button"
@@ -563,10 +562,10 @@ function ApprovalCheckpointRow({
                 const isSelected = scopedAgentIds?.includes(agent.id) ?? false;
                 return (
                   <button
-                    className={`rounded-full px-2.5 py-1 text-[11px] font-medium transition ${
+                    className={`rounded-full px-2.5 py-1 text-[11px] font-medium transition-all duration-200 ${
                       isSelected
-                        ? 'bg-indigo-500/20 text-indigo-300 ring-1 ring-indigo-500/30'
-                        : 'bg-zinc-800 text-zinc-500 hover:bg-zinc-700 hover:text-zinc-400'
+                        ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-accent)] ring-1 ring-[var(--color-border-glow)]'
+                        : 'bg-[var(--color-surface-3)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)]'
                     }`}
                     key={agent.id}
                     onClick={() => toggleAgentScope(agent.id)}
@@ -583,7 +582,7 @@ function ApprovalCheckpointRow({
 
       {/* Optional additional content (e.g. tool auto-approval list) */}
       {enabled && children && (
-        <div className="mt-3 border-t border-zinc-800/50 pt-3">
+        <div className="mt-3 border-t border-[var(--color-border-subtle)] pt-3">
           {children}
         </div>
       )}
@@ -620,7 +619,7 @@ function ToolApprovalGroupedList({
       {groups.map((group, i) => (
         <div key={group.kind}>
           {showHeaders && (
-            <div className={`text-[9px] font-semibold uppercase tracking-wider text-zinc-600 ${i > 0 ? 'mt-3' : ''} mb-1`}>
+            <div className={`text-[9px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)] ${i > 0 ? 'mt-3' : ''} mb-1`}>
               {approvalKindLabels[group.kind]}
             </div>
           )}
@@ -650,13 +649,13 @@ function ToolApprovalToggleRow({
   const detail = tool.description || (tool.providerNames.length > 0 ? tool.providerNames.join(', ') : undefined);
   return (
     <button
-      className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left transition hover:bg-zinc-800/60"
+      className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left transition-all duration-200 hover:bg-[var(--color-surface-3)]/60"
       onClick={onToggle}
       type="button"
     >
       <div className="min-w-0 flex-1">
-        <span className="truncate text-[12px] font-medium text-zinc-300">{tool.label}</span>
-        {detail && <div className="truncate text-[10px] text-zinc-600">{detail}</div>}
+        <span className="truncate text-[12px] font-medium text-[var(--color-text-secondary)]">{tool.label}</span>
+        {detail && <div className="truncate text-[10px] text-[var(--color-text-muted)]">{detail}</div>}
       </div>
       <ToggleSwitch enabled={enabled} />
     </button>

src/renderer/components/ProjectSettingsPanel.tsx

@@ -111,20 +111,20 @@ export function ProjectSettingsPanel({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex flex-col bg-[var(--color-surface-0)]">
+    <div className="overlay-slide-enter fixed inset-0 z-50 flex flex-col bg-[var(--color-surface-0)]">
       {/* Header */}
       <div className="drag-region flex items-center gap-3 border-b border-[var(--color-border)] px-5 pb-3 pt-3">
         <button
-          className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+          className="no-drag flex size-8 items-center justify-center rounded-lg text-[var(--color-text-secondary)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
           onClick={onClose}
           type="button"
         >
           <ChevronLeft className="size-4" />
         </button>
-        <h2 className="text-[13px] font-semibold text-zinc-100">
+        <h2 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">
           Project Settings
-          <span className="ml-2 font-normal text-zinc-500">·</span>
-          <span className="ml-2 font-normal text-zinc-400">{project.name}</span>
+          <span className="ml-2 font-normal text-[var(--color-text-muted)]">·</span>
+          <span className="ml-2 font-normal text-[var(--color-text-secondary)]">{project.name}</span>
         </h2>
       </div>
 
@@ -135,7 +135,7 @@ export function ProjectSettingsPanel({
           <div className="space-y-4">
             {navGroups.map((group) => (
               <div key={group.label}>
-                <span className="mb-1 block px-3 text-[10px] font-semibold uppercase tracking-wider text-zinc-600">
+                <span className="mb-1 block px-3 text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                   {group.label}
                 </span>
                 <div className="space-y-0.5">
@@ -144,10 +144,10 @@ export function ProjectSettingsPanel({
                     const badge = sectionBadge(item.id);
                     return (
                       <button
-                        className={`flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-[13px] transition ${
+                        className={`flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-[13px] transition-all duration-200 ${
                           isActive
-                            ? 'bg-zinc-800 font-medium text-zinc-100'
-                            : 'text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-300'
+                            ? 'bg-[var(--color-surface-3)] font-medium text-[var(--color-text-primary)]'
+                            : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-3)]/50 hover:text-[var(--color-text-secondary)]'
                         }`}
                         key={item.id}
                         onClick={() => {
@@ -156,7 +156,7 @@ export function ProjectSettingsPanel({
                         }}
                         type="button"
                       >
-                        <span className={isActive ? 'text-zinc-300' : 'text-zinc-500'}>{item.icon}</span>
+                        <span className={isActive ? 'text-[var(--color-text-secondary)]' : 'text-[var(--color-text-muted)]'}>{item.icon}</span>
                         <span className="flex-1 truncate">{item.label}</span>
                         {badge}
                       </button>
@@ -167,13 +167,13 @@ export function ProjectSettingsPanel({
             ))}
 
             {/* Danger zone at the bottom */}
-            <div className="border-t border-zinc-800 pt-3">
+            <div className="border-t border-[var(--color-border)] pt-3">
               <div className="space-y-0.5">
                 <button
-                  className={`flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-[13px] transition ${
+                  className={`flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-[13px] transition-all duration-200 ${
                     activeSection === 'danger-zone'
-                      ? 'bg-zinc-800 font-medium text-red-400'
-                      : 'text-zinc-500 hover:bg-zinc-800/50 hover:text-red-400'
+                      ? 'bg-[var(--color-surface-3)] font-medium text-[var(--color-status-error)]'
+                      : 'text-[var(--color-text-muted)] hover:bg-[var(--color-surface-3)]/50 hover:text-[var(--color-status-error)]'
                   }`}
                   onClick={() => {
                     setActiveSection('danger-zone');
@@ -240,7 +240,7 @@ export function ProjectSettingsPanel({
 
 function CountBadge({ count, total }: { count: number; total?: number }) {
   return (
-    <span className="rounded-full bg-zinc-800 px-1.5 py-0.5 text-[10px] font-medium text-zinc-500">
+    <span className="rounded-full bg-[var(--color-surface-3)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--color-text-muted)]">
       {total !== undefined ? `${count}/${total}` : count}
     </span>
   );
@@ -248,7 +248,7 @@ function CountBadge({ count, total }: { count: number; total?: number }) {
 
 function PendingBadge({ count }: { count: number }) {
   return (
-    <span className="rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400">
+    <span className="rounded-full bg-[var(--color-status-warning)]/10 px-1.5 py-0.5 text-[10px] font-medium text-[var(--color-status-warning)]">
       {count} new
     </span>
   );
@@ -263,12 +263,12 @@ function OverviewContent({ project }: { project: ProjectRecord }) {
         description="Project details and git status."
         title="Overview"
       />
-      <div className="rounded-xl border border-zinc-800 bg-zinc-900/40 px-5 py-4 space-y-3">
+      <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-glass)] px-5 py-4 space-y-3">
         <div className="flex items-center gap-3">
-          <FolderOpen className="size-5 shrink-0 text-indigo-400" />
+          <FolderOpen className="size-5 shrink-0 text-[var(--color-text-accent)]" />
           <div className="min-w-0">
-            <div className="text-[13px] font-medium text-zinc-200">{project.name}</div>
-            <div className="mt-0.5 truncate text-[12px] text-zinc-500">{project.path}</div>
+            <div className="text-[13px] font-medium text-[var(--color-text-primary)]">{project.name}</div>
+            <div className="mt-0.5 truncate text-[12px] text-[var(--color-text-muted)]">{project.path}</div>
           </div>
         </div>
         {project.git && <ProjectGitInfo git={project.git} />}
@@ -280,7 +280,7 @@ function OverviewContent({ project }: { project: ProjectRecord }) {
 function ProjectGitInfo({ git }: { git: ProjectGitContext }) {
   if (git.status === 'not-repository') {
     return (
-      <div className="flex items-center gap-2 text-[12px] text-zinc-600">
+      <div className="flex items-center gap-2 text-[12px] text-[var(--color-text-muted)]">
         <GitBranch className="size-3.5" />
         Not a git repository
       </div>
@@ -289,7 +289,7 @@ function ProjectGitInfo({ git }: { git: ProjectGitContext }) {
 
   if (git.status === 'git-missing') {
     return (
-      <div className="flex items-center gap-2 text-[12px] text-amber-500/70">
+      <div className="flex items-center gap-2 text-[12px] text-[var(--color-status-warning)]">
         <AlertTriangle className="size-3.5" />
         Git is not installed
       </div>
@@ -298,7 +298,7 @@ function ProjectGitInfo({ git }: { git: ProjectGitContext }) {
 
   if (git.status === 'error') {
     return (
-      <div className="flex items-center gap-2 text-[12px] text-red-400/70">
+      <div className="flex items-center gap-2 text-[12px] text-[var(--color-status-error)]">
         <AlertTriangle className="size-3.5" />
         {git.errorMessage ?? 'Git error'}
       </div>
@@ -312,12 +312,12 @@ function ProjectGitInfo({ git }: { git: ProjectGitContext }) {
   if (git.behind) parts.push(`${git.behind} behind`);
 
   return (
-    <div className="flex items-center gap-2 text-[12px] text-zinc-400">
+    <div className="flex items-center gap-2 text-[12px] text-[var(--color-text-secondary)]">
       <GitBranch className="size-3.5 shrink-0" />
       <span>{branchLabel}</span>
-      {git.isDirty && <Circle className="size-1.5 shrink-0 fill-amber-500 text-amber-500" />}
+      {git.isDirty && <Circle className="size-1.5 shrink-0 fill-[var(--color-status-warning)] text-[var(--color-status-warning)]" />}
       {parts.length > 0 && (
-        <span className="text-zinc-600">· {parts.join(' · ')}</span>
+        <span className="text-[var(--color-text-muted)]">· {parts.join(' · ')}</span>
       )}
     </div>
   );
@@ -343,7 +343,7 @@ function InstructionsContent({
 
       {instructions.length === 0 ? (
         <EmptyState>
-          No instruction files found. Add a <code className="text-zinc-400">.github/copilot-instructions.md</code> or <code className="text-zinc-400">AGENTS.md</code> file to your project root.
+          No instruction files found. Add a <code className="text-[var(--color-text-secondary)]">.github/copilot-instructions.md</code> or <code className="text-[var(--color-text-secondary)]">AGENTS.md</code> file to your project root.
         </EmptyState>
       ) : (
         <div className="space-y-3">
@@ -361,28 +361,28 @@ function InstructionCard({ instruction }: { instruction: ProjectInstructionFile
   const isLong = instruction.content.length > 300;
 
   return (
-    <div className="rounded-xl border border-zinc-800 bg-zinc-900/40">
+    <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-glass)]">
       <button
-        className="flex w-full items-center gap-3 px-5 py-3.5 text-left transition hover:bg-zinc-900/60"
+        className="flex w-full items-center gap-3 px-5 py-3.5 text-left transition-all duration-200 hover:bg-[var(--color-glass)]"
         onClick={() => setExpanded(!expanded)}
         type="button"
       >
-        <FileCode2 className="size-4 shrink-0 text-indigo-400" />
-        <span className="flex-1 text-[13px] font-medium text-zinc-200">{instruction.sourcePath}</span>
+        <FileCode2 className="size-4 shrink-0 text-[var(--color-text-accent)]" />
+        <span className="flex-1 text-[13px] font-medium text-[var(--color-text-primary)]">{instruction.sourcePath}</span>
         <ChevronDown
-          className={`size-3.5 shrink-0 text-zinc-500 transition-transform ${expanded ? 'rotate-180' : ''}`}
+          className={`size-3.5 shrink-0 text-[var(--color-text-muted)] transition-transform ${expanded ? 'rotate-180' : ''}`}
         />
       </button>
       {expanded && (
-        <div className="border-t border-zinc-800 px-5 py-4">
-          <pre className="whitespace-pre-wrap text-[11px] leading-relaxed text-zinc-400">
+        <div className="border-t border-[var(--color-border)] px-5 py-4">
+          <pre className="whitespace-pre-wrap text-[11px] leading-relaxed text-[var(--color-text-secondary)]">
             {instruction.content}
           </pre>
         </div>
       )}
       {!expanded && (
         <div className="px-5 pb-3">
-          <p className={`text-[11px] leading-relaxed text-zinc-500 ${isLong ? 'line-clamp-2' : ''}`}>
+          <p className={`text-[11px] leading-relaxed text-[var(--color-text-muted)] ${isLong ? 'line-clamp-2' : ''}`}>
             {instruction.content}
           </p>
         </div>
@@ -415,12 +415,12 @@ function AgentsContent({
 
       {agents.length === 0 ? (
         <EmptyState>
-          No custom agents found. Add <code className="text-zinc-400">.agent.md</code> files to <code className="text-zinc-400">.github/agents/</code> in your project.
+          No custom agents found. Add <code className="text-[var(--color-text-secondary)]">.agent.md</code> files to <code className="text-[var(--color-text-secondary)]">.github/agents/</code> in your project.
         </EmptyState>
       ) : (
         <>
           {agents.length > 1 && (
-            <div className="mb-3 text-[11px] text-zinc-500">
+            <div className="mb-3 text-[11px] text-[var(--color-text-muted)]">
               {enabledCount} of {agents.length} agent{agents.length === 1 ? '' : 's'} enabled
             </div>
           )}
@@ -449,26 +449,26 @@ function AgentCard({
   return (
     <div className={`rounded-xl border px-5 py-4 transition ${
       agent.enabled
-        ? 'border-zinc-800 bg-zinc-900/40'
-        : 'border-zinc-800/50 bg-zinc-900/20 opacity-60'
+        ? 'border-[var(--color-border)] bg-[var(--color-glass)]'
+        : 'border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]/20 opacity-60'
     }`}>
       <div className="flex items-start gap-3">
-        <Sparkles className={`mt-0.5 size-4 shrink-0 ${agent.enabled ? 'text-amber-400' : 'text-zinc-600'}`} />
+        <Sparkles className={`mt-0.5 size-4 shrink-0 ${agent.enabled ? 'text-[var(--color-status-warning)]' : 'text-[var(--color-text-muted)]'}`} />
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
-            <span className="text-[13px] font-medium text-zinc-200">
+            <span className="text-[13px] font-medium text-[var(--color-text-primary)]">
               {agent.displayName ?? agent.name}
             </span>
             {agent.tools && agent.tools.length > 0 && (
-              <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-medium text-zinc-500">
+              <span className="rounded-full bg-[var(--color-surface-3)] px-2 py-0.5 text-[10px] font-medium text-[var(--color-text-muted)]">
                 {agent.tools.length} tool{agent.tools.length === 1 ? '' : 's'}
               </span>
             )}
           </div>
           {agent.description && (
-            <p className="mt-1 text-[12px] leading-relaxed text-zinc-500">{agent.description}</p>
+            <p className="mt-1 text-[12px] leading-relaxed text-[var(--color-text-muted)]">{agent.description}</p>
           )}
-          <p className="mt-1 text-[11px] text-zinc-600">{agent.sourcePath}</p>
+          <p className="mt-1 text-[11px] text-[var(--color-text-muted)]">{agent.sourcePath}</p>
         </div>
         <button
           aria-label={agent.enabled ? `Disable ${agent.name}` : `Enable ${agent.name}`}
@@ -504,7 +504,7 @@ function PromptsContent({
 
       {promptFiles.length === 0 ? (
         <EmptyState>
-          No prompt files found. Add <code className="text-zinc-400">.prompt.md</code> files to <code className="text-zinc-400">.github/prompts/</code> in your project.
+          No prompt files found. Add <code className="text-[var(--color-text-secondary)]">.prompt.md</code> files to <code className="text-[var(--color-text-secondary)]">.github/prompts/</code> in your project.
         </EmptyState>
       ) : (
         <div className="space-y-2">
@@ -519,27 +519,27 @@ function PromptsContent({
 
 function PromptCard({ prompt }: { prompt: ProjectPromptFile }) {
   return (
-    <div className="rounded-xl border border-zinc-800 bg-zinc-900/40 px-5 py-4">
+    <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-glass)] px-5 py-4">
       <div className="flex items-start gap-3">
-        <FileText className="mt-0.5 size-4 shrink-0 text-emerald-400" />
+        <FileText className="mt-0.5 size-4 shrink-0 text-[var(--color-status-success)]" />
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
-            <span className="text-[13px] font-medium text-zinc-200">{prompt.name}</span>
+            <span className="text-[13px] font-medium text-[var(--color-text-primary)]">{prompt.name}</span>
             {prompt.variables.length > 0 && (
-              <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-medium text-zinc-500">
+              <span className="rounded-full bg-[var(--color-surface-3)] px-2 py-0.5 text-[10px] font-medium text-[var(--color-text-muted)]">
                 {prompt.variables.length} variable{prompt.variables.length === 1 ? '' : 's'}
               </span>
             )}
           </div>
           {prompt.description && (
-            <p className="mt-1 text-[12px] leading-relaxed text-zinc-500">{prompt.description}</p>
+            <p className="mt-1 text-[12px] leading-relaxed text-[var(--color-text-muted)]">{prompt.description}</p>
           )}
           {prompt.variables.length > 0 && (
             <div className="mt-2 flex flex-wrap gap-1.5">
               {prompt.variables.map((v) => (
                 <span
                   key={v.name}
-                  className="rounded-md bg-zinc-800 px-2 py-0.5 text-[10px] font-medium text-zinc-400"
+                  className="rounded-md bg-[var(--color-surface-3)] px-2 py-0.5 text-[10px] font-medium text-[var(--color-text-secondary)]"
                   title={v.placeholder}
                 >
                   {v.name}
@@ -547,7 +547,7 @@ function PromptCard({ prompt }: { prompt: ProjectPromptFile }) {
               ))}
             </div>
           )}
-          <p className="mt-1.5 text-[11px] text-zinc-600">{prompt.sourcePath}</p>
+          <p className="mt-1.5 text-[11px] text-[var(--color-text-muted)]">{prompt.sourcePath}</p>
         </div>
       </div>
     </div>
@@ -607,14 +607,14 @@ function McpServersContent({
           {pending.length > 1 && (
             <div className="mt-3 flex items-center gap-2">
               <button
-                className="rounded-lg bg-emerald-500/10 px-3 py-1.5 text-[12px] font-medium text-emerald-400 transition hover:bg-emerald-500/20"
+                className="rounded-lg bg-[var(--color-status-success)]/10 px-3 py-1.5 text-[12px] font-medium text-[var(--color-status-success)] transition-all duration-200 hover:bg-[var(--color-status-success)]/20"
                 onClick={() => onResolve(pending.map((s) => s.id), 'accept')}
                 type="button"
               >
                 Accept all ({pending.length})
               </button>
               <button
-                className="rounded-lg px-3 py-1.5 text-[12px] font-medium text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+                className="rounded-lg px-3 py-1.5 text-[12px] font-medium text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)]"
                 onClick={() => onResolve(pending.map((s) => s.id), 'dismiss')}
                 type="button"
               >
@@ -645,31 +645,31 @@ function DiscoveredServerRow({
       : server.url || 'No URL';
 
   const statusBadge = status === 'accepted'
-    ? 'bg-emerald-500/10 text-emerald-400'
-    : 'bg-amber-500/10 text-amber-400';
+    ? 'bg-[var(--color-status-success)]/10 text-[var(--color-status-success)]'
+    : 'bg-[var(--color-status-warning)]/10 text-[var(--color-status-warning)]';
 
   return (
-    <div className="flex items-center gap-3 rounded-xl border border-transparent px-4 py-3 hover:border-zinc-800 hover:bg-zinc-900">
-      <Server className="size-4 shrink-0 text-zinc-600" />
+    <div className="flex items-center gap-3 rounded-xl border border-transparent px-4 py-3 hover:border-[var(--color-border)] hover:bg-[var(--color-surface-1)]">
+      <Server className="size-4 shrink-0 text-[var(--color-text-muted)]" />
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <span className="truncate text-[13px] font-medium text-zinc-200">{server.name}</span>
-          <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-zinc-400">
+          <span className="truncate text-[13px] font-medium text-[var(--color-text-primary)]">{server.name}</span>
+          <span className="rounded-full bg-[var(--color-surface-3)] px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[var(--color-text-secondary)]">
             {server.transport}
           </span>
           <span className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${statusBadge}`}>
             {status}
           </span>
         </div>
-        <p className="mt-0.5 truncate text-[12px] text-zinc-500">
+        <p className="mt-0.5 truncate text-[12px] text-[var(--color-text-muted)]">
           {detail}
-          <span className="ml-2 text-zinc-700">· {server.sourceLabel}</span>
+          <span className="ml-2 text-[var(--color-text-muted)]">· {server.sourceLabel}</span>
         </p>
       </div>
       <div className="flex items-center gap-1">
         {onAccept && (
           <button
-            className="rounded-lg px-2.5 py-1 text-[12px] font-medium text-emerald-400 transition hover:bg-emerald-500/10"
+            className="rounded-lg px-2.5 py-1 text-[12px] font-medium text-[var(--color-status-success)] transition-all duration-200 hover:bg-[var(--color-status-success)]/10"
             onClick={onAccept}
             type="button"
           >
@@ -678,7 +678,7 @@ function DiscoveredServerRow({
         )}
         {onDismiss && (
           <button
-            className="rounded-lg px-2.5 py-1 text-[12px] font-medium text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+            className="rounded-lg px-2.5 py-1 text-[12px] font-medium text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)]"
             onClick={onDismiss}
             type="button"
           >
@@ -707,18 +707,18 @@ function DangerZoneContent({
         description="Irreversible actions for this project."
         title="Danger Zone"
       />
-      <div className="rounded-xl border border-red-500/20 bg-red-500/5 px-5 py-5">
-        <h4 className="text-[13px] font-semibold text-zinc-200">Remove project</h4>
-        <p className="mt-1 text-[12px] text-zinc-500">
+      <div className="rounded-xl border border-[var(--color-status-error)]/20 bg-[var(--color-status-error)]/5 px-5 py-5">
+        <h4 className="text-[13px] font-semibold text-[var(--color-text-primary)]">Remove project</h4>
+        <p className="mt-1 text-[12px] text-[var(--color-text-muted)]">
           Removing a project deletes all its sessions and discovered tooling from Aryx.
           Your project files on disk are not affected.
         </p>
         <div className="mt-4 flex items-center gap-3">
           <button
-            className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] font-medium transition ${
+            className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] font-medium transition-all duration-200 ${
               confirmingRemove
-                ? 'bg-red-600 text-white hover:bg-red-500'
-                : 'bg-red-500/10 text-red-400 hover:bg-red-500/20'
+                ? 'bg-[var(--color-status-error)] text-white hover:bg-[var(--color-status-error)]'
+                : 'bg-[var(--color-status-error)]/10 text-[var(--color-status-error)] hover:bg-[var(--color-status-error)]/20'
             }`}
             onClick={onRemove}
             type="button"
@@ -728,7 +728,7 @@ function DangerZoneContent({
           </button>
           {confirmingRemove && (
             <button
-              className="rounded-lg px-3 py-1.5 text-[13px] font-medium text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+              className="rounded-lg px-3 py-1.5 text-[13px] font-medium text-[var(--color-text-secondary)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
               onClick={onCancelRemove}
               type="button"
             >
@@ -755,8 +755,8 @@ function SectionHeader({
   return (
     <div className="mb-4 flex items-center justify-between gap-3">
       <div>
-        <h3 className="text-[13px] font-semibold text-zinc-200">{title}</h3>
-        <p className="mt-0.5 text-[12px] text-zinc-500">{description}</p>
+        <h3 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">{title}</h3>
+        <p className="mt-0.5 text-[12px] text-[var(--color-text-muted)]">{description}</p>
       </div>
       {children}
     </div>
@@ -766,7 +766,7 @@ function SectionHeader({
 function RescanButton({ onClick, label = 'Re-scan' }: { onClick: () => void; label?: string }) {
   return (
     <button
-      className="flex items-center gap-1.5 rounded-lg bg-zinc-800 px-3 py-1.5 text-[13px] font-medium text-zinc-200 transition hover:bg-zinc-700"
+      className="flex items-center gap-1.5 rounded-lg bg-[var(--color-surface-3)] px-3 py-1.5 text-[13px] font-medium text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-surface-3)]"
       onClick={onClick}
       title={label === 'Scan' ? 'Scan for files' : 'Re-scan for changes'}
       type="button"
@@ -779,7 +779,7 @@ function RescanButton({ onClick, label = 'Re-scan' }: { onClick: () => void; lab
 
 function EmptyState({ children }: { children: ReactNode }) {
   return (
-    <div className="rounded-xl border border-dashed border-zinc-800 bg-zinc-900/20 px-5 py-8 text-center text-[12px] leading-relaxed text-zinc-500">
+    <div className="rounded-xl border border-dashed border-[var(--color-border)] bg-[var(--color-surface-1)]/20 px-5 py-8 text-center text-[12px] leading-relaxed text-[var(--color-text-muted)]">
       {children}
     </div>
   );

src/renderer/components/ProviderIcons.tsx

@@ -51,9 +51,9 @@ const iconComponents: Record<ModelProvider, React.FC<{ className?: string }>> =
 };
 
 export const providerColors: Record<ModelProvider, string> = {
-  openai: 'text-emerald-400',
-  anthropic: 'text-orange-400',
-  google: 'text-blue-400',
+  openai: 'text-[var(--color-status-success)]',
+  anthropic: 'text-[var(--color-accent-purple)]',
+  google: 'text-[var(--color-status-info)]',
 };
 
 export function ProviderIcon({ provider, className }: ProviderIconProps) {

src/renderer/components/RunTimeline.tsx

@@ -26,25 +26,26 @@ import {
 } from '@renderer/lib/runTimelineFormatting';
 import type { OrchestrationMode } from '@shared/domain/pattern';
 import type { RunTimelineEventRecord, SessionRunRecord } from '@shared/domain/runTimeline';
+import { FileChangePreview } from '@renderer/components/chat/FileChangePreview';
 
 /* ── Mode accent colours (shared with ActivityPanel) ───────── */
 
 const modeAccent: Record<OrchestrationMode, { dot: string; ring: string; text: string }> = {
-  single:       { dot: 'bg-indigo-400',  ring: 'ring-indigo-500/30', text: 'text-indigo-400' },
-  sequential:   { dot: 'bg-amber-400',   ring: 'ring-amber-500/30',  text: 'text-amber-400' },
-  concurrent:   { dot: 'bg-emerald-400', ring: 'ring-emerald-500/30', text: 'text-emerald-400' },
-  handoff:      { dot: 'bg-sky-400',     ring: 'ring-sky-500/30',    text: 'text-sky-400' },
-  'group-chat': { dot: 'bg-violet-400',  ring: 'ring-violet-500/30', text: 'text-violet-400' },
-  magentic:     { dot: 'bg-zinc-500',    ring: 'ring-zinc-600/30',   text: 'text-zinc-500' },
+  single:       { dot: 'bg-[#245CF9]',                       ring: 'ring-[#245CF9]/30',                       text: 'text-[#245CF9]' },
+  sequential:   { dot: 'bg-[var(--color-status-warning)]',   ring: 'ring-[var(--color-status-warning)]/30',   text: 'text-[var(--color-status-warning)]' },
+  concurrent:   { dot: 'bg-[var(--color-status-success)]',   ring: 'ring-[var(--color-status-success)]/30',   text: 'text-[var(--color-status-success)]' },
+  handoff:      { dot: 'bg-[var(--color-accent-sky)]',       ring: 'ring-[var(--color-accent-sky)]/30',       text: 'text-[var(--color-accent-sky)]' },
+  'group-chat': { dot: 'bg-[var(--color-accent-purple)]',   ring: 'ring-[var(--color-accent-purple)]/30',   text: 'text-[var(--color-accent-purple)]' },
+  magentic:     { dot: 'bg-[var(--color-text-muted)]',       ring: 'ring-[var(--color-text-muted)]/30',       text: 'text-[var(--color-text-muted)]' },
 };
 
 /* ── Status badges ─────────────────────────────────────────── */
 
 const runStatusStyles: Record<SessionRunRecord['status'], { icon: ReactNode; className: string }> = {
-  running:   { icon: <CircleDot className="size-3" />, className: 'text-blue-400' },
-  completed: { icon: <CheckCircle2 className="size-3" />, className: 'text-emerald-400' },
-  cancelled: { icon: <XCircle className="size-3" />, className: 'text-zinc-400' },
-  error:     { icon: <XCircle className="size-3" />, className: 'text-red-400' },
+  running:   { icon: <CircleDot className="size-3" />, className: 'text-[var(--color-status-info)]' },
+  completed: { icon: <CheckCircle2 className="size-3" />, className: 'text-[var(--color-status-success)]' },
+  cancelled: { icon: <XCircle className="size-3" />, className: 'text-[var(--color-text-muted)]' },
+  error:     { icon: <XCircle className="size-3" />, className: 'text-[var(--color-status-error)]' },
 };
 
 /* ── Event node icon ───────────────────────────────────────── */
@@ -53,23 +54,23 @@ function EventIcon({ kind, status }: { kind: RunTimelineEventRecord['kind']; sta
   const base = 'size-3.5';
   switch (kind) {
     case 'run-started':
-      return <Play className={`${base} text-zinc-500`} />;
+      return <Play className={`${base} text-[var(--color-text-muted)]`} />;
     case 'thinking':
-      return <Brain className={`${base} ${status === 'running' ? 'text-sky-400 animate-pulse' : 'text-zinc-500'}`} />;
+      return <Brain className={`${base} ${status === 'running' ? 'text-[var(--color-accent-sky)] animate-pulse' : 'text-[var(--color-text-muted)]'}`} />;
     case 'handoff':
-      return <ArrowRight className={`${base} text-amber-400`} />;
+      return <ArrowRight className={`${base} text-[var(--color-status-warning)]`} />;
     case 'tool-call':
-      return <Wrench className={`${base} text-violet-400`} />;
+      return <Wrench className={`${base} text-[var(--color-accent-purple)]`} />;
     case 'approval':
-      return <AlertTriangle className={`${base} ${status === 'running' ? 'text-amber-400 animate-pulse' : status === 'error' ? 'text-red-400' : 'text-emerald-400'}`} />;
+      return <AlertTriangle className={`${base} ${status === 'running' ? 'text-[var(--color-status-warning)] animate-pulse' : status === 'error' ? 'text-[var(--color-status-error)]' : 'text-[var(--color-status-success)]'}`} />;
     case 'message':
-      return <MessageSquare className={`${base} ${status === 'running' ? 'text-blue-400 animate-pulse' : status === 'error' ? 'text-red-400' : 'text-emerald-400'}`} />;
+      return <MessageSquare className={`${base} ${status === 'running' ? 'text-[var(--color-status-info)] animate-pulse' : status === 'error' ? 'text-[var(--color-status-error)]' : 'text-[var(--color-status-success)]'}`} />;
     case 'run-completed':
-      return <CheckCircle2 className={`${base} text-emerald-400`} />;
+      return <CheckCircle2 className={`${base} text-[var(--color-status-success)]`} />;
     case 'run-cancelled':
-      return <XCircle className={`${base} text-zinc-400`} />;
+      return <XCircle className={`${base} text-[var(--color-text-muted)]`} />;
     case 'run-failed':
-      return <AlertTriangle className={`${base} text-red-400`} />;
+      return <AlertTriangle className={`${base} text-[var(--color-status-error)]`} />;
   }
 }
 
@@ -91,67 +92,76 @@ function TimelineEventRow({
   const terminal = isTerminalEvent(event.kind);
 
   return (
-    <button
-      className={`group relative flex w-full gap-2.5 text-left ${terminal ? 'py-1' : 'py-1.5'} ${isClickable ? 'cursor-pointer' : 'cursor-default'}`}
-      disabled={!isClickable}
-      onClick={isClickable ? () => onJumpToMessage(event.messageId!) : undefined}
-      type="button"
-    >
+    <div className="relative">
       {/* Vertical connector line */}
       {!isLast && (
-        <div className="absolute left-[7px] top-[22px] bottom-0 w-px bg-zinc-800" />
+        <div className="absolute left-[7px] top-[22px] bottom-0 w-px bg-[var(--color-border)]" />
       )}
 
-      {/* Node */}
-      <div className="relative z-10 flex shrink-0 items-start pt-0.5">
-        <div className="flex size-[15px] items-center justify-center rounded-full bg-[var(--color-surface-1)]">
-          <EventIcon kind={event.kind} status={event.status} />
+      <button
+        className={`group flex w-full gap-2.5 text-left transition-all duration-200 ${terminal ? 'py-1' : 'py-1.5'} ${isClickable ? 'cursor-pointer' : 'cursor-default'}`}
+        disabled={!isClickable}
+        onClick={isClickable ? () => onJumpToMessage(event.messageId!) : undefined}
+        type="button"
+      >
+        {/* Node */}
+        <div className="relative z-10 flex shrink-0 items-start pt-0.5">
+          <div className={`flex size-[15px] items-center justify-center rounded-full ${event.status === 'running' ? 'brand-gradient-bg' : 'bg-[var(--color-surface-2)]'}`}>
+            <EventIcon kind={event.kind} status={event.status} />
+          </div>
         </div>
-      </div>
 
-      {/* Content */}
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-1.5">
-          <span className={`text-[11px] font-medium ${terminal ? 'text-zinc-600' : 'text-zinc-300'} ${isClickable ? 'group-hover:text-indigo-300' : ''}`}>
-            {label}
-          </span>
-          {/* Approval kind badge */}
-          {event.kind === 'approval' && event.approvalKind && (
-            <span className={`rounded-full px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-wider ${
-              event.status === 'running'
-                ? 'bg-amber-500/15 text-amber-400'
-                : event.status === 'completed'
-                  ? 'bg-emerald-500/15 text-emerald-400'
-                  : 'bg-red-500/15 text-red-400'
-            }`}>
-              {event.approvalKind === 'final-response' ? 'response' : 'tool'}
+        {/* Content */}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-1.5">
+            <span className={`text-[11px] font-medium ${terminal ? 'text-[var(--color-text-muted)]' : 'text-[var(--color-text-secondary)]'} ${isClickable ? 'group-hover:text-[var(--color-text-accent)]' : ''}`}>
+              {label}
             </span>
+            {/* Approval kind badge */}
+            {event.kind === 'approval' && event.approvalKind && (
+              <span className={`rounded-full px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-wider ${
+                event.status === 'running'
+                  ? 'bg-[var(--color-status-warning)]/15 text-[var(--color-status-warning)]'
+                  : event.status === 'completed'
+                    ? 'bg-[var(--color-status-success)]/15 text-[var(--color-status-success)]'
+                    : 'bg-[var(--color-status-error)]/15 text-[var(--color-status-error)]'
+              }`}>
+                {event.approvalKind === 'final-response' ? 'response' : 'tool'}
+              </span>
+            )}
+            <span className="font-mono ml-auto shrink-0 text-[9px] tabular-nums text-[var(--color-text-muted)]">{timestamp}</span>
+          </div>
+
+          {/* Content preview for message events */}
+          {preview && (
+            <p className={`mt-0.5 text-[10px] leading-snug text-[var(--color-text-muted)] ${isClickable ? 'group-hover:text-[var(--color-text-secondary)]' : ''}`}>
+              {preview}
+            </p>
+          )}
+
+          {/* Approval detail */}
+          {event.kind === 'approval' && event.approvalDetail && (
+            <p className="mt-0.5 text-[10px] leading-snug text-[var(--color-text-muted)]">
+              {truncateContent(event.approvalDetail, 120)}
+            </p>
+          )}
+
+          {/* Error detail */}
+          {event.error && (
+            <p className="mt-0.5 text-[10px] leading-snug text-[var(--color-status-error)]/80">
+              {truncateContent(event.error, 120)}
+            </p>
           )}
-          <span className="ml-auto shrink-0 text-[9px] tabular-nums text-zinc-700">{timestamp}</span>
         </div>
+      </button>
 
-        {/* Content preview for message events */}
-        {preview && (
-          <p className={`mt-0.5 text-[10px] leading-snug text-zinc-600 ${isClickable ? 'group-hover:text-zinc-500' : ''}`}>
-            {preview}
-          </p>
-        )}
-
-        {/* Approval detail */}
-        {event.kind === 'approval' && event.approvalDetail && (
-          <p className="mt-0.5 text-[10px] leading-snug text-zinc-500">
-            {truncateContent(event.approvalDetail, 120)}
-          </p>
-        )}
-
-        {/* Error detail */}
-        {event.error && (
-          <p className="mt-0.5 text-[10px] leading-snug text-red-500/80">
-            {truncateContent(event.error, 120)}
-          </p>
-        )}
-      </div>
-    </button>
+      {/* File change preview for tool-call events */}
+      {event.kind === 'tool-call' && event.fileChanges && event.fileChanges.length > 0 && (
+        <div className="relative z-10 ml-[25px] pb-1">
+          <FileChangePreview fileChanges={event.fileChanges} />
+        </div>
+      )}
+    </div>
   );
 }
 
@@ -169,15 +179,15 @@ function ThinkingGroupRow({
   return (
     <div className="group relative flex w-full gap-2.5 py-1">
       {!isLast && (
-        <div className="absolute left-[7px] top-[22px] bottom-0 w-px bg-zinc-800" />
+        <div className="absolute left-[7px] top-[22px] bottom-0 w-px bg-[var(--color-border)]" />
       )}
       <div className="relative z-10 flex shrink-0 items-start pt-0.5">
-        <div className="flex size-[15px] items-center justify-center rounded-full bg-[var(--color-surface-1)]">
-          <Brain className="size-3.5 text-zinc-500" />
+        <div className="flex size-[15px] items-center justify-center rounded-full bg-[var(--color-surface-2)]">
+          <Brain className="size-3.5 text-[var(--color-text-muted)]" />
         </div>
       </div>
       <div className="min-w-0 flex-1">
-        <span className="text-[11px] text-zinc-600">
+        <span className="text-[11px] text-[var(--color-text-muted)]">
           {agentName ? `${agentName} thinking` : 'Thinking'} ×{events.length}
         </span>
       </div>
@@ -225,26 +235,26 @@ function RunCard({
   );
 
   return (
-    <div className="rounded-lg border border-zinc-800 bg-zinc-900/40">
+    <div className="glass-surface rounded-lg">
       {/* Run header */}
       <button
-        className="flex w-full items-center gap-2 px-3 py-2 text-left transition hover:bg-zinc-800/30"
+        className="flex w-full items-center gap-2 px-3 py-2 text-left transition-all duration-200 hover:bg-[var(--color-surface-3)]"
         onClick={onToggle}
         type="button"
       >
         {expanded
-          ? <ChevronDown className="size-3 shrink-0 text-zinc-600" />
-          : <ChevronRight className="size-3 shrink-0 text-zinc-600" />}
+          ? <ChevronDown className="size-3 shrink-0 text-[var(--color-text-muted)]" />
+          : <ChevronRight className="size-3 shrink-0 text-[var(--color-text-muted)]" />}
 
         <Bot className={`size-3 shrink-0 ${accent.text}`} />
 
-        <span className="min-w-0 flex-1 truncate text-[11px] font-medium text-zinc-300">
+        <span className="min-w-0 flex-1 truncate text-[11px] font-medium text-[var(--color-text-secondary)]">
           {run.patternName}
         </span>
 
         {/* Status */}
         <span className={`flex items-center gap-1 shrink-0 ${statusStyle.className}`}>
-          {run.status === 'running' && <span className="size-1.5 animate-pulse rounded-full bg-blue-400" />}
+          {run.status === 'running' && <span className="size-1.5 animate-pulse rounded-full bg-[var(--color-status-info)]" />}
           {run.status !== 'running' && statusStyle.icon}
           <span className="text-[9px] font-medium">{formatRunStatusLabel(run.status)}</span>
         </span>
@@ -252,13 +262,13 @@ function RunCard({
 
       {/* Expanded timeline */}
       {expanded && (
-        <div className="border-t border-zinc-800/60 px-3 pb-2 pt-1.5">
+        <div className="border-t border-[var(--color-border-subtle)] px-3 pb-2 pt-1.5">
           {/* Agent badges */}
           {run.agents.length > 1 && (
             <div className="mb-2 flex flex-wrap gap-1">
               {run.agents.map((agent) => (
                 <span
-                  className="rounded-full bg-zinc-800/80 px-2 py-0.5 text-[9px] font-medium text-zinc-500"
+                  className="rounded-full bg-[var(--color-surface-2)] px-2 py-0.5 text-[9px] font-medium text-[var(--color-text-muted)]"
                   key={agent.agentId}
                 >
                   {agent.agentName}
@@ -281,7 +291,7 @@ function RunCard({
 
           {/* Duration footer */}
           {duration && (
-            <div className="mt-1 border-t border-zinc-800/40 pt-1.5 text-[9px] tabular-nums text-zinc-700">
+            <div className="font-mono mt-1 border-t border-[var(--color-border-subtle)] pt-1.5 text-[9px] tabular-nums text-[var(--color-text-muted)]">
               Duration: {duration}
             </div>
           )}
@@ -295,7 +305,7 @@ function RunCard({
 
 function EmptyTimeline() {
   return (
-    <p className="py-4 text-center text-[11px] text-zinc-600">
+    <p className="py-4 text-center text-[11px] text-[var(--color-text-muted)]">
       Send a message to see the run timeline
     </p>
   );

src/renderer/components/SessionSearchPanel.tsx

@@ -0,0 +1,259 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Search, MessageSquare, ArrowRight } from 'lucide-react';
+
+import type { WorkspaceState } from '@shared/domain/workspace';
+import type { ChatMessageRecord, SessionRecord } from '@shared/domain/session';
+import { isScratchpadProject } from '@shared/domain/project';
+
+export interface SessionSearchPanelProps {
+  workspace: WorkspaceState;
+  onClose: () => void;
+  onSelectSession: (sessionId: string) => void;
+}
+
+interface SearchHit {
+  session: SessionRecord;
+  projectName: string;
+  message: ChatMessageRecord;
+  /** The matching substring context around the first token hit. */
+  snippet: string;
+  /** Character offset of the match within the snippet for highlighting. */
+  matchStart: number;
+  matchLength: number;
+}
+
+function extractSnippet(content: string, query: string): { snippet: string; matchStart: number; matchLength: number } | undefined {
+  const lower = content.toLowerCase();
+  const qLower = query.toLowerCase().trim();
+  if (!qLower) return undefined;
+
+  // Find first occurrence of query in content
+  const idx = lower.indexOf(qLower);
+  if (idx === -1) {
+    // Try individual tokens
+    const tokens = qLower.split(/\s+/).filter(Boolean);
+    for (const token of tokens) {
+      const tidx = lower.indexOf(token);
+      if (tidx !== -1) {
+        const start = Math.max(0, tidx - 40);
+        const end = Math.min(content.length, tidx + token.length + 80);
+        const snippet = (start > 0 ? '…' : '') + content.slice(start, end).replace(/\n/g, ' ') + (end < content.length ? '…' : '');
+        const adjustedStart = (start > 0 ? 1 : 0) + (tidx - start);
+        return { snippet, matchStart: adjustedStart, matchLength: token.length };
+      }
+    }
+    return undefined;
+  }
+
+  const start = Math.max(0, idx - 40);
+  const end = Math.min(content.length, idx + qLower.length + 80);
+  const snippet = (start > 0 ? '…' : '') + content.slice(start, end).replace(/\n/g, ' ') + (end < content.length ? '…' : '');
+  const adjustedStart = (start > 0 ? 1 : 0) + (idx - start);
+  return { snippet, matchStart: adjustedStart, matchLength: qLower.length };
+}
+
+export function SessionSearchPanel({ workspace, onClose, onSelectSession }: SessionSearchPanelProps) {
+  const [query, setQuery] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => { inputRef.current?.focus(); }, []);
+
+  // Escape to close in capture phase
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscape, true);
+    return () => document.removeEventListener('keydown', handleEscape, true);
+  }, [onClose]);
+
+  // Build project name lookup
+  const projectNames = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const p of workspace.projects) {
+      map.set(p.id, isScratchpadProject(p) ? 'Scratchpad' : p.name);
+    }
+    return map;
+  }, [workspace.projects]);
+
+  // Search across all sessions and messages
+  const hits = useMemo<SearchHit[]>(() => {
+    const q = query.trim();
+    if (!q) return [];
+
+    const results: SearchHit[] = [];
+    const activeSessions = workspace.sessions.filter((s) => !s.isArchived);
+
+    for (const session of activeSessions) {
+      for (const message of session.messages) {
+        if (!message.content) continue;
+        const extracted = extractSnippet(message.content, q);
+        if (extracted) {
+          results.push({
+            session,
+            projectName: projectNames.get(session.projectId) ?? 'Unknown',
+            message,
+            ...extracted,
+          });
+        }
+      }
+    }
+
+    // Limit results for performance and sort by session recency
+    return results.slice(0, 50);
+  }, [query, workspace.sessions, projectNames]);
+
+  useEffect(() => { setSelectedIndex(0); }, [query]);
+
+  const handleSelect = useCallback((hit: SearchHit) => {
+    onClose();
+    onSelectSession(hit.session.id);
+    // After navigation, scroll to the matching message
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        const el = document.querySelector(`[data-message-id="${CSS.escape(hit.message.id)}"]`);
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          el.classList.add('ring-1', 'ring-[var(--color-accent)]/40', 'rounded-lg');
+          setTimeout(() => el.classList.remove('ring-1', 'ring-[var(--color-accent)]/40', 'rounded-lg'), 2000);
+        }
+      }, 100);
+    });
+  }, [onClose, onSelectSession]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (hits.length > 0) setSelectedIndex((i) => Math.min(i + 1, hits.length - 1));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        const hit = hits[selectedIndex];
+        if (hit) handleSelect(hit);
+      }
+    },
+    [hits, selectedIndex, handleSelect],
+  );
+
+  useEffect(() => {
+    const item = listRef.current?.querySelector(`[data-search-index="${selectedIndex}"]`);
+    item?.scrollIntoView({ block: 'nearest' });
+  }, [selectedIndex]);
+
+  return (
+    <div
+      className="palette-backdrop-enter fixed inset-0 z-[60] flex justify-center bg-[#07080e]/80 pt-[15vh] backdrop-blur-sm"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Search sessions"
+    >
+      <div
+        className="palette-enter glow-border flex h-fit max-h-[min(520px,65vh)] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-[var(--color-surface-1)] shadow-[0_16px_64px_rgba(0,0,0,0.5)]"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
+      >
+        {/* Search input */}
+        <div className="flex items-center gap-3 border-b border-[var(--color-border)] px-4">
+          <Search className="size-4 shrink-0 text-[var(--color-text-muted)]" />
+          <input
+            ref={inputRef}
+            type="text"
+            className="flex-1 bg-transparent py-3.5 text-[14px] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-muted)]"
+            placeholder="Search across all sessions…"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            aria-label="Search session content"
+            autoComplete="off"
+            spellCheck={false}
+          />
+          {query && (
+            <span className="shrink-0 text-[11px] text-[var(--color-text-muted)]">
+              {hits.length} result{hits.length !== 1 ? 's' : ''}
+            </span>
+          )}
+        </div>
+
+        {/* Results */}
+        <div ref={listRef} className="flex-1 overflow-y-auto py-1.5" role="listbox">
+          {query && hits.length === 0 ? (
+            <div className="px-4 py-10 text-center text-[13px] text-[var(--color-text-muted)]">
+              No matches found
+            </div>
+          ) : !query ? (
+            <div className="px-4 py-10 text-center text-[13px] text-[var(--color-text-muted)]">
+              Type to search across all session messages
+            </div>
+          ) : (
+            hits.map((hit, index) => {
+              const isSelected = index === selectedIndex;
+              return (
+                <button
+                  key={`${hit.session.id}-${hit.message.id}`}
+                  data-search-index={index}
+                  className={`flex w-full flex-col gap-1 px-4 py-2.5 text-left transition-colors ${
+                    isSelected
+                      ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-primary)]'
+                      : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-glass-hover)] hover:text-[var(--color-text-primary)]'
+                  }`}
+                  onClick={() => handleSelect(hit)}
+                  onMouseEnter={() => setSelectedIndex(index)}
+                  role="option"
+                  aria-selected={isSelected}
+                  type="button"
+                >
+                  {/* Session title row */}
+                  <div className="flex items-center gap-2">
+                    <MessageSquare className={`size-3.5 shrink-0 ${isSelected ? 'text-[var(--color-text-accent)]' : 'text-[var(--color-text-muted)]'}`} />
+                    <span className="truncate text-[12px] font-medium">{hit.session.title}</span>
+                    <span className="text-[10px] text-[var(--color-text-muted)]">·</span>
+                    <span className="truncate text-[10px] text-[var(--color-text-muted)]">{hit.projectName}</span>
+                    <ArrowRight className="ml-auto size-3 shrink-0 text-[var(--color-text-muted)]" />
+                  </div>
+                  {/* Message snippet with highlighted match */}
+                  <div className="pl-5.5 text-[12px] leading-relaxed text-[var(--color-text-muted)]">
+                    <span className="line-clamp-2">
+                      {hit.snippet.slice(0, hit.matchStart)}
+                      <mark className="rounded-sm bg-[var(--color-accent)]/20 px-0.5 text-[var(--color-text-accent)]">
+                        {hit.snippet.slice(hit.matchStart, hit.matchStart + hit.matchLength)}
+                      </mark>
+                      {hit.snippet.slice(hit.matchStart + hit.matchLength)}
+                    </span>
+                  </div>
+                  <div className="pl-5.5 text-[10px] text-[var(--color-text-muted)]">
+                    {hit.message.role === 'user' ? 'You' : hit.message.authorName}
+                  </div>
+                </button>
+              );
+            })
+          )}
+        </div>
+
+        {/* Footer hints */}
+        <div className="flex items-center gap-4 border-t border-[var(--color-border)] px-4 py-2 text-[11px] text-[var(--color-text-muted)]">
+          <span className="flex items-center gap-1">
+            <kbd className="rounded border border-[var(--color-border-subtle)] px-1 font-mono text-[10px]">↑↓</kbd>
+            navigate
+          </span>
+          <span className="flex items-center gap-1">
+            <kbd className="rounded border border-[var(--color-border-subtle)] px-1 font-mono text-[10px]">↵</kbd>
+            jump to message
+          </span>
+          <span className="flex items-center gap-1">
+            <kbd className="rounded border border-[var(--color-border-subtle)] px-1 font-mono text-[10px]">esc</kbd>
+            close
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/renderer/components/SettingsPanel.tsx

@@ -3,6 +3,7 @@ import { ChevronLeft, ChevronRight, Code, Cpu, FolderOpen, Palette, Plus, Server
 
 import { CopilotStatusCard } from '@renderer/components/CopilotStatusCard';
 import { PatternEditor } from '@renderer/components/PatternEditor';
+import { ToggleSwitch } from '@renderer/components/ui';
 import { LspProfileEditor } from '@renderer/components/settings/LspProfileEditor';
 import { McpServerEditor } from '@renderer/components/settings/McpServerEditor';
 import type { SidecarCapabilities, QuotaSnapshot } from '@shared/contracts/sidecar';
@@ -39,6 +40,10 @@ interface SettingsPanelProps {
   onDeleteLspProfile: (profileId: string) => Promise<void>;
   onNewLspProfile: () => LspProfileDefinition;
   onSetTheme: (theme: AppearanceTheme) => void;
+  notificationsEnabled: boolean;
+  onSetNotificationsEnabled: (enabled: boolean) => void;
+  minimizeToTray: boolean;
+  onSetMinimizeToTray: (enabled: boolean) => void;
   onOpenAppDataFolder: () => void;
   onResetLocalWorkspace: () => Promise<void>;
   onResolveUserDiscoveredTooling?: (serverIds: string[], resolution: 'accept' | 'dismiss') => void;
@@ -93,8 +98,8 @@ const navGroups: NavGroup[] = [
 ];
 
 function modeBadgeClasses(pattern: PatternDefinition) {
-  if (pattern.availability === 'unavailable') return 'bg-amber-500/10 text-amber-400';
-  return 'bg-zinc-800 text-zinc-400';
+  if (pattern.availability === 'unavailable') return 'bg-[var(--color-status-warning)]/10 text-[var(--color-status-warning)]';
+  return 'bg-[var(--color-surface-3)] text-[var(--color-text-secondary)]';
 }
 
 export function SettingsPanel({
@@ -117,6 +122,10 @@ export function SettingsPanel({
   onDeleteLspProfile,
   onNewLspProfile,
   onSetTheme,
+  notificationsEnabled,
+  onSetNotificationsEnabled,
+  minimizeToTray,
+  onSetMinimizeToTray,
   onOpenAppDataFolder,
   onResetLocalWorkspace,
   onResolveUserDiscoveredTooling,
@@ -207,16 +216,16 @@ export function SettingsPanel({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex flex-col bg-[var(--color-surface-0)]">
+    <div className="overlay-slide-enter fixed inset-0 z-50 flex flex-col bg-[var(--color-surface-0)]">
       <div className="drag-region flex items-center gap-3 border-b border-[var(--color-border)] px-5 pb-3 pt-3">
         <button
-          className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+          className="no-drag flex size-8 items-center justify-center rounded-lg text-[var(--color-text-secondary)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
           onClick={onClose}
           type="button"
         >
           <ChevronLeft className="size-4" />
         </button>
-        <h2 className="text-[13px] font-semibold text-zinc-100">Settings</h2>
+        <h2 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">Settings</h2>
       </div>
 
       <div className="flex min-h-0 flex-1">
@@ -224,7 +233,7 @@ export function SettingsPanel({
           <div className="space-y-4">
             {navGroups.map((group) => (
               <div key={group.label}>
-                <span className="mb-1 block px-3 text-[10px] font-semibold uppercase tracking-wider text-zinc-600">
+                <span className="mb-1 block px-3 text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                   {group.label}
                 </span>
                 <div className="space-y-0.5">
@@ -232,16 +241,16 @@ export function SettingsPanel({
                     const isActive = item.id === activeSection;
                     return (
                       <button
-                        className={`flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-[13px] transition ${
+                        className={`flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-[13px] transition-all duration-200 ${
                           isActive
-                            ? 'bg-zinc-800 font-medium text-zinc-100'
-                            : 'text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-300'
+                            ? 'bg-[var(--color-surface-3)] font-medium text-[var(--color-text-primary)]'
+                            : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-3)]/50 hover:text-[var(--color-text-secondary)]'
                         }`}
                         key={item.id}
                         onClick={() => setActiveSection(item.id)}
                         type="button"
                       >
-                        <span className={isActive ? 'text-zinc-300' : 'text-zinc-500'}>{item.icon}</span>
+                        <span className={isActive ? 'text-[var(--color-text-secondary)]' : 'text-[var(--color-text-muted)]'}>{item.icon}</span>
                         {item.label}
                       </button>
                     );
@@ -255,7 +264,14 @@ export function SettingsPanel({
         <div className="flex-1 overflow-y-auto">
           <div className="mx-auto max-w-2xl px-8 py-6">
             {activeSection === 'appearance' && (
-              <AppearanceSection theme={theme} onSetTheme={onSetTheme} />
+              <AppearanceSection
+                theme={theme}
+                onSetTheme={onSetTheme}
+                notificationsEnabled={notificationsEnabled}
+                onSetNotificationsEnabled={onSetNotificationsEnabled}
+                minimizeToTray={minimizeToTray}
+                onSetMinimizeToTray={onSetMinimizeToTray}
+              />
             )}
             {activeSection === 'connection' && (
               <ConnectionSection
@@ -315,15 +331,23 @@ const themeOptions: { value: AppearanceTheme; label: string; description: string
 function AppearanceSection({
   theme,
   onSetTheme,
+  notificationsEnabled,
+  onSetNotificationsEnabled,
+  minimizeToTray,
+  onSetMinimizeToTray,
 }: {
   theme: AppearanceTheme;
   onSetTheme: (theme: AppearanceTheme) => void;
-}) {
+  notificationsEnabled: boolean;
+  onSetNotificationsEnabled: (enabled: boolean) => void;
+  minimizeToTray: boolean;
+  onSetMinimizeToTray: (enabled: boolean) => void;
+}){
   return (
     <div>
       <div className="mb-1">
-        <h3 className="text-[13px] font-semibold text-zinc-200">Appearance</h3>
-        <p className="mt-0.5 text-[12px] text-zinc-500">
+        <h3 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">Appearance</h3>
+        <p className="mt-0.5 text-[12px] text-[var(--color-text-muted)]">
           Choose how Aryx looks on your device
         </p>
       </div>
@@ -333,32 +357,80 @@ function AppearanceSection({
           const isSelected = option.value === theme;
           return (
             <button
-              className={`flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left transition ${
+              className={`flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left transition-all duration-200 ${
                 isSelected
-                  ? 'border-indigo-500/50 bg-indigo-500/10'
-                  : 'border-[var(--color-border)] hover:border-zinc-600 hover:bg-zinc-800/40'
+                  ? 'border-[var(--color-border-glow)] bg-[var(--color-accent-muted)]'
+                  : 'border-[var(--color-border)] hover:border-[var(--color-border)] hover:bg-[var(--color-surface-3)]/40'
               }`}
               key={option.value}
               onClick={() => onSetTheme(option.value)}
               type="button"
             >
               <div
-                className={`flex size-4 shrink-0 items-center justify-center rounded-full border-2 transition ${
-                  isSelected ? 'border-indigo-500' : 'border-zinc-600'
+                className={`flex size-4 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-200 ${
+                  isSelected ? 'border-[var(--color-accent)]' : 'border-[var(--color-border)]'
                 }`}
               >
-                {isSelected && <div className="size-2 rounded-full bg-indigo-500" />}
+                {isSelected && <div className="size-2 rounded-full bg-[var(--color-accent)]" />}
               </div>
               <div>
-                <span className={`text-[13px] font-medium ${isSelected ? 'text-zinc-100' : 'text-zinc-300'}`}>
+                <span className={`text-[13px] font-medium ${isSelected ? 'text-[var(--color-text-primary)]' : 'text-[var(--color-text-secondary)]'}`}>
                   {option.label}
                 </span>
-                <p className="text-[12px] text-zinc-500">{option.description}</p>
+                <p className="text-[12px] text-[var(--color-text-muted)]">{option.description}</p>
               </div>
             </button>
           );
         })}
       </div>
+
+      {/* Notifications */}
+      <div className="mt-8 mb-1">
+        <h3 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">Notifications</h3>
+        <p className="mt-0.5 text-[12px] text-[var(--color-text-muted)]">
+          Control when Aryx sends desktop notifications
+        </p>
+      </div>
+
+      <button
+        className="mt-4 flex w-full items-center justify-between rounded-lg border border-[var(--color-border)] px-4 py-3 text-left transition hover:bg-[var(--color-surface-3)]/40"
+        onClick={() => onSetNotificationsEnabled(!notificationsEnabled)}
+        type="button"
+      >
+        <div>
+          <span className="text-[13px] font-medium text-[var(--color-text-primary)]">
+            Run completion alerts
+          </span>
+          <p className="text-[12px] text-[var(--color-text-muted)]">
+            Notify when a session run completes, fails, or needs approval while the app is unfocused
+          </p>
+        </div>
+        <ToggleSwitch enabled={notificationsEnabled} />
+      </button>
+
+      {/* System Tray */}
+      <div className="mt-8 mb-1">
+        <h3 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">System Tray</h3>
+        <p className="mt-0.5 text-[12px] text-[var(--color-text-muted)]">
+          Control how Aryx behaves when you close the window
+        </p>
+      </div>
+
+      <button
+        className="mt-4 flex w-full items-center justify-between rounded-lg border border-[var(--color-border)] px-4 py-3 text-left transition hover:bg-[var(--color-surface-3)]/40"
+        onClick={() => onSetMinimizeToTray(!minimizeToTray)}
+        type="button"
+      >
+        <div>
+          <span className="text-[13px] font-medium text-[var(--color-text-primary)]">
+            Minimize to tray on close
+          </span>
+          <p className="text-[12px] text-[var(--color-text-muted)]">
+            Keep Aryx running in the system tray when you close the window instead of quitting
+          </p>
+        </div>
+        <ToggleSwitch enabled={minimizeToTray} />
+      </button>
     </div>
   );
 }
@@ -379,12 +451,12 @@ function ConnectionSection({
   return (
     <div>
       <div className="mb-1">
-        <h3 className="text-[13px] font-semibold text-zinc-200">GitHub Copilot</h3>
-        <p className="mt-0.5 text-[12px] text-zinc-500">
+        <h3 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">GitHub Copilot</h3>
+        <p className="mt-0.5 text-[12px] text-[var(--color-text-muted)]">
           Aryx uses your installed GitHub Copilot CLI for AI capabilities
         </p>
       </div>
-      <div className="mt-4 rounded-xl border border-[var(--color-border)] bg-zinc-900/30 p-4">
+      <div className="mt-4 rounded-xl border border-[var(--color-border)] bg-[var(--color-glass)] p-4">
         <CopilotStatusCard
           connection={connection}
           isRefreshing={isRefreshing}
@@ -418,25 +490,25 @@ function PatternsSection({
       <div className="space-y-1">
         {patterns.map((pattern) => (
           <button
-            className="group flex w-full items-center gap-3 rounded-xl border border-transparent px-4 py-3 text-left transition hover:border-zinc-800 hover:bg-zinc-900"
+            className="group flex w-full items-center gap-3 rounded-xl border border-transparent px-4 py-3 text-left transition-all duration-200 hover:border-[var(--color-border)] hover:bg-[var(--color-surface-1)]"
             key={pattern.id}
             onClick={() => onEditPattern(pattern)}
             type="button"
           >
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2">
-                <span className="text-[13px] font-medium text-zinc-200">{pattern.name}</span>
+                <span className="text-[13px] font-medium text-[var(--color-text-primary)]">{pattern.name}</span>
                 <span className={`rounded-full px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide ${modeBadgeClasses(pattern)}`}>
                   {pattern.mode}
                 </span>
               </div>
-              <p className="mt-0.5 truncate text-[12px] text-zinc-500">{pattern.description}</p>
+              <p className="mt-0.5 truncate text-[12px] text-[var(--color-text-muted)]">{pattern.description}</p>
             </div>
             <div className="flex items-center gap-2">
-              <span className="text-[12px] text-zinc-600">
+              <span className="text-[12px] text-[var(--color-text-muted)]">
                 {pattern.agents.length} agent{pattern.agents.length === 1 ? '' : 's'}
               </span>
-              <ChevronRight className="size-4 text-zinc-700 transition group-hover:text-zinc-500" />
+              <ChevronRight className="size-4 text-[var(--color-text-muted)] transition-all duration-200 group-hover:text-[var(--color-text-muted)]" />
             </div>
           </button>
         ))}
@@ -537,8 +609,8 @@ function SectionHeader({
   return (
     <div className="mb-4 flex items-center justify-between gap-3">
       <div>
-        <h3 className="text-[13px] font-semibold text-zinc-200">{title}</h3>
-        <p className="mt-0.5 text-[12px] text-zinc-500">{description}</p>
+        <h3 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">{title}</h3>
+        <p className="mt-0.5 text-[12px] text-[var(--color-text-muted)]">{description}</p>
       </div>
       {children}
     </div>
@@ -548,7 +620,7 @@ function SectionHeader({
 function SectionAction({ label, onClick }: { label: string; onClick: () => void }) {
   return (
     <button
-      className="flex items-center gap-1.5 rounded-lg bg-zinc-800 px-3 py-1.5 text-[13px] font-medium text-zinc-200 transition hover:bg-zinc-700"
+      className="flex items-center gap-1.5 rounded-lg bg-[var(--color-surface-3)] px-3 py-1.5 text-[13px] font-medium text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-surface-3)]"
       onClick={onClick}
       type="button"
     >
@@ -571,27 +643,27 @@ function ToolingListButton({
 }) {
   return (
     <button
-      className="group flex w-full items-center gap-3 rounded-xl border border-transparent px-4 py-3 text-left transition hover:border-zinc-800 hover:bg-zinc-900"
+      className="group flex w-full items-center gap-3 rounded-xl border border-transparent px-4 py-3 text-left transition-all duration-200 hover:border-[var(--color-border)] hover:bg-[var(--color-surface-1)]"
       onClick={onClick}
       type="button"
     >
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <span className="truncate text-[13px] font-medium text-zinc-200">{label}</span>
-          <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-zinc-400">
+          <span className="truncate text-[13px] font-medium text-[var(--color-text-primary)]">{label}</span>
+          <span className="rounded-full bg-[var(--color-surface-3)] px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[var(--color-text-secondary)]">
             {meta}
           </span>
         </div>
-        <p className="mt-0.5 truncate text-[12px] text-zinc-500">{detail}</p>
+        <p className="mt-0.5 truncate text-[12px] text-[var(--color-text-muted)]">{detail}</p>
       </div>
-      <ChevronRight className="size-4 text-zinc-700 transition group-hover:text-zinc-500" />
+      <ChevronRight className="size-4 text-[var(--color-text-muted)] transition-all duration-200 group-hover:text-[var(--color-text-muted)]" />
     </button>
   );
 }
 
 function EmptyState({ children }: { children: ReactNode }) {
   return (
-    <div className="rounded-xl border border-dashed border-zinc-800 bg-zinc-900/20 px-5 py-8 text-center text-[12px] leading-relaxed text-zinc-500">
+    <div className="rounded-xl border border-dashed border-[var(--color-border)] bg-[var(--color-surface-1)]/20 px-5 py-8 text-center text-[12px] leading-relaxed text-[var(--color-text-muted)]">
       {children}
     </div>
   );
@@ -648,8 +720,8 @@ function DiscoveredSubSection({
     <div className="mb-4">
       <div className="mb-2 flex items-center justify-between">
         <div>
-          <span className="text-[12px] font-medium text-zinc-300">{label}</span>
-          <p className="text-[11px] text-zinc-600">{description}</p>
+          <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">{label}</span>
+          <p className="text-[11px] text-[var(--color-text-muted)]">{description}</p>
         </div>
       </div>
       <div className="space-y-1">
@@ -692,30 +764,30 @@ function DiscoveredServerRow({
       : server.url || 'No URL';
 
   const statusBadge = status === 'accepted'
-    ? 'bg-emerald-500/10 text-emerald-400'
-    : 'bg-amber-500/10 text-amber-400';
+    ? 'bg-[var(--color-status-success)]/10 text-[var(--color-status-success)]'
+    : 'bg-[var(--color-status-warning)]/10 text-[var(--color-status-warning)]';
 
   return (
-    <div className="flex items-center gap-3 rounded-xl border border-transparent px-4 py-3 hover:border-zinc-800 hover:bg-zinc-900">
+    <div className="flex items-center gap-3 rounded-xl border border-transparent px-4 py-3 hover:border-[var(--color-border)] hover:bg-[var(--color-surface-1)]">
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <span className="truncate text-[13px] font-medium text-zinc-200">{server.name}</span>
-          <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-zinc-400">
+          <span className="truncate text-[13px] font-medium text-[var(--color-text-primary)]">{server.name}</span>
+          <span className="rounded-full bg-[var(--color-surface-3)] px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[var(--color-text-secondary)]">
             {server.transport}
           </span>
           <span className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${statusBadge}`}>
             {status}
           </span>
         </div>
-        <p className="mt-0.5 truncate text-[12px] text-zinc-500">
+        <p className="mt-0.5 truncate text-[12px] text-[var(--color-text-muted)]">
           {detail}
-          <span className="ml-2 text-zinc-700">· {server.sourceLabel}</span>
+          <span className="ml-2 text-[var(--color-text-muted)]">· {server.sourceLabel}</span>
         </p>
       </div>
       <div className="flex items-center gap-1">
         {onAccept && (
           <button
-            className="rounded-lg px-2.5 py-1 text-[12px] font-medium text-emerald-400 transition hover:bg-emerald-500/10"
+            className="rounded-lg px-2.5 py-1 text-[12px] font-medium text-[var(--color-status-success)] transition-all duration-200 hover:bg-[var(--color-status-success)]/10"
             onClick={onAccept}
             type="button"
           >
@@ -724,7 +796,7 @@ function DiscoveredServerRow({
         )}
         {onDismiss && (
           <button
-            className="rounded-lg px-2.5 py-1 text-[12px] font-medium text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+            className="rounded-lg px-2.5 py-1 text-[12px] font-medium text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)]"
             onClick={onDismiss}
             type="button"
           >
@@ -772,12 +844,12 @@ function TroubleshootingSection({
         />
       </div>
 
-      <div className="mt-8 rounded-xl border border-red-500/20 bg-red-500/5 p-5">
+      <div className="mt-8 rounded-xl border border-[var(--color-status-error)]/20 bg-[var(--color-status-error)]/5 p-5">
         <div className="flex items-start gap-3">
-          <TriangleAlert className="mt-0.5 size-4 shrink-0 text-red-400" />
+          <TriangleAlert className="mt-0.5 size-4 shrink-0 text-[var(--color-status-error)]" />
           <div className="min-w-0 flex-1">
-            <h4 className="text-[13px] font-semibold text-red-300">Reset Local Workspace</h4>
-            <p className="mt-1 text-[12px] leading-relaxed text-zinc-400">
+            <h4 className="text-[13px] font-semibold text-[var(--color-status-error)]">Reset Local Workspace</h4>
+            <p className="mt-1 text-[12px] leading-relaxed text-[var(--color-text-secondary)]">
               Restore Aryx to its initial state. This permanently removes all sessions, custom patterns,
               MCP server definitions, LSP profiles, and scratchpad contents. Your GitHub Copilot sign-in
               is not affected.
@@ -785,7 +857,7 @@ function TroubleshootingSection({
 
             {!confirmingReset ? (
               <button
-                className="mt-3 rounded-lg border border-red-500/30 bg-red-500/10 px-3.5 py-1.5 text-[13px] font-medium text-red-300 transition hover:border-red-500/50 hover:bg-red-500/20"
+                className="mt-3 rounded-lg border border-[var(--color-status-error)]/30 bg-[var(--color-status-error)]/10 px-3.5 py-1.5 text-[13px] font-medium text-[var(--color-status-error)] transition-all duration-200 hover:border-[var(--color-status-error)]/50 hover:bg-[var(--color-status-error)]/20"
                 onClick={() => setConfirmingReset(true)}
                 type="button"
               >
@@ -794,7 +866,7 @@ function TroubleshootingSection({
             ) : (
               <div className="mt-3 flex items-center gap-2">
                 <button
-                  className="rounded-lg bg-red-600 px-3.5 py-1.5 text-[13px] font-medium text-white transition hover:bg-red-500 disabled:opacity-50"
+                  className="rounded-lg bg-[var(--color-status-error)] px-3.5 py-1.5 text-[13px] font-medium text-white transition-all duration-200 hover:bg-[var(--color-status-error)] disabled:opacity-50"
                   disabled={isResetting}
                   onClick={() => void handleReset()}
                   type="button"
@@ -802,7 +874,7 @@ function TroubleshootingSection({
                   {isResetting ? 'Resetting…' : 'Confirm reset'}
                 </button>
                 <button
-                  className="rounded-lg border border-[var(--color-border)] px-3.5 py-1.5 text-[13px] font-medium text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+                  className="rounded-lg border border-[var(--color-border)] px-3.5 py-1.5 text-[13px] font-medium text-[var(--color-text-secondary)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
                   disabled={isResetting}
                   onClick={() => setConfirmingReset(false)}
                   type="button"
@@ -831,16 +903,16 @@ function TroubleshootingAction({
 }) {
   return (
     <button
-      className="group flex w-full items-center gap-3 rounded-xl border border-transparent px-4 py-3 text-left transition hover:border-zinc-800 hover:bg-zinc-900"
+      className="group flex w-full items-center gap-3 rounded-xl border border-transparent px-4 py-3 text-left transition-all duration-200 hover:border-[var(--color-border)] hover:bg-[var(--color-surface-1)]"
       onClick={onClick}
       type="button"
     >
-      <span className="text-zinc-500 transition group-hover:text-zinc-300">{icon}</span>
+      <span className="text-[var(--color-text-muted)] transition-all duration-200 group-hover:text-[var(--color-text-secondary)]">{icon}</span>
       <div className="min-w-0 flex-1">
-        <span className="text-[13px] font-medium text-zinc-200">{label}</span>
-        <p className="mt-0.5 text-[12px] text-zinc-500">{description}</p>
+        <span className="text-[13px] font-medium text-[var(--color-text-primary)]">{label}</span>
+        <p className="mt-0.5 text-[12px] text-[var(--color-text-muted)]">{description}</p>
       </div>
-      <ChevronRight className="size-4 text-zinc-700 transition group-hover:text-zinc-500" />
+      <ChevronRight className="size-4 text-[var(--color-text-muted)] transition-all duration-200 group-hover:text-[var(--color-text-muted)]" />
     </button>
   );
 }

src/renderer/components/Sidebar.tsx

@@ -54,12 +54,12 @@ interface SidebarProps {
 /* ── Mode icon + accent colour mapping ─────────────────────── */
 
 const modeVisuals: Record<OrchestrationMode, { icon: LucideIcon; color: string }> = {
-  single: { icon: MessageSquare, color: 'text-indigo-400' },
-  sequential: { icon: ListOrdered, color: 'text-amber-400' },
-  concurrent: { icon: GitFork, color: 'text-emerald-400' },
-  handoff: { icon: ArrowLeftRight, color: 'text-sky-400' },
-  'group-chat': { icon: Users, color: 'text-violet-400' },
-  magentic: { icon: Lock, color: 'text-zinc-500' },
+  single: { icon: MessageSquare, color: 'text-[#245CF9]' },
+  sequential: { icon: ListOrdered, color: 'text-[var(--color-status-warning)]' },
+  concurrent: { icon: GitFork, color: 'text-[var(--color-status-success)]' },
+  handoff: { icon: ArrowLeftRight, color: 'text-[var(--color-accent-sky)]' },
+  'group-chat': { icon: Users, color: 'text-[var(--color-accent-purple)]' },
+  magentic: { icon: Lock, color: 'text-[var(--color-text-muted)]' },
 };
 
 /* ── Relative time helper ──────────────────────────────────── */
@@ -83,7 +83,7 @@ function relativeTime(iso: string): string {
 function GitContextBadge({ git }: { git: ProjectGitContext }) {
   if (git.status === 'not-repository') {
     return (
-      <span className="text-[10px] text-zinc-600" title="Not a git repository">
+      <span className="text-[10px] text-[var(--color-text-muted)]" title="Not a git repository">
         no repo
       </span>
     );
@@ -117,7 +117,7 @@ function GitContextBadge({ git }: { git: ProjectGitContext }) {
   if (git.behind) parts.push(`↓${git.behind}`);
 
   return (
-    <span className="flex items-center gap-1 text-[10px] text-zinc-500" title={parts.join(' · ') || branchLabel}>
+    <span className="flex items-center gap-1 text-[10px] text-[var(--color-text-muted)]" title={parts.join(' · ') || branchLabel}>
       <GitBranch className="size-2.5 shrink-0" />
       <span className="max-w-[80px] truncate">{branchLabel}</span>
       {git.isDirty && <Circle className="size-1.5 shrink-0 fill-amber-500 text-amber-500" />}
@@ -140,7 +140,7 @@ function ActionMenuItem({
 }) {
   return (
     <button
-      className={`flex w-full items-center gap-2 px-3 py-1.5 text-[12px] transition hover:bg-zinc-800 ${className ?? 'text-zinc-300'}`}
+      className={`flex w-full items-center gap-2 px-3 py-1.5 text-[12px] transition-all duration-150 hover:bg-[var(--color-surface-2)] ${className ?? 'text-[var(--color-text-primary)]'}`}
       onClick={onClick}
       role="menuitem"
       type="button"
@@ -213,10 +213,10 @@ function SessionItem({
 
   return (
     <div
-      className={`group relative flex w-full cursor-pointer items-start gap-2.5 rounded-lg px-2.5 py-2 text-left transition-all duration-150 ${
+      className={`session-item-enter group relative flex w-full cursor-pointer items-start gap-2.5 rounded-lg px-2.5 py-2 text-left transition-all duration-200 ${
         isActive
-          ? 'bg-indigo-500/10 ring-1 ring-indigo-500/25'
-          : 'hover:bg-zinc-800/60'
+          ? 'bg-[var(--color-accent-muted)] ring-1 ring-[var(--color-border-glow)]'
+          : 'hover:bg-[var(--color-surface-2)]/60'
       } ${isRunning ? 'sidebar-running' : ''} ${session.isArchived ? 'opacity-50' : ''}`}
       onClick={isRenaming ? undefined : onSelect}
       role="button"
@@ -225,19 +225,19 @@ function SessionItem({
     >
       {/* Running/approval left accent bar */}
       {isRunning && !hasPendingApproval && (
-        <span className="absolute inset-y-1.5 left-0 w-[3px] rounded-full bg-blue-400 sidebar-pulse" />
+        <span className="absolute inset-y-1.5 left-0 w-[3px] rounded-full accent-flow" />
       )}
       {hasPendingApproval && (
-        <span className="absolute inset-y-1.5 left-0 w-[3px] rounded-full bg-amber-400" />
+        <span className="absolute inset-y-1.5 left-0 w-[3px] rounded-full bg-[var(--color-status-warning)]" />
       )}
 
       {/* Mode icon */}
       <span
         className={`mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md ${
-          isActive ? 'bg-indigo-500/15' : 'bg-zinc-800/80'
+          isActive ? 'bg-[var(--color-accent-muted)]' : 'bg-[var(--color-surface-2)]'
         }`}
       >
-        <ModeIcon className={`size-3.5 ${isActive ? 'text-indigo-400' : visual.color}`} />
+        <ModeIcon className={`size-3.5 ${isActive ? 'text-[var(--color-accent)]' : visual.color}`} />
       </span>
 
       {/* Content */}
@@ -247,7 +247,7 @@ function SessionItem({
           {isRenaming ? (
             <input
               ref={inputRef}
-              className="w-full rounded bg-zinc-800 px-1.5 py-0.5 text-[13px] font-medium text-zinc-100 outline-none ring-1 ring-indigo-500/50"
+              className="w-full rounded bg-[var(--color-surface-2)] px-1.5 py-0.5 text-[13px] font-medium text-[var(--color-text-primary)] outline-none ring-1 ring-[var(--color-border-glow)]"
               value={renameText}
               onChange={(e) => setRenameText(e.target.value)}
               onKeyDown={handleRenameKeyDown}
@@ -257,7 +257,7 @@ function SessionItem({
           ) : (
             <span
               className={`truncate text-[13px] font-medium leading-tight ${
-                isActive ? 'text-indigo-100' : 'text-zinc-200 group-hover:text-zinc-100'
+                isActive ? 'text-[var(--color-text-primary)]' : 'text-[var(--color-text-primary)] group-hover:text-[var(--color-text-primary)]'
               }`}
             >
               {session.title}
@@ -267,36 +267,55 @@ function SessionItem({
 
         <div className="mt-1 flex items-center gap-2">
           {agentCount > 1 && (
-            <span className="inline-flex items-center gap-0.5 text-[10px] text-zinc-500">
+            <span className="inline-flex items-center gap-0.5 text-[10px] text-[var(--color-text-muted)]">
               <Users className="size-2.5" />
               {agentCount}
             </span>
           )}
           {isRunning && !hasPendingApproval && (
-            <span className="inline-flex items-center gap-1 text-[10px] font-medium text-blue-400">
-              <span className="size-1.5 rounded-full bg-blue-400 sidebar-pulse" />
+            <span className="inline-flex items-center gap-1 text-[10px] font-medium text-[var(--color-accent-sky)]">
+              <span className="size-1.5 rounded-full bg-[var(--color-accent-sky)] sidebar-pulse" />
               Running
             </span>
           )}
           {hasPendingApproval && (
-            <span className="inline-flex items-center gap-1 text-[10px] font-medium text-amber-400">
-              <span className="size-1.5 rounded-full bg-amber-400 animate-pulse" />
+            <span className="inline-flex items-center gap-1 text-[10px] font-medium text-[var(--color-status-warning)]">
+              <span className="size-1.5 rounded-full bg-[var(--color-status-warning)] animate-pulse" />
               Awaiting approval{queuedCount > 0 && ` (+${queuedCount})`}
             </span>
           )}
           {isError && (
-            <span className="inline-flex items-center gap-1 text-[10px] font-medium text-red-400">
-              <span className="size-1.5 rounded-full bg-red-400" />
+            <span className="inline-flex items-center gap-1 text-[10px] font-medium text-[var(--color-status-error)]">
+              <span className="size-1.5 rounded-full bg-[var(--color-status-error)]" />
               Error
             </span>
           )}
           {session.isArchived && (
-            <span className="inline-flex items-center gap-1 text-[10px] text-zinc-600">
+            <span className="inline-flex items-center gap-1 text-[10px] text-[var(--color-text-muted)]">
               <Archive className="size-2.5" />
               Archived
             </span>
           )}
-          <span className="ml-auto text-[10px] text-zinc-600 group-hover:text-zinc-500">
+          {session.branchOrigin && (
+            <span
+              className="inline-flex items-center gap-0.5 text-[10px] text-[var(--color-text-muted)]"
+              title={
+                session.branchOrigin.action === 'regenerate'
+                  ? 'Regenerated response'
+                  : session.branchOrigin.action === 'edit-and-resend'
+                    ? 'Edited & resent'
+                    : 'Branched session'
+              }
+            >
+              {session.branchOrigin.action === 'regenerate'
+                ? <RefreshCw className="size-2.5" />
+                : session.branchOrigin.action === 'edit-and-resend'
+                  ? <Pencil className="size-2.5" />
+                  : <GitBranch className="size-2.5" />
+              }
+            </span>
+          )}
+          <span className="ml-auto text-[10px] text-[var(--color-text-muted)] group-hover:text-[var(--color-text-secondary)]">
             {relativeTime(session.updatedAt)}
           </span>
         </div>
@@ -305,7 +324,7 @@ function SessionItem({
       {/* Actions button (hidden during rename) */}
       {!isRenaming && (
         <button
-          className="absolute right-1.5 top-1.5 flex size-6 items-center justify-center rounded-md text-zinc-600 opacity-0 transition hover:bg-zinc-700 hover:text-zinc-300 group-hover:opacity-100"
+          className="absolute right-1.5 top-1.5 flex size-6 items-center justify-center rounded-md text-[var(--color-text-muted)] opacity-0 transition-all duration-150 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)] group-hover:opacity-100"
           onClick={(e) => { e.stopPropagation(); onOpenMenu(e); }}
           type="button"
         >
@@ -376,19 +395,19 @@ function ProjectGroup({
   return (
     <div>
       <button
-        className="group flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-[13px] font-semibold text-zinc-400 transition hover:bg-zinc-800/40 hover:text-zinc-200"
+        className="group flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-[13px] font-semibold text-[var(--color-text-secondary)] transition-all duration-150 hover:bg-[var(--color-surface-2)]/40 hover:text-[var(--color-text-primary)]"
         onClick={() => setExpanded(!expanded)}
         type="button"
       >
         {expanded ? (
-          <ChevronDown className="size-3 shrink-0 text-zinc-500" />
+          <ChevronDown className="size-3 shrink-0 text-[var(--color-text-muted)]" />
         ) : (
-          <ChevronRight className="size-3 shrink-0 text-zinc-500" />
+          <ChevronRight className="size-3 shrink-0 text-[var(--color-text-muted)]" />
         )}
         {isScratchpad ? (
-          <MessageSquare className="size-3.5 shrink-0 text-zinc-500 transition group-hover:text-indigo-400" />
+          <MessageSquare className="size-3.5 shrink-0 text-[var(--color-text-muted)] transition group-hover:text-[var(--color-accent)]" />
         ) : (
-          <FolderOpen className="size-3.5 shrink-0 text-zinc-500 transition group-hover:text-indigo-400" />
+          <FolderOpen className="size-3.5 shrink-0 text-[var(--color-text-muted)] transition group-hover:text-[var(--color-accent)]" />
         )}
         <span className="truncate">{project.name}</span>
 
@@ -399,7 +418,7 @@ function ProjectGroup({
         <div className="ml-auto flex items-center gap-1.5">
           {!isScratchpad && onOpenProjectSettings && (
             <span
-              className="flex size-5 items-center justify-center rounded text-zinc-600 opacity-0 transition hover:bg-zinc-700 hover:text-zinc-300 group-hover:opacity-100"
+              className="flex size-5 items-center justify-center rounded text-[var(--color-text-muted)] opacity-0 transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)] group-hover:opacity-100"
               onClick={(e) => {
                 e.stopPropagation();
                 onOpenProjectSettings(project.id);
@@ -412,7 +431,7 @@ function ProjectGroup({
           )}
           {!isScratchpad && onRefreshGitContext && (
             <span
-              className="flex size-5 items-center justify-center rounded text-zinc-600 opacity-0 transition hover:bg-zinc-700 hover:text-zinc-300 group-hover:opacity-100"
+              className="flex size-5 items-center justify-center rounded text-[var(--color-text-muted)] opacity-0 transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)] group-hover:opacity-100"
               onClick={(e) => {
                 e.stopPropagation();
                 onRefreshGitContext(project.id);
@@ -424,8 +443,8 @@ function ProjectGroup({
             </span>
           )}
           {runningCount > 0 && (
-            <span className="flex items-center gap-1 rounded-full bg-blue-500/10 px-1.5 py-0.5 text-[10px] font-medium text-blue-400">
-              <span className="size-1.5 rounded-full bg-blue-400 sidebar-pulse" />
+            <span className="flex items-center gap-1 rounded-full bg-[var(--color-accent-sky)]/10 px-1.5 py-0.5 text-[10px] font-medium text-[var(--color-accent-sky)]">
+              <span className="size-1.5 rounded-full bg-[var(--color-accent-sky)] sidebar-pulse" />
               {runningCount}
             </span>
           )}
@@ -442,14 +461,14 @@ function ProjectGroup({
               {pendingDiscoveryCount} new
             </span>
           )}
-          <span className="rounded-full bg-zinc-800 px-1.5 py-0.5 text-[10px] font-medium text-zinc-500">
+          <span className="rounded-full bg-[var(--color-surface-2)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--color-text-muted)]">
             {visibleSessions.length}
           </span>
         </div>
       </button>
 
       {expanded && (
-        <div className="ml-2 mt-0.5 space-y-0.5 border-l border-zinc-800/60 pl-2">
+        <div className="ml-2 mt-0.5 space-y-0.5 border-l border-[var(--color-border-subtle)] pl-2">
           {visibleSessions.length > 0 &&
             visibleSessions.map((session) => (
               <SessionItem
@@ -466,7 +485,7 @@ function ProjectGroup({
             ))}
           {onNewSession ? (
             <button
-              className="flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed border-zinc-700/60 bg-zinc-800/20 px-2.5 py-1.5 text-[12px] font-medium text-zinc-500 transition hover:border-indigo-500/40 hover:bg-indigo-500/5 hover:text-indigo-300"
+              className="flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed border-[var(--color-border)] bg-[var(--color-surface-1)]/40 px-2.5 py-1.5 text-[12px] font-medium text-[var(--color-text-muted)] transition-all duration-200 hover:border-[var(--color-border-glow)] hover:bg-[var(--color-accent-muted)] hover:text-[var(--color-accent)]"
               onClick={onNewSession}
               type="button"
             >
@@ -475,7 +494,7 @@ function ProjectGroup({
             </button>
           ) : (
             visibleSessions.length === 0 && (
-              <div className="px-3 py-3 text-center text-[12px] text-zinc-600">
+              <div className="px-3 py-3 text-center text-[12px] text-[var(--color-text-muted)]">
                 {isScratchpad ? 'No scratchpad chats yet' : 'No sessions yet'}
               </div>
             )
@@ -562,19 +581,19 @@ export function Sidebar({
   return (
     <div className="flex h-full flex-col">
       {/* Header — extra top padding clears the title bar overlay zone */}
-      <div className="drag-region flex items-center justify-between border-b border-[var(--color-border)] px-4 pb-3 pt-3">
+      <div className="drag-region flex items-center justify-between border-b border-[var(--color-border-subtle)] px-4 pb-3 pt-3">
         <div className="flex items-center gap-2.5">
           <img alt="aryx" className="size-8 rounded-xl" src={appIconUrl} />
           <div>
-            <span className="text-sm font-semibold text-zinc-100">aryx</span>
-            <span className="ml-1.5 rounded bg-zinc-800 px-1 py-0.5 text-[9px] font-medium text-zinc-500">
+            <span className="font-display text-sm font-semibold text-[var(--color-text-primary)]">aryx</span>
+            <span className="ml-1.5 rounded bg-[var(--color-surface-2)] px-1 py-0.5 text-[9px] font-medium text-[var(--color-text-muted)]">
               ALPHA
             </span>
           </div>
         </div>
         <div className="flex items-center gap-1">
           <button
-            className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+            className="no-drag flex size-8 items-center justify-center rounded-lg text-[var(--color-text-muted)] transition-all duration-150 hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text-primary)]"
             onClick={onOpenSettings}
             title="Settings"
             type="button"
@@ -587,16 +606,16 @@ export function Sidebar({
       {/* Search + Filters */}
       <div className="space-y-2 px-3 pt-3 pb-1">
         <div className="relative">
-          <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-zinc-500" />
+          <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-[var(--color-text-muted)]" />
           <input
-            className="w-full rounded-lg border border-zinc-800 bg-zinc-900/60 py-1.5 pl-8 pr-8 text-[12px] text-zinc-200 placeholder-zinc-600 outline-none transition focus:border-zinc-700 focus:bg-zinc-900"
+            className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-0)]/60 py-1.5 pl-8 pr-8 text-[12px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition-all duration-200 focus:border-[var(--color-border-glow)] focus:bg-[var(--color-surface-0)] focus:shadow-[0_0_12px_rgba(36,92,249,0.06)]"
             placeholder="Search sessions…"
             value={searchText}
             onChange={(e) => setSearchText(e.target.value)}
           />
           {searchText && (
             <button
-              className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300"
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]"
               onClick={() => setSearchText('')}
               type="button"
             >
@@ -615,11 +634,11 @@ export function Sidebar({
         {isQueryActive ? (
           /* ── Flat search / filter results ──────────────────────── */
           <div className="space-y-1">
-            <div className="px-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-zinc-600">
+            <div className="px-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-muted)]">
               Results ({queryResults.length})
             </div>
             {queryResults.length === 0 ? (
-              <div className="px-3 py-6 text-center text-[12px] text-zinc-600">
+              <div className="px-3 py-6 text-center text-[12px] text-[var(--color-text-muted)]">
                 No sessions match your search
               </div>
             ) : (
@@ -643,7 +662,7 @@ export function Sidebar({
           <div className="space-y-3">
             {scratchpadProject && (
               <div className="space-y-1">
-                <div className="px-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-zinc-600">
+                <div className="px-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-muted)]">
                   Scratchpad
                 </div>
                 <ProjectGroup
@@ -666,21 +685,21 @@ export function Sidebar({
             {userProjects.length === 0 ? (
               <div className="flex flex-col items-center gap-4 px-4 py-8 text-center">
                 <div className="relative">
-                  <div className="flex size-14 items-center justify-center rounded-2xl bg-zinc-800/50 ring-1 ring-zinc-700/50">
-                    <FolderOpen className="size-7 text-zinc-600" />
+                  <div className="flex size-14 items-center justify-center rounded-2xl bg-[var(--color-surface-2)] ring-1 ring-[var(--color-border)]">
+                    <FolderOpen className="size-7 text-[var(--color-text-muted)]" />
                   </div>
-                  <div className="absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full bg-indigo-600 ring-2 ring-[var(--color-surface-1)]">
+                  <div className="absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full brand-gradient-bg ring-2 ring-[var(--color-surface-1)]">
                     <Plus className="size-3 text-white" />
                   </div>
                 </div>
                 <div>
-                  <p className="text-[13px] font-medium text-zinc-300">No projects yet</p>
-                  <p className="mt-1 text-[12px] leading-relaxed text-zinc-500">
+                  <p className="text-[13px] font-medium text-[var(--color-text-primary)]">No projects yet</p>
+                  <p className="mt-1 text-[12px] leading-relaxed text-[var(--color-text-muted)]">
                     Use Scratchpad for ad-hoc chat or add a repo<br />to work against project files
                   </p>
                 </div>
                 <button
-                  className="rounded-lg bg-indigo-600 px-4 py-2 text-[13px] font-medium text-white transition hover:bg-indigo-500"
+                  className="rounded-lg brand-gradient-bg px-4 py-2 text-[13px] font-medium text-white shadow-[0_2px_12px_rgba(36,92,249,0.25)] transition-all duration-200 hover:shadow-[0_4px_20px_rgba(36,92,249,0.35)]"
                   onClick={onAddProject}
                   type="button"
                 >
@@ -689,7 +708,7 @@ export function Sidebar({
               </div>
             ) : (
               <div className="space-y-1">
-                <div className="px-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-zinc-600">
+                <div className="px-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-muted)]">
                   Projects
                 </div>
                 {userProjects.map((project) => (
@@ -717,9 +736,9 @@ export function Sidebar({
 
       {/* Footer */}
       {userProjects.length > 0 && (
-        <div className="border-t border-[var(--color-border)] px-3 py-2">
+        <div className="border-t border-[var(--color-border-subtle)] px-3 py-2">
           <button
-            className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-[12px] text-zinc-500 transition hover:bg-zinc-800/60 hover:text-zinc-300"
+            className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-[12px] text-[var(--color-text-muted)] transition-all duration-150 hover:bg-[var(--color-surface-2)]/60 hover:text-[var(--color-text-primary)]"
             onClick={onAddProject}
             type="button"
           >
@@ -734,7 +753,7 @@ export function Sidebar({
         <>
           <div className="fixed inset-0 z-40" onClick={closeMenu} onKeyDown={(e) => { if (e.key === 'Escape') closeMenu(); }} />
           <div
-            className="fixed z-50 w-40 rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-xl"
+            className="fixed z-50 w-40 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] py-1 shadow-[0_8px_32px_rgba(0,0,0,0.4)]"
             role="menu"
             style={{ top: menuState.top, left: menuState.left }}
           >
@@ -771,7 +790,7 @@ export function Sidebar({
               }}
             />
             <ActionMenuItem
-              className="text-red-400 hover:bg-red-500/10"
+              className="text-[var(--color-status-error)] hover:bg-[var(--color-status-error)]/10"
               icon={Trash2}
               label="Delete"
               onClick={() => {

src/renderer/components/TerminalPanel.tsx

@@ -11,28 +11,28 @@ import type { TerminalExitInfo } from '@shared/domain/terminal';
 /* ── Theme ────────────────────────────────────────────────── */
 
 const terminalTheme = {
-  background: '#09090b',   // zinc-950
-  foreground: '#e4e4e7',   // zinc-200
-  cursor: '#818cf8',       // indigo-400
-  cursorAccent: '#09090b',
-  selectionBackground: '#6366f14d', // indigo-500/30
-  selectionForeground: '#e4e4e7',
-  black: '#27272a',        // zinc-800
-  red: '#f87171',          // red-400
-  green: '#4ade80',        // green-400
-  yellow: '#facc15',       // yellow-400
-  blue: '#60a5fa',         // blue-400
-  magenta: '#c084fc',      // purple-400
-  cyan: '#22d3ee',         // cyan-400
-  white: '#e4e4e7',        // zinc-200
-  brightBlack: '#52525b',  // zinc-600
-  brightRed: '#fca5a5',    // red-300
-  brightGreen: '#86efac',  // green-300
-  brightYellow: '#fde047', // yellow-300
-  brightBlue: '#93c5fd',   // blue-300
-  brightMagenta: '#d8b4fe',// purple-300
-  brightCyan: '#67e8f9',   // cyan-300
-  brightWhite: '#fafafa',  // zinc-50
+  background: '#07080e',
+  foreground: '#e8eaf0',
+  cursor: '#245CF9',
+  cursorAccent: '#07080e',
+  selectionBackground: 'rgba(36, 92, 249, 0.2)',
+  selectionForeground: '#e8eaf0',
+  black: '#1e2233',
+  red: '#f87171',
+  green: '#4ade80',
+  yellow: '#facc15',
+  blue: '#248CFD',
+  magenta: '#a855f7',
+  cyan: '#22d3ee',
+  white: '#e8eaf0',
+  brightBlack: '#4e5368',
+  brightRed: '#fca5a5',
+  brightGreen: '#86efac',
+  brightYellow: '#fde047',
+  brightBlue: '#60a5fa',
+  brightMagenta: '#c084fc',
+  brightCyan: '#67e8f9',
+  brightWhite: '#f8f9fc',
 };
 
 /* ── Constants ────────────────────────────────────────────── */
@@ -94,7 +94,7 @@ export function TerminalPanel({
 
     const terminal = new Terminal({
       theme: terminalTheme,
-      fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+      fontFamily: '"JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace',
       fontSize: 13,
       lineHeight: 1.4,
       cursorBlink: true,
@@ -214,12 +214,12 @@ export function TerminalPanel({
 
   return (
     <div
-      className="flex flex-col border-t border-[var(--color-border)] bg-[#09090b]"
+      className="flex flex-col border-t border-[var(--color-border)] bg-[var(--color-surface-0)]"
       style={{ height, minHeight: MIN_HEIGHT }}
     >
       {/* Resize handle */}
       <div
-        className={`h-1 shrink-0 cursor-row-resize transition-colors ${isDragging ? 'bg-indigo-500/40' : 'hover:bg-zinc-700/60'}`}
+        className={`h-1 shrink-0 cursor-row-resize transition-colors ${isDragging ? 'bg-[var(--color-accent)]/40' : 'hover:bg-[var(--color-surface-3)]/60'}`}
         onMouseDown={handleDragStart}
         role="separator"
         aria-orientation="horizontal"
@@ -237,15 +237,15 @@ export function TerminalPanel({
       />
 
       {/* Header bar */}
-      <div className="flex h-7 shrink-0 items-center gap-2 border-b border-zinc-800/60 px-3">
-        <span className={`size-1.5 shrink-0 rounded-full ${isRunning ? 'bg-emerald-400' : 'bg-zinc-600'}`} />
-        <span className="min-w-0 flex-1 truncate text-[11px] text-zinc-500">
+      <div className="flex h-7 shrink-0 items-center gap-2 border-b border-[var(--color-border)] px-3">
+        <span className={`size-1.5 shrink-0 rounded-full ${isRunning ? 'bg-emerald-400' : 'bg-[var(--color-text-muted)]'}`} />
+        <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-[var(--color-text-muted)]">
           {snapshot ? `${snapshot.shell} — ${snapshot.cwd}` : 'Terminal'}
         </span>
         <div className="flex items-center gap-0.5">
           <button
             aria-label="Restart terminal"
-            className="rounded p-0.5 text-zinc-600 transition hover:bg-zinc-800 hover:text-zinc-400"
+            className="rounded p-0.5 text-[var(--color-text-muted)] transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)]"
             onClick={handleRestart}
             type="button"
           >
@@ -253,7 +253,7 @@ export function TerminalPanel({
           </button>
           <button
             aria-label="Minimize terminal"
-            className="rounded p-0.5 text-zinc-600 transition hover:bg-zinc-800 hover:text-zinc-400"
+            className="rounded p-0.5 text-[var(--color-text-muted)] transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)]"
             onClick={onMinimize}
             type="button"
           >
@@ -261,7 +261,7 @@ export function TerminalPanel({
           </button>
           <button
             aria-label="Close terminal"
-            className="rounded p-0.5 text-zinc-600 transition hover:bg-zinc-800 hover:text-red-400"
+            className="rounded p-0.5 text-[var(--color-text-muted)] transition hover:bg-[var(--color-surface-3)] hover:text-red-400"
             onClick={handleClose}
             type="button"
           >

src/renderer/components/WelcomePane.tsx

@@ -1,61 +1,218 @@
-import { MessageSquare, Plus, Settings } from 'lucide-react';
+import { CheckCircle2, Circle, FolderPlus, MessageSquarePlus, Settings, Zap } from 'lucide-react';
+import { motion } from 'motion/react';
+
+import type { SidecarConnectionStatus } from '@shared/contracts/sidecar';
+import appIconUrl from '../../../assets/icons/icon.png';
 
 interface WelcomePaneProps {
   hasProjects: boolean;
+  connectionStatus?: SidecarConnectionStatus;
   onNewScratchpad: () => void;
   onAddProject: () => void;
   onOpenSettings: () => void;
 }
 
+const fadeUp = (delay: number) =>
+  ({
+    initial: { opacity: 0, y: 12 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.45, ease: [0.25, 0.46, 0.45, 0.94] as const, delay },
+  }) as const;
+
+interface ActionCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  onClick: () => void;
+  highlight?: boolean;
+}
+
+function ActionCard({ icon, title, description, onClick, highlight }: ActionCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`group flex w-full cursor-pointer items-center gap-4 rounded-xl border px-5 py-4 text-left backdrop-blur-sm transition-all duration-200 ${
+        highlight
+          ? 'border-[var(--color-border-glow)] bg-[var(--color-accent-muted)] shadow-[0_0_24px_rgba(36,92,249,0.1)] hover:shadow-[0_0_32px_rgba(36,92,249,0.15)]'
+          : 'border-[var(--color-glass-border)] bg-[var(--color-glass)] hover:border-[var(--color-border-glow)] hover:shadow-[0_0_20px_rgba(36,92,249,0.08),0_4px_12px_rgba(0,0,0,0.2)]'
+      }`}
+    >
+      <div className="brand-gradient-bg flex size-9 shrink-0 items-center justify-center rounded-full">
+        {icon}
+      </div>
+      <div className="min-w-0">
+        <span className="block text-[13px] font-medium text-[var(--color-text-primary)]">
+          {title}
+        </span>
+        <span className="block text-[12px] leading-relaxed text-[var(--color-text-muted)]">
+          {description}
+        </span>
+      </div>
+    </button>
+  );
+}
+
+interface SetupStepProps {
+  label: string;
+  done: boolean;
+  active?: boolean;
+}
+
+function SetupStep({ label, done, active }: SetupStepProps) {
+  return (
+    <div className={`flex items-center gap-2 text-[12px] ${active ? 'text-[var(--color-text-primary)]' : 'text-[var(--color-text-muted)]'}`}>
+      {done
+        ? <CheckCircle2 className="size-3.5 text-[var(--color-status-success)]" />
+        : <Circle className={`size-3.5 ${active ? 'text-[var(--color-accent)]' : 'text-[var(--color-text-muted)]'}`} />
+      }
+      <span className={done ? 'line-through opacity-60' : ''}>{label}</span>
+    </div>
+  );
+}
+
 export function WelcomePane({
   hasProjects,
+  connectionStatus,
   onNewScratchpad,
   onAddProject,
   onOpenSettings,
 }: WelcomePaneProps) {
+  const isConnected = connectionStatus === 'ready';
+  const isFirstRun = !hasProjects;
+
+  // Determine setup progress
+  const steps = [
+    { label: 'GitHub Copilot connected', done: isConnected },
+    { label: 'First project added', done: hasProjects },
+  ];
+  const completedSteps = steps.filter((s) => s.done).length;
+  const allDone = completedSteps === steps.length;
+
   return (
-    <div className="flex h-full flex-col items-center justify-center px-8">
-      <div className="flex flex-col items-center gap-6 text-center">
-        <div className="flex size-16 items-center justify-center rounded-2xl bg-indigo-600/10">
-          <MessageSquare className="size-8 text-indigo-400" />
-        </div>
+    <div className="relative flex h-full flex-col items-center justify-center overflow-hidden px-8">
+      {/* Ambient nebula glow */}
+      <div
+        className="pointer-events-none absolute inset-0"
+        aria-hidden="true"
+        style={{
+          background: [
+            'radial-gradient(ellipse 50% 40% at 50% 45%, rgba(36, 92, 249, 0.07) 0%, transparent 70%)',
+            'radial-gradient(ellipse 40% 35% at 55% 50%, rgba(138, 41, 230, 0.05) 0%, transparent 65%)',
+            'radial-gradient(ellipse 60% 50% at 45% 48%, rgba(54, 21, 207, 0.04) 0%, transparent 60%)',
+          ].join(', '),
+        }}
+      />
 
-        <div>
-          <h1 className="text-base font-semibold text-zinc-100">Welcome to aryx</h1>
-          <p className="mt-2 max-w-md text-[13px] leading-relaxed text-zinc-500">
-            Start a scratchpad conversation for ad-hoc questions or connect a project to work with
-            repo-aware Copilot agents.
+      <div className="relative z-10 flex w-full max-w-sm flex-col items-center gap-6 text-center">
+        {/* Icon */}
+        <motion.div {...fadeUp(0)}>
+          <img
+            src={appIconUrl}
+            alt="aryx"
+            width={64}
+            height={64}
+            className="drop-shadow-[0_0_24px_rgba(36,92,249,0.3)]"
+          />
+        </motion.div>
+
+        {/* Heading */}
+        <motion.div {...fadeUp(0.08)}>
+          <h1 className="font-display brand-gradient-text text-2xl font-bold tracking-tight">
+            {isFirstRun ? 'Welcome to Aryx' : 'aryx'}
+          </h1>
+          <p className="mt-2 max-w-sm text-[13px] leading-relaxed text-[var(--color-text-secondary)]">
+            {isFirstRun
+              ? 'Your AI workspace powered by GitHub Copilot. Start a scratchpad for quick questions or connect a project for full agent support.'
+              : 'Start a scratchpad conversation for ad-hoc questions or connect a project to work with repo-aware Copilot agents.'
+            }
           </p>
-        </div>
+        </motion.div>
 
-        <div className="flex flex-col items-center gap-2">
-          <button
-            className="flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-[13px] font-medium text-white transition hover:bg-indigo-500"
-            onClick={onNewScratchpad}
-            type="button"
-          >
-            <Plus className="size-4" />
-            New Scratchpad
-          </button>
-          {!hasProjects && (
-            <button
-              className="flex items-center gap-2 rounded-lg px-4 py-2 text-[13px] text-zinc-500 transition hover:bg-zinc-900 hover:text-zinc-300"
-              onClick={onAddProject}
-              type="button"
-            >
-              <Plus className="size-3.5" />
-              Add Your First Project
-            </button>
+        {/* Setup progress — only for first-run */}
+        {isFirstRun && !allDone && (
+          <motion.div {...fadeUp(0.12)} className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-1)]/60 p-4">
+            <div className="mb-3 flex items-center justify-between">
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
+                Getting started
+              </span>
+              <span className="text-[11px] text-[var(--color-text-muted)]">
+                {completedSteps}/{steps.length}
+              </span>
+            </div>
+            {/* Progress bar */}
+            <div className="mb-3 h-1 overflow-hidden rounded-full bg-[var(--color-surface-3)]">
+              <motion.div
+                className="h-full rounded-full bg-gradient-to-r from-[var(--color-accent)] to-[var(--color-accent-purple)]"
+                initial={{ width: 0 }}
+                animate={{ width: `${(completedSteps / steps.length) * 100}%` }}
+                transition={{ duration: 0.6, ease: 'easeOut', delay: 0.3 }}
+              />
+            </div>
+            <div className="space-y-2">
+              {steps.map((step, i) => (
+                <SetupStep
+                  key={step.label}
+                  label={step.label}
+                  done={step.done}
+                  active={!step.done && steps.slice(0, i).every((s) => s.done)}
+                />
+              ))}
+            </div>
+          </motion.div>
+        )}
+
+        {/* Action cards */}
+        <motion.div {...fadeUp(isFirstRun && !allDone ? 0.2 : 0.16)} className="flex w-full flex-col gap-2.5">
+          {/* Primary CTA adapts to state */}
+          {!isConnected && (
+            <ActionCard
+              icon={<Zap className="size-4 text-white" />}
+              title="Connect GitHub Copilot"
+              description="Check connection status and configure your CLI"
+              onClick={onOpenSettings}
+              highlight
+            />
           )}
-          <button
-            className="flex items-center gap-2 rounded-lg px-4 py-2 text-[13px] text-zinc-500 transition hover:bg-zinc-900 hover:text-zinc-300"
+
+          <ActionCard
+            icon={<MessageSquarePlus className="size-4 text-white" />}
+            title={isFirstRun ? 'Try a Quick Scratchpad' : 'New Scratchpad'}
+            description={isFirstRun ? 'Start a conversation — no setup needed' : 'Ask anything without a project context'}
+            onClick={onNewScratchpad}
+            highlight={isConnected && isFirstRun}
+          />
+
+          {!hasProjects && (
+            <ActionCard
+              icon={<FolderPlus className="size-4 text-white" />}
+              title="Add Your First Project"
+              description="Connect a repo for full agent support"
+              onClick={onAddProject}
+            />
+          )}
+
+          <ActionCard
+            icon={<Settings className="size-4 text-white" />}
+            title="Manage Patterns"
+            description="Customize agent behaviors and workflows"
             onClick={onOpenSettings}
-            type="button"
-          >
-            <Settings className="size-3.5" />
-            Manage patterns
-          </button>
-        </div>
+          />
+        </motion.div>
+
+        {/* Keyboard shortcut hints for returning users */}
+        {!isFirstRun && (
+          <motion.div {...fadeUp(0.24)} className="flex items-center gap-4 text-[11px] text-[var(--color-text-muted)]">
+            <span>
+              <kbd className="rounded border border-[var(--color-border)] px-1.5 py-0.5 font-mono text-[10px]">Ctrl+N</kbd>
+              {' '}new session
+            </span>
+            <span>
+              <kbd className="rounded border border-[var(--color-border)] px-1.5 py-0.5 font-mono text-[10px]">Ctrl+K</kbd>
+              {' '}commands
+            </span>
+          </motion.div>
+        )}
       </div>
     </div>
   );

src/renderer/components/chat/ApprovalBanner.tsx

@@ -30,50 +30,50 @@ export function ApprovalBanner({
   const approvalToolLabel = approvalToolKey ? resolveToolLabel(approvalToolKey) : undefined;
 
   return (
-    <div className="rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3" role="alert">
+    <div className="rounded-xl border border-[var(--color-glass-border)] border-l-4 border-l-[var(--color-status-warning)] bg-[var(--color-glass)] px-4 py-3" role="alert">
       {/* Header */}
       <div className="flex items-start gap-2.5">
-        <ShieldAlert className="mt-0.5 size-4 shrink-0 text-amber-400" />
+        <ShieldAlert className="mt-0.5 size-4 shrink-0 text-[var(--color-status-warning)]" />
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
-            <span className="text-[13px] font-semibold text-amber-200">{approval.title}</span>
-            <span className="rounded-full bg-amber-500/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-amber-400">
+            <span className="text-[13px] font-semibold text-[var(--color-status-warning)]">{approval.title}</span>
+            <span className="rounded-full bg-[var(--color-status-warning)]/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-[var(--color-status-warning)]">
               {kindLabel}
             </span>
             {showPosition && (
-              <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[9px] font-semibold tabular-nums text-zinc-400">
+              <span className="rounded-full bg-[var(--color-surface-2)] px-2 py-0.5 text-[9px] font-semibold tabular-nums text-[var(--color-text-secondary)]">
                 {position} of {total}
               </span>
             )}
           </div>
 
-          <div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-zinc-400">
-            {approval.agentName && <span>Agent: <span className="text-zinc-300">{approval.agentName}</span></span>}
-            {approval.toolName && <span>Tool: <span className="text-zinc-300">{approval.toolName}</span></span>}
-            {approval.permissionKind && <span>Permission: <span className="text-zinc-300">{approval.permissionKind}</span></span>}
+          <div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-[var(--color-text-secondary)]">
+            {approval.agentName && <span>Agent: <span className="text-[var(--color-text-primary)]">{approval.agentName}</span></span>}
+            {approval.toolName && <span>Tool: <span className="text-[var(--color-text-primary)]">{approval.toolName}</span></span>}
+            {approval.permissionKind && <span>Permission: <span className="text-[var(--color-text-primary)]">{approval.permissionKind}</span></span>}
           </div>
 
           {approval.permissionDetail
             ? <PermissionDetailView detail={approval.permissionDetail} />
             : approval.detail && (
-              <p className="mt-1.5 text-[12px] leading-relaxed text-zinc-400">{approval.detail}</p>
+              <p className="mt-1.5 text-[12px] leading-relaxed text-[var(--color-text-secondary)]">{approval.detail}</p>
             )}
         </div>
       </div>
 
       {/* Final-response message preview */}
       {hasMessages && (
-        <div className="mt-3 space-y-2 rounded-lg border border-zinc-800 bg-zinc-900/60 p-3">
-          <p className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+        <div className="mt-3 space-y-2 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] p-3">
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
             Pending messages — not yet published
           </p>
           {approval.messages!.map((message) => (
             <div className="mt-2" key={message.id}>
-              <div className="mb-1 flex items-center gap-2 text-[11px] font-medium text-zinc-500">
+              <div className="mb-1 flex items-center gap-2 text-[11px] font-medium text-[var(--color-text-muted)]">
                 <Bot className="size-3" />
                 <span>{message.authorName}</span>
               </div>
-              <div className="rounded-lg border border-zinc-800/60 bg-zinc-900/40 px-3 py-2 text-[13px] leading-relaxed text-zinc-300">
+              <div className="rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]/60 px-3 py-2 text-[13px] leading-relaxed text-[var(--color-text-secondary)]">
                 <MarkdownContent content={message.content} />
               </div>
             </div>
@@ -84,7 +84,7 @@ export function ApprovalBanner({
       {/* Actions */}
       <div className="mt-3 flex items-center gap-2">
         <button
-          className="inline-flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3.5 py-1.5 text-[12px] font-medium text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50"
+          className="brand-gradient-bg inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-[12px] font-medium text-white transition-all duration-200 hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
           disabled={isResolving}
           onClick={() => onResolve('approved')}
           type="button"
@@ -95,7 +95,7 @@ export function ApprovalBanner({
         {canAlwaysApprove && (
           <button
             aria-label={`Always approve ${approvalToolLabel}`}
-            className="inline-flex items-center gap-1.5 rounded-lg bg-emerald-600/20 px-3.5 py-1.5 text-[12px] font-medium text-emerald-300 transition hover:bg-emerald-600/30 disabled:cursor-not-allowed disabled:opacity-50"
+            className="inline-flex items-center gap-1.5 rounded-lg bg-[var(--color-status-success)]/15 px-3.5 py-1.5 text-[12px] font-medium text-[var(--color-status-success)] transition-all duration-200 hover:bg-[var(--color-status-success)]/25 disabled:cursor-not-allowed disabled:opacity-50"
             disabled={isResolving}
             onClick={() => onResolve('approved', true)}
             title={`Auto-approve "${approvalToolLabel}" for the rest of this session`}
@@ -106,7 +106,7 @@ export function ApprovalBanner({
           </button>
         )}
         <button
-          className="inline-flex items-center gap-1.5 rounded-lg bg-zinc-800 px-3.5 py-1.5 text-[12px] font-medium text-zinc-300 transition hover:bg-zinc-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+          className="inline-flex items-center gap-1.5 rounded-lg bg-[var(--color-surface-2)] px-3.5 py-1.5 text-[12px] font-medium text-[var(--color-text-secondary)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)] disabled:cursor-not-allowed disabled:opacity-50"
           disabled={isResolving}
           onClick={() => onResolve('rejected')}
           type="button"
@@ -115,7 +115,7 @@ export function ApprovalBanner({
           Reject
         </button>
         {showPosition && (
-          <span className="ml-auto text-[10px] text-zinc-600">
+          <span className="ml-auto text-[10px] text-[var(--color-text-muted)]">
             Next approval will appear after this one is resolved
           </span>
         )}
@@ -130,42 +130,42 @@ export function QueuedApprovalsList({ approvals }: { approvals: PendingApprovalR
   const [expanded, setExpanded] = useState(false);
 
   return (
-    <div className="rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2">
+    <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-glass)] px-3 py-2">
       <button
         aria-expanded={expanded}
         className="flex w-full items-center gap-2 text-left"
         onClick={() => setExpanded(!expanded)}
         type="button"
       >
-        <ShieldCheck className="size-3 text-zinc-500" />
-        <span className="text-[11px] font-medium text-zinc-400">
+        <ShieldCheck className="size-3 text-[var(--color-text-muted)]" />
+        <span className="text-[11px] font-medium text-[var(--color-text-secondary)]">
           {approvals.length} queued approval{approvals.length === 1 ? '' : 's'}
         </span>
         <ChevronDown
-          className={`ml-auto size-3 text-zinc-600 transition-transform ${expanded ? 'rotate-180' : ''}`}
+          className={`ml-auto size-3 text-[var(--color-text-muted)] transition-transform ${expanded ? 'rotate-180' : ''}`}
         />
       </button>
       {expanded && (
-        <div className="mt-2 space-y-1.5 border-t border-zinc-800/60 pt-2">
+        <div className="mt-2 space-y-1.5 border-t border-[var(--color-border-subtle)] pt-2">
           {approvals.map((approval) => {
             const kindLabel = approval.kind === 'final-response' ? 'response' : 'tool';
             return (
               <div
-                className="flex items-center gap-2 rounded-md bg-zinc-800/40 px-2.5 py-1.5"
+                className="flex items-center gap-2 rounded-md bg-[var(--color-surface-2)]/40 px-2.5 py-1.5"
                 key={approval.id}
               >
-                <ShieldAlert className="size-3 shrink-0 text-zinc-600" />
-                <span className="min-w-0 flex-1 truncate text-[11px] text-zinc-400">
+                <ShieldAlert className="size-3 shrink-0 text-[var(--color-text-muted)]" />
+                <span className="min-w-0 flex-1 truncate text-[11px] text-[var(--color-text-secondary)]">
                   {(approval.permissionDetail && permissionDetailSummary(approval.permissionDetail)) || approval.title}
                 </span>
-                <span className="shrink-0 rounded-full bg-zinc-800 px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-wider text-zinc-500">
+                <span className="shrink-0 rounded-full bg-[var(--color-surface-2)] px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                   {kindLabel}
                 </span>
                 {approval.toolName && (
-                  <span className="shrink-0 text-[10px] text-zinc-500">{approval.toolName}</span>
+                  <span className="shrink-0 text-[10px] text-[var(--color-text-muted)]">{approval.toolName}</span>
                 )}
                 {approval.agentName && (
-                  <span className="shrink-0 text-[10px] text-zinc-600">{approval.agentName}</span>
+                  <span className="shrink-0 text-[10px] text-[var(--color-text-muted)]">{approval.agentName}</span>
                 )}
               </div>
             );

src/renderer/components/chat/FileChangePreview.tsx

@@ -0,0 +1,212 @@
+import { useState, useMemo } from 'react';
+import { ChevronRight, FileCode2, FilePlus2 } from 'lucide-react';
+
+import type { ToolCallFileChangePreview } from '@shared/contracts/sidecar';
+
+/* ── Diff stat helpers ─────────────────────────────────────── */
+
+interface DiffStats {
+  additions: number;
+  deletions: number;
+}
+
+function parseDiffStats(diff: string | undefined): DiffStats {
+  if (!diff) return { additions: 0, deletions: 0 };
+  let additions = 0;
+  let deletions = 0;
+  for (const line of diff.split('\n')) {
+    if (line.startsWith('+') && !line.startsWith('+++')) additions++;
+    else if (line.startsWith('-') && !line.startsWith('---')) deletions++;
+  }
+  return { additions, deletions };
+}
+
+function fileBaseName(path: string): string {
+  const normalized = path.replace(/\\/g, '/');
+  const lastSlash = normalized.lastIndexOf('/');
+  return lastSlash >= 0 ? normalized.slice(lastSlash + 1) : normalized;
+}
+
+function fileDir(path: string): string {
+  const normalized = path.replace(/\\/g, '/');
+  const lastSlash = normalized.lastIndexOf('/');
+  return lastSlash > 0 ? normalized.slice(0, lastSlash + 1) : '';
+}
+
+/* ── Mini diff-stats bar (GitHub-style) ────────────────────── */
+
+function DiffStatsBar({ additions, deletions }: DiffStats) {
+  const total = additions + deletions;
+  if (total === 0) return null;
+  const blocks = 5;
+  const addBlocks = Math.max(additions > 0 ? 1 : 0, Math.round((additions / total) * blocks));
+  const delBlocks = blocks - addBlocks;
+
+  return (
+    <span className="inline-flex gap-px" aria-label={`${additions} additions, ${deletions} deletions`}>
+      {Array.from({ length: addBlocks }, (_, i) => (
+        <span key={`a${i}`} className="size-1.5 rounded-[1px] bg-[var(--color-status-success)]" />
+      ))}
+      {Array.from({ length: delBlocks }, (_, i) => (
+        <span key={`d${i}`} className="size-1.5 rounded-[1px] bg-[var(--color-status-error)]" />
+      ))}
+    </span>
+  );
+}
+
+/* ── Diff line renderer ────────────────────────────────────── */
+
+function DiffLine({ line }: { line: string }) {
+  let textClass = 'text-[var(--color-text-secondary)]';
+  let bgClass = '';
+
+  if (line.startsWith('+') && !line.startsWith('+++')) {
+    textClass = 'text-[var(--color-status-success)]';
+    bgClass = 'bg-[var(--color-status-success)]/[0.06]';
+  } else if (line.startsWith('-') && !line.startsWith('---')) {
+    textClass = 'text-[var(--color-status-error)]';
+    bgClass = 'bg-[var(--color-status-error)]/[0.06]';
+  } else if (line.startsWith('@@')) {
+    textClass = 'text-[var(--color-accent-sky)]';
+  } else if (line.startsWith('diff ') || line.startsWith('index ') || line.startsWith('---') || line.startsWith('+++')) {
+    textClass = 'text-[var(--color-text-muted)]';
+  }
+
+  return <div className={`${textClass} ${bgClass} -mx-3 px-3`}>{line || '\u00A0'}</div>;
+}
+
+/* ── Individual file entry ─────────────────────────────────── */
+
+function FileChangeEntry({ file }: { file: ToolCallFileChangePreview }) {
+  const [expanded, setExpanded] = useState(false);
+  const isNewFile = !file.diff && !!file.newFileContents;
+  const stats = useMemo(() => parseDiffStats(file.diff), [file.diff]);
+  const hasContent = !!file.diff || !!file.newFileContents;
+  const dir = fileDir(file.path);
+  const base = fileBaseName(file.path);
+
+  return (
+    <div className="border-b border-[var(--color-border-subtle)] last:border-b-0">
+      <button
+        className="flex w-full items-center gap-1.5 px-2 py-[5px] text-left text-[10px] transition-colors duration-150 hover:bg-[var(--color-surface-3)]/40 disabled:cursor-default"
+        disabled={!hasContent}
+        onClick={hasContent ? () => setExpanded(!expanded) : undefined}
+        type="button"
+        aria-expanded={hasContent ? expanded : undefined}
+      >
+        {hasContent ? (
+          <ChevronRight
+            className={`size-2.5 shrink-0 text-[var(--color-text-muted)] transition-transform duration-150 ${expanded ? 'rotate-90' : ''}`}
+          />
+        ) : (
+          <span className="w-2.5 shrink-0" />
+        )}
+
+        {isNewFile
+          ? <FilePlus2 className="size-3 shrink-0 text-[var(--color-status-success)]" />
+          : <FileCode2 className="size-3 shrink-0 text-[var(--color-accent-sky)]" />}
+
+        <span className="min-w-0 flex-1 truncate font-mono">
+          {dir && <span className="text-[var(--color-text-muted)]">{dir}</span>}
+          <span className="text-[var(--color-text-primary)]">{base}</span>
+        </span>
+
+        {isNewFile ? (
+          <span className="shrink-0 rounded px-1 py-px text-[8px] font-semibold uppercase tracking-wider bg-[var(--color-status-success)]/10 text-[var(--color-status-success)]">
+            new
+          </span>
+        ) : (stats.additions > 0 || stats.deletions > 0) ? (
+          <span className="flex items-center gap-1.5 shrink-0">
+            <span className="flex items-center gap-0.5 font-mono">
+              {stats.additions > 0 && <span className="text-[var(--color-status-success)]">+{stats.additions}</span>}
+              {stats.deletions > 0 && <span className="text-[var(--color-status-error)]">−{stats.deletions}</span>}
+            </span>
+            <DiffStatsBar additions={stats.additions} deletions={stats.deletions} />
+          </span>
+        ) : null}
+      </button>
+
+      {expanded && (
+        <div className="border-t border-[var(--color-border-subtle)]">
+          <pre className="max-h-64 overflow-auto bg-[var(--color-surface-0)] px-3 py-1.5 font-mono text-[10px] leading-relaxed">
+            {file.diff
+              ? file.diff.split('\n').map((line, i) => <DiffLine key={i} line={line} />)
+              : file.newFileContents!.split('\n').map((line, i) => (
+                  <div key={i} className="text-[var(--color-text-secondary)]">{line || '\u00A0'}</div>
+                ))}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── Main export ───────────────────────────────────────────── */
+
+interface FileChangePreviewProps {
+  fileChanges: ToolCallFileChangePreview[];
+}
+
+export function FileChangePreview({ fileChanges }: FileChangePreviewProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  const totalStats = useMemo(() => {
+    let additions = 0;
+    let deletions = 0;
+    let newFiles = 0;
+    for (const fc of fileChanges) {
+      if (!fc.diff && fc.newFileContents) {
+        newFiles++;
+      } else {
+        const s = parseDiffStats(fc.diff);
+        additions += s.additions;
+        deletions += s.deletions;
+      }
+    }
+    return { additions, deletions, newFiles };
+  }, [fileChanges]);
+
+  const fileWord = fileChanges.length === 1 ? 'file' : 'files';
+
+  return (
+    <div className="mt-1 overflow-hidden rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]/60">
+      <button
+        className="flex w-full items-center gap-1.5 px-2 py-1 text-left text-[10px] font-medium text-[var(--color-text-muted)] transition-colors duration-150 hover:bg-[var(--color-surface-2)]/40 hover:text-[var(--color-text-secondary)]"
+        onClick={() => setExpanded(!expanded)}
+        type="button"
+        aria-expanded={expanded}
+        aria-label={`${fileChanges.length} file changes`}
+      >
+        <ChevronRight
+          className={`size-2.5 shrink-0 transition-transform duration-150 ${expanded ? 'rotate-90' : ''}`}
+        />
+        <span>{fileChanges.length} {fileWord} changed</span>
+
+        {(totalStats.additions > 0 || totalStats.deletions > 0) && (
+          <span className="ml-auto flex shrink-0 items-center gap-1.5 font-mono">
+            {totalStats.additions > 0 && (
+              <span className="text-[var(--color-status-success)]">+{totalStats.additions}</span>
+            )}
+            {totalStats.deletions > 0 && (
+              <span className="text-[var(--color-status-error)]">−{totalStats.deletions}</span>
+            )}
+            <DiffStatsBar additions={totalStats.additions} deletions={totalStats.deletions} />
+          </span>
+        )}
+        {totalStats.newFiles > 0 && (
+          <span className={`shrink-0 rounded px-1 py-px text-[8px] font-semibold uppercase tracking-wider bg-[var(--color-status-success)]/10 text-[var(--color-status-success)] ${totalStats.additions === 0 && totalStats.deletions === 0 ? 'ml-auto' : ''}`}>
+            {totalStats.newFiles} new
+          </span>
+        )}
+      </button>
+
+      {expanded && (
+        <div className="border-t border-[var(--color-border-subtle)]">
+          {fileChanges.map((fc) => (
+            <FileChangeEntry file={fc} key={fc.path} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/renderer/components/chat/InlinePills.tsx

@@ -15,9 +15,9 @@ import { RotateCcw, Server, ShieldCheck } from 'lucide-react';
 function TierBadge({ tier }: { tier: ModelDefinition['tier'] }) {
   if (!tier) return null;
   const styles = {
-    premium: 'bg-amber-500/10 text-amber-400',
-    standard: 'bg-zinc-700/50 text-zinc-500',
-    fast: 'bg-emerald-500/10 text-emerald-400',
+    premium: 'bg-[var(--color-status-warning)]/10 text-[var(--color-status-warning)]',
+    standard: 'bg-[var(--color-surface-3)]/50 text-[var(--color-text-muted)]',
+    fast: 'bg-[var(--color-status-success)]/10 text-[var(--color-status-success)]',
   };
   return (
     <span className={`ml-auto rounded px-1.5 py-0.5 text-[9px] font-medium ${styles[tier]}`}>
@@ -64,10 +64,10 @@ export function InlineModelPill({
       <button
         aria-expanded={open}
         aria-haspopup="listbox"
-        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition ${
+        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition-all duration-200 ${
           open
-            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
-            : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
+            ? 'border-[var(--color-border-glow)] bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]'
+            : 'border-[var(--color-border-subtle)] bg-[var(--color-surface-2)]/40 text-[var(--color-text-secondary)] hover:border-[var(--color-border)] hover:text-[var(--color-text-primary)]'
         } disabled:cursor-not-allowed disabled:opacity-50`}
         disabled={disabled}
         onClick={() => setOpen(!open)}
@@ -79,19 +79,19 @@ export function InlineModelPill({
       </button>
 
       {open && !disabled && (
-        <div className="absolute bottom-full right-0 z-40 mb-1.5 max-h-72 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl" role="listbox">
+        <div className="absolute bottom-full right-0 z-40 mb-1.5 max-h-72 w-64 overflow-y-auto rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] py-1 shadow-2xl" role="listbox">
           {groupedModels.map((pg) => (
             <div key={pg.id}>
               <div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
                 <ProviderIcon provider={pg.id} className="size-3.5" />
-                <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                   {pg.label}
                 </span>
               </div>
               {pg.models.map((model) => (
                 <button
-                  className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                    model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
+                  className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition-all duration-200 hover:bg-[var(--color-surface-3)] ${
+                    model.id === value ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]' : 'text-[var(--color-text-primary)]'
                   }`}
                   key={model.id}
                   onClick={() => { onChange(model.id); setOpen(false); }}
@@ -107,13 +107,13 @@ export function InlineModelPill({
           ))}
           {otherModels.length > 0 && (
             <div>
-              <div className="px-3 pb-1 pt-2.5 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+              <div className="px-3 pb-1 pt-2.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                 Other
               </div>
               {otherModels.map((model) => (
                 <button
-                  className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                    model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
+                  className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition-all duration-200 hover:bg-[var(--color-surface-3)] ${
+                    model.id === value ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]' : 'text-[var(--color-text-primary)]'
                   }`}
                   key={model.id}
                   onClick={() => { onChange(model.id); setOpen(false); }}
@@ -155,7 +155,7 @@ export function InlineThinkingPill({
 
   if (supportedEfforts && supportedEfforts.length === 0) {
     return (
-      <span className="inline-flex items-center gap-1 rounded border border-zinc-800/40 bg-zinc-800/20 px-1.5 py-0.5 text-pill text-zinc-600">
+      <span className="inline-flex items-center gap-1 rounded border border-[var(--color-border-subtle)] bg-[var(--color-surface-2)]/20 px-1.5 py-0.5 text-pill text-[var(--color-text-muted)]">
         <Sparkles className="size-2.5" />
         N/A
       </span>
@@ -169,10 +169,10 @@ export function InlineThinkingPill({
       <button
         aria-expanded={open}
         aria-haspopup="listbox"
-        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition ${
+        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition-all duration-200 ${
           open
-            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
-            : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
+            ? 'border-[var(--color-border-glow)] bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]'
+            : 'border-[var(--color-border-subtle)] bg-[var(--color-surface-2)]/40 text-[var(--color-text-secondary)] hover:border-[var(--color-border)] hover:text-[var(--color-text-primary)]'
         } disabled:cursor-not-allowed disabled:opacity-50`}
         disabled={disabled}
         onClick={() => setOpen(!open)}
@@ -184,11 +184,11 @@ export function InlineThinkingPill({
       </button>
 
       {open && !disabled && (
-        <div className="absolute bottom-full right-0 z-40 mb-1.5 w-36 overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl" role="listbox">
+        <div className="absolute bottom-full right-0 z-40 mb-1.5 w-36 overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] py-1 shadow-2xl" role="listbox">
           {options.map((option) => (
             <button
-              className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                option.value === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
+              className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition-all duration-200 hover:bg-[var(--color-surface-3)] ${
+                option.value === value ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]' : 'text-[var(--color-text-primary)]'
               }`}
               key={option.value}
               onClick={() => { onChange(option.value); setOpen(false); }}
@@ -235,10 +235,10 @@ export function InlineToolsPill({
       <button
         aria-expanded={open}
         aria-haspopup="listbox"
-        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition ${
+        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition-all duration-200 ${
           open
-            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
-            : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
+            ? 'border-[var(--color-border-glow)] bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]'
+            : 'border-[var(--color-border-subtle)] bg-[var(--color-surface-2)]/40 text-[var(--color-text-secondary)] hover:border-[var(--color-border)] hover:text-[var(--color-text-primary)]'
         } disabled:cursor-not-allowed disabled:opacity-50`}
         disabled={disabled}
         onClick={() => setOpen(!open)}
@@ -250,7 +250,7 @@ export function InlineToolsPill({
       </button>
 
       {open && !disabled && (
-        <div className="absolute bottom-full left-0 z-40 mb-1.5 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
+        <div className="absolute bottom-full left-0 z-40 mb-1.5 w-64 overflow-y-auto rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] py-1 shadow-2xl">
           {workspaceMcpServers.length > 0 && (
             <McpServerGroup
               label="Workspace MCP"
@@ -277,7 +277,7 @@ export function InlineToolsPill({
           )}
           {lspProfiles.length > 0 && (
             <div>
-              <div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
+              <div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
                 Language Servers
               </div>
               {lspProfiles.map((profile) => (
@@ -315,7 +315,7 @@ function McpServerGroup({
 }) {
   return (
     <div>
-      <div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
+      <div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
         {label}
       </div>
       {servers.map((server) => (
@@ -475,12 +475,12 @@ export function InlineApprovalPill({
       <button
         aria-expanded={open}
         aria-haspopup="listbox"
-        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition ${
+        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition-all duration-200 ${
           open
-            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
+            ? 'border-[var(--color-border-glow)] bg-[var(--color-accent-muted)] text-[var(--color-text-accent)]'
             : isOverridden
-              ? 'border-amber-500/30 bg-amber-500/5 text-amber-400 hover:border-amber-500/50'
-              : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
+              ? 'border-[var(--color-status-warning)]/30 bg-[var(--color-status-warning)]/5 text-[var(--color-status-warning)] hover:border-[var(--color-status-warning)]/50'
+              : 'border-[var(--color-border-subtle)] bg-[var(--color-surface-2)]/40 text-[var(--color-text-secondary)] hover:border-[var(--color-border)] hover:text-[var(--color-text-primary)]'
         } disabled:cursor-not-allowed disabled:opacity-50`}
         disabled={disabled}
         onClick={() => setOpen(!open)}
@@ -493,26 +493,26 @@ export function InlineApprovalPill({
         )}
         <span>
           {effectiveAutoApprovedCount}/{totalItemCount} auto-approved
-          {isProbingAny && <span className="text-zinc-500"> · probing…</span>}
+          {isProbingAny && <span className="text-[var(--color-text-muted)]"> · probing…</span>}
         </span>
         <ChevronDown className={`size-2.5 transition ${open ? 'rotate-180' : ''}`} />
       </button>
 
       {open && !disabled && (
-        <div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-[28rem] w-80 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 shadow-2xl">
+        <div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-[28rem] w-80 overflow-y-auto rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] shadow-2xl">
           {/* Header: session override / pattern defaults */}
-          <div className="sticky top-0 z-10 border-b border-zinc-800 bg-zinc-900">
+          <div className="sticky top-0 z-10 border-b border-[var(--color-border)] bg-[var(--color-surface-1)]">
             <div className="flex items-center gap-2 px-3 py-2">
               <span className={`rounded-full px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider ${
                 isOverridden
-                  ? 'bg-amber-500/15 text-amber-400'
-                  : 'bg-zinc-800 text-zinc-500'
+                  ? 'bg-[var(--color-status-warning)]/15 text-[var(--color-status-warning)]'
+                  : 'bg-[var(--color-surface-2)] text-[var(--color-text-muted)]'
               }`}>
                 {isOverridden ? 'Session override' : 'Pattern defaults'}
               </span>
               {isOverridden && (
                 <button
-                  className="flex items-center gap-1 rounded-full px-2 py-0.5 text-[9px] font-medium text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+                  className="flex items-center gap-1 rounded-full px-2 py-0.5 text-[9px] font-medium text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
                   onClick={() => onUpdate({})}
                   type="button"
                 >
@@ -524,12 +524,12 @@ export function InlineApprovalPill({
 
             {/* Search */}
             {showSearch && (
-              <div className="border-t border-zinc-800/50 px-3 py-1.5">
-                <div className="flex items-center gap-2 rounded border border-zinc-800 bg-zinc-800/30 px-2 py-1">
-                  <Search className="size-3 shrink-0 text-zinc-600" />
+              <div className="border-t border-[var(--color-border-subtle)] px-3 py-1.5">
+                <div className="flex items-center gap-2 rounded border border-[var(--color-border)] bg-[var(--color-surface-2)]/30 px-2 py-1">
+                  <Search className="size-3 shrink-0 text-[var(--color-text-muted)]" />
                   <input
                     autoFocus
-                    className="w-full bg-transparent text-[12px] text-zinc-300 placeholder-zinc-600 outline-none"
+                    className="w-full bg-transparent text-[12px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none"
                     onChange={(e) => setSearch(e.target.value)}
                     placeholder="Filter tools…"
                     type="text"
@@ -558,31 +558,31 @@ export function InlineApprovalPill({
                 <div key={group.id}>
                   {/* Group header */}
                   {isBuiltin ? (
-                    <div className={`px-3 pb-1 ${groupIdx > 0 ? 'pt-2.5' : 'pt-1'} text-[9px] font-semibold uppercase tracking-wider text-zinc-600`}>
+                    <div className={`px-3 pb-1 ${groupIdx > 0 ? 'pt-2.5' : 'pt-1'} text-[9px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]`}>
                       {group.label}
                     </div>
                   ) : (
                     <div
-                      className={`flex w-full cursor-pointer items-center gap-1.5 px-2.5 py-1.5 text-left transition hover:bg-zinc-800/60 ${groupIdx > 0 ? 'mt-0.5' : ''}`}
+                      className={`flex w-full cursor-pointer items-center gap-1.5 px-2.5 py-1.5 text-left transition-all duration-200 hover:bg-[var(--color-surface-3)]/60 ${groupIdx > 0 ? 'mt-0.5' : ''}`}
                       onClick={() => toggleExpanded(group.id)}
                       onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleExpanded(group.id); } }}
                       role="button"
                       tabIndex={0}
                     >
                       {probing ? (
-                        <Loader2 className="size-3 shrink-0 animate-spin text-indigo-400" aria-label="Probing server" />
+                        <Loader2 className="size-3 shrink-0 animate-spin text-[var(--color-text-accent)]" aria-label="Probing server" />
                       ) : group.tools.length > 0 ? (
-                        <ChevronRight className={`size-3 shrink-0 text-zinc-600 transition ${expanded ? 'rotate-90' : ''}`} />
+                        <ChevronRight className={`size-3 shrink-0 text-[var(--color-text-muted)] transition ${expanded ? 'rotate-90' : ''}`} />
                       ) : (
-                        <Server className="size-3 shrink-0 text-zinc-600" />
+                        <Server className="size-3 shrink-0 text-[var(--color-text-muted)]" />
                       )}
-                      <span className="min-w-0 flex-1 truncate text-[12px] font-medium text-zinc-300">{group.label}</span>
+                      <span className="min-w-0 flex-1 truncate text-[12px] font-medium text-[var(--color-text-primary)]">{group.label}</span>
                       {probing ? (
-                        <span className="shrink-0 rounded-full bg-indigo-500/10 px-1.5 py-px text-[9px] font-medium text-indigo-400">
+                        <span className="shrink-0 rounded-full bg-[var(--color-accent-muted)] px-1.5 py-px text-[9px] font-medium text-[var(--color-text-accent)]">
                           probing…
                         </span>
                       ) : (
-                        <span className="shrink-0 rounded-full bg-zinc-800/80 px-1.5 py-px text-[9px] font-medium tabular-nums text-zinc-500">
+                        <span className="shrink-0 rounded-full bg-[var(--color-surface-2)]/80 px-1.5 py-px text-[9px] font-medium tabular-nums text-[var(--color-text-muted)]">
                           {approvedLabel}
                         </span>
                       )}
@@ -619,7 +619,7 @@ export function InlineApprovalPill({
             })}
 
             {filteredGroups.length === 0 && searchLower && (
-              <div className="px-3 py-4 text-center text-[12px] text-zinc-600">
+              <div className="px-3 py-4 text-center text-[12px] text-[var(--color-text-muted)]">
                 No tools match "{search}"
               </div>
             )}
@@ -643,13 +643,13 @@ function GroupToggle({
     <button
       aria-pressed={allApproved}
       className={`relative inline-flex h-[16px] w-[28px] shrink-0 items-center rounded-full transition-colors ${
-        allApproved ? 'bg-indigo-500' : someApproved ? 'bg-zinc-600' : 'bg-zinc-700'
+        allApproved ? 'bg-[var(--color-accent)]' : someApproved ? 'bg-[var(--color-surface-3)]' : 'bg-[var(--color-surface-3)]'
       }`}
       onClick={onToggle}
       type="button"
     >
       {someApproved ? (
-        <Minus className="absolute left-1/2 size-2 -translate-x-1/2 text-zinc-300" strokeWidth={3} />
+        <Minus className="absolute left-1/2 size-2 -translate-x-1/2 text-[var(--color-text-primary)]" strokeWidth={3} />
       ) : (
         <span
           className={`inline-block size-[12px] rounded-full bg-white shadow transition-transform ${
@@ -677,16 +677,16 @@ export function InlineTerminalPill({
   return (
     <button
       aria-pressed={isOpen}
-      className={`inline-flex items-center gap-1 rounded-lg px-2 py-1 text-[11px] font-medium transition ${
+      className={`inline-flex items-center gap-1 rounded-lg px-2 py-1 text-[11px] font-medium transition-all duration-200 ${
         isOpen
-          ? 'bg-indigo-500/15 text-indigo-300 hover:bg-indigo-500/20'
-          : 'text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300'
+          ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-accent)] hover:bg-[var(--color-accent)]/20'
+          : 'text-[var(--color-text-muted)] hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]'
       } disabled:cursor-not-allowed disabled:opacity-50`}
       disabled={disabled}
       onClick={onToggle}
       type="button"
     >
-      {isRunning && <span className="size-1.5 shrink-0 rounded-full bg-emerald-400" />}
+      {isRunning && <span className="size-1.5 shrink-0 rounded-full bg-[var(--color-status-success)]" />}
       <TerminalSquare className="size-3" />
       <span>Terminal</span>
     </button>

src/renderer/components/chat/InlinePromptPill.tsx

@@ -66,19 +66,19 @@ export function InlinePromptPill({
       <button
         aria-expanded={open}
         aria-haspopup="listbox"
-        className="inline-flex items-center gap-1 rounded-lg px-2 py-1 text-[11px] font-medium text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+        className="inline-flex items-center gap-1 rounded-lg px-2 py-1 text-[11px] font-medium text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
         disabled={disabled}
         onClick={() => setOpen(!open)}
         type="button"
       >
         <FileText className="size-3" />
         Prompts
-        <span className="text-zinc-600">({promptFiles.length})</span>
+        <span className="text-[var(--color-text-muted)]">({promptFiles.length})</span>
       </button>
 
       {open && !disabled && (
         <div
-          className="absolute bottom-full left-0 z-40 mb-1.5 w-80 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl"
+          className="absolute bottom-full left-0 z-40 mb-1.5 w-80 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] shadow-xl"
           role="listbox"
         >
           {selectedPrompt ? (
@@ -114,24 +114,24 @@ function PromptList({
 }) {
   return (
     <div className="max-h-64 overflow-y-auto py-1">
-      <div className="px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+      <div className="px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
         Prompt files
       </div>
       {promptFiles.map((prompt) => (
         <button
           key={prompt.id}
-          className="flex w-full items-start gap-2.5 px-3 py-2 text-left transition hover:bg-zinc-800"
+          className="flex w-full items-start gap-2.5 px-3 py-2 text-left transition-all duration-200 hover:bg-[var(--color-surface-3)]"
           onClick={() => onSelect(prompt)}
           role="option"
           type="button"
         >
-          <FileText className="mt-0.5 size-3.5 shrink-0 text-zinc-500" />
+          <FileText className="mt-0.5 size-3.5 shrink-0 text-[var(--color-text-muted)]" />
           <div className="min-w-0 flex-1">
-            <div className="truncate text-[12px] font-medium text-zinc-200">
+            <div className="truncate text-[12px] font-medium text-[var(--color-text-primary)]">
               {prompt.name}
             </div>
             {prompt.description && (
-              <div className="mt-0.5 truncate text-[11px] text-zinc-500">
+              <div className="mt-0.5 truncate text-[11px] text-[var(--color-text-muted)]">
                 {prompt.description}
               </div>
             )}
@@ -140,7 +140,7 @@ function PromptList({
                 {prompt.variables.map((v) => (
                   <span
                     key={v.name}
-                    className="rounded bg-zinc-800 px-1.5 py-0.5 text-[10px] text-zinc-500"
+                    className="rounded bg-[var(--color-surface-2)] px-1.5 py-0.5 text-[10px] text-[var(--color-text-muted)]"
                   >
                     {v.name}
                   </span>
@@ -173,7 +173,7 @@ function PromptVariableForm({
     <div className="p-3">
       <div className="mb-3 flex items-center gap-2">
         <button
-          className="flex size-5 items-center justify-center rounded text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+          className="flex size-5 items-center justify-center rounded text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
           onClick={onBack}
           type="button"
           aria-label="Back to prompt list"
@@ -181,11 +181,11 @@ function PromptVariableForm({
           <X className="size-3" />
         </button>
         <div className="min-w-0 flex-1">
-          <div className="truncate text-[12px] font-medium text-zinc-200">
+          <div className="truncate text-[12px] font-medium text-[var(--color-text-primary)]">
             {prompt.name}
           </div>
           {prompt.description && (
-            <div className="truncate text-[10px] text-zinc-500">{prompt.description}</div>
+            <div className="truncate text-[10px] text-[var(--color-text-muted)]">{prompt.description}</div>
           )}
         </div>
       </div>
@@ -203,10 +203,10 @@ function PromptVariableForm({
       </div>
 
       <button
-        className={`mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-[12px] font-medium transition ${
+        className={`mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-[12px] font-medium transition-all duration-200 ${
           submitDisabled
-            ? 'bg-zinc-800 text-zinc-600'
-            : 'bg-indigo-600 text-white hover:bg-indigo-500'
+            ? 'bg-[var(--color-surface-2)] text-[var(--color-text-muted)]'
+            : 'brand-gradient-bg text-white hover:brightness-110'
         }`}
         disabled={submitDisabled}
         onClick={onSubmit}
@@ -232,11 +232,11 @@ function PromptVariableInput({
 }) {
   return (
     <div>
-      <label className="mb-1 block text-[11px] font-medium text-zinc-400">
+      <label className="mb-1 block text-[11px] font-medium text-[var(--color-text-secondary)]">
         {variable.name}
       </label>
       <input
-        className="w-full rounded-lg border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 text-[12px] text-zinc-200 placeholder-zinc-600 transition focus:border-indigo-500/50 focus:outline-none"
+        className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-2)] px-2.5 py-1.5 text-[12px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] transition-all duration-200 focus:border-[var(--color-border-glow)] focus:outline-none"
         onChange={(e) => onChange(e.target.value)}
         onKeyDown={(e) => {
           if (e.key === 'Enter' && onSubmit) {

src/renderer/components/chat/McpAuthBanner.tsx

@@ -24,20 +24,20 @@ export function McpAuthBanner({
   const hasFailed = mcpAuth.status === 'failed';
 
   return (
-    <div className="rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3" role="alert">
+    <div className="rounded-xl border border-[var(--color-glass-border)] border-l-4 border-l-[var(--color-status-warning)] bg-[var(--color-glass)] px-4 py-3" role="alert">
       <div className="flex items-start gap-2.5">
-        <KeyRound className="mt-0.5 size-4 shrink-0 text-amber-400" />
+        <KeyRound className="mt-0.5 size-4 shrink-0 text-[var(--color-status-warning)]" />
         <div className="min-w-0 flex-1">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-2">
-              <span className="text-[13px] font-semibold text-amber-200">Authentication required</span>
-              <span className="rounded-full bg-amber-500/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-amber-400">
+              <span className="text-[13px] font-semibold text-[var(--color-status-warning)]">Authentication required</span>
+              <span className="rounded-full bg-[var(--color-status-warning)]/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-[var(--color-status-warning)]">
                 MCP
               </span>
             </div>
             <button
               aria-label="Dismiss authentication prompt"
-              className="rounded p-0.5 text-zinc-500 transition hover:bg-zinc-700/50 hover:text-zinc-300"
+              className="rounded p-0.5 text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-surface-3)]/50 hover:text-[var(--color-text-primary)]"
               onClick={handleDismiss}
               type="button"
             >
@@ -45,21 +45,21 @@ export function McpAuthBanner({
             </button>
           </div>
 
-          <p className="mt-2 text-[13px] leading-relaxed text-zinc-200">
+          <p className="mt-2 text-[13px] leading-relaxed text-[var(--color-text-primary)]">
             The MCP server{' '}
-            <span className="font-medium text-amber-200">{mcpAuth.serverName}</span>{' '}
+            <span className="font-medium text-[var(--color-status-warning)]">{mcpAuth.serverName}</span>{' '}
             requires OAuth authentication to connect.
           </p>
 
-          <p className="mt-1 text-[11px] text-zinc-500">{mcpAuth.serverUrl}</p>
+          <p className="mt-1 text-[11px] text-[var(--color-text-muted)]">{mcpAuth.serverUrl}</p>
 
           {hasFailed && mcpAuth.errorMessage && (
-            <p className="mt-2 text-[12px] text-red-400">{mcpAuth.errorMessage}</p>
+            <p className="mt-2 text-[12px] text-[var(--color-status-error)]">{mcpAuth.errorMessage}</p>
           )}
 
           <div className="mt-3 flex items-center gap-3">
             <button
-              className="inline-flex items-center gap-1.5 rounded-lg bg-amber-500/20 px-3 py-1.5 text-[12px] font-medium text-amber-200 transition hover:bg-amber-500/30 disabled:opacity-50"
+              className="brand-gradient-bg inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] font-medium text-white transition-all duration-200 hover:brightness-110 disabled:opacity-50"
               disabled={isAuthenticating}
               onClick={handleAuthenticate}
               type="button"
@@ -75,7 +75,7 @@ export function McpAuthBanner({
                 'Authenticate in browser'
               )}
             </button>
-            <span className="text-[11px] text-zinc-500">
+            <span className="text-[11px] text-[var(--color-text-muted)]">
               {isAuthenticating
                 ? 'Waiting for consent in the browser…'
                 : 'Opens your browser for OAuth consent. Token is stored for this session only.'}

src/renderer/components/chat/MessageActions.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { Bookmark, Check, ClipboardCopy, GitBranch, Pencil, RefreshCw } from 'lucide-react';
+
+import type { ChatMessageRecord } from '@shared/domain/session';
+
+export interface MessageActionsProps {
+  message: ChatMessageRecord;
+  isLastAssistant: boolean;
+  onCopy: () => void;
+  onPin: () => void;
+  onBranch: () => void;
+  onRegenerate?: () => void;
+  onEdit?: () => void;
+}
+
+export function MessageActions({
+  message,
+  isLastAssistant,
+  onCopy,
+  onPin,
+  onBranch,
+  onRegenerate,
+  onEdit,
+}: MessageActionsProps) {
+  const [copied, setCopied] = useState(false);
+  const isUser = message.role === 'user';
+  const isPinned = !!message.isPinned;
+
+  function handleCopy() {
+    onCopy();
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1800);
+  }
+
+  return (
+    <div
+      className="msg-actions-enter flex items-center gap-0.5 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]/90 px-1 py-0.5 opacity-0 shadow-sm backdrop-blur-sm transition-opacity duration-150 group-hover:opacity-100"
+      role="toolbar"
+      aria-label="Message actions"
+    >
+      {/* Copy */}
+      <ActionButton
+        icon={copied ? <Check className="size-3 text-[var(--color-status-success)]" /> : <ClipboardCopy className="size-3" />}
+        label={copied ? 'Copied' : 'Copy as markdown'}
+        onClick={handleCopy}
+      />
+
+      {/* Pin / Unpin */}
+      <ActionButton
+        icon={
+          <Bookmark
+            className={`size-3 ${isPinned ? 'fill-[var(--color-accent-sky)] text-[var(--color-accent-sky)]' : ''}`}
+          />
+        }
+        label={isPinned ? 'Unpin message' : 'Pin message'}
+        onClick={onPin}
+        active={isPinned}
+      />
+
+      {/* Edit (user messages only) */}
+      {isUser && onEdit && (
+        <ActionButton
+          icon={<Pencil className="size-3" />}
+          label="Edit &amp; resend"
+          onClick={onEdit}
+        />
+      )}
+
+      {/* Regenerate (last assistant only) */}
+      {!isUser && isLastAssistant && onRegenerate && (
+        <ActionButton
+          icon={<RefreshCw className="size-3" />}
+          label="Regenerate response"
+          onClick={onRegenerate}
+        />
+      )}
+
+      {/* Branch */}
+      <ActionButton
+        icon={<GitBranch className="size-3" />}
+        label={isUser ? 'Branch from this message' : 'Branch from this response'}
+        onClick={onBranch}
+      />
+    </div>
+  );
+}
+
+/* ── Small action button ────────────────────────────────────── */
+
+interface ActionButtonProps {
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  active?: boolean;
+}
+
+function ActionButton({ icon, label, onClick, active }: ActionButtonProps) {
+  return (
+    <button
+      aria-label={label}
+      className={`flex size-6 items-center justify-center rounded-md transition-all duration-100 ${
+        active
+          ? 'text-[var(--color-accent-sky)]'
+          : 'text-[var(--color-text-muted)] hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text-primary)]'
+      }`}
+      onClick={onClick}
+      title={label}
+      type="button"
+    >
+      {icon}
+    </button>
+  );
+}

src/renderer/components/chat/MessageEditComposer.tsx

@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Check, X } from 'lucide-react';
+
+export interface MessageEditComposerProps {
+  initialContent: string;
+  onSave: (content: string) => void;
+  onCancel: () => void;
+}
+
+export function MessageEditComposer({ initialContent, onSave, onCancel }: MessageEditComposerProps) {
+  const [content, setContent] = useState(initialContent);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.focus();
+    ta.setSelectionRange(ta.value.length, ta.value.length);
+    resizeTextarea(ta);
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      }
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        const trimmed = content.trim();
+        if (trimmed) onSave(trimmed);
+      }
+    },
+    [content, onCancel, onSave],
+  );
+
+  function resizeTextarea(el: HTMLTextAreaElement) {
+    el.style.height = 'auto';
+    el.style.height = `${Math.min(el.scrollHeight, 300)}px`;
+  }
+
+  const canSave = content.trim().length > 0 && content.trim() !== initialContent.trim();
+
+  return (
+    <div className="msg-actions-enter">
+      <textarea
+        ref={textareaRef}
+        className="w-full resize-none rounded-lg border border-[var(--color-border-glow)] bg-[var(--color-surface-0)] px-3 py-2 text-[14px] leading-relaxed text-[var(--color-text-primary)] outline-none transition-colors focus:border-[var(--color-accent)]/50"
+        onChange={(e) => {
+          setContent(e.target.value);
+          resizeTextarea(e.target);
+        }}
+        onKeyDown={handleKeyDown}
+        rows={1}
+        value={content}
+      />
+      <div className="mt-1.5 flex items-center gap-1.5">
+        <button
+          className="flex items-center gap-1 rounded-md bg-[var(--color-accent)] px-2.5 py-1 text-[11px] font-medium text-white transition-all duration-150 hover:bg-[var(--color-accent-hover)] disabled:cursor-not-allowed disabled:opacity-40"
+          disabled={!canSave}
+          onClick={() => onSave(content.trim())}
+          type="button"
+        >
+          <Check className="size-3" />
+          Save &amp; Resend
+        </button>
+        <button
+          className="flex items-center gap-1 rounded-md px-2.5 py-1 text-[11px] font-medium text-[var(--color-text-secondary)] transition-all duration-150 hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text-primary)]"
+          onClick={onCancel}
+          type="button"
+        >
+          <X className="size-3" />
+          Cancel
+        </button>
+        <span className="ml-auto text-[10px] text-[var(--color-text-muted)]">
+          Ctrl+Enter to save · Esc to cancel
+        </span>
+      </div>
+    </div>
+  );
+}

src/renderer/components/chat/PermissionDetailView.tsx

@@ -68,7 +68,7 @@ function ShellDetail({ detail }: { detail: PermissionDetail }) {
     <div className="mt-2.5 space-y-2">
       {detail.intention && <IntentionLine text={detail.intention} />}
       {detail.warning && (
-        <div className="flex items-start gap-1.5 rounded-md bg-red-500/10 px-2.5 py-1.5 text-[11px] text-red-300">
+        <div className="flex items-start gap-1.5 rounded-md bg-[var(--color-status-error)]/10 px-2.5 py-1.5 text-[11px] text-[var(--color-status-error)]">
           <AlertTriangle className="mt-0.5 size-3 shrink-0" />
           <span>{detail.warning}</span>
         </div>
@@ -89,8 +89,8 @@ function WriteDetail({ detail }: { detail: PermissionDetail }) {
     <div className="mt-2.5 space-y-2">
       {detail.intention && <IntentionLine text={detail.intention} />}
       {detail.fileName && (
-        <div className="flex items-center gap-1.5 text-[11px] text-zinc-300">
-          <FileEdit className="size-3 shrink-0 text-zinc-500" />
+        <div className="flex items-center gap-1.5 text-[11px] text-[var(--color-text-primary)]">
+          <FileEdit className="size-3 shrink-0 text-[var(--color-text-muted)]" />
           <code className="font-mono">{detail.fileName}</code>
         </div>
       )}
@@ -107,8 +107,8 @@ function ReadDetail({ detail }: { detail: PermissionDetail }) {
     <div className="mt-2.5 space-y-2">
       {detail.intention && <IntentionLine text={detail.intention} />}
       {detail.path && (
-        <div className="flex items-center gap-1.5 text-[11px] text-zinc-300">
-          <FileText className="size-3 shrink-0 text-zinc-500" />
+        <div className="flex items-center gap-1.5 text-[11px] text-[var(--color-text-primary)]">
+          <FileText className="size-3 shrink-0 text-[var(--color-text-muted)]" />
           <code className="font-mono">{detail.path}</code>
         </div>
       )}
@@ -121,14 +121,14 @@ function McpDetail({ detail }: { detail: PermissionDetail }) {
     <div className="mt-2.5 space-y-2">
       <div className="flex flex-wrap items-center gap-2 text-[11px]">
         {detail.serverName && (
-          <span className="inline-flex items-center gap-1 rounded-full bg-indigo-500/15 px-2 py-0.5 text-indigo-300">
+          <span className="inline-flex items-center gap-1 rounded-full bg-[var(--color-accent-muted)] px-2 py-0.5 text-[var(--color-text-accent)]">
             <Server className="size-2.5" />
             {detail.serverName}
           </span>
         )}
-        {detail.toolTitle && <span className="text-zinc-300">{detail.toolTitle}</span>}
+        {detail.toolTitle && <span className="text-[var(--color-text-primary)]">{detail.toolTitle}</span>}
         {detail.readOnly && (
-          <span className="rounded-full bg-emerald-500/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-emerald-400">
+          <span className="rounded-full bg-[var(--color-status-success)]/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-[var(--color-status-success)]">
             read-only
           </span>
         )}
@@ -145,10 +145,10 @@ function UrlDetail({ detail }: { detail: PermissionDetail }) {
     <div className="mt-2.5 space-y-2">
       {detail.intention && <IntentionLine text={detail.intention} />}
       {detail.url && (
-        <div className="flex items-center gap-1.5 rounded-md bg-zinc-800/60 px-2.5 py-1.5 text-[11px] text-blue-300">
+        <div className="flex items-center gap-1.5 rounded-md bg-[var(--color-surface-2)]/60 px-2.5 py-1.5 text-[11px] text-[var(--color-accent-sky)]">
           <Globe className="size-3 shrink-0" />
           <code className="min-w-0 flex-1 break-all font-mono">{detail.url}</code>
-          <ExternalLink className="size-3 shrink-0 text-zinc-500" />
+          <ExternalLink className="size-3 shrink-0 text-[var(--color-text-muted)]" />
         </div>
       )}
     </div>
@@ -160,18 +160,18 @@ function MemoryDetail({ detail }: { detail: PermissionDetail }) {
     <div className="mt-2.5 space-y-1.5">
       {detail.subject && (
         <div className="flex items-center gap-1.5 text-[11px]">
-          <BookOpen className="size-3 shrink-0 text-zinc-500" />
-          <span className="font-medium text-zinc-300">{detail.subject}</span>
+          <BookOpen className="size-3 shrink-0 text-[var(--color-text-muted)]" />
+          <span className="font-medium text-[var(--color-text-primary)]">{detail.subject}</span>
         </div>
       )}
       {detail.fact && (
-        <p className="rounded-md bg-zinc-800/60 px-2.5 py-1.5 text-[11px] leading-relaxed text-zinc-300">
+        <p className="rounded-md bg-[var(--color-surface-2)]/60 px-2.5 py-1.5 text-[11px] leading-relaxed text-[var(--color-text-primary)]">
           {detail.fact}
         </p>
       )}
       {detail.citations && (
-        <p className="text-[10px] text-zinc-500">
-          Source: <span className="text-zinc-400">{detail.citations}</span>
+        <p className="text-[10px] text-[var(--color-text-muted)]">
+          Source: <span className="text-[var(--color-text-secondary)]">{detail.citations}</span>
         </p>
       )}
     </div>
@@ -182,7 +182,7 @@ function CustomToolDetail({ detail }: { detail: PermissionDetail }) {
   return (
     <div className="mt-2.5 space-y-2">
       {detail.toolDescription && (
-        <p className="text-[11px] text-zinc-400">{detail.toolDescription}</p>
+        <p className="text-[11px] text-[var(--color-text-secondary)]">{detail.toolDescription}</p>
       )}
       {detail.args && Object.keys(detail.args).length > 0 && (
         <CollapsibleCode label="Arguments" text={JSON.stringify(detail.args, null, 2)} />
@@ -195,7 +195,7 @@ function HookDetail({ detail }: { detail: PermissionDetail }) {
   return (
     <div className="mt-2.5 space-y-2">
       {detail.hookMessage && (
-        <div className="flex items-start gap-1.5 rounded-md bg-amber-500/10 px-2.5 py-1.5 text-[11px] text-amber-200">
+        <div className="flex items-start gap-1.5 rounded-md bg-[var(--color-status-warning)]/10 px-2.5 py-1.5 text-[11px] text-[var(--color-status-warning)]">
           <AlertTriangle className="mt-0.5 size-3 shrink-0" />
           <span>{detail.hookMessage}</span>
         </div>
@@ -210,12 +210,12 @@ function HookDetail({ detail }: { detail: PermissionDetail }) {
 /* ── Shared primitives ──────────────────────────────────────── */
 
 function IntentionLine({ text }: { text: string }) {
-  return <p className="text-[11px] italic text-zinc-400">{text}</p>;
+  return <p className="text-[11px] italic text-[var(--color-text-secondary)]">{text}</p>;
 }
 
 function CommandBlock({ text }: { text: string }) {
   return (
-    <pre className="overflow-x-auto rounded-md bg-zinc-900/80 px-3 py-2 font-mono text-[11px] leading-relaxed text-emerald-300">
+    <pre className="overflow-x-auto rounded-md bg-[var(--color-surface-1)] px-3 py-2 font-mono text-[11px] leading-relaxed text-[var(--color-status-success)]">
       {text}
     </pre>
   );
@@ -225,12 +225,12 @@ function DiffBlock({ text }: { text: string }) {
   const lines = text.split('\n');
   return (
     <CollapsibleCode label="Diff" text={text} defaultExpanded>
-      <pre className="max-h-48 overflow-auto rounded-md bg-zinc-900/80 px-3 py-2 font-mono text-[10px] leading-relaxed">
+      <pre className="max-h-48 overflow-auto rounded-md bg-[var(--color-surface-1)] px-3 py-2 font-mono text-[10px] leading-relaxed">
         {lines.map((line, i) => {
-          let color = 'text-zinc-400';
-          if (line.startsWith('+')) color = 'text-emerald-400';
-          else if (line.startsWith('-')) color = 'text-red-400';
-          else if (line.startsWith('@@')) color = 'text-blue-400';
+          let color = 'text-[var(--color-text-secondary)]';
+          if (line.startsWith('+')) color = 'text-[var(--color-status-success)]';
+          else if (line.startsWith('-')) color = 'text-[var(--color-status-error)]';
+          else if (line.startsWith('@@')) color = 'text-[var(--color-accent-sky)]';
           return (
             <div className={color} key={i}>
               {line}
@@ -256,10 +256,10 @@ function CollapsibleCode({
   const [expanded, setExpanded] = useState(defaultExpanded);
 
   return (
-    <div className="rounded-md border border-zinc-800/60 bg-zinc-900/40">
+    <div className="rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]">
       <button
         aria-expanded={expanded}
-        className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left text-[10px] font-medium text-zinc-500 hover:text-zinc-400"
+        className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left text-[10px] font-medium text-[var(--color-text-muted)] transition-all duration-200 hover:text-[var(--color-text-secondary)]"
         onClick={() => setExpanded(!expanded)}
         type="button"
       >
@@ -269,9 +269,9 @@ function CollapsibleCode({
         {label}
       </button>
       {expanded && (
-        <div className="border-t border-zinc-800/40 px-2.5 py-1.5">
+        <div className="border-t border-[var(--color-border-subtle)] px-2.5 py-1.5">
           {children ?? (
-            <pre className="max-h-48 overflow-auto font-mono text-[10px] leading-relaxed text-zinc-300">
+            <pre className="max-h-48 overflow-auto font-mono text-[10px] leading-relaxed text-[var(--color-text-primary)]">
               {text}
             </pre>
           )}
@@ -283,9 +283,9 @@ function CollapsibleCode({
 
 function MetaList({ label, items }: { label: string; items: string[] }) {
   return (
-    <div className="text-[10px] text-zinc-500">
+    <div className="text-[10px] text-[var(--color-text-muted)]">
       <span className="font-medium">{label}:</span>{' '}
-      <span className="text-zinc-400">{items.join(', ')}</span>
+      <span className="text-[var(--color-text-secondary)]">{items.join(', ')}</span>
     </div>
   );
 }

src/renderer/components/chat/PlanReviewBanner.tsx

@@ -16,21 +16,21 @@ export function PlanReviewBanner({
   }, [planReview, onDismiss]);
 
   return (
-    <div className="rounded-xl border border-emerald-500/30 bg-emerald-500/5 px-4 py-3" role="alert">
+    <div className="rounded-xl border border-[var(--color-glass-border)] border-l-4 border-l-[var(--color-status-success)] bg-[var(--color-glass)] px-4 py-3" role="alert">
       {/* Header */}
       <div className="flex items-start gap-2.5">
-        <ClipboardList className="mt-0.5 size-4 shrink-0 text-emerald-400" />
+        <ClipboardList className="mt-0.5 size-4 shrink-0 text-[var(--color-status-success)]" />
         <div className="min-w-0 flex-1">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-2">
-              <span className="text-[13px] font-semibold text-emerald-200">Plan ready for review</span>
-              <span className="rounded-full bg-emerald-500/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-emerald-400">
+              <span className="text-[13px] font-semibold text-[var(--color-status-success)]">Plan ready for review</span>
+              <span className="rounded-full bg-[var(--color-status-success)]/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-[var(--color-status-success)]">
                 Plan mode
               </span>
             </div>
             <button
               aria-label="Dismiss plan"
-              className="rounded p-0.5 text-zinc-500 transition hover:bg-zinc-700/50 hover:text-zinc-300"
+              className="rounded p-0.5 text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-surface-3)]/50 hover:text-[var(--color-text-primary)]"
               onClick={handleDismiss}
               type="button"
             >
@@ -39,30 +39,30 @@ export function PlanReviewBanner({
           </div>
 
           {planReview.agentName && (
-            <div className="mt-1 text-[11px] text-zinc-400">
-              Agent: <span className="text-zinc-300">{planReview.agentName}</span>
+            <div className="mt-1 text-[11px] text-[var(--color-text-secondary)]">
+              Agent: <span className="text-[var(--color-text-primary)]">{planReview.agentName}</span>
             </div>
           )}
 
           {/* Summary */}
           {planReview.summary && (
-            <p className="mt-2 text-[13px] leading-relaxed text-zinc-200">
+            <p className="mt-2 text-[13px] leading-relaxed text-[var(--color-text-primary)]">
               {planReview.summary}
             </p>
           )}
 
           {/* Plan content (rendered markdown) */}
           {planReview.planContent && (
-            <div className="mt-3 max-h-80 overflow-y-auto rounded-lg border border-zinc-700/50 bg-zinc-900/60 p-3">
+            <div className="mt-3 max-h-80 overflow-y-auto rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-surface-1)] p-3">
               <MarkdownContent content={planReview.planContent} />
             </div>
           )}
 
           {/* Guidance */}
-          <p className="mt-3 text-[12px] leading-relaxed text-zinc-400">
+          <p className="mt-3 text-[12px] leading-relaxed text-[var(--color-text-secondary)]">
             Send a follow-up message to proceed — e.g.{' '}
-            <span className="text-zinc-300">&quot;implement the plan&quot;</span>,{' '}
-            <span className="text-zinc-300">&quot;adjust step 3&quot;</span>, or ask for a different approach.
+            <span className="text-[var(--color-text-primary)]">&quot;implement the plan&quot;</span>,{' '}
+            <span className="text-[var(--color-text-primary)]">&quot;adjust step 3&quot;</span>, or ask for a different approach.
           </p>
         </div>
       </div>

src/renderer/components/chat/SubagentActivityCard.tsx

@@ -14,11 +14,11 @@ function formatElapsed(startedAt: string): string {
 function StatusIcon({ status }: { status: ActiveSubagent['status'] }) {
   switch (status) {
     case 'running':
-      return <Loader2 className="size-3.5 animate-spin text-sky-400" aria-label="Running" />;
+      return <Loader2 className="size-3.5 animate-spin text-[var(--color-accent-sky)]" aria-label="Running" />;
     case 'completed':
-      return <CheckCircle2 className="size-3.5 text-emerald-400" aria-label="Completed" />;
+      return <CheckCircle2 className="size-3.5 text-[var(--color-status-success)]" aria-label="Completed" />;
     case 'failed':
-      return <XCircle className="size-3.5 text-red-400" aria-label="Failed" />;
+      return <XCircle className="size-3.5 text-[var(--color-status-error)]" aria-label="Failed" />;
   }
 }
 
@@ -31,7 +31,7 @@ function ElapsedTimer({ startedAt }: { startedAt: string }) {
   }, [startedAt]);
 
   return (
-    <span className="ml-auto shrink-0 text-[10px] tabular-nums text-zinc-600">{elapsed}</span>
+    <span className="ml-auto shrink-0 text-[10px] tabular-nums text-[var(--color-text-muted)]">{elapsed}</span>
   );
 }
 
@@ -42,25 +42,25 @@ interface SubagentActivityCardProps {
 function SubagentActivityCard({ subagent }: SubagentActivityCardProps) {
   const borderClass =
     subagent.status === 'running'
-      ? 'border-sky-500/20'
+      ? 'border-[var(--color-accent-sky)]/20'
       : subagent.status === 'failed'
-        ? 'border-red-500/20'
-        : 'border-emerald-500/20';
+        ? 'border-[var(--color-status-error)]/20'
+        : 'border-[var(--color-status-success)]/20';
 
   return (
     <div
-      className={`flex items-center gap-2 rounded-lg border bg-zinc-900/60 px-3 py-1.5 ${borderClass}`}
+      className={`flex items-center gap-2 rounded-lg border bg-[var(--color-glass)] px-3 py-1.5 transition-all duration-200 ${borderClass}`}
       role="status"
       aria-label={`Sub-agent ${subagent.name}: ${subagent.activityLabel}`}
     >
       <StatusIcon status={subagent.status} />
-      <Bot className="size-3 text-zinc-500" />
-      <span className="text-[11px] font-medium text-zinc-300">{subagent.name}</span>
-      <span className="text-[10px] text-zinc-600">—</span>
-      <span className="text-[10px] text-zinc-500">{subagent.activityLabel}</span>
+      <Bot className="size-3 text-[var(--color-text-muted)]" />
+      <span className="text-[11px] font-medium text-[var(--color-text-primary)]">{subagent.name}</span>
+      <span className="text-[10px] text-[var(--color-text-muted)]">—</span>
+      <span className="text-[10px] text-[var(--color-text-secondary)]">{subagent.activityLabel}</span>
       {subagent.status === 'running' && <ElapsedTimer startedAt={subagent.startedAt} />}
       {subagent.error && (
-        <span className="truncate text-[10px] text-red-400" title={subagent.error}>
+        <span className="truncate text-[10px] text-[var(--color-status-error)]" title={subagent.error}>
           {subagent.error}
         </span>
       )}

src/renderer/components/chat/ThinkingDots.tsx

@@ -1,9 +1,9 @@
 export function ThinkingDots() {
   return (
     <div className="flex items-center gap-1.5" aria-label="Thinking">
-      <span className="thinking-dot size-2 rounded-full bg-zinc-500" />
-      <span className="thinking-dot size-2 rounded-full bg-zinc-500" />
-      <span className="thinking-dot size-2 rounded-full bg-zinc-500" />
+      <span className="thinking-dot size-2 rounded-full bg-[var(--color-accent)]" />
+      <span className="thinking-dot size-2 rounded-full bg-[var(--color-accent-sky)]" />
+      <span className="thinking-dot size-2 rounded-full bg-[var(--color-accent-purple)]" />
     </div>
   );
 }

src/renderer/components/chat/UserInputBanner.tsx

@@ -42,25 +42,25 @@ export function UserInputBanner({
   );
 
   return (
-    <div className="rounded-xl border border-blue-500/30 bg-blue-500/5 px-4 py-3" role="alert">
+    <div className="rounded-xl border border-[var(--color-glass-border)] border-l-4 border-l-[var(--color-accent-sky)] bg-[var(--color-glass)] px-4 py-3" role="alert">
       {/* Header */}
       <div className="flex items-start gap-2.5">
-        <MessageCircleQuestion className="mt-0.5 size-4 shrink-0 text-blue-400" />
+        <MessageCircleQuestion className="mt-0.5 size-4 shrink-0 text-[var(--color-accent-sky)]" />
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
-            <span className="text-[13px] font-semibold text-blue-200">Agent question</span>
-            <span className="rounded-full bg-blue-500/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-blue-400">
+            <span className="text-[13px] font-semibold text-[var(--color-accent-sky)]">Agent question</span>
+            <span className="rounded-full bg-[var(--color-accent-sky)]/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-[var(--color-accent-sky)]">
               User input
             </span>
           </div>
 
           {userInput.agentName && (
-            <div className="mt-1 text-[11px] text-zinc-400">
-              Agent: <span className="text-zinc-300">{userInput.agentName}</span>
+            <div className="mt-1 text-[11px] text-[var(--color-text-secondary)]">
+              Agent: <span className="text-[var(--color-text-primary)]">{userInput.agentName}</span>
             </div>
           )}
 
-          <p className="mt-2 text-[13px] leading-relaxed text-zinc-200 whitespace-pre-wrap">
+          <p className="mt-2 text-[13px] leading-relaxed text-[var(--color-text-primary)] whitespace-pre-wrap">
             {userInput.question}
           </p>
         </div>
@@ -71,7 +71,7 @@ export function UserInputBanner({
         <div className="mt-3 flex flex-wrap gap-2">
           {userInput.choices!.map((choice) => (
             <button
-              className="rounded-lg border border-blue-500/30 bg-blue-500/10 px-3.5 py-1.5 text-[12px] font-medium text-blue-200 transition hover:border-blue-400/50 hover:bg-blue-500/20 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+              className="rounded-lg border border-[var(--color-accent-sky)]/30 bg-[var(--color-accent-sky)]/10 px-3.5 py-1.5 text-[12px] font-medium text-[var(--color-accent-sky)] transition-all duration-200 hover:border-[var(--color-accent-sky)]/50 hover:bg-[var(--color-accent-sky)]/20 hover:text-[var(--color-text-primary)] disabled:cursor-not-allowed disabled:opacity-50"
               disabled={isSubmitting}
               key={choice}
               onClick={() => handleChoiceClick(choice)}
@@ -88,7 +88,7 @@ export function UserInputBanner({
         <div className="mt-3 flex items-center gap-2">
           <input
             aria-label="Type your answer"
-            className="min-w-0 flex-1 rounded-lg border border-zinc-700 bg-zinc-900/60 px-3 py-1.5 text-[13px] text-zinc-200 placeholder-zinc-500 outline-none transition focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/30 disabled:cursor-not-allowed disabled:opacity-50"
+            className="min-w-0 flex-1 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-1.5 text-[13px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition-all duration-200 focus:border-[var(--color-border-glow)] focus:ring-1 focus:ring-[var(--color-border-glow)] disabled:cursor-not-allowed disabled:opacity-50"
             disabled={isSubmitting}
             onChange={(e) => setFreeformText(e.target.value)}
             onKeyDown={handleKeyDown}
@@ -98,7 +98,7 @@ export function UserInputBanner({
           />
           <button
             aria-label="Submit answer"
-            className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3.5 py-1.5 text-[12px] font-medium text-white transition hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
+            className="brand-gradient-bg inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-[12px] font-medium text-white transition-all duration-200 hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
             disabled={isSubmitting || !freeformText.trim()}
             onClick={handleFreeformSubmit}
             type="button"

src/renderer/components/pattern-graph/GraphNodes.tsx

@@ -16,9 +16,9 @@ const kindIcons: Record<PatternGraphNodeKind, typeof CircleUser> = {
 };
 
 const kindColors: Record<PatternGraphNodeKind, { bg: string; border: string; text: string }> = {
-  'user-input': { bg: 'bg-indigo-500/10', border: 'border-indigo-500/30', text: 'text-indigo-400' },
-  'user-output': { bg: 'bg-indigo-500/10', border: 'border-indigo-500/30', text: 'text-indigo-400' },
-  agent: { bg: 'bg-zinc-800/80', border: 'border-zinc-600/40', text: 'text-zinc-200' },
+  'user-input': { bg: 'bg-[var(--color-accent)]/10', border: 'border-[var(--color-accent)]/30', text: 'text-[var(--color-accent-sky)]' },
+  'user-output': { bg: 'bg-[var(--color-accent)]/10', border: 'border-[var(--color-accent)]/30', text: 'text-[var(--color-accent-sky)]' },
+  agent: { bg: 'bg-[var(--color-surface-2)]/80', border: 'border-[var(--color-border)]/40', text: 'text-[var(--color-text-primary)]' },
   distributor: { bg: 'bg-amber-500/10', border: 'border-amber-500/30', text: 'text-amber-400' },
   collector: { bg: 'bg-amber-500/10', border: 'border-amber-500/30', text: 'text-amber-400' },
   orchestrator: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/30', text: 'text-emerald-400' },
@@ -38,9 +38,9 @@ function GraphNodeContent({ data, selected }: { data: GraphNodeData; selected: b
 
   return (
     <div
-      className={`flex min-w-[120px] items-center gap-2 rounded-xl border px-3 py-2 shadow-md transition ${
+      className={`flex min-w-[120px] items-center gap-2 rounded-xl border px-3 py-2 shadow-md backdrop-blur-sm transition ${
         colors.bg
-      } ${selected ? 'ring-2 ring-indigo-500/50' : ''} ${colors.border}`}
+      } ${selected ? 'ring-2 ring-[var(--color-accent)]/50' : ''} ${colors.border}`}
     >
       {renderIcon()}
       <div className="min-w-0 flex-1">
@@ -48,11 +48,11 @@ function GraphNodeContent({ data, selected }: { data: GraphNodeData; selected: b
           {data.label}
         </div>
         {isAgent && data.modelLabel && (
-          <div className="truncate text-[10px] text-zinc-500">{data.modelLabel}</div>
+          <div className="truncate text-[10px] text-[var(--color-text-muted)]">{data.modelLabel}</div>
         )}
       </div>
       {data.readOnly && (
-        <span className="ml-1 rounded bg-zinc-700/50 px-1 py-0.5 text-[8px] font-medium text-zinc-500">
+        <span className="ml-1 rounded bg-[var(--color-surface-3)]/50 px-1 py-0.5 text-[8px] font-medium text-[var(--color-text-muted)]">
           SYS
         </span>
       )}
@@ -61,8 +61,8 @@ function GraphNodeContent({ data, selected }: { data: GraphNodeData; selected: b
 }
 
 const handleStyles = {
-  system: '!size-2 !border-zinc-600 !bg-zinc-400',
-  agent: '!size-2 !border-indigo-400 !bg-indigo-500',
+  system: '!size-2 !border-[var(--color-border)] !bg-[var(--color-text-secondary)]',
+  agent: '!size-2 !border-[var(--color-accent-sky)] !bg-[var(--color-accent)]',
   hidden: '!size-0 !border-0 !bg-transparent !min-w-0 !min-h-0',
 };
 

src/renderer/components/pattern-graph/PatternGraphCanvas.tsx

@@ -169,7 +169,7 @@ function PatternGraphCanvasInner({
   }, [graph, onGraphChange, fitView]);
 
   return (
-    <div className="h-full w-full rounded-xl border border-zinc-800 bg-zinc-950/50">
+    <div className="h-full w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-0)]/50">
       <ReactFlow
         nodes={nodes.map((n) => ({
           ...n,
@@ -189,18 +189,18 @@ function PatternGraphCanvasInner({
         proOptions={{ hideAttribution: true }}
         defaultEdgeOptions={{
           type: 'default',
-          style: { stroke: '#6366f1', strokeWidth: 1.5 },
-          markerEnd: { type: MarkerType.ArrowClosed, width: 16, height: 16, color: '#6366f1' },
+          style: { stroke: '#245CF9', strokeWidth: 1.5 },
+          markerEnd: { type: MarkerType.ArrowClosed, width: 16, height: 16, color: '#245CF9' },
         }}
-        connectionLineStyle={{ stroke: '#6366f1', strokeWidth: 1.5 }}
+        connectionLineStyle={{ stroke: '#245CF9', strokeWidth: 1.5 }}
         deleteKeyCode="Delete"
       >
-        <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#27272a" />
+        <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#1a1e2e" />
         <Panel position="top-right">
           <button
             type="button"
             onClick={handleAutoLayout}
-            className="flex items-center gap-1.5 rounded-lg border border-zinc-700 bg-zinc-800/90 px-2.5 py-1.5 text-[11px] font-medium text-zinc-300 shadow-sm backdrop-blur transition hover:border-zinc-600 hover:bg-zinc-700/90 hover:text-zinc-100"
+            className="flex items-center gap-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-2)]/90 px-2.5 py-1.5 text-[11px] font-medium text-[var(--color-text-secondary)] shadow-sm backdrop-blur transition hover:border-[var(--color-border-glow)] hover:bg-[var(--color-surface-3)]/90 hover:text-[var(--color-text-primary)]"
             title="Auto-layout nodes"
           >
             <LayoutGrid className="size-3.5" />

src/renderer/components/pattern-graph/PatternGraphInspector.tsx

@@ -44,10 +44,10 @@ function InputField({
   placeholder?: string;
 }) {
   const base =
-    'w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 placeholder-zinc-600 outline-none transition focus:border-indigo-500/50';
+    'w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-1)] px-3 py-2 text-[13px] text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none transition focus:border-[var(--color-accent)]/50';
   return (
     <label className="block space-y-1.5">
-      <span className="text-[12px] font-medium text-zinc-400">{label}</span>
+      <span className="text-[12px] font-medium text-[var(--color-text-secondary)]">{label}</span>
       {multiline ? (
         <textarea
           className={`${base} min-h-20 resize-y`}
@@ -97,17 +97,17 @@ function SystemNodeInspector({ kind }: { kind: PatternGraphNodeKind }) {
   return (
     <div className="space-y-3">
       <div className="flex items-center gap-2.5">
-        <div className="flex size-8 items-center justify-center rounded-lg bg-indigo-500/10">
-          <Icon className="size-4 text-indigo-400" />
+        <div className="flex size-8 items-center justify-center rounded-lg bg-[var(--color-accent)]/10">
+          <Icon className="size-4 text-[var(--color-accent-sky)]" />
         </div>
         <div>
-          <div className="text-[13px] font-semibold text-zinc-200">{kindLabels[kind]}</div>
-          <span className="rounded bg-zinc-700/50 px-1.5 py-0.5 text-[9px] font-medium text-zinc-500">
+          <div className="text-[13px] font-semibold text-[var(--color-text-primary)]">{kindLabels[kind]}</div>
+          <span className="rounded bg-[var(--color-surface-3)]/50 px-1.5 py-0.5 text-[9px] font-medium text-[var(--color-text-muted)]">
             System node
           </span>
         </div>
       </div>
-      <p className="text-[12px] leading-relaxed text-zinc-500">{kindDescriptions[kind]}</p>
+      <p className="text-[12px] leading-relaxed text-[var(--color-text-muted)]">{kindDescriptions[kind]}</p>
     </div>
   );
 }
@@ -140,16 +140,16 @@ function AgentNodeInspector({
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2.5">
-          <div className="flex size-8 items-center justify-center rounded-lg bg-zinc-800">
-            <Bot className="size-4 text-zinc-300" />
+          <div className="flex size-8 items-center justify-center rounded-lg bg-[var(--color-surface-2)]">
+            <Bot className="size-4 text-[var(--color-text-secondary)]" />
           </div>
-          <div className="text-[13px] font-semibold text-zinc-200">{agent.name || 'Unnamed'}</div>
+          <div className="text-[13px] font-semibold text-[var(--color-text-primary)]">{agent.name || 'Unnamed'}</div>
         </div>
         <div className="flex items-center gap-1">
           {showReorder && (
             <>
               <button
-                className="flex size-6 items-center justify-center rounded text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300 disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-zinc-500"
+                className="flex size-6 items-center justify-center rounded text-[var(--color-text-muted)] transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)] disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-[var(--color-text-muted)]"
                 disabled={!canUp}
                 onClick={() => onGraphChange(swapSequentialOrder(graph, nodeId, 'up'))}
                 title="Move earlier in sequence"
@@ -158,7 +158,7 @@ function AgentNodeInspector({
                 <ChevronUp className="size-3.5" />
               </button>
               <button
-                className="flex size-6 items-center justify-center rounded text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300 disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-zinc-500"
+                className="flex size-6 items-center justify-center rounded text-[var(--color-text-muted)] transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)] disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-[var(--color-text-muted)]"
                 disabled={!canDown}
                 onClick={() => onGraphChange(swapSequentialOrder(graph, nodeId, 'down'))}
                 title="Move later in sequence"
@@ -169,7 +169,7 @@ function AgentNodeInspector({
             </>
           )}
           <button
-            className="flex items-center gap-1 text-[12px] text-zinc-600 transition hover:text-red-400"
+            className="flex items-center gap-1 text-[12px] text-[var(--color-text-muted)] transition hover:text-red-400"
             onClick={() => onAgentRemove(agent.id)}
             type="button"
           >
@@ -235,7 +235,7 @@ export function PatternGraphInspector({
   if (!selectedNodeId) {
     return (
       <div className="flex h-full items-center justify-center p-4">
-        <p className="text-center text-[12px] text-zinc-600">
+        <p className="text-center text-[12px] text-[var(--color-text-muted)]">
           Select a node on the graph to inspect it
         </p>
       </div>

src/renderer/components/settings/LspProfileEditor.tsx

@@ -29,7 +29,7 @@ export function LspProfileEditor({
       title={profile.name || 'Untitled LSP Profile'}
     >
       <section className="space-y-4">
-        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
           General
         </h4>
         <div className="grid gap-4 sm:grid-cols-2">
@@ -50,7 +50,7 @@ export function LspProfileEditor({
       </section>
 
       <section className="space-y-4">
-        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
           Server
         </h4>
         <FormField label="Command" required>
@@ -71,7 +71,7 @@ export function LspProfileEditor({
       </section>
 
       <section className="space-y-4">
-        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
           File matching
         </h4>
         <FormField label="File extensions" required>

src/renderer/components/settings/McpServerEditor.tsx

@@ -29,7 +29,7 @@ export function McpServerEditor({
       title={server.name || 'Untitled MCP Server'}
     >
       <section className="space-y-4">
-        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
           General
         </h4>
         <div className="grid gap-4 sm:grid-cols-2">
@@ -54,7 +54,7 @@ export function McpServerEditor({
       </section>
 
       <section className="space-y-4">
-        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
           {server.transport === 'local' ? 'Process' : 'Endpoint'}
         </h4>
         {server.transport === 'local' ? (
@@ -94,7 +94,7 @@ export function McpServerEditor({
       </section>
 
       <section className="space-y-4">
-        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
           Advanced
         </h4>
         <div className="grid gap-4 sm:grid-cols-2">

src/renderer/components/settings/ToolingEditorShell.tsx

@@ -25,21 +25,21 @@ export function ToolingEditorShell({
       <div className="drag-region flex items-center justify-between border-b border-[var(--color-border)] px-5 pb-3 pt-3">
         <div className="flex items-center gap-3">
           <button
-            className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+            className="no-drag flex size-8 items-center justify-center rounded-lg text-[var(--color-text-secondary)] transition-all duration-200 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
             onClick={onBack}
             type="button"
           >
             <ChevronLeft className="size-4" />
           </button>
           <div>
-            <h2 className="text-[13px] font-semibold text-zinc-100">{title}</h2>
-            <p className="text-[12px] text-zinc-500">{subtitle}</p>
+            <h2 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">{title}</h2>
+            <p className="text-[12px] text-[var(--color-text-muted)]">{subtitle}</p>
           </div>
         </div>
         <div className="no-drag flex items-center gap-2">
           {onDelete && (
             <button
-              className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] text-red-400 transition hover:bg-red-500/10"
+              className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] text-[var(--color-status-error)] transition-all duration-200 hover:bg-[var(--color-status-error)]/10"
               onClick={() => void onDelete()}
               type="button"
             >
@@ -48,7 +48,7 @@ export function ToolingEditorShell({
             </button>
           )}
           <button
-            className="rounded-lg bg-indigo-600 px-4 py-1.5 text-[13px] font-medium text-white transition hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
+            className="rounded-lg bg-[var(--color-accent)] px-4 py-1.5 text-[13px] font-medium text-white transition-all duration-200 hover:bg-[var(--color-accent-sky)] disabled:cursor-not-allowed disabled:opacity-40"
             disabled={disableSave}
             onClick={() => void onSave()}
             type="button"
@@ -61,7 +61,7 @@ export function ToolingEditorShell({
       <div className="flex-1 overflow-y-auto px-6 py-5">
         <div className="mx-auto max-w-2xl space-y-8">
           {error && (
-            <div className="flex items-start gap-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[13px] text-amber-300">
+            <div className="flex items-start gap-2 rounded-lg bg-[var(--color-status-warning)]/10 px-3 py-2 text-[13px] text-[var(--color-status-warning)]">
               <AlertCircle className="mt-0.5 size-3.5 shrink-0" />
               {error}
             </div>

src/renderer/components/ui/FormField.tsx

@@ -11,9 +11,9 @@ export function FormField({
 }) {
   return (
     <label className="block">
-      <span className="mb-1.5 block text-[12px] font-medium text-zinc-400">
+      <span className="mb-1.5 block text-[12px] font-medium text-[var(--color-text-secondary)]">
         {label}
-        {required && <span className="ml-1 text-amber-400">*</span>}
+        {required && <span className="ml-1 text-[var(--color-status-warning)]">*</span>}
       </span>
       {children}
     </label>

src/renderer/components/ui/InfoCallout.tsx

@@ -3,8 +3,8 @@ import type { ReactNode } from 'react';
 
 export function InfoCallout({ children }: { children: ReactNode }) {
   return (
-    <div className="flex items-start gap-2.5 rounded-lg border border-zinc-800 bg-zinc-900/30 px-3 py-2.5 text-[12px] leading-relaxed text-zinc-500">
-      <Info className="mt-0.5 size-3.5 shrink-0 text-zinc-600" />
+    <div className="flex items-start gap-2.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-glass)] px-3 py-2.5 text-[12px] leading-relaxed text-[var(--color-text-secondary)] backdrop-blur-sm">
+      <Info className="mt-0.5 size-3.5 shrink-0 text-[var(--color-accent)]" />
       <span>{children}</span>
     </div>
   );

src/renderer/components/ui/PopoverToggleRow.tsx

@@ -10,13 +10,13 @@ export interface PopoverToggleRowProps {
 export function PopoverToggleRow({ label, detail, enabled, onToggle }: PopoverToggleRowProps) {
   return (
     <button
-      className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition hover:bg-zinc-800"
+      className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition-all duration-150 hover:bg-[var(--color-surface-2)]"
       onClick={onToggle}
       type="button"
     >
       <div className="min-w-0 flex-1">
-        <div className="truncate text-[12px] font-medium text-zinc-300">{label}</div>
-        {detail && <div className="truncate text-[10px] text-zinc-600">{detail}</div>}
+        <div className="truncate text-[12px] font-medium text-[var(--color-text-primary)]">{label}</div>
+        {detail && <div className="truncate text-[10px] text-[var(--color-text-muted)]">{detail}</div>}
       </div>
       <ToggleSwitch enabled={enabled} size="sm" />
     </button>

src/renderer/components/ui/SelectInput.tsx

@@ -9,7 +9,7 @@ export function SelectInput({
 }) {
   return (
     <select
-      className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition focus:border-indigo-500/50"
+      className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-2)] px-3 py-2 text-[13px] text-[var(--color-text-primary)] outline-none transition-all duration-200 focus:border-[var(--color-border-glow)] focus:shadow-[0_0_0_1px_rgba(36,92,249,0.15),0_0_12px_rgba(36,92,249,0.08)]"
       onChange={(event) => onChange(event.target.value)}
       value={value}
     >

src/renderer/components/ui/TextInput.tsx

@@ -13,7 +13,7 @@ export function TextInput({
 }) {
   return (
     <input
-      className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition placeholder:text-zinc-600 focus:border-indigo-500/50"
+      className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-2)] px-3 py-2 text-[13px] text-[var(--color-text-primary)] outline-none transition-all duration-200 placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-border-glow)] focus:shadow-[0_0_0_1px_rgba(36,92,249,0.15),0_0_12px_rgba(36,92,249,0.08)]"
       inputMode={inputMode}
       onChange={(event) => onChange(event.target.value)}
       placeholder={placeholder}

src/renderer/components/ui/TextareaInput.tsx

@@ -11,7 +11,7 @@ export function TextareaInput({
 }) {
   return (
     <textarea
-      className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition placeholder:text-zinc-600 focus:border-indigo-500/50"
+      className="w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-2)] px-3 py-2 text-[13px] text-[var(--color-text-primary)] outline-none transition-all duration-200 placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-border-glow)] focus:shadow-[0_0_0_1px_rgba(36,92,249,0.15),0_0_12px_rgba(36,92,249,0.08)]"
       onChange={(event) => onChange(event.target.value)}
       placeholder={placeholder}
       rows={rows}

src/renderer/components/ui/ToggleSwitch.tsx

@@ -10,8 +10,8 @@ export function ToggleSwitch({ enabled, size = 'md' }: ToggleSwitchProps) {
 
   return (
     <span
-      className={`relative inline-flex ${trackSize} shrink-0 items-center rounded-full transition-colors ${
-        enabled ? 'bg-indigo-500' : 'bg-zinc-700'
+      className={`relative inline-flex ${trackSize} shrink-0 items-center rounded-full transition-all duration-200 ${
+        enabled ? 'brand-gradient-bg shadow-[0_0_8px_rgba(36,92,249,0.3)]' : 'bg-[var(--color-surface-3)]'
       }`}
     >
       <span

src/renderer/index.html

@@ -8,7 +8,7 @@
     />
     <title>aryx</title>
   </head>
-  <body class="bg-slate-950 text-slate-100">
+  <body class="bg-[var(--color-surface-0)] text-[var(--color-text-primary)]">
     <div id="root"></div>
     <script
       type="module"

src/renderer/lib/keyboardShortcuts.ts

@@ -0,0 +1,46 @@
+const isMac = navigator.platform.startsWith('Mac');
+
+/** Platform-aware modifier key label. */
+export const MOD = isMac ? '⌘' : 'Ctrl';
+
+export interface ShortcutDefinition {
+  id: string;
+  /** Human-readable label for the shortcut cheat sheet. */
+  label: string;
+  /** Display string for the keybinding. */
+  keys: string;
+  /** Grouping category. */
+  category: 'Navigation' | 'Sessions' | 'Workspace' | 'General';
+}
+
+/** Canonical shortcut registry used for the cheat sheet and command palette badges. */
+export const shortcuts: ShortcutDefinition[] = [
+  // ── Navigation ──
+  { id: 'command-palette',  label: 'Command palette',      keys: `${MOD}+K`,           category: 'Navigation' },
+  { id: 'search-sessions',  label: 'Search sessions',      keys: `${MOD}+Shift+F`,     category: 'Navigation' },
+  { id: 'settings',         label: 'Open settings',        keys: `${MOD}+,`,           category: 'Navigation' },
+  { id: 'toggle-terminal',  label: 'Toggle terminal',      keys: 'Ctrl+`',             category: 'Navigation' },
+  { id: 'shortcut-help',    label: 'Keyboard shortcuts',   keys: `${MOD}+/`,           category: 'Navigation' },
+
+  // ── Sessions ──
+  { id: 'new-session',      label: 'New session',          keys: `${MOD}+N`,           category: 'Sessions' },
+  { id: 'close-session',    label: 'Close / archive',      keys: `${MOD}+W`,           category: 'Sessions' },
+  { id: 'next-session',     label: 'Next session',         keys: 'Ctrl+Tab',           category: 'Sessions' },
+  { id: 'prev-session',     label: 'Previous session',     keys: 'Ctrl+Shift+Tab',     category: 'Sessions' },
+
+  // ── Workspace ──
+  { id: 'quick-approve',    label: 'Quick approve',        keys: `${MOD}+.`,           category: 'Workspace' },
+  { id: 'cancel-turn',      label: 'Cancel running turn',  keys: 'Escape',             category: 'Workspace' },
+  { id: 'focus-composer',   label: 'Focus composer',       keys: `${MOD}+L`,           category: 'Workspace' },
+
+  // ── General ──
+  { id: 'close-overlay',    label: 'Close overlay',        keys: 'Escape',             category: 'General' },
+];
+
+/**
+ * Look up the display-string for a shortcut by its id.
+ * Returns `undefined` if not found.
+ */
+export function shortcutKeys(id: string): string | undefined {
+  return shortcuts.find((s) => s.id === id)?.keys;
+}

src/renderer/main.tsx

@@ -1,6 +1,10 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
+import '@fontsource-variable/outfit';
+import '@fontsource-variable/dm-sans';
+import '@fontsource-variable/jetbrains-mono';
+
 import App from '@renderer/App';
 import '@renderer/styles.css';
 

src/renderer/styles.css

@@ -1,79 +1,133 @@
 @import "tailwindcss";
 
+/* ── Design tokens: "Luminous Depth" ────────────────────────── */
+
 @theme {
-  --color-surface-0: #09090b;
-  --color-surface-1: #18181b;
-  --color-surface-2: #27272a;
-  --color-surface-3: #3f3f46;
-  --color-border: #27272a;
-  --color-border-subtle: #1e1e22;
-  --color-accent: #6366f1;
-  --color-accent-hover: #818cf8;
-  --color-accent-muted: rgba(99, 102, 241, 0.15);
+  /* Surface palette — blue-tinted darks */
+  --color-surface-0: #07080e;
+  --color-surface-1: #0e1019;
+  --color-surface-2: #161924;
+  --color-surface-3: #1e2233;
+  --color-surface-4: #272b3d;
+  --color-border: #1a1e2e;
+  --color-border-subtle: #121520;
+
+  /* Brand accents — derived from logo */
+  --color-accent: #245CF9;
+  --color-accent-hover: #4b7bfa;
+  --color-accent-muted: rgba(36, 92, 249, 0.12);
+  --color-accent-sky: #248CFD;
+  --color-accent-indigo: #0E13A4;
+  --color-accent-purple: #8A29E6;
+  --color-accent-royal: #5A20E0;
+  --color-accent-violet: #3615CF;
+
+  /* Text palette */
+  --color-text-primary: #e8eaf0;
+  --color-text-secondary: #8b90a5;
+  --color-text-muted: #4e5368;
+  --color-text-accent: #7ba1fc;
+
+  /* Status palette */
+  --color-status-success: #34d399;
+  --color-status-warning: #fbbf24;
+  --color-status-error: #f87171;
+  --color-status-info: #248CFD;
+
+  /* Glow / glass effects */
+  --color-border-glow: rgba(36, 92, 249, 0.25);
+  --color-glass: rgba(14, 16, 25, 0.7);
+  --color-glass-hover: rgba(22, 25, 36, 0.8);
+  --color-glass-border: rgba(26, 30, 46, 0.6);
+
+  /* Pill text */
   --text-pill: 0.6875rem;
   --text-pill--line-height: 1.2;
 }
 
 :root {
   color-scheme: dark;
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
+  font-family: "DM Sans Variable", "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  --font-display: "Outfit Variable", "Outfit", ui-sans-serif, system-ui, sans-serif;
+  --font-body: "DM Sans Variable", "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+
+  /* Gradient presets */
+  --gradient-brand: linear-gradient(135deg, #245CF9, #8A29E6);
+  --gradient-brand-hover: linear-gradient(135deg, #4b7bfa, #a04ff0);
+  --gradient-surface: linear-gradient(180deg, #0e1019, #07080e);
+  --gradient-glow: radial-gradient(ellipse at center, rgba(36, 92, 249, 0.06), transparent 70%);
+  --gradient-border: linear-gradient(135deg, #245CF9, #3615CF);
 }
 
-/* ── Light mode colour overrides ────────────────────────────── */
+/* ── Light mode overrides ────────────────────────────────────── */
 
 [data-theme="light"] {
   color-scheme: light;
 
-  /* Remap semantic surface tokens */
-  --color-surface-0: #ffffff;
-  --color-surface-1: #f4f4f5;
-  --color-surface-2: #e4e4e7;
-  --color-surface-3: #d4d4d8;
-  --color-border: #e4e4e7;
-  --color-border-subtle: #f0f0f2;
-  --color-accent-muted: rgba(99, 102, 241, 0.10);
+  /* Surfaces — cool-tinted whites */
+  --color-surface-0: #f8f9fc;
+  --color-surface-1: #f0f1f6;
+  --color-surface-2: #e6e8f0;
+  --color-surface-3: #d8dbe6;
+  --color-surface-4: #c8cdd9;
+  --color-border: #dfe1ea;
+  --color-border-subtle: #eeeff4;
 
-  /* Swap zinc scale: dark values become light equivalents.
-     Tailwind v4 exposes these as --color-zinc-{step}. */
-  --color-zinc-50: #18181b;
-  --color-zinc-100: #27272a;
-  --color-zinc-200: #3f3f46;
-  --color-zinc-300: #52525b;
-  --color-zinc-400: #71717a;
-  --color-zinc-500: #71717a;
-  --color-zinc-600: #a1a1aa;
-  --color-zinc-700: #d4d4d8;
-  --color-zinc-800: #e4e4e7;
-  --color-zinc-900: #f4f4f5;
-  --color-zinc-950: #ffffff;
+  /* Text — deep blue-blacks */
+  --color-text-primary: #0f1729;
+  --color-text-secondary: #5a6078;
+  --color-text-muted: #9298ad;
+  --color-text-accent: #245CF9;
+
+  /* Glass — light translucency */
+  --color-glass: rgba(240, 241, 246, 0.75);
+  --color-glass-hover: rgba(230, 232, 240, 0.8);
+  --color-glass-border: rgba(223, 225, 234, 0.6);
+  --color-border-glow: rgba(36, 92, 249, 0.2);
+  --color-accent-muted: rgba(36, 92, 249, 0.08);
+
+  /* Gradients — lighter versions */
+  --gradient-glow: radial-gradient(ellipse at center, rgba(36, 92, 249, 0.04), transparent 70%);
+  --gradient-surface: linear-gradient(180deg, #f0f1f6, #f8f9fc);
+
+  /* Remap Tailwind zinc scale for light mode */
+  --color-zinc-50: #0f1729;
+  --color-zinc-100: #1e2233;
+  --color-zinc-200: #3a3f54;
+  --color-zinc-300: #5a6078;
+  --color-zinc-400: #7a7f94;
+  --color-zinc-500: #8b90a5;
+  --color-zinc-600: #9298ad;
+  --color-zinc-700: #c8cdd9;
+  --color-zinc-800: #dfe1ea;
+  --color-zinc-900: #f0f1f6;
+  --color-zinc-950: #f8f9fc;
 
-  /* Keep black/white correct for light mode */
   --color-black: #000000;
   --color-white: #ffffff;
 }
 
+/* ── Global base styles ──────────────────────────────────────── */
+
 body {
   margin: 0;
   min-height: 100vh;
   background: var(--color-surface-0);
+  color: var(--color-text-primary);
 }
 
 #root {
   min-height: 100vh;
 }
 
-/* Scrollbar styling */
+/* ── Scrollbar ───────────────────────────────────────────────── */
+
 ::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
 }
 
 ::-webkit-scrollbar-track {
@@ -86,14 +140,11 @@ body {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-hover, #52525b);
+  background: var(--color-surface-4);
 }
 
-[data-theme="light"] {
-  --scrollbar-hover: #a1a1aa;
-}
+/* ── Window drag regions ─────────────────────────────────────── */
 
-/* Window drag regions for custom title bar */
 .drag-region {
   -webkit-app-region: drag;
 }
@@ -102,22 +153,58 @@ body {
   -webkit-app-region: no-drag;
 }
 
-/* Thinking dots animation */
+/* ── Utility classes ─────────────────────────────────────────── */
+
+.glass-surface {
+  background: var(--color-glass);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--color-glass-border);
+}
+
+.glow-border {
+  border: 1px solid var(--color-border-glow);
+  box-shadow: 0 0 12px rgba(36, 92, 249, 0.08), inset 0 0 12px rgba(36, 92, 249, 0.04);
+}
+
+.brand-gradient-text {
+  background: var(--gradient-brand);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.brand-gradient-bg {
+  background: var(--gradient-brand);
+}
+
+.brand-gradient-bg:hover {
+  background: var(--gradient-brand-hover);
+}
+
+.font-display {
+  font-family: var(--font-display);
+}
+
+.font-mono {
+  font-family: var(--font-mono);
+}
+
+/* ── Thinking dots animation ─────────────────────────────────── */
+
 @keyframes thinking-dot {
-  0%,
-  60%,
-  100% {
-    opacity: 0.3;
+  0%, 80%, 100% {
+    opacity: 0.25;
     transform: scale(0.8);
   }
-  30% {
+  40% {
     opacity: 1;
-    transform: scale(1);
+    transform: scale(1.1);
   }
 }
 
 .thinking-dot {
-  animation: thinking-dot 1.4s ease-in-out infinite;
+  animation: thinking-dot 1.6s ease-in-out infinite;
 }
 
 .thinking-dot:nth-child(2) {
@@ -128,14 +215,38 @@ body {
   animation-delay: 0.4s;
 }
 
-/* Auto-resize textarea helper */
+/* Flowing gradient wave for thinking state */
+@keyframes thinking-wave {
+  0% {
+    background-position: 200% center;
+  }
+  100% {
+    background-position: -200% center;
+  }
+}
+
+.thinking-wave {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(36, 92, 249, 0.3) 25%,
+    rgba(138, 41, 230, 0.3) 50%,
+    rgba(36, 140, 253, 0.3) 75%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: thinking-wave 3s ease-in-out infinite;
+}
+
+/* ── Auto-resize textarea ────────────────────────────────────── */
+
 .auto-resize-textarea {
   field-sizing: content;
   min-height: 44px;
   max-height: 200px;
 }
 
-/* ── Markdown composer (Lexical) ────────────────────────── */
+/* ── Markdown composer (Lexical) ─────────────────────────────── */
 
 .markdown-composer-content {
   position: relative;
@@ -146,9 +257,9 @@ body {
   max-height: 200px;
   overflow-y: auto;
   padding: 10px 16px 4px 16px;
-  font-size: 14px;
+  font-size: 13.5px;
   line-height: 1.6;
-  color: #f4f4f5;
+  color: var(--color-text-primary);
   outline: none;
   cursor: text;
 }
@@ -162,9 +273,9 @@ body {
   position: absolute;
   top: 10px;
   left: 16px;
-  font-size: 14px;
+  font-size: 13.5px;
   line-height: 1.6;
-  color: #52525b;
+  color: var(--color-text-muted);
   pointer-events: none;
   user-select: none;
 }
@@ -176,6 +287,7 @@ body {
 
 /* Headings */
 .mc-h1, .mc-h2, .mc-h3 {
+  font-family: var(--font-display);
   font-weight: 600;
   margin: 0;
   line-height: 1.4;
@@ -190,11 +302,11 @@ body {
 .mc-strikethrough { text-decoration: line-through; }
 .mc-underline { text-decoration: underline; }
 .mc-inline-code {
-  background: rgba(63, 63, 70, 0.6);
-  border-radius: 3px;
-  padding: 1px 4px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
-  font-size: 0.9em;
+  background: rgba(30, 34, 51, 0.7);
+  border-radius: 4px;
+  padding: 1px 5px;
+  font-family: var(--font-mono);
+  font-size: 0.88em;
 }
 
 /* Lists */
@@ -214,28 +326,28 @@ body {
 
 /* Blockquote */
 .mc-blockquote {
-  border-left: 3px solid #3f3f46;
+  border-left: 3px solid var(--color-surface-4);
   padding-left: 0.75em;
-  color: #a1a1aa;
+  color: var(--color-text-secondary);
   margin: 2px 0;
 }
 
 /* Code block */
 .mc-code-block {
   display: block;
-  background: rgba(24, 24, 27, 0.8);
-  border: 1px solid #27272a;
-  border-radius: 6px;
-  padding: 26px 10px 6px 10px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
-  font-size: 0.9em;
+  background: rgba(7, 8, 14, 0.8);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 26px 12px 8px 12px;
+  font-family: var(--font-mono);
+  font-size: 0.88em;
   white-space: pre-wrap;
   tab-size: 2;
   margin: 4px 0;
   overflow-x: auto;
 }
 
-/* Language selector overlays positioned outside Lexical-managed DOM */
+/* Language selector overlays */
 .mc-code-overlays-container {
   position: absolute;
   top: 0;
@@ -256,74 +368,76 @@ body {
 .mc-code-lang-select {
   appearance: none;
   -webkit-appearance: none;
-  background: rgba(39, 39, 42, 0.9);
-  border: 1px solid #3f3f46;
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
   border-radius: 4px;
-  color: #a1a1aa;
+  color: var(--color-text-secondary);
   font-family: inherit;
   font-size: 10px;
   padding: 2px 18px 2px 6px;
   outline: none;
   cursor: pointer;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b90a5' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 3px center;
   background-size: 10px;
 }
 
 .mc-code-lang-select:hover {
-  border-color: #52525b;
-  color: #d4d4d8;
+  border-color: var(--color-surface-4);
+  color: var(--color-text-primary);
 }
 
 .mc-code-lang-select:focus {
-  border-color: rgba(99, 102, 241, 0.5);
+  border-color: var(--color-border-glow);
 }
 
 /* Link */
 .mc-link {
-  color: #818cf8;
+  color: var(--color-text-accent);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
 
-/* Syntax highlighting tokens (dark theme) */
-.mc-tok-comment   { color: #6b7280; font-style: italic; }
-.mc-tok-keyword   { color: #c084fc; }
-.mc-tok-string    { color: #86efac; }
-.mc-tok-number    { color: #fbbf24; }
-.mc-tok-boolean   { color: #fbbf24; }
-.mc-tok-constant  { color: #fbbf24; }
-.mc-tok-function  { color: #93c5fd; }
-.mc-tok-builtin   { color: #67e8f9; }
-.mc-tok-operator  { color: #f9a8d4; }
-.mc-tok-punctuation { color: #a1a1aa; }
-.mc-tok-property  { color: #7dd3fc; }
-.mc-tok-variable  { color: #fca5a5; }
-.mc-tok-tag       { color: #f87171; }
-.mc-tok-attr      { color: #fdba74; }
-.mc-tok-atrule    { color: #c084fc; }
-.mc-tok-selector  { color: #86efac; }
-.mc-tok-regex     { color: #fcd34d; }
-.mc-tok-symbol    { color: #fbbf24; }
-.mc-tok-namespace { color: #f87171; opacity: 0.8; }
-.mc-tok-deleted   { color: #fca5a5; text-decoration: line-through; }
-.mc-tok-inserted  { color: #86efac; }
+/* ── Syntax highlighting tokens ──────────────────────────────── */
+
+.mc-tok-comment   { color: #5a6078; font-style: italic; }
+.mc-tok-keyword   { color: #b07ef5; }
+.mc-tok-string    { color: #6ee7b7; }
+.mc-tok-number    { color: #f9c846; }
+.mc-tok-boolean   { color: #f9c846; }
+.mc-tok-constant  { color: #f9c846; }
+.mc-tok-function  { color: #7ba1fc; }
+.mc-tok-builtin   { color: #5ccbee; }
+.mc-tok-operator  { color: #e8a0c8; }
+.mc-tok-punctuation { color: #8b90a5; }
+.mc-tok-property  { color: #65b8f7; }
+.mc-tok-variable  { color: #f5a0a0; }
+.mc-tok-tag       { color: #f07070; }
+.mc-tok-attr      { color: #f0b070; }
+.mc-tok-atrule    { color: #b07ef5; }
+.mc-tok-selector  { color: #6ee7b7; }
+.mc-tok-regex     { color: #f0d860; }
+.mc-tok-symbol    { color: #f9c846; }
+.mc-tok-namespace { color: #f07070; opacity: 0.8; }
+.mc-tok-deleted   { color: #f5a0a0; text-decoration: line-through; }
+.mc-tok-inserted  { color: #6ee7b7; }
+
+/* ── React Flow overrides ────────────────────────────────────── */
 
-/* React Flow dark theme overrides */
 .react-flow__node {
   font-family: inherit;
 }
 
 .react-flow__edge-path {
-  stroke: #52525b;
+  stroke: var(--color-surface-4);
   stroke-width: 1.5;
 }
 
 .react-flow__edge.selected .react-flow__edge-path {
-  stroke: #818cf8;
+  stroke: #245CF9;
   stroke-width: 2.5;
-  filter: drop-shadow(0 0 4px rgba(129, 140, 248, 0.4));
+  filter: drop-shadow(0 0 6px rgba(36, 92, 249, 0.4));
 }
 
 .react-flow__edge.animated .react-flow__edge-path {
@@ -338,32 +452,33 @@ body {
 }
 
 .react-flow__controls {
-  border: 1px solid #27272a;
-  background: #18181b;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-1);
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 }
 
 .react-flow__controls button {
-  background: #18181b;
-  border-color: #27272a;
-  color: #a1a1aa;
+  background: var(--color-surface-1);
+  border-color: var(--color-border);
+  color: var(--color-text-secondary);
   width: 28px;
   height: 28px;
 }
 
 .react-flow__controls button:hover {
-  background: #27272a;
-  color: #e4e4e7;
+  background: var(--color-surface-2);
+  color: var(--color-text-primary);
 }
 
 .react-flow__minimap {
-  background: #09090b;
-  border: 1px solid #27272a;
-  border-radius: 8px;
+  background: var(--color-surface-0);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
 }
 
-/* Sidebar running-session pulse animation */
+/* ── Sidebar running-session pulse ───────────────────────────── */
+
 @keyframes sidebar-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.4; }
@@ -373,7 +488,162 @@ body {
   animation: sidebar-pulse 2s ease-in-out infinite;
 }
 
-/* Markdown prose styles for chat messages */
+/* Flowing accent bar for running sessions */
+@keyframes accent-flow {
+  0% { background-position: 0% 0%; }
+  100% { background-position: 0% 200%; }
+}
+
+.accent-flow {
+  background: linear-gradient(
+    180deg,
+    #245CF9 0%,
+    #8A29E6 50%,
+    #245CF9 100%
+  );
+  background-size: 100% 200%;
+  animation: accent-flow 3s ease-in-out infinite;
+}
+
+/* ── Ambient glow effect ─────────────────────────────────────── */
+
+@keyframes ambient-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.7; }
+}
+
+.ambient-glow {
+  position: absolute;
+  pointer-events: none;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.4;
+  animation: ambient-pulse 6s ease-in-out infinite;
+}
+
+/* ── Command palette ──────────────────────────────────────────── */
+
+@keyframes palette-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.98);
+  }
+}
+
+.palette-enter {
+  animation: palette-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes palette-backdrop-enter {
+  from { opacity: 0; }
+}
+
+.palette-backdrop-enter {
+  animation: palette-backdrop-enter 0.15s ease-out;
+}
+
+/* ── Overlay transitions ─────────────────────────────────────── */
+
+@keyframes overlay-backdrop-in {
+  from { opacity: 0; }
+}
+
+@keyframes overlay-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.99);
+  }
+}
+
+@keyframes overlay-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+}
+
+.overlay-backdrop-enter {
+  animation: overlay-backdrop-in 0.18s ease-out;
+}
+
+.overlay-panel-enter {
+  animation: overlay-panel-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.overlay-slide-enter {
+  animation: overlay-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ── Chat message appearance ─────────────────────────────────── */
+
+@keyframes message-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+.message-enter {
+  animation: message-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+/* ── Message action toolbar ──────────────────────────────────── */
+
+@keyframes msg-actions-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px) scale(0.96);
+  }
+}
+
+.msg-actions-enter {
+  animation: msg-actions-in 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+/* ── Sidebar session item ────────────────────────────────────── */
+
+@keyframes session-item-in {
+  from {
+    opacity: 0;
+    transform: translateX(-6px);
+  }
+}
+
+.session-item-enter {
+  animation: session-item-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+/* ── Approval banner slide ───────────────────────────────────── */
+
+@keyframes banner-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+.banner-slide-enter {
+  animation: banner-slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ── Respect reduced motion ──────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .palette-enter,
+  .palette-backdrop-enter,
+  .overlay-backdrop-enter,
+  .overlay-panel-enter,
+  .overlay-slide-enter,
+  .message-enter,
+  .msg-actions-enter,
+  .session-item-enter,
+  .banner-slide-enter {
+    animation: none;
+  }
+}
+
+/* ── Markdown prose styles ───────────────────────────────────── */
+
 .markdown-content {
   line-height: 1.7;
   word-break: break-word;
@@ -393,11 +663,12 @@ body {
 .markdown-content h4,
 .markdown-content h5,
 .markdown-content h6 {
+  font-family: var(--font-display);
   font-weight: 600;
-  color: var(--color-zinc-200);
+  color: var(--color-text-primary);
   margin-top: 1.25em;
   margin-bottom: 0.5em;
-  line-height: 1.4;
+  line-height: 1.35;
 }
 
 .markdown-content h1 { font-size: 1.125rem; }
@@ -430,9 +701,9 @@ body {
 }
 
 .markdown-content blockquote {
-  border-left: 3px solid var(--color-surface-3);
+  border-left: 3px solid var(--color-surface-4);
   padding-left: 1em;
-  color: var(--color-zinc-400);
+  color: var(--color-text-secondary);
   margin-top: 0.75em;
   margin-bottom: 0.75em;
 }
@@ -455,7 +726,7 @@ body {
 .markdown-content th {
   background: var(--color-surface-1);
   font-weight: 600;
-  color: var(--color-zinc-300);
+  color: var(--color-text-primary);
 }
 
 .markdown-content hr {
@@ -466,7 +737,7 @@ body {
 
 .markdown-content strong {
   font-weight: 600;
-  color: var(--color-zinc-200);
+  color: var(--color-text-primary);
 }
 
 .markdown-content em {

src/shared/contracts/channels.ts

@@ -15,6 +15,10 @@ export const ipcChannels = {
   setPatternFavorite: 'patterns:set-favorite',
   setTheme: 'settings:set-theme',
   setTerminalHeight: 'settings:set-terminal-height',
+  setNotificationsEnabled: 'settings:set-notifications-enabled',
+  setMinimizeToTray: 'settings:set-minimize-to-tray',
+  checkForUpdates: 'app:check-for-updates',
+  installUpdate: 'app:install-update',
   saveMcpServer: 'tooling:mcp:save',
   deleteMcpServer: 'tooling:mcp:delete',
   saveLspProfile: 'tooling:lsp:save',
@@ -29,10 +33,14 @@ export const ipcChannels = {
   updateSessionApprovalSettings: 'sessions:update-approval-settings',
   createSession: 'sessions:create',
   duplicateSession: 'sessions:duplicate',
+  branchSession: 'sessions:branch',
+  setSessionMessagePinned: 'sessions:set-message-pinned',
   renameSession: 'sessions:rename',
   setSessionPinned: 'sessions:set-pinned',
   setSessionArchived: 'sessions:set-archived',
   deleteSession: 'sessions:delete',
+  regenerateSessionMessage: 'sessions:regenerate-message',
+  editAndResendSessionMessage: 'sessions:edit-and-resend-message',
   sendSessionMessage: 'sessions:send-message',
   cancelSessionTurn: 'sessions:cancel-turn',
   resolveSessionApproval: 'sessions:resolve-approval',
@@ -52,5 +60,7 @@ export const ipcChannels = {
   terminalExit: 'terminal:exit',
   workspaceUpdated: 'workspace:updated',
   sessionEvent: 'sessions:event',
+  updateStatus: 'app:update-status',
   getQuota: 'sidecar:get-quota',
+  trayCreateScratchpad: 'tray:create-scratchpad',
 } as const;

src/shared/contracts/ipc.ts

@@ -58,6 +58,29 @@ export interface DuplicateSessionInput {
   sessionId: string;
 }
 
+export interface BranchSessionInput {
+  sessionId: string;
+  messageId: string;
+}
+
+export interface SetSessionMessagePinnedInput {
+  sessionId: string;
+  messageId: string;
+  isPinned: boolean;
+}
+
+export interface RegenerateSessionMessageInput {
+  sessionId: string;
+  messageId: string;
+}
+
+export interface EditAndResendSessionMessageInput {
+  sessionId: string;
+  messageId: string;
+  content: string;
+  attachments?: ChatMessageAttachment[];
+}
+
 export interface RenameSessionInput {
   sessionId: string;
   title: string;
@@ -152,6 +175,24 @@ export interface SetTerminalHeightInput {
   height?: number;
 }
 
+export type UpdateStatusState = 'idle' | 'checking' | 'available' | 'downloading' | 'downloaded' | 'error';
+
+export interface UpdateDownloadProgress {
+  bytesPerSecond: number;
+  percent: number;
+  total: number;
+  transferred: number;
+}
+
+export interface UpdateStatus {
+  state: UpdateStatusState;
+  version?: string;
+  releaseDate?: string;
+  releaseNotes?: string;
+  downloadProgress?: UpdateDownloadProgress;
+  error?: string;
+}
+
 export interface ElectronApi {
   describeSidecarCapabilities(): Promise<SidecarCapabilities>;
   refreshSidecarCapabilities(): Promise<SidecarCapabilities>;
@@ -174,10 +215,14 @@ export interface ElectronApi {
   updateSessionApprovalSettings(input: UpdateSessionApprovalSettingsInput): Promise<WorkspaceState>;
   createSession(input: CreateSessionInput): Promise<WorkspaceState>;
   duplicateSession(input: DuplicateSessionInput): Promise<WorkspaceState>;
+  branchSession(input: BranchSessionInput): Promise<WorkspaceState>;
+  setSessionMessagePinned(input: SetSessionMessagePinnedInput): Promise<WorkspaceState>;
   renameSession(input: RenameSessionInput): Promise<WorkspaceState>;
   setSessionPinned(input: SetSessionPinnedInput): Promise<WorkspaceState>;
   setSessionArchived(input: SetSessionArchivedInput): Promise<WorkspaceState>;
   deleteSession(input: DeleteSessionInput): Promise<WorkspaceState>;
+  regenerateSessionMessage(input: RegenerateSessionMessageInput): Promise<void>;
+  editAndResendSessionMessage(input: EditAndResendSessionMessageInput): Promise<void>;
   sendSessionMessage(input: SendSessionMessageInput): Promise<void>;
   cancelSessionTurn(input: CancelSessionTurnInput): Promise<void>;
   resolveSessionApproval(input: ResolveSessionApprovalInput): Promise<WorkspaceState>;
@@ -194,6 +239,10 @@ export interface ElectronApi {
   setPatternFavorite(input: SetPatternFavoriteInput): Promise<WorkspaceState>;
   setTheme(theme: AppearanceTheme): Promise<WorkspaceState>;
   setTerminalHeight(input: SetTerminalHeightInput): Promise<WorkspaceState>;
+  setNotificationsEnabled(enabled: boolean): Promise<WorkspaceState>;
+  setMinimizeToTray(enabled: boolean): Promise<WorkspaceState>;
+  checkForUpdates(): Promise<UpdateStatus>;
+  installUpdate(): Promise<void>;
   describeTerminal(): Promise<TerminalSnapshot | undefined>;
   createTerminal(): Promise<TerminalSnapshot>;
   restartTerminal(): Promise<TerminalSnapshot>;
@@ -207,6 +256,8 @@ export interface ElectronApi {
   onTerminalExit(listener: (info: TerminalExitInfo) => void): () => void;
   onWorkspaceUpdated(listener: (workspace: WorkspaceState) => void): () => void;
   onSessionEvent(listener: (event: SessionEventRecord) => void): () => void;
+  onUpdateStatus(listener: (status: UpdateStatus) => void): () => void;
+  onTrayCreateScratchpad(listener: () => void): () => void;
 }
 
 export interface RendererSelectionState {

src/shared/contracts/sidecar.ts

@@ -241,6 +241,12 @@ export interface TurnCompleteEvent {
 
 export type AgentActivityType = 'thinking' | 'tool-calling' | 'handoff' | 'completed';
 
+export interface ToolCallFileChangePreview {
+  path: string;
+  diff?: string;
+  newFileContents?: string;
+}
+
 export interface AgentActivityEvent {
   type: 'agent-activity';
   requestId: string;
@@ -251,6 +257,8 @@ export interface AgentActivityEvent {
   sourceAgentId?: string;
   sourceAgentName?: string;
   toolName?: string;
+  toolCallId?: string;
+  fileChanges?: ToolCallFileChangePreview[];
 }
 
 export type SubagentEventKind = 'started' | 'completed' | 'failed' | 'selected' | 'deselected';

src/shared/domain/event.ts

@@ -1,6 +1,6 @@
 import type { SessionRunRecord } from '@shared/domain/runTimeline';
 
-import type { QuotaSnapshot } from '@shared/contracts/sidecar';
+import type { QuotaSnapshot, ToolCallFileChangePreview } from '@shared/contracts/sidecar';
 
 export type SessionActivityType = 'thinking' | 'tool-calling' | 'handoff' | 'completed';
 
@@ -36,6 +36,8 @@ export interface SessionEventRecord {
   sourceAgentId?: string;
   sourceAgentName?: string;
   toolName?: string;
+  toolCallId?: string;
+  fileChanges?: ToolCallFileChangePreview[];
   run?: SessionRunRecord;
   error?: string;
 

src/shared/domain/runTimeline.ts

@@ -3,6 +3,7 @@ import type {
   ApprovalDecision,
   PendingApprovalRecord,
 } from '@shared/domain/approval';
+import type { ToolCallFileChangePreview } from '@shared/contracts/sidecar';
 import type { PatternDefinition, ReasoningEffort } from '@shared/domain/pattern';
 import type { ProjectRecord } from '@shared/domain/project';
 import { createId } from '@shared/utils/ids';
@@ -41,6 +42,8 @@ export interface RunTimelineEventRecord {
   targetAgentId?: string;
   targetAgentName?: string;
   toolName?: string;
+  toolCallId?: string;
+  fileChanges?: ToolCallFileChangePreview[];
   approvalId?: string;
   approvalKind?: ApprovalCheckpointKind;
   approvalTitle?: string;
@@ -86,6 +89,8 @@ export interface AppendRunActivityEventInput {
   sourceAgentId?: string;
   sourceAgentName?: string;
   toolName?: string;
+  toolCallId?: string;
+  fileChanges?: ToolCallFileChangePreview[];
 }
 
 export interface UpsertRunMessageEventInput {
@@ -113,6 +118,87 @@ function normalizeOptionalString(value: string | undefined): string | undefined
   return trimmed ? trimmed : undefined;
 }
 
+function normalizeOptionalPreviewText(value: string | undefined): string | undefined {
+  return value?.trim() ? value : undefined;
+}
+
+function normalizeToolCallFileChange(
+  change: ToolCallFileChangePreview,
+): ToolCallFileChangePreview | undefined {
+  const path = normalizeOptionalString(change.path);
+  if (!path) {
+    return undefined;
+  }
+
+  const diff = normalizeOptionalPreviewText(change.diff);
+  const newFileContents = normalizeOptionalPreviewText(change.newFileContents);
+  return {
+    path,
+    diff,
+    newFileContents,
+  };
+}
+
+function mergeToolCallFileChange(
+  existing: ToolCallFileChangePreview,
+  incoming: ToolCallFileChangePreview,
+): ToolCallFileChangePreview {
+  return {
+    path: incoming.path,
+    diff: incoming.diff ?? existing.diff,
+    newFileContents: incoming.newFileContents ?? existing.newFileContents,
+  };
+}
+
+function normalizeToolCallFileChanges(
+  changes: readonly ToolCallFileChangePreview[] | undefined,
+): ToolCallFileChangePreview[] | undefined {
+  if (!changes || changes.length === 0) {
+    return undefined;
+  }
+
+  const normalized = new Map<string, ToolCallFileChangePreview>();
+  for (const change of changes) {
+    const nextChange = normalizeToolCallFileChange(change);
+    if (!nextChange) {
+      continue;
+    }
+
+    const previous = normalized.get(nextChange.path);
+    normalized.set(
+      nextChange.path,
+      previous ? mergeToolCallFileChange(previous, nextChange) : nextChange,
+    );
+  }
+
+  return normalized.size > 0 ? [...normalized.values()] : undefined;
+}
+
+function mergeToolCallFileChanges(
+  existing: readonly ToolCallFileChangePreview[] | undefined,
+  incoming: readonly ToolCallFileChangePreview[] | undefined,
+): ToolCallFileChangePreview[] | undefined {
+  const normalizedExisting = normalizeToolCallFileChanges(existing);
+  const normalizedIncoming = normalizeToolCallFileChanges(incoming);
+  if (!normalizedExisting) {
+    return normalizedIncoming;
+  }
+
+  if (!normalizedIncoming) {
+    return normalizedExisting;
+  }
+
+  const merged = new Map(
+    normalizedExisting.map((change) => [change.path, change] satisfies [string, ToolCallFileChangePreview]),
+  );
+  for (const change of normalizedIncoming) {
+    const previous = merged.get(change.path);
+    merged.set(change.path, previous ? mergeToolCallFileChange(previous, change) : change);
+  }
+
+  return [...merged.values()];
+}
+
 function normalizeRunTimelineAgent(
   agent: RunTimelineAgentRecord,
 ): RunTimelineAgentRecord | undefined {
@@ -153,6 +239,8 @@ function normalizeRunTimelineEvent(
     targetAgentId: normalizeOptionalString(event.targetAgentId),
     targetAgentName: normalizeOptionalString(event.targetAgentName),
     toolName: normalizeOptionalString(event.toolName),
+    toolCallId: normalizeOptionalString(event.toolCallId),
+    fileChanges: normalizeToolCallFileChanges(event.fileChanges),
     approvalId: normalizeOptionalString(event.approvalId),
     approvalKind: event.approvalKind,
     approvalTitle: normalizeOptionalString(event.approvalTitle),
@@ -217,6 +305,28 @@ function appendRunTimelineEvent(
   };
 }
 
+function upsertRunTimelineEventAt(
+  run: SessionRunRecord,
+  eventIndex: number,
+  event: RunTimelineEventRecord,
+): SessionRunRecord {
+  if (eventIndex < 0 || eventIndex >= run.events.length) {
+    return appendRunTimelineEvent(run, event);
+  }
+
+  const nextEvent = normalizeRunTimelineEvent(event);
+  if (!nextEvent) {
+    return run;
+  }
+
+  const nextEvents = run.events.slice();
+  nextEvents[eventIndex] = nextEvent;
+  return {
+    ...run,
+    events: nextEvents,
+  };
+}
+
 function settleOpenMessageEvents(
   run: SessionRunRecord,
   status: Extract<RunTimelineEventStatus, 'completed' | 'error'>,
@@ -417,13 +527,26 @@ export function appendRunActivityEvent(
     }
     case 'tool-calling': {
       const agent = resolveRunTimelineAgent(run, input.agentId, input.agentName);
-      return appendRunTimelineEvent(run, {
+      const toolCallId = normalizeOptionalString(input.toolCallId);
+      const existingIndex = toolCallId
+        ? run.events.findIndex((event) => event.kind === 'tool-call' && event.toolCallId === toolCallId)
+        : -1;
+      const existingEvent = existingIndex >= 0 ? run.events[existingIndex] : undefined;
+      const nextEvent: RunTimelineEventRecord = {
+        id: existingEvent?.id ?? createId('run-event'),
         kind: 'tool-call',
-        occurredAt: input.occurredAt,
+        occurredAt: existingEvent?.occurredAt ?? input.occurredAt,
+        updatedAt: existingEvent ? input.occurredAt : undefined,
         status: 'completed',
-        ...agent,
-        toolName: normalizeOptionalString(input.toolName),
-      });
+        agentId: agent.agentId ?? existingEvent?.agentId,
+        agentName: agent.agentName ?? existingEvent?.agentName,
+        toolName: normalizeOptionalString(input.toolName) ?? existingEvent?.toolName,
+        toolCallId,
+        fileChanges: mergeToolCallFileChanges(existingEvent?.fileChanges, input.fileChanges),
+      };
+      return existingIndex >= 0
+        ? upsertRunTimelineEventAt(run, existingIndex, nextEvent)
+        : appendRunTimelineEvent(run, nextEvent);
     }
     case 'handoff': {
       const sourceAgent = resolveRunTimelineAgent(run, input.sourceAgentId, input.sourceAgentName);

src/shared/domain/session.ts

@@ -20,6 +20,7 @@ import type { InteractionMode } from '@shared/contracts/sidecar';
 export type ChatRole = 'system' | 'user' | 'assistant';
 export type SessionStatus = 'idle' | 'running' | 'error';
 export type SessionTitleSource = 'auto' | 'manual';
+export type SessionBranchOriginAction = 'branch' | 'regenerate' | 'edit-and-resend';
 
 export interface SessionModelConfig {
   model: string;
@@ -32,10 +33,19 @@ export interface ChatMessageRecord {
   authorName: string;
   content: string;
   createdAt: string;
+  isPinned?: boolean;
   pending?: boolean;
   attachments?: ChatMessageAttachment[];
 }
 
+export interface SessionBranchOrigin {
+  sourceSessionId: string;
+  sourceMessageId: string;
+  sourceMessageIndex: number;
+  branchedAt: string;
+  action?: SessionBranchOriginAction;
+}
+
 export interface SessionRecord {
   id: string;
   projectId: string;
@@ -47,6 +57,7 @@ export interface SessionRecord {
   status: SessionStatus;
   isPinned?: boolean;
   isArchived?: boolean;
+  branchOrigin?: SessionBranchOrigin;
   interactionMode?: InteractionMode;
   cwd?: string;
   messages: ChatMessageRecord[];
@@ -62,6 +73,43 @@ export interface SessionRecord {
   runs: SessionRunRecord[];
 }
 
+function normalizeOptionalString(value?: string): string | undefined {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed : undefined;
+}
+
+export function normalizeSessionBranchOrigin(
+  branchOrigin?: Partial<SessionBranchOrigin>,
+): SessionBranchOrigin | undefined {
+  const sourceSessionId = normalizeOptionalString(branchOrigin?.sourceSessionId);
+  const sourceMessageId = normalizeOptionalString(branchOrigin?.sourceMessageId);
+  const branchedAt = normalizeOptionalString(branchOrigin?.branchedAt);
+  const sourceMessageIndex = branchOrigin?.sourceMessageIndex;
+  const action = branchOrigin?.action;
+  const normalizedAction = action === 'branch' || action === 'regenerate' || action === 'edit-and-resend'
+    ? action
+    : undefined;
+
+  if (
+    !sourceSessionId
+    || !sourceMessageId
+    || !branchedAt
+    || typeof sourceMessageIndex !== 'number'
+    || !Number.isInteger(sourceMessageIndex)
+    || sourceMessageIndex < 0
+  ) {
+    return undefined;
+  }
+
+  return {
+    sourceSessionId,
+    sourceMessageId,
+    sourceMessageIndex,
+    branchedAt,
+    action: normalizedAction,
+  };
+}
+
 export function resolveSessionTitle(
   session: Pick<SessionRecord, 'title' | 'titleSource'>,
   pattern: PatternDefinition,

src/shared/domain/sessionLibrary.ts

@@ -1,6 +1,14 @@
 import type { PatternDefinition } from '@shared/domain/pattern';
 import { isScratchpadProject, type ProjectRecord } from '@shared/domain/project';
-import type { ChatMessageRecord, SessionRecord, SessionStatus } from '@shared/domain/session';
+import type { ChatMessageAttachment } from '@shared/domain/attachment';
+import {
+  resolveSessionTitle,
+  type ChatMessageRecord,
+  type SessionBranchOrigin,
+  type SessionBranchOriginAction,
+  type SessionRecord,
+  type SessionStatus,
+} from '@shared/domain/session';
 import type { WorkspaceState } from '@shared/domain/workspace';
 
 export type SessionQueryMatchField = 'title' | 'message' | 'project' | 'pattern';
@@ -158,21 +166,62 @@ export function renameSessionRecord(session: SessionRecord, title: string, updat
   };
 }
 
-export function duplicateSessionRecord(
+function cloneBranchOrigin(branchOrigin?: SessionBranchOrigin): SessionBranchOrigin | undefined {
+  return branchOrigin ? { ...branchOrigin } : undefined;
+}
+
+function cloneAttachments(attachments?: ChatMessageAttachment[]): ChatMessageAttachment[] | undefined {
+  const cloned = attachments?.map((attachment) => ({ ...attachment }));
+  return cloned && cloned.length > 0 ? cloned : undefined;
+}
+
+function cloneChatMessageRecord(message: ChatMessageRecord): ChatMessageRecord {
+  return {
+    ...message,
+    pending: false,
+    attachments: cloneAttachments(message.attachments),
+  };
+}
+
+function requireMessageIndex(session: SessionRecord, messageId: string): number {
+  const sourceMessageIndex = session.messages.findIndex((message) => message.id === messageId);
+  if (sourceMessageIndex < 0) {
+    throw new Error(`Message ${messageId} not found in session ${session.id}.`);
+  }
+
+  return sourceMessageIndex;
+}
+
+function createBranchOrigin(
+  session: SessionRecord,
+  messageId: string,
+  sourceMessageIndex: number,
+  branchedAt: string,
+  action: SessionBranchOriginAction,
+): SessionBranchOrigin {
+  return {
+    sourceSessionId: session.id,
+    sourceMessageId: messageId,
+    sourceMessageIndex,
+    branchedAt,
+    action,
+  };
+}
+
+function createDerivedSessionRecord(
   session: SessionRecord,
   sessionId: string,
-  duplicatedAt: string,
+  createdAt: string,
 ): SessionRecord {
   return {
     ...session,
     id: sessionId,
-    title: `${session.title} (Copy)`,
-    titleSource: 'manual',
-    createdAt: duplicatedAt,
-    updatedAt: duplicatedAt,
+    createdAt,
+    updatedAt: createdAt,
     status: 'idle',
     isPinned: false,
     isArchived: false,
+    branchOrigin: cloneBranchOrigin(session.branchOrigin),
     lastError: undefined,
     sessionModelConfig: session.sessionModelConfig ? { ...session.sessionModelConfig } : undefined,
     tooling: session.tooling
@@ -188,11 +237,161 @@ export function duplicateSessionRecord(
       : undefined,
     pendingApproval: undefined,
     pendingApprovalQueue: undefined,
+    pendingUserInput: undefined,
+    pendingPlanReview: undefined,
+    pendingMcpAuth: undefined,
     runs: [],
-    messages: session.messages.map((message): ChatMessageRecord => ({
-      ...message,
-      pending: false,
-    })),
+    messages: [],
+  };
+}
+
+export function duplicateSessionRecord(
+  session: SessionRecord,
+  sessionId: string,
+  duplicatedAt: string,
+): SessionRecord {
+  return {
+    ...createDerivedSessionRecord(session, sessionId, duplicatedAt),
+    title: `${session.title} (Copy)`,
+    titleSource: 'manual',
+    messages: session.messages.map(cloneChatMessageRecord),
+  };
+}
+
+export function branchSessionRecord(
+  session: SessionRecord,
+  pattern: PatternDefinition,
+  sessionId: string,
+  messageId: string,
+  branchedAt: string,
+): SessionRecord {
+  const sourceMessageIndex = requireMessageIndex(session, messageId);
+  const sourceMessage = session.messages[sourceMessageIndex];
+  if (!sourceMessage) {
+    throw new Error(`Message ${messageId} not found in session ${session.id}.`);
+  }
+
+  if (sourceMessage.role !== 'user' && sourceMessage.role !== 'assistant') {
+    throw new Error('Only user or assistant messages can be used as a branch point.');
+  }
+
+  const branchedMessages = session.messages.slice(0, sourceMessageIndex + 1).map(cloneChatMessageRecord);
+
+  return {
+    ...createDerivedSessionRecord(session, sessionId, branchedAt),
+    title: resolveSessionTitle(session, pattern, branchedMessages),
+    messages: branchedMessages,
+    branchOrigin: createBranchOrigin(session, messageId, sourceMessageIndex, branchedAt, 'branch'),
+  };
+}
+
+export function setSessionMessagePinnedRecord(
+  session: SessionRecord,
+  messageId: string,
+  isPinned: boolean,
+  updatedAt: string,
+): SessionRecord {
+  const sourceMessageIndex = requireMessageIndex(session, messageId);
+
+  return {
+    ...session,
+    updatedAt,
+    messages: session.messages.map((message, index) => {
+      if (index !== sourceMessageIndex) {
+        return message;
+      }
+
+      if (isPinned) {
+        return {
+          ...message,
+          isPinned: true,
+        };
+      }
+
+      return {
+        ...message,
+        isPinned: undefined,
+      };
+    }),
+  };
+}
+
+export function regenerateSessionRecord(
+  session: SessionRecord,
+  pattern: PatternDefinition,
+  sessionId: string,
+  messageId: string,
+  regeneratedAt: string,
+): SessionRecord {
+  const sourceMessageIndex = requireMessageIndex(session, messageId);
+  const sourceMessage = session.messages[sourceMessageIndex];
+  if (!sourceMessage) {
+    throw new Error(`Message ${messageId} not found in session ${session.id}.`);
+  }
+
+  if (sourceMessage.role !== 'assistant') {
+    throw new Error('Only assistant messages can be regenerated.');
+  }
+
+  if (sourceMessageIndex !== session.messages.length - 1) {
+    throw new Error('Only the last assistant message can be regenerated.');
+  }
+
+  const priorUserMessageIndex = session.messages
+    .slice(0, sourceMessageIndex)
+    .map((message, index) => ({ message, index }))
+    .filter((candidate) => candidate.message.role === 'user')
+    .at(-1)?.index;
+
+  if (priorUserMessageIndex === undefined) {
+    throw new Error('Assistant message cannot be regenerated because no prior user message exists.');
+  }
+
+  const regeneratedMessages = session.messages
+    .slice(0, priorUserMessageIndex + 1)
+    .map(cloneChatMessageRecord);
+
+  return {
+    ...createDerivedSessionRecord(session, sessionId, regeneratedAt),
+    title: resolveSessionTitle(session, pattern, regeneratedMessages),
+    messages: regeneratedMessages,
+    branchOrigin: createBranchOrigin(session, messageId, sourceMessageIndex, regeneratedAt, 'regenerate'),
+  };
+}
+
+export function editAndResendSessionRecord(
+  session: SessionRecord,
+  pattern: PatternDefinition,
+  sessionId: string,
+  messageId: string,
+  content: string,
+  editedAt: string,
+  attachments?: ChatMessageAttachment[],
+): SessionRecord {
+  const sourceMessageIndex = requireMessageIndex(session, messageId);
+  const sourceMessage = session.messages[sourceMessageIndex];
+  if (!sourceMessage) {
+    throw new Error(`Message ${messageId} not found in session ${session.id}.`);
+  }
+
+  if (sourceMessage.role !== 'user') {
+    throw new Error('Only user messages can be edited and resent.');
+  }
+
+  const editedMessages = session.messages.slice(0, sourceMessageIndex + 1).map(cloneChatMessageRecord);
+  const editedMessage = editedMessages[sourceMessageIndex];
+  if (!editedMessage) {
+    throw new Error(`Message ${messageId} not found in session ${session.id}.`);
+  }
+
+  editedMessage.content = content;
+  editedMessage.attachments = cloneAttachments(attachments);
+
+  return {
+    ...createDerivedSessionRecord(session, sessionId, editedAt),
+    title: resolveSessionTitle(session, pattern, editedMessages),
+    messages: editedMessages,
+    branchOrigin: createBranchOrigin(session, messageId, sourceMessageIndex, editedAt, 'edit-and-resend'),
   };
 }
 

src/shared/domain/tooling.ts

@@ -64,6 +64,8 @@ export interface WorkspaceSettings {
   tooling: WorkspaceToolingSettings;
   discoveredUserTooling: DiscoveredToolingState;
   terminalHeight?: number;
+  notificationsEnabled?: boolean;
+  minimizeToTray?: boolean;
 }
 
 export interface SessionToolingSelection {
@@ -205,6 +207,8 @@ export function normalizeWorkspaceSettings(settings?: Partial<WorkspaceSettings>
     },
     discoveredUserTooling: normalizeDiscoveredToolingState(settings?.discoveredUserTooling),
     ...(terminalHeight !== undefined ? { terminalHeight } : {}),
+    ...(settings?.notificationsEnabled !== undefined ? { notificationsEnabled: settings.notificationsEnabled } : {}),
+    ...(settings?.minimizeToTray !== undefined ? { minimizeToTray: settings.minimizeToTray } : {}),
   };
 }
 

tests/main/appServiceMessageActions.test.ts

@@ -0,0 +1,243 @@
+import { describe, expect, mock, test } from 'bun:test';
+
+import type { RunTurnCommand } from '@shared/contracts/sidecar';
+import type { PatternDefinition } from '@shared/domain/pattern';
+import type { ProjectRecord } from '@shared/domain/project';
+import type { SessionRecord } from '@shared/domain/session';
+import { createWorkspaceSeed, type WorkspaceState } from '@shared/domain/workspace';
+
+const TIMESTAMP = '2026-03-29T00:00:00.000Z';
+
+mock.module('electron', () => {
+  const electronMock = {
+    app: {
+      isPackaged: false,
+      getAppPath: () => 'C:\\workspace\\personal\\repositories\\aryx',
+      getPath: () => 'C:\\workspace\\personal\\repositories\\aryx\\tests\\fixtures',
+    },
+    dialog: {
+      showOpenDialog: async () => ({ canceled: true, filePaths: [] }),
+    },
+    shell: {
+      openPath: async () => '',
+    },
+  };
+
+  return {
+    ...electronMock,
+    default: electronMock,
+  };
+});
+
+mock.module('keytar', () => ({
+  default: {
+    getPassword: async () => null,
+    setPassword: async () => undefined,
+    deletePassword: async () => false,
+  },
+}));
+
+const { AryxAppService } = await import('@main/AryxAppService');
+
+function createProject(overrides?: Partial<ProjectRecord>): ProjectRecord {
+  return {
+    id: 'project-alpha',
+    name: 'alpha',
+    path: 'C:\\workspace\\alpha',
+    addedAt: TIMESTAMP,
+    ...overrides,
+  };
+}
+
+function createSession(projectId: string, patternId: string, overrides?: Partial<SessionRecord>): SessionRecord {
+  return {
+    id: 'session-alpha',
+    projectId,
+    patternId,
+    title: 'Alpha session',
+    createdAt: TIMESTAMP,
+    updatedAt: TIMESTAMP,
+    status: 'idle',
+    messages: [
+      {
+        id: 'msg-1',
+        role: 'user',
+        authorName: 'You',
+        content: 'Investigate the refresh bug.',
+        createdAt: '2026-03-29T00:00:00.000Z',
+      },
+      {
+        id: 'msg-2',
+        role: 'assistant',
+        authorName: 'Primary Agent',
+        content: 'Here is the first answer.',
+        createdAt: '2026-03-29T00:01:00.000Z',
+      },
+      {
+        id: 'msg-3',
+        role: 'user',
+        authorName: 'You',
+        content: 'Try again with more focus on session state.',
+        createdAt: '2026-03-29T00:02:00.000Z',
+        attachments: [
+          {
+            type: 'file',
+            path: 'C:\\workspace\\alpha\\notes.txt',
+            displayName: 'notes.txt',
+          },
+        ],
+      },
+      {
+        id: 'msg-4',
+        role: 'assistant',
+        authorName: 'Primary Agent',
+        content: 'Here is the revised answer.',
+        createdAt: '2026-03-29T00:03:00.000Z',
+      },
+    ],
+    runs: [],
+    ...overrides,
+  };
+}
+
+function createFixture(): {
+  workspace: WorkspaceState;
+  pattern: PatternDefinition;
+  project: ProjectRecord;
+  session: SessionRecord;
+} {
+  const workspace = createWorkspaceSeed();
+  const pattern = workspace.patterns.find((candidate) => candidate.mode === 'single');
+  if (!pattern) {
+    throw new Error('Expected the workspace seed to include a single-agent pattern.');
+  }
+
+  const project = createProject();
+  const session = createSession(project.id, pattern.id);
+
+  workspace.projects = [project];
+  workspace.sessions = [session];
+  workspace.selectedProjectId = project.id;
+  workspace.selectedPatternId = pattern.id;
+  workspace.selectedSessionId = session.id;
+
+  return { workspace, pattern, project, session };
+}
+
+function createService(
+  workspace: WorkspaceState,
+  pattern: PatternDefinition,
+  options?: {
+    captureRunTurn?: (command: RunTurnCommand) => void;
+  },
+): InstanceType<typeof AryxAppService> {
+  const service = new AryxAppService();
+  const internals = service as unknown as Record<string, unknown>;
+  internals.loadWorkspace = async () => workspace;
+  internals.persistAndBroadcast = async (nextWorkspace: WorkspaceState) => nextWorkspace;
+  internals.buildEffectivePattern = async () => pattern;
+  internals.awaitFinalResponseApproval = async () => undefined;
+  internals.finalizeTurn = () => undefined;
+  internals.emitSessionEvent = () => undefined;
+  internals.pruneUnavailableApprovalTools = async () => false;
+  internals.pruneUnavailableSessionToolingSelections = () => false;
+  (
+    service as unknown as {
+      sidecar: {
+        runTurn: (command: RunTurnCommand) => Promise<[]>;
+        resolveApproval: () => Promise<void>;
+      };
+    }
+  ).sidecar = {
+    runTurn: async (command) => {
+      options?.captureRunTurn?.(command);
+      return [];
+    },
+    resolveApproval: async () => undefined,
+  };
+
+  return service;
+}
+
+describe('AryxAppService message actions', () => {
+  test('setSessionMessagePinned persists pinned message state', async () => {
+    const { workspace, pattern, session } = createFixture();
+    const service = createService(workspace, pattern);
+
+    const updated = await service.setSessionMessagePinned(session.id, 'msg-2', true);
+
+    expect(updated.sessions[0]?.messages[1]?.isPinned).toBe(true);
+    expect(session.messages[1]?.isPinned).toBe(true);
+  });
+
+  test('regenerateSessionMessage creates a replay branch from the prior user turn', async () => {
+    const { workspace, pattern, session } = createFixture();
+    let command: RunTurnCommand | undefined;
+    const service = createService(workspace, pattern, {
+      captureRunTurn: (capturedCommand) => {
+        command = capturedCommand;
+      },
+    });
+
+    await service.regenerateSessionMessage(session.id, 'msg-4');
+
+    const regenerated = workspace.sessions[0];
+    if (!regenerated) {
+      throw new Error('Expected regenerateSessionMessage to prepend a new session.');
+    }
+
+    expect(regenerated.id).not.toBe(session.id);
+    expect(regenerated.branchOrigin).toMatchObject({
+      sourceSessionId: session.id,
+      sourceMessageId: 'msg-4',
+      sourceMessageIndex: 3,
+      action: 'regenerate',
+    });
+    expect(regenerated.messages.map((message) => message.id)).toEqual(['msg-1', 'msg-2', 'msg-3']);
+    expect(workspace.selectedSessionId).toBe(regenerated.id);
+    expect(command?.sessionId).toBe(regenerated.id);
+    expect(command?.messages.map((message) => message.id)).toEqual(['msg-1', 'msg-2', 'msg-3']);
+  });
+
+  test('editAndResendSessionMessage creates an implicit branch with the edited prompt', async () => {
+    const { workspace, pattern, session } = createFixture();
+    let command: RunTurnCommand | undefined;
+    const service = createService(workspace, pattern, {
+      captureRunTurn: (capturedCommand) => {
+        command = capturedCommand;
+      },
+    });
+
+    await service.editAndResendSessionMessage(session.id, 'msg-3', '  Focus only on session state.  ');
+
+    const edited = workspace.sessions[0];
+    if (!edited) {
+      throw new Error('Expected editAndResendSessionMessage to prepend a new session.');
+    }
+
+    expect(edited.id).not.toBe(session.id);
+    expect(edited.branchOrigin).toMatchObject({
+      sourceSessionId: session.id,
+      sourceMessageId: 'msg-3',
+      sourceMessageIndex: 2,
+      action: 'edit-and-resend',
+    });
+    expect(edited.messages.map((message) => message.id)).toEqual(['msg-1', 'msg-2', 'msg-3']);
+    expect(edited.messages[2]).toMatchObject({
+      id: 'msg-3',
+      role: 'user',
+      content: '  Focus only on session state.  ',
+      attachments: [
+        {
+          type: 'file',
+          path: 'C:\\workspace\\alpha\\notes.txt',
+          displayName: 'notes.txt',
+        },
+      ],
+    });
+    expect(edited.messages[2]?.attachments).not.toBe(session.messages[2]?.attachments);
+    expect(workspace.selectedSessionId).toBe(edited.id);
+    expect(command?.sessionId).toBe(edited.id);
+    expect(command?.messages[2]?.content).toBe('  Focus only on session state.  ');
+  });
+});

tests/main/appServiceScratchpadDirectories.test.ts

@@ -169,6 +169,73 @@ describe('AryxAppService scratchpad directories', () => {
     expect(await pathExists(duplicate.cwd!)).toBe(true);
   });
 
+  test('creates a new directory when branching a scratchpad session', async () => {
+    const workspace = createWorkspaceSeed();
+    const pattern = requireSinglePattern(workspace);
+    const scratchpadProject = createScratchpadProject(join(USER_DATA_PATH, 'scratchpad'), TIMESTAMP);
+    const originalDirectory = join(USER_DATA_PATH, 'scratchpad', 'session-original');
+    const originalSession = createScratchpadSession(pattern.id, {
+      id: 'session-original',
+      cwd: originalDirectory,
+      messages: [
+        {
+          id: 'msg-1',
+          role: 'user',
+          authorName: 'You',
+          content: 'Draft a plan.',
+          createdAt: TIMESTAMP,
+        },
+        {
+          id: 'msg-2',
+          role: 'assistant',
+          authorName: 'Primary Agent',
+          content: 'Here is the first approach.',
+          createdAt: TIMESTAMP,
+        },
+        {
+          id: 'msg-3',
+          role: 'user',
+          authorName: 'You',
+          content: 'Try again from here with a stricter checklist.',
+          createdAt: TIMESTAMP,
+        },
+        {
+          id: 'msg-4',
+          role: 'assistant',
+          authorName: 'Primary Agent',
+          content: 'Here is the revised approach.',
+          createdAt: TIMESTAMP,
+        },
+      ],
+    });
+
+    workspace.projects = [scratchpadProject];
+    workspace.sessions = [originalSession];
+    workspace.selectedProjectId = scratchpadProject.id;
+    workspace.selectedPatternId = pattern.id;
+    workspace.selectedSessionId = originalSession.id;
+
+    const service = createService(workspace);
+
+    const result = await service.branchSession(originalSession.id, 'msg-3');
+    const branch = result.sessions[0];
+    if (!branch) {
+      throw new Error('Expected branchSession to prepend the branch.');
+    }
+
+    expect(branch.id).not.toBe(originalSession.id);
+    expect(branch.cwd).toBe(join(USER_DATA_PATH, 'scratchpad', branch.id));
+    expect(branch.cwd).not.toBe(originalSession.cwd);
+    expect(branch.branchOrigin).toMatchObject({
+      sourceSessionId: originalSession.id,
+      sourceMessageId: 'msg-3',
+      sourceMessageIndex: 2,
+    });
+    expect(branch.messages.map((message) => message.id)).toEqual(['msg-1', 'msg-2', 'msg-3']);
+    expect(result.selectedSessionId).toBe(branch.id);
+    expect(await pathExists(branch.cwd!)).toBe(true);
+  });
+
   test('removes the scratchpad directory when deleting a session', async () => {
     const workspace = createWorkspaceSeed();
     const pattern = requireSinglePattern(workspace);

tests/main/autoUpdater.test.ts

@@ -0,0 +1,173 @@
+import { EventEmitter } from 'node:events';
+
+import { describe, expect, test } from 'bun:test';
+
+import { AutoUpdateService, type AutoUpdateScheduler } from '@main/services/autoUpdater';
+import type { UpdateStatus } from '@shared/contracts/ipc';
+
+class FakeUpdater extends EventEmitter {
+  autoDownload = false;
+
+  autoInstallOnAppQuit = true;
+
+  checkForUpdatesCalls = 0;
+
+  quitAndInstallCalls = 0;
+
+  async checkForUpdates(): Promise<void> {
+    this.checkForUpdatesCalls += 1;
+  }
+
+  quitAndInstall(): void {
+    this.quitAndInstallCalls += 1;
+  }
+}
+
+class FakeScheduler implements AutoUpdateScheduler {
+  readonly timeouts: Array<{ callback: () => void; delayMs: number }> = [];
+
+  readonly intervals: Array<{ callback: () => void; delayMs: number }> = [];
+
+  setTimeout(callback: () => void, delayMs: number): number {
+    this.timeouts.push({ callback, delayMs });
+    return this.timeouts.length - 1;
+  }
+
+  clearTimeout(handle: unknown): void {
+    const index = Number(handle);
+    if (Number.isInteger(index) && index >= 0) {
+      this.timeouts.splice(index, 1);
+    }
+  }
+
+  setInterval(callback: () => void, delayMs: number): number {
+    this.intervals.push({ callback, delayMs });
+    return this.intervals.length - 1;
+  }
+
+  clearInterval(handle: unknown): void {
+    const index = Number(handle);
+    if (Number.isInteger(index) && index >= 0) {
+      this.intervals.splice(index, 1);
+    }
+  }
+
+  async runTimeout(index = 0): Promise<void> {
+    await Promise.resolve(this.timeouts[index]?.callback());
+  }
+
+  async runInterval(index = 0): Promise<void> {
+    await Promise.resolve(this.intervals[index]?.callback());
+  }
+}
+
+describe('AutoUpdateService', () => {
+  test('does not schedule checks for unpackaged apps', async () => {
+    const updater = new FakeUpdater();
+    const scheduler = new FakeScheduler();
+    const service = new AutoUpdateService({ isPackaged: false, scheduler, updater });
+
+    service.start();
+
+    expect(scheduler.timeouts).toHaveLength(0);
+    expect(scheduler.intervals).toHaveLength(0);
+    expect(await service.checkForUpdates()).toEqual({ state: 'idle' });
+    expect(updater.checkForUpdatesCalls).toBe(0);
+  });
+
+  test('configures auto download and schedules startup and periodic checks', async () => {
+    const updater = new FakeUpdater();
+    const scheduler = new FakeScheduler();
+    const service = new AutoUpdateService({ isPackaged: true, scheduler, updater });
+
+    service.start();
+
+    expect(updater.autoDownload).toBe(true);
+    expect(updater.autoInstallOnAppQuit).toBe(false);
+    expect(scheduler.timeouts).toEqual([{ callback: expect.any(Function), delayMs: 10_000 }]);
+    expect(scheduler.intervals).toEqual([{ callback: expect.any(Function), delayMs: 4 * 60 * 60 * 1000 }]);
+
+    await scheduler.runTimeout();
+    await Promise.resolve();
+    await scheduler.runInterval();
+    await Promise.resolve();
+
+    expect(updater.checkForUpdatesCalls).toBe(2);
+  });
+
+  test('maps updater events into renderer-facing status snapshots', () => {
+    const updater = new FakeUpdater();
+    const service = new AutoUpdateService({ isPackaged: true, updater });
+    const statuses: UpdateStatus[] = [];
+    service.onStatus((status) => statuses.push(status));
+
+    updater.emit('checking-for-update');
+    updater.emit('update-available', {
+      version: '1.2.0',
+      releaseDate: '2026-03-29T00:00:00.000Z',
+      releaseNotes: 'Important fixes.',
+    });
+    updater.emit('download-progress', {
+      bytesPerSecond: 512,
+      percent: 25,
+      total: 400,
+      transferred: 100,
+    });
+    updater.emit('update-downloaded', {
+      version: '1.2.0',
+      releaseDate: '2026-03-29T00:00:00.000Z',
+      releaseNotes: 'Important fixes.',
+    });
+
+    expect(statuses).toEqual([
+      { state: 'checking' },
+      {
+        state: 'available',
+        version: '1.2.0',
+        releaseDate: '2026-03-29T00:00:00.000Z',
+        releaseNotes: 'Important fixes.',
+      },
+      {
+        state: 'downloading',
+        version: '1.2.0',
+        releaseDate: '2026-03-29T00:00:00.000Z',
+        releaseNotes: 'Important fixes.',
+        downloadProgress: {
+          bytesPerSecond: 512,
+          percent: 25,
+          total: 400,
+          transferred: 100,
+        },
+      },
+      {
+        state: 'downloaded',
+        version: '1.2.0',
+        releaseDate: '2026-03-29T00:00:00.000Z',
+        releaseNotes: 'Important fixes.',
+      },
+    ]);
+  });
+
+  test('reports updater errors and only installs once an update is downloaded', () => {
+    const updater = new FakeUpdater();
+    const service = new AutoUpdateService({ isPackaged: true, updater });
+
+    service.installUpdate();
+    expect(updater.quitAndInstallCalls).toBe(0);
+
+    updater.emit('error', new Error('network down'));
+    expect(service.getStatus()).toEqual({
+      state: 'error',
+      error: 'network down',
+    });
+
+    updater.emit('update-downloaded', {
+      version: '1.2.1',
+      releaseDate: '2026-03-29T00:00:00.000Z',
+      releaseNotes: 'Patch release.',
+    });
+    service.installUpdate();
+
+    expect(updater.quitAndInstallCalls).toBe(1);
+  });
+});

tests/scripts/releaseTarget.test.ts

@@ -1,68 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-
-import {
-  macBundleIdentifier,
-  productName,
-  resolveReleaseTarget,
-} from '../../scripts/releaseTarget';
-
-describe('resolveReleaseTarget', () => {
-  test('maps Windows x64 to the expected runtime and output names', () => {
-    expect(resolveReleaseTarget('win32', 'x64')).toEqual({
-      platform: 'win32',
-      arch: 'x64',
-      platformLabel: 'windows',
-      dotnetRuntime: 'win-x64',
-      outputDirectoryName: 'Aryx-windows-x64',
-      archiveBaseName: 'Aryx-windows-x64',
-      installerAssetName: 'Aryx-windows-x64-setup.exe',
-      sidecarExecutableName: 'Aryx.AgentHost.exe',
-      packagedExecutableName: 'Aryx.exe',
-    });
-  });
-
-  test('maps macOS arm64 to the expected bundle metadata', () => {
-    expect(resolveReleaseTarget('darwin', 'arm64')).toEqual({
-      platform: 'darwin',
-      arch: 'arm64',
-      platformLabel: 'macos',
-      dotnetRuntime: 'osx-arm64',
-      outputDirectoryName: 'Aryx-macos-arm64',
-      archiveBaseName: 'Aryx-macos-arm64',
-      installerAssetName: 'Aryx-macos-arm64.dmg',
-      sidecarExecutableName: 'Aryx.AgentHost',
-      appBundleName: 'Aryx.app',
-    });
-  });
-
-  test('maps Linux x64 to the expected runtime and output names', () => {
-    expect(resolveReleaseTarget('linux', 'x64')).toEqual({
-      platform: 'linux',
-      arch: 'x64',
-      platformLabel: 'linux',
-      dotnetRuntime: 'linux-x64',
-      outputDirectoryName: 'Aryx-linux-x64',
-      archiveBaseName: 'Aryx-linux-x64',
-      installerAssetName: 'aryx-linux-x64.deb',
-      sidecarExecutableName: 'Aryx.AgentHost',
-      packagedExecutableName: 'Aryx',
-    });
-  });
-
-  test('exports the expected product metadata constants', () => {
-    expect(productName).toBe('Aryx');
-    expect(macBundleIdentifier).toBe('com.davidkaya.aryx');
-  });
-
-  test('rejects unsupported platforms', () => {
-    expect(() => resolveReleaseTarget('freebsd', 'x64')).toThrow(
-      'Unsupported release platform: freebsd',
-    );
-  });
-
-  test('rejects unsupported architectures', () => {
-    expect(() => resolveReleaseTarget('linux', 'ia32')).toThrow(
-      'Unsupported architecture for linux: ia32',
-    );
-  });
-});

tests/shared/runTimeline.test.ts

@@ -167,6 +167,57 @@ describe('run timeline helpers', () => {
     });
   });
 
+  test('merges file change previews into a single tool-call event by toolCallId', () => {
+    const baseRun = createSessionRunRecord({
+      requestId: 'turn-1',
+      project: createProject(),
+      workspaceKind: 'project',
+      pattern: createPattern(),
+      triggerMessageId: 'msg-user-1',
+      startedAt: '2026-03-23T00:00:01.000Z',
+    });
+
+    const startedRun = appendRunActivityEvent(baseRun, {
+      activityType: 'tool-calling',
+      occurredAt: '2026-03-23T00:00:02.000Z',
+      agentId: 'agent-writer',
+      toolName: 'apply_patch',
+      toolCallId: 'tool-call-1',
+    });
+
+    const firstPreviewRun = appendRunActivityEvent(startedRun, {
+      activityType: 'tool-calling',
+      occurredAt: '2026-03-23T00:00:03.000Z',
+      agentId: 'agent-writer',
+      toolName: 'apply_patch',
+      toolCallId: 'tool-call-1',
+      fileChanges: [{ path: 'src\\alpha.ts', diff: '@@ -1 +1 @@' }],
+    });
+
+    const mergedRun = appendRunActivityEvent(firstPreviewRun, {
+      activityType: 'tool-calling',
+      occurredAt: '2026-03-23T00:00:04.000Z',
+      agentId: 'agent-writer',
+      toolCallId: 'tool-call-1',
+      fileChanges: [{ path: 'src\\beta.ts', newFileContents: 'export const beta = true;\n' }],
+    });
+
+    const toolCallEvents = mergedRun.events.filter((event) => event.kind === 'tool-call');
+    expect(toolCallEvents).toHaveLength(1);
+    expect(toolCallEvents[0]).toMatchObject({
+      agentId: 'agent-writer',
+      agentName: 'Writer',
+      toolName: 'apply_patch',
+      toolCallId: 'tool-call-1',
+      occurredAt: '2026-03-23T00:00:02.000Z',
+      updatedAt: '2026-03-23T00:00:04.000Z',
+    });
+    expect(toolCallEvents[0].fileChanges).toEqual([
+      { path: 'src\\alpha.ts', diff: '@@ -1 +1 @@' },
+      { path: 'src\\beta.ts', newFileContents: 'export const beta = true;\n' },
+    ]);
+  });
+
   test('normalizes missing run collections to an empty array', () => {
     expect(normalizeSessionRunRecords(undefined)).toEqual([]);
   });

tests/shared/sessionLibrary.test.ts

@@ -1,6 +1,14 @@
 import { describe, expect, test } from 'bun:test';
 
-import { querySessions, duplicateSessionRecord, renameSessionRecord } from '@shared/domain/sessionLibrary';
+import {
+  branchSessionRecord,
+  duplicateSessionRecord,
+  editAndResendSessionRecord,
+  querySessions,
+  regenerateSessionRecord,
+  renameSessionRecord,
+  setSessionMessagePinnedRecord,
+} from '@shared/domain/sessionLibrary';
 import type { PatternDefinition } from '@shared/domain/pattern';
 import type { ProjectRecord } from '@shared/domain/project';
 import type { SessionRecord } from '@shared/domain/session';
@@ -176,6 +184,364 @@ describe('session library helpers', () => {
     expect(session.runs).toEqual([]);
   });
 
+  test('pins and unpins messages within a session', () => {
+    const pinned = setSessionMessagePinnedRecord(createSession(), 'msg-1', true, '2026-03-23T00:06:00.000Z');
+
+    expect(pinned.updatedAt).toBe('2026-03-23T00:06:00.000Z');
+    expect(pinned.messages[0]?.isPinned).toBe(true);
+
+    const unpinned = setSessionMessagePinnedRecord(pinned, 'msg-1', false, '2026-03-23T00:07:00.000Z');
+    expect(unpinned.messages[0]?.isPinned).toBeUndefined();
+    expect(pinned.messages[0]?.isPinned).toBe(true);
+  });
+
+  test('branches sessions from a user message and retains only the prior transcript', () => {
+    const sourceSession = createSession({
+      title: 'Manual branch source',
+      titleSource: 'manual',
+      status: 'error',
+      isPinned: true,
+      isArchived: true,
+      lastError: 'sidecar crashed',
+      approvalSettings: {
+        autoApprovedToolNames: ['git.status'],
+      },
+      pendingApproval: {
+        id: 'approval-1',
+        kind: 'tool-call',
+        status: 'pending',
+        requestedAt: '2026-03-23T00:01:00.000Z',
+        title: 'Approve tool access',
+      },
+      pendingApprovalQueue: [
+        {
+          id: 'approval-2',
+          kind: 'final-response',
+          status: 'pending',
+          requestedAt: '2026-03-23T00:02:00.000Z',
+          title: 'Approve final response',
+        },
+      ],
+      messages: [
+        {
+          id: 'msg-1',
+          role: 'user',
+          authorName: 'You',
+          content: 'Investigate the refresh bug.',
+          createdAt: '2026-03-23T00:00:00.000Z',
+        },
+        {
+          id: 'msg-2',
+          role: 'assistant',
+          authorName: 'Reviewer',
+          content: 'I found two likely causes.',
+          createdAt: '2026-03-23T00:01:00.000Z',
+          pending: true,
+        },
+        {
+          id: 'msg-3',
+          role: 'user',
+          authorName: 'You',
+          content: 'Try a different approach focused on session state.',
+          createdAt: '2026-03-23T00:02:00.000Z',
+          attachments: [
+            {
+              type: 'file',
+              path: 'C:\\workspace\\alpha\\notes.txt',
+              displayName: 'notes.txt',
+            },
+          ],
+        },
+        {
+          id: 'msg-4',
+          role: 'assistant',
+          authorName: 'Reviewer',
+          content: 'Here is the alternate plan.',
+          createdAt: '2026-03-23T00:03:00.000Z',
+        },
+      ],
+    });
+
+    const branch = branchSessionRecord(
+      sourceSession,
+      createPattern(),
+      'session-branch',
+      'msg-3',
+      '2026-03-23T00:04:00.000Z',
+    );
+
+    expect(branch).toMatchObject({
+      id: 'session-branch',
+      title: 'Manual branch source',
+      titleSource: 'manual',
+      status: 'idle',
+      isPinned: false,
+      isArchived: false,
+      lastError: undefined,
+      createdAt: '2026-03-23T00:04:00.000Z',
+      updatedAt: '2026-03-23T00:04:00.000Z',
+      branchOrigin: {
+        sourceSessionId: 'session-1',
+        sourceMessageId: 'msg-3',
+        sourceMessageIndex: 2,
+        branchedAt: '2026-03-23T00:04:00.000Z',
+      },
+    });
+    expect(branch.messages.map((message) => message.id)).toEqual(['msg-1', 'msg-2', 'msg-3']);
+    expect(branch.messages[1]?.pending).toBe(false);
+    expect(branch.messages[2]?.attachments).toEqual(sourceSession.messages[2]?.attachments);
+    expect(branch.messages[2]?.attachments).not.toBe(sourceSession.messages[2]?.attachments);
+    expect(branch.messages[1]).not.toBe(sourceSession.messages[1]);
+    expect(branch.pendingApproval).toBeUndefined();
+    expect(branch.pendingApprovalQueue).toBeUndefined();
+    expect(branch.runs).toEqual([]);
+    expect(sourceSession.messages[1]?.pending).toBe(true);
+  });
+
+  test('rejects branching from non-conversation messages', () => {
+    const sourceSession = createSession({
+      messages: [
+        {
+          id: 'msg-1',
+          role: 'system' as 'user',
+          authorName: 'System',
+          content: 'System prompt.',
+          createdAt: '2026-03-23T00:00:00.000Z',
+        },
+      ],
+    });
+
+    expect(() =>
+      branchSessionRecord(
+        sourceSession,
+        createPattern(),
+        'session-branch',
+        'msg-1',
+        '2026-03-23T00:04:00.000Z',
+      )).toThrow('Only user or assistant messages can be used as a branch point.');
+  });
+
+  test('branches from an assistant message and retains transcript up to that response', () => {
+    const sourceSession = createSession({
+      messages: [
+        {
+          id: 'msg-1',
+          role: 'user',
+          authorName: 'You',
+          content: 'Investigate the refresh bug.',
+          createdAt: '2026-03-23T00:00:00.000Z',
+        },
+        {
+          id: 'msg-2',
+          role: 'assistant',
+          authorName: 'Reviewer',
+          content: 'I found two likely causes.',
+          createdAt: '2026-03-23T00:01:00.000Z',
+        },
+        {
+          id: 'msg-3',
+          role: 'user',
+          authorName: 'You',
+          content: 'Try a different approach.',
+          createdAt: '2026-03-23T00:02:00.000Z',
+        },
+        {
+          id: 'msg-4',
+          role: 'assistant',
+          authorName: 'Reviewer',
+          content: 'Here is the alternate plan.',
+          createdAt: '2026-03-23T00:03:00.000Z',
+        },
+      ],
+    });
+
+    const branch = branchSessionRecord(
+      sourceSession,
+      createPattern(),
+      'session-branch',
+      'msg-2',
+      '2026-03-23T00:05:00.000Z',
+    );
+
+    expect(branch.messages.map((m) => m.id)).toEqual(['msg-1', 'msg-2']);
+    expect(branch.branchOrigin).toMatchObject({
+      sourceSessionId: 'session-1',
+      sourceMessageId: 'msg-2',
+      sourceMessageIndex: 1,
+      action: 'branch',
+    });
+  });
+
+  test('regenerates the last assistant message by truncating back to the prior user turn', () => {
+    const sourceSession = createSession({
+      messages: [
+        {
+          id: 'msg-1',
+          role: 'user',
+          authorName: 'You',
+          content: 'Investigate the refresh bug.',
+          createdAt: '2026-03-23T00:00:00.000Z',
+        },
+        {
+          id: 'msg-2',
+          role: 'assistant',
+          authorName: 'Reviewer',
+          content: 'I found two likely causes.',
+          createdAt: '2026-03-23T00:01:00.000Z',
+        },
+        {
+          id: 'msg-3',
+          role: 'user',
+          authorName: 'You',
+          content: 'Try a different approach.',
+          createdAt: '2026-03-23T00:02:00.000Z',
+        },
+        {
+          id: 'msg-4',
+          role: 'assistant',
+          authorName: 'Reviewer',
+          content: 'Here is the alternate plan.',
+          createdAt: '2026-03-23T00:03:00.000Z',
+          pending: true,
+        },
+      ],
+    });
+
+    const regenerated = regenerateSessionRecord(
+      sourceSession,
+      createPattern(),
+      'session-regenerated',
+      'msg-4',
+      '2026-03-23T00:06:00.000Z',
+    );
+
+    expect(regenerated.messages.map((message) => message.id)).toEqual(['msg-1', 'msg-2', 'msg-3']);
+    expect(regenerated.messages[2]?.role).toBe('user');
+    expect(regenerated.messages[1]?.pending).toBe(false);
+    expect(regenerated.branchOrigin).toMatchObject({
+      sourceSessionId: 'session-1',
+      sourceMessageId: 'msg-4',
+      sourceMessageIndex: 3,
+      action: 'regenerate',
+    });
+  });
+
+  test('rejects regenerating any assistant message except the last one', () => {
+    const sourceSession = createSession({
+      messages: [
+        {
+          id: 'msg-1',
+          role: 'user',
+          authorName: 'You',
+          content: 'Investigate the refresh bug.',
+          createdAt: '2026-03-23T00:00:00.000Z',
+        },
+        {
+          id: 'msg-2',
+          role: 'assistant',
+          authorName: 'Reviewer',
+          content: 'I found two likely causes.',
+          createdAt: '2026-03-23T00:01:00.000Z',
+        },
+        {
+          id: 'msg-3',
+          role: 'user',
+          authorName: 'You',
+          content: 'Try a different approach.',
+          createdAt: '2026-03-23T00:02:00.000Z',
+        },
+      ],
+    });
+
+    expect(() =>
+      regenerateSessionRecord(
+        sourceSession,
+        createPattern(),
+        'session-regenerated',
+        'msg-2',
+        '2026-03-23T00:06:00.000Z',
+      )).toThrow('Only the last assistant message can be regenerated.');
+  });
+
+  test('edits and resends a user message by creating an implicit branch', () => {
+    const sourceSession = createSession({
+      messages: [
+        {
+          id: 'msg-1',
+          role: 'user',
+          authorName: 'You',
+          content: 'Investigate the refresh bug.',
+          createdAt: '2026-03-23T00:00:00.000Z',
+        },
+        {
+          id: 'msg-2',
+          role: 'assistant',
+          authorName: 'Reviewer',
+          content: 'I found two likely causes.',
+          createdAt: '2026-03-23T00:01:00.000Z',
+        },
+        {
+          id: 'msg-3',
+          role: 'user',
+          authorName: 'You',
+          content: 'Try a different approach.',
+          createdAt: '2026-03-23T00:02:00.000Z',
+          attachments: [
+            {
+              type: 'file',
+              path: 'C:\\workspace\\alpha\\notes.txt',
+              displayName: 'notes.txt',
+            },
+          ],
+        },
+        {
+          id: 'msg-4',
+          role: 'assistant',
+          authorName: 'Reviewer',
+          content: 'Here is the alternate plan.',
+          createdAt: '2026-03-23T00:03:00.000Z',
+        },
+      ],
+    });
+
+    const edited = editAndResendSessionRecord(
+      sourceSession,
+      createPattern(),
+      'session-edited',
+      'msg-3',
+      'Focus on session state only.',
+      '2026-03-23T00:06:00.000Z',
+      [
+        {
+          type: 'file',
+          path: 'C:\\workspace\\alpha\\state-notes.txt',
+          displayName: 'state-notes.txt',
+        },
+      ],
+    );
+
+    expect(edited.messages.map((message) => message.id)).toEqual(['msg-1', 'msg-2', 'msg-3']);
+    expect(edited.messages[2]).toMatchObject({
+      id: 'msg-3',
+      role: 'user',
+      content: 'Focus on session state only.',
+      attachments: [
+        {
+          type: 'file',
+          path: 'C:\\workspace\\alpha\\state-notes.txt',
+          displayName: 'state-notes.txt',
+        },
+      ],
+    });
+    expect(edited.messages[2]?.attachments).not.toBe(sourceSession.messages[2]?.attachments);
+    expect(edited.branchOrigin).toMatchObject({
+      sourceSessionId: 'session-1',
+      sourceMessageId: 'msg-3',
+      sourceMessageIndex: 2,
+      action: 'edit-and-resend',
+    });
+  });
+
   test('searches across session title, messages, projects, and patterns', () => {
     const workspace = createWorkspace();