@olares/lares-mobile 0.15.5 → 0.15.6

package/src/desktop/DesktopContextMeter.vue

@@ -0,0 +1,81 @@
+<template>
+  <LaresPcPopover v-if="occupancy" v-model="open" :width="260" placement="top-end">
+    <template #trigger="{ toggle }">
+      <LaresPcTooltip :label="t('context.used', occupancy)" placement="top">
+        <button
+          type="button"
+          class="desktop-context"
+          :aria-label="t('context.used', occupancy)"
+          @click="toggle"
+        >
+          <svg viewBox="0 0 20 20" aria-hidden="true">
+            <circle cx="10" cy="10" r="7" class="desktop-context__track" />
+            <circle
+              cx="10"
+              cy="10"
+              r="7"
+              class="desktop-context__value"
+              pathLength="100"
+              :stroke-dasharray="`${occupancy.percent} 100`"
+            />
+          </svg>
+        </button>
+      </LaresPcTooltip>
+    </template>
+    <div class="desktop-context__panel">
+      <strong>{{ t("context.title") }}</strong>
+      <span>{{ t("context.used", occupancy) }}</span>
+      <div class="desktop-context__bar"><i :style="{ width: `${occupancy.percent}%` }" /></div>
+      <dl v-if="breakdown">
+        <template v-for="row in rows" :key="row.key">
+          <dt>{{ t(`context.${row.key}`) }}</dt>
+          <dd>~{{ row.compact }}</dd>
+        </template>
+      </dl>
+    </div>
+  </LaresPcPopover>
+</template>
+
+<script>
+import { occupancyBreakdown, occupancyFromPressure } from "@olares/lares-core/larepass/context-occupancy";
+import LaresPcPopover from "./ui/PcPopover.vue";
+import LaresPcTooltip from "./ui/PcTooltip.vue";
+
+export default {
+  name: "LaresDesktopContextMeter",
+  components: { LaresPcPopover, LaresPcTooltip },
+  props: {
+    pressure: { type: Object, default: null },
+    breakdown: { type: Object, default: null },
+    t: { type: Function, required: true },
+  },
+  data() {
+    return { open: false };
+  },
+  computed: {
+    occupancy() {
+      return occupancyFromPressure(this.pressure);
+    },
+    rows() {
+      return occupancyBreakdown(this.breakdown);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.desktop-context { display:grid; width:28px; height:28px; place-items:center; border:0; border-radius:50%; padding:0; background:transparent; color:var(--q-ink-3); cursor:pointer; }
+.desktop-context:hover { background:var(--q-background-hover); color:var(--q-ink-2); }
+.desktop-context svg { width:18px; height:18px; transform:rotate(-90deg); fill:none; }
+.desktop-context circle { stroke-width:2.5; }
+.desktop-context__track { stroke:var(--q-separator); }
+.desktop-context__value { stroke:var(--q-blue-default); stroke-linecap:round; }
+.desktop-context__panel { display:flex; flex-direction:column; gap:8px; padding:4px; color:var(--q-ink-2); font-size:12px; }
+.desktop-context__panel strong { color:var(--q-ink-1); font-size:14px; }
+.desktop-context__bar { height:6px; overflow:hidden; border-radius:3px; background:var(--q-background-3); }
+.desktop-context__bar i { display:block; height:100%; border-radius:inherit; background:var(--q-blue-default); }
+.desktop-context__panel dl { display:grid; grid-template-columns:1fr auto; gap:5px 12px; margin:3px 0 0; }
+.desktop-context__panel dt,
+.desktop-context__panel dd { margin:0; }
+.desktop-context__panel dd { color:var(--q-ink-3); }
+</style>

package/src/desktop/DesktopGoal.vue

@@ -0,0 +1,88 @@
+<template>
+  <Transition name="lares-panel">
+    <div v-if="goal" class="desktop-goal">
+    <div class="desktop-goal__body">
+      <input
+        v-if="editing"
+        ref="editor"
+        v-model="objective"
+        :aria-label="t('goal.edit')"
+        @keydown.enter.exact.prevent="save"
+        @keydown.esc="editing = false"
+      />
+      <template v-else>
+        <span class="desktop-goal__mark" aria-hidden="true">◎</span>
+        <span class="desktop-goal__text">{{ goal.objective }}</span>
+        <span class="desktop-goal__round">{{ goal.roundsStarted || 0 }}/{{ goal.maxGoalRounds }}</span>
+      </template>
+    </div>
+    <div class="desktop-goal__actions">
+      <button v-if="editing" type="button" :disabled="busy || !objective.trim()" @click="save">✓</button>
+      <button v-if="editing" type="button" :disabled="busy" @click="editing = false">×</button>
+      <template v-else>
+        <button type="button" :aria-label="t('goal.edit')" :disabled="busy" @click="beginEdit">✎</button>
+        <button
+          v-if="goal.phase === 'active'"
+          type="button"
+          :aria-label="t('goal.pause')"
+          :disabled="busy"
+          @click="$emit('action', 'pause')"
+        >Ⅱ</button>
+        <button
+          v-else-if="goal.phase === 'paused'"
+          type="button"
+          :aria-label="t('goal.resume')"
+          :disabled="busy"
+          @click="$emit('action', 'resume')"
+        >▶</button>
+        <button type="button" :aria-label="t('goal.clear')" :disabled="busy" @click="$emit('action', 'clear')">×</button>
+      </template>
+    </div>
+    </div>
+  </Transition>
+</template>
+
+<script>
+export default {
+  name: "LaresDesktopGoal",
+  props: {
+    projection: { type: Object, default: null },
+    busy: { type: Boolean, default: false },
+    t: { type: Function, required: true },
+  },
+  emits: ["action"],
+  data() {
+    return { editing: false, objective: "" };
+  },
+  computed: {
+    goal() {
+      return this.projection?.goal ?? null;
+    },
+  },
+  methods: {
+    beginEdit() {
+      this.objective = this.goal?.objective ?? "";
+      this.editing = true;
+      this.$nextTick(() => this.$refs.editor?.focus?.());
+    },
+    save() {
+      if (!this.objective.trim()) return;
+      this.$emit("action", "edit", this.objective.trim());
+      this.editing = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.desktop-goal { display:flex; box-sizing:border-box; width:calc(100% - 24px); min-height:40px; align-items:center; gap:8px; margin:0 auto -3px; border:1px solid var(--q-separator); border-bottom:0; border-radius:12px 12px 0 0; padding:5px 8px 7px 12px; background:var(--q-background-3); }
+.desktop-goal__body { display:flex; min-width:0; flex:1; align-items:center; gap:8px; }
+.desktop-goal__mark { color:var(--q-blue-default); }
+.desktop-goal__text { overflow:hidden; flex:1; color:var(--q-ink-2); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
+.desktop-goal__round { color:var(--q-ink-3); font-size:11px; }
+.desktop-goal input { box-sizing:border-box; width:100%; height:28px; border:1px solid var(--q-input-stroke); border-radius:6px; padding:0 8px; outline:none; background:var(--q-background-1); color:var(--q-ink-1); }
+.desktop-goal__actions { display:flex; gap:3px; }
+.desktop-goal button { display:grid; width:27px; height:27px; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--q-ink-3); cursor:pointer; }
+.desktop-goal button:hover:not(:disabled) { background:var(--q-background-hover); color:var(--q-ink-2); }
+.desktop-goal button:disabled { opacity:.45; cursor:default; }
+</style>

package/src/desktop/DesktopPreview.vue

@@ -0,0 +1,58 @@
+<template>
+  <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="downloadHref"
+        class="desktop-preview__download"
+        :href="downloadHref"
+        download
+      >{{ t("download") }}</a>
+    </header>
+    <div class="desktop-preview__content">
+      <LaresPreviewBody
+        :path="path"
+        :session-id="sessionId"
+        :status="status"
+        :data="data"
+        :error="error"
+        :media-src="mediaSrc"
+        :href-for="hrefFor"
+        :t="t"
+        @retry="$emit('retry')"
+        @open="$emit('open', $event)"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import LaresPreviewBody from "../preview/PreviewBody.vue";
+
+export default {
+  name: "LaresDesktopPreview",
+  components: { LaresPreviewBody },
+  props: {
+    path: { type: String, required: true },
+    sessionId: { type: String, default: "" },
+    status: { type: String, default: "loading" },
+    data: { type: Object, default: null },
+    error: { type: String, default: "" },
+    mediaSrc: { type: String, default: "" },
+    downloadHref: { type: String, default: "" },
+    hrefFor: { type: Function, default: null },
+    t: { type: Function, required: true },
+  },
+  emits: ["retry", "open"],
+};
+</script>
+
+<style scoped>
+/* Covers the transcript and the composer instead of replacing them, so the
+   reader's place in the conversation survives a trip through the tabs. */
+.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__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/DesktopPreviewTabs.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="preview-tabs" role="tablist" :aria-label="t('tabs')">
+    <button
+      type="button"
+      role="tab"
+      class="preview-tabs__chat"
+      :data-active="active ? 'false' : 'true'"
+      :aria-selected="!active"
+      @click="$emit('chat')"
+    >
+      {{ t("chat") }}
+    </button>
+    <span class="preview-tabs__divider" aria-hidden="true" />
+    <TransitionGroup name="lares-tab" tag="div" class="preview-tabs__list">
+      <div
+        v-for="tab in tabs"
+        :key="tab.path"
+        class="preview-tabs__tab"
+        :data-active="tab.path === active ? 'true' : 'false'"
+        role="tab"
+        :aria-selected="tab.path === active"
+      >
+        <button
+          type="button"
+          class="preview-tabs__label"
+          @click="$emit('activate', tab.path)"
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M4 1.75h5l3 3V14.25H4zM9 1.75v3h3" />
+          </svg>
+          <span>{{ tab.name }}</span>
+        </button>
+        <button
+          type="button"
+          class="preview-tabs__close"
+          :aria-label="t('close', { name: tab.name })"
+          @click.stop="$emit('close', tab.path)"
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="m4.5 4.5 7 7m0-7-7 7" />
+          </svg>
+        </button>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LaresDesktopPreviewTabs",
+  props: {
+    tabs: { type: Array, required: true },
+    // Empty while the reader is on the chat, so no file tab looks selected.
+    active: { type: String, default: "" },
+    t: { type: Function, required: true },
+  },
+  emits: ["chat", "activate", "close"],
+};
+</script>
+
+<style scoped>
+.preview-tabs { display:flex; min-width:0; flex:1; align-items:center; gap:8px; }
+.preview-tabs__chat { height:24px; flex:none; padding:0 8px; border:0; border-radius:7px; background:transparent; color:var(--q-ink-3); cursor:pointer; font-size:12px; font-weight:500; }
+.preview-tabs__chat:hover { background:var(--q-background-hover); color:var(--q-ink-1); }
+.preview-tabs__chat[data-active="true"] { background:var(--q-background-3); color:var(--q-blue-default); }
+.preview-tabs__divider { width:1px; height:16px; flex:none; background:var(--q-separator); }
+.preview-tabs__list { position:relative; display:flex; min-width:0; flex:1; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; }
+.preview-tabs__chat,
+.preview-tabs__tab,
+.preview-tabs__label,
+.preview-tabs__close { transition:background var(--lares-duration-fast, 120ms) var(--lares-ease-out, ease), color var(--lares-duration-fast, 120ms) var(--lares-ease-out, ease), border-color var(--lares-duration-fast, 120ms) var(--lares-ease-out, ease); }
+.preview-tabs__list::-webkit-scrollbar { display:none; }
+.preview-tabs__tab { display:inline-flex; max-width:180px; height:24px; flex:0 0 auto; align-items:center; padding:0 2px 0 8px; border:1px solid transparent; border-radius:7px; background:var(--q-background-3); color:var(--q-ink-2); }
+.preview-tabs__tab:hover { background:var(--q-background-hover); color:var(--q-ink-1); }
+.preview-tabs__tab[data-active="true"] { border-color:var(--q-input-stroke); background:var(--q-background-1); color:var(--q-ink-1); }
+.preview-tabs__label { display:inline-flex; min-width:0; flex:1; align-items:center; gap:5px; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; font-size:12px; font-weight:500; }
+.preview-tabs__label svg { width:13px; height:13px; flex:none; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.3; }
+.preview-tabs__label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.preview-tabs__close { display:grid; width:18px; height:18px; flex:none; place-items:center; padding:0; border:0; border-radius:5px; background:transparent; color:var(--q-ink-3); cursor:pointer; }
+.preview-tabs__close:hover { background:var(--q-background-hover); color:var(--q-red-default); }
+.preview-tabs__close svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-width:1.8; }
+</style>

package/src/desktop/DesktopQuestions.vue

@@ -0,0 +1,118 @@
+<template>
+  <section class="desktop-questions">
+    <div class="desktop-questions__strip">{{ current.header || t("question.waiting") }}</div>
+    <div class="desktop-questions__body">
+      <strong>{{ current.question }}</strong>
+      <p v-if="current.detail">{{ current.detail }}</p>
+      <label v-for="option in current.options || []" :key="option.label" class="desktop-questions__option">
+        <input
+          :type="current.multiSelect ? 'checkbox' : 'radio'"
+          :name="current.id"
+          :value="option.label"
+          :checked="selected(current.id).includes(option.label)"
+          @change="toggle(option.label, $event.target.checked)"
+        />
+        <span><b>{{ option.label }}</b><small v-if="option.description">{{ option.description }}</small></span>
+      </label>
+      <label class="desktop-questions__other">
+        <span>{{ t("question.other") }}</span>
+        <input v-model="answers[current.id].custom" type="text" />
+      </label>
+    </div>
+    <footer>
+      <button v-if="index > 0" type="button" :disabled="busy" @click="index -= 1">{{ t("question.back") }}</button>
+      <span />
+      <button
+        v-if="index < questions.length - 1"
+        type="button"
+        :disabled="!answered || busy"
+        @click="index += 1"
+      >{{ t("question.next") }}</button>
+      <button v-else type="button" :disabled="!complete || busy" @click="submit">{{ t("question.submit") }}</button>
+    </footer>
+  </section>
+</template>
+
+<script>
+function blankAnswers(questions) {
+  return Object.fromEntries(questions.map((row) => [row.id, { selected: [], custom: "" }]));
+}
+
+export default {
+  name: "LaresDesktopQuestions",
+  props: {
+    questions: { type: Array, required: true },
+    busy: { type: Boolean, default: false },
+    t: { type: Function, required: true },
+  },
+  emits: ["answer"],
+  data() {
+    return { index: 0, answers: blankAnswers(this.questions) };
+  },
+  computed: {
+    current() {
+      return this.questions[this.index] ?? {};
+    },
+    answered() {
+      const row = this.answers[this.current.id];
+      return Boolean(row && (row.selected.length || row.custom.trim()));
+    },
+    complete() {
+      return this.questions.every((question) => {
+        const row = this.answers[question.id];
+        return Boolean(row && (row.selected.length || row.custom.trim()));
+      });
+    },
+  },
+  watch: {
+    questions() {
+      this.index = 0;
+      this.answers = blankAnswers(this.questions);
+    },
+  },
+  methods: {
+    selected(id) {
+      return this.answers[id]?.selected ?? [];
+    },
+    toggle(label, checked) {
+      const id = this.current.id;
+      const current = this.answers[id];
+      current.selected = this.current.multiSelect
+        ? (checked ? [...current.selected, label] : current.selected.filter((row) => row !== label))
+        : (checked ? [label] : []);
+    },
+    submit() {
+      if (!this.complete) return;
+      this.$emit("answer", {
+        answers: this.questions.map((question) => {
+          const row = this.answers[question.id];
+          return {
+            id: question.id,
+            selected: row.selected,
+            ...(row.custom.trim() ? { custom: row.custom.trim() } : {}),
+          };
+        }),
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.desktop-questions { overflow:hidden; border:1px solid var(--q-separator); border-radius:14px; background:var(--q-background-2); box-shadow:0 1px 3px rgb(0 0 0 / 8%); }
+.desktop-questions__strip { height:30px; padding:0 12px; background:var(--q-background-3); color:var(--q-ink-3); font-size:12px; line-height:30px; }
+.desktop-questions__body { display:flex; max-height:240px; flex-direction:column; gap:8px; overflow:auto; padding:14px 16px; color:var(--q-ink-2); font-size:13px; }
+.desktop-questions__body > strong { color:var(--q-ink-1); font-size:14px; }
+.desktop-questions__body > p { margin:0; white-space:pre-wrap; }
+.desktop-questions__option { display:flex; gap:9px; border:1px solid var(--q-separator); border-radius:8px; padding:8px; cursor:pointer; }
+.desktop-questions__option span { display:flex; flex-direction:column; gap:2px; }
+.desktop-questions__option b { color:var(--q-ink-1); font-weight:500; }
+.desktop-questions__option small { color:var(--q-ink-3); }
+.desktop-questions__other { display:flex; align-items:center; gap:8px; }
+.desktop-questions__other input { min-width:0; height:28px; flex:1; border:1px solid var(--q-input-stroke); border-radius:6px; padding:0 8px; background:var(--q-background-1); color:var(--q-ink-1); }
+.desktop-questions footer { display:flex; align-items:center; gap:8px; padding:8px 12px 12px; }
+.desktop-questions footer span { flex:1; }
+.desktop-questions footer button { height:32px; border:1px solid var(--q-separator); border-radius:7px; padding:0 13px; background:transparent; color:var(--q-ink-2); font:inherit; cursor:pointer; }
+.desktop-questions footer button:last-child { border-color:transparent; background:var(--q-blue-default); color:var(--q-ink-on-brand); }
+.desktop-questions footer button:disabled { opacity:.45; cursor:default; }
+</style>

package/src/desktop/DesktopQueue.vue

@@ -0,0 +1,203 @@
+<template>
+  <Transition name="lares-panel">
+    <div v-if="rows.length" class="desktop-queue">
+    <div class="desktop-queue__panel">
+      <button
+        v-if="rows.length > 1"
+        type="button"
+        class="desktop-queue__header"
+        :aria-expanded="expanded"
+        :disabled="Boolean(editing || busy)"
+        @click="collapsed = !collapsed"
+      >
+        <QueueIcon />
+        <span>{{ t("queue.count", { n: rows.length }) }}</span>
+        <ChevronIcon :class="{ 'is-open': expanded }" />
+      </button>
+      <ul
+        class="desktop-queue__list"
+        :data-expanded="rows.length === 1 || expanded ? 'true' : 'false'"
+      >
+        <li v-for="row in rows" :key="row.id" class="desktop-queue__row">
+          <QueueIcon v-if="rows.length === 1" class="desktop-queue__lead" />
+          <input
+            v-if="editing?.id === row.id"
+            ref="editor"
+            v-model="editing.text"
+            class="desktop-queue__editor"
+            :aria-label="t('queue.edit')"
+            @keydown.esc="editing = null"
+            @keydown.enter.exact.prevent="saveEdit"
+          />
+          <span v-else class="desktop-queue__preview">{{ row.preview }}</span>
+          <div class="desktop-queue__actions">
+            <template v-if="editing?.id === row.id">
+              <ActionButton
+                :label="t('queue.save')"
+                :disabled="Boolean(busy) || !editing.text.trim()"
+                icon="check"
+                @click="saveEdit"
+              />
+              <ActionButton
+                :label="t('queue.cancelEdit')"
+                :disabled="Boolean(busy)"
+                icon="close"
+                @click="editing = null"
+              />
+            </template>
+            <template v-else>
+              <ActionButton
+                :label="t('queue.edit')"
+                :disabled="Boolean(busy) || row.text == null"
+                icon="edit"
+                @click="beginEdit(row)"
+              />
+              <ActionButton
+                :label="t('queue.remove')"
+                :disabled="Boolean(busy)"
+                icon="trash"
+                @click="$emit('action', row.id, { kind: 'remove' })"
+              />
+              <ActionButton
+                :label="t('queue.steer')"
+                :disabled="Boolean(busy) || !running"
+                icon="send"
+                @click="$emit('action', row.id, { kind: 'steer' })"
+              />
+            </template>
+          </div>
+        </li>
+      </ul>
+    </div>
+    </div>
+  </Transition>
+</template>
+
+<script>
+import { h } from "vue";
+import LaresPcTooltip from "./ui/PcTooltip.vue";
+
+const paths = {
+  check: "m4 8 2.5 2.5L12 5",
+  close: "m4.5 4.5 7 7m0-7-7 7",
+  edit: "M3.5 11.8V13h1.2l7.7-7.7-1.7-1.7z",
+  trash: "M4 5h8M6 5V3.5h4V5m-5 0 .6 8h4.8l.6-8",
+  send: "m3 3 10 5-10 5 2-5z",
+};
+
+const glyph = (name, path, extra = {}) => ({
+  name,
+  render() {
+    return h("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", ...extra }, [
+      h("path", { d: path }),
+    ]);
+  },
+});
+
+const QueueIcon = glyph("QueueIcon", "M3 4.5h10M3 8h7M3 11.5h4");
+const ChevronIcon = glyph("ChevronIcon", "m4 6 4 4 4-4");
+
+const ActionButton = {
+  name: "QueueActionButton",
+  components: { LaresPcTooltip },
+  props: {
+    label: { type: String, required: true },
+    icon: { type: String, required: true },
+    disabled: { type: Boolean, default: false },
+  },
+  emits: ["click"],
+  render() {
+    return h(LaresPcTooltip, { label: this.label, placement: "bottom" }, {
+      default: () => h("button", {
+        type: "button",
+        class: "desktop-queue__action",
+        disabled: this.disabled,
+        "aria-label": this.label,
+        onClick: () => this.$emit("click"),
+      }, [
+        h("svg", { viewBox: "0 0 16 16", "aria-hidden": "true" }, [
+          h("path", { d: paths[this.icon] }),
+        ]),
+      ]),
+    });
+  },
+};
+
+export default {
+  name: "LaresDesktopQueue",
+  components: { QueueIcon, ChevronIcon, ActionButton },
+  props: {
+    items: { type: Array, default: () => [] },
+    running: { type: Boolean, default: false },
+    busy: { type: String, default: "" },
+    t: { type: Function, required: true },
+  },
+  emits: ["action"],
+  data() {
+    return { collapsed: true, editing: null };
+  },
+  computed: {
+    rows() {
+      return this.items.filter((row) => row?.placement === "queued");
+    },
+    expanded() {
+      return !this.collapsed || Boolean(this.editing || this.busy);
+    },
+  },
+  watch: {
+    rows(next) {
+      if (!next.length) this.collapsed = true;
+      if (this.editing && !next.some((row) => row.id === this.editing.id)) this.editing = null;
+    },
+  },
+  methods: {
+    beginEdit(row) {
+      if (row.text == null) return;
+      this.editing = { id: row.id, text: row.text };
+      this.$nextTick(() => {
+        const editor = Array.isArray(this.$refs.editor) ? this.$refs.editor[0] : this.$refs.editor;
+        editor?.focus?.();
+      });
+    },
+    saveEdit() {
+      if (!this.editing?.text.trim()) return;
+      const { id, text } = this.editing;
+      this.$emit("action", id, { kind: "edit", content: [{ type: "text", text }] });
+      this.editing = null;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.desktop-queue { box-sizing:border-box; width:calc(100% - 24px); margin:0 auto -3px; padding:0 8px; }
+.desktop-queue__panel { overflow:hidden; border:1px solid var(--q-separator); border-bottom:0; border-radius:12px 12px 0 0; padding:2px 0; background:var(--q-background-3); }
+.desktop-queue__header { display:flex; width:100%; height:36px; align-items:center; gap:10px; border:0; padding:4px 12px; background:transparent; color:var(--q-ink-1); text-align:left; cursor:pointer; }
+.desktop-queue__header span { min-width:0; flex:1; font-size:13px; font-weight:500; }
+.desktop-queue__header .is-open { transform:rotate(180deg); }
+.desktop-queue__header > svg,
+.desktop-queue__header .is-open { transition:transform var(--lares-duration-fast, 120ms) var(--lares-ease-out, ease); }
+.desktop-queue__list { max-height:0; overflow:hidden; margin:0; padding:0; list-style:none; opacity:0; transition:max-height var(--lares-duration-normal, 220ms) var(--lares-ease-out, cubic-bezier(0.32, 0.72, 0, 1)), opacity var(--lares-duration-normal, 220ms) var(--lares-ease-out, cubic-bezier(0.32, 0.72, 0, 1)); }
+.desktop-queue__list[data-expanded="true"] { max-height:180px; overflow-y:auto; opacity:1; }
+@media (prefers-reduced-motion: reduce) {
+  .desktop-queue__list,
+  .desktop-queue__header > svg,
+  .desktop-queue__header .is-open { transition:none; }
+  .desktop-queue__list[data-expanded="false"] { opacity:1; }
+}
+.desktop-queue__row { display:flex; box-sizing:border-box; width:100%; height:36px; align-items:center; gap:10px; padding:4px 5px 4px 12px; }
+.desktop-queue__row + .desktop-queue__row { border-top:1px solid var(--q-separator); }
+.desktop-queue__lead,
+.desktop-queue__header > svg { flex:none; color:var(--q-ink-3); }
+.desktop-queue__preview,
+.desktop-queue__editor { min-width:0; flex:1; font:inherit; font-size:13px; }
+.desktop-queue__preview { overflow:hidden; color:var(--q-ink-2); text-overflow:ellipsis; white-space:nowrap; }
+.desktop-queue__editor { box-sizing:border-box; height:28px; border:1px solid var(--q-input-stroke); border-radius:6px; padding:0 8px; outline:none; background:var(--q-background-1); color:var(--q-ink-1); }
+.desktop-queue__editor:focus { border-color:var(--q-blue-default); }
+.desktop-queue__actions { display:flex; flex:none; align-items:center; gap:4px; }
+:deep(.desktop-queue__action) { display:grid; width:28px; height:28px; place-items:center; border:0; border-radius:50%; padding:0; background:transparent; color:var(--q-ink-3); cursor:pointer; }
+:deep(.desktop-queue__action:hover:not(:disabled)) { background:var(--q-background-hover); color:var(--q-ink-2); }
+:deep(.desktop-queue__action:disabled) { opacity:.45; cursor:default; }
+.desktop-queue svg,
+:deep(.desktop-queue__action svg) { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
+</style>