mirror of
https://github.com/getcompanion-ai/co-mono.git
synced 2026-04-15 19:05:11 +00:00
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:
parent
1b81d803bf
commit
5cab91f839
1 changed files with 20 additions and 9 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue