khal-os 1.260324.2

package/src/components/apps/files/FilesToolbar.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { ChevronLeft, ChevronRight, FolderPlus, Grid, List, RefreshCw, Upload } from 'lucide-react';
+import { useCallback } from 'react';
+import { Toolbar } from '@/components/os-primitives/toolbar';
+
+export type ViewMode = 'grid' | 'list';
+
+interface FilesToolbarProps {
+	currentPath: string;
+	canGoBack: boolean;
+	viewMode: ViewMode;
+	loading: boolean;
+	onGoBack: () => void;
+	onGoUp: () => void;
+	onNavigateTo: (path: string) => void;
+	onViewModeChange: (mode: ViewMode) => void;
+	onNewFolder: () => void;
+	onUpload: () => void;
+	onRefresh: () => void;
+}
+
+export function FilesToolbar({
+	currentPath,
+	canGoBack,
+	viewMode,
+	loading,
+	onGoBack,
+	onGoUp,
+	onNavigateTo,
+	onViewModeChange,
+	onNewFolder,
+	onUpload,
+	onRefresh,
+}: FilesToolbarProps) {
+	const segments = currentPath.split('/').filter(Boolean);
+
+	const handleBreadcrumbClick = useCallback(
+		(index: number) => {
+			const path = `/${segments.slice(0, index + 1).join('/')}`;
+			onNavigateTo(path);
+		},
+		[segments, onNavigateTo]
+	);
+
+	const handleRootClick = useCallback(() => {
+		onNavigateTo('/');
+	}, [onNavigateTo]);
+
+	return (
+		<Toolbar>
+			<Toolbar.Group>
+				<Toolbar.Button tooltip="Back" onClick={onGoBack} disabled={!canGoBack}>
+					<ChevronLeft />
+				</Toolbar.Button>
+				<Toolbar.Button tooltip="Up" onClick={onGoUp} disabled={currentPath === '/'}>
+					<ChevronRight />
+				</Toolbar.Button>
+			</Toolbar.Group>
+
+			<Toolbar.Separator />
+
+			{/* Breadcrumb */}
+			<div className="flex items-center gap-0.5 overflow-hidden text-label-13">
+				<button
+					type="button"
+					onClick={handleRootClick}
+					className="shrink-0 rounded-sm px-1 py-0.5 text-gray-900 transition-colors hover:bg-gray-alpha-200 hover:text-gray-1000"
+				>
+					~
+				</button>
+				{segments.map((segment, i) => (
+					<span key={`/${segments.slice(0, i + 1).join('/')}`} className="flex items-center gap-0.5">
+						<span className="text-gray-600">/</span>
+						<button
+							type="button"
+							onClick={() => handleBreadcrumbClick(i)}
+							className={`truncate rounded-sm px-1 py-0.5 transition-colors hover:bg-gray-alpha-200 ${
+								i === segments.length - 1 ? 'font-medium text-gray-1000' : 'text-gray-900 hover:text-gray-1000'
+							}`}
+						>
+							{segment}
+						</button>
+					</span>
+				))}
+			</div>
+
+			<Toolbar.Spacer />
+
+			<Toolbar.Group>
+				<Toolbar.Button tooltip="Grid view" active={viewMode === 'grid'} onClick={() => onViewModeChange('grid')}>
+					<Grid />
+				</Toolbar.Button>
+				<Toolbar.Button tooltip="List view" active={viewMode === 'list'} onClick={() => onViewModeChange('list')}>
+					<List />
+				</Toolbar.Button>
+			</Toolbar.Group>
+
+			<Toolbar.Separator />
+
+			<Toolbar.Group>
+				<Toolbar.Button tooltip="New Folder" onClick={onNewFolder}>
+					<FolderPlus />
+				</Toolbar.Button>
+				<Toolbar.Button tooltip="Upload" onClick={onUpload}>
+					<Upload />
+				</Toolbar.Button>
+			</Toolbar.Group>
+
+			<Toolbar.Separator />
+
+			<Toolbar.Button tooltip="Refresh" onClick={onRefresh} active={loading}>
+				<RefreshCw />
+			</Toolbar.Button>
+		</Toolbar>
+	);
+}

package/src/components/apps/files/GridView.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { Folder } from 'lucide-react';
+import { useCallback } from 'react';
+import { formatSize, getFileIcon } from './FileItem';
+import { InlineRenameInput, NewFolderInput } from './InlineInput';
+import type { FsEntry } from './schema';
+
+interface GridViewProps {
+	entries: FsEntry[];
+	selectedNames: Set<string>;
+	onSelect: (name: string, e: React.MouseEvent) => void;
+	onClearSelection: () => void;
+	onNavigate: (entry: FsEntry) => void;
+	onContextMenu: (e: React.MouseEvent, entry: FsEntry) => void;
+	renamingName: string | null;
+	onRenameSubmit: (oldName: string, newName: string) => void;
+	creatingFolder: boolean;
+	onNewFolderSubmit: (name: string) => void;
+}
+
+export function GridView({
+	entries,
+	selectedNames,
+	onSelect,
+	onClearSelection,
+	onNavigate,
+	onContextMenu,
+	renamingName,
+	onRenameSubmit,
+	creatingFolder,
+	onNewFolderSubmit,
+}: GridViewProps) {
+	const handleDoubleClick = useCallback(
+		(entry: FsEntry) => {
+			if (entry.isDir) {
+				onNavigate(entry);
+			}
+		},
+		[onNavigate]
+	);
+
+	return (
+		<div className="h-full overflow-y-auto p-3" onClick={onClearSelection} onKeyDown={undefined} role="presentation">
+			<div
+				className="grid auto-rows-auto gap-1"
+				style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))' }}
+			>
+				{creatingFolder && (
+					<div className="flex cursor-default flex-col items-center gap-1 rounded-lg bg-blue-700/15 p-2">
+						<Folder className="h-8 w-8 text-blue-700" strokeWidth={1.5} />
+						<NewFolderInput onSubmit={onNewFolderSubmit} className="text-center" />
+					</div>
+				)}
+				{entries.map((entry) => {
+					const Icon = getFileIcon(entry);
+					const isSelected = selectedNames.has(entry.name);
+					const isRenaming = renamingName === entry.name;
+
+					return (
+						<button
+							type="button"
+							key={entry.name}
+							className={`flex cursor-default flex-col items-center gap-1 rounded-lg p-2 transition-colors ${
+								isSelected ? 'bg-blue-700/15 text-gray-1000' : 'text-gray-1000 hover:bg-gray-alpha-100'
+							}`}
+							onClick={(e) => {
+								e.stopPropagation();
+								onSelect(entry.name, e);
+							}}
+							onDoubleClick={() => handleDoubleClick(entry)}
+							onContextMenu={(e) => {
+								e.stopPropagation();
+								onContextMenu(e, entry);
+							}}
+						>
+							<Icon className={`h-8 w-8 ${entry.isDir ? 'text-blue-700' : 'text-gray-700'}`} strokeWidth={1.5} />
+							{isRenaming ? (
+								<InlineRenameInput name={entry.name} onSubmit={onRenameSubmit} className="text-center" />
+							) : (
+								<span className="w-full truncate text-center text-label-13">{entry.name}</span>
+							)}
+							{!entry.isDir && <span className="text-[11px] text-gray-700">{formatSize(entry.size)}</span>}
+						</button>
+					);
+				})}
+			</div>
+		</div>
+	);
+}

package/src/components/apps/files/InlineInput.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface InlineRenameInputProps {
+	name: string;
+	onSubmit: (oldName: string, newName: string) => void;
+	className?: string;
+}
+
+/**
+ * Inline rename input. Enter confirms, Escape and blur cancel (revert to original name).
+ */
+export function InlineRenameInput({ name, onSubmit, className }: InlineRenameInputProps) {
+	const [value, setValue] = useState(name);
+	const inputRef = useRef<HTMLInputElement>(null);
+	const confirmedRef = useRef(false);
+
+	useEffect(() => {
+		const input = inputRef.current;
+		if (input) {
+			input.focus();
+			const dotIndex = name.lastIndexOf('.');
+			if (dotIndex > 0) {
+				input.setSelectionRange(0, dotIndex);
+			} else {
+				input.select();
+			}
+		}
+	}, [name]);
+
+	const handleConfirm = useCallback(() => {
+		if (confirmedRef.current) return;
+		confirmedRef.current = true;
+		onSubmit(name, value);
+	}, [name, value, onSubmit]);
+
+	const handleCancel = useCallback(() => {
+		if (confirmedRef.current) return;
+		confirmedRef.current = true;
+		onSubmit(name, name);
+	}, [name, onSubmit]);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent) => {
+			if (e.key === 'Enter') {
+				e.preventDefault();
+				handleConfirm();
+			} else if (e.key === 'Escape') {
+				e.preventDefault();
+				handleCancel();
+			}
+		},
+		[handleConfirm, handleCancel]
+	);
+
+	return (
+		<input
+			ref={inputRef}
+			type="text"
+			value={value}
+			onChange={(e) => setValue(e.target.value)}
+			onBlur={handleCancel}
+			onKeyDown={handleKeyDown}
+			className={`w-full rounded border border-blue-500 bg-transparent px-1 text-label-13 outline-none ${className ?? ''}`}
+			style={{ color: 'var(--khal-text-primary)' }}
+			onClick={(e) => e.stopPropagation()}
+		/>
+	);
+}
+
+interface NewFolderInputProps {
+	onSubmit: (name: string) => void;
+	className?: string;
+}
+
+/**
+ * Inline new-folder name input. Enter confirms, Escape and blur cancel.
+ */
+export function NewFolderInput({ onSubmit, className }: NewFolderInputProps) {
+	const [value, setValue] = useState('New Folder');
+	const inputRef = useRef<HTMLInputElement>(null);
+	const confirmedRef = useRef(false);
+
+	useEffect(() => {
+		const input = inputRef.current;
+		if (input) {
+			input.focus();
+			input.select();
+		}
+	}, []);
+
+	const handleConfirm = useCallback(() => {
+		if (confirmedRef.current) return;
+		confirmedRef.current = true;
+		onSubmit(value);
+	}, [value, onSubmit]);
+
+	const handleCancel = useCallback(() => {
+		if (confirmedRef.current) return;
+		confirmedRef.current = true;
+		onSubmit('');
+	}, [onSubmit]);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent) => {
+			if (e.key === 'Enter') {
+				e.preventDefault();
+				handleConfirm();
+			} else if (e.key === 'Escape') {
+				e.preventDefault();
+				handleCancel();
+			}
+		},
+		[handleConfirm, handleCancel]
+	);
+
+	return (
+		<input
+			ref={inputRef}
+			type="text"
+			value={value}
+			onChange={(e) => setValue(e.target.value)}
+			onBlur={handleCancel}
+			onKeyDown={handleKeyDown}
+			className={`w-full rounded border border-blue-500 bg-transparent px-1 text-label-13 outline-none ${className ?? ''}`}
+			style={{ color: 'var(--khal-text-primary)' }}
+			onClick={(e) => e.stopPropagation()}
+		/>
+	);
+}

package/src/components/apps/files/UploadOverlay.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { Upload } from 'lucide-react';
+import type { UploadState } from './use-upload';
+
+interface UploadOverlayProps {
+	/** True when the user is dragging files over the drop zone */
+	isDragging: boolean;
+	/** Current upload state from useUpload */
+	uploadState: UploadState;
+}
+
+export function UploadOverlay({ isDragging, uploadState }: UploadOverlayProps) {
+	if (!isDragging && !uploadState.uploading && !uploadState.error) {
+		return null;
+	}
+
+	// Drag overlay — shown while files hover over the drop zone
+	if (isDragging) {
+		return (
+			<div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center rounded-md border-2 border-dashed border-blue-700 bg-blue-700/10">
+				<div className="flex flex-col items-center gap-2 text-blue-700">
+					<Upload className="h-8 w-8" />
+					<span className="text-label-14 font-medium">Drop files to upload</span>
+				</div>
+			</div>
+		);
+	}
+
+	// Upload progress
+	if (uploadState.uploading) {
+		return (
+			<div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-background-100/80">
+				<div className="flex w-64 flex-col items-center gap-3 rounded-lg border border-gray-alpha-200 bg-background-100 p-6 shadow-lg">
+					<Upload className="h-6 w-6 text-blue-700" />
+					<span className="truncate text-label-13 text-gray-1000">{uploadState.fileName}</span>
+					<div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-alpha-200">
+						<div
+							className="h-full rounded-full bg-blue-700 transition-all duration-200"
+							style={{ width: `${uploadState.progress}%` }}
+						/>
+					</div>
+					<span className="text-label-13 text-gray-700">{uploadState.progress}%</span>
+				</div>
+			</div>
+		);
+	}
+
+	// Error state
+	if (uploadState.error) {
+		return (
+			<div className="pointer-events-none absolute bottom-3 left-3 right-3 z-30">
+				<div className="rounded-md border border-red-400/30 bg-red-50 px-3 py-2 text-label-13 text-red-700 dark:bg-red-900/20 dark:text-red-400">
+					Upload failed: {uploadState.error}
+				</div>
+			</div>
+		);
+	}
+
+	return null;
+}

package/src/components/apps/files/schema.ts

@@ -0,0 +1,49 @@
+import { type Static, Type } from '@sinclair/typebox';
+
+// Note: userId is NOT included in request schemas.
+// The WS bridge injects `_authUserId` from the authenticated session
+// into all outbound NATS messages. Services read that field instead.
+
+// fs.list
+export const FsListRequest = Type.Object({
+	path: Type.String(),
+});
+export type FsListRequest = Static<typeof FsListRequest>;
+
+export const FsEntry = Type.Object({
+	name: Type.String(),
+	size: Type.Number(),
+	mtime: Type.Number(), // epoch ms
+	isDir: Type.Boolean(),
+});
+export type FsEntry = Static<typeof FsEntry>;
+
+export const FsListResponse = Type.Object({
+	entries: Type.Array(FsEntry),
+	path: Type.String(), // resolved relative path
+	root: Type.String(), // absolute filesystem root
+});
+export type FsListResponse = Static<typeof FsListResponse>;
+
+// fs.write — multiplexed operations
+export const FsWriteRequest = Type.Union([
+	Type.Object({ op: Type.Literal('mkdir'), path: Type.String() }),
+	Type.Object({ op: Type.Literal('rename'), path: Type.String(), newName: Type.String() }),
+	Type.Object({ op: Type.Literal('move'), path: Type.String(), dest: Type.String() }),
+	Type.Object({ op: Type.Literal('delete'), path: Type.String() }),
+]);
+export type FsWriteRequest = Static<typeof FsWriteRequest>;
+
+export const FsWriteResponse = Type.Object({
+	ok: Type.Boolean(),
+	error: Type.Optional(Type.String()),
+});
+export type FsWriteResponse = Static<typeof FsWriteResponse>;
+
+// fs.watch event
+export const FsWatchEvent = Type.Object({
+	type: Type.Union([Type.Literal('create'), Type.Literal('delete'), Type.Literal('rename'), Type.Literal('change')]),
+	path: Type.String(),
+	name: Type.String(),
+});
+export type FsWatchEvent = Static<typeof FsWatchEvent>;

package/src/components/apps/files/service/index.ts

@@ -0,0 +1,227 @@
+import * as crypto from 'node:crypto';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { connect } from '@nats-io/transport-node';
+import { getFilesRoot, resolveSafePath, validateFilename } from '@/lib/files/safe-path';
+import type { FsListRequest, FsWatchEvent, FsWriteRequest } from '../schema';
+
+const MAX_ENTRIES = 500;
+
+const ROOT = path.resolve(getFilesRoot());
+
+/**
+ * Compute a short hash for a directory path, used for watch subject routing.
+ */
+function pathHash(dirPath: string): string {
+	return crypto.createHash('sha256').update(dirPath).digest('hex').slice(0, 12);
+}
+
+/**
+ * Get the relative path from root, always starting with '/'.
+ */
+function relativePath(root: string, absPath: string): string {
+	const rel = path.relative(root, absPath);
+	if (rel === '') return '/';
+	return `/${rel}`;
+}
+
+type NatsConnection = Awaited<ReturnType<typeof connect>>;
+
+function handleWriteOp(nc: NatsConnection, orgId: string, request: FsWriteRequest): { ok: boolean; error?: string } {
+	switch (request.op) {
+		case 'mkdir': {
+			const safePath = resolveSafePath(ROOT, request.path);
+			fs.mkdirSync(safePath, { recursive: true });
+			console.log(`[fs-service] mkdir: ${safePath}`);
+
+			const parentDir = path.dirname(safePath);
+			publishWatchEvent(nc, orgId, parentDir, {
+				type: 'create',
+				path: relativePath(ROOT, safePath),
+				name: path.basename(safePath),
+			});
+			return { ok: true };
+		}
+
+		case 'rename': {
+			const nameError = validateFilename(request.newName);
+			if (nameError) return { ok: false, error: nameError };
+
+			const safePath = resolveSafePath(ROOT, request.path);
+			const parentDir = path.dirname(safePath);
+			const newPath = resolveSafePath(ROOT, path.join(relativePath(ROOT, parentDir), request.newName));
+
+			fs.renameSync(safePath, newPath);
+			console.log(`[fs-service] rename: ${safePath} -> ${newPath}`);
+
+			publishWatchEvent(nc, orgId, parentDir, {
+				type: 'rename',
+				path: relativePath(ROOT, newPath),
+				name: request.newName,
+			});
+			return { ok: true };
+		}
+
+		case 'move': {
+			const safeSrc = resolveSafePath(ROOT, request.path);
+			const safeDest = resolveSafePath(ROOT, request.dest);
+			const targetPath = path.join(safeDest, path.basename(safeSrc));
+			resolveSafePath(ROOT, relativePath(ROOT, targetPath));
+
+			fs.renameSync(safeSrc, targetPath);
+			console.log(`[fs-service] move: ${safeSrc} -> ${targetPath}`);
+
+			const srcParent = path.dirname(safeSrc);
+			publishWatchEvent(nc, orgId, srcParent, {
+				type: 'delete',
+				path: relativePath(ROOT, safeSrc),
+				name: path.basename(safeSrc),
+			});
+			publishWatchEvent(nc, orgId, safeDest, {
+				type: 'create',
+				path: relativePath(ROOT, targetPath),
+				name: path.basename(safeSrc),
+			});
+			return { ok: true };
+		}
+
+		case 'delete': {
+			const safePath = resolveSafePath(ROOT, request.path);
+			const parentDir = path.dirname(safePath);
+			const entryName = path.basename(safePath);
+
+			const stat = fs.statSync(safePath);
+			if (stat.isDirectory()) {
+				fs.rmSync(safePath, { recursive: true, force: true });
+			} else {
+				fs.unlinkSync(safePath);
+			}
+			console.log(`[fs-service] delete: ${safePath}`);
+
+			publishWatchEvent(nc, orgId, parentDir, {
+				type: 'delete',
+				path: relativePath(ROOT, safePath),
+				name: entryName,
+			});
+			return { ok: true };
+		}
+
+		default:
+			return { ok: false, error: 'Unknown operation' };
+	}
+}
+
+async function main() {
+	// Ensure root directory exists
+	fs.mkdirSync(ROOT, { recursive: true });
+	console.log(`[fs-service] root directory: ${ROOT}`);
+
+	const nc = await connect({
+		servers: process.env.NATS_URL || 'nats://localhost:4222',
+	});
+
+	console.log('[fs-service] connected to NATS, subscribing to khal.*.fs.*');
+
+	// --- khal.*.fs.list (request-reply) ---
+	const listSub = nc.subscribe('khal.*.fs.list');
+	(async () => {
+		for await (const msg of listSub) {
+			try {
+				const request = msg.json<FsListRequest & { _authUserId?: string }>();
+				const safePath = resolveSafePath(ROOT, request.path);
+
+				const stat = fs.statSync(safePath);
+				if (!stat.isDirectory()) {
+					msg.respond(JSON.stringify({ error: 'Not a directory' }));
+					continue;
+				}
+
+				const dirents = fs.readdirSync(safePath, { withFileTypes: true });
+				const entries = dirents.slice(0, MAX_ENTRIES).map((dirent) => {
+					const fullPath = path.join(safePath, dirent.name);
+					try {
+						const entryStat = fs.statSync(fullPath);
+						return {
+							name: dirent.name,
+							size: entryStat.size,
+							mtime: entryStat.mtimeMs,
+							isDir: dirent.isDirectory(),
+						};
+					} catch {
+						// Entry may have been deleted between readdir and stat
+						return {
+							name: dirent.name,
+							size: 0,
+							mtime: 0,
+							isDir: dirent.isDirectory(),
+						};
+					}
+				});
+
+				msg.respond(
+					JSON.stringify({
+						entries,
+						path: relativePath(ROOT, safePath),
+						root: ROOT,
+					})
+				);
+			} catch (err) {
+				console.error('[fs-service] list error:', err);
+				msg.respond(JSON.stringify({ error: (err as Error).message }));
+			}
+		}
+	})();
+
+	// --- khal.*.fs.write (request-reply) ---
+	const writeSub = nc.subscribe('khal.*.fs.write');
+	(async () => {
+		for await (const msg of writeSub) {
+			try {
+				const orgId = msg.subject.split('.')[1];
+				const request = msg.json<FsWriteRequest & { _authUserId?: string }>();
+				const result = handleWriteOp(nc, orgId, request);
+				msg.respond(JSON.stringify(result));
+			} catch (err) {
+				console.error('[fs-service] write error:', err);
+				msg.respond(JSON.stringify({ ok: false, error: (err as Error).message }));
+			}
+		}
+	})();
+
+	// --- Graceful shutdown ---
+	const shutdown = async () => {
+		console.log('[fs-service] shutting down...');
+
+		listSub.unsubscribe();
+		writeSub.unsubscribe();
+
+		await nc.close();
+		process.exit(0);
+	};
+
+	process.on('SIGINT', shutdown);
+	process.on('SIGTERM', shutdown);
+
+	// Keep alive
+	await nc.closed();
+}
+
+/**
+ * Publish a watch event to the NATS subject for the given directory.
+ */
+function publishWatchEvent(
+	nc: Awaited<ReturnType<typeof connect>>,
+	orgId: string,
+	dirAbsPath: string,
+	event: FsWatchEvent
+) {
+	const hash = pathHash(dirAbsPath);
+	const subject = `khal.${orgId}.fs.watch.${hash}`;
+	nc.publish(subject, JSON.stringify(event));
+	console.log(`[fs-service] watch event -> ${subject}:`, event);
+}
+
+main().catch((err) => {
+	console.error('[fs-service] fatal:', err);
+	process.exit(1);
+});

package/src/components/apps/files/service/runtime

@@ -0,0 +1 @@
+node