@oh-my-pi/pi-coding-agent 3.6.1337 → 3.9.1337

package/src/modes/interactive/components/{footer.ts → status-line.ts}

@@ -6,15 +6,43 @@ import { type Component, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui"
 import type { AgentSession } from "../../../core/agent-session";
 import { theme } from "../theme/theme";
 
-// Nerd Font icons (matching Claude/statusline-nerd.sh)
+// Thinking level icons (Nerd Font)
+const THINKING_ICONS: Record<string, string> = {
+	minimal: "🤨 min",
+	low: "🤔 low",
+	medium: "🤓 mid",
+	high: "🤯 high",
+	xhigh: "🧠 xhi",
+};
+
+// Nerd Font icons
 const ICONS = {
 	model: "\uf4bc", //  robot/model
 	folder: "\uf115", //  folder
-	branch: "\uf126", //  git branch
+	branch: "\ue725", //  git branch
 	sep: "\ue0b1", //  powerline thin chevron
-	tokens: "\uf0ce", //  table/tokens
+	tokens: "\ue26b", //  coins
+	context: "\ue70f", //  window
+	auto: "\udb80\udc68", //  auto
 } as const;
 
+/** Create a colored text segment with background */
+function plSegment(content: string, fgAnsi: string, bgAnsi: string): string {
+	return `${bgAnsi}${fgAnsi} ${content} \x1b[0m`;
+}
+
+/** Create separator with background */
+function plSep(sepAnsi: string, bgAnsi: string): string {
+	return `${bgAnsi}${sepAnsi}${ICONS.sep}\x1b[0m`;
+}
+
+/** Create end cap - solid arrow transitioning bg to terminal default */
+function plEnd(bgAnsi: string): string {
+	// Use the bg color as fg for the arrow (creates the triangle effect)
+	const fgFromBg = bgAnsi.replace("\x1b[48;", "\x1b[38;");
+	return `${fgFromBg}\ue0b0\x1b[0m`;
+}
+
 /**
  * Sanitize text for display in a single-line status.
  * Removes newlines, tabs, carriage returns, and other control characters.
@@ -50,7 +78,7 @@ function findGitHeadPath(): string | null {
 /**
  * Footer component that shows pwd, token stats, and context usage
  */
-export class FooterComponent implements Component {
+export class StatusLineComponent implements Component {
 	private session: AgentSession;
 	private cachedBranch: string | null | undefined = undefined; // undefined = not checked yet, null = not in git repo, string = branch name
 	private gitWatcher: FSWatcher | null = null;
@@ -220,7 +248,7 @@ export class FooterComponent implements Component {
 		}
 	}
 
-	render(width: number): string[] {
+	private buildStatusLine(): string {
 		const state = this.session.state;
 
 		// Calculate cumulative usage from ALL session entries
@@ -264,132 +292,157 @@ export class FooterComponent implements Component {
 			return `${Math.round(n / 1000000)}M`;
 		};
 
-		// Powerline separator (very dim)
-		const sep = theme.fg("footerSep", ` ${ICONS.sep} `);
-
 		// ═══════════════════════════════════════════════════════════════════════
-		// SEGMENT 1: Model (Gold/White)
+		// SEGMENT 1: Model
 		// ═══════════════════════════════════════════════════════════════════════
-		const modelName = state.model?.id || "no-model";
-		let modelSegment = theme.fg("footerModel", `${ICONS.model} ${modelName}`);
+		let modelName = state.model?.name || state.model?.id || "no-model";
+		// Strip "Claude " prefix for brevity
+		if (modelName.startsWith("Claude ")) {
+			modelName = modelName.slice(7);
+		}
+		let modelContent = `${ICONS.model} ${modelName}`;
 		if (state.model?.reasoning) {
 			const level = state.thinkingLevel || "off";
 			if (level !== "off") {
-				modelSegment += theme.fg("footerSep", " · ") + theme.fg("footerModel", level);
+				modelContent += ` · ${THINKING_ICONS[level] ?? level}`;
 			}
 		}
 
 		// ═══════════════════════════════════════════════════════════════════════
-		// SEGMENT 2: Path (Cyan with dim separators)
-		// Replace home with ~, strip /work/, color separators
+		// SEGMENT 2: Path
 		// ═══════════════════════════════════════════════════════════════════════
 		let pwd = process.cwd();
 		const home = process.env.HOME || process.env.USERPROFILE;
 		if (home && pwd.startsWith(home)) {
 			pwd = `~${pwd.slice(home.length)}`;
 		}
-		// Strip /work/ prefix
 		if (pwd.startsWith("/work/")) {
 			pwd = pwd.slice(6);
 		}
-		// Color path with dim separators: ~/foo/bar -> ~/foo/bar (separators dim)
-		const pathColored = pwd
-			.split("/")
-			.map((part) => theme.fg("footerPath", part))
-			.join(theme.fg("footerSep", "/"));
-		const pathSegment = theme.fg("footerIcon", `${ICONS.folder}  `) + pathColored;
+		const pathContent = `${ICONS.folder} ${pwd}`;
 
 		// ═══════════════════════════════════════════════════════════════════════
-		// SEGMENT 3: Git Branch + Status (Green/Yellow)
+		// SEGMENT 3: Git Branch + Status
 		// ═══════════════════════════════════════════════════════════════════════
 		const branch = this.getCurrentBranch();
-		let gitSegment = "";
+		let gitContent = "";
+		let gitColorName: "statusLineGitClean" | "statusLineGitDirty" = "statusLineGitClean";
 		if (branch) {
 			const gitStatus = this.getGitStatus();
 			const isDirty = gitStatus && (gitStatus.staged > 0 || gitStatus.unstaged > 0 || gitStatus.untracked > 0);
+			gitColorName = isDirty ? "statusLineGitDirty" : "statusLineGitClean";
 
-			// Branch name - green if clean, yellow if dirty
-			const branchColor = isDirty ? "footerDirty" : "footerBranch";
-			gitSegment = theme.fg("footerIcon", `${ICONS.branch} `) + theme.fg(branchColor, branch);
+			gitContent = `${ICONS.branch} ${branch}`;
 
-			// Add status indicators
 			if (gitStatus) {
 				const indicators: string[] = [];
 				if (gitStatus.unstaged > 0) {
-					indicators.push(theme.fg("footerDirty", `*${gitStatus.unstaged}`));
+					indicators.push(theme.fg("statusLineDirty", `*${gitStatus.unstaged}`));
 				}
 				if (gitStatus.staged > 0) {
-					indicators.push(theme.fg("footerStaged", `+${gitStatus.staged}`));
+					indicators.push(theme.fg("statusLineStaged", `+${gitStatus.staged}`));
 				}
 				if (gitStatus.untracked > 0) {
-					indicators.push(theme.fg("footerUntracked", `!${gitStatus.untracked}`));
+					indicators.push(theme.fg("statusLineUntracked", `?${gitStatus.untracked}`));
 				}
 				if (indicators.length > 0) {
-					gitSegment += ` ${indicators.join(" ")}`;
+					gitContent += ` ${indicators.join(" ")}`;
 				}
 			}
 		}
 
 		// ═══════════════════════════════════════════════════════════════════════
-		// SEGMENT 4: Stats (Pink/Magenta tones)
-		// Concise: total tokens, cost, context%
+		// SEGMENT 4: Context (window usage)
 		// ═══════════════════════════════════════════════════════════════════════
-		const statParts: string[] = [];
+		const autoIndicator = this.autoCompactEnabled ? ` ${ICONS.auto}` : "";
+		const contextText = `${contextPercentValue.toFixed(1)}%/${formatTokens(contextWindow)}${autoIndicator}`;
+		let contextContent: string;
+		if (contextPercentValue > 90) {
+			contextContent = `${ICONS.context} ${theme.fg("error", contextText)}`;
+		} else if (contextPercentValue > 70) {
+			contextContent = `${ICONS.context} ${theme.fg("warning", contextText)}`;
+		} else {
+			contextContent = `${ICONS.context} ${contextText}`;
+		}
+
+		// ═══════════════════════════════════════════════════════════════════════
+		// SEGMENT 5: Spend (tokens + cost)
+		// ═══════════════════════════════════════════════════════════════════════
+		const spendParts: string[] = [];
 
-		// Total tokens (input + output + cache)
 		const totalTokens = totalInput + totalOutput + totalCacheRead + totalCacheWrite;
 		if (totalTokens) {
-			statParts.push(theme.fg("footerOutput", `${ICONS.tokens} ${formatTokens(totalTokens)}`));
+			spendParts.push(`${ICONS.tokens} ${formatTokens(totalTokens)}`);
 		}
 
-		// Cost (pink)
 		const usingSubscription = state.model ? this.session.modelRegistry.isUsingOAuth(state.model) : false;
 		if (totalCost || usingSubscription) {
-			const costDisplay = `$${totalCost.toFixed(3)}${usingSubscription ? " (sub)" : ""}`;
-			statParts.push(theme.fg("footerCost", costDisplay));
+			const costDisplay = `$${totalCost.toFixed(2)}${usingSubscription ? " (sub)" : ""}`;
+			spendParts.push(costDisplay);
 		}
 
-		// Context percentage with severity coloring
-		const autoIndicator = this.autoCompactEnabled ? " (auto)" : "";
-		const contextDisplay = `${contextPercentValue.toFixed(1)}%/${formatTokens(contextWindow)}${autoIndicator}`;
-		let contextColored: string;
-		if (contextPercentValue > 90) {
-			contextColored = theme.fg("error", contextDisplay);
-		} else if (contextPercentValue > 70) {
-			contextColored = theme.fg("warning", contextDisplay);
-		} else {
-			contextColored = theme.fg("footerSep", contextDisplay);
-		}
-		statParts.push(contextColored);
-
-		const statsSegment = statParts.join("  ");
+		const spendContent = theme.fg("statusLineCost", spendParts.join(" · "));
 
 		// ═══════════════════════════════════════════════════════════════════════
-		// Assemble single powerline-style line
-		// [Model] > [Path] > [Git] > [Stats]
+		// Assemble: [Model] > [Path] > [Git?] > [Context] > [Spend] >
 		// ═══════════════════════════════════════════════════════════════════════
-		const segments = [modelSegment, pathSegment];
-		if (gitSegment) segments.push(gitSegment);
-		segments.push(statsSegment);
+		const bgAnsi = theme.getBgAnsi("statusLineBg");
+		const sepAnsi = theme.getFgAnsi("statusLineSep");
+
+		let statusLine = "";
+
+		// Model segment
+		statusLine += plSegment(modelContent, theme.getFgAnsi("statusLineModel"), bgAnsi);
+		statusLine += plSep(sepAnsi, bgAnsi);
 
-		let statusLine = segments.join(sep);
+		// Path segment
+		statusLine += plSegment(pathContent, theme.getFgAnsi("statusLinePath"), bgAnsi);
 
-		// Truncate if needed
-		if (visibleWidth(statusLine) > width) {
-			statusLine = truncateToWidth(statusLine, width, theme.fg("footerSep", "…"));
+		if (gitContent) {
+			statusLine += plSep(sepAnsi, bgAnsi);
+			statusLine += plSegment(gitContent, theme.getFgAnsi(gitColorName), bgAnsi);
 		}
 
-		const lines = [statusLine];
+		// Context segment
+		statusLine += plSep(sepAnsi, bgAnsi);
+		statusLine += plSegment(contextContent, theme.getFgAnsi("statusLineContext"), bgAnsi);
+
+		// Spend segment
+		statusLine += plSep(sepAnsi, bgAnsi);
+		statusLine += plSegment(spendContent, theme.getFgAnsi("statusLineSpend"), bgAnsi);
+
+		// End cap (solid arrow to terminal bg)
+		statusLine += plEnd(bgAnsi);
+
+		return statusLine;
+	}
 
-		// Hook statuses (optional second line)
-		if (this.hookStatuses.size > 0) {
-			const sortedStatuses = Array.from(this.hookStatuses.entries())
-				.sort(([a], [b]) => a.localeCompare(b))
-				.map(([, text]) => sanitizeStatusText(text));
-			const hookLine = sortedStatuses.join(" ");
-			lines.push(truncateToWidth(hookLine, width, theme.fg("footerSep", "…")));
+	/**
+	 * Get the status line content for use as editor top border.
+	 * Returns the content string and its visible width.
+	 */
+	getTopBorder(_width: number): { content: string; width: number } {
+		const content = this.buildStatusLine();
+		return {
+			content,
+			width: visibleWidth(content),
+		};
+	}
+
+	/**
+	 * Render only hook statuses (if any).
+	 * Used when footer is integrated into editor border.
+	 */
+	render(width: number): string[] {
+		// Only render hook statuses - main status is in editor's top border
+		if (this.hookStatuses.size === 0) {
+			return [];
 		}
 
-		return lines;
+		const sortedStatuses = Array.from(this.hookStatuses.entries())
+			.sort(([a], [b]) => a.localeCompare(b))
+			.map(([, text]) => sanitizeStatusText(text));
+		const hookLine = sortedStatuses.join(" ");
+		return [truncateToWidth(hookLine, width, theme.fg("statusLineSep", "…"))];
 	}
 }

package/src/modes/interactive/components/tool-execution.ts

@@ -503,19 +503,19 @@ export class ToolExecutionComponent extends Container {
 			}
 
 			// Show LSP diagnostics if available
-			if (this.result?.details?.diagnostics?.available) {
+			if (this.result?.details?.diagnostics) {
 				const diag = this.result.details.diagnostics;
-				if (diag.diagnostics.length > 0) {
-					const icon = diag.hasErrors ? theme.fg("error", "●") : theme.fg("warning", "●");
+				if (diag.messages.length > 0) {
+					const icon = diag.errored ? theme.fg("error", "●") : theme.fg("warning", "●");
 					text += `\n\n${icon} ${theme.fg("toolTitle", "LSP Diagnostics")} ${theme.fg("dim", `(${diag.summary})`)}`;
-					const maxDiags = this.expanded ? diag.diagnostics.length : 5;
-					const displayDiags = diag.diagnostics.slice(0, maxDiags);
+					const maxDiags = this.expanded ? diag.messages.length : 5;
+					const displayDiags = diag.messages.slice(0, maxDiags);
 					for (const d of displayDiags) {
 						const color = d.includes("[error]") ? "error" : d.includes("[warning]") ? "warning" : "dim";
 						text += `\n  ${theme.fg(color, d)}`;
 					}
-					if (diag.diagnostics.length > maxDiags) {
-						text += theme.fg("dim", `\n  ... (${diag.diagnostics.length - maxDiags} more)`);
+					if (diag.messages.length > maxDiags) {
+						text += theme.fg("dim", `\n  ... (${diag.messages.length - maxDiags} more)`);
 					}
 				}
 			}
@@ -552,19 +552,19 @@ export class ToolExecutionComponent extends Container {
 			}
 
 			// Show LSP diagnostics if available
-			if (this.result?.details?.diagnostics?.available) {
+			if (this.result?.details?.diagnostics) {
 				const diag = this.result.details.diagnostics;
-				if (diag.diagnostics.length > 0) {
-					const icon = diag.hasErrors ? theme.fg("error", "●") : theme.fg("warning", "●");
+				if (diag.messages.length > 0) {
+					const icon = diag.errored ? theme.fg("error", "●") : theme.fg("warning", "●");
 					text += `\n\n${icon} ${theme.fg("toolTitle", "LSP Diagnostics")} ${theme.fg("dim", `(${diag.summary})`)}`;
-					const maxDiags = this.expanded ? diag.diagnostics.length : 5;
-					const displayDiags = diag.diagnostics.slice(0, maxDiags);
+					const maxDiags = this.expanded ? diag.messages.length : 5;
+					const displayDiags = diag.messages.slice(0, maxDiags);
 					for (const d of displayDiags) {
 						const color = d.includes("[error]") ? "error" : d.includes("[warning]") ? "warning" : "dim";
 						text += `\n  ${theme.fg(color, d)}`;
 					}
-					if (diag.diagnostics.length > maxDiags) {
-						text += theme.fg("dim", `\n  ... (${diag.diagnostics.length - maxDiags} more)`);
+					if (diag.messages.length > maxDiags) {
+						text += theme.fg("dim", `\n  ... (${diag.messages.length - maxDiags} more)`);
 					}
 				}
 			}

package/src/modes/interactive/interactive-mode.ts

@@ -43,7 +43,6 @@ import { CompactionSummaryMessageComponent } from "./components/compaction-summa
 import { CustomEditor } from "./components/custom-editor";
 import { DynamicBorder } from "./components/dynamic-border";
 import { ExtensionDashboard } from "./components/extensions";
-import { FooterComponent } from "./components/footer";
 import { HookEditorComponent } from "./components/hook-editor";
 import { HookInputComponent } from "./components/hook-input";
 import { HookMessageComponent } from "./components/hook-message";
@@ -52,6 +51,7 @@ import { ModelSelectorComponent } from "./components/model-selector";
 import { OAuthSelectorComponent } from "./components/oauth-selector";
 import { SessionSelectorComponent } from "./components/session-selector";
 import { SettingsSelectorComponent } from "./components/settings-selector";
+import { StatusLineComponent } from "./components/status-line";
 import { ToolExecutionComponent } from "./components/tool-execution";
 import { TreeSelectorComponent } from "./components/tree-selector";
 import { TtsrNotificationComponent } from "./components/ttsr-notification";
@@ -85,7 +85,7 @@ export class InteractiveMode {
 	private statusContainer: Container;
 	private editor: CustomEditor;
 	private editorContainer: Container;
-	private footer: FooterComponent;
+	private statusLine: StatusLineComponent;
 	private version: string;
 	private isInitialized = false;
 	private onInputCallback?: (input: { text: string; images?: ImageContent[] }) => void;
@@ -143,9 +143,6 @@ export class InteractiveMode {
 	// Custom tools for custom rendering
 	private customTools: Map<string, LoadedCustomTool>;
 
-	// Title generation state
-	private titleGenerationAttempted = false;
-
 	// Convenience accessors
 	private get agent() {
 		return this.session.agent;
@@ -179,8 +176,8 @@ export class InteractiveMode {
 		this.editor = new CustomEditor(getEditorTheme());
 		this.editorContainer = new Container();
 		this.editorContainer.addChild(this.editor);
-		this.footer = new FooterComponent(session);
-		this.footer.setAutoCompactEnabled(session.autoCompactionEnabled);
+		this.statusLine = new StatusLineComponent(session);
+		this.statusLine.setAutoCompactEnabled(session.autoCompactionEnabled);
 
 		// Define slash commands for autocomplete
 		const slashCommands: SlashCommand[] = [
@@ -261,7 +258,6 @@ export class InteractiveMode {
 		const existingTitle = this.sessionManager.getSessionTitle();
 		if (existingTitle) {
 			setTerminalTitle(`pi: ${existingTitle}`);
-			this.titleGenerationAttempted = true; // Don't try to generate again
 		}
 
 		// Setup UI layout
@@ -291,7 +287,7 @@ export class InteractiveMode {
 		this.ui.addChild(this.statusContainer);
 		this.ui.addChild(new Spacer(1));
 		this.ui.addChild(this.editorContainer);
-		this.ui.addChild(this.footer);
+		this.ui.addChild(this.statusLine); // Only renders hook statuses (main status in editor border)
 		this.ui.setFocus(this.editor);
 
 		this.setupKeyHandlers();
@@ -315,9 +311,13 @@ export class InteractiveMode {
 		});
 
 		// Set up git branch watcher
-		this.footer.watchBranch(() => {
+		this.statusLine.watchBranch(() => {
+			this.updateEditorTopBorder();
 			this.ui.requestRender();
 		});
+
+		// Initial top border update
+		this.updateEditorTopBorder();
 	}
 
 	// =========================================================================
@@ -401,7 +401,6 @@ export class InteractiveMode {
 				this.streamingComponent = undefined;
 				this.streamingMessage = undefined;
 				this.pendingTools.clear();
-				this.titleGenerationAttempted = false;
 
 				this.chatContainer.addChild(new Spacer(1));
 				this.chatContainer.addChild(new Text(`${theme.fg("accent", "✓ New session started")}`, 1, 1));
@@ -497,7 +496,7 @@ export class InteractiveMode {
 	 * Set hook status text in the footer.
 	 */
 	private setHookStatus(key: string, text: string | undefined): void {
-		this.footer.setHookStatus(key, text);
+		this.statusLine.setHookStatus(key, text);
 		this.ui.requestRender();
 	}
 
@@ -903,6 +902,21 @@ export class InteractiveMode {
 			// First, move any pending bash components to chat
 			this.flushPendingBashComponents();
 
+			// Generate session title on first message
+			const hasUserMessages = this.agent.state.messages.some((m) => m.role === "user");
+			if (!hasUserMessages && !this.sessionManager.getSessionTitle()) {
+				const registry = this.session.modelRegistry;
+				const smolModel = this.settingsManager.getModelRole("smol");
+				generateSessionTitle(text, registry, smolModel)
+					.then((title) => {
+						if (title) {
+							this.sessionManager.setSessionTitle(title);
+							setTerminalTitle(`omp: ${title}`);
+						}
+					})
+					.catch(() => {});
+			}
+
 			if (this.onInputCallback) {
 				// Include any pending images from clipboard paste
 				const images = this.pendingImages.length > 0 ? [...this.pendingImages] : undefined;
@@ -924,7 +938,8 @@ export class InteractiveMode {
 			await this.init();
 		}
 
-		this.footer.invalidate();
+		this.statusLine.invalidate();
+		this.updateEditorTopBorder();
 
 		switch (event.type) {
 			case "agent_start":
@@ -1029,7 +1044,8 @@ export class InteractiveMode {
 					}
 					this.streamingComponent = undefined;
 					this.streamingMessage = undefined;
-					this.footer.invalidate();
+					this.statusLine.invalidate();
+					this.updateEditorTopBorder();
 				}
 				this.ui.requestRender();
 				break;
@@ -1085,12 +1101,6 @@ export class InteractiveMode {
 				}
 				this.pendingTools.clear();
 				this.ui.requestRender();
-
-				// Generate session title after first turn (if not already titled)
-				if (!this.titleGenerationAttempted && !this.sessionManager.getSessionTitle()) {
-					this.titleGenerationAttempted = true;
-					this.maybeGenerateTitle();
-				}
 				break;
 
 			case "auto_compaction_start": {
@@ -1143,7 +1153,8 @@ export class InteractiveMode {
 						summary: event.result.summary,
 						timestamp: Date.now(),
 					});
-					this.footer.invalidate();
+					this.statusLine.invalidate();
+					this.updateEditorTopBorder();
 				}
 				this.ui.requestRender();
 				break;
@@ -1320,7 +1331,7 @@ export class InteractiveMode {
 		this.pendingTools.clear();
 
 		if (options.updateFooter) {
-			this.footer.invalidate();
+			this.statusLine.invalidate();
 			this.updateEditorBorderColor();
 		}
 
@@ -1488,17 +1499,24 @@ export class InteractiveMode {
 			const level = this.session.thinkingLevel || "off";
 			this.editor.borderColor = theme.getThinkingBorderColor(level);
 		}
+		// Update footer content in editor's top border
+		this.updateEditorTopBorder();
 		this.ui.requestRender();
 	}
 
+	private updateEditorTopBorder(): void {
+		const width = this.ui.getWidth();
+		const topBorder = this.statusLine.getTopBorder(width);
+		this.editor.setTopBorder(topBorder);
+	}
+
 	private cycleThinkingLevel(): void {
 		const newLevel = this.session.cycleThinkingLevel();
 		if (newLevel === undefined) {
 			this.showStatus("Current model does not support thinking");
 		} else {
-			this.footer.invalidate();
+			this.statusLine.invalidate();
 			this.updateEditorBorderColor();
-			this.showStatus(`Thinking level: ${newLevel}`);
 		}
 	}
 
@@ -1509,7 +1527,7 @@ export class InteractiveMode {
 				const msg = this.session.scopedModels.length > 0 ? "Only one model in scope" : "Only one model available";
 				this.showStatus(msg);
 			} else {
-				this.footer.invalidate();
+				this.statusLine.invalidate();
 				this.updateEditorBorderColor();
 				const thinkingStr =
 					result.model.reasoning && result.thinkingLevel !== "off" ? ` (thinking: ${result.thinkingLevel})` : "";
@@ -1635,42 +1653,6 @@ export class InteractiveMode {
 		this.ui.requestRender();
 	}
 
-	/**
-	 * Generate a title for the session based on the first user message.
-	 * Runs in background, doesn't block UI.
-	 */
-	private maybeGenerateTitle(): void {
-		// Find the first user message
-		const messages = this.agent.state.messages;
-		const firstUserMessage = messages.find((m) => m.role === "user");
-		if (!firstUserMessage) return;
-
-		// Extract text content
-		let messageText = "";
-		for (const content of firstUserMessage.content) {
-			if (typeof content === "string") {
-				messageText += content;
-			} else if (content.type === "text") {
-				messageText += content.text;
-			}
-		}
-		if (!messageText.trim()) return;
-
-		// Generate title in background
-		const registry = this.session.modelRegistry;
-		const smolModel = this.settingsManager.getModelRole("smol");
-		generateSessionTitle(messageText, registry, smolModel)
-			.then((title) => {
-				if (title) {
-					this.sessionManager.setSessionTitle(title);
-					setTerminalTitle(`omp: ${title}`);
-				}
-			})
-			.catch(() => {
-				// Errors logged via logger in title-generator
-			});
-	}
-
 	private updatePendingMessagesDisplay(): void {
 		this.pendingMessagesContainer.clear();
 		const queuedMessages = this.session.getQueuedMessages();
@@ -1781,7 +1763,7 @@ export class InteractiveMode {
 			// Session-managed settings (not in SettingsManager)
 			case "autoCompact":
 				this.session.setAutoCompactionEnabled(value as boolean);
-				this.footer.setAutoCompactEnabled(value as boolean);
+				this.statusLine.setAutoCompactEnabled(value as boolean);
 				break;
 			case "queueMode":
 				this.session.setQueueMode(value as "all" | "one-at-a-time");
@@ -1791,7 +1773,7 @@ export class InteractiveMode {
 				break;
 			case "thinkingLevel":
 				this.session.setThinkingLevel(value as ThinkingLevel);
-				this.footer.invalidate();
+				this.statusLine.invalidate();
 				this.updateEditorBorderColor();
 				break;
 
@@ -1840,7 +1822,7 @@ export class InteractiveMode {
 						// Only update agent state for default role
 						if (role === "default") {
 							await this.session.setModel(model, role);
-							this.footer.invalidate();
+							this.statusLine.invalidate();
 							this.updateEditorBorderColor();
 						}
 						// For other roles (small), just show status - settings already updated by selector
@@ -2076,13 +2058,7 @@ export class InteractiveMode {
 									}
 									this.ui.requestRender();
 
-									const openCmd =
-										process.platform === "darwin"
-											? "open"
-											: process.platform === "win32"
-												? "start"
-												: "xdg-open";
-									Bun.spawn([openCmd, info.url], { stdin: "ignore", stdout: "ignore", stderr: "ignore" });
+									this.openInBrowser(info.url);
 								},
 								onPrompt: async (prompt: { message: string; placeholder?: string }) => {
 									this.chatContainer.addChild(new Spacer(1));
@@ -2156,6 +2132,11 @@ export class InteractiveMode {
 	// Command handlers
 	// =========================================================================
 
+	private openInBrowser(urlOrPath: string): void {
+		const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+		Bun.spawn([openCmd, urlOrPath], { stdin: "ignore", stdout: "ignore", stderr: "ignore" });
+	}
+
 	private async handleExportCommand(text: string): Promise<void> {
 		const parts = text.split(/\s+/);
 		const arg = parts.length > 1 ? parts[1] : undefined;
@@ -2180,6 +2161,7 @@ export class InteractiveMode {
 		try {
 			const filePath = await this.session.exportToHtml(arg);
 			this.showStatus(`Session exported to: ${filePath}`);
+			this.openInBrowser(filePath);
 		} catch (error: unknown) {
 			this.showError(`Failed to export session: ${error instanceof Error ? error.message : "Unknown error"}`);
 		}
@@ -2293,6 +2275,7 @@ export class InteractiveMode {
 			// Create the preview URL
 			const previewUrl = `https://gistpreview.github.io/?${gistId}`;
 			this.showStatus(`Share URL: ${previewUrl}\nGist: ${gistUrl}`);
+			this.openInBrowser(previewUrl);
 		} catch (error: unknown) {
 			if (!loader.signal.aborted) {
 				restoreEditor();
@@ -2564,7 +2547,8 @@ export class InteractiveMode {
 			const msg = createCompactionSummaryMessage(result.summary, result.tokensBefore, new Date().toISOString());
 			this.addMessageToChat(msg);
 
-			this.footer.invalidate();
+			this.statusLine.invalidate();
+			this.updateEditorTopBorder();
 		} catch (error) {
 			const message = error instanceof Error ? error.message : String(error);
 			if (message === "Compaction cancelled" || (error instanceof Error && error.name === "AbortError")) {
@@ -2584,7 +2568,7 @@ export class InteractiveMode {
 			this.loadingAnimation.stop();
 			this.loadingAnimation = undefined;
 		}
-		this.footer.dispose();
+		this.statusLine.dispose();
 		if (this.unsubscribe) {
 			this.unsubscribe();
 		}