Improve mobile project workspace cards

ui/src/components/ProjectWorkspaceSummaryCard.test.tsx

@@ -0,0 +1,192 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import type { ComponentProps, ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import type { ExecutionWorkspace, Issue } from "@paperclipai/shared";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ProjectWorkspaceSummary } from "../lib/project-workspaces-tab";
+import { ProjectWorkspaceSummaryCard } from "./ProjectWorkspaceSummaryCard";
+
+vi.mock("@/lib/router", () => ({
+  Link: ({ children, to, ...props }: ComponentProps<"a"> & { to: string }) => <a href={to} {...props}>{children}</a>,
+}));
+
+vi.mock("./IssuesQuicklook", () => ({
+  IssuesQuicklook: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
+vi.mock("./CopyText", () => ({
+  CopyText: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+function createIssue(overrides: Partial<Issue> = {}): Issue {
+  return {
+    id: overrides.id ?? "issue-1",
+    companyId: overrides.companyId ?? "company-1",
+    projectId: overrides.projectId ?? "project-1",
+    projectWorkspaceId: overrides.projectWorkspaceId ?? null,
+    goalId: overrides.goalId ?? null,
+    parentId: overrides.parentId ?? null,
+    title: overrides.title ?? "Issue",
+    description: overrides.description ?? null,
+    status: overrides.status ?? "todo",
+    priority: overrides.priority ?? "medium",
+    assigneeAgentId: overrides.assigneeAgentId ?? null,
+    assigneeUserId: overrides.assigneeUserId ?? null,
+    checkoutRunId: overrides.checkoutRunId ?? null,
+    executionRunId: overrides.executionRunId ?? null,
+    executionAgentNameKey: overrides.executionAgentNameKey ?? null,
+    executionLockedAt: overrides.executionLockedAt ?? null,
+    createdByAgentId: overrides.createdByAgentId ?? null,
+    createdByUserId: overrides.createdByUserId ?? null,
+    issueNumber: overrides.issueNumber ?? 1,
+    identifier: overrides.identifier ?? "PAP-1",
+    requestDepth: overrides.requestDepth ?? 0,
+    billingCode: overrides.billingCode ?? null,
+    assigneeAdapterOverrides: overrides.assigneeAdapterOverrides ?? null,
+    executionWorkspaceId: overrides.executionWorkspaceId ?? null,
+    executionWorkspacePreference: overrides.executionWorkspacePreference ?? null,
+    executionWorkspaceSettings: overrides.executionWorkspaceSettings ?? null,
+    startedAt: overrides.startedAt ?? null,
+    completedAt: overrides.completedAt ?? null,
+    cancelledAt: overrides.cancelledAt ?? null,
+    hiddenAt: overrides.hiddenAt ?? null,
+    createdAt: overrides.createdAt ?? new Date("2026-04-12T00:00:00Z"),
+    updatedAt: overrides.updatedAt ?? new Date("2026-04-12T00:00:00Z"),
+  } as Issue;
+}
+
+function createSummary(overrides: Partial<ProjectWorkspaceSummary> = {}): ProjectWorkspaceSummary {
+  return {
+    key: overrides.key ?? "execution:workspace-1",
+    kind: overrides.kind ?? "execution_workspace",
+    workspaceId: overrides.workspaceId ?? "workspace-1",
+    workspaceName: overrides.workspaceName ?? "PAP-989-multi-user-implementation",
+    cwd: overrides.cwd ?? "/worktrees/PAP-989-multi-user-implementation",
+    branchName: overrides.branchName ?? "PAP-989-multi-user-implementation",
+    lastUpdatedAt: overrides.lastUpdatedAt ?? new Date("2026-04-12T00:00:00Z"),
+    projectWorkspaceId: overrides.projectWorkspaceId ?? "project-workspace-1",
+    executionWorkspaceId: overrides.executionWorkspaceId ?? "workspace-1",
+    executionWorkspaceStatus: overrides.executionWorkspaceStatus ?? "active",
+    serviceCount: overrides.serviceCount ?? 2,
+    runningServiceCount: overrides.runningServiceCount ?? 0,
+    primaryServiceUrl: overrides.primaryServiceUrl ?? "http://127.0.0.1:62474",
+    hasRuntimeConfig: overrides.hasRuntimeConfig ?? true,
+    issues: overrides.issues ?? [
+      createIssue({ id: "issue-1", identifier: "PAP-1364" }),
+      createIssue({ id: "issue-2", identifier: "PAP-1367" }),
+      createIssue({ id: "issue-3", identifier: "PAP-1362" }),
+      createIssue({ id: "issue-4", identifier: "PAP-1363" }),
+      createIssue({ id: "issue-5", identifier: "PAP-1340" }),
+    ],
+  };
+}
+
+describe("ProjectWorkspaceSummaryCard", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders a stacked mobile-friendly summary with metadata labels and compact issue pills", () => {
+    const root = createRoot(container);
+    act(() => {
+      root.render(
+        <ProjectWorkspaceSummaryCard
+          projectRef="paperclip-app"
+          summary={createSummary()}
+          runtimeActionKey={null}
+          runtimeActionPending={false}
+          onRuntimeAction={() => {}}
+          onCloseWorkspace={() => {}}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Execution workspace");
+    expect(container.textContent).toContain("Branch");
+    expect(container.textContent).toContain("Path");
+    expect(container.textContent).toContain("Service");
+    expect(container.textContent).toContain("Linked issues");
+    expect(container.textContent).toContain("Start services");
+    expect(container.textContent).toContain("Close workspace");
+    expect(container.textContent).toContain("+1 more");
+
+    const actions = container.querySelector('[data-testid="workspace-summary-actions"]');
+    expect(actions?.className).toContain("flex-col");
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
+  it("uses project workspace routes and omits close controls for project workspaces", () => {
+    const runtimeSpy = vi.fn();
+    const closeSpy = vi.fn();
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <ProjectWorkspaceSummaryCard
+          projectRef="paperclip-app"
+          summary={createSummary({
+            key: "project:workspace-2",
+            kind: "project_workspace",
+            executionWorkspaceId: null,
+            executionWorkspaceStatus: null,
+            hasRuntimeConfig: false,
+            issues: [createIssue({ id: "issue-6", identifier: "PAP-1400" })],
+          })}
+          runtimeActionKey={null}
+          runtimeActionPending={false}
+          onRuntimeAction={runtimeSpy}
+          onCloseWorkspace={closeSpy}
+        />,
+      );
+    });
+
+    const titleLink = container.querySelector("a[href='/projects/paperclip-app/workspaces/workspace-1']");
+    expect(titleLink).not.toBeNull();
+    expect(container.textContent).not.toContain("Close workspace");
+    expect(container.textContent).not.toContain("Start services");
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
+  it("shows retry close for cleanup failures", () => {
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <ProjectWorkspaceSummaryCard
+          projectRef="paperclip-app"
+          summary={createSummary({
+            executionWorkspaceStatus: "cleanup_failed" as ExecutionWorkspace["status"],
+          })}
+          runtimeActionKey={null}
+          runtimeActionPending={false}
+          onRuntimeAction={() => {}}
+          onCloseWorkspace={() => {}}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Retry close");
+
+    act(() => {
+      root.unmount();
+    });
+  });
+});

ui/src/components/ProjectWorkspaceSummaryCard.tsx

@@ -0,0 +1,230 @@
+import { Link } from "@/lib/router";
+import type { ExecutionWorkspace, Issue } from "@paperclipai/shared";
+import { Button } from "@/components/ui/button";
+import { CopyText } from "./CopyText";
+import { IssuesQuicklook } from "./IssuesQuicklook";
+import type { ProjectWorkspaceSummary } from "../lib/project-workspaces-tab";
+import { cn, projectWorkspaceUrl } from "../lib/utils";
+import { timeAgo } from "../lib/timeAgo";
+import { Copy, ExternalLink, FolderOpen, GitBranch, Loader2, Play, Square } from "lucide-react";
+
+function workspaceKindLabel(kind: ProjectWorkspaceSummary["kind"]) {
+  return kind === "execution_workspace" ? "Execution workspace" : "Project workspace";
+}
+
+function truncatePath(path: string) {
+  const parts = path.split("/").filter(Boolean);
+  if (parts.length <= 3) return path;
+  return `…/${parts.slice(-3).join("/")}`;
+}
+
+interface ProjectWorkspaceSummaryCardProps {
+  projectRef: string;
+  summary: ProjectWorkspaceSummary;
+  runtimeActionKey: string | null;
+  runtimeActionPending: boolean;
+  onRuntimeAction: (input: {
+    key: string;
+    kind: "project_workspace" | "execution_workspace";
+    workspaceId: string;
+    action: "start" | "stop" | "restart";
+  }) => void;
+  onCloseWorkspace: (input: {
+    id: string;
+    name: string;
+    status: ExecutionWorkspace["status"];
+  }) => void;
+}
+
+export function ProjectWorkspaceSummaryCard({
+  projectRef,
+  summary,
+  runtimeActionKey,
+  runtimeActionPending,
+  onRuntimeAction,
+  onCloseWorkspace,
+}: ProjectWorkspaceSummaryCardProps) {
+  const visibleIssues = summary.issues.slice(0, 4);
+  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 hasRunningServices = summary.runningServiceCount > 0;
+  const actionKey = `${summary.key}:${hasRunningServices ? "stop" : "start"}`;
+
+  return (
+    <div className="border-b border-border px-4 py-4 last:border-b-0 sm:px-5">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div className="min-w-0 space-y-2">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="inline-flex items-center rounded-full border border-border bg-muted/25 px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
+                {workspaceKindLabel(summary.kind)}
+              </span>
+              <span className="inline-flex items-center rounded-full border border-border/70 bg-background px-2.5 py-1 text-xs text-muted-foreground">
+                Updated {timeAgo(summary.lastUpdatedAt)}
+              </span>
+              {summary.serviceCount > 0 ? (
+                <span
+                  className={cn(
+                    "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs",
+                    hasRunningServices
+                      ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+                      : "border-border/70 bg-background text-muted-foreground",
+                  )}
+                >
+                  <span
+                    className={cn(
+                      "h-1.5 w-1.5 rounded-full",
+                      hasRunningServices ? "bg-emerald-500" : "bg-muted-foreground/40",
+                    )}
+                  />
+                  {summary.runningServiceCount}/{summary.serviceCount} services
+                </span>
+              ) : null}
+              {summary.executionWorkspaceStatus ? (
+                <span className="inline-flex items-center rounded-full border border-border/70 bg-background px-2.5 py-1 text-xs text-muted-foreground">
+                  {summary.executionWorkspaceStatus.replace(/_/g, " ")}
+                </span>
+              ) : null}
+            </div>
+            <Link
+              to={workspaceHref}
+              className="block break-words text-base font-semibold leading-6 text-foreground hover:underline"
+            >
+              {summary.workspaceName}
+            </Link>
+          </div>
+
+          <div
+            className="flex flex-col gap-2 min-[420px]:flex-row lg:w-auto lg:justify-end"
+            data-testid="workspace-summary-actions"
+          >
+            {summary.hasRuntimeConfig ? (
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 justify-center px-3 text-xs"
+                disabled={runtimeActionPending}
+                onClick={() =>
+                  onRuntimeAction({
+                    key: summary.key,
+                    kind: summary.kind,
+                    workspaceId: summary.workspaceId,
+                    action: hasRunningServices ? "stop" : "start",
+                  })
+                }
+              >
+                {runtimeActionKey === actionKey ? (
+                  <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
+                ) : hasRunningServices ? (
+                  <Square className="mr-2 h-3.5 w-3.5" />
+                ) : (
+                  <Play className="mr-2 h-3.5 w-3.5" />
+                )}
+                {hasRunningServices ? "Stop services" : "Start services"}
+              </Button>
+            ) : null}
+            {summary.kind === "execution_workspace" && summary.executionWorkspaceId && summary.executionWorkspaceStatus ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-9 px-3 text-xs text-muted-foreground"
+                onClick={() => onCloseWorkspace({
+                  id: summary.executionWorkspaceId!,
+                  name: summary.workspaceName,
+                  status: summary.executionWorkspaceStatus!,
+                })}
+              >
+                {summary.executionWorkspaceStatus === "cleanup_failed" ? "Retry close" : "Close workspace"}
+              </Button>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="rounded-xl border border-border/70 bg-muted/15 px-3 py-3">
+          <div className="space-y-2 text-sm">
+            {summary.branchName ? (
+              <div className="flex items-start gap-2">
+                <GitBranch className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                <div className="min-w-0">
+                  <div className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">Branch</div>
+                  <div className="break-all font-mono text-xs text-foreground">{summary.branchName}</div>
+                </div>
+              </div>
+            ) : null}
+
+            {summary.cwd ? (
+              <div className="flex items-start gap-2">
+                <FolderOpen className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                <div className="min-w-0 flex-1">
+                  <div className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">Path</div>
+                  <div className="flex items-start gap-2">
+                    <span className="min-w-0 break-all font-mono text-xs text-foreground" title={summary.cwd}>
+                      {truncatePath(summary.cwd)}
+                    </span>
+                    <CopyText text={summary.cwd} className="mt-0.5 shrink-0 text-muted-foreground hover:text-foreground" copiedLabel="Path copied">
+                      <Copy className="h-3.5 w-3.5" />
+                    </CopyText>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {summary.primaryServiceUrl ? (
+              <div className="flex items-start gap-2">
+                <ExternalLink className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                <div className="min-w-0">
+                  <div className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">Service</div>
+                  <a
+                    href={summary.primaryServiceUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="break-all font-mono text-xs text-foreground hover:underline"
+                  >
+                    {summary.primaryServiceUrl}
+                  </a>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        {summary.issues.length > 0 ? (
+          <div className="space-y-2">
+            <div className="text-[11px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
+              Linked issues
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {visibleIssues.map((issue) => (
+                <IssuePill key={issue.id} issue={issue} />
+              ))}
+              {hiddenIssueCount > 0 ? (
+                <Link
+                  to={workspaceHref}
+                  className="inline-flex items-center rounded-full border border-border bg-background px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground hover:underline"
+                >
+                  +{hiddenIssueCount} more
+                </Link>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function IssuePill({ issue }: { issue: Issue }) {
+  return (
+    <IssuesQuicklook issue={issue}>
+      <Link
+        to={`/issues/${issue.identifier ?? issue.id}`}
+        className="inline-flex items-center rounded-full border border-border bg-background px-2.5 py-1 font-mono text-xs text-foreground transition-colors hover:border-foreground/30 hover:text-foreground hover:underline"
+      >
+        {issue.identifier ?? issue.id.slice(0, 8)}
+      </Link>
+    </IssuesQuicklook>
+  );
+}

ui/src/pages/ProjectDetail.tsx

@@ -16,7 +16,6 @@ import { useToast } from "../context/ToastContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { queryKeys } from "../lib/queryKeys";
 import { ProjectProperties, type ProjectConfigFieldKey, type ProjectFieldSaveState } from "../components/ProjectProperties";
-import { CopyText } from "../components/CopyText";
 import { InlineEditor } from "../components/InlineEditor";
 import { StatusBadge } from "../components/StatusBadge";
 import { BudgetPolicyCard } from "../components/BudgetPolicyCard";
@@ -24,15 +23,14 @@ import { ExecutionWorkspaceCloseDialog } from "../components/ExecutionWorkspaceC
 import { IssuesList } from "../components/IssuesList";
 import { PageSkeleton } from "../components/PageSkeleton";
 import { PageTabBar } from "../components/PageTabBar";
+import { ProjectWorkspaceSummaryCard } from "../components/ProjectWorkspaceSummaryCard";
 import { buildProjectWorkspaceSummaries } from "../lib/project-workspaces-tab";
-import { projectRouteRef, projectWorkspaceUrl } from "../lib/utils";
-import { timeAgo } from "../lib/timeAgo";
+import { projectRouteRef } from "../lib/utils";
 import { Button } from "@/components/ui/button";
 import { Tabs } from "@/components/ui/tabs";
 import { PluginLauncherOutlet } from "@/plugins/launchers";
 import { PluginSlotMount, PluginSlotOutlet, usePluginSlots } from "@/plugins/slots";
-import { Copy, FolderOpen, GitBranch, Loader2, Play, Square } from "lucide-react";
-import { IssuesQuicklook } from "../components/IssuesQuicklook";
+import { Loader2 } from "lucide-react";
 
 /* ── Top-level tab types ── */
 
@@ -263,154 +261,21 @@ function ProjectWorkspacesContent({
   const activeSummaries = summaries.filter((summary) => summary.executionWorkspaceStatus !== "cleanup_failed");
   const cleanupFailedSummaries = summaries.filter((summary) => summary.executionWorkspaceStatus === "cleanup_failed");
 
-  const renderSummaryRow = (summary: ReturnType<typeof buildProjectWorkspaceSummaries>[number]) => {
-    const visibleIssues = summary.issues.slice(0, 5);
-    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 hasRunningServices = summary.runningServiceCount > 0;
-
-    const truncatePath = (path: string) => {
-      const parts = path.split("/").filter(Boolean);
-      if (parts.length <= 3) return path;
-      return `…/${parts.slice(-2).join("/")}`;
-    };
-
-    return (
-      <div
-        key={summary.key}
-        className="border-b border-border px-4 py-3 last:border-b-0"
-      >
-        {/* Header row: name + actions */}
-        <div className="flex items-center gap-3">
-          <Link
-            to={workspaceHref}
-            className="min-w-0 shrink truncate text-sm font-medium hover:underline"
-          >
-            {summary.workspaceName}
-          </Link>
-
-          <div className="flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
-            {summary.serviceCount > 0 ? (
-              <span className={`inline-flex items-center gap-1 ${hasRunningServices ? "text-emerald-500" : ""}`}>
-                <span className={`inline-block h-1.5 w-1.5 rounded-full ${hasRunningServices ? "bg-emerald-500" : "bg-muted-foreground/40"}`} />
-                {summary.runningServiceCount}/{summary.serviceCount}
-              </span>
-            ) : null}
-            {summary.executionWorkspaceStatus && summary.executionWorkspaceStatus !== "active" ? (
-              <span className="text-[11px] text-muted-foreground">{summary.executionWorkspaceStatus}</span>
-            ) : null}
-          </div>
-
-          <div className="ml-auto flex shrink-0 items-center gap-2">
-            <span className="text-xs text-muted-foreground">{timeAgo(summary.lastUpdatedAt)}</span>
-            {summary.hasRuntimeConfig ? (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-7 gap-1.5 px-2 text-xs"
-                disabled={controlWorkspaceRuntime.isPending}
-                onClick={() =>
-                  controlWorkspaceRuntime.mutate({
-                    key: summary.key,
-                    kind: summary.kind,
-                    workspaceId: summary.workspaceId,
-                    action: hasRunningServices ? "stop" : "start",
-                  })
-                }
-              >
-                {runtimeActionKey === `${summary.key}:start` || runtimeActionKey === `${summary.key}:stop` ? (
-                  <Loader2 className="h-3 w-3 animate-spin" />
-                ) : hasRunningServices ? (
-                  <Square className="h-3 w-3" />
-                ) : (
-                  <Play className="h-3 w-3" />
-                )}
-                {hasRunningServices ? "Stop" : "Start"}
-              </Button>
-            ) : null}
-            {summary.kind === "execution_workspace" && summary.executionWorkspaceId && summary.executionWorkspaceStatus ? (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-7 px-2 text-xs text-muted-foreground"
-                onClick={() => setClosingWorkspace({
-                  id: summary.executionWorkspaceId!,
-                  name: summary.workspaceName,
-                  status: summary.executionWorkspaceStatus!,
-                })}
-              >
-                {summary.executionWorkspaceStatus === "cleanup_failed" ? "Retry close" : "Close"}
-              </Button>
-            ) : null}
-          </div>
-        </div>
-
-        {/* Metadata lines: branch, folder */}
-        <div className="mt-1.5 space-y-0.5 text-xs text-muted-foreground">
-          {summary.branchName ? (
-            <div className="flex items-center gap-1.5">
-              <GitBranch className="h-3 w-3 shrink-0" />
-              <span className="font-mono">{summary.branchName}</span>
-            </div>
-          ) : null}
-          {summary.cwd ? (
-            <div className="flex items-center gap-1.5">
-              <FolderOpen className="h-3 w-3 shrink-0" />
-              <span className="truncate font-mono" title={summary.cwd}>
-                {truncatePath(summary.cwd)}
-              </span>
-              <CopyText text={summary.cwd} className="shrink-0" copiedLabel="Path copied">
-                <Copy className="h-3 w-3" />
-              </CopyText>
-            </div>
-          ) : null}
-          {summary.primaryServiceUrl ? (
-            <div className="flex items-center gap-1.5">
-              <a
-                href={summary.primaryServiceUrl}
-                target="_blank"
-                rel="noreferrer"
-                className="font-mono hover:text-foreground hover:underline"
-              >
-                {summary.primaryServiceUrl}
-              </a>
-            </div>
-          ) : null}
-        </div>
-
-        {/* Issues */}
-        {summary.issues.length > 0 ? (
-          <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
-            <span className="font-medium text-muted-foreground/70">Issues</span>
-            {visibleIssues.map((issue) => (
-              <IssuesQuicklook key={issue.id} issue={issue}>
-                <Link
-                  to={`/issues/${issue.identifier ?? issue.id}`}
-                  className="font-mono hover:text-foreground hover:underline"
-                >
-                  {issue.identifier ?? issue.id.slice(0, 8)}
-                </Link>
-              </IssuesQuicklook>
-            ))}
-            {hiddenIssueCount > 0 ? (
-              <Link to={workspaceHref} className="hover:text-foreground hover:underline">
-                +{hiddenIssueCount} more
-              </Link>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-    );
-  };
-
   return (
     <>
       <div className="space-y-4">
         <div className="overflow-hidden rounded-xl border border-border bg-card">
-          {activeSummaries.map(renderSummaryRow)}
+          {activeSummaries.map((summary) => (
+            <ProjectWorkspaceSummaryCard
+              key={summary.key}
+              projectRef={projectRef}
+              summary={summary}
+              runtimeActionKey={runtimeActionKey}
+              runtimeActionPending={controlWorkspaceRuntime.isPending}
+              onRuntimeAction={(input) => controlWorkspaceRuntime.mutate(input)}
+              onCloseWorkspace={(input) => setClosingWorkspace(input)}
+            />
+          ))}
         </div>
         {cleanupFailedSummaries.length > 0 ? (
           <div className="space-y-2">
@@ -418,7 +283,17 @@ function ProjectWorkspacesContent({
               Cleanup attention needed
             </div>
             <div className="overflow-hidden rounded-xl border border-amber-500/20 bg-amber-500/5">
-              {cleanupFailedSummaries.map(renderSummaryRow)}
+              {cleanupFailedSummaries.map((summary) => (
+                <ProjectWorkspaceSummaryCard
+                  key={summary.key}
+                  projectRef={projectRef}
+                  summary={summary}
+                  runtimeActionKey={runtimeActionKey}
+                  runtimeActionPending={controlWorkspaceRuntime.isPending}
+                  onRuntimeAction={(input) => controlWorkspaceRuntime.mutate(input)}
+                  onCloseWorkspace={(input) => setClosingWorkspace(input)}
+                />
+              ))}
             </div>
           </div>
         ) : null}