@leo-alvarenga/pi-zen-frame 0.12.2 → 0.13.0

package/README.md

@@ -45,8 +45,13 @@ Configuration is loaded from `~/.pi/agent/pi-zen-frame.json`. All properties are
   // Master mute: renders all segments in muted tones except agent-mode
   "zenMode": true,
 
+  // Editor-frame renderer by registered name (built-in: "blocky")
+  "editorFrame": "blocky",
+
   "header": {
     "enable": true,
+    // Header renderer by registered name (built-in: "basic")
+    "type": "basic",
     "logo": ["█████████  ", "███   ███  ", "██████     ", "███     ███"],
     "heading": "Welcome back!",
     "subheading": "Ready for your next session? Terminal warm, context clean, tools ready to execute",
@@ -63,7 +68,7 @@ Configuration is loaded from `~/.pi/agent/pi-zen-frame.json`. All properties are
     // Padding inside the frame
     "paddingTop": 1,
     "paddingBottom": 1,
-    "paddingX": 1,
+    "paddingX": 2,
 
     // Outer margin around the frame
     "marginTop": 0,
@@ -81,7 +86,7 @@ Configuration is loaded from `~/.pi/agent/pi-zen-frame.json`. All properties are
     "borderColor": "border",
 
     // Input prompt prefix glyph and color settings
-    "prefix": "❯",
+    "prefix": "┃",
     "prefixColor": "muted", // Options: "agentMode", "frameBorder", or any ThemeColor
 
     // Override default Nerd-Font glyphs
@@ -149,8 +154,9 @@ Run `/reload` after modifying your keybindings.
 extensions/
 ├── index.ts            # Extension entry point: config initialization and events
 ├── config/             # Types, defaults, and settings normalization
-├── components/         # Header, frame border, and status segment modules
-├── editor/             # FrameEditor component for layout rendering
+├── components/         # Header (BasicHeader), frame border, and status segment modules
+├── editor/             # BlockyEditor editor-frame renderer
+├── renderers/          # Renderer registry + swap-in API (blocky / basic)
 └── utils/              # Helpers for Git status, paths, and agent modes
 
 ```

package/extensions/components/agent-mode.ts

@@ -1,20 +1,21 @@
 import { capitalize } from "../utils";
+
 import type { SegmentDef } from "./types";
 
-/** Top-right: the current Agent Mode from pi-agent-manager (when installed).
- *  Rendered as a pill using the agent's own color/icon. */
+/** Pseudo-footer (left): the current Agent Mode from pi-agent-manager
+ *  (when installed). Rendered as a pill using the agent's own color/icon. */
 export const agentModeSegment: SegmentDef = {
   id: "agent-mode",
-  slot: "bottomLeft",
+  slot: "topLeft",
   enabled: (_d, cfg) => cfg.showAgentMode !== false,
 
-  render: (d, { theme, segColor }) => {
+  render: (d, { theme }) => {
     const m = d.agentMode;
     if (!m) return "";
 
-    // Agent's own color wins; frame.colors.agentMode fills in; zen never mutes.
-    const color = m.color ?? segColor("agentMode", d.accentColor);
-    const label = theme.bold(` ${m.icon ?? "◆"} ${capitalize(m.name)} `);
+    // Agent's own color wins; accent fills in. Zen never mutes the agent.
+    const color = m.color ?? d.accentColor;
+    const label = ` ${capitalize(m.name)} `;
 
     try {
       return theme.fg(color, label);

package/extensions/components/cwd.ts

@@ -1,26 +1,23 @@
 import type { SegmentDef } from "./types";
 import { getShortCwd } from "../utils";
 
-/** Bottom-right: working directory + git branch (with dirty count). */
+/** Pseudo-footer (right): working directory + git branch (with dirty count). */
 export const cwdSegment: SegmentDef = {
   id: "cwd",
-  slot: "bottomRight",
+  slot: "bottomLeft",
   enabled: (_d, cfg) => cfg.showCwd !== false,
-  render: (d, { theme, icons, segColor }) => {
+  render: (d, { theme, icons }) => {
     const folder = getShortCwd(d.cwd);
 
-    let text = theme.fg(
-      segColor("cwd", "muted"),
-      `${icons.folder} ${folder}`,
-    );
+    let text = theme.fg("muted", `${icons.folder} ${folder}`);
 
     if (d.gitBranch) {
       let git = ` ${icons.gitBranch} ${d.gitBranch}`;
-      text += theme.fg(segColor("cwd", d.accentColor), git);
+      text += theme.fg(d.zenMode ? "muted" : d.accentColor, git);
 
       if (d.gitDirty > 0) {
         text += theme.fg(
-          segColor("cwd", "error"),
+          d.zenMode ? "muted" : "error",
           ` ${icons.gitDirty} ${d.gitDirty}`,
         );
       }

package/extensions/components/frame.ts

@@ -1,23 +1,13 @@
 /**
- * The box. Wraps the base editor's rows (rendered narrower) with rounded
- * corner glyphs, embeds the segment text into the top/bottom border, and
- * inserts the configurable blank padding lines inside the box.
+ * Row layout for the borderless band editor.
  *
- * Row budget: content is rendered at `width - 2 - 2*paddingX`, wrapped with
- * `paddingX` spaces + a `│` on each side, so every output row is exactly
- * `width` columns — same contract as the default editor.
+ * composeBand assembles the bg-filled band: padding rows, content (prefix on
+ * the first row), autocomplete, one blank row, then the box-bottom segments.
+ * Every output row is exactly `width` columns. fitFrameRow/fitInfoRow lay out
+ * the header and status rows.
  */
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 
-export interface FrameOptions {
-  width: number;
-  prefix?: string;
-  paddingX: number;
-  paddingTop: number;
-  paddingBottom: number;
-  border: (str: string) => string;
-}
-
 const SGR_RE = /\x1b\[[0-9;]*m/g;
 const CURSOR_MARKER_RE = /\x1b_pi:c\x07/g;
 
@@ -26,7 +16,7 @@ function plain(row: string): string {
 }
 
 /** A border row is all `─`, or a `─── ↑/↓ N more ───` scroll indicator. */
-function isBorderRow(row: string): boolean {
+export function isBorderRow(row: string): boolean {
   const t = plain(row).trim();
 
   if (t === "") return true;
@@ -35,6 +25,58 @@ function isBorderRow(row: string): boolean {
   return /^─── [↑↓] \d+ more ─*$/.test(t);
 }
 
+export interface BandOptions {
+  padX: number;
+  width: number;
+  prefix: string;
+  marginX: number;
+  boxBottom: string;
+  paddingTop: number;
+  paddingBottom: number;
+  paint: (row: string) => string;
+}
+
+/** Borderless bg band: padding, content (prefix on first row), autocomplete,
+ *  blank row, box-bottom segments. Every row is exactly `width` columns. */
+export function composeBand(
+  content: string[],
+  autocomplete: string[],
+  opts: BandOptions,
+): string[] {
+  const {
+    padX,
+    paint,
+    width,
+    prefix,
+    marginX,
+    boxBottom,
+    paddingTop,
+    paddingBottom,
+  } = opts;
+
+  const lead = Math.max(0, padX - visibleWidth(prefix));
+
+  const inset = (row: string) =>
+    paint(prefix + " ".repeat(lead) + row + " ".repeat(padX));
+
+  const fill = () => inset(paint(" ".repeat(Math.max(0, width - 2 * padX))));
+
+  const rows: string[] = [];
+  for (let i = 0; i < paddingTop; i++) rows.push(fill());
+
+  content.forEach((row) => {
+    rows.push(inset(row));
+  });
+
+  autocomplete.forEach((row) => rows.push(inset(row)));
+
+  rows.push(fill());
+  rows.push(inset(boxBottom));
+
+  for (let i = 0; i < paddingBottom; i++) rows.push(fill());
+  return rows;
+}
+
 /** Lay one border row: cap + leftText + ─fill + rightText + cap, always
  *  exactly `width` columns. Right text truncates first, then left text. */
 export function fitFrameRow(
@@ -91,50 +133,3 @@ export function fitInfoRow(
   );
   return leftText2 + " ".repeat(fill) + rightText2;
 }
-
-function wrapContent(row: string, paddingX: number): string {
-  if (paddingX <= 0) return row;
-
-  return " ".repeat(paddingX) + row + " ".repeat(paddingX);
-}
-
-export function renderFrame(inner: string[], opts: FrameOptions): string[] {
-  const { border, width, paddingX, prefix } = opts;
-  if (inner.length === 0) return inner;
-
-  // The real bottom border is the last border-like row (autocomplete rows
-  // are appended *after* it, so the last row is NOT necessarily the bottom).
-  let bottomIdx = inner.length - 1;
-
-  for (let i = inner.length - 1; i >= 0; i--) {
-    if (isBorderRow(inner[i]!)) {
-      bottomIdx = i;
-      break;
-    }
-  }
-
-  const result: string[] = [];
-  const padRow = " ".repeat(Math.max(0, width));
-  const fullBorder = border("─".repeat(width));
-
-  result.push(fullBorder);
-
-  for (let i = 0; i < opts.paddingTop; i++) result.push(padRow);
-
-  for (let i = 1; i < bottomIdx; i++) {
-    const decorator = i === 1 ? (prefix ?? "") : "";
-    const content = decorator + inner[i]!;
-
-    result.push(wrapContent(content, paddingX - visibleWidth(decorator)));
-  }
-
-  for (let i = 0; i < opts.paddingBottom; i++) result.push(padRow);
-
-  result.push(fullBorder);
-
-  for (let i = bottomIdx + 1; i < inner.length; i++) {
-    result.push(wrapContent(inner[i]!, paddingX));
-  }
-
-  return result;
-}

package/extensions/components/model.ts

@@ -1,16 +1,13 @@
 import type { SegmentDef } from "./types";
 
-/** Top-left: the active model name. */
+/** Box bottom (left): the active model name. */
 export const modelSegment: SegmentDef = {
   id: "model",
   slot: "topLeft",
   enabled: (_d, cfg) => cfg.showModel !== false,
-  render: (d, { theme, icons, segColor }) => {
+  render: (d, { theme }) => {
     if (!d.modelName) return "";
 
-    return theme.fg(
-      segColor("model", d.accentColor),
-      ` ${icons.model} ${d.modelName} `,
-    );
+    return ` ${theme.fg("text", d.modelName)} ${theme.fg("muted", `(${d.modelProvider})`)} `;
   },
 };

package/extensions/components/reasoning.ts

@@ -3,19 +3,20 @@ import type { ThemeColor } from "@earendil-works/pi-coding-agent";
 import type { SegmentDef } from "./types";
 import { THINKING_TOKEN } from "../config/constants";
 
-/** Top-left (after model): the current thinking level, tinted with its own
- *  theme token — the same color pi applies to the border at that level. */
+/** Box bottom (left): current thinking level, tinted with its own theme
+ *  token — the same color pi applies to the border at that level. */
 export const reasoningSegment: SegmentDef = {
   id: "reasoning",
   slot: "topLeft",
   enabled: (_d, cfg) => cfg.showThinking !== false,
-  render: (d, { theme, icons, segColor }) => {
+  render: (d, { theme, icons }) => {
     if (!d.thinkingLevel) return "";
+
     const token = (THINKING_TOKEN[d.thinkingLevel] ??
       "thinkingText") as ThemeColor;
 
     return theme.fg(
-      segColor("thinking", token),
+      d.zenMode ? "muted" : token,
       ` ${icons.thinking} ${d.thinkingLevel} `,
     );
   },

package/extensions/components/registry.ts

@@ -13,11 +13,11 @@ import { agentModeSegment } from "./agent-mode";
 import type { FrameData, SegmentContext, SegmentDef, Slot } from "./types";
 
 export const segments: SegmentDef[] = [
+  agentModeSegment,
   modelSegment,
   reasoningSegment,
   spinnerSegment,
   tokenCountSegment,
-  agentModeSegment,
   cwdSegment,
 ];
 
@@ -38,5 +38,5 @@ export function segmentsFor(
   return active
     .map((s) => s.render(d, ctx))
     .filter((t) => t !== "")
-    .join(ctx.border("·"));
+    .join(ctx.theme.fg("dim", "·"));
 }

package/extensions/components/token-count.ts

@@ -19,12 +19,12 @@ function formatWindow(n: number): string {
   return `${(n / 1_000).toFixed(0)}k`;
 }
 
-/** Bottom-left: context window usage (percent + used/window tokens). */
+/** Box bottom (right): context window usage (percent + used/window tokens). */
 export const tokenCountSegment: SegmentDef = {
   id: "token-count",
-  slot: "topRight",
+  slot: "bottomRight",
   enabled: (_d, cfg) => cfg.showContext !== false,
-  render: (d, { border, theme, icons, segColor }) => {
+  render: (d, { theme, icons }) => {
     const c = d.context;
     if (!c) return "";
 
@@ -41,15 +41,13 @@ export const tokenCountSegment: SegmentDef = {
       }
     }
 
+    const color2 = d.zenMode ? "muted" : color;
     const used = c.tokens === null ? "?" : formatTokens(c.tokens);
 
     return (
-      theme.fg(segColor("context", color), ` ${icons.context} ctx ${pct} `) +
-      border("·") +
-      theme.fg(
-        segColor("context", color),
-        ` ${used}/${formatWindow(c.window)} `,
-      )
+      theme.fg(color2, ` ${icons.context} ctx ${pct} `) +
+      theme.fg("dim", "·") +
+      theme.fg(color2, ` ${used}/${formatWindow(c.window)} `)
     );
   },
 };

package/extensions/components/types.ts

@@ -10,14 +10,11 @@
  */
 import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
 
-import type {
-  FrameColors,
-  FrameIcons,
-  FrameSettings,
-  SpinnerPhase,
-} from "../config/types";
+import type { FrameIcons, FrameSettings, SpinnerPhase } from "../config/types";
 
-/** Where in the frame border a segment renders. */
+/** Where a segment renders. "top*" → the box-bottom row inside the band,
+ *  "bottom*" → the pseudo-footer row below it (names kept from the old
+ *  border layout). */
 export type Slot = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
 
 export type AgentConfig = {
@@ -47,6 +44,7 @@ export interface FrameData {
   accentColor: ThemeColor;
   gitBranch: string | undefined;
   modelName: string | undefined;
+  modelProvider: string | undefined;
   spinnerPhase: SpinnerPhase | null;
   thinkingLevel: string | undefined;
 
@@ -68,11 +66,6 @@ export interface SegmentContext {
   theme: Theme;
   icons: FrameIcons;
   cfg: FrameSettings;
-  border: (str: string) => string;
-
-  /** Resolve a segment's fg: zen-mode mutes everything except agentMode;
-   *  else `frame.colors.<key>` supersedes the segment default. */
-  segColor: (key: keyof FrameColors, fallback: ThemeColor) => ThemeColor;
 }
 
 /** A segment renders an already-ANSI-styled string, or "" to render nothing. */
@@ -93,14 +86,15 @@ export interface SegmentDef {
  * this with its own live state (mode / count / spinner frame) in render().
  */
 export interface ExternalData {
-  modelName: string | undefined;
-  thinkingLevel: string | undefined;
-  spinnerPhase: SpinnerPhase | null;
-  context: FrameData["context"];
   cwd: string;
-  gitBranch: string | undefined;
   gitDirty: number;
+  zenMode: boolean;
   agentMode: AgentMode;
   theme: Theme | undefined;
-  zenMode: boolean;
+  gitBranch: string | undefined;
+  modelName: string | undefined;
+  context: FrameData["context"];
+  modelProvider: string | undefined;
+  thinkingLevel: string | undefined;
+  spinnerPhase: SpinnerPhase | null;
 }

package/extensions/config/constants/defaults.ts

@@ -3,9 +3,11 @@ import { WORKING_MESSAGES } from "./messages";
 export const DEFAULT_SETTINGS: Settings = {
   zenMode: false,
   accentColor: "accent",
+  editorFrame: "blocky",
 
   header: {
     enable: false,
+    type: "basic",
     logoColor: "text",
     accentColor: "accent",
 
@@ -24,7 +26,9 @@ export const DEFAULT_SETTINGS: Settings = {
 
   frame: {
     icons: {},
-    paddingX: 1,
+    marginX: 1,
+    paddingX: 2,
+    prefix: "┃",
     enable: true,
     minWidth: 20,
     marginTop: 0,
@@ -37,11 +41,6 @@ export const DEFAULT_SETTINGS: Settings = {
     showContext: true,
     showThinking: true,
     showAgentMode: true,
-    borderColor: "text",
-
-    colors: {},
-    // ponytail: colors were dormant (nothing read them); now wired — keep
-    // defaults unset so segments keep their natural colors and zen-mode is
-    // the mute switch.
+    prefixColor: "agentMode",
   },
 };

package/extensions/config/settings.ts

@@ -8,7 +8,7 @@ import {
   DEFAULT_SETTINGS,
   WORKING_MESSAGES,
 } from "./constants";
-import { Settings, FrameColors } from "./types";
+import type { Settings } from "./types";
 import { isThemeColor } from "../utils";
 
 function getResolvedSettingsFilePath(): string {
@@ -41,6 +41,8 @@ function normalize(raw: unknown): Settings {
     ...DEFAULT_SETTINGS,
     frame: { ...DEFAULT_SETTINGS.frame },
     zenMode: bool(r.zenMode, d.zenMode ?? true),
+    editorFrame:
+      typeof r.editorFrame === "string" ? r.editorFrame : d.editorFrame,
   };
 
   if (typeof r.frame === "object" && r.frame) {
@@ -48,10 +50,11 @@ function normalize(raw: unknown): Settings {
 
     out.frame = {
       enable: bool(f.enable, d.frame?.enable),
+      marginX: num(f.marginX, d.frame?.marginX ?? 1),
+      paddingX: num(f.paddingX, d.frame?.paddingX ?? 1),
       minWidth: num(f.minWidth, d.frame?.minWidth ?? 20),
-      paddingTop: num(f.paddingTop, d.frame?.paddingTop ?? 1),
+      paddingTop: num(f.paddingTop, d.frame?.paddingTop ?? 0),
       paddingBottom: num(f.paddingBottom, d.frame?.paddingBottom ?? 1),
-      paddingX: num(f.paddingX, d.frame?.paddingX ?? 1),
       marginTop: num(f.marginTop, d.frame?.marginTop ?? 0),
       marginBottom: num(f.marginBottom, d.frame?.marginBottom ?? 0),
       showModel: bool(f.showModel, d.frame?.showModel),
@@ -64,29 +67,12 @@ function normalize(raw: unknown): Settings {
         typeof f.icons === "object" && f.icons
           ? { ...d.frame?.icons, ...(f.icons as Record<string, unknown>) }
           : d.frame?.icons,
-      borderColor:
-        typeof f.borderColor === "string" &&
-        (isThemeColor(f.borderColor) || f.borderColor === "agentMode")
-          ? f.borderColor
-          : (d.frame?.borderColor ?? "border"),
-
-      colors:
-        typeof f.colors === "object" && f.colors
-          ? (Object.fromEntries(
-              Object.entries(f.colors as Record<string, unknown>).filter(
-                ([, v]) => typeof v === "string" && isThemeColor(v),
-              ),
-            ) as Partial<FrameColors>)
-          : d.frame?.colors,
-
       prefix:
-        typeof f.prefix === "string" ? f.prefix : (d.frame?.prefix ?? "❯"),
+        typeof f.prefix === "string" ? f.prefix : (d.frame?.prefix ?? "┃"),
 
       prefixColor:
         typeof f.prefixColor === "string" &&
-        (f.prefixColor === "agentMode" ||
-          f.prefixColor === "frameBorder" ||
-          isThemeColor(f.prefixColor))
+        (f.prefixColor === "agentMode" || isThemeColor(f.prefixColor))
           ? f.prefixColor
           : d.frame?.prefixColor, // unset → text
     };
@@ -96,6 +82,7 @@ function normalize(raw: unknown): Settings {
     const h = r.header as Record<string, unknown>;
 
     out.header = {
+      type: typeof h.type === "string" ? h.type : (d.header?.type ?? "basic"),
       enable: bool(h.enable, d.header?.enable),
       heading: str(h.heading, d.header?.heading ?? ""),
       subheading: str(h.subheading, d.header?.subheading ?? ""),

package/extensions/config/types.ts

@@ -9,17 +9,7 @@ export interface BannerTip {
   text: string;
 }
 
-export interface FrameColors {
-  border: ThemeColor;
-  background: ThemeColor;
-  cwd: ThemeColor;
-  model: ThemeColor;
-  context: ThemeColor;
-  thinking: ThemeColor;
-  agentMode: ThemeColor;
-}
-
-/** Nerd-font / glyph icons shown in the frame border. Each is overridable. */
+/** Nerd-font / glyph icons shown in the band and status rows. Overridable. */
 export interface FrameIcons {
   folder: string;
   model: string;
@@ -30,9 +20,9 @@ export interface FrameIcons {
 }
 
 /**
- * ``frame`` — the rounded-corner shell look. Padding values are plain
+ * ``frame`` — the borderless band look. Padding values are plain
  * numbers (>= 0): paddingTop/paddingBottom are blank lines shown *inside*
- * the box above/below the content.
+ * the band above/below the content.
  */
 export interface FrameSettings {
   enable?: boolean;
@@ -40,19 +30,22 @@ export interface FrameSettings {
   /** Below this terminal width the frame is skipped entirely (passthrough) */
   minWidth?: number;
 
-  /** Blank lines inside the box above the content. Default 1. */
+  /** Blank rows inside the band above the content. Default 1 */
   paddingTop?: number;
 
-  /** Blank lines inside the box below the content. Default 1. */
+  /** Blank rows inside the band below the content. Default 1 */
   paddingBottom?: number;
 
-  /** Horizontal inner padding for the content rows. Default 1. */
+  /** Horizontal inner padding for the content rows. Default 2 */
   paddingX?: number;
 
-  /** Blank rows OUTSIDE the box, above its top border. Default 0. */
+  /** Horizontal outer margin for the content rows. Default 1 */
+  marginX?: number;
+
+  /** Blank rows OUTSIDE the band, above it. Default 0 */
   marginTop?: number;
 
-  /** Blank rows OUTSIDE the box, below its bottom border. Default 0. */
+  /** Blank rows OUTSIDE the band, below the pseudo-footer. Default 0 */
   marginBottom?: number;
 
   showCwd?: boolean;
@@ -61,21 +54,16 @@ export interface FrameSettings {
   showThinking?: boolean;
   showAgentMode?: boolean;
 
-  /** Show the status-animation spinner segment while streaming. Default false. */
+  /** Show the status-animation spinner segment while streaming. Default false */
   showSpinner?: boolean;
 
   icons?: Partial<FrameIcons>;
-  colors?: Partial<FrameColors>;
 
-  /** ThemeColor used as the fg for all editor border characters; If set to `"agentMode"`, will follow the current Agent color. Default "border". */
-  borderColor?: ThemeColor | "agentMode";
-
-  /** Text shown before the editor content. Default "❯". */
+  /** Text before the editor content. Default "┃" */
   prefix?: string;
 
-  /** ThemeColor used as the fg for the prefix text; If set to `"agentMode"`, will follow the current Agent color;
-   * If set to `"frameBorder"`, will follow the border color. Default: text color. */
-  prefixColor?: "agentMode" | "frameBorder" | ThemeColor;
+  /** ThemeColor for the prefix; "agentMode" follows the agent's color if (@leo-alvarenga/pi-agent-manager is installed, defaults to "text otherwise"). Default: "agentMode" */
+  prefixColor?: "agentMode" | ThemeColor;
 }
 
 /** `header` — the top-line header, which can show a logo or other text */
@@ -86,6 +74,9 @@ export interface HeaderSettings {
   subheading: string;
   logoColor: ThemeColor;
   accentColor: ThemeColor;
+
+  /** Header renderer by registered name. Default "basic". */
+  type?: string;
 }
 
 /** `workingMessage` — rotating messages in pi's built-in working loader. */
@@ -105,11 +96,14 @@ export interface Settings {
   header?: HeaderSettings;
   workingMessage?: WorkingMessageSettings;
 
+  /** Editor-frame renderer by registered name. Default "blocky". */
+  editorFrame?: string;
+
   /** Master mute: every segment except agent-mode renders muted.
    *  Default true. Toggle at runtime with `/zen_mode` or the `piZenFrame.zenMode`
    *  keybinding (default `ctrl+shift+z`). */
   zenMode?: boolean;
 
-  /** Accent color for the frame border and other highlights; Defaults to 'accent' */
+  /** Accent color for segment highlights; Defaults to 'accent' */
   accentColor?: ThemeColor;
 }

package/extensions/editor/{frame-editor.ts → blocky-editor.ts}

@@ -1,7 +1,7 @@
 /**
- * FrameEditor — the editor component. Subclasses CustomEditor so all of
+ * BlockyEditor — the editor-frame renderer. Subclasses CustomEditor so all of
  * pi's editing/undo/app-keybinding machinery keeps working; `render` layers
- * the box frame. Vim behavior was removed — all input passes through to the
+ * the bg band. Vim behavior was removed — all input passes through to the
  * base editor. Appearance lives in `components/` (segments + frame).
  */
 import {
@@ -11,24 +11,20 @@ import {
 } from "@earendil-works/pi-coding-agent";
 
 import { DEFAULT_ICONS, SPINNER_FRAMES } from "../config/constants";
-import type { FrameSettings, SpinnerPhase } from "../config/types";
-import { renderFrame, fitInfoRow } from "../components/frame";
+import type { SpinnerPhase } from "../config/types";
+import { composeBand, fitInfoRow, isBorderRow } from "../components/frame";
 import { segmentsFor } from "../components/registry";
 import type {
   ExternalData,
   FrameData,
   SegmentContext,
 } from "../components/types";
+import type { EditorFrameRenderOptions } from "../renderers/types";
 import { isThemeColor } from "../utils";
 
-export interface FrameEditorOptions {
-  frame: FrameSettings;
-  accentColor: ThemeColor;
-}
-
-export class FrameEditor extends CustomEditor {
+export class BlockyEditor extends CustomEditor {
   private pi: ExtensionAPI;
-  private opts: FrameEditorOptions;
+  private opts: EditorFrameRenderOptions;
   private provider: (pi: ExtensionAPI) => ExternalData;
 
   private spinnerIdx = 0;
@@ -38,7 +34,7 @@ export class FrameEditor extends CustomEditor {
   constructor(
     pi: ExtensionAPI,
     provider: (pi: ExtensionAPI) => ExternalData,
-    opts: FrameEditorOptions,
+    opts: EditorFrameRenderOptions,
     ...args: ConstructorParameters<typeof CustomEditor>
   ) {
     super(...args);
@@ -83,101 +79,109 @@ export class FrameEditor extends CustomEditor {
 
     const padX = Math.min(
       frame.paddingX ?? 1,
-      Math.max(0, Math.floor((width - 2) / 2)),
+      Math.max(0, Math.floor(width / 2)),
+    );
+
+    const marginX = Math.min(
+      frame.marginX ?? 0,
+      Math.max(0, Math.floor(width / 2)),
     );
 
-    const innerWidth = width - 2 - padX * 2;
+    const contentWidth = width - marginX * 2;
+    const innerWidth = width - padX * 2 - marginX * 2;
     if (innerWidth < 8) return super.render(width);
 
     const ext = this.provider(this.pi);
     const d: FrameData = {
       cwd: ext.cwd,
       context: ext.context,
+      zenMode: ext.zenMode,
       gitDirty: ext.gitDirty,
       agentMode: ext.agentMode,
       gitBranch: ext.gitBranch,
       modelName: ext.modelName,
       spinnerPhase: ext.spinnerPhase,
+      modelProvider: ext.modelProvider,
       thinkingLevel: ext.thinkingLevel,
       spinnerFrame: this.spinnerFrame(),
       accentColor: this.opts.accentColor,
-      zenMode: ext.zenMode,
     };
 
-    let prefix = frame.prefix ?? "❯";
+    let prefix = frame.prefix ?? "┃";
 
     if (ext.theme?.fg) {
-      let borderColor: ThemeColor = "accent";
-
-      if (frame.borderColor === "agentMode") {
-        borderColor = ext.agentMode?.color ?? "accent";
-      } else {
-        borderColor = frame.borderColor ?? "accent";
-      }
-
       let prefixColor: ThemeColor = "text";
       if (frame.prefixColor === "agentMode") {
-        prefixColor = ext.agentMode?.color ?? "accent";
-      } else if (frame.prefixColor === "frameBorder") {
-        prefixColor = borderColor;
+        prefixColor = ext.agentMode?.color ?? "text";
       } else if (frame.prefixColor && isThemeColor(frame.prefixColor)) {
         prefixColor = frame.prefixColor;
       }
 
       prefix = ext.theme.fg(prefixColor, prefix);
-
-      this.borderColor = (s: string) => ext.theme!.fg(borderColor, s);
     }
 
     // No theme (non-TUI) or frame disabled or too narrow → plain editor.
-    if (!ext.theme || !frame.enable || width < (frame.minWidth ?? 20)) {
+    if (!ext.theme || !frame.enable || contentWidth < (frame.minWidth ?? 20)) {
       return super.render(width);
     }
 
     const inner = super.render(innerWidth);
+
+    let bottomIdx = inner.length - 1;
+    for (let i = inner.length - 1; i >= 0; i--) {
+      if (isBorderRow(inner[i]!)) {
+        bottomIdx = i;
+        break;
+      }
+    }
+
+    const content = inner.slice(1, bottomIdx);
+    const autocomplete = inner.slice(bottomIdx + 1);
+
+    const bgSgr = ext.theme.getBgAnsi("customMessageBg");
+    const paint = (row: string) =>
+      bgSgr + row.split("\x1b[0m").join(`\x1b[0m${bgSgr}`) + "\x1b[0m";
+
     const ctx: SegmentContext = {
       cfg: frame,
       theme: ext.theme,
-      border: this.borderColor,
       icons: {
         ...DEFAULT_ICONS,
         ...frame.icons,
       },
-      segColor: (key, fallback) =>
-        d.zenMode && key !== "agentMode"
-          ? "muted"
-          : (frame.colors?.[key] ?? fallback),
     };
 
-    const topLine = fitInfoRow(
-      segmentsFor("topLeft", d, ctx),
-      segmentsFor("topRight", d, ctx),
-      width,
-    );
-
-    const bottomLine = fitInfoRow(
-      segmentsFor("bottomLeft", d, ctx),
-      segmentsFor("bottomRight", d, ctx),
-      width,
-    );
-
-    const box = renderFrame(inner, {
-      width,
+    const box = composeBand(content, autocomplete, {
+      padX,
+      paint,
       prefix,
-      paddingX: padX,
-      border: this.borderColor,
+      width: contentWidth,
+      marginX: frame.marginX ?? 0,
       paddingTop: frame.paddingTop ?? 1,
       paddingBottom: frame.paddingBottom ?? 1,
+      boxBottom: fitInfoRow(
+        segmentsFor("topLeft", d, ctx),
+        segmentsFor("topRight", d, ctx),
+        innerWidth,
+      ),
     });
 
-    // Blank rows OUTSIDE the box, above/below its borders.
-    const marginRow = " ".repeat(width);
+    const pseudoFooter = fitInfoRow(
+      segmentsFor("bottomLeft", d, ctx),
+      segmentsFor("bottomRight", d, ctx),
+      contentWidth,
+    );
+
+    // Blank rows OUTSIDE the band, above/below it.
+    const marginRow = " ".repeat(contentWidth);
     const marginTop = Array(Math.max(0, frame.marginTop ?? 0)).fill(marginRow);
     const marginBottom = Array(Math.max(0, frame.marginBottom ?? 0)).fill(
       marginRow,
     );
 
-    return [...marginTop, topLine, ...box, bottomLine, ...marginBottom];
+    return [...marginTop, ...box, marginRow, pseudoFooter, ...marginBottom].map(
+      (row) => " ".repeat(marginX) + row + " ".repeat(marginX),
+    );
   }
 
   private spinnerFrame(): string {

package/extensions/index.ts

@@ -1,8 +1,9 @@
 /**
  * pi-zen-frame entry. Thin wiring layer:
  *   - loads config, subscribes to pi lifecycle + mode/agent-mode events
- *   - installs FrameEditor via setEditorComponent (factory is re-run on
- *     model switch — the old instance's spinner timer is stopped first)
+ *   - installs the configured editor-frame renderer via setEditorComponent
+ *     (factory is re-run on model switch — the old instance's spinner
+ *     timer is stopped first)
  *   - assembles ExternalData per paint (model, thinking, context, git, ...)
  *
  * All appearance logic lives in components/ (segments + frame); the editor
@@ -27,16 +28,17 @@ import {
 import { loadSettings } from "./config/settings";
 import type { Settings, SpinnerPhase } from "./config/types";
 import type { AgentMode, AgentState, ExternalData } from "./components/types";
-import { FrameEditor } from "./editor/frame-editor";
+import { getEditorFrame, getHeader } from "./renderers/registry";
+import type { EditorFrameRenderer } from "./renderers/types";
 import {
   capitalize,
   readAgentModeFromSession,
   readGit,
   type GitInfo,
 } from "./utils";
-import { createHeader, type HeaderEnv } from "./components/header";
+import { type HeaderEnv } from "./components/header";
 
-let editor: FrameEditor | null = null;
+let editor: EditorFrameRenderer | null = null;
 let currentCtx: ExtensionContext | null = null;
 let settings: Settings = DEFAULT_SETTINGS;
 let spinnerPhase: SpinnerPhase | null = null;
@@ -94,7 +96,8 @@ function provideExternal(pi: ExtensionAPI): ExternalData {
     gitBranch: git.branch,
     theme: ctx?.ui.theme,
     thinkingLevel: pi.getThinkingLevel(),
-    modelName: `${model?.name ?? model?.id ?? "Unknown"} (${capitalize(model?.provider ?? "unknown")})`,
+    modelName: model?.name ?? model?.id ?? "Unknown",
+    modelProvider: capitalize(model?.provider ?? "unknown"),
     context: usage
       ? {
           tokens: usage.tokens,
@@ -201,8 +204,10 @@ export default async function (pi: ExtensionAPI) {
     }
 
     if (settings.header?.enable) {
+      const headerFactory =
+        getHeader(settings.header.type ?? "basic") ?? getHeader("basic")!;
       ctx.ui.setHeader((_tui, theme) =>
-        createHeader(_tui, theme, pi, settings, getHeaderEnv),
+        headerFactory(_tui, theme, pi, settings, getHeaderEnv),
       );
     }
 
@@ -217,13 +222,19 @@ export default async function (pi: ExtensionAPI) {
     ctx.ui.setEditorComponent((...args) => {
       editor?.stopSpinner();
 
-      editor = new FrameEditor(
+      const frameFactory =
+        getEditorFrame(settings.editorFrame ?? "blocky") ??
+        getEditorFrame("blocky")!;
+
+      editor = frameFactory(
         pi,
         provideExternal,
         {
           frame: settings.frame ?? DEFAULT_SETTINGS.frame!,
           accentColor:
-            settings.accentColor ?? DEFAULT_SETTINGS.accentColor ?? "accent",
+            settings.accentColor ??
+            DEFAULT_SETTINGS.accentColor ??
+            "accent",
         },
         ...args,
       );

package/extensions/renderers/registry.ts

@@ -0,0 +1,41 @@
+/**
+ * Renderer registry — the swap-in point. Register an editor-frame or header
+ * implementation by name; the entry point resolves the configured name via
+ * getEditorFrame/getHeader. Built-ins are registered here so the entry point
+ * only ever talks to the registry — add a new look by registering it.
+ */
+import type { EditorFrameFactory, HeaderRendererFactory } from "./types";
+import { createHeader } from "../components/header";
+import { BlockyEditor } from "../editor/blocky-editor";
+
+const editorFrames = new Map<string, EditorFrameFactory>();
+const headers = new Map<string, HeaderRendererFactory>();
+
+export function registerEditorFrame(
+  name: string,
+  factory: EditorFrameFactory,
+): void {
+  editorFrames.set(name, factory);
+}
+
+export function registerHeader(
+  name: string,
+  factory: HeaderRendererFactory,
+): void {
+  headers.set(name, factory);
+}
+
+export function getEditorFrame(name: string): EditorFrameFactory | undefined {
+  return editorFrames.get(name);
+}
+
+export function getHeader(name: string): HeaderRendererFactory | undefined {
+  return headers.get(name);
+}
+
+// ── built-ins ─────────────────────────────────────────────────────────────
+registerEditorFrame("blocky", (pi, provider, opts, ...args) =>
+  new BlockyEditor(pi, provider, opts, ...args),
+);
+
+registerHeader("basic", createHeader);

package/extensions/renderers/types.ts

@@ -0,0 +1,57 @@
+/**
+ * Renderer contracts. A "renderer" is a named, swappable implementation of
+ * the editor frame (the blocky band) or the header (the welcome panel).
+ * Implementations register by name in registry.ts; the entry point resolves
+ * the configured name and instantiates. Signatures mirror pi's
+ * setEditorComponent / setHeader factories.
+ */
+import type { TUI } from "@earendil-works/pi-tui";
+import type {
+  CustomEditor,
+  ExtensionAPI,
+  Theme,
+  ThemeColor,
+} from "@earendil-works/pi-coding-agent";
+import type { FrameSettings, Settings, SpinnerPhase } from "../config/types";
+import type { ExternalData } from "../components/types";
+import type { HeaderEnv } from "../components/header";
+
+// ── Header ────────────────────────────────────────────────────────────────
+
+/** What pi's TUI needs from any header implementation. */
+export interface HeaderRenderer {
+  render(width: number): string[];
+  invalidate(): void;
+}
+
+/** Builds a HeaderRenderer; matches ctx.ui.setHeader's factory signature. */
+export type HeaderRendererFactory = (
+  tui: TUI,
+  theme: Theme,
+  pi: ExtensionAPI,
+  settings: Settings,
+  getEnv: (pi: ExtensionAPI) => HeaderEnv,
+) => HeaderRenderer;
+
+// ── Editor frame ──────────────────────────────────────────────────────────
+
+/** Per-renderer options handed to the frame factory (frame config + accent). */
+export interface EditorFrameRenderOptions {
+  frame: FrameSettings;
+  accentColor: ThemeColor;
+}
+
+/** Surface the entry point drives on the active editor-frame renderer. */
+export interface EditorFrameRenderer extends CustomEditor {
+  setSpinner(phase: SpinnerPhase | null): void;
+  stopSpinner(): void;
+  refresh(): void;
+}
+
+/** Builds an EditorFrameRenderer; `...args` forward to CustomEditor. */
+export type EditorFrameFactory = (
+  pi: ExtensionAPI,
+  provider: (pi: ExtensionAPI) => ExternalData,
+  opts: EditorFrameRenderOptions,
+  ...args: ConstructorParameters<typeof CustomEditor>
+) => EditorFrameRenderer;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@leo-alvarenga/pi-zen-frame",
   "description": "A pi-coding-agent extension that gives the TUI editor a simple yet polished look and feel",
   "author": "Leonardo A. Alvarenga",
-  "version": "0.12.2",
+  "version": "0.13.0",
   "license": "MIT",
   "repository": "github.com/leo-alvarenga/pi-mono",
   "publishConfig": {