khal-os 1.260324.2

package/src/components/apps/terminal/ui/TerminalTabBar.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import type { TerminalTab } from '../types';
+
+interface TerminalTabBarProps {
+	tabs: TerminalTab[];
+	activeTabId: string;
+	onTabClick: (tabId: string) => void;
+	onTabClose: (tabId: string) => void;
+	onNewTab: () => void;
+}
+
+/**
+ * Tab bar component for multi-tab terminal.
+ * macOS-style pill tabs with --khal-* CSS tokens.
+ *
+ * The outer container does NOT have data-no-drag so empty
+ * space in the tab bar area acts as a window drag handle.
+ * Only interactive elements (tabs, buttons) have data-no-drag.
+ */
+export function TerminalTabBar({ tabs, activeTabId, onTabClick, onTabClose, onNewTab }: TerminalTabBarProps) {
+	const getTabTitle = (tab: TerminalTab) => {
+		if (tab.cwd) {
+			const parts = tab.cwd.split('/');
+			return parts[parts.length - 1] || 'root';
+		}
+		return tab.title || 'bash';
+	};
+
+	// Reserve space for the floating window controls (glass controls on the right)
+	const prControls = '100px';
+
+	return (
+		<div
+			className="terminal-tab-bar flex items-center gap-1 px-2 py-1.5"
+			style={{
+				paddingRight: prControls,
+				minHeight: '36px',
+			}}
+		>
+			{tabs.map((tab) => {
+				const isActive = tab.id === activeTabId;
+				return (
+					<div
+						data-no-drag
+						key={tab.id}
+						className="flex items-center gap-1.5 rounded-md px-2.5 py-1 cursor-pointer select-none transition-all duration-150"
+						style={
+							isActive
+								? {
+										background: 'var(--khal-surface-raised)',
+										color: 'var(--khal-text-primary)',
+									}
+								: {
+										background: 'transparent',
+										color: 'var(--khal-text-muted)',
+									}
+						}
+						onMouseEnter={(e) => {
+							if (!isActive) {
+								const el = e.currentTarget as HTMLElement;
+								el.style.color = 'var(--khal-text-secondary)';
+								el.style.background = 'var(--khal-accent-subtle)';
+							}
+						}}
+						onMouseLeave={(e) => {
+							if (!isActive) {
+								const el = e.currentTarget as HTMLElement;
+								el.style.color = 'var(--khal-text-muted)';
+								el.style.background = 'transparent';
+							}
+						}}
+						onClick={() => onTabClick(tab.id)}
+					>
+						<span className="text-xs max-w-[120px] truncate">{getTabTitle(tab)}</span>
+						{tabs.length > 1 && (
+							<button
+								data-no-drag
+								className="flex h-4 w-4 items-center justify-center rounded-sm opacity-0 transition-opacity group-hover:opacity-100"
+								style={{
+									color: 'var(--khal-text-muted)',
+									opacity: isActive ? 0.6 : 0,
+								}}
+								onMouseEnter={(e) => {
+									const el = e.currentTarget as HTMLElement;
+									el.style.opacity = '1';
+									el.style.color = 'rgb(239, 68, 68)';
+								}}
+								onMouseLeave={(e) => {
+									const el = e.currentTarget as HTMLElement;
+									el.style.opacity = isActive ? '0.6' : '0';
+									el.style.color = 'var(--khal-text-muted)';
+								}}
+								onClick={(e) => {
+									e.stopPropagation();
+									onTabClose(tab.id);
+								}}
+								aria-label="Close tab"
+							>
+								<svg width="8" height="8" viewBox="0 0 8 8" fill="none" stroke="currentColor" strokeWidth="1.5">
+									<path d="M1 1l6 6M7 1l-6 6" />
+								</svg>
+							</button>
+						)}
+					</div>
+				);
+			})}
+			<button
+				data-no-drag
+				className="flex h-5 w-5 items-center justify-center rounded-md transition-colors"
+				style={{ color: 'var(--khal-text-muted)' }}
+				onMouseEnter={(e) => {
+					const el = e.currentTarget as HTMLElement;
+					el.style.color = 'var(--khal-text-primary)';
+					el.style.background = 'var(--khal-accent-subtle)';
+				}}
+				onMouseLeave={(e) => {
+					const el = e.currentTarget as HTMLElement;
+					el.style.color = 'var(--khal-text-muted)';
+					el.style.background = '';
+				}}
+				onClick={onNewTab}
+				aria-label="New tab"
+			>
+				<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5">
+					<path d="M5 1v8M1 5h8" />
+				</svg>
+			</button>
+		</div>
+	);
+}

package/src/components/desktop/AnimatedBackground.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+/**
+ * AnimatedBackground - Lightweight CSS-only animated desktop background.
+ *
+ * Renders three large, soft, blurred gradient orbs that slowly drift using
+ * CSS @keyframes and transforms. Colors are read from CSS custom properties
+ * (--khal-bg-anim-1/2/3) which change per theme concept.
+ *
+ * Animation is disabled when:
+ *  - The user's OS prefers reduced motion (prefers-reduced-motion: reduce)
+ *  - The "Reduce motion" toggle is enabled in Settings (data-reduce-motion="true" on <html>)
+ *
+ * No canvas, no requestAnimationFrame, no JS animation loops.
+ */
+export function AnimatedBackground() {
+	return (
+		<div className="khal-animated-bg" aria-hidden="true">
+			<div
+				className="khal-orb"
+				style={{
+					position: 'absolute',
+					width: '60vw',
+					height: '60vw',
+					borderRadius: '50%',
+					background: 'var(--khal-bg-anim-1)',
+					filter: 'blur(80px)',
+					opacity: 0.6,
+					top: '-20%',
+					left: '-10%',
+					animation: 'khal-drift-1 30s ease-in-out infinite alternate',
+					willChange: 'transform',
+				}}
+			/>
+			<div
+				className="khal-orb"
+				style={{
+					position: 'absolute',
+					width: '50vw',
+					height: '50vw',
+					borderRadius: '50%',
+					background: 'var(--khal-bg-anim-2)',
+					filter: 'blur(90px)',
+					opacity: 0.5,
+					bottom: '-20%',
+					right: '-10%',
+					animation: 'khal-drift-2 40s ease-in-out infinite alternate',
+					willChange: 'transform',
+				}}
+			/>
+			<div
+				className="khal-orb"
+				style={{
+					position: 'absolute',
+					width: '45vw',
+					height: '45vw',
+					borderRadius: '50%',
+					background: 'var(--khal-bg-anim-3)',
+					filter: 'blur(100px)',
+					opacity: 0.4,
+					top: '30%',
+					right: '20%',
+					animation: 'khal-drift-3 50s ease-in-out infinite alternate',
+					willChange: 'transform',
+				}}
+			/>
+		</div>
+	);
+}

package/src/components/desktop/Desktop.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useCallback } from 'react';
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSeparator,
+	ContextMenuTrigger,
+} from '@/components/ui/ContextMenu';
+import { useKhalAuth } from '@/lib/auth/use-auth';
+import { useIsMobile } from '@/lib/hooks/use-is-mobile';
+import { useLaunchApp } from '@/lib/hooks/use-launch-app';
+import { useFilteredDesktopApps } from '@/stores/desktop-store';
+import { DesktopIcon } from './DesktopIcon';
+
+export function Desktop() {
+	const auth = useKhalAuth();
+	const permissions = auth?.permissions ?? [];
+	const desktopIcons = useFilteredDesktopApps(permissions);
+	const launchApp = useLaunchApp();
+	const isMobile = useIsMobile();
+
+	const launchById = useCallback(
+		(id: string) => {
+			const entry = desktopIcons.find((a) => a.id === id);
+			if (entry) launchApp(entry);
+		},
+		[desktopIcons, launchApp]
+	);
+
+	// Only show context menu items the user has permission for
+	const hasPermission = useCallback((perm: string) => permissions.includes(perm), [permissions]);
+
+	const desktopContent = (
+		<>
+			<nav
+				className={
+					isMobile
+						? 'grid auto-rows-max grid-cols-4 gap-2 p-4 pb-16'
+						: 'grid auto-rows-max grid-cols-[repeat(auto-fill,5rem)] gap-1 p-4 pb-16'
+				}
+				aria-label="Desktop applications"
+			>
+				{desktopIcons.map((entry) => (
+					<DesktopIcon key={entry.id} entry={entry} onLaunch={() => launchApp(entry)} isMobile={isMobile} />
+				))}
+			</nav>
+		</>
+	);
+
+	if (isMobile) {
+		return (
+			<main className="fixed inset-0 overflow-hidden" aria-label="Desktop">
+				{desktopContent}
+			</main>
+		);
+	}
+
+	return (
+		<ContextMenu>
+			<ContextMenuTrigger asChild>
+				<main className="fixed inset-0 overflow-hidden" aria-label="Desktop">
+					{desktopContent}
+				</main>
+			</ContextMenuTrigger>
+			<ContextMenuContent className="w-[200px] z-[9999]">
+				{hasPermission('files') && <ContextMenuItem onClick={() => launchById('files')}>Files</ContextMenuItem>}
+				{hasPermission('terminal') && (
+					<ContextMenuItem onClick={() => launchById('terminal')}>Open Terminal</ContextMenuItem>
+				)}
+				{(hasPermission('files') || hasPermission('terminal')) && hasPermission('settings') && <ContextMenuSeparator />}
+				{hasPermission('settings') && (
+					<ContextMenuItem onClick={() => launchById('settings')}>Settings</ContextMenuItem>
+				)}
+			</ContextMenuContent>
+		</ContextMenu>
+	);
+}

package/src/components/desktop/DesktopBackground.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { AnimatedBackground } from './AnimatedBackground';
+
+/**
+ * Desktop background — renders the theme gradient + animated CSS orbs.
+ * The animated layer sits on top of the gradient but behind all windows and taskbar.
+ */
+export function DesktopBackground() {
+	return (
+		<div className="fixed inset-0 z-0 pointer-events-none">
+			<div className="absolute inset-0" style={{ background: 'var(--khal-bg-desktop)' }} />
+			<AnimatedBackground />
+		</div>
+	);
+}

package/src/components/desktop/DesktopIcon.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { AppIcon } from '@/components/app-icon';
+import type { DesktopEntry } from '@/types/desktop-entry';
+
+interface DesktopIconProps {
+	entry: DesktopEntry;
+	onLaunch: () => void;
+	isMobile?: boolean;
+}
+
+export function DesktopIcon({ entry, onLaunch, isMobile }: DesktopIconProps) {
+	const iconSize = isMobile ? 36 : 32;
+
+	return (
+		<button
+			className={
+				isMobile
+					? 'flex flex-col items-center gap-2 rounded-xl p-3 text-center transition-colors active:bg-[var(--khal-desktop-icon-hover)]'
+					: 'flex w-20 flex-col items-center gap-1.5 rounded-lg p-2 text-center transition-colors hover:bg-[var(--khal-desktop-icon-hover)] focus-visible:bg-[var(--khal-desktop-icon-hover)]'
+			}
+			onClick={isMobile ? onLaunch : undefined}
+			onDoubleClick={isMobile ? undefined : onLaunch}
+			onKeyDown={
+				isMobile
+					? undefined
+					: (e) => {
+							if (e.key === 'Enter' || e.key === ' ') {
+								e.preventDefault();
+								onLaunch();
+							}
+						}
+			}
+			aria-label={`Open ${entry.name}`}
+		>
+			<div
+				className={
+					isMobile
+						? 'flex h-14 w-14 items-center justify-center drop-shadow-lg'
+						: 'flex h-12 w-12 items-center justify-center drop-shadow-lg'
+				}
+				aria-hidden="true"
+			>
+				<AppIcon appId={entry.component || entry.id} size={iconSize} />
+			</div>
+			<span className="w-full truncate text-label-12 text-gray-1000 dark:text-gray-1000">{entry.name}</span>
+		</button>
+	);
+}

package/src/components/desktop/ShortcutViewer.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { useEffect } from 'react';
+import type { ShortcutCategory } from '@/lib/keyboard/types';
+import { comboToSymbols } from '@/lib/keyboard/types';
+import { useKeybindStore } from '@/stores/keybind-store';
+
+interface ShortcutViewerProps {
+	visible: boolean;
+	onClose: () => void;
+}
+
+const CATEGORY_LABELS: Record<ShortcutCategory, string> = {
+	window: 'Window',
+	workspace: 'Workspace',
+	launcher: 'Launcher',
+	terminal: 'Terminal',
+	system: 'System',
+};
+
+const CATEGORY_ORDER: ShortcutCategory[] = ['window', 'launcher', 'terminal', 'system', 'workspace'];
+
+export function ShortcutViewer({ visible, onClose }: ShortcutViewerProps) {
+	const { definitions, getBinding } = useKeybindStore();
+
+	useEffect(() => {
+		if (!visible) return;
+
+		const handleEscape = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') {
+				e.preventDefault();
+				e.stopPropagation();
+				onClose();
+			}
+		};
+
+		window.addEventListener('keydown', handleEscape, { capture: true });
+		return () => window.removeEventListener('keydown', handleEscape, { capture: true });
+	}, [visible, onClose]);
+
+	if (!visible) return null;
+
+	// Group shortcuts by category
+	const byCategory = definitions.reduce(
+		(acc, def) => {
+			if (!acc[def.category]) acc[def.category] = [];
+			acc[def.category].push(def);
+			return acc;
+		},
+		{} as Record<ShortcutCategory, typeof definitions>
+	);
+
+	return (
+		<div
+			className="fixed inset-0 z-[10000] flex items-center justify-center backdrop-blur-sm"
+			style={{ background: 'rgba(0,0,0,0.5)' }}
+			onClick={onClose}
+		>
+			<div
+				className="max-h-[80vh] w-[700px] overflow-y-auto rounded-xl"
+				style={{
+					background: 'var(--khal-surface-raised)',
+					border: '1px solid var(--khal-border-default)',
+					boxShadow: 'var(--khal-shadow-xl)',
+				}}
+				onClick={(e) => e.stopPropagation()}
+			>
+				<div
+					className="sticky top-0 px-6 py-4"
+					style={{
+						background: 'var(--khal-surface-raised)',
+						borderBottom: '1px solid var(--khal-border-default)',
+					}}
+				>
+					<h2 className="text-copy-18 font-semibold" style={{ color: 'var(--khal-text-primary)' }}>
+						Keyboard Shortcuts
+					</h2>
+					<p className="text-copy-13" style={{ color: 'var(--khal-text-muted)' }}>
+						Press Esc to close
+					</p>
+				</div>
+
+				<div className="px-6 py-4">
+					{CATEGORY_ORDER.map((category) => {
+						const shortcuts = byCategory[category];
+						if (!shortcuts || shortcuts.length === 0) return null;
+
+						return (
+							<div key={category} className="mb-6 last:mb-0">
+								<h3 className="mb-3 text-copy-14 font-semibold" style={{ color: 'var(--khal-text-secondary)' }}>
+									{CATEGORY_LABELS[category]}
+								</h3>
+								<div className="space-y-2">
+									{shortcuts.map((def) => {
+										const binding = getBinding(def.id);
+										if (!binding) return null;
+
+										return (
+											<div
+												key={def.id}
+												className="flex items-center justify-between rounded-lg px-4 py-2.5"
+												style={{ background: 'var(--khal-surface-sunken)' }}
+											>
+												<div className="flex flex-col">
+													<span className="text-copy-13 font-medium" style={{ color: 'var(--khal-text-primary)' }}>
+														{def.label}
+													</span>
+													{def.description && (
+														<span className="text-copy-12" style={{ color: 'var(--khal-text-muted)' }}>
+															{def.description}
+														</span>
+													)}
+												</div>
+												<kbd
+													className="ml-4 flex-shrink-0 rounded-md px-3 py-1.5 font-mono text-copy-13"
+													style={{
+														background: 'var(--khal-surface-default)',
+														color: 'var(--khal-text-secondary)',
+														boxShadow: 'var(--khal-shadow-sm)',
+														border: '1px solid var(--khal-border-subtle)',
+													}}
+												>
+													{comboToSymbols(binding)}
+												</kbd>
+											</div>
+										);
+									})}
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/components/desktop/WindowRenderer.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { APP_COMPONENTS } from '@/components/apps/app-registry';
+import { MobileWindowStack } from '@/components/window/MobileWindowStack';
+import { Window } from '@/components/window/Window';
+import { useIsMobile } from '@/lib/hooks/use-is-mobile';
+import { useWindowStore } from '@/stores/window-store';
+
+export function WindowRenderer() {
+	const windowsByWorkspace = useWindowStore((s) => s.windowsByWorkspace);
+	const activeWorkspaceId = useWindowStore((s) => s.activeWorkspaceId);
+	const windows = activeWorkspaceId ? windowsByWorkspace[activeWorkspaceId] || [] : [];
+	const isMobile = useIsMobile();
+
+	if (isMobile) {
+		return <MobileWindowStack windows={windows} />;
+	}
+
+	return (
+		<>
+			{windows.map((win) => {
+				const AppComponent = APP_COMPONENTS[win.appId];
+				if (AppComponent) {
+					return (
+						<Window key={win.id} window={win}>
+							<AppComponent windowId={win.id} meta={win.meta} />
+						</Window>
+					);
+				}
+				return null;
+			})}
+		</>
+	);
+}

package/src/components/desktop/WindowSwitcher.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { AppIconWithFallback } from '@/components/app-icon';
+import type { WindowState } from '@/types/window';
+
+interface WindowSwitcherProps {
+	visible: boolean;
+	windows: WindowState[];
+	selectedIndex: number;
+}
+
+function WindowSwitcherItem({ win, isSelected }: { win: WindowState; isSelected: boolean }) {
+	return (
+		<div
+			className={`flex flex-col items-center gap-2 rounded-lg px-3 py-3 transition-colors ${
+				isSelected ? 'bg-blue-600 text-white' : 'text-gray-1000'
+			}`}
+			style={{ width: 120 }}
+		>
+			<div className="flex h-12 w-12 items-center justify-center">
+				<AppIconWithFallback appId={win.appId} title={win.title} size={40} className="object-contain" />
+			</div>
+			<span className="w-full truncate text-center text-copy-13">{win.title}</span>
+		</div>
+	);
+}
+
+export function WindowSwitcher({ visible, windows, selectedIndex }: WindowSwitcherProps) {
+	if (!visible || windows.length === 0) return null;
+
+	return (
+		<div className="fixed inset-0 z-[10000] flex items-center justify-center">
+			<div className="rounded-xl border border-gray-alpha-200 bg-background-200/90 p-3 shadow-2xl backdrop-blur-xl">
+				<div className="flex gap-1">
+					{windows.map((win, i) => (
+						<WindowSwitcherItem key={win.id} win={win} isSelected={i === selectedIndex} />
+					))}
+				</div>
+			</div>
+		</div>
+	);
+}