khal-os 1.260324.2

package/src/components/apps/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/src/components/apps/nats-viewer/PublishPanel.tsx

@@ -0,0 +1,113 @@
+'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';
+
+/** Build quick-pick subjects using the current orgId. */
+function buildQuickPickSubjects(orgId: string): string[] {
+	if (!orgId) return [];
+	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 ?? '';
+	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={orgId ? SUBJECTS.echo(orgId) : 'khal.<orgId>.echo'}
+				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>
+	);
+}

package/src/components/apps/nats-viewer/RequestPanel.tsx

@@ -0,0 +1,167 @@
+'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';
+
+/** Build quick-pick subjects using the current orgId. */
+function buildQuickPickSubjects(orgId: string): string[] {
+	if (!orgId) return [];
+	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 ?? '';
+	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={orgId ? SUBJECTS.echo(orgId) : 'khal.<orgId>.echo'}
+				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/src/components/apps/nats-viewer/Sidebar.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { Radio } from 'lucide-react';
+import { Separator } from '@/components/ui/separator';
+import { useKhalAuth } from '@/lib/auth/use-auth';
+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 auth = useKhalAuth();
+	const orgId = auth?.orgId ?? '';
+	const catchAll = orgId ? `khal.${orgId}.>` : 'khal.>';
+	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/src/components/apps/nats-viewer/SubjectCatalog.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useMemo } from 'react';
+import { useKhalAuth } from '@/lib/auth/use-auth';
+import { SUBJECTS } from '@/lib/subjects';
+import { useNatsViewer } from './nats-viewer-context';
+
+/**
+ * Build a list of known static subjects using the current orgId.
+ * Only includes subjects that don't require dynamic parameters
+ * beyond orgId (i.e., skips session-scoped subjects like pty.data).
+ */
+function buildKnownSubjects(orgId: string, userId: string): string[] {
+	if (!orgId) return [];
+	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 auth = useKhalAuth();
+	const orgId = auth?.orgId ?? '';
+	const userId = auth?.userId ?? '';
+
+	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/src/components/apps/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('khal.')) {
+			setError('Subject must start with "khal."');
+			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="khal.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/src/components/apps/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';