feat: add instance list component and integrate into workspace

- Create InstanceList component with create/start/stop/restart/delete
- Add tool instance icons (external, play, stop)
- Integrate InstanceList into RepoWorkspace sidebar
- Load tool types for instance creation
- Add instance-specific CSS styles

Quality gates: typecheck ✓, lint ✓, build ✓
This commit is contained in:
Fusion
2026-05-19 20:50:08 +02:00
parent c795f8f873
commit f997b3f7c5
5 changed files with 354 additions and 3 deletions
+22 -1
View File
@@ -13,7 +13,10 @@ import {
import { CommitPanel } from "../components/commit-panel";
import { FileEditor } from "../components/file-editor";
import { GitToolbar } from "../components/git-toolbar";
import { InstanceList } from "../components/instance-list";
import { WorkspaceHeader } from "../components/workspace-header";
import { listToolTypes } from "../api/tool_types";
import type { ToolType } from "../api/tool_types";
type WorkspaceStatus = "loading" | "ready" | "error" | "empty";
@@ -50,6 +53,7 @@ export const RepoWorkspace = () => {
const [branches, setBranches] = useState<string[]>([]);
const [currentBranch, setCurrentBranch] = useState<string>("main");
const [gitStatus, setGitStatus] = useState<GitStatus | null>(null);
const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
const loadProject = useCallback(async () => {
if (!projectId) return;
@@ -114,10 +118,20 @@ export const RepoWorkspace = () => {
}
}, [projectId, selectedRepoId]);
const loadToolTypes = useCallback(async () => {
try {
const data = await listToolTypes();
setToolTypes(data);
} catch {
setToolTypes([]);
}
}, []);
useEffect(() => {
void loadProject();
void loadRepositories();
}, [loadProject, loadRepositories]);
void loadToolTypes();
}, [loadProject, loadRepositories, loadToolTypes]);
useEffect(() => {
void loadBranches();
@@ -234,6 +248,13 @@ export const RepoWorkspace = () => {
}}
/>
)}
{selectedRepoId && (
<InstanceList
projectId={projectId!}
repoId={selectedRepoId}
toolTypes={toolTypes}
/>
)}
</>
)}
</aside>