Add the codex bridge prompt in the html export

This commit is contained in:
Armin Ronacher 2026-01-06 14:21:34 +01:00
parent a236e62025
commit 6a5f04ce1f
8 changed files with 103 additions and 10 deletions

View file

@ -2057,9 +2057,9 @@ export class AgentSession {
* @param outputPath Optional output path (defaults to session directory)
* @returns Path to exported file
*/
exportToHtml(outputPath?: string): string {
async exportToHtml(outputPath?: string): Promise<string> {
const themeName = this.settingsManager.getTheme();
return exportSessionToHtml(this.sessionManager, this.state, { outputPath, themeName });
return await exportSessionToHtml(this.sessionManager, this.state, { outputPath, themeName });
}
// =========================================================================

View file

@ -1,4 +1,5 @@
import type { AgentState } from "@mariozechner/pi-agent-core";
import { buildCodexPiBridge, getCodexInstructions, getModelFamily } from "@mariozechner/pi-ai";
import { existsSync, readFileSync, writeFileSync } from "fs";
import { basename, join } from "path";
import { APP_NAME, getExportTemplateDir } from "../../config.js";
@ -10,6 +11,47 @@ export interface ExportOptions {
themeName?: string;
}
interface ProviderSystemPrompt {
title: string;
content: string;
note?: string;
}
/**
* Build the provider-specific system prompt for display in exports.
* Currently only supports OpenAI Codex provider.
*/
async function buildProviderSystemPrompt(state?: AgentState): Promise<ProviderSystemPrompt | undefined> {
if (!state?.model || state.model.provider !== "openai-codex") {
return undefined;
}
let instructions: string | null = null;
try {
instructions = await getCodexInstructions(state.model.id);
} catch {
// Cache miss or fetch failed - that's fine
}
const bridgeText = buildCodexPiBridge(state.tools);
const userPrompt = state.systemPrompt || "";
const modelFamily = getModelFamily(state.model.id);
const instructionsText =
instructions || "(Codex instructions not cached. Run a Codex request to populate the local cache.)";
const note = instructions
? `Injected by the OpenAI Codex provider for model family "${modelFamily}" (instructions + bridge + user system prompt).`
: "Codex instructions unavailable; showing bridge and user system prompt only.";
const content = `# Codex Instructions\n${instructionsText}\n\n# Codex-Pi Bridge\n${bridgeText}\n\n# User System Prompt\n${userPrompt || "(empty)"}`;
return {
title: "Injected Prompt (OpenAI Codex)",
content,
note,
};
}
/** Parse a color string to RGB values. Supports hex (#RRGGBB) and rgb(r,g,b) formats. */
function parseColor(color: string): { r: number; g: number; b: number } | undefined {
const hexMatch = color.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/);
@ -103,6 +145,7 @@ interface SessionData {
entries: ReturnType<SessionManager["getEntries"]>;
leafId: string | null;
systemPrompt?: string;
providerSystemPrompt?: ProviderSystemPrompt;
tools?: { name: string; description: string }[];
}
@ -146,7 +189,11 @@ function generateHtml(sessionData: SessionData, themeName?: string): string {
* Export session to HTML using SessionManager and AgentState.
* Used by TUI's /export command.
*/
export function exportSessionToHtml(sm: SessionManager, state?: AgentState, options?: ExportOptions | string): string {
export async function exportSessionToHtml(
sm: SessionManager,
state?: AgentState,
options?: ExportOptions | string,
): Promise<string> {
const opts: ExportOptions = typeof options === "string" ? { outputPath: options } : options || {};
const sessionFile = sm.getSessionFile();
@ -162,6 +209,7 @@ export function exportSessionToHtml(sm: SessionManager, state?: AgentState, opti
entries: sm.getEntries(),
leafId: sm.getLeafId(),
systemPrompt: state?.systemPrompt,
providerSystemPrompt: await buildProviderSystemPrompt(state),
tools: state?.tools?.map((t) => ({ name: t.name, description: t.description })),
};
@ -195,6 +243,7 @@ export function exportFromFile(inputPath: string, options?: ExportOptions | stri
entries: sm.getEntries(),
leafId: sm.getLeafId(),
systemPrompt: undefined,
providerSystemPrompt: undefined,
tools: undefined,
};

View file

@ -593,6 +593,17 @@
display: block;
}
.system-prompt.provider-prompt {
border-left: 3px solid var(--warning);
}
.system-prompt-note {
font-size: 10px;
font-style: italic;
color: var(--muted);
margin-top: 4px;
}
/* Tools list */
.tools-list {
background: var(--customMessageBg);

View file

@ -12,7 +12,7 @@
bytes[i] = binary.charCodeAt(i);
}
const data = JSON.parse(new TextDecoder('utf-8').decode(bytes));
const { header, entries, leafId: defaultLeafId, systemPrompt, tools } = data;
const { header, entries, leafId: defaultLeafId, systemPrompt, providerSystemPrompt, tools } = data;
// ============================================================
// URL PARAMETER HANDLING
@ -1060,7 +1060,32 @@
</div>
</div>`;
if (systemPrompt) {
// Render provider-injected system prompt (e.g., Codex) if present
if (providerSystemPrompt) {
const lines = providerSystemPrompt.content.split('\n');
const previewLines = 10;
const noteHtml = providerSystemPrompt.note
? `<div class="system-prompt-note">${escapeHtml(providerSystemPrompt.note)}</div>`
: '';
if (lines.length > previewLines) {
const preview = lines.slice(0, previewLines).join('\n');
const remaining = lines.length - previewLines;
html += `<div class="system-prompt provider-prompt expandable" onclick="this.classList.toggle('expanded')">
<div class="system-prompt-header">${escapeHtml(providerSystemPrompt.title)}</div>
${noteHtml}
<div class="system-prompt-preview">${escapeHtml(preview)}</div>
<div class="system-prompt-expand-hint">... (${remaining} more lines, click to expand)</div>
<div class="system-prompt-full">${escapeHtml(providerSystemPrompt.content)}</div>
</div>`;
} else {
html += `<div class="system-prompt provider-prompt">
<div class="system-prompt-header">${escapeHtml(providerSystemPrompt.title)}</div>
${noteHtml}
<div class="system-prompt-full" style="display: block">${escapeHtml(providerSystemPrompt.content)}</div>
</div>`;
}
} else if (systemPrompt) {
// Standard system prompt (non-Codex providers)
const lines = systemPrompt.split('\n');
const previewLines = 10;
if (lines.length > previewLines) {

View file

@ -999,7 +999,7 @@ export class InteractiveMode {
return;
}
if (text.startsWith("/export")) {
this.handleExportCommand(text);
await this.handleExportCommand(text);
this.editor.setText("");
return;
}
@ -2402,12 +2402,12 @@ export class InteractiveMode {
// Command handlers
// =========================================================================
private handleExportCommand(text: string): void {
private async handleExportCommand(text: string): Promise<void> {
const parts = text.split(/\s+/);
const outputPath = parts.length > 1 ? parts[1] : undefined;
try {
const filePath = this.session.exportToHtml(outputPath);
const filePath = await this.session.exportToHtml(outputPath);
this.showStatus(`Session exported to: ${filePath}`);
} catch (error: unknown) {
this.showError(`Failed to export session: ${error instanceof Error ? error.message : "Unknown error"}`);
@ -2430,7 +2430,7 @@ export class InteractiveMode {
// Export to a temp file
const tmpFile = path.join(os.tmpdir(), "session.html");
try {
this.session.exportToHtml(tmpFile);
await this.session.exportToHtml(tmpFile);
} catch (error: unknown) {
this.showError(`Failed to export session: ${error instanceof Error ? error.message : "Unknown error"}`);
return;

View file

@ -431,7 +431,7 @@ export async function runRpcMode(session: AgentSession): Promise<never> {
}
case "export_html": {
const path = session.exportToHtml(command.outputPath);
const path = await session.exportToHtml(command.outputPath);
return success(id, "export_html", { path });
}