feat: complete reorganize-long-files cleanup

- Extract tool instance lifecycle endpoints (start/stop/restart/delete) from
  api/tool/tool_instances.py into new api/tool/tool_lifecycle.py.
- Register tool_lifecycle_router in main.py and api/tool/__init__.py.
- Extract inline WorkspaceDetailPage components into
  components/features/workspace/: detail header, tab bars, file/git/tools/settings
  panels. Slim page from ~446 to ~62 lines.
- Update OpenSpec reorganize-long-files tasks to reflect completed work and
  current source state; mark change completed.
- Regenerate project maps.

Quality gates: python3 -m py_compile (backend clean), npm run typecheck,
npm run lint, npm test -- --run (87 passed), pytest workspace integration
and unit tests (27 passed, 1 skipped).

apps/web/src/components/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: apps/web/src/components
 
 ## role
-Provides reusable, foundational React UI components for layout, authentication, data display, icons, code editing, and notifications across the web application.
+Provides shared, reusable React UI components for the web application including layout shell, navigation, authentication guards, data display states, icons, code editing, syntax highlighting, and toast notifications.
 ## parent
 index: apps/web/src/.pi-map.index.md
 map: apps/web/src/.pi-map.md

apps/web/src/components/.pi-map.md

@@ -4,7 +4,7 @@ dir: apps/web/src/components
 index: apps/web/src/components/.pi-map.index.md
 
 ## role
-Provides reusable, foundational React UI components for layout, authentication, data display, icons, code editing, and notifications across the web application.
+Provides shared, reusable React UI components for the web application including layout shell, navigation, authentication guards, data display states, icons, code editing, syntax highlighting, and toast notifications.
 ## files
 - app-shell.tsx | Renders the main application shell layout with navigation, session management, and responsive mobile/desktop views for a React Router-based app. | exp: AppShell | dep: react-router-dom, ../api/sessions, ../hooks/use-theme, ../state/auth, ../state/sessions, ../hooks/use-mobile-viewport, ../state/events, ../state/toast, ../state/notifications, ../state/session-operations, ./features/notification/event-toast-bridge, ./features/notification/notification-center, ./features/session/session-progress-panel, ./icon, ./features/mobile/mobile-nav, ./features/tool/start-tool-fab, ../utils/icons
 - code-editor.tsx | A React component that renders a syntax-highlighted code editor with line numbers using react-simple-code-editor. | exp: CodeEditor | dep: react, react-simple-code-editor, ../utils/language
@@ -16,7 +16,7 @@ Provides reusable, foundational React UI components for layout, authentication,
 - toast-rules.test.ts | Unit tests for mapping instance events to toast notification categories and severities | dep: vitest, ./toast-rules, ../types/events
 - toast-rules.ts | Maps instance events to toast notifications with deduplication logic to prevent spam | exp: func:mapEventToCategory(event: InstanceEventPayload) → string, call:event.event.startsWith, func:mapEventToSeverity(event: InstanceEventPayload) → "info" | "warning" | "error" | "success", func:handleEventToast(event: InstanceEventPayload) → void, call:shouldShowToast, call:toast.info, call:toast.success, call:toast.warning, call:toast.error, func:clearToastDedup() → void, call:lastToastTime.clear | dep: ../state/toast, ../types/events, toast state module, InstanceEventPayload type
 ## arch
-Modular component architecture with separation of concerns—each component handles a single responsibility, with dedicated test files alongside implementation, and higher-level components (app-shell, protected-route) composing lower-level primitives (icon, data-states, toast-rules).
+Component-based architecture with clear separation of concerns: layout/navigation (app-shell), authentication (protected-route), data presentation (data-states, syntax-highlighter, code-editor), utilities (icon, toast-rules), and co-located test files following a feature-organized structure with semantic naming conventions.
 ## tags
 toast, state, react, icon, code, event, editor, protected
 ## symbols

apps/web/src/components/features/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: apps/web/src/components/features
 
 ## role
-Contains reusable React components that implement specific user-facing functionality and business logic features across the web application.
+Contains reusable UI components organized by feature domains for the web application.
 ## parent
 index: apps/web/src/components/.pi-map.index.md
 map: apps/web/src/components/.pi-map.md

apps/web/src/components/features/.pi-map.md

@@ -4,10 +4,10 @@ dir: apps/web/src/components/features
 index: apps/web/src/components/features/.pi-map.index.md
 
 ## role
-Contains reusable React components that implement specific user-facing functionality and business logic features across the web application.
+Contains reusable UI components organized by feature domains for the web application.
 ## files
 ## arch
-Feature-based component organization with domain-specific grouping, likely using composition patterns and co-located feature logic (hooks, utils, sub-components) following a modular frontend architecture.
+Feature-based colocation pattern where components are grouped by business domain rather than technical type, enabling scalable modular development with clear separation of concerns.
 ## tags
 -
 ## symbols

apps/web/src/components/features/project/ProjectCard.test.tsx

@@ -4,114 +4,114 @@ import { MemoryRouter } from "react-router-dom";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 afterEach(() => {
-  cleanup();
+	cleanup();
 });
 
 import { ProjectCard } from "./ProjectCard";
 import type { ProjectWithRepos } from "../../../types";
 
 const mockProject: ProjectWithRepos = {
-  id: "proj-1",
-  name: "Alpha Project",
-  description: "First project",
-  owner_id: "user-1",
-  default_ssh_key_id: null,
-  created_at: "2026-06-01T00:00:00Z",
-  repositories: [
-    {
-      id: "repo-1",
-      name: "my-repo",
-      remote_url: "https://example.com/repo.git",
-      workspaces: [
-        {
-          id: "ws-1",
-          name: "dev",
-          branch: "main",
-          status: "ready",
-          instance_count: 2,
-        },
-      ],
-    },
-  ],
+	id: "proj-1",
+	name: "Alpha Project",
+	description: "First project",
+	owner_id: "user-1",
+	default_ssh_key_id: null,
+	created_at: "2026-06-01T00:00:00Z",
+	repositories: [
+		{
+			id: "repo-1",
+			name: "my-repo",
+			remote_url: "https://example.com/repo.git",
+			workspaces: [
+				{
+					id: "ws-1",
+					name: "dev",
+					branch: "main",
+					status: "ready",
+					instance_count: 2,
+				},
+			],
+		},
+	],
 };
 
 describe("ProjectCard", () => {
-  it("renders project name and repository", () => {
-    render(
-      <MemoryRouter>
-        <ProjectCard
-          project={mockProject}
-          expanded={true}
-          deleteConfirm={false}
-          workspaceLoading={null}
-          showCreateForm={null}
-          onToggle={vi.fn()}
-          onEdit={vi.fn()}
-          onDelete={vi.fn()}
-          onConfirmDelete={vi.fn()}
-          onCancelDelete={vi.fn()}
-          onCreateWorkspace={vi.fn()}
-          onWorkspaceAction={vi.fn()}
-          onCancelCreate={vi.fn()}
-          onCreated={vi.fn()}
-        />
-      </MemoryRouter>
-    );
+	it("renders project name and repository", () => {
+		render(
+			<MemoryRouter>
+				<ProjectCard
+					project={mockProject}
+					expanded={true}
+					deleteConfirm={false}
+					workspaceLoading={null}
+					showCreateForm={null}
+					onToggle={vi.fn()}
+					onEdit={vi.fn()}
+					onDelete={vi.fn()}
+					onConfirmDelete={vi.fn()}
+					onCancelDelete={vi.fn()}
+					onCreateWorkspace={vi.fn()}
+					onWorkspaceAction={vi.fn()}
+					onCancelCreate={vi.fn()}
+					onCreated={vi.fn()}
+				/>
+			</MemoryRouter>,
+		);
 
-    expect(screen.getByText("Alpha Project")).toBeInTheDocument();
-    expect(screen.getByText("my-repo")).toBeInTheDocument();
-    expect(screen.getByText("dev")).toBeInTheDocument();
-  });
+		expect(screen.getByText("Alpha Project")).toBeInTheDocument();
+		expect(screen.getByText("my-repo")).toBeInTheDocument();
+		expect(screen.getByText("dev")).toBeInTheDocument();
+	});
 
-  it("calls onCreateWorkspace when new workspace button is clicked", () => {
-    const onCreateWorkspace = vi.fn();
-    render(
-      <MemoryRouter>
-        <ProjectCard
-          project={mockProject}
-          expanded={true}
-          deleteConfirm={false}
-          workspaceLoading={null}
-          showCreateForm={null}
-          onToggle={vi.fn()}
-          onEdit={vi.fn()}
-          onDelete={vi.fn()}
-          onConfirmDelete={vi.fn()}
-          onCancelDelete={vi.fn()}
-          onCreateWorkspace={onCreateWorkspace}
-          onWorkspaceAction={vi.fn()}
-          onCancelCreate={vi.fn()}
-          onCreated={vi.fn()}
-        />
-      </MemoryRouter>
-    );
+	it("calls onCreateWorkspace when new workspace button is clicked", () => {
+		const onCreateWorkspace = vi.fn();
+		render(
+			<MemoryRouter>
+				<ProjectCard
+					project={mockProject}
+					expanded={true}
+					deleteConfirm={false}
+					workspaceLoading={null}
+					showCreateForm={null}
+					onToggle={vi.fn()}
+					onEdit={vi.fn()}
+					onDelete={vi.fn()}
+					onConfirmDelete={vi.fn()}
+					onCancelDelete={vi.fn()}
+					onCreateWorkspace={onCreateWorkspace}
+					onWorkspaceAction={vi.fn()}
+					onCancelCreate={vi.fn()}
+					onCreated={vi.fn()}
+				/>
+			</MemoryRouter>,
+		);
 
-    fireEvent.click(screen.getByRole("button", { name: /new workspace/i }));
-    expect(onCreateWorkspace).toHaveBeenCalledWith("repo-1");
-  });
+		fireEvent.click(screen.getByRole("button", { name: /new workspace/i }));
+		expect(onCreateWorkspace).toHaveBeenCalledWith("repo-1");
+	});
 
-  it("shows delete confirmation", () => {
-    render(
-      <MemoryRouter>
-        <ProjectCard
-          project={mockProject}
-          expanded={true}
-          deleteConfirm={true}
-          workspaceLoading={null}
-          showCreateForm={null}
-          onToggle={vi.fn()}
-          onEdit={vi.fn()}
-          onDelete={vi.fn()}
-          onConfirmDelete={vi.fn()}
-          onCancelDelete={vi.fn()}
-          onCreateWorkspace={vi.fn()}
-          onWorkspaceAction={vi.fn()}
-          onCancelCreate={vi.fn()}
-          onCreated={vi.fn()}
-        />
-      </MemoryRouter>
-    );
+	it("shows delete confirmation", () => {
+		render(
+			<MemoryRouter>
+				<ProjectCard
+					project={mockProject}
+					expanded={true}
+					deleteConfirm={true}
+					workspaceLoading={null}
+					showCreateForm={null}
+					onToggle={vi.fn()}
+					onEdit={vi.fn()}
+					onDelete={vi.fn()}
+					onConfirmDelete={vi.fn()}
+					onCancelDelete={vi.fn()}
+					onCreateWorkspace={vi.fn()}
+					onWorkspaceAction={vi.fn()}
+					onCancelCreate={vi.fn()}
+					onCreated={vi.fn()}
+				/>
+			</MemoryRouter>,
+		);
 
-    expect(screen.getByText(/are you sure/i)).toBeInTheDocument();
-  });
+		expect(screen.getByText(/are you sure/i)).toBeInTheDocument();
+	});
 });

apps/web/src/components/features/workspace/.pi-map.index.md

@@ -2,24 +2,28 @@
 dir: apps/web/src/components/features/workspace
 
 ## role
-Provides the workspace UI shell and container components that orchestrate the repository browsing, editing, and tool execution environment for the web application.
+Provides UI components for workspace management, navigation, and detail views in the web application.
 ## parent
 index: apps/web/src/components/features/.pi-map.index.md
 map: apps/web/src/components/features/.pi-map.md
 ## children
 -
 ## files
-- FileBrowser.tsx
-- WorkspaceLayout.tsx
 - workspace-card.tsx
 - workspace-create-form.tsx
+- workspace-detail-header.tsx
+- workspace-file-panel.tsx
+- workspace-git-panel.tsx
 - workspace-header.tsx
 - workspace-instance-chips.tsx
+- workspace-settings-panel.tsx
+- workspace-tab-bar.tsx
+- workspace-tools-panel.tsx
 ## links
 index: apps/web/src/components/features/workspace/.pi-map.index.md
 map: apps/web/src/components/features/workspace/.pi-map.md
 ## workflows
 - change workspace behavior
-  read: FileBrowser.tsx, WorkspaceLayout.tsx, workspace-card.tsx
+  read: workspace-card.tsx, workspace-create-form.tsx, workspace-detail-header.tsx
 ## dirty
 -

apps/web/src/components/features/workspace/.pi-map.md

@@ -4,29 +4,33 @@ dir: apps/web/src/components/features/workspace
 index: apps/web/src/components/features/workspace/.pi-map.index.md
 
 ## role
-Provides the workspace UI shell and container components that orchestrate the repository browsing, editing, and tool execution environment for the web application.
+Provides UI components for workspace management, navigation, and detail views in the web application.
 ## files
-- FileBrowser.tsx | A React component that displays a browsable file tree for a git repository with directory navigation, file status indicators, and URL-based state management. | exp: FileBrowser | dep: react, react-router-dom, ../../../api/client, ../../data-states, ../../icon, ../../../api/git-repositories, apiClient, EmptyState, Icon
-- WorkspaceLayout.tsx | Renders a responsive workspace layout that switches between mobile tab-based navigation and desktop sidebar/main panel layout for repository file browsing, editing, git operations, and terminal tools. | exp: WorkspaceLayout | dep: ../../icon, ./FileBrowser, ../git/file-editor, ../git/commit-panel, ../git/git-toolbar, ../tool/instance-list, ../../../api/git-repositories, ../../../api/tool-types, ../../../hooks/use-repo-workspace, Icon, FileBrowser, FileEditor, CommitPanel, GitToolbar, InstanceList, GitRepository, GitStatus, ToolType, Project
 - workspace-card.tsx | React card component that displays workspace information with status, metadata, and action buttons | exp: WorkspaceCardProps, func:WorkspaceCard({ workspace, loading = false, onStartTool, onSync, onDelete, }: WorkspaceCardProps), call:onStartTool, call:onSync, call:onDelete | dep: react-router-dom, ../../icon, ./workspace-instance-chips, ../../../types/workspace
 - workspace-create-form.tsx | React form component for creating workspaces with cascading project/repository/branch selectors and support for both contextual and standalone modes | exp: WorkspaceCreateFormProps, func:WorkspaceCreateForm({ onSubmit, onCancel, defaultProjectId, defaultRepoId, }: WorkspaceCreateFormProps), call:Boolean, call:useState, call:useGitRepo, call:useEffect, call:git.branches.includes, call:setSelectedBranch, call:setIsNewBranch, call:useCallback, call:listProjects, call:setProjects, call:setSelectedProject, call:setError, call:setFetchingProjects, call:loadProjects, call:setRepos, call:setSelectedRepo, call:listRepositories, call:loadRepos, call:setNewBranchName, call:e.preventDefault, call:name.trim, call:newBranchName.trim, call:setSubmitting, call:createWorkspaceTopLevel, call:onSubmit, call:projects.map, call:repos.map, call:setName, call:handleBranchChange, call:git.branches.map | dep: react, ../../icon, ../../../api/projects, ../../../api/git-repositories, ../../../api/workspaces, ../../../hooks/use-git-repo, ../../../types, icon, api/projects, api/git-repositories, api/workspaces, hooks/use-git-repo, types
+- workspace-detail-header.tsx | Renders a header component for a workspace detail page displaying breadcrumb navigation and branch information. | exp: WorkspaceDetailHeaderProps, func:WorkspaceDetailHeader({ workspace }: WorkspaceDetailHeaderProps) | dep: ../../icon, icon
+- workspace-file-panel.tsx | Renders a file browser and editor panel with Git integration for a workspace detail page. | exp: func:WorkspaceFilePanel({ workspaceId }: WorkspaceFilePanelProps), call:useWorkspaceFiles, call:useWorkspaceGit, call:useState, call:setSelectedPath, call:setIsEditing, call:setEditContent, call:navigateTo, call:loadFile, call:currentPath.split("/").slice(0, -1).join, call:saveFile, call:setCommitMessage, call:commit, call:entries.map, call:handleSelect | dep: react, ../../icon, ../../../hooks/use-workspace-files, ../../../hooks/use-workspace-git, ../../../api/workspace-files, icon, use-workspace-files, use-workspace-git, workspace-files API types
+- workspace-git-panel.tsx | Renders a Git panel for a workspace detail page that displays branch selection and commit history. | exp: func:WorkspaceGitPanel({ workspaceId }: WorkspaceGitPanelProps), call:useWorkspaceGit, call:checkout, call:branches.map, call:history.map, call:commit.hash.slice | dep: ../../../hooks/use-workspace-git, React, useWorkspaceGit hook
 - workspace-header.tsx | Renders a workspace header component displaying project info with navigation links to history and settings pages. | exp: WorkspaceHeader | dep: react-router-dom, ../../icon, icon
 - workspace-instance-chips.tsx | Displays running tool instances for a workspace as clickable status chips with external links. | exp: func:WorkspaceInstanceChips({ workspaceId, }: WorkspaceInstanceChipsProps), call:useState, call:useEffect, call:listWorkspaceInstances, call:setInstances, call:setLoading, call:load, call:instances.map, call:e.stopPropagation | dep: react, ../../../api/workspace-instances, ../../../api/sessions
+- workspace-settings-panel.tsx | Displays a read-only settings panel showing workspace metadata on a workspace detail page. | exp: func:WorkspaceSettingsPanel({ workspace }: WorkspaceSettingsPanelProps) | dep: ../../../types/workspace, React, types/workspace
+- workspace-tab-bar.tsx | Renders a tab bar component for workspace navigation with desktop and mobile variants. | exp: WorkspaceTab, func:WorkspaceTabBar({ active, onChange }: WorkspaceTabBarProps), call:TABS.map, call:onChange, func:WorkspaceMobileTabBar({ active, onChange }: WorkspaceTabBarProps), call:TABS.map, call:onChange | dep: ../../icon, icon
+- workspace-tools-panel.tsx | Displays and manages running tool instances for a workspace with ability to start new tools via modal | exp: func:WorkspaceToolsPanel({ workspace }: WorkspaceToolsPanelProps), call:useWorkspaceInstances, call:useState, call:setShowModal, call:instances.map, call:e.stopPropagation, call:refresh | dep: react, ../../icon, ../tool/tool-starter, ../../../hooks/use-workspace-instances, ../../../types/workspace, icon, tool-starter, use-workspace-instances
 ## arch
-Compound component architecture with responsive layout switching (mobile/desktop), URL-driven state management for file navigation, and feature-based composition combining card/list views, forms, headers, and dynamic tool instance indicators.
+Feature-based component organization with page-specific composite components (header/panel/tab-bar) and atomic display components, following a compound component pattern for workspace detail page layout.
 ## tags
-workspace, call:set, git, api, call:use, branch, projects, react
+workspace, call:set, call:use, git, panel, icon, branch, call:on
 ## symbols
 - WorkspaceCard
 - WorkspaceCreateForm
+- WorkspaceDetailHeader
+- WorkspaceFilePanel
+- WorkspaceGitPanel
 - WorkspaceInstanceChips
-- FileBrowser
-- WorkspaceLayout
-- WorkspaceCardProps
-- call:onStartTool
-- call:onSync
+- WorkspaceSettingsPanel
+- WorkspaceTabBar
 ## workflows
 - change workspace behavior
-  read: FileBrowser.tsx, WorkspaceLayout.tsx, workspace-card.tsx
+  read: workspace-card.tsx, workspace-create-form.tsx, workspace-detail-header.tsx
 ## dirty
 -

apps/web/src/components/features/workspace/workspace-detail-header.tsx

@@ -0,0 +1,31 @@
+/** Header for the workspace detail page. */
+
+import { Icon } from "../../icon";
+
+export interface WorkspaceDetailHeaderProps {
+	workspace: {
+		name: string;
+		repo_name: string;
+		project_name: string;
+		branch: string;
+	};
+}
+
+export function WorkspaceDetailHeader({ workspace }: WorkspaceDetailHeaderProps) {
+	return (
+		<header className="workspace-header">
+			<div className="workspace-breadcrumb">
+				<span>{workspace.project_name}</span>
+				<span className="sep">/</span>
+				<span>{workspace.repo_name}</span>
+				<span className="sep">/</span>
+				<strong>{workspace.name}</strong>
+			</div>
+			<div className="workspace-actions">
+				<span className="branch-badge">
+					<Icon name="branch" size="sm" /> {workspace.branch}
+				</span>
+			</div>
+		</header>
+	);
+}

apps/web/src/components/features/workspace/workspace-file-panel.tsx

@@ -0,0 +1,181 @@
+/** Files tab for the workspace detail page. */
+
+import { useState } from "react";
+import { Icon } from "../../icon";
+import { useWorkspaceFiles } from "../../../hooks/use-workspace-files";
+import { useWorkspaceGit } from "../../../hooks/use-workspace-git";
+import type { FileEntry } from "../../../api/workspace-files";
+
+interface WorkspaceFilePanelProps {
+	workspaceId: string;
+}
+
+export function WorkspaceFilePanel({ workspaceId }: WorkspaceFilePanelProps) {
+	const {
+		entries,
+		content,
+		currentPath,
+		loadFile,
+		saveFile,
+		loading,
+		error,
+		navigateTo,
+	} = useWorkspaceFiles(workspaceId);
+	const { status, commit, push, pull, fetch } = useWorkspaceGit(workspaceId);
+	const [selectedPath, setSelectedPath] = useState<string | null>(null);
+	const [editContent, setEditContent] = useState<string | null>(null);
+	const [isEditing, setIsEditing] = useState(false);
+	const [commitMessage, setCommitMessage] = useState("");
+
+	const handleSelect = (entry: FileEntry) => {
+		if (entry.type === "directory") {
+			setSelectedPath(null);
+			setIsEditing(false);
+			setEditContent(null);
+			navigateTo(entry.path);
+			return;
+		}
+		setSelectedPath(entry.path);
+		setIsEditing(false);
+		setEditContent(null);
+		loadFile(entry.path);
+	};
+
+	const navigateUp = () => {
+		if (!currentPath) return;
+		const parentPath = currentPath.split("/").slice(0, -1).join("/");
+		navigateTo(parentPath);
+		setSelectedPath(null);
+		setIsEditing(false);
+		setEditContent(null);
+	};
+
+	const handleEdit = () => {
+		if (content !== null) {
+			setEditContent(content);
+			setIsEditing(true);
+		}
+	};
+
+	const handleSave = async () => {
+		if (selectedPath && editContent !== null) {
+			await saveFile(selectedPath, editContent, commitMessage || undefined);
+			setIsEditing(false);
+			setCommitMessage("");
+		}
+	};
+
+	return (
+		<div className="files-tab">
+			{status && (
+				<div className="git-toolbar">
+					<div className="git-toolbar-status">
+						{status.modified.length > 0 && (
+							<span className="status-modified">
+								M {status.modified.length}
+							</span>
+						)}
+						{status.added.length > 0 && (
+							<span className="status-added">A {status.added.length}</span>
+						)}
+						{status.deleted.length > 0 && (
+							<span className="status-deleted">D {status.deleted.length}</span>
+						)}
+						{status.untracked.length > 0 && (
+							<span className="status-untracked">
+								? {status.untracked.length}
+							</span>
+						)}
+					</div>
+					<div className="git-toolbar-actions">
+						<input
+							type="text"
+							value={commitMessage}
+							onChange={(e) => setCommitMessage(e.target.value)}
+							placeholder="Commit message"
+						/>
+						<button
+							onClick={() => commit(commitMessage)}
+							disabled={!commitMessage}
+							type="button"
+						>
+							Commit
+						</button>
+						<button onClick={push} type="button">Push</button>
+						<button onClick={pull} type="button">Pull</button>
+						<button onClick={fetch} type="button">Fetch</button>
+					</div>
+				</div>
+			)}
+			<div className="files-split">
+				<div className="file-tree">
+					{currentPath && (
+						<button
+							className="tree-entry tree-up"
+							onClick={navigateUp}
+							type="button"
+						>
+							<Icon name="folder" size="sm" /> ..
+						</button>
+					)}
+					{loading && <p className="muted">Loading...</p>}
+					{error && <p className="error-text">{error}</p>}
+					{entries.map((entry) => (
+						<button
+							key={entry.path}
+							className={`tree-entry ${entry.type} ${selectedPath === entry.path ? "selected" : ""}`}
+							onClick={() => handleSelect(entry)}
+							type="button"
+						>
+							<Icon
+								name={entry.type === "directory" ? "folder" : "file"}
+								size="sm"
+							/>
+							{entry.name}
+						</button>
+					))}
+				</div>
+				<div className="file-viewer">
+					{selectedPath ? (
+						<>
+							<div className="file-viewer-header">
+								<span>{selectedPath}</span>
+								{!isEditing && (
+									<button onClick={handleEdit} type="button">
+										Edit
+									</button>
+								)}
+							</div>
+							{isEditing ? (
+								<>
+									<textarea
+										className="file-editor"
+										value={editContent || ""}
+										onChange={(e) => setEditContent(e.target.value)}
+									/>
+									<div className="file-editor-actions">
+										<button
+											onClick={() => setIsEditing(false)}
+											type="button"
+										>
+											Cancel
+										</button>
+										<button onClick={handleSave} type="button">
+											Save
+										</button>
+									</div>
+								</>
+							) : (
+								<pre className="file-content">
+									{content || "Loading..."}
+								</pre>
+							)}
+						</>
+					) : (
+						<p className="muted">Select a file to view</p>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

apps/web/src/components/features/workspace/workspace-git-panel.tsx

@@ -0,0 +1,41 @@
+/** Git tab for the workspace detail page. */
+
+import { useWorkspaceGit } from "../../../hooks/use-workspace-git";
+
+interface WorkspaceGitPanelProps {
+	workspaceId: string;
+}
+
+export function WorkspaceGitPanel({ workspaceId }: WorkspaceGitPanelProps) {
+	const { history, branches, currentBranch, checkout, loading, error } =
+		useWorkspaceGit(workspaceId);
+
+	return (
+		<div className="git-tab">
+			<div className="git-tab-header">
+				<select
+					value={currentBranch}
+					onChange={(e) => checkout(e.target.value)}
+				>
+					{branches.map((b) => (
+						<option key={b} value={b}>
+							{b}
+						</option>
+					))}
+				</select>
+			</div>
+			{loading && <p className="muted">Loading history...</p>}
+			{error && <p className="error-text">{error}</p>}
+			<div className="commit-history">
+				{history.map((commit) => (
+					<div key={commit.hash} className="commit-row">
+						<span className="commit-hash">{commit.hash.slice(0, 7)}</span>
+						<span className="commit-message">{commit.message}</span>
+						<span className="commit-author">{commit.author}</span>
+						<span className="commit-date">{commit.date}</span>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

apps/web/src/components/features/workspace/workspace-settings-panel.tsx

@@ -0,0 +1,39 @@
+/** Settings tab for the workspace detail page. */
+
+import type { Workspace } from "../../../types/workspace";
+
+interface WorkspaceSettingsPanelProps {
+	workspace: Workspace;
+}
+
+export function WorkspaceSettingsPanel({ workspace }: WorkspaceSettingsPanelProps) {
+	return (
+		<div className="settings-tab">
+			<div className="settings-section">
+				<h3>Workspace Info</h3>
+				<div className="form-group">
+					<label>Name</label>
+					<input type="text" value={workspace.name} readOnly />
+				</div>
+				<div className="form-group">
+					<label>Branch</label>
+					<input type="text" value={workspace.branch} readOnly />
+				</div>
+				<div className="form-group">
+					<label>Path</label>
+					<input type="text" value={workspace.path} readOnly />
+				</div>
+				<div className="form-group">
+					<label>Status</label>
+					<span className={`status-badge ${workspace.status}`}>
+						{workspace.status}
+					</span>
+				</div>
+				<div className="form-group">
+					<label>Created</label>
+					<span>{workspace.created_at}</span>
+				</div>
+			</div>
+		</div>
+	);
+}

apps/web/src/components/features/workspace/workspace-tab-bar.tsx

@@ -0,0 +1,68 @@
+/** Tab bar for the workspace detail page. */
+
+import { Icon } from "../../icon";
+
+export type WorkspaceTab = "files" | "git" | "tools" | "settings";
+
+interface Tab {
+	id: WorkspaceTab;
+	label: string;
+	icon: string;
+}
+
+const TABS: Tab[] = [
+	{ id: "files", label: "Files", icon: "folder" },
+	{ id: "git", label: "Git", icon: "branch" },
+	{ id: "tools", label: "Tools", icon: "terminal" },
+	{ id: "settings", label: "Settings", icon: "settings" },
+];
+
+interface WorkspaceTabBarProps {
+	active: WorkspaceTab;
+	onChange: (tab: WorkspaceTab) => void;
+}
+
+export function WorkspaceTabBar({ active, onChange }: WorkspaceTabBarProps) {
+	return (
+		<nav className="tab-bar" role="tablist">
+			{TABS.map((tab) => (
+				<button
+					key={tab.id}
+					className={`tab ${active === tab.id ? "active" : ""}`}
+					onClick={() => onChange(tab.id)}
+					role="tab"
+					aria-selected={active === tab.id}
+					type="button"
+				>
+					<Icon
+						name={tab.icon as "folder" | "branch" | "terminal" | "settings"}
+						size="sm"
+					/>
+					{tab.label}
+				</button>
+			))}
+		</nav>
+	);
+}
+
+export function WorkspaceMobileTabBar({ active, onChange }: WorkspaceTabBarProps) {
+	return (
+		<nav className="mobile-tab-bar" role="tablist">
+			{TABS.map((tab) => (
+				<button
+					key={tab.id}
+					className={`mobile-tab ${active === tab.id ? "active" : ""}`}
+					onClick={() => onChange(tab.id)}
+					role="tab"
+					aria-selected={active === tab.id}
+					type="button"
+				>
+					<Icon
+						name={tab.icon as "folder" | "branch" | "terminal" | "settings"}
+					/>
+					<span>{tab.label}</span>
+				</button>
+			))}
+		</nav>
+	);
+}

apps/web/src/components/features/workspace/workspace-tools-panel.tsx

@@ -0,0 +1,81 @@
+/** Tools tab for the workspace detail page. */
+
+import { useState } from "react";
+import { Icon } from "../../icon";
+import { ToolStarter } from "../tool/tool-starter";
+import { useWorkspaceInstances } from "../../../hooks/use-workspace-instances";
+import type { Workspace } from "../../../types/workspace";
+
+interface WorkspaceToolsPanelProps {
+	workspace: Workspace;
+}
+
+export function WorkspaceToolsPanel({ workspace }: WorkspaceToolsPanelProps) {
+	const { instances, loading, refresh } = useWorkspaceInstances(workspace.id);
+	const [showModal, setShowModal] = useState(false);
+
+	return (
+		<div className="tools-tab">
+			{loading && <p className="muted">Loading instances...</p>}
+			{instances.length === 0 ? (
+				<div className="empty-state-card">
+					<Icon name="terminal" size="lg" />
+					<h3>No tools running</h3>
+					<p>Start a tool to begin coding in this workspace</p>
+					<button
+						className="btn btn-primary"
+						onClick={() => setShowModal(true)}
+						type="button"
+					>
+						Start Tool
+					</button>
+				</div>
+			) : (
+				<>
+					<div className="instances-grid">
+						{instances.map((instance) => (
+							<div
+								key={instance.id}
+								className={`instance-card ${instance.status}`}
+							>
+								<h4>{instance.display_name}</h4>
+								<span className="status-badge">{instance.status}</span>
+								{instance.url && (
+									<a
+										href={instance.url}
+										target={`instance-${instance.id}`}
+										rel="noreferrer"
+									>
+										Open
+									</a>
+								)}
+							</div>
+						))}
+					</div>
+					<button
+						className="btn btn-primary"
+						onClick={() => setShowModal(true)}
+						type="button"
+					>
+						Start Another Tool
+					</button>
+				</>
+			)}
+			{showModal && (
+				<div className="modal-overlay" onClick={() => setShowModal(false)}>
+					<div className="modal-content" onClick={(e) => e.stopPropagation()}>
+						<h3>Start Tool</h3>
+						<ToolStarter
+							workspace={workspace}
+							onStarted={() => {
+								setShowModal(false);
+								void refresh();
+							}}
+							onCancel={() => setShowModal(false)}
+						/>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}