Show the bridge prompt as a standalone thing

packages/coding-agent/src/core/export-html/index.ts

@@ -1,5 +1,5 @@
-import type { AgentState } from "@mariozechner/pi-agent-core";
+import type { AgentState, AgentTool } from "@mariozechner/pi-agent-core";
-import { buildCodexPiBridge, getCodexInstructions, getModelFamily } from "@mariozechner/pi-ai";
+import { buildCodexPiBridge, getCodexInstructions } from "@mariozechner/pi-ai";
 import { existsSync, readFileSync, writeFileSync } from "fs";
 import { basename, join } from "path";
 import { APP_NAME, getExportTemplateDir } from "../../config.js";
@@ -11,44 +11,34 @@ export interface ExportOptions {
 	themeName?: string;
 }
 
-interface ProviderSystemPrompt {
+/** Info about Codex injection to show inline with model_change entries */
-	title: string;
+interface CodexInjectionInfo {
-	content: string;
+	/** Codex instructions text */
-	note?: string;
+	instructions: string;
+	/** Bridge text (tool list) */
+	bridge: string;
 }
 
 /**
- * Build the provider-specific system prompt for display in exports.
+ * Build Codex injection info for display inline with model_change entries.
- * Currently only supports OpenAI Codex provider.
  */
-async function buildProviderSystemPrompt(state?: AgentState): Promise<ProviderSystemPrompt | undefined> {
+async function buildCodexInjectionInfo(tools?: AgentTool[]): Promise<CodexInjectionInfo | undefined> {
-	if (!state?.model || state.model.provider !== "openai-codex") {
+	// Try to get cached instructions for default model family
-		return undefined;
-	}
-
 	let instructions: string | null = null;
 	try {
-		instructions = await getCodexInstructions(state.model.id);
+		instructions = await getCodexInstructions("gpt-5.1-codex");
 	} catch {
-		// Cache miss or fetch failed - that's fine
+		// Cache miss - that's fine
 	}
 
-	const bridgeText = buildCodexPiBridge(state.tools);
+	const bridgeText = buildCodexPiBridge(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)",
+		instructions: instructionsText,
-		content,
+		bridge: bridgeText,
-		note,
 	};
 }
 
@@ -145,7 +135,8 @@ interface SessionData {
 	entries: ReturnType<SessionManager["getEntries"]>;
 	leafId: string | null;
 	systemPrompt?: string;
-	providerSystemPrompt?: ProviderSystemPrompt;
+	/** Info for rendering Codex injection inline with model_change entries */
+	codexInjectionInfo?: CodexInjectionInfo;
 	tools?: { name: string; description: string }[];
 }
 
@@ -209,7 +200,7 @@ export async function exportSessionToHtml(
 		entries: sm.getEntries(),
 		leafId: sm.getLeafId(),
 		systemPrompt: state?.systemPrompt,
-		providerSystemPrompt: await buildProviderSystemPrompt(state),
+		codexInjectionInfo: await buildCodexInjectionInfo(state?.tools),
 		tools: state?.tools?.map((t) => ({ name: t.name, description: t.description })),
 	};
 
@@ -229,7 +220,7 @@ export async function exportSessionToHtml(
  * Export session file to HTML (standalone, without AgentState).
  * Used by CLI for exporting arbitrary session files.
  */
-export function exportFromFile(inputPath: string, options?: ExportOptions | string): string {
+export async function exportFromFile(inputPath: string, options?: ExportOptions | string): Promise<string> {
 	const opts: ExportOptions = typeof options === "string" ? { outputPath: options } : options || {};
 
 	if (!existsSync(inputPath)) {
@@ -243,7 +234,7 @@ export function exportFromFile(inputPath: string, options?: ExportOptions | stri
 		entries: sm.getEntries(),
 		leafId: sm.getLeafId(),
 		systemPrompt: undefined,
-		providerSystemPrompt: undefined,
+		codexInjectionInfo: await buildCodexInjectionInfo(undefined),
 		tools: undefined,
 	};
 

packages/coding-agent/src/core/export-html/template.css

@@ -512,6 +512,39 @@
       font-weight: bold;
     }
 
+    .codex-bridge-toggle {
+      color: var(--muted);
+      cursor: pointer;
+      text-decoration: underline;
+      font-size: 10px;
+    }
+
+    .codex-bridge-toggle:hover {
+      color: var(--accent);
+    }
+
+    .codex-bridge-content {
+      display: none;
+      margin-top: 8px;
+      padding: 8px;
+      background: var(--exportCardBg);
+      border-radius: 4px;
+      font-size: 11px;
+      max-height: 300px;
+      overflow: auto;
+    }
+
+    .codex-bridge-content pre {
+      margin: 0;
+      white-space: pre-wrap;
+      word-break: break-word;
+      color: var(--muted);
+    }
+
+    .model-change.show-bridge .codex-bridge-content {
+      display: block;
+    }
+
     /* Compaction / Branch Summary - matches customMessage colors from TUI */
     .compaction {
       background: var(--customMessageBg);

packages/coding-agent/src/core/export-html/template.js

@@ -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, providerSystemPrompt, tools } = data;
+      const { header, entries, leafId: defaultLeafId, systemPrompt, codexInjectionInfo, tools } = data;
 
       // ============================================================
       // URL PARAMETER HANDLING
@@ -954,7 +954,17 @@
         }
 
         if (entry.type === 'model_change') {
-          return `<div class="model-change" id="${entryId}">${tsHtml}Switched to model: <span class="model-name">${escapeHtml(entry.provider)}/${escapeHtml(entry.modelId)}</span></div>`;
+          let html = `<div class="model-change" id="${entryId}">${tsHtml}Switched to model: <span class="model-name">${escapeHtml(entry.provider)}/${escapeHtml(entry.modelId)}</span>`;
+          
+          // Show expandable bridge prompt info when switching to openai-codex
+          if (entry.provider === 'openai-codex' && codexInjectionInfo) {
+            const fullContent = `# Codex Instructions\n${codexInjectionInfo.instructions}\n\n# Codex-Pi Bridge\n${codexInjectionInfo.bridge}`;
+            html += ` <span class="codex-bridge-toggle" onclick="event.stopPropagation(); this.parentElement.classList.toggle('show-bridge')">[bridge prompt]</span>`;
+            html += `<div class="codex-bridge-content"><pre>${escapeHtml(fullContent)}</pre></div>`;
+          }
+          
+          html += '</div>';
+          return html;
         }
 
         if (entry.type === 'compaction') {
@@ -1060,32 +1070,8 @@
             </div>
           </div>`;
 
-        // Render provider-injected system prompt (e.g., Codex) if present
+        // Render system prompt (user's base prompt, applies to all providers)
-        if (providerSystemPrompt) {
+        if (systemPrompt) {
-          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) {

packages/coding-agent/src/main.ts

@@ -345,7 +345,7 @@ export async function main(args: string[]) {
 	if (parsed.export) {
 		try {
 			const outputPath = parsed.messages.length > 0 ? parsed.messages[0] : undefined;
-			const result = exportFromFile(parsed.export, outputPath);
+			const result = await exportFromFile(parsed.export, outputPath);
 			console.log(`Exported to: ${result}`);
 			return;
 		} catch (error: unknown) {