@stigmer/react 2.0.0 → 3.0.0

package/src/agent-instance/__tests__/agent-instance-hooks.test.tsx

@@ -0,0 +1,213 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, act, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import type { Stigmer } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { useCreateAgentInstance } from "../useCreateAgentInstance";
+import { useUpdateAgentInstance } from "../useUpdateAgentInstance";
+import { useDeleteAgentInstance } from "../useDeleteAgentInstance";
+import { useAgentInstances } from "../useAgentInstances";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeInstance(id = "ain-001") {
+  return {
+    metadata: { id, name: "test-instance", slug: "test-instance", org: "org-1" },
+    spec: { agentId: "agent-001", description: "Test", environmentRefs: [] },
+  } as any;
+}
+
+const mockCreate = vi.fn();
+const mockUpdate = vi.fn();
+const mockDelete = vi.fn();
+const mockGetByAgent = vi.fn();
+
+function makeMockClient(): Stigmer {
+  return {
+    agentInstance: {
+      create: mockCreate,
+      update: mockUpdate,
+      delete: mockDelete,
+      getByAgent: mockGetByAgent,
+    },
+  } as unknown as Stigmer;
+}
+
+function createWrapper(client: Stigmer) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <StigmerContext.Provider value={client}>
+        {children}
+      </StigmerContext.Provider>
+    );
+  };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+// ---------------------------------------------------------------------------
+// useCreateAgentInstance
+// ---------------------------------------------------------------------------
+
+describe("useCreateAgentInstance", () => {
+  it("returns created instance on success", async () => {
+    const instance = makeInstance();
+    mockCreate.mockResolvedValueOnce(instance);
+
+    const { result } = renderHook(() => useCreateAgentInstance(), {
+      wrapper: createWrapper(makeMockClient()),
+    });
+
+    let created: any;
+    await act(async () => {
+      created = await result.current.create({
+        name: "test-instance",
+        org: "org-1",
+        agentId: "agent-001",
+      });
+    });
+
+    expect(created).toBe(instance);
+    expect(result.current.isCreating).toBe(false);
+    expect(result.current.error).toBeNull();
+    expect(mockCreate).toHaveBeenCalledTimes(1);
+  });
+
+  it("sets error and re-throws on failure", async () => {
+    mockCreate.mockRejectedValueOnce(new Error("Create failed"));
+
+    const { result } = renderHook(() => useCreateAgentInstance(), {
+      wrapper: createWrapper(makeMockClient()),
+    });
+
+    await act(async () => {
+      await expect(
+        result.current.create({ name: "x", org: "org-1", agentId: "agent-001" }),
+      ).rejects.toThrow("Create failed");
+    });
+
+    expect(result.current.error!.message).toBe("Create failed");
+    expect(result.current.isCreating).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// useUpdateAgentInstance
+// ---------------------------------------------------------------------------
+
+describe("useUpdateAgentInstance", () => {
+  it("returns updated instance on success", async () => {
+    const instance = makeInstance();
+    mockUpdate.mockResolvedValueOnce(instance);
+
+    const { result } = renderHook(() => useUpdateAgentInstance(), {
+      wrapper: createWrapper(makeMockClient()),
+    });
+
+    let updated: any;
+    await act(async () => {
+      updated = await result.current.update({
+        name: "test-instance",
+        org: "org-1",
+        agentId: "agent-001",
+        description: "Updated",
+      });
+    });
+
+    expect(updated).toBe(instance);
+    expect(result.current.isUpdating).toBe(false);
+    expect(mockUpdate).toHaveBeenCalledTimes(1);
+  });
+
+  it("sets error and re-throws on failure", async () => {
+    mockUpdate.mockRejectedValueOnce(new Error("Update failed"));
+
+    const { result } = renderHook(() => useUpdateAgentInstance(), {
+      wrapper: createWrapper(makeMockClient()),
+    });
+
+    await act(async () => {
+      await expect(
+        result.current.update({ name: "x", org: "o", agentId: "a" }),
+      ).rejects.toThrow("Update failed");
+    });
+
+    expect(result.current.error!.message).toBe("Update failed");
+    expect(result.current.isUpdating).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// useDeleteAgentInstance
+// ---------------------------------------------------------------------------
+
+describe("useDeleteAgentInstance", () => {
+  it("returns deleted instance on success", async () => {
+    const instance = makeInstance();
+    mockDelete.mockResolvedValueOnce(instance);
+
+    const { result } = renderHook(() => useDeleteAgentInstance(), {
+      wrapper: createWrapper(makeMockClient()),
+    });
+
+    let deleted: any;
+    await act(async () => {
+      deleted = await result.current.deleteInstance("ain-001");
+    });
+
+    expect(deleted).toBe(instance);
+    expect(result.current.isDeleting).toBe(false);
+    expect(mockDelete).toHaveBeenCalledWith("ain-001");
+  });
+
+  it("sets error and re-throws on failure", async () => {
+    mockDelete.mockRejectedValueOnce(new Error("Delete failed"));
+
+    const { result } = renderHook(() => useDeleteAgentInstance(), {
+      wrapper: createWrapper(makeMockClient()),
+    });
+
+    await act(async () => {
+      await expect(
+        result.current.deleteInstance("ain-001"),
+      ).rejects.toThrow("Delete failed");
+    });
+
+    expect(result.current.error!.message).toBe("Delete failed");
+    expect(result.current.isDeleting).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// useAgentInstances — reads list.items (NOT workflow's .entries)
+// ---------------------------------------------------------------------------
+
+describe("useAgentInstances", () => {
+  it("lists instances from getByAgent .items", async () => {
+    const instances = [makeInstance("ain-1"), makeInstance("ain-2")];
+    mockGetByAgent.mockResolvedValueOnce({ items: instances, totalCount: 2 });
+
+    const { result } = renderHook(() => useAgentInstances("agent-001"), {
+      wrapper: createWrapper(makeMockClient()),
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.instances).toHaveLength(2);
+    expect(result.current.instances[0]?.metadata?.id).toBe("ain-1");
+    expect(mockGetByAgent).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not fetch when agentId is null", async () => {
+    const { result } = renderHook(() => useAgentInstances(null), {
+      wrapper: createWrapper(makeMockClient()),
+    });
+
+    expect(result.current.instances).toEqual([]);
+    expect(mockGetByAgent).not.toHaveBeenCalled();
+  });
+});

package/src/agent-instance/index.ts

@@ -2,10 +2,25 @@ export { useAgentInstance } from "./useAgentInstance";
 export type { UseAgentInstanceReturn } from "./useAgentInstance";
 export { useAgentInstanceList } from "./useAgentInstanceList";
 export type { UseAgentInstanceListReturn } from "./useAgentInstanceList";
+export { useAgentInstances } from "./useAgentInstances";
+export type { UseAgentInstancesReturn } from "./useAgentInstances";
 export { useCreateAgentInstance } from "./useCreateAgentInstance";
 export type { UseCreateAgentInstanceReturn } from "./useCreateAgentInstance";
+export { useUpdateAgentInstance } from "./useUpdateAgentInstance";
+export type { UseUpdateAgentInstanceReturn } from "./useUpdateAgentInstance";
+export { useDeleteAgentInstance } from "./useDeleteAgentInstance";
+export type { UseDeleteAgentInstanceReturn } from "./useDeleteAgentInstance";
 export { usePersonalAgentInstance } from "./usePersonalAgentInstance";
 export type {
   GetOrCreatePersonalInstanceInput,
   UsePersonalAgentInstanceReturn,
 } from "./usePersonalAgentInstance";
+
+export { AgentInstanceList } from "./AgentInstanceList";
+export type { AgentInstanceListProps } from "./AgentInstanceList";
+export { AgentInstanceEmptyState } from "./AgentInstanceEmptyState";
+export type { AgentInstanceEmptyStateProps } from "./AgentInstanceEmptyState";
+export { CreateAgentInstanceDialog } from "./CreateAgentInstanceDialog";
+export type { CreateAgentInstanceDialogProps } from "./CreateAgentInstanceDialog";
+export { AgentInstanceDetailPanel } from "./AgentInstanceDetailPanel";
+export type { AgentInstanceDetailPanelProps } from "./AgentInstanceDetailPanel";

package/src/agent-instance/useAgentInstances.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import type { AgentInstance } from "@stigmer/protos/ai/stigmer/agentic/agentinstance/v1/api_pb";
+import { create } from "@bufbuild/protobuf";
+import { GetAgentInstancesByAgentRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/agentinstance/v1/io_pb";
+import { useStigmer } from "../hooks";
+import { useFetch } from "../internal/useFetch";
+
+/** Return value of {@link useAgentInstances}. */
+export interface UseAgentInstancesReturn {
+  /** Instances for the given agent, or empty array while loading. */
+  readonly instances: readonly AgentInstance[];
+  /** `true` while the initial fetch or a refetch is in flight. */
+  readonly isLoading: boolean;
+  /** `true` while a background refetch is in flight and stale data is shown. */
+  readonly isRefetching: boolean;
+  /** Error from the last failed request, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Discard cached data and re-fetch instances from the server. */
+  readonly refetch: () => void;
+}
+
+/**
+ * Data hook that fetches all instances for a specific agent.
+ *
+ * Wraps `stigmer.agentInstance.getByAgent()` with loading and error
+ * state management. Used on the Agent detail page "Instances" tab to
+ * show environment-bound deployments of the agent blueprint.
+ *
+ * Pass `null` as `agentId` to skip fetching (stable no-op).
+ *
+ * Note: the `getByAgent` RPC returns an `AgentInstanceList` whose
+ * entries live under `items` (unlike WorkflowInstance, which uses
+ * `entries`).
+ *
+ * @example
+ * ```tsx
+ * const { instances, isLoading } = useAgentInstances(agent.metadata?.id);
+ * ```
+ */
+export function useAgentInstances(
+  agentId: string | null | undefined,
+): UseAgentInstancesReturn {
+  const stigmer = useStigmer();
+
+  const fetchFn = agentId
+    ? async () => {
+        const resp = await stigmer.agentInstance.getByAgent(
+          create(GetAgentInstancesByAgentRequestSchema, {
+            agentId,
+          }),
+        );
+        return resp.items ? [...resp.items] : [];
+      }
+    : null;
+
+  const {
+    data: instances,
+    isLoading,
+    isRefetching,
+    error,
+    refetch,
+  } = useFetch<readonly AgentInstance[]>(fetchFn, [agentId, stigmer], []);
+
+  return { instances, isLoading, isRefetching, error, refetch };
+}

package/src/agent-instance/useDeleteAgentInstance.ts

@@ -0,0 +1,73 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { AgentInstance } from "@stigmer/protos/ai/stigmer/agentic/agentinstance/v1/api_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Return value of {@link useDeleteAgentInstance}. */
+export interface UseDeleteAgentInstanceReturn {
+  /**
+   * Delete an agent instance by ID. Returns the deleted resource.
+   *
+   * Deleting an instance removes its configuration and environment
+   * bindings. Sessions already started against it (and their execution
+   * history) are preserved — deletion does not cascade to sessions.
+   */
+  readonly deleteInstance: (id: string) => Promise<AgentInstance>;
+  /** `true` while the delete request is in flight. */
+  readonly isDeleting: boolean;
+  /** Error from the last failed delete, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Reset `error` to `null`. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Mutation hook that deletes an AgentInstance resource.
+ *
+ * Wraps `stigmer.agentInstance.delete()` with loading/error state.
+ * The caller is responsible for handling post-delete UI updates
+ * (e.g., refreshing the instance list, closing a detail panel).
+ *
+ * Unlike WorkflowInstance, deletion does **not** cascade to runtime
+ * resources: sessions previously started against the instance and
+ * their execution history remain intact. The confirmation UI copy
+ * should reflect this.
+ *
+ * @example
+ * ```tsx
+ * const { deleteInstance, isDeleting } = useDeleteAgentInstance();
+ *
+ * const handleDelete = async () => {
+ *   await deleteInstance(instance.metadata.id);
+ *   refetch(); // refresh list after deletion
+ * };
+ * ```
+ */
+export function useDeleteAgentInstance(): UseDeleteAgentInstanceReturn {
+  const stigmer = useStigmer();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const deleteInstance = useCallback(
+    async (id: string): Promise<AgentInstance> => {
+      setIsDeleting(true);
+      setError(null);
+
+      try {
+        return await stigmer.agentInstance.delete(id);
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsDeleting(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { deleteInstance, isDeleting, error, clearError };
+}

package/src/agent-instance/useUpdateAgentInstance.ts

@@ -0,0 +1,67 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { AgentInstance } from "@stigmer/protos/ai/stigmer/agentic/agentinstance/v1/api_pb";
+import type { AgentInstanceInput } from "@stigmer/sdk";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Return value of {@link useUpdateAgentInstance}. */
+export interface UseUpdateAgentInstanceReturn {
+  /** Update an existing agent instance with a full input. Returns the updated resource. */
+  readonly update: (input: AgentInstanceInput) => Promise<AgentInstance>;
+  /** `true` while the update RPC is in flight. */
+  readonly isUpdating: boolean;
+  /** Error from the last failed update, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Clear the error state. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Mutation hook that updates an existing AgentInstance resource.
+ *
+ * Wraps `stigmer.agentInstance.update()` with loading/error state.
+ * The caller is responsible for refreshing the instance after a
+ * successful update (e.g., via `refetch` from `useAgentInstances` or
+ * `useAgentInstance`).
+ *
+ * @example
+ * ```tsx
+ * const { update, isUpdating } = useUpdateAgentInstance();
+ *
+ * const handleSave = async () => {
+ *   await update({
+ *     ...agentInstanceToInput(instance),
+ *     environmentRefs: newRefs,
+ *   });
+ *   refetch();
+ * };
+ * ```
+ */
+export function useUpdateAgentInstance(): UseUpdateAgentInstanceReturn {
+  const stigmer = useStigmer();
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const update = useCallback(
+    async (input: AgentInstanceInput): Promise<AgentInstance> => {
+      setIsUpdating(true);
+      setError(null);
+
+      try {
+        return await stigmer.agentInstance.update(input);
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsUpdating(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { update, isUpdating, error, clearError };
+}

package/src/composer/SessionComposer.tsx

@@ -259,6 +259,25 @@ export interface SessionComposerProps {
    */
   readonly initialAgentRef?: ResourceRef;
 
+  /**
+   * Pre-bind the session to a specific, already-existing
+   * `AgentInstance` when the composer mounts.
+   *
+   * Requires `initialAgentRef` (the agent the instance deploys). When
+   * both are provided, the composer resolves the agent directly to this
+   * instance — skipping the environment-collection flow entirely, since
+   * the chosen instance already binds its own environment(s). The
+   * resulting resolution is `{ mode: "saved", instanceId }`, so the
+   * session is created against this exact configured deployment.
+   *
+   * This is the agent analog of running a specific WorkflowInstance: it
+   * powers the "Start session" action on an instance in the Agent detail
+   * page's Instances tab.
+   *
+   * One-time: consumed on mount; subsequent changes are ignored.
+   */
+  readonly initialInstanceId?: string;
+
   /**
    * When `true`, the agent chip renders without an X (remove) button.
    *
@@ -456,6 +475,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
   onAgentRefChange,
   onAgentResolutionChange,
   initialAgentRef,
+  initialInstanceId,
   isDefaultAgent = false,
   mcpServerUsages,
   onMcpServerUsagesChange,
@@ -845,6 +865,29 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
     ],
   );
 
+  const handleAgentSelectToInstance = useCallback(
+    async (ref: ResourceRef, instanceId: string) => {
+      try {
+        const result = await agentSetup.resolveToInstance(ref, instanceId);
+        onAgentRefChange?.(result.agentRef);
+        onAgentResolutionChange?.(result.resolution);
+        handleDisplayNameResolved(
+          `${result.agentRef.org}/${result.agentRef.slug}`,
+          result.agentName,
+        );
+        setConfigOpen(false);
+      } catch {
+        // Error is captured by agentSetup.state.error — displayed inline.
+      }
+    },
+    [
+      agentSetup,
+      onAgentRefChange,
+      onAgentResolutionChange,
+      handleDisplayNameResolved,
+    ],
+  );
+
   const handleEnvFormSubmit = useCallback(
     async (
       values: Record<string, EnvVarInput>,
@@ -879,6 +922,9 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
   const handleAgentSelectRef = useRef(handleAgentSelect);
   handleAgentSelectRef.current = handleAgentSelect;
 
+  const handleAgentSelectToInstanceRef = useRef(handleAgentSelectToInstance);
+  handleAgentSelectToInstanceRef.current = handleAgentSelectToInstance;
+
   const initialAgentHandled = useRef(false);
 
   useEffect(() => {
@@ -889,7 +935,13 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
     let cancelled = false;
     initialAgentHandled.current = true;
 
-    handleAgentSelectRef.current(initialAgentRef).catch(() => {
+    // When an explicit instance is provided, bind directly to it
+    // (skips env collection); otherwise run the full resolution flow.
+    const run = initialInstanceId
+      ? handleAgentSelectToInstanceRef.current(initialAgentRef, initialInstanceId)
+      : handleAgentSelectRef.current(initialAgentRef);
+
+    run.catch(() => {
       if (!cancelled) {
         initialAgentHandled.current = false;
       }
@@ -898,7 +950,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
     return () => {
       cancelled = true;
     };
-  }, [initialAgentRef, showAgent, org]);
+  }, [initialAgentRef, initialInstanceId, showAgent, org]);
 
   // ---------------------------------------------------------------------------
   // Initial agent: auto-open Configure > Agent when env vars are needed

package/src/execution/ApprovalCard.tsx

@@ -5,7 +5,7 @@ import type { PendingApproval } from "@stigmer/protos/ai/stigmer/agentic/agentex
 import { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
 import {
-  resolveToolCategory,
+  resolveToolCategoryFromKind,
   extractPrimaryArgFromPreview,
 } from "./tool-categories";
 import { CATEGORY_ICON } from "./ToolCallItem";
@@ -74,7 +74,10 @@ export const ApprovalCard = memo(function ApprovalCard({
     }
   }, [isSubmitting]);
 
-  const categoryInfo = resolveToolCategory(
+  // Prefer the denormalized wire tool_kind (populated by the server-side
+  // PendingApproval projection); fall back to the name for legacy executions.
+  const categoryInfo = resolveToolCategoryFromKind(
+    pendingApproval.toolKind,
     pendingApproval.toolName,
     pendingApproval.mcpServerSlug,
   );
@@ -182,6 +185,18 @@ export const ApprovalCard = memo(function ApprovalCard({
             variant="approve"
             cursorTarget="approve-button"
           />
+          {/* Subordinate escalation: approve this call and stop asking for the
+              rest of the run. Kept visually quieter than the primary Approve so
+              it never competes with the per-call decision the user is making. */}
+          <ActionButton
+            label="Approve & don't ask again"
+            action={ApprovalAction.APPROVE_ALL}
+            activeAction={activeAction}
+            isSubmitting={isSubmitting}
+            onClick={handleAction}
+            variant="approveAll"
+            cursorTarget="approve-all-button"
+          />
           <ActionButton
             label="Skip"
             action={ApprovalAction.SKIP}
@@ -222,7 +237,7 @@ function ActionButton({
   activeAction: ApprovalAction | null;
   isSubmitting: boolean;
   onClick: (action: ApprovalAction) => void;
-  variant: "approve" | "skip" | "reject";
+  variant: "approve" | "approveAll" | "skip" | "reject";
   cursorTarget?: string;
 }) {
   const isActive = activeAction === action;
@@ -233,6 +248,10 @@ function ActionButton({
       "bg-success text-success-foreground hover:bg-success/90",
       "disabled:bg-success/50 disabled:text-success-foreground/70",
     ),
+    approveAll: cn(
+      "text-success hover:bg-success/10",
+      "disabled:text-success/50",
+    ),
     skip: cn(
       "border border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
       "disabled:bg-muted-faint disabled:text-muted-foreground-faint",

package/src/execution/MessageThread.tsx

@@ -7,6 +7,7 @@ import type { AgentMessage, ToolCall } from "@stigmer/protos/ai/stigmer/agentic/
 import { AgentMessageSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
 import type { PendingApproval } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/approval_pb";
+import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
 import {
   ApprovalAction,
   ExecutionPhase,
@@ -24,6 +25,8 @@ import { SetupProgress } from "./SetupProgress";
 import { ApprovalCard } from "./ApprovalCard";
 import { SummarizationCard } from "./SummarizationCard";
 import { PlanCompletionCard } from "./PlanCompletionCard";
+import { PlanArtifactCard } from "./PlanArtifactCard";
+import { findPlanArtifact } from "../library/detect-plan-artifact";
 import type { SummarizationEventView } from "./useContextWindow";
 import { isInternalTool } from "./tool-categories";
 import { FilePathContext, type FilePathContextValue } from "./FilePathContext";
@@ -169,7 +172,12 @@ export type ThreadItem =
   | { readonly kind: "approval-request"; readonly pendingApproval: PendingApproval; readonly key: string }
   | { readonly kind: "setup-progress"; readonly workspaceEntries: readonly WorkspaceEntry[]; readonly serverPhase?: string; readonly isAwaitingResponse?: boolean; readonly key: string }
   | { readonly kind: "context-compacted"; readonly event: SummarizationEventView; readonly key: string }
-  | { readonly kind: "plan-completion"; readonly key: string };
+  | {
+      readonly kind: "plan-completion";
+      readonly key: string;
+      readonly executionId: string;
+      readonly planArtifact?: ExecutionArtifact;
+    };
 
 function hasAiMessages(execution: AgentExecution): boolean {
   const messages = execution.status?.messages;
@@ -378,7 +386,12 @@ export function buildThreadItems(
     lastPhase === ExecutionPhase.EXECUTION_COMPLETED &&
     lastExec?.spec?.executionConfig?.interactionMode === InteractionMode.PLAN
   ) {
-    items.push({ kind: "plan-completion", key: "plan-completion" });
+    items.push({
+      kind: "plan-completion",
+      key: "plan-completion",
+      executionId: lastExec?.metadata?.id ?? "",
+      planArtifact: findPlanArtifact(lastExec),
+    });
   }
 
   if (includeApprovals) {
@@ -674,7 +687,18 @@ export function ThreadItemRenderer({
     case "context-compacted":
       return <SummarizationCard event={item.event} />;
     case "plan-completion":
-      return <PlanCompletionCard onImplement={onBuildFromPlan} />;
+      // When the plan was published as an artifact, show the richer reviewable
+      // card (preview / copy / download / implement). Otherwise fall back to the
+      // bare Implement CTA (older executions, or a plan that failed to publish).
+      return item.planArtifact && item.executionId ? (
+        <PlanArtifactCard
+          executionId={item.executionId}
+          artifact={item.planArtifact}
+          onImplement={onBuildFromPlan}
+        />
+      ) : (
+        <PlanCompletionCard onImplement={onBuildFromPlan} />
+      );
   }
 }