Add execution workspace close readiness and UI

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-06-17 03:10:38 +09:00 · 2026-03-28 16:15:20 -05:00 · 2026-03-28 16:15:20 -05:00 · f1ad07616c
commit f1ad07616c
parent 868cfa8c50
14 changed files with 1342 additions and 106 deletions
--- a/ui/src/api/execution-workspaces.ts
+++ b/ui/src/api/execution-workspaces.ts
@ -1,4 +1,4 @@
-import type { ExecutionWorkspace } from "@paperclipai/shared";
+import type { ExecutionWorkspace, ExecutionWorkspaceCloseReadiness } from "@paperclipai/shared";
 import { api } from "./client";

 export const executionWorkspacesApi = {
@ -22,5 +22,7 @@ export const executionWorkspacesApi = {
    return api.get<ExecutionWorkspace[]>(`/companies/${companyId}/execution-workspaces${qs ? `?${qs}` : ""}`);
  },
  get: (id: string) => api.get<ExecutionWorkspace>(`/execution-workspaces/${id}`),
+  getCloseReadiness: (id: string) =>
+    api.get<ExecutionWorkspaceCloseReadiness>(`/execution-workspaces/${id}/close-readiness`),
  update: (id: string, data: Record<string, unknown>) => api.patch<ExecutionWorkspace>(`/execution-workspaces/${id}`, data),
 };
--- a/ui/src/components/ExecutionWorkspaceCloseDialog.tsx
+++ b/ui/src/components/ExecutionWorkspaceCloseDialog.tsx
@ -0,0 +1,292 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { ExecutionWorkspace } from "@paperclipai/shared";
+import { Link } from "@/lib/router";
+import { Loader2 } from "lucide-react";
+import { executionWorkspacesApi } from "../api/execution-workspaces";
+import { useToast } from "../context/ToastContext";
+import { queryKeys } from "../lib/queryKeys";
+import { formatDateTime, issueUrl } from "../lib/utils";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+
+type ExecutionWorkspaceCloseDialogProps = {
+  workspaceId: string;
+  workspaceName: string;
+  currentStatus: ExecutionWorkspace["status"];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onClosed?: (workspace: ExecutionWorkspace) => void;
+};
+
+function readinessTone(state: "ready" | "ready_with_warnings" | "blocked") {
+  if (state === "blocked") {
+    return "border-destructive/30 bg-destructive/5 text-destructive";
+  }
+  if (state === "ready_with_warnings") {
+    return "border-amber-500/30 bg-amber-500/10 text-amber-800 dark:text-amber-300";
+  }
+  return "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
+}
+
+export function ExecutionWorkspaceCloseDialog({
+  workspaceId,
+  workspaceName,
+  currentStatus,
+  open,
+  onOpenChange,
+  onClosed,
+}: ExecutionWorkspaceCloseDialogProps) {
+  const queryClient = useQueryClient();
+  const { pushToast } = useToast();
+  const actionLabel = currentStatus === "cleanup_failed" ? "Retry close" : "Close workspace";
+
+  const readinessQuery = useQuery({
+    queryKey: queryKeys.executionWorkspaces.closeReadiness(workspaceId),
+    queryFn: () => executionWorkspacesApi.getCloseReadiness(workspaceId),
+    enabled: open,
+  });
+
+  const closeWorkspace = useMutation({
+    mutationFn: () => executionWorkspacesApi.update(workspaceId, { status: "archived" }),
+    onSuccess: (workspace) => {
+      queryClient.setQueryData(queryKeys.executionWorkspaces.detail(workspace.id), workspace);
+      queryClient.invalidateQueries({ queryKey: queryKeys.executionWorkspaces.closeReadiness(workspace.id) });
+      pushToast({
+        title: currentStatus === "cleanup_failed" ? "Workspace close retried" : "Workspace closed",
+        tone: "success",
+      });
+      onOpenChange(false);
+      onClosed?.(workspace);
+    },
+    onError: (error) => {
+      pushToast({
+        title: "Failed to close workspace",
+        body: error instanceof Error ? error.message : "Unknown error",
+        tone: "error",
+      });
+    },
+  });
+
+  const readiness = readinessQuery.data ?? null;
+  const confirmDisabled =
+    currentStatus === "archived" ||
+    closeWorkspace.isPending ||
+    readinessQuery.isLoading ||
+    readiness == null ||
+    readiness.state === "blocked";
+
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => {
+      if (!closeWorkspace.isPending) onOpenChange(nextOpen);
+    }}>
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{actionLabel}</DialogTitle>
+          <DialogDescription>
+            Archive <span className="font-medium text-foreground">{workspaceName}</span> and clean up any owned workspace
+            artifacts. Paperclip keeps the workspace record and issue history, but removes it from active workspace views.
+          </DialogDescription>
+        </DialogHeader>
+
+        {readinessQuery.isLoading ? (
+          <div className="flex items-center gap-2 rounded-xl border border-border bg-muted/30 px-4 py-3 text-sm text-muted-foreground">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Checking whether this workspace is safe to close...
+          </div>
+        ) : readinessQuery.error ? (
+          <div className="rounded-xl border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+            {readinessQuery.error instanceof Error ? readinessQuery.error.message : "Failed to inspect workspace close readiness."}
+          </div>
+        ) : readiness ? (
+          <div className="space-y-4">
+            <div className={`rounded-xl border px-4 py-3 text-sm ${readinessTone(readiness.state)}`}>
+              <div className="font-medium">
+                {readiness.state === "blocked"
+                  ? "Close is blocked"
+                  : readiness.state === "ready_with_warnings"
+                    ? "Close is allowed with warnings"
+                    : "Close is ready"}
+              </div>
+              <div className="mt-1 text-xs opacity-80">
+                {readiness.isSharedWorkspace
+                  ? "This workspace is attached to shared project infrastructure."
+                  : readiness.isProjectPrimaryWorkspace
+                    ? "This workspace is based on the project's primary workspace."
+                    : "This workspace is disposable and can be archived."}
+              </div>
+            </div>
+
+            {readiness.blockingReasons.length > 0 ? (
+              <section className="space-y-2">
+                <h3 className="text-sm font-medium">Blocking reasons</h3>
+                <ul className="space-y-2 text-sm text-muted-foreground">
+                  {readiness.blockingReasons.map((reason) => (
+                    <li key={reason} className="rounded-lg border border-destructive/20 bg-destructive/5 px-3 py-2 text-destructive">
+                      {reason}
+                    </li>
+                  ))}
+                </ul>
+              </section>
+            ) : null}
+
+            {readiness.warnings.length > 0 ? (
+              <section className="space-y-2">
+                <h3 className="text-sm font-medium">Warnings</h3>
+                <ul className="space-y-2 text-sm text-muted-foreground">
+                  {readiness.warnings.map((warning) => (
+                    <li key={warning} className="rounded-lg border border-amber-500/20 bg-amber-500/5 px-3 py-2">
+                      {warning}
+                    </li>
+                  ))}
+                </ul>
+              </section>
+            ) : null}
+
+            {readiness.git ? (
+              <section className="space-y-2">
+                <h3 className="text-sm font-medium">Git status</h3>
+                <div className="rounded-xl border border-border bg-muted/20 px-4 py-3 text-sm">
+                  <div className="grid gap-2 sm:grid-cols-2">
+                    <div>
+                      <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">Branch</div>
+                      <div className="font-mono text-xs">{readiness.git.branchName ?? "Unknown"}</div>
+                    </div>
+                    <div>
+                      <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">Base ref</div>
+                      <div className="font-mono text-xs">{readiness.git.baseRef ?? "Not set"}</div>
+                    </div>
+                    <div>
+                      <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">Merged into base</div>
+                      <div>{readiness.git.isMergedIntoBase == null ? "Unknown" : readiness.git.isMergedIntoBase ? "Yes" : "No"}</div>
+                    </div>
+                    <div>
+                      <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">Ahead / behind</div>
+                      <div>
+                        {(readiness.git.aheadCount ?? 0).toString()} / {(readiness.git.behindCount ?? 0).toString()}
+                      </div>
+                    </div>
+                    <div>
+                      <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">Dirty tracked files</div>
+                      <div>{readiness.git.dirtyEntryCount}</div>
+                    </div>
+                    <div>
+                      <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">Untracked files</div>
+                      <div>{readiness.git.untrackedEntryCount}</div>
+                    </div>
+                  </div>
+                </div>
+              </section>
+            ) : null}
+
+            {readiness.linkedIssues.length > 0 ? (
+              <section className="space-y-2">
+                <h3 className="text-sm font-medium">Linked issues</h3>
+                <div className="space-y-2">
+                  {readiness.linkedIssues.map((issue) => (
+                    <div key={issue.id} className="rounded-xl border border-border bg-muted/20 px-4 py-3 text-sm">
+                      <div className="flex flex-wrap items-center justify-between gap-2">
+                        <Link to={issueUrl(issue)} className="font-medium hover:underline">
+                          {issue.identifier ?? issue.id} · {issue.title}
+                        </Link>
+                        <span className="text-xs text-muted-foreground">{issue.status}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            ) : null}
+
+            {readiness.runtimeServices.length > 0 ? (
+              <section className="space-y-2">
+                <h3 className="text-sm font-medium">Attached runtime services</h3>
+                <div className="space-y-2">
+                  {readiness.runtimeServices.map((service) => (
+                    <div key={service.id} className="rounded-xl border border-border bg-muted/20 px-4 py-3 text-sm">
+                      <div className="flex flex-wrap items-center justify-between gap-2">
+                        <span className="font-medium">{service.serviceName}</span>
+                        <span className="text-xs text-muted-foreground">{service.status} · {service.lifecycle}</span>
+                      </div>
+                      <div className="mt-1 text-xs text-muted-foreground">
+                        {service.url ?? service.command ?? service.cwd ?? "No additional details"}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            ) : null}
+
+            <section className="space-y-2">
+              <h3 className="text-sm font-medium">Cleanup actions</h3>
+              <div className="space-y-2">
+                {readiness.plannedActions.map((action, index) => (
+                  <div key={`${action.kind}-${index}`} className="rounded-xl border border-border bg-muted/20 px-4 py-3 text-sm">
+                    <div className="font-medium">{action.label}</div>
+                    <div className="mt-1 text-muted-foreground">{action.description}</div>
+                    {action.command ? (
+                      <pre className="mt-2 overflow-x-auto rounded-lg bg-background px-3 py-2 font-mono text-xs text-foreground">
+                        {action.command}
+                      </pre>
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            {currentStatus === "cleanup_failed" ? (
+              <div className="rounded-xl border border-amber-500/20 bg-amber-500/5 px-4 py-3 text-sm text-muted-foreground">
+                Cleanup previously failed on this workspace. Retrying close will rerun the cleanup flow and update the
+                workspace status if it succeeds.
+              </div>
+            ) : null}
+
+            {currentStatus === "archived" ? (
+              <div className="rounded-xl border border-border bg-muted/20 px-4 py-3 text-sm text-muted-foreground">
+                This workspace is already archived.
+              </div>
+            ) : null}
+
+            {readiness.git?.repoRoot ? (
+              <div className="text-xs text-muted-foreground">
+                Repo root: <span className="font-mono">{readiness.git.repoRoot}</span>
+                {readiness.git.workspacePath ? (
+                  <>
+                    {" · "}Workspace path: <span className="font-mono">{readiness.git.workspacePath}</span>
+                  </>
+                ) : null}
+              </div>
+            ) : null}
+
+            <div className="text-xs text-muted-foreground">
+              Last checked {formatDateTime(new Date())}
+            </div>
+          </div>
+        ) : null}
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={closeWorkspace.isPending}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant={currentStatus === "cleanup_failed" ? "default" : "destructive"}
+            onClick={() => closeWorkspace.mutate()}
+            disabled={confirmDisabled}
+          >
+            {closeWorkspace.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+            {actionLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/ui/src/lib/project-workspaces-tab.ts
+++ b/ui/src/lib/project-workspaces-tab.ts
@ -12,6 +12,7 @@ export interface ProjectWorkspaceSummary {
  lastUpdatedAt: Date;
  projectWorkspaceId: string | null;
  executionWorkspaceId: string | null;
+  executionWorkspaceStatus: ExecutionWorkspace["status"] | null;
  issues: Issue[];
 }

@ -65,6 +66,7 @@ export function buildProjectWorkspaceSummaries(input: {
    if (issue.executionWorkspaceId) {
      const executionWorkspace = executionWorkspacesById.get(issue.executionWorkspaceId);
      if (!executionWorkspace) continue;
+      if (executionWorkspace.status === "archived") continue;
      if (isDefaultSharedExecutionWorkspace({
        executionWorkspace,
        issue,
@ -91,6 +93,7 @@ export function buildProjectWorkspaceSummaries(input: {
        ),
        projectWorkspaceId: executionWorkspace.projectWorkspaceId ?? issue.projectWorkspaceId ?? null,
        executionWorkspaceId: executionWorkspace.id,
+        executionWorkspaceStatus: executionWorkspace.status,
        issues: nextIssues,
      });
      continue;
@ -115,6 +118,7 @@ export function buildProjectWorkspaceSummaries(input: {
      lastUpdatedAt: maxDate(existing?.lastUpdatedAt, projectWorkspace.updatedAt, issue.updatedAt),
      projectWorkspaceId: projectWorkspace.id,
      executionWorkspaceId: null,
+      executionWorkspaceStatus: null,
      issues: nextIssues,
    });
  }
--- a/ui/src/lib/queryKeys.ts
+++ b/ui/src/lib/queryKeys.ts
@ -61,6 +61,7 @@ export const queryKeys = {
    list: (companyId: string, filters?: Record<string, string | boolean | undefined>) =>
      ["execution-workspaces", companyId, filters ?? {}] as const,
    detail: (id: string) => ["execution-workspaces", "detail", id] as const,
+    closeReadiness: (id: string) => ["execution-workspaces", "close-readiness", id] as const,
  },
  projects: {
    list: (companyId: string) => ["projects", companyId] as const,
--- a/ui/src/pages/ExecutionWorkspaceDetail.tsx
+++ b/ui/src/pages/ExecutionWorkspaceDetail.tsx
@ -6,6 +6,7 @@ import { ArrowLeft, Check, Copy, ExternalLink, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { CopyText } from "../components/CopyText";
+import { ExecutionWorkspaceCloseDialog } from "../components/ExecutionWorkspaceCloseDialog";
 import { executionWorkspacesApi } from "../api/execution-workspaces";
 import { issuesApi } from "../api/issues";
 import { projectsApi } from "../api/projects";
@ -211,6 +212,7 @@ export function ExecutionWorkspaceDetail() {
  const { setBreadcrumbs } = useBreadcrumbs();
  const { selectedCompanyId, setSelectedCompanyId } = useCompany();
  const [form, setForm] = useState<WorkspaceFormState | null>(null);
+  const [closeDialogOpen, setCloseDialogOpen] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  const workspaceQuery = useQuery({
@ -278,6 +280,7 @@ export function ExecutionWorkspaceDetail() {
    mutationFn: (patch: Record<string, unknown>) => executionWorkspacesApi.update(workspace!.id, patch),
    onSuccess: (nextWorkspace) => {
      queryClient.setQueryData(queryKeys.executionWorkspaces.detail(nextWorkspace.id), nextWorkspace);
+      queryClient.invalidateQueries({ queryKey: queryKeys.executionWorkspaces.closeReadiness(nextWorkspace.id) });
      if (project) {
        queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(project.id) });
        queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(project.urlKey) });
@ -322,8 +325,9 @@ export function ExecutionWorkspaceDetail() {
  };

  return (
-    <div className="mx-auto max-w-5xl space-y-6">
-      <div className="flex flex-wrap items-center gap-3">
+    <>
+      <div className="mx-auto max-w-5xl space-y-6">
+        <div className="flex flex-wrap items-center gap-3">
        <Button variant="ghost" size="sm" asChild>
          <Link to={project ? `/projects/${projectRef}/workspaces` : "/projects"}>
            <ArrowLeft className="mr-1 h-4 w-4" />
@ -337,9 +341,9 @@ export function ExecutionWorkspaceDetail() {
        </StatusPill>
      </div>

-      <div className="grid gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(18rem,0.95fr)]">
-        <div className="space-y-6">
-          <div className="rounded-2xl border border-border bg-card p-5">
+        <div className="grid gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(18rem,0.95fr)]">
+          <div className="space-y-6">
+            <div className="rounded-2xl border border-border bg-card p-5">
            <div className="flex flex-wrap items-start justify-between gap-4">
              <div className="space-y-2">
                <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
@ -352,6 +356,15 @@ export function ExecutionWorkspaceDetail() {
                  and runtime-service behavior in sync with the actual workspace being reused.
                </p>
              </div>
+              <div className="flex shrink-0 items-center gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setCloseDialogOpen(true)}
+                  disabled={workspace.status === "archived"}
+                >
+                  {workspace.status === "cleanup_failed" ? "Retry close" : "Close workspace"}
+                </Button>
+              </div>
            </div>

            <Separator className="my-5" />
@ -474,7 +487,7 @@ export function ExecutionWorkspaceDetail() {
        </div>

        <div className="space-y-6">
-          <div className="rounded-2xl border border-border bg-card p-5">
+            <div className="rounded-2xl border border-border bg-card p-5">
            <div className="space-y-1">
              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Linked objects</div>
              <h2 className="text-lg font-semibold">Workspace context</h2>
@ -519,7 +532,7 @@ export function ExecutionWorkspaceDetail() {
            </DetailRow>
          </div>

-          <div className="rounded-2xl border border-border bg-card p-5">
+            <div className="rounded-2xl border border-border bg-card p-5">
            <div className="space-y-1">
              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Paths and refs</div>
              <h2 className="text-lg font-semibold">Concrete location</h2>
@ -563,7 +576,7 @@ export function ExecutionWorkspaceDetail() {
            </DetailRow>
          </div>

-          <div className="rounded-2xl border border-border bg-card p-5">
+            <div className="rounded-2xl border border-border bg-card p-5">
            <div className="space-y-1">
              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Runtime services</div>
              <h2 className="text-lg font-semibold">Attached services</h2>
@ -597,8 +610,27 @@ export function ExecutionWorkspaceDetail() {
              <p className="text-sm text-muted-foreground">No runtime services are attached to this execution workspace.</p>
            )}
          </div>
+          </div>
        </div>
      </div>
-    </div>
+      <ExecutionWorkspaceCloseDialog
+        workspaceId={workspace.id}
+        workspaceName={workspace.name}
+        currentStatus={workspace.status}
+        open={closeDialogOpen}
+        onOpenChange={setCloseDialogOpen}
+        onClosed={(nextWorkspace) => {
+          queryClient.setQueryData(queryKeys.executionWorkspaces.detail(nextWorkspace.id), nextWorkspace);
+          queryClient.invalidateQueries({ queryKey: queryKeys.executionWorkspaces.closeReadiness(nextWorkspace.id) });
+          if (project) {
+            queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(project.id) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.executionWorkspaces.list(project.companyId, { projectId: project.id }) });
+          }
+          if (sourceIssue) {
+            queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(sourceIssue.id) });
+          }
+        }}
+      />
+    </>
  );
 }
--- a/ui/src/pages/ProjectDetail.tsx
+++ b/ui/src/pages/ProjectDetail.tsx
@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState, useRef } from "react";
 import { Link, useParams, useNavigate, useLocation, Navigate } from "@/lib/router";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { PROJECT_COLORS, isUuidLike, type BudgetPolicySummary } from "@paperclipai/shared";
+import { PROJECT_COLORS, isUuidLike, type BudgetPolicySummary, type ExecutionWorkspace } from "@paperclipai/shared";
 import { budgetsApi } from "../api/budgets";
 import { executionWorkspacesApi } from "../api/execution-workspaces";
 import { instanceSettingsApi } from "../api/instanceSettings";
@ -20,12 +20,14 @@ import { CopyText } from "../components/CopyText";
 import { InlineEditor } from "../components/InlineEditor";
 import { StatusBadge } from "../components/StatusBadge";
 import { BudgetPolicyCard } from "../components/BudgetPolicyCard";
+import { ExecutionWorkspaceCloseDialog } from "../components/ExecutionWorkspaceCloseDialog";
 import { IssuesList } from "../components/IssuesList";
 import { PageSkeleton } from "../components/PageSkeleton";
 import { PageTabBar } from "../components/PageTabBar";
 import { buildProjectWorkspaceSummaries } from "../lib/project-workspaces-tab";
 import { projectRouteRef, projectWorkspaceUrl } from "../lib/utils";
 import { timeAgo } from "../lib/timeAgo";
+import { Button } from "@/components/ui/button";
 import { Tabs } from "@/components/ui/tabs";
 import { PluginLauncherOutlet } from "@/plugins/launchers";
 import { PluginSlotMount, PluginSlotOutlet, usePluginSlots } from "@/plugins/slots";
@ -208,101 +210,166 @@ function ProjectIssuesList({ projectId, companyId }: { projectId: string; compan
 }

 function ProjectWorkspacesContent({
+  companyId,
+  projectId,
  projectRef,
  summaries,
 }: {
+  companyId: string;
+  projectId: string;
  projectRef: string;
  summaries: ReturnType<typeof buildProjectWorkspaceSummaries>;
 }) {
+  const queryClient = useQueryClient();
+  const [closingWorkspace, setClosingWorkspace] = useState<{
+    id: string;
+    name: string;
+    status: ExecutionWorkspace["status"];
+  } | null>(null);
+
  if (summaries.length === 0) {
    return <p className="text-sm text-muted-foreground">No non-default workspace activity yet.</p>;
  }

-  return (
-    <div className="overflow-hidden rounded-xl border border-border bg-card">
-      {summaries.map((summary) => {
-        const visibleIssues = summary.issues.slice(0, 3);
-        const hiddenIssueCount = Math.max(summary.issues.length - visibleIssues.length, 0);
-        const workspaceHref =
-          summary.kind === "project_workspace"
-            ? projectWorkspaceUrl({ id: projectRef, urlKey: projectRef }, summary.workspaceId)
-            : `/execution-workspaces/${summary.workspaceId}`;
+  const activeSummaries = summaries.filter((summary) => summary.executionWorkspaceStatus !== "cleanup_failed");
+  const cleanupFailedSummaries = summaries.filter((summary) => summary.executionWorkspaceStatus === "cleanup_failed");

-        return (
-          <div
-            key={summary.key}
-            className="border-b border-border px-4 py-3 last:border-b-0"
-          >
-            <div className="grid gap-4 md:grid-cols-[minmax(0,18rem)_minmax(0,1fr)_auto] md:items-start">
-              <div className="min-w-0">
+  const renderSummaryRow = (summary: ReturnType<typeof buildProjectWorkspaceSummaries>[number]) => {
+    const visibleIssues = summary.issues.slice(0, 3);
+    const hiddenIssueCount = Math.max(summary.issues.length - visibleIssues.length, 0);
+    const workspaceHref =
+      summary.kind === "project_workspace"
+        ? projectWorkspaceUrl({ id: projectRef, urlKey: projectRef }, summary.workspaceId)
+        : `/execution-workspaces/${summary.workspaceId}`;
+
+    return (
+      <div
+        key={summary.key}
+        className="border-b border-border px-4 py-3 last:border-b-0"
+      >
+        <div className="grid gap-4 md:grid-cols-[minmax(0,18rem)_minmax(0,1fr)_auto] md:items-start">
+          <div className="min-w-0">
+            <Link
+              to={workspaceHref}
+              className="block truncate text-sm font-medium hover:underline"
+            >
+              {summary.workspaceName}
+            </Link>
+
+            <div className="mt-1 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+              <span className="inline-flex items-center gap-1">
+                <GitBranch className="h-3.5 w-3.5" />
+                <span className="font-mono">{summary.branchName ?? "No branch info"}</span>
+              </span>
+              {summary.executionWorkspaceStatus ? (
+                <span className="rounded-full border border-border px-2 py-0.5 text-[11px]">
+                  {summary.executionWorkspaceStatus}
+                </span>
+              ) : null}
+            </div>
+
+            {summary.cwd ? (
+              <div className="mt-2 flex min-w-0 items-start gap-2 text-xs text-muted-foreground">
+                <span className="min-w-0 truncate font-mono leading-tight" title={summary.cwd}>
+                  {summary.cwd}
+                </span>
+                <CopyText text={summary.cwd} className="shrink-0" copiedLabel="Path copied">
+                  <Copy className="h-3.5 w-3.5" />
+                </CopyText>
+              </div>
+            ) : null}
+          </div>
+
+          <div className="min-w-0">
+            <div className="mb-2 text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
+              Issues ({summary.issues.length})
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {visibleIssues.map((issue) => (
                <Link
-                  to={workspaceHref}
-                  className="block truncate text-sm font-medium hover:underline"
+                  key={issue.id}
+                  to={`/issues/${issue.identifier ?? issue.id}`}
+                  className="inline-flex max-w-full items-center gap-2 rounded-md border border-border bg-background px-2.5 py-1.5 text-left text-xs leading-none transition-colors hover:bg-accent"
                >
-                  {summary.workspaceName}
-                </Link>
-
-                <div className="mt-1 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
-                  <span className="inline-flex items-center gap-1">
-                    <GitBranch className="h-3.5 w-3.5" />
-                    <span className="font-mono">{summary.branchName ?? "No branch info"}</span>
+                  <span className="shrink-0 font-mono text-[11px] text-muted-foreground">
+                    {issue.identifier ?? issue.id.slice(0, 8)}
                  </span>
-                </div>
-
-                {summary.cwd ? (
-                  <div className="mt-2 flex min-w-0 items-start gap-2 text-xs text-muted-foreground">
-                    <span className="min-w-0 truncate font-mono leading-tight" title={summary.cwd}>
-                      {summary.cwd}
-                    </span>
-                    <CopyText text={summary.cwd} className="shrink-0" copiedLabel="Path copied">
-                      <Copy className="h-3.5 w-3.5" />
-                    </CopyText>
-                  </div>
-                ) : null}
-              </div>
-
-              <div className="min-w-0">
-                <div className="mb-2 text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
-                  Issues ({summary.issues.length})
-                </div>
-                <div className="flex flex-wrap gap-2">
-                  {visibleIssues.map((issue) => (
-                    <Link
-                      key={issue.id}
-                      to={`/issues/${issue.identifier ?? issue.id}`}
-                      className="inline-flex max-w-full items-center gap-2 rounded-md border border-border bg-background px-2.5 py-1.5 text-left text-xs leading-none transition-colors hover:bg-accent"
-                    >
-                      <span className="shrink-0 font-mono text-[11px] text-muted-foreground">
-                        {issue.identifier ?? issue.id.slice(0, 8)}
-                      </span>
-                      <span className="truncate leading-tight">{issue.title}</span>
-                    </Link>
-                  ))}
-                  {hiddenIssueCount > 0 ? (
-                    <span className="inline-flex items-center rounded-md border border-dashed border-border px-2.5 py-1.5 text-xs text-muted-foreground">
-                      ... and {hiddenIssueCount} more
-                    </span>
-                  ) : null}
-                </div>
-              </div>
-
-              <div className="flex shrink-0 flex-col items-start gap-2 md:items-end">
-                <Link
-                  to={workspaceHref}
-                  className="text-xs font-medium text-foreground hover:underline"
-                >
-                  {summary.kind === "project_workspace" ? "Configure workspace" : "View workspace"}
+                  <span className="truncate leading-tight">{issue.title}</span>
                </Link>
-                <div className="inline-flex items-center gap-1 text-xs text-muted-foreground">
-                  <Clock3 className="h-3.5 w-3.5" />
-                  {timeAgo(summary.lastUpdatedAt)}
-                </div>
-              </div>
+              ))}
+              {hiddenIssueCount > 0 ? (
+                <span className="inline-flex items-center rounded-md border border-dashed border-border px-2.5 py-1.5 text-xs text-muted-foreground">
+                  ... and {hiddenIssueCount} more
+                </span>
+              ) : null}
            </div>
          </div>
-        );
-      })}
-    </div>
+
+          <div className="flex shrink-0 flex-col items-start gap-2 md:items-end">
+            <Link
+              to={workspaceHref}
+              className="text-xs font-medium text-foreground hover:underline"
+            >
+              {summary.kind === "project_workspace" ? "Configure workspace" : "View workspace"}
+            </Link>
+            {summary.kind === "execution_workspace" && summary.executionWorkspaceId && summary.executionWorkspaceStatus ? (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setClosingWorkspace({
+                  id: summary.executionWorkspaceId!,
+                  name: summary.workspaceName,
+                  status: summary.executionWorkspaceStatus!,
+                })}
+              >
+                {summary.executionWorkspaceStatus === "cleanup_failed" ? "Retry close" : "Close workspace"}
+              </Button>
+            ) : null}
+            <div className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+              <Clock3 className="h-3.5 w-3.5" />
+              {timeAgo(summary.lastUpdatedAt)}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className="space-y-4">
+        <div className="overflow-hidden rounded-xl border border-border bg-card">
+          {activeSummaries.map(renderSummaryRow)}
+        </div>
+        {cleanupFailedSummaries.length > 0 ? (
+          <div className="space-y-2">
+            <div className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+              Cleanup attention needed
+            </div>
+            <div className="overflow-hidden rounded-xl border border-amber-500/20 bg-amber-500/5">
+              {cleanupFailedSummaries.map(renderSummaryRow)}
+            </div>
+          </div>
+        ) : null}
+      </div>
+      {closingWorkspace ? (
+        <ExecutionWorkspaceCloseDialog
+          workspaceId={closingWorkspace.id}
+          workspaceName={closingWorkspace.name}
+          currentStatus={closingWorkspace.status}
+          open
+          onOpenChange={(open) => {
+            if (!open) setClosingWorkspace(null);
+          }}
+          onClosed={() => {
+            queryClient.invalidateQueries({ queryKey: queryKeys.executionWorkspaces.list(companyId, { projectId }) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(projectId) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.issues.listByProject(companyId, projectId) });
+            setClosingWorkspace(null);
+          }}
+        />
+      ) : null}
+    </>
  );
 }

@ -754,7 +821,12 @@ export function ProjectDetail() {
          workspaceTabError ? (
            <p className="text-sm text-destructive">{workspaceTabError.message}</p>
          ) : (
-            <ProjectWorkspacesContent projectRef={canonicalProjectRef} summaries={workspaceSummaries} />
+            <ProjectWorkspacesContent
+              companyId={resolvedCompanyId!}
+              projectId={project.id}
+              projectRef={canonicalProjectRef}
+              summaries={workspaceSummaries}
+            />
          )
        ) : (
          <p className="text-sm text-muted-foreground">Loading workspaces...</p>