@linto-ai/transcript-ui-core 0.9.23 → 0.9.24-unstable.202610151359

package/src/components/SpeechActivityIndicator.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+
+defineProps<{ active: boolean }>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <!-- Always rendered, only hidden when nobody is talking: the panel's
+       stick-to-bottom watches .turns-container's height, so an element that
+       came and went in here would rescroll the whole transcript at every
+       silence. `visibility` keeps the box and drops it from the
+       accessibility tree.
+
+       Not a live region either: it comes back with every pause, and a screen
+       reader announcing it each time would talk over the transcript it is
+       supposed to accompany. -->
+  <p
+    class="speech-activity"
+    :class="{ 'speech-activity--idle': !active }"
+    role="img"
+    :aria-label="t('transcription.speaking')">
+    <span class="speech-activity-dot"></span>
+    <span class="speech-activity-dot"></span>
+    <span class="speech-activity-dot"></span>
+  </p>
+</template>
+
+<style scoped>
+/* Typing bubble, as in messaging apps. The box never changes size, only the
+   dots move inside it, so the transcript above stays still. */
+.speech-activity {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  width: fit-content;
+  margin: var(--spacing-sm) var(--spacing-lg);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg)
+    var(--radius-sm);
+  background-color: var(--color-surface-hover);
+  transition:
+    opacity 0.4s ease,
+    visibility 0.4s;
+}
+
+.speech-activity-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background-color: var(--color-text-muted);
+  animation: speech-activity-hop 1.2s infinite ease-in-out;
+}
+
+.speech-activity-dot:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.speech-activity-dot:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes speech-activity-hop {
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.55;
+  }
+  30% {
+    transform: translateY(-5px);
+    opacity: 1;
+  }
+}
+
+.speech-activity--idle {
+  opacity: 0;
+  visibility: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .speech-activity-dot {
+    animation: none;
+    opacity: 0.8;
+  }
+}
+
+@media (max-width: 767px) {
+  .speech-activity {
+    margin-inline: var(--spacing-md);
+  }
+}
+</style>

package/src/components/TranscriptUI.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onBeforeUnmount } from "vue"
+import { computed, ref, watch, onBeforeUnmount } from "vue"
 import Layout from "./Layout.vue"
 import EditorLoadingOverlay from "./EditorLoadingOverlay.vue"
 import EditorErrorOverlay from "./EditorErrorOverlay.vue"
@@ -16,11 +16,17 @@ const props = withDefaults(
     // tab left — see TabBar.vue) — a live session has no finished verbatim
     // to show, see SessionLiveNG.vue.
     noVerbatim?: boolean
+    // Hides the high-contrast switch. The theme it drives is the host's as
+    // much as the editor's — the host follows "theme:change" to darken its
+    // own chrome — so an app that has no dark values of its own turns the
+    // switch off rather than offering a half-dark screen.
+    noThemeToggle?: boolean
   }>(),
   {
     locale: "fr",
     noHeader: false,
     noVerbatim: false,
+    noThemeToggle: false,
   },
 )
 
@@ -37,6 +43,21 @@ watch(
 const core = createCore()
 provideCore(core)
 
+// A host cannot theme the editor from outside: the token declarations sit on
+// this very root, which is closer than the custom element, so they win over
+// anything set on <linto-editor>. An inline style is the one thing that
+// outranks them — hence the brand colour travels through core.primaryColor
+// rather than through CSS. The hover shade is derived so the pair stays
+// coherent instead of leaving the editor's own blue behind.
+const brandStyle = computed(() =>
+  core.primaryColor.value
+    ? {
+        "--color-primary": core.primaryColor.value,
+        "--color-primary-hover": `color-mix(in srgb, ${core.primaryColor.value} 85%, #000)`,
+      }
+    : undefined,
+)
+
 // The editor owns its loading/error overlays: loading stays up until the
 // document is loaded and (in collab mode) the first sync lands; error shows
 // when the load fails non-recoverably. Embedders don't poll or render either.
@@ -50,11 +71,20 @@ defineExpose({ core })
 </script>
 
 <template>
-  <div class="transcript-ui-root">
+  <div
+    class="transcript-ui-root"
+    :data-theme="core.theme.value"
+    :style="brandStyle">
     <Layout
       v-if="core.channels.size"
       :show-header="!props.noHeader"
-      :show-verbatim="!props.noVerbatim" />
+      :show-verbatim="!props.noVerbatim"
+      :show-theme-toggle="!props.noThemeToggle">
+      <!-- Declared on the custom element's root component so Vue renders a
+           native <slot>: the host's children with slot="header-start" land
+           in the header. -->
+      <template #header-start><slot name="header-start" /></template>
+    </Layout>
     <EditorErrorOverlay v-if="error" :message="error" />
     <EditorLoadingOverlay v-else-if="isLoading" />
   </div>

package/src/components/TranscriptionPanel.vue

@@ -11,6 +11,7 @@ import {
 import { useStickToBottom } from "vue-stick-to-bottom"
 import TranscriptionTurn from "./TranscriptionTurn.vue"
 import TranscriptionEmpty from "./TranscriptionEmpty.vue"
+import SpeechActivityIndicator from "./SpeechActivityIndicator.vue"
 import { useCore } from "../core"
 import { useI18n } from "@linto-ai/transcript-ui-i18n"
 import { useFollowPlayback } from "../composables/useFollowPlayback"
@@ -41,6 +42,21 @@ const partialTurn = computed(() => {
 })
 
 const hasLiveUpdate = computed(() => core.live?.hasLiveUpdate.value ?? false)
+
+// Set here rather than on a global stylesheet: the value stays scoped to the
+// reading surface, and the partial turn inherits it like any other.
+const transcriptFontSize = computed(() => `${core.transcriptFontSize.value}px`)
+
+// With the partial text hidden, the panel would sit perfectly still between
+// two finalized turns — nothing left to say the session is still listening.
+// The line is kept for the whole session rather than mounted when someone
+// speaks: useStickToBottom watches .turns-container, so anything appearing
+// and disappearing in there drags the transcript with it (the indicator
+// hides in place instead — see SpeechActivityIndicator).
+const showSpeechIndicator = computed(
+  () => core.live !== undefined && core.live.partialsVisible.value === false,
+)
+const isSpeechActive = computed(() => core.live?.isSpeechActive.value === true)
 const isPlaying = computed(() => core.audio?.isPlaying.value ?? false)
 
 const activeTranslation = computed(
@@ -142,7 +158,9 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <article class="transcription-panel">
+  <article
+    class="transcription-panel"
+    :style="{ '--transcript-font-size': transcriptFontSize }">
     <div ref="scrollContainer" class="scroll-container">
       <div class="turns-container">
         <div v-if="isLoadingHistory" class="history-loading" role="status">
@@ -173,6 +191,9 @@ onBeforeUnmount(() => {
           key="__partial__"
           :turn="partialTurn"
           partial />
+        <SpeechActivityIndicator
+          v-if="showSpeechIndicator"
+          :active="isSpeechActive" />
       </div>
 
       <Transition name="fade-slide">
@@ -247,11 +268,11 @@ onBeforeUnmount(() => {
   align-items: center;
 }
 
-.resume-scroll-btn {
+.transcript-ui-root .resume-scroll-btn {
   /* No backdrop-filter: this button is sticky inside the tall scroll
      container, where a backdrop-filter makes WebRender allocate a render
      target spanning the whole scroll height — multi-GB on a long transcript. */
-  background: white !important;
+  background: var(--color-surface) !important;
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-sm);
 }

package/src/components/TranscriptionTurn.vue

@@ -4,7 +4,7 @@ import { computed, ref, useTemplateRef } from "vue"
 import SpeakerLabel from "./SpeakerLabel.vue"
 import MergeTurnsButton from "./molecules/MergeTurnsButton.vue"
 import SpeakerPopover from "./molecules/SpeakerPopover.vue"
-import { useCore } from "../core"
+import { useCore, CROSS_TRANSLATION_ID } from "../core"
 import { useTurnSelection } from "../composables/useTurnSelection"
 import { useI18n } from "@linto-ai/transcript-ui-i18n"
 import * as utils from "../utils"
@@ -47,6 +47,15 @@ const isTurnActive = computed(() => {
 
 const speakerColor = computed(() => props.speaker?.color ?? "transparent")
 
+// On a real translation track every turn is in the same language and the
+// selector already names it. The source keeps it — a channel can be
+// multilingual — and so does cross mode, where turns alternate on purpose.
+const showLanguage = computed(() => {
+  const active = core.activeChannel.value?.activeTranslation.value
+  if (!active) return true
+  return active.isSource || active.id === CROSS_TRANSLATION_ID
+})
+
 const isSelected = computed(() => selection.isSelected(props.turn.id))
 
 const checkboxLabel = computed(() => {
@@ -78,6 +87,12 @@ const turnLock = computed(() =>
     : core.transcriptionEditor?.getTurnLock(props.turn.id),
 )
 
+// Both things that can fill the header's action slot — the save/cancel pair
+// while editing, another session's lock avatar otherwise — come from the
+// transcription editor. Without that plugin (a live session) the row can
+// never host anything, so it has no height to reserve.
+const hasEditActions = computed(() => core.transcriptionEditor !== undefined)
+
 const lockedByLabel = computed(() =>
   turnLock.value
     ? t("transcription.lockedBy").replace("{name}", turnLock.value.userName)
@@ -202,7 +217,11 @@ function onCheckboxChange(event: MouseEvent) {
       v-if="previousTurnId && !partial && !live"
       :first-turn-id="previousTurnId"
       :second-turn-id="turn.id" />
-    <div v-if="!partial" class="turn-header" @click="onHeaderClick">
+    <div
+      v-if="!partial"
+      class="turn-header"
+      :class="{ 'turn-header--with-actions': hasEditActions }"
+      @click="onHeaderClick">
       <EditorCheckbox
         v-if="selection.hasSelection.value"
         :model-value="isSelected"
@@ -218,6 +237,7 @@ function onCheckboxChange(event: MouseEvent) {
           :start-time="turn.startTime"
           :start-date="turn.startDate"
           :language="turn.language"
+          :show-language="showLanguage"
           interactive />
       </SpeakerPopover>
       <button
@@ -230,6 +250,7 @@ function onCheckboxChange(event: MouseEvent) {
           :start-time="turn.startTime"
           :start-date="turn.startDate"
           :language="turn.language"
+          :show-language="showLanguage"
           interactive />
       </button>
       <SpeakerLabel
@@ -237,7 +258,8 @@ function onCheckboxChange(event: MouseEvent) {
         :speaker="speaker"
         :start-time="turn.startTime"
         :start-date="turn.startDate"
-        :language="turn.language" />
+        :language="turn.language"
+        :show-language="showLanguage" />
       <div v-if="isEditing || turnLock" class="turn-edit-actions">
         <template v-if="isEditing">
           <Button
@@ -308,8 +330,13 @@ function onCheckboxChange(event: MouseEvent) {
   user-select: none;
   border-radius: var(--radius-sm);
   padding: var(--spacing-xxs) 0;
-  /* Reserve the edit-actions height (Button sm) so entering/leaving edit
-     mode never shifts the layout. */
+}
+
+/* Reserve the edit-actions height (Button sm) so entering/leaving edit mode
+   never shifts the layout — but only where those actions can appear at all.
+   Read-only, the row holds a line of metadata and has no reason to be 36px
+   tall. */
+.turn-header--with-actions {
   min-height: 36px;
 }
 
@@ -339,7 +366,7 @@ function onCheckboxChange(event: MouseEvent) {
 
 .turn-text {
   margin-top: var(--spacing-xs);
-  font-size: var(--font-size-base);
+  font-size: var(--transcript-font-size);
   line-height: var(--line-height);
   color: var(--color-text-primary);
 }

package/src/composables/useFollowPlayback.ts

@@ -1,4 +1,4 @@
-import { ref, watch, onMounted, onBeforeUnmount, type Ref } from "vue"
+import { ref, watch, nextTick, onMounted, onBeforeUnmount, type Ref } from "vue"
 import { useCore } from "../core"
 import { activeWordRange } from "../utils/wordRange"
 
@@ -84,6 +84,9 @@ export function useFollowPlayback(
   // track — symmetric with the isPlaying re-enable above.
   const stopSeekListener = core.on("audio:seek", () => {
     isFollowing.value = true
+    // The active word is recomputed on the next flush — scroll after it, so a
+    // seek landing on the already-active word still brings it back into view.
+    nextTick(scrollToActive)
   })
 
   function onManualScroll() {

package/src/composables/useIsMobile.ts

@@ -1,26 +1,9 @@
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-
-const MOBILE_BREAKPOINT = '(max-width: 767px)'
-
-export function useIsMobile() {
-  // Read right away, not on mount: the first render must already match the
-  // viewport, or a phone briefly mounts desktop-only UI before swapping it.
-  const isMobile = ref(window.matchMedia(MOBILE_BREAKPOINT).matches)
-  let mql: MediaQueryList | null = null
-
-  function onChange(e: MediaQueryListEvent) {
-    isMobile.value = e.matches
-  }
-
-  onMounted(() => {
-    mql = window.matchMedia(MOBILE_BREAKPOINT)
-    isMobile.value = mql.matches
-    mql.addEventListener('change', onChange)
-  })
-
-  onBeforeUnmount(() => {
-    mql?.removeEventListener('change', onChange)
-  })
-
-  return { isMobile }
+import type { Ref } from "vue"
+import { useCore } from "../core/useCore"
+
+/** The core owns the breakpoint (see core/modules/viewport) — this is the
+ *  component-side reader, kept as a composable for the call sites that had
+ *  one, and for plugin panels that switch layout at the same width. */
+export function useIsMobile(): { isMobile: Readonly<Ref<boolean>> } {
+  return { isMobile: useCore().isMobile }
 }

package/src/core/capabilities.ts

@@ -0,0 +1,18 @@
+import type { CoreCapabilities, SummaryCapabilities } from "./types"
+
+/** What the reports offered before capabilities covered them: generate and
+ *  edit, but no generation of a report that is already up to date. */
+export const DEFAULT_SUMMARY_CAPABILITIES: Readonly<SummaryCapabilities> =
+  Object.freeze({ generate: true, edit: true, forceGenerate: false })
+
+/** The report permissions, defaults filled in for a host that sets none. */
+export function computeSummaryCapabilities(
+  capabilities: CoreCapabilities,
+): Readonly<SummaryCapabilities> {
+  return capabilities.summary ?? DEFAULT_SUMMARY_CAPABILITIES
+}
+
+/** Whether the reader may chat. A host that sets nothing keeps the chat. */
+export function computeCanChat(capabilities: CoreCapabilities): boolean {
+  return capabilities.chat !== "disabled"
+}

package/src/core/createCore.ts

@@ -1,9 +1,10 @@
-import { ref, computed, shallowReactive, type Component } from "vue"
+import { ref, computed, shallowReactive, watch, type Component } from "vue"
 import type { DownloadFormat } from "@linto-ai/transcript-ui-ui"
 import type { Channel, EditorDocument } from "../types/editor"
 import type {
   Core,
   CoreOptions,
+  EditorTheme,
   CoreEventMap,
   CoreCapabilities,
   CorePlugin,
@@ -11,6 +12,7 @@ import type {
   UISlot,
 } from "./types"
 import { createEventBus } from "./modules/eventBus"
+import { createViewport } from "./modules/viewport"
 import { createSpeakersStore } from "./stores/speakersStore"
 import { createChannelStore } from "./stores/channelStore"
 import type { ChannelStore } from "./types"
@@ -18,6 +20,9 @@ import { ensureDocumentSpeakers } from "./helpers/ensureDocumentSpeakers"
 import { ensureSpeakersFromTurns } from "./helpers/ensureSpeakersFromTurns"
 import * as utils from "../utils"
 
+/** 1.125rem, the --font-size-base the transcript used before it was tunable. */
+const DEFAULT_TRANSCRIPT_FONT_SIZE = 18
+
 // No backend can generate this — it's just the turns joined into text — so
 // it's the one format the core always offers and fulfills itself.
 const DEFAULT_VERBATIM_FORMATS: DownloadFormat[] = [
@@ -49,6 +54,49 @@ export function createCore(options: CoreOptions = {}): Core {
 
   const { on, off, emit, clear: clearEvents } = createEventBus<CoreEventMap>()
 
+  // ── Reading ────────────────────────────────────────────────────────
+
+  const transcriptFontSize = ref(DEFAULT_TRANSCRIPT_FONT_SIZE)
+  const theme = ref<EditorTheme>("light")
+  const primaryColor = ref<string | null>(null)
+  // Announced like the reading size: the editor applies the theme to its own
+  // root, and a host that wants its chrome to follow listens for it.
+  const stopThemeSync = watch(theme, (next) =>
+    emit("theme:change", { theme: next }),
+  )
+  // Announced rather than stored: the editor keeps no preferences of its own
+  // (it holds no storage at all), so a host that wants this to survive a
+  // reload listens and restores it — the same deal as the watermark.
+  const stopFontSizeSync = watch(transcriptFontSize, (fontSize) =>
+    emit("transcript:fontSize", { fontSize }),
+  )
+
+  // ── Layout chrome ──────────────────────────────────────────────────
+
+  // The core owns the media query rather than each component watching its
+  // own: a host rendering its own header reads the same value the layout
+  // switches on, and there is a single listener to release on destroy.
+  const viewport = createViewport(onViewportChange)
+  const sidebarOpen = ref(false)
+
+  // Only the phone-width layout mounts the sidebar drawer, so "open" is
+  // refused anywhere else instead of being stored: a host header that isn't
+  // width-gated would otherwise leave the drawer armed and drop it on screen,
+  // focus trapped, at the next resize below the breakpoint.
+  function setSidebarOpen(open: boolean): void {
+    if (open && !viewport.isMobile.value) return
+    if (open === sidebarOpen.value) return
+    sidebarOpen.value = open
+    emit("sidebar:open", { open })
+  }
+
+  function onViewportChange(isMobile: boolean): void {
+    emit("viewport:change", { isMobile })
+    // Same invariant, the other way round: leaving phone width unmounts the
+    // drawer, so the state can't keep claiming it is open.
+    if (!isMobile) setSidebarOpen(false)
+  }
+
   // ── Speakers ───────────────────────────────────────────────────────
 
   const speakersInternal = createSpeakersStore(emit)
@@ -116,8 +164,28 @@ export function createCore(options: CoreOptions = {}): Core {
     if (channelId === activeChannelId.value) return
     activeChannelId.value = channelId
     emit("channel:change", { channelId })
+    // A channel change restores the track that channel was on, without a
+    // translation:change of its own.
+    emitActiveTrackChange()
   }
 
+  // ── Active track ───────────────────────────────────────────────────
+
+  function emitActiveTrackChange(): void {
+    const channel = activeChannel.value
+    if (!channel) return
+    emit("activeTrack:change", {
+      channelId: channel.id,
+      translationId: channel.activeTranslation.value.id,
+    })
+  }
+
+  // A channel store doesn't know whether it is the displayed one: the core
+  // relays its translation:change only for the active channel.
+  on("translation:change", ({ channelId }) => {
+    if (channelId === activeChannel.value?.id) emitActiveTrackChange()
+  })
+
   function setChannel(channelId: string, channel: Channel): void {
     if (!channels.has(channelId)) return
 
@@ -145,6 +213,9 @@ export function createCore(options: CoreOptions = {}): Core {
     cleanups.forEach((fn) => fn())
     cleanups.length = 0
     for (const channel of channels.values()) channel.dispose()
+    stopFontSizeSync()
+    stopThemeSync()
+    viewport.destroy()
     clearEvents()
   }
 
@@ -166,6 +237,12 @@ export function createCore(options: CoreOptions = {}): Core {
     speakers,
     channels,
     activeChannel,
+    transcriptFontSize,
+    theme,
+    primaryColor,
+    isMobile: viewport.isMobile,
+    sidebarOpen,
+    setSidebarOpen,
     components,
     onActiveTranslation,
     setDocument,

package/src/core/index.ts

@@ -1,12 +1,18 @@
 export { createCore } from './createCore'
 export { provideCore, useCore } from './useCore'
 export { CROSS_TRANSLATION_ID } from './stores'
+export {
+  DEFAULT_SUMMARY_CAPABILITIES,
+  computeSummaryCapabilities,
+  computeCanChat,
+} from './capabilities'
 export type {
   Core,
   CorePlugin,
   CoreEventMap,
   CoreOptions,
   CoreCapabilities,
+  SummaryCapabilities,
   TurnEventKey,
   UISlot,
   ReadableTranslation,
@@ -43,6 +49,7 @@ export type {
   LLMServicesPluginApi,
   ChatRole,
   ChatMessage,
+  ChatMessageError,
   ChatSession,
   ChatPluginApi,
 } from './types'

package/src/core/modules/viewport.ts

@@ -0,0 +1,48 @@
+import { ref, type Ref } from "vue"
+
+/** Same width the layout's CSS switches on — keep the two in sync. */
+const MOBILE_BREAKPOINT = "(max-width: 767px)"
+
+export interface Viewport {
+  readonly isMobile: Readonly<Ref<boolean>>
+  destroy(): void
+}
+
+/** Owns the mobile-width media query for the whole core: one listener for
+ *  every consumer, released on core.destroy(). `onChange` fires on every
+ *  crossing of the breakpoint, synchronously — what the core hangs its
+ *  layout invariants on, rather than a watcher that lands a tick later.
+ *
+ *  Outside a browser (unit tests run without a DOM) there is no viewport to
+ *  watch, so isMobile stays false rather than the core failing to build. */
+export function createViewport(
+  onChange: (isMobile: boolean) => void,
+): Viewport {
+  const isMobile = ref(false)
+
+  if (
+    typeof window === "undefined" ||
+    typeof window.matchMedia !== "function"
+  ) {
+    return { isMobile, destroy() {} }
+  }
+
+  // Read synchronously, not on mount: the first render must already match
+  // the viewport, or a phone briefly mounts desktop-only UI before swapping.
+  const query = window.matchMedia(MOBILE_BREAKPOINT)
+  isMobile.value = query.matches
+
+  function onQueryChange(event: MediaQueryListEvent): void {
+    isMobile.value = event.matches
+    onChange(event.matches)
+  }
+
+  query.addEventListener("change", onQueryChange)
+
+  return {
+    isMobile,
+    destroy() {
+      query.removeEventListener("change", onQueryChange)
+    },
+  }
+}

package/src/core/stores/channelStore.ts

@@ -65,7 +65,10 @@ export function createChannelStore(
     const normalized = translationId === sourceTranslation.id ? null : translationId
     if (normalized === activeTranslationId.value) return
     activeTranslationId.value = normalized
-    emit("translation:change", { translationId: activeTranslation.value.id })
+    emit("translation:change", {
+      channelId: id,
+      translationId: activeTranslation.value.id,
+    })
   }
 
   function reset(): void {

package/src/core/stores/test/translationStore.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "bun:test"
+import { createTranslationStore } from "../translationStore"
+
+function makeStore() {
+  return createTranslationStore(
+    { id: "tr-1", languages: ["fr"], isSource: true, turns: [] },
+    () => {},
+    () => {},
+  )
+}
+
+describe("translationStore — advanceLastModifiedAt", () => {
+  it("moves forward only", () => {
+    const store = makeStore()
+    store.advanceLastModifiedAt(2000)
+    store.advanceLastModifiedAt(1000)
+    store.advanceLastModifiedAt(2000)
+    expect(store.lastModifiedAt.value).toBe(2000)
+
+    store.advanceLastModifiedAt(3000)
+    expect(store.lastModifiedAt.value).toBe(3000)
+  })
+
+  it("ignores null and non-finite timestamps", () => {
+    const store = makeStore()
+    store.advanceLastModifiedAt(null)
+    store.advanceLastModifiedAt(Number.NaN)
+    expect(store.lastModifiedAt.value).toBeNull()
+
+    store.advanceLastModifiedAt(1000)
+    store.advanceLastModifiedAt(null)
+    store.advanceLastModifiedAt(Number.POSITIVE_INFINITY)
+    expect(store.lastModifiedAt.value).toBe(1000)
+  })
+})

package/src/core/stores/translationStore.ts

@@ -28,7 +28,10 @@ export function createTranslationStore(
   const turns = shallowRef<Turn[]>(init.turns)
   const lastModifiedAt = ref<number | null>(null)
 
-  function setLastModifiedAt(ts: number | null): void {
+  function advanceLastModifiedAt(ts: number | null): void {
+    if (ts == null || !Number.isFinite(ts)) return
+    const current = lastModifiedAt.value
+    if (current != null && ts <= current) return
     lastModifiedAt.value = ts
   }
 
@@ -118,7 +121,7 @@ export function createTranslationStore(
     audio,
     turns,
     lastModifiedAt,
-    setLastModifiedAt,
+    advanceLastModifiedAt,
     addTurn,
     prependTurns,
     updateTurn,