Workspaces layout, automation page
This commit is contained in:
@@ -0,0 +1,162 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { RefreshCw, Download, Circle, Copy, Check } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useClient } from 'hooks/useClient';
|
||||
|
||||
type AppStatus = {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
installed: boolean;
|
||||
version: string | null;
|
||||
running: boolean | null;
|
||||
hasInstall: boolean;
|
||||
hasUpdate: boolean;
|
||||
manualInstallCommand: string | null;
|
||||
manualUpdateCommand: string | null;
|
||||
};
|
||||
|
||||
const CopyCommand = ({ command }: { command: string }) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const copy = () => {
|
||||
navigator.clipboard.writeText(command);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
<code className="flex-1 bg-duck-dark/5 rounded px-2 py-1 text-xs text-duck-dark/70">{command}</code>
|
||||
<button
|
||||
type="button"
|
||||
onClick={copy}
|
||||
className="shrink-0 p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
|
||||
>
|
||||
{copied ? <Check className="h-3.5 w-3.5 text-green-600" /> : <Copy className="h-3.5 w-3.5 text-duck-dark/50" />}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Applications = () => {
|
||||
const client = useClient();
|
||||
const queryClient = useQueryClient();
|
||||
const [actionInProgress, setActionInProgress] = useState<string | null>(null);
|
||||
|
||||
const { data: apps, isLoading } = useQuery({
|
||||
queryKey: ['APPLICATIONS'],
|
||||
queryFn: () => client.get<AppStatus[]>('/server-settings/applications'),
|
||||
});
|
||||
|
||||
const runAction = async (id: string, action: 'install' | 'update') => {
|
||||
setActionInProgress(id);
|
||||
try {
|
||||
await client.post<AppStatus>(`/server-settings/applications/${id}/${action}`);
|
||||
await queryClient.invalidateQueries({ queryKey: ['APPLICATIONS'] });
|
||||
toast.success(`${action === 'install' ? 'Installed' : 'Updated'} successfully`);
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : `${action} failed`;
|
||||
toast.error(message);
|
||||
} finally {
|
||||
setActionInProgress(null);
|
||||
}
|
||||
};
|
||||
|
||||
const getManualCommand = (app: AppStatus): string | null => {
|
||||
if (!app.installed) return app.manualInstallCommand;
|
||||
return app.manualUpdateCommand ?? app.manualInstallCommand;
|
||||
};
|
||||
|
||||
const hasAutoAction = (app: AppStatus): boolean => {
|
||||
if (!app.installed) return app.hasInstall && !app.manualInstallCommand;
|
||||
return app.hasUpdate && !(app.manualUpdateCommand ?? app.manualInstallCommand);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto p-6">
|
||||
<h2 className="text-lg font-bold text-duck-dark mb-4" title="System tools and dependencies used by Officer.dev">Applications</h2>
|
||||
|
||||
{isLoading && <p className="text-sm text-duck-dark/50">Checking applications...</p>}
|
||||
|
||||
{apps && (
|
||||
<div className="flex flex-col gap-3">
|
||||
{apps.map((app: AppStatus) => {
|
||||
const manualCmd = getManualCommand(app);
|
||||
const canAutoRun = hasAutoAction(app);
|
||||
|
||||
return (
|
||||
<div key={app.id} className="flex flex-col rounded-lg border border-duck-dark/10 px-4 py-3">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-duck-dark">{app.name}</span>
|
||||
{app.installed && (
|
||||
<span className="text-xs bg-green-100 text-green-700 rounded-full px-2 py-0.5">
|
||||
{app.version}
|
||||
</span>
|
||||
)}
|
||||
{!app.installed && (
|
||||
<span className="text-xs bg-duck-dark/5 text-duck-dark/40 rounded-full px-2 py-0.5">
|
||||
Not installed
|
||||
</span>
|
||||
)}
|
||||
{app.running !== null && (
|
||||
<Circle
|
||||
className={`h-2.5 w-2.5 ${app.running ? 'fill-green-500 text-green-500' : 'fill-duck-dark/20 text-duck-dark/20'}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-duck-dark/50 mt-0.5">{app.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="shrink-0">
|
||||
{canAutoRun && !app.installed && (
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
|
||||
disabled={actionInProgress === app.id}
|
||||
onClick={() => runAction(app.id, 'install')}
|
||||
>
|
||||
{actionInProgress === app.id ? (
|
||||
<RefreshCw className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{actionInProgress === app.id ? 'Installing...' : 'Install'}
|
||||
</Button>
|
||||
)}
|
||||
{canAutoRun && app.installed && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={actionInProgress === app.id}
|
||||
onClick={() => runAction(app.id, 'update')}
|
||||
>
|
||||
{actionInProgress === app.id ? (
|
||||
<RefreshCw className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{actionInProgress === app.id ? 'Updating...' : 'Update'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{manualCmd && (
|
||||
<div className="mt-2 text-xs text-duck-dark/50">
|
||||
{app.installed ? 'Update' : 'Install'} manually:
|
||||
<CopyCommand command={manualCmd} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
import { Box, AppWindow } from 'lucide-react';
|
||||
|
||||
const sidebarItems = [
|
||||
{ id: 'applications', label: 'Applications', icon: AppWindow },
|
||||
] as const;
|
||||
|
||||
export const ResourceSidebar = () => {
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-y-auto">
|
||||
<div className="p-3 pb-0">
|
||||
<div className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium bg-duck-teal/15 text-duck-teal">
|
||||
<Box className="h-4 w-4" />
|
||||
Resources
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5 px-3 pt-3">
|
||||
{sidebarItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
className="flex items-center gap-2.5 py-2 px-3 rounded-lg text-sm font-medium bg-duck-teal/10 text-duck-dark cursor-default"
|
||||
>
|
||||
<Icon className="h-4 w-4 shrink-0" />
|
||||
<span className="flex-1 text-left">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,212 +1,32 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { RefreshCw, Download, Circle, Copy, Check } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/Card';
|
||||
import { useClient } from 'hooks/useClient';
|
||||
import { useClaude } from '@/Screens/Dashboard/Chat/useClaude';
|
||||
import { useOpenCode } from '@/Screens/Dashboard/Chat/useOpenCode';
|
||||
import { EmbeddableChat } from '@/Screens/Dashboard/Chat/EmbeddableChat';
|
||||
import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
|
||||
import { useMemo } from 'react';
|
||||
import type { LayoutNode, PanelComponents } from '@/components/Workspace';
|
||||
import { WorkspaceLayout } from '@/components/Workspace';
|
||||
import { appRegistry } from '../../Workspaces/app-registry';
|
||||
import { Applications } from './Applications';
|
||||
import { ResourceSidebar } from './ResourceSidebar';
|
||||
|
||||
type AppStatus = {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
installed: boolean;
|
||||
version: string | null;
|
||||
running: boolean | null;
|
||||
hasInstall: boolean;
|
||||
hasUpdate: boolean;
|
||||
manualInstallCommand: string | null;
|
||||
manualUpdateCommand: string | null;
|
||||
};
|
||||
|
||||
const CopyCommand = ({ command }: { command: string }) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const copy = () => {
|
||||
navigator.clipboard.writeText(command);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
<code className="flex-1 bg-duck-dark/5 rounded px-2 py-1 text-xs text-duck-dark/70">{command}</code>
|
||||
<button
|
||||
type="button"
|
||||
onClick={copy}
|
||||
className="shrink-0 p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
|
||||
>
|
||||
{copied ? <Check className="h-3.5 w-3.5 text-green-600" /> : <Copy className="h-3.5 w-3.5 text-duck-dark/50" />}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
const layout: LayoutNode = {
|
||||
type: 'group',
|
||||
id: 'resources-root',
|
||||
direction: 'horizontal',
|
||||
children: [
|
||||
{ node: { type: 'panel', id: 'resources-left', appType: null }, size: 20 },
|
||||
{ node: { type: 'panel', id: 'resources-right', appType: null }, size: 80 },
|
||||
],
|
||||
};
|
||||
|
||||
export const ResourceSettings = () => {
|
||||
const client = useClient();
|
||||
const queryClient = useQueryClient();
|
||||
const [actionInProgress, setActionInProgress] = useState<string | null>(null);
|
||||
|
||||
const { data: apps, isLoading } = useQuery({
|
||||
queryKey: ['APPLICATIONS'],
|
||||
queryFn: () => client.get<AppStatus[]>('/server-settings/applications'),
|
||||
});
|
||||
|
||||
const runAction = async (id: string, action: 'install' | 'update') => {
|
||||
setActionInProgress(id);
|
||||
try {
|
||||
await client.post<AppStatus>(`/server-settings/applications/${id}/${action}`);
|
||||
await queryClient.invalidateQueries({ queryKey: ['APPLICATIONS'] });
|
||||
toast.success(`${action === 'install' ? 'Installed' : 'Updated'} successfully`);
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : `${action} failed`;
|
||||
toast.error(message);
|
||||
} finally {
|
||||
setActionInProgress(null);
|
||||
}
|
||||
};
|
||||
|
||||
const getManualCommand = (app: AppStatus): string | null => {
|
||||
if (!app.installed) return app.manualInstallCommand;
|
||||
return app.manualUpdateCommand ?? app.manualInstallCommand;
|
||||
};
|
||||
|
||||
const hasAutoAction = (app: AppStatus): boolean => {
|
||||
if (!app.installed) return app.hasInstall && !app.manualInstallCommand;
|
||||
return app.hasUpdate && !(app.manualUpdateCommand ?? app.manualInstallCommand);
|
||||
};
|
||||
|
||||
const [provider, setProvider] = useState<'claude' | 'opencode'>('claude');
|
||||
const panelComponents: PanelComponents = useMemo(
|
||||
() => ({
|
||||
'resources-left': ResourceSidebar,
|
||||
'resources-right': Applications,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-full gap-4 px-4 py-8 overflow-hidden">
|
||||
<Card className="w-full max-w-2xl h-fit p-6 overflow-y-auto">
|
||||
<h2 className="text-lg font-bold text-duck-dark mb-1">Applications</h2>
|
||||
<p className="text-sm text-duck-dark/60 mb-6">System tools and dependencies used by Officer.dev</p>
|
||||
|
||||
{isLoading && <p className="text-sm text-duck-dark/50">Checking applications...</p>}
|
||||
|
||||
{apps && (
|
||||
<div className="flex flex-col gap-3">
|
||||
{apps.map((app: AppStatus) => {
|
||||
const manualCmd = getManualCommand(app);
|
||||
const canAutoRun = hasAutoAction(app);
|
||||
|
||||
return (
|
||||
<div key={app.id} className="flex flex-col rounded-lg border border-duck-dark/10 px-4 py-3">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-duck-dark">{app.name}</span>
|
||||
{app.installed && (
|
||||
<span className="text-xs bg-green-100 text-green-700 rounded-full px-2 py-0.5">
|
||||
{app.version}
|
||||
</span>
|
||||
)}
|
||||
{!app.installed && (
|
||||
<span className="text-xs bg-duck-dark/5 text-duck-dark/40 rounded-full px-2 py-0.5">
|
||||
Not installed
|
||||
</span>
|
||||
)}
|
||||
{app.running !== null && (
|
||||
<Circle
|
||||
className={`h-2.5 w-2.5 ${app.running ? 'fill-green-500 text-green-500' : 'fill-duck-dark/20 text-duck-dark/20'}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-duck-dark/50 mt-0.5">{app.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="shrink-0">
|
||||
{canAutoRun && !app.installed && (
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
|
||||
disabled={actionInProgress === app.id}
|
||||
onClick={() => runAction(app.id, 'install')}
|
||||
>
|
||||
{actionInProgress === app.id ? (
|
||||
<RefreshCw className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{actionInProgress === app.id ? 'Installing...' : 'Install'}
|
||||
</Button>
|
||||
)}
|
||||
{canAutoRun && app.installed && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={actionInProgress === app.id}
|
||||
onClick={() => runAction(app.id, 'update')}
|
||||
>
|
||||
{actionInProgress === app.id ? (
|
||||
<RefreshCw className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{actionInProgress === app.id ? 'Updating...' : 'Update'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{manualCmd && (
|
||||
<div className="mt-2 text-xs text-duck-dark/50">
|
||||
{app.installed ? 'Update' : 'Install'} manually:
|
||||
<CopyCommand command={manualCmd} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card className="flex-1 min-w-0 flex flex-col overflow-hidden">
|
||||
{provider === 'claude' ? (
|
||||
<ClaudeChat key="claude" onProviderChange={setProvider} />
|
||||
) : (
|
||||
<OpenCodeChat key="opencode" onProviderChange={setProvider} />
|
||||
)}
|
||||
</Card>
|
||||
<div className="h-full w-full pt-2">
|
||||
<WorkspaceLayout layout={layout} onLayoutChange={() => {}} registry={appRegistry} components={panelComponents} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type ChatInnerProps = {
|
||||
onProviderChange: (p: 'claude' | 'opencode') => void;
|
||||
};
|
||||
|
||||
const ClaudeChat = ({ onProviderChange }: ChatInnerProps) => {
|
||||
const chat = useClaude(undefined, undefined, { replaceUrl: false });
|
||||
const models = useVisibleClaudeModels();
|
||||
return (
|
||||
<EmbeddableChat
|
||||
chat={chat}
|
||||
provider="claude"
|
||||
availableModels={models}
|
||||
onProviderChange={onProviderChange}
|
||||
className="flex-1 min-h-0"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const OpenCodeChat = ({ onProviderChange }: ChatInnerProps) => {
|
||||
const chat = useOpenCode(undefined, undefined, { replaceUrl: false });
|
||||
const models = useVisibleOpenCodeModels();
|
||||
return (
|
||||
<EmbeddableChat
|
||||
chat={chat}
|
||||
provider="opencode"
|
||||
availableModels={models}
|
||||
onProviderChange={onProviderChange}
|
||||
className="flex-1 min-h-0"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user