@mariozechner/pi-coding-agent 0.6.2

package/dist/export-html.js

@@ -0,0 +1,650 @@
+import { readFileSync, writeFileSync } from "fs";
+import { homedir } from "os";
+import { basename, dirname, join } from "path";
+import { fileURLToPath } from "url";
+// Get version from package.json
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const packageJson = JSON.parse(readFileSync(join(__dirname, "../package.json"), "utf-8"));
+const VERSION = packageJson.version;
+/**
+ * TUI Color scheme (matching exact RGB values from TUI components)
+ */
+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
+};
+/**
+ * Escape HTML special characters
+ */
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+/**
+ * Shorten path with tilde notation
+ */
+function shortenPath(path) {
+    const home = homedir();
+    if (path.startsWith(home)) {
+        return "~" + path.slice(home.length);
+    }
+    return 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");
+    };
+    // 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>";
+                }
+                else {
+                    // Short output - show all
+                    html += '<div class="tool-output">';
+                    for (const line of displayLines) {
+                        html += `<div>${escapeHtml(line)}</div>`;
+                    }
+                    html += "</div>";
+                }
+            }
+        }
+    }
+    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>`;
+                }
+                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>";
+            }
+            else {
+                // Short output - show all
+                html += '<div class="tool-output">';
+                for (const line of displayLines) {
+                    html += `<div>${escapeHtml(replaceTabs(line))}</div>`;
+                }
+                html += "</div>";
+            }
+        }
+    }
+    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>`;
+        }
+        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>";
+            }
+            else {
+                // Short output - show all
+                html += '<div class="tool-output">';
+                for (const line of displayLines) {
+                    html += `<div>${escapeHtml(replaceTabs(line))}</div>`;
+                }
+                html += "</div>";
+            }
+        }
+        if (result) {
+            const output = getTextOutput().trim();
+            if (output) {
+                html += `<div class="tool-output"><div>${escapeHtml(output)}</div></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>`;
+                }
+                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>`;
+            }
+        }
+    }
+    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>`;
+            }
+        }
+    }
+    return { html, bgColor };
+}
+/**
+ * Format a message as HTML (matching TUI component styling)
+ */
+function formatMessage(message, toolResultsMap) {
+    let html = "";
+    if (message.role === "user") {
+        const userMsg = message;
+        let textContent = "";
+        if (typeof userMsg.content === "string") {
+            textContent = userMsg.content;
+        }
+        else {
+            const textBlocks = userMsg.content.filter((c) => c.type === "text");
+            textContent = textBlocks.map((c) => c.text).join("");
+        }
+        if (textContent.trim()) {
+            html += `<div class="user-message">${escapeHtml(textContent).replace(/\n/g, "<br>")}</div>`;
+        }
+    }
+    else if (message.role === "assistant") {
+        const assistantMsg = message;
+        // 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>`;
+            }
+            else if (content.type === "thinking" && content.thinking.trim()) {
+                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);
+                const { html: toolHtml, bgColor } = formatToolExecution(content.name, content.arguments, toolResult);
+                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>`;
+            }
+        }
+    }
+    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 session filename + .html if no output path provided
+    if (!outputPath) {
+        const sessionBasename = basename(sessionFile, ".jsonl");
+        outputPath = `${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();
+    for (const line of lines) {
+        try {
+            const entry = JSON.parse(line);
+            if (entry.type === "session") {
+                sessionHeader = entry;
+            }
+            else if (entry.type === "message") {
+                messages.push(entry.message);
+                // Build map of tool call ID to result
+                if (entry.message.role === "toolResult") {
+                    toolResultsMap.set(entry.message.toolCallId, entry.message);
+                }
+            }
+        }
+        catch {
+            // Skip malformed lines
+        }
+    }
+    // Generate messages HTML
+    let messagesHtml = "";
+    for (const message of messages) {
+        if (message.role !== "toolResult") {
+            // Skip toolResult messages as they're rendered with their tool calls
+            messagesHtml += formatMessage(message, toolResultsMap);
+        }
+    }
+    // Generate HTML (matching TUI aesthetic)
+    const html = `<!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>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+            font-size: 14px;
+            line-height: 1.6;
+            color: ${COLORS.text};
+            background: ${COLORS.bodyBg};
+            padding: 24px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .header {
+            margin-bottom: 24px;
+            padding: 16px;
+            background: ${COLORS.containerBg};
+            border-radius: 4px;
+        }
+
+        .header h1 {
+            font-size: 16px;
+            font-weight: bold;
+            margin-bottom: 12px;
+            color: ${COLORS.cyan};
+        }
+
+        .header-info {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            font-size: 13px;
+        }
+
+        .info-item {
+            color: ${COLORS.textDim};
+            display: flex;
+            align-items: baseline;
+        }
+
+        .info-label {
+            font-weight: 600;
+            margin-right: 8px;
+            min-width: 80px;
+        }
+
+        .info-value {
+            color: ${COLORS.text};
+            flex: 1;
+        }
+
+        .messages {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        /* User message - matching TUI UserMessageComponent */
+        .user-message {
+            background: ${COLORS.userMessageBg};
+            padding: 12px 16px;
+            border-radius: 4px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+        /* Assistant text - matching TUI AssistantMessageComponent */
+        .assistant-text {
+            padding: 12px 16px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+        /* Thinking text - gray italic */
+        .thinking-text {
+            padding: 12px 16px;
+            color: ${COLORS.italic};
+            font-style: italic;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+        /* 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};
+        }
+
+        .line-count {
+            color: ${COLORS.textDim};
+        }
+
+        .tool-command {
+            font-weight: bold;
+        }
+
+        .tool-output {
+            margin-top: 12px;
+            color: ${COLORS.textDim};
+            white-space: pre-wrap;
+            font-family: inherit;
+        }
+
+        .tool-output > div {
+            line-height: 1.4;
+        }
+
+        .tool-output pre {
+            margin: 0;
+            font-family: inherit;
+            color: inherit;
+        }
+
+        /* 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;
+            font-size: 13px;
+        }
+
+        .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: 13px;
+        }
+
+        .tool-item {
+            margin: 4px 0;
+        }
+
+        .tool-item-name {
+            font-weight: bold;
+            color: ${COLORS.text};
+        }
+
+        /* Diff styling */
+        .tool-diff {
+            margin-top: 12px;
+            font-size: 13px;
+            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+            overflow-x: auto;
+            max-width: 100%;
+        }
+
+        .diff-line-old {
+            color: ${COLORS.red};
+            white-space: pre;
+        }
+
+        .diff-line-new {
+            color: ${COLORS.green};
+            white-space: pre;
+        }
+
+        .diff-line-context {
+            color: ${COLORS.textDim};
+            white-space: pre;
+        }
+
+        /* Error text */
+        .error-text {
+            color: ${COLORS.red};
+            padding: 12px 16px;
+        }
+
+        .footer {
+            margin-top: 48px;
+            padding: 20px;
+            text-align: center;
+            color: ${COLORS.textDim};
+            font-size: 12px;
+        }
+
+        @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">Model:</span>
+                    <span class="info-value">${escapeHtml(sessionHeader?.model || state.model.id)}</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Messages:</span>
+                    <span class="info-value">${messages.filter((m) => m.role !== "toolResult").length}</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Directory:</span>
+                    <span class="info-value">${escapeHtml(shortenPath(sessionHeader?.cwd || process.cwd()))}</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Thinking:</span>
+                    <span class="info-value">${escapeHtml(sessionHeader?.thinkingLevel || state.thinkingLevel)}</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;
+}
+//# sourceMappingURL=export-html.js.map