@jskit-ai/assistant-core 0.1.172 → 0.1.173

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.173",
+    "@jskit-ai/http-runtime": "0.1.193",
+    "@jskit-ai/kernel": "0.1.195",
     "@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.12",
+    "@jskit-ai/connectors-catalog": "0.1.12"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",

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.173",
   "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.137",
+    "@jskit-ai/resource-crud-core": "0.1.137",
     "@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.193",
+    "@jskit-ai/kernel": "0.1.195",
     "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/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);
@@ -530,66 +527,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 +598,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 +618,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

package/test/assistantScroll.browser.test.js

@@ -22,6 +22,79 @@ const VIEWPORTS = Object.freeze([
   Object.freeze({ name: "drawer", width: 360, height: 600 })
 ]);
 
+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("/");