khal-os 1.260324.2

package/src/components/apps/files/use-files.ts

@@ -0,0 +1,201 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useNats } from '@/lib/hooks/use-nats';
+import { SUBJECTS } from '@/lib/subjects';
+import type { FsEntry, FsListResponse, FsWriteRequest, FsWriteResponse } from './schema';
+
+/**
+ * Get the parent directory of a relative path.
+ * e.g. '/subdir/file.txt' -> '/subdir', '/file.txt' -> '/'
+ */
+function parentDir(filePath: string): string {
+	const lastSlash = filePath.lastIndexOf('/');
+	if (lastSlash <= 0) return '/';
+	return filePath.slice(0, lastSlash);
+}
+
+/**
+ * Sort entries: directories first, then alphabetical by name (case-insensitive).
+ */
+function sortEntries(entries: FsEntry[]): FsEntry[] {
+	return [...entries].sort((a, b) => {
+		if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+		return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
+	});
+}
+
+export interface UseFilesReturn {
+	currentPath: string;
+	filesRoot: string;
+	entries: FsEntry[];
+	loading: boolean;
+	error: string | null;
+	navigateTo: (path: string) => void;
+	refresh: () => void;
+	goBack: () => void;
+	goUp: () => void;
+	canGoBack: boolean;
+	writeOp: (op: FsWriteRequest) => Promise<FsWriteResponse>;
+}
+
+export function useFiles(): UseFilesReturn {
+	const { request, subscribe, orgId, connected } = useNats();
+	const [currentPath, setCurrentPath] = useState('/');
+	const [filesRoot, setFilesRoot] = useState('');
+	const [entries, setEntries] = useState<FsEntry[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [pathHistory, setPathHistory] = useState<string[]>([]);
+
+	// Track whether we've fetched at least once for this path
+	const lastFetchedPath = useRef<string | null>(null);
+
+	const fetchEntries = useCallback(
+		async (path: string) => {
+			if (!orgId || !connected) return;
+			setLoading(true);
+			setError(null);
+			try {
+				const response = (await request(SUBJECTS.fs.list(orgId), { path })) as FsListResponse & {
+					error?: string;
+				};
+				if (response.error) {
+					setError(response.error);
+					setEntries([]);
+				} else {
+					setEntries(sortEntries(response.entries));
+					setCurrentPath(response.path);
+					if (response.root) setFilesRoot(response.root);
+					lastFetchedPath.current = response.path;
+				}
+			} catch (err) {
+				setError((err as Error).message || 'Failed to list directory');
+				setEntries([]);
+			} finally {
+				setLoading(false);
+			}
+		},
+		[orgId, connected, request]
+	);
+
+	// Fetch entries when path changes or connection becomes available
+	useEffect(() => {
+		if (connected && orgId && lastFetchedPath.current !== currentPath) {
+			fetchEntries(currentPath);
+		}
+	}, [currentPath, connected, orgId, fetchEntries]);
+
+	// Initial fetch when first connected
+	useEffect(() => {
+		if (connected && orgId && lastFetchedPath.current === null) {
+			fetchEntries(currentPath);
+		}
+	}, [connected, orgId, currentPath, fetchEntries]);
+
+	// --- Live watch: subscribe to fs.watch events and auto-refresh on changes ---
+	// We use a ref for currentPath so the subscription callback always sees the latest value
+	// without needing to re-subscribe every time the path changes.
+	const currentPathRef = useRef(currentPath);
+	currentPathRef.current = currentPath;
+
+	// Debounce refresh calls from watch events to avoid rapid successive fetches
+	const watchRefreshTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	useEffect(() => {
+		if (!connected || !orgId) return;
+
+		const watchSubject = `khal.${orgId}.fs.watch.>`;
+		const unsub = subscribe(watchSubject, (data: unknown) => {
+			if (!data || typeof data !== 'object') return;
+			const event = data as Record<string, unknown>;
+			if (typeof event.type !== 'string' || typeof event.path !== 'string') return;
+
+			// Check if this event's parent directory matches the currently viewed path
+			const eventParent = parentDir(event.path as string);
+			if (eventParent !== currentPathRef.current) return;
+
+			// Debounce: coalesce rapid events (e.g. bulk operations) into a single refresh
+			if (watchRefreshTimer.current) {
+				clearTimeout(watchRefreshTimer.current);
+			}
+			watchRefreshTimer.current = setTimeout(() => {
+				watchRefreshTimer.current = null;
+				lastFetchedPath.current = null;
+				fetchEntries(currentPathRef.current);
+			}, 300);
+		});
+
+		return () => {
+			unsub();
+			if (watchRefreshTimer.current) {
+				clearTimeout(watchRefreshTimer.current);
+				watchRefreshTimer.current = null;
+			}
+		};
+	}, [connected, orgId, subscribe, fetchEntries]);
+
+	const navigateTo = useCallback(
+		(path: string) => {
+			setPathHistory((prev) => [...prev, currentPath]);
+			setCurrentPath(path);
+			lastFetchedPath.current = null; // Force re-fetch
+		},
+		[currentPath]
+	);
+
+	const refresh = useCallback(() => {
+		lastFetchedPath.current = null; // Force re-fetch
+		fetchEntries(currentPath);
+	}, [currentPath, fetchEntries]);
+
+	const goBack = useCallback(() => {
+		if (pathHistory.length === 0) return;
+		const previous = pathHistory[pathHistory.length - 1];
+		setPathHistory((prev) => prev.slice(0, -1));
+		setCurrentPath(previous);
+		lastFetchedPath.current = null;
+	}, [pathHistory]);
+
+	const goUp = useCallback(() => {
+		if (currentPath === '/') return;
+		const segments = currentPath.split('/').filter(Boolean);
+		segments.pop();
+		const parentPath = segments.length === 0 ? '/' : `/${segments.join('/')}`;
+		navigateTo(parentPath);
+	}, [currentPath, navigateTo]);
+
+	const writeOp = useCallback(
+		async (op: FsWriteRequest): Promise<FsWriteResponse> => {
+			if (!orgId || !connected) {
+				return { ok: false, error: 'Not connected' };
+			}
+			try {
+				const response = (await request(SUBJECTS.fs.write(orgId), op)) as FsWriteResponse;
+				if (response.ok) {
+					// Refresh after successful write
+					lastFetchedPath.current = null;
+					fetchEntries(currentPath);
+				}
+				return response;
+			} catch (err) {
+				return { ok: false, error: (err as Error).message || 'Write operation failed' };
+			}
+		},
+		[orgId, connected, request, currentPath, fetchEntries]
+	);
+
+	return {
+		currentPath,
+		filesRoot,
+		entries,
+		loading,
+		error,
+		navigateTo,
+		refresh,
+		goBack,
+		goUp,
+		canGoBack: pathHistory.length > 0,
+		writeOp,
+	};
+}

package/src/components/apps/files/use-upload.ts

@@ -0,0 +1,105 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+
+export interface UploadState {
+	uploading: boolean;
+	progress: number; // 0-100
+	fileName: string | null;
+	error: string | null;
+}
+
+const INITIAL_STATE: UploadState = {
+	uploading: false,
+	progress: 0,
+	fileName: null,
+	error: null,
+};
+
+function uploadFile(file: File, targetPath: string): Promise<void> {
+	return new Promise((resolve, reject) => {
+		const xhr = new XMLHttpRequest();
+		const formData = new FormData();
+		formData.append('file', file);
+		formData.append('path', targetPath);
+
+		xhr.open('POST', '/api/files/upload');
+
+		xhr.onload = () => {
+			if (xhr.status >= 200 && xhr.status < 300) {
+				try {
+					const response = JSON.parse(xhr.responseText);
+					if (response.ok) {
+						resolve();
+					} else {
+						reject(new Error(response.error || 'Upload failed'));
+					}
+				} catch {
+					reject(new Error('Invalid server response'));
+				}
+			} else {
+				reject(new Error(`Upload failed (${xhr.status})`));
+			}
+		};
+
+		xhr.onerror = () => {
+			reject(new Error('Network error'));
+		};
+
+		xhr.send(formData);
+	});
+}
+
+export function useUpload(currentPath: string, onComplete: () => void) {
+	const [uploadState, setUploadState] = useState<UploadState>(INITIAL_STATE);
+
+	const uploadFiles = useCallback(
+		async (files: FileList | File[]) => {
+			const fileArray = Array.from(files);
+			if (fileArray.length === 0) return;
+
+			setUploadState({
+				uploading: true,
+				progress: 0,
+				fileName: fileArray.length === 1 ? fileArray[0].name : `${fileArray.length} files`,
+				error: null,
+			});
+
+			let completed = 0;
+
+			try {
+				for (const file of fileArray) {
+					setUploadState((prev) => ({
+						...prev,
+						fileName: fileArray.length === 1 ? file.name : `${file.name} (${completed + 1}/${fileArray.length})`,
+					}));
+
+					await uploadFile(file, currentPath);
+					completed++;
+
+					setUploadState((prev) => ({
+						...prev,
+						progress: Math.round((completed / fileArray.length) * 100),
+					}));
+				}
+
+				setUploadState(INITIAL_STATE);
+				onComplete();
+			} catch (err) {
+				setUploadState({
+					uploading: false,
+					progress: 0,
+					fileName: null,
+					error: err instanceof Error ? err.message : 'Upload failed',
+				});
+			}
+		},
+		[currentPath, onComplete]
+	);
+
+	const clearError = useCallback(() => {
+		setUploadState(INITIAL_STATE);
+	}, []);
+
+	return { uploadState, uploadFiles, clearError };
+}

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { X } from 'lucide-react';
+import { useNatsViewer } from './nats-viewer-context';
+
+export function ActiveSubs() {
+	const { subscriptions, removeSubscription } = useNatsViewer();
+	const subjects = Array.from(subscriptions).sort();
+
+	if (subjects.length === 0) {
+		return <p className="px-1 text-[11px] italic text-gray-700">No active subscriptions</p>;
+	}
+
+	return (
+		<div className="flex flex-col gap-0.5">
+			{subjects.map((subject) => (
+				<div
+					key={subject}
+					className="group flex items-center gap-1.5 rounded px-1.5 py-0.5 transition-colors hover:bg-gray-alpha-100"
+				>
+					<span className="inline-block h-2 w-2 shrink-0 rounded-full bg-green-500" />
+					<span className="min-w-0 flex-1 truncate font-mono text-xs text-gray-900">{subject}</span>
+					<button
+						onClick={() => removeSubscription(subject)}
+						className="shrink-0 rounded p-0.5 text-gray-600 opacity-0 transition-all hover:bg-red-100 hover:text-red-600 group-hover:opacity-100"
+						aria-label={`Unsubscribe from ${subject}`}
+					>
+						<X className="h-3 w-3" />
+					</button>
+				</div>
+			))}
+		</div>
+	);
+}

package/src/components/apps/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 "khal."
+	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>
+	);
+}