khal-os 1.260324.2

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

@@ -0,0 +1,160 @@
+'use client';
+
+import { AlertTriangle, CheckCircle, Loader2, RefreshCw } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { EmptyState } from '@/components/os-primitives/empty-state';
+import { useDev3000 } from './dev3000-context';
+
+type ErrorsState = 'idle' | 'loading' | 'success' | 'error';
+
+interface D3kErrorsResponse {
+	total: number;
+	showing: number;
+	errors: string[];
+}
+
+interface ParsedError {
+	key: string;
+	time: string;
+	source: string;
+	message: string;
+}
+
+// Parse d3k log line: "[HH:mm:ss.SSS] [SOURCE] [TAG] message"
+const LOG_LINE_RE = /^\[(\d{2}:\d{2}:\d{2}\.\d{3})]\s+\[(\w+)]\s+(.*)$/;
+
+function parseErrors(raw: string): { errors: ParsedError[]; total: number } {
+	try {
+		const parsed: D3kErrorsResponse = JSON.parse(raw);
+		const errors = (parsed.errors || []).map((line, i) => {
+			const match = line.match(LOG_LINE_RE);
+			if (match) {
+				return { key: `${match[1]}-${i}`, time: match[1], source: match[2], message: match[3] };
+			}
+			return { key: `raw-${i}`, time: '', source: '', message: line };
+		});
+		return { errors, total: parsed.total || 0 };
+	} catch {
+		return { errors: [{ key: 'raw-0', time: '', source: '', message: raw }], total: 0 };
+	}
+}
+
+function ErrorRow({ error }: { error: ParsedError }) {
+	return (
+		<div className="px-3 py-2 text-[11px] transition-colors hover:bg-gray-alpha-50">
+			<div className="flex items-baseline gap-2">
+				{error.time && <span className="shrink-0 font-mono text-gray-600">{error.time}</span>}
+				{error.source && (
+					<span className="shrink-0 rounded bg-red-500/10 px-1 py-0.5 font-mono text-[9px] font-semibold text-red-600">
+						{error.source}
+					</span>
+				)}
+			</div>
+			<p className="mt-0.5 font-mono leading-4 text-gray-1000">{error.message}</p>
+		</div>
+	);
+}
+
+export function ErrorsPanel() {
+	const { runCommand } = useDev3000();
+	const [state, setState] = useState<ErrorsState>('idle');
+	const [errors, setErrors] = useState<ParsedError[]>([]);
+	const [total, setTotal] = useState(0);
+	const [errorMsg, setErrorMsg] = useState('');
+
+	const fetchErrors = useCallback(async () => {
+		setState('loading');
+		setErrors([]);
+		setErrorMsg('');
+		const result = await runCommand('errors', []).catch((err) => ({
+			ok: false as const,
+			error: (err as Error).message,
+			output: undefined as string | undefined,
+		}));
+		if (result.ok && result.output) {
+			const parsed = parseErrors(result.output);
+			setErrors(parsed.errors);
+			setTotal(parsed.total);
+			setState('success');
+		} else if (result.ok) {
+			setErrors([]);
+			setState('success');
+		} else {
+			setState('error');
+			setErrorMsg(result.error || 'Failed to fetch errors.');
+		}
+	}, [runCommand]);
+
+	return (
+		<div className="flex h-full flex-col">
+			{/* Header with refresh */}
+			<div className="flex items-center gap-2 border-b border-gray-alpha-200 px-3 py-2">
+				<AlertTriangle className="h-4 w-4 text-red-500" />
+				<span className="text-label-13 font-medium text-gray-1000">Errors</span>
+				{state === 'success' && <span className="text-[11px] text-gray-600">{total} total</span>}
+				<button
+					type="button"
+					onClick={fetchErrors}
+					disabled={state === 'loading'}
+					className="ml-auto flex items-center gap-1 rounded px-2 py-1 text-[11px] font-medium text-gray-800 transition-colors hover:bg-gray-alpha-200 disabled:opacity-50"
+				>
+					{state === 'loading' ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />}
+					{state === 'loading' ? 'Fetching...' : 'Refresh'}
+				</button>
+			</div>
+
+			{/* Content */}
+			<div className="flex-1 overflow-auto">
+				{state === 'idle' && (
+					<div className="p-3">
+						<EmptyState
+							title="Click to fetch errors"
+							description="Run d3k errors to see recent browser and server errors."
+							action={
+								<button
+									type="button"
+									onClick={fetchErrors}
+									className="rounded bg-red-500 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-600"
+								>
+									Fetch Errors
+								</button>
+							}
+						/>
+					</div>
+				)}
+
+				{state === 'loading' && (
+					<div className="flex h-32 items-center justify-center">
+						<Loader2 className="h-5 w-5 animate-spin text-gray-600" />
+					</div>
+				)}
+
+				{state === 'success' && errors.length === 0 && (
+					<div className="p-3">
+						<EmptyState
+							title="No errors"
+							description="No recent errors found in the d3k session."
+							icon={<CheckCircle className="h-8 w-8 text-green-500" />}
+						/>
+					</div>
+				)}
+
+				{state === 'success' && errors.length > 0 && (
+					<div className="divide-y divide-gray-alpha-100">
+						{errors.map((error) => (
+							<ErrorRow key={error.key} error={error} />
+						))}
+					</div>
+				)}
+
+				{state === 'error' && (
+					<div className="p-3">
+						<div className="rounded border border-red-200 bg-red-50 p-3">
+							<p className="font-mono text-[11px] text-red-600">{errorMsg}</p>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,21 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import type { D3kQaReport, D3kSessionState, D3kTab } from './types';
+
+export interface Dev3000ContextValue {
+	sessionActive: boolean;
+	sessionInfo: D3kSessionState | null;
+	lastReport: D3kQaReport | null;
+	activeTab: D3kTab;
+	setActiveTab: (t: D3kTab) => void;
+	runCommand: (cmd: string, args: string[]) => Promise<{ ok: boolean; output?: string; error?: string }>;
+}
+
+export const Dev3000Context = createContext<Dev3000ContextValue | null>(null);
+
+export function useDev3000(): Dev3000ContextValue {
+	const ctx = useContext(Dev3000Context);
+	if (!ctx) throw new Error('useDev3000 must be used within <Dev3000App>');
+	return ctx;
+}

package/packages/dev3000-app/views/dev3000/index.ts

@@ -0,0 +1,4 @@
+export { Dev3000App } from './Dev3000App';
+export type { Dev3000ContextValue } from './dev3000-context';
+export { useDev3000 } from './dev3000-context';
+export type { D3kQaReport, D3kSessionEvent, D3kSessionState, D3kTab } from './types';

package/packages/dev3000-app/views/dev3000/schema.ts

@@ -0,0 +1,55 @@
+import { type Static, Type } from '@sinclair/typebox';
+
+// --- Command request/response ---
+
+export const D3kCmdRequest = Type.Object({
+	command: Type.String(), // e.g. 'session', 'screenshot', 'errors', 'network', 'dom', 'qa', 'health'
+	args: Type.Optional(Type.Array(Type.String())),
+});
+export type D3kCmdRequest = Static<typeof D3kCmdRequest>;
+
+export const D3kCmdResponse = Type.Object({
+	ok: Type.Boolean(),
+	output: Type.Optional(Type.String()),
+	error: Type.Optional(Type.String()),
+});
+export type D3kCmdResponse = Static<typeof D3kCmdResponse>;
+
+// --- Status request/response ---
+
+export const D3kStatusRequest = Type.Object({});
+export type D3kStatusRequest = Static<typeof D3kStatusRequest>;
+
+export const D3kStatusResponse = Type.Object({
+	sessionActive: Type.Boolean(),
+	pid: Type.Optional(Type.Number()),
+	port: Type.Optional(Type.Number()),
+	wsEndpoint: Type.Optional(Type.String()),
+	startedAt: Type.Optional(Type.String()),
+	uptime: Type.Number(),
+	lastReportPath: Type.Optional(Type.String()),
+});
+export type D3kStatusResponse = Static<typeof D3kStatusResponse>;
+
+// --- Session event published to NATS ---
+
+export const D3kSessionEventSchema = Type.Object({
+	type: Type.Union([Type.Literal('started'), Type.Literal('stopped')]),
+	pid: Type.Optional(Type.Number()),
+	wsEndpoint: Type.Optional(Type.String()),
+	port: Type.Optional(Type.Number()),
+	timestamp: Type.String(),
+});
+export type D3kSessionEventSchema = Static<typeof D3kSessionEventSchema>;
+
+// --- Recording event published to NATS os.dev3000.recording ---
+
+export const D3kRecordingEventSchema = Type.Object({
+	type: Type.Union([Type.Literal('started'), Type.Literal('chunk'), Type.Literal('stopped'), Type.Literal('error')]),
+	command: Type.String(),
+	args: Type.Optional(Type.Array(Type.String())),
+	output: Type.Optional(Type.String()),
+	error: Type.Optional(Type.String()),
+	timestamp: Type.String(),
+});
+export type D3kRecordingEventSchema = Static<typeof D3kRecordingEventSchema>;

package/packages/dev3000-app/views/dev3000/service/index.ts

@@ -0,0 +1,358 @@
+import { existsSync, mkdirSync, readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { createService } from '@genie-os/sdk/service';
+import type { D3kCmdRequest, D3kCmdResponse, D3kRecordingEventSchema } from '../schema';
+
+const startTime = Date.now();
+const SESSION_FILE = '/tmp/d3k-session.json';
+const REPORTS_DIR = join(process.cwd(), '.d3k', 'reports');
+const CLI_ENTRY = join(process.cwd(), 'src', 'tools', 'd3k', 'cli.ts');
+
+// ---------------------------------------------------------------------------
+// Session state
+// ---------------------------------------------------------------------------
+
+interface SessionState {
+	pid: number;
+	port: number;
+	wsEndpoint: string;
+	startedAt: string;
+	chromeBin?: string;
+}
+
+function isPidAlive(pid: number): boolean {
+	try {
+		process.kill(pid, 0);
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+function readSessionFile(): SessionState | null {
+	try {
+		if (!existsSync(SESSION_FILE)) return null;
+		const raw = readFileSync(SESSION_FILE, 'utf8');
+		const parsed = JSON.parse(raw) as SessionState;
+		return isPidAlive(parsed.pid) ? parsed : null;
+	} catch {
+		return null;
+	}
+}
+
+// ---------------------------------------------------------------------------
+// CLI command runner — spawns bun run src/tools/d3k/cli.ts <command> <args>
+// ---------------------------------------------------------------------------
+
+async function runCliCommand(command: string, args: string[] = [], timeoutMs = 15_000): Promise<D3kCmdResponse> {
+	const { spawn } = await import('node:child_process');
+
+	return new Promise((resolve) => {
+		let resolved = false;
+
+		const done = (result: D3kCmdResponse) => {
+			if (resolved) return;
+			resolved = true;
+			clearTimeout(timer);
+			resolve(result);
+		};
+
+		const child = spawn('bun', ['run', CLI_ENTRY, command, ...args], {
+			cwd: process.cwd(),
+			env: { ...process.env, FORCE_COLOR: '0' },
+			stdio: ['ignore', 'pipe', 'pipe'],
+		});
+
+		const timer = setTimeout(() => {
+			child.kill('SIGTERM');
+			done({ ok: false, error: `command timed out after ${timeoutMs / 1000}s` });
+		}, timeoutMs);
+
+		let stdout = '';
+		let stderr = '';
+
+		child.stdout?.on('data', (chunk: Buffer) => {
+			stdout += chunk.toString();
+		});
+		child.stderr?.on('data', (chunk: Buffer) => {
+			stderr += chunk.toString();
+		});
+
+		child.on('close', (code) => {
+			if (code === 0) {
+				done({ ok: true, output: stdout.trim() || undefined });
+			} else {
+				done({ ok: false, error: stderr.trim() || `exit code ${code}`, output: stdout.trim() || undefined });
+			}
+		});
+
+		child.on('error', (err) => {
+			done({ ok: false, error: err.message });
+		});
+	});
+}
+
+// ---------------------------------------------------------------------------
+// Session file watcher
+// ---------------------------------------------------------------------------
+
+async function watchSessionFile(
+	onStarted: (session: SessionState) => void,
+	onStopped: () => void,
+	signal: AbortSignal
+): Promise<void> {
+	const { watch } = await import('node:fs/promises');
+	const watchDir = SESSION_FILE.substring(0, SESSION_FILE.lastIndexOf('/'));
+	const fileName = SESSION_FILE.substring(SESSION_FILE.lastIndexOf('/') + 1);
+	let wasActive = readSessionFile() !== null;
+
+	try {
+		const watcher = watch(watchDir, { signal });
+		for await (const event of watcher) {
+			if (signal.aborted) break;
+			if (event.filename !== fileName) continue;
+			const session = readSessionFile();
+			const isActive = session !== null;
+			if (isActive && !wasActive) {
+				wasActive = true;
+				onStarted(session);
+			} else if (!isActive && wasActive) {
+				wasActive = false;
+				onStopped();
+			}
+		}
+	} catch (err: unknown) {
+		if (!signal.aborted) console.error('[d3k-service] session watcher error:', err);
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Reports directory watcher — extracted helpers to reduce complexity
+// ---------------------------------------------------------------------------
+
+function ensureReportsDir(): void {
+	try {
+		mkdirSync(REPORTS_DIR, { recursive: true });
+	} catch {
+		// ignore
+	}
+}
+
+function loadSeenReports(): Set<string> {
+	const seen = new Set<string>();
+	if (!existsSync(REPORTS_DIR)) return seen;
+	try {
+		for (const f of readdirSync(REPORTS_DIR)) {
+			if (f.endsWith('-qa.json')) seen.add(f);
+		}
+	} catch {
+		// ignore
+	}
+	return seen;
+}
+
+async function watchReportsDir(onNewReport: (reportPath: string) => void, signal: AbortSignal): Promise<void> {
+	const { watch } = await import('node:fs/promises');
+	ensureReportsDir();
+	const seen = loadSeenReports();
+
+	try {
+		const watcher = watch(REPORTS_DIR, { signal });
+		for await (const event of watcher) {
+			if (signal.aborted) break;
+			if (!event.filename?.endsWith('-qa.json')) continue;
+			if (seen.has(event.filename)) continue;
+			seen.add(event.filename);
+			const fullPath = join(REPORTS_DIR, event.filename);
+			if (existsSync(fullPath)) onNewReport(fullPath);
+		}
+	} catch (err: unknown) {
+		if (!signal.aborted) console.error('[d3k-service] reports watcher error:', err);
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Status helpers — extracted to reduce complexity of the status handler
+// ---------------------------------------------------------------------------
+
+function findLastReportPath(): string | undefined {
+	if (!existsSync(REPORTS_DIR)) return undefined;
+	try {
+		const reports = readdirSync(REPORTS_DIR)
+			.filter((f) => f.endsWith('-qa.json'))
+			.sort()
+			.reverse();
+		return reports.length > 0 ? join(REPORTS_DIR, reports[0]) : undefined;
+	} catch {
+		return undefined;
+	}
+}
+
+function buildStatusResponse(session: SessionState | null): string {
+	return JSON.stringify({
+		sessionActive: session !== null,
+		pid: session?.pid,
+		port: session?.port,
+		wsEndpoint: session?.wsEndpoint,
+		startedAt: session?.startedAt,
+		uptime: (Date.now() - startTime) / 1000,
+		lastReportPath: findLastReportPath(),
+	});
+}
+
+// ---------------------------------------------------------------------------
+// NATS subscription handlers
+// ---------------------------------------------------------------------------
+
+function isRecordCommand(command: string): boolean {
+	return command === 'record';
+}
+
+const SLOW_COMMANDS = new Set(['record', 'qa', 'crawl', 'monitor', 'console', 'network']);
+
+function getCommandTimeout(command: string): number {
+	return SLOW_COMMANDS.has(command) ? 120_000 : 30_000;
+}
+
+type RecordingPublisher = (event: D3kRecordingEventSchema) => void;
+
+function buildRecordingStartEvent(request: D3kCmdRequest): D3kRecordingEventSchema {
+	return {
+		type: 'started',
+		command: request.command,
+		args: request.args,
+		timestamp: new Date().toISOString(),
+	};
+}
+
+function buildRecordingEndEvent(request: D3kCmdRequest, result: D3kCmdResponse): D3kRecordingEventSchema {
+	return {
+		type: result.ok ? 'stopped' : 'error',
+		command: request.command,
+		args: request.args,
+		output: result.output,
+		error: result.error,
+		timestamp: new Date().toISOString(),
+	};
+}
+
+async function handleCmdMessage(
+	msg: { data: Uint8Array; subject: string; json: <T>() => T; respond: (data: string) => void },
+	publishRecording: RecordingPublisher
+): Promise<void> {
+	const request: D3kCmdRequest = msg.data.length > 0 ? msg.json<D3kCmdRequest>() : { command: 'health' };
+	const timeout = getCommandTimeout(request.command);
+	console.log(`[d3k-service] cmd: ${request.command} ${(request.args || []).join(' ')}`);
+
+	if (isRecordCommand(request.command)) {
+		publishRecording(buildRecordingStartEvent(request));
+	}
+
+	const result = await runCliCommand(request.command, request.args ?? [], timeout);
+
+	if (isRecordCommand(request.command)) {
+		publishRecording(buildRecordingEndEvent(request, result));
+	}
+
+	msg.respond(JSON.stringify(result));
+}
+
+// ---------------------------------------------------------------------------
+// State shared between onReady and onShutdown
+// ---------------------------------------------------------------------------
+
+let abortController: AbortController | null = null;
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+createService({
+	name: 'd3k-service',
+	onReady: async (nc) => {
+		console.log('[d3k-service] connected to NATS (lightweight mode — no Chrome spawning)');
+
+		abortController = new AbortController();
+
+		const publishSessionStarted = (session: SessionState) => {
+			const event = JSON.stringify({
+				type: 'started',
+				pid: session.pid,
+				wsEndpoint: session.wsEndpoint,
+				port: session.port,
+				timestamp: new Date().toISOString(),
+			});
+			nc.publish('os.dev3000.session', event);
+			console.log(`[d3k-service] session started (PID ${session.pid})`);
+		};
+
+		const publishSessionStopped = () => {
+			const event = JSON.stringify({ type: 'stopped', timestamp: new Date().toISOString() });
+			nc.publish('os.dev3000.session', event);
+			console.log('[d3k-service] session stopped');
+		};
+
+		const publishQaReport = (reportPath: string) => {
+			try {
+				const payload = readFileSync(reportPath, 'utf8');
+				nc.publish('os.dev3000.qa.report', payload);
+				console.log(`[d3k-service] QA report published: ${reportPath}`);
+			} catch (err) {
+				console.error('[d3k-service] failed to publish QA report:', err);
+			}
+		};
+
+		const publishRecordingEvent = (event: D3kRecordingEventSchema) => {
+			nc.publish('os.dev3000.recording', JSON.stringify(event));
+		};
+
+		// --- Start file watchers ---
+		watchSessionFile(publishSessionStarted, publishSessionStopped, abortController.signal).catch((err) =>
+			console.error('[d3k-service] session watcher fatal:', err)
+		);
+
+		watchReportsDir(publishQaReport, abortController.signal).catch((err) =>
+			console.error('[d3k-service] reports watcher fatal:', err)
+		);
+
+		// --- os.dev3000.cmd (request-reply) ---
+		const cmdSub = nc.subscribe('os.dev3000.cmd');
+		(async () => {
+			for await (const msg of cmdSub) {
+				try {
+					await handleCmdMessage(msg, publishRecordingEvent);
+				} catch (err) {
+					console.error('[d3k-service] cmd error:', err);
+					msg.respond(JSON.stringify({ ok: false, error: (err as Error).message }));
+				}
+			}
+		})();
+
+		// --- os.dev3000.status (request-reply) ---
+		const statusSub = nc.subscribe('os.dev3000.status');
+		(async () => {
+			for await (const msg of statusSub) {
+				try {
+					msg.respond(buildStatusResponse(readSessionFile()));
+				} catch (err) {
+					console.error('[d3k-service] status error:', err);
+					msg.respond(JSON.stringify({ error: (err as Error).message }));
+				}
+			}
+		})();
+
+		const initialSession = readSessionFile();
+		if (initialSession) {
+			console.log(`[d3k-service] active session detected at startup (PID ${initialSession.pid})`);
+		} else {
+			console.log('[d3k-service] no active session at startup');
+		}
+	},
+	onShutdown: async () => {
+		console.log('[d3k-service] shutting down...');
+		abortController?.abort();
+	},
+}).catch((err) => {
+	console.error('[d3k-service] fatal:', err);
+	process.exit(1);
+});

package/packages/dev3000-app/views/dev3000/service/runtime

@@ -0,0 +1 @@
+node

package/packages/dev3000-app/views/dev3000/subjects.ts

@@ -0,0 +1,9 @@
+const ROOT = 'os.dev3000';
+
+export const DEV3000_SUBJECTS = {
+	cmd: () => `${ROOT}.cmd`,
+	status: () => `${ROOT}.status`,
+	session: () => `${ROOT}.session`,
+	qaReport: () => `${ROOT}.qa.report`,
+	recording: () => `${ROOT}.recording`,
+} as const;

package/packages/dev3000-app/views/dev3000/types.ts

@@ -0,0 +1,77 @@
+export type D3kTab = 'dashboard' | 'errors';
+
+// ---------------------------------------------------------------------------
+// Session
+// ---------------------------------------------------------------------------
+
+export interface D3kSessionState {
+	active: boolean;
+	pid?: number;
+	wsEndpoint?: string;
+	port?: number;
+	startedAt?: string;
+}
+
+export interface D3kSessionEvent {
+	type: 'started' | 'stopped';
+	pid?: number;
+	wsEndpoint?: string;
+	port?: number;
+	timestamp: string;
+}
+
+// ---------------------------------------------------------------------------
+// QA Report
+// ---------------------------------------------------------------------------
+
+export interface D3kQaRouteErrors {
+	exceptions: number;
+	console_errors: number;
+}
+
+export interface D3kQaRouteNetwork {
+	total: number;
+	failed: number;
+}
+
+export interface D3kQaScreenshot {
+	route: string;
+	file: string;
+	viewport: string;
+}
+
+export interface D3kQaDomCheck {
+	route: string;
+	selector: string;
+	check: string;
+	pass: boolean;
+}
+
+export interface D3kQaSummary {
+	pass: boolean;
+	routes_passed: number;
+	routes_failed: number;
+	total_errors: number;
+	total_failed_network: number;
+	screenshots_taken: number;
+}
+
+export interface D3kQaReport {
+	timestamp: string;
+	duration_ms: number;
+	routes_tested: string[];
+	screenshots: D3kQaScreenshot[];
+	errors: {
+		js_exceptions: unknown[];
+		console_errors: unknown[];
+		by_route: Record<string, D3kQaRouteErrors>;
+	};
+	network: {
+		total_requests: number;
+		failed_requests: number;
+		slow_requests: unknown[];
+		by_route: Record<string, D3kQaRouteNetwork>;
+	};
+	dom_checks: D3kQaDomCheck[];
+	summary: D3kQaSummary;
+}