khal-os 1.260324.2

package/packages/genie-app/views/genie/ui/Sidebar.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import { AgentsPanel } from './panels/AgentsPanel';
+import { ChatPanel } from './panels/ChatPanel';
+import { SystemPanel } from './panels/SystemPanel';
+import { TeamsPanel } from './panels/TeamsPanel';
+import { WishesPanel } from './panels/WishesPanel';
+
+// --- Panel definitions ---
+
+export type PanelId = 'teams' | 'agents' | 'wishes' | 'chat' | 'system';
+
+interface PanelDef {
+	id: PanelId;
+	label: string;
+	icon: React.ReactNode;
+	component: React.ComponentType;
+}
+
+// SVG icons (16x16) matching the existing design language
+function UsersIcon() {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<title>Teams</title>
+			<circle cx="6" cy="5" r="2.5" />
+			<path d="M2 13.5c0-2.5 1.8-4 4-4s4 1.5 4 4" />
+			<circle cx="11" cy="4.5" r="1.8" />
+			<path d="M11.5 9.5c1.5.3 2.5 1.5 2.5 3" />
+		</svg>
+	);
+}
+
+function BotIcon() {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<title>Agents</title>
+			<rect x="2" y="4" width="12" height="9" rx="2" />
+			<circle cx="5.5" cy="8.5" r="1" />
+			<circle cx="10.5" cy="8.5" r="1" />
+			<path d="M8 1v3" />
+			<circle cx="8" cy="1" r="0.8" fill="currentColor" />
+		</svg>
+	);
+}
+
+function WandIcon() {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<title>Wishes</title>
+			<path d="M9 2l1 2.5L12.5 5l-2 1.8.5 2.7L9 8.3 6.5 9.5l.5-2.7-2-1.8L7.5 4.5z" />
+			<path d="M5 11l-3 3" />
+		</svg>
+	);
+}
+
+function ChatIcon() {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<title>Chat</title>
+			<path d="M2 3h12a1 1 0 011 1v7a1 1 0 01-1 1H5l-3 2.5V4a1 1 0 011-1z" />
+		</svg>
+	);
+}
+
+function HeartPulseIcon() {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<title>System</title>
+			<path d="M1 8h3l1.5-3 2 6 1.5-3H12" />
+			<path d="M13.5 6.5a2.5 2.5 0 00-4.2-1.8L8 6l-1.3-1.3a2.5 2.5 0 00-4.2 1.8" />
+		</svg>
+	);
+}
+
+const PANELS: PanelDef[] = [
+	{ id: 'teams', label: 'Teams', icon: <UsersIcon />, component: TeamsPanel },
+	{ id: 'agents', label: 'Agents', icon: <BotIcon />, component: AgentsPanel },
+	{ id: 'wishes', label: 'Wishes', icon: <WandIcon />, component: WishesPanel },
+	{ id: 'chat', label: 'Chat', icon: <ChatIcon />, component: ChatPanel },
+	{ id: 'system', label: 'System', icon: <HeartPulseIcon />, component: SystemPanel },
+];
+
+const COLLAPSED_WIDTH = 48;
+const EXPANDED_WIDTH = 280;
+
+// --- Sidebar component ---
+
+export function Sidebar() {
+	const [activePanel, setActivePanel] = useState<PanelId | null>(null);
+	// Track which panels have been opened at least once (lazy mount)
+	const [mounted, setMounted] = useState<Set<PanelId>>(new Set());
+
+	const expanded = activePanel !== null;
+
+	const handleIconClick = useCallback((panelId: PanelId) => {
+		setActivePanel((prev) => (prev === panelId ? null : panelId));
+		setMounted((prev) => {
+			if (prev.has(panelId)) return prev;
+			const next = new Set(prev);
+			next.add(panelId);
+			return next;
+		});
+	}, []);
+
+	return (
+		<div
+			className="flex h-full shrink-0 border-r border-white/10 bg-black/30 overflow-hidden"
+			style={{
+				width: expanded ? EXPANDED_WIDTH : COLLAPSED_WIDTH,
+				transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)',
+			}}
+		>
+			{/* Icon rail */}
+			<div className="flex w-12 shrink-0 flex-col items-center gap-1 py-2">
+				{PANELS.map((panel) => {
+					const isActive = activePanel === panel.id;
+					return (
+						<button
+							key={panel.id}
+							type="button"
+							onClick={() => handleIconClick(panel.id)}
+							className={`flex h-9 w-9 items-center justify-center rounded-md transition-colors ${
+								isActive
+									? 'bg-white/15 text-[var(--os-text-primary)]'
+									: 'text-[var(--os-text-secondary)] hover:bg-white/10 hover:text-[var(--os-text-primary)]'
+							}`}
+							title={panel.label}
+						>
+							{panel.icon}
+						</button>
+					);
+				})}
+			</div>
+
+			{/* Panel content area — always rendered when expanded to preserve state */}
+			{expanded && (
+				<div className="flex min-w-0 flex-1 flex-col overflow-hidden border-l border-white/5">
+					{/* Panel header */}
+					<div className="flex shrink-0 items-center px-3 py-2 border-b border-white/10">
+						<span className="text-xs font-semibold text-[var(--os-text-primary)]">
+							{PANELS.find((p) => p.id === activePanel)?.label}
+						</span>
+					</div>
+
+					{/* Panel bodies — render all mounted panels, show only active */}
+					<div className="min-h-0 flex-1 relative">
+						{PANELS.map((panel) => {
+							if (!mounted.has(panel.id)) return null;
+							const isActive = activePanel === panel.id;
+							const PanelComponent = panel.component;
+							return (
+								<div
+									key={panel.id}
+									className="absolute inset-0 overflow-y-auto"
+									style={{ display: isActive ? 'block' : 'none' }}
+								>
+									<PanelComponent />
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}

package/packages/genie-app/views/genie/ui/TabBar.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+interface SessionTab {
+	id: string;
+	name: string;
+	paneCount: number;
+	color: string;
+}
+
+interface TabBarProps {
+	tabs: SessionTab[];
+	activeSessionId: string | null;
+	onSelectSession: (sessionId: string) => void;
+	onResetLayout?: () => void;
+}
+
+export function TabBar({ tabs, activeSessionId, onSelectSession, onResetLayout }: TabBarProps) {
+	if (tabs.length === 0) return null;
+
+	return (
+		<div className="flex items-center gap-0.5 overflow-x-auto border-b border-white/10 bg-black/30 px-1">
+			{tabs.map((tab) => {
+				const isActive = tab.id === activeSessionId;
+				return (
+					<button
+						key={tab.id}
+						type="button"
+						onClick={() => onSelectSession(tab.id)}
+						className={`group flex shrink-0 items-center gap-2 border-b-2 px-3 py-2 text-xs transition-colors ${
+							isActive
+								? 'border-current text-[var(--os-text-primary)]'
+								: 'border-transparent text-[var(--os-text-secondary)] hover:text-[var(--os-text-primary)]'
+						}`}
+						style={{
+							borderLeftWidth: 3,
+							borderLeftStyle: 'solid',
+							borderLeftColor: tab.color,
+						}}
+					>
+						<span className="font-medium">{tab.name}</span>
+						<span
+							className={`rounded-full px-1.5 py-0.5 text-[10px] leading-none ${
+								isActive ? 'bg-white/10 text-[var(--os-text-primary)]' : 'bg-white/5 text-[var(--os-text-secondary)]'
+							}`}
+						>
+							{tab.paneCount}
+						</span>
+					</button>
+				);
+			})}
+
+			{/* Spacer */}
+			<div className="flex-1" />
+
+			{/* Reset layout button */}
+			{onResetLayout && (
+				<button
+					type="button"
+					onClick={onResetLayout}
+					className="shrink-0 rounded px-2 py-1 text-[10px] text-[var(--os-text-secondary)] hover:bg-white/10 hover:text-[var(--os-text-primary)]"
+					title="Reset layout to auto-grid"
+				>
+					Reset Layout
+				</button>
+			)}
+		</div>
+	);
+}
+
+export type { SessionTab };

package/packages/genie-app/views/genie/ui/WorkspaceCanvas.tsx

@@ -0,0 +1,343 @@
+'use client';
+
+import type React from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Layout } from 'react-grid-layout';
+import RGL, { WidthProvider } from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
+import { getNatsClient } from '@/lib/nats-client';
+import { SUBJECTS } from '../../../lib/subjects';
+import { PaneCard } from './PaneCard';
+import { Sidebar } from './Sidebar';
+import { type SessionTab, TabBar } from './TabBar';
+
+// --- Types ---
+
+interface PaneData {
+	id: string;
+	windowId: string;
+	active: boolean;
+	pid: number;
+	command: string;
+	title: string;
+	left: number;
+	top: number;
+	width: number;
+	height: number;
+	dead: boolean;
+	agent: { name: string; color: string; state: string; role: string } | null;
+}
+
+interface WindowData {
+	id: string;
+	name: string;
+	panes: PaneData[];
+	active: boolean;
+	sessionId: string;
+	width: number;
+	height: number;
+}
+
+interface SessionData {
+	id: string;
+	name: string;
+	windows: WindowData[];
+	attached: number;
+}
+
+interface AgentsResponse {
+	sessions: SessionData[];
+	error?: string;
+}
+
+// --- Constants ---
+
+const SESSION_COLORS = ['#a855f7', '#3b82f6', '#22c55e', '#f97316', '#ec4899', '#06b6d4', '#eab308', '#ef4444'];
+const GRID_COLS = 12;
+const ROW_HEIGHT = 75;
+const LAYOUT_KEY_PREFIX = 'genie-canvas-layout-';
+
+// --- Grid Layout ---
+
+const GridLayout = WidthProvider(RGL);
+
+function storageKey(sessionName: string): string {
+	return `${LAYOUT_KEY_PREFIX}${sessionName}`;
+}
+
+function computeAutoLayout(panes: PaneData[], offset = 0): Layout[] {
+	const total = panes.length + offset;
+	const gridCols = total <= 4 ? 2 : total <= 9 ? 3 : 4;
+	const w = GRID_COLS / gridCols;
+	const h = 4; // 4 * 75px = 300px
+
+	return panes.map((pane, i) => {
+		const idx = i + offset;
+		return {
+			i: pane.id,
+			x: (idx % gridCols) * w,
+			y: Math.floor(idx / gridCols) * h,
+			w,
+			h,
+			minH: 3,
+			minW: 2,
+		};
+	});
+}
+
+function loadSavedLayout(sessionName: string): Layout[] | null {
+	try {
+		const stored = localStorage.getItem(storageKey(sessionName));
+		if (!stored) return null;
+		return JSON.parse(stored);
+	} catch {
+		return null;
+	}
+}
+
+function mergeLayout(saved: Layout[] | null, panes: PaneData[]): Layout[] {
+	if (!saved || saved.length === 0) return computeAutoLayout(panes);
+
+	const paneIds = new Set(panes.map((p) => p.id));
+
+	// Keep saved positions for panes that still exist
+	const kept = saved.filter((item) => paneIds.has(item.i));
+	const keptIds = new Set(kept.map((item) => item.i));
+
+	// Auto-place new panes at the end of the grid
+	const newPanes = panes.filter((p) => !keptIds.has(p.id));
+	if (newPanes.length === 0) return kept;
+
+	const autoPlaced = computeAutoLayout(newPanes, kept.length);
+	return [...kept, ...autoPlaced];
+}
+
+function paneIdKey(panes: PaneData[]): string {
+	return panes
+		.map((p) => p.id)
+		.sort()
+		.join(',');
+}
+
+// --- Canvas: renders all panes as a grid ---
+
+function Canvas({
+	panes,
+	sessionName,
+	onResetRef,
+}: {
+	panes: PaneData[];
+	sessionName: string;
+	onResetRef: React.RefObject<(() => void) | null>;
+}) {
+	const [maximizedPaneId, setMaximizedPaneId] = useState<string | null>(null);
+	const [layout, setLayout] = useState<Layout[]>(() => mergeLayout(loadSavedLayout(sessionName), panes));
+	const prevPaneKeyRef = useRef(paneIdKey(panes));
+	const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	// Recompute layout only when pane set changes (add/remove), not on every poll
+	useEffect(() => {
+		const key = paneIdKey(panes);
+		if (key === prevPaneKeyRef.current) return;
+		prevPaneKeyRef.current = key;
+		setLayout((prev) => mergeLayout(prev.length > 0 ? prev : loadSavedLayout(sessionName), panes));
+	}, [panes, sessionName]);
+
+	// Expose reset function to parent
+	useEffect(() => {
+		onResetRef.current = () => {
+			localStorage.removeItem(storageKey(sessionName));
+			setLayout(computeAutoLayout(panes));
+		};
+		return () => {
+			onResetRef.current = null;
+		};
+	}, [sessionName, panes, onResetRef]);
+
+	// Persist layout to localStorage on change (debounced)
+	const handleLayoutChange = useCallback(
+		(newLayout: Layout[]) => {
+			setLayout(newLayout);
+			if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+			saveTimerRef.current = setTimeout(() => {
+				localStorage.setItem(storageKey(sessionName), JSON.stringify(newLayout));
+			}, 500);
+		},
+		[sessionName]
+	);
+
+	// Cleanup save timer
+	useEffect(() => {
+		return () => {
+			if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+		};
+	}, []);
+
+	if (panes.length === 0) {
+		return (
+			<div className="flex h-full items-center justify-center">
+				<p className="text-sm text-[var(--os-text-secondary)]">No panes in this session</p>
+			</div>
+		);
+	}
+
+	const hasMaximized = maximizedPaneId !== null;
+
+	return (
+		<div className="genie-canvas relative h-full overflow-auto">
+			<GridLayout
+				layout={layout}
+				cols={GRID_COLS}
+				rowHeight={ROW_HEIGHT}
+				draggableHandle=".pane-card-header"
+				onLayoutChange={handleLayoutChange}
+				isDraggable={!hasMaximized}
+				isResizable={!hasMaximized}
+				compactType="vertical"
+				margin={[4, 4]}
+				containerPadding={[4, 4]}
+			>
+				{panes.map((pane) => (
+					<div key={pane.id} className="h-full">
+						<PaneCard
+							pane={pane}
+							isMaximized={maximizedPaneId === pane.id}
+							onMaximize={() => setMaximizedPaneId(pane.id)}
+							onRestore={() => setMaximizedPaneId(null)}
+						/>
+					</div>
+				))}
+			</GridLayout>
+		</div>
+	);
+}
+
+// --- Main Component ---
+
+export function WorkspaceCanvas(_props: { windowId: string; meta?: Record<string, unknown> }) {
+	const [sessions, setSessions] = useState<SessionData[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+	const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+	const resetLayoutRef = useRef<(() => void) | null>(null);
+
+	const fetchData = useCallback(async () => {
+		try {
+			const client = getNatsClient();
+			const response = await client.request(SUBJECTS.agents.list(), {}, 5000);
+			const data = response as AgentsResponse;
+			if (data.error) {
+				setError(data.error);
+				return;
+			}
+			setSessions(data.sessions || []);
+			setError(null);
+		} catch (err) {
+			setError(String(err));
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	// Polling
+	useEffect(() => {
+		fetchData();
+		intervalRef.current = setInterval(fetchData, 5000);
+		return () => {
+			if (intervalRef.current) clearInterval(intervalRef.current);
+		};
+	}, [fetchData]);
+
+	// Auto-select first session if none selected or current selection is gone
+	useEffect(() => {
+		if (sessions.length === 0) return;
+		const currentExists = sessions.some((s) => s.id === activeSessionId);
+		if (!activeSessionId || !currentExists) {
+			const sorted = [...sessions].sort((a, b) => a.name.localeCompare(b.name));
+			setActiveSessionId(sorted[0].id);
+		}
+	}, [sessions, activeSessionId]);
+
+	// Build sorted tabs
+	const tabs: SessionTab[] = useMemo(() => {
+		return [...sessions]
+			.sort((a, b) => a.name.localeCompare(b.name))
+			.map((session, i) => ({
+				id: session.id,
+				name: session.name,
+				paneCount: session.windows.reduce((sum, w) => sum + w.panes.length, 0),
+				color: SESSION_COLORS[i % SESSION_COLORS.length],
+			}));
+	}, [sessions]);
+
+	// Collect all panes for the active session
+	const activePanes: PaneData[] = useMemo(() => {
+		const session = sessions.find((s) => s.id === activeSessionId);
+		if (!session) return [];
+		return session.windows.flatMap((w) => w.panes);
+	}, [sessions, activeSessionId]);
+
+	// Get session name for layout persistence key
+	const activeSessionName = useMemo(() => {
+		const session = sessions.find((s) => s.id === activeSessionId);
+		return session?.name ?? '';
+	}, [sessions, activeSessionId]);
+
+	const handleResetLayout = useCallback(() => {
+		resetLayoutRef.current?.();
+	}, []);
+
+	// Main content area (loading / error / empty / canvas)
+	let content: React.ReactNode;
+	if (loading) {
+		content = (
+			<div className="flex h-full items-center justify-center">
+				<p className="text-sm text-[var(--os-text-secondary)]">Connecting to tmux...</p>
+			</div>
+		);
+	} else if (error) {
+		content = (
+			<div className="flex h-full flex-col items-center justify-center gap-2">
+				<p className="text-sm text-red-400">Error: {error}</p>
+				<button type="button" onClick={fetchData} className="rounded bg-white/10 px-3 py-1 text-xs hover:bg-white/20">
+					Retry
+				</button>
+			</div>
+		);
+	} else if (sessions.length === 0) {
+		content = (
+			<div className="flex h-full items-center justify-center">
+				<p className="text-sm text-[var(--os-text-secondary)]">No tmux sessions found</p>
+			</div>
+		);
+	} else {
+		content = (
+			<div className="flex h-full flex-col">
+				<TabBar
+					tabs={tabs}
+					activeSessionId={activeSessionId}
+					onSelectSession={setActiveSessionId}
+					onResetLayout={handleResetLayout}
+				/>
+				<div className="min-h-0 flex-1">
+					<Canvas
+						key={activeSessionId}
+						panes={activePanes}
+						sessionName={activeSessionName}
+						onResetRef={resetLayoutRef}
+					/>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex h-full">
+			<Sidebar />
+			<div className="min-w-0 flex-1">{content}</div>
+		</div>
+	);
+}
+
+export type { AgentsResponse, PaneData, SessionData, WindowData };