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 { 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
<body>
<div class="container">
<div class="header">
<h1>pi coding-agent session</h1>
<h1>pi v${VERSION}</h1>
<div class="header-info">
<div class="info-item">
<span class="info-label">Session:</span>