feat: add WorkspaceLifecycleToolCall transcript card (#3638)

## Summary

Adds `WorkspaceLifecycleToolCall`, a dedicated transcript card for the
parent-owned
`task_workspace_lifecycle` tool. Until now those calls fell through to
the generic tool
renderer; this gives orchestrator workspace cleanup a first-class,
glanceable card.

## Background

`task_workspace_lifecycle` (added in #3633) lets an orchestrator
archive, delete the worktree
of, or remove the child workspaces it created via
`task(kind="workspace")`. Its result is a
batch of per-target outcomes, which the generic renderer surfaced only
as raw JSON. This card
ports the "Workspace Lifecycle Tool Call" design from the Mux Design
System into a real
component.

The design mockup used a simplified *placeholder* schema (`archive |
delete`, a top-level
`success`, a `name` field, four statuses). The real backend is different
— actions are
`archive | delete_worktree | remove`, and the result is `{ results:
[...] }` with **no**
top-level `success` and **twelve** discriminated `status` values. The
card binds to the real
types and ports the mockup's *visual vocabulary*, not its data shape.

## Implementation

- **Collapsed** the card reads as a verb + target count + a summary
pill: a single solid
"N archived" pill when every target landed the same way, or
severity-grouped dot-chips
  (settled / blocked / failed) for mixed batches.
- **Expanded** it lists each target with a status-specific icon and
tone, the originating
`wst_…` task id (when distinct), and the real `paths` (untracked files
for
`requires_confirmation`), `activeTaskIds` (for `active`), and `note` /
`error` fields, plus
a follow-up hint for blocked states (e.g. "pass `interrupt_active:
true`").
- Results are validated with `safeParse` so a malformed/partial payload
self-heals to a
"requested targets" fallback instead of throwing; a thrown `{ success:
false, error }`
  routes to the shared `ErrorBox`.
- The status → tone/group/icon map is an exhaustive `Record` over the
backend status union, so
  a new backend status fails the typecheck until the card handles it.
- Registers the component + a `Layers` header icon, and exports the
derived
  arg/result/status types from `common/types/tools.ts`.
- Long workspace ids truncate and path/id lists wrap (`break-all` +
capped scroll), keeping the
  card within its container at mobile (~375px) widths.

## Validation

- `make typecheck`, eslint, and `bun test src/browser/features/Tools/`
(268 tests) pass.
- New happy-dom test asserts the outcome-group classification,
malformed-result self-healing,
  and the top-level error path — behavior, not card prose.
- Storybook states are added with snapshots disabled (the Chromatic
budget is at its ceiling);
Storybook compiles and serves all states. The 375px play test is
included but could not be
executed locally (no Playwright browser available in this environment).

## Risks

Low and isolated: a new, additive transcript renderer behind the tool
registry. Worst case for
a rendering bug is a single tool card degrading — and an unparseable
result already falls back
to the generic-style requested-targets view rather than breaking the
workspace.

---------

Signed-off-by: Thomas Kosiewski <tk@coder.com>

Author: ThomasK33

src/browser/features/Tools/Shared/ToolPrimitives.tsx

@@ -19,6 +19,7 @@ import {
   GraduationCap,
   Hand,
   Keyboard,
+  Layers,
   Lightbulb,
   MessageCircleQuestion,
   Monitor,
@@ -269,6 +270,9 @@ export const TOOL_NAME_TO_ICON: Partial<Record<string, LucideIcon>> = {
   review_pane_get: ScanEye,
   analytics_query: Database,
   task_apply_git_patch: GitCommit,
+  // Layers (stacked planes) reads as "manage the stack of child workspaces" — matches the
+  // WorkspaceLifecycleToolCall card's glyph.
+  task_workspace_lifecycle: Layers,
   set_goal: Target,
   get_goal: Target,
   complete_goal: CircleCheck,

src/browser/features/Tools/Shared/getToolComponent.ts

@@ -42,6 +42,7 @@ import {
   TaskTerminateToolCall,
 } from "../TaskToolCall";
 import { TaskApplyGitPatchToolCall } from "../TaskApplyGitPatchToolCall";
+import { WorkspaceLifecycleToolCall } from "../WorkspaceLifecycleToolCall";
 import { SetGoalToolCall } from "../SetGoalToolCall";
 import { GetGoalToolCall } from "../GetGoalToolCall";
 import { HeartbeatToolCall } from "../HeartbeatToolCall";
@@ -183,6 +184,10 @@ const TOOL_REGISTRY: Record<string, ToolRegistryEntry> = {
     component: TaskApplyGitPatchToolCall,
     schema: TOOL_DEFINITIONS.task_apply_git_patch.schema,
   },
+  task_workspace_lifecycle: {
+    component: WorkspaceLifecycleToolCall,
+    schema: TOOL_DEFINITIONS.task_workspace_lifecycle.schema,
+  },
   workflow_run: {
     component: WorkflowRunToolCall,
     schema: TOOL_DEFINITIONS.workflow_run.schema,

src/browser/features/Tools/WorkspaceLifecycleToolCall.stories.tsx

@@ -0,0 +1,225 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { WorkspaceLifecycleToolCall } from "@/browser/features/Tools/WorkspaceLifecycleToolCall";
+import { CHROMATIC_DISABLED, lightweightMeta, StoryUiShell } from "@/browser/stories/meta.js";
+
+const meta = {
+  ...lightweightMeta,
+  title: "App/Chat/Tools/WorkspaceLifecycle",
+  component: WorkspaceLifecycleToolCall,
+  parameters: {
+    ...lightweightMeta.parameters,
+    // The repo-wide Chromatic snapshot budget (tests/ui/storybook/budget.test.ts) is already
+    // at its ceiling, so these states stay out of paid visual snapshots. They still render
+    // under local Storybook and the CI Storybook test-runner smoke pass. Flip to
+    // CHROMATIC_SINGLE_MODE once the budget is raised to add regression coverage.
+    chromatic: CHROMATIC_DISABLED,
+  },
+  decorators: [
+    (Story) => (
+      <StoryUiShell>
+        <div className="bg-background p-6">
+          <div className="w-full max-w-2xl">
+            <Story />
+          </div>
+        </div>
+      </StoryUiShell>
+    ),
+  ],
+} satisfies Meta<typeof WorkspaceLifecycleToolCall>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** archive · several owned workspaces all archived (uniform → solid "N archived" pill). */
+export const ArchiveMultiple: Story = {
+  args: {
+    args: {
+      action: "archive",
+      targets: [
+        { workspaceId: "24e33167af" },
+        { workspaceId: "4a92f76fbf" },
+        { workspaceId: "0b71c40e21" },
+      ],
+    },
+    status: "completed",
+    defaultExpanded: true,
+    result: {
+      results: [
+        { status: "archived", action: "archive", workspaceId: "24e33167af" },
+        { status: "archived", action: "archive", workspaceId: "4a92f76fbf" },
+        { status: "archived", action: "archive", workspaceId: "0b71c40e21" },
+      ],
+    },
+  },
+};
+
+/** remove · single workspace removed permanently (danger tone). */
+export const RemoveSingle: Story = {
+  args: {
+    args: { action: "remove", targets: [{ taskId: "wst_9f0c1d77aa" }] },
+    status: "completed",
+    defaultExpanded: true,
+    result: {
+      results: [
+        {
+          status: "removed",
+          action: "remove",
+          taskId: "wst_9f0c1d77aa",
+          workspaceId: "9f0c1d77aa",
+        },
+      ],
+    },
+  },
+};
+
+/** delete_worktree · batch reclaim of disk for already-archived workspaces. */
+export const DeleteWorktreeBatch: Story = {
+  args: {
+    args: {
+      action: "delete_worktree",
+      targets: [{ workspaceId: "9f0c1d77aa" }, { workspaceId: "771be0c3d2" }],
+    },
+    status: "completed",
+    defaultExpanded: true,
+    result: {
+      results: [
+        { status: "deleted_worktree", action: "delete_worktree", workspaceId: "9f0c1d77aa" },
+        { status: "deleted_worktree", action: "delete_worktree", workspaceId: "771be0c3d2" },
+      ],
+    },
+  },
+};
+
+/** Mixed · one archived, one already archived (no-op), one not found (mixed → dot-chips). */
+export const PartialNotFound: Story = {
+  args: {
+    args: {
+      action: "archive",
+      targets: [
+        { workspaceId: "9f0c1d77aa" },
+        { workspaceId: "771be0c3d2" },
+        { workspaceId: "deadbeef00" },
+      ],
+    },
+    status: "completed",
+    defaultExpanded: true,
+    result: {
+      results: [
+        { status: "archived", action: "archive", workspaceId: "9f0c1d77aa" },
+        { status: "already_archived", action: "archive", workspaceId: "771be0c3d2" },
+        {
+          status: "not_found",
+          action: "archive",
+          workspaceId: "deadbeef00",
+          note: "Owned workspace metadata is already absent.",
+        },
+      ],
+    },
+  },
+};
+
+/**
+ * Blocked · requires_confirmation (untracked files would be lost) + an active turn. Pinned
+ * to a fixed ~375px container (the Storybook test-runner renders at desktop width and
+ * ignores viewport / Chromatic modes, so the narrow case must be forced with a wrapper) and
+ * a play that fails if a long workspace id / file path overflows instead of truncating.
+ */
+export const BlockedNeedsAction: Story = {
+  args: {
+    args: {
+      action: "archive",
+      targets: [
+        { workspaceId: "feature-billing-webhooks-experiment-very-long-id-001" },
+        { workspaceId: "4a92f76fbf" },
+      ],
+    },
+    status: "completed",
+    defaultExpanded: true,
+    result: {
+      results: [
+        {
+          status: "requires_confirmation",
+          action: "archive",
+          workspaceId: "feature-billing-webhooks-experiment-very-long-id-001",
+          paths: [
+            "packages/server/src/very/deeply/nested/path/to/an/untracked/file/that/is/quite/long/scratch.local.ts",
+            ".env.local",
+          ],
+        },
+        {
+          status: "active",
+          action: "archive",
+          workspaceId: "4a92f76fbf",
+          activeTaskIds: ["wst_4a92f76fbf01"],
+        },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div data-testid="wl-card-container" className="w-[375px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    if (!canvasElement.textContent?.includes("Confirm files")) {
+      throw new Error("WorkspaceLifecycle requires_confirmation row did not render");
+    }
+    const container = canvasElement.querySelector('[data-testid="wl-card-container"]');
+    if (!(container instanceof HTMLElement)) {
+      throw new Error("WorkspaceLifecycle story container not found");
+    }
+    // Let layout settle before measuring.
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+    );
+    if (container.scrollWidth > container.clientWidth + 1) {
+      throw new Error(
+        `WorkspaceLifecycle card overflowed its ${container.clientWidth}px container by ` +
+          `${container.scrollWidth - container.clientWidth}px`
+      );
+    }
+  },
+};
+
+/** Mid-flight, before the result arrives — falls back to the requested targets. */
+export const Executing: Story = {
+  args: {
+    args: {
+      action: "remove",
+      targets: [{ workspaceId: "24e33167af" }, { workspaceId: "4a92f76fbf" }],
+    },
+    status: "executing",
+    defaultExpanded: true,
+  },
+};
+
+/**
+ * Error · a thrown execute() surfaces as { success: false, error } (e.g. the tool ran
+ * outside an orchestrator context). Exercises the shared ErrorBox.
+ */
+export const ErrorResult: Story = {
+  args: {
+    args: { action: "remove", targets: [{ workspaceId: "24e33167af" }] },
+    status: "failed",
+    defaultExpanded: true,
+    result: {
+      success: false,
+      error: "task_workspace_lifecycle requires an orchestrator workspace context.",
+    },
+  },
+};
+
+/** Per-row failure · target is not a workspace this orchestrator owns. */
+export const InvalidScope: Story = {
+  args: {
+    args: { action: "remove", targets: [{ taskId: "wst_notmine00" }] },
+    status: "completed",
+    defaultExpanded: true,
+    result: {
+      results: [{ status: "invalid_scope", action: "remove", taskId: "wst_notmine00" }],
+    },
+  },
+};