diff --git a/.env.example b/.env.example
index 6293848c..010e0883 100644
--- a/.env.example
+++ b/.env.example
@@ -28,7 +28,7 @@ VITE_POSTHOG_HOST=https://us.i.posthog.com
 # Set this in hosted builds to use a private feedback channel
 # VITE_FEEDBACK_URL=https://discord.gg/your-private-invite
 
-# API URL (optional - defaults to https://21st.dev)
+# API URL (optional - defaults to https://getcrunch.dev)
 # Only change this if you're running the web app locally
 # MAIN_VITE_API_URL=http://localhost:3000
 
diff --git a/.gitignore b/.gitignore
index 54d8ce1a..240e2029 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,9 @@ electron.vite.config.*.mjs
 
 # Claude binary (downloaded at build time)
 resources/bin/
+
+# Test data (local testing only)
+test-data/
+
+# Claude Code local config
+.claude/
diff --git a/CLAUDE.md b/CLAUDE.md
index d41a54ea..3451e8fd 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -23,7 +23,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## What is this?
 
-**21st Agents** - A local-first Electron desktop app for AI-powered code assistance. Users create chat sessions linked to local project folders, interact with Claude in Plan or Agent mode, and see real-time tool execution (bash, file edits, web search, etc.).
+**Crunch** - A local-first Electron desktop app for AI-powered code assistance. Users create chat sessions linked to local project folders, interact with Claude in Plan or Agent mode, and see real-time tool execution (bash, file edits, web search, etc.).
 
 ## Commands
 
@@ -165,8 +165,8 @@ rm -rf ~/Library/Application\ Support/Agents\ Dev/
 /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/Support/lsregister -kill -r -domain local -domain system -domain user
 
 # 3. Clear app preferences
-defaults delete dev.21st.agents.dev  # Dev mode
-defaults delete dev.21st.agents      # Production
+defaults delete dev.getcrunch.app.dev  # Dev mode
+defaults delete dev.getcrunch.app      # Production
 
 # 4. Run in dev mode with clean state
 cd apps/desktop
@@ -178,7 +178,7 @@ bun run dev
 - **Folder dialog not appearing**: Window focus timing issues on first launch. Fixed by ensuring window focus before showing `dialog.showOpenDialog()`.
 
 **Dev vs Production App:**
-- Dev mode uses `twentyfirst-agents-dev://` protocol
+- Dev mode uses `crunch-dev://` protocol
 - Dev mode uses separate userData path (`~/Library/Application Support/Agents Dev/`)
 - This prevents conflicts between dev and production installs
 
@@ -186,8 +186,8 @@ bun run dev
 
 ### Prerequisites for Notarization
 
-- Keychain profile: `21st-notarize`
-- Create with: `xcrun notarytool store-credentials "21st-notarize" --apple-id YOUR_APPLE_ID --team-id YOUR_TEAM_ID`
+- Keychain profile: `crunch-notarize`
+- Create with: `xcrun notarytool store-credentials "crunch-notarize" --apple-id YOUR_APPLE_ID --team-id YOUR_TEAM_ID`
 
 ### Release Commands
 
@@ -210,7 +210,7 @@ npm version patch --no-git-tag-version  # 0.0.27 → 0.0.28
 
 ### After Release Script Completes
 
-1. Wait for notarization (2-5 min): `xcrun notarytool history --keychain-profile "21st-notarize"`
+1. Wait for notarization (2-5 min): `xcrun notarytool history --keychain-profile "crunch-notarize"`
 2. Staple DMGs: `cd release && xcrun stapler staple *.dmg`
 3. Re-upload stapled DMGs to R2 and GitHub (see RELEASE.md for commands)
 4. Update changelog: `gh release edit v0.0.X --notes "..."`
@@ -223,14 +223,14 @@ npm version patch --no-git-tag-version  # 0.0.27 → 0.0.28
 |------|---------|
 | `latest-mac.yml` | Manifest for arm64 auto-updates |
 | `latest-mac-x64.yml` | Manifest for Intel auto-updates |
-| `1Code-{version}-arm64-mac.zip` | Auto-update payload (arm64) |
-| `1Code-{version}-mac.zip` | Auto-update payload (Intel) |
-| `1Code-{version}-arm64.dmg` | Manual download (arm64) |
-| `1Code-{version}.dmg` | Manual download (Intel) |
+| `Crunch-{version}-arm64-mac.zip` | Auto-update payload (arm64) |
+| `Crunch-{version}-mac.zip` | Auto-update payload (Intel) |
+| `Crunch-{version}-arm64.dmg` | Manual download (arm64) |
+| `Crunch-{version}.dmg` | Manual download (Intel) |
 
 ### Auto-Update Flow
 
-1. App checks `https://cdn.21st.dev/releases/desktop/latest-mac.yml` on startup and when window regains focus (with 1 min cooldown)
+1. App checks `https://cdn.getcrunch.dev/releases/desktop/latest-mac.yml` on startup and when window regains focus (with 1 min cooldown)
 2. If version in manifest > current version, shows "Update Available" banner
 3. User clicks Download → downloads ZIP in background
 4. User clicks "Restart Now" → installs update and restarts
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0ca96280..45ff78d5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,4 +1,4 @@
-# Contributing to 1Code
+# Contributing to Crunch
 
 ## Building from Source
 
@@ -13,9 +13,9 @@ bun run package:mac  # Create distributable
 
 ## Open Source vs Hosted Version
 
-This is the open-source version of 1Code. Some features require the hosted backend at 1code.dev:
+This is the open-source version of Crunch. Some features require the hosted backend at getcrunch.dev:
 
-| Feature | Open Source | Hosted (1code.dev) |
+| Feature | Open Source | Hosted (getcrunch.dev) |
 |---------|-------------|-------------------|
 | Local AI chat | Yes | Yes |
 | Claude Code integration | Yes | Yes |
diff --git a/README.md b/README.md
index 0a25e820..8050c43a 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,16 @@
-# 1Code
+# Crunch
 
-[1Code.dev](https://1code.dev)
+[getcrunch.dev](https://getcrunch.dev)
 
 Best UI for Claude Code with local and remote agent execution.
 
-By [21st.dev](https://21st.dev) team
+By [getcrunch.dev](https://getcrunch.dev) team
 
 > **Platforms:** macOS, Linux, and Windows. Windows support improved thanks to community contributions from [@jesus-mgtc](https://github.com/jesus-mgtc) and [@evgyur](https://github.com/evgyur).
 
-## 1Code vs Claude Code
+## Crunch vs Claude Code
 
-| Feature | 1Code | Claude Code |
+| Feature | Crunch | Claude Code |
 |---------|-------|-------------|
 | **Visual UI** | ✅ Cursor-like desktop app | ✅ |
 | **Git Worktree Isolation** | ✅ Each chat runs in isolated worktree | ✅ |
@@ -90,11 +90,11 @@ bun run package:mac  # or package:win, package:linux
 
 > **Important:** The `claude:download` step downloads the Claude CLI binary which is required for the agent chat to work. If you skip this step, the app will build but agent functionality won't work.
 
-### Option 2: Subscribe to 1code.dev (recommended)
+### Option 2: Subscribe to getcrunch.dev (recommended)
 
-Get pre-built releases + background agents support by subscribing at [1code.dev](https://1code.dev).
+Get pre-built releases + background agents support by subscribing at [getcrunch.dev](https://getcrunch.dev).
 
-Your subscription helps us maintain and improve 1Code.
+Your subscription helps us maintain and improve Crunch.
 
 ## Development
 
diff --git a/bun.lockb b/bun.lockb
index b29263e1..45a6475b 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 277f33b9..0bbf3781 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
-  "name": "21st-desktop",
+  "name": "crunch-desktop",
   "version": "0.0.46",
   "private": true,
-  "description": "1Code - UI for parallel work with AI agents",
+  "description": "Crunch - UI for parallel work with AI agents",
   "author": {
-    "name": "21st.dev",
-    "email": "support@21st.dev"
+    "name": "getcrunch.dev",
+    "email": "support@getcrunch.dev"
   },
   "main": "out/main/index.js",
   "scripts": {
@@ -36,7 +36,9 @@
     "@anthropic-ai/claude-agent-sdk": "^0.2.12",
     "@git-diff-view/react": "^0.0.35",
     "@git-diff-view/shiki": "^0.0.36",
+    "@glideapps/glide-data-grid": "^6.0.3",
     "@modelcontextprotocol/sdk": "^1.25.3",
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -61,6 +63,7 @@
     "@trpc/client": "^11.7.1",
     "@trpc/react-query": "^11.7.1",
     "@trpc/server": "^11.7.1",
+    "@types/lodash-es": "^4.17.12",
     "@xterm/addon-canvas": "^0.7.0",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-search": "^0.16.0",
@@ -74,15 +77,21 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "drizzle-orm": "^0.45.1",
+    "duckdb": "^1.4.3",
     "electron-log": "^5.4.3",
     "electron-updater": "^6.7.3",
     "gray-matter": "^4.0.3",
     "jotai": "^2.11.1",
+    "jotai-family": "^1.0.1",
+    "lodash-es": "^4.17.22",
     "lucide-react": "^0.468.0",
     "mermaid": "^11.12.2",
+    "monaco-editor": "^0.55.1",
     "motion": "^11.15.0",
     "next-themes": "^0.4.4",
     "node-pty": "^1.1.0",
+    "papaparse": "^5.5.3",
+    "parquetjs-lite": "^0.8.7",
     "pidtree": "^0.6.0",
     "posthog-js": "^1.239.1",
     "posthog-node": "^5.20.0",
@@ -103,6 +112,7 @@
     "tailwindcss-animate": "^1.0.7",
     "trpc-electron": "^0.1.2",
     "unique-names-generator": "^4.7.1",
+    "xlsx": "^0.18.5",
     "xterm": "^5.3.0",
     "zod": "^3.24.1",
     "zustand": "^5.0.3"
@@ -112,6 +122,7 @@
     "@electron-toolkit/utils": "^4.0.0",
     "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^20.17.50",
+    "@types/papaparse": "^5.5.2",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@types/react-syntax-highlighter": "^15.5.13",
@@ -129,14 +140,14 @@
     "vite": "^6.3.4"
   },
   "build": {
-    "appId": "dev.21st.agents",
-    "productName": "1Code",
+    "appId": "dev.getcrunch.app",
+    "productName": "Crunch",
     "npmRebuild": true,
     "protocols": [
       {
-        "name": "1Code",
+        "name": "Crunch",
         "schemes": [
-          "twentyfirst-agents"
+          "crunch"
         ]
       }
     ],
@@ -194,7 +205,7 @@
       "entitlements": "build/entitlements.mac.plist",
       "entitlementsInherit": "build/entitlements.mac.plist",
       "extendInfo": {
-        "NSMicrophoneUsageDescription": "1Code needs microphone access for voice dictation"
+        "NSMicrophoneUsageDescription": "Crunch needs microphone access for voice dictation"
       }
     },
     "dmg": {
@@ -240,7 +251,7 @@
     },
     "publish": {
       "provider": "generic",
-      "url": "https://cdn.21st.dev/releases/desktop"
+      "url": "https://cdn.getcrunch.dev/releases/desktop"
     }
   }
 }
diff --git a/src/main/auth-manager.ts b/src/main/auth-manager.ts
index e31b7bc1..2f13a641 100644
--- a/src/main/auth-manager.ts
+++ b/src/main/auth-manager.ts
@@ -5,9 +5,9 @@ import { AUTH_SERVER_PORT } from "./constants"
 // Get API URL - in packaged app always use production, in dev allow override
 function getApiBaseUrl(): string {
   if (app.isPackaged) {
-    return "https://21st.dev"
+    return "https://www.getcrunch.dev"
   }
-  return import.meta.env.MAIN_VITE_API_URL || "https://21st.dev"
+  return import.meta.env.MAIN_VITE_API_URL || "https://www.getcrunch.dev"
 }
 
 export class AuthManager {
@@ -79,7 +79,7 @@ export class AuthManager {
     const platform = process.platform
     const arch = process.arch
     const version = app.getVersion()
-    return `21st Desktop ${version} (${platform} ${arch})`
+    return `Crunch Desktop ${version} (${platform} ${arch})`
   }
 
   /**
@@ -216,7 +216,7 @@ export class AuthManager {
     if (this.isDev) {
       authUrl += `&callback=${encodeURIComponent(`http://localhost:${AUTH_SERVER_PORT}/auth/callback`)}`
       // Pass dev protocol so production web can use correct deep link if callback fails
-      authUrl += `&protocol=twentyfirst-agents-dev`
+      authUrl += `&protocol=crunch-dev`
     }
 
     shell.openExternal(authUrl)
diff --git a/src/main/index.ts b/src/main/index.ts
index 9c0bb912..969d389e 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -40,7 +40,7 @@ import { IS_DEV, AUTH_SERVER_PORT } from "./constants"
 
 // Deep link protocol (must match package.json build.protocols.schemes)
 // Use different protocol in dev to avoid conflicts with production app
-const PROTOCOL = IS_DEV ? "twentyfirst-agents-dev" : "twentyfirst-agents"
+const PROTOCOL = IS_DEV ? "crunch-dev" : "crunch"
 
 // Set dev mode userData path BEFORE requestSingleInstanceLock()
 // This ensures dev and prod have separate instance locks
@@ -75,13 +75,13 @@ if (app.isPackaged && !IS_DEV) {
 // In dev mode, allow override via MAIN_VITE_API_URL env variable
 export function getBaseUrl(): string {
   if (app.isPackaged) {
-    return "https://21st.dev"
+    return "https://getcrunch.dev"
   }
-  return import.meta.env.MAIN_VITE_API_URL || "https://21st.dev"
+  return import.meta.env.MAIN_VITE_API_URL || "https://getcrunch.dev"
 }
 
 export function getAppUrl(): string {
-  return process.env.ELECTRON_RENDERER_URL || "https://21st.dev/agents"
+  return process.env.ELECTRON_RENDERER_URL || "https://getcrunch.dev/agents"
 }
 
 // Auth manager singleton (use the one from auth-manager module)
@@ -185,7 +185,7 @@ function handleDeepLink(url: string): void {
   try {
     const parsed = new URL(url)
 
-    // Handle auth callback: twentyfirst-agents://auth?code=xxx
+    // Handle auth callback: crunch://auth?code=xxx
     if (parsed.pathname === "/auth" || parsed.host === "auth") {
       const code = parsed.searchParams.get("code")
       if (code) {
@@ -194,7 +194,7 @@ function handleDeepLink(url: string): void {
       }
     }
 
-    // Handle MCP OAuth callback: twentyfirst-agents://mcp-oauth?code=xxx&state=yyy
+    // Handle MCP OAuth callback: crunch://mcp-oauth?code=xxx&state=yyy
     if (parsed.pathname === "/mcp-oauth" || parsed.host === "mcp-oauth") {
       const code = parsed.searchParams.get("code")
       const state = parsed.searchParams.get("state")
@@ -310,7 +310,7 @@ const server = createServer((req, res) => {
 <head>
   <meta charset="UTF-8">
   <link rel="icon" type="image/svg+xml" href="${FAVICON_DATA_URI}">
-  <title>1Code - Authentication</title>
+  <title>Crunch - Authentication</title>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     :root {
@@ -394,7 +394,7 @@ const server = createServer((req, res) => {
 <head>
   <meta charset="UTF-8">
   <link rel="icon" type="image/svg+xml" href="${FAVICON_DATA_URI}">
-  <title>1Code - MCP Authentication</title>
+  <title>Crunch - MCP Authentication</title>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     :root {
@@ -563,10 +563,10 @@ if (gotTheLock) {
 
     // Set app user model ID for Windows (different in dev to avoid taskbar conflicts)
     if (process.platform === "win32") {
-      app.setAppUserModelId(IS_DEV ? "dev.21st.1code.dev" : "dev.21st.1code")
+      app.setAppUserModelId(IS_DEV ? "dev.getcrunch.app.dev" : "dev.getcrunch.app")
     }
 
-    console.log(`[App] Starting 1Code${IS_DEV ? " (DEV)" : ""}...`)
+    console.log(`[App] Starting Crunch${IS_DEV ? " (DEV)" : ""}...`)
 
     // Verify protocol registration after app is ready
     // This helps diagnose first-install issues where the protocol isn't recognized yet
@@ -590,10 +590,10 @@ if (gotTheLock) {
 
     // Set About panel options with Claude Code version
     app.setAboutPanelOptions({
-      applicationName: "1Code",
+      applicationName: "Crunch",
       applicationVersion: app.getVersion(),
       version: `Claude Code ${claudeCodeVersion}`,
-      copyright: "Copyright © 2026 21st.dev",
+      copyright: "Copyright © 2026 getcrunch.dev",
     })
 
     // Track update availability for menu
@@ -610,7 +610,7 @@ if (gotTheLock) {
         {
           label: app.name,
           submenu: [
-            { role: "about", label: "About 1Code" },
+            { role: "about", label: "About Crunch" },
             {
               label: updateAvailable
                 ? `Update to v${availableVersion}...`
@@ -632,8 +632,8 @@ if (gotTheLock) {
             { type: "separator" },
             {
               label: isCliInstalled()
-                ? "Uninstall '1code' Command..."
-                : "Install '1code' Command in PATH...",
+                ? "Uninstall 'crunch' Command..."
+                : "Install 'crunch' Command in PATH...",
               click: async () => {
                 const { dialog } = await import("electron")
                 if (isCliInstalled()) {
@@ -642,7 +642,7 @@ if (gotTheLock) {
                     dialog.showMessageBox({
                       type: "info",
                       message: "CLI command uninstalled",
-                      detail: "The '1code' command has been removed from your PATH.",
+                      detail: "The 'crunch' command has been removed from your PATH.",
                     })
                     buildMenu()
                   } else {
@@ -655,7 +655,7 @@ if (gotTheLock) {
                       type: "info",
                       message: "CLI command installed",
                       detail:
-                        "You can now use '1code .' in any terminal to open 1Code in that directory.",
+                        "You can now use 'crunch .' in any terminal to open Crunch in that directory.",
                     })
                     buildMenu()
                   } else {
@@ -756,7 +756,7 @@ if (gotTheLock) {
               label: "Learn More",
               click: async () => {
                 const { shell } = await import("electron")
-                await shell.openExternal("https://21st.dev")
+                await shell.openExternal("https://getcrunch.dev")
               },
             },
           ],
@@ -877,7 +877,7 @@ if (gotTheLock) {
       }
     }, 3000)
 
-    // Handle directory argument from CLI (e.g., `1code /path/to/project`)
+    // Handle directory argument from CLI (e.g., `crunch /path/to/project`)
     parseLaunchDirectory()
 
     // Handle deep link from app launch (Windows/Linux)
diff --git a/src/main/lib/analytics.ts b/src/main/lib/analytics.ts
index bfbdd0a2..eedf4329 100644
--- a/src/main/lib/analytics.ts
+++ b/src/main/lib/analytics.ts
@@ -1,5 +1,5 @@
 /**
- * PostHog analytics for 1Code Desktop - Main Process
+ * PostHog analytics for Crunch Desktop - Main Process
  * Uses PostHog Node.js SDK for server-side tracking
  */
 
diff --git a/src/main/lib/auto-updater.ts b/src/main/lib/auto-updater.ts
index 2525969e..34b85ff8 100644
--- a/src/main/lib/auto-updater.ts
+++ b/src/main/lib/auto-updater.ts
@@ -24,7 +24,7 @@ function initAutoUpdaterConfig() {
 }
 
 // CDN base URL for updates
-const CDN_BASE = "https://cdn.21st.dev/releases/desktop"
+const CDN_BASE = "https://cdn.getcrunch.dev/releases/desktop"
 
 // Minimum interval between update checks (prevent spam on rapid focus/blur)
 const MIN_CHECK_INTERVAL = 60 * 1000 // 1 minute
diff --git a/src/main/lib/claude-config.ts b/src/main/lib/claude-config.ts
index 74ac115f..7bb0d968 100644
--- a/src/main/lib/claude-config.ts
+++ b/src/main/lib/claude-config.ts
@@ -151,8 +151,8 @@ export function updateMcpServerConfig(
 
 /**
  * Resolve original project path from a worktree path.
- * Supports legacy (~/.21st/worktrees/{projectId}/{chatId}/) and
- * new format (~/.21st/worktrees/{projectName}/{worktreeFolder}/).
+ * Supports legacy (~/.crunch/worktrees/{projectId}/{chatId}/) and
+ * new format (~/.crunch/worktrees/{projectName}/{worktreeFolder}/).
  *
  * @param pathToResolve - Either a worktree path or regular project path
  * @returns The original project path, or the input if not a worktree, or null if resolution fails
@@ -160,7 +160,7 @@ export function updateMcpServerConfig(
 export function resolveProjectPathFromWorktree(
   pathToResolve: string
 ): string | null {
-  const worktreeMarker = path.join(".21st", "worktrees")
+  const worktreeMarker = path.join(".crunch", "worktrees")
 
   // Normalize for cross-platform (handle both / and \ separators)
   const normalizedPath = pathToResolve.replace(/\\/g, "/")
@@ -173,8 +173,8 @@ export function resolveProjectPathFromWorktree(
 
   try {
     // Extract segments from path structure
-    // Path format: /Users/.../.21st/worktrees/{projectSlug}/{worktreeFolder}
-    const worktreeBase = path.join(os.homedir(), ".21st", "worktrees")
+    // Path format: /Users/.../.crunch/worktrees/{projectSlug}/{worktreeFolder}
+    const worktreeBase = path.join(os.homedir(), ".crunch", "worktrees")
     const normalizedBase = worktreeBase.replace(/\\/g, "/")
     const relativePath = normalizedPath
       .replace(normalizedBase, "")
diff --git a/src/main/lib/cli.ts b/src/main/lib/cli.ts
index 4265dcdd..e4d421ec 100644
--- a/src/main/lib/cli.ts
+++ b/src/main/lib/cli.ts
@@ -1,9 +1,9 @@
 /**
- * CLI command support for 1code
- * Allows users to open 1code from terminal with: 1code . or 1code /path/to/project
+ * CLI command support for crunch
+ * Allows users to open crunch from terminal with: crunch . or crunch /path/to/project
  *
  * Based on PR #16 by @caffeinum (Aleksey Bykhun)
- * https://github.com/21st-dev/1code/pull/16
+ * https://github.com/getcrunch-dev/crunch/pull/16
  */
 
 import { app } from "electron"
@@ -11,7 +11,7 @@ import { join } from "path"
 import { existsSync, lstatSync } from "fs"
 import { platform } from "./platform"
 
-// Launch directory from CLI (e.g., `1code /path/to/project`)
+// Launch directory from CLI (e.g., `crunch /path/to/project`)
 let launchDirectory: string | null = null
 
 /**
@@ -25,7 +25,7 @@ export function getLaunchDirectory(): string | null {
 
 /**
  * Parse CLI arguments to find a directory argument
- * Called on app startup to handle `1code .` or `1code /path/to/project`
+ * Called on app startup to handle `crunch .` or `crunch /path/to/project`
  */
 export function parseLaunchDirectory(): void {
   // Look for a directory argument in argv
diff --git a/src/main/lib/config.ts b/src/main/lib/config.ts
index 26409e64..78b9212d 100644
--- a/src/main/lib/config.ts
+++ b/src/main/lib/config.ts
@@ -12,9 +12,9 @@ const IS_DEV = !!process.env.ELECTRON_RENDERER_URL
  */
 export function getApiUrl(): string {
   if (app.isPackaged) {
-    return "https://21st.dev"
+    return "https://getcrunch.dev"
   }
-  return import.meta.env.MAIN_VITE_API_URL || "https://21st.dev"
+  return import.meta.env.MAIN_VITE_API_URL || "https://getcrunch.dev"
 }
 
 /**
diff --git a/src/main/lib/db/schema/index.ts b/src/main/lib/db/schema/index.ts
index a6cf58f4..fdbdd5bf 100644
--- a/src/main/lib/db/schema/index.ts
+++ b/src/main/lib/db/schema/index.ts
@@ -114,7 +114,7 @@ export const anthropicAccounts = sqliteTable("anthropic_accounts", {
     () => new Date(),
   ),
   lastUsedAt: integer("last_used_at", { mode: "timestamp" }),
-  desktopUserId: text("desktop_user_id"), // Reference to 21st.dev user
+  desktopUserId: text("desktop_user_id"), // Reference to getcrunch.dev user
 })
 
 // Tracks which Anthropic account is currently active
diff --git a/src/main/lib/git/worktree-config.ts b/src/main/lib/git/worktree-config.ts
index 30529a26..e790f385 100644
--- a/src/main/lib/git/worktree-config.ts
+++ b/src/main/lib/git/worktree-config.ts
@@ -11,7 +11,7 @@ export interface WorktreeConfig {
   "setup-worktree"?: string[] | string
 }
 
-export type WorktreeConfigSource = "custom" | "cursor" | "1code" | null
+export type WorktreeConfigSource = "custom" | "cursor" | "crunch" | null
 
 export interface DetectedWorktreeConfig {
   config: WorktreeConfig | null
@@ -20,7 +20,7 @@ export interface DetectedWorktreeConfig {
 }
 
 const CURSOR_CONFIG_PATH = ".cursor/worktrees.json"
-const ONECODE_CONFIG_PATH = ".1code/worktree.json"
+const CRUNCH_CONFIG_PATH = ".crunch/worktree.json"
 
 async function fileExists(filePath: string): Promise<boolean> {
   try {
@@ -42,7 +42,7 @@ async function readJsonFile<T>(filePath: string): Promise<T | null> {
 
 /**
  * Detect worktree config for a project
- * Priority: custom path > .cursor/worktrees.json > .1code/worktree.json
+ * Priority: custom path > .cursor/worktrees.json > .crunch/worktree.json
  */
 export async function detectWorktreeConfig(
   projectPath: string,
@@ -68,12 +68,12 @@ export async function detectWorktreeConfig(
     }
   }
 
-  // 3. Check .1code/worktree.json
-  const onecodePath = join(projectPath, ONECODE_CONFIG_PATH)
-  if (await fileExists(onecodePath)) {
-    const config = await readJsonFile<WorktreeConfig>(onecodePath)
+  // 3. Check .crunch/worktree.json
+  const crunchPath = join(projectPath, CRUNCH_CONFIG_PATH)
+  if (await fileExists(crunchPath)) {
+    const config = await readJsonFile<WorktreeConfig>(crunchPath)
     if (config) {
-      return { config, path: onecodePath, source: "1code" }
+      return { config, path: crunchPath, source: "crunch" }
     }
   }
 
@@ -88,19 +88,19 @@ export async function getAvailableConfigPaths(
   projectPath: string,
 ): Promise<{
   cursor: { exists: boolean; path: string }
-  onecode: { exists: boolean; path: string }
+  crunch: { exists: boolean; path: string }
 }> {
   const cursorPath = join(projectPath, CURSOR_CONFIG_PATH)
-  const onecodePath = join(projectPath, ONECODE_CONFIG_PATH)
+  const crunchPath = join(projectPath, CRUNCH_CONFIG_PATH)
 
   return {
     cursor: {
       exists: await fileExists(cursorPath),
       path: cursorPath,
     },
-    onecode: {
-      exists: await fileExists(onecodePath),
-      path: onecodePath,
+    crunch: {
+      exists: await fileExists(crunchPath),
+      path: crunchPath,
     },
   }
 }
@@ -112,14 +112,14 @@ export async function getAvailableConfigPaths(
 export async function saveWorktreeConfig(
   projectPath: string,
   config: WorktreeConfig,
-  target: "cursor" | "1code" | string = "1code",
+  target: "cursor" | "crunch" | string = "crunch",
 ): Promise<{ success: boolean; path: string; error?: string }> {
   let targetPath: string
 
   if (target === "cursor") {
     targetPath = join(projectPath, CURSOR_CONFIG_PATH)
-  } else if (target === "1code") {
-    targetPath = join(projectPath, ONECODE_CONFIG_PATH)
+  } else if (target === "crunch") {
+    targetPath = join(projectPath, CRUNCH_CONFIG_PATH)
   } else {
     // Custom path
     targetPath = isAbsolute(target) ? target : join(projectPath, target)
diff --git a/src/main/lib/git/worktree.ts b/src/main/lib/git/worktree.ts
index c8963c2a..87462088 100644
--- a/src/main/lib/git/worktree.ts
+++ b/src/main/lib/git/worktree.ts
@@ -921,7 +921,7 @@ export async function createWorktreeForChat(
 		const baseBranch = selectedBaseBranch || await getDefaultBranch(projectPath);
 
 		const branch = generateBranchName();
-		const worktreesDir = join(homedir(), ".21st", "worktrees");
+		const worktreesDir = join(homedir(), ".crunch", "worktrees");
 		const projectWorktreeDir = join(worktreesDir, projectSlug);
 		const folderName = generateWorktreeFolderName(projectWorktreeDir);
 		const worktreePath = join(projectWorktreeDir, folderName);
diff --git a/src/main/lib/mcp-auth.ts b/src/main/lib/mcp-auth.ts
index 0d4f4093..a0928893 100644
--- a/src/main/lib/mcp-auth.ts
+++ b/src/main/lib/mcp-auth.ts
@@ -28,7 +28,7 @@ export async function fetchMcpTools(
 
   try {
     client = new Client({
-      name: '21st-desktop',
+      name: 'crunch-desktop',
       version: '1.0.0',
     });
 
@@ -90,7 +90,7 @@ export async function fetchMcpToolsStdio(config: {
 
   try {
     const client = new Client({
-      name: '21st-desktop',
+      name: 'crunch-desktop',
       version: '1.0.0',
     });
 
diff --git a/src/main/lib/oauth.ts b/src/main/lib/oauth.ts
index 79e68efb..df152057 100644
--- a/src/main/lib/oauth.ts
+++ b/src/main/lib/oauth.ts
@@ -47,8 +47,8 @@ export interface OAuthCallbacks {
 const CALLBACK_PORT = 8914;
 const CALLBACK_PATH = '/callback';
 // Client names for OAuth registration
-// Some MCP servers (like Figma) have an allowlist - try '1code' first, fall back to 'Codex'
-const CLIENT_NAME = '1code';
+// Some MCP servers (like Figma) have an allowlist - try 'crunch' first, fall back to 'Codex'
+const CLIENT_NAME = 'crunch';
 const FALLBACK_CLIENT_NAME = 'Codex';
 
 /**
@@ -798,7 +798,7 @@ export class CraftOAuth {
       }
     } else {
       // No registration endpoint - use default client ID
-      clientId = '1code';
+      clientId = 'crunch';
     }
 
     const pkce = generatePKCE();
diff --git a/src/main/lib/parsers/csv-parser.ts b/src/main/lib/parsers/csv-parser.ts
new file mode 100644
index 00000000..3b21b04b
--- /dev/null
+++ b/src/main/lib/parsers/csv-parser.ts
@@ -0,0 +1,151 @@
+import Papa from "papaparse"
+import { readFile } from "node:fs/promises"
+import type { ParsedData, ParsedColumn, ColumnType } from "./types"
+
+/**
+ * Infer the type of a value
+ */
+function inferType(value: unknown): ColumnType {
+  if (value === null || value === undefined || value === "") {
+    return "null"
+  }
+
+  if (typeof value === "boolean") {
+    return "boolean"
+  }
+
+  if (typeof value === "number" && !isNaN(value)) {
+    return "number"
+  }
+
+  const strValue = String(value).trim()
+
+  // Check for boolean strings
+  if (strValue.toLowerCase() === "true" || strValue.toLowerCase() === "false") {
+    return "boolean"
+  }
+
+  // Check for number
+  if (strValue !== "" && !isNaN(Number(strValue))) {
+    return "number"
+  }
+
+  // Check for date (ISO format or common formats)
+  const datePatterns = [
+    /^\d{4}-\d{2}-\d{2}$/, // YYYY-MM-DD
+    /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/, // ISO 8601
+    /^\d{2}\/\d{2}\/\d{4}$/, // MM/DD/YYYY
+    /^\d{2}-\d{2}-\d{4}$/, // DD-MM-YYYY
+  ]
+
+  for (const pattern of datePatterns) {
+    if (pattern.test(strValue)) {
+      const date = new Date(strValue)
+      if (!isNaN(date.getTime())) {
+        return "date"
+      }
+    }
+  }
+
+  return "string"
+}
+
+/**
+ * Infer column types from sample rows
+ */
+function inferColumnTypes(
+  columns: string[],
+  rows: Record<string, unknown>[]
+): ParsedColumn[] {
+  const sampleSize = Math.min(rows.length, 100)
+  const typeMap = new Map<string, Set<ColumnType>>()
+
+  // Initialize type sets for each column
+  for (const col of columns) {
+    typeMap.set(col, new Set())
+  }
+
+  // Sample rows to infer types
+  for (let i = 0; i < sampleSize; i++) {
+    const row = rows[i]
+    for (const col of columns) {
+      const value = row[col]
+      const type = inferType(value)
+      typeMap.get(col)?.add(type)
+    }
+  }
+
+  // Determine final type for each column
+  return columns.map((name) => {
+    const types = typeMap.get(name) || new Set()
+
+    // Remove null from consideration if there are other types
+    types.delete("null")
+
+    if (types.size === 0) {
+      return { name, type: "null" as ColumnType }
+    }
+
+    if (types.size === 1) {
+      return { name, type: Array.from(types)[0] }
+    }
+
+    // Multiple types = mixed
+    return { name, type: "mixed" as ColumnType }
+  })
+}
+
+/**
+ * Parse a CSV or TSV file
+ */
+export async function parseCsvFile(
+  filePath: string,
+  options: { limit?: number; offset?: number } = {}
+): Promise<ParsedData> {
+  const { limit = 1000, offset = 0 } = options
+
+  const content = await readFile(filePath, "utf-8")
+
+  // Detect delimiter (CSV vs TSV)
+  const firstLine = content.split("\n")[0] || ""
+  const delimiter = firstLine.includes("\t") ? "\t" : ","
+
+  const result = Papa.parse<Record<string, unknown>>(content, {
+    header: true,
+    delimiter,
+    skipEmptyLines: true,
+    dynamicTyping: true, // Automatically convert numbers
+  })
+
+  if (result.errors.length > 0) {
+    console.warn("[csv-parser] Parse warnings:", result.errors.slice(0, 5))
+  }
+
+  const allRows = result.data
+  const totalRows = allRows.length
+  const columns = result.meta.fields || []
+
+  // Apply offset and limit
+  const slicedRows = allRows.slice(offset, offset + limit)
+  const truncated = offset + limit < totalRows
+
+  // Infer column types
+  const parsedColumns = inferColumnTypes(columns, slicedRows)
+
+  return {
+    columns: parsedColumns,
+    rows: slicedRows,
+    totalRows,
+    truncated,
+  }
+}
+
+/**
+ * Count rows in a CSV file without loading all data
+ */
+export async function countCsvRows(filePath: string): Promise<number> {
+  const content = await readFile(filePath, "utf-8")
+  const lines = content.split("\n").filter((line) => line.trim() !== "")
+  // Subtract 1 for header row
+  return Math.max(0, lines.length - 1)
+}
diff --git a/src/main/lib/parsers/duckdb-parser.ts b/src/main/lib/parsers/duckdb-parser.ts
new file mode 100644
index 00000000..3e25fcb8
--- /dev/null
+++ b/src/main/lib/parsers/duckdb-parser.ts
@@ -0,0 +1,414 @@
+import type { ParsedData, ParsedColumn, ColumnType } from "./types"
+import duckdb from "duckdb"
+import path from "node:path"
+
+/**
+ * DuckDB-supported file types for this parser
+ */
+export type DuckDBFileType = "parquet" | "excel" | "arrow"
+
+/**
+ * Detect DuckDB file type from extension
+ */
+export function getDuckDBFileType(filePath: string): DuckDBFileType | null {
+  const ext = path.extname(filePath).toLowerCase()
+  switch (ext) {
+    case ".parquet":
+    case ".pq":
+      return "parquet"
+    case ".xlsx":
+    case ".xls":
+      return "excel"
+    case ".arrow":
+    case ".feather":
+    case ".ipc":
+      return "arrow"
+    default:
+      return null
+  }
+}
+
+/**
+ * Map DuckDB types to our column types
+ */
+function mapDuckDBType(duckdbType: string): ColumnType {
+  const type = duckdbType?.toUpperCase() || ""
+
+  // Integer types
+  if (
+    type.includes("INT") ||
+    type.includes("BIGINT") ||
+    type.includes("SMALLINT") ||
+    type.includes("TINYINT") ||
+    type.includes("HUGEINT")
+  ) {
+    return "number"
+  }
+
+  // Float types
+  if (
+    type.includes("FLOAT") ||
+    type.includes("DOUBLE") ||
+    type.includes("DECIMAL") ||
+    type.includes("REAL")
+  ) {
+    return "number"
+  }
+
+  // Boolean
+  if (type.includes("BOOL")) {
+    return "boolean"
+  }
+
+  // Date/Time types
+  if (
+    type.includes("DATE") ||
+    type.includes("TIME") ||
+    type.includes("TIMESTAMP")
+  ) {
+    return "date"
+  }
+
+  // Default to string for everything else
+  return "string"
+}
+
+/**
+ * Process a row to handle BigInt and Date values for JSON serialization
+ */
+function processRow(row: Record<string, unknown>): Record<string, unknown> {
+  const processed: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(row)) {
+    if (typeof value === "bigint") {
+      processed[key] = Number(value)
+    } else if (value instanceof Date) {
+      processed[key] = value.toISOString()
+    } else if (Buffer.isBuffer(value)) {
+      processed[key] = value.toString("utf-8")
+    } else {
+      processed[key] = value
+    }
+  }
+  return processed
+}
+
+/**
+ * Execute a DuckDB query and return results as a promise
+ */
+function queryDuckDB(
+  db: duckdb.Database,
+  sql: string
+): Promise<Record<string, unknown>[]> {
+  return new Promise((resolve, reject) => {
+    db.all(sql, (err, rows) => {
+      if (err) {
+        reject(err)
+      } else {
+        resolve(rows as Record<string, unknown>[])
+      }
+    })
+  })
+}
+
+/**
+ * Get the DuckDB read function for a file type
+ */
+function getReadFunction(
+  fileType: DuckDBFileType,
+  escapedPath: string,
+  sheetName?: string
+): string {
+  switch (fileType) {
+    case "parquet":
+      return `read_parquet('${escapedPath}')`
+    case "excel":
+      // If a sheet name is provided, use it
+      if (sheetName) {
+        const escapedSheet = sheetName.replace(/'/g, "''")
+        return `read_xlsx('${escapedPath}', sheet='${escapedSheet}')`
+      }
+      return `read_xlsx('${escapedPath}')`
+    case "arrow":
+      return `read_parquet('${escapedPath}')` // DuckDB uses read_parquet for Arrow IPC files too
+    default:
+      throw new Error(`Unsupported file type: ${fileType}`)
+  }
+}
+
+/**
+ * Install required DuckDB extensions for file type
+ */
+async function installExtensions(
+  db: duckdb.Database,
+  fileType: DuckDBFileType
+): Promise<void> {
+  if (fileType === "excel") {
+    // DuckDB 1.2+ has native excel extension for xlsx files
+    await queryDuckDB(db, "INSTALL excel")
+    await queryDuckDB(db, "LOAD excel")
+  }
+}
+
+export interface DuckDBParseOptions {
+  limit?: number
+  offset?: number
+  sheetName?: string // For Excel files
+}
+
+/**
+ * Parse a file using DuckDB and return structured data
+ */
+export async function parseDuckDBFile(
+  filePath: string,
+  options: DuckDBParseOptions = {}
+): Promise<ParsedData> {
+  const { limit = 1000, offset = 0, sheetName } = options
+
+  const fileType = getDuckDBFileType(filePath)
+  if (!fileType) {
+    throw new Error(`Unsupported file type for DuckDB parser: ${filePath}`)
+  }
+
+  // Escape single quotes in file path for SQL
+  const escapedPath = filePath.replace(/'/g, "''")
+  const readFn = getReadFunction(fileType, escapedPath, sheetName)
+
+  const db = new duckdb.Database(":memory:")
+
+  try {
+    // Install extensions if needed
+    await installExtensions(db, fileType)
+
+    // Get column info using DESCRIBE
+    const describeResult = await queryDuckDB(
+      db,
+      `DESCRIBE SELECT * FROM ${readFn}`
+    )
+
+    const columns: ParsedColumn[] = describeResult.map((row) => ({
+      name: String(row.column_name || row.name || ""),
+      type: mapDuckDBType(String(row.column_type || row.type || "")),
+    }))
+
+    // Get total row count
+    const countResult = await queryDuckDB(
+      db,
+      `SELECT COUNT(*) as cnt FROM ${readFn}`
+    )
+    const totalRows = Number(countResult[0]?.cnt || 0)
+
+    // Get rows with pagination
+    const dataResult = await queryDuckDB(
+      db,
+      `SELECT * FROM ${readFn} LIMIT ${limit} OFFSET ${offset}`
+    )
+
+    const rows = dataResult.map(processRow)
+
+    db.close()
+
+    return {
+      columns,
+      rows,
+      totalRows,
+      truncated: offset + rows.length < totalRows,
+    }
+  } catch (error) {
+    db.close()
+    throw error
+  }
+}
+
+/**
+ * Get row count from a file without reading all data
+ */
+export async function getDuckDBRowCount(filePath: string): Promise<number> {
+  const fileType = getDuckDBFileType(filePath)
+  if (!fileType) {
+    throw new Error(`Unsupported file type for DuckDB parser: ${filePath}`)
+  }
+
+  const escapedPath = filePath.replace(/'/g, "''")
+  const readFn = getReadFunction(fileType, escapedPath)
+  const db = new duckdb.Database(":memory:")
+
+  try {
+    await installExtensions(db, fileType)
+
+    const result = await queryDuckDB(
+      db,
+      `SELECT COUNT(*) as cnt FROM ${readFn}`
+    )
+    const count = Number(result[0]?.cnt || 0)
+    db.close()
+    return count
+  } catch (error) {
+    db.close()
+    throw error
+  }
+}
+
+/**
+ * Get column info from a file without reading data
+ */
+export async function getDuckDBColumns(
+  filePath: string
+): Promise<ParsedColumn[]> {
+  const fileType = getDuckDBFileType(filePath)
+  if (!fileType) {
+    throw new Error(`Unsupported file type for DuckDB parser: ${filePath}`)
+  }
+
+  const escapedPath = filePath.replace(/'/g, "''")
+  const readFn = getReadFunction(fileType, escapedPath)
+  const db = new duckdb.Database(":memory:")
+
+  try {
+    await installExtensions(db, fileType)
+
+    const result = await queryDuckDB(
+      db,
+      `DESCRIBE SELECT * FROM ${readFn}`
+    )
+
+    const columns: ParsedColumn[] = result.map((row) => ({
+      name: String(row.column_name || row.name || ""),
+      type: mapDuckDBType(String(row.column_type || row.type || "")),
+    }))
+
+    db.close()
+    return columns
+  } catch (error) {
+    db.close()
+    throw error
+  }
+}
+
+/**
+ * Validate SQL query to prevent dangerous operations
+ * Only allows SELECT statements for security
+ */
+function validateSqlQuery(sql: string): void {
+  const trimmedSql = sql.trim().toUpperCase()
+
+  // Only allow SELECT statements
+  if (!trimmedSql.startsWith("SELECT")) {
+    throw new Error("Only SELECT queries are allowed")
+  }
+
+  // Block dangerous keywords that could modify data or execute system commands
+  const dangerousKeywords = [
+    "INSERT",
+    "UPDATE",
+    "DELETE",
+    "DROP",
+    "CREATE",
+    "ALTER",
+    "TRUNCATE",
+    "COPY",
+    "EXPORT",
+    "IMPORT",
+    "INSTALL",
+    "LOAD",
+    "ATTACH",
+    "DETACH",
+    "CALL",
+    "EXECUTE",
+    "SET",
+    "PRAGMA",
+  ]
+
+  for (const keyword of dangerousKeywords) {
+    // Check for keyword as a separate word (not part of column name)
+    const regex = new RegExp(`\\b${keyword}\\b`, "i")
+    if (regex.test(sql)) {
+      throw new Error(`Query contains forbidden keyword: ${keyword}`)
+    }
+  }
+}
+
+/**
+ * Execute an arbitrary SQL query against a data file
+ * The file is available as the 'data' table in the query
+ */
+export async function queryDataFile(
+  filePath: string,
+  sql: string,
+  options: { sheetName?: string } = {}
+): Promise<ParsedData> {
+  const { sheetName } = options
+
+  // Validate SQL query for security - only SELECT allowed
+  validateSqlQuery(sql)
+
+  // Detect file type - support CSV in addition to DuckDB native types
+  const ext = path.extname(filePath).toLowerCase()
+  let readFn: string
+
+  // Escape single quotes in file path for SQL
+  const escapedPath = filePath.replace(/'/g, "''")
+
+  // Determine the read function based on file type
+  if (ext === ".csv" || ext === ".tsv") {
+    readFn = `read_csv('${escapedPath}', auto_detect=true)`
+  } else if (ext === ".json" || ext === ".jsonl") {
+    readFn = `read_json('${escapedPath}', auto_detect=true)`
+  } else {
+    const fileType = getDuckDBFileType(filePath)
+    if (!fileType) {
+      throw new Error(`Unsupported file type for SQL queries: ${filePath}`)
+    }
+    readFn = getReadFunction(fileType, escapedPath, sheetName)
+  }
+
+  const db = new duckdb.Database(":memory:")
+
+  try {
+    // Install extensions if needed (for Excel)
+    const fileType = getDuckDBFileType(filePath)
+    if (fileType) {
+      await installExtensions(db, fileType)
+    }
+
+    // Create a view named 'data' for the file
+    await queryDuckDB(db, `CREATE VIEW data AS SELECT * FROM ${readFn}`)
+
+    // Execute the user's SQL query (already validated above)
+    const dataResult = await queryDuckDB(db, sql)
+
+    if (dataResult.length === 0) {
+      db.close()
+      return {
+        columns: [],
+        rows: [],
+        totalRows: 0,
+        truncated: false,
+      }
+    }
+
+    // Infer columns from the first row
+    const columns: ParsedColumn[] = Object.keys(dataResult[0]).map((name) => {
+      const value = dataResult[0][name]
+      let colType: ColumnType = "string"
+      if (typeof value === "number") colType = "number"
+      else if (typeof value === "boolean") colType = "boolean"
+      else if (value instanceof Date) colType = "date"
+      return { name, type: colType }
+    })
+
+    const rows = dataResult.map(processRow)
+
+    db.close()
+
+    return {
+      columns,
+      rows,
+      totalRows: rows.length,
+      truncated: false,
+    }
+  } catch (error) {
+    db.close()
+    throw error
+  }
+}
+
diff --git a/src/main/lib/parsers/excel-parser.ts b/src/main/lib/parsers/excel-parser.ts
new file mode 100644
index 00000000..371e758b
--- /dev/null
+++ b/src/main/lib/parsers/excel-parser.ts
@@ -0,0 +1,227 @@
+import * as XLSX from "xlsx"
+import type { ParsedData, ParsedColumn, ColumnType } from "./types"
+
+/**
+ * Detect column type from a sample of values
+ */
+function detectColumnType(values: unknown[]): ColumnType {
+  // Filter out null/undefined values
+  const validValues = values.filter((v) => v !== null && v !== undefined && v !== "")
+
+  if (validValues.length === 0) return "string"
+
+  // Check the first few non-null values
+  const sample = validValues.slice(0, 10)
+
+  // Check if all values are numbers
+  if (sample.every((v) => typeof v === "number")) {
+    return "number"
+  }
+
+  // Check if all values are booleans
+  if (sample.every((v) => typeof v === "boolean")) {
+    return "boolean"
+  }
+
+  // Check if values look like dates
+  if (
+    sample.every((v) => {
+      if (v instanceof Date) return true
+      if (typeof v === "number" && v > 25569 && v < 100000) {
+        // Excel date serial numbers (days since 1900-01-01)
+        return true
+      }
+      return false
+    })
+  ) {
+    return "date"
+  }
+
+  return "string"
+}
+
+/**
+ * Convert Excel date serial number to ISO string
+ */
+function excelDateToISO(serial: number): string {
+  // Excel date serial: days since 1900-01-01 (with bug: 1900 is treated as leap year)
+  const utcDays = Math.floor(serial - 25569)
+  const utcValue = utcDays * 86400 * 1000
+  return new Date(utcValue).toISOString()
+}
+
+/**
+ * Process a cell value for output
+ */
+function processValue(value: unknown, colType: ColumnType): unknown {
+  if (value === null || value === undefined) return null
+
+  // Handle Date objects
+  if (value instanceof Date) {
+    return value.toISOString()
+  }
+
+  // Handle Excel date serial numbers when column is detected as date
+  if (colType === "date" && typeof value === "number") {
+    try {
+      return excelDateToISO(value)
+    } catch {
+      return value
+    }
+  }
+
+  return value
+}
+
+export interface ExcelParseOptions {
+  limit?: number
+  offset?: number
+  sheetName?: string
+}
+
+/**
+ * List all sheet names in an Excel file
+ * Supports both .xls and .xlsx formats
+ */
+export function listExcelSheets(filePath: string): string[] {
+  try {
+    // Read workbook with minimal parsing (just enough to get sheet names)
+    const workbook = XLSX.readFile(filePath, {
+      type: "file",
+      bookSheets: true, // Only read sheet names, not data
+    })
+
+    return workbook.SheetNames
+  } catch (error) {
+    console.error("[excel-parser] Failed to list sheets:", error)
+    return []
+  }
+}
+
+/**
+ * Parse an Excel file and return structured data
+ * Supports both .xls and .xlsx formats
+ */
+export function parseExcelFile(
+  filePath: string,
+  options: ExcelParseOptions = {}
+): ParsedData {
+  const { limit = 1000, offset = 0, sheetName } = options
+
+  try {
+    // Read the workbook
+    const workbook = XLSX.readFile(filePath, {
+      type: "file",
+      cellDates: true, // Parse dates as Date objects
+      cellNF: false, // Don't parse number formats
+      cellText: false, // Don't generate text
+    })
+
+    // Get the sheet to read - validate the requested sheet exists, otherwise fall back to first sheet
+    let targetSheet = sheetName
+    if (targetSheet && !workbook.SheetNames.includes(targetSheet)) {
+      console.warn(`[excel-parser] Requested sheet "${targetSheet}" not found, falling back to first sheet`)
+      targetSheet = undefined
+    }
+    targetSheet = targetSheet || workbook.SheetNames[0]
+
+    if (!targetSheet) {
+      return {
+        columns: [],
+        rows: [],
+        totalRows: 0,
+        truncated: false,
+      }
+    }
+
+    const worksheet = workbook.Sheets[targetSheet]
+    if (!worksheet) {
+      return {
+        columns: [],
+        rows: [],
+        totalRows: 0,
+        truncated: false,
+      }
+    }
+
+    // Convert to JSON with header row
+    const jsonData = XLSX.utils.sheet_to_json<Record<string, unknown>>(worksheet, {
+      header: 1, // Use array format first to get all rows including header
+      defval: null, // Default value for empty cells
+      blankrows: false, // Skip blank rows
+    }) as unknown[][]
+
+    if (jsonData.length === 0) {
+      return {
+        columns: [],
+        rows: [],
+        totalRows: 0,
+        truncated: false,
+      }
+    }
+
+    // First row is headers
+    const headerRow = jsonData[0] as unknown[]
+    const headers = headerRow.map((h, i) => (h != null ? String(h) : `Column${i + 1}`))
+
+    // Data rows (skip header)
+    const dataRows = jsonData.slice(1)
+    const totalRows = dataRows.length
+
+    // Detect column types from sample data
+    const columnTypes: ColumnType[] = headers.map((_, colIndex) => {
+      const sampleValues = dataRows.slice(0, 100).map((row) => (row as unknown[])[colIndex])
+      return detectColumnType(sampleValues)
+    })
+
+    // Build columns array
+    const columns: ParsedColumn[] = headers.map((name, i) => ({
+      name,
+      type: columnTypes[i],
+    }))
+
+    // Apply pagination
+    const paginatedRows = dataRows.slice(offset, offset + limit)
+
+    // Convert to objects with processed values
+    const rows = paginatedRows.map((row) => {
+      const rowArray = row as unknown[]
+      const obj: Record<string, unknown> = {}
+      headers.forEach((header, i) => {
+        obj[header] = processValue(rowArray[i], columnTypes[i])
+      })
+      return obj
+    })
+
+    return {
+      columns,
+      rows,
+      totalRows,
+      truncated: offset + rows.length < totalRows,
+    }
+  } catch (error) {
+    console.error("[excel-parser] Failed to parse Excel file:", error)
+    throw error
+  }
+}
+
+/**
+ * Execute a SQL-like query on an Excel file
+ * Note: For full SQL support, this should be combined with DuckDB
+ * This function converts the Excel data to a format DuckDB can use
+ */
+export function getExcelDataForDuckDB(
+  filePath: string,
+  sheetName?: string
+): { columns: ParsedColumn[]; rows: Record<string, unknown>[] } {
+  const result = parseExcelFile(filePath, {
+    sheetName,
+    limit: Number.MAX_SAFE_INTEGER, // Get all rows for SQL queries
+    offset: 0,
+  })
+
+  return {
+    columns: result.columns,
+    rows: result.rows,
+  }
+}
diff --git a/src/main/lib/parsers/index.ts b/src/main/lib/parsers/index.ts
new file mode 100644
index 00000000..d33814c6
--- /dev/null
+++ b/src/main/lib/parsers/index.ts
@@ -0,0 +1,201 @@
+import path from "node:path"
+import { stat } from "node:fs/promises"
+import type { DataFileInfo, DataFileType, ParsedData } from "./types"
+import { parseCsvFile } from "./csv-parser"
+import { parseJsonFile } from "./json-parser"
+import {
+  listSqliteTables as listTables,
+  previewSqliteTable,
+  querySqlite as querySqliteDb,
+} from "./sqlite-parser"
+import {
+  parseDuckDBFile,
+  getDuckDBFileType,
+  queryDataFile as queryDataFileDuckDB,
+} from "./duckdb-parser"
+import {
+  listExcelSheets as listExcelSheetsFromXlsx,
+  parseExcelFile,
+} from "./excel-parser"
+
+// Re-export types
+export * from "./types"
+
+/**
+ * Map file extensions to data file types
+ */
+const DATA_EXTENSIONS: Record<string, DataFileType> = {
+  ".csv": "csv",
+  ".tsv": "csv",
+  ".json": "json",
+  ".jsonl": "json",
+  ".db": "sqlite",
+  ".sqlite": "sqlite",
+  ".sqlite3": "sqlite",
+  ".parquet": "parquet",
+  ".pq": "parquet",
+  ".xlsx": "excel",
+  ".xls": "excel",
+  ".arrow": "arrow",
+  ".feather": "arrow",
+  ".ipc": "arrow",
+}
+
+/**
+ * Detect the data file type from the file path
+ */
+export function detectFileType(filePath: string): DataFileType {
+  const ext = path.extname(filePath).toLowerCase()
+  return DATA_EXTENSIONS[ext] || "unknown"
+}
+
+/**
+ * Check if a file is a supported data file
+ */
+export function isDataFile(filePath: string): boolean {
+  return detectFileType(filePath) !== "unknown"
+}
+
+/**
+ * Get information about a data file
+ */
+export async function getDataFileInfo(filePath: string): Promise<DataFileInfo> {
+  const fileType = detectFileType(filePath)
+  const fileName = path.basename(filePath)
+
+  try {
+    const fileStat = await stat(filePath)
+
+    const info: DataFileInfo = {
+      path: filePath,
+      name: fileName,
+      type: fileType,
+      size: fileStat.size,
+    }
+
+    // For SQLite files, list tables
+    if (fileType === "sqlite") {
+      try {
+        info.tables = listTables(filePath)
+      } catch (error) {
+        console.warn("[parsers] Failed to list SQLite tables:", error)
+        info.tables = []
+      }
+    }
+
+    // For Excel files, list sheets (supports both .xls and .xlsx)
+    if (fileType === "excel") {
+      try {
+        const sheets = listExcelSheetsFromXlsx(filePath)
+        if (sheets.length > 0) {
+          info.tables = sheets
+        }
+      } catch (error) {
+        console.warn("[parsers] Failed to list Excel sheets:", error)
+      }
+    }
+
+    return info
+  } catch (error) {
+    console.error("[parsers] Failed to get file info:", error)
+    return {
+      path: filePath,
+      name: fileName,
+      type: fileType,
+      size: 0,
+    }
+  }
+}
+
+/**
+ * Parse a data file and return structured data
+ */
+export async function parseDataFile(
+  filePath: string,
+  options: { limit?: number; offset?: number; tableName?: string } = {}
+): Promise<ParsedData> {
+  const fileType = detectFileType(filePath)
+  const { limit = 1000, offset = 0, tableName } = options
+
+  switch (fileType) {
+    case "csv":
+      return parseCsvFile(filePath, { limit, offset })
+
+    case "json":
+      return parseJsonFile(filePath, { limit, offset })
+
+    case "parquet":
+    case "arrow":
+      // Use unified DuckDB parser for Parquet and Arrow files
+      return parseDuckDBFile(filePath, { limit, offset })
+
+    case "excel":
+      // Use xlsx library for Excel files (supports both .xls and .xlsx)
+      return parseExcelFile(filePath, { limit, offset, sheetName: tableName })
+
+    case "sqlite": {
+      // For SQLite, we need a table name
+      if (tableName) {
+        return previewSqliteTable(filePath, tableName, { limit, offset })
+      }
+
+      // If no table specified, get the first table
+      const tables = listTables(filePath)
+      if (tables.length === 0) {
+        return {
+          columns: [],
+          rows: [],
+          totalRows: 0,
+          truncated: false,
+        }
+      }
+
+      return previewSqliteTable(filePath, tables[0], { limit, offset })
+    }
+
+    default:
+      throw new Error(`Unsupported file type: ${fileType}`)
+  }
+}
+
+/**
+ * Execute a SQL query on a SQLite file
+ */
+export function querySqlite(filePath: string, sql: string): ParsedData {
+  return querySqliteDb(filePath, sql)
+}
+
+/**
+ * List tables in a SQLite file
+ */
+export function listSqliteTables(filePath: string): string[] {
+  return listTables(filePath)
+}
+
+/**
+ * List sheets in an Excel file (supports both .xls and .xlsx)
+ */
+export function listExcelSheets(filePath: string): string[] {
+  return listExcelSheetsFromXlsx(filePath)
+}
+
+/**
+ * Execute a SQL query against any supported data file (CSV, JSON, Parquet, Excel, Arrow)
+ * The file is available as the 'data' table in the query
+ * For SQLite files, use querySqlite instead
+ */
+export async function queryDataFile(
+  filePath: string,
+  sql: string,
+  options: { sheetName?: string } = {}
+): Promise<ParsedData> {
+  const fileType = detectFileType(filePath)
+
+  // For SQLite, use the SQLite-specific query function
+  if (fileType === "sqlite") {
+    return querySqliteDb(filePath, sql)
+  }
+
+  // For all other types, use DuckDB
+  return queryDataFileDuckDB(filePath, sql, options)
+}
diff --git a/src/main/lib/parsers/json-parser.ts b/src/main/lib/parsers/json-parser.ts
new file mode 100644
index 00000000..380a7419
--- /dev/null
+++ b/src/main/lib/parsers/json-parser.ts
@@ -0,0 +1,208 @@
+import { readFile } from "node:fs/promises"
+import type { ParsedData, ParsedColumn, ColumnType } from "./types"
+
+/**
+ * Infer the type of a value
+ */
+function inferType(value: unknown): ColumnType {
+  if (value === null || value === undefined) {
+    return "null"
+  }
+
+  if (typeof value === "boolean") {
+    return "boolean"
+  }
+
+  if (typeof value === "number" && !isNaN(value)) {
+    return "number"
+  }
+
+  if (typeof value === "string") {
+    // Check for date strings
+    const datePatterns = [
+      /^\d{4}-\d{2}-\d{2}$/,
+      /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/,
+    ]
+
+    for (const pattern of datePatterns) {
+      if (pattern.test(value)) {
+        const date = new Date(value)
+        if (!isNaN(date.getTime())) {
+          return "date"
+        }
+      }
+    }
+
+    return "string"
+  }
+
+  // Objects and arrays are treated as strings (JSON stringified)
+  return "string"
+}
+
+/**
+ * Infer column types from sample rows
+ */
+function inferColumnTypes(
+  columns: string[],
+  rows: Record<string, unknown>[]
+): ParsedColumn[] {
+  const sampleSize = Math.min(rows.length, 100)
+  const typeMap = new Map<string, Set<ColumnType>>()
+
+  for (const col of columns) {
+    typeMap.set(col, new Set())
+  }
+
+  for (let i = 0; i < sampleSize; i++) {
+    const row = rows[i]
+    for (const col of columns) {
+      const value = row[col]
+      const type = inferType(value)
+      typeMap.get(col)?.add(type)
+    }
+  }
+
+  return columns.map((name) => {
+    const types = typeMap.get(name) || new Set()
+    types.delete("null")
+
+    if (types.size === 0) {
+      return { name, type: "null" as ColumnType }
+    }
+
+    if (types.size === 1) {
+      return { name, type: Array.from(types)[0] }
+    }
+
+    return { name, type: "mixed" as ColumnType }
+  })
+}
+
+/**
+ * Extract all unique keys from an array of objects
+ */
+function extractColumns(rows: Record<string, unknown>[]): string[] {
+  const columnSet = new Set<string>()
+  const sampleSize = Math.min(rows.length, 100)
+
+  for (let i = 0; i < sampleSize; i++) {
+    const row = rows[i]
+    if (row && typeof row === "object") {
+      for (const key of Object.keys(row)) {
+        columnSet.add(key)
+      }
+    }
+  }
+
+  return Array.from(columnSet)
+}
+
+/**
+ * Flatten nested objects for display
+ */
+function flattenRow(row: Record<string, unknown>): Record<string, unknown> {
+  const flattened: Record<string, unknown> = {}
+
+  for (const [key, value] of Object.entries(row)) {
+    if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+      // Stringify nested objects
+      flattened[key] = JSON.stringify(value)
+    } else if (Array.isArray(value)) {
+      // Stringify arrays
+      flattened[key] = JSON.stringify(value)
+    } else {
+      flattened[key] = value
+    }
+  }
+
+  return flattened
+}
+
+/**
+ * Parse a JSON file (supports arrays and JSON Lines)
+ */
+export async function parseJsonFile(
+  filePath: string,
+  options: { limit?: number; offset?: number } = {}
+): Promise<ParsedData> {
+  const { limit = 1000, offset = 0 } = options
+
+  const content = await readFile(filePath, "utf-8")
+  let allRows: Record<string, unknown>[] = []
+
+  // Try parsing as JSON array first
+  try {
+    const parsed = JSON.parse(content)
+
+    if (Array.isArray(parsed)) {
+      // JSON array of objects
+      allRows = parsed.filter(
+        (item): item is Record<string, unknown> =>
+          item !== null && typeof item === "object"
+      )
+    } else if (typeof parsed === "object" && parsed !== null) {
+      // Single object - wrap in array
+      allRows = [parsed as Record<string, unknown>]
+    }
+  } catch {
+    // Try parsing as JSON Lines (JSONL)
+    const lines = content.split("\n").filter((line) => line.trim() !== "")
+
+    for (const line of lines) {
+      try {
+        const parsed = JSON.parse(line)
+        if (typeof parsed === "object" && parsed !== null) {
+          allRows.push(parsed as Record<string, unknown>)
+        }
+      } catch {
+        // Skip invalid lines
+        console.warn("[json-parser] Skipping invalid JSON line")
+      }
+    }
+  }
+
+  if (allRows.length === 0) {
+    return {
+      columns: [],
+      rows: [],
+      totalRows: 0,
+      truncated: false,
+    }
+  }
+
+  const totalRows = allRows.length
+
+  // Apply offset and limit
+  const slicedRows = allRows.slice(offset, offset + limit).map(flattenRow)
+  const truncated = offset + limit < totalRows
+
+  // Extract and infer columns
+  const columns = extractColumns(slicedRows)
+  const parsedColumns = inferColumnTypes(columns, slicedRows)
+
+  return {
+    columns: parsedColumns,
+    rows: slicedRows,
+    totalRows,
+    truncated,
+  }
+}
+
+/**
+ * Count rows in a JSON file
+ */
+export async function countJsonRows(filePath: string): Promise<number> {
+  const content = await readFile(filePath, "utf-8")
+
+  try {
+    const parsed = JSON.parse(content)
+    if (Array.isArray(parsed)) {
+      return parsed.length
+    }
+    return 1 // Single object
+  } catch {
+    // JSON Lines - count lines
+    return content.split("\n").filter((line) => line.trim() !== "").length
+  }
+}
diff --git a/src/main/lib/parsers/sqlite-parser.ts b/src/main/lib/parsers/sqlite-parser.ts
new file mode 100644
index 00000000..2ea8e2f2
--- /dev/null
+++ b/src/main/lib/parsers/sqlite-parser.ts
@@ -0,0 +1,304 @@
+import Database from "better-sqlite3"
+import type { ParsedData, ParsedColumn, ColumnType } from "./types"
+
+/**
+ * Map SQLite type affinity to our column types
+ */
+function mapSqliteType(sqliteType: string | null): ColumnType {
+  if (!sqliteType) return "mixed"
+
+  const upperType = sqliteType.toUpperCase()
+
+  if (
+    upperType.includes("INT") ||
+    upperType.includes("REAL") ||
+    upperType.includes("FLOAT") ||
+    upperType.includes("DOUBLE") ||
+    upperType.includes("NUMERIC") ||
+    upperType.includes("DECIMAL")
+  ) {
+    return "number"
+  }
+
+  if (upperType.includes("BOOL")) {
+    return "boolean"
+  }
+
+  if (
+    upperType.includes("DATE") ||
+    upperType.includes("TIME") ||
+    upperType.includes("TIMESTAMP")
+  ) {
+    return "date"
+  }
+
+  if (
+    upperType.includes("TEXT") ||
+    upperType.includes("CHAR") ||
+    upperType.includes("CLOB") ||
+    upperType.includes("VARCHAR")
+  ) {
+    return "string"
+  }
+
+  if (upperType.includes("BLOB")) {
+    return "string" // Display as hex or base64
+  }
+
+  return "mixed"
+}
+
+/**
+ * List all tables in a SQLite database
+ */
+export function listSqliteTables(filePath: string): string[] {
+  const db = new Database(filePath, { readonly: true })
+
+  try {
+    const tables = db
+      .prepare(
+        `SELECT name FROM sqlite_master
+         WHERE type='table' AND name NOT LIKE 'sqlite_%'
+         ORDER BY name`
+      )
+      .all() as { name: string }[]
+
+    return tables.map((t) => t.name)
+  } finally {
+    db.close()
+  }
+}
+
+/**
+ * Validate that a table name exists in the database
+ * Prevents SQL injection by ensuring we only use valid table names
+ */
+function validateTableName(db: Database.Database, tableName: string): void {
+  const result = db
+    .prepare(
+      `SELECT name FROM sqlite_master
+       WHERE type='table' AND name = ?`
+    )
+    .get(tableName) as { name: string } | undefined
+
+  if (!result) {
+    throw new Error(`Table not found: ${tableName}`)
+  }
+}
+
+/**
+ * Escape a table name for use in SQL by wrapping in double quotes
+ * and escaping any embedded double quotes
+ */
+function escapeTableName(tableName: string): string {
+  return `"${tableName.replace(/"/g, '""')}"`
+}
+
+/**
+ * Get column information for a table
+ * Note: tableName must be validated before calling this function
+ */
+function getTableColumns(
+  db: Database.Database,
+  tableName: string
+): ParsedColumn[] {
+  // Use PRAGMA to get column info - table name is already validated
+  const columns = db.prepare(`PRAGMA table_info(${escapeTableName(tableName)})`).all() as {
+    cid: number
+    name: string
+    type: string
+    notnull: number
+    dflt_value: unknown
+    pk: number
+  }[]
+
+  return columns.map((col) => ({
+    name: col.name,
+    type: mapSqliteType(col.type),
+  }))
+}
+
+/**
+ * Validate SQL query to prevent dangerous operations
+ * Only allows SELECT statements for security
+ */
+function validateSqlQuery(sql: string): void {
+  const trimmedSql = sql.trim().toUpperCase()
+
+  // Only allow SELECT statements
+  if (!trimmedSql.startsWith("SELECT")) {
+    throw new Error("Only SELECT queries are allowed")
+  }
+
+  // Block dangerous keywords that could modify data or schema
+  const dangerousKeywords = [
+    "INSERT",
+    "UPDATE",
+    "DELETE",
+    "DROP",
+    "CREATE",
+    "ALTER",
+    "TRUNCATE",
+    "REPLACE",
+    "ATTACH",
+    "DETACH",
+    "PRAGMA",
+  ]
+
+  for (const keyword of dangerousKeywords) {
+    // Check for keyword as a separate word (not part of column name)
+    const regex = new RegExp(`\\b${keyword}\\b`, "i")
+    if (regex.test(sql)) {
+      throw new Error(`Query contains forbidden keyword: ${keyword}`)
+    }
+  }
+}
+
+/**
+ * Query a SQLite database and return parsed data
+ */
+export function querySqlite(
+  filePath: string,
+  sql: string,
+  options: { limit?: number } = {}
+): ParsedData {
+  const { limit = 1000 } = options
+  const db = new Database(filePath, { readonly: true })
+
+  try {
+    // Validate SQL query for security
+    validateSqlQuery(sql)
+
+    // Add LIMIT if not present (safety measure)
+    let querySql = sql.trim()
+    if (
+      !querySql.toUpperCase().includes("LIMIT") &&
+      querySql.toUpperCase().startsWith("SELECT")
+    ) {
+      querySql = `${querySql} LIMIT ${limit}`
+    }
+
+    const stmt = db.prepare(querySql)
+    const rows = stmt.all() as Record<string, unknown>[]
+
+    if (rows.length === 0) {
+      return {
+        columns: [],
+        rows: [],
+        totalRows: 0,
+        truncated: false,
+      }
+    }
+
+    // Get columns from first row
+    const columnNames = Object.keys(rows[0])
+    const columns: ParsedColumn[] = columnNames.map((name) => ({
+      name,
+      type: inferTypeFromValue(rows[0][name]),
+    }))
+
+    return {
+      columns,
+      rows,
+      totalRows: rows.length,
+      truncated: rows.length >= limit,
+    }
+  } finally {
+    db.close()
+  }
+}
+
+/**
+ * Preview data from a specific table
+ */
+export function previewSqliteTable(
+  filePath: string,
+  tableName: string,
+  options: { limit?: number; offset?: number } = {}
+): ParsedData {
+  const { limit = 1000, offset = 0 } = options
+  const db = new Database(filePath, { readonly: true })
+
+  try {
+    // Validate table name exists to prevent SQL injection
+    validateTableName(db, tableName)
+
+    // Get column info (table name is now validated)
+    const columns = getTableColumns(db, tableName)
+
+    // Escape table name for SQL query
+    const escapedTable = escapeTableName(tableName)
+
+    // Get total row count
+    const countResult = db
+      .prepare(`SELECT COUNT(*) as count FROM ${escapedTable}`)
+      .get() as { count: number }
+    const totalRows = countResult.count
+
+    // Get rows with pagination
+    const rows = db
+      .prepare(`SELECT * FROM ${escapedTable} LIMIT ? OFFSET ?`)
+      .all(limit, offset) as Record<string, unknown>[]
+
+    const truncated = offset + limit < totalRows
+
+    return {
+      columns,
+      rows,
+      totalRows,
+      truncated,
+    }
+  } finally {
+    db.close()
+  }
+}
+
+/**
+ * Infer type from a single value (fallback)
+ */
+function inferTypeFromValue(value: unknown): ColumnType {
+  if (value === null || value === undefined) {
+    return "null"
+  }
+
+  if (typeof value === "boolean") {
+    return "boolean"
+  }
+
+  if (typeof value === "number") {
+    return "number"
+  }
+
+  if (typeof value === "string") {
+    // Check for date patterns
+    if (/^\d{4}-\d{2}-\d{2}/.test(value)) {
+      return "date"
+    }
+    return "string"
+  }
+
+  return "mixed"
+}
+
+/**
+ * Get schema information for a SQLite database
+ */
+export function getSqliteSchema(
+  filePath: string
+): Map<string, ParsedColumn[]> {
+  const db = new Database(filePath, { readonly: true })
+  const schema = new Map<string, ParsedColumn[]>()
+
+  try {
+    const tables = listSqliteTables(filePath)
+
+    for (const tableName of tables) {
+      const columns = getTableColumns(db, tableName)
+      schema.set(tableName, columns)
+    }
+
+    return schema
+  } finally {
+    db.close()
+  }
+}
diff --git a/src/main/lib/parsers/types.ts b/src/main/lib/parsers/types.ts
new file mode 100644
index 00000000..b70b2981
--- /dev/null
+++ b/src/main/lib/parsers/types.ts
@@ -0,0 +1,23 @@
+export type ColumnType = "string" | "number" | "boolean" | "date" | "null" | "mixed"
+
+export interface ParsedColumn {
+  name: string
+  type: ColumnType
+}
+
+export interface ParsedData {
+  columns: ParsedColumn[]
+  rows: Record<string, unknown>[]
+  totalRows: number
+  truncated: boolean
+}
+
+export type DataFileType = "csv" | "json" | "sqlite" | "parquet" | "excel" | "arrow" | "unknown"
+
+export interface DataFileInfo {
+  path: string
+  name: string
+  type: DataFileType
+  size: number
+  tables?: string[] // For SQLite files
+}
diff --git a/src/main/lib/platform/darwin.ts b/src/main/lib/platform/darwin.ts
index 84179ae3..a7d3983e 100644
--- a/src/main/lib/platform/darwin.ts
+++ b/src/main/lib/platform/darwin.ts
@@ -64,8 +64,8 @@ export class DarwinPlatformProvider extends BasePlatformProvider {
 
   getCliConfig(): CliConfig {
     return {
-      installPath: "/usr/local/bin/1code",
-      scriptName: "1code",
+      installPath: "/usr/local/bin/crunch",
+      scriptName: "crunch",
       requiresAdmin: true, // /usr/local/bin requires admin on macOS
     }
   }
@@ -159,7 +159,7 @@ export class DarwinPlatformProvider extends BasePlatformProvider {
         `osascript -e 'do shell script "ln -s \\"${sourcePath}\\" ${installPath}" with administrator privileges'`
       )
 
-      console.log("[CLI] Installed 1code command to", installPath)
+      console.log("[CLI] Installed crunch command to", installPath)
       return { success: true }
     } catch (error: unknown) {
       const errorMessage =
@@ -183,7 +183,7 @@ export class DarwinPlatformProvider extends BasePlatformProvider {
         `osascript -e 'do shell script "rm -f ${installPath}" with administrator privileges'`
       )
 
-      console.log("[CLI] Uninstalled 1code command")
+      console.log("[CLI] Uninstalled crunch command")
       return { success: true }
     } catch (error: unknown) {
       const errorMessage =
diff --git a/src/main/lib/platform/linux.ts b/src/main/lib/platform/linux.ts
index 3cbec64e..7ffec428 100644
--- a/src/main/lib/platform/linux.ts
+++ b/src/main/lib/platform/linux.ts
@@ -67,8 +67,8 @@ export class LinuxPlatformProvider extends BasePlatformProvider {
 
   getCliConfig(): CliConfig {
     return {
-      installPath: "/usr/local/bin/1code",
-      scriptName: "1code",
+      installPath: "/usr/local/bin/crunch",
+      scriptName: "crunch",
       requiresAdmin: true, // Usually needs sudo, but we try without first
     }
   }
@@ -172,7 +172,7 @@ export class LinuxPlatformProvider extends BasePlatformProvider {
         await execAsync(`sudo ln -s "${sourcePath}" ${installPath}`)
       }
 
-      console.log("[CLI] Installed 1code command to", installPath)
+      console.log("[CLI] Installed crunch command to", installPath)
       return { success: true }
     } catch (error: unknown) {
       const errorMessage =
@@ -199,7 +199,7 @@ export class LinuxPlatformProvider extends BasePlatformProvider {
         await execAsync(`sudo rm -f ${installPath}`)
       }
 
-      console.log("[CLI] Uninstalled 1code command")
+      console.log("[CLI] Uninstalled crunch command")
       return { success: true }
     } catch (error: unknown) {
       const errorMessage =
diff --git a/src/main/lib/platform/windows.ts b/src/main/lib/platform/windows.ts
index 88119e3c..313d4875 100644
--- a/src/main/lib/platform/windows.ts
+++ b/src/main/lib/platform/windows.ts
@@ -63,8 +63,8 @@ export class WindowsPlatformProvider extends BasePlatformProvider {
     const home = this.getHome()
 
     return {
-      installPath: path.join(home, ".local", "bin", "1code.cmd"),
-      scriptName: "1code.cmd",
+      installPath: path.join(home, ".local", "bin", "crunch.cmd"),
+      scriptName: "crunch.cmd",
       requiresAdmin: false, // Install to user directory, no admin needed
     }
   }
@@ -136,7 +136,7 @@ export class WindowsPlatformProvider extends BasePlatformProvider {
       // For terminal usage, users can manually add to PATH:
       // $env:Path += ";${installDir}"
 
-      console.log("[CLI] Installed 1code command to", installPath)
+      console.log("[CLI] Installed crunch command to", installPath)
       console.log(
         "[CLI] To use from terminal, add to PATH:",
         `$env:Path += ";${installDir}"`
@@ -144,7 +144,7 @@ export class WindowsPlatformProvider extends BasePlatformProvider {
 
       return {
         success: true,
-        pathHint: `To use 1code from terminal, add to your PATH: ${installDir}`,
+        pathHint: `To use crunch from terminal, add to your PATH: ${installDir}`,
       }
     } catch (error: unknown) {
       const errorMessage =
@@ -173,7 +173,7 @@ export class WindowsPlatformProvider extends BasePlatformProvider {
         // Directory not empty or other error, that's okay
       }
 
-      console.log("[CLI] Uninstalled 1code command")
+      console.log("[CLI] Uninstalled crunch command")
       return { success: true }
     } catch (error: unknown) {
       const errorMessage =
diff --git a/src/main/lib/terminal/env.ts b/src/main/lib/terminal/env.ts
index 041dce2e..d44d0d4d 100644
--- a/src/main/lib/terminal/env.ts
+++ b/src/main/lib/terminal/env.ts
@@ -358,7 +358,7 @@ export function buildTerminalEnv(params: {
     ...baseEnv,
     SHELL: shell,
     TERM: "xterm-256color",
-    TERM_PROGRAM: "1Code",
+    TERM_PROGRAM: "Crunch",
     TERM_PROGRAM_VERSION: process.env.npm_package_version || "1.0.0",
     COLORTERM: "truecolor",
     LANG: locale,
diff --git a/src/main/lib/trpc/routers/agent-utils.ts b/src/main/lib/trpc/routers/agent-utils.ts
index b8090163..0d8ba716 100644
--- a/src/main/lib/trpc/routers/agent-utils.ts
+++ b/src/main/lib/trpc/routers/agent-utils.ts
@@ -41,50 +41,121 @@ export function parseAgentMd(
 ): Partial<ParsedAgent> {
   try {
     const { data, content: body } = matter(content)
+    const result = extractAgentFields(data, body, filename)
 
-    // Parse tools - can be comma-separated string or array
-    let tools: string[] | undefined
-    if (typeof data.tools === "string") {
-      tools = data.tools
-        .split(",")
-        .map((t: string) => t.trim())
-        .filter(Boolean)
-    } else if (Array.isArray(data.tools)) {
-      tools = data.tools
-    }
-
-    // Parse disallowedTools
-    let disallowedTools: string[] | undefined
-    if (typeof data.disallowedTools === "string") {
-      disallowedTools = data.disallowedTools
-        .split(",")
-        .map((t: string) => t.trim())
-        .filter(Boolean)
-    } else if (Array.isArray(data.disallowedTools)) {
-      disallowedTools = data.disallowedTools
+    // gray-matter can inconsistently parse complex YAML: sometimes it throws,
+    // sometimes it "succeeds" but silently drops fields (e.g. description becomes empty).
+    // If the file has a description field but gray-matter returned empty, use fallback.
+    if (!result.description && content.includes("description:")) {
+      const fallback = parseFrontmatterFallback(content, filename)
+      if (fallback && fallback.description) {
+        return fallback
+      }
     }
 
-    // Validate model
-    const model =
-      data.model && VALID_AGENT_MODELS.includes(data.model)
-        ? (data.model as AgentModel)
-        : undefined
-
-    return {
-      name:
-        typeof data.name === "string" ? data.name : filename.replace(".md", ""),
-      description: typeof data.description === "string" ? data.description : "",
-      prompt: body.trim(),
-      tools,
-      disallowedTools,
-      model,
-    }
+    return result
   } catch (err) {
+    // gray-matter fails on complex YAML (e.g. unquoted colons in descriptions)
+    // Fall back to regex-based frontmatter parsing
+    const fallback = parseFrontmatterFallback(content, filename)
+    if (fallback) return fallback
     console.error("[agents] Failed to parse markdown:", err)
     return {}
   }
 }
 
+/**
+ * Fallback parser for when gray-matter fails on complex YAML values.
+ * Extracts frontmatter fields line-by-line, treating the last field value
+ * as everything from the key to the next key or end of frontmatter.
+ */
+function parseFrontmatterFallback(
+  content: string,
+  filename: string
+): Partial<ParsedAgent> | null {
+  const fmMatch = content.match(/^---\n([\s\S]*?)\n---\n?([\s\S]*)$/)
+  if (!fmMatch) return null
+
+  const frontmatterBlock = fmMatch[1]
+  const body = fmMatch[2]
+
+  // Parse frontmatter line by line, handling multi-content values
+  // by greedily consuming until the next known key
+  const knownKeys = ["name", "description", "tools", "disallowedTools", "model", "color"]
+  const fields: Record<string, string> = {}
+
+  const lines = frontmatterBlock.split("\n")
+  let currentKey = ""
+  let currentValue = ""
+
+  for (const line of lines) {
+    // Check if this line starts a new key
+    const keyMatch = line.match(/^(\w+):\s*(.*)$/)
+    if (keyMatch && knownKeys.includes(keyMatch[1])) {
+      // Save previous key-value
+      if (currentKey) {
+        fields[currentKey] = currentValue.trim()
+      }
+      currentKey = keyMatch[1]
+      currentValue = keyMatch[2]
+    } else if (currentKey) {
+      // Continuation of previous value
+      currentValue += "\n" + line
+    }
+  }
+  // Save last key-value
+  if (currentKey) {
+    fields[currentKey] = currentValue.trim()
+  }
+
+  const data: Record<string, unknown> = { ...fields }
+  return extractAgentFields(data, body, filename)
+}
+
+function extractAgentFields(
+  data: Record<string, unknown>,
+  body: string,
+  filename: string
+): Partial<ParsedAgent> {
+  // Parse tools - can be comma-separated string or array
+  let tools: string[] | undefined
+  if (typeof data.tools === "string") {
+    tools = data.tools
+      .split(",")
+      .map((t: string) => t.trim())
+      .filter(Boolean)
+  } else if (Array.isArray(data.tools)) {
+    tools = data.tools
+  }
+
+  // Parse disallowedTools
+  let disallowedTools: string[] | undefined
+  if (typeof data.disallowedTools === "string") {
+    disallowedTools = data.disallowedTools
+      .split(",")
+      .map((t: string) => t.trim())
+      .filter(Boolean)
+  } else if (Array.isArray(data.disallowedTools)) {
+    disallowedTools = data.disallowedTools
+  }
+
+  // Validate model
+  const model =
+    data.model && VALID_AGENT_MODELS.includes(data.model as AgentModel)
+      ? (data.model as AgentModel)
+      : undefined
+
+  return {
+    name:
+      typeof data.name === "string" ? data.name : filename.replace(".md", ""),
+    description: typeof data.description === "string" ? data.description : "",
+    prompt: body.trim(),
+    tools,
+    disallowedTools,
+    model,
+  }
+}
+
 /**
  * Generate markdown content for agent file
  */
diff --git a/src/main/lib/trpc/routers/agents.ts b/src/main/lib/trpc/routers/agents.ts
index 2416f5b0..7172d6de 100644
--- a/src/main/lib/trpc/routers/agents.ts
+++ b/src/main/lib/trpc/routers/agents.ts
@@ -3,13 +3,56 @@ import { router, publicProcedure } from "../index"
 import * as fs from "fs/promises"
 import * as path from "path"
 import * as os from "os"
+import { eq } from "drizzle-orm"
 import {
   parseAgentMd,
   generateAgentMd,
   scanAgentsDirectory,
   VALID_AGENT_MODELS,
   type FileAgent,
+  type AgentModel,
 } from "./agent-utils"
+import { buildClaudeEnv, getBundledClaudeBinaryPath } from "../../claude"
+import { getDatabase, claudeCodeCredentials } from "../../db"
+import { app, safeStorage } from "electron"
+
+// Dynamic import for ESM module - cached to avoid re-importing
+let cachedClaudeQuery: typeof import("@anthropic-ai/claude-agent-sdk").query | null = null
+const getClaudeQuery = async () => {
+  if (cachedClaudeQuery) {
+    return cachedClaudeQuery
+  }
+  const sdk = await import("@anthropic-ai/claude-agent-sdk")
+  cachedClaudeQuery = sdk.query
+  return cachedClaudeQuery
+}
+
+/**
+ * Get Claude Code OAuth token from local SQLite (same as claude.ts)
+ */
+function getClaudeCodeToken(): string | null {
+  try {
+    const db = getDatabase()
+    const cred = db
+      .select()
+      .from(claudeCodeCredentials)
+      .where(eq(claudeCodeCredentials.id, "default"))
+      .get()
+
+    if (!cred?.oauthToken) {
+      return null
+    }
+
+    if (!safeStorage.isEncryptionAvailable()) {
+      return Buffer.from(cred.oauthToken, "base64").toString("utf-8")
+    }
+    const buffer = Buffer.from(cred.oauthToken, "base64")
+    return safeStorage.decryptString(buffer)
+  } catch (error) {
+    console.error("[agents] Error getting Claude Code token:", error)
+    return null
+  }
+}
 
 // Shared procedure for listing agents
 const listAgentsProcedure = publicProcedure
@@ -272,4 +315,219 @@ export const agentsRouter = router({
 
       return { deleted: true }
     }),
+
+  /**
+   * Generate an agent using Claude based on user's description
+   * This creates the system prompt, tools, etc. from a natural language description
+   * Uses the existing Claude Agent SDK to spawn a quick session
+   */
+  generate: publicProcedure
+    .input(
+      z.object({
+        name: z.string(),
+        description: z.string(), // User's natural language description of what the agent should do
+        source: z.enum(["user", "project"]),
+        model: z.enum(VALID_AGENT_MODELS).optional(),
+        cwd: z.string().optional(),
+      })
+    )
+    .mutation(async ({ input }) => {
+      // Validate name (kebab-case, no special chars)
+      const safeName = input.name.toLowerCase().replace(/[^a-z0-9-]/g, "-")
+      if (!safeName || safeName.includes("..")) {
+        throw new Error("Invalid agent name")
+      }
+
+      // Determine target directory
+      let targetDir: string
+      if (input.source === "project") {
+        if (!input.cwd) {
+          throw new Error("Project path (cwd) required for project agents")
+        }
+        targetDir = path.join(input.cwd, ".claude", "agents")
+      } else {
+        targetDir = path.join(os.homedir(), ".claude", "agents")
+      }
+
+      // Ensure directory exists
+      await fs.mkdir(targetDir, { recursive: true })
+
+      const agentPath = path.join(targetDir, `${safeName}.md`)
+
+      // Check if already exists
+      try {
+        await fs.access(agentPath)
+        throw new Error(`Agent "${safeName}" already exists`)
+      } catch (err) {
+        if ((err as NodeJS.ErrnoException).code !== "ENOENT") {
+          throw err
+        }
+      }
+
+      // Get the Claude SDK query function
+      const claudeQuery = await getClaudeQuery()
+
+      const agentGenerationPrompt = `You are an expert at creating custom Claude Code agents. Generate a well-structured agent definition based on the user's description.
+
+Claude Code agents are specialized sub-agents that Claude can invoke via the Task tool. They have their own system prompt, tools, and model settings.
+
+Available tools that agents can use:
+- Read: Read files from the filesystem
+- Write: Write/create files
+- Edit: Edit existing files with search/replace
+- Glob: Find files by pattern
+- Grep: Search file contents
+- Bash: Execute shell commands
+- WebFetch: Fetch content from URLs
+- WebSearch: Search the web
+- Task: Spawn sub-agents
+- TodoWrite: Manage todo lists
+- AskUserQuestion: Ask user for clarification
+- NotebookEdit: Edit Jupyter notebooks
+
+Output a JSON object with these fields:
+- description: A concise one-line description of what the agent does (used for Claude to decide when to invoke it)
+- prompt: The full system prompt for the agent. This should be detailed, well-structured, and give the agent clear instructions on how to behave and accomplish its task. Use markdown formatting.
+- tools: (optional) Array of tool names the agent should have access to. If not specified, inherits all tools. Only include if you want to RESTRICT the agent to specific tools.
+- disallowedTools: (optional) Array of tool names the agent should NOT have access to.
+
+Guidelines for the system prompt:
+1. Be specific about the agent's role and responsibilities
+2. Include examples of how the agent should behave
+3. Specify any constraints or best practices
+4. Use second person ("You are...", "You should...")
+5. Keep it focused - don't try to do too much
+
+Create an agent named "${safeName}" based on this description:
+
+${input.description}
+
+Output ONLY valid JSON, no markdown code blocks or explanations.`
+
+      // Use the SDK to generate the agent definition
+      const isolatedConfigDir = path.join(
+        app.getPath("userData"),
+        "claude-sessions",
+        "agent-generation"
+      )
+      await fs.mkdir(isolatedConfigDir, { recursive: true })
+
+      // Get OAuth token from DB (same as main chat flow)
+      const authToken = getClaudeCodeToken()
+      if (!authToken) {
+        throw new Error("Not authenticated. Please sign in to Claude first.")
+      }
+
+      const claudeEnv = buildClaudeEnv()
+      // Pass OAuth token via the correct env var (same as claude.ts line 823)
+      claudeEnv.CLAUDE_CODE_OAUTH_TOKEN = authToken
+      const claudeBinaryPath = getBundledClaudeBinaryPath()
+
+      let responseText = ""
+      let lastError: Error | null = null
+
+      try {
+        const stream = claudeQuery({
+          prompt: agentGenerationPrompt,
+          options: {
+            cwd: input.cwd || os.homedir(),
+            env: {
+              ...claudeEnv,
+              CLAUDE_CONFIG_DIR: isolatedConfigDir,
+            },
+            permissionMode: "bypassPermissions" as const,
+            allowDangerouslySkipPermissions: true,
+            pathToClaudeCodeExecutable: claudeBinaryPath,
+            maxTurns: 1,
+            model: "claude-sonnet-4-20250514",
+          },
+        })
+
+        // Collect the text response from the stream
+        for await (const msg of stream) {
+          const msgAny = msg as any
+
+          // Check for errors
+          if (msgAny.type === "error" || msgAny.error) {
+            lastError = new Error(msgAny.error || msgAny.message || "Unknown SDK error")
+            break
+          }
+
+          // Extract text from assistant messages
+          if (msgAny.type === "assistant" && msgAny.message?.content) {
+            for (const block of msgAny.message.content) {
+              if (block.type === "text" && block.text) {
+                responseText += block.text
+              }
+            }
+          }
+        }
+      } catch (streamError) {
+        console.error("[agents] SDK stream error:", streamError)
+        throw new Error(`Failed to generate agent: ${streamError instanceof Error ? streamError.message : String(streamError)}`)
+      }
+
+      if (lastError) {
+        console.error("[agents] SDK error:", lastError)
+        throw new Error(`Failed to generate agent: ${lastError.message}`)
+      }
+
+      if (!responseText.trim()) {
+        throw new Error("Failed to generate agent: no response from Claude")
+      }
+
+      // Parse the JSON response
+      let generatedAgent: {
+        description: string
+        prompt: string
+        tools?: string[]
+        disallowedTools?: string[]
+      }
+
+      try {
+        // Try to extract JSON from the response (handle potential markdown code blocks)
+        let jsonText = responseText.trim()
+        if (jsonText.startsWith("```json")) {
+          jsonText = jsonText.slice(7)
+        } else if (jsonText.startsWith("```")) {
+          jsonText = jsonText.slice(3)
+        }
+        if (jsonText.endsWith("```")) {
+          jsonText = jsonText.slice(0, -3)
+        }
+        jsonText = jsonText.trim()
+
+        generatedAgent = JSON.parse(jsonText)
+      } catch (parseError) {
+        console.error("[agents] Failed to parse Claude response:", responseText)
+        throw new Error("Failed to parse agent definition from Claude")
+      }
+
+      // Validate required fields
+      if (!generatedAgent.description || !generatedAgent.prompt) {
+        throw new Error("Generated agent is missing required fields (description, prompt)")
+      }
+
+      // Generate and write the markdown file
+      const content = generateAgentMd({
+        name: safeName,
+        description: generatedAgent.description,
+        prompt: generatedAgent.prompt,
+        tools: generatedAgent.tools,
+        disallowedTools: generatedAgent.disallowedTools,
+        model: input.model,
+      })
+
+      await fs.writeFile(agentPath, content, "utf-8")
+
+      return {
+        name: safeName,
+        path: agentPath,
+        source: input.source,
+        description: generatedAgent.description,
+        prompt: generatedAgent.prompt,
+        tools: generatedAgent.tools,
+        disallowedTools: generatedAgent.disallowedTools,
+      }
+    }),
 })
diff --git a/src/main/lib/trpc/routers/chats.ts b/src/main/lib/trpc/routers/chats.ts
index 99af10b4..f642e19d 100644
--- a/src/main/lib/trpc/routers/chats.ts
+++ b/src/main/lib/trpc/routers/chats.ts
@@ -1041,7 +1041,7 @@ export const chatsRouter = router({
           const authManager = getAuthManager()
           const token = await authManager.getValidToken()
           // Use localhost in dev, production otherwise
-          const apiUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://21st.dev"
+          const apiUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://getcrunch.dev"
 
           if (!token) {
             apiError = "No auth token available"
@@ -1166,7 +1166,7 @@ export const chatsRouter = router({
         // Online - use web API
         const authManager = getAuthManager()
         const token = await authManager.getValidToken()
-        const apiUrl = "https://21st.dev"
+        const apiUrl = "https://getcrunch.dev"
 
         console.log(
           "[generateSubChatName] Online - calling API with token:",
diff --git a/src/main/lib/trpc/routers/claude-code.ts b/src/main/lib/trpc/routers/claude-code.ts
index 78766a88..a7481e2d 100644
--- a/src/main/lib/trpc/routers/claude-code.ts
+++ b/src/main/lib/trpc/routers/claude-code.ts
@@ -174,7 +174,7 @@ export const claudeCodeRouter = router({
   startAuth: publicProcedure.mutation(async () => {
     const token = await getDesktopToken()
     if (!token) {
-      throw new Error("Not authenticated with 21st.dev")
+      throw new Error("Not authenticated with getcrunch.dev")
     }
 
     // Server creates sandbox (has CodeSandbox SDK)
diff --git a/src/main/lib/trpc/routers/claude.ts b/src/main/lib/trpc/routers/claude.ts
index f42c76a9..0a4e0a14 100644
--- a/src/main/lib/trpc/routers/claude.ts
+++ b/src/main/lib/trpc/routers/claude.ts
@@ -279,7 +279,7 @@ export async function warmupMcpCache(): Promise<void> {
     for (const [projectPath, projectConfig] of Object.entries(config.projects)) {
       if ((projectConfig as any)?.mcpServers) {
         // Skip worktrees - they're temporary git working directories and inherit MCP from parent
-        if (projectPath.includes("/.21st/worktrees/") || projectPath.includes("\\.21st\\worktrees\\")) {
+        if (projectPath.includes("/.crunch/worktrees/") || projectPath.includes("\\.crunch\\worktrees\\")) {
           continue
         }
 
diff --git a/src/main/lib/trpc/routers/debug.ts b/src/main/lib/trpc/routers/debug.ts
index c867f52c..51535443 100644
--- a/src/main/lib/trpc/routers/debug.ts
+++ b/src/main/lib/trpc/routers/debug.ts
@@ -7,7 +7,7 @@ import { clearNetworkCache } from "../../ollama/network-detector"
 
 // Protocol constant (must match main/index.ts)
 const IS_DEV = !!process.env.ELECTRON_RENDERER_URL
-const PROTOCOL = IS_DEV ? "twentyfirst-agents-dev" : "twentyfirst-agents"
+const PROTOCOL = IS_DEV ? "crunch-dev" : "crunch"
 
 // Global flag for simulating offline mode (for testing)
 let simulateOfflineMode = false
diff --git a/src/main/lib/trpc/routers/files.ts b/src/main/lib/trpc/routers/files.ts
index 061429ce..3d10c383 100644
--- a/src/main/lib/trpc/routers/files.ts
+++ b/src/main/lib/trpc/routers/files.ts
@@ -1,8 +1,125 @@
 import { z } from "zod"
 import { router, publicProcedure } from "../index"
-import { readdir, stat, readFile, writeFile, mkdir } from "node:fs/promises"
-import { join, relative, basename } from "node:path"
-import { app } from "electron"
+import { readdir, stat, readFile, writeFile, rm, rename, copyFile, mkdir } from "node:fs/promises"
+import { watch, type FSWatcher } from "node:fs"
+import { join, relative, basename, resolve, isAbsolute, sep } from "node:path"
+import { observable } from "@trpc/server/observable"
+import { EventEmitter } from "node:events"
+import { exec } from "node:child_process"
+import { promisify } from "node:util"
+import { app, shell } from "electron"
+import {
+  getDataFileInfo,
+  parseDataFile,
+  querySqlite,
+  queryDataFile,
+  listSqliteTables,
+  listExcelSheets,
+  isDataFile,
+} from "../../parsers"
+
+const execAsync = promisify(exec)
+
+/**
+ * Validate that a file path is within a base directory
+ * Prevents path traversal attacks (e.g., ../../etc/passwd)
+ */
+function validatePathWithinDirectory(basePath: string, filePath: string): string {
+  const resolvedBase = resolve(basePath)
+  const resolvedPath = isAbsolute(filePath) ? resolve(filePath) : resolve(basePath, filePath)
+
+  // Check if the resolved path starts with the base path
+  // Use path.sep to handle both Unix (/) and Windows (\) separators
+  if (!resolvedPath.startsWith(resolvedBase + sep) && resolvedPath !== resolvedBase) {
+    throw new Error("Path traversal attempt detected: file path must be within project directory")
+  }
+
+  return resolvedPath
+}
+
+/**
+ * Check if a path is a symlink pointing outside the given directory
+ * Used to prevent symlink-based attacks on destructive operations
+ */
+async function isSymlinkOutsideDirectory(basePath: string, targetPath: string): Promise<boolean> {
+  const { lstat, realpath } = await import("node:fs/promises")
+
+  try {
+    const stats = await lstat(targetPath)
+    if (!stats.isSymbolicLink()) {
+      return false
+    }
+
+    // It's a symlink - check where it points
+    const resolvedBase = resolve(basePath)
+    const realTarget = await realpath(targetPath)
+
+    // If the real target is outside the base directory, it's dangerous
+    // Use path.sep to handle both Unix (/) and Windows (\) separators
+    return !realTarget.startsWith(resolvedBase + sep) && realTarget !== resolvedBase
+  } catch {
+    // If we can't check, assume it's safe (file might not exist yet)
+    return false
+  }
+}
+
+// Helper to recursively copy a directory
+// basePath is optional - when provided, validates symlinks don't point outside
+async function copyDir(src: string, dest: string, basePath?: string): Promise<void> {
+  await mkdir(dest, { recursive: true })
+  const entries = await readdir(src, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name)
+    const destPath = join(dest, entry.name)
+
+    // Validate nested symlinks if basePath is provided
+    if (basePath && entry.isSymbolicLink()) {
+      if (await isSymlinkOutsideDirectory(basePath, srcPath)) {
+        throw new Error(`Cannot copy symlink pointing outside the project directory: ${srcPath}`)
+      }
+    }
+
+    if (entry.isDirectory()) {
+      await copyDir(srcPath, destPath, basePath)
+    } else {
+      await copyFile(srcPath, destPath)
+    }
+  }
+}
+
+// Git status codes
+export type GitStatusCode =
+  | "modified"      // M - modified
+  | "added"         // A - staged new file
+  | "deleted"       // D - deleted
+  | "renamed"       // R - renamed
+  | "copied"        // C - copied
+  | "untracked"     // ? - untracked
+  | "ignored"       // ! - ignored
+  | "unmerged"      // U - unmerged (conflict)
+  | "staged"        // File is staged (index has changes)
+  | null            // No changes
+
+export interface GitFileStatus {
+  path: string
+  status: GitStatusCode
+  staged: boolean  // Whether the file has staged changes
+}
+
+// Event emitter for file changes
+const fileChangeEmitter = new EventEmitter()
+fileChangeEmitter.setMaxListeners(100) // Allow many subscribers
+
+// Active file watchers per project path
+const activeWatchers = new Map<string, { watcher: FSWatcher; refCount: number }>()
+
+// Git directory watchers (watch .git for status changes)
+const gitWatchers = new Map<string, { watcher: FSWatcher; refCount: number }>()
+
+// Git status cache with longer TTL (invalidated by .git watcher)
+const gitStatusCache = new Map<string, { status: Map<string, GitFileStatus>; timestamp: number }>()
+const GIT_STATUS_CACHE_TTL = 30000 // 30 seconds (longer since we watch .git)
 
 // Directories to ignore when scanning
 const IGNORED_DIRS = new Set([
@@ -65,19 +182,269 @@ interface FileEntry {
 
 // Cache for file and folder listings
 const fileListCache = new Map<string, { entries: FileEntry[]; timestamp: number }>()
-const CACHE_TTL = 5000 // 5 seconds
+const CACHE_TTL = 30000 // 30 seconds (watchers invalidate cache on changes)
+
+// Debounce timers for file change events
+const debounceTimers = new Map<string, NodeJS.Timeout>()
+const DEBOUNCE_MS = 100 // Debounce rapid changes
+
+/**
+ * Parse git status output and return a map of file paths to their status
+ */
+function parseGitStatus(output: string): Map<string, GitFileStatus> {
+  const statusMap = new Map<string, GitFileStatus>()
+
+  for (const line of output.split("\n")) {
+    if (!line || line.length < 4) continue
+
+    // Git status format: XY PATH or XY ORIG -> PATH (for renames)
+    const indexStatus = line[0]  // Status in index (staged)
+    const workingStatus = line[1] // Status in working tree
+    let filePath = line.slice(3)
+
+    // Handle renames: "R  old -> new"
+    if (filePath.includes(" -> ")) {
+      filePath = filePath.split(" -> ")[1]
+    }
+
+    // Remove quotes if present (git quotes paths with special chars)
+    if (filePath.startsWith('"') && filePath.endsWith('"')) {
+      filePath = filePath.slice(1, -1)
+    }
+
+    // Remove trailing slash for directories (git reports ignored dirs as "!! dir/")
+    if (filePath.endsWith("/")) {
+      filePath = filePath.slice(0, -1)
+    }
+
+    let status: GitStatusCode = null
+    let staged = false
+
+    // Check index status (staged changes)
+    if (indexStatus === "M") {
+      status = "modified"
+      staged = true
+    } else if (indexStatus === "A") {
+      status = "added"
+      staged = true
+    } else if (indexStatus === "D") {
+      status = "deleted"
+      staged = true
+    } else if (indexStatus === "R") {
+      status = "renamed"
+      staged = true
+    } else if (indexStatus === "C") {
+      status = "copied"
+      staged = true
+    }
+
+    // Check working tree status (unstaged changes)
+    if (workingStatus === "M") {
+      status = "modified"
+    } else if (workingStatus === "D") {
+      status = "deleted"
+    } else if (workingStatus === "?") {
+      status = "untracked"
+    } else if (workingStatus === "!") {
+      status = "ignored"
+    } else if (workingStatus === "U" || indexStatus === "U") {
+      status = "unmerged"
+    }
+
+    if (status) {
+      statusMap.set(filePath, { path: filePath, status, staged })
+    }
+  }
+
+  return statusMap
+}
+
+/**
+ * Get git status for all files in a directory (with caching)
+ */
+async function getGitStatus(projectPath: string): Promise<Map<string, GitFileStatus>> {
+  // Check cache first
+  const cached = gitStatusCache.get(projectPath)
+  const now = Date.now()
+
+  if (cached && now - cached.timestamp < GIT_STATUS_CACHE_TTL) {
+    return cached.status
+  }
+
+  try {
+    // Check if this is a git repository
+    // --ignored shows gitignored files (marked with !)
+    // -uall shows all untracked files
+    const { stdout } = await execAsync("git status --porcelain --ignored -unormal", {
+      cwd: projectPath,
+      maxBuffer: 10 * 1024 * 1024, // 10MB buffer for large repos
+    })
+    const status = parseGitStatus(stdout)
+
+    // Cache the result
+    gitStatusCache.set(projectPath, { status, timestamp: now })
+
+    return status
+  } catch (error) {
+    // Not a git repo or git not available
+    return new Map()
+  }
+}
+
+/**
+ * Start watching .git directory for status changes
+ */
+function startGitWatching(projectPath: string): void {
+  const existing = gitWatchers.get(projectPath)
+  if (existing) {
+    existing.refCount++
+    return
+  }
+
+  const gitPath = join(projectPath, ".git")
+
+  try {
+    // Check if .git exists
+    const watcher = watch(gitPath, { recursive: true }, (eventType, filename) => {
+      if (!filename) return
+
+      // Only care about files that indicate git state changes
+      // index = staging area, HEAD = current branch, refs = branches/tags
+      const isRelevant =
+        filename === "index" ||
+        filename === "HEAD" ||
+        filename.startsWith("refs/") ||
+        filename === "COMMIT_EDITMSG" ||
+        filename === "MERGE_HEAD" ||
+        filename === "REBASE_HEAD"
+
+      if (!isRelevant) return
+
+      // Debounce and invalidate cache
+      const timerKey = `git:${projectPath}`
+      const existingTimer = debounceTimers.get(timerKey)
+      if (existingTimer) {
+        clearTimeout(existingTimer)
+      }
+
+      debounceTimers.set(timerKey, setTimeout(() => {
+        debounceTimers.delete(timerKey)
+        // Invalidate git status cache
+        gitStatusCache.delete(projectPath)
+        // Emit git change event
+        fileChangeEmitter.emit(`gitChange:${projectPath}`)
+      }, DEBOUNCE_MS))
+    })
+
+    watcher.on("error", (error) => {
+      console.warn(`[files] Git watcher error for ${projectPath}:`, error)
+    })
+
+    gitWatchers.set(projectPath, { watcher, refCount: 1 })
+    console.log(`[files] Started watching .git: ${projectPath}`)
+  } catch (error) {
+    // .git doesn't exist or not accessible
+    console.warn(`[files] Could not watch .git for ${projectPath}:`, error)
+  }
+}
+
+/**
+ * Stop watching .git directory
+ */
+function stopGitWatching(projectPath: string): void {
+  const existing = gitWatchers.get(projectPath)
+  if (!existing) return
+
+  existing.refCount--
+  if (existing.refCount <= 0) {
+    existing.watcher.close()
+    gitWatchers.delete(projectPath)
+    // Clean up timer
+    const timerKey = `git:${projectPath}`
+    const timer = debounceTimers.get(timerKey)
+    if (timer) {
+      clearTimeout(timer)
+      debounceTimers.delete(timerKey)
+    }
+    console.log(`[files] Stopped watching .git: ${projectPath}`)
+  }
+}
+
+/**
+ * Start watching a project directory for changes
+ */
+function startWatching(projectPath: string): void {
+  const existing = activeWatchers.get(projectPath)
+  if (existing) {
+    existing.refCount++
+    return
+  }
+
+  try {
+    const watcher = watch(projectPath, { recursive: true }, (eventType, filename) => {
+      if (!filename) return
+
+      // Skip .git directory changes (handled separately by git watcher)
+      if (filename.startsWith(".git/") || filename === ".git") return
+
+      // Skip system files
+      if (filename.endsWith(".DS_Store") || filename.endsWith("Thumbs.db")) return
+
+      // Debounce rapid changes
+      const existing = debounceTimers.get(projectPath)
+      if (existing) {
+        clearTimeout(existing)
+      }
+
+      debounceTimers.set(projectPath, setTimeout(() => {
+        debounceTimers.delete(projectPath)
+        // Invalidate cache
+        fileListCache.delete(projectPath)
+        // Emit change event
+        fileChangeEmitter.emit(`change:${projectPath}`, { eventType, filename })
+      }, DEBOUNCE_MS))
+    })
+
+    watcher.on("error", (error) => {
+      console.warn(`[files] Watcher error for ${projectPath}:`, error)
+    })
+
+    activeWatchers.set(projectPath, { watcher, refCount: 1 })
+    console.log(`[files] Started watching: ${projectPath}`)
+  } catch (error) {
+    console.warn(`[files] Could not start watcher for ${projectPath}:`, error)
+  }
+}
+
+/**
+ * Stop watching a project directory
+ */
+function stopWatching(projectPath: string): void {
+  const existing = activeWatchers.get(projectPath)
+  if (!existing) return
+
+  existing.refCount--
+  if (existing.refCount <= 0) {
+    existing.watcher.close()
+    activeWatchers.delete(projectPath)
+    // Clean up debounce timer
+    const timer = debounceTimers.get(projectPath)
+    if (timer) {
+      clearTimeout(timer)
+      debounceTimers.delete(projectPath)
+    }
+    console.log(`[files] Stopped watching: ${projectPath}`)
+  }
+}
 
 /**
  * Recursively scan a directory and return all file and folder paths
+ * Like VS Code, we scan everything - the file system is fast, only rendering is slow
  */
 async function scanDirectory(
   rootPath: string,
-  currentPath: string = rootPath,
-  depth: number = 0,
-  maxDepth: number = 15
+  currentPath: string = rootPath
 ): Promise<FileEntry[]> {
-  if (depth > maxDepth) return []
-
   const entries: FileEntry[] = []
 
   try {
@@ -88,33 +455,24 @@ async function scanDirectory(
       const relativePath = relative(rootPath, fullPath)
 
       if (entry.isDirectory()) {
-        // Skip ignored directories
+        // Skip ignored directories (node_modules, .git, dist, build, etc.)
         if (IGNORED_DIRS.has(entry.name)) continue
-        // Skip hidden directories (except .github, .vscode, etc.)
-        if (entry.name.startsWith(".") && !entry.name.startsWith(".github") && !entry.name.startsWith(".vscode")) continue
 
         // Add the folder itself to results
         entries.push({ path: relativePath, type: "folder" })
 
-        // Recurse into subdirectory
-        const subEntries = await scanDirectory(rootPath, fullPath, depth + 1, maxDepth)
+        // Recurse into all subdirectories - no depth limit like VS Code
+        const subEntries = await scanDirectory(rootPath, fullPath)
         entries.push(...subEntries)
       } else if (entry.isFile()) {
-        // Skip ignored files
-        if (IGNORED_FILES.has(entry.name)) continue
-
-        // Check extension
-        const ext = entry.name.includes(".") ? "." + entry.name.split(".").pop()?.toLowerCase() : ""
-        if (IGNORED_EXTENSIONS.has(ext)) {
-          // Allow specific lock files
-          if (!ALLOWED_LOCK_FILES.has(entry.name)) continue
-        }
+        // Skip macOS/Windows system files
+        if (entry.name === ".DS_Store" || entry.name === "Thumbs.db") continue
 
         entries.push({ path: relativePath, type: "file" })
       }
     }
   } catch (error) {
-    // Silently skip directories we can't read
+    // Silently skip directories we can't read (permissions, etc.)
     console.warn(`[files] Could not read directory: ${currentPath}`, error)
   }
 
@@ -238,15 +596,8 @@ export const filesRouter = router({
         // Get entry list (cached or fresh scan)
         const entries = await getEntryList(projectPath)
         
-        // Debug: log folder count
-        const folderCount = entries.filter(e => e.type === "folder").length
-        const fileCount = entries.filter(e => e.type === "file").length
-        console.log(`[files] Scanned ${projectPath}: ${folderCount} folders, ${fileCount} files`)
-
         // Filter and sort by query
-        const results = filterEntries(entries, query, limit)
-        console.log(`[files] Query "${query}": returning ${results.length} results, folders: ${results.filter(r => r.type === "folder").length}`)
-        return results
+        return filterEntries(entries, query, limit)
       } catch (error) {
         console.error(`[files] Error searching files:`, error)
         return []
@@ -263,6 +614,805 @@ export const filesRouter = router({
       return { success: true }
     }),
 
+  /**
+   * List all files and folders in a project directory (for file tree)
+   */
+  listAll: publicProcedure
+    .input(z.object({ projectPath: z.string() }))
+    .query(async ({ input }) => {
+      const { projectPath } = input
+
+      if (!projectPath) {
+        return []
+      }
+
+      try {
+        // Verify the path exists and is a directory
+        const pathStat = await stat(projectPath)
+        if (!pathStat.isDirectory()) {
+          console.warn(`[files] Not a directory: ${projectPath}`)
+          return []
+        }
+
+        // Get full entry list (cached or fresh scan)
+        const entries = await getEntryList(projectPath)
+        return entries
+      } catch (error) {
+        console.error(`[files] Error listing files:`, error)
+        return []
+      }
+    }),
+
+  /**
+   * List contents of a specific folder (for lazy loading in file tree)
+   * Used when expanding folders that weren't included in initial scan
+   */
+  listFolderContents: publicProcedure
+    .input(z.object({
+      projectPath: z.string(),
+      folderPath: z.string()  // Relative path like "node_modules" or "node_modules/react"
+    }))
+    .query(async ({ input }) => {
+      const { projectPath, folderPath } = input
+
+      if (!projectPath || !folderPath) {
+        return []
+      }
+
+      try {
+        // Validate path is within project directory (prevents path traversal)
+        const fullPath = validatePathWithinDirectory(projectPath, folderPath)
+
+        // Verify the path exists and is a directory
+        const pathStat = await stat(fullPath)
+        if (!pathStat.isDirectory()) {
+          console.warn(`[files] Not a directory: ${fullPath}`)
+          return []
+        }
+
+        const dirEntries = await readdir(fullPath, { withFileTypes: true })
+
+        const entries: { path: string; type: "file" | "folder" }[] = []
+
+        for (const entry of dirEntries) {
+          // Skip .git and system files
+          if (entry.name === ".git") continue
+          if (entry.name === ".DS_Store" || entry.name === "Thumbs.db") continue
+
+          const relativePath = join(folderPath, entry.name)
+
+          if (entry.isDirectory()) {
+            entries.push({ path: relativePath, type: "folder" })
+          } else if (entry.isFile()) {
+            entries.push({ path: relativePath, type: "file" })
+          }
+        }
+
+        // Sort: folders first, then alphabetically
+        entries.sort((a, b) => {
+          if (a.type !== b.type) return a.type === "folder" ? -1 : 1
+          return a.path.localeCompare(b.path)
+        })
+
+        return entries
+      } catch (error) {
+        console.error(`[files] Error listing folder contents:`, error)
+        return []
+      }
+    }),
+
+  /**
+   * Subscribe to file changes in a project directory
+   * Emits events when files are created, modified, or deleted
+   */
+  watchChanges: publicProcedure
+    .input(z.object({ projectPath: z.string() }))
+    .subscription(({ input }) => {
+      const { projectPath } = input
+
+      return observable<{ eventType: string; filename: string }>((emit) => {
+        if (!projectPath) {
+          emit.complete()
+          return () => {}
+        }
+
+        // Start watching this project
+        startWatching(projectPath)
+
+        // Listen for change events
+        const onChange = (data: { eventType: string; filename: string }) => {
+          emit.next(data)
+        }
+
+        fileChangeEmitter.on(`change:${projectPath}`, onChange)
+
+        // Cleanup when subscription ends
+        return () => {
+          fileChangeEmitter.off(`change:${projectPath}`, onChange)
+          stopWatching(projectPath)
+        }
+      })
+    }),
+
+  /**
+   * Get git status for all files in a project directory
+   */
+  gitStatus: publicProcedure
+    .input(z.object({ projectPath: z.string() }))
+    .query(async ({ input }) => {
+      const { projectPath } = input
+
+      if (!projectPath) {
+        return {}
+      }
+
+      try {
+        const statusMap = await getGitStatus(projectPath)
+        // Convert Map to plain object for serialization
+        const result: Record<string, { status: GitStatusCode; staged: boolean }> = {}
+        statusMap.forEach((value, key) => {
+          result[key] = { status: value.status, staged: value.staged }
+        })
+        return result
+      } catch (error) {
+        console.error(`[files] Error getting git status:`, error)
+        return {}
+      }
+    }),
+
+  /**
+   * Subscribe to git status changes (watches .git directory)
+   * More efficient than watching all files - only updates when git state changes
+   */
+  watchGitChanges: publicProcedure
+    .input(z.object({ projectPath: z.string() }))
+    .subscription(({ input }) => {
+      const { projectPath } = input
+
+      return observable<{ type: "git-change" }>((emit) => {
+        if (!projectPath) {
+          emit.complete()
+          return () => {}
+        }
+
+        // Start watching .git directory
+        startGitWatching(projectPath)
+
+        // Listen for git change events
+        const onGitChange = () => {
+          emit.next({ type: "git-change" })
+        }
+
+        fileChangeEmitter.on(`gitChange:${projectPath}`, onGitChange)
+
+        // Cleanup when subscription ends
+        return () => {
+          fileChangeEmitter.off(`gitChange:${projectPath}`, onGitChange)
+          stopGitWatching(projectPath)
+        }
+      })
+    }),
+
+  /**
+   * Check if a file is a supported data file (CSV, JSON, SQLite)
+   */
+  isDataFile: publicProcedure
+    .input(z.object({ filePath: z.string() }))
+    .query(({ input }) => {
+      return isDataFile(input.filePath)
+    }),
+
+  /**
+   * Get metadata about a data file (type, size, tables for SQLite)
+   */
+  getDataFileInfo: publicProcedure
+    .input(z.object({ filePath: z.string() }))
+    .query(async ({ input }) => {
+      return await getDataFileInfo(input.filePath)
+    }),
+
+  /**
+   * Parse and preview a data file (first N rows)
+   */
+  previewDataFile: publicProcedure
+    .input(
+      z.object({
+        filePath: z.string(),
+        limit: z.number().min(1).max(10000).default(1000),
+        offset: z.number().min(0).default(0),
+        tableName: z.string().optional(), // For SQLite files
+      })
+    )
+    .query(async ({ input }) => {
+      return await parseDataFile(input.filePath, {
+        limit: input.limit,
+        offset: input.offset,
+        tableName: input.tableName,
+      })
+    }),
+
+  /**
+   * Execute a SQL query on a SQLite file
+   */
+  querySqliteFile: publicProcedure
+    .input(
+      z.object({
+        filePath: z.string(),
+        sql: z.string(),
+      })
+    )
+    .query(({ input }) => {
+      return querySqlite(input.filePath, input.sql)
+    }),
+
+  /**
+   * Execute a SQL query on any data file (CSV, JSON, Parquet, Excel, Arrow, SQLite)
+   * The file is available as the 'data' table in the query
+   * Example: SELECT * FROM data WHERE column > 100
+   */
+  queryDataFile: publicProcedure
+    .input(
+      z.object({
+        filePath: z.string(),
+        sql: z.string(),
+        sheetName: z.string().optional(), // For Excel files
+      })
+    )
+    .mutation(async ({ input }) => {
+      return queryDataFile(input.filePath, input.sql, {
+        sheetName: input.sheetName,
+      })
+    }),
+
+  /**
+   * List tables in a SQLite file
+   */
+  listSqliteTables: publicProcedure
+    .input(z.object({ filePath: z.string() }))
+    .query(({ input }) => {
+      return listSqliteTables(input.filePath)
+    }),
+
+  /**
+   * List sheets in an Excel file
+   */
+  listExcelSheets: publicProcedure
+    .input(z.object({ filePath: z.string() }))
+    .query(async ({ input }) => {
+      return listExcelSheets(input.filePath)
+    }),
+
+  /**
+   * Read a text file's content for the file viewer
+   * Returns the content as a string with size and binary detection
+   */
+  readTextFile: publicProcedure
+    .input(z.object({ filePath: z.string() }))
+    .query(async ({ input }): Promise<{
+      ok: true
+      content: string
+      byteLength: number
+    } | {
+      ok: false
+      reason: "not-found" | "too-large" | "binary"
+    }> => {
+      const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2 MB
+      const BINARY_CHECK_SIZE = 8192
+
+      // console.log("[files.readTextFile] Reading file:", input.filePath)
+
+      try {
+        // Check file size first
+        const stats = await stat(input.filePath)
+        // console.log("[files.readTextFile] File size:", stats.size)
+        if (stats.size > MAX_FILE_SIZE) {
+          // console.log("[files.readTextFile] File too large")
+          return { ok: false, reason: "too-large" }
+        }
+
+        // Read file content
+        const buffer = await readFile(input.filePath)
+
+        // Check for binary content (NUL bytes in first 8KB)
+        const checkLength = Math.min(buffer.length, BINARY_CHECK_SIZE)
+        for (let i = 0; i < checkLength; i++) {
+          if (buffer[i] === 0) {
+            // console.log("[files.readTextFile] Binary file detected")
+            return { ok: false, reason: "binary" }
+          }
+        }
+
+        // console.log("[files.readTextFile] Success, returning", buffer.length, "bytes")
+        return {
+          ok: true,
+          content: buffer.toString("utf-8"),
+          byteLength: buffer.length,
+        }
+      } catch (error) {
+        console.error("[files.readTextFile] Error:", error)
+        return { ok: false, reason: "not-found" }
+      }
+    }),
+
+  /**
+   * Read a binary file (images, etc.) and return as base64
+   */
+  readBinaryFile: publicProcedure
+    .input(z.object({ filePath: z.string() }))
+    .query(async ({ input }): Promise<{
+      ok: true
+      data: string
+      mimeType: string
+      byteLength: number
+    } | {
+      ok: false
+      reason: "not-found" | "too-large"
+    }> => {
+      const MAX_FILE_SIZE = 20 * 1024 * 1024 // 20 MB for images
+
+      // MIME type mapping
+      const mimeTypes: Record<string, string> = {
+        ".png": "image/png",
+        ".jpg": "image/jpeg",
+        ".jpeg": "image/jpeg",
+        ".gif": "image/gif",
+        ".svg": "image/svg+xml",
+        ".webp": "image/webp",
+        ".ico": "image/x-icon",
+        ".bmp": "image/bmp",
+        ".pdf": "application/pdf",
+      }
+
+      try {
+        const stats = await stat(input.filePath)
+        if (stats.size > MAX_FILE_SIZE) {
+          return { ok: false, reason: "too-large" }
+        }
+
+        const buffer = await readFile(input.filePath)
+        const base64 = buffer.toString("base64")
+        const ext = input.filePath.toLowerCase().match(/\.[^.]+$/)?.[0] || ""
+        const mimeType = mimeTypes[ext] || "application/octet-stream"
+
+        return {
+          ok: true,
+          data: base64,
+          mimeType,
+          byteLength: stats.size,
+        }
+      } catch (error) {
+        console.error("[files.readBinaryFile] Error:", error)
+        return { ok: false, reason: "not-found" }
+      }
+    }),
+
+  /**
+   * Delete a file or folder (moves to OS trash for safety)
+   */
+  deleteFile: publicProcedure
+    .input(z.object({
+      filePath: z.string(),
+      projectPath: z.string().optional(), // For path validation
+      permanent: z.boolean().optional().default(false), // Skip trash
+    }))
+    .mutation(async ({ input }) => {
+      try {
+        // Validate path if projectPath is provided
+        if (input.projectPath) {
+          validatePathWithinDirectory(input.projectPath, input.filePath)
+
+          // Check for symlinks pointing outside the project
+          if (await isSymlinkOutsideDirectory(input.projectPath, input.filePath)) {
+            throw new Error("Cannot delete symlinks pointing outside the project directory")
+          }
+        }
+
+        if (input.permanent) {
+          // Permanent delete (skips trash)
+          await rm(input.filePath, { recursive: true })
+        } else {
+          // Move to OS trash (safer - can be recovered)
+          await shell.trashItem(input.filePath)
+        }
+        return { success: true }
+      } catch (error) {
+        console.error("[files.deleteFile] Error:", error)
+        throw new Error(`Failed to delete: ${error instanceof Error ? error.message : "Unknown error"}`)
+      }
+    }),
+
+  /**
+   * Rename a file or folder
+   */
+  renameFile: publicProcedure
+    .input(z.object({
+      oldPath: z.string(),
+      newPath: z.string(),
+      projectPath: z.string().optional(), // For path validation
+    }))
+    .mutation(async ({ input }) => {
+      try {
+        // Validate both paths if projectPath is provided
+        if (input.projectPath) {
+          validatePathWithinDirectory(input.projectPath, input.oldPath)
+          validatePathWithinDirectory(input.projectPath, input.newPath)
+        }
+
+        await rename(input.oldPath, input.newPath)
+        return { success: true }
+      } catch (error) {
+        console.error("[files.renameFile] Error:", error)
+        throw new Error(`Failed to rename: ${error instanceof Error ? error.message : "Unknown error"}`)
+      }
+    }),
+
+  /**
+   * Move a file or folder to a new directory
+   */
+  moveFile: publicProcedure
+    .input(z.object({
+      sourcePath: z.string(),
+      targetDir: z.string(),
+      projectPath: z.string().optional(), // For path validation
+    }))
+    .mutation(async ({ input }) => {
+      try {
+        const fileName = basename(input.sourcePath)
+        const destPath = join(input.targetDir, fileName)
+
+        // Validate paths if projectPath is provided
+        if (input.projectPath) {
+          validatePathWithinDirectory(input.projectPath, input.sourcePath)
+          validatePathWithinDirectory(input.projectPath, destPath)
+        }
+
+        // Check if destination already exists
+        try {
+          await stat(destPath)
+          throw new Error(`A file named "${fileName}" already exists in the target folder`)
+        } catch (err: any) {
+          if (err.code !== "ENOENT") {
+            throw err
+          }
+          // File doesn't exist, proceed with move
+        }
+
+        await rename(input.sourcePath, destPath)
+        return { success: true, newPath: destPath }
+      } catch (error) {
+        console.error("[files.moveFile] Error:", error)
+        throw new Error(`Failed to move: ${error instanceof Error ? error.message : "Unknown error"}`)
+      }
+    }),
+
+  /**
+   * Reveal a file or folder in the system file manager (Finder/Explorer)
+   */
+  revealInFileManager: publicProcedure
+    .input(z.object({ filePath: z.string() }))
+    .mutation(({ input }) => {
+      try {
+        shell.showItemInFolder(input.filePath)
+        return { success: true }
+      } catch (error) {
+        console.error("[files.revealInFileManager] Error:", error)
+        throw new Error(`Failed to reveal: ${error instanceof Error ? error.message : "Unknown error"}`)
+      }
+    }),
+
+  /**
+   * Import files from external locations into the project
+   * Copies files to the target directory within the project
+   */
+  importFiles: publicProcedure
+    .input(
+      z.object({
+        /** Source file paths (absolute paths from drag-and-drop) */
+        sourcePaths: z.array(z.string()),
+        /** Target directory within the project (absolute path) */
+        targetDir: z.string(),
+        /** Project path for validation */
+        projectPath: z.string().optional(),
+      })
+    )
+    .mutation(async ({ input }) => {
+      const { sourcePaths, targetDir, projectPath } = input
+      const results: { source: string; dest: string; success: boolean; error?: string }[] = []
+
+      // Validate target directory if projectPath is provided
+      if (projectPath) {
+        validatePathWithinDirectory(projectPath, targetDir)
+      }
+
+      // Ensure target directory exists
+      try {
+        await mkdir(targetDir, { recursive: true })
+      } catch (error) {
+        // Directory might already exist, that's fine
+      }
+
+      for (const sourcePath of sourcePaths) {
+        const fileName = basename(sourcePath)
+        const destPath = join(targetDir, fileName)
+
+        try {
+          // Check if source exists
+          const sourceStat = await stat(sourcePath)
+
+          if (sourceStat.isDirectory()) {
+            // For directories, we'd need recursive copy - skip for now
+            results.push({
+              source: sourcePath,
+              dest: destPath,
+              success: false,
+              error: "Directory import not yet supported. Please import individual files.",
+            })
+            continue
+          }
+
+          // Check if destination already exists
+          try {
+            await stat(destPath)
+            // File exists, add a suffix
+            const ext = fileName.includes(".") ? `.${fileName.split(".").pop()}` : ""
+            const nameWithoutExt = ext ? fileName.slice(0, -ext.length) : fileName
+            const timestamp = Date.now()
+            const newDestPath = join(targetDir, `${nameWithoutExt}_${timestamp}${ext}`)
+            await copyFile(sourcePath, newDestPath)
+            results.push({ source: sourcePath, dest: newDestPath, success: true })
+          } catch {
+            // File doesn't exist, copy normally
+            await copyFile(sourcePath, destPath)
+            results.push({ source: sourcePath, dest: destPath, success: true })
+          }
+        } catch (error) {
+          console.error(`[files.importFiles] Failed to copy ${sourcePath}:`, error)
+          results.push({
+            source: sourcePath,
+            dest: destPath,
+            success: false,
+            error: error instanceof Error ? error.message : "Unknown error",
+          })
+        }
+      }
+
+      const successCount = results.filter((r) => r.success).length
+      return {
+        success: successCount > 0,
+        total: sourcePaths.length,
+        imported: successCount,
+        results,
+      }
+    }),
+
+  /**
+   * Copy files to a destination directory
+   * Handles name conflicts by appending " copy" or " copy 2", etc.
+   */
+  copyFiles: publicProcedure
+    .input(
+      z.object({
+        sourcePaths: z.array(z.string()),
+        targetDir: z.string(),
+        projectPath: z.string().optional(), // For path validation
+      })
+    )
+    .mutation(async ({ input }) => {
+      const { sourcePaths, targetDir, projectPath } = input
+      const results: { source: string; dest: string; success: boolean; error?: string }[] = []
+
+      // Validate target directory if projectPath is provided
+      if (projectPath) {
+        validatePathWithinDirectory(projectPath, targetDir)
+      }
+
+      // Ensure target directory exists
+      try {
+        await mkdir(targetDir, { recursive: true })
+      } catch {
+        // Directory might already exist
+      }
+
+      for (const sourcePath of sourcePaths) {
+        const fileName = basename(sourcePath)
+        let destPath = join(targetDir, fileName)
+
+        try {
+          // Validate source path if projectPath is provided
+          if (projectPath) {
+            validatePathWithinDirectory(projectPath, sourcePath)
+
+            // Check for symlinks pointing outside the project
+            if (await isSymlinkOutsideDirectory(projectPath, sourcePath)) {
+              throw new Error("Cannot copy symlinks pointing outside the project directory")
+            }
+          }
+
+          // Check source exists
+          const sourceStats = await stat(sourcePath)
+
+          // Handle name conflicts
+          let copyNumber = 0
+          const nameWithoutExt = fileName.includes(".")
+            ? fileName.slice(0, fileName.lastIndexOf("."))
+            : fileName
+          const ext = fileName.includes(".")
+            ? fileName.slice(fileName.lastIndexOf("."))
+            : ""
+
+          while (true) {
+            try {
+              await stat(destPath)
+              // File exists, try next name
+              copyNumber++
+              const suffix = copyNumber === 1 ? " copy" : ` copy ${copyNumber}`
+              destPath = join(targetDir, `${nameWithoutExt}${suffix}${ext}`)
+            } catch {
+              // File doesn't exist, we can use this name
+              break
+            }
+          }
+
+          if (sourceStats.isDirectory()) {
+            // Recursively copy directory, passing projectPath to validate nested symlinks
+            await copyDir(sourcePath, destPath, projectPath)
+          } else {
+            await copyFile(sourcePath, destPath)
+          }
+          results.push({ source: sourcePath, dest: destPath, success: true })
+        } catch (error) {
+          console.error(`[files.copyFiles] Failed to copy ${sourcePath}:`, error)
+          results.push({
+            source: sourcePath,
+            dest: destPath,
+            success: false,
+            error: error instanceof Error ? error.message : "Unknown error",
+          })
+        }
+      }
+
+      const successCount = results.filter((r) => r.success).length
+      return {
+        success: successCount > 0,
+        total: sourcePaths.length,
+        copied: successCount,
+        results,
+      }
+    }),
+
+  /**
+   * Delete multiple files or folders (moves to OS trash for safety)
+   */
+  deleteFiles: publicProcedure
+    .input(
+      z.object({
+        paths: z.array(z.string()),
+        projectPath: z.string().optional(), // For path validation
+        permanent: z.boolean().optional().default(false), // Skip trash
+      })
+    )
+    .mutation(async ({ input }) => {
+      const { paths, projectPath, permanent } = input
+      const results: { path: string; success: boolean; error?: string }[] = []
+
+      for (const filePath of paths) {
+        try {
+          // Validate path if projectPath is provided
+          if (projectPath) {
+            validatePathWithinDirectory(projectPath, filePath)
+
+            // Check for symlinks pointing outside the project
+            if (await isSymlinkOutsideDirectory(projectPath, filePath)) {
+              throw new Error("Cannot delete symlinks pointing outside the project directory")
+            }
+          }
+
+          if (permanent) {
+            await rm(filePath, { recursive: true, force: true })
+          } else {
+            await shell.trashItem(filePath)
+          }
+          results.push({ path: filePath, success: true })
+        } catch (error) {
+          console.error(`[files.deleteFiles] Failed to delete ${filePath}:`, error)
+          results.push({
+            path: filePath,
+            success: false,
+            error: error instanceof Error ? error.message : "Unknown error",
+          })
+        }
+      }
+
+      const successCount = results.filter((r) => r.success).length
+      return {
+        success: successCount > 0,
+        total: paths.length,
+        deleted: successCount,
+        results,
+      }
+    }),
+
+  /**
+   * Create a new empty file
+   */
+  createFile: publicProcedure
+    .input(
+      z.object({
+        filePath: z.string(),
+        content: z.string().optional().default(""),
+        projectPath: z.string().optional(), // For path validation
+      })
+    )
+    .mutation(async ({ input }) => {
+      const { filePath, content, projectPath } = input
+      try {
+        // Validate path if projectPath is provided
+        if (projectPath) {
+          validatePathWithinDirectory(projectPath, filePath)
+        }
+
+        // Ensure parent directory exists
+        const parentDir = filePath.substring(0, filePath.lastIndexOf("/"))
+        if (parentDir) {
+          await mkdir(parentDir, { recursive: true })
+        }
+
+        // Check if file already exists
+        try {
+          await stat(filePath)
+          throw new Error("File already exists")
+        } catch (err: any) {
+          if (err.code !== "ENOENT") {
+            throw err
+          }
+        }
+
+        // Create the file
+        const { writeFile } = await import("node:fs/promises")
+        await writeFile(filePath, content, "utf-8")
+        return { success: true, path: filePath }
+      } catch (error) {
+        console.error("[files.createFile] Error:", error)
+        throw new Error(`Failed to create file: ${error instanceof Error ? error.message : "Unknown error"}`)
+      }
+    }),
+
+  /**
+   * Create a new folder
+   */
+  createFolder: publicProcedure
+    .input(
+      z.object({
+        folderPath: z.string(),
+        projectPath: z.string().optional(), // For path validation
+      })
+    )
+    .mutation(async ({ input }) => {
+      const { folderPath, projectPath } = input
+      try {
+        // Validate path if projectPath is provided
+        if (projectPath) {
+          validatePathWithinDirectory(projectPath, folderPath)
+        }
+
+        // Check if folder already exists
+        try {
+          await stat(folderPath)
+          throw new Error("Folder already exists")
+        } catch (err: any) {
+          if (err.code !== "ENOENT") {
+            throw err
+          }
+        }
+
+        await mkdir(folderPath, { recursive: true })
+        return { success: true, path: folderPath }
+      } catch (error) {
+        console.error("[files.createFolder] Error:", error)
+        throw new Error(`Failed to create folder: ${error instanceof Error ? error.message : "Unknown error"}`)
+      }
+    }),
+
   /**
    * Read file contents from filesystem
    */
diff --git a/src/main/lib/trpc/routers/projects.ts b/src/main/lib/trpc/routers/projects.ts
index d2f0c70c..9de42950 100644
--- a/src/main/lib/trpc/routers/projects.ts
+++ b/src/main/lib/trpc/routers/projects.ts
@@ -274,9 +274,9 @@ export const projectsRouter = router({
         throw new Error("Invalid GitHub URL or repo format")
       }
 
-      // Clone to ~/.21st/repos/{owner}/{repo}
+      // Clone to ~/.crunch/repos/{owner}/{repo}
       const homePath = app.getPath("home")
-      const reposDir = join(homePath, ".21st", "repos", owner)
+      const reposDir = join(homePath, ".crunch", "repos", owner)
       const clonePath = join(reposDir, repo)
 
       // Check if already cloned
@@ -463,9 +463,9 @@ export const projectsRouter = router({
         await new Promise((resolve) => setTimeout(resolve, 100))
       }
 
-      // Default to ~/.21st/repos/
+      // Default to ~/.crunch/repos/
       const homePath = app.getPath("home")
-      const defaultPath = join(homePath, ".21st", "repos")
+      const defaultPath = join(homePath, ".crunch", "repos")
       await mkdir(defaultPath, { recursive: true })
 
       const result = await dialog.showOpenDialog(window, {
diff --git a/src/main/lib/trpc/routers/skills.ts b/src/main/lib/trpc/routers/skills.ts
index 73adc193..d48f0f13 100644
--- a/src/main/lib/trpc/routers/skills.ts
+++ b/src/main/lib/trpc/routers/skills.ts
@@ -49,7 +49,21 @@ async function scanSkillsDirectory(
     const entries = await fs.readdir(dir, { withFileTypes: true })
 
     for (const entry of entries) {
-      if (!entry.isDirectory()) continue
+      // Handle both directories and symlinks to directories
+      let isDir = entry.isDirectory()
+      if (!isDir && entry.isSymbolicLink()) {
+        // Check if symlink points to a directory
+        try {
+          const targetPath = path.join(dir, entry.name)
+          const stat = await fs.stat(targetPath) // fs.stat follows symlinks
+          isDir = stat.isDirectory()
+        } catch {
+          // Broken symlink or access error - skip
+          continue
+        }
+      }
+
+      if (!isDir) continue
 
       // Validate entry name for security (prevent path traversal)
       if (entry.name.includes("..") || entry.name.includes("/") || entry.name.includes("\\")) {
diff --git a/src/main/lib/trpc/routers/voice.ts b/src/main/lib/trpc/routers/voice.ts
index af2876aa..6c28163d 100644
--- a/src/main/lib/trpc/routers/voice.ts
+++ b/src/main/lib/trpc/routers/voice.ts
@@ -2,7 +2,7 @@
  * Voice TRPC router
  * Provides voice-to-text transcription using OpenAI Whisper API
  *
- * For authenticated users (with subscription): uses 21st.dev backend
+ * For authenticated users (with subscription): uses getcrunch.dev backend
  * For open-source users: requires OPENAI_API_KEY in environment
  */
 
@@ -184,7 +184,7 @@ export function clearOpenAIKeyCache(): void {
 }
 
 /**
- * Transcribe audio using 21st.dev backend (for authenticated users)
+ * Transcribe audio using getcrunch.dev backend (for authenticated users)
  */
 async function transcribeViaBackend(
   audioBuffer: Buffer,
diff --git a/src/main/lib/trpc/routers/worktree-config.ts b/src/main/lib/trpc/routers/worktree-config.ts
index bc6109ed..c3b7eb48 100644
--- a/src/main/lib/trpc/routers/worktree-config.ts
+++ b/src/main/lib/trpc/routers/worktree-config.ts
@@ -18,7 +18,7 @@ const WorktreeConfigSchema = z.object({
 export const worktreeConfigRouter = router({
   /**
    * Get worktree config for a project
-   * Detects from .cursor/worktrees.json or .1code/worktree.json
+   * Detects from .cursor/worktrees.json or .crunch/worktree.json
    */
   get: publicProcedure
     .input(z.object({ projectId: z.string() }))
@@ -54,7 +54,7 @@ export const worktreeConfigRouter = router({
       z.object({
         projectId: z.string(),
         config: WorktreeConfigSchema,
-        target: z.enum(["cursor", "1code"]).or(z.string()).default("1code"),
+        target: z.enum(["cursor", "crunch"]).or(z.string()).default("crunch"),
       }),
     )
     .mutation(async ({ input }) => {
diff --git a/src/main/windows/main.ts b/src/main/windows/main.ts
index e0c03154..dde1b585 100644
--- a/src/main/windows/main.ts
+++ b/src/main/windows/main.ts
@@ -74,9 +74,9 @@ function registerIpcHandlers(): void {
     } else if (process.platform === "win32" && win) {
       // Windows: Update title with count as fallback
       if (count !== null && count > 0) {
-        win.setTitle(`1Code (${count})`)
+        win.setTitle(`Crunch (${count})`)
       } else {
-        win.setTitle("1Code")
+        win.setTitle("Crunch")
         win.setOverlayIcon(null, "")
       }
     }
@@ -204,7 +204,7 @@ function registerIpcHandlers(): void {
     const win = getWindowFromEvent(event)
     if (win) {
       // Show just the title, or default app name if empty
-      win.setTitle(title || "1Code")
+      win.setTitle(title || "Crunch")
     }
   })
 
@@ -252,7 +252,7 @@ function registerIpcHandlers(): void {
       const parsed = new URL(senderUrl)
       if (parsed.protocol === "file:") return true
       const hostname = parsed.hostname.toLowerCase()
-      const trusted = ["21st.dev", "localhost", "127.0.0.1"]
+      const trusted = ["getcrunch.dev", "localhost", "127.0.0.1"]
       return trusted.some((h) => hostname === h || hostname.endsWith(`.${h}`))
     } catch {
       return false
@@ -537,7 +537,7 @@ export function createWindow(options?: { chatId?: string; subChatId?: string }):
     minWidth: 500, // Allow narrow mobile-like mode
     minHeight: 600,
     show: false,
-    title: "1Code",
+    title: "Crunch",
     backgroundColor: nativeTheme.shouldUseDarkColors ? "#09090b" : "#ffffff",
     // hiddenInset shows native traffic lights inset in the window
     // Start with traffic lights off-screen (custom ones shown in normal mode)
diff --git a/src/renderer/components/dialogs/settings-tabs/agents-custom-agents-tab.tsx b/src/renderer/components/dialogs/settings-tabs/agents-custom-agents-tab.tsx
index a994ce15..f9aa3dab 100644
--- a/src/renderer/components/dialogs/settings-tabs/agents-custom-agents-tab.tsx
+++ b/src/renderer/components/dialogs/settings-tabs/agents-custom-agents-tab.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react"
-import { ChevronRight } from "lucide-react"
+import { ChevronRight, Trash2 } from "lucide-react"
 import { motion, AnimatePresence } from "motion/react"
 import { trpc } from "../../../lib/trpc"
 import { cn } from "../../../lib/utils"
@@ -37,12 +37,24 @@ export function AgentsCustomAgentsTab() {
   const isNarrowScreen = useIsNarrowScreen()
   const [expandedAgentName, setExpandedAgentName] = useState<string | null>(null)
 
-  const { data: agents = [], isLoading } = trpc.agents.list.useQuery(undefined)
+  const utils = trpc.useUtils()
+  const { data: agents = [], isLoading } = trpc.agents.listEnabled.useQuery(
+    undefined,
+    { staleTime: 0 } // Always refetch when settings opens
+  )
 
   const openInFinderMutation = trpc.external.openInFinder.useMutation()
 
+  const deleteAgentMutation = trpc.agents.delete.useMutation({
+    onSuccess: () => {
+      utils.agents.listEnabled.invalidate()
+    },
+    onError: (error) => {
+      console.error("Failed to delete agent:", error.message)
+    },
+  })
+
   const userAgents = agents.filter((a) => a.source === "user")
-  const projectAgents = agents.filter((a) => a.source === "project")
 
   const handleExpandAgent = (agentName: string) => {
     setExpandedAgentName(expandedAgentName === agentName ? null : agentName)
@@ -52,25 +64,34 @@ export function AgentsCustomAgentsTab() {
     openInFinderMutation.mutate(path)
   }
 
+  const handleDeleteAgent = (agent: FileAgent) => {
+    deleteAgentMutation.mutate({
+      name: agent.name,
+      source: agent.source,
+    })
+  }
+
   return (
     <div className="p-6 space-y-6 overflow-y-auto max-h-[70vh]">
       {/* Header - hidden on narrow screens */}
       {!isNarrowScreen && (
-        <div className="flex flex-col space-y-1.5 text-center sm:text-left">
-          <div className="flex items-center gap-2">
-            <h3 className="text-sm font-semibold text-foreground">Custom Agents</h3>
-            <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground">
-              Beta
-            </span>
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col space-y-1.5 text-left">
+            <div className="flex items-center gap-2">
+              <h3 className="text-sm font-semibold text-foreground">Custom Agents</h3>
+              <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground">
+                Beta
+              </span>
+            </div>
+            <a
+              href="https://code.claude.com/docs/en/sub-agents"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-muted-foreground hover:text-foreground underline transition-colors"
+            >
+              Documentation
+            </a>
           </div>
-          <a
-            href="https://code.claude.com/docs/en/sub-agents"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-xs text-muted-foreground hover:text-foreground underline transition-colors"
-          >
-            Documentation
-          </a>
         </div>
       )}
 
@@ -84,58 +105,32 @@ export function AgentsCustomAgentsTab() {
           <div className="bg-background rounded-lg border border-border p-6 text-center">
             <AgentIcon className="h-8 w-8 text-muted-foreground/50 mx-auto mb-3" />
             <p className="text-sm text-muted-foreground mb-2">
-              No custom agents found
+              No custom agents yet
             </p>
             <p className="text-xs text-muted-foreground">
-              Add .md files to <code className="px-1 py-0.5 bg-muted rounded">~/.claude/agents/</code>
+              Use <code className="px-1 py-0.5 rounded bg-muted text-foreground">/create-agent</code> in chat to create one, or manually add <code className="px-1 py-0.5 rounded bg-muted text-foreground">.md</code> files to <code className="px-1 py-0.5 rounded bg-muted text-foreground">~/.claude/agents/</code> or <code className="px-1 py-0.5 rounded bg-muted text-foreground">.claude/agents/</code>
             </p>
           </div>
         ) : (
-          <>
-            {/* User Agents */}
-            {userAgents.length > 0 && (
-              <div className="space-y-2">
-                <div className="text-xs text-muted-foreground">
-                  ~/.claude/agents/
-                </div>
-                <div className="bg-background rounded-lg border border-border overflow-hidden">
-                  <div className="divide-y divide-border">
-                    {userAgents.map((agent) => (
-                      <AgentRow
-                        key={agent.name}
-                        agent={agent}
-                        isExpanded={expandedAgentName === agent.name}
-                        onToggle={() => handleExpandAgent(agent.name)}
-                        onOpenInFinder={() => handleOpenInFinder(agent.path)}
-                      />
-                    ))}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Project Agents */}
-            {projectAgents.length > 0 && (
-              <div className="space-y-2">
-                <div className="text-xs text-muted-foreground">
-                  .claude/agents/
-                </div>
-                <div className="bg-background rounded-lg border border-border overflow-hidden">
-                  <div className="divide-y divide-border">
-                    {projectAgents.map((agent) => (
-                      <AgentRow
-                        key={agent.name}
-                        agent={agent}
-                        isExpanded={expandedAgentName === agent.name}
-                        onToggle={() => handleExpandAgent(agent.name)}
-                        onOpenInFinder={() => handleOpenInFinder(agent.path)}
-                      />
-                    ))}
-                  </div>
-                </div>
+          <div className="space-y-2">
+            <div className="text-xs text-muted-foreground">
+              ~/.claude/agents/
+            </div>
+            <div className="bg-background rounded-lg border border-border overflow-hidden">
+              <div className="divide-y divide-border">
+                {userAgents.map((agent) => (
+                  <AgentRow
+                    key={agent.name}
+                    agent={agent}
+                    isExpanded={expandedAgentName === agent.name}
+                    onToggle={() => handleExpandAgent(agent.name)}
+                    onOpenInFinder={() => handleOpenInFinder(agent.path)}
+                    onDelete={() => handleDeleteAgent(agent)}
+                  />
+                ))}
               </div>
-            )}
-          </>
+            </div>
+          </div>
         )}
       </div>
 
@@ -151,18 +146,18 @@ export function AgentsCustomAgentsTab() {
         </div>
         <div>
           <h4 className="text-xs font-medium text-foreground mb-1.5">
-            Using Agents
+            Creating Agents
           </h4>
           <p className="text-xs text-muted-foreground">
-            Ask Claude to use an agent directly (e.g., "use the code-reviewer agent") or Claude will automatically invoke them when appropriate.
+            Type <code className="px-1 py-0.5 rounded bg-muted text-foreground">/create-agent</code> in chat to create an agent interactively, or manually create <code className="px-1 py-0.5 rounded bg-muted text-foreground">.md</code> files in <code className="px-1 py-0.5 rounded bg-muted text-foreground">~/.claude/agents/</code> (global) or <code className="px-1 py-0.5 rounded bg-muted text-foreground">.claude/agents/</code> (project).
           </p>
         </div>
         <div>
           <h4 className="text-xs font-medium text-foreground mb-1.5">
-            File Format
+            Using Agents
           </h4>
           <p className="text-xs text-muted-foreground">
-            Agents are Markdown files with YAML frontmatter containing <code className="px-1 py-0.5 bg-muted rounded">name</code>, <code className="px-1 py-0.5 bg-muted rounded">description</code>, <code className="px-1 py-0.5 bg-muted rounded">tools</code>, and <code className="px-1 py-0.5 bg-muted rounded">model</code>. The body is the system prompt.
+            Ask Claude to use an agent directly (e.g., "use the code-reviewer agent"), mention them with <code className="px-1 py-0.5 rounded bg-muted text-foreground">@</code> in chat, or Claude will automatically invoke them when appropriate.
           </p>
         </div>
       </div>
@@ -176,11 +171,13 @@ function AgentRow({
   isExpanded,
   onToggle,
   onOpenInFinder,
+  onDelete,
 }: {
   agent: FileAgent
   isExpanded: boolean
   onToggle: () => void
   onOpenInFinder: () => void
+  onDelete: () => void
 }) {
   return (
     <div>
@@ -272,6 +269,20 @@ function AgentRow({
                     </div>
                   </div>
                 )}
+
+                {/* Delete */}
+                <div className="pt-2 border-t border-border">
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onDelete()
+                    }}
+                    className="flex items-center gap-1.5 text-xs text-destructive hover:text-destructive/80 transition-colors"
+                  >
+                    <Trash2 className="h-3 w-3" />
+                    Delete agent
+                  </button>
+                </div>
               </div>
             </div>
           </motion.div>
diff --git a/src/renderer/components/dialogs/settings-tabs/agents-project-worktree-tab.tsx b/src/renderer/components/dialogs/settings-tabs/agents-project-worktree-tab.tsx
index 302df6ea..025fa9d9 100644
--- a/src/renderer/components/dialogs/settings-tabs/agents-project-worktree-tab.tsx
+++ b/src/renderer/components/dialogs/settings-tabs/agents-project-worktree-tab.tsx
@@ -115,7 +115,7 @@ export function AgentsProjectWorktreeTab({
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
 
   // Local state
-  const [saveTarget, setSaveTarget] = useState<"cursor" | "1code">("1code")
+  const [saveTarget, setSaveTarget] = useState<"cursor" | "crunch">("crunch")
   const [commands, setCommands] = useState<string[]>([""])
   const [unixCommands, setUnixCommands] = useState<string[]>([])
   const [windowsCommands, setWindowsCommands] = useState<string[]>([])
@@ -127,7 +127,7 @@ export function AgentsProjectWorktreeTab({
       if (configData.source === "cursor") {
         setSaveTarget("cursor")
       } else {
-        setSaveTarget("1code")
+        setSaveTarget("crunch")
       }
 
       if (configData.config) {
@@ -283,18 +283,18 @@ export function AgentsProjectWorktreeTab({
             <div className="flex-shrink-0 w-auto min-w-56 max-w-80">
               <Select
                 value={saveTarget}
-                onValueChange={(v) => setSaveTarget(v as "cursor" | "1code")}
+                onValueChange={(v) => setSaveTarget(v as "cursor" | "crunch")}
               >
                 <SelectTrigger className="w-full">
                   <span className="text-sm font-mono truncate">
                     {saveTarget === "cursor"
                       ? ".cursor/worktrees.json"
-                      : ".1code/worktree.json"}
+                      : ".crunch/worktree.json"}
                   </span>
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="1code">
-                    .1code/worktree.json
+                  <SelectItem value="crunch">
+                    .crunch/worktree.json
                   </SelectItem>
                   {cursorExists && (
                     <SelectItem value="cursor">
diff --git a/src/renderer/components/dialogs/settings-tabs/agents-worktrees-tab.tsx b/src/renderer/components/dialogs/settings-tabs/agents-worktrees-tab.tsx
index 131eda4d..84a0ef8f 100644
--- a/src/renderer/components/dialogs/settings-tabs/agents-worktrees-tab.tsx
+++ b/src/renderer/components/dialogs/settings-tabs/agents-worktrees-tab.tsx
@@ -73,7 +73,7 @@ export function AgentsWorktreesTab() {
   })
 
   // Local state
-  const [saveTarget, setSaveTarget] = useState<"cursor" | "1code">("1code")
+  const [saveTarget, setSaveTarget] = useState<"cursor" | "crunch">("crunch")
   const [commands, setCommands] = useState<string[]>([""])
   const [unixCommands, setUnixCommands] = useState<string[]>([])
   const [windowsCommands, setWindowsCommands] = useState<string[]>([])
@@ -92,7 +92,7 @@ export function AgentsWorktreesTab() {
       if (configData.source === "cursor") {
         setSaveTarget("cursor")
       } else {
-        setSaveTarget("1code")
+        setSaveTarget("crunch")
       }
 
       if (configData.config) {
@@ -256,18 +256,18 @@ export function AgentsWorktreesTab() {
                 <div className="flex-shrink-0 w-auto min-w-56 max-w-80">
                   <Select
                     value={saveTarget}
-                    onValueChange={(v) => setSaveTarget(v as "cursor" | "1code")}
+                    onValueChange={(v) => setSaveTarget(v as "cursor" | "crunch")}
                   >
                     <SelectTrigger className="w-full">
                       <span className="text-sm font-mono truncate">
                         {saveTarget === "cursor"
                           ? ".cursor/worktrees.json"
-                          : ".1code/worktree.json"}
+                          : ".crunch/worktree.json"}
                       </span>
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="1code">
-                        .1code/worktree.json
+                      <SelectItem value="crunch">
+                        .crunch/worktree.json
                       </SelectItem>
                       {cursorExists && (
                         <SelectItem value="cursor">
diff --git a/src/renderer/components/ui/error-boundary.tsx b/src/renderer/components/ui/error-boundary.tsx
new file mode 100644
index 00000000..ad863404
--- /dev/null
+++ b/src/renderer/components/ui/error-boundary.tsx
@@ -0,0 +1,112 @@
+import { Component, type ReactNode } from "react"
+import { AlertCircle, RefreshCw } from "lucide-react"
+import { Button } from "./button"
+
+interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: ReactNode
+  onReset?: () => void
+  /** Optional context for error logging */
+  context?: string
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error: Error | null
+}
+
+/**
+ * Error Boundary component that catches JavaScript errors in child components
+ * and displays a fallback UI instead of crashing the entire app.
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    const context = this.props.context || "Unknown"
+    console.error(`[ErrorBoundary:${context}] Caught error:`, error, errorInfo)
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null })
+    this.props.onReset?.()
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      return (
+        <div className="flex flex-col items-center justify-center h-full p-6 text-center">
+          <AlertCircle className="h-10 w-10 text-muted-foreground mb-3" />
+          <p className="font-medium text-foreground mb-1">Something went wrong</p>
+          <p className="text-sm text-muted-foreground mb-4 max-w-[300px]">
+            {this.state.error?.message || "An unexpected error occurred"}
+          </p>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={this.handleReset}
+            className="gap-2"
+          >
+            <RefreshCw className="h-3.5 w-3.5" />
+            Try again
+          </Button>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+/**
+ * Specialized error boundary for file viewers with appropriate styling
+ */
+export function ViewerErrorBoundary({
+  children,
+  onReset,
+  viewerType = "file",
+}: {
+  children: ReactNode
+  onReset?: () => void
+  viewerType?: "file" | "data" | "image" | "markdown"
+}) {
+  return (
+    <ErrorBoundary
+      context={`${viewerType}-viewer`}
+      onReset={onReset}
+      fallback={
+        <div className="flex flex-col items-center justify-center h-full p-6 text-center bg-background">
+          <AlertCircle className="h-10 w-10 text-muted-foreground mb-3" />
+          <p className="font-medium text-foreground mb-1">Failed to render {viewerType}</p>
+          <p className="text-sm text-muted-foreground mb-4">
+            The {viewerType} viewer encountered an error
+          </p>
+          {onReset && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onReset}
+              className="gap-2"
+            >
+              <RefreshCw className="h-3.5 w-3.5" />
+              Try again
+            </Button>
+          )}
+        </div>
+      }
+    >
+      {children}
+    </ErrorBoundary>
+  )
+}
diff --git a/src/renderer/components/ui/icons.tsx b/src/renderer/components/ui/icons.tsx
index 04db6c5c..7888a2b2 100644
--- a/src/renderer/components/ui/icons.tsx
+++ b/src/renderer/components/ui/icons.tsx
@@ -2551,7 +2551,7 @@ export function VolumeIcon({ className }: { className?: string }) {
       fill="none"
       className={className}
     >
-      <g transform="translate(0, 1) scale(1.1)" transform-origin="center">
+      <g transform="translate(0, 1) scale(1.1)" style={{ transformOrigin: "center" }}>
         <path
           d="M19.071 4.92968C20.8807 6.73932 22 9.23932 22 12.0007C22 14.7622 20.8807 17.2622 19.071 19.0718M15.8891 8.11132C16.8844 9.10662 17.5 10.4816 17.5 12.0004C17.5 13.5192 16.8844 14.8942 15.8891 15.8895M4 7.99999H5.2759C5.74377 7.99999 6.19684 7.83596 6.55627 7.53643L10.3598 4.36681C11.0111 3.82403 12 4.28719 12 5.13503V18.8649C12 19.7128 11.0111 20.1759 10.3598 19.6332L6.55627 16.4635C6.19684 16.164 5.74377 16 5.2759 16H4C2.89543 16 2 15.1046 2 14V9.99999C2 8.89542 2.89543 7.99999 4 7.99999Z"
           stroke="currentColor"
diff --git a/src/renderer/components/ui/logo.tsx b/src/renderer/components/ui/logo.tsx
index 9e1028a5..bd0e0f4b 100644
--- a/src/renderer/components/ui/logo.tsx
+++ b/src/renderer/components/ui/logo.tsx
@@ -13,7 +13,7 @@ export function Logo({ fill = "currentColor", className, ...props }: LogoProps)
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={cn("w-full h-full", className)}
-      aria-label="21st logo"
+      aria-label="Crunch logo"
       {...props}
     >
       <path
diff --git a/src/renderer/components/update-banner.tsx b/src/renderer/components/update-banner.tsx
index d3c1e62f..17d446c1 100644
--- a/src/renderer/components/update-banner.tsx
+++ b/src/renderer/components/update-banner.tsx
@@ -136,7 +136,7 @@ export function UpdateBanner() {
 
   const handleOpenChangelog = () => {
     // Open changelog URL
-    window.desktopApi?.openExternal("https://1code.dev/changelog")
+    window.desktopApi?.openExternal("https://getcrunch.dev/changelog")
     // Dismiss the banner
     if (isMocking) {
       setMockStatus("dismissed")
diff --git a/src/renderer/components/windows-title-bar.tsx b/src/renderer/components/windows-title-bar.tsx
index b0219b7b..a424cc2d 100644
--- a/src/renderer/components/windows-title-bar.tsx
+++ b/src/renderer/components/windows-title-bar.tsx
@@ -78,7 +78,7 @@ export function WindowsTitleBar() {
     >
       {/* Left side - App title (draggable) */}
       <div className="flex items-center gap-2 px-3 h-full">
-        <span className="text-xs font-medium text-foreground/70">1Code</span>
+        <span className="text-xs font-medium text-foreground/70">Crunch</span>
       </div>
 
       {/* Right side - Window controls (non-draggable) */}
diff --git a/src/renderer/features/agents/atoms/index.ts b/src/renderer/features/agents/atoms/index.ts
index cb858f6b..49a63a80 100644
--- a/src/renderer/features/agents/atoms/index.ts
+++ b/src/renderer/features/agents/atoms/index.ts
@@ -1,5 +1,6 @@
 import { atom } from "jotai"
-import { atomFamily, atomWithStorage } from "jotai/utils"
+import { atomWithStorage } from "jotai/utils"
+import { atomFamily } from "jotai-family"
 import { atomWithWindowStorage } from "../../../lib/window-storage"
 
 // Agent mode type - extensible for future modes like "debug"
@@ -647,6 +648,9 @@ export const pendingBuildPlanSubChatIdAtom = atom<string | null>(null)
 // Map<toolUseId, result>
 export const askUserQuestionResultsAtom = atom<Map<string, unknown>>(new Map())
 
+// Create-agent form visibility - set to true when /create-agent command is triggered
+export const showCreateAgentFormAtom = atom<boolean>(false)
+
 // Unified undo stack for workspace and sub-chat archivation
 // Supports Cmd+Z to restore the last archived item (workspace or sub-chat)
 export type UndoItem =
@@ -684,6 +688,69 @@ export const viewedFilesAtomFamily = atomFamily((chatId: string) =>
   ),
 )
 
+// File tree sidebar state
+export const agentsFileTreeSidebarOpenAtom = atomWithStorage<boolean>(
+  "agents-file-tree-sidebar-open",
+  false,
+  undefined,
+  { getOnInit: true },
+)
+
+export const agentsFileTreeSidebarWidthAtom = atomWithStorage<number>(
+  "agents-file-tree-sidebar-width",
+  250,
+  undefined,
+  { getOnInit: true },
+)
+
+// Expanded folders per project - stores Set of expanded folder paths
+const expandedFoldersStorageAtom = atomWithStorage<Record<string, string[]>>(
+  "agents:expandedFolders",
+  {},
+  undefined,
+  { getOnInit: true },
+)
+
+// atomFamily to get/set expanded folders per projectId
+export const expandedFoldersAtomFamily = atomFamily((projectId: string) =>
+  atom(
+    (get) => new Set(get(expandedFoldersStorageAtom)[projectId] ?? []),
+    (get, set, newSet: Set<string>) => {
+      const current = get(expandedFoldersStorageAtom)
+      set(expandedFoldersStorageAtom, { ...current, [projectId]: Array.from(newSet) })
+    },
+  ),
+)
+
+// Selected file path (focused item for keyboard navigation)
+export const selectedFilePathAtomFamily = atomFamily((projectId: string) =>
+  atom<string | null>(null),
+)
+
+// Multi-selection: set of selected file paths
+export const selectedFilePathsAtomFamily = atomFamily((projectId: string) =>
+  atom<Set<string>>(new Set()),
+)
+
+// File clipboard state for cut/copy operations
+export const fileClipboardAtom = atom<{
+  paths: string[]
+  operation: "copy" | "cut"
+  projectPath: string
+} | null>(null)
+
+// ============================================================================
+// Data Viewer Sidebar
+// ============================================================================
+
+// Data viewer sidebar width (global, shared across all chats)
+export const dataViewerSidebarWidthAtom = atomWithStorage<number>(
+  "agents-data-viewer-sidebar-width",
+  500,
+  undefined,
+  { getOnInit: true },
+)
+
 // Open Locally dialog trigger - set to chatId to open dialog for that chat
 export const openLocallyChatIdAtom = atom<string | null>(null)
 
@@ -697,6 +764,14 @@ export const agentsPlanSidebarWidthAtom = atomWithStorage<number>(
   { getOnInit: true },
 )
 
+// Data viewer sidebar open state per chat
+const dataViewerSidebarOpenStorageAtom = atomWithStorage<Record<string, boolean>>(
+  "agents:dataViewerSidebarOpen",
+  {},
+  undefined,
+  { getOnInit: true },
+)
+
 // Plan sidebar open state storage - stores per chatId (persisted)
 // Uses window-scoped storage so each window can have independent plan sidebar states
 const planSidebarOpenStorageAtom = atomWithWindowStorage<Record<string, boolean>>(
@@ -705,6 +780,17 @@ const planSidebarOpenStorageAtom = atomWithWindowStorage<Record<string, boolean>
   { getOnInit: true },
 )
 
+// atomFamily to get/set data viewer sidebar open state per chatId
+export const dataViewerSidebarOpenAtomFamily = atomFamily((chatId: string) =>
+  atom(
+    (get) => get(dataViewerSidebarOpenStorageAtom)[chatId] ?? false,
+    (get, set, isOpen: boolean) => {
+      const current = get(dataViewerSidebarOpenStorageAtom)
+      set(dataViewerSidebarOpenStorageAtom, { ...current, [chatId]: isOpen })
+    },
+  ),
+)
+
 // atomFamily to get/set plan sidebar open state per chatId
 export const planSidebarOpenAtomFamily = atomFamily((chatId: string) =>
   atom(
@@ -716,6 +802,25 @@ export const planSidebarOpenAtomFamily = atomFamily((chatId: string) =>
   ),
 )
 
+// Currently viewed data file path per chat
+const viewedDataFileStorageAtom = atomWithStorage<Record<string, string | null>>(
+  "agents:viewedDataFile",
+  {},
+  undefined,
+  { getOnInit: true },
+)
+
+// atomFamily to get/set viewed data file path per chatId
+export const viewedDataFileAtomFamily = atomFamily((chatId: string) =>
+  atom(
+    (get) => get(viewedDataFileStorageAtom)[chatId] ?? null,
+    (get, set, filePath: string | null) => {
+      const current = get(viewedDataFileStorageAtom)
+      set(viewedDataFileStorageAtom, { ...current, [chatId]: filePath })
+    },
+  ),
+)
+
 // Current plan path storage - stores per chatId (runtime only, not persisted)
 const currentPlanPathStorageAtom = atom<Record<string, string | null>>({})
 
@@ -730,6 +835,83 @@ export const currentPlanPathAtomFamily = atomFamily((chatId: string) =>
   ),
 )
 
+// Selected table for SQLite files (per file path)
+const selectedSqliteTableStorageAtom = atomWithStorage<Record<string, string>>(
+  "agents:selectedSqliteTable",
+  {},
+  undefined,
+  { getOnInit: true },
+)
+
+// atomFamily to get/set selected SQLite table per file path
+export const selectedSqliteTableAtomFamily = atomFamily((filePath: string) =>
+  atom(
+    (get) => get(selectedSqliteTableStorageAtom)[filePath] ?? "",
+    (get, set, tableName: string) => {
+      const current = get(selectedSqliteTableStorageAtom)
+      set(selectedSqliteTableStorageAtom, { ...current, [filePath]: tableName })
+    },
+  ),
+)
+
+// ============================================================================
+// File Viewer Sidebar (Monaco Editor)
+// ============================================================================
+
+// File viewer sidebar width (global, shared across all chats)
+export const fileViewerSidebarWidthAtom = atomWithStorage<number>(
+  "agents-file-viewer-sidebar-width",
+  500,
+  undefined,
+  { getOnInit: true },
+)
+
+// File viewer sidebar open state per chat
+const fileViewerSidebarOpenStorageAtom = atomWithStorage<Record<string, boolean>>(
+  "agents:fileViewerSidebarOpen",
+  {},
+  undefined,
+  { getOnInit: true },
+)
+
+// atomFamily to get/set file viewer sidebar open state per chatId
+export const fileViewerSidebarOpenAtomFamily = atomFamily((chatId: string) =>
+  atom(
+    (get) => get(fileViewerSidebarOpenStorageAtom)[chatId] ?? false,
+    (get, set, isOpen: boolean) => {
+      const current = get(fileViewerSidebarOpenStorageAtom)
+      set(fileViewerSidebarOpenStorageAtom, { ...current, [chatId]: isOpen })
+    },
+  ),
+)
+
+// Currently viewed source file path per chat
+const viewedSourceFileStorageAtom = atomWithStorage<Record<string, string | null>>(
+  "agents:viewedSourceFile",
+  {},
+  undefined,
+  { getOnInit: true },
+)
+
+// atomFamily to get/set viewed source file path per chatId
+export const viewedSourceFileAtomFamily = atomFamily((chatId: string) =>
+  atom(
+    (get) => get(viewedSourceFileStorageAtom)[chatId] ?? null,
+    (get, set, filePath: string | null) => {
+      const current = get(viewedSourceFileStorageAtom)
+      set(viewedSourceFileStorageAtom, { ...current, [chatId]: filePath })
+    },
+  ),
+)
+
+// Word wrap preference for file viewer (persisted globally)
+export const fileViewerWordWrapAtom = atomWithStorage<boolean>(
+  "agents:fileViewerWordWrap",
+  false,
+  undefined,
+  { getOnInit: true },
+)
+
 // Per-chat plan edit refetch trigger - incremented when an Edit on a plan file completes
 // Used to trigger sidebar refetch when plan content changes
 const planEditRefetchTriggerStorageAtom = atom<Record<string, number>>({})
diff --git a/src/renderer/features/agents/commands/agents-slash-command.tsx b/src/renderer/features/agents/commands/agents-slash-command.tsx
index f26f17ab..9d3a202b 100644
--- a/src/renderer/features/agents/commands/agents-slash-command.tsx
+++ b/src/renderer/features/agents/commands/agents-slash-command.tsx
@@ -12,7 +12,20 @@ import {
   memo,
 } from "react"
 import { createPortal } from "react-dom"
-import { IconSpinner } from "../../../components/ui/icons"
+import {
+  IconSpinner,
+  IconChatBubble,
+  PlanIcon,
+  AgentIcon,
+} from "../../../components/ui/icons"
+import {
+  MessageSquareCode,
+  FileText,
+  ShieldCheck,
+  Eye,
+  FolderGit2,
+  Bot,
+} from "lucide-react"
 import type { SlashCommandOption, SlashTriggerPayload } from "./types"
 import {
   filterBuiltinCommands,
@@ -20,6 +33,33 @@ import {
 } from "./builtin-commands"
 import type { AgentMode } from "../atoms"
 
+// Get icon component for a slash command
+function getCommandIcon(commandName: string) {
+  switch (commandName) {
+    case "clear":
+      return IconChatBubble
+    case "plan":
+      return PlanIcon
+    case "agent":
+      return AgentIcon
+    case "review":
+      return Eye
+    case "pr-comments":
+      return MessageSquareCode
+    case "release-notes":
+      return FileText
+    case "security-review":
+      return ShieldCheck
+    case "worktree-setup":
+      return FolderGit2
+    case "create-agent":
+      return Bot
+    default:
+      return IconChatBubble
+  }
+}
+
+
 interface AgentsSlashCommandProps {
   isOpen: boolean
   onClose: () => void
diff --git a/src/renderer/features/agents/commands/builtin-commands.ts b/src/renderer/features/agents/commands/builtin-commands.ts
index 6a29bc62..712a4892 100644
--- a/src/renderer/features/agents/commands/builtin-commands.ts
+++ b/src/renderer/features/agents/commands/builtin-commands.ts
@@ -20,7 +20,7 @@ export const COMMAND_PROMPTS: Partial<
 
 Your task:
 1. Analyze the project to understand what's needed to set up a working copy
-2. Create the file .1code/worktree.json with setup commands
+2. Create the file .crunch/worktree.json with setup commands
 
 The goal is to reproduce the EXACT same working state as the original repo in the new worktree.
 
@@ -31,7 +31,7 @@ Rules:
 - Use $ROOT_WORKTREE_PATH to reference the main repo path
 - Don't include build steps unless absolutely necessary for the project to work
 
-Example output for .1code/worktree.json:
+Example output for .crunch/worktree.json:
 {
   "setup-worktree": [
     "bun install",
@@ -40,7 +40,7 @@ Example output for .1code/worktree.json:
   ]
 }
 
-Now analyze this project and create .1code/worktree.json with the appropriate setup commands.`,
+Now analyze this project and create .crunch/worktree.json with the appropriate setup commands.`,
 }
 
 /**
@@ -84,6 +84,13 @@ export const BUILTIN_SLASH_COMMANDS: SlashCommandOption[] = [
     description: "Compact conversation context to reduce token usage",
     category: "builtin",
   },
+  {
+    id: "builtin:create-agent",
+    name: "create-agent",
+    command: "/create-agent",
+    description: "Create a custom Claude Code agent",
+    category: "builtin",
+  },
   // Prompt-based commands
   {
     id: "builtin:review",
diff --git a/src/renderer/features/agents/commands/types.ts b/src/renderer/features/agents/commands/types.ts
index 8c2d2d86..e46cd00d 100644
--- a/src/renderer/features/agents/commands/types.ts
+++ b/src/renderer/features/agents/commands/types.ts
@@ -36,6 +36,7 @@ export type BuiltinCommandAction =
   | { type: "plan" }
   | { type: "agent" }
   | { type: "compact" }
+  | { type: "create-agent" }
   // Prompt-based commands (send to agent)
   | { type: "review" }
   | { type: "pr-comments" }
diff --git a/src/renderer/features/agents/hooks/use-changed-files-tracking.ts b/src/renderer/features/agents/hooks/use-changed-files-tracking.ts
index c0cdd41f..a2f7d219 100644
--- a/src/renderer/features/agents/hooks/use-changed-files-tracking.ts
+++ b/src/renderer/features/agents/hooks/use-changed-files-tracking.ts
@@ -46,9 +46,9 @@ export function useChangedFilesTracking(
       }
     }
 
-    // Handle worktree paths: /Users/.../.21st/worktrees/{chatId}/{subChatId}/relativePath
+    // Handle worktree paths: /Users/.../.crunch/worktrees/{chatId}/{subChatId}/relativePath
     // Extract everything after the subChatId directory
-    const worktreeMatch = filePath.match(/\.21st\/worktrees\/[^/]+\/[^/]+\/(.+)$/)
+    const worktreeMatch = filePath.match(/\.crunch\/worktrees\/[^/]+\/[^/]+\/(.+)$/)
     if (worktreeMatch) {
       return worktreeMatch[1]
     }
diff --git a/src/renderer/features/agents/lib/remote-chat-transport.ts b/src/renderer/features/agents/lib/remote-chat-transport.ts
index 1c807cb8..a3e4bb18 100644
--- a/src/renderer/features/agents/lib/remote-chat-transport.ts
+++ b/src/renderer/features/agents/lib/remote-chat-transport.ts
@@ -6,8 +6,8 @@ let cachedApiBase: string | null = null
 
 async function getApiBase(): Promise<string> {
   if (!cachedApiBase) {
-    // Uses MAIN_VITE_API_URL in dev, "https://21st.dev" in production
-    cachedApiBase = await window.desktopApi?.getApiBaseUrl() || "https://21st.dev"
+    // Uses MAIN_VITE_API_URL in dev, "https://getcrunch.dev" in production
+    cachedApiBase = await window.desktopApi?.getApiBaseUrl() || "https://getcrunch.dev"
   }
   return cachedApiBase
 }
diff --git a/src/renderer/features/agents/main/active-chat.tsx b/src/renderer/features/agents/main/active-chat.tsx
index 525d13ff..7fa88de1 100644
--- a/src/renderer/features/agents/main/active-chat.tsx
+++ b/src/renderer/features/agents/main/active-chat.tsx
@@ -39,7 +39,12 @@ import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"
 import {
   ArrowDown,
   ChevronDown,
+  Columns2,
+  Eye,
+  FolderTree,
+  GitCommitHorizontal,
   GitFork,
+  GitMerge,
   ListTree,
   TerminalSquare
 } from "lucide-react"
@@ -87,14 +92,24 @@ import { DiffSidebarHeader } from "../../changes/components/diff-sidebar-header"
 import { getStatusIndicator } from "../../changes/utils/status"
 import { terminalSidebarOpenAtomFamily } from "../../terminal/atoms"
 import { TerminalSidebar } from "../../terminal/terminal-sidebar"
+import { DataViewerSidebar } from "../../data/components/data-viewer-sidebar"
+import { FileViewerSidebar } from "../../file-viewer"
 import {
   agentsChangesPanelCollapsedAtom,
   agentsChangesPanelWidthAtom,
   agentsDiffSidebarWidthAtom,
+  agentsFileTreeSidebarOpenAtom,
+  agentsFileTreeSidebarWidthAtom,
   agentsPlanSidebarWidthAtom,
   agentsPreviewSidebarOpenAtom,
   agentsPreviewSidebarWidthAtom,
   agentsSubChatsSidebarModeAtom,
+  dataViewerSidebarOpenAtomFamily,
+  dataViewerSidebarWidthAtom,
+  viewedDataFileAtomFamily,
+  fileViewerSidebarOpenAtomFamily,
+  fileViewerSidebarWidthAtom,
+  viewedSourceFileAtomFamily,
   agentsSubChatUnseenChangesAtom,
   agentsUnseenChangesAtom,
   clearLoading,
@@ -118,6 +133,7 @@ import {
   pendingPrMessageAtom,
   pendingReviewMessageAtom,
   pendingUserQuestionsAtom,
+  showCreateAgentFormAtom,
   planSidebarOpenAtomFamily,
   QUESTIONS_SKIPPED_MESSAGE,
   selectedAgentChatIdAtom,
@@ -190,8 +206,11 @@ import { AgentToolRegistry } from "../ui/agent-tool-registry"
 import { isPlanFile } from "../ui/agent-tool-utils"
 import { AgentUserMessageBubble } from "../ui/agent-user-message-bubble"
 import { AgentUserQuestion, type AgentUserQuestionHandle } from "../ui/agent-user-question"
+import { CreateAgentForm, type CreateAgentFormData } from "../ui/create-agent-form"
 import { AgentsHeaderControls } from "../ui/agents-header-controls"
 import { ChatTitleEditor } from "../ui/chat-title-editor"
+import { McpServersIndicator } from "../ui/mcp-servers-indicator"
+import { FileTreeSidebar } from "../ui/file-tree"
 import { MobileChatHeader } from "../ui/mobile-chat-header"
 import { QuickCommentInput } from "../ui/quick-comment-input"
 import { SubChatSelector } from "../ui/sub-chat-selector"
@@ -2483,6 +2502,13 @@ const ChatViewInner = memo(function ChatViewInner({
   // Get pending questions for this specific subChat
   const pendingQuestions = pendingQuestionsMap.get(subChatId) ?? null
 
+  // Create-agent form visibility
+  const [showCreateAgentForm, setShowCreateAgentForm] = useAtom(showCreateAgentFormAtom)
+
+  const handleCreateAgentCancel = useCallback(() => {
+    setShowCreateAgentForm(false)
+  }, [setShowCreateAgentForm])
+
   // Track whether chat input has content (for custom text with questions)
   const [inputHasContent, setInputHasContent] = useState(false)
 
@@ -3498,6 +3524,48 @@ const ChatViewInner = memo(function ChatViewInner({
     addToQueue,
   ])
 
+  // Handle create-agent form submission - constructs prompt and sends
+  const handleCreateAgentSubmit = useCallback(
+    (data: CreateAgentFormData) => {
+      setShowCreateAgentForm(false)
+
+      const toolsList = data.tools.length === 12
+        ? "all tools (inherit from parent)"
+        : data.tools.join(", ")
+
+      const modelStr = data.model === "inherit" ? "inherit (same as parent)" : data.model
+
+      const prompt = `Create a Claude Code custom agent with the following configuration:
+
+- **Name**: ${data.name}
+- **Scope**: ${data.scope === "project" ? "Project-level (save to .claude/agents/)" : "User-level (save to ~/.claude/agents/)"}
+- **Tools**: ${toolsList}
+- **Model**: ${modelStr}
+
+**Description of what the agent should do:**
+${data.description}
+
+Please create the agent markdown file with proper YAML frontmatter (name, description, tools, model) and a detailed system prompt based on the description above. Write the file to the correct location:
+${data.scope === "project" ? "`.claude/agents/" + data.name + ".md`" : "`~/.claude/agents/" + data.name + ".md`"}
+
+The file format should be:
+\`\`\`markdown
+---
+name: <agent-name>
+description: <when Claude should delegate to this agent>
+tools: <comma-separated tool list>
+model: <model>
+---
+
+<system prompt content here>
+\`\`\``
+
+      editorRef.current?.setValue(prompt)
+      setTimeout(() => handleSend(), 0)
+    },
+    [setShowCreateAgentForm, editorRef, handleSend],
+  )
+
   // Queue handlers for sending queued messages
   const handleSendFromQueue = useCallback(async (itemId: string) => {
     const item = popItemFromQueue(subChatId, itemId)
@@ -3718,6 +3786,51 @@ const ChatViewInner = memo(function ChatViewInner({
   // component in agents-layout.tsx. This ensures queues continue processing
   // even when user navigates to different sub-chats or workspaces.
 
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragOver(false)
+
+      // Check for internal file tree drag (file path from our file tree)
+      const internalPath = e.dataTransfer.getData("application/x-file-tree-path")
+      const internalType = e.dataTransfer.getData("application/x-file-tree-type")
+
+      if (internalPath) {
+        // Insert as a file mention
+        const fileName = internalPath.split("/").pop() || internalPath
+        const mention: FileMentionOption = {
+          id: `${internalType || "file"}:local:${internalPath}`,
+          label: fileName,
+          path: internalPath,
+          repository: "local",
+          truncatedPath: internalPath.includes("/")
+            ? internalPath.substring(0, internalPath.lastIndexOf("/"))
+            : "",
+          type: internalType === "folder" ? "folder" : "file",
+        }
+        editorRef.current?.insertMention(mention)
+        // Focus after state update
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            editorRef.current?.focus()
+          })
+        })
+        return
+      }
+
+      // External files from system
+      const droppedFiles = Array.from(e.dataTransfer.files)
+      handleAddAttachments(droppedFiles)
+      // Focus after state update - use double rAF to wait for React render
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          editorRef.current?.focus()
+        })
+      })
+    },
+    [handleAddAttachments],
+  )
+
   // Helper to get message text content
   const getMessageTextContent = (msg: any): string => {
     return (
@@ -4032,8 +4145,21 @@ const ChatViewInner = memo(function ChatViewInner({
         </div>
       )}
 
+      {/* Create-agent form - shows in same position as AgentUserQuestion */}
+      {showCreateAgentForm && !(pendingQuestions?.subChatId === subChatId) && (
+        <div className="px-4 relative z-20">
+          <div className="w-full px-2 max-w-2xl mx-auto">
+            <CreateAgentForm
+              onSubmit={handleCreateAgentSubmit}
+              onCancel={handleCreateAgentCancel}
+              hasProjectPath={!!projectPath}
+            />
+          </div>
+        </div>
+      )}
+
       {/* Stacked cards container - queue + status */}
-      {!pendingQuestions &&
+      {!(pendingQuestions?.subChatId === subChatId) && !showCreateAgentForm &&
         (queue.length > 0 || changedFilesForSubChat.length > 0) && (
           <div className="px-2 -mb-6 relative z-10">
             <div className="w-full max-w-2xl mx-auto px-2">
@@ -4196,6 +4322,31 @@ export function ChatView({
     () => planSidebarOpenAtomFamily(activeSubChatIdForPlan || ""),
     [activeSubChatIdForPlan],
   )
+  const [isFileTreeSidebarOpen, setIsFileTreeSidebarOpen] = useAtom(
+    agentsFileTreeSidebarOpenAtom,
+  )
+  // Per-chat data viewer sidebar state
+  const dataViewerSidebarAtom = useMemo(
+    () => dataViewerSidebarOpenAtomFamily(chatId),
+    [chatId],
+  )
+  const viewedDataFileAtom = useMemo(
+    () => viewedDataFileAtomFamily(chatId),
+    [chatId],
+  )
+  const [isDataViewerSidebarOpen, setIsDataViewerSidebarOpen] = useAtom(dataViewerSidebarAtom)
+  const [viewedDataFile, setViewedDataFile] = useAtom(viewedDataFileAtom)
+  // Per-chat file viewer sidebar state (for source code files)
+  const fileViewerSidebarAtom = useMemo(
+    () => fileViewerSidebarOpenAtomFamily(chatId),
+    [chatId],
+  )
+  const viewedSourceFileAtom = useMemo(
+    () => viewedSourceFileAtomFamily(chatId),
+    [chatId],
+  )
+  const [isFileViewerSidebarOpen, setIsFileViewerSidebarOpen] = useAtom(fileViewerSidebarAtom)
+  const [viewedSourceFile, setViewedSourceFile] = useAtom(viewedSourceFileAtom)
   const [isPlanSidebarOpen, setIsPlanSidebarOpen] = useAtom(planSidebarAtom)
   const currentPlanPathAtom = useMemo(
     () => currentPlanPathAtomFamily(activeSubChatIdForPlan || ""),
@@ -6040,6 +6191,31 @@ Make sure to preserve all functionality from both branches when resolving confli
     return () => window.removeEventListener("keydown", handleKeyDown, true)
   }, [isDiffSidebarOpen])
 
+  // Keyboard shortcut: Cmd + B to toggle file tree sidebar
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Check for Cmd (Meta) + B (without Alt/Shift)
+      if (
+        e.metaKey &&
+        !e.altKey &&
+        !e.shiftKey &&
+        !e.ctrlKey &&
+        e.code === "KeyB"
+      ) {
+        e.preventDefault()
+        e.stopPropagation()
+
+        // Toggle: only when worktree exists
+        if (worktreePath) {
+          setIsFileTreeSidebarOpen((prev) => !prev)
+        }
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown, true)
+    return () => window.removeEventListener("keydown", handleKeyDown, true)
+  }, [worktreePath, setIsFileTreeSidebarOpen])
+
   // Keyboard shortcut: Create PR (preview)
   // Web: Opt+Cmd+P (browser uses Cmd+P for print)
   // Desktop: Cmd+P
@@ -6221,6 +6397,46 @@ Make sure to preserve all functionality from both branches when resolving confli
     <div className="flex h-full flex-col">
       {/* Main content */}
       <div className="flex-1 overflow-hidden flex">
+        {/* File Tree Sidebar - LEFT side */}
+        {worktreePath && !isMobileFullscreen && (
+          <ResizableSidebar
+            isOpen={isFileTreeSidebarOpen}
+            onClose={() => setIsFileTreeSidebarOpen(false)}
+            widthAtom={agentsFileTreeSidebarWidthAtom}
+            minWidth={180}
+            maxWidth={400}
+            side="left"
+            animationDuration={0}
+            initialWidth={0}
+            exitWidth={0}
+            showResizeTooltip={true}
+            className="bg-background border-r"
+            style={{ borderRightWidth: "0.5px", overflow: "hidden" }}
+          >
+            <FileTreeSidebar
+              projectPath={worktreePath || originalProjectPath}
+              projectId={chatId}
+              onClose={() => setIsFileTreeSidebarOpen(false)}
+              onSelectDataFile={(filePath) => {
+                // Data files: open in Data Viewer, close File Viewer
+                setViewedDataFile(filePath)
+                setIsDataViewerSidebarOpen(true)
+                // Close file viewer (mutual exclusion - one sidebar at a time)
+                setIsFileViewerSidebarOpen(false)
+                setViewedSourceFile(null)
+              }}
+              onSelectSourceFile={(filePath) => {
+                // Source files: open in File Viewer, close Data Viewer
+                setViewedSourceFile(filePath)
+                setIsFileViewerSidebarOpen(true)
+                // Close data viewer (mutual exclusion - one sidebar at a time)
+                setIsDataViewerSidebarOpen(false)
+                setViewedDataFile(null)
+              }}
+            />
+          </ResizableSidebar>
+        )}
+
         {/* Chat Panel */}
         <div
           className="flex-1 flex flex-col overflow-hidden relative"
@@ -6347,6 +6563,28 @@ Make sure to preserve all functionality from both branches when resolving confli
                       </span>
                     </PreviewSetupHoverCard>
                   ))}
+                {/* File Tree Button - shows when file tree is closed and worktree exists (desktop only) */}
+                {!isMobileFullscreen &&
+                  !isFileTreeSidebarOpen &&
+                  worktreePath && (
+                    <Tooltip delayDuration={500}>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => setIsFileTreeSidebarOpen(true)}
+                          className="h-6 w-6 p-0 hover:bg-foreground/10 transition-colors text-foreground flex-shrink-0 rounded-md ml-2"
+                          aria-label="Open file tree"
+                        >
+                          <FolderTree className="h-4 w-4" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent side="bottom">
+                        Open file tree
+                        <Kbd>⌘B</Kbd>
+                      </TooltipContent>
+                    </Tooltip>
+                  )}
                 {/* Overview/Terminal Button - shows when sidebar is closed and worktree/sandbox exists (desktop only) */}
                 {!isMobileFullscreen &&
                   (worktreePath || sandboxId) && (
@@ -6727,6 +6965,64 @@ Make sure to preserve all functionality from both branches when resolving confli
           />
         )}
 
+        {/* Data Viewer Sidebar - for viewing CSV, JSON, SQLite files */}
+        {isDataViewerSidebarOpen && viewedDataFile && (worktreePath || originalProjectPath) && (
+          <ResizableSidebar
+            isOpen={isDataViewerSidebarOpen}
+            onClose={() => {
+              setIsDataViewerSidebarOpen(false)
+              setViewedDataFile(null)
+            }}
+            widthAtom={dataViewerSidebarWidthAtom}
+            minWidth={400}
+            side="right"
+            animationDuration={0}
+            initialWidth={0}
+            exitWidth={0}
+            showResizeTooltip={true}
+            className="bg-background border-l"
+            style={{ borderLeftWidth: "0.5px", overflow: "hidden" }}
+          >
+            <DataViewerSidebar
+              filePath={viewedDataFile}
+              projectPath={(worktreePath || originalProjectPath) as string}
+              onClose={() => {
+                setIsDataViewerSidebarOpen(false)
+                setViewedDataFile(null)
+              }}
+            />
+          </ResizableSidebar>
+        )}
+
+        {/* File Viewer Sidebar - for viewing source code files with Monaco Editor */}
+        {isFileViewerSidebarOpen && viewedSourceFile && (worktreePath || originalProjectPath) && (
+          <ResizableSidebar
+            isOpen={isFileViewerSidebarOpen}
+            onClose={() => {
+              setIsFileViewerSidebarOpen(false)
+              setViewedSourceFile(null)
+            }}
+            widthAtom={fileViewerSidebarWidthAtom}
+            minWidth={350}
+            side="right"
+            animationDuration={0}
+            initialWidth={0}
+            exitWidth={0}
+            showResizeTooltip={true}
+            className="bg-background border-l"
+            style={{ borderLeftWidth: "0.5px", overflow: "hidden" }}
+          >
+            <FileViewerSidebar
+              filePath={viewedSourceFile}
+              projectPath={(worktreePath || originalProjectPath) as string}
+              onClose={() => {
+                setIsFileViewerSidebarOpen(false)
+                setViewedSourceFile(null)
+              }}
+            />
+          </ResizableSidebar>
+        )}
+
         {/* Open Locally Dialog - for importing sandbox chats to local */}
         <OpenLocallyDialog
           isOpen={openLocallyDialogOpen}
diff --git a/src/renderer/features/agents/main/chat-input-area.tsx b/src/renderer/features/agents/main/chat-input-area.tsx
index 73f63cd1..1a060ccf 100644
--- a/src/renderer/features/agents/main/chat-input-area.tsx
+++ b/src/renderer/features/agents/main/chat-input-area.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import { useAtom, useAtomValue } from "jotai"
-import { ChevronDown, Zap } from "lucide-react"
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { createPortal } from "react-dom"
+import { useAtom, useAtomValue, useSetAtom } from "jotai"
+import { ChevronDown, WifiOff, Zap } from "lucide-react"
 
 import { Button } from "../../../components/ui/button"
 import {
@@ -38,9 +38,8 @@ import {
 } from "../../../lib/atoms"
 import { trpc } from "../../../lib/trpc"
 import { cn } from "../../../lib/utils"
-import { lastSelectedModelIdAtom, subChatModeAtomFamily, getNextMode, type AgentMode, type SubChatFileChange } from "../atoms"
-import { useAgentSubChatStore } from "../stores/sub-chat-store"
-import { AgentsSlashCommand, type SlashCommandOption } from "../commands"
+import { lastSelectedModelIdAtom, subChatModeAtomFamily, getNextMode, showCreateAgentFormAtom, type AgentMode, type SubChatFileChange } from "../atoms"
+import { AgentsSlashCommand, COMMAND_PROMPTS, type SlashCommandOption } from "../commands"
 import { AgentSendButton } from "../components/agent-send-button"
 import type { UploadedFile, UploadedImage } from "../hooks/use-agents-file-upload"
 import {
@@ -377,6 +376,14 @@ export const ChatInputArea = memo(function ChatInputArea({
   const [slashSearchText, setSlashSearchText] = useState("")
   const [slashPosition, setSlashPosition] = useState({ top: 0, left: 0 })
 
+  // Colon trigger dropdown state (for agent mentions)
+  const [showColonDropdown, setShowColonDropdown] = useState(false)
+  const [colonSearchText, setColonSearchText] = useState("")
+  const [colonPosition, setColonPosition] = useState({ top: 0, left: 0 })
+
+  // Create-agent form trigger
+  const setShowCreateAgentForm = useSetAtom(showCreateAgentFormAtom)
+
   // Mode dropdown state
   const [modeDropdownOpen, setModeDropdownOpen] = useState(false)
   const [modeTooltip, setModeTooltip] = useState<{
@@ -426,11 +433,10 @@ export const ChatInputArea = memo(function ChatInputArea({
   )
   const [subChatMode, setSubChatMode] = useAtom(subChatModeAtom)
 
-  // Helper to update mode (atomFamily + Zustand store sync)
+  // Helper to update mode (atomFamily only - Zustand store removed)
   const updateMode = useCallback((newMode: AgentMode) => {
     setSubChatMode(newMode)
-    useAgentSubChatStore.getState().updateSubChatMode(subChatId, newMode)
-  }, [setSubChatMode, subChatId])
+  }, [setSubChatMode])
 
   // Toggle mode helper
   const toggleMode = useCallback(() => {
@@ -738,6 +744,12 @@ export const ChatInputArea = memo(function ChatInputArea({
     setShowingToolsList(false)
   }, [editorRef])
 
+  // Colon trigger select handler (agents only)
+  const handleColonMentionSelect = useCallback((mention: FileMentionOption) => {
+    editorRef.current?.insertColonMention(mention)
+    setShowColonDropdown(false)
+  }, [editorRef])
+
   // Slash command handlers
   const handleSlashTrigger = useCallback(
     ({ searchText, rect }: { searchText: string; rect: DOMRect }) => {
@@ -780,7 +792,26 @@ export const ChatInputArea = memo(function ChatInputArea({
           case "compact":
             // Trigger context compaction
             onCompact()
-            return
+            break
+          case "create-agent":
+            // Show the create-agent form
+            setShowCreateAgentForm(true)
+            break
+          // Prompt-based commands - auto-send to agent
+          case "review":
+          case "pr-comments":
+          case "release-notes":
+          case "security-review":
+          case "commit": {
+            const prompt =
+              COMMAND_PROMPTS[command.name as keyof typeof COMMAND_PROMPTS]
+            if (prompt) {
+              editorRef.current?.setValue(prompt)
+              // Auto-send the prompt to agent
+              setTimeout(() => onSend(), 0)
+            }
+            break
+          }
         }
       }
 
@@ -788,7 +819,7 @@ export const ChatInputArea = memo(function ChatInputArea({
       // insert the command and let user add arguments or press Enter to send
       editorRef.current?.setValue(`/${command.name} `)
     },
-    [subChatMode, updateMode, onCreateNewSubChat, onCompact, editorRef],
+    [subChatMode, updateMode, onSend, onCreateNewSubChat, onCompact, editorRef, setShowCreateAgentForm],
   )
 
   // Paste handler for images, plain text, and large text (saved as files)
@@ -1047,13 +1078,21 @@ export const ChatInputArea = memo(function ChatInputArea({
                     setShowingAgentsList(false)
                     setShowingToolsList(false)
                   }}
+                  onColonTrigger={({ searchText, rect }) => {
+                    setColonSearchText(searchText)
+                    setColonPosition({ top: rect.top, left: rect.left })
+                    setShowColonDropdown(true)
+                  }}
+                  onCloseColonTrigger={() => {
+                    setShowColonDropdown(false)
+                  }}
                   onSlashTrigger={handleSlashTrigger}
                   onCloseSlashTrigger={handleCloseSlashTrigger}
                   onContentChange={handleContentChange}
                   onSubmit={onSubmitWithQuestionAnswer || handleEditorSubmit}
                   onForceSubmit={onForceSend}
                   onShiftTab={toggleMode}
-                  placeholder={isStreaming ? "Add to the queue" : "Plan, @ for context, / for commands"}
+                  placeholder={isStreaming ? "Add to the queue" : "Plan, @ for context, : for agents, / for commands"}
                   className={cn(
                     "bg-transparent max-h-[200px] overflow-y-auto p-1",
                     isMobile && "min-h-[56px]",
@@ -1470,6 +1509,24 @@ export const ChatInputArea = memo(function ChatInputArea({
         showingToolsList={showingToolsList}
       />
 
+      {/* Colon trigger dropdown (agents only) */}
+      <AgentsFileMention
+        isOpen={showColonDropdown}
+        onClose={() => setShowColonDropdown(false)}
+        onSelect={handleColonMentionSelect}
+        searchText={colonSearchText}
+        position={colonPosition}
+        teamId={teamId}
+        repository={repository}
+        sandboxId={sandboxId}
+        projectPath={projectPath}
+        changedFiles={[]}
+        showingFilesList={false}
+        showingSkillsList={false}
+        showingAgentsList={true}
+        showingToolsList={false}
+      />
+
       {/* Slash command dropdown */}
       <AgentsSlashCommand
         isOpen={showSlashDropdown}
diff --git a/src/renderer/features/agents/main/new-chat-form.tsx b/src/renderer/features/agents/main/new-chat-form.tsx
index 94237dd9..6e4678e0 100644
--- a/src/renderer/features/agents/main/new-chat-form.tsx
+++ b/src/renderer/features/agents/main/new-chat-form.tsx
@@ -1297,6 +1297,35 @@ export function NewChatForm({
     async (e: React.DragEvent) => {
       e.preventDefault()
       setIsDragOver(false)
+
+      // Check for internal file tree drag (file path from our file tree)
+      const internalPath = e.dataTransfer.getData("application/x-file-tree-path")
+      const internalType = e.dataTransfer.getData("application/x-file-tree-type")
+
+      if (internalPath) {
+        // Insert as a file mention
+        const fileName = internalPath.split("/").pop() || internalPath
+        const mention: FileMentionOption = {
+          id: `${internalType || "file"}:local:${internalPath}`,
+          label: fileName,
+          path: internalPath,
+          repository: "local",
+          truncatedPath: internalPath.includes("/")
+            ? internalPath.substring(0, internalPath.lastIndexOf("/"))
+            : "",
+          type: internalType === "folder" ? "folder" : "file",
+        }
+        editorRef.current?.insertMention(mention)
+        // Focus after state update
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            editorRef.current?.focus()
+          })
+        })
+        return
+      }
+
+      // External files from system
       const droppedFiles = Array.from(e.dataTransfer.files)
 
       // Separate images from other files
diff --git a/src/renderer/features/agents/mentions/agents-file-mention.tsx b/src/renderer/features/agents/mentions/agents-file-mention.tsx
index 5e5cbfe4..b918f9fe 100644
--- a/src/renderer/features/agents/mentions/agents-file-mention.tsx
+++ b/src/renderer/features/agents/mentions/agents-file-mention.tsx
@@ -85,8 +85,19 @@ import {
   SvelteIcon,
   AstroIcon,
   SwiftIcon,
+  CSVIcon,
+  SQLiteIcon,
+  ParquetIcon,
+  ExcelIcon,
+  ArrowDataIcon,
   PDFIcon,
   SVGIcon,
+  ImageFileIcon,
+  WordIcon,
+  PowerPointIcon,
+  GitIcon,
+  LockFileIcon,
+  LicenseIcon,
 } from "../../../icons/framework-icons"
 
 interface ChangedFile {
@@ -172,8 +183,34 @@ const KNOWN_FILE_ICON_EXTENSIONS = new Set([
   "svelte",
   "astro",
   "swift",
+  // Data file extensions
+  "csv",
+  "tsv",
+  "db",
+  "sqlite",
+  "sqlite3",
+  "parquet",
+  "pq",
+  "xlsx",
+  "xls",
+  "arrow",
+  "feather",
+  "ipc",
+  // Document file extensions
   "pdf",
+  "doc",
+  "docx",
+  "ppt",
+  "pptx",
+  // Image file extensions
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
   "svg",
+  "webp",
+  "ico",
+  "bmp",
 ])
 
 // Get file icon component based on file extension
@@ -184,14 +221,53 @@ export function getFileIconByExtension(
 ) {
   const filenameLower = filename.toLowerCase()
 
+  // Get the base filename (without path)
+  const baseFilename = filenameLower.split("/").pop() || filenameLower
+
   // Special handling for files without extensions (like Dockerfile)
   if (filenameLower === "dockerfile" || filenameLower.endsWith("/dockerfile")) {
     return DockerIcon
   }
 
+  // Special handling for .gitignore and other git-related files
+  if (
+    baseFilename === ".gitignore" ||
+    baseFilename === ".gitattributes" ||
+    baseFilename === ".gitmodules" ||
+    baseFilename === ".gitkeep"
+  ) {
+    return GitIcon
+  }
+
+  // Special handling for LICENSE files (with or without extension)
+  if (
+    baseFilename === "license" ||
+    baseFilename === "license.md" ||
+    baseFilename === "license.txt" ||
+    baseFilename === "copying" ||
+    baseFilename === "copying.md" ||
+    baseFilename === "copying.txt"
+  ) {
+    return LicenseIcon
+  }
+
+  // Special handling for lock files
+  if (
+    baseFilename === "package-lock.json" ||
+    baseFilename === "yarn.lock" ||
+    baseFilename === "pnpm-lock.yaml" ||
+    baseFilename === "bun.lockb" ||
+    baseFilename === "composer.lock" ||
+    baseFilename === "gemfile.lock" ||
+    baseFilename === "cargo.lock" ||
+    baseFilename === "poetry.lock" ||
+    baseFilename === "pipfile.lock" ||
+    baseFilename.endsWith(".lock")
+  ) {
+    return LockFileIcon
+  }
+
   // Special handling for .env files
-  // Get the base filename (without path)
-  const baseFilename = filenameLower.split("/").pop() || filenameLower
   // .env (without suffix) -> TOML icon
   // .env.local, .env.example, .env.development, etc. -> Shell icon
   if (baseFilename === ".env") {
@@ -206,7 +282,7 @@ export function getFileIconByExtension(
   // README files -> MarkdownInfoIcon (with exclamation mark)
   // Other .md/.mdx files -> MarkdownIcon (standard markdown icon)
   if (filenameLower.endsWith(".md") || filenameLower.endsWith(".mdx")) {
-    const nameWithoutExt = filenameLower.replace(/\.(md|mdx)$/, "")
+    const nameWithoutExt = baseFilename.replace(/\.(md|mdx)$/, "")
     if (nameWithoutExt === "readme") {
       return MarkdownInfoIcon
     }
@@ -312,8 +388,42 @@ export function getFileIconByExtension(
       return AstroIcon
     case "swift":
       return SwiftIcon
+    // Data file types
+    case "csv":
+    case "tsv":
+      return CSVIcon
+    case "db":
+    case "sqlite":
+    case "sqlite3":
+      return SQLiteIcon
+    case "parquet":
+    case "pq":
+      return ParquetIcon
+    case "xlsx":
+    case "xls":
+      return ExcelIcon
+    case "arrow":
+    case "feather":
+    case "ipc":
+      return ArrowDataIcon
+    // Document file types
     case "pdf":
       return PDFIcon
+    case "doc":
+    case "docx":
+      return WordIcon
+    case "ppt":
+    case "pptx":
+      return PowerPointIcon
+    // Image file types
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "webp":
+    case "ico":
+    case "bmp":
+      return ImageFileIcon
     case "svg":
       return SVGIcon
     default:
@@ -626,9 +736,9 @@ function renderTooltipContent(option: FileMentionOption) {
 
   if (option.type === "skill" || option.type === "agent") {
     return (
-      <div className="flex flex-col gap-1.5 w-full overflow-hidden">
+      <div className="flex flex-col gap-1.5 w-full overflow-hidden max-w-[280px]">
         {option.description && (
-          <p className="text-xs text-muted-foreground break-words">
+          <p className="text-xs text-muted-foreground break-words line-clamp-3">
             {option.description}
           </p>
         )}
@@ -701,10 +811,13 @@ export const AgentsFileMention = memo(function AgentsFileMention({
   })
 
   // Fetch custom agents from filesystem (cached for 5 minutes)
-  const { data: customAgents = [], isFetching: isFetchingAgents } = trpc.agents.listEnabled.useQuery(undefined, {
-    enabled: isOpen,
-    staleTime: 5 * 60 * 1000, // 5 minutes - agents don't change frequently
-  })
+  const { data: customAgents = [], isFetching: isFetchingAgents } = trpc.agents.listEnabled.useQuery(
+    projectPath ? { cwd: projectPath } : undefined,
+    {
+      enabled: isOpen,
+      staleTime: 5 * 60 * 1000, // 5 minutes - agents don't change frequently
+    }
+  )
 
   // Debounce search text (300ms to match canvas implementation)
   useEffect(() => {
diff --git a/src/renderer/features/agents/mentions/agents-mentions-editor.tsx b/src/renderer/features/agents/mentions/agents-mentions-editor.tsx
index a45844bf..91db63ae 100644
--- a/src/renderer/features/agents/mentions/agents-mentions-editor.tsx
+++ b/src/renderer/features/agents/mentions/agents-mentions-editor.tsx
@@ -57,6 +57,7 @@ export type AgentsMentionsEditorHandle = {
   focus: () => void
   blur: () => void
   insertMention: (option: FileMentionOption) => void
+  insertColonMention: (option: FileMentionOption) => void // Insert mention from : trigger
   getValue: () => string
   setValue: (value: string) => void
   clear: () => void
@@ -70,6 +71,8 @@ type AgentsMentionsEditorProps = {
   onCloseTrigger: () => void
   onSlashTrigger?: (payload: TriggerPayload) => void // Slash command trigger
   onCloseSlashTrigger?: () => void // Close slash command dropdown
+  onColonTrigger?: (payload: TriggerPayload) => void // Colon trigger for agents
+  onCloseColonTrigger?: () => void // Close colon trigger dropdown
   onContentChange?: (hasContent: boolean) => void // lightweight callback for send button state
   placeholder?: string
   className?: string
@@ -268,6 +271,9 @@ interface TreeWalkResult {
   // Slash command trigger info
   slashPosition: { node: Node; offset: number } | null
   slashIndex: number
+  // Colon trigger info (for agent mentions)
+  colonPosition: { node: Node; offset: number } | null
+  colonIndex: number
 }
 
 // Single O(n) tree walk that computes all needed data
@@ -279,6 +285,8 @@ function walkTreeOnce(root: HTMLElement, range: Range | null): TreeWalkResult {
   let atIndex = -1
   let slashPosition: { node: Node; offset: number } | null = null
   let slashIndex = -1
+  let colonPosition: { node: Node; offset: number } | null = null
+  let colonIndex = -1
 
   // Handle case where cursor is in root element (not in a text node)
   // This happens when the editor is empty or cursor is at element boundary
@@ -336,16 +344,39 @@ function walkTreeOnce(root: HTMLElement, range: Range | null): TreeWalkResult {
             const afterAt = textBeforeCursor.slice(
               textBeforeCursor.lastIndexOf("@") + 1,
             )
-            // Close on newline or double-space (not single space - allow multi-word search)
+            // Close on newline, double-space, or immediate space after @
             const hasNewline = afterAt.includes("\n")
             const hasDoubleSpace = afterAt.includes("  ")
-            if (!hasNewline && !hasDoubleSpace) {
+            const startsWithSpace = afterAt.startsWith(" ")
+            if (!hasNewline && !hasDoubleSpace && !startsWithSpace) {
               atIndex = globalAtIdx
               atPosition = { node, offset: localAtIdx }
             }
           }
         }
 
+        // Find : in text before cursor for agent trigger
+        const localColonIdx = textBeforeInNode.lastIndexOf(":")
+        if (localColonIdx !== -1) {
+          const globalColonIdx = serialized.length + localColonIdx
+          const textUpToColon = serialized + textBeforeInNode.slice(0, localColonIdx)
+          const charBefore = globalColonIdx > 0 ? textUpToColon.charAt(globalColonIdx - 1) : null
+          const isStandaloneColon = charBefore === null || /\s/.test(charBefore)
+
+          if (isStandaloneColon && globalColonIdx > colonIndex) {
+            const afterColon = textBeforeCursor.slice(
+              textBeforeCursor.lastIndexOf(":") + 1,
+            )
+            const hasNewline = afterColon.includes("\n")
+            const hasDoubleSpace = afterColon.includes("  ")
+            const startsWithSpace = afterColon.startsWith(" ")
+            if (!hasNewline && !hasDoubleSpace && !startsWithSpace) {
+              colonIndex = globalColonIdx
+              colonPosition = { node, offset: localColonIdx }
+            }
+          }
+        }
+
         // Find / at start of line (for slash commands)
         // Check all occurrences of / in this node
         for (let i = 0; i < textBeforeInNode.length; i++) {
@@ -388,6 +419,19 @@ function walkTreeOnce(root: HTMLElement, range: Range | null): TreeWalkResult {
             atPosition = { node, offset: localAtIdx }
           }
         }
+        // Track : positions as we go (only if standalone)
+        const localColonIdx = text.lastIndexOf(":")
+        if (localColonIdx !== -1) {
+          const globalColonIdx = serialized.length + localColonIdx
+          const textUpToColon = serialized + text.slice(0, localColonIdx)
+          const charBefore = globalColonIdx > 0 ? textUpToColon.charAt(globalColonIdx - 1) : null
+          const isStandaloneColon = charBefore === null || /\s/.test(charBefore)
+
+          if (isStandaloneColon) {
+            colonIndex = globalColonIdx
+            colonPosition = { node, offset: localColonIdx }
+          }
+        }
       }
 
       serialized += text
@@ -482,6 +526,8 @@ function walkTreeOnce(root: HTMLElement, range: Range | null): TreeWalkResult {
     atIndex,
     slashPosition,
     slashIndex,
+    colonPosition,
+    colonIndex,
   }
 }
 
@@ -495,6 +541,8 @@ export const AgentsMentionsEditor = memo(
         onCloseTrigger,
         onSlashTrigger,
         onCloseSlashTrigger,
+        onColonTrigger,
+        onCloseColonTrigger,
         onContentChange,
         placeholder,
         className,
@@ -514,6 +562,9 @@ export const AgentsMentionsEditor = memo(
       // Slash command trigger state
       const slashTriggerActive = useRef(false)
       const slashTriggerStartIndex = useRef<number | null>(null)
+      // Colon trigger state (for agent mentions)
+      const colonTriggerActive = useRef(false)
+      const colonTriggerStartIndex = useRef<number | null>(null)
       // Track if editor has content for placeholder (updated via DOM, no React state)
       const [hasContent, setHasContent] = useState(false)
 
@@ -867,19 +918,26 @@ export const AgentsMentionsEditor = memo(
               slashTriggerStartIndex.current = null
               onCloseSlashTrigger?.()
             }
+            if (colonTriggerActive.current) {
+              colonTriggerActive.current = false
+              colonTriggerStartIndex.current = null
+              onCloseColonTrigger?.()
+            }
             return
           }
 
-          // Single tree walk for @ and / trigger detection
+          // Single tree walk for @, : and / trigger detection
           const {
             textBeforeCursor,
             atPosition,
             atIndex,
             slashPosition,
             slashIndex,
+            colonPosition,
+            colonIndex,
           } = walkTreeOnce(editorRef.current, range)
 
-          // Handle @ trigger (takes priority over /)
+          // Handle @ trigger (takes priority over : and /)
           if (atIndex !== -1 && atPosition) {
             triggerActive.current = true
             triggerStartIndex.current = atIndex
@@ -890,6 +948,12 @@ export const AgentsMentionsEditor = memo(
               slashTriggerStartIndex.current = null
               onCloseSlashTrigger?.()
             }
+            // Close colon trigger if active
+            if (colonTriggerActive.current) {
+              colonTriggerActive.current = false
+              colonTriggerStartIndex.current = null
+              onCloseColonTrigger?.()
+            }
 
             const afterAt = textBeforeCursor.slice(atIndex + 1)
 
@@ -921,7 +985,47 @@ export const AgentsMentionsEditor = memo(
             onCloseTrigger()
           }
 
-          // Handle / trigger (only if @ trigger is not active)
+          // Handle : trigger (only if @ trigger is not active, takes priority over /)
+          if (colonIndex !== -1 && colonPosition && onColonTrigger) {
+            colonTriggerActive.current = true
+            colonTriggerStartIndex.current = colonIndex
+
+            // Close slash trigger if active
+            if (slashTriggerActive.current) {
+              slashTriggerActive.current = false
+              slashTriggerStartIndex.current = null
+              onCloseSlashTrigger?.()
+            }
+
+            const afterColon = textBeforeCursor.slice(colonIndex + 1)
+
+            // Get position for dropdown
+            if (range && editorRef.current) {
+              const tempRange = document.createRange()
+              tempRange.setStart(range.endContainer, range.endOffset)
+              tempRange.setEnd(range.endContainer, range.endOffset)
+              const cursorRect = tempRange.getBoundingClientRect()
+
+              const rect = new DOMRect(
+                cursorRect.left,
+                cursorRect.top,
+                0,
+                cursorRect.height
+              )
+
+              onColonTrigger({ searchText: afterColon, rect })
+              return
+            }
+          }
+
+          // Close : trigger if no : found
+          if (colonTriggerActive.current) {
+            colonTriggerActive.current = false
+            colonTriggerStartIndex.current = null
+            onCloseColonTrigger?.()
+          }
+
+          // Handle / trigger (only if @ and : triggers are not active)
           if (slashIndex !== -1 && slashPosition && onSlashTrigger) {
             slashTriggerActive.current = true
             slashTriggerStartIndex.current = slashIndex
@@ -964,7 +1068,7 @@ export const AgentsMentionsEditor = memo(
           cancelAnimationFrame(triggerDetectionTimeout.current)
         }
         triggerDetectionTimeout.current = requestAnimationFrame(runTriggerDetection)
-      }, [onContentChange, onTrigger, onCloseTrigger, onSlashTrigger, onCloseSlashTrigger, debouncedSaveUndoState])
+      }, [onContentChange, onTrigger, onCloseTrigger, onSlashTrigger, onCloseSlashTrigger, onColonTrigger, onCloseColonTrigger, debouncedSaveUndoState])
 
       // Cleanup on unmount
       useEffect(() => {
@@ -1036,7 +1140,7 @@ export const AgentsMentionsEditor = memo(
 
           // Prevent submission during IME composition (e.g., Chinese/Japanese/Korean input)
           if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
-            if (triggerActive.current || slashTriggerActive.current) {
+            if (triggerActive.current || slashTriggerActive.current || colonTriggerActive.current) {
               // Let dropdown handle Enter
               return
             }
@@ -1057,6 +1161,14 @@ export const AgentsMentionsEditor = memo(
               onCloseTrigger()
               return
             }
+            // Close colon (agent) dropdown
+            if (colonTriggerActive.current) {
+              e.preventDefault()
+              colonTriggerActive.current = false
+              colonTriggerStartIndex.current = null
+              onCloseColonTrigger?.()
+              return
+            }
             // Close command dropdown
             if (slashTriggerActive.current) {
               e.preventDefault()
@@ -1135,6 +1247,8 @@ export const AgentsMentionsEditor = memo(
             triggerStartIndex.current = null
             slashTriggerActive.current = false
             slashTriggerStartIndex.current = null
+            colonTriggerActive.current = false
+            colonTriggerStartIndex.current = null
           },
 
           // Clear slash command text after selection (removes /command from input)
@@ -1331,6 +1445,86 @@ export const AgentsMentionsEditor = memo(
               onContentChange?.(true)
             }
           },
+
+          insertColonMention: (option: FileMentionOption) => {
+            if (!editorRef.current) return
+
+            const sel = window.getSelection()
+            if (!sel || sel.rangeCount === 0) return
+
+            const range = sel.getRangeAt(0)
+            const node = range.startContainer
+
+            // Remove : and search text
+            if (
+              node.nodeType === Node.TEXT_NODE &&
+              colonTriggerStartIndex.current !== null
+            ) {
+              const text = node.textContent || ""
+
+              // Find local position of : within THIS text node
+              let localColonPosition = 0
+              let serializedCharCount = 0
+
+              const walker = document.createTreeWalker(
+                editorRef.current,
+                NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
+              )
+              let walkNode: Node | null = walker.nextNode()
+
+              while (walkNode) {
+                if (walkNode === node) {
+                  localColonPosition =
+                    colonTriggerStartIndex.current - serializedCharCount
+                  break
+                }
+
+                if (walkNode.nodeType === Node.TEXT_NODE) {
+                  serializedCharCount += (walkNode.textContent || "").length
+                } else if (walkNode.nodeType === Node.ELEMENT_NODE) {
+                  const el = walkNode as HTMLElement
+                  if (el.hasAttribute("data-mention-id")) {
+                    const id = el.getAttribute("data-mention-id") || ""
+                    serializedCharCount += `@[${id}]`.length
+                    let next: Node | null = el.nextSibling
+                    if (next) {
+                      walker.currentNode = next
+                      walkNode = next
+                      continue
+                    }
+                  }
+                }
+                walkNode = walker.nextNode()
+              }
+
+              const beforeColon = text.slice(0, localColonPosition)
+              const afterCursor = text.slice(range.startOffset)
+              node.textContent = beforeColon + afterCursor
+
+              // Insert mention node
+              const mentionNode = createMentionNode(option)
+              const newRange = document.createRange()
+              newRange.setStart(node, localColonPosition)
+              newRange.collapse(true)
+              newRange.insertNode(mentionNode)
+
+              // Add space after and move cursor
+              const space = document.createTextNode(" ")
+              mentionNode.after(space)
+              newRange.setStartAfter(space)
+              newRange.collapse(true)
+              sel.removeAllRanges()
+              sel.addRange(newRange)
+
+              // Update hasContent
+              setHasContent(true)
+            }
+
+            // Close trigger
+            colonTriggerActive.current = false
+            colonTriggerStartIndex.current = null
+            onCloseColonTrigger?.()
+          },
         }),
         [onCloseTrigger, onCloseSlashTrigger, resolveMention, onContentChange, immediateSaveUndoState],
       )
diff --git a/src/renderer/features/agents/ui/agent-edit-tool.tsx b/src/renderer/features/agents/ui/agent-edit-tool.tsx
index 2b94f2c8..6cc22575 100644
--- a/src/renderer/features/agents/ui/agent-edit-tool.tsx
+++ b/src/renderer/features/agents/ui/agent-edit-tool.tsx
@@ -263,8 +263,8 @@ export const AgentEditTool = memo(function AgentEditTool({
         return filePath.slice(prefix.length)
       }
     }
-    // Handle worktree paths: /Users/.../.21st/worktrees/{chatId}/{subChatId}/relativePath
-    const worktreeMatch = filePath.match(/\.21st\/worktrees\/[^/]+\/[^/]+\/(.+)$/)
+    // Handle worktree paths: /Users/.../.crunch/worktrees/{chatId}/{subChatId}/relativePath
+    const worktreeMatch = filePath.match(/\.crunch\/worktrees\/[^/]+\/[^/]+\/(.+)$/)
     if (worktreeMatch) {
       return worktreeMatch[1]
     }
diff --git a/src/renderer/features/agents/ui/agent-preview.tsx b/src/renderer/features/agents/ui/agent-preview.tsx
index a30c7818..4b30be72 100644
--- a/src/renderer/features/agents/ui/agent-preview.tsx
+++ b/src/renderer/features/agents/ui/agent-preview.tsx
@@ -494,7 +494,7 @@ export function AgentPreview({
                     viewBox="0 0 400 400"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
-                    aria-label="21st logo"
+                    aria-label="Crunch logo"
                   >
                     <path
                       fillRule="evenodd"
@@ -581,7 +581,7 @@ export function AgentPreview({
                         viewBox="0 0 400 400"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
-                        aria-label="21st logo"
+                        aria-label="Crunch logo"
                       >
                         <path
                           fillRule="evenodd"
diff --git a/src/renderer/features/agents/ui/create-agent-form.tsx b/src/renderer/features/agents/ui/create-agent-form.tsx
new file mode 100644
index 00000000..081d0e7b
--- /dev/null
+++ b/src/renderer/features/agents/ui/create-agent-form.tsx
@@ -0,0 +1,545 @@
+"use client"
+
+import { memo, useState, useEffect, useCallback, useRef } from "react"
+import { ChevronUp, ChevronDown, CornerDownLeft } from "lucide-react"
+import { Button } from "../../../components/ui/button"
+import { cn } from "../../../lib/utils"
+import { AVAILABLE_TOOLS } from "../../../components/dialogs/settings-tabs/tool-selector"
+
+export interface CreateAgentFormData {
+  name: string
+  scope: "project" | "global"
+  tools: string[]
+  model: "inherit" | "opus" | "sonnet" | "haiku"
+  description: string
+}
+
+interface CreateAgentFormProps {
+  onSubmit: (data: CreateAgentFormData) => void
+  onCancel: () => void
+  hasProjectPath?: boolean
+}
+
+type Step = "name" | "scope" | "tools" | "model" | "description"
+
+const STEPS: Step[] = ["name", "scope", "tools", "model", "description"]
+
+const MODEL_OPTIONS = [
+  { label: "Inherit from parent", description: "Uses the same model as the main conversation" },
+  { label: "Opus", description: "Most capable, best for complex tasks" },
+  { label: "Sonnet", description: "Balanced capability and speed" },
+  { label: "Haiku", description: "Fast and lightweight, lower cost" },
+]
+
+const SCOPE_OPTIONS = [
+  { label: "Project", description: "Available only in this project (.claude/agents/)" },
+  { label: "Global", description: "Available in all your projects (~/.claude/agents/)" },
+]
+
+export const CreateAgentForm = memo(function CreateAgentForm({
+  onSubmit,
+  onCancel,
+  hasProjectPath = true,
+}: CreateAgentFormProps) {
+  const [currentStep, setCurrentStep] = useState<Step>("name")
+  const [name, setName] = useState("")
+  const [scope, setScope] = useState<"project" | "global" | null>(null)
+  const [selectedTools, setSelectedTools] = useState<string[]>(
+    AVAILABLE_TOOLS.map((t) => t.id),
+  )
+  const [model, setModel] = useState<"inherit" | "opus" | "sonnet" | "haiku" | null>(null)
+  const [description, setDescription] = useState("")
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [focusedOptionIndex, setFocusedOptionIndex] = useState(0)
+  const [isVisible, setIsVisible] = useState(true)
+  const nameInputRef = useRef<HTMLInputElement>(null)
+  const descriptionInputRef = useRef<HTMLTextAreaElement>(null)
+  const prevStepRef = useRef(currentStep)
+
+  const currentStepIndex = STEPS.indexOf(currentStep)
+
+  // Focus name input on mount
+  useEffect(() => {
+    if (currentStep === "name") {
+      setTimeout(() => nameInputRef.current?.focus(), 100)
+    }
+  }, [currentStep])
+
+  // Focus description input when reaching that step
+  useEffect(() => {
+    if (currentStep === "description") {
+      setTimeout(() => descriptionInputRef.current?.focus(), 100)
+    }
+  }, [currentStep])
+
+  // Animate on step change
+  useEffect(() => {
+    if (prevStepRef.current !== currentStep) {
+      setIsVisible(false)
+      const timer = setTimeout(() => {
+        setIsVisible(true)
+      }, 50)
+      prevStepRef.current = currentStep
+      return () => clearTimeout(timer)
+    }
+  }, [currentStep])
+
+  const goNext = useCallback(() => {
+    const idx = STEPS.indexOf(currentStep)
+    if (idx < STEPS.length - 1) {
+      setCurrentStep(STEPS[idx + 1])
+      setFocusedOptionIndex(0)
+    }
+  }, [currentStep])
+
+  const goPrev = useCallback(() => {
+    const idx = STEPS.indexOf(currentStep)
+    if (idx > 0) {
+      setCurrentStep(STEPS[idx - 1])
+      setFocusedOptionIndex(0)
+    }
+  }, [currentStep])
+
+  const canContinue = useCallback(() => {
+    switch (currentStep) {
+      case "name":
+        return name.trim().length > 0
+      case "scope":
+        return scope !== null
+      case "tools":
+        return selectedTools.length > 0
+      case "model":
+        return model !== null
+      case "description":
+        return description.trim().length > 0
+    }
+  }, [currentStep, name, scope, selectedTools, model, description])
+
+  const handleContinue = useCallback(() => {
+    if (isSubmitting || !canContinue()) return
+
+    if (currentStep === "description") {
+      // Submit
+      setIsSubmitting(true)
+      onSubmit({
+        name: name.trim().toLowerCase().replace(/\s+/g, "-"),
+        scope: scope!,
+        tools: selectedTools,
+        model: model!,
+        description: description.trim(),
+      })
+    } else {
+      goNext()
+    }
+  }, [isSubmitting, canContinue, currentStep, name, scope, selectedTools, model, description, onSubmit, goNext])
+
+  const handleScopeSelect = useCallback((optionLabel: string) => {
+    const val = optionLabel === "Project" ? "project" : "global"
+    setScope(val)
+    setTimeout(() => {
+      setCurrentStep("tools")
+      setFocusedOptionIndex(0)
+    }, 150)
+  }, [])
+
+  const handleModelSelect = useCallback((optionLabel: string) => {
+    const val = optionLabel === "Inherit from parent"
+      ? "inherit"
+      : (optionLabel.toLowerCase() as "opus" | "sonnet" | "haiku")
+    setModel(val)
+    setTimeout(() => {
+      setCurrentStep("description")
+      setFocusedOptionIndex(0)
+    }, 150)
+  }, [])
+
+  const handleToolToggle = useCallback((toolId: string) => {
+    setSelectedTools((prev) =>
+      prev.includes(toolId)
+        ? prev.filter((t) => t !== toolId)
+        : [...prev, toolId],
+    )
+  }, [])
+
+  const handleSelectAllTools = useCallback(() => {
+    setSelectedTools(AVAILABLE_TOOLS.map((t) => t.id))
+  }, [])
+
+  const handleClearTools = useCallback(() => {
+    setSelectedTools([])
+  }, [])
+
+  // Keyboard navigation for option-based steps
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (isSubmitting) return
+
+      // Don't intercept when typing in input/textarea
+      const activeEl = document.activeElement
+      if (
+        activeEl instanceof HTMLInputElement ||
+        activeEl instanceof HTMLTextAreaElement
+      ) {
+        // Allow Enter in name input to advance
+        if (e.key === "Enter" && currentStep === "name" && canContinue()) {
+          e.preventDefault()
+          goNext()
+        }
+        // Allow Ctrl/Cmd+Enter in description to submit
+        if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && currentStep === "description" && canContinue()) {
+          e.preventDefault()
+          handleContinue()
+        }
+        return
+      }
+
+      if (currentStep === "scope") {
+        const options = SCOPE_OPTIONS
+        if (e.key === "ArrowDown" && focusedOptionIndex < options.length - 1) {
+          e.preventDefault()
+          setFocusedOptionIndex(focusedOptionIndex + 1)
+        } else if (e.key === "ArrowUp" && focusedOptionIndex > 0) {
+          e.preventDefault()
+          setFocusedOptionIndex(focusedOptionIndex - 1)
+        } else if (e.key === "Enter") {
+          e.preventDefault()
+          handleScopeSelect(options[focusedOptionIndex].label)
+        } else if (e.key === "1" || e.key === "2") {
+          e.preventDefault()
+          const idx = parseInt(e.key, 10) - 1
+          setFocusedOptionIndex(idx)
+          handleScopeSelect(options[idx].label)
+        }
+      } else if (currentStep === "model") {
+        const options = MODEL_OPTIONS
+        if (e.key === "ArrowDown" && focusedOptionIndex < options.length - 1) {
+          e.preventDefault()
+          setFocusedOptionIndex(focusedOptionIndex + 1)
+        } else if (e.key === "ArrowUp" && focusedOptionIndex > 0) {
+          e.preventDefault()
+          setFocusedOptionIndex(focusedOptionIndex - 1)
+        } else if (e.key === "Enter") {
+          e.preventDefault()
+          handleModelSelect(options[focusedOptionIndex].label)
+        } else if (e.key >= "1" && e.key <= "4") {
+          e.preventDefault()
+          const idx = parseInt(e.key, 10) - 1
+          setFocusedOptionIndex(idx)
+          handleModelSelect(options[idx].label)
+        }
+      } else if (currentStep === "tools" && e.key === "Enter") {
+        e.preventDefault()
+        if (canContinue()) goNext()
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+    return () => document.removeEventListener("keydown", handleKeyDown)
+  }, [currentStep, focusedOptionIndex, isSubmitting, canContinue, goNext, handleContinue, handleScopeSelect, handleModelSelect])
+
+  const getStepLabel = () => {
+    switch (currentStep) {
+      case "name": return "Agent Name"
+      case "scope": return "Scope"
+      case "tools": return "Tools"
+      case "model": return "Model"
+      case "description": return "Description"
+    }
+  }
+
+  const getStepQuestion = () => {
+    switch (currentStep) {
+      case "name": return "What should the agent be called?"
+      case "scope": return "Where should this agent be available?"
+      case "tools": return "Which tools should the agent have access to?"
+      case "model": return "Which model should the agent use?"
+      case "description": return "What should the agent do? Describe its purpose and behavior."
+    }
+  }
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case "name":
+        return (
+          <div className="px-2">
+            <input
+              ref={nameInputRef}
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. code-reviewer, test-runner, docs-writer"
+              className="w-full bg-background rounded-md px-3 py-2 text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-foreground/10"
+            />
+            <p className="text-[11px] text-muted-foreground mt-1.5 px-1">
+              Use lowercase letters and hyphens. This becomes the filename.
+            </p>
+          </div>
+        )
+
+      case "scope":
+        return (
+          <div className="space-y-1">
+            {SCOPE_OPTIONS.map((option, idx) => {
+              const isSelected = scope === (option.label === "Project" ? "project" : "global")
+              const isFocused = focusedOptionIndex === idx
+              const isDisabled = option.label === "Project" && !hasProjectPath
+              return (
+                <button
+                  key={option.label}
+                  onClick={() => {
+                    if (isDisabled) return
+                    handleScopeSelect(option.label)
+                    setFocusedOptionIndex(idx)
+                  }}
+                  disabled={isDisabled}
+                  className={cn(
+                    "w-full flex items-start gap-3 p-2 text-[13px] text-foreground rounded-md text-left transition-colors outline-none",
+                    isDisabled && "opacity-40 cursor-not-allowed",
+                    !isDisabled && isFocused ? "bg-muted/70" : "hover:bg-muted/50",
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "flex-shrink-0 w-5 h-5 rounded flex items-center justify-center text-[10px] font-medium transition-colors mt-0.5",
+                      isSelected
+                        ? "bg-foreground text-background"
+                        : "bg-muted text-muted-foreground",
+                    )}
+                  >
+                    {idx + 1}
+                  </div>
+                  <div className="flex flex-col gap-0.5">
+                    <span className="text-[13px] font-medium text-foreground">
+                      {option.label}
+                    </span>
+                    <span className="text-[12px] text-muted-foreground">
+                      {option.description}
+                    </span>
+                  </div>
+                </button>
+              )
+            })}
+          </div>
+        )
+
+      case "tools":
+        return (
+          <div className="px-2">
+            <div className="flex items-center gap-2 mb-2">
+              <button
+                type="button"
+                onClick={handleSelectAllTools}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Select all
+              </button>
+              <span className="text-muted-foreground/50">·</span>
+              <button
+                type="button"
+                onClick={handleClearTools}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Clear
+              </button>
+              <span className="flex-1" />
+              <span className="text-xs text-muted-foreground">
+                {selectedTools.length} selected
+              </span>
+            </div>
+            <div className="grid grid-cols-2 gap-1 max-h-[180px] overflow-y-auto">
+              {AVAILABLE_TOOLS.map((tool) => {
+                const isSelected = selectedTools.includes(tool.id)
+                return (
+                  <button
+                    key={tool.id}
+                    type="button"
+                    onClick={() => handleToolToggle(tool.id)}
+                    className={cn(
+                      "flex items-start gap-2 p-1.5 rounded-md text-left transition-colors",
+                      isSelected
+                        ? "bg-muted/70"
+                        : "hover:bg-muted/50",
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        "mt-0.5 h-3.5 w-3.5 rounded flex items-center justify-center flex-shrink-0",
+                        isSelected
+                          ? "bg-foreground"
+                          : "bg-muted",
+                      )}
+                    >
+                      {isSelected && (
+                        <svg
+                          className="h-2.5 w-2.5 text-background"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                          strokeWidth={3}
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M5 13l4 4L19 7"
+                          />
+                        </svg>
+                      )}
+                    </div>
+                    <div className="min-w-0">
+                      <div className="text-[11px] font-medium text-foreground truncate">
+                        {tool.name}
+                      </div>
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )
+
+      case "model":
+        return (
+          <div className="space-y-1">
+            {MODEL_OPTIONS.map((option, idx) => {
+              const modelVal = option.label === "Inherit from parent"
+                ? "inherit"
+                : (option.label.toLowerCase() as "opus" | "sonnet" | "haiku")
+              const isSelected = model === modelVal
+              const isFocused = focusedOptionIndex === idx
+              return (
+                <button
+                  key={option.label}
+                  onClick={() => {
+                    handleModelSelect(option.label)
+                    setFocusedOptionIndex(idx)
+                  }}
+                  className={cn(
+                    "w-full flex items-start gap-3 p-2 text-[13px] text-foreground rounded-md text-left transition-colors outline-none",
+                    isFocused ? "bg-muted/70" : "hover:bg-muted/50",
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "flex-shrink-0 w-5 h-5 rounded flex items-center justify-center text-[10px] font-medium transition-colors mt-0.5",
+                      isSelected
+                        ? "bg-foreground text-background"
+                        : "bg-muted text-muted-foreground",
+                    )}
+                  >
+                    {idx + 1}
+                  </div>
+                  <div className="flex flex-col gap-0.5">
+                    <span className="text-[13px] font-medium text-foreground">
+                      {option.label}
+                    </span>
+                    <span className="text-[12px] text-muted-foreground">
+                      {option.description}
+                    </span>
+                  </div>
+                </button>
+              )
+            })}
+          </div>
+        )
+
+      case "description":
+        return (
+          <div className="px-2">
+            <textarea
+              ref={descriptionInputRef}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="e.g. A code reviewer that checks for security vulnerabilities, performance issues, and suggests improvements..."
+              rows={3}
+              className="w-full bg-background rounded-md px-3 py-2 text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-foreground/10 resize-none"
+            />
+            <p className="text-[11px] text-muted-foreground mt-1.5 px-1">
+              Claude will generate a detailed system prompt based on this description.
+            </p>
+          </div>
+        )
+    }
+  }
+
+  const isLastStep = currentStep === "description"
+
+  return (
+    <div className="border rounded-t-xl border-b-0 border-border bg-muted/30 overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-1.5">
+        <div className="flex items-center gap-1.5">
+          <span className="text-[12px] text-muted-foreground">
+            {getStepLabel()}
+          </span>
+          <span className="text-muted-foreground/50">•</span>
+          <span className="text-[12px] text-muted-foreground">
+            Create Agent
+          </span>
+        </div>
+
+        {/* Navigation */}
+        <div className="flex items-center gap-1">
+          <button
+            onClick={goPrev}
+            disabled={currentStepIndex === 0}
+            className="p-0.5 rounded hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed outline-none"
+          >
+            <ChevronUp className="w-4 h-4 text-muted-foreground" />
+          </button>
+          <span className="text-xs text-muted-foreground px-1">
+            {currentStepIndex + 1} / {STEPS.length}
+          </span>
+          <button
+            onClick={goNext}
+            disabled={currentStepIndex === STEPS.length - 1 || !canContinue()}
+            className="p-0.5 rounded hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed outline-none"
+          >
+            <ChevronDown className="w-4 h-4 text-muted-foreground" />
+          </button>
+        </div>
+      </div>
+
+      {/* Current Step */}
+      <div
+        className={cn(
+          "px-1 pb-2 transition-opacity duration-150 ease-out",
+          isVisible ? "opacity-100" : "opacity-0",
+        )}
+      >
+        <div className="text-[14px] font-[450] text-foreground mb-3 pt-1 px-2">
+          <span className="text-muted-foreground">{currentStepIndex + 1}.</span> {getStepQuestion()}
+        </div>
+
+        {renderStepContent()}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-end gap-2 px-2 py-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onCancel}
+          disabled={isSubmitting}
+          className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground"
+        >
+          Cancel
+        </Button>
+        <Button
+          size="sm"
+          onClick={handleContinue}
+          disabled={isSubmitting || !canContinue()}
+          className="h-6 text-xs px-3 rounded-md"
+        >
+          {isSubmitting ? (
+            "Creating..."
+          ) : (
+            <>
+              {isLastStep ? "Create Agent" : "Continue"}
+              <CornerDownLeft className="w-3 h-3 ml-1 opacity-60" />
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  )
+})
diff --git a/src/renderer/features/agents/ui/file-tree/FileTreeContextMenu.tsx b/src/renderer/features/agents/ui/file-tree/FileTreeContextMenu.tsx
new file mode 100644
index 00000000..81299d18
--- /dev/null
+++ b/src/renderer/features/agents/ui/file-tree/FileTreeContextMenu.tsx
@@ -0,0 +1,339 @@
+"use client"
+
+import { useState } from "react"
+import {
+  Copy,
+  Trash2,
+  Edit2,
+  FolderOpen,
+  Scissors,
+  Clipboard,
+  FilePlus,
+  FolderPlus,
+  CopyPlus,
+} from "lucide-react"
+import { toast } from "sonner"
+import {
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+} from "../../../../components/ui/context-menu"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../../../components/ui/alert-dialog"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../../../components/ui/dialog"
+import { Button } from "../../../../components/ui/button"
+import { Input } from "../../../../components/ui/input"
+import { trpc } from "../../../../lib/trpc"
+import { join, basename, dirname } from "../../../../lib/utils/path"
+
+interface FileTreeContextMenuProps {
+  /** Relative path from project root */
+  path: string
+  /** File or folder */
+  type: "file" | "folder"
+  /** Absolute path to project root */
+  projectPath: string
+  /** Callback after successful delete */
+  onDeleted?: () => void
+  /** Callback after successful rename */
+  onRenamed?: () => void
+  /** Whether clipboard has items to paste */
+  hasClipboard?: boolean
+  /** Cut files to clipboard */
+  onCut?: () => void
+  /** Copy files to clipboard */
+  onCopy?: () => void
+  /** Paste files from clipboard */
+  onPaste?: () => void
+  /** Duplicate file */
+  onDuplicate?: () => void
+  /** Create new file in directory */
+  onNewFile?: () => void
+  /** Create new folder in directory */
+  onNewFolder?: () => void
+}
+
+export function FileTreeContextMenu({
+  path,
+  type,
+  projectPath,
+  onDeleted,
+  onRenamed,
+  hasClipboard,
+  onCut,
+  onCopy,
+  onPaste,
+  onDuplicate,
+  onNewFile,
+  onNewFolder,
+}: FileTreeContextMenuProps) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [showRenameDialog, setShowRenameDialog] = useState(false)
+  const [newName, setNewName] = useState(basename(path))
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [isRenaming, setIsRenaming] = useState(false)
+
+  const absolutePath = join(projectPath, path)
+  const fileName = basename(path)
+  const parentDir = dirname(path)
+
+  // tRPC mutations
+  const deleteFileMutation = trpc.files.deleteFile.useMutation()
+  const renameFileMutation = trpc.files.renameFile.useMutation()
+  const revealMutation = trpc.files.revealInFileManager.useMutation()
+
+  // Copy absolute path to clipboard
+  const handleCopyPath = async () => {
+    try {
+      await window.desktopApi.clipboardWrite(absolutePath)
+      toast.success("Path copied to clipboard")
+    } catch {
+      toast.error("Failed to copy path")
+    }
+  }
+
+  // Copy relative path to clipboard
+  const handleCopyRelativePath = async () => {
+    try {
+      await window.desktopApi.clipboardWrite(path)
+      toast.success("Relative path copied to clipboard")
+    } catch {
+      toast.error("Failed to copy path")
+    }
+  }
+
+  // Copy just the file/folder name to clipboard
+  const handleCopyName = async () => {
+    try {
+      await window.desktopApi.clipboardWrite(fileName)
+      toast.success("Name copied to clipboard")
+    } catch {
+      toast.error("Failed to copy name")
+    }
+  }
+
+  // Delete file or folder
+  const handleDelete = async () => {
+    setIsDeleting(true)
+    try {
+      await deleteFileMutation.mutateAsync({ filePath: absolutePath })
+      toast.success(`${type === "folder" ? "Folder" : "File"} deleted`)
+      setShowDeleteDialog(false)
+      onDeleted?.()
+    } catch (error) {
+      toast.error(`Failed to delete ${type}`)
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  // Rename file or folder
+  const handleRename = async () => {
+    if (!newName.trim() || newName === fileName) {
+      setShowRenameDialog(false)
+      return
+    }
+
+    setIsRenaming(true)
+    try {
+      const newPath = parentDir === "." ? newName : join(projectPath, parentDir, newName)
+      await renameFileMutation.mutateAsync({
+        oldPath: absolutePath,
+        newPath,
+      })
+      toast.success(`${type === "folder" ? "Folder" : "File"} renamed`)
+      setShowRenameDialog(false)
+      onRenamed?.()
+    } catch (error) {
+      toast.error(`Failed to rename ${type}`)
+    } finally {
+      setIsRenaming(false)
+    }
+  }
+
+  // Reveal in Finder/Explorer
+  const handleRevealInFinder = async () => {
+    try {
+      await revealMutation.mutateAsync({ filePath: absolutePath })
+    } catch {
+      toast.error("Failed to reveal in file manager")
+    }
+  }
+
+  return (
+    <>
+      <ContextMenuContent className="w-56">
+        {/* New File/Folder - only for folders or when targeting parent dir */}
+        {(type === "folder" || onNewFile || onNewFolder) && (
+          <>
+            {onNewFile && (
+              <ContextMenuItem onClick={onNewFile}>
+                <FilePlus className="mr-2 h-4 w-4" />
+                New File
+              </ContextMenuItem>
+            )}
+            {onNewFolder && (
+              <ContextMenuItem onClick={onNewFolder}>
+                <FolderPlus className="mr-2 h-4 w-4" />
+                New Folder
+              </ContextMenuItem>
+            )}
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        {/* Clipboard operations */}
+        {onCut && (
+          <ContextMenuItem onClick={onCut}>
+            <Scissors className="mr-2 h-4 w-4" />
+            Cut
+            <ContextMenuShortcut>⌘X</ContextMenuShortcut>
+          </ContextMenuItem>
+        )}
+        {onCopy && (
+          <ContextMenuItem onClick={onCopy}>
+            <Copy className="mr-2 h-4 w-4" />
+            Copy
+            <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+          </ContextMenuItem>
+        )}
+        {onPaste && (
+          <ContextMenuItem onClick={onPaste} disabled={!hasClipboard}>
+            <Clipboard className="mr-2 h-4 w-4" />
+            Paste
+            <ContextMenuShortcut>⌘V</ContextMenuShortcut>
+          </ContextMenuItem>
+        )}
+
+        <ContextMenuSeparator />
+
+        {/* Path copy actions */}
+        <ContextMenuItem onClick={handleCopyPath}>
+          <Copy className="mr-2 h-4 w-4 opacity-60" />
+          Copy Path
+        </ContextMenuItem>
+        <ContextMenuItem onClick={handleCopyRelativePath}>
+          <Copy className="mr-2 h-4 w-4 opacity-60" />
+          Copy Relative Path
+        </ContextMenuItem>
+        {type === "file" && (
+          <ContextMenuItem onClick={handleCopyName}>
+            <Copy className="mr-2 h-4 w-4 opacity-60" />
+            Copy Name
+          </ContextMenuItem>
+        )}
+
+        <ContextMenuSeparator />
+
+        {/* Edit actions */}
+        <ContextMenuItem onClick={() => {
+          setNewName(fileName)
+          setShowRenameDialog(true)
+        }}>
+          <Edit2 className="mr-2 h-4 w-4" />
+          Rename
+          <ContextMenuShortcut>Enter</ContextMenuShortcut>
+        </ContextMenuItem>
+        {onDuplicate && (
+          <ContextMenuItem onClick={onDuplicate}>
+            <CopyPlus className="mr-2 h-4 w-4" />
+            Duplicate
+            <ContextMenuShortcut>⌘D</ContextMenuShortcut>
+          </ContextMenuItem>
+        )}
+        <ContextMenuItem
+          onClick={() => setShowDeleteDialog(true)}
+          className="text-red-500 focus:text-red-500"
+        >
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+          <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
+        </ContextMenuItem>
+
+        <ContextMenuSeparator />
+
+        {/* System actions */}
+        <ContextMenuItem onClick={handleRevealInFinder}>
+          <FolderOpen className="mr-2 h-4 w-4" />
+          Reveal in Finder
+        </ContextMenuItem>
+      </ContextMenuContent>
+
+      {/* Delete confirmation dialog */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Delete {type === "folder" ? "folder" : "file"}?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete <strong>{fileName}</strong>?
+              {type === "folder" && " This will delete all contents inside."}
+              {" "}This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="bg-red-500 hover:bg-red-600 focus:ring-red-500"
+            >
+              {isDeleting ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Rename dialog */}
+      <Dialog open={showRenameDialog} onOpenChange={setShowRenameDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              Rename {type === "folder" ? "folder" : "file"}
+            </DialogTitle>
+            <DialogDescription>
+              Enter a new name for <strong>{fileName}</strong>
+            </DialogDescription>
+          </DialogHeader>
+          <Input
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            placeholder="New name"
+            autoFocus
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault()
+                handleRename()
+              }
+            }}
+          />
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowRenameDialog(false)} disabled={isRenaming}>
+              Cancel
+            </Button>
+            <Button onClick={handleRename} disabled={isRenaming || !newName.trim()}>
+              {isRenaming ? "Renaming..." : "Rename"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/src/renderer/features/agents/ui/file-tree/FileTreeNode.tsx b/src/renderer/features/agents/ui/file-tree/FileTreeNode.tsx
new file mode 100644
index 00000000..fa313a8a
--- /dev/null
+++ b/src/renderer/features/agents/ui/file-tree/FileTreeNode.tsx
@@ -0,0 +1,760 @@
+"use client"
+
+import { ChevronRight, Folder, FolderOpen } from "lucide-react"
+import { memo, useCallback, useMemo } from "react"
+import { cn } from "../../../../lib/utils"
+import type { TreeNode } from "./build-file-tree"
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+} from "../../../../components/ui/context-menu"
+import { FileTreeContextMenu } from "./FileTreeContextMenu"
+import { getFileIconByExtension } from "../../mentions/agents-file-mention"
+
+// Data file extensions for special icons (files that open in data viewer)
+const DATA_FILE_EXTENSIONS: Record<string, "csv" | "sqlite" | "parquet" | "excel" | "arrow"> = {
+  ".csv": "csv",
+  ".tsv": "csv",
+  ".db": "sqlite",
+  ".sqlite": "sqlite",
+  ".sqlite3": "sqlite",
+  ".parquet": "parquet",
+  ".pq": "parquet",
+  ".xlsx": "excel",
+  ".xls": "excel",
+  ".arrow": "arrow",
+  ".feather": "arrow",
+  ".ipc": "arrow",
+}
+
+function getDataFileType(filename: string): "csv" | "sqlite" | "parquet" | "excel" | "arrow" | null {
+  const ext = filename.includes(".") ? `.${filename.split(".").pop()?.toLowerCase()}` : ""
+  return DATA_FILE_EXTENSIONS[ext] || null
+}
+
+function isDataFile(filename: string): boolean {
+  return getDataFileType(filename) !== null
+}
+
+// Git status type matching the backend
+type GitStatusCode =
+  | "modified"
+  | "added"
+  | "deleted"
+  | "renamed"
+  | "copied"
+  | "untracked"
+  | "ignored"
+  | "unmerged"
+  | null
+
+export type GitStatusMap = Record<string, { status: GitStatusCode; staged: boolean }>
+
+// Status colors matching VS Code conventions
+const STATUS_COLORS: Record<string, string> = {
+  modified: "text-yellow-500 dark:text-yellow-400",      // Yellow for modified
+  added: "text-green-500 dark:text-green-400",           // Green for added/staged
+  deleted: "text-red-500 dark:text-red-400",             // Red for deleted
+  renamed: "text-green-500 dark:text-green-400",         // Green for renamed
+  copied: "text-green-500 dark:text-green-400",          // Green for copied
+  untracked: "text-green-600 dark:text-green-500",       // Darker green for untracked
+  ignored: "text-muted-foreground",                      // Muted for ignored (same as file names)
+  unmerged: "text-red-600 dark:text-red-500",            // Red for conflicts
+}
+
+// Status indicators (shown after filename)
+const STATUS_INDICATORS: Record<string, string> = {
+  modified: "M",
+  added: "A",
+  deleted: "D",
+  renamed: "R",
+  copied: "C",
+  untracked: "U",
+  unmerged: "!",
+}
+
+// Helper to highlight matching text in search results
+function highlightMatch(text: string, query: string): React.ReactNode {
+  if (!query.trim()) return text
+
+  const lowerText = text.toLowerCase()
+  const lowerQuery = query.toLowerCase()
+  const index = lowerText.indexOf(lowerQuery)
+
+  if (index === -1) return text
+
+  return (
+    <>
+      {text.slice(0, index)}
+      <span className="bg-yellow-300/40 dark:bg-yellow-500/30 rounded-sm">
+        {text.slice(index, index + query.length)}
+      </span>
+      {text.slice(index + query.length)}
+    </>
+  )
+}
+
+interface FileTreeNodeProps {
+  node: TreeNode
+  level: number
+  expandedFolders: Set<string>
+  onToggleFolder: (path: string) => void
+  /** Called when a data file (CSV, JSON, SQLite, Parquet) is clicked */
+  onSelectDataFile?: (path: string) => void
+  /** Called when a source file (non-data file) is clicked */
+  onSelectSourceFile?: (path: string) => void
+  /** @deprecated Use onSelectDataFile and onSelectSourceFile instead */
+  onSelectFile?: (path: string) => void
+  gitStatus?: GitStatusMap
+  /** Absolute path to project root (for context menu actions) */
+  projectPath?: string
+  /** Called when files are dropped onto a folder */
+  onDropFiles?: (targetDir: string, filePaths: string[], isInternalMove?: boolean) => void
+  /** Currently active drop target folder path */
+  dropTargetPath?: string | null
+  /** Called when drag enters a folder */
+  onDragEnterFolder?: (folderPath: string) => void
+  /** Called when drag leaves a folder */
+  onDragLeaveFolder?: () => void
+  /** Current search query for highlighting */
+  searchQuery?: string
+}
+
+/** Props for flat row component (used with virtualization) */
+interface FileTreeNodeRowProps {
+  node: TreeNode
+  level: number
+  isExpanded: boolean
+  onToggleFolder: (path: string) => void
+  onSelectDataFile?: (path: string) => void
+  onSelectSourceFile?: (path: string) => void
+  onSelectFile?: (path: string) => void
+  gitStatus?: GitStatusMap
+  /** Pre-computed set of folders that contain changes */
+  foldersWithChanges?: Set<string>
+  projectPath?: string
+  onDropFiles?: (targetDir: string, filePaths: string[], isInternalMove?: boolean) => void
+  dropTargetPath?: string | null
+  onDragEnterFolder?: (folderPath: string) => void
+  onDragLeaveFolder?: () => void
+  searchQuery?: string
+  /** Whether this item is selected */
+  isSelected?: boolean
+  /** Whether this item is in the multi-selection set */
+  isInMultiSelect?: boolean
+  /** Whether this item is cut (for visual feedback) */
+  isCut?: boolean
+  /** Click handler with modifier key support for selection */
+  onSelect?: (path: string, event: React.MouseEvent) => void
+  /** Context menu: Whether clipboard has items */
+  hasClipboard?: boolean
+  /** Context menu: Cut handler */
+  onCut?: () => void
+  /** Context menu: Copy handler */
+  onCopy?: () => void
+  /** Context menu: Paste handler */
+  onPaste?: () => void
+  /** Context menu: Duplicate handler */
+  onDuplicate?: () => void
+  /** Context menu: New file handler */
+  onNewFile?: () => void
+  /** Context menu: New folder handler */
+  onNewFolder?: () => void
+  /** All selected paths for multi-drag support */
+  selectedPaths?: Set<string>
+}
+
+/**
+ * FileTreeNodeRow - A flat row component for virtualized rendering.
+ * Unlike FileTreeNode, this does NOT render children recursively.
+ * The parent virtualizer handles rendering each visible row.
+ */
+export const FileTreeNodeRow = memo(function FileTreeNodeRow({
+  node,
+  level,
+  isExpanded,
+  onToggleFolder,
+  onSelectDataFile,
+  onSelectSourceFile,
+  onSelectFile,
+  gitStatus = {},
+  foldersWithChanges,
+  projectPath,
+  onDropFiles,
+  dropTargetPath,
+  onDragEnterFolder,
+  onDragLeaveFolder,
+  searchQuery,
+  isSelected = false,
+  isInMultiSelect = false,
+  isCut = false,
+  onSelect,
+  hasClipboard,
+  onCut,
+  onCopy,
+  onPaste,
+  onDuplicate,
+  onNewFile,
+  onNewFolder,
+  selectedPaths,
+}: FileTreeNodeRowProps) {
+  const hasChildren = node.type === "folder" && node.children.length > 0
+  const isDropTarget = node.type === "folder" && dropTargetPath === node.path
+
+  // Get git status for this file
+  const fileStatus = gitStatus[node.path]
+  const statusCode = fileStatus?.status
+  const isStaged = fileStatus?.staged
+
+  // For folders, use pre-computed foldersWithChanges Set (O(1) lookup)
+  const folderHasChanges = node.type === "folder" && foldersWithChanges?.has(node.path)
+
+  // Check if this item or any parent folder is ignored
+  const isIgnored = useMemo(() => {
+    // Direct status check
+    if (statusCode === "ignored") return true
+
+    // Check if any parent folder is ignored in gitStatus
+    const pathParts = node.path.split("/")
+    for (let i = 1; i <= pathParts.length; i++) {
+      const parentPath = pathParts.slice(0, i).join("/")
+      if (gitStatus[parentPath]?.status === "ignored") return true
+    }
+
+    return false
+  }, [node.path, statusCode, gitStatus])
+
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    // Always update selection
+    onSelect?.(node.path, e)
+
+    if (node.type === "folder") {
+      // For folders, toggle on regular click (not Cmd/Shift click for multi-select)
+      if (!e.metaKey && !e.shiftKey) {
+        onToggleFolder(node.path)
+      }
+    } else {
+      // For files, open them on regular click (not multi-select)
+      if (!e.metaKey && !e.shiftKey) {
+        // Determine if this is a data file or source file
+        if (isDataFile(node.name)) {
+          onSelectDataFile?.(node.path)
+        } else {
+          onSelectSourceFile?.(node.path)
+        }
+        // Also call legacy onSelectFile for backwards compatibility
+        onSelectFile?.(node.path)
+      }
+    }
+  }, [node.type, node.path, node.name, onToggleFolder, onSelectDataFile, onSelectSourceFile, onSelectFile, onSelect])
+
+  // Make files/folders draggable for internal drag-and-drop
+  const handleDragStart = useCallback((e: React.DragEvent) => {
+    // Multi-drag: If this item is selected and there are multiple selections, drag all
+    const pathsToDrag = selectedPaths && selectedPaths.has(node.path) && selectedPaths.size > 1
+      ? Array.from(selectedPaths)
+      : [node.path]
+
+    // Store paths as JSON array for multi-drag support
+    e.dataTransfer.setData("application/x-file-tree-paths", JSON.stringify(pathsToDrag))
+    // Keep single path for backwards compatibility
+    e.dataTransfer.setData("application/x-file-tree-path", node.path)
+    e.dataTransfer.setData("application/x-file-tree-type", node.type)
+    e.dataTransfer.setData("text/plain", pathsToDrag.join("\n"))
+    e.dataTransfer.effectAllowed = "copyMove"
+
+    // Create a custom drag image showing count for multi-drag
+    if (pathsToDrag.length > 1) {
+      const dragImage = document.createElement("div")
+      dragImage.className = "bg-background border border-border rounded-md px-2 py-1 text-xs shadow-md flex items-center gap-1.5"
+      dragImage.innerHTML = `<span>${pathsToDrag.length} items</span>`
+      dragImage.style.position = "absolute"
+      dragImage.style.top = "-1000px"
+      document.body.appendChild(dragImage)
+      e.dataTransfer.setDragImage(dragImage, 0, 0)
+      // Clean up after drag starts
+      setTimeout(() => document.body.removeChild(dragImage), 0)
+    }
+  }, [node.path, node.type, selectedPaths])
+
+  // Drag and drop handlers for folders
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    if (node.type !== "folder") return
+    e.preventDefault()
+    e.stopPropagation()
+
+    const hasFiles = e.dataTransfer.types.includes("Files")
+    const hasInternalDrag = e.dataTransfer.types.includes("application/x-file-tree-path")
+
+    if (hasFiles || hasInternalDrag) {
+      onDragEnterFolder?.(node.path)
+    }
+  }, [node.type, node.path, onDragEnterFolder])
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    if (node.type !== "folder") return
+    e.preventDefault()
+    e.stopPropagation()
+
+    const hasFiles = e.dataTransfer.types.includes("Files")
+    const hasInternalDrag = e.dataTransfer.types.includes("application/x-file-tree-path")
+
+    if (hasFiles || hasInternalDrag) {
+      e.dataTransfer.dropEffect = hasInternalDrag ? "move" : "copy"
+      onDragEnterFolder?.(node.path)
+    }
+  }, [node.type, node.path, onDragEnterFolder])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    if (node.type !== "folder") return
+    e.preventDefault()
+    e.stopPropagation()
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = e.clientX
+    const y = e.clientY
+    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+      onDragLeaveFolder?.()
+    }
+  }, [node.type, onDragLeaveFolder])
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    if (node.type === "folder") {
+      e.preventDefault()
+      e.stopPropagation()
+
+      // Check for multi-drag first (JSON array of paths)
+      const multiPathsJson = e.dataTransfer.getData("application/x-file-tree-paths")
+      const internalType = e.dataTransfer.getData("application/x-file-tree-type")
+
+      if (multiPathsJson) {
+        try {
+          const internalPaths = JSON.parse(multiPathsJson) as string[]
+          // Filter out paths that would be dropped into themselves or their children
+          const validPaths = internalPaths.filter(
+            p => p !== node.path && !node.path.startsWith(p + "/")
+          )
+          if (validPaths.length > 0) {
+            onDropFiles?.(node.path, validPaths, true)
+          }
+          return
+        } catch {
+          // Fall back to single path
+        }
+      }
+
+      // Fall back to single path for backwards compatibility
+      const internalPath = e.dataTransfer.getData("application/x-file-tree-path")
+      if (internalPath && internalType) {
+        if (internalPath === node.path || node.path.startsWith(internalPath + "/")) {
+          return
+        }
+        onDropFiles?.(node.path, [internalPath], true)
+        return
+      }
+
+      const files = Array.from(e.dataTransfer.files)
+      if (files.length === 0) return
+
+      const filePaths = files
+        .map((file) => window.webUtils?.getPathForFile?.(file))
+        .filter((p): p is string => !!p)
+
+      if (filePaths.length > 0) {
+        onDropFiles?.(node.path, filePaths, false)
+      }
+    }
+  }, [node.type, node.path, onDropFiles])
+
+  const paddingLeft = level * 12 + 6
+
+  // Determine text color based on status
+  const textColorClass = statusCode ? STATUS_COLORS[statusCode] : "text-foreground"
+  const statusIndicator = statusCode ? STATUS_INDICATORS[statusCode] : null
+
+  return (
+    <div className="min-w-0">
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <button
+            type="button"
+            draggable
+            onClick={handleClick}
+            onDragStart={handleDragStart}
+            onDragEnter={handleDragEnter}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            className={cn(
+              "w-full flex items-center gap-1.5 py-0.5 text-left rounded-sm",
+              "hover:bg-accent/50 cursor-pointer transition-colors text-xs",
+              "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              isDropTarget && "bg-primary/20 ring-1 ring-primary",
+              // Selection styling
+              (isSelected || isInMultiSelect) && "bg-accent",
+              // Cut items appear dimmed
+              isCut && "opacity-50",
+            )}
+            style={{ paddingLeft: `${paddingLeft}px`, paddingRight: "6px" }}
+          >
+            {/* Chevron for folders */}
+            {node.type === "folder" ? (
+              <ChevronRight
+                className={cn(
+                  "size-3 text-muted-foreground shrink-0 transition-transform duration-150",
+                  isExpanded && "rotate-90",
+                  !hasChildren && "invisible",
+                )}
+              />
+            ) : (
+              <span className="size-3 shrink-0" />
+            )}
+
+            {/* Icon */}
+            {node.type === "folder" ? (
+              isExpanded ? (
+                <FolderOpen className={cn(
+                  "size-3.5 shrink-0",
+                  isIgnored
+                    ? "text-muted-foreground/50"
+                    : folderHasChanges
+                      ? "text-yellow-500 dark:text-yellow-400"
+                      : "text-muted-foreground"
+                )} />
+              ) : (
+                <Folder className={cn(
+                  "size-3.5 shrink-0",
+                  isIgnored
+                    ? "text-muted-foreground/50"
+                    : folderHasChanges
+                      ? "text-yellow-500 dark:text-yellow-400"
+                      : "text-muted-foreground"
+                )} />
+              )
+            ) : (
+              (() => {
+                const FileIcon = getFileIconByExtension(node.name)
+                return FileIcon ? (
+                  <FileIcon className={cn("size-3.5 shrink-0", isIgnored && "opacity-50")} />
+                ) : null
+              })()
+            )}
+
+            {/* Name */}
+            <span className={cn("truncate flex-1", textColorClass, isIgnored && "opacity-50")}>
+              {searchQuery ? highlightMatch(node.name, searchQuery) : node.name}
+            </span>
+
+            {/* Status indicator */}
+            {statusIndicator && (
+              <span className={cn(
+                "text-[10px] font-medium shrink-0 ml-1",
+                textColorClass,
+                isStaged && "underline",
+                isIgnored && "opacity-50"
+              )}>
+                {statusIndicator}
+              </span>
+            )}
+          </button>
+        </ContextMenuTrigger>
+        {projectPath && (
+          <FileTreeContextMenu
+            path={node.path}
+            type={node.type}
+            projectPath={projectPath}
+            hasClipboard={hasClipboard}
+            onCut={onCut}
+            onCopy={onCopy}
+            onPaste={onPaste}
+            onDuplicate={onDuplicate}
+            onNewFile={onNewFile}
+            onNewFolder={onNewFolder}
+          />
+        )}
+      </ContextMenu>
+    </div>
+  )
+})
+
+export const FileTreeNode = memo(function FileTreeNode({
+  node,
+  level,
+  expandedFolders,
+  onToggleFolder,
+  onSelectDataFile,
+  onSelectSourceFile,
+  onSelectFile,
+  gitStatus = {},
+  projectPath,
+  onDropFiles,
+  dropTargetPath,
+  onDragEnterFolder,
+  onDragLeaveFolder,
+  searchQuery,
+}: FileTreeNodeProps) {
+  const isExpanded = node.type === "folder" && expandedFolders.has(node.path)
+  const hasChildren = node.type === "folder" && node.children.length > 0
+  const isDropTarget = node.type === "folder" && dropTargetPath === node.path
+
+  // Get git status for this file
+  const fileStatus = gitStatus[node.path]
+  const statusCode = fileStatus?.status
+  const isStaged = fileStatus?.staged
+
+  // For folders, check if any children have changes
+  const folderHasChanges = useMemo(() => {
+    if (node.type !== "folder") return false
+
+    // Check if any file in gitStatus starts with this folder path (exclude ignored)
+    return Object.entries(gitStatus).some(([path, status]) =>
+      path.startsWith(node.path + "/") && status.status !== "ignored"
+    )
+  }, [node.type, node.path, gitStatus])
+
+  // Check if this item or any parent folder is ignored
+  const isIgnored = useMemo(() => {
+    // Direct status check
+    if (statusCode === "ignored") return true
+
+    // Check if any parent folder is ignored in gitStatus
+    const pathParts = node.path.split("/")
+    for (let i = 1; i <= pathParts.length; i++) {
+      const parentPath = pathParts.slice(0, i).join("/")
+      if (gitStatus[parentPath]?.status === "ignored") return true
+    }
+
+    return false
+  }, [node.path, statusCode, gitStatus])
+
+  const handleClick = useCallback(() => {
+    if (node.type === "folder") {
+      onToggleFolder(node.path)
+    } else {
+      // Determine if this is a data file or source file
+      if (isDataFile(node.name)) {
+        // Data files: CSV, JSON, SQLite, Parquet
+        onSelectDataFile?.(node.path)
+      } else {
+        // Source files: everything else
+        onSelectSourceFile?.(node.path)
+      }
+      // Also call legacy onSelectFile for backwards compatibility
+      onSelectFile?.(node.path)
+    }
+  }, [node.type, node.path, node.name, onToggleFolder, onSelectDataFile, onSelectSourceFile, onSelectFile])
+
+  // Make files/folders draggable for internal drag-and-drop
+  const handleDragStart = useCallback((e: React.DragEvent) => {
+    // Set custom data for internal drag-and-drop
+    // Use a custom MIME type to identify internal drags
+    e.dataTransfer.setData("application/x-file-tree-path", node.path)
+    e.dataTransfer.setData("application/x-file-tree-type", node.type)
+    e.dataTransfer.setData("text/plain", node.path) // Fallback for chat input
+    e.dataTransfer.effectAllowed = "copyMove"
+  }, [node.path, node.type])
+
+  // Drag and drop handlers for folders
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    if (node.type !== "folder") return
+    e.preventDefault()
+    e.stopPropagation()
+
+    // Support both external files and internal drags
+    const hasFiles = e.dataTransfer.types.includes("Files")
+    const hasInternalDrag = e.dataTransfer.types.includes("application/x-file-tree-path")
+
+    if (hasFiles || hasInternalDrag) {
+      onDragEnterFolder?.(node.path)
+    }
+  }, [node.type, node.path, onDragEnterFolder])
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    if (node.type !== "folder") return
+    e.preventDefault()
+    e.stopPropagation()
+
+    // Support both external files and internal drags
+    const hasFiles = e.dataTransfer.types.includes("Files")
+    const hasInternalDrag = e.dataTransfer.types.includes("application/x-file-tree-path")
+
+    if (hasFiles || hasInternalDrag) {
+      e.dataTransfer.dropEffect = hasInternalDrag ? "move" : "copy"
+      // Re-assert this folder as target (in case of rapid mouse movement between folders)
+      onDragEnterFolder?.(node.path)
+    }
+  }, [node.type, node.path, onDragEnterFolder])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    if (node.type !== "folder") return
+    e.preventDefault()
+    e.stopPropagation()
+    // Check if we're actually leaving this element
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = e.clientX
+    const y = e.clientY
+    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+      onDragLeaveFolder?.()
+    }
+  }, [node.type, onDragLeaveFolder])
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    // Always prevent default and stop propagation for folders to capture the drop
+    if (node.type === "folder") {
+      e.preventDefault()
+      e.stopPropagation()
+
+      // Check for internal file tree drag (file/folder being moved within tree)
+      const internalPath = e.dataTransfer.getData("application/x-file-tree-path")
+      const internalType = e.dataTransfer.getData("application/x-file-tree-type")
+
+      if (internalPath && internalType) {
+        // Don't allow dropping a folder into itself or its children
+        if (internalPath === node.path || node.path.startsWith(internalPath + "/")) {
+          return
+        }
+        // Call the move handler with the source path
+        onDropFiles?.(node.path, [internalPath], true) // true = internal move
+        return
+      }
+
+      // External files from system
+      const files = Array.from(e.dataTransfer.files)
+      if (files.length === 0) return
+
+      // Get file paths using Electron's webUtils API
+      const filePaths = files
+        .map((file) => window.webUtils?.getPathForFile?.(file))
+        .filter((p): p is string => !!p)
+
+      if (filePaths.length > 0) {
+        onDropFiles?.(node.path, filePaths, false) // false = external import
+      }
+    }
+  }, [node.type, node.path, onDropFiles])
+
+  const paddingLeft = level * 12 + 6
+
+  // Determine text color based on status
+  const textColorClass = statusCode ? STATUS_COLORS[statusCode] : "text-foreground"
+  const statusIndicator = statusCode ? STATUS_INDICATORS[statusCode] : null
+
+  return (
+    <div className="min-w-0">
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <button
+            type="button"
+            draggable
+            onClick={handleClick}
+            onDragStart={handleDragStart}
+            onDragEnter={handleDragEnter}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            className={cn(
+              "w-full flex items-center gap-1.5 py-0.5 text-left rounded-sm",
+              "hover:bg-accent/50 cursor-pointer transition-colors text-xs",
+              "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              // Drop target highlight for folders
+              isDropTarget && "bg-primary/20 ring-1 ring-primary",
+            )}
+            style={{ paddingLeft: `${paddingLeft}px`, paddingRight: "6px" }}
+          >
+            {/* Chevron for folders */}
+            {node.type === "folder" ? (
+              <ChevronRight
+                className={cn(
+                  "size-3 text-muted-foreground shrink-0 transition-transform duration-150",
+                  isExpanded && "rotate-90",
+                  !hasChildren && "invisible",
+                )}
+              />
+            ) : (
+              <span className="size-3 shrink-0" /> // Spacer for files
+            )}
+
+            {/* Icon */}
+            {node.type === "folder" ? (
+              isExpanded ? (
+                <FolderOpen className={cn(
+                  "size-3.5 shrink-0",
+                  isIgnored
+                    ? "text-muted-foreground/50"
+                    : folderHasChanges
+                      ? "text-yellow-500 dark:text-yellow-400"
+                      : "text-muted-foreground"
+                )} />
+              ) : (
+                <Folder className={cn(
+                  "size-3.5 shrink-0",
+                  isIgnored
+                    ? "text-muted-foreground/50"
+                    : folderHasChanges
+                      ? "text-yellow-500 dark:text-yellow-400"
+                      : "text-muted-foreground"
+                )} />
+              )
+            ) : (
+              // Use getFileIconByExtension for consistent icons across the app
+              (() => {
+                const FileIcon = getFileIconByExtension(node.name)
+                return FileIcon ? (
+                  <FileIcon className={cn("size-3.5 shrink-0", isIgnored && "opacity-50")} />
+                ) : null
+              })()
+            )}
+
+            {/* Name */}
+            <span className={cn("truncate flex-1", textColorClass, isIgnored && "opacity-50")}>
+              {searchQuery ? highlightMatch(node.name, searchQuery) : node.name}
+            </span>
+
+            {/* Status indicator */}
+            {statusIndicator && (
+              <span className={cn(
+                "text-[10px] font-medium shrink-0 ml-1",
+                textColorClass,
+                isStaged && "underline",
+                isIgnored && "opacity-50"
+              )}>
+                {statusIndicator}
+              </span>
+            )}
+          </button>
+        </ContextMenuTrigger>
+        {projectPath && (
+          <FileTreeContextMenu
+            path={node.path}
+            type={node.type}
+            projectPath={projectPath}
+          />
+        )}
+      </ContextMenu>
+
+      {/* Children (only for expanded folders) */}
+      {isExpanded && node.children.length > 0 && (
+        <div>
+          {node.children.map((child) => (
+            <FileTreeNode
+              key={child.path}
+              node={child}
+              level={level + 1}
+              expandedFolders={expandedFolders}
+              onToggleFolder={onToggleFolder}
+              onSelectDataFile={onSelectDataFile}
+              onSelectSourceFile={onSelectSourceFile}
+              onSelectFile={onSelectFile}
+              gitStatus={gitStatus}
+              projectPath={projectPath}
+              onDropFiles={onDropFiles}
+              dropTargetPath={dropTargetPath}
+              onDragEnterFolder={onDragEnterFolder}
+              onDragLeaveFolder={onDragLeaveFolder}
+              searchQuery={searchQuery}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+})
diff --git a/src/renderer/features/agents/ui/file-tree/FileTreeSidebar.tsx b/src/renderer/features/agents/ui/file-tree/FileTreeSidebar.tsx
new file mode 100644
index 00000000..ddcd6f98
--- /dev/null
+++ b/src/renderer/features/agents/ui/file-tree/FileTreeSidebar.tsx
@@ -0,0 +1,1378 @@
+"use client"
+
+import { useAtom } from "jotai"
+import { useCallback, useMemo, useState, useEffect, useRef } from "react"
+import { useVirtualizer } from "@tanstack/react-virtual"
+import { Button } from "../../../../components/ui/button"
+import { IconDoubleChevronLeft } from "../../../../components/ui/icons"
+import { Input } from "../../../../components/ui/input"
+import { Kbd } from "../../../../components/ui/kbd"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../../../components/ui/tooltip"
+import { trpc } from "../../../../lib/trpc"
+import {
+  expandedFoldersAtomFamily,
+  selectedFilePathAtomFamily,
+  selectedFilePathsAtomFamily,
+  fileClipboardAtom,
+} from "../../atoms"
+import { buildFileTree, countFiles, countFolders, filterTree, flattenVisibleTree } from "./build-file-tree"
+import { useAtomValue, useSetAtom } from "jotai"
+import { FileTreeNodeRow, type GitStatusMap } from "./FileTreeNode"
+import { Download } from "lucide-react"
+import { toast } from "sonner"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../../../components/ui/alert-dialog"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../../../components/ui/dialog"
+
+interface FileTreeSidebarProps {
+  projectPath: string | undefined
+  projectId: string
+  onClose: () => void
+  /** Called when a data file (CSV, JSON, SQLite, Parquet) is clicked */
+  onSelectDataFile?: (path: string) => void
+  /** Called when a source file (non-data file) is clicked */
+  onSelectSourceFile?: (path: string) => void
+  /** @deprecated Use onSelectDataFile and onSelectSourceFile instead */
+  onSelectFile?: (path: string) => void
+}
+
+// Unified drop target state - ensures mutual exclusivity
+type DropTarget =
+  | { type: "none" }                    // Not dragging over file tree
+  | { type: "root" }                    // Drop to project root
+  | { type: "folder"; path: string }    // Drop to specific folder
+
+export function FileTreeSidebar({
+  projectPath,
+  projectId,
+  onClose,
+  onSelectDataFile,
+  onSelectSourceFile,
+  onSelectFile,
+}: FileTreeSidebarProps) {
+  const [expandedFolders, setExpandedFolders] = useAtom(
+    expandedFoldersAtomFamily(projectId),
+  )
+
+  // Selection state
+  const [selectedPath, setSelectedPath] = useAtom(selectedFilePathAtomFamily(projectId))
+  const [selectedPaths, setSelectedPaths] = useAtom(selectedFilePathsAtomFamily(projectId))
+  const fileClipboard = useAtomValue(fileClipboardAtom)
+  const setFileClipboard = useSetAtom(fileClipboardAtom)
+
+  // Track last selected for shift+click range selection
+  const lastSelectedRef = useRef<string | null>(null)
+
+  // State for delete confirmation
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [pendingDeletePaths, setPendingDeletePaths] = useState<string[]>([])
+
+  // State for rename dialog
+  const [showRenameDialog, setShowRenameDialog] = useState(false)
+  const [renameTarget, setRenameTarget] = useState<string | null>(null)
+  const [newName, setNewName] = useState("")
+
+  // State for new file/folder dialogs
+  const [showNewFileDialog, setShowNewFileDialog] = useState(false)
+  const [showNewFolderDialog, setShowNewFolderDialog] = useState(false)
+  const [newItemName, setNewItemName] = useState("")
+  const [newItemTargetDir, setNewItemTargetDir] = useState<string | null>(null)
+
+  // Search state with debouncing for performance
+  const [searchQuery, setSearchQuery] = useState("")
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState("")
+  const searchInputRef = useRef<HTMLInputElement>(null)
+
+  // Debounce search query to avoid filtering on every keystroke
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchQuery(searchQuery)
+    }, 150) // 150ms debounce
+
+    return () => clearTimeout(timer)
+  }, [searchQuery])
+
+  // Drag and drop state - unified to ensure mutual exclusivity
+  const [dropTarget, setDropTarget] = useState<DropTarget>({ type: "none" })
+  const [isImporting, setIsImporting] = useState(false)
+
+  // Auto-expand timer for drag hover
+  const autoExpandTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const autoExpandFolderRef = useRef<string | null>(null)
+
+  // Fetch all files from project (like VS Code, we scan everything upfront)
+  const {
+    data: entries = [],
+    isLoading,
+    refetch,
+  } = trpc.files.listAll.useQuery(
+    { projectPath: projectPath || "" },
+    {
+      enabled: !!projectPath,
+      staleTime: 1000, // Short TTL since we have real-time watching
+    },
+  )
+
+  // Fetch git status
+  const {
+    data: gitStatus = {},
+    refetch: refetchGitStatus,
+  } = trpc.files.gitStatus.useQuery(
+    { projectPath: projectPath || "" },
+    {
+      enabled: !!projectPath,
+      staleTime: 1000,
+    },
+  )
+
+  // Subscribe to file changes for real-time sync
+  trpc.files.watchChanges.useSubscription(
+    { projectPath: projectPath || "" },
+    {
+      enabled: !!projectPath,
+      onData: () => {
+        // Refetch file list when files change
+        refetch()
+      },
+    },
+  )
+
+  // Subscribe to git changes separately (more efficient - only watches .git directory)
+  trpc.files.watchGitChanges.useSubscription(
+    { projectPath: projectPath || "" },
+    {
+      enabled: !!projectPath,
+      onData: () => {
+        // Refetch git status when git state changes (commits, staging, etc.)
+        refetchGitStatus()
+      },
+    },
+  )
+
+  // Build tree from entries (all files are loaded upfront like VS Code)
+  const tree = useMemo(() => buildFileTree(entries), [entries])
+
+  // Filter tree based on debounced search query (for performance)
+  const filteredTree = useMemo(
+    () => filterTree(tree, debouncedSearchQuery),
+    [tree, debouncedSearchQuery]
+  )
+
+  // Flatten visible tree for virtualization (only expanded nodes)
+  const flattenedNodes = useMemo(
+    () => flattenVisibleTree(filteredTree, expandedFolders),
+    [filteredTree, expandedFolders]
+  )
+
+  // Stabilize gitStatus object to prevent unnecessary re-renders
+  const stableGitStatus = useMemo(() => gitStatus, [JSON.stringify(gitStatus)])
+
+  // Pre-compute set of folders that have changes (O(n) once instead of O(n*m))
+  const foldersWithChanges = useMemo(() => {
+    const folders = new Set<string>()
+    for (const [path, status] of Object.entries(stableGitStatus)) {
+      if (status.status === "ignored") continue
+      // Add all parent folders of this changed file
+      const parts = path.split("/")
+      for (let i = 1; i < parts.length; i++) {
+        folders.add(parts.slice(0, i).join("/"))
+      }
+    }
+    return folders
+  }, [stableGitStatus])
+
+  // Stats for footer (show unfiltered counts)
+  const fileCount = useMemo(() => countFiles(tree), [tree])
+  const folderCount = useMemo(() => countFolders(tree), [tree])
+
+  // Scroll container ref for virtualization
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+
+  // Virtualizer for efficient rendering of large file trees
+  const virtualizer = useVirtualizer({
+    count: flattenedNodes.length,
+    getScrollElement: () => scrollContainerRef.current,
+    estimateSize: () => 24, // Each row is ~24px
+    overscan: 15, // Render 15 extra items above/below viewport
+  })
+
+  // Toggle folder expansion (simple - all files are loaded upfront)
+  const handleToggleFolder = useCallback(
+    (path: string) => {
+      const next = new Set(expandedFolders)
+      if (next.has(path)) {
+        next.delete(path)
+      } else {
+        next.add(path)
+      }
+      setExpandedFolders(next)
+    },
+    [expandedFolders, setExpandedFolders],
+  )
+
+  // Handle file/folder selection with modifier key support
+  const handleSelect = useCallback(
+    (path: string, event: React.MouseEvent) => {
+      if (event.metaKey || event.ctrlKey) {
+        // Cmd/Ctrl+Click: Toggle item in multi-selection
+        const next = new Set(selectedPaths)
+        if (next.has(path)) {
+          next.delete(path)
+          // If we removed the focused item, update focus to another selected item
+          if (path === selectedPath) {
+            const remaining = Array.from(next)
+            setSelectedPath(remaining.length > 0 ? remaining[remaining.length - 1] : null)
+          }
+        } else {
+          next.add(path)
+          setSelectedPath(path)
+        }
+        setSelectedPaths(next)
+        lastSelectedRef.current = path
+      } else if (event.shiftKey && lastSelectedRef.current) {
+        // Shift+Click: Range selection
+        const lastIndex = flattenedNodes.findIndex(n => n.node.path === lastSelectedRef.current)
+        const currentIndex = flattenedNodes.findIndex(n => n.node.path === path)
+
+        if (lastIndex !== -1 && currentIndex !== -1) {
+          const startIndex = Math.min(lastIndex, currentIndex)
+          const endIndex = Math.max(lastIndex, currentIndex)
+
+          const rangeSelection = new Set<string>()
+          for (let i = startIndex; i <= endIndex; i++) {
+            rangeSelection.add(flattenedNodes[i].node.path)
+          }
+          setSelectedPaths(rangeSelection)
+          setSelectedPath(path)
+        }
+      } else {
+        // Regular click: Single selection, clear multi-selection
+        setSelectedPath(path)
+        setSelectedPaths(new Set([path]))
+        lastSelectedRef.current = path
+      }
+    },
+    [selectedPath, selectedPaths, setSelectedPath, setSelectedPaths, flattenedNodes],
+  )
+
+  // Import files mutation
+  const importFilesMutation = trpc.files.importFiles.useMutation({
+    onSuccess: (result) => {
+      if (result.success) {
+        toast.success(`Imported ${result.imported} of ${result.total} file${result.total !== 1 ? "s" : ""}`)
+        // File watcher will automatically refresh the tree
+      } else {
+        toast.error("Failed to import files")
+      }
+    },
+    onError: (error) => {
+      toast.error(`Import failed: ${error.message}`)
+    },
+  })
+
+  // Move file mutation (for internal drag-and-drop)
+  const moveFileMutation = trpc.files.moveFile.useMutation({
+    onSuccess: () => {
+      toast.success("File moved successfully")
+      // File watcher will automatically refresh the tree
+    },
+    onError: (error) => {
+      toast.error(`Move failed: ${error.message}`)
+    },
+  })
+
+  // Copy files mutation
+  const copyFilesMutation = trpc.files.copyFiles.useMutation({
+    onSuccess: (result) => {
+      if (result.success) {
+        toast.success(`Copied ${result.copied} file${result.copied !== 1 ? "s" : ""}`)
+        // Clear clipboard after paste if it was a cut operation
+        if (fileClipboard?.operation === "cut") {
+          setFileClipboard(null)
+        }
+      } else {
+        toast.error("Failed to copy files")
+      }
+    },
+    onError: (error) => {
+      toast.error(`Copy failed: ${error.message}`)
+    },
+  })
+
+  // Delete files mutation
+  const deleteFilesMutation = trpc.files.deleteFiles.useMutation({
+    onSuccess: (result) => {
+      if (result.success) {
+        toast.success(`Deleted ${result.deleted} item${result.deleted !== 1 ? "s" : ""}`)
+        // Clear selection
+        setSelectedPath(null)
+        setSelectedPaths(new Set())
+      } else {
+        toast.error("Failed to delete files")
+      }
+      setShowDeleteConfirm(false)
+      setPendingDeletePaths([])
+    },
+    onError: (error) => {
+      toast.error(`Delete failed: ${error.message}`)
+      setShowDeleteConfirm(false)
+      setPendingDeletePaths([])
+    },
+  })
+
+  // Rename file mutation
+  const renameFileMutation = trpc.files.renameFile.useMutation({
+    onSuccess: () => {
+      toast.success("Renamed successfully")
+      setShowRenameDialog(false)
+      setRenameTarget(null)
+      setNewName("")
+    },
+    onError: (error) => {
+      toast.error(`Rename failed: ${error.message}`)
+    },
+  })
+
+  // Create file mutation
+  const createFileMutation = trpc.files.createFile.useMutation({
+    onSuccess: () => {
+      toast.success("File created")
+      setShowNewFileDialog(false)
+      setNewItemName("")
+      setNewItemTargetDir(null)
+    },
+    onError: (error) => {
+      toast.error(`Create file failed: ${error.message}`)
+    },
+  })
+
+  // Create folder mutation
+  const createFolderMutation = trpc.files.createFolder.useMutation({
+    onSuccess: () => {
+      toast.success("Folder created")
+      setShowNewFolderDialog(false)
+      setNewItemName("")
+      setNewItemTargetDir(null)
+    },
+    onError: (error) => {
+      toast.error(`Create folder failed: ${error.message}`)
+    },
+  })
+
+  // Import files to a target directory
+  const importFilesToDir = useCallback(
+    async (targetDir: string, filePaths: string[]) => {
+      if (!projectPath) {
+        toast.error("No project selected")
+        return
+      }
+
+      setIsImporting(true)
+      setDropTarget({ type: "none" })
+      try {
+        await importFilesMutation.mutateAsync({
+          sourcePaths: filePaths,
+          targetDir,
+        })
+      } finally {
+        setIsImporting(false)
+      }
+    },
+    [projectPath, importFilesMutation]
+  )
+
+  // Folder-level drag handlers (passed to FileTreeNode)
+  const handleDragEnterFolder = useCallback((folderPath: string) => {
+    // Entering a folder - set folder as drop target (hides root overlay)
+    setDropTarget({ type: "folder", path: folderPath })
+
+    // Auto-expand: Start timer to expand folder after 500ms of hovering
+    if (autoExpandFolderRef.current !== folderPath) {
+      // Clear any existing timer
+      if (autoExpandTimerRef.current) {
+        clearTimeout(autoExpandTimerRef.current)
+      }
+      autoExpandFolderRef.current = folderPath
+
+      // Only set timer if folder is not already expanded
+      if (!expandedFolders.has(folderPath)) {
+        autoExpandTimerRef.current = setTimeout(() => {
+          // Use functional update to get the latest state and avoid overwriting
+          // any manual expand/collapse actions that occurred during the delay
+          setExpandedFolders((prev) => {
+            const next = new Set(prev)
+            next.add(folderPath)
+            return next
+          })
+        }, 500)
+      }
+    }
+  }, [expandedFolders, setExpandedFolders])
+
+  const handleDragLeaveFolder = useCallback(() => {
+    // Leaving a folder - revert to root (still dragging, just not over folder)
+    setDropTarget({ type: "root" })
+
+    // Clear auto-expand timer
+    if (autoExpandTimerRef.current) {
+      clearTimeout(autoExpandTimerRef.current)
+      autoExpandTimerRef.current = null
+    }
+    autoExpandFolderRef.current = null
+  }, [])
+
+  const handleDropOnFolder = useCallback(
+    (targetDir: string, filePaths: string[], isInternalMove?: boolean) => {
+      if (!projectPath) return
+
+      // Clear auto-expand timer on drop
+      if (autoExpandTimerRef.current) {
+        clearTimeout(autoExpandTimerRef.current)
+        autoExpandTimerRef.current = null
+      }
+      autoExpandFolderRef.current = null
+
+      // targetDir from FileTreeNode is a relative path, convert to absolute
+      const absoluteTargetDir = targetDir.startsWith("/")
+        ? targetDir
+        : `${projectPath}/${targetDir}`
+
+      if (isInternalMove) {
+        // Internal move - move all files
+        for (const filePath of filePaths) {
+          const sourcePath = filePath.startsWith("/")
+            ? filePath
+            : `${projectPath}/${filePath}`
+          moveFileMutation.mutate({ sourcePath, targetDir: absoluteTargetDir })
+        }
+      } else {
+        // External import
+        importFilesToDir(absoluteTargetDir, filePaths)
+      }
+    },
+    [importFilesToDir, projectPath, moveFileMutation]
+  )
+
+  // Clean up auto-expand timer on unmount
+  useEffect(() => {
+    return () => {
+      if (autoExpandTimerRef.current) {
+        clearTimeout(autoExpandTimerRef.current)
+      }
+    }
+  }, [])
+
+  // Clear drag state when drag ends anywhere (catches cancelled drags, external drops, etc.)
+  useEffect(() => {
+    const handleDocumentDragEnd = () => {
+      setDropTarget({ type: "none" })
+      if (autoExpandTimerRef.current) {
+        clearTimeout(autoExpandTimerRef.current)
+        autoExpandTimerRef.current = null
+      }
+      autoExpandFolderRef.current = null
+    }
+
+    document.addEventListener("dragend", handleDocumentDragEnd)
+    return () => document.removeEventListener("dragend", handleDocumentDragEnd)
+  }, [])
+
+  // Root container drag handlers (for dropping on empty area = project root)
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    // Don't set any state here - folder highlighting is handled by folder nodes
+    // Drop to empty space will go to project root (handled in handleDrop)
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    // Only clear if actually leaving the container bounds entirely
+    const rect = e.currentTarget.getBoundingClientRect()
+    if (
+      e.clientX < rect.left ||
+      e.clientX > rect.right ||
+      e.clientY < rect.top ||
+      e.clientY > rect.bottom
+    ) {
+      setDropTarget({ type: "none" })
+    }
+  }, [])
+
+  const handleDrop = useCallback(
+    async (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      // Always clear drop target state on drop
+      setDropTarget({ type: "none" })
+
+      // Clear auto-expand timer on drop
+      if (autoExpandTimerRef.current) {
+        clearTimeout(autoExpandTimerRef.current)
+        autoExpandTimerRef.current = null
+      }
+      autoExpandFolderRef.current = null
+
+      if (!projectPath) {
+        toast.error("No project selected")
+        return
+      }
+
+      // Check for multi-drag first (JSON array of paths)
+      const multiPathsJson = e.dataTransfer.getData("application/x-file-tree-paths")
+      if (multiPathsJson) {
+        try {
+          const internalPaths = JSON.parse(multiPathsJson) as string[]
+          // Filter out files already at root level
+          const pathsToMove = internalPaths.filter(p => p.includes("/"))
+          for (const path of pathsToMove) {
+            const sourcePath = path.startsWith("/")
+              ? path
+              : `${projectPath}/${path}`
+            moveFileMutation.mutate({ sourcePath, targetDir: projectPath })
+          }
+          return
+        } catch {
+          // Fall back to single path
+        }
+      }
+
+      // Check for internal file tree drag (moving file within the project)
+      const internalPath = e.dataTransfer.getData("application/x-file-tree-path")
+      if (internalPath) {
+        // Internal move - move file to project root
+        const sourcePath = internalPath.startsWith("/")
+          ? internalPath
+          : `${projectPath}/${internalPath}`
+
+        // Don't move if already at root level
+        const relativePath = sourcePath.startsWith(projectPath)
+          ? sourcePath.slice(projectPath.length + 1)
+          : internalPath
+        if (!relativePath.includes("/")) {
+          // File is already at root level
+          return
+        }
+
+        moveFileMutation.mutate({ sourcePath, targetDir: projectPath })
+        return
+      }
+
+      // External files from system
+      const files = Array.from(e.dataTransfer.files)
+      if (files.length === 0) return
+
+      // Get file paths using Electron's webUtils API
+      const filePaths = files
+        .map((file) => window.webUtils?.getPathForFile?.(file))
+        .filter((p): p is string => !!p)
+
+      if (filePaths.length === 0) {
+        toast.error("Could not get file paths. Make sure you're dragging files from your file system.")
+        return
+      }
+
+      // Import to project root
+      importFilesToDir(projectPath, filePaths)
+    },
+    [projectPath, importFilesToDir, moveFileMutation]
+  )
+
+  // Container ref for focus management
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Helper to compute target dir based on selection
+  const getTargetDirFromSelection = useCallback((): string => {
+    if (!projectPath) return ""
+    if (!selectedPath) return projectPath
+
+    // Helper to compute target dir from a node
+    const computeTargetDir = (nodePath: string, nodeType: "file" | "folder"): string => {
+      if (nodeType === "folder") {
+        return `${projectPath}/${nodePath}`
+      }
+      // For files, use parent directory
+      const parentPath = nodePath.includes("/")
+        ? nodePath.substring(0, nodePath.lastIndexOf("/"))
+        : ""
+      return parentPath ? `${projectPath}/${parentPath}` : projectPath
+    }
+
+    // Find the selected node to check if it's a folder
+    const selectedNode = flattenedNodes.find(n => n.node.path === selectedPath)
+    if (selectedNode) {
+      return computeTargetDir(selectedPath, selectedNode.node.type)
+    }
+
+    // Node not found in visible tree - check the full tree
+    const checkNodeType = (nodes: typeof filteredTree): "file" | "folder" | null => {
+      for (const n of nodes) {
+        if (n.path === selectedPath) return n.type
+        if (n.type === "folder" && n.children) {
+          const found = checkNodeType(n.children)
+          if (found) return found
+        }
+      }
+      return null
+    }
+    const nodeType = checkNodeType(filteredTree)
+    if (nodeType) {
+      return computeTargetDir(selectedPath, nodeType)
+    }
+
+    return projectPath
+  }, [projectPath, selectedPath, flattenedNodes, filteredTree])
+
+  // Handle paste events for file import (external files from Finder/Explorer)
+  const handlePaste = useCallback(
+    async (e: ClipboardEvent) => {
+      if (!projectPath) return
+
+      const files = e.clipboardData?.files
+      if (!files || files.length === 0) return
+
+      // Get file paths using Electron's webUtils API
+      const filePaths = Array.from(files)
+        .map((file) => window.webUtils?.getPathForFile?.(file))
+        .filter((p): p is string => !!p)
+
+      if (filePaths.length > 0) {
+        e.preventDefault()
+        // Use selected folder as target, or project root if nothing selected
+        const targetDir = getTargetDirFromSelection()
+        importFilesToDir(targetDir, filePaths)
+      }
+    },
+    [projectPath, importFilesToDir, getTargetDirFromSelection]
+  )
+
+  // Listen for paste events when the file tree is focused or hovered
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    // We need to use the document-level paste handler because
+    // paste events only fire on editable elements or document
+    const handleDocumentPaste = (e: ClipboardEvent) => {
+      // Only handle if the file tree container is focused or contains the active element
+      if (
+        container.contains(document.activeElement) ||
+        container.matches(":hover")
+      ) {
+        handlePaste(e)
+      }
+    }
+
+    document.addEventListener("paste", handleDocumentPaste)
+    return () => document.removeEventListener("paste", handleDocumentPaste)
+  }, [handlePaste])
+
+  // Handle internal clipboard paste via Ctrl+V at document level for reliability
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container || !projectPath) return
+
+    const handleDocumentKeyDown = (e: KeyboardEvent) => {
+      // Only handle Ctrl/Cmd+V for internal clipboard paste
+      if (!((e.metaKey || e.ctrlKey) && e.key === "v")) return
+      if (!fileClipboard) return
+
+      // Only handle if the file tree container is focused or contains the active element
+      if (!container.contains(document.activeElement) && !container.matches(":hover")) {
+        return
+      }
+
+      // Don't handle if typing in an input
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return
+      }
+
+      e.preventDefault()
+
+      // Use the shared helper to get target directory based on selection
+      const targetDir = getTargetDirFromSelection()
+
+      // Execute paste operation
+      if (fileClipboard.operation === "cut") {
+        for (const sourcePath of fileClipboard.paths) {
+          moveFileMutation.mutate({ sourcePath, targetDir })
+        }
+        setFileClipboard(null)
+      } else {
+        copyFilesMutation.mutate({
+          sourcePaths: fileClipboard.paths,
+          targetDir,
+        })
+      }
+    }
+
+    document.addEventListener("keydown", handleDocumentKeyDown)
+    return () => document.removeEventListener("keydown", handleDocumentKeyDown)
+  }, [projectPath, fileClipboard, setFileClipboard, moveFileMutation, copyFilesMutation, getTargetDirFromSelection])
+
+  // Keyboard handler for file operations
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (!projectPath) return
+
+      // Don't handle if typing in search input
+      if (e.target instanceof HTMLInputElement) return
+
+      // Escape: Clear drag state if active
+      if (e.key === "Escape" && dropTarget.type !== "none") {
+        e.preventDefault()
+        setDropTarget({ type: "none" })
+        if (autoExpandTimerRef.current) {
+          clearTimeout(autoExpandTimerRef.current)
+          autoExpandTimerRef.current = null
+        }
+        autoExpandFolderRef.current = null
+        return
+      }
+
+      const hasSelection = selectedPaths.size > 0
+
+      // Cmd+C: Copy
+      if ((e.metaKey || e.ctrlKey) && e.key === "c" && hasSelection) {
+        e.preventDefault()
+        const absolutePaths = Array.from(selectedPaths).map(p => `${projectPath}/${p}`)
+        setFileClipboard({
+          paths: absolutePaths,
+          operation: "copy",
+          projectPath,
+        })
+        toast.success(`${selectedPaths.size} item${selectedPaths.size > 1 ? "s" : ""} copied`)
+        return
+      }
+
+      // Cmd+X: Cut
+      if ((e.metaKey || e.ctrlKey) && e.key === "x" && hasSelection) {
+        e.preventDefault()
+        const absolutePaths = Array.from(selectedPaths).map(p => `${projectPath}/${p}`)
+        setFileClipboard({
+          paths: absolutePaths,
+          operation: "cut",
+          projectPath,
+        })
+        toast.success(`${selectedPaths.size} item${selectedPaths.size > 1 ? "s" : ""} cut`)
+        return
+      }
+
+      // Note: Cmd+V paste is handled by document-level listener in useEffect above
+
+      // Cmd+D: Duplicate
+      if ((e.metaKey || e.ctrlKey) && e.key === "d" && hasSelection) {
+        e.preventDefault()
+        const absolutePaths = Array.from(selectedPaths).map(p => `${projectPath}/${p}`)
+        // For each file, copy to its own directory
+        for (const path of absolutePaths) {
+          const parentDir = path.substring(0, path.lastIndexOf("/")) || projectPath
+          copyFilesMutation.mutate({
+            sourcePaths: [path],
+            targetDir: parentDir,
+          })
+        }
+        return
+      }
+
+      // Delete or Cmd+Backspace: Delete
+      if ((e.key === "Delete" || e.key === "Backspace") && hasSelection) {
+        if (e.key === "Backspace" && !(e.metaKey || e.ctrlKey)) return // Only Cmd+Backspace, not just Backspace
+        e.preventDefault()
+        const absolutePaths = Array.from(selectedPaths).map(p => `${projectPath}/${p}`)
+        setPendingDeletePaths(absolutePaths)
+        setShowDeleteConfirm(true)
+        return
+      }
+
+      // Enter: Rename (single selection only)
+      if (e.key === "Enter" && selectedPaths.size === 1 && selectedPath) {
+        e.preventDefault()
+        const fileName = selectedPath.includes("/")
+          ? selectedPath.substring(selectedPath.lastIndexOf("/") + 1)
+          : selectedPath
+        setRenameTarget(`${projectPath}/${selectedPath}`)
+        setNewName(fileName)
+        setShowRenameDialog(true)
+        return
+      }
+
+      // Arrow key navigation
+      const currentIndex = selectedPath
+        ? flattenedNodes.findIndex(n => n.node.path === selectedPath)
+        : -1
+
+      // Arrow Down: Move selection down
+      if (e.key === "ArrowDown") {
+        e.preventDefault()
+        const nextIndex = currentIndex < flattenedNodes.length - 1 ? currentIndex + 1 : currentIndex
+        if (nextIndex !== currentIndex || currentIndex === -1) {
+          const targetIndex = currentIndex === -1 ? 0 : nextIndex
+          if (targetIndex < flattenedNodes.length) {
+            const newPath = flattenedNodes[targetIndex].node.path
+            setSelectedPath(newPath)
+            setSelectedPaths(new Set([newPath]))
+            lastSelectedRef.current = newPath
+            // Scroll into view
+            virtualizer.scrollToIndex(targetIndex, { align: "auto" })
+          }
+        }
+        return
+      }
+
+      // Arrow Up: Move selection up
+      if (e.key === "ArrowUp") {
+        e.preventDefault()
+        const prevIndex = currentIndex > 0 ? currentIndex - 1 : 0
+        if (prevIndex !== currentIndex || currentIndex === -1) {
+          const targetIndex = currentIndex === -1 ? flattenedNodes.length - 1 : prevIndex
+          if (targetIndex >= 0 && targetIndex < flattenedNodes.length) {
+            const newPath = flattenedNodes[targetIndex].node.path
+            setSelectedPath(newPath)
+            setSelectedPaths(new Set([newPath]))
+            lastSelectedRef.current = newPath
+            virtualizer.scrollToIndex(targetIndex, { align: "auto" })
+          }
+        }
+        return
+      }
+
+      // Arrow Right: Expand folder or move to first child
+      if (e.key === "ArrowRight" && selectedPath && currentIndex !== -1) {
+        e.preventDefault()
+        const currentNode = flattenedNodes[currentIndex].node
+        if (currentNode.type === "folder") {
+          if (!expandedFolders.has(currentNode.path)) {
+            // Expand the folder
+            const next = new Set(expandedFolders)
+            next.add(currentNode.path)
+            setExpandedFolders(next)
+          } else if (currentNode.children.length > 0) {
+            // Already expanded, move to first child
+            const newPath = currentNode.children[0].path
+            setSelectedPath(newPath)
+            setSelectedPaths(new Set([newPath]))
+            lastSelectedRef.current = newPath
+            // Find new index after expansion
+            const newIndex = flattenedNodes.findIndex(n => n.node.path === newPath)
+            if (newIndex !== -1) {
+              virtualizer.scrollToIndex(newIndex, { align: "auto" })
+            }
+          }
+        }
+        return
+      }
+
+      // Arrow Left: Collapse folder or move to parent
+      if (e.key === "ArrowLeft" && selectedPath && currentIndex !== -1) {
+        e.preventDefault()
+        const currentNode = flattenedNodes[currentIndex].node
+        if (currentNode.type === "folder" && expandedFolders.has(currentNode.path)) {
+          // Collapse the folder
+          const next = new Set(expandedFolders)
+          next.delete(currentNode.path)
+          setExpandedFolders(next)
+        } else {
+          // Move to parent folder
+          const parentPath = currentNode.path.includes("/")
+            ? currentNode.path.substring(0, currentNode.path.lastIndexOf("/"))
+            : null
+          if (parentPath) {
+            const parentIndex = flattenedNodes.findIndex(n => n.node.path === parentPath)
+            if (parentIndex !== -1) {
+              setSelectedPath(parentPath)
+              setSelectedPaths(new Set([parentPath]))
+              lastSelectedRef.current = parentPath
+              virtualizer.scrollToIndex(parentIndex, { align: "auto" })
+            }
+          }
+        }
+        return
+      }
+
+      // Home: Select first item
+      if (e.key === "Home" && flattenedNodes.length > 0) {
+        e.preventDefault()
+        const newPath = flattenedNodes[0].node.path
+        setSelectedPath(newPath)
+        setSelectedPaths(new Set([newPath]))
+        lastSelectedRef.current = newPath
+        virtualizer.scrollToIndex(0, { align: "start" })
+        return
+      }
+
+      // End: Select last item
+      if (e.key === "End" && flattenedNodes.length > 0) {
+        e.preventDefault()
+        const lastIndex = flattenedNodes.length - 1
+        const newPath = flattenedNodes[lastIndex].node.path
+        setSelectedPath(newPath)
+        setSelectedPaths(new Set([newPath]))
+        lastSelectedRef.current = newPath
+        virtualizer.scrollToIndex(lastIndex, { align: "end" })
+        return
+      }
+
+      // Space: Toggle folder expand
+      if (e.key === " " && selectedPath && currentIndex !== -1) {
+        e.preventDefault()
+        const currentNode = flattenedNodes[currentIndex].node
+        if (currentNode.type === "folder") {
+          const next = new Set(expandedFolders)
+          if (next.has(currentNode.path)) {
+            next.delete(currentNode.path)
+          } else {
+            next.add(currentNode.path)
+          }
+          setExpandedFolders(next)
+        }
+        return
+      }
+    },
+    [
+      projectPath,
+      selectedPaths,
+      selectedPath,
+      flattenedNodes,
+      fileClipboard,
+      setFileClipboard,
+      copyFilesMutation,
+      dropTarget.type,
+      virtualizer,
+      expandedFolders,
+      setExpandedFolders,
+      setSelectedPath,
+      setSelectedPaths,
+    ]
+  )
+
+  // Handle actual delete after confirmation
+  const handleConfirmDelete = useCallback(() => {
+    if (pendingDeletePaths.length > 0) {
+      deleteFilesMutation.mutate({ paths: pendingDeletePaths })
+    }
+  }, [pendingDeletePaths, deleteFilesMutation])
+
+  // Handle rename
+  const handleRename = useCallback(() => {
+    if (!renameTarget || !newName.trim()) return
+    const parentDir = renameTarget.substring(0, renameTarget.lastIndexOf("/"))
+    const newPath = `${parentDir}/${newName}`
+    renameFileMutation.mutate({ oldPath: renameTarget, newPath })
+  }, [renameTarget, newName, renameFileMutation])
+
+  // Handle create new file
+  const handleCreateFile = useCallback(() => {
+    if (!newItemTargetDir || !newItemName.trim()) return
+    const filePath = `${newItemTargetDir}/${newItemName}`
+    createFileMutation.mutate({ filePath })
+  }, [newItemTargetDir, newItemName, createFileMutation])
+
+  // Handle create new folder
+  const handleCreateFolder = useCallback(() => {
+    if (!newItemTargetDir || !newItemName.trim()) return
+    const folderPath = `${newItemTargetDir}/${newItemName}`
+    createFolderMutation.mutate({ folderPath })
+  }, [newItemTargetDir, newItemName, createFolderMutation])
+
+  // Get target directory for operations (folder itself, or parent of file)
+  const getTargetDir = useCallback(
+    (nodePath: string, nodeType: "file" | "folder"): string => {
+      if (!projectPath) return ""
+      if (nodeType === "folder") {
+        return `${projectPath}/${nodePath}`
+      }
+      // For files, use parent directory
+      const parentPath = nodePath.includes("/")
+        ? nodePath.substring(0, nodePath.lastIndexOf("/"))
+        : ""
+      return parentPath ? `${projectPath}/${parentPath}` : projectPath
+    },
+    [projectPath],
+  )
+
+  // Context menu handlers - these create callbacks for specific nodes
+  const createContextMenuHandlers = useCallback(
+    (nodePath: string, nodeType: "file" | "folder") => {
+      if (!projectPath) return {}
+
+      const absolutePath = `${projectPath}/${nodePath}`
+      const targetDir = getTargetDir(nodePath, nodeType)
+
+      return {
+        onCut: () => {
+          setFileClipboard({
+            paths: [absolutePath],
+            operation: "cut",
+            projectPath,
+          })
+          toast.success("Cut to clipboard")
+        },
+        onCopy: () => {
+          setFileClipboard({
+            paths: [absolutePath],
+            operation: "copy",
+            projectPath,
+          })
+          toast.success("Copied to clipboard")
+        },
+        onPaste: () => {
+          if (!fileClipboard) return
+          if (fileClipboard.operation === "cut") {
+            for (const sourcePath of fileClipboard.paths) {
+              moveFileMutation.mutate({ sourcePath, targetDir })
+            }
+            setFileClipboard(null)
+          } else {
+            copyFilesMutation.mutate({
+              sourcePaths: fileClipboard.paths,
+              targetDir,
+            })
+          }
+        },
+        onDuplicate: () => {
+          const parentDir = absolutePath.substring(0, absolutePath.lastIndexOf("/")) || projectPath
+          copyFilesMutation.mutate({
+            sourcePaths: [absolutePath],
+            targetDir: parentDir,
+          })
+        },
+        onNewFile: () => {
+          setNewItemTargetDir(targetDir)
+          setNewItemName("")
+          setShowNewFileDialog(true)
+        },
+        onNewFolder: () => {
+          setNewItemTargetDir(targetDir)
+          setNewItemName("")
+          setShowNewFolderDialog(true)
+        },
+      }
+    },
+    [projectPath, fileClipboard, setFileClipboard, moveFileMutation, copyFilesMutation, getTargetDir],
+  )
+
+  return (
+    <div
+      ref={containerRef}
+      className="flex flex-col h-full min-w-0 overflow-hidden focus:outline-none"
+      tabIndex={0} // Make focusable for keyboard events
+      onKeyDown={handleKeyDown}
+    >
+      {/* Header - matches sidebar team dropdown area */}
+      <div className="px-2 pt-2 pb-2 flex-shrink-0">
+        <div className="flex items-center justify-between gap-1">
+          <h3 className="text-xs font-medium text-muted-foreground whitespace-nowrap px-1.5">
+            Files
+          </h3>
+          {/* Close button */}
+          <Tooltip delayDuration={500}>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onClose}
+                className="h-6 w-6 p-0 hover:bg-foreground/10 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] text-foreground flex-shrink-0 rounded-md"
+                aria-label="Close file tree"
+              >
+                <IconDoubleChevronLeft className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              Close file tree
+              <Kbd>⌘B</Kbd>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+
+      {/* Search Input - matches sidebar search section */}
+      <div className="px-2 pb-3 flex-shrink-0">
+        <Input
+          ref={searchInputRef}
+          placeholder="Search files..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.preventDefault()
+              setSearchQuery("")
+              searchInputRef.current?.blur()
+            }
+          }}
+          className="w-full h-7 rounded-lg text-sm bg-muted border border-input placeholder:text-muted-foreground/40"
+        />
+      </div>
+
+      {/* Root folder name */}
+      {projectPath && (
+        <div className="px-2 pb-1 flex-shrink-0">
+          <div className="px-1.5 py-1 text-xs font-medium text-muted-foreground uppercase truncate">
+            {projectPath.split("/").pop()}
+          </div>
+        </div>
+      )}
+
+      {/* Content with drag-and-drop */}
+      <div
+        ref={scrollContainerRef}
+        className="flex-1 overflow-y-auto overflow-x-hidden relative"
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {/* Folder highlighting is handled at the row level via isDropTarget prop */}
+
+        {/* Importing overlay */}
+        {isImporting && (
+          <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-background/80 pointer-events-none">
+            <div className="animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full mb-2" />
+            <span className="text-sm text-muted-foreground">Importing files...</span>
+          </div>
+        )}
+
+        {!projectPath ? (
+          <div className="px-3 py-4 text-xs text-muted-foreground text-center">
+            No project selected
+          </div>
+        ) : isLoading ? (
+          <div className="px-3 py-4 text-xs text-muted-foreground text-center">
+            Loading files...
+          </div>
+        ) : tree.length === 0 ? (
+          <div className="px-3 py-4 text-xs text-muted-foreground text-center flex flex-col items-center gap-2">
+            <span>No files found</span>
+            <span className="text-[10px]">Drag & drop or paste (⌘V) files here</span>
+          </div>
+        ) : filteredTree.length === 0 ? (
+          <div className="px-3 py-4 text-xs text-muted-foreground text-center">
+            No files matching "{searchQuery}"
+          </div>
+        ) : (
+          <div
+            style={{
+              height: `${virtualizer.getTotalSize()}px`,
+              width: "100%",
+              position: "relative",
+            }}
+          >
+            {virtualizer.getVirtualItems().map((virtualItem) => {
+              const { node, level } = flattenedNodes[virtualItem.index]
+              const contextMenuHandlers = createContextMenuHandlers(node.path, node.type)
+              return (
+                <div
+                  key={node.path}
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: `${virtualItem.size}px`,
+                    transform: `translateY(${virtualItem.start}px)`,
+                  }}
+                >
+                  <FileTreeNodeRow
+                    node={node}
+                    level={level}
+                    isExpanded={node.type === "folder" && expandedFolders.has(node.path)}
+                    onToggleFolder={handleToggleFolder}
+                    onSelectDataFile={onSelectDataFile}
+                    onSelectSourceFile={onSelectSourceFile}
+                    onSelectFile={onSelectFile}
+                    gitStatus={stableGitStatus as GitStatusMap}
+                    foldersWithChanges={foldersWithChanges}
+                    projectPath={projectPath}
+                    onDropFiles={handleDropOnFolder}
+                    dropTargetPath={dropTarget.type === "folder" ? dropTarget.path : null}
+                    onDragEnterFolder={handleDragEnterFolder}
+                    onDragLeaveFolder={handleDragLeaveFolder}
+                    searchQuery={searchQuery}
+                    isSelected={selectedPath === node.path}
+                    isInMultiSelect={selectedPaths.has(node.path)}
+                    isCut={fileClipboard?.operation === "cut" && fileClipboard.paths.includes(`${projectPath}/${node.path}`)}
+                    onSelect={handleSelect}
+                    hasClipboard={!!fileClipboard}
+                    selectedPaths={selectedPaths}
+                    {...contextMenuHandlers}
+                  />
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Footer with stats */}
+      {!isLoading && tree.length > 0 && (
+        <div className="px-3 py-1.5 border-t border-border/50 text-[10px] text-muted-foreground flex-shrink-0">
+          {fileCount} file{fileCount !== 1 ? "s" : ""}, {folderCount} folder
+          {folderCount !== 1 ? "s" : ""}
+        </div>
+      )}
+
+      {/* Delete confirmation dialog */}
+      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Delete {pendingDeletePaths.length} item{pendingDeletePaths.length !== 1 ? "s" : ""}?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. The selected items will be permanently deleted.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setPendingDeletePaths([])}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Rename dialog */}
+      <Dialog open={showRenameDialog} onOpenChange={setShowRenameDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Rename</DialogTitle>
+            <DialogDescription>
+              Enter a new name
+            </DialogDescription>
+          </DialogHeader>
+          <Input
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            placeholder="New name"
+            autoFocus
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault()
+                handleRename()
+              }
+            }}
+          />
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setShowRenameDialog(false)
+                setRenameTarget(null)
+                setNewName("")
+              }}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleRename} disabled={!newName.trim()}>
+              Rename
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* New file dialog */}
+      <Dialog open={showNewFileDialog} onOpenChange={setShowNewFileDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>New File</DialogTitle>
+            <DialogDescription>
+              Enter a name for the new file
+            </DialogDescription>
+          </DialogHeader>
+          <Input
+            value={newItemName}
+            onChange={(e) => setNewItemName(e.target.value)}
+            placeholder="filename.txt"
+            autoFocus
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault()
+                handleCreateFile()
+              }
+            }}
+          />
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setShowNewFileDialog(false)
+                setNewItemName("")
+                setNewItemTargetDir(null)
+              }}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleCreateFile} disabled={!newItemName.trim()}>
+              Create
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* New folder dialog */}
+      <Dialog open={showNewFolderDialog} onOpenChange={setShowNewFolderDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>New Folder</DialogTitle>
+            <DialogDescription>
+              Enter a name for the new folder
+            </DialogDescription>
+          </DialogHeader>
+          <Input
+            value={newItemName}
+            onChange={(e) => setNewItemName(e.target.value)}
+            placeholder="folder-name"
+            autoFocus
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault()
+                handleCreateFolder()
+              }
+            }}
+          />
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setShowNewFolderDialog(false)
+                setNewItemName("")
+                setNewItemTargetDir(null)
+              }}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleCreateFolder} disabled={!newItemName.trim()}>
+              Create
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/src/renderer/features/agents/ui/file-tree/build-file-tree.ts b/src/renderer/features/agents/ui/file-tree/build-file-tree.ts
new file mode 100644
index 00000000..863ffacb
--- /dev/null
+++ b/src/renderer/features/agents/ui/file-tree/build-file-tree.ts
@@ -0,0 +1,165 @@
+/**
+ * Transforms a flat list of file entries into a hierarchical tree structure
+ */
+
+export interface FileEntry {
+  path: string
+  type: "file" | "folder"
+}
+
+export interface TreeNode {
+  name: string
+  path: string
+  type: "file" | "folder"
+  children: TreeNode[]
+}
+
+/**
+ * Build a tree structure from a flat list of file entries
+ */
+export function buildFileTree(entries: FileEntry[]): TreeNode[] {
+  const root: TreeNode[] = []
+  const folderMap = new Map<string, TreeNode>()
+
+  // Sort entries so folders come first, then alphabetically
+  const sortedEntries = [...entries].sort((a, b) => {
+    // Folders before files
+    if (a.type !== b.type) {
+      return a.type === "folder" ? -1 : 1
+    }
+    // Alphabetical within same type
+    return a.path.localeCompare(b.path)
+  })
+
+  for (const entry of sortedEntries) {
+    const parts = entry.path.split("/")
+    const name = parts[parts.length - 1]
+
+    const node: TreeNode = {
+      name,
+      path: entry.path,
+      type: entry.type,
+      children: [],
+    }
+
+    if (entry.type === "folder") {
+      folderMap.set(entry.path, node)
+    }
+
+    // Find parent folder
+    if (parts.length === 1) {
+      // Root level
+      root.push(node)
+    } else {
+      const parentPath = parts.slice(0, -1).join("/")
+      const parent = folderMap.get(parentPath)
+      if (parent) {
+        parent.children.push(node)
+      } else {
+        // Parent folder not in the list (shouldn't happen with proper scanning)
+        root.push(node)
+      }
+    }
+  }
+
+  // Sort children of each folder: folders first, then files, alphabetically
+  const sortChildren = (nodes: TreeNode[]) => {
+    nodes.sort((a, b) => {
+      if (a.type !== b.type) {
+        return a.type === "folder" ? -1 : 1
+      }
+      return a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+    })
+    for (const node of nodes) {
+      if (node.children.length > 0) {
+        sortChildren(node.children)
+      }
+    }
+  }
+
+  sortChildren(root)
+  return root
+}
+
+/**
+ * Count total files in a tree (excluding folders)
+ */
+export function countFiles(nodes: TreeNode[]): number {
+  let count = 0
+  for (const node of nodes) {
+    if (node.type === "file") {
+      count++
+    } else {
+      count += countFiles(node.children)
+    }
+  }
+  return count
+}
+
+/**
+ * Count total folders in a tree
+ */
+export function countFolders(nodes: TreeNode[]): number {
+  let count = 0
+  for (const node of nodes) {
+    if (node.type === "folder") {
+      count++
+      count += countFolders(node.children)
+    }
+  }
+  return count
+}
+
+/**
+ * Flatten visible tree nodes for virtualization
+ * Only includes nodes whose parent folders are expanded
+ */
+export function flattenVisibleTree(
+  nodes: TreeNode[],
+  expandedFolders: Set<string>,
+  level = 0
+): Array<{ node: TreeNode; level: number }> {
+  const result: Array<{ node: TreeNode; level: number }> = []
+  for (const node of nodes) {
+    result.push({ node, level })
+    if (node.type === "folder" && expandedFolders.has(node.path)) {
+      result.push(...flattenVisibleTree(node.children, expandedFolders, level + 1))
+    }
+  }
+  return result
+}
+
+/**
+ * Filter tree nodes by search query
+ * Returns nodes that match the query or have children that match
+ */
+export function filterTree(nodes: TreeNode[], query: string): TreeNode[] {
+  if (!query.trim()) return nodes
+
+  const lowerQuery = query.toLowerCase()
+
+  const filterNode = (node: TreeNode): TreeNode | null => {
+    const nameMatches = node.name.toLowerCase().includes(lowerQuery)
+
+    if (node.type === "file") {
+      return nameMatches ? node : null
+    }
+
+    // For folders, check if any children match
+    const filteredChildren = node.children
+      .map(filterNode)
+      .filter((n): n is TreeNode => n !== null)
+
+    // Include folder if its name matches OR it has matching children
+    if (nameMatches || filteredChildren.length > 0) {
+      return {
+        ...node,
+        children: filteredChildren,
+      }
+    }
+
+    return null
+  }
+
+  return nodes.map(filterNode).filter((n): n is TreeNode => n !== null)
+}
diff --git a/src/renderer/features/agents/ui/file-tree/index.ts b/src/renderer/features/agents/ui/file-tree/index.ts
new file mode 100644
index 00000000..a7b1242e
--- /dev/null
+++ b/src/renderer/features/agents/ui/file-tree/index.ts
@@ -0,0 +1,3 @@
+export { FileTreeSidebar } from "./FileTreeSidebar"
+export { FileTreeNode, type GitStatusMap } from "./FileTreeNode"
+export { buildFileTree, countFiles, countFolders, type TreeNode, type FileEntry } from "./build-file-tree"
diff --git a/src/renderer/features/agents/ui/preview-url-input.tsx b/src/renderer/features/agents/ui/preview-url-input.tsx
index 96df3692..045329ca 100644
--- a/src/renderer/features/agents/ui/preview-url-input.tsx
+++ b/src/renderer/features/agents/ui/preview-url-input.tsx
@@ -11,7 +11,7 @@ import {
 import { useCallback, useEffect, useRef, useState } from "react"
 
 interface PreviewUrlInputProps {
-  /** The base host (e.g., "sandbox-3000.21st.sh") */
+  /** The base host (e.g., "sandbox-3000.crunch.sh") */
   baseHost: string | null
   /** Current path (e.g., "/dashboard") */
   currentPath: string
@@ -121,7 +121,7 @@ export function PreviewUrlInput({
         const url = new URL(input)
         newPath = url.pathname + url.search + url.hash
       } else if (input.includes(".") && input.includes("/")) {
-        // It's host + path like "sandbox-3000.21st.sh/some/path"
+        // It's host + path like "sandbox-3000.crunch.sh/some/path"
         const slashIndex = input.indexOf("/")
         newPath = input.slice(slashIndex)
       } else if (input.startsWith("/")) {
diff --git a/src/renderer/features/data/components/data-viewer-sidebar.tsx b/src/renderer/features/data/components/data-viewer-sidebar.tsx
new file mode 100644
index 00000000..986cb3c0
--- /dev/null
+++ b/src/renderer/features/data/components/data-viewer-sidebar.tsx
@@ -0,0 +1,1546 @@
+import { useCallback, useMemo, useState, useEffect, useRef } from "react"
+import {
+  DataEditor,
+  GridColumn,
+  GridCell,
+  GridCellKind,
+  GridSelection,
+  CompactSelection,
+  type Item,
+  type Theme,
+  type Rectangle,
+} from "@glideapps/glide-data-grid"
+import "@glideapps/glide-data-grid/dist/index.css"
+import { useAtom } from "jotai"
+import {
+  X,
+  Loader2,
+  Database,
+  Search,
+  Pin,
+  Hash,
+  ArrowUpAZ,
+  ArrowDownAZ,
+  EyeOff,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Copy,
+  Expand,
+  Table2,
+  Play,
+  ChevronUp,
+  ChevronDown,
+  Terminal,
+  AlertCircle,
+  History,
+  Trash2,
+} from "lucide-react"
+import { getFileIconByExtension } from "../../agents/mentions/agents-file-mention"
+import { IconCloseSidebarRight } from "@/components/ui/icons"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Dialog,
+  DialogTitle,
+  CanvasDialogContent,
+  CanvasDialogHeader,
+  CanvasDialogBody,
+} from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
+import { trpc } from "@/lib/trpc"
+import { selectedSqliteTableAtomFamily } from "../../agents/atoms"
+import { useTheme } from "next-themes"
+import { toast } from "sonner"
+import { ViewerErrorBoundary } from "@/components/ui/error-boundary"
+import { getFileName, getFileExtension } from "../../file-viewer/utils/file-utils"
+
+interface DataViewerSidebarProps {
+  filePath: string
+  projectPath: string
+  onClose: () => void
+}
+
+// Page size options
+const PAGE_SIZE_OPTIONS = [100, 500, 1000, 5000] as const
+type PageSize = (typeof PAGE_SIZE_OPTIONS)[number]
+
+// Query history constants
+const MAX_HISTORY_SIZE = 15
+const HISTORY_STORAGE_PREFIX = "sql-history:"
+
+interface QueryHistoryEntry {
+  query: string
+  timestamp: number
+}
+
+/**
+ * Get query history for a specific file from localStorage
+ */
+function getQueryHistory(filePath: string): QueryHistoryEntry[] {
+  try {
+    const key = `${HISTORY_STORAGE_PREFIX}${filePath}`
+    const stored = localStorage.getItem(key)
+    if (!stored) return []
+    return JSON.parse(stored) as QueryHistoryEntry[]
+  } catch {
+    return []
+  }
+}
+
+/**
+ * Save a query to history for a specific file
+ */
+function saveQueryToHistory(filePath: string, query: string): QueryHistoryEntry[] {
+  const trimmedQuery = query.trim()
+  if (!trimmedQuery) return getQueryHistory(filePath)
+
+  try {
+    const key = `${HISTORY_STORAGE_PREFIX}${filePath}`
+    let history = getQueryHistory(filePath)
+
+    // Remove duplicate if exists
+    history = history.filter((h) => h.query !== trimmedQuery)
+
+    // Add new entry at the beginning
+    history.unshift({
+      query: trimmedQuery,
+      timestamp: Date.now(),
+    })
+
+    // Keep only last N entries
+    history = history.slice(0, MAX_HISTORY_SIZE)
+
+    localStorage.setItem(key, JSON.stringify(history))
+    return history
+  } catch {
+    return []
+  }
+}
+
+/**
+ * Clear query history for a specific file
+ */
+function clearQueryHistory(filePath: string): void {
+  try {
+    const key = `${HISTORY_STORAGE_PREFIX}${filePath}`
+    localStorage.removeItem(key)
+  } catch {
+    // Ignore errors
+  }
+}
+
+/**
+ * Get file type from extension
+ */
+function getFileType(filePath: string): "csv" | "json" | "sqlite" | "parquet" | "excel" | "arrow" | "unknown" {
+  const ext = getFileExtension(filePath)
+  switch (ext) {
+    case ".csv":
+    case ".tsv":
+      return "csv"
+    case ".json":
+    case ".jsonl":
+      return "json"
+    case ".db":
+    case ".sqlite":
+    case ".sqlite3":
+      return "sqlite"
+    case ".parquet":
+    case ".pq":
+      return "parquet"
+    case ".xlsx":
+    case ".xls":
+      return "excel"
+    case ".arrow":
+    case ".feather":
+    case ".ipc":
+      return "arrow"
+    default:
+      return "unknown"
+  }
+}
+
+/**
+ * Get file icon based on type - uses centralized icon function for consistency
+ */
+function FileIcon({ filePath }: { filePath: string }) {
+  const Icon = getFileIconByExtension(filePath)
+  return Icon ? <Icon className="h-4 w-4" /> : null
+}
+
+/**
+ * Format cell value for display
+ */
+function formatCellValue(value: unknown): string {
+  if (value === null) return "null"
+  if (value === undefined) return ""
+  if (typeof value === "object") return JSON.stringify(value)
+  return String(value)
+}
+
+/**
+ * Format JSON with syntax highlighting for display
+ */
+function formatJsonForDisplay(value: unknown): string {
+  try {
+    if (typeof value === "string") {
+      // Try to parse as JSON
+      const parsed = JSON.parse(value)
+      return JSON.stringify(parsed, null, 2)
+    }
+    return JSON.stringify(value, null, 2)
+  } catch {
+    return String(value)
+  }
+}
+
+/**
+ * Check if value is JSON-like (object or array or parseable string)
+ */
+function isJsonLike(value: unknown): boolean {
+  if (typeof value === "object" && value !== null) return true
+  if (typeof value === "string") {
+    const trimmed = value.trim()
+    return (
+      (trimmed.startsWith("{") && trimmed.endsWith("}")) ||
+      (trimmed.startsWith("[") && trimmed.endsWith("]"))
+    )
+  }
+  return false
+}
+
+/**
+ * DataViewerSidebar with error boundary wrapper
+ */
+export function DataViewerSidebar(props: DataViewerSidebarProps) {
+  return (
+    <ViewerErrorBoundary viewerType="data" onReset={props.onClose}>
+      <DataViewerSidebarInner {...props} />
+    </ViewerErrorBoundary>
+  )
+}
+
+/**
+ * Inner DataViewerSidebar component
+ */
+function DataViewerSidebarInner({
+  filePath,
+  projectPath,
+  onClose,
+}: DataViewerSidebarProps) {
+  const fileType = getFileType(filePath)
+  const fileName = getFileName(filePath)
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === "dark"
+  const gridRef = useRef<ReturnType<typeof DataEditor> | null>(null)
+
+  // ============ Pagination State ============
+  const [pageSize, setPageSize] = useState<PageSize>(1000)
+  const [currentPage, setCurrentPage] = useState(0)
+
+  // ============ Column State ============
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({})
+  const [columnOrder, setColumnOrder] = useState<number[]>([])
+  const [hiddenColumns, setHiddenColumns] = useState<Set<string>>(new Set())
+
+  // ============ Selection State ============
+  const [selection, setSelection] = useState<GridSelection>({
+    columns: CompactSelection.empty(),
+    rows: CompactSelection.empty(),
+  })
+
+  // ============ Feature State ============
+  const [freezeColumns, setFreezeColumns] = useState(0)
+  const [showRowMarkers, setShowRowMarkers] = useState(false)
+  const [showSearch, setShowSearch] = useState(false)
+  const [searchValue, setSearchValue] = useState("")
+  const [searchResults, setSearchResults] = useState<readonly Item[]>([])
+
+  // ============ Header Menu State ============
+  const [menuColumn, setMenuColumn] = useState<number | null>(null)
+  const [menuPosition, setMenuPosition] = useState<{
+    x: number
+    y: number
+  } | null>(null)
+
+  // ============ Cell Context Menu State ============
+  const [cellMenuPosition, setCellMenuPosition] = useState<{
+    x: number
+    y: number
+    cell: Item
+  } | null>(null)
+
+  // ============ Cell Details Dialog State ============
+  const [cellDetailsOpen, setCellDetailsOpen] = useState(false)
+  const [cellDetailsContent, setCellDetailsContent] = useState<{
+    columnName: string
+    value: unknown
+    rowIndex: number
+  } | null>(null)
+
+  // ============ Sort State ============
+  const [sortColumn, setSortColumn] = useState<string | null>(null)
+  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc")
+
+  // ============ SQL Query Panel State ============
+  const [showQueryPanel, setShowQueryPanel] = useState(false)
+  const [sqlQuery, setSqlQuery] = useState("SELECT * FROM data LIMIT 100")
+  const [queryError, setQueryError] = useState<string | null>(null)
+  const [isQueryMode, setIsQueryMode] = useState(false)
+  const [showHistory, setShowHistory] = useState(false)
+  const [queryHistory, setQueryHistory] = useState<QueryHistoryEntry[]>([])
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  // Build absolute path - must be defined before useEffects that depend on it
+  const absolutePath = filePath.startsWith("/")
+    ? filePath
+    : `${projectPath}/${filePath}`
+
+  // Load query history when file changes
+  useEffect(() => {
+    if (absolutePath) {
+      setQueryHistory(getQueryHistory(absolutePath))
+    }
+  }, [absolutePath])
+
+  // Glide Data Grid theme - use explicit colors instead of CSS variables
+  const gridTheme: Partial<Theme> = useMemo(
+    () => ({
+      // Backgrounds
+      bgCell: isDark ? "#09090b" : "#ffffff",
+      bgHeader: isDark ? "#18181b" : "#f4f4f5",
+      bgHeaderHovered: isDark ? "#27272a" : "#e4e4e7",
+      bgHeaderHasFocus: isDark ? "#27272a" : "#e4e4e7",
+      bgBubble: isDark ? "#3f3f46" : "#e4e4e7",
+      bgBubbleSelected: isDark ? "#52525b" : "#d4d4d8",
+      bgSearchResult: isDark ? "#854d0e" : "#fef08a",
+
+      // Text colors
+      textDark: isDark ? "#fafafa" : "#09090b",
+      textHeader: isDark ? "#fafafa" : "#09090b",
+      textLight: isDark ? "#a1a1aa" : "#71717a",
+      textMedium: isDark ? "#d4d4d8" : "#52525b",
+      textBubble: isDark ? "#fafafa" : "#09090b",
+
+      // Borders
+      borderColor: isDark ? "#27272a" : "#e4e4e7",
+      horizontalBorderColor: isDark ? "#27272a" : "#e4e4e7",
+      drilldownBorder: isDark ? "#3f3f46" : "#d4d4d8",
+
+      // Selection/Accent
+      accentColor: isDark ? "#3b82f6" : "#2563eb",
+      accentLight: isDark ? "#1e3a5f" : "#dbeafe",
+      accentFg: "#ffffff",
+
+      // Cell states
+      bgCellMedium: isDark ? "#18181b" : "#f4f4f5",
+      bgIconHeader: isDark ? "#27272a" : "#d4d4d8",
+      fgIconHeader: isDark ? "#fafafa" : "#09090b",
+
+      // Fonts
+      fontFamily:
+        "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+      baseFontStyle: "12px",
+      headerFontStyle: "600 12px",
+      editorFontSize: "12px",
+      markerFontStyle: "11px",
+
+      // Sizing
+      cellHorizontalPadding: 8,
+      cellVerticalPadding: 3,
+      headerIconSize: 16,
+
+      // Shadows & effects
+      linkColor: isDark ? "#60a5fa" : "#2563eb",
+    }),
+    [isDark]
+  )
+
+  // For SQLite and Excel files, we need to select a table/sheet
+  const selectedTableAtom = useMemo(
+    () => selectedSqliteTableAtomFamily(absolutePath),
+    [absolutePath]
+  )
+  const [selectedTable, setSelectedTable] = useAtom(selectedTableAtom)
+
+  // Fetch tables for SQLite files
+  const { data: sqliteTables } = trpc.files.listSqliteTables.useQuery(
+    { filePath: absolutePath },
+    { enabled: fileType === "sqlite" }
+  )
+
+  // Fetch sheets for Excel files
+  const { data: excelSheets } = trpc.files.listExcelSheets.useQuery(
+    { filePath: absolutePath },
+    { enabled: fileType === "excel" }
+  )
+
+  // Use the appropriate tables/sheets based on file type
+  const tables = fileType === "sqlite" ? sqliteTables : fileType === "excel" ? excelSheets : undefined
+
+  // Auto-select first table/sheet if none selected or if current selection is invalid
+  useEffect(() => {
+    if (
+      (fileType === "sqlite" || fileType === "excel") &&
+      tables &&
+      tables.length > 0
+    ) {
+      // If no selection or current selection doesn't exist in available tables
+      if (!selectedTable || !tables.includes(selectedTable)) {
+        setSelectedTable(tables[0])
+      }
+    }
+  }, [fileType, tables, selectedTable, setSelectedTable])
+
+  // Reset page and query state when file changes
+  useEffect(() => {
+    setCurrentPage(0)
+    // Reset query mode state when switching files
+    setIsQueryMode(false)
+    setQueryData(null)
+    setQueryError(null)
+    setSqlQuery("SELECT * FROM data LIMIT 100")
+  }, [absolutePath])
+
+  // Reset page when table/sheet changes (within same file)
+  useEffect(() => {
+    setCurrentPage(0)
+  }, [selectedTable])
+
+  // Fetch data with pagination (normal mode)
+  // For Excel files: if sheets were found, wait for selection; if no sheets found, try loading anyway (DuckDB uses first sheet)
+  const excelSheetsLoaded = fileType === "excel" && excelSheets !== undefined
+  const excelCanLoad = fileType !== "excel" || (excelSheetsLoaded && (excelSheets.length === 0 || !!selectedTable))
+
+  const { data: fileData, isLoading: isFileLoading, error: fileError } = trpc.files.previewDataFile.useQuery(
+    {
+      filePath: absolutePath,
+      limit: pageSize,
+      offset: currentPage * pageSize,
+      tableName: (fileType === "sqlite" || fileType === "excel") ? selectedTable || undefined : undefined,
+    },
+    {
+      enabled:
+        !isQueryMode &&
+        fileType !== "unknown" &&
+        (fileType !== "sqlite" || (!!selectedTable && selectedTable !== "")) &&
+        excelCanLoad,
+    }
+  )
+
+  // SQL query state for query mode
+  const [queryData, setQueryData] = useState<typeof fileData | null>(null)
+  const [isQueryLoading, setIsQueryLoading] = useState(false)
+
+  // Track query request ID to prevent race conditions
+  const queryRequestIdRef = useRef(0)
+
+  // Query mutation for SQL queries
+  const queryMutation = trpc.files.queryDataFile.useMutation()
+
+  // Execute SQL query with race condition protection
+  const executeQuery = useCallback(async () => {
+    if (!sqlQuery.trim()) return
+
+    // Increment request ID to track this specific request
+    const requestId = ++queryRequestIdRef.current
+
+    setIsQueryLoading(true)
+    setQueryError(null)
+    setIsQueryMode(true)
+    setShowHistory(false)
+
+    // Save to history
+    const newHistory = saveQueryToHistory(absolutePath, sqlQuery)
+    setQueryHistory(newHistory)
+
+    try {
+      const result = await queryMutation.mutateAsync({
+        filePath: absolutePath,
+        sql: sqlQuery,
+        sheetName: (fileType === "sqlite" || fileType === "excel") ? selectedTable || undefined : undefined,
+      })
+
+      // Only update state if this is still the latest request
+      if (requestId === queryRequestIdRef.current) {
+        setQueryData(result)
+        setQueryError(null)
+        setIsQueryLoading(false)
+        // Reset column state for new query results
+        if (result.columns) {
+          setColumnOrder(result.columns.map((_, i) => i))
+          setHiddenColumns(new Set())
+          setSortColumn(null)
+        }
+      }
+    } catch (err) {
+      // Only update error state if this is still the latest request
+      if (requestId === queryRequestIdRef.current) {
+        setQueryError(err instanceof Error ? err.message : "Query failed")
+        setIsQueryLoading(false)
+      }
+    }
+  }, [sqlQuery, absolutePath, fileType, selectedTable, queryMutation])
+
+  // Load query from history
+  const loadQueryFromHistory = useCallback((query: string) => {
+    setSqlQuery(query)
+    setShowHistory(false)
+    textareaRef.current?.focus()
+  }, [])
+
+  // Clear all history for this file
+  const handleClearHistory = useCallback(() => {
+    clearQueryHistory(absolutePath)
+    setQueryHistory([])
+    setShowHistory(false)
+  }, [absolutePath])
+
+  // Reset to file view
+  const resetToFileView = useCallback(() => {
+    setIsQueryMode(false)
+    setQueryData(null)
+    setQueryError(null)
+    setCurrentPage(0)
+  }, [])
+
+  // Use query data when in query mode, otherwise use file data
+  const data = isQueryMode ? queryData : fileData
+  const isLoading = isQueryMode ? isQueryLoading : isFileLoading
+  const error = isQueryMode ? null : fileError
+
+  // Calculate pagination info
+  const totalRows = data?.totalRows ?? 0
+  const totalPages = Math.ceil(totalRows / pageSize)
+  const startRow = currentPage * pageSize + 1
+  const endRow = Math.min((currentPage + 1) * pageSize, totalRows)
+
+  // Initialize column order when data changes
+  useEffect(() => {
+    if (data?.columns) {
+      setColumnOrder(data.columns.map((_, i) => i))
+      setHiddenColumns(new Set())
+      setSortColumn(null)
+    }
+  }, [data?.columns])
+
+  // Compute search results when search value changes
+  useEffect(() => {
+    if (!searchValue || !data) {
+      setSearchResults([])
+      return
+    }
+
+    const results: Item[] = []
+    const searchLower = searchValue.toLowerCase()
+
+    data.rows.forEach((row, rowIdx) => {
+      data.columns.forEach((col, colIdx) => {
+        if (hiddenColumns.has(col.name)) return
+        const value = formatCellValue(row[col.name])
+        if (value.toLowerCase().includes(searchLower)) {
+          results.push([colIdx, rowIdx])
+        }
+      })
+    })
+
+    setSearchResults(results)
+  }, [searchValue, data, hiddenColumns])
+
+  // Sort rows if sort is active
+  const sortedRows = useMemo(() => {
+    if (!data?.rows || !sortColumn) return data?.rows ?? []
+
+    const sorted = [...data.rows].sort((a, b) => {
+      const aVal = a[sortColumn]
+      const bVal = b[sortColumn]
+
+      // Handle nulls
+      if (aVal === null && bVal === null) return 0
+      if (aVal === null) return sortDirection === "asc" ? -1 : 1
+      if (bVal === null) return sortDirection === "asc" ? 1 : -1
+
+      // Compare
+      if (typeof aVal === "number" && typeof bVal === "number") {
+        return sortDirection === "asc" ? aVal - bVal : bVal - aVal
+      }
+
+      const aStr = String(aVal)
+      const bStr = String(bVal)
+      return sortDirection === "asc"
+        ? aStr.localeCompare(bStr)
+        : bStr.localeCompare(aStr)
+    })
+
+    return sorted
+  }, [data?.rows, sortColumn, sortDirection])
+
+  // Build columns with proper widths and filtering hidden
+  const baseColumns: GridColumn[] = useMemo(
+    () =>
+      data?.columns
+        .map((col, idx) => ({
+          title: col.name,
+          id: col.name,
+          width:
+            columnWidths[col.name] ??
+            Math.max(100, Math.min(300, col.name.length * 10 + 40)),
+          hasMenu: true,
+          originalIndex: idx,
+        }))
+        .filter((col) => !hiddenColumns.has(col.id)) ?? [],
+    [data?.columns, columnWidths, hiddenColumns]
+  )
+
+  // Apply column order
+  const orderedColumns: GridColumn[] = useMemo(() => {
+    if (!data?.columns || columnOrder.length === 0) return baseColumns
+
+    // Filter column order to only include visible columns
+    const visibleIndices = columnOrder.filter(
+      (idx) => data.columns[idx] && !hiddenColumns.has(data.columns[idx].name)
+    )
+
+    return visibleIndices
+      .map((idx) => {
+        const col = data.columns[idx]
+        return baseColumns.find((bc) => bc.id === col.name)
+      })
+      .filter(Boolean) as GridColumn[]
+  }, [baseColumns, columnOrder, data?.columns, hiddenColumns])
+
+  // ============ Handlers ============
+
+  const onColumnResize = useCallback(
+    (column: GridColumn, newSize: number) => {
+      setColumnWidths((prev) => ({
+        ...prev,
+        [column.id ?? column.title]: newSize,
+      }))
+    },
+    []
+  )
+
+  const onColumnMoved = useCallback((startIndex: number, endIndex: number) => {
+    setColumnOrder((prev) => {
+      const newOrder = [...prev]
+      const [removed] = newOrder.splice(startIndex, 1)
+      newOrder.splice(endIndex, 0, removed)
+      return newOrder
+    })
+  }, [])
+
+  const onSelectionChange = useCallback((newSelection: GridSelection) => {
+    setSelection(newSelection)
+  }, [])
+
+  const onSearchClose = useCallback(() => {
+    setShowSearch(false)
+    setSearchValue("")
+    setSearchResults([])
+  }, [])
+
+  const onHeaderMenuClick = useCallback(
+    (col: number, bounds: Rectangle) => {
+      const column = orderedColumns[col]
+      if (column) {
+        setMenuColumn(col)
+        setMenuPosition({ x: bounds.x, y: bounds.y + bounds.height })
+      }
+    },
+    [orderedColumns]
+  )
+
+  // Cell click handler for showing details
+  const onCellActivated = useCallback(
+    (cell: Item) => {
+      const [col, row] = cell
+      const column = orderedColumns[col]
+      if (!column) return
+
+      const colName = column.id as string
+      const rowData = sortedRows[row]
+      const value = rowData?.[colName]
+
+      // Show details dialog for long text or JSON
+      const stringValue = formatCellValue(value)
+      if (stringValue.length > 50 || isJsonLike(value)) {
+        setCellDetailsContent({
+          columnName: colName,
+          value,
+          rowIndex: currentPage * pageSize + row + 1,
+        })
+        setCellDetailsOpen(true)
+      }
+    },
+    [orderedColumns, sortedRows, currentPage, pageSize]
+  )
+
+  // Cell context menu handler
+  const onCellContextMenu = useCallback(
+    (cell: Item, event: { preventDefault?: () => void; bounds?: Rectangle; clientX?: number; clientY?: number }) => {
+      event.preventDefault?.()
+      const bounds = event.bounds || { x: event.clientX ?? 0, y: event.clientY ?? 0 }
+      setCellMenuPosition({
+        x: bounds.x ?? 0,
+        y: bounds.y ?? 0,
+        cell,
+      })
+    },
+    []
+  )
+
+  const handleSort = useCallback(
+    (direction: "asc" | "desc") => {
+      if (menuColumn !== null && orderedColumns[menuColumn]) {
+        const colName = orderedColumns[menuColumn].id as string
+        setSortColumn(colName)
+        setSortDirection(direction)
+      }
+      setMenuColumn(null)
+      setMenuPosition(null)
+    },
+    [menuColumn, orderedColumns]
+  )
+
+  const handleFreezeColumn = useCallback(() => {
+    if (menuColumn !== null) {
+      setFreezeColumns(menuColumn + 1)
+    }
+    setMenuColumn(null)
+    setMenuPosition(null)
+  }, [menuColumn])
+
+  const handleHideColumn = useCallback(() => {
+    if (menuColumn !== null && orderedColumns[menuColumn]) {
+      const colName = orderedColumns[menuColumn].id as string
+      setHiddenColumns((prev) => new Set([...prev, colName]))
+    }
+    setMenuColumn(null)
+    setMenuPosition(null)
+  }, [menuColumn, orderedColumns])
+
+  const handleShowAllColumns = useCallback(() => {
+    setHiddenColumns(new Set())
+  }, [])
+
+  // Copy cell value to clipboard
+  const handleCopyCellValue = useCallback(async () => {
+    if (!cellMenuPosition) return
+    const [col, row] = cellMenuPosition.cell
+    const column = orderedColumns[col]
+    if (!column) return
+
+    const colName = column.id as string
+    const rowData = sortedRows[row]
+    const value = rowData?.[colName]
+    const stringValue = formatCellValue(value)
+
+    try {
+      await navigator.clipboard.writeText(stringValue)
+      toast.success("Copied to clipboard")
+    } catch (err) {
+      console.error("Failed to copy:", err)
+      toast.error("Failed to copy to clipboard")
+    }
+    setCellMenuPosition(null)
+  }, [cellMenuPosition, orderedColumns, sortedRows])
+
+  // Show cell details from context menu
+  const handleShowCellDetails = useCallback(() => {
+    if (!cellMenuPosition) return
+    const [col, row] = cellMenuPosition.cell
+    const column = orderedColumns[col]
+    if (!column) return
+
+    const colName = column.id as string
+    const rowData = sortedRows[row]
+    const value = rowData?.[colName]
+
+    setCellDetailsContent({
+      columnName: colName,
+      value,
+      rowIndex: currentPage * pageSize + row + 1,
+    })
+    setCellDetailsOpen(true)
+    setCellMenuPosition(null)
+  }, [cellMenuPosition, orderedColumns, sortedRows, currentPage, pageSize])
+
+  // Get cell content with proper cell types
+  const getCellContent = useCallback(
+    (cell: Item): GridCell => {
+      const [col, row] = cell
+      const column = orderedColumns[col]
+      const colName = column?.id as string
+      const colMeta = data?.columns.find((c) => c.name === colName)
+      const colType = colMeta?.type
+      const rowData = sortedRows[row]
+      const value = rowData?.[colName]
+
+      // Handle null values
+      if (value === null || value === undefined) {
+        return {
+          kind: GridCellKind.Text,
+          data: "",
+          displayData: value === null ? "null" : "",
+          allowOverlay: true,
+          readonly: true,
+          style: "faded",
+        }
+      }
+
+      // Number type
+      if (colType === "number" && typeof value === "number") {
+        return {
+          kind: GridCellKind.Number,
+          data: value,
+          displayData: value.toLocaleString(),
+          allowOverlay: true,
+          readonly: true,
+        }
+      }
+
+      // Boolean type
+      if (colType === "boolean" || typeof value === "boolean") {
+        return {
+          kind: GridCellKind.Boolean,
+          data: Boolean(value),
+          allowOverlay: false,
+          readonly: true,
+        }
+      }
+
+      // URI detection (http/https links)
+      if (typeof value === "string" && /^https?:\/\//i.test(value)) {
+        return {
+          kind: GridCellKind.Uri,
+          data: value,
+          displayData: value,
+          allowOverlay: true,
+          readonly: true,
+        }
+      }
+
+      // Default: text
+      const displayValue = formatCellValue(value)
+      return {
+        kind: GridCellKind.Text,
+        data: displayValue,
+        displayData: displayValue,
+        allowOverlay: true,
+        readonly: true,
+      }
+    },
+    [orderedColumns, sortedRows, data?.columns]
+  )
+
+  // Get cells for selection (enables copy)
+  const getCellsForSelection = useCallback(
+    (selection: Rectangle): readonly (readonly GridCell[])[] => {
+      const result: GridCell[][] = []
+      for (let row = selection.y; row < selection.y + selection.height; row++) {
+        const rowCells: GridCell[] = []
+        for (
+          let col = selection.x;
+          col < selection.x + selection.width;
+          col++
+        ) {
+          rowCells.push(getCellContent([col, row]))
+        }
+        result.push(rowCells)
+      }
+      return result
+    },
+    [getCellContent]
+  )
+
+  // Error state
+  if (error) {
+    // Check if it's a file not found error
+    const isNotFound = error.message?.toLowerCase().includes("enoent") ||
+                       error.message?.toLowerCase().includes("not found") ||
+                       error.message?.toLowerCase().includes("no such file")
+    const errorMessage = isNotFound ? "File not found" : "Failed to load file"
+
+    return (
+      <div className="flex flex-col h-full">
+        <Header fileName={fileName} filePath={filePath} onClose={onClose} />
+        <div className="flex-1 flex items-center justify-center p-4">
+          <div className="flex flex-col items-center gap-3 text-center max-w-[300px]">
+            <AlertCircle className="h-10 w-10 text-muted-foreground" />
+            <p className="font-medium text-foreground">{errorMessage}</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      {/* Header with toolbar actions */}
+      <Header
+        fileName={fileName}
+        filePath={filePath}
+        onClose={onClose}
+        onSearch={() => setShowSearch((prev) => !prev)}
+        onFreeze={() => setFreezeColumns((prev) => (prev === 0 ? 1 : 0))}
+        freezeCount={freezeColumns}
+        showRowMarkers={showRowMarkers}
+        onToggleRowMarkers={() => setShowRowMarkers((prev) => !prev)}
+        hiddenColumnCount={hiddenColumns.size}
+        onShowAllColumns={handleShowAllColumns}
+        sortColumn={sortColumn}
+        onClearSort={() => setSortColumn(null)}
+      />
+
+      {/* Table/Sheet selector for SQLite and Excel */}
+      {(fileType === "sqlite" || fileType === "excel") && tables && tables.length > 0 && (
+        <div className="px-2 py-2 border-b border-border/50">
+          <Select value={selectedTable} onValueChange={setSelectedTable}>
+            <SelectTrigger className="w-full h-8 text-sm">
+              {fileType === "sqlite" ? (
+                <Database className="h-3.5 w-3.5 mr-2 text-muted-foreground" />
+              ) : (
+                <Table2 className="h-3.5 w-3.5 mr-2 text-muted-foreground" />
+              )}
+              <SelectValue placeholder={fileType === "sqlite" ? "Select a table" : "Select a sheet"} />
+            </SelectTrigger>
+            <SelectContent>
+              {tables.map((table) => (
+                <SelectItem key={table} value={table}>
+                  {table}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* SQL Query Panel */}
+      <div className="border-b border-border/50 flex-shrink-0">
+        {/* Query Panel Header */}
+        <button
+          onClick={() => setShowQueryPanel((prev) => !prev)}
+          className={cn(
+            "w-full px-2 py-1.5 flex items-center justify-between hover:bg-muted/50 transition-[background-color] duration-150",
+            showQueryPanel && "border-b border-border/50"
+          )}
+        >
+          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <Terminal className="h-3.5 w-3.5" />
+            <span>SQL</span>
+            {isQueryMode && (
+              <span className="px-1 py-0.5 rounded bg-accent text-accent-foreground text-[10px]">
+                active
+              </span>
+            )}
+          </div>
+          {showQueryPanel ? (
+            <ChevronUp className="h-3.5 w-3.5 text-muted-foreground" />
+          ) : (
+            <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+          )}
+        </button>
+
+        {/* Query Panel Content */}
+        {showQueryPanel && (
+          <div className="px-2 py-2 space-y-2">
+            {/* Textarea with inline buttons */}
+            <div className="relative">
+              <textarea
+                ref={textareaRef}
+                value={sqlQuery}
+                onChange={(e) => setSqlQuery(e.target.value)}
+                onKeyDown={(e) => {
+                  if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                    e.preventDefault()
+                    executeQuery()
+                  }
+                }}
+                placeholder="SELECT * FROM data LIMIT 100"
+                className={cn(
+                  "w-full h-20 px-2 py-1.5 pr-20 text-xs font-mono rounded-md resize-none",
+                  "bg-muted/50 border border-input",
+                  "focus:outline-none focus:ring-1 focus:ring-ring",
+                  "placeholder:text-muted-foreground/40"
+                )}
+                spellCheck={false}
+              />
+              {/* Buttons inside textarea */}
+              <div className="absolute right-1.5 bottom-1.5 flex items-center gap-0.5">
+                {/* History button */}
+                {queryHistory.length > 0 && (
+                  <DropdownMenu open={showHistory} onOpenChange={setShowHistory}>
+                    <TooltipProvider delayDuration={300}>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className={cn("h-6 w-6", showHistory ? "bg-accent" : "hover:bg-foreground/10")}
+                            >
+                              <History className="h-3.5 w-3.5" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                        </TooltipTrigger>
+                        <TooltipContent side="top">Query history</TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                    <DropdownMenuContent align="end" side="top" className="w-64 max-h-48 overflow-y-auto">
+                      <div className="flex items-center justify-between px-2 py-1.5">
+                        <span className="text-[10px] font-medium text-muted-foreground">Recent queries</span>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-5 w-5 hover:bg-foreground/10"
+                          onClick={handleClearHistory}
+                        >
+                          <Trash2 className="h-3 w-3 text-muted-foreground" />
+                        </Button>
+                      </div>
+                      <DropdownMenuSeparator />
+                      {queryHistory.map((entry, idx) => (
+                        <DropdownMenuItem
+                          key={idx}
+                          className="px-2 py-1.5"
+                          onClick={() => loadQueryFromHistory(entry.query)}
+                        >
+                          <span className="text-[10px] font-mono truncate">{entry.query}</span>
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+                {isQueryMode && (
+                  <TooltipProvider delayDuration={300}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6 hover:bg-foreground/10"
+                          onClick={resetToFileView}
+                        >
+                          <X className="h-3.5 w-3.5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent side="top">Reset view</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
+                <TooltipProvider delayDuration={300}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className={cn(
+                          "h-6 w-6",
+                          !isQueryLoading && sqlQuery.trim() && "text-primary hover:text-primary hover:bg-primary/10"
+                        )}
+                        onClick={executeQuery}
+                        disabled={isQueryLoading || !sqlQuery.trim()}
+                      >
+                        {isQueryLoading ? (
+                          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                        ) : (
+                          <Play className="h-3.5 w-3.5" />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="top">Run query (⌘↵)</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+            </div>
+
+            {/* Error display */}
+            {queryError && (
+              <div className="flex items-start gap-1.5 p-1.5 rounded bg-destructive/10 text-destructive text-[10px]">
+                <AlertCircle className="h-3 w-3 flex-shrink-0 mt-0.5" />
+                <span className="font-mono break-all leading-tight">{queryError}</span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Grid */}
+      <div className="flex-1 min-h-0 overflow-hidden relative">
+        {isLoading && !data ? (
+          <div className="flex items-center justify-center h-full">
+            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+          </div>
+        ) : data && sortedRows.length > 0 ? (
+          <>
+            <DataEditor
+              ref={gridRef}
+              getCellContent={getCellContent}
+              getCellsForSelection={getCellsForSelection}
+              columns={orderedColumns}
+              rows={sortedRows.length}
+              // Layout
+              width="100%"
+              height="100%"
+              rowHeight={32}
+              headerHeight={36}
+              // Scrolling
+              smoothScrollX
+              smoothScrollY
+              // Column features
+              onColumnResize={onColumnResize}
+              onColumnMoved={onColumnMoved}
+              minColumnWidth={50}
+              maxColumnWidth={500}
+              freezeColumns={freezeColumns}
+              fixedShadowX={freezeColumns > 0}
+              // Row markers
+              rowMarkers={showRowMarkers ? "both" : "none"}
+              rowMarkerWidth={60}
+              rowMarkerStartIndex={isQueryMode ? 1 : currentPage * pageSize + 1}
+              // Selection
+              gridSelection={selection}
+              onGridSelectionChange={onSelectionChange}
+              rowSelect="multi"
+              columnSelect="multi"
+              rangeSelect="multi-rect"
+              rowSelectionMode="auto"
+              drawFocusRing={true}
+              // Search
+              showSearch={showSearch}
+              searchValue={searchValue}
+              searchResults={searchResults}
+              onSearchValueChange={setSearchValue}
+              onSearchClose={onSearchClose}
+              // Header menu
+              onHeaderMenuClick={onHeaderMenuClick}
+              // Cell interactions
+              onCellActivated={onCellActivated}
+              onCellContextMenu={onCellContextMenu}
+              // Keyboard
+              keybindings={{
+                selectAll: true,
+                selectColumn: true,
+                selectRow: true,
+                copy: true,
+                search: true,
+                first: true,
+                last: true,
+              }}
+              // Theme
+              theme={gridTheme}
+            />
+
+            {/* Loading overlay for page changes */}
+            {isLoading && (
+              <div className="absolute inset-0 bg-background/50 flex items-center justify-center">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              </div>
+            )}
+
+            {/* Header Menu Dropdown */}
+            {menuColumn !== null && menuPosition && (
+              <div
+                className="fixed z-50"
+                style={{ left: menuPosition.x, top: menuPosition.y }}
+              >
+                <DropdownMenu
+                  open={true}
+                  onOpenChange={() => {
+                    setMenuColumn(null)
+                    setMenuPosition(null)
+                  }}
+                >
+                  <DropdownMenuTrigger asChild>
+                    <div />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    <DropdownMenuItem onClick={() => handleSort("asc")}>
+                      <ArrowUpAZ className="h-4 w-4 mr-2" />
+                      Sort Ascending
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => handleSort("desc")}>
+                      <ArrowDownAZ className="h-4 w-4 mr-2" />
+                      Sort Descending
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onClick={handleFreezeColumn}>
+                      <Pin className="h-4 w-4 mr-2" />
+                      Freeze up to here
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={handleHideColumn}>
+                      <EyeOff className="h-4 w-4 mr-2" />
+                      Hide Column
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            )}
+
+            {/* Cell Context Menu */}
+            {cellMenuPosition && (
+              <div
+                className="fixed z-50"
+                style={{ left: cellMenuPosition.x, top: cellMenuPosition.y }}
+              >
+                <DropdownMenu
+                  open={true}
+                  onOpenChange={() => setCellMenuPosition(null)}
+                >
+                  <DropdownMenuTrigger asChild>
+                    <div />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    <DropdownMenuItem onClick={handleCopyCellValue}>
+                      <Copy className="h-4 w-4 mr-2" />
+                      Copy Value
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={handleShowCellDetails}>
+                      <Expand className="h-4 w-4 mr-2" />
+                      View Details
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="flex items-center justify-center h-full text-muted-foreground">
+            <p>No data to display</p>
+          </div>
+        )}
+      </div>
+
+      {/* Pagination Footer */}
+      {data && (
+        <div className="px-2 py-2 border-t border-border/50 text-xs flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <span>
+              {totalRows > 0
+                ? `${startRow.toLocaleString()}-${endRow.toLocaleString()} of ${totalRows.toLocaleString()}`
+                : "0 rows"}
+            </span>
+            <span>|</span>
+            <span>
+              {orderedColumns.length}
+              {hiddenColumns.size > 0 && ` (${hiddenColumns.size} hidden)`} cols
+            </span>
+          </div>
+
+          {/* Pagination controls */}
+          {totalPages > 1 && (
+            <div className="flex items-center gap-1">
+              <TooltipProvider delayDuration={300}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 hover:bg-foreground/10"
+                      disabled={currentPage === 0}
+                      onClick={() => setCurrentPage(0)}
+                    >
+                      <ChevronsLeft className="h-3 w-3" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>First page</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 hover:bg-foreground/10"
+                      disabled={currentPage === 0}
+                      onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+                    >
+                      <ChevronLeft className="h-3 w-3" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Previous page</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              <span className="px-2 text-muted-foreground">
+                {currentPage + 1} / {totalPages}
+              </span>
+
+              <TooltipProvider delayDuration={300}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 hover:bg-foreground/10"
+                      disabled={currentPage >= totalPages - 1}
+                      onClick={() =>
+                        setCurrentPage((p) => Math.min(totalPages - 1, p + 1))
+                      }
+                    >
+                      <ChevronRight className="h-3 w-3" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Next page</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 hover:bg-foreground/10"
+                      disabled={currentPage >= totalPages - 1}
+                      onClick={() => setCurrentPage(totalPages - 1)}
+                    >
+                      <ChevronsRight className="h-3 w-3" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Last page</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              {/* Page size selector */}
+              <Select
+                value={String(pageSize)}
+                onValueChange={(v) => {
+                  setPageSize(Number(v) as PageSize)
+                  setCurrentPage(0)
+                }}
+              >
+                <SelectTrigger className="h-6 w-[70px] text-xs ml-2">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {PAGE_SIZE_OPTIONS.map((size) => (
+                    <SelectItem key={size} value={String(size)}>
+                      {size}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Cell Details Dialog */}
+      <Dialog open={cellDetailsOpen} onOpenChange={setCellDetailsOpen}>
+        <CanvasDialogContent className="w-[560px] max-h-[80vh]">
+          <CanvasDialogHeader className="pb-2">
+            <div className="flex items-center gap-2 pr-8">
+              <span className="font-mono text-sm font-medium truncate">
+                {cellDetailsContent?.columnName}
+              </span>
+              <span className="text-muted-foreground text-xs flex-shrink-0">
+                Row {cellDetailsContent?.rowIndex}
+              </span>
+            </div>
+          </CanvasDialogHeader>
+          <CanvasDialogBody className="pt-0">
+            {cellDetailsContent && (
+              <div className="relative">
+                <pre
+                  className="p-3 rounded-lg text-xs font-mono whitespace-pre-wrap break-all max-h-[50vh] overflow-auto bg-muted border border-border"
+                >
+                  {isJsonLike(cellDetailsContent.value)
+                    ? formatJsonForDisplay(cellDetailsContent.value)
+                    : formatCellValue(cellDetailsContent.value)}
+                </pre>
+                <TooltipProvider delayDuration={300}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="absolute top-2 right-2 h-7 w-7 hover:bg-foreground/10"
+                        onClick={async () => {
+                          const text = isJsonLike(cellDetailsContent.value)
+                            ? formatJsonForDisplay(cellDetailsContent.value)
+                            : formatCellValue(cellDetailsContent.value)
+                          try {
+                            await navigator.clipboard.writeText(text)
+                            toast.success("Copied to clipboard")
+                          } catch (err) {
+                            console.error("Failed to copy:", err)
+                            toast.error("Failed to copy to clipboard")
+                          }
+                        }}
+                      >
+                        <Copy className="h-3.5 w-3.5" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Copy to clipboard</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+            )}
+          </CanvasDialogBody>
+        </CanvasDialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+/**
+ * Header component with integrated toolbar actions
+ */
+interface HeaderProps {
+  fileName: string
+  filePath: string
+  onClose: () => void
+  onSearch: () => void
+  onFreeze: () => void
+  freezeCount: number
+  showRowMarkers: boolean
+  onToggleRowMarkers: () => void
+  hiddenColumnCount: number
+  onShowAllColumns: () => void
+  sortColumn: string | null
+  onClearSort: () => void
+}
+
+function Header({
+  fileName,
+  filePath,
+  onClose,
+  onSearch,
+  onFreeze,
+  freezeCount,
+  showRowMarkers,
+  onToggleRowMarkers,
+  hiddenColumnCount,
+  onShowAllColumns,
+  sortColumn,
+  onClearSort,
+}: HeaderProps) {
+  return (
+    <div className="flex items-center justify-between px-2 h-10 border-b border-border/50 bg-background flex-shrink-0">
+      {/* Left: File info */}
+      <div className="flex items-center gap-2 min-w-0 flex-shrink">
+        <FileIcon filePath={filePath} />
+        <span className="text-sm font-medium truncate" title={filePath}>
+          {fileName}
+        </span>
+      </div>
+
+      {/* Right: Toolbar actions + close button */}
+      <div className="flex items-center gap-0.5 flex-shrink-0">
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 hover:bg-muted"
+                onClick={onSearch}
+              >
+                <Search className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Search (Ctrl+F)</TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className={cn("h-6 w-6", freezeCount > 0 ? "bg-accent" : "hover:bg-muted")}
+                onClick={onFreeze}
+              >
+                <Pin className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              {freezeCount > 0 ? "Unfreeze columns" : "Freeze first column"}
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className={cn("h-6 w-6", showRowMarkers ? "bg-accent" : "hover:bg-muted")}
+                onClick={onToggleRowMarkers}
+              >
+                <Hash className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Toggle row numbers</TooltipContent>
+          </Tooltip>
+
+          {hiddenColumnCount > 0 && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-1.5 text-[10px] hover:bg-muted"
+                  onClick={onShowAllColumns}
+                >
+                  <EyeOff className="h-3 w-3 mr-0.5" />
+                  {hiddenColumnCount}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">Show {hiddenColumnCount} hidden columns</TooltipContent>
+            </Tooltip>
+          )}
+
+          {sortColumn && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-1.5 text-[10px] hover:bg-muted max-w-[80px]"
+                  onClick={onClearSort}
+                >
+                  <ArrowUpAZ className="h-3 w-3 mr-0.5 flex-shrink-0" />
+                  <span className="truncate">{sortColumn}</span>
+                  <X className="h-3 w-3 ml-0.5 flex-shrink-0" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">Clear sort on {sortColumn}</TooltipContent>
+            </Tooltip>
+          )}
+        </TooltipProvider>
+
+        {/* Close button */}
+        <Button
+          variant="ghost"
+          className="h-6 w-6 p-0 hover:bg-muted transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] rounded-md ml-1"
+          onClick={onClose}
+        >
+          <IconCloseSidebarRight className="h-3.5 w-3.5 text-muted-foreground" />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default DataViewerSidebar
diff --git a/src/renderer/features/data/components/index.ts b/src/renderer/features/data/components/index.ts
new file mode 100644
index 00000000..38a6142a
--- /dev/null
+++ b/src/renderer/features/data/components/index.ts
@@ -0,0 +1 @@
+export { DataViewerSidebar } from "./data-viewer-sidebar"
diff --git a/src/renderer/features/file-viewer/components/file-viewer-sidebar.tsx b/src/renderer/features/file-viewer/components/file-viewer-sidebar.tsx
new file mode 100644
index 00000000..e0c63298
--- /dev/null
+++ b/src/renderer/features/file-viewer/components/file-viewer-sidebar.tsx
@@ -0,0 +1,382 @@
+import { useCallback, useEffect, useMemo, useState } from "react"
+import Editor from "@monaco-editor/react"
+import { useAtom } from "jotai"
+import { useTheme } from "next-themes"
+import {
+  Loader2,
+  WrapText,
+  AlertCircle,
+  FileWarning,
+  Copy,
+  Check,
+} from "lucide-react"
+import { getFileIconByExtension } from "../../agents/mentions/agents-file-mention"
+import { IconCloseSidebarRight } from "@/components/ui/icons"
+import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { ViewerErrorBoundary } from "@/components/ui/error-boundary"
+import { cn } from "@/lib/utils"
+import { fileViewerWordWrapAtom } from "../../agents/atoms"
+import { useFileContent, getErrorMessage } from "../hooks/use-file-content"
+import { getMonacoLanguage, getFileViewerType } from "../utils/language-map"
+import { getFileName, formatFileSize } from "../utils/file-utils"
+import { defaultEditorOptions, getMonacoTheme } from "./monaco-config"
+import { ImageViewer } from "./image-viewer"
+import { MarkdownViewer } from "./markdown-viewer"
+
+interface FileViewerSidebarProps {
+  filePath: string
+  projectPath: string
+  onClose: () => void
+}
+
+/**
+ * File icon based on file path
+ */
+function FileIcon({ filePath }: { filePath: string }) {
+  const Icon = getFileIconByExtension(filePath)
+  return Icon ? <Icon className="h-4 w-4" /> : null
+}
+
+/**
+ * Loading spinner component
+ */
+function LoadingSpinner() {
+  return (
+    <div className="flex-1 flex items-center justify-center">
+      <div className="flex flex-col items-center gap-3 text-muted-foreground">
+        <Loader2 className="h-8 w-8 animate-spin" />
+        <span className="text-sm">Loading file...</span>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Error display component
+ */
+function ErrorDisplay({
+  error,
+}: {
+  error: string
+}) {
+  return (
+    <div className="flex-1 flex items-center justify-center p-4">
+      <div className="flex flex-col items-center gap-3 text-center max-w-[300px]">
+        <AlertCircle className="h-10 w-10 text-muted-foreground" />
+        <p className="font-medium text-foreground">{error}</p>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Unsupported file viewer - for binary files, PDFs, etc.
+ */
+function UnsupportedViewer({
+  filePath,
+  onClose,
+}: {
+  filePath: string
+  onClose: () => void
+}) {
+  const fileName = getFileName(filePath)
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      <div className="flex items-center justify-between px-3 h-10 border-b bg-background flex-shrink-0">
+        <div className="flex items-center gap-2 min-w-0 flex-1">
+          <FileIcon filePath={filePath} />
+          <span className="text-sm font-medium truncate" title={filePath}>
+            {fileName}
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          className="h-6 w-6 p-0 hover:bg-muted transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] rounded-md ml-1"
+          onClick={onClose}
+        >
+          <IconCloseSidebarRight className="h-3.5 w-3.5 text-muted-foreground" />
+        </Button>
+      </div>
+      <div className="flex-1 flex items-center justify-center p-4">
+        <div className="flex flex-col items-center gap-3 text-center max-w-[300px]">
+          <FileWarning className="h-10 w-10 text-muted-foreground" />
+          <p className="font-medium text-foreground">Cannot view this file</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Header component for the sidebar
+ */
+function Header({
+  fileName,
+  filePath,
+  byteLength,
+  wordWrap,
+  onToggleWordWrap,
+  onClose,
+  content,
+}: {
+  fileName: string
+  filePath: string
+  byteLength: number | null
+  wordWrap: boolean
+  onToggleWordWrap: () => void
+  onClose: () => void
+  content?: string | null
+}) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(async () => {
+    if (!content) return
+    try {
+      await navigator.clipboard.writeText(content)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error("Failed to copy:", err)
+    }
+  }, [content])
+
+  return (
+    <div className="flex items-center justify-between px-3 h-10 border-b bg-background flex-shrink-0">
+      <div className="flex items-center gap-2 min-w-0 flex-1">
+        <FileIcon filePath={filePath} />
+        <span className="text-sm font-medium truncate" title={filePath}>
+          {fileName}
+        </span>
+        {byteLength !== null && (
+          <span className="text-xs text-muted-foreground flex-shrink-0">
+            {formatFileSize(byteLength)}
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-1 flex-shrink-0">
+        {/* Copy file content */}
+        {content && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={handleCopy}
+              >
+                {copied ? (
+                  <Check className="h-4 w-4 text-green-500" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              {copied ? "Copied!" : "Copy file content"}
+            </TooltipContent>
+          </Tooltip>
+        )}
+        {/* Word wrap toggle */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn(
+                "h-7 w-7",
+                wordWrap && "bg-muted"
+              )}
+              onClick={onToggleWordWrap}
+            >
+              <WrapText className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            {wordWrap ? "Disable word wrap" : "Enable word wrap"}
+          </TooltipContent>
+        </Tooltip>
+        {/* Close button */}
+        <Button
+          variant="ghost"
+          className="h-6 w-6 p-0 hover:bg-muted transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] rounded-md ml-1"
+          onClick={onClose}
+        >
+          <IconCloseSidebarRight className="h-3.5 w-3.5 text-muted-foreground" />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * FileViewerSidebar - Routes to appropriate viewer based on file type
+ * Wrapped with error boundaries for crash protection
+ */
+export function FileViewerSidebar({
+  filePath,
+  projectPath,
+  onClose,
+}: FileViewerSidebarProps) {
+  const viewerType = getFileViewerType(filePath)
+
+  // Route to specialized viewers for non-code files
+  // Each viewer is wrapped in an error boundary for crash protection
+  switch (viewerType) {
+    case "image":
+      return (
+        <ViewerErrorBoundary viewerType="image" onReset={onClose}>
+          <ImageViewer
+            filePath={filePath}
+            projectPath={projectPath}
+            onClose={onClose}
+          />
+        </ViewerErrorBoundary>
+      )
+    case "unsupported":
+      return (
+        <UnsupportedViewer
+          filePath={filePath}
+          onClose={onClose}
+        />
+      )
+    case "markdown":
+      return (
+        <ViewerErrorBoundary viewerType="markdown" onReset={onClose}>
+          <MarkdownViewer
+            filePath={filePath}
+            projectPath={projectPath}
+            onClose={onClose}
+          />
+        </ViewerErrorBoundary>
+      )
+    default:
+      return (
+        <ViewerErrorBoundary viewerType="file" onReset={onClose}>
+          <CodeViewer
+            filePath={filePath}
+            projectPath={projectPath}
+            onClose={onClose}
+          />
+        </ViewerErrorBoundary>
+      )
+  }
+}
+
+/**
+ * CodeViewer - Monaco Editor-based code viewer (default)
+ */
+function CodeViewer({
+  filePath,
+  projectPath,
+  onClose,
+}: {
+  filePath: string
+  projectPath: string
+  onClose: () => void
+}) {
+  const fileName = getFileName(filePath)
+  const language = getMonacoLanguage(filePath)
+  const { resolvedTheme } = useTheme()
+  const monacoTheme = getMonacoTheme(resolvedTheme || "dark")
+
+  // Word wrap preference
+  const [wordWrap, setWordWrap] = useAtom(fileViewerWordWrapAtom)
+
+  // Load file content
+  const { content, isLoading, error, byteLength, refetch } = useFileContent(
+    projectPath,
+    filePath
+  )
+
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Escape to close
+      if (e.key === "Escape") {
+        e.preventDefault()
+        onClose()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [onClose])
+
+  // Toggle word wrap
+  const handleToggleWordWrap = useCallback(() => {
+    setWordWrap(!wordWrap)
+  }, [wordWrap, setWordWrap])
+
+  // Editor options with word wrap setting
+  const editorOptions = useMemo(
+    () => ({
+      ...defaultEditorOptions,
+      wordWrap: wordWrap ? ("on" as const) : ("off" as const),
+    }),
+    [wordWrap]
+  )
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="flex flex-col h-full bg-background">
+        <Header
+          fileName={fileName}
+          filePath={filePath}
+          byteLength={null}
+          wordWrap={wordWrap}
+          onToggleWordWrap={handleToggleWordWrap}
+          onClose={onClose}
+        />
+        <LoadingSpinner />
+      </div>
+    )
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="flex flex-col h-full bg-background">
+        <Header
+          fileName={fileName}
+          filePath={filePath}
+          byteLength={null}
+          wordWrap={wordWrap}
+          onToggleWordWrap={handleToggleWordWrap}
+          onClose={onClose}
+        />
+        <ErrorDisplay error={getErrorMessage(error)} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      <Header
+        fileName={fileName}
+        filePath={filePath}
+        byteLength={byteLength}
+        wordWrap={wordWrap}
+        onToggleWordWrap={handleToggleWordWrap}
+        onClose={onClose}
+        content={content}
+      />
+      <div className="flex-1 min-h-0">
+        <Editor
+          height="100%"
+          language={language}
+          value={content || ""}
+          theme={monacoTheme}
+          options={editorOptions}
+          loading={<LoadingSpinner />}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/features/file-viewer/components/html-viewer.tsx b/src/renderer/features/file-viewer/components/html-viewer.tsx
new file mode 100644
index 00000000..7a2c525c
--- /dev/null
+++ b/src/renderer/features/file-viewer/components/html-viewer.tsx
@@ -0,0 +1,296 @@
+import { useState, useMemo, useEffect, useRef } from "react"
+import Editor from "@monaco-editor/react"
+import { useTheme } from "next-themes"
+import { useAtom } from "jotai"
+import {
+  X,
+  Loader2,
+  AlertCircle,
+  FileCode,
+  Eye,
+  Code,
+} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { trpc } from "@/lib/trpc"
+import { fileViewerWordWrapAtom } from "../../agents/atoms"
+import { defaultEditorOptions, getMonacoTheme } from "./monaco-config"
+
+interface HtmlViewerProps {
+  filePath: string
+  projectPath: string
+  onClose: () => void
+}
+
+/**
+ * Get file name from path
+ */
+function getFileName(filePath: string): string {
+  const parts = filePath.split("/")
+  return parts[parts.length - 1] || filePath
+}
+
+/**
+ * Format file size for display
+ */
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
+}
+
+/**
+ * HtmlViewer - Renders HTML with preview/source toggle
+ */
+export function HtmlViewer({
+  filePath,
+  projectPath,
+  onClose,
+}: HtmlViewerProps) {
+  const fileName = getFileName(filePath)
+  const { resolvedTheme } = useTheme()
+  const monacoTheme = getMonacoTheme(resolvedTheme || "dark")
+
+  // View mode: preview or source
+  const [showPreview, setShowPreview] = useState(true)
+
+  // Word wrap preference for source view
+  const [wordWrap] = useAtom(fileViewerWordWrapAtom)
+
+  // Blob URL ref for cleanup
+  const blobUrlRef = useRef<string | null>(null)
+
+  // Build absolute path
+  const absolutePath = useMemo(() => {
+    return filePath.startsWith("/") ? filePath : `${projectPath}/${filePath}`
+  }, [filePath, projectPath])
+
+  // Fetch file content
+  const { data, isLoading, error } = trpc.files.readTextFile.useQuery(
+    { filePath: absolutePath },
+    { staleTime: 30000 }
+  )
+
+  // Create blob URL for iframe
+  const iframeSrc = useMemo(() => {
+    if (!data?.ok) return null
+
+    // Clean up previous blob URL
+    if (blobUrlRef.current) {
+      URL.revokeObjectURL(blobUrlRef.current)
+    }
+
+    const blob = new Blob([data.content], { type: "text/html" })
+    const url = URL.createObjectURL(blob)
+    blobUrlRef.current = url
+    return url
+  }, [data])
+
+  // Cleanup blob URL on unmount
+  useEffect(() => {
+    return () => {
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current)
+      }
+    }
+  }, [])
+
+  // Editor options
+  const editorOptions = useMemo(
+    () => ({
+      ...defaultEditorOptions,
+      wordWrap: wordWrap ? ("on" as const) : ("off" as const),
+    }),
+    [wordWrap]
+  )
+
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        onClose()
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [onClose])
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="flex flex-col h-full bg-background">
+        <Header
+          fileName={fileName}
+          byteLength={null}
+          showPreview={showPreview}
+          onToggleView={setShowPreview}
+          onClose={onClose}
+        />
+        <div className="flex-1 flex items-center justify-center">
+          <div className="flex flex-col items-center gap-3 text-muted-foreground">
+            <Loader2 className="h-8 w-8 animate-spin" />
+            <span className="text-sm">Loading file...</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Error state
+  if (error || (data && !data.ok)) {
+    const errorMessage =
+      data && !data.ok
+        ? data.reason === "too-large"
+          ? "File too large"
+          : data.reason === "binary"
+          ? "Binary file"
+          : "File not found"
+        : "Failed to load file"
+
+    return (
+      <div className="flex flex-col h-full bg-background">
+        <Header
+          fileName={fileName}
+          byteLength={null}
+          showPreview={showPreview}
+          onToggleView={setShowPreview}
+          onClose={onClose}
+        />
+        <div className="flex-1 flex items-center justify-center p-4">
+          <div className="flex flex-col items-center gap-3 text-center max-w-[300px]">
+            <AlertCircle className="h-10 w-10 text-muted-foreground" />
+            <div>
+              <p className="font-medium text-foreground">{errorMessage}</p>
+              <p className="text-sm text-muted-foreground mt-1">
+                The file cannot be displayed.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const content = data?.ok ? data.content : ""
+  const byteLength = data?.ok ? data.byteLength : null
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      <Header
+        fileName={fileName}
+        byteLength={byteLength}
+        showPreview={showPreview}
+        onToggleView={setShowPreview}
+        onClose={onClose}
+      />
+
+      {/* Content */}
+      <div className="flex-1 min-h-0 overflow-hidden">
+        {showPreview ? (
+          <iframe
+            src={iframeSrc || "about:blank"}
+            sandbox="allow-scripts allow-same-origin"
+            className="w-full h-full border-0 bg-white"
+            title="HTML Preview"
+          />
+        ) : (
+          <Editor
+            height="100%"
+            language="html"
+            value={content}
+            theme={monacoTheme}
+            options={editorOptions}
+            loading={
+              <div className="flex items-center justify-center h-full">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              </div>
+            }
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Header component with preview/source toggle
+ */
+function Header({
+  fileName,
+  byteLength,
+  showPreview,
+  onToggleView,
+  onClose,
+}: {
+  fileName: string
+  byteLength: number | null
+  showPreview: boolean
+  onToggleView: (show: boolean) => void
+  onClose: () => void
+}) {
+  return (
+    <div className="flex items-center justify-between px-3 h-10 border-b bg-background flex-shrink-0">
+      <div className="flex items-center gap-2 min-w-0 flex-1">
+        <FileCode className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+        <span className="text-sm font-medium truncate">{fileName}</span>
+        {byteLength !== null && (
+          <span className="text-xs text-muted-foreground flex-shrink-0">
+            {formatFileSize(byteLength)}
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-1 flex-shrink-0">
+        {/* View toggle */}
+        <div className="flex items-center rounded-md border bg-muted/50 p-0.5">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className={cn(
+                  "h-6 w-6 rounded-sm",
+                  showPreview && "bg-background shadow-sm"
+                )}
+                onClick={() => onToggleView(true)}
+              >
+                <Eye className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Preview</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className={cn(
+                  "h-6 w-6 rounded-sm",
+                  !showPreview && "bg-background shadow-sm"
+                )}
+                onClick={() => onToggleView(false)}
+              >
+                <Code className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Source</TooltipContent>
+          </Tooltip>
+        </div>
+        {/* Close button */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 ml-1"
+          onClick={onClose}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/features/file-viewer/components/image-viewer.tsx b/src/renderer/features/file-viewer/components/image-viewer.tsx
new file mode 100644
index 00000000..2c6c0e18
--- /dev/null
+++ b/src/renderer/features/file-viewer/components/image-viewer.tsx
@@ -0,0 +1,115 @@
+import { useMemo } from "react"
+import { Loader2, AlertCircle } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { IconCloseSidebarRight } from "@/components/ui/icons"
+import { trpc } from "@/lib/trpc"
+import { getFileIconByExtension } from "../../agents/mentions/agents-file-mention"
+import { getFileName, formatFileSize } from "../utils/file-utils"
+
+interface ImageViewerProps {
+  filePath: string
+  projectPath: string
+  onClose: () => void
+}
+
+/**
+ * ImageViewer - Simple fit-to-view image display
+ */
+export function ImageViewer({
+  filePath,
+  projectPath,
+  onClose,
+}: ImageViewerProps) {
+  const fileName = getFileName(filePath)
+
+  // Build absolute path
+  const absolutePath = useMemo(() => {
+    return filePath.startsWith("/") ? filePath : `${projectPath}/${filePath}`
+  }, [filePath, projectPath])
+
+  // Fetch image as base64
+  const { data, isLoading, error } = trpc.files.readBinaryFile.useQuery(
+    { filePath: absolutePath },
+    { staleTime: 60000 } // Cache for 1 minute
+  )
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 h-10 border-b bg-background flex-shrink-0">
+        <div className="flex items-center gap-2 min-w-0 flex-1">
+          {(() => {
+            const Icon = getFileIconByExtension(filePath)
+            return Icon ? <Icon className="h-4 w-4 flex-shrink-0" /> : null
+          })()}
+          <span className="text-sm font-medium truncate" title={filePath}>
+            {fileName}
+          </span>
+          {data?.ok && (
+            <span className="text-xs text-muted-foreground flex-shrink-0">
+              {formatFileSize(data.byteLength)}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1 flex-shrink-0">
+          {/* Close button */}
+          <Button
+            variant="ghost"
+            className="h-6 w-6 p-0 hover:bg-muted transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] rounded-md ml-1"
+            onClick={onClose}
+          >
+            <IconCloseSidebarRight className="h-3.5 w-3.5 text-muted-foreground" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-h-0 flex items-center justify-center bg-muted/20 p-4">
+        {isLoading && (
+          <div className="flex flex-col items-center gap-3 text-muted-foreground">
+            <Loader2 className="h-8 w-8 animate-spin" />
+            <span className="text-sm">Loading image...</span>
+          </div>
+        )}
+
+        {error && (() => {
+          const isNotFound = error.message?.toLowerCase().includes("enoent") ||
+                             error.message?.toLowerCase().includes("not found") ||
+                             error.message?.toLowerCase().includes("no such file")
+          const errorMessage = isNotFound ? "File not found" : "Failed to load image"
+          return (
+            <div className="flex flex-col items-center gap-3 text-center max-w-[300px]">
+              <AlertCircle className="h-10 w-10 text-muted-foreground" />
+              <p className="font-medium text-foreground">{errorMessage}</p>
+            </div>
+          )
+        })()}
+
+        {data && !data.ok && (
+          <div className="flex flex-col items-center gap-3 text-center max-w-[300px]">
+            <AlertCircle className="h-10 w-10 text-muted-foreground" />
+            <div>
+              <p className="font-medium text-foreground">
+                {data.reason === "too-large" ? "Image too large" : "Image not found"}
+              </p>
+              <p className="text-sm text-muted-foreground mt-1">
+                {data.reason === "too-large"
+                  ? "The image exceeds the 20MB size limit."
+                  : "The file could not be found."}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {data?.ok && (
+          <img
+            src={`data:${data.mimeType};base64,${data.data}`}
+            alt={fileName}
+            className="max-w-full max-h-full object-contain rounded-sm"
+            style={{ imageRendering: "auto" }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/features/file-viewer/components/markdown-viewer.tsx b/src/renderer/features/file-viewer/components/markdown-viewer.tsx
new file mode 100644
index 00000000..94190114
--- /dev/null
+++ b/src/renderer/features/file-viewer/components/markdown-viewer.tsx
@@ -0,0 +1,412 @@
+import { useState, useMemo, useCallback, useEffect, useRef } from "react"
+import Editor from "@monaco-editor/react"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
+import { oneDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/prism"
+import { useTheme } from "next-themes"
+import { useAtom } from "jotai"
+import {
+  Loader2,
+  AlertCircle,
+  Eye,
+  Code,
+  Copy,
+  Check,
+} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { IconCloseSidebarRight } from "@/components/ui/icons"
+import { getFileIconByExtension } from "../../agents/mentions/agents-file-mention"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { trpc } from "@/lib/trpc"
+import { fileViewerWordWrapAtom } from "../../agents/atoms"
+import { defaultEditorOptions, getMonacoTheme } from "./monaco-config"
+import { getFileName, formatFileSize } from "../utils/file-utils"
+
+interface MarkdownViewerProps {
+  filePath: string
+  projectPath: string
+  onClose: () => void
+}
+
+/**
+ * MarkdownViewer - Renders markdown with preview/source toggle
+ */
+export function MarkdownViewer({
+  filePath,
+  projectPath,
+  onClose,
+}: MarkdownViewerProps) {
+  const fileName = getFileName(filePath)
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === "dark"
+  const monacoTheme = getMonacoTheme(resolvedTheme || "dark")
+
+  // View mode: preview or source
+  const [showPreview, setShowPreview] = useState(true)
+
+  // Word wrap preference for source view
+  const [wordWrap] = useAtom(fileViewerWordWrapAtom)
+
+  // Build absolute path
+  const absolutePath = useMemo(() => {
+    return filePath.startsWith("/") ? filePath : `${projectPath}/${filePath}`
+  }, [filePath, projectPath])
+
+  // Fetch file content
+  const { data, isLoading, error, refetch } = trpc.files.readTextFile.useQuery(
+    { filePath: absolutePath },
+    { staleTime: 30000 }
+  )
+
+  // Store refetch in a ref so subscription callback always has current refetch
+  const refetchRef = useRef(refetch)
+  useEffect(() => {
+    refetchRef.current = refetch
+  }, [refetch])
+
+  // Compute relative path for matching against file change events
+  const relativePath = useMemo(() => {
+    if (!filePath.startsWith("/")) return filePath
+    if (filePath.startsWith(projectPath)) {
+      return filePath.slice(projectPath.length + 1)
+    }
+    return filePath
+  }, [projectPath, filePath])
+
+  // Subscribe to file changes and refetch when the viewed file changes
+  trpc.files.watchChanges.useSubscription(
+    { projectPath },
+    {
+      enabled: !!projectPath && !!relativePath,
+      onData: (change) => {
+        if (change.filename === relativePath) {
+          refetchRef.current()
+        }
+      },
+    },
+  )
+
+  // Editor options
+  const editorOptions = useMemo(
+    () => ({
+      ...defaultEditorOptions,
+      wordWrap: wordWrap ? ("on" as const) : ("off" as const),
+    }),
+    [wordWrap]
+  )
+
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        onClose()
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [onClose])
+
+  // Code block renderer for syntax highlighting
+  const codeComponent = useCallback(
+    ({ className, children, node, ...props }: { className?: string; children?: React.ReactNode; node?: { position?: unknown; tagName?: string } } & React.HTMLAttributes<HTMLElement>) => {
+      const match = /language-(\w+)/.exec(className || "")
+      // Check if this is inside a <pre> tag (code block) vs inline
+      const isCodeBlock = node?.position && node?.tagName === "code" &&
+        (className?.includes("language-") ||
+         (typeof children === "string" && children.includes("\n")))
+
+      // Inline code (not in a pre block)
+      if (!isCodeBlock && !match) {
+        return (
+          <code
+            className={cn(
+              "px-1.5 py-0.5 rounded text-sm font-mono",
+              isDark ? "bg-zinc-800" : "bg-zinc-200"
+            )}
+            {...props}
+          >
+            {children}
+          </code>
+        )
+      }
+
+      // Code block - use syntax highlighter
+      return (
+        <SyntaxHighlighter
+          style={isDark ? oneDark : oneLight}
+          language={match?.[1] || "text"}
+          PreTag="div"
+          customStyle={{
+            margin: 0,
+            borderRadius: "0.375rem",
+            fontSize: "0.875rem",
+            padding: "1rem",
+          }}
+          {...props}
+        >
+          {String(children).replace(/\n$/, "")}
+        </SyntaxHighlighter>
+      )
+    },
+    [isDark]
+  )
+
+  // Pre block wrapper for code blocks without language
+  const preComponent = useCallback(
+    ({ children }: { children?: React.ReactNode }) => {
+      // Just pass through - the code component handles styling
+      return <>{children}</>
+    },
+    []
+  )
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="flex flex-col h-full bg-background">
+        <Header
+          fileName={fileName}
+          filePath={filePath}
+          byteLength={null}
+          showPreview={showPreview}
+          onToggleView={setShowPreview}
+          onClose={onClose}
+        />
+        <div className="flex-1 flex items-center justify-center">
+          <div className="flex flex-col items-center gap-3 text-muted-foreground">
+            <Loader2 className="h-8 w-8 animate-spin" />
+            <span className="text-sm">Loading file...</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Error state
+  if (error || (data && !data.ok)) {
+    let errorMessage = "Failed to load file"
+    if (data && !data.ok) {
+      errorMessage = data.reason === "too-large"
+        ? "File too large"
+        : data.reason === "binary"
+        ? "Binary file"
+        : "File not found"
+    } else if (error) {
+      const errMsg = error.message?.toLowerCase() || ""
+      const isNotFound = errMsg.includes("enoent") ||
+                         errMsg.includes("not found") ||
+                         errMsg.includes("no such file")
+      errorMessage = isNotFound ? "File not found" : "Failed to load file"
+    }
+
+    return (
+      <div className="flex flex-col h-full bg-background">
+        <Header
+          fileName={fileName}
+          filePath={filePath}
+          byteLength={null}
+          showPreview={showPreview}
+          onToggleView={setShowPreview}
+          onClose={onClose}
+        />
+        <div className="flex-1 flex items-center justify-center p-4">
+          <div className="flex flex-col items-center gap-3 text-center max-w-[300px]">
+            <AlertCircle className="h-10 w-10 text-muted-foreground" />
+            <p className="font-medium text-foreground">{errorMessage}</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const content = data?.ok ? data.content : ""
+  const byteLength = data?.ok ? data.byteLength : null
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      <Header
+        fileName={fileName}
+        filePath={filePath}
+        byteLength={byteLength}
+        showPreview={showPreview}
+        onToggleView={setShowPreview}
+        onClose={onClose}
+        content={content}
+      />
+
+      {/* Content */}
+      <div className="flex-1 min-h-0 overflow-hidden">
+        {showPreview ? (
+          <div
+            className={cn(
+              "h-full overflow-auto p-6",
+              "prose prose-sm max-w-none",
+              isDark ? "prose-invert" : "",
+              // Custom prose styling
+              "prose-headings:font-semibold",
+              "prose-h1:text-2xl prose-h1:border-b prose-h1:pb-2 prose-h1:mb-4",
+              "prose-h2:text-xl prose-h2:mt-6 prose-h2:mb-3",
+              "prose-h3:text-lg prose-h3:mt-5 prose-h3:mb-2",
+              "prose-p:my-3 prose-p:leading-relaxed",
+              "prose-a:text-primary prose-a:no-underline hover:prose-a:underline",
+              "prose-code:before:content-none prose-code:after:content-none",
+              "prose-pre:bg-transparent prose-pre:p-0",
+              "prose-ul:my-3 prose-ol:my-3",
+              "prose-li:my-1",
+              "prose-blockquote:border-l-primary prose-blockquote:bg-muted/50 prose-blockquote:py-1 prose-blockquote:px-4 prose-blockquote:not-italic",
+              "prose-table:my-4",
+              "prose-th:bg-muted prose-th:px-3 prose-th:py-2",
+              "prose-td:px-3 prose-td:py-2 prose-td:border-t"
+            )}
+          >
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                code: codeComponent,
+                pre: preComponent,
+              }}
+            >
+              {content}
+            </ReactMarkdown>
+          </div>
+        ) : (
+          <Editor
+            height="100%"
+            language="markdown"
+            value={content}
+            theme={monacoTheme}
+            options={editorOptions}
+            loading={
+              <div className="flex items-center justify-center h-full">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              </div>
+            }
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Header component with preview/source toggle
+ */
+function Header({
+  fileName,
+  filePath,
+  byteLength,
+  showPreview,
+  onToggleView,
+  onClose,
+  content,
+}: {
+  fileName: string
+  filePath: string
+  byteLength: number | null
+  showPreview: boolean
+  onToggleView: (show: boolean) => void
+  onClose: () => void
+  content?: string
+}) {
+  const Icon = getFileIconByExtension(filePath)
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(async () => {
+    if (!content) return
+    try {
+      await navigator.clipboard.writeText(content)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error("Failed to copy:", err)
+    }
+  }, [content])
+
+  return (
+    <div className="flex items-center justify-between px-3 h-10 border-b bg-background flex-shrink-0">
+      <div className="flex items-center gap-2 min-w-0 flex-1">
+        {Icon && <Icon className="h-4 w-4 flex-shrink-0" />}
+        <span className="text-sm font-medium truncate">{fileName}</span>
+        {byteLength !== null && (
+          <span className="text-xs text-muted-foreground flex-shrink-0">
+            {formatFileSize(byteLength)}
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-1 flex-shrink-0">
+        {/* Copy file content */}
+        {content && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={handleCopy}
+              >
+                {copied ? (
+                  <Check className="h-4 w-4 text-green-500" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              {copied ? "Copied!" : "Copy file content"}
+            </TooltipContent>
+          </Tooltip>
+        )}
+        {/* View toggle */}
+        <div className="flex items-center rounded-md border bg-muted/50 p-0.5">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className={cn(
+                  "h-6 w-6 rounded-sm",
+                  showPreview && "bg-background shadow-sm"
+                )}
+                onClick={() => onToggleView(true)}
+              >
+                <Eye className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Preview</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className={cn(
+                  "h-6 w-6 rounded-sm",
+                  !showPreview && "bg-background shadow-sm"
+                )}
+                onClick={() => onToggleView(false)}
+              >
+                <Code className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Source</TooltipContent>
+          </Tooltip>
+        </div>
+        {/* Close button */}
+        <Button
+          variant="ghost"
+          className="h-6 w-6 p-0 hover:bg-muted transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] rounded-md ml-1"
+          onClick={onClose}
+        >
+          <IconCloseSidebarRight className="h-3.5 w-3.5 text-muted-foreground" />
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/features/file-viewer/components/monaco-config.ts b/src/renderer/features/file-viewer/components/monaco-config.ts
new file mode 100644
index 00000000..be7610c9
--- /dev/null
+++ b/src/renderer/features/file-viewer/components/monaco-config.ts
@@ -0,0 +1,95 @@
+import { loader } from "@monaco-editor/react"
+import * as monaco from "monaco-editor"
+import type { editor } from "monaco-editor"
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
+import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
+
+// Configure Monaco workers for Vite
+// @ts-ignore - Monaco's global window setup
+self.MonacoEnvironment = {
+  getWorker(_: unknown, label: string) {
+    if (label === "json") {
+      return new jsonWorker()
+    }
+    if (label === "css" || label === "scss" || label === "less") {
+      return new cssWorker()
+    }
+    if (label === "html" || label === "handlebars" || label === "razor") {
+      return new htmlWorker()
+    }
+    if (label === "typescript" || label === "javascript") {
+      return new tsWorker()
+    }
+    return new editorWorker()
+  },
+}
+
+// Configure Monaco to use local package instead of CDN
+// This is required for Electron apps due to CSP restrictions
+loader.config({ monaco })
+
+// Default editor options for read-only file viewing
+export const defaultEditorOptions: editor.IStandaloneEditorConstructionOptions = {
+  readOnly: true,
+  minimap: { enabled: true },
+  lineNumbers: "on",
+  wordWrap: "off",
+  automaticLayout: true,
+  fontSize: 13,
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  folding: true,
+  foldingStrategy: "indentation",
+  showFoldingControls: "mouseover",
+  bracketPairColorization: { enabled: true },
+  guides: {
+    bracketPairs: true,
+    indentation: true,
+  },
+  scrollBeyondLastLine: false,
+  renderWhitespace: "selection",
+  scrollbar: {
+    vertical: "auto",
+    horizontal: "auto",
+    useShadows: false,
+    verticalScrollbarSize: 10,
+    horizontalScrollbarSize: 10,
+  },
+  padding: {
+    top: 8,
+    bottom: 8,
+  },
+  // Disable features not needed for read-only viewing
+  quickSuggestions: false,
+  parameterHints: { enabled: false },
+  suggestOnTriggerCharacters: false,
+  acceptSuggestionOnEnter: "off",
+  tabCompletion: "off",
+  wordBasedSuggestions: "off",
+  // Enable search functionality
+  find: {
+    addExtraSpaceOnTop: false,
+    autoFindInSelection: "never",
+    seedSearchStringFromSelection: "always",
+  },
+  // Make it look nice
+  smoothScrolling: true,
+  cursorBlinking: "solid",
+  cursorStyle: "line",
+  renderLineHighlight: "line",
+  contextmenu: true,
+  mouseWheelZoom: true,
+}
+
+// Map app theme to Monaco theme
+export function getMonacoTheme(appTheme: string): string {
+  // Check if it's a dark theme
+  const isDark = appTheme.includes("dark") ||
+                 appTheme === "vesper" ||
+                 appTheme === "min-dark" ||
+                 appTheme === "vitesse-dark"
+
+  return isDark ? "vs-dark" : "vs"
+}
diff --git a/src/renderer/features/file-viewer/components/pdf-viewer.tsx b/src/renderer/features/file-viewer/components/pdf-viewer.tsx
new file mode 100644
index 00000000..8c139491
--- /dev/null
+++ b/src/renderer/features/file-viewer/components/pdf-viewer.tsx
@@ -0,0 +1,96 @@
+import { useMemo } from "react"
+import { X, ExternalLink, FileText } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+interface PdfViewerProps {
+  filePath: string
+  projectPath: string
+  onClose: () => void
+}
+
+/**
+ * Get file name from path
+ */
+function getFileName(filePath: string): string {
+  const parts = filePath.split("/")
+  return parts[parts.length - 1] || filePath
+}
+
+/**
+ * PdfViewer - Uses Chrome's native PDF viewer via iframe
+ */
+export function PdfViewer({
+  filePath,
+  projectPath,
+  onClose,
+}: PdfViewerProps) {
+  const fileName = getFileName(filePath)
+
+  // Build absolute path
+  const absolutePath = useMemo(() => {
+    return filePath.startsWith("/") ? filePath : `${projectPath}/${filePath}`
+  }, [filePath, projectPath])
+
+  // Use file:// protocol for local PDF
+  const pdfUrl = useMemo(() => {
+    return `file://${absolutePath}`
+  }, [absolutePath])
+
+  // Open in system viewer
+  const handleOpenExternal = () => {
+    window.desktopApi?.openPath(absolutePath)
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 h-10 border-b bg-background flex-shrink-0">
+        <div className="flex items-center gap-2 min-w-0 flex-1">
+          <FileText className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+          <span className="text-sm font-medium truncate" title={filePath}>
+            {fileName}
+          </span>
+        </div>
+        <div className="flex items-center gap-1 flex-shrink-0">
+          {/* Open externally */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={handleOpenExternal}
+              >
+                <ExternalLink className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Open in system viewer</TooltipContent>
+          </Tooltip>
+          {/* Close button */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* PDF iframe */}
+      <div className="flex-1 min-h-0">
+        <webview
+          src={pdfUrl}
+          className="w-full h-full"
+          style={{ display: "flex" }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/features/file-viewer/hooks/use-file-content.ts b/src/renderer/features/file-viewer/hooks/use-file-content.ts
new file mode 100644
index 00000000..a7ec6919
--- /dev/null
+++ b/src/renderer/features/file-viewer/hooks/use-file-content.ts
@@ -0,0 +1,179 @@
+import { useMemo, useEffect, useRef } from "react"
+import { trpc } from "../../../lib/trpc"
+
+/**
+ * Error reasons for file loading failures
+ */
+export type FileLoadError =
+  | "not-found"
+  | "too-large"
+  | "binary"
+  | "unknown"
+
+/**
+ * Result of file content loading
+ */
+export interface FileContentResult {
+  content: string | null
+  isLoading: boolean
+  error: FileLoadError | null
+  byteLength: number | null
+  refetch: () => void
+}
+
+/**
+ * Get user-friendly error message for file load errors
+ */
+export function getErrorMessage(error: FileLoadError): string {
+  switch (error) {
+    case "not-found":
+      return "File not found"
+    case "too-large":
+      return "File is too large to display (max 2 MB)"
+    case "binary":
+      return "Cannot display binary file"
+    case "unknown":
+    default:
+      return "Failed to load file"
+  }
+}
+
+/**
+ * Hook to fetch file content from the backend
+ * Uses the files.readTextFile procedure with absolute path
+ */
+export function useFileContent(
+  projectPath: string | null,
+  filePath: string | null,
+): FileContentResult {
+  // Build absolute path like DataViewerSidebar does
+  const absolutePath = useMemo(() => {
+    if (!projectPath || !filePath) return null
+    const path = filePath.startsWith("/")
+      ? filePath
+      : `${projectPath}/${filePath}`
+    // console.log("[useFileContent] Building path:", { projectPath, filePath, absolutePath: path })
+    return path
+  }, [projectPath, filePath])
+
+  const enabled = !!absolutePath
+
+  const { data, isLoading, error, refetch } = trpc.files.readTextFile.useQuery(
+    { filePath: absolutePath || "" },
+    {
+      enabled,
+      staleTime: 30000, // Cache for 30 seconds
+      refetchOnWindowFocus: false,
+    },
+  )
+
+  // Store refetch in a ref so subscription callback always has current refetch
+  const refetchRef = useRef(refetch)
+  useEffect(() => {
+    refetchRef.current = refetch
+  }, [refetch])
+
+  // Compute relative path for matching against file change events
+  const relativePath = useMemo(() => {
+    if (!projectPath || !filePath) return null
+    // If filePath is already relative, return it
+    if (!filePath.startsWith("/")) return filePath
+    // If filePath starts with projectPath, extract the relative part
+    // Ensure we match the full directory path by checking for trailing separator
+    const projectPathWithSep = projectPath.endsWith("/") ? projectPath : `${projectPath}/`
+    if (filePath.startsWith(projectPathWithSep)) {
+      return filePath.slice(projectPathWithSep.length)
+    }
+    // Handle exact match (filePath equals projectPath)
+    if (filePath === projectPath) {
+      return ""
+    }
+    return filePath
+  }, [projectPath, filePath])
+
+  // Subscribe to file changes and refetch when the viewed file changes
+  trpc.files.watchChanges.useSubscription(
+    { projectPath: projectPath || "" },
+    {
+      enabled: !!projectPath && !!relativePath,
+      onData: (change) => {
+        // Check if the changed file matches the one we're viewing
+        if (change.filename === relativePath) {
+          refetchRef.current()
+        }
+      },
+    },
+  )
+
+  // Return result based on query state
+  return useMemo((): FileContentResult => {
+    // console.log("[useFileContent] Computing result:", { enabled, isLoading, error, data })
+
+    if (!enabled) {
+      return {
+        content: null,
+        isLoading: false,
+        error: null,
+        byteLength: null,
+        refetch: () => {},
+      }
+    }
+
+    if (isLoading) {
+      return {
+        content: null,
+        isLoading: true,
+        error: null,
+        byteLength: null,
+        refetch,
+      }
+    }
+
+    if (error) {
+      console.error("[useFileContent] Query error:", error)
+      // Check if it's a file not found error
+      const errorMessage = error.message?.toLowerCase() || ""
+      const isNotFound = errorMessage.includes("enoent") ||
+                         errorMessage.includes("not found") ||
+                         errorMessage.includes("no such file")
+      return {
+        content: null,
+        isLoading: false,
+        error: isNotFound ? "not-found" : "unknown",
+        byteLength: null,
+        refetch,
+      }
+    }
+
+    if (!data) {
+      // console.log("[useFileContent] No data returned")
+      return {
+        content: null,
+        isLoading: false,
+        error: "unknown",
+        byteLength: null,
+        refetch,
+      }
+    }
+
+    if (data.ok) {
+      // console.log("[useFileContent] Success:", data.byteLength, "bytes")
+      return {
+        content: data.content,
+        isLoading: false,
+        error: null,
+        byteLength: data.byteLength,
+        refetch,
+      }
+    }
+
+    // console.log("[useFileContent] Server returned error:", data.reason)
+    return {
+      content: null,
+      isLoading: false,
+      error: data.reason as FileLoadError,
+      byteLength: null,
+      refetch,
+    }
+  }, [enabled, isLoading, error, data, refetch])
+}
diff --git a/src/renderer/features/file-viewer/index.ts b/src/renderer/features/file-viewer/index.ts
new file mode 100644
index 00000000..545ce326
--- /dev/null
+++ b/src/renderer/features/file-viewer/index.ts
@@ -0,0 +1,3 @@
+export { FileViewerSidebar } from "./components/file-viewer-sidebar"
+export { useFileContent, getErrorMessage, type FileLoadError } from "./hooks/use-file-content"
+export { getMonacoLanguage, isDataFile } from "./utils/language-map"
diff --git a/src/renderer/features/file-viewer/utils/file-utils.ts b/src/renderer/features/file-viewer/utils/file-utils.ts
new file mode 100644
index 00000000..f0b49971
--- /dev/null
+++ b/src/renderer/features/file-viewer/utils/file-utils.ts
@@ -0,0 +1,28 @@
+/**
+ * Shared utility functions for file viewers
+ */
+
+/**
+ * Get file name from path
+ */
+export function getFileName(filePath: string): string {
+  const parts = filePath.split("/")
+  return parts[parts.length - 1] || filePath
+}
+
+/**
+ * Format file size for display
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
+}
+
+/**
+ * Get file extension from path
+ */
+export function getFileExtension(filePath: string): string {
+  const parts = filePath.split(".")
+  return parts.length > 1 ? `.${parts[parts.length - 1].toLowerCase()}` : ""
+}
diff --git a/src/renderer/features/file-viewer/utils/language-map.ts b/src/renderer/features/file-viewer/utils/language-map.ts
new file mode 100644
index 00000000..086793dc
--- /dev/null
+++ b/src/renderer/features/file-viewer/utils/language-map.ts
@@ -0,0 +1,276 @@
+/**
+ * Map file extensions to Monaco Editor language IDs
+ * Monaco uses slightly different language IDs than Shiki in some cases
+ */
+
+// Extension to Monaco language ID mapping
+const extensionToMonacoLanguage: Record<string, string> = {
+  // JavaScript/TypeScript
+  ".ts": "typescript",
+  ".tsx": "typescript",
+  ".js": "javascript",
+  ".jsx": "javascript",
+  ".mjs": "javascript",
+  ".cjs": "javascript",
+  ".mts": "typescript",
+  ".cts": "typescript",
+
+  // Web
+  ".html": "html",
+  ".htm": "html",
+  ".css": "css",
+  ".scss": "scss",
+  ".less": "less",
+  ".vue": "html", // Monaco doesn't have Vue, use HTML
+  ".svelte": "html", // Monaco doesn't have Svelte, use HTML
+
+  // Data formats
+  ".json": "json",
+  ".jsonc": "json",
+  ".json5": "json",
+  ".yaml": "yaml",
+  ".yml": "yaml",
+  ".toml": "ini", // Monaco uses 'ini' for TOML-like formats
+  ".xml": "xml",
+  ".svg": "xml",
+
+  // Markdown
+  ".md": "markdown",
+  ".mdx": "markdown",
+  ".markdown": "markdown",
+
+  // Python
+  ".py": "python",
+  ".pyw": "python",
+  ".pyi": "python",
+
+  // Ruby
+  ".rb": "ruby",
+  ".rake": "ruby",
+  ".gemspec": "ruby",
+
+  // Go
+  ".go": "go",
+  ".mod": "go", // go.mod
+
+  // Rust
+  ".rs": "rust",
+
+  // Java/Kotlin
+  ".java": "java",
+  ".kt": "kotlin",
+  ".kts": "kotlin",
+
+  // Swift
+  ".swift": "swift",
+
+  // C/C++
+  ".c": "c",
+  ".h": "c",
+  ".cpp": "cpp",
+  ".cc": "cpp",
+  ".cxx": "cpp",
+  ".hpp": "cpp",
+  ".hxx": "cpp",
+  ".hh": "cpp",
+
+  // C#
+  ".cs": "csharp",
+
+  // PHP
+  ".php": "php",
+  ".phtml": "php",
+
+  // SQL
+  ".sql": "sql",
+
+  // Shell
+  ".sh": "shell",
+  ".bash": "shell",
+  ".zsh": "shell",
+  ".fish": "shell",
+  ".ps1": "powershell",
+  ".psm1": "powershell",
+
+  // GraphQL
+  ".graphql": "graphql",
+  ".gql": "graphql",
+
+  // Docker
+  ".dockerfile": "dockerfile",
+
+  // Config files
+  ".ini": "ini",
+  ".conf": "ini",
+  ".cfg": "ini",
+  ".properties": "ini",
+
+  // Lua
+  ".lua": "lua",
+
+  // R
+  ".r": "r",
+  ".R": "r",
+
+  // Perl
+  ".pl": "perl",
+  ".pm": "perl",
+
+  // Clojure
+  ".clj": "clojure",
+  ".cljs": "clojure",
+  ".cljc": "clojure",
+  ".edn": "clojure",
+
+  // Elixir/Erlang
+  ".ex": "elixir",
+  ".exs": "elixir",
+  ".erl": "erlang",
+
+  // Haskell
+  ".hs": "haskell",
+
+  // Scala
+  ".scala": "scala",
+  ".sc": "scala",
+
+  // F#
+  ".fs": "fsharp",
+  ".fsx": "fsharp",
+
+  // Objective-C
+  ".m": "objective-c",
+  ".mm": "objective-c",
+
+  // Dart
+  ".dart": "dart",
+
+  // Plain text / config
+  ".txt": "plaintext",
+  ".log": "plaintext",
+  ".gitignore": "plaintext",
+  ".gitattributes": "plaintext",
+  ".env": "plaintext",
+  ".env.local": "plaintext",
+  ".env.development": "plaintext",
+  ".env.production": "plaintext",
+  ".editorconfig": "ini",
+  ".prettierrc": "json",
+  ".eslintrc": "json",
+  ".babelrc": "json",
+
+  // Diff/Patch
+  ".diff": "plaintext",
+  ".patch": "plaintext",
+}
+
+// Special filename mappings (no extension or special names)
+const filenameToMonacoLanguage: Record<string, string> = {
+  "dockerfile": "dockerfile",
+  "Dockerfile": "dockerfile",
+  "makefile": "makefile",
+  "Makefile": "makefile",
+  "GNUmakefile": "makefile",
+  "CMakeLists.txt": "cmake",
+  "Gemfile": "ruby",
+  "Rakefile": "ruby",
+  "Vagrantfile": "ruby",
+  "Podfile": "ruby",
+  ".gitignore": "plaintext",
+  ".gitattributes": "plaintext",
+  ".dockerignore": "plaintext",
+  ".npmignore": "plaintext",
+  ".prettierignore": "plaintext",
+  ".eslintignore": "plaintext",
+  "package.json": "json",
+  "tsconfig.json": "json",
+  "jsconfig.json": "json",
+  ".prettierrc": "json",
+  ".eslintrc": "json",
+  ".babelrc": "json",
+}
+
+/**
+ * Get Monaco Editor language ID from file path
+ */
+export function getMonacoLanguage(filePath: string): string {
+  // Get filename from path
+  const filename = filePath.split("/").pop() || filePath
+
+  // Check special filenames first
+  if (filenameToMonacoLanguage[filename]) {
+    return filenameToMonacoLanguage[filename]
+  }
+
+  // Check extension
+  const ext = filename.toLowerCase().match(/\.[^.]+$/)?.[0] || ""
+  if (extensionToMonacoLanguage[ext]) {
+    return extensionToMonacoLanguage[ext]
+  }
+
+  return "plaintext"
+}
+
+/**
+ * Check if a file is a data file (should open in Data Viewer instead)
+ */
+export function isDataFile(filePath: string): boolean {
+  const ext = filePath.toLowerCase().match(/\.[^.]+$/)?.[0] || ""
+  const dataExtensions = [
+    ".csv",
+    ".tsv",
+    ".db",
+    ".sqlite",
+    ".sqlite3",
+    ".parquet",
+    ".pq",
+    ".xlsx",
+    ".xls",
+    ".arrow",
+    ".feather",
+    ".ipc",
+  ]
+  return dataExtensions.includes(ext)
+}
+
+/**
+ * File viewer type - determines which viewer component to use
+ */
+export type FileViewerType = "code" | "image" | "markdown" | "unsupported"
+
+/**
+ * Image file extensions
+ */
+const IMAGE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".ico", ".bmp"]
+
+/**
+ * Binary/unsupported file extensions
+ */
+const UNSUPPORTED_EXTENSIONS = [".pdf", ".exe", ".dll", ".so", ".dylib", ".bin", ".dat", ".zip", ".tar", ".gz", ".7z", ".rar"]
+
+/**
+ * Get the appropriate viewer type for a file
+ */
+export function getFileViewerType(filePath: string): FileViewerType {
+  const ext = filePath.toLowerCase().match(/\.[^.]+$/)?.[0] || ""
+
+  if (IMAGE_EXTENSIONS.includes(ext)) {
+    return "image"
+  }
+  if (UNSUPPORTED_EXTENSIONS.includes(ext)) {
+    return "unsupported"
+  }
+  if ([".md", ".mdx", ".markdown"].includes(ext)) {
+    return "markdown"
+  }
+  // HTML files are shown as code (iframe preview has CSP issues in Electron)
+  return "code"
+}
+
+/**
+ * Check if a file is an image
+ */
+export function isImageFile(filePath: string): boolean {
+  const ext = filePath.toLowerCase().match(/\.[^.]+$/)?.[0] || ""
+  return IMAGE_EXTENSIONS.includes(ext)
+}
diff --git a/src/renderer/features/sidebar/agents-sidebar.tsx b/src/renderer/features/sidebar/agents-sidebar.tsx
index 12226a42..a5e699e2 100644
--- a/src/renderer/features/sidebar/agents-sidebar.tsx
+++ b/src/renderer/features/sidebar/agents-sidebar.tsx
@@ -1264,7 +1264,7 @@ const SidebarHeader = memo(function SidebarHeader({
                     </div>
                     <div className="min-w-0 flex-1 overflow-hidden">
                       <div className="text-sm font-medium text-foreground truncate">
-                        1Code
+                        Crunch
                       </div>
                     </div>
                     {showOfflineFeatures && (
diff --git a/src/renderer/icons/framework-icons.tsx b/src/renderer/icons/framework-icons.tsx
index 584dbc3f..fdd72bbc 100644
--- a/src/renderer/icons/framework-icons.tsx
+++ b/src/renderer/icons/framework-icons.tsx
@@ -1184,6 +1184,119 @@ export function GitHubIcon({ className }: FrameworkIconProps) {
   )
 }
 
+// CSV/TSV - Green spreadsheet icon #22c55e
+export function CSVIcon({ className }: FrameworkIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn("w-4 h-4", className)}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z"
+        stroke="#22c55e"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M14 2V8H20" stroke="#22c55e" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M8 13H16" stroke="#22c55e" strokeWidth="2" strokeLinecap="round" />
+      <path d="M8 17H16" stroke="#22c55e" strokeWidth="2" strokeLinecap="round" />
+      <path d="M12 13V17" stroke="#22c55e" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+// SQLite/Database - Blue database icon #3b82f6
+export function SQLiteIcon({ className }: FrameworkIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn("w-4 h-4", className)}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <ellipse cx="12" cy="5" rx="8" ry="3" stroke="#3b82f6" strokeWidth="2" />
+      <path d="M4 5V19C4 20.6569 7.58172 22 12 22C16.4183 22 20 20.6569 20 19V5" stroke="#3b82f6" strokeWidth="2" />
+      <path d="M4 12C4 13.6569 7.58172 15 12 15C16.4183 15 20 13.6569 20 12" stroke="#3b82f6" strokeWidth="2" />
+    </svg>
+  )
+}
+
+// Parquet - Purple columnar data icon #a855f7
+export function ParquetIcon({ className }: FrameworkIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn("w-4 h-4", className)}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="3" y="3" width="5" height="18" rx="1" stroke="#a855f7" strokeWidth="2" />
+      <rect x="10" y="3" width="5" height="18" rx="1" stroke="#a855f7" strokeWidth="2" />
+      <rect x="17" y="3" width="4" height="18" rx="1" stroke="#a855f7" strokeWidth="2" />
+    </svg>
+  )
+}
+
+// Excel - Emerald spreadsheet icon #059669
+export function ExcelIcon({ className }: FrameworkIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn("w-4 h-4", className)}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z"
+        stroke="#059669"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M14 2V8H20" stroke="#059669" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M9 15L15 15" stroke="#059669" strokeWidth="2" strokeLinecap="round" />
+      <path d="M9 12L15 18" stroke="#059669" strokeWidth="2" strokeLinecap="round" />
+      <path d="M15 12L9 18" stroke="#059669" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+// Apache Arrow - Orange arrow icon #f97316
+export function ArrowDataIcon({ className }: FrameworkIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn("w-4 h-4", className)}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 12H19"
+        stroke="#f97316"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 5L19 12L12 19"
+        stroke="#f97316"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 5V19"
+        stroke="#f97316"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
 // Map language/framework to icon component
 export function getFrameworkIcon(
   language?: string | null,
@@ -1380,7 +1493,7 @@ export function getDetectedFrameworkIcon(
     }
   }
 
-  // Return 21st.dev logo as final fallback
+  // Return Crunch logo as final fallback
   return <CodeIcon className={className} />
 }
 
@@ -1419,7 +1532,7 @@ export function PDFIcon({ className }: FrameworkIconProps) {
   )
 }
 
-// Default/Unknown - 21st.dev logo (same as canvas sidebar placeholder)
+// Default/Unknown - Crunch logo (same as canvas sidebar placeholder)
 export function CodeIcon({ className }: FrameworkIconProps) {
   return (
     <svg
@@ -1427,7 +1540,7 @@ export function CodeIcon({ className }: FrameworkIconProps) {
       className={cn("w-4 h-4 text-muted-foreground", className)}
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
-      aria-label="21st.dev Logo"
+      aria-label="Crunch Logo"
     >
       <path
         fillRule="evenodd"
@@ -1437,3 +1550,157 @@ export function CodeIcon({ className }: FrameworkIconProps) {
     </svg>
   )
 }
+
+// Image Icon - Picture/photo icon
+export function ImageFileIcon({ className }: FrameworkIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn("w-4 h-4", className)}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="3" y="3" width="18" height="18" rx="2" fill="#4CAF50" />
+      <circle cx="8.5" cy="8.5" r="2" fill="#FFF59D" />
+      <path
+        d="M21 15L16.5 10.5C16.1 10.1 15.5 10.1 15.1 10.5L10 15.6L8.4 14C8 13.6 7.4 13.6 7 14L3 18V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V15Z"
+        fill="#81C784"
+      />
+    </svg>
+  )
+}
+
+// Word Icon - Blue document with W
+export function WordIcon({ className }: FrameworkIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn("w-4 h-4", className)}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 2H17C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V4C5 2.89543 5.89543 2 7 2Z"
+        fill="#2196F3"
+      />
+      <path
+        d="M8 8L10 16L12 10L14 16L16 8"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+// PowerPoint Icon - Orange/red document with P
+export function PowerPointIcon({ className }: FrameworkIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn("w-4 h-4", className)}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 2H17C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V4C5 2.89543 5.89543 2 7 2Z"
+        fill="#FF5722"
+      />
+      <path
+        d="M9 7V17M9 7H13C14.6569 7 16 8.34315 16 10C16 11.6569 14.6569 13 13 13H9"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+// Git Icon - Orange Git logo for .gitignore and git-related files
+export function GitIcon({ className }: FrameworkIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn("w-4 h-4", className)}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.635 11.455L12.545 2.365C12.0625 1.8825 11.2825 1.8825 10.8 2.365L8.6775 4.4875L11.4 7.21C11.935 7.0325 12.5475 7.1425 12.975 7.57C13.405 8 13.5125 8.6175 13.33 9.155L15.945 11.77C16.4825 11.5875 17.1 11.695 17.53 12.125C18.1475 12.7425 18.1475 13.745 17.53 14.3625C16.9125 14.98 15.91 14.98 15.2925 14.3625C14.8375 13.9075 14.74 13.24 14.97 12.68L12.525 10.235L12.525 15.51C12.68 15.5875 12.8275 15.69 12.9625 15.825C13.58 16.4425 13.58 17.445 12.9625 18.0625C12.345 18.68 11.3425 18.68 10.725 18.0625C10.1075 17.445 10.1075 16.4425 10.725 15.825C10.89 15.66 11.08 15.535 11.285 15.45V10.1275C11.08 10.0425 10.89 9.9175 10.725 9.7525C10.265 9.2925 10.17 8.6175 10.41 8.0525L7.74 5.3825L2.365 10.7575C1.8825 11.24 1.8825 12.02 2.365 12.5025L11.455 21.5925C11.9375 22.075 12.7175 22.075 13.2 21.5925L21.635 13.1575C22.1175 12.675 22.1175 11.9375 21.635 11.455Z"
+        fill="#F05032"
+      />
+    </svg>
+  )
+}
+
+// Lock Icon - For lock files (package-lock.json, yarn.lock, etc.)
+export function LockFileIcon({ className }: FrameworkIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn("w-4 h-4", className)}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="5"
+        y="10"
+        width="14"
+        height="11"
+        rx="2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        className="text-amber-500"
+      />
+      <path
+        d="M8 10V7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7V10"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        className="text-amber-500"
+      />
+      <circle cx="12" cy="15" r="1.5" fill="currentColor" className="text-amber-500" />
+      <path d="M12 16.5V18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-amber-500" />
+    </svg>
+  )
+}
+
+// License Icon - Document with seal/checkmark for LICENSE files
+export function LicenseIcon({ className }: FrameworkIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn("w-4 h-4", className)}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="text-purple-500"
+      />
+      <path
+        d="M14 2V8H20"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="text-purple-500"
+      />
+      <circle cx="12" cy="14" r="3" stroke="currentColor" strokeWidth="1.5" className="text-purple-500" />
+      <path
+        d="M10.5 14L11.5 15L13.5 13"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="text-purple-500"
+      />
+    </svg>
+  )
+}
diff --git a/src/renderer/index.html b/src/renderer/index.html
index c816b405..ea3a4e96 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://unpkg.com https://*.posthog.com https://*.i.posthog.com; style-src 'self' 'unsafe-inline'; connect-src 'self' ws://localhost:* http://localhost:* https://unpkg.com https://21st.dev https://*.21st.dev https://*.posthog.com https://*.i.posthog.com; img-src 'self' data: blob: https:; media-src 'self' blob:;" />
-    <title>1Code</title>
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://unpkg.com https://*.posthog.com https://*.i.posthog.com; style-src 'self' 'unsafe-inline'; connect-src 'self' ws://localhost:* http://localhost:* https://unpkg.com https://getcrunch.dev https://*.getcrunch.dev https://*.posthog.com https://*.i.posthog.com; img-src 'self' data: blob: https:; media-src 'self' blob:;" />
+    <title>Crunch</title>
     <!-- Prevent theme flash: detect system/stored theme before render -->
     <script>
       (function() {
diff --git a/src/renderer/lib/analytics.ts b/src/renderer/lib/analytics.ts
index 8e8a7351..c2f0d016 100644
--- a/src/renderer/lib/analytics.ts
+++ b/src/renderer/lib/analytics.ts
@@ -1,5 +1,5 @@
 /**
- * PostHog analytics for 1Code Desktop - Renderer Process
+ * PostHog analytics for Crunch Desktop - Renderer Process
  * Uses PostHog JS SDK for client-side tracking
  */
 
diff --git a/src/renderer/lib/api-fetch.ts b/src/renderer/lib/api-fetch.ts
index 846c3e69..f7166c40 100644
--- a/src/renderer/lib/api-fetch.ts
+++ b/src/renderer/lib/api-fetch.ts
@@ -10,7 +10,7 @@ let cachedBaseUrl: string | null = null
 
 /**
  * Get the API base URL (cached after first call)
- * Always returns https://21st.dev (both in dev and production)
+ * Always returns https://getcrunch.dev (both in dev and production)
  */
 export async function getApiBaseUrl(): Promise<string> {
   if (cachedBaseUrl) return cachedBaseUrl
diff --git a/src/renderer/lib/atoms/index.ts b/src/renderer/lib/atoms/index.ts
index e66b515e..fba37b1b 100644
--- a/src/renderer/lib/atoms/index.ts
+++ b/src/renderer/lib/atoms/index.ts
@@ -516,7 +516,7 @@ export const selectedFullThemeIdAtom = atomWithStorage<string | null>(
  */
 export const systemLightThemeIdAtom = atomWithStorage<string>(
   "preferences:system-light-theme-id",
-  "21st-light", // Default light theme
+  "crunch-light", // Default light theme
   undefined,
   { getOnInit: true },
 )
@@ -526,7 +526,7 @@ export const systemLightThemeIdAtom = atomWithStorage<string>(
  */
 export const systemDarkThemeIdAtom = atomWithStorage<string>(
   "preferences:system-dark-theme-id",
-  "21st-dark", // Default dark theme
+  "crunch-dark", // Default dark theme
   undefined,
   { getOnInit: true },
 )
@@ -689,7 +689,7 @@ export const billingMethodAtom = atomWithStorage<BillingMethod>(
 )
 
 // Whether user has completed Anthropic OAuth during onboarding
-// This is used to show the onboarding screen after 21st.dev sign-in
+// This is used to show the onboarding screen after getcrunch.dev sign-in
 // Reset on logout
 export const anthropicOnboardingCompletedAtom = atomWithStorage<boolean>(
   "onboarding:anthropic-completed",
@@ -735,7 +735,7 @@ export type SessionInfo = {
 // Persisted to localStorage so MCP tools are visible after page refresh
 // Updated when a new chat session starts
 export const sessionInfoAtom = atomWithStorage<SessionInfo | null>(
-  "21st-session-info",
+  "crunch-session-info",
   null,
   undefined,
   { getOnInit: true },
diff --git a/src/renderer/lib/hooks/use-just-updated.ts b/src/renderer/lib/hooks/use-just-updated.ts
index 45def4f0..fa175a15 100644
--- a/src/renderer/lib/hooks/use-just-updated.ts
+++ b/src/renderer/lib/hooks/use-just-updated.ts
@@ -52,7 +52,7 @@ export function useJustUpdated() {
     if (api) {
       // Link to changelog with anchor to current version
       const version = justUpdatedVersion ? `#v${justUpdatedVersion}` : ""
-      api.openExternal(`https://1code.dev/changelog${version}`)
+      api.openExternal(`https://getcrunch.dev/changelog${version}`)
     }
     dismissJustUpdated()
   }, [justUpdatedVersion, dismissJustUpdated])
diff --git a/src/renderer/lib/remote-api.ts b/src/renderer/lib/remote-api.ts
index 6474a1cd..75a18275 100644
--- a/src/renderer/lib/remote-api.ts
+++ b/src/renderer/lib/remote-api.ts
@@ -9,7 +9,7 @@ let API_BASE: string | null = null
 
 async function getApiBase(): Promise<string> {
   if (!API_BASE) {
-    API_BASE = await window.desktopApi?.getApiBaseUrl() || "https://21st.dev"
+    API_BASE = await window.desktopApi?.getApiBaseUrl() || "https://getcrunch.dev"
   }
   return API_BASE
 }
diff --git a/src/renderer/lib/remote-trpc.ts b/src/renderer/lib/remote-trpc.ts
index fc76749d..778e3c51 100644
--- a/src/renderer/lib/remote-trpc.ts
+++ b/src/renderer/lib/remote-trpc.ts
@@ -1,5 +1,5 @@
 /**
- * tRPC client for remote web backend (21st.dev)
+ * tRPC client for remote web backend (getcrunch.dev)
  * Uses signedFetch via IPC for authentication (no CORS issues)
  */
 import { createTRPCClient, httpLink } from "@trpc/client"
@@ -14,7 +14,7 @@ let cachedApiBase: string | null = null
 
 async function getApiBase(): Promise<string> {
   if (!cachedApiBase) {
-    cachedApiBase = await window.desktopApi?.getApiBaseUrl() || "https://21st.dev"
+    cachedApiBase = await window.desktopApi?.getApiBaseUrl() || "https://getcrunch.dev"
   }
   return cachedApiBase
 }
diff --git a/src/renderer/lib/themes/builtin-themes.ts b/src/renderer/lib/themes/builtin-themes.ts
index dc3d0017..48157100 100644
--- a/src/renderer/lib/themes/builtin-themes.ts
+++ b/src/renderer/lib/themes/builtin-themes.ts
@@ -9,12 +9,12 @@ import type { VSCodeFullTheme } from "../atoms"
 import { CURSOR_DARK, CURSOR_LIGHT, CURSOR_MIDNIGHT } from "./cursor-themes"
 
 /**
- * 21st Dark - Default dark theme matching the app's original design
+ * Crunch Dark - Default dark theme matching the app's original design
  * Uses the brand blue (#0034FF) as primary/accent color
  */
 const TWENTYFIRST_DARK: VSCodeFullTheme = {
-  id: "21st-dark",
-  name: "21st Dark",
+  id: "crunch-dark",
+  name: "Crunch Dark",
   type: "dark",
   source: "builtin",
   colors: {
@@ -73,12 +73,12 @@ const TWENTYFIRST_DARK: VSCodeFullTheme = {
 }
 
 /**
- * 21st Light - Default light theme matching the app's original design
+ * Crunch Light - Default light theme matching the app's original design
  * Uses the brand blue (#0034FF) as primary/accent color
  */
 const TWENTYFIRST_LIGHT: VSCodeFullTheme = {
-  id: "21st-light",
-  name: "21st Light",
+  id: "crunch-light",
+  name: "Crunch Light",
   type: "light",
   source: "builtin",
   colors: {
@@ -591,7 +591,7 @@ const CLAUDE_DARK: VSCodeFullTheme = {
  * All built-in themes
  */
 export const BUILTIN_THEMES: VSCodeFullTheme[] = [
-  // 21st Default themes (first)
+  // Crunch Default themes (first)
   TWENTYFIRST_DARK,
   TWENTYFIRST_LIGHT,
   // Cursor themes
@@ -626,8 +626,8 @@ export function getBuiltinThemesByType(type: "light" | "dark"): VSCodeFullTheme[
 /**
  * Default theme IDs for light/dark modes
  */
-export const DEFAULT_LIGHT_THEME_ID = "21st-light"
-export const DEFAULT_DARK_THEME_ID = "21st-dark"
+export const DEFAULT_LIGHT_THEME_ID = "crunch-light"
+export const DEFAULT_DARK_THEME_ID = "crunch-dark"
 
 /**
  * Set of builtin theme names (lowercase) for filtering discovered themes
diff --git a/src/renderer/lib/themes/diff-view-highlighter.ts b/src/renderer/lib/themes/diff-view-highlighter.ts
index d22d6023..4ed9c620 100644
--- a/src/renderer/lib/themes/diff-view-highlighter.ts
+++ b/src/renderer/lib/themes/diff-view-highlighter.ts
@@ -24,8 +24,8 @@ const SHIKI_THEMES: BundledTheme[] = [
  * Map our custom theme IDs to Shiki bundled themes
  */
 const THEME_TO_SHIKI_MAP: Record<string, BundledTheme> = {
-  "21st-dark": "github-dark",
-  "21st-light": "github-light",
+  "crunch-dark": "github-dark",
+  "crunch-light": "github-light",
   "claude-dark": "github-dark",
   "claude-light": "github-light",
   "vesper-dark": "vesper",
@@ -87,7 +87,7 @@ export type DiffHighlighter = {
 }
 
 // Current theme state - updated by the component
-let currentThemeId: string = "21st-dark"
+let currentThemeId: string = "crunch-dark"
 
 /**
  * Set the current theme ID for highlighting
diff --git a/src/renderer/lib/themes/shiki-theme-loader.ts b/src/renderer/lib/themes/shiki-theme-loader.ts
index 6c77e58b..c469825c 100644
--- a/src/renderer/lib/themes/shiki-theme-loader.ts
+++ b/src/renderer/lib/themes/shiki-theme-loader.ts
@@ -92,9 +92,9 @@ const DEFAULT_THEMES: shiki.BundledTheme[] = [
  * Only themes WITHOUT tokenColors need mapping - themes with tokenColors use their own
  */
 const THEME_TO_SHIKI_MAP: Record<string, shiki.BundledTheme> = {
-  // 21st themes use GitHub themes (no tokenColors)
-  "21st-dark": "github-dark",
-  "21st-light": "github-light",
+  // Crunch themes use GitHub themes (no tokenColors)
+  "crunch-dark": "github-dark",
+  "crunch-light": "github-light",
   // Claude themes use GitHub themes (no tokenColors)
   "claude-dark": "github-dark",
   "claude-light": "github-light",
diff --git a/src/renderer/lib/utils/path.ts b/src/renderer/lib/utils/path.ts
new file mode 100644
index 00000000..8a10270b
--- /dev/null
+++ b/src/renderer/lib/utils/path.ts
@@ -0,0 +1,42 @@
+/**
+ * Simple path utilities for the renderer process
+ * These work with forward slashes (Unix-style paths)
+ */
+
+/**
+ * Join path segments with forward slashes
+ */
+export function join(...segments: string[]): string {
+  return segments
+    .filter(Boolean)
+    .join("/")
+    .replace(/\/+/g, "/")
+}
+
+/**
+ * Get the base name (last segment) of a path
+ */
+export function basename(path: string): string {
+  const segments = path.split("/").filter(Boolean)
+  return segments[segments.length - 1] || ""
+}
+
+/**
+ * Get the directory name (all but last segment) of a path
+ */
+export function dirname(path: string): string {
+  const segments = path.split("/").filter(Boolean)
+  if (segments.length <= 1) return "."
+  segments.pop()
+  return segments.join("/")
+}
+
+/**
+ * Get the file extension including the dot
+ */
+export function extname(path: string): string {
+  const name = basename(path)
+  const lastDot = name.lastIndexOf(".")
+  if (lastDot <= 0) return ""
+  return name.slice(lastDot)
+}
diff --git a/src/renderer/login.html b/src/renderer/login.html
index 6ee59894..6a2607dc 100644
--- a/src/renderer/login.html
+++ b/src/renderer/login.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">
-    <title>21st - Login</title>
+    <title>Crunch - Login</title>
     <style>
       * {
         margin: 0;