@meistrari/chat-nuxt 3.13.1 → 3.14.0-rc.0

package/dist/module.json

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

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,428 @@
+<script setup>
+import ChatMessageList from "./chat-message-list.vue";
+import { provideEmbedConfig } from "../../embed/composables/embed-config";
+import { createChatDebugScenarios } from "../debug/chat-debug-scenarios";
+import { useChatDebugDiagnostics } from "../debug/use-chat-debug-diagnostics";
+import { formatChatDebugTime as formatTime, useChatDebugPlayback } from "../debug/use-chat-debug-playback";
+const scenarios = createChatDebugScenarios();
+const viewportWidth = ref("default");
+const showBounds = ref(false);
+const rootRef = ref(null);
+const stageRef = ref(null);
+provideEmbedConfig({
+  workspaceId: "chat-debug-workbench",
+  hideSidebar: true
+}, { syncGlobal: false });
+const {
+  selectedScenario,
+  elapsedMs,
+  playing,
+  speed,
+  seekRevision,
+  playbackState,
+  appliedEventCount,
+  currentEvent,
+  progress,
+  seek,
+  restart,
+  selectScenario,
+  togglePlayback,
+  jumpToEnd,
+  stepEvent,
+  selectSpeed
+} = useChatDebugPlayback(scenarios, {
+  onFrame: handlePlaybackFrame,
+  onReset: handlePlaybackReset
+});
+const { diagnostics, reset: resetDiagnostics, recordFrame } = useChatDebugDiagnostics({
+  stageRef,
+  scenario: selectedScenario,
+  playbackState,
+  appliedEventCount,
+  elapsedMs,
+  playing,
+  speed,
+  seekRevision
+});
+function handlePlaybackFrame(frameDeltaMs) {
+  recordFrame(frameDeltaMs);
+}
+function handlePlaybackReset() {
+  resetDiagnostics();
+}
+const messageCharacters = computed(() => playbackState.value.messages.reduce(
+  (total, message) => total + message.content.length,
+  0
+));
+const estimatedTokens = computed(() => Math.ceil(messageCharacters.value / 4));
+const pendingMessages = computed(() => playbackState.value.messages.filter((message) => message.status === "pending").length);
+const speedOptions = [
+  { id: "1x", label: "1\xD7", title: "Real time" },
+  { id: "4x", label: "4\xD7", title: "Four times faster" },
+  { id: "gap", label: "Gaps", title: "Keep event cadence and compress idle gaps" }
+];
+const viewportOptions = [
+  { id: "narrow", label: "Narrow" },
+  { id: "default", label: "Default" },
+  { id: "wide", label: "Wide" }
+];
+function eventToneClass(tone) {
+  return {
+    neutral: "bg-gray-400",
+    user: "bg-blue-500",
+    assistant: "bg-violet-500",
+    reasoning: "bg-amber-500",
+    tool: "bg-emerald-500",
+    error: "bg-red-500"
+  }[tone];
+}
+</script>
+
+<template>
+    <section
+        ref="rootRef"
+        class="chat-debug-workbench"
+        w-full
+        h-full
+        bg
+        text-primary
+    >
+        <aside class="scenario-rail" px-20px py-22px overflow-y-auto>
+            <div body-caption-9-medium text-tertiary mb-10px>
+                Scenarios
+            </div>
+            <div flex="~ col" gap-4px>
+                <button
+                    v-for="scenario in scenarios"
+                    :key="scenario.id"
+                    type="button"
+                    :title="scenario.intent"
+                    py-5px
+                    text-left
+                    group
+                    @click="selectScenario(scenario.id)"
+                >
+                    <div flex items-center gap-7px>
+                        <span
+                            w-4px h-4px rounded-full shrink-0
+                            :class="scenario.id === selectedScenario.id ? 'bg-gray-900' : 'bg-gray-300 group-hover:bg-gray-500'"
+                            transition-colors
+                        />
+                        <span
+                            body-12-medium
+                            truncate
+                            :class="scenario.id === selectedScenario.id ? 'text-primary' : 'text-secondary group-hover:text-primary'"
+                            transition-colors
+                        >
+                            {{ scenario.name }}
+                        </span>
+                        <span ml-auto shrink-0 body-caption-9-medium text-tertiary tabular-nums>
+                            {{ formatTime(scenario.durationMs) }}
+                        </span>
+                    </div>
+                </button>
+            </div>
+
+            <div mt-24px>
+                <div body-caption-9-medium text-tertiary mb-10px>
+                    Shortcuts
+                </div>
+                <dl class="shortcut-list" body-11-regular text-secondary>
+                    <dt>Play / pause</dt><dd><TelaKbd>Space</TelaKbd></dd>
+                    <dt>Previous event</dt><dd><TelaKbd>,</TelaKbd></dd>
+                    <dt>Next event</dt><dd><TelaKbd>.</TelaKbd></dd>
+                    <dt>Restart</dt><dd><TelaKbd>R</TelaKbd></dd>
+                </dl>
+            </div>
+        </aside>
+
+        <main class="stage-column" min-w-0 min-h-0 flex="~ col">
+            <div h-48px px-24px flex items-center justify-between shrink-0>
+                <div flex items-center gap-8px body-11-regular text-tertiary>
+                    <span>{{ selectedScenario.name }}</span>
+                    <TelaDotSeparator />
+                    <span>{{ playbackState.messages.length }} messages</span>
+                </div>
+                <div flex items-center gap-12px>
+                    <div flex items-center gap-10px>
+                        <button
+                            v-for="option in viewportOptions"
+                            :key="option.id"
+                            type="button"
+                            body-11-regular
+                            :class="viewportWidth === option.id ? 'text-primary' : 'text-tertiary hover:text-secondary'"
+                            transition-colors
+                            @click="viewportWidth = option.id"
+                        >
+                            {{ option.label }}
+                        </button>
+                    </div>
+                    <button
+                        type="button"
+                        body-11-regular
+                        :class="showBounds ? 'text-primary' : 'text-tertiary hover:text-secondary'"
+                        transition-colors
+                        @click="showBounds = !showBounds"
+                    >
+                        Bounds
+                    </button>
+                </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="[
+  `chat-under-test--${viewportWidth}`,
+  showBounds && 'chat-under-test--bounded'
+]"
+                >
+                    <TelaChatBody variant="widget" h-full>
+                        <ChatMessageList
+                            :messages="playbackState.messages"
+                            :loading="playbackState.loading"
+                            :streaming-active-message-id="playbackState.streamingActiveMessageId"
+                            :preparing-steps="playbackState.preparingSteps"
+                            variant="widget"
+                            @retry="stepEvent(-1)"
+                        />
+                    </TelaChatBody>
+                </div>
+            </div>
+        </main>
+
+        <aside class="diagnostics-rail" px-24px py-22px overflow-y-auto>
+            <div flex items-start justify-between gap-12px>
+                <div>
+                    <h2 heading-h5-semibold text-wrap-balance>
+                        Diagnostics
+                    </h2>
+                    <p body-11-regular text-tertiary mt-4px>
+                        Passive probes around the mounted component.
+                    </p>
+                </div>
+                <span
+                    body-10-regular
+                    :class="speed === '1x' ? 'text-emerald-700' : 'text-amber-700'"
+                >
+                    {{ speed === "1x" ? "representative" : "accelerated" }}
+                </span>
+            </div>
+
+            <section mt-28px>
+                <div body-10-regular text-tertiary uppercase tracking-0.08em mb-16px>
+                    Vitals
+                </div>
+                <dl class="metric-grid">
+                    <div>
+                        <dt body-10-regular text-tertiary>
+                            Event → paint
+                        </dt>
+                        <dd heading-h3-semibold tabular-nums>
+                            {{ diagnostics.paintLatencyMs.toFixed(1) }}<small>ms</small>
+                        </dd>
+                    </div>
+                    <div>
+                        <dt body-10-regular text-tertiary>
+                            Dropped frames
+                        </dt>
+                        <dd heading-h3-semibold tabular-nums>
+                            {{ diagnostics.droppedFrames }}
+                        </dd>
+                    </div>
+                    <div>
+                        <dt body-10-regular text-tertiary>
+                            DOM nodes
+                        </dt>
+                        <dd heading-h3-semibold tabular-nums>
+                            {{ diagnostics.domNodes }}
+                        </dd>
+                    </div>
+                    <div>
+                        <dt body-10-regular text-tertiary>
+                            Layout shift
+                        </dt>
+                        <dd heading-h3-semibold tabular-nums>
+                            {{ diagnostics.cumulativeLayoutShift.toFixed(3) }}
+                        </dd>
+                    </div>
+                </dl>
+            </section>
+
+            <section mt-28px>
+                <div body-10-regular text-tertiary uppercase tracking-0.08em mb-14px>
+                    Conversation
+                </div>
+                <dl class="detail-list" body-12-regular>
+                    <div>
+                        <dt text-tertiary>
+                            Messages
+                        </dt><dd text-primary tabular-nums>
+                            {{ playbackState.messages.length }}
+                        </dd>
+                    </div>
+                    <div>
+                        <dt text-tertiary>
+                            Pending
+                        </dt><dd text-primary tabular-nums>
+                            {{ pendingMessages }}
+                        </dd>
+                    </div>
+                    <div>
+                        <dt text-tertiary>
+                            Characters
+                        </dt><dd text-primary tabular-nums>
+                            {{ messageCharacters }}
+                        </dd>
+                    </div>
+                    <div>
+                        <dt text-tertiary>
+                            Est. tokens
+                        </dt><dd text-primary tabular-nums>
+                            ~{{ estimatedTokens }}
+                        </dd>
+                    </div>
+                    <div>
+                        <dt text-tertiary>
+                            Clock drift
+                        </dt><dd text-primary tabular-nums>
+                            {{ (diagnostics.clockDriftMs / 1e3).toFixed(1) }} s
+                        </dd>
+                    </div>
+                </dl>
+            </section>
+
+            <section mt-28px>
+                <div body-10-regular text-tertiary uppercase tracking-0.08em mb-14px>
+                    Scroll & anchoring
+                </div>
+                <div flex items-center gap-8px body-12-medium>
+                    <span
+                        w-6px h-6px rounded-full
+                        :class="diagnostics.scrollPosition === 'pinned' ? 'bg-emerald-500' : diagnostics.scrollPosition === 'detached' ? 'bg-amber-500' : 'bg-gray-400'"
+                    />
+                    {{ diagnostics.scrollPosition }}
+                </div>
+                <dl class="detail-list" body-12-regular mt-12px>
+                    <div>
+                        <dt text-tertiary>
+                            Position
+                        </dt><dd text-primary tabular-nums>
+                            {{ diagnostics.scrollTop }} px
+                        </dd>
+                    </div>
+                    <div>
+                        <dt text-tertiary>
+                            Content height
+                        </dt><dd text-primary tabular-nums>
+                            {{ diagnostics.scrollHeight }} px
+                        </dd>
+                    </div>
+                    <div>
+                        <dt text-tertiary>
+                            Largest move
+                        </dt><dd text-primary tabular-nums>
+                            {{ diagnostics.maxScrollJump.toFixed(0) }} px
+                        </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>
+                        Findings
+                    </div>
+                    <span body-10-regular text-tertiary>{{ diagnostics.findings.length }}</span>
+                </div>
+                <p v-if="diagnostics.findings.length === 0" body-11-regular text-tertiary leading-16px>
+                    No thresholds crossed in this run.
+                </p>
+                <button
+                    v-for="finding in diagnostics.findings"
+                    v-else
+                    :key="finding.kind"
+                    type="button"
+                    w-full
+                    py-7px
+                    flex items-start gap-8px
+                    text-left
+                    @click="seek(finding.atMs)"
+                >
+                    <span i-ph-warning-circle text-amber-600 mt-1px />
+                    <span grow body-11-regular text-secondary leading-16px>{{ finding.label }}</span>
+                    <span body-10-regular text-tertiary tabular-nums>{{ formatTime(finding.atMs) }}</span>
+                </button>
+            </section>
+        </aside>
+
+        <footer class="transport" px-24px>
+            <div flex items-center gap-6px>
+                <TelaIconButton
+                    :icon="playing ? 'i-ph-pause-fill' : 'i-ph-play-fill'"
+                    size="sm"
+                    color="primary"
+                    :aria-label="playing ? 'Pause playback' : 'Play playback'"
+                    @click="togglePlayback"
+                />
+                <TelaIconButton icon="i-ph-arrow-counter-clockwise" size="xs" color="secondary" aria-label="Restart" @click="restart" />
+                <TelaIconButton icon="i-ph-caret-left" size="xs" color="secondary" aria-label="Previous event" @click="stepEvent(-1)" />
+                <TelaIconButton icon="i-ph-caret-right" size="xs" color="secondary" aria-label="Next event" @click="stepEvent(1)" />
+            </div>
+
+            <div class="timeline" min-w-0>
+                <div flex items-center justify-between gap-12px mb-7px body-10-regular text-tertiary tabular-nums>
+                    <span>{{ formatTime(elapsedMs) }}</span>
+                    <span v-if="currentEvent" truncate>{{ currentEvent.label }}</span>
+                    <span>{{ formatTime(selectedScenario.durationMs) }}</span>
+                </div>
+                <div class="timeline-track">
+                    <div class="timeline-progress" :style="{ transform: `scaleX(${progress})` }" />
+                    <button
+                        v-for="event in selectedScenario.events"
+                        :key="event.id"
+                        type="button"
+                        class="timeline-marker"
+                        :class="eventToneClass(event.tone)"
+                        :style="{ left: `${event.atMs / selectedScenario.durationMs * 100}%` }"
+                        :title="`${formatTime(event.atMs)} \xB7 ${event.label}`"
+                        @click="seek(event.atMs)"
+                    />
+                    <input
+                        :value="elapsedMs"
+                        type="range"
+                        min="0"
+                        :max="selectedScenario.durationMs"
+                        step="1"
+                        aria-label="Playback timeline"
+                        @input="seek(Number($event.target.value))"
+                    >
+                </div>
+            </div>
+
+            <div flex items-center justify-end gap-14px>
+                <div flex items-center gap-10px>
+                    <button
+                        v-for="option in speedOptions"
+                        :key="option.id"
+                        type="button"
+                        body-11-medium
+                        :title="option.title"
+                        :class="speed === option.id ? 'text-primary' : 'text-tertiary hover:text-secondary'"
+                        transition-colors
+                        @click="selectSpeed(option.id)"
+                    >
+                        {{ option.label }}
+                    </button>
+                </div>
+                <button type="button" body-11-medium text-secondary hover:text-primary transition-colors @click="jumpToEnd">
+                    End
+                </button>
+            </div>
+        </footer>
+    </section>
+</template>
+
+<style scoped>
+.chat-debug-workbench{display:grid;grid-template-columns:188px minmax(480px,1fr) 280px;grid-template-rows:minmax(0,1fr) 82px;overflow:hidden}.diagnostics-rail,.scenario-rail,.stage-column{grid-row:1}.scenario-rail{grid-column:1}.stage-column{grid-column:2}.diagnostics-rail{grid-column:3}.transport{align-items:center;display:grid;gap:24px;grid-column:1/-1;grid-row:2;grid-template-columns:190px minmax(280px,1fr) 220px}.detail-list,.shortcut-list{display:flex;flex-direction:column;gap:9px}.detail-list>div,.shortcut-list :deep(div),.shortcut-list>div{display:contents}.shortcut-list{align-items:center;display:grid;grid-template-columns:minmax(0,1fr) auto}.detail-list dd,.shortcut-list dd{margin:0}.detail-list>div{align-items:baseline;display:flex;gap:16px;justify-content:space-between}.stage-viewport{overflow:hidden}.chat-under-test{height:100%;min-height:0;overflow:hidden;width:100%}.chat-under-test--narrow{max-width:520px}.chat-under-test--default{max-width:760px}.chat-under-test--wide{max-width:1040px}.chat-under-test--bounded{outline:1px dashed rgba(156,163,175,.8);outline-offset:-1px}.metric-grid{display:grid;gap:22px 18px;grid-template-columns:1fr 1fr}.metric-grid dd{margin:5px 0 0}.metric-grid small{color:#6b7280;font-size:10px;font-weight:400;margin-left:3px}.timeline-track{height:18px;position:relative}.timeline-progress,.timeline-track:before{content:"";height:2px;left:0;position:absolute;right:0;top:8px}.timeline-track:before{background:#e5e7eb}.timeline-progress{background:#1f2937;transform-origin:left center;z-index:1}.timeline-marker{height:8px;padding:0;position:absolute;top:5px;transform:translateX(-1px);width:2px;z-index:2}.timeline-track input[type=range]{cursor:ew-resize;height:18px;inset:0;margin:0;opacity:0;position:absolute;width:100%;z-index:3}@media (max-width:1180px){.chat-debug-workbench{grid-template-columns:168px minmax(480px,1fr) 260px}.diagnostics-rail,.scenario-rail{padding-left:16px;padding-right:16px}}@media (max-width:900px){.chat-debug-workbench{grid-template-columns:minmax(480px,1fr) 260px}.scenario-rail{display:none}.stage-column{grid-column:1}.diagnostics-rail{grid-column:2}}
+</style>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,38 @@
+import type { Message } from '../../types/schemas/chat/conversations.js';
+export type ChatDebugEventTone = 'neutral' | 'user' | 'assistant' | 'reasoning' | 'tool' | 'error';
+type ChatDebugEventBase = {
+    id: string;
+    atMs: number;
+    label: string;
+    tone: ChatDebugEventTone;
+};
+export type ChatDebugEvent = ChatDebugEventBase & ({
+    type: 'message.upsert';
+    message: Message;
+} | {
+    type: 'message.patch';
+    messageId: string;
+    patch: Partial<Message>;
+} | {
+    type: 'playback.patch';
+    patch: Partial<Omit<ChatDebugPlaybackState, 'messages'>>;
+});
+export type ChatDebugScenario = {
+    id: string;
+    name: string;
+    intent: string;
+    durationMs: number;
+    events: ChatDebugEvent[];
+};
+export type ChatDebugPlaybackState = {
+    messages: Message[];
+    loading: boolean;
+    streamingActiveMessageId: string | null;
+    preparingSteps: string[] | null;
+};
+export declare const EMPTY_CHAT_DEBUG_PLAYBACK_STATE: ChatDebugPlaybackState;
+export declare function applyChatDebugEvent(state: ChatDebugPlaybackState, event: ChatDebugEvent): ChatDebugPlaybackState;
+export declare function resolveChatDebugPlayback(scenario: ChatDebugScenario, elapsedMs: number): ChatDebugPlaybackState;
+export declare function countAppliedChatDebugEvents(scenario: ChatDebugScenario, elapsedMs: number): number;
+export declare function createChatDebugScenarios(baseTime?: number): ChatDebugScenario[];
+export {};