From 3195fb119097c2f9694f86ef2403af50a5301ee5 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Sun, 23 Aug 2026 00:24:33 +0300
Subject: [PATCH] fix(chat): make the working status row swap seamlessly into
 the turn footer

The streaming status line and the finished turn footer are the same visual
line, but the swap used to jump: different font/color, a 2px left inset, a
20px row vs the footer's 32px (its h-8 action buttons set the height), and
the bottom-anchored chat pulling the line up because the finished message
carries more structure below its footer than the status row had.

Match the footer exactly: text-sm at muted-foreground/60, no left inset,
h-8 row, and mb-6 reserving the missing space below. Verified against the
live DOM: the footer appears at the exact pixel position the status row
occupied.
---
 packages/ui/src/components/chat/StatusRow.tsx    | 16 +++++++++++-----
 .../chat/message/parts/WorkingPlaceholder.tsx    |  8 ++++++--
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/chat/StatusRow.tsx b/packages/ui/src/components/chat/StatusRow.tsx
index 66ecde5f..1159e822 100644
--- a/packages/ui/src/components/chat/StatusRow.tsx
+++ b/packages/ui/src/components/chat/StatusRow.tsx
@@ -306,13 +306,19 @@ export const StatusRow: React.FC<StatusRowProps> = ({
 
   return (
     <div
-      // Mobile: breathing room between the last message and the agent status
-      // line — without it the "<model> is running…" row sits flush against
-      // the message above.
-      className={cn("mb-1", isMobile && "mt-2", !hasLeftAccessory && "chat-column")}
+      // This row must land exactly where the assistant turn footer (mt-2
+      // inside the message) appears when the turn completes. Measured against
+      // the live DOM: the gap ABOVE already matches (message pb-2 = footer
+      // mt-2 = 8px), but the chat is bottom-anchored and the finished message
+      // carries ~12px more structure BELOW its footer than this row has — so
+      // the swap used to lift the line up. mb-6 (24px) reserves that space
+      // under this row instead (verified: row top 636 == footer top 636).
+      className={cn("mb-6", !hasLeftAccessory && "chat-column")}
       style={STATUS_ROW_CONTAINER_STYLE}
     >
-      <div className={cn("flex items-center justify-between py-0.5 gap-2 h-[1.2rem]", hasLeftAccessory && "px-0.5")}>
+      {/* h-8 matches the turn footer's real row height: its h-8 action
+          buttons define the footer line, with the meta text centered in it. */}
+      <div className={cn("flex items-center justify-between gap-2 h-8", hasLeftAccessory && "px-0.5")}>
         {/* Left: Abort status | Working placeholder | leftAccessory */}
         <div className={cn("flex-1 flex items-center min-w-0 gap-2", hasLeftAccessory ? "pl-1.5" : "overflow-x-hidden")}>
           {showAssistantStatus && showAbortStatus ? (
diff --git a/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx b/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx
index 2a980448..9260cc51 100644
--- a/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx
+++ b/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx
@@ -229,15 +229,19 @@ export function WorkingPlaceholder({
 
   return (
     <div
+      // Styled to mirror the turn footer's model row (text-sm,
+      // muted-foreground/60, no left inset): when the turn completes this row
+      // disappears and the footer appears in the same visual spot, so the two
+      // must read as the same line swapping its text.
       className={
-        'flex h-full items-center text-muted-foreground pl-0.5'
+        'flex h-full items-center text-muted-foreground/60'
       }
       role="status"
       aria-live={displayedPermission ? 'assertive' : 'polite'}
       aria-label={label}
       data-waiting={displayedPermission ? 'true' : undefined}
     >
-      <span className="typography-ui-header">
+      <span className="text-sm">
         {hasProviderLogo && providerLogoSrc ? (
           <img
             src={providerLogoSrc}