@olares/lares-mobile 0.15.25 → 0.15.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olares/lares-mobile",
-  "version": "0.15.25",
+  "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.25",
+    "@olares/lares-core": "0.15.26",
     "markdown-it": "^14.3.0"
   }
 }

package/src/App.vue

@@ -580,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;
@@ -730,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;
@@ -1351,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;
     },

package/src/mobile/MobileShell.vue

@@ -388,6 +388,7 @@ export default {
 
 .lares-shell__refresh {
   display: flex;
+  flex: none;
   align-items: center;
   justify-content: center;
   width: 100%;

package/src/settings/AgentSettings.vue

@@ -44,35 +44,105 @@
     <section class="lares-agent__group">
       <h2>{{ tVoice("settings.title") }}</h2>
       <div class="lares-agent__list">
-        <LaresSettingRow
-          :label="tVoice('settings.stt.model')"
-          :value="voiceModelLabel"
-          chevron
-          boxed
-          :disabled="Boolean(pending)"
-          @click="openSheet('voiceModel')"
-        />
-        <LaresSettingRow
-          :label="tVoice('settings.language.title')"
-          :value="voiceLangLabel"
-          chevron
-          boxed
-          :disabled="Boolean(pending)"
-          @click="openSheet('voiceLang')"
-        />
+        <template v-if="isDesktop">
+          <label class="lares-agent__field">
+            <span>{{ tVoice('settings.stt.model') }}</span>
+            <LaresSelect
+              :value="voiceModelId"
+              :sections="voiceModelSections"
+              :disabled="busy || !voice"
+              @select="chooseVoiceModel"
+            />
+          </label>
+          <label class="lares-agent__field">
+            <span>{{ tVoice('settings.language.title') }}</span>
+            <LaresSelect
+              :value="voiceLangId"
+              :sections="voiceLanguageSections"
+              :disabled="busy || !voice"
+              @select="chooseVoiceLanguage"
+            />
+          </label>
+        </template>
+        <template v-else>
+          <LaresSettingRow
+            :label="tVoice('settings.stt.model')"
+            :value="voiceModelLabel"
+            chevron
+            boxed
+            :disabled="Boolean(pending)"
+            @click="openSheet('voiceModel')"
+          />
+          <LaresSettingRow
+            :label="tVoice('settings.language.title')"
+            :value="voiceLangLabel"
+            chevron
+            boxed
+            :disabled="Boolean(pending)"
+            @click="openSheet('voiceLang')"
+          />
+        </template>
       </div>
       <VoicePreferences :key="hostKey" ref="voicePreferences" :settings="settings" :tts-fetch="ttsFetch" :snapshot="voice" :device="device" :t="tVoice" :bind-before-leave="bindBeforeLeave" @change="voice = $event" />
-      <label class="lares-agent__hint">{{ tVoice('settings.mobileMode') }}
-        <select :value="voice?.config?.mobileMode || 'continuous'" @change="patchVoice('mobileMode', $event.target.value)">
-          <option value="single">{{ tVoice('settings.mode.single') }}</option>
-          <option value="continuous">{{ tVoice('settings.mode.continuous') }}</option>
-        </select>
-      </label>
-      <label class="lares-agent__hint">{{ tVoice('settings.device') }}
-        <select :value="voice?.config?.device || 'auto'" @change="patchVoice('device', $event.target.value)">
-          <option v-for="device in ['auto', 'device', 'headset']" :key="device" :value="device">{{ tVoice(`settings.device.${device}`) }}</option>
-        </select>
-      </label>
+      <h3>{{ tVoice("settings.conversation") }}</h3>
+      <div class="lares-agent__list">
+        <template v-if="isDesktop">
+          <label class="lares-agent__field">
+            <span>{{ tVoice('settings.mobileMode') }}</span>
+            <LaresSelect
+              :value="voice?.config?.mobileMode || 'continuous'"
+              :sections="mobileModeSections"
+              :disabled="busy || !voice"
+              @select="(item) => patchVoice('mobileMode', item.id)"
+            />
+          </label>
+          <label class="lares-agent__field">
+            <span>{{ tVoice('settings.device') }}</span>
+            <LaresSelect
+              :value="voice?.config?.device || 'auto'"
+              :sections="deviceSections"
+              :disabled="busy || !voice"
+              @select="(item) => patchVoice('device', item.id)"
+            />
+          </label>
+          <label class="lares-agent__field">
+            <span>{{ tVoice('settings.mode.title') }}</span>
+            <LaresSelect
+              :value="voice?.config?.streaming ? 'streaming' : 'turns'"
+              :sections="readingSections"
+              :disabled="busy || !voice || !reading"
+              @select="(item) => chooseReading(item.id)"
+            />
+          </label>
+        </template>
+        <template v-else>
+          <LaresSettingRow
+            :label="tVoice('settings.mobileMode')"
+            :value="voiceChoiceLabel('mobileMode')"
+            chevron
+            boxed
+            :disabled="Boolean(pending) || !voice"
+            @click="openSheet('voiceMobileMode')"
+          />
+          <LaresSettingRow
+            :label="tVoice('settings.device')"
+            :value="voiceChoiceLabel('device')"
+            chevron
+            boxed
+            :disabled="Boolean(pending) || !voice"
+            @click="openSheet('voiceDevice')"
+          />
+          <LaresSettingRow
+            :label="tVoice('settings.mode.title')"
+            :value="voiceChoiceLabel('reading')"
+            chevron
+            boxed
+            :disabled="Boolean(pending) || !voice || !reading"
+            @click="openSheet('voiceReading')"
+          />
+        </template>
+      </div>
+      <p class="lares-agent__hint">{{ readingHint }}</p>
       <p v-if="voiceError" class="lares-agent__hint" data-status="error">{{ voiceError }}</p>
       <VoiceKeys :key="`keys-${hostKey}`" :client="voiceKeys" :t="tVoice" />
     </section>
@@ -106,7 +176,7 @@
           :key="item.id"
           :label="item.label"
           :checked="item.id === sheetCurrent"
-          :disabled="busy"
+          :disabled="busy || item.disabled"
           @click="pick(item)"
         />
       </template>
@@ -182,6 +252,7 @@ export default {
       voiceError: "",
       searchError: "",
       conversationError: "",
+      reading: null,
     };
   },
   computed: {
@@ -247,13 +318,31 @@ export default {
       }
       return this.models.default?.model || "—";
     },
+    voiceModelId() {
+      return voiceMenuValue(this.voice?.config?.model);
+    },
+    voiceLangId() {
+      return voiceMenuValue(this.voice?.config?.language);
+    },
+    voiceModelSections() {
+      return [{ items: this.voiceModels }];
+    },
+    voiceLanguageSections() {
+      return [{ items: this.voiceLanguages }];
+    },
     voiceModelLabel() {
       if (!this.voice) return "—";
-      return itemLabel(this.voiceModels, voiceMenuValue(this.voice.config?.model));
+      return itemLabel(this.voiceModels, this.voiceModelId);
     },
     voiceLangLabel() {
       if (!this.voice) return "—";
-      return itemLabel(this.voiceLanguages, voiceMenuValue(this.voice.config?.language));
+      return itemLabel(this.voiceLanguages, this.voiceLangId);
+    },
+    readingHint() {
+      if (this.reading && !this.reading.allowed) return this.tVoice("settings.mode.hint");
+      const type = this.reading?.gpu?.type;
+      if (type) return this.tVoice("settings.mode.gpu", { type: this.tVoice(`settings.gpu.${type}`) });
+      return this.tVoice("settings.mode.hint");
     },
     searchMenuId() {
       return searchMenuValue(this.search);
@@ -283,10 +372,27 @@ export default {
         ],
       }];
     },
+    mobileModeSections() {
+      return [{ items: ["single", "continuous"].map((id) => ({ id, label: this.tVoice(`settings.mode.${id}`) })) }];
+    },
+    deviceSections() {
+      return [{ items: ["auto", "device", "headset"].map((id) => ({ id, label: this.tVoice(`settings.device.${id}`) })) }];
+    },
+    readingSections() {
+      return [{
+        items: [
+          { id: "turns", label: this.tVoice("settings.mode.turns") },
+          { id: "streaming", label: this.tVoice("settings.mode.streaming"), disabled: !this.reading?.allowed },
+        ],
+      }];
+    },
     sheetTitle() {
       if (this.panel === "model") return this.tModel("settings.title");
       if (this.panel === "voiceModel") return this.tVoice("settings.stt.model");
       if (this.panel === "voiceLang") return this.tVoice("settings.language.title");
+      if (this.panel === "voiceMobileMode") return this.tVoice("settings.mobileMode");
+      if (this.panel === "voiceDevice") return this.tVoice("settings.device");
+      if (this.panel === "voiceReading") return this.tVoice("settings.mode.title");
       if (this.panel === "search") return this.tSearch("settings.default");
       return "";
     },
@@ -301,6 +407,9 @@ export default {
       if (this.panel === "voiceLang") {
         return [{ items: this.voiceLanguages.map((item) => ({ id: item.id, label: item.label })) }];
       }
+      if (this.panel === "voiceMobileMode") return this.mobileModeSections;
+      if (this.panel === "voiceDevice") return this.deviceSections;
+      if (this.panel === "voiceReading") return this.readingSections;
       if (this.panel === "search") return this.searchSelectSections;
       return [];
     },
@@ -360,7 +469,16 @@ export default {
       if (!ready) return;
       this.panel = panel;
     },
+    chooseVoiceModel(item) { return this.patchVoice("model", voiceValueFromMenu(item.id)); },
+    chooseVoiceLanguage(item) { return this.patchVoice("language", voiceValueFromMenu(item.id)); },
+    voiceChoiceLabel(kind) {
+      if (!this.voice) return "—";
+      if (kind === "mobileMode") return this.tVoice(`settings.mode.${this.voice.config?.mobileMode || "continuous"}`);
+      if (kind === "device") return this.tVoice(`settings.device.${this.voice.config?.device || "auto"}`);
+      return this.tVoice(`settings.mode.${this.voice.config?.streaming ? "streaming" : "turns"}`);
+    },
     async pick(item, panel = this.panel) {
+      if (item.disabled) return;
       if (item.id === this.sheetCurrentFor(panel)) {
         this.panel = "";
         return;
@@ -369,12 +487,18 @@ export default {
       if (panel === "model") await this.chooseModel(item.model);
       if (panel === "voiceModel") await this.patchVoice("model", voiceValueFromMenu(item.id));
       if (panel === "voiceLang") await this.patchVoice("language", voiceValueFromMenu(item.id));
+      if (panel === "voiceMobileMode") await this.patchVoice("mobileMode", item.id);
+      if (panel === "voiceDevice") await this.patchVoice("device", item.id);
+      if (panel === "voiceReading") this.chooseReading(item.id);
       if (panel === "search") await this.chooseSearch(item.id);
     },
     sheetCurrentFor(panel) {
       if (panel === "model") return this.modelCurrent;
       if (panel === "voiceModel") return voiceMenuValue(this.voice?.config?.model);
       if (panel === "voiceLang") return voiceMenuValue(this.voice?.config?.language);
+      if (panel === "voiceMobileMode") return this.voice?.config?.mobileMode || "continuous";
+      if (panel === "voiceDevice") return this.voice?.config?.device || "auto";
+      if (panel === "voiceReading") return this.voice?.config?.streaming ? "streaming" : "turns";
       if (panel === "search") return searchMenuValue(this.search);
       return "";
     },
@@ -390,7 +514,10 @@ export default {
         this.voice = remembered.voice ?? this.voice;
         this.search = remembered.search ?? this.search;
         this.conversation = remembered.conversation ?? this.conversation;
-        if (this.models && this.voice && this.search && this.conversation) return;
+        if (this.models && this.voice && this.search && this.conversation) {
+          void this.loadReading();
+          return;
+        }
       }
       this.panel = "";
       this.loading = true;
@@ -413,6 +540,21 @@ export default {
       if (conversation.status === "fulfilled") this.conversation = conversation.value;
       else this.conversationError = conversation.reason instanceof Error ? conversation.reason.message : String(conversation.reason);
       this.loading = false;
+      void this.loadReading();
+    },
+    async loadReading() {
+      try {
+        this.reading = await this.settings.readingMode();
+      } catch {
+        this.reading = { streaming: false, allowed: false, gpu: null };
+      }
+    },
+    chooseReading(value) {
+      if (value === "streaming" && !this.reading?.allowed) {
+        this.voiceError = this.tVoice("error.voice_streaming_time_slice");
+        return;
+      }
+      void this.patchVoice("streaming", value === "streaming");
     },
     async chooseModel(model) {
       const selection = { provider: model.provider, model: model.id };
@@ -434,8 +576,10 @@ export default {
       this.voiceError = "";
       try {
         this.voice = await this.$refs.voicePreferences.patch({ [key]: value });
-      } catch {
-        this.voiceError = this.tVoice("settings.saveFailed");
+      } catch (err) {
+        const code = err?.code;
+        const text = code ? this.tVoice(`error.${code}`) : "";
+        this.voiceError = text && text !== `error.${code}` ? text : this.tVoice("settings.saveFailed");
       } finally {
         this.pending = "";
       }
@@ -547,22 +691,45 @@ export default {
   gap: 8px;
 }
 
-.lares-agent__group h2 {
+.lares-agent__group h2,
+.lares-agent__group h3 {
   margin: 0;
-  font-size: 18px;
   font-weight: 500;
+  color: var(--q-ink-1);
+}
+
+.lares-agent__group h2 {
+  font-size: 18px;
   line-height: 24px;
 }
 
+.lares-agent__group h3 {
+  margin-top: 8px;
+  color: var(--q-ink-3);
+  font-size: 14px;
+  line-height: 18px;
+}
+
 .lares-agent__list {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
+.lares-agent__field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  color: var(--q-ink-1);
+  font-size: 15px;
+  line-height: 22px;
+}
+
 .lares-agent__hint {
   margin: 0;
   font-size: 15px;
+  line-height: 22px;
   color: var(--q-ink-3);
 }
 

package/src/settings/Select.vue

@@ -27,7 +27,7 @@
             class="lares-select__option"
             role="option"
             :aria-selected="item.id === value"
-            :disabled="disabled"
+            :disabled="disabled || item.disabled"
             @click="choose(item)"
           >
             <span>{{ item.label }}</span>
@@ -75,6 +75,7 @@ export default {
   },
   methods: {
     choose(item) {
+      if (this.disabled || item.disabled) return;
       this.open = false;
       this.$emit("select", item);
     },
@@ -177,6 +178,11 @@ export default {
   background: var(--q-background-hover);
 }
 
+.lares-select__option:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
 .lares-select__option[aria-selected="true"] span {
   color: var(--q-blue-default);
 }

package/src/settings/Sheet.vue

@@ -145,7 +145,7 @@ export default {
 .lares-sheet__foot {
   flex-shrink: 0;
   padding: 0 0 env(safe-area-inset-bottom, 0px);
-  background: var(--q-yellow-default);
+  background: var(--q-background-1);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/settings/TtsSettings.vue

@@ -1,32 +1,64 @@
 <template>
-  <section class="lares-tts-settings">
+  <section class="lares-tts">
     <h3>{{ t('settings.tts.title') }}</h3>
-    <label>{{ t('settings.tts.model') }}
-      <select :value="view.value.config.ttsModel || ''" :disabled="state.saving" @change="save(controller.selectModel($event.target.value))">
-        <option value="">{{ t('settings.model.auto') }}</option>
-        <option v-for="id in models" :key="id" :value="id">{{ id }}</option>
-      </select>
+    <label v-if="isDesktop" class="lares-tts__field">
+      <span>{{ t('settings.tts.model') }}</span>
+      <LaresSelect :value="modelId" :sections="modelSections" :disabled="state.saving" @select="chooseModel" />
     </label>
-    <p v-if="view.errors.ttsModel" role="alert">{{ t('settings.saveFailed') }}</p>
-    <p v-if="!state.model">{{ t('preferences.modelsMissing') }}</p>
-    <p v-else-if="state.loading" role="status">{{ t('tts.loading') }}</p>
-    <p v-else-if="state.error" role="alert">{{ t('tts.loadFailed') }} <button type="button" @click="controller.load()">{{ t('dictation.retry') }}</button></p>
-    <label v-else-if="state.voices.length || state.unavailable">{{ t('tts.voice') }}
-      <select :value="state.selected" :disabled="state.saving" @change="save(controller.selectVoice($event.target.value))">
-        <option value="">{{ t('tts.default') }}</option>
-        <option v-if="state.unavailable" :value="state.selected" disabled>{{ state.selected }} · {{ t('preferences.unavailable') }}</option>
-        <option v-for="voice in state.voices" :key="voice.id" :value="voice.id">{{ voice.label }}</option>
-      </select>
-    </label>
-    <p v-else>{{ t('tts.noPresets') }}</p>
-    <p v-if="view.errors.ttsVoiceByModel" role="alert">{{ t('settings.saveFailed') }}</p>
-    <div class="lares-tts-settings__preview">
-      <button type="button" :disabled="!state.model || state.loading || Boolean(state.error) || state.saving || state.unavailable || state.blocked" @click="controller.audition()">{{ t(state.playing ? 'tts.stopPreview' : 'tts.preview') }}</button>
-      <p role="status">{{ t(state.blocked ? 'tts.busy' : 'tts.previewHint') }}</p>
+    <LaresSettingRow
+      v-else
+      :label="t('settings.tts.model')"
+      :value="modelLabel"
+      chevron
+      boxed
+      :disabled="state.saving"
+      @click="sheet = 'model'"
+    />
+    <p v-if="view.errors.ttsModel" class="lares-tts__alert" role="alert">{{ t('settings.saveFailed') }}</p>
+    <p v-if="!state.model" class="lares-tts__hint">{{ t('preferences.modelsMissing') }}</p>
+    <p v-else-if="state.loading" class="lares-tts__hint" role="status">{{ t('tts.loading') }}</p>
+    <div v-else-if="state.error" class="lares-tts__status" role="alert">
+      <p>{{ t('tts.loadFailed') }}</p>
+      <button type="button" @click="controller.load()">{{ t('dictation.retry') }}</button>
+    </div>
+    <template v-else-if="state.voices.length || state.unavailable">
+      <label v-if="isDesktop" class="lares-tts__field">
+        <span>{{ t('tts.voice') }}</span>
+        <LaresSelect :value="voiceId" :sections="voiceSections" :disabled="state.saving" @select="chooseVoice" />
+      </label>
+      <LaresSettingRow
+        v-else
+        :label="t('tts.voice')"
+        :value="voiceLabel"
+        chevron
+        boxed
+        :disabled="state.saving"
+        @click="sheet = 'voice'"
+      />
+    </template>
+    <p v-else class="lares-tts__hint">{{ t('tts.noPresets') }}</p>
+    <p v-if="view.errors.ttsVoiceByModel" class="lares-tts__alert" role="alert">{{ t('settings.saveFailed') }}</p>
+    <div class="lares-tts__action">
+      <p class="lares-tts__hint">{{ t(state.blocked ? 'tts.busy' : 'tts.previewHint') }}</p>
+      <button type="button" :disabled="previewDisabled" @click="controller.audition()">{{ t(state.playing ? 'tts.stopPreview' : 'tts.preview') }}</button>
     </div>
-    <p v-if="state.previewError" role="alert">{{ t('tts.previewFailed') }}</p>
-    <label class="lares-tts-settings__speak"><input type="checkbox" :checked="view.value.config.speak === true" :disabled="Boolean(view.pending.speak)" @change="save(preferences.patch({ speak: $event.target.checked }))" />{{ t('settings.speak.title') }}</label>
-    <p v-if="view.errors.speak" role="alert">{{ t('settings.saveFailed') }}</p>
+    <p v-if="state.previewError" class="lares-tts__alert" role="alert">{{ t('tts.previewFailed') }}</p>
+    <label class="lares-tts__switch">
+      <span>{{ t('settings.speak.title') }}</span>
+      <input type="checkbox" role="switch" :checked="view.value.config.speak === true" :disabled="Boolean(view.pending.speak)" :aria-checked="view.value.config.speak === true ? 'true' : 'false'" @change="save(preferences.patch({ speak: $event.target.checked }))" />
+    </label>
+    <p class="lares-tts__hint">{{ t('settings.tts.hint') }}</p>
+    <p v-if="view.errors.speak" class="lares-tts__alert" role="alert">{{ t('settings.saveFailed') }}</p>
+    <LaresSheet v-if="!isDesktop" :open="Boolean(sheet)" :title="sheetTitle" @close="sheet = ''">
+      <LaresSettingRow
+        v-for="item in sheetItems"
+        :key="item.id || 'auto'"
+        :label="item.label"
+        :checked="item.id === sheetCurrent"
+        :disabled="state.saving || item.disabled"
+        @click="chooseSheet(item)"
+      />
+    </LaresSheet>
   </section>
 </template>
 <script>
@@ -34,27 +66,216 @@ import { markRaw } from "vue";
 import { createTtsSettings } from "@olares/lares-core/voice/tts-settings";
 import { fetchTtsVoices } from "@olares/lares-core/voice/tts-voice";
 import { previewTts } from "@olares/lares-core/voice/tts-preview";
+import LaresSettingRow from "./SettingRow.vue";
+import LaresSelect from "./Select.vue";
+import LaresSheet from "./Sheet.vue";
 export default {
-  props: { preferences: { type: Object, required: true }, view: { type: Object, required: true }, t: { type: Function, required: true }, fetcher: { type: Function, required: true } },
+  components: { LaresSettingRow, LaresSelect, LaresSheet },
+  props: { preferences: { type: Object, required: true }, view: { type: Object, required: true }, t: { type: Function, required: true }, fetcher: { type: Function, required: true }, device: { type: String, default: "mobile" } },
   data() {
     const controller = markRaw(createTtsSettings({ preferences: this.preferences, list: (model, options) => fetchTtsVoices(model, { ...options, fetcher: this.fetcher }), preview: take => previewTts(take, { fetcher: this.fetcher }) }));
-    return { controller, state: controller.getSnapshot() };
+    return { controller, state: controller.getSnapshot(), sheet: "" };
+  },
+  computed: {
+    isDesktop() { return this.device === "desktop"; },
+    models() { return [...new Set([this.view.value.config.ttsModel, ...(this.view.value.ttsModels || [])].filter(Boolean))]; },
+    modelId() { return this.view.value.config.ttsModel || ""; },
+    modelLabel() { return this.modelId ? this.modelId : this.t("settings.model.auto"); },
+    modelSections() { return [{ items: [{ id: "", label: this.t("settings.model.auto") }, ...this.models.map(id => ({ id, label: id }))] }]; },
+    voiceId() { return this.state.selected || ""; },
+    voiceItems() {
+      return [
+        { id: "", label: this.t("tts.default") },
+        ...(this.state.unavailable && this.state.selected ? [{ id: this.state.selected, label: `${this.state.selected} · ${this.t("preferences.unavailable")}`, disabled: true }] : []),
+        ...this.state.voices.map(voice => ({ id: voice.id, label: voice.label })),
+      ];
+    },
+    voiceSections() { return [{ items: this.voiceItems }]; },
+    voiceLabel() { return this.voiceItems.find(item => item.id === this.voiceId)?.label || this.t("tts.default"); },
+    previewDisabled() { return !this.state.model || this.state.loading || Boolean(this.state.error) || this.state.saving || this.state.unavailable || this.state.blocked; },
+    sheetTitle() { return this.t(this.sheet === "voice" ? "tts.voice" : "settings.tts.model"); },
+    sheetItems() { return this.sheet === "voice" ? this.voiceItems : this.modelSections[0].items; },
+    sheetCurrent() { return this.sheet === "voice" ? this.voiceId : this.modelId; },
   },
-  computed: { models() { return [...new Set([this.view.value.config.ttsModel, ...(this.view.value.ttsModels || [])].filter(Boolean))]; } },
   mounted() { this.off = this.controller.subscribe(() => { this.state = this.controller.getSnapshot(); }); void this.controller.load(); },
   beforeUnmount() { this.off?.(); this.controller.dispose(); },
-  methods: { save(operation) { void operation.catch(() => {}); } },
+  methods: {
+    save(operation) { void operation.catch(() => {}); },
+    chooseModel(item) { this.save(this.controller.selectModel(item.id)); },
+    chooseVoice(item) { if (!item.disabled) this.save(this.controller.selectVoice(item.id)); },
+    chooseSheet(item) {
+      if (item.disabled || this.state.saving) return;
+      const sheet = this.sheet;
+      this.sheet = "";
+      if (item.id === (sheet === "voice" ? this.voiceId : this.modelId)) return;
+      if (sheet === "voice") this.chooseVoice(item);
+      else this.chooseModel(item);
+    },
+  },
 };
 </script>
 <style scoped>
-.lares-tts-settings { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
-.lares-tts-settings label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
-.lares-tts-settings select { width: 100%; min-width: 0; max-width: 100%; font: inherit; color: inherit; border: 1px solid var(--q-separator); border-radius: 8px; background: var(--q-background-2, transparent); padding: 10px; }
-.lares-tts-settings button:disabled { opacity: .45; cursor: default; }
-.lares-tts-settings button:focus-visible, .lares-tts-settings select:focus-visible { outline: 2px solid var(--q-blue-default, #3978f6); outline-offset: 2px; }
-.lares-tts-settings button { font: inherit; color: inherit; border: 1px solid var(--q-separator); border-radius: 8px; background: transparent; padding: 8px 14px; }
-.lares-tts-settings p { margin: 0; font-size: 13px; color: var(--q-ink-3); }
-.lares-tts-settings [role="alert"] { color: var(--q-orange-default); }
-.lares-tts-settings label.lares-tts-settings__speak { flex-direction: row; align-items: center; }
-.lares-tts-settings__preview { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
+.lares-tts {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  color: var(--q-ink-1);
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-tts h3 {
+  margin: 4px 0 0;
+  color: var(--q-ink-3);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.lares-tts__field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.lares-tts__hint {
+  margin: 0;
+  color: var(--q-ink-3);
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-tts__alert {
+  margin: 0;
+  color: var(--q-orange-default);
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-tts__status {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 44px;
+}
+
+.lares-tts__status p {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  color: var(--q-orange-default);
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-tts__status > button,
+.lares-tts__action > button {
+  flex: none;
+  min-height: 36px;
+  border: 0;
+  border-radius: 12px;
+  padding: 0 14px;
+  background: var(--q-blue-alpha);
+  color: var(--q-blue-default);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+.lares-tts__status > button:disabled,
+.lares-tts__action > button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.lares-tts__status > button:focus-visible,
+.lares-tts__action > button:focus-visible {
+  outline: 2px solid var(--q-blue-default);
+  outline-offset: 2px;
+}
+
+.lares-tts__action,
+.lares-tts__switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 64px;
+  box-sizing: border-box;
+  border: 1px solid var(--q-separator);
+  border-radius: 20px;
+  padding: 12px 16px;
+}
+
+.lares-tts__action .lares-tts__hint {
+  flex: 1;
+  min-width: 0;
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-tts__switch > span {
+  flex: 1;
+  min-width: 0;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.lares-tts__switch {
+  cursor: pointer;
+}
+
+.lares-tts__switch input {
+  position: relative;
+  flex: none;
+  width: 44px;
+  height: 26px;
+  margin: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--q-background-3);
+  appearance: none;
+  cursor: pointer;
+}
+
+.lares-tts__switch input::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--q-ink-1);
+  transition: transform var(--lares-duration-fast, 160ms) var(--lares-ease-out, ease);
+}
+
+.lares-tts__switch input:checked {
+  background: var(--q-blue-default);
+}
+
+.lares-tts__switch input:checked::after {
+  background: var(--q-ink-on-brand);
+  transform: translateX(18px);
+}
+
+.lares-tts__switch input:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.lares-tts__switch input:focus-visible {
+  outline: 2px solid var(--q-blue-default);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lares-tts__switch input::after {
+    transition: none;
+  }
+}
 </style>

package/src/settings/VoiceKeys.vue

@@ -1,34 +1,42 @@
 <template>
   <section class="lares-voice-keys">
     <h3>{{ t('settings.group.keys') }}</h3>
-    <p class="lares-agent__hint">{{ t('settings.keys.hint') }}</p>
+    <p>{{ 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>
+        <span class="lares-voice-keys__name">{{ 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') }}
+    <p v-else-if="keys">{{ t('settings.keys.empty') }}</p>
+    <label class="lares-voice-keys__field">
+      <span>{{ t('settings.keys.name') }}</span>
       <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">
+    <div class="lares-voice-keys__models" role="group" :aria-label="t('settings.keys.models')">
+      <p>{{ t('settings.keys.models') }}</p>
+      <label v-for="model in allModels" :key="model">
+        <input type="checkbox" :checked="models.includes(model)" :disabled="busy" @change="toggle(model)" />
+        <span>{{ model }}</span>
+      </label>
+    </div>
+    <p v-if="agentSelected" role="note">{{ t('settings.keys.agentWarning') }}</p>
+    <button type="button" class="lares-voice-keys__issue" :disabled="busy || !name.trim() || !models.length" @click="issue">{{ t(busy ? 'settings.keys.issuing' : 'settings.keys.issue') }}</button>
+    <p v-if="error" role="alert">{{ error }}</p>
+    <div v-if="issued" class="lares-voice-keys__dialog" 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 class="lares-voice-keys__actions">
+        <button type="button" @click="copy">{{ t(copied ? 'settings.keys.copied' : 'settings.keys.copy') }}</button>
+        <button type="button" class="is-primary" @click="issued = null">{{ t('settings.keys.done') }}</button>
+      </div>
     </div>
-    <div v-if="revoking" class="lares-voice-keys__confirm" role="dialog">
+    <div v-if="revoking" class="lares-voice-keys__dialog" 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 class="lares-voice-keys__actions">
+        <button type="button" :disabled="busy" @click="revoke">{{ t('settings.keys.revoke') }}</button>
+        <button type="button" @click="revoking = null">{{ t('settings.keys.done') }}</button>
+      </div>
     </div>
   </section>
 </template>
@@ -64,11 +72,196 @@ export default {
 };
 </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); }
+.lares-voice-keys {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  margin-top: 8px;
+  color: var(--q-ink-1);
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-voice-keys h3 {
+  margin: 4px 0 0;
+  color: var(--q-ink-3);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.lares-voice-keys p {
+  margin: 0;
+  color: var(--q-ink-3);
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-voice-keys [role="alert"],
+.lares-voice-keys [role="note"] {
+  color: var(--q-orange-default);
+}
+
+.lares-voice-keys__list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.lares-voice-keys__list li,
+.lares-voice-keys__dialog {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 64px;
+  box-sizing: border-box;
+  border: 1px solid var(--q-separator);
+  border-radius: 20px;
+  padding: 12px 16px;
+}
+
+.lares-voice-keys__name {
+  min-width: 0;
+  flex: 1;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.lares-voice-keys__name small {
+  display: block;
+  overflow: hidden;
+  color: var(--q-ink-3);
+  font-size: 13px;
+  line-height: 18px;
+  text-overflow: ellipsis;
+}
+
+.lares-voice-keys__field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.lares-voice-keys__field span,
+.lares-voice-keys__models > p {
+  color: var(--q-ink-2);
+}
+
+.lares-voice-keys input[type="text"] {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 48px;
+  border: 1px solid var(--q-separator);
+  border-radius: 16px;
+  padding: 0 16px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 16px;
+}
+
+.lares-voice-keys input[type="text"]:focus-visible {
+  outline: 2px solid var(--q-blue-default);
+  outline-offset: 2px;
+}
+
+.lares-voice-keys__models {
+  overflow: hidden;
+  border: 1px solid var(--q-separator);
+  border-radius: 20px;
+}
+
+.lares-voice-keys__models > p {
+  margin: 0;
+  padding: 12px 16px 4px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.lares-voice-keys__models label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 48px;
+  padding: 0 16px;
+  border-top: 1px solid var(--q-separator);
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.lares-voice-keys__models input {
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  accent-color: var(--q-blue-default);
+}
+
+.lares-voice-keys button {
+  flex: none;
+  min-height: 36px;
+  border: 1px solid var(--q-separator);
+  border-radius: 12px;
+  padding: 0 14px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.lares-voice-keys button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.lares-voice-keys button:focus-visible {
+  outline: 2px solid var(--q-blue-default);
+  outline-offset: 2px;
+}
+
+.lares-voice-keys__issue,
+.lares-voice-keys button.is-primary {
+  border: 0;
+  background: var(--q-blue-alpha);
+  color: var(--q-blue-default);
+  font-weight: 500;
+}
+
+.lares-voice-keys__issue {
+  min-height: 48px;
+  border-radius: 16px;
+  font-size: 16px;
+}
+
+.lares-voice-keys__dialog {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.lares-voice-keys__dialog p {
+  color: var(--q-ink-1);
+}
+
+.lares-voice-keys code {
+  overflow-wrap: anywhere;
+  border-radius: 12px;
+  padding: 12px;
+  background: var(--q-background-3);
+  font-size: 13px;
+  line-height: 18px;
+  user-select: all;
+}
+
+.lares-voice-keys__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
 </style>

package/src/settings/VoicePreferences.vue

@@ -1,32 +1,48 @@
 <template>
   <div v-if="view.value" class="lares-voice-preferences">
-    <label>{{ t('preferences.dictationStyle') }}
-      <select :value="view.value.config.dictationPreset" :disabled="guardView.selecting || Boolean(view.pending.dictationPreset)" @change="selectPreset($event)">
-        <option v-for="id in presets" :key="id" :value="id">{{ t(`dictation.${id}`) }}</option>
-      </select>
+    <label v-if="device === 'desktop'" class="lares-voice-preferences__field">
+      <span>{{ t('preferences.dictationStyle') }}</span>
+      <LaresSelect :value="view.value.config.dictationPreset" :sections="presetSections" :disabled="guardView.selecting || Boolean(view.pending.dictationPreset)" @select="choosePreset" />
     </label>
+    <LaresSettingRow
+      v-else
+      :label="t('preferences.dictationStyle')"
+      :value="t(`dictation.${view.value.config.dictationPreset}`)"
+      chevron
+      boxed
+      :disabled="guardView.selecting || Boolean(view.pending.dictationPreset)"
+      @click="sheet = 'preset'"
+    />
     <p v-if="view.errors.dictationPreset" role="alert">{{ t('settings.saveFailed') }}</p>
     <p v-if="view.value.config.dictationPreset === 'raw'">{{ t('dictation.noLlm') }}</p>
     <div v-else class="lares-voice-preferences__editor">
-      <label>{{ t('dictation.model') }}
-        <select :value="profile.model" :disabled="profilePending" @change="preferences.edit(view.value.config.dictationPreset, { model: $event.target.value })">
-          <option value="">{{ t('settings.model.none') }}</option>
-          <option v-for="item in models" :key="item.id" :value="item.id" :disabled="item.disabled">{{ item.label }}</option>
-        </select>
+      <label v-if="device === 'desktop'" class="lares-voice-preferences__field">
+        <span>{{ t('dictation.model') }}</span>
+        <LaresSelect :value="profile.model" :sections="modelSections" :disabled="profilePending" @select="chooseModel" />
       </label>
-      <label>{{ t('dictation.instructions') }}
+      <LaresSettingRow
+        v-else
+        :label="t('dictation.model')"
+        :value="modelLabel"
+        chevron
+        boxed
+        :disabled="profilePending"
+        @click="sheet = 'model'"
+      />
+      <label class="lares-voice-preferences__field">
+        <span>{{ t('dictation.instructions') }}</span>
         <textarea ref="instructions" :value="profile.instructions" :disabled="profilePending" rows="6" maxlength="8000" @input="preferences.edit(view.value.config.dictationPreset, { instructions: $event.target.value })" />
       </label>
       <div class="lares-voice-preferences__actions">
         <button type="button" :disabled="profilePending" @click="preferences.restore(view.value.config.dictationPreset)">{{ t('dictation.reset') }}</button>
         <template v-if="preferences.dirty(view.value.config.dictationPreset)">
           <button type="button" :disabled="profilePending" @click="preferences.discard([view.value.config.dictationPreset])">{{ t('preferences.cancel') }}</button>
-          <button type="button" :disabled="profilePending" @click="saveProfile">{{ t(profilePending ? 'preferences.saving' : 'preferences.save') }}</button>
+          <button type="button" class="is-primary" :disabled="profilePending" @click="saveProfile">{{ t(profilePending ? 'preferences.saving' : 'preferences.save') }}</button>
         </template>
       </div>
       <p v-if="view.errors[`profile:${view.value.config.dictationPreset}`]" role="alert">{{ t('settings.saveFailed') }}</p>
     </div>
-    <TtsSettings :preferences="preferences" :view="view" :t="t" :fetcher="ttsFetch" />
+    <TtsSettings :preferences="preferences" :view="view" :t="t" :fetcher="ttsFetch" :device="device" />
     <section v-if="device === 'desktop'" class="lares-voice-preferences__shortcuts">
       <h3>{{ t('preferences.shortcuts') }}</h3>
       <p>{{ t('preferences.shortcutScope') }}</p>
@@ -50,9 +66,19 @@
         <p v-if="guardView.error" role="alert">{{ t('settings.saveFailed') }}</p>
         <button type="button" :disabled="guardView.saving" @click="guard.answer('continue')">{{ t('preferences.continue') }}</button>
         <button type="button" :disabled="guardView.saving" @click="guard.answer('discard')">{{ t('preferences.discard') }}</button>
-        <button type="button" :disabled="guardView.saving" @click="guard.answer('save')">{{ t(guardView.saving ? 'preferences.saving' : 'preferences.save') }}</button>
+        <button type="button" class="is-primary" :disabled="guardView.saving" @click="guard.answer('save')">{{ t(guardView.saving ? 'preferences.saving' : 'preferences.save') }}</button>
       </div>
     </LaresSheet>
+    <LaresSheet v-if="device !== 'desktop'" :open="Boolean(sheet)" :title="sheetTitle" @close="sheet = ''">
+      <LaresSettingRow
+        v-for="item in sheetItems"
+        :key="item.id || 'none'"
+        :label="item.label"
+        :checked="item.id === sheetCurrent"
+        :disabled="item.disabled || (sheet === 'preset' ? guardView.selecting : profilePending)"
+        @click="chooseSheet(item)"
+      />
+    </LaresSheet>
   </div>
   <p v-else role="status">{{ t(view.loadError ? 'settings.loadFailed' : 'settings.loading') }}</p>
 </template>
@@ -63,10 +89,12 @@ import { createVoicePreferences, createPreferencesGuard } from "@olares/lares-co
 import { createVoiceShortcutRecorder, formatVoiceShortcut } from "@olares/lares-core/voice/shortcuts";
 import { DICTATION_PRESETS } from "@olares/lares-core/voice/dictation";
 import LaresSheet from "./Sheet.vue";
+import LaresSettingRow from "./SettingRow.vue";
+import LaresSelect from "./Select.vue";
 import TtsSettings from "./TtsSettings.vue";
 
 export default {
-  components: { LaresSheet, TtsSettings },
+  components: { LaresSheet, LaresSettingRow, LaresSelect, TtsSettings },
   props: { ttsFetch: { type: Function, required: true }, settings: { type: Object, required: true }, snapshot: { type: Object, default: null }, device: { type: String, default: "mobile" }, t: { type: Function, required: true }, bindBeforeLeave: { type: Function, default: undefined } },
   expose: ["beforeLeave", "reload", "patch"],
   emits: ["change"],
@@ -76,10 +104,16 @@ export default {
     if (this.snapshot) preferences.accept(toRaw(this.snapshot));
     const guard = markRaw(createPreferencesGuard(preferences));
     const recorder = markRaw(createVoiceShortcutRecorder({ current: () => preferences.getSnapshot().value.config.dictationShortcuts, save: (id, key) => preferences.saveShortcut(id, key) }));
-    return { preferences, guard, recorder, view: preferences.getSnapshot(), guardView: guard.getSnapshot(), shortcut: recorder.getSnapshot(), bindings: markRaw({}), presets: DICTATION_PRESETS, shortcutIds: ["default", ...DICTATION_PRESETS] };
+    return { preferences, guard, recorder, view: preferences.getSnapshot(), guardView: guard.getSnapshot(), shortcut: recorder.getSnapshot(), bindings: markRaw({}), presets: DICTATION_PRESETS, shortcutIds: ["default", ...DICTATION_PRESETS], sheet: "" };
   },
   computed: {
     profile() { return this.view.value && this.view.value.config.dictationPreset !== "raw" ? this.preferences.profile(this.view.value.config.dictationPreset) : null; },
+    presetSections() { return [{ items: this.presets.map(id => ({ id, label: this.t(`dictation.${id}`) })) }]; },
+    modelSections() { return [{ items: [{ id: "", label: this.t("settings.model.none") }, ...this.models.map(item => ({ id: item.id, label: item.label, disabled: item.disabled }))] }]; },
+    modelLabel() { return this.modelSections[0].items.find(item => item.id === (this.profile?.model || ""))?.label || this.t("settings.model.none"); },
+    sheetTitle() { return this.t(this.sheet === "model" ? "dictation.model" : "preferences.dictationStyle"); },
+    sheetItems() { return this.sheet === "model" ? this.modelSections[0].items : this.presetSections[0].items; },
+    sheetCurrent() { return this.sheet === "model" ? (this.profile?.model || "") : this.view.value?.config.dictationPreset; },
     profilePending() { return this.guardView.selecting || Boolean(this.view.pending[`profile:${this.view.value.config.dictationPreset}`]); },
     models() {
       const available = this.view.value?.chatModels || [];
@@ -117,10 +151,14 @@ export default {
     beforeLeave() { return this.guard.request(); },
     async patch(partial) { if (!this.view.value) await this.preferences.load(); return this.preferences.patch(partial); },
     reload() { return this.preferences.load(true); },
-    async selectPreset(event) {
-      const id = event.target.value;
-      event.target.value = this.view.value.config.dictationPreset;
-      await this.guard.selectPreset(id).catch(() => {});
+    choosePreset(item) { void this.guard.selectPreset(item.id).catch(() => {}); },
+    chooseModel(item) { if (!item.disabled) this.preferences.edit(this.view.value.config.dictationPreset, { model: item.id }); },
+    chooseSheet(item) {
+      if (item.disabled) return;
+      const sheet = this.sheet;
+      this.sheet = "";
+      if (sheet === "model") this.chooseModel(item);
+      else this.choosePreset(item);
     },
     async saveProfile() { try { await this.preferences.saveProfile(this.view.value.config.dictationPreset); this.$refs.instructions?.focus(); } catch { /* The shared store retains the draft and error. */ } },
     shortcutTitle(id) { return this.t(id === "default" ? "dictation.shortcut" : `dictation.${id}`); },
@@ -135,19 +173,29 @@ export default {
 </script>
 
 <style scoped>
-.lares-voice-preferences { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
-.lares-voice-preferences h3 { margin: 8px 0 0; font-size: 15px; font-weight: 500; }
-.lares-voice-preferences p { margin: 0; font-size: 13px; color: var(--q-ink-3); }
+.lares-voice-preferences { display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--q-ink-1); font-size: 15px; line-height: 22px; }
+.lares-voice-preferences h3 { margin: 4px 0 0; color: var(--q-ink-3); font-size: 14px; font-weight: 500; line-height: 18px; }
+.lares-voice-preferences p { margin: 0; color: var(--q-ink-3); font-size: 15px; line-height: 22px; }
 .lares-voice-preferences [role="alert"] { color: var(--q-orange-default); }
-.lares-voice-preferences__row { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--q-separator); }
-.lares-voice-preferences__row > span { flex: 1; min-width: 0; }
+.lares-voice-preferences__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.lares-voice-preferences__field > span { color: var(--q-ink-2); }
+.lares-voice-preferences__row { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--q-separator); }
+.lares-voice-preferences__row > span { flex: 1; min-width: 0; font-size: 16px; line-height: 22px; }
 .lares-voice-preferences__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-.lares-voice-preferences button, .lares-voice-preferences select { font: inherit; color: inherit; background: var(--q-background-2, transparent); border: 1px solid var(--q-separator); border-radius: 8px; padding: 6px 8px; cursor: pointer; max-width: 100%; }
-.lares-voice-preferences button:disabled { opacity: .45; cursor: default; }
-.lares-voice-preferences button[data-recording="true"] { outline: 2px solid var(--q-blue-default, #3978f6); }
-.lares-voice-preferences button:focus-visible, .lares-voice-preferences textarea:focus-visible { outline: 2px solid var(--q-blue-default, #3978f6); outline-offset: 2px; }
-.lares-voice-preferences__editor, .lares-voice-preferences label { display: flex; flex-direction: column; gap: 10px; }
-.lares-voice-preferences textarea { box-sizing: border-box; width: 100%; min-height: 144px; padding: 10px; resize: vertical; color: inherit; background: transparent; border: 1px solid var(--q-separator); border-radius: 8px; font: inherit; line-height: 1.5; }
-.lares-voice-preferences__shortcuts, .lares-voice-preferences__question { display: flex; flex-direction: column; gap: 12px; }
-.lares-voice-preferences__question { padding: 12px 20px; }
+.lares-voice-preferences__actions button,
+.lares-voice-preferences__question button,
+.lares-voice-preferences__shortcuts button { min-height: 36px; border: 1px solid var(--q-separator); border-radius: 12px; padding: 0 14px; background: transparent; color: inherit; font: inherit; font-size: 15px; line-height: 20px; cursor: pointer; }
+.lares-voice-preferences__actions button:disabled,
+.lares-voice-preferences__question button:disabled,
+.lares-voice-preferences__shortcuts button:disabled { opacity: .45; cursor: default; }
+.lares-voice-preferences button.is-primary { border: 0; background: var(--q-blue-alpha); color: var(--q-blue-default); font-weight: 500; }
+.lares-voice-preferences button[data-recording="true"] { outline: 2px solid var(--q-blue-default); }
+.lares-voice-preferences__actions button:focus-visible,
+.lares-voice-preferences__question button:focus-visible,
+.lares-voice-preferences__shortcuts button:focus-visible,
+.lares-voice-preferences textarea:focus-visible { outline: 2px solid var(--q-blue-default); outline-offset: 2px; }
+.lares-voice-preferences__editor, .lares-voice-preferences__shortcuts, .lares-voice-preferences__question { display: flex; flex-direction: column; gap: 12px; }
+.lares-voice-preferences textarea { box-sizing: border-box; width: 100%; min-height: 144px; padding: 12px 16px; resize: vertical; color: inherit; background: transparent; border: 1px solid var(--q-separator); border-radius: 16px; font: inherit; font-size: 16px; line-height: 1.5; }
+.lares-voice-preferences__question { padding: 4px 20px 12px; }
+.lares-voice-preferences__question button { width: 100%; }
 </style>