khal-os 1.260324.2

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

@@ -0,0 +1,247 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { EmptyState } from '@/components/os-primitives/empty-state';
+import type { LogEntry } from './types';
+
+// ---------------------------------------------------------------------------
+// Hash-to-color for subject segments
+// ---------------------------------------------------------------------------
+
+const SUBJECT_COLORS = [
+	'text-blue-400',
+	'text-green-400',
+	'text-amber-400',
+	'text-purple-400',
+	'text-pink-400',
+	'text-cyan-400',
+	'text-orange-400',
+	'text-teal-400',
+	'text-red-400',
+	'text-indigo-400',
+];
+
+function hashColor(segment: string): string {
+	let hash = 0;
+	for (let i = 0; i < segment.length; i++) {
+		hash = (hash * 31 + segment.charCodeAt(i)) | 0;
+	}
+	return SUBJECT_COLORS[Math.abs(hash) % SUBJECT_COLORS.length];
+}
+
+function subjectColor(subject: string): string {
+	// Color by first segment after "os."
+	const parts = subject.split('.');
+	const key = parts.length > 1 ? parts[1] : parts[0];
+	return hashColor(key);
+}
+
+// ---------------------------------------------------------------------------
+// Time formatting
+// ---------------------------------------------------------------------------
+
+function formatTimestamp(ts: number): string {
+	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}`;
+}
+
+// ---------------------------------------------------------------------------
+// Base64 detection and decoding
+// ---------------------------------------------------------------------------
+
+const BASE64_RE = /^[A-Za-z0-9+/]{4,}={0,2}$/;
+
+function isBase64(value: string): boolean {
+	if (value.length < 4) return false;
+	return BASE64_RE.test(value.trim());
+}
+
+function tryDecodeBase64(value: string): string | null {
+	try {
+		const decoded = atob(value.trim());
+		// Check if the decoded result is valid UTF-8 text (printable)
+		const isPrintable = /^[\x20-\x7E\t\n\r]+$/.test(decoded);
+		return isPrintable ? decoded : null;
+	} catch {
+		return null;
+	}
+}
+
+function decodeBase64InPayload(payload: unknown): unknown {
+	if (typeof payload === 'string' && isBase64(payload)) {
+		const decoded = tryDecodeBase64(payload);
+		return decoded !== null ? decoded : payload;
+	}
+	if (Array.isArray(payload)) {
+		return payload.map(decodeBase64InPayload);
+	}
+	if (payload !== null && typeof payload === 'object') {
+		const result: Record<string, unknown> = {};
+		for (const [key, value] of Object.entries(payload)) {
+			result[key] = decodeBase64InPayload(value);
+		}
+		return result;
+	}
+	return payload;
+}
+
+// ---------------------------------------------------------------------------
+// Payload truncation
+// ---------------------------------------------------------------------------
+
+function truncatePayload(payload: unknown, maxLen = 120): string {
+	try {
+		const str = JSON.stringify(payload);
+		return str.length > maxLen ? `${str.slice(0, maxLen)}...` : str;
+	} catch {
+		return String(payload);
+	}
+}
+
+// ---------------------------------------------------------------------------
+// MessageRow
+// ---------------------------------------------------------------------------
+
+function MessageRow({ entry, index }: { entry: LogEntry; index: number }) {
+	const [expanded, setExpanded] = useState(false);
+	const [decodeBase64, setDecodeBase64] = useState(false);
+
+	const displayPayload = decodeBase64 ? decodeBase64InPayload(entry.payload) : entry.payload;
+
+	return (
+		<div>
+			<button
+				type="button"
+				onClick={() => setExpanded(!expanded)}
+				className={`flex w-full items-baseline gap-2 px-2 py-0.5 text-left text-[11px] leading-5 transition-colors hover:bg-gray-alpha-200 ${
+					index % 2 === 0 ? 'bg-transparent' : 'bg-gray-alpha-50'
+				}`}
+			>
+				{/* Timestamp */}
+				<span className="shrink-0 font-mono text-gray-700">{formatTimestamp(entry.timestamp)}</span>
+
+				{/* Direction arrow */}
+				<span className={`shrink-0 font-mono ${entry.direction === 'in' ? 'text-green-500' : 'text-blue-500'}`}>
+					{entry.direction === 'in' ? '\u2190' : '\u2192'}
+				</span>
+
+				{/* Subject */}
+				<span className={`shrink-0 font-mono font-medium ${subjectColor(entry.subject)}`}>{entry.subject}</span>
+
+				{/* Payload preview */}
+				<span className="min-w-0 truncate font-mono text-gray-600">{truncatePayload(entry.payload)}</span>
+			</button>
+
+			{/* Expanded detail */}
+			{expanded && (
+				<div className="mx-2 mb-1 rounded border border-gray-alpha-200 bg-gray-alpha-50 p-2">
+					<div className="mb-1 flex items-center gap-2">
+						<button
+							type="button"
+							onClick={() => setDecodeBase64(!decodeBase64)}
+							className={`rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors ${
+								decodeBase64 ? 'bg-blue-600 text-white' : 'bg-gray-alpha-200 text-gray-800 hover:bg-gray-alpha-300'
+							}`}
+						>
+							Decode Base64
+						</button>
+					</div>
+					<pre className="overflow-auto whitespace-pre-wrap break-all font-mono text-[11px] leading-4 text-gray-1000">
+						{JSON.stringify(displayPayload, null, 2)}
+					</pre>
+				</div>
+			)}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// MessageLog
+// ---------------------------------------------------------------------------
+
+interface MessageLogProps {
+	entries: LogEntry[];
+	filter: string;
+	paused: boolean;
+}
+
+export function MessageLog({ entries, filter, paused }: MessageLogProps) {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const wasAtBottomRef = useRef(true);
+	const prevEntryCountRef = useRef(0);
+
+	// Filter entries
+	const filtered = useMemo(() => {
+		if (!filter) return entries;
+		const lower = filter.toLowerCase();
+		return entries.filter((e) => {
+			if (e.subject.toLowerCase().includes(lower)) return true;
+			try {
+				const payloadStr = JSON.stringify(e.payload).toLowerCase();
+				return payloadStr.includes(lower);
+			} catch {
+				return false;
+			}
+		});
+	}, [entries, filter]);
+
+	// Track scroll position to know if we're at the bottom
+	const handleScroll = () => {
+		const el = containerRef.current;
+		if (!el) return;
+		const threshold = 30;
+		wasAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+	};
+
+	// Auto-scroll when new entries arrive and not paused
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+
+		const hasNewEntries = filtered.length > prevEntryCountRef.current;
+		prevEntryCountRef.current = filtered.length;
+
+		if (!paused && hasNewEntries && wasAtBottomRef.current) {
+			el.scrollTop = el.scrollHeight;
+		}
+	}, [filtered.length, paused]);
+
+	// When unpausing, scroll to bottom
+	useEffect(() => {
+		if (!paused) {
+			const el = containerRef.current;
+			if (el) {
+				el.scrollTop = el.scrollHeight;
+				wasAtBottomRef.current = true;
+			}
+		}
+	}, [paused]);
+
+	if (filtered.length === 0 && !filter) {
+		return (
+			<div className="flex h-full items-center justify-center">
+				<EmptyState title="No messages yet" description="Subscribe to a NATS subject to start seeing messages." />
+			</div>
+		);
+	}
+
+	if (filtered.length === 0 && filter) {
+		return (
+			<div className="flex h-full items-center justify-center">
+				<EmptyState title="No matching messages" description={`No entries match "${filter}".`} />
+			</div>
+		);
+	}
+
+	return (
+		<div ref={containerRef} className="h-full overflow-auto" onScroll={handleScroll}>
+			{filtered.map((entry, i) => (
+				<MessageRow key={entry.id} entry={entry} index={i} />
+			))}
+		</div>
+	);
+}

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

@@ -0,0 +1,209 @@
+'use client';
+
+import { Filter, Inbox, Pause, Play, Radio, Send, Trash2 } from 'lucide-react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { SectionHeader, SplitPane, StatusBar, Toolbar } from '@/components/os-primitives';
+import { SidebarNav } from '@/components/os-primitives/sidebar-nav';
+import { useNats } from '@/lib/hooks/use-nats';
+import { MessageLog } from './MessageLog';
+import type { NatsViewerContextValue } from './nats-viewer-context';
+import { NatsViewerContext } from './nats-viewer-context';
+import { PublishPanel } from './PublishPanel';
+import { RequestPanel } from './RequestPanel';
+import { Sidebar } from './Sidebar';
+import { useMessageBuffer } from './use-message-buffer';
+
+export type { NatsViewerContextValue } from './nats-viewer-context';
+export { useNatsViewer } from './nats-viewer-context';
+
+// ---------------------------------------------------------------------------
+// NatsViewer component
+// ---------------------------------------------------------------------------
+
+type SidebarSection = 'subjects' | 'publish' | 'request';
+
+export function NatsViewer(_props: { windowId: string; meta?: Record<string, unknown> }) {
+	const [activeSection, setActiveSection] = useState<SidebarSection>('subjects');
+	const [paused, setPaused] = useState(false);
+	const [filter, setFilter] = useState('');
+
+	const { connected, subscribe } = useNats();
+	const buffer = useMessageBuffer();
+
+	// Track active subscriptions: subject -> unsub function
+	const unsubMapRef = useRef<Map<string, () => void>>(new Map());
+	const [subscriptions, setSubscriptions] = useState<Set<string>>(new Set());
+
+	// Stable ref for buffer.push so the subscribe callback never goes stale
+	const pushRef = useRef(buffer.push);
+	pushRef.current = buffer.push;
+
+	const addSubscription = useCallback(
+		(subject: string) => {
+			if (unsubMapRef.current.has(subject)) return;
+
+			const unsub = subscribe(subject, (data: unknown, actualSubject: string) => {
+				pushRef.current({ subject: actualSubject, payload: data, direction: 'in' });
+			});
+
+			unsubMapRef.current.set(subject, unsub);
+			setSubscriptions((prev) => new Set(prev).add(subject));
+		},
+		[subscribe]
+	);
+
+	const removeSubscription = useCallback((subject: string) => {
+		const unsub = unsubMapRef.current.get(subject);
+		if (unsub) {
+			unsub();
+			unsubMapRef.current.delete(subject);
+		}
+		setSubscriptions((prev) => {
+			const next = new Set(prev);
+			next.delete(subject);
+			return next;
+		});
+	}, []);
+
+	// Filtered count for toolbar display
+	const filteredEntries = useMemo(() => {
+		if (!filter) return buffer.entries;
+		const lower = filter.toLowerCase();
+		return buffer.entries.filter((e) => {
+			if (e.subject.toLowerCase().includes(lower)) return true;
+			try {
+				return JSON.stringify(e.payload).toLowerCase().includes(lower);
+			} catch {
+				return false;
+			}
+		});
+	}, [buffer.entries, filter]);
+
+	const messageCountLabel = filter
+		? `${filteredEntries.length}/${buffer.entries.length} messages`
+		: `${buffer.entries.length} messages`;
+
+	// Context value
+	const ctxValue = useMemo<NatsViewerContextValue>(
+		() => ({
+			subscriptions,
+			addSubscription,
+			removeSubscription,
+			buffer,
+			filter,
+			setFilter,
+			paused,
+			setPaused,
+		}),
+		[subscriptions, addSubscription, removeSubscription, buffer, filter, paused]
+	);
+
+	return (
+		<NatsViewerContext.Provider value={ctxValue}>
+			<div className="flex h-full flex-col bg-background-100">
+				<div className="flex-1 overflow-hidden">
+					<SplitPane defaultSize={250} min={180} max={360} collapseBelow={500}>
+						{/* ---- Sidebar ---- */}
+						<SplitPane.Panel className="bg-gray-alpha-50">
+							<SidebarNav label="NATS Viewer" title="NATS Viewer">
+								<SidebarNav.Group title="Subscriptions">
+									<SidebarNav.Item
+										active={activeSection === 'subjects'}
+										onClick={() => setActiveSection('subjects')}
+										icon={<Radio />}
+									>
+										Subjects
+									</SidebarNav.Item>
+								</SidebarNav.Group>
+
+								<SidebarNav.Group title="Tools">
+									<SidebarNav.Item
+										active={activeSection === 'publish'}
+										onClick={() => setActiveSection('publish')}
+										icon={<Send />}
+									>
+										Publish
+									</SidebarNav.Item>
+									<SidebarNav.Item
+										active={activeSection === 'request'}
+										onClick={() => setActiveSection('request')}
+										icon={<Inbox />}
+									>
+										Request
+									</SidebarNav.Item>
+								</SidebarNav.Group>
+							</SidebarNav>
+
+							{/* Sidebar detail panel */}
+							<div className="flex-1 overflow-y-auto border-t border-gray-alpha-200 p-3">
+								{activeSection === 'subjects' && <Sidebar />}
+								{activeSection === 'publish' && (
+									<div className="flex flex-col gap-2">
+										<SectionHeader title="Publish" description="Send a message to a subject." />
+										<PublishPanel onPublish={buffer.push} />
+									</div>
+								)}
+								{activeSection === 'request' && (
+									<div className="flex flex-col gap-2">
+										<SectionHeader title="Request" description="Send a request and view the reply." />
+										<RequestPanel onMessage={buffer.push} />
+									</div>
+								)}
+							</div>
+						</SplitPane.Panel>
+
+						{/* ---- Main log area ---- */}
+						<SplitPane.Panel>
+							<div className="flex h-full flex-col">
+								{/* Toolbar */}
+								<Toolbar>
+									<Toolbar.Group>
+										<Toolbar.Button
+											tooltip={paused ? 'Resume' : 'Pause'}
+											onClick={() => setPaused(!paused)}
+											active={paused}
+										>
+											{paused ? <Play /> : <Pause />}
+										</Toolbar.Button>
+										<Toolbar.Button tooltip="Clear log" onClick={() => buffer.clear()}>
+											<Trash2 />
+										</Toolbar.Button>
+									</Toolbar.Group>
+									<Toolbar.Separator />
+									<Toolbar.Group>
+										<Toolbar.Button tooltip="Filter">
+											<Filter />
+										</Toolbar.Button>
+									</Toolbar.Group>
+									<Toolbar.Input
+										placeholder="Filter by subject or payload..."
+										value={filter}
+										onChange={(e) => setFilter(e.target.value)}
+									/>
+									<Toolbar.Spacer />
+									<Toolbar.Text>{messageCountLabel}</Toolbar.Text>
+								</Toolbar>
+
+								{/* Message log */}
+								<div className="flex-1 overflow-hidden">
+									<MessageLog entries={buffer.entries} filter={filter} paused={paused} />
+								</div>
+							</div>
+						</SplitPane.Panel>
+					</SplitPane>
+				</div>
+
+				{/* Status bar */}
+				<StatusBar>
+					<StatusBar.Item>NATS Viewer</StatusBar.Item>
+					<StatusBar.Separator />
+					<StatusBar.Item>{subscriptions.size} subscription(s)</StatusBar.Item>
+					<StatusBar.Spacer />
+					<StatusBar.Item variant={connected ? 'success' : 'default'}>
+						{connected ? 'connected' : 'disconnected'}
+					</StatusBar.Item>
+				</StatusBar>
+			</div>
+		</NatsViewerContext.Provider>
+	);
+}

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

@@ -0,0 +1,111 @@
+'use client';
+
+import { Send } from 'lucide-react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+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), SUBJECTS.notify.broadcast(orgId)];
+}
+
+interface PublishPanelProps {
+	/** Optional callback to push an entry to the message buffer. */
+	onPublish?: (entry: Omit<LogEntry, 'id' | 'timestamp'>) => void;
+}
+
+export function PublishPanel({ onPublish }: PublishPanelProps) {
+	const { connected, publish } = useNats();
+	const auth = useKhalAuth();
+	const orgId = auth?.orgId ?? 'default';
+	const quickPicks = useMemo(() => buildQuickPickSubjects(orgId), [orgId]);
+
+	const [subject, setSubject] = useState('');
+	const [payload, setPayload] = useState('');
+	const [error, setError] = useState<string | null>(null);
+	const [sent, setSent] = useState(false);
+	const sentTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	const handleSend = useCallback(() => {
+		setError(null);
+
+		let parsed: unknown;
+		if (payload.trim()) {
+			try {
+				parsed = JSON.parse(payload);
+			} catch (e) {
+				setError(`Invalid JSON: ${(e as Error).message}`);
+				return;
+			}
+		}
+
+		publish(subject, parsed);
+
+		// Push to buffer as outgoing message
+		onPublish?.({ subject, payload: parsed, direction: 'out' });
+
+		// Show "Sent!" indicator
+		setSent(true);
+		if (sentTimer.current) clearTimeout(sentTimer.current);
+		sentTimer.current = setTimeout(() => setSent(false), 1000);
+	}, [subject, payload, publish, onPublish]);
+
+	const canSend = subject.trim().length > 0 && connected;
+
+	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);
+					setError(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='{"key": "value"}'
+				value={payload}
+				onChange={(e) => {
+					setPayload(e.target.value);
+					setError(null);
+				}}
+			/>
+
+			{/* Error message */}
+			{error && <p className="text-[11px] text-red-600">{error}</p>}
+
+			{/* Send button + Sent indicator */}
+			<div className="flex items-center gap-2">
+				<Button size="small" disabled={!canSend} onClick={handleSend} prefix={<Send className="h-3 w-3" />}>
+					Send
+				</Button>
+				{sent && <span className="text-[11px] font-medium text-green-600 animate-pulse">Sent!</span>}
+				{!connected && <span className="text-[11px] text-gray-600">Not connected</span>}
+			</div>
+		</div>
+	);
+}