refactor: extract CSS modules for session/settings and delete styles.css (Task 2.3)

- Create InstanceList.module.css, AppShell.module.css, SettingsTabLayout.module.css
- Create CommitPanel.module.css, FileViewer.module.css
- Create page CSS files: sessions, repo-workspace, dashboard, projects,
  git-history, ssh-keys, settings
- Update components to import and use CSS modules
- Delete monolithic styles.css (2,255 lines)
- Update main.tsx to import page CSS and new modules

Quality gates: tsc (pass), eslint (pass), build (pass)
Refs: repo-restructure Task 2.3

apps/web/src/components/app-shell.tsx

@@ -8,6 +8,7 @@ import { useAuth } from "../state/auth";
 import { useSessions } from "../state/sessions";
 import { Icon } from "./icon";
 import type { IconName } from "../utils/icons";
+import styles from "./layout/AppShell.module.css";
 
 const NAV_ITEMS: { to: string; label: string; icon: IconName }[] = [
 	{ to: "/", label: "Home", icon: "dashboard" },
@@ -28,12 +29,12 @@ const SessionItem = ({ session }: { session: Session }) => {
 			href={session.url ?? `/projects/${session.project_id}`}
 			target={session.url ? "_blank" : undefined}
 			rel={session.url ? "noopener noreferrer" : undefined}
-			className="nav-item session-item"
+			className={`${styles.navItem} ${styles.sessionItem}`}
 			title={`${displayName} (${session.status})`}
 		>
-			<span className={`session-status ${isRunning ? "running" : ""}`} />
+			<span className={`${styles.sessionStatus} ${isRunning ? styles.running : ""}`} />
 			<Icon name={session.tool_icon as IconName} size="sm" />
-			<span className="session-name">{displayName}</span>
+			<span className={styles.sessionName}>{displayName}</span>
 		</a>
 	);
 };
@@ -62,12 +63,12 @@ export const AppShell = () => {
 	}, [loadSessions]);
 
 	return (
-		<div className="shell">
-			<header className="shell-header">
-				<Link className="brand" to="/">
+		<div className={styles.shell}>
+			<header className={styles.shellHeader}>
+				<Link className={styles.brand} to="/">
 					Headquarter
 				</Link>
-				<div className="header-actions">
+				<div className={styles.headerActions}>
 					<Link className="user-chip" to="/profile">
 						{user?.name ?? "User"}
 					</Link>
@@ -84,8 +85,8 @@ export const AppShell = () => {
 				</div>
 			</header>
 
-			<div className="shell-body">
-				<aside className="shell-nav" aria-label="Primary navigation">
+			<div className={styles.shellBody}>
+				<aside className={styles.shellNav} aria-label="Primary navigation">
 					{NAV_ITEMS.map((item) => {
 						const isHome = item.to === "/";
 						const activeCount = sessions.filter(
@@ -96,14 +97,14 @@ export const AppShell = () => {
 								key={item.to}
 								to={item.to}
 								className={({ isActive }) =>
-									isActive ? "nav-item nav-item-active" : "nav-item"
+									isActive ? `${styles.navItem} ${styles.navItemActive}` : styles.navItem
 								}
 								end={item.to === "/"}
 							>
 								<Icon name={item.icon} size="sm" />
 								{item.label}
 								{isHome && activeCount > 0 && (
-									<span className="nav-badge">{activeCount}</span>
+									<span className={styles.navBadge}>{activeCount}</span>
 								)}
 							</NavLink>
 						);
@@ -112,8 +113,8 @@ export const AppShell = () => {
 					{sessions.filter((s) => ACTIVE_STATUSES.includes(s.status)).length >
 						0 && (
 						<>
-							<div className="nav-divider" />
-							<div className="nav-section-title">Live sessions</div>
+							<div className={styles.navDivider} />
+							<div className={styles.navSectionTitle}>Live sessions</div>
 							{sessions
 								.filter((s) => ACTIVE_STATUSES.includes(s.status))
 								.map((session) => (
@@ -123,7 +124,7 @@ export const AppShell = () => {
 					)}
 				</aside>
 
-				<main className="shell-content">
+				<main className={styles.shellContent}>
 					<Outlet />
 				</main>
 			</div>

apps/web/src/components/commit-panel.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 
 import { commitChanges } from "../api/git_repositories";
+import styles from "./features/git/CommitPanel.module.css";
 
 interface CommitPanelProps {
   projectId: string;
@@ -49,49 +50,49 @@ export const CommitPanel = ({
   if (!hasChanges) return null;
 
   return (
-    <div className="commit-panel">
+    <div className={styles.commitPanel}>
       <h4>Changes</h4>
       
-      <div className="file-list">
+      <div className={styles.fileList}>
         {modified.map((file) => (
-          <div key={file} className="file-item modified">
-            <span className="file-status">M</span>
-            <span className="file-name">{file}</span>
+          <div key={file} className={`${styles.fileItem} modified`}>
+            <span className={styles.fileStatus}>M</span>
+            <span>{file}</span>
           </div>
         ))}
         {added.map((file) => (
-          <div key={file} className="file-item added">
-            <span className="file-status">A</span>
-            <span className="file-name">{file}</span>
+          <div key={file} className={`${styles.fileItem} added`}>
+            <span className={styles.fileStatus}>A</span>
+            <span>{file}</span>
           </div>
         ))}
         {deleted.map((file) => (
-          <div key={file} className="file-item deleted">
-            <span className="file-status">D</span>
-            <span className="file-name">{file}</span>
+          <div key={file} className={`${styles.fileItem} deleted`}>
+            <span className={styles.fileStatus}>D</span>
+            <span>{file}</span>
           </div>
         ))}
         {untracked.map((file) => (
-          <div key={file} className="file-item untracked">
-            <span className="file-status">?</span>
-            <span className="file-name">{file}</span>
+          <div key={file} className={`${styles.fileItem} untracked`}>
+            <span className={styles.fileStatus}>?</span>
+            <span>{file}</span>
           </div>
         ))}
       </div>
 
-      <div className="commit-form">
+      <div className={styles.commitForm}>
         <textarea
           placeholder="Commit message"
           value={message}
           onChange={(e) => setMessage(e.target.value)}
           rows={2}
-          className="commit-message-input"
+          className={styles.commitMessageInput}
         />
-        {error && <div className="commit-error">{error}</div>}
+        {error && <div className={styles.commitError}>{error}</div>}
         <button
           onClick={handleCommit}
           disabled={loading || !message.trim()}
-          className="commit-button"
+          className={styles.commitButton}
           type="button"
         >
           {loading ? "Committing..." : "Commit"}

apps/web/src/components/features/git/CommitPanel.module.css

@@ -0,0 +1,76 @@
+.commitPanel {
+  padding: 1rem;
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.commitPanel h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.fileList {
+  max-height: 150px;
+  overflow: auto;
+  margin-bottom: 0.75rem;
+}
+
+.fileItem {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+  font-size: 0.8125rem;
+}
+
+.fileStatus {
+  font-weight: bold;
+  font-size: 0.75rem;
+  width: 1rem;
+  text-align: center;
+}
+
+.fileItem.modified .fileStatus { color: #f59e0b; }
+.fileItem.added .fileStatus { color: #10b981; }
+.fileItem.deleted .fileStatus { color: #ef4444; }
+.fileItem.untracked .fileStatus { color: #6b7280; }
+
+.commitForm {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.commitMessageInput {
+  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;
+}
+
+.commitButton {
+  padding: 0.5rem 1rem;
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.commitButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.commitError {
+  color: #ef4444;
+  font-size: 0.8125rem;
+}

apps/web/src/components/features/git/FileViewer.module.css

@@ -0,0 +1,45 @@
+.fileViewer {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.fileViewerHeader {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.fileBreadcrumbs {
+  font-size: 0.875rem;
+  font-family: monospace;
+}
+
+.breadcrumbSep {
+  color: var(--muted);
+  margin: 0 0.25rem;
+}
+
+.fileContent {
+  padding: 1rem;
+  overflow: auto;
+  max-height: calc(100vh - 200px);
+}
+
+.fileContent 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;
+}
+
+.fileViewerEmpty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+}

apps/web/src/components/features/session/InstanceList.module.css

@@ -0,0 +1,73 @@
+.instanceList {
+	margin-top: var(--space-4);
+}
+
+.instanceListHeader {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: var(--space-4);
+}
+
+.instanceListHeader h3 {
+	margin: 0;
+}
+
+.instanceGrid {
+	display: grid;
+	gap: var(--space-3);
+}
+
+.instanceCard {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--space-4);
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+}
+
+.instanceInfo {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+}
+
+.instanceName {
+	font-weight: 600;
+}
+
+.instanceMeta {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	font-size: var(--text-sm);
+	color: var(--muted);
+}
+
+.statusDot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+}
+
+.instanceActions {
+	display: flex;
+	gap: var(--space-2);
+	align-items: center;
+}
+
+.errorBadge {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25rem;
+	font-size: 0.8rem;
+	color: var(--danger);
+}
+
+.inlineConfirm {
+	display: flex;
+	gap: var(--space-2);
+	align-items: center;
+}

apps/web/src/components/features/settings/SettingsTabLayout.module.css

@@ -0,0 +1,89 @@
+.settingsLayout {
+  display: flex;
+  gap: 2rem;
+  padding: 1.5rem 0;
+}
+
+.settingsSidebar {
+  width: 200px;
+  flex-shrink: 0;
+}
+
+.settingsNav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.settingsNavLink {
+  padding: 0.625rem 1rem;
+  border-radius: 8px;
+  color: var(--muted);
+  text-decoration: none;
+  font-size: 0.95rem;
+  transition: all 0.2s;
+}
+
+.settingsNavLink:hover {
+  background: var(--bg);
+  color: var(--ink);
+}
+
+.settingsNavLinkActive {
+  background: var(--brand);
+  color: white;
+  font-weight: 500;
+}
+
+.settingsContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.settingsPanel {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 1.5rem;
+}
+
+.settingsBreadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+  color: var(--muted);
+  margin-bottom: 1rem;
+}
+
+.settingsBreadcrumb a {
+  color: var(--brand);
+  text-decoration: none;
+}
+
+.settingsBreadcrumb a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+  .settingsLayout {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .settingsSidebar {
+    width: 100%;
+  }
+
+  .settingsNav {
+    flex-direction: row;
+    overflow-x: auto;
+    padding-bottom: 0.5rem;
+  }
+
+  .settingsNavLink {
+    white-space: nowrap;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+  }
+}

apps/web/src/components/instance-list.tsx

@@ -13,6 +13,7 @@ import {
 	startInstance,
 	stopInstance,
 } from "../api/sessions";
+import styles from "./features/session/InstanceList.module.css";
 
 const API_BASE_URL =
 	import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8000";
@@ -186,8 +187,8 @@ export const InstanceList = ({
 	};
 
 	return (
-		<div className="instance-list">
-			<div className="instance-list-header">
+		<div className={styles.instanceList}>
+			<div className={styles.instanceListHeader}>
 				<h3>Tool Instances</h3>
 				<button
 					className="secondary-button small"
@@ -206,30 +207,30 @@ export const InstanceList = ({
 			) : instances.length === 0 ? (
 				<p className="muted">No instances yet. Launch a tool to get started.</p>
 			) : (
-				<div className="instance-grid">
+				<div className={styles.instanceGrid}>
 					{instances.map((instance) => (
-						<div key={instance.id} className="instance-card">
-							<div className="instance-info">
-								<div className="instance-name">
+						<div key={instance.id} className={styles.instanceCard}>
+							<div className={styles.instanceInfo}>
+								<div className={styles.instanceName}>
 									{instance.display_name ||
 										instance.tool_type_name ||
 										"Unnamed Instance"}
 								</div>
-								<div className="instance-meta">
+								<div className={styles.instanceMeta}>
 									<span
-										className="status-dot"
+										className={styles.statusDot}
 										style={{ backgroundColor: getStatusColor(instance.status) }}
 									/>
 									{instance.status}
 									{isTunnelUnhealthy(instance) && (
-										<span className="error-badge" title="Tunnel unreachable">
+										<span className={styles.errorBadge} title="Tunnel unreachable">
 											<Icon name="warning" size="sm" />
 											tunnel error
 										</span>
 									)}
 								</div>
 							</div>
-							<div className="instance-actions">
+							<div className={styles.instanceActions}>
 								{instance.status === "running" &&
 									instance.url &&
 									instance.tool_type_interfaces.includes("web") && (
@@ -286,7 +287,7 @@ export const InstanceList = ({
 								{instance.status === "running" && (
 									<>
 										{stopConfirmId === instance.id ? (
-											<div className="inline-confirm">
+											<div className={styles.inlineConfirm}>
 												<span>Stop?</span>
 												<button
 													className="ghost-button small danger-text"

apps/web/src/components/layout/AppShell.module.css

@@ -0,0 +1,147 @@
+.shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.shellHeader {
+  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);
+}
+
+.brand {
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.shellBody {
+  display: grid;
+  grid-template-columns: 230px 1fr;
+  min-height: calc(100vh - 57px);
+}
+
+.shellNav {
+  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);
+}
+
+.navItem {
+  padding: 0.65rem 0.75rem;
+  border-radius: 10px;
+  color: var(--muted);
+}
+
+.navItem:hover {
+  background: #ece7df;
+  color: var(--ink);
+}
+
+.navItemActive {
+  background: var(--brand);
+  color: #f7fff7;
+}
+
+.navSectionTitle {
+  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);
+}
+
+.navDivider {
+  height: 1px;
+  background: var(--border);
+  margin: 0.5rem 0;
+}
+
+.navBadge {
+  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;
+}
+
+.sessionItem {
+  position: relative;
+  padding-left: var(--space-6);
+}
+
+.sessionStatus {
+  position: absolute;
+  left: var(--space-2);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--muted);
+}
+
+.sessionStatus.running {
+  background: var(--success);
+}
+
+.sessionName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 140px;
+}
+
+.shellContent {
+  padding: 1.25rem;
+  overflow-x: hidden;
+}
+
+@media (max-width: 767px) {
+  .shellBody {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+
+  .shellNav {
+    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;
+  }
+
+  .navItem {
+    padding: 0.5rem 0.75rem;
+    white-space: nowrap;
+    font-size: var(--font-size-sm);
+  }
+
+  .shellContent {
+    padding: var(--space-4);
+  }
+}

apps/web/src/components/settings-tab-layout.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Link, useLocation } from "react-router-dom";
+import styles from "./features/settings/SettingsTabLayout.module.css";
 
 interface Tab {
   id: string;
@@ -21,15 +22,15 @@ export const SettingsTabLayout: React.FC<SettingsTabLayoutProps> = ({
   const location = useLocation();
 
   return (
-    <div className="settings-layout">
-      <aside className="settings-sidebar">
-        <nav className="settings-nav">
+    <div className={styles.settingsLayout}>
+      <aside className={styles.settingsSidebar}>
+        <nav className={styles.settingsNav}>
           {tabs.map((tab) => (
             <Link
               key={tab.id}
               to={`${basePath}/${tab.path}`}
-              className={`settings-nav-link ${
-                location.pathname.includes(tab.path) ? "active" : ""
+              className={`${styles.settingsNavLink} ${
+                location.pathname.includes(tab.path) ? styles.settingsNavLinkActive : ""
               }`}
             >
               {tab.label}
@@ -37,7 +38,7 @@ export const SettingsTabLayout: React.FC<SettingsTabLayoutProps> = ({
           ))}
         </nav>
       </aside>
-      <main className="settings-content">{children}</main>
+      <main className={styles.settingsContent}>{children}</main>
     </div>
   );
 };