feat: workspace frontend core (PR-3)

- Workspace types, API client, hooks (useWorkspaces, useWorkspaceActions)
- WorkspaceCard, WorkspaceCreateForm, StartToolModal components
- WorkspacesPage with list, create, sync, delete, start-tool flow
- Sidebar navigation: new 'Workspaces' entry
- Router: /workspaces route
- TypeScript + eslint clean

apps/web/src/hooks/use-workspace-actions.ts

@@ -0,0 +1,146 @@
+/** Hook for workspace CRUD actions with confirmation handling. */
+
+import { useState, useCallback } from "react";
+import {
+  createWorkspace,
+  deleteWorkspace,
+  syncWorkspace,
+  updateWorkspace,
+} from "../api/workspaces";
+import type { Workspace, CreateWorkspaceRequest } from "../types/workspace";
+
+export interface UseWorkspaceActionsResult {
+  loadingId: string | null;
+  create: (
+    projectId: string,
+    repoId: string,
+    data: CreateWorkspaceRequest,
+  ) => Promise<Workspace>;
+  delete: (
+    projectId: string,
+    repoId: string,
+    workspace: Workspace,
+    onRefresh: () => Promise<void>,
+  ) => Promise<void>;
+  sync: (
+    projectId: string,
+    repoId: string,
+    workspace: Workspace,
+    onRefresh: () => Promise<void>,
+  ) => Promise<void>;
+  update: (
+    projectId: string,
+    repoId: string,
+    workspaceId: string,
+    data: Partial<CreateWorkspaceRequest>,
+  ) => Promise<Workspace>;
+}
+
+interface ApiError {
+  response?: {
+    status?: number;
+    data?: {
+      detail?: {
+        message?: string;
+        instances?: Array<{ id: string; name: string }>;
+        branch_deleted?: boolean;
+      };
+    };
+  };
+}
+
+export function useWorkspaceActions(): UseWorkspaceActionsResult {
+  const [loadingId, setLoadingId] = useState<string | null>(null);
+
+  const create = useCallback(
+    async (projectId: string, repoId: string, data: CreateWorkspaceRequest) => {
+      return createWorkspace(projectId, repoId, data);
+    },
+    [],
+  );
+
+  const deleteAction = useCallback(
+    async (
+      projectId: string,
+      repoId: string,
+      workspace: Workspace,
+      onRefresh: () => Promise<void>,
+    ) => {
+      setLoadingId(workspace.id);
+      try {
+        await deleteWorkspace(projectId, repoId, workspace.id);
+        await onRefresh();
+      } catch (err) {
+        const error = err as ApiError;
+        if (error.response?.status === 409) {
+          const detail = error.response.data?.detail;
+          const instances = detail?.instances || [];
+          const confirmed = window.confirm(
+            `This workspace has ${instances.length} running tool instance(s):\n` +
+              instances.map((i) => `- ${i.name}`).join("\n") +
+              `\n\nDelete workspace and all instances?`,
+          );
+          if (confirmed) {
+            await deleteWorkspace(projectId, repoId, workspace.id, true);
+            await onRefresh();
+          }
+        } else {
+          throw err;
+        }
+      } finally {
+        setLoadingId(null);
+      }
+    },
+    [],
+  );
+
+  const sync = useCallback(
+    async (
+      projectId: string,
+      repoId: string,
+      workspace: Workspace,
+      onRefresh: () => Promise<void>,
+    ) => {
+      setLoadingId(workspace.id);
+      try {
+        await syncWorkspace(projectId, repoId, workspace.id);
+        await onRefresh();
+      } catch (err) {
+        const error = err as ApiError;
+        if (error.response?.status === 409 && error.response.data?.detail?.branch_deleted) {
+          const message = error.response.data.detail.message || "Branch was deleted from remote";
+          const confirmed = window.confirm(`${message}\n\nDelete this workspace?`);
+          if (confirmed) {
+            await deleteWorkspace(projectId, repoId, workspace.id, true);
+            await onRefresh();
+          }
+        } else {
+          throw err;
+        }
+      } finally {
+        setLoadingId(null);
+      }
+    },
+    [],
+  );
+
+  const update = useCallback(
+    async (
+      projectId: string,
+      repoId: string,
+      workspaceId: string,
+      data: Partial<CreateWorkspaceRequest>,
+    ) => {
+      return updateWorkspace(projectId, repoId, workspaceId, data);
+    },
+    [],
+  );
+
+  return {
+    loadingId,
+    create,
+    delete: deleteAction,
+    sync,
+    update,
+  };
+}

apps/web/src/hooks/use-workspaces.ts

@@ -0,0 +1,37 @@
+/** Hook for fetching workspaces. */
+
+import { useCallback, useEffect, useState } from "react";
+import { listWorkspaces } from "../api/workspaces";
+import type { Workspace } from "../types/workspace";
+
+export interface UseWorkspacesResult {
+  workspaces: Workspace[];
+  loading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+}
+
+export function useWorkspaces(projectId: string, repoId: string): UseWorkspacesResult {
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await listWorkspaces(projectId, repoId);
+      setWorkspaces(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load workspaces");
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, repoId]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return { workspaces, loading, error, refresh };
+}