Open a conversation at the bottom, keep it still while a Bot writes, and add a rail of turns

CHANGELOG.md

@@ -122,6 +122,17 @@ for its default of thirty minutes, and `browserIdleMs: 0` (keep browsers open) w
 of these settings now also reach the computers `computers.mode: sandbox` makes, which had none of
 them.
 
+### A conversation opens at the bottom and stays still while a Bot writes
+
+Opening a conversation shows its newest messages at once, already at the bottom, instead of loading
+and then gliding down; a long one draws older messages as somebody scrolls up to them, without
+moving what they are reading. Charts, tables, cards and decisions a Bot draws grow in place while
+they stream, and no longer flash "not available" before they appear. A reply is revealed at a steady
+pace, and the view follows it until the person scrolls up or selects some of it, and picks it up
+again when they come back to the end or press the arrow. A rail beside a conversation has a mark
+per turn: hovering one previews what was asked and answered, and choosing it goes there. Nothing
+changes for a deployment.
+
 ### Generated interfaces use A2UI 1.0
 
 With generative UI on, a Bot builds an interface from the A2UI 1.0 basic components instead of the

app/src/components/channels/channel-chat.tsx

@@ -91,6 +91,48 @@ function sameActivity(
   );
 }
 
+/**
+ * Whether the transcript still waits behind the placeholder.
+ *
+ * A channel opened from the roster waits for its whole history: the stored thread (`restoring`) and
+ * its voice chats. A channel just started from the compose screen has no history; its first message
+ * is already in hand and shows at once, not after a voice-chat request with nothing in it.
+ *
+ * Exported for its tests.
+ */
+export function historyIsLoading({
+  restoring,
+  seeded,
+  voicePending,
+  voiceWaitedOut = false,
+}: {
+  restoring: boolean;
+  seeded: boolean;
+  voicePending: boolean;
+  /** The voice chats have had their `VOICE_WAIT_MS` since the thread came in. */
+  voiceWaitedOut?: boolean;
+}): boolean {
+  return restoring || (!seeded && voicePending && !voiceWaitedOut);
+}
+
+/**
+ * How long, once the thread is in, the conversation waits for its voice chats before showing
+ * without them. A slow or failing voice service must not hold up text chat; cards that arrive after
+ * this join the transcript where they belong.
+ */
+export const VOICE_WAIT_MS = 1500;
+
+/** Whether `VOICE_WAIT_MS` has passed since `waiting` became true. Reset whenever it is false. */
+function useWaitedOut(waiting: boolean, key: string): boolean {
+  const [waitedOut, setWaitedOut] = useState<string | null>(null);
+  useEffect(() => {
+    if (!waiting) return;
+    const timer = window.setTimeout(() => setWaitedOut(key), VOICE_WAIT_MS);
+    return () => window.clearTimeout(timer);
+  }, [waiting, key]);
+  return waiting && waitedOut === key;
+}
+
 export function channelHistoryNotice({
   restoring,
   messageCount,
@@ -549,8 +591,24 @@ export function ChannelChat({
   useActiveBot(runtimeAgentId);
 
   const skillCommands = useSkillCommands(runtimeAgentId);
-  const historyNotice = channelHistoryNotice({
+  /*
+   * History is the snapshot, the stored thread AND the voice archive. The transcript shows none of
+   * it until all three are in, so it lands once at the bottom instead of drawing the conversation
+   * and then splicing call cards into it; the notice waits for the same moment, so it appears in
+   * the commit that shows the history rather than a render later, shrinking the view under it.
+   */
+  const voiceWaitedOut = useWaitedOut(
+    !restoring && seed === null && voiceArchive.pending,
+    channel.id,
+  );
+  const historyLoading = historyIsLoading({
     restoring,
+    seeded: seed !== null,
+    voicePending: voiceArchive.pending,
+    voiceWaitedOut,
+  });
+  const historyNotice = channelHistoryNotice({
+    restoring: historyLoading,
     messageCount: agent.messages.length,
     lastMessageAt: channel.lastMessageAt,
     historyAvailability,
@@ -1091,7 +1149,7 @@ export function ChannelChat({
              * above.
              */
             queueWhileBusy
-            restoring={restoring}
+            restoring={historyLoading}
             /*
              * The run, not the turn. Stop reaches a run through the core's abort controller, and that
              * controller does not exist until `say` has finished waiting for the runtime agent — so

app/src/components/channels/chat-messages.ts

@@ -320,8 +320,7 @@ function isReadableMessage(message: unknown): message is Readonly<Message> {
  * row it builds is keyed on the id". `message.id` is keyed on harder and was checked nowhere: it
  * becomes `VisibleChatItem.id`, which is DECLARED `string`, and downstream that one value is the
  * React key, `MessageScrollerItem`'s `messageId`, the turn-grouping key `anchorRowIds` and `turnOf`
- * cut apart at the last colon, and the memo key `createFirstPaintDelays` hangs an entrance delay
- * off.
+ * cut apart at the last colon, and the key `openingStagger` hangs a row's entrance delay off.
  *
  * IT SURVIVED BECAUSE IT DOES NOT THROW — the same reason `readAttachmentMetadata` gives for its
  * own fields having gone unchecked, and the claim there that `metadata` was "the last unchecked
@@ -419,7 +418,12 @@ export function toVisibleChatItems(
           kind: "tool",
           // One assistant message can carry multiple tool calls.
           id: toolCall.id,
-          toolCall,
+          /*
+           * A copy, not the agent's object: the client appends argument chunks to the call it
+           * already handed over, so a row comparing the call it drew with the next one would be
+           * comparing an object with itself and never see the arguments grow.
+           */
+          toolCall: { ...toolCall, function: { ...toolCall.function } },
           ...(results.has(toolCall.id)
             ? { result: results.get(toolCall.id) }
             : {}),