@olares/lares-mobile 0.15.5 → 0.15.6

package/src/chat/MessageActions.vue

@@ -1,56 +1,75 @@
 <template>
   <div class="lares-actions" role="toolbar" :aria-label="t('action.bar')">
     <div class="lares-actions__left">
-      <button type="button" :aria-label="copied ? t('action.copied') : t('action.copy')" @click="copy">
-        <svg viewBox="0 0 24 24" aria-hidden="true">
-          <rect x="9" y="9" width="11" height="13" rx="2" />
-          <path d="M6 16H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-        </svg>
-      </button>
-      <button
-        type="button"
-        :aria-label="t('action.like')"
-        :aria-pressed="reaction === 'like' ? 'true' : 'false'"
-        :data-on="reaction === 'like' ? 'true' : 'false'"
-        @click="$emit('react', reaction === 'like' ? '' : 'like')"
-      >
-        <svg viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M7 11v10H4a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h3Zm0 0 4.2-8.1A2.2 2.2 0 0 1 15.2 4v5H20a2 2 0 0 1 2 2.3l-1.2 8A2 2 0 0 1 18.8 21H7" />
-        </svg>
-      </button>
-      <button
-        type="button"
-        :aria-label="t('action.dislike')"
-        :aria-pressed="reaction === 'dislike' ? 'true' : 'false'"
-        :data-on="reaction === 'dislike' ? 'true' : 'false'"
-        @click="$emit('react', reaction === 'dislike' ? '' : 'dislike')"
-      >
-        <svg viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M17 13V3h3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-3Zm0 0-4.2 8.1A2.2 2.2 0 0 1 8.8 20v-5H4a2 2 0 0 1-2-2.3l1.2-8A2 2 0 0 1 5.2 3H17" />
-        </svg>
-      </button>
-      <button type="button" :aria-label="t('action.share')" @click="share">
-        <svg viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M4 20v-7a4 4 0 0 1 4-4h12" />
-          <path d="m16 5 4 4-4 4" />
-        </svg>
-      </button>
+      <LaresPcTooltip :label="copied ? t('action.copied') : t('action.copy')">
+        <button type="button" :aria-label="copied ? t('action.copied') : t('action.copy')" @click="copy">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <rect x="9" y="9" width="11" height="13" rx="2" />
+            <path d="M6 16H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+          </svg>
+        </button>
+      </LaresPcTooltip>
+      <LaresPcTooltip :label="t('action.like')">
+        <button
+          type="button"
+          :aria-label="t('action.like')"
+          :aria-pressed="reaction === 'like' ? 'true' : 'false'"
+          :data-on="reaction === 'like' ? 'true' : 'false'"
+          @click="$emit('react', reaction === 'like' ? '' : 'like')"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M7 11v10H4a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h3Zm0 0 4.2-8.1A2.2 2.2 0 0 1 15.2 4v5H20a2 2 0 0 1 2 2.3l-1.2 8A2 2 0 0 1 18.8 21H7" />
+          </svg>
+        </button>
+      </LaresPcTooltip>
+      <LaresPcTooltip :label="t('action.dislike')">
+        <button
+          type="button"
+          :aria-label="t('action.dislike')"
+          :aria-pressed="reaction === 'dislike' ? 'true' : 'false'"
+          :data-on="reaction === 'dislike' ? 'true' : 'false'"
+          @click="$emit('react', reaction === 'dislike' ? '' : 'dislike')"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M17 13V3h3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-3Zm0 0-4.2 8.1A2.2 2.2 0 0 1 8.8 20v-5H4a2 2 0 0 1-2-2.3l1.2-8A2 2 0 0 1 5.2 3H17" />
+          </svg>
+        </button>
+      </LaresPcTooltip>
+      <LaresPcTooltip :label="t('action.share')">
+        <button type="button" :aria-label="t('action.share')" @click="share">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M4 20v-7a4 4 0 0 1 4-4h12" />
+            <path d="m16 5 4 4-4 4" />
+          </svg>
+        </button>
+      </LaresPcTooltip>
     </div>
+    <span v-if="stats" class="lares-actions__stats">{{ stats }}</span>
   </div>
 </template>
 
 <script>
+import { metricsLine } from "./format.js";
+import LaresPcTooltip from "../desktop/ui/PcTooltip.vue";
+
 export default {
   name: "LaresMessageActions",
+  components: { LaresPcTooltip },
   props: {
     text: { type: String, default: "" },
     reaction: { type: String, default: "" },
+    metrics: { type: Object, default: null },
     t: { type: Function, required: true },
   },
   emits: ["react"],
   data() {
     return { copied: false, copyTimer: 0 };
   },
+  computed: {
+    stats() {
+      return metricsLine(this.metrics, this.t);
+    },
+  },
   beforeUnmount() {
     if (this.copyTimer) clearTimeout(this.copyTimer);
   },
@@ -117,6 +136,41 @@ export default {
   background: var(--q-btn-bg-pressed);
 }
 
+/* Pointer chrome only: on touch there is no hover to reveal the readings, and
+   the mobile reply keeps its bare row of icons. */
+.lares-actions__stats {
+  display: none;
+}
+
+@media (hover: hover) {
+  .lares-actions__stats {
+    display: inline;
+    opacity: 0;
+    transition: opacity 80ms ease;
+    color: var(--q-ink-3);
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  .lares-actions button {
+    cursor: pointer;
+  }
+
+  .lares-actions button:hover {
+    background: var(--q-background-hover);
+    color: var(--q-ink-2);
+  }
+
+  .lares-actions button[data-on="true"]:hover {
+    color: var(--q-blue-default);
+  }
+
+  .lares-actions:hover .lares-actions__stats,
+  .lares-actions:focus-within .lares-actions__stats {
+    opacity: 1;
+  }
+}
+
 .lares-actions svg {
   width: 18px;
   height: 18px;

package/src/chat/QuestionCard.vue

@@ -74,13 +74,13 @@ export default {
 .lares-question__heading {
   margin: 0;
   color: var(--q-ink-2);
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .lares-question__prompt {
   margin: 0;
   color: var(--q-ink-1);
-  font-size: 15px;
+  font-size: 17px;
   font-weight: 500;
 }
 
@@ -88,7 +88,7 @@ export default {
 .lares-question__wait {
   margin: 0;
   color: var(--q-ink-3);
-  font-size: 13px;
+  font-size: 15px;
 }
 
 .lares-question__options {
@@ -115,12 +115,12 @@ export default {
 }
 
 .lares-question__label {
-  font-size: 14px;
+  font-size: 16px;
   color: var(--q-ink-1);
 }
 
 .lares-question__hint {
-  font-size: 12px;
+  font-size: 14px;
   color: var(--q-ink-3);
 }
 </style>

package/src/chat/StageRow.vue

@@ -78,8 +78,8 @@ export default {
 .lares-stage__summary {
   min-width: 0;
   overflow: hidden;
-  font-size: 14px;
-  line-height: 24px;
+  font-size: 16px;
+  line-height: 26px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -106,14 +106,14 @@ export default {
   box-sizing: border-box;
   min-width: 0;
   max-width: 100%;
-  max-height: 141px;
+  max-height: 156px;
   margin: 4px 0 0 22px;
   border-radius: 8px;
   padding: 10px 12px;
   overflow: auto;
   background: var(--q-background-3);
   color: var(--q-ink-2);
-  font: 400 11px/16px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font: 400 13px/18px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   word-break: break-word;
@@ -126,6 +126,9 @@ export default {
   border-left: 2px solid var(--q-input-stroke);
   padding: 0 0 0 12px;
   background: transparent;
-  font: 400 13px/1.6 inherit;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.6;
 }
 </style>

package/src/chat/Transcript.vue

@@ -33,7 +33,7 @@
         :body="row.text"
       />
       <LaresQuestionCard
-        v-else-if="row.type === 'tool' && row.name === 'ask_user_question' && row.status === 'running'"
+        v-else-if="!questionTakeover && row.type === 'tool' && row.name === 'ask_user_question' && row.status === 'running'"
         :questions="questionItems(row)"
         :rpc-id="question?.rpcId || ''"
         :busy="questionBusy"
@@ -64,6 +64,7 @@
         <LaresMessageActions
           :text="row.text"
           :reaction="reactions[actionKey(index)] || ''"
+          :metrics="row.metrics || null"
           :t="t"
           @react="setReaction(index, $event)"
         />
@@ -106,6 +107,7 @@ export default {
     sessionId: { type: String, default: "" },
     question: { type: Object, default: null },
     questionBusy: { type: Boolean, default: false },
+    questionTakeover: { type: Boolean, default: false },
     t: { type: Function, required: true },
   },
   emits: ["open", "media", "answer"],
@@ -225,7 +227,7 @@ export default {
 
 .lares-log__empty {
   margin: 24px 0 0;
-  font-size: 13px;
+  font-size: 15px;
   color: var(--q-ink-3);
 }
 
@@ -267,7 +269,8 @@ export default {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .lares-sk {
+  .lares-sk,
+  .lares-log__item[data-pending="true"] {
     animation: none;
   }
 }
@@ -280,6 +283,17 @@ export default {
   max-width: 100%;
 }
 
+.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));
+}
+
+@keyframes lares-msg-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
 .lares-log__item[data-type="user"],
 .lares-log__item[data-type="assistant"],
 .lares-log__item[data-type="files"] {
@@ -305,7 +319,7 @@ export default {
   min-width: 0;
   max-width: 100%;
   overflow-x: hidden;
-  font-size: 15px;
+  font-size: 17px;
   line-height: 1.55;
   word-break: break-word;
   overflow-wrap: anywhere;
@@ -350,7 +364,7 @@ export default {
 .lares-md :deep(h2),
 .lares-md :deep(h3) {
   margin: 0 0 8px;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 600;
 }
 
@@ -358,7 +372,7 @@ export default {
   border-radius: 4px;
   padding: 1px 4px;
   background: var(--q-background-3);
-  font-size: 13px;
+  font-size: 15px;
 }
 
 .lares-md :deep(pre) {

package/src/chat/composer-tokens.js

@@ -0,0 +1,32 @@
+import { activeReferenceToken, insertReference } from "@olares/lares-core/larepass/references";
+
+export const REFERENCE_DEBOUNCE_MS = 100;
+
+export function referenceRows(references, t) {
+  let previous = "";
+  return (references ?? []).map((row) => {
+    const group = row.kind === "session" ? "sessions" : "files";
+    const section = group === previous ? "" : t(`references.section.${group}`);
+    previous = group;
+    return { ...row, section, name: `${t(`references.${row.kind}`)} · ${row.label}` };
+  });
+}
+
+export function visibleCommands(commands, draft, commandTyped) {
+  const rows = commands ?? [];
+  if (!commandTyped) return rows;
+  const needle = String(draft).match(/^\/([^\s]*)$/)?.[1]?.toLowerCase() ?? "";
+  return rows.filter((row) => row.name.toLowerCase().includes(needle));
+}
+
+export function isCommandLine(draft) {
+  return /^\/[^\s]*$/.test(String(draft ?? ""));
+}
+
+export function activeReference(draft, caret) {
+  return activeReferenceToken(draft, caret);
+}
+
+export function applyReference(draft, token, row) {
+  return insertReference(draft, token, row);
+}

package/src/chat/format.js

@@ -1,5 +1,11 @@
 import { interpolate } from "@olares/lares-core/i18n/t";
 import { STAGE_COPY } from "@olares/lares-core/larepass/stage-copy";
+import {
+  clockParts,
+  durationParts,
+  latencySeconds,
+  throughputTokens,
+} from "@olares/lares-core/larepass/turn-metrics";
 
 export function withPendingUser(items, pendingUser) {
   if (!pendingUser) return items;
@@ -50,6 +56,37 @@ export function failText(t, failed, error) {
   return t("chat.failed", { error: failed || error });
 }
 
+function clockText(time, t, now) {
+  const { clock, scope, y, m, d } = clockParts(time, now);
+  if (scope === "day") return clock;
+  return `${t(scope === "md" ? "clock.md" : "clock.ymd", { y, m, d })} ${clock}`;
+}
+
+/**
+ * The reply's own footer: when it landed, and whatever the log recorded about
+ * how it got there. Each reading is dropped rather than faked when the events
+ * never carried it.
+ */
+export function metricsLine(metrics, t, now = Date.now()) {
+  if (!metrics?.time) return "";
+  const parts = [clockText(metrics.time, t, now)];
+  if (metrics.runMs !== undefined) {
+    const { minutes, seconds } = durationParts(metrics.runMs);
+    parts.push(t("message.ranFor", {
+      duration: minutes > 0
+        ? t("duration.minutes", { minutes, seconds })
+        : t("duration.seconds", { seconds }),
+    }));
+  }
+  if (metrics.ttftMs !== undefined) {
+    parts.push(t("message.ttft", { seconds: latencySeconds(metrics.ttftMs) }));
+  }
+  if (metrics.tokensPerSecond !== undefined) {
+    parts.push(t("message.tokensPerSecond", { tps: throughputTokens(metrics.tokensPerSecond) }));
+  }
+  return parts.join(" · ");
+}
+
 export function retryStatus(row) {
   const copy = STAGE_COPY.retry;
   const label = row.retryState === "started"