@meistrari/chat-nuxt 3.16.0-rc.3 → 3.16.0-rc.5

package/dist/module.json

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

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

@@ -1 +1 @@
-.markstream-vue{color:#171717;font-family:Inter,"Inter Fallback: Arial",sans-serif;font-size:16px;font-weight:400;letter-spacing:-.15px;line-height:24px;--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;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{font-weight: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{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{font-size:24px;font-weight:540;letter-spacing:-.8px;line-height:28px;margin:24px 0 16px}.markstream-vue .heading-node.heading-2,.markstream-vue h2{font-size:20px;font-weight:540;letter-spacing:-.5px;line-height:24px;margin:20px 0 12px}.markstream-vue .heading-node.heading-3,.markstream-vue h3{font-size:20px;font-weight:540;letter-spacing:-.5px;line-height:24px;margin:16px 0 8px}.markstream-vue .heading-node.heading-4,.markstream-vue h4{font-size:16px;font-weight:540;letter-spacing:-.2px;line-height:20px;margin:12px 0 6px}.markstream-vue .heading-node.heading-5,.markstream-vue h5{font-size:14px;font-weight:540;letter-spacing:-.15px;line-height:16px;margin:8px 0 4px}.markstream-vue .heading-node.heading-6,.markstream-vue h6{font-size:12px;font-weight:540;letter-spacing:-.1px;line-height:14px;margin:8px 0 4px}.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}.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/citations/citation-links.d.ts

@@ -30,3 +30,10 @@ export declare function isCitationUrl(url: string): boolean;
 export declare function parseCitationUrl(url: string): CitationRef | null;
 /** Cache key for resolution state: the locator addresses a spot inside the same document. */
 export declare function citationCacheKey(ref: Pick<CitationRef, 'namespace' | 'id'>): string;
+/**
+ * Rewrites bare `cite://` tokens into `[id](cite://...)` markdown links so they render inline
+ * through the link node instead of splitting the surrounding paragraph into block segments.
+ * Square brackets that only wrap a token are dropped, since the citation chip already reads as
+ * a reference.
+ */
+export declare function linkifyBareCitations(text: string): string;

package/dist/runtime/citations/citation-links.js

@@ -54,3 +54,27 @@ function parsePositiveInt(value) {
 export function citationCacheKey(ref) {
   return `${ref.namespace}/${ref.id}`;
 }
+const BARE_CITE_REWRITE_REGEX = /\[[ \t]*(cite:\/\/[^\s"'<>`\[\]()*~]+)[ \t]*\](?!\()|(?<!\]\()(?<!<)(?<!\]:[ \t]*)(cite:\/\/[^\s"'<>`\[\]()*~]+)(?!\]\()/gi;
+const MARKDOWN_CODE_REGEX = /(```|~~~)[\s\S]*?(?:\1|$)|``+[^`]*``+|`[^`]*`/g;
+export function linkifyBareCitations(text) {
+  if (!text.toLowerCase().includes(CITE_SCHEME))
+    return text;
+  let result = "";
+  let lastEnd = 0;
+  for (const match of text.matchAll(MARKDOWN_CODE_REGEX)) {
+    result += linkifyProse(text.slice(lastEnd, match.index)) + match[0];
+    lastEnd = match.index + match[0].length;
+  }
+  return result + linkifyProse(text.slice(lastEnd));
+}
+function linkifyProse(text) {
+  return text.replace(BARE_CITE_REWRITE_REGEX, (match, bracketed, bare) => {
+    const token = bracketed ?? bare ?? "";
+    const url = token.replace(/[.,:;!?]+$/, "");
+    const trailing = token.slice(url.length);
+    const citation = parseCitationUrl(url);
+    if (!citation)
+      return match;
+    return `[${citation.id}](${url})${trailing}`;
+  });
+}

package/dist/runtime/conversations/components/chat-conversation-item.vue

@@ -14,8 +14,6 @@ const {
   renameTitle,
   renameInputRef,
   showDeleteModal,
-  menuButtonRef,
-  isMenuOpen,
   conversationPath,
   displayTitle,
   menuItems,
@@ -32,9 +30,6 @@ const {
 function setRenameInputRef(element) {
   renameInputRef.value = element;
 }
-function setMenuButtonRef(element) {
-  menuButtonRef.value = element;
-}
 </script>
 
 <template>
@@ -115,23 +110,21 @@ function setMenuButtonRef(element) {
                 mt-2px
                 flex
                 items-center
-                class="opacity-0 group-hover:opacity-100"
-                :class="isMenuOpen && 'opacity-100'"
+                class="opacity-0 group-hover:opacity-100 focus-within:opacity-100 [&:has([data-state=open])]:opacity-100"
             >
                 <TelaDropdownMenu :items="menuItems" content-class="chat-sidebar-floating">
                     <button
-                        :ref="setMenuButtonRef"
                         p-4px
                         rounded-8px
                         hover:bg-lowered
                         cursor-pointer
-                        :class="isMenuOpen && '!bg-lowered'"
+                        class="group data-[state=open]:!bg-lowered"
                         @click.prevent.stop
                     >
                         <TelaIcon
                             name="i-ph-dots-three"
                             size="18px"
-                            :color="isMenuOpen ? 'icon-tertiary' : 'icon-subtle group-hover:icon-tertiary'"
+                            color="icon-subtle group-hover:icon-tertiary group-data-[state=open]:icon-tertiary"
                         />
                     </button>
                 </TelaDropdownMenu>

package/dist/runtime/conversations/composables/conversation-item.d.ts

@@ -20,8 +20,6 @@ export declare function useConversationItem(options: ConversationItemOptions, em
     renameTitle: any;
     renameInputRef: any;
     showDeleteModal: any;
-    menuButtonRef: any;
-    isMenuOpen: any;
     conversationPath: any;
     displayTitle: any;
     menuItems: ({

package/dist/runtime/conversations/composables/conversation-item.js

@@ -1,4 +1,3 @@
-import { useMagicKeys, useMutationObserver } from "@vueuse/core";
 import { resolveConversationRenameTitle } from "../title.js";
 import { capitalizeFirst } from "../../shared/string.js";
 const conversationNavigationDelayMs = 250;
@@ -8,28 +7,27 @@ export function useConversationItem(options, emit) {
   const renameInputRef = ref(null);
   const isIgnoringInitialRenameBlur = ref(false);
   const showDeleteModal = ref(false);
-  const menuButtonRef = ref(null);
-  const isMenuOpen = ref(false);
   const conversationPath = computed(() => `/${options.conversation.id}`);
   const displayTitle = computed(() => capitalizeFirst(options.conversation.title));
-  const { escape } = useMagicKeys();
   let conversationNavigationTimer = null;
   let renameBlurTimer = null;
-  watch(() => escape?.value, (pressed) => {
-    if (pressed && isRenamingInline.value) {
+  const escapeCancellable = computed(() => isRenamingInline.value || showDeleteModal.value);
+  function handleEscapeKeydown(event) {
+    if (event.key !== "Escape")
+      return;
+    if (isRenamingInline.value)
       cancelRename();
-    }
-    if (pressed && showDeleteModal.value) {
+    if (showDeleteModal.value)
       cancelDelete();
-    }
+  }
+  watch(escapeCancellable, (active) => {
+    if (typeof window === "undefined")
+      return;
+    if (active)
+      window.addEventListener("keydown", handleEscapeKeydown);
+    else
+      window.removeEventListener("keydown", handleEscapeKeydown);
   });
-  useMutationObserver(menuButtonRef, (mutations) => {
-    for (const mutation of mutations) {
-      if (mutation.attributeName === "data-state") {
-        isMenuOpen.value = menuButtonRef.value?.getAttribute("data-state") === "open";
-      }
-    }
-  }, { attributes: true });
   function clearPendingConversationNavigation() {
     if (conversationNavigationTimer === null)
       return;
@@ -79,7 +77,6 @@ export function useConversationItem(options, emit) {
     allowRenameBlurSoon();
   }
   function startRename() {
-    isMenuOpen.value = false;
     clearPendingConversationNavigation();
     clearRenameBlurTimer();
     renameTitle.value = options.conversation.title;
@@ -151,14 +148,14 @@ export function useConversationItem(options, emit) {
   onBeforeUnmount(() => {
     clearPendingConversationNavigation();
     clearRenameBlurTimer();
+    if (typeof window !== "undefined")
+      window.removeEventListener("keydown", handleEscapeKeydown);
   });
   return {
     isRenamingInline,
     renameTitle,
     renameInputRef,
     showDeleteModal,
-    menuButtonRef,
-    isMenuOpen,
     conversationPath,
     displayTitle,
     menuItems,

package/dist/runtime/files/components/chat-vault-link.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { parseCitationUrl } from "../../citations/citation-links";
+import { isCitationUrl, parseCitationUrl } from "../../citations/citation-links";
 import ChatUrlCitation from "../../citations/components/chat-url-citation.vue";
 import { parseUrlCitation } from "../../citations/url-citation";
 import { useEmbedConfig } from "../../embed/composables/embed-config";
@@ -22,6 +22,13 @@ const detectedCitation = computed(() => {
     return null;
   return parseCitationUrl(props.node.href);
 });
+const citationLabel = computed(() => {
+  const citation = detectedCitation.value;
+  const label = linkText.value.trim();
+  if (!citation || !label || label === citation.id || isCitationUrl(label))
+    return void 0;
+  return label;
+});
 const detectedUrlCitation = computed(() => parseUrlCitation(props.node.href, linkText.value, props.node.title));
 </script>
 
@@ -37,7 +44,7 @@ const detectedUrlCitation = computed(() => parseUrlCitation(props.node.href, lin
     <ChatCitation
         v-else-if="detectedCitation"
         :citation="detectedCitation"
-        :label="linkText"
+        :label="citationLabel"
     />
     <ChatUrlCitation
         v-else-if="detectedUrlCitation"
@@ -49,6 +56,10 @@ const detectedUrlCitation = computed(() => parseUrlCitation(props.node.href, lin
         :title="node.title || void 0"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-blue-600 hover:text-blue-800 underline"
-    >{{ linkText }}</a>
+        class="chat-inline-link"
+    >{{ linkText }}<span class="chat-inline-link__icon" i-ph-arrow-up-right-bold aria-hidden="true" /></a>
 </template>
+
+<style scoped>
+.chat-inline-link{color:inherit;text-decoration:underline;text-decoration-color:#a3a3a3;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .15s ease}.chat-inline-link:hover{text-decoration-color:#525252}.chat-inline-link__icon{display:inline-block;font-size:.7em;margin-left:.2em;vertical-align:.05em}
+</style>

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

@@ -0,0 +1,16 @@
+import type { ChatDebugConversationFixture, ChatDebugSidebarFixture } from '../debug/chat-debug-scenarios.js';
+type __VLS_Props = {
+    sidebar: ChatDebugSidebarFixture;
+    activeConversationId: string | null;
+    /** Bumped by the workbench on restart so local rename/delete state rewinds with the timeline. */
+    resetKey: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    switch: (fixture: ChatDebugConversationFixture) => any;
+    "update:mountedCount": (count: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSwitch?: ((fixture: ChatDebugConversationFixture) => any) | undefined;
+    "onUpdate:mountedCount"?: ((count: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/messages/components/chat-debug-conversation-rail.vue

@@ -0,0 +1,104 @@
+<script setup>
+import ChatConversationItem from "../../conversations/components/chat-conversation-item.vue";
+const props = defineProps({
+  sidebar: { type: Object, required: true },
+  activeConversationId: { type: [String, null], required: true },
+  resetKey: { type: Number, required: true }
+});
+const emit = defineEmits(["switch", "update:mountedCount"]);
+const stress = ref(false);
+const titleOverrides = ref({});
+const deletedIds = ref(/* @__PURE__ */ new Set());
+const lastAction = ref(null);
+const fixturesById = computed(() => new Map(
+  props.sidebar.conversations.map((fixture) => [fixture.conversation.id, fixture])
+));
+const visibleItems = computed(() => {
+  const count = stress.value ? props.sidebar.stressCount : props.sidebar.defaultCount;
+  return props.sidebar.conversations.slice(0, count).filter((fixture) => !deletedIds.value.has(fixture.conversation.id)).map((fixture) => {
+    const title = titleOverrides.value[fixture.conversation.id];
+    return title ? { ...fixture.conversation, title } : fixture.conversation;
+  });
+});
+watch(() => visibleItems.value.length, (count) => emit("update:mountedCount", count), { immediate: true });
+watch(() => props.resetKey, () => {
+  titleOverrides.value = {};
+  deletedIds.value = /* @__PURE__ */ new Set();
+  lastAction.value = null;
+});
+function selectConversation(id) {
+  const fixture = fixturesById.value.get(id);
+  if (!fixture)
+    return;
+  lastAction.value = `switch \u2192 ${fixture.conversation.title}`;
+  emit("switch", fixture);
+}
+function handleRename(id, title) {
+  titleOverrides.value = { ...titleOverrides.value, [id]: title };
+  lastAction.value = `rename \u2192 ${title}`;
+}
+function handleDelete(id) {
+  deletedIds.value = /* @__PURE__ */ new Set([...deletedIds.value, id]);
+  lastAction.value = `delete \u2192 ${id}`;
+}
+function recordAction(action) {
+  lastAction.value = action;
+}
+</script>
+
+<template>
+    <aside class="debug-conversation-rail" flex="~ col" min-h-0 shrink-0>
+        <div flex items-center justify-between gap-8px px-8px pb-8px>
+            <span body-caption-9-medium text-tertiary>
+                Conversas · {{ visibleItems.length }}
+            </span>
+            <div flex items-center gap-8px>
+                <button
+                    type="button"
+                    body-10-regular
+                    :class="stress ? 'text-tertiary hover:text-secondary' : 'text-primary'"
+                    transition-colors
+                    @click="stress = false"
+                >
+                    Default ({{ sidebar.defaultCount }})
+                </button>
+                <button
+                    type="button"
+                    body-10-regular
+                    :class="stress ? 'text-primary' : 'text-tertiary hover:text-secondary'"
+                    transition-colors
+                    @click="stress = true"
+                >
+                    Stress ({{ sidebar.stressCount }})
+                </button>
+            </div>
+        </div>
+
+        <div flex="~ col" gap-1px min-h-0 grow overflow-y-auto px-4px>
+            <ChatConversationItem
+                v-for="item in visibleItems"
+                :key="item.id"
+                :conversation="item"
+                :active="item.id === activeConversationId"
+                :draggable="true"
+                :select-conversation="selectConversation"
+                @rename="handleRename"
+                @delete="handleDelete"
+                @duplicate="recordAction(`duplicate \u2192 ${$event}`)"
+                @export="recordAction(`export \u2192 ${$event}`)"
+                @drag-start="recordAction(`drag \u2192 ${$event}`)"
+                @drag-end="recordAction('drag end')"
+            />
+        </div>
+
+        <div h-24px px-8px flex items-center shrink-0>
+            <span v-if="lastAction" body-10-regular text-tertiary truncate>
+                {{ lastAction }}
+            </span>
+        </div>
+    </aside>
+</template>
+
+<style scoped>
+.debug-conversation-rail{border-right:1px solid rgba(229,231,235,.7);padding-top:8px;width:232px}
+</style>

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

@@ -0,0 +1,16 @@
+import type { ChatDebugConversationFixture, ChatDebugSidebarFixture } from '../debug/chat-debug-scenarios.js';
+type __VLS_Props = {
+    sidebar: ChatDebugSidebarFixture;
+    activeConversationId: string | null;
+    /** Bumped by the workbench on restart so local rename/delete state rewinds with the timeline. */
+    resetKey: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    switch: (fixture: ChatDebugConversationFixture) => any;
+    "update:mountedCount": (count: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSwitch?: ((fixture: ChatDebugConversationFixture) => any) | undefined;
+    "onUpdate:mountedCount"?: ((count: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,8 +1,11 @@
 <script setup>
+import ChatDebugConversationRail from "./chat-debug-conversation-rail.vue";
 import ChatMessageList from "./chat-message-list.vue";
 import { provideEmbedConfig } from "../../embed/composables/embed-config";
+import { createChatDebugCitationsConfig } from "../debug/chat-debug-citations";
+import { createReasoningCache, resolveReasoningDisplayMessages } from "../message-reasoning";
 import { createChatDebugScenarios } from "../debug/chat-debug-scenarios";
-import { useChatDebugDiagnostics } from "../debug/use-chat-debug-diagnostics";
+import { useChatDebugDiagnostics, useChatDebugWindowListenerProbe } from "../debug/use-chat-debug-diagnostics";
 import { formatChatDebugTime as formatTime, useChatDebugPlayback } from "../debug/use-chat-debug-playback";
 const scenarios = createChatDebugScenarios();
 const viewportWidth = ref("default");
@@ -12,7 +15,8 @@ const rootRef = ref(null);
 const stageRef = ref(null);
 provideEmbedConfig({
   workspaceId: "chat-debug-workbench",
-  hideSidebar: true
+  hideSidebar: true,
+  citations: createChatDebugCitationsConfig()
 }, { syncGlobal: false });
 const {
   selectedScenario,
@@ -30,7 +34,8 @@ const {
   togglePlayback,
   jumpToEnd,
   stepEvent,
-  selectSpeed
+  selectSpeed,
+  applyManualEvent
 } = useChatDebugPlayback(scenarios, {
   onFrame: handlePlaybackFrame,
   onReset: handlePlaybackReset
@@ -45,11 +50,47 @@ const { diagnostics, reset: resetDiagnostics, recordFrame } = useChatDebugDiagno
   speed,
   seekRevision
 });
+const windowListeners = useChatDebugWindowListenerProbe();
+const reasoningCache = createReasoningCache();
+const displayMessages = computed(() => selectedScenario.value.reasoningFormat === "raw" ? resolveReasoningDisplayMessages(playbackState.value.messages, reasoningCache) : playbackState.value.messages);
+const reasoningCacheEntries = ref(0);
+watch(displayMessages, () => {
+  reasoningCacheEntries.value = reasoningCache.bySignature.size;
+}, { immediate: true });
+const switchCount = ref(0);
+const railResetKey = ref(0);
+const sidebarMountedCount = ref(0);
+let manualSwitchSequence = 0;
+watch(() => playbackState.value.activeConversationId, (next, previous) => {
+  if (next && next !== previous)
+    switchCount.value += 1;
+});
+const renderedConversationId = computed(() => displayMessages.value[0]?.conversationId ?? null);
+const renderedConversationStale = computed(() => {
+  const active = playbackState.value.activeConversationId;
+  return Boolean(active && renderedConversationId.value && renderedConversationId.value !== active);
+});
+function handleRailSwitch(fixture) {
+  if (playing.value)
+    togglePlayback();
+  manualSwitchSequence += 1;
+  applyManualEvent({
+    id: `manual-switch-${manualSwitchSequence}`,
+    atMs: elapsedMs.value,
+    label: `Manual: ${fixture.conversation.title}`,
+    tone: "user",
+    type: "conversation.switch",
+    conversationId: fixture.conversation.id,
+    messages: fixture.messages
+  });
+}
 function handlePlaybackFrame(frameDeltaMs) {
   recordFrame(frameDeltaMs);
 }
 function handlePlaybackReset() {
   resetDiagnostics();
+  switchCount.value = 0;
+  railResetKey.value += 1;
 }
 const messageCharacters = computed(() => playbackState.value.messages.reduce(
   (total, message) => total + message.content.length,
@@ -187,24 +228,35 @@ function eventToneClass(tone) {
                 </div>
             </div>
 
-            <div ref="stageRef" class="stage-viewport" min-h-0 grow flex justify-center px-24px pb-24px>
-                <div
-                    class="chat-under-test"
-                    :class="[
+            <div class="stage-body" min-h-0 grow flex>
+                <ChatDebugConversationRail
+                    v-if="selectedScenario.sidebar"
+                    :sidebar="selectedScenario.sidebar"
+                    :active-conversation-id="playbackState.activeConversationId"
+                    :reset-key="railResetKey"
+                    ml-24px mb-24px
+                    @switch="handleRailSwitch"
+                    @update:mounted-count="sidebarMountedCount = $event"
+                />
+                <div ref="stageRef" class="stage-viewport" min-h-0 min-w-0 grow flex justify-center px-24px pb-24px>
+                    <div
+                        class="chat-under-test"
+                        :class="[
   `chat-under-test--${viewportWidth}`,
   showBounds && 'chat-under-test--bounded'
 ]"
-                >
-                    <TelaChatBody :key="conversationVariant" :variant="conversationVariant" h-full>
-                        <ChatMessageList
-                            :messages="playbackState.messages"
-                            :loading="playbackState.loading"
-                            :streaming-active-message-id="playbackState.streamingActiveMessageId"
-                            :preparing-steps="playbackState.preparingSteps"
-                            :variant="conversationVariant"
-                            @retry="stepEvent(-1)"
-                        />
-                    </TelaChatBody>
+                    >
+                        <TelaChatBody :key="conversationVariant" :variant="conversationVariant" h-full>
+                            <ChatMessageList
+                                :messages="displayMessages"
+                                :loading="playbackState.loading"
+                                :streaming-active-message-id="playbackState.streamingActiveMessageId"
+                                :preparing-steps="playbackState.preparingSteps"
+                                :variant="conversationVariant"
+                                @retry="stepEvent(-1)"
+                            />
+                        </TelaChatBody>
+                    </div>
                 </div>
             </div>
         </main>
@@ -346,6 +398,63 @@ function eventToneClass(tone) {
                 </dl>
             </section>
 
+            <section v-if="selectedScenario.sidebar" mt-28px>
+                <div body-10-regular text-tertiary uppercase tracking-0.08em mb-14px>
+                    Switching
+                </div>
+                <div flex items-center gap-8px body-12-medium>
+                    <span
+                        w-6px h-6px rounded-full
+                        :class="renderedConversationStale ? 'bg-amber-500' : 'bg-emerald-500'"
+                    />
+                    {{ renderedConversationStale ? "stale content" : "thread in sync" }}
+                </div>
+                <dl class="detail-list" body-12-regular mt-12px>
+                    <div>
+                        <dt text-tertiary>
+                            Switches
+                        </dt><dd text-primary tabular-nums>
+                            {{ switchCount }}
+                        </dd>
+                    </div>
+                    <div>
+                        <dt text-tertiary>
+                            Sidebar items
+                        </dt><dd text-primary tabular-nums>
+                            {{ sidebarMountedCount }}
+                        </dd>
+                    </div>
+                    <div>
+                        <dt text-tertiary>
+                            Reasoning cache
+                        </dt><dd text-primary tabular-nums>
+                            {{ reasoningCacheEntries }}
+                        </dd>
+                    </div>
+                    <div>
+                        <dt text-tertiary>
+                            Window listeners Δ
+                        </dt><dd text-primary tabular-nums>
+                            {{ windowListeners.active }} (peak {{ windowListeners.peak }})
+                        </dd>
+                    </div>
+                    <div>
+                        <dt text-tertiary>
+                            Keydown listeners
+                        </dt><dd text-primary tabular-nums>
+                            {{ windowListeners.byType.keydown ?? 0 }}
+                        </dd>
+                    </div>
+                    <div>
+                        <dt text-tertiary>
+                            Rendered thread
+                        </dt><dd text-primary truncate max-w-120px>
+                            {{ renderedConversationId ?? "\u2014" }}
+                        </dd>
+                    </div>
+                </dl>
+            </section>
+
             <section mt-28px>
                 <div flex items-center justify-between gap-12px mb-14px>
                     <div body-10-regular text-tertiary uppercase tracking-0.08em>

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

@@ -3,6 +3,7 @@ import { useChatAuth } from "#chat-auth";
 import { useEmbedConfig } from "../../embed/composables/embed-config";
 import { useWorkspaceMembers } from "../../workspace/composables/workspace-members";
 import { isPromptTooLongFailure } from "../../types/schemas/chat/messages.js";
+import { linkifyBareCitations } from "../../citations/citation-links";
 import { parseContentWithFiles } from "../../files/content-detection";
 import ChatVaultLink from "../../files/components/chat-vault-link.vue";
 const props = defineProps({
@@ -56,7 +57,12 @@ function formatTime(date) {
   const d = date instanceof Date ? date : new Date(date);
   return d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
 }
-const displayContent = computed(() => props.message.content ?? "");
+const displayContent = computed(() => {
+  const content = props.message.content ?? "";
+  if (props.message.role !== "assistant" || !embedConfig?.citations.value)
+    return content;
+  return linkifyBareCitations(content);
+});
 const userContentHtml = computed(() => {
   if (props.message.role !== "user")
     return "";
@@ -93,7 +99,7 @@ const contentSegments = computed(() => {
   const content = displayContent.value;
   if (!content)
     return [];
-  return parseContentWithFiles(content, { detectCitations: Boolean(embedConfig?.citations.value) });
+  return parseContentWithFiles(content);
 });
 const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type !== "text"));
 </script>
@@ -227,7 +233,7 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                     </div>
                 </template>
                 <template v-else>
-                    <div v-if="hasDetectedFiles" body-16-regular text-black-900>
+                    <div v-if="hasDetectedFiles" body-16-regular text-primary>
                         <template v-for="(segment, index) in contentSegments" :key="index">
                             <ClientOnly v-if="segment.type === 'text'">
                                 <AppMarkdownRender
@@ -266,7 +272,7 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                             :smooth-streaming="isPending ? 'auto' : false"
                             :typewriter="isPending"
                             mode="chat"
-                            text-black-900
+                            text-primary
                         />
                     </ClientOnly>
                     <div

package/dist/runtime/messages/debug/chat-debug-citations.d.ts

@@ -0,0 +1,8 @@
+import type { CitationRef } from '../../citations/citation-links.js';
+import type { ChatCitationsConfig, CitationMeta } from '../../citations/types.js';
+/**
+ * Metadata derived from the reference itself, so any `cite://` a scenario emits resolves
+ * without a backend or a per-document fixture table.
+ */
+export declare function chatDebugCitationMeta(ref: CitationRef): CitationMeta;
+export declare function createChatDebugCitationsConfig(): ChatCitationsConfig;