@mariozechner/pi-coding-agent 0.12.5 → 0.12.7

package/dist/export-html.js

@@ -1,30 +1,27 @@
 import { existsSync, readFileSync, writeFileSync } from "fs";
 import { homedir } from "os";
 import { basename } from "path";
-import { VERSION } from "./config.js";
-/**
- * TUI Color scheme (matching exact RGB values from TUI components)
- */
+import { APP_NAME, VERSION } from "./config.js";
+// ============================================================================
+// Color scheme (matching TUI)
+// ============================================================================
 const COLORS = {
-    // Backgrounds
-    userMessageBg: "rgb(52, 53, 65)", // Dark slate
-    toolPendingBg: "rgb(40, 40, 50)", // Dark blue-gray
-    toolSuccessBg: "rgb(40, 50, 40)", // Dark green
-    toolErrorBg: "rgb(60, 40, 40)", // Dark red
-    bodyBg: "rgb(24, 24, 30)", // Very dark background
-    containerBg: "rgb(30, 30, 36)", // Slightly lighter container
-    // Text colors (matching chalk colors)
-    text: "rgb(229, 229, 231)", // Light gray (close to white)
-    textDim: "rgb(161, 161, 170)", // Dimmed gray
-    cyan: "rgb(103, 232, 249)", // Cyan for paths
-    green: "rgb(34, 197, 94)", // Green for success
-    red: "rgb(239, 68, 68)", // Red for errors
-    yellow: "rgb(234, 179, 8)", // Yellow for warnings
-    italic: "rgb(161, 161, 170)", // Gray italic for thinking
+    userMessageBg: "rgb(52, 53, 65)",
+    toolPendingBg: "rgb(40, 40, 50)",
+    toolSuccessBg: "rgb(40, 50, 40)",
+    toolErrorBg: "rgb(60, 40, 40)",
+    bodyBg: "rgb(24, 24, 30)",
+    containerBg: "rgb(30, 30, 36)",
+    text: "rgb(229, 229, 231)",
+    textDim: "rgb(161, 161, 170)",
+    cyan: "rgb(103, 232, 249)",
+    green: "rgb(34, 197, 94)",
+    red: "rgb(239, 68, 68)",
+    yellow: "rgb(234, 179, 8)",
 };
-/**
- * Escape HTML special characters
- */
+// ============================================================================
+// Utility functions
+// ============================================================================
 function escapeHtml(text) {
     return text
         .replace(/&/g, "&")
@@ -33,216 +30,316 @@ function escapeHtml(text) {
         .replace(/"/g, """)
         .replace(/'/g, "'");
 }
-/**
- * Shorten path with tilde notation
- */
 function shortenPath(path) {
     const home = homedir();
-    if (path.startsWith(home)) {
-        return "~" + path.slice(home.length);
-    }
-    return path;
+    return path.startsWith(home) ? "~" + path.slice(home.length) : path;
 }
-/**
- * Replace tabs with 3 spaces
- */
 function replaceTabs(text) {
     return text.replace(/\t/g, "   ");
 }
-/**
- * Format tool execution matching TUI ToolExecutionComponent
- */
-function formatToolExecution(toolName, args, result) {
-    let html = "";
-    const isError = result?.isError || false;
-    const bgColor = result ? (isError ? COLORS.toolErrorBg : COLORS.toolSuccessBg) : COLORS.toolPendingBg;
-    // Get text output from result
-    const getTextOutput = () => {
-        if (!result)
-            return "";
-        const textBlocks = result.content.filter((c) => c.type === "text");
-        return textBlocks.map((c) => c.text).join("\n");
+function formatTimestamp(timestamp) {
+    if (!timestamp)
+        return "";
+    const date = new Date(typeof timestamp === "string" ? timestamp : timestamp);
+    return date.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+// ============================================================================
+// Parsing functions
+// ============================================================================
+function parseSessionManagerFormat(lines) {
+    const data = {
+        sessionId: "unknown",
+        timestamp: new Date().toISOString(),
+        modelsUsed: new Set(),
+        messages: [],
+        toolResultsMap: new Map(),
+        sessionEvents: [],
+        tokenStats: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
+        costStats: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
     };
-    // Format based on tool type (matching TUI logic exactly)
-    if (toolName === "bash") {
-        const command = args?.command || "";
-        html = `<div class="tool-command">$ ${escapeHtml(command || "...")}</div>`;
-        if (result) {
-            const output = getTextOutput().trim();
-            if (output) {
-                const lines = output.split("\n");
-                const maxLines = 5;
-                const displayLines = lines.slice(0, maxLines);
-                const remaining = lines.length - maxLines;
-                if (remaining > 0) {
-                    // Truncated output - make it expandable
-                    html += '<div class="tool-output expandable" onclick="this.classList.toggle(\'expanded\')">';
-                    html += '<div class="output-preview">';
-                    for (const line of displayLines) {
-                        html += `<div>${escapeHtml(line)}</div>`;
-                    }
-                    html += `<div class="expand-hint">... (${remaining} more lines) - click to expand</div>`;
-                    html += "</div>";
-                    html += '<div class="output-full">';
-                    for (const line of lines) {
-                        html += `<div>${escapeHtml(line)}</div>`;
-                    }
-                    html += "</div>";
-                    html += "</div>";
+    for (const line of lines) {
+        let entry;
+        try {
+            entry = JSON.parse(line);
+        }
+        catch {
+            continue;
+        }
+        switch (entry.type) {
+            case "session":
+                data.sessionId = entry.id || "unknown";
+                data.timestamp = entry.timestamp || data.timestamp;
+                data.systemPrompt = entry.systemPrompt;
+                if (entry.modelId) {
+                    const modelInfo = entry.provider ? `${entry.provider}/${entry.modelId}` : entry.modelId;
+                    data.modelsUsed.add(modelInfo);
+                }
+                break;
+            case "message": {
+                const message = entry.message;
+                data.messages.push(message);
+                data.sessionEvents.push({
+                    type: "message",
+                    message,
+                    timestamp: entry.timestamp,
+                });
+                if (message.role === "toolResult") {
+                    const toolResult = message;
+                    data.toolResultsMap.set(toolResult.toolCallId, toolResult);
                 }
-                else {
-                    // Short output - show all
-                    html += '<div class="tool-output">';
-                    for (const line of displayLines) {
-                        html += `<div>${escapeHtml(line)}</div>`;
+                else if (message.role === "assistant") {
+                    const assistantMsg = message;
+                    if (assistantMsg.usage) {
+                        data.tokenStats.input += assistantMsg.usage.input || 0;
+                        data.tokenStats.output += assistantMsg.usage.output || 0;
+                        data.tokenStats.cacheRead += assistantMsg.usage.cacheRead || 0;
+                        data.tokenStats.cacheWrite += assistantMsg.usage.cacheWrite || 0;
+                        if (assistantMsg.usage.cost) {
+                            data.costStats.input += assistantMsg.usage.cost.input || 0;
+                            data.costStats.output += assistantMsg.usage.cost.output || 0;
+                            data.costStats.cacheRead += assistantMsg.usage.cost.cacheRead || 0;
+                            data.costStats.cacheWrite += assistantMsg.usage.cost.cacheWrite || 0;
+                        }
                     }
-                    html += "</div>";
                 }
+                break;
             }
+            case "model_change":
+                data.sessionEvents.push({
+                    type: "model_change",
+                    provider: entry.provider,
+                    modelId: entry.modelId,
+                    timestamp: entry.timestamp,
+                });
+                if (entry.modelId) {
+                    const modelInfo = entry.provider ? `${entry.provider}/${entry.modelId}` : entry.modelId;
+                    data.modelsUsed.add(modelInfo);
+                }
+                break;
+            case "compaction":
+                data.sessionEvents.push({
+                    type: "compaction",
+                    timestamp: entry.timestamp,
+                    summary: entry.summary,
+                    tokensBefore: entry.tokensBefore,
+                });
+                break;
         }
     }
-    else if (toolName === "read") {
-        const path = shortenPath(args?.file_path || args?.path || "");
-        html = `<div class="tool-header"><span class="tool-name">read</span> <span class="tool-path">${escapeHtml(path || "...")}</span></div>`;
-        if (result) {
-            const output = getTextOutput();
-            const lines = output.split("\n");
-            const maxLines = 10;
-            const displayLines = lines.slice(0, maxLines);
-            const remaining = lines.length - maxLines;
-            if (remaining > 0) {
-                // Truncated output - make it expandable
-                html += '<div class="tool-output expandable" onclick="this.classList.toggle(\'expanded\')">';
-                html += '<div class="output-preview">';
-                for (const line of displayLines) {
-                    html += `<div>${escapeHtml(replaceTabs(line))}</div>`;
+    return data;
+}
+function parseStreamingEventFormat(lines) {
+    const data = {
+        sessionId: "unknown",
+        timestamp: new Date().toISOString(),
+        modelsUsed: new Set(),
+        messages: [],
+        toolResultsMap: new Map(),
+        sessionEvents: [],
+        tokenStats: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
+        costStats: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
+        isStreamingFormat: true,
+    };
+    let timestampSet = false;
+    for (const line of lines) {
+        let entry;
+        try {
+            entry = JSON.parse(line);
+        }
+        catch {
+            continue;
+        }
+        if (entry.type === "message_end" && entry.message) {
+            const msg = entry.message;
+            data.messages.push(msg);
+            data.sessionEvents.push({
+                type: "message",
+                message: msg,
+                timestamp: msg.timestamp,
+            });
+            if (msg.role === "toolResult") {
+                const toolResult = msg;
+                data.toolResultsMap.set(toolResult.toolCallId, toolResult);
+            }
+            else if (msg.role === "assistant") {
+                const assistantMsg = msg;
+                if (assistantMsg.model) {
+                    const modelInfo = assistantMsg.provider
+                        ? `${assistantMsg.provider}/${assistantMsg.model}`
+                        : assistantMsg.model;
+                    data.modelsUsed.add(modelInfo);
                 }
-                html += `<div class="expand-hint">... (${remaining} more lines) - click to expand</div>`;
-                html += "</div>";
-                html += '<div class="output-full">';
-                for (const line of lines) {
-                    html += `<div>${escapeHtml(replaceTabs(line))}</div>`;
+                if (assistantMsg.usage) {
+                    data.tokenStats.input += assistantMsg.usage.input || 0;
+                    data.tokenStats.output += assistantMsg.usage.output || 0;
+                    data.tokenStats.cacheRead += assistantMsg.usage.cacheRead || 0;
+                    data.tokenStats.cacheWrite += assistantMsg.usage.cacheWrite || 0;
+                    if (assistantMsg.usage.cost) {
+                        data.costStats.input += assistantMsg.usage.cost.input || 0;
+                        data.costStats.output += assistantMsg.usage.cost.output || 0;
+                        data.costStats.cacheRead += assistantMsg.usage.cost.cacheRead || 0;
+                        data.costStats.cacheWrite += assistantMsg.usage.cost.cacheWrite || 0;
+                    }
                 }
-                html += "</div>";
-                html += "</div>";
             }
-            else {
-                // Short output - show all
-                html += '<div class="tool-output">';
-                for (const line of displayLines) {
-                    html += `<div>${escapeHtml(replaceTabs(line))}</div>`;
-                }
-                html += "</div>";
+            if (!timestampSet && msg.timestamp) {
+                data.timestamp = new Date(msg.timestamp).toISOString();
+                timestampSet = true;
             }
         }
     }
-    else if (toolName === "write") {
-        const path = shortenPath(args?.file_path || args?.path || "");
-        const fileContent = args?.content || "";
-        const lines = fileContent ? fileContent.split("\n") : [];
-        const totalLines = lines.length;
-        html = `<div class="tool-header"><span class="tool-name">write</span> <span class="tool-path">${escapeHtml(path || "...")}</span>`;
-        if (totalLines > 10) {
-            html += ` <span class="line-count">(${totalLines} lines)</span>`;
+    data.sessionId = `stream-${data.timestamp.replace(/[:.]/g, "-")}`;
+    return data;
+}
+function detectFormat(lines) {
+    for (const line of lines) {
+        try {
+            const entry = JSON.parse(line);
+            if (entry.type === "session")
+                return "session-manager";
+            if (entry.type === "agent_start" || entry.type === "message_start" || entry.type === "turn_start") {
+                return "streaming-events";
+            }
         }
-        html += "</div>";
-        if (fileContent) {
-            const maxLines = 10;
-            const displayLines = lines.slice(0, maxLines);
-            const remaining = lines.length - maxLines;
-            if (remaining > 0) {
-                // Truncated output - make it expandable
-                html += '<div class="tool-output expandable" onclick="this.classList.toggle(\'expanded\')">';
-                html += '<div class="output-preview">';
-                for (const line of displayLines) {
-                    html += `<div>${escapeHtml(replaceTabs(line))}</div>`;
-                }
-                html += `<div class="expand-hint">... (${remaining} more lines) - click to expand</div>`;
-                html += "</div>";
-                html += '<div class="output-full">';
-                for (const line of lines) {
-                    html += `<div>${escapeHtml(replaceTabs(line))}</div>`;
-                }
-                html += "</div>";
-                html += "</div>";
+        catch { }
+    }
+    return "unknown";
+}
+function parseSessionFile(content) {
+    const lines = content
+        .trim()
+        .split("\n")
+        .filter((l) => l.trim());
+    if (lines.length === 0) {
+        throw new Error("Empty session file");
+    }
+    const format = detectFormat(lines);
+    if (format === "unknown") {
+        throw new Error("Unknown session file format");
+    }
+    return format === "session-manager" ? parseSessionManagerFormat(lines) : parseStreamingEventFormat(lines);
+}
+// ============================================================================
+// HTML formatting functions
+// ============================================================================
+function formatToolExecution(toolName, args, result) {
+    let html = "";
+    const isError = result?.isError || false;
+    const bgColor = result ? (isError ? COLORS.toolErrorBg : COLORS.toolSuccessBg) : COLORS.toolPendingBg;
+    const getTextOutput = () => {
+        if (!result)
+            return "";
+        const textBlocks = result.content.filter((c) => c.type === "text");
+        return textBlocks.map((c) => c.text).join("\n");
+    };
+    const formatExpandableOutput = (lines, maxLines) => {
+        const displayLines = lines.slice(0, maxLines);
+        const remaining = lines.length - maxLines;
+        if (remaining > 0) {
+            let out = '<div class="tool-output expandable" onclick="this.classList.toggle(\'expanded\')">';
+            out += '<div class="output-preview">';
+            for (const line of displayLines) {
+                out += `<div>${escapeHtml(replaceTabs(line))}</div>`;
             }
-            else {
-                // Short output - show all
-                html += '<div class="tool-output">';
-                for (const line of displayLines) {
-                    html += `<div>${escapeHtml(replaceTabs(line))}</div>`;
-                }
-                html += "</div>";
+            out += `<div class="expand-hint">... (${remaining} more lines) - click to expand</div>`;
+            out += "</div>";
+            out += '<div class="output-full">';
+            for (const line of lines) {
+                out += `<div>${escapeHtml(replaceTabs(line))}</div>`;
             }
+            out += "</div></div>";
+            return out;
         }
-        if (result) {
-            const output = getTextOutput().trim();
-            if (output) {
-                html += `<div class="tool-output"><div>${escapeHtml(output)}</div></div>`;
-            }
+        let out = '<div class="tool-output">';
+        for (const line of displayLines) {
+            out += `<div>${escapeHtml(replaceTabs(line))}</div>`;
         }
-    }
-    else if (toolName === "edit") {
-        const path = shortenPath(args?.file_path || args?.path || "");
-        html = `<div class="tool-header"><span class="tool-name">edit</span> <span class="tool-path">${escapeHtml(path || "...")}</span></div>`;
-        // Show diff if available from result.details.diff
-        if (result?.details?.diff) {
-            const diffLines = result.details.diff.split("\n");
-            html += '<div class="tool-diff">';
-            for (const line of diffLines) {
-                if (line.startsWith("+")) {
-                    html += `<div class="diff-line-new">${escapeHtml(line)}</div>`;
-                }
-                else if (line.startsWith("-")) {
-                    html += `<div class="diff-line-old">${escapeHtml(line)}</div>`;
+        out += "</div>";
+        return out;
+    };
+    switch (toolName) {
+        case "bash": {
+            const command = args?.command || "";
+            html = `<div class="tool-command">$ ${escapeHtml(command || "...")}</div>`;
+            if (result) {
+                const output = getTextOutput().trim();
+                if (output) {
+                    html += formatExpandableOutput(output.split("\n"), 5);
                 }
-                else {
-                    html += `<div class="diff-line-context">${escapeHtml(line)}</div>`;
+            }
+            break;
+        }
+        case "read": {
+            const path = shortenPath(args?.file_path || args?.path || "");
+            html = `<div class="tool-header"><span class="tool-name">read</span> <span class="tool-path">${escapeHtml(path || "...")}</span></div>`;
+            if (result) {
+                const output = getTextOutput();
+                if (output) {
+                    html += formatExpandableOutput(output.split("\n"), 10);
                 }
             }
+            break;
+        }
+        case "write": {
+            const path = shortenPath(args?.file_path || args?.path || "");
+            const fileContent = args?.content || "";
+            const lines = fileContent ? fileContent.split("\n") : [];
+            html = `<div class="tool-header"><span class="tool-name">write</span> <span class="tool-path">${escapeHtml(path || "...")}</span>`;
+            if (lines.length > 10) {
+                html += ` <span class="line-count">(${lines.length} lines)</span>`;
+            }
             html += "</div>";
-        }
-        if (result) {
-            const output = getTextOutput().trim();
-            if (output) {
-                html += `<div class="tool-output"><div>${escapeHtml(output)}</div></div>`;
+            if (fileContent) {
+                html += formatExpandableOutput(lines, 10);
             }
-        }
-    }
-    else {
-        // Generic tool
-        html = `<div class="tool-header"><span class="tool-name">${escapeHtml(toolName)}</span></div>`;
-        html += `<div class="tool-output"><pre>${escapeHtml(JSON.stringify(args, null, 2))}</pre></div>`;
-        if (result) {
-            const output = getTextOutput();
-            if (output) {
-                html += `<div class="tool-output"><div>${escapeHtml(output)}</div></div>`;
+            if (result) {
+                const output = getTextOutput().trim();
+                if (output) {
+                    html += `<div class="tool-output"><div>${escapeHtml(output)}</div></div>`;
+                }
+            }
+            break;
+        }
+        case "edit": {
+            const path = shortenPath(args?.file_path || args?.path || "");
+            html = `<div class="tool-header"><span class="tool-name">edit</span> <span class="tool-path">${escapeHtml(path || "...")}</span></div>`;
+            if (result?.details?.diff) {
+                const diffLines = result.details.diff.split("\n");
+                html += '<div class="tool-diff">';
+                for (const line of diffLines) {
+                    if (line.startsWith("+")) {
+                        html += `<div class="diff-line-new">${escapeHtml(line)}</div>`;
+                    }
+                    else if (line.startsWith("-")) {
+                        html += `<div class="diff-line-old">${escapeHtml(line)}</div>`;
+                    }
+                    else {
+                        html += `<div class="diff-line-context">${escapeHtml(line)}</div>`;
+                    }
+                }
+                html += "</div>";
+            }
+            if (result) {
+                const output = getTextOutput().trim();
+                if (output) {
+                    html += `<div class="tool-output"><div>${escapeHtml(output)}</div></div>`;
+                }
+            }
+            break;
+        }
+        default: {
+            html = `<div class="tool-header"><span class="tool-name">${escapeHtml(toolName)}</span></div>`;
+            html += `<div class="tool-output"><pre>${escapeHtml(JSON.stringify(args, null, 2))}</pre></div>`;
+            if (result) {
+                const output = getTextOutput();
+                if (output) {
+                    html += `<div class="tool-output"><div>${escapeHtml(output)}</div></div>`;
+                }
             }
         }
     }
     return { html, bgColor };
 }
-/**
- * Format timestamp for display
- */
-function formatTimestamp(timestamp) {
-    if (!timestamp)
-        return "";
-    const date = new Date(typeof timestamp === "string" ? timestamp : timestamp);
-    return date.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit" });
-}
-/**
- * Format model change event
- */
-function formatModelChange(event) {
-    const timestamp = formatTimestamp(event.timestamp);
-    const timestampHtml = timestamp ? `<div class="message-timestamp">${timestamp}</div>` : "";
-    const modelInfo = `${event.provider}/${event.modelId}`;
-    return `<div class="model-change">${timestampHtml}<div class="model-change-text">Switched to model: <span class="model-name">${escapeHtml(modelInfo)}</span></div></div>`;
-}
-/**
- * Format a message as HTML (matching TUI component styling)
- */
 function formatMessage(message, toolResultsMap) {
     let html = "";
     const timestamp = message.timestamp;
@@ -264,7 +361,6 @@ function formatMessage(message, toolResultsMap) {
     else if (message.role === "assistant") {
         const assistantMsg = message;
         html += timestampHtml ? `<div class="assistant-message">${timestampHtml}` : "";
-        // Render text and thinking content
         for (const content of assistantMsg.content) {
             if (content.type === "text" && content.text.trim()) {
                 html += `<div class="assistant-text">${escapeHtml(content.text.trim()).replace(/\n/g, "<br>")}</div>`;
@@ -273,7 +369,6 @@ function formatMessage(message, toolResultsMap) {
                 html += `<div class="thinking-text">${escapeHtml(content.thinking.trim()).replace(/\n/g, "<br>")}</div>`;
             }
         }
-        // Render tool calls with their results
         for (const content of assistantMsg.content) {
             if (content.type === "toolCall") {
                 const toolResult = toolResultsMap.get(content.id);
@@ -281,158 +376,121 @@ function formatMessage(message, toolResultsMap) {
                 html += `<div class="tool-execution" style="background-color: ${bgColor}">${toolHtml}</div>`;
             }
         }
-        // Show error/abort status if no tool calls
         const hasToolCalls = assistantMsg.content.some((c) => c.type === "toolCall");
         if (!hasToolCalls) {
             if (assistantMsg.stopReason === "aborted") {
                 html += '<div class="error-text">Aborted</div>';
             }
             else if (assistantMsg.stopReason === "error") {
-                const errorMsg = assistantMsg.errorMessage || "Unknown error";
-                html += `<div class="error-text">Error: ${escapeHtml(errorMsg)}</div>`;
+                html += `<div class="error-text">Error: ${escapeHtml(assistantMsg.errorMessage || "Unknown error")}</div>`;
             }
         }
-        // Close the assistant message wrapper if we opened one
         if (timestampHtml) {
             html += "</div>";
         }
     }
     return html;
 }
-/**
- * Export session to a self-contained HTML file matching TUI visual style
- */
-export function exportSessionToHtml(sessionManager, state, outputPath) {
-    const sessionFile = sessionManager.getSessionFile();
-    const timestamp = new Date().toISOString();
-    // Use pi-session- prefix + session filename + .html if no output path provided
-    if (!outputPath) {
-        const sessionBasename = basename(sessionFile, ".jsonl");
-        outputPath = `pi-session-${sessionBasename}.html`;
-    }
-    // Read and parse session data
-    const sessionContent = readFileSync(sessionFile, "utf8");
-    const lines = sessionContent.trim().split("\n");
-    let sessionHeader = null;
-    const messages = [];
-    const toolResultsMap = new Map();
-    const sessionEvents = []; // Track all events including model changes
-    const modelsUsed = new Set(); // Track unique models used
-    // Cumulative token and cost stats
-    const tokenStats = {
-        input: 0,
-        output: 0,
-        cacheRead: 0,
-        cacheWrite: 0,
-    };
-    const costStats = {
-        input: 0,
-        output: 0,
-        cacheRead: 0,
-        cacheWrite: 0,
-    };
-    for (const line of lines) {
-        try {
-            const entry = JSON.parse(line);
-            if (entry.type === "session") {
-                sessionHeader = entry;
-                // Track initial model from session header
-                if (entry.modelId) {
-                    const modelInfo = entry.provider ? `${entry.provider}/${entry.modelId}` : entry.modelId;
-                    modelsUsed.add(modelInfo);
-                }
-            }
-            else if (entry.type === "message") {
-                messages.push(entry.message);
-                sessionEvents.push(entry);
-                // Build map of tool call ID to result
-                if (entry.message.role === "toolResult") {
-                    toolResultsMap.set(entry.message.toolCallId, entry.message);
-                }
-                // Accumulate token and cost stats from assistant messages
-                if (entry.message.role === "assistant" && entry.message.usage) {
-                    const usage = entry.message.usage;
-                    tokenStats.input += usage.input || 0;
-                    tokenStats.output += usage.output || 0;
-                    tokenStats.cacheRead += usage.cacheRead || 0;
-                    tokenStats.cacheWrite += usage.cacheWrite || 0;
-                    if (usage.cost) {
-                        costStats.input += usage.cost.input || 0;
-                        costStats.output += usage.cost.output || 0;
-                        costStats.cacheRead += usage.cost.cacheRead || 0;
-                        costStats.cacheWrite += usage.cost.cacheWrite || 0;
-                    }
-                }
-            }
-            else if (entry.type === "model_change") {
-                sessionEvents.push(entry);
-                // Track model from model change event
-                if (entry.modelId) {
-                    const modelInfo = entry.provider ? `${entry.provider}/${entry.modelId}` : entry.modelId;
-                    modelsUsed.add(modelInfo);
-                }
-            }
-        }
-        catch {
-            // Skip malformed lines
-        }
-    }
-    // Calculate message stats (matching session command)
-    const userMessages = messages.filter((m) => m.role === "user").length;
-    const assistantMessages = messages.filter((m) => m.role === "assistant").length;
-    const toolResultMessages = messages.filter((m) => m.role === "toolResult").length;
-    const totalMessages = messages.length;
-    // Count tool calls from assistant messages
+function formatModelChange(event) {
+    const timestamp = formatTimestamp(event.timestamp);
+    const timestampHtml = timestamp ? `<div class="message-timestamp">${timestamp}</div>` : "";
+    const modelInfo = `${event.provider}/${event.modelId}`;
+    return `<div class="model-change">${timestampHtml}<div class="model-change-text">Switched to model: <span class="model-name">${escapeHtml(modelInfo)}</span></div></div>`;
+}
+function formatCompaction(event) {
+    const timestamp = formatTimestamp(event.timestamp);
+    const timestampHtml = timestamp ? `<div class="message-timestamp">${timestamp}</div>` : "";
+    const summaryHtml = escapeHtml(event.summary).replace(/\n/g, "<br>");
+    return `<div class="compaction-container">
+		<div class="compaction-header" onclick="this.parentElement.classList.toggle('expanded')">
+			${timestampHtml}
+			<div class="compaction-header-row">
+				<span class="compaction-toggle">▶</span>
+				<span class="compaction-title">Context compacted from ${event.tokensBefore.toLocaleString()} tokens</span>
+				<span class="compaction-hint">(click to expand summary)</span>
+			</div>
+		</div>
+		<div class="compaction-content">
+			<div class="compaction-summary">
+				<div class="compaction-summary-header">Summary sent to model</div>
+				<div class="compaction-summary-content">${summaryHtml}</div>
+			</div>
+		</div>
+	</div>`;
+}
+// ============================================================================
+// HTML generation
+// ============================================================================
+function generateHtml(data, filename) {
+    const userMessages = data.messages.filter((m) => m.role === "user").length;
+    const assistantMessages = data.messages.filter((m) => m.role === "assistant").length;
     let toolCallsCount = 0;
-    for (const message of messages) {
+    for (const message of data.messages) {
         if (message.role === "assistant") {
-            const assistantMsg = message;
-            toolCallsCount += assistantMsg.content.filter((c) => c.type === "toolCall").length;
+            toolCallsCount += message.content.filter((c) => c.type === "toolCall").length;
         }
     }
-    // Get last assistant message for context percentage calculation (skip aborted messages)
-    const lastAssistantMessage = messages
+    const lastAssistantMessage = data.messages
         .slice()
         .reverse()
         .find((m) => m.role === "assistant" && m.stopReason !== "aborted");
-    // Calculate context percentage from last message (input + output + cacheRead + cacheWrite)
     const contextTokens = lastAssistantMessage
         ? lastAssistantMessage.usage.input +
             lastAssistantMessage.usage.output +
             lastAssistantMessage.usage.cacheRead +
             lastAssistantMessage.usage.cacheWrite
         : 0;
-    // Get the model info from the last assistant message
-    const lastModel = lastAssistantMessage?.model || state.model?.id || "unknown";
+    const lastModel = lastAssistantMessage?.model || "unknown";
     const lastProvider = lastAssistantMessage?.provider || "";
     const lastModelInfo = lastProvider ? `${lastProvider}/${lastModel}` : lastModel;
-    const contextWindow = state.model?.contextWindow || 0;
-    const contextPercent = contextWindow > 0 ? ((contextTokens / contextWindow) * 100).toFixed(1) : "0.0";
-    // Generate messages HTML (including model changes in chronological order)
+    const contextWindow = data.contextWindow || 0;
+    const contextPercent = contextWindow > 0 ? ((contextTokens / contextWindow) * 100).toFixed(1) : null;
     let messagesHtml = "";
-    for (const event of sessionEvents) {
-        if (event.type === "message" && event.message.role !== "toolResult") {
-            // Skip toolResult messages as they're rendered with their tool calls
-            messagesHtml += formatMessage(event.message, toolResultsMap);
-        }
-        else if (event.type === "model_change") {
-            messagesHtml += formatModelChange(event);
+    for (const event of data.sessionEvents) {
+        switch (event.type) {
+            case "message":
+                if (event.message.role !== "toolResult") {
+                    messagesHtml += formatMessage(event.message, data.toolResultsMap);
+                }
+                break;
+            case "model_change":
+                messagesHtml += formatModelChange(event);
+                break;
+            case "compaction":
+                messagesHtml += formatCompaction(event);
+                break;
         }
     }
-    // Generate HTML (matching TUI aesthetic)
-    const html = `<!DOCTYPE html>
+    const systemPromptHtml = data.systemPrompt
+        ? `<div class="system-prompt">
+            <div class="system-prompt-header">System Prompt</div>
+            <div class="system-prompt-content">${escapeHtml(data.systemPrompt)}</div>
+        </div>`
+        : "";
+    const toolsHtml = data.tools
+        ? `<div class="tools-list">
+            <div class="tools-header">Available Tools</div>
+            <div class="tools-content">
+                ${data.tools.map((tool) => `<div class="tool-item"><span class="tool-item-name">${escapeHtml(tool.name)}</span> - ${escapeHtml(tool.description)}</div>`).join("")}
+            </div>
+        </div>`
+        : "";
+    const streamingNotice = data.isStreamingFormat
+        ? `<div class="streaming-notice">
+            <em>Note: This session was reconstructed from raw agent event logs, which do not contain system prompt or tool definitions.</em>
+        </div>`
+        : "";
+    const contextUsageText = contextPercent
+        ? `${contextTokens.toLocaleString()} / ${contextWindow.toLocaleString()} tokens (${contextPercent}%) - ${escapeHtml(lastModelInfo)}`
+        : `${contextTokens.toLocaleString()} tokens (last turn) - ${escapeHtml(lastModelInfo)}`;
+    return `<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Session Export - ${basename(sessionFile)}</title>
+    <title>Session Export - ${escapeHtml(filename)}</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
+        * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
             font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
             font-size: 12px;
@@ -441,69 +499,26 @@ export function exportSessionToHtml(sessionManager, state, outputPath) {
             background: ${COLORS.bodyBg};
             padding: 24px;
         }
-
-        .container {
-            max-width: 700px;
-            margin: 0 auto;
-        }
-
+        .container { max-width: 700px; margin: 0 auto; }
         .header {
             margin-bottom: 24px;
             padding: 16px;
             background: ${COLORS.containerBg};
             border-radius: 4px;
         }
-
         .header h1 {
             font-size: 14px;
             font-weight: bold;
             margin-bottom: 12px;
             color: ${COLORS.cyan};
         }
-
-        .header-info {
-            display: flex;
-            flex-direction: column;
-            gap: 3px;
-            font-size: 11px;
-        }
-
-        .info-item {
-            color: ${COLORS.textDim};
-            display: flex;
-            align-items: baseline;
-        }
-
-        .info-label {
-            font-weight: 600;
-            margin-right: 8px;
-            min-width: 100px;
-        }
-
-        .info-value {
-            color: ${COLORS.text};
-            flex: 1;
-        }
-
-        .info-value.cost {
-            font-family: 'SF Mono', monospace;
-        }
-
-        .messages {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        /* Message timestamp */
-        .message-timestamp {
-            font-size: 10px;
-            color: ${COLORS.textDim};
-            margin-bottom: 4px;
-            opacity: 0.8;
-        }
-
-        /* User message - matching TUI UserMessageComponent */
+        .header-info { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
+        .info-item { color: ${COLORS.textDim}; display: flex; align-items: baseline; }
+        .info-label { font-weight: 600; margin-right: 8px; min-width: 100px; }
+        .info-value { color: ${COLORS.text}; flex: 1; }
+        .info-value.cost { font-family: 'SF Mono', monospace; }
+        .messages { display: flex; flex-direction: column; gap: 16px; }
+        .message-timestamp { font-size: 10px; color: ${COLORS.textDim}; margin-bottom: 4px; opacity: 0.8; }
         .user-message {
             background: ${COLORS.userMessageBg};
             padding: 12px 16px;
@@ -513,1011 +528,162 @@ export function exportSessionToHtml(sessionManager, state, outputPath) {
             overflow-wrap: break-word;
             word-break: break-word;
         }
-
-        /* Assistant message wrapper */
-        .assistant-message {
-            padding: 0;
-        }
-
-        /* Assistant text - matching TUI AssistantMessageComponent */
-        .assistant-text {
+        .assistant-message { padding: 0; }
+        .assistant-text, .thinking-text {
             padding: 12px 16px;
             white-space: pre-wrap;
             word-wrap: break-word;
             overflow-wrap: break-word;
             word-break: break-word;
         }
-
-        /* Thinking text - gray italic */
-        .thinking-text {
-            padding: 12px 16px;
-            color: ${COLORS.italic};
-            font-style: italic;
+        .thinking-text { color: ${COLORS.textDim}; font-style: italic; }
+        .model-change { padding: 8px 16px; background: rgb(40, 40, 50); border-radius: 4px; }
+        .model-change-text { color: ${COLORS.textDim}; font-size: 11px; }
+        .model-name { color: ${COLORS.cyan}; font-weight: bold; }
+        .compaction-container { background: rgb(60, 55, 35); border-radius: 4px; overflow: hidden; }
+        .compaction-header { padding: 12px 16px; cursor: pointer; }
+        .compaction-header:hover { background: rgba(255, 255, 255, 0.05); }
+        .compaction-header-row { display: flex; align-items: center; gap: 8px; }
+        .compaction-toggle { color: ${COLORS.cyan}; font-size: 10px; transition: transform 0.2s; }
+        .compaction-container.expanded .compaction-toggle { transform: rotate(90deg); }
+        .compaction-title { color: ${COLORS.text}; font-weight: bold; }
+        .compaction-hint { color: ${COLORS.textDim}; font-size: 11px; }
+        .compaction-content { display: none; padding: 0 16px 16px 16px; }
+        .compaction-container.expanded .compaction-content { display: block; }
+        .compaction-summary { background: rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 12px; }
+        .compaction-summary-header { font-weight: bold; color: ${COLORS.cyan}; margin-bottom: 8px; font-size: 11px; }
+        .compaction-summary-content { color: ${COLORS.text}; white-space: pre-wrap; word-wrap: break-word; }
+        .tool-execution { padding: 12px 16px; border-radius: 4px; margin-top: 8px; }
+        .tool-header, .tool-name { font-weight: bold; }
+        .tool-path { color: ${COLORS.cyan}; word-break: break-all; }
+        .line-count { color: ${COLORS.textDim}; }
+        .tool-command { font-weight: bold; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
+        .tool-output {
+            margin-top: 12px;
+            color: ${COLORS.textDim};
             white-space: pre-wrap;
             word-wrap: break-word;
             overflow-wrap: break-word;
             word-break: break-word;
-        }
-
-        /* Model change */
-        .model-change {
-            padding: 8px 16px;
-            background: rgb(40, 40, 50);
-            border-radius: 4px;
-        }
-
-        .model-change-text {
-            color: ${COLORS.textDim};
-            font-size: 11px;
-        }
-
-        .model-name {
-            color: ${COLORS.cyan};
-            font-weight: bold;
-        }
-
-        /* Tool execution - matching TUI ToolExecutionComponent */
-        .tool-execution {
-            padding: 12px 16px;
-            border-radius: 4px;
-            margin-top: 8px;
-        }
-
-        .tool-header {
-            font-weight: bold;
-        }
-
-        .tool-name {
-            font-weight: bold;
-        }
-
-        .tool-path {
-            color: ${COLORS.cyan};
-            word-break: break-all;
-        }
-
-        .line-count {
-            color: ${COLORS.textDim};
-        }
-
-        .tool-command {
-            font-weight: bold;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            word-break: break-word;
-        }
-
-        .tool-output {
-            margin-top: 12px;
-            color: ${COLORS.textDim};
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            word-break: break-word;
-            font-family: inherit;
-            overflow-x: auto;
-        }
-
-        .tool-output > div {
-            line-height: 1.4;
-        }
-
-        .tool-output pre {
-            margin: 0;
-            font-family: inherit;
-            color: inherit;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-        }
-
-        /* Expandable tool output */
-        .tool-output.expandable {
-            cursor: pointer;
-        }
-
-        .tool-output.expandable:hover {
-            opacity: 0.9;
-        }
-
-        .tool-output.expandable .output-full {
-            display: none;
-        }
-
-        .tool-output.expandable.expanded .output-preview {
-            display: none;
-        }
-
-        .tool-output.expandable.expanded .output-full {
-            display: block;
-        }
-
-        .expand-hint {
-            color: ${COLORS.cyan};
-            font-style: italic;
-            margin-top: 4px;
-        }
-
-        /* System prompt section */
-        .system-prompt {
-            background: rgb(60, 55, 40);
-            padding: 12px 16px;
-            border-radius: 4px;
-            margin-bottom: 16px;
-        }
-
-        .system-prompt-header {
-            font-weight: bold;
-            color: ${COLORS.yellow};
-            margin-bottom: 8px;
-        }
-
-        .system-prompt-content {
-            color: ${COLORS.textDim};
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            word-break: break-word;
-            font-size: 11px;
-        }
-
-        .tools-list {
-            background: rgb(60, 55, 40);
-            padding: 12px 16px;
-            border-radius: 4px;
-            margin-bottom: 16px;
-        }
-
-        .tools-header {
-            font-weight: bold;
-            color: ${COLORS.yellow};
-            margin-bottom: 8px;
-        }
-
-        .tools-content {
-            color: ${COLORS.textDim};
-            font-size: 11px;
-        }
-
-        .tool-item {
-            margin: 4px 0;
-        }
-
-        .tool-item-name {
-            font-weight: bold;
-            color: ${COLORS.text};
-        }
-
-        /* Diff styling */
-        .tool-diff {
-            margin-top: 12px;
-            font-size: 11px;
-            font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-            overflow-x: auto;
-            max-width: 100%;
-        }
-
-        .diff-line-old {
-            color: ${COLORS.red};
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-        }
-
-        .diff-line-new {
-            color: ${COLORS.green};
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-        }
-
-        .diff-line-context {
-            color: ${COLORS.textDim};
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-        }
-
-        /* Error text */
-        .error-text {
-            color: ${COLORS.red};
-            padding: 12px 16px;
-        }
-
-        .footer {
-            margin-top: 48px;
-            padding: 20px;
-            text-align: center;
-            color: ${COLORS.textDim};
-            font-size: 10px;
-        }
-
-        @media print {
-            body {
-                background: white;
-                color: black;
-            }
-            .tool-execution {
-                border: 1px solid #ddd;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1>pi v${VERSION}</h1>
-            <div class="header-info">
-                <div class="info-item">
-                    <span class="info-label">Session:</span>
-                    <span class="info-value">${escapeHtml(sessionHeader?.id || "unknown")}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Date:</span>
-                    <span class="info-value">${sessionHeader?.timestamp ? new Date(sessionHeader.timestamp).toLocaleString() : timestamp}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Models:</span>
-                    <span class="info-value">${Array.from(modelsUsed)
-        .map((m) => escapeHtml(m))
-        .join(", ") || escapeHtml(sessionHeader?.model || state.model.id)}</span>
-                </div>
-            </div>
-        </div>
-
-        <div class="header">
-            <h1>Messages</h1>
-            <div class="header-info">
-                <div class="info-item">
-                    <span class="info-label">User:</span>
-                    <span class="info-value">${userMessages}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Assistant:</span>
-                    <span class="info-value">${assistantMessages}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Tool Calls:</span>
-                    <span class="info-value">${toolCallsCount}</span>
-                </div>
-            </div>
-        </div>
-
-        <div class="header">
-            <h1>Tokens & Cost</h1>
-            <div class="header-info">
-                <div class="info-item">
-                    <span class="info-label">Input:</span>
-                    <span class="info-value">${tokenStats.input.toLocaleString()} tokens</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Output:</span>
-                    <span class="info-value">${tokenStats.output.toLocaleString()} tokens</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Cache Read:</span>
-                    <span class="info-value">${tokenStats.cacheRead.toLocaleString()} tokens</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Cache Write:</span>
-                    <span class="info-value">${tokenStats.cacheWrite.toLocaleString()} tokens</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Total:</span>
-                    <span class="info-value">${(tokenStats.input + tokenStats.output + tokenStats.cacheRead + tokenStats.cacheWrite).toLocaleString()} tokens</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Input Cost:</span>
-                    <span class="info-value cost">$${costStats.input.toFixed(4)}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Output Cost:</span>
-                    <span class="info-value cost">$${costStats.output.toFixed(4)}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Cache Read Cost:</span>
-                    <span class="info-value cost">$${costStats.cacheRead.toFixed(4)}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Cache Write Cost:</span>
-                    <span class="info-value cost">$${costStats.cacheWrite.toFixed(4)}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Total Cost:</span>
-                    <span class="info-value cost"><strong>$${(costStats.input + costStats.output + costStats.cacheRead + costStats.cacheWrite).toFixed(4)}</strong></span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Context Usage:</span>
-                    <span class="info-value">${contextTokens.toLocaleString()} / ${contextWindow.toLocaleString()} tokens (${contextPercent}%) - ${escapeHtml(lastModelInfo)}</span>
-                </div>
-            </div>
-        </div>
-
-        <div class="system-prompt">
-            <div class="system-prompt-header">System Prompt</div>
-            <div class="system-prompt-content">${escapeHtml(sessionHeader?.systemPrompt || state.systemPrompt)}</div>
-        </div>
-
-        <div class="tools-list">
-            <div class="tools-header">Available Tools</div>
-            <div class="tools-content">
-                ${state.tools
-        .map((tool) => `<div class="tool-item"><span class="tool-item-name">${escapeHtml(tool.name)}</span> - ${escapeHtml(tool.description)}</div>`)
-        .join("")}
-            </div>
-        </div>
-
-        <div class="messages">
-            ${messagesHtml}
-        </div>
-
-        <div class="footer">
-            Generated by pi coding-agent on ${new Date().toLocaleString()}
-        </div>
-    </div>
-</body>
-</html>`;
-    // Write HTML file
-    writeFileSync(outputPath, html, "utf8");
-    return outputPath;
-}
-/**
- * Parse session manager format (type: "session", "message", "model_change")
- */
-function parseSessionManagerFormat(lines) {
-    const data = {
-        sessionId: "unknown",
-        timestamp: new Date().toISOString(),
-        modelsUsed: new Set(),
-        messages: [],
-        toolResultsMap: new Map(),
-        sessionEvents: [],
-        tokenStats: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
-        costStats: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
-    };
-    for (const line of lines) {
-        try {
-            const entry = JSON.parse(line);
-            if (entry.type === "session") {
-                data.sessionId = entry.id || "unknown";
-                data.timestamp = entry.timestamp || data.timestamp;
-                data.cwd = entry.cwd;
-                data.systemPrompt = entry.systemPrompt;
-                if (entry.modelId) {
-                    const modelInfo = entry.provider ? `${entry.provider}/${entry.modelId}` : entry.modelId;
-                    data.modelsUsed.add(modelInfo);
-                }
-            }
-            else if (entry.type === "message") {
-                data.messages.push(entry.message);
-                data.sessionEvents.push(entry);
-                if (entry.message.role === "toolResult") {
-                    data.toolResultsMap.set(entry.message.toolCallId, entry.message);
-                }
-                if (entry.message.role === "assistant" && entry.message.usage) {
-                    const usage = entry.message.usage;
-                    data.tokenStats.input += usage.input || 0;
-                    data.tokenStats.output += usage.output || 0;
-                    data.tokenStats.cacheRead += usage.cacheRead || 0;
-                    data.tokenStats.cacheWrite += usage.cacheWrite || 0;
-                    if (usage.cost) {
-                        data.costStats.input += usage.cost.input || 0;
-                        data.costStats.output += usage.cost.output || 0;
-                        data.costStats.cacheRead += usage.cost.cacheRead || 0;
-                        data.costStats.cacheWrite += usage.cost.cacheWrite || 0;
-                    }
-                }
-            }
-            else if (entry.type === "model_change") {
-                data.sessionEvents.push(entry);
-                if (entry.modelId) {
-                    const modelInfo = entry.provider ? `${entry.provider}/${entry.modelId}` : entry.modelId;
-                    data.modelsUsed.add(modelInfo);
-                }
-            }
-        }
-        catch {
-            // Skip malformed lines
-        }
-    }
-    return data;
-}
-/**
- * Parse streaming event format (type: "agent_start", "message_start", "message_end", etc.)
- */
-function parseStreamingEventFormat(lines) {
-    const data = {
-        sessionId: "unknown",
-        timestamp: new Date().toISOString(),
-        modelsUsed: new Set(),
-        messages: [],
-        toolResultsMap: new Map(),
-        sessionEvents: [],
-        tokenStats: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
-        costStats: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
-        isStreamingFormat: true,
-    };
-    let timestampSet = false;
-    // Track messages by collecting message_end events (which have the final state)
-    for (const line of lines) {
-        try {
-            const entry = JSON.parse(line);
-            if (entry.type === "message_end" && entry.message) {
-                const msg = entry.message;
-                data.messages.push(msg);
-                data.sessionEvents.push({ type: "message", message: msg, timestamp: msg.timestamp });
-                // Build tool results map
-                if (msg.role === "toolResult") {
-                    data.toolResultsMap.set(msg.toolCallId, msg);
-                }
-                // Track models and accumulate stats from assistant messages
-                if (msg.role === "assistant") {
-                    if (msg.model) {
-                        const modelInfo = msg.provider ? `${msg.provider}/${msg.model}` : msg.model;
-                        data.modelsUsed.add(modelInfo);
-                    }
-                    if (msg.usage) {
-                        data.tokenStats.input += msg.usage.input || 0;
-                        data.tokenStats.output += msg.usage.output || 0;
-                        data.tokenStats.cacheRead += msg.usage.cacheRead || 0;
-                        data.tokenStats.cacheWrite += msg.usage.cacheWrite || 0;
-                        if (msg.usage.cost) {
-                            data.costStats.input += msg.usage.cost.input || 0;
-                            data.costStats.output += msg.usage.cost.output || 0;
-                            data.costStats.cacheRead += msg.usage.cost.cacheRead || 0;
-                            data.costStats.cacheWrite += msg.usage.cost.cacheWrite || 0;
-                        }
-                    }
-                }
-                // Use first message timestamp as session timestamp
-                if (!timestampSet && msg.timestamp) {
-                    data.timestamp = new Date(msg.timestamp).toISOString();
-                    timestampSet = true;
-                }
-            }
-        }
-        catch {
-            // Skip malformed lines
-        }
-    }
-    // Generate a session ID from the timestamp
-    data.sessionId = `stream-${data.timestamp.replace(/[:.]/g, "-")}`;
-    return data;
-}
-/**
- * Detect the format of a session file by examining the first valid JSON line
- */
-function detectFormat(lines) {
-    for (const line of lines) {
-        try {
-            const entry = JSON.parse(line);
-            if (entry.type === "session")
-                return "session-manager";
-            if (entry.type === "agent_start" || entry.type === "message_start" || entry.type === "turn_start") {
-                return "streaming-events";
-            }
-        }
-        catch {
-            // Skip malformed lines
-        }
-    }
-    return "unknown";
-}
-/**
- * Generate HTML from parsed session data
- */
-function generateHtml(data, inputFilename) {
-    // Calculate message stats
-    const userMessages = data.messages.filter((m) => m.role === "user").length;
-    const assistantMessages = data.messages.filter((m) => m.role === "assistant").length;
-    // Count tool calls from assistant messages
-    let toolCallsCount = 0;
-    for (const message of data.messages) {
-        if (message.role === "assistant") {
-            const assistantMsg = message;
-            toolCallsCount += assistantMsg.content.filter((c) => c.type === "toolCall").length;
-        }
-    }
-    // Get last assistant message for context info
-    const lastAssistantMessage = data.messages
-        .slice()
-        .reverse()
-        .find((m) => m.role === "assistant" && m.stopReason !== "aborted");
-    const contextTokens = lastAssistantMessage
-        ? lastAssistantMessage.usage.input +
-            lastAssistantMessage.usage.output +
-            lastAssistantMessage.usage.cacheRead +
-            lastAssistantMessage.usage.cacheWrite
-        : 0;
-    const lastModel = lastAssistantMessage?.model || "unknown";
-    const lastProvider = lastAssistantMessage?.provider || "";
-    const lastModelInfo = lastProvider ? `${lastProvider}/${lastModel}` : lastModel;
-    // Generate messages HTML
-    let messagesHtml = "";
-    for (const event of data.sessionEvents) {
-        if (event.type === "message" && event.message.role !== "toolResult") {
-            messagesHtml += formatMessage(event.message, data.toolResultsMap);
-        }
-        else if (event.type === "model_change") {
-            messagesHtml += formatModelChange(event);
-        }
-    }
-    // Tools section (only if tools info available)
-    const toolsHtml = data.tools
-        ? `
-        <div class="tools-list">
-            <div class="tools-header">Available Tools</div>
-            <div class="tools-content">
-                ${data.tools.map((tool) => `<div class="tool-item"><span class="tool-item-name">${escapeHtml(tool.name)}</span> - ${escapeHtml(tool.description)}</div>`).join("")}
-            </div>
-        </div>`
-        : "";
-    // System prompt section (only if available)
-    const systemPromptHtml = data.systemPrompt
-        ? `
-        <div class="system-prompt">
-            <div class="system-prompt-header">System Prompt</div>
-            <div class="system-prompt-content">${escapeHtml(data.systemPrompt)}</div>
-        </div>`
-        : "";
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Session Export - ${escapeHtml(inputFilename)}</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-            font-size: 12px;
-            line-height: 1.6;
-            color: ${COLORS.text};
-            background: ${COLORS.bodyBg};
-            padding: 24px;
-        }
-
-        .container {
-            max-width: 700px;
-            margin: 0 auto;
-        }
-
-        .header {
-            margin-bottom: 24px;
-            padding: 16px;
-            background: ${COLORS.containerBg};
-            border-radius: 4px;
-        }
-
-        .header h1 {
-            font-size: 14px;
-            font-weight: bold;
-            margin-bottom: 12px;
-            color: ${COLORS.cyan};
-        }
-
-        .header-info {
-            display: flex;
-            flex-direction: column;
-            gap: 3px;
-            font-size: 11px;
-        }
-
-        .info-item {
-            color: ${COLORS.textDim};
-            display: flex;
-            align-items: baseline;
-        }
-
-        .info-label {
-            font-weight: 600;
-            margin-right: 8px;
-            min-width: 100px;
-        }
-
-        .info-value {
-            color: ${COLORS.text};
-            flex: 1;
-        }
-
-        .info-value.cost {
-            font-family: 'SF Mono', monospace;
-        }
-
-        .messages {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        .message-timestamp {
-            font-size: 10px;
-            color: ${COLORS.textDim};
-            margin-bottom: 4px;
-            opacity: 0.8;
-        }
-
-        .user-message {
-            background: ${COLORS.userMessageBg};
-            padding: 12px 16px;
-            border-radius: 4px;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            word-break: break-word;
-        }
-
-        .assistant-message {
-            padding: 0;
-        }
-
-        .assistant-text {
-            padding: 12px 16px;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            word-break: break-word;
-        }
-
-        .thinking-text {
-            padding: 12px 16px;
-            color: ${COLORS.italic};
-            font-style: italic;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            word-break: break-word;
-        }
-
-        .model-change {
-            padding: 8px 16px;
-            background: rgb(40, 40, 50);
-            border-radius: 4px;
-        }
-
-        .model-change-text {
-            color: ${COLORS.textDim};
-            font-size: 11px;
-        }
-
-        .model-name {
-            color: ${COLORS.cyan};
-            font-weight: bold;
-        }
-
-        .tool-execution {
-            padding: 12px 16px;
-            border-radius: 4px;
-            margin-top: 8px;
-        }
-
-        .tool-header {
-            font-weight: bold;
-        }
-
-        .tool-name {
-            font-weight: bold;
-        }
-
-        .tool-path {
-            color: ${COLORS.cyan};
-            word-break: break-all;
-        }
-
-        .line-count {
-            color: ${COLORS.textDim};
-        }
-
-        .tool-command {
-            font-weight: bold;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            word-break: break-word;
-        }
-
-        .tool-output {
-            margin-top: 12px;
-            color: ${COLORS.textDim};
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            word-break: break-word;
-            font-family: inherit;
-            overflow-x: auto;
-        }
-
-        .tool-output > div {
-            line-height: 1.4;
-        }
-
-        .tool-output pre {
-            margin: 0;
             font-family: inherit;
-            color: inherit;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-        }
-
-        .tool-output.expandable {
-            cursor: pointer;
-        }
-
-        .tool-output.expandable:hover {
-            opacity: 0.9;
-        }
-
-        .tool-output.expandable .output-full {
-            display: none;
-        }
-
-        .tool-output.expandable.expanded .output-preview {
-            display: none;
-        }
-
-        .tool-output.expandable.expanded .output-full {
-            display: block;
-        }
-
-        .expand-hint {
-            color: ${COLORS.cyan};
-            font-style: italic;
-            margin-top: 4px;
-        }
-
-        .system-prompt {
-            background: rgb(60, 55, 40);
-            padding: 12px 16px;
-            border-radius: 4px;
-            margin-bottom: 16px;
-        }
-
-        .system-prompt-header {
-            font-weight: bold;
-            color: ${COLORS.yellow};
-            margin-bottom: 8px;
-        }
-
-        .system-prompt-content {
-            color: ${COLORS.textDim};
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            word-break: break-word;
-            font-size: 11px;
-        }
-
-        .tools-list {
-            background: rgb(60, 55, 40);
-            padding: 12px 16px;
-            border-radius: 4px;
-            margin-bottom: 16px;
-        }
-
-        .tools-header {
-            font-weight: bold;
-            color: ${COLORS.yellow};
-            margin-bottom: 8px;
-        }
-
-        .tools-content {
-            color: ${COLORS.textDim};
-            font-size: 11px;
-        }
-
-        .tool-item {
-            margin: 4px 0;
-        }
-
-        .tool-item-name {
-            font-weight: bold;
-            color: ${COLORS.text};
-        }
-
-        .tool-diff {
-            margin-top: 12px;
-            font-size: 11px;
-            font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
             overflow-x: auto;
-            max-width: 100%;
-        }
-
-        .diff-line-old {
-            color: ${COLORS.red};
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-        }
-
-        .diff-line-new {
-            color: ${COLORS.green};
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-        }
-
-        .diff-line-context {
-            color: ${COLORS.textDim};
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-        }
-
-        .error-text {
-            color: ${COLORS.red};
-            padding: 12px 16px;
-        }
-
-        .footer {
-            margin-top: 48px;
-            padding: 20px;
-            text-align: center;
-            color: ${COLORS.textDim};
-            font-size: 10px;
-        }
-
-        .streaming-notice {
-            background: rgb(50, 45, 35);
-            padding: 12px 16px;
-            border-radius: 4px;
-            margin-bottom: 16px;
-            color: ${COLORS.textDim};
-            font-size: 11px;
-        }
-
-        @media print {
-            body {
-                background: white;
-                color: black;
-            }
-            .tool-execution {
-                border: 1px solid #ddd;
-            }
         }
+        .tool-output > div { line-height: 1.4; }
+        .tool-output pre { margin: 0; font-family: inherit; color: inherit; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }
+        .tool-output.expandable { cursor: pointer; }
+        .tool-output.expandable:hover { opacity: 0.9; }
+        .tool-output.expandable .output-full { display: none; }
+        .tool-output.expandable.expanded .output-preview { display: none; }
+        .tool-output.expandable.expanded .output-full { display: block; }
+        .expand-hint { color: ${COLORS.cyan}; font-style: italic; margin-top: 4px; }
+        .system-prompt, .tools-list { background: rgb(60, 55, 40); padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; }
+        .system-prompt-header, .tools-header { font-weight: bold; color: ${COLORS.yellow}; margin-bottom: 8px; }
+        .system-prompt-content, .tools-content { color: ${COLORS.textDim}; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; font-size: 11px; }
+        .tool-item { margin: 4px 0; }
+        .tool-item-name { font-weight: bold; color: ${COLORS.text}; }
+        .tool-diff { margin-top: 12px; font-size: 11px; font-family: inherit; overflow-x: auto; max-width: 100%; }
+        .diff-line-old { color: ${COLORS.red}; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }
+        .diff-line-new { color: ${COLORS.green}; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }
+        .diff-line-context { color: ${COLORS.textDim}; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }
+        .error-text { color: ${COLORS.red}; padding: 12px 16px; }
+        .footer { margin-top: 48px; padding: 20px; text-align: center; color: ${COLORS.textDim}; font-size: 10px; }
+        .streaming-notice { background: rgb(50, 45, 35); padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; color: ${COLORS.textDim}; font-size: 11px; }
+        @media print { body { background: white; color: black; } .tool-execution { border: 1px solid #ddd; } }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
-            <h1>pi v${VERSION}</h1>
+            <h1>${APP_NAME} v${VERSION}</h1>
             <div class="header-info">
-                <div class="info-item">
-                    <span class="info-label">Session:</span>
-                    <span class="info-value">${escapeHtml(data.sessionId)}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Date:</span>
-                    <span class="info-value">${new Date(data.timestamp).toLocaleString()}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Models:</span>
-                    <span class="info-value">${Array.from(data.modelsUsed)
+                <div class="info-item"><span class="info-label">Session:</span><span class="info-value">${escapeHtml(data.sessionId)}</span></div>
+                <div class="info-item"><span class="info-label">Date:</span><span class="info-value">${new Date(data.timestamp).toLocaleString()}</span></div>
+                <div class="info-item"><span class="info-label">Models:</span><span class="info-value">${Array.from(data.modelsUsed)
         .map((m) => escapeHtml(m))
-        .join(", ") || "unknown"}</span>
-                </div>
+        .join(", ") || "unknown"}</span></div>
             </div>
         </div>
 
         <div class="header">
             <h1>Messages</h1>
             <div class="header-info">
-                <div class="info-item">
-                    <span class="info-label">User:</span>
-                    <span class="info-value">${userMessages}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Assistant:</span>
-                    <span class="info-value">${assistantMessages}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Tool Calls:</span>
-                    <span class="info-value">${toolCallsCount}</span>
-                </div>
+                <div class="info-item"><span class="info-label">User:</span><span class="info-value">${userMessages}</span></div>
+                <div class="info-item"><span class="info-label">Assistant:</span><span class="info-value">${assistantMessages}</span></div>
+                <div class="info-item"><span class="info-label">Tool Calls:</span><span class="info-value">${toolCallsCount}</span></div>
             </div>
         </div>
 
         <div class="header">
             <h1>Tokens & Cost</h1>
             <div class="header-info">
-                <div class="info-item">
-                    <span class="info-label">Input:</span>
-                    <span class="info-value">${data.tokenStats.input.toLocaleString()} tokens</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Output:</span>
-                    <span class="info-value">${data.tokenStats.output.toLocaleString()} tokens</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Cache Read:</span>
-                    <span class="info-value">${data.tokenStats.cacheRead.toLocaleString()} tokens</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Cache Write:</span>
-                    <span class="info-value">${data.tokenStats.cacheWrite.toLocaleString()} tokens</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Total:</span>
-                    <span class="info-value">${(data.tokenStats.input + data.tokenStats.output + data.tokenStats.cacheRead + data.tokenStats.cacheWrite).toLocaleString()} tokens</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Input Cost:</span>
-                    <span class="info-value cost">$${data.costStats.input.toFixed(4)}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Output Cost:</span>
-                    <span class="info-value cost">$${data.costStats.output.toFixed(4)}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Cache Read Cost:</span>
-                    <span class="info-value cost">$${data.costStats.cacheRead.toFixed(4)}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Cache Write Cost:</span>
-                    <span class="info-value cost">$${data.costStats.cacheWrite.toFixed(4)}</span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Total Cost:</span>
-                    <span class="info-value cost"><strong>$${(data.costStats.input + data.costStats.output + data.costStats.cacheRead + data.costStats.cacheWrite).toFixed(4)}</strong></span>
-                </div>
-                <div class="info-item">
-                    <span class="info-label">Context Usage:</span>
-                    <span class="info-value">${contextTokens.toLocaleString()} tokens (last turn) - ${escapeHtml(lastModelInfo)}</span>
-                </div>
+                <div class="info-item"><span class="info-label">Input:</span><span class="info-value">${data.tokenStats.input.toLocaleString()} tokens</span></div>
+                <div class="info-item"><span class="info-label">Output:</span><span class="info-value">${data.tokenStats.output.toLocaleString()} tokens</span></div>
+                <div class="info-item"><span class="info-label">Cache Read:</span><span class="info-value">${data.tokenStats.cacheRead.toLocaleString()} tokens</span></div>
+                <div class="info-item"><span class="info-label">Cache Write:</span><span class="info-value">${data.tokenStats.cacheWrite.toLocaleString()} tokens</span></div>
+                <div class="info-item"><span class="info-label">Total:</span><span class="info-value">${(data.tokenStats.input + data.tokenStats.output + data.tokenStats.cacheRead + data.tokenStats.cacheWrite).toLocaleString()} tokens</span></div>
+                <div class="info-item"><span class="info-label">Input Cost:</span><span class="info-value cost">$${data.costStats.input.toFixed(4)}</span></div>
+                <div class="info-item"><span class="info-label">Output Cost:</span><span class="info-value cost">$${data.costStats.output.toFixed(4)}</span></div>
+                <div class="info-item"><span class="info-label">Cache Read Cost:</span><span class="info-value cost">$${data.costStats.cacheRead.toFixed(4)}</span></div>
+                <div class="info-item"><span class="info-label">Cache Write Cost:</span><span class="info-value cost">$${data.costStats.cacheWrite.toFixed(4)}</span></div>
+                <div class="info-item"><span class="info-label">Total Cost:</span><span class="info-value cost"><strong>$${(data.costStats.input + data.costStats.output + data.costStats.cacheRead + data.costStats.cacheWrite).toFixed(4)}</strong></span></div>
+                <div class="info-item"><span class="info-label">Context Usage:</span><span class="info-value">${contextUsageText}</span></div>
             </div>
         </div>
 
         ${systemPromptHtml}
         ${toolsHtml}
-
-        ${data.isStreamingFormat
-        ? `<div class="streaming-notice">
-            <em>Note: This session was reconstructed from raw agent event logs, which do not contain system prompt or tool definitions.</em>
-        </div>`
-        : ""}
+        ${streamingNotice}
 
         <div class="messages">
             ${messagesHtml}
         </div>
 
         <div class="footer">
-            Generated by pi coding-agent on ${new Date().toLocaleString()}
+            Generated by ${APP_NAME} coding-agent on ${new Date().toLocaleString()}
         </div>
     </div>
 </body>
 </html>`;
 }
+// ============================================================================
+// Public API
+// ============================================================================
+/**
+ * Export session to HTML using SessionManager and AgentState.
+ * Used by TUI's /export command.
+ */
+export function exportSessionToHtml(sessionManager, state, outputPath) {
+    const sessionFile = sessionManager.getSessionFile();
+    const content = readFileSync(sessionFile, "utf8");
+    const data = parseSessionFile(content);
+    // Enrich with data from AgentState (tools, context window)
+    data.tools = state.tools.map((t) => ({ name: t.name, description: t.description }));
+    data.contextWindow = state.model?.contextWindow;
+    if (!data.systemPrompt) {
+        data.systemPrompt = state.systemPrompt;
+    }
+    if (!outputPath) {
+        const sessionBasename = basename(sessionFile, ".jsonl");
+        outputPath = `${APP_NAME}-session-${sessionBasename}.html`;
+    }
+    const html = generateHtml(data, basename(sessionFile));
+    writeFileSync(outputPath, html, "utf8");
+    return outputPath;
+}
 /**
- * Export a session file to HTML (standalone, without AgentState or SessionManager)
- * Auto-detects format: session manager format or streaming event format
+ * Export session file to HTML (standalone, without AgentState).
+ * Auto-detects format: session manager format or streaming event format.
+ * Used by CLI for exporting arbitrary session files.
  */
 export function exportFromFile(inputPath, outputPath) {
     if (!existsSync(inputPath)) {
         throw new Error(`File not found: ${inputPath}`);
     }
     const content = readFileSync(inputPath, "utf8");
-    const lines = content
-        .trim()
-        .split("\n")
-        .filter((l) => l.trim());
-    if (lines.length === 0) {
-        throw new Error(`Empty file: ${inputPath}`);
-    }
-    const format = detectFormat(lines);
-    if (format === "unknown") {
-        throw new Error(`Unknown session file format: ${inputPath}`);
-    }
-    const data = format === "session-manager" ? parseSessionManagerFormat(lines) : parseStreamingEventFormat(lines);
-    // Generate output path if not provided
+    const data = parseSessionFile(content);
     if (!outputPath) {
         const inputBasename = basename(inputPath, ".jsonl");
-        outputPath = `pi-session-${inputBasename}.html`;
+        outputPath = `${APP_NAME}-session-${inputBasename}.html`;
     }
     const html = generateHtml(data, basename(inputPath));
     writeFileSync(outputPath, html, "utf8");