@oh-my-pi/pi-coding-agent 16.0.11 → 16.1.0

package/src/lsp/render.ts

@@ -223,10 +223,10 @@ function renderHover(
 	const langLabel = lang ? theme.fg("mdCodeBlockBorder", ` ${lang}`) : "";
 
 	if (expanded) {
-		const h = theme.boxSharp.horizontal;
-		const v = theme.boxSharp.vertical;
-		const top = `${theme.boxSharp.topLeft}${h.repeat(3)}`;
-		const bottom = `${theme.boxSharp.bottomLeft}${h.repeat(3)}`;
+		const h = theme.boxRound.horizontal;
+		const v = theme.boxRound.vertical;
+		const top = `${theme.boxRound.topLeft}${h.repeat(3)}`;
+		const bottom = `${theme.boxRound.bottomLeft}${h.repeat(3)}`;
 		let output = `${icon}${langLabel}`;
 		if (beforeCode) {
 			for (const line of beforeCode.split("\n")) {
@@ -254,9 +254,9 @@ function renderHover(
 		const preview = truncateToWidth(beforeCode, TRUNCATE_LENGTHS.TITLE);
 		output += `\n ${theme.fg("dim", theme.tree.branch)} ${theme.fg("muted", preview)}`;
 	}
-	const h = theme.boxSharp.horizontal;
-	const v = theme.boxSharp.vertical;
-	const bottom = `${theme.boxSharp.bottomLeft}${h.repeat(3)}`;
+	const h = theme.boxRound.horizontal;
+	const v = theme.boxRound.vertical;
+	const bottom = `${theme.boxRound.bottomLeft}${h.repeat(3)}`;
 	output += `\n ${theme.fg("mdCodeBlockBorder", v)} ${firstCodeLine}`;
 
 	if (codeLines.length > 1) {

package/src/modes/components/__tests__/skill-message.test.ts

@@ -0,0 +1,92 @@
+import { beforeAll, describe, expect, it } from "bun:test";
+import * as os from "node:os";
+import * as path from "node:path";
+import { Settings } from "../../../config/settings";
+import type { CustomMessage, SkillPromptDetails } from "../../../session/messages";
+import { getThemeByName, setThemeInstance, type Theme } from "../../theme/theme";
+import { SkillMessageComponent } from "../skill-message";
+
+// Drop SGR colors and OSC 8 hyperlink wrappers so assertions see the visible text only.
+const strip = (lines: readonly string[]): string =>
+	lines
+		.join("\n")
+		.replace(/\x1b\]8;[^\x1b\x07]*(?:\x07|\x1b\\)/g, "")
+		.replace(/\x1b\[[0-9;]*m/g, "");
+
+function makeMessage(
+	details: SkillPromptDetails,
+	content = "Use the atomic-commit workflow.",
+): CustomMessage<SkillPromptDetails> {
+	return { role: "custom", customType: "skill-prompt", content, display: true, details, timestamp: Date.now() };
+}
+
+describe("SkillMessageComponent", () => {
+	let uiTheme: Theme;
+
+	beforeAll(async () => {
+		await Settings.init({ inMemory: true });
+		const loaded = await getThemeByName("dark");
+		if (!loaded) throw new Error("theme unavailable");
+		uiTheme = loaded;
+		setThemeInstance(uiTheme);
+	});
+
+	const skillPath = path.join(os.homedir(), ".agent/skills/atomic-commit/SKILL.md");
+
+	it("renders a compact, outlined card instead of the archaic key:value dump", () => {
+		const component = new SkillMessageComponent(
+			makeMessage({ name: "atomic-commit", path: skillPath, lineCount: 88 }),
+		);
+		const text = strip(component.render(80));
+
+		// New look: an icon-tagged "skill" header with the name and a single meta line.
+		expect(text).toContain("skill");
+		expect(text).toContain("atomic-commit");
+		expect(text).toContain("88 lines");
+
+		// The card is drawn with an outline.
+		expect(text).toContain(uiTheme.boxRound.topLeft);
+		expect(text).toContain(uiTheme.boxRound.bottomRight);
+
+		// Path is home-shortened and never leaks the absolute home dir.
+		expect(text).toContain("~/.agent/skills/atomic-commit/SKILL.md");
+		expect(text).not.toContain(os.homedir());
+
+		// The old archaic framing is gone.
+		expect(text).not.toContain("[skill]");
+		expect(text).not.toContain("Skill:");
+		expect(text).not.toContain("Path:");
+		expect(text).not.toContain("Prompt:");
+	});
+
+	it("flattens multi-line args onto the single-line header", () => {
+		const component = new SkillMessageComponent(
+			makeMessage({ name: "atomic-commit", path: skillPath, lineCount: 88, args: "stage all\nthen split" }),
+		);
+		const text = strip(component.render(80));
+		// Whitespace (including the newline) collapsed to single spaces so the header can't break.
+		expect(text).toContain("stage all then split");
+		expect(text).not.toContain("stage all\nthen split");
+	});
+
+	it("uses a singular unit for a one-line prompt", () => {
+		const component = new SkillMessageComponent(makeMessage({ name: "tiny", path: skillPath, lineCount: 1 }));
+		const text = strip(component.render(80));
+		expect(text).toContain("1 line");
+		expect(text).not.toContain("1 lines");
+	});
+
+	it("reveals the prompt body under a calm subheader only when expanded", () => {
+		const details: SkillPromptDetails = { name: "atomic-commit", path: skillPath, lineCount: 88 };
+		const body = "Step one: stage hunks.";
+
+		const collapsed = new SkillMessageComponent(makeMessage(details, body));
+		expect(strip(collapsed.render(80))).not.toContain(body);
+
+		const expanded = new SkillMessageComponent(makeMessage(details, body));
+		expanded.setExpanded(true);
+		const text = strip(expanded.render(80));
+		expect(text).toContain("prompt");
+		expect(text).toContain(body);
+	});
+});

package/src/modes/components/agent-dashboard.ts

@@ -321,7 +321,7 @@ class TwoColumnBody implements Component {
 		const rightLines = this.rightPane.render(rightWidth);
 		const lineCount = this.maxHeight;
 		const out: string[] = [];
-		const separator = theme.fg("dim", ` ${theme.boxSharp.vertical} `);
+		const separator = theme.fg("dim", ` ${theme.boxRound.vertical} `);
 
 		for (let i = 0; i < lineCount; i++) {
 			const left = truncateToWidth(leftLines[i] ?? "", leftWidth);

package/src/modes/components/assistant-message.ts

@@ -5,6 +5,7 @@ import { getMarkdownTheme, theme } from "../../modes/theme/theme";
 import { resolveAbortLabel, shouldRenderAbortReason } from "../../session/messages";
 import { getPreviewLines, resolveImageOptions, TRUNCATE_LENGTHS } from "../../tools/render-utils";
 import { canonicalizeMessage } from "../../utils/thinking-display";
+import { type CacheInvalidation, CacheInvalidationMarkerComponent } from "./cache-invalidation-marker";
 
 /**
  * Max lines of a turn-ending provider error rendered inline in the transcript.
@@ -29,6 +30,7 @@ const THINKING_DOTS_FRAME_MS = 320;
  */
 export class AssistantMessageComponent extends Container {
 	#contentContainer: Container;
+	#markerSlot: Container;
 	#lastMessage?: AssistantMessage;
 	#toolImagesByCallId = new Map<string, ImageContent[]>();
 	#convertedKittyImages = new Map<string, ImageContent>();
@@ -75,6 +77,11 @@ export class AssistantMessageComponent extends Container {
 		super();
 		this.#transcriptBlockFinalized = message !== undefined;
 
+		// Slim cache-invalidation divider, populated above the content when this
+		// turn's request lost the prompt cache (see setCacheInvalidation).
+		this.#markerSlot = new Container();
+		this.addChild(this.#markerSlot);
+
 		// Container for text/thinking content
 		this.#contentContainer = new Container();
 		this.addChild(this.#contentContainer);
@@ -84,6 +91,20 @@ export class AssistantMessageComponent extends Container {
 		}
 	}
 
+	/**
+	 * Show or clear the slim cache-invalidation divider above this turn. Set at
+	 * `message_end` (live) or during rebuild, once the turn's usage is known and
+	 * compared against the previous turn's cache footprint. Bumps the transcript
+	 * block version so the change repaints even after content finalized.
+	 */
+	setCacheInvalidation(info: CacheInvalidation | undefined): void {
+		this.#markerSlot.clear();
+		if (info) {
+			this.#markerSlot.addChild(new CacheInvalidationMarkerComponent(info));
+		}
+		this.#blockVersion++;
+	}
+
 	override invalidate(): void {
 		super.invalidate();
 		// Theme/symbol changes arrive via invalidate(). Fast-path children captured

package/src/modes/components/cache-invalidation-marker.ts

@@ -0,0 +1,84 @@
+import type { Usage } from "@oh-my-pi/pi-ai";
+import type { Component } from "@oh-my-pi/pi-tui";
+import { formatNumber } from "@oh-my-pi/pi-utils";
+import { theme } from "../../modes/theme/theme";
+
+/**
+ * Minimum cached prefix (read + write) the previous turn must have established
+ * before a collapse on the current turn counts as an invalidation. Filters out
+ * tiny contexts and providers below the cacheable-prefix floor, where a zero
+ * `cacheRead` is expected rather than a reset.
+ */
+const MIN_CACHE_FOOTPRINT = 2048;
+
+/** A prompt-cache invalidation detected from a turn's usage. */
+export interface CacheInvalidation {
+	/** Prompt tokens the cold turn had to (re)process instead of reading from cache. */
+	reprocessedTokens: number;
+}
+
+/**
+ * Decide whether `current` turn lost the prompt cache that `prev` established.
+ *
+ * The provider reports a warm prefix as `cacheRead`; a model/thinking/tool/
+ * system-prompt change (or a history rewrite) breaks the prefix, so the next
+ * request reads nothing from cache and re-pays for the whole prompt. We detect
+ * that as: the previous turn cached a meaningful prefix, yet this turn's
+ * `cacheRead` collapsed to zero while it still reprocessed a non-trivial prompt.
+ * Returns `undefined` (no marker) for the first turn, tiny contexts, and turns
+ * that reused any cache.
+ */
+export function detectCacheInvalidation(prev: Usage | undefined, current: Usage): CacheInvalidation | undefined {
+	if (!prev) return undefined;
+	const prevFootprint = prev.cacheRead + prev.cacheWrite;
+	if (prevFootprint < MIN_CACHE_FOOTPRINT) return undefined;
+	// Any cache reuse this turn means the prefix survived (at least partly).
+	if (current.cacheRead > 0) return undefined;
+	const reprocessedTokens = current.cacheWrite + current.input;
+	if (reprocessedTokens < MIN_CACHE_FOOTPRINT) return undefined;
+	return { reprocessedTokens };
+}
+
+const CACHE_INVALIDATION_RULE_WIDTH = 10;
+
+/**
+ * Slim left-aligned divider rendered above an assistant turn whose request lost
+ * the prompt cache. Mirrors the compaction divider's banner styling but spans
+ * only a short rule plus label (not the full width) and carries no expandable
+ * detail:
+ *
+ *   ────────── ⊘ cache miss · 50.9k tokens
+ */
+export class CacheInvalidationMarkerComponent implements Component {
+	#cache?: { width: number; lines: string[] };
+
+	constructor(private readonly info: CacheInvalidation) {}
+
+	invalidate(): void {
+		this.#cache = undefined;
+	}
+
+	render(width: number): readonly string[] {
+		width = Math.max(1, width);
+		if (this.#cache?.width === width) {
+			return this.#cache.lines;
+		}
+		const lines = ["", this.#divider(width), ""];
+		this.#cache = { width, lines };
+		return lines;
+	}
+
+	#divider(width: number): string {
+		const icon = theme.icon.cacheMiss;
+		const head = icon ? `${icon} cache miss` : "cache miss";
+		const tokens = this.info.reprocessedTokens;
+		const label = tokens > 0 ? `${head} ${theme.sep.dot.trim()} ${formatNumber(tokens)} tokens` : head;
+		const labelWidth = Bun.stringWidth(label, { countAnsiEscapeCodes: false });
+		const ruleWidth = Math.min(CACHE_INVALIDATION_RULE_WIDTH, width - labelWidth - 1);
+		if (ruleWidth < 1) {
+			// Too narrow to frame — emit the bare label.
+			return theme.fg("muted", label);
+		}
+		return `${theme.fg("dim", theme.tree.horizontal.repeat(ruleWidth))} ${theme.fg("muted", label)}`;
+	}
+}

package/src/modes/components/chat-transcript-builder.ts

@@ -36,9 +36,13 @@ import { createAdvisorMessageCard } from "./advisor-message";
 import { AssistantMessageComponent } from "./assistant-message";
 import { createBackgroundTanDispatchBlock } from "./background-tan-message";
 import { BashExecutionComponent } from "./bash-execution";
-import { BranchSummaryMessageComponent } from "./branch-summary-message";
+import { detectCacheInvalidation } from "./cache-invalidation-marker";
 import { CollabPromptMessageComponent } from "./collab-prompt-message";
-import { CompactionSummaryMessageComponent, createHandoffSummaryMessageComponent } from "./compaction-summary-message";
+import {
+	BranchSummaryMessageComponent,
+	CompactionSummaryMessageComponent,
+	createHandoffSummaryMessageComponent,
+} from "./compaction-summary-message";
 import { CustomMessageComponent } from "./custom-message";
 import { EvalExecutionComponent } from "./eval-execution";
 import { type LateDiagnosticsFile, LateDiagnosticsMessageComponent } from "./late-diagnostics-message";
@@ -73,6 +77,7 @@ export class ChatTranscriptBuilder {
 	#readArgs = new Map<string, Record<string, unknown>>();
 	#readGroup: ReadToolGroupComponent | null = null;
 	#pendingUsage: Usage | undefined;
+	#lastAssistantUsage: Usage | undefined;
 	#waitingPoll: ToolExecutionComponent | null = null;
 	#expandables: Array<{ setExpanded(expanded: boolean): void }> = [];
 	#expanded = false;
@@ -111,6 +116,7 @@ export class ChatTranscriptBuilder {
 		this.#readArgs.clear();
 		this.#readGroup = null;
 		this.#pendingUsage = undefined;
+		this.#lastAssistantUsage = undefined;
 		this.#waitingPoll = null;
 		this.#expandables = [];
 		this.container.dispose();
@@ -246,6 +252,14 @@ export class ChatTranscriptBuilder {
 		);
 		this.container.addChild(assistantComponent);
 
+		if (settings.get("display.cacheMissMarker")) {
+			const invalidation = detectCacheInvalidation(this.#lastAssistantUsage, message.usage);
+			if (invalidation) assistantComponent.setCacheInvalidation(invalidation);
+		}
+		if (message.usage.cacheRead + message.usage.cacheWrite + message.usage.input > 0) {
+			this.#lastAssistantUsage = message.usage;
+		}
+
 		const hasVisibleAssistantContent = message.content.some(
 			content =>
 				(content.type === "text" && canonicalizeMessage(content.text)) ||

package/src/modes/components/compaction-summary-message.ts

@@ -1,6 +1,6 @@
 import { Box, type Component, Markdown } from "@oh-my-pi/pi-tui";
 import { getMarkdownTheme, theme } from "../../modes/theme/theme";
-import type { CompactionSummaryMessage, CustomMessage } from "../../session/messages";
+import type { BranchSummaryMessage, CompactionSummaryMessage, CustomMessage } from "../../session/messages";
 
 interface SummaryDividerOptions {
 	label: () => string;
@@ -156,6 +156,34 @@ export function createHandoffSummaryMessageComponent(
 	return component;
 }
 
+/**
+ * A branch summary collapses a side branch back into the main line. Render it
+ * with the same slim divider as `/compact` and handoff rather than a `[branch]`
+ * box, so every history-collapse point reads as one consistent banner.
+ */
+export class BranchSummaryMessageComponent implements Component {
+	#divider: SummaryDividerComponent;
+
+	constructor(private readonly message: BranchSummaryMessage) {
+		this.#divider = new SummaryDividerComponent({
+			label: () => `${theme.icon.branch} branch`,
+			detailMarkdown: () => `**Branch summary**\n\n${this.message.summary}`,
+		});
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.#divider.setExpanded(expanded);
+	}
+
+	invalidate(): void {
+		this.#divider.invalidate();
+	}
+
+	render(width: number): readonly string[] {
+		return this.#divider.render(width);
+	}
+}
+
 function getCustomMessageText(message: CustomMessage<unknown>): string {
 	if (typeof message.content === "string") return message.content;
 	let firstText: string | undefined;

package/src/modes/components/custom-message.ts

@@ -46,12 +46,15 @@ export class CustomMessageComponent extends Container {
 		}
 		this.removeChild(this.#box);
 
+		// The transcript dispatch routes both `custom` and legacy `hookMessage` roles here:
+		// tag hooks with the hook glyph, other injected messages with a neutral package.
+		const isHook = (this.message.role as string) === "hookMessage";
 		const custom = renderFramedMessage({
 			message: this.message,
 			box: this.#box,
 			expanded: this.#expanded,
 			customRenderer: this.customRenderer,
-			// Extension messages render full content; no collapse-on-fold behaviour.
+			icon: isHook ? theme.icon.extensionHook : theme.icon.package,
 		});
 
 		if (custom) {

package/src/modes/components/dynamic-border.ts

@@ -26,7 +26,7 @@ export class DynamicBorder implements Component {
 		if (this.#cachedLines && this.#cachedWidth === width) {
 			return this.#cachedLines;
 		}
-		const lines = [this.#color(theme.boxSharp.horizontal.repeat(Math.max(1, width)))];
+		const lines = [this.#color(theme.boxRound.horizontal.repeat(Math.max(1, width)))];
 		this.#cachedWidth = width;
 		this.#cachedLines = lines;
 		return lines;

package/src/modes/components/extensions/extension-dashboard.ts

@@ -380,7 +380,7 @@ class TwoColumnBody implements Component {
 		// Fill the full body height so the dashboard reads as a full-screen view.
 		const numLines = this.maxHeight;
 		const combined: string[] = [];
-		const separator = theme.fg("dim", ` ${theme.boxSharp.vertical} `);
+		const separator = theme.fg("dim", ` ${theme.boxRound.vertical} `);
 
 		for (let i = 0; i < numLines; i++) {
 			const left = truncateToWidth(leftLines[i] ?? "", leftWidth);

package/src/modes/components/extensions/inspector-panel.ts

@@ -107,7 +107,7 @@ export class InspectorPanel implements Component {
 	#renderFilePreview(raw: unknown, width: number): string[] {
 		const lines: string[] = [];
 		lines.push(theme.fg("muted", "Preview:"));
-		lines.push(theme.fg("dim", theme.boxSharp.horizontal.repeat(Math.min(width - 2, 40))));
+		lines.push(theme.fg("dim", theme.boxRound.horizontal.repeat(Math.min(width - 2, 40))));
 
 		const content = this.#getContextFileContent(raw);
 		if (!content) {
@@ -165,7 +165,7 @@ export class InspectorPanel implements Component {
 	#renderToolArgs(raw: unknown, width: number): string[] {
 		const lines: string[] = [];
 		lines.push(theme.fg("muted", "Arguments:"));
-		lines.push(theme.fg("dim", theme.boxSharp.horizontal.repeat(Math.min(width - 2, 40))));
+		lines.push(theme.fg("dim", theme.boxRound.horizontal.repeat(Math.min(width - 2, 40))));
 
 		try {
 			const tool = raw as any;
@@ -207,7 +207,7 @@ export class InspectorPanel implements Component {
 	#renderSkillContent(raw: unknown, width: number): string[] {
 		const lines: string[] = [];
 		lines.push(theme.fg("muted", "Instruction:"));
-		lines.push(theme.fg("dim", theme.boxSharp.horizontal.repeat(Math.min(width - 2, 40))));
+		lines.push(theme.fg("dim", theme.boxRound.horizontal.repeat(Math.min(width - 2, 40))));
 
 		try {
 			const skill = raw as any;
@@ -236,7 +236,7 @@ export class InspectorPanel implements Component {
 	#renderMcpDetails(raw: unknown, width: number): string[] {
 		const lines: string[] = [];
 		lines.push(theme.fg("muted", "Connection:"));
-		lines.push(theme.fg("dim", theme.boxSharp.horizontal.repeat(Math.min(width - 2, 40))));
+		lines.push(theme.fg("dim", theme.boxRound.horizontal.repeat(Math.min(width - 2, 40))));
 
 		try {
 			const mcp = raw as any;
@@ -275,7 +275,7 @@ export class InspectorPanel implements Component {
 		// Show trigger pattern if present
 		if (ext.trigger) {
 			lines.push(theme.fg("muted", "Trigger:"));
-			lines.push(theme.fg("dim", theme.boxSharp.horizontal.repeat(Math.min(width - 2, 40))));
+			lines.push(theme.fg("dim", theme.boxRound.horizontal.repeat(Math.min(width - 2, 40))));
 			lines.push(`  ${theme.fg("accent", ext.trigger)}`);
 			lines.push("");
 		}

package/src/modes/components/hook-selector.ts

@@ -123,7 +123,7 @@ class OutlinedList extends Container {
 
 	render(width: number): readonly string[] {
 		const borderColor = (text: string) => theme.fg("border", text);
-		const horizontal = borderColor(theme.boxSharp.horizontal.repeat(Math.max(1, width)));
+		const horizontal = borderColor(theme.boxRound.horizontal.repeat(Math.max(1, width)));
 		const innerWidth = Math.max(1, width - 2);
 		const content: string[] = [];
 		for (const line of this.#lines) {
@@ -134,7 +134,7 @@ class OutlinedList extends Container {
 				const wrappedLine = `${indent}${wrappedBody}`;
 				const pad = Math.max(0, innerWidth - visibleWidth(wrappedLine));
 				content.push(
-					`${borderColor(theme.boxSharp.vertical)}${wrappedLine}${padding(pad)}${borderColor(theme.boxSharp.vertical)}`,
+					`${borderColor(theme.boxRound.vertical)}${wrappedLine}${padding(pad)}${borderColor(theme.boxRound.vertical)}`,
 				);
 			}
 		}

package/src/modes/components/index.ts

@@ -2,7 +2,6 @@
 export * from "./assistant-message";
 export * from "./bash-execution";
 export * from "./bordered-loader";
-export * from "./branch-summary-message";
 export * from "./compaction-summary-message";
 export * from "./countdown-timer";
 export * from "./custom-editor";

package/src/modes/components/message-frame.ts

@@ -34,16 +34,18 @@ export interface RebuildFrameOptions<M extends FramedMessage> {
 	message: M;
 	box: Box;
 	expanded: boolean;
+	/** Icon glyph shown before the customType in the default header (e.g. a hook/extension icon). */
+	icon?: string;
 	/** Collapse the markdown body to this many lines when `expanded` is false. Omit to never collapse. */
 	collapseAfterLines?: number;
 	customRenderer?: FramedRenderer<M>;
 }
 
 /**
- * Attempt the custom renderer; on failure or undefined return, populate
- * `box` with the default `[customType]` label + markdown body and return
- * undefined. When the custom renderer succeeds, return its Component so the
- * caller can mount it and skip the default box.
+ * Attempt the custom renderer; on failure or undefined return, populate `box`
+ * with the default outlined card — an `icon customType` header + markdown body —
+ * and return undefined. When the custom renderer succeeds, return its Component
+ * so the caller can mount it and skip the default box.
  */
 export function renderFramedMessage<M extends FramedMessage>(opts: RebuildFrameOptions<M>): Component | undefined {
 	if (opts.customRenderer) {
@@ -56,9 +58,11 @@ export function renderFramedMessage<M extends FramedMessage>(opts: RebuildFrameO
 	}
 
 	opts.box.clear();
+	// Match the skill card: a subtle rounded outline so injected messages read as cards.
+	opts.box.setBorder({ chars: theme.boxRound, color: t => theme.fg("borderMuted", t) });
 
-	const label = theme.fg("customMessageLabel", theme.bold(`[${opts.message.customType}]`));
-	opts.box.addChild(new Text(label, 0, 0));
+	const tag = opts.icon ? `${opts.icon} ${opts.message.customType}` : opts.message.customType;
+	opts.box.addChild(new Text(theme.fg("customMessageLabel", theme.bold(tag)), 0, 0));
 	opts.box.addChild(new Spacer(1));
 
 	let text: string;

package/src/modes/components/model-selector.ts

@@ -1112,7 +1112,7 @@ export class ModelSelectorComponent extends Container {
 		const menuWidth = contentWidth + (needsScroll ? 1 : 0);
 
 		this.#menuContainer.addChild(new Spacer(1));
-		this.#menuContainer.addChild(new Text(theme.fg("border", theme.boxSharp.horizontal.repeat(menuWidth)), 0, 0));
+		this.#menuContainer.addChild(new Text(theme.fg("border", theme.boxRound.horizontal.repeat(menuWidth)), 0, 0));
 		if (showingThinking && this.#menuSelectedRole) {
 			this.#menuContainer.addChild(
 				new Text(
@@ -1152,7 +1152,7 @@ export class ModelSelectorComponent extends Container {
 
 		this.#menuContainer.addChild(new Spacer(1));
 		this.#menuContainer.addChild(new Text(theme.fg("dim", hintText), 0, 0));
-		this.#menuContainer.addChild(new Text(theme.fg("border", theme.boxSharp.horizontal.repeat(menuWidth)), 0, 0));
+		this.#menuContainer.addChild(new Text(theme.fg("border", theme.boxRound.horizontal.repeat(menuWidth)), 0, 0));
 	}
 
 	#getMenuVisibleCount(optionCount: number): number {

package/src/modes/components/overlay-box.ts

@@ -1,7 +1,8 @@
 /**
  * Shared box-drawing chrome for fullscreen overlays (the `/copy` picker, the
- * plan-review overlay, …). Every helper paints with `theme.boxSharp` glyphs and
- * the `border`/`accent` theme colors so all outlined overlays read identically.
+ * plan-review overlay, …). Every helper paints with `theme.boxRound` glyphs
+ * (rounded corners, sharp tee/cross junctions) and the `border`/`accent` theme
+ * colors so all outlined overlays read identically.
  */
 import { padding, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
 import { theme } from "../theme/theme";
@@ -23,7 +24,7 @@ function paint(s: string): string {
 
 /** Top border with an optional accent-colored title inset into the rule. */
 export function topBorder(width: number, title: string): string {
-	const box = theme.boxSharp;
+	const box = theme.boxRound;
 	const inner = Math.max(0, width - 2);
 	if (!title) return paint(box.topLeft + box.horizontal.repeat(inner) + box.topRight);
 	const shown = truncateToWidth(` ${title} `, Math.max(0, inner - 2));
@@ -37,18 +38,18 @@ export function topBorder(width: number, title: string): string {
 
 /** A horizontal rule with left/right tees, splitting overlay sections. */
 export function divider(width: number): string {
-	const box = theme.boxSharp;
+	const box = theme.boxRound;
 	return paint(box.teeRight + box.horizontal.repeat(Math.max(0, width - 2)) + box.teeLeft);
 }
 
 export function bottomBorder(width: number): string {
-	const box = theme.boxSharp;
+	const box = theme.boxRound;
 	return paint(box.bottomLeft + box.horizontal.repeat(Math.max(0, width - 2)) + box.bottomRight);
 }
 
 /** Wrap pre-styled content in vertical borders with single-column insets. */
 export function row(content: string, width: number): string {
-	const box = theme.boxSharp;
+	const box = theme.boxRound;
 	return `${paint(box.vertical)} ${fit(content, Math.max(0, width - 4))} ${paint(box.vertical)}`;
 }
 
@@ -70,7 +71,7 @@ export function splitBodyWidth(width: number, sidebarWidth: number): number {
 
 /** Top border carrying the title, split by a `┬` over the column divider. */
 export function topBorderSplit(width: number, title: string, sidebarWidth: number): string {
-	const box = theme.boxSharp;
+	const box = theme.boxRound;
 	const dividerCol = splitDividerCol(sidebarWidth);
 	const leftLen = Math.max(0, dividerCol - 1);
 	const rightLen = Math.max(0, width - 2 - dividerCol);
@@ -90,7 +91,7 @@ export function topBorderSplit(width: number, title: string, sidebarWidth: numbe
 
 /** Section rule that closes the sidebar column with a `┴` over the divider. */
 export function dividerSplit(width: number, sidebarWidth: number): string {
-	const box = theme.boxSharp;
+	const box = theme.boxRound;
 	const dividerCol = splitDividerCol(sidebarWidth);
 	const leftLen = Math.max(0, dividerCol - 1);
 	const rightLen = Math.max(0, width - 2 - dividerCol);
@@ -101,7 +102,7 @@ export function dividerSplit(width: number, sidebarWidth: number): string {
 
 /** A two-column content row: `│ sidebar │ body │`, each inset by one column. */
 export function splitRow(sidebar: string, body: string, width: number, sidebarWidth: number): string {
-	const box = theme.boxSharp;
+	const box = theme.boxRound;
 	const bodyWidth = splitBodyWidth(width, sidebarWidth);
 	const bar = paint(box.vertical);
 	return `${bar} ${fit(sidebar, sidebarWidth)} ${bar} ${fit(body, bodyWidth)} ${bar}`;