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

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.1",
   "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/embed/components/chat-embed-inner.d.vue.ts

@@ -1,8 +1,11 @@
+import type { ConversationEvent } from '../../types/schemas/chat/conversations.js';
 import type { ChatFeatureConfig } from '../feature-config.js';
 import type { ChatActor, ChatSidebarConfig, ChatSuggestion } from '../types.js';
 type EmbedUser = ChatActor;
 type __VLS_Props = {
     conversationId?: string | null;
+    conversationEvents?: readonly ConversationEvent[] | null;
+    composerDisabled?: boolean;
     initialConversationId?: string | null;
     hideSidebar?: boolean;
     sidebar?: ChatSidebarConfig;

package/dist/runtime/embed/components/chat-embed-inner.vue

@@ -38,6 +38,8 @@ import { useWorkspaceSettings } from "../../workspace/composables/workspace-sett
 import { useWorkspaceSwitchModal } from "../../workspace/composables/workspace-switch-modal";
 const props = defineProps({
   conversationId: { type: [String, null], required: false },
+  conversationEvents: { type: [Array, null], required: false },
+  composerDisabled: { type: Boolean, required: false },
   initialConversationId: { type: [String, null], required: false, default: null },
   hideSidebar: { type: Boolean, required: false, default: false },
   sidebar: { type: Object, required: false },
@@ -991,6 +993,7 @@ async function handleDelete() {
                                 v-model:selected-model="selectedModel"
                                 v-model:selected-reasoning-effort="selectedReasoningEffort"
                                 :loading="composerLocked"
+                                :disabled="composerDisabled"
                                 :creator-name="currentUser?.name ?? void 0"
                                 :creator-email="
   currentConversation?.createdBy ?? currentUser?.email ?? void 0
@@ -1014,6 +1017,7 @@ async function handleDelete() {
 
                 <ChatMessageList
                     :messages="messages"
+                    :events="conversationEvents"
                     :streaming-active-message-id="streamingActiveMessageId"
                     :preparing-steps="preparingSteps"
                     :show-ttft="resolvedFeatures.showTtft"
@@ -1025,6 +1029,7 @@ async function handleDelete() {
                     v-model:selected-model="selectedModel"
                     v-model:selected-reasoning-effort="selectedReasoningEffort"
                     :loading="composerLocked"
+                    :disabled="composerDisabled"
                     :creator-name="currentUser?.name ?? void 0"
                     :creator-email="
   currentConversation?.createdBy ?? currentUser?.email ?? void 0
@@ -1191,6 +1196,7 @@ async function handleDelete() {
                         v-model:selected-model="selectedModel"
                         v-model:selected-reasoning-effort="selectedReasoningEffort"
                         :loading="composerLocked"
+                        :disabled="composerDisabled"
                         :creator-name="currentUser?.name ?? void 0"
                         :creator-email="
   currentConversation?.createdBy ?? currentUser?.email ?? void 0
@@ -1217,6 +1223,7 @@ async function handleDelete() {
             >
                 <ChatMessageList
                     :messages="messages"
+                    :events="conversationEvents"
                     :streaming-active-message-id="streamingActiveMessageId"
                     :preparing-steps="preparingSteps"
                     :show-ttft="resolvedFeatures.showTtft"
@@ -1228,6 +1235,7 @@ async function handleDelete() {
                     v-model:selected-model="selectedModel"
                     v-model:selected-reasoning-effort="selectedReasoningEffort"
                     :loading="composerLocked"
+                    :disabled="composerDisabled"
                     :creator-name="currentUser?.name ?? void 0"
                     :creator-email="
   currentConversation?.createdBy ?? currentUser?.email ?? void 0

package/dist/runtime/embed/components/chat-embed-inner.vue.d.ts

@@ -1,8 +1,11 @@
+import type { ConversationEvent } from '../../types/schemas/chat/conversations.js';
 import type { ChatFeatureConfig } from '../feature-config.js';
 import type { ChatActor, ChatSidebarConfig, ChatSuggestion } from '../types.js';
 type EmbedUser = ChatActor;
 type __VLS_Props = {
     conversationId?: string | null;
+    conversationEvents?: readonly ConversationEvent[] | null;
+    composerDisabled?: boolean;
     initialConversationId?: string | null;
     hideSidebar?: boolean;
     sidebar?: ChatSidebarConfig;

package/dist/runtime/embed/components/chat-embed.vue

@@ -10,6 +10,8 @@ import { normalizeConversationScope, normalizeTelaAgentId, resolveConversationSc
 import ChatEmbedInner from "./chat-embed-inner.vue";
 const props = defineProps({
   conversationId: { type: [String, null], required: false },
+  conversationEvents: { type: [Array, null], required: false },
+  composerDisabled: { type: Boolean, required: false },
   initialConversationId: { type: [String, null], required: false },
   conversationScope: { type: [String, null], required: false },
   defaultConversationCreatorFilter: { type: null, required: false },
@@ -109,6 +111,8 @@ provideChatMessageTerminal((payload) => {
         v-if="workspaceId"
         :key="`${workspaceId}:${normalizedTelaAgentId ?? 'default-chat'}:scope:${resolveConversationScopeKeySegment(normalizedConversationScope)}`"
         :conversation-id="conversationId"
+        :conversation-events="conversationEvents"
+        :composer-disabled="composerDisabled"
         :initial-conversation-id="initialConversationId"
         :hide-sidebar="hideSidebar"
         :sidebar="sidebar"

package/dist/runtime/embed/components/meistrari-chat-embed.vue

@@ -3,6 +3,8 @@ import { computed, ref, watch } from "vue";
 import { provideConversationCreatorFilterState } from "../../conversations/composables/conversation-creator-filter-state";
 const { hideSidebar = void 0, ...props } = defineProps({
   conversationId: { type: [String, null], required: false },
+  conversationEvents: { type: [Array, null], required: false },
+  composerDisabled: { type: Boolean, required: false },
   initialConversationId: { type: [String, null], required: false },
   conversationScope: { type: [String, null], required: false },
   defaultConversationCreatorFilter: { type: null, required: false },
@@ -60,6 +62,8 @@ function startWidgetConversation() {
 }
 const sharedEmbedProps = computed(() => ({
   conversationId: props.conversationId,
+  conversationEvents: props.conversationEvents,
+  composerDisabled: props.composerDisabled,
   initialConversationId: props.initialConversationId,
   conversationScope: props.conversationScope,
   defaultConversationCreatorFilter: props.defaultConversationCreatorFilter,

package/dist/runtime/embed/types.d.ts

@@ -1,4 +1,5 @@
 import type { Component, DeepReadonly } from 'vue';
+import type { ConversationEvent } from '../types/schemas/chat/conversations.js';
 import type { WorkspaceSettingsResponse as WorkspaceSettings } from '../types/schemas/chat/workspace-settings.js';
 import type { TelaAgentExecutionInput } from '../types/schemas/integrations/tela-agent-api.js';
 import type { ConversationCreatorFilter } from '../types/schemas/chat/primitives.js';
@@ -42,6 +43,10 @@ export type ChatSidebarConfig = {
 export type ChatEmbedSharedProps = {
     /** Controlled conversation id. Use with `v-model:conversation-id` when the host owns active conversation state. */
     conversationId?: string | null;
+    /** Controlled audit events rendered chronologically between conversation messages. */
+    conversationEvents?: readonly ConversationEvent[] | null;
+    /** Disables the message composer while the host completes an external state transition. */
+    composerDisabled?: boolean;
     /** Conversation id to open once on mount when `conversationId` is uncontrolled. */
     initialConversationId?: string | null;
     /**

package/dist/runtime/messages/components/chat-conversation-event.d.vue.ts

@@ -0,0 +1,7 @@
+import type { ConversationEvent } from '../../types/schemas/chat/conversations.js';
+type __VLS_Props = {
+    event: ConversationEvent;
+};
+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/messages/components/chat-conversation-event.vue

@@ -0,0 +1,31 @@
+<script setup>
+const props = defineProps({
+  event: { type: null, required: true }
+});
+const eventDate = computed(() => new Date(props.event.createdAt));
+const eventTime = computed(() => new Intl.DateTimeFormat("pt-BR", {
+  hour: "2-digit",
+  minute: "2-digit"
+}).format(eventDate.value));
+</script>
+
+<template>
+    <div
+        data-chat-conversation-event
+        flex
+        items-center
+        gap-12px
+        py-6px
+        :aria-label="`${event.actorLabel ? `${event.actorLabel} ` : ''}${event.description}, ${eventTime}`"
+    >
+        <span h-0 flex-1 border-t-0.5px border />
+        <p body-12-regular text-tertiary text-center>
+            <span v-if="event.actorLabel" body-12-medium text-secondary>{{ event.actorLabel }}</span>
+            {{ event.description }}
+            <time :datetime="eventDate.toISOString()" :title="eventDate.toLocaleString('pt-BR')">
+                · {{ eventTime }}
+            </time>
+        </p>
+        <span h-0 flex-1 border-t-0.5px border />
+    </div>
+</template>

package/dist/runtime/messages/components/chat-conversation-event.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ConversationEvent } from '../../types/schemas/chat/conversations.js';
+type __VLS_Props = {
+    event: ConversationEvent;
+};
+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/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.d.vue.ts

@@ -1,6 +1,7 @@
-import type { Message } from '../../types/schemas/chat/conversations.js';
+import type { ConversationEvent, Message } from '../../types/schemas/chat/conversations.js';
 type __VLS_Props = {
     messages: readonly Message[];
+    events?: readonly ConversationEvent[] | null;
     loading?: boolean;
     /**
      * Where the list renders: `page`/`widget` sit inside a `TelaChatBody` that

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

@@ -1,7 +1,9 @@
 <script setup>
 import { useStickToBottom } from "markstream-vue/utils";
+import { mergeConversationTimeline } from "../conversation-timeline";
 const props = defineProps({
   messages: { type: Array, required: true },
+  events: { type: [Array, null], required: false },
   loading: { type: Boolean, required: false },
   variant: { type: String, required: false },
   streamingActiveMessageId: { type: [String, null], required: false },
@@ -36,11 +38,20 @@ const skeletonMessages = [
   { id: "user-2", align: "end", width: "46%", height: "44px" },
   { id: "assistant-2", align: "start", width: "84%", height: "92px" }
 ];
+const timelineItems = computed(() => mergeConversationTimeline(props.messages, props.events));
 const latestOutputSignal = computed(() => {
   const latestMessage = props.messages.at(-1);
-  if (!latestMessage)
+  const latestEvent = props.events?.at(-1);
+  if (!latestMessage && !latestEvent)
     return "empty";
-  return `${props.messages.length}:${latestMessage.id}:${latestMessage.status}:${latestMessage.content?.length ?? 0}`;
+  return [
+    props.messages.length,
+    latestMessage?.id ?? "",
+    latestMessage?.status ?? "",
+    latestMessage?.content?.length ?? 0,
+    props.events?.length ?? 0,
+    latestEvent?.id ?? ""
+  ].join(":");
 });
 watch(latestOutputSignal, async () => {
   await nextTick();
@@ -55,6 +66,7 @@ defineExpose({
 <template>
     <div
         class="chat-message-list"
+        :data-chat-bottom-pinned="isPinned"
         :data-variant="variant ?? 'page'"
         flex="~ col"
         flex-1
@@ -82,15 +94,20 @@ defineExpose({
                 </template>
 
                 <template v-else>
-                    <ChatMessageBubble
-                        v-for="message in messages"
-                        :key="message.id"
-                        :message="message"
-                        :stream-active="message.id === streamingActiveMessageId"
-                        :preparing-steps="message.role === 'assistant' && message.status === 'pending' ? preparingSteps : null"
-                        :show-ttft="showTtft"
-                        @retry="emit('retry', $event)"
-                    />
+                    <template v-for="item in timelineItems" :key="`${item.kind}:${item.id}`">
+                        <ChatConversationEvent
+                            v-if="item.kind === 'event'"
+                            :event="item.value"
+                        />
+                        <ChatMessageBubble
+                            v-else
+                            :message="item.value"
+                            :stream-active="item.id === streamingActiveMessageId"
+                            :preparing-steps="item.value.role === 'assistant' && item.value.status === 'pending' ? preparingSteps : null"
+                            :show-ttft="showTtft"
+                            @retry="emit('retry', $event)"
+                        />
+                    </template>
                     <p
                         v-if="messages.length > 0"
                         mt-auto mb--6px

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

@@ -1,6 +1,7 @@
-import type { Message } from '../../types/schemas/chat/conversations.js';
+import type { ConversationEvent, Message } from '../../types/schemas/chat/conversations.js';
 type __VLS_Props = {
     messages: readonly Message[];
+    events?: readonly ConversationEvent[] | null;
     loading?: boolean;
     /**
      * Where the list renders: `page`/`widget` sit inside a `TelaChatBody` that

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/conversation-timeline.d.ts

@@ -0,0 +1,13 @@
+import type { ConversationEvent, Message } from '../types/schemas/chat/conversations.js';
+export type ConversationTimelineItem = {
+    kind: 'event';
+    id: string;
+    createdAt: Date;
+    value: ConversationEvent;
+} | {
+    kind: 'message';
+    id: string;
+    createdAt: Date;
+    value: Message;
+};
+export declare function mergeConversationTimeline(messages: readonly Message[], events?: readonly ConversationEvent[] | null): ConversationTimelineItem[];

package/dist/runtime/messages/conversation-timeline.js

@@ -0,0 +1,13 @@
+export function mergeConversationTimeline(messages, events = []) {
+  return [
+    ...(events ?? []).map((event) => ({ kind: "event", id: event.id, createdAt: event.createdAt, value: event })),
+    ...messages.map((message) => ({ kind: "message", id: message.id, createdAt: message.createdAt, value: message }))
+  ].sort((left, right) => {
+    const difference = new Date(left.createdAt).getTime() - new Date(right.createdAt).getTime();
+    if (difference !== 0)
+      return difference;
+    if (left.kind !== right.kind)
+      return left.kind === "event" ? -1 : 1;
+    return left.id.localeCompare(right.id);
+  });
+}

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;