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.
This commit is contained in:
Mario Zechner 2025-11-12 16:35:06 +01:00
parent 1b81d803bf
commit 5cab91f839

View file

@ -2,9 +2,16 @@ import type { AgentState } from "@mariozechner/pi-agent";
import type { AssistantMessage, Message, ToolResultMessage, UserMessage } from "@mariozechner/pi-ai"; import type { AssistantMessage, Message, ToolResultMessage, UserMessage } from "@mariozechner/pi-ai";
import { readFileSync, writeFileSync } from "fs"; import { readFileSync, writeFileSync } from "fs";
import { homedir } from "os"; 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"; 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) * TUI Color scheme (matching exact RGB values from TUI components)
*/ */
@ -386,37 +393,41 @@ export function exportSessionToHtml(sessionManager: SessionManager, state: Agent
} }
.header { .header {
margin-bottom: 32px; margin-bottom: 24px;
padding: 20px; padding: 16px;
background: ${COLORS.containerBg}; background: ${COLORS.containerBg};
border-radius: 4px; border-radius: 4px;
} }
.header h1 { .header h1 {
font-size: 20px; font-size: 16px;
font-weight: bold; font-weight: bold;
margin-bottom: 16px; margin-bottom: 12px;
color: ${COLORS.cyan}; color: ${COLORS.cyan};
} }
.header-info { .header-info {
display: grid; display: flex;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); flex-direction: column;
gap: 12px; gap: 6px;
font-size: 13px; font-size: 13px;
} }
.info-item { .info-item {
color: ${COLORS.textDim}; color: ${COLORS.textDim};
display: flex;
align-items: baseline;
} }
.info-label { .info-label {
font-weight: 600; font-weight: 600;
margin-right: 8px; margin-right: 8px;
min-width: 80px;
} }
.info-value { .info-value {
color: ${COLORS.text}; color: ${COLORS.text};
flex: 1;
} }
.messages { .messages {
@ -632,7 +643,7 @@ export function exportSessionToHtml(sessionManager: SessionManager, state: Agent
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<h1>pi coding-agent session</h1> <h1>pi v${VERSION}</h1>
<div class="header-info"> <div class="header-info">
<div class="info-item"> <div class="info-item">
<span class="info-label">Session:</span> <span class="info-label">Session:</span>