mirror of
https://github.com/getcompanion-ai/co-mono.git
synced 2026-04-17 07:03:25 +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 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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue