khal-os 1.260324.2

package/packages/nats-viewer-app/views/nats-viewer/RequestPanel.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { Inbox } from 'lucide-react';
+import { useCallback, useMemo, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Spinner } from '@/components/ui/spinner';
+import { useKhalAuth } from '@/lib/auth/use-auth';
+import { useNats } from '@/lib/hooks/use-nats';
+import { SUBJECTS } from '@/lib/subjects';
+import type { LogEntry } from './types';
+
+function buildQuickPickSubjects(orgId: string): string[] {
+	return [SUBJECTS.echo(orgId), SUBJECTS.pty.create(orgId), SUBJECTS.pty.list(orgId)];
+}
+
+type RequestState =
+	| { status: 'idle' }
+	| { status: 'loading' }
+	| { status: 'success'; data: unknown }
+	| { status: 'error'; message: string };
+
+interface RequestPanelProps {
+	/** Optional callback to push an entry to the message buffer. */
+	onMessage?: (entry: Omit<LogEntry, 'id' | 'timestamp'>) => void;
+}
+
+export function RequestPanel({ onMessage }: RequestPanelProps) {
+	const { connected, request } = useNats();
+	const auth = useKhalAuth();
+	const orgId = auth?.orgId ?? 'default';
+	const quickPicks = useMemo(() => buildQuickPickSubjects(orgId), [orgId]);
+
+	const [subject, setSubject] = useState('');
+	const [payload, setPayload] = useState('');
+	const [timeout, setTimeout_] = useState(5000);
+	const [jsonError, setJsonError] = useState<string | null>(null);
+	const [reqState, setReqState] = useState<RequestState>({ status: 'idle' });
+
+	const handleSend = useCallback(async () => {
+		setJsonError(null);
+
+		let parsed: unknown;
+		if (payload.trim()) {
+			try {
+				parsed = JSON.parse(payload);
+			} catch (e) {
+				setJsonError(`Invalid JSON: ${(e as Error).message}`);
+				return;
+			}
+		}
+
+		// Clear previous response and start loading
+		setReqState({ status: 'loading' });
+
+		// Push outgoing request to buffer
+		onMessage?.({ subject, payload: parsed, direction: 'out' });
+
+		try {
+			const response = await request(subject, parsed, timeout);
+			setReqState({ status: 'success', data: response });
+
+			// Push response to buffer
+			onMessage?.({ subject: `${subject} (reply)`, payload: response, direction: 'in' });
+		} catch (e) {
+			const message = e instanceof Error ? e.message : String(e);
+			setReqState({ status: 'error', message });
+		}
+	}, [subject, payload, timeout, request, onMessage]);
+
+	const canSend = subject.trim().length > 0 && connected && reqState.status !== 'loading';
+
+	return (
+		<div className="flex flex-col gap-2">
+			{/* Subject input */}
+			<Input
+				size="small"
+				placeholder={SUBJECTS.echo(orgId)}
+				value={subject}
+				onChange={(e) => {
+					setSubject(e.target.value);
+					setJsonError(null);
+				}}
+			/>
+
+			{/* Quick-pick subjects */}
+			<div className="flex flex-wrap gap-1">
+				{quickPicks.map((s) => (
+					<button
+						key={s}
+						type="button"
+						className="rounded border border-gray-alpha-300 px-1.5 py-0.5 text-[10px] font-mono text-gray-800 hover:bg-gray-alpha-100 transition-colors"
+						onClick={() => setSubject(s)}
+					>
+						{s}
+					</button>
+				))}
+			</div>
+
+			{/* Payload textarea */}
+			<textarea
+				className="w-full rounded-md border border-gray-alpha-400 bg-background-100 px-2 py-1.5 font-mono text-xs text-gray-1000 placeholder:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-1 resize-none"
+				rows={4}
+				placeholder="{}"
+				value={payload}
+				onChange={(e) => {
+					setPayload(e.target.value);
+					setJsonError(null);
+				}}
+			/>
+
+			{/* Timeout input */}
+			<div className="flex items-center gap-2">
+				<label className="text-[11px] text-gray-800 shrink-0">Timeout</label>
+				<Input
+					size="small"
+					type="number"
+					className="w-20 text-xs"
+					value={timeout}
+					onChange={(e) => setTimeout_(Number(e.target.value) || 5000)}
+				/>
+				<span className="text-[11px] text-gray-700">ms</span>
+			</div>
+
+			{/* JSON error */}
+			{jsonError && <p className="text-[11px] text-red-600">{jsonError}</p>}
+
+			{/* Send button */}
+			<div className="flex items-center gap-2">
+				<Button
+					size="small"
+					disabled={!canSend}
+					onClick={handleSend}
+					loading={reqState.status === 'loading'}
+					prefix={<Inbox className="h-3 w-3" />}
+				>
+					Send Request
+				</Button>
+				{!connected && <span className="text-[11px] text-gray-600">Not connected</span>}
+			</div>
+
+			{/* Response area */}
+			{reqState.status === 'loading' && (
+				<div className="flex items-center gap-2 rounded border border-gray-alpha-300 bg-gray-alpha-50 px-2 py-2">
+					<Spinner size="sm" />
+					<span className="text-[11px] text-gray-800">Waiting for reply...</span>
+				</div>
+			)}
+
+			{reqState.status === 'success' && (
+				<div className="rounded border border-gray-alpha-400 bg-gray-alpha-50 p-2 overflow-auto max-h-48">
+					<pre className="font-mono text-xs text-gray-1000 whitespace-pre-wrap break-all">
+						{typeof reqState.data === 'string' ? reqState.data : JSON.stringify(reqState.data, null, 2)}
+					</pre>
+				</div>
+			)}
+
+			{reqState.status === 'error' && (
+				<div className="rounded border border-red-300 bg-red-50 dark:bg-red-950/20 p-2">
+					<p className="font-mono text-[11px] text-red-600 break-all">{reqState.message}</p>
+				</div>
+			)}
+		</div>
+	);
+}

package/packages/nats-viewer-app/views/nats-viewer/Sidebar.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { Radio } from 'lucide-react';
+import { Separator } from '@/components/ui/separator';
+import { ActiveSubs } from './ActiveSubs';
+import { useNatsViewer } from './nats-viewer-context';
+import { SubjectCatalog } from './SubjectCatalog';
+import { SubscribeInput } from './SubscribeInput';
+
+export function Sidebar() {
+	const { subscriptions, addSubscription, removeSubscription } = useNatsViewer();
+	const catchAll = 'os.>';
+	const catchAllActive = subscriptions.has(catchAll);
+
+	const toggleCatchAll = () => {
+		if (catchAllActive) {
+			removeSubscription(catchAll);
+		} else {
+			addSubscription(catchAll);
+		}
+	};
+
+	return (
+		<div className="flex flex-col gap-3 overflow-y-auto">
+			{/* Catch-all toggle */}
+			<button
+				onClick={toggleCatchAll}
+				className={`flex items-center gap-2 rounded-md px-2 py-1.5 text-xs font-medium transition-colors ${
+					catchAllActive
+						? 'bg-green-500/15 text-green-700 hover:bg-green-500/25'
+						: 'bg-gray-alpha-100 text-gray-900 hover:bg-gray-alpha-200'
+				}`}
+			>
+				<Radio className="h-3.5 w-3.5" />
+				<span className="font-mono">{catchAll}</span>
+				<span className="ml-auto text-[11px]">{catchAllActive ? 'ON' : 'OFF'}</span>
+			</button>
+
+			{/* Custom subscribe input */}
+			<SubscribeInput />
+
+			<Separator />
+
+			{/* Known Subjects */}
+			<div>
+				<h3 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-gray-700">Known Subjects</h3>
+				<SubjectCatalog />
+			</div>
+
+			<Separator />
+
+			{/* Active Subscriptions */}
+			<div>
+				<h3 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-gray-700">Active Subscriptions</h3>
+				<ActiveSubs />
+			</div>
+		</div>
+	);
+}

package/packages/nats-viewer-app/views/nats-viewer/SubjectCatalog.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { useMemo } from 'react';
+import { useKhalAuth } from '@/lib/auth/use-auth';
+import { useNats } from '@/lib/hooks/use-nats';
+import { SUBJECTS } from '@/lib/subjects';
+import { useNatsViewer } from './nats-viewer-context';
+
+/**
+ * Build a list of known static subjects.
+ * Skips session-scoped subjects like pty.data.
+ */
+function buildKnownSubjects(orgId: string, userId: string): string[] {
+	const subjects = [
+		SUBJECTS.echo(orgId),
+		SUBJECTS.system.health(orgId),
+		SUBJECTS.pty.create(orgId),
+		SUBJECTS.pty.destroy(orgId),
+		SUBJECTS.pty.list(orgId),
+		SUBJECTS.fs.list(orgId),
+		SUBJECTS.fs.read(orgId),
+		SUBJECTS.fs.write(orgId),
+		SUBJECTS.fs.search(orgId),
+		SUBJECTS.notify.broadcast(orgId),
+	];
+	if (userId) {
+		subjects.push(SUBJECTS.desktop.cmd.all(orgId, userId), SUBJECTS.desktop.event.all(orgId, userId));
+	}
+	return subjects.sort();
+}
+
+export function SubjectCatalog() {
+	const { subscriptions, addSubscription, removeSubscription } = useNatsViewer();
+	const { userId } = useNats();
+	const auth = useKhalAuth();
+	const orgId = auth?.orgId ?? 'default';
+
+	const knownSubjects = useMemo(() => buildKnownSubjects(orgId, userId), [orgId, userId]);
+
+	return (
+		<div className="flex flex-col gap-0.5">
+			{knownSubjects.map((subject) => {
+				const active = subscriptions.has(subject);
+				return (
+					<button
+						key={subject}
+						onClick={() => (active ? removeSubscription(subject) : addSubscription(subject))}
+						className="group flex items-center gap-2 rounded px-1.5 py-0.5 text-left transition-colors hover:bg-gray-alpha-100"
+					>
+						<span
+							className={`inline-block h-2 w-2 shrink-0 rounded-full transition-colors ${
+								active ? 'bg-green-500' : 'bg-gray-400 group-hover:bg-gray-500'
+							}`}
+						/>
+						<span className="min-w-0 truncate font-mono text-xs text-gray-900 group-hover:text-gray-1000">
+							{subject}
+						</span>
+					</button>
+				);
+			})}
+		</div>
+	);
+}

package/packages/nats-viewer-app/views/nats-viewer/SubscribeInput.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import { useNatsViewer } from './nats-viewer-context';
+
+export function SubscribeInput() {
+	const { addSubscription } = useNatsViewer();
+	const [value, setValue] = useState('');
+	const [error, setError] = useState('');
+
+	const handleSubmit = () => {
+		const trimmed = value.trim();
+		if (!trimmed) return;
+
+		if (!trimmed.startsWith('os.')) {
+			setError('Subject must start with "os."');
+			return;
+		}
+
+		setError('');
+		addSubscription(trimmed);
+		setValue('');
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			handleSubmit();
+		}
+	};
+
+	return (
+		<div className="flex flex-col gap-1">
+			<div className="flex items-center gap-1">
+				<input
+					type="text"
+					value={value}
+					onChange={(e) => {
+						setValue(e.target.value);
+						if (error) setError('');
+					}}
+					onKeyDown={handleKeyDown}
+					placeholder="os.custom.subject"
+					className="h-7 flex-1 rounded border border-gray-alpha-400 bg-background-100 px-2 font-mono text-xs text-gray-1000 placeholder:text-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-700"
+				/>
+				<button
+					onClick={handleSubmit}
+					disabled={!value.trim()}
+					className="flex h-7 shrink-0 items-center gap-1 rounded border border-gray-alpha-400 bg-background-100 px-2 text-xs text-gray-900 transition-colors hover:bg-gray-alpha-100 hover:text-gray-1000 disabled:opacity-40 disabled:pointer-events-none"
+				>
+					<Plus className="h-3 w-3" />
+					Sub
+				</button>
+			</div>
+			{error && <p className="px-0.5 text-[11px] text-red-600">{error}</p>}
+		</div>
+	);
+}

package/packages/nats-viewer-app/views/nats-viewer/index.ts

@@ -0,0 +1,5 @@
+export { MessageLog } from './MessageLog';
+export type { NatsViewerContextValue } from './NatsViewer';
+export { NatsViewer, useNatsViewer } from './NatsViewer';
+export type { LogEntry } from './types';
+export { useMessageBuffer } from './use-message-buffer';

package/packages/nats-viewer-app/views/nats-viewer/nats-viewer-context.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import type { LogEntry } from './types';
+
+// ---------------------------------------------------------------------------
+// Context — shared state for sidebar panels and the main log area
+// ---------------------------------------------------------------------------
+
+export interface NatsViewerContextValue {
+	subscriptions: Set<string>;
+	addSubscription: (subject: string) => void;
+	removeSubscription: (subject: string) => void;
+	buffer: {
+		entries: LogEntry[];
+		push: (entry: Omit<LogEntry, 'id' | 'timestamp'>) => void;
+		clear: () => void;
+	};
+	filter: string;
+	setFilter: (f: string) => void;
+	paused: boolean;
+	setPaused: (p: boolean) => void;
+}
+
+export const NatsViewerContext = createContext<NatsViewerContextValue | null>(null);
+
+export function useNatsViewer(): NatsViewerContextValue {
+	const ctx = useContext(NatsViewerContext);
+	if (!ctx) throw new Error('useNatsViewer must be used within <NatsViewer>');
+	return ctx;
+}

package/packages/nats-viewer-app/views/nats-viewer/types.ts

@@ -0,0 +1,7 @@
+export interface LogEntry {
+	id: string;
+	timestamp: number;
+	subject: string;
+	payload: unknown;
+	direction: 'in' | 'out'; // 'in' = received, 'out' = published by user
+}

package/packages/nats-viewer-app/views/nats-viewer/use-message-buffer.ts

@@ -0,0 +1,55 @@
+import { useCallback, useReducer } from 'react';
+import type { LogEntry } from './types';
+
+const DEFAULT_CAPACITY = 1000;
+
+type Action =
+	| { type: 'push'; entry: Omit<LogEntry, 'id' | 'timestamp'> }
+	| { type: 'clear' }
+	| { type: 'set-capacity'; capacity: number };
+
+interface State {
+	entries: LogEntry[];
+	capacity: number;
+}
+
+function reducer(state: State, action: Action): State {
+	switch (action.type) {
+		case 'push': {
+			const entry: LogEntry = {
+				...action.entry,
+				id: crypto.randomUUID(),
+				timestamp: Date.now(),
+			};
+			const next = [...state.entries, entry];
+			// Drop oldest entries when over capacity
+			if (next.length > state.capacity) {
+				return { ...state, entries: next.slice(next.length - state.capacity) };
+			}
+			return { ...state, entries: next };
+		}
+		case 'clear':
+			return { ...state, entries: [] };
+		case 'set-capacity': {
+			const entries =
+				state.entries.length > action.capacity
+					? state.entries.slice(state.entries.length - action.capacity)
+					: state.entries;
+			return { capacity: action.capacity, entries };
+		}
+	}
+}
+
+export function useMessageBuffer(capacity = DEFAULT_CAPACITY) {
+	const [state, dispatch] = useReducer(reducer, { entries: [], capacity });
+
+	const push = useCallback((entry: Omit<LogEntry, 'id' | 'timestamp'>) => {
+		dispatch({ type: 'push', entry });
+	}, []);
+
+	const clear = useCallback(() => {
+		dispatch({ type: 'clear' });
+	}, []);
+
+	return { entries: state.entries, push, clear };
+}

package/packages/os-cli/package.json

@@ -0,0 +1,18 @@
+{
+	"name": "@genie-os/cli",
+	"version": "0.0.1",
+	"private": true,
+	"type": "module",
+	"bin": {
+		"genie-os": "./dist/index.js"
+	},
+	"scripts": {
+		"build": "bun build src/index.ts --outfile dist/index.js --target node"
+	},
+	"dependencies": {
+		"commander": "^12.1.0",
+		"chalk": "^5.4.1",
+		"@nats-io/transport-node": "^3.3.1",
+		"@nats-io/jetstream": "^3.3.1"
+	}
+}

package/packages/os-cli/src/commands/events.ts

@@ -0,0 +1,176 @@
+import { DeliverPolicy, jetstream } from '@nats-io/jetstream';
+import chalk from 'chalk';
+import { Command } from 'commander';
+import { connectNats, decode } from '../lib/nats.js';
+
+/** Parse a duration string like "5m", "1h", "30s" into milliseconds. */
+function parseDuration(input: string): number {
+	const match = input.match(/^(\d+)(s|m|h|d)$/);
+	if (!match) throw new Error(`Invalid duration: "${input}". Use format like 5m, 1h, 30s`);
+	const value = Number.parseInt(match[1], 10);
+	const unit = match[2];
+	const multipliers: Record<string, number> = { s: 1000, m: 60_000, h: 3_600_000, d: 86_400_000 };
+	return value * multipliers[unit];
+}
+
+interface EventEntry {
+	subject: string;
+	service: string;
+	duration_ms: number;
+	payload_bytes?: number;
+	trace_id: string;
+	span_id: string;
+	parent_span_id?: string;
+	ts: string;
+	error?: { message: string; stack?: string };
+}
+
+/** Palette of distinct colors for service names. */
+const SERVICE_COLORS = [
+	chalk.cyan,
+	chalk.magenta,
+	chalk.green,
+	chalk.yellow,
+	chalk.blue,
+	chalk.red,
+	chalk.white,
+	chalk.gray,
+];
+const serviceColorMap = new Map<string, (text: string) => string>();
+let colorIndex = 0;
+
+function getServiceColor(service: string): (text: string) => string {
+	const existing = serviceColorMap.get(service);
+	if (existing) return existing;
+	const color = SERVICE_COLORS[colorIndex % SERVICE_COLORS.length];
+	serviceColorMap.set(service, color);
+	colorIndex++;
+	return color;
+}
+
+function formatEvent(entry: EventEntry): string {
+	const ts = formatTimestamp(entry.ts);
+	const serviceColor = getServiceColor(entry.service);
+	const service = serviceColor(`[${entry.service}]`);
+	const subject = chalk.white(entry.subject);
+	const hasError = !!entry.error;
+
+	const durationMs = entry.duration_ms;
+	let duration: string;
+	if (durationMs < 1) duration = chalk.green(`${durationMs.toFixed(2)}ms`);
+	else if (durationMs < 100) duration = chalk.green(`${durationMs.toFixed(1)}ms`);
+	else if (durationMs < 1000) duration = chalk.yellow(`${durationMs.toFixed(0)}ms`);
+	else duration = chalk.red(`${(durationMs / 1000).toFixed(2)}s`);
+
+	const status = hasError ? chalk.red('ERR') : chalk.green('OK');
+	const traceId = entry.trace_id ? chalk.dim(`trace=${entry.trace_id.slice(0, 8)}`) : '';
+
+	let line = `${chalk.dim(ts)} ${status} ${service} ${subject} ${duration} ${traceId}`;
+
+	if (hasError && entry.error) {
+		line += `\n  ${chalk.red(entry.error.message)}`;
+		if (entry.error.stack) {
+			const stackLines = entry.error.stack.split('\n').slice(1, 4);
+			for (const sl of stackLines) {
+				line += `\n  ${chalk.dim(sl.trim())}`;
+			}
+		}
+	}
+
+	return line;
+}
+
+function formatTimestamp(ts: string): string {
+	try {
+		const d = new Date(ts);
+		const h = String(d.getHours()).padStart(2, '0');
+		const m = String(d.getMinutes()).padStart(2, '0');
+		const s = String(d.getSeconds()).padStart(2, '0');
+		const ms = String(d.getMilliseconds()).padStart(3, '0');
+		return `${h}:${m}:${s}.${ms}`;
+	} catch {
+		return ts;
+	}
+}
+
+export const eventsCommand = new Command('events')
+	.description('Tail handler events with timing and status')
+	.argument('[subject-pattern]', 'NATS subject pattern to filter events (e.g. os.genie.teams.*)')
+	.option('--all', 'Subscribe to all handler events')
+	.option('--since <duration>', 'Replay events from JetStream (e.g. 5m, 1h, 30s)')
+	.option('--json', 'Output raw JSON lines')
+	.action(async (subjectPattern: string | undefined, opts: { all?: boolean; since?: string; json?: boolean }) => {
+		if (!subjectPattern && !opts.all) {
+			console.error('Error: specify a subject pattern or use --all');
+			process.exit(1);
+		}
+
+		const nc = await connectNats();
+
+		// Build the NATS subject to subscribe to.
+		// User passes a pattern like "os.genie.teams.*" — we prefix with "os.o11y.events."
+		const subject = opts.all ? 'os.o11y.events.>' : `os.o11y.events.${subjectPattern}`;
+
+		if (opts.since) {
+			await replayThenTail(nc, subject, opts);
+		} else {
+			await liveTail(nc, subject, opts);
+		}
+	});
+
+async function liveTail(
+	nc: Awaited<ReturnType<typeof connectNats>>,
+	subject: string,
+	opts: { json?: boolean }
+): Promise<void> {
+	const sub = nc.subscribe(subject);
+
+	for await (const msg of sub) {
+		try {
+			const raw = decode(msg.data);
+			const entry: EventEntry = JSON.parse(raw);
+
+			if (opts.json) {
+				process.stdout.write(raw + '\n');
+			} else {
+				process.stdout.write(formatEvent(entry) + '\n');
+			}
+		} catch {
+			// Skip malformed messages
+		}
+	}
+}
+
+async function replayThenTail(
+	nc: Awaited<ReturnType<typeof connectNats>>,
+	subject: string,
+	opts: { since?: string; json?: boolean }
+): Promise<void> {
+	const sinceMs = parseDuration(opts.since!);
+	const startTime = new Date(Date.now() - sinceMs);
+
+	const js = jetstream(nc);
+
+	const consumer = await js.consumers.get('OS_O11Y_EVENTS', {
+		filter_subjects: [subject],
+		deliver_policy: DeliverPolicy.StartTime,
+		opt_start_time: startTime.toISOString(),
+	});
+
+	const messages = await consumer.consume();
+
+	for await (const msg of messages) {
+		try {
+			const raw = decode(msg.data);
+			const entry: EventEntry = JSON.parse(raw);
+
+			if (opts.json) {
+				process.stdout.write(raw + '\n');
+			} else {
+				process.stdout.write(formatEvent(entry) + '\n');
+			}
+		} catch {
+			// Skip malformed messages
+		}
+	}
+}