@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/components/chat/MessageBubble.tsx

@@ -1,28 +1,121 @@
-import { Bot, Copy, User, Info, Sparkles } from "lucide-react";
+import { useState } from "react";
+import { Bot, Clock, CornerDownRight, Copy, Info, Pencil, RefreshCw, X } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { AgentAvatar, type AgentFace } from "../agents/AgentAvatar";
 import { ToolCall } from "./ToolCall";
+import { ActionGroup, segmentTurnParts, countTurnTools, type TurnSegment } from "./ActionGroup";
+import { SkillTrace } from "./SkillTrace";
+import { ReasoningBlock } from "./ReasoningBlock";
 import { AskQuestionsCard } from "./AskQuestionsCard";
 import { AskAnswersCard, parseAskAnswerText } from "./AskAnswersCard";
-import { textOf, type ChatMsg } from "../../hooks/useChat";
+import { AttachmentGroup, stripMediaMarker } from "./Attachment";
+import { MarkdownPreview, renderMentions } from "../files/MarkdownPreview";
+import { textOf, type ChatMsg, type ChatPart } from "../../hooks/useChat";
 import { Tip } from "../ui/tip";
 import { t } from "../../i18n";
 
 interface Props {
   msg: ChatMsg;
-  /** True when this is the last message in the list. Used to detect if an
-   *  ask_questions tool call is still waiting for the user vs already answered
-   *  (a later user message would push this assistant turn off the bottom). */
-  isLast?: boolean;
+  /** True when THIS turn's ask_questions call is the one still waiting for an
+   *  answer. Decided by the list, which can see whether a user message came
+   *  after it; a turn cannot tell on its own. */
+  askPending?: boolean;
   /** True when this user message is the reply to a preceding `ask_questions`
    *  call. Renders as a full-width centered card instead of the user bubble. */
   isAskAnswer?: boolean;
   onCopy?: (text: string) => void;
+  /** Who said it. Absent → the neutral glyph (surfaces that don't know the
+   *  cast). The user side draws no avatar at all: you know who you are, and a
+   *  generic silhouette on every second bubble is pure noise. */
+  face?: AgentFace;
+  /** Phone shaping: drop the avatar column and let the bubble have the width.
+   *  On a 390px screen the face costs 36px on EVERY assistant turn to repeat
+   *  the name already standing in the header, three inches above. */
+  compact?: boolean;
+  /** Written while the previous turn was still running: it is in the thread but
+   *  has not left yet. Drawn at half strength, and it says so. */
+  queued?: boolean;
+  /** Take it back before it goes. Only meaningful alongside `queued`. */
+  onUnqueue?: () => void;
+  /** Re-run this assistant turn (drop it and everything after, ask again).
+   *  Absent → no button (super-agent threads / previews don't offer it). */
+  onRegenerate?: () => void;
+  /** Edit this user turn and re-send, dropping everything after it. Absent → no
+   *  edit affordance. */
+  onEdit?: (text: string) => void;
+  /** Group style: name each speaker in a header ABOVE the bubble (with a "traído
+   *  por X" tag when a mention pulled them in), the way a group chat reads. Off
+   *  in a 1:1, where the single agent is already named in the header. */
+  showSpeaker?: boolean;
+  /** Resolve an agent slug to its display name, for the "traído por X" tag. */
+  nameOf?: (slug: string) => string;
+  /** Full view: tool calls collapse into an ActionGroup. Simple ("pelado") view:
+   *  tools hide and the narration lines that lived inside the group render as
+   *  normal bubbles in order — same parts list, different layout. Default on. */
+  showTools?: boolean;
 }
 
-export function MessageBubble({ msg, isLast, isAskAnswer, onCopy }: Props) {
+export function MessageBubble({ msg, askPending, isAskAnswer, onCopy, face, compact, queued, onUnqueue, onRegenerate, onEdit, showSpeaker, nameOf, showTools = true }: Props) {
+  // Hooks before any early return. The group-notice branch below returns without
+  // rendering a bubble, and these two used to sit after it — so a notice arriving
+  // mid-thread ("X joined the chat") changed the hook count for that row and React
+  // threw "rendered more hooks than during the previous render". Group chat is
+  // exactly where notices appear, so the crash was on the feature's own path.
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState("");
+
+  // A group system notice ("… se sumó / salió del chat") is a centred line, not
+  // a bubble, so it reads as something the room did rather than someone saying it.
+  if (msg.event) {
+    const who = (nameOf ? nameOf(msg.who || "") : msg.who) || msg.who || "";
+    return (
+      <div className="flex justify-center py-1">
+        <span className="rounded-full bg-muted/50 px-3 py-0.5 text-[11px] text-muted-fg">
+          {msg.event === "left" ? t("project.groups.left_chat", { name: who }) : t("project.groups.joined_chat", { name: who })}
+        </span>
+      </div>
+    );
+  }
   const mine = msg.role === "user";
-  const copyText = textOf(msg);
+  // A turn that carried a file shows the file; its text is the marker the agent
+  // was handed, so only what the user actually wrote (caption, or the voice
+  // transcript) stays as text — copy included.
+  //
+  // Both directions. This was `mine ? msg.media : undefined`, which threw away
+  // every attachment the AGENT sent: the photo it pushed to Telegram, the image
+  // a routine delivered, a skill diagram it attached. The row on disk had the
+  // file and the bubble dropped it on the floor — so "the agent shared a photo"
+  // rendered as a bare caption, or as the placeholder text where a caption was
+  // never written.
+  const media = msg.media;
+  const copyText = media?.length ? stripMediaMarker(textOf(msg), media.length) : textOf(msg);
   const hasTools = msg.parts.some((p) => p.kind === "tool");
+  // A user turn is never grouped — it has no tools, and the segmenter would
+  // return one plain part per message anyway; blocks only shape the agent side.
+  //
+  // The turn keeps ITS OWN count across however many blocks it happened in:
+  // three tools, a sentence, three more tools is one turn of six actions, not
+  // two turns of three.
+  const segments = mine ? [] : segmentTurnParts(msg.parts);
+  const toolTotal = mine ? 0 : countTurnTools(msg.parts);
+  const blockCount = segments.filter((seg) => seg.kind === "work").length;
+  // The last block is the one still working; the earlier ones already finished.
+  const lastWorkAt = segments.map((seg) => seg.kind).lastIndexOf("work");
+  // Simple view: same parts, no ActionGroup. Narration that lived inside the
+  // work block comes out as regular bubbles; tools stay hidden (ask_questions
+  // still shows — it is a control the reader must reach).
+  const simpleParts = !mine && !showTools
+    ? msg.parts.filter((p) =>
+        p.kind === "text" ||
+        p.kind === "reasoning" ||
+        (p.kind === "tool" && p.tool === "ask_questions"),
+      )
+    : null;
+  // What actually gets drawn, in order. Only the agent's full view has blocks;
+  // the user's own turn and the simple view are flat lists of parts.
+  const renderList: TurnSegment[] = showTools && !mine
+    ? segments
+    : (simpleParts || msg.parts).map((part) => ({ kind: "part", part }) as const);
 
   if (mine && isAskAnswer) {
     const text = textOf(msg);
@@ -31,148 +124,396 @@ export function MessageBubble({ msg, isLast, isAskAnswer, onCopy }: Props) {
     }
   }
 
+  const startEdit = () => { setDraft(copyText); setEditing(true); };
+  const submitEdit = () => {
+    const v = draft.trim();
+    setEditing(false);
+    if (!onEdit) return;
+    // Caption may be empty when the turn still has a file — editing only the
+    // text of a photo message must not refuse the save.
+    if (v || media?.length) onEdit(v);
+  };
+
+  // One part of the turn, outside any block: the agent's own words, its
+  // thinking, or a card that must stay in the open.
+  const renderPart = (part: ChatPart, i: number) =>
+    part.kind === "reasoning" ? (
+      <ReasoningBlock key={i} text={part.text} streaming={part.streaming} />
+    ) : part.kind === "tool" ? (
+      part.tool === "ask_questions" && !mine ? (
+        <AskQuestionsCard key={`${part.id}-${i}`} part={part} pending={!!askPending} />
+      ) : (
+        <ToolCall key={`${part.id}-${i}`} part={part} />
+      )
+    ) : textOfPart(part.text, media) ? (
+      <div
+        key={i}
+        className={cn(
+          // max-w-full AND overflow-wrap:anywhere. The column caps at 85%, but
+          // a flex child is free to exceed its parent unless it is told not to,
+          // so one unbroken string still pushed the bubble past both edges of a
+          // phone with the text cut off on the left. `anywhere` rather than
+          // Tailwind's `break-words` (overflow-wrap: break-word) because only
+          // `anywhere` also shrinks the element's MIN-CONTENT width:
+          // break-word wraps the glyphs but still reports the whole URL as the
+          // narrowest the box can be, so any ancestor that sizes to content — a
+          // flex item, a grid cell — is laid out around the unbroken string and
+          // the overflow comes back.
+          "max-w-full [overflow-wrap:anywhere] rounded-2xl px-3 py-2 text-sm leading-relaxed",
+          mine
+            ? "whitespace-pre-wrap rounded-br-sm bg-bubble-mine text-foreground"
+            // Agent bubble — the softer muted fill the group v1 used, now
+            // shared by every chat bubble so 1:1 and group read the same.
+            : "w-full rounded-bl-sm bg-muted/50 text-foreground",
+        )}
+      >
+        {/* The agent writes markdown — **bold**, lists, `code`, links — so its
+            turns render through the (dependency-free, no
+            dangerouslySetInnerHTML) markdown component. The user's own bubble
+            stays literal: they typed it, and reflowing their text as markdown
+            would eat their asterisks and line breaks. The first/last child
+            margins are zeroed so the block spacing does not double up with the
+            bubble's own py-2. */}
+        {mine ? (
+          renderMentions(textOfPart(part.text, media))
+        ) : (
+          <MarkdownPreview
+            content={textOfPart(part.text, media)}
+            mentions
+            className="text-sm text-foreground [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+          />
+        )}
+      </div>
+    ) : null;
+
   return (
-    <div className={cn("group flex items-start gap-2", mine ? "justify-end" : "justify-start")}>
-      {!mine && (
+    <div
+      className={cn(
+        "group flex items-start gap-2",
+        mine ? "justify-end" : "justify-start",
+        // Not sent yet, and it should not read as if it were: the same bubble
+        // at half strength, the way a message in flight looks everywhere else.
+        queued && "opacity-55",
+      )}
+    >
+      {!mine && !compact && (face ? (
+        <AgentAvatar {...face} size={28} className="mt-0.5" />
+      ) : (
         <span className="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground">
           <Bot size={14} />
         </span>
-      )}
-      <div className={cn("flex min-w-0 flex-col gap-1.5", mine ? "items-end" : "w-full max-w-[85%]")}>
+      ))}
+      {/* Both sides are capped. The user's own column used to have no max-width
+          at all, so one unbroken string — a Google Docs URL pasted into a
+          message — stretched the bubble past the viewport and the text ran off
+          the left edge. Invisible on a wide screen, unreadable on a phone. */}
+      <div
+        className={cn(
+          "flex min-w-0 flex-col gap-1.5",
+          compact ? "max-w-[92%]" : "max-w-[85%]",
+          mine ? "items-end" : "w-full",
+        )}
+      >
+        {/* Group style: name the speaker ABOVE the bubble, with a "traído por X"
+            tag when a mention pulled them in — the way a group chat reads. */}
+        {showSpeaker && !mine && (msg.agent || msg.agentId) && (
+          <div className="flex items-center gap-1.5 text-[11px] leading-none">
+            <span className="font-semibold text-foreground/90">{msg.agent}</span>
+            {msg.reason && (
+              <span className="inline-flex items-center gap-0.5 text-muted-fg/70">
+                <CornerDownRight size={11} /> {t("project.groups.pulled_by", { name: nameOf ? nameOf(msg.reason) : msg.reason })}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* What was actually sent: the voice note plays, the photo is the photo,
+            the document opens. */}
+        {media?.length ? <AttachmentGroup media={media} /> : null}
+
         {/* Operational notes (engine fallbacks, retries, suppressed tools). */}
         {!mine && msg.notes && msg.notes.length > 0 && (
           <div className="flex flex-col gap-0.5">
             {msg.notes.map((n, i) => (
-              <span key={i} className="flex items-center gap-1 text-[10px] text-amber-400/80">
+              <span key={i} className="flex items-center gap-1 text-[10px] text-amber-600 dark:text-amber-400/80">
                 <Info size={10} /> {n}
               </span>
             ))}
           </div>
         )}
 
-        {/* Skill Inspector: which skills the per-turn RAG injected for this turn. */}
-        {!mine && msg.inspector && (msg.inspector.loaded?.length || msg.inspector.hinted?.length) ? (
-          <Tip content={t("shared_ui.skill_inspector_title", { embedder: msg.inspector.embedder || "RAG" })}>
-            <div
-              className="flex flex-wrap items-center gap-1 text-[10px] text-sky-400/90"
-            >
-              <Sparkles size={10} />
-              {msg.inspector.loaded?.map((s) => (
-                <span key={`l-${s}`} className="rounded bg-sky-500/15 px-1 py-0.5 font-mono">
-                  {s}
-                </span>
-              ))}
-              {msg.inspector.hinted?.map((s) => (
-                <span key={`h-${s}`} className="rounded border border-sky-500/30 px-1 py-0.5 font-mono opacity-70">
-                  {s}?
-                </span>
-              ))}
-            </div>
-          </Tip>
-        ) : null}
-
-        {/* Ordered parts: interleaved assistant text + tool calls. */}
-        {msg.parts.map((part, i) =>
-          part.kind === "tool" ? (
-            part.tool === "ask_questions" && !mine ? (
-              <AskQuestionsCard
-                key={`${part.id}-${i}`}
-                part={part}
-                pending={!!isLast}
-              />
-            ) : (
-              <ToolCall key={`${part.id}-${i}`} part={part} />
-            )
-          ) : part.text ? (
-            <div
-              key={i}
-              className={cn(
-                "whitespace-pre-wrap rounded-2xl px-3 py-2 text-sm leading-relaxed shadow-sm",
-                mine
-                  ? "rounded-br-sm border border-emerald-500/30 bg-emerald-500/10 text-foreground dark:bg-emerald-500/15"
-                  : "w-full rounded-bl-sm border border-border bg-card text-foreground",
-              )}
-            >
-              {part.text}
-            </div>
-          ) : null,
-        )}
+        {/* Skill Inspector: which skills the per-turn RAG injected for this turn.
+            Each badge opens the skill it names. */}
+        {!mine && msg.inspector && <SkillTrace inspector={msg.inspector} />}
 
-        {/* Pending placeholder before any part has arrived. */}
-        {!mine && msg.pending && msg.parts.length === 0 && (
-          <div className="rounded-2xl rounded-bl-sm border border-border bg-card px-3 py-2 text-sm text-muted-foreground">
-            …
+        {/* Editing your own turn in place: on save it re-sends and everything
+            below is dropped and re-answered. Enter saves, Esc/Cancel backs out. */}
+        {mine && editing && (
+          <div className={cn("flex w-full flex-col gap-1.5", compact ? "max-w-[92%]" : "max-w-[85%]")}>
+            <textarea
+              autoFocus
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submitEdit(); }
+                if (e.key === "Escape") setEditing(false);
+              }}
+              rows={Math.min(8, Math.max(2, draft.split("\n").length))}
+              className="w-full resize-y rounded-2xl rounded-br-sm border border-primary/40 bg-bubble-mine px-3 py-2 text-sm leading-relaxed text-foreground outline-none focus:border-primary"
+            />
+            <div className="flex items-center justify-end gap-2 text-xs">
+              <button type="button" onClick={() => setEditing(false)} className="rounded px-2 py-1 text-muted-foreground hover:text-foreground">
+                {t("common.cancel")}
+              </button>
+              <button type="button" onClick={submitEdit} disabled={!draft.trim()} className="rounded bg-primary px-2 py-1 font-medium text-primary-foreground disabled:opacity-50">
+                {t("chat_ui.edit_resend")}
+              </button>
+            </div>
           </div>
         )}
+        {/* The turn in the order it happened: a run of tool calls collapses into
+            one block, and what the agent SAID between the runs stands outside
+            them, as the message it is. A 24-step turn is still a log rather
+            than a screenful of cards — but the reader can now see WHERE in the
+            turn each thing was said, instead of only the closing line with
+            everything before it inside one box.
 
-        {/* Attribution: who answered and on which engine. Always visible (not
-            hover-gated) — in a thread where several agents/models take turns,
-            this is the only way to tell them apart at a glance. */}
-        {!mine && (msg.agent || msg.model) && (
-          <div className="flex flex-wrap items-center gap-1 text-[10px]">
-            {msg.agent && (
-              <span className="rounded bg-emerald-500/15 px-1 py-0.5 font-medium text-emerald-300">
-                {msg.agent}
-              </span>
-            )}
-            {msg.model && (
-              <span className="rounded border border-border px-1 py-0.5 font-mono text-muted-foreground">
-                {msg.model}
-              </span>
-            )}
-          </div>
+            Simple view has no blocks at all: every text/reasoning part in
+            original order, tools hidden (ask_questions still shows — it is a
+            control the reader must reach). */}
+        {!(mine && editing) && renderList.map((seg, si) =>
+          seg.kind === "work" ? (
+            <ActionGroup
+              key={`work-${si}`}
+              parts={seg.parts}
+              // Only the LAST block is still working; the ones above it have
+              // already finished, and a spinner on each would say otherwise.
+              running={!!msg.pending && si === lastWorkAt}
+              // Numbered against the TURN, not the block: a second block
+              // starting over at "1 action" would read as a second turn. A turn
+              // with one block just says how many — "1–4 of 4" is noise.
+              range={blockCount > 1 ? { from: seg.from, to: seg.to, total: toolTotal } : undefined}
+            />
+          ) : (
+            renderPart(seg.part, si)
+          ),
+        )}
+        {/* Still going. Not just before the first part arrives: a turn that has
+            been running shell commands for two minutes shows a list of finished
+            steps and nothing that says more is coming, so it reads as an answer
+            that stopped mid-thought. The pill stays for the whole turn and goes
+            when the turn does. */}
+        {!mine && msg.pending && (
+          <Typing label={
+            (() => {
+              const name = face?.name || msg.agent || "";
+              const key = msg.parts.length === 0 ? "chat_ui.typing" : "chat_ui.working";
+              // In a group the speaker header already names them right above, so
+              // the pill drops the name ("está escribiendo…"). In a 1:1 the pill
+              // is the only place it's named, so keep it ("Candela está escribiendo…").
+              return showSpeaker || !name
+                ? t(`${key}_generic` as "chat_ui.typing_generic")
+                : t(key, { name });
+            })()
+          } />
         )}
 
-        <div className="flex items-center gap-2 text-[10px] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100">
-          <span>{formatTs(msg.ts)}</span>
-          {!mine && msg.usage && (msg.usage.input_tokens || msg.usage.output_tokens) ? (
-            <span className="font-mono">
-              · {(msg.usage.input_tokens || 0) + (msg.usage.output_tokens || 0)} tok
+        {/* One line under the bubble: who answered on the left, when it did and
+            what it cost on the right. They used to be two stacked rows with the
+            second one hover-only, which on a phone means it does not exist.
+            Nothing at all while the turn is still running: a lone timestamp
+            under "escribiendo…" is a receipt for a message that has not
+            arrived yet. It appears with the answer. */}
+        {!(!mine && msg.pending) && <div
+          className={cn(
+            "flex w-full items-center gap-x-2 gap-y-1 text-[10px]",
+            // On a phone the row may not wrap: the whole point is that the meta
+            // stands BESIDE the attribution, and "zen:deepseek-v4-flash-free"
+            // alone fills 390px, so letting it wrap puts the data back under the
+            // bubble where it started. The model gives up the room instead — it
+            // is the one field here also spelled out in the context panel.
+            compact ? "flex-nowrap" : "flex-wrap",
+            mine && "justify-end",
+          )}
+        >
+          {/* In a group the speaker is named ABOVE the bubble, so the footer drops
+              the green name chip and keeps only model/time/cost. */}
+          {!mine && msg.agent && !showSpeaker && (
+            <span className="shrink-0 rounded bg-emerald-500/15 px-1 py-0.5 font-medium text-emerald-700 dark:text-emerald-300">
+              {msg.agent}
             </span>
-          ) : null}
-          {!mine && hasTools && (
-            <span>· {t("shared_ui.tools_count", { n: msg.parts.filter((p) => p.kind === "tool").length })}</span>
           )}
-          {/* Replayed turns have no tool parts — the live events are gone — but
-              they do carry the summary recorded at the time. Show that instead,
-              so history does not look like the agent just answered from
-              nothing. Failures are named: "it tried and could not" is the half
-              worth surfacing. */}
-          {!mine && !hasTools && msg.toolSummary?.tools?.length ? (
-            <span title={msg.toolSummary.tools.map((x) => `${x.name}×${x.count}`).join(", ")}>
-              · {t("shared_ui.tools_count", { n: msg.toolSummary.total })}
-              {msg.toolSummary.failed
-                ? ` (${t("shared_ui.tools_failed", { n: msg.toolSummary.failed })})`
-                : ""}
+          {/* Half-strength surface: the attribution sits under the bubble and
+              should read as quieter than it, never as a second chip competing
+              with the agent's name. The token flips per theme, so one value
+              covers light and dark. */}
+          {!mine && msg.model && (
+            <span className="min-w-0 truncate rounded bg-surface-soft/50 px-1 py-0.5 font-mono text-muted-foreground">
+              {msg.model}
             </span>
-          ) : null}
-          {onCopy && copyText && (
-            <Tip content={t("chat_ui.copy")}>
-              <button
-                type="button"
-                onClick={() => onCopy(copyText)}
-                className="inline-flex items-center gap-1 hover:text-foreground"
-                aria-label={t("chat_ui.copy")}
-              >
-                <Copy size={10} /> {t("chat_ui.copy")}
-              </button>
-            </Tip>
           )}
-        </div>
+          <div
+            className={cn(
+              "ml-auto flex shrink-0 items-center gap-2 text-muted-foreground",
+              // The phone has no hover, so there it is simply always on. So is
+              // the queue line — "waiting its turn, here is how to take it
+              // back" is not something to hide behind a hover.
+              !compact && !queued && "opacity-0 transition-opacity group-hover:opacity-100",
+            )}
+          >
+            {/* A timestamp on a turn that has not gone out yet is a receipt for
+                something that did not happen. What it is waiting for takes the
+                slot instead, until it leaves and gets a real one. */}
+            {queued ? (
+              <span className="inline-flex items-center gap-1">
+                <Clock size={10} /> {t("chat_ui.queued")}
+              </span>
+            ) : (
+              <span>{formatTs(msg.ts, compact)}</span>
+            )}
+            {queued && onUnqueue && (
+              <Tip content={t("chat_ui.queued_cancel")}>
+                <button
+                  type="button"
+                  onClick={onUnqueue}
+                  className="inline-flex items-center hover:text-foreground"
+                  aria-label={t("chat_ui.queued_cancel")}
+                >
+                  <X size={11} />
+                </button>
+              </Tip>
+            )}
+            {!mine && msg.usage && (msg.usage.input_tokens || msg.usage.output_tokens) ? (
+              <span className="font-mono">
+                · {fmtTok((msg.usage.input_tokens || 0) + (msg.usage.output_tokens || 0))} tok
+              </span>
+            ) : null}
+            {showTools && !mine && hasTools && (
+              <span>· {t("shared_ui.tools_count", { n: msg.parts.filter((p) => p.kind === "tool").length })}</span>
+            )}
+            {/* Replayed turns have no tool parts — the live events are gone —
+                but they do carry the summary recorded at the time. Show that
+                instead, so history does not look like the agent just answered
+                from nothing. Failures are named: "it tried and could not" is
+                the half worth surfacing. Hidden in simple view with the rest. */}
+            {showTools && !mine && !hasTools && msg.toolSummary?.tools?.length ? (
+              <span title={msg.toolSummary.tools.map((x) => `${x.name}×${x.count}`).join(", ")}>
+                · {t("shared_ui.tools_count", { n: msg.toolSummary.total })}
+                {msg.toolSummary.failed
+                  ? ` (${t("shared_ui.tools_failed", { n: msg.toolSummary.failed })})`
+                  : ""}
+              </span>
+            ) : null}
+            {onCopy && copyText && (
+              <Tip content={t("chat_ui.copy")}>
+                <button
+                  type="button"
+                  onClick={() => onCopy(copyText)}
+                  className="inline-flex items-center gap-1 hover:text-foreground"
+                  aria-label={t("chat_ui.copy")}
+                >
+                  <Copy size={10} /> {!compact && t("chat_ui.copy")}
+                </button>
+              </Tip>
+            )}
+            {/* Edit your turn and re-ask (drops everything below). */}
+            {mine && onEdit && !queued && !editing && (
+              <Tip content={t("chat_ui.edit")}>
+                <button
+                  type="button"
+                  onClick={startEdit}
+                  className="inline-flex items-center gap-1 hover:text-foreground"
+                  aria-label={t("chat_ui.edit")}
+                >
+                  <Pencil size={10} /> {!compact && t("chat_ui.edit")}
+                </button>
+              </Tip>
+            )}
+            {/* Re-run this answer (drops it and everything below). */}
+            {!mine && onRegenerate && !queued && (
+              <Tip content={t("chat_ui.regenerate")}>
+                <button
+                  type="button"
+                  onClick={onRegenerate}
+                  className="inline-flex items-center gap-1 hover:text-foreground"
+                  aria-label={t("chat_ui.regenerate")}
+                >
+                  <RefreshCw size={10} /> {!compact && t("chat_ui.regenerate")}
+                </button>
+              </Tip>
+            )}
+          </div>
+        </div>}
       </div>
-      {mine && (
-        <span className="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground">
-          <User size={14} />
-        </span>
-      )}
     </div>
   );
 }
 
-function formatTs(iso: string): string {
+/** "escribiendo…" / "trabajando…" — the word in the reader's language, with the
+ *  dots doing the waiting. Three spans on staggered delays rather than a CSS
+ *  animation of the text itself, so a screen reader gets one stable label
+ *  instead of a glyph that changes three times a second. */
+function Typing({ label }: { label: string }) {
+  return (
+    // w-fit, not the stretched full-width bubble every other assistant turn
+    // gets: a two-word status painted across the whole column reads as a
+    // message that arrived empty.
+    <div className="flex w-fit items-center gap-1.5 self-start rounded-2xl rounded-bl-sm bg-surface-soft px-3 py-2 text-sm text-muted-foreground">
+      <span>{label}</span>
+      <span aria-hidden className="flex items-center gap-[3px]">
+        {[0, 1, 2].map((i) => (
+          <span
+            key={i}
+            className="size-1 animate-bounce rounded-full bg-current"
+            style={{ animationDelay: `${i * 140}ms`, animationDuration: "1s" }}
+          />
+        ))}
+      </span>
+    </div>
+  );
+}
+
+/** The visible text of a part: with attachments, the machine-facing markers
+ *  are dropped and what is left (a caption, or the voice transcript) is shown. */
+function textOfPart(text: string | undefined, media: unknown[] | undefined): string {
+  if (!text) return "";
+  return media?.length ? stripMediaMarker(text, media.length) : text;
+}
+
+/** 1219686 → "1.2M". The raw count fit while the row was hover-only and had the
+ *  bubble's whole width; now it shares a line with the agent and the model on a
+ *  390px screen, where seven digits are what pushes the row onto two. */
+function fmtTok(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+  return String(n);
+}
+
+function formatTs(iso: string, compact?: boolean): string {
   try {
     const d = new Date(iso);
-    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+    if (Number.isNaN(d.getTime())) return iso;
+    // Seconds are for reading a live stream on a desktop; on the phone they are
+    // three more characters competing with the model's name for the same line.
+    const time = d.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      ...(compact ? {} : { second: "2-digit" }),
+    });
+    // Today → time only. Older (or future) days keep the date so a scrolled
+    // thread is readable without opening a calendar.
+    const now = new Date();
+    const sameDay =
+      d.getFullYear() === now.getFullYear() &&
+      d.getMonth() === now.getMonth() &&
+      d.getDate() === now.getDate();
+    if (sameDay) return time;
+    const date = d.toLocaleDateString([], {
+      day: "2-digit",
+      month: "2-digit",
+      ...(d.getFullYear() !== now.getFullYear() ? { year: "2-digit" } : {}),
+    });
+    return `${date} ${time}`;
   } catch {
     return iso;
   }