transcript-viewer 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 8a80438f994b3a96d79edff990c80ebb54f1a4b22f1c3de5a3d265d4658dfb3d
+  data.tar.gz: 4737dd99ed1c92b7bf8883af889b3845e1d1a58c6a78907df9d6892643dc91bf
+SHA512:
+  metadata.gz: 7e76bedd2db7b0aa7e51b293c698c02991579fa26556f5824f0268ba197f74a9aead0f6f2aebd9c59b1acaa5102df2048646cd2a8e08152162be1b32f2e30836
+  data.tar.gz: 3d1dc552dabef7b8ca38cfcc849d28043bfc56fceeb074792fa659e783954cb654c70670c78970aa24f7ef862352dbdbe6b55a46dabad4d8a122c25255b733dc

data/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,154 @@
+# transcript-viewer
+
+Pure Ruby renderer for LLM/agent transcript event hashes. It generates a self-contained HTML page with embedded CSS and JavaScript.
+
+## Usage
+
+```ruby
+require "transcript_viewer"
+
+html = TranscriptViewer.render(
+  session_id: 103,
+  events: [
+    {
+      id: "1",
+      parent_id: nil,
+      timestamp: Time.now.iso8601,
+      type: "message",
+      usage: nil,
+      data: {
+        role: "assistant",
+        content: [{ type: "text", text: "Hello" }],
+      },
+    },
+  ],
+  export_href: "/admin/agent_session/103/export",
+)
+
+File.write("session.html", html)
+```
+
+## Composable rendering
+
+Use `TranscriptViewer.page` when the host application owns the surrounding page chrome. The page normalizes the transcript once and can render its stylesheet, interactive transcript application, and JavaScript separately:
+
+```ruby
+page = TranscriptViewer.page(session_id: 103, events: events)
+
+page.stylesheet # CSS string
+page.app_html   # Sidebar and transcript content
+page.javascript # Script tag for transcript interactions
+page.render     # The complete standalone HTML document
+```
+
+Pass trusted host markup with `before_html:` and `after_html:` to place application controls above and below the transcript within `app_html`:
+
+```ruby
+page = TranscriptViewer.page(
+  session_id: 103,
+  events: events,
+  before_html: "<section>Run controls</section>",
+  after_html: "<form>Continue</form>",
+)
+```
+
+The host is responsible for placing the stylesheet in its document head and the JavaScript after `app_html`.
+
+## Custom tool templates
+
+Consumers can register an ERB for an exact tool name. Registration is normally done once during application startup:
+
+```ruby
+TranscriptViewer.configure do |config|
+  config.register_tool_template(
+    "fetch_pull_requests",
+    File.expand_path("templates/tools/fetch_pull_requests.html.erb", __dir__),
+  )
+end
+```
+
+A tool template receives a `tool` local and can use renderer helpers such as `h` and `pretty_json`:
+
+```erb
+<section class="pull-request-tool" data-status="<%= h(tool.status) %>">
+  <h2><%= h(tool.name) %></h2>
+  <pre><%= h(pretty_json(tool.input)) %></pre>
+
+  <% if tool.result_json %>
+    <pre><%= h(pretty_json(tool.result_json)) %></pre>
+  <% elsif tool.result_text != "" %>
+    <pre><%= h(tool.result_text) %></pre>
+  <% end %>
+</section>
+```
+
+The tool execution interface includes:
+
+- `name`, `id`, `input` (also available as `arguments`)
+- `result`, `result_content`, `result_text`, `result_json`, and `images`
+- `status`, `pending?`, `success?`, and `error?`
+- `call` and `result_entry` for access to the normalized underlying hashes
+
+Templates can also be supplied for one render. These override globally registered templates with the same tool name:
+
+```ruby
+TranscriptViewer.render(
+  session_id: 103,
+  events: events,
+  tool_templates: {
+    "fetch_pull_requests" => "/path/to/fetch_pull_requests.html.erb",
+  },
+)
+```
+
+Unregistered tools retain the built-in display. Server tools also use their existing built-in display for now.
+
+## Rails adapter example
+
+This gem does not depend on Rails or ActiveSupport. In a Rails app, keep database access in the app and pass plain hashes into the renderer:
+
+```ruby
+session = AgentSession.find(params[:session_id])
+
+events = session.agent_session_events.order(:position).map do |event|
+  {
+    id: event.event_id,
+    parent_id: event.parent_id,
+    timestamp: event.timestamp&.iso8601,
+    type: event.event_type,
+    usage: event.usage_json,
+    data: event.data_json,
+  }
+end
+
+html = TranscriptViewer.render(
+  session_id: session.id,
+  events: events,
+  export_href: admin_export_agent_session_path(session.id),
+  forked_transcript: params[:forked_transcript],
+  ancestor_lookup: lambda do |event_id|
+    event = AgentSessionEvent.find_by(event_id: event_id)
+    next nil unless event
+
+    {
+      id: event.event_id,
+      parent_id: event.parent_id,
+      timestamp: event.timestamp&.iso8601,
+      type: event.event_type,
+      usage: event.usage_json,
+      data: event.data_json,
+    }
+  end,
+)
+
+render html: html.html_safe, layout: false
+```
+
+## Supported event types
+
+- `message`
+- `reasoning_change`
+- `model_change`
+- `compaction`
+
+Message content supports text, thinking/reasoning, tool calls/results, and server tool use/results.

data/assets/dark.json

@@ -0,0 +1,85 @@
+{
+	"$schema": "https://raw.githubusercontent.com/badlogic/pi-mono/main/packages/coding-agent/src/modes/interactive/theme/theme-schema.json",
+	"name": "dark",
+	"vars": {
+		"cyan": "#00d7ff",
+		"blue": "#5f87ff",
+		"green": "#b5bd68",
+		"red": "#cc6666",
+		"yellow": "#ffff00",
+		"gray": "#808080",
+		"dimGray": "#666666",
+		"darkGray": "#505050",
+		"accent": "#8abeb7",
+		"selectedBg": "#3a3a4a",
+		"userMsgBg": "#343541",
+		"toolPendingBg": "#282832",
+		"toolSuccessBg": "#283228",
+		"toolErrorBg": "#3c2828",
+		"customMsgBg": "#2d2838"
+	},
+	"colors": {
+		"accent": "accent",
+		"border": "blue",
+		"borderAccent": "cyan",
+		"borderMuted": "darkGray",
+		"success": "green",
+		"error": "red",
+		"warning": "yellow",
+		"muted": "gray",
+		"dim": "dimGray",
+		"text": "",
+		"thinkingText": "gray",
+
+		"selectedBg": "selectedBg",
+		"userMessageBg": "userMsgBg",
+		"userMessageText": "",
+		"customMessageBg": "customMsgBg",
+		"customMessageText": "",
+		"customMessageLabel": "#9575cd",
+		"toolPendingBg": "toolPendingBg",
+		"toolSuccessBg": "toolSuccessBg",
+		"toolErrorBg": "toolErrorBg",
+		"toolTitle": "",
+		"toolOutput": "gray",
+
+		"mdHeading": "#f0c674",
+		"mdLink": "#81a2be",
+		"mdLinkUrl": "dimGray",
+		"mdCode": "accent",
+		"mdCodeBlock": "green",
+		"mdCodeBlockBorder": "gray",
+		"mdQuote": "gray",
+		"mdQuoteBorder": "gray",
+		"mdHr": "gray",
+		"mdListBullet": "accent",
+
+		"toolDiffAdded": "green",
+		"toolDiffRemoved": "red",
+		"toolDiffContext": "gray",
+
+		"syntaxComment": "#6A9955",
+		"syntaxKeyword": "#569CD6",
+		"syntaxFunction": "#DCDCAA",
+		"syntaxVariable": "#9CDCFE",
+		"syntaxString": "#CE9178",
+		"syntaxNumber": "#B5CEA8",
+		"syntaxType": "#4EC9B0",
+		"syntaxOperator": "#D4D4D4",
+		"syntaxPunctuation": "#D4D4D4",
+
+		"thinkingOff": "darkGray",
+		"thinkingMinimal": "#6e6e6e",
+		"thinkingLow": "#5f87af",
+		"thinkingMedium": "#81a2be",
+		"thinkingHigh": "#b294bb",
+		"thinkingXhigh": "#d183e8",
+
+		"bashMode": "green"
+	},
+	"export": {
+		"pageBg": "#18181e",
+		"cardBg": "#1e1e24",
+		"infoBg": "#3c3728"
+	}
+}