From ab47c45f6749a691f5540dc5247977737e309dc4 Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Fri, 16 Jan 2026 12:17:27 +0100
Subject: [PATCH 01/12] Add file tree sidebar toggle

---
 src/App.tsx                                   |   6 +
 src/features/app/components/MainHeader.tsx    |  24 +-
 .../files/components/FileTreePanel.tsx        | 218 ++++++++++++++++++
 src/features/layout/hooks/useLayoutNodes.tsx  |  67 +++---
 src/styles/file-tree.css                      |  81 +++++++
 5 files changed, 367 insertions(+), 29 deletions(-)
 create mode 100644 src/features/files/components/FileTreePanel.tsx
 create mode 100644 src/styles/file-tree.css

diff --git a/src/App.tsx b/src/App.tsx
index d851019d0..4087e1c0b 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"
@@ -753,6 +755,10 @@ function MainApp() {
     onCopyThread: handleCopyThread,
     onToggleTerminal: handleToggleTerminal,
     showTerminalButton: !isCompact,
+    filePanelMode,
+    onToggleFilePanel: () => {
+      setFilePanelMode((prev) => (prev === "git" ? "files" : "git"));
+    },
     centerMode,
     onExitDiff: () => {
       setCenterMode("chat");
diff --git a/src/features/app/components/MainHeader.tsx b/src/features/app/components/MainHeader.tsx
index 924733d60..5b1e9fff8 100644
--- a/src/features/app/components/MainHeader.tsx
+++ b/src/features/app/components/MainHeader.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Check, Copy, Terminal } from "lucide-react";
+import { Check, Copy, Folder, GitBranch, Terminal } from "lucide-react";
 import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import type { BranchInfo, WorkspaceInfo } from "../../../types";
 
@@ -19,6 +19,8 @@ type MainHeaderProps = {
   onToggleTerminal: () => void;
   isTerminalOpen: boolean;
   showTerminalButton?: boolean;
+  filePanelMode: "git" | "files";
+  onToggleFilePanel: () => void;
 };
 
 export function MainHeader({
@@ -37,6 +39,8 @@ export function MainHeader({
   onToggleTerminal,
   isTerminalOpen,
   showTerminalButton = true,
+  filePanelMode,
+  onToggleFilePanel,
 }: MainHeaderProps) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [infoOpen, setInfoOpen] = useState(false);
@@ -282,6 +286,24 @@ export function MainHeader({
         </div>
       </div>
       <div className="main-header-actions">
+        <button
+          type="button"
+          className={`ghost main-header-action${
+            filePanelMode === "files" ? " is-active" : ""
+          }`}
+          onClick={onToggleFilePanel}
+          data-tauri-drag-region="false"
+          aria-label={
+            filePanelMode === "files" ? "Show git panel" : "Show file tree"
+          }
+          title={filePanelMode === "files" ? "Show git panel" : "Show file tree"}
+        >
+          {filePanelMode === "files" ? (
+            <GitBranch size={14} aria-hidden />
+          ) : (
+            <Folder size={14} aria-hidden />
+          )}
+        </button>
         {showTerminalButton && (
           <button
             type="button"
diff --git a/src/features/files/components/FileTreePanel.tsx b/src/features/files/components/FileTreePanel.tsx
new file mode 100644
index 000000000..29e91533b
--- /dev/null
+++ b/src/features/files/components/FileTreePanel.tsx
@@ -0,0 +1,218 @@
+import { useEffect, useMemo, 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 { Folder, File } from "lucide-react";
+
+type FileTreeNode = {
+  name: string;
+  path: string;
+  type: "file" | "folder";
+  children: FileTreeNode[];
+};
+
+type FileTreePanelProps = {
+  workspacePath: string;
+  files: string[];
+};
+
+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 };
+}
+
+export function FileTreePanel({ workspacePath, files }: FileTreePanelProps) {
+  const { nodes, folderPaths } = useMemo(() => buildTree(files), [files]);
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    setExpandedFolders((prev) => {
+      const next = new Set<string>();
+      prev.forEach((path) => {
+        if (folderPaths.has(path)) {
+          next.add(path);
+        }
+      });
+      if (next.size === 0) {
+        nodes.forEach((node) => {
+          if (node.type === "folder") {
+            next.add(node.path);
+          }
+        });
+      }
+      return next;
+    });
+  }, [folderPaths, nodes]);
+
+  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);
+    return (
+      <div key={node.path}>
+        <button
+          type="button"
+          className={`file-tree-row${isFolder ? " is-folder" : " is-file"}`}
+          style={{ paddingLeft: `${depth * 14}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>
+            {isFolder ? <Folder size={12} /> : <File 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">
+        <div className="git-panel-title">
+          <Folder className="git-panel-icon" />
+          Files
+        </div>
+        <div className="file-tree-count">
+          {files.length ? `${files.length} file${files.length === 1 ? "" : "s"}` : "No files"}
+        </div>
+      </div>
+      <div className="file-tree-list">
+        {nodes.length === 0 ? (
+          <div className="file-tree-empty">No files available.</div>
+        ) : (
+          nodes.map((node) => renderNode(node, 0))
+        )}
+      </div>
+    </aside>
+  );
+}
diff --git a/src/features/layout/hooks/useLayoutNodes.tsx b/src/features/layout/hooks/useLayoutNodes.tsx
index 0371f9b48..706dcf15f 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";
@@ -108,6 +109,8 @@ type LayoutNodesOptions = {
   onCopyThread: () => void | Promise<void>;
   onToggleTerminal: () => void;
   showTerminalButton: boolean;
+  filePanelMode: "git" | "files";
+  onToggleFilePanel: () => void;
   centerMode: "chat" | "diff";
   onExitDiff: () => void;
   activeTab: "projects" | "codex" | "git" | "log";
@@ -348,6 +351,8 @@ export function useLayoutNodes(options: LayoutNodesOptions): LayoutNodesResult {
       onToggleTerminal={options.onToggleTerminal}
       isTerminalOpen={options.terminalOpen}
       showTerminalButton={options.showTerminalButton}
+      filePanelMode={options.filePanelMode}
+      onToggleFilePanel={options.onToggleFilePanel}
     />
   ) : null;
 
@@ -374,34 +379,40 @@ 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}
+      />
+    ) : (
+      <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 gitDiffViewerNode = (
     <GitDiffViewer
diff --git a/src/styles/file-tree.css b/src/styles/file-tree.css
new file mode 100644
index 000000000..75585b3a9
--- /dev/null
+++ b/src/styles/file-tree.css
@@ -0,0 +1,81 @@
+.file-tree-panel {
+  gap: 10px;
+}
+
+.file-tree-count {
+  font-size: 11px;
+  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-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;
+}

From e62dfec82b8bddefd8fbe385d00d252d0e3a4f3b Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Fri, 16 Jan 2026 13:33:11 +0100
Subject: [PATCH 02/12] Add panel switch button and file type icons to side
 panels

Introduces a switch button in both the file tree and git diff panels for toggling between them, improving navigation. FileTreePanel now displays file-type-specific icons. Updates related props, removes the old toggle from MainHeader, and adjusts styles for the new button. Also increases the minimum right panel width for better layout.
---
 package.json                                  |   6 +-
 src/features/app/components/MainHeader.tsx    |  24 +----
 .../files/components/FileTreePanel.tsx        | 101 +++++++++++++++++-
 src/features/git/components/GitDiffPanel.tsx  |  15 ++-
 src/features/layout/hooks/useLayoutNodes.tsx  |   6 +-
 .../layout/hooks/useResizablePanels.ts        |   2 +-
 src/styles/diff.css                           |  31 ++++++
 src/styles/sidebar.css                        |   1 +
 8 files changed, 147 insertions(+), 39 deletions(-)

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/features/app/components/MainHeader.tsx b/src/features/app/components/MainHeader.tsx
index 5b1e9fff8..924733d60 100644
--- a/src/features/app/components/MainHeader.tsx
+++ b/src/features/app/components/MainHeader.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Check, Copy, Folder, GitBranch, Terminal } from "lucide-react";
+import { Check, Copy, Terminal } from "lucide-react";
 import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import type { BranchInfo, WorkspaceInfo } from "../../../types";
 
@@ -19,8 +19,6 @@ type MainHeaderProps = {
   onToggleTerminal: () => void;
   isTerminalOpen: boolean;
   showTerminalButton?: boolean;
-  filePanelMode: "git" | "files";
-  onToggleFilePanel: () => void;
 };
 
 export function MainHeader({
@@ -39,8 +37,6 @@ export function MainHeader({
   onToggleTerminal,
   isTerminalOpen,
   showTerminalButton = true,
-  filePanelMode,
-  onToggleFilePanel,
 }: MainHeaderProps) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [infoOpen, setInfoOpen] = useState(false);
@@ -286,24 +282,6 @@ export function MainHeader({
         </div>
       </div>
       <div className="main-header-actions">
-        <button
-          type="button"
-          className={`ghost main-header-action${
-            filePanelMode === "files" ? " is-active" : ""
-          }`}
-          onClick={onToggleFilePanel}
-          data-tauri-drag-region="false"
-          aria-label={
-            filePanelMode === "files" ? "Show git panel" : "Show file tree"
-          }
-          title={filePanelMode === "files" ? "Show git panel" : "Show file tree"}
-        >
-          {filePanelMode === "files" ? (
-            <GitBranch size={14} aria-hidden />
-          ) : (
-            <Folder size={14} aria-hidden />
-          )}
-        </button>
         {showTerminalButton && (
           <button
             type="button"
diff --git a/src/features/files/components/FileTreePanel.tsx b/src/features/files/components/FileTreePanel.tsx
index 29e91533b..8afa69a56 100644
--- a/src/features/files/components/FileTreePanel.tsx
+++ b/src/features/files/components/FileTreePanel.tsx
@@ -4,7 +4,19 @@ 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 { Folder, File } from "lucide-react";
+import {
+  ArrowLeftRight,
+  File,
+  FileArchive,
+  FileAudio,
+  FileCode,
+  FileImage,
+  FileJson,
+  FileSpreadsheet,
+  FileText,
+  FileVideo,
+  Folder,
+} from "lucide-react";
 
 type FileTreeNode = {
   name: string;
@@ -16,6 +28,7 @@ type FileTreeNode = {
 type FileTreePanelProps = {
   workspacePath: string;
   files: string[];
+  onToggleFilePanel: () => void;
 };
 
 type FileTreeBuildNode = {
@@ -91,7 +104,77 @@ function buildTree(paths: string[]): { nodes: FileTreeNode[]; folderPaths: Set<s
   return { nodes: toArray(root), folderPaths };
 }
 
-export function FileTreePanel({ workspacePath, files }: FileTreePanelProps) {
+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,
+  onToggleFilePanel,
+}: FileTreePanelProps) {
   const { nodes, folderPaths } = useMemo(() => buildTree(files), [files]);
   const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
 
@@ -157,6 +240,7 @@ export function FileTreePanel({ workspacePath, files }: FileTreePanelProps) {
   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
@@ -182,7 +266,7 @@ export function FileTreePanel({ workspacePath, files }: FileTreePanelProps) {
             <span className="file-tree-spacer" aria-hidden />
           )}
           <span className="file-tree-icon" aria-hidden>
-            {isFolder ? <Folder size={12} /> : <File size={12} />}
+            <FileIcon size={12} />
           </span>
           <span className="file-tree-name">{node.name}</span>
         </button>
@@ -198,10 +282,17 @@ export function FileTreePanel({ workspacePath, files }: FileTreePanelProps) {
   return (
     <aside className="diff-panel file-tree-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 git panel"
+          title="Show git panel"
+        >
           <Folder className="git-panel-icon" />
           Files
-        </div>
+          <ArrowLeftRight className="git-panel-switch-icon" aria-hidden />
+        </button>
         <div className="file-tree-count">
           {files.length ? `${files.length} file${files.length === 1 ? "" : "s"}` : "No files"}
         </div>
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 706dcf15f..11e970de2 100644
--- a/src/features/layout/hooks/useLayoutNodes.tsx
+++ b/src/features/layout/hooks/useLayoutNodes.tsx
@@ -109,8 +109,6 @@ type LayoutNodesOptions = {
   onCopyThread: () => void | Promise<void>;
   onToggleTerminal: () => void;
   showTerminalButton: boolean;
-  filePanelMode: "git" | "files";
-  onToggleFilePanel: () => void;
   centerMode: "chat" | "diff";
   onExitDiff: () => void;
   activeTab: "projects" | "codex" | "git" | "log";
@@ -351,8 +349,6 @@ export function useLayoutNodes(options: LayoutNodesOptions): LayoutNodesResult {
       onToggleTerminal={options.onToggleTerminal}
       isTerminalOpen={options.terminalOpen}
       showTerminalButton={options.showTerminalButton}
-      filePanelMode={options.filePanelMode}
-      onToggleFilePanel={options.onToggleFilePanel}
     />
   ) : null;
 
@@ -384,6 +380,7 @@ export function useLayoutNodes(options: LayoutNodesOptions): LayoutNodesResult {
       <FileTreePanel
         workspacePath={options.activeWorkspace.path}
         files={options.files}
+        onToggleFilePanel={options.onToggleFilePanel}
       />
     ) : (
       <GitDiffPanel
@@ -411,6 +408,7 @@ export function useLayoutNodes(options: LayoutNodesOptions): LayoutNodesResult {
         issuesLoading={options.gitIssuesLoading}
         issuesError={options.gitIssuesError}
         gitRemoteUrl={options.gitRemoteUrl}
+        onToggleFilePanel={options.onToggleFilePanel}
       />
     );
 
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/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/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);

From 000201fc2475b145457926e0858f0b9451b78675 Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Fri, 16 Jan 2026 13:35:37 +0100
Subject: [PATCH 03/12] fix: add file panel options to layout nodes

---
 src/features/layout/hooks/useLayoutNodes.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/features/layout/hooks/useLayoutNodes.tsx b/src/features/layout/hooks/useLayoutNodes.tsx
index 11e970de2..866e30b85 100644
--- a/src/features/layout/hooks/useLayoutNodes.tsx
+++ b/src/features/layout/hooks/useLayoutNodes.tsx
@@ -116,6 +116,8 @@ type LayoutNodesOptions = {
   tabletNavTab: "codex" | "git" | "log";
   gitPanelMode: "diff" | "log" | "issues";
   onGitPanelModeChange: (mode: "diff" | "log" | "issues") => void;
+  filePanelMode: "git" | "files";
+  onToggleFilePanel: () => void;
   gitStatus: {
     branchName: string;
     files: GitFileStatus[];

From 1a0a20550612b555ea812555aefc10cd6ee0aff6 Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Fri, 16 Jan 2026 13:37:28 +0100
Subject: [PATCH 04/12] fix: remove workspace file list cap

---
 src-tauri/src/workspaces.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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)]

From 0842916d78a902dd766fb45ebc8ed476ff180dea Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Fri, 16 Jan 2026 13:38:42 +0100
Subject: [PATCH 05/12] fix: refresh file tree on workspace changes

---
 .../workspaces/hooks/useWorkspaceFiles.ts     | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/features/workspaces/hooks/useWorkspaceFiles.ts b/src/features/workspaces/hooks/useWorkspaceFiles.ts
index bb27ac280..4d287fce4 100644
--- a/src/features/workspaces/hooks/useWorkspaceFiles.ts
+++ b/src/features/workspaces/hooks/useWorkspaceFiles.ts
@@ -13,7 +13,7 @@ export function useWorkspaceFiles({
 }: UseWorkspaceFilesOptions) {
   const [files, setFiles] = useState<string[]>([]);
   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 +23,20 @@ export function useWorkspaceFiles({
     if (!workspaceId || !isConnected) {
       return;
     }
-    if (inFlight.current) {
+    if (inFlight.current === workspaceId) {
       return;
     }
-    inFlight.current = true;
+    inFlight.current = workspaceId;
+    const requestWorkspaceId = workspaceId;
     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 +44,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 +57,18 @@ export function useWorkspaceFiles({
         payload: error instanceof Error ? error.message : String(error),
       });
     } finally {
-      inFlight.current = false;
+      if (inFlight.current === requestWorkspaceId) {
+        inFlight.current = null;
+      }
     }
   }, [isConnected, onDebug, workspaceId]);
 
+  useEffect(() => {
+    setFiles([]);
+    lastFetchedWorkspaceId.current = null;
+    inFlight.current = null;
+  }, [workspaceId]);
+
   useEffect(() => {
     if (!workspaceId || !isConnected) {
       return;

From 7125bc038fa821f5e4c863ea68e780989c0350b5 Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Fri, 16 Jan 2026 13:41:22 +0100
Subject: [PATCH 06/12] feat: add file tree loading skeleton

---
 src/App.tsx                                   |  6 +++++-
 .../files/components/FileTreePanel.tsx        | 21 +++++++++++++++++--
 src/features/layout/hooks/useLayoutNodes.tsx  |  2 ++
 .../workspaces/hooks/useWorkspaceFiles.ts     |  7 ++++++-
 src/styles/file-tree.css                      | 20 ++++++++++++++++++
 5 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4087e1c0b..398020ec9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -234,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
@@ -759,6 +762,7 @@ function MainApp() {
     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
index 8afa69a56..9c7121598 100644
--- a/src/features/files/components/FileTreePanel.tsx
+++ b/src/features/files/components/FileTreePanel.tsx
@@ -28,6 +28,7 @@ type FileTreeNode = {
 type FileTreePanelProps = {
   workspacePath: string;
   files: string[];
+  isLoading: boolean;
   onToggleFilePanel: () => void;
 };
 
@@ -173,10 +174,12 @@ function getFileIcon(name: string) {
 export function FileTreePanel({
   workspacePath,
   files,
+  isLoading,
   onToggleFilePanel,
 }: FileTreePanelProps) {
   const { nodes, folderPaths } = useMemo(() => buildTree(files), [files]);
   const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+  const showLoading = isLoading && files.length === 0;
 
   useEffect(() => {
     setExpandedFolders((prev) => {
@@ -294,11 +297,25 @@ export function FileTreePanel({
           <ArrowLeftRight className="git-panel-switch-icon" aria-hidden />
         </button>
         <div className="file-tree-count">
-          {files.length ? `${files.length} file${files.length === 1 ? "" : "s"}` : "No files"}
+          {files.length
+            ? `${files.length} file${files.length === 1 ? "" : "s"}`
+            : showLoading
+              ? "Loading files"
+              : "No files"}
         </div>
       </div>
       <div className="file-tree-list">
-        {nodes.length === 0 ? (
+        {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">No files available.</div>
         ) : (
           nodes.map((node) => renderNode(node, 0))
diff --git a/src/features/layout/hooks/useLayoutNodes.tsx b/src/features/layout/hooks/useLayoutNodes.tsx
index 866e30b85..a01edcfed 100644
--- a/src/features/layout/hooks/useLayoutNodes.tsx
+++ b/src/features/layout/hooks/useLayoutNodes.tsx
@@ -118,6 +118,7 @@ type LayoutNodesOptions = {
   onGitPanelModeChange: (mode: "diff" | "log" | "issues") => void;
   filePanelMode: "git" | "files";
   onToggleFilePanel: () => void;
+  fileTreeLoading: boolean;
   gitStatus: {
     branchName: string;
     files: GitFileStatus[];
@@ -382,6 +383,7 @@ export function useLayoutNodes(options: LayoutNodesOptions): LayoutNodesResult {
       <FileTreePanel
         workspacePath={options.activeWorkspace.path}
         files={options.files}
+        isLoading={options.fileTreeLoading}
         onToggleFilePanel={options.onToggleFilePanel}
       />
     ) : (
diff --git a/src/features/workspaces/hooks/useWorkspaceFiles.ts b/src/features/workspaces/hooks/useWorkspaceFiles.ts
index 4d287fce4..28ec12df9 100644
--- a/src/features/workspaces/hooks/useWorkspaceFiles.ts
+++ b/src/features/workspaces/hooks/useWorkspaceFiles.ts
@@ -12,6 +12,7 @@ export function useWorkspaceFiles({
   onDebug,
 }: UseWorkspaceFilesOptions) {
   const [files, setFiles] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
   const lastFetchedWorkspaceId = useRef<string | null>(null);
   const inFlight = useRef<string | null>(null);
 
@@ -28,6 +29,7 @@ export function useWorkspaceFiles({
     }
     inFlight.current = workspaceId;
     const requestWorkspaceId = workspaceId;
+    setIsLoading(true);
     onDebug?.({
       id: `${Date.now()}-client-files-list`,
       timestamp: Date.now(),
@@ -59,6 +61,7 @@ export function useWorkspaceFiles({
     } finally {
       if (inFlight.current === requestWorkspaceId) {
         inFlight.current = null;
+        setIsLoading(false);
       }
     }
   }, [isConnected, onDebug, workspaceId]);
@@ -67,7 +70,8 @@ export function useWorkspaceFiles({
     setFiles([]);
     lastFetchedWorkspaceId.current = null;
     inFlight.current = null;
-  }, [workspaceId]);
+    setIsLoading(Boolean(workspaceId && isConnected));
+  }, [isConnected, workspaceId]);
 
   useEffect(() => {
     if (!workspaceId || !isConnected) {
@@ -97,6 +101,7 @@ export function useWorkspaceFiles({
 
   return {
     files: fileOptions,
+    isLoading,
     refreshFiles,
   };
 }
diff --git a/src/styles/file-tree.css b/src/styles/file-tree.css
index 75585b3a9..daa6dd3fd 100644
--- a/src/styles/file-tree.css
+++ b/src/styles/file-tree.css
@@ -22,6 +22,26 @@
   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;

From a36e0a5aff05ac675a0ee151f0395b5eeabce769 Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Fri, 16 Jan 2026 13:44:53 +0100
Subject: [PATCH 07/12] feat: add file tree search filter

---
 .../files/components/FileTreePanel.tsx        | 88 +++++++++++++++++--
 src/styles/file-tree.css                      | 34 +++++++
 2 files changed, 116 insertions(+), 6 deletions(-)

diff --git a/src/features/files/components/FileTreePanel.tsx b/src/features/files/components/FileTreePanel.tsx
index 9c7121598..e78688ba1 100644
--- a/src/features/files/components/FileTreePanel.tsx
+++ b/src/features/files/components/FileTreePanel.tsx
@@ -16,6 +16,7 @@ import {
   FileText,
   FileVideo,
   Folder,
+  Search,
 } from "lucide-react";
 
 type FileTreeNode = {
@@ -179,10 +180,70 @@ export function FileTreePanel({
 }: FileTreePanelProps) {
   const { nodes, folderPaths } = useMemo(() => buildTree(files), [files]);
   const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+  const [query, setQuery] = useState("");
   const showLoading = isLoading && files.length === 0;
+  const normalizedQuery = query.trim().toLowerCase();
+
+  const { filteredNodes, filteredFolderPaths, filteredFilesCount } = useMemo(() => {
+    if (!normalizedQuery) {
+      return {
+        filteredNodes: nodes,
+        filteredFolderPaths: folderPaths,
+        filteredFilesCount: files.length,
+      };
+    }
+
+    const matches = (value: string) => value.toLowerCase().includes(normalizedQuery);
+
+    const filterNode = (node: FileTreeNode): FileTreeNode | null => {
+      if (node.type === "file") {
+        return matches(node.name) ? node : null;
+      }
+      if (matches(node.name)) {
+        return node;
+      }
+      const nextChildren = node.children
+        .map((child) => filterNode(child))
+        .filter((child): child is FileTreeNode => Boolean(child));
+      if (nextChildren.length === 0) {
+        return null;
+      }
+      return {
+        ...node,
+        children: nextChildren,
+      };
+    };
+
+    const nextNodes = nodes
+      .map((node) => filterNode(node))
+      .filter((node): node is FileTreeNode => Boolean(node));
+
+    const nextFolderPaths = new Set<string>();
+    let nextFilesCount = 0;
+
+    const collect = (node: FileTreeNode) => {
+      if (node.type === "folder") {
+        nextFolderPaths.add(node.path);
+        node.children.forEach(collect);
+      } else {
+        nextFilesCount += 1;
+      }
+    };
+
+    nextNodes.forEach(collect);
+
+    return {
+      filteredNodes: nextNodes,
+      filteredFolderPaths: nextFolderPaths,
+      filteredFilesCount: nextFilesCount,
+    };
+  }, [files.length, folderPaths, nodes, normalizedQuery]);
 
   useEffect(() => {
     setExpandedFolders((prev) => {
+      if (normalizedQuery) {
+        return new Set(filteredFolderPaths);
+      }
       const next = new Set<string>();
       prev.forEach((path) => {
         if (folderPaths.has(path)) {
@@ -198,7 +259,7 @@ export function FileTreePanel({
       }
       return next;
     });
-  }, [folderPaths, nodes]);
+  }, [filteredFolderPaths, folderPaths, nodes, normalizedQuery]);
 
   const toggleFolder = (path: string) => {
     setExpandedFolders((prev) => {
@@ -297,13 +358,26 @@ export function FileTreePanel({
           <ArrowLeftRight className="git-panel-switch-icon" aria-hidden />
         </button>
         <div className="file-tree-count">
-          {files.length
-            ? `${files.length} file${files.length === 1 ? "" : "s"}`
+          {filteredFilesCount
+            ? normalizedQuery
+              ? `${filteredFilesCount} match${filteredFilesCount === 1 ? "" : "es"}`
+              : `${filteredFilesCount} file${filteredFilesCount === 1 ? "" : "s"}`
             : showLoading
               ? "Loading files"
               : "No files"}
         </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">
@@ -315,10 +389,12 @@ export function FileTreePanel({
               />
             ))}
           </div>
-        ) : nodes.length === 0 ? (
-          <div className="file-tree-empty">No files available.</div>
+        ) : filteredNodes.length === 0 ? (
+          <div className="file-tree-empty">
+            {normalizedQuery ? "No matches found." : "No files available."}
+          </div>
         ) : (
-          nodes.map((node) => renderNode(node, 0))
+          filteredNodes.map((node) => renderNode(node, 0))
         )}
       </div>
     </aside>
diff --git a/src/styles/file-tree.css b/src/styles/file-tree.css
index daa6dd3fd..672045582 100644
--- a/src/styles/file-tree.css
+++ b/src/styles/file-tree.css
@@ -7,6 +7,40 @@
   color: var(--text-faint);
 }
 
+.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;

From b164d83e9306ce6d55da44cae04c1c3798a9e824 Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Fri, 16 Jan 2026 13:46:31 +0100
Subject: [PATCH 08/12] feat: add file tree expand toggle

---
 .../files/components/FileTreePanel.tsx        | 50 ++++++++++++++++---
 src/styles/file-tree.css                      | 15 ++++++
 2 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/src/features/files/components/FileTreePanel.tsx b/src/features/files/components/FileTreePanel.tsx
index e78688ba1..906ac324a 100644
--- a/src/features/files/components/FileTreePanel.tsx
+++ b/src/features/files/components/FileTreePanel.tsx
@@ -6,6 +6,7 @@ import { getCurrentWindow } from "@tauri-apps/api/window";
 import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import {
   ArrowLeftRight,
+  ChevronsUpDown,
   File,
   FileArchive,
   FileAudio,
@@ -239,6 +240,11 @@ export function FileTreePanel({
     };
   }, [files.length, folderPaths, nodes, normalizedQuery]);
 
+  const visibleFolderPaths = normalizedQuery ? filteredFolderPaths : folderPaths;
+  const hasFolders = visibleFolderPaths.size > 0;
+  const allVisibleExpanded =
+    hasFolders && Array.from(visibleFolderPaths).every((path) => expandedFolders.has(path));
+
   useEffect(() => {
     setExpandedFolders((prev) => {
       if (normalizedQuery) {
@@ -261,6 +267,21 @@ export function FileTreePanel({
     });
   }, [filteredFolderPaths, 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;
+    });
+  };
+
   const toggleFolder = (path: string) => {
     setExpandedFolders((prev) => {
       const next = new Set(prev);
@@ -357,14 +378,27 @@ export function FileTreePanel({
           Files
           <ArrowLeftRight className="git-panel-switch-icon" aria-hidden />
         </button>
-        <div className="file-tree-count">
-          {filteredFilesCount
-            ? normalizedQuery
-              ? `${filteredFilesCount} match${filteredFilesCount === 1 ? "" : "es"}`
-              : `${filteredFilesCount} file${filteredFilesCount === 1 ? "" : "s"}`
-            : showLoading
-              ? "Loading files"
-              : "No files"}
+        <div className="file-tree-meta">
+          <div className="file-tree-count">
+            {filteredFilesCount
+              ? normalizedQuery
+                ? `${filteredFilesCount} match${filteredFilesCount === 1 ? "" : "es"}`
+                : `${filteredFilesCount} file${filteredFilesCount === 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">
diff --git a/src/styles/file-tree.css b/src/styles/file-tree.css
index 672045582..d94b954b3 100644
--- a/src/styles/file-tree.css
+++ b/src/styles/file-tree.css
@@ -7,6 +7,21 @@
   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;

From 2f49921ff064ce85cc777de7fd5054bdd672d46e Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Fri, 16 Jan 2026 13:47:23 +0100
Subject: [PATCH 09/12] style: reduce file tree indent

---
 src/features/files/components/FileTreePanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/files/components/FileTreePanel.tsx b/src/features/files/components/FileTreePanel.tsx
index 906ac324a..5dc190a88 100644
--- a/src/features/files/components/FileTreePanel.tsx
+++ b/src/features/files/components/FileTreePanel.tsx
@@ -331,7 +331,7 @@ export function FileTreePanel({
         <button
           type="button"
           className={`file-tree-row${isFolder ? " is-folder" : " is-file"}`}
-          style={{ paddingLeft: `${depth * 14}px` }}
+          style={{ paddingLeft: `${depth * 10}px` }}
           onClick={() => {
             if (isFolder) {
               toggleFolder(node.path);

From d087cc90dff36c1119a628a4d3d79ab643edac67 Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Fri, 16 Jan 2026 13:48:42 +0100
Subject: [PATCH 10/12] style: tighten main topbar padding

---
 src/styles/main.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/main.css b/src/styles/main.css
index 0b2a91bbb..ae79ebfc6 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -97,7 +97,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 32px 8px;
+  padding: 10px 16px 8px 32px;
   border-bottom: 1px solid var(--border-subtle);
   background: var(--surface-topbar);
   -webkit-app-region: drag;

From 46b4c2c5aa7dbdb842bd7093c7d7abf002b96761 Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Fri, 16 Jan 2026 13:51:16 +0100
Subject: [PATCH 11/12] style: align main panel padding

---
 src/styles/main.css     | 3 ++-
 src/styles/messages.css | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/styles/main.css b/src/styles/main.css
index ae79ebfc6..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 16px 8px 32px;
+  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 {

From 913d35e020bfcb5f105165c602b94bd69d1f03cd Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Fri, 16 Jan 2026 13:58:01 +0100
Subject: [PATCH 12/12] perf: speed up file tree search

---
 .../files/components/FileTreePanel.tsx        | 95 ++++++-------------
 src/styles/composer.css                       |  2 +-
 2 files changed, 28 insertions(+), 69 deletions(-)

diff --git a/src/features/files/components/FileTreePanel.tsx b/src/features/files/components/FileTreePanel.tsx
index 5dc190a88..75d2f332e 100644
--- a/src/features/files/components/FileTreePanel.tsx
+++ b/src/features/files/components/FileTreePanel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+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";
@@ -179,68 +179,26 @@ export function FileTreePanel({
   isLoading,
   onToggleFilePanel,
 }: FileTreePanelProps) {
-  const { nodes, folderPaths } = useMemo(() => buildTree(files), [files]);
   const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
   const [query, setQuery] = useState("");
+  const hasManualToggle = useRef(false);
   const showLoading = isLoading && files.length === 0;
-  const normalizedQuery = query.trim().toLowerCase();
+  const deferredQuery = useDeferredValue(query);
+  const normalizedQuery = deferredQuery.trim().toLowerCase();
 
-  const { filteredNodes, filteredFolderPaths, filteredFilesCount } = useMemo(() => {
+  const filteredFiles = useMemo(() => {
     if (!normalizedQuery) {
-      return {
-        filteredNodes: nodes,
-        filteredFolderPaths: folderPaths,
-        filteredFilesCount: files.length,
-      };
+      return files;
     }
+    return files.filter((path) => path.toLowerCase().includes(normalizedQuery));
+  }, [files, normalizedQuery]);
 
-    const matches = (value: string) => value.toLowerCase().includes(normalizedQuery);
-
-    const filterNode = (node: FileTreeNode): FileTreeNode | null => {
-      if (node.type === "file") {
-        return matches(node.name) ? node : null;
-      }
-      if (matches(node.name)) {
-        return node;
-      }
-      const nextChildren = node.children
-        .map((child) => filterNode(child))
-        .filter((child): child is FileTreeNode => Boolean(child));
-      if (nextChildren.length === 0) {
-        return null;
-      }
-      return {
-        ...node,
-        children: nextChildren,
-      };
-    };
-
-    const nextNodes = nodes
-      .map((node) => filterNode(node))
-      .filter((node): node is FileTreeNode => Boolean(node));
-
-    const nextFolderPaths = new Set<string>();
-    let nextFilesCount = 0;
-
-    const collect = (node: FileTreeNode) => {
-      if (node.type === "folder") {
-        nextFolderPaths.add(node.path);
-        node.children.forEach(collect);
-      } else {
-        nextFilesCount += 1;
-      }
-    };
-
-    nextNodes.forEach(collect);
-
-    return {
-      filteredNodes: nextNodes,
-      filteredFolderPaths: nextFolderPaths,
-      filteredFilesCount: nextFilesCount,
-    };
-  }, [files.length, folderPaths, nodes, normalizedQuery]);
+  const { nodes, folderPaths } = useMemo(
+    () => buildTree(normalizedQuery ? filteredFiles : files),
+    [files, filteredFiles, normalizedQuery],
+  );
 
-  const visibleFolderPaths = normalizedQuery ? filteredFolderPaths : folderPaths;
+  const visibleFolderPaths = folderPaths;
   const hasFolders = visibleFolderPaths.size > 0;
   const allVisibleExpanded =
     hasFolders && Array.from(visibleFolderPaths).every((path) => expandedFolders.has(path));
@@ -248,7 +206,7 @@ export function FileTreePanel({
   useEffect(() => {
     setExpandedFolders((prev) => {
       if (normalizedQuery) {
-        return new Set(filteredFolderPaths);
+        return new Set(folderPaths);
       }
       const next = new Set<string>();
       prev.forEach((path) => {
@@ -256,7 +214,7 @@ export function FileTreePanel({
           next.add(path);
         }
       });
-      if (next.size === 0) {
+      if (next.size === 0 && !hasManualToggle.current) {
         nodes.forEach((node) => {
           if (node.type === "folder") {
             next.add(node.path);
@@ -265,7 +223,7 @@ export function FileTreePanel({
       }
       return next;
     });
-  }, [filteredFolderPaths, folderPaths, nodes, normalizedQuery]);
+  }, [folderPaths, nodes, normalizedQuery]);
 
   const toggleAllFolders = () => {
     if (!hasFolders) {
@@ -280,6 +238,7 @@ export function FileTreePanel({
       }
       return next;
     });
+    hasManualToggle.current = true;
   };
 
   const toggleFolder = (path: string) => {
@@ -380,14 +339,14 @@ export function FileTreePanel({
         </button>
         <div className="file-tree-meta">
           <div className="file-tree-count">
-            {filteredFilesCount
-              ? normalizedQuery
-                ? `${filteredFilesCount} match${filteredFilesCount === 1 ? "" : "es"}`
-                : `${filteredFilesCount} file${filteredFilesCount === 1 ? "" : "s"}`
-              : showLoading
-                ? "Loading files"
-                : "No files"}
-          </div>
+          {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"
@@ -423,12 +382,12 @@ export function FileTreePanel({
               />
             ))}
           </div>
-        ) : filteredNodes.length === 0 ? (
+        ) : nodes.length === 0 ? (
           <div className="file-tree-empty">
             {normalizedQuery ? "No matches found." : "No files available."}
           </div>
         ) : (
-          filteredNodes.map((node) => renderNode(node, 0))
+          nodes.map((node) => renderNode(node, 0))
         )}
       </div>
     </aside>
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;