@timurproko/a1 0.1.8-dev.572 → 0.1.8-dev.573

package/dist/integrations/pi/components/modal-frame.js

@@ -0,0 +1,110 @@
+import { Container, Spacer } from "@earendil-works/pi-tui";
+export const PI_MODAL_CONTENT_PADDING_X = 1;
+/** The semantic top rule/title pair used while a modal assembles its frame. */
+export class PiModalHeader {
+    rule;
+    title;
+    constructor(rule, title) {
+        this.rule = rule;
+        this.title = title;
+    }
+    invalidate() {
+        this.rule.invalidate();
+        this.title.invalidate();
+    }
+    render(width) {
+        return [...this.rule.render(width), ...this.title.render(width)];
+    }
+}
+/**
+ * Complete framed-modal chrome. Rules remain frame-wide; every semantic content component renders
+ * in the same one-cell-smaller rectangle and receives the same left inset.
+ */
+export class PiModalFrame {
+    #topRule;
+    #content;
+    #bottomRule;
+    #fullWidthContent;
+    #preInsetContent;
+    constructor(topRule, content, bottomRule, fullWidthContent = [], preInsetContent = []) {
+        this.#topRule = topRule;
+        this.#content = content;
+        this.#bottomRule = bottomRule;
+        this.#fullWidthContent = new Set(fullWidthContent);
+        this.#preInsetContent = new Set(preInsetContent);
+    }
+    invalidate() {
+        this.#topRule.invalidate();
+        for (const component of this.#content)
+            component.invalidate();
+        this.#bottomRule.invalidate();
+    }
+    render(width) {
+        const padding = Math.min(PI_MODAL_CONTENT_PADDING_X, Math.max(0, width));
+        const contentWidth = Math.max(0, width - padding);
+        const rows = [...this.#topRule.render(width)];
+        for (const component of this.#content) {
+            if (this.#fullWidthContent.has(component) || this.#preInsetContent.has(component)) {
+                rows.push(...component.render(width));
+            }
+            else if (component instanceof Spacer) {
+                rows.push(...component.render(contentWidth));
+            }
+            else {
+                rows.push(...component.render(contentWidth).map(row => `${" ".repeat(padding)}${row}`));
+            }
+        }
+        rows.push(...this.#bottomRule.render(width));
+        return rows;
+    }
+}
+/** Add compact titled-modal chrome while a component assembles its semantic body. */
+export function addPiModalHeader(container, rule, title) {
+    const header = new PiModalHeader(rule, title);
+    container.addChild(header);
+    return header;
+}
+/**
+ * Replace explicitly identified structural modal children with the shared padded frame. Callers
+ * identify semantic rules/components; rendered text is never inspected or rewritten.
+ */
+export function adoptPiModalFrame(container, adoption) {
+    const { topIndex, bottomIndex, header, fullWidthContent = [], preInsetContent = [] } = adoption;
+    if (topIndex < 0 || bottomIndex <= topIndex || bottomIndex >= container.children.length) {
+        throw new TypeError("invalid modal frame child positions");
+    }
+    const top = container.children[topIndex];
+    const bottom = container.children[bottomIndex];
+    const contentStart = topIndex + 1;
+    let topRule = top;
+    const content = [];
+    if (header !== undefined) {
+        if (top !== header)
+            throw new TypeError("modal header is not at the declared top position");
+        topRule = header.rule;
+        content.push(header.title);
+    }
+    content.push(...container.children.slice(contentStart, bottomIndex));
+    const frame = new PiModalFrame(topRule, content, bottom, fullWidthContent, preInsetContent);
+    container.children.splice(topIndex, bottomIndex - topIndex + 1, frame);
+    return frame;
+}
+/**
+ * Adopt a public component's semantic rule/title children at the bare-A1 boundary. Only an optional
+ * structural Spacer between those explicitly identified children is accepted; rendered text is
+ * never inspected or rewritten. The pinned comparison profile does not call this adapter.
+ */
+export function adoptPiModalHeader(container, ruleIndex, titleIndex) {
+    if (ruleIndex < 0 || titleIndex <= ruleIndex || titleIndex >= container.children.length) {
+        throw new TypeError("invalid modal rule/title child positions");
+    }
+    const between = container.children.slice(ruleIndex + 1, titleIndex);
+    if (between.length > 1 || between.some(child => !(child instanceof Spacer))) {
+        throw new TypeError("modal rule and title are not separated by an optional single Spacer");
+    }
+    const rule = container.children[ruleIndex];
+    const title = container.children[titleIndex];
+    const header = new PiModalHeader(rule, title);
+    container.children.splice(ruleIndex, titleIndex - ruleIndex + 1, header);
+    return header;
+}

package/dist/integrations/pi/components/models-dialog.js

@@ -1,7 +1,15 @@
 import { Input, Key, getKeybindings, matchesKey, truncateToWidth, } from "@earendil-works/pi-tui";
+import { DynamicBorder } from "../startup-public.js";
+import { PiModalFrame } from "./modal-frame.js";
 import { piTheme, renderPiModalShortcutHints } from "./theme.js";
 const MAX_VISIBLE_ROWS = 10;
 const MODELS_TITLE = "Models";
+class ModalTitleLine {
+    #text = "";
+    setText(text) { this.#text = text; }
+    invalidate() { }
+    render(width) { return [truncateToWidth(this.#text, width)]; }
+}
 function fullModelId(model) {
     return `${model.provider}/${model.id}`;
 }
@@ -27,6 +35,12 @@ function keyLabel(action) {
  */
 export class ModelsDialogComponent {
     #input = new Input();
+    #title = new ModalTitleLine();
+    #body = {
+        invalidate: () => this.#input.invalidate(),
+        render: width => this.#renderBody(width),
+    };
+    #frame = new PiModalFrame(new DynamicBorder(), [this.#title, this.#body], new DynamicBorder());
     #callbacks;
     #models = [];
     #activeModelId;
@@ -182,15 +196,16 @@ export class ModelsDialogComponent {
             this.#selectedIndex = 0;
     }
     render(width) {
+        const theme = piTheme();
+        this.#title.setText(theme.fg("accent", theme.bold(MODELS_TITLE)) + (this.dirty ? theme.fg("warning", " (unsaved)") : ""));
+        return this.#frame.render(width);
+    }
+    #renderBody(width) {
         const theme = piTheme();
         const lines = [];
         const push = (line = "") => { lines.push(truncateToWidth(line, width)); };
-        const border = theme.fg("border", "─".repeat(Math.max(1, width)));
         const rows = this.#rows();
         this.#clampSelection(rows);
-        push(border);
-        push();
-        push(theme.fg("accent", theme.bold(MODELS_TITLE)) + (this.dirty ? theme.fg("warning", " (unsaved)") : ""));
         push(theme.fg("dim", "Filter: ")
             + theme.fg(this.#filter === "all" ? "accent" : "dim", "all")
             + theme.fg("dim", " | ")
@@ -229,7 +244,6 @@ export class ModelsDialogComponent {
         if (this.#refreshStatus !== undefined)
             push(theme.fg(this.#refreshStatus.kind, `  ${this.#refreshStatus.message}`));
         push(renderPiModalShortcutHints(this.#hints()));
-        push(border);
         return lines;
     }
     #hints() {

package/dist/integrations/pi/components/shell-selectors-dialogs.js

@@ -3,6 +3,7 @@ import { DaxnutsComponent, } from "./upstream/components/daxnuts.js";
 import { EarendilAnnouncementComponent, } from "./upstream/components/earendil-announcement.js";
 import { Box, Container, SelectList, Spacer, Text, } from "@earendil-works/pi-tui";
 import { ScopedModelsSelectorComponent, } from "./upstream/components/scoped-models-selector.js";
+import { adoptPiModalFrame, adoptPiModalHeader } from "./modal-frame.js";
 import { ModelsDialogComponent, } from "./models-dialog.js";
 import { TrustSelectorComponent, } from "./upstream/components/trust-selector.js";
 import { PINNED_PI_LAYOUT, piTheme, } from "./theme.js";
@@ -72,6 +73,7 @@ export function createPiShellSettingsSelector(options) {
 export function createPiShellModelSelector(options) {
     ensureTheme();
     const selector = new ModelSelectorComponent(createTuiFacade(options.runtime), options.currentModel, options.modelRuntime, options.scopedModels, options.onSelect, options.onCancel, options.initialSearchInput, options.onSelectAsDefault, options.defaultModel);
+    adoptPiModalFrame(selector, { topIndex: 0, bottomIndex: selector.children.length - 1 });
     return componentPort(selector);
 }
 function toPiScopedModel(model) {
@@ -137,11 +139,20 @@ export function createPiShellUserMessageSelector(messages, onSelect, onCancel, i
     ensureTheme();
     const selector = new UserMessageSelectorComponent(messages.map(message => ({ id: message.id, text: message.label })), onSelect, onCancel, initialSelectedId);
     const list = selector.getMessageList();
+    adoptPiModalFrame(selector, { topIndex: 4, bottomIndex: selector.children.length - 1 });
     return componentPort(selector, data => list.handleInput(data));
 }
 export function createPiShellLoginDialog(runtime, providerId, onComplete, providerName, title) {
     ensureTheme();
     const dialog = new LoginDialogComponent(createTuiFacade(runtime), providerId, onComplete, providerName, title);
+    const preInsetTitle = dialog.children[1];
+    const header = adoptPiModalHeader(dialog, 0, 1);
+    adoptPiModalFrame(dialog, {
+        topIndex: 0,
+        bottomIndex: dialog.children.length - 1,
+        header,
+        preInsetContent: [preInsetTitle],
+    });
     return {
         ...componentPort(dialog),
         showAuth: (url, instructions) => dialog.showAuth(url, instructions),
@@ -169,6 +180,11 @@ export function createPiShellEarendilAnnouncement() {
 export function createPiShellOperationLoader(runtime, message) {
     ensureTheme();
     const loader = new BorderedLoader(createTuiFacade(runtime), piTheme(), message, { cancellable: true });
+    adoptPiModalFrame(loader, {
+        topIndex: 0,
+        bottomIndex: loader.children.length - 1,
+        preInsetContent: loader.children[3] === undefined ? [] : [loader.children[3]],
+    });
     return { ...componentPort(loader), signal: loader.signal };
 }
 export function createPiShellReloadBox() {
@@ -177,9 +193,10 @@ export function createPiShellReloadBox() {
     const borderColor = (text) => piTheme().fg("border", text);
     container.addChild(new DynamicBorder(borderColor));
     container.addChild(new Spacer(1));
-    container.addChild(new Text(piTheme().fg("muted", "Reloading keybindings, extensions, skills, prompts, themes, and context files..."), 1, 0));
+    container.addChild(new Text(piTheme().fg("muted", "Reloading keybindings, extensions, skills, prompts, themes, and context files..."), 0, 0));
     container.addChild(new Spacer(1));
     container.addChild(new DynamicBorder(borderColor));
+    adoptPiModalFrame(container, { topIndex: 0, bottomIndex: container.children.length - 1 });
     return componentPort(container);
 }
 export function createPiShellAuthProviderSelector(mode, providers, onSelect, onCancel, initialSearchInput) {
@@ -194,22 +211,41 @@ export function createPiShellAuthProviderSelector(mode, providers, onSelect, onC
         if (selected)
             onSelect(selected.id);
     }, onCancel, initialSearchInput);
+    const preInsetContent = [selector.children[2], selector.children[6]];
+    const header = adoptPiModalHeader(selector, 0, 2);
+    adoptPiModalFrame(selector, {
+        topIndex: 0,
+        bottomIndex: selector.children.length - 1,
+        header,
+        preInsetContent,
+    });
     return componentPort(selector);
 }
 export function createPiShellExtensionSelector(title, options, onSelect, onCancel) {
     ensureTheme();
-    return componentPort(new ExtensionSelectorComponent(title, [...options], onSelect, onCancel));
+    const selector = new ExtensionSelectorComponent(title, [...options], onSelect, onCancel);
+    const preInsetContent = [selector.children[2], selector.children[4], selector.children[6]];
+    const header = adoptPiModalHeader(selector, 0, 2);
+    adoptPiModalFrame(selector, {
+        topIndex: 0,
+        bottomIndex: selector.children.length - 1,
+        header,
+        preInsetContent,
+    });
+    return componentPort(selector);
 }
 export function createPiShellThemeSelector(currentTheme, onSelect, onCancel, onPreview) {
     ensureTheme();
     const selector = new ThemeSelectorComponent(currentTheme, onSelect, onCancel, onPreview);
     const list = selector.getSelectList();
+    adoptPiModalFrame(selector, { topIndex: 0, bottomIndex: selector.children.length - 1 });
     return componentPort(selector, data => list.handleInput(data));
 }
 export function createPiShellShowImagesSelector(currentValue, onSelect, onCancel) {
     ensureTheme();
     const selector = new ShowImagesSelectorComponent(currentValue, onSelect, onCancel);
     const list = selector.getSelectList();
+    adoptPiModalFrame(selector, { topIndex: 0, bottomIndex: selector.children.length - 1 });
     return componentPort(selector, data => list.handleInput(data));
 }
 export function createPiShellDialog(dialog, handlers = {}) {

package/dist/integrations/pi/components/skills-dialog.js

@@ -1,5 +1,6 @@
 import { DynamicBorder } from "../startup-public.js";
 import { Container, getKeybindings, Input, Spacer, Text } from "@earendil-works/pi-tui";
+import { addPiModalHeader, adoptPiModalFrame } from "./modal-frame.js";
 import { PINNED_PI_LAYOUT, piTheme, renderPiModalShortcutHints } from "./theme.js";
 import { componentPort, ensureTheme, piShellTruncateToWidth, piShellVisibleWidth } from "./shell-shared-facade.js";
 import { SKILL_COMMAND_PREFIX, skillMatchesQuery } from "./skills-command.js";
@@ -36,9 +37,7 @@ class SkillsSelectorComponent extends Container {
         this.#onSelect = options.onSelect;
         this.#onCancel = options.onCancel;
         this.#searchInput.onSubmit = () => this.#selectCurrent();
-        this.addChild(new DynamicBorder());
-        this.addChild(new Spacer(1));
-        this.addChild(new Text(piTheme().fg("accent", piTheme().bold("Skills")), 0, 0));
+        const header = addPiModalHeader(this, new DynamicBorder(), new Text(piTheme().fg("accent", piTheme().bold("Skills")), 0, 0));
         this.addChild(new Spacer(1));
         this.addChild(this.#searchInput);
         this.addChild(new Spacer(1));
@@ -51,6 +50,7 @@ class SkillsSelectorComponent extends Container {
             { key: bindings.getKeys("tui.select.cancel").join("/"), action: "cancel" },
         ]), 0, 0));
         this.addChild(new DynamicBorder());
+        adoptPiModalFrame(this, { topIndex: 0, bottomIndex: this.children.length - 1, header });
         this.#updateList();
     }
     // Protocol: focus propagates to the search input so the terminal cursor follows the query.

package/dist/integrations/pi/components/submitted-prompt-adapter.d.ts

@@ -1,5 +1,5 @@
 import { type Component } from "@earendil-works/pi-tui";
-import type { OwnedUiTranscriptBlock } from "../../../contracts/owned-ui/index.js";
+import { type OwnedUiTranscriptBlock } from "../../../contracts/owned-ui/index.js";
 export interface PiShellSubmittedPromptComposer {
     readonly layout: (width: number, source?: Date | number | null) => {
         readonly contentWidth: number;

package/dist/integrations/pi/components/submitted-prompt-adapter.js

@@ -1,5 +1,6 @@
 import { getMarkdownTheme } from "../startup-public.js";
 import { Box, Markdown, Text } from "@earendil-works/pi-tui";
+import { protectPromptChipWrapping } from "../../../contracts/owned-ui/index.js";
 import { piTheme } from "./theme.js";
 /** Branch summaries share the block kind but do not participate in prompt navigation. */
 export function isPiPromptStyleCompaction(block) {
@@ -18,11 +19,13 @@ export function createPiSubmittedPromptComponent(block, composer, heading) {
     const timestamp = numericTimestamp(block);
     // Invariant: presentation-only chrome stays outside the summary's Markdown parser and stored text.
     const header = heading === undefined ? undefined : new Text(heading, 0, 0);
-    const markdown = new Markdown(block.text, 0, 0, getMarkdownTheme(), { color: content => piTheme().fg("userMessageText", content) }, { preserveOrderedListMarkers: true, preserveBackslashEscapes: true });
+    const chipWrapping = block.kind === "user" ? protectPromptChipWrapping(block.text) : undefined;
+    const markdown = new Markdown(chipWrapping?.text ?? block.text, 0, 0, getMarkdownTheme(), { color: content => piTheme().fg("userMessageText", content) }, { preserveOrderedListMarkers: true, preserveBackslashEscapes: true });
     const content = {
         render(width) {
             const layout = composer.layout(width, timestamp);
-            const bodyRows = markdown.render(layout.contentWidth);
+            const renderedBodyRows = markdown.render(layout.contentWidth);
+            const bodyRows = chipWrapping === undefined ? renderedBodyRows : renderedBodyRows.map(row => chipWrapping.restore(row));
             const rows = header === undefined ? bodyRows : [
                 ...header.render(layout.contentWidth).map(row => piTheme().fg("userMessageText", row)),
                 ...(bodyRows.length === 0 ? [] : ["", ...bodyRows]),

package/dist/integrations/pi/components/upstream/components/extension-editor.d.ts

@@ -3,7 +3,8 @@
  * packages/coding-agent/src/modes/interactive/components/extension-editor.ts.
  * Modifications: Mechanical port: remap pi-tui to the root public singleton, use owned
  * keybindings/theme and external-editor seams, preserve editor layout, hints, focus, submission,
- * cancellation, and external-editor lifecycle; bare A1 uses the shared semantic modal shortcut row.
+ * cancellation, and external-editor lifecycle; bare A1 uses the shared semantic modal shortcut row and
+ * compact padded modal frame.
  * Deviations: owned-modal-shortcut-hints.
  */
 import { Container, type TUI } from "@earendil-works/pi-tui";

package/dist/integrations/pi/components/upstream/components/extension-editor.js

@@ -3,12 +3,14 @@
  * packages/coding-agent/src/modes/interactive/components/extension-editor.ts.
  * Modifications: Mechanical port: remap pi-tui to the root public singleton, use owned
  * keybindings/theme and external-editor seams, preserve editor layout, hints, focus, submission,
- * cancellation, and external-editor lifecycle; bare A1 uses the shared semantic modal shortcut row.
+ * cancellation, and external-editor lifecycle; bare A1 uses the shared semantic modal shortcut row and
+ * compact padded modal frame.
  * Deviations: owned-modal-shortcut-hints.
  */
 import { Container, Editor, Spacer, Text, } from "@earendil-works/pi-tui";
 import { DynamicBorder, getSelectListTheme } from "../../../startup-public.js";
 import { editInExternalEditor } from "../external-editor.js";
+import { addPiModalHeader, adoptPiModalFrame } from "../../modal-frame.js";
 import { piTheme, renderPiModalShortcutHints } from "../../theme.js";
 export class ExtensionEditorComponent extends Container {
     #editor;
@@ -34,12 +36,10 @@ export class ExtensionEditorComponent extends Container {
             || process.env.EDITOR
             || (process.platform === "win32" ? "notepad" : "nano");
         const { description, ...editorOptions } = options ?? {};
-        this.addChild(new DynamicBorder());
-        this.addChild(new Spacer(1));
-        this.addChild(new Text(piTheme().fg("accent", title), 1, 0));
+        const header = addPiModalHeader(this, new DynamicBorder(), new Text(piTheme().fg("accent", title), 0, 0));
         if (description) {
             this.addChild(new Spacer(1));
-            this.addChild(new Text(piTheme().fg("text", description), 1, 0));
+            this.addChild(new Text(piTheme().fg("text", description), 0, 0));
         }
         this.addChild(new Spacer(1));
         this.#editor = new Editor(tui, {
@@ -57,9 +57,10 @@ export class ExtensionEditorComponent extends Container {
             { key: this.#keybindings.getKeys("tui.select.cancel").join("/"), action: "cancel" },
             { key: this.#keybindings.getKeys("app.editor.external").join("/"), action: "external editor" },
         ]);
-        this.addChild(new Text(hint, 1, 0));
+        this.addChild(new Text(hint, 0, 0));
         this.addChild(new Spacer(1));
         this.addChild(new DynamicBorder());
+        adoptPiModalFrame(this, { topIndex: 0, bottomIndex: this.children.length - 1, header });
     }
     handleInput(data) {
         if (this.#keybindings.matches(data, "tui.select.cancel")) {

package/dist/integrations/pi/components/upstream/components/extension-input.js

@@ -2,12 +2,14 @@
  * Provenance: @earendil-works/pi-coding-agent 0.87.1 (MIT), commit f07218c4d4bbc12bef056a7058c3dd49dfe41abe,
  * packages/coding-agent/src/modes/interactive/components/extension-input.ts.
  * Modifications: Mechanical port: remap public imports, use ECMAScript private fields, and route the
- * bare-A1 instruction row through the shared semantic shortcut renderer while preserving input,
- * timeout, focus, submission, cancellation, and disposal behavior.
+ * bare-A1 instruction row and chrome through the shared semantic shortcut and compact padded
+ * modal-frame components while preserving input, timeout, focus, submission, cancellation, and
+ * disposal behavior.
  * Deviations: owned-modal-shortcut-hints.
  */
 import { DynamicBorder } from "../../../startup-public.js";
 import { Container, getKeybindings, Input, Spacer, Text } from "@earendil-works/pi-tui";
+import { addPiModalHeader, adoptPiModalFrame } from "../../modal-frame.js";
 import { piTheme, renderPiModalShortcutHints } from "../../theme.js";
 import { CountdownTimer } from "./countdown-timer.js";
 /** Bare-A1 extension text input using the common modal shortcut row. */
@@ -30,13 +32,11 @@ export class ExtensionInputComponent extends Container {
         this.#onCancel = onCancel;
         this.#baseTitle = title;
         const theme = piTheme();
-        this.addChild(new DynamicBorder());
-        this.addChild(new Spacer(1));
-        this.#titleText = new Text(theme.fg("accent", title), 1, 0);
-        this.addChild(this.#titleText);
+        this.#titleText = new Text(theme.fg("accent", title), 0, 0);
+        const header = addPiModalHeader(this, new DynamicBorder(), this.#titleText);
         if (opts?.description) {
             this.addChild(new Spacer(1));
-            this.addChild(new Text(theme.fg("text", opts.description), 1, 0));
+            this.addChild(new Text(theme.fg("text", opts.description), 0, 0));
         }
         this.addChild(new Spacer(1));
         this.#countdown = opts?.timeout !== undefined && opts.timeout > 0 && opts.tui !== undefined
@@ -53,9 +53,10 @@ export class ExtensionInputComponent extends Container {
         this.addChild(new Text(renderPiModalShortcutHints([
             { key: keys.getKeys("tui.select.confirm").join("/"), action: "submit" },
             { key: keys.getKeys("tui.select.cancel").join("/"), action: "cancel" },
-        ]), 1, 0));
+        ]), 0, 0));
         this.addChild(new Spacer(1));
         this.addChild(new DynamicBorder());
+        adoptPiModalFrame(this, { topIndex: 0, bottomIndex: this.children.length - 1, header });
     }
     handleInput(keyData) {
         const keys = getKeybindings();

package/dist/integrations/pi/components/upstream/components/extension-selector.js

@@ -2,12 +2,14 @@
  * Provenance: @earendil-works/pi-coding-agent 0.87.1 (MIT), commit f07218c4d4bbc12bef056a7058c3dd49dfe41abe,
  * packages/coding-agent/src/modes/interactive/components/extension-selector.ts.
  * Modifications: Mechanical port: remap public imports, use ECMAScript private fields, and route the
- * bare-A1 instruction row through the shared semantic shortcut renderer while preserving options,
- * timeout, navigation, selection, cancellation, and disposal behavior.
+ * bare-A1 instruction row and chrome through the shared semantic shortcut and compact padded
+ * modal-frame components while preserving options, timeout, navigation, selection, cancellation, and
+ * disposal behavior.
  * Deviations: owned-modal-shortcut-hints.
  */
 import { DynamicBorder } from "../../../startup-public.js";
 import { Container, getKeybindings, Spacer, Text } from "@earendil-works/pi-tui";
+import { addPiModalHeader, adoptPiModalFrame } from "../../modal-frame.js";
 import { piTheme, renderPiModalShortcutHints } from "../../theme.js";
 import { CountdownTimer } from "./countdown-timer.js";
 /** Bare-A1 extension selector using the common modal shortcut row. */
@@ -29,13 +31,11 @@ export class ExtensionSelectorComponent extends Container {
         this.#baseTitle = title;
         this.#onToggleToolsExpanded = opts?.onToggleToolsExpanded;
         const theme = piTheme();
-        this.addChild(new DynamicBorder());
-        this.addChild(new Spacer(1));
-        this.#titleText = new Text(theme.fg("accent", theme.bold(title)), 1, 0);
-        this.addChild(this.#titleText);
+        this.#titleText = new Text(theme.fg("accent", theme.bold(title)), 0, 0);
+        const header = addPiModalHeader(this, new DynamicBorder(), this.#titleText);
         if (opts?.description) {
             this.addChild(new Spacer(1));
-            this.addChild(new Text(theme.fg("text", opts.description), 1, 0));
+            this.addChild(new Text(theme.fg("text", opts.description), 0, 0));
         }
         this.addChild(new Spacer(1));
         this.#countdown = opts?.timeout !== undefined && opts.timeout > 0 && opts.tui !== undefined
@@ -51,9 +51,10 @@ export class ExtensionSelectorComponent extends Container {
             { key: "↑↓", action: "navigate" },
             { key: keys.getKeys("tui.select.confirm").join("/"), action: "select" },
             { key: keys.getKeys("tui.select.cancel").join("/"), action: "cancel" },
-        ]), 1, 0));
+        ]), 0, 0));
         this.addChild(new Spacer(1));
         this.addChild(new DynamicBorder());
+        adoptPiModalFrame(this, { topIndex: 0, bottomIndex: this.children.length - 1, header });
         this.#updateList();
     }
     #updateList() {
@@ -63,7 +64,7 @@ export class ExtensionSelectorComponent extends Container {
             const option = this.#options[index];
             this.#listContainer.addChild(new Text(index === this.#selectedIndex
                 ? theme.fg("accent", "→ ") + theme.fg("accent", option)
-                : `  ${theme.fg("text", option)}`, 1, 0));
+                : `  ${theme.fg("text", option)}`, 0, 0));
         }
     }
     handleInput(keyData) {

package/dist/integrations/pi/components/upstream/components/scoped-models-selector.d.ts

@@ -5,7 +5,7 @@
  * search, bulk/provider/reorder actions, dirty state, Ctrl+S persistence, refresh status,
  * cancellation, and focus while remapping theme and public helper imports; local key labels preserve
  * pinned platform formatting before layout without changing binding identities, and bare A1 uses the
- * shared semantic modal shortcut row.
+ * shared semantic modal shortcut row and compact padded modal frame.
  * Deviations: owned-modal-shortcut-hints.
  */
 interface ScopedModel {

package/dist/integrations/pi/components/upstream/components/scoped-models-selector.js

@@ -1,6 +1,7 @@
 import { Container, fuzzyFilter, getKeybindings, Input, Key, matchesKey, Spacer, Text, } from "@earendil-works/pi-tui";
 import { DynamicBorder } from "../../../startup-public.js";
 import { getModelSearchText } from "../model-search.js";
+import { addPiModalHeader, adoptPiModalFrame } from "../../modal-frame.js";
 import { piTheme, renderPiModalShortcutHints } from "../../theme.js";
 // Rationale: upstream's capitalized hint formatter is private to the package; the same mapping lives here.
 function keyDisplayText(keybinding) {
@@ -110,9 +111,7 @@ export class ScopedModelsSelectorComponent extends Container {
         this.enabledIds = config.enabledModelIds === null ? null : [...config.enabledModelIds];
         this.filteredItems = this.buildItems();
         // Header
-        this.addChild(new DynamicBorder());
-        this.addChild(new Spacer(1));
-        this.addChild(new Text(theme.fg("accent", theme.bold("Model Configuration")), 0, 0));
+        const header = addPiModalHeader(this, new DynamicBorder(), new Text(theme.fg("accent", theme.bold("Model Configuration")), 0, 0));
         const saveKey = keyDisplayText("app.models.save");
         this.addChild(new Text(theme.fg("muted", "Session-only.")
             + (saveKey ? ` ${renderPiModalShortcutHints([{ key: saveKey, action: "to save to settings." }])}` : ""), 0, 0));
@@ -133,6 +132,7 @@ export class ScopedModelsSelectorComponent extends Container {
         this.footerText = new Text(this.getFooterText(), 0, 0);
         this.addChild(this.footerText);
         this.addChild(new DynamicBorder());
+        adoptPiModalFrame(this, { topIndex: 0, bottomIndex: this.children.length - 1, header });
         this.updateList();
     }
     updateModels(models, enabledModelIds) {

package/dist/integrations/pi/components/upstream/components/session-selector.js

@@ -4,7 +4,7 @@
  * Modifications: Source-synchronized session selector port: preserve threaded/current/all scope,
  * search, sort, named/path filters, rename, delete confirmation, active-session protection, loading
  * progress, cancellation, focus, and disposal while remapping public helpers, owned keybindings/theme,
- * canonical path handling, and the shared bare-A1 modal shortcut row.
+ * canonical path handling, and the shared bare-A1 modal shortcut row and compact padded modal frame.
  * Deviations: owned-modal-shortcut-hints.
  */
 import { spawnSync } from "node:child_process";
@@ -14,6 +14,7 @@ import * as os from "node:os";
 import { Container, getKeybindings, Input, Spacer, Text, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
 import { KeybindingsManager } from "../adjacent/core/keybindings.js";
 import { DynamicBorder } from "../../../startup-public.js";
+import { addPiModalHeader, adoptPiModalFrame } from "../../modal-frame.js";
 import { piTheme, renderPiModalShortcutHints } from "../../theme.js";
 const theme = new Proxy({}, {
     get(_target, property) {
@@ -665,15 +666,21 @@ export class SessionSelectorComponent extends Container {
     buildBaseLayout(content, options) {
         this.clear();
         this.addChild(new Spacer(1));
-        this.addChild(new DynamicBorder((s) => theme.fg("accent", s)));
+        const showHeader = options?.showHeader ?? true;
+        const modalHeader = showHeader
+            ? addPiModalHeader(this, new DynamicBorder((s) => theme.fg("accent", s)), this.header)
+            : undefined;
+        if (!showHeader)
+            this.addChild(new DynamicBorder((s) => theme.fg("accent", s)));
         this.addChild(new Spacer(1));
-        if (options?.showHeader ?? true) {
-            this.addChild(this.header);
-            this.addChild(new Spacer(1));
-        }
         this.addChild(content);
         this.addChild(new Spacer(1));
         this.addChild(new DynamicBorder((s) => theme.fg("accent", s)));
+        const frame = { topIndex: 1, bottomIndex: this.children.length - 1 };
+        if (modalHeader === undefined)
+            adoptPiModalFrame(this, frame);
+        else
+            adoptPiModalFrame(this, { ...frame, header: modalHeader });
     }
     constructor(currentSessionsLoader, allSessionsLoader, onSelect, onCancel, onExit, requestRender, options, currentSessionFilePath) {
         super();

package/dist/integrations/pi/components/upstream/components/thinking-selector.d.ts

@@ -3,11 +3,12 @@
  * packages/coding-agent/src/modes/interactive/components/thinking-selector.ts.
  * Modifications: Preserve the searchable thinking-level selector, current/default semantics,
  * selection, save, cancellation, and focus while accepting the active bare-A1 cycle-key label from the
- * shell, styling the title with the established bold semantic accent treatment, placing its muted hint
- * directly below it, deduplicating levels, and rendering aligned muted descriptions after adjacent
- * active and bracketed default markers. All list and border colors use the owned theme and its
- * explicit color mode, and the footer uses the shared bare-A1 modal shortcut row. The comparison
- * profile retains the public pinned component.
+ * shell, styling the title with the established bold semantic accent treatment, placing it directly
+ * below the top rule through the shared compact padded modal frame and its muted hint directly below
+ * it, deduplicating levels, and rendering aligned muted descriptions after adjacent active and
+ * bracketed default markers. All list and border colors use the owned theme and its explicit color
+ * mode, and the footer uses the shared bare-A1 modal shortcut row. The comparison profile retains the
+ * public pinned component.
  * Deviations: owned-modal-shortcut-hints, owned-level-cycle-shortcut, owned-thinking-selector-heading.
  */
 import { Container, type Focusable, SelectList } from "@earendil-works/pi-tui";
@@ -16,7 +17,7 @@ export type ThinkingSelectorLevel = "off" | "minimal" | "low" | "medium" | "high
 export declare class OwnedThinkingSelectorComponent extends Container implements Focusable {
     private searchInput;
     private selectList;
-    private selectListChildIndex;
+    private selectListContainer;
     private allItems;
     private onSelect;
     private onCancel;