khal-os 1.260324.2

package/packages/genie-app/views/genie/service/wishes.ts

@@ -0,0 +1,270 @@
+/**
+ * Wishes/Work domain — wish lifecycle and work orchestration via NATS.
+ *
+ * Endpoints:
+ *   os.genie.wish.list    — list all wishes from .genie/wishes/ directories
+ *   os.genie.wish.status  — parse `genie status <slug>` into structured groups
+ *   os.genie.wish.work    — trigger `genie work <ref>` (async, spawns agents)
+ *   os.genie.wish.done    — mark a wish/group done via `genie done <ref>`
+ *   os.genie.wish.reset   — reset a wish/group via `genie reset <ref>`
+ */
+
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+import { SUBJECTS } from '../../../lib/subjects';
+import { runGenie, runGenieAsync } from './cli';
+
+/** Shape of a parsed execution group from `genie status` output */
+interface WishGroup {
+	group: number | string;
+	status: string;
+	assignee: string | null;
+	started: string | null;
+	completed: string | null;
+}
+
+/** Shape of a wish entry from directory scanning */
+interface WishEntry {
+	slug: string;
+	status: string | null;
+	date: string | null;
+	summary: string | null;
+}
+
+/**
+ * Parse `genie status <slug>` text output into structured data.
+ *
+ * Expected format:
+ *   Wish: <slug>
+ *   ──────────
+ *     GROUP  STATUS        ASSIGNEE      STARTED        COMPLETED
+ *     ─────────────────────────────────────────────────────────
+ *     1      ✅ done        engineer      Mar 19, 16:16  Mar 19, 16:18
+ *     2      🔄 in_progress engineer      Mar 19, 16:18  -
+ *     ...
+ *     Progress: 1/7 done | 5 in progress | 0 ready | 1 blocked
+ */
+function parseStatusOutput(text: string): { groups: WishGroup[]; summary: string } {
+	const lines = text.split('\n');
+	const groups: WishGroup[] = [];
+	let summary = '';
+
+	for (const line of lines) {
+		// Match progress summary line
+		if (line.trim().startsWith('Progress:')) {
+			summary = line.trim();
+			continue;
+		}
+
+		// Match group rows — they start with optional spaces, then a number or word like "review"
+		// Pattern: group_id  status_emoji status_text  assignee  started  completed
+		const groupMatch = line.match(
+			/^\s+(\S+)\s+(?:[^\s]*\s+)?(done|in_progress|ready|blocked|pending|failed|review)\s+(\S+|-)\s+(.+)$/i
+		);
+		if (groupMatch) {
+			const [, groupId, status, assignee, rest] = groupMatch;
+			// Parse the dates — "started  completed" or "Mar 19, 16:16  Mar 19, 16:18" or "-  -"
+			const dateParts = rest.trim().split(/\s{2,}/);
+			const started = dateParts[0] === '-' ? null : dateParts[0] || null;
+			const completed = dateParts[1] === '-' ? null : dateParts[1] || null;
+
+			groups.push({
+				group: /^\d+$/.test(groupId) ? Number.parseInt(groupId, 10) : groupId,
+				status: status.toLowerCase(),
+				assignee: assignee === '-' ? null : assignee,
+				started,
+				completed,
+			});
+		}
+	}
+
+	return { groups, summary };
+}
+
+/**
+ * Parse WISH.md frontmatter to extract status, date, summary.
+ */
+function parseWishFrontmatter(content: string): { status: string | null; date: string | null; summary: string | null } {
+	let status: string | null = null;
+	let date: string | null = null;
+	let summary: string | null = null;
+
+	// Extract from markdown table format: | **Status** | DRAFT |
+	const statusMatch = content.match(/\*\*Status\*\*\s*\|\s*(\S+)/);
+	if (statusMatch) status = statusMatch[1];
+
+	const dateMatch = content.match(/\*\*Date\*\*\s*\|\s*(\S+)/);
+	if (dateMatch) date = dateMatch[1];
+
+	// Summary is typically the first paragraph after ## Summary
+	const summaryMatch = content.match(/## Summary\s*\n+(.+?)(?:\n\n|\n##)/s);
+	if (summaryMatch) summary = summaryMatch[1].trim();
+
+	return { status, date, summary };
+}
+
+/**
+ * Find all .genie/wishes/ directories — check both the repo working directory and ~/.genie/wishes/.
+ */
+function findWishDirs(): string[] {
+	const dirs: string[] = [];
+	const homeWishes = join(process.env.HOME || '', '.genie', 'wishes');
+
+	try {
+		statSync(homeWishes);
+		dirs.push(homeWishes);
+	} catch {
+		// doesn't exist
+	}
+
+	return dirs;
+}
+
+/**
+ * List all wishes by scanning wish directories.
+ */
+function listWishes(): WishEntry[] {
+	const wishes: WishEntry[] = [];
+	const seen = new Set<string>();
+
+	for (const wishDir of findWishDirs()) {
+		try {
+			const entries = readdirSync(wishDir, { withFileTypes: true });
+			for (const entry of entries) {
+				if (!entry.isDirectory() || seen.has(entry.name)) continue;
+				seen.add(entry.name);
+
+				const wishMdPath = join(wishDir, entry.name, 'WISH.md');
+				try {
+					const content = readFileSync(wishMdPath, 'utf-8');
+					const frontmatter = parseWishFrontmatter(content);
+					wishes.push({
+						slug: entry.name,
+						status: frontmatter.status,
+						date: frontmatter.date,
+						summary: frontmatter.summary,
+					});
+				} catch {
+					// WISH.md doesn't exist or can't be read — still list the slug
+					wishes.push({ slug: entry.name, status: null, date: null, summary: null });
+				}
+			}
+		} catch {
+			// directory doesn't exist or can't be read
+		}
+	}
+
+	return wishes;
+}
+
+export const wishHandlers = [
+	// --- List all wishes ---
+	{
+		subject: SUBJECTS.wish.list(),
+		handler: (msg: { respond: (data: string) => void }) => {
+			try {
+				const wishes = listWishes();
+				msg.respond(JSON.stringify({ wishes }));
+			} catch (err) {
+				msg.respond(JSON.stringify({ error: String(err) }));
+			}
+		},
+	},
+
+	// --- Get wish status ---
+	{
+		subject: SUBJECTS.wish.status(),
+		handler: (msg: { data: Uint8Array; json: <T>() => T; respond: (data: string) => void }) => {
+			try {
+				const req = msg.json<{ slug: string }>();
+				if (!req.slug) {
+					msg.respond(JSON.stringify({ error: 'slug is required' }));
+					return;
+				}
+
+				const result = runGenie(['status', req.slug], { json: false });
+				if (!result.ok) {
+					msg.respond(JSON.stringify({ error: result.error }));
+					return;
+				}
+
+				const parsed = parseStatusOutput(result.data as string);
+				msg.respond(JSON.stringify(parsed));
+			} catch (err) {
+				msg.respond(JSON.stringify({ error: String(err) }));
+			}
+		},
+	},
+
+	// --- Trigger work execution (async — spawns agents) ---
+	{
+		subject: SUBJECTS.wish.work(),
+		handler: async (msg: { data: Uint8Array; json: <T>() => T; respond: (data: string) => void }) => {
+			try {
+				const req = msg.json<{ ref: string; agent?: string }>();
+				if (!req.ref) {
+					msg.respond(JSON.stringify({ error: 'ref is required' }));
+					return;
+				}
+
+				const args = ['work', req.ref];
+				if (req.agent) args.push(req.agent);
+
+				const result = await runGenieAsync(args, { json: false, timeout: 120_000 });
+				if (!result.ok) {
+					msg.respond(JSON.stringify({ ok: false, error: result.error }));
+					return;
+				}
+				msg.respond(JSON.stringify({ ok: true, output: result.data }));
+			} catch (err) {
+				msg.respond(JSON.stringify({ ok: false, error: String(err) }));
+			}
+		},
+	},
+
+	// --- Mark wish/group as done ---
+	{
+		subject: SUBJECTS.wish.done(),
+		handler: (msg: { data: Uint8Array; json: <T>() => T; respond: (data: string) => void }) => {
+			try {
+				const req = msg.json<{ ref: string }>();
+				if (!req.ref) {
+					msg.respond(JSON.stringify({ error: 'ref is required' }));
+					return;
+				}
+
+				const result = runGenie(['done', req.ref], { json: false });
+				if (!result.ok) {
+					msg.respond(JSON.stringify({ ok: false, error: result.error }));
+					return;
+				}
+				msg.respond(JSON.stringify({ ok: true }));
+			} catch (err) {
+				msg.respond(JSON.stringify({ ok: false, error: String(err) }));
+			}
+		},
+	},
+
+	// --- Reset wish/group ---
+	{
+		subject: SUBJECTS.wish.reset(),
+		handler: (msg: { data: Uint8Array; json: <T>() => T; respond: (data: string) => void }) => {
+			try {
+				const req = msg.json<{ ref: string }>();
+				if (!req.ref) {
+					msg.respond(JSON.stringify({ error: 'ref is required' }));
+					return;
+				}
+
+				const result = runGenie(['reset', req.ref], { json: false });
+				if (!result.ok) {
+					msg.respond(JSON.stringify({ ok: false, error: result.error }));
+					return;
+				}
+				msg.respond(JSON.stringify({ ok: true }));
+			} catch (err) {
+				msg.respond(JSON.stringify({ ok: false, error: String(err) }));
+			}
+		},
+	},
+];

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

@@ -0,0 +1,5 @@
+'use client';
+
+// GenieApp is now WorkspaceCanvas — re-exported here for backward compatibility
+// with manifest.ts and components.ts references.
+export { WorkspaceCanvas as GenieApp } from './WorkspaceCanvas';

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

@@ -0,0 +1,307 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import { getNatsClient } from '@/lib/nats-client';
+import { SUBJECTS } from '../../../lib/subjects';
+import { XTermPane } from './XTermPane';
+
+interface AgentInfo {
+	name: string;
+	color: string;
+	state: string;
+	role: string;
+}
+
+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: AgentInfo | null;
+}
+
+interface PaneCardProps {
+	pane: PaneData;
+	isMaximized: boolean;
+	onMaximize: () => void;
+	onRestore: () => void;
+}
+
+const COLOR_MAP: Record<string, string> = {
+	red: '#ef4444',
+	blue: '#3b82f6',
+	green: '#22c55e',
+	yellow: '#eab308',
+	purple: '#a855f7',
+	orange: '#f97316',
+	pink: '#ec4899',
+	cyan: '#06b6d4',
+};
+
+const STATE_COLORS: Record<string, string> = {
+	working: '#22c55e',
+	running: '#22c55e',
+	active: '#22c55e',
+	spawning: '#eab308',
+	starting: '#eab308',
+	idle: '#6b7280',
+	offline: '#6b7280',
+	unknown: '#6b7280',
+};
+
+function resolveColor(color: string | undefined): string {
+	if (!color) return '#6b7280';
+	return COLOR_MAP[color] || color;
+}
+
+function stateColor(state: string | undefined): string {
+	if (!state) return '#6b7280';
+	return STATE_COLORS[state] || '#6b7280';
+}
+
+function displayName(pane: PaneData): string {
+	return pane.agent?.name || pane.title || pane.command;
+}
+
+// --- Kill confirmation mini-dialog (inline above the pane) ---
+
+function PaneKillConfirm({
+	agentName,
+	onConfirm,
+	onCancel,
+	loading,
+}: {
+	agentName: string;
+	onConfirm: () => void;
+	onCancel: () => void;
+	loading: boolean;
+}) {
+	return (
+		<div className="absolute inset-x-0 top-7 z-10 flex items-center justify-between border-b border-white/10 bg-red-950/80 px-2 py-1.5 backdrop-blur-sm">
+			<span className="text-[10px] text-red-300">
+				Kill <span className="font-semibold">{agentName}</span>?
+			</span>
+			<div className="flex gap-1">
+				<button
+					type="button"
+					onClick={onCancel}
+					className="rounded px-1.5 py-0.5 text-[10px] text-[var(--os-text-secondary)] hover:bg-white/10"
+				>
+					No
+				</button>
+				<button
+					type="button"
+					onClick={onConfirm}
+					disabled={loading}
+					className="rounded bg-red-600 px-1.5 py-0.5 text-[10px] text-white hover:bg-red-500 disabled:opacity-50"
+				>
+					{loading ? '...' : 'Yes'}
+				</button>
+			</div>
+		</div>
+	);
+}
+
+// --- Agent action helpers ---
+
+async function natsAgentAction(subject: string, name: string): Promise<void> {
+	const client = getNatsClient();
+	const response = (await client.request(subject, { name }, 10000)) as { ok?: boolean; error?: string };
+	if (response.error) throw new Error(response.error);
+}
+
+export function PaneCard({ pane, isMaximized, onMaximize, onRestore }: PaneCardProps) {
+	const color = resolveColor(pane.agent?.color);
+	const name = displayName(pane);
+	const role = pane.agent?.role;
+	const state = pane.agent?.state;
+	const hasAgent = pane.agent !== null;
+
+	const [showKillConfirm, setShowKillConfirm] = useState(false);
+	const [actionLoading, setActionLoading] = useState(false);
+
+	const handleHeaderDoubleClick = useCallback(() => {
+		if (isMaximized) {
+			onRestore();
+		} else {
+			onMaximize();
+		}
+	}, [isMaximized, onMaximize, onRestore]);
+
+	const handleMaximizeClick = useCallback(
+		(e: React.MouseEvent) => {
+			e.stopPropagation();
+			if (isMaximized) {
+				onRestore();
+			} else {
+				onMaximize();
+			}
+		},
+		[isMaximized, onMaximize, onRestore]
+	);
+
+	const handleStop = useCallback(
+		async (e: React.MouseEvent) => {
+			e.stopPropagation();
+			if (!pane.agent) return;
+			setActionLoading(true);
+			try {
+				await natsAgentAction(SUBJECTS.agent.stop(), pane.agent.name);
+			} catch {
+				// best-effort — agent may already be stopped
+			} finally {
+				setActionLoading(false);
+			}
+		},
+		[pane.agent]
+	);
+
+	const handleKillClick = useCallback((e: React.MouseEvent) => {
+		e.stopPropagation();
+		setShowKillConfirm(true);
+	}, []);
+
+	const handleKillConfirm = useCallback(async () => {
+		if (!pane.agent) return;
+		setActionLoading(true);
+		try {
+			await natsAgentAction(SUBJECTS.agent.kill(), pane.agent.name);
+		} catch {
+			// best-effort
+		} finally {
+			setActionLoading(false);
+			setShowKillConfirm(false);
+		}
+	}, [pane.agent]);
+
+	const wrapperClass = isMaximized
+		? 'fixed inset-0 z-50 flex flex-col bg-black/95'
+		: 'relative flex h-full flex-col overflow-hidden rounded border border-white/10 bg-black/40 shadow-lg';
+
+	return (
+		<div className={wrapperClass}>
+			{/* Header bar — compact ~28px */}
+			<div
+				className="pane-card-header group flex shrink-0 cursor-grab items-center gap-1.5 border-b border-white/10 px-2 active:cursor-grabbing"
+				style={{ height: '28px' }}
+				onDoubleClick={handleHeaderDoubleClick}
+			>
+				{/* Color dot */}
+				<div className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: color }} />
+
+				{/* Agent name */}
+				<span className="min-w-0 flex-1 truncate text-[11px] font-medium text-[var(--os-text-primary)]">{name}</span>
+
+				{/* Role badge */}
+				{role && (
+					<span className="shrink-0 rounded-full bg-white/10 px-1.5 py-0.5 text-[9px] leading-none text-[var(--os-text-secondary)]">
+						{role}
+					</span>
+				)}
+
+				{/* Dead badge */}
+				{pane.dead && <span className="shrink-0 rounded bg-red-500/20 px-1 py-0.5 text-[9px] text-red-400">dead</span>}
+
+				{/* State indicator dot */}
+				{state && !pane.dead && (
+					<div
+						className="h-1.5 w-1.5 shrink-0 rounded-full"
+						style={{ backgroundColor: stateColor(state) }}
+						title={state}
+					/>
+				)}
+
+				{/* Agent action buttons — only for agent panes, visible on hover */}
+				{hasAgent && !pane.dead && (
+					<div className="flex shrink-0 items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+						{/* Stop (pause icon) */}
+						<button
+							type="button"
+							onClick={handleStop}
+							disabled={actionLoading}
+							className="shrink-0 rounded p-0.5 text-[var(--os-text-secondary)] hover:bg-yellow-500/20 hover:text-yellow-400 disabled:opacity-50"
+							title="Stop agent"
+						>
+							<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.2">
+								<title>Stop</title>
+								<rect x="2" y="2" width="3" height="8" rx="0.5" />
+								<rect x="7" y="2" width="3" height="8" rx="0.5" />
+							</svg>
+						</button>
+
+						{/* Kill (x icon) */}
+						<button
+							type="button"
+							onClick={handleKillClick}
+							disabled={actionLoading}
+							className="shrink-0 rounded p-0.5 text-[var(--os-text-secondary)] hover:bg-red-500/20 hover:text-red-400 disabled:opacity-50"
+							title="Kill agent"
+						>
+							<svg
+								width="12"
+								height="12"
+								viewBox="0 0 12 12"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="1.2"
+								strokeLinecap="round"
+							>
+								<title>Kill</title>
+								<path d="M3 3l6 6M9 3l-6 6" />
+							</svg>
+						</button>
+					</div>
+				)}
+
+				{/* Maximize/Restore button */}
+				<button
+					type="button"
+					onClick={handleMaximizeClick}
+					className="shrink-0 rounded p-0.5 text-[var(--os-text-secondary)] hover:bg-white/10 hover:text-[var(--os-text-primary)]"
+					title={isMaximized ? 'Restore' : 'Maximize'}
+				>
+					{isMaximized ? (
+						<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+							<title>Restore</title>
+							<rect x="0.5" y="2.5" width="7" height="7" rx="1" stroke="currentColor" strokeWidth="1" />
+							<path
+								d="M4 2.5V1.5C4 0.948 4.448 0.5 5 0.5H10.5C11.052 0.5 11.5 0.948 11.5 1.5V7C11.5 7.552 11.052 8 10.5 8H9.5"
+								stroke="currentColor"
+								strokeWidth="1"
+							/>
+						</svg>
+					) : (
+						<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+							<title>Maximize</title>
+							<rect x="0.5" y="0.5" width="11" height="11" rx="1" stroke="currentColor" strokeWidth="1" />
+						</svg>
+					)}
+				</button>
+			</div>
+
+			{/* Kill confirmation bar */}
+			{showKillConfirm && pane.agent && (
+				<PaneKillConfirm
+					agentName={pane.agent.name}
+					onConfirm={handleKillConfirm}
+					onCancel={() => setShowKillConfirm(false)}
+					loading={actionLoading}
+				/>
+			)}
+
+			{/* Terminal body */}
+			<div className="min-h-0 flex-1 overflow-hidden">
+				<XTermPane tmuxPaneId={pane.id} />
+			</div>
+		</div>
+	);
+}
+
+export type { AgentInfo, PaneData as PaneCardData };