diff --git a/package.json b/package.json
index 35ae3f765..ea373bbe9 100644
--- a/package.json
+++ b/package.json
@@ -17,14 +17,14 @@
     "@tauri-apps/plugin-opener": "^2",
     "@tauri-apps/plugin-process": "^2.3.1",
     "@tauri-apps/plugin-updater": "^2.9.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
     "lucide-react": "^0.562.0",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1",
-    "@xterm/xterm": "^5.5.0",
-    "@xterm/addon-fit": "^0.10.0"
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^2",
diff --git a/src-tauri/src/workspaces.rs b/src-tauri/src/workspaces.rs
index 9e75e8d30..f2308128a 100644
--- a/src-tauri/src/workspaces.rs
+++ b/src-tauri/src/workspaces.rs
@@ -547,7 +547,7 @@ pub(crate) async fn list_workspace_files(
         .get(&workspace_id)
         .ok_or("workspace not found")?;
     let root = PathBuf::from(&entry.path);
-    Ok(list_workspace_files_inner(&root, 20000))
+    Ok(list_workspace_files_inner(&root, usize::MAX))
 }
 
 #[cfg(test)]
diff --git a/src/App.tsx b/src/App.tsx
index d851019d0..398020ec9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ import "./styles/update-toasts.css";
 import "./styles/composer.css";
 import "./styles/diff.css";
 import "./styles/diff-viewer.css";
+import "./styles/file-tree.css";
 import "./styles/debug.css";
 import "./styles/terminal.css";
 import "./styles/plan.css";
@@ -115,6 +116,7 @@ function MainApp() {
   const [gitPanelMode, setGitPanelMode] = useState<"diff" | "log" | "issues">(
     "diff"
   );
+  const [filePanelMode, setFilePanelMode] = useState<"git" | "files">("git");
   const [accessMode, setAccessMode] = useState<AccessMode>("current");
   const [activeTab, setActiveTab] = useState<
     "projects" | "codex" | "git" | "log"
@@ -232,7 +234,10 @@ function MainApp() {
   } = useModels({ activeWorkspace, onDebug: addDebugEntry });
   const { skills } = useSkills({ activeWorkspace, onDebug: addDebugEntry });
   const { prompts } = useCustomPrompts({ activeWorkspace, onDebug: addDebugEntry });
-  const { files } = useWorkspaceFiles({ activeWorkspace, onDebug: addDebugEntry });
+  const { files, isLoading: isFilesLoading } = useWorkspaceFiles({
+    activeWorkspace,
+    onDebug: addDebugEntry,
+  });
   const { branches, checkoutBranch, createBranch } = useGitBranches({
     activeWorkspace,
     onDebug: addDebugEntry
@@ -753,6 +758,11 @@ function MainApp() {
     onCopyThread: handleCopyThread,
     onToggleTerminal: handleToggleTerminal,
     showTerminalButton: !isCompact,
+    filePanelMode,
+    onToggleFilePanel: () => {
+      setFilePanelMode((prev) => (prev === "git" ? "files" : "git"));
+    },
+    fileTreeLoading: isFilesLoading,
     centerMode,
     onExitDiff: () => {
       setCenterMode("chat");
diff --git a/src/features/files/components/FileTreePanel.tsx b/src/features/files/components/FileTreePanel.tsx
new file mode 100644
index 000000000..75d2f332e
--- /dev/null
+++ b/src/features/files/components/FileTreePanel.tsx
@@ -0,0 +1,395 @@
+import { useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import type { MouseEvent } from "react";
+import { Menu, MenuItem } from "@tauri-apps/api/menu";
+import { LogicalPosition } from "@tauri-apps/api/dpi";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { revealItemInDir } from "@tauri-apps/plugin-opener";
+import {
+  ArrowLeftRight,
+  ChevronsUpDown,
+  File,
+  FileArchive,
+  FileAudio,
+  FileCode,
+  FileImage,
+  FileJson,
+  FileSpreadsheet,
+  FileText,
+  FileVideo,
+  Folder,
+  Search,
+} from "lucide-react";
+
+type FileTreeNode = {
+  name: string;
+  path: string;
+  type: "file" | "folder";
+  children: FileTreeNode[];
+};
+
+type FileTreePanelProps = {
+  workspacePath: string;
+  files: string[];
+  isLoading: boolean;
+  onToggleFilePanel: () => void;
+};
+
+type FileTreeBuildNode = {
+  name: string;
+  path: string;
+  type: "file" | "folder";
+  children: Map<string, FileTreeBuildNode>;
+};
+
+function buildTree(paths: string[]): { nodes: FileTreeNode[]; folderPaths: Set<string> } {
+  const root = new Map<string, FileTreeBuildNode>();
+  const addNode = (
+    map: Map<string, FileTreeBuildNode>,
+    name: string,
+    path: string,
+    type: "file" | "folder",
+  ) => {
+    const existing = map.get(name);
+    if (existing) {
+      if (type === "folder") {
+        existing.type = "folder";
+      }
+      return existing;
+    }
+    const node: FileTreeBuildNode = {
+      name,
+      path,
+      type,
+      children: new Map(),
+    };
+    map.set(name, node);
+    return node;
+  };
+
+  paths.forEach((path) => {
+    const parts = path.split("/").filter(Boolean);
+    let currentMap = root;
+    let currentPath = "";
+    parts.forEach((segment, index) => {
+      const isFile = index === parts.length - 1;
+      const nextPath = currentPath ? `${currentPath}/${segment}` : segment;
+      const node = addNode(currentMap, segment, nextPath, isFile ? "file" : "folder");
+      if (!isFile) {
+        currentMap = node.children;
+        currentPath = nextPath;
+      }
+    });
+  });
+
+  const folderPaths = new Set<string>();
+
+  const toArray = (map: Map<string, FileTreeBuildNode>): FileTreeNode[] => {
+    const nodes = Array.from(map.values()).map((node) => {
+      if (node.type === "folder") {
+        folderPaths.add(node.path);
+      }
+      return {
+        name: node.name,
+        path: node.path,
+        type: node.type,
+        children: node.type === "folder" ? toArray(node.children) : [],
+      };
+    });
+    nodes.sort((a, b) => {
+      if (a.type !== b.type) {
+        return a.type === "folder" ? -1 : 1;
+      }
+      return a.name.localeCompare(b.name);
+    });
+    return nodes;
+  };
+
+  return { nodes: toArray(root), folderPaths };
+}
+
+function getFileIcon(name: string) {
+  const ext = name.split(".").pop()?.toLowerCase() ?? "";
+  switch (ext) {
+    case "ts":
+    case "tsx":
+    case "js":
+    case "jsx":
+    case "mjs":
+    case "cjs":
+    case "py":
+    case "rs":
+    case "swift":
+    case "go":
+    case "java":
+    case "kt":
+    case "cs":
+    case "cpp":
+    case "c":
+    case "h":
+    case "hpp":
+    case "sh":
+    case "zsh":
+    case "bash":
+      return FileCode;
+    case "json":
+      return FileJson;
+    case "md":
+    case "mdx":
+    case "txt":
+    case "rtf":
+      return FileText;
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "svg":
+    case "webp":
+    case "heic":
+      return FileImage;
+    case "mp4":
+    case "mov":
+    case "m4v":
+    case "webm":
+      return FileVideo;
+    case "mp3":
+    case "wav":
+    case "flac":
+    case "m4a":
+      return FileAudio;
+    case "zip":
+    case "gz":
+    case "tgz":
+    case "tar":
+    case "7z":
+    case "rar":
+      return FileArchive;
+    case "csv":
+    case "tsv":
+    case "xls":
+    case "xlsx":
+      return FileSpreadsheet;
+    default:
+      return File;
+  }
+}
+
+export function FileTreePanel({
+  workspacePath,
+  files,
+  isLoading,
+  onToggleFilePanel,
+}: FileTreePanelProps) {
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+  const [query, setQuery] = useState("");
+  const hasManualToggle = useRef(false);
+  const showLoading = isLoading && files.length === 0;
+  const deferredQuery = useDeferredValue(query);
+  const normalizedQuery = deferredQuery.trim().toLowerCase();
+
+  const filteredFiles = useMemo(() => {
+    if (!normalizedQuery) {
+      return files;
+    }
+    return files.filter((path) => path.toLowerCase().includes(normalizedQuery));
+  }, [files, normalizedQuery]);
+
+  const { nodes, folderPaths } = useMemo(
+    () => buildTree(normalizedQuery ? filteredFiles : files),
+    [files, filteredFiles, normalizedQuery],
+  );
+
+  const visibleFolderPaths = folderPaths;
+  const hasFolders = visibleFolderPaths.size > 0;
+  const allVisibleExpanded =
+    hasFolders && Array.from(visibleFolderPaths).every((path) => expandedFolders.has(path));
+
+  useEffect(() => {
+    setExpandedFolders((prev) => {
+      if (normalizedQuery) {
+        return new Set(folderPaths);
+      }
+      const next = new Set<string>();
+      prev.forEach((path) => {
+        if (folderPaths.has(path)) {
+          next.add(path);
+        }
+      });
+      if (next.size === 0 && !hasManualToggle.current) {
+        nodes.forEach((node) => {
+          if (node.type === "folder") {
+            next.add(node.path);
+          }
+        });
+      }
+      return next;
+    });
+  }, [folderPaths, nodes, normalizedQuery]);
+
+  const toggleAllFolders = () => {
+    if (!hasFolders) {
+      return;
+    }
+    setExpandedFolders((prev) => {
+      const next = new Set(prev);
+      if (allVisibleExpanded) {
+        visibleFolderPaths.forEach((path) => next.delete(path));
+      } else {
+        visibleFolderPaths.forEach((path) => next.add(path));
+      }
+      return next;
+    });
+    hasManualToggle.current = true;
+  };
+
+  const toggleFolder = (path: string) => {
+    setExpandedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
+
+  const resolvePath = (relativePath: string) => {
+    const base = workspacePath.endsWith("/")
+      ? workspacePath.slice(0, -1)
+      : workspacePath;
+    return `${base}/${relativePath}`;
+  };
+
+  async function showFileMenu(
+    event: MouseEvent<HTMLButtonElement>,
+    relativePath: string,
+  ) {
+    event.preventDefault();
+    event.stopPropagation();
+    const menu = await Menu.new({
+      items: [
+        await MenuItem.new({
+          text: "Reveal in Finder",
+          action: async () => {
+            await revealItemInDir(resolvePath(relativePath));
+          },
+        }),
+      ],
+    });
+    const window = getCurrentWindow();
+    const position = new LogicalPosition(event.clientX, event.clientY);
+    await menu.popup(position, window);
+  }
+
+  const renderNode = (node: FileTreeNode, depth: number) => {
+    const isFolder = node.type === "folder";
+    const isExpanded = isFolder && expandedFolders.has(node.path);
+    const FileIcon = isFolder ? Folder : getFileIcon(node.name);
+    return (
+      <div key={node.path}>
+        <button
+          type="button"
+          className={`file-tree-row${isFolder ? " is-folder" : " is-file"}`}
+          style={{ paddingLeft: `${depth * 10}px` }}
+          onClick={() => {
+            if (isFolder) {
+              toggleFolder(node.path);
+            }
+          }}
+          onContextMenu={(event) => {
+            if (!isFolder) {
+              void showFileMenu(event, node.path);
+            }
+          }}
+        >
+          {isFolder ? (
+            <span className={`file-tree-chevron${isExpanded ? " is-open" : ""}`}>
+              ›
+            </span>
+          ) : (
+            <span className="file-tree-spacer" aria-hidden />
+          )}
+          <span className="file-tree-icon" aria-hidden>
+            <FileIcon size={12} />
+          </span>
+          <span className="file-tree-name">{node.name}</span>
+        </button>
+        {isFolder && isExpanded && node.children.length > 0 && (
+          <div className="file-tree-children">
+            {node.children.map((child) => renderNode(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <aside className="diff-panel file-tree-panel">
+      <div className="git-panel-header">
+        <button
+          type="button"
+          className="git-panel-title git-panel-title-button"
+          onClick={onToggleFilePanel}
+          aria-label="Show git panel"
+          title="Show git panel"
+        >
+          <Folder className="git-panel-icon" />
+          Files
+          <ArrowLeftRight className="git-panel-switch-icon" aria-hidden />
+        </button>
+        <div className="file-tree-meta">
+          <div className="file-tree-count">
+          {filteredFiles.length
+            ? normalizedQuery
+              ? `${filteredFiles.length} match${filteredFiles.length === 1 ? "" : "es"}`
+              : `${filteredFiles.length} file${filteredFiles.length === 1 ? "" : "s"}`
+            : showLoading
+              ? "Loading files"
+              : "No files"}
+        </div>
+          {hasFolders ? (
+            <button
+              type="button"
+              className="ghost icon-button file-tree-toggle"
+              onClick={toggleAllFolders}
+              aria-label={allVisibleExpanded ? "Collapse all folders" : "Expand all folders"}
+              title={allVisibleExpanded ? "Collapse all folders" : "Expand all folders"}
+            >
+              <ChevronsUpDown aria-hidden />
+            </button>
+          ) : null}
+        </div>
+      </div>
+      <div className="file-tree-search">
+        <Search className="file-tree-search-icon" aria-hidden />
+        <input
+          className="file-tree-search-input"
+          type="search"
+          placeholder="Filter files and folders"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          aria-label="Filter files and folders"
+        />
+      </div>
+      <div className="file-tree-list">
+        {showLoading ? (
+          <div className="file-tree-skeleton">
+            {Array.from({ length: 8 }).map((_, index) => (
+              <div
+                className="file-tree-skeleton-row"
+                key={`file-tree-skeleton-${index}`}
+                style={{ width: `${68 + index * 3}%` }}
+              />
+            ))}
+          </div>
+        ) : nodes.length === 0 ? (
+          <div className="file-tree-empty">
+            {normalizedQuery ? "No matches found." : "No files available."}
+          </div>
+        ) : (
+          nodes.map((node) => renderNode(node, 0))
+        )}
+      </div>
+    </aside>
+  );
+}
diff --git a/src/features/git/components/GitDiffPanel.tsx b/src/features/git/components/GitDiffPanel.tsx
index a8462a4f6..d4b18a39b 100644
--- a/src/features/git/components/GitDiffPanel.tsx
+++ b/src/features/git/components/GitDiffPanel.tsx
@@ -4,12 +4,13 @@ import { Menu, MenuItem } from "@tauri-apps/api/menu";
 import { LogicalPosition } from "@tauri-apps/api/dpi";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { openUrl } from "@tauri-apps/plugin-opener";
-import { GitBranch } from "lucide-react";
+import { ArrowLeftRight, GitBranch } from "lucide-react";
 import { formatRelativeTime } from "../../../utils/time";
 
 type GitDiffPanelProps = {
   mode: "diff" | "log" | "issues";
   onModeChange: (mode: "diff" | "log" | "issues") => void;
+  onToggleFilePanel: () => void;
   branchName: string;
   totalAdditions: number;
   totalDeletions: number;
@@ -95,6 +96,7 @@ function getStatusClass(status: string) {
 export function GitDiffPanel({
   mode,
   onModeChange,
+  onToggleFilePanel,
   branchName,
   totalAdditions,
   totalDeletions,
@@ -188,10 +190,17 @@ export function GitDiffPanel({
   return (
     <aside className="diff-panel">
       <div className="git-panel-header">
-        <div className="git-panel-title">
+        <button
+          type="button"
+          className="git-panel-title git-panel-title-button"
+          onClick={onToggleFilePanel}
+          aria-label="Show file tree"
+          title="Show file tree"
+        >
           <GitBranch className="git-panel-icon" />
           Git
-        </div>
+          <ArrowLeftRight className="git-panel-switch-icon" aria-hidden />
+        </button>
         <div className="git-panel-toggle" role="tablist" aria-label="Git panel">
           <button
             type="button"
diff --git a/src/features/layout/hooks/useLayoutNodes.tsx b/src/features/layout/hooks/useLayoutNodes.tsx
index 0371f9b48..a01edcfed 100644
--- a/src/features/layout/hooks/useLayoutNodes.tsx
+++ b/src/features/layout/hooks/useLayoutNodes.tsx
@@ -9,6 +9,7 @@ import { UpdateToast } from "../../update/components/UpdateToast";
 import { Composer } from "../../composer/components/Composer";
 import { GitDiffPanel } from "../../git/components/GitDiffPanel";
 import { GitDiffViewer } from "../../git/components/GitDiffViewer";
+import { FileTreePanel } from "../../files/components/FileTreePanel";
 import { DebugPanel } from "../../debug/components/DebugPanel";
 import { PlanPanel } from "../../plan/components/PlanPanel";
 import { TabBar } from "../../app/components/TabBar";
@@ -115,6 +116,9 @@ type LayoutNodesOptions = {
   tabletNavTab: "codex" | "git" | "log";
   gitPanelMode: "diff" | "log" | "issues";
   onGitPanelModeChange: (mode: "diff" | "log" | "issues") => void;
+  filePanelMode: "git" | "files";
+  onToggleFilePanel: () => void;
+  fileTreeLoading: boolean;
   gitStatus: {
     branchName: string;
     files: GitFileStatus[];
@@ -374,34 +378,43 @@ export function useLayoutNodes(options: LayoutNodesOptions): LayoutNodesResult {
     <TabBar activeTab={options.activeTab} onSelect={options.onSelectTab} />
   );
 
-  const gitDiffPanelNode = (
-    <GitDiffPanel
-      mode={options.gitPanelMode}
-      onModeChange={options.onGitPanelModeChange}
-      branchName={options.gitStatus.branchName || "unknown"}
-      totalAdditions={options.gitStatus.totalAdditions}
-      totalDeletions={options.gitStatus.totalDeletions}
-      fileStatus={options.fileStatus}
-      error={options.gitStatus.error}
-      logError={options.gitLogError}
-      logLoading={options.gitLogLoading}
-      files={options.gitStatus.files}
-      selectedPath={options.selectedDiffPath}
-      onSelectFile={options.onSelectDiff}
-      logEntries={options.gitLogEntries}
-      logTotal={options.gitLogTotal}
-      logAhead={options.gitLogAhead}
-      logBehind={options.gitLogBehind}
-      logAheadEntries={options.gitLogAheadEntries}
-      logBehindEntries={options.gitLogBehindEntries}
-      logUpstream={options.gitLogUpstream}
-      issues={options.gitIssues}
-      issuesTotal={options.gitIssuesTotal}
-      issuesLoading={options.gitIssuesLoading}
-      issuesError={options.gitIssuesError}
-      gitRemoteUrl={options.gitRemoteUrl}
-    />
-  );
+  const gitDiffPanelNode =
+    options.filePanelMode === "files" && options.activeWorkspace ? (
+      <FileTreePanel
+        workspacePath={options.activeWorkspace.path}
+        files={options.files}
+        isLoading={options.fileTreeLoading}
+        onToggleFilePanel={options.onToggleFilePanel}
+      />
+    ) : (
+      <GitDiffPanel
+        mode={options.gitPanelMode}
+        onModeChange={options.onGitPanelModeChange}
+        branchName={options.gitStatus.branchName || "unknown"}
+        totalAdditions={options.gitStatus.totalAdditions}
+        totalDeletions={options.gitStatus.totalDeletions}
+        fileStatus={options.fileStatus}
+        error={options.gitStatus.error}
+        logError={options.gitLogError}
+        logLoading={options.gitLogLoading}
+        files={options.gitStatus.files}
+        selectedPath={options.selectedDiffPath}
+        onSelectFile={options.onSelectDiff}
+        logEntries={options.gitLogEntries}
+        logTotal={options.gitLogTotal}
+        logAhead={options.gitLogAhead}
+        logBehind={options.gitLogBehind}
+        logAheadEntries={options.gitLogAheadEntries}
+        logBehindEntries={options.gitLogBehindEntries}
+        logUpstream={options.gitLogUpstream}
+        issues={options.gitIssues}
+        issuesTotal={options.gitIssuesTotal}
+        issuesLoading={options.gitIssuesLoading}
+        issuesError={options.gitIssuesError}
+        gitRemoteUrl={options.gitRemoteUrl}
+        onToggleFilePanel={options.onToggleFilePanel}
+      />
+    );
 
   const gitDiffViewerNode = (
     <GitDiffViewer
diff --git a/src/features/layout/hooks/useResizablePanels.ts b/src/features/layout/hooks/useResizablePanels.ts
index b95315b6a..b2087bf23 100644
--- a/src/features/layout/hooks/useResizablePanels.ts
+++ b/src/features/layout/hooks/useResizablePanels.ts
@@ -8,7 +8,7 @@ const STORAGE_KEY_TERMINAL_PANEL = "codexmonitor.terminalPanelHeight";
 const STORAGE_KEY_DEBUG_PANEL = "codexmonitor.debugPanelHeight";
 const MIN_SIDEBAR_WIDTH = 220;
 const MAX_SIDEBAR_WIDTH = 420;
-const MIN_RIGHT_PANEL_WIDTH = 200;
+const MIN_RIGHT_PANEL_WIDTH = 270;
 const MAX_RIGHT_PANEL_WIDTH = 420;
 const MIN_PLAN_PANEL_HEIGHT = 140;
 const MAX_PLAN_PANEL_HEIGHT = 420;
diff --git a/src/features/workspaces/hooks/useWorkspaceFiles.ts b/src/features/workspaces/hooks/useWorkspaceFiles.ts
index bb27ac280..28ec12df9 100644
--- a/src/features/workspaces/hooks/useWorkspaceFiles.ts
+++ b/src/features/workspaces/hooks/useWorkspaceFiles.ts
@@ -12,8 +12,9 @@ export function useWorkspaceFiles({
   onDebug,
 }: UseWorkspaceFilesOptions) {
   const [files, setFiles] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
   const lastFetchedWorkspaceId = useRef<string | null>(null);
-  const inFlight = useRef(false);
+  const inFlight = useRef<string | null>(null);
 
   const REFRESH_INTERVAL_MS = 5000;
   const workspaceId = activeWorkspace?.id ?? null;
@@ -23,19 +24,21 @@ export function useWorkspaceFiles({
     if (!workspaceId || !isConnected) {
       return;
     }
-    if (inFlight.current) {
+    if (inFlight.current === workspaceId) {
       return;
     }
-    inFlight.current = true;
+    inFlight.current = workspaceId;
+    const requestWorkspaceId = workspaceId;
+    setIsLoading(true);
     onDebug?.({
       id: `${Date.now()}-client-files-list`,
       timestamp: Date.now(),
       source: "client",
       label: "files/list",
-      payload: { workspaceId },
+      payload: { workspaceId: requestWorkspaceId },
     });
     try {
-      const response = await getWorkspaceFiles(workspaceId);
+      const response = await getWorkspaceFiles(requestWorkspaceId);
       onDebug?.({
         id: `${Date.now()}-server-files-list`,
         timestamp: Date.now(),
@@ -43,8 +46,10 @@ export function useWorkspaceFiles({
         label: "files/list response",
         payload: response,
       });
-      setFiles(Array.isArray(response) ? response : []);
-      lastFetchedWorkspaceId.current = workspaceId;
+      if (requestWorkspaceId === workspaceId) {
+        setFiles(Array.isArray(response) ? response : []);
+        lastFetchedWorkspaceId.current = requestWorkspaceId;
+      }
     } catch (error) {
       onDebug?.({
         id: `${Date.now()}-client-files-list-error`,
@@ -54,10 +59,20 @@ export function useWorkspaceFiles({
         payload: error instanceof Error ? error.message : String(error),
       });
     } finally {
-      inFlight.current = false;
+      if (inFlight.current === requestWorkspaceId) {
+        inFlight.current = null;
+        setIsLoading(false);
+      }
     }
   }, [isConnected, onDebug, workspaceId]);
 
+  useEffect(() => {
+    setFiles([]);
+    lastFetchedWorkspaceId.current = null;
+    inFlight.current = null;
+    setIsLoading(Boolean(workspaceId && isConnected));
+  }, [isConnected, workspaceId]);
+
   useEffect(() => {
     if (!workspaceId || !isConnected) {
       return;
@@ -86,6 +101,7 @@ export function useWorkspaceFiles({
 
   return {
     files: fileOptions,
+    isLoading,
     refreshFiles,
   };
 }
diff --git a/src/styles/composer.css b/src/styles/composer.css
index fbc988117..bc58f211a 100644
--- a/src/styles/composer.css
+++ b/src/styles/composer.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: 8px;
   -webkit-app-region: no-drag;
-  padding: 12px 32px 24px;
+  padding: 12px var(--main-panel-padding) 24px;
   border-top: 1px solid var(--border-subtle);
   background: var(--surface-composer);
   grid-column: 1;
diff --git a/src/styles/diff.css b/src/styles/diff.css
index 550d10081..2791ed399 100644
--- a/src/styles/diff.css
+++ b/src/styles/diff.css
@@ -24,6 +24,7 @@
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-subtle);
+  min-height: 26px;
 }
 
 .git-panel-title {
@@ -33,6 +34,36 @@
   font-size: 12px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
+  background: transparent;
+  border: none;
+  padding: 4px 8px;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
+}
+
+.git-panel-title-button {
+  background: var(--surface-control);
+  border-color: var(--border-subtle);
+}
+
+.git-panel-title-button:hover {
+  background: var(--surface-control-hover);
+  color: var(--text-emphasis);
+}
+
+.git-panel-title-button:focus-visible {
+  outline: 2px solid var(--border-accent-soft);
+  outline-offset: 4px;
+  border-radius: 6px;
+}
+
+.git-panel-switch-icon {
+  width: 12px;
+  height: 12px;
+  opacity: 0.7;
 }
 
 .git-panel-icon {
diff --git a/src/styles/file-tree.css b/src/styles/file-tree.css
new file mode 100644
index 000000000..d94b954b3
--- /dev/null
+++ b/src/styles/file-tree.css
@@ -0,0 +1,150 @@
+.file-tree-panel {
+  gap: 10px;
+}
+
+.file-tree-count {
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+.file-tree-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.file-tree-toggle {
+  padding: 4px;
+}
+
+.file-tree-toggle svg {
+  width: 14px;
+  height: 14px;
+}
+
+.file-tree-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 10px;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  color: var(--text-faint);
+}
+
+.file-tree-search:focus-within {
+  border-color: var(--border-strong);
+  color: var(--text-emphasis);
+}
+
+.file-tree-search-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.file-tree-search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 12px;
+  outline: none;
+}
+
+.file-tree-search-input::placeholder {
+  color: var(--text-faint);
+}
+
+.file-tree-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
+  flex: 1;
+  padding-right: 2px;
+  min-height: 0;
+}
+
+.file-tree-empty {
+  font-size: 12px;
+  color: var(--text-faint);
+}
+
+.file-tree-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px 2px;
+}
+
+.file-tree-skeleton-row {
+  height: 8px;
+  border-radius: 999px;
+  background: linear-gradient(
+    110deg,
+    rgba(255, 255, 255, 0.04) 8%,
+    rgba(255, 255, 255, 0.18) 18%,
+    rgba(255, 255, 255, 0.04) 33%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+
+.file-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-emphasis);
+  font-size: 11px;
+  text-align: left;
+  width: 100%;
+}
+
+.file-tree-row:hover {
+  background: var(--surface-hover);
+  border-color: var(--border-subtle);
+}
+
+.file-tree-row.is-folder {
+  font-weight: 600;
+}
+
+.file-tree-chevron {
+  width: 14px;
+  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-faint);
+  transform: rotate(0deg);
+  transition: transform 140ms ease;
+}
+
+.file-tree-chevron.is-open {
+  transform: rotate(90deg);
+}
+
+.file-tree-spacer {
+  width: 14px;
+  height: 14px;
+}
+
+.file-tree-icon {
+  color: var(--text-faint);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-tree-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/src/styles/main.css b/src/styles/main.css
index 0b2a91bbb..193330eed 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -9,6 +9,7 @@
   min-height: 0;
   min-width: 0;
   --main-topbar-height: 44px;
+  --main-panel-padding: 24px;
 }
 
 .app.reduced-transparency .main {
@@ -97,7 +98,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 32px 8px;
+  padding: 10px var(--main-panel-padding) 8px;
   border-bottom: 1px solid var(--border-subtle);
   background: var(--surface-topbar);
   -webkit-app-region: drag;
diff --git a/src/styles/messages.css b/src/styles/messages.css
index 251146a43..54a01a45c 100644
--- a/src/styles/messages.css
+++ b/src/styles/messages.css
@@ -9,7 +9,7 @@
 .messages-full {
   background: var(--surface-messages);
   border-radius: 0;
-  padding: 12px 8px 16px 32px;
+  padding: 12px var(--main-panel-padding) 16px;
   border: none;
 }
 
@@ -19,7 +19,7 @@
 }
 
 .messages-empty {
-  padding: 24px 24px 24px 32px;
+  padding: 24px var(--main-panel-padding);
 }
 
 .thinking {
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
index 224ceb151..734dc6fa7 100644
--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@@ -624,6 +624,7 @@
   justify-content: center;
 }
 
+
 @keyframes pulse {
   0% {
     transform: scale(0.9);