Dark-mode terminal palette

src/app.css

@@ -84,14 +84,14 @@
   code {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
     font-size: 0.92em;
-    background: #f5f5f2;
-    border: 1px solid #eeeae0;
+    background: #1a1a1a;
+    border: 1px solid #2a2a2a;
     border-radius: 3px;
     padding: 0 0.3em;
   }
   pre {
-    background: #f5f5f2;
-    border: 1px solid #eeeae0;
+    background: #1a1a1a;
+    border: 1px solid #2a2a2a;
     border-radius: 4px;
     padding: 0.6em 0.8em;
     overflow-x: auto;
@@ -105,13 +105,13 @@
     font-size: 0.92em;
   }
   blockquote {
-    border-left: 3px solid #e5e5e0;
+    border-left: 3px solid #2a2a2a;
     padding-left: 0.8em;
-    color: #5f5f5c;
+    color: #999999;
     margin: 0.5em 0;
   }
   a {
-    color: #8b5cf6;
+    color: #a78bfa;
     text-decoration: underline;
   }
   a:hover {
@@ -119,7 +119,7 @@
   }
   hr {
     border: 0;
-    border-top: 1px solid #eeeae0;
+    border-top: 1px solid #2a2a2a;
     margin: 0.8em 0;
   }
   table {
@@ -128,12 +128,12 @@
     font-size: 0.95em;
   }
   th, td {
-    border: 1px solid #eeeae0;
+    border: 1px solid #2a2a2a;
     padding: 0.3em 0.6em;
     text-align: left;
   }
   th {
-    background: #faf9f5;
+    background: #1e1e1e;
     font-weight: 600;
   }
   img {
@@ -155,10 +155,10 @@
     padding: 2px 8px;
     font-size: 11px;
     line-height: 1.4;
-    background: #fff;
-    border: 1px solid #e5e5e0;
+    background: #1a1a1a;
+    border: 1px solid #2a2a2a;
     border-radius: 4px;
-    color: #6a6a66;
+    color: #999999;
     cursor: pointer;
     opacity: 0;
     transition:
@@ -174,24 +174,24 @@
     opacity: 1;
   }
   .copy-btn:hover {
-    background: #faf9f5;
-    color: #222220;
+    background: #1e1e1e;
+    color: #e8e8e5;
   }
   .copy-btn.copied {
-    color: #0f5a2a;
-    border-color: #bbf7d0;
-    background: #f0fdf4;
+    color: #4ade80;
+    border-color: #166534;
+    background: #0f2a1a;
   }
 }
 
 @utility prose-thinking {
   code, pre {
-    background: #faf5ff;
-    border-color: #e9d5ff;
+    background: #1a0d24;
+    border-color: #4c1d95;
   }
   blockquote {
-    border-left-color: #e9d5ff;
-    color: #7e22ce;
+    border-left-color: #4c1d95;
+    color: #c084fc;
   }
 }
 
@@ -204,7 +204,7 @@
 
 @utility thin-scrollbar {
   scrollbar-width: thin;
-  scrollbar-color: #d0d0ca transparent;
+  scrollbar-color: #3a3a3a transparent;
 
   &::-webkit-scrollbar {
     width: 6px;
@@ -214,10 +214,10 @@
     background: transparent;
   }
   &::-webkit-scrollbar-thumb {
-    background-color: #d0d0ca;
+    background-color: #3a3a3a;
     border-radius: 3px;
   }
   &::-webkit-scrollbar-thumb:hover {
-    background-color: #a8a8a0;
+    background-color: #555555;
   }
 }

src/lib/TraceViewer.svelte

@@ -298,12 +298,12 @@
   });
 
   const roleColor = {
-    user: 'text-[#1e40af]',
-    assistant: 'text-[#0f5a2a]',
-    tool: 'text-[#6b21a8]',
-    system: 'text-[#92400e]',
-    meta: 'text-[#6a6a66]',
-    unknown: 'text-[#6a6a66]',
+    user: 'text-[#60a5fa]',
+    assistant: 'text-[#4ade80]',
+    tool: 'text-[#c084fc]',
+    system: 'text-[#fbbf24]',
+    meta: 'text-[#999999]',
+    unknown: 'text-[#999999]',
   };
 </script>
 
@@ -313,18 +313,18 @@
   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 font-mono text-[14px] leading-[1.7] text-[#232323]"
+    class="w-full h-[85vh] bg-[#0d0d0d] rounded-[17px] overflow-hidden flex flex-col font-mono text-[14px] leading-[1.7] text-[#e8e8e5]"
   >
     <!-- chrome -->
     <div class="flex items-center gap-2 pt-4 px-[18px] pb-2 shrink-0">
-      <span class="w-3 h-3 rounded-full bg-[#d7d7d3]"></span>
-      <span class="w-3 h-3 rounded-full bg-[#d7d7d3]"></span>
-      <span class="w-3 h-3 rounded-full bg-[#d7d7d3]"></span>
+      <span class="w-3 h-3 rounded-full bg-[#3a3a3a]"></span>
+      <span class="w-3 h-3 rounded-full bg-[#3a3a3a]"></span>
+      <span class="w-3 h-3 rounded-full bg-[#3a3a3a]"></span>
       <a
         href="https://huggingface.co/datasets?format=format%3Aagent-traces"
         target="_blank"
         rel="noopener noreferrer"
-        class="ml-auto text-[12px] text-[#6a6a66] hover:text-[#222220] hover:underline select-none transition-colors"
+        class="ml-auto text-[12px] text-[#999999] hover:text-[#e8e8e5] hover:underline select-none transition-colors"
         title="Browse agent-trace datasets on Hugging Face"
       >
         🤗 traces
@@ -333,9 +333,9 @@
 
     <!-- url prompt -->
     <div
-      class="flex items-center gap-2 px-5 py-3 border-b border-[#eeeae0] shrink-0"
+      class="flex items-center gap-2 px-5 py-3 border-b border-[#2a2a2a] shrink-0"
     >
-      <span class="text-[#6a6a66] select-none">›</span>
+      <span class="text-[#999999] select-none">›</span>
       <input
         type="url"
         bind:value={url}
@@ -343,7 +343,7 @@
           if (e.key === 'Enter') load();
         }}
         placeholder="paste .jsonl dataset URL and press Enter"
-        class="flex-1 bg-transparent border-none outline-none text-[13px] text-[#222220] placeholder:text-[#b0b0aa]"
+        class="flex-1 bg-transparent border-none outline-none text-[13px] text-[#e8e8e5] placeholder:text-[#555555]"
       />
       <button
         type="button"
@@ -358,11 +358,11 @@
         onclick={shareTrace}
         disabled={messages.length === 0 || loading}
         title="Copy a shareable link to this replay"
-        class="inline-flex items-center gap-1.5 px-3 py-1 bg-white border border-[#ffd21e] rounded text-[12px] font-semibold text-[#8a6b00] hover:bg-[#fffbe6] disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-colors shrink-0"
+        class="inline-flex items-center gap-1.5 px-3 py-1 bg-[#1a1a1a] border border-[#ffd21e] rounded text-[12px] font-semibold text-[#ffd21e] hover:bg-[#3a2e08] disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-colors shrink-0"
       >
         {#if copied}
-          <span class="text-[#0f7a3a]">✓</span>
-          <span class="text-[#0f5a2a]">copied</span>
+          <span class="text-[#4ade80]">✓</span>
+          <span class="text-[#4ade80]">copied</span>
         {:else}
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -385,7 +385,7 @@
 
     <!-- examples -->
     <div
-      class="flex flex-wrap items-center gap-2 px-5 py-2 border-b border-[#eeeae0] shrink-0"
+      class="flex flex-wrap items-center gap-2 px-5 py-2 border-b border-[#2a2a2a] shrink-0"
     >
       <span class="text-[11px] text-[#888] select-none">examples:</span>
       {#each examples as ex}
@@ -393,7 +393,7 @@
           type="button"
           onclick={() => pickExample(ex)}
           disabled={loading || playing}
-          class="text-[11px] px-2 py-1 bg-[#fffbe6] border border-[#ffedb0] rounded hover:bg-[#ffd21e] hover:border-[#ffbb1a] disabled:opacity-50 disabled:hover:bg-[#fffbe6] disabled:hover:border-[#ffedb0] transition-colors cursor-pointer"
+          class="text-[11px] px-2 py-1 bg-[#3a2e08] border border-[#665a00] rounded hover:bg-[#ffd21e] hover:border-[#ffbb1a] disabled:opacity-50 disabled:hover:bg-[#3a2e08] disabled:hover:border-[#665a00] transition-colors cursor-pointer"
         >
           {ex.label}
         </button>
@@ -411,29 +411,29 @@
     >
       {#if loading}
         <div class="flex items-baseline gap-2">
-          <span class="w-[1ch] text-center text-[#5f5f5c]"
+          <span class="w-[1ch] text-center text-[#999999]"
             >{spinnerFrames[spinnerFrame]}</span
           >
-          <span class="text-[#333331]">Fetching traces...</span>
+          <span class="text-[#d4d4d4]">Fetching traces...</span>
         </div>
       {: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>
+          <span class="w-[1ch] text-center text-[#f87171]">✗</span>
+          <span class="text-[#f87171]">{error}</span>
         </div>
       {:else if messages.length > 0}
         <div class="flex items-baseline gap-2 mb-3 animate-fade-in">
           <span
             class="w-[1ch] text-center {playing
-              ? 'text-[#5f5f5c]'
-              : 'text-[#0f7a3a] animate-ready-pulse'}"
+              ? 'text-[#999999]'
+              : 'text-[#4ade80] animate-ready-pulse'}"
           >
             {playing ? spinnerFrames[spinnerFrame] : '●'}
           </span>
           <span
             class="{playing
-              ? 'text-[#333331]'
-              : 'text-[#0f5a2a]'} font-semibold"
+              ? 'text-[#d4d4d4]'
+              : 'text-[#4ade80]'} font-semibold"
           >
             {playing
               ? `Streaming ${focusedIdx + 1} / ${loadedCount}...`
@@ -443,33 +443,33 @@
       {: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 class="w-[1ch] text-center text-[#999999]">○</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,
+            paste a <code class="text-[#a78bfa]">.jsonl</code> dataset URL above,
             press
             <kbd
-              class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0] text-[11px]"
+              class="px-1 py-px bg-[#1a1a1a] rounded border border-[#2a2a2a] 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]"
+              class="px-1 py-px bg-[#1a1a1a] rounded border border-[#2a2a2a] text-[11px]"
               >↑</kbd
             >
             <kbd
-              class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0] text-[11px]"
+              class="px-1 py-px bg-[#1a1a1a] rounded border border-[#2a2a2a] text-[11px]"
               >↓</kbd
             >
             to navigate sections,
             <kbd
-              class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0] text-[11px]"
+              class="px-1 py-px bg-[#1a1a1a] rounded border border-[#2a2a2a] text-[11px]"
               >Home</kbd
             >/
             <kbd
-              class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0] text-[11px]"
+              class="px-1 py-px bg-[#1a1a1a] rounded border border-[#2a2a2a] text-[11px]"
               >End</kbd
             > for start/end.
           </div>
@@ -478,7 +478,7 @@
               href="https://huggingface.co/changelog/agent-trace-viewer"
               target="_blank"
               rel="noopener noreferrer"
-              class="text-[#8b5cf6] hover:underline"
+              class="text-[#a78bfa] hover:underline"
               >→ learn more about the agent trace viewer on Hugging Face</a
             >
           </div>
@@ -494,15 +494,15 @@
             data-idx={i}
             onclick={() => (focusedIdx = i)}
             class="py-1 cursor-default rounded transition-colors animate-fade-in {focused
-              ? 'bg-[#fffbe6]'
-              : 'hover:bg-[#faf9f5]'}"
+              ? 'bg-[#3a2e08]'
+              : 'hover:bg-[#1e1e1e]'}"
           >
             <!-- header -->
             <div class="flex items-baseline gap-2 px-2">
               <span
                 class="w-[1ch] text-center {focused
-                  ? 'text-[#0f7a3a] animate-ready-pulse'
-                  : 'text-[#6b6b68]'}"
+                  ? 'text-[#4ade80] animate-ready-pulse'
+                  : 'text-[#999999]'}"
               >
                 {focused ? '●' : '○'}
               </span>
@@ -514,7 +514,7 @@
                 {msg.role}
               </span>
               {#if msg.title}
-                <span class="text-[12px] text-[#6a6a66] truncate"
+                <span class="text-[12px] text-[#999999] truncate"
                   >{msg.title}</span
                 >
               {/if}
@@ -522,7 +522,7 @@
                 {#if msg.model}
                   <span class="text-[11px] text-[#888]">{msg.model}</span>
                 {/if}
-                <span class="text-[11px] text-[#aaa]">#{i}</span>
+                <span class="text-[11px] text-[#6a6a6a]">#{i}</span>
               </span>
             </div>
 
@@ -531,20 +531,20 @@
               {#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]"
+                  <span class="w-[1ch] text-[#555555] shrink-0 mt-[2px]"
                     >{isLast ? '└' : '├'}</span
                   >
                   <div class="flex-1 min-w-0">
                     {#if block.kind === 'text'}
                       {#if block._typing || block._typedText !== block.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]"
+                          class="whitespace-pre-wrap break-words text-[13px] text-[#e8e8e5] leading-[1.65] font-mono">{block._typedText}{#if block._typing}<span
+                              class="animate-blink text-[#a78bfa]"
                               aria-hidden="true">▎</span
                             >{/if}</pre>
                       {:else}
                         <div
-                          class="prose-trace text-[13px] text-[#232323] leading-[1.65]"
+                          class="prose-trace text-[13px] text-[#e8e8e5] leading-[1.65]"
                         >
                           {@html renderMarkdown(block.text)}
                         </div>
@@ -552,18 +552,18 @@
                     {: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"
+                          class="cursor-pointer text-[11px] text-[#a78bfa] font-semibold select-none hover:underline"
                           >thinking</summary
                         >
                         {#if block._typing || block._typedText !== block.text}
                           <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]"
+                            class="whitespace-pre-wrap break-words text-[12px] text-[#c084fc] mt-1 leading-[1.65] pl-[1ch] border-l border-[#4c1d95]">{block._typedText}{#if block._typing}<span
+                                class="animate-blink text-[#a78bfa]"
                                 aria-hidden="true">▎</span
                               >{/if}</pre>
                         {:else}
                           <div
-                            class="prose-trace prose-thinking text-[12px] text-[#6b21a8] mt-1 leading-[1.65] pl-[1ch] border-l border-[#e9d5ff]"
+                            class="prose-trace prose-thinking text-[12px] text-[#c084fc] mt-1 leading-[1.65] pl-[1ch] border-l border-[#4c1d95]"
                           >
                             {@html renderMarkdown(block.text)}
                           </div>
@@ -571,12 +571,12 @@
                       </details>
                     {:else if block.kind === 'tool_call'}
                       <div class="py-0.5">
-                        <div class="text-[12px] text-[#6b21a8]">
-                          <span class="text-[#aaa]">tool</span>
+                        <div class="text-[12px] text-[#c084fc]">
+                          <span class="text-[#6a6a6a]">tool</span>
                           <span class="font-semibold">{block.name}</span>
                         </div>
                         <pre
-                          class="text-[12px] text-[#3a3a38] whitespace-pre-wrap break-words mt-0.5 pl-[1ch] border-l border-[#e9d5ff]">{formatJson(
+                          class="text-[12px] text-[#d4d4d4] whitespace-pre-wrap break-words mt-0.5 pl-[1ch] border-l border-[#4c1d95]">{formatJson(
                             block.input
                           )}</pre>
                       </div>
@@ -584,21 +584,21 @@
                       <div class="py-0.5">
                         <div
                           class="text-[12px] {block.isError
-                            ? 'text-[#991b1b]'
-                            : 'text-[#6a6a66]'}"
+                            ? 'text-[#f87171]'
+                            : 'text-[#999999]'}"
                         >
-                          <span class="text-[#aaa]">result</span>
+                          <span class="text-[#6a6a6a]">result</span>
                           {#if block.isError}<span class="font-semibold"
                               >· error</span
                             >{/if}
                         </div>
                         <pre
-                          class="text-[12px] text-[#3a3a38] whitespace-pre-wrap break-words mt-0.5 pl-[1ch] border-l {block.isError
-                            ? 'border-[#fecaca]'
-                            : 'border-[#e5e5e0]'}">{block.text}</pre>
+                          class="text-[12px] text-[#d4d4d4] whitespace-pre-wrap break-words mt-0.5 pl-[1ch] border-l {block.isError
+                            ? 'border-[#991b1b]'
+                            : 'border-[#2a2a2a]'}">{block.text}</pre>
                       </div>
                     {:else if block.kind === 'image'}
-                      <div class="text-[12px] text-[#6a6a66] italic">
+                      <div class="text-[12px] text-[#999999] italic">
                         [image attachment]
                       </div>
                     {:else if block.kind === 'raw'}
@@ -608,7 +608,7 @@
                           >raw</summary
                         >
                         <pre
-                          class="text-[11px] text-[#555] whitespace-pre-wrap break-words mt-1 pl-[1ch] border-l border-[#e5e5e0]">{formatJson(
+                          class="text-[11px] text-[#a0a0a0] whitespace-pre-wrap break-words mt-1 pl-[1ch] border-l border-[#2a2a2a]">{formatJson(
                             block.json
                           )}</pre>
                       </details>
@@ -624,7 +624,7 @@
 
     <!-- footer -->
     <div
-      class="flex items-center gap-4 px-5 py-2 border-t border-[#eeeae0] text-[11px] text-[#888] shrink-0"
+      class="flex items-center gap-4 px-5 py-2 border-t border-[#2a2a2a] text-[11px] text-[#888] shrink-0"
     >
       {#if messages.length > 0}
         <span>{focusedIdx + 1} / {messages.length}</span>
@@ -634,23 +634,23 @@
       {#if playing}
         <button
           onclick={skip}
-          class="px-2 py-0.5 bg-[#f5f5f2] rounded border border-[#e5e5e0] text-[11px] hover:bg-[#eeeae0] cursor-pointer"
+          class="px-2 py-0.5 bg-[#1a1a1a] rounded border border-[#2a2a2a] text-[11px] hover:bg-[#2a2a2a] cursor-pointer"
           >skip</button
         >
       {:else}
         <span class="flex items-center gap-1">
-          <kbd class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0]"
+          <kbd class="px-1 py-px bg-[#1a1a1a] rounded border border-[#2a2a2a]"
             >↑</kbd
           >
-          <kbd class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0]"
+          <kbd class="px-1 py-px bg-[#1a1a1a] rounded border border-[#2a2a2a]"
             >↓</kbd
           > navigate
         </span>
         <span class="flex items-center gap-1">
-          <kbd class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0]"
+          <kbd class="px-1 py-px bg-[#1a1a1a] rounded border border-[#2a2a2a]"
             >Home</kbd
           >
-          <kbd class="px-1 py-px bg-[#f5f5f2] rounded border border-[#e5e5e0]"
+          <kbd class="px-1 py-px bg-[#1a1a1a] rounded border border-[#2a2a2a]"
             >End</kbd
           > jump
         </span>
@@ -659,7 +659,7 @@
         href="https://huggingface.co/changelog/agent-trace-viewer"
         target="_blank"
         rel="noopener noreferrer"
-        class="ml-auto text-[#8b5cf6] hover:underline"
+        class="ml-auto text-[#a78bfa] hover:underline"
         title="HF changelog · agent trace viewer"
         >changelog →</a
       >