@olares/lares-mobile 0.15.24 → 0.15.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olares/lares-mobile",
-  "version": "0.15.24",
+  "version": "0.15.26",
   "description": "Lares chat component for LarePass",
   "type": "module",
   "repository": {
@@ -28,7 +28,7 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@olares/lares-core": "0.15.24",
+    "@olares/lares-core": "0.15.26",
     "markdown-it": "^14.3.0"
   }
 }

package/src/App.vue

@@ -124,6 +124,7 @@ import { failText, withPendingUser } from "./chat/format.js";
 import { captureSource } from "@olares/lares-core/voice/input";
 import { laresVoiceConfig, laresVoiceAvailability } from "@olares/lares-core/voice/lares-policy";
 import { createVoiceConversation } from "@olares/lares-core/voice/conversation";
+import { createUnifiedConversation } from "@olares/lares-core/voice/unified-conversation";
 import { createAnswerPlayer } from "./chat/playback.js";
 import { createReplySpeaker, createSentencePlayer, readoutState, speakable } from "@olares/lares-core/voice/speech";
 import { prepareBrowserCapture } from "@olares/lares-core/voice/browser-capture";
@@ -213,6 +214,7 @@ export default {
       draftBySession: {},
       imagesBySession: {},
       failed: "",
+      actionNotice: "",
       error: "",
       items: [],
       pendingUser: "",
@@ -325,6 +327,7 @@ export default {
         draft: this.draft,
         failed: this.failed,
         failText: this.failText,
+        actionNotice: this.actionNotice,
         viewItems: this.viewItems,
         historyLoading: this.historyLoading,
         previews: this.previews,
@@ -577,6 +580,7 @@ export default {
     });
     this.voiceSettingsUnsub = subscribeVoiceSettings((value) => {
       this.voiceDefaultMode = value.config.mobileMode; this.voiceSettings = markRaw(value);
+      this.voiceStreaming = value.config.streaming === true;
       const next = value.config.speak === true;
       if (this.voiceSpeak && !next) this.reader?.stop();
       this.voiceSpeak = next;
@@ -704,6 +708,7 @@ export default {
         this.noteSeen(this.sessionId);
         this.noteSeen(snap.sessionId);
         this.pendingUser = "";
+        this.actionNotice = "";
         this.previews = {};
         this.resetPreview();
         this.commands = null;
@@ -726,7 +731,7 @@ export default {
       this.running = snap.running;
       this.runningSince = snap.runningSince || 0;
       if (this.voiceCall) this.reader.stop();
-      const target = this.voiceSpeak && !this.voiceCall && !document.hidden ? speakable(utterance, true) : null;
+      const target = this.voiceSpeak && !this.voiceCall && !document.hidden ? speakable(utterance, this.voiceStreaming) : null;
       if (target) this.reader.follow({ ...target, sessionId: snap.sessionId, source: { sessionId: snap.sessionId, turn: target.turn, step: target.step, attemptId: target.attemptId }, key: `${snap.sessionId}:${target.key}` });
       this.failed = snap.failed;
       this.error = snap.error;
@@ -1037,6 +1042,7 @@ export default {
       this.resetPreview();
       this.pendingUser = "";
       this.failed = "";
+      this.actionNotice = "";
       this.error = "";
       this.modelCatalog = null;
       this.modelCatalogError = "";
@@ -1317,7 +1323,13 @@ export default {
       const device = settings.config.device === "headset" ? "headset" : "device";
       onDevice(device);
       if (settings.config.backend === "realtime" && continuous) throw new Error("voice_manual_realtime_unavailable");
-      this.reader.stop(); this.player?.stop();
+      this.reader.stop(); this.player?.stop(); this.player?.unlock();
+      if (config.transport !== "legacy") {
+        return createUnifiedConversation({ request: (path, options) => this.runtime.voiceRequest(path, options), socket: (ticket) => this.runtime.voiceSocket(ticket),
+          device: captureSource("mobile", config.device), readAloud: continuous && config.speak, preset: config.preset, presentationSession: true,
+          endpointSilenceMs: config.endpointSilenceMs, idleTimeoutMs: config.idleTimeoutMs, recoveryTimeoutMs: config.recoveryTimeoutMs,
+          onTranscript: continuous ? null : onTranscript, mode: () => resolveSubmitMode(this.running, false, true, this.busyEnter) });
+      }
       let conversation;
       const reader = createSentencePlayer({
         stream: (value) => playAudioStream({ ...value, request: (path, options) => this.runtime.voiceRequest(path, options), headers: conversation.headers, socket: (ticket) => this.runtime.voiceSocket(ticket, "/api/lares/voice/stream") }),
@@ -1340,7 +1352,7 @@ export default {
         onTranscript: continuous ? null : onTranscript,
         mode: () => resolveSubmitMode(this.running, false, true, this.busyEnter),
         playback: { get canPause() { return reader.canPause; }, get key() { return reader.key; }, pause: () => reader.pause(), resume: () => reader.resume(), stop: () => { reader.stop(); this.player.stop(); } },
-        onReply: (reply) => { const value = speakable(reply, device === "device"); if (value) reader.follow(value); },
+        onReply: (reply) => { const value = speakable(reply, config.streaming === true); if (value) reader.follow(value); },
       });
       return conversation;
     },
@@ -1584,10 +1596,12 @@ export default {
     async updateQueue(itemId, action) {
       if (!itemId || this.queueBusy) return;
       this.queueBusy = itemId;
+      this.actionNotice = "";
       try {
         const changed = await this.runtime.updateQueue(itemId, action);
         if (!changed.ok) {
-          this.failed = changed.error?.message || changed.error?.code || "queue";
+          const detail = changed.error?.message || changed.error?.code || "queue";
+          this.actionNotice = this.t("chat.failed", { error: detail });
         }
       } finally {
         this.queueBusy = "";

package/src/chat/ChatBar.vue

@@ -163,6 +163,10 @@ export default {
   line-height: 20px;
 }
 
+.lares-bar__segment:only-child {
+  max-width: none;
+}
+
 .lares-bar__segment + .lares-bar__segment::before {
   content: "";
   width: 1px;

package/src/chat/Transcript.vue

@@ -34,10 +34,6 @@
       :data-type="row.type"
       :data-pending="row.pending ? 'true' : 'false'"
     >
-      <div v-if="hasReadout(row)" role="status" class="lares-message-readout">
-        <span>{{ speechLabel }}</span>
-        <button type="button" class="lares-message-stop" @click="readout.stop()">{{ t(readout.status === 'error' ? 'readout.dismiss' : 'readout.stop') }}</button>
-      </div>
       <div v-if="row.type === 'user'" class="lares-msg" data-role="user">{{ row.text }}</div>
       <LaresStageRow
         v-else-if="row.type === 'context'"
@@ -75,16 +71,19 @@
         :title="retryLabel(row)"
         :body="retryBody(row)"
       />
-      <div
-        v-else-if="row.type === 'assistant' && row.pending"
-        class="lares-md"
-        data-pending="true"
-      >{{ row.text }}</div>
       <template v-else-if="row.type === 'assistant'">
-        <div class="lares-md" v-html="renderMarkdown(row.text)" />
-        <p v-if="row.voiceSummary" class="lares-voice-summary">{{ row.voiceSummary }}</p>
-        <button v-if="!readout && isSpeaking(row)" type="button" class="lares-message-stop" @click="$emit('stop-speaking')">{{ t('input.stopSpeaking') }}</button>
+        <div v-if="row.pending" class="lares-md" data-pending="true">{{ row.text }}</div>
+        <template v-else>
+          <div class="lares-md" v-html="renderMarkdown(row.text)" />
+          <p v-if="row.voiceSummary" class="lares-voice-summary">{{ row.voiceSummary }}</p>
+        </template>
+        <div v-if="hasReadout(row)" role="status" class="lares-message-readout">
+          <span>{{ speechLabel }}</span>
+          <button type="button" class="lares-message-stop" @click="readout.stop()">{{ t(readout.status === 'error' ? 'readout.dismiss' : 'readout.stop') }}</button>
+        </div>
+        <button v-if="!row.pending && !readout && isSpeaking(row)" type="button" class="lares-message-stop" @click="$emit('stop-speaking')">{{ t('input.stopSpeaking') }}</button>
         <LaresMessageActions
+          v-if="!row.pending"
           :text="row.text"
           :reaction="reactions[actionKey(index)] || ''"
           :metrics="row.metrics || null"

package/src/chat/VoiceInput.vue

@@ -6,20 +6,17 @@
       <svg v-if="view.mode === 'single' && ui.recording && levels.length" class="lares-inline-level" viewBox="0 0 32 24" aria-hidden="true"><line v-for="(level, index) in levels" :key="index" :x1="index * 5 + 3" :x2="index * 5 + 3" :y1="12 - Math.max(2, Math.min(10, level * 500))" :y2="12 + Math.max(2, Math.min(10, level * 500))" /></svg>
       <span>{{ t(ui.label) }}</span><span v-if="ui.timed" class="lares-inline-time" aria-hidden="true"> · {{ ui.elapsed }}</span>
     </button>
-    <span v-if="!ui.error" class="lares-inline-status" :data-visible="['speaking', 'working'].includes(ui.phase)" role="status" aria-live="polite" aria-atomic="true">{{ status }}</span>
   </div>
 </template>
 <script>
 import { createHoldGesture } from '@olares/lares-core/voice/hold';
 import { voiceInputPresentation } from '@olares/lares-core/voice/presentation';
-import { messageFromCode } from '@olares/lares-core/i18n/t';
 export default {
   name: 'LaresVoiceInput', props: { view: { type: Object, required: true }, t: { type: Function, required: true } }, emits: ['action'],
   data: () => ({ now: Date.now(), clock: null, gesture: null }),
   computed: {
     ui() { return voiceInputPresentation(this.view, this.now); },
     levels() { return (this.view.levels || []).slice(-6); },
-    status() { return this.ui.error ? messageFromCode(this.t, this.ui.error, 'error.voice_failed') : this.t(this.ui.status); },
   },
   created() { this.gesture = createHoldGesture({ start: () => this.action('holdStart'), end: value => this.action('holdEnd', value), onCancelChange: value => this.action('setCancelArmed', value), isActive: () => this.view.holding }); },
   mounted() { this.$refs.main?.focus(); this.clock = setInterval(() => { this.now = Date.now(); }, 250); window.addEventListener('blur', this.cancel); window.addEventListener('pointerdown', this.additionalPointer, true); },
@@ -44,6 +41,4 @@ export default {
 .lares-inline-cancel { position: absolute; bottom: calc(100% + 18px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; padding: 7px 12px; border-radius: 10px; background: var(--q-background-1, white); box-shadow: 0 2px 12px #0001; pointer-events: none; }
 [data-phase=recording] .lares-inline-main { color: var(--q-blue-default, #3377ff); }
 [data-phase=cancel] .lares-inline-main, .lares-inline-cancel[data-armed=true] { color: var(--q-red-default, #c23d32); }
-.lares-inline-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
-.lares-inline-status[data-visible=true] { width: auto; height: auto; clip-path: none; bottom: calc(100% + 16px); background: var(--q-background-1, white); padding: 6px; font-size: 12px; color: var(--q-ink-2, #777); }
 </style>

package/src/desktop/DesktopQueue.vue

@@ -1,6 +1,5 @@
 <template>
-  <Transition name="lares-panel">
-    <div v-if="rows.length" class="desktop-queue">
+    <div v-if="rows.length" class="desktop-queue lares-queue-in">
     <div class="desktop-queue__panel">
       <button
         v-if="rows.length > 1"
@@ -70,7 +69,6 @@
       </ul>
     </div>
     </div>
-  </Transition>
 </template>
 
 <script>

package/src/desktop/DesktopShell.vue

@@ -35,6 +35,7 @@
           <span>{{ state.failText }}</span>
           <button type="button" :disabled="state.starting" @click="$emit('retry')">{{ t("probe.retry") }}</button>
         </div>
+        <p v-else-if="state.actionNotice" class="desktop-shell__failure" role="status">{{ state.actionNotice }}</p>
         <div v-if="newSessionHero" class="desktop-shell__brand">
           <div class="desktop-shell__logo" :style="logoStyle" aria-hidden="true" />
           <h1>{{ t("shell.title") }}</h1>

package/src/host.js

@@ -5,6 +5,7 @@ import { normalizeReferenceCandidates, referencesUrl } from "@olares/lares-core/
 import { muxWsUrl, remoteStreamOpen, workspaceBaseline } from "@olares/lares-core/larepass/mux";
 import { RESPOND_PATH } from "@olares/lares-core/larepass/rpc";
 import { createHostSettings } from "@olares/lares-core/larepass/settings";
+import { createVoiceKeysClient } from "@olares/lares-core/voice/keys-client";
 import {
   downloadFileUrl,
   isPreviewPayload,
@@ -340,5 +341,6 @@ export function createHostClient(ports = {}) {
     },
     consumeMux,
     settings: createHostSettings(request),
+    voiceKeys: createVoiceKeysClient((path, init) => request(path, init)),
   };
 }

package/src/mobile/MobileShell.vue

@@ -51,6 +51,7 @@
     />
     <div class="lares-shell__conversation" :data-hero="newSessionHero ? 'true' : 'false'">
       <p v-if="state.failed" class="lares-shell__status">{{ state.failText }}</p>
+      <p v-else-if="state.actionNotice" class="lares-shell__status" role="status">{{ state.actionNotice }}</p>
       <button
         v-if="state.failed"
         type="button"
@@ -176,7 +177,6 @@
 
     <LaresSheet :open="state.modelSheet" :title="t('model.menuAria')" @close="$emit('close-model')">
       <p v-if="state.modelCatalogError" class="lares-shell__status" role="status">{{ state.modelCatalogError }}</p>
-      <button type="button" @click="state.refreshModels()">{{ t('agent.refresh') }}</button>
       <p v-if="state.modelError" class="lares-shell__status">{{ state.modelError }}</p>
       <p v-else-if="!state.models" class="lares-shell__hint">{{ t("agent.loading") }}</p>
       <p v-else-if="!state.modelGroups.length" class="lares-shell__hint">{{ t("model.empty") }}</p>
@@ -202,6 +202,9 @@
           @click="$emit('choose-effort', row.id)"
         />
       </template>
+      <template #footer>
+        <button type="button" class="lares-shell__refresh" @click="state.refreshModels()">{{ t('agent.refresh') }}</button>
+      </template>
     </LaresSheet>
     <Transition name="lares-preview">
       <LaresPreview
@@ -383,6 +386,29 @@ export default {
   color: var(--q-blue-default);
 }
 
+.lares-shell__refresh {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: var(--q-yellow-default);
+  color: var(--q-ink-1);
+  font: inherit;
+  font-size: 16px;
+  font-weight: 500;
+  text-align: center;
+}
+
+.lares-shell__refresh:active {
+  background: var(--q-yellow-pressed);
+}
+
 .lares-shell__heading {
   margin: 0;
   padding: 12px 16px 4px;

package/src/motion.css

@@ -101,6 +101,20 @@
 .lares-panel-leave-to {
   opacity: 0;
   transform: translateY(8px);
+  pointer-events: none;
+}
+
+/* A panel that is still arriving or leaving is not a click target. */
+.lares-panel-leave-active {
+  pointer-events: none;
+}
+
+@keyframes lares-queue-in {
+  from { opacity: 0; transform: translateY(8px); }
+}
+
+.lares-queue-in {
+  animation: lares-queue-in var(--lares-duration-normal, 220ms) var(--lares-ease-out, cubic-bezier(0.32, 0.72, 0, 1));
 }
 
 /* Preview tab strip — slide in from the header edge. */
@@ -151,6 +165,8 @@
     transition: none;
   }
 
+  .lares-queue-in { animation: none; }
+
   .lares-preview-enter-from,
   .lares-preview-leave-to,
   .lares-view-enter-from,