khal-os 1.260324.2

package/packages/files-app/views/files/use-files.ts

@@ -0,0 +1,201 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useNats } from '@/lib/hooks/use-nats';
+import { SUBJECTS } from '@/lib/subjects';
+import type { FileEntry, FileListResponse, FileWriteRequest, FileWriteResponse } from './schema';
+
+/**
+ * Get the parent directory of a relative path.
+ * e.g. '/subdir/file.txt' -> '/subdir', '/file.txt' -> '/'
+ */
+function parentDir(filePath: string): string {
+	const lastSlash = filePath.lastIndexOf('/');
+	if (lastSlash <= 0) return '/';
+	return filePath.slice(0, lastSlash);
+}
+
+/**
+ * Sort entries: directories first, then alphabetical by name (case-insensitive).
+ */
+function sortEntries(entries: FileEntry[]): FileEntry[] {
+	return [...entries].sort((a, b) => {
+		if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+		return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
+	});
+}
+
+export interface UseFilesReturn {
+	currentPath: string;
+	filesRoot: string;
+	entries: FileEntry[];
+	loading: boolean;
+	error: string | null;
+	navigateTo: (path: string) => void;
+	refresh: () => void;
+	goBack: () => void;
+	goUp: () => void;
+	canGoBack: boolean;
+	writeOp: (op: FileWriteRequest) => Promise<FileWriteResponse>;
+}
+
+export function useFiles(): UseFilesReturn {
+	const { request, subscribe, connected, orgId } = useNats();
+	const [currentPath, setCurrentPath] = useState('/');
+	const [filesRoot, setFilesRoot] = useState('');
+	const [entries, setEntries] = useState<FileEntry[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [pathHistory, setPathHistory] = useState<string[]>([]);
+
+	// Track whether we've fetched at least once for this path
+	const lastFetchedPath = useRef<string | null>(null);
+
+	const fetchEntries = useCallback(
+		async (path: string) => {
+			if (!connected) return;
+			setLoading(true);
+			setError(null);
+			try {
+				const response = (await request(SUBJECTS.fs.list(orgId), { path })) as FileListResponse & {
+					error?: string;
+				};
+				if (response.error) {
+					setError(response.error);
+					setEntries([]);
+				} else {
+					setEntries(sortEntries(response.entries));
+					setCurrentPath(response.path);
+					if (response.root) setFilesRoot(response.root);
+					lastFetchedPath.current = response.path;
+				}
+			} catch (err) {
+				setError((err as Error).message || 'Failed to list directory');
+				setEntries([]);
+			} finally {
+				setLoading(false);
+			}
+		},
+		[connected, request]
+	);
+
+	// Fetch entries when path changes or connection becomes available
+	useEffect(() => {
+		if (connected && lastFetchedPath.current !== currentPath) {
+			fetchEntries(currentPath);
+		}
+	}, [currentPath, connected, fetchEntries]);
+
+	// Initial fetch when first connected
+	useEffect(() => {
+		if (connected && lastFetchedPath.current === null) {
+			fetchEntries(currentPath);
+		}
+	}, [connected, currentPath, fetchEntries]);
+
+	// --- Live watch: subscribe to fs.watch events and auto-refresh on changes ---
+	// We use a ref for currentPath so the subscription callback always sees the latest value
+	// without needing to re-subscribe every time the path changes.
+	const currentPathRef = useRef(currentPath);
+	currentPathRef.current = currentPath;
+
+	// Debounce refresh calls from watch events to avoid rapid successive fetches
+	const watchRefreshTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	useEffect(() => {
+		if (!connected) return;
+
+		const watchSubject = 'os.fs.watch.>';
+		const unsub = subscribe(watchSubject, (data: unknown) => {
+			if (!data || typeof data !== 'object') return;
+			const event = data as Record<string, unknown>;
+			if (typeof event.type !== 'string' || typeof event.path !== 'string') return;
+
+			// Check if this event's parent directory matches the currently viewed path
+			const eventParent = parentDir(event.path as string);
+			if (eventParent !== currentPathRef.current) return;
+
+			// Debounce: coalesce rapid events (e.g. bulk operations) into a single refresh
+			if (watchRefreshTimer.current) {
+				clearTimeout(watchRefreshTimer.current);
+			}
+			watchRefreshTimer.current = setTimeout(() => {
+				watchRefreshTimer.current = null;
+				lastFetchedPath.current = null;
+				fetchEntries(currentPathRef.current);
+			}, 300);
+		});
+
+		return () => {
+			unsub();
+			if (watchRefreshTimer.current) {
+				clearTimeout(watchRefreshTimer.current);
+				watchRefreshTimer.current = null;
+			}
+		};
+	}, [connected, subscribe, fetchEntries]);
+
+	const navigateTo = useCallback(
+		(path: string) => {
+			setPathHistory((prev) => [...prev, currentPath]);
+			setCurrentPath(path);
+			lastFetchedPath.current = null; // Force re-fetch
+		},
+		[currentPath]
+	);
+
+	const refresh = useCallback(() => {
+		lastFetchedPath.current = null; // Force re-fetch
+		fetchEntries(currentPath);
+	}, [currentPath, fetchEntries]);
+
+	const goBack = useCallback(() => {
+		if (pathHistory.length === 0) return;
+		const previous = pathHistory[pathHistory.length - 1];
+		setPathHistory((prev) => prev.slice(0, -1));
+		setCurrentPath(previous);
+		lastFetchedPath.current = null;
+	}, [pathHistory]);
+
+	const goUp = useCallback(() => {
+		if (currentPath === '/') return;
+		const segments = currentPath.split('/').filter(Boolean);
+		segments.pop();
+		const parentPath = segments.length === 0 ? '/' : `/${segments.join('/')}`;
+		navigateTo(parentPath);
+	}, [currentPath, navigateTo]);
+
+	const writeOp = useCallback(
+		async (op: FileWriteRequest): Promise<FileWriteResponse> => {
+			if (!connected) {
+				return { ok: false, error: 'Not connected' };
+			}
+			try {
+				const response = (await request(SUBJECTS.fs.write(orgId), op)) as FileWriteResponse;
+				if (response.ok) {
+					// Refresh after successful write
+					lastFetchedPath.current = null;
+					fetchEntries(currentPath);
+				}
+				return response;
+			} catch (err) {
+				return { ok: false, error: (err as Error).message || 'Write operation failed' };
+			}
+		},
+		[connected, request, currentPath, fetchEntries]
+	);
+
+	return {
+		currentPath,
+		filesRoot,
+		entries,
+		loading,
+		error,
+		navigateTo,
+		refresh,
+		goBack,
+		goUp,
+		canGoBack: pathHistory.length > 0,
+		writeOp,
+	};
+}

package/packages/files-app/views/files/use-upload.ts

@@ -0,0 +1,105 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+
+export interface UploadState {
+	uploading: boolean;
+	progress: number; // 0-100
+	fileName: string | null;
+	error: string | null;
+}
+
+const INITIAL_STATE: UploadState = {
+	uploading: false,
+	progress: 0,
+	fileName: null,
+	error: null,
+};
+
+function uploadFile(file: File, targetPath: string): Promise<void> {
+	return new Promise((resolve, reject) => {
+		const xhr = new XMLHttpRequest();
+		const formData = new FormData();
+		formData.append('file', file);
+		formData.append('path', targetPath);
+
+		xhr.open('POST', '/api/files/upload');
+
+		xhr.onload = () => {
+			if (xhr.status >= 200 && xhr.status < 300) {
+				try {
+					const response = JSON.parse(xhr.responseText);
+					if (response.ok) {
+						resolve();
+					} else {
+						reject(new Error(response.error || 'Upload failed'));
+					}
+				} catch {
+					reject(new Error('Invalid server response'));
+				}
+			} else {
+				reject(new Error(`Upload failed (${xhr.status})`));
+			}
+		};
+
+		xhr.onerror = () => {
+			reject(new Error('Network error'));
+		};
+
+		xhr.send(formData);
+	});
+}
+
+export function useUpload(currentPath: string, onComplete: () => void) {
+	const [uploadState, setUploadState] = useState<UploadState>(INITIAL_STATE);
+
+	const uploadFiles = useCallback(
+		async (files: FileList | File[]) => {
+			const fileArray = Array.from(files);
+			if (fileArray.length === 0) return;
+
+			setUploadState({
+				uploading: true,
+				progress: 0,
+				fileName: fileArray.length === 1 ? fileArray[0].name : `${fileArray.length} files`,
+				error: null,
+			});
+
+			let completed = 0;
+
+			try {
+				for (const file of fileArray) {
+					setUploadState((prev) => ({
+						...prev,
+						fileName: fileArray.length === 1 ? file.name : `${file.name} (${completed + 1}/${fileArray.length})`,
+					}));
+
+					await uploadFile(file, currentPath);
+					completed++;
+
+					setUploadState((prev) => ({
+						...prev,
+						progress: Math.round((completed / fileArray.length) * 100),
+					}));
+				}
+
+				setUploadState(INITIAL_STATE);
+				onComplete();
+			} catch (err) {
+				setUploadState({
+					uploading: false,
+					progress: 0,
+					fileName: null,
+					error: err instanceof Error ? err.message : 'Upload failed',
+				});
+			}
+		},
+		[currentPath, onComplete]
+	);
+
+	const clearError = useCallback(() => {
+		setUploadState(INITIAL_STATE);
+	}, []);
+
+	return { uploadState, uploadFiles, clearError };
+}

package/packages/genie-app/components.ts

@@ -0,0 +1,12 @@
+'use client';
+
+import { type ComponentType, lazy } from 'react';
+
+interface AppComponentProps {
+	windowId: string;
+	meta?: Record<string, unknown>;
+}
+
+export const components: Record<string, ComponentType<AppComponentProps>> = {
+	genie: lazy(() => import('./views/genie/ui/GenieApp').then((m) => ({ default: m.GenieApp }))),
+};

package/packages/genie-app/lib/subjects.ts

@@ -0,0 +1,87 @@
+const PREFIX = 'os.genie';
+
+export const SUBJECTS = {
+	// --- Existing: Agent listing & pane control ---
+	agents: {
+		list: () => `${PREFIX}.agents.list`,
+	},
+	sessions: {
+		list: () => `${PREFIX}.sessions.list`,
+	},
+	pane: {
+		capture: (paneId: string) => `${PREFIX}.pane.${paneId}.capture`,
+		send: (paneId: string) => `${PREFIX}.pane.${paneId}.send`,
+	},
+	spawn: () => `${PREFIX}.spawn`,
+	events: {
+		state: () => `${PREFIX}.events.state`,
+	},
+	// Terminal proxy — PTY attached to a tmux pane
+	term: {
+		create: () => `${PREFIX}.term.create`,
+		destroy: () => `${PREFIX}.term.destroy`,
+		data: (sessionId: string) => `${PREFIX}.term.${sessionId}.data`,
+		input: (sessionId: string) => `${PREFIX}.term.${sessionId}.input`,
+		resize: (sessionId: string) => `${PREFIX}.term.${sessionId}.resize`,
+		exit: (sessionId: string) => `${PREFIX}.term.${sessionId}.exit`,
+		replay: (sessionId: string) => `${PREFIX}.term.${sessionId}.replay`,
+		buffer: (sessionId: string) => `${PREFIX}.term.${sessionId}.buffer`,
+		bufferEnd: (sessionId: string) => `${PREFIX}.term.${sessionId}.buffer-end`,
+	},
+
+	// --- Teams domain ---
+	teams: {
+		list: () => `${PREFIX}.teams.list`,
+		get: () => `${PREFIX}.teams.get`,
+		create: () => `${PREFIX}.teams.create`,
+		disband: () => `${PREFIX}.teams.disband`,
+		done: () => `${PREFIX}.teams.done`,
+		blocked: () => `${PREFIX}.teams.blocked`,
+		hire: () => `${PREFIX}.teams.hire`,
+		fire: () => `${PREFIX}.teams.fire`,
+	},
+
+	// --- Communication domain ---
+	comms: {
+		send: () => `${PREFIX}.comms.send`,
+		broadcast: () => `${PREFIX}.comms.broadcast`,
+		inbox: () => `${PREFIX}.comms.inbox`,
+		chat: {
+			post: () => `${PREFIX}.comms.chat.post`,
+			read: () => `${PREFIX}.comms.chat.read`,
+		},
+	},
+
+	// --- Wishes / Work domain ---
+	wish: {
+		list: () => `${PREFIX}.wish.list`,
+		status: () => `${PREFIX}.wish.status`,
+		work: () => `${PREFIX}.wish.work`,
+		done: () => `${PREFIX}.wish.done`,
+		reset: () => `${PREFIX}.wish.reset`,
+	},
+
+	// --- Agent lifecycle domain ---
+	agent: {
+		kill: () => `${PREFIX}.agent.kill`,
+		stop: () => `${PREFIX}.agent.stop`,
+		history: () => `${PREFIX}.agent.history`,
+		answer: () => `${PREFIX}.agent.answer`,
+		read: () => `${PREFIX}.agent.read`,
+	},
+
+	// --- Agent directory domain ---
+	dir: {
+		list: () => `${PREFIX}.dir.list`,
+		get: () => `${PREFIX}.dir.get`,
+		add: () => `${PREFIX}.dir.add`,
+		remove: () => `${PREFIX}.dir.remove`,
+		edit: () => `${PREFIX}.dir.edit`,
+	},
+
+	// --- System health ---
+	system: {
+		doctor: () => `${PREFIX}.system.doctor`,
+		version: () => `${PREFIX}.system.version`,
+	},
+} as const;

package/packages/genie-app/manifest.ts

@@ -0,0 +1,19 @@
+export default {
+	id: 'genie-app',
+	views: [
+		{
+			id: 'genie',
+			label: 'Genie',
+			permission: 'genie',
+			minRole: 'platform-dev' as const,
+			natsPrefix: 'genie',
+			defaultSize: { width: 960, height: 640 },
+			component: './views/genie/ui/GenieApp',
+		},
+	],
+	desktop: {
+		icon: '/icons/dusk/electron.svg',
+		categories: ['Development'],
+		comment: 'Agent mission control',
+	},
+};

package/packages/genie-app/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@genie-os/genie-app",
+	"version": "0.0.1",
+	"private": true,
+	"main": "./manifest.ts",
+	"exports": {
+		".": "./manifest.ts",
+		"./components": "./components.ts",
+		"./views/*": "./views/*"
+	},
+	"genieOs": {
+		"services": [
+			{
+				"name": "genie-control",
+				"entry": "./views/genie/service/index.ts",
+				"runtime": "node"
+			}
+		]
+	},
+	"dependencies": {
+		"react-grid-layout": "^1.5.0"
+	},
+	"devDependencies": {
+		"@types/react-grid-layout": "^1.3.5"
+	},
+	"peerDependencies": {
+		"react": ">=19"
+	}
+}

package/packages/genie-app/views/genie/service/agent-lifecycle.ts

@@ -0,0 +1,136 @@
+/**
+ * Agent Lifecycle domain — kill, stop, history, answer, read.
+ *
+ * Exposes agent control operations beyond spawn (which lives in index.ts).
+ */
+
+import type { ServiceHandler } from '@genie-os/sdk/service';
+import { SUBJECTS } from '../../../lib/subjects';
+import { runGenie } from './cli';
+
+export const agentLifecycleHandlers: ServiceHandler[] = [
+	// --- Kill agent ---
+	{
+		subject: SUBJECTS.agent.kill(),
+		handler: (msg) => {
+			try {
+				const { name } = msg.json<{ name: string }>();
+				if (!name) {
+					msg.respond(JSON.stringify({ error: 'Missing required field: name' }));
+					return;
+				}
+				const result = runGenie(['kill', name], { json: false });
+				if (!result.ok) {
+					msg.respond(JSON.stringify({ error: result.error }));
+					return;
+				}
+				msg.respond(JSON.stringify({ ok: true }));
+			} catch (err) {
+				msg.respond(JSON.stringify({ error: String(err) }));
+			}
+		},
+	},
+
+	// --- Stop agent ---
+	{
+		subject: SUBJECTS.agent.stop(),
+		handler: (msg) => {
+			try {
+				const { name } = msg.json<{ name: string }>();
+				if (!name) {
+					msg.respond(JSON.stringify({ error: 'Missing required field: name' }));
+					return;
+				}
+				const result = runGenie(['stop', name], { json: false });
+				if (!result.ok) {
+					msg.respond(JSON.stringify({ error: result.error }));
+					return;
+				}
+				msg.respond(JSON.stringify({ ok: true }));
+			} catch (err) {
+				msg.respond(JSON.stringify({ error: String(err) }));
+			}
+		},
+	},
+
+	// --- Agent history ---
+	{
+		subject: SUBJECTS.agent.history(),
+		handler: (msg) => {
+			try {
+				const { name, full, since } = msg.json<{ name: string; full?: boolean; since?: string }>();
+				if (!name) {
+					msg.respond(JSON.stringify({ error: 'Missing required field: name' }));
+					return;
+				}
+				const args = ['history', name, '--json'];
+				if (full) args.push('--full');
+				if (since) args.push('--since', since);
+
+				const result = runGenie<unknown[]>(args, { timeout: 15_000 });
+				if (!result.ok) {
+					msg.respond(JSON.stringify({ error: result.error }));
+					return;
+				}
+				msg.respond(JSON.stringify({ history: result.data }));
+			} catch (err) {
+				msg.respond(JSON.stringify({ error: String(err) }));
+			}
+		},
+	},
+
+	// --- Answer agent question ---
+	{
+		subject: SUBJECTS.agent.answer(),
+		handler: (msg) => {
+			try {
+				const { name, choice } = msg.json<{ name: string; choice: string }>();
+				if (!name || !choice) {
+					msg.respond(JSON.stringify({ error: 'Missing required fields: name, choice' }));
+					return;
+				}
+				// choice can be a number ("1") or text ("text:my answer")
+				const result = runGenie(['answer', name, choice], { json: false });
+				if (!result.ok) {
+					msg.respond(JSON.stringify({ error: result.error }));
+					return;
+				}
+				msg.respond(JSON.stringify({ ok: true, output: result.data }));
+			} catch (err) {
+				msg.respond(JSON.stringify({ error: String(err) }));
+			}
+		},
+	},
+
+	// --- Read agent output ---
+	{
+		subject: SUBJECTS.agent.read(),
+		handler: (msg) => {
+			try {
+				const { name, lines, search, grep } = msg.json<{
+					name: string;
+					lines?: number;
+					search?: string;
+					grep?: string;
+				}>();
+				if (!name) {
+					msg.respond(JSON.stringify({ error: 'Missing required field: name' }));
+					return;
+				}
+				const args = ['read', name, '--json'];
+				if (lines !== undefined) args.push('--lines', String(lines));
+				if (search) args.push('--search', search);
+				if (grep) args.push('--grep', grep);
+
+				const result = runGenie(args, { timeout: 15_000 });
+				if (!result.ok) {
+					msg.respond(JSON.stringify({ error: result.error }));
+					return;
+				}
+				msg.respond(JSON.stringify({ output: result.data }));
+			} catch (err) {
+				msg.respond(JSON.stringify({ error: String(err) }));
+			}
+		},
+	},
+];

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

@@ -0,0 +1,114 @@
+/**
+ * Shared CLI runner for the genie command.
+ *
+ * - `runGenie()` — synchronous, for fast commands (<1s): list, status, kill, etc.
+ * - `runGenieAsync()` — promise-based, for long-running commands: team create, work, etc.
+ *
+ * Both use `execFileSync` / `execFile` with argument arrays to prevent command injection.
+ */
+
+import { execFile, execFileSync } from 'node:child_process';
+
+export interface RunGenieOptions {
+	/** Parse stdout as JSON. Defaults to true. */
+	json?: boolean;
+	/** Timeout in milliseconds. Defaults to 10_000. */
+	timeout?: number;
+	/** Working directory for the command. */
+	cwd?: string;
+}
+
+export interface GenieResult<T = unknown> {
+	ok: true;
+	data: T;
+}
+
+export interface GenieError {
+	ok: false;
+	error: string;
+}
+
+export type GenieOutput<T = unknown> = GenieResult<T> | GenieError;
+
+/**
+ * Run a genie CLI command synchronously.
+ *
+ * Uses `execFileSync('genie', [...args])` — never string concatenation.
+ *
+ * @param args - Argument array passed directly to execFileSync (e.g. ['team', 'ls', '--json'])
+ * @param opts - Options for JSON parsing, timeout, and cwd
+ * @returns Parsed JSON when opts.json is true (default), raw string otherwise
+ */
+export function runGenie<_T = unknown>(args: string[], opts: RunGenieOptions & { json: false }): GenieOutput<string>;
+export function runGenie<T = unknown>(args: string[], opts?: RunGenieOptions): GenieOutput<T>;
+export function runGenie<T = unknown>(args: string[], opts?: RunGenieOptions): GenieOutput<T | string> {
+	const { json = true, timeout = 10_000, cwd } = opts ?? {};
+
+	try {
+		const stdout = execFileSync('genie', args, {
+			encoding: 'utf-8',
+			timeout,
+			cwd: cwd ?? process.env.HOME,
+			env: { ...process.env, FORCE_COLOR: '0', NO_COLOR: '1' },
+		}).trim();
+
+		if (!json) {
+			return { ok: true, data: stdout };
+		}
+
+		try {
+			return { ok: true, data: JSON.parse(stdout) as T };
+		} catch {
+			// JSON parse failed — return raw text
+			return { ok: true, data: stdout as unknown as T };
+		}
+	} catch (err) {
+		const message = err instanceof Error ? err.message : String(err);
+		return { ok: false, error: message };
+	}
+}
+
+/**
+ * Run a genie CLI command asynchronously (promise-based).
+ *
+ * Uses `execFile('genie', [...args])` — for long-running commands like `team create` or `work`.
+ *
+ * @param args - Argument array passed directly to execFile
+ * @param opts - Options for JSON parsing, timeout, and cwd
+ */
+export function runGenieAsync<T = unknown>(args: string[], opts?: RunGenieOptions): Promise<GenieOutput<T | string>> {
+	const { json = true, timeout = 60_000, cwd } = opts ?? {};
+
+	return new Promise((resolve) => {
+		execFile(
+			'genie',
+			args,
+			{
+				encoding: 'utf-8',
+				timeout,
+				cwd: cwd ?? process.env.HOME,
+				env: { ...process.env, FORCE_COLOR: '0', NO_COLOR: '1' },
+			},
+			(err: Error | null, stdout: string, stderr: string) => {
+				if (err) {
+					const message = stderr?.trim() || err.message;
+					resolve({ ok: false, error: message });
+					return;
+				}
+
+				const output = stdout.trim();
+
+				if (!json) {
+					resolve({ ok: true, data: output });
+					return;
+				}
+
+				try {
+					resolve({ ok: true, data: JSON.parse(output) as T });
+				} catch {
+					resolve({ ok: true, data: output as unknown as T });
+				}
+			}
+		);
+	});
+}