fix: show first reasoning line inline

Author: ammar-agent

src/components/Messages/ReasoningMessage.stories.tsx

@@ -135,3 +135,13 @@ export const EmptyContent: Story = {
     message: createReasoningMessage(""),
   },
 };
+export const ExpandablePreview: Story = {
+  args: {
+    message: createReasoningMessage(
+      "Assessing quicksort mechanics and choosing example array...\n" +
+        "Plan: explain pivot selection, partitioning, recursion, base case.\n" +
+        "Next, I'll outline best practices for implementing the partition step.",
+      { isStreaming: false }
+    ),
+  },
+};

src/components/Messages/ReasoningMessage.tsx

@@ -18,9 +18,12 @@ export const ReasoningMessage: React.FC<ReasoningMessageProps> = ({ message, cla
   const isStreaming = message.isStreaming;
   const trimmedContent = content?.trim() ?? "";
   const hasContent = trimmedContent.length > 0;
+  const summaryLine = hasContent ? (trimmedContent.split(/\r?\n/)[0] ?? "") : "";
+  const hasAdditionalLines = hasContent && /[\r\n]/.test(trimmedContent);
   // OpenAI models often emit terse, single-line traces; surface them inline instead of hiding behind the label.
-  const isSingleLineTrace = !isStreaming && hasContent && !/[\r\n]/.test(trimmedContent);
-  const isCollapsible = !isStreaming && hasContent && !isSingleLineTrace;
+  const isSingleLineTrace = !isStreaming && hasContent && !hasAdditionalLines;
+  const isCollapsible = !isStreaming && hasContent && hasAdditionalLines;
+  const showEllipsis = isCollapsible && !isExpanded;
 
   // Auto-collapse when streaming ends
   useEffect(() => {
@@ -77,18 +80,26 @@ export const ReasoningMessage: React.FC<ReasoningMessageProps> = ({ message, cla
           <span className="text-xs">
             <Lightbulb className={cn("size-3.5", isStreaming && "animate-pulse")} />
           </span>
-          <div className="truncate">
+          <div className="flex min-w-0 items-center gap-1 truncate">
             {isStreaming ? (
               <Shimmer colorClass="var(--color-thinking-mode)">Thinking...</Shimmer>
-            ) : isSingleLineTrace ? (
+            ) : hasContent ? (
               <MarkdownRenderer
-                content={trimmedContent}
+                content={summaryLine}
                 className="truncate [&_*]:inline [&_*]:align-baseline [&_*]:whitespace-nowrap"
                 style={{ fontSize: 12, lineHeight: "18px" }}
               />
             ) : (
               "Thought"
             )}
+            {showEllipsis && (
+              <span
+                className="text-[11px] tracking-widest text-[color:var(--color-text)] opacity-70"
+                data-testid="reasoning-ellipsis"
+              >
+                ...
+              </span>
+            )}
           </div>
         </div>
         {isCollapsible && (

tests/e2e/scenarios/toolFlows.spec.ts

@@ -141,16 +141,18 @@ test.describe("tool and reasoning flows", () => {
     }
 
     const transcript = page.getByRole("log", { name: "Conversation transcript" });
-    const thinkingHeader = transcript.getByText("Thought");
-    const hasThoughtLabel = (await thinkingHeader.count()) > 0;
+    const reasoningPreview = transcript
+      .getByText("Assessing quicksort mechanics and choosing example array...")
+      .first();
+    await expect(reasoningPreview).toBeVisible();
 
-    if (hasThoughtLabel) {
-      await expect(thinkingHeader.first()).toBeVisible();
-      await thinkingHeader.first().click();
-    }
+    const ellipsisIndicator = transcript.getByTestId("reasoning-ellipsis").first();
+    await expect(ellipsisIndicator).toBeVisible();
+
+    await reasoningPreview.click();
 
     await expect(
-      transcript.getByText("Assessing quicksort mechanics and choosing example array...")
+      transcript.getByText("Plan: explain pivot selection, partitioning, recursion, base case.")
     ).toBeVisible();
     await ui.chat.expectTranscriptContains("Quicksort works by picking a pivot");
   });