@stigmer/react 3.1.4 → 3.1.6

package/src/execution/MessageThread.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { lazy, memo, Suspense, useCallback, useMemo, useState } from "react";
+import { lazy, memo, Suspense, useCallback, useMemo, useState, type ComponentType } from "react";
 import { create } from "@bufbuild/protobuf";
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
 import type { AgentMessage, ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
@@ -21,18 +21,19 @@ import type { WorkspaceEntry } from "@stigmer/protos/ai/stigmer/agentic/session/
 import { displayFileChangeSets } from "@stigmer/sdk";
 import { cn } from "@stigmer/theme";
 import { isTerminalPhase } from "./execution-phases.js";
-import { MessageEntry } from "./MessageEntry.js";
+import { MessageEntry, type MessageEntryProps } from "./MessageEntry.js";
 import { ToolCallGroup } from "./ToolCallGroup.js";
 import { SubAgentSection } from "./SubAgentSection.js";
 import { ExecutionPhaseBadge } from "./ExecutionPhaseBadge.js";
-import { SetupProgress } from "./SetupProgress.js";
-import { ApprovalCard } from "./ApprovalCard.js";
+import { SetupProgress, type SetupProgressProps } from "./SetupProgress.js";
+import { ApprovalCard, type ApprovalCardProps } from "./ApprovalCard.js";
 import { FileReviewCard } from "./FileReviewCard.js";
 import { SummarizationCard } from "./SummarizationCard.js";
-import { PlanCompletionCard } from "./PlanCompletionCard.js";
-import { PlanArtifactCard } from "./PlanArtifactCard.js";
-import { PlanStreamingCard } from "./PlanStreamingCard.js";
-import { TodoCard } from "./TodoCard.js";
+import { PlanCompletionCard, type PlanCompletionCardProps } from "./PlanCompletionCard.js";
+import { PlanArtifactCard, type PlanArtifactCardProps } from "./PlanArtifactCard.js";
+import { PlanStreamingCard, type PlanStreamingCardProps } from "./PlanStreamingCard.js";
+import { TodoCard, type TodoCardProps } from "./TodoCard.js";
+import type { TodoRowProps } from "./TodoList.js";
 import { findPlanArtifact } from "../library/detect-plan-artifact.js";
 import { findStreamingPlan } from "../library/detect-streaming-plan.js";
 import type { SummarizationEventView } from "./useContextWindow.js";
@@ -63,6 +64,49 @@ const EMPTY_APPROVALS: readonly PendingApproval[] = [];
 const EMPTY_SUBMITTING_IDS: ReadonlySet<string> = new Set();
 const EMPTY_APPROVAL_ERRORS: ReadonlyMap<string, Error> = new Map();
 
+/**
+ * Component overrides for the chrome {@link MessageThread} renders — the
+ * adaptation surface for hosts whose design system needs different
+ * *structure*, not just different `--stgm-*` token values (stigmer#187).
+ *
+ * Each slot is keyed by the built-in component it replaces and receives
+ * exactly that component's exported props interface, so an override can
+ * always delegate to the built-in for the cases it does not customize
+ * (e.g. a `MessageEntry` slot that restyles `MESSAGE_HUMAN` bubbles and
+ * renders the default `MessageEntry` for everything else).
+ *
+ * Define slot components at module level (or memoize them). The thread's
+ * rows rely on `React.memo` + structural sharing to skip re-renders during
+ * streaming (DD-009/DD-010); a slot component recreated on every host
+ * render defeats that for its rows.
+ */
+export interface MessageThreadSlots {
+  /**
+   * All message bubbles — human, assistant, thinking, and system entries.
+   * Also wraps the failed-send bubble (the inline Retry chrome around it
+   * stays built-in).
+   */
+  readonly MessageEntry?: ComponentType<MessageEntryProps>;
+  /** The HITL tool-approval gate card. */
+  readonly ApprovalCard?: ComponentType<ApprovalCardProps>;
+  /** The collapsible in-thread to-dos card. */
+  readonly TodoCard?: ComponentType<TodoCardProps>;
+  /**
+   * One to-do row inside the built-in {@link TodoCard}'s list. Ignored
+   * when `TodoCard` is also overridden (the replacement receives it via
+   * {@link TodoCardProps.TodoRow} and may forward or ignore it).
+   */
+  readonly TodoRow?: ComponentType<TodoRowProps>;
+  /** Completed Plan turn that published a plan artifact. */
+  readonly PlanArtifactCard?: ComponentType<PlanArtifactCardProps>;
+  /** Completed Plan turn without an artifact — the bare Implement CTA. */
+  readonly PlanCompletionCard?: ComponentType<PlanCompletionCardProps>;
+  /** Live stand-in card while a Plan turn is writing its document. */
+  readonly PlanStreamingCard?: ComponentType<PlanStreamingCardProps>;
+  /** Pre-first-token setup / "Thinking…" indicator. */
+  readonly SetupProgress?: ComponentType<SetupProgressProps>;
+}
+
 /** Props for {@link MessageThread}. */
 export interface MessageThreadProps {
   /** Completed executions in chronological order. */
@@ -261,6 +305,12 @@ export interface MessageThreadProps {
    * existing consumers see no layout change.
    */
   readonly contentColumn?: ThreadContentColumn;
+  /**
+   * Component overrides for the thread's chrome — see
+   * {@link MessageThreadSlots}. Omitted slots render the built-ins;
+   * omitting the prop entirely changes nothing (DD-011).
+   */
+  readonly slots?: MessageThreadSlots;
 }
 
 /** Reading-column alignment for {@link MessageThread} content. */
@@ -1020,6 +1070,7 @@ export function MessageThread({
   planActionsDisabled,
   planBuildPending,
   contentColumn,
+  slots,
 }: MessageThreadProps) {
   useRenderTracer("MessageThread", { executions, activeStreamExecution });
 
@@ -1124,6 +1175,7 @@ export function MessageThread({
             onRetrySend={onRetrySend}
             onRetryExecution={onRetryExecution}
             onEditMessage={onEditMessage}
+            slots={slots}
           />
         </Suspense>
       </div>
@@ -1152,6 +1204,7 @@ export function MessageThread({
       onRetrySend={onRetrySend}
       onRetryExecution={onRetryExecution}
       onEditMessage={onEditMessage}
+      slots={slots}
     />
   );
 }
@@ -1186,6 +1239,7 @@ interface NonVirtualizedThreadProps {
   readonly onRetrySend?: () => void;
   readonly onRetryExecution?: (message: string) => void;
   readonly onEditMessage?: (text: string) => void;
+  readonly slots?: MessageThreadSlots;
 }
 
 function NonVirtualizedThread({
@@ -1209,6 +1263,7 @@ function NonVirtualizedThread({
   onRetrySend,
   onRetryExecution,
   onEditMessage,
+  slots,
 }: NonVirtualizedThreadProps) {
   const { scrollRef, sentinelRef, contentRef, isFollowing, jumpToLatest } =
     useAutoScroll();
@@ -1252,6 +1307,7 @@ function NonVirtualizedThread({
                   onRetrySend={onRetrySend}
                   onRetryExecution={onRetryExecution}
                   onEditMessage={onEditMessage}
+                  slots={slots}
                 />
               </ThreadItemWrapper>
             ))}
@@ -1307,6 +1363,7 @@ export interface ThreadItemRendererProps {
   readonly onRetrySend?: () => void;
   readonly onRetryExecution?: (message: string) => void;
   readonly onEditMessage?: (text: string) => void;
+  readonly slots?: MessageThreadSlots;
 }
 
 /**
@@ -1314,6 +1371,11 @@ export interface ThreadItemRendererProps {
  * the non-virtualized `items.map()` path and the virtualized
  * `Virtuoso.itemContent` callback.
  *
+ * Slot resolution happens here, per case, as `slots?.X ?? X` — no merged
+ * defaults object, no allocation, and the memoized row wrappers below
+ * (`ApprovalCardRow`, `FileReviewRecordRow`) keep their DD-010 callback
+ * stabilization around whichever component renders inside them.
+ *
  * Does not receive a `key` prop — the caller is responsible for
  * keying (either via `items.map` or `computeItemKey`).
  *
@@ -1334,16 +1396,22 @@ export function ThreadItemRenderer({
   onRetrySend,
   onRetryExecution,
   onEditMessage,
+  slots,
 }: ThreadItemRendererProps) {
   switch (item.kind) {
-    case "message":
+    case "message": {
+      const Entry = slots?.MessageEntry ?? MessageEntry;
       if (item.isFailed) {
         return (
-          <FailedUserMessage message={item.message} onRetry={onRetrySend} />
+          <FailedUserMessage
+            message={item.message}
+            onRetry={onRetrySend}
+            MessageEntryComponent={Entry}
+          />
         );
       }
       return (
-        <MessageEntry
+        <Entry
           message={item.message}
           className={item.isPending ? "opacity-70" : undefined}
           isPlanDocument={item.isPlanDocument}
@@ -1355,6 +1423,7 @@ export function ThreadItemRenderer({
           }
         />
       );
+    }
     case "tool-group":
       return (
         <ToolCallGroup
@@ -1392,30 +1461,37 @@ export function ThreadItemRenderer({
           onApprovalSubmit={onApprovalSubmit!}
           isSubmitting={submittingApprovalIds?.has(item.pendingApproval.toolCallId) ?? false}
           error={approvalErrors?.get(item.pendingApproval.toolCallId) ?? null}
+          ApprovalCardComponent={slots?.ApprovalCard ?? ApprovalCard}
         />
       );
     case "file-review-record":
       return <FileReviewRecordRow fileChangeSet={item.fileChangeSet} />;
-    case "setup-progress":
+    case "setup-progress": {
+      const Setup = slots?.SetupProgress ?? SetupProgress;
       return (
-        <SetupProgress
+        <Setup
           workspaceEntries={item.workspaceEntries}
           serverPhase={item.serverPhase}
           isAwaitingResponse={item.isAwaitingResponse}
         />
       );
+    }
     case "context-compacted":
       return <SummarizationCard event={item.event} />;
-    case "todos":
-      return <TodoCard todos={item.todos} className="mx-4" />;
-    case "plan-completion":
+    case "todos": {
+      const Todos = slots?.TodoCard ?? TodoCard;
+      return <Todos todos={item.todos} className="mx-4" TodoRow={slots?.TodoRow} />;
+    }
+    case "plan-completion": {
       // 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).
       // Only the latest plan receives the build action — a superseded plan's
       // card is review-only, so a stale plan can never be implemented from it.
+      const Artifact = slots?.PlanArtifactCard ?? PlanArtifactCard;
+      const Completion = slots?.PlanCompletionCard ?? PlanCompletionCard;
       return item.planArtifact && item.executionId ? (
-        <PlanArtifactCard
+        <Artifact
           executionId={item.executionId}
           artifact={item.planArtifact}
           title={item.planTitle}
@@ -1432,17 +1508,19 @@ export function ThreadItemRenderer({
           buildPending={planBuildPending}
         />
       ) : (
-        <PlanCompletionCard
+        <Completion
           onImplement={item.isLatestPlan ? onBuildFromPlan : undefined}
           disabled={planActionsDisabled}
         />
       );
-    case "plan-writing":
+    }
+    case "plan-writing": {
       // The live stand-in for a plan the active turn is writing. Emitted only
       // when onOpenPlan is wired (see buildThreadItems' collapseStreamingPlan
       // gate), so the action is always available in practice.
+      const Streaming = slots?.PlanStreamingCard ?? PlanStreamingCard;
       return (
-        <PlanStreamingCard
+        <Streaming
           title={item.planTitle}
           sizeBytes={item.planSize}
           onOpenPlan={
@@ -1450,6 +1528,7 @@ export function ThreadItemRenderer({
           }
         />
       );
+    }
   }
 }
 
@@ -1462,17 +1541,22 @@ export function ThreadItemRenderer({
  * (so the typed text is never lost) with an inline, actionable error beneath
  * it. The error copy is intentionally short — the full reason is surfaced by
  * the consumer's send-error banner; this is the in-thread "Retry" affordance.
+ *
+ * The bubble renders through the caller-resolved MessageEntry slot so an
+ * overridden bubble style also applies to failed sends.
  */
 function FailedUserMessage({
   message,
   onRetry,
+  MessageEntryComponent,
 }: {
   message: AgentMessage;
   onRetry?: () => void;
+  MessageEntryComponent: ComponentType<MessageEntryProps>;
 }) {
   return (
     <div className="flex flex-col gap-1">
-      <MessageEntry message={message} />
+      <MessageEntryComponent message={message} />
       <div
         role="alert"
         className="mx-4 flex items-center gap-2 text-xs text-destructive"
@@ -1587,6 +1671,9 @@ interface ApprovalCardRowProps {
   // This gate's last failed decision, or null — a stable ref from the
   // approvalErrors map, so the row re-renders only when its error appears/clears.
   readonly error?: Error | null;
+  // The (possibly slotted) card component. The row's callback stabilization
+  // wraps whichever card renders, so a slot override keeps the memo behavior.
+  readonly ApprovalCardComponent: ComponentType<ApprovalCardProps>;
 }
 
 const ApprovalCardRow = memo(function ApprovalCardRow({
@@ -1594,6 +1681,7 @@ const ApprovalCardRow = memo(function ApprovalCardRow({
   onApprovalSubmit,
   isSubmitting,
   error = null,
+  ApprovalCardComponent,
 }: ApprovalCardRowProps) {
   const handleSubmit = useCallback(
     (action: ApprovalAction, comment?: string) => {
@@ -1603,7 +1691,7 @@ const ApprovalCardRow = memo(function ApprovalCardRow({
   );
 
   return (
-    <ApprovalCard
+    <ApprovalCardComponent
       pendingApproval={pendingApproval}
       onSubmit={handleSubmit}
       isSubmitting={isSubmitting}

package/src/execution/TodoCard.tsx

@@ -1,12 +1,17 @@
 "use client";
 
-import { memo, useMemo } from "react";
+import { memo, useMemo, type ComponentType } from "react";
 import type { TodoItem } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/todo_pb";
 import { TodoStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
 import { useRenderTracer } from "../internal/dev/index.js";
 import { useAutoDisclosure } from "../internal/useAutoDisclosure.js";
-import { TodoList, findActiveTodo, todoCompletionSummary } from "./TodoList.js";
+import {
+  TodoList,
+  findActiveTodo,
+  todoCompletionSummary,
+  type TodoRowProps,
+} from "./TodoList.js";
 
 /** Props for {@link TodoCard}. */
 export interface TodoCardProps {
@@ -18,6 +23,12 @@ export interface TodoCardProps {
   readonly todos: { readonly [key: string]: TodoItem };
   /** Additional CSS class names for the root container. */
   readonly className?: string;
+  /**
+   * Replacement row component, forwarded to the inner {@link TodoList}.
+   * Lets a host restyle individual rows while keeping the card's
+   * collapse/progress chrome. Defaults to the built-in {@link TodoRow}.
+   */
+  readonly TodoRow?: ComponentType<TodoRowProps>;
 }
 
 /**
@@ -52,6 +63,7 @@ export interface TodoCardProps {
 export const TodoCard = memo(function TodoCard({
   todos,
   className,
+  TodoRow,
 }: TodoCardProps) {
   useRenderTracer("TodoCard", { todos });
 
@@ -121,7 +133,7 @@ export const TodoCard = memo(function TodoCard({
 
       {expanded && (
         <div className="border-t border-border-muted px-2.5 py-2">
-          <TodoList todos={todos} />
+          <TodoList todos={todos} TodoRow={TodoRow} />
         </div>
       )}
     </div>
@@ -139,7 +151,11 @@ export function todoCardPropsEqual(
   prev: Readonly<TodoCardProps>,
   next: Readonly<TodoCardProps>,
 ): boolean {
-  return prev.todos === next.todos && prev.className === next.className;
+  return (
+    prev.todos === next.todos &&
+    prev.className === next.className &&
+    prev.TodoRow === next.TodoRow
+  );
 }
 
 // ---------------------------------------------------------------------------

package/src/execution/TodoList.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, type ComponentType } from "react";
 import type { TodoItem } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/todo_pb";
 import { TodoStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
@@ -14,6 +14,12 @@ export interface TodoListProps {
   readonly todos: { readonly [key: string]: TodoItem };
   /** Additional CSS class names for the root container. */
   readonly className?: string;
+  /**
+   * Replacement row component. Receives {@link TodoRowProps} for each
+   * item; defaults to the built-in {@link TodoRow}. Renders inside a
+   * `<ul role="list">`, so the component must produce an `<li>`.
+   */
+  readonly TodoRow?: ComponentType<TodoRowProps>;
 }
 
 const STATUS_SORT_ORDER: ReadonlyMap<TodoStatus, number> = new Map([
@@ -47,7 +53,11 @@ function todoSortKey(item: TodoItem): number {
  * <TodoList todos={todos} />
  * ```
  */
-export function TodoList({ todos, className }: TodoListProps) {
+export function TodoList({
+  todos,
+  className,
+  TodoRow: RowComponent = TodoRow,
+}: TodoListProps) {
   const sortedTodos = useMemo(() => {
     const items = Object.values(todos);
     if (items.length === 0) return [];
@@ -63,7 +73,7 @@ export function TodoList({ todos, className }: TodoListProps) {
       aria-label="Tasks"
     >
       {sortedTodos.map((item) => (
-        <TodoRow key={item.id} item={item} />
+        <RowComponent key={item.id} item={item} />
       ))}
     </ul>
   );
@@ -108,7 +118,19 @@ export function todoCompletionSummary(
 // TodoRow — single todo item with status icon
 // ---------------------------------------------------------------------------
 
-function TodoRow({ item }: { readonly item: TodoItem }) {
+/** Props for {@link TodoRow}. */
+export interface TodoRowProps {
+  /** The todo item to render. */
+  readonly item: TodoItem;
+}
+
+/**
+ * One to-do checklist row: status icon plus task description, rendered as
+ * an `<li>`. The default row for {@link TodoList} — replace it via the
+ * `TodoRow` prop (or `MessageThread`'s `slots.TodoRow`) to restyle rows or
+ * bring host iconography while keeping the built-in card chrome.
+ */
+export function TodoRow({ item }: TodoRowProps) {
   const Icon = TODO_ICONS[item.status] ?? TodoPendingIcon;
   const colorClass = TODO_COLORS[item.status] ?? "text-muted-foreground";
   const cancelled = item.status === TodoStatus.TODO_CANCELLED;

package/src/execution/ToolCallDetail.tsx

@@ -1,9 +1,14 @@
 "use client";
 
+import { useMemo } from "react";
+import type { CapturedFileChange } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/filereview_pb";
 import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { toDisplayFileChange } from "@stigmer/sdk";
 import type { ToolResultView } from "@stigmer/sdk";
 import { cn } from "@stigmer/theme";
 import { BoundedContent } from "../internal/BoundedContent.js";
+import { FileChangeDiff } from "./FileChangesView.js";
+import { useFileReviewRowChange } from "./FileReviewContext.js";
 import { McpToolDetail } from "./McpToolDetail.js";
 import { ToolArgsView } from "./ToolArgsView.js";
 import { ResultView } from "./ResultView.js";
@@ -43,8 +48,9 @@ export interface ToolCallDetailProps {
  * degrade to readable JSON instead of a raw dump.
  *
  * Composition varies by category to avoid redundancy: an edit shows only the
- * diff (which already names the file and quantifies the change); a write shows
- * its input content; a read shows just the path.
+ * diff (which already names the file and quantifies the change); a stamped
+ * write shows its change set's captured diff, degrading to the proposed
+ * content when no capture resolves; a read shows just the path.
  *
  * Importable on its own by platform builders composing custom tool UIs.
  *
@@ -60,6 +66,16 @@ export function ToolCallDetail({
 }: ToolCallDetailProps) {
   const { category, result, primaryArg } = useToolPresentation(toolCall);
 
+  // The captured net change a stamped write row renders as its inline diff
+  // (see the write branch below). Resolved here unconditionally (Rules of
+  // Hooks); null for every other category's rows — they are never stamped —
+  // and for every honest-degradation case, so this costs nothing outside the
+  // stamped-write path.
+  const capturedChange = useFileReviewRowChange(
+    toolCall.fileChangeSetId,
+    primaryArg,
+  );
+
   return (
     <div className={cn("space-y-2 text-xs", className)}>
       <CategoryDetail
@@ -68,6 +84,7 @@ export function ToolCallDetail({
         result={result}
         primaryArg={primaryArg}
         primaryArgTruncated={primaryArgTruncated}
+        capturedChange={capturedChange}
       />
     </div>
   );
@@ -90,12 +107,14 @@ function CategoryDetail({
   result,
   primaryArg,
   primaryArgTruncated,
+  capturedChange,
 }: {
   toolCall: ToolCall;
   category: ToolCategory;
   result: ToolResultView;
   primaryArg: string | null;
   primaryArgTruncated: boolean;
+  capturedChange: CapturedFileChange | null;
 }) {
   const args = <ArgsSection toolCall={toolCall} />;
 
@@ -128,27 +147,50 @@ function CategoryDetail({
       );
 
     case "edit":
-    case "write":
+    case "write": {
       // The diff already names the file and quantifies the change, so it stands
-      // alone — showing the written content as an argument would duplicate it. A
-      // write whose capture is unavailable degrades to a `file` result here
-      // (ResultView shows the content), so the input is never lost. The owning
-      // row already names the file, so the body suppresses the path.
+      // alone — showing the written content as an argument would duplicate it.
+      // The owning row already names the file, so the body suppresses the path.
       //
-      // The diff is the one tool body with no internal truncation of its own, so
-      // it is bounded by the shared BoundedContent budget (the same clamp the
-      // approval gate diff uses) — a large or still-streaming edit shows a
-      // consistent, scannable window with one in-place reveal, never the whole
-      // file. Every other category's body self-truncates (terminal / text via
-      // CollapsiblePre), so only edit/write wrap here — never double-bound.
+      // An EDIT's diff is reconstructed per-call from its own args (old/new
+      // strings, or the Cursor envelope's unified diff). A whole-file WRITE has
+      // no per-call before-image in its args, so a stamped write renders the
+      // captured NET change from its change set instead — the same artifact the
+      // row's review badge refers to, resolved through the same path matcher so
+      // the two can never disagree. An unresolvable write (still streaming
+      // before the turn-boundary capture, no capture mode, legacy session, or a
+      // non-reviewable change) keeps the honest fallback: the proposed content
+      // from the args, as a `file` view.
+      if (category === "write" && capturedChange) {
+        return (
+          <>
+            <ProvenanceNote toolCall={toolCall} />
+            <CapturedRowDiff change={capturedChange} />
+          </>
+        );
+      }
+      // Bounding is keyed on the VIEW, not the category: BoundedContent is for
+      // bodies with no internal truncation of their own — the diff and a FAILED
+      // call's error `<pre>` — giving a large or still-streaming edit the same
+      // scannable clamp the approval gate uses. The `file` view self-truncates
+      // (CollapsibleCode's line cap), so wrapping it would stack two reveal
+      // controls on one block — exactly what BoundedContent's contract forbids.
+      const body = (
+        <ResultView view={result} showFileName={false} showStats={false} />
+      );
       return (
         <>
           <ProvenanceNote toolCall={toolCall} />
-          <BoundedContent cursorTarget="tool-detail-expand">
-            <ResultView view={result} showFileName={false} showStats={false} />
-          </BoundedContent>
+          {result.type === "file" ? (
+            body
+          ) : (
+            <BoundedContent cursorTarget="tool-detail-expand">
+              {body}
+            </BoundedContent>
+          )}
         </>
       );
+    }
 
     case "read":
     case "delete":
@@ -245,6 +287,17 @@ function ThinkToolDetail({ toolCall }: { toolCall: ToolCall }) {
 // Shared sub-components
 // ---------------------------------------------------------------------------
 
+// A stamped write row's inline diff: the captured change projected onto the
+// display FileChange and rendered through the same bounded FileChangeDiff the
+// review card's body uses — offloaded-body fetch, binary notices, and
+// truncation states included. The file name is suppressed (the owning row
+// header names it); the `+N −M` stats stay because a write row's header
+// summary carries none.
+function CapturedRowDiff({ change }: { change: CapturedFileChange }) {
+  const adapted = useMemo(() => toDisplayFileChange(change), [change]);
+  return <FileChangeDiff change={adapted} bounded showFileName={false} />;
+}
+
 // The detail body's only metadata. Duration and the MCP slug live in the owning
 // row header (ToolCallItem / ApprovalCardHeader), so the body never restates
 // them; it surfaces the authorization provenance the runner stamped onto the

package/src/execution/WriteBackCard.tsx

@@ -17,7 +17,13 @@ export interface WriteBackCardProps {
  *
  * Shows the workspace entry name, branch, diff summary, phase
  * indicator, and a "View PR" link when the pull request was
- * successfully created. On failure, displays the error message.
+ * successfully created.
+ *
+ * Error rendering follows the record's phase honestly (DD-006):
+ * a FAILED record's error is destructive (the work did not reach the
+ * remote), while a PUSHED record carrying an error renders it as a
+ * degraded notice — the branch is live and its info stays usable; only
+ * the PR step failed.
  *
  * Themed via standard semantic tokens — no hardcoded colors, no
  * Console dependencies. Embedders can theme this card through
@@ -85,9 +91,17 @@ export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
         </div>
       )}
 
-      {/* Error message */}
-      {isFailed && writeBack.error && (
-        <div className="mt-1.5 rounded bg-destructive-subtle px-2 py-1 text-xs text-destructive">
+      {/* Error message: destructive when the write-back itself failed,
+          degraded when the branch pushed but a later step (the PR) did not. */}
+      {writeBack.error && (
+        <div
+          className={cn(
+            "mt-1.5 rounded px-2 py-1 text-xs",
+            isFailed
+              ? "bg-destructive-subtle text-destructive"
+              : "bg-status-degraded-subtle text-status-degraded",
+          )}
+        >
           {writeBack.error}
         </div>
       )}