diff --git a/apps/web/src/components/features/workspace/FileBrowser.tsx b/apps/web/src/components/features/workspace/FileBrowser.tsx
new file mode 100644
index 0000000..e4064f8
--- /dev/null
+++ b/apps/web/src/components/features/workspace/FileBrowser.tsx
@@ -0,0 +1,132 @@
+import { useCallback, useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { apiClient } from "../../../api/client";
+import { EmptyState } from "../../data-states";
+import { Icon } from "../../icon";
+import type { GitStatus } from "../../../api/git-repositories";
+
+interface FileTreeEntry {
+  name: string;
+  type: "file" | "directory";
+  path: string;
+  size?: number;
+  mode?: string;
+  last_commit?: {
+    hash: string;
+    message: string;
+    author: string;
+    date: string;
+  } | null;
+}
+
+interface Props {
+  projectId: string;
+  repoId: string;
+  gitStatus: GitStatus | null;
+}
+
+export const FileBrowser = ({ projectId, repoId, gitStatus }: Props) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [entries, setEntries] = useState<FileTreeEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const branch = searchParams.get("branch") || "main";
+  const path = searchParams.get("path") || "";
+
+  const loadFiles = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await apiClient.get(
+        `/projects/${projectId}/repositories/${repoId}/files`,
+        { params: { branch, path } }
+      );
+      setEntries(response.data.entries || []);
+    } catch {
+      setError("Failed to load files");
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, repoId, branch, path]);
+
+  useEffect(() => {
+    void loadFiles();
+  }, [loadFiles]);
+
+  useEffect(() => {
+    const handleRefresh = () => void loadFiles();
+    window.addEventListener("refresh-file-tree", handleRefresh);
+    return () => window.removeEventListener("refresh-file-tree", handleRefresh);
+  }, [loadFiles]);
+
+  const handleEntryClick = (entry: FileTreeEntry) => {
+    if (entry.type === "directory") {
+      const newParams = new URLSearchParams(searchParams);
+      newParams.set("path", entry.path);
+      setSearchParams(newParams);
+    } else {
+      const newParams = new URLSearchParams(searchParams);
+      newParams.set("file", entry.path);
+      setSearchParams(newParams);
+    }
+  };
+
+  const navigateUp = () => {
+    if (!path) return;
+    const parentPath = path.split("/").slice(0, -1).join("/");
+    const newParams = new URLSearchParams(searchParams);
+    if (parentPath) {
+      newParams.set("path", parentPath);
+    } else {
+      newParams.delete("path");
+    }
+    setSearchParams(newParams);
+  };
+
+  const getFileStatus = (filePath: string): string | null => {
+    if (!gitStatus) return null;
+    if (gitStatus.modified.includes(filePath)) return "modified";
+    if (gitStatus.added.includes(filePath)) return "added";
+    if (gitStatus.deleted.includes(filePath)) return "deleted";
+    if (gitStatus.untracked.includes(filePath)) return "untracked";
+    return null;
+  };
+
+  if (loading) return <p className="muted">Loading files...</p>;
+  if (error) return <p className="error-text">{error}</p>;
+
+  return (
+    <div className="file-tree">
+      {path && (
+        <button className="tree-entry tree-up" onClick={navigateUp} type="button">
+          <Icon name="folder" size="sm" /> ..
+        </button>
+      )}
+      {entries.length === 0 && (
+        <EmptyState message="No files in this repository yet." />
+      )}
+      {entries.map((entry) => {
+        const fileStatus = entry.type === "file" ? getFileStatus(entry.path) : null;
+        return (
+          <button
+            key={entry.path}
+            className={`tree-entry ${entry.type === "directory" ? "tree-directory" : "tree-file"} ${fileStatus || ""}`}
+            onClick={() => handleEntryClick(entry)}
+            type="button"
+          >
+            <Icon name={entry.type === "directory" ? "folder" : "file"} size="sm" /> {entry.name}
+            {fileStatus && (
+              <span className={`file-status-indicator ${fileStatus}`}>
+                {fileStatus === "modified" && "M"}
+                {fileStatus === "added" && "A"}
+                {fileStatus === "deleted" && "D"}
+                {fileStatus === "untracked" && "?"}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/apps/web/src/components/features/workspace/WorkspaceLayout.tsx b/apps/web/src/components/features/workspace/WorkspaceLayout.tsx
new file mode 100644
index 0000000..14e3f95
--- /dev/null
+++ b/apps/web/src/components/features/workspace/WorkspaceLayout.tsx
@@ -0,0 +1,214 @@
+import { Icon } from "../../icon";
+import { FileBrowser } from "./FileBrowser";
+import { FileEditor } from "../git/file-editor";
+import { CommitPanel } from "../git/commit-panel";
+import { GitToolbar } from "../git/git-toolbar";
+import { InstanceList } from "../tool/instance-list";
+import type { GitRepository, GitStatus } from "../../../api/git-repositories";
+import type { ToolType } from "../../../api/tool-types";
+import type { Project } from "../../../hooks/use-repo-workspace";
+
+type MobileTab = "files" | "editor" | "git" | "terminal";
+
+interface Props {
+  projectId: string;
+  project: Project | null;
+  isMobile: boolean;
+  mobileTab: MobileTab;
+  selectedRepoId: string | null;
+  selectedRepo: GitRepository | undefined;
+  branches: string[];
+  currentBranch: string;
+  gitStatus: GitStatus | null;
+  toolTypes: ToolType[];
+  repositories: GitRepository[];
+  onMobileTabChange: (tab: MobileTab) => void;
+  onRepoChange: (repoId: string) => void;
+  onBranchChange: (branch: string) => void;
+  onRefresh: () => void;
+}
+
+export const WorkspaceLayout = ({
+  projectId,
+  project,
+  isMobile,
+  mobileTab,
+  selectedRepoId,
+  selectedRepo,
+  branches,
+  currentBranch,
+  gitStatus,
+  toolTypes,
+  repositories,
+  onMobileTabChange,
+  onRepoChange,
+  onBranchChange,
+  onRefresh,
+}: Props) => {
+  if (isMobile) {
+    return (
+      <div className="mobile-workspace">
+        <div className="mobile-workspace-header">
+          <select
+            value={selectedRepoId || ""}
+            onChange={(e) => onRepoChange(e.target.value)}
+            className="mobile-repo-selector"
+          >
+            {repositories.map((repo) => (
+              <option key={repo.id} value={repo.id}>
+                {repo.name}
+              </option>
+            ))}
+          </select>
+          {selectedRepoId && (
+            <select
+              value={currentBranch}
+              onChange={(e) => onBranchChange(e.target.value)}
+              className="mobile-branch-selector"
+            >
+              {branches.map((branch) => (
+                <option key={branch} value={branch}>
+                  {branch}
+                </option>
+              ))}
+            </select>
+          )}
+        </div>
+
+        <div className="mobile-workspace-content">
+          {mobileTab === "files" && selectedRepoId && (
+            <FileBrowser projectId={projectId} repoId={selectedRepoId} gitStatus={gitStatus} />
+          )}
+          {mobileTab === "editor" && selectedRepoId && (
+            <FileEditor projectId={projectId} repoId={selectedRepoId} />
+          )}
+          {mobileTab === "git" && selectedRepoId && gitStatus && (
+            <div className="mobile-git-view">
+              <CommitPanel
+                projectId={projectId}
+                repoId={selectedRepoId}
+                modified={gitStatus.modified}
+                added={gitStatus.added}
+                deleted={gitStatus.deleted}
+                untracked={gitStatus.untracked}
+                onCommit={() => {
+                  onRefresh();
+                }}
+              />
+            </div>
+          )}
+          {mobileTab === "terminal" && selectedRepoId && (
+            <InstanceList
+              projectId={projectId}
+              repoId={selectedRepoId}
+              projectName={project?.name}
+              repoName={selectedRepo?.name}
+              toolTypes={toolTypes}
+            />
+          )}
+        </div>
+
+        <div className="mobile-workspace-tabs">
+          <button
+            className={`mobile-workspace-tab ${mobileTab === "files" ? "active" : ""}`}
+            onClick={() => onMobileTabChange("files")}
+            type="button"
+          >
+            <Icon name="folder" size="sm" />
+            <span>Files</span>
+          </button>
+          <button
+            className={`mobile-workspace-tab ${mobileTab === "editor" ? "active" : ""}`}
+            onClick={() => onMobileTabChange("editor")}
+            type="button"
+          >
+            <Icon name="edit" size="sm" />
+            <span>Editor</span>
+          </button>
+          <button
+            className={`mobile-workspace-tab ${mobileTab === "git" ? "active" : ""}`}
+            onClick={() => onMobileTabChange("git")}
+            type="button"
+          >
+            <Icon name="branch" size="sm" />
+            <span>Git</span>
+          </button>
+          <button
+            className={`mobile-workspace-tab ${mobileTab === "terminal" ? "active" : ""}`}
+            onClick={() => onMobileTabChange("terminal")}
+            type="button"
+          >
+            <Icon name="terminal" size="sm" />
+            <span>Terminal</span>
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {selectedRepoId && (
+        <GitToolbar
+          projectId={projectId}
+          repoId={selectedRepoId}
+          currentBranch={currentBranch}
+          branches={branches}
+          hasRemote={Boolean(selectedRepo?.remote_url)}
+          isMirror={Boolean(selectedRepo?.is_mirror)}
+          onBranchChange={onBranchChange}
+          onRefresh={onRefresh}
+        />
+      )}
+      <div className="workspace-layout">
+        <aside className="workspace-sidebar">
+          <div className="sidebar-section">
+            <label className="form-field">
+              Repository
+              <select
+                value={selectedRepoId || ""}
+                onChange={(e) => onRepoChange(e.target.value)}
+              >
+                {repositories.map((repo) => (
+                  <option key={repo.id} value={repo.id}>
+                    {repo.name}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+
+          {selectedRepoId && (
+            <>
+              <FileBrowser projectId={projectId} repoId={selectedRepoId} gitStatus={gitStatus} />
+              {gitStatus && (
+                <CommitPanel
+                  projectId={projectId}
+                  repoId={selectedRepoId}
+                  modified={gitStatus.modified}
+                  added={gitStatus.added}
+                  deleted={gitStatus.deleted}
+                  untracked={gitStatus.untracked}
+                  onCommit={onRefresh}
+                />
+              )}
+              <InstanceList
+                projectId={projectId}
+                repoId={selectedRepoId}
+                projectName={project?.name}
+                repoName={selectedRepo?.name}
+                toolTypes={toolTypes}
+              />
+            </>
+          )}
+        </aside>
+
+        <main className="workspace-main">
+          {selectedRepoId && (
+            <FileEditor projectId={projectId} repoId={selectedRepoId} />
+          )}
+        </main>
+      </div>
+    </>
+  );
+};
diff --git a/apps/web/src/hooks/use-repo-workspace.ts b/apps/web/src/hooks/use-repo-workspace.ts
new file mode 100644
index 0000000..4a250ee
--- /dev/null
+++ b/apps/web/src/hooks/use-repo-workspace.ts
@@ -0,0 +1,148 @@
+import { useCallback, useEffect, useState } from "react";
+import { useParams, useSearchParams } from "react-router-dom";
+import { apiClient } from "../api/client";
+import {
+  getRepositoryStatus,
+  listRepositories,
+  type GitRepository,
+  type GitStatus,
+} from "../api/git-repositories";
+import { listToolTypes, type ToolType } from "../api/tool-types";
+
+type WorkspaceStatus = "loading" | "ready" | "error" | "empty";
+
+export interface Project {
+  id: string;
+  name: string;
+  description?: string | null;
+}
+
+export const useRepoWorkspace = () => {
+  const { projectId } = useParams<{ projectId: string }>();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [status, setStatus] = useState<WorkspaceStatus>("loading");
+  const [project, setProject] = useState<Project | null>(null);
+  const [repositories, setRepositories] = useState<GitRepository[]>([]);
+  const [selectedRepoId, setSelectedRepoId] = useState<string | null>(
+    searchParams.get("repo")
+  );
+  const [branches, setBranches] = useState<string[]>([]);
+  const [currentBranch, setCurrentBranch] = useState<string>("main");
+  const [gitStatus, setGitStatus] = useState<GitStatus | null>(null);
+  const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
+
+  const loadProject = useCallback(async () => {
+    if (!projectId) return;
+    try {
+      const response = await apiClient.get(`/projects/${projectId}`);
+      setProject(response.data);
+    } catch {
+      setProject(null);
+    }
+  }, [projectId]);
+
+  const loadRepositories = useCallback(async () => {
+    if (!projectId) return;
+    setStatus("loading");
+    try {
+      const data = await listRepositories(projectId);
+      setRepositories(data);
+      if (data.length === 0) {
+        setStatus("empty");
+      } else {
+        setStatus("ready");
+        if (!selectedRepoId) {
+          setSelectedRepoId(data[0].id);
+          const newParams = new URLSearchParams(searchParams);
+          newParams.set("repo", data[0].id);
+          setSearchParams(newParams, { replace: true });
+        }
+      }
+    } catch {
+      setRepositories([]);
+      setStatus("error");
+    }
+  }, [projectId, selectedRepoId, searchParams, setSearchParams]);
+
+  const loadBranches = useCallback(async () => {
+    if (!projectId || !selectedRepoId) return;
+    try {
+      const response = await apiClient.get(
+        `/projects/${projectId}/repositories/${selectedRepoId}/branches`
+      );
+      const branchList = response.data.branches.map((b: { name: string }) => b.name);
+      setBranches(branchList);
+      const defaultBranch = response.data.default_branch;
+      if (defaultBranch) setCurrentBranch(defaultBranch);
+    } catch {
+      setBranches([]);
+    }
+  }, [projectId, selectedRepoId]);
+
+  const loadGitStatus = useCallback(async () => {
+    if (!projectId || !selectedRepoId) return;
+    try {
+      const data = await getRepositoryStatus(projectId, selectedRepoId);
+      setGitStatus(data);
+    } catch {
+      setGitStatus(null);
+    }
+  }, [projectId, selectedRepoId]);
+
+  const loadToolTypes = useCallback(async () => {
+    try {
+      const data = await listToolTypes();
+      setToolTypes(data);
+    } catch {
+      setToolTypes([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProject();
+    void loadRepositories();
+    void loadToolTypes();
+  }, [loadProject, loadRepositories, loadToolTypes]);
+
+  useEffect(() => {
+    void loadBranches();
+    void loadGitStatus();
+  }, [loadBranches, loadGitStatus]);
+
+  const handleRepoChange = (repoId: string) => {
+    setSelectedRepoId(repoId);
+    const newParams = new URLSearchParams(searchParams);
+    newParams.set("repo", repoId);
+    newParams.delete("branch");
+    newParams.delete("path");
+    setSearchParams(newParams);
+  };
+
+  const handleBranchChange = (branch: string) => {
+    setCurrentBranch(branch);
+    const newParams = new URLSearchParams(searchParams);
+    newParams.set("branch", branch);
+    setSearchParams(newParams);
+  };
+
+  const selectedRepo = repositories.find((r) => r.id === selectedRepoId);
+
+  return {
+    projectId,
+    project,
+    status,
+    repositories,
+    selectedRepoId,
+    selectedRepo,
+    branches,
+    currentBranch,
+    gitStatus,
+    toolTypes,
+    handleRepoChange,
+    handleBranchChange,
+    loadGitStatus,
+    loadBranches,
+    loadRepositories,
+  };
+};
diff --git a/apps/web/src/pages/RepoWorkspacePage.tsx b/apps/web/src/pages/RepoWorkspacePage.tsx
index 945ae43..ad63007 100644
--- a/apps/web/src/pages/RepoWorkspacePage.tsx
+++ b/apps/web/src/pages/RepoWorkspacePage.tsx
@@ -1,505 +1,89 @@
-import { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
+import { Link } from "react-router-dom";
 import { EmptyState, ErrorState, LoadingState } from "../components/data-states";
-import { Icon } from "../components/icon";
 import { useMobileViewport } from "../hooks/use-mobile-viewport";
-
-import { Link, useParams, useSearchParams } from "react-router-dom";
-
-import { apiClient } from "../api/client";
-import {
-  getRepositoryStatus,
-  listRepositories,
-  type GitRepository,
-  type GitStatus,
-} from "../api/git-repositories";
-import { CommitPanel } from "../components/features/git/commit-panel";
-import { FileEditor } from "../components/features/git/file-editor";
-import { GitToolbar } from "../components/features/git/git-toolbar";
-import { InstanceList } from "../components/features/tool/instance-list";
+import { useRepoWorkspace } from "../hooks/use-repo-workspace";
 import { WorkspaceHeader } from "../components/features/workspace/workspace-header";
-import { listToolTypes } from "../api/tool-types";
-import type { ToolType } from "../api/tool-types";
+import { WorkspaceLayout } from "../components/features/workspace/WorkspaceLayout";
 
 type MobileTab = "files" | "editor" | "git" | "terminal";
 
-type WorkspaceStatus = "loading" | "ready" | "error" | "empty";
-
-interface FileTreeEntry {
-  name: string;
-  type: "file" | "directory";
-  path: string;
-  size?: number;
-  mode?: string;
-  last_commit?: {
-    hash: string;
-    message: string;
-    author: string;
-    date: string;
-  } | null;
-}
-
-interface Project {
-  id: string;
-  name: string;
-  description?: string | null;
-}
-
 export const RepoWorkspace = () => {
-  const { projectId } = useParams<{ projectId: string }>();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const isMobile = useMobileViewport();
-  const [mobileTab, setMobileTab] = useState<MobileTab>("files");
+	const {
+		projectId,
+		project,
+		status,
+		repositories,
+		selectedRepoId,
+		selectedRepo,
+		branches,
+		currentBranch,
+		gitStatus,
+		toolTypes,
+		handleRepoChange,
+		handleBranchChange,
+		loadGitStatus,
+		loadBranches,
+		loadRepositories,
+	} = useRepoWorkspace();
+	const isMobile = useMobileViewport();
+	const [mobileTab, setMobileTab] = useState<MobileTab>("files");
 
-  const [status, setStatus] = useState<WorkspaceStatus>("loading");
-  const [project, setProject] = useState<Project | null>(null);
-  const [repositories, setRepositories] = useState<GitRepository[]>([]);
-  const [selectedRepoId, setSelectedRepoId] = useState<string | null>(
-    searchParams.get("repo")
-  );
-  const [branches, setBranches] = useState<string[]>([]);
-  const [currentBranch, setCurrentBranch] = useState<string>("main");
-  const [gitStatus, setGitStatus] = useState<GitStatus | null>(null);
-  const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
+	return (
+		<section className="repo-workspace">
+			{project && (
+				<WorkspaceHeader
+					project={project}
+					currentRepo={selectedRepo || null}
+				/>
+			)}
 
-  const loadProject = useCallback(async () => {
-    if (!projectId) return;
-    try {
-      const response = await apiClient.get(`/projects/${projectId}`);
-      setProject(response.data);
-    } catch {
-      setProject(null);
-    }
-  }, [projectId]);
+			{status === "loading" && (
+				<LoadingState message="Loading repositories..." />
+			)}
 
-  const loadRepositories = useCallback(async () => {
-    if (!projectId) return;
+			{status === "error" && (
+				<ErrorState
+					message="Failed to load repositories"
+					onRetry={() => void loadRepositories()}
+				/>
+			)}
 
-    setStatus("loading");
-    try {
-      const data = await listRepositories(projectId);
-      setRepositories(data);
+			{status === "empty" && (
+				<div className="card stack">
+					<EmptyState message="No repositories in this project yet." />
+					<Link
+						className="primary-button"
+						to={`/projects/${projectId}/settings/repositories`}
+					>
+						Manage Repositories
+					</Link>
+				</div>
+			)}
 
-      if (data.length === 0) {
-        setStatus("empty");
-      } else {
-        setStatus("ready");
-        // If no repo selected, select the first one
-        if (!selectedRepoId) {
-          setSelectedRepoId(data[0].id);
-          const newParams = new URLSearchParams(searchParams);
-          newParams.set("repo", data[0].id);
-          setSearchParams(newParams, { replace: true });
-        }
-      }
-    } catch {
-      setRepositories([]);
-      setStatus("error");
-    }
-  }, [projectId, selectedRepoId, searchParams, setSearchParams]);
-
-  const loadBranches = useCallback(async () => {
-    if (!projectId || !selectedRepoId) return;
-    try {
-      const response = await apiClient.get(
-        `/projects/${projectId}/repositories/${selectedRepoId}/branches`
-      );
-      const branchList = response.data.branches.map((b: { name: string }) => b.name);
-      setBranches(branchList);
-      const defaultBranch = response.data.default_branch;
-      if (defaultBranch) {
-        setCurrentBranch(defaultBranch);
-      }
-    } catch {
-      setBranches([]);
-    }
-  }, [projectId, selectedRepoId]);
-
-  const loadGitStatus = useCallback(async () => {
-    if (!projectId || !selectedRepoId) return;
-    try {
-      const data = await getRepositoryStatus(projectId, selectedRepoId);
-      setGitStatus(data);
-    } catch {
-      setGitStatus(null);
-    }
-  }, [projectId, selectedRepoId]);
-
-  const loadToolTypes = useCallback(async () => {
-    try {
-      const data = await listToolTypes();
-      setToolTypes(data);
-    } catch {
-      setToolTypes([]);
-    }
-  }, []);
-
-  useEffect(() => {
-    void loadProject();
-    void loadRepositories();
-    void loadToolTypes();
-  }, [loadProject, loadRepositories, loadToolTypes]);
-
-  useEffect(() => {
-    void loadBranches();
-    void loadGitStatus();
-  }, [loadBranches, loadGitStatus]);
-
-  const handleRepoChange = (repoId: string) => {
-    setSelectedRepoId(repoId);
-    const newParams = new URLSearchParams(searchParams);
-    newParams.set("repo", repoId);
-    newParams.delete("branch");
-    newParams.delete("path");
-    setSearchParams(newParams);
-  };
-
-  const selectedRepo = repositories.find((r) => r.id === selectedRepoId);
-
-  return (
-    <section className="repo-workspace">
-      {project && (
-        <WorkspaceHeader
-          project={project}
-          currentRepo={selectedRepo || null}
-        />
-      )}
-
-      {status === "loading" && (
-        <LoadingState message="Loading repositories..." />
-      )}
-
-      {status === "error" && (
-        <ErrorState message="Failed to load repositories" onRetry={() => void loadRepositories()} />
-      )}
-
-      {status === "empty" && (
-        <div className="card stack">
-          <EmptyState message="No repositories in this project yet." />
-          <Link
-            className="primary-button"
-            to={`/projects/${projectId}/settings/repositories`}
-          >
-            Manage Repositories
-          </Link>
-        </div>
-      )}
-
-      {status === "ready" && repositories.length > 0 && (
-        <>
-          {isMobile ? (
-            // Mobile Layout
-            <div className="mobile-workspace">
-              <div className="mobile-workspace-header">
-                <select
-                  value={selectedRepoId || ""}
-                  onChange={(e) => handleRepoChange(e.target.value)}
-                  className="mobile-repo-selector"
-                >
-                  {repositories.map((repo) => (
-                    <option key={repo.id} value={repo.id}>
-                      {repo.name}
-                    </option>
-                  ))}
-                </select>
-                {selectedRepoId && (
-                  <select
-                    value={currentBranch}
-                    onChange={(e) => {
-                      const branch = e.target.value;
-                      setCurrentBranch(branch);
-                      const newParams = new URLSearchParams(searchParams);
-                      newParams.set("branch", branch);
-                      setSearchParams(newParams);
-                    }}
-                    className="mobile-branch-selector"
-                  >
-                    {branches.map((branch) => (
-                      <option key={branch} value={branch}>
-                        {branch}
-                      </option>
-                    ))}
-                  </select>
-                )}
-              </div>
-
-              <div className="mobile-workspace-content">
-                {mobileTab === "files" && selectedRepoId && (
-                  <FileBrowser
-                    projectId={projectId!}
-                    repoId={selectedRepoId}
-                    gitStatus={gitStatus}
-                  />
-                )}
-                {mobileTab === "editor" && selectedRepoId && (
-                  <FileEditor projectId={projectId!} repoId={selectedRepoId} />
-                )}
-                {mobileTab === "git" && selectedRepoId && gitStatus && (
-                  <div className="mobile-git-view">
-                    <CommitPanel
-                      projectId={projectId!}
-                      repoId={selectedRepoId}
-                      modified={gitStatus.modified}
-                      added={gitStatus.added}
-                      deleted={gitStatus.deleted}
-                      untracked={gitStatus.untracked}
-                      onCommit={() => {
-                        void loadGitStatus();
-                        window.dispatchEvent(new CustomEvent("refresh-file-tree"));
-                      }}
-                    />
-                  </div>
-                )}
-                {mobileTab === "terminal" && selectedRepoId && (
-                  <InstanceList
-                    projectId={projectId!}
-                    repoId={selectedRepoId}
-                    projectName={project?.name}
-                    repoName={repositories.find((r) => r.id === selectedRepoId)?.name}
-                    toolTypes={toolTypes}
-                  />
-                )}
-              </div>
-
-              <div className="mobile-workspace-tabs">
-                <button
-                  className={`mobile-workspace-tab ${mobileTab === "files" ? "active" : ""}`}
-                  onClick={() => setMobileTab("files")}
-                  type="button"
-                >
-                  <Icon name="folder" size="sm" />
-                  <span>Files</span>
-                </button>
-                <button
-                  className={`mobile-workspace-tab ${mobileTab === "editor" ? "active" : ""}`}
-                  onClick={() => setMobileTab("editor")}
-                  type="button"
-                >
-                  <Icon name="edit" size="sm" />
-                  <span>Editor</span>
-                </button>
-                <button
-                  className={`mobile-workspace-tab ${mobileTab === "git" ? "active" : ""}`}
-                  onClick={() => setMobileTab("git")}
-                  type="button"
-                >
-                  <Icon name="branch" size="sm" />
-                  <span>Git</span>
-                </button>
-                <button
-                  className={`mobile-workspace-tab ${mobileTab === "terminal" ? "active" : ""}`}
-                  onClick={() => setMobileTab("terminal")}
-                  type="button"
-                >
-                  <Icon name="terminal" size="sm" />
-                  <span>Terminal</span>
-                </button>
-              </div>
-            </div>
-          ) : (
-            // Desktop Layout
-            <>
-              {selectedRepoId && (
-                <GitToolbar
-                  projectId={projectId!}
-                  repoId={selectedRepoId}
-                  currentBranch={currentBranch}
-                  branches={branches}
-                  hasRemote={Boolean(selectedRepo?.remote_url)}
-                  isMirror={Boolean(selectedRepo?.is_mirror)}
-                  onBranchChange={(branch) => {
-                    setCurrentBranch(branch);
-                    const newParams = new URLSearchParams(searchParams);
-                    newParams.set("branch", branch);
-                    setSearchParams(newParams);
-                  }}
-                  onRefresh={() => {
-                    void loadBranches();
-                    void loadGitStatus();
-                    window.dispatchEvent(new CustomEvent("refresh-file-tree"));
-                  }}
-                />
-              )}
-              <div className="workspace-layout">
-                <aside className="workspace-sidebar">
-                  <div className="sidebar-section">
-                    <label className="form-field">
-                      Repository
-                      <select
-                        value={selectedRepoId || ""}
-                        onChange={(e) => handleRepoChange(e.target.value)}
-                      >
-                        {repositories.map((repo) => (
-                          <option key={repo.id} value={repo.id}>
-                            {repo.name}
-                          </option>
-                        ))}
-                      </select>
-                    </label>
-                  </div>
-
-                  {selectedRepoId && (
-                    <>
-                      <FileBrowser
-                        projectId={projectId!}
-                        repoId={selectedRepoId}
-                        gitStatus={gitStatus}
-                      />
-                      {gitStatus && (
-                        <CommitPanel
-                          projectId={projectId!}
-                          repoId={selectedRepoId}
-                          modified={gitStatus.modified}
-                          added={gitStatus.added}
-                          deleted={gitStatus.deleted}
-                          untracked={gitStatus.untracked}
-                          onCommit={() => {
-                            void loadGitStatus();
-                            window.dispatchEvent(new CustomEvent("refresh-file-tree"));
-                          }}
-                        />
-                      )}
-                      <InstanceList
-                        projectId={projectId!}
-                        repoId={selectedRepoId}
-                        projectName={project?.name}
-                        repoName={repositories.find((r) => r.id === selectedRepoId)?.name}
-                        toolTypes={toolTypes}
-                      />
-                    </>
-                  )}
-                </aside>
-
-                <main className="workspace-main">
-                  {selectedRepoId && (
-                    <FileEditor projectId={projectId!} repoId={selectedRepoId} />
-                  )}
-                </main>
-              </div>
-            </>
-          )}
-        </>
-      )}
-    </section>
-  );
-};
-
-// File Browser Component
-const FileBrowser = ({
-  projectId,
-  repoId,
-  gitStatus,
-}: {
-  projectId: string;
-  repoId: string;
-  gitStatus: GitStatus | null;
-}) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [entries, setEntries] = useState<FileTreeEntry[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const branch = searchParams.get("branch") || "main";
-  const path = searchParams.get("path") || "";
-
-  const loadFiles = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const response = await apiClient.get(
-        `/projects/${projectId}/repositories/${repoId}/files`,
-        {
-          params: {
-            branch,
-            path,
-          },
-        }
-      );
-      setEntries(response.data.entries || []);
-    } catch {
-      setError("Failed to load files");
-    } finally {
-      setLoading(false);
-    }
-  }, [projectId, repoId, branch, path]);
-
-  useEffect(() => {
-    void loadFiles();
-  }, [loadFiles]);
-
-  // Listen for refresh events
-  useEffect(() => {
-    const handleRefresh = () => void loadFiles();
-    window.addEventListener("refresh-file-tree", handleRefresh);
-    return () => window.removeEventListener("refresh-file-tree", handleRefresh);
-  }, [loadFiles]);
-
-  const handleEntryClick = (entry: FileTreeEntry) => {
-    if (entry.type === "directory") {
-      const newParams = new URLSearchParams(searchParams);
-      newParams.set("path", entry.path);
-      setSearchParams(newParams);
-    } else {
-      const newParams = new URLSearchParams(searchParams);
-      newParams.set("file", entry.path);
-      setSearchParams(newParams);
-    }
-  };
-
-  const navigateUp = () => {
-    if (!path) return;
-    const parentPath = path.split("/").slice(0, -1).join("/");
-    const newParams = new URLSearchParams(searchParams);
-    if (parentPath) {
-      newParams.set("path", parentPath);
-    } else {
-      newParams.delete("path");
-    }
-    setSearchParams(newParams);
-  };
-
-  const getFileStatus = (filePath: string): string | null => {
-    if (!gitStatus) return null;
-    if (gitStatus.modified.includes(filePath)) return "modified";
-    if (gitStatus.added.includes(filePath)) return "added";
-    if (gitStatus.deleted.includes(filePath)) return "deleted";
-    if (gitStatus.untracked.includes(filePath)) return "untracked";
-    return null;
-  };
-
-  if (loading) return <p className="muted">Loading files...</p>;
-  if (error) return <p className="error-text">{error}</p>;
-
-  return (
-    <div className="file-tree">
-      {path && (
-        <button className="tree-entry tree-up" onClick={navigateUp} type="button">
-          <Icon name="folder" size="sm" /> ..
-        </button>
-      )}
-      {entries.length === 0 && (
-        <EmptyState message="No files in this repository yet." />
-      )}
-      {entries.map((entry) => {
-        const fileStatus = entry.type === "file" ? getFileStatus(entry.path) : null;
-        return (
-          <button
-            key={entry.path}
-            className={`tree-entry ${entry.type === "directory" ? "tree-directory" : "tree-file"} ${fileStatus || ""}`}
-            onClick={() => handleEntryClick(entry)}
-            type="button"
-          >
-            <Icon name={entry.type === "directory" ? "folder" : "file"} size="sm" /> {entry.name}
-            {fileStatus && (
-              <span className={`file-status-indicator ${fileStatus}`}>
-                {fileStatus === "modified" && "M"}
-                {fileStatus === "added" && "A"}
-                {fileStatus === "deleted" && "D"}
-                {fileStatus === "untracked" && "?"}
-              </span>
-            )}
-          </button>
-        );
-      })}
-    </div>
-  );
+			{status === "ready" && repositories.length > 0 && (
+				<WorkspaceLayout
+					projectId={projectId!}
+					project={project}
+					isMobile={isMobile}
+					mobileTab={mobileTab}
+					selectedRepoId={selectedRepoId}
+					selectedRepo={selectedRepo}
+					branches={branches}
+					currentBranch={currentBranch}
+					gitStatus={gitStatus}
+					toolTypes={toolTypes}
+					repositories={repositories}
+					onMobileTabChange={setMobileTab}
+					onRepoChange={handleRepoChange}
+					onBranchChange={handleBranchChange}
+					onRefresh={() => {
+						void loadBranches();
+						void loadGitStatus();
+						window.dispatchEvent(new CustomEvent("refresh-file-tree"));
+					}}
+				/>
+			)}
+		</section>
+	);
 };