From 647e3c4ff0b684b7d4dbd817ede0237a9934a49b Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 18:40:19 -0700
Subject: [PATCH] [eric] chat: calm the in-between (no glow loops, quiet
 thinking line, duration-only summary w/ metrics in tooltip)

---
 .../src/app/pages/AgentChat/AgentChat.tsx     |  18 +--
 .../pages/AgentChat/bubbles/MessageBubble.tsx | 127 +++++++++---------
 .../tool-bubbles/CreateAgentBubble.tsx        |   1 -
 .../tool-bubbles/InvokeAgentBubble.tsx        |   1 -
 4 files changed, 64 insertions(+), 83 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 278817db..a557efbf 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -169,26 +169,16 @@ const ThinkingBubble: React.FC<{ label?: string | null }> = ({ label }) => {
   // Aux-LLM label wins; otherwise the pill stays plain "Thinking". The whimsical verbs read as personality
   // in the per-message thinking bubble (MessageBubble), but as a vague, confusing status on a working card.
   const display = label ? `${label}…` : `${THINKING_LABELS[0].live}…`;
+  // A quiet shimmer LINE, not a bordered card: status shares one visual language with the
+  // per-message thinking row, so only real content gets bubbles (the ChatGPT/Claude pattern).
   return (
     <Box sx={{ display: 'flex', justifyContent: 'flex-start', my: 0.75 }}>
       <style>{thinkingShimmerKeyframes}</style>
-      <Box
-        sx={{
-          bgcolor: c.bg.surface,
-          border: `1px solid ${c.border.subtle}`,
-          borderRadius: '16px 16px 16px 4px',
-          px: 2,
-          py: 1.5,
-          boxShadow: c.shadow.sm,
-          display: 'flex',
-          alignItems: 'center',
-          minHeight: 36,
-        }}
-      >
+      <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.75, py: 0.5, px: 1, ml: -1 }}>
         <Box
           component="span"
           sx={{
-            fontSize: '0.85rem',
+            fontSize: '0.8rem',
             fontWeight: 500,
             background: `linear-gradient(90deg, ${shimmerBase} 0%, ${shimmerBase} 40%, ${shimmerHighlight} 50%, ${shimmerBase} 60%, ${shimmerBase} 100%)`,
             backgroundSize: '200% 100%',
diff --git a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
index bf9cfa42..3ef9d940 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
@@ -599,9 +599,9 @@ const ThinkingBubble: React.FC<{
   const finalTokens = persistedTokens
     ?? (text && !isStreaming ? Math.max(1, Math.round(text.length / 3.6)) : null);
 
-  const activeLabel = dynamicLabel
-    ? (liveTokenEstimate > 0 ? `${dynamicLabel}… ~${liveTokenEstimate} tokens` : `${dynamicLabel}…`)
-    : (liveTokenEstimate > 0 ? `${turnLabel.live}… (~${liveTokenEstimate} tokens)` : `${turnLabel.live}…`);
+  // No token counter while streaming: the label carries WHAT it's doing, the shimmer carries "live".
+  void liveTokenEstimate;
+  const activeLabel = dynamicLabel ? `${dynamicLabel}…` : `${turnLabel.live}…`;
 
   const fmtTokens = (n: number) => {
     if (n >= 1000) {
@@ -637,70 +637,61 @@ const ThinkingBubble: React.FC<{
     return { total: combinedTotalTokens, output: finalTokens, input: inputSide };
   })();
 
+  // Resting line reads like ChatGPT's "Thought for 12s": duration only. The dev metrics (token
+  // breakdown, tool count) live in a hover tooltip so the curious still get them without the
+  // transcript reading as telemetry.
   const renderPostStreamLabel = () => {
-    const segments: React.ReactNode[] = [];
-    segments.push(
-      <span key="duration">
-        {finalSeconds != null
-          ? `${turnLabel.past} for ${fmtThoughtDuration(finalSeconds)}`
-          : turnLabel.past}
-      </span>
-    );
-    if (tokenBreakdown) {
-      const { total, input, output } = tokenBreakdown;
-      const tooltipBody = input != null && output != null ? (
-        <Box sx={{ p: 0.5, fontFamily: c.font.sans, fontSize: '0.78rem', lineHeight: 1.5 }}>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
-            <span>Input</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{input.toLocaleString()}</span>
-          </Box>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
-            <span>Output</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{output.toLocaleString()}</span>
-          </Box>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, mt: 0.25, pt: 0.25, borderTop: `1px solid ${c.border.subtle}`, fontWeight: 600 }}>
-            <span>Total</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{total.toLocaleString()}</span>
+    const durationText = finalSeconds != null
+      ? `${turnLabel.past} for ${fmtThoughtDuration(finalSeconds)}`
+      : turnLabel.past;
+    if (!tokenBreakdown && !(persistedToolCount != null && persistedToolCount > 0)) {
+      return <span key="duration">{durationText}</span>;
+    }
+    const { total, input, output } = tokenBreakdown ?? { total: 0, input: null, output: null };
+    const tooltipBody = (
+      <Box sx={{ p: 0.5, fontFamily: c.font.sans, fontSize: '0.78rem', lineHeight: 1.5 }}>
+        {input != null && output != null ? (
+          <>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
+              <span>Input</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{input.toLocaleString()}</span>
+            </Box>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
+              <span>Output</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{output.toLocaleString()}</span>
+            </Box>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, mt: 0.25, pt: 0.25, borderTop: `1px solid ${c.border.subtle}`, fontWeight: 600 }}>
+              <span>Total</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{total.toLocaleString()}</span>
+            </Box>
+          </>
+        ) : tokenBreakdown ? (
+          <Box>{total.toLocaleString()} tokens (input + output + children)</Box>
+        ) : null}
+        {persistedToolCount != null && persistedToolCount > 0 && (
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, mt: tokenBreakdown ? 0.25 : 0 }}>
+            <span>Tools used</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{persistedToolCount}</span>
           </Box>
+        )}
+        {input != null && output != null && (
           <Box sx={{ mt: 0.5, color: c.text.ghost, fontSize: '0.7rem', fontStyle: 'italic' }}>
             Input shown is your message, history, and tool outputs. The fixed
             framework preamble (system prompt, tool defs, MCP descriptions) is
             excluded, since it's constant overhead from the agent runtime,
             not anything you can shrink.
           </Box>
-        </Box>
-      ) : (
-        <Box sx={{ p: 0.5, fontFamily: c.font.sans, fontSize: '0.78rem' }}>
-          {total.toLocaleString()} tokens (input + output + children)
-        </Box>
-      );
-      segments.push(<span key="sep-1">, </span>);
-      segments.push(
-        <Tooltip
-          key="tokens"
-          title={tooltipBody}
-          placement="top"
-          arrow
-          slotProps={{ tooltip: { sx: { bgcolor: c.bg.elevated, color: c.text.primary, border: `1px solid ${c.border.medium}`, maxWidth: 'none' } } }}
-        >
-          <Box
-            component="span"
-            onClick={(e) => { e.stopPropagation(); }}
-            sx={{
-              cursor: 'help',
-              borderBottom: `1px dotted ${c.border.medium}`,
-              '&:hover': { color: c.text.secondary },
-            }}
-          >
-            {fmtTokens(total)} tokens
-          </Box>
-        </Tooltip>
-      );
-    }
-    if (persistedToolCount != null && persistedToolCount > 0) {
-      segments.push(<span key="sep-2">, </span>);
-      segments.push(
-        <span key="tools">{persistedToolCount} tool{persistedToolCount === 1 ? '' : 's'} used</span>
-      );
-    }
-    return segments;
+        )}
+      </Box>
+    );
+    return (
+      <Tooltip
+        key="duration"
+        title={tooltipBody}
+        placement="top"
+        arrow
+        enterDelay={400}
+        slotProps={{ tooltip: { sx: { bgcolor: c.bg.elevated, color: c.text.primary, border: `1px solid ${c.border.medium}`, maxWidth: 'none' } } }}
+      >
+        <span>{durationText}</span>
+      </Tooltip>
+    );
   };
 
   // Shimmer needs a flat string; post-stream label needs nodes for the token tooltip.
@@ -1053,16 +1044,18 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
     >
       <Box
         sx={{
-          maxWidth: '85%',
+          // Only USER messages wear a bubble (the ChatGPT/Claude grammar): the assistant's words sit
+          // directly on the page, so its answers read as the page's voice, not another chat balloon.
+          maxWidth: isUser ? '85%' : '100%',
           minWidth: 0,
           // Oversized messages are block-virtualized, so the set of rendered blocks (and thus the widest visible content) changes as you scroll. Pin them to a stable width so the bubble doesn't shrink-to-fit and resize horizontally frame to frame. Normal messages keep shrink-to-fit.
-          ...(isOversized ? { width: '85%' } : {}),
-          bgcolor: isUser ? c.user.bubble : c.bg.surface,
-          border: isUser ? (isFailed ? `1px solid ${c.status.error}` : 'none') : `1px solid ${c.border.subtle}`,
-          borderRadius: isUser ? '18px' : '16px 16px 16px 4px',
-          px: 2,
-          py: 1.25,
-          boxShadow: isUser ? 'none' : c.shadow.sm,
+          ...(isOversized ? { width: isUser ? '85%' : '100%' } : {}),
+          bgcolor: isUser ? c.user.bubble : 'transparent',
+          border: isUser && isFailed ? `1px solid ${c.status.error}` : 'none',
+          borderRadius: isUser ? '18px' : 0,
+          px: isUser ? 2 : 0,
+          py: isUser ? 1.25 : 0.5,
+          boxShadow: 'none',
           overflow: 'hidden',
           opacity: isPending ? 0.7 : 1,
           transition: 'opacity 0.2s, border-color 0.2s',
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
index fe823dbf..7db5815a 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
@@ -53,7 +53,6 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
           }`,
           borderRadius: 2,
           overflow: 'hidden',
-          animation: isPending ? 'border-glow 2s ease-in-out infinite' : 'none',
           transition: 'border-color 0.3s, box-shadow 0.3s',
         } as any}
       >
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
index 396a3490..7961b851 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
@@ -53,7 +53,6 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
           }`,
           borderRadius: 2,
           overflow: 'hidden',
-          animation: isPending ? 'border-glow 2s ease-in-out infinite' : 'none',
           transition: 'border-color 0.3s, box-shadow 0.3s',
         } as any}
       >