Update source

src/lib/TraceViewer.svelte

@@ -14,6 +14,8 @@
   let error = $state('');
   let messages = $state([]);
   let focusedIdx = $state(-1);
+  let playing = $state(false);
+  let skipFlag = false;
   let listEl;
 
   async function load() {
@@ -22,18 +24,30 @@
     messages = [];
     focusedIdx = -1;
     loadedCount = 0;
+    playing = false;
+    skipFlag = false;
+
     try {
       const res = await fetch(toRawUrl(url));
       if (!res.ok) throw new Error(`Failed to fetch (HTTP ${res.status})`);
       const text = await res.text();
-      messages = parseJsonl(text);
-      loadedCount = messages.length;
-      if (messages.length === 0) {
+      const parsed = parseJsonl(text);
+      for (const msg of parsed) {
+        msg._visible = false;
+        msg._visibleBlocks = 0;
+        for (const block of msg.blocks) {
+          block._typedText = '';
+          block._typing = false;
+        }
+      }
+      messages = parsed;
+      loadedCount = parsed.length;
+
+      if (parsed.length === 0) {
         error = 'No messages parsed from this file.';
       } else {
-        focusedIdx = 0;
         await tick();
-        scrollToFocused('auto');
+        playback();
       }
     } catch (e) {
       error = e?.message || String(e);
@@ -42,6 +56,72 @@
     }
   }
 
+  const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+  async function playback() {
+    playing = true;
+    skipFlag = false;
+    for (let mi = 0; mi < messages.length; mi++) {
+      if (skipFlag) break;
+      const msg = messages[mi];
+      msg._visible = true;
+      focusedIdx = mi;
+      await tick();
+      scrollToFocused('smooth');
+      await wait(40);
+
+      for (let bi = 0; bi < msg.blocks.length; bi++) {
+        if (skipFlag) break;
+        msg._visibleBlocks = bi + 1;
+        const block = msg.blocks[bi];
+        if (block.kind === 'text' || block.kind === 'thinking') {
+          await typeBlock(block);
+        } else {
+          await wait(90);
+        }
+      }
+      if (skipFlag) break;
+      await wait(120);
+    }
+
+    if (skipFlag) revealAll();
+    playing = false;
+  }
+
+  async function typeBlock(block) {
+    const full = block.text || '';
+    const len = full.length;
+    if (len === 0) return;
+    const totalMs = Math.max(250, Math.min(1400, len * 10));
+    const tickMs = 16;
+    const totalTicks = Math.ceil(totalMs / tickMs);
+    const step = Math.max(1, Math.ceil(len / totalTicks));
+
+    block._typing = true;
+    for (let c = step; c < len; c += step) {
+      if (skipFlag) break;
+      block._typedText = full.slice(0, c);
+      await wait(tickMs);
+    }
+    block._typedText = full;
+    block._typing = false;
+  }
+
+  function revealAll() {
+    for (const msg of messages) {
+      msg._visible = true;
+      msg._visibleBlocks = msg.blocks.length;
+      for (const block of msg.blocks) {
+        if ('_typedText' in block) block._typedText = block.text || '';
+        block._typing = false;
+      }
+    }
+  }
+
+  function skip() {
+    skipFlag = true;
+  }
+
   async function handleKey(e) {
     const t = e.target;
     if (
@@ -51,8 +131,17 @@
         t.isContentEditable)
     )
       return;
-    if (messages.length === 0) return;
 
+    if (
+      playing &&
+      ['ArrowDown', 'ArrowUp', 'Home', 'End', 'Escape', ' '].includes(e.key)
+    ) {
+      e.preventDefault();
+      skip();
+      return;
+    }
+
+    if (messages.length === 0) return;
     if (e.key === 'ArrowDown' || e.key === 'j') {
       e.preventDefault();
       focusedIdx = Math.min(messages.length - 1, focusedIdx + 1);
@@ -163,14 +252,23 @@
           <span class="text-[#991b1b]">{error}</span>
         </div>
       {:else if messages.length > 0}
-        <div class="flex items-baseline gap-2 mb-3">
+        <div class="flex items-baseline gap-2 mb-3 animate-fade-in">
           <span
-            class="w-[1ch] text-center text-[#0f7a3a] animate-ready-pulse"
-            >●</span
+            class="w-[1ch] text-center {playing
+              ? 'text-[#5f5f5c]'
+              : 'text-[#0f7a3a] animate-ready-pulse'}"
           >
-          <span class="text-[#0f5a2a] font-semibold"
-            >Loaded {loadedCount} messages</span
+            {playing ? spinnerFrames[spinnerFrame] : '●'}
+          </span>
+          <span
+            class="{playing
+              ? 'text-[#333331]'
+              : 'text-[#0f5a2a]'} font-semibold"
           >
+            {playing
+              ? `Streaming ${focusedIdx + 1} / ${loadedCount}...`
+              : `Loaded ${loadedCount} messages`}
+          </span>
         </div>
       {:else}
         <div class="text-[#888] text-[13px] leading-relaxed">
@@ -209,113 +307,123 @@
       {/if}
 
       {#each messages as msg, i (i)}
-        {@const focused = i === focusedIdx}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div
-          data-idx={i}
-          onclick={() => (focusedIdx = i)}
-          class="py-1 cursor-default rounded transition-colors {focused
-            ? 'bg-[#fffbe6]'
-            : 'hover:bg-[#faf9f5]'}"
-        >
-          <!-- header -->
-          <div class="flex items-baseline gap-2 px-2">
-            <span
-              class="w-[1ch] text-center {focused
-                ? 'text-[#0f7a3a] animate-ready-pulse'
-                : 'text-[#6b6b68]'}"
-            >
-              {focused ? '●' : '○'}
-            </span>
-            <span
-              class="text-[11px] uppercase tracking-wider font-semibold {roleColor[
-                msg.role
-              ] || roleColor.unknown}"
-            >
-              {msg.role}
-            </span>
-            {#if msg.title}
-              <span class="text-[12px] text-[#6a6a66] truncate"
-                >{msg.title}</span
+        {#if msg._visible}
+          {@const focused = i === focusedIdx}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div
+            data-idx={i}
+            onclick={() => (focusedIdx = i)}
+            class="py-1 cursor-default rounded transition-colors animate-fade-in {focused
+              ? 'bg-[#fffbe6]'
+              : 'hover:bg-[#faf9f5]'}"
+          >
+            <!-- header -->
+            <div class="flex items-baseline gap-2 px-2">
+              <span
+                class="w-[1ch] text-center {focused
+                  ? 'text-[#0f7a3a] animate-ready-pulse'
+                  : 'text-[#6b6b68]'}"
               >
-            {/if}
-            <span class="ml-auto flex items-baseline gap-3">
-              {#if msg.model}
-                <span class="text-[11px] text-[#888]">{msg.model}</span>
-              {/if}
-              <span class="text-[11px] text-[#aaa]">#{i}</span>
-            </span>
-          </div>
-
-          <!-- blocks -->
-          {#each msg.blocks as block, bi}
-            {@const isLast = bi === msg.blocks.length - 1}
-            <div class="flex items-start gap-2 px-2">
-              <span class="w-[1ch] text-[#b3b3ad] shrink-0 mt-[2px]"
-                >{isLast ? '└' : '├'}</span
+                {focused ? '●' : '○'}
+              </span>
+              <span
+                class="text-[11px] uppercase tracking-wider font-semibold {roleColor[
+                  msg.role
+                ] || roleColor.unknown}"
               >
-              <div class="flex-1 min-w-0">
-                {#if block.kind === 'text'}
-                  <pre
-                    class="whitespace-pre-wrap break-words text-[13px] text-[#232323] leading-[1.65] font-mono">{block.text}</pre>
-                {:else if block.kind === 'thinking'}
-                  <details class="py-0.5">
-                    <summary
-                      class="cursor-pointer text-[11px] text-[#8b5cf6] font-semibold select-none hover:underline"
-                      >thinking</summary
-                    >
-                    <pre
-                      class="whitespace-pre-wrap break-words text-[12px] text-[#6b21a8] mt-1 leading-[1.65] pl-[1ch] border-l border-[#e9d5ff]">{block.text}</pre>
-                  </details>
-                {:else if block.kind === 'tool_call'}
-                  <div class="py-0.5">
-                    <div class="text-[12px] text-[#6b21a8]">
-                      <span class="text-[#aaa]">tool</span>
-                      <span class="font-semibold">{block.name}</span>
-                    </div>
-                    <pre
-                      class="text-[12px] text-[#3a3a38] whitespace-pre-wrap break-words max-h-[240px] overflow-auto mt-0.5 pl-[1ch] border-l border-[#e9d5ff]">{formatJson(
-                        block.input
-                      )}</pre>
-                  </div>
-                {:else if block.kind === 'tool_result'}
-                  <div class="py-0.5">
-                    <div
-                      class="text-[12px] {block.isError
-                        ? 'text-[#991b1b]'
-                        : 'text-[#6a6a66]'}"
-                    >
-                      <span class="text-[#aaa]">result</span>
-                      {#if block.isError}<span class="font-semibold"
-                          >· error</span
-                        >{/if}
-                    </div>
-                    <pre
-                      class="text-[12px] text-[#3a3a38] whitespace-pre-wrap break-words max-h-[280px] overflow-auto mt-0.5 pl-[1ch] border-l {block.isError
-                        ? 'border-[#fecaca]'
-                        : 'border-[#e5e5e0]'}">{block.text}</pre>
-                  </div>
-                {:else if block.kind === 'image'}
-                  <div class="text-[12px] text-[#6a6a66] italic">
-                    [image attachment]
-                  </div>
-                {:else if block.kind === 'raw'}
-                  <details>
-                    <summary
-                      class="cursor-pointer text-[11px] text-[#888] select-none hover:underline"
-                      >raw</summary
-                    >
-                    <pre
-                      class="text-[11px] text-[#555] whitespace-pre-wrap break-words mt-1 max-h-[200px] overflow-auto pl-[1ch] border-l border-[#e5e5e0]">{formatJson(
-                        block.json
-                      )}</pre>
-                  </details>
+                {msg.role}
+              </span>
+              {#if msg.title}
+                <span class="text-[12px] text-[#6a6a66] truncate"
+                  >{msg.title}</span
+                >
+              {/if}
+              <span class="ml-auto flex items-baseline gap-3">
+                {#if msg.model}
+                  <span class="text-[11px] text-[#888]">{msg.model}</span>
                 {/if}
-              </div>
+                <span class="text-[11px] text-[#aaa]">#{i}</span>
+              </span>
             </div>
-          {/each}
-        </div>
+
+            <!-- blocks (only show revealed ones) -->
+            {#each msg.blocks as block, bi}
+              {#if bi < msg._visibleBlocks}
+                {@const isLast = bi === msg.blocks.length - 1}
+                <div class="flex items-start gap-2 px-2 animate-fade-in">
+                  <span class="w-[1ch] text-[#b3b3ad] shrink-0 mt-[2px]"
+                    >{isLast ? '└' : '├'}</span
+                  >
+                  <div class="flex-1 min-w-0">
+                    {#if block.kind === 'text'}
+                      <pre
+                        class="whitespace-pre-wrap break-words text-[13px] text-[#232323] leading-[1.65] font-mono">{block._typedText}{#if block._typing}<span
+                            class="animate-blink text-[#8b5cf6]"
+                            aria-hidden="true">▎</span
+                          >{/if}</pre>
+                    {:else if block.kind === 'thinking'}
+                      <details class="py-0.5" open>
+                        <summary
+                          class="cursor-pointer text-[11px] text-[#8b5cf6] font-semibold select-none hover:underline"
+                          >thinking</summary
+                        >
+                        <pre
+                          class="whitespace-pre-wrap break-words text-[12px] text-[#6b21a8] mt-1 leading-[1.65] pl-[1ch] border-l border-[#e9d5ff]">{block._typedText}{#if block._typing}<span
+                              class="animate-blink text-[#8b5cf6]"
+                              aria-hidden="true">▎</span
+                            >{/if}</pre>
+                      </details>
+                    {:else if block.kind === 'tool_call'}
+                      <div class="py-0.5">
+                        <div class="text-[12px] text-[#6b21a8]">
+                          <span class="text-[#aaa]">tool</span>
+                          <span class="font-semibold">{block.name}</span>
+                        </div>
+                        <pre
+                          class="text-[12px] text-[#3a3a38] whitespace-pre-wrap break-words max-h-[240px] overflow-auto mt-0.5 pl-[1ch] border-l border-[#e9d5ff]">{formatJson(
+                            block.input
+                          )}</pre>
+                      </div>
+                    {:else if block.kind === 'tool_result'}
+                      <div class="py-0.5">
+                        <div
+                          class="text-[12px] {block.isError
+                            ? 'text-[#991b1b]'
+                            : 'text-[#6a6a66]'}"
+                        >
+                          <span class="text-[#aaa]">result</span>
+                          {#if block.isError}<span class="font-semibold"
+                              >· error</span
+                            >{/if}
+                        </div>
+                        <pre
+                          class="text-[12px] text-[#3a3a38] whitespace-pre-wrap break-words max-h-[280px] overflow-auto mt-0.5 pl-[1ch] border-l {block.isError
+                            ? 'border-[#fecaca]'
+                            : 'border-[#e5e5e0]'}">{block.text}</pre>
+                      </div>
+                    {:else if block.kind === 'image'}
+                      <div class="text-[12px] text-[#6a6a66] italic">
+                        [image attachment]
+                      </div>
+                    {:else if block.kind === 'raw'}
+                      <details>
+                        <summary
+                          class="cursor-pointer text-[11px] text-[#888] select-none hover:underline"
+                          >raw</summary
+                        >
+                        <pre
+                          class="text-[11px] text-[#555] whitespace-pre-wrap break-words mt-1 max-h-[200px] overflow-auto pl-[1ch] border-l border-[#e5e5e0]">{formatJson(
+                            block.json
+                          )}</pre>
+                      </details>
+                    {/if}
+                  </div>
+                </div>
+              {/if}
+            {/each}
+          </div>
+        {/if}
       {/each}
     </div>
 
@@ -328,22 +436,30 @@
       {:else}
         <span>ready</span>
       {/if}
-      <span class="flex items-center gap-1">
-        <kbd class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0]"
-          >↑</kbd
-        >
-        <kbd class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0]"
-          >↓</kbd
-        > navigate
-      </span>
-      <span class="flex items-center gap-1">
-        <kbd class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0]"
-          >Home</kbd
+      {#if playing}
+        <button
+          onclick={skip}
+          class="px-2 py-0.5 bg-[#f5f5f2] rounded border border-[#e5e5e0] text-[11px] hover:bg-[#eeeae0] cursor-pointer"
+          >skip</button
         >
-        <kbd class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0]"
-          >End</kbd
-        > jump
-      </span>
+      {:else}
+        <span class="flex items-center gap-1">
+          <kbd class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0]"
+            >↑</kbd
+          >
+          <kbd class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0]"
+            >↓</kbd
+          > navigate
+        </span>
+        <span class="flex items-center gap-1">
+          <kbd class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0]"
+            >Home</kbd
+          >
+          <kbd class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0]"
+            >End</kbd
+          > jump
+        </span>
+      {/if}
     </div>
   </div>
 </div>