khal-os 1.260324.2

package/packages/dev3000-app/views/dev3000/Dev3000App.tsx

@@ -0,0 +1,758 @@
+'use client';
+
+import {
+	AlertTriangle,
+	Camera,
+	CheckCircle,
+	ChevronDown,
+	ChevronRight,
+	LayoutDashboard,
+	Loader2,
+	Monitor,
+	Play,
+	Square,
+	X,
+	XCircle,
+} from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { SidebarNav, SplitPane, StatusBar } from '@/components/os-primitives';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useNats } from '@/lib/hooks/use-nats';
+import type { Dev3000ContextValue } from './dev3000-context';
+import { Dev3000Context } from './dev3000-context';
+import { ErrorsPanel } from './ErrorsPanel';
+import { DEV3000_SUBJECTS } from './subjects';
+import type { D3kQaReport, D3kSessionEvent, D3kSessionState, D3kTab } from './types';
+
+// ---------------------------------------------------------------------------
+// Session Status Panel
+// ---------------------------------------------------------------------------
+
+function SessionStatusPanel({
+	sessionInfo,
+	sessionActive,
+	onStartSession,
+	onStopSession,
+	isCommandRunning,
+}: {
+	sessionInfo: D3kSessionState | null;
+	sessionActive: boolean;
+	onStartSession: () => void;
+	onStopSession: () => void;
+	isCommandRunning: boolean;
+}) {
+	return (
+		<div className="rounded-lg border border-gray-alpha-200 bg-background-100 p-4">
+			<div className="mb-3 flex items-center gap-2">
+				<Monitor className="h-4 w-4 text-gray-700" />
+				<h3 className="text-label-13 font-medium text-gray-1000">Session</h3>
+				<Badge variant={sessionActive ? 'green' : 'gray'} size="sm" className="ml-auto">
+					{sessionActive ? 'Active' : 'Inactive'}
+				</Badge>
+			</div>
+
+			{sessionActive && sessionInfo && (
+				<div className="mb-3 flex flex-col gap-1 rounded border border-gray-alpha-100 bg-gray-alpha-50 px-3 py-2">
+					<div className="flex gap-3 font-mono text-[11px] text-gray-800">
+						<span className="text-gray-600">PID</span>
+						<span>{sessionInfo.pid}</span>
+					</div>
+					{sessionInfo.port && (
+						<div className="flex gap-3 font-mono text-[11px] text-gray-800">
+							<span className="text-gray-600">PORT</span>
+							<span>{sessionInfo.port}</span>
+						</div>
+					)}
+					{sessionInfo.startedAt && (
+						<div className="flex gap-3 font-mono text-[11px] text-gray-800">
+							<span className="text-gray-600">SINCE</span>
+							<span>{new Date(sessionInfo.startedAt).toLocaleTimeString()}</span>
+						</div>
+					)}
+				</div>
+			)}
+
+			<div className="flex gap-2">
+				<Button
+					size="small"
+					variant="secondary"
+					onClick={onStartSession}
+					disabled={sessionActive || isCommandRunning}
+					prefix={<Play className="h-3 w-3" />}
+				>
+					Start Session
+				</Button>
+				<Button
+					size="small"
+					variant="secondary"
+					onClick={onStopSession}
+					disabled={!sessionActive || isCommandRunning}
+					prefix={<Square className="h-3 w-3" />}
+				>
+					Stop Session
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// QA Runner Panel
+// ---------------------------------------------------------------------------
+
+function QaRunnerPanel({ onRunQa, isRunning }: { onRunQa: (routes: string) => void; isRunning: boolean }) {
+	const [routes, setRoutes] = useState('/desktop');
+
+	return (
+		<div className="rounded-lg border border-gray-alpha-200 bg-background-100 p-4">
+			<div className="mb-3 flex items-center gap-2">
+				<Play className="h-4 w-4 text-gray-700" />
+				<h3 className="text-label-13 font-medium text-gray-1000">Run QA</h3>
+			</div>
+			<div className="flex gap-2">
+				<Input
+					size="small"
+					placeholder="Routes (comma-separated)"
+					value={routes}
+					onChange={(e) => setRoutes(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter' && !isRunning) onRunQa(routes);
+					}}
+					aria-label="Routes to test"
+					className="flex-1"
+				/>
+				<Button
+					size="small"
+					variant="secondary"
+					onClick={() => onRunQa(routes)}
+					disabled={isRunning || !routes.trim()}
+					loading={isRunning}
+				>
+					Run QA
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// DOM Checks Section
+// ---------------------------------------------------------------------------
+
+function DomChecks({ checks }: { checks: D3kQaReport['dom_checks'] }) {
+	const [expanded, setExpanded] = useState(false);
+	const failed = checks.filter((c) => !c.pass);
+
+	return (
+		<div>
+			<button
+				type="button"
+				className="flex w-full items-center gap-2 py-1 text-left text-[12px] font-medium text-gray-900 hover:text-gray-1000"
+				onClick={() => setExpanded(!expanded)}
+			>
+				{expanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+				DOM Checks
+				<span className="ml-auto font-mono text-[11px] text-gray-600">
+					{checks.filter((c) => c.pass).length}/{checks.length} passed
+				</span>
+				{failed.length > 0 && (
+					<Badge variant="red" size="sm">
+						{failed.length} failed
+					</Badge>
+				)}
+			</button>
+			{expanded && (
+				<div className="mt-1 flex flex-col gap-1 pl-4">
+					{checks.map((check, i) => (
+						<div key={`${check.route}-${check.selector}-${i}`} className="flex items-center gap-2 text-[11px]">
+							{check.pass ? (
+								<CheckCircle className="h-3 w-3 shrink-0 text-green-600" />
+							) : (
+								<XCircle className="h-3 w-3 shrink-0 text-red-600" />
+							)}
+							<span className="font-mono text-gray-700">{check.selector}</span>
+							<span className="text-gray-600">on</span>
+							<span className="font-mono text-gray-800">{check.route}</span>
+						</div>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Errors Section
+// ---------------------------------------------------------------------------
+
+function ErrorsSection({ report }: { report: D3kQaReport }) {
+	const [expanded, setExpanded] = useState(false);
+	const jsErrors = report.errors.js_exceptions as unknown[];
+	const consoleErrors = report.errors.console_errors as unknown[];
+	const totalErrors = jsErrors.length + consoleErrors.length;
+
+	return (
+		<div>
+			<button
+				type="button"
+				className="flex w-full items-center gap-2 py-1 text-left text-[12px] font-medium text-gray-900 hover:text-gray-1000"
+				onClick={() => setExpanded(!expanded)}
+			>
+				{expanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+				Errors
+				{totalErrors > 0 ? (
+					<Badge variant="red" size="sm" className="ml-auto">
+						{totalErrors}
+					</Badge>
+				) : (
+					<span className="ml-auto text-[11px] text-green-600">Clean</span>
+				)}
+			</button>
+			{expanded && totalErrors === 0 && <p className="pl-4 text-[11px] text-gray-600">No errors detected.</p>}
+			{expanded && totalErrors > 0 && (
+				<div className="mt-1 flex flex-col gap-1 pl-4">
+					{jsErrors.map((e) => {
+						const text = typeof e === 'object' ? JSON.stringify(e) : String(e);
+						return (
+							<div
+								key={`js-${text.slice(0, 80)}`}
+								className="rounded border border-red-100 bg-red-50 px-2 py-1 font-mono text-[10px] text-red-700"
+							>
+								{text}
+							</div>
+						);
+					})}
+					{consoleErrors.map((e) => {
+						const text = typeof e === 'object' ? JSON.stringify(e) : String(e);
+						return (
+							<div
+								key={`ce-${text.slice(0, 80)}`}
+								className="rounded border border-amber-100 bg-amber-50 px-2 py-1 font-mono text-[10px] text-amber-700"
+							>
+								{text}
+							</div>
+						);
+					})}
+				</div>
+			)}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Network Section
+// ---------------------------------------------------------------------------
+
+function NetworkSection({ report }: { report: D3kQaReport }) {
+	const [expanded, setExpanded] = useState(false);
+	const failedCount = report.network.failed_requests;
+
+	return (
+		<div>
+			<button
+				type="button"
+				className="flex w-full items-center gap-2 py-1 text-left text-[12px] font-medium text-gray-900 hover:text-gray-1000"
+				onClick={() => setExpanded(!expanded)}
+			>
+				{expanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+				Network
+				{failedCount > 0 ? (
+					<Badge variant="red" size="sm" className="ml-auto">
+						{failedCount} failed
+					</Badge>
+				) : (
+					<span className="ml-auto text-[11px] text-gray-600">{report.network.total_requests} requests</span>
+				)}
+			</button>
+			{expanded && (
+				<div className="mt-1 pl-4">
+					<div className="flex flex-col gap-1">
+						{Object.entries(report.network.by_route).map(([route, stats]) => (
+							<div key={route} className="flex items-center gap-2 text-[11px]">
+								<span className="font-mono text-gray-800">{route}</span>
+								<span className="text-gray-600">{stats.total} req</span>
+								{stats.failed > 0 && (
+									<Badge variant="red" size="sm">
+										{stats.failed} failed
+									</Badge>
+								)}
+							</div>
+						))}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Screenshot Modal
+// ---------------------------------------------------------------------------
+
+function ScreenshotModal({ src, label, onClose }: { src: string; label: string; onClose: () => void }) {
+	// Close on Escape key
+	useEffect(() => {
+		const handler = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') onClose();
+		};
+		window.addEventListener('keydown', handler);
+		return () => window.removeEventListener('keydown', handler);
+	}, [onClose]);
+
+	return (
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/70"
+			onClick={onClose}
+			onKeyDown={(e) => {
+				if (e.key === 'Enter' || e.key === ' ') onClose();
+			}}
+			role="dialog"
+			aria-modal="true"
+			aria-label={`Screenshot: ${label}`}
+		>
+			<div
+				className="relative max-h-[90vh] max-w-[90vw] overflow-auto rounded-lg bg-gray-950 p-1 shadow-2xl"
+				onClick={(e) => e.stopPropagation()}
+				onKeyDown={(e) => e.stopPropagation()}
+			>
+				<button
+					type="button"
+					className="absolute right-2 top-2 z-10 rounded bg-black/60 p-1 text-white hover:bg-black/80"
+					onClick={onClose}
+					aria-label="Close screenshot"
+				>
+					<X className="h-4 w-4" />
+				</button>
+				<div className="mb-1 px-2 pt-1 font-mono text-[11px] text-gray-400">{label}</div>
+				<img src={src} alt={label} className="max-h-[80vh] max-w-full rounded object-contain" />
+			</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Screenshots Section
+// ---------------------------------------------------------------------------
+
+function ScreenshotsSection({ screenshots }: { screenshots: D3kQaReport['screenshots'] }) {
+	const [expanded, setExpanded] = useState(true);
+	const [modalSrc, setModalSrc] = useState<string | null>(null);
+	const [modalLabel, setModalLabel] = useState('');
+
+	if (screenshots.length === 0) return null;
+
+	const openModal = (file: string, label: string) => {
+		setModalSrc(`/api/dev3000/screenshot?file=${encodeURIComponent(file)}`);
+		setModalLabel(label);
+	};
+
+	const closeModal = () => setModalSrc(null);
+
+	return (
+		<>
+			{modalSrc && <ScreenshotModal src={modalSrc} label={modalLabel} onClose={closeModal} />}
+			<div>
+				<button
+					type="button"
+					className="flex w-full items-center gap-2 py-1 text-left text-[12px] font-medium text-gray-900 hover:text-gray-1000"
+					onClick={() => setExpanded(!expanded)}
+				>
+					{expanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+					<Camera className="h-3 w-3" />
+					Screenshots
+					<span className="ml-auto font-mono text-[11px] text-gray-600">{screenshots.length}</span>
+				</button>
+				{expanded && (
+					<div className="mt-1 grid grid-cols-2 gap-2 pl-4">
+						{screenshots.map((shot) => (
+							<button
+								key={`${shot.route}-${shot.file}`}
+								type="button"
+								className="group flex flex-col overflow-hidden rounded border border-gray-alpha-100 bg-gray-alpha-50 text-left hover:border-gray-alpha-300"
+								onClick={() => openModal(shot.file, `${shot.route} (${shot.viewport})`)}
+							>
+								<div className="relative overflow-hidden bg-gray-200">
+									<img
+										src={`/api/dev3000/screenshot?file=${encodeURIComponent(shot.file)}`}
+										alt={shot.route}
+										className="h-20 w-full object-cover object-top transition-opacity group-hover:opacity-80"
+										loading="lazy"
+									/>
+								</div>
+								<div className="px-1.5 py-1">
+									<div className="truncate font-mono text-[10px] text-gray-800">{shot.route}</div>
+									<div className="text-[9px] text-gray-500">{shot.viewport}</div>
+								</div>
+							</button>
+						))}
+					</div>
+				)}
+			</div>
+		</>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// QA Report Viewer
+// ---------------------------------------------------------------------------
+
+function QaReportViewer({ report }: { report: D3kQaReport }) {
+	const passed = report.summary.pass;
+
+	return (
+		<div className="rounded-lg border border-gray-alpha-200 bg-background-100 p-4">
+			<div className="mb-3 flex items-center gap-2">
+				{passed ? (
+					<CheckCircle className="h-4 w-4 text-green-600" />
+				) : (
+					<AlertTriangle className="h-4 w-4 text-red-500" />
+				)}
+				<h3 className="text-label-13 font-medium text-gray-1000">Last QA Report</h3>
+				<Badge variant={passed ? 'green' : 'red'} size="sm" className="ml-auto">
+					{passed ? 'PASS' : 'FAIL'}
+				</Badge>
+			</div>
+
+			{/* Summary stats */}
+			<div className="mb-3 grid grid-cols-3 gap-2">
+				<div className="rounded border border-gray-alpha-100 bg-gray-alpha-50 px-2 py-1.5 text-center">
+					<div className="font-mono text-[16px] font-semibold text-gray-1000">{report.summary.routes_passed}</div>
+					<div className="text-[10px] text-gray-600">routes passed</div>
+				</div>
+				<div className="rounded border border-gray-alpha-100 bg-gray-alpha-50 px-2 py-1.5 text-center">
+					<div
+						className={`font-mono text-[16px] font-semibold ${report.summary.total_errors > 0 ? 'text-red-600' : 'text-gray-1000'}`}
+					>
+						{report.summary.total_errors}
+					</div>
+					<div className="text-[10px] text-gray-600">errors</div>
+				</div>
+				<div className="rounded border border-gray-alpha-100 bg-gray-alpha-50 px-2 py-1.5 text-center">
+					<div className="font-mono text-[16px] font-semibold text-gray-1000">{report.summary.screenshots_taken}</div>
+					<div className="text-[10px] text-gray-600">screenshots</div>
+				</div>
+			</div>
+
+			{/* Routes tested */}
+			<div className="mb-2 flex flex-wrap gap-1">
+				{report.routes_tested.map((r) => (
+					<span key={r} className="rounded bg-gray-alpha-100 px-1.5 py-0.5 font-mono text-[10px] text-gray-800">
+						{r}
+					</span>
+				))}
+			</div>
+
+			{/* Expandable sections */}
+			<div className="flex flex-col gap-0.5 border-t border-gray-alpha-100 pt-2">
+				<ScreenshotsSection screenshots={report.screenshots} />
+				<DomChecks checks={report.dom_checks} />
+				<ErrorsSection report={report} />
+				<NetworkSection report={report} />
+			</div>
+
+			{/* Timestamp */}
+			<div className="mt-2 text-right text-[10px] text-gray-600">
+				{new Date(report.timestamp).toLocaleString()}
+				{' — '}
+				{(report.duration_ms / 1000).toFixed(1)}s
+			</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Dashboard Tab
+// ---------------------------------------------------------------------------
+
+function DashboardTab({
+	sessionActive,
+	sessionInfo,
+	lastReport,
+	onStartSession,
+	onStopSession,
+	onRunQa,
+	isCommandRunning,
+	commandStatus,
+}: {
+	sessionActive: boolean;
+	sessionInfo: D3kSessionState | null;
+	lastReport: D3kQaReport | null;
+	onStartSession: () => void;
+	onStopSession: () => void;
+	onRunQa: (routes: string) => void;
+	isCommandRunning: boolean;
+	commandStatus: string;
+}) {
+	return (
+		<div className="flex h-full flex-col gap-4 overflow-auto p-4">
+			<SessionStatusPanel
+				sessionInfo={sessionInfo}
+				sessionActive={sessionActive}
+				onStartSession={onStartSession}
+				onStopSession={onStopSession}
+				isCommandRunning={isCommandRunning}
+			/>
+
+			<QaRunnerPanel onRunQa={onRunQa} isRunning={isCommandRunning} />
+
+			{isCommandRunning && (
+				<div className="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2">
+					<Loader2 className="h-4 w-4 animate-spin text-blue-600" />
+					<span className="text-[12px] text-blue-800">{commandStatus}</span>
+				</div>
+			)}
+
+			{lastReport && <QaReportViewer report={lastReport} />}
+
+			{!lastReport && !isCommandRunning && (
+				<div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-alpha-300 py-8 text-center">
+					<AlertTriangle className="mb-2 h-6 w-6 text-gray-500" />
+					<p className="text-[13px] font-medium text-gray-800">No QA report yet</p>
+					<p className="text-[11px] text-gray-600">Start a session and run QA to see results.</p>
+				</div>
+			)}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Main App
+// ---------------------------------------------------------------------------
+
+export function Dev3000App(_props: { windowId: string; meta?: Record<string, unknown> }) {
+	const [activeTab, setActiveTab] = useState<D3kTab>('dashboard');
+	const [sessionActive, setSessionActive] = useState(false);
+	const [sessionInfo, setSessionInfo] = useState<D3kSessionState | null>(null);
+	const [lastReport, setLastReport] = useState<D3kQaReport | null>(null);
+	const [isCommandRunning, setIsCommandRunning] = useState(false);
+	const [commandStatus, setCommandStatus] = useState('');
+
+	const { connected, subscribe, request } = useNats();
+
+	// Stable refs
+	const sessionActiveRef = useRef(sessionActive);
+	sessionActiveRef.current = sessionActive;
+
+	// Subscribe to session events
+	useEffect(() => {
+		if (!connected) return;
+
+		// Request current status on connect
+		const timer = setTimeout(() => {
+			request(DEV3000_SUBJECTS.status(), {}, 5_000)
+				.then((result) => {
+					const status = result as {
+						sessionActive?: boolean;
+						pid?: number;
+						port?: number;
+						wsEndpoint?: string;
+						startedAt?: string;
+					};
+					if (status.sessionActive !== undefined) {
+						setSessionActive(status.sessionActive);
+						if (status.sessionActive) {
+							setSessionInfo({
+								active: true,
+								pid: status.pid,
+								port: status.port,
+								wsEndpoint: status.wsEndpoint,
+								startedAt: status.startedAt,
+							});
+						}
+					}
+				})
+				.catch(() => {
+					// service may not be running yet
+				});
+		}, 100);
+
+		// Subscribe to session events
+		const unsubSession = subscribe(DEV3000_SUBJECTS.session(), (data: unknown) => {
+			const event = data as D3kSessionEvent;
+			if (event.type === 'started') {
+				setSessionActive(true);
+				setSessionInfo({
+					active: true,
+					pid: event.pid,
+					wsEndpoint: event.wsEndpoint,
+					port: event.port,
+					startedAt: event.timestamp,
+				});
+			} else if (event.type === 'stopped') {
+				setSessionActive(false);
+				setSessionInfo(null);
+			}
+		});
+
+		// Subscribe to QA reports
+		const unsubQa = subscribe(DEV3000_SUBJECTS.qaReport(), (data: unknown) => {
+			try {
+				const report = data as D3kQaReport;
+				if (report.summary) {
+					setLastReport(report);
+					setIsCommandRunning(false);
+					setCommandStatus('');
+				}
+			} catch {
+				// ignore malformed
+			}
+		});
+
+		return () => {
+			clearTimeout(timer);
+			unsubSession();
+			unsubQa();
+		};
+	}, [connected, subscribe, request]);
+
+	// Run CLI command via NATS
+	const runCommand = useCallback(
+		async (cmd: string, args: string[]) => {
+			try {
+				const timeout = cmd === 'qa' ? 35_000 : 20_000;
+				const result = (await request(DEV3000_SUBJECTS.cmd(), { command: cmd, args }, timeout)) as {
+					ok: boolean;
+					output?: string;
+					error?: string;
+				};
+				return result;
+			} catch (err) {
+				return { ok: false, error: (err as Error).message };
+			}
+		},
+		[request]
+	);
+
+	const handleStartSession = useCallback(async () => {
+		setIsCommandRunning(true);
+		setCommandStatus('Starting Chrome session...');
+		const result = await runCommand('session', ['start']);
+		if (!result.ok) {
+			setCommandStatus(`Error: ${result.error}`);
+			setIsCommandRunning(false);
+		} else {
+			// Session file watcher will fire and update state via NATS
+			setCommandStatus('Session starting...');
+			// Auto-clear after 3s if no event received
+			setTimeout(() => {
+				setIsCommandRunning(false);
+				setCommandStatus('');
+			}, 3_000);
+		}
+	}, [runCommand]);
+
+	const handleStopSession = useCallback(async () => {
+		setIsCommandRunning(true);
+		setCommandStatus('Stopping session...');
+		const result = await runCommand('session', ['stop']);
+		if (!result.ok) {
+			setCommandStatus(`Error: ${result.error}`);
+		}
+		setIsCommandRunning(false);
+		setCommandStatus('');
+	}, [runCommand]);
+
+	const handleRunQa = useCallback(
+		async (routes: string) => {
+			setIsCommandRunning(true);
+			setCommandStatus(`Running QA on ${routes}...`);
+			const routeArgs = ['--routes', routes.trim()];
+			const result = await runCommand('qa', routeArgs);
+			if (!result.ok) {
+				setCommandStatus(`QA error: ${result.error}`);
+				setIsCommandRunning(false);
+				return;
+			}
+			// Try parsing result directly (in case NATS event was missed)
+			if (result.output) {
+				try {
+					const report = JSON.parse(result.output) as D3kQaReport;
+					if (report.summary) {
+						setLastReport(report);
+					}
+				} catch {
+					// ignore — will be set via NATS subscription
+				}
+			}
+			setIsCommandRunning(false);
+			setCommandStatus('');
+		},
+		[runCommand]
+	);
+
+	const ctxValue = useMemo<Dev3000ContextValue>(
+		() => ({
+			sessionActive,
+			sessionInfo,
+			lastReport,
+			activeTab,
+			setActiveTab,
+			runCommand,
+		}),
+		[sessionActive, sessionInfo, lastReport, activeTab, runCommand]
+	);
+
+	return (
+		<Dev3000Context.Provider value={ctxValue}>
+			<div className="flex h-full flex-col bg-background-100">
+				<div className="flex-1 overflow-hidden">
+					<SplitPane defaultSize={160} min={130} max={220} collapseBelow={400}>
+						{/* Sidebar */}
+						<SplitPane.Panel className="bg-gray-alpha-50">
+							<SidebarNav label="dev3000" title="dev3000">
+								<SidebarNav.Item
+									active={activeTab === 'dashboard'}
+									onClick={() => setActiveTab('dashboard')}
+									icon={<LayoutDashboard />}
+								>
+									Dashboard
+								</SidebarNav.Item>
+								<SidebarNav.Item
+									active={activeTab === 'errors'}
+									onClick={() => setActiveTab('errors')}
+									icon={<AlertTriangle />}
+								>
+									Errors
+								</SidebarNav.Item>
+							</SidebarNav>
+						</SplitPane.Panel>
+
+						{/* Main */}
+						<SplitPane.Panel>
+							<div className="h-full overflow-hidden">
+								{activeTab === 'dashboard' && (
+									<DashboardTab
+										sessionActive={sessionActive}
+										sessionInfo={sessionInfo}
+										lastReport={lastReport}
+										onStartSession={handleStartSession}
+										onStopSession={handleStopSession}
+										onRunQa={handleRunQa}
+										isCommandRunning={isCommandRunning}
+										commandStatus={commandStatus}
+									/>
+								)}
+								{activeTab === 'errors' && <ErrorsPanel />}
+							</div>
+						</SplitPane.Panel>
+					</SplitPane>
+				</div>
+
+				{/* Status bar */}
+				<StatusBar>
+					<StatusBar.Item>dev3000</StatusBar.Item>
+					<StatusBar.Separator />
+					<StatusBar.Item variant={sessionActive ? 'success' : 'default'}>
+						{sessionActive ? 'session active' : 'no session'}
+					</StatusBar.Item>
+					<StatusBar.Spacer />
+					<StatusBar.Item variant={connected ? 'success' : 'default'}>
+						{connected ? 'connected' : 'disconnected'}
+					</StatusBar.Item>
+				</StatusBar>
+			</div>
+		</Dev3000Context.Provider>
+	);
+}