@olares/lares-mobile 0.15.6 → 0.15.9

package/src/chat/voice.js

@@ -1,21 +1,57 @@
-import { TranscriptQueue } from "@olares/lares-core/voice/client";
 import {
   formatElapsed,
   isRecordingTooShort,
   pickRecordingMime,
-  RECORDING_AUDIO,
 } from "@olares/lares-core/voice/recorder";
 
 export { formatElapsed };
 
-export function createVoiceCapture({ transcribe, getDraft, setDraft, onPhase }) {
-  const queue = new TranscriptQueue();
+/** Phone mic. Bare booleans are exact and iOS rejects the headset profile. */
+const DEVICE_AUDIO = {
+  channelCount: { ideal: 1 },
+  echoCancellation: { ideal: true },
+  noiseSuppression: { ideal: true },
+  autoGainControl: { ideal: true },
+};
+
+const CHUNK_MS = 250;
+
+function micFailure(err) {
+  const name = err?.name || "";
+  if (name === "NotAllowedError" || name === "PermissionDeniedError") return "voice_permission_denied";
+  if (name === "SecurityError") return "voice_unsupported";
+  return "voice_failed";
+}
+
+async function openDeviceMic(mediaDevices) {
+  try {
+    return await mediaDevices.getUserMedia({ audio: DEVICE_AUDIO });
+  } catch (err) {
+    if (micFailure(err) !== "voice_failed") throw err;
+    return mediaDevices.getUserMedia({ audio: true });
+  }
+}
+
+export function createVoiceCapture({
+  transcribe,
+  submit,
+  onPhase,
+  onTrace,
+  now = Date.now,
+  media,
+}) {
+  const mediaDevices = media?.mediaDevices ?? globalThis.navigator?.mediaDevices;
+  const Recorder = media?.MediaRecorder ?? globalThis.MediaRecorder;
   let recorder = null;
   let stream = null;
   let chunks = [];
   let started = 0;
   let timer = 0;
+  let errorTimer = 0;
+  let finishTimer = 0;
   let cancel = false;
+  let released = false;
+  let finished = false;
   let dead = false;
   let abort = null;
   let phase = "idle";
@@ -25,6 +61,14 @@ export function createVoiceCapture({ transcribe, getDraft, setDraft, onPhase })
     onPhase?.(next, extra);
   };
 
+  const trace = (event, fields) => {
+    try {
+      onTrace?.(event, fields);
+    } catch {
+      /* a trace must not change the take */
+    }
+  };
+
   const stopTimer = () => {
     if (timer) {
       clearInterval(timer);
@@ -40,96 +84,182 @@ export function createVoiceCapture({ transcribe, getDraft, setDraft, onPhase })
 
   const fail = (code) => {
     if (dead) return;
+    if (errorTimer) clearTimeout(errorTimer);
     emit("error", { error: code, elapsed: 0 });
-    setTimeout(() => {
+    errorTimer = setTimeout(() => {
+      errorTimer = 0;
       if (!dead && phase === "error") emit("idle", { error: "", elapsed: 0 });
     }, 3200);
   };
 
   const finish = async () => {
+    if (finished || dead) return;
+    finished = true;
     stopTimer();
-    const took = Date.now() - started;
-    const type = recorder?.mimeType || "audio/webm";
+    const took = now() - started;
+    const type = recorder?.mimeType || chunks[0]?.type || "audio/webm";
     const blobChunks = chunks;
     chunks = [];
     release();
-    if (dead) return;
     if (cancel) {
-      emit("idle", { elapsed: 0 });
+      emit("idle", { error: "", elapsed: 0 });
       return;
     }
     const blob = new Blob(blobChunks, { type });
+    trace("blob", { bytes: blob.size, type, ms: took, chunks: blobChunks.length });
     if (isRecordingTooShort(took, blob.size)) {
+      trace("too-short", { bytes: blob.size, ms: took });
       fail("voice_too_short");
       return;
     }
-    emit("transcribing", { elapsed: took });
+    emit("transcribing", { elapsed: took, error: "" });
     abort = new AbortController();
     try {
-      const text = await transcribe(blob, abort.signal);
-      if (dead) return;
-      emit("idle", { elapsed: 0 });
-      queue.apply(text, true, getDraft(), setDraft);
+      const text = String(await transcribe(blob, abort.signal) ?? "").trim();
+      if (dead || cancel) return;
+      if (!text) {
+        trace("no-input", {});
+        fail("voice_no_input");
+        return;
+      }
+      trace("transcript", { chars: text.length, head: text.slice(0, 40) });
+      emit("idle", { error: "", elapsed: 0 });
+      submit?.(text);
     } catch (err) {
-      if (dead || abort.signal.aborted) return;
-      fail(err instanceof Error ? err.message : "voice_failed");
+      if (dead || abort.signal.aborted || cancel) return;
+      const code = err instanceof Error ? err.message : "voice_failed";
+      trace("transcribe-error", { code });
+      fail(code);
     } finally {
       abort = null;
     }
   };
 
+  const scheduleFinish = () => {
+    if (finishTimer) clearTimeout(finishTimer);
+    finishTimer = setTimeout(() => {
+      finishTimer = 0;
+      void finish();
+    }, 30);
+  };
+
+  const endRecorder = () => {
+    if (!recorder || recorder.state === "inactive") {
+      scheduleFinish();
+      return;
+    }
+    try {
+      recorder.requestData?.();
+    } catch {
+      /* the final dataavailable still arrives from stop() */
+    }
+    try {
+      recorder.stop();
+    } catch {
+      scheduleFinish();
+    }
+  };
+
   return {
     get phase() {
       return phase;
     },
     async start() {
-      if (dead || phase === "recording" || phase === "transcribing") return;
-      if (typeof MediaRecorder === "undefined" || !navigator.mediaDevices?.getUserMedia) {
+      if (dead || phase === "preparing" || phase === "recording" || phase === "transcribing") return;
+      if (typeof Recorder === "undefined" || !mediaDevices?.getUserMedia) {
         fail("voice_unsupported");
         return;
       }
       cancel = false;
+      released = false;
+      finished = false;
+      trace("open", {});
+      emit("preparing", { elapsed: 0, error: "" });
       let next;
       try {
-        next = await navigator.mediaDevices.getUserMedia({ audio: RECORDING_AUDIO });
-      } catch {
-        fail("voice_permission_denied");
+        next = await openDeviceMic(mediaDevices);
+      } catch (err) {
+        const code = micFailure(err);
+        trace("mic-fail", { code, name: err?.name || "" });
+        if (!dead) fail(code);
         return;
       }
       if (dead || cancel) {
         next.getTracks().forEach((track) => track.stop());
+        if (!dead && phase === "preparing") emit("idle", { error: "", elapsed: 0 });
         return;
       }
       stream = next;
       chunks = [];
-      const mime = pickRecordingMime();
-      recorder = new MediaRecorder(stream, mime ? { mimeType: mime } : undefined);
+      const mime = pickRecordingMime(Recorder);
+      try {
+        recorder = new Recorder(stream, mime ? { mimeType: mime } : undefined);
+      } catch {
+        release();
+        fail("voice_unsupported");
+        return;
+      }
       recorder.ondataavailable = (event) => {
         if (event.data?.size) chunks.push(event.data);
+        if (recorder?.state === "inactive") scheduleFinish();
       };
-      recorder.onstop = () => {
-        void finish();
-      };
-      started = Date.now();
+      recorder.onstop = () => scheduleFinish();
+      started = now();
+      try {
+        recorder.start(CHUNK_MS);
+      } catch {
+        trace("record-fail", { mime });
+        release();
+        fail("voice_unsupported");
+        return;
+      }
+      trace("recording", { mime: recorder.mimeType || mime || "" });
+      if (released || cancel) {
+        endRecorder();
+        return;
+      }
       emit("recording", { elapsed: 0, error: "" });
-      recorder.start();
-      timer = setInterval(() => emit("recording", { elapsed: Date.now() - started }), 200);
+      timer = setInterval(() => emit("recording", { elapsed: now() - started, error: "" }), 200);
     },
+    /**
+     * Finger-up finishes the take. The mic opens asynchronously, so the finger
+     * often lifts while still preparing — that is not a cancel.
+     */
     stop(aborting = false) {
-      cancel = Boolean(aborting);
-      if (recorder && recorder.state !== "inactive") recorder.stop();
-      else {
-        stopTimer();
-        release();
-        emit("idle", { elapsed: 0 });
+      if (phase === "transcribing") {
+        if (aborting) {
+          cancel = true;
+          abort?.abort();
+        }
+        return;
+      }
+      if (phase !== "preparing" && phase !== "recording") {
+        trace("stop-ignored", { aborting: Boolean(aborting), phase });
+        return;
+      }
+      trace("stop", {
+        aborting: Boolean(aborting),
+        phase,
+        recorder: recorder?.state || "none",
+      });
+      if (aborting) {
+        cancel = true;
+        released = false;
+        if (recorder && recorder.state !== "inactive") recorder.stop();
+        return;
+      }
+      released = true;
+      stopTimer();
+      if (recorder && recorder.state !== "inactive") {
+        emit("transcribing", { elapsed: now() - started, error: "" });
+        endRecorder();
       }
-    },
-    toggle() {
-      if (phase === "recording") this.stop(false);
-      else if (phase === "idle" || phase === "error") void this.start();
     },
     dispose() {
       dead = true;
+      cancel = true;
+      if (errorTimer) clearTimeout(errorTimer);
+      if (finishTimer) clearTimeout(finishTimer);
       stopTimer();
       abort?.abort();
       if (recorder && recorder.state !== "inactive") recorder.stop();

package/src/desktop/DesktopComposer.vue

@@ -1,7 +1,50 @@
 <template>
-  <form class="desktop-composer" @submit.prevent>
+  <form class="desktop-composer" :data-hero="hero ? 'true' : undefined" @submit.prevent>
     <div class="desktop-composer__model-row">
-      <LaresPcPopover v-model="modelOpen" :width="260" placement="top-end">
+      <LaresPcPopover
+        v-if="hero"
+        v-model="workspaceOpen"
+        class="desktop-composer__workspace-slot"
+        :width="240"
+        placement="top-start"
+      >
+        <template #trigger="{ toggle }">
+          <button
+            type="button"
+            class="desktop-composer__model desktop-composer__workspace"
+            :disabled="!state.workspacesReady"
+            aria-haspopup="menu"
+            :aria-expanded="workspaceOpen"
+            @mousedown.prevent
+            @click="toggle"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M3.5 7.5h6l1.6 2H20.5v9H3.5z" />
+            </svg>
+            <span>{{ workspaceLabel }}</span>
+            <ChevronIcon />
+          </button>
+        </template>
+        <div class="desktop-composer__menu">
+          <button
+            v-for="workspace in state.workspaces"
+            :key="workspace.workspaceId"
+            type="button"
+            class="desktop-composer__option"
+            :data-selected="workspace.workspaceId === state.currentWorkspaceId"
+            @click="pickWorkspace(workspace.workspaceId)"
+          >
+            <span>{{ workspace.title || defaultWorkspaceTitle }}</span>
+            <CheckIcon v-if="workspace.workspaceId === state.currentWorkspaceId" />
+          </button>
+        </div>
+      </LaresPcPopover>
+      <LaresPcPopover
+        v-model="modelOpen"
+        class="desktop-composer__model-slot"
+        :width="260"
+        placement="top-end"
+      >
         <template #trigger="{ toggle }">
           <button
             type="button"
@@ -397,6 +440,7 @@
 <script>
 import { h } from "vue";
 import { resolveSubmitMode } from "@olares/lares-core/larepass/submission-settings";
+import { DEFAULT_WORKSPACE_TITLE } from "@olares/lares-core/workspace/constants";
 import { activeReferenceToken, insertReference } from "@olares/lares-core/larepass/references";
 import { draftImageStatus } from "@olares/lares-core/files/draft-images";
 import LaresDesktopQueue from "./DesktopQueue.vue";
@@ -456,16 +500,18 @@ export default {
   props: {
     state: { type: Object, required: true },
     t: { type: Function, required: true },
+    hero: { type: Boolean, default: false },
     modelKey: { type: Function, required: true },
     effortName: { type: Function, required: true },
   },
   emits: [
     "update-draft", "send", "stop", "steer-queue", "files", "choose-model", "choose-effort", "answer-approval", "answer-questions",
-    "choose-permission", "disable-plan", "goal-action", "open-commands", "pick-command", "queue-action", "remove-image",
+    "choose-permission", "disable-plan", "goal-action", "open-commands", "pick-command", "queue-action", "remove-image", "pick-workspace",
   ],
   data() {
     return {
       modelOpen: false,
+      workspaceOpen: false,
       effortOpen: false,
       permissionOpen: false,
       permissionConfirm: false,
@@ -484,6 +530,16 @@ export default {
     };
   },
   computed: {
+    defaultWorkspaceTitle() {
+      return DEFAULT_WORKSPACE_TITLE;
+    },
+    workspaceLabel() {
+      if (!this.state.workspacesReady) return this.t("agent.loading");
+      const current = this.state.workspaces.find(
+        (row) => row.workspaceId === this.state.currentWorkspaceId,
+      );
+      return current?.title || this.state.workspaces[0]?.title || DEFAULT_WORKSPACE_TITLE;
+    },
     /** Held by id, so removing or sending the draft closes the dialog. */
     previewImage() {
       return this.state.draftImages.find((row) => row.id === this.previewImageId) ?? null;
@@ -524,6 +580,7 @@ export default {
         return this.t("chat.placeholderSteerQueue", { shortcut });
       }
       if (this.state.planActive) return this.t("chat.placeholderPlan");
+      if (this.hero) return this.t("chat.placeholderNewSession");
       return this.t("chat.placeholderDesktop");
     },
   },
@@ -544,6 +601,11 @@ export default {
     window.removeEventListener("mousedown", this.onComposerOverlayPointer, true);
   },
   methods: {
+    pickWorkspace(workspaceId) {
+      this.workspaceOpen = false;
+      if (!workspaceId || workspaceId === this.state.currentWorkspaceId) return;
+      this.$emit("pick-workspace", workspaceId);
+    },
     chooseModel(model) {
       this.modelOpen = false;
       this.$emit("choose-model", model);
@@ -768,12 +830,21 @@ export default {
   padding: 8px 0 20px;
 }
 .desktop-composer__model-row { display:flex; justify-content:flex-end; gap:2px; min-height:28px; margin-bottom:6px; }
+.desktop-composer[data-hero="true"] .desktop-composer__model-row { justify-content:space-between; }
 .desktop-composer__model,
 .desktop-composer__circle,
 .desktop-composer__send {
   border:0; color:var(--q-ink-2); cursor:pointer;
 }
 .desktop-composer__model { display:flex; align-items:center; gap:4px; border-radius:999px; padding:4px 10px; background:transparent; font-size:14px; }
+/* The model name is the long label of the pair, so it is the one that gives way;
+   without a floor of its own the workspace chip absorbs every pixel of shrink. */
+.desktop-composer__workspace-slot { flex:0 0 auto; max-width:45%; }
+.desktop-composer__model-slot { min-width:0; }
+.desktop-composer__workspace,
+.desktop-composer__model-slot .desktop-composer__model { min-width:0; max-width:100%; }
+.desktop-composer__workspace span,
+.desktop-composer__model-slot .desktop-composer__model span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .desktop-composer__model svg,
 .desktop-composer__permission svg,
 .desktop-composer__circle svg,

package/src/desktop/DesktopPreview.vue

@@ -2,9 +2,16 @@
   <section class="desktop-preview" :aria-label="t('preview')">
     <header class="desktop-preview__bar">
       <span class="desktop-preview__path" :title="path">{{ path }}</span>
+      <a
+        v-if="filesHref"
+        class="desktop-preview__action"
+        :href="filesHref"
+        target="_blank"
+        rel="noopener noreferrer"
+      >{{ t("openInFiles") }}</a>
       <a
         v-if="downloadHref"
-        class="desktop-preview__download"
+        class="desktop-preview__action"
         :href="downloadHref"
         download
       >{{ t("download") }}</a>
@@ -40,6 +47,7 @@ export default {
     error: { type: String, default: "" },
     mediaSrc: { type: String, default: "" },
     downloadHref: { type: String, default: "" },
+    filesHref: { type: String, default: "" },
     hrefFor: { type: Function, default: null },
     t: { type: Function, required: true },
   },
@@ -53,6 +61,6 @@ export default {
 .desktop-preview { position:absolute; z-index:8; display:flex; min-width:0; min-height:0; flex-direction:column; inset:0; padding:12px 20px 20px; background:var(--q-background-1); }
 .desktop-preview__bar { display:flex; min-width:0; flex:none; align-items:center; gap:12px; padding-bottom:10px; }
 .desktop-preview__path { min-width:0; flex:1; overflow:hidden; padding:0 4px; color:var(--q-ink-3); font-size:12px; line-height:18px; text-overflow:ellipsis; white-space:nowrap; }
-.desktop-preview__download { flex:none; color:var(--q-blue-default); font-size:12px; line-height:18px; text-decoration:none; }
+.desktop-preview__action { flex:none; color:var(--q-blue-default); font-size:12px; line-height:18px; text-decoration:none; }
 .desktop-preview__content { display:flex; min-height:0; flex:1; flex-direction:column; overflow:hidden; border:1px solid var(--q-separator); border-radius:14px; background:var(--q-background-2); }
 </style>

package/src/desktop/DesktopShell.vue

@@ -16,7 +16,7 @@
       @archive-session="$emit('archive-session', $event)"
     />
     <main class="desktop-shell__main">
-      <header class="desktop-shell__header">
+      <header v-if="!newSessionHero" class="desktop-shell__header">
         <h1>{{ state.sessionTitle }}</h1>
         <Transition name="lares-tabs">
           <LaresDesktopPreviewTabs
@@ -30,15 +30,21 @@
           />
         </Transition>
       </header>
-      <section class="desktop-shell__conversation">
+      <section class="desktop-shell__conversation" :data-hero="newSessionHero ? 'true' : 'false'">
         <div v-if="state.failed" class="desktop-shell__failure">
           <span>{{ state.failText }}</span>
           <button type="button" :disabled="state.starting" @click="$emit('retry')">{{ t("probe.retry") }}</button>
         </div>
+        <div v-if="newSessionHero" class="desktop-shell__brand">
+          <div class="desktop-shell__logo" :style="logoStyle" aria-hidden="true" />
+          <h1>{{ t("shell.title") }}</h1>
+        </div>
         <LaresTranscript
+          v-if="!newSessionHero"
           ref="transcript"
           :items="state.viewItems"
           :running="state.running"
+          :running-since="state.runningSince"
           :loading="state.historyLoading || state.starting"
           :previews="state.previews"
           :media-url="mediaUrl"
@@ -58,6 +64,7 @@
           ref="composer"
           :state="state"
           :t="t"
+          :hero="newSessionHero"
           :model-key="modelKey"
           :effort-name="effortName"
           @update-draft="$emit('update-draft', $event)"
@@ -67,6 +74,7 @@
           @files="$emit('files', $event)"
           @remove-image="$emit('remove-image', $event)"
           @choose-model="$emit('choose-model', $event)"
+          @pick-workspace="$emit('pick-workspace', $event)"
           @choose-effort="$emit('choose-effort', $event)"
           @choose-permission="$emit('choose-permission', $event)"
           @disable-plan="$emit('disable-plan')"
@@ -88,6 +96,7 @@
             :error="state.preview.error"
             :media-src="state.previewMediaSrc"
             :download-href="state.previewDownloadHref"
+            :files-href="state.previewFilesHref"
             :href-for="previewHref"
             :t="t"
             @retry="$emit('open-file', state.preview.path)"
@@ -115,6 +124,7 @@ import LaresDesktopPreviewTabs from "./DesktopPreviewTabs.vue";
 import LaresDesktopSidebar from "./DesktopSidebar.vue";
 import LaresDesktopComposer from "./DesktopComposer.vue";
 import LaresDirectoryBrowser from "./DirectoryBrowser.vue";
+import { MARK_DATA_URI } from "@olares/lares-core/icons/mark";
 
 export default {
   name: "LaresDesktopShell",
@@ -138,7 +148,7 @@ export default {
     effortName: { type: Function, required: true },
   },
   emits: [
-    "create", "pick-session", "retry", "open-file", "answer", "update-draft",
+    "create", "pick-session", "pick-workspace", "retry", "open-file", "answer", "update-draft",
     "send", "stop", "steer-queue", "files", "remove-image", "choose-model", "choose-effort", "choose-permission", "disable-plan", "goal-action", "answer-approval", "answer-questions",
     "open-commands", "open-references", "pick-command", "queue-action", "show-chat", "close-preview-tab",
     "refresh-workspaces", "browse-workspaces", "browse-directory",
@@ -146,6 +156,20 @@ export default {
     "delete-workspace", "move-workspace", "move-session", "rename-session",
     "fork-session", "archive-session",
   ],
+  computed: {
+    newSessionHero() {
+      if (this.state.previewMode === "preview" && this.state.preview.path) return false;
+      return (
+        this.state.viewItems.length === 0
+        && !this.state.running
+        && !this.state.historyLoading
+        && !this.state.starting
+      );
+    },
+    logoStyle() {
+      return { backgroundImage: MARK_DATA_URI };
+    },
+  },
   methods: {
     focusComposer() {
       this.$refs.composer?.focus?.();
@@ -188,6 +212,10 @@ export default {
 .desktop-shell__header { display:flex; height:44px; flex-shrink:0; align-items:center; gap:16px; padding:0 18px; border-bottom:1px solid var(--q-separator); }
 .desktop-shell__header h1 { max-width:min(280px, 40%); overflow:hidden; margin:0; font-size:15px; font-weight:500; line-height:22px; text-overflow:ellipsis; white-space:nowrap; }
 .desktop-shell__conversation { position:relative; display:flex; min-width:0; min-height:0; flex:1; flex-direction:column; }
+.desktop-shell__conversation[data-hero="true"] { justify-content:center; }
+.desktop-shell__brand { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:36px; }
+.desktop-shell__brand h1 { margin:0; color:var(--q-ink-1); font-size:26px; font-weight:600; line-height:34px; letter-spacing:-.01em; }
+.desktop-shell__logo { width:44px; height:44px; background-position:center; background-repeat:no-repeat; background-size:cover; box-shadow:inset 0 1.5px 0 rgb(255 255 255 / 50%); }
 .desktop-shell__failure { display:flex; width:calc(var(--lares-column) - 2 * var(--lares-gutter)); align-items:center; gap:10px; margin:12px auto 0; color:var(--q-orange-default); font-size:14px; }
 .desktop-shell__failure button { border:0; border-radius:6px; padding:5px 8px; background:var(--q-blue-alpha); color:var(--q-blue-default); }
 /* The scroller stays full width so the wheel works over the gutters; the rows carry the reading column. */