Update Svelte source

src/lib/TraceViewer.svelte

@@ -1,11 +1,16 @@
 <script>
-  import { tick } from 'svelte';
+  import { tick, onMount, onDestroy } from 'svelte';
   import { parseJsonl, toRawUrl } from './parse.js';
 
+  const spinnerFrames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+  let spinnerFrame = $state(0);
+  let spinnerInterval;
+
   let url = $state(
     'https://huggingface.co/datasets/mishig/traces/blob/main/36c3db7c-71e3-4ee6-b528-e2a64c9cad77.jsonl'
   );
   let loading = $state(false);
+  let loadedCount = $state(0);
   let error = $state('');
   let messages = $state([]);
   let focusedIdx = $state(-1);
@@ -16,11 +21,13 @@
     error = '';
     messages = [];
     focusedIdx = -1;
+    loadedCount = 0;
     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) {
         error = 'No messages parsed from this file.';
       } else {
@@ -79,13 +86,23 @@
     }
   }
 
-  const roleBadge = {
-    user: 'bg-[#dceafe] text-[#1e40af]',
-    assistant: 'bg-[#dcfce7] text-[#166534]',
-    tool: 'bg-[#f3e8ff] text-[#6b21a8]',
-    system: 'bg-[#fef3c7] text-[#92400e]',
-    meta: 'bg-[#f1f1ec] text-[#6a6a66]',
-    unknown: 'bg-[#f1f1ec] text-[#6a6a66]',
+  onMount(() => {
+    spinnerInterval = setInterval(() => {
+      spinnerFrame = (spinnerFrame + 1) % spinnerFrames.length;
+    }, 90);
+  });
+
+  onDestroy(() => {
+    clearInterval(spinnerInterval);
+  });
+
+  const roleColor = {
+    user: 'text-[#1e40af]',
+    assistant: 'text-[#0f5a2a]',
+    tool: 'text-[#6b21a8]',
+    system: 'text-[#92400e]',
+    meta: 'text-[#6a6a66]',
+    unknown: 'text-[#6a6a66]',
   };
 </script>
 
@@ -95,7 +112,7 @@
   class="frame-bg frame-shadow w-[960px] max-w-[calc(100vw-48px)] rounded-[20px] p-[3px]"
 >
   <div
-    class="w-full h-[85vh] bg-[#fbfbf9] rounded-[17px] overflow-hidden flex flex-col text-[#232323]"
+    class="w-full h-[85vh] bg-[#fbfbf9] rounded-[17px] overflow-hidden flex flex-col font-mono text-[14px] leading-[1.7] text-[#232323]"
   >
     <!-- chrome -->
     <div class="flex items-center gap-2 pt-4 px-[18px] pb-2 shrink-0">
@@ -107,83 +124,114 @@
       >
     </div>
 
-    <!-- url input -->
-    <div class="flex gap-2 px-5 py-3 border-b border-[#eeeae0] shrink-0">
+    <!-- url prompt -->
+    <div
+      class="flex items-center gap-2 px-5 py-3 border-b border-[#eeeae0] shrink-0"
+    >
+      <span class="text-[#6a6a66] select-none">›</span>
       <input
         type="url"
         bind:value={url}
         onkeydown={(e) => {
           if (e.key === 'Enter') load();
         }}
-        placeholder="https://huggingface.co/datasets/<user>/<repo>/blob/main/<file>.jsonl"
-        class="flex-1 bg-[#f5f5f2] border border-[#e5e5e0] rounded-md px-3 py-2 text-[12px] font-mono focus:outline-none focus:border-[#ffd21e] focus:bg-white"
+        placeholder="paste .jsonl dataset URL and press Enter"
+        class="flex-1 bg-transparent border-none outline-none text-[13px] text-[#222220] placeholder:text-[#b0b0aa]"
       />
       <button
         type="button"
         onclick={load}
         disabled={loading}
-        class="px-4 py-2 bg-[#ffd21e] rounded-md text-[13px] font-semibold hover:bg-[#ffbb1a] disabled:opacity-50 cursor-pointer"
+        class="px-3 py-1 bg-[#ffd21e] rounded text-[12px] font-semibold hover:bg-[#ffbb1a] disabled:opacity-50 cursor-pointer"
       >
-        {loading ? 'Loading…' : 'Load'}
+        load
       </button>
     </div>
 
-    <!-- messages -->
-    <div
-      bind:this={listEl}
-      class="flex-1 overflow-y-auto px-5 py-4 space-y-3"
-    >
-      {#if error}
-        <div
-          class="text-[#991b1b] bg-[#fef2f2] border border-[#fecaca] rounded-md p-3 text-[13px]"
-        >
-          {error}
+    <!-- messages / log -->
+    <div bind:this={listEl} class="flex-1 overflow-y-auto px-5 py-3">
+      {#if loading}
+        <div class="flex items-baseline gap-2">
+          <span class="w-[1ch] text-center text-[#5f5f5c]"
+            >{spinnerFrames[spinnerFrame]}</span
+          >
+          <span class="text-[#333331]">Fetching traces...</span>
         </div>
-      {:else if messages.length === 0 && !loading}
-        <div class="text-[#888] text-[13px] leading-relaxed">
-          Paste a Hugging Face dataset <code
-            class="bg-[#f5f5f2] px-1 rounded">.jsonl</code
-          > URL above and press
-          <kbd
-            class="px-1.5 py-0.5 bg-[#f0f0ed] rounded border border-[#ddd] text-[11px]"
-            >Load</kbd
-          >.<br />
-          Then use
-          <kbd
-            class="px-1.5 py-0.5 bg-[#f0f0ed] rounded border border-[#ddd] text-[11px]"
-            >↑</kbd
+      {:else if error}
+        <div class="flex items-baseline gap-2">
+          <span class="w-[1ch] text-center text-[#991b1b]">✗</span>
+          <span class="text-[#991b1b]">{error}</span>
+        </div>
+      {:else if messages.length > 0}
+        <div class="flex items-baseline gap-2 mb-3">
+          <span
+            class="w-[1ch] text-center text-[#0f7a3a] animate-ready-pulse"
+            >●</span
           >
-          <kbd
-            class="px-1.5 py-0.5 bg-[#f0f0ed] rounded border border-[#ddd] text-[11px]"
-            >↓</kbd
-          > to jump between sections,
-          <kbd
-            class="px-1.5 py-0.5 bg-[#f0f0ed] rounded border border-[#ddd] text-[11px]"
-            >Home</kbd
-          >/
-          <kbd
-            class="px-1.5 py-0.5 bg-[#f0f0ed] rounded border border-[#ddd] text-[11px]"
-            >End</kbd
-          > for start/end.
+          <span class="text-[#0f5a2a] font-semibold"
+            >Loaded {loadedCount} messages</span
+          >
+        </div>
+      {:else}
+        <div class="text-[#888] text-[13px] leading-relaxed">
+          <div class="flex items-baseline gap-2 mb-1">
+            <span class="w-[1ch] text-center text-[#6b6b68]">○</span>
+            <span>waiting for input</span>
+          </div>
+          <div class="pl-[2.2ch] text-[#888]">
+            paste a <code class="text-[#8b5cf6]">.jsonl</code> dataset URL above,
+            press
+            <kbd
+              class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0] text-[11px]"
+              >Enter</kbd
+            > to load.
+          </div>
+          <div class="pl-[2.2ch] text-[#888] mt-1">
+            then <kbd
+              class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0] text-[11px]"
+              >↑</kbd
+            >
+            <kbd
+              class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0] text-[11px]"
+              >↓</kbd
+            >
+            to navigate sections,
+            <kbd
+              class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0] text-[11px]"
+              >Home</kbd
+            >/
+            <kbd
+              class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0] text-[11px]"
+              >End</kbd
+            > for start/end.
+          </div>
         </div>
       {/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="border rounded-lg px-4 py-3 transition-colors cursor-default {i ===
-          focusedIdx
-            ? 'border-[#ffd21e] bg-[#fffbe6] shadow-[0_0_0_2px_rgba(255,210,30,0.25)]'
-            : 'border-[#eaeae5] bg-white hover:border-[#d9d9d2]'}"
+          class="py-1 cursor-default rounded transition-colors {focused
+            ? 'bg-[#fffbe6]'
+            : 'hover:bg-[#faf9f5]'}"
         >
-          <div class="flex items-center gap-2 mb-2 flex-wrap">
+          <!-- 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-[10px] uppercase tracking-wider font-semibold px-2 py-0.5 rounded {roleBadge[
+              class="text-[11px] uppercase tracking-wider font-semibold {roleColor[
                 msg.role
-              ] || roleBadge.unknown}"
+              ] || roleColor.unknown}"
             >
               {msg.role}
             </span>
@@ -192,73 +240,80 @@
                 >{msg.title}</span
               >
             {/if}
-            {#if msg.model}
-              <span class="text-[11px] text-[#888] font-mono ml-auto"
-                >{msg.model}</span
-              >
-            {/if}
-            <span class="text-[11px] text-[#aaa] font-mono {msg.model ? '' : 'ml-auto'}"
-              >#{i}</span
-            >
+            <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>
 
-          {#each msg.blocks as block}
-            {#if block.kind === 'text'}
-              <pre
-                class="whitespace-pre-wrap break-words text-[13px] text-[#232323] leading-relaxed font-sans">{block.text}</pre>
-            {:else if block.kind === 'thinking'}
-              <details class="my-2 border-l-2 border-[#c084fc] pl-3">
-                <summary
-                  class="cursor-pointer text-[11px] text-[#6b21a8] font-semibold select-none"
-                  >thinking</summary
-                >
-                <pre
-                  class="whitespace-pre-wrap break-words text-[12px] text-[#555] mt-1 leading-relaxed font-sans">{block.text}</pre>
-              </details>
-            {:else if block.kind === 'tool_call'}
-              <div
-                class="my-2 bg-[#faf5ff] border border-[#e9d5ff] rounded px-3 py-2"
+          <!-- 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
               >
-                <div class="text-[11px] font-semibold text-[#6b21a8] mb-1">
-                  tool call · <span class="font-mono">{block.name}</span>
-                </div>
-                <pre
-                  class="text-[12px] text-[#3a3a38] whitespace-pre-wrap break-words font-mono max-h-[240px] overflow-auto">{formatJson(
-                    block.input
-                  )}</pre>
+              <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>
+                {/if}
               </div>
-            {:else if block.kind === 'tool_result'}
-              <div
-                class="my-2 border rounded px-3 py-2 {block.isError
-                  ? 'bg-[#fef2f2] border-[#fecaca]'
-                  : 'bg-[#f5f5f0] border-[#e5e5e0]'}"
-              >
-                <div
-                  class="text-[11px] font-semibold mb-1 {block.isError
-                    ? 'text-[#991b1b]'
-                    : 'text-[#6a6a66]'}"
-                >
-                  tool result{block.isError ? ' · error' : ''}
-                </div>
-                <pre
-                  class="text-[12px] text-[#3a3a38] whitespace-pre-wrap break-words font-mono max-h-[280px] overflow-auto">{block.text}</pre>
-              </div>
-            {:else if block.kind === 'image'}
-              <div class="text-[12px] text-[#6a6a66] italic my-1">
-                [image attachment]
-              </div>
-            {:else if block.kind === 'raw'}
-              <details class="my-1">
-                <summary
-                  class="cursor-pointer text-[11px] text-[#888] select-none"
-                  >raw</summary
-                >
-                <pre
-                  class="text-[11px] text-[#555] whitespace-pre-wrap break-words font-mono mt-1 max-h-[200px] overflow-auto">{formatJson(
-                    block.json
-                  )}</pre>
-              </details>
-            {/if}
+            </div>
           {/each}
         </div>
       {/each}
@@ -269,7 +324,7 @@
       class="flex items-center gap-4 px-5 py-2 border-t border-[#eeeae0] text-[11px] text-[#888] shrink-0"
     >
       {#if messages.length > 0}
-        <span class="font-mono">{focusedIdx + 1} / {messages.length}</span>
+        <span>{focusedIdx + 1} / {messages.length}</span>
       {:else}
         <span>ready</span>
       {/if}