@olares/lares-mobile 0.15.7 → 0.15.9

package/src/chat/Deliverables.vue

@@ -5,22 +5,47 @@
       <figure v-for="item in group.media" :key="item.path" class="lares-turn-media">
         <figcaption class="lares-turn-media-caption">
           <span :title="item.path">{{ item.name }}</span>
-          <button type="button" class="lares-turn-open" @click="$emit('open', item.path)">{{ t("openInTab") }}</button>
+          <button type="button" class="lares-turn-open" @click="$emit('open', item.path)">{{ t(popup ? "viewMedia" : "openInTab") }}</button>
         </figcaption>
-        <img
+        <button
           v-if="item.kind === 'image'"
-          class="lares-turn-media-image"
-          :src="mediaUrl(item)"
-          :alt="item.name"
-          @load="$emit('media')"
+          type="button"
+          class="lares-turn-media-frame"
+          :aria-label="t('viewMedia')"
           @click="$emit('open', item.path)"
-        />
+        >
+          <img
+            class="lares-turn-media-image"
+            :src="mediaUrl(item)"
+            :alt="item.name"
+            @load="$emit('media')"
+          />
+        </button>
+        <button
+          v-else-if="item.kind === 'video' && popup"
+          type="button"
+          class="lares-turn-media-frame"
+          :aria-label="t('viewMedia')"
+          @click="$emit('open', item.path)"
+        >
+          <video
+            class="lares-turn-media-video"
+            :src="mediaUrl(item)"
+            playsinline
+            muted
+            preload="metadata"
+            @loadedmetadata="$emit('media')"
+          />
+          <span class="lares-turn-media-play" aria-hidden="true" />
+        </button>
         <video
           v-else-if="item.kind === 'video'"
           class="lares-turn-media-video"
           :src="mediaUrl(item)"
           controls
           playsinline
+          preload="metadata"
+          @loadedmetadata="$emit('media')"
         />
         <audio
           v-else-if="item.kind === 'audio'"
@@ -60,6 +85,7 @@ export default {
   props: {
     group: { type: Object, required: true },
     mediaUrl: { type: Function, required: true },
+    popup: { type: Boolean, default: false },
     t: { type: Function, required: true },
   },
   emits: ["open", "media"],
@@ -90,8 +116,9 @@ export default {
 
 .lares-turn-media {
   display: flex;
+  box-sizing: border-box;
   width: fit-content;
-  max-width: 100%;
+  max-width: min(100%, 660px);
   flex-direction: column;
   gap: 8px;
   margin: 0;
@@ -136,10 +163,52 @@ export default {
   background: var(--q-background-hover);
 }
 
+.lares-turn-media-frame {
+  position: relative;
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.lares-turn-media-frame:active {
+  opacity: 0.86;
+}
+
+.lares-turn-media-frame img,
+.lares-turn-media-frame video {
+  pointer-events: none;
+}
+
+.lares-turn-media-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 52px;
+  height: 52px;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 55%);
+  transform: translate(-50%, -50%);
+}
+
+.lares-turn-media-play::before {
+  content: "";
+  position: absolute;
+  top: 16px;
+  left: 20px;
+  border-width: 10px 0 10px 16px;
+  border-style: solid;
+  border-color: transparent transparent transparent #fff;
+}
+
 .lares-turn-media-image,
 .lares-turn-media-video {
   display: block;
-  max-width: min(100%, 640px);
+  max-width: 100%;
   max-height: 420px;
   border-radius: 10px;
   object-fit: contain;
@@ -147,11 +216,14 @@ export default {
 
 .lares-turn-media-audio {
   display: block;
-  width: min(520px, 100%);
+  width: 520px;
+  max-width: 100%;
 }
 
 .lares-turn-media-model3d {
-  width: min(520px, 100%);
+  box-sizing: border-box;
+  width: 520px;
+  max-width: 100%;
   padding: 16px;
   color: var(--q-ink-3);
   font-size: 15px;

package/src/chat/HistoryPanel.vue

@@ -9,6 +9,17 @@
     <aside class="lares-history__sheet" role="dialog" :aria-label="t('bar.history')">
       <header class="lares-history__head">
         <h2 class="lares-history__title">{{ t("bar.history") }}</h2>
+        <button
+          type="button"
+          class="lares-history__new"
+          :aria-label="t('bar.newAria')"
+          @click="$emit('create', null)"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M5 4.2h14a2.2 2.2 0 0 1 2.2 2.2v8.2a2.2 2.2 0 0 1-2.2 2.2h-5.2L12 19.8l-1.8-3H5a2.2 2.2 0 0 1-2.2-2.2V6.4A2.2 2.2 0 0 1 5 4.2z" />
+            <path d="M12 7.6v5.2M9.4 10.2h5.2" />
+          </svg>
+        </button>
       </header>
       <header class="lares-history__toolbar">
         <span v-if="!searchOpen" class="lares-history__section-label">{{ sectionTitle }}</span>
@@ -517,7 +528,7 @@ export default {
   align-items: center;
   flex-shrink: 0;
   height: 56px;
-  padding: 0 20px;
+  padding: 0 12px 0 20px;
 }
 
 .lares-history__title {
@@ -527,6 +538,34 @@ export default {
   line-height: 26px;
 }
 
+.lares-history__new {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  margin-left: auto;
+  border: 0;
+  border-radius: 999px;
+  padding: 0;
+  background: var(--q-background-3);
+  color: var(--q-ink-2);
+}
+
+.lares-history__new svg {
+  width: 22px;
+  height: 22px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.lares-history__new:active {
+  background: var(--q-btn-bg-pressed);
+}
+
 .lares-history__toolbar {
   display: flex;
   flex-shrink: 0;

package/src/chat/QuestionCard.vue

@@ -25,7 +25,7 @@ export default {
   name: "LaresQuestionCard",
   props: {
     questions: { type: Array, default: () => [] },
-    rpcId: { type: String, default: "" },
+    answerable: { type: Boolean, default: false },
     busy: { type: Boolean, default: false },
     t: { type: Function, required: true },
   },
@@ -47,11 +47,11 @@ export default {
       return Array.isArray(this.current?.options) ? this.current.options : [];
     },
     disabled() {
-      return this.busy || !this.rpcId || !this.current;
+      return this.busy || !this.answerable || !this.current;
     },
     hint() {
       if (this.busy) return this.t("question.busy");
-      if (!this.rpcId) return this.t("question.waiting");
+      if (!this.answerable) return this.t("question.waiting");
       return "";
     },
   },

package/src/chat/Transcript.vue

@@ -10,8 +10,25 @@
       <span class="lares-sk lares-sk--line lares-sk--w56" />
     </li>
     <li v-else-if="items.length === 0 && !running" class="lares-log__empty">{{ t("chat.empty") }}</li>
+    <template v-for="block in blocks" :key="block.key">
+    <li v-if="block.kind === 'fold'" class="lares-log__item" data-type="process">
+      <button
+        type="button"
+        class="lares-process"
+        :data-phase="block.phase"
+        :data-open="processOpen(block) ? 'true' : 'false'"
+        :disabled="!block.foldable"
+        :aria-expanded="processOpen(block) ? 'true' : 'false'"
+        @click="toggleProcess(block.key)"
+      >
+        <span class="lares-process__label">{{ processLabel(block) }}</span>
+        <svg v-if="block.foldable" class="lares-process__chevron" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M6.5 9 12 14.5 17.5 9" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </button>
+    </li>
     <li
-      v-for="(row, index) in items"
+      v-for="{ row, index } in shown(block)"
       :key="index"
       class="lares-log__item"
       :data-type="row.type"
@@ -35,7 +52,7 @@
       <LaresQuestionCard
         v-else-if="!questionTakeover && row.type === 'tool' && row.name === 'ask_user_question' && row.status === 'running'"
         :questions="questionItems(row)"
-        :rpc-id="question?.rpcId || ''"
+        :answerable="Boolean(question?.eventId)"
         :busy="questionBusy"
         :t="t"
         @pick="$emit('answer', $event, row)"
@@ -69,23 +86,30 @@
           @react="setReaction(index, $event)"
         />
       </template>
-      <LaresDeliverables
+        <LaresDeliverables
         v-else-if="row.type === 'files'"
         :group="fileGroup(row.paths)"
         :media-url="mediaUrl"
+        :popup="popup"
         :t="t"
         @open="$emit('open', $event)"
         @media="$emit('media')"
       />
     </li>
+    </template>
+    <li v-if="running && !hideRunning" class="lares-log__running" data-chat-running="true">
+      <span class="lares-log__sr" role="status" aria-live="polite" aria-atomic="true">{{ t("chat.deepDiving") }}</span>
+      <span class="lares-log__running-text" aria-hidden="true">{{ runningText }}</span>
+    </li>
   </ol>
 </template>
 
 <script>
 import { partitionPreviews } from "@olares/lares-core/files/preview-groups";
 import { parseAskUserQuestions } from "@olares/lares-core/larepass/questions";
+import { hidesRunningClock, processFoldLabel, transcriptBlocks } from "@olares/lares-core/larepass/process-fold";
 import { STAGE_COPY } from "@olares/lares-core/larepass/stage-copy";
-import { retryStatus as formatRetry, thinkSummary } from "./format.js";
+import { retryStatus as formatRetry, runningLabel, thinkSummary } from "./format.js";
 import { renderMarkdown } from "./markdown.js";
 import LaresDeliverables from "./Deliverables.vue";
 import LaresQuestionCard from "./QuestionCard.vue";
@@ -98,6 +122,7 @@ export default {
   props: {
     items: { type: Array, default: () => [] },
     running: { type: Boolean, default: false },
+    runningSince: { type: Number, default: 0 },
     loading: { type: Boolean, default: false },
     previews: { type: Object, default: () => ({}) },
     mediaUrl: { type: Function, required: true },
@@ -105,6 +130,7 @@ export default {
     rememberScroll: { type: Function, required: true },
     sticking: { type: Function, required: true },
     sessionId: { type: String, default: "" },
+    popup: { type: Boolean, default: false },
     question: { type: Object, default: null },
     questionBusy: { type: Boolean, default: false },
     questionTakeover: { type: Boolean, default: false },
@@ -118,25 +144,66 @@ export default {
       logPin: 0,
       stageCopy: STAGE_COPY,
       reactions: {},
+      openFolds: {},
+      now: Date.now(),
+      clock: 0,
     };
   },
+  computed: {
+    runningText() {
+      return runningLabel(this.runningSince, this.t, this.now);
+    },
+    blocks() {
+      return transcriptBlocks(this.items, { running: this.running });
+    },
+    hideRunning() {
+      return hidesRunningClock(this.blocks);
+    },
+  },
   watch: {
     sessionId() {
       this.reactions = {};
+      this.openFolds = {};
     },
+    running: "syncClock",
+    runningSince: "syncClock",
   },
   mounted() {
     this.bindLog();
     this.restoreLog();
+    this.syncClock();
   },
   beforeUnmount() {
     this.captureLog();
     this.unbindLog();
     if (this.logPin) cancelAnimationFrame(this.logPin);
+    clearInterval(this.clock);
   },
   methods: {
+    syncClock() {
+      clearInterval(this.clock);
+      this.clock = 0;
+      this.now = Date.now();
+      if (!this.running || !this.runningSince) return;
+      this.clock = setInterval(() => {
+        this.now = Date.now();
+      }, 1000);
+    },
     renderMarkdown,
     thinkSummary,
+    shown(block) {
+      if (block.kind === "fold") return this.processOpen(block) ? block.members : [];
+      return [block];
+    },
+    processOpen(block) {
+      return !block.foldable || Boolean(this.openFolds[block.key]);
+    },
+    processLabel(block) {
+      return processFoldLabel(this.t, block);
+    },
+    toggleProcess(key) {
+      this.openFolds = { ...this.openFolds, [key]: !this.openFolds[key] };
+    },
     questionItems(row) {
       if (this.question?.questions?.length) return this.question.questions;
       return parseAskUserQuestions(row.argsRaw);
@@ -270,11 +337,37 @@ export default {
 
 @media (prefers-reduced-motion: reduce) {
   .lares-sk,
+  .lares-log__running-text,
+  .lares-process[data-phase="live"] .lares-process__label,
   .lares-log__item[data-pending="true"] {
     animation: none;
   }
 }
 
+.lares-log__running {
+  margin-top: 4px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.lares-log__running-text {
+  color: var(--q-blue-default);
+  animation: lares-running-shimmer 1.6s ease-in-out infinite;
+}
+
+@keyframes lares-running-shimmer {
+  50% { opacity: 0.5; }
+}
+
+.lares-log__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
 .lares-log__item {
   display: flex;
   flex-direction: column;
@@ -283,6 +376,71 @@ export default {
   max-width: 100%;
 }
 
+.lares-process {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 33px;
+  border: 0;
+  border-bottom: 0.5px solid var(--q-separator);
+  padding: 0 0 8px;
+  background: transparent;
+  color: var(--q-ink-3);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.lares-process:disabled {
+  cursor: default;
+}
+
+.lares-process[data-phase="live"],
+.lares-process[data-phase="summary"] {
+  min-height: 0;
+  border-bottom: 0;
+  padding: 0;
+}
+
+.lares-process[data-phase="live"] .lares-process__label {
+  animation: lares-running-shimmer 1.6s ease-in-out infinite;
+}
+
+@media (hover: hover) {
+  .lares-process:hover:not(:disabled) {
+    color: var(--q-ink-2);
+  }
+}
+
+.lares-process__label {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lares-process__chevron {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  margin-left: 4px;
+  transition: transform 0.1s;
+}
+
+.lares-process[data-open="true"] .lares-process__chevron {
+  transform: rotate(180deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lares-process__chevron {
+    transition: none;
+  }
+}
+
 .lares-log__item[data-pending="true"] {
   animation: lares-msg-in var(--lares-duration-normal, 220ms) var(--lares-ease-out, cubic-bezier(0.32, 0.72, 0, 1));
 }

package/src/chat/format.js

@@ -87,6 +87,17 @@ export function metricsLine(metrics, t, now = Date.now()) {
   return parts.join(" · ");
 }
 
+/** The open turn's live clock; dsh never shows less than one second. */
+export function runningLabel(since, t, now = Date.now()) {
+  if (!since) return t("chat.deepDiving");
+  const { minutes, seconds } = durationParts(Math.max(1000, now - since));
+  return t("chat.deepDivingFor", {
+    duration: minutes > 0
+      ? t("duration.minutes", { minutes, seconds })
+      : t("duration.seconds", { seconds }),
+  });
+}
+
 export function retryStatus(row) {
   const copy = STAGE_COPY.retry;
   const label = row.retryState === "started"

package/src/chat/playback.js

@@ -0,0 +1,41 @@
+const SILENT_WAV = "data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQAAAAA=";
+
+/**
+ * One element, unlocked inside the gesture that asks the question (a voice
+ * press or a send tap), then reused for the answer. iOS only lets an element
+ * play later if it first played inside a gesture.
+ */
+export function createAnswerPlayer() {
+  const audio = typeof Audio === "function" ? new Audio() : null;
+  let url = "";
+  const release = () => {
+    if (!url) return;
+    URL.revokeObjectURL(url);
+    url = "";
+  };
+  return {
+    unlock() {
+      if (!audio || !audio.paused) return;
+      audio.src = SILENT_WAV;
+      void audio.play().catch(() => {});
+    },
+    async play(blob) {
+      if (!audio || !blob) return false;
+      release();
+      url = URL.createObjectURL(blob);
+      audio.src = url;
+      audio.onended = release;
+      try {
+        await audio.play();
+        return true;
+      } catch {
+        release();
+        return false;
+      }
+    },
+    stop() {
+      audio?.pause();
+      release();
+    },
+  };
+}