Spaces:

victor
/

session-viewer

Running

App Files Files Community

victor HF Staff commited on Mar 16

Commit

7c56675

verified ·

1 Parent(s): de0a4ee

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +140 -175

index.html CHANGED Viewed

@@ -10,91 +10,95 @@
     @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap');
     body { font-family: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif; }
     code, pre, .mono { font-family: 'Source Code Pro', monospace; }
-    .fade-in { animation: fadeIn 0.15s ease-out; }
-    @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
     pre { white-space: pre-wrap; word-break: break-word; }
     details summary { cursor: pointer; user-select: none; }
     details summary::-webkit-details-marker { display: none; }
-    .drop-zone.drag-over { border-color: #6366f1; background: rgba(99, 102, 241, 0.04); }
   </style>
 </head>
 <body class="bg-white text-gray-900 min-h-screen">
-  <!-- Header -->
-  <header class="sticky top-0 z-50 bg-white/80 backdrop-blur border-b border-gray-100 px-4 py-2.5">
-    <div class="max-w-4xl mx-auto flex items-center justify-between">
-      <div class="flex items-center gap-2.5">
-        <h1 class="text-sm font-semibold text-gray-900">Session Viewer</h1>
-        <span id="meta-badge" class="hidden text-[10px] px-1.5 py-0.5 rounded font-semibold"></span>
-        <span id="meta-info" class="hidden text-xs text-gray-400"></span>
-      </div>
-      <div class="flex items-center gap-2">
-        <input type="text" id="url-input" placeholder="Paste session URL…"
-          class="text-xs px-2.5 py-1.5 rounded-lg bg-white border border-gray-200 text-gray-700 placeholder-gray-400 w-56 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400 mono">
-        <label class="cursor-pointer text-xs px-3 py-1.5 rounded-lg bg-gray-900 hover:bg-gray-800 transition text-white font-medium">
           Load File
           <input type="file" accept=".jsonl,.json" class="hidden" id="file-input">
         </label>
       </div>
-    </div>
-  </header>
-  <!-- Drop zone / Empty state -->
-  <div id="empty-state" class="max-w-4xl mx-auto mt-24 px-4">
-    <div id="drop-zone" class="drop-zone border-2 border-dashed border-gray-200 rounded-xl p-12 text-center transition-colors">
-      <div class="text-gray-500 text-base mb-1.5">Drop a session file or paste a URL above</div>
-      <div class="text-gray-400 text-sm mb-8">Supports Claude Code, Pi, Codex, and OpenCode JSONL formats</div>
-      <div class="text-gray-400 text-[10px] uppercase tracking-widest mb-3 font-semibold">Sample Sessions</div>
-      <div class="flex flex-wrap justify-center gap-2">
         <button onclick="loadUrl('https://huggingface.co/datasets/victor/claude-sample-session/resolve/main/claude-code-session-2026-03-16.jsonl')"
-          class="text-xs px-3 py-1.5 rounded-lg bg-orange-50 border border-orange-200 text-orange-700 hover:bg-orange-100 transition font-medium">Claude Code</button>
         <button onclick="loadUrl('https://huggingface.co/datasets/victor/pi-sample-session/resolve/main/pi-session-2026-03-16.jsonl')"
-          class="text-xs px-3 py-1.5 rounded-lg bg-emerald-50 border border-emerald-200 text-emerald-700 hover:bg-emerald-100 transition font-medium">Pi</button>
         <button onclick="loadUrl('https://huggingface.co/datasets/victor/codex-sample-session/resolve/main/codex-session-hello-2026-03-16.jsonl')"
-          class="text-xs px-3 py-1.5 rounded-lg bg-blue-50 border border-blue-200 text-blue-700 hover:bg-blue-100 transition font-medium">Codex</button>
         <button onclick="loadUrl('https://huggingface.co/datasets/victor/opencode-sample-session/resolve/main/opencode-session-2026-03-16.jsonl')"
-          class="text-xs px-3 py-1.5 rounded-lg bg-purple-50 border border-purple-200 text-purple-700 hover:bg-purple-100 transition font-medium">OpenCode</button>
       </div>
     </div>
   </div>
-  <!-- Session view -->
-  <main id="session-view" class="hidden max-w-4xl mx-auto px-4 py-5 pb-20">
-    <div id="session-header" class="mb-5 p-3.5 rounded-lg bg-gray-50 border border-gray-200">
-      <div class="flex items-center gap-2 mb-1.5">
-        <span id="sh-source" class="text-[10px] px-1.5 py-0.5 rounded font-semibold"></span>
-        <span id="sh-model" class="text-[11px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-500 mono"></span>
       </div>
-      <div id="sh-title" class="text-sm text-gray-500"></div>
-      <div id="sh-cwd" class="text-xs text-gray-400 mono mt-0.5"></div>
-    </div>
-    <div id="messages-container"></div>
-  </main>
-  <!-- Stats footer -->
-  <footer id="stats-footer" class="hidden fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur border-t border-gray-100 px-4 py-2">
-    <div class="max-w-4xl mx-auto flex items-center justify-between text-[11px] text-gray-400 mono">
-      <span id="stat-messages"></span>
-      <span id="stat-tokens"></span>
     </div>
-  </footer>
   <script>
     const fileInput = document.getElementById('file-input');
     const emptyState = document.getElementById('empty-state');
-    const sessionView = document.getElementById('session-view');
-    const dropZone = document.getElementById('drop-zone');
     const messagesContainer = document.getElementById('messages-container');
-    const statsFooter = document.getElementById('stats-footer');
     const SOURCE_COLORS = {
-      'claude-code': { bg: 'bg-orange-50', text: 'text-orange-700', border: 'border-orange-200', label: 'Claude Code' },
-      'pi':          { bg: 'bg-emerald-50', text: 'text-emerald-700', border: 'border-emerald-200', label: 'Pi' },
-      'codex':       { bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200', label: 'Codex' },
-      'opencode':    { bg: 'bg-purple-50', text: 'text-purple-700', border: 'border-purple-200', label: 'OpenCode' },
     };
-    // URL input
     const urlInput = document.getElementById('url-input');
     urlInput.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' && urlInput.value.trim()) loadUrl(urlInput.value.trim());
     });
@@ -105,84 +109,60 @@
         url = `https://huggingface.co/datasets/${hfMatch[1]}/resolve/main/${hfMatch[2]}`;
       } else if (url.includes('huggingface.co/datasets/') && !url.includes('/resolve/')) {
         const parts = url.match(/huggingface\.co\/datasets\/([^/]+\/[^/]+)\/?$/);
-        if (parts) {
-          alert('Paste the URL of a specific .jsonl file, not the dataset root.');
-          return;
-        }
       }
-      urlInput.disabled = true;
-      urlInput.value = 'Loading\u2026';
       try {
         const res = await fetch(url);
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
         const text = await res.text();
-        const session = parseSession(text);
-        renderSession(session);
-      } catch (err) {
-        alert(`Load error: ${err.message}`);
-      } finally {
-        urlInput.disabled = false;
-        urlInput.value = '';
-      }
     }
     const params = new URLSearchParams(location.search);
     if (params.get('url')) loadUrl(params.get('url'));
-    fileInput.addEventListener('change', (e) => {
-      if (e.target.files[0]) loadFile(e.target.files[0]);
-    });
     dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); });
     dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
     dropZone.addEventListener('drop', (e) => {
-      e.preventDefault();
-      dropZone.classList.remove('drag-over');
       if (e.dataTransfer.files[0]) loadFile(e.dataTransfer.files[0]);
     });
     function loadFile(file) {
       const reader = new FileReader();
       reader.onload = (e) => {
-        try {
-          const session = parseSession(e.target.result);
-          renderSession(session);
-        } catch (err) {
-          alert(`Parse error: ${err.message}`);
-        }
       };
       reader.readAsText(file);
     }
     function renderSession(session) {
       emptyState.classList.add('hidden');
-      sessionView.classList.remove('hidden');
-      statsFooter.classList.remove('hidden');
       const sc = SOURCE_COLORS[session.source] || SOURCE_COLORS['claude-code'];
       const srcEl = document.getElementById('sh-source');
       srcEl.textContent = sc.label;
       srcEl.className = `text-[10px] px-1.5 py-0.5 rounded font-semibold ${sc.bg} ${sc.text}`;
-      document.getElementById('sh-model').textContent = session.model || 'unknown model';
       document.getElementById('sh-title').textContent = session.title || session.startedAt || '';
       document.getElementById('sh-cwd').textContent = session.cwd || '';
-      const badge = document.getElementById('meta-badge');
-      badge.textContent = sc.label;
-      badge.className = `text-[10px] px-1.5 py-0.5 rounded font-semibold ${sc.bg} ${sc.text}`;
-      badge.classList.remove('hidden');
-      const metaInfo = document.getElementById('meta-info');
-      metaInfo.textContent = `${session.messages.length} messages`;
-      metaInfo.classList.remove('hidden');
       messagesContainer.innerHTML = '';
       let totalIn = 0, totalOut = 0;
       for (const msg of session.messages) {
-        const el = renderMessage(msg);
-        messagesContainer.appendChild(el);
         if (msg.usage) {
           totalIn += msg.usage.inputTokens || 0;
           totalOut += msg.usage.outputTokens || 0;
@@ -191,73 +171,64 @@
       document.getElementById('stat-messages').textContent = `${session.messages.length} messages`;
       document.getElementById('stat-tokens').textContent =
-        totalIn || totalOut
-          ? `${totalIn.toLocaleString()} in / ${totalOut.toLocaleString()} out tokens`
-          : '';
     }
     function renderMessage(msg) {
-      const wrapper = document.createElement('div');
-      wrapper.className = 'fade-in mb-3';
       const isUser = msg.role === 'user';
       const isSystem = msg.role === 'system';
-      // Role bar
-      const roleBar = document.createElement('div');
-      roleBar.className = 'flex items-center gap-2 mb-1';
       const roleLabel = document.createElement('span');
       roleLabel.className = `text-[11px] font-bold uppercase tracking-wide ${
-        isUser ? 'text-blue-600' : isSystem ? 'text-gray-400' : 'text-emerald-600'
       }`;
       roleLabel.textContent = msg.role;
-      roleBar.appendChild(roleLabel);
       if (msg.model) {
-        const modelTag = document.createElement('span');
-        modelTag.className = 'text-[11px] text-gray-400 mono';
-        modelTag.textContent = msg.model;
-        roleBar.appendChild(modelTag);
       }
       if (msg.timestamp) {
         const ts = document.createElement('span');
         ts.className = 'text-[11px] text-gray-300';
         ts.textContent = new Date(msg.timestamp).toLocaleTimeString();
-        roleBar.appendChild(ts);
       }
-      wrapper.appendChild(roleBar);
-      // Content card
-      const card = document.createElement('div');
-      card.className = `rounded-lg px-4 py-3 ${
-        isUser
-          ? 'bg-blue-50/60 border border-blue-100'
-          : isSystem
-            ? 'bg-gray-50/60 border border-gray-100'
-            : 'bg-gray-50 border border-gray-200'
-      }`;
       for (const block of msg.blocks) {
-        card.appendChild(renderBlock(block));
       }
       // Usage
       if (msg.usage && (msg.usage.inputTokens || msg.usage.outputTokens)) {
-        const usagePill = document.createElement('div');
-        usagePill.className = 'mt-2 text-[11px] text-gray-400 mono';
         const parts = [];
         if (msg.usage.inputTokens) parts.push(`${msg.usage.inputTokens.toLocaleString()} in`);
         if (msg.usage.outputTokens) parts.push(`${msg.usage.outputTokens.toLocaleString()} out`);
         if (msg.usage.cacheRead) parts.push(`${msg.usage.cacheRead.toLocaleString()} cached`);
-        usagePill.textContent = parts.join(' \u00b7 ');
-        card.appendChild(usagePill);
       }
-      wrapper.appendChild(card);
-      return wrapper;
     }
     function renderBlock(block) {
@@ -265,74 +236,68 @@
       switch (block.type) {
         case 'text':
-          el.className = 'text-[13px] leading-relaxed text-gray-800 whitespace-pre-wrap';
           el.innerHTML = renderMarkdown(block.text);
           break;
         case 'thinking':
-          el.className = 'my-1.5';
-          const details = document.createElement('details');
-          const summary = document.createElement('summary');
-          summary.className = 'text-[11px] text-gray-400 hover:text-gray-600 flex items-center gap-1';
-          summary.innerHTML = '<span class="text-[10px]">\u25b6</span> Thinking';
-          details.appendChild(summary);
-          const thinkContent = document.createElement('div');
-          thinkContent.className = 'mt-1.5 pl-3 border-l-2 border-gray-200 text-[11px] text-gray-500 italic whitespace-pre-wrap';
-          thinkContent.textContent = block.text;
-          details.appendChild(thinkContent);
-          el.appendChild(details);
           break;
         case 'tool_call':
-          el.className = 'my-1.5';
-          const tcDetails = document.createElement('details');
-          const tcSummary = document.createElement('summary');
-          tcSummary.className = 'text-[11px] flex items-center gap-1.5 py-1 px-2 rounded-md bg-amber-50 border border-amber-200 text-amber-800 hover:bg-amber-100 transition';
-          tcSummary.innerHTML = `<span class="font-semibold">${escapeHtml(block.toolName)}</span>`;
-          tcDetails.appendChild(tcSummary);
-          const tcContent = document.createElement('pre');
-          tcContent.className = 'mt-1 p-2.5 rounded-md bg-gray-50 border border-gray-200 text-[11px] text-gray-600 overflow-x-auto mono';
-          tcContent.textContent = typeof block.input === 'string'
-            ? block.input
-            : JSON.stringify(block.input, null, 2);
-          tcDetails.appendChild(tcContent);
-          el.appendChild(tcDetails);
           break;
         case 'tool_result':
-          el.className = 'my-1.5';
-          const trDetails = document.createElement('details');
-          const trSummary = document.createElement('summary');
           const isErr = block.isError;
-          trSummary.className = `text-[11px] flex items-center gap-1.5 py-1 px-2 rounded-md border transition ${
-            isErr
-              ? 'bg-red-50 border-red-200 text-red-700 hover:bg-red-100'
-              : 'bg-sky-50 border-sky-200 text-sky-700 hover:bg-sky-100'
           }`;
-          const label = isErr ? 'Error' : 'Result';
-          const preview = (block.content || '').slice(0, 80).replace(/\n/g, ' ');
-          trSummary.innerHTML = `<span class="font-semibold">${label}</span><span class="text-gray-400 truncate">${escapeHtml(preview)}</span>`;
-          trDetails.appendChild(trSummary);
-          const trContent = document.createElement('pre');
-          trContent.className = 'mt-1 p-2.5 rounded-md bg-gray-50 border border-gray-200 text-[11px] text-gray-600 overflow-x-auto max-h-80 overflow-y-auto mono';
-          trContent.textContent = block.content;
-          trDetails.appendChild(trContent);
-          el.appendChild(trDetails);
           break;
       }
       return el;
     }
     function renderMarkdown(text) {
       if (!text) return '';
       return escapeHtml(text)
-        .replace(/```(\w*)\n([\s\S]*?)```/g, '<pre class="my-2 p-2.5 rounded-md bg-gray-100 border border-gray-200 text-[11px] text-gray-700 overflow-x-auto mono"><code>$2</code></pre>')
-        .replace(/`([^`]+)`/g, '<code class="px-1 py-0.5 rounded bg-gray-100 border border-gray-200 text-[11px] text-gray-700 mono">$1</code>')
-        .replace(/\*\*(.+?)\*\*/g, '<strong class="font-semibold text-gray-900">$1</strong>')
-        .replace(/^### (.+)$/gm, '<div class="text-sm font-semibold text-gray-900 mt-3 mb-1">$1</div>')
-        .replace(/^## (.+)$/gm, '<div class="text-base font-semibold text-gray-900 mt-3 mb-1">$1</div>')
-        .replace(/^# (.+)$/gm, '<div class="text-lg font-semibold text-gray-900 mt-3 mb-1">$1</div>')
         .replace(/\n/g, '<br>');
     }

     @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap');
     body { font-family: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif; }
     code, pre, .mono { font-family: 'Source Code Pro', monospace; }
     pre { white-space: pre-wrap; word-break: break-word; }
     details summary { cursor: pointer; user-select: none; }
     details summary::-webkit-details-marker { display: none; }
+    .drop-zone.drag-over { border-color: #6366f1; background: rgba(99, 102, 241, 0.03); }
   </style>
 </head>
 <body class="bg-white text-gray-900 min-h-screen">
+  <!-- Empty state -->
+  <div id="empty-state" class="max-w-5xl mx-auto mt-16 px-4">
+    <div id="drop-zone" class="drop-zone border border-gray-200 rounded-lg p-10 text-center transition-colors">
+      <div class="text-gray-500 text-sm mb-1">Drop a session file or paste a URL</div>
+      <div class="text-gray-400 text-xs mb-6">Supports Claude Code, Pi, Codex, and OpenCode JSONL formats</div>
+      <div class="flex items-center justify-center gap-2 mb-6">
+        <input type="text" id="url-input-empty" placeholder="Paste session URL…"
+          class="text-xs px-2.5 py-1.5 rounded-md bg-white border border-gray-200 text-gray-700 placeholder-gray-400 w-72 focus:outline-none focus:ring-1 focus:ring-gray-300 mono">
+        <label class="cursor-pointer text-xs px-3 py-1.5 rounded-md border border-gray-200 bg-white hover:bg-gray-50 transition text-gray-700 font-medium">
           Load File
           <input type="file" accept=".jsonl,.json" class="hidden" id="file-input">
         </label>
       </div>
+      <div class="text-gray-400 text-[10px] uppercase tracking-widest mb-2 font-semibold">Samples</div>
+      <div class="flex flex-wrap justify-center gap-1.5">
         <button onclick="loadUrl('https://huggingface.co/datasets/victor/claude-sample-session/resolve/main/claude-code-session-2026-03-16.jsonl')"
+          class="text-[11px] px-2 py-1 rounded border border-gray-200 text-gray-600 hover:bg-gray-50 transition">Claude Code</button>
         <button onclick="loadUrl('https://huggingface.co/datasets/victor/pi-sample-session/resolve/main/pi-session-2026-03-16.jsonl')"
+          class="text-[11px] px-2 py-1 rounded border border-gray-200 text-gray-600 hover:bg-gray-50 transition">Pi</button>
         <button onclick="loadUrl('https://huggingface.co/datasets/victor/codex-sample-session/resolve/main/codex-session-hello-2026-03-16.jsonl')"
+          class="text-[11px] px-2 py-1 rounded border border-gray-200 text-gray-600 hover:bg-gray-50 transition">Codex</button>
         <button onclick="loadUrl('https://huggingface.co/datasets/victor/opencode-sample-session/resolve/main/opencode-session-2026-03-16.jsonl')"
+          class="text-[11px] px-2 py-1 rounded border border-gray-200 text-gray-600 hover:bg-gray-50 transition">OpenCode</button>
       </div>
     </div>
   </div>
+  <!-- Session panel (single bordered container like HF Dataset Viewer) -->
+  <div id="session-panel" class="hidden max-w-5xl mx-auto my-4 mx-4">
+    <!-- Panel header -->
+    <div class="border border-gray-200 rounded-lg overflow-hidden">
+      <!-- Toolbar row -->
+      <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 bg-white">
+        <div class="flex items-center gap-2">
+          <span class="text-sm font-semibold text-gray-900">Session Viewer</span>
+          <span id="sh-source" class="text-[10px] px-1.5 py-0.5 rounded font-semibold"></span>
+          <span id="sh-model" class="text-[11px] text-gray-400 mono"></span>
+          <span id="stat-messages" class="text-[11px] text-gray-400"></span>
+        </div>
+        <div class="flex items-center gap-2">
+          <span id="stat-tokens" class="text-[11px] text-gray-400 mono"></span>
+          <input type="text" id="url-input" placeholder="Paste session URL…"
+            class="text-[11px] px-2 py-1 rounded-md border border-gray-200 text-gray-600 placeholder-gray-400 w-48 focus:outline-none focus:ring-1 focus:ring-gray-300 mono">
+          <label class="cursor-pointer text-[11px] px-2.5 py-1 rounded-md border border-gray-200 bg-white hover:bg-gray-50 transition text-gray-600 font-medium">
+            Load File
+            <input type="file" accept=".jsonl,.json" class="hidden" id="file-input-2">
+          </label>
+        </div>
       </div>
+      <!-- Session info row -->
+      <div id="session-info" class="px-4 py-2 border-b border-gray-200 bg-gray-50/50">
+        <div id="sh-title" class="text-[13px] text-gray-600"></div>
+        <div id="sh-cwd" class="text-[11px] text-gray-400 mono"></div>
+      </div>
+      <!-- Messages -->
+      <div id="messages-container"></div>
     </div>
+  </div>
   <script>
     const fileInput = document.getElementById('file-input');
+    const fileInput2 = document.getElementById('file-input-2');
     const emptyState = document.getElementById('empty-state');
+    const sessionPanel = document.getElementById('session-panel');
     const messagesContainer = document.getElementById('messages-container');
     const SOURCE_COLORS = {
+      'claude-code': { bg: 'bg-orange-50', text: 'text-orange-600', label: 'Claude Code' },
+      'pi':          { bg: 'bg-emerald-50', text: 'text-emerald-600', label: 'Pi' },
+      'codex':       { bg: 'bg-blue-50', text: 'text-blue-600', label: 'Codex' },
+      'opencode':    { bg: 'bg-purple-50', text: 'text-purple-600', label: 'OpenCode' },
     };
+    // URL inputs (both empty state and panel)
+    const urlInputEmpty = document.getElementById('url-input-empty');
     const urlInput = document.getElementById('url-input');
+    urlInputEmpty.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && urlInputEmpty.value.trim()) loadUrl(urlInputEmpty.value.trim());
+    });
     urlInput.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' && urlInput.value.trim()) loadUrl(urlInput.value.trim());
     });
         url = `https://huggingface.co/datasets/${hfMatch[1]}/resolve/main/${hfMatch[2]}`;
       } else if (url.includes('huggingface.co/datasets/') && !url.includes('/resolve/')) {
         const parts = url.match(/huggingface\.co\/datasets\/([^/]+\/[^/]+)\/?$/);
+        if (parts) { alert('Paste the URL of a specific .jsonl file.'); return; }
       }
+      for (const inp of [urlInputEmpty, urlInput]) { inp.disabled = true; inp.value = 'Loading\u2026'; }
       try {
         const res = await fetch(url);
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
         const text = await res.text();
+        renderSession(parseSession(text));
+      } catch (err) { alert(`Load error: ${err.message}`); }
+      finally { for (const inp of [urlInputEmpty, urlInput]) { inp.disabled = false; inp.value = ''; } }
     }
     const params = new URLSearchParams(location.search);
     if (params.get('url')) loadUrl(params.get('url'));
+    fileInput.addEventListener('change', (e) => { if (e.target.files[0]) loadFile(e.target.files[0]); });
+    fileInput2.addEventListener('change', (e) => { if (e.target.files[0]) loadFile(e.target.files[0]); });
+    // Drag and drop on empty state
+    const dropZone = document.getElementById('drop-zone');
     dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); });
     dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
     dropZone.addEventListener('drop', (e) => {
+      e.preventDefault(); dropZone.classList.remove('drag-over');
       if (e.dataTransfer.files[0]) loadFile(e.dataTransfer.files[0]);
     });
     function loadFile(file) {
       const reader = new FileReader();
       reader.onload = (e) => {
+        try { renderSession(parseSession(e.target.result)); }
+        catch (err) { alert(`Parse error: ${err.message}`); }
       };
       reader.readAsText(file);
     }
     function renderSession(session) {
       emptyState.classList.add('hidden');
+      sessionPanel.classList.remove('hidden');
       const sc = SOURCE_COLORS[session.source] || SOURCE_COLORS['claude-code'];
       const srcEl = document.getElementById('sh-source');
       srcEl.textContent = sc.label;
       srcEl.className = `text-[10px] px-1.5 py-0.5 rounded font-semibold ${sc.bg} ${sc.text}`;
+      document.getElementById('sh-model').textContent = session.model || '';
       document.getElementById('sh-title').textContent = session.title || session.startedAt || '';
       document.getElementById('sh-cwd').textContent = session.cwd || '';
       messagesContainer.innerHTML = '';
       let totalIn = 0, totalOut = 0;
       for (const msg of session.messages) {
+        messagesContainer.appendChild(renderMessage(msg));
         if (msg.usage) {
           totalIn += msg.usage.inputTokens || 0;
           totalOut += msg.usage.outputTokens || 0;
       document.getElementById('stat-messages').textContent = `${session.messages.length} messages`;
       document.getElementById('stat-tokens').textContent =
+        totalIn || totalOut ? `${totalIn.toLocaleString()} in / ${totalOut.toLocaleString()} out` : '';
     }
     function renderMessage(msg) {
+      const row = document.createElement('div');
       const isUser = msg.role === 'user';
       const isSystem = msg.role === 'system';
+      row.className = 'border-b border-gray-200 px-4 py-2.5';
+      // Role + meta line
+      const meta = document.createElement('div');
+      meta.className = 'flex items-center gap-1.5 mb-1';
       const roleLabel = document.createElement('span');
       roleLabel.className = `text-[11px] font-bold uppercase tracking-wide ${
+        isUser ? 'text-blue-600' : isSystem ? 'text-gray-400' : 'text-green-600'
       }`;
       roleLabel.textContent = msg.role;
+      meta.appendChild(roleLabel);
       if (msg.model) {
+        const m = document.createElement('span');
+        m.className = 'text-[11px] text-gray-400 mono';
+        m.textContent = msg.model;
+        meta.appendChild(m);
       }
       if (msg.timestamp) {
         const ts = document.createElement('span');
         ts.className = 'text-[11px] text-gray-300';
         ts.textContent = new Date(msg.timestamp).toLocaleTimeString();
+        meta.appendChild(ts);
       }
+      row.appendChild(meta);
+      // Content
+      const content = document.createElement('div');
       for (const block of msg.blocks) {
+        content.appendChild(renderBlock(block));
       }
       // Usage
       if (msg.usage && (msg.usage.inputTokens || msg.usage.outputTokens)) {
+        const u = document.createElement('div');
+        u.className = 'text-[11px] text-gray-400 mono mt-1';
         const parts = [];
         if (msg.usage.inputTokens) parts.push(`${msg.usage.inputTokens.toLocaleString()} in`);
         if (msg.usage.outputTokens) parts.push(`${msg.usage.outputTokens.toLocaleString()} out`);
         if (msg.usage.cacheRead) parts.push(`${msg.usage.cacheRead.toLocaleString()} cached`);
+        u.textContent = parts.join(' \u00b7 ');
+        content.appendChild(u);
       }
+      row.appendChild(content);
+      return row;
     }
     function renderBlock(block) {
       switch (block.type) {
         case 'text':
+          el.className = 'text-[13px] leading-snug text-gray-800 whitespace-pre-wrap';
           el.innerHTML = renderMarkdown(block.text);
           break;
         case 'thinking':
+          el.className = 'my-1';
+          const d = document.createElement('details');
+          const s = document.createElement('summary');
+          s.className = 'text-[11px] text-gray-400 hover:text-gray-500 flex items-center gap-1';
+          s.innerHTML = '<span class="text-[9px]">\u25b6</span> Thinking';
+          d.appendChild(s);
+          const c = document.createElement('div');
+          c.className = 'mt-1 pl-2.5 border-l border-gray-200 text-[11px] text-gray-500 italic whitespace-pre-wrap';
+          c.textContent = block.text;
+          d.appendChild(c);
+          el.appendChild(d);
           break;
         case 'tool_call':
+          el.className = 'my-1';
+          const td = document.createElement('details');
+          const ts = document.createElement('summary');
+          ts.className = 'text-[11px] inline-flex items-center gap-1 py-0.5 px-1.5 rounded bg-amber-50 border border-amber-200 text-amber-700 hover:bg-amber-100 transition';
+          ts.innerHTML = `<span class="font-medium">${escapeHtml(block.toolName)}</span>`;
+          td.appendChild(ts);
+          const tc = document.createElement('pre');
+          tc.className = 'mt-1 p-2 rounded bg-gray-50 border border-gray-200 text-[11px] text-gray-600 overflow-x-auto mono';
+          tc.textContent = typeof block.input === 'string' ? block.input : JSON.stringify(block.input, null, 2);
+          td.appendChild(tc);
+          el.appendChild(td);
           break;
         case 'tool_result':
+          el.className = 'my-1';
+          const rd = document.createElement('details');
+          const rs = document.createElement('summary');
           const isErr = block.isError;
+          rs.className = `text-[11px] inline-flex items-center gap-1 py-0.5 px-1.5 rounded border transition ${
+            isErr ? 'bg-red-50 border-red-200 text-red-600 hover:bg-red-100' : 'bg-gray-50 border-gray-200 text-gray-500 hover:bg-gray-100'
           }`;
+          const preview = (block.content || '').slice(0, 60).replace(/\n/g, ' ');
+          rs.innerHTML = `<span class="font-medium">${isErr ? 'Error' : 'Result'}</span><span class="text-gray-400 truncate ml-1">${escapeHtml(preview)}</span>`;
+          rd.appendChild(rs);
+          const rc = document.createElement('pre');
+          rc.className = 'mt-1 p-2 rounded bg-gray-50 border border-gray-200 text-[11px] text-gray-600 overflow-x-auto max-h-64 overflow-y-auto mono';
+          rc.textContent = block.content;
+          rd.appendChild(rc);
+          el.appendChild(rd);
           break;
       }
       return el;
     }
     function renderMarkdown(text) {
       if (!text) return '';
       return escapeHtml(text)
+        .replace(/```(\w*)\n([\s\S]*?)```/g, '<pre class="my-1 p-2 rounded bg-gray-50 border border-gray-200 text-[11px] text-gray-700 overflow-x-auto mono"><code>$2</code></pre>')
+        .replace(/`([^`]+)`/g, '<code class="px-0.5 py-px rounded bg-gray-100 text-[11px] text-gray-700 mono">$1</code>')
+        .replace(/\*\*(.+?)\*\*/g, '<strong class="font-semibold">$1</strong>')
+        .replace(/^### (.+)$/gm, '<div class="text-[13px] font-semibold mt-2 mb-0.5">$1</div>')
+        .replace(/^## (.+)$/gm, '<div class="text-sm font-semibold mt-2 mb-0.5">$1</div>')
+        .replace(/^# (.+)$/gm, '<div class="text-[15px] font-semibold mt-2 mb-0.5">$1</div>')
         .replace(/\n/g, '<br>');
     }