Update source

package-lock.json

@@ -1,12 +1,16 @@
 {
-  "name": "traces-viewer",
+  "name": "traces-replay",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "traces-viewer",
+      "name": "traces-replay",
       "version": "0.1.0",
+      "dependencies": {
+        "dompurify": "^3.4.0",
+        "marked": "^18.0.2"
+      },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@tailwindcss/vite": "^4.2.2",
@@ -1190,7 +1194,7 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/acorn": {
@@ -1281,6 +1285,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dompurify": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.0.tgz",
+      "integrity": "sha512-nolgK9JcaUXMSmW+j1yaSvaEaoXYHwWyGJlkoCTghc97KgGDDSnpoU/PlEnw63Ah+TGKFOyY+X5LnxaWbCSfXg==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.20.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz",
@@ -1710,6 +1723,18 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/marked": {
+      "version": "18.0.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.2.tgz",
+      "integrity": "sha512-NsmlUYBS/Zg57rgDWMYdnre6OTj4e+qq/JS2ot3KrYLSoHLw+sDu0Nm1ZGpRgYAq6c+b1ekaY5NzVchMCQnzcg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

package.json

@@ -14,5 +14,9 @@
     "svelte": "^5.16.1",
     "tailwindcss": "^4.2.2",
     "vite": "^6.0.7"
+  },
+  "dependencies": {
+    "dompurify": "^3.4.0",
+    "marked": "^18.0.2"
   }
 }

src/app.css

@@ -52,6 +52,108 @@
     0 0 80px rgba(255, 210, 30, 0.45);
 }
 
+@utility prose-trace {
+  word-break: break-word;
+
+  p {
+    margin: 0.4em 0;
+  }
+  p:first-child {
+    margin-top: 0;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+    margin: 0.8em 0 0.3em;
+    line-height: 1.3;
+  }
+  h1 { font-size: 1.25em; }
+  h2 { font-size: 1.15em; }
+  h3 { font-size: 1.05em; }
+  h4, h5, h6 { font-size: 1em; }
+  ul, ol {
+    margin: 0.3em 0;
+    padding-left: 1.4em;
+  }
+  ul { list-style: disc; }
+  ol { list-style: decimal; }
+  li { margin: 0.15em 0; }
+  li > p { margin: 0.15em 0; }
+  code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+    font-size: 0.92em;
+    background: #f5f5f2;
+    border: 1px solid #eeeae0;
+    border-radius: 3px;
+    padding: 0 0.3em;
+  }
+  pre {
+    background: #f5f5f2;
+    border: 1px solid #eeeae0;
+    border-radius: 4px;
+    padding: 0.6em 0.8em;
+    overflow-x: auto;
+    margin: 0.5em 0;
+    line-height: 1.5;
+  }
+  pre code {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    font-size: 0.92em;
+  }
+  blockquote {
+    border-left: 3px solid #e5e5e0;
+    padding-left: 0.8em;
+    color: #5f5f5c;
+    margin: 0.5em 0;
+  }
+  a {
+    color: #8b5cf6;
+    text-decoration: underline;
+  }
+  a:hover {
+    text-decoration: none;
+  }
+  hr {
+    border: 0;
+    border-top: 1px solid #eeeae0;
+    margin: 0.8em 0;
+  }
+  table {
+    border-collapse: collapse;
+    margin: 0.5em 0;
+    font-size: 0.95em;
+  }
+  th, td {
+    border: 1px solid #eeeae0;
+    padding: 0.3em 0.6em;
+    text-align: left;
+  }
+  th {
+    background: #faf9f5;
+    font-weight: 600;
+  }
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+  }
+}
+
+@utility prose-thinking {
+  code, pre {
+    background: #faf5ff;
+    border-color: #e9d5ff;
+  }
+  blockquote {
+    border-left-color: #e9d5ff;
+    color: #7e22ce;
+  }
+}
+
 @utility page-bg {
   background:
     radial-gradient(at 20% 20%, #fff4b8 0%, transparent 55%),

src/lib/TraceViewer.svelte

@@ -1,6 +1,7 @@
 <script>
   import { tick, onMount, onDestroy } from 'svelte';
   import { parseJsonl, toRawUrl } from './parse.js';
+  import { renderMarkdown } from './markdown.js';
 
   const spinnerFrames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
   let spinnerFrame = $state(0);
@@ -449,22 +450,38 @@
                   >
                   <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>
+                      {#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]"
+                              aria-hidden="true">▎</span
+                            >{/if}</pre>
+                      {:else}
+                        <div
+                          class="prose-trace text-[13px] text-[#232323] leading-[1.65]"
+                        >
+                          {@html renderMarkdown(block.text)}
+                        </div>
+                      {/if}
                     {: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>
+                        {#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]"
+                                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]"
+                          >
+                            {@html renderMarkdown(block.text)}
+                          </div>
+                        {/if}
                       </details>
                     {:else if block.kind === 'tool_call'}
                       <div class="py-0.5">

src/lib/markdown.js

@@ -0,0 +1,13 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+});
+
+export function renderMarkdown(text) {
+  if (!text) return '';
+  const html = marked.parse(String(text));
+  return DOMPurify.sanitize(html, { ADD_ATTR: ['target', 'rel'] });
+}