transcript-viewer 0.1.0

data/lib/transcript_viewer/configuration.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require_relative "tool_template_registry"
+
+module TranscriptViewer
+  class Configuration
+    attr_reader :tool_templates
+
+    def initialize
+      @tool_templates = ToolTemplateRegistry.new
+    end
+
+    def register_tool_template(tool_name, template_path)
+      tool_templates.register(tool_name, template_path)
+    end
+  end
+end

data/lib/transcript_viewer/page.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module TranscriptViewer
+  class Page
+    def initialize(session_id:, events:, forked_transcript: false, ancestor_lookup: nil, export_href: nil, forked_transcript_href: nil, hide_forked_transcript_href: nil, asset_dir: nil, template_dir: nil, tool_templates: nil, before_html: nil, after_html: nil)
+      view = View.new(
+        session_id: session_id,
+        events: events,
+        forked_transcript: forked_transcript,
+        ancestor_lookup: ancestor_lookup,
+        export_href: export_href,
+        forked_transcript_href: forked_transcript_href,
+        hide_forked_transcript_href: hide_forked_transcript_href,
+        asset_dir: asset_dir,
+      ).to_h
+      view[:before_html] = before_html.to_s
+      view[:after_html] = after_html.to_s
+      registered_tool_templates = TranscriptViewer.configuration.tool_templates.merge(tool_templates)
+      @renderer = Renderer.new(
+        view,
+        template_dir: template_dir,
+        tool_templates: registered_tool_templates,
+      )
+    end
+
+    def render
+      @renderer.render
+    end
+
+    def stylesheet
+      @renderer.stylesheet
+    end
+
+    def app_html
+      @renderer.render_app
+    end
+
+    def javascript
+      @renderer.render_javascript
+    end
+  end
+end

data/lib/transcript_viewer/renderer.rb

@@ -0,0 +1,367 @@
+# frozen_string_literal: true
+
+require "cgi"
+require "erb"
+require "json"
+require "time"
+
+require_relative "support"
+require_relative "tool_execution"
+require_relative "tool_template_registry"
+
+module TranscriptViewer
+  class Renderer
+    def initialize(view, template_dir: nil, tool_templates: nil)
+      @view = view
+      @template_dir = template_dir
+      @tool_templates = ToolTemplateRegistry.new(tool_templates)
+      @tool_results_by_call_id = build_tool_result_index
+    end
+
+    def render
+      render_template("session")
+    end
+
+    def stylesheet
+      @view.fetch(:css)
+    end
+
+    def render_app
+      render_template("app")
+    end
+
+    def render_javascript
+      render_script
+    end
+
+    private
+
+    def render_template(name, locals = {})
+      render_template_file(template_path(name), locals)
+    end
+
+    def render_template_file(path, locals = {})
+      template_binding = binding
+      locals.each { |key, value| template_binding.local_variable_set(key, value) }
+      ERB.new(File.read(path), trim_mode: "-").result(template_binding)
+    end
+
+    def template_path(name)
+      relative_path = "#{name}.html.erb"
+      custom_path = File.expand_path(relative_path, @template_dir) if @template_dir
+      return custom_path if custom_path && File.file?(custom_path)
+
+      File.expand_path("templates/#{relative_path}", __dir__)
+    end
+
+    def render_hamburger
+      render_template("hamburger").strip
+    end
+
+    def render_sidebar
+      render_template("sidebar")
+    end
+
+    def render_tree_node(entry)
+      render_template("tree_node", entry: entry)
+    end
+
+    def render_tree_content(entry)
+      render_template("tree_content", entry: entry)
+    end
+
+    def render_message_tree_content(msg)
+      render_template("message_tree_content", msg: msg)
+    end
+
+    def render_main_content
+      render_template("main_content")
+    end
+
+    def render_header
+      render_template("header")
+    end
+
+    def info_item(label, value)
+      render_template("info_item", label: label, value: value)
+    end
+
+    def render_fork_bar
+      render_template("fork_bar")
+    end
+
+    def render_entry(entry)
+      render_template("entry", entry: entry)
+    end
+
+    def render_message_entry(entry)
+      render_template("message_entry", entry: entry)
+    end
+
+    def render_assistant_block(block, blocks, index)
+      render_template("assistant_block", block: block, blocks: blocks, index: index)
+    end
+
+    def render_server_tool_use(block, result_block)
+      render_template("server_tool_use", block: block, result_block: result_block)
+    end
+
+    def render_compaction(entry)
+      render_template("compaction", entry: entry)
+    end
+
+    def render_tool_call(call)
+      tool = ToolExecution.new(call: call, result_entry: @tool_results_by_call_id[call[:id]])
+      custom_template_path = @tool_templates.resolve(tool.name)
+      return render_tool_fallback(tool) unless custom_template_path
+
+      unless File.file?(custom_template_path)
+        raise TemplateNotFoundError, "Registered template for #{tool.name.inspect} does not exist: #{custom_template_path}"
+      end
+
+      render_template_file(custom_template_path, tool: tool)
+    end
+
+    def render_tool_fallback(tool)
+      render_template("tool_call", tool: tool, call: tool.call, entries: @view[:entries])
+    end
+
+    def render_fetch_tool_table(rows)
+      render_template("fetch_tool_table", rows: rows)
+    end
+
+    def timestamp_block(timestamp)
+      time = message_time(timestamp)
+      return "" unless present?(time)
+
+      %(<div class="message-timestamp">#{h(time)}</div>)
+    end
+
+    def timestamp_prefix(timestamp, inline: false)
+      time = message_time(timestamp)
+      return "" unless present?(time)
+
+      %(<span class="message-timestamp">#{h(time)}</span> · )
+    end
+
+    def render_markdownish(text)
+      normalized = text.to_s.gsub(/\r\n?/, "\n")
+      return "" if normalized.empty?
+
+      normalized.split(/\n{2,}/).map do |paragraph|
+        %(<p>#{h(paragraph).gsub("\n", "<br>")}</p>)
+      end.join
+    end
+
+    def format_tokens(value)
+      value = value.to_i
+      return "#{(value / 1000.0).round}k" if value >= 10_000
+      return format("%.1fk", value / 1000.0).sub(".0k", "k") if value >= 1_000
+
+      value.to_s
+    end
+
+    def format_time(timestamp)
+      return "unknown" if blank?(timestamp)
+
+      time = Time.parse(timestamp).getlocal
+      hour = time.strftime("%I").sub(/^0/, "")
+      "#{time.month}/#{time.day}/#{time.year}, #{hour}:#{time.strftime("%M:%S %p")}"
+    rescue ArgumentError, TypeError
+      timestamp.to_s
+    end
+
+    def message_time(timestamp)
+      return nil if blank?(timestamp)
+
+      format_time(timestamp).sub(%r{^\d+/\d+/\d+, }, "")
+    end
+
+    def message_parts(stats)
+      [].tap do |parts|
+        parts << "#{stats[:developer]} developer" if stats[:developer].positive?
+        parts << "#{stats[:user]} user" if stats[:user].positive?
+        parts << "#{stats[:assistant]} assistant" if stats[:assistant].positive?
+        parts << "#{stats[:tool_results]} tool results" if stats[:tool_results].positive?
+        parts << "#{stats[:compactions]} compactions" if stats[:compactions].positive?
+      end.join(", ")
+    end
+
+    def token_parts(stats)
+      tokens = stats[:tokens]
+      [
+        "↑#{format_tokens(tokens[:input])} (R#{format_tokens(tokens[:cacheRead])} W#{format_tokens(tokens[:cacheWrite])})",
+        "↓#{format_tokens(tokens[:output])}",
+      ].join(" ")
+    end
+
+    def tool_pair_text(entry)
+      input_text = truncate_tree_text(tool_input_text(entry), 90)
+      result_text = truncate_tree_text(extract_content(entry[:resultContent]), 80)
+      ["[#{entry[:toolName]}: #{input_text}]", presence(result_text)].compact.join(" → ")
+    end
+
+    def tool_input_text(entry)
+      input = entry[:input] || {}
+      command = input[:command] || input["command"]
+      path = input[:path] || input["path"]
+      return command if present?(command)
+      return path if present?(path)
+
+      display_json(input)
+    end
+
+    def display_json(value)
+      JSON.generate(value)
+    rescue JSON::GeneratorError, TypeError
+      value.to_s
+    end
+
+    def extract_content(content)
+      return display_json(content) if content.is_a?(Hash)
+      return content.to_s unless content.is_a?(Array)
+
+      content.filter_map do |block|
+        case block[:type]
+        when "text"
+          block[:text]
+        when "thinking"
+          block[:thinking]
+        when "toolCall"
+          "$ #{block[:name]}"
+        when "serverToolUse"
+          input = block[:input]
+          label = input.is_a?(Hash) ? input[:command] || input["command"] || input[:path] || input["path"] : ""
+          "$ #{block[:name]} #{label}".strip
+        when "serverToolResult"
+          "[server tool result]"
+        when "image"
+          "[image]"
+        end
+      end.join(" ")
+    end
+
+    def truncate_tree_text(text, max = 100)
+      normalized = text.to_s.gsub(/[\n\t]/, " ").strip
+      normalized.length > max ? "#{normalized[0, max]}..." : normalized
+    end
+
+    def build_tool_result_index
+      @view[:entries].each_with_object({}) do |entry, index|
+        next unless entry.dig(:message, :role) == "toolResult"
+
+        index[entry.dig(:message, :toolCallId)] = entry
+      end
+    end
+
+    def fetch_tool_call?(call)
+      call[:name].to_s.start_with?("fetch_")
+    end
+
+    def pretty_tool_arguments(call)
+      JSON.pretty_generate(normalized_tool_arguments(call[:arguments] || {}))
+    end
+
+    def tool_result_text(call, result)
+      output = tool_result_raw_text(result)
+      return output unless fetch_tool_call?(call)
+
+      JSON.pretty_generate(JSON.parse(output))
+    rescue JSON::ParserError
+      output
+    end
+
+    def tool_result_raw_text(result)
+      Array(result&.dig(:message, :content)).filter_map { |block| block[:text] if block[:type] == "text" }.join("\n")
+    end
+
+    def tool_result_images(result)
+      Array(result&.dig(:message, :content)).select { |block| block[:type] == "image" && present?(block[:data]) }
+    end
+
+    def fetch_tool_result_rows(result)
+      parsed = JSON.parse(tool_result_raw_text(result))
+      return parsed if parsed.is_a?(Array) && parsed.all? { |row| row.is_a?(Hash) }
+
+      []
+    rescue JSON::ParserError
+      []
+    end
+
+    def fetch_tool_result_headers(rows)
+      rows.flat_map(&:keys).uniq
+    end
+
+    def fetch_tool_table_value(value)
+      return "" if value.nil?
+      return value.to_s unless value.is_a?(Array) || value.is_a?(Hash)
+
+      JSON.generate(value)
+    end
+
+    def normalized_tool_arguments(arguments)
+      arguments = Support.symbolize(arguments)
+      parameters = arguments[:parameters] || arguments["parameters"]
+      return arguments unless parameters.is_a?(String)
+
+      arguments[:parameters] = JSON.parse(parameters)
+      arguments
+    rescue JSON::ParserError
+      arguments
+    end
+
+    def server_tool_label(block)
+      input = block[:input] || {}
+      command = input[:command] || input["command"]
+      path = input[:path] || input["path"]
+      return command if block[:name] == "bash_code_execution" && present?(command)
+
+      [block[:name], command || path].compact.join(" ")
+    end
+
+    def image_src(image)
+      "data:#{image[:mimeType] || image[:media_type] || "image/png"};base64,#{image[:data]}"
+    end
+
+    def server_tool_result_text(content)
+      return pretty_json(content) unless content.is_a?(Hash)
+
+      result = content[:content] || content["content"] || []
+      stdout = content[:stdout] || content["stdout"]
+      stderr = content[:stderr] || content["stderr"]
+      return [presence(stdout), presence(stderr)].compact.join("\n") if present?(stdout) || present?(stderr)
+
+      if result.is_a?(Array) && result.any?
+        return result.map { |item| item.is_a?(Hash) ? pretty_json(item) : item.to_s }.join("\n")
+      end
+
+      pretty_json(content)
+    end
+
+    def pretty_json(value)
+      JSON.pretty_generate(value)
+    rescue JSON::GeneratorError, TypeError
+      value.to_s
+    end
+
+    def h(value)
+      CGI.escapeHTML(value.to_s)
+    end
+
+    def blank?(value)
+      Support.blank?(value)
+    end
+
+    def present?(value)
+      Support.present?(value)
+    end
+
+    def presence(value)
+      Support.presence(value)
+    end
+
+    def render_script
+      render_template("script")
+    end
+  end
+end

data/lib/transcript_viewer/support.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module TranscriptViewer
+  module Support
+    module_function
+
+    def blank?(value)
+      value.nil? || (value.respond_to?(:empty?) && value.empty?)
+    end
+
+    def present?(value)
+      !blank?(value)
+    end
+
+    def presence(value)
+      present?(value) ? value : nil
+    end
+
+    def symbolize(value)
+      case value
+      when Array
+        value.map { |item| symbolize(item) }
+      when Hash
+        value.each_with_object({}) do |(key, item), hash|
+          hash[symbolize_key(key)] = symbolize(item)
+        end
+      else
+        value
+      end
+    end
+
+    def symbolize_key(key)
+      key.respond_to?(:to_sym) ? key.to_sym : key
+    rescue StandardError
+      key
+    end
+  end
+end

data/lib/transcript_viewer/templates/app.html.erb

@@ -0,0 +1,10 @@
+<%= @view[:before_html] %>
+<%= render_hamburger %>
+<div id="sidebar-overlay"></div>
+<div id="app">
+  <%= render_sidebar %>
+  <div id="sidebar-resizer" role="separator"></div>
+  <%= render_main_content %>
+  <div id="image-modal" class="image-modal"><img id="modal-image" src="" alt=""></div>
+</div>
+<%= @view[:after_html] %>

data/lib/transcript_viewer/templates/assistant_block.html.erb

@@ -0,0 +1,10 @@
+<% case block[:type]
+when "text"
+  if present?(block[:text].to_s.strip)
+%><div class="assistant-text markdown-content"><%= render_markdownish(block[:text]) %></div><% end %><% when "thinking"
+  if present?(block[:thinking].to_s.strip)
+%><div class="thinking-block"><div class="thinking-text"><%= h(block[:thinking]) %></div><div class="thinking-collapsed">Thinking ...</div></div><% end %><% when "toolCall" %><%= render_tool_call(block) %><% when "serverToolUse" %><%
+  result_block = Array(blocks[(index + 1)..]).find { |candidate| candidate[:type] == "serverToolResult" && candidate[:toolUseId] == block[:id] }
+%><%= render_server_tool_use(block, result_block) %><% when "serverToolResult" %><%
+  previous_use = Array(blocks[0...index]).find { |candidate| candidate[:type] == "serverToolUse" && candidate[:id] == block[:toolUseId] }
+%><% unless previous_use %><div class="tool-execution success"><div class="tool-command">[server tool result]</div><div class="tool-output"><pre><%= h(server_tool_result_text(block[:content])) %></pre></div></div><% end %><% end %>

data/lib/transcript_viewer/templates/compaction.html.erb

@@ -0,0 +1,3 @@
+<div class="compaction" id="<%= h(entry[:id]) %>"><%= timestamp_block(entry[:timestamp]) %><div class="compaction-label">[compaction]</div><div class="compaction-collapsed">Compacted from <%= h(entry[:tokensBefore].to_i) %> tokens</div><div class="compaction-content"><strong>Compacted from <%= h(entry[:tokensBefore].to_i) %> tokens</strong>
+
+<%= h(entry[:summary]) %></div></div>

data/lib/transcript_viewer/templates/entry.html.erb

@@ -0,0 +1,3 @@
+<% case entry[:type]
+when "compaction"
+%><%= render_compaction(entry) %><% when "reasoningChange" %><div class="model-change" id="<%= h(entry[:id]) %>"><%= timestamp_prefix(entry[:timestamp], inline: true) %>Reasoning: <span class="model-name"><%= h(presence(entry[:reasoning]) || "unknown") %></span></div><% when "modelChange" %><div class="model-change" id="<%= h(entry[:id]) %>"><%= timestamp_prefix(entry[:timestamp], inline: true) %>Model: <span class="model-name"><%= h(presence(entry[:modelId]) || "unknown") %></span></div><% when "message" %><%= render_message_entry(entry) %><% end %>

data/lib/transcript_viewer/templates/fetch_tool_table.html.erb

@@ -0,0 +1 @@
+<% headers = fetch_tool_result_headers(rows) %><div class="tool-output fetch-tool-result"><table><thead><tr><% headers.each do |header| %><th><%= h(header) %></th><% end %></tr></thead><tbody><% rows.each do |row| %><tr><% headers.each do |header| %><td><%= h(fetch_tool_table_value(row[header])) %></td><% end %></tr><% end %></tbody></table></div>

data/lib/transcript_viewer/templates/fork_bar.html.erb

@@ -0,0 +1 @@
+<% if @view[:forked_transcript_available] %><% if @view[:forked_transcript_enabled] %><div class="forked-transcript-bar" id="fork-boundary"><span>Showing previous messages from the fork point.</span><a class="header-toggle-btn" href="<%= h(@view[:hide_forked_transcript_href]) %>">Hide previous messages</a></div><% else %><div class="forked-transcript-bar" id="fork-boundary"><span>This transcript starts from a message with earlier parent messages.</span><a class="header-toggle-btn" href="<%= h(@view[:forked_transcript_href]) %>">Load previous messages here</a></div><% end %><% end %>

data/lib/transcript_viewer/templates/hamburger.html.erb

@@ -0,0 +1,3 @@
+<button id="hamburger" title="Open sidebar">
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="12" r="2.5"/><rect x="5" y="6" width="2" height="12"/><path d="M6 12h10c1 0 2 0 2-2V8"/></svg>
+</button>

data/lib/transcript_viewer/templates/header.html.erb

@@ -0,0 +1,5 @@
+<%
+header = @view[:header]
+stats = @view[:stats]
+models = presence(stats[:models].to_a.join(", ")) || "unknown"
+%><div class="header"><h1>Session: <%= h(header[:id] || "unknown") %></h1><div class="help-bar"><span class="help-hint">T toggle thinking · O toggle tools</span><div class="help-actions"><button type="button" class="header-toggle-btn" data-toggle="thinking" aria-pressed="false">Toggle thinking</button><button type="button" class="header-toggle-btn" data-toggle="tools" aria-pressed="false">Toggle tools</button><% if presence(@view[:export_href]) %><a class="download-json-btn" href="<%= h(@view[:export_href]) %>">↓ JSONL</a><% end %></div></div><div class="header-info"><%= info_item("Date:", format_time(header[:timestamp])) %><%= info_item("Models:", models) %><%= info_item("Messages:", message_parts(stats)) %><%= info_item("Tool Calls:", stats[:tool_calls]) %><%= info_item("Tokens:", token_parts(stats)) %><%= info_item("Cost:", "$0.000") %></div></div>

data/lib/transcript_viewer/templates/info_item.html.erb

@@ -0,0 +1 @@
+<div class="info-item"><span class="info-label"><%= h(label) %></span><span class="info-value"><%= h(value) %></span></div>

data/lib/transcript_viewer/templates/main_content.html.erb

@@ -0,0 +1,11 @@
+<%
+path_entries = @view[:path_entries]
+messages_html = if @view[:forked_transcript_enabled]
+  ancestor_count = @view[:forked_ancestor_count].to_i
+  path_entries.first(ancestor_count).map { |entry| render_entry(entry) }.join +
+    render_fork_bar +
+    path_entries.drop(ancestor_count).map { |entry| render_entry(entry) }.join
+else
+  path_entries.map { |entry| render_entry(entry) }.join
+end
+%><main id="content"><div id="header-container"><%= render_header %></div><% unless @view[:forked_transcript_enabled] %><%= render_fork_bar %><% end %><div id="messages"><%= messages_html %></div></main>

data/lib/transcript_viewer/templates/message_entry.html.erb

@@ -0,0 +1,8 @@
+<%
+msg = entry[:message]
+%><% case msg[:role]
+when "user", "developer"
+  classes = ["user-message"]
+  classes << "developer-message" if msg[:role] == "developer"
+  text = Array(msg[:content]).filter_map { |block| block[:text] if block[:type] == "text" }.join("\n")
+%><div class="<%= h(classes.join(" ")) %>" id="<%= h(entry[:id]) %>"><%= timestamp_block(entry[:timestamp]) %><% if msg[:role] == "developer" %><div class="compaction-label">[developer]</div><% end %><div class="markdown-content"><%= render_markdownish(text) %></div></div><% when "assistant" %><% blocks = Array(msg[:content]) %><div class="assistant-message" id="<%= h(entry[:id]) %>"><%= timestamp_block(entry[:timestamp]) %><%= blocks.each_with_index.map { |block, index| render_assistant_block(block, blocks, index) }.join %></div><% end %>

data/lib/transcript_viewer/templates/message_tree_content.html.erb

@@ -0,0 +1,2 @@
+<% case msg[:role]
+when "developer" %><span class="tree-muted">developer:</span> <%= h(truncate_tree_text(extract_content(msg[:content]))) %><% when "user" %><span class="tree-role-user">user:</span> <%= h(truncate_tree_text(extract_content(msg[:content]))) %><% when "assistant" %><% text = presence(truncate_tree_text(extract_content(msg[:content]))) || "(no text)" %><span class="tree-role-assistant">assistant:</span> <%= h(text) %><% when "toolResult" %><span class="tree-role-tool">[<%= h(msg[:toolName] || "tool") %>]</span> <%= h(truncate_tree_text(extract_content(msg[:content]))) %><% when "bashExecution" %><span class="tree-role-tool">[bash]:</span> <%= h(truncate_tree_text(msg[:command].to_s)) %><% else %><span class="tree-muted">[<%= h(msg[:role]) %>]</span><% end %>

data/lib/transcript_viewer/templates/script.html.erb

@@ -0,0 +1,80 @@
+<script>
+  (function(){
+    function setToggle(name, enabled){
+      document.body.classList.toggle('hide-' + name, enabled);
+      document.querySelectorAll('[data-toggle="' + name + '"]').forEach(function(button){
+        button.classList.toggle('active', enabled);
+        button.setAttribute('aria-pressed', enabled ? 'true' : 'false');
+      });
+      try { localStorage.setItem('agent-session-hide-' + name, enabled ? '1' : '0'); } catch(e) {}
+    }
+
+    function toggle(name){
+      setToggle(name, !document.body.classList.contains('hide-' + name));
+    }
+
+    ['thinking', 'tools'].forEach(function(name){
+      try { setToggle(name, localStorage.getItem('agent-session-hide-' + name) === '1'); } catch(e) {}
+    });
+
+    var sidebar = document.getElementById('sidebar');
+    var overlay = document.getElementById('sidebar-overlay');
+    var hamburger = document.getElementById('hamburger');
+    var close = document.getElementById('sidebar-close');
+    function setSidebar(open){
+      if(!sidebar || !overlay) return;
+      sidebar.classList.toggle('open', open);
+      overlay.classList.toggle('open', open);
+    }
+    if(hamburger) hamburger.addEventListener('click', function(){ setSidebar(true); });
+    if(close) close.addEventListener('click', function(){ setSidebar(false); });
+    if(overlay) overlay.addEventListener('click', function(){ setSidebar(false); });
+
+    var search = document.getElementById('tree-search');
+    var status = document.getElementById('tree-status');
+    function updateSearch(){
+      if(!search) return;
+      var q = search.value.toLowerCase();
+      var shown = 0;
+      var total = 0;
+      document.querySelectorAll('.tree-node').forEach(function(node){
+        total++;
+        var match = !q || node.textContent.toLowerCase().indexOf(q) !== -1;
+        node.style.display = match ? '' : 'none';
+        if(match) shown++;
+      });
+      if(status) status.textContent = shown + ' / ' + total + ' entries';
+    }
+    if(search) search.addEventListener('input', updateSearch);
+
+    var resizer = document.getElementById('sidebar-resizer');
+    if(resizer && sidebar){
+      var resizing = false;
+      resizer.addEventListener('mousedown', function(e){ resizing = true; document.body.classList.add('sidebar-resizing'); e.preventDefault(); });
+      document.addEventListener('mousemove', function(e){
+        if(!resizing) return;
+        var width = Math.max(240, Math.min(840, e.clientX));
+        document.documentElement.style.setProperty('--sidebar-width', width + 'px');
+      });
+      document.addEventListener('mouseup', function(){ resizing = false; document.body.classList.remove('sidebar-resizing'); });
+    }
+
+    document.addEventListener('click',function(e){
+      var toggleButton = e.target.closest('[data-toggle]');
+      if(toggleButton){
+        toggle(toggleButton.getAttribute('data-toggle'));
+        return;
+      }
+
+      var x=e.target.closest('.expandable,.thinking-block,.compaction');
+      if(x&&!getSelection().toString())x.classList.toggle('expanded');
+    });
+
+    document.addEventListener('keydown', function(e){
+      if(e.metaKey || e.ctrlKey || e.altKey) return;
+      if(e.target && ['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return;
+      if(e.key === 't' || e.key === 'T') toggle('thinking');
+      if(e.key === 'o' || e.key === 'O') toggle('tools');
+    });
+  })();
+</script>

data/lib/transcript_viewer/templates/server_tool_use.html.erb

@@ -0,0 +1,4 @@
+<%
+input = block[:input] || {}
+file_text = input[:file_text] || input["file_text"]
+%><div class="tool-execution <%= result_block ? "success" : "pending" %>"><div class="tool-command">$ <%= h(server_tool_label(block)) %></div><% if present?(file_text) %><div class="tool-output"><pre><%= h(file_text) %></pre></div><% elsif present?(input) && block[:name] != "bash_code_execution" %><div class="tool-output"><pre><%= h(pretty_json(input)) %></pre></div><% end %><% if result_block %><div class="tool-output"><pre><%= h(server_tool_result_text(result_block[:content])) %></pre></div><% end %></div>

data/lib/transcript_viewer/templates/session.html.erb

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Session Export</title>
+    <style><%= @view[:css] %></style>
+  </head>
+  <body>
+    <%= render_app %>
+    <%= render_javascript %>
+  </body>
+</html>

data/lib/transcript_viewer/templates/sidebar.html.erb

@@ -0,0 +1 @@
+<% sidebar_entries = @view[:sidebar_entries] %><aside id="sidebar"><div class="sidebar-header"><div class="sidebar-controls"><input type="text" class="sidebar-search" id="tree-search" placeholder="Search..."></div><div class="sidebar-filters"><button class="filter-btn active" type="button">Default</button><button class="filter-btn" type="button">No-tools</button><button class="filter-btn" type="button">User</button><button class="filter-btn" type="button">Labeled</button><button class="filter-btn" type="button">All</button><button class="sidebar-close" id="sidebar-close" title="Close" type="button">✕</button></div></div><div class="tree-container" id="tree-container"><%= sidebar_entries.map { |entry| render_tree_node(entry) }.join %></div><div class="tree-status" id="tree-status"><%= sidebar_entries.length %> / <%= sidebar_entries.length %> entries</div></aside>

data/lib/transcript_viewer/templates/tool_call.html.erb

@@ -0,0 +1,6 @@
+<%
+call = tool.call
+result = tool.result_entry
+args = tool.input
+command = args[:command] || args["command"] || pretty_json(args)
+%><div class="tool-execution <%= result ? "success" : "pending" %>"><div class="tool-command">$ <%= h(presence(call[:name]) || command) %></div><% if fetch_tool_call?(call) %><div class="tool-output"><pre><%= h(pretty_tool_arguments(call)) %></pre></div><% elsif present?(args) %><div class="tool-output"><pre><%= h(pretty_json(args)) %></pre></div><% end %><% if result %><% images = tool_result_images(result) %><% if images.any? %><div class="tool-images"><% images.each do |image| %><img class="tool-image" src="<%= h(image_src(image)) %>" alt="<%= h("#{call[:name]} generated image") %>"><% end %></div><% end %><% rows = fetch_tool_call?(call) ? fetch_tool_result_rows(result) : [] %><% if rows.any? %><%= render_fetch_tool_table(rows) %><% else %><% output = tool_result_text(call, result) %><% if present?(output) %><div class="tool-output"><pre><%= h(output) %></pre></div><% end %><% end %><% end %></div>