@stigmer/react 3.0.8-dev.20260613041848 → 3.0.8-dev.20260613071809

package/src/execution/MessageEntry.tsx

@@ -14,6 +14,13 @@ export interface MessageEntryProps {
   readonly message: AgentMessage;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
+  /**
+   * When provided on a `MESSAGE_HUMAN` entry, a hover-revealed "Edit" button
+   * appears on the bubble. Clicking it invokes this callback — the session
+   * chat uses it to stop the in-flight turn and pre-fill the composer with
+   * this message for editing. Ignored for non-human messages.
+   */
+  readonly onEdit?: () => void;
 }
 
 /**
@@ -43,6 +50,7 @@ export interface MessageEntryProps {
 export const MessageEntry = memo(function MessageEntry({
   message,
   className,
+  onEdit,
 }: MessageEntryProps) {
   useRenderTracer("MessageEntry", {
     messageType: message.type,
@@ -52,7 +60,13 @@ export const MessageEntry = memo(function MessageEntry({
 
   switch (message.type) {
     case MessageType.MESSAGE_HUMAN:
-      return <HumanMessage content={message.content} className={className} />;
+      return (
+        <HumanMessage
+          content={message.content}
+          className={className}
+          onEdit={onEdit}
+        />
+      );
     case MessageType.MESSAGE_AI:
       return (
         <AiMessage
@@ -79,21 +93,62 @@ export const MessageEntry = memo(function MessageEntry({
 function HumanMessage({
   content,
   className,
+  onEdit,
 }: {
   content: string;
   className?: string;
+  onEdit?: () => void;
 }) {
   return (
     <div
       role="article"
       aria-label="User message"
-      className={cn("ms-[20%] rounded-lg bg-muted-subtle px-4 py-3", className)}
+      className={cn(
+        "group relative ms-[20%] rounded-lg bg-muted-subtle px-4 py-3",
+        className,
+      )}
     >
       <p className="text-sm text-foreground whitespace-pre-wrap">{content}</p>
+      {onEdit && (
+        <button
+          type="button"
+          onClick={onEdit}
+          aria-label="Edit message"
+          title="Edit"
+          className={cn(
+            "absolute -top-2.5 -right-2.5 inline-flex h-7 w-7 items-center justify-center rounded-full",
+            "border border-border bg-card text-muted-foreground shadow-sm transition",
+            "hover:text-foreground hover:bg-accent-hover",
+            "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+        >
+          <EditIcon />
+        </button>
+      )}
     </div>
   );
 }
 
+function EditIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M12 20h9" />
+      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" />
+    </svg>
+  );
+}
+
 function AiMessage({
   content,
   isStreaming,

package/src/execution/MessageThread.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { lazy, memo, Suspense, useCallback, useMemo } from "react";
+import { lazy, memo, Suspense, useCallback, useMemo, useState } 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";
@@ -60,6 +60,38 @@ export interface MessageThreadProps {
    * first snapshot.
    */
   readonly pendingUserMessage?: string | null;
+  /**
+   * Marks the pending user message as failed-to-send. The optimistic
+   * bubble renders an inline "Couldn't send — Retry" affordance instead
+   * of the sending indicator, so a failed follow-up never silently
+   * vanishes. Pair with {@link onRetrySend}.
+   *
+   * @default false
+   */
+  readonly pendingMessageFailed?: boolean;
+  /**
+   * Retry handler for a failed pending message. Wired to the inline
+   * "Retry" control when {@link pendingMessageFailed} is `true`.
+   */
+  readonly onRetrySend?: () => void;
+  /**
+   * When provided, the in-flight human turn (the active execution's prompt)
+   * shows a hover "Edit" affordance. Clicking it invokes this callback with
+   * the message text — the session chat stops the running execution and
+   * pre-fills the composer for an edit-and-resubmit.
+   *
+   * Provide this only while the active execution is stoppable; the SDK marks
+   * exactly the active-stream human turn editable. When omitted, no edit
+   * control is shown (backward compatible).
+   */
+  readonly onEditMessage?: (text: string) => void;
+  /**
+   * Retry handler for a terminal-failed execution that exposed a server
+   * error reason. Receives the originating message; the consumer typically
+   * resends it as a new execution. When omitted, no Retry control is shown
+   * beside the surfaced failure reason.
+   */
+  readonly onRetryExecution?: (message: string) => void;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
   /**
@@ -178,10 +210,11 @@ export interface MessageThreadProps {
  * part of the public API.
  */
 export type ThreadItem =
-  | { readonly kind: "message"; readonly message: AgentMessage; readonly key: string; readonly isPending?: boolean }
+  | { readonly kind: "message"; readonly message: AgentMessage; readonly key: string; readonly isPending?: boolean; readonly isFailed?: boolean; readonly isEditable?: boolean }
   | { readonly kind: "tool-group"; readonly toolCalls: readonly ToolCall[]; readonly subAgentExecutions: readonly SubAgentExecution[]; readonly key: string }
   | { readonly kind: "sub-agent"; readonly subAgentExecution: SubAgentExecution; readonly key: string }
   | { readonly kind: "phase-badge"; readonly phase: ExecutionPhase; readonly key: string }
+  | { readonly kind: "execution-error"; readonly error: string; readonly retryMessage?: string; readonly key: string }
   | { 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 }
@@ -216,6 +249,8 @@ export function buildThreadItems(
   includeApprovals: boolean,
   workspaceEntries: readonly WorkspaceEntry[] | undefined,
   summarizationEvents?: readonly SummarizationEventView[],
+  pendingMessageFailed = false,
+  editableActiveTurn = false,
 ): ThreadItem[] {
   const items: ThreadItem[] = [];
   const allExecutions = activeStreamExecution
@@ -274,6 +309,9 @@ export function buildThreadItems(
         kind: "message",
         message: syntheticHumanMsg,
         key: bridgePending ? "pending-user-turn" : `${execId}-spec`,
+        // The active execution's prompt is the one a user can edit-and-resubmit
+        // (stop + rephrase). Only mark it when the consumer enabled editing.
+        isEditable: isActiveStreamExec && editableActiveTurn,
       });
     }
 
@@ -393,6 +431,22 @@ export function buildThreadItems(
       phase: lastPhase,
       key: `phase-${lastPhase}`,
     });
+
+    // The server populates `status.error` only on EXECUTION_FAILED. Surface it
+    // beside the badge so a failure that produced no messages still explains
+    // itself (the CLI shows this reason; the chat previously showed nothing).
+    // Kept as its own item so the badge component stays presentational.
+    const reason = lastExec?.status?.error;
+    if (reason) {
+      const specMessage = lastExec?.spec?.message;
+      items.push({
+        kind: "execution-error",
+        error: reason,
+        retryMessage:
+          specMessage && specMessage !== "execute" ? specMessage : undefined,
+        key: `execution-error-${lastExec?.metadata?.id ?? lastPhase}`,
+      });
+    }
   }
 
   if (
@@ -430,7 +484,10 @@ export function buildThreadItems(
         kind: "message",
         message: syntheticPending,
         key: "pending-user-turn",
-        isPending: true,
+        // A failed turn shows the inline error instead of the dimmed
+        // sending state — the two are mutually exclusive.
+        isPending: !pendingMessageFailed,
+        isFailed: pendingMessageFailed,
       });
     }
   }
@@ -465,6 +522,10 @@ export function MessageThread({
   executions,
   activeStreamExecution,
   pendingUserMessage,
+  pendingMessageFailed = false,
+  onRetrySend,
+  onRetryExecution,
+  onEditMessage,
   className,
   formatToolCallSummary,
   onApprovalSubmit,
@@ -482,9 +543,10 @@ export function MessageThread({
   useRenderTracer("MessageThread", { executions, activeStreamExecution });
 
   const includeApprovals = onApprovalSubmit != null;
+  const editableActiveTurn = onEditMessage != null;
   const items = useMemo(
-    () => buildThreadItems(executions, activeStreamExecution, pendingUserMessage, includeApprovals, workspaceEntries, summarizationEvents),
-    [executions, activeStreamExecution, pendingUserMessage, includeApprovals, workspaceEntries, summarizationEvents],
+    () => buildThreadItems(executions, activeStreamExecution, pendingUserMessage, includeApprovals, workspaceEntries, summarizationEvents, pendingMessageFailed, editableActiveTurn),
+    [executions, activeStreamExecution, pendingUserMessage, includeApprovals, workspaceEntries, summarizationEvents, pendingMessageFailed, editableActiveTurn],
   );
 
   useKeyStability(items);
@@ -517,6 +579,9 @@ export function MessageThread({
             org={org}
             planActionsDisabled={planActionsDisabled}
             centerContent={centerContent}
+            onRetrySend={onRetrySend}
+            onRetryExecution={onRetryExecution}
+            onEditMessage={onEditMessage}
           />
         </Suspense>
       </div>
@@ -536,6 +601,9 @@ export function MessageThread({
       onBuildFromPlan={onBuildFromPlan}
       org={org}
       planActionsDisabled={planActionsDisabled}
+      onRetrySend={onRetrySend}
+      onRetryExecution={onRetryExecution}
+      onEditMessage={onEditMessage}
     />
   );
 }
@@ -560,6 +628,9 @@ interface NonVirtualizedThreadProps {
   readonly onBuildFromPlan?: () => void;
   readonly org?: string;
   readonly planActionsDisabled?: boolean;
+  readonly onRetrySend?: () => void;
+  readonly onRetryExecution?: (message: string) => void;
+  readonly onEditMessage?: (text: string) => void;
 }
 
 function NonVirtualizedThread({
@@ -574,6 +645,9 @@ function NonVirtualizedThread({
   onBuildFromPlan,
   org,
   planActionsDisabled,
+  onRetrySend,
+  onRetryExecution,
+  onEditMessage,
 }: NonVirtualizedThreadProps) {
   const { scrollRef, sentinelRef, contentRef, isFollowing, jumpToLatest } =
     useAutoScroll();
@@ -609,6 +683,9 @@ function NonVirtualizedThread({
                   onBuildFromPlan={onBuildFromPlan}
                   org={org}
                   planActionsDisabled={planActionsDisabled}
+                  onRetrySend={onRetrySend}
+                  onRetryExecution={onRetryExecution}
+                  onEditMessage={onEditMessage}
                 />
               </ThreadItemWrapper>
             ))}
@@ -645,6 +722,9 @@ export interface ThreadItemRendererProps {
   readonly onBuildFromPlan?: () => void;
   readonly org?: string;
   readonly planActionsDisabled?: boolean;
+  readonly onRetrySend?: () => void;
+  readonly onRetryExecution?: (message: string) => void;
+  readonly onEditMessage?: (text: string) => void;
 }
 
 /**
@@ -666,13 +746,26 @@ export function ThreadItemRenderer({
   onBuildFromPlan,
   org,
   planActionsDisabled,
+  onRetrySend,
+  onRetryExecution,
+  onEditMessage,
 }: ThreadItemRendererProps) {
   switch (item.kind) {
     case "message":
+      if (item.isFailed) {
+        return (
+          <FailedUserMessage message={item.message} onRetry={onRetrySend} />
+        );
+      }
       return (
         <MessageEntry
           message={item.message}
           className={item.isPending ? "opacity-70" : undefined}
+          onEdit={
+            item.isEditable && onEditMessage
+              ? () => onEditMessage(item.message.content)
+              : undefined
+          }
         />
       );
     case "tool-group":
@@ -697,6 +790,14 @@ export function ThreadItemRenderer({
           <ExecutionPhaseBadge phase={item.phase} />
         </div>
       );
+    case "execution-error":
+      return (
+        <ExecutionErrorNotice
+          error={item.error}
+          retryMessage={item.retryMessage}
+          onRetry={onRetryExecution}
+        />
+      );
     case "approval-request":
       return (
         <ApprovalCardRow
@@ -736,6 +837,103 @@ export function ThreadItemRenderer({
   }
 }
 
+// ---------------------------------------------------------------------------
+// FailedUserMessage — optimistic turn whose send failed
+// ---------------------------------------------------------------------------
+
+/**
+ * Renders a user message whose send failed: the message itself stays visible
+ * (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.
+ */
+function FailedUserMessage({
+  message,
+  onRetry,
+}: {
+  message: AgentMessage;
+  onRetry?: () => void;
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <MessageEntry message={message} />
+      <div
+        role="alert"
+        className="mx-4 flex items-center gap-2 text-xs text-destructive"
+      >
+        <span className="min-w-0 flex-1 truncate">Couldn&rsquo;t send.</span>
+        {onRetry && (
+          <button
+            type="button"
+            onClick={onRetry}
+            className="shrink-0 rounded font-medium underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            Retry
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ExecutionErrorNotice — server failure reason for a terminal-failed execution
+// ---------------------------------------------------------------------------
+
+/**
+ * Renders the server-reported failure reason (`AgentExecutionStatus.error`)
+ * for an execution that died — typically before producing any messages. The
+ * reason can be a long Temporal error, so it is clamped by default with a
+ * Show more / Show less toggle. An optional Retry resends the originating
+ * message as a fresh execution.
+ */
+function ExecutionErrorNotice({
+  error,
+  retryMessage,
+  onRetry,
+}: {
+  error: string;
+  retryMessage?: string;
+  onRetry?: (message: string) => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const canRetry = !!onRetry && !!retryMessage;
+
+  return (
+    <div
+      role="alert"
+      className="mx-4 flex flex-col gap-1.5 rounded-md bg-destructive-subtle px-3 py-2"
+    >
+      <p
+        className={cn(
+          "text-xs whitespace-pre-wrap break-words text-destructive",
+          !expanded && "line-clamp-3",
+        )}
+      >
+        {error}
+      </p>
+      <div className="flex items-center gap-3 text-xs">
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          className="font-medium text-muted-foreground underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {expanded ? "Show less" : "Show more"}
+        </button>
+        {canRetry && (
+          <button
+            type="button"
+            onClick={() => onRetry!(retryMessage!)}
+            className="font-medium text-foreground underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            Retry
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // ApprovalCardRow — stabilizes the onSubmit callback for React.memo
 // ---------------------------------------------------------------------------

package/src/execution/__tests__/MessageThread.test.tsx

@@ -73,6 +73,7 @@ function makeExecution(opts: {
   phase?: ExecutionPhase;
   interactionMode?: InteractionMode;
   aiContent?: string;
+  error?: string;
 }): AgentExecution {
   const exec = create(AgentExecutionSchema);
 
@@ -91,6 +92,9 @@ function makeExecution(opts: {
 
   const status = create(AgentExecutionStatusSchema);
   status.phase = opts.phase ?? ExecutionPhase.EXECUTION_COMPLETED;
+  if (opts.error !== undefined) {
+    status.error = opts.error;
+  }
 
   const humanMsg = create(AgentMessageSchema);
   humanMsg.type = MessageType.MESSAGE_HUMAN;
@@ -246,6 +250,132 @@ describe("MessageThread", () => {
     expect(screen.getByText(/failed/i)).toBeTruthy();
   });
 
+  it("surfaces the server failure reason for a FAILED execution", () => {
+    const exec = makeExecution({
+      id: "exec-fail-reason",
+      phase: ExecutionPhase.EXECUTION_FAILED,
+      error: "Activity task timed out (RETRY_STATE_MAXIMUM_ATTEMPTS_REACHED)",
+    });
+
+    render(<MessageThread executions={[exec]} />);
+
+    expect(
+      screen.getByText(/Activity task timed out/i),
+    ).toBeTruthy();
+  });
+
+  it("does NOT surface a failure reason for a COMPLETED execution", () => {
+    const exec = makeExecution({
+      id: "exec-ok",
+      phase: ExecutionPhase.EXECUTION_COMPLETED,
+      error: "stale error that should be ignored",
+    });
+
+    render(<MessageThread executions={[exec]} />);
+
+    expect(screen.queryByText(/stale error/i)).toBeNull();
+  });
+
+  it("offers a Retry that resends the originating message on failure", () => {
+    const exec = makeExecution({
+      id: "exec-retry",
+      specMessage: "do the thing",
+      phase: ExecutionPhase.EXECUTION_FAILED,
+      error: "boom",
+    });
+    const onRetryExecution = vi.fn();
+
+    render(
+      <MessageThread executions={[exec]} onRetryExecution={onRetryExecution} />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /retry/i }));
+    expect(onRetryExecution).toHaveBeenCalledWith("do the thing");
+  });
+
+  it("renders a failed pending message with an inline Retry", () => {
+    const onRetrySend = vi.fn();
+
+    render(
+      <MessageThread
+        executions={[]}
+        pendingUserMessage="unsent message"
+        pendingMessageFailed
+        onRetrySend={onRetrySend}
+      />,
+    );
+
+    expect(screen.getByText("unsent message")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: /retry/i }));
+    expect(onRetrySend).toHaveBeenCalledOnce();
+  });
+
+  it("shows an Edit affordance on the in-flight human turn and routes onEditMessage", () => {
+    const active = makeExecution({
+      id: "exec-active",
+      specMessage: "fix the bug",
+      phase: ExecutionPhase.EXECUTION_IN_PROGRESS,
+      aiContent: "working on it",
+    });
+    const onEditMessage = vi.fn();
+
+    render(
+      <MessageThread
+        executions={[]}
+        activeStreamExecution={active}
+        onEditMessage={onEditMessage}
+      />,
+    );
+
+    const editBtn = screen.getByRole("button", { name: "Edit message" });
+    fireEvent.click(editBtn);
+    expect(onEditMessage).toHaveBeenCalledWith("fix the bug");
+  });
+
+  it("shows no Edit affordance when onEditMessage is omitted", () => {
+    const active = makeExecution({
+      id: "exec-active",
+      specMessage: "fix the bug",
+      phase: ExecutionPhase.EXECUTION_IN_PROGRESS,
+    });
+
+    render(
+      <MessageThread executions={[]} activeStreamExecution={active} />,
+    );
+
+    expect(
+      screen.queryByRole("button", { name: "Edit message" }),
+    ).toBeNull();
+  });
+
+  it("marks only the active-stream human turn editable, not completed turns", () => {
+    const completed = makeExecution({
+      id: "exec-done",
+      specMessage: "old turn",
+      phase: ExecutionPhase.EXECUTION_COMPLETED,
+    });
+    const active = makeExecution({
+      id: "exec-active",
+      specMessage: "new turn",
+      phase: ExecutionPhase.EXECUTION_IN_PROGRESS,
+    });
+    const onEditMessage = vi.fn();
+
+    render(
+      <MessageThread
+        executions={[completed]}
+        activeStreamExecution={active}
+        onEditMessage={onEditMessage}
+      />,
+    );
+
+    const editBtns = screen.getAllByRole("button", { name: "Edit message" });
+    expect(editBtns).toHaveLength(1);
+
+    fireEvent.click(editBtns[0]);
+    expect(onEditMessage).toHaveBeenCalledWith("new turn");
+  });
+
   it("renders plan-completion card when last execution is completed Plan mode", () => {
     const exec = makeExecution({
       id: "exec-plan",