chore: upgrade better-sqlite to latest version to support node 25 (#445)

Co-authored-by: Haileyesus <something@gmail.com>
Co-authored-by: viper151 <simosmik@gmail.com>

README.md

@@ -6,6 +6,7 @@
 
 A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Cursor CLI](https://docs.cursor.com/en/cli/overview) and [Codex](https://developers.openai.com/codex). You can use it locally or remotely to view your active projects and sessions in Claude Code, Cursor, or Codex and make changes to them from everywhere (mobile or desktop). This gives you a proper interface that works everywhere. 
 
+<a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 <div align="right"><i><b>English</b> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
 
 ## Screenshots

package-lock.json

@@ -31,7 +31,7 @@
         "@xterm/addon-webgl": "^0.18.0",
         "@xterm/xterm": "^5.5.0",
         "bcrypt": "^6.0.0",
-        "better-sqlite3": "^12.2.0",
+        "better-sqlite3": "^12.6.2",
         "chokidar": "^4.0.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -52,6 +52,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
+        "react-error-boundary": "^4.1.2",
         "react-i18next": "^16.5.3",
         "react-markdown": "^10.1.0",
         "react-router-dom": "^6.8.1",
@@ -3777,9 +3778,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/better-sqlite3": {
-      "version": "12.2.0",
-      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-12.2.0.tgz",
-      "integrity": "sha512-eGbYq2CT+tos1fBwLQ/tkBt9J5M3JEHjku4hbvQUePCckkvVf14xWj+1m7dGoK81M/fOjFT7yM9UMeKT/+vFLQ==",
+      "version": "12.6.2",
+      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-12.6.2.tgz",
+      "integrity": "sha512-8VYKM3MjCa9WcaSAI3hzwhmyHVlH8tiGFwf0RlTsZPWJ1I5MkzjiudCo4KC4DxOaL/53A5B1sI/IbldNFDbsKA==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -3787,7 +3788,7 @@
         "prebuild-install": "^7.1.1"
       },
       "engines": {
-        "node": "20.x || 22.x || 23.x || 24.x"
+        "node": "20.x || 22.x || 23.x || 24.x || 25.x"
       }
     },
     "node_modules/binary-extensions": {
@@ -9834,6 +9835,18 @@
         "react": ">= 16.8 || 18.0.0"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.2.tgz",
+      "integrity": "sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-i18next": {
       "version": "16.5.3",
       "resolved": "https://registry.npmmirror.com/react-i18next/-/react-i18next-16.5.3.tgz",

package.json

@@ -66,7 +66,7 @@
     "@xterm/addon-webgl": "^0.18.0",
     "@xterm/xterm": "^5.5.0",
     "bcrypt": "^6.0.0",
-    "better-sqlite3": "^12.2.0",
+    "better-sqlite3": "^12.6.2",
     "chokidar": "^4.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -87,6 +87,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-error-boundary": "^4.1.2",
     "react-i18next": "^16.5.3",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.8.1",

server/index.js

@@ -1138,7 +1138,7 @@ function handleShellConnection(ws) {
                 if (isPlainShell) {
                     welcomeMsg = `\x1b[36mStarting terminal in: ${projectPath}\x1b[0m\r\n`;
                 } else {
-                    const providerName = provider === 'cursor' ? 'Cursor' : 'Claude';
+                    const providerName = provider === 'cursor' ? 'Cursor' : provider === 'codex' ? 'Codex' : 'Claude';
                     welcomeMsg = hasSession ?
                         `\x1b[36mResuming ${providerName} session ${sessionId} in: ${projectPath}\x1b[0m\r\n` :
                         `\x1b[36mStarting new ${providerName} session in: ${projectPath}\x1b[0m\r\n`;
@@ -1174,6 +1174,23 @@ function handleShellConnection(ws) {
                                 shellCommand = `cd "${projectPath}" && cursor-agent`;
                             }
                         }
+                    } else if (provider === 'codex') {
+                        // Use codex command
+                        if (os.platform() === 'win32') {
+                            if (hasSession && sessionId) {
+                                // Try to resume session, but with fallback to a new session if it fails
+                                shellCommand = `Set-Location -Path "${projectPath}"; codex resume "${sessionId}"; if ($LASTEXITCODE -ne 0) { codex }`;
+                            } else {
+                                shellCommand = `Set-Location -Path "${projectPath}"; codex`;
+                            }
+                        } else {
+                            if (hasSession && sessionId) {
+                                // Try to resume session, but with fallback to a new session if it fails
+                                shellCommand = `cd "${projectPath}" && codex resume "${sessionId}" || codex`;
+                            } else {
+                                shellCommand = `cd "${projectPath}" && codex`;
+                            }
+                        }
                     } else {
                         // Use claude command (default) or initialCommand if provided
                         const command = initialCommand || 'claude';

src/components/ApiKeysSettings.jsx

@@ -1,373 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Key, Plus, Trash2, Eye, EyeOff, Copy, Check, Github } from 'lucide-react';
-import { authenticatedFetch } from '../utils/api';
-import { useTranslation } from 'react-i18next';
-
-function ApiKeysSettings() {
-  const { t } = useTranslation('settings');
-  const [apiKeys, setApiKeys] = useState([]);
-  const [githubTokens, setGithubTokens] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [showNewKeyForm, setShowNewKeyForm] = useState(false);
-  const [showNewTokenForm, setShowNewTokenForm] = useState(false);
-  const [newKeyName, setNewKeyName] = useState('');
-  const [newTokenName, setNewTokenName] = useState('');
-  const [newGithubToken, setNewGithubToken] = useState('');
-  const [showToken, setShowToken] = useState({});
-  const [copiedKey, setCopiedKey] = useState(null);
-  const [newlyCreatedKey, setNewlyCreatedKey] = useState(null);
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    try {
-      setLoading(true);
-
-      // Fetch API keys
-      const apiKeysRes = await authenticatedFetch('/api/settings/api-keys');
-      const apiKeysData = await apiKeysRes.json();
-      setApiKeys(apiKeysData.apiKeys || []);
-
-      // Fetch GitHub tokens
-      const githubRes = await authenticatedFetch('/api/settings/credentials?type=github_token');
-      const githubData = await githubRes.json();
-      setGithubTokens(githubData.credentials || []);
-    } catch (error) {
-      console.error('Error fetching settings:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const createApiKey = async () => {
-    if (!newKeyName.trim()) return;
-
-    try {
-      const res = await authenticatedFetch('/api/settings/api-keys', {
-        method: 'POST',
-        body: JSON.stringify({ keyName: newKeyName })
-      });
-
-      const data = await res.json();
-      if (data.success) {
-        setNewlyCreatedKey(data.apiKey);
-        setNewKeyName('');
-        setShowNewKeyForm(false);
-        fetchData();
-      }
-    } catch (error) {
-      console.error('Error creating API key:', error);
-    }
-  };
-
-  const deleteApiKey = async (keyId) => {
-    if (!confirm(t('apiKeys.confirmDelete'))) return;
-
-    try {
-      await authenticatedFetch(`/api/settings/api-keys/${keyId}`, {
-        method: 'DELETE'
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error deleting API key:', error);
-    }
-  };
-
-  const toggleApiKey = async (keyId, isActive) => {
-    try {
-      await authenticatedFetch(`/api/settings/api-keys/${keyId}/toggle`, {
-        method: 'PATCH',
-        body: JSON.stringify({ isActive: !isActive })
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error toggling API key:', error);
-    }
-  };
-
-  const createGithubToken = async () => {
-    if (!newTokenName.trim() || !newGithubToken.trim()) return;
-
-    try {
-      const res = await authenticatedFetch('/api/settings/credentials', {
-        method: 'POST',
-        body: JSON.stringify({
-          credentialName: newTokenName,
-          credentialType: 'github_token',
-          credentialValue: newGithubToken
-        })
-      });
-
-      const data = await res.json();
-      if (data.success) {
-        setNewTokenName('');
-        setNewGithubToken('');
-        setShowNewTokenForm(false);
-        fetchData();
-      }
-    } catch (error) {
-      console.error('Error creating GitHub token:', error);
-    }
-  };
-
-  const deleteGithubToken = async (tokenId) => {
-    if (!confirm(t('apiKeys.github.confirmDelete'))) return;
-
-    try {
-      await authenticatedFetch(`/api/settings/credentials/${tokenId}`, {
-        method: 'DELETE'
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error deleting GitHub token:', error);
-    }
-  };
-
-  const toggleGithubToken = async (tokenId, isActive) => {
-    try {
-      await authenticatedFetch(`/api/settings/credentials/${tokenId}/toggle`, {
-        method: 'PATCH',
-        body: JSON.stringify({ isActive: !isActive })
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error toggling GitHub token:', error);
-    }
-  };
-
-  const copyToClipboard = (text, id) => {
-    navigator.clipboard.writeText(text);
-    setCopiedKey(id);
-    setTimeout(() => setCopiedKey(null), 2000);
-  };
-
-  if (loading) {
-    return <div className="text-muted-foreground">{t('apiKeys.loading')}</div>;
-  }
-
-  return (
-    <div className="space-y-8">
-      {/* New API Key Alert */}
-      {newlyCreatedKey && (
-        <div className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
-          <h4 className="font-semibold text-yellow-500 mb-2">{t('apiKeys.newKey.alertTitle')}</h4>
-          <p className="text-sm text-muted-foreground mb-3">
-            {t('apiKeys.newKey.alertMessage')}
-          </p>
-          <div className="flex items-center gap-2">
-            <code className="flex-1 px-3 py-2 bg-background/50 rounded font-mono text-sm break-all">
-              {newlyCreatedKey.apiKey}
-            </code>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => copyToClipboard(newlyCreatedKey.apiKey, 'new')}
-            >
-              {copiedKey === 'new' ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-            </Button>
-          </div>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="mt-3"
-            onClick={() => setNewlyCreatedKey(null)}
-          >
-            {t('apiKeys.newKey.iveSavedIt')}
-          </Button>
-        </div>
-      )}
-
-      {/* API Keys Section */}
-      <div>
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Key className="h-5 w-5" />
-            <h3 className="text-lg font-semibold">{t('apiKeys.title')}</h3>
-          </div>
-          <Button
-            size="sm"
-            onClick={() => setShowNewKeyForm(!showNewKeyForm)}
-          >
-            <Plus className="h-4 w-4 mr-1" />
-            {t('apiKeys.newButton')}
-          </Button>
-        </div>
-
-        <p className="text-sm text-muted-foreground mb-4">
-          {t('apiKeys.description')}
-        </p>
-
-        {showNewKeyForm && (
-          <div className="mb-4 p-4 border rounded-lg bg-card">
-            <Input
-              placeholder={t('apiKeys.form.placeholder')}
-              value={newKeyName}
-              onChange={(e) => setNewKeyName(e.target.value)}
-              className="mb-2"
-            />
-            <div className="flex gap-2">
-              <Button onClick={createApiKey}>{t('apiKeys.form.createButton')}</Button>
-              <Button variant="outline" onClick={() => setShowNewKeyForm(false)}>
-                {t('apiKeys.form.cancelButton')}
-              </Button>
-            </div>
-          </div>
-        )}
-
-        <div className="space-y-2">
-          {apiKeys.length === 0 ? (
-            <p className="text-sm text-muted-foreground italic">{t('apiKeys.empty')}</p>
-          ) : (
-            apiKeys.map((key) => (
-              <div
-                key={key.id}
-                className="flex items-center justify-between p-3 border rounded-lg"
-              >
-                <div className="flex-1">
-                  <div className="font-medium">{key.key_name}</div>
-                  <code className="text-xs text-muted-foreground">{key.api_key}</code>
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {t('apiKeys.list.created')} {new Date(key.created_at).toLocaleDateString()}
-                    {key.last_used && ` • ${t('apiKeys.list.lastUsed')} ${new Date(key.last_used).toLocaleDateString()}`}
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    size="sm"
-                    variant={key.is_active ? 'outline' : 'secondary'}
-                    onClick={() => toggleApiKey(key.id, key.is_active)}
-                  >
-                    {key.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => deleteApiKey(key.id)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* GitHub Tokens Section */}
-      <div>
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Github className="h-5 w-5" />
-            <h3 className="text-lg font-semibold">{t('apiKeys.github.title')}</h3>
-          </div>
-          <Button
-            size="sm"
-            onClick={() => setShowNewTokenForm(!showNewTokenForm)}
-          >
-            <Plus className="h-4 w-4 mr-1" />
-            {t('apiKeys.github.addButton')}
-          </Button>
-        </div>
-
-        <p className="text-sm text-muted-foreground mb-4">
-          {t('apiKeys.github.description')}
-        </p>
-
-        {showNewTokenForm && (
-          <div className="mb-4 p-4 border rounded-lg bg-card">
-            <Input
-              placeholder={t('apiKeys.github.form.namePlaceholder')}
-              value={newTokenName}
-              onChange={(e) => setNewTokenName(e.target.value)}
-              className="mb-2"
-            />
-            <div className="relative">
-              <Input
-                type={showToken['new'] ? 'text' : 'password'}
-                placeholder={t('apiKeys.github.form.tokenPlaceholder')}
-                value={newGithubToken}
-                onChange={(e) => setNewGithubToken(e.target.value)}
-                className="mb-2 pr-10"
-              />
-              <button
-                type="button"
-                onClick={() => setShowToken({ ...showToken, new: !showToken['new'] })}
-                className="absolute right-3 top-2.5 text-muted-foreground hover:text-foreground"
-              >
-                {showToken['new'] ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-              </button>
-            </div>
-            <div className="flex gap-2">
-              <Button onClick={createGithubToken}>{t('apiKeys.github.form.addButton')}</Button>
-              <Button variant="outline" onClick={() => {
-                setShowNewTokenForm(false);
-                setNewTokenName('');
-                setNewGithubToken('');
-              }}>
-                {t('apiKeys.github.form.cancelButton')}
-              </Button>
-            </div>
-          </div>
-        )}
-
-        <div className="space-y-2">
-          {githubTokens.length === 0 ? (
-            <p className="text-sm text-muted-foreground italic">{t('apiKeys.github.empty')}</p>
-          ) : (
-            githubTokens.map((token) => (
-              <div
-                key={token.id}
-                className="flex items-center justify-between p-3 border rounded-lg"
-              >
-                <div className="flex-1">
-                  <div className="font-medium">{token.credential_name}</div>
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {t('apiKeys.github.added')} {new Date(token.created_at).toLocaleDateString()}
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    size="sm"
-                    variant={token.is_active ? 'outline' : 'secondary'}
-                    onClick={() => toggleGithubToken(token.id, token.is_active)}
-                  >
-                    {token.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => deleteGithubToken(token.id)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* Documentation Link */}
-      <div className="p-4 bg-muted/50 rounded-lg">
-        <h4 className="font-semibold mb-2">{t('apiKeys.documentation.title')}</h4>
-        <p className="text-sm text-muted-foreground mb-3">
-          {t('apiKeys.documentation.description')}
-        </p>
-        <a
-          href="/EXTERNAL_API.md"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-sm text-primary hover:underline"
-        >
-          {t('apiKeys.documentation.viewLink')}
-        </a>
-      </div>
-    </div>
-  );
-}
-
-export default ApiKeysSettings;

src/components/CodeEditor.jsx

@@ -1,875 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import CodeMirror from '@uiw/react-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
-import { python } from '@codemirror/lang-python';
-import { html } from '@codemirror/lang-html';
-import { css } from '@codemirror/lang-css';
-import { json } from '@codemirror/lang-json';
-import { markdown } from '@codemirror/lang-markdown';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { StreamLanguage } from '@codemirror/language';
-import { EditorView, showPanel, ViewPlugin } from '@codemirror/view';
-import { unifiedMergeView, getChunks } from '@codemirror/merge';
-import { showMinimap } from '@replit/codemirror-minimap';
-import { X, Save, Download, Maximize2, Minimize2, Settings as SettingsIcon } from 'lucide-react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
-import rehypeKatex from 'rehype-katex';
-import rehypeRaw from 'rehype-raw';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark as prismOneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { api } from '../utils/api';
-import { useTranslation } from 'react-i18next';
-import { Eye, Code2 } from 'lucide-react';
-
-// Custom .env file syntax highlighting
-const envLanguage = StreamLanguage.define({
-  token(stream) {
-    // Comments
-    if (stream.match(/^#.*/)) return 'comment';
-    // Key (before =)
-    if (stream.sol() && stream.match(/^[A-Za-z_][A-Za-z0-9_.]*(?==)/)) return 'variableName.definition';
-    // Equals sign
-    if (stream.match(/^=/)) return 'operator';
-    // Double-quoted string
-    if (stream.match(/^"(?:[^"\\]|\\.)*"?/)) return 'string';
-    // Single-quoted string
-    if (stream.match(/^'(?:[^'\\]|\\.)*'?/)) return 'string';
-    // Variable interpolation ${...}
-    if (stream.match(/^\$\{[^}]*\}?/)) return 'variableName.special';
-    // Variable reference $VAR
-    if (stream.match(/^\$[A-Za-z_][A-Za-z0-9_]*/)) return 'variableName.special';
-    // Numbers
-    if (stream.match(/^\d+/)) return 'number';
-    // Skip other characters
-    stream.next();
-    return null;
-  },
-});
-
-function MarkdownCodeBlock({ inline, className, children, ...props }) {
-  const [copied, setCopied] = useState(false);
-  const raw = Array.isArray(children) ? children.join('') : String(children ?? '');
-  const looksMultiline = /[\r\n]/.test(raw);
-  const shouldInline = inline || !looksMultiline;
-
-  if (shouldInline) {
-    return (
-      <code
-        className={`font-mono text-[0.9em] px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-900 border border-gray-200 dark:bg-gray-800/60 dark:text-gray-100 dark:border-gray-700 whitespace-pre-wrap break-words ${className || ''}`}
-        {...props}
-      >
-        {children}
-      </code>
-    );
-  }
-
-  const match = /language-(\w+)/.exec(className || '');
-  const language = match ? match[1] : 'text';
-
-  return (
-    <div className="relative group my-2">
-      {language && language !== 'text' && (
-        <div className="absolute top-2 left-3 z-10 text-xs text-gray-400 font-medium uppercase">{language}</div>
-      )}
-      <button
-        type="button"
-        onClick={() => {
-          navigator.clipboard?.writeText(raw).then(() => {
-            setCopied(true);
-            setTimeout(() => setCopied(false), 1500);
-          });
-        }}
-        className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity text-xs px-2 py-1 rounded-md bg-gray-700/80 hover:bg-gray-700 text-white border border-gray-600"
-      >
-        {copied ? 'Copied!' : 'Copy'}
-      </button>
-      <SyntaxHighlighter
-        language={language}
-        style={prismOneDark}
-        customStyle={{
-          margin: 0,
-          borderRadius: '0.5rem',
-          fontSize: '0.875rem',
-          padding: language && language !== 'text' ? '2rem 1rem 1rem 1rem' : '1rem',
-        }}
-      >
-        {raw}
-      </SyntaxHighlighter>
-    </div>
-  );
-}
-
-const markdownPreviewComponents = {
-  code: MarkdownCodeBlock,
-  blockquote: ({ children }) => (
-    <blockquote className="border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 my-2">
-      {children}
-    </blockquote>
-  ),
-  a: ({ href, children }) => (
-    <a href={href} className="text-blue-600 dark:text-blue-400 hover:underline" target="_blank" rel="noopener noreferrer">
-      {children}
-    </a>
-  ),
-  table: ({ children }) => (
-    <div className="overflow-x-auto my-2">
-      <table className="min-w-full border-collapse border border-gray-200 dark:border-gray-700">{children}</table>
-    </div>
-  ),
-  thead: ({ children }) => <thead className="bg-gray-50 dark:bg-gray-800">{children}</thead>,
-  th: ({ children }) => (
-    <th className="px-3 py-2 text-left text-sm font-semibold border border-gray-200 dark:border-gray-700">{children}</th>
-  ),
-  td: ({ children }) => (
-    <td className="px-3 py-2 align-top text-sm border border-gray-200 dark:border-gray-700">{children}</td>
-  ),
-};
-
-function MarkdownPreview({ content }) {
-  const remarkPlugins = useMemo(() => [remarkGfm, remarkMath], []);
-  const rehypePlugins = useMemo(() => [rehypeRaw, rehypeKatex], []);
-
-  return (
-    <ReactMarkdown
-      remarkPlugins={remarkPlugins}
-      rehypePlugins={rehypePlugins}
-      components={markdownPreviewComponents}
-    >
-      {content}
-    </ReactMarkdown>
-  );
-}
-
-function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded = false, onToggleExpand = null, onPopOut = null }) {
-  const { t } = useTranslation('codeEditor');
-  const [content, setContent] = useState('');
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [isDarkMode, setIsDarkMode] = useState(() => {
-    const savedTheme = localStorage.getItem('codeEditorTheme');
-    return savedTheme ? savedTheme === 'dark' : true;
-  });
-  const [saveSuccess, setSaveSuccess] = useState(false);
-  const [showDiff, setShowDiff] = useState(!!file.diffInfo);
-  const [wordWrap, setWordWrap] = useState(() => {
-    return localStorage.getItem('codeEditorWordWrap') === 'true';
-  });
-  const [minimapEnabled, setMinimapEnabled] = useState(() => {
-    return localStorage.getItem('codeEditorShowMinimap') !== 'false';
-  });
-  const [showLineNumbers, setShowLineNumbers] = useState(() => {
-    return localStorage.getItem('codeEditorLineNumbers') !== 'false';
-  });
-  const [fontSize, setFontSize] = useState(() => {
-    return localStorage.getItem('codeEditorFontSize') || '12';
-  });
-  const [markdownPreview, setMarkdownPreview] = useState(false);
-  const editorRef = useRef(null);
-
-  // Check if file is markdown
-  const isMarkdownFile = useMemo(() => {
-    const ext = file.name.split('.').pop()?.toLowerCase();
-    return ext === 'md' || ext === 'markdown';
-  }, [file.name]);
-
-  // Create minimap extension with chunk-based gutters
-  const minimapExtension = useMemo(() => {
-    if (!file.diffInfo || !showDiff || !minimapEnabled) return [];
-
-    const gutters = {};
-
-    return [
-      showMinimap.compute(['doc'], (state) => {
-        // Get actual chunks from merge view
-        const chunksData = getChunks(state);
-        const chunks = chunksData?.chunks || [];
-
-        // Clear previous gutters
-        Object.keys(gutters).forEach(key => delete gutters[key]);
-
-        // Mark lines that are part of chunks
-        chunks.forEach(chunk => {
-          // Mark the lines in the B side (current document)
-          const fromLine = state.doc.lineAt(chunk.fromB).number;
-          const toLine = state.doc.lineAt(Math.min(chunk.toB, state.doc.length)).number;
-
-          for (let lineNum = fromLine; lineNum <= toLine; lineNum++) {
-            gutters[lineNum] = isDarkMode ? 'rgba(34, 197, 94, 0.8)' : 'rgba(34, 197, 94, 1)';
-          }
-        });
-
-        return {
-          create: () => ({ dom: document.createElement('div') }),
-          displayText: 'blocks',
-          showOverlay: 'always',
-          gutters: [gutters]
-        };
-      })
-    ];
-  }, [file.diffInfo, showDiff, minimapEnabled, isDarkMode]);
-
-  // Create extension to scroll to first chunk on mount
-  const scrollToFirstChunkExtension = useMemo(() => {
-    if (!file.diffInfo || !showDiff) return [];
-
-    return [
-      ViewPlugin.fromClass(class {
-        constructor(view) {
-          // Delay to ensure merge view is fully initialized
-          setTimeout(() => {
-            const chunksData = getChunks(view.state);
-            const chunks = chunksData?.chunks || [];
-
-            if (chunks.length > 0) {
-              const firstChunk = chunks[0];
-
-              // Scroll to the first chunk
-              view.dispatch({
-                effects: EditorView.scrollIntoView(firstChunk.fromB, { y: 'center' })
-              });
-            }
-          }, 100);
-        }
-
-        update() {}
-        destroy() {}
-      })
-    ];
-  }, [file.diffInfo, showDiff]);
-
-  // Whether toolbar has any buttons worth showing
-  const hasToolbarButtons = !!(file.diffInfo || (isSidebar && onPopOut) || (isSidebar && onToggleExpand));
-
-  // Create editor toolbar panel - only when there are buttons to show
-  const editorToolbarPanel = useMemo(() => {
-    if (!hasToolbarButtons) return [];
-
-    const createPanel = (view) => {
-      const dom = document.createElement('div');
-      dom.className = 'cm-editor-toolbar-panel';
-
-      let currentIndex = 0;
-
-      const updatePanel = () => {
-        // Check if we have diff info and it's enabled
-        const hasDiff = file.diffInfo && showDiff;
-        const chunksData = hasDiff ? getChunks(view.state) : null;
-        const chunks = chunksData?.chunks || [];
-        const chunkCount = chunks.length;
-
-        // Build the toolbar HTML
-        let toolbarHTML = '<div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">';
-
-        // Left side - diff navigation (if applicable)
-        toolbarHTML += '<div style="display: flex; align-items: center; gap: 8px;">';
-        if (hasDiff) {
-          toolbarHTML += `
-            <span style="font-weight: 500;">${chunkCount > 0 ? `${currentIndex + 1}/${chunkCount}` : '0'} ${t('toolbar.changes')}</span>
-            <button class="cm-diff-nav-btn cm-diff-nav-prev" title="${t('toolbar.previousChange')}" ${chunkCount === 0 ? 'disabled' : ''}>
-              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
-              </svg>
-            </button>
-            <button class="cm-diff-nav-btn cm-diff-nav-next" title="${t('toolbar.nextChange')}" ${chunkCount === 0 ? 'disabled' : ''}>
-              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-              </svg>
-            </button>
-          `;
-        }
-        toolbarHTML += '</div>';
-
-        // Right side - action buttons
-        toolbarHTML += '<div style="display: flex; align-items: center; gap: 4px;">';
-
-        // Show/hide diff button (only if there's diff info)
-        if (file.diffInfo) {
-          toolbarHTML += `
-            <button class="cm-toolbar-btn cm-toggle-diff-btn" title="${showDiff ? t('toolbar.hideDiff') : t('toolbar.showDiff')}">
-              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                ${showDiff ?
-                  '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />' :
-                  '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />'
-                }
-              </svg>
-            </button>
-          `;
-        }
-
-        // Pop out button (only in sidebar mode with onPopOut)
-        if (isSidebar && onPopOut) {
-          toolbarHTML += `
-            <button class="cm-toolbar-btn cm-popout-btn" title="Open in modal">
-              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
-              </svg>
-            </button>
-          `;
-        }
-
-        // Expand button (only in sidebar mode)
-        if (isSidebar && onToggleExpand) {
-          toolbarHTML += `
-            <button class="cm-toolbar-btn cm-expand-btn" title="${isExpanded ? t('toolbar.collapse') : t('toolbar.expand')}">
-              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                ${isExpanded ?
-                  '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />' :
-                  '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />'
-                }
-              </svg>
-            </button>
-          `;
-        }
-
-        toolbarHTML += '</div>';
-        toolbarHTML += '</div>';
-
-        dom.innerHTML = toolbarHTML;
-
-        if (hasDiff) {
-          const prevBtn = dom.querySelector('.cm-diff-nav-prev');
-          const nextBtn = dom.querySelector('.cm-diff-nav-next');
-
-          prevBtn?.addEventListener('click', () => {
-            if (chunks.length === 0) return;
-            currentIndex = currentIndex > 0 ? currentIndex - 1 : chunks.length - 1;
-
-            const chunk = chunks[currentIndex];
-            if (chunk) {
-              view.dispatch({
-                effects: EditorView.scrollIntoView(chunk.fromB, { y: 'center' })
-              });
-            }
-            updatePanel();
-          });
-
-          nextBtn?.addEventListener('click', () => {
-            if (chunks.length === 0) return;
-            currentIndex = currentIndex < chunks.length - 1 ? currentIndex + 1 : 0;
-
-            const chunk = chunks[currentIndex];
-            if (chunk) {
-              view.dispatch({
-                effects: EditorView.scrollIntoView(chunk.fromB, { y: 'center' })
-              });
-            }
-            updatePanel();
-          });
-        }
-
-        if (file.diffInfo) {
-          const toggleDiffBtn = dom.querySelector('.cm-toggle-diff-btn');
-          toggleDiffBtn?.addEventListener('click', () => {
-            setShowDiff(!showDiff);
-          });
-        }
-
-        if (isSidebar && onPopOut) {
-          const popoutBtn = dom.querySelector('.cm-popout-btn');
-          popoutBtn?.addEventListener('click', () => {
-            onPopOut();
-          });
-        }
-
-        if (isSidebar && onToggleExpand) {
-          const expandBtn = dom.querySelector('.cm-expand-btn');
-          expandBtn?.addEventListener('click', () => {
-            onToggleExpand();
-          });
-        }
-      };
-
-      updatePanel();
-
-      return {
-        top: true,
-        dom,
-        update: updatePanel
-      };
-    };
-
-    return [showPanel.of(createPanel)];
-  }, [file.diffInfo, showDiff, isSidebar, isExpanded, onToggleExpand, onPopOut]);
-
-  // Get language extension based on file extension
-  const getLanguageExtension = (filename) => {
-    const lowerName = filename.toLowerCase();
-    // Handle dotfiles like .env, .env.local, .env.production, etc.
-    if (lowerName === '.env' || lowerName.startsWith('.env.')) {
-      return [envLanguage];
-    }
-    const ext = filename.split('.').pop()?.toLowerCase();
-    switch (ext) {
-      case 'js':
-      case 'jsx':
-      case 'ts':
-      case 'tsx':
-        return [javascript({ jsx: true, typescript: ext.includes('ts') })];
-      case 'py':
-        return [python()];
-      case 'html':
-      case 'htm':
-        return [html()];
-      case 'css':
-      case 'scss':
-      case 'less':
-        return [css()];
-      case 'json':
-        return [json()];
-      case 'md':
-      case 'markdown':
-        return [markdown()];
-      case 'env':
-        return [envLanguage];
-      default:
-        return [];
-    }
-  };
-
-  // Load file content
-  useEffect(() => {
-    const loadFileContent = async () => {
-      try {
-        setLoading(true);
-
-        // If we have diffInfo with both old and new content, we can show the diff directly
-        // This handles both GitPanel (full content) and ChatInterface (full content from API)
-        if (file.diffInfo && file.diffInfo.new_string !== undefined && file.diffInfo.old_string !== undefined) {
-          // Use the new_string as the content to display
-          // The unifiedMergeView will compare it against old_string
-          setContent(file.diffInfo.new_string);
-          setLoading(false);
-          return;
-        }
-
-        // Otherwise, load from disk
-        const response = await api.readFile(file.projectName, file.path);
-
-        if (!response.ok) {
-          throw new Error(`Failed to load file: ${response.status} ${response.statusText}`);
-        }
-
-        const data = await response.json();
-        setContent(data.content);
-      } catch (error) {
-        console.error('Error loading file:', error);
-        setContent(`// Error loading file: ${error.message}\n// File: ${file.name}\n// Path: ${file.path}`);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadFileContent();
-  }, [file, projectPath]);
-
-  const handleSave = async () => {
-    setSaving(true);
-    try {
-      console.log('Saving file:', {
-        projectName: file.projectName,
-        path: file.path,
-        contentLength: content?.length
-      });
-
-      const response = await api.saveFile(file.projectName, file.path, content);
-
-      console.log('Save response:', {
-        status: response.status,
-        ok: response.ok,
-        contentType: response.headers.get('content-type')
-      });
-
-      if (!response.ok) {
-        const contentType = response.headers.get('content-type');
-        if (contentType && contentType.includes('application/json')) {
-          const errorData = await response.json();
-          throw new Error(errorData.error || `Save failed: ${response.status}`);
-        } else {
-          const textError = await response.text();
-          console.error('Non-JSON error response:', textError);
-          throw new Error(`Save failed: ${response.status} ${response.statusText}`);
-        }
-      }
-
-      const result = await response.json();
-      console.log('Save successful:', result);
-
-      setSaveSuccess(true);
-      setTimeout(() => setSaveSuccess(false), 2000);
-
-    } catch (error) {
-      console.error('Error saving file:', error);
-      alert(`Error saving file: ${error.message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleDownload = () => {
-    const blob = new Blob([content], { type: 'text/plain' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = file.name;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  const toggleFullscreen = () => {
-    setIsFullscreen(!isFullscreen);
-  };
-
-  // Save theme preference to localStorage
-  useEffect(() => {
-    localStorage.setItem('codeEditorTheme', isDarkMode ? 'dark' : 'light');
-  }, [isDarkMode]);
-
-  // Save word wrap preference to localStorage
-  useEffect(() => {
-    localStorage.setItem('codeEditorWordWrap', wordWrap.toString());
-  }, [wordWrap]);
-
-  // Listen for settings changes from the Settings modal
-  useEffect(() => {
-    const handleStorageChange = () => {
-      const newTheme = localStorage.getItem('codeEditorTheme');
-      if (newTheme) {
-        setIsDarkMode(newTheme === 'dark');
-      }
-
-      const newWordWrap = localStorage.getItem('codeEditorWordWrap');
-      if (newWordWrap !== null) {
-        setWordWrap(newWordWrap === 'true');
-      }
-
-      const newShowMinimap = localStorage.getItem('codeEditorShowMinimap');
-      if (newShowMinimap !== null) {
-        setMinimapEnabled(newShowMinimap !== 'false');
-      }
-
-      const newShowLineNumbers = localStorage.getItem('codeEditorLineNumbers');
-      if (newShowLineNumbers !== null) {
-        setShowLineNumbers(newShowLineNumbers !== 'false');
-      }
-
-      const newFontSize = localStorage.getItem('codeEditorFontSize');
-      if (newFontSize) {
-        setFontSize(newFontSize);
-      }
-    };
-
-    // Listen for storage events (changes from other tabs/windows)
-    window.addEventListener('storage', handleStorageChange);
-
-    // Custom event for same-window updates
-    window.addEventListener('codeEditorSettingsChanged', handleStorageChange);
-
-    return () => {
-      window.removeEventListener('storage', handleStorageChange);
-      window.removeEventListener('codeEditorSettingsChanged', handleStorageChange);
-    };
-  }, []);
-
-  // Handle keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.ctrlKey || e.metaKey) {
-        if (e.key === 's') {
-          e.preventDefault();
-          handleSave();
-        } else if (e.key === 'Escape') {
-          e.preventDefault();
-          onClose();
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [content]);
-
-  if (loading) {
-    return (
-      <>
-        <style>
-          {`
-            .code-editor-loading {
-              background-color: ${isDarkMode ? '#111827' : '#ffffff'} !important;
-            }
-            .code-editor-loading:hover {
-              background-color: ${isDarkMode ? '#111827' : '#ffffff'} !important;
-            }
-          `}
-        </style>
-        {isSidebar ? (
-          <div className="w-full h-full flex items-center justify-center bg-background">
-            <div className="flex items-center gap-3">
-              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-              <span className="text-gray-900 dark:text-white">{t('loading', { fileName: file.name })}</span>
-            </div>
-          </div>
-        ) : (
-          <div className="fixed inset-0 z-[9999] md:bg-black/50 md:flex md:items-center md:justify-center">
-            <div className="code-editor-loading w-full h-full md:rounded-lg md:w-auto md:h-auto p-8 flex items-center justify-center">
-              <div className="flex items-center gap-3">
-                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-                <span className="text-gray-900 dark:text-white">{t('loading', { fileName: file.name })}</span>
-              </div>
-            </div>
-          </div>
-        )}
-      </>
-    );
-  }
-
-  return (
-    <>
-      <style>
-        {`
-          /* Light background for full line changes */
-          .cm-deletedChunk {
-            background-color: ${isDarkMode ? 'rgba(239, 68, 68, 0.15)' : 'rgba(255, 235, 235, 1)'} !important;
-            border-left: 3px solid ${isDarkMode ? 'rgba(239, 68, 68, 0.6)' : 'rgb(239, 68, 68)'} !important;
-            padding-left: 4px !important;
-          }
-
-          .cm-insertedChunk {
-            background-color: ${isDarkMode ? 'rgba(34, 197, 94, 0.15)' : 'rgba(230, 255, 237, 1)'} !important;
-            border-left: 3px solid ${isDarkMode ? 'rgba(34, 197, 94, 0.6)' : 'rgb(34, 197, 94)'} !important;
-            padding-left: 4px !important;
-          }
-
-          /* Override linear-gradient underline and use solid darker background for partial changes */
-          .cm-editor.cm-merge-b .cm-changedText {
-            background: ${isDarkMode ? 'rgba(34, 197, 94, 0.4)' : 'rgba(34, 197, 94, 0.3)'} !important;
-            padding-top: 2px !important;
-            padding-bottom: 2px !important;
-            margin-top: -2px !important;
-            margin-bottom: -2px !important;
-          }
-
-          .cm-editor .cm-deletedChunk .cm-changedText {
-            background: ${isDarkMode ? 'rgba(239, 68, 68, 0.4)' : 'rgba(239, 68, 68, 0.3)'} !important;
-            padding-top: 2px !important;
-            padding-bottom: 2px !important;
-            margin-top: -2px !important;
-            margin-bottom: -2px !important;
-          }
-
-          /* Minimap gutter styling */
-          .cm-gutter.cm-gutter-minimap {
-            background-color: ${isDarkMode ? '#1e1e1e' : '#f5f5f5'};
-          }
-
-          /* Editor toolbar panel styling */
-          .cm-editor-toolbar-panel {
-            padding: 4px 10px;
-            background-color: ${isDarkMode ? '#1f2937' : '#ffffff'};
-            border-bottom: 1px solid ${isDarkMode ? '#374151' : '#e5e7eb'};
-            color: ${isDarkMode ? '#d1d5db' : '#374151'};
-            font-size: 12px;
-          }
-
-          .cm-diff-nav-btn,
-          .cm-toolbar-btn {
-            padding: 3px;
-            background: transparent;
-            border: none;
-            cursor: pointer;
-            border-radius: 4px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            color: inherit;
-            transition: background-color 0.2s;
-          }
-
-          .cm-diff-nav-btn:hover,
-          .cm-toolbar-btn:hover {
-            background-color: ${isDarkMode ? '#374151' : '#f3f4f6'};
-          }
-
-          .cm-diff-nav-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-          }
-        `}
-      </style>
-      <div className={isSidebar ?
-        'w-full h-full flex flex-col' :
-        `fixed inset-0 z-[9999] ${
-          // Mobile: native fullscreen, Desktop: modal with backdrop
-          'md:bg-black/50 md:flex md:items-center md:justify-center md:p-4'
-        } ${isFullscreen ? 'md:p-0' : ''}`}>
-        <div className={isSidebar ?
-          'bg-background flex flex-col w-full h-full' :
-          `bg-background shadow-2xl flex flex-col ${
-          // Mobile: always fullscreen, Desktop: modal sizing
-          'w-full h-full md:rounded-lg md:shadow-2xl' +
-          (isFullscreen ? ' md:w-full md:h-full md:rounded-none' : ' md:w-full md:max-w-6xl md:h-[80vh] md:max-h-[80vh]')
-        }`}>
-        {/* Header */}
-        <div className="flex items-center justify-between px-3 py-1.5 border-b border-border flex-shrink-0 min-w-0">
-          <div className="flex items-center gap-2 min-w-0 flex-1">
-            <div className="min-w-0 flex-1">
-              <div className="flex items-center gap-2 min-w-0">
-                <h3 className="text-sm font-medium text-gray-900 dark:text-white truncate">{file.name}</h3>
-                {file.diffInfo && (
-                  <span className="text-[10px] bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 px-1.5 py-0.5 rounded whitespace-nowrap">
-                    {t('header.showingChanges')}
-                  </span>
-                )}
-              </div>
-              <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{file.path}</p>
-            </div>
-          </div>
-
-          <div className="flex items-center gap-0.5 md:gap-1 flex-shrink-0">
-            {isMarkdownFile && (
-              <button
-                onClick={() => setMarkdownPreview(!markdownPreview)}
-                className={`p-1.5 rounded-md min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 flex items-center justify-center transition-colors ${
-                  markdownPreview
-                    ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
-                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800'
-                }`}
-                title={markdownPreview ? t('actions.editMarkdown') : t('actions.previewMarkdown')}
-              >
-                {markdownPreview ? <Code2 className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-              </button>
-            )}
-
-            <button
-              onClick={() => window.openSettings?.('appearance')}
-              className="p-1.5 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 flex items-center justify-center"
-              title={t('toolbar.settings')}
-            >
-              <SettingsIcon className="w-4 h-4" />
-            </button>
-
-            <button
-              onClick={handleDownload}
-              className="p-1.5 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 flex items-center justify-center"
-              title={t('actions.download')}
-            >
-              <Download className="w-4 h-4" />
-            </button>
-
-            <button
-              onClick={handleSave}
-              disabled={saving}
-              className={`p-1.5 rounded-md disabled:opacity-50 flex items-center justify-center transition-colors min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 ${
-                saveSuccess
-                  ? 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/30'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800'
-              }`}
-              title={saveSuccess ? t('actions.saved') : saving ? t('actions.saving') : t('actions.save')}
-            >
-              {saveSuccess ? (
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                </svg>
-              ) : (
-                <Save className="w-4 h-4" />
-              )}
-            </button>
-
-            {!isSidebar && (
-              <button
-                onClick={toggleFullscreen}
-                className="hidden md:flex p-1.5 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 items-center justify-center"
-                title={isFullscreen ? t('actions.exitFullscreen') : t('actions.fullscreen')}
-              >
-                {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
-              </button>
-            )}
-
-            <button
-              onClick={onClose}
-              className="p-1.5 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 flex items-center justify-center"
-              title={t('actions.close')}
-            >
-              <X className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-
-        {/* Editor / Markdown Preview */}
-        <div className="flex-1 overflow-hidden">
-          {markdownPreview && isMarkdownFile ? (
-            <div className="h-full overflow-y-auto bg-white dark:bg-gray-900">
-              <div className="max-w-4xl mx-auto px-8 py-6 prose prose-sm dark:prose-invert prose-headings:font-semibold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-code:text-sm prose-pre:bg-gray-900 prose-img:rounded-lg max-w-none">
-                <MarkdownPreview content={content} />
-              </div>
-            </div>
-          ) : (
-            <CodeMirror
-              ref={editorRef}
-              value={content}
-              onChange={setContent}
-              extensions={[
-                ...getLanguageExtension(file.name),
-                // Always show the toolbar
-                ...editorToolbarPanel,
-                // Only show diff-related extensions when diff is enabled
-                ...(file.diffInfo && showDiff && file.diffInfo.old_string !== undefined
-                  ? [
-                      unifiedMergeView({
-                        original: file.diffInfo.old_string,
-                        mergeControls: false,
-                        highlightChanges: true,
-                        syntaxHighlightDeletions: false,
-                        gutter: true
-                        // NOTE: NO collapseUnchanged - this shows the full file!
-                      }),
-                      ...minimapExtension,
-                      ...scrollToFirstChunkExtension
-                    ]
-                  : []),
-                ...(wordWrap ? [EditorView.lineWrapping] : [])
-              ]}
-              theme={isDarkMode ? oneDark : undefined}
-              height="100%"
-              style={{
-                fontSize: `${fontSize}px`,
-                height: '100%',
-              }}
-              basicSetup={{
-                lineNumbers: showLineNumbers,
-                foldGutter: true,
-                dropCursor: false,
-                allowMultipleSelections: false,
-                indentOnInput: true,
-                bracketMatching: true,
-                closeBrackets: true,
-                autocompletion: true,
-                highlightSelectionMatches: true,
-                searchKeymap: true,
-              }}
-            />
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between px-3 py-1.5 border-t border-border bg-muted flex-shrink-0">
-          <div className="flex items-center gap-3 text-xs text-gray-600 dark:text-gray-400">
-            <span>{t('footer.lines')} {content.split('\n').length}</span>
-            <span>{t('footer.characters')} {content.length}</span>
-          </div>
-
-          <div className="text-xs text-gray-500 dark:text-gray-400">
-            {t('footer.shortcuts')}
-          </div>
-        </div>
-      </div>
-    </div>
-    </>
-  );
-}
-
-export default CodeEditor;

src/components/CommandMenu.jsx

@@ -1,367 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-/**
- * CommandMenu - Autocomplete dropdown for slash commands
- *
- * @param {Array} commands - Array of command objects to display
- * @param {number} selectedIndex - Currently selected command index (index in `commands`)
- * @param {Function} onSelect - Callback when a command is selected
- * @param {Function} onClose - Callback when menu should close
- * @param {Object} position - Position object { top, left } for absolute positioning
- * @param {boolean} isOpen - Whether the menu is open
- * @param {Array} frequentCommands - Array of frequently used command objects
- */
-const CommandMenu = ({
-  commands = [],
-  selectedIndex = -1,
-  onSelect,
-  onClose,
-  position = { top: 0, left: 0 },
-  isOpen = false,
-  frequentCommands = [],
-}) => {
-  const menuRef = useRef(null);
-  const selectedItemRef = useRef(null);
-
-  // Calculate responsive menu positioning.
-  // Mobile: dock above chat input. Desktop: clamp to viewport.
-  const getMenuPosition = () => {
-    const isMobile = window.innerWidth < 640;
-    const viewportHeight = window.innerHeight;
-
-    if (isMobile) {
-      // On mobile, calculate bottom position dynamically to appear above the input.
-      // Use the bottom value calculated as: window.innerHeight - textarea.top + spacing.
-      const inputBottom = position.bottom || 90;
-
-      return {
-        position: 'fixed',
-        bottom: `${inputBottom}px`, // Position above the input with spacing already included.
-        left: '16px',
-        right: '16px',
-        width: 'auto',
-        maxWidth: 'calc(100vw - 32px)',
-        maxHeight: 'min(50vh, 300px)', // Limit to smaller of 50vh or 300px.
-      };
-    }
-
-    // On desktop, use provided position but ensure it stays on screen.
-    return {
-      position: 'fixed',
-      top: `${Math.max(16, Math.min(position.top, viewportHeight - 316))}px`,
-      left: `${position.left}px`,
-      width: 'min(400px, calc(100vw - 32px))',
-      maxWidth: 'calc(100vw - 32px)',
-      maxHeight: '300px',
-    };
-  };
-
-  const menuPosition = getMenuPosition();
-
-  // Close menu when clicking outside.
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (menuRef.current && !menuRef.current.contains(event.target) && isOpen) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-
-    return undefined;
-  }, [isOpen, onClose]);
-
-  // Keep selected keyboard item visible while navigating.
-  useEffect(() => {
-    if (selectedItemRef.current && menuRef.current) {
-      const menuRect = menuRef.current.getBoundingClientRect();
-      const itemRect = selectedItemRef.current.getBoundingClientRect();
-
-      if (itemRect.bottom > menuRect.bottom) {
-        selectedItemRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-      } else if (itemRect.top < menuRect.top) {
-        selectedItemRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-      }
-    }
-  }, [selectedIndex]);
-
-  if (!isOpen) {
-    return null;
-  }
-
-  // Show a message if no commands are available.
-  if (commands.length === 0) {
-    return (
-      <div
-        ref={menuRef}
-        className="command-menu command-menu-empty"
-        style={{
-          ...menuPosition,
-          maxHeight: '300px',
-          borderRadius: '8px',
-          boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-          zIndex: 1000,
-          padding: '20px',
-          opacity: 1,
-          transform: 'translateY(0)',
-          transition: 'opacity 150ms ease-in-out, transform 150ms ease-in-out',
-          textAlign: 'center',
-        }}
-      >
-        No commands available
-      </div>
-    );
-  }
-
-  // Add frequent commands as a special group if provided.
-  const hasFrequentCommands = frequentCommands.length > 0;
-
-  const getCommandKey = (command) =>
-    `${command.name}::${command.namespace || command.type || 'other'}::${command.path || ''}`;
-  const frequentCommandKeys = new Set(frequentCommands.map(getCommandKey));
-
-  // Group commands by namespace for section rendering.
-  // When frequent commands are shown, avoid duplicate rows in other sections.
-  const groupedCommands = commands.reduce((groups, command) => {
-    if (hasFrequentCommands && frequentCommandKeys.has(getCommandKey(command))) {
-      return groups;
-    }
-
-    const namespace = command.namespace || command.type || 'other';
-    if (!groups[namespace]) {
-      groups[namespace] = [];
-    }
-    groups[namespace].push(command);
-    return groups;
-  }, {});
-
-  // Add frequent commands as a separate group.
-  if (hasFrequentCommands) {
-    groupedCommands.frequent = frequentCommands;
-  }
-
-  // Order: frequent, builtin, project, user, other.
-  const namespaceOrder = hasFrequentCommands
-    ? ['frequent', 'builtin', 'project', 'user', 'other']
-    : ['builtin', 'project', 'user', 'other'];
-  const orderedNamespaces = namespaceOrder.filter((ns) => groupedCommands[ns]);
-
-  const namespaceLabels = {
-    frequent: '\u2B50 Frequently Used',
-    builtin: 'Built-in Commands',
-    project: 'Project Commands',
-    user: 'User Commands',
-    other: 'Other Commands',
-  };
-
-  // Keep all selection indices aligned to `commands` (filteredCommands from the hook).
-  // This prevents mismatches between mouse selection (rendered list) and keyboard selection.
-  const commandIndexByKey = new Map();
-  commands.forEach((command, index) => {
-    const key = getCommandKey(command);
-    if (!commandIndexByKey.has(key)) {
-      commandIndexByKey.set(key, index);
-    }
-  });
-
-  return (
-    <div
-      ref={menuRef}
-      role="listbox"
-      aria-label="Available commands"
-      className="command-menu"
-      style={{
-        ...menuPosition,
-        maxHeight: '300px',
-        overflowY: 'auto',
-        borderRadius: '8px',
-        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-        zIndex: 1000,
-        padding: '8px',
-        opacity: isOpen ? 1 : 0,
-        transform: isOpen ? 'translateY(0)' : 'translateY(-10px)',
-        transition: 'opacity 150ms ease-in-out, transform 150ms ease-in-out',
-      }}
-    >
-      {orderedNamespaces.map((namespace) => (
-        <div key={namespace} className="command-group">
-          {orderedNamespaces.length > 1 && (
-            <div
-              style={{
-                fontSize: '11px',
-                fontWeight: 600,
-                textTransform: 'uppercase',
-                color: '#6b7280',
-                padding: '8px 12px 4px',
-                letterSpacing: '0.05em',
-              }}
-            >
-              {namespaceLabels[namespace] || namespace}
-            </div>
-          )}
-
-          {groupedCommands[namespace].map((command) => {
-            const commandKey = getCommandKey(command);
-            const commandIndex = commandIndexByKey.get(commandKey) ?? -1;
-            const isSelected = commandIndex === selectedIndex;
-
-            return (
-              <div
-                key={`${namespace}-${command.name}-${command.path || ''}`}
-                ref={isSelected ? selectedItemRef : null}
-                role="option"
-                aria-selected={isSelected}
-                className="command-item"
-                onMouseEnter={() => {
-                  if (onSelect && commandIndex >= 0) {
-                    onSelect(command, commandIndex, true);
-                  }
-                }}
-                onClick={() => {
-                  if (onSelect) {
-                    onSelect(command, commandIndex, false);
-                  }
-                }}
-                style={{
-                  display: 'flex',
-                  alignItems: 'flex-start',
-                  padding: '10px 12px',
-                  borderRadius: '6px',
-                  cursor: 'pointer',
-                  backgroundColor: isSelected ? '#eff6ff' : 'transparent',
-                  transition: 'background-color 100ms ease-in-out',
-                  marginBottom: '2px',
-                }}
-                // Prevent textarea blur when clicking a menu item.
-                onMouseDown={(e) => e.preventDefault()}
-              >
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '8px',
-                      marginBottom: command.description ? '4px' : 0,
-                    }}
-                  >
-                    {/* Command icon based on namespace */}
-                    <span style={{ fontSize: '16px', flexShrink: 0 }}>
-                      {namespace === 'builtin' && '\u26A1'}
-                      {namespace === 'project' && '\uD83D\uDCC1'}
-                      {namespace === 'user' && '\uD83D\uDC64'}
-                      {namespace === 'other' && '\uD83D\uDCDD'}
-                      {namespace === 'frequent' && '\u2B50'}
-                    </span>
-
-                    {/* Command name */}
-                    <span
-                      style={{
-                        fontWeight: 600,
-                        fontSize: '14px',
-                        color: '#111827',
-                        fontFamily: 'monospace',
-                      }}
-                    >
-                      {command.name}
-                    </span>
-
-                    {/* Command metadata badge */}
-                    {command.metadata?.type && (
-                      <span
-                        className="command-metadata-badge"
-                        style={{
-                          fontSize: '10px',
-                          padding: '2px 6px',
-                          borderRadius: '4px',
-                          backgroundColor: '#f3f4f6',
-                          color: '#6b7280',
-                          fontWeight: 500,
-                        }}
-                      >
-                        {command.metadata.type}
-                      </span>
-                    )}
-                  </div>
-
-                  {/* Command description */}
-                  {command.description && (
-                    <div
-                      style={{
-                        fontSize: '13px',
-                        color: '#6b7280',
-                        marginLeft: '24px',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                      }}
-                    >
-                      {command.description}
-                    </div>
-                  )}
-                </div>
-
-                {/* Selection indicator */}
-                {isSelected && (
-                  <span
-                    style={{
-                      marginLeft: '8px',
-                      color: '#3b82f6',
-                      fontSize: '12px',
-                      fontWeight: 600,
-                    }}
-                  >
-                    {'\u21B5'}
-                  </span>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      ))}
-
-      {/* Default light mode styles */}
-      <style>{`
-        .command-menu {
-          background-color: white;
-          border: 1px solid #e5e7eb;
-        }
-        .command-menu-empty {
-          color: #6b7280;
-        }
-
-        @media (prefers-color-scheme: dark) {
-          .command-menu {
-            background-color: #1f2937 !important;
-            border: 1px solid #374151 !important;
-          }
-          .command-menu-empty {
-            color: #9ca3af !important;
-          }
-          .command-item[aria-selected="true"] {
-            background-color: #1e40af !important;
-          }
-          .command-item span:not(.command-metadata-badge) {
-            color: #f3f4f6 !important;
-          }
-          .command-metadata-badge {
-            background-color: #f3f4f6 !important;
-            color: #6b7280 !important;
-          }
-          .command-item div {
-            color: #d1d5db !important;
-          }
-          .command-group > div:first-child {
-            color: #9ca3af !important;
-          }
-        }
-      `}</style>
-    </div>
-  );
-};
-
-export default CommandMenu;

src/components/CredentialsSettings.jsx

@@ -1,421 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Key, Plus, Trash2, Eye, EyeOff, Copy, Check, Github, ExternalLink } from 'lucide-react';
-import { useVersionCheck } from '../hooks/useVersionCheck';
-import { version } from '../../package.json';
-import { authenticatedFetch } from '../utils/api';
-import { useTranslation } from 'react-i18next';
-
-function CredentialsSettings() {
-  const { t } = useTranslation('settings');
-  const [apiKeys, setApiKeys] = useState([]);
-  const [githubCredentials, setGithubCredentials] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [showNewKeyForm, setShowNewKeyForm] = useState(false);
-  const [showNewGithubForm, setShowNewGithubForm] = useState(false);
-  const [newKeyName, setNewKeyName] = useState('');
-  const [newGithubName, setNewGithubName] = useState('');
-  const [newGithubToken, setNewGithubToken] = useState('');
-  const [newGithubDescription, setNewGithubDescription] = useState('');
-  const [showToken, setShowToken] = useState({});
-  const [copiedKey, setCopiedKey] = useState(null);
-  const [newlyCreatedKey, setNewlyCreatedKey] = useState(null);
-
-  // Version check hook
-  const { updateAvailable, latestVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    try {
-      setLoading(true);
-
-      // Fetch API keys
-      const apiKeysRes = await authenticatedFetch('/api/settings/api-keys');
-      const apiKeysData = await apiKeysRes.json();
-      setApiKeys(apiKeysData.apiKeys || []);
-
-      // Fetch GitHub credentials only
-      const credentialsRes = await authenticatedFetch('/api/settings/credentials?type=github_token');
-      const credentialsData = await credentialsRes.json();
-      setGithubCredentials(credentialsData.credentials || []);
-    } catch (error) {
-      console.error('Error fetching settings:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const createApiKey = async () => {
-    if (!newKeyName.trim()) return;
-
-    try {
-      const res = await authenticatedFetch('/api/settings/api-keys', {
-        method: 'POST',
-        body: JSON.stringify({ keyName: newKeyName })
-      });
-
-      const data = await res.json();
-      if (data.success) {
-        setNewlyCreatedKey(data.apiKey);
-        setNewKeyName('');
-        setShowNewKeyForm(false);
-        fetchData();
-      }
-    } catch (error) {
-      console.error('Error creating API key:', error);
-    }
-  };
-
-  const deleteApiKey = async (keyId) => {
-    if (!confirm(t('apiKeys.confirmDelete'))) return;
-
-    try {
-      await authenticatedFetch(`/api/settings/api-keys/${keyId}`, {
-        method: 'DELETE'
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error deleting API key:', error);
-    }
-  };
-
-  const toggleApiKey = async (keyId, isActive) => {
-    try {
-      await authenticatedFetch(`/api/settings/api-keys/${keyId}/toggle`, {
-        method: 'PATCH',
-        body: JSON.stringify({ isActive: !isActive })
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error toggling API key:', error);
-    }
-  };
-
-  const createGithubCredential = async () => {
-    if (!newGithubName.trim() || !newGithubToken.trim()) return;
-
-    try {
-      const res = await authenticatedFetch('/api/settings/credentials', {
-        method: 'POST',
-        body: JSON.stringify({
-          credentialName: newGithubName,
-          credentialType: 'github_token',
-          credentialValue: newGithubToken,
-          description: newGithubDescription
-        })
-      });
-
-      const data = await res.json();
-      if (data.success) {
-        setNewGithubName('');
-        setNewGithubToken('');
-        setNewGithubDescription('');
-        setShowNewGithubForm(false);
-        fetchData();
-      }
-    } catch (error) {
-      console.error('Error creating GitHub credential:', error);
-    }
-  };
-
-  const deleteGithubCredential = async (credentialId) => {
-    if (!confirm(t('apiKeys.github.confirmDelete'))) return;
-
-    try {
-      await authenticatedFetch(`/api/settings/credentials/${credentialId}`, {
-        method: 'DELETE'
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error deleting GitHub credential:', error);
-    }
-  };
-
-  const toggleGithubCredential = async (credentialId, isActive) => {
-    try {
-      await authenticatedFetch(`/api/settings/credentials/${credentialId}/toggle`, {
-        method: 'PATCH',
-        body: JSON.stringify({ isActive: !isActive })
-      });
-      fetchData();
-    } catch (error) {
-      console.error('Error toggling GitHub credential:', error);
-    }
-  };
-
-  const copyToClipboard = (text, id) => {
-    navigator.clipboard.writeText(text);
-    setCopiedKey(id);
-    setTimeout(() => setCopiedKey(null), 2000);
-  };
-
-  if (loading) {
-    return <div className="text-muted-foreground">{t('apiKeys.loading')}</div>;
-  }
-
-  return (
-    <div className="space-y-8">
-      {/* New API Key Alert */}
-      {newlyCreatedKey && (
-        <div className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
-          <h4 className="font-semibold text-yellow-500 mb-2">{t('apiKeys.newKey.alertTitle')}</h4>
-          <p className="text-sm text-muted-foreground mb-3">
-            {t('apiKeys.newKey.alertMessage')}
-          </p>
-          <div className="flex items-center gap-2">
-            <code className="flex-1 px-3 py-2 bg-background/50 rounded font-mono text-sm break-all">
-              {newlyCreatedKey.apiKey}
-            </code>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => copyToClipboard(newlyCreatedKey.apiKey, 'new')}
-            >
-              {copiedKey === 'new' ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-            </Button>
-          </div>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="mt-3"
-            onClick={() => setNewlyCreatedKey(null)}
-          >
-            {t('apiKeys.newKey.iveSavedIt')}
-          </Button>
-        </div>
-      )}
-
-      {/* API Keys Section */}
-      <div>
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Key className="h-5 w-5" />
-            <h3 className="text-lg font-semibold">{t('apiKeys.title')}</h3>
-          </div>
-          <Button
-            size="sm"
-            onClick={() => setShowNewKeyForm(!showNewKeyForm)}
-          >
-            <Plus className="h-4 w-4 mr-1" />
-            {t('apiKeys.newButton')}
-          </Button>
-        </div>
-
-        <div className="mb-4">
-          <p className="text-sm text-muted-foreground mb-2">
-            {t('apiKeys.description')}
-          </p>
-          <a
-            href="/api-docs.html"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-sm text-primary hover:underline inline-flex items-center gap-1"
-          >
-            {t('apiKeys.apiDocsLink')}
-            <ExternalLink className="h-3 w-3" />
-          </a>
-        </div>
-
-        {showNewKeyForm && (
-          <div className="mb-4 p-4 border rounded-lg bg-card">
-            <Input
-              placeholder={t('apiKeys.form.placeholder')}
-              value={newKeyName}
-              onChange={(e) => setNewKeyName(e.target.value)}
-              className="mb-2"
-            />
-            <div className="flex gap-2">
-              <Button onClick={createApiKey}>{t('apiKeys.form.createButton')}</Button>
-              <Button variant="outline" onClick={() => setShowNewKeyForm(false)}>
-                {t('apiKeys.form.cancelButton')}
-              </Button>
-            </div>
-          </div>
-        )}
-
-        <div className="space-y-2">
-          {apiKeys.length === 0 ? (
-            <p className="text-sm text-muted-foreground italic">{t('apiKeys.empty')}</p>
-          ) : (
-            apiKeys.map((key) => (
-              <div
-                key={key.id}
-                className="flex items-center justify-between p-3 border rounded-lg"
-              >
-                <div className="flex-1">
-                  <div className="font-medium">{key.key_name}</div>
-                  <code className="text-xs text-muted-foreground">{key.api_key}</code>
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {t('apiKeys.list.created')} {new Date(key.created_at).toLocaleDateString()}
-                    {key.last_used && ` • ${t('apiKeys.list.lastUsed')} ${new Date(key.last_used).toLocaleDateString()}`}
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    size="sm"
-                    variant={key.is_active ? 'outline' : 'secondary'}
-                    onClick={() => toggleApiKey(key.id, key.is_active)}
-                  >
-                    {key.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => deleteApiKey(key.id)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* GitHub Credentials Section */}
-      <div>
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Github className="h-5 w-5" />
-            <h3 className="text-lg font-semibold">{t('apiKeys.github.title')}</h3>
-          </div>
-          <Button
-            size="sm"
-            onClick={() => setShowNewGithubForm(!showNewGithubForm)}
-          >
-            <Plus className="h-4 w-4 mr-1" />
-            {t('apiKeys.github.addButton')}
-          </Button>
-        </div>
-
-        <p className="text-sm text-muted-foreground mb-4">
-          {t('apiKeys.github.descriptionAlt')}
-        </p>
-
-        {showNewGithubForm && (
-          <div className="mb-4 p-4 border rounded-lg bg-card space-y-3">
-            <Input
-              placeholder={t('apiKeys.github.form.namePlaceholder')}
-              value={newGithubName}
-              onChange={(e) => setNewGithubName(e.target.value)}
-            />
-
-            <div className="relative">
-              <Input
-                type={showToken['new'] ? 'text' : 'password'}
-                placeholder={t('apiKeys.github.form.tokenPlaceholder')}
-                value={newGithubToken}
-                onChange={(e) => setNewGithubToken(e.target.value)}
-                className="pr-10"
-              />
-              <button
-                type="button"
-                onClick={() => setShowToken({ ...showToken, new: !showToken['new'] })}
-                className="absolute right-3 top-2.5 text-muted-foreground hover:text-foreground"
-              >
-                {showToken['new'] ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-              </button>
-            </div>
-
-            <Input
-              placeholder={t('apiKeys.github.form.descriptionPlaceholder')}
-              value={newGithubDescription}
-              onChange={(e) => setNewGithubDescription(e.target.value)}
-            />
-
-            <div className="flex gap-2">
-              <Button onClick={createGithubCredential}>{t('apiKeys.github.form.addButton')}</Button>
-              <Button variant="outline" onClick={() => {
-                setShowNewGithubForm(false);
-                setNewGithubName('');
-                setNewGithubToken('');
-                setNewGithubDescription('');
-              }}>
-                {t('apiKeys.github.form.cancelButton')}
-              </Button>
-            </div>
-
-            <a
-              href="https://github.com/settings/tokens"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs text-primary hover:underline block"
-            >
-              {t('apiKeys.github.form.howToCreate')}
-            </a>
-          </div>
-        )}
-
-        <div className="space-y-2">
-          {githubCredentials.length === 0 ? (
-            <p className="text-sm text-muted-foreground italic">{t('apiKeys.github.empty')}</p>
-          ) : (
-            githubCredentials.map((credential) => (
-              <div
-                key={credential.id}
-                className="flex items-center justify-between p-3 border rounded-lg"
-              >
-                <div className="flex-1">
-                  <div className="font-medium">{credential.credential_name}</div>
-                  {credential.description && (
-                    <div className="text-xs text-muted-foreground">{credential.description}</div>
-                  )}
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {t('apiKeys.github.added')} {new Date(credential.created_at).toLocaleDateString()}
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    size="sm"
-                    variant={credential.is_active ? 'outline' : 'secondary'}
-                    onClick={() => toggleGithubCredential(credential.id, credential.is_active)}
-                  >
-                    {credential.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => deleteGithubCredential(credential.id)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* Version Information */}
-      <div className="pt-6 border-t border-border/50">
-        <div className="flex items-center justify-between text-xs italic text-muted-foreground/60">
-          <a
-            href={releaseInfo?.htmlUrl || 'https://github.com/siteboon/claudecodeui/releases'}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-muted-foreground transition-colors"
-          >
-            v{version}
-          </a>
-          {updateAvailable && latestVersion && (
-            <a
-              href={releaseInfo?.htmlUrl || 'https://github.com/siteboon/claudecodeui/releases'}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-1.5 px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full hover:bg-green-500/20 transition-colors not-italic font-medium"
-            >
-              <span className="text-[10px]">{t('apiKeys.version.updateAvailable', { version: latestVersion })}</span>
-              <ExternalLink className="h-2.5 w-2.5" />
-            </a>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default CredentialsSettings;

src/components/DarkModeToggle.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { useTheme } from '../contexts/ThemeContext';
-
-function DarkModeToggle() {
-  const { isDarkMode, toggleDarkMode } = useTheme();
-
-  return (
-    <button
-      onClick={toggleDarkMode}
-      className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
-      role="switch"
-      aria-checked={isDarkMode}
-      aria-label="Toggle dark mode"
-    >
-      <span className="sr-only">Toggle dark mode</span>
-      <span
-        className={`${
-          isDarkMode ? 'translate-x-7' : 'translate-x-1'
-        } inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200 flex items-center justify-center`}
-      >
-        {isDarkMode ? (
-          <svg className="w-3.5 h-3.5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-          </svg>
-        ) : (
-          <svg className="w-3.5 h-3.5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-          </svg>
-        )}
-      </span>
-    </button>
-  );
-}
-
-export default DarkModeToggle;

src/components/DarkModeToggle.tsx

@@ -0,0 +1,48 @@
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+
+type DarkModeToggleProps = {
+  checked?: boolean;
+  onToggle?: (nextValue: boolean) => void;
+  ariaLabel?: string;
+};
+
+function DarkModeToggle({ checked, onToggle, ariaLabel = 'Toggle dark mode' }: DarkModeToggleProps) {
+  const { isDarkMode, toggleDarkMode } = useTheme();
+  const isControlled = typeof checked === 'boolean' && typeof onToggle === 'function';
+  const isEnabled = isControlled ? checked : isDarkMode;
+
+  const handleToggle = () => {
+    if (isControlled) {
+      onToggle(!isEnabled);
+      return;
+    }
+
+    toggleDarkMode();
+  };
+
+  return (
+    <button
+      onClick={handleToggle}
+      className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+      role="switch"
+      aria-checked={isEnabled}
+      aria-label={ariaLabel}
+    >
+      <span className="sr-only">{ariaLabel}</span>
+      <span
+        className={`${
+          isEnabled ? 'translate-x-7' : 'translate-x-1'
+        } h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200 flex items-center justify-center`}
+      >
+        {isEnabled ? (
+          <Moon className="h-3.5 w-3.5 text-gray-700" />
+        ) : (
+          <Sun className="h-3.5 w-3.5 text-yellow-500" />
+        )}
+      </span>
+    </button>
+  );
+}
+
+export default DarkModeToggle;

src/components/ErrorBoundary.jsx

@@ -1,73 +1,77 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
 
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null, errorInfo: null };
-  }
-
-  static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI
-    return { hasError: true };
-  }
-
-  componentDidCatch(error, errorInfo) {
-    // Log the error details
-    console.error('ErrorBoundary caught an error:', error, errorInfo);
-    
-    // You can also log the error to an error reporting service here
-    this.setState({
-      error: error,
-      errorInfo: errorInfo
-    });
-  }
-
-  render() {
-    if (this.state.hasError) {
-      // Fallback UI
-      return (
-        <div className="flex flex-col items-center justify-center p-8 text-center">
-          <div className="bg-red-50 border border-red-200 rounded-lg p-6 max-w-md">
-            <div className="flex items-center mb-4">
-              <div className="flex-shrink-0">
-                <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
-                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-                </svg>
-              </div>
-              <h3 className="ml-3 text-sm font-medium text-red-800">
-                Something went wrong
-              </h3>
-            </div>
-            <div className="text-sm text-red-700">
-              <p className="mb-2">An error occurred while loading the chat interface.</p>
-              {this.props.showDetails && this.state.error && (
-                <details className="mt-4">
-                  <summary className="cursor-pointer text-xs font-mono">Error Details</summary>
-                  <pre className="mt-2 text-xs bg-red-100 p-2 rounded overflow-auto max-h-40">
-                    {this.state.error.toString()}
-                    {this.state.errorInfo && this.state.errorInfo.componentStack}
-                  </pre>
-                </details>
-              )}
-            </div>
-            <div className="mt-4">
-              <button
-                onClick={() => {
-                  this.setState({ hasError: false, error: null, errorInfo: null });
-                  if (this.props.onRetry) this.props.onRetry();
-                }}
-                className="bg-red-600 text-white px-4 py-2 rounded text-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
-              >
-                Try Again
-              </button>
-            </div>
+function ErrorFallback({ error, resetErrorBoundary, showDetails, componentStack }) {
+  return (
+    <div className="flex flex-col items-center justify-center p-8 text-center">
+      <div className="bg-red-50 border border-red-200 rounded-lg p-6 max-w-md">
+        <div className="flex items-center mb-4">
+          <div className="flex-shrink-0">
+            <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+            </svg>
           </div>
+          <h3 className="ml-3 text-sm font-medium text-red-800">
+            Something went wrong
+          </h3>
         </div>
-      );
-    }
-
-    return this.props.children;
-  }
+        <div className="text-sm text-red-700">
+          <p className="mb-2">An error occurred while loading the chat interface.</p>
+          {showDetails && error && (
+            <details className="mt-4">
+              <summary className="cursor-pointer text-xs font-mono">Error Details</summary>
+              <pre className="mt-2 text-xs bg-red-100 p-2 rounded overflow-auto max-h-40">
+                {error.toString()}
+                {componentStack}
+              </pre>
+            </details>
+          )}
+        </div>
+        <div className="mt-4">
+          <button
+            onClick={resetErrorBoundary}
+            className="bg-red-600 text-white px-4 py-2 rounded text-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    </div>
+  );
 }
 
-export default ErrorBoundary;
+function ErrorBoundary({ children, showDetails = false, onRetry = undefined, resetKeys = undefined }) {
+  const [componentStack, setComponentStack] = useState(null);
+
+  const handleError = useCallback((error, errorInfo) => {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    setComponentStack(errorInfo?.componentStack || null);
+  }, []);
+
+  const handleReset = useCallback(() => {
+    setComponentStack(null);
+    onRetry?.();
+  }, [onRetry]);
+
+  const renderFallback = useCallback(({ error, resetErrorBoundary }) => (
+    <ErrorFallback
+      error={error}
+      resetErrorBoundary={resetErrorBoundary}
+      showDetails={showDetails}
+      componentStack={componentStack}
+    />
+  ), [showDetails, componentStack]);
+
+  return (
+    <ReactErrorBoundary
+      fallbackRender={renderFallback}
+      onError={handleError}
+      onReset={handleReset}
+      resetKeys={resetKeys}
+    >
+      {children}
+    </ReactErrorBoundary>
+  );
+}
+
+export default ErrorBoundary;

src/components/FileTree.jsx

@@ -1,729 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ScrollArea } from './ui/scroll-area';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import {
-  Folder, FolderOpen, File, FileText, FileCode, List, TableProperties, Eye, Search, X,
-  ChevronRight,
-  FileJson, FileType, FileSpreadsheet, FileArchive,
-  Hash, Braces, Terminal, Database, Globe, Palette, Music2, Video, Archive,
-  Lock, Shield, Settings, Image, BookOpen, Cpu, Box, Gem, Coffee,
-  Flame, Hexagon, FileCode2, Code2, Cog, FileWarning, Binary, SquareFunction,
-  Scroll, FlaskConical, NotebookPen, FileCheck, Workflow, Blocks
-} from 'lucide-react';
-import { cn } from '../lib/utils';
-import ImageViewer from './ImageViewer';
-import { api } from '../utils/api';
-
-// ─── File Icon Registry ──────────────────────────────────────────────
-// Maps file extensions (and special filenames) to { icon, colorClass } pairs.
-// Uses lucide-react icons mapped semantically to file types.
-
-const ICON_SIZE = 'w-4 h-4 flex-shrink-0';
-
-const FILE_ICON_MAP = {
-  // ── JavaScript / TypeScript ──
-  js:   { icon: FileCode,   color: 'text-yellow-500' },
-  jsx:  { icon: FileCode,   color: 'text-yellow-500' },
-  mjs:  { icon: FileCode,   color: 'text-yellow-500' },
-  cjs:  { icon: FileCode,   color: 'text-yellow-500' },
-  ts:   { icon: FileCode2,  color: 'text-blue-500' },
-  tsx:  { icon: FileCode2,  color: 'text-blue-500' },
-  mts:  { icon: FileCode2,  color: 'text-blue-500' },
-
-  // ── Python ──
-  py:   { icon: Code2,      color: 'text-emerald-500' },
-  pyw:  { icon: Code2,      color: 'text-emerald-500' },
-  pyi:  { icon: Code2,      color: 'text-emerald-400' },
-  ipynb:{ icon: NotebookPen, color: 'text-orange-500' },
-
-  // ── Rust ──
-  rs:   { icon: Cog,        color: 'text-orange-600' },
-  toml: { icon: Settings,   color: 'text-gray-500' },
-
-  // ── Go ──
-  go:   { icon: Hexagon,    color: 'text-cyan-500' },
-
-  // ── Ruby ──
-  rb:   { icon: Gem,        color: 'text-red-500' },
-  erb:  { icon: Gem,        color: 'text-red-400' },
-
-  // ── PHP ──
-  php:  { icon: Blocks,     color: 'text-violet-500' },
-
-  // ── Java / Kotlin ──
-  java: { icon: Coffee,     color: 'text-red-600' },
-  jar:  { icon: Coffee,     color: 'text-red-500' },
-  kt:   { icon: Hexagon,    color: 'text-violet-500' },
-  kts:  { icon: Hexagon,    color: 'text-violet-400' },
-
-  // ── C / C++ ──
-  c:    { icon: Cpu,        color: 'text-blue-600' },
-  h:    { icon: Cpu,        color: 'text-blue-400' },
-  cpp:  { icon: Cpu,        color: 'text-blue-700' },
-  hpp:  { icon: Cpu,        color: 'text-blue-500' },
-  cc:   { icon: Cpu,        color: 'text-blue-700' },
-
-  // ── C# ──
-  cs:   { icon: Hexagon,    color: 'text-purple-600' },
-
-  // ── Swift ──
-  swift:{ icon: Flame,      color: 'text-orange-500' },
-
-  // ── Lua ──
-  lua:  { icon: SquareFunction, color: 'text-blue-500' },
-
-  // ── R ──
-  r:    { icon: FlaskConical, color: 'text-blue-600' },
-
-  // ── Web ──
-  html: { icon: Globe,      color: 'text-orange-600' },
-  htm:  { icon: Globe,      color: 'text-orange-600' },
-  css:  { icon: Hash,       color: 'text-blue-500' },
-  scss: { icon: Hash,       color: 'text-pink-500' },
-  sass: { icon: Hash,       color: 'text-pink-400' },
-  less: { icon: Hash,       color: 'text-indigo-500' },
-  vue:  { icon: FileCode2,  color: 'text-emerald-500' },
-  svelte:{ icon: FileCode2, color: 'text-orange-500' },
-
-  // ── Data / Config ──
-  json: { icon: Braces,     color: 'text-yellow-600' },
-  jsonc:{ icon: Braces,     color: 'text-yellow-500' },
-  json5:{ icon: Braces,     color: 'text-yellow-500' },
-  yaml: { icon: Settings,   color: 'text-purple-400' },
-  yml:  { icon: Settings,   color: 'text-purple-400' },
-  xml:  { icon: FileCode,   color: 'text-orange-500' },
-  csv:  { icon: FileSpreadsheet, color: 'text-green-600' },
-  tsv:  { icon: FileSpreadsheet, color: 'text-green-500' },
-  sql:  { icon: Database,   color: 'text-blue-500' },
-  graphql:{ icon: Workflow,  color: 'text-pink-500' },
-  gql:  { icon: Workflow,   color: 'text-pink-500' },
-  proto:{ icon: Box,        color: 'text-green-500' },
-  env:  { icon: Shield,     color: 'text-yellow-600' },
-
-  // ── Documents ──
-  md:   { icon: BookOpen,   color: 'text-blue-500' },
-  mdx:  { icon: BookOpen,   color: 'text-blue-400' },
-  txt:  { icon: FileText,   color: 'text-gray-500' },
-  doc:  { icon: FileText,   color: 'text-blue-600' },
-  docx: { icon: FileText,   color: 'text-blue-600' },
-  pdf:  { icon: FileCheck,  color: 'text-red-600' },
-  rtf:  { icon: FileText,   color: 'text-gray-500' },
-  tex:  { icon: Scroll,     color: 'text-teal-600' },
-  rst:  { icon: FileText,   color: 'text-gray-400' },
-
-  // ── Shell / Scripts ──
-  sh:   { icon: Terminal,   color: 'text-green-500' },
-  bash: { icon: Terminal,   color: 'text-green-500' },
-  zsh:  { icon: Terminal,   color: 'text-green-400' },
-  fish: { icon: Terminal,   color: 'text-green-400' },
-  ps1:  { icon: Terminal,   color: 'text-blue-400' },
-  bat:  { icon: Terminal,   color: 'text-gray-500' },
-  cmd:  { icon: Terminal,   color: 'text-gray-500' },
-
-  // ── Images ──
-  png:  { icon: Image,      color: 'text-purple-500' },
-  jpg:  { icon: Image,      color: 'text-purple-500' },
-  jpeg: { icon: Image,      color: 'text-purple-500' },
-  gif:  { icon: Image,      color: 'text-purple-400' },
-  webp: { icon: Image,      color: 'text-purple-400' },
-  ico:  { icon: Image,      color: 'text-purple-400' },
-  bmp:  { icon: Image,      color: 'text-purple-400' },
-  tiff: { icon: Image,      color: 'text-purple-400' },
-  svg:  { icon: Palette,    color: 'text-amber-500' },
-
-  // ── Audio ──
-  mp3:  { icon: Music2,     color: 'text-pink-500' },
-  wav:  { icon: Music2,     color: 'text-pink-500' },
-  ogg:  { icon: Music2,     color: 'text-pink-400' },
-  flac: { icon: Music2,     color: 'text-pink-400' },
-  aac:  { icon: Music2,     color: 'text-pink-400' },
-  m4a:  { icon: Music2,     color: 'text-pink-400' },
-
-  // ── Video ──
-  mp4:  { icon: Video,      color: 'text-rose-500' },
-  mov:  { icon: Video,      color: 'text-rose-500' },
-  avi:  { icon: Video,      color: 'text-rose-500' },
-  webm: { icon: Video,      color: 'text-rose-400' },
-  mkv:  { icon: Video,      color: 'text-rose-400' },
-
-  // ── Fonts ──
-  ttf:  { icon: FileType,   color: 'text-red-500' },
-  otf:  { icon: FileType,   color: 'text-red-500' },
-  woff: { icon: FileType,   color: 'text-red-400' },
-  woff2:{ icon: FileType,   color: 'text-red-400' },
-  eot:  { icon: FileType,   color: 'text-red-400' },
-
-  // ── Archives ──
-  zip:  { icon: Archive,    color: 'text-amber-600' },
-  tar:  { icon: Archive,    color: 'text-amber-600' },
-  gz:   { icon: Archive,    color: 'text-amber-600' },
-  bz2:  { icon: Archive,    color: 'text-amber-600' },
-  rar:  { icon: Archive,    color: 'text-amber-500' },
-  '7z': { icon: Archive,    color: 'text-amber-500' },
-
-  // ── Lock files ──
-  lock: { icon: Lock,       color: 'text-gray-500' },
-
-  // ── Binary / Executable ──
-  exe:  { icon: Binary,     color: 'text-gray-500' },
-  bin:  { icon: Binary,     color: 'text-gray-500' },
-  dll:  { icon: Binary,     color: 'text-gray-400' },
-  so:   { icon: Binary,     color: 'text-gray-400' },
-  dylib:{ icon: Binary,     color: 'text-gray-400' },
-  wasm: { icon: Binary,     color: 'text-purple-500' },
-
-  // ── Misc config ──
-  ini:  { icon: Settings,   color: 'text-gray-500' },
-  cfg:  { icon: Settings,   color: 'text-gray-500' },
-  conf: { icon: Settings,   color: 'text-gray-500' },
-  log:  { icon: Scroll,     color: 'text-gray-400' },
-  map:  { icon: File,       color: 'text-gray-400' },
-};
-
-// Special full-filename matches (highest priority)
-const FILENAME_ICON_MAP = {
-  'Dockerfile':       { icon: Box,       color: 'text-blue-500' },
-  'docker-compose.yml': { icon: Box,     color: 'text-blue-500' },
-  'docker-compose.yaml': { icon: Box,    color: 'text-blue-500' },
-  '.dockerignore':    { icon: Box,       color: 'text-gray-500' },
-  '.gitignore':       { icon: Settings,  color: 'text-gray-500' },
-  '.gitmodules':      { icon: Settings,  color: 'text-gray-500' },
-  '.gitattributes':   { icon: Settings,  color: 'text-gray-500' },
-  '.editorconfig':    { icon: Settings,  color: 'text-gray-500' },
-  '.prettierrc':      { icon: Settings,  color: 'text-pink-400' },
-  '.prettierignore':  { icon: Settings,  color: 'text-gray-500' },
-  '.eslintrc':        { icon: Settings,  color: 'text-violet-500' },
-  '.eslintrc.js':     { icon: Settings,  color: 'text-violet-500' },
-  '.eslintrc.json':   { icon: Settings,  color: 'text-violet-500' },
-  '.eslintrc.cjs':    { icon: Settings,  color: 'text-violet-500' },
-  'eslint.config.js': { icon: Settings,  color: 'text-violet-500' },
-  'eslint.config.mjs':{ icon: Settings,  color: 'text-violet-500' },
-  '.env':             { icon: Shield,    color: 'text-yellow-600' },
-  '.env.local':       { icon: Shield,    color: 'text-yellow-600' },
-  '.env.development': { icon: Shield,    color: 'text-yellow-500' },
-  '.env.production':  { icon: Shield,    color: 'text-yellow-600' },
-  '.env.example':     { icon: Shield,    color: 'text-yellow-400' },
-  'package.json':     { icon: Braces,    color: 'text-green-500' },
-  'package-lock.json':{ icon: Lock,      color: 'text-gray-500' },
-  'yarn.lock':        { icon: Lock,      color: 'text-blue-400' },
-  'pnpm-lock.yaml':   { icon: Lock,      color: 'text-orange-400' },
-  'bun.lockb':        { icon: Lock,      color: 'text-gray-400' },
-  'Cargo.toml':       { icon: Cog,       color: 'text-orange-600' },
-  'Cargo.lock':       { icon: Lock,      color: 'text-orange-400' },
-  'Gemfile':          { icon: Gem,       color: 'text-red-500' },
-  'Gemfile.lock':     { icon: Lock,      color: 'text-red-400' },
-  'Makefile':         { icon: Terminal,   color: 'text-gray-500' },
-  'CMakeLists.txt':   { icon: Cog,       color: 'text-blue-500' },
-  'tsconfig.json':    { icon: Braces,    color: 'text-blue-500' },
-  'jsconfig.json':    { icon: Braces,    color: 'text-yellow-500' },
-  'vite.config.ts':   { icon: Flame,     color: 'text-purple-500' },
-  'vite.config.js':   { icon: Flame,     color: 'text-purple-500' },
-  'webpack.config.js':{ icon: Cog,       color: 'text-blue-500' },
-  'tailwind.config.js':{ icon: Hash,     color: 'text-cyan-500' },
-  'tailwind.config.ts':{ icon: Hash,     color: 'text-cyan-500' },
-  'postcss.config.js':{ icon: Cog,       color: 'text-red-400' },
-  'babel.config.js':  { icon: Settings,  color: 'text-yellow-500' },
-  '.babelrc':         { icon: Settings,  color: 'text-yellow-500' },
-  'README.md':        { icon: BookOpen,  color: 'text-blue-500' },
-  'LICENSE':          { icon: FileCheck,  color: 'text-gray-500' },
-  'LICENSE.md':       { icon: FileCheck,  color: 'text-gray-500' },
-  'CHANGELOG.md':     { icon: Scroll,    color: 'text-blue-400' },
-  'requirements.txt': { icon: FileText,  color: 'text-emerald-400' },
-  'go.mod':           { icon: Hexagon,   color: 'text-cyan-500' },
-  'go.sum':           { icon: Lock,      color: 'text-cyan-400' },
-};
-
-function getFileIconData(filename) {
-  // 1. Exact filename match
-  if (FILENAME_ICON_MAP[filename]) {
-    return FILENAME_ICON_MAP[filename];
-  }
-
-  // 2. Check for .env prefix pattern
-  if (filename.startsWith('.env')) {
-    return { icon: Shield, color: 'text-yellow-600' };
-  }
-
-  // 3. Extension-based lookup
-  const ext = filename.split('.').pop()?.toLowerCase();
-  if (ext && FILE_ICON_MAP[ext]) {
-    return FILE_ICON_MAP[ext];
-  }
-
-  // 4. Fallback
-  return { icon: File, color: 'text-muted-foreground' };
-}
-
-
-// ─── Component ───────────────────────────────────────────────────────
-
-function FileTree({ selectedProject, onFileOpen }) {
-  const { t } = useTranslation();
-  const [files, setFiles] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [expandedDirs, setExpandedDirs] = useState(new Set());
-  const [selectedImage, setSelectedImage] = useState(null);
-  const [viewMode, setViewMode] = useState('detailed');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filteredFiles, setFilteredFiles] = useState([]);
-
-  useEffect(() => {
-    if (selectedProject) {
-      fetchFiles();
-    }
-  }, [selectedProject]);
-
-  useEffect(() => {
-    const savedViewMode = localStorage.getItem('file-tree-view-mode');
-    if (savedViewMode && ['simple', 'detailed', 'compact'].includes(savedViewMode)) {
-      setViewMode(savedViewMode);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!searchQuery.trim()) {
-      setFilteredFiles(files);
-    } else {
-      const filtered = filterFiles(files, searchQuery.toLowerCase());
-      setFilteredFiles(filtered);
-
-      const expandMatches = (items) => {
-        items.forEach(item => {
-          if (item.type === 'directory' && item.children && item.children.length > 0) {
-            setExpandedDirs(prev => new Set(prev.add(item.path)));
-            expandMatches(item.children);
-          }
-        });
-      };
-      expandMatches(filtered);
-    }
-  }, [files, searchQuery]);
-
-  const filterFiles = (items, query) => {
-    return items.reduce((filtered, item) => {
-      const matchesName = item.name.toLowerCase().includes(query);
-      let filteredChildren = [];
-
-      if (item.type === 'directory' && item.children) {
-        filteredChildren = filterFiles(item.children, query);
-      }
-
-      if (matchesName || filteredChildren.length > 0) {
-        filtered.push({
-          ...item,
-          children: filteredChildren
-        });
-      }
-
-      return filtered;
-    }, []);
-  };
-
-  const fetchFiles = async () => {
-    setLoading(true);
-    try {
-      const response = await api.getFiles(selectedProject.name);
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        console.error('❌ File fetch failed:', response.status, errorText);
-        setFiles([]);
-        return;
-      }
-
-      const data = await response.json();
-      setFiles(data);
-    } catch (error) {
-      console.error('❌ Error fetching files:', error);
-      setFiles([]);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const toggleDirectory = (path) => {
-    const newExpanded = new Set(expandedDirs);
-    if (newExpanded.has(path)) {
-      newExpanded.delete(path);
-    } else {
-      newExpanded.add(path);
-    }
-    setExpandedDirs(newExpanded);
-  };
-
-  const changeViewMode = (mode) => {
-    setViewMode(mode);
-    localStorage.setItem('file-tree-view-mode', mode);
-  };
-
-  const formatFileSize = (bytes) => {
-    if (!bytes || bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-  };
-
-  const formatRelativeTime = (date) => {
-    if (!date) return '-';
-    const now = new Date();
-    const past = new Date(date);
-    const diffInSeconds = Math.floor((now - past) / 1000);
-
-    if (diffInSeconds < 60) return t('fileTree.justNow');
-    if (diffInSeconds < 3600) return t('fileTree.minAgo', { count: Math.floor(diffInSeconds / 60) });
-    if (diffInSeconds < 86400) return t('fileTree.hoursAgo', { count: Math.floor(diffInSeconds / 3600) });
-    if (diffInSeconds < 2592000) return t('fileTree.daysAgo', { count: Math.floor(diffInSeconds / 86400) });
-    return past.toLocaleDateString();
-  };
-
-  const isImageFile = (filename) => {
-    const ext = filename.split('.').pop()?.toLowerCase();
-    const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'bmp'];
-    return imageExtensions.includes(ext);
-  };
-
-  const getFileIcon = (filename) => {
-    const { icon: Icon, color } = getFileIconData(filename);
-    return <Icon className={cn(ICON_SIZE, color)} />;
-  };
-
-  // ── Click handler shared across all view modes ──
-  const handleItemClick = (item) => {
-    if (item.type === 'directory') {
-      toggleDirectory(item.path);
-    } else if (isImageFile(item.name)) {
-      setSelectedImage({
-        name: item.name,
-        path: item.path,
-        projectPath: selectedProject.path,
-        projectName: selectedProject.name
-      });
-    } else if (onFileOpen) {
-      onFileOpen(item.path);
-    }
-  };
-
-  // ── Indent guide + folder/file icon rendering ──
-  const renderIndentGuides = (level) => {
-    if (level === 0) return null;
-    return (
-      <span className="flex items-center flex-shrink-0" aria-hidden="true">
-        {Array.from({ length: level }).map((_, i) => (
-          <span
-            key={i}
-            className="inline-block w-4 h-full border-l border-border/50"
-          />
-        ))}
-      </span>
-    );
-  };
-
-  const renderItemIcons = (item) => {
-    const isDir = item.type === 'directory';
-    const isOpen = expandedDirs.has(item.path);
-
-    if (isDir) {
-      return (
-        <span className="flex items-center gap-0.5 flex-shrink-0">
-          <ChevronRight
-            className={cn(
-              'w-3.5 h-3.5 text-muted-foreground/70 transition-transform duration-150',
-              isOpen && 'rotate-90'
-            )}
-          />
-          {isOpen ? (
-            <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
-          ) : (
-            <Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-          )}
-        </span>
-      );
-    }
-
-    return (
-      <span className="flex items-center flex-shrink-0 ml-[18px]">
-        {getFileIcon(item.name)}
-      </span>
-    );
-  };
-
-  // ─── Simple (Tree) View ────────────────────────────────────────────
-  const renderFileTree = (items, level = 0) => {
-    return items.map((item) => {
-      const isDir = item.type === 'directory';
-      const isOpen = isDir && expandedDirs.has(item.path);
-
-      return (
-        <div key={item.path} className="select-none">
-          <div
-            className={cn(
-              'group flex items-center gap-1.5 py-[3px] pr-2 cursor-pointer rounded-sm',
-              'hover:bg-accent/60 transition-colors duration-100',
-              isDir && isOpen && 'border-l-2 border-primary/30',
-              isDir && !isOpen && 'border-l-2 border-transparent',
-              !isDir && 'border-l-2 border-transparent',
-            )}
-            style={{ paddingLeft: `${level * 16 + 4}px` }}
-            onClick={() => handleItemClick(item)}
-          >
-            {renderItemIcons(item)}
-            <span className={cn(
-              'text-[13px] leading-tight truncate',
-              isDir ? 'font-medium text-foreground' : 'text-foreground/90'
-            )}>
-              {item.name}
-            </span>
-          </div>
-
-          {isDir && isOpen && item.children && item.children.length > 0 && (
-            <div className="relative">
-              <span
-                className="absolute top-0 bottom-0 border-l border-border/40"
-                style={{ left: `${level * 16 + 14}px` }}
-                aria-hidden="true"
-              />
-              {renderFileTree(item.children, level + 1)}
-            </div>
-          )}
-        </div>
-      );
-    });
-  };
-
-  // ─── Detailed View ────────────────────────────────────────────────
-  const renderDetailedView = (items, level = 0) => {
-    return items.map((item) => {
-      const isDir = item.type === 'directory';
-      const isOpen = isDir && expandedDirs.has(item.path);
-
-      return (
-        <div key={item.path} className="select-none">
-          <div
-            className={cn(
-              'group grid grid-cols-12 gap-2 py-[3px] pr-2 hover:bg-accent/60 cursor-pointer items-center rounded-sm transition-colors duration-100',
-              isDir && isOpen && 'border-l-2 border-primary/30',
-              isDir && !isOpen && 'border-l-2 border-transparent',
-              !isDir && 'border-l-2 border-transparent',
-            )}
-            style={{ paddingLeft: `${level * 16 + 4}px` }}
-            onClick={() => handleItemClick(item)}
-          >
-            <div className="col-span-5 flex items-center gap-1.5 min-w-0">
-              {renderItemIcons(item)}
-              <span className={cn(
-                'text-[13px] leading-tight truncate',
-                isDir ? 'font-medium text-foreground' : 'text-foreground/90'
-              )}>
-                {item.name}
-              </span>
-            </div>
-            <div className="col-span-2 text-sm text-muted-foreground tabular-nums">
-              {item.type === 'file' ? formatFileSize(item.size) : ''}
-            </div>
-            <div className="col-span-3 text-sm text-muted-foreground">
-              {formatRelativeTime(item.modified)}
-            </div>
-            <div className="col-span-2 text-sm text-muted-foreground font-mono">
-              {item.permissionsRwx || ''}
-            </div>
-          </div>
-
-          {isDir && isOpen && item.children && (
-            <div className="relative">
-              <span
-                className="absolute top-0 bottom-0 border-l border-border/40"
-                style={{ left: `${level * 16 + 14}px` }}
-                aria-hidden="true"
-              />
-              {renderDetailedView(item.children, level + 1)}
-            </div>
-          )}
-        </div>
-      );
-    });
-  };
-
-  // ─── Compact View ──────────────────────────────────────────────────
-  const renderCompactView = (items, level = 0) => {
-    return items.map((item) => {
-      const isDir = item.type === 'directory';
-      const isOpen = isDir && expandedDirs.has(item.path);
-
-      return (
-        <div key={item.path} className="select-none">
-          <div
-            className={cn(
-              'group flex items-center justify-between py-[3px] pr-2 hover:bg-accent/60 cursor-pointer rounded-sm transition-colors duration-100',
-              isDir && isOpen && 'border-l-2 border-primary/30',
-              isDir && !isOpen && 'border-l-2 border-transparent',
-              !isDir && 'border-l-2 border-transparent',
-            )}
-            style={{ paddingLeft: `${level * 16 + 4}px` }}
-            onClick={() => handleItemClick(item)}
-          >
-            <div className="flex items-center gap-1.5 min-w-0">
-              {renderItemIcons(item)}
-              <span className={cn(
-                'text-[13px] leading-tight truncate',
-                isDir ? 'font-medium text-foreground' : 'text-foreground/90'
-              )}>
-                {item.name}
-              </span>
-            </div>
-            <div className="flex items-center gap-3 text-sm text-muted-foreground flex-shrink-0 ml-2">
-              {item.type === 'file' && (
-                <>
-                  <span className="tabular-nums">{formatFileSize(item.size)}</span>
-                  <span className="font-mono">{item.permissionsRwx}</span>
-                </>
-              )}
-            </div>
-          </div>
-
-          {isDir && isOpen && item.children && (
-            <div className="relative">
-              <span
-                className="absolute top-0 bottom-0 border-l border-border/40"
-                style={{ left: `${level * 16 + 14}px` }}
-                aria-hidden="true"
-              />
-              {renderCompactView(item.children, level + 1)}
-            </div>
-          )}
-        </div>
-      );
-    });
-  };
-
-  // ─── Loading state ─────────────────────────────────────────────────
-  if (loading) {
-    return (
-      <div className="h-full flex items-center justify-center">
-        <div className="text-muted-foreground text-sm">
-          {t('fileTree.loading')}
-        </div>
-      </div>
-    );
-  }
-
-  // ─── Main render ───────────────────────────────────────────────────
-  return (
-    <div className="h-full flex flex-col bg-background">
-      {/* Header */}
-      <div className="px-3 pt-3 pb-2 border-b border-border space-y-2">
-        <div className="flex items-center justify-between">
-          <h3 className="text-sm font-medium text-foreground">
-            {t('fileTree.files')}
-          </h3>
-          <div className="flex gap-0.5">
-            <Button
-              variant={viewMode === 'simple' ? 'default' : 'ghost'}
-              size="sm"
-              className="h-7 w-7 p-0"
-              onClick={() => changeViewMode('simple')}
-              title={t('fileTree.simpleView')}
-            >
-              <List className="w-3.5 h-3.5" />
-            </Button>
-            <Button
-              variant={viewMode === 'compact' ? 'default' : 'ghost'}
-              size="sm"
-              className="h-7 w-7 p-0"
-              onClick={() => changeViewMode('compact')}
-              title={t('fileTree.compactView')}
-            >
-              <Eye className="w-3.5 h-3.5" />
-            </Button>
-            <Button
-              variant={viewMode === 'detailed' ? 'default' : 'ghost'}
-              size="sm"
-              className="h-7 w-7 p-0"
-              onClick={() => changeViewMode('detailed')}
-              title={t('fileTree.detailedView')}
-            >
-              <TableProperties className="w-3.5 h-3.5" />
-            </Button>
-          </div>
-        </div>
-
-        {/* Search Bar */}
-        <div className="relative">
-          <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
-          <Input
-            type="text"
-            placeholder={t('fileTree.searchPlaceholder')}
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-8 pr-8 h-8 text-sm"
-          />
-          {searchQuery && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="absolute right-0.5 top-1/2 transform -translate-y-1/2 h-5 w-5 p-0 hover:bg-accent"
-              onClick={() => setSearchQuery('')}
-              title={t('fileTree.clearSearch')}
-            >
-              <X className="w-3 h-3" />
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {/* Column Headers for Detailed View */}
-      {viewMode === 'detailed' && filteredFiles.length > 0 && (
-        <div className="px-3 pt-1.5 pb-1 border-b border-border">
-          <div className="grid grid-cols-12 gap-2 px-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
-            <div className="col-span-5">{t('fileTree.name')}</div>
-            <div className="col-span-2">{t('fileTree.size')}</div>
-            <div className="col-span-3">{t('fileTree.modified')}</div>
-            <div className="col-span-2">{t('fileTree.permissions')}</div>
-          </div>
-        </div>
-      )}
-
-      <ScrollArea className="flex-1 px-2 py-1">
-        {files.length === 0 ? (
-          <div className="text-center py-8">
-            <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-3">
-              <Folder className="w-6 h-6 text-muted-foreground" />
-            </div>
-            <h4 className="font-medium text-foreground mb-1">{t('fileTree.noFilesFound')}</h4>
-            <p className="text-sm text-muted-foreground">
-              {t('fileTree.checkProjectPath')}
-            </p>
-          </div>
-        ) : filteredFiles.length === 0 && searchQuery ? (
-          <div className="text-center py-8">
-            <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-3">
-              <Search className="w-6 h-6 text-muted-foreground" />
-            </div>
-            <h4 className="font-medium text-foreground mb-1">{t('fileTree.noMatchesFound')}</h4>
-            <p className="text-sm text-muted-foreground">
-              {t('fileTree.tryDifferentSearch')}
-            </p>
-          </div>
-        ) : (
-          <div>
-            {viewMode === 'simple' && renderFileTree(filteredFiles)}
-            {viewMode === 'compact' && renderCompactView(filteredFiles)}
-            {viewMode === 'detailed' && renderDetailedView(filteredFiles)}
-          </div>
-        )}
-      </ScrollArea>
-
-      {/* Image Viewer Modal */}
-      {selectedImage && (
-        <ImageViewer
-          file={selectedImage}
-          onClose={() => setSelectedImage(null)}
-        />
-      )}
-    </div>
-  );
-}
-
-export default FileTree;

src/components/GitSettings.jsx

@@ -1,131 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { GitBranch, Check } from 'lucide-react';
-import { authenticatedFetch } from '../utils/api';
-import { useTranslation } from 'react-i18next';
-
-function GitSettings() {
-  const { t } = useTranslation('settings');
-  const [gitName, setGitName] = useState('');
-  const [gitEmail, setGitEmail] = useState('');
-  const [gitConfigLoading, setGitConfigLoading] = useState(false);
-  const [gitConfigSaving, setGitConfigSaving] = useState(false);
-  const [saveStatus, setSaveStatus] = useState(null);
-
-  useEffect(() => {
-    loadGitConfig();
-  }, []);
-
-  const loadGitConfig = async () => {
-    try {
-      setGitConfigLoading(true);
-      const response = await authenticatedFetch('/api/user/git-config');
-      if (response.ok) {
-        const data = await response.json();
-        setGitName(data.gitName || '');
-        setGitEmail(data.gitEmail || '');
-      }
-    } catch (error) {
-      console.error('Error loading git config:', error);
-    } finally {
-      setGitConfigLoading(false);
-    }
-  };
-
-  const saveGitConfig = async () => {
-    try {
-      setGitConfigSaving(true);
-      const response = await authenticatedFetch('/api/user/git-config', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ gitName, gitEmail })
-      });
-
-      if (response.ok) {
-        setSaveStatus('success');
-        setTimeout(() => setSaveStatus(null), 3000);
-      } else {
-        const data = await response.json();
-        setSaveStatus('error');
-        console.error('Failed to save git config:', data.error);
-      }
-    } catch (error) {
-      console.error('Error saving git config:', error);
-      setSaveStatus('error');
-    } finally {
-      setGitConfigSaving(false);
-    }
-  };
-
-  return (
-    <div className="space-y-8">
-      <div>
-        <div className="flex items-center gap-2 mb-4">
-          <GitBranch className="h-5 w-5" />
-          <h3 className="text-lg font-semibold">{t('git.title')}</h3>
-        </div>
-
-        <p className="text-sm text-muted-foreground mb-4">
-          {t('git.description')}
-        </p>
-
-        <div className="p-4 border rounded-lg bg-card space-y-3">
-          <div>
-            <label htmlFor="settings-git-name" className="block text-sm font-medium text-foreground mb-2">
-              {t('git.name.label')}
-            </label>
-            <Input
-              id="settings-git-name"
-              type="text"
-              value={gitName}
-              onChange={(e) => setGitName(e.target.value)}
-              placeholder="John Doe"
-              disabled={gitConfigLoading}
-              className="w-full"
-            />
-            <p className="mt-1 text-xs text-muted-foreground">
-              {t('git.name.help')}
-            </p>
-          </div>
-
-          <div>
-            <label htmlFor="settings-git-email" className="block text-sm font-medium text-foreground mb-2">
-              {t('git.email.label')}
-            </label>
-            <Input
-              id="settings-git-email"
-              type="email"
-              value={gitEmail}
-              onChange={(e) => setGitEmail(e.target.value)}
-              placeholder="john@example.com"
-              disabled={gitConfigLoading}
-              className="w-full"
-            />
-            <p className="mt-1 text-xs text-muted-foreground">
-              {t('git.email.help')}
-            </p>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <Button
-              onClick={saveGitConfig}
-              disabled={gitConfigSaving || !gitName || !gitEmail}
-            >
-              {gitConfigSaving ? t('git.actions.saving') : t('git.actions.save')}
-            </Button>
-
-            {saveStatus === 'success' && (
-              <div className="text-sm text-green-600 dark:text-green-400 flex items-center gap-2">
-                <Check className="w-4 h-4" />
-                {t('git.status.success')}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default GitSettings;

src/components/LoginModal.jsx

@@ -1,5 +1,5 @@
 import { X } from 'lucide-react';
-import StandaloneShell from './StandaloneShell';
+import StandaloneShell from './standalone-shell/view/StandaloneShell';
 import { IS_PLATFORM } from '../constants/config';
 
 /**

src/components/MicButton.jsx

@@ -1,272 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Mic, Loader2, Brain } from 'lucide-react';
-import { transcribeWithWhisper } from '../utils/whisper';
-
-export function MicButton({ onTranscript, className = '' }) {
-  const [state, setState] = useState('idle'); // idle, recording, transcribing, processing
-  const [error, setError] = useState(null);
-  const [isSupported, setIsSupported] = useState(true);
-  
-  const mediaRecorderRef = useRef(null);
-  const streamRef = useRef(null);
-  const chunksRef = useRef([]);
-  const lastTapRef = useRef(0);
-  
-  // Check microphone support on mount
-  useEffect(() => {
-    const checkSupport = () => {
-      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-        setIsSupported(false);
-        setError('Microphone not supported. Please use HTTPS or a modern browser.');
-        return;
-      }
-      
-      // Additional check for secure context
-      if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
-        setIsSupported(false);
-        setError('Microphone requires HTTPS. Please use a secure connection.');
-        return;
-      }
-      
-      setIsSupported(true);
-      setError(null);
-    };
-    
-    checkSupport();
-  }, []);
-
-  // Start recording
-  const startRecording = async () => {
-    try {
-      console.log('Starting recording...');
-      setError(null);
-      chunksRef.current = [];
-
-      // Check if getUserMedia is available
-      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-        throw new Error('Microphone access not available. Please use HTTPS or a supported browser.');
-      }
-
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      streamRef.current = stream;
-
-      const mimeType = MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : 'audio/mp4';
-      const recorder = new MediaRecorder(stream, { mimeType });
-      mediaRecorderRef.current = recorder;
-
-      recorder.ondataavailable = (e) => {
-        if (e.data.size > 0) {
-          chunksRef.current.push(e.data);
-        }
-      };
-
-      recorder.onstop = async () => {
-        console.log('Recording stopped, creating blob...');
-        const blob = new Blob(chunksRef.current, { type: mimeType });
-        
-        // Clean up stream
-        if (streamRef.current) {
-          streamRef.current.getTracks().forEach(track => track.stop());
-          streamRef.current = null;
-        }
-
-        // Start transcribing
-        setState('transcribing');
-        
-        // Check if we're in an enhancement mode
-        const whisperMode = window.localStorage.getItem('whisperMode') || 'default';
-        const isEnhancementMode = whisperMode === 'prompt' || whisperMode === 'vibe' || whisperMode === 'instructions' || whisperMode === 'architect';
-        
-        // Set up a timer to switch to processing state for enhancement modes
-        let processingTimer;
-        if (isEnhancementMode) {
-          processingTimer = setTimeout(() => {
-            setState('processing');
-          }, 2000); // Switch to processing after 2 seconds
-        }
-        
-        try {
-          const text = await transcribeWithWhisper(blob);
-          if (text && onTranscript) {
-            onTranscript(text);
-          }
-        } catch (err) {
-          console.error('Transcription error:', err);
-          setError(err.message);
-        } finally {
-          if (processingTimer) {
-            clearTimeout(processingTimer);
-          }
-          setState('idle');
-        }
-      };
-
-      recorder.start();
-      setState('recording');
-      console.log('Recording started successfully');
-    } catch (err) {
-      console.error('Failed to start recording:', err);
-      
-      // Provide specific error messages based on error type
-      let errorMessage = 'Microphone access failed';
-      
-      if (err.name === 'NotAllowedError') {
-        errorMessage = 'Microphone access denied. Please allow microphone permissions.';
-      } else if (err.name === 'NotFoundError') {
-        errorMessage = 'No microphone found. Please check your audio devices.';
-      } else if (err.name === 'NotSupportedError') {
-        errorMessage = 'Microphone not supported by this browser.';
-      } else if (err.name === 'NotReadableError') {
-        errorMessage = 'Microphone is being used by another application.';
-      } else if (err.message.includes('HTTPS')) {
-        errorMessage = err.message;
-      }
-      
-      setError(errorMessage);
-      setState('idle');
-    }
-  };
-
-  // Stop recording
-  const stopRecording = () => {
-    console.log('Stopping recording...');
-    if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
-      mediaRecorderRef.current.stop();
-      // Don't set state here - let the onstop handler do it
-    } else {
-      // If recorder isn't in recording state, force cleanup
-      console.log('Recorder not in recording state, forcing cleanup');
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach(track => track.stop());
-        streamRef.current = null;
-      }
-      setState('idle');
-    }
-  };
-
-  // Handle button click
-  const handleClick = (e) => {
-    // Prevent double firing on mobile
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    
-    // Don't proceed if microphone is not supported
-    if (!isSupported) {
-      return;
-    }
-    
-    // Debounce for mobile double-tap issue
-    const now = Date.now();
-    if (now - lastTapRef.current < 300) {
-      console.log('Ignoring rapid tap');
-      return;
-    }
-    lastTapRef.current = now;
-    
-    console.log('Button clicked, current state:', state);
-    
-    if (state === 'idle') {
-      startRecording();
-    } else if (state === 'recording') {
-      stopRecording();
-    }
-    // Do nothing if transcribing or processing
-  };
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach(track => track.stop());
-      }
-    };
-  }, []);
-
-  // Button appearance based on state
-  const getButtonAppearance = () => {
-    if (!isSupported) {
-      return {
-        icon: <Mic className="w-5 h-5" />,
-        className: 'bg-gray-400 cursor-not-allowed',
-        disabled: true
-      };
-    }
-    
-    switch (state) {
-      case 'recording':
-        return {
-          icon: <Mic className="w-5 h-5 text-white" />,
-          className: 'bg-red-500 hover:bg-red-600 animate-pulse',
-          disabled: false
-        };
-      case 'transcribing':
-        return {
-          icon: <Loader2 className="w-5 h-5 animate-spin" />,
-          className: 'bg-blue-500 hover:bg-blue-600',
-          disabled: true
-        };
-      case 'processing':
-        return {
-          icon: <Brain className="w-5 h-5 animate-pulse" />,
-          className: 'bg-purple-500 hover:bg-purple-600',
-          disabled: true
-        };
-      default: // idle
-        return {
-          icon: <Mic className="w-5 h-5" />,
-          className: 'bg-gray-700 hover:bg-gray-600',
-          disabled: false
-        };
-    }
-  };
-
-  const { icon, className: buttonClass, disabled } = getButtonAppearance();
-
-  return (
-    <div className="relative">
-      <button
-        type="button"
-        style={{
-          backgroundColor: state === 'recording' ? '#ef4444' : 
-                          state === 'transcribing' ? '#3b82f6' : 
-                          state === 'processing' ? '#a855f7' :
-                          '#374151'
-        }}
-        className={`
-          flex items-center justify-center
-          w-12 h-12 rounded-full
-          text-white transition-all duration-200
-          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
-          dark:ring-offset-gray-800
-          touch-action-manipulation
-          ${disabled ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'}
-          ${state === 'recording' ? 'animate-pulse' : ''}
-          hover:opacity-90
-          ${className}
-        `}
-        onClick={handleClick}
-        disabled={disabled}
-      >
-        {icon}
-      </button>
-      
-      {error && (
-        <div className="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 
-                        bg-red-500 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10
-                        animate-fade-in">
-          {error}
-        </div>
-      )}
-      
-      {state === 'recording' && (
-        <div className="absolute -inset-1 rounded-full border-2 border-red-500 animate-ping pointer-events-none" />
-      )}
-      
-      {state === 'processing' && (
-        <div className="absolute -inset-1 rounded-full border-2 border-purple-500 animate-ping pointer-events-none" />
-      )}
-    </div>
-  );
-}

src/components/NextTaskBanner.jsx

@@ -3,7 +3,7 @@ import { ArrowRight, List, Clock, Flag, CheckCircle, Circle, AlertCircle, Pause,
 import { cn } from '../lib/utils';
 import { useTaskMaster } from '../contexts/TaskMasterContext';
 import { api } from '../utils/api';
-import Shell from './Shell';
+import Shell from './shell/view/Shell';
 import TaskDetail from './TaskDetail';
 
 const NextTaskBanner = ({ onShowAllTasks, onStartTask, className = '' }) => {

src/components/Onboarding.jsx

@@ -1,8 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { ChevronRight, ChevronLeft, Check, GitBranch, User, Mail, LogIn, ExternalLink, Loader2 } from 'lucide-react';
-import ClaudeLogo from './ClaudeLogo';
-import CursorLogo from './CursorLogo';
-import CodexLogo from './CodexLogo';
+import SessionProviderLogo from './llm-logo-provider/SessionProviderLogo';
 import LoginModal from './LoginModal';
 import { authenticatedFetch } from '../utils/api';
 import { useAuth } from '../contexts/AuthContext';
@@ -347,7 +345,7 @@ const Onboarding = ({ onComplete }) => {
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3">
                     <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center">
-                      <ClaudeLogo size={20} />
+                      <SessionProviderLogo provider="claude" className="w-5 h-5" />
                     </div>
                     <div>
                       <div className="font-medium text-foreground flex items-center gap-2">
@@ -380,7 +378,7 @@ const Onboarding = ({ onComplete }) => {
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3">
                     <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
-                      <CursorLogo size={20} />
+                      <SessionProviderLogo provider="cursor" className="w-5 h-5" />
                     </div>
                     <div>
                       <div className="font-medium text-foreground flex items-center gap-2">
@@ -413,7 +411,7 @@ const Onboarding = ({ onComplete }) => {
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3">
                     <div className="w-10 h-10 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-                      <CodexLogo className="w-5 h-5" />
+                      <SessionProviderLogo provider="codex" className="w-5 h-5" />
                     </div>
                     <div>
                       <div className="font-medium text-foreground flex items-center gap-2">

src/components/Shell.jsx

@@ -1,692 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
-import { Terminal } from '@xterm/xterm';
-import { FitAddon } from '@xterm/addon-fit';
-import { WebglAddon } from '@xterm/addon-webgl';
-import { WebLinksAddon } from '@xterm/addon-web-links';
-import '@xterm/xterm/css/xterm.css';
-import { useTranslation } from 'react-i18next';
-import { IS_PLATFORM } from '../constants/config';
-
-const xtermStyles = `
-  .xterm .xterm-screen {
-    outline: none !important;
-  }
-  .xterm:focus .xterm-screen {
-    outline: none !important;
-  }
-  .xterm-screen:focus {
-    outline: none !important;
-  }
-`;
-
-if (typeof document !== 'undefined') {
-  const styleSheet = document.createElement('style');
-  styleSheet.type = 'text/css';
-  styleSheet.innerText = xtermStyles;
-  document.head.appendChild(styleSheet);
-}
-
-function fallbackCopyToClipboard(text) {
-  if (!text || typeof document === 'undefined') return false;
-
-  const textarea = document.createElement('textarea');
-  textarea.value = text;
-  textarea.setAttribute('readonly', '');
-  textarea.style.position = 'fixed';
-  textarea.style.opacity = '0';
-  textarea.style.pointerEvents = 'none';
-  document.body.appendChild(textarea);
-  textarea.focus();
-  textarea.select();
-
-  let copied = false;
-  try {
-    copied = document.execCommand('copy');
-  } catch {
-    copied = false;
-  } finally {
-    document.body.removeChild(textarea);
-  }
-
-  return copied;
-}
-
-const CODEX_DEVICE_AUTH_URL = 'https://auth.openai.com/codex/device';
-
-function isCodexLoginCommand(command) {
-  return typeof command === 'string' && /\bcodex\s+login\b/i.test(command);
-}
-
-function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell = false, onProcessComplete, minimal = false, autoConnect = false }) {
-  const { t } = useTranslation('chat');
-  const terminalRef = useRef(null);
-  const terminal = useRef(null);
-  const fitAddon = useRef(null);
-  const ws = useRef(null);
-  const [isConnected, setIsConnected] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [isRestarting, setIsRestarting] = useState(false);
-  const [lastSessionId, setLastSessionId] = useState(null);
-  const [isConnecting, setIsConnecting] = useState(false);
-  const [authUrl, setAuthUrl] = useState('');
-  const [authUrlCopyStatus, setAuthUrlCopyStatus] = useState('idle');
-  const [isAuthPanelHidden, setIsAuthPanelHidden] = useState(false);
-
-  const selectedProjectRef = useRef(selectedProject);
-  const selectedSessionRef = useRef(selectedSession);
-  const initialCommandRef = useRef(initialCommand);
-  const isPlainShellRef = useRef(isPlainShell);
-  const onProcessCompleteRef = useRef(onProcessComplete);
-  const authUrlRef = useRef('');
-
-  useEffect(() => {
-    selectedProjectRef.current = selectedProject;
-    selectedSessionRef.current = selectedSession;
-    initialCommandRef.current = initialCommand;
-    isPlainShellRef.current = isPlainShell;
-    onProcessCompleteRef.current = onProcessComplete;
-  });
-
-  const openAuthUrlInBrowser = useCallback((url = authUrlRef.current) => {
-    if (!url) return false;
-
-    const popup = window.open(url, '_blank', 'noopener,noreferrer');
-    if (popup) {
-      try {
-        popup.opener = null;
-      } catch {
-        // Ignore cross-origin restrictions when trying to null opener
-      }
-      return true;
-    }
-
-    return false;
-  }, []);
-
-  const copyAuthUrlToClipboard = useCallback(async (url = authUrlRef.current) => {
-    if (!url) return false;
-
-    let copied = false;
-    try {
-      if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
-        await navigator.clipboard.writeText(url);
-        copied = true;
-      }
-    } catch {
-      copied = false;
-    }
-
-    if (!copied) {
-      copied = fallbackCopyToClipboard(url);
-    }
-
-    return copied;
-  }, []);
-
-  const connectWebSocket = useCallback(async () => {
-    if (isConnecting || isConnected) return;
-
-    try {
-      let wsUrl;
-
-      if (IS_PLATFORM) {
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        wsUrl = `${protocol}//${window.location.host}/shell`;
-      } else {
-        const token = localStorage.getItem('auth-token');
-        if (!token) {
-          console.error('No authentication token found for Shell WebSocket connection');
-          return;
-        }
-
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        wsUrl = `${protocol}//${window.location.host}/shell?token=${encodeURIComponent(token)}`;
-      }
-
-      ws.current = new WebSocket(wsUrl);
-
-      ws.current.onopen = () => {
-        setIsConnected(true);
-        setIsConnecting(false);
-        authUrlRef.current = '';
-        setAuthUrl('');
-        setAuthUrlCopyStatus('idle');
-        setIsAuthPanelHidden(false);
-
-        setTimeout(() => {
-          if (fitAddon.current && terminal.current) {
-            fitAddon.current.fit();
-
-            ws.current.send(JSON.stringify({
-              type: 'init',
-              projectPath: selectedProjectRef.current.fullPath || selectedProjectRef.current.path,
-              sessionId: isPlainShellRef.current ? null : selectedSessionRef.current?.id,
-              hasSession: isPlainShellRef.current ? false : !!selectedSessionRef.current,
-              provider: isPlainShellRef.current ? 'plain-shell' : (selectedSessionRef.current?.__provider || 'claude'),
-              cols: terminal.current.cols,
-              rows: terminal.current.rows,
-              initialCommand: initialCommandRef.current,
-              isPlainShell: isPlainShellRef.current
-            }));
-          }
-        }, 100);
-      };
-
-      ws.current.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data);
-
-          if (data.type === 'output') {
-            let output = data.data;
-
-            if (isPlainShellRef.current && onProcessCompleteRef.current) {
-              const cleanOutput = output.replace(/\x1b\[[0-9;]*m/g, '');
-              if (cleanOutput.includes('Process exited with code 0')) {
-                onProcessCompleteRef.current(0);
-              } else if (cleanOutput.match(/Process exited with code (\d+)/)) {
-                const exitCode = parseInt(cleanOutput.match(/Process exited with code (\d+)/)[1]);
-                if (exitCode !== 0) {
-                  onProcessCompleteRef.current(exitCode);
-                }
-              }
-            }
-
-            if (terminal.current) {
-              terminal.current.write(output);
-            }
-          } else if (data.type === 'auth_url' && data.url) {
-            authUrlRef.current = data.url;
-            setAuthUrl(data.url);
-            setAuthUrlCopyStatus('idle');
-            setIsAuthPanelHidden(false);
-          } else if (data.type === 'url_open') {
-            if (data.url) {
-              authUrlRef.current = data.url;
-              setAuthUrl(data.url);
-              setAuthUrlCopyStatus('idle');
-              setIsAuthPanelHidden(false);
-            }
-          }
-        } catch (error) {
-          console.error('[Shell] Error handling WebSocket message:', error, event.data);
-        }
-      };
-
-      ws.current.onclose = (event) => {
-        setIsConnected(false);
-        setIsConnecting(false);
-        setAuthUrlCopyStatus('idle');
-        setIsAuthPanelHidden(false);
-
-        if (terminal.current) {
-          terminal.current.clear();
-          terminal.current.write('\x1b[2J\x1b[H');
-        }
-      };
-
-      ws.current.onerror = (error) => {
-        setIsConnected(false);
-        setIsConnecting(false);
-      };
-    } catch (error) {
-      setIsConnected(false);
-      setIsConnecting(false);
-    }
-  }, [isConnecting, isConnected, openAuthUrlInBrowser]);
-
-  const connectToShell = useCallback(() => {
-    if (!isInitialized || isConnected || isConnecting) return;
-    setIsConnecting(true);
-    connectWebSocket();
-  }, [isInitialized, isConnected, isConnecting, connectWebSocket]);
-
-  const disconnectFromShell = useCallback(() => {
-    if (ws.current) {
-      ws.current.close();
-      ws.current = null;
-    }
-
-    if (terminal.current) {
-      terminal.current.clear();
-      terminal.current.write('\x1b[2J\x1b[H');
-    }
-
-    setIsConnected(false);
-    setIsConnecting(false);
-    authUrlRef.current = '';
-    setAuthUrl('');
-    setAuthUrlCopyStatus('idle');
-    setIsAuthPanelHidden(false);
-  }, []);
-
-  const sessionDisplayName = useMemo(() => {
-    if (!selectedSession) return null;
-    return selectedSession.__provider === 'cursor'
-      ? (selectedSession.name || 'Untitled Session')
-      : (selectedSession.summary || 'New Session');
-  }, [selectedSession]);
-
-  const sessionDisplayNameShort = useMemo(() => {
-    if (!sessionDisplayName) return null;
-    return sessionDisplayName.slice(0, 30);
-  }, [sessionDisplayName]);
-
-  const sessionDisplayNameLong = useMemo(() => {
-    if (!sessionDisplayName) return null;
-    return sessionDisplayName.slice(0, 50);
-  }, [sessionDisplayName]);
-
-  const restartShell = () => {
-    setIsRestarting(true);
-
-    if (ws.current) {
-      ws.current.close();
-      ws.current = null;
-    }
-
-    if (terminal.current) {
-      terminal.current.dispose();
-      terminal.current = null;
-      fitAddon.current = null;
-    }
-
-    setIsConnected(false);
-    setIsInitialized(false);
-    authUrlRef.current = '';
-    setAuthUrl('');
-    setAuthUrlCopyStatus('idle');
-    setIsAuthPanelHidden(false);
-
-    setTimeout(() => {
-      setIsRestarting(false);
-    }, 200);
-  };
-
-  useEffect(() => {
-    const currentSessionId = selectedSession?.id || null;
-
-    if (lastSessionId !== null && lastSessionId !== currentSessionId && isInitialized) {
-      disconnectFromShell();
-    }
-
-    setLastSessionId(currentSessionId);
-  }, [selectedSession?.id, isInitialized, disconnectFromShell]);
-
-  useEffect(() => {
-    if (!terminalRef.current || !selectedProject || isRestarting || terminal.current) {
-      return;
-    }
-
-
-    terminal.current = new Terminal({
-      cursorBlink: true,
-      fontSize: 14,
-      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-      allowProposedApi: true,
-      allowTransparency: false,
-      convertEol: true,
-      scrollback: 10000,
-      tabStopWidth: 4,
-      windowsMode: false,
-      macOptionIsMeta: true,
-      macOptionClickForcesSelection: true,
-      theme: {
-        background: '#1e1e1e',
-        foreground: '#d4d4d4',
-        cursor: '#ffffff',
-        cursorAccent: '#1e1e1e',
-        selection: '#264f78',
-        selectionForeground: '#ffffff',
-        black: '#000000',
-        red: '#cd3131',
-        green: '#0dbc79',
-        yellow: '#e5e510',
-        blue: '#2472c8',
-        magenta: '#bc3fbc',
-        cyan: '#11a8cd',
-        white: '#e5e5e5',
-        brightBlack: '#666666',
-        brightRed: '#f14c4c',
-        brightGreen: '#23d18b',
-        brightYellow: '#f5f543',
-        brightBlue: '#3b8eea',
-        brightMagenta: '#d670d6',
-        brightCyan: '#29b8db',
-        brightWhite: '#ffffff',
-        extendedAnsi: [
-          '#000000', '#800000', '#008000', '#808000',
-          '#000080', '#800080', '#008080', '#c0c0c0',
-          '#808080', '#ff0000', '#00ff00', '#ffff00',
-          '#0000ff', '#ff00ff', '#00ffff', '#ffffff'
-        ]
-      }
-    });
-
-    fitAddon.current = new FitAddon();
-    const webglAddon = new WebglAddon();
-    const webLinksAddon = new WebLinksAddon();
-
-    terminal.current.loadAddon(fitAddon.current);
-    // Disable xterm link auto-detection in minimal (login) mode to avoid partial wrapped URL links.
-    if (!minimal) {
-      terminal.current.loadAddon(webLinksAddon);
-    }
-    // Note: ClipboardAddon removed - we handle clipboard operations manually in attachCustomKeyEventHandler
-
-    try {
-      terminal.current.loadAddon(webglAddon);
-    } catch (error) {
-      console.warn('[Shell] WebGL renderer unavailable, using Canvas fallback');
-    }
-
-    terminal.current.open(terminalRef.current);
-
-    terminal.current.attachCustomKeyEventHandler((event) => {
-      const activeAuthUrl = isCodexLoginCommand(initialCommandRef.current)
-        ? CODEX_DEVICE_AUTH_URL
-        : authUrlRef.current;
-
-      if (
-        event.type === 'keydown' &&
-        minimal &&
-        isPlainShellRef.current &&
-        activeAuthUrl &&
-        !event.ctrlKey &&
-        !event.metaKey &&
-        !event.altKey &&
-        event.key?.toLowerCase() === 'c'
-      ) {
-        copyAuthUrlToClipboard(activeAuthUrl).catch(() => {});
-      }
-
-      if (
-        event.type === 'keydown' &&
-        (event.ctrlKey || event.metaKey) &&
-        event.key?.toLowerCase() === 'c' &&
-        terminal.current.hasSelection()
-      ) {
-        event.preventDefault();
-        event.stopPropagation();
-        document.execCommand('copy');
-        return false;
-      }
-
-      if (
-        event.type === 'keydown' &&
-        (event.ctrlKey || event.metaKey) &&
-        event.key?.toLowerCase() === 'v'
-      ) {
-        // Block native browser/xterm paste so clipboard data is only sent after
-        // the explicit clipboard-read flow resolves (avoids duplicate pastes).
-        event.preventDefault();
-        event.stopPropagation();
-
-        navigator.clipboard.readText().then(text => {
-          if (ws.current && ws.current.readyState === WebSocket.OPEN) {
-            ws.current.send(JSON.stringify({
-              type: 'input',
-              data: text
-            }));
-          }
-        }).catch(() => {});
-        return false;
-      }
-
-      return true;
-    });
-
-    setTimeout(() => {
-      if (fitAddon.current) {
-        fitAddon.current.fit();
-        if (terminal.current && ws.current && ws.current.readyState === WebSocket.OPEN) {
-          ws.current.send(JSON.stringify({
-            type: 'resize',
-            cols: terminal.current.cols,
-            rows: terminal.current.rows
-          }));
-        }
-      }
-    }, 100);
-
-    setIsInitialized(true);
-    terminal.current.onData((data) => {
-      if (ws.current && ws.current.readyState === WebSocket.OPEN) {
-        ws.current.send(JSON.stringify({
-          type: 'input',
-          data: data
-        }));
-      }
-    });
-
-    const resizeObserver = new ResizeObserver(() => {
-      if (fitAddon.current && terminal.current) {
-        setTimeout(() => {
-          fitAddon.current.fit();
-          if (ws.current && ws.current.readyState === WebSocket.OPEN) {
-            ws.current.send(JSON.stringify({
-              type: 'resize',
-              cols: terminal.current.cols,
-              rows: terminal.current.rows
-            }));
-          }
-        }, 50);
-      }
-    });
-
-    if (terminalRef.current) {
-      resizeObserver.observe(terminalRef.current);
-    }
-
-    return () => {
-      resizeObserver.disconnect();
-
-      if (ws.current && (ws.current.readyState === WebSocket.OPEN || ws.current.readyState === WebSocket.CONNECTING)) {
-        ws.current.close();
-      }
-      ws.current = null;
-
-      if (terminal.current) {
-        terminal.current.dispose();
-        terminal.current = null;
-      }
-    };
-  }, [selectedProject?.path || selectedProject?.fullPath, isRestarting, minimal, copyAuthUrlToClipboard]);
-
-  useEffect(() => {
-    if (!autoConnect || !isInitialized || isConnecting || isConnected) return;
-    connectToShell();
-  }, [autoConnect, isInitialized, isConnecting, isConnected, connectToShell]);
-
-  if (!selectedProject) {
-    return (
-      <div className="h-full flex items-center justify-center">
-        <div className="text-center text-gray-500 dark:text-gray-400">
-          <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-semibold mb-2">{t('shell.selectProject.title')}</h3>
-          <p>{t('shell.selectProject.description')}</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (minimal) {
-    const displayAuthUrl = isCodexLoginCommand(initialCommand)
-      ? CODEX_DEVICE_AUTH_URL
-      : authUrl;
-    const hasAuthUrl = Boolean(displayAuthUrl);
-    const showMobileAuthPanel = hasAuthUrl && !isAuthPanelHidden;
-    const showMobileAuthPanelToggle = hasAuthUrl && isAuthPanelHidden;
-
-    return (
-      <div className="h-full w-full bg-gray-900 relative">
-        <div ref={terminalRef} className="h-full w-full focus:outline-none" style={{ outline: 'none' }} />
-        {showMobileAuthPanel && (
-          <div className="absolute inset-x-0 bottom-14 z-20 border-t border-gray-700/80 bg-gray-900/95 p-3 backdrop-blur-sm md:hidden">
-            <div className="flex flex-col gap-2">
-              <div className="flex items-center justify-between gap-2">
-                <p className="text-xs text-gray-300">Open or copy the login URL:</p>
-                <button
-                  type="button"
-                  onClick={() => setIsAuthPanelHidden(true)}
-                  className="rounded bg-gray-700 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-gray-100 hover:bg-gray-600"
-                >
-                  Hide
-                </button>
-              </div>
-              <input
-                type="text"
-                value={displayAuthUrl}
-                readOnly
-                onClick={(event) => event.currentTarget.select()}
-                className="w-full rounded border border-gray-600 bg-gray-800 px-2 py-1 text-xs text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500"
-                aria-label="Authentication URL"
-              />
-              <div className="flex items-center gap-2">
-                <button
-                  type="button"
-                  onClick={() => {
-                    openAuthUrlInBrowser(displayAuthUrl);
-                  }}
-                  className="flex-1 rounded bg-blue-600 px-3 py-2 text-xs font-medium text-white hover:bg-blue-700"
-                >
-                  Open URL
-                </button>
-                <button
-                  type="button"
-                  onClick={async () => {
-                    const copied = await copyAuthUrlToClipboard(displayAuthUrl);
-                    setAuthUrlCopyStatus(copied ? 'copied' : 'failed');
-                  }}
-                  className="flex-1 rounded bg-gray-700 px-3 py-2 text-xs font-medium text-white hover:bg-gray-600"
-                >
-                  {authUrlCopyStatus === 'copied' ? 'Copied' : 'Copy URL'}
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-        {showMobileAuthPanelToggle && (
-          <div className="absolute bottom-14 right-3 z-20 md:hidden">
-            <button
-              type="button"
-              onClick={() => setIsAuthPanelHidden(false)}
-              className="rounded bg-gray-800/95 px-3 py-2 text-xs font-medium text-gray-100 shadow-lg backdrop-blur-sm hover:bg-gray-700"
-            >
-              Show login URL
-            </button>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full flex flex-col bg-gray-900 w-full">
-      <div className="flex-shrink-0 bg-gray-800 border-b border-gray-700 px-4 py-2">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-2">
-            <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
-            {selectedSession && (
-              <span className="text-xs text-blue-300">
-                ({sessionDisplayNameShort}...)
-              </span>
-            )}
-            {!selectedSession && (
-              <span className="text-xs text-gray-400">{t('shell.status.newSession')}</span>
-            )}
-            {!isInitialized && (
-              <span className="text-xs text-yellow-400">{t('shell.status.initializing')}</span>
-            )}
-            {isRestarting && (
-              <span className="text-xs text-blue-400">{t('shell.status.restarting')}</span>
-            )}
-          </div>
-          <div className="flex items-center space-x-3">
-            {isConnected && (
-              <button
-                onClick={disconnectFromShell}
-                className="px-3 py-1 text-xs bg-red-600 text-white rounded hover:bg-red-700 flex items-center space-x-1"
-                title={t('shell.actions.disconnectTitle')}
-              >
-                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-                <span>{t('shell.actions.disconnect')}</span>
-              </button>
-            )}
-
-            <button
-              onClick={restartShell}
-              disabled={isRestarting || isConnected}
-              className="text-xs text-gray-400 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1"
-              title={t('shell.actions.restartTitle')}
-            >
-              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-              </svg>
-              <span>{t('shell.actions.restart')}</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div className="flex-1 p-2 overflow-hidden relative">
-        <div ref={terminalRef} className="h-full w-full focus:outline-none" style={{ outline: 'none' }} />
-
-        {!isInitialized && (
-          <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90">
-            <div className="text-white">{t('shell.loading')}</div>
-          </div>
-        )}
-
-        {isInitialized && !isConnected && !isConnecting && (
-          <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 p-4">
-            <div className="text-center max-w-sm w-full">
-              <button
-                onClick={connectToShell}
-                className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center justify-center space-x-2 text-base font-medium w-full sm:w-auto"
-                title={t('shell.actions.connectTitle')}
-              >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                </svg>
-                <span>{t('shell.actions.connect')}</span>
-              </button>
-              <p className="text-gray-400 text-sm mt-3 px-2">
-                {isPlainShell ?
-                  t('shell.runCommand', { command: initialCommand || t('shell.defaultCommand'), projectName: selectedProject.displayName }) :
-                  selectedSession ?
-                    t('shell.resumeSession', { displayName: sessionDisplayNameLong }) :
-                    t('shell.startSession')
-                }
-              </p>
-            </div>
-          </div>
-        )}
-
-        {isConnecting && (
-          <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 p-4">
-            <div className="text-center max-w-sm w-full">
-              <div className="flex items-center justify-center space-x-3 text-yellow-400">
-                <div className="w-6 h-6 animate-spin rounded-full border-2 border-yellow-400 border-t-transparent"></div>
-                <span className="text-base font-medium">{t('shell.connecting')}</span>
-              </div>
-              <p className="text-gray-400 text-sm mt-3 px-2">
-                {isPlainShell ?
-                  t('shell.runCommand', { command: initialCommand || t('shell.defaultCommand'), projectName: selectedProject.displayName }) :
-                  t('shell.startCli', { projectName: selectedProject.displayName })
-                }
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default Shell;

src/components/StandaloneShell.jsx

@@ -1,105 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import Shell from './Shell.jsx';
-
-/**
- * Generic Shell wrapper that can be used in tabs, modals, and other contexts.
- * Provides a flexible API for both standalone and session-based usage.
- *
- * @param {Object} project - Project object with name, fullPath/path, displayName
- * @param {Object} session - Session object (optional, for tab usage)
- * @param {string} command - Initial command to run (optional)
- * @param {boolean} isPlainShell - Use plain shell mode vs Claude CLI (default: auto-detect)
- * @param {boolean} autoConnect - Whether to auto-connect when mounted (default: true)
- * @param {function} onComplete - Callback when process completes (receives exitCode)
- * @param {function} onClose - Callback for close button (optional)
- * @param {string} title - Custom header title (optional)
- * @param {string} className - Additional CSS classes
- * @param {boolean} showHeader - Whether to show custom header (default: true)
- * @param {boolean} compact - Use compact layout (default: false)
- * @param {boolean} minimal - Use minimal mode: no header, no overlays, auto-connect (default: false)
- */
-function StandaloneShell({
-  project,
-  session = null,
-  command = null,
-  isPlainShell = null,
-  autoConnect = true,
-  onComplete = null,
-  onClose = null,
-  title = null,
-  className = "",
-  showHeader = true,
-  compact = false,
-  minimal = false
-}) {
-  const [isCompleted, setIsCompleted] = useState(false);
-
-  const shouldUsePlainShell = isPlainShell !== null ? isPlainShell : (command !== null);
-
-  const handleProcessComplete = useCallback((exitCode) => {
-    setIsCompleted(true);
-    if (onComplete) {
-      onComplete(exitCode);
-    }
-  }, [onComplete]);
-
-  if (!project) {
-    return (
-      <div className={`h-full flex items-center justify-center ${className}`}>
-        <div className="text-center text-gray-500 dark:text-gray-400">
-          <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 002 2z" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-semibold mb-2">No Project Selected</h3>
-          <p>A project is required to open a shell</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`h-full w-full flex flex-col ${className}`}>
-      {/* Optional custom header */}
-      {!minimal && showHeader && title && (
-        <div className="flex-shrink-0 bg-gray-800 border-b border-gray-700 px-4 py-2">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-2">
-              <h3 className="text-sm font-medium text-gray-200">{title}</h3>
-              {isCompleted && (
-                <span className="text-xs text-green-400">(Completed)</span>
-              )}
-            </div>
-            {onClose && (
-              <button
-                onClick={onClose}
-                className="text-gray-400 hover:text-white"
-                title="Close"
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Shell component wrapper */}
-      <div className="flex-1 w-full min-h-0">
-        <Shell
-          selectedProject={project}
-          selectedSession={session}
-          initialCommand={command}
-          isPlainShell={shouldUsePlainShell}
-          onProcessComplete={handleProcessComplete}
-          minimal={minimal}
-          autoConnect={minimal ? true : autoConnect}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default StandaloneShell;

src/components/TaskDetail.jsx

@@ -4,6 +4,7 @@ import { cn } from '../lib/utils';
 import TaskIndicator from './TaskIndicator';
 import { api } from '../utils/api';
 import { useTaskMaster } from '../contexts/TaskMasterContext';
+import { copyTextToClipboard } from '../utils/clipboard';
 
 const TaskDetail = ({ 
   task, 
@@ -79,7 +80,7 @@ const TaskDetail = ({
   };
 
   const copyTaskId = () => {
-    navigator.clipboard.writeText(task.id.toString());
+    copyTextToClipboard(task.id.toString());
   };
 
   const getStatusConfig = (status) => {

src/components/TaskList.jsx

@@ -1,10 +1,10 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { Search, Filter, ArrowUpDown, ArrowUp, ArrowDown, List, Grid, ChevronDown, Columns, Plus, Settings, Terminal, FileText, HelpCircle, X } from 'lucide-react';
 import { cn } from '../lib/utils';
 import TaskCard from './TaskCard';
 import CreateTaskModal from './CreateTaskModal';
 import { useTaskMaster } from '../contexts/TaskMasterContext';
-import Shell from './Shell';
+import Shell from './shell/view/Shell';
 import { api } from '../utils/api';
 import { useTranslation } from 'react-i18next';
 
@@ -32,6 +32,7 @@ const TaskList = ({
   const [showHelpGuide, setShowHelpGuide] = useState(false);
   const [isTaskMasterComplete, setIsTaskMasterComplete] = useState(false);
   const [showPRDDropdown, setShowPRDDropdown] = useState(false);
+  const dropdownRef = useRef(null);
 
   const { projectTaskMaster, refreshProjects, refreshTasks, setCurrentProject } = useTaskMaster();
   const { t } = useTranslation('tasks');
@@ -39,7 +40,11 @@ const TaskList = ({
   // Close PRD dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event) => {
-      if (showPRDDropdown && !event.target.closest('.relative')) {
+      if (
+        showPRDDropdown &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target)
+      ) {
         setShowPRDDropdown(false);
       }
     };
@@ -48,6 +53,31 @@ const TaskList = ({
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [showPRDDropdown]);
 
+  const loadPRDOptions = async (prd, closeDropdown = false) => {
+    if (!currentProject) {
+      return;
+    }
+
+    try {
+      const response = await api.get(`/taskmaster/prd/${encodeURIComponent(currentProject.name)}/${encodeURIComponent(prd.name)}`);
+      if (response.ok) {
+        const prdData = await response.json();
+        onShowPRDEditor?.({
+          name: prd.name,
+          content: prdData.content,
+          isExisting: true
+        });
+        if (closeDropdown) {
+          setShowPRDDropdown(false);
+        }
+      } else {
+        console.error('Failed to load PRD:', response.statusText);
+      }
+    } catch (error) {
+      console.error('Error loading PRD:', error);
+    }
+  };
+
   // Get unique status values from tasks
   const statuses = useMemo(() => {
     const statusSet = new Set(tasks.map(task => task.status).filter(Boolean));
@@ -309,23 +339,8 @@ const TaskList = ({
                             {existingPRDs.map((prd) => (
                               <button
                                 key={prd.name}
-                                onClick={async () => {
-                                  try {
-                                    // Load the PRD content from the API
-                                    const response = await api.get(`/taskmaster/prd/${encodeURIComponent(currentProject.name)}/${encodeURIComponent(prd.name)}`);
-                                    if (response.ok) {
-                                      const prdData = await response.json();
-                                      onShowPRDEditor?.({
-                                        name: prd.name,
-                                        content: prdData.content,
-                                        isExisting: true
-                                      });
-                                    } else {
-                                      console.error('Failed to load PRD:', response.statusText);
-                                    }
-                                  } catch (error) {
-                                    console.error('Error loading PRD:', error);
-                                  }
+                                onClick={() => {
+                                  void loadPRDOptions(prd);
                                 }}
                                 className="inline-flex items-center gap-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-2 py-1 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                               >
@@ -589,7 +604,7 @@ const TaskList = ({
               </button>
 
               {/* PRD Management */}
-              <div className="relative">
+              <div ref={dropdownRef} className="relative">
                 {existingPRDs.length > 0 ? (
                   // Dropdown when PRDs exist
                   <div className="relative">
@@ -624,21 +639,8 @@ const TaskList = ({
                           {existingPRDs.map((prd) => (
                             <button
                               key={prd.name}
-                              onClick={async () => {
-                                try {
-                                  const response = await api.get(`/taskmaster/prd/${encodeURIComponent(currentProject.name)}/${encodeURIComponent(prd.name)}`);
-                                  if (response.ok) {
-                                    const prdData = await response.json();
-                                    onShowPRDEditor?.({
-                                      name: prd.name,
-                                      content: prdData.content,
-                                      isExisting: true
-                                    });
-                                    setShowPRDDropdown(false);
-                                  }
-                                } catch (error) {
-                                  console.error('Error loading PRD:', error);
-                                }
+                              onClick={() => {
+                                void loadPRDOptions(prd, true);
                               }}
                               className="w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
                               title={t('prd.modified', { date: new Date(prd.modified).toLocaleDateString() })}
@@ -1050,4 +1052,4 @@ const TaskList = ({
   );
 };
 
-export default TaskList;
+export default TaskList;

src/components/TaskMasterSetupWizard.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { X, ChevronRight, ChevronLeft, CheckCircle, AlertCircle, Settings, Server, FileText, Sparkles, ExternalLink, Copy } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { api } from '../utils/api';
+import { copyTextToClipboard } from '../utils/clipboard';
 
 const TaskMasterSetupWizard = ({ 
   isOpen = true, 
@@ -175,7 +176,7 @@ const TaskMasterSetupWizard = ({
     }
   }
 }`;
-    navigator.clipboard.writeText(mcpConfig);
+    copyTextToClipboard(mcpConfig);
   };
 
   const renderStepContent = () => {

src/components/TasksSettings.jsx

@@ -1,109 +1,3 @@
-import { Zap } from 'lucide-react';
-import { useTasksSettings } from '../contexts/TasksSettingsContext';
-import { useTranslation } from 'react-i18next';
+import TasksSettingsTab from './settings/view/tabs/tasks-settings/TasksSettingsTab';
 
-function TasksSettings() {
-  const { t } = useTranslation('settings');
-  const {
-    tasksEnabled,
-    setTasksEnabled,
-    isTaskMasterInstalled,
-    isCheckingInstallation
-  } = useTasksSettings();
-
-  return (
-    <div className="space-y-8">
-      {/* Installation Status Check */}
-      {isCheckingInstallation ? (
-        <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
-          <div className="flex items-center gap-3">
-            <div className="animate-spin w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full"></div>
-            <span className="text-sm text-muted-foreground">{t('tasks.checking')}</span>
-          </div>
-        </div>
-      ) : (
-        <>
-          {/* TaskMaster Not Installed Warning */}
-          {!isTaskMasterInstalled && (
-            <div className="bg-orange-50 dark:bg-orange-950/50 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
-              <div className="flex items-start gap-3">
-                <div className="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <svg className="w-4 h-4 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
-                  </svg>
-                </div>
-                <div className="flex-1">
-                  <div className="font-medium text-orange-900 dark:text-orange-100 mb-2">
-                    {t('tasks.notInstalled.title')}
-                  </div>
-                  <div className="text-sm text-orange-800 dark:text-orange-200 space-y-3">
-                    <p>{t('tasks.notInstalled.description')}</p>
-
-                    <div className="bg-orange-100 dark:bg-orange-900/50 rounded-lg p-3 font-mono text-sm">
-                      <code>{t('tasks.notInstalled.installCommand')}</code>
-                    </div>
-
-                    <div>
-                      <a
-                        href="https://github.com/eyaltoledano/claude-task-master"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm"
-                      >
-                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                          <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
-                        </svg>
-                        {t('tasks.notInstalled.viewOnGitHub')}
-                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                        </svg>
-                      </a>
-                    </div>
-
-                    <div className="space-y-2">
-                      <p className="font-medium">{t('tasks.notInstalled.afterInstallation')}</p>
-                      <ol className="list-decimal list-inside space-y-1 text-xs">
-                        <li>{t('tasks.notInstalled.steps.restart')}</li>
-                        <li>{t('tasks.notInstalled.steps.autoAvailable')}</li>
-                        <li>{t('tasks.notInstalled.steps.initCommand')}</li>
-                      </ol>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* TaskMaster Settings */}
-          {isTaskMasterInstalled && (
-            <div className="space-y-4">
-              <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <div className="font-medium text-foreground">
-                      {t('tasks.settings.enableLabel')}
-                    </div>
-                    <div className="text-sm text-muted-foreground mt-1">
-                      {t('tasks.settings.enableDescription')}
-                    </div>
-                  </div>
-                  <label className="relative inline-flex items-center cursor-pointer">
-                    <input
-                      type="checkbox"
-                      checked={tasksEnabled}
-                      onChange={(e) => setTasksEnabled(e.target.checked)}
-                      className="sr-only peer"
-                    />
-                    <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                  </label>
-                </div>
-              </div>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-export default TasksSettings;
+export default TasksSettingsTab;

src/components/chat/hooks/useChatComposerState.ts

@@ -47,6 +47,7 @@ interface UseChatComposerStateArgs {
   sendMessage: (message: unknown) => void;
   sendByCtrlEnter?: boolean;
   onSessionActive?: (sessionId?: string | null) => void;
+  onSessionProcessing?: (sessionId?: string | null) => void;
   onInputFocusChange?: (focused: boolean) => void;
   onFileOpen?: (filePath: string, diffInfo?: unknown) => void;
   onShowSettings?: () => void;
@@ -98,6 +99,7 @@ export function useChatComposerState({
   sendMessage,
   sendByCtrlEnter,
   onSessionActive,
+  onSessionProcessing,
   onInputFocusChange,
   onFileOpen,
   onShowSettings,
@@ -569,6 +571,9 @@ export function useChatComposerState({
         pendingViewSessionRef.current = { sessionId: null, startedAt: Date.now() };
       }
       onSessionActive?.(sessionToActivate);
+      if (effectiveSessionId && !isTemporarySessionId(effectiveSessionId)) {
+        onSessionProcessing?.(effectiveSessionId);
+      }
 
       const getToolsSettings = () => {
         try {
@@ -666,6 +671,7 @@ export function useChatComposerState({
       executeCommand,
       isLoading,
       onSessionActive,
+      onSessionProcessing,
       pendingViewSessionRef,
       permissionMode,
       provider,

src/components/chat/hooks/useChatRealtimeHandlers.ts

@@ -956,12 +956,26 @@ export function useChatRealtimeHandlers({
 
       case 'session-status': {
         const statusSessionId = latestMessage.sessionId;
+        if (!statusSessionId) {
+          break;
+        }
+
         const isCurrentSession =
           statusSessionId === currentSessionId || (selectedSession && statusSessionId === selectedSession.id);
-        if (isCurrentSession && latestMessage.isProcessing) {
-          setIsLoading(true);
-          setCanAbortSession(true);
+
+        if (latestMessage.isProcessing) {
           onSessionProcessing?.(statusSessionId);
+          if (isCurrentSession) {
+            setIsLoading(true);
+            setCanAbortSession(true);
+          }
+          break;
+        }
+
+        onSessionInactive?.(statusSessionId);
+        onSessionNotProcessing?.(statusSessionId);
+        if (isCurrentSession) {
+          clearLoadingIndicators();
         }
         break;
       }

src/components/chat/tools/components/OneLineDisplay.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
+import { copyTextToClipboard } from '../../../../utils/clipboard';
 
 type ActionType = 'copy' | 'open-file' | 'jump-to-results' | 'none';
 
 interface OneLineDisplayProps {
-
   toolName: string;
   icon?: string;
   label?: string;
@@ -25,52 +25,6 @@ interface OneLineDisplayProps {
   toolId?: string;
 }
 
-// Fallback for environments where the async Clipboard API is unavailable or blocked.
-const copyWithLegacyExecCommand = (text: string): boolean => {
-  if (typeof document === 'undefined' || !document.body) {
-    return false;
-  }
-
-  const textarea = document.createElement('textarea');
-  textarea.value = text;
-  textarea.setAttribute('readonly', '');
-  textarea.style.position = 'fixed';
-  textarea.style.opacity = '0';
-  textarea.style.left = '-9999px';
-  document.body.appendChild(textarea);
-  textarea.select();
-  textarea.setSelectionRange(0, text.length);
-
-  let copied = false;
-  try {
-    copied = document.execCommand('copy');
-  } catch {
-    copied = false;
-  } finally {
-    document.body.removeChild(textarea);
-  }
-
-  return copied;
-};
-
-const copyTextToClipboard = async (text: string): Promise<boolean> => {
-  if (
-    typeof navigator !== 'undefined' &&
-    typeof window !== 'undefined' &&
-    window.isSecureContext &&
-    navigator.clipboard?.writeText
-  ) {
-    try {
-      await navigator.clipboard.writeText(text);
-      return true;
-    } catch {
-      // Fall back below when writeText is rejected (permissions/insecure contexts/browser limits).
-    }
-  }
-
-  return copyWithLegacyExecCommand(text);
-};
-
 /**
  * Unified one-line display for simple tool inputs and results
  * Used by: Bash, Read, Grep/Glob (minimized), TodoRead, etc.
@@ -92,7 +46,6 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
     border: 'border-gray-300 dark:border-gray-600',
     icon: 'text-gray-500 dark:text-gray-400'
   },
-  resultId,
   toolResult,
   toolId
 }) => {

src/components/chat/view/ChatInterface.tsx

@@ -180,6 +180,7 @@ function ChatInterface({
     sendMessage,
     sendByCtrlEnter,
     onSessionActive,
+    onSessionProcessing,
     onInputFocusChange,
     onFileOpen,
     onShowSettings,
@@ -238,13 +239,6 @@ function ChatInterface({
     };
   }, [canAbortSession, handleAbortSession, isLoading]);
 
-  useEffect(() => {
-    const processingSessionId = selectedSession?.id || currentSessionId;
-    if (processingSessionId && isLoading && onSessionProcessing) {
-      onSessionProcessing(processingSessionId);
-    }
-  }, [currentSessionId, isLoading, onSessionProcessing, selectedSession?.id]);
-
   useEffect(() => {
     return () => {
       resetStreamingState();

src/components/chat/view/subcomponents/AssistantThinkingIndicator.tsx

@@ -1,5 +1,5 @@
 import { SessionProvider } from '../../../../types/app';
-import SessionProviderLogo from '../../../SessionProviderLogo';
+import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
 import type { Provider } from '../../types/types';
 
 type AssistantThinkingIndicatorProps = {

src/components/chat/view/subcomponents/ChatComposer.tsx

@@ -1,6 +1,6 @@
-import CommandMenu from '../../../CommandMenu';
-import ClaudeStatus from '../../../ClaudeStatus';
-import { MicButton } from '../../../MicButton.jsx';
+import CommandMenu from './CommandMenu';
+import ClaudeStatus from './ClaudeStatus';
+import MicButton from '../../../mic-button/view/MicButton';
 import ImageAttachment from './ImageAttachment';
 import PermissionRequestsBanner from './PermissionRequestsBanner';
 import ChatInputControls from './ChatInputControls';
@@ -151,7 +151,6 @@ export default function ChatComposer({
   onTranscript,
 }: ChatComposerProps) {
   const { t } = useTranslation('chat');
-  const AnyCommandMenu = CommandMenu as any;
   const textareaRect = textareaRef.current?.getBoundingClientRect();
   const commandMenuPosition = {
     top: textareaRect ? Math.max(16, textareaRect.top - 316) : 0,
@@ -266,7 +265,7 @@ export default function ChatComposer({
           </div>
         )}
 
-        <AnyCommandMenu
+        <CommandMenu
           commands={filteredCommands}
           selectedIndex={selectedCommandIndex}
           onSelect={onCommandSelect}

src/components/chat/view/subcomponents/ClaudeStatus.tsx

@@ -1,12 +1,30 @@
-import React, { useState, useEffect } from 'react';
-import { cn } from '../lib/utils';
+import { useEffect, useState } from 'react';
+import { cn } from '../../../../lib/utils';
 
-function ClaudeStatus({ status, onAbort, isLoading, provider = 'claude' }) {
+type ClaudeStatusProps = {
+  status: {
+    text?: string;
+    tokens?: number;
+    can_interrupt?: boolean;
+  } | null;
+  onAbort?: () => void;
+  isLoading: boolean;
+  provider?: string;
+};
+
+const ACTION_WORDS = ['Thinking', 'Processing', 'Analyzing', 'Working', 'Computing', 'Reasoning'];
+const SPINNER_CHARS = ['*', '+', 'x', '.'];
+
+export default function ClaudeStatus({
+  status,
+  onAbort,
+  isLoading,
+  provider: _provider = 'claude',
+}: ClaudeStatusProps) {
   const [elapsedTime, setElapsedTime] = useState(0);
   const [animationPhase, setAnimationPhase] = useState(0);
   const [fakeTokens, setFakeTokens] = useState(0);
 
-  // Update elapsed time every second
   useEffect(() => {
     if (!isLoading) {
       setElapsedTime(0);
@@ -15,79 +33,72 @@ function ClaudeStatus({ status, onAbort, isLoading, provider = 'claude' }) {
     }
 
     const startTime = Date.now();
-    // Calculate random token rate once (30-50 tokens per second)
     const tokenRate = 30 + Math.random() * 20;
 
-    const timer = setInterval(() => {
+    const timer = window.setInterval(() => {
       const elapsed = Math.floor((Date.now() - startTime) / 1000);
       setElapsedTime(elapsed);
-      // Simulate token count increasing over time
       setFakeTokens(Math.floor(elapsed * tokenRate));
     }, 1000);
 
-    return () => clearInterval(timer);
+    return () => window.clearInterval(timer);
   }, [isLoading]);
 
-  // Animate the status indicator
   useEffect(() => {
-    if (!isLoading) return;
+    if (!isLoading) {
+      return;
+    }
 
-    const timer = setInterval(() => {
-      setAnimationPhase(prev => (prev + 1) % 4);
+    const timer = window.setInterval(() => {
+      setAnimationPhase((previous) => (previous + 1) % SPINNER_CHARS.length);
     }, 500);
 
-    return () => clearInterval(timer);
+    return () => window.clearInterval(timer);
   }, [isLoading]);
 
-  // Don't show if loading is false
-  // Note: showThinking only controls the reasoning accordion in messages, not this processing indicator
-  if (!isLoading) return null;
-  
-  // Clever action words that cycle
-  const actionWords = ['Thinking', 'Processing', 'Analyzing', 'Working', 'Computing', 'Reasoning'];
-  const actionIndex = Math.floor(elapsedTime / 3) % actionWords.length;
-  
-  // Parse status data
-  const statusText = status?.text || actionWords[actionIndex];
+  if (!isLoading) {
+    return null;
+  }
+
+  const actionIndex = Math.floor(elapsedTime / 3) % ACTION_WORDS.length;
+  const statusText = status?.text || ACTION_WORDS[actionIndex];
   const tokens = status?.tokens || fakeTokens;
   const canInterrupt = status?.can_interrupt !== false;
-  
-  // Animation characters
-  const spinners = ['✻', '✹', '✸', '✶'];
-  const currentSpinner = spinners[animationPhase];
-  
+  const currentSpinner = SPINNER_CHARS[animationPhase];
+
   return (
     <div className="w-full mb-3 sm:mb-6 animate-in slide-in-from-bottom duration-300">
       <div className="flex items-center justify-between max-w-4xl mx-auto bg-gray-800 dark:bg-gray-900 text-white rounded-lg shadow-lg px-2.5 py-2 sm:px-4 sm:py-3 border border-gray-700 dark:border-gray-800">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 sm:gap-3">
-            {/* Animated spinner */}
-            <span className={cn(
-              "text-base sm:text-xl transition-all duration-500 flex-shrink-0",
-              animationPhase % 2 === 0 ? "text-blue-400 scale-110" : "text-blue-300"
-            )}>
+            <span
+              className={cn(
+                'text-base sm:text-xl transition-all duration-500 flex-shrink-0',
+                animationPhase % 2 === 0 ? 'text-blue-400 scale-110' : 'text-blue-300',
+              )}
+            >
               {currentSpinner}
             </span>
 
-            {/* Status text - compact for mobile */}
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-1.5 sm:gap-2">
                 <span className="font-medium text-xs sm:text-sm truncate">{statusText}...</span>
                 <span className="text-gray-400 text-xs sm:text-sm flex-shrink-0">({elapsedTime}s)</span>
                 {tokens > 0 && (
                   <>
-                    <span className="text-gray-500 hidden sm:inline">·</span>
-                    <span className="text-gray-300 text-xs sm:text-sm hidden sm:inline flex-shrink-0">⚒ {tokens.toLocaleString()}</span>
+                    <span className="text-gray-500 hidden sm:inline">|</span>
+                    <span className="text-gray-300 text-xs sm:text-sm hidden sm:inline flex-shrink-0">
+                      tokens {tokens.toLocaleString()}
+                    </span>
                   </>
                 )}
-                <span className="text-gray-500 hidden sm:inline">·</span>
+                <span className="text-gray-500 hidden sm:inline">|</span>
                 <span className="text-gray-400 text-xs sm:text-sm hidden sm:inline">esc to stop</span>
               </div>
             </div>
           </div>
         </div>
 
-        {/* Interrupt button */}
         {canInterrupt && onAbort && (
           <button
             onClick={onAbort}
@@ -103,5 +114,3 @@ function ClaudeStatus({ status, onAbort, isLoading, provider = 'claude' }) {
     </div>
   );
 }
-
-export default ClaudeStatus;

src/components/chat/view/subcomponents/CommandMenu.tsx

@@ -0,0 +1,224 @@
+import { useEffect, useRef } from 'react';
+import type { CSSProperties } from 'react';
+
+type CommandMenuCommand = {
+  name: string;
+  description?: string;
+  namespace?: string;
+  path?: string;
+  type?: string;
+  metadata?: { type?: string; [key: string]: unknown };
+  [key: string]: unknown;
+};
+
+type CommandMenuProps = {
+  commands?: CommandMenuCommand[];
+  selectedIndex?: number;
+  onSelect?: (command: CommandMenuCommand, index: number, isHover: boolean) => void;
+  onClose: () => void;
+  position?: { top: number; left: number; bottom?: number };
+  isOpen?: boolean;
+  frequentCommands?: CommandMenuCommand[];
+};
+
+const menuBaseStyle: CSSProperties = {
+  maxHeight: '300px',
+  overflowY: 'auto',
+  borderRadius: '8px',
+  boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  zIndex: 1000,
+  padding: '8px',
+  transition: 'opacity 150ms ease-in-out, transform 150ms ease-in-out',
+};
+
+const namespaceLabels: Record<string, string> = {
+  frequent: 'Frequently Used',
+  builtin: 'Built-in Commands',
+  project: 'Project Commands',
+  user: 'User Commands',
+  other: 'Other Commands',
+};
+
+const namespaceIcons: Record<string, string> = {
+  frequent: '[*]',
+  builtin: '[B]',
+  project: '[P]',
+  user: '[U]',
+  other: '[O]',
+};
+
+const getCommandKey = (command: CommandMenuCommand) =>
+  `${command.name}::${command.namespace || command.type || 'other'}::${command.path || ''}`;
+
+const getNamespace = (command: CommandMenuCommand) => command.namespace || command.type || 'other';
+
+const getMenuPosition = (position: { top: number; left: number; bottom?: number }): CSSProperties => {
+  if (typeof window === 'undefined') {
+    return { position: 'fixed', top: '16px', left: '16px' };
+  }
+  if (window.innerWidth < 640) {
+    return {
+      position: 'fixed',
+      bottom: `${position.bottom ?? 90}px`,
+      left: '16px',
+      right: '16px',
+      width: 'auto',
+      maxWidth: 'calc(100vw - 32px)',
+      maxHeight: 'min(50vh, 300px)',
+    };
+  }
+  return {
+    position: 'fixed',
+    top: `${Math.max(16, Math.min(position.top, window.innerHeight - 316))}px`,
+    left: `${position.left}px`,
+    width: 'min(400px, calc(100vw - 32px))',
+    maxWidth: 'calc(100vw - 32px)',
+    maxHeight: '300px',
+  };
+};
+
+export default function CommandMenu({
+  commands = [],
+  selectedIndex = -1,
+  onSelect,
+  onClose,
+  position = { top: 0, left: 0 },
+  isOpen = false,
+  frequentCommands = [],
+}: CommandMenuProps) {
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const selectedItemRef = useRef<HTMLDivElement | null>(null);
+  const menuPosition = getMenuPosition(position);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const handleClickOutside = (event: MouseEvent) => {
+      if (!menuRef.current || !(event.target instanceof Node)) {
+        return;
+      }
+      if (!menuRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    if (!selectedItemRef.current || !menuRef.current) {
+      return;
+    }
+    const menuRect = menuRef.current.getBoundingClientRect();
+    const itemRect = selectedItemRef.current.getBoundingClientRect();
+    if (itemRect.bottom > menuRect.bottom || itemRect.top < menuRect.top) {
+      selectedItemRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+  }, [selectedIndex]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const hasFrequentCommands = frequentCommands.length > 0;
+  const frequentCommandKeys = new Set(frequentCommands.map(getCommandKey));
+  const groupedCommands = commands.reduce<Record<string, CommandMenuCommand[]>>((groups, command) => {
+    if (hasFrequentCommands && frequentCommandKeys.has(getCommandKey(command))) {
+      return groups;
+    }
+    const namespace = getNamespace(command);
+    if (!groups[namespace]) {
+      groups[namespace] = [];
+    }
+    groups[namespace].push(command);
+    return groups;
+  }, {});
+  if (hasFrequentCommands) {
+    groupedCommands.frequent = frequentCommands;
+  }
+
+  const preferredOrder = hasFrequentCommands
+    ? ['frequent', 'builtin', 'project', 'user', 'other']
+    : ['builtin', 'project', 'user', 'other'];
+  const extraNamespaces = Object.keys(groupedCommands).filter((namespace) => !preferredOrder.includes(namespace));
+  const orderedNamespaces = [...preferredOrder, ...extraNamespaces].filter((namespace) => groupedCommands[namespace]);
+
+  const commandIndexByKey = new Map<string, number>();
+  commands.forEach((command, index) => {
+    const key = getCommandKey(command);
+    if (!commandIndexByKey.has(key)) {
+      commandIndexByKey.set(key, index);
+    }
+  });
+
+  if (commands.length === 0) {
+    return (
+      <div
+        ref={menuRef}
+        className="command-menu command-menu-empty border border-gray-200 bg-white text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
+        style={{ ...menuPosition, ...menuBaseStyle, overflowY: 'hidden', padding: '20px', opacity: 1, transform: 'translateY(0)', textAlign: 'center' }}
+      >
+        No commands available
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={menuRef}
+      role="listbox"
+      aria-label="Available commands"
+      className="command-menu border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+      style={{ ...menuPosition, ...menuBaseStyle, opacity: 1, transform: 'translateY(0)' }}
+    >
+      {orderedNamespaces.map((namespace) => (
+        <div key={namespace} className="command-group">
+          {orderedNamespaces.length > 1 && (
+            <div className="px-3 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+              {namespaceLabels[namespace] || namespace}
+            </div>
+          )}
+
+          {(groupedCommands[namespace] || []).map((command) => {
+            const commandKey = getCommandKey(command);
+            const commandIndex = commandIndexByKey.get(commandKey) ?? -1;
+            const isSelected = commandIndex === selectedIndex;
+            return (
+              <div
+                key={`${namespace}-${command.name}-${command.path || ''}`}
+                ref={isSelected ? selectedItemRef : null}
+                role="option"
+                aria-selected={isSelected}
+                className={`command-item mb-0.5 flex cursor-pointer items-start rounded-md px-3 py-2.5 transition-colors ${
+                  isSelected ? 'bg-blue-50 dark:bg-blue-900' : 'bg-transparent'
+                }`}
+                onMouseEnter={() => onSelect && commandIndex >= 0 && onSelect(command, commandIndex, true)}
+                onClick={() => onSelect && commandIndex >= 0 && onSelect(command, commandIndex, false)}
+                onMouseDown={(event) => event.preventDefault()}
+              >
+                <div className="min-w-0 flex-1">
+                  <div className={`flex items-center gap-2 ${command.description ? 'mb-1' : 'mb-0'}`}>
+                    <span className="shrink-0 text-xs text-gray-500 dark:text-gray-300">{namespaceIcons[namespace] || namespaceIcons.other}</span>
+                    <span className="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100">{command.name}</span>
+                    {command.metadata?.type && (
+                      <span className="command-metadata-badge rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-300">
+                        {command.metadata.type}
+                      </span>
+                    )}
+                  </div>
+                  {command.description && (
+                    <div className="ml-6 truncate whitespace-nowrap text-[13px] text-gray-500 dark:text-gray-300">
+                      {command.description}
+                    </div>
+                  )}
+                </div>
+                {isSelected && <span className="ml-2 text-xs font-semibold text-blue-500 dark:text-blue-300">{'<-'}</span>}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/chat/view/subcomponents/Markdown.tsx

@@ -7,6 +7,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { useTranslation } from 'react-i18next';
 import { normalizeInlineCodeFences } from '../../utils/chatFormatting';
+import { copyTextToClipboard } from '../../../../utils/clipboard';
 
 type MarkdownProps = {
   children: React.ReactNode;
@@ -31,9 +32,8 @@ const CodeBlock = ({ node, inline, className, children, ...props }: CodeBlockPro
   if (shouldInline) {
     return (
       <code
-        className={`font-mono text-[0.9em] px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-900 border border-gray-200 dark:bg-gray-800/60 dark:text-gray-100 dark:border-gray-700 whitespace-pre-wrap break-words ${
-          className || ''
-        }`}
+        className={`font-mono text-[0.9em] px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-900 border border-gray-200 dark:bg-gray-800/60 dark:text-gray-100 dark:border-gray-700 whitespace-pre-wrap break-words ${className || ''
+          }`}
         {...props}
       >
         {children}
@@ -43,43 +43,6 @@ const CodeBlock = ({ node, inline, className, children, ...props }: CodeBlockPro
 
   const match = /language-(\w+)/.exec(className || '');
   const language = match ? match[1] : 'text';
-  const textToCopy = raw;
-
-  const handleCopy = () => {
-    const doSet = () => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    };
-    try {
-      if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
-        navigator.clipboard.writeText(textToCopy).then(doSet).catch(() => {
-          const ta = document.createElement('textarea');
-          ta.value = textToCopy;
-          ta.style.position = 'fixed';
-          ta.style.opacity = '0';
-          document.body.appendChild(ta);
-          ta.select();
-          try {
-            document.execCommand('copy');
-          } catch {}
-          document.body.removeChild(ta);
-          doSet();
-        });
-      } else {
-        const ta = document.createElement('textarea');
-        ta.value = textToCopy;
-        ta.style.position = 'fixed';
-        ta.style.opacity = '0';
-        document.body.appendChild(ta);
-        ta.select();
-        try {
-          document.execCommand('copy');
-        } catch {}
-        document.body.removeChild(ta);
-        doSet();
-      }
-    } catch {}
-  };
 
   return (
     <div className="relative group my-2">
@@ -89,7 +52,14 @@ const CodeBlock = ({ node, inline, className, children, ...props }: CodeBlockPro
 
       <button
         type="button"
-        onClick={handleCopy}
+        onClick={() =>
+          copyTextToClipboard(raw).then((success) => {
+            if (success) {
+              setCopied(true);
+              setTimeout(() => setCopied(false), 2000);
+            }
+          })
+        }
         className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 focus:opacity-100 active:opacity-100 transition-opacity text-xs px-2 py-1 rounded-md bg-gray-700/80 hover:bg-gray-700 text-white border border-gray-600"
         title={copied ? t('codeBlock.copied') : t('codeBlock.copyCode')}
         aria-label={copied ? t('codeBlock.copied') : t('codeBlock.copyCode')}

src/components/chat/view/subcomponents/MessageComponent.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import SessionProviderLogo from '../../../SessionProviderLogo';
+import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
 import type {
   ChatMessage,
   ClaudePermissionSuggestion,

src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Check, ChevronDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import SessionProviderLogo from '../../../SessionProviderLogo';
+import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
 import NextTaskBanner from '../../../NextTaskBanner.jsx';
 import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../../../../shared/modelConstants';
 import type { ProjectSession, SessionProvider } from '../../../../types/app';

src/components/code-editor/constants/settings.ts

@@ -0,0 +1,17 @@
+export const CODE_EDITOR_STORAGE_KEYS = {
+  theme: 'codeEditorTheme',
+  wordWrap: 'codeEditorWordWrap',
+  showMinimap: 'codeEditorShowMinimap',
+  lineNumbers: 'codeEditorLineNumbers',
+  fontSize: 'codeEditorFontSize',
+} as const;
+
+export const CODE_EDITOR_DEFAULTS = {
+  isDarkMode: true,
+  wordWrap: false,
+  minimapEnabled: true,
+  showLineNumbers: true,
+  fontSize: '12',
+} as const;
+
+export const CODE_EDITOR_SETTINGS_CHANGED_EVENT = 'codeEditorSettingsChanged';

src/components/code-editor/hooks/useCodeEditorDocument.ts

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api } from '../../../utils/api';
+import type { CodeEditorFile } from '../types/types';
+
+type UseCodeEditorDocumentParams = {
+  file: CodeEditorFile;
+  projectPath?: string;
+};
+
+const getErrorMessage = (error: unknown) => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return String(error);
+};
+
+export const useCodeEditorDocument = ({ file, projectPath }: UseCodeEditorDocumentParams) => {
+  const [content, setContent] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const fileProjectName = file.projectName ?? projectPath;
+  const filePath = file.path;
+  const fileName = file.name;
+  const fileDiffNewString = file.diffInfo?.new_string;
+  const fileDiffOldString = file.diffInfo?.old_string;
+
+  useEffect(() => {
+    const loadFileContent = async () => {
+      try {
+        setLoading(true);
+
+        // Diff payload may already include full old/new snapshots, so avoid disk read.
+        if (file.diffInfo && fileDiffNewString !== undefined && fileDiffOldString !== undefined) {
+          setContent(fileDiffNewString);
+          setLoading(false);
+          return;
+        }
+
+        if (!fileProjectName) {
+          throw new Error('Missing project identifier');
+        }
+
+        const response = await api.readFile(fileProjectName, filePath);
+        if (!response.ok) {
+          throw new Error(`Failed to load file: ${response.status} ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        setContent(data.content);
+      } catch (error) {
+        const message = getErrorMessage(error);
+        console.error('Error loading file:', error);
+        setContent(`// Error loading file: ${message}\n// File: ${fileName}\n// Path: ${filePath}`);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadFileContent();
+  }, [fileDiffNewString, fileDiffOldString, fileName, filePath, fileProjectName]);
+
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    setSaveError(null);
+
+    try {
+      if (!fileProjectName) {
+        throw new Error('Missing project identifier');
+      }
+
+      const response = await api.saveFile(fileProjectName, filePath, content);
+
+      if (!response.ok) {
+        const contentType = response.headers.get('content-type');
+        if (contentType?.includes('application/json')) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || `Save failed: ${response.status}`);
+        }
+
+        const textError = await response.text();
+        console.error('Non-JSON error response:', textError);
+        throw new Error(`Save failed: ${response.status} ${response.statusText}`);
+      }
+
+      await response.json();
+
+      setSaveSuccess(true);
+      setTimeout(() => setSaveSuccess(false), 2000);
+    } catch (error) {
+      const message = getErrorMessage(error);
+      console.error('Error saving file:', error);
+      setSaveError(message);
+    } finally {
+      setSaving(false);
+    }
+  }, [content, filePath, fileProjectName]);
+
+  const handleDownload = useCallback(() => {
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+
+    anchor.href = url;
+    anchor.download = file.name;
+
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+
+    URL.revokeObjectURL(url);
+  }, [content, file.name]);
+
+  return {
+    content,
+    setContent,
+    loading,
+    saving,
+    saveSuccess,
+    saveError,
+    handleSave,
+    handleDownload,
+  };
+};

src/components/code-editor/hooks/useCodeEditorSettings.ts

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react';
+import {
+  CODE_EDITOR_DEFAULTS,
+  CODE_EDITOR_SETTINGS_CHANGED_EVENT,
+  CODE_EDITOR_STORAGE_KEYS,
+} from '../constants/settings';
+
+const readTheme = () => {
+  const savedTheme = localStorage.getItem(CODE_EDITOR_STORAGE_KEYS.theme);
+  if (!savedTheme) {
+    return CODE_EDITOR_DEFAULTS.isDarkMode;
+  }
+
+  return savedTheme === 'dark';
+};
+
+const readBoolean = (storageKey: string, defaultValue: boolean, falseValue = 'false') => {
+  const value = localStorage.getItem(storageKey);
+  if (value === null) {
+    return defaultValue;
+  }
+
+  return value !== falseValue;
+};
+
+const readWordWrap = () => {
+  return localStorage.getItem(CODE_EDITOR_STORAGE_KEYS.wordWrap) === 'true';
+};
+
+const readFontSize = () => {
+  const stored = localStorage.getItem(CODE_EDITOR_STORAGE_KEYS.fontSize);
+  return Number(stored ?? CODE_EDITOR_DEFAULTS.fontSize);
+};
+
+export const useCodeEditorSettings = () => {
+  const [isDarkMode, setIsDarkMode] = useState(readTheme);
+  const [wordWrap, setWordWrap] = useState(readWordWrap);
+  const [minimapEnabled, setMinimapEnabled] = useState(() => (
+    readBoolean(CODE_EDITOR_STORAGE_KEYS.showMinimap, CODE_EDITOR_DEFAULTS.minimapEnabled)
+  ));
+  const [showLineNumbers, setShowLineNumbers] = useState(() => (
+    readBoolean(CODE_EDITOR_STORAGE_KEYS.lineNumbers, CODE_EDITOR_DEFAULTS.showLineNumbers)
+  ));
+  const [fontSize, setFontSize] = useState(readFontSize);
+
+  // Keep legacy behavior where the editor writes theme and wrap settings directly.
+  useEffect(() => {
+    localStorage.setItem(CODE_EDITOR_STORAGE_KEYS.theme, isDarkMode ? 'dark' : 'light');
+  }, [isDarkMode]);
+
+  useEffect(() => {
+    localStorage.setItem(CODE_EDITOR_STORAGE_KEYS.wordWrap, String(wordWrap));
+  }, [wordWrap]);
+
+  useEffect(() => {
+    const refreshFromStorage = () => {
+      setIsDarkMode(readTheme());
+      setWordWrap(readWordWrap());
+      setMinimapEnabled(readBoolean(CODE_EDITOR_STORAGE_KEYS.showMinimap, CODE_EDITOR_DEFAULTS.minimapEnabled));
+      setShowLineNumbers(readBoolean(CODE_EDITOR_STORAGE_KEYS.lineNumbers, CODE_EDITOR_DEFAULTS.showLineNumbers));
+      setFontSize(readFontSize());
+    };
+
+    window.addEventListener('storage', refreshFromStorage);
+    window.addEventListener(CODE_EDITOR_SETTINGS_CHANGED_EVENT, refreshFromStorage);
+
+    return () => {
+      window.removeEventListener('storage', refreshFromStorage);
+      window.removeEventListener(CODE_EDITOR_SETTINGS_CHANGED_EVENT, refreshFromStorage);
+    };
+  }, []);
+
+  return {
+    isDarkMode,
+    setIsDarkMode,
+    wordWrap,
+    setWordWrap,
+    minimapEnabled,
+    setMinimapEnabled,
+    showLineNumbers,
+    setShowLineNumbers,
+    fontSize,
+    setFontSize,
+  };
+};

src/components/code-editor/hooks/useEditorKeyboardShortcuts.ts

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+
+type UseEditorKeyboardShortcutsParams = {
+  onSave: () => void;
+  onClose: () => void;
+  dependency: string;
+};
+
+export const useEditorKeyboardShortcuts = ({
+  onSave,
+  onClose,
+  dependency,
+}: UseEditorKeyboardShortcutsParams) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onClose();
+        return;
+      }
+
+      if (!(event.ctrlKey || event.metaKey)) {
+        return;
+      }
+
+      if (event.key.toLowerCase() === 's') {
+        event.preventDefault();
+        onSave();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [dependency, onClose, onSave]);
+};

src/components/code-editor/hooks/useEditorSidebar.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { MouseEvent as ReactMouseEvent } from 'react';
 import type { Project } from '../../../types/app';
-import type { DiffInfo, EditingFile } from '../types/types';
+import type { CodeEditorDiffInfo, CodeEditorFile } from '../types/types';
 
 type UseEditorSidebarOptions = {
   selectedProject: Project | null;
@@ -9,19 +9,20 @@ type UseEditorSidebarOptions = {
   initialWidth?: number;
 };
 
-export function useEditorSidebar({
+export const useEditorSidebar = ({
   selectedProject,
   isMobile,
   initialWidth = 600,
-}: UseEditorSidebarOptions) {
-  const [editingFile, setEditingFile] = useState<EditingFile | null>(null);
+}: UseEditorSidebarOptions) => {
+  const [editingFile, setEditingFile] = useState<CodeEditorFile | null>(null);
   const [editorWidth, setEditorWidth] = useState(initialWidth);
   const [editorExpanded, setEditorExpanded] = useState(false);
   const [isResizing, setIsResizing] = useState(false);
+  const [hasManualWidth, setHasManualWidth] = useState(false);
   const resizeHandleRef = useRef<HTMLDivElement | null>(null);
 
   const handleFileOpen = useCallback(
-    (filePath: string, diffInfo: DiffInfo | null = null) => {
+    (filePath: string, diffInfo: CodeEditorDiffInfo | null = null) => {
       const normalizedPath = filePath.replace(/\\/g, '/');
       const fileName = normalizedPath.split('/').pop() || filePath;
 
@@ -41,7 +42,7 @@ export function useEditorSidebar({
   }, []);
 
   const handleToggleEditorExpand = useCallback(() => {
-    setEditorExpanded((prev) => !prev);
+    setEditorExpanded((previous) => !previous);
   }, []);
 
   const handleResizeStart = useCallback(
@@ -50,6 +51,8 @@ export function useEditorSidebar({
         return;
       }
 
+      // After first drag interaction, the editor width is user-controlled.
+      setHasManualWidth(true);
       setIsResizing(true);
       event.preventDefault();
     },
@@ -101,10 +104,11 @@ export function useEditorSidebar({
     editingFile,
     editorWidth,
     editorExpanded,
+    hasManualWidth,
     resizeHandleRef,
     handleFileOpen,
     handleCloseEditor,
     handleToggleEditorExpand,
     handleResizeStart,
   };
-}
+};

src/components/code-editor/types/types.ts

@@ -0,0 +1,21 @@
+export type CodeEditorDiffInfo = {
+  old_string?: string;
+  new_string?: string;
+  [key: string]: unknown;
+};
+
+export type CodeEditorFile = {
+  name: string;
+  path: string;
+  projectName?: string;
+  diffInfo?: CodeEditorDiffInfo | null;
+  [key: string]: unknown;
+};
+
+export type CodeEditorSettingsState = {
+  isDarkMode: boolean;
+  wordWrap: boolean;
+  minimapEnabled: boolean;
+  showLineNumbers: boolean;
+  fontSize: string;
+};

src/components/code-editor/utils/editorExtensions.ts

@@ -0,0 +1,141 @@
+import { css } from '@codemirror/lang-css';
+import { html } from '@codemirror/lang-html';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { StreamLanguage } from '@codemirror/language';
+import { markdown } from '@codemirror/lang-markdown';
+import { python } from '@codemirror/lang-python';
+import { getChunks } from '@codemirror/merge';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+import { showMinimap } from '@replit/codemirror-minimap';
+import type { CodeEditorFile } from '../types/types';
+
+// Lightweight lexer for `.env` files (including `.env.*` variants).
+const envLanguage = StreamLanguage.define({
+  token(stream) {
+    if (stream.match(/^#.*/)) return 'comment';
+    if (stream.sol() && stream.match(/^[A-Za-z_][A-Za-z0-9_.]*(?==)/)) return 'variableName.definition';
+    if (stream.match(/^=/)) return 'operator';
+    if (stream.match(/^"(?:[^"\\]|\\.)*"?/)) return 'string';
+    if (stream.match(/^'(?:[^'\\]|\\.)*'?/)) return 'string';
+    if (stream.match(/^\$\{[^}]*\}?/)) return 'variableName.special';
+    if (stream.match(/^\$[A-Za-z_][A-Za-z0-9_]*/)) return 'variableName.special';
+    if (stream.match(/^\d+/)) return 'number';
+
+    stream.next();
+    return null;
+  },
+});
+
+export const getLanguageExtensions = (filename: string) => {
+  const lowerName = filename.toLowerCase();
+  if (lowerName === '.env' || lowerName.startsWith('.env.')) {
+    return [envLanguage];
+  }
+
+  const ext = filename.split('.').pop()?.toLowerCase();
+  switch (ext) {
+    case 'js':
+    case 'jsx':
+    case 'ts':
+    case 'tsx':
+      return [javascript({ jsx: true, typescript: ext.includes('ts') })];
+    case 'py':
+      return [python()];
+    case 'html':
+    case 'htm':
+      return [html()];
+    case 'css':
+    case 'scss':
+    case 'less':
+      return [css()];
+    case 'json':
+      return [json()];
+    case 'md':
+    case 'markdown':
+      return [markdown()];
+    case 'env':
+      return [envLanguage];
+    default:
+      return [];
+  }
+};
+
+export const createMinimapExtension = ({
+  file,
+  showDiff,
+  minimapEnabled,
+  isDarkMode,
+}: {
+  file: CodeEditorFile;
+  showDiff: boolean;
+  minimapEnabled: boolean;
+  isDarkMode: boolean;
+}) => {
+  if (!file.diffInfo || !showDiff || !minimapEnabled) {
+    return [];
+  }
+
+  const gutters: Record<number, string> = {};
+
+  return [
+    showMinimap.compute(['doc'], (state) => {
+      const chunksData = getChunks(state);
+      const chunks = chunksData?.chunks || [];
+
+      Object.keys(gutters).forEach((key) => {
+        delete gutters[Number(key)];
+      });
+
+      chunks.forEach((chunk) => {
+        const fromLine = state.doc.lineAt(chunk.fromB).number;
+        const toLine = state.doc.lineAt(Math.min(chunk.toB, state.doc.length)).number;
+
+        for (let lineNumber = fromLine; lineNumber <= toLine; lineNumber += 1) {
+          gutters[lineNumber] = isDarkMode ? 'rgba(34, 197, 94, 0.8)' : 'rgba(34, 197, 94, 1)';
+        }
+      });
+
+      return {
+        create: () => ({ dom: document.createElement('div') }),
+        displayText: 'blocks',
+        showOverlay: 'always',
+        gutters: [gutters],
+      };
+    }),
+  ];
+};
+
+export const createScrollToFirstChunkExtension = ({
+  file,
+  showDiff,
+}: {
+  file: CodeEditorFile;
+  showDiff: boolean;
+}) => {
+  if (!file.diffInfo || !showDiff) {
+    return [];
+  }
+
+  return [
+    ViewPlugin.fromClass(class {
+      constructor(view: EditorView) {
+        // Wait for merge decorations so the first chunk location is stable.
+        setTimeout(() => {
+          const chunksData = getChunks(view.state);
+          const firstChunk = chunksData?.chunks?.[0];
+
+          if (firstChunk) {
+            view.dispatch({
+              effects: EditorView.scrollIntoView(firstChunk.fromB, { y: 'center' }),
+            });
+          }
+        }, 100);
+      }
+
+      update() {}
+
+      destroy() {}
+    }),
+  ];
+};

src/components/code-editor/utils/editorStyles.ts

@@ -0,0 +1,79 @@
+export const getEditorLoadingStyles = (isDarkMode: boolean) => {
+  return `
+    .code-editor-loading {
+      background-color: ${isDarkMode ? '#111827' : '#ffffff'} !important;
+    }
+
+    .code-editor-loading:hover {
+      background-color: ${isDarkMode ? '#111827' : '#ffffff'} !important;
+    }
+  `;
+};
+
+export const getEditorStyles = (isDarkMode: boolean) => {
+  return `
+    .cm-deletedChunk {
+      background-color: ${isDarkMode ? 'rgba(239, 68, 68, 0.15)' : 'rgba(255, 235, 235, 1)'} !important;
+      border-left: 3px solid ${isDarkMode ? 'rgba(239, 68, 68, 0.6)' : 'rgb(239, 68, 68)'} !important;
+      padding-left: 4px !important;
+    }
+
+    .cm-insertedChunk {
+      background-color: ${isDarkMode ? 'rgba(34, 197, 94, 0.15)' : 'rgba(230, 255, 237, 1)'} !important;
+      border-left: 3px solid ${isDarkMode ? 'rgba(34, 197, 94, 0.6)' : 'rgb(34, 197, 94)'} !important;
+      padding-left: 4px !important;
+    }
+
+    .cm-editor.cm-merge-b .cm-changedText {
+      background: ${isDarkMode ? 'rgba(34, 197, 94, 0.4)' : 'rgba(34, 197, 94, 0.3)'} !important;
+      padding-top: 2px !important;
+      padding-bottom: 2px !important;
+      margin-top: -2px !important;
+      margin-bottom: -2px !important;
+    }
+
+    .cm-editor .cm-deletedChunk .cm-changedText {
+      background: ${isDarkMode ? 'rgba(239, 68, 68, 0.4)' : 'rgba(239, 68, 68, 0.3)'} !important;
+      padding-top: 2px !important;
+      padding-bottom: 2px !important;
+      margin-top: -2px !important;
+      margin-bottom: -2px !important;
+    }
+
+    .cm-gutter.cm-gutter-minimap {
+      background-color: ${isDarkMode ? '#1e1e1e' : '#f5f5f5'};
+    }
+
+    .cm-editor-toolbar-panel {
+      padding: 4px 10px;
+      background-color: ${isDarkMode ? '#1f2937' : '#ffffff'};
+      border-bottom: 1px solid ${isDarkMode ? '#374151' : '#e5e7eb'};
+      color: ${isDarkMode ? '#d1d5db' : '#374151'};
+      font-size: 12px;
+    }
+
+    .cm-diff-nav-btn,
+    .cm-toolbar-btn {
+      padding: 3px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      border-radius: 4px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: inherit;
+      transition: background-color 0.2s;
+    }
+
+    .cm-diff-nav-btn:hover,
+    .cm-toolbar-btn:hover {
+      background-color: ${isDarkMode ? '#374151' : '#f3f4f6'};
+    }
+
+    .cm-diff-nav-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `;
+};

src/components/code-editor/utils/editorToolbarPanel.ts

@@ -0,0 +1,212 @@
+import { getChunks } from '@codemirror/merge';
+import { EditorView, showPanel } from '@codemirror/view';
+import type { CodeEditorFile } from '../types/types';
+
+type EditorToolbarLabels = {
+  changes: string;
+  previousChange: string;
+  nextChange: string;
+  hideDiff: string;
+  showDiff: string;
+  collapse: string;
+  expand: string;
+};
+
+type CreateEditorToolbarPanelParams = {
+  file: CodeEditorFile;
+  showDiff: boolean;
+  isSidebar: boolean;
+  isExpanded: boolean;
+  onToggleDiff: () => void;
+  onPopOut: (() => void) | null;
+  onToggleExpand: (() => void) | null;
+  labels: EditorToolbarLabels;
+};
+
+const getDiffVisibilityIcon = (showDiff: boolean) => {
+  if (showDiff) {
+    return '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />';
+  }
+
+  return '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />';
+};
+
+const getExpandIcon = (isExpanded: boolean) => {
+  if (isExpanded) {
+    return '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />';
+  }
+
+  return '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />';
+};
+
+const escapeHtml = (value: string): string => (
+  value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+);
+
+export const createEditorToolbarPanelExtension = ({
+  file,
+  showDiff,
+  isSidebar,
+  isExpanded,
+  onToggleDiff,
+  onPopOut,
+  onToggleExpand,
+  labels,
+}: CreateEditorToolbarPanelParams) => {
+  const hasToolbarButtons = Boolean(file.diffInfo || (isSidebar && onPopOut) || (isSidebar && onToggleExpand));
+  if (!hasToolbarButtons) {
+    return [];
+  }
+
+  const createPanel = (view: EditorView) => {
+    const dom = document.createElement('div');
+    dom.className = 'cm-editor-toolbar-panel';
+
+    let currentIndex = 0;
+
+    const updatePanel = () => {
+      const hasDiff = Boolean(file.diffInfo && showDiff);
+      const chunksData = hasDiff ? getChunks(view.state) : null;
+      const chunks = chunksData?.chunks || [];
+      const chunkCount = chunks.length;
+      const maxChunkIndex = Math.max(0, chunkCount - 1);
+      currentIndex = Math.max(0, Math.min(currentIndex, maxChunkIndex));
+      const escapedLabels = {
+        changes: escapeHtml(labels.changes),
+        previousChange: escapeHtml(labels.previousChange),
+        nextChange: escapeHtml(labels.nextChange),
+        hideDiff: escapeHtml(labels.hideDiff),
+        showDiff: escapeHtml(labels.showDiff),
+        collapse: escapeHtml(labels.collapse),
+        expand: escapeHtml(labels.expand),
+      };
+      // Icons are static SVG path fragments controlled by this module.
+      const diffVisibilityIcon = getDiffVisibilityIcon(showDiff);
+      const expandIcon = getExpandIcon(isExpanded);
+
+      let toolbarHtml = '<div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">';
+      toolbarHtml += '<div style="display: flex; align-items: center; gap: 8px;">';
+
+      if (hasDiff) {
+        toolbarHtml += `
+          <span style="font-weight: 500;">${chunkCount > 0 ? `${currentIndex + 1}/${chunkCount}` : '0'} ${escapedLabels.changes}</span>
+          <button class="cm-diff-nav-btn cm-diff-nav-prev" title="${escapedLabels.previousChange}" ${chunkCount === 0 ? 'disabled' : ''}>
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+            </svg>
+          </button>
+          <button class="cm-diff-nav-btn cm-diff-nav-next" title="${escapedLabels.nextChange}" ${chunkCount === 0 ? 'disabled' : ''}>
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+        `;
+      }
+
+      toolbarHtml += '</div>';
+      toolbarHtml += '<div style="display: flex; align-items: center; gap: 4px;">';
+
+      if (file.diffInfo) {
+        toolbarHtml += `
+          <button class="cm-toolbar-btn cm-toggle-diff-btn" title="${showDiff ? escapedLabels.hideDiff : escapedLabels.showDiff}">
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              ${diffVisibilityIcon}
+            </svg>
+          </button>
+        `;
+      }
+
+      if (isSidebar && onPopOut) {
+        toolbarHtml += `
+          <button class="cm-toolbar-btn cm-popout-btn" title="Open in modal">
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
+            </svg>
+          </button>
+        `;
+      }
+
+      if (isSidebar && onToggleExpand) {
+        toolbarHtml += `
+          <button class="cm-toolbar-btn cm-expand-btn" title="${isExpanded ? escapedLabels.collapse : escapedLabels.expand}">
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              ${expandIcon}
+            </svg>
+          </button>
+        `;
+      }
+
+      toolbarHtml += '</div>';
+      toolbarHtml += '</div>';
+
+      dom.innerHTML = toolbarHtml;
+
+      if (hasDiff) {
+        const previousButton = dom.querySelector<HTMLButtonElement>('.cm-diff-nav-prev');
+        const nextButton = dom.querySelector<HTMLButtonElement>('.cm-diff-nav-next');
+
+        previousButton?.addEventListener('click', () => {
+          if (chunks.length === 0) {
+            return;
+          }
+
+          currentIndex = currentIndex > 0 ? currentIndex - 1 : chunks.length - 1;
+          const chunk = chunks[currentIndex];
+
+          if (chunk) {
+            view.dispatch({
+              effects: EditorView.scrollIntoView(chunk.fromB, { y: 'center' }),
+            });
+          }
+
+          updatePanel();
+        });
+
+        nextButton?.addEventListener('click', () => {
+          if (chunks.length === 0) {
+            return;
+          }
+
+          currentIndex = currentIndex < chunks.length - 1 ? currentIndex + 1 : 0;
+          const chunk = chunks[currentIndex];
+
+          if (chunk) {
+            view.dispatch({
+              effects: EditorView.scrollIntoView(chunk.fromB, { y: 'center' }),
+            });
+          }
+
+          updatePanel();
+        });
+      }
+
+      const toggleDiffButton = dom.querySelector<HTMLButtonElement>('.cm-toggle-diff-btn');
+      toggleDiffButton?.addEventListener('click', onToggleDiff);
+
+      const popOutButton = dom.querySelector<HTMLButtonElement>('.cm-popout-btn');
+      popOutButton?.addEventListener('click', () => {
+        onPopOut?.();
+      });
+
+      const expandButton = dom.querySelector<HTMLButtonElement>('.cm-expand-btn');
+      expandButton?.addEventListener('click', () => {
+        onToggleExpand?.();
+      });
+    };
+
+    updatePanel();
+
+    return {
+      top: true,
+      dom,
+      update: updatePanel,
+    };
+  };
+
+  return [showPanel.of(createPanel)];
+};

src/components/code-editor/view/CodeEditor.tsx

@@ -0,0 +1,234 @@
+import { EditorView } from '@codemirror/view';
+import { unifiedMergeView } from '@codemirror/merge';
+import type { Extension } from '@codemirror/state';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCodeEditorDocument } from '../hooks/useCodeEditorDocument';
+import { useCodeEditorSettings } from '../hooks/useCodeEditorSettings';
+import { useEditorKeyboardShortcuts } from '../hooks/useEditorKeyboardShortcuts';
+import type { CodeEditorFile } from '../types/types';
+import { createMinimapExtension, createScrollToFirstChunkExtension, getLanguageExtensions } from '../utils/editorExtensions';
+import { getEditorStyles } from '../utils/editorStyles';
+import { createEditorToolbarPanelExtension } from '../utils/editorToolbarPanel';
+import CodeEditorFooter from './subcomponents/CodeEditorFooter';
+import CodeEditorHeader from './subcomponents/CodeEditorHeader';
+import CodeEditorLoadingState from './subcomponents/CodeEditorLoadingState';
+import CodeEditorSurface from './subcomponents/CodeEditorSurface';
+
+type CodeEditorProps = {
+  file: CodeEditorFile;
+  onClose: () => void;
+  projectPath?: string;
+  isSidebar?: boolean;
+  isExpanded?: boolean;
+  onToggleExpand?: (() => void) | null;
+  onPopOut?: (() => void) | null;
+};
+
+export default function CodeEditor({
+  file,
+  onClose,
+  projectPath,
+  isSidebar = false,
+  isExpanded = false,
+  onToggleExpand = null,
+  onPopOut = null,
+}: CodeEditorProps) {
+  const { t } = useTranslation('codeEditor');
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [showDiff, setShowDiff] = useState(Boolean(file.diffInfo));
+  const [markdownPreview, setMarkdownPreview] = useState(false);
+
+  const {
+    isDarkMode,
+    wordWrap,
+    minimapEnabled,
+    showLineNumbers,
+    fontSize,
+  } = useCodeEditorSettings();
+
+  const {
+    content,
+    setContent,
+    loading,
+    saving,
+    saveSuccess,
+    saveError,
+    handleSave,
+    handleDownload,
+  } = useCodeEditorDocument({
+    file,
+    projectPath,
+  });
+
+  const isMarkdownFile = useMemo(() => {
+    const extension = file.name.split('.').pop()?.toLowerCase();
+    return extension === 'md' || extension === 'markdown';
+  }, [file.name]);
+
+  const minimapExtension = useMemo(
+    () => (
+      createMinimapExtension({
+        file,
+        showDiff,
+        minimapEnabled,
+        isDarkMode,
+      })
+    ),
+    [file, isDarkMode, minimapEnabled, showDiff],
+  );
+
+  const scrollToFirstChunkExtension = useMemo(
+    () => createScrollToFirstChunkExtension({ file, showDiff }),
+    [file, showDiff],
+  );
+
+  const toolbarPanelExtension = useMemo(
+    () => (
+      createEditorToolbarPanelExtension({
+        file,
+        showDiff,
+        isSidebar,
+        isExpanded,
+        onToggleDiff: () => setShowDiff((previous) => !previous),
+        onPopOut,
+        onToggleExpand,
+        labels: {
+          changes: t('toolbar.changes'),
+          previousChange: t('toolbar.previousChange'),
+          nextChange: t('toolbar.nextChange'),
+          hideDiff: t('toolbar.hideDiff'),
+          showDiff: t('toolbar.showDiff'),
+          collapse: t('toolbar.collapse'),
+          expand: t('toolbar.expand'),
+        },
+      })
+    ),
+    [file, isExpanded, isSidebar, onPopOut, onToggleExpand, showDiff, t],
+  );
+
+  const extensions = useMemo(() => {
+    const allExtensions: Extension[] = [
+      ...getLanguageExtensions(file.name),
+      ...toolbarPanelExtension,
+    ];
+
+    if (file.diffInfo && showDiff && file.diffInfo.old_string !== undefined) {
+      allExtensions.push(
+        unifiedMergeView({
+          original: file.diffInfo.old_string,
+          mergeControls: false,
+          highlightChanges: true,
+          syntaxHighlightDeletions: false,
+          gutter: true,
+        }),
+      );
+      allExtensions.push(...minimapExtension);
+      allExtensions.push(...scrollToFirstChunkExtension);
+    }
+
+    if (wordWrap) {
+      allExtensions.push(EditorView.lineWrapping);
+    }
+
+    return allExtensions;
+  }, [
+    file.diffInfo,
+    file.name,
+    minimapExtension,
+    scrollToFirstChunkExtension,
+    showDiff,
+    toolbarPanelExtension,
+    wordWrap,
+  ]);
+
+  useEditorKeyboardShortcuts({
+    onSave: handleSave,
+    onClose,
+    dependency: content,
+  });
+
+  if (loading) {
+    return (
+      <CodeEditorLoadingState
+        isDarkMode={isDarkMode}
+        isSidebar={isSidebar}
+        loadingText={t('loading', { fileName: file.name })}
+      />
+    );
+  }
+
+  const outerContainerClassName = isSidebar
+    ? 'w-full h-full flex flex-col'
+    : `fixed inset-0 z-[9999] md:bg-black/50 md:flex md:items-center md:justify-center md:p-4 ${isFullscreen ? 'md:p-0' : ''}`;
+
+  const innerContainerClassName = isSidebar
+    ? 'bg-background flex flex-col w-full h-full'
+    : `bg-background shadow-2xl flex flex-col w-full h-full md:rounded-lg md:shadow-2xl${
+      isFullscreen ? ' md:w-full md:h-full md:rounded-none' : ' md:w-full md:max-w-6xl md:h-[80vh] md:max-h-[80vh]'
+    }`;
+
+  return (
+    <>
+      <style>{getEditorStyles(isDarkMode)}</style>
+      <div className={outerContainerClassName}>
+        <div className={innerContainerClassName}>
+          <CodeEditorHeader
+            file={file}
+            isSidebar={isSidebar}
+            isFullscreen={isFullscreen}
+            isMarkdownFile={isMarkdownFile}
+            markdownPreview={markdownPreview}
+            saving={saving}
+            saveSuccess={saveSuccess}
+            onToggleMarkdownPreview={() => setMarkdownPreview((previous) => !previous)}
+            onOpenSettings={() => window.openSettings?.('appearance')}
+            onDownload={handleDownload}
+            onSave={handleSave}
+            onToggleFullscreen={() => setIsFullscreen((previous) => !previous)}
+            onClose={onClose}
+            labels={{
+              showingChanges: t('header.showingChanges'),
+              editMarkdown: t('actions.editMarkdown'),
+              previewMarkdown: t('actions.previewMarkdown'),
+              settings: t('toolbar.settings'),
+              download: t('actions.download'),
+              save: t('actions.save'),
+              saving: t('actions.saving'),
+              saved: t('actions.saved'),
+              fullscreen: t('actions.fullscreen'),
+              exitFullscreen: t('actions.exitFullscreen'),
+              close: t('actions.close'),
+            }}
+          />
+
+          {saveError && (
+            <div className="px-3 py-1.5 text-xs text-red-700 bg-red-50 border-b border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-900/40">
+              {saveError}
+            </div>
+          )}
+
+          <div className="flex-1 overflow-hidden">
+            <CodeEditorSurface
+              content={content}
+              onChange={setContent}
+              markdownPreview={markdownPreview}
+              isMarkdownFile={isMarkdownFile}
+              isDarkMode={isDarkMode}
+              fontSize={fontSize}
+              showLineNumbers={showLineNumbers}
+              extensions={extensions}
+            />
+          </div>
+
+          <CodeEditorFooter
+            content={content}
+            linesLabel={t('footer.lines')}
+            charactersLabel={t('footer.characters')}
+            shortcutsLabel={t('footer.shortcuts')}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

src/components/code-editor/view/EditorSidebar.tsx

@@ -1,14 +1,28 @@
 import { useState } from 'react';
-import CodeEditor from '../../../CodeEditor';
-import type { EditorSidebarProps } from '../../types/types';
+import type { MouseEvent, MutableRefObject } from 'react';
+import type { CodeEditorFile } from '../types/types';
+import CodeEditor from './CodeEditor';
 
-const AnyCodeEditor = CodeEditor as any;
+type EditorSidebarProps = {
+  editingFile: CodeEditorFile | null;
+  isMobile: boolean;
+  editorExpanded: boolean;
+  editorWidth: number;
+  hasManualWidth: boolean;
+  resizeHandleRef: MutableRefObject<HTMLDivElement | null>;
+  onResizeStart: (event: MouseEvent<HTMLDivElement>) => void;
+  onCloseEditor: () => void;
+  onToggleEditorExpand: () => void;
+  projectPath?: string;
+  fillSpace?: boolean;
+};
 
 export default function EditorSidebar({
   editingFile,
   isMobile,
   editorExpanded,
   editorWidth,
+  hasManualWidth,
   resizeHandleRef,
   onResizeStart,
   onCloseEditor,
@@ -24,7 +38,7 @@ export default function EditorSidebar({
 
   if (isMobile || poppedOut) {
     return (
-      <AnyCodeEditor
+      <CodeEditor
         file={editingFile}
         onClose={() => {
           setPoppedOut(false);
@@ -36,7 +50,8 @@ export default function EditorSidebar({
     );
   }
 
-  const useFlex = editorExpanded || fillSpace;
+  // In files tab, fill the remaining width unless user has dragged manually.
+  const useFlexLayout = editorExpanded || (fillSpace && !hasManualWidth);
 
   return (
     <>
@@ -52,10 +67,10 @@ export default function EditorSidebar({
       )}
 
       <div
-        className={`flex-shrink-0 border-l border-gray-200 dark:border-gray-700 h-full overflow-hidden ${useFlex ? 'flex-1' : ''}`}
-        style={useFlex ? undefined : { width: `${editorWidth}px` }}
+        className={`flex-shrink-0 border-l border-gray-200 dark:border-gray-700 h-full overflow-hidden ${useFlexLayout ? 'flex-1' : ''}`}
+        style={useFlexLayout ? undefined : { width: `${editorWidth}px` }}
       >
-        <AnyCodeEditor
+        <CodeEditor
           file={editingFile}
           onClose={onCloseEditor}
           projectPath={projectPath}

src/components/code-editor/view/subcomponents/CodeEditorFooter.tsx

@@ -0,0 +1,28 @@
+type CodeEditorFooterProps = {
+  content: string;
+  linesLabel: string;
+  charactersLabel: string;
+  shortcutsLabel: string;
+};
+
+export default function CodeEditorFooter({
+  content,
+  linesLabel,
+  charactersLabel,
+  shortcutsLabel,
+}: CodeEditorFooterProps) {
+  return (
+    <div className="flex items-center justify-between px-3 py-1.5 border-t border-border bg-muted flex-shrink-0">
+      <div className="flex items-center gap-3 text-xs text-gray-600 dark:text-gray-400">
+        <span>
+          {linesLabel} {content.split('\n').length}
+        </span>
+        <span>
+          {charactersLabel} {content.length}
+        </span>
+      </div>
+
+      <div className="text-xs text-gray-500 dark:text-gray-400">{shortcutsLabel}</div>
+    </div>
+  );
+}

src/components/code-editor/view/subcomponents/CodeEditorHeader.tsx

@@ -0,0 +1,143 @@
+import { Code2, Download, Eye, Maximize2, Minimize2, Save, Settings as SettingsIcon, X } from 'lucide-react';
+import type { CodeEditorFile } from '../../types/types';
+
+type CodeEditorHeaderProps = {
+  file: CodeEditorFile;
+  isSidebar: boolean;
+  isFullscreen: boolean;
+  isMarkdownFile: boolean;
+  markdownPreview: boolean;
+  saving: boolean;
+  saveSuccess: boolean;
+  onToggleMarkdownPreview: () => void;
+  onOpenSettings: () => void;
+  onDownload: () => void;
+  onSave: () => void;
+  onToggleFullscreen: () => void;
+  onClose: () => void;
+  labels: {
+    showingChanges: string;
+    editMarkdown: string;
+    previewMarkdown: string;
+    settings: string;
+    download: string;
+    save: string;
+    saving: string;
+    saved: string;
+    fullscreen: string;
+    exitFullscreen: string;
+    close: string;
+  };
+};
+
+export default function CodeEditorHeader({
+  file,
+  isSidebar,
+  isFullscreen,
+  isMarkdownFile,
+  markdownPreview,
+  saving,
+  saveSuccess,
+  onToggleMarkdownPreview,
+  onOpenSettings,
+  onDownload,
+  onSave,
+  onToggleFullscreen,
+  onClose,
+  labels,
+}: CodeEditorHeaderProps) {
+  const saveTitle = saveSuccess ? labels.saved : saving ? labels.saving : labels.save;
+
+  return (
+    <div className="flex items-center justify-between px-3 py-1.5 border-b border-border flex-shrink-0 min-w-0">
+      <div className="flex items-center gap-2 min-w-0 flex-1">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2 min-w-0">
+            <h3 className="text-sm font-medium text-gray-900 dark:text-white truncate">{file.name}</h3>
+            {file.diffInfo && (
+              <span className="text-[10px] bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 px-1.5 py-0.5 rounded whitespace-nowrap">
+                {labels.showingChanges}
+              </span>
+            )}
+          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{file.path}</p>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-0.5 md:gap-1 flex-shrink-0">
+        {isMarkdownFile && (
+          <button
+            type="button"
+            onClick={onToggleMarkdownPreview}
+            className={`p-1.5 rounded-md min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 flex items-center justify-center transition-colors ${
+              markdownPreview
+                ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800'
+            }`}
+            title={markdownPreview ? labels.editMarkdown : labels.previewMarkdown}
+          >
+            {markdownPreview ? <Code2 className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+          </button>
+        )}
+
+        <button
+          type="button"
+          onClick={onOpenSettings}
+          className="p-1.5 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 flex items-center justify-center"
+          title={labels.settings}
+        >
+          <SettingsIcon className="w-4 h-4" />
+        </button>
+
+        <button
+          type="button"
+          onClick={onDownload}
+          className="p-1.5 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 flex items-center justify-center"
+          title={labels.download}
+        >
+          <Download className="w-4 h-4" />
+        </button>
+
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={saving}
+          className={`p-1.5 rounded-md disabled:opacity-50 flex items-center justify-center transition-colors min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 ${
+            saveSuccess
+              ? 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/30'
+              : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800'
+          }`}
+          title={saveTitle}
+        >
+          {saveSuccess ? (
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          ) : (
+            <Save className="w-4 h-4" />
+          )}
+        </button>
+
+        {!isSidebar && (
+          <button
+            type="button"
+            onClick={onToggleFullscreen}
+            className="hidden md:flex p-1.5 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 items-center justify-center"
+            title={isFullscreen ? labels.exitFullscreen : labels.fullscreen}
+          >
+            {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
+          </button>
+        )}
+
+        <button
+          type="button"
+          onClick={onClose}
+          className="p-1.5 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 flex items-center justify-center"
+          title={labels.close}
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/code-editor/view/subcomponents/CodeEditorLoadingState.tsx

@@ -0,0 +1,36 @@
+import { getEditorLoadingStyles } from '../../utils/editorStyles';
+
+type CodeEditorLoadingStateProps = {
+  isDarkMode: boolean;
+  isSidebar: boolean;
+  loadingText: string;
+};
+
+export default function CodeEditorLoadingState({
+  isDarkMode,
+  isSidebar,
+  loadingText,
+}: CodeEditorLoadingStateProps) {
+  return (
+    <>
+      <style>{getEditorLoadingStyles(isDarkMode)}</style>
+      {isSidebar ? (
+        <div className="w-full h-full flex items-center justify-center bg-background">
+          <div className="flex items-center gap-3">
+            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600" />
+            <span className="text-gray-900 dark:text-white">{loadingText}</span>
+          </div>
+        </div>
+      ) : (
+        <div className="fixed inset-0 z-[9999] md:bg-black/50 md:flex md:items-center md:justify-center">
+          <div className="code-editor-loading w-full h-full md:rounded-lg md:w-auto md:h-auto p-8 flex items-center justify-center">
+            <div className="flex items-center gap-3">
+              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600" />
+              <span className="text-gray-900 dark:text-white">{loadingText}</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

src/components/code-editor/view/subcomponents/CodeEditorSurface.tsx

@@ -0,0 +1,62 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { oneDark } from '@codemirror/theme-one-dark';
+import type { Extension } from '@codemirror/state';
+import MarkdownPreview from './markdown/MarkdownPreview';
+
+type CodeEditorSurfaceProps = {
+  content: string;
+  onChange: (value: string) => void;
+  markdownPreview: boolean;
+  isMarkdownFile: boolean;
+  isDarkMode: boolean;
+  fontSize: number;
+  showLineNumbers: boolean;
+  extensions: Extension[];
+};
+
+export default function CodeEditorSurface({
+  content,
+  onChange,
+  markdownPreview,
+  isMarkdownFile,
+  isDarkMode,
+  fontSize,
+  showLineNumbers,
+  extensions,
+}: CodeEditorSurfaceProps) {
+  if (markdownPreview && isMarkdownFile) {
+    return (
+      <div className="h-full overflow-y-auto bg-white dark:bg-gray-900">
+        <div className="max-w-4xl mx-auto px-8 py-6 prose prose-sm dark:prose-invert prose-headings:font-semibold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-code:text-sm prose-pre:bg-gray-900 prose-img:rounded-lg max-w-none">
+          <MarkdownPreview content={content} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <CodeMirror
+      value={content}
+      onChange={onChange}
+      extensions={extensions}
+      theme={isDarkMode ? oneDark : undefined}
+      height="100%"
+      style={{
+        fontSize: `${fontSize}px`,
+        height: '100%',
+      }}
+      basicSetup={{
+        lineNumbers: showLineNumbers,
+        foldGutter: true,
+        dropCursor: false,
+        allowMultipleSelections: false,
+        indentOnInput: true,
+        bracketMatching: true,
+        closeBrackets: true,
+        autocompletion: true,
+        highlightSelectionMatches: true,
+        searchKeymap: true,
+      }}
+    />
+  );
+}

src/components/code-editor/view/subcomponents/markdown/MarkdownCodeBlock.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import type { ComponentProps } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark as prismOneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { copyTextToClipboard } from '../../../../../utils/clipboard';
+
+type MarkdownCodeBlockProps = {
+  inline?: boolean;
+  node?: unknown;
+} & ComponentProps<'code'>;
+
+export default function MarkdownCodeBlock({
+  inline,
+  className,
+  children,
+  node: _node,
+  ...props
+}: MarkdownCodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+  const rawContent = Array.isArray(children) ? children.join('') : String(children ?? '');
+  const looksMultiline = /[\r\n]/.test(rawContent);
+  const shouldRenderInline = inline || !looksMultiline;
+
+  if (shouldRenderInline) {
+    return (
+      <code
+        className={`font-mono text-[0.9em] px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-900 border border-gray-200 dark:bg-gray-800/60 dark:text-gray-100 dark:border-gray-700 whitespace-pre-wrap break-words ${className || ''}`}
+        {...props}
+      >
+        {children}
+      </code>
+    );
+  }
+
+  const languageMatch = /language-(\w+)/.exec(className || '');
+  const language = languageMatch ? languageMatch[1] : 'text';
+
+  return (
+    <div className="relative group my-2">
+      {language !== 'text' && (
+        <div className="absolute top-2 left-3 z-10 text-xs text-gray-400 font-medium uppercase">{language}</div>
+      )}
+
+      <button
+        type="button"
+        onClick={() =>
+          copyTextToClipboard(rawContent).then((success) => {
+            if (success) {
+              setCopied(true);
+              setTimeout(() => setCopied(false), 2000);
+            }
+          })}
+        className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity text-xs px-2 py-1 rounded-md bg-gray-700/80 hover:bg-gray-700 text-white border border-gray-600"
+      >
+        {copied ? 'Copied!' : 'Copy'}
+      </button>
+
+      <SyntaxHighlighter
+        language={language}
+        style={prismOneDark}
+        customStyle={{
+          margin: 0,
+          borderRadius: '0.5rem',
+          fontSize: '0.875rem',
+          padding: language !== 'text' ? '2rem 1rem 1rem 1rem' : '1rem',
+        }}
+      >
+        {rawContent}
+      </SyntaxHighlighter>
+    </div>
+  );
+}

src/components/code-editor/view/subcomponents/markdown/MarkdownPreview.tsx

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import type { Components } from 'react-markdown';
+import ReactMarkdown from 'react-markdown';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import MarkdownCodeBlock from './MarkdownCodeBlock';
+
+type MarkdownPreviewProps = {
+  content: string;
+};
+
+const markdownPreviewComponents: Components = {
+  code: MarkdownCodeBlock,
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 my-2">
+      {children}
+    </blockquote>
+  ),
+  a: ({ href, children }) => (
+    <a href={href} className="text-blue-600 dark:text-blue-400 hover:underline" target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  ),
+  table: ({ children }) => (
+    <div className="overflow-x-auto my-2">
+      <table className="min-w-full border-collapse border border-gray-200 dark:border-gray-700">{children}</table>
+    </div>
+  ),
+  thead: ({ children }) => <thead className="bg-gray-50 dark:bg-gray-800">{children}</thead>,
+  th: ({ children }) => (
+    <th className="px-3 py-2 text-left text-sm font-semibold border border-gray-200 dark:border-gray-700">{children}</th>
+  ),
+  td: ({ children }) => (
+    <td className="px-3 py-2 align-top text-sm border border-gray-200 dark:border-gray-700">{children}</td>
+  ),
+};
+
+export default function MarkdownPreview({ content }: MarkdownPreviewProps) {
+  const remarkPlugins = useMemo(() => [remarkGfm, remarkMath], []);
+  const rehypePlugins = useMemo(() => [rehypeKatex], []);
+
+  return (
+    <ReactMarkdown
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
+      components={markdownPreviewComponents}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}

src/components/file-tree/constants/constants.ts

@@ -0,0 +1,18 @@
+import type { FileTreeViewMode } from '../types/types';
+
+export const FILE_TREE_VIEW_MODE_STORAGE_KEY = 'file-tree-view-mode';
+
+export const FILE_TREE_DEFAULT_VIEW_MODE: FileTreeViewMode = 'detailed';
+
+export const FILE_TREE_VIEW_MODES: FileTreeViewMode[] = ['simple', 'compact', 'detailed'];
+
+export const IMAGE_FILE_EXTENSIONS = new Set([
+  'png',
+  'jpg',
+  'jpeg',
+  'gif',
+  'svg',
+  'webp',
+  'ico',
+  'bmp',
+]);

src/components/file-tree/constants/fileIcons.ts

@@ -0,0 +1,224 @@
+import {
+  Archive,
+  Binary,
+  Blocks,
+  BookOpen,
+  Box,
+  Braces,
+  Code2,
+  Cog,
+  Coffee,
+  Cpu,
+  Database,
+  File,
+  FileCheck,
+  FileCode,
+  FileCode2,
+  FileSpreadsheet,
+  FileText,
+  FileType,
+  Flame,
+  FlaskConical,
+  Gem,
+  Globe,
+  Hash,
+  Hexagon,
+  Image,
+  Lock,
+  Music2,
+  NotebookPen,
+  Palette,
+  Scroll,
+  Settings,
+  Shield,
+  SquareFunction,
+  Terminal,
+  Video,
+  Workflow,
+} from 'lucide-react';
+import type { FileIconData, FileIconMap } from '../types/types';
+
+export const ICON_SIZE_CLASS = 'w-4 h-4 flex-shrink-0';
+
+const FILE_ICON_MAP: FileIconMap = {
+  js: { icon: FileCode, color: 'text-yellow-500' },
+  jsx: { icon: FileCode, color: 'text-yellow-500' },
+  mjs: { icon: FileCode, color: 'text-yellow-500' },
+  cjs: { icon: FileCode, color: 'text-yellow-500' },
+  ts: { icon: FileCode2, color: 'text-blue-500' },
+  tsx: { icon: FileCode2, color: 'text-blue-500' },
+  mts: { icon: FileCode2, color: 'text-blue-500' },
+  py: { icon: Code2, color: 'text-emerald-500' },
+  pyw: { icon: Code2, color: 'text-emerald-500' },
+  pyi: { icon: Code2, color: 'text-emerald-400' },
+  ipynb: { icon: NotebookPen, color: 'text-orange-500' },
+  rs: { icon: Cog, color: 'text-orange-600' },
+  toml: { icon: Settings, color: 'text-gray-500' },
+  go: { icon: Hexagon, color: 'text-cyan-500' },
+  rb: { icon: Gem, color: 'text-red-500' },
+  erb: { icon: Gem, color: 'text-red-400' },
+  php: { icon: Blocks, color: 'text-violet-500' },
+  java: { icon: Coffee, color: 'text-red-600' },
+  jar: { icon: Coffee, color: 'text-red-500' },
+  kt: { icon: Hexagon, color: 'text-violet-500' },
+  kts: { icon: Hexagon, color: 'text-violet-400' },
+  c: { icon: Cpu, color: 'text-blue-600' },
+  h: { icon: Cpu, color: 'text-blue-400' },
+  cpp: { icon: Cpu, color: 'text-blue-700' },
+  hpp: { icon: Cpu, color: 'text-blue-500' },
+  cc: { icon: Cpu, color: 'text-blue-700' },
+  cs: { icon: Hexagon, color: 'text-purple-600' },
+  swift: { icon: Flame, color: 'text-orange-500' },
+  lua: { icon: SquareFunction, color: 'text-blue-500' },
+  r: { icon: FlaskConical, color: 'text-blue-600' },
+  html: { icon: Globe, color: 'text-orange-600' },
+  htm: { icon: Globe, color: 'text-orange-600' },
+  css: { icon: Hash, color: 'text-blue-500' },
+  scss: { icon: Hash, color: 'text-pink-500' },
+  sass: { icon: Hash, color: 'text-pink-400' },
+  less: { icon: Hash, color: 'text-indigo-500' },
+  vue: { icon: FileCode2, color: 'text-emerald-500' },
+  svelte: { icon: FileCode2, color: 'text-orange-500' },
+  json: { icon: Braces, color: 'text-yellow-600' },
+  jsonc: { icon: Braces, color: 'text-yellow-500' },
+  json5: { icon: Braces, color: 'text-yellow-500' },
+  yaml: { icon: Settings, color: 'text-purple-400' },
+  yml: { icon: Settings, color: 'text-purple-400' },
+  xml: { icon: FileCode, color: 'text-orange-500' },
+  csv: { icon: FileSpreadsheet, color: 'text-green-600' },
+  tsv: { icon: FileSpreadsheet, color: 'text-green-500' },
+  sql: { icon: Database, color: 'text-blue-500' },
+  graphql: { icon: Workflow, color: 'text-pink-500' },
+  gql: { icon: Workflow, color: 'text-pink-500' },
+  proto: { icon: Box, color: 'text-green-500' },
+  env: { icon: Shield, color: 'text-yellow-600' },
+  md: { icon: BookOpen, color: 'text-blue-500' },
+  mdx: { icon: BookOpen, color: 'text-blue-400' },
+  txt: { icon: FileText, color: 'text-gray-500' },
+  doc: { icon: FileText, color: 'text-blue-600' },
+  docx: { icon: FileText, color: 'text-blue-600' },
+  pdf: { icon: FileCheck, color: 'text-red-600' },
+  rtf: { icon: FileText, color: 'text-gray-500' },
+  tex: { icon: Scroll, color: 'text-teal-600' },
+  rst: { icon: FileText, color: 'text-gray-400' },
+  sh: { icon: Terminal, color: 'text-green-500' },
+  bash: { icon: Terminal, color: 'text-green-500' },
+  zsh: { icon: Terminal, color: 'text-green-400' },
+  fish: { icon: Terminal, color: 'text-green-400' },
+  ps1: { icon: Terminal, color: 'text-blue-400' },
+  bat: { icon: Terminal, color: 'text-gray-500' },
+  cmd: { icon: Terminal, color: 'text-gray-500' },
+  png: { icon: Image, color: 'text-purple-500' },
+  jpg: { icon: Image, color: 'text-purple-500' },
+  jpeg: { icon: Image, color: 'text-purple-500' },
+  gif: { icon: Image, color: 'text-purple-400' },
+  webp: { icon: Image, color: 'text-purple-400' },
+  ico: { icon: Image, color: 'text-purple-400' },
+  bmp: { icon: Image, color: 'text-purple-400' },
+  tiff: { icon: Image, color: 'text-purple-400' },
+  svg: { icon: Palette, color: 'text-amber-500' },
+  mp3: { icon: Music2, color: 'text-pink-500' },
+  wav: { icon: Music2, color: 'text-pink-500' },
+  ogg: { icon: Music2, color: 'text-pink-400' },
+  flac: { icon: Music2, color: 'text-pink-400' },
+  aac: { icon: Music2, color: 'text-pink-400' },
+  m4a: { icon: Music2, color: 'text-pink-400' },
+  mp4: { icon: Video, color: 'text-rose-500' },
+  mov: { icon: Video, color: 'text-rose-500' },
+  avi: { icon: Video, color: 'text-rose-500' },
+  webm: { icon: Video, color: 'text-rose-400' },
+  mkv: { icon: Video, color: 'text-rose-400' },
+  ttf: { icon: FileType, color: 'text-red-500' },
+  otf: { icon: FileType, color: 'text-red-500' },
+  woff: { icon: FileType, color: 'text-red-400' },
+  woff2: { icon: FileType, color: 'text-red-400' },
+  eot: { icon: FileType, color: 'text-red-400' },
+  zip: { icon: Archive, color: 'text-amber-600' },
+  tar: { icon: Archive, color: 'text-amber-600' },
+  gz: { icon: Archive, color: 'text-amber-600' },
+  bz2: { icon: Archive, color: 'text-amber-600' },
+  rar: { icon: Archive, color: 'text-amber-500' },
+  '7z': { icon: Archive, color: 'text-amber-500' },
+  lock: { icon: Lock, color: 'text-gray-500' },
+  exe: { icon: Binary, color: 'text-gray-500' },
+  bin: { icon: Binary, color: 'text-gray-500' },
+  dll: { icon: Binary, color: 'text-gray-400' },
+  so: { icon: Binary, color: 'text-gray-400' },
+  dylib: { icon: Binary, color: 'text-gray-400' },
+  wasm: { icon: Binary, color: 'text-purple-500' },
+  ini: { icon: Settings, color: 'text-gray-500' },
+  cfg: { icon: Settings, color: 'text-gray-500' },
+  conf: { icon: Settings, color: 'text-gray-500' },
+  log: { icon: Scroll, color: 'text-gray-400' },
+  map: { icon: File, color: 'text-gray-400' },
+};
+
+const FILENAME_ICON_MAP: FileIconMap = {
+  Dockerfile: { icon: Box, color: 'text-blue-500' },
+  'docker-compose.yml': { icon: Box, color: 'text-blue-500' },
+  'docker-compose.yaml': { icon: Box, color: 'text-blue-500' },
+  '.dockerignore': { icon: Box, color: 'text-gray-500' },
+  '.gitignore': { icon: Settings, color: 'text-gray-500' },
+  '.gitmodules': { icon: Settings, color: 'text-gray-500' },
+  '.gitattributes': { icon: Settings, color: 'text-gray-500' },
+  '.editorconfig': { icon: Settings, color: 'text-gray-500' },
+  '.prettierrc': { icon: Settings, color: 'text-pink-400' },
+  '.prettierignore': { icon: Settings, color: 'text-gray-500' },
+  '.eslintrc': { icon: Settings, color: 'text-violet-500' },
+  '.eslintrc.js': { icon: Settings, color: 'text-violet-500' },
+  '.eslintrc.json': { icon: Settings, color: 'text-violet-500' },
+  '.eslintrc.cjs': { icon: Settings, color: 'text-violet-500' },
+  'eslint.config.js': { icon: Settings, color: 'text-violet-500' },
+  'eslint.config.mjs': { icon: Settings, color: 'text-violet-500' },
+  '.env': { icon: Shield, color: 'text-yellow-600' },
+  '.env.local': { icon: Shield, color: 'text-yellow-600' },
+  '.env.development': { icon: Shield, color: 'text-yellow-500' },
+  '.env.production': { icon: Shield, color: 'text-yellow-600' },
+  '.env.example': { icon: Shield, color: 'text-yellow-400' },
+  'package.json': { icon: Braces, color: 'text-green-500' },
+  'package-lock.json': { icon: Lock, color: 'text-gray-500' },
+  'yarn.lock': { icon: Lock, color: 'text-blue-400' },
+  'pnpm-lock.yaml': { icon: Lock, color: 'text-orange-400' },
+  'bun.lockb': { icon: Lock, color: 'text-gray-400' },
+  'Cargo.toml': { icon: Cog, color: 'text-orange-600' },
+  'Cargo.lock': { icon: Lock, color: 'text-orange-400' },
+  Gemfile: { icon: Gem, color: 'text-red-500' },
+  'Gemfile.lock': { icon: Lock, color: 'text-red-400' },
+  Makefile: { icon: Terminal, color: 'text-gray-500' },
+  'CMakeLists.txt': { icon: Cog, color: 'text-blue-500' },
+  'tsconfig.json': { icon: Braces, color: 'text-blue-500' },
+  'jsconfig.json': { icon: Braces, color: 'text-yellow-500' },
+  'vite.config.ts': { icon: Flame, color: 'text-purple-500' },
+  'vite.config.js': { icon: Flame, color: 'text-purple-500' },
+  'webpack.config.js': { icon: Cog, color: 'text-blue-500' },
+  'tailwind.config.js': { icon: Hash, color: 'text-cyan-500' },
+  'tailwind.config.ts': { icon: Hash, color: 'text-cyan-500' },
+  'postcss.config.js': { icon: Cog, color: 'text-red-400' },
+  'babel.config.js': { icon: Settings, color: 'text-yellow-500' },
+  '.babelrc': { icon: Settings, color: 'text-yellow-500' },
+  'README.md': { icon: BookOpen, color: 'text-blue-500' },
+  LICENSE: { icon: FileCheck, color: 'text-gray-500' },
+  'LICENSE.md': { icon: FileCheck, color: 'text-gray-500' },
+  'CHANGELOG.md': { icon: Scroll, color: 'text-blue-400' },
+  'requirements.txt': { icon: FileText, color: 'text-emerald-400' },
+  'go.mod': { icon: Hexagon, color: 'text-cyan-500' },
+  'go.sum': { icon: Lock, color: 'text-cyan-400' },
+};
+
+// Icon resolution is deterministic: exact filename, then .env prefixes, then extension, then fallback.
+export function getFileIconData(filename: string): FileIconData {
+  if (FILENAME_ICON_MAP[filename]) {
+    return FILENAME_ICON_MAP[filename];
+  }
+
+  if (filename.startsWith('.env')) {
+    return { icon: Shield, color: 'text-yellow-600' };
+  }
+
+  const extension = filename.split('.').pop()?.toLowerCase();
+  if (extension && FILE_ICON_MAP[extension]) {
+    return FILE_ICON_MAP[extension];
+  }
+
+  return { icon: File, color: 'text-muted-foreground' };
+}

src/components/file-tree/hooks/useExpandedDirectories.ts

@@ -0,0 +1,44 @@
+import { useCallback, useState } from 'react';
+
+type UseExpandedDirectoriesResult = {
+  expandedDirs: Set<string>;
+  toggleDirectory: (path: string) => void;
+  expandDirectories: (paths: string[]) => void;
+};
+
+export function useExpandedDirectories(): UseExpandedDirectoriesResult {
+  const [expandedDirs, setExpandedDirs] = useState<Set<string>>(() => new Set());
+
+  const toggleDirectory = useCallback((path: string) => {
+    setExpandedDirs((previous) => {
+      const next = new Set(previous);
+
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+
+      return next;
+    });
+  }, []);
+
+  const expandDirectories = useCallback((paths: string[]) => {
+    if (paths.length === 0) {
+      return;
+    }
+
+    setExpandedDirs((previous) => {
+      const next = new Set(previous);
+      paths.forEach((path) => next.add(path));
+      return next;
+    });
+  }, []);
+
+  return {
+    expandedDirs,
+    toggleDirectory,
+    expandDirectories,
+  };
+}
+

src/components/file-tree/hooks/useFileTreeData.ts

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react';
+import { api } from '../../../utils/api';
+import type { Project } from '../../../types/app';
+import type { FileTreeNode } from '../types/types';
+
+type UseFileTreeDataResult = {
+  files: FileTreeNode[];
+  loading: boolean;
+};
+
+export function useFileTreeData(selectedProject: Project | null): UseFileTreeDataResult {
+  const [files, setFiles] = useState<FileTreeNode[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const projectName = selectedProject?.name;
+
+    if (!projectName) {
+      setFiles([]);
+      setLoading(false);
+      return;
+    }
+
+    const abortController = new AbortController();
+    // Track mount state so aborted or late responses do not enqueue stale state updates.
+    let isActive = true;
+
+    const fetchFiles = async () => {
+      if (isActive) {
+        setLoading(true);
+      }
+      try {
+        const response = await api.getFiles(projectName, { signal: abortController.signal });
+
+        if (!response.ok) {
+          const errorText = await response.text();
+          console.error('File fetch failed:', response.status, errorText);
+          if (isActive) {
+            setFiles([]);
+          }
+          return;
+        }
+
+        const data = (await response.json()) as FileTreeNode[];
+        if (isActive) {
+          setFiles(data);
+        }
+      } catch (error) {
+        if ((error as { name?: string }).name === 'AbortError') {
+          return;
+        }
+
+        console.error('Error fetching files:', error);
+        if (isActive) {
+          setFiles([]);
+        }
+      } finally {
+        if (isActive) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void fetchFiles();
+
+    return () => {
+      isActive = false;
+      abortController.abort();
+    };
+  }, [selectedProject?.name]);
+
+  return {
+    files,
+    loading,
+  };
+}

src/components/file-tree/hooks/useFileTreeSearch.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { collectExpandedDirectoryPaths, filterFileTree } from '../utils/fileTreeUtils';
+import type { FileTreeNode } from '../types/types';
+
+type UseFileTreeSearchArgs = {
+  files: FileTreeNode[];
+  expandDirectories: (paths: string[]) => void;
+};
+
+type UseFileTreeSearchResult = {
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  filteredFiles: FileTreeNode[];
+};
+
+export function useFileTreeSearch({
+  files,
+  expandDirectories,
+}: UseFileTreeSearchArgs): UseFileTreeSearchResult {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filteredFiles, setFilteredFiles] = useState<FileTreeNode[]>(files);
+
+  useEffect(() => {
+    const query = searchQuery.trim().toLowerCase();
+
+    if (!query) {
+      setFilteredFiles(files);
+      return;
+    }
+
+    const filtered = filterFileTree(files, query);
+    setFilteredFiles(filtered);
+    // Keep search results visible by opening every matching ancestor directory once per query update.
+    expandDirectories(collectExpandedDirectoryPaths(filtered));
+  }, [files, searchQuery, expandDirectories]);
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    filteredFiles,
+  };
+}

src/components/file-tree/hooks/useFileTreeViewMode.ts

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  FILE_TREE_DEFAULT_VIEW_MODE,
+  FILE_TREE_VIEW_MODES,
+  FILE_TREE_VIEW_MODE_STORAGE_KEY,
+} from '../constants/constants';
+import type { FileTreeViewMode } from '../types/types';
+
+type UseFileTreeViewModeResult = {
+  viewMode: FileTreeViewMode;
+  changeViewMode: (mode: FileTreeViewMode) => void;
+};
+
+export function useFileTreeViewMode(): UseFileTreeViewModeResult {
+  const [viewMode, setViewMode] = useState<FileTreeViewMode>(FILE_TREE_DEFAULT_VIEW_MODE);
+
+  useEffect(() => {
+    try {
+      const savedViewMode = localStorage.getItem(FILE_TREE_VIEW_MODE_STORAGE_KEY);
+      if (savedViewMode && FILE_TREE_VIEW_MODES.includes(savedViewMode as FileTreeViewMode)) {
+        setViewMode(savedViewMode as FileTreeViewMode);
+      }
+    } catch {
+      // Keep default view mode when storage is unavailable.
+    }
+  }, []);
+
+  const changeViewMode = useCallback((mode: FileTreeViewMode) => {
+    setViewMode(mode);
+
+    try {
+      localStorage.setItem(FILE_TREE_VIEW_MODE_STORAGE_KEY, mode);
+    } catch {
+      // Keep runtime state even when persistence fails.
+    }
+  }, []);
+
+  return {
+    viewMode,
+    changeViewMode,
+  };
+}
+

src/components/file-tree/types/types.ts

@@ -0,0 +1,30 @@
+import type { LucideIcon } from 'lucide-react';
+
+export type FileTreeViewMode = 'simple' | 'compact' | 'detailed';
+
+export type FileTreeItemType = 'file' | 'directory';
+
+export interface FileTreeNode {
+  name: string;
+  type: FileTreeItemType;
+  path: string;
+  size?: number;
+  modified?: string;
+  permissionsRwx?: string;
+  children?: FileTreeNode[];
+  [key: string]: unknown;
+}
+
+export interface FileTreeImageSelection {
+  name: string;
+  path: string;
+  projectPath?: string;
+  projectName: string;
+}
+
+export interface FileIconData {
+  icon: LucideIcon;
+  color: string;
+}
+
+export type FileIconMap = Record<string, FileIconData>;

src/components/file-tree/utils/fileTreeUtils.ts

@@ -0,0 +1,83 @@
+import type { TFunction } from 'i18next';
+import { IMAGE_FILE_EXTENSIONS } from '../constants/constants';
+import type { FileTreeNode } from '../types/types';
+
+export function filterFileTree(items: FileTreeNode[], query: string): FileTreeNode[] {
+  return items.reduce<FileTreeNode[]>((filteredItems, item) => {
+    const matchesName = item.name.toLowerCase().includes(query);
+    const filteredChildren =
+      item.type === 'directory' && item.children ? filterFileTree(item.children, query) : [];
+
+    if (matchesName || filteredChildren.length > 0) {
+      filteredItems.push({
+        ...item,
+        children: filteredChildren,
+      });
+    }
+
+    return filteredItems;
+  }, []);
+}
+
+// During search we auto-expand every directory present in the filtered subtree.
+export function collectExpandedDirectoryPaths(items: FileTreeNode[]): string[] {
+  const paths: string[] = [];
+
+  const visit = (nodes: FileTreeNode[]) => {
+    nodes.forEach((node) => {
+      if (node.type === 'directory' && node.children && node.children.length > 0) {
+        paths.push(node.path);
+        visit(node.children);
+      }
+    });
+  };
+
+  visit(items);
+  return paths;
+}
+
+export function formatFileSize(bytes?: number): string {
+  if (!bytes || bytes === 0) {
+    return '0 B';
+  }
+
+  const base = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const index = Math.floor(Math.log(bytes) / Math.log(base));
+
+  return `${(bytes / Math.pow(base, index)).toFixed(1).replace(/\.0$/, '')} ${sizes[index]}`;
+}
+
+export function formatRelativeTime(date: string | undefined, t: TFunction): string {
+  if (!date) {
+    return '-';
+  }
+
+  const now = new Date();
+  const past = new Date(date);
+  const diffInSeconds = Math.floor((now.getTime() - past.getTime()) / 1000);
+
+  if (diffInSeconds < 60) {
+    return t('fileTree.justNow');
+  }
+
+  if (diffInSeconds < 3600) {
+    return t('fileTree.minAgo', { count: Math.floor(diffInSeconds / 60) });
+  }
+
+  if (diffInSeconds < 86400) {
+    return t('fileTree.hoursAgo', { count: Math.floor(diffInSeconds / 3600) });
+  }
+
+  if (diffInSeconds < 2592000) {
+    return t('fileTree.daysAgo', { count: Math.floor(diffInSeconds / 86400) });
+  }
+
+  return past.toLocaleDateString();
+}
+
+export function isImageFile(filename: string): boolean {
+  const extension = filename.split('.').pop()?.toLowerCase();
+  return Boolean(extension && IMAGE_FILE_EXTENSIONS.has(extension));
+}
+

src/components/file-tree/view/FileTree.tsx

@@ -0,0 +1,103 @@
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { cn } from '../../../lib/utils';
+import ImageViewer from './ImageViewer';
+import { ICON_SIZE_CLASS, getFileIconData } from '../constants/fileIcons';
+import { useExpandedDirectories } from '../hooks/useExpandedDirectories';
+import { useFileTreeData } from '../hooks/useFileTreeData';
+import { useFileTreeSearch } from '../hooks/useFileTreeSearch';
+import { useFileTreeViewMode } from '../hooks/useFileTreeViewMode';
+import type { FileTreeImageSelection, FileTreeNode } from '../types/types';
+import { formatFileSize, formatRelativeTime, isImageFile } from '../utils/fileTreeUtils';
+import FileTreeBody from './FileTreeBody';
+import FileTreeDetailedColumns from './FileTreeDetailedColumns';
+import FileTreeHeader from './FileTreeHeader';
+import FileTreeLoadingState from './FileTreeLoadingState';
+import { Project } from '../../../types/app';
+
+type FileTreeProps =  {
+  selectedProject: Project | null;
+  onFileOpen?: (filePath: string) => void;
+}
+
+export default function FileTree({ selectedProject, onFileOpen }: FileTreeProps) {
+  const { t } = useTranslation();
+  const [selectedImage, setSelectedImage] = useState<FileTreeImageSelection | null>(null);
+
+  const { files, loading } = useFileTreeData(selectedProject);
+  const { viewMode, changeViewMode } = useFileTreeViewMode();
+  const { expandedDirs, toggleDirectory, expandDirectories } = useExpandedDirectories();
+  const { searchQuery, setSearchQuery, filteredFiles } = useFileTreeSearch({
+    files,
+    expandDirectories,
+  });
+
+  const renderFileIcon = useCallback((filename: string) => {
+    const { icon: Icon, color } = getFileIconData(filename);
+    return <Icon className={cn(ICON_SIZE_CLASS, color)} />;
+  }, []);
+
+  // Centralized click behavior keeps file actions identical across all presentation modes.
+  const handleItemClick = useCallback(
+    (item: FileTreeNode) => {
+      if (item.type === 'directory') {
+        toggleDirectory(item.path);
+        return;
+      }
+
+      if (isImageFile(item.name) && selectedProject) {
+        setSelectedImage({
+          name: item.name,
+          path: item.path,
+          projectPath: selectedProject.path,
+          projectName: selectedProject.name,
+        });
+        return;
+      }
+
+      onFileOpen?.(item.path);
+    },
+    [onFileOpen, selectedProject, toggleDirectory],
+  );
+
+  const formatRelativeTimeLabel = useCallback(
+    (date?: string) => formatRelativeTime(date, t),
+    [t],
+  );
+
+  if (loading) {
+    return <FileTreeLoadingState />;
+  }
+
+  return (
+    <div className="h-full flex flex-col bg-background">
+      <FileTreeHeader
+        viewMode={viewMode}
+        onViewModeChange={changeViewMode}
+        searchQuery={searchQuery}
+        onSearchQueryChange={setSearchQuery}
+      />
+
+      {viewMode === 'detailed' && filteredFiles.length > 0 && <FileTreeDetailedColumns />}
+
+      <FileTreeBody
+        files={files}
+        filteredFiles={filteredFiles}
+        searchQuery={searchQuery}
+        viewMode={viewMode}
+        expandedDirs={expandedDirs}
+        onItemClick={handleItemClick}
+        renderFileIcon={renderFileIcon}
+        formatFileSize={formatFileSize}
+        formatRelativeTime={formatRelativeTimeLabel}
+      />
+
+      {selectedImage && (
+        <ImageViewer
+          file={selectedImage}
+          onClose={() => setSelectedImage(null)}
+        />
+      )}
+    </div>
+  );
+}

src/components/file-tree/view/FileTreeBody.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+import { Folder, Search } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ScrollArea } from '../../ui/scroll-area';
+import type { FileTreeNode, FileTreeViewMode } from '../types/types';
+import FileTreeEmptyState from './FileTreeEmptyState';
+import FileTreeList from './FileTreeList';
+
+type FileTreeBodyProps = {
+  files: FileTreeNode[];
+  filteredFiles: FileTreeNode[];
+  searchQuery: string;
+  viewMode: FileTreeViewMode;
+  expandedDirs: Set<string>;
+  onItemClick: (item: FileTreeNode) => void;
+  renderFileIcon: (filename: string) => ReactNode;
+  formatFileSize: (bytes?: number) => string;
+  formatRelativeTime: (date?: string) => string;
+};
+
+export default function FileTreeBody({
+  files,
+  filteredFiles,
+  searchQuery,
+  viewMode,
+  expandedDirs,
+  onItemClick,
+  renderFileIcon,
+  formatFileSize,
+  formatRelativeTime,
+}: FileTreeBodyProps) {
+  const { t } = useTranslation();
+
+  return (
+    <ScrollArea className="flex-1 px-2 py-1">
+      {files.length === 0 ? (
+        <FileTreeEmptyState
+          icon={Folder}
+          title={t('fileTree.noFilesFound')}
+          description={t('fileTree.checkProjectPath')}
+        />
+      ) : filteredFiles.length === 0 && searchQuery ? (
+        <FileTreeEmptyState
+          icon={Search}
+          title={t('fileTree.noMatchesFound')}
+          description={t('fileTree.tryDifferentSearch')}
+        />
+      ) : (
+        <FileTreeList
+          items={filteredFiles}
+          viewMode={viewMode}
+          expandedDirs={expandedDirs}
+          onItemClick={onItemClick}
+          renderFileIcon={renderFileIcon}
+          formatFileSize={formatFileSize}
+          formatRelativeTime={formatRelativeTime}
+        />
+      )}
+    </ScrollArea>
+  );
+}
+

src/components/file-tree/view/FileTreeDetailedColumns.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next';
+
+export default function FileTreeDetailedColumns() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="px-3 pt-1.5 pb-1 border-b border-border">
+      <div className="grid grid-cols-12 gap-2 px-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+        <div className="col-span-5">{t('fileTree.name')}</div>
+        <div className="col-span-2">{t('fileTree.size')}</div>
+        <div className="col-span-3">{t('fileTree.modified')}</div>
+        <div className="col-span-2">{t('fileTree.permissions')}</div>
+      </div>
+    </div>
+  );
+}
+

src/components/file-tree/view/FileTreeEmptyState.tsx

@@ -0,0 +1,20 @@
+import type { LucideIcon } from 'lucide-react';
+
+type FileTreeEmptyStateProps = {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+};
+
+export default function FileTreeEmptyState({ icon: Icon, title, description }: FileTreeEmptyStateProps) {
+  return (
+    <div className="text-center py-8">
+      <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-3">
+        <Icon className="w-6 h-6 text-muted-foreground" />
+      </div>
+      <h4 className="font-medium text-foreground mb-1">{title}</h4>
+      <p className="text-sm text-muted-foreground">{description}</p>
+    </div>
+  );
+}
+

src/components/file-tree/view/FileTreeHeader.tsx

@@ -0,0 +1,81 @@
+import { Eye, List, Search, TableProperties, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../ui/button';
+import { Input } from '../../ui/input';
+import type { FileTreeViewMode } from '../types/types';
+
+type FileTreeHeaderProps = {
+  viewMode: FileTreeViewMode;
+  onViewModeChange: (mode: FileTreeViewMode) => void;
+  searchQuery: string;
+  onSearchQueryChange: (query: string) => void;
+};
+
+export default function FileTreeHeader({
+  viewMode,
+  onViewModeChange,
+  searchQuery,
+  onSearchQueryChange,
+}: FileTreeHeaderProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="px-3 pt-3 pb-2 border-b border-border space-y-2">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-foreground">{t('fileTree.files')}</h3>
+        <div className="flex gap-0.5">
+          <Button
+            variant={viewMode === 'simple' ? 'default' : 'ghost'}
+            size="sm"
+            className="h-7 w-7 p-0"
+            onClick={() => onViewModeChange('simple')}
+            title={t('fileTree.simpleView')}
+          >
+            <List className="w-3.5 h-3.5" />
+          </Button>
+          <Button
+            variant={viewMode === 'compact' ? 'default' : 'ghost'}
+            size="sm"
+            className="h-7 w-7 p-0"
+            onClick={() => onViewModeChange('compact')}
+            title={t('fileTree.compactView')}
+          >
+            <Eye className="w-3.5 h-3.5" />
+          </Button>
+          <Button
+            variant={viewMode === 'detailed' ? 'default' : 'ghost'}
+            size="sm"
+            className="h-7 w-7 p-0"
+            onClick={() => onViewModeChange('detailed')}
+            title={t('fileTree.detailedView')}
+          >
+            <TableProperties className="w-3.5 h-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="relative">
+        <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+        <Input
+          type="text"
+          placeholder={t('fileTree.searchPlaceholder')}
+          value={searchQuery}
+          onChange={(event) => onSearchQueryChange(event.target.value)}
+          className="pl-8 pr-8 h-8 text-sm"
+        />
+        {searchQuery && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="absolute right-0.5 top-1/2 -translate-y-1/2 h-5 w-5 p-0 hover:bg-accent"
+            onClick={() => onSearchQueryChange('')}
+            title={t('fileTree.clearSearch')}
+          >
+            <X className="w-3 h-3" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+

src/components/file-tree/view/FileTreeList.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import type { FileTreeNode as FileTreeNodeType, FileTreeViewMode } from '../types/types';
+import FileTreeNode from './FileTreeNode';
+
+type FileTreeListProps = {
+  items: FileTreeNodeType[];
+  viewMode: FileTreeViewMode;
+  expandedDirs: Set<string>;
+  onItemClick: (item: FileTreeNodeType) => void;
+  renderFileIcon: (filename: string) => ReactNode;
+  formatFileSize: (bytes?: number) => string;
+  formatRelativeTime: (date?: string) => string;
+};
+
+export default function FileTreeList({
+  items,
+  viewMode,
+  expandedDirs,
+  onItemClick,
+  renderFileIcon,
+  formatFileSize,
+  formatRelativeTime,
+}: FileTreeListProps) {
+  return (
+    <div>
+      {items.map((item) => (
+        <FileTreeNode
+          key={item.path}
+          item={item}
+          level={0}
+          viewMode={viewMode}
+          expandedDirs={expandedDirs}
+          onItemClick={onItemClick}
+          renderFileIcon={renderFileIcon}
+          formatFileSize={formatFileSize}
+          formatRelativeTime={formatRelativeTime}
+        />
+      ))}
+    </div>
+  );
+}
+

src/components/file-tree/view/FileTreeLoadingState.tsx

@@ -0,0 +1,12 @@
+import { useTranslation } from 'react-i18next';
+
+export default function FileTreeLoadingState() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full flex items-center justify-center">
+      <div className="text-muted-foreground text-sm">{t('fileTree.loading')}</div>
+    </div>
+  );
+}
+

src/components/file-tree/view/FileTreeNode.tsx

@@ -0,0 +1,141 @@
+import type { ReactNode } from 'react';
+import { ChevronRight, Folder, FolderOpen } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import type { FileTreeNode as FileTreeNodeType, FileTreeViewMode } from '../types/types';
+
+type FileTreeNodeProps = {
+  item: FileTreeNodeType;
+  level: number;
+  viewMode: FileTreeViewMode;
+  expandedDirs: Set<string>;
+  onItemClick: (item: FileTreeNodeType) => void;
+  renderFileIcon: (filename: string) => ReactNode;
+  formatFileSize: (bytes?: number) => string;
+  formatRelativeTime: (date?: string) => string;
+};
+
+type TreeItemIconProps = {
+  item: FileTreeNodeType;
+  isOpen: boolean;
+  renderFileIcon: (filename: string) => ReactNode;
+};
+
+function TreeItemIcon({ item, isOpen, renderFileIcon }: TreeItemIconProps) {
+  if (item.type === 'directory') {
+    return (
+      <span className="flex items-center gap-0.5 flex-shrink-0">
+        <ChevronRight
+          className={cn(
+            'w-3.5 h-3.5 text-muted-foreground/70 transition-transform duration-150',
+            isOpen && 'rotate-90',
+          )}
+        />
+        {isOpen ? (
+          <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
+        ) : (
+          <Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+        )}
+      </span>
+    );
+  }
+
+  return <span className="flex items-center flex-shrink-0 ml-[18px]">{renderFileIcon(item.name)}</span>;
+}
+
+export default function FileTreeNode({
+  item,
+  level,
+  viewMode,
+  expandedDirs,
+  onItemClick,
+  renderFileIcon,
+  formatFileSize,
+  formatRelativeTime,
+}: FileTreeNodeProps) {
+  const isDirectory = item.type === 'directory';
+  const isOpen = isDirectory && expandedDirs.has(item.path);
+  const hasChildren = Boolean(isDirectory && item.children && item.children.length > 0);
+
+  const nameClassName = cn(
+    'text-[13px] leading-tight truncate',
+    isDirectory ? 'font-medium text-foreground' : 'text-foreground/90',
+  );
+
+  // View mode only changes the row layout; selection, expansion, and recursion stay shared.
+  const rowClassName = cn(
+    viewMode === 'detailed'
+      ? 'group grid grid-cols-12 gap-2 py-[3px] pr-2 hover:bg-accent/60 cursor-pointer items-center rounded-sm transition-colors duration-100'
+      : viewMode === 'compact'
+      ? 'group flex items-center justify-between py-[3px] pr-2 hover:bg-accent/60 cursor-pointer rounded-sm transition-colors duration-100'
+      : 'group flex items-center gap-1.5 py-[3px] pr-2 cursor-pointer rounded-sm hover:bg-accent/60 transition-colors duration-100',
+    isDirectory && isOpen && 'border-l-2 border-primary/30',
+    (isDirectory && !isOpen) || !isDirectory ? 'border-l-2 border-transparent' : '',
+  );
+
+  return (
+    <div className="select-none">
+      <div
+        className={rowClassName}
+        style={{ paddingLeft: `${level * 16 + 4}px` }}
+        onClick={() => onItemClick(item)}
+      >
+        {viewMode === 'detailed' ? (
+          <>
+            <div className="col-span-5 flex items-center gap-1.5 min-w-0">
+              <TreeItemIcon item={item} isOpen={isOpen} renderFileIcon={renderFileIcon} />
+              <span className={nameClassName}>{item.name}</span>
+            </div>
+            <div className="col-span-2 text-sm text-muted-foreground tabular-nums">
+              {item.type === 'file' ? formatFileSize(item.size) : ''}
+            </div>
+            <div className="col-span-3 text-sm text-muted-foreground">{formatRelativeTime(item.modified)}</div>
+            <div className="col-span-2 text-sm text-muted-foreground font-mono">{item.permissionsRwx || ''}</div>
+          </>
+        ) : viewMode === 'compact' ? (
+          <>
+            <div className="flex items-center gap-1.5 min-w-0">
+              <TreeItemIcon item={item} isOpen={isOpen} renderFileIcon={renderFileIcon} />
+              <span className={nameClassName}>{item.name}</span>
+            </div>
+            <div className="flex items-center gap-3 text-sm text-muted-foreground flex-shrink-0 ml-2">
+              {item.type === 'file' && (
+                <>
+                  <span className="tabular-nums">{formatFileSize(item.size)}</span>
+                  <span className="font-mono">{item.permissionsRwx}</span>
+                </>
+              )}
+            </div>
+          </>
+        ) : (
+          <>
+            <TreeItemIcon item={item} isOpen={isOpen} renderFileIcon={renderFileIcon} />
+            <span className={nameClassName}>{item.name}</span>
+          </>
+        )}
+      </div>
+
+      {isDirectory && isOpen && hasChildren && (
+        <div className="relative">
+          <span
+            className="absolute top-0 bottom-0 border-l border-border/40"
+            style={{ left: `${level * 16 + 14}px` }}
+            aria-hidden="true"
+          />
+          {item.children?.map((child) => (
+            <FileTreeNode
+              key={child.path}
+              item={child}
+              level={level + 1}
+              viewMode={viewMode}
+              expandedDirs={expandedDirs}
+              onItemClick={onItemClick}
+              renderFileIcon={renderFileIcon}
+              formatFileSize={formatFileSize}
+              formatRelativeTime={formatRelativeTime}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/file-tree/view/ImageViewer.tsx

@@ -1,16 +1,22 @@
-import React, { useEffect, useState } from 'react';
-import { Button } from './ui/button';
+import { useEffect, useState } from 'react';
 import { X } from 'lucide-react';
-import { authenticatedFetch } from '../utils/api';
+import { Button } from '../../ui/button';
+import { authenticatedFetch } from '../../../utils/api';
+import type { FileTreeImageSelection } from '../types/types';
 
-function ImageViewer({ file, onClose }) {
+type ImageViewerProps = {
+  file: FileTreeImageSelection;
+  onClose: () => void;
+};
+
+export default function ImageViewer({ file, onClose }: ImageViewerProps) {
   const imagePath = `/api/projects/${file.projectName}/files/content?path=${encodeURIComponent(file.path)}`;
-  const [imageUrl, setImageUrl] = useState(null);
-  const [error, setError] = useState(null);
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    let objectUrl;
+    let objectUrl: string | null = null;
     const controller = new AbortController();
 
     const loadImage = async () => {
@@ -20,7 +26,7 @@ function ImageViewer({ file, onClose }) {
         setImageUrl(null);
 
         const response = await authenticatedFetch(imagePath, {
-          signal: controller.signal
+          signal: controller.signal,
         });
 
         if (!response.ok) {
@@ -30,11 +36,11 @@ function ImageViewer({ file, onClose }) {
         const blob = await response.blob();
         objectUrl = URL.createObjectURL(blob);
         setImageUrl(objectUrl);
-      } catch (err) {
-        if (err.name === 'AbortError') {
+      } catch (loadError: unknown) {
+        if (loadError instanceof Error && loadError.name === 'AbortError') {
           return;
         }
-        console.error('Error loading image:', err);
+        console.error('Error loading image:', loadError);
         setError('Unable to load image');
       } finally {
         setLoading(false);
@@ -55,15 +61,8 @@ function ImageViewer({ file, onClose }) {
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
       <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl max-h-[90vh] w-full mx-4 overflow-hidden">
         <div className="flex items-center justify-between p-4 border-b">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-            {file.name}
-          </h3>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onClose}
-            className="h-8 w-8 p-0"
-          >
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{file.name}</h3>
+          <Button variant="ghost" size="sm" onClick={onClose} className="h-8 w-8 p-0">
             <X className="h-4 w-4" />
           </Button>
         </div>
@@ -71,7 +70,7 @@ function ImageViewer({ file, onClose }) {
         <div className="p-4 flex justify-center items-center bg-gray-50 dark:bg-gray-900 min-h-[400px]">
           {loading && (
             <div className="text-center text-gray-500 dark:text-gray-400">
-              <p>Loading image…</p>
+              <p>Loading image...</p>
             </div>
           )}
           {!loading && imageUrl && (
@@ -90,13 +89,9 @@ function ImageViewer({ file, onClose }) {
         </div>
 
         <div className="p-4 border-t bg-gray-50 dark:bg-gray-800">
-          <p className="text-sm text-gray-600 dark:text-gray-400">
-            {file.path}
-          </p>
+          <p className="text-sm text-gray-600 dark:text-gray-400">{file.path}</p>
         </div>
       </div>
     </div>
   );
 }
-
-export default ImageViewer;

src/components/git-panel/constants/constants.ts

@@ -0,0 +1,70 @@
+import type { ConfirmActionType, FileStatusCode, GitStatusGroupEntry } from '../types/types';
+
+export const DEFAULT_BRANCH = 'main';
+export const RECENT_COMMITS_LIMIT = 10;
+
+export const FILE_STATUS_GROUPS: GitStatusGroupEntry[] = [
+  { key: 'modified', status: 'M' },
+  { key: 'added', status: 'A' },
+  { key: 'deleted', status: 'D' },
+  { key: 'untracked', status: 'U' },
+];
+
+export const FILE_STATUS_LABELS: Record<FileStatusCode, string> = {
+  M: 'Modified',
+  A: 'Added',
+  D: 'Deleted',
+  U: 'Untracked',
+};
+
+export const FILE_STATUS_BADGE_CLASSES: Record<FileStatusCode, string> = {
+  M: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800/50',
+  A: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300 border-green-200 dark:border-green-800/50',
+  D: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 border-red-200 dark:border-red-800/50',
+  U: 'bg-muted text-muted-foreground border-border',
+};
+
+export const CONFIRMATION_TITLES: Record<ConfirmActionType, string> = {
+  discard: 'Discard Changes',
+  delete: 'Delete File',
+  commit: 'Confirm Commit',
+  pull: 'Confirm Pull',
+  push: 'Confirm Push',
+  publish: 'Publish Branch',
+};
+
+export const CONFIRMATION_ACTION_LABELS: Record<ConfirmActionType, string> = {
+  discard: 'Discard',
+  delete: 'Delete',
+  commit: 'Commit',
+  pull: 'Pull',
+  push: 'Push',
+  publish: 'Publish',
+};
+
+export const CONFIRMATION_BUTTON_CLASSES: Record<ConfirmActionType, string> = {
+  discard: 'bg-red-600 hover:bg-red-700',
+  delete: 'bg-red-600 hover:bg-red-700',
+  commit: 'bg-primary hover:bg-primary/90',
+  pull: 'bg-green-600 hover:bg-green-700',
+  push: 'bg-orange-600 hover:bg-orange-700',
+  publish: 'bg-purple-600 hover:bg-purple-700',
+};
+
+export const CONFIRMATION_ICON_CONTAINER_CLASSES: Record<ConfirmActionType, string> = {
+  discard: 'bg-red-100 dark:bg-red-900/30',
+  delete: 'bg-red-100 dark:bg-red-900/30',
+  commit: 'bg-yellow-100 dark:bg-yellow-900/30',
+  pull: 'bg-yellow-100 dark:bg-yellow-900/30',
+  push: 'bg-yellow-100 dark:bg-yellow-900/30',
+  publish: 'bg-yellow-100 dark:bg-yellow-900/30',
+};
+
+export const CONFIRMATION_ICON_CLASSES: Record<ConfirmActionType, string> = {
+  discard: 'text-red-600 dark:text-red-400',
+  delete: 'text-red-600 dark:text-red-400',
+  commit: 'text-yellow-600 dark:text-yellow-400',
+  pull: 'text-yellow-600 dark:text-yellow-400',
+  push: 'text-yellow-600 dark:text-yellow-400',
+  publish: 'text-yellow-600 dark:text-yellow-400',
+};

src/components/git-panel/hooks/useGitPanelController.ts

@@ -0,0 +1,710 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { authenticatedFetch } from '../../../utils/api';
+import { DEFAULT_BRANCH, RECENT_COMMITS_LIMIT } from '../constants/constants';
+import type {
+  GitApiErrorResponse,
+  GitBranchesResponse,
+  GitCommitSummary,
+  GitCommitsResponse,
+  GitDiffMap,
+  GitDiffResponse,
+  GitFileWithDiffResponse,
+  GitGenerateMessageResponse,
+  GitOperationResponse,
+  GitPanelController,
+  GitRemoteStatus,
+  GitStatusResponse,
+  UseGitPanelControllerOptions,
+} from '../types/types';
+import { getAllChangedFiles } from '../utils/gitPanelUtils';
+import { useSelectedProvider } from './useSelectedProvider';
+
+// ! use authenticatedFetch directly. fetchWithAuth is redundant 
+const fetchWithAuth = authenticatedFetch as (url: string, options?: RequestInit) => Promise<Response>;
+
+function isAbortError(error: unknown): boolean {
+  return error instanceof DOMException && error.name === 'AbortError';
+}
+
+async function readJson<T>(response: Response, signal?: AbortSignal): Promise<T> {
+  if (signal?.aborted) {
+    throw new DOMException('Request aborted', 'AbortError');
+  }
+
+  const data = (await response.json()) as T;
+
+  if (signal?.aborted) {
+    throw new DOMException('Request aborted', 'AbortError');
+  }
+
+  return data;
+}
+
+export function useGitPanelController({
+  selectedProject,
+  activeView,
+  onFileOpen,
+}: UseGitPanelControllerOptions): GitPanelController {
+  const [gitStatus, setGitStatus] = useState<GitStatusResponse | null>(null);
+  const [gitDiff, setGitDiff] = useState<GitDiffMap>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentBranch, setCurrentBranch] = useState('');
+  const [branches, setBranches] = useState<string[]>([]);
+  const [recentCommits, setRecentCommits] = useState<GitCommitSummary[]>([]);
+  const [commitDiffs, setCommitDiffs] = useState<GitDiffMap>({});
+  const [remoteStatus, setRemoteStatus] = useState<GitRemoteStatus | null>(null);
+  const [isCreatingBranch, setIsCreatingBranch] = useState(false);
+  const [isFetching, setIsFetching] = useState(false);
+  const [isPulling, setIsPulling] = useState(false);
+  const [isPushing, setIsPushing] = useState(false);
+  const [isPublishing, setIsPublishing] = useState(false);
+  const [isCreatingInitialCommit, setIsCreatingInitialCommit] = useState(false);
+  const selectedProjectNameRef = useRef<string | null>(selectedProject?.name ?? null);
+
+  useEffect(() => {
+    selectedProjectNameRef.current = selectedProject?.name ?? null;
+  }, [selectedProject]);
+
+  const provider = useSelectedProvider();
+
+  const fetchFileDiff = useCallback(
+    async (filePath: string, signal?: AbortSignal) => {
+      if (!selectedProject) {
+        return;
+      }
+
+      const projectName = selectedProject.name;
+
+      try {
+        const response = await fetchWithAuth(
+          `/api/git/diff?project=${encodeURIComponent(projectName)}&file=${encodeURIComponent(filePath)}`,
+          { signal },
+        );
+        const data = await readJson<GitDiffResponse>(response, signal);
+
+        if (
+          signal?.aborted ||
+          selectedProjectNameRef.current !== projectName
+        ) {
+          return;
+        }
+
+        if (!data.error && data.diff) {
+          setGitDiff((previous) => ({
+            ...previous,
+            [filePath]: data.diff as string,
+          }));
+        }
+      } catch (error) {
+        if (signal?.aborted || isAbortError(error)) {
+          return;
+        }
+
+        console.error('Error fetching file diff:', error);
+      }
+    },
+    [selectedProject],
+  );
+
+  const fetchGitStatus = useCallback(async (signal?: AbortSignal) => {
+    if (!selectedProject) {
+      return;
+    }
+
+    const projectName = selectedProject.name;
+
+    setIsLoading(true);
+    try {
+      const response = await fetchWithAuth(`/api/git/status?project=${encodeURIComponent(projectName)}`, { signal });
+      const data = await readJson<GitStatusResponse>(response, signal);
+
+      if (
+        signal?.aborted ||
+        selectedProjectNameRef.current !== projectName
+      ) {
+        return;
+      }
+
+      if (data.error) {
+        console.error('Git status error:', data.error);
+        setGitStatus({ error: data.error, details: data.details });
+        setCurrentBranch('');
+        return;
+      }
+
+      setGitStatus(data);
+      setCurrentBranch(data.branch || DEFAULT_BRANCH);
+
+      const changedFiles = getAllChangedFiles(data);
+      changedFiles.forEach((filePath) => {
+        void fetchFileDiff(filePath, signal);
+      });
+    } catch (error) {
+      if (signal?.aborted || isAbortError(error)) {
+        return;
+      }
+
+      if (
+        selectedProjectNameRef.current !== projectName
+      ) {
+        return;
+      }
+
+      console.error('Error fetching git status:', error);
+      setGitStatus({ error: 'Git operation failed', details: String(error) });
+      setCurrentBranch('');
+    } finally {
+      if (
+        signal?.aborted ||
+        selectedProjectNameRef.current !== projectName
+      ) {
+        return;
+      }
+
+      setIsLoading(false);
+    }
+  }, [fetchFileDiff, selectedProject]);
+
+  const fetchBranches = useCallback(async () => {
+    if (!selectedProject) {
+      return;
+    }
+
+    try {
+      const response = await fetchWithAuth(`/api/git/branches?project=${encodeURIComponent(selectedProject.name)}`);
+      const data = await readJson<GitBranchesResponse>(response);
+
+      if (!data.error && data.branches) {
+        setBranches(data.branches);
+        return;
+      }
+
+      setBranches([]);
+    } catch (error) {
+      console.error('Error fetching branches:', error);
+      setBranches([]);
+    }
+  }, [selectedProject]);
+
+  const fetchRemoteStatus = useCallback(async () => {
+    if (!selectedProject) {
+      return;
+    }
+
+    try {
+      const response = await fetchWithAuth(`/api/git/remote-status?project=${encodeURIComponent(selectedProject.name)}`);
+      const data = await readJson<GitRemoteStatus | GitApiErrorResponse>(response);
+
+      if (!data.error) {
+        setRemoteStatus(data as GitRemoteStatus);
+        return;
+      }
+
+      setRemoteStatus(null);
+    } catch (error) {
+      console.error('Error fetching remote status:', error);
+      setRemoteStatus(null);
+    }
+  }, [selectedProject]);
+
+  const switchBranch = useCallback(
+    async (branchName: string) => {
+      if (!selectedProject) {
+        return false;
+      }
+
+      try {
+        const response = await fetchWithAuth('/api/git/checkout', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            project: selectedProject.name,
+            branch: branchName,
+          }),
+        });
+
+        const data = await readJson<GitOperationResponse>(response);
+        if (!data.success) {
+          console.error('Failed to switch branch:', data.error);
+          return false;
+        }
+
+        setCurrentBranch(branchName);
+        void fetchGitStatus();
+        return true;
+      } catch (error) {
+        console.error('Error switching branch:', error);
+        return false;
+      }
+    },
+    [fetchGitStatus, selectedProject],
+  );
+
+  const createBranch = useCallback(
+    async (branchName: string) => {
+      const trimmedBranchName = branchName.trim();
+      if (!selectedProject || !trimmedBranchName) {
+        return false;
+      }
+
+      setIsCreatingBranch(true);
+      try {
+        const response = await fetchWithAuth('/api/git/create-branch', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            project: selectedProject.name,
+            branch: trimmedBranchName,
+          }),
+        });
+
+        const data = await readJson<GitOperationResponse>(response);
+        if (!data.success) {
+          console.error('Failed to create branch:', data.error);
+          return false;
+        }
+
+        setCurrentBranch(trimmedBranchName);
+        void fetchBranches();
+        void fetchGitStatus();
+        return true;
+      } catch (error) {
+        console.error('Error creating branch:', error);
+        return false;
+      } finally {
+        setIsCreatingBranch(false);
+      }
+    },
+    [fetchBranches, fetchGitStatus, selectedProject],
+  );
+
+  const handleFetch = useCallback(async () => {
+    if (!selectedProject) {
+      return;
+    }
+
+    setIsFetching(true);
+    try {
+      const response = await fetchWithAuth('/api/git/fetch', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          project: selectedProject.name,
+        }),
+      });
+
+      const data = await readJson<GitOperationResponse>(response);
+      if (data.success) {
+        void fetchGitStatus();
+        void fetchRemoteStatus();
+        return;
+      }
+
+      console.error('Fetch failed:', data.error);
+    } catch (error) {
+      console.error('Error fetching from remote:', error);
+    } finally {
+      setIsFetching(false);
+    }
+  }, [fetchGitStatus, fetchRemoteStatus, selectedProject]);
+
+  const handlePull = useCallback(async () => {
+    if (!selectedProject) {
+      return;
+    }
+
+    setIsPulling(true);
+    try {
+      const response = await fetchWithAuth('/api/git/pull', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          project: selectedProject.name,
+        }),
+      });
+
+      const data = await readJson<GitOperationResponse>(response);
+      if (data.success) {
+        void fetchGitStatus();
+        void fetchRemoteStatus();
+        return;
+      }
+
+      console.error('Pull failed:', data.error);
+    } catch (error) {
+      console.error('Error pulling from remote:', error);
+    } finally {
+      setIsPulling(false);
+    }
+  }, [fetchGitStatus, fetchRemoteStatus, selectedProject]);
+
+  const handlePush = useCallback(async () => {
+    if (!selectedProject) {
+      return;
+    }
+
+    setIsPushing(true);
+    try {
+      const response = await fetchWithAuth('/api/git/push', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          project: selectedProject.name,
+        }),
+      });
+
+      const data = await readJson<GitOperationResponse>(response);
+      if (data.success) {
+        void fetchGitStatus();
+        void fetchRemoteStatus();
+        return;
+      }
+
+      console.error('Push failed:', data.error);
+    } catch (error) {
+      console.error('Error pushing to remote:', error);
+    } finally {
+      setIsPushing(false);
+    }
+  }, [fetchGitStatus, fetchRemoteStatus, selectedProject]);
+
+  const handlePublish = useCallback(async () => {
+    if (!selectedProject) {
+      return;
+    }
+
+    setIsPublishing(true);
+    try {
+      const response = await fetchWithAuth('/api/git/publish', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          project: selectedProject.name,
+          branch: currentBranch,
+        }),
+      });
+
+      const data = await readJson<GitOperationResponse>(response);
+      if (data.success) {
+        void fetchGitStatus();
+        void fetchRemoteStatus();
+        return;
+      }
+
+      console.error('Publish failed:', data.error);
+    } catch (error) {
+      console.error('Error publishing branch:', error);
+    } finally {
+      setIsPublishing(false);
+    }
+  }, [currentBranch, fetchGitStatus, fetchRemoteStatus, selectedProject]);
+
+  const discardChanges = useCallback(
+    async (filePath: string) => {
+      if (!selectedProject) {
+        return;
+      }
+
+      try {
+        const response = await fetchWithAuth('/api/git/discard', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            project: selectedProject.name,
+            file: filePath,
+          }),
+        });
+
+        const data = await readJson<GitOperationResponse>(response);
+        if (data.success) {
+          void fetchGitStatus();
+          return;
+        }
+
+        console.error('Discard failed:', data.error);
+      } catch (error) {
+        console.error('Error discarding changes:', error);
+      }
+    },
+    [fetchGitStatus, selectedProject],
+  );
+
+  const deleteUntrackedFile = useCallback(
+    async (filePath: string) => {
+      if (!selectedProject) {
+        return;
+      }
+
+      try {
+        const response = await fetchWithAuth('/api/git/delete-untracked', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            project: selectedProject.name,
+            file: filePath,
+          }),
+        });
+
+        const data = await readJson<GitOperationResponse>(response);
+        if (data.success) {
+          void fetchGitStatus();
+          return;
+        }
+
+        console.error('Delete failed:', data.error);
+      } catch (error) {
+        console.error('Error deleting untracked file:', error);
+      }
+    },
+    [fetchGitStatus, selectedProject],
+  );
+
+  const fetchRecentCommits = useCallback(async () => {
+    if (!selectedProject) {
+      return;
+    }
+
+    try {
+      const response = await fetchWithAuth(
+        `/api/git/commits?project=${encodeURIComponent(selectedProject.name)}&limit=${RECENT_COMMITS_LIMIT}`,
+      );
+      const data = await readJson<GitCommitsResponse>(response);
+
+      if (!data.error && data.commits) {
+        setRecentCommits(data.commits);
+      }
+    } catch (error) {
+      console.error('Error fetching commits:', error);
+    }
+  }, [selectedProject]);
+
+  const fetchCommitDiff = useCallback(
+    async (commitHash: string) => {
+      if (!selectedProject) {
+        return;
+      }
+
+      try {
+        const response = await fetchWithAuth(
+          `/api/git/commit-diff?project=${encodeURIComponent(selectedProject.name)}&commit=${commitHash}`,
+        );
+        const data = await readJson<GitDiffResponse>(response);
+
+        if (!data.error && data.diff) {
+          setCommitDiffs((previous) => ({
+            ...previous,
+            [commitHash]: data.diff as string,
+          }));
+        }
+      } catch (error) {
+        console.error('Error fetching commit diff:', error);
+      }
+    },
+    [selectedProject],
+  );
+
+  const generateCommitMessage = useCallback(
+    async (files: string[]) => {
+      if (!selectedProject || files.length === 0) {
+        return null;
+      }
+
+      try {
+        const response = await authenticatedFetch('/api/git/generate-commit-message', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            project: selectedProject.name,
+            files,
+            provider,
+          }),
+        });
+
+        const data = await readJson<GitGenerateMessageResponse>(response);
+        if (data.message) {
+          return data.message;
+        }
+
+        console.error('Failed to generate commit message:', data.error);
+        return null;
+      } catch (error) {
+        console.error('Error generating commit message:', error);
+        return null;
+      }
+    },
+    [provider, selectedProject],
+  );
+
+  const commitChanges = useCallback(
+    async (message: string, files: string[]) => {
+      if (!selectedProject || !message.trim() || files.length === 0) {
+        return false;
+      }
+
+      try {
+        const response = await fetchWithAuth('/api/git/commit', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            project: selectedProject.name,
+            message,
+            files,
+          }),
+        });
+
+        const data = await readJson<GitOperationResponse>(response);
+        if (data.success) {
+          void fetchGitStatus();
+          void fetchRemoteStatus();
+          return true;
+        }
+
+        console.error('Commit failed:', data.error);
+        return false;
+      } catch (error) {
+        console.error('Error committing changes:', error);
+        return false;
+      }
+    },
+    [fetchGitStatus, fetchRemoteStatus, selectedProject],
+  );
+
+  const createInitialCommit = useCallback(async () => {
+    if (!selectedProject) {
+      throw new Error('No project selected');
+    }
+
+    setIsCreatingInitialCommit(true);
+    try {
+      const response = await fetchWithAuth('/api/git/initial-commit', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          project: selectedProject.name,
+        }),
+      });
+
+      const data = await readJson<GitOperationResponse>(response);
+      if (data.success) {
+        void fetchGitStatus();
+        void fetchRemoteStatus();
+        return true;
+      }
+
+      throw new Error(data.error || 'Failed to create initial commit');
+    } catch (error) {
+      console.error('Error creating initial commit:', error);
+      throw error;
+    } finally {
+      setIsCreatingInitialCommit(false);
+    }
+  }, [fetchGitStatus, fetchRemoteStatus, selectedProject]);
+
+  const openFile = useCallback(
+    async (filePath: string) => {
+      if (!onFileOpen) {
+        return;
+      }
+
+      if (!selectedProject) {
+        onFileOpen(filePath);
+        return;
+      }
+
+      try {
+        const response = await fetchWithAuth(
+          `/api/git/file-with-diff?project=${encodeURIComponent(selectedProject.name)}&file=${encodeURIComponent(filePath)}`,
+        );
+        const data = await readJson<GitFileWithDiffResponse>(response);
+
+        if (data.error) {
+          console.error('Error fetching file with diff:', data.error);
+          onFileOpen(filePath);
+          return;
+        }
+
+        onFileOpen(filePath, {
+          old_string: data.oldContent || '',
+          new_string: data.currentContent || '',
+        });
+      } catch (error) {
+        console.error('Error opening file:', error);
+        onFileOpen(filePath);
+      }
+    },
+    [onFileOpen, selectedProject],
+  );
+
+  const refreshAll = useCallback(() => {
+    void fetchGitStatus();
+    void fetchBranches();
+    void fetchRemoteStatus();
+  }, [fetchBranches, fetchGitStatus, fetchRemoteStatus]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    // Reset repository-scoped state when project changes to avoid stale UI.
+    setCurrentBranch('');
+    setBranches([]);
+    setGitStatus(null);
+    setRemoteStatus(null);
+    setGitDiff({});
+    setRecentCommits([]);
+    setCommitDiffs({});
+    setIsLoading(false);
+
+    if (!selectedProject) {
+      return () => {
+        controller.abort();
+      };
+    }
+
+    void fetchGitStatus(controller.signal);
+    void fetchBranches();
+    void fetchRemoteStatus();
+
+    return () => {
+      controller.abort();
+    };
+  }, [fetchBranches, fetchGitStatus, fetchRemoteStatus, selectedProject]);
+
+  useEffect(() => {
+    if (!selectedProject || activeView !== 'history') {
+      return;
+    }
+
+    void fetchRecentCommits();
+  }, [activeView, fetchRecentCommits, selectedProject]);
+
+  return {
+    gitStatus,
+    gitDiff,
+    isLoading,
+    currentBranch,
+    branches,
+    recentCommits,
+    commitDiffs,
+    remoteStatus,
+    isCreatingBranch,
+    isFetching,
+    isPulling,
+    isPushing,
+    isPublishing,
+    isCreatingInitialCommit,
+    refreshAll,
+    switchBranch,
+    createBranch,
+    handleFetch,
+    handlePull,
+    handlePush,
+    handlePublish,
+    discardChanges,
+    deleteUntrackedFile,
+    fetchCommitDiff,
+    generateCommitMessage,
+    commitChanges,
+    createInitialCommit,
+    openFile,
+  };
+}

src/components/git-panel/hooks/useSelectedProvider.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+export function useSelectedProvider() {
+  const [provider, setProvider] = useState(() => {
+    return localStorage.getItem('selected-provider') || 'claude';
+  });
+
+  useEffect(() => {
+    // Keep provider in sync when another tab changes the selected provider.
+    const handleStorageChange = () => {
+      const nextProvider = localStorage.getItem('selected-provider') || 'claude';
+      setProvider(nextProvider);
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => window.removeEventListener('storage', handleStorageChange);
+  }, []);
+
+  return provider;
+}

src/components/git-panel/types/types.ts

@@ -0,0 +1,135 @@
+import type { Project } from '../../../types/app';
+
+export type GitPanelView = 'changes' | 'history';
+export type FileStatusCode = 'M' | 'A' | 'D' | 'U';
+export type GitStatusFileGroup = 'modified' | 'added' | 'deleted' | 'untracked';
+export type ConfirmActionType = 'discard' | 'delete' | 'commit' | 'pull' | 'push' | 'publish';
+
+export type FileDiffInfo = {
+  old_string: string;
+  new_string: string;
+};
+
+export type FileOpenHandler = (filePath: string, diffInfo?: FileDiffInfo) => void;
+
+export type GitPanelProps = {
+  selectedProject: Project | null;
+  isMobile?: boolean;
+  onFileOpen?: FileOpenHandler;
+};
+
+export type GitStatusResponse = {
+  branch?: string;
+  hasCommits?: boolean;
+  modified?: string[];
+  added?: string[];
+  deleted?: string[];
+  untracked?: string[];
+  error?: string;
+  details?: string;
+};
+
+export type GitRemoteStatus = {
+  hasRemote?: boolean;
+  hasUpstream?: boolean;
+  branch?: string;
+  remoteBranch?: string;
+  remoteName?: string | null;
+  ahead?: number;
+  behind?: number;
+  isUpToDate?: boolean;
+  message?: string;
+  error?: string;
+};
+
+export type GitCommitSummary = {
+  hash: string;
+  author: string;
+  email?: string;
+  date: string;
+  message: string;
+  stats?: string;
+};
+
+export type GitDiffMap = Record<string, string>;
+
+export type GitStatusGroupEntry = {
+  key: GitStatusFileGroup;
+  status: FileStatusCode;
+};
+
+export type ConfirmationRequest = {
+  type: ConfirmActionType;
+  message: string;
+  onConfirm: () => Promise<void> | void;
+};
+
+export type UseGitPanelControllerOptions = {
+  selectedProject: Project | null;
+  activeView: GitPanelView;
+  onFileOpen?: FileOpenHandler;
+};
+
+export type GitPanelController = {
+  gitStatus: GitStatusResponse | null;
+  gitDiff: GitDiffMap;
+  isLoading: boolean;
+  currentBranch: string;
+  branches: string[];
+  recentCommits: GitCommitSummary[];
+  commitDiffs: GitDiffMap;
+  remoteStatus: GitRemoteStatus | null;
+  isCreatingBranch: boolean;
+  isFetching: boolean;
+  isPulling: boolean;
+  isPushing: boolean;
+  isPublishing: boolean;
+  isCreatingInitialCommit: boolean;
+  refreshAll: () => void;
+  switchBranch: (branchName: string) => Promise<boolean>;
+  createBranch: (branchName: string) => Promise<boolean>;
+  handleFetch: () => Promise<void>;
+  handlePull: () => Promise<void>;
+  handlePush: () => Promise<void>;
+  handlePublish: () => Promise<void>;
+  discardChanges: (filePath: string) => Promise<void>;
+  deleteUntrackedFile: (filePath: string) => Promise<void>;
+  fetchCommitDiff: (commitHash: string) => Promise<void>;
+  generateCommitMessage: (files: string[]) => Promise<string | null>;
+  commitChanges: (message: string, files: string[]) => Promise<boolean>;
+  createInitialCommit: () => Promise<boolean>;
+  openFile: (filePath: string) => Promise<void>;
+};
+
+export type GitApiErrorResponse = {
+  error?: string;
+  details?: string;
+};
+
+export type GitDiffResponse = GitApiErrorResponse & {
+  diff?: string;
+};
+
+export type GitBranchesResponse = GitApiErrorResponse & {
+  branches?: string[];
+};
+
+export type GitCommitsResponse = GitApiErrorResponse & {
+  commits?: GitCommitSummary[];
+};
+
+export type GitOperationResponse = GitApiErrorResponse & {
+  success?: boolean;
+  output?: string;
+};
+
+export type GitGenerateMessageResponse = GitApiErrorResponse & {
+  message?: string;
+};
+
+export type GitFileWithDiffResponse = GitApiErrorResponse & {
+  oldContent?: string;
+  currentContent?: string;
+  isDeleted?: boolean;
+  isUntracked?: boolean;
+};

src/components/git-panel/utils/gitPanelUtils.ts

@@ -0,0 +1,26 @@
+import { FILE_STATUS_BADGE_CLASSES, FILE_STATUS_GROUPS, FILE_STATUS_LABELS } from '../constants/constants';
+import type { FileStatusCode, GitStatusResponse } from '../types/types';
+
+export function getAllChangedFiles(gitStatus: GitStatusResponse | null): string[] {
+  if (!gitStatus) {
+    return [];
+  }
+
+  return FILE_STATUS_GROUPS.flatMap(({ key }) => gitStatus[key] || []);
+}
+
+export function getChangedFileCount(gitStatus: GitStatusResponse | null): number {
+  return getAllChangedFiles(gitStatus).length;
+}
+
+export function hasChangedFiles(gitStatus: GitStatusResponse | null): boolean {
+  return getChangedFileCount(gitStatus) > 0;
+}
+
+export function getStatusLabel(status: FileStatusCode): string {
+  return FILE_STATUS_LABELS[status] || status;
+}
+
+export function getStatusBadgeClass(status: FileStatusCode): string {
+  return FILE_STATUS_BADGE_CLASSES[status] || FILE_STATUS_BADGE_CLASSES.U;
+}

src/components/git-panel/view/GitPanel.tsx

@@ -0,0 +1,150 @@
+import { useCallback, useState } from 'react';
+import { useGitPanelController } from '../hooks/useGitPanelController';
+import type { ConfirmationRequest, GitPanelProps, GitPanelView } from '../types/types';
+import ChangesView from '../view/changes/ChangesView';
+import HistoryView from '../view/history/HistoryView';
+import GitPanelHeader from '../view/GitPanelHeader';
+import GitRepositoryErrorState from '../view/GitRepositoryErrorState';
+import GitViewTabs from '../view/GitViewTabs';
+import ConfirmActionModal from '../view/modals/ConfirmActionModal';
+
+export default function GitPanel({ selectedProject, isMobile = false, onFileOpen }: GitPanelProps) {
+  const [activeView, setActiveView] = useState<GitPanelView>('changes');
+  const [wrapText, setWrapText] = useState(true);
+  const [hasExpandedFiles, setHasExpandedFiles] = useState(false);
+  const [confirmAction, setConfirmAction] = useState<ConfirmationRequest | null>(null);
+
+  const {
+    gitStatus,
+    gitDiff,
+    isLoading,
+    currentBranch,
+    branches,
+    recentCommits,
+    commitDiffs,
+    remoteStatus,
+    isCreatingBranch,
+    isFetching,
+    isPulling,
+    isPushing,
+    isPublishing,
+    isCreatingInitialCommit,
+    refreshAll,
+    switchBranch,
+    createBranch,
+    handleFetch,
+    handlePull,
+    handlePush,
+    handlePublish,
+    discardChanges,
+    deleteUntrackedFile,
+    fetchCommitDiff,
+    generateCommitMessage,
+    commitChanges,
+    createInitialCommit,
+    openFile,
+  } = useGitPanelController({
+    selectedProject,
+    activeView,
+    onFileOpen,
+  });
+
+  const executeConfirmedAction = useCallback(async () => {
+    if (!confirmAction) {
+      return;
+    }
+
+    const actionToExecute = confirmAction;
+    setConfirmAction(null);
+
+    try {
+      await actionToExecute.onConfirm();
+    } catch (error) {
+      console.error('Error executing confirmation action:', error);
+    }
+  }, [confirmAction]);
+
+  if (!selectedProject) {
+    return (
+      <div className="h-full flex items-center justify-center text-muted-foreground">
+        <p>Select a project to view source control</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col bg-background">
+      <GitPanelHeader
+        isMobile={isMobile}
+        currentBranch={currentBranch}
+        branches={branches}
+        remoteStatus={remoteStatus}
+        isLoading={isLoading}
+        isCreatingBranch={isCreatingBranch}
+        isFetching={isFetching}
+        isPulling={isPulling}
+        isPushing={isPushing}
+        isPublishing={isPublishing}
+        onRefresh={refreshAll}
+        onSwitchBranch={switchBranch}
+        onCreateBranch={createBranch}
+        onFetch={handleFetch}
+        onPull={handlePull}
+        onPush={handlePush}
+        onPublish={handlePublish}
+        onRequestConfirmation={setConfirmAction}
+      />
+
+      {gitStatus?.error ? (
+        <GitRepositoryErrorState error={gitStatus.error} details={gitStatus.details} />
+      ) : (
+        <>
+          <GitViewTabs
+            activeView={activeView}
+            isHidden={hasExpandedFiles}
+            onChange={setActiveView}
+          />
+
+          {activeView === 'changes' && (
+            <ChangesView
+              isMobile={isMobile}
+              gitStatus={gitStatus}
+              gitDiff={gitDiff}
+              isLoading={isLoading}
+              wrapText={wrapText}
+              isCreatingInitialCommit={isCreatingInitialCommit}
+              onWrapTextChange={setWrapText}
+              onCreateInitialCommit={createInitialCommit}
+              onOpenFile={openFile}
+              onDiscardFile={discardChanges}
+              onDeleteFile={deleteUntrackedFile}
+              onCommitChanges={commitChanges}
+              onGenerateCommitMessage={generateCommitMessage}
+              onRequestConfirmation={setConfirmAction}
+              onExpandedFilesChange={setHasExpandedFiles}
+            />
+          )}
+
+          {activeView === 'history' && (
+            <HistoryView
+              isMobile={isMobile}
+              isLoading={isLoading}
+              recentCommits={recentCommits}
+              commitDiffs={commitDiffs}
+              wrapText={wrapText}
+              onFetchCommitDiff={fetchCommitDiff}
+            />
+          )}
+        </>
+      )}
+
+      <ConfirmActionModal
+        action={confirmAction}
+        onCancel={() => setConfirmAction(null)}
+        onConfirm={() => {
+          void executeConfirmedAction();
+        }}
+      />
+    </div>
+  );
+}

src/components/git-panel/view/GitPanelHeader.tsx

@@ -0,0 +1,263 @@
+import { Check, ChevronDown, Download, GitBranch, Plus, RefreshCw, Upload } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import type { ConfirmationRequest, GitRemoteStatus } from '../types/types';
+import NewBranchModal from './modals/NewBranchModal';
+
+type GitPanelHeaderProps = {
+  isMobile: boolean;
+  currentBranch: string;
+  branches: string[];
+  remoteStatus: GitRemoteStatus | null;
+  isLoading: boolean;
+  isCreatingBranch: boolean;
+  isFetching: boolean;
+  isPulling: boolean;
+  isPushing: boolean;
+  isPublishing: boolean;
+  onRefresh: () => void;
+  onSwitchBranch: (branchName: string) => Promise<boolean>;
+  onCreateBranch: (branchName: string) => Promise<boolean>;
+  onFetch: () => Promise<void>;
+  onPull: () => Promise<void>;
+  onPush: () => Promise<void>;
+  onPublish: () => Promise<void>;
+  onRequestConfirmation: (request: ConfirmationRequest) => void;
+};
+
+export default function GitPanelHeader({
+  isMobile,
+  currentBranch,
+  branches,
+  remoteStatus,
+  isLoading,
+  isCreatingBranch,
+  isFetching,
+  isPulling,
+  isPushing,
+  isPublishing,
+  onRefresh,
+  onSwitchBranch,
+  onCreateBranch,
+  onFetch,
+  onPull,
+  onPush,
+  onPublish,
+  onRequestConfirmation,
+}: GitPanelHeaderProps) {
+  const [showBranchDropdown, setShowBranchDropdown] = useState(false);
+  const [showNewBranchModal, setShowNewBranchModal] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setShowBranchDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const aheadCount = remoteStatus?.ahead || 0;
+  const behindCount = remoteStatus?.behind || 0;
+  const remoteName = remoteStatus?.remoteName || 'remote';
+  const shouldShowFetchButton = aheadCount > 0 && behindCount > 0;
+
+  const requestPullConfirmation = () => {
+    onRequestConfirmation({
+      type: 'pull',
+      message: `Pull ${behindCount} commit${behindCount !== 1 ? 's' : ''} from ${remoteName}?`,
+      onConfirm: onPull,
+    });
+  };
+
+  const requestPushConfirmation = () => {
+    onRequestConfirmation({
+      type: 'push',
+      message: `Push ${aheadCount} commit${aheadCount !== 1 ? 's' : ''} to ${remoteName}?`,
+      onConfirm: onPush,
+    });
+  };
+
+  const requestPublishConfirmation = () => {
+    onRequestConfirmation({
+      type: 'publish',
+      message: `Publish branch "${currentBranch}" to ${remoteName}?`,
+      onConfirm: onPublish,
+    });
+  };
+
+  const handleSwitchBranch = async (branchName: string) => {
+    try {
+      const success = await onSwitchBranch(branchName);
+      if (success) {
+        setShowBranchDropdown(false);
+      }
+    } catch (error) {
+      console.error('[GitPanelHeader] Failed to switch branch:', error);
+    }
+  };
+
+  const handleFetch = async () => {
+    try {
+      await onFetch();
+    } catch (error) {
+      console.error('[GitPanelHeader] Failed to fetch remote changes:', error);
+    }
+  };
+
+  return (
+    <>
+      <div className={`flex items-center justify-between border-b border-border/60 ${isMobile ? 'px-3 py-2' : 'px-4 py-3'}`}>
+        <div className="relative" ref={dropdownRef}>
+          <button
+            onClick={() => setShowBranchDropdown((previous) => !previous)}
+            className={`flex items-center hover:bg-accent rounded-lg transition-colors ${isMobile ? 'space-x-1 px-2 py-1' : 'space-x-2 px-3 py-1.5'}`}
+          >
+            <GitBranch className={`text-muted-foreground ${isMobile ? 'w-3 h-3' : 'w-4 h-4'}`} />
+            <span className="flex items-center gap-1">
+              <span className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>{currentBranch}</span>
+              {remoteStatus?.hasRemote && (
+                <span className="flex items-center gap-1 text-xs">
+                  {aheadCount > 0 && (
+                    <span
+                      className="text-green-600 dark:text-green-400"
+                      title={`${aheadCount} commit${aheadCount !== 1 ? 's' : ''} ahead`}
+                    >
+                      {'\u2191'}
+                      {aheadCount}
+                    </span>
+                  )}
+                  {behindCount > 0 && (
+                    <span
+                      className="text-primary"
+                      title={`${behindCount} commit${behindCount !== 1 ? 's' : ''} behind`}
+                    >
+                      {'\u2193'}
+                      {behindCount}
+                    </span>
+                  )}
+                  {remoteStatus.isUpToDate && (
+                    <span className="text-muted-foreground" title="Up to date with remote">
+                      {'\u2713'}
+                    </span>
+                  )}
+                </span>
+              )}
+            </span>
+            <ChevronDown className={`w-3 h-3 text-muted-foreground transition-transform ${showBranchDropdown ? 'rotate-180' : ''}`} />
+          </button>
+
+          {showBranchDropdown && (
+            <div className="absolute top-full left-0 mt-1 w-64 bg-card rounded-xl shadow-lg border border-border z-50 overflow-hidden">
+              <div className="py-1 max-h-64 overflow-y-auto">
+                {branches.map((branch) => (
+                  <button
+                    key={branch}
+                    onClick={() => void handleSwitchBranch(branch)}
+                    className={`w-full text-left px-4 py-2 text-sm hover:bg-accent transition-colors ${
+                      branch === currentBranch ? 'bg-accent/50 text-foreground' : 'text-muted-foreground'
+                    }`}
+                  >
+                    <span className="flex items-center space-x-2">
+                      {branch === currentBranch && <Check className="w-3 h-3 text-primary" />}
+                      <span className={branch === currentBranch ? 'font-medium' : ''}>{branch}</span>
+                    </span>
+                  </button>
+                ))}
+              </div>
+              <div className="border-t border-border py-1">
+                <button
+                  onClick={() => {
+                    setShowNewBranchModal(true);
+                    setShowBranchDropdown(false);
+                  }}
+                  className="w-full text-left px-4 py-2 text-sm hover:bg-accent transition-colors flex items-center space-x-2"
+                >
+                  <Plus className="w-3 h-3" />
+                  <span>Create new branch</span>
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className={`flex items-center ${isMobile ? 'gap-1' : 'gap-2'}`}>
+          {remoteStatus?.hasRemote && (
+            <>
+              {!remoteStatus.hasUpstream && (
+                <button
+                  onClick={requestPublishConfirmation}
+                  disabled={isPublishing}
+                  className="px-2.5 py-1 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
+                  title={`Publish branch "${currentBranch}" to ${remoteName}`}
+                >
+                  <Upload className={`w-3 h-3 ${isPublishing ? 'animate-pulse' : ''}`} />
+                  <span>{isPublishing ? 'Publishing...' : 'Publish'}</span>
+                </button>
+              )}
+
+              {remoteStatus.hasUpstream && !remoteStatus.isUpToDate && (
+                <>
+                  {behindCount > 0 && (
+                    <button
+                      onClick={requestPullConfirmation}
+                      disabled={isPulling}
+                      className="px-2.5 py-1 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
+                      title={`Pull ${behindCount} commit${behindCount !== 1 ? 's' : ''} from ${remoteName}`}
+                    >
+                      <Download className={`w-3 h-3 ${isPulling ? 'animate-pulse' : ''}`} />
+                      <span>{isPulling ? 'Pulling...' : `Pull ${behindCount}`}</span>
+                    </button>
+                  )}
+
+                  {aheadCount > 0 && (
+                    <button
+                      onClick={requestPushConfirmation}
+                      disabled={isPushing}
+                      className="px-2.5 py-1 text-sm bg-orange-600 text-white rounded-lg hover:bg-orange-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
+                      title={`Push ${aheadCount} commit${aheadCount !== 1 ? 's' : ''} to ${remoteName}`}
+                    >
+                      <Upload className={`w-3 h-3 ${isPushing ? 'animate-pulse' : ''}`} />
+                      <span>{isPushing ? 'Pushing...' : `Push ${aheadCount}`}</span>
+                    </button>
+                  )}
+
+                  {shouldShowFetchButton && (
+                    <button
+                      onClick={() => void handleFetch()}
+                      disabled={isFetching}
+                      className="px-2.5 py-1 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 flex items-center gap-1 transition-colors"
+                      title={`Fetch from ${remoteName}`}
+                    >
+                      <RefreshCw className={`w-3 h-3 ${isFetching ? 'animate-spin' : ''}`} />
+                      <span>{isFetching ? 'Fetching...' : 'Fetch'}</span>
+                    </button>
+                  )}
+                </>
+              )}
+            </>
+          )}
+
+          <button
+            onClick={onRefresh}
+            disabled={isLoading}
+            className={`hover:bg-accent rounded-lg transition-colors ${isMobile ? 'p-1' : 'p-1.5'}`}
+            title="Refresh git status"
+          >
+            <RefreshCw className={`text-muted-foreground ${isLoading ? 'animate-spin' : ''} ${isMobile ? 'w-3 h-3' : 'w-4 h-4'}`} />
+          </button>
+        </div>
+      </div>
+
+      <NewBranchModal
+        isOpen={showNewBranchModal}
+        currentBranch={currentBranch}
+        isCreatingBranch={isCreatingBranch}
+        onClose={() => setShowNewBranchModal(false)}
+        onCreateBranch={onCreateBranch}
+      />
+    </>
+  );
+}

src/components/git-panel/view/GitRepositoryErrorState.tsx

@@ -0,0 +1,27 @@
+import { GitBranch } from 'lucide-react';
+
+type GitRepositoryErrorStateProps = {
+  error: string;
+  details?: string;
+};
+
+export default function GitRepositoryErrorState({ error, details }: GitRepositoryErrorStateProps) {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground px-6 py-12">
+      <div className="w-16 h-16 rounded-2xl bg-muted/50 flex items-center justify-center mb-6">
+        <GitBranch className="w-8 h-8 opacity-40" />
+      </div>
+      <h3 className="text-lg font-medium mb-3 text-center text-foreground">{error}</h3>
+      {details && (
+        <p className="text-sm text-center leading-relaxed mb-6 max-w-md">{details}</p>
+      )}
+      <div className="p-4 bg-primary/5 rounded-xl border border-primary/10 max-w-md">
+        <p className="text-sm text-primary text-center">
+          <strong>Tip:</strong> Run{' '}
+          <code className="bg-primary/10 px-2 py-1 rounded-md font-mono text-xs">git init</code>{' '}
+          in your project directory to initialize git source control.
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/git-panel/view/GitViewTabs.tsx

@@ -0,0 +1,45 @@
+import { FileText, History } from 'lucide-react';
+import type { GitPanelView } from '../types/types';
+
+type GitViewTabsProps = {
+  activeView: GitPanelView;
+  isHidden: boolean;
+  onChange: (view: GitPanelView) => void;
+};
+
+export default function GitViewTabs({ activeView, isHidden, onChange }: GitViewTabsProps) {
+  return (
+    <div
+      className={`flex border-b border-border/60 transition-all duration-300 ease-in-out ${
+        isHidden ? 'max-h-0 opacity-0 -translate-y-2 overflow-hidden' : 'max-h-16 opacity-100 translate-y-0'
+      }`}
+    >
+      <button
+        onClick={() => onChange('changes')}
+        className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+          activeView === 'changes'
+            ? 'text-primary border-b-2 border-primary'
+            : 'text-muted-foreground hover:text-foreground'
+        }`}
+      >
+        <span className="flex items-center justify-center gap-2">
+          <FileText className="w-4 h-4" />
+          <span>Changes</span>
+        </span>
+      </button>
+      <button
+        onClick={() => onChange('history')}
+        className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+          activeView === 'history'
+            ? 'text-primary border-b-2 border-primary'
+            : 'text-muted-foreground hover:text-foreground'
+        }`}
+      >
+        <span className="flex items-center justify-center gap-2">
+          <History className="w-4 h-4" />
+          <span>History</span>
+        </span>
+      </button>
+    </div>
+  );
+}

src/components/git-panel/view/changes/ChangesView.tsx

@@ -0,0 +1,213 @@
+import { GitBranch, GitCommit, RefreshCw } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { ConfirmationRequest, FileStatusCode, GitDiffMap, GitStatusResponse } from '../../types/types';
+import { getAllChangedFiles, hasChangedFiles } from '../../utils/gitPanelUtils';
+import CommitComposer from './CommitComposer';
+import FileChangeList from './FileChangeList';
+import FileSelectionControls from './FileSelectionControls';
+import FileStatusLegend from './FileStatusLegend';
+
+type ChangesViewProps = {
+  isMobile: boolean;
+  gitStatus: GitStatusResponse | null;
+  gitDiff: GitDiffMap;
+  isLoading: boolean;
+  wrapText: boolean;
+  isCreatingInitialCommit: boolean;
+  onWrapTextChange: (wrapText: boolean) => void;
+  onCreateInitialCommit: () => Promise<boolean>;
+  onOpenFile: (filePath: string) => Promise<void>;
+  onDiscardFile: (filePath: string) => Promise<void>;
+  onDeleteFile: (filePath: string) => Promise<void>;
+  onCommitChanges: (message: string, files: string[]) => Promise<boolean>;
+  onGenerateCommitMessage: (files: string[]) => Promise<string | null>;
+  onRequestConfirmation: (request: ConfirmationRequest) => void;
+  onExpandedFilesChange: (hasExpandedFiles: boolean) => void;
+};
+
+export default function ChangesView({
+  isMobile,
+  gitStatus,
+  gitDiff,
+  isLoading,
+  wrapText,
+  isCreatingInitialCommit,
+  onWrapTextChange,
+  onCreateInitialCommit,
+  onOpenFile,
+  onDiscardFile,
+  onDeleteFile,
+  onCommitChanges,
+  onGenerateCommitMessage,
+  onRequestConfirmation,
+  onExpandedFilesChange,
+}: ChangesViewProps) {
+  const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
+
+  const changedFiles = useMemo(() => getAllChangedFiles(gitStatus), [gitStatus]);
+  const hasExpandedFiles = expandedFiles.size > 0;
+
+  useEffect(() => {
+    if (!gitStatus || gitStatus.error) {
+      setSelectedFiles(new Set());
+      return;
+    }
+
+    // Preserve previous behavior: every fresh status snapshot reselects changed files.
+    setSelectedFiles(new Set(getAllChangedFiles(gitStatus)));
+  }, [gitStatus]);
+
+  useEffect(() => {
+    onExpandedFilesChange(hasExpandedFiles);
+  }, [hasExpandedFiles, onExpandedFilesChange]);
+
+  useEffect(() => {
+    return () => {
+      onExpandedFilesChange(false);
+    };
+  }, [onExpandedFilesChange]);
+
+  const toggleFileExpanded = useCallback((filePath: string) => {
+    setExpandedFiles((previous) => {
+      const next = new Set(previous);
+      if (next.has(filePath)) {
+        next.delete(filePath);
+      } else {
+        next.add(filePath);
+      }
+      return next;
+    });
+  }, []);
+
+  const toggleFileSelected = useCallback((filePath: string) => {
+    setSelectedFiles((previous) => {
+      const next = new Set(previous);
+      if (next.has(filePath)) {
+        next.delete(filePath);
+      } else {
+        next.add(filePath);
+      }
+      return next;
+    });
+  }, []);
+
+  const requestFileAction = useCallback(
+    (filePath: string, status: FileStatusCode) => {
+      if (status === 'U') {
+        onRequestConfirmation({
+          type: 'delete',
+          message: `Delete untracked file "${filePath}"? This action cannot be undone.`,
+          onConfirm: async () => {
+            await onDeleteFile(filePath);
+          },
+        });
+        return;
+      }
+
+      onRequestConfirmation({
+        type: 'discard',
+        message: `Discard all changes to "${filePath}"? This action cannot be undone.`,
+        onConfirm: async () => {
+          await onDiscardFile(filePath);
+        },
+      });
+    },
+    [onDeleteFile, onDiscardFile, onRequestConfirmation],
+  );
+
+  const commitSelectedFiles = useCallback(
+    (message: string) => {
+      return onCommitChanges(message, Array.from(selectedFiles));
+    },
+    [onCommitChanges, selectedFiles],
+  );
+
+  const generateMessageForSelection = useCallback(() => {
+    return onGenerateCommitMessage(Array.from(selectedFiles));
+  }, [onGenerateCommitMessage, selectedFiles]);
+
+  return (
+    <>
+      <CommitComposer
+        isMobile={isMobile}
+        selectedFileCount={selectedFiles.size}
+        isHidden={hasExpandedFiles}
+        onCommit={commitSelectedFiles}
+        onGenerateMessage={generateMessageForSelection}
+        onRequestConfirmation={onRequestConfirmation}
+      />
+
+      {gitStatus && !gitStatus.error && (
+        <FileSelectionControls
+          isMobile={isMobile}
+          selectedCount={selectedFiles.size}
+          totalCount={changedFiles.length}
+          isHidden={hasExpandedFiles}
+          onSelectAll={() => setSelectedFiles(new Set(changedFiles))}
+          onDeselectAll={() => setSelectedFiles(new Set())}
+        />
+      )}
+
+      {!gitStatus?.error && <FileStatusLegend isMobile={isMobile} />}
+
+      <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
+        {isLoading ? (
+          <div className="flex items-center justify-center h-32">
+            <RefreshCw className="w-5 h-5 animate-spin text-muted-foreground" />
+          </div>
+        ) : gitStatus?.hasCommits === false ? (
+          <div className="flex flex-col items-center justify-center p-8 text-center">
+            <div className="w-14 h-14 rounded-2xl bg-muted/50 flex items-center justify-center mb-4">
+              <GitBranch className="w-7 h-7 text-muted-foreground/50" />
+            </div>
+            <h3 className="text-lg font-medium mb-2 text-foreground">No commits yet</h3>
+            <p className="text-sm text-muted-foreground mb-6 max-w-md">
+              This repository doesn&apos;t have any commits yet. Create your first commit to start tracking changes.
+            </p>
+            <button
+              onClick={() => void onCreateInitialCommit()}
+              disabled={isCreatingInitialCommit}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors"
+            >
+              {isCreatingInitialCommit ? (
+                <>
+                  <RefreshCw className="w-4 h-4 animate-spin" />
+                  <span>Creating Initial Commit...</span>
+                </>
+              ) : (
+                <>
+                  <GitCommit className="w-4 h-4" />
+                  <span>Create Initial Commit</span>
+                </>
+              )}
+            </button>
+          </div>
+        ) : !gitStatus || !hasChangedFiles(gitStatus) ? (
+          <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+            <GitCommit className="w-10 h-10 mb-2 opacity-40" />
+            <p className="text-sm">No changes detected</p>
+          </div>
+        ) : (
+          <div className={isMobile ? 'pb-4' : ''}>
+            <FileChangeList
+              gitStatus={gitStatus}
+              gitDiff={gitDiff}
+              expandedFiles={expandedFiles}
+              selectedFiles={selectedFiles}
+              isMobile={isMobile}
+              wrapText={wrapText}
+              onToggleSelected={toggleFileSelected}
+              onToggleExpanded={toggleFileExpanded}
+              onOpenFile={(filePath) => {
+                void onOpenFile(filePath);
+              }}
+              onToggleWrapText={() => onWrapTextChange(!wrapText)}
+              onRequestFileAction={requestFileAction}
+            />
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

src/components/git-panel/view/changes/CommitComposer.tsx

@@ -0,0 +1,162 @@
+import { Check, ChevronDown, GitCommit, RefreshCw, Sparkles } from 'lucide-react';
+import { useState } from 'react';
+import MicButton from '../../../mic-button/view/MicButton';
+import type { ConfirmationRequest } from '../../types/types';
+
+type CommitComposerProps = {
+  isMobile: boolean;
+  selectedFileCount: number;
+  isHidden: boolean;
+  onCommit: (message: string) => Promise<boolean>;
+  onGenerateMessage: () => Promise<string | null>;
+  onRequestConfirmation: (request: ConfirmationRequest) => void;
+};
+
+export default function CommitComposer({
+  isMobile,
+  selectedFileCount,
+  isHidden,
+  onCommit,
+  onGenerateMessage,
+  onRequestConfirmation,
+}: CommitComposerProps) {
+  const [commitMessage, setCommitMessage] = useState('');
+  const [isCommitting, setIsCommitting] = useState(false);
+  const [isGeneratingMessage, setIsGeneratingMessage] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(isMobile);
+
+  const handleCommit = async (message = commitMessage) => {
+    const trimmedMessage = message.trim();
+    if (!trimmedMessage || selectedFileCount === 0 || isCommitting) {
+      return false;
+    }
+
+    setIsCommitting(true);
+    try {
+      const success = await onCommit(trimmedMessage);
+      if (success) {
+        setCommitMessage('');
+      }
+      return success;
+    } finally {
+      setIsCommitting(false);
+    }
+  };
+
+  const handleGenerateMessage = async () => {
+    if (selectedFileCount === 0 || isGeneratingMessage) {
+      return;
+    }
+
+    setIsGeneratingMessage(true);
+    try {
+      const generatedMessage = await onGenerateMessage();
+      if (generatedMessage) {
+        setCommitMessage(generatedMessage);
+      }
+    } finally {
+      setIsGeneratingMessage(false);
+    }
+  };
+
+  const requestCommitConfirmation = () => {
+    const trimmedMessage = commitMessage.trim();
+    if (!trimmedMessage || selectedFileCount === 0 || isCommitting) {
+      return;
+    }
+
+    onRequestConfirmation({
+      type: 'commit',
+      message: `Commit ${selectedFileCount} file${selectedFileCount !== 1 ? 's' : ''} with message: "${trimmedMessage}"?`,
+      onConfirm: async () => {
+        await handleCommit(trimmedMessage);
+      },
+    });
+  };
+
+  return (
+    <div
+      className={`transition-all duration-300 ease-in-out ${
+        isHidden ? 'max-h-0 opacity-0 -translate-y-2 overflow-hidden' : 'max-h-96 opacity-100 translate-y-0'
+      }`}
+    >
+      {isMobile && isCollapsed ? (
+        <div className="px-4 py-2 border-b border-border/60">
+          <button
+            onClick={() => setIsCollapsed(false)}
+            className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
+          >
+            <GitCommit className="w-4 h-4" />
+            <span>Commit {selectedFileCount} file{selectedFileCount !== 1 ? 's' : ''}</span>
+            <ChevronDown className="w-3 h-3" />
+          </button>
+        </div>
+      ) : (
+        <div className="px-4 py-3 border-b border-border/60">
+          {isMobile && (
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm font-medium text-foreground">Commit Changes</span>
+              <button
+                onClick={() => setIsCollapsed(true)}
+                className="p-1 hover:bg-accent rounded-lg transition-colors"
+              >
+                <ChevronDown className="w-4 h-4 rotate-180" />
+              </button>
+            </div>
+          )}
+
+          <div className="relative">
+            <textarea
+              value={commitMessage}
+              onChange={(event) => setCommitMessage(event.target.value)}
+              placeholder="Message (Ctrl+Enter to commit)"
+              className="w-full px-3 py-2 text-sm border border-border rounded-xl bg-background text-foreground placeholder:text-muted-foreground resize-none pr-20 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30"
+              rows={3}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+                  event.preventDefault();
+                  void handleCommit();
+                }
+              }}
+            />
+            <div className="absolute right-2 top-2 flex gap-1">
+              <button
+                onClick={() => void handleGenerateMessage()}
+                disabled={selectedFileCount === 0 || isGeneratingMessage}
+                className="p-1.5 text-muted-foreground hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                title="Generate commit message"
+              >
+                {isGeneratingMessage ? (
+                  <RefreshCw className="w-4 h-4 animate-spin" />
+                ) : (
+                  <Sparkles className="w-4 h-4" />
+                )}
+              </button>
+              <div style={{ display: 'none' }}>
+                <MicButton
+                  onTranscript={(transcript) => setCommitMessage(transcript)}
+                  mode="default"
+                  className="p-1.5"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between mt-2">
+            <span className="text-sm text-muted-foreground">
+              {selectedFileCount} file{selectedFileCount !== 1 ? 's' : ''} selected
+            </span>
+            <button
+              onClick={requestCommitConfirmation}
+              disabled={!commitMessage.trim() || selectedFileCount === 0 || isCommitting}
+              className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1 transition-colors"
+            >
+              <Check className="w-3 h-3" />
+              <span>{isCommitting ? 'Committing...' : 'Commit'}</span>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/git-panel/view/changes/FileChangeItem.tsx

@@ -0,0 +1,138 @@
+import { ChevronRight, Trash2 } from 'lucide-react';
+import DiffViewer from '../../../DiffViewer.jsx';
+import type { FileStatusCode } from '../../types/types';
+import { getStatusBadgeClass, getStatusLabel } from '../../utils/gitPanelUtils';
+
+type DiffViewerProps = {
+  diff: string;
+  fileName: string;
+  isMobile: boolean;
+  wrapText: boolean;
+};
+
+const DiffViewerComponent = DiffViewer as unknown as (props: DiffViewerProps) => JSX.Element;
+
+type FileChangeItemProps = {
+  filePath: string;
+  status: FileStatusCode;
+  isMobile: boolean;
+  isExpanded: boolean;
+  isSelected: boolean;
+  diff?: string;
+  wrapText: boolean;
+  onToggleSelected: (filePath: string) => void;
+  onToggleExpanded: (filePath: string) => void;
+  onOpenFile: (filePath: string) => void;
+  onToggleWrapText: () => void;
+  onRequestFileAction: (filePath: string, status: FileStatusCode) => void;
+};
+
+export default function FileChangeItem({
+  filePath,
+  status,
+  isMobile,
+  isExpanded,
+  isSelected,
+  diff,
+  wrapText,
+  onToggleSelected,
+  onToggleExpanded,
+  onOpenFile,
+  onToggleWrapText,
+  onRequestFileAction,
+}: FileChangeItemProps) {
+  const statusLabel = getStatusLabel(status);
+  const badgeClass = getStatusBadgeClass(status);
+
+  return (
+    <div className="border-b border-border last:border-0">
+      <div className={`flex items-center hover:bg-accent/50 transition-colors ${isMobile ? 'px-2 py-1.5' : 'px-3 py-2'}`}>
+        <input
+          type="checkbox"
+          checked={isSelected}
+          onChange={() => onToggleSelected(filePath)}
+          onClick={(event) => event.stopPropagation()}
+          className={`rounded border-border text-primary focus:ring-primary/40 bg-background checked:bg-primary ${isMobile ? 'mr-1.5' : 'mr-2'}`}
+        />
+
+        <div className="flex items-center flex-1 min-w-0">
+          <button
+            onClick={(event) => {
+              event.stopPropagation();
+              onToggleExpanded(filePath);
+            }}
+            className={`p-0.5 hover:bg-accent rounded cursor-pointer ${isMobile ? 'mr-1' : 'mr-2'}`}
+            title={isExpanded ? 'Collapse diff' : 'Expand diff'}
+          >
+            <ChevronRight className={`w-3 h-3 transition-transform duration-200 ease-in-out ${isExpanded ? 'rotate-90' : 'rotate-0'}`} />
+          </button>
+
+          <span
+            className={`flex-1 truncate ${isMobile ? 'text-xs' : 'text-sm'} cursor-pointer hover:text-primary hover:underline`}
+            onClick={(event) => {
+              event.stopPropagation();
+              onOpenFile(filePath);
+            }}
+            title="Click to open file"
+          >
+            {filePath}
+          </span>
+
+          <span className="flex items-center gap-1">
+            {(status === 'M' || status === 'D' || status === 'U') && (
+              <button
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onRequestFileAction(filePath, status);
+                }}
+                className={`${isMobile ? 'px-2 py-1 text-xs' : 'p-1'} hover:bg-destructive/10 rounded text-destructive font-medium flex items-center gap-1`}
+                title={status === 'U' ? 'Delete untracked file' : 'Discard changes'}
+              >
+                <Trash2 className="w-3 h-3" />
+                {isMobile && <span>{status === 'U' ? 'Delete' : 'Discard'}</span>}
+              </button>
+            )}
+
+            <span
+              className={`inline-flex items-center justify-center w-5 h-5 rounded text-[10px] font-bold border ${badgeClass}`}
+              title={statusLabel}
+            >
+              {status}
+            </span>
+          </span>
+        </div>
+      </div>
+
+      <div
+        className={`bg-muted/50 transition-all duration-400 ease-in-out overflow-hidden ${
+          isExpanded && diff ? 'max-h-[600px] opacity-100 translate-y-0' : 'max-h-0 opacity-0 -translate-y-1'
+        }`}
+      >
+        <div className="flex items-center justify-between p-2 border-b border-border">
+          <span className="flex items-center gap-2">
+            <span className={`inline-flex items-center justify-center w-5 h-5 rounded text-[10px] font-bold border ${badgeClass}`}>
+              {status}
+            </span>
+            <span className="text-sm font-medium text-foreground">{statusLabel}</span>
+          </span>
+          {isMobile && (
+            <button
+              onClick={(event) => {
+                event.stopPropagation();
+                onToggleWrapText();
+              }}
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              title={wrapText ? 'Switch to horizontal scroll' : 'Switch to text wrap'}
+            >
+              {wrapText ? 'Scroll' : 'Wrap'}
+            </button>
+          )}
+        </div>
+
+        <div className="max-h-96 overflow-y-auto">
+          {diff && <DiffViewerComponent diff={diff} fileName={filePath} isMobile={isMobile} wrapText={wrapText} />}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/git-panel/view/changes/FileChangeList.tsx

@@ -0,0 +1,55 @@
+import { FILE_STATUS_GROUPS } from '../../constants/constants';
+import type { FileStatusCode, GitDiffMap, GitStatusResponse } from '../../types/types';
+import FileChangeItem from './FileChangeItem';
+
+type FileChangeListProps = {
+  gitStatus: GitStatusResponse;
+  gitDiff: GitDiffMap;
+  expandedFiles: Set<string>;
+  selectedFiles: Set<string>;
+  isMobile: boolean;
+  wrapText: boolean;
+  onToggleSelected: (filePath: string) => void;
+  onToggleExpanded: (filePath: string) => void;
+  onOpenFile: (filePath: string) => void;
+  onToggleWrapText: () => void;
+  onRequestFileAction: (filePath: string, status: FileStatusCode) => void;
+};
+
+export default function FileChangeList({
+  gitStatus,
+  gitDiff,
+  expandedFiles,
+  selectedFiles,
+  isMobile,
+  wrapText,
+  onToggleSelected,
+  onToggleExpanded,
+  onOpenFile,
+  onToggleWrapText,
+  onRequestFileAction,
+}: FileChangeListProps) {
+  return (
+    <>
+      {FILE_STATUS_GROUPS.map(({ key, status }) =>
+        (gitStatus[key] || []).map((filePath) => (
+          <FileChangeItem
+            key={filePath}
+            filePath={filePath}
+            status={status}
+            isMobile={isMobile}
+            isExpanded={expandedFiles.has(filePath)}
+            isSelected={selectedFiles.has(filePath)}
+            diff={gitDiff[filePath]}
+            wrapText={wrapText}
+            onToggleSelected={onToggleSelected}
+            onToggleExpanded={onToggleExpanded}
+            onOpenFile={onOpenFile}
+            onToggleWrapText={onToggleWrapText}
+            onRequestFileAction={onRequestFileAction}
+          />
+        )),
+      )}
+    </>
+  );
+}

src/components/git-panel/view/changes/FileSelectionControls.tsx

@@ -0,0 +1,44 @@
+type FileSelectionControlsProps = {
+  isMobile: boolean;
+  selectedCount: number;
+  totalCount: number;
+  isHidden: boolean;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
+};
+
+export default function FileSelectionControls({
+  isMobile,
+  selectedCount,
+  totalCount,
+  isHidden,
+  onSelectAll,
+  onDeselectAll,
+}: FileSelectionControlsProps) {
+  return (
+    <div
+      className={`border-b border-border/60 flex items-center justify-between transition-all duration-300 ease-in-out ${
+        isMobile ? 'px-3 py-1.5' : 'px-4 py-2'
+      } ${isHidden ? 'max-h-0 opacity-0 -translate-y-2 overflow-hidden' : 'max-h-16 opacity-100 translate-y-0'}`}
+    >
+      <span className="text-sm text-muted-foreground">
+        {selectedCount} of {totalCount} {isMobile ? '' : 'files'} selected
+      </span>
+      <span className={`flex ${isMobile ? 'gap-1' : 'gap-2'}`}>
+        <button
+          onClick={onSelectAll}
+          className="text-sm text-primary hover:text-primary/80 transition-colors"
+        >
+          {isMobile ? 'All' : 'Select All'}
+        </button>
+        <span className="text-border">|</span>
+        <button
+          onClick={onDeselectAll}
+          className="text-sm text-primary hover:text-primary/80 transition-colors"
+        >
+          {isMobile ? 'None' : 'Deselect All'}
+        </button>
+      </span>
+    </div>
+  );
+}

src/components/git-panel/view/changes/FileStatusLegend.tsx

@@ -0,0 +1,52 @@
+import { ChevronDown, ChevronRight, Info } from 'lucide-react';
+import { useState } from 'react';
+import { getStatusBadgeClass } from '../../utils/gitPanelUtils';
+
+type FileStatusLegendProps = {
+  isMobile: boolean;
+};
+
+const LEGEND_ITEMS = [
+  { status: 'M', label: 'Modified' },
+  { status: 'A', label: 'Added' },
+  { status: 'D', label: 'Deleted' },
+  { status: 'U', label: 'Untracked' },
+] as const;
+
+export default function FileStatusLegend({ isMobile }: FileStatusLegendProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (isMobile) {
+    return null;
+  }
+
+  return (
+    <div className="border-b border-border/60">
+      <button
+        onClick={() => setIsOpen((previous) => !previous)}
+        className="w-full px-4 py-2 bg-muted/30 hover:bg-muted/50 text-sm text-muted-foreground flex items-center justify-center gap-1 transition-colors"
+      >
+        <Info className="w-3 h-3" />
+        <span>File Status Guide</span>
+        {isOpen ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+      </button>
+
+      {isOpen && (
+        <div className="px-4 py-3 bg-muted/30 text-sm">
+          <div className="flex justify-center gap-6">
+            {LEGEND_ITEMS.map((item) => (
+              <span key={item.status} className="flex items-center gap-2">
+                <span
+                  className={`inline-flex items-center justify-center w-5 h-5 rounded border font-bold text-[10px] ${getStatusBadgeClass(item.status)}`}
+                >
+                  {item.status}
+                </span>
+                <span className="text-muted-foreground italic">{item.label}</span>
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/git-panel/view/history/CommitHistoryItem.tsx

@@ -0,0 +1,71 @@
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import DiffViewer from '../../../DiffViewer.jsx';
+import type { GitCommitSummary } from '../../types/types';
+
+type DiffViewerProps = {
+  diff: string;
+  fileName: string;
+  isMobile: boolean;
+  wrapText: boolean;
+};
+
+const DiffViewerComponent = DiffViewer as unknown as (props: DiffViewerProps) => JSX.Element;
+
+type CommitHistoryItemProps = {
+  commit: GitCommitSummary;
+  isExpanded: boolean;
+  diff?: string;
+  isMobile: boolean;
+  wrapText: boolean;
+  onToggle: () => void;
+};
+
+export default function CommitHistoryItem({
+  commit,
+  isExpanded,
+  diff,
+  isMobile,
+  wrapText,
+  onToggle,
+}: CommitHistoryItemProps) {
+  return (
+    <div className="border-b border-border last:border-0">
+      <button
+        type="button"
+        aria-expanded={isExpanded}
+        className="w-full flex items-start p-3 hover:bg-accent/50 cursor-pointer transition-colors text-left bg-transparent border-0"
+        onClick={onToggle}
+      >
+        <span className="mr-2 mt-1 p-0.5 hover:bg-accent rounded">
+          {isExpanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+        </span>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-foreground truncate">{commit.message}</p>
+              <p className="text-sm text-muted-foreground mt-1">
+                {commit.author}
+                {' \u2022 '}
+                {commit.date}
+              </p>
+            </div>
+            <span className="text-sm font-mono text-muted-foreground/60 flex-shrink-0">
+              {commit.hash.substring(0, 7)}
+            </span>
+          </div>
+        </div>
+      </button>
+
+      {isExpanded && diff && (
+        <div className="bg-muted/50">
+          <div className="max-h-96 overflow-y-auto p-2">
+            <div className="text-sm font-mono text-muted-foreground mb-2">
+              {commit.stats}
+            </div>
+            <DiffViewerComponent diff={diff} fileName="commit" isMobile={isMobile} wrapText={wrapText} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/git-panel/view/history/HistoryView.tsx

@@ -0,0 +1,77 @@
+import { History, RefreshCw } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import type { GitDiffMap, GitCommitSummary } from '../../types/types';
+import CommitHistoryItem from './CommitHistoryItem';
+
+type HistoryViewProps = {
+  isMobile: boolean;
+  isLoading: boolean;
+  recentCommits: GitCommitSummary[];
+  commitDiffs: GitDiffMap;
+  wrapText: boolean;
+  onFetchCommitDiff: (commitHash: string) => Promise<void>;
+};
+
+export default function HistoryView({
+  isMobile,
+  isLoading,
+  recentCommits,
+  commitDiffs,
+  wrapText,
+  onFetchCommitDiff,
+}: HistoryViewProps) {
+  const [expandedCommits, setExpandedCommits] = useState<Set<string>>(new Set());
+
+  const toggleCommitExpanded = useCallback(
+    (commitHash: string) => {
+      const isExpanding = !expandedCommits.has(commitHash);
+
+      setExpandedCommits((previous) => {
+        const next = new Set(previous);
+        if (next.has(commitHash)) {
+          next.delete(commitHash);
+        } else {
+          next.add(commitHash);
+        }
+        return next;
+      });
+
+      // Load commit diff lazily only the first time a commit is expanded.
+      if (isExpanding && !commitDiffs[commitHash]) {
+        onFetchCommitDiff(commitHash).catch((err) => {
+          console.error('Failed to fetch commit diff:', err);
+        });
+      }
+    },
+    [commitDiffs, expandedCommits, onFetchCommitDiff, setExpandedCommits],
+  );
+
+  return (
+    <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
+      {isLoading ? (
+        <div className="flex items-center justify-center h-32">
+          <RefreshCw className="w-5 h-5 animate-spin text-muted-foreground" />
+        </div>
+      ) : recentCommits.length === 0 ? (
+        <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+          <History className="w-10 h-10 mb-2 opacity-40" />
+          <p className="text-sm">No commits found</p>
+        </div>
+      ) : (
+        <div className={isMobile ? 'pb-4' : ''}>
+          {recentCommits.map((commit) => (
+            <CommitHistoryItem
+              key={commit.hash}
+              commit={commit}
+              isExpanded={expandedCommits.has(commit.hash)}
+              diff={commitDiffs[commit.hash]}
+              isMobile={isMobile}
+              wrapText={wrapText}
+              onToggle={() => toggleCommitExpanded(commit.hash)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/git-panel/view/modals/ConfirmActionModal.tsx

@@ -0,0 +1,97 @@
+import { useEffect } from 'react';
+import { Check, Download, Trash2, Upload } from 'lucide-react';
+import {
+  CONFIRMATION_ACTION_LABELS,
+  CONFIRMATION_BUTTON_CLASSES,
+  CONFIRMATION_ICON_CONTAINER_CLASSES,
+  CONFIRMATION_TITLES,
+} from '../../constants/constants';
+import type { ConfirmationRequest } from '../../types/types';
+
+type ConfirmActionModalProps = {
+  action: ConfirmationRequest | null;
+  onCancel: () => void;
+  onConfirm: () => void;
+};
+
+function renderConfirmActionIcon(actionType: ConfirmationRequest['type']) {
+  if (actionType === 'discard' || actionType === 'delete') {
+    return <Trash2 className="w-4 h-4" />;
+  }
+
+  if (actionType === 'commit') {
+    return <Check className="w-4 h-4" />;
+  }
+
+  if (actionType === 'pull') {
+    return <Download className="w-4 h-4" />;
+  }
+
+  return <Upload className="w-4 h-4" />;
+}
+
+export default function ConfirmActionModal({ action, onCancel, onConfirm }: ConfirmActionModalProps) {
+  const titleId = action ? `confirmation-title-${action.type}` : undefined;
+
+  useEffect(() => {
+    if (!action) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onCancel();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [action, onCancel]);
+
+  if (!action) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onCancel} />
+      <div
+        className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+      >
+        <div className="p-6">
+          <div className="flex items-center mb-4">
+            <div className={`p-2 rounded-full mr-3 ${CONFIRMATION_ICON_CONTAINER_CLASSES[action.type]}`}>
+              {renderConfirmActionIcon(action.type)}
+            </div>
+            <h3 id={titleId} className="text-lg font-semibold text-foreground">
+              {CONFIRMATION_TITLES[action.type]}
+            </h3>
+          </div>
+
+          <p className="text-sm text-muted-foreground mb-6">{action.message}</p>
+
+          <div className="flex justify-end space-x-3">
+            <button
+              onClick={onCancel}
+              className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={onConfirm}
+              className={`px-4 py-2 text-sm text-white rounded-lg transition-colors flex items-center space-x-2 ${CONFIRMATION_BUTTON_CLASSES[action.type]}`}
+            >
+              {renderConfirmActionIcon(action.type)}
+              <span>{CONFIRMATION_ACTION_LABELS[action.type]}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/git-panel/view/modals/NewBranchModal.tsx

@@ -0,0 +1,124 @@
+import { Plus, RefreshCw } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+type NewBranchModalProps = {
+  isOpen: boolean;
+  currentBranch: string;
+  isCreatingBranch: boolean;
+  onClose: () => void;
+  onCreateBranch: (branchName: string) => Promise<boolean>;
+};
+
+export default function NewBranchModal({
+  isOpen,
+  currentBranch,
+  isCreatingBranch,
+  onClose,
+  onCreateBranch,
+}: NewBranchModalProps) {
+  const [newBranchName, setNewBranchName] = useState('');
+
+  useEffect(() => {
+    if (!isOpen) {
+      setNewBranchName('');
+    }
+  }, [isOpen]);
+
+  const handleCreateBranch = async (): Promise<boolean> => {
+    const branchName = newBranchName.trim();
+    if (!branchName) {
+      return false;
+    }
+
+    try {
+      const success = await onCreateBranch(branchName);
+      if (success) {
+        setNewBranchName('');
+        onClose();
+      }
+      return success;
+    } catch (error) {
+      console.error('Failed to create branch:', error);
+      return false;
+    }
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div
+        className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="new-branch-title"
+      >
+        <div className="p-6">
+          <h3 className="text-lg font-semibold text-foreground mb-4">Create New Branch</h3>
+
+          <div className="mb-4">
+            <label htmlFor="git-new-branch-name" className="block text-sm font-medium text-foreground/80 mb-2">
+              Branch Name
+            </label>
+            <input
+              id="git-new-branch-name"
+              type="text"
+              value={newBranchName}
+              onChange={(event) => setNewBranchName(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' && !isCreatingBranch) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  void handleCreateBranch();
+                  return;
+                }
+
+                if (event.key === 'Escape' && !isCreatingBranch) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  onClose();
+                }
+              }}
+              placeholder="feature/new-feature"
+              className="w-full px-3 py-2 border border-border rounded-xl bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30"
+              autoFocus
+            />
+          </div>
+
+          <p className="text-sm text-muted-foreground mb-4">
+            This will create a new branch from the current branch ({currentBranch})
+          </p>
+
+          <div className="flex justify-end space-x-3">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => void handleCreateBranch()}
+              disabled={!newBranchName.trim() || isCreatingBranch}
+              className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2 transition-colors"
+            >
+              {isCreatingBranch ? (
+                <>
+                  <RefreshCw className="w-3 h-3 animate-spin" />
+                  <span>Creating...</span>
+                </>
+              ) : (
+                <>
+                  <Plus className="w-3 h-3" />
+                  <span>Create Branch</span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/llm-logo-provider/ClaudeLogo.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
-const ClaudeLogo = ({className = 'w-5 h-5'}) => {
+type ClaudeLogoProps = {
+  className?: string;
+};
+
+const ClaudeLogo = ({ className = 'w-5 h-5' }: ClaudeLogoProps) => {
   return (
     <img src="/icons/claude-ai-icon.svg" alt="Claude" className={className} />
   );

src/components/llm-logo-provider/CodexLogo.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
-import { useTheme } from '../contexts/ThemeContext';
+import { useTheme } from '../../contexts/ThemeContext';
 
-const CodexLogo = ({ className = 'w-5 h-5' }) => {
+type CodexLogoProps = {
+  className?: string;
+};
+
+const CodexLogo = ({ className = 'w-5 h-5' }: CodexLogoProps) => {
   const { isDarkMode } = useTheme();
 
   return (

src/components/llm-logo-provider/CursorLogo.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
-import { useTheme } from '../contexts/ThemeContext';
+import { useTheme } from '../../contexts/ThemeContext';
 
-const CursorLogo = ({ className = 'w-5 h-5' }) => {
+type CursorLogoProps = {
+  className?: string;
+};
+
+const CursorLogo = ({ className = 'w-5 h-5' }: CursorLogoProps) => {
   const { isDarkMode } = useTheme();
 
   return (

src/components/llm-logo-provider/SessionProviderLogo.tsx

@@ -1,4 +1,4 @@
-import type { SessionProvider } from '../types/app';
+import type { SessionProvider } from '../../types/app';
 import ClaudeLogo from './ClaudeLogo';
 import CodexLogo from './CodexLogo';
 import CursorLogo from './CursorLogo';

src/components/main-content/types/types.ts

@@ -1,23 +1,9 @@
-import type { Dispatch, MouseEvent, RefObject, SetStateAction } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
 import type { AppTab, Project, ProjectSession } from '../../../types/app';
 
 export type SessionLifecycleHandler = (sessionId?: string | null) => void;
 
-export interface DiffInfo {
-  old_string?: string;
-  new_string?: string;
-  [key: string]: unknown;
-}
-
-export interface EditingFile {
-  name: string;
-  path: string;
-  projectName?: string;
-  diffInfo?: DiffInfo | null;
-  [key: string]: unknown;
-}
-
-export interface TaskMasterTask {
+export type TaskMasterTask = {
   id: string | number;
   title?: string;
   description?: string;
@@ -29,24 +15,24 @@ export interface TaskMasterTask {
   dependencies?: Array<string | number>;
   subtasks?: TaskMasterTask[];
   [key: string]: unknown;
-}
+};
 
-export interface TaskReference {
+export type TaskReference = {
   id: string | number;
   title?: string;
   [key: string]: unknown;
-}
+};
 
 export type TaskSelection = TaskMasterTask | TaskReference;
 
-export interface PrdFile {
+export type PrdFile = {
   name: string;
   content?: string;
   isExisting?: boolean;
   [key: string]: unknown;
-}
+};
 
-export interface MainContentProps {
+export type MainContentProps = {
   selectedProject: Project | null;
   selectedSession: ProjectSession | null;
   activeTab: AppTab;
@@ -67,9 +53,9 @@ export interface MainContentProps {
   onNavigateToSession: (targetSessionId: string) => void;
   onShowSettings: () => void;
   externalMessageUpdate: number;
-}
+};
 
-export interface MainContentHeaderProps {
+export type MainContentHeaderProps = {
   activeTab: AppTab;
   setActiveTab: Dispatch<SetStateAction<AppTab>>;
   selectedProject: Project;
@@ -77,32 +63,19 @@ export interface MainContentHeaderProps {
   shouldShowTasksTab: boolean;
   isMobile: boolean;
   onMenuClick: () => void;
-}
+};
 
-export interface MainContentStateViewProps {
+export type MainContentStateViewProps = {
   mode: 'loading' | 'empty';
   isMobile: boolean;
   onMenuClick: () => void;
-}
+};
 
-export interface MobileMenuButtonProps {
+export type MobileMenuButtonProps = {
   onMenuClick: () => void;
   compact?: boolean;
-}
+};
 
-export interface EditorSidebarProps {
-  editingFile: EditingFile | null;
-  isMobile: boolean;
-  editorExpanded: boolean;
-  editorWidth: number;
-  resizeHandleRef: RefObject<HTMLDivElement>;
-  onResizeStart: (event: MouseEvent<HTMLDivElement>) => void;
-  onCloseEditor: () => void;
-  onToggleEditorExpand: () => void;
-  projectPath?: string;
-  fillSpace?: boolean;
-}
-
-export interface TaskMasterPanelProps {
+export type TaskMasterPanelProps = {
   isVisible: boolean;
-}
+};

src/components/main-content/view/MainContent.tsx

@@ -1,26 +1,23 @@
 import React, { useEffect } from 'react';
 
 import ChatInterface from '../../chat/view/ChatInterface';
-import FileTree from '../../FileTree';
-import StandaloneShell from '../../StandaloneShell';
-import GitPanel from '../../GitPanel';
+import FileTree from '../../file-tree/view/FileTree';
+import StandaloneShell from '../../standalone-shell/view/StandaloneShell';
+import GitPanel from '../../git-panel/view/GitPanel';
 import ErrorBoundary from '../../ErrorBoundary';
 
 import MainContentHeader from './subcomponents/MainContentHeader';
 import MainContentStateView from './subcomponents/MainContentStateView';
-import EditorSidebar from './subcomponents/EditorSidebar';
 import TaskMasterPanel from './subcomponents/TaskMasterPanel';
 import type { MainContentProps } from '../types/types';
 
 import { useTaskMaster } from '../../../contexts/TaskMasterContext';
 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
 import { useUiPreferences } from '../../../hooks/useUiPreferences';
-import { useEditorSidebar } from '../hooks/useEditorSidebar';
+import { useEditorSidebar } from '../../code-editor/hooks/useEditorSidebar';
+import EditorSidebar from '../../code-editor/view/EditorSidebar';
 import type { Project } from '../../../types/app';
 
-const AnyStandaloneShell = StandaloneShell as any;
-const AnyGitPanel = GitPanel as any;
-
 type TaskMasterContextValue = {
   currentProject?: Project | null;
   setCurrentProject?: ((project: Project) => void) | null;
@@ -66,6 +63,7 @@ function MainContent({
     editingFile,
     editorWidth,
     editorExpanded,
+    hasManualWidth,
     resizeHandleRef,
     handleFileOpen,
     handleCloseEditor,
@@ -109,7 +107,7 @@ function MainContent({
       />
 
       <div className="flex-1 flex min-h-0 overflow-hidden">
-        <div className={`flex flex-col min-h-0 overflow-hidden ${editorExpanded ? 'hidden' : ''} ${activeTab === 'files' && editingFile ? 'w-[280px] flex-shrink-0' : 'flex-1'}`}>
+        <div className={`flex flex-col min-h-0 min-w-0 overflow-hidden ${editorExpanded ? 'hidden' : ''} flex-1`}>
           <div className={`h-full ${activeTab === 'chat' ? 'block' : 'hidden'}`}>
             <ErrorBoundary showDetails>
               <ChatInterface
@@ -147,13 +145,13 @@ function MainContent({
 
           {activeTab === 'shell' && (
             <div className="h-full w-full overflow-hidden">
-              <AnyStandaloneShell project={selectedProject} session={selectedSession} showHeader={false} />
+              <StandaloneShell project={selectedProject} session={selectedSession} showHeader={false} />
             </div>
           )}
 
           {activeTab === 'git' && (
             <div className="h-full overflow-hidden">
-              <AnyGitPanel selectedProject={selectedProject} isMobile={isMobile} onFileOpen={handleFileOpen} />
+              <GitPanel selectedProject={selectedProject} isMobile={isMobile} onFileOpen={handleFileOpen} />
             </div>
           )}
 
@@ -167,6 +165,7 @@ function MainContent({
           isMobile={isMobile}
           editorExpanded={editorExpanded}
           editorWidth={editorWidth}
+          hasManualWidth={hasManualWidth}
           resizeHandleRef={resizeHandleRef}
           onResizeStart={handleResizeStart}
           onCloseEditor={handleCloseEditor}

src/components/main-content/view/subcomponents/MainContentTitle.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import SessionProviderLogo from '../../../SessionProviderLogo';
+import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
 import type { AppTab, Project, ProjectSession } from '../../../../types/app';
 
 type MainContentTitleProps = {

src/components/mic-button/constants/constants.ts

@@ -0,0 +1,45 @@
+import type { MicButtonState } from '../types/types';
+
+export const MIC_BUTTON_STATES = {
+  IDLE: 'idle',
+  RECORDING: 'recording',
+  TRANSCRIBING: 'transcribing',
+  PROCESSING: 'processing',
+} as const;
+
+export const MIC_TAP_DEBOUNCE_MS = 300;
+export const PROCESSING_STATE_DELAY_MS = 2000;
+
+export const DEFAULT_WHISPER_MODE = 'default';
+
+// Modes that use post-transcription enhancement on the backend.
+export const ENHANCEMENT_WHISPER_MODES = new Set([
+  'prompt',
+  'vibe',
+  'instructions',
+  'architect',
+]);
+
+export const BUTTON_BACKGROUND_BY_STATE: Record<MicButtonState, string> = {
+  idle: '#374151',
+  recording: '#ef4444',
+  transcribing: '#3b82f6',
+  processing: '#a855f7',
+};
+
+export const MIC_ERROR_BY_NAME = {
+  NotAllowedError: 'Microphone access denied. Please allow microphone permissions.',
+  NotFoundError: 'No microphone found. Please check your audio devices.',
+  NotSupportedError: 'Microphone not supported by this browser.',
+  NotReadableError: 'Microphone is being used by another application.',
+} as const;
+
+export const MIC_NOT_AVAILABLE_ERROR =
+  'Microphone access not available. Please use HTTPS or a supported browser.';
+
+export const MIC_NOT_SUPPORTED_ERROR =
+  'Microphone not supported. Please use HTTPS or a modern browser.';
+
+export const MIC_SECURE_CONTEXT_ERROR =
+  'Microphone requires HTTPS. Please use a secure connection.';
+

src/components/mic-button/data/whisper.ts

@@ -0,0 +1,52 @@
+import { api } from '../../../utils/api';
+
+type WhisperStatus = 'transcribing';
+
+type WhisperResponse = {
+  text?: string;
+  error?: string;
+};
+
+export async function transcribeWithWhisper(
+  audioBlob: Blob,
+  onStatusChange?: (status: WhisperStatus) => void,
+): Promise<string> {
+  const formData = new FormData();
+  const fileName = `recording_${Date.now()}.webm`;
+  const file = new File([audioBlob], fileName, { type: audioBlob.type });
+
+  formData.append('audio', file);
+
+  const whisperMode = window.localStorage.getItem('whisperMode') || 'default';
+  formData.append('mode', whisperMode);
+
+  try {
+    // Keep existing status callback behavior.
+    if (onStatusChange) {
+      onStatusChange('transcribing');
+    }
+
+    const response = (await api.transcribe(formData)) as Response;
+
+    if (!response.ok) {
+      const errorData = (await response.json().catch(() => ({}))) as WhisperResponse;
+      throw new Error(
+        errorData.error ||
+          `Transcription error: ${response.status} ${response.statusText}`,
+      );
+    }
+
+    const data = (await response.json()) as WhisperResponse;
+    return data.text || '';
+  } catch (error) {
+    if (
+      error instanceof Error
+      && error.name === 'TypeError'
+      && error.message.includes('fetch')
+    ) {
+      throw new Error('Cannot connect to server. Please ensure the backend is running.');
+    }
+    throw error;
+  }
+}
+

src/components/mic-button/hooks/useMicButtonController.ts

@@ -0,0 +1,204 @@
+import { useEffect, useRef, useState } from 'react';
+import type { MouseEvent } from 'react';
+import { transcribeWithWhisper } from '../data/whisper';
+import {
+  DEFAULT_WHISPER_MODE,
+  ENHANCEMENT_WHISPER_MODES,
+  MIC_BUTTON_STATES,
+  MIC_ERROR_BY_NAME,
+  MIC_NOT_AVAILABLE_ERROR,
+  MIC_NOT_SUPPORTED_ERROR,
+  MIC_SECURE_CONTEXT_ERROR,
+  MIC_TAP_DEBOUNCE_MS,
+  PROCESSING_STATE_DELAY_MS,
+} from '../constants/constants';
+import type { MicButtonState } from '../types/types';
+
+type UseMicButtonControllerArgs = {
+  onTranscript?: (transcript: string) => void;
+};
+
+type UseMicButtonControllerResult = {
+  state: MicButtonState;
+  error: string | null;
+  isSupported: boolean;
+  handleButtonClick: (event?: MouseEvent<HTMLButtonElement>) => void;
+};
+
+const getRecordingErrorMessage = (error: unknown): string => {
+  if (error instanceof Error && error.message.includes('HTTPS')) {
+    return error.message;
+  }
+
+  if (error instanceof DOMException) {
+    return MIC_ERROR_BY_NAME[error.name as keyof typeof MIC_ERROR_BY_NAME] || 'Microphone access failed';
+  }
+
+  return 'Microphone access failed';
+};
+
+const getRecorderMimeType = (): string => (
+  MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : 'audio/mp4'
+);
+
+export function useMicButtonController({
+  onTranscript,
+}: UseMicButtonControllerArgs): UseMicButtonControllerResult {
+  const [state, setState] = useState<MicButtonState>(MIC_BUTTON_STATES.IDLE);
+  const [error, setError] = useState<string | null>(null);
+  const [isSupported, setIsSupported] = useState(true);
+
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const chunksRef = useRef<BlobPart[]>([]);
+  const lastTapRef = useRef(0);
+  const processingTimerRef = useRef<number | null>(null);
+
+  const clearProcessingTimer = (): void => {
+    if (processingTimerRef.current !== null) {
+      window.clearTimeout(processingTimerRef.current);
+      processingTimerRef.current = null;
+    }
+  };
+
+  const stopStreamTracks = (): void => {
+    if (!streamRef.current) {
+      return;
+    }
+
+    streamRef.current.getTracks().forEach((track) => track.stop());
+    streamRef.current = null;
+  };
+
+  const handleStopRecording = async (mimeType: string): Promise<void> => {
+    const audioBlob = new Blob(chunksRef.current, { type: mimeType });
+
+    // Release the microphone immediately once recording ends.
+    stopStreamTracks();
+    setState(MIC_BUTTON_STATES.TRANSCRIBING);
+
+    const whisperMode = window.localStorage.getItem('whisperMode') || DEFAULT_WHISPER_MODE;
+    const shouldShowProcessingState = ENHANCEMENT_WHISPER_MODES.has(whisperMode);
+
+    if (shouldShowProcessingState) {
+      processingTimerRef.current = window.setTimeout(() => {
+        setState(MIC_BUTTON_STATES.PROCESSING);
+      }, PROCESSING_STATE_DELAY_MS);
+    }
+
+    try {
+      const transcript = await transcribeWithWhisper(audioBlob);
+      if (transcript && onTranscript) {
+        onTranscript(transcript);
+      }
+    } catch (transcriptionError) {
+      const message = transcriptionError instanceof Error ? transcriptionError.message : 'Transcription error';
+      setError(message);
+    } finally {
+      clearProcessingTimer();
+      setState(MIC_BUTTON_STATES.IDLE);
+    }
+  };
+
+  const startRecording = async (): Promise<void> => {
+    try {
+      setError(null);
+      chunksRef.current = [];
+
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        throw new Error(MIC_NOT_AVAILABLE_ERROR);
+      }
+
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+
+      const mimeType = getRecorderMimeType();
+      const recorder = new MediaRecorder(stream, { mimeType });
+      mediaRecorderRef.current = recorder;
+
+      recorder.ondataavailable = (event: BlobEvent) => {
+        if (event.data.size > 0) {
+          chunksRef.current.push(event.data);
+        }
+      };
+
+      recorder.onstop = () => {
+        void handleStopRecording(mimeType);
+      };
+
+      recorder.start();
+      setState(MIC_BUTTON_STATES.RECORDING);
+    } catch (recordingError) {
+      stopStreamTracks();
+      setError(getRecordingErrorMessage(recordingError));
+      setState(MIC_BUTTON_STATES.IDLE);
+    }
+  };
+
+  const stopRecording = (): void => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
+      mediaRecorderRef.current.stop();
+      return;
+    }
+
+    stopStreamTracks();
+    setState(MIC_BUTTON_STATES.IDLE);
+  };
+
+  const handleButtonClick = (event?: MouseEvent<HTMLButtonElement>): void => {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (!isSupported) {
+      return;
+    }
+
+    // Mobile tap handling can trigger duplicate click events in quick succession.
+    const now = Date.now();
+    if (now - lastTapRef.current < MIC_TAP_DEBOUNCE_MS) {
+      return;
+    }
+    lastTapRef.current = now;
+
+    if (state === MIC_BUTTON_STATES.IDLE) {
+      void startRecording();
+      return;
+    }
+
+    if (state === MIC_BUTTON_STATES.RECORDING) {
+      stopRecording();
+    }
+  };
+
+  useEffect(() => {
+    // getUserMedia needs both browser support and a secure context.
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      setIsSupported(false);
+      setError(MIC_NOT_SUPPORTED_ERROR);
+      return;
+    }
+
+    if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
+      setIsSupported(false);
+      setError(MIC_SECURE_CONTEXT_ERROR);
+      return;
+    }
+
+    setIsSupported(true);
+    setError(null);
+  }, []);
+
+  useEffect(() => () => {
+    clearProcessingTimer();
+    stopStreamTracks();
+  }, []);
+
+  return {
+    state,
+    error,
+    isSupported,
+    handleButtonClick,
+  };
+}

src/components/mic-button/types/types.ts

@@ -0,0 +1,2 @@
+export type MicButtonState = 'idle' | 'recording' | 'transcribing' | 'processing';
+