khal-os 1.260324.2

package/src/lib/hooks/use-desktop-nats.ts

@@ -0,0 +1,438 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { APP_MANIFEST, type AppId } from '@/components/apps/app-manifest';
+import { APP_REGISTRY } from '@/components/apps/app-registry';
+import { useKhalAuth } from '@/lib/auth/use-auth';
+import { claimCommand, deriveCommandId } from '@/lib/desktop/dedup';
+import type { DesktopCmdNotify, DesktopCmdOpen, DesktopCmdWindow } from '@/lib/desktop/schema';
+import { hasAppPermission } from '@/lib/hooks/use-launch-app';
+import { useNats } from '@/lib/hooks/use-nats';
+import { SUBJECTS } from '@/lib/subjects';
+import { useNotificationStore } from '@/stores/notification-store';
+import { useWindowStore } from '@/stores/window-store';
+import type { WindowState } from '@/types/window';
+
+let nextDesktopNotifId = 200_000;
+
+function parseJson(data: unknown): Record<string, unknown> | null {
+	let obj = data;
+	if (typeof obj === 'string') {
+		try {
+			obj = JSON.parse(obj);
+		} catch {
+			return null;
+		}
+	}
+	if (typeof obj !== 'object' || obj === null) return null;
+	return obj as Record<string, unknown>;
+}
+
+function windowEventPayload(win: WindowState) {
+	return {
+		windowId: win.id,
+		appId: win.appId,
+		title: win.title,
+		x: win.position.x,
+		y: win.position.y,
+		width: win.size.width,
+		height: win.size.height,
+		meta: win.meta,
+	};
+}
+
+// ── Command handlers (extracted for complexity) ──
+
+function handleCmdOpen(payload: Record<string, unknown> | null, permissions: string[], cmdId: string) {
+	if (!payload) return;
+	const p = payload as unknown as DesktopCmdOpen;
+	if (!p.appId || !(p.appId in APP_REGISTRY)) return;
+	if (!hasAppPermission(p.appId, permissions)) return;
+
+	// Deterministic window ID from cmdId — all tabs derive the same ID,
+	// so even if dedup races and multiple tabs process the command,
+	// they all create the same window and duplicates are caught.
+	const windowId = `cmd-${cmdId}`;
+	const store = useWindowStore.getState();
+	if (store.getWindows().some((w) => w.id === windowId)) return;
+
+	const manifest = APP_MANIFEST[p.appId as AppId];
+	store.openWindow({
+		id: windowId,
+		title: p.title ?? manifest.label,
+		appId: p.appId,
+		width: p.width ?? manifest.defaultSize.width,
+		height: p.height ?? manifest.defaultSize.height,
+		meta: { ...p.meta, _cmdId: cmdId },
+	});
+}
+
+function handleCmdWindow(payload: Record<string, unknown> | null, action: (id: string) => void) {
+	if (!payload) return;
+	const p = payload as unknown as DesktopCmdWindow;
+	if (!p.windowId) return;
+	action(p.windowId);
+}
+
+function handleCmdNotify(payload: Record<string, unknown> | null) {
+	if (!payload) return;
+	const p = payload as unknown as DesktopCmdNotify;
+	if (!p.summary) return;
+	useNotificationStore.getState().addNotification({
+		id: ++nextDesktopNotifId,
+		replacesId: 0,
+		summary: p.summary,
+		body: p.body ?? '',
+		icon: null,
+		actions: [],
+		expires: 0,
+		appName: p.appName,
+		urgency: p.urgency,
+	});
+}
+
+function handleCmdSync(orgId: string, userId: string, publish: (subject: string, data?: unknown) => void) {
+	const windows = useWindowStore.getState().getWindows();
+	publish(SUBJECTS.desktop.event.state(orgId, userId), {
+		windows: windows.map((w) => ({
+			id: w.id,
+			appId: w.appId,
+			title: w.title,
+			minimized: w.minimized,
+			maximized: w.maximized,
+			focused: w.focused,
+			position: w.position,
+			size: w.size,
+			zIndex: w.zIndex,
+			meta: w.meta,
+		})),
+	});
+}
+
+// ── Event diffing (extracted for complexity) ──
+
+function publishWindowEvents(
+	curr: WindowState[],
+	prev: WindowState[],
+	orgId: string,
+	userId: string,
+	publish: (subject: string, data?: unknown) => void
+) {
+	const currMap = new Map(curr.map((w) => [w.id, w]));
+	const prevMap = new Map(prev.map((w) => [w.id, w]));
+
+	for (const w of curr) {
+		if (!prevMap.has(w.id) && !w.closing) {
+			publish(SUBJECTS.desktop.event.opened(orgId, userId), windowEventPayload(w));
+		}
+	}
+
+	for (const w of prev) {
+		if (!currMap.has(w.id)) {
+			publish(SUBJECTS.desktop.event.closed(orgId, userId), windowEventPayload(w));
+		}
+	}
+
+	for (const w of curr) {
+		const p = prevMap.get(w.id);
+		if (!p) continue;
+		publishStateChanges(w, p, orgId, userId, publish);
+	}
+}
+
+function publishStateChanges(
+	w: WindowState,
+	p: WindowState,
+	orgId: string,
+	userId: string,
+	publish: (subject: string, data?: unknown) => void
+) {
+	const ev = windowEventPayload(w);
+	if (w.focused && !p.focused) {
+		publish(SUBJECTS.desktop.event.focused(orgId, userId), ev);
+	}
+	if (w.minimized && !p.minimized) {
+		publish(SUBJECTS.desktop.event.minimized(orgId, userId), ev);
+	}
+	if (w.maximized && !p.maximized) {
+		publish(SUBJECTS.desktop.event.maximized(orgId, userId), ev);
+	}
+	if ((!w.minimized && p.minimized) || (!w.maximized && p.maximized)) {
+		publish(SUBJECTS.desktop.event.restored(orgId, userId), ev);
+	}
+	if (w.position.x !== p.position.x || w.position.y !== p.position.y) {
+		publish(SUBJECTS.desktop.event.moved(orgId, userId), {
+			windowId: w.id,
+			x: w.position.x,
+			y: w.position.y,
+		});
+	}
+	if (w.size.width !== p.size.width || w.size.height !== p.size.height) {
+		publish(SUBJECTS.desktop.event.resized(orgId, userId), {
+			windowId: w.id,
+			width: w.size.width,
+			height: w.size.height,
+		});
+	}
+}
+
+// ── Remote event handling (cross-tab sync) ──
+
+type StoreActions = ReturnType<typeof useWindowStore.getState>;
+
+interface RemoteWindow {
+	id: string;
+	appId: string;
+	title: string;
+	minimized: boolean;
+	maximized: boolean;
+	focused: boolean;
+	position?: { x: number; y: number };
+	size?: { width: number; height: number };
+	zIndex?: number;
+	meta?: Record<string, unknown>;
+}
+
+function handleRemoteOpened(payload: Record<string, unknown>, store: StoreActions) {
+	const windowId = payload.windowId as string;
+	if (!windowId) return;
+	const windows = store.getWindows();
+
+	// Skip if exact window ID already exists
+	if (windows.some((w) => w.id === windowId)) return;
+
+	// Skip if a window from the same command already exists (dedup race)
+	const meta = payload.meta as Record<string, unknown> | undefined;
+	const cmdId = meta?._cmdId;
+	if (cmdId && windows.some((w) => w.meta?._cmdId === cmdId)) return;
+
+	store.openWindow({
+		id: windowId,
+		appId: payload.appId as string,
+		title: payload.title as string,
+		width: (payload.width as number) || undefined,
+		height: (payload.height as number) || undefined,
+		meta: { ...meta, _awaitingMeta: true },
+	});
+}
+
+function handleRemoteWindowAction(payload: Record<string, unknown>, action: (id: string) => void) {
+	const windowId = payload.windowId as string;
+	if (windowId) action(windowId);
+}
+
+function applyStateSync(payload: Record<string, unknown>, store: StoreActions) {
+	const remoteWindows = (payload.windows ?? []) as RemoteWindow[];
+	const localWindows = store.getWindows();
+	const localIds = new Set(localWindows.map((w) => w.id));
+	const remoteIds = new Set(remoteWindows.map((w) => w.id));
+
+	for (const rw of remoteWindows) {
+		if (!localIds.has(rw.id)) {
+			store.openWindow({
+				id: rw.id,
+				appId: rw.appId,
+				title: rw.title,
+				width: rw.size?.width,
+				height: rw.size?.height,
+				x: rw.position?.x,
+				y: rw.position?.y,
+				meta: rw.meta,
+			});
+		}
+	}
+
+	for (const lw of localWindows) {
+		if (!remoteIds.has(lw.id)) store.removeWindowImmediate(lw.id);
+	}
+
+	reconcileFlags(remoteWindows, localIds, store);
+}
+
+function reconcileFlags(remoteWindows: RemoteWindow[], localIds: Set<string>, store: StoreActions) {
+	for (const rw of remoteWindows) {
+		if (!localIds.has(rw.id)) continue;
+		if (rw.focused) store.focusWindow(rw.id);
+		if (rw.minimized) store.minimizeWindow(rw.id);
+		if (rw.maximized) store.maximizeWindow(rw.id);
+		if (rw.position) store.moveWindow(rw.id, rw.position);
+		if (rw.size) store.resizeWindow(rw.id, rw.size);
+	}
+}
+
+function handleRemoteMetaUpdated(payload: Record<string, unknown>, store: StoreActions) {
+	const windowId = payload.windowId as string;
+	if (!windowId) return;
+	const meta = payload.meta as Record<string, unknown> | undefined;
+	if (!meta) return;
+	// Must explicitly set to undefined (not delete) so the spread merge
+	// in updateWindowMeta overrides the existing `true` value
+	meta._awaitingMeta = undefined;
+	store.updateWindowMeta(windowId, meta);
+}
+
+function handleRemoteEvent(event: string | undefined, payload: Record<string, unknown>, store: StoreActions) {
+	switch (event) {
+		case 'opened':
+			handleRemoteOpened(payload, store);
+			break;
+		case 'closed':
+			handleRemoteWindowAction(payload, store.removeWindowImmediate);
+			break;
+		case 'focused':
+			handleRemoteWindowAction(payload, store.focusWindow);
+			break;
+		case 'minimized':
+			handleRemoteWindowAction(payload, store.minimizeWindow);
+			break;
+		case 'maximized':
+			handleRemoteWindowAction(payload, store.maximizeWindow);
+			break;
+		case 'restored':
+			handleRemoteWindowAction(payload, store.restoreWindow);
+			break;
+		case 'moved':
+			handleRemoteWindowAction(payload, (id) =>
+				store.moveWindow(id, { x: payload.x as number, y: payload.y as number })
+			);
+			break;
+		case 'resized':
+			handleRemoteWindowAction(payload, (id) =>
+				store.resizeWindow(id, { width: payload.width as number, height: payload.height as number })
+			);
+			break;
+		case 'state':
+			applyStateSync(payload, store);
+			break;
+		case 'meta-updated':
+			handleRemoteMetaUpdated(payload, store);
+			break;
+	}
+}
+
+/**
+ * Bridges NATS commands → Zustand actions and Zustand state changes → NATS events.
+ * Mount once in DesktopShell.
+ */
+export function useDesktopNats() {
+	const { subscribe, publish, orgId, userId } = useNats();
+	const auth = useKhalAuth();
+	const permissions = auth?.permissions ?? [];
+
+	// Suppress event re-publishing when applying remote events
+	const syncingRef = useRef(false);
+
+	// Stable refs so the Zustand subscriber doesn't re-attach on every render
+	const publishRef = useRef(publish);
+	const orgIdRef = useRef(orgId);
+	const userIdRef = useRef(userId);
+	const permissionsRef = useRef(permissions);
+	useEffect(() => {
+		publishRef.current = publish;
+	}, [publish]);
+	useEffect(() => {
+		orgIdRef.current = orgId;
+	}, [orgId]);
+	useEffect(() => {
+		userIdRef.current = userId;
+	}, [userId]);
+	useEffect(() => {
+		permissionsRef.current = permissions;
+	}, [permissions]);
+
+	// ── Command handling (NATS → Zustand) ──
+	useEffect(() => {
+		if (!orgId || !userId) return;
+
+		const subject = SUBJECTS.desktop.cmd.all(orgId, userId);
+		const store = useWindowStore.getState();
+
+		const unsub = subscribe(subject, (data: unknown, fullSubject: string) => {
+			const cmd = fullSubject.split('.').pop();
+			const payload = parseJson(data);
+
+			// Dedup: derive or extract cmdId, claim via localStorage
+			const rawPayload = typeof data === 'string' ? data : JSON.stringify(data);
+			const cmdId =
+				((payload as Record<string, unknown> | null)?._cmdId as string) ?? deriveCommandId(fullSubject, rawPayload);
+			if (!claimCommand(cmdId)) return;
+
+			switch (cmd) {
+				case 'open':
+					handleCmdOpen(payload, permissionsRef.current, cmdId);
+					break;
+				case 'close':
+					handleCmdWindow(payload, store.closeWindow);
+					break;
+				case 'focus':
+					handleCmdWindow(payload, store.focusWindow);
+					break;
+				case 'minimize':
+					handleCmdWindow(payload, store.minimizeWindow);
+					break;
+				case 'maximize':
+					handleCmdWindow(payload, store.maximizeWindow);
+					break;
+				case 'restore':
+					handleCmdWindow(payload, store.restoreWindow);
+					break;
+				case 'notify':
+					handleCmdNotify(payload);
+					break;
+				case 'sync': {
+					const org = orgIdRef.current;
+					const uid = userIdRef.current;
+					if (org && uid) handleCmdSync(org, uid, publishRef.current);
+					break;
+				}
+			}
+		});
+
+		return unsub;
+	}, [orgId, userId, subscribe]);
+
+	// ── Event publishing (Zustand → NATS) ──
+	useEffect(() => {
+		if (!orgId || !userId) return;
+
+		const unsub = useWindowStore.subscribe((state, prevState) => {
+			if (syncingRef.current) return;
+			const org = orgIdRef.current;
+			const uid = userIdRef.current;
+			if (!org || !uid) return;
+			const wsId = state.activeWorkspaceId;
+			if (!wsId) return;
+
+			const curr = state.windowsByWorkspace[wsId] ?? [];
+			const prev = prevState.windowsByWorkspace[wsId] ?? [];
+			publishWindowEvents(curr, prev, org, uid, publishRef.current);
+		});
+
+		return unsub;
+	}, [orgId, userId]);
+
+	// ── Remote event subscription (cross-tab sync) ──
+	useEffect(() => {
+		if (!orgId || !userId) return;
+
+		const subject = SUBJECTS.desktop.event.all(orgId, userId);
+		const store = useWindowStore.getState();
+
+		const unsub = subscribe(subject, (data: unknown, fullSubject: string) => {
+			const payload = parseJson(data);
+			if (!payload) return;
+
+			syncingRef.current = true;
+			try {
+				handleRemoteEvent(fullSubject.split('.').pop(), payload, store);
+			} finally {
+				syncingRef.current = false;
+			}
+		});
+
+		// Request full state from existing tabs
+		publishRef.current(SUBJECTS.desktop.cmd.sync(orgId, userId), {});
+
+		return unsub;
+	}, [orgId, userId, subscribe]);
+}

package/src/lib/hooks/use-is-mobile.ts

@@ -0,0 +1,23 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+function subscribe(callback: () => void) {
+	const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+	mql.addEventListener('change', callback);
+	return () => mql.removeEventListener('change', callback);
+}
+
+function getSnapshot() {
+	return window.innerWidth < MOBILE_BREAKPOINT;
+}
+
+function getServerSnapshot() {
+	return false;
+}
+
+export function useIsMobile() {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/src/lib/hooks/use-launch-app.ts

@@ -0,0 +1,79 @@
+import { useCallback } from 'react';
+import type { AppId } from '@/components/apps/app-registry';
+import { APP_REGISTRY } from '@/components/apps/app-registry';
+import { useKhalAuth } from '@/lib/auth/use-auth';
+import { useNotificationStore } from '@/stores/notification-store';
+import { useWindowStore } from '@/stores/window-store';
+import type { DesktopEntry } from '@/types/desktop-entry';
+
+/** Detect whether we are running inside a Tauri webview. */
+function isTauri(): boolean {
+	return typeof window !== 'undefined' && '__TAURI__' in window;
+}
+
+/**
+ * Resolve the canonical app identifier for a desktop entry.
+ */
+export function getAppId(entry: DesktopEntry): string {
+	return entry.component || entry.exec || entry.id;
+}
+
+const DEFAULT_WINDOW_SIZE = { width: 800, height: 600 };
+
+/**
+ * Check whether the given permissions list allows opening an app.
+ * Returns true if the app has no requiredPermission or the permission is present.
+ */
+export function hasAppPermission(appId: string, permissions: string[]): boolean {
+	const registryEntry = APP_REGISTRY[appId as AppId];
+	if (!registryEntry?.requiredPermission) return true;
+	return permissions.includes(registryEntry.requiredPermission);
+}
+
+/**
+ * Hook that returns a stable callback to launch any desktop entry.
+ * Only builtin apps (registered in APP_REGISTRY) are supported.
+ * Checks user permissions before opening; shows a notification if blocked.
+ */
+export function useLaunchApp() {
+	const openWindow = useWindowStore((s) => s.openWindow);
+	const auth = useKhalAuth();
+	const permissions = auth?.permissions ?? [];
+
+	const launch = useCallback(
+		(entry: DesktopEntry) => {
+			const appId = getAppId(entry);
+
+			// Permission gate: block if user lacks required permission
+			if (!hasAppPermission(appId, permissions)) {
+				useNotificationStore.getState().addNotification({
+					id: Date.now(),
+					replacesId: 0,
+					summary: 'Permission Denied',
+					body: `You do not have permission to open ${entry.name}.`,
+					icon: null,
+					actions: [],
+					expires: 4000,
+					urgency: 'normal',
+				});
+				return;
+			}
+
+			if (appId in APP_REGISTRY) {
+				// Tauri standalone: delegate window creation to the native shell
+				if (isTauri()) {
+					// biome-ignore lint/suspicious/noExplicitAny: Tauri global is untyped
+					(window as any).__TAURI__.core.invoke('open_app_window', { appId, title: entry.name });
+					return;
+				}
+
+				const registryEntry = APP_REGISTRY[appId as AppId];
+				const { width, height } = registryEntry?.defaultSize ?? DEFAULT_WINDOW_SIZE;
+				openWindow({ title: entry.name, appId, width, height });
+			}
+		},
+		[openWindow, permissions]
+	);
+
+	return launch;
+}

package/src/lib/hooks/use-nats-notifications.ts

@@ -0,0 +1,84 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from 'react';
+import { useKhalAuth } from '@/lib/auth/use-auth';
+import { useNats } from '@/lib/hooks/use-nats';
+import type { NatsNotification } from '@/lib/notifications/schema';
+import { SUBJECTS } from '@/lib/subjects';
+import { useNotificationStore } from '@/stores/notification-store';
+
+let nextNatsNotifId = 100_000;
+
+function parseNotification(data: unknown): NatsNotification | null {
+	let obj = data;
+	// Bridge may deliver payload as a JSON string — parse it
+	if (typeof obj === 'string') {
+		try {
+			obj = JSON.parse(obj);
+		} catch {
+			return null;
+		}
+	}
+	if (typeof obj !== 'object' || obj === null) return null;
+	const rec = obj as Record<string, unknown>;
+	if (typeof rec.summary !== 'string' || rec.summary.length === 0) return null;
+	return rec as unknown as NatsNotification;
+}
+
+export function useNatsNotifications() {
+	const { subscribe, orgId } = useNats();
+	const auth = useKhalAuth();
+	const userId = auth?.userId ?? '';
+
+	const addNotification = useNotificationStore((s) => s.addNotification);
+
+	const handleMessage = useCallback(
+		(data: unknown) => {
+			const notif = parseNotification(data);
+			if (!notif) {
+				// biome-ignore lint/suspicious/noConsole: intentional warning for invalid NATS payloads
+				console.warn('[nats-notifications] invalid payload, ignoring:', data);
+				return;
+			}
+
+			const id = ++nextNatsNotifId;
+			addNotification({
+				id,
+				replacesId: 0,
+				summary: notif.summary,
+				body: notif.body ?? '',
+				icon: notif.icon ?? null,
+				actions: [],
+				expires: 0,
+				appName: notif.appName,
+				urgency: notif.urgency,
+				category: notif.category,
+				transient: notif.transient,
+			});
+		},
+		[addNotification]
+	);
+
+	const unsubsRef = useRef<Array<() => void>>([]);
+
+	useEffect(() => {
+		if (!orgId) return;
+
+		const unsubs: Array<() => void> = [];
+
+		// Broadcast — all users in the org
+		unsubs.push(subscribe(SUBJECTS.notify.broadcast(orgId), handleMessage));
+
+		// User-specific — only for the authenticated user
+		if (userId) {
+			unsubs.push(subscribe(SUBJECTS.notify.user(orgId, userId), handleMessage));
+		}
+
+		unsubsRef.current = unsubs;
+
+		return () => {
+			for (const unsub of unsubs) unsub();
+			unsubsRef.current = [];
+		};
+	}, [orgId, userId, subscribe, handleMessage]);
+}

package/src/lib/hooks/use-nats.ts

@@ -0,0 +1,60 @@
+'use client';
+
+import { useCallback, useEffect, useSyncExternalStore } from 'react';
+import { useKhalAuth } from '@/lib/auth/use-auth';
+import { getNatsClient } from '@/lib/nats-client';
+
+export function useNats() {
+	const client = getNatsClient();
+	const auth = useKhalAuth();
+	const orgId = auth?.orgId ?? '';
+	const userId = auth?.userId ?? '';
+
+	// Keep the client's identity in sync with auth state
+	useEffect(() => {
+		if (orgId) client.setOrgId(orgId);
+		if (userId) client.setUserId(userId);
+	}, [client, orgId, userId]);
+
+	// Track connection status reactively
+	const connected = useSyncExternalStore(
+		(callback) => client.onStatusChange(callback),
+		() => client.connected,
+		() => false // SSR snapshot
+	);
+
+	// subscribe: wraps client.subscribe, auto-unsubscribes on unmount
+	const subscribe = useCallback(
+		(subject: string, callback: (data: unknown, subject: string) => void) => {
+			return client.subscribe(subject, callback);
+		},
+		[client]
+	);
+
+	// publish: fire-and-forget
+	const publish = useCallback(
+		(subject: string, data?: unknown) => {
+			client.publish(subject, data);
+		},
+		[client]
+	);
+
+	// request: returns Promise<unknown>
+	const request = useCallback(
+		(subject: string, data?: unknown, timeoutMs?: number) => {
+			return client.request(subject, data, timeoutMs);
+		},
+		[client]
+	);
+
+	return { connected, subscribe, publish, request, orgId, userId };
+}
+
+// Convenience hook for subscribing in useEffect with auto-cleanup
+export function useNatsSubscription(subject: string, callback: (data: unknown, subject: string) => void) {
+	const { subscribe } = useNats();
+	useEffect(() => {
+		const unsub = subscribe(subject, callback);
+		return unsub;
+	}, [subject, callback, subscribe]);
+}