agent-replay 0.1.0

package/build/server/chunks/_page.svelte-C2kNC2pi.js

@@ -0,0 +1,504 @@
+import { N as head, Q as attr_class, O as attr, V as attr_style, P as ensure_array_like, X as bind_props, T as stringify } from './index-C0L7m6Jv.js';
+import { s as shortModel, a as formatDurationBetween, b as formatNumber, c as formatCostWithPlan, t as truncate } from './format-dOzJq-yD.js';
+import { e as escape_html } from './escaping-CqgfEcN3.js';
+import { createPatch } from 'diff';
+import './context-JUYyv6NC.js';
+
+function EventCard($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { event, selected = false } = $$props;
+    const toolColors = {
+      Bash: "border-green-500/50 bg-green-500/5",
+      Read: "border-blue-500/50 bg-blue-500/5",
+      Write: "border-amber-500/50 bg-amber-500/5",
+      Edit: "border-amber-500/50 bg-amber-500/5",
+      Glob: "border-purple-500/50 bg-purple-500/5",
+      Grep: "border-purple-500/50 bg-purple-500/5",
+      Task: "border-cyan-500/50 bg-cyan-500/5",
+      WebFetch: "border-indigo-500/50 bg-indigo-500/5",
+      WebSearch: "border-indigo-500/50 bg-indigo-500/5"
+    };
+    const dotColors = {
+      Bash: "bg-green-500",
+      Read: "bg-blue-500",
+      Write: "bg-amber-500",
+      Edit: "bg-amber-500",
+      Glob: "bg-purple-500",
+      Grep: "bg-purple-500",
+      Task: "bg-cyan-500",
+      WebFetch: "bg-indigo-500",
+      WebSearch: "bg-indigo-500"
+    };
+    const pulseColors = {
+      Bash: "text-green-500",
+      Read: "text-blue-500",
+      Write: "text-amber-500",
+      Edit: "text-amber-500",
+      Glob: "text-purple-500",
+      Grep: "text-purple-500",
+      Task: "text-cyan-500",
+      WebFetch: "text-indigo-500",
+      WebSearch: "text-indigo-500"
+    };
+    function getSummary(event2) {
+      const d = event2.data;
+      switch (d.eventType) {
+        case "user_message":
+          return truncate(d.text, 80);
+        case "assistant_text":
+          return truncate(d.text, 80);
+        case "thinking":
+          return truncate(d.thinking, 60);
+        case "tool_call": {
+          const input = d.input;
+          if (d.toolName === "Bash") return truncate(String(input.command || ""), 60);
+          if (d.toolName === "Read") return truncate(String(input.file_path || ""), 60);
+          if (d.toolName === "Edit") return truncate(String(input.file_path || ""), 60);
+          if (d.toolName === "Write") return truncate(String(input.file_path || ""), 60);
+          if (d.toolName === "Glob") return truncate(String(input.pattern || ""), 60);
+          if (d.toolName === "Grep") return truncate(String(input.pattern || ""), 60);
+          if (d.toolName === "Task") return truncate(String(input.description || ""), 60);
+          return d.toolName;
+        }
+        case "system":
+          return d.subtype;
+        case "compact_boundary":
+          return "Context compacted";
+        default:
+          return "";
+      }
+    }
+    function getLabel(event2) {
+      const d = event2.data;
+      switch (d.eventType) {
+        case "user_message":
+          return "User";
+        case "assistant_text":
+          return "Claude";
+        case "thinking":
+          return "Thinking";
+        case "tool_call":
+          return d.toolName;
+        case "system":
+          return "System";
+        case "compact_boundary":
+          return "Compact";
+        default:
+          return "";
+      }
+    }
+    function getDotColor(event2) {
+      const d = event2.data;
+      if (d.eventType === "user_message") return "bg-sky-500";
+      if (d.eventType === "assistant_text") return "bg-surface-400";
+      if (d.eventType === "thinking") return "bg-yellow-500";
+      if (d.eventType === "tool_call") return dotColors[d.toolName] || "bg-surface-500";
+      if (d.eventType === "system") return "bg-surface-600";
+      if (d.eventType === "compact_boundary") return "bg-orange-500";
+      return "bg-surface-600";
+    }
+    function getPulseColor(event2) {
+      const d = event2.data;
+      if (d.eventType === "user_message") return "text-sky-500";
+      if (d.eventType === "assistant_text") return "text-surface-400";
+      if (d.eventType === "thinking") return "text-yellow-500";
+      if (d.eventType === "tool_call") return pulseColors[d.toolName] || "text-surface-500";
+      if (d.eventType === "compact_boundary") return "text-orange-500";
+      return "text-surface-600";
+    }
+    function getBorderColor(event2) {
+      const d = event2.data;
+      if (d.eventType === "user_message") return "border-sky-500/50 bg-sky-500/5";
+      if (d.eventType === "assistant_text") return "border-surface-600 bg-surface-800/50";
+      if (d.eventType === "thinking") return "border-yellow-500/30 bg-yellow-500/5";
+      if (d.eventType === "tool_call") return toolColors[d.toolName] || "border-surface-600 bg-surface-800/50";
+      if (d.eventType === "compact_boundary") return "border-orange-500/30 bg-orange-500/5";
+      return "border-surface-700 bg-surface-800/50";
+    }
+    function hasError(event2) {
+      return event2.data.eventType === "tool_call" && !!event2.data.result?.isError;
+    }
+    $$renderer2.push(`<button class="w-full text-left relative pl-6 group"><div${attr_class(`absolute left-0 top-3 w-3 h-3 rounded-full ${stringify(getDotColor(event))} ring-2 ring-surface-950 z-10 ${stringify(selected ? "scale-125" : "group-hover:scale-110")} transition-transform`, "svelte-1z0u85a")}></div> `);
+    if (selected) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<div${attr_class(`absolute left-0 top-3 w-3 h-3 rounded-full z-[9] ${stringify(getPulseColor(event))} animate-pulse-ring`, "svelte-1z0u85a")}></div>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]--> <div${attr_class(
+      `ml-2 px-3 py-2 rounded-md border transition-all text-sm ${stringify(getBorderColor(event))} ${stringify(selected ? "ring-1 ring-surface-500 !bg-surface-800" : "hover:bg-surface-800/80")} ${stringify(hasError(event) ? "!border-red-500/50" : "")}`,
+      "svelte-1z0u85a"
+    )}><div class="flex items-center gap-2 mb-0.5"><span class="text-xs font-medium text-surface-400">${escape_html(getLabel(event))}</span> `);
+    if (hasError(event)) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<span class="text-xs text-red-400">error</span>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]--></div> <div class="text-surface-300 text-xs leading-relaxed truncate">${escape_html(getSummary(event))}</div></div></button>`);
+  });
+}
+function Timeline($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { events, selectedIndex = 0, onselect } = $$props;
+    function scrollToEvent(index) {
+      return;
+    }
+    $$renderer2.push(`<div class="relative"><div class="absolute left-[5px] top-0 bottom-0 w-px bg-surface-800"></div> <div class="space-y-1"><!--[-->`);
+    const each_array = ensure_array_like(events);
+    for (let i = 0, $$length = each_array.length; i < $$length; i++) {
+      let event = each_array[i];
+      $$renderer2.push(`<div${attr("data-event-index", i)}>`);
+      EventCard($$renderer2, {
+        event,
+        selected: i === selectedIndex
+      });
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]--></div></div>`);
+    bind_props($$props, { scrollToEvent });
+  });
+}
+function DiffView($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { filePath, oldString, newString } = $$props;
+    let patch = createPatch(filePath, oldString, newString, "", "", { context: 3 });
+    let lines = (() => {
+      const result = [];
+      for (const line of patch.split("\n")) {
+        if (line.startsWith("@@")) {
+          result.push({ type: "header", content: line });
+        } else if (line.startsWith("+") && !line.startsWith("+++")) {
+          result.push({ type: "add", content: line.slice(1) });
+        } else if (line.startsWith("-") && !line.startsWith("---")) {
+          result.push({ type: "remove", content: line.slice(1) });
+        } else if (line.startsWith(" ")) {
+          result.push({ type: "context", content: line.slice(1) });
+        }
+      }
+      return result;
+    })();
+    $$renderer2.push(`<div class="rounded-md border border-surface-800 overflow-hidden"><div class="bg-surface-900 px-3 py-1.5 border-b border-surface-800 flex items-center gap-2"><span class="text-amber-400 text-xs">${escape_html(filePath)}</span></div> <div class="overflow-x-auto text-xs font-mono"><!--[-->`);
+    const each_array = ensure_array_like(lines);
+    for (let i = 0, $$length = each_array.length; i < $$length; i++) {
+      let line = each_array[i];
+      $$renderer2.push(`<div${attr_class(`px-3 py-0.5 whitespace-pre ${stringify(line.type === "add" ? "bg-green-500/10 text-green-300" : "")} ${stringify(line.type === "remove" ? "bg-red-500/10 text-red-300" : "")} ${stringify(line.type === "context" ? "text-surface-400" : "")} ${stringify(line.type === "header" ? "bg-surface-800 text-purple-400 py-1" : "")}`)}>`);
+      if (line.type === "add") {
+        $$renderer2.push("<!--[-->");
+        $$renderer2.push(`+`);
+      } else if (line.type === "remove") {
+        $$renderer2.push("<!--[1-->");
+        $$renderer2.push(`-`);
+      } else if (line.type === "context") {
+        $$renderer2.push("<!--[2-->");
+        $$renderer2.push(` `);
+      } else {
+        $$renderer2.push("<!--[!-->");
+      }
+      $$renderer2.push(`<!--]-->${escape_html(line.content)}</div>`);
+    }
+    $$renderer2.push(`<!--]--></div></div>`);
+  });
+}
+function BashOutput($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { command, description, output, isError } = $$props;
+    $$renderer2.push(`<div class="rounded-md border border-surface-800 overflow-hidden"><div class="bg-surface-900 px-3 py-1.5 border-b border-surface-800 flex items-center gap-2"><div class="flex gap-1"><div class="w-2.5 h-2.5 rounded-full bg-red-500/60"></div> <div class="w-2.5 h-2.5 rounded-full bg-yellow-500/60"></div> <div class="w-2.5 h-2.5 rounded-full bg-green-500/60"></div></div> `);
+    if (description) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<span class="text-surface-500 text-xs ml-1">${escape_html(description)}</span>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]--></div> <div class="bg-surface-950 px-3 py-2 font-mono text-xs"><span class="text-green-400">$</span> <span class="text-surface-200 ml-2 whitespace-pre-wrap">${escape_html(command)}</span></div> `);
+    if (output) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<button class="w-full text-left px-3 py-1 bg-surface-900/50 text-surface-500 text-xs hover:text-surface-400 border-t border-surface-800">${escape_html("▾")} Output (${escape_html(output.split("\n").length)} lines)</button> `);
+      {
+        $$renderer2.push("<!--[-->");
+        $$renderer2.push(`<div${attr_class(`bg-surface-950 px-3 py-2 font-mono text-xs max-h-96 overflow-y-auto ${stringify(isError ? "text-red-300" : "text-surface-400")}`)}><pre class="whitespace-pre-wrap">${escape_html(output)}</pre></div>`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  });
+}
+function CodeBlock($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { content, maxHeight = "24rem" } = $$props;
+    let lines = content.split("\n");
+    $$renderer2.push(`<div class="rounded-md border border-surface-800 overflow-hidden"><div class="overflow-x-auto font-mono text-xs"${attr_style(`max-height: ${stringify(maxHeight)}; overflow-y: auto;`)}><table class="w-full"><tbody><!--[-->`);
+    const each_array = ensure_array_like(lines);
+    for (let i = 0, $$length = each_array.length; i < $$length; i++) {
+      let line = each_array[i];
+      $$renderer2.push(`<tr class="hover:bg-surface-800/30"><td class="text-surface-600 text-right px-2 py-0 select-none w-1 whitespace-nowrap border-r border-surface-800">${escape_html(i + 1)}</td><td class="text-surface-300 px-3 py-0 whitespace-pre">${escape_html(line)}</td></tr>`);
+    }
+    $$renderer2.push(`<!--]--></tbody></table></div></div>`);
+  });
+}
+function DetailPanel($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { event } = $$props;
+    if (!event) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<div class="flex items-center justify-center h-full text-surface-600 text-sm">Select an event to view details</div>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<div class="h-full overflow-y-auto p-4 space-y-4">`);
+      if (event.data.eventType === "user_message") {
+        $$renderer2.push("<!--[-->");
+        $$renderer2.push(`<div><h3 class="text-xs font-medium text-sky-400 mb-3 uppercase tracking-wider">User Message</h3> <div class="text-surface-200 text-sm whitespace-pre-wrap leading-relaxed">${escape_html(event.data.text)}</div></div>`);
+      } else if (event.data.eventType === "assistant_text") {
+        $$renderer2.push("<!--[1-->");
+        $$renderer2.push(`<div><h3 class="text-xs font-medium text-surface-400 mb-3 uppercase tracking-wider">Claude</h3> <div class="text-surface-200 text-sm whitespace-pre-wrap leading-relaxed">${escape_html(event.data.text)}</div></div>`);
+      } else if (event.data.eventType === "thinking") {
+        $$renderer2.push("<!--[2-->");
+        $$renderer2.push(`<div><h3 class="text-xs font-medium text-yellow-400 mb-3 uppercase tracking-wider">Thinking</h3> <div class="text-surface-400 text-sm whitespace-pre-wrap leading-relaxed italic">${escape_html(event.data.thinking)}</div></div>`);
+      } else if (event.data.eventType === "tool_call") {
+        $$renderer2.push("<!--[3-->");
+        const tc = event.data;
+        $$renderer2.push(`<div><h3 class="text-xs font-medium text-surface-400 mb-3 uppercase tracking-wider">${escape_html(tc.toolName)} `);
+        if (tc.result?.isError) {
+          $$renderer2.push("<!--[-->");
+          $$renderer2.push(`<span class="text-red-400 ml-2">Error</span>`);
+        } else {
+          $$renderer2.push("<!--[!-->");
+        }
+        $$renderer2.push(`<!--]--></h3> `);
+        if (tc.toolName === "Edit") {
+          $$renderer2.push("<!--[-->");
+          DiffView($$renderer2, {
+            filePath: String(tc.input.file_path || ""),
+            oldString: String(tc.input.old_string || ""),
+            newString: String(tc.input.new_string || "")
+          });
+        } else if (tc.toolName === "Bash") {
+          $$renderer2.push("<!--[1-->");
+          BashOutput($$renderer2, {
+            command: String(tc.input.command || ""),
+            description: String(tc.input.description || ""),
+            output: tc.result?.content || "",
+            isError: tc.result?.isError || false
+          });
+        } else if (tc.toolName === "Read") {
+          $$renderer2.push("<!--[2-->");
+          $$renderer2.push(`<div class="mb-2"><span class="text-blue-400 text-xs">${escape_html(tc.input.file_path)}</span> `);
+          if (tc.input.offset) {
+            $$renderer2.push("<!--[-->");
+            $$renderer2.push(`<span class="text-surface-500 text-xs ml-2">from line ${escape_html(tc.input.offset)}</span>`);
+          } else {
+            $$renderer2.push("<!--[!-->");
+          }
+          $$renderer2.push(`<!--]--></div> `);
+          if (tc.result?.isError) {
+            $$renderer2.push("<!--[-->");
+            $$renderer2.push(`<div class="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2"><p class="text-red-400 text-xs font-medium mb-1">Tool returned an error during this session</p> <pre class="text-red-300/80 text-xs whitespace-pre-wrap">${escape_html(tc.result.content)}</pre></div>`);
+          } else {
+            $$renderer2.push("<!--[!-->");
+            CodeBlock($$renderer2, { content: tc.result?.content || "No content" });
+          }
+          $$renderer2.push(`<!--]-->`);
+        } else if (tc.toolName === "Write") {
+          $$renderer2.push("<!--[3-->");
+          $$renderer2.push(`<div class="mb-2"><span class="text-amber-400 text-xs">${escape_html(tc.input.file_path)}</span></div> `);
+          CodeBlock($$renderer2, { content: String(tc.input.content || "") });
+          $$renderer2.push(`<!---->`);
+        } else if (tc.toolName === "Glob") {
+          $$renderer2.push("<!--[4-->");
+          $$renderer2.push(`<div class="mb-2"><span class="text-purple-400 text-xs">Pattern: ${escape_html(tc.input.pattern)}</span> `);
+          if (tc.input.path) {
+            $$renderer2.push("<!--[-->");
+            $$renderer2.push(`<span class="text-surface-500 text-xs ml-2">in ${escape_html(tc.input.path)}</span>`);
+          } else {
+            $$renderer2.push("<!--[!-->");
+          }
+          $$renderer2.push(`<!--]--></div> `);
+          CodeBlock($$renderer2, { content: tc.result?.content || "No results" });
+          $$renderer2.push(`<!---->`);
+        } else if (tc.toolName === "Grep") {
+          $$renderer2.push("<!--[5-->");
+          $$renderer2.push(`<div class="mb-2"><span class="text-purple-400 text-xs">/${escape_html(tc.input.pattern)}/</span> `);
+          if (tc.input.path) {
+            $$renderer2.push("<!--[-->");
+            $$renderer2.push(`<span class="text-surface-500 text-xs ml-2">in ${escape_html(tc.input.path)}</span>`);
+          } else {
+            $$renderer2.push("<!--[!-->");
+          }
+          $$renderer2.push(`<!--]--></div> `);
+          CodeBlock($$renderer2, { content: tc.result?.content || "No results" });
+          $$renderer2.push(`<!---->`);
+        } else if (tc.toolName === "Task") {
+          $$renderer2.push("<!--[6-->");
+          $$renderer2.push(`<div class="space-y-2"><div class="text-surface-300 text-sm"><span class="text-cyan-400">Description:</span> ${escape_html(tc.input.description || "")}</div> `);
+          if (tc.input.prompt) {
+            $$renderer2.push("<!--[-->");
+            $$renderer2.push(`<div class="text-surface-400 text-xs whitespace-pre-wrap bg-surface-900 rounded p-3 border border-surface-800">${escape_html(tc.input.prompt)}</div>`);
+          } else {
+            $$renderer2.push("<!--[!-->");
+          }
+          $$renderer2.push(`<!--]--> `);
+          if (tc.result) {
+            $$renderer2.push("<!--[-->");
+            $$renderer2.push(`<div class="mt-3"><span class="text-xs text-surface-500">Result:</span> `);
+            CodeBlock($$renderer2, { content: tc.result.content });
+            $$renderer2.push(`<!----></div>`);
+          } else {
+            $$renderer2.push("<!--[!-->");
+          }
+          $$renderer2.push(`<!--]--></div>`);
+        } else {
+          $$renderer2.push("<!--[!-->");
+          $$renderer2.push(`<div class="space-y-3"><div class="text-xs text-surface-500">Input</div> <pre class="text-xs text-surface-300 bg-surface-900 rounded p-3 border border-surface-800 overflow-x-auto">${escape_html(JSON.stringify(tc.input, null, 2))}</pre> `);
+          if (tc.result?.isError) {
+            $$renderer2.push("<!--[-->");
+            $$renderer2.push(`<div class="text-xs text-surface-500">Result</div> <div class="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2"><p class="text-red-400 text-xs font-medium mb-1">Tool returned an error during this session</p> <pre class="text-red-300/80 text-xs whitespace-pre-wrap">${escape_html(tc.result.content)}</pre></div>`);
+          } else if (tc.result) {
+            $$renderer2.push("<!--[1-->");
+            $$renderer2.push(`<div class="text-xs text-surface-500">Result</div> `);
+            CodeBlock($$renderer2, { content: tc.result.content });
+            $$renderer2.push(`<!---->`);
+          } else {
+            $$renderer2.push("<!--[!-->");
+          }
+          $$renderer2.push(`<!--]--></div>`);
+        }
+        $$renderer2.push(`<!--]--></div>`);
+      } else if (event.data.eventType === "system") {
+        $$renderer2.push("<!--[4-->");
+        $$renderer2.push(`<div><h3 class="text-xs font-medium text-surface-500 mb-3 uppercase tracking-wider">System</h3> <p class="text-surface-400 text-sm">${escape_html(event.data.subtype)}</p> `);
+        if (event.data.durationMs) {
+          $$renderer2.push("<!--[-->");
+          $$renderer2.push(`<p class="text-surface-500 text-xs mt-1">Duration: ${escape_html((event.data.durationMs / 1e3).toFixed(1))}s</p>`);
+        } else {
+          $$renderer2.push("<!--[!-->");
+        }
+        $$renderer2.push(`<!--]--></div>`);
+      } else if (event.data.eventType === "compact_boundary") {
+        $$renderer2.push("<!--[5-->");
+        $$renderer2.push(`<div class="text-center py-8"><div class="text-orange-400 text-sm font-medium">Context Compacted</div> <p class="text-surface-500 text-xs mt-2">The conversation was summarized to fit the context window</p></div>`);
+      } else {
+        $$renderer2.push("<!--[!-->");
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+function PlaybackControls($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      currentIndex = 0,
+      totalEvents = 0,
+      isPlaying = false,
+      speed = 1,
+      onspeedchange
+    } = $$props;
+    const speeds = [1, 2, 4, 8];
+    let progress = totalEvents > 1 ? currentIndex / (totalEvents - 1) * 100 : 0;
+    $$renderer2.push(`<div class="playback-controls flex items-center gap-3"><button${attr("disabled", currentIndex <= 0, true)} class="text-surface-400 hover:text-surface-200 disabled:text-surface-700 disabled:cursor-not-allowed transition-colors p-1 min-w-[44px] min-h-[44px] sm:min-w-0 sm:min-h-0 flex items-center justify-center" title="Previous (Left Arrow)">◀</button> <button class="text-surface-200 hover:text-white transition-colors p-1 text-lg min-w-[44px] min-h-[44px] sm:min-w-0 sm:min-h-0 flex items-center justify-center" title="Play/Pause (Space)">`);
+    if (isPlaying) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`❚❚`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`▶`);
+    }
+    $$renderer2.push(`<!--]--></button> <button${attr("disabled", currentIndex >= totalEvents - 1, true)} class="text-surface-400 hover:text-surface-200 disabled:text-surface-700 disabled:cursor-not-allowed transition-colors p-1 min-w-[44px] min-h-[44px] sm:min-w-0 sm:min-h-0 flex items-center justify-center" title="Next (Right Arrow)">▶</button> <button class="flex-1 h-1.5 bg-surface-800 rounded-full relative cursor-pointer group" aria-label="Seek to position"><div class="absolute inset-y-0 left-0 bg-surface-500 group-hover:bg-surface-400 rounded-full transition-all"${attr_style(`width: ${stringify(progress)}%`)}></div> <div class="absolute top-1/2 -translate-y-1/2 w-3 h-3 bg-surface-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"${attr_style(`left: ${stringify(progress)}%`)}></div></button> <span class="counter text-surface-500 text-xs tabular-nums min-w-[4rem] text-right svelte-167mial"><span class="counter-full svelte-167mial">${escape_html(currentIndex + 1)} / ${escape_html(totalEvents)}</span> <span class="counter-short hidden svelte-167mial">${escape_html(currentIndex + 1)}/${escape_html(totalEvents)}</span></span> <div class="speed-buttons flex items-center gap-1 svelte-167mial"><!--[-->`);
+    const each_array = ensure_array_like(speeds);
+    for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+      let s = each_array[$$index];
+      $$renderer2.push(`<button${attr_class(`text-xs px-1.5 py-0.5 rounded transition-colors ${stringify(speed === s ? "bg-surface-700 text-surface-200" : "text-surface-500 hover:text-surface-300")}`)}>${escape_html(s)}x</button>`);
+    }
+    $$renderer2.push(`<!--]--></div> <div class="speed-select hidden svelte-167mial">`);
+    $$renderer2.select(
+      {
+        value: speed,
+        onchange: (e) => onspeedchange(Number(e.target.value)),
+        class: "bg-surface-800 border border-surface-700 rounded text-xs text-surface-300 px-1.5 py-1 min-h-[44px]"
+      },
+      ($$renderer3) => {
+        $$renderer3.push(`<!--[-->`);
+        const each_array_1 = ensure_array_like(speeds);
+        for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
+          let s = each_array_1[$$index_1];
+          $$renderer3.option({ value: s }, ($$renderer4) => {
+            $$renderer4.push(`${escape_html(s)}x`);
+          });
+        }
+        $$renderer3.push(`<!--]-->`);
+      }
+    );
+    $$renderer2.push(`</div></div>`);
+  });
+}
+function StatsBar($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { summary } = $$props;
+    function getModelColor(model) {
+      if (model.includes("opus")) return "text-purple-300";
+      if (model.includes("sonnet")) return "text-blue-300";
+      if (model.includes("haiku")) return "text-green-300";
+      return "text-surface-200";
+    }
+    $$renderer2.push(`<div class="stats-bar-container" style="container-type: inline-size;"><div class="stats-bar flex items-center gap-4 text-xs text-surface-400 flex-wrap svelte-1cc6v80"><div class="flex items-center gap-1.5"><span class="text-surface-500">Model</span> <span${attr_class(getModelColor(summary.model), "svelte-1cc6v80")}>${escape_html(shortModel(summary.model))}</span></div> <span class="stats-sep text-surface-700 svelte-1cc6v80">|</span> <div class="flex items-center gap-1.5"><span class="text-surface-500">Duration</span> <span class="text-surface-200">${escape_html(formatDurationBetween(summary.startedAt, summary.lastActiveAt))}</span></div> <span class="stats-sep text-surface-700 svelte-1cc6v80">|</span> <div class="flex items-center gap-1.5"><span class="text-surface-500">Tools</span> <span class="text-cyan-300">${escape_html(summary.toolCallCount)}</span></div> <span class="stats-sep text-surface-700 svelte-1cc6v80">|</span> <div class="flex items-center gap-1.5"><span class="text-surface-500">Tokens</span> <span><span class="text-amber-300">${escape_html(formatNumber(summary.inputTokens))} in</span> / <span class="text-blue-300">${escape_html(formatNumber(summary.outputTokens))} out</span></span></div> <span class="stats-sep text-surface-700 svelte-1cc6v80">|</span> <div class="flex items-center gap-1.5"${attr("title", "Estimated API cost")}><span class="text-surface-500">Cost</span> <span${attr_class("text-emerald-300")}>${escape_html(formatCostWithPlan(summary.estimatedCost))}</span> `);
+    {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]--></div></div></div>`);
+  });
+}
+function _page($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { data } = $$props;
+    let selectedIndex = 0;
+    let isPlaying = false;
+    let speed = 1;
+    let mobileTab = "timeline";
+    let selectedEvent = data.timeline.events[selectedIndex] || null;
+    function goTo(index) {
+      if (index < 0 || index >= data.timeline.events.length) return;
+      selectedIndex = index;
+      mobileTab = "details";
+    }
+    function setSpeed(s) {
+      speed = s;
+    }
+    head("y8uck8", $$renderer2, ($$renderer3) => {
+      $$renderer3.title(($$renderer4) => {
+        $$renderer4.push(`<title>${escape_html(data.timeline.summary.slug || data.timeline.summary.sessionId.slice(0, 8))} — Agent Replay</title>`);
+      });
+    });
+    $$renderer2.push(`<div class="h-[calc(100vh-3.5rem-2px)] flex flex-col"><div class="border-b border-surface-800 bg-surface-900/50 px-3 sm:px-4 py-2 space-y-2"><div class="flex items-center gap-3"><a href="/" class="text-surface-500 hover:text-blue-400 transition-colors text-xs">← Sessions</a> <span class="text-surface-700">|</span> <h1 class="text-surface-100 text-sm font-medium truncate">${escape_html(data.timeline.summary.slug || data.timeline.summary.sessionId.slice(0, 8))}</h1> <span class="text-surface-600 text-xs truncate hidden sm:inline">${escape_html(data.timeline.summary.project)}</span></div> `);
+    StatsBar($$renderer2, { summary: data.timeline.summary });
+    $$renderer2.push(`<!----> `);
+    PlaybackControls($$renderer2, {
+      currentIndex: selectedIndex,
+      totalEvents: data.timeline.events.length,
+      isPlaying,
+      speed,
+      onspeedchange: setSpeed
+    });
+    $$renderer2.push(`<!----></div> <div class="mobile-tabs flex border-b border-surface-800 lg:hidden"><button${attr_class(`flex-1 px-4 py-2.5 text-xs font-medium transition-colors ${stringify(mobileTab === "timeline" ? "text-surface-100 border-b-2 border-blue-500" : "text-surface-500 hover:text-surface-300")}`)}>Timeline</button> <button${attr_class(`flex-1 px-4 py-2.5 text-xs font-medium transition-colors ${stringify(mobileTab === "details" ? "text-surface-100 border-b-2 border-blue-500" : "text-surface-500 hover:text-surface-300")}`)}>Details</button></div>  <div class="desktop-layout flex-1 hidden lg:flex overflow-hidden"><div class="w-[400px] xl:w-[400px] lg:w-[280px] min-w-[240px] border-r border-surface-800 overflow-y-auto p-3">`);
+    Timeline($$renderer2, { events: data.timeline.events, selectedIndex, onselect: goTo });
+    $$renderer2.push(`<!----></div> <div class="flex-1 overflow-hidden">`);
+    DetailPanel($$renderer2, { event: selectedEvent });
+    $$renderer2.push(`<!----></div></div> <div class="mobile-layout flex-1 lg:hidden overflow-hidden">`);
+    if (mobileTab === "timeline") {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<div class="h-full overflow-y-auto p-3">`);
+      Timeline($$renderer2, { events: data.timeline.events, selectedIndex, onselect: goTo });
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<div class="h-full overflow-hidden flex flex-col"><button class="px-3 py-2 text-xs text-surface-500 hover:text-blue-400 transition-colors text-left sm:hidden">← Back to timeline</button> <div class="flex-1 overflow-hidden">`);
+      DetailPanel($$renderer2, { event: selectedEvent });
+      $$renderer2.push(`<!----></div></div>`);
+    }
+    $$renderer2.push(`<!--]--></div></div>`);
+  });
+}
+
+export { _page as default };
+//# sourceMappingURL=_page.svelte-C2kNC2pi.js.map