@meistrari/chat-nuxt 3.16.0 → 3.17.0-rc.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "3.16.0-rc.5",
+  "version": "3.17.0-rc.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/assets/css/markstream.css

@@ -1 +1 @@
-.markstream-vue{font-family:inherit;--at-apply:"body-16-regular leading-24px text-primary";--list-item-marker:#a3a3a3;--list-item-counter-marker:#262626}.markstream-vue code,.markstream-vue kbd,.markstream-vue pre,.markstream-vue samp{font-family:Geist Mono Variable,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:13px;font-variation-settings:normal;letter-spacing:0;line-height:1.5}.markstream-vue ol,.markstream-vue ul{margin:8px 0;padding-left:1.5em}.markstream-vue .hr-node{border-color:#e5e5e5;border-top-width:.5px;margin-bottom:24px;margin-top:24px}.markstream-vue .strong-node{--at-apply:"font-580"}.markstream-vue .list-node.list-node{margin-bottom:8px;margin-left:4px;margin-top:8px;padding-left:1em}.markstream-vue ul{list-style:disc;list-style-position:outside}.markstream-vue ol{list-style:decimal;list-style-position:outside}.markstream-vue li{margin:4px 0}.markstream-vue .paragraph-node{--at-apply:"body-16-regular leading-24px";margin:0}.markstream-vue>.node-slot[data-node-type=paragraph]:not(:first-child){margin-top:12px}.markstream-vue .my-8{margin-bottom:8px;margin-top:8px}.markstream-vue .heading-node.heading-1,.markstream-vue h1{--at-apply:"heading-h2-semibold text-primary";margin:24px 0 8px}.markstream-vue .heading-node.heading-2,.markstream-vue h2{--at-apply:"heading-h3-semibold text-primary";margin:24px 0 8px}.markstream-vue .heading-node.heading-3,.markstream-vue h3{--at-apply:"heading-h4-semibold text-primary";margin:20px 0 8px}.markstream-vue .heading-node.heading-4,.markstream-vue .heading-node.heading-5,.markstream-vue .heading-node.heading-6,.markstream-vue h4,.markstream-vue h5,.markstream-vue h6{--at-apply:"heading-h5-semibold text-primary";margin:16px 0 8px}.markstream-vue>.node-slot:first-child .heading-node{margin-top:0}.markstream-vue [class*=tooltip],[class*=tooltip-element]{background-color:var(--neutral-900,#1a1a1a)!important;border-radius:4px;color:#fff!important;font-size:12px;padding:4px 8px}.mention-tag{align-items:center;border-radius:9999px;display:inline-flex;font-size:.875em;font-weight:500;gap:4px;padding:2px 8px;vertical-align:middle;white-space:nowrap}.mention-tag-file{background-color:rgba(127,189,247,.12);color:#7fbdf7}.mention-tag-skill{background-color:rgba(155,111,222,.12);color:#9b6fde}.mention-tag-canvas{background-color:rgba(234,161,65,.12);color:#d4882e}.mention-tag>span[class*=i-ph]{flex-shrink:0}
+.markstream-vue{font-family:inherit;--at-apply:"body-16-regular leading-24px text-primary";--list-item-marker:#a3a3a3;--list-item-counter-marker:#262626}.markstream-vue code,.markstream-vue kbd,.markstream-vue pre,.markstream-vue samp{font-family:Geist Mono Variable,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:13px;font-variation-settings:normal;letter-spacing:0;line-height:1.5}.markstream-vue ol,.markstream-vue ul{margin:8px 0;padding-left:1.5em}.markstream-vue .hr-node{border-color:#e5e5e5;border-top-width:.5px;margin-bottom:24px;margin-top:24px}.markstream-vue .strong-node{--at-apply:"font-580"}.markstream-vue .list-node.list-node{margin-bottom:8px;margin-left:4px;margin-top:8px;padding-left:1em}.markstream-vue ul{list-style:disc;list-style-position:outside}.markstream-vue ol{list-style:decimal;list-style-position:outside}.markstream-vue li{margin:4px 0}.markstream-vue .paragraph-node{--at-apply:"body-16-regular leading-24px";margin:0}.markstream-vue>.node-slot[data-node-type=paragraph]:not(:first-child){margin-top:12px}@keyframes chat-stream-chunk-in{0%{opacity:0}to{opacity:1}}.markstream-vue .chat-stream-chunk{animation:chat-stream-chunk-in var(--chat-stream-fade-duration,.32s) cubic-bezier(.2,0,0,1) both}@media (prefers-reduced-motion:reduce){.markstream-vue .chat-stream-chunk{animation:none}}.markstream-vue .typewriter-cursor,.markstream-vue .typewriter-simple-cursor .typewriter-simple-cursor-target:after{display:none}.markstream-vue .my-8{margin-bottom:8px;margin-top:8px}.markstream-vue .heading-node.heading-1,.markstream-vue h1{--at-apply:"heading-h2-semibold text-primary";margin:24px 0 8px}.markstream-vue .heading-node.heading-2,.markstream-vue h2{--at-apply:"heading-h3-semibold text-primary";margin:24px 0 8px}.markstream-vue .heading-node.heading-3,.markstream-vue h3{--at-apply:"heading-h4-semibold text-primary";margin:20px 0 8px}.markstream-vue .heading-node.heading-4,.markstream-vue .heading-node.heading-5,.markstream-vue .heading-node.heading-6,.markstream-vue h4,.markstream-vue h5,.markstream-vue h6{--at-apply:"heading-h5-semibold text-primary";margin:16px 0 8px}.markstream-vue>.node-slot:first-child .heading-node{margin-top:0}.markstream-vue [class*=tooltip],[class*=tooltip-element]{background-color:var(--neutral-900,#1a1a1a)!important;border-radius:4px;color:#fff!important;font-size:12px;padding:4px 8px}.mention-tag{align-items:center;border-radius:9999px;display:inline-flex;font-size:.875em;font-weight:500;gap:4px;padding:2px 8px;vertical-align:middle;white-space:nowrap}.mention-tag-file{background-color:rgba(127,189,247,.12);color:#7fbdf7}.mention-tag-skill{background-color:rgba(155,111,222,.12);color:#9b6fde}.mention-tag-canvas{background-color:rgba(234,161,65,.12);color:#d4882e}.mention-tag>span[class*=i-ph]{flex-shrink:0}

package/dist/runtime/messages/components/chat-debug-workbench.vue

@@ -286,7 +286,7 @@ function eventToneClass(tone) {
                 <dl class="metric-grid">
                     <div>
                         <dt body-10-regular text-tertiary>
-                            Event → paint
+                            Event → frame
                         </dt>
                         <dd heading-h3-semibold tabular-nums>
                             {{ diagnostics.paintLatencyMs.toFixed(1) }}<small>ms</small>
@@ -294,7 +294,7 @@ function eventToneClass(tone) {
                     </div>
                     <div>
                         <dt body-10-regular text-tertiary>
-                            Dropped frames
+                            Est. missed frames
                         </dt>
                         <dd heading-h3-semibold tabular-nums>
                             {{ diagnostics.droppedFrames }}
@@ -390,7 +390,7 @@ function eventToneClass(tone) {
                     </div>
                     <div>
                         <dt text-tertiary>
-                            Largest move
+                            Unexpected move
                         </dt><dd text-primary tabular-nums>
                             {{ diagnostics.maxScrollJump.toFixed(0) }} px
                         </dd>

package/dist/runtime/messages/components/chat-message-list.vue

@@ -55,6 +55,7 @@ defineExpose({
 <template>
     <div
         class="chat-message-list"
+        :data-chat-bottom-pinned="isPinned"
         :data-variant="variant ?? 'page'"
         flex="~ col"
         flex-1

package/dist/runtime/messages/components/reasoning/chat-reasoning-collapsible-content.vue

@@ -1,7 +1,12 @@
 <script setup>
-defineProps({
+const props = defineProps({
   open: { type: Boolean, required: true }
 });
+const hasOpened = ref(props.open);
+watch(() => props.open, (open) => {
+  if (open)
+    hasOpened.value = true;
+});
 </script>
 
 <template>
@@ -15,7 +20,7 @@ defineProps({
             :inert="open ? void 0 : true"
             :aria-hidden="!open"
         >
-            <slot />
+            <slot v-if="hasOpened" />
         </TelaCollapsibleContent>
     </div>
 </template>

package/dist/runtime/messages/components/reasoning/chat-reasoning-steps.vue

@@ -13,7 +13,12 @@ const groupedReasoning = computed(() => {
 </script>
 
 <template>
-    <div v-if="groupedReasoning.length > 0" flex="~ col" gap-2px w-full>
+    <div
+        v-if="groupedReasoning.length > 0"
+        class="chat-reasoning-steps"
+        :class="{ 'chat-reasoning-steps--streaming': !completed }"
+        flex="~ col" gap-2px w-full
+    >
         <ChatReasoningMessage
             v-for="(step, index) in groupedReasoning"
             :key="getReasoningStepKey(step, index)"
@@ -23,3 +28,7 @@ const groupedReasoning = computed(() => {
         />
     </div>
 </template>
+
+<style scoped>
+@keyframes chat-reasoning-step-in{0%{opacity:0}to{opacity:1}}.chat-reasoning-steps--streaming>:deep(*){animation:chat-reasoning-step-in .24s cubic-bezier(.2,0,0,1) both}@media (prefers-reduced-motion:reduce){.chat-reasoning-steps--streaming>:deep(*){animation:none}}
+</style>

package/dist/runtime/messages/components/reasoning/chat-reasoning-thought.vue

@@ -94,93 +94,96 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div flex="~ col" w-full>
-        <!-- Sem reasoning ainda: ChatThinkingIndicator padrão -->
-        <ChatThinkingIndicator v-if="!completed && !hasReasoning" key="thinking" />
+    <div class="chat-reasoning-stage" w-full>
+        <Transition name="chat-reasoning-presence" :appear="!completed">
+            <div v-if="!completed && !hasReasoning" key="thinking" class="chat-reasoning-placeholder">
+                <ChatThinkingIndicator />
+            </div>
 
-        <!-- Com reasoning (loading ou completo): header clicável + steps colapsáveis -->
-        <TelaCollapsible
-            v-else-if="hasReasoning"
-            key="reasoning"
-            v-model:open="isExpanded"
-            class="chat-reasoning-disclosure"
-            data-chat-scroll-preserve
-        >
-            <TelaCollapsibleTrigger as-child>
-                <button
-                    type="button"
-                    data-chat-scroll-preserve
-                    class="group"
-                    data-chat-scroll-preserve-trigger
-                    inline-flex
-                    self-start
-                    items-center
-                    gap-4px
-                    min-h-32px
-                    max-w-full
-                    py-6px
-                    text-left
-                    transition-colors
-                    cursor-pointer
-                    :aria-busy="!completed"
-                    :aria-label="isExpanded ? 'Ocultar detalhes do trabalho' : 'Mostrar detalhes do trabalho'"
-                >
-                    <span
-                        v-if="completed"
-                        key="completed-text"
-                        body-14-regular
-                        text-secondary
-                        tabular-nums
-                        group-hover:text-primary
-                        transition-colors
-                    >
-                        Trabalhou por {{ formattedDuration || "alguns momentos" }}
-                    </span>
-                    <div
-                        v-else
-                        key="loading-text"
-                        flex
-                        min-w-0
+            <!-- Com reasoning (loading ou completo): header clicável + steps colapsáveis -->
+            <TelaCollapsible
+                v-else-if="hasReasoning"
+                key="reasoning"
+                v-model:open="isExpanded"
+                class="chat-reasoning-disclosure"
+                data-chat-scroll-preserve
+            >
+                <TelaCollapsibleTrigger as-child>
+                    <button
+                        type="button"
+                        data-chat-scroll-preserve
+                        class="group"
+                        data-chat-scroll-preserve-trigger
+                        inline-flex
+                        self-start
                         items-center
-                        gap-6px
+                        gap-4px
+                        min-h-32px
+                        max-w-full
+                        py-6px
+                        text-left
+                        transition-colors
+                        cursor-pointer
+                        :aria-busy="!completed"
+                        :aria-label="isExpanded ? 'Ocultar detalhes do trabalho' : 'Mostrar detalhes do trabalho'"
                     >
-                        <span v-if="hasReasoning" body-14-regular text-secondary truncate>
-                            {{ currentStepName }}
-                        </span>
                         <span
-                            v-if="liveFormattedDuration"
-                            body-12-regular
-                            text-tertiary
-                            shrink-0
+                            v-if="completed"
+                            key="completed-text"
+                            body-14-regular
+                            text-secondary
+                            tabular-nums
+                            group-hover:text-primary
+                            transition-colors
                         >
-                            {{ liveFormattedDuration }}
+                            Trabalhou por {{ formattedDuration || "alguns momentos" }}
                         </span>
-                    </div>
+                        <div
+                            v-else
+                            key="loading-text"
+                            flex
+                            min-w-0
+                            items-center
+                            gap-6px
+                        >
+                            <span v-if="hasReasoning" body-14-regular text-secondary truncate>
+                                {{ currentStepName }}
+                            </span>
+                            <span
+                                v-if="liveFormattedDuration"
+                                body-12-regular
+                                text-tertiary
+                                shrink-0
+                            >
+                                {{ liveFormattedDuration }}
+                            </span>
+                        </div>
 
-                    <TelaIcon
-                        name="i-ph-caret-right"
-                        size="14px"
-                        color="icon-tertiary"
-                        shrink-0
-                        class="chat-reasoning-disclosure__caret"
-                        :class="{ 'rotate-90': isExpanded }"
-                    />
-                </button>
-            </TelaCollapsibleTrigger>
+                        <TelaIcon
+                            name="i-ph-caret-right"
+                            size="14px"
+                            color="icon-tertiary"
+                            shrink-0
+                            class="chat-reasoning-disclosure__caret"
+                            :class="{ 'rotate-90': isExpanded }"
+                        />
+                    </button>
+                </TelaCollapsibleTrigger>
 
-            <!-- Open while running, collapsible once done -->
-            <ChatReasoningCollapsibleContent :open="isExpanded">
-                <div class="chat-reasoning-details" pb-8px>
-                    <ChatReasoningSteps
-                        :reasoning-data="displayedReasoning"
-                        :completed="completed"
-                    />
-                </div>
-            </ChatReasoningCollapsibleContent>
-        </TelaCollapsible>
+                <!-- Open while running, collapsible once done -->
+                <ChatReasoningCollapsibleContent :open="isExpanded">
+                    <div class="chat-reasoning-details" pb-8px>
+                        <ChatReasoningSteps
+                            :reasoning-data="displayedReasoning"
+                            :completed="completed"
+                        />
+                    </div>
+                </ChatReasoningCollapsibleContent>
+            </TelaCollapsible>
+        </Transition>
     </div>
 </template>
 
 <style scoped>
-.chat-reasoning-details{contain:layout style}.chat-reasoning-disclosure__caret{transition:transform .2s cubic-bezier(.2,0,0,1)}@media (prefers-reduced-motion:reduce){.chat-reasoning-disclosure__caret{transition-duration:0s}}
+.chat-reasoning-stage{display:grid}.chat-reasoning-stage>*{grid-area:1/1;min-width:0}.chat-reasoning-placeholder{align-items:center;align-self:start;display:flex;min-height:32px}.chat-reasoning-presence-enter-active,.chat-reasoning-presence-leave-active{transition:opacity .22s cubic-bezier(.2,0,0,1)}.chat-reasoning-presence-leave-active{pointer-events:none}.chat-reasoning-presence-enter-from,.chat-reasoning-presence-leave-to{opacity:0}.chat-reasoning-details{contain:layout style}.chat-reasoning-disclosure__caret{transition:transform .2s cubic-bezier(.2,0,0,1)}@media (prefers-reduced-motion:reduce){.chat-reasoning-disclosure__caret,.chat-reasoning-presence-enter-active,.chat-reasoning-presence-leave-active{transition-duration:0s}}
 </style>

package/dist/runtime/messages/components/widgets/chat-thinking-widget.vue

@@ -12,7 +12,8 @@ defineProps({
             <AppMarkdownRender
                 :content="content"
                 :render-code-blocks-as-pre="true"
-                :typewriter="false"
+                :final="!isActive || !!completed"
+                :typewriter="!!isActive && !completed"
             />
         </ClientOnly>
     </div>

package/dist/runtime/messages/debug/use-chat-debug-diagnostics.d.ts

@@ -11,6 +11,14 @@ export declare function shouldIgnoreChatDebugLayoutShift(entry: {
     hadRecentInput: boolean;
     startTime: number;
 }, ignoreUntil: number): boolean;
+export interface ChatScrollSample {
+    top: number;
+    height: number;
+    viewport: number;
+    pinned?: boolean;
+}
+export declare function unexpectedChatScrollMovement(previous: ChatScrollSample, next: ChatScrollSample): number;
+export declare function findChatDebugScrollRoot(stage: HTMLElement): HTMLElement | null;
 type ListenerTarget = {
     addEventListener: (type: string, listener: unknown, options?: unknown) => void;
     removeEventListener: (type: string, listener: unknown, options?: unknown) => void;

package/dist/runtime/messages/debug/use-chat-debug-diagnostics.js

@@ -2,6 +2,25 @@ import { nextTick, onBeforeUnmount, onMounted, reactive, watch } from "vue";
 export function shouldIgnoreChatDebugLayoutShift(entry, ignoreUntil) {
   return entry.hadRecentInput || entry.startTime <= ignoreUntil;
 }
+export function unexpectedChatScrollMovement(previous, next) {
+  const movement = next.top - previous.top;
+  const previousBottom = previous.height - previous.viewport - previous.top;
+  const nextBottom = next.height - next.viewport - next.top;
+  const following = (previous.pinned ?? previousBottom <= 64) && (next.pinned ?? nextBottom <= 64);
+  const targetMovement = Math.max(0, next.height - next.viewport) - previous.top;
+  const expected = following ? Math.max(Math.min(0, targetMovement), Math.min(Math.max(0, targetMovement), movement)) : 0;
+  return Math.abs(movement - expected);
+}
+export function findChatDebugScrollRoot(stage) {
+  let element = stage.querySelector("[data-chat-conversation]");
+  while (element) {
+    if (element.matches("[data-reka-scroll-area-viewport]") || ["auto", "scroll"].includes(getComputedStyle(element).overflowY)) {
+      return element;
+    }
+    element = element.parentElement;
+  }
+  return stage.ownerDocument?.scrollingElement ?? null;
+}
 function resolveListenerCapture(options) {
   if (typeof options === "boolean")
     return options;
@@ -76,12 +95,19 @@ export function useChatDebugDiagnostics(options) {
   let probeInterval;
   let layoutShiftObserver;
   let paintMeasurement = 0;
-  let previousScrollTop = null;
+  let previousScroll = null;
+  let previousScrollRoot = null;
+  const frameSamples = [];
+  let frameIntervalMs = 16.67;
+  let ignoreScrollUntil = 0;
   let clockBaselineDriftMs = null;
   let lastSeenSeekRevision = options.seekRevision.value;
   let ignoreLayoutShiftUntil = 0;
   let observedStage = null;
   function reset() {
+    paintMeasurement += 1;
+    frameSamples.length = 0;
+    frameIntervalMs = 16.67;
     diagnostics.paintLatencyMs = 0;
     diagnostics.droppedFrames = 0;
     diagnostics.domNodes = 0;
@@ -92,7 +118,7 @@ export function useChatDebugDiagnostics(options) {
     diagnostics.maxScrollJump = 0;
     diagnostics.clockDriftMs = 0;
     diagnostics.findings = [];
-    previousScrollTop = null;
+    previousScroll = null;
     clockBaselineDriftMs = null;
     lastSeenSeekRevision = options.seekRevision.value;
     ignoreLayoutShiftUntil = performance.now() + 100;
@@ -103,19 +129,31 @@ export function useChatDebugDiagnostics(options) {
     diagnostics.findings.push({ kind, label, atMs: options.elapsedMs.value });
   }
   function recordFrame(frameDeltaMs) {
-    if (frameDeltaMs <= 50)
+    if (frameDeltaMs <= 0)
+      return;
+    if (frameDeltaMs < 50) {
+      frameSamples.push(frameDeltaMs);
+      if (frameSamples.length > 60)
+        frameSamples.shift();
+      const sorted = [...frameSamples].sort((a, b) => a - b);
+      if (sorted.length >= 10)
+        frameIntervalMs = sorted[Math.floor(sorted.length * 0.2)];
+    }
+    if (frameDeltaMs <= Math.max(50, frameIntervalMs * 1.5))
       return;
-    diagnostics.droppedFrames += Math.max(1, Math.round(frameDeltaMs / 16.67) - 1);
+    diagnostics.droppedFrames += Math.max(1, Math.round(frameDeltaMs / frameIntervalMs) - 1);
     addFinding("frame", "A long frame interrupted playback");
   }
-  function findScrollableElement(root) {
-    const elements = [root, ...Array.from(root.querySelectorAll("*"))];
-    return elements.find((element) => {
-      if (element.scrollHeight <= element.clientHeight + 2)
-        return false;
-      const overflowY = getComputedStyle(element).overflowY;
-      return overflowY === "auto" || overflowY === "scroll";
-    }) ?? null;
+  function rebaseProbes() {
+    previousScroll = null;
+    clockBaselineDriftMs = null;
+    diagnostics.clockDriftMs = 0;
+    paintMeasurement += 1;
+    ignoreLayoutShiftUntil = performance.now() + 100;
+  }
+  function handleScrollIntent() {
+    previousScroll = null;
+    ignoreScrollUntil = performance.now() + 500;
   }
   function sampleStage() {
     const stage = options.stageRef.value;
@@ -132,7 +170,7 @@ export function useChatDebugDiagnostics(options) {
       const virtualAge = options.elapsedMs.value - mountEvent.atMs;
       return actualAge - virtualAge;
     });
-    const shouldProbeClock = options.playing.value && options.speed.value === "1x" && pendingClockDrifts.length > 0;
+    const shouldProbeClock = (typeof document === "undefined" || document.visibilityState !== "hidden") && options.playing.value && options.speed.value === "1x" && pendingClockDrifts.length > 0;
     if (lastSeenSeekRevision !== options.seekRevision.value) {
       diagnostics.clockDriftMs = 0;
       clockBaselineDriftMs = null;
@@ -152,26 +190,34 @@ export function useChatDebugDiagnostics(options) {
     }
     if (diagnostics.clockDriftMs > 1e3)
       addFinding("clock", "A wall-clock timer diverged from virtual playback");
-    const scrollable = findScrollableElement(stage);
+    const scrollable = findChatDebugScrollRoot(stage);
     if (!scrollable) {
       diagnostics.scrollPosition = "idle";
       diagnostics.scrollTop = 0;
       diagnostics.scrollHeight = stage.scrollHeight;
-      previousScrollTop = null;
+      previousScroll = null;
       return;
     }
     const nextScrollTop = scrollable.scrollTop;
     const distanceToBottom = scrollable.scrollHeight - scrollable.clientHeight - nextScrollTop;
-    diagnostics.scrollPosition = distanceToBottom <= 24 ? "pinned" : "detached";
+    diagnostics.scrollPosition = scrollable.scrollHeight <= scrollable.clientHeight + 2 ? "idle" : distanceToBottom <= 64 ? "pinned" : "detached";
     diagnostics.scrollTop = Math.round(nextScrollTop);
     diagnostics.scrollHeight = scrollable.scrollHeight;
-    if (previousScrollTop !== null) {
-      const jump = Math.abs(nextScrollTop - previousScrollTop);
+    const pinned = stage.querySelector("[data-chat-bottom-pinned]")?.getAttribute("data-chat-bottom-pinned");
+    const nextScroll = {
+      top: nextScrollTop,
+      height: scrollable.scrollHeight,
+      viewport: scrollable.clientHeight,
+      pinned: pinned === void 0 || pinned === null ? void 0 : pinned === "true"
+    };
+    if (previousScroll && previousScrollRoot === scrollable && performance.now() >= ignoreScrollUntil) {
+      const jump = unexpectedChatScrollMovement(previousScroll, nextScroll);
       diagnostics.maxScrollJump = Math.max(diagnostics.maxScrollJump, jump);
       if (jump > 120)
-        addFinding("scroll", "Scroll position moved by more than 120 px");
+        addFinding("scroll", "Unexpected scroll movement exceeded 120 px");
     }
-    previousScrollTop = nextScrollTop;
+    previousScroll = nextScroll;
+    previousScrollRoot = scrollable;
   }
   function setupLayoutShiftProbe() {
     if (!("PerformanceObserver" in window) || !PerformanceObserver.supportedEntryTypes.includes("layout-shift"))
@@ -199,6 +245,7 @@ export function useChatDebugDiagnostics(options) {
     if (!target.closest("[data-chat-scroll-preserve], [data-chat-scroll-preserve-trigger]"))
       return;
     ignoreLayoutShiftUntil = performance.now() + 500;
+    handleScrollIntent();
   }
   watch(options.appliedEventCount, async () => {
     const measurement = ++paintMeasurement;
@@ -208,10 +255,12 @@ export function useChatDebugDiagnostics(options) {
       if (measurement !== paintMeasurement)
         return;
       diagnostics.paintLatencyMs = performance.now() - startedAt;
-      if (diagnostics.paintLatencyMs > 32)
-        addFinding("paint", "Event-to-paint latency exceeded 32 ms");
+      if (options.playing.value && performance.now() >= ignoreLayoutShiftUntil && diagnostics.paintLatencyMs > Math.max(50, frameIntervalMs * 2)) {
+        addFinding("paint", "Event-to-frame latency exceeded the frame budget");
+      }
     });
   });
+  watch(options.seekRevision, rebaseProbes, { flush: "sync" });
   watch(options.scenario, () => {
     nextTick(sampleStage);
   });
@@ -220,12 +269,20 @@ export function useChatDebugDiagnostics(options) {
     setupLayoutShiftProbe();
     observedStage = options.stageRef.value;
     observedStage?.addEventListener?.("click", handleStageClick, true);
+    for (const event of ["wheel", "touchstart", "pointerdown", "keydown"])
+      observedStage?.addEventListener?.(event, handleScrollIntent, true);
+    if (typeof document !== "undefined")
+      document.addEventListener("visibilitychange", rebaseProbes);
     sampleStage();
   });
   onBeforeUnmount(() => {
     if (probeInterval)
       clearInterval(probeInterval);
     observedStage?.removeEventListener?.("click", handleStageClick, true);
+    for (const event of ["wheel", "touchstart", "pointerdown", "keydown"])
+      observedStage?.removeEventListener?.(event, handleScrollIntent, true);
+    if (typeof document !== "undefined")
+      document.removeEventListener("visibilitychange", rebaseProbes);
     layoutShiftObserver?.disconnect();
   });
   return { diagnostics, reset, recordFrame };

package/dist/runtime/messages/debug/use-chat-debug-playback.js

@@ -16,11 +16,11 @@ export function useChatDebugPlayback(scenarios, options = {}) {
     () => scenarios.find((scenario) => scenario.id === selectedScenarioId.value) ?? scenarios[0]
   );
   const manualEvents = shallowRef([]);
+  const appliedEventCount = computed(() => countAppliedChatDebugEvents(selectedScenario.value, elapsedMs.value));
   const playbackState = computed(() => manualEvents.value.reduce(
     applyChatDebugEvent,
-    resolveChatDebugPlayback(selectedScenario.value, elapsedMs.value)
+    resolveChatDebugPlayback(selectedScenario.value, selectedScenario.value.events[appliedEventCount.value - 1]?.atMs ?? -1)
   ));
-  const appliedEventCount = computed(() => countAppliedChatDebugEvents(selectedScenario.value, elapsedMs.value));
   const currentEvent = computed(() => selectedScenario.value.events[appliedEventCount.value - 1] ?? null);
   const progress = computed(() => selectedScenario.value.durationMs === 0 ? 0 : elapsedMs.value / selectedScenario.value.durationMs);
   const uniqueEventTimes = computed(() => Array.from(new Set(selectedScenario.value.events.map((event) => event.atMs))));
@@ -40,7 +40,8 @@ export function useChatDebugPlayback(scenarios, options = {}) {
   }
   function seek(nextElapsedMs) {
     seekRevision.value += 1;
-    manualEvents.value = [];
+    if (manualEvents.value.length > 0)
+      manualEvents.value = [];
     setElapsed(nextElapsedMs);
   }
   function restart() {
@@ -89,8 +90,13 @@ export function useChatDebugPlayback(scenarios, options = {}) {
       previousFrameAt = 0;
       return;
     }
+    if (typeof document !== "undefined" && document.visibilityState === "hidden") {
+      previousFrameAt = 0;
+      animationFrame = requestAnimationFrame(tick);
+      return;
+    }
     if (previousFrameAt > 0) {
-      const frameDelta = Math.min(timestamp - previousFrameAt, 250);
+      const frameDelta = timestamp - previousFrameAt;
       options.onFrame?.(frameDelta);
       const nextElapsed = speed.value === "gap" ? advanceGapCompressed(frameDelta) : elapsedMs.value + frameDelta * (speed.value === "4x" ? 4 : 1);
       setElapsed(nextElapsed);
@@ -120,11 +126,18 @@ export function useChatDebugPlayback(scenarios, options = {}) {
     if (isPlaying)
       animationFrame = requestAnimationFrame(tick);
   });
+  function handleVisibilityChange() {
+    previousFrameAt = 0;
+  }
   onMounted(() => {
     window.addEventListener("keydown", handleKeyboard);
+    if (typeof document !== "undefined")
+      document.addEventListener("visibilitychange", handleVisibilityChange);
   });
   onBeforeUnmount(() => {
     window.removeEventListener("keydown", handleKeyboard);
+    if (typeof document !== "undefined")
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
     cancelAnimationFrame(animationFrame);
   });
   return {

package/dist/runtime/rendering/components/app-markdown-render.vue

@@ -1,6 +1,8 @@
 <script setup>
 import MarkdownRender, { removeCustomComponents, setCustomComponents } from "markstream-vue";
 import { wrapCustomMarkdownComponents } from "../markdown/custom-components";
+import { STREAMING_TEXT_FADE_MS } from "../markdown/streaming-text-segments";
+import StreamingTextNode from "../markdown/streaming-text-node.vue";
 const props = defineProps({
   content: { type: [String, null], required: false, default: "" },
   final: { type: Boolean, required: false, default: true },
@@ -21,8 +23,27 @@ function escapeSingleDollarSigns(text) {
 }
 const escapedContent = computed(() => escapeSingleDollarSigns(props.content ?? ""));
 const customMarkdownComponents = computed(() => wrapCustomMarkdownComponents(props.customComponents));
-watch(customMarkdownComponents, (components) => setCustomComponents(scopeId, components), { immediate: true });
+const streamingTextActive = ref(props.typewriter);
+let streamingTextTimer;
+watch(() => props.typewriter, (typewriter) => {
+  if (streamingTextTimer !== void 0) {
+    clearTimeout(streamingTextTimer);
+    streamingTextTimer = void 0;
+  }
+  if (typewriter) {
+    streamingTextActive.value = true;
+    return;
+  }
+  streamingTextTimer = setTimeout(() => {
+    streamingTextTimer = void 0;
+    streamingTextActive.value = false;
+  }, STREAMING_TEXT_FADE_MS);
+});
+const registeredComponents = computed(() => streamingTextActive.value ? { text: StreamingTextNode, ...customMarkdownComponents.value } : customMarkdownComponents.value);
+watch(registeredComponents, (components) => setCustomComponents(scopeId, components), { immediate: true });
 onBeforeUnmount(() => {
+  if (streamingTextTimer !== void 0)
+    clearTimeout(streamingTextTimer);
   removeCustomComponents(scopeId);
 });
 </script>

package/dist/runtime/rendering/markdown/streaming-text-node.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    node: {
+        content?: string | null;
+        center?: boolean;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/rendering/markdown/streaming-text-node.vue

@@ -0,0 +1,82 @@
+<script setup>
+import {
+  STREAMING_TEXT_FADE_MS,
+  applyStreamingTextContent,
+  createStreamingTextState,
+  nextStreamingTextSettleAt,
+  renderedStreamingText,
+  settleStreamingTextSegments
+} from "./streaming-text-segments";
+const props = defineProps({
+  node: { type: Object, required: true }
+});
+const attrs = useAttrs();
+const providedFade = inject("markstreamFade", void 0);
+const streamState = inject("markstreamTextStreamState", void 0);
+const indexKey = computed(() => {
+  const key = attrs["index-key"] ?? attrs.indexKey;
+  return key === void 0 || key === null || key === "" ? "" : String(key);
+});
+const reducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
+const fadeEnabled = computed(() => {
+  const attrFade = attrs.fade;
+  if (attrFade === "" || attrFade === true || attrFade === "true")
+    return true;
+  if (attrFade === false || attrFade === "false")
+    return false;
+  return typeof providedFade?.value === "boolean" ? providedFade.value : true;
+});
+const animate = computed(() => fadeEnabled.value && !reducedMotion);
+function content() {
+  return String(props.node.content ?? "");
+}
+const state = shallowRef(createStreamingTextState(content(), {
+  persisted: indexKey.value ? streamState?.get(indexKey.value) : void 0,
+  now: Date.now(),
+  animate: animate.value
+}));
+let settleTimer;
+function clearSettleTimer() {
+  if (settleTimer !== void 0) {
+    clearTimeout(settleTimer);
+    settleTimer = void 0;
+  }
+}
+function scheduleSettle() {
+  if (settleTimer !== void 0)
+    return;
+  const settleAt = nextStreamingTextSettleAt(state.value);
+  if (settleAt === null)
+    return;
+  settleTimer = setTimeout(() => {
+    settleTimer = void 0;
+    state.value = settleStreamingTextSegments(state.value, Date.now());
+    scheduleSettle();
+  }, Math.max(0, settleAt - Date.now()) + 16);
+}
+function persist() {
+  if (indexKey.value)
+    streamState?.set(indexKey.value, renderedStreamingText(state.value));
+}
+watch([content, animate], ([nextContent]) => {
+  state.value = applyStreamingTextContent(state.value, nextContent, { now: Date.now(), animate: animate.value });
+  persist();
+  scheduleSettle();
+});
+persist();
+onMounted(scheduleSettle);
+onBeforeUnmount(clearSettleTimer);
+const fadeStyle = { "--chat-stream-fade-duration": `${STREAMING_TEXT_FADE_MS}ms` };
+</script>
+
+<template>
+    <span
+        class="text-node"
+        :class="{ 'text-node-center': node.center }"
+        :style="fadeStyle"
+    ><span>{{ state.settled }}</span><span
+        v-for="segment in state.segments"
+        :key="segment.id"
+        class="chat-stream-chunk"
+    >{{ segment.text }}</span></span>
+</template>

package/dist/runtime/rendering/markdown/streaming-text-node.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    node: {
+        content?: string | null;
+        center?: boolean;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/rendering/markdown/streaming-text-segments.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Pure state for the streaming text node. Text that has already been shown
+ * lives in `settled`; every append while streaming becomes its own segment so
+ * several chunks can fade in at once instead of the newest one cutting the
+ * previous fade short. Segments are folded back into `settled` once they have
+ * been on screen for the fade duration, keeping the DOM small.
+ */
+/** How long a streamed chunk takes to fade in. Mirrored to CSS via a custom property. */
+export declare const STREAMING_TEXT_FADE_MS = 320;
+/** Upper bound on live segments so a paused animation clock cannot grow the DOM forever. */
+export declare const STREAMING_TEXT_MAX_SEGMENTS = 48;
+export interface StreamingTextSegment {
+    id: number;
+    text: string;
+    startedAt: number;
+}
+export interface StreamingTextState {
+    settled: string;
+    segments: readonly StreamingTextSegment[];
+    nextId: number;
+}
+export declare function renderedStreamingText(state: StreamingTextState): string;
+/**
+ * Initial state for a node. Content that was already rendered by a previous
+ * instance of the same node (markstream persists it per index key while it
+ * re-parses inline markup) stays settled; only the unseen tail animates.
+ */
+export declare function createStreamingTextState(content: string, options: {
+    persisted?: string;
+    now: number;
+    animate: boolean;
+}): StreamingTextState;
+/**
+ * Apply the next content snapshot. A pure append becomes a new segment; any
+ * other change (rewrite, shrink, animation disabled) settles everything so
+ * the text never lags behind the parser.
+ */
+export declare function applyStreamingTextContent(state: StreamingTextState, content: string, options: {
+    now: number;
+    animate: boolean;
+}): StreamingTextState;
+/** Fold segments that finished fading into `settled`. Order is preserved, so only a settled head can be folded. */
+export declare function settleStreamingTextSegments(state: StreamingTextState, now: number, durationMs?: number): StreamingTextState;
+/** Fold the oldest segments until at most `max` remain live. */
+export declare function capStreamingTextSegments(state: StreamingTextState, max: number): StreamingTextState;
+/** Time at which the oldest live segment finishes fading, or null when nothing is animating. */
+export declare function nextStreamingTextSettleAt(state: StreamingTextState, durationMs?: number): number | null;

package/dist/runtime/rendering/markdown/streaming-text-segments.js

@@ -0,0 +1,51 @@
+export const STREAMING_TEXT_FADE_MS = 320;
+export const STREAMING_TEXT_MAX_SEGMENTS = 48;
+export function renderedStreamingText(state) {
+  let text = state.settled;
+  for (const segment of state.segments)
+    text += segment.text;
+  return text;
+}
+export function createStreamingTextState(content, options) {
+  const { persisted, now, animate } = options;
+  if (animate && persisted !== void 0 && content.length > persisted.length && content.startsWith(persisted)) {
+    return {
+      settled: persisted,
+      segments: [{ id: 0, text: content.slice(persisted.length), startedAt: now }],
+      nextId: 1
+    };
+  }
+  return { settled: content, segments: [], nextId: 0 };
+}
+export function applyStreamingTextContent(state, content, options) {
+  const { now, animate } = options;
+  const rendered = renderedStreamingText(state);
+  if (content === rendered && (animate || state.segments.length === 0))
+    return state;
+  if (!animate || !content.startsWith(rendered))
+    return { settled: content, segments: [], nextId: state.nextId };
+  const segments = [...state.segments, { id: state.nextId, text: content.slice(rendered.length), startedAt: now }];
+  return capStreamingTextSegments({ settled: state.settled, segments, nextId: state.nextId + 1 }, STREAMING_TEXT_MAX_SEGMENTS);
+}
+export function settleStreamingTextSegments(state, now, durationMs = STREAMING_TEXT_FADE_MS) {
+  let settledCount = 0;
+  while (settledCount < state.segments.length && state.segments[settledCount].startedAt + durationMs <= now)
+    settledCount += 1;
+  if (settledCount === 0)
+    return state;
+  return foldStreamingTextSegments(state, settledCount);
+}
+export function capStreamingTextSegments(state, max) {
+  const excess = state.segments.length - max;
+  return excess > 0 ? foldStreamingTextSegments(state, excess) : state;
+}
+export function nextStreamingTextSettleAt(state, durationMs = STREAMING_TEXT_FADE_MS) {
+  const head = state.segments[0];
+  return head ? head.startedAt + durationMs : null;
+}
+function foldStreamingTextSegments(state, count) {
+  let settled = state.settled;
+  for (let index = 0; index < count; index += 1)
+    settled += state.segments[index].text;
+  return { settled, segments: state.segments.slice(count), nextId: state.nextId };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/chat-nuxt",
-  "version": "3.16.0",
+  "version": "3.17.0-rc.0",
   "type": "module",
   "exports": {
     ".": {