From 61072f4c07aef8b94bf02743f1ba832f9d9a4619 Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Fri, 5 Jun 2026 18:58:14 +0000
Subject: [PATCH] refactor: reorganize CSS and Tool Workshop page

- Extract styles.css into styles/ directory (tokens, global, utilities, syntax-highlight, pages)
- Extract ToolWorkshopPage into components:
  - ToolTypeListSidebar, ToolTypeEditorPanel, ToolWorkshopMobileView
  - use-tool-workshop hook for state management
- Slim ToolWorkshopPage from 1,269 to 110 lines

Quality gates: tsc --noEmit passes, npm run build passes
---
 .../tool-workshop/ToolTypeEditorPanel.tsx     |  373 +++
 .../tool-workshop/ToolTypeListSidebar.tsx     |  161 ++
 .../tool-workshop/ToolWorkshopMobileView.tsx  |  350 +++
 apps/web/src/hooks/use-tool-workshop.ts       |  370 +++
 apps/web/src/main.tsx                         |   29 +-
 apps/web/src/pages/ToolWorkshopPage.tsx       | 1311 +--------
 apps/web/src/styles/global.css                | 1206 ++++++++
 apps/web/src/styles/pages/git-history.css     |  257 ++
 apps/web/src/styles/pages/projects.css        |  132 +
 apps/web/src/styles/pages/repo-workspace.css  |  709 +++++
 apps/web/src/styles/pages/sessions.css        |   69 +
 apps/web/src/styles/pages/ssh-keys.css        |   25 +
 .../web/src/styles/pages/workspace-detail.css |  504 ++++
 apps/web/src/styles/syntax-highlight.css      |  195 ++
 apps/web/src/styles/tokens.css                |   92 +
 apps/web/src/styles/utilities.css             | 2541 +++++++++++++++++
 16 files changed, 7079 insertions(+), 1245 deletions(-)
 create mode 100644 apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx
 create mode 100644 apps/web/src/components/features/tool-workshop/ToolTypeListSidebar.tsx
 create mode 100644 apps/web/src/components/features/tool-workshop/ToolWorkshopMobileView.tsx
 create mode 100644 apps/web/src/hooks/use-tool-workshop.ts
 create mode 100644 apps/web/src/styles/global.css
 create mode 100644 apps/web/src/styles/pages/git-history.css
 create mode 100644 apps/web/src/styles/pages/projects.css
 create mode 100644 apps/web/src/styles/pages/repo-workspace.css
 create mode 100644 apps/web/src/styles/pages/sessions.css
 create mode 100644 apps/web/src/styles/pages/ssh-keys.css
 create mode 100644 apps/web/src/styles/pages/workspace-detail.css
 create mode 100644 apps/web/src/styles/syntax-highlight.css
 create mode 100644 apps/web/src/styles/tokens.css
 create mode 100644 apps/web/src/styles/utilities.css

diff --git a/apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx b/apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx
new file mode 100644
index 0000000..32dbcb9
--- /dev/null
+++ b/apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx
@@ -0,0 +1,373 @@
+import { Icon } from "../../icon";
+import { ManifestEditor } from "../tool/manifest-editor";
+import type { ToolType } from "../../../api/tool-types";
+import type { ToolDefinitionManifest } from "../../../api/tool-definitions";
+
+export interface ToolTypeFormState {
+	name: string;
+	display_name: string;
+	description: string;
+	category: string;
+	interface_type: "web" | "terminal";
+	requires_port: boolean;
+	default_port: string;
+	definition_type: "compose" | "dockerfile" | "manifest";
+	compose_template: string;
+	dockerfile_template: string;
+	readiness_command: string;
+	readiness_timeout: string;
+	readiness_interval: string;
+	required_variables: string;
+	startup_command: string;
+}
+
+interface ToolTypeEditorPanelProps {
+	isCreating: boolean;
+	selectedToolType: ToolType | null;
+	form: ToolTypeFormState;
+	manifestData: Record<string, unknown> | null;
+	manifestDefinitionId: string | null;
+	baseDefinitions: ToolDefinitionManifest[];
+	toolTypeError: string | null;
+	toolTypeDirty: boolean;
+	onFormChange: (changes: Partial<ToolTypeFormState>) => void;
+	onManifestChange: (manifest: Record<string, unknown> | null) => void;
+	onSubmit: (e: React.FormEvent) => void;
+	onReset: () => void;
+}
+
+export const ToolTypeEditorPanel = ({
+	isCreating,
+	selectedToolType,
+	form,
+	manifestData,
+	manifestDefinitionId,
+	baseDefinitions,
+	toolTypeError,
+	toolTypeDirty,
+	onFormChange,
+	onManifestChange,
+	onSubmit,
+	onReset,
+}: ToolTypeEditorPanelProps) => {
+	const hasSelection = isCreating || selectedToolType;
+
+	return (
+		<div style={{ flex: 1, overflow: "auto", padding: "1.5rem", minWidth: 0 }}>
+			{!hasSelection ? (
+				<div
+					style={{
+						textAlign: "center",
+						paddingTop: "4rem",
+						color: "var(--muted)",
+					}}
+				>
+					<div style={{ opacity: 0.3, marginBottom: "1rem" }}>
+						<Icon name="code" size="lg" />
+					</div>
+					<h3 style={{ margin: "0 0 0.5rem 0", fontWeight: 500 }}>
+						Select a tool type
+					</h3>
+					<p style={{ margin: 0 }}>
+						Choose a tool from the list to edit, or create a new one.
+					</p>
+				</div>
+			) : (
+				<div>
+					<div style={{ marginBottom: "1.5rem" }}>
+						<h1 style={{ margin: "0 0 0.5rem 0", fontSize: "1.5rem" }}>
+							{isCreating
+								? "Create Tool Type"
+								: selectedToolType?.display_name}
+						</h1>
+						{!isCreating && (
+							<p className="muted" style={{ margin: 0 }}>
+								{selectedToolType?.name} · {selectedToolType?.definition_type}{" "}
+								·{" "}
+								{selectedToolType?.interface_type === "web"
+									? `Port ${selectedToolType?.default_port}`
+									: "Terminal"}
+							</p>
+						)}
+					</div>
+
+					<form
+						onSubmit={onSubmit}
+						className="stack"
+						style={{ gap: "1rem", maxWidth: "800px" }}
+					>
+						<div className="form-group">
+							<label htmlFor="definition-type">Definition Type</label>
+							<select
+								id="definition-type"
+								value={form.definition_type}
+								onChange={(e) => {
+									onFormChange({
+										definition_type: e.target.value as
+											| "compose"
+											| "dockerfile"
+											| "manifest",
+									});
+								}}
+								className="form-input"
+								disabled={!isCreating}
+							>
+								<option value="compose">Docker Compose</option>
+								<option value="dockerfile">Dockerfile</option>
+								<option value="manifest">Manifest (Declarative)</option>
+							</select>
+						</div>
+
+						<div className="row" style={{ gap: "1rem" }}>
+							<div className="form-group" style={{ flex: 1 }}>
+								<label htmlFor="tool-type-name">Name *</label>
+								<input
+									id="tool-type-name"
+									type="text"
+									value={form.name}
+									onChange={(e) => {
+										onFormChange({ name: e.target.value });
+									}}
+									disabled={!isCreating}
+									placeholder="e.g., code-server"
+									className="form-input"
+									required
+								/>
+							</div>
+							<div className="form-group" style={{ flex: 1 }}>
+								<label htmlFor="tool-type-display-name">
+									Display Name *
+								</label>
+								<input
+									id="tool-type-display-name"
+									type="text"
+									value={form.display_name}
+									onChange={(e) => {
+										onFormChange({ display_name: e.target.value });
+									}}
+									placeholder="e.g., VS Code Server"
+									className="form-input"
+									required
+								/>
+							</div>
+						</div>
+
+						<div className="form-group">
+							<label htmlFor="tool-type-description">Description</label>
+							<input
+								id="tool-type-description"
+								type="text"
+								value={form.description}
+								onChange={(e) => {
+									onFormChange({ description: e.target.value });
+								}}
+								placeholder="Optional description"
+								className="form-input"
+							/>
+						</div>
+
+						<div className="row" style={{ gap: "1rem" }}>
+							<div className="form-group" style={{ flex: 1 }}>
+								<label htmlFor="tool-type-category">Category</label>
+								<input
+									id="tool-type-category"
+									type="text"
+									value={form.category}
+									onChange={(e) => {
+										onFormChange({ category: e.target.value });
+									}}
+									placeholder="e.g., editor, notebook, ai-assistant"
+									className="form-input"
+								/>
+							</div>
+							<div className="form-group" style={{ flex: 1 }}>
+								<label htmlFor="tool-type-interface">Interface Type</label>
+								<select
+									id="tool-type-interface"
+									value={form.interface_type}
+									onChange={(e) => {
+										const value = e.target.value as "web" | "terminal";
+										onFormChange({
+											interface_type: value,
+											requires_port: value === "web",
+											default_port:
+												value === "web" ? form.default_port : "",
+										});
+									}}
+									className="form-input"
+								>
+									<option value="web">Web</option>
+									<option value="terminal">Terminal</option>
+								</select>
+							</div>
+						</div>
+
+						{form.interface_type === "terminal" && (
+							<div className="form-group">
+								<label htmlFor="tool-type-startup-command">
+									Startup Command
+								</label>
+								<input
+									id="tool-type-startup-command"
+									type="text"
+									value={form.startup_command}
+									onChange={(e) => {
+										onFormChange({ startup_command: e.target.value });
+									}}
+									placeholder="e.g., cd /workspace && ls"
+									className="form-input"
+								/>
+								<small className="form-help">
+									Command to run before the interactive shell for each new
+									terminal session.
+								</small>
+							</div>
+						)}
+
+						{form.requires_port && (
+							<div className="form-group">
+								<label htmlFor="tool-type-default-port">
+									Default Port *
+								</label>
+								<input
+									id="tool-type-default-port"
+									type="number"
+									value={form.default_port}
+									onChange={(e) => {
+										onFormChange({ default_port: e.target.value });
+									}}
+									placeholder="e.g., 8443"
+									className="form-input"
+									required
+								/>
+							</div>
+						)}
+
+						{form.definition_type === "manifest" ? (
+							<ManifestEditor
+								manifest={manifestData}
+								baseDefinitions={baseDefinitions}
+								onChange={(m) => {
+									onManifestChange(m);
+								}}
+								definitionId={manifestDefinitionId}
+							/>
+						) : (
+							<div className="form-group">
+								<label htmlFor="tool-type-template">
+									{form.definition_type === "compose"
+										? "Compose Template"
+										: "Dockerfile"}{" "}
+									*
+								</label>
+								<textarea
+									id="tool-type-template"
+									value={
+										form.definition_type === "compose"
+											? form.compose_template
+											: form.dockerfile_template
+									}
+									onChange={(e) => {
+										if (form.definition_type === "compose") {
+											onFormChange({ compose_template: e.target.value });
+										} else {
+											onFormChange({ dockerfile_template: e.target.value });
+										}
+									}}
+									rows={12}
+									placeholder={
+										form.definition_type === "compose"
+											? "version: '3.8'\nservices:\n  app:\n    image: ..."
+											: "FROM node:18\nWORKDIR /app\n..."
+									}
+									className="form-input"
+									style={{
+										fontFamily: "monospace",
+										fontSize: "0.875rem",
+									}}
+									required
+								/>
+							</div>
+						)}
+
+						<div className="form-group">
+							<label htmlFor="readiness-command">
+								Readiness Probe Command
+							</label>
+							<input
+								id="readiness-command"
+								type="text"
+								value={form.readiness_command}
+								onChange={(e) => {
+									onFormChange({ readiness_command: e.target.value });
+								}}
+								placeholder="e.g., curl -f http://localhost:8080"
+								className="form-input"
+							/>
+						</div>
+
+						<div className="row" style={{ gap: "1rem" }}>
+							<div className="form-group" style={{ flex: 1 }}>
+								<label htmlFor="readiness-timeout">Timeout (seconds)</label>
+								<input
+									id="readiness-timeout"
+									type="number"
+									value={form.readiness_timeout}
+									onChange={(e) => {
+										onFormChange({ readiness_timeout: e.target.value });
+									}}
+									className="form-input"
+								/>
+							</div>
+							<div className="form-group" style={{ flex: 1 }}>
+								<label htmlFor="readiness-interval">
+									Interval (seconds)
+								</label>
+								<input
+									id="readiness-interval"
+									type="number"
+									value={form.readiness_interval}
+									onChange={(e) => {
+										onFormChange({ readiness_interval: e.target.value });
+									}}
+									className="form-input"
+								/>
+							</div>
+						</div>
+
+						<div className="form-group">
+							<label>Required Variables (comma-separated)</label>
+							<input
+								type="text"
+								value={form.required_variables}
+								onChange={(e) => {
+									onFormChange({ required_variables: e.target.value });
+								}}
+								placeholder="REPO_PATH, TOOL_NAME"
+								className="form-input"
+							/>
+						</div>
+
+						{toolTypeError && <p className="text-error">{toolTypeError}</p>}
+
+						<div className="dialog-actions" style={{ marginTop: "1rem" }}>
+							<button type="submit">
+								<Icon name={isCreating ? "add" : "save"} size="sm" />
+								{isCreating ? "Create Tool Type" : "Save Changes"}
+							</button>
+							{toolTypeDirty && (
+								<button
+									type="button"
+									onClick={onReset}
+									className="button-secondary"
+								>
+									<Icon name="cancel" size="sm" /> Discard
+								</button>
+							)}
+						</div>
+					</form>
+				</div>
+			)}
+		</div>
+	);
+};
diff --git a/apps/web/src/components/features/tool-workshop/ToolTypeListSidebar.tsx b/apps/web/src/components/features/tool-workshop/ToolTypeListSidebar.tsx
new file mode 100644
index 0000000..99f0ce1
--- /dev/null
+++ b/apps/web/src/components/features/tool-workshop/ToolTypeListSidebar.tsx
@@ -0,0 +1,161 @@
+import { Icon } from "../../icon";
+import type { ToolType } from "../../../api/tool-types";
+
+interface ToolTypeListSidebarProps {
+	toolTypes: ToolType[];
+	selectedToolTypeId: string | null;
+	onSelect: (toolType: ToolType) => void;
+	onCreate: () => void;
+	onDelete: (id: string) => void;
+}
+
+export const ToolTypeListSidebar = ({
+	toolTypes,
+	selectedToolTypeId,
+	onSelect,
+	onCreate,
+	onDelete,
+}: ToolTypeListSidebarProps) => {
+	return (
+		<div
+			style={{
+				width: "280px",
+				minWidth: "280px",
+				borderRight: "1px solid var(--border)",
+				display: "flex",
+				flexDirection: "column",
+				background: "var(--panel)",
+			}}
+		>
+			<div
+				style={{ padding: "1rem", borderBottom: "1px solid var(--border)" }}
+			>
+				<h2 style={{ margin: 0, fontSize: "1.125rem" }}>Tool Workshop</h2>
+				<p
+					className="muted"
+					style={{ margin: "0.25rem 0 0 0", fontSize: "0.875rem" }}
+				>
+					{toolTypes.length} tool type{toolTypes.length !== 1 ? "s" : ""}
+				</p>
+			</div>
+
+			<div style={{ flex: 1, overflowY: "auto", padding: "0.5rem" }}>
+				{toolTypes.map((toolType) => (
+					<button
+						key={toolType.id}
+						onClick={() => onSelect(toolType)}
+						style={{
+							width: "100%",
+							textAlign: "left",
+							padding: "0.75rem 1rem",
+							marginBottom: "0.25rem",
+							borderRadius: "0.375rem",
+							border: "none",
+							background:
+								selectedToolTypeId === toolType.id
+									? "var(--brand)"
+									: "transparent",
+							color:
+								selectedToolTypeId === toolType.id ? "white" : "var(--ink)",
+							cursor: "pointer",
+							display: "flex",
+							alignItems: "center",
+							gap: "0.75rem",
+							transition: "background 0.15s",
+						}}
+						onMouseEnter={(e) => {
+							if (selectedToolTypeId !== toolType.id) {
+								e.currentTarget.style.background = "#ece7df";
+							}
+						}}
+						onMouseLeave={(e) => {
+							if (selectedToolTypeId !== toolType.id) {
+								e.currentTarget.style.background = "transparent";
+							}
+						}}
+					>
+						<div style={{ flex: 1, minWidth: 0 }}>
+							<div
+								style={{
+									fontWeight: 600,
+									fontSize: "0.9375rem",
+									whiteSpace: "nowrap",
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+								}}
+							>
+								{toolType.display_name}
+							</div>
+							<div
+								style={{
+									fontSize: "0.8125rem",
+									opacity: 0.8,
+									marginTop: "0.125rem",
+								}}
+							>
+								{toolType.category || "Uncategorized"} ·{" "}
+								{toolType.interface_type === "web"
+									? `Port ${toolType.default_port}`
+									: "Terminal"}
+							</div>
+						</div>
+						<button
+							onClick={(e) => {
+								e.stopPropagation();
+								onDelete(toolType.id);
+							}}
+							style={{
+								background: "none",
+								border: "none",
+								color:
+									selectedToolTypeId === toolType.id
+										? "rgba(255,255,255,0.8)"
+										: "var(--muted)",
+								cursor: "pointer",
+								padding: "0.25rem",
+								borderRadius: "0.25rem",
+								flexShrink: 0,
+								opacity: 0,
+							}}
+							className="delete-btn"
+							title="Delete tool type"
+						>
+							<Icon name="delete" size="sm" />
+						</button>
+					</button>
+				))}
+			</div>
+
+			<div style={{ padding: "1rem", borderTop: "1px solid var(--border)" }}>
+				<button
+					onClick={onCreate}
+					style={{
+						width: "100%",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						gap: "0.5rem",
+						padding: "0.75rem",
+						borderRadius: "0.5rem",
+						border: "2px dashed var(--border)",
+						background: "transparent",
+						color: "var(--muted)",
+						cursor: "pointer",
+						fontWeight: 600,
+						transition: "all 0.15s",
+					}}
+					onMouseEnter={(e) => {
+						e.currentTarget.style.borderColor = "var(--brand)";
+						e.currentTarget.style.color = "var(--brand)";
+					}}
+					onMouseLeave={(e) => {
+						e.currentTarget.style.borderColor = "var(--border)";
+						e.currentTarget.style.color = "var(--muted)";
+					}}
+				>
+					<Icon name="add" size="sm" /> New Tool Type
+				</button>
+			</div>
+		</div>
+	);
+};
diff --git a/apps/web/src/components/features/tool-workshop/ToolWorkshopMobileView.tsx b/apps/web/src/components/features/tool-workshop/ToolWorkshopMobileView.tsx
new file mode 100644
index 0000000..dad3fda
--- /dev/null
+++ b/apps/web/src/components/features/tool-workshop/ToolWorkshopMobileView.tsx
@@ -0,0 +1,350 @@
+import { MobileListView } from "../mobile/mobile-list-view";
+import { MobileDetailView } from "../mobile/mobile-detail-view";
+import { MobileEditView } from "../mobile/mobile-edit-view";
+import { MobileFAB } from "../mobile/mobile-fab";
+import type { ToolType } from "../../../api/tool-types";
+import type { ToolTypeFormState } from "./ToolTypeEditorPanel";
+
+export type MobileView = "list" | "detail" | "edit";
+
+interface ToolWorkshopMobileViewProps {
+	toolTypes: ToolType[];
+	selectedToolType: ToolType | null;
+	mobileView: MobileView;
+	isCreating: boolean;
+	toolTypeForm: ToolTypeFormState;
+	toolTypeError: string | null;
+	onViewChange: (view: MobileView) => void;
+	onSelect: (toolType: ToolType) => void;
+	onCreate: () => void;
+	onDelete: (id: string) => void;
+	onFormChange: (changes: Partial<ToolTypeFormState>) => void;
+	onSubmit: () => void;
+	onCancel: () => void;
+}
+
+export const ToolWorkshopMobileView = ({
+	toolTypes,
+	selectedToolType,
+	mobileView,
+	isCreating,
+	toolTypeForm,
+	toolTypeError,
+	onViewChange,
+	onSelect,
+	onCreate,
+	onDelete,
+	onFormChange,
+	onSubmit,
+	onCancel,
+}: ToolWorkshopMobileViewProps) => {
+	if (mobileView === "list") {
+		return (
+			<div className="mobile-page">
+				<div className="mobile-page-header">
+					<h1>Tool Workshop</h1>
+					<span className="muted">{toolTypes.length} tool types</span>
+				</div>
+				<MobileListView
+					items={toolTypes.map((t) => ({
+						id: t.id,
+						title: t.display_name,
+						subtitle: `${t.category || "Uncategorized"} · ${t.interface_type === "web" ? `Port ${t.default_port}` : "Terminal"}`,
+					}))}
+					onItemClick={(id) => {
+						const toolType = toolTypes.find((t) => t.id === id);
+						if (toolType) {
+							onSelect(toolType);
+							onViewChange("detail");
+						}
+					}}
+					emptyMessage="No tool types yet"
+				/>
+				<MobileFAB
+					onClick={() => {
+						onCreate();
+						onViewChange("edit");
+					}}
+				/>
+			</div>
+		);
+	}
+
+	if (mobileView === "detail" && selectedToolType) {
+		return (
+			<MobileDetailView
+				title={selectedToolType.display_name}
+				subtitle={`${selectedToolType.name} · ${selectedToolType.definition_type} · ${selectedToolType.interface_type === "web" ? `Port ${selectedToolType.default_port}` : "Terminal"}`}
+				fields={[
+					{ label: "Name", value: selectedToolType.name },
+					{ label: "Display Name", value: selectedToolType.display_name },
+					{ label: "Description", value: selectedToolType.description },
+					{ label: "Category", value: selectedToolType.category },
+					{ label: "Interface Type", value: selectedToolType.interface_type },
+					{
+						label: "Requires Port",
+						value: selectedToolType.requires_port,
+						type: "boolean",
+					},
+					{ label: "Default Port", value: selectedToolType.default_port },
+					{
+						label: "Definition Type",
+						value: selectedToolType.definition_type,
+					},
+					{
+						label: "Startup Command",
+						value: selectedToolType.startup_command,
+					},
+					{
+						label: "Readiness Command",
+						value: selectedToolType.readiness_probe?.command ?? null,
+					},
+					{
+						label: "Readiness Timeout",
+						value: selectedToolType.readiness_probe?.timeout ?? null,
+					},
+					{
+						label: "Readiness Interval",
+						value: selectedToolType.readiness_probe?.interval ?? null,
+					},
+					{
+						label: "Required Variables",
+						value: selectedToolType.required_variables?.join(", ") ?? null,
+					},
+					{
+						label: "Compose Template",
+						value: selectedToolType.compose_template,
+						type: "code",
+					},
+					{
+						label: "Dockerfile Template",
+						value: selectedToolType.dockerfile_template,
+						type: "code",
+					},
+				]}
+				onEdit={() => {
+					onViewChange("edit");
+				}}
+				onDelete={() => {
+					void onDelete(selectedToolType.id);
+					onViewChange("list");
+				}}
+				onBack={() => {
+					onViewChange("list");
+				}}
+			/>
+		);
+	}
+
+	if (mobileView === "edit") {
+		return (
+			<MobileEditView
+				title={isCreating ? "Create Tool Type" : "Edit Tool Type"}
+				onCancel={onCancel}
+				onSave={() => {
+					onSubmit();
+					if (!toolTypeError) {
+						onViewChange("list");
+					}
+				}}
+				isSaving={false}
+			>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Name *</label>
+					<input
+						type="text"
+						value={toolTypeForm.name}
+						onChange={(e) => onFormChange({ name: e.target.value })}
+						className="mobile-form-input"
+						placeholder="e.g., my-tool"
+					/>
+				</div>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Display Name *</label>
+					<input
+						type="text"
+						value={toolTypeForm.display_name}
+						onChange={(e) => onFormChange({ display_name: e.target.value })}
+						className="mobile-form-input"
+						placeholder="e.g., My Tool"
+					/>
+				</div>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Description</label>
+					<textarea
+						value={toolTypeForm.description}
+						onChange={(e) => onFormChange({ description: e.target.value })}
+						className="mobile-form-textarea"
+						placeholder="What does this tool do?"
+						rows={3}
+					/>
+				</div>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Category</label>
+					<input
+						type="text"
+						value={toolTypeForm.category}
+						onChange={(e) => onFormChange({ category: e.target.value })}
+						className="mobile-form-input"
+						placeholder="e.g., development"
+					/>
+				</div>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Interface Type</label>
+					<select
+						value={toolTypeForm.interface_type}
+						onChange={(e) =>
+							onFormChange({
+								interface_type: e.target.value as "web" | "terminal",
+							})
+						}
+						className="mobile-form-select"
+					>
+						<option value="web">Web</option>
+						<option value="terminal">Terminal</option>
+					</select>
+				</div>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Requires Port</label>
+					<input
+						type="checkbox"
+						checked={toolTypeForm.requires_port}
+						onChange={(e) => onFormChange({ requires_port: e.target.checked })}
+						className="mobile-form-checkbox"
+					/>
+				</div>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Default Port</label>
+					<input
+						type="text"
+						value={toolTypeForm.default_port}
+						onChange={(e) => onFormChange({ default_port: e.target.value })}
+						className="mobile-form-input"
+						placeholder="e.g., 8080"
+					/>
+				</div>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Definition Type</label>
+					<select
+						value={toolTypeForm.definition_type}
+						onChange={(e) =>
+							onFormChange({
+								definition_type: e.target.value as "compose" | "dockerfile",
+							})
+						}
+						className="mobile-form-select"
+					>
+						<option value="compose">Compose</option>
+						<option value="dockerfile">Dockerfile</option>
+					</select>
+				</div>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Startup Command</label>
+					<input
+						type="text"
+						value={toolTypeForm.startup_command}
+						onChange={(e) => onFormChange({ startup_command: e.target.value })}
+						className="mobile-form-input"
+						placeholder="Command to run on startup"
+					/>
+				</div>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Readiness Command</label>
+					<input
+						type="text"
+						value={toolTypeForm.readiness_command}
+						onChange={(e) => onFormChange({ readiness_command: e.target.value })}
+						className="mobile-form-input"
+						placeholder="e.g., curl -f http://localhost:8080/health"
+					/>
+				</div>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Readiness Timeout</label>
+					<input
+						type="text"
+						value={toolTypeForm.readiness_timeout}
+						onChange={(e) => onFormChange({ readiness_timeout: e.target.value })}
+						className="mobile-form-input"
+						placeholder="30"
+					/>
+				</div>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Readiness Interval</label>
+					<input
+						type="text"
+						value={toolTypeForm.readiness_interval}
+						onChange={(e) => onFormChange({ readiness_interval: e.target.value })}
+						className="mobile-form-input"
+						placeholder="2"
+					/>
+				</div>
+				<div className="mobile-form-group">
+					<label className="mobile-form-label">Required Variables</label>
+					<input
+						type="text"
+						value={toolTypeForm.required_variables}
+						onChange={(e) => onFormChange({ required_variables: e.target.value })}
+						className="mobile-form-input"
+						placeholder="VAR1, VAR2, VAR3"
+					/>
+				</div>
+				{toolTypeForm.definition_type === "compose" && (
+					<div className="mobile-form-group">
+						<label className="mobile-form-label">Compose Template</label>
+						<textarea
+							value={toolTypeForm.compose_template}
+							onChange={(e) => onFormChange({ compose_template: e.target.value })}
+							className="mobile-form-textarea mobile-form-code"
+							placeholder="version: '3'"
+							rows={10}
+						/>
+					</div>
+				)}
+				{toolTypeForm.definition_type === "dockerfile" && (
+					<div className="mobile-form-group">
+						<label className="mobile-form-label">Dockerfile Template</label>
+						<textarea
+							value={toolTypeForm.dockerfile_template}
+							onChange={(e) =>
+								onFormChange({ dockerfile_template: e.target.value })
+							}
+							className="mobile-form-textarea mobile-form-code"
+							placeholder="FROM ubuntu:22.04"
+							rows={10}
+						/>
+					</div>
+				)}
+			</MobileEditView>
+		);
+	}
+
+	return (
+		<div className="mobile-page">
+			<div className="mobile-page-header">
+				<h1>Tool Workshop</h1>
+				<span className="muted">{toolTypes.length} tool types</span>
+			</div>
+			<MobileListView
+				items={toolTypes.map((t) => ({
+					id: t.id,
+					title: t.display_name,
+					subtitle: `${t.category || "Uncategorized"} · ${t.interface_type === "web" ? `Port ${t.default_port}` : "Terminal"}`,
+				}))}
+				onItemClick={(id) => {
+					const toolType = toolTypes.find((t) => t.id === id);
+					if (toolType) {
+						onSelect(toolType);
+						onViewChange("detail");
+					}
+				}}
+				emptyMessage="No tool types yet"
+			/>
+			<MobileFAB
+				onClick={() => {
+					onCreate();
+					onViewChange("edit");
+				}}
+			/>
+		</div>
+	);
+};
diff --git a/apps/web/src/hooks/use-tool-workshop.ts b/apps/web/src/hooks/use-tool-workshop.ts
new file mode 100644
index 0000000..6503f3a
--- /dev/null
+++ b/apps/web/src/hooks/use-tool-workshop.ts
@@ -0,0 +1,370 @@
+import { useCallback, useEffect, useState } from "react";
+import { extractErrorMessage } from "../utils/errors";
+import {
+	createToolType,
+	deleteToolType,
+	listToolTypes,
+	updateToolType,
+	type CreateToolTypeRequest,
+	type ReadinessProbe,
+	type ToolType,
+	type UpdateToolTypeRequest,
+} from "../api/tool-types";
+import {
+	createToolDefinition,
+	getToolDefinition,
+	listToolDefinitions,
+	updateToolDefinition,
+} from "../api/tool-definitions";
+import type { ToolTypeFormState } from "../components/features/tool-workshop/ToolTypeEditorPanel";
+
+type Status = "loading" | "ready" | "error";
+
+const defaultForm: ToolTypeFormState = {
+	name: "",
+	display_name: "",
+	description: "",
+	category: "",
+	interface_type: "web",
+	requires_port: true,
+	default_port: "",
+	definition_type: "compose",
+	compose_template: "",
+	dockerfile_template: "",
+	readiness_command: "",
+	readiness_timeout: "30",
+	readiness_interval: "2",
+	required_variables: "",
+	startup_command: "",
+};
+
+export const useToolWorkshop = () => {
+	const [status, setStatus] = useState<Status>("loading");
+	const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
+	const [baseDefinitions, setBaseDefinitions] = useState<
+		Awaited<ReturnType<typeof listToolDefinitions>>
+	>([]);
+	const [manifestData, setManifestData] = useState<Record<
+		string,
+		unknown
+	> | null>(null);
+	const [manifestDefinitionId, setManifestDefinitionId] = useState<
+		string | null
+	>(null);
+	const [selectedToolTypeId, setSelectedToolTypeId] = useState<string | null>(
+		null,
+	);
+	const [isCreating, setIsCreating] = useState(false);
+	const [toolTypeForm, setToolTypeForm] = useState<ToolTypeFormState>(defaultForm);
+	const [toolTypeError, setToolTypeError] = useState<string | null>(null);
+	const [toolTypeDirty, setToolTypeDirty] = useState(false);
+
+	const selectedToolType =
+		(toolTypes || []).find((t) => t.id === selectedToolTypeId) || null;
+
+	const loadData = useCallback(async () => {
+		setStatus("loading");
+		try {
+			const [types, defs] = await Promise.all([
+				listToolTypes(),
+				listToolDefinitions(),
+			]);
+			setToolTypes(types || []);
+			setBaseDefinitions((defs || []).filter((d) => d.is_base));
+			setStatus("ready");
+		} catch {
+			setStatus("error");
+		}
+	}, []);
+
+	useEffect(() => {
+		void loadData();
+	}, [loadData]);
+
+	const resetToolTypeForm = () => {
+		setToolTypeForm(defaultForm);
+		setToolTypeError(null);
+		setToolTypeDirty(false);
+		setManifestData(null);
+		setManifestDefinitionId(null);
+	};
+
+	const populateToolTypeForm = async (toolType: ToolType) => {
+		setToolTypeForm({
+			name: toolType.name,
+			display_name: toolType.display_name,
+			description: toolType.description || "",
+			category: toolType.category || "",
+			interface_type: (toolType.interface_type as "web" | "terminal") || "web",
+			requires_port: toolType.requires_port ?? true,
+			default_port: toolType.default_port?.toString() || "",
+			definition_type:
+				(toolType.definition_type as "compose" | "dockerfile" | "manifest") ||
+				"compose",
+			compose_template: toolType.compose_template || "",
+			dockerfile_template: toolType.dockerfile_template || "",
+			readiness_command: toolType.readiness_probe?.command || "",
+			readiness_timeout: toolType.readiness_probe?.timeout?.toString() || "30",
+			readiness_interval: toolType.readiness_probe?.interval?.toString() || "2",
+			required_variables: toolType.required_variables?.join(", ") || "",
+			startup_command: toolType.startup_command || "",
+		});
+		setToolTypeError(null);
+		setToolTypeDirty(false);
+		setManifestDefinitionId(toolType.manifest_id || null);
+
+		if (toolType.definition_type === "manifest" && toolType.manifest_id) {
+			try {
+				const defn = await getToolDefinition(toolType.manifest_id);
+				setManifestData(defn.manifest);
+			} catch {
+				setManifestData(null);
+			}
+		} else {
+			setManifestData(null);
+		}
+	};
+
+	const handleSelectToolType = (toolType: ToolType | null) => {
+		if (toolTypeDirty) {
+			if (!window.confirm("You have unsaved changes. Discard them?")) {
+				return;
+			}
+		}
+		if (toolType) {
+			setSelectedToolTypeId(toolType.id);
+			setIsCreating(false);
+			void populateToolTypeForm(toolType);
+		} else {
+			setSelectedToolTypeId(null);
+		}
+	};
+
+	const handleCreateNew = () => {
+		if (toolTypeDirty) {
+			if (!window.confirm("You have unsaved changes. Discard them?")) {
+				return;
+			}
+		}
+		setSelectedToolTypeId(null);
+		setIsCreating(true);
+		resetToolTypeForm();
+	};
+
+	const handleToolTypeSubmit = async (e?: React.FormEvent) => {
+		e?.preventDefault();
+		setToolTypeError(null);
+
+		if (!toolTypeForm.name.trim() || !toolTypeForm.display_name.trim()) {
+			setToolTypeError("Name and display name are required");
+			return;
+		}
+
+		if (
+			toolTypeForm.requires_port &&
+			(!toolTypeForm.default_port.trim() ||
+				isNaN(Number(toolTypeForm.default_port)))
+		) {
+			setToolTypeError("Default port is required and must be a number");
+			return;
+		}
+
+		if (toolTypeForm.definition_type !== "manifest") {
+			const template =
+				toolTypeForm.definition_type === "compose"
+					? toolTypeForm.compose_template
+					: toolTypeForm.dockerfile_template;
+
+			if (!template.trim()) {
+				setToolTypeError(
+					`${toolTypeForm.definition_type === "compose" ? "Compose" : "Dockerfile"} template is required`,
+				);
+				return;
+			}
+		} else if (!manifestData) {
+			setToolTypeError(
+				"Manifest data is required for manifest definition type",
+			);
+			return;
+		}
+
+		const variables = toolTypeForm.required_variables
+			.split(",")
+			.map((v) => v.trim())
+			.filter((v) => v.length > 0);
+
+		const readinessProbe: ReadinessProbe | undefined =
+			toolTypeForm.readiness_command.trim()
+				? {
+						command: toolTypeForm.readiness_command.trim(),
+						timeout: parseInt(toolTypeForm.readiness_timeout) || 30,
+						interval: parseInt(toolTypeForm.readiness_interval) || 2,
+					}
+				: undefined;
+
+		const template =
+			toolTypeForm.definition_type === "compose"
+				? toolTypeForm.compose_template
+				: toolTypeForm.dockerfile_template;
+
+		try {
+			if (isCreating) {
+				let manifestId: string | undefined;
+				if (toolTypeForm.definition_type === "manifest" && manifestData) {
+					const manifestPayload = {
+						name: toolTypeForm.name.trim(),
+						display_name: toolTypeForm.display_name.trim(),
+						description: toolTypeForm.description.trim() || undefined,
+						category: toolTypeForm.category.trim() || undefined,
+						interface_type: toolTypeForm.interface_type,
+						base_image: (manifestData.base_image as string) || undefined,
+						base_definition_id:
+							(manifestData.base_definition_id as string) || undefined,
+						manifest: manifestData,
+					};
+					const newManifest = await createToolDefinition(manifestPayload);
+					manifestId = newManifest.id;
+				}
+
+				const input: CreateToolTypeRequest = {
+					name: toolTypeForm.name.trim(),
+					display_name: toolTypeForm.display_name.trim(),
+					description: toolTypeForm.description.trim() || undefined,
+					category: toolTypeForm.category.trim() || undefined,
+					interface_type: toolTypeForm.interface_type,
+					requires_port: toolTypeForm.requires_port,
+					default_port: toolTypeForm.requires_port
+						? Number(toolTypeForm.default_port)
+						: 0,
+					definition_type: toolTypeForm.definition_type,
+					manifest_id: manifestId,
+					compose_template:
+						toolTypeForm.definition_type === "compose" ? template : undefined,
+					dockerfile_template:
+						toolTypeForm.definition_type === "dockerfile"
+							? template
+							: undefined,
+					readiness_probe: readinessProbe,
+					required_variables: variables,
+					startup_command: toolTypeForm.startup_command.trim() || undefined,
+				};
+				const newTool = await createToolType(input);
+				setIsCreating(false);
+				setSelectedToolTypeId(newTool.id);
+				setToolTypeDirty(false);
+			} else if (selectedToolType) {
+				let manifestId = selectedToolType.manifest_id || undefined;
+				if (toolTypeForm.definition_type === "manifest" && manifestData) {
+					if (manifestId) {
+						await updateToolDefinition(manifestId, {
+							display_name: toolTypeForm.display_name.trim(),
+							description: toolTypeForm.description.trim() || undefined,
+							category: toolTypeForm.category.trim() || undefined,
+							manifest: manifestData,
+						});
+					} else {
+						const manifestPayload = {
+							name: toolTypeForm.name.trim(),
+							display_name: toolTypeForm.display_name.trim(),
+							description: toolTypeForm.description.trim() || undefined,
+							category: toolTypeForm.category.trim() || undefined,
+							interface_type: toolTypeForm.interface_type,
+							base_image: (manifestData.base_image as string) || undefined,
+							base_definition_id:
+								(manifestData.base_definition_id as string) || undefined,
+							manifest: manifestData,
+						};
+						const newManifest = await createToolDefinition(manifestPayload);
+						manifestId = newManifest.id;
+					}
+				}
+
+				const input: UpdateToolTypeRequest = {
+					display_name: toolTypeForm.display_name.trim(),
+					description: toolTypeForm.description.trim() || undefined,
+					category: toolTypeForm.category.trim() || undefined,
+					interface_type: toolTypeForm.interface_type,
+					requires_port: toolTypeForm.requires_port,
+					default_port: toolTypeForm.requires_port
+						? Number(toolTypeForm.default_port)
+						: 0,
+					definition_type: toolTypeForm.definition_type,
+					manifest_id:
+						toolTypeForm.definition_type === "manifest"
+							? manifestId
+							: undefined,
+					compose_template:
+						toolTypeForm.definition_type === "compose" ? template : undefined,
+					dockerfile_template:
+						toolTypeForm.definition_type === "dockerfile"
+							? template
+							: undefined,
+					readiness_probe: readinessProbe,
+					required_variables: variables,
+					startup_command: toolTypeForm.startup_command.trim() || undefined,
+				};
+				await updateToolType(selectedToolType.id, input);
+				setToolTypeDirty(false);
+			}
+			await loadData();
+		} catch (err) {
+			setToolTypeError(extractErrorMessage(err));
+		}
+	};
+
+	const handleDeleteToolType = async (id: string) => {
+		if (
+			!window.confirm(
+				"Delete this tool type? All associated configs will be removed.",
+			)
+		)
+			return;
+		try {
+			await deleteToolType(id);
+			if (selectedToolTypeId === id) {
+				setSelectedToolTypeId(null);
+				setIsCreating(false);
+				resetToolTypeForm();
+			}
+			await loadData();
+		} catch {
+			alert("Failed to delete tool type");
+		}
+	};
+
+	const handleFormChange = (changes: Partial<ToolTypeFormState>) => {
+		setToolTypeForm((prev) => ({ ...prev, ...changes }));
+		setToolTypeDirty(true);
+	};
+
+	const handleReset = () => {
+		if (isCreating) {
+			resetToolTypeForm();
+		} else if (selectedToolType) {
+			void populateToolTypeForm(selectedToolType);
+		}
+	};
+
+	return {
+		status,
+		toolTypes,
+		baseDefinitions,
+		selectedToolType,
+		selectedToolTypeId,
+		isCreating,
+		toolTypeForm,
+		manifestData,
+		manifestDefinitionId,
+		toolTypeError,
+		toolTypeDirty,
+		loadData,
+		handleSelectToolType,
+		handleCreateNew,
+		handleToolTypeSubmit,
+		handleDeleteToolType,
+		handleFormChange,
+		handleReset,
+		setManifestData,
+		setToolTypeDirty,
+	};
+};
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 22327e6..84170da 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -5,16 +5,25 @@ import { BrowserRouter } from "react-router-dom";
 import { AppRouter } from "./router";
 import { AuthProvider } from "./state/auth";
 import { SessionsProvider } from "./state/sessions";
-import "./styles.css";
+import "./styles/tokens.css";
+import "./styles/global.css";
+import "./styles/utilities.css";
+import "./styles/syntax-highlight.css";
+import "./styles/pages/git-history.css";
+import "./styles/pages/repo-workspace.css";
+import "./styles/pages/projects.css";
+import "./styles/pages/sessions.css";
+import "./styles/pages/ssh-keys.css";
+import "./styles/pages/workspace-detail.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <AuthProvider>
-        <SessionsProvider>
-          <AppRouter />
-        </SessionsProvider>
-      </AuthProvider>
-    </BrowserRouter>
-  </React.StrictMode>
+	<React.StrictMode>
+		<BrowserRouter>
+			<AuthProvider>
+				<SessionsProvider>
+					<AppRouter />
+				</SessionsProvider>
+			</AuthProvider>
+		</BrowserRouter>
+	</React.StrictMode>,
 );
diff --git a/apps/web/src/pages/ToolWorkshopPage.tsx b/apps/web/src/pages/ToolWorkshopPage.tsx
index 1505207..a93ed71 100644
--- a/apps/web/src/pages/ToolWorkshopPage.tsx
+++ b/apps/web/src/pages/ToolWorkshopPage.tsx
@@ -1,365 +1,37 @@
-import { useCallback, useEffect, useState } from "react";
 import { ErrorState, LoadingState } from "../components/data-states";
-import { Icon } from "../components/icon";
 import { useMobileViewport } from "../hooks/use-mobile-viewport";
-import { extractErrorMessage } from "../utils/errors";
-import { MobileListView } from "../components/features/mobile/mobile-list-view";
-import { MobileDetailView } from "../components/features/mobile/mobile-detail-view";
-import { MobileEditView } from "../components/features/mobile/mobile-edit-view";
-import { MobileFAB } from "../components/features/mobile/mobile-fab";
-import {
-	createToolType,
-	deleteToolType,
-	listToolTypes,
-	updateToolType,
-	type CreateToolTypeRequest,
-	type ReadinessProbe,
-	type ToolType,
-	type UpdateToolTypeRequest,
-} from "../api/tool-types";
-import {
-	createToolDefinition,
-	getToolDefinition,
-	listToolDefinitions,
-	updateToolDefinition,
-	type ToolDefinitionManifest,
-} from "../api/tool-definitions";
-import { ManifestEditor } from "../components/features/tool/manifest-editor";
-type Status = "loading" | "ready" | "error";
-
-type MobileView = "list" | "detail" | "edit";
+import { useToolWorkshop } from "../hooks/use-tool-workshop";
+import { ToolTypeListSidebar } from "../components/features/tool-workshop/ToolTypeListSidebar";
+import { ToolTypeEditorPanel } from "../components/features/tool-workshop/ToolTypeEditorPanel";
+import { ToolWorkshopMobileView } from "../components/features/tool-workshop/ToolWorkshopMobileView";
+import type { MobileView } from "../components/features/tool-workshop/ToolWorkshopMobileView";
+import { useState } from "react";
 
 export const ToolWorkshopPage = () => {
 	const isMobile = useMobileViewport();
 	const [mobileView, setMobileView] = useState<MobileView>("list");
-	const [status, setStatus] = useState<Status>("loading");
-	const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
-	const [baseDefinitions, setBaseDefinitions] = useState<
-		ToolDefinitionManifest[]
-	>([]);
-	const [manifestData, setManifestData] = useState<Record<
-		string,
-		unknown
-	> | null>(null);
-	const [manifestDefinitionId, setManifestDefinitionId] = useState<
-		string | null
-	>(null);
-
-	// Selection state
-	const [selectedToolTypeId, setSelectedToolTypeId] = useState<string | null>(
-		null,
-	);
-	const [isCreating, setIsCreating] = useState(false);
-
-	// Tool Type form state
-	const [toolTypeForm, setToolTypeForm] = useState({
-		name: "",
-		display_name: "",
-		description: "",
-		category: "",
-		interface_type: "web" as "web" | "terminal",
-		requires_port: true,
-		default_port: "",
-		definition_type: "compose" as "compose" | "dockerfile" | "manifest",
-		compose_template: "",
-		dockerfile_template: "",
-		readiness_command: "",
-		readiness_timeout: "30",
-		readiness_interval: "2",
-		required_variables: "",
-		startup_command: "",
-	});
-	const [toolTypeError, setToolTypeError] = useState<string | null>(null);
-	const [toolTypeDirty, setToolTypeDirty] = useState(false);
-
-	const selectedToolType =
-		(toolTypes || []).find((t) => t.id === selectedToolTypeId) || null;
-
-	const loadData = useCallback(async () => {
-		setStatus("loading");
-		try {
-			const [types, defs] = await Promise.all([
-				listToolTypes(),
-				listToolDefinitions(),
-			]);
-			setToolTypes(types || []);
-			setBaseDefinitions((defs || []).filter((d) => d.is_base));
-			setStatus("ready");
-		} catch {
-			setStatus("error");
-		}
-	}, []);
-
-	useEffect(() => {
-		void loadData();
-	}, [loadData]);
-
-	const resetToolTypeForm = () => {
-		setToolTypeForm({
-			name: "",
-			display_name: "",
-			description: "",
-			category: "",
-			interface_type: "web",
-			requires_port: true,
-			default_port: "",
-			definition_type: "compose",
-			compose_template: "",
-			dockerfile_template: "",
-			readiness_command: "",
-			readiness_timeout: "30",
-			readiness_interval: "2",
-			required_variables: "",
-			startup_command: "",
-		});
-		setToolTypeError(null);
-		setToolTypeDirty(false);
-		setManifestData(null);
-		setManifestDefinitionId(null);
-	};
-
-	const populateToolTypeForm = async (toolType: ToolType) => {
-		setToolTypeForm({
-			name: toolType.name,
-			display_name: toolType.display_name,
-			description: toolType.description || "",
-			category: toolType.category || "",
-			interface_type: (toolType.interface_type as "web" | "terminal") || "web",
-			requires_port: toolType.requires_port ?? true,
-			default_port: toolType.default_port?.toString() || "",
-			definition_type:
-				(toolType.definition_type as "compose" | "dockerfile" | "manifest") ||
-				"compose",
-			compose_template: toolType.compose_template || "",
-			dockerfile_template: toolType.dockerfile_template || "",
-			readiness_command: toolType.readiness_probe?.command || "",
-			readiness_timeout: toolType.readiness_probe?.timeout?.toString() || "30",
-			readiness_interval: toolType.readiness_probe?.interval?.toString() || "2",
-			required_variables: toolType.required_variables?.join(", ") || "",
-			startup_command: toolType.startup_command || "",
-		});
-		setToolTypeError(null);
-		setToolTypeDirty(false);
-		setManifestDefinitionId(toolType.manifest_id || null);
-
-		if (toolType.definition_type === "manifest" && toolType.manifest_id) {
-			try {
-				const defn = await getToolDefinition(toolType.manifest_id);
-				setManifestData(defn.manifest);
-			} catch {
-				setManifestData(null);
-			}
-		} else {
-			setManifestData(null);
-		}
-	};
-
-	const handleSelectToolType = (toolType: ToolType | null) => {
-		if (toolTypeDirty) {
-			if (!window.confirm("You have unsaved changes. Discard them?")) {
-				return;
-			}
-		}
-		if (toolType) {
-			setSelectedToolTypeId(toolType.id);
-			setIsCreating(false);
-			populateToolTypeForm(toolType);
-		} else {
-			setSelectedToolTypeId(null);
-		}
-	};
-
-	const handleCreateNew = () => {
-		if (toolTypeDirty) {
-			if (!window.confirm("You have unsaved changes. Discard them?")) {
-				return;
-			}
-		}
-		setSelectedToolTypeId(null);
-		setIsCreating(true);
-		resetToolTypeForm();
-	};
-
-	const handleToolTypeSubmit = async (e: React.FormEvent) => {
-		e.preventDefault();
-		setToolTypeError(null);
-
-		if (!toolTypeForm.name.trim() || !toolTypeForm.display_name.trim()) {
-			setToolTypeError("Name and display name are required");
-			return;
-		}
-
-		if (
-			toolTypeForm.requires_port &&
-			(!toolTypeForm.default_port.trim() ||
-				isNaN(Number(toolTypeForm.default_port)))
-		) {
-			setToolTypeError("Default port is required and must be a number");
-			return;
-		}
-
-		if (toolTypeForm.definition_type !== "manifest") {
-			const template =
-				toolTypeForm.definition_type === "compose"
-					? toolTypeForm.compose_template
-					: toolTypeForm.dockerfile_template;
-
-			if (!template.trim()) {
-				setToolTypeError(
-					`${toolTypeForm.definition_type === "compose" ? "Compose" : "Dockerfile"} template is required`,
-				);
-				return;
-			}
-		} else if (!manifestData) {
-			setToolTypeError(
-				"Manifest data is required for manifest definition type",
-			);
-			return;
-		}
-
-		const variables = toolTypeForm.required_variables
-			.split(",")
-			.map((v) => v.trim())
-			.filter((v) => v.length > 0);
-
-		const readinessProbe: ReadinessProbe | undefined =
-			toolTypeForm.readiness_command.trim()
-				? {
-						command: toolTypeForm.readiness_command.trim(),
-						timeout: parseInt(toolTypeForm.readiness_timeout) || 30,
-						interval: parseInt(toolTypeForm.readiness_interval) || 2,
-					}
-				: undefined;
-
-		const template =
-			toolTypeForm.definition_type === "compose"
-				? toolTypeForm.compose_template
-				: toolTypeForm.dockerfile_template;
-
-		try {
-			if (isCreating) {
-				let manifestId: string | undefined;
-				if (toolTypeForm.definition_type === "manifest" && manifestData) {
-					const manifestPayload = {
-						name: toolTypeForm.name.trim(),
-						display_name: toolTypeForm.display_name.trim(),
-						description: toolTypeForm.description.trim() || undefined,
-						category: toolTypeForm.category.trim() || undefined,
-						interface_type: toolTypeForm.interface_type,
-						base_image: (manifestData.base_image as string) || undefined,
-						base_definition_id:
-							(manifestData.base_definition_id as string) || undefined,
-						manifest: manifestData,
-					};
-					const newManifest = await createToolDefinition(manifestPayload);
-					manifestId = newManifest.id;
-				}
-
-				const input: CreateToolTypeRequest = {
-					name: toolTypeForm.name.trim(),
-					display_name: toolTypeForm.display_name.trim(),
-					description: toolTypeForm.description.trim() || undefined,
-					category: toolTypeForm.category.trim() || undefined,
-					interface_type: toolTypeForm.interface_type,
-					requires_port: toolTypeForm.requires_port,
-					default_port: toolTypeForm.requires_port
-						? Number(toolTypeForm.default_port)
-						: 0,
-					definition_type: toolTypeForm.definition_type,
-					manifest_id: manifestId,
-					compose_template:
-						toolTypeForm.definition_type === "compose" ? template : undefined,
-					dockerfile_template:
-						toolTypeForm.definition_type === "dockerfile"
-							? template
-							: undefined,
-					readiness_probe: readinessProbe,
-					required_variables: variables,
-					startup_command: toolTypeForm.startup_command.trim() || undefined,
-				};
-				const newTool = await createToolType(input);
-				setIsCreating(false);
-				setSelectedToolTypeId(newTool.id);
-				setToolTypeDirty(false);
-			} else if (selectedToolType) {
-				let manifestId = selectedToolType.manifest_id || undefined;
-				if (toolTypeForm.definition_type === "manifest" && manifestData) {
-					if (manifestId) {
-						await updateToolDefinition(manifestId, {
-							display_name: toolTypeForm.display_name.trim(),
-							description: toolTypeForm.description.trim() || undefined,
-							category: toolTypeForm.category.trim() || undefined,
-							manifest: manifestData,
-						});
-					} else {
-						const manifestPayload = {
-							name: toolTypeForm.name.trim(),
-							display_name: toolTypeForm.display_name.trim(),
-							description: toolTypeForm.description.trim() || undefined,
-							category: toolTypeForm.category.trim() || undefined,
-							interface_type: toolTypeForm.interface_type,
-							base_image: (manifestData.base_image as string) || undefined,
-							base_definition_id:
-								(manifestData.base_definition_id as string) || undefined,
-							manifest: manifestData,
-						};
-						const newManifest = await createToolDefinition(manifestPayload);
-						manifestId = newManifest.id;
-					}
-				}
-
-				const input: UpdateToolTypeRequest = {
-					display_name: toolTypeForm.display_name.trim(),
-					description: toolTypeForm.description.trim() || undefined,
-					category: toolTypeForm.category.trim() || undefined,
-					interface_type: toolTypeForm.interface_type,
-					requires_port: toolTypeForm.requires_port,
-					default_port: toolTypeForm.requires_port
-						? Number(toolTypeForm.default_port)
-						: 0,
-					definition_type: toolTypeForm.definition_type,
-					manifest_id:
-						toolTypeForm.definition_type === "manifest"
-							? manifestId
-							: undefined,
-					compose_template:
-						toolTypeForm.definition_type === "compose" ? template : undefined,
-					dockerfile_template:
-						toolTypeForm.definition_type === "dockerfile"
-							? template
-							: undefined,
-					readiness_probe: readinessProbe,
-					required_variables: variables,
-					startup_command: toolTypeForm.startup_command.trim() || undefined,
-				};
-				await updateToolType(selectedToolType.id, input);
-				setToolTypeDirty(false);
-			}
-			await loadData();
-		} catch (err) {
-			setToolTypeError(extractErrorMessage(err));
-		}
-	};
-
-	const handleDeleteToolType = async (id: string) => {
-		if (
-			!window.confirm(
-				"Delete this tool type? All associated configs will be removed.",
-			)
-		)
-			return;
-		try {
-			await deleteToolType(id);
-			if (selectedToolTypeId === id) {
-				setSelectedToolTypeId(null);
-				setIsCreating(false);
-				resetToolTypeForm();
-			}
-			await loadData();
-		} catch {
-			alert("Failed to delete tool type");
-		}
-	};
+	const {
+		status,
+		toolTypes,
+		baseDefinitions,
+		selectedToolType,
+		selectedToolTypeId,
+		isCreating,
+		toolTypeForm,
+		manifestData,
+		manifestDefinitionId,
+		toolTypeError,
+		toolTypeDirty,
+		loadData,
+		handleSelectToolType,
+		handleCreateNew,
+		handleToolTypeSubmit,
+		handleDeleteToolType,
+		handleFormChange,
+		handleReset,
+		setManifestData,
+		setToolTypeDirty,
+	} = useToolWorkshop();
 
 	if (status === "loading") {
 		return (
@@ -372,898 +44,67 @@ export const ToolWorkshopPage = () => {
 	if (status === "error") {
 		return (
 			<div className="container">
-				<ErrorState
-					message="Failed to load Tool Workshop."
-					onRetry={loadData}
-				/>
+				<ErrorState message="Failed to load Tool Workshop." onRetry={loadData} />
 			</div>
 		);
 	}
 
 	if (isMobile) {
-		if (mobileView === "list") {
-			return (
-				<div className="mobile-page">
-					<div className="mobile-page-header">
-						<h1>Tool Workshop</h1>
-						<span className="muted">{toolTypes.length} tool types</span>
-					</div>
-					<MobileListView
-						items={toolTypes.map((t) => ({
-							id: t.id,
-							title: t.display_name,
-							subtitle: `${t.category || "Uncategorized"} · ${t.interface_type === "web" ? `Port ${t.default_port}` : "Terminal"}`,
-						}))}
-						onItemClick={(id) => {
-							setSelectedToolTypeId(id);
-							setIsCreating(false);
-							setMobileView("detail");
-						}}
-						emptyMessage="No tool types yet"
-					/>
-					<MobileFAB
-						onClick={() => {
-							setSelectedToolTypeId(null);
-							setIsCreating(true);
-							resetToolTypeForm();
-							setMobileView("edit");
-						}}
-					/>
-				</div>
-			);
-		}
-
-		if (mobileView === "detail" && selectedToolType) {
-			return (
-				<MobileDetailView
-					title={selectedToolType.display_name}
-					subtitle={`${selectedToolType.name} · ${selectedToolType.definition_type} · ${selectedToolType.interface_type === "web" ? `Port ${selectedToolType.default_port}` : "Terminal"}`}
-					fields={[
-						{ label: "Name", value: selectedToolType.name },
-						{ label: "Display Name", value: selectedToolType.display_name },
-						{ label: "Description", value: selectedToolType.description },
-						{ label: "Category", value: selectedToolType.category },
-						{ label: "Interface Type", value: selectedToolType.interface_type },
-						{
-							label: "Requires Port",
-							value: selectedToolType.requires_port,
-							type: "boolean",
-						},
-						{ label: "Default Port", value: selectedToolType.default_port },
-						{
-							label: "Definition Type",
-							value: selectedToolType.definition_type,
-						},
-						{
-							label: "Startup Command",
-							value: selectedToolType.startup_command,
-						},
-						{
-							label: "Readiness Command",
-							value: selectedToolType.readiness_probe?.command ?? null,
-						},
-						{
-							label: "Readiness Timeout",
-							value: selectedToolType.readiness_probe?.timeout ?? null,
-						},
-						{
-							label: "Readiness Interval",
-							value: selectedToolType.readiness_probe?.interval ?? null,
-						},
-						{
-							label: "Required Variables",
-							value: selectedToolType.required_variables?.join(", ") ?? null,
-						},
-						{
-							label: "Compose Template",
-							value: selectedToolType.compose_template,
-							type: "code",
-						},
-						{
-							label: "Dockerfile Template",
-							value: selectedToolType.dockerfile_template,
-							type: "code",
-						},
-					]}
-					onEdit={() => {
-						populateToolTypeForm(selectedToolType);
-						setIsCreating(false);
-						setMobileView("edit");
-					}}
-					onDelete={() => {
-						handleDeleteToolType(selectedToolType.id);
-						setMobileView("list");
-					}}
-					onBack={() => {
-						setSelectedToolTypeId(null);
-						setMobileView("list");
-					}}
-				/>
-			);
-		}
-
-		if (mobileView === "edit") {
-			return (
-				<MobileEditView
-					title={isCreating ? "Create Tool Type" : "Edit Tool Type"}
-					onCancel={() => {
-						if (toolTypeDirty) {
-							if (!window.confirm("You have unsaved changes. Discard them?")) {
-								return;
-							}
+		return (
+			<ToolWorkshopMobileView
+				toolTypes={toolTypes}
+				selectedToolType={selectedToolType}
+				mobileView={mobileView}
+				isCreating={isCreating}
+				toolTypeForm={toolTypeForm}
+				toolTypeError={toolTypeError}
+				onViewChange={setMobileView}
+				onSelect={handleSelectToolType}
+				onCreate={handleCreateNew}
+				onDelete={handleDeleteToolType}
+				onFormChange={handleFormChange}
+				onSubmit={handleToolTypeSubmit}
+				onCancel={() => {
+					if (toolTypeDirty) {
+						if (!window.confirm("You have unsaved changes. Discard them?")) {
+							return;
 						}
-						setMobileView(isCreating ? "list" : "detail");
-					}}
-					onSave={() => {
-						// Create a synthetic form event to call handleToolTypeSubmit
-						const syntheticEvent = {
-							preventDefault: () => {},
-						} as React.FormEvent;
-						void handleToolTypeSubmit(syntheticEvent);
-						if (!toolTypeError) {
-							setMobileView("list");
-						}
-					}}
-					isSaving={false}
-				>
-					{/* Tool Type Form Fields */}
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Name *</label>
-						<input
-							type="text"
-							value={toolTypeForm.name}
-							onChange={(e) =>
-								setToolTypeForm({ ...toolTypeForm, name: e.target.value })
-							}
-							className="mobile-form-input"
-							placeholder="e.g., my-tool"
-						/>
-					</div>
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Display Name *</label>
-						<input
-							type="text"
-							value={toolTypeForm.display_name}
-							onChange={(e) =>
-								setToolTypeForm({
-									...toolTypeForm,
-									display_name: e.target.value,
-								})
-							}
-							className="mobile-form-input"
-							placeholder="e.g., My Tool"
-						/>
-					</div>
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Description</label>
-						<textarea
-							value={toolTypeForm.description}
-							onChange={(e) =>
-								setToolTypeForm({
-									...toolTypeForm,
-									description: e.target.value,
-								})
-							}
-							className="mobile-form-textarea"
-							placeholder="What does this tool do?"
-							rows={3}
-						/>
-					</div>
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Category</label>
-						<input
-							type="text"
-							value={toolTypeForm.category}
-							onChange={(e) =>
-								setToolTypeForm({ ...toolTypeForm, category: e.target.value })
-							}
-							className="mobile-form-input"
-							placeholder="e.g., development"
-						/>
-					</div>
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Interface Type</label>
-						<select
-							value={toolTypeForm.interface_type}
-							onChange={(e) =>
-								setToolTypeForm({
-									...toolTypeForm,
-									interface_type: e.target.value as "web" | "terminal",
-								})
-							}
-							className="mobile-form-select"
-						>
-							<option value="web">Web</option>
-							<option value="terminal">Terminal</option>
-						</select>
-					</div>
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Requires Port</label>
-						<input
-							type="checkbox"
-							checked={toolTypeForm.requires_port}
-							onChange={(e) =>
-								setToolTypeForm({
-									...toolTypeForm,
-									requires_port: e.target.checked,
-								})
-							}
-							className="mobile-form-checkbox"
-						/>
-					</div>
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Default Port</label>
-						<input
-							type="text"
-							value={toolTypeForm.default_port}
-							onChange={(e) =>
-								setToolTypeForm({
-									...toolTypeForm,
-									default_port: e.target.value,
-								})
-							}
-							className="mobile-form-input"
-							placeholder="e.g., 8080"
-						/>
-					</div>
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Definition Type</label>
-						<select
-							value={toolTypeForm.definition_type}
-							onChange={(e) =>
-								setToolTypeForm({
-									...toolTypeForm,
-									definition_type: e.target.value as "compose" | "dockerfile",
-								})
-							}
-							className="mobile-form-select"
-						>
-							<option value="compose">Compose</option>
-							<option value="dockerfile">Dockerfile</option>
-						</select>
-					</div>
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Startup Command</label>
-						<input
-							type="text"
-							value={toolTypeForm.startup_command}
-							onChange={(e) =>
-								setToolTypeForm({
-									...toolTypeForm,
-									startup_command: e.target.value,
-								})
-							}
-							className="mobile-form-input"
-							placeholder="Command to run on startup"
-						/>
-					</div>
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Readiness Command</label>
-						<input
-							type="text"
-							value={toolTypeForm.readiness_command}
-							onChange={(e) =>
-								setToolTypeForm({
-									...toolTypeForm,
-									readiness_command: e.target.value,
-								})
-							}
-							className="mobile-form-input"
-							placeholder="e.g., curl -f http://localhost:8080/health"
-						/>
-					</div>
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Readiness Timeout</label>
-						<input
-							type="text"
-							value={toolTypeForm.readiness_timeout}
-							onChange={(e) =>
-								setToolTypeForm({
-									...toolTypeForm,
-									readiness_timeout: e.target.value,
-								})
-							}
-							className="mobile-form-input"
-							placeholder="30"
-						/>
-					</div>
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Readiness Interval</label>
-						<input
-							type="text"
-							value={toolTypeForm.readiness_interval}
-							onChange={(e) =>
-								setToolTypeForm({
-									...toolTypeForm,
-									readiness_interval: e.target.value,
-								})
-							}
-							className="mobile-form-input"
-							placeholder="2"
-						/>
-					</div>
-					<div className="mobile-form-group">
-						<label className="mobile-form-label">Required Variables</label>
-						<input
-							type="text"
-							value={toolTypeForm.required_variables}
-							onChange={(e) =>
-								setToolTypeForm({
-									...toolTypeForm,
-									required_variables: e.target.value,
-								})
-							}
-							className="mobile-form-input"
-							placeholder="VAR1, VAR2, VAR3"
-						/>
-					</div>
-					{toolTypeForm.definition_type === "compose" && (
-						<div className="mobile-form-group">
-							<label className="mobile-form-label">Compose Template</label>
-							<textarea
-								value={toolTypeForm.compose_template}
-								onChange={(e) =>
-									setToolTypeForm({
-										...toolTypeForm,
-										compose_template: e.target.value,
-									})
-								}
-								className="mobile-form-textarea mobile-form-code"
-								placeholder="version: '3'"
-								rows={10}
-							/>
-						</div>
-					)}
-					{toolTypeForm.definition_type === "dockerfile" && (
-						<div className="mobile-form-group">
-							<label className="mobile-form-label">Dockerfile Template</label>
-							<textarea
-								value={toolTypeForm.dockerfile_template}
-								onChange={(e) =>
-									setToolTypeForm({
-										...toolTypeForm,
-										dockerfile_template: e.target.value,
-									})
-								}
-								className="mobile-form-textarea mobile-form-code"
-								placeholder="FROM ubuntu:22.04"
-								rows={10}
-							/>
-						</div>
-					)}
-				</MobileEditView>
-			);
-		}
+					}
+					setMobileView(isCreating ? "list" : "detail");
+				}}
+			/>
+		);
 	}
 
 	return (
 		<div
 			className="container"
-			style={{
-				display: "flex",
-				height: "calc(100vh - 4rem)",
-				gap: 0,
-				padding: 0,
-			}}
+			style={{ display: "flex", height: "calc(100vh - 4rem)", gap: 0, padding: 0 }}
 		>
-			{/* Left Sidebar - Tool List */}
-			<div
-				style={{
-					width: "280px",
-					minWidth: "280px",
-					borderRight: "1px solid var(--border)",
-					display: "flex",
-					flexDirection: "column",
-					background: "var(--panel)",
+			<ToolTypeListSidebar
+				toolTypes={toolTypes}
+				selectedToolTypeId={selectedToolTypeId}
+				onSelect={handleSelectToolType}
+				onCreate={handleCreateNew}
+				onDelete={handleDeleteToolType}
+			/>
+			<ToolTypeEditorPanel
+				isCreating={isCreating}
+				selectedToolType={selectedToolType}
+				form={toolTypeForm}
+				manifestData={manifestData}
+				manifestDefinitionId={manifestDefinitionId}
+				baseDefinitions={baseDefinitions}
+				toolTypeError={toolTypeError}
+				toolTypeDirty={toolTypeDirty}
+				onFormChange={handleFormChange}
+				onManifestChange={(m) => {
+					setManifestData(m);
+					setToolTypeDirty(true);
 				}}
-			>
-				<div
-					style={{ padding: "1rem", borderBottom: "1px solid var(--border)" }}
-				>
-					<h2 style={{ margin: 0, fontSize: "1.125rem" }}>Tool Workshop</h2>
-					<p
-						className="muted"
-						style={{ margin: "0.25rem 0 0 0", fontSize: "0.875rem" }}
-					>
-						{toolTypes.length} tool type{toolTypes.length !== 1 ? "s" : ""}
-					</p>
-				</div>
-
-				<div style={{ flex: 1, overflowY: "auto", padding: "0.5rem" }}>
-					{toolTypes.map((toolType) => (
-						<button
-							key={toolType.id}
-							onClick={() => handleSelectToolType(toolType)}
-							style={{
-								width: "100%",
-								textAlign: "left",
-								padding: "0.75rem 1rem",
-								marginBottom: "0.25rem",
-								borderRadius: "0.375rem",
-								border: "none",
-								background:
-									selectedToolTypeId === toolType.id
-										? "var(--brand)"
-										: "transparent",
-								color:
-									selectedToolTypeId === toolType.id ? "white" : "var(--ink)",
-								cursor: "pointer",
-								display: "flex",
-								alignItems: "center",
-								gap: "0.75rem",
-								transition: "background 0.15s",
-							}}
-							onMouseEnter={(e) => {
-								if (selectedToolTypeId !== toolType.id) {
-									e.currentTarget.style.background = "#ece7df";
-								}
-							}}
-							onMouseLeave={(e) => {
-								if (selectedToolTypeId !== toolType.id) {
-									e.currentTarget.style.background = "transparent";
-								}
-							}}
-						>
-							<div style={{ flex: 1, minWidth: 0 }}>
-								<div
-									style={{
-										fontWeight: 600,
-										fontSize: "0.9375rem",
-										whiteSpace: "nowrap",
-										overflow: "hidden",
-										textOverflow: "ellipsis",
-									}}
-								>
-									{toolType.display_name}
-								</div>
-								<div
-									style={{
-										fontSize: "0.8125rem",
-										opacity: 0.8,
-										marginTop: "0.125rem",
-									}}
-								>
-									{toolType.category || "Uncategorized"} ·{" "}
-									{toolType.interface_type === "web"
-										? `Port ${toolType.default_port}`
-										: "Terminal"}
-								</div>
-							</div>
-							<button
-								onClick={(e) => {
-									e.stopPropagation();
-									handleDeleteToolType(toolType.id);
-								}}
-								style={{
-									background: "none",
-									border: "none",
-									color:
-										selectedToolTypeId === toolType.id
-											? "rgba(255,255,255,0.8)"
-											: "var(--muted)",
-									cursor: "pointer",
-									padding: "0.25rem",
-									borderRadius: "0.25rem",
-									flexShrink: 0,
-									opacity: 0,
-								}}
-								className="delete-btn"
-								title="Delete tool type"
-							>
-								<Icon name="delete" size="sm" />
-							</button>
-						</button>
-					))}
-				</div>
-
-				<div style={{ padding: "1rem", borderTop: "1px solid var(--border)" }}>
-					<button
-						onClick={handleCreateNew}
-						style={{
-							width: "100%",
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							gap: "0.5rem",
-							padding: "0.75rem",
-							borderRadius: "0.5rem",
-							border: "2px dashed var(--border)",
-							background: "transparent",
-							color: "var(--muted)",
-							cursor: "pointer",
-							fontWeight: 600,
-							transition: "all 0.15s",
-						}}
-						onMouseEnter={(e) => {
-							e.currentTarget.style.borderColor = "var(--brand)";
-							e.currentTarget.style.color = "var(--brand)";
-						}}
-						onMouseLeave={(e) => {
-							e.currentTarget.style.borderColor = "var(--border)";
-							e.currentTarget.style.color = "var(--muted)";
-						}}
-					>
-						<Icon name="add" size="sm" /> New Tool Type
-					</button>
-				</div>
-			</div>
-
-			{/* Right Panel - Editor */}
-			<div
-				style={{ flex: 1, overflow: "auto", padding: "1.5rem", minWidth: 0 }}
-			>
-				{!selectedToolTypeId && !isCreating ? (
-					<div
-						style={{
-							textAlign: "center",
-							paddingTop: "4rem",
-							color: "var(--muted)",
-						}}
-					>
-						<div style={{ opacity: 0.3, marginBottom: "1rem" }}>
-							<Icon name="code" size="lg" />
-						</div>
-						<h3 style={{ margin: "0 0 0.5rem 0", fontWeight: 500 }}>
-							Select a tool type
-						</h3>
-						<p style={{ margin: 0 }}>
-							Choose a tool from the list to edit, or create a new one.
-						</p>
-					</div>
-				) : (
-					<div>
-						{/* Header */}
-						<div style={{ marginBottom: "1.5rem" }}>
-							<h1 style={{ margin: "0 0 0.5rem 0", fontSize: "1.5rem" }}>
-								{isCreating
-									? "Create Tool Type"
-									: selectedToolType?.display_name}
-							</h1>
-							{!isCreating && (
-								<p className="muted" style={{ margin: 0 }}>
-									{selectedToolType?.name} · {selectedToolType?.definition_type}{" "}
-									·{" "}
-									{selectedToolType?.interface_type === "web"
-										? `Port ${selectedToolType?.default_port}`
-										: "Terminal"}
-								</p>
-							)}
-						</div>
-
-						{
-							<form
-								onSubmit={handleToolTypeSubmit}
-								className="stack"
-								style={{ gap: "1rem", maxWidth: "800px" }}
-							>
-								<div className="form-group">
-									<label htmlFor="definition-type">Definition Type</label>
-									<select
-										id="definition-type"
-										value={toolTypeForm.definition_type}
-										onChange={(e) => {
-											setToolTypeForm({
-												...toolTypeForm,
-												definition_type: e.target.value as
-													| "compose"
-													| "dockerfile",
-											});
-											setToolTypeDirty(true);
-										}}
-										className="form-input"
-										disabled={!isCreating}
-									>
-										<option value="compose">Docker Compose</option>
-										<option value="dockerfile">Dockerfile</option>
-										<option value="manifest">Manifest (Declarative)</option>
-									</select>
-								</div>
-
-								<div className="row" style={{ gap: "1rem" }}>
-									<div className="form-group" style={{ flex: 1 }}>
-										<label htmlFor="tool-type-name">Name *</label>
-										<input
-											id="tool-type-name"
-											type="text"
-											value={toolTypeForm.name}
-											onChange={(e) => {
-												setToolTypeForm({
-													...toolTypeForm,
-													name: e.target.value,
-												});
-												setToolTypeDirty(true);
-											}}
-											disabled={!isCreating}
-											placeholder="e.g., code-server"
-											className="form-input"
-											required
-										/>
-									</div>
-									<div className="form-group" style={{ flex: 1 }}>
-										<label htmlFor="tool-type-display-name">
-											Display Name *
-										</label>
-										<input
-											id="tool-type-display-name"
-											type="text"
-											value={toolTypeForm.display_name}
-											onChange={(e) => {
-												setToolTypeForm({
-													...toolTypeForm,
-													display_name: e.target.value,
-												});
-												setToolTypeDirty(true);
-											}}
-											placeholder="e.g., VS Code Server"
-											className="form-input"
-											required
-										/>
-									</div>
-								</div>
-
-								<div className="form-group">
-									<label htmlFor="tool-type-description">Description</label>
-									<input
-										id="tool-type-description"
-										type="text"
-										value={toolTypeForm.description}
-										onChange={(e) => {
-											setToolTypeForm({
-												...toolTypeForm,
-												description: e.target.value,
-											});
-											setToolTypeDirty(true);
-										}}
-										placeholder="Optional description"
-										className="form-input"
-									/>
-								</div>
-
-								<div className="row" style={{ gap: "1rem" }}>
-									<div className="form-group" style={{ flex: 1 }}>
-										<label htmlFor="tool-type-category">Category</label>
-										<input
-											id="tool-type-category"
-											type="text"
-											value={toolTypeForm.category}
-											onChange={(e) => {
-												setToolTypeForm({
-													...toolTypeForm,
-													category: e.target.value,
-												});
-												setToolTypeDirty(true);
-											}}
-											placeholder="e.g., editor, notebook, ai-assistant"
-											className="form-input"
-										/>
-									</div>
-									<div className="form-group" style={{ flex: 1 }}>
-										<label htmlFor="tool-type-interface">Interface Type</label>
-										<select
-											id="tool-type-interface"
-											value={toolTypeForm.interface_type}
-											onChange={(e) => {
-												const value = e.target.value as "web" | "terminal";
-												setToolTypeForm({
-													...toolTypeForm,
-													interface_type: value,
-													requires_port: value === "web",
-													default_port:
-														value === "web" ? toolTypeForm.default_port : "",
-												});
-												setToolTypeDirty(true);
-											}}
-											className="form-input"
-										>
-											<option value="web">Web</option>
-											<option value="terminal">Terminal</option>
-										</select>
-									</div>
-								</div>
-
-								{toolTypeForm.interface_type === "terminal" && (
-									<div className="form-group">
-										<label htmlFor="tool-type-startup-command">
-											Startup Command
-										</label>
-										<input
-											id="tool-type-startup-command"
-											type="text"
-											value={toolTypeForm.startup_command}
-											onChange={(e) => {
-												setToolTypeForm({
-													...toolTypeForm,
-													startup_command: e.target.value,
-												});
-												setToolTypeDirty(true);
-											}}
-											placeholder="e.g., cd /workspace && ls"
-											className="form-input"
-										/>
-										<small className="form-help">
-											Command to run before the interactive shell for each new
-											terminal session.
-										</small>
-									</div>
-								)}
-
-								{toolTypeForm.requires_port && (
-									<div className="form-group">
-										<label htmlFor="tool-type-default-port">
-											Default Port *
-										</label>
-										<input
-											id="tool-type-default-port"
-											type="number"
-											value={toolTypeForm.default_port}
-											onChange={(e) => {
-												setToolTypeForm({
-													...toolTypeForm,
-													default_port: e.target.value,
-												});
-												setToolTypeDirty(true);
-											}}
-											placeholder="e.g., 8443"
-											className="form-input"
-											required
-										/>
-									</div>
-								)}
-
-								{toolTypeForm.definition_type === "manifest" ? (
-									<ManifestEditor
-										manifest={manifestData}
-										baseDefinitions={baseDefinitions}
-										onChange={(m) => {
-											setManifestData(m);
-											setToolTypeDirty(true);
-										}}
-										definitionId={manifestDefinitionId}
-									/>
-								) : (
-									<div className="form-group">
-										<label htmlFor="tool-type-template">
-											{toolTypeForm.definition_type === "compose"
-												? "Compose Template"
-												: "Dockerfile"}{" "}
-											*
-										</label>
-										<textarea
-											id="tool-type-template"
-											value={
-												toolTypeForm.definition_type === "compose"
-													? toolTypeForm.compose_template
-													: toolTypeForm.dockerfile_template
-											}
-											onChange={(e) => {
-												if (toolTypeForm.definition_type === "compose") {
-													setToolTypeForm({
-														...toolTypeForm,
-														compose_template: e.target.value,
-													});
-												} else {
-													setToolTypeForm({
-														...toolTypeForm,
-														dockerfile_template: e.target.value,
-													});
-												}
-												setToolTypeDirty(true);
-											}}
-											rows={12}
-											placeholder={
-												toolTypeForm.definition_type === "compose"
-													? "version: '3.8'\nservices:\n  app:\n    image: ..."
-													: "FROM node:18\nWORKDIR /app\n..."
-											}
-											className="form-input"
-											style={{ fontFamily: "monospace", fontSize: "0.875rem" }}
-											required
-										/>
-									</div>
-								)}
-
-								<div className="form-group">
-									<label htmlFor="readiness-command">
-										Readiness Probe Command
-									</label>
-									<input
-										id="readiness-command"
-										type="text"
-										value={toolTypeForm.readiness_command}
-										onChange={(e) => {
-											setToolTypeForm({
-												...toolTypeForm,
-												readiness_command: e.target.value,
-											});
-											setToolTypeDirty(true);
-										}}
-										placeholder="e.g., curl -f http://localhost:8080"
-										className="form-input"
-									/>
-								</div>
-
-								<div className="row" style={{ gap: "1rem" }}>
-									<div className="form-group" style={{ flex: 1 }}>
-										<label htmlFor="readiness-timeout">Timeout (seconds)</label>
-										<input
-											id="readiness-timeout"
-											type="number"
-											value={toolTypeForm.readiness_timeout}
-											onChange={(e) => {
-												setToolTypeForm({
-													...toolTypeForm,
-													readiness_timeout: e.target.value,
-												});
-												setToolTypeDirty(true);
-											}}
-											className="form-input"
-										/>
-									</div>
-									<div className="form-group" style={{ flex: 1 }}>
-										<label htmlFor="readiness-interval">
-											Interval (seconds)
-										</label>
-										<input
-											id="readiness-interval"
-											type="number"
-											value={toolTypeForm.readiness_interval}
-											onChange={(e) => {
-												setToolTypeForm({
-													...toolTypeForm,
-													readiness_interval: e.target.value,
-												});
-												setToolTypeDirty(true);
-											}}
-											className="form-input"
-										/>
-									</div>
-								</div>
-
-								<div className="form-group">
-									<label>Required Variables (comma-separated)</label>
-									<input
-										type="text"
-										value={toolTypeForm.required_variables}
-										onChange={(e) => {
-											setToolTypeForm({
-												...toolTypeForm,
-												required_variables: e.target.value,
-											});
-											setToolTypeDirty(true);
-										}}
-										placeholder="REPO_PATH, TOOL_NAME"
-										className="form-input"
-									/>
-								</div>
-
-								{toolTypeError && <p className="text-error">{toolTypeError}</p>}
-
-								<div className="dialog-actions" style={{ marginTop: "1rem" }}>
-									<button type="submit">
-										<Icon name={isCreating ? "add" : "save"} size="sm" />
-										{isCreating ? "Create Tool Type" : "Save Changes"}
-									</button>
-									{toolTypeDirty && (
-										<button
-											type="button"
-											onClick={() => {
-												if (isCreating) {
-													resetToolTypeForm();
-												} else if (selectedToolType) {
-													populateToolTypeForm(selectedToolType);
-												}
-											}}
-											className="button-secondary"
-										>
-											<Icon name="cancel" size="sm" /> Discard
-										</button>
-									)}
-								</div>
-							</form>
-						}
-					</div>
-				)}
-			</div>
+				onSubmit={handleToolTypeSubmit}
+				onReset={handleReset}
+			/>
 		</div>
 	);
 };
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
new file mode 100644
index 0000000..f59da17
--- /dev/null
+++ b/apps/web/src/styles/global.css
@@ -0,0 +1,1206 @@
+
+.shell {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+.shell-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.85rem 1.25rem;
+	border-bottom: 1px solid var(--border);
+	background: color-mix(in srgb, var(--panel) 88%, transparent);
+	backdrop-filter: blur(7px);
+}
+
+[data-theme="dark"] .shell-header {
+	background: color-mix(in srgb, var(--panel) 88%, transparent);
+}
+
+.brand {
+	font-weight: 700;
+	letter-spacing: 0.02em;
+}
+
+.header-actions {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+
+.shell-body {
+	display: grid;
+	grid-template-columns: 230px 1fr;
+	height: calc(100vh - 57px);
+	flex: 1;
+}
+
+.shell-nav {
+	border-right: 1px solid var(--border);
+	padding: 1rem 0.75rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.4rem;
+	background: color-mix(in srgb, var(--panel) 65%, transparent);
+}
+
+.nav-item {
+	padding: 0.65rem 0.75rem;
+	border-radius: 10px;
+	color: var(--muted);
+}
+
+.nav-item:hover {
+	background: #ece7df;
+	color: var(--ink);
+}
+
+.nav-item-active {
+	background: var(--brand);
+	color: #f7fff7;
+}
+
+.nav-section-title {
+	margin-top: 0.5rem;
+	padding: 0.25rem 0.75rem;
+	font-size: var(--font-size-xs);
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--muted);
+}
+
+.nav-divider {
+	height: 1px;
+	background: var(--border);
+	margin: 0.5rem 0;
+}
+
+.shell-content {
+	padding: 1.25rem;
+	overflow-x: hidden;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	height: 100%;
+}
+
+.eyebrow {
+	margin: 0;
+	font-size: var(--font-size-xs);
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--muted);
+}
+
+.home-page,
+.settings-page {
+	max-width: 1240px;
+}
+
+.home-hero {
+	display: flex;
+	justify-content: space-between;
+	gap: var(--space-4);
+	align-items: flex-start;
+}
+
+.home-hero-actions {
+	display: flex;
+	gap: var(--space-2);
+	flex-wrap: wrap;
+}
+
+.home-summary-grid,
+.home-project-grid,
+.home-session-grid {
+	display: grid;
+	gap: var(--space-4);
+}
+
+.home-summary-grid {
+	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.home-project-grid,
+.home-session-grid {
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.home-section h2,
+.settings-header h1,
+.settings-panel h2 {
+	margin: 0;
+}
+
+.home-section h3,
+.home-section p {
+	margin: 0;
+}
+
+.row-tight {
+	gap: var(--space-2);
+}
+
+.settings-tabs {
+	display: flex;
+	gap: var(--space-2);
+	flex-wrap: wrap;
+}
+
+.settings-tab {
+	padding: 0.6rem 0.9rem;
+	border-radius: 999px;
+	border: 1px solid var(--border);
+	color: var(--muted);
+	background: var(--panel);
+}
+
+.settings-tab.active {
+	background: var(--brand);
+	color: white;
+	border-color: transparent;
+}
+
+.settings-panel {
+	padding: 1.5rem;
+}
+
+.settings-actions,
+.form-actions {
+	display: flex;
+	gap: var(--space-3);
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+.error-text {
+	color: var(--danger);
+}
+
+.success-text {
+	color: var(--success);
+}
+
+.small {
+	padding: 0.42rem 0.7rem;
+	min-height: 38px;
+}
+
+.session-card,
+.project-card,
+.recent-session-item {
+	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
+}
+
+/* Responsive Shell */
+@media (max-width: 767px) {
+	.shell-body {
+		grid-template-columns: 1fr;
+		grid-template-rows: auto 1fr;
+	}
+
+	.shell-nav {
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+		padding: 0.5rem;
+		border-right: none;
+		border-bottom: 1px solid var(--border);
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.nav-item {
+		padding: 0.5rem 0.75rem;
+		white-space: nowrap;
+		font-size: var(--font-size-sm);
+	}
+
+	.shell-content {
+		padding: var(--space-4);
+		height: 100%;
+	}
+}
+
+.stack {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.muted {
+	color: var(--muted);
+}
+
+.card-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+	gap: var(--space-4);
+}
+
+@media (min-width: 768px) {
+	.card-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+@media (min-width: 1024px) {
+	.card-grid {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+}
+
+.card {
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 14px;
+	padding: 1rem;
+}
+
+.card-label {
+	margin: 0;
+	color: var(--muted);
+}
+
+.card-value {
+	margin: 0.45rem 0 0;
+	font-size: 1.6rem;
+	font-weight: 700;
+}
+
+.quick-actions {
+	display: flex;
+	gap: 0.6rem;
+}
+
+.primary-button,
+.secondary-button,
+.ghost-button {
+	border-radius: 10px;
+	border: 1px solid transparent;
+	padding: 0.58rem 0.85rem;
+	cursor: pointer;
+	font: inherit;
+}
+
+.primary-button {
+	background: var(--brand);
+	color: white;
+}
+
+.primary-button:hover {
+	background: var(--brand-strong);
+}
+
+.secondary-button {
+	border-color: var(--border);
+	background: var(--panel);
+}
+
+.ghost-button {
+	border-color: var(--border);
+	background: transparent;
+}
+
+.user-chip {
+	border: 1px solid var(--border);
+	background: var(--panel);
+	border-radius: 999px;
+	padding: 0.35rem 0.7rem;
+	font-size: 0.9rem;
+}
+
+.center-screen {
+	min-height: 55vh;
+	display: grid;
+	place-content: center;
+	text-align: center;
+}
+
+.page-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--space-3);
+}
+
+@media (max-width: 767px) {
+	.page-header {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+}
+
+.project-list {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.project-card {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	gap: 1rem;
+}
+
+.project-info h3 {
+	margin: 0 0 0.35rem;
+}
+
+.project-info p {
+	margin: 0;
+}
+
+.project-actions {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.delete-confirm {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+.danger-button {
+	border-radius: 10px;
+	border: 1px solid transparent;
+	padding: 0.58rem 0.85rem;
+	cursor: pointer;
+	font: inherit;
+	background: #b91c1c;
+	color: white;
+}
+
+.danger-text {
+	color: #b91c1c;
+}
+
+.error-text {
+	color: #b91c1c;
+	margin: 0;
+}
+
+.dialog-overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.35);
+	display: grid;
+	place-content: center;
+	z-index: 50;
+}
+
+.dialog {
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 14px;
+	padding: var(--space-5);
+	width: min(560px, 100vw - 2rem);
+	max-height: min(800px, 100vh - 2rem);
+	overflow-y: auto;
+}
+
+.dialog-lg {
+	width: min(800px, 100vw - 2rem);
+}
+
+@media (max-width: 767px) {
+	.dialog {
+		width: 100vw;
+		height: 100vh;
+		max-height: 100vh;
+		border-radius: 0;
+		padding: var(--space-4);
+	}
+
+	.dialog-overlay {
+		padding: 0;
+	}
+}
+
+.dialog h2 {
+	margin: 0 0 1rem;
+}
+
+.form-field {
+	display: flex;
+	flex-direction: column;
+	gap: 0.35rem;
+}
+
+.form-field input,
+.form-field textarea,
+.form-field select {
+	padding: 0.55rem 0.7rem;
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	font: inherit;
+	background: var(--panel);
+	color: var(--ink);
+}
+
+.dialog-actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.6rem;
+}
+
+.keys-list {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.key-card {
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 14px;
+	padding: 1rem;
+}
+
+.key-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 0.5rem;
+}
+
+.key-header h3 {
+	margin: 0;
+}
+
+.key-meta {
+	margin-bottom: 0.75rem;
+}
+
+.key-public {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 0.5rem;
+	background: #f5f3ee;
+	border-radius: 8px;
+}
+
+.key-public code {
+	font-size: 0.85rem;
+	word-break: break-all;
+	flex: 1;
+}
+
+.form-group {
+	display: flex;
+	flex-direction: column;
+	gap: 0.35rem;
+}
+
+.form-group input {
+	padding: 0.55rem 0.7rem;
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	font: inherit;
+}
+
+.error {
+	color: #b91c1c;
+	padding: 0.75rem;
+	background: #fef2f2;
+	border-radius: 10px;
+}
+
+@media (max-width: 860px) {
+	.shell-body {
+		grid-template-columns: 1fr;
+	}
+
+	.shell-nav {
+		flex-direction: row;
+		overflow-x: auto;
+		border-right: 0;
+		border-bottom: 1px solid var(--border);
+	}
+
+	.card-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.quick-actions {
+		flex-direction: column;
+	}
+
+	.project-card {
+		flex-direction: column;
+	}
+}
+
+/* URL Validation Styles */
+.valid-url {
+	border-color: var(--success, #16a34a) !important;
+	background-color: var(--success-light, #f0fdf4) !important;
+}
+
+.needs-parsing-url {
+	border-color: var(--warning, #ca8a04) !important;
+	background-color: var(--warning-light, #fefce8) !important;
+}
+
+.invalid-url {
+	border-color: var(--danger, #dc2626) !important;
+	background-color: var(--danger-light, #fef2f2) !important;
+}
+
+.validation-status {
+	font-size: 0.85rem;
+	margin-top: 0.25rem;
+	display: block;
+}
+
+.validation-status.valid {
+	color: var(--success, #16a34a);
+}
+
+.validation-status.warning {
+	color: var(--warning, #ca8a04);
+}
+
+.validation-status.invalid {
+	color: #dc2626;
+}
+
+.validation-status.validating {
+	color: var(--muted);
+}
+
+.url-suggestion {
+	margin-top: 0.5rem;
+	padding: 0.5rem;
+	background: #fefce8;
+	border-radius: 8px;
+	border: 1px solid #fde047;
+}
+
+.suggestion-actions {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	margin-top: 0.35rem;
+}
+
+.suggested-url {
+	font-size: 0.85rem;
+	color: #854d0e;
+	flex: 1;
+	word-break: break-all;
+}
+
+.secondary-button.small {
+	padding: 0.35rem 0.6rem;
+	font-size: 0.85rem;
+}
+
+/* Modal Styles */
+.modal-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.5);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1000;
+}
+
+.modal-content {
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	padding: 1.5rem;
+	min-width: 400px;
+	max-width: 600px;
+	max-height: 80vh;
+	overflow: auto;
+}
+
+.modal-content h2 {
+	margin: 0 0 1rem 0;
+	font-size: 1.25rem;
+}
+
+.modal-actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.75rem;
+	margin-top: 1.5rem;
+}
+
+/* Merge Dialog */
+.merge-form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.merge-form .form-field {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+}
+
+.merge-form label {
+	font-size: 0.875rem;
+	font-weight: 500;
+}
+
+.merge-form select,
+.merge-form input,
+.merge-form textarea {
+	padding: 0.5rem;
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	background: var(--bg);
+	color: var(--ink);
+	font-family: inherit;
+	font-size: 0.875rem;
+}
+
+.merge-form textarea {
+	resize: vertical;
+}
+
+.input-disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+.success-text {
+	color: #10b981;
+	font-size: 0.875rem;
+	padding: 0.5rem;
+	background: rgba(16, 185, 129, 0.1);
+	border-radius: 4px;
+}
+
+/* Settings Layout */
+.settings-layout {
+	display: flex;
+	gap: 2rem;
+	padding: 1.5rem 0;
+}
+
+.settings-sidebar {
+	width: 200px;
+	flex-shrink: 0;
+}
+
+.settings-nav {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.settings-nav-link {
+	padding: 0.625rem 1rem;
+	border-radius: 8px;
+	color: var(--muted);
+	text-decoration: none;
+	font-size: 0.95rem;
+	transition: all 0.2s;
+}
+
+.settings-nav-link:hover {
+	background: var(--bg);
+	color: var(--ink);
+}
+
+.settings-nav-link.active {
+	background: var(--brand);
+	color: white;
+	font-weight: 500;
+}
+
+.settings-content {
+	flex: 1;
+	min-width: 0;
+}
+
+.settings-panel {
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 14px;
+	padding: 1.5rem;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+	.settings-layout {
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.settings-sidebar {
+		width: 100%;
+	}
+
+	.settings-nav {
+		flex-direction: row;
+		overflow-x: auto;
+		padding-bottom: 0.5rem;
+	}
+
+	.settings-nav-link {
+		white-space: nowrap;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+	}
+
+	.workspace-header {
+		flex-direction: column;
+		gap: 1rem;
+		align-items: flex-start;
+	}
+
+	.workspace-header-actions {
+		width: 100%;
+		justify-content: flex-start;
+	}
+}
+
+.settings-panel h2 {
+	margin: 0 0 1.25rem;
+	font-size: 1.25rem;
+}
+
+.settings-breadcrumb {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 0.9rem;
+	color: var(--muted);
+	margin-bottom: 1rem;
+}
+
+.settings-breadcrumb a {
+	color: var(--brand);
+	text-decoration: none;
+}
+
+.settings-breadcrumb a:hover {
+	text-decoration: underline;
+}
+
+.project-settings-page {
+	padding: 1.5rem;
+}
+
+/* Repositories Settings Tab */
+.repositories-settings-tab h2 {
+	margin: 0 0 1.25rem;
+	font-size: 1.25rem;
+}
+
+.repositories-list {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.repository-card {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem;
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+}
+
+.repository-info h3 {
+	margin: 0 0 0.25rem;
+	font-size: 1rem;
+}
+
+.repository-info p {
+	margin: 0 0 0.5rem;
+	font-size: 0.85rem;
+	color: var(--muted);
+}
+
+.repo-type {
+	font-size: 0.75rem;
+	padding: 0.2rem 0.5rem;
+	background: var(--brand);
+	color: white;
+	border-radius: 999px;
+}
+
+/* Commit Dialog */
+.dialog-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.5);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1000;
+	padding: 1rem;
+}
+
+.commit-dialog {
+	background: var(--panel);
+	border-radius: 14px;
+	width: 100%;
+	max-width: 600px;
+	max-height: 90vh;
+	overflow: auto;
+	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}
+
+.dialog-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem 1.5rem;
+	border-bottom: 1px solid var(--border);
+}
+
+.dialog-header h3 {
+	margin: 0;
+	font-size: 1.1rem;
+}
+
+.dialog-close {
+	background: none;
+	border: none;
+	font-size: 1.5rem;
+	cursor: pointer;
+	color: var(--muted);
+	padding: 0;
+	width: 2rem;
+	height: 2rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 6px;
+}
+
+.dialog-close:hover {
+	background: var(--bg);
+	color: var(--ink);
+}
+
+.dialog-body {
+	padding: 1.5rem;
+}
+
+.file-info {
+	margin: 0 0 1rem;
+	color: var(--muted);
+}
+
+.diff-preview {
+	margin-bottom: 1.5rem;
+}
+
+.diff-preview h4 {
+	margin: 0 0 0.75rem;
+	font-size: 0.9rem;
+	color: var(--muted);
+}
+
+.diff-content {
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	overflow: auto;
+	max-height: 300px;
+	font-family: "Fira Code", "Monaco", "Courier New", monospace;
+	font-size: 13px;
+}
+
+.diff-line {
+	display: flex;
+	padding: 0.15rem 0.5rem;
+	gap: 0.5rem;
+}
+
+.diff-line-number {
+	color: var(--muted);
+	min-width: 2rem;
+	text-align: right;
+	user-select: none;
+}
+
+.diff-marker {
+	width: 1rem;
+	text-align: center;
+	font-weight: bold;
+}
+
+.diff-added {
+	background: rgba(16, 185, 129, 0.1);
+}
+
+.diff-added .diff-marker {
+	color: #059669;
+}
+
+.diff-removed {
+	background: rgba(239, 68, 68, 0.1);
+}
+
+.diff-removed .diff-marker {
+	color: #dc2626;
+}
+
+.diff-same {
+	background: transparent;
+}
+
+.warning-message {
+	padding: 0.75rem;
+	background: rgba(245, 158, 11, 0.1);
+	color: #d97706;
+	border-radius: 8px;
+	margin-bottom: 1rem;
+}
+
+.dialog-footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.75rem;
+	padding: 1rem 1.5rem;
+	border-top: 1px solid var(--border);
+}
+
+/* Icon System */
+.icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	vertical-align: middle;
+}
+
+.icon svg {
+	display: block;
+}
+
+.icon-sm {
+	width: 16px;
+	height: 16px;
+}
+
+.icon-md {
+	width: 20px;
+	height: 20px;
+}
+
+.icon-lg {
+	width: 24px;
+	height: 24px;
+}
+
+.icon-xl {
+	width: 32px;
+	height: 32px;
+}
+
+/* Button icons */
+button .icon,
+a .icon {
+	margin-right: 0.35rem;
+}
+
+button .icon:last-child,
+a .icon:last-child {
+	margin-right: 0;
+}
+
+/* Navigation icons */
+.nav-item .icon {
+	margin-right: 0.5rem;
+}
+
+/* Status badge icons */
+.status-badge .icon {
+	margin-right: 0.25rem;
+}
+
+/* ─── Tool Starter ─── */
+.tool-starter {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-4);
+}
+
+.tool-starter-context {
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	padding: var(--space-3);
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+}
+
+.context-row {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	flex-wrap: wrap;
+}
+
+.context-label {
+	font-size: var(--font-size-sm);
+	color: var(--muted);
+	min-width: 80px;
+}
+
+.context-value {
+	font-weight: 500;
+}
+
+.ssh-key-status {
+	padding: var(--space-2);
+	background: var(--bg);
+	border-radius: 8px;
+}
+
+.ssh-key-status .success-text,
+.ssh-key-status .warning-text {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	font-size: var(--font-size-sm);
+}
+
+/* ─── Instance Chips ─── */
+.instance-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--space-2);
+	margin-top: var(--space-2);
+}
+
+.instance-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+	padding: 0.2rem 0.5rem;
+	border-radius: 999px;
+	font-size: var(--font-size-sm);
+	background: var(--bg);
+	border: 1px solid var(--border);
+}
+
+.instance-chip.running {
+	background: var(--success-light);
+	border-color: var(--success);
+	color: var(--success);
+}
+
+.instance-chip.starting,
+.instance-chip.building,
+.instance-chip.probing {
+	background: var(--warning-light);
+	border-color: var(--warning);
+	color: var(--warning);
+}
+
+.instance-chip.error,
+.instance-chip.unhealthy,
+.instance-chip.stopped {
+	background: var(--danger-light);
+	border-color: var(--danger);
+	color: var(--danger);
+}
+
+.instance-chip a {
+	font-size: 0.75rem;
+	opacity: 0.7;
+}
+
+.instance-chip a:hover {
+	opacity: 1;
+}
+
+/* ─── Tool Starter Header ─── */
+.tool-starter-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: var(--space-3);
+	padding-bottom: var(--space-2);
+	border-bottom: 1px solid var(--border);
+}
+
+.tool-starter-header h4 {
+	margin: 0;
+}
+
+/* ─── Floating Action Button ─── */
+.start-tool-fab {
+	position: fixed;
+	bottom: 2rem;
+	right: 2rem;
+	z-index: 100;
+	width: 3.5rem;
+	height: 3.5rem;
+	border-radius: 50%;
+	background: var(--primary);
+	color: var(--primary-fg);
+	border: none;
+	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition:
+		transform 0.15s ease,
+		box-shadow 0.15s ease;
+}
+
+.start-tool-fab:hover {
+	transform: scale(1.08);
+	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+.start-tool-fab:active {
+	transform: scale(0.95);
+}
+
+.start-tool-modal {
+	max-width: 480px;
+	width: 90vw;
+}
+
+.modal-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: var(--space-3);
+}
+
+.modal-header h3 {
+	margin: 0;
+}
+
+@media (max-width: 640px) {
+	.start-tool-fab {
+		bottom: 5rem; /* above mobile tab bar */
+		right: 1rem;
+		width: 3rem;
+		height: 3rem;
+	}
+}
diff --git a/apps/web/src/styles/pages/git-history.css b/apps/web/src/styles/pages/git-history.css
new file mode 100644
index 0000000..7d78b8a
--- /dev/null
+++ b/apps/web/src/styles/pages/git-history.css
@@ -0,0 +1,257 @@
+/* Git History Page Styles */
+.history-actions {
+	display: flex;
+	gap: 0.75rem;
+	align-items: center;
+}
+
+.branch-selector {
+	padding: 0.45rem 0.7rem;
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	font: inherit;
+	background: var(--panel);
+	color: var(--ink);
+}
+
+.history-container {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 1rem;
+	min-height: 60vh;
+}
+
+.commit-list {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	overflow-y: auto;
+	max-height: 70vh;
+}
+
+.commit-list.with-detail {
+	grid-column: 1;
+}
+
+.commit-item {
+	display: flex;
+	gap: 0.75rem;
+	padding: 0.75rem;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	cursor: pointer;
+	transition: background-color 0.15s ease;
+}
+
+.commit-item:hover {
+	background: #ece7df;
+}
+
+.commit-item.selected {
+	border-color: var(--brand);
+	background: #f0f7f4;
+}
+
+.commit-graph {
+	font-family: monospace;
+	font-size: 0.9rem;
+	color: var(--brand);
+	white-space: pre;
+	flex-shrink: 0;
+	min-width: 60px;
+}
+
+.graph-line {
+	display: inline-block;
+}
+
+.commit-content {
+	flex: 1;
+	min-width: 0;
+}
+
+.commit-header {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	margin-bottom: 0.35rem;
+}
+
+.commit-hash {
+	font-family: monospace;
+	font-size: 0.85rem;
+	color: var(--brand);
+	background: #f0f7f4;
+	padding: 0.15rem 0.4rem;
+	border-radius: 6px;
+}
+
+.commit-refs {
+	display: flex;
+	gap: 0.35rem;
+	flex-wrap: wrap;
+}
+
+.ref-tag {
+	font-size: 0.75rem;
+	padding: 0.15rem 0.4rem;
+	background: var(--brand);
+	color: white;
+	border-radius: 999px;
+}
+
+.commit-message {
+	margin: 0 0 0.35rem;
+	font-weight: 500;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.commit-meta {
+	display: flex;
+	gap: 0.75rem;
+	font-size: 0.85rem;
+	color: var(--muted);
+}
+
+.commit-detail-panel {
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 14px;
+	padding: 1.25rem;
+	overflow-y: auto;
+	max-height: 70vh;
+}
+
+.detail-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 1rem;
+	padding-bottom: 0.75rem;
+	border-bottom: 1px solid var(--border);
+}
+
+.detail-header h3 {
+	margin: 0;
+}
+
+.detail-content {
+	display: flex;
+	flex-direction: column;
+	gap: 1.25rem;
+}
+
+.detail-section {
+	display: flex;
+	flex-direction: column;
+	gap: 0.35rem;
+}
+
+.detail-section h4 {
+	margin: 0 0 0.5rem;
+	color: var(--muted);
+	font-size: 0.9rem;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+.commit-hash-full {
+	font-family: monospace;
+	font-size: 0.85rem;
+	color: var(--brand);
+	margin: 0;
+}
+
+.commit-message-full {
+	margin: 0.5rem 0 0;
+	line-height: 1.5;
+	white-space: pre-wrap;
+}
+
+.stats-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 0.75rem;
+}
+
+.stat {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 0.75rem;
+	background: #f5f3ee;
+	border-radius: 10px;
+}
+
+.stat.additions {
+	background: #f0fdf4;
+}
+
+.stat.deletions {
+	background: #fef2f2;
+}
+
+.stat-value {
+	font-size: 1.25rem;
+	font-weight: 700;
+	color: var(--ink);
+}
+
+.stat.additions .stat-value {
+	color: #16a34a;
+}
+
+.stat.deletions .stat-value {
+	color: #dc2626;
+}
+
+.stat-label {
+	font-size: 0.8rem;
+	color: var(--muted);
+}
+
+.parent-list {
+	display: flex;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+}
+
+.parent-hash {
+	font-family: monospace;
+	font-size: 0.85rem;
+	padding: 0.2rem 0.5rem;
+	background: #f5f3ee;
+	border-radius: 6px;
+}
+
+.diff-content {
+	font-family: monospace;
+	font-size: 0.8rem;
+	line-height: 1.5;
+	background: #f5f3ee;
+	padding: 0.75rem;
+	border-radius: 10px;
+	overflow-x: auto;
+	white-space: pre-wrap;
+	word-break: break-all;
+}
+
+@media (min-width: 1024px) {
+	.history-container {
+		grid-template-columns: 1fr 400px;
+	}
+
+	.commit-list.with-detail {
+		grid-column: 1;
+	}
+
+	.commit-detail-panel {
+		grid-column: 2;
+		position: sticky;
+		top: 1rem;
+	}
+}
+
diff --git a/apps/web/src/styles/pages/projects.css b/apps/web/src/styles/pages/projects.css
new file mode 100644
index 0000000..0e7c53f
--- /dev/null
+++ b/apps/web/src/styles/pages/projects.css
@@ -0,0 +1,132 @@
+/* ─── Projects Page Refresh ─── */
+
+.project-info-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--space-3);
+	flex-wrap: wrap;
+}
+
+.project-toggle {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	background: none;
+	border: none;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+	padding: var(--space-2);
+	border-radius: 10px;
+	flex: 1;
+}
+
+.project-toggle:hover {
+	background: var(--bg);
+}
+
+.project-toggle h3 {
+	margin: 0;
+	font-size: var(--font-size-lg);
+}
+
+.repo-count {
+	font-size: var(--font-size-xs);
+	padding: var(--space-1) var(--space-2);
+	background: var(--bg);
+	border-radius: 999px;
+	color: var(--muted);
+}
+
+.project-detail {
+	margin-top: var(--space-4);
+	padding-top: var(--space-4);
+	border-top: 1px solid var(--border);
+}
+
+.repo-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-4);
+}
+
+.repo-block {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+	padding: var(--space-4);
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+}
+
+.repo-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--space-3);
+	flex-wrap: wrap;
+}
+
+.repo-header h4 {
+	margin: 0;
+	font-size: var(--font-size-base);
+}
+
+.workspace-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: var(--space-3);
+}
+
+.workspace-chip {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+	padding: var(--space-3);
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	font-size: var(--font-size-sm);
+}
+
+.workspace-chip a {
+	font-weight: 600;
+	color: var(--brand);
+}
+
+.workspace-chip .ws-branch {
+	color: var(--muted);
+	font-size: var(--font-size-xs);
+}
+
+.workspace-chip .ws-instances {
+	font-size: var(--font-size-xs);
+	color: var(--success);
+}
+
+.workspace-chip .ws-actions {
+	display: flex;
+	gap: var(--space-1);
+	margin-top: var(--space-1);
+}
+
+.workspace-chip .ws-actions button {
+	background: none;
+	border: none;
+	color: var(--muted);
+	cursor: pointer;
+	padding: var(--space-1);
+	border-radius: 4px;
+}
+
+.workspace-chip .ws-actions button:hover {
+	background: var(--bg);
+	color: var(--ink);
+}
+
+.workspace-chip .ws-actions button.danger-text:hover {
+	color: var(--danger);
+}
+
diff --git a/apps/web/src/styles/pages/repo-workspace.css b/apps/web/src/styles/pages/repo-workspace.css
new file mode 100644
index 0000000..a7cee7e
--- /dev/null
+++ b/apps/web/src/styles/pages/repo-workspace.css
@@ -0,0 +1,709 @@
+/* Repository Workspace */
+.repo-workspace {
+	display: flex;
+	flex-direction: column;
+	height: calc(100vh - 60px);
+	overflow: hidden;
+}
+
+.workspace-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem 1.5rem;
+	border-bottom: 1px solid var(--border);
+	background: var(--panel);
+}
+
+.workspace-header-left {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+
+.workspace-header-icon {
+	font-size: 1.5rem;
+}
+
+.workspace-header-info {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.workspace-header-title {
+	margin: 0;
+	font-size: 1.25rem;
+	font-weight: 600;
+}
+
+.workspace-header-subtitle {
+	color: var(--muted);
+	font-size: 0.875rem;
+}
+
+.workspace-header-actions {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.workspace-header-action-btn {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.5rem 1rem;
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	background: var(--panel);
+	color: var(--ink);
+	font-size: 0.875rem;
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.workspace-header-action-btn:hover {
+	background: var(--bg);
+	border-color: var(--brand);
+}
+
+.workspace-title {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.workspace-title h1 {
+	margin: 0;
+	font-size: 1.25rem;
+}
+
+.repo-name {
+	color: var(--muted);
+	font-size: 0.875rem;
+}
+
+.workspace-layout {
+	display: flex;
+	flex: 1;
+	overflow: hidden;
+}
+
+.workspace-sidebar {
+	width: 280px;
+	min-width: 280px;
+	border-right: 1px solid var(--border);
+	background: var(--panel);
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+@media (max-width: 767px) {
+	.workspace-layout {
+		flex-direction: column;
+	}
+
+	.workspace-sidebar {
+		width: 100%;
+		min-width: auto;
+		max-height: 40vh;
+		border-right: none;
+		border-bottom: 1px solid var(--border);
+	}
+
+	.workspace-header {
+		flex-direction: column;
+		gap: var(--space-3);
+		align-items: flex-start;
+		padding: var(--space-4);
+	}
+
+	.workspace-header-actions {
+		width: 100%;
+		flex-wrap: wrap;
+	}
+}
+
+.sidebar-section {
+	padding: 1rem;
+	border-bottom: 1px solid var(--border);
+}
+
+.sidebar-section label {
+	margin: 0;
+}
+
+.workspace-main {
+	flex: 1;
+	overflow: hidden;
+	padding: 1rem;
+	background: var(--bg);
+	display: flex;
+	flex-direction: column;
+}
+
+/* File Tree */
+.file-tree {
+	flex: 1;
+	overflow: auto;
+	padding: 0.5rem;
+}
+
+.tree-entry {
+	display: block;
+	width: 100%;
+	padding: 0.375rem 0.5rem;
+	border: none;
+	background: none;
+	color: var(--ink);
+	text-align: left;
+	cursor: pointer;
+	border-radius: 4px;
+	font-size: 0.875rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.tree-entry:hover {
+	background: var(--bg);
+}
+
+.tree-directory {
+	font-weight: 500;
+}
+
+.tree-up {
+	color: var(--muted);
+	font-style: italic;
+}
+
+/* File Viewer */
+.file-viewer {
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	overflow: hidden;
+}
+
+.file-viewer-header {
+	padding: 0.75rem 1rem;
+	border-bottom: 1px solid var(--border);
+	background: var(--bg);
+}
+
+.file-breadcrumbs {
+	font-size: 0.875rem;
+	font-family: monospace;
+}
+
+.breadcrumb-sep {
+	color: var(--muted);
+	margin: 0 0.25rem;
+}
+
+.file-content {
+	padding: 1rem;
+	overflow: auto;
+	max-height: calc(100vh - 200px);
+}
+
+.file-content pre {
+	margin: 0;
+	font-family: "IBM Plex Mono", monospace;
+	font-size: 0.875rem;
+	line-height: 1.5;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+.file-viewer-empty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	min-height: 300px;
+}
+
+/* File Status Indicators */
+.file-status-indicator {
+	float: right;
+	font-size: 0.75rem;
+	font-weight: bold;
+	padding: 0 0.375rem;
+	border-radius: 3px;
+	margin-left: 0.5rem;
+}
+
+.file-status-indicator.modified {
+	color: #f59e0b;
+	background: rgba(245, 158, 11, 0.1);
+}
+
+.file-status-indicator.added {
+	color: #10b981;
+	background: rgba(16, 185, 129, 0.1);
+}
+
+.file-status-indicator.deleted {
+	color: #ef4444;
+	background: rgba(239, 68, 68, 0.1);
+}
+
+.file-status-indicator.untracked {
+	color: #6b7280;
+	background: rgba(107, 114, 128, 0.1);
+}
+
+/* Commit Panel */
+.commit-panel {
+	padding: 1rem;
+	border-top: 1px solid var(--border);
+	background: var(--panel);
+}
+
+.commit-panel h4 {
+	margin: 0 0 0.5rem 0;
+	font-size: 0.875rem;
+	font-weight: 600;
+}
+
+.file-list {
+	max-height: 150px;
+	overflow: auto;
+	margin-bottom: 0.75rem;
+}
+
+.file-item {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.25rem 0;
+	font-size: 0.8125rem;
+}
+
+.file-status {
+	font-weight: bold;
+	font-size: 0.75rem;
+	width: 1rem;
+	text-align: center;
+}
+
+.file-item.modified .file-status {
+	color: #f59e0b;
+}
+.file-item.added .file-status {
+	color: #10b981;
+}
+.file-item.deleted .file-status {
+	color: #ef4444;
+}
+.file-item.untracked .file-status {
+	color: #6b7280;
+}
+
+.commit-form {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.commit-message-input {
+	width: 100%;
+	padding: 0.5rem;
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	background: var(--bg);
+	color: var(--ink);
+	font-family: inherit;
+	font-size: 0.875rem;
+	resize: vertical;
+}
+
+.commit-button {
+	padding: 0.5rem 1rem;
+	background: var(--primary);
+	color: white;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 0.875rem;
+	font-weight: 500;
+}
+
+.commit-button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.commit-error {
+	color: #ef4444;
+	font-size: 0.8125rem;
+}
+
+/* Merge Dialog */
+.merge-form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.merge-form .form-field {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+}
+
+.merge-form label {
+	font-size: 0.875rem;
+	font-weight: 500;
+}
+
+.merge-form select,
+.merge-form input,
+.merge-form textarea {
+	padding: 0.5rem;
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	background: var(--bg);
+	color: var(--ink);
+	font-family: inherit;
+	font-size: 0.875rem;
+}
+
+.merge-form textarea {
+	resize: vertical;
+}
+
+.input-disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+.success-text {
+	color: #10b981;
+	font-size: 0.875rem;
+	padding: 0.5rem;
+	background: rgba(16, 185, 129, 0.1);
+	border-radius: 4px;
+}
+
+/* Git Toolbar - Top Bar Styles */
+.git-toolbar {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	padding: 0.5rem 1.5rem;
+	background: var(--bg);
+	border-bottom: 1px solid var(--border);
+	min-height: 48px;
+}
+
+.toolbar-row {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	flex-wrap: wrap;
+}
+
+.toolbar-group {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.toolbar-button {
+	display: flex;
+	align-items: center;
+	gap: 0.35rem;
+	padding: 0.4rem 0.75rem;
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	background: var(--panel);
+	color: var(--ink);
+	font-size: 0.85rem;
+	cursor: pointer;
+	transition: all 0.2s;
+	white-space: nowrap;
+}
+
+.toolbar-button:hover:not(:disabled) {
+	background: var(--brand);
+	color: white;
+	border-color: var(--brand);
+}
+
+.toolbar-button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.toolbar-button.primary {
+	background: var(--brand);
+	color: white;
+	border-color: var(--brand);
+}
+
+.branch-select {
+	padding: 0.4rem 0.75rem;
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	background: var(--panel);
+	color: var(--ink);
+	font-size: 0.85rem;
+	cursor: pointer;
+	min-width: 140px;
+}
+
+.badge {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 18px;
+	height: 18px;
+	padding: 0 4px;
+	background: var(--brand);
+	color: white;
+	font-size: 0.7rem;
+	font-weight: 600;
+	border-radius: 999px;
+}
+
+.toolbar-error {
+	color: #ef4444;
+	font-size: 0.85rem;
+	padding: 0.25rem 0.5rem;
+	background: rgba(239, 68, 68, 0.1);
+	border-radius: 4px;
+}
+
+.toolbar-input {
+	padding: 0.4rem 0.75rem;
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	background: var(--panel);
+	color: var(--ink);
+	font-size: 0.85rem;
+}
+
+.new-branch-form {
+	padding: 0.75rem;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	margin-top: 0.5rem;
+}
+
+.status-summary {
+	gap: 0.75rem;
+}
+
+.status-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25rem;
+	padding: 0.2rem 0.5rem;
+	border-radius: 4px;
+	font-size: 0.8rem;
+}
+
+.status-badge.modified {
+	background: rgba(245, 158, 11, 0.1);
+	color: #d97706;
+}
+
+.status-badge.added {
+	background: rgba(16, 185, 129, 0.1);
+	color: #059669;
+}
+
+.status-badge.deleted {
+	background: rgba(239, 68, 68, 0.1);
+	color: #dc2626;
+}
+
+.status-badge.untracked {
+	background: rgba(107, 114, 128, 0.1);
+	color: #4b5563;
+}
+
+/* File Editor */
+.file-editor {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	overflow: hidden;
+}
+
+.file-editor-toolbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.75rem 1rem;
+	background: var(--panel);
+	border-bottom: 1px solid var(--border);
+}
+
+.file-actions {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.file-editor-content {
+	flex: 1;
+	overflow: hidden;
+	background: var(--bg);
+	display: flex;
+	flex-direction: column;
+}
+
+/* Git Mount Editor Styles */
+.git-mount-editor {
+	margin-top: 1rem;
+}
+
+.git-mount-editor .section-subtitle {
+	margin: 0 0 0.75rem 0;
+	font-size: 1rem;
+	font-weight: 600;
+}
+
+.git-mount-list {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	margin-bottom: 1rem;
+}
+
+.git-mount-item {
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: 0.5rem;
+	padding: 0.75rem;
+}
+
+.git-mount-display {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.git-mount-info {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.git-mount-repo {
+	font-weight: 600;
+	color: var(--text);
+}
+
+.git-mount-paths {
+	font-size: 0.875rem;
+	color: var(--text-muted);
+	font-family: monospace;
+}
+
+.git-mount-branch {
+	font-size: 0.75rem;
+	color: var(--accent);
+	background: var(--accent-bg);
+	padding: 0.125rem 0.375rem;
+	border-radius: 0.25rem;
+	width: fit-content;
+}
+
+.git-mount-actions {
+	display: flex;
+	gap: 0.25rem;
+}
+
+.git-mount-add {
+	border-top: 1px solid var(--border);
+	padding-top: 1rem;
+	margin-top: 1rem;
+}
+
+.git-mount-add h5 {
+	margin: 0 0 0.75rem 0;
+	font-size: 0.875rem;
+	font-weight: 600;
+	color: var(--text-muted);
+}
+
+.git-mount-form {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.git-mount-form .form-row {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.git-mount-form .form-row label {
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--text);
+}
+
+.git-mount-form .form-row input,
+.git-mount-form .form-row select {
+	padding: 0.5rem;
+	border: 1px solid var(--border);
+	border-radius: 0.375rem;
+	background: var(--bg);
+	color: var(--text);
+	font-size: 0.875rem;
+}
+
+.git-mount-form .form-row input.error,
+.git-mount-form .form-row select.error {
+	border-color: #cd3131;
+}
+
+.git-mount-form .form-row .hint {
+	font-size: 0.75rem;
+	color: var(--text-muted);
+}
+
+.git-mount-form .form-row .error-text {
+	font-size: 0.75rem;
+	color: #cd3131;
+}
+
+.git-mount-form .form-actions {
+	display: flex;
+	gap: 0.5rem;
+	margin-top: 0.5rem;
+}
+
+.new-repo-form {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding: 0.75rem;
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 0.375rem;
+}
+
+.new-repo-form input {
+	padding: 0.5rem;
+	border: 1px solid var(--border);
+	border-radius: 0.375rem;
+	background: var(--surface);
+	color: var(--text);
+	font-size: 0.875rem;
+}
+
+.new-repo-actions {
+	display: flex;
+	gap: 0.5rem;
+	margin-top: 0.25rem;
+}
+
diff --git a/apps/web/src/styles/pages/sessions.css b/apps/web/src/styles/pages/sessions.css
new file mode 100644
index 0000000..6075e59
--- /dev/null
+++ b/apps/web/src/styles/pages/sessions.css
@@ -0,0 +1,69 @@
+/* Mobile Sessions Page */
+@media (max-width: 767px) {
+	.sessions-page {
+		padding: var(--space-2);
+	}
+
+	.sessions-page .page-header {
+		margin-bottom: var(--space-3);
+	}
+
+	.sessions-page .page-header h1 {
+		font-size: 1.25rem;
+	}
+
+	.last-session-section {
+		margin-bottom: var(--space-4);
+	}
+
+	.last-session-section h2 {
+		font-size: 1rem;
+		margin-bottom: var(--space-2);
+	}
+
+	.create-session-section {
+		padding: var(--space-3);
+	}
+
+	.create-session-section h2 {
+		font-size: 1rem;
+		margin-bottom: var(--space-2);
+	}
+}
+
+.session-card-actions.mobile {
+	display: flex;
+	gap: var(--space-2);
+	padding-top: var(--space-3);
+	border-top: 1px solid var(--color-border);
+}
+
+.session-card-actions.mobile .mobile-primary {
+	flex: 1;
+	justify-content: center;
+	min-height: 44px;
+	padding: var(--space-2) var(--space-3);
+}
+
+.session-card-actions.mobile .mobile-more {
+	min-width: 44px;
+	min-height: 44px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--space-2);
+}
+@media (max-width: 767px) {
+	.create-session-form .form-row {
+		grid-template-columns: 1fr;
+		gap: var(--space-3);
+	}
+
+	.create-session-form input,
+	.create-session-form select,
+	.create-session-form textarea,
+	.create-session-form button {
+		min-height: 44px;
+	}
+}
+
diff --git a/apps/web/src/styles/pages/ssh-keys.css b/apps/web/src/styles/pages/ssh-keys.css
new file mode 100644
index 0000000..e4a1462
--- /dev/null
+++ b/apps/web/src/styles/pages/ssh-keys.css
@@ -0,0 +1,25 @@
+/* SSH keys table responsive */
+.ssh-key-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+}
+
+.ssh-key-item {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+	padding: var(--space-4);
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+}
+
+@media (min-width: 768px) {
+	.ssh-key-item {
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+}
+
diff --git a/apps/web/src/styles/pages/workspace-detail.css b/apps/web/src/styles/pages/workspace-detail.css
new file mode 100644
index 0000000..3f95295
--- /dev/null
+++ b/apps/web/src/styles/pages/workspace-detail.css
@@ -0,0 +1,504 @@
+/* ─── Workspace Detail Page ─── */
+
+.workspace-detail {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	overflow: hidden;
+}
+
+.workspace-header-link {
+	display: block;
+	text-decoration: none;
+	color: inherit;
+}
+
+.workspace-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--space-4) var(--space-5);
+	border-bottom: 1px solid var(--border);
+	background: var(--panel);
+	flex-shrink: 0;
+}
+
+.workspace-breadcrumb {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	color: var(--muted);
+	font-size: var(--font-size-sm);
+}
+
+.workspace-breadcrumb .sep {
+	color: var(--border);
+}
+
+.workspace-breadcrumb strong {
+	color: var(--ink);
+	font-size: var(--font-size-lg);
+}
+
+.branch-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+	padding: var(--space-1) var(--space-3);
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 999px;
+	font-size: var(--font-size-sm);
+	color: var(--muted);
+}
+
+/* Tab Bar */
+.tab-bar {
+	display: flex;
+	gap: var(--space-1);
+	padding: var(--space-2) var(--space-5);
+	border-bottom: 1px solid var(--border);
+	background: var(--panel);
+	flex-shrink: 0;
+	overflow-x: auto;
+}
+
+.tab {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+	padding: var(--space-2) var(--space-4);
+	border: 1px solid transparent;
+	border-radius: 10px;
+	background: none;
+	color: var(--muted);
+	font: inherit;
+	font-size: var(--font-size-sm);
+	cursor: pointer;
+	white-space: nowrap;
+	transition: all 0.15s ease;
+}
+
+.tab:hover {
+	background: var(--bg);
+	color: var(--ink);
+}
+
+.tab.active {
+	background: var(--brand);
+	color: var(--primary-fg);
+}
+
+/* Mobile Tab Bar */
+.mobile-tab-bar {
+	display: none;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	justify-content: space-around;
+	padding: var(--space-2) 0;
+	background: var(--panel);
+	border-top: 1px solid var(--border);
+	z-index: 50;
+}
+
+.mobile-tab {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 2px;
+	padding: var(--space-1) var(--space-2);
+	border: none;
+	background: none;
+	color: var(--muted);
+	font: inherit;
+	font-size: var(--font-size-xs);
+	cursor: pointer;
+}
+
+.mobile-tab.active {
+	color: var(--brand);
+}
+
+/* Workspace Content */
+.workspace-content {
+	flex: 1;
+	overflow: hidden;
+	padding: var(--space-4) var(--space-5);
+	overflow-y: auto;
+}
+
+/* Files Tab */
+.files-tab {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+	height: 100%;
+}
+
+.git-toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--space-3);
+	padding: var(--space-3);
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	flex-wrap: wrap;
+}
+
+.git-toolbar-status {
+	display: flex;
+	gap: var(--space-2);
+}
+
+.git-toolbar-status span {
+	padding: var(--space-1) var(--space-2);
+	border-radius: 6px;
+	font-size: var(--font-size-xs);
+	font-weight: 600;
+}
+
+.status-modified {
+	background: var(--warning-light);
+	color: var(--warning);
+}
+
+.status-added {
+	background: var(--success-light);
+	color: var(--success);
+}
+
+.status-deleted {
+	background: var(--danger-light);
+	color: var(--danger);
+}
+
+.status-untracked {
+	background: rgba(107, 114, 128, 0.1);
+	color: #6b7280;
+}
+
+.git-toolbar-actions {
+	display: flex;
+	gap: var(--space-2);
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+.git-toolbar-actions input {
+	padding: var(--space-1) var(--space-3);
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	font: inherit;
+	background: var(--panel);
+	color: var(--ink);
+	min-width: 180px;
+}
+
+.files-split {
+	display: grid;
+	grid-template-columns: 260px 1fr;
+	gap: var(--space-4);
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
+.file-tree {
+	overflow-y: auto;
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	padding: var(--space-3);
+	background: var(--panel);
+}
+
+.tree-entry {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	width: 100%;
+	padding: var(--space-1) var(--space-2);
+	border: none;
+	border-radius: 6px;
+	background: none;
+	color: var(--ink);
+	font: inherit;
+	font-size: var(--font-size-sm);
+	text-align: left;
+	cursor: pointer;
+	white-space: nowrap;
+}
+
+.tree-entry:hover {
+	background: var(--bg);
+}
+
+.tree-entry.selected {
+	background: var(--brand);
+	color: var(--primary-fg);
+}
+
+.file-viewer {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	background: var(--panel);
+	overflow: hidden;
+}
+
+.file-viewer-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--space-3);
+	border-bottom: 1px solid var(--border);
+	background: var(--bg);
+}
+
+.file-content {
+	flex: 1;
+	padding: var(--space-4);
+	overflow: auto;
+	margin: 0;
+	font-family: "IBM Plex Mono", monospace;
+	font-size: var(--font-size-sm);
+	line-height: 1.6;
+	white-space: pre-wrap;
+}
+
+.file-editor {
+	flex: 1;
+	padding: var(--space-3);
+	border: none;
+	font-family: "IBM Plex Mono", monospace;
+	font-size: var(--font-size-sm);
+	line-height: 1.6;
+	resize: none;
+	background: var(--panel);
+	color: var(--ink);
+}
+
+.file-editor-actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: var(--space-2);
+	padding: var(--space-3);
+	border-top: 1px solid var(--border);
+}
+
+/* Git Tab */
+.git-tab {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-4);
+}
+
+.git-tab-header {
+	display: flex;
+	gap: var(--space-3);
+	align-items: center;
+}
+
+.git-tab-header select {
+	padding: var(--space-2) var(--space-3);
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	font: inherit;
+	background: var(--panel);
+	color: var(--ink);
+}
+
+.commit-history {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+}
+
+.commit-row {
+	display: grid;
+	grid-template-columns: 60px 1fr 120px 120px;
+	gap: var(--space-3);
+	padding: var(--space-3);
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	align-items: center;
+	font-size: var(--font-size-sm);
+}
+
+.commit-hash {
+	font-family: monospace;
+	color: var(--brand);
+}
+
+.commit-message {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.commit-author,
+.commit-date {
+	color: var(--muted);
+	font-size: var(--font-size-xs);
+}
+
+/* Tools Tab */
+.tools-tab {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-4);
+}
+
+.empty-state-card {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--space-3);
+	padding: var(--space-10);
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 14px;
+	text-align: center;
+}
+
+.empty-state-card h3 {
+	margin: 0;
+}
+
+.empty-state-card p {
+	margin: 0;
+	color: var(--muted);
+}
+
+.instances-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	gap: var(--space-4);
+}
+
+.instance-card {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+	padding: var(--space-4);
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 14px;
+}
+
+.instance-card.running {
+	border-color: var(--success);
+}
+
+/* Settings Tab */
+.settings-tab {
+	max-width: 640px;
+}
+
+.settings-section {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-4);
+	padding: var(--space-5);
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 14px;
+}
+
+.settings-section h3 {
+	margin: 0;
+}
+
+/* Mobile Workspace Detail */
+@media (max-width: 767px) {
+	.workspace-detail.mobile .workspace-content {
+		padding-bottom: 72px;
+	}
+
+	.mobile-tab-bar {
+		display: flex;
+	}
+
+	.files-split {
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr 1fr;
+	}
+
+	.commit-row {
+		grid-template-columns: 1fr;
+		gap: var(--space-1);
+	}
+
+	.git-toolbar {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+}
+
+/* Workspace Card Link */
+.workspace-header-link {
+	display: block;
+	text-decoration: none;
+	color: inherit;
+	margin: -1rem -1rem 0;
+	padding: 1rem;
+}
+
+.workspace-header-link:hover .workspace-header h4 {
+	color: var(--brand);
+}
+
+/* ─── Workspace Create Inline ─── */
+
+.workspace-create-inline {
+	padding: var(--space-5);
+	margin-bottom: var(--space-5);
+}
+
+.workspace-create-inline h3 {
+	margin: 0 0 var(--space-4) 0;
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+}
+
+.workspace-create-form-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: var(--space-4);
+	align-items: end;
+}
+
+.workspace-create-form-grid .form-group {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+}
+
+.workspace-create-form-grid label {
+	font-size: var(--font-size-sm);
+	color: var(--muted);
+}
+
+.workspace-create-form-grid input,
+.workspace-create-form-grid select {
+	padding: var(--space-2) var(--space-3);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	font: inherit;
+	background: var(--panel);
+	color: var(--ink);
+}
+
+.workspace-create-form-grid .form-actions {
+	display: flex;
+	gap: var(--space-3);
+	justify-content: flex-end;
+	margin-top: var(--space-2);
+}
+
diff --git a/apps/web/src/styles/syntax-highlight.css b/apps/web/src/styles/syntax-highlight.css
new file mode 100644
index 0000000..c366ee0
--- /dev/null
+++ b/apps/web/src/styles/syntax-highlight.css
@@ -0,0 +1,195 @@
+/* Syntax Highlighter */
+.syntax-highlighter {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.highlighter-toolbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.5rem 1rem;
+	background: var(--panel);
+	border-bottom: 1px solid var(--border);
+}
+
+.language-badge {
+	font-size: 0.8rem;
+	padding: 0.2rem 0.5rem;
+	background: var(--bg);
+	border-radius: 4px;
+	color: var(--muted);
+}
+
+.copy-button {
+	font-size: 0.8rem;
+	padding: 0.25rem 0.5rem;
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	cursor: pointer;
+	color: var(--ink);
+}
+
+.copy-button:hover {
+	background: var(--brand);
+	color: white;
+	border-color: var(--brand);
+}
+
+.code-container {
+	display: flex;
+	flex: 1;
+	overflow: auto;
+	font-family: "Fira Code", "Monaco", "Courier New", monospace;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+.line-numbers {
+	display: flex;
+	flex-direction: column;
+	padding: 1rem 0.5rem;
+	background: var(--panel);
+	border-right: 1px solid var(--border);
+	color: var(--muted);
+	text-align: right;
+	user-select: none;
+	min-width: 3rem;
+}
+
+.line-number {
+	padding: 0 0.5rem;
+}
+
+.code-block {
+	flex: 1;
+	margin: 0;
+	padding: 1rem;
+	overflow: visible;
+	background: transparent;
+}
+
+.code-block code {
+	display: block;
+	background: transparent;
+}
+
+/* Code Editor */
+.code-editor {
+	height: 100%;
+	overflow: auto;
+}
+
+.editor-textarea {
+	font-family: "Fira Code", "Monaco", "Courier New", monospace;
+	font-size: 14px;
+	line-height: 1.5;
+	min-height: 100%;
+}
+
+.editor-textarea-input {
+	background: transparent;
+	color: var(--ink);
+	caret-color: var(--ink);
+}
+
+.editor-line {
+	display: flex;
+}
+
+.editor-line-number {
+	display: inline-block;
+	width: 3rem;
+	padding: 0 0.5rem;
+	text-align: right;
+	color: var(--muted);
+	user-select: none;
+	background: var(--panel);
+	border-right: 1px solid var(--border);
+}
+
+.editor-line-content {
+	flex: 1;
+	padding: 0 0.5rem;
+	white-space: pre;
+}
+
+/* Prism.js Theme Integration */
+code[class*="language-"],
+pre[class*="language-"] {
+	color: var(--ink);
+	text-shadow: none;
+	font-family: "Fira Code", "Monaco", "Courier New", monospace;
+	font-size: 14px;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	tab-size: 2;
+	hyphens: none;
+}
+
+/* Syntax Highlighting Colors */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: var(--muted);
+}
+
+.token.punctuation {
+	color: var(--ink);
+}
+
+.token.namespace {
+	opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #f59e0b;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #10b981;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #f43f5e;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #3b82f6;
+}
+
+.token.function,
+.token.class-name {
+	color: #8b5cf6;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #ec4899;
+}
+
diff --git a/apps/web/src/styles/tokens.css b/apps/web/src/styles/tokens.css
new file mode 100644
index 0000000..7eaf335
--- /dev/null
+++ b/apps/web/src/styles/tokens.css
@@ -0,0 +1,92 @@
+:root {
+	color-scheme: light;
+	font-family: "Inter", "IBM Plex Sans", "Segoe UI", sans-serif;
+	--bg: #f4f1ea;
+	--panel: #fffef9;
+	--ink: #1d1d1b;
+	--muted: #5f5b55;
+	--brand: #275d4b;
+	--brand-strong: #154236;
+	--border: #d8d0c5;
+	--primary: #275d4b;
+	--primary-fg: #fffef9;
+	--color-primary: #275d4b;
+	--success: #2f8f62;
+	--success-light: rgba(47, 143, 98, 0.14);
+	--warning: #c08a1e;
+	--warning-light: rgba(192, 138, 30, 0.14);
+	--danger: #b94a3c;
+	--danger-light: rgba(185, 74, 60, 0.14);
+	--info: #4f7fb8;
+	--info-light: rgba(79, 127, 184, 0.14);
+
+	/* Spacing Scale (4px base) */
+	--space-1: 0.25rem;
+	--space-2: 0.5rem;
+	--space-3: 0.75rem;
+	--space-4: 1rem;
+	--space-5: 1.5rem;
+	--space-6: 2rem;
+	--space-8: 3rem;
+	--space-10: 4rem;
+
+	/* Breakpoints */
+	--bp-sm: 480px;
+	--bp-md: 768px;
+	--bp-lg: 1024px;
+	--bp-xl: 1280px;
+
+	/* Fluid Typography */
+	--font-size-xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
+	--font-size-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
+	--font-size-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
+	--font-size-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
+	--font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
+	--font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
+}
+
+[data-theme="dark"] {
+	color-scheme: dark;
+	--bg: #171613;
+	--panel: #22201d;
+	--ink: #ece7df;
+	--muted: #a59d92;
+	--brand: #5fa889;
+	--brand-strong: #4d9175;
+	--border: #39342d;
+	--primary: #5fa889;
+	--primary-fg: #171613;
+	--color-primary: #5fa889;
+	--success: #22c55e;
+	--success-light: rgba(34, 197, 94, 0.15);
+	--warning: #f59e0b;
+	--warning-light: rgba(245, 158, 11, 0.15);
+	--danger: #ef4444;
+	--danger-light: rgba(239, 68, 68, 0.15);
+	--info: #3b82f6;
+	--info-light: rgba(59, 130, 246, 0.15);
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	background: var(--bg);
+	color: var(--ink);
+}
+
+html.terminal-page-open,
+body.terminal-page-open {
+	overflow: hidden;
+}
+
+[data-theme="dark"] body {
+	background: radial-gradient(circle at top right, #2a2520, var(--bg));
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
diff --git a/apps/web/src/styles/utilities.css b/apps/web/src/styles/utilities.css
new file mode 100644
index 0000000..0ab0820
--- /dev/null
+++ b/apps/web/src/styles/utilities.css
@@ -0,0 +1,2541 @@
+/* ============================================
+   Responsive Design System
+   ============================================ */
+
+/* Layout Utilities */
+.container {
+	width: 100%;
+	max-width: min(1200px, 100vw - 2rem);
+	margin-inline: auto;
+	padding-inline: var(--space-4);
+}
+
+.stack {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-4);
+}
+
+.stack-sm {
+	gap: var(--space-2);
+}
+
+.stack-md {
+	gap: var(--space-4);
+}
+
+.stack-lg {
+	gap: var(--space-6);
+}
+
+.row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--space-4);
+	align-items: center;
+}
+
+.grid {
+	display: grid;
+	gap: var(--space-4);
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
+}
+
+/* Text Utilities */
+.truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.truncate-multiline {
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+.break-word {
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	hyphens: auto;
+}
+
+/* Touch Targets */
+.button,
+.nav-link,
+.icon-button,
+button,
+[role="button"] {
+	min-height: 44px;
+	min-width: 44px;
+}
+
+/* Dialog Responsive */
+.dialog {
+	width: min(560px, 100vw - 2rem);
+	max-height: min(800px, 100vh - 2rem);
+	overflow-y: auto;
+}
+
+.dialog-lg {
+	width: min(800px, 100vw - 2rem);
+}
+
+/* Table Responsive */
+.table-responsive {
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+}
+
+.table-responsive table {
+	min-width: 100%;
+}
+
+/* Mobile-first Media Queries */
+@media (max-width: 767px) {
+	/* Card layout for tables on mobile */
+	.table-responsive thead {
+		display: none;
+	}
+
+	.table-responsive tbody tr {
+		display: block;
+		margin-bottom: var(--space-4);
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		padding: var(--space-4);
+	}
+
+	.table-responsive td {
+		display: flex;
+		justify-content: space-between;
+		padding: var(--space-2) 0;
+		border-bottom: 1px solid var(--border);
+	}
+
+	.table-responsive td:last-child {
+		border-bottom: none;
+	}
+
+	.table-responsive td::before {
+		content: attr(data-label);
+		font-weight: 600;
+		margin-right: var(--space-2);
+	}
+
+	/* Larger touch targets on mobile */
+	.button,
+	button {
+		padding: var(--space-3) var(--space-4);
+	}
+
+	/* Full-width inputs on mobile */
+	input,
+	select,
+	textarea {
+		width: 100%;
+		min-height: 44px;
+	}
+}
+
+/* Small devices */
+@media (min-width: 480px) {
+	.container {
+		padding-inline: var(--space-5);
+	}
+}
+
+/* Medium devices */
+@media (min-width: 768px) {
+	.container {
+		padding-inline: var(--space-6);
+	}
+}
+
+/* Large devices */
+@media (min-width: 1024px) {
+	.container {
+		padding-inline: var(--space-8);
+	}
+}
+
+/* Extra large devices */
+@media (min-width: 1280px) {
+	.container {
+		max-width: 1200px;
+	}
+}
+
+/* ============================================
+   Page-Specific Responsive Styles
+   ============================================ */
+
+/* Forms - Full width on mobile */
+@media (max-width: 767px) {
+	.form-field input,
+	.form-field textarea,
+	.form-field select {
+		width: 100%;
+		min-height: 44px;
+	}
+
+	/* Settings page stack */
+	.settings-layout {
+		flex-direction: column;
+	}
+
+	.settings-nav {
+		flex-direction: row;
+		overflow-x: auto;
+		padding-bottom: var(--space-2);
+	}
+
+	/* Project cards full width */
+	.project-card {
+		flex-direction: column;
+		gap: var(--space-3);
+	}
+
+	.project-actions {
+		width: 100%;
+		justify-content: flex-start;
+	}
+
+	/* Repository cards */
+	.repository-card {
+		flex-direction: column;
+		gap: var(--space-3);
+		align-items: flex-start;
+	}
+
+	.repository-actions {
+		width: 100%;
+		justify-content: flex-start;
+	}
+
+	/* Git toolbar wrap */
+	.git-toolbar {
+		flex-wrap: wrap;
+		gap: var(--space-2);
+	}
+
+	/* Dashboard cards */
+	.dashboard-grid {
+		grid-template-columns: 1fr;
+	}
+
+	/* Stack form actions */
+	.form-actions {
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.form-actions button {
+		width: 100%;
+		justify-content: center;
+	}
+}
+
+/* Ensure all pages have proper padding */
+.stack > h1,
+.stack > h2 {
+	margin-top: 0;
+}
+
+/* Touch target verification override */
+button,
+[role="button"],
+a.nav-item,
+.tree-entry {
+	min-height: 44px;
+}
+
+/* Table horizontal scroll wrapper */
+.table-wrapper {
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+	width: 100%;
+}
+
+/* Dialog content spacing */
+.dialog-body {
+	padding: var(--space-4) 0;
+}
+
+/* Prevent text overflow in cards */
+.card h3,
+.card p {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Session Navigation */
+.session-item {
+	position: relative;
+	padding-left: var(--space-6);
+}
+
+.session-status {
+	position: absolute;
+	left: var(--space-2);
+	top: 50%;
+	transform: translateY(-50%);
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: var(--muted);
+}
+
+.session-status.running {
+	background: var(--success);
+}
+
+.session-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 140px;
+}
+
+.nav-divider {
+	height: 1px;
+	background: var(--border);
+	margin: var(--space-2) var(--space-3);
+}
+
+.nav-section-title {
+	padding: var(--space-2) var(--space-4);
+	font-size: var(--text-xs);
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--muted);
+}
+
+/* Instance List */
+.instance-list {
+	margin-top: var(--space-4);
+}
+
+.instance-list-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: var(--space-4);
+}
+
+.instance-list-header h3 {
+	margin: 0;
+}
+
+.instance-grid {
+	display: grid;
+	gap: var(--space-3);
+}
+
+.instance-card {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--space-4);
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	position: relative;
+}
+
+.instance-info {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+}
+
+.instance-name {
+	font-weight: 600;
+}
+
+.instance-meta {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	font-size: var(--text-sm);
+	color: var(--muted);
+}
+
+.status-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+}
+
+.instance-actions {
+	display: flex;
+	gap: var(--space-2);
+	align-items: center;
+}
+
+.instance-card.busy {
+	opacity: 0.7;
+}
+
+.instance-busy-overlay {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--space-2);
+	background: rgba(var(--bg-rgb, 255, 255, 255), 0.8);
+	border-radius: 10px;
+	z-index: 1;
+	font-size: var(--text-sm);
+	color: var(--muted);
+}
+
+.session-card {
+	position: relative;
+}
+
+.session-card.busy {
+	opacity: 0.7;
+}
+
+.session-busy-overlay {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(var(--bg-rgb, 255, 255, 255), 0.8);
+	border-radius: var(--space-2);
+	z-index: 1;
+}
+
+/* ============================================
+   Terminal Styles
+   ============================================ */
+
+.terminal-page {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+	padding: var(--space-4);
+	gap: var(--space-4);
+}
+
+.terminal-page-header {
+	display: flex;
+	align-items: center;
+	gap: var(--space-4);
+	flex-shrink: 0;
+}
+
+.terminal-page-header h1 {
+	margin: 0;
+}
+
+.terminal-wrapper {
+	display: grid;
+	grid-template-rows: auto 1fr;
+	flex: 1;
+	min-height: 0;
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	overflow: hidden;
+	background: #1e1e1e;
+}
+
+/* When controls are hidden (fullscreen), only the container is in flow;
+   force it into the 1fr track so it fills the wrapper instead of landing
+   in the auto track and shrinking on each fit(). */
+.terminal-wrapper.no-controls {
+	grid-template-rows: 1fr;
+}
+
+.terminal-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--space-3) var(--space-4);
+	background: #2d2d2d;
+	border-bottom: 1px solid #3e3e3e;
+	flex-shrink: 0;
+}
+
+.terminal-status {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+}
+
+.status-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: #666;
+}
+
+.status-dot.connecting {
+	background: #f5f543;
+	animation: pulse 1.5s infinite;
+}
+
+.status-dot.connected {
+	background: #0dbc79;
+}
+
+.status-dot.disconnected,
+.status-dot.error {
+	background: #cd3131;
+}
+
+@keyframes pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+
+.status-text {
+	font-size: 0.875rem;
+	color: #d4d4d4;
+	text-transform: capitalize;
+}
+
+.terminal-close {
+	padding: var(--space-1) var(--space-3);
+	background: transparent;
+	border: 1px solid #666;
+	border-radius: 6px;
+	color: #d4d4d4;
+	cursor: pointer;
+	font-size: 0.875rem;
+}
+
+.terminal-close:hover {
+	background: #3e3e3e;
+}
+
+.terminal-error {
+	padding: var(--space-3) var(--space-4);
+	background: #cd3131;
+	color: white;
+	font-size: 0.875rem;
+	flex-shrink: 0;
+}
+
+.terminal-container {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	overflow: hidden;
+}
+
+/* xterm.js manages its own positioning and sizing */
+
+.terminal-container canvas {
+	display: block;
+}
+
+/* xterm.js manages its own viewport dimensions - do not override */
+
+/* Mobile terminal container - no padding to maximize space */
+.terminal-wrapper.mobile .terminal-container {
+	padding: 0;
+}
+
+/* Ensure xterm viewport fills container properly */
+/* Responsive terminal */
+@media (max-width: 767px) {
+	.terminal-page {
+		padding: var(--space-2);
+		gap: var(--space-2);
+	}
+
+	.terminal-page-header h1 {
+		font-size: 1.25rem;
+	}
+}
+
+/* ============================================
+   Terminal Session Tabs
+   ============================================ */
+
+.terminal-session-tabs {
+	display: flex;
+	flex-shrink: 0;
+	background: #2d2d2d;
+	border-bottom: 1px solid #3e3e3e;
+	overflow: hidden;
+}
+
+.terminal-session-tabs.mobile {
+	background: #1e1e1e;
+}
+
+.terminal-session-tabs-scroll {
+	display: flex;
+	gap: 2px;
+	padding: var(--space-1) var(--space-2);
+	overflow-x: auto;
+	scrollbar-width: thin;
+	scrollbar-color: #555 transparent;
+	flex: 1;
+	min-width: 0;
+}
+
+.terminal-session-tabs-scroll::-webkit-scrollbar {
+	height: 4px;
+}
+
+.terminal-session-tabs-scroll::-webkit-scrollbar-thumb {
+	background: #555;
+	border-radius: 2px;
+}
+
+.terminal-session-tab {
+	display: flex;
+	align-items: center;
+	gap: var(--space-1);
+	padding: var(--space-1) var(--space-2);
+	border: 1px solid transparent;
+	border-radius: 6px;
+	background: transparent;
+	color: #888;
+	cursor: pointer;
+	font-size: 0.8125rem;
+	white-space: nowrap;
+	transition:
+		background 0.15s,
+		color 0.15s,
+		border-color 0.15s;
+	user-select: none;
+	min-width: 0;
+}
+
+.terminal-session-tab:hover {
+	background: #3e3e3e;
+	color: #ccc;
+}
+
+.terminal-session-tab.active {
+	background: #1e1e1e;
+	color: #d4d4d4;
+	border-color: #3e3e3e;
+}
+
+.terminal-session-tab-status {
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	flex-shrink: 0;
+}
+
+.terminal-session-tab-status.connecting {
+	background: #f5f543;
+	animation: pulse 1.5s infinite;
+}
+
+.terminal-session-tab-status.connected {
+	background: #0dbc79;
+}
+
+.terminal-session-tab-status.disconnected,
+.terminal-session-tab-status.error {
+	background: #cd3131;
+}
+
+.terminal-session-tab-name {
+	max-width: 120px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.terminal-session-tab-input {
+	background: #1e1e1e;
+	border: 1px solid var(--brand);
+	border-radius: 4px;
+	color: #d4d4d4;
+	font-size: 0.8125rem;
+	padding: 1px 4px;
+	width: 100px;
+	outline: none;
+}
+
+.terminal-session-tab-close {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 16px;
+	height: 16px;
+	padding: 0;
+	margin: 0;
+	background: transparent;
+	border: none;
+	color: #888;
+	cursor: pointer;
+	font-size: 0.875rem;
+	line-height: 1;
+	border-radius: 3px;
+	opacity: 0;
+	transition:
+		opacity 0.15s,
+		background 0.15s;
+}
+
+.terminal-session-tab:hover .terminal-session-tab-close {
+	opacity: 1;
+}
+
+.terminal-session-tab-close:hover {
+	background: #cd3131;
+	color: white;
+}
+
+.terminal-session-tab-confirm {
+	font-size: 0.6875rem;
+	color: #cd3131;
+	padding: 1px 4px;
+	border-radius: 3px;
+	background: rgba(205, 49, 49, 0.15);
+	white-space: nowrap;
+}
+
+.terminal-session-tab.new-session {
+	font-weight: 600;
+	font-size: 1rem;
+	line-height: 1;
+	padding: var(--space-1) var(--space-2);
+	color: #888;
+}
+
+.terminal-session-tab.new-session:hover {
+	background: #3e3e3e;
+	color: #d4d4d4;
+}
+
+.terminal-session-tab.new-session:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+/* Terminal page with multi-session */
+.terminal-page-content {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	overflow: hidden;
+	background: #1e1e1e;
+}
+
+.terminal-instance {
+	flex: 1;
+	min-height: 0;
+	display: none;
+}
+
+.terminal-instance.active {
+	display: flex;
+}
+
+.terminal-empty-state {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	color: #888;
+	font-size: 0.875rem;
+}
+
+.terminal-error-banner {
+	padding: var(--space-2) var(--space-4);
+	background: var(--danger-light);
+	color: var(--danger);
+	font-size: 0.875rem;
+	border-bottom: 1px solid var(--danger-light);
+}
+
+/* Fullscreen mode */
+.terminal-page.fullscreen {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1000;
+	padding: 8px;
+	gap: 8px;
+	background: #1e1e1e;
+}
+
+.terminal-page.fullscreen .terminal-page-content {
+	border: none;
+	border-radius: 0;
+}
+
+/* Unified fullscreen header: session tabs + terminal controls */
+.terminal-fullscreen-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background: #2d2d2d;
+	border-bottom: 1px solid #3e3e3e;
+	flex-shrink: 0;
+	min-height: 0;
+}
+
+.terminal-fullscreen-header-tabs {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.terminal-fullscreen-header-tabs .terminal-session-tabs {
+	background: transparent;
+	border-bottom: none;
+}
+
+.terminal-fullscreen-header-controls {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	padding: 0 var(--space-3);
+	flex-shrink: 0;
+	border-left: 1px solid #3e3e3e;
+}
+
+.terminal-fullscreen-status {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: #666;
+	flex-shrink: 0;
+}
+
+.terminal-fullscreen-status.connecting {
+	background: #f5f543;
+	animation: pulse 1.5s infinite;
+}
+
+.terminal-fullscreen-status.connected {
+	background: #0dbc79;
+}
+
+.terminal-fullscreen-status.disconnected,
+.terminal-fullscreen-status.error {
+	background: #cd3131;
+}
+
+/* ============================================
+   Mobile Terminal Overlay
+   ============================================ */
+
+/* Mobile terminal page — no padding, terminal fills viewport */
+.terminal-page.mobile {
+	padding: 0;
+	gap: 0;
+	height: 100vh;
+	height: 100dvh;
+	position: relative;
+	overflow: hidden;
+}
+
+/* Overlay status bar — floats over terminal, never resizes it */
+.mobile-terminal-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 100;
+	background: #2d2d2d;
+	border-bottom: 1px solid #3e3e3e;
+	transition:
+		transform 0.3s ease,
+		opacity 0.3s ease;
+}
+
+.mobile-terminal-overlay.hidden {
+	transform: translateY(-100%);
+	opacity: 0;
+	pointer-events: none;
+}
+
+.mobile-terminal-overlay.visible {
+	transform: translateY(0);
+	opacity: 1;
+}
+
+/* Toolbar row */
+.mobile-terminal-toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--space-2) var(--space-3);
+	gap: var(--space-2);
+}
+
+.mobile-terminal-toolbar-left,
+.mobile-terminal-toolbar-right {
+	display: flex;
+	align-items: center;
+	gap: var(--space-1);
+	flex: 0 0 auto;
+}
+
+.mobile-terminal-toolbar-center {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	flex: 1;
+	justify-content: center;
+	min-width: 0;
+}
+
+.mobile-terminal-title {
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: #d4d4d4;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.mobile-terminal-status {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: #666;
+	flex-shrink: 0;
+}
+
+.mobile-terminal-status.connecting {
+	background: #f5f543;
+	animation: pulse 1.5s infinite;
+}
+
+.mobile-terminal-status.connected {
+	background: #0dbc79;
+}
+
+.mobile-terminal-status.disconnected,
+.mobile-terminal-status.error {
+	background: #cd3131;
+}
+
+.mobile-terminal-toolbtn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	padding: 0;
+	background: transparent;
+	border: 1px solid #3e3e3e;
+	border-radius: 6px;
+	color: #d4d4d4;
+	cursor: pointer;
+	font-size: 0.875rem;
+	transition: background 0.2s ease;
+}
+
+.mobile-terminal-toolbtn:hover {
+	background: #3e3e3e;
+}
+
+/* Session tabs inside overlay */
+.mobile-terminal-overlay-tabs {
+	background: #1e1e1e;
+	border-top: 1px solid #3e3e3e;
+}
+
+.mobile-terminal-overlay-tabs .terminal-session-tabs {
+	background: #1e1e1e;
+	border-bottom: none;
+}
+
+/* Terminal content — always fills full viewport on mobile */
+.terminal-page-content.mobile-full {
+	flex: 1;
+	min-height: 0;
+	border: none;
+	border-radius: 0;
+	overflow: hidden;
+}
+
+/* Mobile fullscreen */
+@media (max-width: 767px) {
+	.terminal-page.fullscreen {
+		padding: 0;
+	}
+
+	.terminal-session-tab-name {
+		max-width: 80px;
+	}
+}
+
+/* ============================================
+   Sessions Page Styles
+   ============================================ */
+
+.nav-badge {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 18px;
+	height: 18px;
+	padding: 0 5px;
+	background: var(--primary);
+	color: var(--primary-fg);
+	border-radius: 9px;
+	font-size: 11px;
+	font-weight: 600;
+	margin-left: auto;
+}
+
+.sessions-page {
+	max-width: 1200px;
+}
+
+.last-session-section {
+	margin-bottom: var(--space-6);
+}
+
+.last-session-card {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--space-4);
+	padding: var(--space-5);
+	border: 2px solid var(--primary);
+}
+
+.last-session-info h3 {
+	margin: 0 0 var(--space-1) 0;
+	font-size: 1.25rem;
+}
+
+.active-sessions-section {
+	position: relative;
+	margin-bottom: var(--space-6);
+}
+
+.active-sessions-section.dimmed {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.active-sessions-section h2 {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+}
+
+.active-sessions-section .badge {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 24px;
+	height: 24px;
+	padding: 0 6px;
+	background: var(--success);
+	color: white;
+	border-radius: 12px;
+	font-size: 12px;
+	font-weight: 600;
+}
+
+.sessions-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: var(--space-4);
+}
+
+.session-card {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+	padding: var(--space-4);
+}
+
+.session-info h4 {
+	margin: 0 0 var(--space-1) 0;
+	font-size: 1rem;
+}
+
+.session-url {
+	margin: var(--space-1) 0;
+	font-size: 0.8rem;
+	word-break: break-all;
+}
+
+.session-url a {
+	color: var(--color-primary);
+	text-decoration: none;
+}
+
+.session-url a:hover {
+	text-decoration: underline;
+}
+
+.session-actions {
+	display: flex;
+	gap: var(--space-2);
+}
+
+/* Session Card - Unified Component */
+.session-card-content {
+	flex: 1;
+}
+
+.session-card-header {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+}
+
+.session-card-title {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	gap: var(--space-2);
+}
+
+.session-card-title h4 {
+	margin: 0;
+	font-size: 1rem;
+	font-weight: 600;
+}
+
+.session-card-status-badges {
+	display: flex;
+	gap: var(--space-1);
+	flex-wrap: wrap;
+}
+
+.session-card-meta {
+	font-size: 0.85rem;
+	margin: 0;
+}
+
+.session-card-meta .icon {
+	margin-right: var(--space-1);
+	vertical-align: text-bottom;
+}
+
+.session-card-url {
+	margin: var(--space-1) 0;
+	font-size: 0.8rem;
+	word-break: break-all;
+}
+
+.session-card-url a {
+	color: var(--color-primary);
+	text-decoration: none;
+}
+
+.session-card-url a:hover {
+	text-decoration: underline;
+}
+
+.session-card-actions {
+	display: flex;
+	gap: var(--space-2);
+	flex-wrap: wrap;
+	margin-top: var(--space-2);
+	padding-top: var(--space-3);
+	border-top: 1px solid var(--color-border);
+}
+
+/* Session List - Unified Component */
+.session-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-6);
+}
+
+.session-group {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+}
+
+.session-group-header {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+}
+
+.session-group-header h3 {
+	margin: 0;
+	font-size: 1.1rem;
+	font-weight: 600;
+}
+
+/* Action labels - hidden on mobile */
+.action-label {
+	margin-left: var(--space-1);
+}
+
+@media (max-width: 640px) {
+	.action-label {
+		display: none;
+	}
+
+	.session-card-actions {
+		gap: var(--space-1);
+	}
+
+	.session-card-actions button,
+	.session-card-actions a {
+		padding: var(--space-1);
+	}
+}
+
+.recent-sessions-section {
+	margin-bottom: var(--space-6);
+}
+
+/* Loading overlay for sessions */
+.sessions-grid {
+	position: relative;
+}
+
+.sessions-grid.dimmed {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.create-session-form-wrapper {
+	position: relative;
+}
+
+.loading-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 10;
+	background: rgba(255, 254, 249, 0.7);
+	border-radius: var(--space-2);
+}
+
+.loading-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--space-3);
+	padding: var(--space-6);
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: var(--space-2);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.loading-content .icon {
+	animation: spin 1s linear infinite;
+	color: var(--brand);
+}
+
+.loading-content p {
+	margin: 0;
+	font-size: var(--font-size-base);
+	color: var(--muted);
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.recent-sessions-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+}
+
+.recent-session-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--space-3) var(--space-4);
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+}
+
+.recent-session-info {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+}
+
+.recent-session-name {
+	font-weight: 500;
+}
+
+.recent-session-actions {
+	display: flex;
+	gap: var(--space-2);
+	align-items: center;
+}
+
+.delete-confirm-inline,
+.stop-confirm-inline {
+	display: flex;
+	gap: var(--space-2);
+	align-items: center;
+}
+
+.confirm-text {
+	font-size: 13px;
+	color: var(--muted);
+	font-weight: 500;
+}
+
+.create-session-section {
+	position: relative;
+	margin-bottom: var(--space-6);
+}
+
+.create-session-section.dimmed {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.create-session-form {
+	max-width: 600px;
+}
+
+.create-session-form .form-row {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: var(--space-4);
+}
+
+/* Workflow Step Styles */
+.workflow-form {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-6);
+}
+
+.workflow-step {
+	opacity: 0.4;
+	pointer-events: none;
+	transition: opacity 0.2s ease;
+}
+
+.workflow-step.active {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+.workflow-step.complete {
+	opacity: 0.7;
+	pointer-events: auto;
+}
+
+.workflow-step-header {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	margin-bottom: var(--space-3);
+	font-weight: 600;
+	color: var(--text-muted);
+}
+
+.workflow-step.active .workflow-step-header {
+	color: var(--text-primary);
+}
+
+.workflow-step-number {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	border-radius: 50%;
+	background: var(--bg-muted);
+	color: var(--text-muted);
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.workflow-step.active .workflow-step-number {
+	background: var(--primary);
+	color: white;
+}
+
+.workflow-step.complete .workflow-step-number {
+	background: var(--success);
+	color: white;
+}
+
+.status-badge {
+	display: inline-flex;
+	align-items: center;
+	padding: 2px 8px;
+	border-radius: 4px;
+	font-size: 12px;
+	font-weight: 500;
+	text-transform: capitalize;
+}
+
+.status-badge.running {
+	background: var(--success-light, #dcfce7);
+	color: var(--success, #16a34a);
+}
+
+.status-badge.stopped {
+	background: var(--muted-bg, #f3f4f6);
+	color: var(--muted, #6b7280);
+}
+
+.status-badge.pending {
+	background: var(--warning-light, #fef3c7);
+	color: var(--warning, #d97706);
+}
+
+.status-badge.error {
+	background: var(--danger-light, #fee2e2);
+	color: var(--danger, #dc2626);
+}
+
+.status-badge.starting,
+.status-badge.probing {
+	background: var(--info-light, #dbeafe);
+	color: var(--info, #2563eb);
+}
+
+.status-badge.unhealthy {
+	background: var(--warning-light, #fef3c7);
+	color: var(--warning, #d97706);
+}
+
+/* ============================================
+   Mobile Terminal Styles
+   ============================================ */
+
+/* Mobile terminal shell - fills viewport */
+.shell.mobile-terminal-shell {
+	height: 100vh;
+	height: 100dvh;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.mobile-terminal-wrapper {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+	background: #1e1e1e;
+	position: relative;
+	overflow: hidden;
+}
+
+/* Mobile Terminal Header */
+.mobile-terminal-header {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--space-2) var(--space-3);
+	background: #2d2d2d;
+	border-bottom: 1px solid #3e3e3e;
+	transition:
+		transform 0.3s ease,
+		opacity 0.3s ease,
+		height 0.3s ease,
+		padding 0.3s ease,
+		margin 0.3s ease;
+	z-index: 100;
+	overflow: hidden;
+}
+
+.mobile-terminal-header.hidden {
+	transform: translateY(-100%);
+	opacity: 0;
+	pointer-events: none;
+	height: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+	border-width: 0;
+	flex-shrink: 1;
+}
+
+.mobile-terminal-header.visible {
+	transform: translateY(0);
+	opacity: 1;
+	height: auto;
+}
+
+.mobile-terminal-header-left,
+.mobile-terminal-header-right {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	flex: 0 0 auto;
+}
+
+.mobile-terminal-header-center {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	flex: 1;
+	justify-content: center;
+	min-width: 0;
+}
+
+.mobile-terminal-header-title {
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: #d4d4d4;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.mobile-terminal-header-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	padding: 0;
+	background: transparent;
+	border: 1px solid #3e3e3e;
+	border-radius: 6px;
+	color: #d4d4d4;
+	cursor: pointer;
+	font-size: 0.875rem;
+	transition: background 0.2s ease;
+}
+
+.mobile-terminal-header-button:hover {
+	background: #3e3e3e;
+}
+
+.mobile-terminal-header-status {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: #666;
+	flex-shrink: 0;
+}
+
+.mobile-terminal-header-status.connecting {
+	background: #f5f543;
+	animation: pulse 1.5s infinite;
+}
+
+.mobile-terminal-header-status.connected {
+	background: #0dbc79;
+}
+
+.mobile-terminal-header-status.disconnected,
+.mobile-terminal-header-status.error {
+	background: #cd3131;
+}
+
+/* Mobile Terminal Content */
+.mobile-terminal-content {
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+	position: relative;
+	background: #1e1e1e;
+	display: flex;
+	flex-direction: column;
+}
+
+/* Terminal wrapper - fills content area */
+.terminal-wrapper.mobile {
+	border: none;
+	border-radius: 0;
+	flex: 1;
+	min-height: 0;
+	width: 100%;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.terminal-wrapper.mobile .terminal-container {
+	width: 100%;
+	flex: 1;
+	min-height: 0;
+	padding: 0;
+	overflow: hidden;
+	position: relative;
+	touch-action: none;
+}
+
+/* xterm.js manages its own sizing */
+
+/* xterm.js manages its own scrolling and viewport dimensions */
+
+/* Special Keys Strip */
+.special-keys-strip {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	padding: var(--space-1) var(--space-2);
+	background: #2d2d2d;
+	border-top: 1px solid #3e3e3e;
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+	scrollbar-width: none;
+	transition:
+		transform 0.3s ease,
+		opacity 0.3s ease;
+	z-index: 100;
+}
+
+.special-keys-strip.hidden {
+	transform: translateY(100%);
+	opacity: 0;
+	pointer-events: none;
+}
+
+.special-keys-strip.visible {
+	transform: translateY(0);
+	opacity: 1;
+}
+
+.special-keys-strip::-webkit-scrollbar {
+	display: none;
+}
+
+.special-key-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 44px;
+	height: 44px;
+	padding: 0 var(--space-2);
+	background: #3e3e3e;
+	border: 1px solid #4e4e4e;
+	border-radius: 6px;
+	color: #d4d4d4;
+	font-size: 0.75rem;
+	font-weight: 500;
+	cursor: pointer;
+	white-space: nowrap;
+	flex-shrink: 0;
+	transition:
+		background 0.15s ease,
+		transform 0.1s ease;
+	user-select: none;
+	-webkit-user-select: none;
+	touch-action: manipulation;
+}
+
+.special-key-button:active {
+	background: #4e4e4e;
+	transform: scale(0.95);
+}
+
+.special-key-more {
+	background: #2472c8;
+	border-color: #2472c8;
+	color: white;
+}
+
+.special-key-more:active {
+	background: #1e5fa8;
+}
+
+.special-key-button.active-modifier {
+	background: #f5f543;
+	color: #1e1e1e;
+	border-color: #f5f543;
+	font-weight: 700;
+	box-shadow: 0 0 8px rgba(245, 245, 67, 0.5);
+}
+
+/* Special Keys Panel */
+.special-keys-panel-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 200;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+
+.special-keys-panel {
+	background: #2d2d2d;
+	border-top: 1px solid #3e3e3e;
+	border-radius: 12px 12px 0 0;
+	padding: var(--space-4);
+	width: 100%;
+	max-height: 70vh;
+	overflow-y: auto;
+	animation: slideUp 0.2s ease;
+}
+
+.special-keys-panel-section {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--space-2);
+	margin-bottom: var(--space-3);
+}
+
+.special-keys-panel-section:last-child {
+	margin-bottom: 0;
+}
+
+.special-keys-panel-divider {
+	height: 1px;
+	background: #3e3e3e;
+	margin: var(--space-3) 0;
+}
+
+/* Terminal Component Updates */
+/* Note: .terminal-wrapper.mobile is defined above with position: absolute to fill grid cell */
+
+.terminal-wrapper.mobile .terminal-header {
+	display: none;
+}
+
+.terminal-header-left {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+}
+
+.terminal-header-right {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+}
+
+.terminal-header-button {
+	padding: var(--space-1) var(--space-2);
+	background: transparent;
+	border: 1px solid #666;
+	border-radius: 4px;
+	color: #d4d4d4;
+	cursor: pointer;
+	font-size: 0.75rem;
+	transition: background 0.2s ease;
+}
+
+.terminal-header-button:hover {
+	background: #3e3e3e;
+}
+
+.terminal-reconnect {
+	margin-left: var(--space-2);
+	padding: var(--space-1) var(--space-2);
+	background: #2472c8;
+	border: none;
+	border-radius: 4px;
+	color: white;
+	cursor: pointer;
+	font-size: 0.75rem;
+}
+
+.terminal-reset-confirm {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.8);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 100;
+}
+
+.terminal-reset-confirm-content {
+	background: var(--bg-surface);
+	border: 1px solid var(--border-color);
+	border-radius: 8px;
+	padding: var(--space-4);
+	max-width: 400px;
+	text-align: center;
+}
+
+.terminal-reset-confirm-content p {
+	margin: 0 0 var(--space-4) 0;
+	color: var(--text-primary);
+}
+
+.terminal-reset-confirm-buttons {
+	display: flex;
+	gap: var(--space-2);
+	justify-content: center;
+}
+
+.terminal-reset-confirm-button {
+	padding: var(--space-2) var(--space-4);
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 0.875rem;
+}
+
+.terminal-reset-confirm-button.cancel {
+	background: var(--bg-elevated);
+	color: var(--text-primary);
+}
+
+.terminal-reset-confirm-button.confirm {
+	background: #cd3131;
+	color: white;
+}
+
+.terminal-hidden-input {
+	position: fixed;
+	left: -9999px;
+	top: -9999px;
+	width: 1px;
+	height: 1px;
+	opacity: 0;
+	pointer-events: none;
+	user-select: none;
+	-webkit-user-select: none;
+}
+
+/* Disable zoom on mobile terminal */
+@media (max-width: 767px) {
+	.mobile-terminal-wrapper {
+		touch-action: pan-y;
+		-webkit-text-size-adjust: none;
+	}
+
+	.mobile-terminal-wrapper button,
+	.mobile-terminal-wrapper .special-key-button {
+		touch-action: manipulation;
+	}
+
+	.terminal-container {
+		touch-action: pan-y;
+		padding: 0;
+	}
+}
+
+/* Animations */
+@keyframes slideUp {
+	from {
+		transform: translateY(100%);
+	}
+	to {
+		transform: translateY(0);
+	}
+}
+
+@keyframes pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+
+/* Mobile Menu Overlay */
+.mobile-menu-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 50;
+}
+
+.mobile-menu-close {
+	position: absolute;
+	top: var(--space-2);
+	right: var(--space-2);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	background: transparent;
+	border: none;
+	color: var(--text);
+	cursor: pointer;
+}
+
+/* AppShell mobile menu */
+@media (max-width: 767px) {
+	.shell-nav {
+		position: fixed;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		width: 260px;
+		background: var(--bg);
+		z-index: 100;
+		transform: translateX(-100%);
+		transition: transform 0.3s ease;
+		padding-top: var(--space-8);
+	}
+
+	.shell-nav.mobile-open {
+		transform: translateX(0);
+	}
+}
+
+/* Mobile Navigation */
+.mobile-nav {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	background: var(--panel);
+	border-top: 1px solid var(--border);
+	padding-bottom: env(safe-area-inset-bottom, 0);
+	z-index: 100;
+	height: 64px;
+}
+
+.mobile-nav-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 2px;
+	padding: 8px 12px;
+	color: var(--muted);
+	text-decoration: none;
+	font-size: 11px;
+	min-width: 64px;
+	min-height: 44px;
+	border-radius: 8px;
+	transition: color 0.15s ease;
+}
+
+.mobile-nav-item.active {
+	color: var(--brand);
+}
+
+.mobile-nav-icon-wrapper {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.mobile-nav-badge {
+	position: absolute;
+	top: -6px;
+	right: -8px;
+	background: var(--danger);
+	color: white;
+	font-size: 10px;
+	font-weight: 600;
+	min-width: 16px;
+	height: 16px;
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 4px;
+}
+
+/* Mobile Bottom Sheet */
+.mobile-bottom-sheet-overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 200;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+
+.mobile-bottom-sheet {
+	background: var(--panel);
+	border-radius: 16px 16px 0 0;
+	width: 100%;
+	max-width: 600px;
+	max-height: 70vh;
+	display: flex;
+	flex-direction: column;
+	animation: slide-up 0.2s ease-out;
+}
+
+@keyframes slide-up {
+	from {
+		transform: translateY(100%);
+	}
+	to {
+		transform: translateY(0);
+	}
+}
+
+.mobile-bottom-sheet-header {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 12px 16px 8px;
+	border-bottom: 1px solid var(--border);
+}
+
+.mobile-bottom-sheet-handle {
+	width: 36px;
+	height: 4px;
+	background: var(--border);
+	border-radius: 2px;
+	margin-bottom: 8px;
+}
+
+.mobile-bottom-sheet-title {
+	font-size: 16px;
+	font-weight: 600;
+	margin: 0;
+}
+
+.mobile-bottom-sheet-content {
+	padding: 8px 0;
+	overflow-y: auto;
+}
+
+.mobile-bottom-sheet-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	padding: 16px;
+	background: none;
+	border: none;
+	color: var(--text);
+	font-size: 16px;
+	text-align: left;
+	cursor: pointer;
+	min-height: 44px;
+}
+
+.mobile-bottom-sheet-item:active {
+	background: var(--hover);
+}
+
+.mobile-bottom-sheet-item.active {
+	color: var(--brand);
+}
+
+/* Mobile Page Header */
+.mobile-page-header {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	padding: var(--space-2) 0;
+	margin-bottom: var(--space-3);
+	border-bottom: 1px solid var(--border);
+}
+
+.mobile-page-header-back {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 40px;
+	height: 40px;
+	background: transparent;
+	border: none;
+	color: var(--text);
+	cursor: pointer;
+	border-radius: 8px;
+	padding: 0;
+}
+
+.mobile-page-header-back:active {
+	background: var(--color-border);
+}
+
+.mobile-page-header h1 {
+	margin: 0;
+	font-size: 1.1rem;
+	font-weight: 600;
+	flex: 1;
+}
+
+.mobile-page-header-actions {
+	display: flex;
+	gap: var(--space-2);
+}
+
+.mobile-nav-label {
+	font-size: 11px;
+	font-weight: 500;
+}
+
+/* Mobile shell content padding adjustment */
+.shell-content.mobile {
+	padding-bottom: calc(1.25rem + 64px);
+}
+
+/* Ensure minimum touch targets on mobile */
+button,
+a,
+input,
+select,
+textarea,
+[role="button"] {
+	min-height: 44px;
+	min-width: 44px;
+}
+
+/* Active states for touch feedback */
+button:active,
+a:active,
+[role="button"]:active {
+	opacity: 0.8;
+	transform: scale(0.98);
+}
+
+/* Remove transform on buttons that shouldn't scale */
+.mobile-nav-item:active,
+.mobile-action-sheet-button:active,
+.mobile-action-sheet-cancel:active {
+	transform: none;
+}
+@media (max-width: 767px) {
+	.dialog-actions {
+		flex-direction: column-reverse;
+		gap: 0.5rem;
+	}
+
+	.dialog-actions button {
+		width: 100%;
+		min-height: 44px;
+	}
+}
+
+.workspace-main {
+	padding: var(--space-2);
+}
+
+.tree-entry {
+	padding: 0.5rem;
+	min-height: 44px;
+	display: flex;
+	align-items: center;
+}
+@media (max-width: 767px) {
+	.modal-content {
+		min-width: auto;
+		width: calc(100% - 2rem);
+		max-width: 100%;
+		margin: 1rem;
+		padding: 1rem;
+		max-height: calc(100vh - 2rem);
+	}
+
+	.modal-actions {
+		flex-direction: column-reverse;
+		gap: 0.5rem;
+	}
+
+	.modal-actions button {
+		width: 100%;
+		min-height: 44px;
+	}
+}
+
+/* Mobile Action Sheet */
+.mobile-action-sheet-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 200;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+	animation: fadeIn 0.2s ease;
+}
+
+.mobile-action-sheet {
+	background: var(--bg);
+	border-radius: 16px 16px 0 0;
+	width: 100%;
+	max-width: 500px;
+	max-height: 80vh;
+	overflow-y: auto;
+	animation: slideUp 0.3s ease;
+	padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+.mobile-action-sheet-header {
+	padding: var(--space-3) var(--space-4) var(--space-2);
+	text-align: center;
+}
+
+.mobile-action-sheet-handle {
+	width: 36px;
+	height: 4px;
+	background: var(--color-border);
+	border-radius: 2px;
+	margin: 0 auto var(--space-3);
+}
+
+.mobile-action-sheet-header h3 {
+	margin: 0;
+	font-size: 1rem;
+	font-weight: 600;
+}
+
+.mobile-action-sheet-actions {
+	display: flex;
+	flex-direction: column;
+	gap: 1px;
+	background: var(--color-border);
+	margin: 0 var(--space-2);
+	border-radius: 12px;
+	overflow: hidden;
+}
+
+.mobile-action-sheet-button {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	width: 100%;
+	padding: var(--space-3) var(--space-4);
+	background: var(--bg);
+	border: none;
+	color: var(--text);
+	font-size: 1rem;
+	cursor: pointer;
+	min-height: 56px;
+	text-align: left;
+}
+
+.mobile-action-sheet-button.danger {
+	color: #cd3131;
+}
+
+.mobile-action-sheet-button:active {
+	background: var(--color-border);
+}
+
+.mobile-action-sheet-cancel {
+	display: block;
+	width: calc(100% - var(--space-4));
+	margin: var(--space-3) var(--space-2);
+	padding: var(--space-3);
+	background: var(--bg);
+	border: 1px solid var(--color-border);
+	border-radius: 12px;
+	color: var(--text);
+	font-size: 1rem;
+	font-weight: 600;
+	cursor: pointer;
+	min-height: 56px;
+}
+
+.mobile-action-sheet-cancel:active {
+	background: var(--color-border);
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes slideUp {
+	from {
+		transform: translateY(100%);
+	}
+	to {
+		transform: translateY(0);
+	}
+}
+
+/* Notification Center */
+.notification-center {
+	position: relative;
+	display: inline-flex;
+	z-index: 9999;
+}
+
+.notification-bell {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.4rem;
+	background: transparent;
+	border: none;
+	border-radius: 8px;
+	color: var(--muted);
+	cursor: pointer;
+	transition:
+		background-color 0.15s ease,
+		color 0.15s ease;
+	min-height: 36px;
+	min-width: 36px;
+}
+
+.notification-bell:hover {
+	background: var(--bg);
+	color: var(--ink);
+}
+
+.notification-badge {
+	position: absolute;
+	top: -2px;
+	right: -4px;
+	min-width: 18px;
+	height: 18px;
+	padding: 0 5px;
+	background: var(--danger);
+	color: white;
+	border-radius: 9px;
+	font-size: 11px;
+	font-weight: 600;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.notification-dropdown {
+	position: fixed;
+	width: 360px;
+	max-width: calc(100vw - 2rem);
+	max-height: 480px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 12px;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+	z-index: 9999;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.notification-dropdown-header {
+	padding: 0.75rem 1rem;
+	font-weight: 600;
+	font-size: 0.95rem;
+	border-bottom: 1px solid var(--border);
+	color: var(--ink);
+	flex-shrink: 0;
+}
+
+.notification-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	overflow-y: auto;
+	flex: 1;
+	min-height: 0;
+}
+
+.notification-empty {
+	padding: 2rem 1rem;
+	text-align: center;
+	color: var(--muted);
+	font-size: 0.9rem;
+}
+
+.notification-dropdown-footer {
+	padding: 0.75rem 1rem;
+	border-top: 1px solid var(--border);
+	flex-shrink: 0;
+	display: flex;
+	gap: 0.5rem;
+}
+
+.notification-mark-all {
+	flex: 1;
+	padding: 0.5rem 0.75rem;
+	background: transparent;
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	color: var(--muted);
+	font: inherit;
+	font-size: 0.85rem;
+	cursor: pointer;
+	transition: all 0.15s ease;
+}
+
+.notification-mark-all:hover {
+	background: var(--bg);
+	color: var(--ink);
+	border-color: var(--brand);
+}
+
+.notification-clear-all {
+	flex: 1;
+	padding: 0.5rem 0.75rem;
+	background: transparent;
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	color: var(--muted);
+	font: inherit;
+	font-size: 0.85rem;
+	cursor: pointer;
+	transition: all 0.15s ease;
+}
+
+.notification-clear-all:hover {
+	background: var(--bg);
+	color: var(--danger);
+	border-color: var(--danger);
+}
+
+/* Notification Item */
+.notification-item {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.75rem;
+	padding: 0.75rem 1rem;
+	border-bottom: 1px solid var(--border);
+	transition: background-color 0.15s ease;
+}
+
+.notification-item:last-child {
+	border-bottom: none;
+}
+
+.notification-item:hover {
+	background: var(--bg);
+}
+
+.notification-item--unread {
+	font-weight: 500;
+	border-left: 3px solid var(--brand);
+	padding-left: calc(1rem - 3px);
+	background: color-mix(in srgb, var(--brand) 4%, var(--panel));
+}
+
+.notification-item--read {
+	opacity: 0.75;
+}
+
+.notification-item-icon {
+	flex-shrink: 0;
+	margin-top: 0.1rem;
+	color: var(--muted);
+}
+
+.notification-item-content {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.2rem;
+}
+
+.notification-item-title {
+	font-size: 0.9rem;
+	line-height: 1.3;
+	color: var(--ink);
+}
+
+.notification-item--read .notification-item-title {
+	font-weight: 400;
+}
+
+.notification-item-time {
+	font-size: 0.8rem;
+	color: var(--muted);
+}
+
+.notification-item-actions {
+	display: flex;
+	gap: 0.35rem;
+	flex-shrink: 0;
+}
+
+.notification-item-action {
+	padding: 0.25rem 0.5rem;
+	background: transparent;
+	border: none;
+	border-radius: 6px;
+	color: var(--muted);
+	font: inherit;
+	font-size: 0.75rem;
+	cursor: pointer;
+	transition: all 0.15s ease;
+	white-space: nowrap;
+}
+
+.notification-item-action:hover {
+	background: var(--bg);
+	color: var(--ink);
+}
+
+@media (max-width: 767px) {
+	.notification-dropdown-backdrop {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.35);
+		z-index: 9998;
+	}
+
+	.notification-dropdown {
+		width: auto;
+		left: 0.75rem;
+		right: 0.75rem;
+		max-width: none;
+		border-radius: 12px;
+		max-height: 70vh;
+	}
+}
+
+/* Toast animations */
+@keyframes toastSlideIn {
+	from {
+		opacity: 0;
+		transform: translateX(100%);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+@keyframes toastFadeOut {
+	from {
+		opacity: 1;
+		transform: translateX(0);
+	}
+	to {
+		opacity: 0;
+		transform: translateX(100%);
+	}
+}
+