From 5cab91f839e76e4d39f4233b6ee943fe6160c680 Mon Sep 17 00:00:00 2001 From: Mario Zechner Date: Wed, 12 Nov 2025 16:35:06 +0100 Subject: [PATCH] Make HTML export header minimal and stack info vertically **Header improvements:** - Changed title from "pi coding-agent session" to "pi v{version}" - Smaller, more compact header (16px instead of 20px) - Info items now stack vertically with consistent labels (80px width) - Reduced padding and spacing for cleaner look - Labels aligned to left, values aligned to baseline The header is now much less cramped and easier to read. --- packages/coding-agent/src/export-html.ts | 29 ++++++++++++++++-------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/coding-agent/src/export-html.ts b/packages/coding-agent/src/export-html.ts index 5728f8b3..e1e30a9c 100644 --- a/packages/coding-agent/src/export-html.ts +++ b/packages/coding-agent/src/export-html.ts @@ -2,9 +2,16 @@ import type { AgentState } from "@mariozechner/pi-agent"; import type { AssistantMessage, Message, ToolResultMessage, UserMessage } from "@mariozechner/pi-ai"; import { readFileSync, writeFileSync } from "fs"; import { homedir } from "os"; -import { basename } from "path"; +import { basename, dirname, join } from "path"; +import { fileURLToPath } from "url"; import type { SessionManager } from "./session-manager.js"; +// 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) */ @@ -386,37 +393,41 @@ export function exportSessionToHtml(sessionManager: SessionManager, state: Agent } .header { - margin-bottom: 32px; - padding: 20px; + margin-bottom: 24px; + padding: 16px; background: ${COLORS.containerBg}; border-radius: 4px; } .header h1 { - font-size: 20px; + font-size: 16px; font-weight: bold; - margin-bottom: 16px; + margin-bottom: 12px; color: ${COLORS.cyan}; } .header-info { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 12px; + 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 { @@ -632,7 +643,7 @@ export function exportSessionToHtml(sessionManager: SessionManager, state: Agent
-

pi coding-agent session

+

pi v${VERSION}

Session: