@jskit-ai/assistant-core 0.1.204 → 0.1.206

package/examples/conversation/package.json

@@ -8,14 +8,14 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.1.204",
-    "@jskit-ai/http-runtime": "0.1.224",
-    "@jskit-ai/kernel": "0.1.226",
+    "@jskit-ai/assistant-core": "0.1.206",
+    "@jskit-ai/http-runtime": "0.1.226",
+    "@jskit-ai/kernel": "0.1.228",
     "@mdi/js": "^7.4.47",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0",
-    "@jskit-ai/connectors-core": "0.1.43",
-    "@jskit-ai/connectors-catalog": "0.1.43"
+    "@jskit-ai/connectors-core": "0.1.45",
+    "@jskit-ai/connectors-catalog": "0.1.45"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",

package/fixtures/responsive-assistant/App.vue

@@ -4,8 +4,12 @@ import AssistantConversationElement from "../../src/client/conversation/Assistan
 import { conversationTurnsFromMessages } from "../../src/shared/conversation/turns.js";
 import { mergeConversationStream } from "../../src/shared/conversation/streaming.js";
 const draft = ref("");
-const visible = ref(true);
+const error = ref("");
+const reloads = ref(0);
 const query = new URLSearchParams(location.search);
+const visible = ref(!query.has("initial-hidden"));
+const retainWhenHidden = query.has("retain-hidden");
+const mounted = ref(true);
 const controls = query.has("controls");
 const deferredHistory = query.has("history");
 const pagedHistory = query.has("paged-history");
@@ -52,12 +56,16 @@ function finishHistory(error = "") {
 const adapter = computed(() => ({
   conversation: {
     visible: visible.value,
+    retainWhenHidden,
+    error: error.value,
+    errorReloadable: true,
     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; },
+    reload() { reloads.value += 1; error.value = ""; },
     submit() { draft.value = ""; },
     loadMore({ complete }) {
       historyRequests.value += 1;
@@ -81,6 +89,8 @@ const adapter = computed(() => ({
           <button @click="visible = !visible">Toggle visibility</button>
           <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>
+          <button v-if="query.has('update-errors')" @click="error = 'Conversation updates are temporarily unavailable. Reload to reconnect; the assistant may still be working.'">Show update error</button>
+          <button v-if="retainWhenHidden" @click="mounted = !mounted">Toggle mount</button>
         </nav>
         <nav v-if="deferredHistory">
           <button :disabled="!loadingMore" @click="finishHistory()">Complete history load</button>
@@ -88,7 +98,7 @@ const adapter = computed(() => ({
           <button @click="hasMoreBefore = false">Exhaust history</button>
           <output>History requests: {{ historyRequests }}</output>
         </nav>
-        <AssistantConversationElement v-show="visible" :adapter="adapter" class="assistant-responsive-fixture__conversation" />
+        <AssistantConversationElement v-if="mounted" v-show="visible" :adapter="adapter" :data-error-reloads="reloads" class="assistant-responsive-fixture__conversation" />
       </main>
     </v-main>
   </v-app>

package/fixtures/responsive-assistant/ConversationFixture.vue

@@ -1,10 +1,21 @@
 <script setup>
 import { computed, reactive, ref } from "vue";
+import { createAssistantMessageDelivery } from "../../src/client/conversation/messageDelivery.js";
 import AssistantConversationElement from "../../src/client/conversation/AssistantConversationElement.vue";
 import { useAssistantAttachments } from "../../src/client/conversation/useAssistantAttachments.js";
 import { useAssistantSuggestions } from "../../src/client/conversation/useAssistantSuggestions.js";
 const phase = ref("idle");
+const previewFixture = new URLSearchParams(location.search).has("preview");
+const temporaryWords = ref("");
+const temporaryPresent = ref(false);
+const temporaryEditing = ref(false);
+const newerWords = ref("");
+const newerPresent = ref(false);
+const newerEditing = ref(false);
+const previewCanTake = ref(true);
+const previewDelivery = createAssistantMessageDelivery();
 const avatarFixture = new URLSearchParams(location.search).has("avatar");
+const avatarToolsFixture = new URLSearchParams(location.search).has("avatarTools");
 const showAvatar = ref(avatarFixture);
 const avatarSize = ref("compact");
 const short = ref(avatarFixture);
@@ -63,8 +74,57 @@ const goalState = reactive({
   resume() { goal.value = { ...goal.value, status: "active", sampledAt: Date.now() }; }
 });
 const adapter = reactive({
+  delivery: previewFixture ? previewDelivery : undefined,
   conversation: {
     assistantLabel,
+    previewMessages: computed(() => {
+      const pending = adapter.conversation.previewMessage;
+      const previews = pending ? [pending] : [];
+      if (newerPresent.value) previews.push({ id: "newer", text: newerWords.value, actions: {
+        canDiscard: previewCanTake.value,
+        canEdit: previewCanTake.value && !temporaryPresent.value,
+        editing: newerEditing.value,
+        discard: id => { if (id === "newer" && previewCanTake.value) newerPresent.value = false; },
+        edit: id => { if (id === "newer" && previewCanTake.value && !temporaryPresent.value) newerEditing.value = true; },
+        update: (id, text) => { if (id === "newer" && newerEditing.value) newerWords.value = text; },
+        send: newerEditing.value ? id => {
+          if (id !== "newer" || !previewCanTake.value || !newerWords.value.trim()) return;
+          adapter.conversation.turns = [...adapter.conversation.turns, { turnId: id,
+            user: { messageId: id, role: "user", text: newerWords.value } }];
+          newerPresent.value = false;
+        } : null,
+        canSend: previewCanTake.value && Boolean(newerWords.value.trim()), sending: false
+      } });
+      return previews;
+    }),
+    previewMessage: computed(() => temporaryPresent.value ? {
+      id: "temporary", text: temporaryWords.value,
+      actions: {
+        canDiscard: previewCanTake.value,
+        canEdit: previewCanTake.value,
+        editing: temporaryEditing.value,
+        canSend: previewCanTake.value && Boolean(temporaryWords.value.trim()),
+        sending: false,
+        discard(id) {
+          if (id !== "temporary" || !previewCanTake.value) return;
+          temporaryPresent.value = false;
+          if (previewDelivery.find(id)?.status === "failed") previewDelivery.cancel(id);
+        },
+        edit(id) {
+          if (id !== "temporary" || !previewCanTake.value) return;
+          temporaryEditing.value = true;
+          if (previewDelivery.find(id)?.status === "failed") previewDelivery.cancel(id);
+        },
+        update(id, text) {
+          if (id === "temporary" && previewCanTake.value) temporaryWords.value = text;
+        },
+        send(id) {
+          if (id !== "temporary" || !previewCanTake.value || !temporaryWords.value.trim()) return;
+          adapter.conversation.turns = [{ turnId: id, user: { messageId: id, role: "user", text: temporaryWords.value } }];
+          temporaryPresent.value = false;
+        }
+      }
+    } : null),
     turns: attribution ? [
       { turnId: "one", assistantLabel: "First assistant", assistantDetails: "First model",
         assistant: { role: "assistant", text: "First answer" } },
@@ -76,7 +136,7 @@ const adapter = reactive({
       assistant: { messageId: `answer-${index}`, outputId: `output-${index}`, role: "assistant",
         text: `Support answer ${index + 1}: Keep your recovery email available.\n\nRead the **account instructions** and follow the [recovery link](https://example.com/help). A long message wraps inside this narrow conversation without taking space from the composer.` }
     })) : [],
-    visible: true, scrollKey: "fixture", welcomeMessage: "Composer responsiveness fixture"
+    visible: true, reloadable: avatarFixture, scrollKey: "fixture", welcomeMessage: "Composer responsiveness fixture"
   },
   composer: {
     draft,
@@ -111,12 +171,21 @@ const adapter = reactive({
         <button v-if="supportEnabled" @click="customActivity = !customActivity">Custom activity</button>
         <button v-if="capabilitiesEnabled" @click="finishUploads">Finish uploads</button>
         <button @click="goalEnabled = !goalEnabled">Toggle goals</button>
+        <template v-if="previewFixture">
+          <button @click="temporaryWords = 'Exact temporary words'; temporaryPresent = true; temporaryEditing = false">Add temporary message</button>
+          <button @click="newerWords = 'Keep newer live words'; newerPresent = true; newerEditing = false">Add newer temporary message</button>
+          <button @click="previewCanTake = !previewCanTake">Toggle preview eligibility</button>
+          <button @click="previewDelivery.send({ message: temporaryWords, request: { text: temporaryWords, steer: true } }, { messageId: 'temporary', deliver: async () => ({ ok: false, error: 'No active turn; explicit Edit may author a new message.' }) })">Reject preview</button>
+          <button @click="adapter.conversation.turns = [{ turnId: 'temporary', user: { messageId: 'temporary', role: 'user', text: temporaryWords } }]">Accept preview</button>
+          <button @click="adapter.conversation.turns = [{ turnId: 'temporary', user: { messageId: 'temporary', role: 'user', text: temporaryWords, receipt: false } }]">Unadmitted preview</button>
+        </template>
         <template v-if="avatarFixture">
           <button @click="showAvatar = !showAvatar">Toggle avatar slot</button>
           <button @click="short = !short">Resize height</button>
           <button @click="showQuestions = !showQuestions">Toggle questions</button>
           <button @click="attachments.status.value = 'An upload failed. Retry or remove it.'">Show attachment error</button>
-          <output>Avatar requested: {{ avatarSize }}</output>
+          <select v-model="avatarSize" aria-label="Avatar preference"><option v-for="size in ['hidden', 'compact', 'standard', 'large']" :key="size" :value="size">{{ size }}</option></select>
+          <output class="avatar-preference">Avatar requested: {{ avatarSize }}</output>
         </template>
         <output>{{ phase }}; submitted {{ submissions }}</output>
         <output v-if="capabilitiesEnabled">Model: {{ appliedModel }}; sent files: {{ attachmentReceipts.map(item => item.fileName).join(', ') }}</output>
@@ -124,6 +193,12 @@ const adapter = reactive({
       <main class="fixture" :class="{ narrow, 'fixture--avatar': avatarFixture, 'fixture--short': short }">
         <AssistantConversationElement v-model:avatar-size="avatarSize" :adapter="adapter">
           <template v-if="showAvatar" #avatar><svg viewBox="0 0 100 100" role="img" aria-label="Support assistant avatar"><circle cx="50" cy="50" r="45" fill="#6750a4" /><path d="M30 62Q50 80 70 62M35 40h1m28 0h1" fill="none" stroke="white" stroke-width="6" stroke-linecap="round" /></svg></template>
+          <template v-if="avatarToolsFixture" #avatar-tools="scope">
+            <button class="fixture-avatar-tool" aria-label="Avatar tool" :data-size="scope.size" :data-height="scope.height">Tool</button>
+          </template>
+          <template v-if="avatarToolsFixture" #avatar-control="scope">
+            <button class="fixture-avatar-tool" aria-label="Retained avatar control" :data-size="scope.size">Mic</button>
+          </template>
           <template v-if="customActivity" #activity="{ activity }"><strong>Custom activity: {{ activity.label }}</strong></template>
           <template #composer-feedback><p v-if="feedback" class="feedback" role="status">Describe what you want to change.</p></template>
         </AssistantConversationElement>
@@ -134,9 +209,11 @@ const adapter = reactive({
 <style scoped>
 .controls { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; }
 .controls button { border: 1px solid; padding: 4px; }
+.avatar-preference { flex: 0 0 14rem; }
 .fixture { height: 70vh; width: min(900px, 100%); margin: auto; }
 .fixture.narrow { width: min(320px, 100%); }
 .fixture--avatar { width: min(320px, 100%); }
+.fixture-avatar-tool { flex: 0 0 48px; min-width: 48px; min-height: 48px; }
 .fixture--short { height: 420px; }
 .feedback { flex: 1 1 24rem; min-width: 0; margin: 0; }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-core",
-  "version": "0.1.204",
+  "version": "0.1.206",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"
@@ -32,7 +32,9 @@
     "./server/codex-provider": "./src/server/hosts/codexProvider.js",
     "./server/native-history": "./src/server/hosts/nativeHistory.js",
     "./testing/native-codex": "./src/testing/nativeCodex.js",
-    "./testing/native-opencode": "./src/testing/nativeOpenCode.js"
+    "./testing/native-opencode": "./src/testing/nativeOpenCode.js",
+    "./server/codex-client": "./src/server/conversation/codexClient.js",
+    "./client/conversation-submit": "./src/client/conversation/submitText.js"
   },
   "dependencies": {
     "@ai-sdk/anthropic": "^4.0.53",
@@ -45,8 +47,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.168",
-    "@jskit-ai/resource-crud-core": "0.1.168",
+    "@jskit-ai/resource-core": "0.1.170",
+    "@jskit-ai/resource-crud-core": "0.1.170",
     "@mdi/js": "^7.4.47",
     "@openrouter/ai-sdk-provider": "^3.0.0",
     "ai": "^7.0.101",
@@ -55,8 +57,8 @@
     "ws": "^8.20.1"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.1.224",
-    "@jskit-ai/kernel": "0.1.226",
+    "@jskit-ai/http-runtime": "0.1.226",
+    "@jskit-ai/kernel": "0.1.228",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0"
   },
@@ -126,15 +128,15 @@
           },
           {
             "subpath": "./server/codex-events",
-            "summary": "Advanced native host: Codex event identities, thread-history projections and context-refresh facts for native hosts."
+            "summary": "Advanced native host: Original Codex event classification, text, status and identity helpers, thread-history projections and context-refresh facts."
           },
           {
             "subpath": "./server/codex-turn",
-            "summary": "Advanced native host: Original Codex run, receipt, observation, goal, steering, control, scoped-turn and renewal coordination."
+            "summary": "Advanced native host: Original detached-turn watcher and status predicates, plus Codex run, receipt, observation, goal, steering, control, scoped-turn and renewal coordination."
           },
           {
             "subpath": "./server/opencode-client",
-            "summary": "Advanced native host: OpenCode native history retirement for existing hosts."
+            "summary": "Advanced native host: Original OpenCode loopback client, bounded response and assistant text helpers, plus native history retirement."
           },
           {
             "subpath": "./server/claude-history",
@@ -187,6 +189,14 @@
           {
             "subpath": "./testing/native-opencode",
             "summary": "Testing: Original OpenCode loopback client for isolated host integration tests; tests own endpoints, authorization and cleanup."
+          },
+          {
+            "subpath": "./server/codex-client",
+            "summary": "Advanced native host: Original Codex JSON-RPC client and endpoint socket-path helper; hosts retain authorization, transport limits and native lifecycle coordination."
+          },
+          {
+            "subpath": "./client/conversation-submit",
+            "summary": "Optional UI: Original text submission helper forwards companion text through the application draft and canonical send action; also exported by ./client/conversation."
           }
         ],
         "capabilities": []

package/src/client/conversation/AssistantConversationElement.vue

@@ -1,32 +1,74 @@
 <template>
   <section ref="container" class="assistant-conversation" :aria-label="label">
-    <section v-if="$slots.avatar" class="assistant-conversation__avatar" aria-label="Conversation avatar">
-      <div v-if="$slots.composer || !adapter.composer" ref="avatarControls" class="assistant-conversation__avatar-controls">
+    <section
+      v-if="$slots.avatar" class="assistant-conversation__avatar"
+      :class="{ 'assistant-conversation__avatar--hidden': avatarSize === 'hidden' }" aria-label="Conversation avatar"
+    >
+      <div v-show="avatarSize === 'hidden'" ref="avatarControls" class="assistant-conversation__avatar-controls">
+        <slot name="avatar-control" :size="avatarSize" :height="avatarHeight" />
         <v-btn
-          ref="avatarControl" class="assistant-conversation__avatar-size" aria-label="Avatar size" :title="`Avatar size: ${avatarSize}`"
-          aria-haspopup="menu" :aria-expanded="avatarMenuOpen" :icon="mdiAccountCircleOutline" size="small" variant="text"
-        />
+          :icon="mdiAccountCircleOutline" size="small"
+          variant="text" :width="44" :min-width="44" :min-height="44"
+          class="assistant-conversation__avatar-size"
+          aria-label="Show avatar" title="Show avatar"
+          :aria-expanded="avatarSize !== 'hidden'" @click="toggleAvatar"
+        >
+          <span class="assistant-conversation__avatar-size-disc">
+            <v-icon size="20" :icon="mdiAccountCircleOutline" />
+          </span>
+        </v-btn>
       </div>
-      <v-menu v-model="avatarMenuOpen" :activator="avatarControl?.$el">
-        <v-list role="menu" aria-label="Avatar size">
-          <v-list-item
-            v-for="size in avatarSizes" :key="size.value" role="menuitem" :title="size.title"
-            :active="size.value === avatarSize" @click="$emit('update:avatarSize', size.value)"
-          />
-        </v-list>
-      </v-menu>
-      <div v-if="avatarSize !== 'hidden'" class="assistant-conversation__avatar-visual" :style="{ height: `${avatarHeight}px` }">
-        <slot name="avatar" :size="avatarSize" :height="avatarHeight" />
+      <div v-show="avatarSize !== 'hidden'" class="assistant-conversation__avatar-presentation">
+        <div v-if="avatarSize !== 'hidden'" class="assistant-conversation__avatar-visual" :style="{ height: `${avatarHeight}px`, width: `${avatarHeight}px` }">
+          <slot name="avatar" :size="avatarSize" :height="avatarHeight" />
+        </div>
+        <div class="assistant-conversation__avatar-tools">
+          <slot name="avatar-tools" :size="avatarSize" :height="avatarHeight" />
+          <v-btn
+            :icon="mdiMinus" size="small" variant="text" color="primary"
+            :width="40" :min-width="40" :min-height="44" class="assistant-conversation__avatar-size"
+            aria-label="Minimise avatar" title="Minimise avatar" :aria-expanded="true"
+            @click="toggleAvatar"
+          >
+            <span class="assistant-conversation__avatar-size-disc assistant-conversation__avatar-size-disc--minimise">
+              <v-icon size="20" :icon="mdiMinus" />
+            </span>
+          </v-btn>
+        </div>
       </div>
     </section>
     <AssistantTranscript
-      v-bind="conversation" :working="working" class="assistant-conversation__transcript"
+      v-bind="conversation" :preview-message="adapter.conversation.previewMessage || null" :working="working" class="assistant-conversation__transcript"
       @load-more="adapter.actions?.loadMore?.($event)" @reload="adapter.actions?.reload?.()"
       @resend-turn="resend($event)" @cancel-turn="cancel($event)"
       @check-delivery="adapter.actions?.checkDelivery?.($event)"
       @edit-turn="edit($event)" @link-click="adapter.actions?.openLink?.($event)"
     >
       <template v-for="name in transcriptSlots" #[name]="scope"><slot :name="name" v-bind="scope" /></template>
+      <template #user-message-actions="scope">
+        <div v-if="scope.turn.preview && scope.turn.previewMessage?.actions" class="assistant-conversation__preview-actions">
+          <v-btn
+            v-if="scope.turn.previewMessage.actions.discard" :icon="mdiClose" size="small" variant="text"
+            aria-label="Discard unsent message" title="Discard unsent message"
+            :disabled="!scope.turn.previewMessage.actions.canDiscard"
+            @click="scope.turn.previewMessage.actions.discard(scope.turn.turnId)"
+          />
+          <v-btn
+            v-if="scope.turn.previewMessage.actions.edit" :icon="mdiPencil" size="small" variant="text"
+            aria-label="Edit unsent message" title="Edit unsent message"
+            :disabled="!scope.turn.previewMessage.actions.canEdit"
+            @click="scope.turn.previewMessage.actions.edit(scope.turn.turnId)"
+          />
+          <v-btn
+            v-if="scope.turn.previewMessage.actions.send" size="small" color="primary"
+            :disabled="!scope.turn.previewMessage.actions.canSend"
+            @click="scope.turn.previewMessage.actions.send(scope.turn.turnId)"
+          >
+            {{ scope.turn.previewMessage.actions.sending ? 'Sending…' : 'Send' }}
+          </v-btn>
+        </div>
+        <slot name="user-message-actions" v-bind="scope" />
+      </template>
     </AssistantTranscript>
     <div v-if="adapter.goal && adapter.goal.enabled !== false" class="assistant-conversation__goal">
       <AssistantGoalControl :state="adapter.goal" />
@@ -99,10 +141,6 @@
                 @update:model-value="updateConfiguration({ ...configuration, [field.name]: $event })"
               />
             </slot>
-            <v-btn
-              v-if="$slots.avatar" ref="avatarControl" class="assistant-conversation__avatar-size" aria-label="Avatar size" :title="`Avatar size: ${avatarSize}`"
-              aria-haspopup="menu" :aria-expanded="avatarMenuOpen" :icon="mdiAccountCircleOutline" size="small" variant="text"
-            />
             <slot name="composer-tools" :adapter="adapter" />
             <template #feedback>
               <p v-if="attachmentsEnabled && adapter.attachments.status" role="alert" class="assistant-conversation__attachment-error">{{ adapter.attachments.status }}</p>
@@ -116,7 +154,7 @@
 </template>
 <script setup>
 import { computed, onBeforeUnmount, onMounted, onUpdated, ref, useId, useSlots, watch } from "vue";
-import { mdiAccountCircleOutline, mdiPaperclip } from "@mdi/js";
+import { mdiAccountCircleOutline, mdiClose, mdiMinus, mdiPaperclip, mdiPencil } from "@mdi/js";
 import AssistantTranscript from "./AssistantTranscript.vue";
 import AssistantPromptInput from "./AssistantPromptInput.vue";
 import AssistantComposerActions from "./AssistantComposerActions.vue";
@@ -133,17 +171,22 @@ const props = defineProps({
   configurationFields: { type: Array, default: () => [] },
   configurationMode: { type: String, default: "hidden", validator: (value) => ["hidden", "readonly", "editable"].includes(value) }
 });
-defineEmits(["update:avatarSize"]);
+const emit = defineEmits(["update:avatarSize"]);
 const slots = useSlots();
 const container = ref(null);
 const avatarControls = ref(null);
-const avatarControl = ref(null);
-const avatarMenuOpen = ref(false);
+const visibleAvatarSize = ref("compact");
+watch(() => props.avatarSize, (size) => {
+  if (size !== "hidden") visibleAvatarSize.value = size;
+}, { immediate: true });
+function toggleAvatar() {
+  emit("update:avatarSize", props.avatarSize === "hidden" ? visibleAvatarSize.value : "hidden");
+}
 const avatarSizes = [
-  { title: "Hidden", value: "hidden", height: 0 },
-  { title: "Compact", value: "compact", height: 64 },
-  { title: "Standard", value: "standard", height: 112 },
-  { title: "Large", value: "large", height: 176 }
+  { value: "hidden", height: 0 },
+  { value: "compact", height: 96 },
+  { value: "standard", height: 112 },
+  { value: "large", height: 176 }
 ];
 const avatarSpace = ref(0);
 const avatarHeight = computed(() => Math.min(avatarSpace.value, avatarSizes.find(size => size.value === props.avatarSize).height));
@@ -198,8 +241,8 @@ const delivery = ref(null);
 const statusId = `assistant-status-${useId()}`;
 const conversation = computed(() => {
   const saved = props.adapter.conversation;
-  if (!props.adapter.delivery && !saved.previewMessage && !saved.interimReply) return saved;
-  const { previewMessage, interimReply, ...display } = saved;
+  if (!props.adapter.delivery && !saved.previewMessage && !saved.previewMessages?.length && !saved.interimReply) return saved;
+  const { previewMessage, previewMessages, interimReply, ...display } = saved;
   let turns = props.adapter.delivery ? props.adapter.delivery.turns(saved.turns || []) : saved.turns || [];
   if (interimReply?.text && interimReply.turnId) {
     const assistant = { ...interimReply, messageId: interimReply.id, role: "assistant" };
@@ -212,13 +255,30 @@ const conversation = computed(() => {
         (message.outputId || message.messageId) !== (interimReply.outputId || interimReply.id)).concat(assistant) } : {})
     });
   }
-  const messageId = String(previewMessage?.messageId || previewMessage?.id || "").trim();
-  const alreadyShown = messageId && (props.adapter.delivery?.find?.(messageId) || turns.some(turn => [
-    turn.system, turn.user, turn.assistant, ...(turn.thinking || []), ...(turn.commentary || []), ...(turn.messages || [])
-  ].some(message => String(message?.messageId || message?.id || "") === messageId)));
-  if (messageId && previewMessage?.text && !alreadyShown) {
-    const user = { messageId, role: "user", text: String(previewMessage.text) };
-    turns = [...turns, { turnId: messageId, user, messages: [user], optimistic: { id: messageId, status: "pending" } }];
+  // This list projects existing capture/pending owners; it never queues delivery.
+  const previews = Array.isArray(previewMessages) ? previewMessages : previewMessage ? [previewMessage] : [];
+  for (const preview of previews) {
+    const messageId = String(preview?.messageId || preview?.id || "").trim();
+    const localDelivery = messageId && props.adapter.delivery?.find?.(messageId);
+    if ((!localDelivery || localDelivery.status === "failed") && preview?.actions?.send) {
+      // Keep one unadmitted bubble and its real status until explicit Edit/discard.
+      // A receipt:false user row is not acknowledgement of the pending words.
+      turns = turns.map(turn => {
+        const failed = turn.optimistic?.id === messageId && turn.optimistic.status === "failed";
+        const unadmitted = turn.user?.receipt === false && String(turn.user.messageId || turn.user.id || "") === messageId;
+        if (!failed && !unadmitted) return turn;
+        return { ...turn, preview: true, previewMessage: preview, user: { ...turn.user, text: String(preview.text || "") } };
+      });
+    }
+    const alreadyShown = messageId && (localDelivery || turns.some(turn => [
+      turn.system, turn.user, turn.assistant, ...(turn.thinking || []), ...(turn.commentary || []), ...(turn.messages || [])
+    ].some(message => String(message?.messageId || message?.id || "") === messageId &&
+      (message.receipt !== false || turn.preview))));
+    if (messageId && (preview?.text || preview?.actions?.editing) && !alreadyShown) {
+      const user = { messageId, role: "user", text: String(preview.text || "") };
+      turns = [...turns, { turnId: messageId, user, messages: [user], preview: true, previewMessage: preview,
+        optimistic: { id: messageId, status: "pending" } }];
+    }
   }
   // Transcription and interim replies are display only. The receipt watcher
   // receives canonical turns, never these presentation or delivery overlays.
@@ -327,10 +387,16 @@ function updateConfiguration(value) {
 defineExpose({ focus: () => input.value?.focus(), submit, stop });
 </script>
 <style scoped>
-.assistant-conversation { display: flex; flex-direction: column; min-height: 0; min-width: 0; height: 100%; gap: 0; container: assistant-conversation / inline-size; }
-.assistant-conversation__avatar { flex: 0 0 auto; min-width: 0; }
-.assistant-conversation__avatar-controls { display: flex; align-items: center; justify-content: flex-end; min-height: 48px; }
-.assistant-conversation__avatar-size { min-width: 48px; min-height: 48px; }
+.assistant-conversation__preview-actions { display: flex; justify-content: flex-end; }
+.assistant-conversation { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; height: 100%; gap: 0; container: assistant-conversation / inline-size; }
+.assistant-conversation__avatar { position: absolute; top: 0; right: 0; z-index: 3; max-width: 100%; min-width: 0; }
+.assistant-conversation__avatar-controls { position: absolute; top: 0; right: 100%; display: flex; align-items: center; justify-content: flex-end; min-height: 44px; }
+.assistant-conversation__avatar--hidden .assistant-conversation__avatar-controls { right: 0; }
+.assistant-conversation__avatar-size { min-width: 44px; min-height: 44px; }
+.assistant-conversation__avatar-size-disc { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--v-theme-on-surface), .08); }
+.assistant-conversation__avatar-size-disc--minimise { background: rgba(var(--v-theme-primary), .12); }
+.assistant-conversation__avatar-presentation { display: flex; flex-direction: column; align-items: center; min-width: 0; }
+.assistant-conversation__avatar-tools { display: flex; align-items: center; gap: 0; }
 .assistant-conversation__avatar-visual { display: flex; justify-content: center; min-height: 0; overflow: hidden; }
 .assistant-conversation__avatar-visual :deep(> *) { max-width: 100%; max-height: 100%; }
 .assistant-conversation__goal { display: flex; justify-content: flex-end; flex: 0 0 auto; }