Add inline retry action for failed user turns

- Show retry only on the failed user message
- Cover the compact inline retry flow with a browser test

Author: badcuban

apps/web/src/components/ChatView.tsx

@@ -4909,6 +4909,38 @@ export default function ChatView(props: ChatViewProps) {
     }
   }, [activeThread, environmentId]);
 
+  const failedTurnRetryAction = useMemo(() => {
+    const failedMessage = activeThread?.messages.findLast((message) => message.role === "user");
+    if (
+      !isServerThread ||
+      !activeThread?.error ||
+      !activeThread.session?.lastError ||
+      !failedMessage ||
+      activeTurnInProgress ||
+      activeThread.session?.orchestrationStatus === "starting" ||
+      activeThread.session?.orchestrationStatus === "running"
+    ) {
+      return null;
+    }
+    return {
+      messageId: failedMessage.id,
+      isRetrying: turnRetryDispatchingThreadId === activeThread.id,
+      onRetry: () => {
+        void onRetryFailedTurn();
+      },
+    };
+  }, [
+    activeThread?.error,
+    activeThread?.id,
+    activeThread?.messages,
+    activeThread?.session?.lastError,
+    activeThread?.session?.orchestrationStatus,
+    activeTurnInProgress,
+    isServerThread,
+    onRetryFailedTurn,
+    turnRetryDispatchingThreadId,
+  ]);
+
   const threadErrorRetryAction = useMemo(() => {
     if (
       !isServerThread ||
@@ -6109,6 +6141,7 @@ export default function ChatView(props: ChatViewProps) {
               workspaceRoot={activeWorkspaceRoot}
               skills={activeProviderStatus?.skills ?? EMPTY_PROVIDER_SKILLS}
               providerAuthReconnect={providerAuthReconnectPrompt}
+              failedTurnRetry={failedTurnRetryAction}
               onRunProviderAuthReconnect={runProviderAuthReconnect}
               mcpAuthReconnectStatusByServerName={activeMcpAuthReconnectStatusByServerName}
               onRunMcpAuthReconnect={runMcpAuthReconnect}

apps/web/src/components/chat/MessagesTimeline.browser.tsx

@@ -134,13 +134,13 @@ function buildLongUserMessageText(tail = "deep hidden detail only after expand")
   ).join("\n");
 }
 
-function buildUserTimelineEntry(text: string) {
+function buildUserTimelineEntry(text: string, messageId = "message-1") {
   return {
-    id: "entry-1",
+    id: `entry-${messageId}`,
     kind: "message" as const,
     createdAt: MESSAGE_CREATED_AT,
     message: {
-      id: "message-1" as never,
+      id: messageId as never,
       role: "user" as const,
       text,
       createdAt: MESSAGE_CREATED_AT,
@@ -690,6 +690,38 @@ describe("MessagesTimeline", () => {
     }
   });
 
+  it("retries only the failed user message from its compact inline action", async () => {
+    const onRetry = vi.fn();
+    const screen = await renderTimeline(
+      <MessagesTimeline
+        {...buildProps()}
+        failedTurnRetry={{
+          messageId: MessageId.make("message-2"),
+          isRetrying: false,
+          onRetry,
+        }}
+        timelineEntries={[
+          buildUserTimelineEntry("Earlier request.", "message-1"),
+          buildUserTimelineEntry("Request that failed.", "message-2"),
+        ]}
+      />,
+    );
+
+    try {
+      const retryButtons = document.querySelectorAll<HTMLButtonElement>(
+        'button[aria-label="Retry this message"]',
+      );
+      expect(retryButtons).toHaveLength(1);
+      expect(retryButtons[0]?.closest('[data-message-id="message-2"]')).not.toBeNull();
+
+      await page.getByRole("button", { name: "Retry this message" }).click();
+
+      expect(onRetry).toHaveBeenCalledOnce();
+    } finally {
+      await screen.unmount();
+    }
+  });
+
   it("exposes a continue-in-new-thread action on completed assistant messages", async () => {
     const onContinueInNewThread = vi.fn();
     await resetBrowserHoverState();

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -55,6 +55,7 @@ import {
   KeyRoundIcon,
   LoaderIcon,
   LogInIcon,
+  RefreshCwIcon,
   SearchIcon,
   ShieldCheckIcon,
   SplitIcon,
@@ -142,6 +143,7 @@ interface TimelineRowSharedState {
   providerAuthReconnect: ProviderAuthReconnectAction | null;
   resolvedProviderAuthReconnectIds: ReadonlySet<string>;
   mcpAuthReconnectStatusByServerName: ReadonlyMap<string, McpAuthReconnectStatus>;
+  failedTurnRetry: FailedTurnRetryAction | null;
   onRevertUserMessage: (messageId: MessageId) => void;
   onContinueInNewThread?: (messageId: MessageId) => void;
   onImageExpand: (preview: ExpandedImagePreview) => void;
@@ -166,6 +168,12 @@ export interface TimelineProposedPlanState {
   readonly onOpenThread: (threadId: ThreadId) => void;
 }
 
+interface FailedTurnRetryAction {
+  readonly messageId: MessageId;
+  readonly isRetrying: boolean;
+  readonly onRetry: () => void;
+}
+
 interface TimelineRowActivityState {
   isWorking: boolean;
   isRevertingCheckpoint: boolean;
@@ -515,6 +523,7 @@ interface MessagesTimelineProps {
   workspaceRoot: string | undefined;
   skills?: ReadonlyArray<Pick<ServerProviderSkill, "name" | "displayName">>;
   providerAuthReconnect?: ProviderAuthReconnectAction | null;
+  failedTurnRetry?: FailedTurnRetryAction | null;
   onRunProviderAuthReconnect?: (action: ProviderAuthReconnectAction) => void;
   mcpAuthReconnectStatusByServerName?: ReadonlyMap<string, McpAuthReconnectStatus>;
   onRunMcpAuthReconnect?: (action: McpAuthReconnectAction) => void;
@@ -571,6 +580,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
   workspaceRoot,
   skills = EMPTY_TIMELINE_SKILLS,
   providerAuthReconnect = null,
+  failedTurnRetry = null,
   onRunProviderAuthReconnect,
   mcpAuthReconnectStatusByServerName = EMPTY_MCP_AUTH_RECONNECT_STATUS,
   onRunMcpAuthReconnect,
@@ -1133,6 +1143,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
       providerAuthReconnect,
       resolvedProviderAuthReconnectIds,
       mcpAuthReconnectStatusByServerName,
+      failedTurnRetry,
       onRevertUserMessage,
       ...(onContinueInNewThread ? { onContinueInNewThread } : {}),
       onImageExpand,
@@ -1158,6 +1169,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
       providerAuthReconnect,
       resolvedProviderAuthReconnectIds,
       mcpAuthReconnectStatusByServerName,
+      failedTurnRetry,
       onRevertUserMessage,
       onContinueInNewThread,
       onImageExpand,
@@ -1806,6 +1818,7 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
   const terminalContexts = displayedUserMessage.contexts;
   const transcriptHighlights = displayedUserMessage.transcriptHighlights;
   const canRevertAgentWork = typeof row.revertTurnCount === "number";
+  const canRetryFailedTurn = ctx.failedTurnRetry?.messageId === row.message.id;
 
   return (
     <div className="flex justify-end">
@@ -1831,14 +1844,17 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
           }
           footer={
             <>
-              <div className="flex items-center gap-1.5 opacity-0 transition-opacity duration-200 focus-within:opacity-100 group-hover:opacity-100">
-                {displayedUserMessage.copyText && (
-                  <MessageCopyButton text={displayedUserMessage.copyText} />
-                )}
-                {displayedUserMessage.copyText && (
-                  <ContinueInNewThreadButton messageId={row.message.id} action="edit" />
-                )}
-                {canRevertAgentWork && <RevertUserMessageButton messageId={row.message.id} />}
+              <div className="flex items-center gap-1.5">
+                {canRetryFailedTurn && <RetryUserMessageButton />}
+                <div className="flex items-center gap-1.5 opacity-0 transition-opacity duration-200 focus-within:opacity-100 group-hover:opacity-100">
+                  {displayedUserMessage.copyText && (
+                    <MessageCopyButton text={displayedUserMessage.copyText} />
+                  )}
+                  {displayedUserMessage.copyText && (
+                    <ContinueInNewThreadButton messageId={row.message.id} action="edit" />
+                  )}
+                  {canRevertAgentWork && <RevertUserMessageButton messageId={row.message.id} />}
+                </div>
               </div>
               <p className="text-right text-xs tracking-tight tabular-nums text-muted-foreground/50">
                 {formatTimestamp(row.message.createdAt, ctx.timestampFormat)}
@@ -1921,6 +1937,31 @@ function RevertUserMessageButton({ messageId }: { messageId: MessageId }) {
   );
 }
 
+function RetryUserMessageButton() {
+  const ctx = use(TimelineRowCtx);
+  const activity = use(TimelineRowActivityCtx);
+  const retry = ctx.failedTurnRetry;
+  if (!retry) {
+    return null;
+  }
+
+  return (
+    <Button
+      type="button"
+      size="xs"
+      variant="outline"
+      disabled={retry.isRetrying || activity.isWorking}
+      onClick={retry.onRetry}
+      aria-label="Retry this message"
+      tooltip="Retry this message"
+      className="gap-1 px-2 enabled:cursor-pointer"
+    >
+      <RefreshCwIcon className={cn("size-3", retry.isRetrying && "animate-spin")} />
+      {retry.isRetrying ? "Retrying" : "Retry"}
+    </Button>
+  );
+}
+
 function ContinueInNewThreadButton({
   messageId,
   className,