Classify Claude auth failures and offer sign-in from the thread

apps/app/src/components/promptbox/banner/ProviderAuthBanner.test.tsx

@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ProviderAuthBanner } from "./ProviderAuthBanner";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("ProviderAuthBanner", () => {
+  it("offers a sign-in action for the failing provider", () => {
+    const onSignIn = vi.fn();
+    render(
+      <ProviderAuthBanner
+        displayName="Claude Code"
+        loginCommand="claude /login"
+        canSignIn
+        signingIn={false}
+        onSignIn={onSignIn}
+      />,
+    );
+
+    expect(
+      screen.getByRole("region", { name: "Claude Code sign-in required" }),
+    ).toBeTruthy();
+    expect(screen.getByRole("alert").textContent).toContain(
+      "Sign in again to continue this thread.",
+    );
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Sign in to Claude Code" }),
+    );
+    expect(onSignIn).toHaveBeenCalledOnce();
+  });
+
+  it("falls back to the login command when no terminal can be opened", () => {
+    render(
+      <ProviderAuthBanner
+        displayName="Claude Code"
+        loginCommand="claude /login"
+        canSignIn={false}
+        signingIn={false}
+        onSignIn={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("alert").textContent).toContain(
+      "Run claude /login where this thread runs, then send again.",
+    );
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("disables the action while the sign-in terminal is opening", () => {
+    render(
+      <ProviderAuthBanner
+        displayName="Claude Code"
+        loginCommand="claude /login"
+        canSignIn
+        signingIn
+        onSignIn={vi.fn()}
+      />,
+    );
+
+    expect(
+      (screen.getByRole("button", { name: "Opening…" }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+  });
+});

apps/app/src/components/promptbox/banner/ProviderAuthBanner.tsx

@@ -0,0 +1,75 @@
+import { Button } from "@bb/shared-ui/button";
+import { Icon } from "@bb/shared-ui/icon";
+import { PromptStackCard } from "@/components/promptbox/banner/PromptStackCard";
+
+export interface ThreadPromptProviderAuthSection {
+  displayName: string;
+  loginCommand: string | null;
+  canSignIn: boolean;
+  signingIn: boolean;
+  onSignIn: () => void;
+}
+
+function signInCopy(loginCommand: string | null, canSignIn: boolean): string {
+  if (canSignIn) {
+    return "Sign in again to continue this thread.";
+  }
+  if (loginCommand !== null) {
+    return `Run ${loginCommand} where this thread runs, then send again.`;
+  }
+  return "Sign in again where this thread runs, then send again.";
+}
+
+export function ProviderAuthBanner({
+  displayName,
+  loginCommand,
+  canSignIn,
+  signingIn,
+  onSignIn,
+}: ThreadPromptProviderAuthSection) {
+  return (
+    <PromptStackCard
+      ariaLabel={`${displayName} sign-in required`}
+      className="overflow-hidden border-attention/50 bg-surface-attention shadow-sm"
+    >
+      <div
+        role="alert"
+        className="flex min-h-14 max-w-full items-center gap-3 px-3 py-2.5"
+      >
+        <span
+          className="flex size-8 shrink-0 items-center justify-center rounded-full bg-attention/15 text-warning-text ring-1 ring-attention/25"
+          aria-hidden
+        >
+          <Icon name="Lock" className="size-4" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-semibold text-foreground">
+            {displayName} sign-in required
+          </p>
+          <p className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
+            The last turn failed because the {displayName} session is no longer
+            authorized. {signInCopy(loginCommand, canSignIn)}
+          </p>
+        </div>
+        {canSignIn ? (
+          <Button
+            type="button"
+            size="sm"
+            className="h-8 shrink-0 px-3"
+            disabled={signingIn}
+            onClick={onSignIn}
+          >
+            {signingIn ? (
+              <>
+                <Icon name="Spinner" className="animate-spin" />
+                Opening…
+              </>
+            ) : (
+              `Sign in to ${displayName}`
+            )}
+          </Button>
+        ) : null}
+      </div>
+    </PromptStackCard>
+  );
+}

apps/app/src/components/thread/timeline/ThreadTimelinePanelContent.test.tsx

@@ -97,6 +97,7 @@ function baseTimeline(
   overrides: Partial<UseThreadTimelineControllerResult> = {},
 ): UseThreadTimelineControllerResult {
   return {
+    providerAuthRequired: null,
     activePromptMode: null,
     activeThinking: null,
     activeWorkflows: [],

apps/app/src/components/thread/timeline/useThreadTimelineController.ts

@@ -32,6 +32,7 @@ export interface UseThreadTimelineControllerResult {
   isLoadingOlderTimelineRows: boolean;
   loadOlderTimelineRows: () => Promise<void>;
   pendingTodos: ThreadTimelineResponse["pendingTodos"];
+  providerAuthRequired: ThreadTimelineResponse["providerAuthRequired"];
   timelineError: Error | null;
   timelineLoading: boolean;
   timelineRows: TimelineRow[];
@@ -212,6 +213,7 @@ export function useThreadTimelineController({
     isLoadingOlderTimelineRows,
     loadOlderTimelineRows,
     pendingTodos: latestTimeline?.pendingTodos ?? null,
+    providerAuthRequired: latestTimeline?.providerAuthRequired ?? null,
     timelineError,
     timelineLoading,
     timelineRows,

apps/app/src/test/fixtures/thread-responses.ts

@@ -41,6 +41,7 @@ export function makeThreadTimelineResponse(
     pendingTodos: null,
     goal: null,
     modelFallback: null,
+    providerAuthRequired: null,
     maxSeq: 0,
     timelinePage: {
       kind: "latest",

apps/app/src/views/thread-detail/ThreadDetailPromptArea.keystrokes.test.tsx

@@ -373,6 +373,7 @@ function buildPromptArea({
         environmentGoneStatus={null}
         goal={null}
         modelFallback={null}
+        providerAuthSection={null}
         isEnvironmentActionPending={false}
         onChangedFileClick={vi.fn()}
         parentThreadSection={null}

apps/app/src/views/thread-detail/ThreadDetailPromptArea.test.tsx

@@ -36,6 +36,7 @@ import {
   setPluginSlotRegistrations,
 } from "@/lib/plugin-slots";
 import type { ChildThreadPendingAttention } from "@/hooks/queries/child-thread-pending-interactions";
+import type { ThreadPromptProviderAuthSection } from "@/components/promptbox/banner/ProviderAuthBanner";
 import {
   ThreadDetailPromptArea,
   type ThreadDetailSentMessageEdit,
@@ -692,6 +693,7 @@ interface RenderPromptAreaOptions {
   activeWorkflows?: TimelineWorkflowWorkRow[];
   goal?: ThreadTimelineGoal | null;
   modelFallback?: ThreadTimelineModelFallback | null;
+  providerAuthSection?: ThreadPromptProviderAuthSection | null;
   pendingInteractions?: readonly PendingInteraction[];
   childPendingInteractions?: readonly ChildThreadPendingAttention[];
   pendingInteractionsInitialLoading?: boolean;
@@ -705,6 +707,7 @@ function buildPromptAreaElement({
   activeWorkflows = [],
   goal = null,
   modelFallback = null,
+  providerAuthSection = null,
   pendingInteractions = [],
   childPendingInteractions = [],
   pendingInteractionsInitialLoading = false,
@@ -726,6 +729,7 @@ function buildPromptAreaElement({
       environmentGoneStatus={null}
       goal={goal}
       modelFallback={modelFallback}
+      providerAuthSection={providerAuthSection}
       isEnvironmentActionPending={false}
       onChangedFileClick={vi.fn()}
       parentThreadSection={null}
@@ -1769,4 +1773,30 @@ describe("ThreadDetailPromptArea", () => {
       },
     });
   });
+
+  it("offers provider sign-in above the composer when the last turn was unauthorized", () => {
+    const onSignIn = vi.fn();
+    renderPromptArea({
+      providerAuthSection: {
+        displayName: "Claude Code",
+        loginCommand: "claude /login",
+        canSignIn: true,
+        signingIn: false,
+        onSignIn,
+      },
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Sign in to Claude Code" }),
+    );
+    expect(onSignIn).toHaveBeenCalledOnce();
+  });
+
+  it("shows no sign-in banner while the provider is authorized", () => {
+    renderPromptArea();
+
+    expect(
+      screen.queryByRole("region", { name: "Claude Code sign-in required" }),
+    ).toBeNull();
+  });
 });

apps/app/src/views/thread-detail/ThreadDetailPromptArea.tsx

@@ -53,6 +53,10 @@ import { ThreadPromptModeCard } from "@/components/promptbox/banner/ThreadPrompt
 import { ThreadWorkflowCard } from "@/components/promptbox/banner/ThreadWorkflowCard";
 import { ThreadBackgroundCommandsCard } from "@/components/promptbox/banner/ThreadBackgroundCommandsCard";
 import { ThreadModelFallbackCard } from "@/components/promptbox/banner/ThreadModelFallbackCard";
+import {
+  ProviderAuthBanner,
+  type ThreadPromptProviderAuthSection,
+} from "@/components/promptbox/banner/ProviderAuthBanner";
 import { InlineMessageEditorFrame } from "@/components/promptbox/InlineMessageEditorFrame";
 import type {
   WorkspaceChangedFileSelection,
@@ -172,6 +176,7 @@ interface ThreadDetailPromptAreaProps {
   activePromptMode: ThreadTimelineActivePromptMode | null;
   goal: ThreadTimelineGoal | null;
   modelFallback: ThreadTimelineModelFallback | null;
+  providerAuthSection: ThreadPromptProviderAuthSection | null;
   activeWorkflows: TimelineWorkflowWorkRow[];
   activeBackgroundCommands: TimelineWorkflowWorkRow[];
   parentThreadSection: ThreadPromptParentThreadSection | null;
@@ -365,6 +370,7 @@ export function ThreadDetailPromptArea({
   activePromptMode,
   goal,
   modelFallback,
+  providerAuthSection,
   activeWorkflows,
   activeBackgroundCommands,
   parentThreadSection,
@@ -1597,6 +1603,9 @@ export function ThreadDetailPromptArea({
             threadId={thread.id}
           />
         ) : null}
+        {providerAuthSection ? (
+          <ProviderAuthBanner {...providerAuthSection} />
+        ) : null}
         {shouldHideComposer ? null : queuedMessagesPending ? (
           <QueuedMessagesPendingCard queuedMessageCount={queuedMessageCount} />
         ) : (
@@ -1651,6 +1660,7 @@ export function ThreadDetailPromptArea({
       activeBackgroundCommands,
       isBackgroundCommandsExpanded,
       modelFallback,
+      providerAuthSection,
       parentThreadSection,
       childThreadsSection,
       pullRequestSection,