khal-os 1.260324.2

package/src/components/notifications/NotificationCenter.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { X } from 'lucide-react';
+import { useEffect, useRef } from 'react';
+import { useNotificationStore } from '@/stores/notification-store';
+
+function formatTime(timestamp: number): string {
+	const diff = Date.now() - timestamp;
+	if (diff < 60_000) return 'Just now';
+	if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+	if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+	return new Date(timestamp).toLocaleDateString([], {
+		month: 'short',
+		day: 'numeric',
+	});
+}
+
+export function NotificationCenter() {
+	const centerOpen = useNotificationStore((s) => s.centerOpen);
+	const history = useNotificationStore((s) => s.history);
+	const clearHistory = useNotificationStore((s) => s.clearHistory);
+	const closeCenter = useNotificationStore((s) => s.closeCenter);
+	const panelRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!centerOpen) return;
+
+		const handleClickOutside = (e: MouseEvent) => {
+			if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+				closeCenter();
+			}
+		};
+
+		const handleEscape = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') closeCenter();
+		};
+
+		document.addEventListener('mousedown', handleClickOutside);
+		document.addEventListener('keydown', handleEscape);
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside);
+			document.removeEventListener('keydown', handleEscape);
+		};
+	}, [centerOpen, closeCenter]);
+
+	if (!centerOpen) return null;
+
+	return (
+		<div
+			ref={panelRef}
+			role="dialog"
+			aria-label="Notification center"
+			className="fixed z-[9400] flex w-80 flex-col rounded-lg backdrop-blur-xl"
+			style={{
+				bottom: 'var(--khal-notification-bottom)',
+				right: 'var(--khal-notification-right)',
+				left: 'var(--khal-notification-left)',
+				transform: 'var(--khal-notification-transform)',
+				maxHeight: 'min(480px, calc(100vh - 60px))',
+				background: 'var(--khal-surface-overlay)',
+				border: '1px solid var(--khal-border-default)',
+				boxShadow: 'var(--khal-shadow-xl)',
+			}}
+		>
+			<div
+				className="flex items-center justify-between px-3 py-2"
+				style={{ borderBottom: '1px solid var(--khal-border-default)' }}
+			>
+				<span className="text-label-13" style={{ color: 'var(--khal-text-primary)' }}>
+					Notifications
+				</span>
+				<div className="flex items-center gap-1">
+					{history.length > 0 && (
+						<button
+							className="rounded px-1.5 py-0.5 text-label-12 transition-colors"
+							style={{ color: 'var(--khal-text-secondary)' }}
+							onMouseEnter={(e) => {
+								(e.currentTarget as HTMLElement).style.background = 'var(--khal-accent-subtle)';
+							}}
+							onMouseLeave={(e) => {
+								(e.currentTarget as HTMLElement).style.background = '';
+							}}
+							onClick={clearHistory}
+						>
+							Clear all
+						</button>
+					)}
+					<button
+						className="flex h-6 w-6 items-center justify-center rounded transition-colors"
+						style={{ color: 'var(--khal-text-secondary)' }}
+						onMouseEnter={(e) => {
+							(e.currentTarget as HTMLElement).style.background = 'var(--khal-accent-subtle)';
+						}}
+						onMouseLeave={(e) => {
+							(e.currentTarget as HTMLElement).style.background = '';
+						}}
+						onClick={closeCenter}
+						aria-label="Close notification center"
+					>
+						<X size={14} />
+					</button>
+				</div>
+			</div>
+
+			<div className="flex-1 overflow-y-auto">
+				{history.length === 0 ? (
+					<div className="flex h-24 items-center justify-center">
+						<span className="text-label-13" style={{ color: 'var(--khal-text-muted)' }}>
+							No notifications
+						</span>
+					</div>
+				) : (
+					<div className="flex flex-col">
+						{history.map((notif, i) => (
+							<div
+								key={`${notif.id}-${notif.timestamp}-${i}`}
+								className="flex gap-3 px-3 py-2.5 last:border-b-0"
+								style={{
+									borderBottom: '1px solid var(--khal-border-subtle)',
+									background: notif.urgency === 'critical' ? 'rgba(239,68,68,0.05)' : undefined,
+								}}
+							>
+								{notif.icon && <img src={notif.icon} alt="" className="h-6 w-6 shrink-0 rounded" />}
+								<div className="min-w-0 flex-1">
+									<div className="flex items-baseline justify-between gap-2">
+										<div className="min-w-0 flex-1">
+											{notif.appName && (
+												<p className="truncate text-label-12" style={{ color: 'var(--khal-text-muted)' }}>
+													{notif.appName}
+												</p>
+											)}
+											<p className="truncate text-label-13" style={{ color: 'var(--khal-text-primary)' }}>
+												{notif.summary}
+											</p>
+										</div>
+										<span className="shrink-0 text-label-12" style={{ color: 'var(--khal-text-muted)' }}>
+											{formatTime(notif.timestamp)}
+										</span>
+									</div>
+									{notif.body && (
+										<p className="mt-0.5 line-clamp-2 text-label-12" style={{ color: 'var(--khal-text-secondary)' }}>
+											{notif.body}
+										</p>
+									)}
+								</div>
+							</div>
+						))}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/components/notifications/NotificationToasts.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { X } from 'lucide-react';
+import { useNotificationStore } from '@/stores/notification-store';
+
+export function NotificationToasts() {
+	const notifications = useNotificationStore((s) => s.notifications);
+	const dismissNotification = useNotificationStore((s) => s.dismissNotification);
+
+	if (notifications.length === 0) return null;
+
+	return (
+		<div
+			className="fixed top-3 right-3 z-[9500] flex w-80 flex-col gap-2"
+			role="status"
+			aria-live="polite"
+			aria-label="Notifications"
+		>
+			{notifications.map((notif) => (
+				<div
+					key={`${notif.id}-${notif.timestamp}`}
+					className="flex gap-3 rounded-lg p-3 backdrop-blur-xl"
+					style={{
+						animation: 'notif-slide-in 200ms ease-out',
+						background: 'var(--khal-surface-overlay)',
+						border: `1px solid ${notif.urgency === 'critical' ? 'rgba(239,68,68,0.5)' : 'var(--khal-border-default)'}`,
+						boxShadow: 'var(--khal-shadow-lg)',
+					}}
+				>
+					{notif.icon && <img src={notif.icon} alt="" className="h-8 w-8 shrink-0 rounded" />}
+					<div className="min-w-0 flex-1">
+						{notif.appName && (
+							<p className="truncate text-label-12" style={{ color: 'var(--khal-text-muted)' }}>
+								{notif.appName}
+							</p>
+						)}
+						<p className="truncate text-label-13" style={{ color: 'var(--khal-text-primary)' }}>
+							{notif.summary}
+						</p>
+						{notif.body && (
+							<p className="mt-0.5 line-clamp-2 text-label-13" style={{ color: 'var(--khal-text-secondary)' }}>
+								{notif.body}
+							</p>
+						)}
+					</div>
+					<button
+						className="flex h-5 w-5 shrink-0 items-center justify-center rounded transition-colors"
+						style={{ color: 'var(--khal-text-muted)' }}
+						onMouseEnter={(e) => {
+							(e.currentTarget as HTMLElement).style.background = 'var(--khal-accent-subtle)';
+							(e.currentTarget as HTMLElement).style.color = 'var(--khal-text-primary)';
+						}}
+						onMouseLeave={(e) => {
+							(e.currentTarget as HTMLElement).style.background = '';
+							(e.currentTarget as HTMLElement).style.color = 'var(--khal-text-muted)';
+						}}
+						onClick={() => dismissNotification(notif.id)}
+						aria-label="Dismiss notification"
+					>
+						<X size={14} />
+					</button>
+				</div>
+			))}
+		</div>
+	);
+}

package/src/components/notifications/OrphanSessionToast.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import { Monitor, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useKhalAuth } from '@/lib/auth/use-auth';
+import { useNats } from '@/lib/hooks/use-nats';
+import { SUBJECTS } from '@/lib/subjects';
+import { useWindowStore } from '@/stores/window-store';
+
+interface Session {
+	sessionId: string;
+	createdAt: number;
+	lastActivity: number;
+	bufferBytes: number;
+	connected: boolean;
+}
+
+/**
+ * Orphan Session Detection Toast
+ *
+ * Detects server-side PTY sessions that have no matching terminal window.
+ * Offers Chrome-style restore functionality.
+ *
+ * This is a standalone toast component (NOT routed through notification-store)
+ * to avoid extending the notification store with action callbacks.
+ */
+export function OrphanSessionToast() {
+	const [orphanSessions, setOrphanSessions] = useState<Session[]>([]);
+	const [visible, setVisible] = useState(false);
+	const [loading, setLoading] = useState(false);
+
+	const getWindows = useWindowStore((s) => s.getWindows);
+	const openWindow = useWindowStore((s) => s.openWindow);
+	const { connected, request, publish, orgId } = useNats();
+	const auth = useKhalAuth();
+	const userId = auth?.userId ?? '';
+
+	// On mount + NATS connect: detect orphans
+	useEffect(() => {
+		if (!connected || !orgId) return;
+		detectOrphans();
+	}, [connected, orgId, userId]);
+
+	async function detectOrphans() {
+		try {
+			// Request session list via NATS (filtered by userId for ownership)
+			const response = (await request(SUBJECTS.pty.list(orgId), { userId: userId || undefined })) as {
+				sessions: Session[];
+			};
+			const sessions = response.sessions;
+
+			// Get all terminal windows from window store
+			const windows = getWindows();
+			const terminalWindows = windows.filter((w) => w.appId === 'terminal');
+
+			// Collect all active PTY session IDs from all terminal windows
+			// Multi-tab/split windows store tabs in meta.tabs, each tab has a splitTree
+			const activeSessions = new Set<string>();
+
+			terminalWindows.forEach((w) => {
+				// Legacy: single PTY session in meta.ptySessionId
+				if (w.meta?.ptySessionId && typeof w.meta.ptySessionId === 'string') {
+					activeSessions.add(w.meta.ptySessionId);
+				}
+
+				// New: multi-tab/split structure in meta.tabs
+				if (w.meta?.tabs && Array.isArray(w.meta.tabs)) {
+					type SplitNode = { type: string; ptySessionId?: string; children?: SplitNode[] };
+					type Tab = { ptySessionId?: string; splitTree?: SplitNode };
+
+					const collectFromTree = (node: SplitNode): void => {
+						if (!node) return;
+						if (node.type === 'leaf' && node.ptySessionId) {
+							activeSessions.add(node.ptySessionId);
+						} else if (node.type === 'branch' && Array.isArray(node.children)) {
+							node.children.forEach(collectFromTree);
+						}
+					};
+
+					(w.meta.tabs as Tab[]).forEach((tab) => {
+						// Legacy: tab-level ptySessionId
+						if (tab.ptySessionId && typeof tab.ptySessionId === 'string') {
+							activeSessions.add(tab.ptySessionId);
+						}
+
+						// Recursively collect from splitTree
+						if (tab.splitTree) {
+							collectFromTree(tab.splitTree);
+						}
+					});
+				}
+			});
+
+			// Find orphaned sessions (server has them, but no window exists)
+			const orphans = sessions.filter((s) => !activeSessions.has(s.sessionId));
+
+			if (orphans.length > 0) {
+				setOrphanSessions(orphans);
+				setVisible(true);
+			}
+		} catch {
+			// PTY server may not be running — silently ignore connection failures
+		}
+	}
+
+	async function handleRestoreAll() {
+		setLoading(true);
+		try {
+			// Open a terminal window with all orphan sessions as separate tabs
+			// Each orphan session becomes a tab with a single-leaf split tree
+			if (orphanSessions.length === 1) {
+				// Single orphan: open as single-tab window
+				openWindow({
+					title: 'Terminal',
+					appId: 'terminal',
+					width: 720,
+					height: 480,
+					meta: {
+						tabs: [
+							{
+								id: `tab-${orphanSessions[0].sessionId}`,
+								ptySessionId: orphanSessions[0].sessionId,
+								title: 'bash',
+								cwd: null,
+								lastCommand: null,
+								focused: true,
+								splitTree: {
+									type: 'leaf',
+									id: `pane-${orphanSessions[0].sessionId}`,
+									ptySessionId: orphanSessions[0].sessionId,
+									cwd: null,
+									lastCommand: null,
+								},
+								focusedPaneId: `pane-${orphanSessions[0].sessionId}`,
+							},
+						],
+						activeTabId: `tab-${orphanSessions[0].sessionId}`,
+					},
+				});
+			} else {
+				// Multiple orphans: open as multi-tab window
+				const tabs = orphanSessions.map((session, idx) => ({
+					id: `tab-${session.sessionId}`,
+					ptySessionId: session.sessionId,
+					title: 'bash',
+					cwd: null,
+					lastCommand: null,
+					focused: idx === 0,
+					splitTree: {
+						type: 'leaf',
+						id: `pane-${session.sessionId}`,
+						ptySessionId: session.sessionId,
+						cwd: null,
+						lastCommand: null,
+					},
+					focusedPaneId: `pane-${session.sessionId}`,
+				}));
+
+				openWindow({
+					title: 'Terminal',
+					appId: 'terminal',
+					width: 720,
+					height: 480,
+					meta: {
+						tabs,
+						activeTabId: tabs[0].id,
+					},
+				});
+			}
+			setVisible(false);
+		} finally {
+			setLoading(false);
+		}
+	}
+
+	async function handleKillAll() {
+		setLoading(true);
+		try {
+			// Destroy each orphaned session via NATS
+			for (const session of orphanSessions) {
+				publish(SUBJECTS.pty.destroy(orgId), { sessionId: session.sessionId, userId: userId || undefined });
+			}
+			setVisible(false);
+		} finally {
+			setLoading(false);
+		}
+	}
+
+	function handleDismiss() {
+		setVisible(false);
+	}
+
+	if (!visible || orphanSessions.length === 0) {
+		return null;
+	}
+
+	const count = orphanSessions.length;
+	const message =
+		count === 1
+			? '1 terminal session still running from a previous visit'
+			: `${count} terminal sessions still running from a previous visit`;
+
+	return (
+		<div
+			className="fixed bottom-20 left-1/2 z-[9600] -translate-x-1/2"
+			role="alert"
+			aria-live="polite"
+			aria-label="Orphaned terminal sessions"
+		>
+			<div
+				className="flex min-w-[400px] items-center gap-3 rounded-lg p-4 backdrop-blur-xl"
+				style={{
+					animation: 'notif-slide-in 300ms ease-out',
+					background: 'var(--khal-surface-overlay)',
+					border: '1px solid var(--khal-border-default)',
+					boxShadow: 'var(--khal-shadow-xl)',
+				}}
+			>
+				<div
+					className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg"
+					style={{ background: 'var(--khal-accent-subtle)' }}
+				>
+					<Monitor size={20} style={{ color: 'var(--khal-accent-primary)' }} />
+				</div>
+
+				<div className="min-w-0 flex-1">
+					<p className="text-label-14" style={{ color: 'var(--khal-text-primary)' }}>
+						{message}
+					</p>
+				</div>
+
+				<div className="flex shrink-0 gap-2">
+					<button
+						className="rounded-md px-3 py-1.5 text-label-13 transition-colors disabled:opacity-50"
+						style={{
+							background: 'var(--khal-accent-primary)',
+							color: 'var(--khal-text-inverse)',
+						}}
+						onMouseEnter={(e) => {
+							(e.currentTarget as HTMLElement).style.background = 'var(--khal-accent-hover)';
+						}}
+						onMouseLeave={(e) => {
+							(e.currentTarget as HTMLElement).style.background = 'var(--khal-accent-primary)';
+						}}
+						onClick={handleRestoreAll}
+						disabled={loading}
+					>
+						Restore All
+					</button>
+					<button
+						className="rounded-md bg-red-500/10 px-3 py-1.5 text-label-13 text-red-500 transition-colors hover:bg-red-500/20 disabled:opacity-50"
+						onClick={handleKillAll}
+						disabled={loading}
+					>
+						Kill All
+					</button>
+					<button
+						className="rounded-md px-3 py-1.5 text-label-13 transition-colors disabled:opacity-50"
+						style={{ color: 'var(--khal-text-secondary)' }}
+						onMouseEnter={(e) => {
+							(e.currentTarget as HTMLElement).style.background = 'var(--khal-accent-subtle)';
+						}}
+						onMouseLeave={(e) => {
+							(e.currentTarget as HTMLElement).style.background = '';
+						}}
+						onClick={handleDismiss}
+						disabled={loading}
+					>
+						Dismiss
+					</button>
+				</div>
+
+				<button
+					className="flex h-5 w-5 shrink-0 items-center justify-center rounded transition-colors"
+					style={{ color: 'var(--khal-text-muted)' }}
+					onMouseEnter={(e) => {
+						(e.currentTarget as HTMLElement).style.background = 'var(--khal-accent-subtle)';
+						(e.currentTarget as HTMLElement).style.color = 'var(--khal-text-primary)';
+					}}
+					onMouseLeave={(e) => {
+						(e.currentTarget as HTMLElement).style.background = '';
+						(e.currentTarget as HTMLElement).style.color = 'var(--khal-text-muted)';
+					}}
+					onClick={handleDismiss}
+					disabled={loading}
+					aria-label="Dismiss notification"
+				>
+					<X size={14} />
+				</button>
+			</div>
+		</div>
+	);
+}