@jskit-ai/assistant-core 0.1.172 → 0.1.174

package/examples/conversation/package.json

@@ -8,14 +8,14 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.1.172",
-    "@jskit-ai/http-runtime": "0.1.192",
-    "@jskit-ai/kernel": "0.1.194",
+    "@jskit-ai/assistant-core": "0.1.174",
+    "@jskit-ai/http-runtime": "0.1.194",
+    "@jskit-ai/kernel": "0.1.196",
     "@mdi/js": "^7.4.47",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0",
-    "@jskit-ai/connectors-core": "0.1.11",
-    "@jskit-ai/connectors-catalog": "0.1.11"
+    "@jskit-ai/connectors-core": "0.1.13",
+    "@jskit-ai/connectors-catalog": "0.1.13"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",

package/fixtures/responsive-assistant/App.vue

@@ -2,23 +2,54 @@
 import { computed, ref } from "vue";
 import AssistantConversationElement from "../../src/client/conversation/AssistantConversationElement.vue";
 import { conversationTurnsFromMessages } from "../../src/shared/conversation/turns.js";
+import { mergeConversationStream } from "../../src/shared/conversation/streaming.js";
 const draft = ref("");
-const controls = new URLSearchParams(location.search).has("controls");
+const query = new URLSearchParams(location.search);
+const controls = query.has("controls");
+const deferredHistory = query.has("history");
+const streaming = query.has("streaming");
+const liveText = ref("");
+const liveMessage = computed(() => ({ messageId: "stream-answer", role: "assistant", text: liveText.value, status: "inProgress" }));
 const scope = ref("one");
+const loadingMore = ref(false);
+const loadMoreError = ref("");
+const historyRequests = ref(0);
+const hasMoreBefore = ref(controls);
+let completeHistory = null;
 const messages = ref(Array.from({ length: 70 }, (_, index) => ({
   id: `message-${index}`, role: index % 2 ? "assistant" : "user", status: "completed",
   text: `Conversation line ${index + 1}: responsive scroll containment keeps the composer visible.\n\nMore text with **formatting**, a [link](https://example.com), and a_long_word_that_must_wrap_in_narrow_panes_without_overflow.`
 })));
 if (controls) messages.value[0].text = messages.value[0].text.repeat(4);
+if (streaming) messages.value.push({ id: "stream-question", role: "user", text: "Show the answer as it arrives." });
+function finishStream() {
+  messages.value.push({ ...liveMessage.value, status: "completed" });
+  liveText.value = "";
+}
+function finishHistory(error = "") {
+  loadMoreError.value = error;
+  if (!error) {
+    messages.value.unshift({ id: `older-${historyRequests.value}`, role: "assistant", text: "Older conversation paragraph. ".repeat(40), status: "completed" });
+  }
+  loadingMore.value = false;
+  completeHistory({ changed: !error });
+  completeHistory = null;
+}
 const adapter = computed(() => ({
-  conversation: { turns: conversationTurnsFromMessages(messages.value), scrollKey: scope.value, hasMoreBefore: controls },
+  conversation: {
+    turns: mergeConversationStream(conversationTurnsFromMessages(messages.value), { messages: [liveMessage.value] }), scrollKey: scope.value,
+    hasMoreBefore: hasMoreBefore.value, loadingMore: loadingMore.value, loadMoreError: loadMoreError.value
+  },
   composer: { draft: draft.value, canSend: Boolean(draft.value.trim()), rows: 2 },
   actions: {
     setDraft(value) { draft.value = value; },
     submit() { draft.value = ""; },
     loadMore({ complete }) {
-      messages.value.unshift({ id: "older", role: "assistant", text: "Older conversation paragraph. ".repeat(40), status: "completed" });
-      complete({ changed: true });
+      historyRequests.value += 1;
+      loadingMore.value = true;
+      loadMoreError.value = "";
+      completeHistory = complete;
+      if (!deferredHistory) finishHistory();
     }
   }
 }));
@@ -27,10 +58,20 @@ const adapter = computed(() => ({
   <v-app>
     <v-main>
       <main class="assistant-responsive-fixture">
+        <nav v-if="streaming">
+          <button @click="liveText += 'Growing answer. '">Receive text</button>
+          <button @click="finishStream">Finish answer</button>
+        </nav>
         <nav v-if="controls">
           <button @click="scope = scope === 'one' ? 'two' : 'one'">Change conversation</button>
           <button @click="messages.push({ id: `added-${messages.length}`, role: 'assistant', text: 'New reply. '.repeat(30), status: 'completed' })">Append reply</button>
         </nav>
+        <nav v-if="deferredHistory">
+          <button :disabled="!loadingMore" @click="finishHistory()">Complete history load</button>
+          <button :disabled="!loadingMore" @click="finishHistory('History unavailable')">Fail history load</button>
+          <button @click="hasMoreBefore = false">Exhaust history</button>
+          <output>History requests: {{ historyRequests }}</output>
+        </nav>
         <AssistantConversationElement :adapter="adapter" class="assistant-responsive-fixture__conversation" />
       </main>
     </v-main>
@@ -39,6 +80,6 @@ const adapter = computed(() => ({
 <style>
 html, body, #app { height: 100%; margin: 0; min-height: 0; }
 .assistant-responsive-fixture { display: flex; flex-direction: column; height: 100dvh; min-height: 0; padding: .5rem; }
-.assistant-responsive-fixture nav { display: flex; flex: 0 0 auto; gap: 1rem; }
+.assistant-responsive-fixture nav { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 1rem; }
 .assistant-responsive-fixture__conversation { flex: 1 1 auto; }
 </style>

package/fixtures/responsive-assistant/ProgressFixture.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { computed, ref } from "vue";
+import AssistantConversationElement from "../../src/client/conversation/AssistantConversationElement.vue";
+import { conversationTurnsFromMessages } from "../../src/shared/conversation/turns.js";
+
+const working = ref(true);
+const draft = ref("");
+const scope = ref("first");
+const combined = ref(false);
+const messages = ref([1, 2, 3].map(index => ({
+  messageId: `progress-${index}`, role: "thinking", text: `Reasoning ${index}`
+})));
+let sequence = 3;
+function append(role) {
+  sequence += 1;
+  messages.value.push({ messageId: `message-${sequence}`, role, text: `${role} ${sequence}` });
+}
+const adapter = computed(() => ({
+  conversation: {
+    working: working.value, scrollKey: scope.value, hasMoreBefore: true,
+    turns: combined.value
+      ? conversationTurnsFromMessages(messages.value)
+      : messages.value.map(message => ({
+          turnId: `row-${message.messageId}`,
+          ...(message.role === "system" || message.role === "user"
+            ? { [message.role]: { messageId: message.messageId, text: message.text } } : {}),
+          messages: [message]
+        }))
+  },
+  composer: { draft: draft.value, canSend: Boolean(draft.value), canStop: working.value },
+  actions: {
+    setDraft(value) { draft.value = value; },
+    stop() { working.value = false; },
+    loadMore({ complete }) {
+      messages.value.unshift({ messageId: `older-${sequence++}`, role: "thinking", text: "Older reasoning" });
+      complete({ changed: true });
+    }
+  }
+}));
+</script>
+<template>
+  <v-app>
+    <v-main>
+      <main class="progress-fixture">
+        <nav>
+          <button @click="working = !working">Toggle working</button>
+          <button @click="combined = !combined">Change storage rows</button>
+          <button @click="scope = scope === 'first' ? 'second' : 'first'">Change conversation</button>
+          <button v-for="role in ['thinking', 'commentary', 'assistant', 'user', 'system']" :key="role" @click="append(role)">Append {{ role }}</button>
+        </nav>
+        <AssistantConversationElement :adapter="adapter" />
+      </main>
+    </v-main>
+  </v-app>
+</template>
+<style scoped>
+.progress-fixture { display: flex; flex-direction: column; height: 100dvh; padding: 8px; }
+nav { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
+nav button { padding: 8px; min-height: 48px; border: 1px solid; }
+.assistant-conversation { flex: 1; }
+</style>

package/fixtures/responsive-assistant/main.js

@@ -6,6 +6,7 @@ import * as directives from "vuetify/directives";
 import { aliases as mdiAliases, mdi } from "vuetify/iconsets/mdi-svg";
 import App from "./App.vue";
 import ConversationFixture from "./ConversationFixture.vue";
+import ProgressFixture from "./ProgressFixture.vue";
 
 const vuetify = createVuetify({
   components,
@@ -20,6 +21,7 @@ const vuetify = createVuetify({
   }
 });
 
-createApp(new URLSearchParams(location.search).has("conversation") ? ConversationFixture : App)
+const query = new URLSearchParams(location.search);
+createApp(query.has("progress") ? ProgressFixture : query.has("conversation") ? ConversationFixture : App)
   .use(vuetify)
   .mount("#app");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-core",
-  "version": "0.1.172",
+  "version": "0.1.174",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -33,8 +33,8 @@
     "@ai-sdk/perplexity": "^4.0.43",
     "@ai-sdk/togetherai": "^3.0.49",
     "@ai-sdk/xai": "^4.0.58",
-    "@jskit-ai/resource-core": "0.1.136",
-    "@jskit-ai/resource-crud-core": "0.1.136",
+    "@jskit-ai/resource-core": "0.1.138",
+    "@jskit-ai/resource-crud-core": "0.1.138",
     "@mdi/js": "^7.4.47",
     "@openrouter/ai-sdk-provider": "^3.0.0",
     "ai": "^7.0.101",
@@ -43,8 +43,8 @@
     "ws": "^8.20.1"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.1.192",
-    "@jskit-ai/kernel": "0.1.194",
+    "@jskit-ai/http-runtime": "0.1.194",
+    "@jskit-ai/kernel": "0.1.196",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0"
   },

package/src/client/conversation/AssistantConversationElement.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="assistant-conversation" :aria-label="label">
     <AssistantTranscript
-      v-bind="adapter.conversation" class="assistant-conversation__transcript"
+      v-bind="adapter.conversation" :working="working" class="assistant-conversation__transcript"
       @load-more="adapter.actions?.loadMore?.($event)" @reload="adapter.actions?.reload?.()"
       @resend-turn="adapter.actions?.resend?.($event)" @cancel-turn="adapter.actions?.cancel?.($event)"
       @edit-turn="adapter.actions?.edit?.($event)" @link-click="adapter.actions?.openLink?.($event)"
@@ -115,9 +115,12 @@ const fileInput = ref(null);
 const modelsOpen = ref(false);
 const delivery = ref(null);
 const statusId = `assistant-status-${useId()}`;
+const working = computed(() => props.adapter.conversation.working ?? Boolean(
+  props.adapter.composer?.canStop || props.adapter.conversation.turns?.some(turn => turn.pending)
+));
 const activity = computed(() => props.adapter.activity ?? {
   label: props.adapter.composer?.stopPending ? "Stopping…"
-    : props.adapter.composer?.canStop || props.adapter.conversation.turns?.some(turn => turn.pending)
+    : working.value
       ? "Assistant is working…" : props.adapter.composer?.pending ? "Sending to assistant…" : ""
 });
 const suggestionPreview = computed(() => !props.adapter.composer?.draft && props.adapter.suggestions?.visible

package/src/client/conversation/AssistantQuestionInputs.vue

@@ -18,6 +18,7 @@ const emit = defineEmits(["dismiss"]);
     <div class="assistant-questions__question-fields-header">
       <v-btn
         aria-label="Answer normally instead"
+        class="ml-auto"
         color="primary"
         :prepend-icon="mdiPencilOutline"
         size="small"
@@ -99,15 +100,6 @@ const emit = defineEmits(["dismiss"]);
   min-width: 0;
 }
 
-.assistant-questions__question-fields-header > span {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.assistant-questions__question-fields-header :deep(.v-btn) {
-  margin-left: auto;
-}
-
 .assistant-questions__question-field {
   min-width: 0;
 }

package/src/client/conversation/AssistantTranscript.vue

@@ -98,12 +98,12 @@
       </div>
 
       <article
-        v-for="turn in displayTurns"
-        :key="turn.turnId"
+        v-for="entry in displayEntries"
+        :key="entry.key"
         class="assistant-transcript__turn"
       >
         <div
-          v-if="turn.system"
+          v-if="entry.role === 'system'"
           class="assistant-transcript__system"
         >
           <v-icon
@@ -114,55 +114,55 @@
           <div class="assistant-transcript__system-body">
             <div class="assistant-transcript__system-meta">
               <span>{{ systemLabel }}</span>
-              <time v-if="turn.system.displayAt">{{ turn.system.displayAt }}</time>
+              <time v-if="entry.message.displayAt">{{ entry.message.displayAt }}</time>
             </div>
-            <slot name="system-message" :message="turn.system"><LongTextPreviewBlocks compact :blocks="turn.system.blocks" @link-click="handleLongTextLinkClick" /></slot>
+            <slot name="system-message" :message="entry.message"><LongTextPreviewBlocks compact :blocks="entry.message.blocks" @link-click="handleLongTextLinkClick" /></slot>
           </div>
         </div>
 
         <div
-          v-if="turn.user"
+          v-else-if="entry.role === 'user'"
           class="assistant-transcript__message-row assistant-transcript__message-row--user"
         >
           <div class="assistant-transcript__message assistant-transcript__message--user">
             <div
               class="assistant-transcript__user-content"
             >
-              <p v-if="userMessageFormat === 'plain'" class="assistant-transcript__plain-user">{{ userMessageExpanded(turn) ? turn.user.text : userMessagePreviewText(turn.user.text) || turn.user.text }}</p>
+              <p v-if="userMessageFormat === 'plain'" class="assistant-transcript__plain-user">{{ userMessageExpanded(entry.turn) ? entry.message.text : userMessagePreviewText(entry.message.text) || entry.message.text }}</p>
               <LongTextPreviewBlocks
                 v-else
-                :blocks="userMessageExpanded(turn) ? turn.user.blocks : (turn.user.previewBlocks || turn.user.blocks)"
+                :blocks="userMessageExpanded(entry.turn) ? entry.message.blocks : (entry.message.previewBlocks || entry.message.blocks)"
                 @link-click="handleLongTextLinkClick"
               />
             </div>
             <button
-              v-if="userMessageCollapsible(turn.user)"
-              :aria-expanded="userMessageExpanded(turn)"
+              v-if="userMessageCollapsible(entry.message)"
+              :aria-expanded="userMessageExpanded(entry.turn)"
               class="assistant-transcript__user-content-toggle"
               type="button"
-              @click="toggleUserMessage(turn)"
+              @click="toggleUserMessage(entry.turn)"
             >
-              {{ userMessageExpanded(turn) ? "Show less" : "Read more" }}
+              {{ userMessageExpanded(entry.turn) ? "Show less" : "Read more" }}
             </button>
-            <slot name="attachments" :items="turn.user.attachments" :message="turn.user"><AssistantMessageAttachments :attachments="turn.user.attachments || []" /></slot>
+            <slot name="attachments" :items="entry.message.attachments" :message="entry.message"><AssistantMessageAttachments :attachments="entry.message.attachments || []" /></slot>
             <div
-              v-if="turn.user.displayAt"
+              v-if="entry.message.displayAt"
               class="assistant-transcript__message-footer assistant-transcript__message-footer--user"
             >
-              <time v-if="turn.user.displayAt">{{ turn.user.displayAt }}</time>
+              <time v-if="entry.message.displayAt">{{ entry.message.displayAt }}</time>
             </div>
             <div
-              v-if="turn.optimistic?.status === 'failed'"
+              v-if="entry.turn.optimistic?.status === 'failed'"
               class="assistant-transcript__optimistic-failure"
             >
-              <span>{{ turn.optimistic.error || "Message could not be sent." }}</span>
+              <span>{{ entry.turn.optimistic.error || "Message could not be sent." }}</span>
               <div class="assistant-transcript__optimistic-actions">
                 <v-btn
                   color="primary"
                   size="x-small"
                   type="button"
                   variant="tonal"
-                  @click="emit('resend-turn', turn.optimistic.id)"
+                  @click="emit('resend-turn', entry.turn.optimistic.id)"
                 >
                   Resend
                 </v-btn>
@@ -170,7 +170,7 @@
                   size="x-small"
                   type="button"
                   variant="text"
-                  @click="emit('cancel-turn', turn.optimistic.id)"
+                  @click="emit('cancel-turn', entry.turn.optimistic.id)"
                 >
                   Cancel
                 </v-btn>
@@ -178,7 +178,7 @@
                   size="x-small"
                   type="button"
                   variant="text"
-                  @click="emit('edit-turn', turn.optimistic.id)"
+                  @click="emit('edit-turn', entry.turn.optimistic.id)"
                 >
                   Edit
                 </v-btn>
@@ -190,84 +190,79 @@
           </span>
         </div>
 
-        <template
-          v-for="entry in turn.agentTimeline"
-          :key="entry.key"
+        <AssistantProgress
+          v-else-if="entry.role === 'thinking'"
+          :key="`${scrollKey}:${entry.key}`"
+          class="assistant-transcript__thinking"
+          :messages="entry.messages"
+          :pending="isWorking && entry === displayEntries.at(-1)"
+          :preview-limit="progressPreviewLimit"
+          :aria-label="`${assistantLabel} progress`"
+        />
+        <div
+          v-else
+          class="assistant-transcript__message-row assistant-transcript__message-row--assistant"
+          :data-message-role="entry.role"
         >
-          <AssistantProgress
-            v-if="entry.role === 'thinking'"
-            :key="`${turn.turnId}:${turn.pending ? 'active' : 'completed'}:${entry.key}`"
-            class="assistant-transcript__thinking"
-            :messages="entry.messages"
-            :pending="turn.pending"
-            :preview-limit="progressPreviewLimit"
-            :aria-label="`${assistantLabel} progress`"
-          />
-          <div
-            v-else
-            class="assistant-transcript__message-row assistant-transcript__message-row--assistant"
-            :data-message-role="entry.role"
-          >
-            <div class="assistant-transcript__assistant-header">
-              <span class="assistant-transcript__avatar assistant-transcript__avatar--assistant">
-                <v-icon :icon="mdiRobotOutline" size="16" />
-              </span>
-              <div class="assistant-transcript__message-header">
-                <span>{{ assistantLabel }}</span>
-              </div>
+          <div class="assistant-transcript__assistant-header">
+            <span class="assistant-transcript__avatar assistant-transcript__avatar--assistant">
+              <v-icon :icon="mdiRobotOutline" size="16" />
+            </span>
+            <div class="assistant-transcript__message-header">
+              <span>{{ assistantLabel }}</span>
             </div>
-            <div class="assistant-transcript__message assistant-transcript__message--assistant">
-              <LongTextPreviewBlocks
-                v-if="entry.message.blocks.length"
-                :blocks="entry.message.blocks"
-                @link-click="handleLongTextLinkClick"
-              />
-              <ol
-                v-if="entry.message.questions.length"
-                class="assistant-transcript__questions"
+          </div>
+          <div class="assistant-transcript__message assistant-transcript__message--assistant">
+            <LongTextPreviewBlocks
+              v-if="entry.message.blocks.length"
+              :blocks="entry.message.blocks"
+              @link-click="handleLongTextLinkClick"
+            />
+            <ol
+              v-if="entry.message.questions.length"
+              class="assistant-transcript__questions"
+            >
+              <li
+                v-for="question in entry.message.questions"
+                :key="question.name"
+                class="assistant-transcript__question"
               >
-                <li
-                  v-for="question in entry.message.questions"
-                  :key="question.name"
-                  class="assistant-transcript__question"
-                >
-                  <span class="assistant-transcript__question-number">{{ question.number }}</span>
-                  <div class="assistant-transcript__question-content">
-                    <span class="assistant-transcript__question-text">
+                <span class="assistant-transcript__question-number">{{ question.number }}</span>
+                <div class="assistant-transcript__question-content">
+                  <span class="assistant-transcript__question-text">
+                    <LongTextInlineParts
+                      :text="question.label"
+                      @link-click="handleLongTextLinkClick"
+                    />
+                  </span>
+                  <ul
+                    v-if="question.choices.length"
+                    class="assistant-transcript__question-choices"
+                  >
+                    <li v-for="choice in question.choices" :key="choice.value">
                       <LongTextInlineParts
-                        :text="question.label"
+                        :text="choice.label"
                         @link-click="handleLongTextLinkClick"
-                      />
-                    </span>
-                    <ul
-                      v-if="question.choices.length"
-                      class="assistant-transcript__question-choices"
-                    >
-                      <li v-for="choice in question.choices" :key="choice.value">
-                        <LongTextInlineParts
-                          :text="choice.label"
-                          @link-click="handleLongTextLinkClick"
-                        /><span v-if="choice.recommended"> · Recommended</span>
-                      </li>
-                    </ul>
-                  </div>
-                </li>
-              </ol>
-              <LongTextPreviewBlocks
-                v-if="entry.message.outroBlocks.length"
-                :blocks="entry.message.outroBlocks"
-                @link-click="handleLongTextLinkClick"
-              />
-              <slot name="message-actions" :message="entry.message" :turn="turn" />
-            </div>
-            <div
-              v-if="entry.message.displayAt"
-              class="assistant-transcript__message-footer assistant-transcript__message-footer--assistant"
-            >
-              <time>{{ entry.message.displayAt }}</time>
-            </div>
+                      /><span v-if="choice.recommended"> · Recommended</span>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            </ol>
+            <LongTextPreviewBlocks
+              v-if="entry.message.outroBlocks.length"
+              :blocks="entry.message.outroBlocks"
+              @link-click="handleLongTextLinkClick"
+            />
+            <slot name="message-actions" :message="entry.message" :turn="entry.turn" />
+          </div>
+          <div
+            v-if="entry.message.displayAt"
+            class="assistant-transcript__message-footer assistant-transcript__message-footer--assistant"
+          >
+            <time>{{ entry.message.displayAt }}</time>
           </div>
-        </template>
+        </div>
       </article>
 
       <div
@@ -303,6 +298,7 @@ import {
 
 const props = defineProps({
   systemLabel: { type: String, default: "Status" },
+  working: { type: Boolean, default: undefined },
   progressPreviewLimit: { type: Number, default: 2 },
   userMessageFormat: { type: String, default: "formatted", validator: (value) => ["plain", "formatted"].includes(value) },
   assistantLabel: {
@@ -373,6 +369,7 @@ const DISPLAY_MESSAGE_CACHE_LIMIT = 500;
 const bodyElement = ref(null);
 const bottomElement = ref(null);
 const expandedUserMessages = ref(new Set());
+const isWorking = computed(() => props.working ?? props.turns.some(turn => turn.pending));
 const followingLatest = ref(true);
 const initialScrollSettled = ref(false);
 const userScrollIntent = ref(false);
@@ -383,7 +380,9 @@ let initialScrollVersion = 0;
 let loadMoreScrollSnapshot = null;
 let loadMoreRequestVersion = 0;
 let pendingTailFollow = false;
+let previousScrollTop = 0;
 const USER_SCROLL_INTENT_RESET_MS = 600;
+const LOAD_MORE_THRESHOLD_PX = 160;
 const KEYBOARD_SCROLL_KEYS = new Set([
   " ",
   "ArrowDown",
@@ -530,66 +529,49 @@ function conversationMessageKey(message = {}, index = 0) {
   ].join(":");
 }
 
-function displayAgentTimeline(turn = {}, turnKey = "") {
-  const timeline = [];
-  for (const [index, message] of conversationAgentMessages(turn).entries()) {
-    const role = String(message?.role || "").trim();
-    if (role === "thinking") {
-      const displayed = displayThinkingMessage(message);
-      if (!displayed) {
-        continue;
-      }
-      const keyedMessage = {
-        ...displayed,
-        key: conversationMessageKey(message, index)
-      };
-      const previous = timeline.at(-1);
-      if (previous?.role === "thinking") {
-        previous.messages.push(keyedMessage);
-        continue;
+// Storage rows are not visual boundaries. Only an intervening message ends a
+// reasoning group, including when history is prepended or execution continues.
+const displayEntries = computed(() => {
+  const entries = [];
+  for (const [index, turn] of props.turns.entries()) {
+    const turnId = String(turn.turnId || index + 1);
+    const messages = [
+      turn.system && { ...turn.system, role: "system" },
+      turn.user && { ...turn.user, role: "user" },
+      ...conversationAgentMessages(turn)
+    ].filter(Boolean);
+    for (const [messageIndex, message] of messages.entries()) {
+      const role = String(message.role || "").trim();
+      const key = `${turnId}:${conversationMessageKey(message, messageIndex)}`;
+      const displayed = role === "thinking" ? displayThinkingMessage(message) : displayMessage(message, {
+        allowNumberedQuestions: role !== "user" && role !== "system",
+        preserveParagraphLineBreaks: role === "user",
+        previewUserMessage: role === "user"
+      }, key);
+      if (!displayed) continue;
+      const previous = entries.at(-1);
+      if (role === "thinking" && previous?.role === "thinking") {
+        previous.messages.push({ ...displayed, key });
+      } else {
+        entries.push({
+          key, role, turn: { ...turn, turnId }, message: displayed,
+          ...(role === "thinking" ? { messages: [{ ...displayed, key }] } : {})
+        });
       }
-      timeline.push({
-        key: `thinking:${keyedMessage.key}`,
-        messages: [keyedMessage],
-        role
-      });
-      continue;
     }
-    timeline.push({
-      key: conversationMessageKey(message, index),
-      message: displayMessage(message, {
-        allowNumberedQuestions: true
-      }, `${turnKey}:agent:${conversationMessageKey(message, index)}`),
-      role
-    });
   }
-  return timeline;
-}
+  // Anchor a progress group to the following message, or to the transcript end.
+  // Appending progress or prepending history then preserves its expansion state.
+  for (const [index, entry] of entries.entries()) {
+    if (entry.role === "thinking") entry.key = `progress:${entries[index + 1]?.key || "tail"}`;
+  }
+  return entries;
+});
 
 function handleLongTextLinkClick(payload) {
   emit("link-click", payload);
 }
 
-const displayTurns = computed(() => (Array.isArray(props.turns) ? props.turns : [])
-  .map((turn, index) => {
-    const turnId = String(turn.turnId || index + 1);
-    return {
-      ...turn,
-      agentTimeline: displayAgentTimeline(turn, turnId),
-      optimistic: turn.optimistic && typeof turn.optimistic === "object" && !Array.isArray(turn.optimistic)
-        ? turn.optimistic
-        : null,
-      pending: turn.pending === true,
-      system: displayMessage(turn.system, {}, `${turnId}:system`),
-      turnId,
-      user: displayMessage(turn.user, {
-        preserveParagraphLineBreaks: true,
-        previewUserMessage: true
-      }, `${turnId}:user`)
-    };
-  })
-  .filter((turn) => turn.system || turn.user || turn.agentTimeline.length));
-
 function userMessageCollapsible(message = null) {
   return Array.isArray(message?.previewBlocks);
 }
@@ -618,11 +600,11 @@ function toggleUserMessage(turn = {}) {
 
 const loadingIndicatorVisible = computed(() => Boolean(
   props.loading &&
-  !displayTurns.value.length
+  !displayEntries.value.length
 ));
 const initialScrollPending = computed(() => Boolean(
   props.visible &&
-  displayTurns.value.length &&
+  displayEntries.value.length &&
   !initialScrollSettled.value
 ));
 
@@ -638,40 +620,24 @@ function messageScrollKey(message = null) {
   ].join("/");
 }
 
-function agentTimelineScrollKey(timeline = []) {
-  return (Array.isArray(timeline) ? timeline : []).map((entry) => (
-    entry?.role === "thinking"
-      ? (entry.messages || []).map(messageScrollKey).join("+")
-      : messageScrollKey(entry?.message)
-  )).join("|");
-}
-
-function latestRenderedTailScrollKey(turns = []) {
-  const turn = Array.isArray(turns) ? turns.at(-1) : null;
-  if (!turn) {
-    return "";
-  }
-  const timeline = Array.isArray(turn.agentTimeline) ? turn.agentTimeline : [];
-  return [
-    turn.turnId,
-    messageScrollKey(turn.system),
-    messageScrollKey(turn.user),
-    turn.optimistic?.id || "",
-    turn.optimistic?.status || "",
-    turn.optimistic?.error || "",
-    turn.pending ? "pending" : "settled",
-    agentTimelineScrollKey(timeline)
-  ].join(":");
-}
-
 const timelineScrollTrigger = computed(() => [
   props.visible ? "visible" : "hidden",
   props.error ? "error" : "body",
   loadingIndicatorVisible.value ? "loading" : "ready",
-  displayTurns.value.length ? "has-turns" : "empty",
+  displayEntries.value.length ? "has-messages" : "empty",
   props.scrollKey
 ].join(":"));
-const latestRenderedTailKey = computed(() => latestRenderedTailScrollKey(displayTurns.value));
+const latestRenderedTailKey = computed(() => {
+  const entry = displayEntries.value.at(-1);
+  if (!entry) return "";
+  return [
+    entry.key,
+    isWorking.value,
+    entry.role === "thinking" ? entry.messages.map(messageScrollKey).join("+") : messageScrollKey(entry.message),
+    entry.turn.optimistic?.status || "",
+    entry.turn.optimistic?.error || ""
+  ].join(":");
+});
 const autoScrollEnabled = computed(() => Boolean(
   props.visible &&
   followingLatest.value
@@ -802,6 +768,13 @@ function clearLiveBottomScroll() {
 
 function updateLatestFollowFromScroll(event = {}) {
   const target = event?.currentTarget || bodyElement.value;
+  const scrollTop = target?.scrollTop || 0;
+  const scrolledUp = scrollTop < previousScrollTop;
+  previousScrollTop = scrollTop;
+  // Keep following the reader while the request is pending, before rows prepend.
+  if (loadMoreScrollSnapshot && target.scrollHeight === loadMoreScrollSnapshot.scrollHeight) {
+    loadMoreScrollSnapshot.scrollTop = scrollTop;
+  }
   const shouldFollow = scrollElementNearBottom(target);
   if (!shouldFollow && !userScrollIntent.value && followingLatest.value) {
     return;
@@ -812,14 +785,20 @@ function updateLatestFollowFromScroll(event = {}) {
     resumePendingTailFollow();
     return;
   }
-  if (!shouldFollow) {
-    clearLiveBottomScroll();
-    clearScheduledScrolls();
+  clearLiveBottomScroll();
+  clearScheduledScrolls();
+  if (
+    scrolledUp &&
+    initialScrollSettled.value &&
+    scrollTop <= LOAD_MORE_THRESHOLD_PX &&
+    !props.loadMoreError
+  ) {
+    requestLoadMore();
   }
 }
 
 function requestLoadMore() {
-  if (!props.hasMoreBefore || props.loadingMore) {
+  if (!props.hasMoreBefore || props.loadingMore || loadMoreScrollSnapshot) {
     return;
   }
   followingLatest.value = false;
@@ -863,7 +842,8 @@ async function completeLoadMoreRequest(version, changed) {
   }
   const element = bodyElement.value;
   if (element) {
-    element.scrollTop = snapshot.scrollTop + (element.scrollHeight - snapshot.scrollHeight);
+    previousScrollTop = snapshot.scrollTop + (element.scrollHeight - snapshot.scrollHeight);
+    element.scrollTop = previousScrollTop;
   }
   clearLoadMoreScrollSnapshot();
 }

package/src/client/conversation/useAssistantAttachments.js

@@ -39,13 +39,9 @@ function assistantAttachmentFilesFromDropEvent(event) {
   return assistantAttachmentFiles(dataTransfer?.files);
 }
 
-function assistantAttachmentFilesFromClipboardItems(items = []) {
-  return assistantAttachmentFilesFromTransferItems(items);
-}
-
 function assistantAttachmentFilesFromPasteEvent(event) {
   const clipboardData = event?.clipboardData;
-  const itemFiles = assistantAttachmentFilesFromClipboardItems(clipboardData?.items);
+  const itemFiles = assistantAttachmentFilesFromTransferItems(clipboardData?.items);
   if (itemFiles.length > 0) {
     return itemFiles;
   }
@@ -105,13 +101,6 @@ function attachmentIdentity(attachment = {}) {
   );
 }
 
-async function deliverUploadedAttachments(onUploaded, uploaded = []) {
-  if (uploaded.length > 0) {
-    return await onUploaded(uploaded);
-  }
-  return null;
-}
-
 const ASSISTANT_ATTACHMENT_MAX_BYTES = 100_000_000;
 const ASSISTANT_ATTACHMENT_MAX_ITEMS = 10;
 const ASSISTANT_ATTACHMENT_UPLOAD_CONCURRENCY = 2;
@@ -400,7 +389,7 @@ function useAssistantAttachments({
       attachments.value.push(receipt);
     }
     try {
-      const handoff = await deliverUploadedAttachments(onUploaded, [receipt]);
+      const handoff = await onUploaded([receipt]);
       const accepted = handoff?.accepted === true;
       if (row.activeHandoffToken !== token || !row.retained || row.phase === "cancelled") {
         removeReadyReceipt(row);

package/src/server/conversation/codexEvents.js

@@ -347,6 +347,23 @@ function classifyCodexAppServerEvent(notification = {}) {
     turnId: codexAppServerNotificationTurnId(notification)
   };
 
+  if (method === "item/agentMessage/delta") {
+    return {
+      ...base,
+      kind: "assistant_delta",
+      delta: typeof codexAppServerNotificationParams(notification).delta === "string"
+        ? codexAppServerNotificationParams(notification).delta : ""
+    };
+  }
+
+  if (method === "item/started" && itemType === "agentMessage") {
+    return {
+      ...base,
+      kind: "assistant_started",
+      role: phase === "commentary" ? "commentary" : "assistant"
+    };
+  }
+
   if (method === "error") {
     return {
       ...base,

package/src/server/conversation/index.js

@@ -1,2 +1,3 @@
 export { createConversationTranscript } from "./transcript.js";
 export { createMemoryConversationStorage } from "./memoryStorage.js";
+export { createConversationStreams } from "./streams.js";

package/src/server/conversation/openCodeClient.js

@@ -505,7 +505,16 @@ function createOpenCodeServerClient({
   });
 }
 
+/** Read text snapshots without trimming the whitespace at a streaming boundary. */
+function openCodeAssistantMessageText(message = {}) {
+  const values = [message.text, ...(message.content || [])
+    .filter((part) => part?.type === "text").map((part) => part.text)]
+    .filter((value) => typeof value === "string" && value.trim());
+  return [...new Set(values)].join("\n\n");
+}
+
 export {
+  openCodeAssistantMessageText,
   OPENCODE_RESPONSE_LIMIT_BYTES,
   createOpenCodeServerClient,
   readBoundedResponse

package/src/server/conversation/streams.js

@@ -0,0 +1,52 @@
+/** Transient provider output. Applications own scope, admission and final persistence. */
+export function createConversationStreams({ clock = () => new Date() } = {}) {
+  const streams = new Map();
+  let revision = 0;
+
+  function read(scope) {
+    const stream = streams.get(scope);
+    return {
+      revision,
+      messages: stream ? [...stream.messages.values()].map((message) => ({ ...message })) : []
+    };
+  }
+
+  function update(scope, { turnId, messageId, role = "assistant", text, delta, at } = {}) {
+    if (!turnId || !messageId || !["assistant", "commentary"].includes(role)) return null;
+    let stream = streams.get(scope);
+    if (!stream || stream.turnId !== turnId) {
+      stream = { turnId, messages: new Map(), completed: new Set() };
+      streams.set(scope, stream);
+    }
+    if (stream.completed.has(messageId)) return null;
+    const previous = stream.messages.get(messageId);
+    const next = {
+      messageId,
+      role: previous?.role || role,
+      at: previous?.at || at || clock().toISOString(),
+      text: typeof delta === "string" ? (previous?.text || "") + delta : (text ?? previous?.text ?? ""),
+      status: "inProgress"
+    };
+    if (previous?.text === next.text && previous.role === next.role) return null;
+    stream.messages.set(messageId, next);
+    revision += 1;
+    return read(scope);
+  }
+
+  function complete(scope, messageId) {
+    const stream = streams.get(scope);
+    if (!stream) return read(scope);
+    stream.completed.add(messageId);
+    stream.messages.delete(messageId);
+    revision += 1;
+    return read(scope);
+  }
+
+  function clear(scope) {
+    streams.delete(scope);
+    revision += 1;
+    return read(scope);
+  }
+
+  return { read, update, complete, clear };
+}

package/src/shared/conversation/index.js

@@ -1,4 +1,5 @@
 export * from "./turns.js";
+export * from "./streaming.js";
 export * from "./longTextBlocks.js";
 export * from "./numberedQuestionSugar.js";
 export * from "./answerChoiceSugar.js";

package/src/shared/conversation/streaming.js

@@ -0,0 +1,24 @@
+function messagesForTurn(turn) {
+  return turn.messages || [turn.system, turn.user, ...(turn.thinking || []), ...(turn.commentary || []), turn.assistant].filter(Boolean);
+}
+
+/** Overlay live provider output without changing the saved transcript. */
+export function mergeConversationStream(turns = [], snapshot = {}) {
+  const savedIds = new Set(turns.flatMap((turn) => messagesForTurn(turn).map((message) => message.messageId)));
+  const messages = (snapshot?.messages || []).filter((message) => message.text && !savedIds.has(message.messageId));
+  if (!messages.length) return turns;
+  const result = [...turns];
+  for (const message of messages) {
+    const tail = result.at(-1);
+    const turn = tail && !tail.assistant && !tail.system
+      ? { ...tail, messages: [...messagesForTurn(tail)] }
+      : { turnId: `stream:${message.messageId}`, messages: [] };
+    if (turn.turnId === tail?.turnId) result[result.length - 1] = turn;
+    else result.push(turn);
+    turn.messages.push(message);
+    turn.pending = true;
+    if (message.role === "assistant") turn.assistant = message;
+    else turn.commentary = [...(turn.commentary || []), message];
+  }
+  return result;
+}

package/test/assistantScroll.browser.test.js

@@ -22,6 +22,111 @@ const VIEWPORTS = Object.freeze([
   Object.freeze({ name: "drawer", width: 360, height: 600 })
 ]);
 
+test("streaming answers grow in one bubble, preserve drafts and settle once at every width", {
+  skip: !RUN_BROWSER_TEST, timeout: 90_000
+}, async () => {
+  const vite = await startViteFixture({ fixtureRoot: FIXTURE_ROOT });
+  const browser = await chromium.launch(createChromiumLaunchOptions());
+  try {
+    for (const width of [390, 800, 1365]) {
+      const page = await browser.newPage({ viewport: { width, height: 900 } });
+      await page.goto(`${vite.baseURL}/?streaming=1`);
+      const input = page.getByRole("textbox", { name: "Message AI assistant" });
+      await input.fill("Keep this draft");
+      await input.evaluate(element => element.setSelectionRange(2, 5));
+      const receive = () => page.getByRole("button", { name: "Receive text" }).evaluate(element => element.click());
+      await receive();
+      const answer = page.locator(".assistant-transcript__body").getByText("Growing answer.", { exact: true });
+      await expect(answer).toHaveCount(1);
+      await receive();
+      await expect(page.getByText("Growing answer. Growing answer.", { exact: true })).toHaveCount(1);
+      await expect(input).toBeFocused();
+      assert.deepEqual(await input.evaluate(element => [element.selectionStart, element.selectionEnd]), [2, 5]);
+      await page.getByRole("button", { name: "Finish answer" }).evaluate(element => element.click());
+      await expect(page.getByText("Growing answer. Growing answer.", { exact: true })).toHaveCount(1);
+      await expect(input).toHaveValue("Keep this draft");
+      assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth));
+      await page.close();
+    }
+  } finally {
+    await browser.close();
+    await stopProcess(vite);
+  }
+});
+
+test("adjacent reasoning stays grouped across storage rows, history pages and execution changes", {
+  skip: !RUN_BROWSER_TEST,
+  timeout: 90_000
+}, async () => {
+  const vite = await startViteFixture({ fixtureRoot: FIXTURE_ROOT });
+  const browser = await chromium.launch(createChromiumLaunchOptions());
+  try {
+    for (const width of [390, 800, 1365]) {
+      const page = await browser.newPage({ viewport: { width, height: 900 } });
+      const errors = [];
+      page.on("pageerror", error => errors.push(error.message));
+      await page.goto(`${vite.baseURL}/?progress=1`);
+      const groups = page.locator(".assistant-progress");
+      const summaries = page.locator(".assistant-progress__message");
+      const input = page.getByRole("textbox", { name: "Message AI assistant" });
+      const external = name => page.getByRole("button", { name, exact: true }).evaluate(element => element.click());
+      await expect(groups).toHaveCount(1);
+      await expect(summaries).toHaveText(["Reasoning 2", "Reasoning 3"]);
+      await input.fill("Keep my draft");
+      await input.evaluate(element => element.setSelectionRange(2, 5));
+      await external("Change storage rows");
+      await expect(groups).toHaveCount(1);
+      await expect(summaries).toHaveText(["Reasoning 2", "Reasoning 3"]);
+      await external("Change storage rows");
+      await external("Toggle working");
+      await expect(summaries).toHaveCount(0);
+      await expect(page.getByRole("button", { name: "Show all 3 progress updates" })).toBeVisible();
+      await external("Toggle working");
+      await expect(summaries).toHaveText(["Reasoning 2", "Reasoning 3"]);
+      await external("Show all 3 progress updates");
+      await expect(summaries).toHaveCount(3);
+      await external("Load older messages");
+      await expect(groups).toHaveCount(1);
+      await expect(summaries).toHaveText(["Older reasoning", "Reasoning 1", "Reasoning 2", "Reasoning 3"]);
+      await external("Append thinking");
+      await expect(summaries).toHaveCount(5);
+      await expect(input).toBeFocused();
+      await expect(input).toHaveValue("Keep my draft");
+      assert.deepEqual(await input.evaluate(element => [element.selectionStart, element.selectionEnd]), [2, 5]);
+      await external("Show latest 2 progress updates");
+      await external("Toggle working");
+      await expect(summaries).toHaveCount(0);
+      await external("Show all 5 progress updates");
+      await external("Change conversation");
+      await expect(summaries).toHaveCount(0);
+      await external("Toggle working");
+
+      // Every visible non-reasoning message separates groups, regardless of rows.
+      for (const [index, role] of ["commentary", "assistant", "user", "system"].entries()) {
+        await external(`Append ${role}`);
+        await expect(summaries).toHaveCount(0);
+        await external("Append thinking");
+        await external("Append thinking");
+        await expect(groups).toHaveCount(index + 2);
+        await expect(summaries).toHaveCount(2);
+      }
+      await external("Change storage rows");
+      await expect(groups).toHaveCount(5);
+      await expect(summaries).toHaveCount(2);
+      const bodyText = await page.locator(".assistant-transcript__body").textContent();
+      assert.ok(bodyText.indexOf("commentary 6") < bodyText.indexOf("assistant 9"));
+      assert.ok(bodyText.indexOf("assistant 9") < bodyText.indexOf("user 12"));
+      assert.ok(bodyText.indexOf("user 12") < bodyText.indexOf("system 15"));
+      assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth));
+      assert.deepEqual(errors, []);
+      await page.close();
+    }
+  } finally {
+    await browser.close();
+    await stopProcess(vite);
+  }
+});
+
 async function assertResponsiveAssistant(page, viewport) {
   await page.setViewportSize({ width: viewport.width, height: viewport.height });
   await page.goto("/");
@@ -86,8 +191,8 @@ test("conversation scrolling preserves history anchors and resets expansion on s
     await page.goto(`${vite.baseURL}/?controls=1`);
     const body = page.locator(".assistant-transcript__body");
     await expect(page.getByText("Conversation line 70:", { exact: false })).toBeVisible();
-    await body.hover();
-    await page.mouse.wheel(0, -100_000);
+    // Keep the explicit button path covered independently of automatic loading.
+    await body.evaluate(element => { element.scrollTop = 0; });
     await expect.poll(() => body.evaluate((element) => element.scrollTop)).toBe(0);
     await page.getByRole("button", { name: "Read more", exact: true }).click();
     await expect(page.getByRole("button", { name: "Show less", exact: true })).toBeVisible();
@@ -114,6 +219,99 @@ test("conversation scrolling preserves history anchors and resets expansion on s
   }
 });
 
+test("upward scrolling loads older history once and preserves retry and selection behavior", {
+  skip: !RUN_BROWSER_TEST,
+  timeout: 90_000
+}, async () => {
+  const vite = await startViteFixture({ fixtureRoot: FIXTURE_ROOT });
+  const browser = await chromium.launch(createChromiumLaunchOptions());
+  try {
+    for (const width of [390, 800, 1365]) {
+      const touch = width < 1000;
+      const page = await browser.newPage({ viewport: { width, height: 900 }, hasTouch: touch, isMobile: touch });
+      const errors = [];
+      page.on("pageerror", error => errors.push(error.message));
+      await page.goto(`${vite.baseURL}/?controls=1&history=1`);
+      const body = page.locator(".assistant-transcript__body");
+      const requests = page.locator("output");
+      const external = name => page.getByRole("button", { name, exact: true }).evaluate(element => element.click());
+      await expect(page.getByText("Conversation line 70:", { exact: false })).toBeVisible();
+      await expect(requests).toHaveText("History requests: 0");
+      // Detach from initial follow before positioning above the history boundary.
+      await body.hover();
+      await page.mouse.wheel(0, -100);
+      await expect.poll(() => body.evaluate(element => element.scrollHeight - element.clientHeight - element.scrollTop)).toBeGreaterThan(50);
+      await body.evaluate(element => { element.scrollTop = 420; });
+      await expect.poll(() => body.evaluate(element => element.scrollTop)).toBe(420);
+      await expect(requests).toHaveText("History requests: 0");
+      if (touch) {
+        const bounds = await body.boundingBox();
+        const cdp = await page.context().newCDPSession(page);
+        const x = bounds.x + bounds.width / 2;
+        const y = bounds.y + 40;
+        await cdp.send("Input.dispatchTouchEvent", { type: "touchStart", touchPoints: [{ x, y }] });
+        for (let offset = 20; offset <= 380; offset += 20) {
+          await cdp.send("Input.dispatchTouchEvent", { type: "touchMove", touchPoints: [{ x, y: y + offset }] });
+          await page.evaluate(() => new Promise(requestAnimationFrame));
+        }
+        const stopped = body.evaluate(element => new Promise(resolve => {
+          element.addEventListener("scrollend", () => resolve(), { once: true });
+        }));
+        await cdp.send("Input.dispatchTouchEvent", { type: "touchEnd", touchPoints: [] });
+        await stopped;
+        await cdp.detach();
+      } else {
+        await body.hover();
+        await page.mouse.wheel(0, -380);
+      }
+      const pending = page.getByRole("button", { name: "Loading older messages…", exact: true });
+      await expect(pending).toBeDisabled();
+      await expect(requests).toHaveText("History requests: 1");
+      // Repeated events while waiting must not issue another request.
+      await body.evaluate(element => {
+        element.dispatchEvent(new Event("scroll"));
+        element.dispatchEvent(new Event("scroll"));
+      });
+      const original = page.getByText("Conversation line 1:", { exact: false }).first();
+      const originalTop = (await original.boundingBox()).y;
+      await external("Complete history load");
+      await expect(pending).toHaveCount(0);
+      await expect.poll(async () => Math.abs((await original.boundingBox()).y - originalTop)).toBeLessThan(2);
+      await expect(requests).toHaveText("History requests: 1");
+
+      // Keyboard navigation also requests older history.
+      await body.focus();
+      await body.press("Home");
+      await expect(requests).toHaveText("History requests: 2");
+      await external("Fail history load");
+      await expect(page.getByText("History unavailable", { exact: true })).toBeVisible();
+      await body.press("ArrowDown");
+      await body.press("Home");
+      await expect(requests).toHaveText("History requests: 2");
+      await page.getByRole("button", { name: "Load older messages", exact: true }).click();
+      await expect(requests).toHaveText("History requests: 3");
+      await external("Complete history load");
+      await expect(page.getByText("History unavailable", { exact: true })).toHaveCount(0);
+
+      await external("Change conversation");
+      await expect(page.getByText("Conversation line 70:", { exact: false })).toBeVisible();
+      await expect(requests).toHaveText("History requests: 3");
+      await external("Exhaust history");
+      await body.focus();
+      await body.press("Home");
+      await expect.poll(() => body.evaluate(element => element.scrollTop)).toBe(0);
+      await expect(requests).toHaveText("History requests: 3");
+      await expect(page.getByRole("button", { name: "Load older messages", exact: true })).toHaveCount(0);
+      assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth));
+      assert.deepEqual(errors, []);
+      await page.close();
+    }
+  } finally {
+    await browser.close();
+    await stopProcess(vite);
+  }
+});
+
 test("conversation composer preserves typing and reacts to external state and pane resizing", {
   skip: !RUN_BROWSER_TEST,
   timeout: 60_000

package/test/conversationStreaming.test.js

@@ -0,0 +1,70 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createConversationStreams } from "../src/server/conversation/streams.js";
+import { classifyCodexAppServerEvent } from "../src/server/conversation/codexEvents.js";
+import { openCodeAssistantMessageText } from "../src/server/conversation/openCodeClient.js";
+import { mergeConversationStream } from "../src/shared/conversation/streaming.js";
+
+test("Codex chunks retain whitespace and item identity; completed items reject late chunks", () => {
+  const streams = createConversationStreams();
+  const params = { threadId: "thread", turnId: "turn", itemId: "answer" };
+  const started = classifyCodexAppServerEvent({ method: "item/started", params: {
+    ...params, item: { id: "answer", type: "agentMessage", phase: "final_answer" }
+  } });
+  assert.equal(started.kind, "assistant_started");
+  streams.update("session", { ...started, messageId: started.itemId });
+  for (const delta of ["Hello", " ", "world", "\n\n", "```js\n  x()\n``` "]) {
+    const event = classifyCodexAppServerEvent({ method: "item/agentMessage/delta", params: { ...params, delta } });
+    assert.equal(event.kind, "assistant_delta");
+    assert.equal(event.delta, delta);
+    streams.update("session", { ...event, messageId: event.itemId });
+  }
+  const snapshot = streams.read("session");
+  assert.equal(snapshot.messages[0].text, "Hello world\n\n```js\n  x()\n``` ");
+  assert.equal(snapshot.messages[0].status, "inProgress");
+  snapshot.messages[0].text = "Mutation must not change the stream";
+  assert.match(streams.read("session").messages[0].text, /^Hello world/);
+  const completed = streams.complete("session", "answer");
+  assert.deepEqual(completed.messages, []);
+  assert.equal(streams.update("session", { ...params, messageId: "answer", delta: "late" }), null);
+  assert.deepEqual(streams.read("other-session").messages, []);
+});
+
+test("OpenCode text snapshots replace partial text and unchanged snapshots emit nothing", () => {
+  const streams = createConversationStreams();
+  const message = { turnId: "turn", messageId: "answer" };
+  const text = openCodeAssistantMessageText({ content: [{ type: "reasoning", text: "private" }, { type: "text", text: "Hello " }] });
+  assert.equal(text, "Hello ");
+  streams.update("one", { ...message, text });
+  assert.equal(streams.update("one", { ...message, text }), null);
+  const next = streams.update("one", { ...message, text: "Hello world" });
+  assert.equal(next.messages[0].text, "Hello world");
+  assert.deepEqual(streams.clear("one").messages, []);
+  streams.update("one", { ...message, turnId: "next", text: "New answer" });
+  assert.equal(streams.read("one").messages.length, 1);
+});
+
+test("commentary keeps its role and saved answers replace live text without mutating history", () => {
+  const streams = createConversationStreams();
+  const started = classifyCodexAppServerEvent({ method: "item/started", params: {
+    threadId: "thread", turnId: "turn", item: { id: "comment", type: "agentMessage", phase: "commentary" }
+  } });
+  streams.update("one", { ...started, messageId: started.itemId });
+  streams.update("one", { turnId: "turn", messageId: "comment", delta: "Checking" });
+  assert.equal(streams.read("one").messages[0].role, "commentary");
+  streams.complete("one", "comment");
+  streams.update("one", { turnId: "turn", messageId: "answer", text: "Partial" });
+  const user = { role: "user", messageId: "user", text: "Question" };
+  const turns = [{ turnId: "000001", user, messages: [user] }];
+  const live = mergeConversationStream(turns, streams.read("one"));
+  assert.equal(live[0].turnId, "000001");
+  assert.equal(live[0].assistant.text, "Partial");
+  assert.equal(live[0].pending, true);
+  assert.equal(turns[0].messages.length, 1);
+  const final = { role: "assistant", messageId: "answer", text: "Final answer" };
+  const saved = [{ ...turns[0], assistant: final, messages: [user, final] }];
+  assert.equal(mergeConversationStream(saved, streams.read("one")), saved);
+  const withoutMessages = [{ turnId: "000001", user, assistant: final }];
+  assert.equal(mergeConversationStream(withoutMessages, streams.read("one")), withoutMessages);
+  assert.equal(mergeConversationStream([{ turnId: "000001", user }], streams.read("one"))[0].messages[0], user);
+});