refactor: extract CSS modules for terminal and git components (Task 2.2)

- Create TerminalComponent.module.css with terminal-* styles
- Create GitToolbar.module.css with git toolbar styles
- Create CommitDialog.module.css with commit dialog styles
- Create MergeDialog.module.css with merge dialog styles
- Create FileEditor.module.css with file editor styles
- Update all components to import their CSS modules
- Remove extracted rules from styles.css (~441 lines removed)

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

apps/web/src/components/terminal.tsx

@@ -10,6 +10,7 @@ import type {
 	ServerControlMessage,
 	TerminalConnectionState,
 } from "../types/terminal";
+import styles from "./features/terminal/TerminalComponent.module.css";
 
 interface TerminalProps {
 	instanceId: string;
@@ -231,11 +232,11 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
 	}, [state.status, sendResize]);
 
 	return (
-		<div className="terminal-wrapper">
-			<div className="terminal-header">
-				<div className="terminal-status">
+		<div className={styles.terminalWrapper}>
+			<div className={styles.terminalHeader}>
+				<div className={styles.terminalStatus}>
 					<span
-						className="status-dot"
+						className={styles.statusDot}
 						style={{
 							backgroundColor: STATUS_DOT_COLORS[state.status],
 						}}
@@ -246,9 +247,9 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
 								: getStatusText(state)
 						}
 					/>
-					<span className="status-text">{getStatusText(state)}</span>
+					<span className={styles.statusText}>{getStatusText(state)}</span>
 				</div>
-				<div className="terminal-actions">
+				<div className={styles.terminalActions}>
 					{state.status === "disconnected" && (
 						<button
 							className="secondary-button small"
@@ -259,7 +260,7 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
 						</button>
 					)}
 					{onClose && (
-						<button className="terminal-close" onClick={onClose} type="button">
+						<button className={styles.terminalClose} onClick={onClose} type="button">
 							Close
 						</button>
 					)}
@@ -267,11 +268,11 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
 			</div>
 
 			{sessionEnded && (
-				<div className="terminal-overlay">
-					<div className="terminal-overlay-content">
+				<div className={styles.terminalOverlay}>
+					<div className={styles.terminalOverlayContent}>
 						<h3>Session Ended</h3>
 						<p>{sessionEnded.message}</p>
-						<div className="terminal-overlay-actions">
+						<div className={styles.terminalOverlayActions}>
 							<button
 								className="primary-button small"
 								onClick={() => {
@@ -297,13 +298,13 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
 			)}
 
 			{state.status === "reconnecting" && (
-				<div className="terminal-reconnect-banner">
-					<span className="spinner" />
+				<div className={styles.terminalReconnectBanner}>
+					<span className={styles.spinner} />
 					{state.error}
 				</div>
 			)}
 
-			<div ref={terminalRef} className="terminal-container" />
+			<div ref={terminalRef} className={styles.terminalContainer} />
 		</div>
 	);
 };