@olares/lares-mobile 0.15.24 → 0.15.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olares/lares-mobile",
-  "version": "0.15.24",
+  "version": "0.15.25",
   "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.25",
     "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,
@@ -704,6 +707,7 @@ export default {
         this.noteSeen(this.sessionId);
         this.noteSeen(snap.sessionId);
         this.pendingUser = "";
+        this.actionNotice = "";
         this.previews = {};
         this.resetPreview();
         this.commands = null;
@@ -1037,6 +1041,7 @@ export default {
       this.resetPreview();
       this.pendingUser = "";
       this.failed = "";
+      this.actionNotice = "";
       this.error = "";
       this.modelCatalog = null;
       this.modelCatalogError = "";
@@ -1317,7 +1322,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") }),
@@ -1584,10 +1595,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,28 @@ export default {
   color: var(--q-blue-default);
 }
 
+.lares-shell__refresh {
+  display: flex;
+  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,

package/src/settings/AgentSettings.vue

@@ -74,6 +74,7 @@
         </select>
       </label>
       <p v-if="voiceError" class="lares-agent__hint" data-status="error">{{ voiceError }}</p>
+      <VoiceKeys :key="`keys-${hostKey}`" :client="voiceKeys" :t="tVoice" />
     </section>
     <section class="lares-agent__group">
       <h2>{{ tSearch("settings.title") }}</h2>
@@ -138,6 +139,7 @@ import { adoptHost } from "../runtime.js";
 import { createT } from "../i18n.js";
 import { chatDevice, DEVICE_DESKTOP } from "../layout.js";
 import VoicePreferences from "./VoicePreferences.vue";
+import VoiceKeys from "./VoiceKeys.vue";
 import LaresSettingRow from "./SettingRow.vue";
 import LaresSheet from "./Sheet.vue";
 import LaresSelect from "./Select.vue";
@@ -154,7 +156,7 @@ function itemLabel(items, id) {
 
 export default {
   name: "LaresAgentSettings",
-  components: { VoicePreferences, LaresSettingRow, LaresSheet, LaresSelect },
+  components: { VoicePreferences, VoiceKeys, LaresSettingRow, LaresSheet, LaresSelect },
   expose: ["reload", "beforeLeave"],
   props: {
     locale: { type: String, default: "en" },
@@ -205,6 +207,7 @@ export default {
       return hostSessionKey(this.ports);
     },
     ttsFetch() { return createHostClient(this.ports).ttsFetch; },
+    voiceKeys() { return createHostClient(this.ports).voiceKeys; },
     settings() {
       return createHostClient(this.ports).settings;
     },

package/src/settings/Sheet.vue

@@ -19,6 +19,9 @@
         <div class="lares-sheet__body">
           <slot />
         </div>
+        <footer v-if="$slots.footer" class="lares-sheet__foot">
+          <slot name="footer" />
+        </footer>
       </div>
     </div>
   </Teleport>
@@ -84,6 +87,11 @@ export default {
   transform: translateY(0);
 }
 
+.lares-sheet:has(.lares-sheet__foot) .lares-sheet__panel {
+  height: 45%;
+  overflow: hidden;
+}
+
 .lares-sheet__head {
   display: flex;
   align-items: center;
@@ -129,6 +137,17 @@ export default {
   -webkit-overflow-scrolling: touch;
 }
 
+.lares-sheet:has(.lares-sheet__foot) .lares-sheet__body {
+  flex: 1 1 auto;
+  padding-bottom: 8px;
+}
+
+.lares-sheet__foot {
+  flex-shrink: 0;
+  padding: 0 0 env(safe-area-inset-bottom, 0px);
+  background: var(--q-yellow-default);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .lares-sheet__backdrop,
   .lares-sheet__panel {

package/src/settings/VoiceKeys.vue

@@ -0,0 +1,74 @@
+<template>
+  <section class="lares-voice-keys">
+    <h3>{{ t('settings.group.keys') }}</h3>
+    <p class="lares-agent__hint">{{ t('settings.keys.hint') }}</p>
+    <ul v-if="keys && keys.length" class="lares-voice-keys__list">
+      <li v-for="key in keys" :key="key.id">
+        <span>{{ key.name }}<small>{{ key.models.join(', ') }}</small></span>
+        <button type="button" :disabled="busy" @click="revoking = key">{{ t('settings.keys.revoke') }}</button>
+      </li>
+    </ul>
+    <p v-else-if="keys" class="lares-agent__hint">{{ t('settings.keys.empty') }}</p>
+    <label>{{ t('settings.keys.name') }}
+      <input v-model="name" type="text" maxlength="64" :placeholder="t('settings.keys.namePlaceholder')" :disabled="busy" />
+    </label>
+    <fieldset :disabled="busy">
+      <legend>{{ t('settings.keys.models') }}</legend>
+      <label v-for="model in allModels" :key="model"><input type="checkbox" :checked="models.includes(model)" @change="toggle(model)" />{{ model }}</label>
+    </fieldset>
+    <p v-if="agentSelected" role="note" data-status="error">{{ t('settings.keys.agentWarning') }}</p>
+    <button type="button" :disabled="busy || !name.trim() || !models.length" @click="issue">{{ t(busy ? 'settings.keys.issuing' : 'settings.keys.issue') }}</button>
+    <p v-if="error" role="alert" data-status="error">{{ error }}</p>
+    <div v-if="issued" class="lares-voice-keys__issued" role="dialog">
+      <p>{{ t('settings.keys.issued') }}</p>
+      <code>{{ issued.key }}</code>
+      <button type="button" @click="copy">{{ t(copied ? 'settings.keys.copied' : 'settings.keys.copy') }}</button>
+      <button type="button" @click="issued = null">{{ t('settings.keys.done') }}</button>
+    </div>
+    <div v-if="revoking" class="lares-voice-keys__confirm" role="dialog">
+      <p>{{ t('settings.keys.revokeConfirm', { name: revoking.name }) }}</p>
+      <button type="button" :disabled="busy" @click="revoke">{{ t('settings.keys.revoke') }}</button>
+      <button type="button" @click="revoking = null">{{ t('settings.keys.done') }}</button>
+    </div>
+  </section>
+</template>
+<script>
+import { markRaw } from "vue";
+import { messageFromCode } from "@olares/lares-core/i18n/t";
+import { VOICE_KEY_AGENT_MODELS, VOICE_KEY_DEFAULT_MODELS, VOICE_KEY_MODELS } from "@olares/lares-core/voice/keys-client";
+export default {
+  props: { client: { type: Object, required: true }, t: { type: Function, required: true } },
+  data() {
+    return { keys: null, name: "", models: [...VOICE_KEY_DEFAULT_MODELS], issued: null, copied: false, revoking: null, busy: false, error: "", allModels: markRaw([...VOICE_KEY_MODELS]) };
+  },
+  computed: { agentSelected() { return this.models.some((model) => VOICE_KEY_AGENT_MODELS.includes(model)); } },
+  mounted() { void this.load(); },
+  methods: {
+    fail(err) { this.error = messageFromCode(this.t, err?.message || "", "error.voice_key_failed"); },
+    async load() { try { this.keys = await this.client.list(); } catch (err) { this.fail(err); } },
+    toggle(model) { this.models = this.models.includes(model) ? this.models.filter((value) => value !== model) : VOICE_KEY_MODELS.filter((value) => value === model || this.models.includes(value)); },
+    async issue() {
+      this.busy = true; this.error = "";
+      try { this.issued = await this.client.issue({ name: this.name, models: this.models }); this.copied = false; this.name = ""; this.models = [...VOICE_KEY_DEFAULT_MODELS]; await this.load(); }
+      catch (err) { this.fail(err); }
+      finally { this.busy = false; }
+    },
+    async revoke() {
+      this.busy = true; this.error = "";
+      try { await this.client.revoke(this.revoking.id); this.revoking = null; await this.load(); }
+      catch (err) { this.fail(err); }
+      finally { this.busy = false; }
+    },
+    async copy() { try { await navigator.clipboard.writeText(this.issued.key); this.copied = true; } catch (err) { this.fail(err); } },
+  },
+};
+</script>
+<style scoped>
+.lares-voice-keys { display: flex; flex-direction: column; gap: 8px; }
+.lares-voice-keys__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.lares-voice-keys__list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.lares-voice-keys__list small { display: block; opacity: 0.7; }
+.lares-voice-keys fieldset { display: flex; flex-wrap: wrap; gap: 12px; border: 0; margin: 0; padding: 0; }
+.lares-voice-keys code { overflow-wrap: anywhere; user-select: all; }
+.lares-voice-keys [data-status="error"] { color: var(--lares-danger, #d4380d); }
+</style>