feat(web): /machine dev-box page with status, terminal, and home file browser
This commit is contained in:
Gabriel Brown
@@ -0,0 +1,351 @@
|
||||
'use client';
|
||||
|
||||
import type {
|
||||
FileResponse,
|
||||
FileTreeNode,
|
||||
} from '@/components/agent-workspace/types';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { CodeEditor } from '@/components/agent-workspace/code-editor';
|
||||
import { FileTabs } from '@/components/agent-workspace/file-tabs';
|
||||
import { FileTree } from '@/components/agent-workspace/file-tree';
|
||||
import { XtermSession } from '@/components/agent-workspace/xterm-session';
|
||||
import { useQuery } from 'convex/react';
|
||||
import { FolderTree, SquareTerminal } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { api } from '@spoon/backend/convex/_generated/api.js';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@spoon/ui';
|
||||
|
||||
import type { BoxStatus, LifecycleAction } from './box-status-card';
|
||||
import { BoxStatusCard } from './box-status-card';
|
||||
|
||||
const STATUS_POLL_MS = 10_000;
|
||||
|
||||
type OpenFileState = {
|
||||
path: string;
|
||||
content: string;
|
||||
savedContent: string;
|
||||
loading: boolean;
|
||||
saving: boolean;
|
||||
};
|
||||
|
||||
export const MachineShell = () => {
|
||||
const environment = useQuery(api.userEnvironment.getMine, {});
|
||||
const username = environment?.username ?? '';
|
||||
const firstName = environment?.firstName;
|
||||
|
||||
const [status, setStatus] = useState<BoxStatus | null | undefined>(undefined);
|
||||
const [pendingAction, setPendingAction] = useState<LifecycleAction | null>(
|
||||
null,
|
||||
);
|
||||
const [tree, setTree] = useState<FileTreeNode | null>(null);
|
||||
const [files, setFiles] = useState<Record<string, OpenFileState>>({});
|
||||
const [openFilePaths, setOpenFilePaths] = useState<string[]>([]);
|
||||
const [activeFilePath, setActiveFilePath] = useState<string>();
|
||||
const [expandedDirectoryPaths, setExpandedDirectoryPaths] = useState<
|
||||
string[]
|
||||
>([]);
|
||||
const [vimEnabled, setVimEnabled] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<'files' | 'terminal'>('files');
|
||||
|
||||
const refreshStatus = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch('/api/box/status');
|
||||
if (!response.ok) throw new Error(await response.text());
|
||||
const data = (await response.json()) as { status: BoxStatus };
|
||||
setStatus(data.status);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setStatus((current) => current ?? null);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadTree = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch('/api/box/tree');
|
||||
if (!response.ok) throw new Error(await response.text());
|
||||
const data = (await response.json()) as { tree: FileTreeNode | null };
|
||||
setTree(data.tree);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void refreshStatus();
|
||||
void loadTree();
|
||||
const interval = window.setInterval(() => {
|
||||
void refreshStatus();
|
||||
}, STATUS_POLL_MS);
|
||||
return () => window.clearInterval(interval);
|
||||
}, [refreshStatus, loadTree]);
|
||||
|
||||
const runLifecycle = useCallback(
|
||||
(action: LifecycleAction) => {
|
||||
if (pendingAction) return;
|
||||
setPendingAction(action);
|
||||
void (async () => {
|
||||
try {
|
||||
const response = await fetch('/api/box/lifecycle', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ action }),
|
||||
});
|
||||
if (!response.ok) throw new Error(await response.text());
|
||||
const data = (await response.json()) as { status: BoxStatus };
|
||||
setStatus(data.status);
|
||||
toast.success(
|
||||
action === 'stop'
|
||||
? 'Machine stopped.'
|
||||
: action === 'restart'
|
||||
? 'Machine restarted.'
|
||||
: 'Machine started.',
|
||||
);
|
||||
void loadTree();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error(`Could not ${action} your machine.`);
|
||||
void refreshStatus();
|
||||
} finally {
|
||||
setPendingAction(null);
|
||||
}
|
||||
})();
|
||||
},
|
||||
[pendingAction, loadTree, refreshStatus],
|
||||
);
|
||||
|
||||
const loadFile = useCallback(async (path: string) => {
|
||||
setFiles((current) => ({
|
||||
...current,
|
||||
[path]: current[path] ?? {
|
||||
path,
|
||||
content: '',
|
||||
savedContent: '',
|
||||
loading: true,
|
||||
saving: false,
|
||||
},
|
||||
}));
|
||||
const response = await fetch(
|
||||
`/api/box/file?path=${encodeURIComponent(path)}`,
|
||||
);
|
||||
if (!response.ok) throw new Error(await response.text());
|
||||
const data = (await response.json()) as FileResponse;
|
||||
setFiles((current) => ({
|
||||
...current,
|
||||
[data.path]: {
|
||||
path: data.path,
|
||||
content: data.content,
|
||||
savedContent: data.content,
|
||||
loading: false,
|
||||
saving: false,
|
||||
},
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const openFile = useCallback(
|
||||
(path: string) => {
|
||||
setOpenFilePaths((current) =>
|
||||
current.includes(path) ? current : [...current, path],
|
||||
);
|
||||
setActiveFilePath(path);
|
||||
if (!files[path]) {
|
||||
void loadFile(path).catch((error) => {
|
||||
console.error(error);
|
||||
setFiles((current) => {
|
||||
const next = { ...current };
|
||||
delete next[path];
|
||||
return next;
|
||||
});
|
||||
setOpenFilePaths((current) =>
|
||||
current.filter((filePath) => filePath !== path),
|
||||
);
|
||||
toast.error('Could not load file.');
|
||||
});
|
||||
}
|
||||
},
|
||||
[files, loadFile],
|
||||
);
|
||||
|
||||
const writeFileContent = async (path: string, content: string) => {
|
||||
setFiles((current) => ({
|
||||
...current,
|
||||
[path]: {
|
||||
...(current[path] ?? { path, savedContent: '', loading: false }),
|
||||
content,
|
||||
saving: true,
|
||||
},
|
||||
}));
|
||||
const response = await fetch('/api/box/file', {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ path, content }),
|
||||
});
|
||||
if (!response.ok) {
|
||||
setFiles((current) => ({
|
||||
...current,
|
||||
[path]: {
|
||||
...(current[path] ?? {
|
||||
path,
|
||||
content,
|
||||
savedContent: '',
|
||||
loading: false,
|
||||
}),
|
||||
saving: false,
|
||||
},
|
||||
}));
|
||||
toast.error('Could not save file.');
|
||||
throw new Error(await response.text());
|
||||
}
|
||||
setFiles((current) => ({
|
||||
...current,
|
||||
[path]: {
|
||||
...(current[path] ?? { path, loading: false }),
|
||||
content,
|
||||
savedContent: content,
|
||||
saving: false,
|
||||
},
|
||||
}));
|
||||
toast.success('File saved.');
|
||||
};
|
||||
|
||||
const saveFile = async (content: string) => {
|
||||
if (!activeFilePath) return;
|
||||
await writeFileContent(activeFilePath, content);
|
||||
};
|
||||
|
||||
const closeFile = (path: string) => {
|
||||
const index = openFilePaths.indexOf(path);
|
||||
const nextOpen = openFilePaths.filter((filePath) => filePath !== path);
|
||||
setOpenFilePaths(nextOpen);
|
||||
setFiles((current) => {
|
||||
const next = { ...current };
|
||||
delete next[path];
|
||||
return next;
|
||||
});
|
||||
if (activeFilePath === path) {
|
||||
setActiveFilePath(nextOpen[index - 1] ?? nextOpen[index] ?? undefined);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleDirectory = (path: string) => {
|
||||
setExpandedDirectoryPaths((current) =>
|
||||
current.includes(path)
|
||||
? current.filter((directoryPath) => directoryPath !== path)
|
||||
: [...current, path],
|
||||
);
|
||||
};
|
||||
|
||||
const activeFile = activeFilePath ? files[activeFilePath] : undefined;
|
||||
const running = Boolean(status?.running);
|
||||
|
||||
return (
|
||||
<main className='space-y-6'>
|
||||
<div>
|
||||
<h1 className='text-3xl font-semibold tracking-normal'>
|
||||
{firstName ? `${firstName}'s Machine` : 'My Machine'}
|
||||
</h1>
|
||||
<p className='text-muted-foreground mt-2'>
|
||||
Your always-available dev box — a persistent home, a terminal, and a
|
||||
file browser rooted at <code className='font-mono'>~</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<BoxStatusCard
|
||||
status={status}
|
||||
pendingAction={pendingAction}
|
||||
onAction={runLifecycle}
|
||||
/>
|
||||
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(value) => setActiveTab(value as 'files' | 'terminal')}
|
||||
className='border-border bg-muted/20 flex h-[calc(100vh-8.5rem)] min-h-[600px] flex-col overflow-hidden rounded-md border'
|
||||
>
|
||||
<TabsList className='border-border bg-muted/30 h-12 flex-none justify-start rounded-none border-b px-3'>
|
||||
<TabsTrigger
|
||||
value='files'
|
||||
className='data-active:bg-background data-active:text-foreground data-active:shadow-sm'
|
||||
>
|
||||
<FolderTree className='size-4' />
|
||||
Files
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value='terminal'
|
||||
className='data-active:bg-background data-active:text-foreground data-active:shadow-sm'
|
||||
>
|
||||
<SquareTerminal className='size-4' />
|
||||
Terminal
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent
|
||||
value='files'
|
||||
className='m-0 grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)]'
|
||||
>
|
||||
<aside className='border-border bg-background min-h-0 border-r'>
|
||||
<div className='border-border border-b p-3'>
|
||||
<h2 className='text-sm font-semibold'>Home</h2>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
Files in your persistent home
|
||||
</p>
|
||||
</div>
|
||||
<FileTree
|
||||
tree={tree}
|
||||
selectedPath={activeFilePath}
|
||||
expandedPaths={expandedDirectoryPaths}
|
||||
onSelect={openFile}
|
||||
onToggleDirectory={toggleDirectory}
|
||||
/>
|
||||
</aside>
|
||||
<section className='bg-background flex min-w-0 flex-col overflow-hidden'>
|
||||
<FileTabs
|
||||
tabs={openFilePaths.map((path) => ({
|
||||
path,
|
||||
dirty: files[path]
|
||||
? files[path].content !== files[path].savedContent
|
||||
: false,
|
||||
}))}
|
||||
activePath={activeFilePath}
|
||||
onActivate={setActiveFilePath}
|
||||
onClose={closeFile}
|
||||
/>
|
||||
<CodeEditor
|
||||
path={activeFilePath}
|
||||
content={activeFile?.content ?? ''}
|
||||
savedContent={activeFile?.savedContent ?? ''}
|
||||
readOnly={false}
|
||||
vimEnabled={vimEnabled}
|
||||
onSave={saveFile}
|
||||
onVimEnabledChange={setVimEnabled}
|
||||
onChange={(content) => {
|
||||
if (!activeFilePath) return;
|
||||
setFiles((current) => ({
|
||||
...current,
|
||||
[activeFilePath]: {
|
||||
...(current[activeFilePath] ?? {
|
||||
path: activeFilePath,
|
||||
savedContent: '',
|
||||
loading: false,
|
||||
saving: false,
|
||||
}),
|
||||
content,
|
||||
},
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
</TabsContent>
|
||||
<TabsContent
|
||||
value='terminal'
|
||||
forceMount
|
||||
className='m-0 min-h-0 flex-1 overflow-hidden data-[state=inactive]:hidden'
|
||||
>
|
||||
<XtermSession
|
||||
active={running}
|
||||
tokenUrl='/api/box/terminal-token'
|
||||
sessionKey={username}
|
||||
waitingLabel='Starting your machine…'
|
||||
label='your machine'
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user