shortcutxl 0.2.0

package/dist/core/export-html/index.js

@@ -0,0 +1,238 @@
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { basename, join } from 'path';
+import { APP_NAME, getExportTemplateDir } from '../../config.js';
+import { CORE_TOOL_NAMES } from '../../tool-names.js';
+import { convertToLlm } from '../messages.js';
+import { SessionManager, buildSessionContext } from '../session-manager.js';
+import { getResolvedThemeColors, getThemeExportColors } from '../theme.js';
+/** Parse a color string to RGB values. Supports hex (#RRGGBB) and rgb(r,g,b) formats. */
+function parseColor(color) {
+    const hexMatch = color.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/);
+    if (hexMatch) {
+        return {
+            r: Number.parseInt(hexMatch[1], 16),
+            g: Number.parseInt(hexMatch[2], 16),
+            b: Number.parseInt(hexMatch[3], 16)
+        };
+    }
+    const rgbMatch = color.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
+    if (rgbMatch) {
+        return {
+            r: Number.parseInt(rgbMatch[1], 10),
+            g: Number.parseInt(rgbMatch[2], 10),
+            b: Number.parseInt(rgbMatch[3], 10)
+        };
+    }
+    return undefined;
+}
+/** Calculate relative luminance of a color (0-1, higher = lighter). */
+function getLuminance(r, g, b) {
+    const toLinear = (c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+/** Adjust color brightness. Factor > 1 lightens, < 1 darkens. */
+function adjustBrightness(color, factor) {
+    const parsed = parseColor(color);
+    if (!parsed)
+        return color;
+    const adjust = (c) => Math.min(255, Math.max(0, Math.round(c * factor)));
+    return `rgb(${adjust(parsed.r)}, ${adjust(parsed.g)}, ${adjust(parsed.b)})`;
+}
+/** Derive export background colors from a base color (e.g., userMessageBg). */
+function deriveExportColors(baseColor) {
+    const parsed = parseColor(baseColor);
+    if (!parsed) {
+        return {
+            pageBg: 'rgb(24, 24, 30)',
+            cardBg: 'rgb(30, 30, 36)',
+            infoBg: 'rgb(60, 55, 40)'
+        };
+    }
+    const luminance = getLuminance(parsed.r, parsed.g, parsed.b);
+    const isLight = luminance > 0.5;
+    if (isLight) {
+        return {
+            pageBg: adjustBrightness(baseColor, 0.96),
+            cardBg: baseColor,
+            infoBg: `rgb(${Math.min(255, parsed.r + 10)}, ${Math.min(255, parsed.g + 5)}, ${Math.max(0, parsed.b - 20)})`
+        };
+    }
+    return {
+        pageBg: adjustBrightness(baseColor, 0.7),
+        cardBg: adjustBrightness(baseColor, 0.85),
+        infoBg: `rgb(${Math.min(255, parsed.r + 20)}, ${Math.min(255, parsed.g + 15)}, ${parsed.b})`
+    };
+}
+/**
+ * Generate CSS custom property declarations from theme colors.
+ */
+function generateThemeVars(themeName) {
+    const colors = getResolvedThemeColors(themeName);
+    const lines = [];
+    for (const [key, value] of Object.entries(colors)) {
+        lines.push(`--${key}: ${value};`);
+    }
+    // Use explicit theme export colors if available, otherwise derive from userMessageBg
+    const themeExport = getThemeExportColors(themeName);
+    const userMessageBg = colors.userMessageBg || '#343541';
+    const derivedColors = deriveExportColors(userMessageBg);
+    lines.push(`--exportPageBg: ${themeExport.pageBg ?? derivedColors.pageBg};`);
+    lines.push(`--exportCardBg: ${themeExport.cardBg ?? derivedColors.cardBg};`);
+    lines.push(`--exportInfoBg: ${themeExport.infoBg ?? derivedColors.infoBg};`);
+    return lines.join('\n      ');
+}
+/**
+ * Build the LLM message array for export, annotated with source info.
+ * Runs buildSessionContext → convertToLlm (the real pipeline) and tags each
+ * output message with the original AgentMessage role so the HTML can show
+ * where it came from (e.g. bashExecution → user, compactionSummary → user).
+ */
+function buildAnnotatedLlmMessages(entries, leafId) {
+    const { messages: agentMessages } = buildSessionContext(entries, leafId ?? undefined);
+    const llmMessages = convertToLlm(agentMessages);
+    // Annotate each message with its original AgentMessage role.
+    // We walk both arrays in lockstep. convertToLlm maps each non-filtered
+    // AgentMessage to one Message (same order). The agent loop already
+    // synthesizes toolResults for aborted/errored assistant messages, so
+    // orphaned tool calls should not appear here.
+    //
+    // For robustness, we use a simple heuristic: maintain an index into the
+    // agent messages and advance it for each LLM message that matches the
+    // expected role. Unmatched messages are tagged as synthetic.
+    const annotated = [];
+    let agentIdx = 0;
+    for (const msg of llmMessages) {
+        // Skip filtered agent messages to stay in sync
+        while (agentIdx < agentMessages.length &&
+            agentMessages[agentIdx].role === 'bashExecution' &&
+            agentMessages[agentIdx].excludeFromContext) {
+            agentIdx++;
+        }
+        if (agentIdx < agentMessages.length) {
+            const agentMsg = agentMessages[agentIdx];
+            const source = agentMsg.role === 'custom'
+                ? 'custom:' + (agentMsg.customType || '')
+                : agentMsg.role;
+            annotated.push({ ...msg, _source: source });
+            agentIdx++;
+        }
+        else {
+            annotated.push({ ...msg, _source: 'synthetic' });
+        }
+    }
+    return annotated;
+}
+/**
+ * Core HTML generation logic shared by both export functions.
+ */
+function generateHtml(sessionData, themeName, title) {
+    const templateDir = getExportTemplateDir();
+    const template = readFileSync(join(templateDir, 'template.html'), 'utf-8');
+    const templateCss = readFileSync(join(templateDir, 'template.css'), 'utf-8');
+    const templateJs = readFileSync(join(templateDir, 'template.js'), 'utf-8');
+    const markedJs = readFileSync(join(templateDir, 'vendor', 'marked.min.js'), 'utf-8');
+    const hljsJs = readFileSync(join(templateDir, 'vendor', 'highlight.min.js'), 'utf-8');
+    const themeVars = generateThemeVars(themeName);
+    const colors = getResolvedThemeColors(themeName);
+    const exportColors = deriveExportColors(colors.userMessageBg || '#343541');
+    const bodyBg = exportColors.pageBg;
+    const containerBg = exportColors.cardBg;
+    const infoBg = exportColors.infoBg;
+    // Base64 encode session data to avoid escaping issues
+    const sessionDataBase64 = Buffer.from(JSON.stringify(sessionData)).toString('base64');
+    // Build the CSS with theme variables injected
+    const css = templateCss
+        .replace('{{THEME_VARS}}', themeVars)
+        .replace('{{BODY_BG}}', bodyBg)
+        .replace('{{CONTAINER_BG}}', containerBg)
+        .replace('{{INFO_BG}}', infoBg);
+    // Use function replacements to avoid $ special patterns in replacement strings
+    // (highlight.min.js contains $& and $' which String.replace interprets specially)
+    return template
+        .replace('{{TITLE}}', title || 'Session Export')
+        .replace('{{CSS}}', () => css)
+        .replace('{{JS}}', () => templateJs)
+        .replace('{{SESSION_DATA}}', () => sessionDataBase64)
+        .replace('{{MARKED_JS}}', () => markedJs)
+        .replace('{{HIGHLIGHT_JS}}', () => hljsJs);
+}
+/** Built-in tool names that have custom rendering in template.js */
+const BUILTIN_TOOLS = CORE_TOOL_NAMES;
+/**
+ * Pre-render custom tools to HTML using their TUI renderers.
+ */
+function preRenderCustomTools(entries, toolRenderer) {
+    const renderedTools = {};
+    for (const entry of entries) {
+        if (entry.type !== 'message')
+            continue;
+        const msg = entry.message;
+        // Find tool calls in assistant messages
+        if (msg.role === 'assistant' && Array.isArray(msg.content)) {
+            for (const block of msg.content) {
+                if (block.type === 'toolCall' && !BUILTIN_TOOLS.has(block.name)) {
+                    const callHtml = toolRenderer.renderCall(block.name, block.arguments);
+                    if (callHtml) {
+                        renderedTools[block.id] = { callHtml };
+                    }
+                }
+            }
+        }
+        // Find tool results
+        if (msg.role === 'toolResult' && msg.toolCallId) {
+            const toolName = msg.toolName || '';
+            // Only render if we have a pre-rendered call OR it's not a built-in tool
+            const existing = renderedTools[msg.toolCallId];
+            if (existing || !BUILTIN_TOOLS.has(toolName)) {
+                const resultHtml = toolRenderer.renderResult(toolName, msg.content, msg.details, msg.isError || false);
+                if (resultHtml) {
+                    renderedTools[msg.toolCallId] = {
+                        ...existing,
+                        resultHtml
+                    };
+                }
+            }
+        }
+    }
+    return renderedTools;
+}
+/**
+ * Export session JSONL to HTML. Single export path — everything comes from the JSONL
+ * (system prompt, tool definitions, messages). Optional toolRenderer for custom tool HTML.
+ */
+export async function exportFromFile(inputPath, options) {
+    const opts = typeof options === 'string' ? { outputPath: options } : options || {};
+    if (!existsSync(inputPath)) {
+        throw new Error(`File not found: ${inputPath}`);
+    }
+    const sm = SessionManager.open(inputPath);
+    const entries = sm.getEntries();
+    const leafId = sm.getLeafId();
+    // Pre-render custom tools if a tool renderer is provided
+    let renderedTools;
+    if (opts.toolRenderer) {
+        renderedTools = preRenderCustomTools(entries, opts.toolRenderer);
+        if (Object.keys(renderedTools).length === 0) {
+            renderedTools = undefined;
+        }
+    }
+    const sessionData = {
+        header: sm.getHeader(),
+        entries,
+        leafId,
+        renderedTools,
+        llmMessages: buildAnnotatedLlmMessages(entries, leafId)
+    };
+    const html = generateHtml(sessionData, opts.themeName, opts.title);
+    let outputPath = opts.outputPath;
+    if (!outputPath) {
+        const inputBasename = basename(inputPath, '.jsonl');
+        outputPath = `${APP_NAME}-session-${inputBasename}.html`;
+    }
+    writeFileSync(outputPath, html, 'utf8');
+    return outputPath;
+}
+//# sourceMappingURL=index.js.map

package/dist/core/export-html/session-view-model.js

@@ -0,0 +1,342 @@
+/**
+ * Pure data transformations for session HTML export.
+ *
+ * This module takes raw session entries and produces view models
+ * consumed by template.js. All functions are pure — no DOM, no side effects.
+ *
+ * The boundary: session-manager.ts defines the JSONL schema (SessionEntry union),
+ * this module transforms it into renderable structures, and template.js handles DOM.
+ */
+/** Cast helper for entries that may include unknown types (custom, session_info, etc.) */
+export function asEntry(raw) {
+    return raw;
+}
+function isMessage(entry) {
+    return entry.type === 'message';
+}
+/** All entry type discriminators that the renderer knows about. */
+export const KNOWN_ENTRY_TYPES = [
+    'message',
+    'turn_start',
+    'turn_end',
+    'system_prompt',
+    'model_change',
+    'thinking_level_change',
+    'compaction',
+    'branch_summary',
+    'custom_message',
+    'label',
+    'custom',
+    'session_info',
+    'tool_definitions'
+];
+/** Build all indexes from raw entries. O(n) per index. */
+export function buildIndexes(entries) {
+    const byId = new Map();
+    for (const entry of entries) {
+        byId.set(entry.id, entry);
+    }
+    const toolCallMap = new Map();
+    for (const entry of entries) {
+        if (isMessage(entry) && entry.message.role === 'assistant') {
+            const content = entry.message.content;
+            if (Array.isArray(content)) {
+                for (const block of content) {
+                    if (block.type === 'toolCall') {
+                        toolCallMap.set(block.id, { name: block.name, arguments: block.arguments });
+                    }
+                }
+            }
+        }
+    }
+    const labelMap = new Map();
+    for (const entry of entries) {
+        if (entry.type === 'label' && entry.targetId && entry.label) {
+            labelMap.set(entry.targetId, entry.label);
+        }
+    }
+    // Build turn_start → turn_end map, then map first-message-after-turn → turn info
+    const turnEndByStartId = new Map();
+    for (const entry of entries) {
+        if (entry.type === 'turn_end') {
+            let current = byId.get(entry.parentId ?? '');
+            while (current) {
+                if (current.type === 'turn_start') {
+                    turnEndByStartId.set(current.id, entry);
+                    break;
+                }
+                if (!current.parentId || current.parentId === current.id)
+                    break;
+                current = byId.get(current.parentId);
+            }
+        }
+    }
+    const turnInfoByMessageId = new Map();
+    for (const entry of entries) {
+        if (entry.type === 'turn_start') {
+            for (const child of entries) {
+                if (child.parentId === entry.id && child.type === 'message') {
+                    const turnEnd = turnEndByStartId.get(entry.id);
+                    turnInfoByMessageId.set(child.id, {
+                        turnIndex: entry.turnIndex,
+                        durationMs: turnEnd?.durationMs
+                    });
+                    break;
+                }
+            }
+        }
+    }
+    return { byId, toolCallMap, labelMap, turnInfoByMessageId };
+}
+/** Build tree from flat entries. */
+export function buildTree(entries, labelMap) {
+    const nodeMap = new Map();
+    const roots = [];
+    for (const entry of entries) {
+        nodeMap.set(entry.id, {
+            entry,
+            children: [],
+            label: labelMap.get(entry.id)
+        });
+    }
+    for (const entry of entries) {
+        const node = nodeMap.get(entry.id);
+        if (entry.parentId === null || entry.parentId === undefined || entry.parentId === entry.id) {
+            roots.push(node);
+        }
+        else {
+            const parent = nodeMap.get(entry.parentId);
+            if (parent) {
+                parent.children.push(node);
+            }
+            else {
+                roots.push(node);
+            }
+        }
+    }
+    function sortChildren(node) {
+        node.children.sort((a, b) => new Date(a.entry.timestamp).getTime() - new Date(b.entry.timestamp).getTime());
+        node.children.forEach(sortChildren);
+    }
+    roots.forEach(sortChildren);
+    return roots;
+}
+// ============================================================
+// PATH
+// ============================================================
+/** Get path from root to target (the conversation thread). */
+export function getPath(targetId, byId) {
+    const path = [];
+    let current = byId.get(targetId);
+    while (current) {
+        path.unshift(current);
+        if (!current.parentId || current.parentId === current.id)
+            break;
+        current = byId.get(current.parentId);
+    }
+    return path;
+}
+/** Build set of entry IDs on path from root to target. */
+export function buildActivePathIds(targetId, byId) {
+    const ids = new Set();
+    let current = byId.get(targetId);
+    while (current) {
+        ids.add(current.id);
+        if (!current.parentId || current.parentId === current.id)
+            break;
+        current = byId.get(current.parentId);
+    }
+    return ids;
+}
+/** Find the tool result entry matching a tool call ID. */
+export function findToolResult(toolCallId, entries) {
+    for (const entry of entries) {
+        if (isMessage(entry) && entry.message.role === 'toolResult') {
+            if (entry.message.toolCallId === toolCallId) {
+                return {
+                    content: entry.message.content,
+                    isError: entry.message.isError || false,
+                    details: entry.message.details
+                };
+            }
+        }
+    }
+    return null;
+}
+/** Compute aggregate stats from a list of entries. */
+export function computeStats(entryList) {
+    let userMessages = 0;
+    let assistantMessages = 0;
+    let toolResults = 0;
+    let customMessages = 0;
+    let compactions = 0;
+    let branchSummaries = 0;
+    let toolCalls = 0;
+    let turnCount = 0;
+    let totalDurationMs = 0;
+    let totalLlmDurationMs = 0;
+    let totalToolDurationMs = 0;
+    const tokens = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
+    const cost = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
+    const models = new Set();
+    for (const entry of entryList) {
+        if (entry.type === 'turn_end') {
+            turnCount++;
+            if (typeof entry.durationMs === 'number')
+                totalDurationMs += entry.durationMs;
+        }
+        if (isMessage(entry)) {
+            const msg = entry.message;
+            if (msg.role === 'user')
+                userMessages++;
+            if (msg.role === 'assistant') {
+                assistantMessages++;
+                if (msg.model) {
+                    models.add(msg.provider ? `${msg.provider}/${msg.model}` : String(msg.model));
+                }
+                const usage = msg.usage;
+                if (usage) {
+                    tokens.input += usage.input || 0;
+                    tokens.output += usage.output || 0;
+                    tokens.cacheRead += usage.cacheRead || 0;
+                    tokens.cacheWrite += usage.cacheWrite || 0;
+                    const usageCost = usage.cost;
+                    if (usageCost) {
+                        cost.input += usageCost.input || 0;
+                        cost.output += usageCost.output || 0;
+                        cost.cacheRead += usageCost.cacheRead || 0;
+                        cost.cacheWrite += usageCost.cacheWrite || 0;
+                    }
+                }
+                const content = msg.content;
+                if (Array.isArray(content)) {
+                    toolCalls += content.filter((c) => c.type === 'toolCall').length;
+                }
+                if (typeof entry.durationMs === 'number')
+                    totalLlmDurationMs += entry.durationMs;
+            }
+            if (msg.role === 'toolResult') {
+                toolResults++;
+                if (typeof entry.durationMs === 'number')
+                    totalToolDurationMs += entry.durationMs;
+            }
+        }
+        else if (entry.type === 'compaction') {
+            compactions++;
+        }
+        else if (entry.type === 'branch_summary') {
+            branchSummaries++;
+        }
+        else if (entry.type === 'custom_message') {
+            customMessages++;
+        }
+    }
+    return {
+        userMessages,
+        assistantMessages,
+        toolResults,
+        customMessages,
+        compactions,
+        branchSummaries,
+        toolCalls,
+        turnCount,
+        totalDurationMs,
+        totalLlmDurationMs,
+        totalToolDurationMs,
+        tokens,
+        cost,
+        models: Array.from(models)
+    };
+}
+// ============================================================
+// FORMATTING UTILITIES
+// ============================================================
+export function formatTokens(count) {
+    if (count >= 1_000_000)
+        return (count / 1_000_000).toFixed(1) + 'M';
+    if (count >= 1_000)
+        return (count / 1_000).toFixed(1) + 'k';
+    return String(count);
+}
+export function formatDuration(ms) {
+    if (ms < 1000)
+        return ms + 'ms';
+    const s = ms / 1000;
+    if (s < 60)
+        return s.toFixed(1) + 's';
+    const m = Math.floor(s / 60);
+    const rem = Math.round(s % 60);
+    return m + 'm' + (rem > 0 ? rem + 's' : '');
+}
+export function formatTimestamp(ts) {
+    if (!ts)
+        return '';
+    try {
+        return new Date(ts).toLocaleTimeString();
+    }
+    catch {
+        return '';
+    }
+}
+/** Entry types considered "settings" — hidden in default filter mode. */
+const SETTINGS_TYPES = new Set([
+    'label',
+    'custom',
+    'model_change',
+    'thinking_level_change',
+    'turn_start',
+    'turn_end',
+    'system_prompt',
+    'tool_definitions'
+]);
+export function hasTextContent(content) {
+    if (typeof content === 'string')
+        return content.trim().length > 0;
+    if (Array.isArray(content)) {
+        for (const c of content) {
+            if (c.type === 'text' && c.text && c.text.trim().length > 0)
+                return true;
+        }
+    }
+    return false;
+}
+export function extractContent(content) {
+    if (typeof content === 'string')
+        return content;
+    if (Array.isArray(content)) {
+        return content
+            .filter((c) => c.type === 'text' && c.text)
+            .map((c) => c.text)
+            .join('');
+    }
+    return '';
+}
+/** Test whether an entry passes the current filter. */
+export function passesFilter(item, mode, currentLeafId) {
+    const { entry, label } = item;
+    // Always show current leaf
+    if (entry.id === currentLeafId)
+        return true;
+    // Hide assistant messages with only tool calls (no text) unless error/aborted
+    if (isMessage(entry) && entry.message.role === 'assistant') {
+        const msg = entry.message;
+        const hasText = hasTextContent(msg.content);
+        const isErrorOrAborted = msg.stopReason && msg.stopReason !== 'stop' && msg.stopReason !== 'toolUse';
+        if (!hasText && !isErrorOrAborted)
+            return false;
+    }
+    const isSettings = SETTINGS_TYPES.has(entry.type);
+    switch (mode) {
+        case 'user-only':
+            return isMessage(entry) && entry.message.role === 'user';
+        case 'no-tools':
+            return !isSettings && !(isMessage(entry) && entry.message.role === 'toolResult');
+        case 'labeled-only':
+            return label !== undefined;
+        case 'all':
+            return true;
+        default: // 'default'
+            return !isSettings;
+    }
+}
+//# sourceMappingURL=session-view-model.js.map