From ebed6469a023be167c588fc82482a123d3eb0dfa Mon Sep 17 00:00:00 2001
From: Daniel Han <danielhanchen@gmail.com>
Date: Tue, 19 May 2026 06:57:14 -0700
Subject: [PATCH] studio/frontend: show Generation stopped placeholder when
 cancelled mid-thinking (#5565)

* studio/frontend: show Generation stopped placeholder when cancelled mid-thinking

Closes #5563.

When the user clicks Stop before any visible content has streamed in,
the running indicator disappears but no Parts have rendered yet, leaving
just the AssistantActionBar floating below the user prompt. That looks
broken (and is the exact failure mode behind the 'tools work, but I
don't see anything happening' bucket of reports).

Add a sibling CancelledIndicator next to GeneratingIndicator that fires
when content is empty AND status is incomplete with reason cancelled,
rendering a muted 'Generation stopped.' italic. The terminal-state
label is consistent with tool-fallback's existing 'Cancelled tool'
treatment and with reasoning's 'Thought for N seconds' summary.

* studio/frontend: shorten CancelledIndicator comment

Trim the 3-line explanation to a single line describing what the
placeholder is for.

* studio/frontend: use 'Cancelled.' to match tool-fallback wording

---------

Co-authored-by: danielhanchen <michaelhan2050@gmail.com>
---
 .../src/components/assistant-ui/thread.tsx    | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx
index 8776d5d6d6..0326b90a97 100644
--- a/studio/frontend/src/components/assistant-ui/thread.tsx
+++ b/studio/frontend/src/components/assistant-ui/thread.tsx
@@ -996,6 +996,24 @@ const GeneratingIndicator: FC = () => {
   return <span className="text-sm text-muted-foreground">Generating...</span>;
 };
 
+// Placeholder when stop fires before any visible content (e.g. mid-think).
+const CancelledIndicator: FC = () => {
+  const show = useAuiState(
+    ({ message }) =>
+      message.content.length === 0 &&
+      message.status?.type === "incomplete" &&
+      message.status?.reason === "cancelled",
+  );
+  if (!show) {
+    return null;
+  }
+  return (
+    <span className="aui-cancelled-indicator text-sm italic text-muted-foreground">
+      Cancelled.
+    </span>
+  );
+};
+
 const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root
@@ -1004,6 +1022,7 @@ const AssistantMessage: FC = () => {
     >
       <div className="aui-assistant-message-content wrap-break-word min-w-0 text-[#0d0d0d] dark:text-foreground leading-relaxed">
         <GeneratingIndicator />
+        <CancelledIndicator />
         <MessagePrimitive.Parts
           components={{
             Text: MarkdownText,