@jskit-ai/assistant-runtime 0.1.162 → 0.1.164

package/fixtures/conversation/App.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useTheme } from "vuetify";
+import { useWebPlacementContext } from "@jskit-ai/shell-web/client/placement";
+import AssistantSurfaceClientElement from "../../src/client/components/AssistantSurfaceClientElement.vue";
+const route = useRoute();
+const router = useRouter();
+const theme = useTheme();
+const { context, mergeContext } = useWebPlacementContext();
+const mounted = ref(true);
+const second = ref(false);
+const compact = ref(false);
+const surface = ref("admin");
+const workspace = computed(() => route.query.workspace || "alpha");
+function switchWorkspace() { router.push({ query: { workspace: workspace.value === "alpha" ? "beta" : "alpha" } }); }
+</script>
+<template>
+  <v-app>
+    <v-main>
+      <div class="fixture" :class="{ 'fixture--page': route.query.page === '1' }">
+        <nav aria-label="Fixture controls">
+          <button @click="switchWorkspace">Switch workspace</button>
+          <button @click="mergeContext({ user: { id: context.user.id === '1' ? '2' : '1' } })">Switch user</button>
+          <button @click="mergeContext({ workspace: { id: '42', slug: workspace, name: 'Workspace metadata loaded' } })">Load workspace metadata</button>
+          <button @click="surface = surface === 'admin' ? 'console' : 'admin'">Switch surface</button>
+          <button @click="mounted = !mounted">Toggle view</button>
+          <button @click="second = !second">Second instance</button>
+          <button @click="compact = !compact">Resize pane</button>
+          <button @click="theme.change(theme.global.name.value === 'dark' ? 'light' : 'dark')">Toggle theme</button>
+        </nav>
+        <div class="fixture__panes" :class="{ 'fixture__panes--compact': compact }">
+          <AssistantSurfaceClientElement v-if="mounted" :surface-id="surface" :layout="compact ? 'compact' : 'page'" assistant-label="Fixture assistant" />
+          <AssistantSurfaceClientElement v-if="second" surface-id="console" assistant-label="Second assistant" />
+        </div>
+      </div>
+    </v-main>
+  </v-app>
+</template>
+<style>
+html, body, #app { height: 100%; margin: 0; }
+.fixture { height: 100dvh; display: flex; flex-direction: column; min-height: 0; }
+.fixture nav { display: flex; flex-wrap: wrap; gap: .5rem; flex: 0 0 auto; }
+.fixture nav button { padding: .25rem; }
+.fixture__panes { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
+.fixture__panes > * { flex: 1 1 0; min-width: 0; }
+.fixture__panes--compact { width: min(360px, 100%); }
+.fixture--page { height: auto; }
+.fixture--page .fixture__panes { display: block; }
+</style>

package/fixtures/conversation/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><div id="app"></div><script type="module" src="/main.js"></script></body></html>

package/fixtures/conversation/main.js

@@ -0,0 +1,31 @@
+import { createApp } from "vue";
+import { createRouter, createWebHistory } from "vue-router";
+import { VueQueryPlugin } from "@tanstack/vue-query";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
+import "vuetify/styles";
+import App from "./App.vue";
+import { createWebPlacementRuntime } from "../../../shell-web/src/client/placement/runtime.js";
+
+globalThis.__JSKIT_CLIENT_APP_CONFIG__ = {
+  surfaceDefinitions: { admin: { requiresWorkspace: true }, console: { requiresWorkspace: false } },
+  assistantSurfaces: {
+    admin: { settingsSurfaceId: "admin", configScope: "workspace" },
+    console: { settingsSurfaceId: "console", configScope: "global" }
+  }
+};
+const router = createRouter({ history: createWebHistory(), routes: [{ path: "/:pathMatch(.*)*", component: App }] });
+const app = createApp(App);
+const placement = createWebPlacementRuntime({ components: new Map() });
+placement.setContext({ user: { id: "1" }, surfaceConfig: {
+  defaultSurfaceId: "admin",
+  surfacesById: { admin: { id: "admin", routeBase: "/", requiresWorkspace: false } }
+} });
+app.provide("jskit.shell-web.runtime.web-placement.client", placement);
+app.provide("jskit.workspaces.web.scope-support", { readRouteScope: ({ route }) => ({ workspaceSlug: route.query.workspace || "alpha" }) });
+app.use(router).use(VueQueryPlugin, { queryClientConfig: { defaultOptions: { queries: { retry: false } } } });
+app.use(createVuetify({ theme: { defaultTheme: "light" }, components, directives, icons: { defaultSet: "mdi", aliases, sets: { mdi } } }));
+await router.isReady();
+app.mount("#app");

package/fixtures/conversation/vite.config.mjs

@@ -0,0 +1,69 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { fileURLToPath } from "node:url";
+
+export default defineConfig({
+  root: fileURLToPath(new URL("./", import.meta.url)),
+  server: { host: "127.0.0.1", strictPort: true },
+  plugins: [vue(), {
+    name: "controlled-assistant-api",
+    configureServer(server) {
+      const streams = [];
+      const requests = [];
+      server.middlewares.use(async (req, res, next) => {
+        const url = new URL(req.url, "http://fixture");
+        if (!url.pathname.startsWith("/api/") && !url.pathname.startsWith("/fixture/")) return next();
+        const json = (value) => { res.setHeader("Content-Type", "application/json"); res.end(JSON.stringify(value)); };
+        const send = (stream, event) => stream.res.write(`${JSON.stringify(event)}\n`);
+        if (url.pathname === "/api/session") return json({ csrfToken: "fixture-only" });
+        if (url.pathname === "/fixture/state") return json({ requests, streams: streams.map(({ closed }) => ({ closed })) });
+        if (url.pathname === "/fixture/next") {
+          for (const stream of streams.filter((entry) => !entry.closed)) {
+            if (url.searchParams.has("fail")) {
+              send(stream, { type: "error", message: "Fixture provider failed." });
+              send(stream, { type: "done", status: "failed" });
+              stream.res.end();
+            } else if (url.searchParams.has("finish")) {
+              send(stream, { type: "tool_result", toolCallId: "lookup", ok: true, result: { private: "never-render-this-payload" } });
+              send(stream, { type: "assistant_delta", delta: " completed." });
+              send(stream, { type: "done", status: "completed" });
+              stream.res.end();
+            } else {
+              send(stream, { type: "assistant_delta", delta: "Partial answer" });
+            }
+          }
+          return json({ ok: true });
+        }
+        if (url.pathname.endsWith("/chat/stream")) {
+          let body = "";
+          for await (const part of req) body += part;
+          const payload = JSON.parse(body);
+          requests.push({ path: url.pathname, surface: req.headers['x-jskit-surface'], ...payload });
+          res.setHeader("Content-Type", "application/x-ndjson");
+          const stream = { res, closed: false };
+          streams.push(stream);
+          res.on("close", () => { stream.closed = true; });
+          send(stream, { type: "meta", conversationId: payload.conversationId || "100" });
+          send(stream, { type: "tool_call", toolCallId: "lookup", name: "Look up records", arguments: "never-render-this-payload" });
+          return;
+        }
+        if (url.pathname.endsWith("/messages")) {
+          const id = url.pathname.split("/").at(-2);
+          const entries = Array.from({ length: 70 }, (_, index) => ({
+            id: String(index + 1), kind: "chat", role: index % 2 ? "assistant" : "user",
+            contentText: index < 2 ? "Identical text" : `Saved ${id} message ${index + 1}.\n\n**Formatted** answer with a [link](https://example.com). Long_text_keeps_wrapping_in_a_narrow_drawer_even_while_other_content_is_streaming.`
+          }));
+          return json({ data: { type: "assistant-conversation-messages", id, attributes: { entries, totalPages: 1 } } });
+        }
+        if (url.pathname.endsWith("/conversations")) {
+          const older = url.searchParams.has("page[cursor]");
+          return json({ data: [{ type: "assistant-conversations", id: older ? "2" : "1", attributes: {
+            title: older ? "Older conversation" : "Saved conversation", status: "completed", startedAt: "2026-09-01T00:00:00Z"
+          } }], meta: { page: { nextCursor: older ? null : "older" } } });
+        }
+        res.statusCode = 404;
+        json({ error: "Unknown fixture request" });
+      });
+    }
+  }]
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-runtime",
-  "version": "0.1.162",
+  "version": "0.1.164",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -11,15 +11,15 @@
     "./server/actionIds": "./src/server/actionIds.js"
   },
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.1.167",
-    "@jskit-ai/database-runtime": "0.1.191",
+    "@jskit-ai/assistant-core": "0.1.171",
+    "@jskit-ai/database-runtime": "0.1.193",
     "json-rest-schema": "^1.0.17"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.1.189",
-    "@jskit-ai/http-web": "0.1.36",
-    "@jskit-ai/kernel": "0.1.191",
-    "@jskit-ai/shell-web": "0.1.195",
+    "@jskit-ai/http-runtime": "0.1.191",
+    "@jskit-ai/http-web": "0.1.38",
+    "@jskit-ai/kernel": "0.1.193",
+    "@jskit-ai/shell-web": "0.1.197",
     "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0"

package/patterns/assistant-surface/PATTERN.md

@@ -75,3 +75,20 @@ public workspace support.
 - workspace scope on a non-workspace surface
 - copied runtime repositories, actions, or routes
 - generator commands, question metadata, receipts, or provenance
+
+## Presentation and view lifetime
+
+The surface uses the same `AssistantConversationElement` as applications with
+their own runtime. Use `layout="compact"` for a bounded drawer and the
+`assistantLabel`, `welcomeMessage`, `placeholder`, and `showToolActivity` props
+for presentation. Conversations remains available at all widths. Keep settings
+on the configured settings route. Use the `composer-tools` slot for extra
+application controls and `focus()` when opening a pane; do not target internal
+DOM classes.
+
+The runtime owns one draft and maps its stream statuses to the shared contract.
+Typing remains possible during a response; Send waits. Unmounting or switching
+workspace/surface aborts the local response and discards that view's state.
+Reopening restores saved history, not a live stream. Stop cannot guarantee that
+a server-side tool already running has stopped. Custom editor conversations
+should use their own adapter and keep their existing operation/storage owner.

package/src/client/components/AssistantSurfaceClientElement.vue

@@ -1,19 +1,152 @@
-<template>
-  <AssistantClientElement v-bind="runtime" />
-</template>
-
 <script setup>
-import { AssistantClientElement } from "@jskit-ai/assistant-core/client";
+import { computed, onMounted, onScopeDispose, reactive, ref, toRef, watchPostEffect } from "vue";
+import { AssistantConversationElement } from "@jskit-ai/assistant-core/client/conversation";
 import { useAssistantRuntime } from "../composables/useAssistantRuntime.js";
+import { mapAssistantConversationTurns } from "../support/assistantRuntimeState.js";
 
 const props = defineProps({
-  surfaceId: {
-    type: String,
-    required: true
-  }
+  surfaceId: { type: String, required: true },
+  layout: { type: String, default: "page", validator: (value) => ["page", "compact"].includes(value) },
+  assistantLabel: { type: String, default: "Assistant" },
+  welcomeMessage: { type: String, default: "What would you like to do?" },
+  placeholder: { type: String, default: "Message the assistant…" },
+  showToolActivity: { type: Boolean, default: true }
 });
-
-const runtime = useAssistantRuntime({
-  surfaceId: props.surfaceId
+const runtime = useAssistantRuntime({ surfaceId: toRef(props, "surfaceId") });
+const state = reactive(runtime.state);
+const conversation = ref(null);
+const root = ref(null);
+const historyOpen = ref(false);
+// Page mode owns viewport sizing; compact mode fills the host's bounded pane.
+onMounted(() => {
+  const syncPageOffset = () => {
+    if (props.layout === "page") root.value.style.setProperty("--assistant-page-top", `${Math.max(0, root.value.getBoundingClientRect().top)}px`);
+  };
+  const observer = new ResizeObserver(syncPageOffset);
+  observer.observe(root.value.parentElement);
+  window.addEventListener("resize", syncPageOffset);
+  watchPostEffect(syncPageOffset);
+  onScopeDispose(() => {
+    observer.disconnect();
+    window.removeEventListener("resize", syncPageOffset);
+  });
 });
+const selectedConversation = computed(() => state.conversationHistory.find((entry) => String(entry.id) === state.activeConversationId));
+const turns = computed(() => mapAssistantConversationTurns(state.messages, state.pendingToolEvents, props));
+const adapter = computed(() => ({
+  conversation: {
+    turns: turns.value,
+    scrollKey: `${state.scopeKey}:${state.activeConversationId || "new"}`,
+    loading: state.isRestoringConversation,
+    assistantLabel: props.assistantLabel,
+    welcomeMessage: state.messages.length || state.isRestoringConversation ? "" : props.welcomeMessage
+  },
+  composer: {
+    draft: state.input,
+    canSend: state.canSend,
+    disabled: !state.hasRuntimeScope,
+    canStop: state.isStreaming,
+    stopPending: state.isCanceling,
+    placeholder: props.placeholder,
+    rows: 2,
+    density: props.layout === "compact" ? "compact" : "default",
+    submitOnEnter: true,
+    submitOnModifierEnter: true
+  },
+  actions: {
+    setDraft(value) { state.input = value; },
+    submit: runtime.actions.sendMessage,
+    stop: runtime.actions.cancelStream
+  }
+}));
+
+function conversationSubtitle(entry) {
+  const details = [runtime.meta.normalizeConversationStatus(entry.status), runtime.meta.formatConversationStartedAt(entry.startedAt), `${Number(entry.messageCount || 0)} messages`];
+  if (state.isAdminSurface) {
+    details.push(entry.createdByUserDisplayName || entry.createdByUserEmail || (entry.createdByUserId ? `User #${entry.createdByUserId}` : "Unknown user"));
+  }
+  return details.join(" · ");
+}
+
+async function selectConversation(entry) {
+  historyOpen.value = false;
+  await runtime.actions.selectConversation(entry);
+}
+
+function startNewConversation() {
+  runtime.actions.startNewConversation();
+  historyOpen.value = false;
+}
+
+defineExpose({ focus: () => conversation.value?.focus() });
 </script>
+
+<template>
+  <section ref="root" class="assistant-surface" :class="`assistant-surface--${layout}`" :aria-label="assistantLabel">
+    <div class="assistant-surface__toolbar">
+      <span class="assistant-surface__title">{{ selectedConversation?.title || 'New conversation' }}</span>
+      <v-btn variant="text" @click="historyOpen = true">Conversations</v-btn>
+      <v-menu v-if="showToolActivity && state.pendingToolEvents.length" location="bottom end">
+        <template #activator="{ props: menuProps }">
+          <v-btn v-bind="menuProps" variant="text">Activity</v-btn>
+        </template>
+        <v-list aria-label="Tool activity" max-height="320" max-width="360" class="assistant-surface__activity">
+          <v-list-item v-for="event in state.pendingToolEvents" :key="event.id" :title="event.name" :subtitle="event.status" />
+        </v-list>
+      </v-menu>
+    </div>
+    <AssistantConversationElement ref="conversation" :adapter="adapter" label="Conversation" class="assistant-surface__conversation">
+      <template #message-actions="{ message }">
+        <p v-if="message.status === 'failed' && message.error" class="assistant-surface__message-error" role="status">{{ message.error }}</p>
+        <p v-if="message.status === 'interrupted'" class="assistant-surface__notice" role="status">Response canceled. A tool already running may still finish.</p>
+      </template>
+      <template #hints>
+        <p v-if="state.error && !state.messages.some((message) => message.error === state.error)" class="assistant-surface__message-error" role="status">{{ state.error }}</p>
+      </template>
+      <template #composer-tools><slot name="composer-tools" :runtime="runtime" /></template>
+    </AssistantConversationElement>
+
+    <v-dialog v-model="historyOpen" max-width="640" scrollable aria-label="Conversations">
+      <v-card class="assistant-surface__history">
+        <v-card-title>Conversations</v-card-title>
+        <v-card-actions class="assistant-surface__history-actions">
+          <v-btn color="primary" :disabled="!state.canStartNewConversation" @click="startNewConversation">Start new conversation</v-btn>
+          <v-btn :disabled="state.conversationHistoryLoading" @click="runtime.actions.refreshConversationHistory">Refresh</v-btn>
+          <v-btn @click="historyOpen = false">Close</v-btn>
+        </v-card-actions>
+        <v-card-text>
+          <p v-if="state.conversationHistoryError" role="alert">{{ state.conversationHistoryError }}</p>
+          <v-skeleton-loader v-if="state.conversationHistoryLoading && !state.conversationHistory.length" type="list-item-two-line@3" aria-label="Loading conversations" />
+          <v-list v-else aria-label="Saved conversations">
+            <v-list-item v-if="!state.conversationHistory.length" title="No saved conversations" />
+            <v-list-item
+              v-for="entry in state.conversationHistory" :key="entry.id"
+              :active="String(entry.id) === state.activeConversationId"
+              :title="entry.title || 'Untitled conversation'" :subtitle="conversationSubtitle(entry)"
+              :disabled="state.isStreaming || state.isRestoringConversation" @click="selectConversation(entry)"
+            />
+          </v-list>
+          <v-btn v-if="state.conversationHistoryHasMore" :disabled="state.conversationHistoryLoadingMore" variant="text" @click="runtime.actions.loadMoreConversationHistory">
+            {{ state.conversationHistoryLoadingMore ? 'Loading conversations…' : 'Load older conversations' }}
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </section>
+</template>
+
+<style scoped>
+.assistant-surface { display: flex; flex-direction: column; height: 100%; max-height: 100%; min-height: 0; min-width: 0; overflow: hidden; gap: .5rem; }
+.assistant-surface--page { padding: .5rem; height: calc(100dvh - var(--assistant-page-top, 0px) - var(--v-layout-bottom, 0px) - 1rem - env(safe-area-inset-bottom, 0px)); }
+.assistant-surface__toolbar { display: flex; align-items: center; flex-wrap: wrap; flex: 0 0 auto; gap: .25rem; }
+.assistant-surface__title { flex: 1 1 8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
+.assistant-surface__conversation { flex: 1 1 auto; }
+.assistant-surface__activity { overflow: auto; }
+.assistant-surface__message-error, .assistant-surface__notice { font-size: .85rem; margin: .25rem 0; overflow-wrap: anywhere; }
+.assistant-surface__message-error { color: rgb(var(--v-theme-error)); }
+.assistant-surface__notice { color: rgba(var(--v-theme-on-surface), .75); }
+.assistant-surface__history-actions { flex-wrap: wrap; }
+@media (max-width: 600px), (pointer: coarse) {
+  .assistant-surface__toolbar .v-btn, .assistant-surface__history .v-btn { min-height: 48px; }
+}
+</style>

package/src/client/composables/useAssistantRuntime.js

@@ -1,4 +1,4 @@
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, onScopeDispose, ref, shallowRef, toValue, watch } from "vue";
 import { useQueryClient } from "@tanstack/vue-query";
 import { getClientAppConfig } from "@jskit-ai/kernel/client";
 import { normalizeObject, normalizeRecordId, normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
@@ -28,7 +28,6 @@ import {
   mapTranscriptEntriesToAssistantState,
   normalizeToolName
 } from "../support/assistantRuntimeState.js";
-import { insertTextAtSelection } from "../support/composerInputSupport.js";
 import {
   loadConversationTranscript,
   resolveConversationRestorePolicy
@@ -51,7 +50,8 @@ function toNonNegativeInteger(value, fallback = 0) {
 function buildScopeStorageKey(scope = {}) {
   const runtimeSurfaceId = normalizeText(scope?.targetSurfaceId).toLowerCase() || "assistant";
   const workspaceSlug = normalizeText(scope?.workspaceSlug).toLowerCase() || "global";
-  return `assistant.activeConversationId:${runtimeSurfaceId}:${workspaceSlug}`;
+  const userId = normalizeRecordId(scope?.userId, { fallback: "anonymous" });
+  return `assistant.activeConversationId:${runtimeSurfaceId}:${workspaceSlug}:${userId}`;
 }
 
 function readStoredActiveConversationId(scope = {}) {
@@ -151,11 +151,13 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
   const error = ref("");
   const pendingToolEvents = ref([]);
   const conversationId = ref(null);
-  const abortController = ref(null);
+  const abortController = shallowRef(null);
+  const isCanceling = ref(false);
+  let restoreVersion = 0;
 
   const placementSnapshot = computed(() => normalizeObject(placementContext.value));
   const assistantSurface = computed(() =>
-    resolveAssistantSurfaceConfig(appConfig, surfaceId)
+    resolveAssistantSurfaceConfig(appConfig, toValue(surfaceId))
   );
   const routeScope = computed(() => workspaceScopeSupport.readRouteScope(routeContext));
   const runtimeScope = computed(() => {
@@ -165,14 +167,12 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
 
     return {
       targetSurfaceId: normalizeText(assistantSurface.value?.targetSurfaceId).toLowerCase(),
-      workspaceSlug,
-      workspaceId: assistantSurface.value?.runtimeSurfaceRequiresWorkspace
-        ? normalizeRecordId(placementSnapshot.value?.workspace?.id, { fallback: null })
-        : null
+      userId: normalizeRecordId(placementSnapshot.value?.user?.id, { fallback: null }),
+      workspaceSlug
     };
   });
   const hasRuntimeScope = computed(() =>
-    Boolean(assistantSurface.value) &&
+    Boolean(assistantSurface.value && runtimeScope.value.userId) &&
     (assistantSurface.value?.runtimeSurfaceRequiresWorkspace ? Boolean(runtimeScope.value.workspaceSlug) : true)
   );
 
@@ -197,7 +197,8 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
         normalizeText(input.value)
     );
   });
-  const canStartNewConversation = computed(() => Boolean(hasRuntimeScope.value && !isStreaming.value));
+  const canStartNewConversation = computed(() => Boolean(hasRuntimeScope.value && !isStreaming.value && !isRestoringConversation.value));
+  const scopeKey = computed(() => JSON.stringify(runtimeScope.value));
 
   function setRuntimeError(message, dedupeKey = "") {
     const normalizedMessage = normalizeText(message);
@@ -218,9 +219,9 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
 
   const conversationHistoryCollection = usePagedCollection({
     queryKey: computed(() =>
-      assistantConversationsListQueryKey(runtimeScope.value, {
+      [...assistantConversationsListQueryKey(runtimeScope.value, {
         limit: runtimePolicy.historyPageSize
-      })
+      }), runtimeScope.value.userId]
     ),
     queryFn: ({ pageParam = null }) =>
       runtimeApi.listConversations({
@@ -248,23 +249,6 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
   const conversationHistoryHasMore = conversationHistoryCollection.hasMore;
   const conversationHistoryError = conversationHistoryCollection.loadError;
 
-  watch(conversationId, (nextConversationId, previousConversationId) => {
-    if (!hasRuntimeScope.value) {
-      return;
-    }
-
-    const nextConversationIdKey = normalizeRecordId(nextConversationId, { fallback: null });
-    if (nextConversationIdKey) {
-      writeStoredActiveConversationId(runtimeScope.value, nextConversationIdKey);
-      return;
-    }
-
-    const previousConversationIdKey = normalizeRecordId(previousConversationId, { fallback: null });
-    if (previousConversationIdKey) {
-      writeStoredActiveConversationId(runtimeScope.value, "");
-    }
-  });
-
   watch(
     [
       hasRuntimeScope,
@@ -282,7 +266,7 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
       nextConversationHistory,
       nextIsRestoringConversation
     ]) => {
-      if (!nextHasRuntimeScope || nextConversationHistoryLoading || nextIsRestoringConversation) {
+      if (!nextHasRuntimeScope || nextConversationHistoryLoading || nextIsRestoringConversation || isStreaming.value) {
         return;
       }
 
@@ -309,7 +293,7 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
         return;
       }
 
-      await selectConversationById(storedConversationId);
+      await selectConversationById(storedConversationId, { preserveDraft: true });
     },
     {
       immediate: true
@@ -360,19 +344,16 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
     await conversationHistoryCollection.loadMore();
   }
 
-  async function selectConversationById(nextConversationId) {
-    const normalizedConversationId = normalizeText(nextConversationId);
+  async function selectConversationById(nextConversationId, { preserveDraft = false } = {}) {
+    const normalizedConversationId = normalizeRecordId(nextConversationId, { fallback: "" });
     if (!normalizedConversationId || isStreaming.value || isRestoringConversation.value || !hasRuntimeScope.value) {
       return;
     }
 
-    const parsedConversationId = normalizeRecordId(normalizedConversationId, { fallback: null });
-    if (!parsedConversationId) {
-      return;
-    }
-
-    const previousConversationId = conversationId.value;
-    conversationId.value = parsedConversationId;
+    const version = ++restoreVersion;
+    const scope = runtimeScope.value;
+    const previousDraft = input.value;
+    if (!preserveDraft) input.value = "";
     isRestoringConversation.value = true;
     setRuntimeError("");
 
@@ -381,27 +362,33 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
         pageSize: runtimePolicy.restoreMessagesPageSize,
         maxEntries: runtimePolicy.restoreMessagesMaxEntries,
         fetchPage: (page, pageSize) => queryClient.fetchQuery({
-          queryKey: assistantConversationMessagesQueryKey(runtimeScope.value, parsedConversationId, {
+          queryKey: [...assistantConversationMessagesQueryKey(scope, normalizedConversationId, {
             page,
             pageSize
-          }),
-          queryFn: () => runtimeApi.getConversationMessages(parsedConversationId, {
-            page,
-            pageSize
-          }),
+          }), scope.userId],
+          queryFn: () => {
+            if (version !== restoreVersion) throw new DOMException("Conversation changed.", "AbortError");
+            return runtimeApi.getConversationMessages(normalizedConversationId, { page, pageSize });
+          },
           staleTime: runtimePolicy.historyStaleTimeMs
         })
       });
 
+      if (version !== restoreVersion) return;
       const restored = mapTranscriptEntriesToAssistantState(transcript.entries);
+      conversationId.value = normalizedConversationId;
+      writeStoredActiveConversationId(scope, normalizedConversationId);
       messages.value = restored.messages;
       pendingToolEvents.value = restored.pendingToolEvents;
-      input.value = "";
     } catch (loadError) {
-      conversationId.value = previousConversationId;
+      if (version !== restoreVersion) return;
+      if (readStoredActiveConversationId(scope) === normalizedConversationId) {
+        writeStoredActiveConversationId(scope, "");
+      }
+      if (!input.value) input.value = previousDraft;
       setRuntimeError(normalizeText(loadError?.message) || "Unable to load conversation.");
     } finally {
-      isRestoringConversation.value = false;
+      if (version === restoreVersion) isRestoringConversation.value = false;
     }
   }
 
@@ -409,61 +396,33 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
     await selectConversationById(conversation?.id);
   }
 
-  function startNewConversation() {
-    if (abortController.value) {
-      abortController.value.abort();
-    }
-
+  function clearView() {
+    restoreVersion += 1;
+    abortController.value?.abort();
+    abortController.value = null;
     messages.value = [];
     pendingToolEvents.value = [];
     input.value = "";
-    setRuntimeError("");
+    error.value = "";
     conversationId.value = null;
-    writeStoredActiveConversationId(runtimeScope.value, "");
     isStreaming.value = false;
+    isCanceling.value = false;
     isRestoringConversation.value = false;
-    abortController.value = null;
   }
 
-  function handleInputKeydown(event) {
-    if (event?.key === "Enter" && isStreaming.value) {
-      event.preventDefault();
-      return;
-    }
-
-    if (event?.key === "Enter" && event?.altKey === true && event?.ctrlKey !== true && event?.metaKey !== true) {
-      event.preventDefault();
-
-      const target = event?.target;
-      const nextValue = insertTextAtSelection(input.value, target?.selectionStart, target?.selectionEnd, "\n");
-      input.value = nextValue.value;
-
-      void nextTick(() => {
-        if (!target || typeof target.setSelectionRange !== "function") {
-          return;
-        }
-
-        target.setSelectionRange(nextValue.selectionStart, nextValue.selectionEnd);
-      });
-      return;
-    }
-
-    if (
-      event?.key === "Enter" &&
-      event?.shiftKey !== true &&
-      event?.ctrlKey !== true &&
-      event?.metaKey !== true &&
-      event?.altKey !== true
-    ) {
-      event.preventDefault();
-      void sendMessage();
-    }
+  function startNewConversation() {
+    if (!canStartNewConversation.value) return;
+    writeStoredActiveConversationId(runtimeScope.value, "");
+    clearView();
   }
 
+  watch(scopeKey, clearView, { flush: "sync" });
+  onScopeDispose(clearView);
+
   function cancelStream() {
-    if (abortController.value) {
-      abortController.value.abort();
-    }
+    if (!abortController.value || isCanceling.value) return;
+    isCanceling.value = true;
+    abortController.value.abort();
   }
 
   async function sendMessage() {
@@ -505,6 +464,7 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
     }, runtimePolicy.timeoutMs);
 
     let streamDoneStatus = "";
+    const ownsStream = () => abortController.value === streamAbortController;
 
     try {
       await runtimeApi.streamChat(
@@ -517,10 +477,12 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
         {
           signal: streamAbortController.signal,
           onEvent(event) {
+            if (!ownsStream() || streamAbortController.signal.aborted) return;
             const eventType = normalizeAssistantStreamEventType(event?.type, "");
 
             if (eventType === ASSISTANT_STREAM_EVENT_TYPES.META && Object.hasOwn(event || {}, "conversationId")) {
               conversationId.value = normalizeRecordId(event?.conversationId, { fallback: null });
+              writeStoredActiveConversationId(runtimeScope.value, conversationId.value);
               return;
             }
 
@@ -552,6 +514,7 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
                 ...pendingToolEvents.value,
                 {
                   id: toolCallId,
+                  messageId: assistantMessageId,
                   name: normalizeToolName(event?.name),
                   arguments: String(event?.arguments || ""),
                   status: "pending",
@@ -600,6 +563,8 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
         }
       );
 
+      if (!ownsStream()) return;
+      if (streamAbortController.signal.aborted) streamDoneStatus = "aborted";
       const assistantMessage = findMessage(assistantMessageId);
       const assistantMessageText = normalizeText(assistantMessage?.text);
       if (!assistantMessageText && streamDoneStatus !== "aborted") {
@@ -619,6 +584,7 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
         }));
       }
     } catch (streamError) {
+      if (!ownsStream()) return;
       if (String(streamError?.name || "") === "AbortError") {
         updateMessage(assistantMessageId, {
           status: "canceled"
@@ -631,11 +597,19 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
       }
     } finally {
       clearTimeout(streamTimeout);
-      pendingToolEvents.value = interruptPendingToolEvents(pendingToolEvents.value);
-      abortController.value = null;
-      isStreaming.value = false;
-      await invalidateConversationScope();
-      await refreshConversationHistory();
+      if (ownsStream()) {
+        const answer = findMessage(assistantMessageId);
+        if (answer?.status === "error") {
+          updateMessage(assistantMessageId, { error: error.value });
+          if (!answer.text && !input.value) input.value = normalizedInput;
+        }
+        pendingToolEvents.value = interruptPendingToolEvents(pendingToolEvents.value);
+        abortController.value = null;
+        isStreaming.value = false;
+        isCanceling.value = false;
+        await invalidateConversationScope();
+        await refreshConversationHistory();
+      }
     }
   }
 
@@ -657,6 +631,9 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
       messages,
       input,
       isStreaming,
+      isCanceling,
+      hasRuntimeScope,
+      scopeKey,
       isRestoringConversation,
       error,
       pendingToolEvents,
@@ -673,7 +650,6 @@ function useAssistantRuntime({ api = null, surfaceId = "" } = {}) {
     },
     actions: {
       sendMessage,
-      handleInputKeydown,
       cancelStream,
       startNewConversation,
       clearConversation: startNewConversation,

package/src/client/support/assistantRuntimeState.js

@@ -5,6 +5,25 @@ import {
   parseJsonObject
 } from "@jskit-ai/assistant-core/shared";
 import { isAssistantProgressOnlyText } from "../../shared/assistantResponseText.js";
+import { conversationTurnsFromMessages } from "@jskit-ai/assistant-core/shared/conversation";
+
+const CONVERSATION_MESSAGE_STATUS = Object.freeze({
+  streaming: "inProgress",
+  done: "completed",
+  error: "failed",
+  canceled: "interrupted"
+});
+
+function mapAssistantConversationTurns(messages, toolEvents = [], { showToolActivity = true } = {}) {
+  return conversationTurnsFromMessages(messages.map((message) => ({
+    ...message,
+    messageId: String(message.id),
+    status: CONVERSATION_MESSAGE_STATUS[message.status],
+    progressUpdates: showToolActivity ? toolEvents
+      .filter((event) => event.messageId === message.id)
+      .map((event) => ({ id: event.id, text: `${event.name} — ${event.status}` })) : []
+  })));
+}
 
 function buildId(prefix = "id") {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
@@ -64,6 +83,9 @@ function mapTranscriptEntriesToAssistantState(entries) {
   const sourceEntries = Array.isArray(entries) ? entries : [];
   const messages = [];
   const toolEventsById = new Map();
+  let latestUserId = null;
+  let currentAssistantId = null;
+  const pendingAssociation = [];
 
   function ensureToolEvent(toolCallId, toolName) {
     const key = normalizeText(toolCallId) || buildId("tool_call");
@@ -103,6 +125,15 @@ function mapTranscriptEntriesToAssistantState(entries) {
         text,
         status: "done"
       });
+      if (role === "user") {
+        latestUserId = messageId;
+        currentAssistantId = null;
+        pendingAssociation.length = 0;
+      } else {
+        currentAssistantId = messageId;
+        for (const event of pendingAssociation) event.messageId = messageId;
+        pendingAssociation.length = 0;
+      }
       continue;
     }
 
@@ -111,6 +142,8 @@ function mapTranscriptEntriesToAssistantState(entries) {
       const toolEvent = ensureToolEvent(toolCallId, metadata.tool);
       toolEvent.arguments = String(entry?.contentText || "");
       toolEvent.status = "pending";
+      toolEvent.messageId = currentAssistantId || latestUserId;
+      pendingAssociation.push(toolEvent);
       continue;
     }
 
@@ -136,5 +169,6 @@ export {
   buildId,
   interruptPendingToolEvents,
   mapTranscriptEntriesToAssistantState,
+  mapAssistantConversationTurns,
   normalizeToolName
 };

package/test/assistantRuntimeState.test.js

@@ -132,3 +132,50 @@ test("live stream cleanup interrupts only tool events that remain pending", () =
     ]
   );
 });
+
+test("runtime statuses and tool activity map explicitly without changing message identity or exposing payloads", async () => {
+  const { mapAssistantConversationTurns } = await import("../src/client/support/assistantRuntimeState.js");
+  const messages = [
+    { id: "user-1", role: "user", status: "done", text: "Question" },
+    { id: "answer-1", role: "assistant", status: "streaming", text: "" }
+  ];
+  const tools = [{ id: "tool-1", messageId: "answer-1", name: "Search records", status: "pending", arguments: "secret", result: { private: true } }];
+  let turns = mapAssistantConversationTurns(messages, tools);
+  assert.equal(turns[0].turnId, "user-1");
+  assert.equal(turns[0].pending, true);
+  assert.equal(turns[0].messages.at(-1).text, "Search records — pending");
+  assert.doesNotMatch(JSON.stringify(turns), /secret|private/);
+  for (const [status, expected] of [["done", "completed"], ["error", "failed"], ["canceled", "interrupted"]]) {
+    messages[1] = { ...messages[1], text: "Partial answer", status };
+    turns = mapAssistantConversationTurns(messages, tools);
+    assert.equal(turns[0].assistant.messageId, "answer-1");
+    assert.equal(turns[0].assistant.status, expected);
+    assert.equal(turns[0].assistant.text, "Partial answer");
+    assert.equal(turns[0].pending, false);
+  }
+  assert.equal(mapAssistantConversationTurns(messages, tools, { showToolActivity: false })[0].messages.length, 2);
+});
+
+test("numeric persisted identities and distinct equal-text replies remain distinct", async () => {
+  const { mapAssistantConversationTurns } = await import("../src/client/support/assistantRuntimeState.js");
+  const restored = mapTranscriptEntriesToAssistantState([
+    { id: 1, role: "user", kind: "chat", contentText: "Question" },
+    { id: 2, role: "assistant", kind: "chat", contentText: "Same answer" },
+    { id: "3", role: "assistant", kind: "chat", contentText: "Same answer" }
+  ]);
+  const turns = mapAssistantConversationTurns(restored.messages);
+  assert.deepEqual(turns.map((turn) => turn.assistant.messageId), ["transcript_2", "transcript_3"]);
+});
+
+test("restored tool calls retain their association with the reply they preceded", async () => {
+  const { mapAssistantConversationTurns } = await import("../src/client/support/assistantRuntimeState.js");
+  const restored = mapTranscriptEntriesToAssistantState([
+    { id: 1, role: "user", kind: "chat", contentText: "Question" },
+    { id: 2, role: "assistant", kind: "tool_call", contentText: "secret arguments", metadata: { toolCallId: "t", tool: "Search" } },
+    { id: 3, role: "assistant", kind: "tool_result", contentText: '{"ok":true,"result":{"private":true}}', metadata: { toolCallId: "t" } },
+    { id: 4, role: "assistant", kind: "chat", contentText: "Found it" }
+  ]);
+  const [turn] = mapAssistantConversationTurns(restored.messages, restored.pendingToolEvents);
+  assert.equal(turn.messages[1].text, "Search — done");
+  assert.doesNotMatch(JSON.stringify(turn), /secret|private/);
+});

package/test/conversation.browser.test.js

@@ -0,0 +1,260 @@
+import assert from "node:assert/strict";
+import { mkdir } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import test from "node:test";
+import { chromium, expect } from "@playwright/test";
+import { createChromiumLaunchOptions, startViteFixture, stopProcess } from "../../../tooling/testUtils/browserFixture.mjs";
+
+const fixtureRoot = fileURLToPath(new URL("../fixtures/conversation/", import.meta.url));
+
+test("ready-made assistant preserves streaming, drafts, scope and compact conversation access", {
+  skip: process.env.JSKIT_ASSISTANT_RUNTIME_BROWSER_INTEGRATION !== "1",
+  timeout: 180_000
+}, async () => {
+  const vite = await startViteFixture({ fixtureRoot });
+  const browser = await chromium.launch(createChromiumLaunchOptions());
+  const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
+  const errors = [];
+  page.on("pageerror", (error) => errors.push(error.message));
+  const input = page.getByRole("textbox", { name: "Message AI assistant" });
+  const send = page.getByRole("button", { name: "Send message", exact: true });
+  const advance = (query = "") => page.request.get(`${vite.baseURL}/fixture/next${query}`);
+  const requestState = async () => (await page.request.get(`${vite.baseURL}/fixture/state`)).json();
+  try {
+    await page.goto(vite.baseURL);
+    await expect(input).toBeEnabled();
+    await input.fill("First request");
+    await input.dispatchEvent("keydown", { key: "Enter", isComposing: true });
+    assert.equal((await requestState()).requests.length, 0);
+    await input.press("Enter");
+    await expect(page.getByRole("button", { name: "Stop", exact: true })).toBeVisible();
+    await expect(input).toHaveValue("");
+    await expect(page.getByLabel("Fixture assistant progress")).toBeVisible();
+    await expect(send).toBeDisabled();
+    await input.fill("Draft typed while streaming. Keep my selection.");
+    await input.evaluate((element) => { element.focus(); element.setSelectionRange(6, 11); window.fixtureInput = element; });
+    await advance();
+    await expect(page.getByText("Partial answer", { exact: true })).toBeVisible();
+    await expect(input).toBeFocused();
+    assert.deepEqual(await input.evaluate((element) => [element === window.fixtureInput, element.selectionStart, element.selectionEnd]), [true, 6, 11]);
+    await advance("?finish=1");
+    await expect(page.getByRole("button", { name: "Stop", exact: true })).toHaveCount(0);
+    await expect(input).toHaveValue("Draft typed while streaming. Keep my selection.");
+    await expect(page.getByText("Partial answer completed.", { exact: true })).toHaveCount(1);
+    await expect(page.getByText("never-render-this-payload", { exact: false })).toHaveCount(0);
+    assert.equal((await requestState()).requests.length, 1);
+    assert.equal((await requestState()).requests[0].surface, "admin");
+
+    await input.fill("Partial failure");
+    await send.click();
+    await expect(page.getByRole("button", { name: "Stop", exact: true })).toBeVisible();
+    await advance();
+    await advance("?fail=1");
+    await expect(page.getByText("Fixture provider failed.", { exact: true })).toHaveCount(1);
+    await expect(page.getByText("Partial answer", { exact: true })).toBeVisible();
+    await input.fill("Failure before answer");
+    await send.click();
+    await expect(page.getByRole("button", { name: "Stop", exact: true })).toBeVisible();
+    await advance("?fail=1");
+    await expect(input).toHaveValue("Failure before answer");
+    await expect(send).toBeEnabled();
+
+    await send.click();
+    await expect(page.getByRole("button", { name: "Stop", exact: true })).toBeVisible();
+    await input.fill("Preserve this after cancellation");
+    await page.getByRole("button", { name: "Stop", exact: true }).click();
+    await expect(page.getByText("Response canceled. A tool already running may still finish.")).toBeVisible();
+    await expect(input).toHaveValue("Preserve this after cancellation");
+    await expect.poll(async () => (await requestState()).streams.at(-1).closed).toBe(true);
+
+    await input.fill("Old workspace request");
+    await send.click();
+    await expect(page.getByRole("button", { name: "Stop", exact: true })).toBeVisible();
+    await input.fill("Old workspace draft");
+    await page.getByRole("button", { name: "Switch workspace", exact: true }).click();
+    await expect(input).toHaveValue("");
+    await expect(page.getByText("Old workspace request", { exact: true })).toHaveCount(0);
+    await expect.poll(async () => (await requestState()).streams.at(-1).closed).toBe(true);
+    await advance("?finish=1");
+    await expect(page.getByText("Partial answer completed.", { exact: true })).toHaveCount(0);
+    await input.fill("New workspace request");
+    await send.click();
+    await expect.poll(async () => (await requestState()).requests.at(-1).path).toContain("/beta/");
+    await page.getByRole("button", { name: "Toggle view", exact: true }).click();
+    await expect(input).toHaveCount(0);
+    await expect.poll(async () => (await requestState()).streams.at(-1).closed).toBe(true);
+    await page.getByRole("button", { name: "Toggle view", exact: true }).click();
+    await expect(input).toBeVisible();
+    await page.getByRole("button", { name: "Conversations", exact: true }).click();
+    await expect(page.getByText("Saved conversation", { exact: true })).toBeVisible();
+    await page.getByRole("button", { name: "Load older conversations" }).click();
+    await expect(page.getByText("Older conversation", { exact: true })).toBeVisible();
+    await page.getByText("Saved conversation", { exact: true }).click();
+    await expect(page.getByRole("dialog", { name: "Conversations", exact: true })).toHaveCount(0);
+    await expect(page.getByText("Saved 1 message 70.", { exact: false })).toBeVisible();
+    await expect(page.getByText("Identical text", { exact: true })).toHaveCount(2);
+
+    const screenshots = process.env.JSKIT_ASSISTANT_SCREENSHOTS;
+    if (screenshots) await mkdir(screenshots, { recursive: true });
+    for (const viewport of [{ width: 390, height: 844 }, { width: 800, height: 800 }, { width: 1280, height: 900 }, { width: 1280, height: 600 }, { width: 360, height: 600 }]) {
+      await page.setViewportSize(viewport);
+      await expect(input).toBeVisible();
+      const bounds = await input.boundingBox();
+      assert.ok(bounds.y + bounds.height <= viewport.height, JSON.stringify({ viewport, bounds }));
+      assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth));
+      const sendBounds = await send.boundingBox();
+      assert.ok(sendBounds.y + sendBounds.height <= viewport.height);
+      if (viewport.width <= 600) assert.ok(sendBounds.height >= 48);
+      await expect(page.getByRole("button", { name: "Conversations", exact: true })).toBeVisible();
+      if (screenshots) await page.screenshot({ path: `${screenshots}/runtime-${viewport.width}-${viewport.height}.png` });
+    }
+    await page.setViewportSize({ width: 1280, height: 800 });
+    const draft = "A long draft that remains focused while the pane narrows. ".repeat(4);
+    await input.fill(draft);
+    await input.evaluate((element) => { element.focus(); element.setSelectionRange(7, 7); });
+    const before = await input.evaluate((element) => element.clientHeight);
+    await page.getByRole("button", { name: "Resize pane" }).evaluate((element) => element.click());
+    await expect.poll(() => input.evaluate((element) => element.clientHeight)).toBeGreaterThan(before);
+    await expect(input).toBeFocused();
+    await page.getByRole("button", { name: "Toggle theme" }).click();
+    if (screenshots) await page.screenshot({ path: `${screenshots}/runtime-dark-drawer.png` });
+    await page.getByRole("button", { name: "Second instance" }).click();
+    await expect(input).toHaveCount(2);
+    await expect(input.first()).toHaveValue(draft);
+    await expect(input.last()).toHaveValue("");
+    await input.last().fill("Second instance draft");
+    await expect(input.first()).toHaveValue(draft);
+    await page.getByRole("button", { name: "Second instance" }).click();
+    await page.getByRole("button", { name: "Switch surface", exact: true }).click();
+    await expect(input).toHaveValue("");
+    await expect(page.getByText("Saved 1 message 70.", { exact: false })).toHaveCount(0);
+    await input.fill("Private draft before switching user");
+    await send.click();
+    await expect(page.getByRole("button", { name: "Stop", exact: true })).toBeVisible();
+    await page.getByRole("button", { name: "Switch user", exact: true }).click();
+    await expect(input).toHaveValue("");
+    await expect(page.getByText("Private draft before switching user", { exact: true })).toHaveCount(0);
+    await expect.poll(async () => (await requestState()).streams.at(-1).closed).toBe(true);
+    assert.deepEqual(errors, []);
+  } catch (error) {
+    throw new Error(`${error.message}\nPage errors: ${JSON.stringify(errors)}\n${vite.readOutput()}`, { cause: error });
+  } finally {
+    await browser.close();
+    await stopProcess(vite);
+  }
+});
+
+test("history restores preserve new typing and reject obsolete pages and failed automatic restores", {
+  skip: process.env.JSKIT_ASSISTANT_RUNTIME_BROWSER_INTEGRATION !== "1",
+  timeout: 60_000
+}, async () => {
+  const vite = await startViteFixture({ fixtureRoot });
+  const browser = await chromium.launch(createChromiumLaunchOptions());
+  const page = await browser.newPage();
+  const input = page.getByRole("textbox", { name: "Message AI assistant" });
+  const send = page.getByRole("button", { name: "Send message", exact: true });
+  const selectSaved = async () => {
+    await page.getByRole("button", { name: "Conversations", exact: true }).click();
+    await page.getByText("Saved conversation", { exact: true }).click();
+    await expect(page.getByRole("dialog", { name: "Conversations", exact: true })).toHaveCount(0);
+  };
+  let release;
+  let restoreRequests = 0;
+  try {
+    const held = new Promise((resolve) => { release = resolve; });
+    await page.route("**/conversations/1/messages?**", async (route) => {
+      restoreRequests += 1;
+      await held;
+      await route.fulfill({ json: { data: { type: "assistant-conversation-messages", id: "1", attributes: {
+        entries: [{ id: "delayed", kind: "chat", role: "assistant", contentText: "Obsolete restored answer" }], totalPages: 2
+      } } } });
+    });
+    await page.goto(vite.baseURL);
+    await selectSaved();
+    await expect.poll(() => restoreRequests).toBe(1);
+    await input.fill("Written during history restore");
+    await expect(send).toBeDisabled();
+    await page.getByRole("button", { name: "Switch workspace", exact: true }).click();
+    await expect(page).toHaveURL(/workspace=beta/);
+    await expect(input).toHaveValue("");
+    await input.fill("New workspace draft");
+    release();
+    await page.unrouteAll({ behavior: "wait" });
+    await expect(input).toHaveValue("New workspace draft");
+    await expect(send).toBeEnabled();
+    assert.equal(restoreRequests, 1, "An obsolete restore must not fetch its second page in the new scope");
+    await expect(page.getByText("Obsolete restored answer", { exact: true })).toHaveCount(0);
+
+    let finishRestore;
+    const pending = new Promise((resolve) => { finishRestore = resolve; });
+    await page.route("**/conversations/1/messages?**", async (route) => {
+      await pending;
+      await route.continue();
+    });
+    await selectSaved();
+    await input.fill("Keep typing while selected history loads");
+    await expect(send).toBeDisabled();
+    finishRestore();
+    await expect(page.getByText("Saved 1 message 70.", { exact: false })).toBeVisible();
+    await expect(input).toHaveValue("Keep typing while selected history loads");
+    await expect(send).toBeEnabled();
+    await page.unrouteAll({ behavior: "wait" });
+
+    let failRestore;
+    const failure = new Promise((resolve) => { failRestore = resolve; });
+    let failedRequests = 0;
+    await page.route("**/conversations/1/messages?**", async (route) => {
+      failedRequests += 1;
+      await failure;
+      await route.fulfill({ status: 403, json: { error: "Conversation unavailable." } });
+    });
+    await page.reload();
+    await expect.poll(() => failedRequests).toBe(1);
+    await input.fill("Typed during automatic restore");
+    failRestore();
+    await expect(send).toBeEnabled();
+    await expect(input).toHaveValue("Typed during automatic restore");
+    await page.getByRole("button", { name: "Conversations", exact: true }).click();
+    await page.getByRole("button", { name: "Refresh", exact: true }).click();
+    await expect(page.getByText("Saved conversation", { exact: true })).toBeVisible();
+    assert.equal(failedRequests, 1, "A failed automatic restore must require explicit selection to retry");
+  } finally {
+    release?.();
+    await browser.close();
+    await stopProcess(vite);
+  }
+});
+
+test("page assistant bounds long history in a document layout and preserves drafts when workspace metadata arrives", {
+  skip: process.env.JSKIT_ASSISTANT_RUNTIME_BROWSER_INTEGRATION !== "1",
+  timeout: 60_000
+}, async () => {
+  const vite = await startViteFixture({ fixtureRoot });
+  const browser = await chromium.launch(createChromiumLaunchOptions());
+  const page = await browser.newPage();
+  try {
+    await page.goto(`${vite.baseURL}/?page=1`);
+    await page.getByRole("button", { name: "Conversations", exact: true }).click();
+    await page.getByRole("dialog", { name: "Conversations", exact: true }).getByText("Saved conversation", { exact: true }).click();
+    await expect(page.getByText("Saved 1 message 70.", { exact: false })).toBeVisible();
+    const input = page.getByRole("textbox", { name: "Message AI assistant" });
+    for (const viewport of [{ width: 390, height: 844 }, { width: 800, height: 800 }, { width: 1280, height: 600 }]) {
+      await page.setViewportSize(viewport);
+      await expect.poll(async () => {
+        const bounds = await input.boundingBox();
+        return bounds.y + bounds.height;
+      }).toBeLessThanOrEqual(viewport.height);
+      assert.ok(await page.getByLabel("Conversation messages", { exact: true }).evaluate(element => element.scrollHeight > element.clientHeight));
+    }
+    await input.fill("Keep this draft while workspace details load.");
+    await input.evaluate(element => { element.focus(); element.setSelectionRange(5, 9); });
+    await page.getByRole("button", { name: "Load workspace metadata" }).evaluate(element => element.click());
+    await expect(input).toHaveValue("Keep this draft while workspace details load.");
+    await expect(input).toBeFocused();
+    assert.deepEqual(await input.evaluate(element => [element.selectionStart, element.selectionEnd]), [5, 9]);
+    await expect(page.getByText("Saved 1 message 70.", { exact: false })).toBeVisible();
+  } finally {
+    await browser.close();
+    await stopProcess(vite);
+  }
+});

package/src/client/support/composerInputSupport.js

@@ -1,29 +0,0 @@
-function normalizeSelectionBoundary(value, fallback, max) {
-  const parsed = Number(value);
-  if (!Number.isInteger(parsed) || parsed < 0) {
-    return fallback;
-  }
-
-  if (parsed > max) {
-    return max;
-  }
-
-  return parsed;
-}
-
-function insertTextAtSelection(source = "", selectionStart, selectionEnd, text = "") {
-  const value = String(source || "");
-  const maxBoundary = value.length;
-  const normalizedStart = normalizeSelectionBoundary(selectionStart, maxBoundary, maxBoundary);
-  const normalizedEnd = normalizeSelectionBoundary(selectionEnd, normalizedStart, maxBoundary);
-  const insertedText = String(text ?? "");
-  const nextBoundary = normalizedStart + insertedText.length;
-
-  return {
-    value: `${value.slice(0, normalizedStart)}${insertedText}${value.slice(normalizedEnd)}`,
-    selectionStart: nextBoundary,
-    selectionEnd: nextBoundary
-  };
-}
-
-export { insertTextAtSelection };

package/test/composerInputSupport.test.js

@@ -1,23 +0,0 @@
-import assert from "node:assert/strict";
-import test from "node:test";
-import { insertTextAtSelection } from "../src/client/support/composerInputSupport.js";
-
-test("insertTextAtSelection inserts a line break at the caret", () => {
-  const result = insertTextAtSelection("hello world", 5, 5, "\n");
-
-  assert.deepEqual(result, {
-    value: "hello\n world",
-    selectionStart: 6,
-    selectionEnd: 6
-  });
-});
-
-test("insertTextAtSelection replaces the active selection with a line break", () => {
-  const result = insertTextAtSelection("hello world", 5, 11, "\n");
-
-  assert.deepEqual(result, {
-    value: "hello\n",
-    selectionStart: 6,
-    selectionEnd: 6
-  });
-});