fix(showcase/langgraph-python): unbreak shared-state pills, auth sign-out, gen-ui-agent progression, multimodal D5

Four independent showcase production bugs Alem reported, plus the
D5 multimodal harness regression they unblocked.

Shared-state-read-write: "Greet me" ("Say hi and introduce yourself.")
and "Plan a weekend" ("Suggest a weekend plan based on my interests.")
were matching the bare `hi` and `plan` catch-alls in feature-parity.json
and returning the generic showcase-assistant blurb / 5-step content plan
instead of shared-state-aware responses. Added pill-specific fixtures in
shared-state.json (mirrored into d5-all.json) so the longer userMessage
substrings win first-match-wins ahead of feature-parity.

Auth sign-out: signing out unmounted CopilotKit entirely and bounced
the user back to the SignInCard, so the demo never showcased the
runtime returning 401 — its whole point. The QA contract in
qa/auth.md spelled out the intended UX. Restored it: CopilotKit stays
mounted after the first sign-in, the AuthBanner flips to an amber
"Signed out — the agent will reject your messages" state with a
re-Sign-in button, and CopilotKit's `onError` callback drives a
`data-testid="auth-demo-error"` surface that displays the runtime's
401 the moment the user sends an unauthenticated message. Updated the
e2e spec to match (the old "SignInCard re-mounts after sign-out" test
pinned the regression).

Gen-ui-agent: the aimock fixture short-circuited the 7-step
progression spelled out in `gen_ui_agent.py`'s SYSTEM_PROMPT to a
single set_steps call with all three steps already `completed`, so
the InlineAgentStateCard rendered the final 3/3 state instantly with
no sequential pending → in_progress → completed animation.
Regenerated as a 7-leg toolCallId chain per pill (8 fixtures × 3
pills): seed leg keyed on userMessage with NO `hasToolResult` gate
(matching PR CopilotKit#4770's pattern — `hasToolResult: false` would block the
seed from firing on the second pill in a multi-pill session), then
six toolCallId-keyed transitions, then a final narration. Fixture
order: toolCallId legs FIRST so the most specific match wins.

Multimodal D5: the sample-attachment buttons auto-send via
`agent.addMessage + copilotkit.runAgent` (restored in PR CopilotKit#4761), but
the D5 harness still typed `input` + pressed Enter via the runner
after `preFill`, sending a second user message that competed with the
in-flight image upload — the v1 LangGraph runtime SSE stream got
tangled (browser DevTools showed `statusCode: pending` indefinitely)
and the assistant message never rendered. Added `skipSend?: boolean`
to ConversationTurn (distinct from `skipFill`, which still presses
Enter once the textarea has content) and switched d5-multimodal.ts to
`skipSend: true` with `responseTimeoutMs: 60_000` so the runner waits
on the assistant response without poking the chat further. Bumped the
PDF auto-prompt fixture in feature-parity.json to include the word
"document" so the existing `buildModalityAssertion("document")` check
still lands.

D5 result: 37 → 39 of 40 features passing. Only
`tool-rendering-reasoning-chain` remains and is a separate
agent/runtime bug (Tokyo Responses-API `reasoning` message survives
into the next turn's conversation history, runtime returns
`RUN_ERROR: "message role is not supported"`).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: tylerslaton

showcase/aimock/d5-all.json

@@ -566,7 +566,7 @@
         "userMessage": "can you tell me what is in this demo pdf I just attached"
       },
       "response": {
-        "content": "The attached PDF is the CopilotKit Quickstart guide. It walks through three steps: install `@copilotkit/react-core` and `@copilotkit/react-ui`, wrap your app in a `<CopilotKit runtimeUrl=\"/api/copilotkit\">` provider, and drop a `<CopilotChat />` wherever you want the assistant to appear."
+        "content": "The attached PDF document is the CopilotKit Quickstart guide. It walks through three steps: install `@copilotkit/react-core` and `@copilotkit/react-ui`, wrap your app in a `<CopilotKit runtimeUrl=\"/api/copilotkit\">` provider, and drop a `<CopilotChat />` wherever you want the assistant to appear."
       }
     },
     {

showcase/aimock/feature-parity.json

@@ -1,6 +1,24 @@
 {
-  "_comment": "D5 multi-turn fixture for /demos/shared-state-read-write. Uses hasToolResult matching: aimock checks for role:tool messages in the request to disambiguate multi-turn fixtures sharing the same userMessage. The 'favorite color' fixture has a unique userMessage and needs no hasToolResult. Fixtures ordered by hasToolResult false→true for readability.",
+  "_comment": "D5 multi-turn fixture for /demos/shared-state-read-write. Uses hasToolResult matching: aimock checks for role:tool messages in the request to disambiguate multi-turn fixtures sharing the same userMessage. The 'favorite color' fixture has a unique userMessage and needs no hasToolResult. Fixtures ordered by hasToolResult false→true for readability. The 'Say hi and introduce yourself' and 'Suggest a weekend plan' fixtures exist to outrun the bare 'hi' and 'plan' substring matchers in feature-parity.json — without them, the Greet me and Plan a weekend pills mismatch generic catch-alls. Mirrored verbatim into showcase/aimock/d5-all.json so re-bundling stays consistent.",
   "fixtures": [
+    {
+      "_comment": "Greet me pill (msg: 'Say hi and introduce yourself.'). Substring is unique enough to win over feature-parity's bare 'hi' matcher because d5-all.json loads before feature-parity.json. Response references the shared-state contract to demonstrate what the demo is about.",
+      "match": {
+        "userMessage": "Say hi and introduce yourself"
+      },
+      "response": {
+        "content": "Hi — I'm your shared-state co-pilot. Your Preferences panel (name, tone, language, interests) is fed to me on every turn, and I jot notes back into the Agent Scratch Pad via set_notes so the UI re-renders. Try setting your name or asking me to remember something."
+      }
+    },
+    {
+      "_comment": "Plan a weekend pill (msg: 'Suggest a weekend plan based on my interests.'). Outranks feature-parity's bare 'plan' matcher for the same reason. Response references the interests panel so the demo's intent is clear even when interests is empty.",
+      "match": {
+        "userMessage": "weekend plan based on my interests"
+      },
+      "response": {
+        "content": "A weekend tailored to your interests panel: if you haven't picked any yet, try Cooking + Travel for a market-and-day-trip combo, or Tech + Books for a maker session and a long reading afternoon. Add interests in the Preferences panel and re-ask for a more specific plan."
+      }
+    },
     {
       "match": {
         "userMessage": "remember that my favorite color is blue",

showcase/harness/fixtures/d5/gen-ui-agent.json

@@ -170,6 +170,24 @@ export interface ConversationTurn {
    * label for logging).
    */
   skipFill?: boolean;
+  /**
+   * When true, the runner skips BOTH `page.fill()` AND the Enter press
+   * for this turn — `preFill` is expected to have already issued the
+   * user message via some other path (e.g. clicking a sample-attachment
+   * button that dispatches `agent.addMessage` + `copilotkit.runAgent`).
+   *
+   * Distinct from `skipFill` (which still presses Enter once the
+   * textarea has content): a `skipFill` turn assumes preFill populated
+   * the textarea but didn't submit it, while a `skipSend` turn assumes
+   * preFill handled the whole submission and the textarea was never
+   * touched. Used by the multimodal-sample flow where the sample
+   * button auto-sends via the agent surface and the chat textarea
+   * stays empty for the entire turn.
+   *
+   * `skipSend` takes precedence over `skipFill` when both are set.
+   * `input` is ignored (used only for log labels).
+   */
+  skipSend?: boolean;
   /**
    * Optional callback executed BEFORE the runner fills the chat input
    * and presses Enter for this turn. Use this to click attachment
@@ -360,7 +378,11 @@ export async function runConversation(
         }
       }
 
-      if (turn.skipFill) {
+      if (turn.skipSend) {
+        console.debug(
+          `[conversation-runner] turn ${turnNum}/${total} — skipSend=true, preFill handled submission; not touching textarea`,
+        );
+      } else if (turn.skipFill) {
         console.debug(
           `[conversation-runner] turn ${turnNum}/${total} — skipFill=true, waiting for textarea content then pressing Enter`,
         );

showcase/harness/fixtures/d5/shared-state.json

@@ -120,15 +120,30 @@ export async function preTurnAttachPdf(page: Page): Promise<void> {
 }
 
 export function buildTurns(_ctx: D5BuildContext): ConversationTurn[] {
+  // `skipSend: true` because the sample buttons auto-send the user
+  // message via `agent.addMessage` + `copilotkit.runAgent` (see
+  // showcase/integrations/langgraph-python/src/app/demos/multimodal/
+  // sample-attachment-buttons.tsx). Without `skipSend` the runner
+  // would ALSO type `input` and press Enter, sending a second user
+  // message that competes with the in-flight image upload — the v1
+  // LangGraph runtime stream gets tangled and neither response makes
+  // it back to the UI. `input` is kept as a descriptive label for
+  // logs only. Timeout bumped to 60s to cover image-attachment payload
+  // round-trip latency (the e2e Playwright spec uses 60-90s for the
+  // same path — see tests/e2e/multimodal.spec.ts).
   return [
     {
-      input: "describe the sample image",
+      input: "image-sample-button (auto-sent)",
       preFill: preTurnAttachImage,
+      skipSend: true,
+      responseTimeoutMs: 60_000,
       assertions: buildModalityAssertion("image"),
     },
     {
-      input: "summarize the sample document",
+      input: "pdf-sample-button (auto-sent)",
       preFill: preTurnAttachPdf,
+      skipSend: true,
+      responseTimeoutMs: 60_000,
       assertions: buildModalityAssertion("document"),
     },
   ];

showcase/harness/src/probes/helpers/conversation-runner.ts

@@ -3,33 +3,61 @@
 import { Button } from "@/components/ui/button";
 
 interface AuthBannerProps {
+  authenticated: boolean;
   onSignOut: () => void;
+  onSignIn: () => void;
 }
 
 /**
- * Status strip rendered above <CopilotChat /> while the user is signed in.
+ * Status strip rendered above <CopilotChat /> in both authenticated and
+ * post-sign-out states. The post-sign-out (amber) variant exists so the demo
+ * actually showcases what its name promises — the runtime rejecting an
+ * unauthenticated request — instead of bouncing the user back to the gate
+ * page where the rejection never happens.
+ *
  * Pure presentational — owns no state itself. Testids are stable contract
  * for QA + Playwright specs.
  */
-export function AuthBanner({ onSignOut }: AuthBannerProps) {
+export function AuthBanner({
+  authenticated,
+  onSignOut,
+  onSignIn,
+}: AuthBannerProps) {
+  const classes = authenticated
+    ? "border-emerald-300 bg-emerald-50 text-emerald-900"
+    : "border-amber-300 bg-amber-50 text-amber-900";
+
   return (
     <div
       data-testid="auth-banner"
-      data-authenticated="true"
-      className="flex items-center justify-between gap-3 rounded-md border border-emerald-300 bg-emerald-50 px-4 py-2 text-sm text-emerald-900"
+      data-authenticated={authenticated ? "true" : "false"}
+      className={`flex items-center justify-between gap-3 rounded-md border px-4 py-2 text-sm ${classes}`}
     >
       <span data-testid="auth-status" className="font-medium">
-        Signed in as demo user
+        {authenticated
+          ? "✓ Signed in as demo user"
+          : "⚠ Signed out — the agent will reject your messages until you sign in."}
       </span>
-      <Button
-        type="button"
-        data-testid="auth-sign-out-button"
-        size="sm"
-        variant="outline"
-        onClick={onSignOut}
-      >
-        Sign out
-      </Button>
+      {authenticated ? (
+        <Button
+          type="button"
+          data-testid="auth-sign-out-button"
+          size="sm"
+          variant="outline"
+          onClick={onSignOut}
+        >
+          Sign out
+        </Button>
+      ) : (
+        <Button
+          type="button"
+          data-testid="auth-authenticate-button"
+          size="sm"
+          onClick={onSignIn}
+        >
+          Sign in
+        </Button>
+      )}
     </div>
   );
 }

showcase/harness/src/probes/scripts/d5-multimodal.ts

@@ -7,27 +7,53 @@
 //
 // UX shape: the demo defaults to UNAUTHENTICATED on first paint so visitors
 // land on a clear sign-in card. We don't render `<CopilotKit>` until the user
-// has a token — that sidesteps the transport 401 that would otherwise crash
-// `<CopilotChat>` during its initial `/info` handshake. Once signed in,
-// `<CopilotKit>` mounts with the bearer header attached, the chat boots
-// cleanly, and signing out unmounts the whole tree.
+// has signed in at least once — that sidesteps the transport 401 that would
+// otherwise crash `<CopilotChat>` during its initial `/info` handshake.
+// After the user signs in once, `<CopilotKit>` stays mounted across the
+// sign-out → sign-in cycle so the post-sign-out state can actually
+// demonstrate the runtime rejecting unauthenticated requests in the chat
+// surface (the whole point of the demo).
 
-import { useMemo } from "react";
-import { CopilotKit, CopilotChat } from "@copilotkit/react-core/v2";
+import { useEffect, useMemo, useState } from "react";
+import {
+  CopilotKit,
+  CopilotChat,
+  type CopilotKitCoreErrorCode,
+} from "@copilotkit/react-core/v2";
 import { AuthBanner } from "./auth-banner";
 import { SignInCard } from "./sign-in-card";
 import { useDemoAuth } from "./use-demo-auth";
+import { DEMO_TOKEN } from "./demo-token";
+
+interface AuthDemoErrorState {
+  message: string;
+  code: CopilotKitCoreErrorCode | string;
+}
 
 export default function AuthDemoPage() {
-  const { isAuthenticated, authorizationHeader, signIn, signOut } =
-    useDemoAuth();
+  const {
+    isAuthenticated,
+    authorizationHeader,
+    hasEverSignedIn,
+    signIn,
+    signOut,
+  } = useDemoAuth();
 
   const headers = useMemo<Record<string, string>>(
     () => (authorizationHeader ? { Authorization: authorizationHeader } : {}),
     [authorizationHeader],
   );
 
-  if (!isAuthenticated) {
+  const [authError, setAuthError] = useState<AuthDemoErrorState | null>(null);
+
+  // Clear stale errors as soon as the user re-authenticates. Without this
+  // the amber error surface would persist after sign-in even though the
+  // failure is no longer relevant.
+  useEffect(() => {
+    if (isAuthenticated) setAuthError(null);
+  }, [isAuthenticated]);
+
+  if (!hasEverSignedIn) {
     return (
       <div className="flex h-screen flex-col">
         <SignInCard onSignIn={signIn} />
@@ -44,12 +70,38 @@ export default function AuthDemoPage() {
       agent="auth-demo"
       headers={headers}
       useSingleEndpoint={false}
+      onError={(event) => {
+        setAuthError({
+          message: event.error?.message ?? String(event.error),
+          code: event.code,
+        });
+      }}
     >
       <div className="flex h-screen flex-col gap-3 p-6">
-        <AuthBanner onSignOut={signOut} />
+        <AuthBanner
+          authenticated={isAuthenticated}
+          onSignOut={signOut}
+          onSignIn={() => signIn(DEMO_TOKEN)}
+        />
         <header>
           <h1 className="text-lg font-semibold">Authentication</h1>
         </header>
+        {authError && !isAuthenticated && (
+          <div
+            data-testid="auth-demo-error"
+            className="rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-900"
+          >
+            <strong className="font-semibold">
+              Runtime rejected the request:
+            </strong>{" "}
+            <span data-testid="auth-demo-error-message">
+              {authError.message}
+            </span>{" "}
+            <code className="ml-1 rounded bg-amber-100 px-1 py-0.5 font-mono text-xs">
+              {authError.code}
+            </code>
+          </div>
+        )}
         <div className="flex-1 overflow-hidden rounded-md border border-neutral-200">
           <CopilotChat agentId="auth-demo" className="h-full" />
         </div>

showcase/integrations/langgraph-python/src/app/demos/auth/auth-banner.tsx

@@ -11,6 +11,15 @@ export interface DemoAuthHandle {
   token: string | null;
   /** The full `Bearer <token>` value when authenticated, otherwise null. */
   authorizationHeader: string | null;
+  /**
+   * Whether the user has signed in at least once during the current page
+   * session. Used by the page to decide between the first-paint SignInCard
+   * (never signed in) and the persistent chat-with-amber-banner state
+   * (signed in, then signed out) — the latter is the only state that
+   * actually showcases the runtime rejecting unauthenticated requests.
+   * Resets on full page reload by design.
+   */
+  hasEverSignedIn: boolean;
   /** Sign in with the provided token. */
   signIn: (token: string) => void;
   /** Clear the stored token. */
@@ -29,6 +38,7 @@ export interface DemoAuthHandle {
  */
 export function useDemoAuth(): DemoAuthHandle {
   const [token, setToken] = useState<string | null>(null);
+  const [hasEverSignedIn, setHasEverSignedIn] = useState(false);
 
   // Hydrate from localStorage after mount. Reading on initial render would
   // mismatch SSR (where window is undefined); deferring to useEffect keeps
@@ -37,7 +47,10 @@ export function useDemoAuth(): DemoAuthHandle {
     if (typeof window === "undefined") return;
     try {
       const stored = window.localStorage.getItem(STORAGE_KEY);
-      if (stored) setToken(stored);
+      if (stored) {
+        setToken(stored);
+        setHasEverSignedIn(true);
+      }
     } catch {
       // localStorage unavailable (privacy mode, etc.) — fall back to
       // in-memory only.
@@ -46,6 +59,7 @@ export function useDemoAuth(): DemoAuthHandle {
 
   const signIn = useCallback((nextToken: string) => {
     setToken(nextToken);
+    setHasEverSignedIn(true);
     try {
       window.localStorage.setItem(STORAGE_KEY, nextToken);
     } catch {
@@ -55,6 +69,9 @@ export function useDemoAuth(): DemoAuthHandle {
 
   const signOut = useCallback(() => {
     setToken(null);
+    // hasEverSignedIn intentionally stays true so the page keeps showing
+    // the chat surface (with amber banner) after sign-out. That is the
+    // state that demonstrates the runtime returning 401.
     try {
       window.localStorage.removeItem(STORAGE_KEY);
     } catch {
@@ -70,6 +87,7 @@ export function useDemoAuth(): DemoAuthHandle {
     isAuthenticated: token !== null,
     token,
     authorizationHeader: token ? `Bearer ${token}` : null,
+    hasEverSignedIn,
     signIn,
     signOut,
   };