@leo-alvarenga/pi-zen-frame 0.20.0 → 0.21.2

package/README.md

@@ -43,7 +43,7 @@ Configuration is loaded from `~/.pi/agent/pi-zen-frame.json`. All properties are
   // Fallback accent color for frame border and active segments
   "accentColor": "accent",
 
-  // Editor-frame renderer by registered name (built-in: "blocky", "minimalist")
+  // Editor-frame renderer by registered name (built-in: "blocky", "linear", "minimalist")
   "editorFrame": "blocky",
 
   "header": {
@@ -88,14 +88,14 @@ Configuration is loaded from `~/.pi/agent/pi-zen-frame.json`. All properties are
 
 The editor frame shows status indicators in two rows below the editor:
 
-| Location           | Segment        | Description                                                                                                                                         |
-| ------------------ | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Editor band (left) | **agent mode** | Active agent indicator pill from `pi-agent-manager`                                                                                                 |
-|                    | **model**      | Active model name and provider                                                                                                                      |
-|                    | **reasoning**  | Current reasoning effort level, tinted with pi thinking tokens                                                                                      |
-|                    | **spinner**    | Active phase indicator (`thinking`, `outputting`, `toolcall`, `exec`); replaces the row while streaming when `showSpinner` is enabled (default off) |
-| Footer (left)      | **cwd**        | Shortened path, active Git branch, and uncommitted file counts                                                                                      |
-| Footer (right)     | **ctx**        | Context usage percentage and token counts with color alerts                                                                                         |
+| Location       | Segment        | Description                                                                                                                                         |
+| -------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Top            | **agent mode** | Active agent indicator pill from `pi-agent-manager`                                                                                                 |
+|                | **model**      | Active model name and provider                                                                                                                      |
+|                | **reasoning**  | Current reasoning effort level, tinted with pi thinking tokens                                                                                      |
+|                | **spinner**    | Active phase indicator (`thinking`, `outputting`, `toolcall`, `exec`); replaces the row while streaming when `showSpinner` is enabled (default off) |
+| Footer (left)  | **cwd**        | Shortened path, active Git branch, and uncommitted file counts                                                                                      |
+| Footer (right) | **ctx**        | Context usage percentage and token counts with color alerts                                                                                         |
 
 ---
 

package/extensions/config/constants/defaults.ts

@@ -3,11 +3,11 @@ import { WORKING_MESSAGES } from "./messages";
 
 export const DEFAULT_SETTINGS: Settings = {
   accentColor: "accent",
-  editorFrame: "blocky",
+  editorFrame: "linear",
 
   header: {
+    type: "box",
     enable: false,
-    type: "basic",
   },
 
   workingMessage: {

package/extensions/config/constants/visuals.ts

@@ -1,6 +1,15 @@
 import type { ThemeColor } from "@earendil-works/pi-coding-agent";
 import type { FrameIcons, SpinnerPhase } from "../types";
 
+export const LOGO_LINES = [
+  "█████████  ",
+  "███   ███  ",
+  "██████     ",
+  "███     ███",
+];
+
+export const LOGO_COLOR: ThemeColor = "text";
+
 /** Spinner animation frames per phase (pi-editor-shell style) */
 export const SPINNER_FRAMES: Record<SpinnerPhase, string[]> = {
   idle: ["⠃", "⠞", "⡵", "⠿", "⢹", "⠄"],

package/extensions/config/types.ts

@@ -48,7 +48,7 @@ export interface FrameSettings {
 export interface HeaderSettings {
   enable: boolean;
 
-  /** Header renderer by registered name. Default "basic". */
+  /** Header renderer by registered name. Default "box" */
   type?: string;
 }
 

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

@@ -4,18 +4,18 @@ import {
   type ExtensionAPI,
 } from "@earendil-works/pi-coding-agent";
 
-import type { SpinnerPhase } from "../config/types";
-import type { ExternalData, FrameData } from "../components/types";
-import type { EditorFrameRenderOptions } from "../renderers/types";
+import type { SpinnerPhase } from "../../config/types";
+import type { ExternalData, FrameData } from "../../components/types";
+import type { EditorFrameRenderOptions } from "../../renderers/types";
 
 import {
   handlePaletteInput,
   loadPaletteItems,
   renderPalette,
   type PaletteState,
-} from "./palette";
+} from "../palette";
 import { renderEditorFrame } from "./render";
-import { SpinnerController } from "./spinner";
+import { SpinnerController } from "../spinner";
 
 export class BlockyEditor extends CustomEditor {
   private pi: ExtensionAPI;

package/extensions/editor/blocky/index.ts

@@ -0,0 +1 @@
+export { BlockyEditor } from "./blocky-editor";

package/extensions/editor/{render.ts → blocky/render.ts}

@@ -1,12 +1,12 @@
-import { DEFAULT_ICONS } from "../config/constants";
-import { composeBand, fitInfoRow, isBorderRow } from "../components/frame";
-import { segmentsFor } from "../components/registry";
+import { DEFAULT_ICONS } from "../../config/constants";
+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";
+} from "../../components/types";
+import type { EditorFrameRenderOptions } from "../../renderers/types";
 
 export function renderEditorFrame(
   getInnerLines: (innerWidth: number) => string[],

package/extensions/editor/index.ts

@@ -0,0 +1,3 @@
+export { BlockyEditor } from "./blocky";
+export { MinimalistEditor } from "./minimalist";
+export { LinearEditor } from "./linear";

package/extensions/editor/linear/components/index.ts

@@ -0,0 +1,44 @@
+import { agentModeSegment } from "../../../components/agent-mode";
+import { cwdSegment } from "../../../components/cwd";
+import { modelSegment } from "../../../components/model";
+import { notifySegment } from "../../../components/notify";
+import { reasoningSegment } from "../../../components/reasoning";
+import { spinnerSegment } from "../../../components/spinner";
+import { tokenCountSegment } from "../../../components/token-count";
+import type {
+  FrameData,
+  SegmentContext,
+  SegmentDef,
+  Slot,
+} from "../../../components/types";
+
+// Re-wire global segments onto LinearEditor's slot layout:
+//   topLeft / topRight  → above-band info row
+//   bottomLeft          → below-band info row
+const segments: SegmentDef[] = [
+  { ...agentModeSegment, slot: "topLeft" },
+  { ...notifySegment, slot: "topLeft" },
+  { ...modelSegment, slot: "topLeft" },
+  { ...reasoningSegment, slot: "topLeft" },
+  { ...spinnerSegment, slot: "topLeft" },
+  { ...tokenCountSegment, slot: "topRight" },
+  { ...cwdSegment, slot: "bottomLeft" },
+];
+
+export function linearSegmentsFor(
+  slot: Slot,
+  d: FrameData,
+  ctx: SegmentContext,
+): string {
+  const defs = segments.filter(
+    (s) => s.slot === slot && (!s.enabled || s.enabled(d, ctx.cfg)),
+  );
+
+  const replacer = defs.find((s) => s.replaces?.(d, ctx.cfg));
+  const active = replacer ? [replacer] : defs;
+
+  return active
+    .map((s) => s.render(d, ctx))
+    .filter((t) => t !== "")
+    .join(ctx.theme.fg("dim", "·"));
+}

package/extensions/editor/linear/index.ts

@@ -0,0 +1 @@
+export { LinearEditor } from "./linear-editor";

package/extensions/editor/linear/linear-editor.ts

@@ -0,0 +1,122 @@
+import {
+  CustomEditor,
+  type ExtensionAPI,
+} from "@earendil-works/pi-coding-agent";
+
+import type { SpinnerPhase } from "../../config/types";
+import type { ExternalData, FrameData } from "../../components/types";
+import type {
+  EditorFrameRenderer,
+  EditorFrameRenderOptions,
+} from "../../renderers/types";
+
+import {
+  handlePaletteInput,
+  loadPaletteItems,
+  renderPalette,
+  type PaletteState,
+} from "../palette";
+import { SpinnerController } from "../spinner";
+import { renderLinearFrame } from "./render";
+
+export class LinearEditor extends CustomEditor implements EditorFrameRenderer {
+  private pi: ExtensionAPI;
+  private opts: EditorFrameRenderOptions;
+  private spinner = new SpinnerController();
+  private paletteState: PaletteState | null = null;
+  private provider: (pi: ExtensionAPI) => ExternalData;
+
+  constructor(
+    pi: ExtensionAPI,
+    provider: (pi: ExtensionAPI) => ExternalData,
+    opts: EditorFrameRenderOptions,
+    ...args: ConstructorParameters<typeof CustomEditor>
+  ) {
+    super(...args);
+
+    this.pi = pi;
+    this.opts = opts;
+    this.provider = provider;
+  }
+
+  refresh(): void {
+    this.tui.requestRender();
+  }
+
+  openPalette(): void {
+    const all = loadPaletteItems(this.pi);
+    this.paletteState = { query: "", all, items: all, selected: 0, viewTop: 0 };
+    this.tui.requestRender();
+  }
+
+  setSpinner(phase: SpinnerPhase | null): void {
+    if (phase) {
+      this.spinner.start(phase, () => this.tui.requestRender());
+    } else {
+      this.spinner.stop();
+    }
+  }
+
+  stopSpinner(): void {
+    this.spinner.stop();
+    this.tui.requestRender();
+  }
+
+  override handleInput(data: string): void {
+    if (!this.paletteState) {
+      super.handleInput(data);
+      return;
+    }
+
+    const result = handlePaletteInput(this.paletteState, data);
+    if (result.submit) {
+      this.paletteState = null;
+      this.setText(result.submit);
+      super.handleInput("\r");
+
+      return;
+    }
+
+    this.paletteState = result.next;
+    this.tui.requestRender();
+  }
+
+  override render(width: number): string[] {
+    if (this.paletteState) {
+      const ext = this.provider(this.pi);
+      if (ext.theme) return renderPalette(this.paletteState, width, ext.theme);
+    }
+
+    const { frame } = this.opts;
+    const marginX = Math.min(1, Math.max(0, Math.floor(width / 2)));
+    const contentWidth = width - marginX * 2;
+
+    if (contentWidth < (frame.minWidth ?? 20)) return super.render(width);
+
+    const ext = this.provider(this.pi);
+    if (!ext.theme || !frame.enable) return super.render(width);
+
+    const d: FrameData = {
+      cwd: ext.cwd,
+      context: ext.context,
+      gitDirty: ext.gitDirty,
+      agentMode: ext.agentMode,
+      gitBranch: ext.gitBranch,
+      modelName: ext.modelName,
+      spinnerPhase: ext.spinnerPhase,
+      modelProvider: ext.modelProvider,
+      notifyEnabled: ext.notifyEnabled,
+      thinkingLevel: ext.thinkingLevel,
+      spinnerFrame: this.spinner.frame(),
+      accentColor: this.opts.accentColor,
+    };
+
+    return renderLinearFrame(
+      (innerWidth) => super.render(innerWidth),
+      this.opts,
+      ext,
+      d,
+      width,
+    );
+  }
+}

package/extensions/editor/linear/render.ts

@@ -0,0 +1,84 @@
+import { DEFAULT_ICONS } from "../../config/constants";
+import { fitInfoRow, isBorderRow } from "../../components/frame";
+import type {
+  ExternalData,
+  FrameData,
+  SegmentContext,
+} from "../../components/types";
+import type { EditorFrameRenderOptions } from "../../renderers/types";
+import { linearSegmentsFor } from "./components";
+
+const LINEAR_PREFIX = "❯";
+
+export function renderLinearFrame(
+  getInnerLines: (innerWidth: number) => string[],
+  opts: EditorFrameRenderOptions,
+  ext: ExternalData,
+  d: FrameData,
+  width: number,
+): string[] {
+  const marginX = Math.min(1, Math.max(0, Math.floor(width / 2)));
+  const contentWidth = width - marginX * 2;
+
+  const innerWidth = contentWidth - LINEAR_PREFIX.length;
+
+  const inner = getInnerLines(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 ctx: SegmentContext = {
+    cfg: opts.frame,
+    theme: ext.theme!,
+    icons: DEFAULT_ICONS,
+  };
+
+  const blankRow = " ".repeat(width);
+  const regularPrefix = " ".repeat(marginX);
+  const borderRow = ext.theme!.fg("dim", "─".repeat(width));
+  const accentPrefix = ext.theme!.fg(opts.accentColor, LINEAR_PREFIX);
+
+  const withMargin = (row: string) => regularPrefix + row + regularPrefix;
+
+  const rows: string[] = [
+    blankRow,
+
+    withMargin(
+      fitInfoRow(
+        linearSegmentsFor("topLeft", d, ctx),
+        linearSegmentsFor("topRight", d, ctx),
+        contentWidth,
+      ),
+    ),
+
+    borderRow,
+  ];
+
+  content.forEach((row, i) => {
+    rows.push(withMargin((i === 0 ? accentPrefix : regularPrefix) + row));
+  });
+
+  autocomplete.forEach((row) => rows.push(withMargin(regularPrefix + row)));
+
+  rows.push(
+    borderRow,
+
+    withMargin(
+      fitInfoRow(
+        linearSegmentsFor("bottomLeft", d, ctx),
+        linearSegmentsFor("bottomRight", d, ctx),
+        contentWidth,
+      ),
+    ),
+  );
+
+  return rows;
+}

package/extensions/editor/{minimalist-editor.ts → minimalist/index.ts}

@@ -3,19 +3,19 @@ import {
   type ExtensionAPI,
 } from "@earendil-works/pi-coding-agent";
 
-import type { SpinnerPhase } from "../config/types";
-import type { ExternalData } from "../components/types";
+import type { SpinnerPhase } from "../../config/types";
+import type { ExternalData } from "../../components/types";
 import type {
   EditorFrameRenderer,
   EditorFrameRenderOptions,
-} from "../renderers/types";
+} from "../../renderers/types";
 
 import {
   handlePaletteInput,
   loadPaletteItems,
   renderPalette,
   type PaletteState,
-} from "./palette";
+} from "../palette";
 
 export class MinimalistEditor
   extends CustomEditor

package/extensions/{components/header.ts → headers/box/index.ts}

@@ -1,52 +1,33 @@
 import type { TUI } from "@earendil-works/pi-tui";
-import { visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import type {
   ExtensionAPI,
   Theme,
   ThemeColor,
 } from "@earendil-works/pi-coding-agent";
 
-import { DEFAULT_ICONS, HEADER_TIPS } from "../config/constants";
-import type { Settings } from "../config/types";
-import { fitFrameRow } from "./frame";
-import { getShortCwd } from "../utils";
-
-/** Below which terminal width the box is skipped (plain logo). */
+import {
+  DEFAULT_ICONS,
+  HEADER_TIPS,
+  LOGO_COLOR,
+  LOGO_LINES,
+} from "../../config/constants";
+import type { Settings } from "../../config/types";
+import { fitFrameRow } from "../../components/frame";
+import { getShortCwd, splitRow, wrapLines } from "../../utils";
+import { HeaderEnv } from "../types";
+
+/** Below which terminal width the box is skipped (plain logo) */
 const MIN_BOX_WIDTH = 20;
 const LEFT_COL_RATIO = 0.4; // logo column width / total width
 
-/** BasicHeader preset styling — self-contained, not user-configurable. */
-const LOGO_LINES = ["█████████  ", "███   ███  ", "██████     ", "███     ███"];
-const LOGO_COLOR: ThemeColor = "text";
 const HEADING = "Welcome back!";
 const SUBHEADING =
   "Ready for your next session? Terminal warm, context clean, tools ready to execute";
 
-/** Live env snapshot the header renders in the right column. */
-export interface HeaderEnv {
-  gitBranch: string | undefined;
-  gitDirty: number;
-  cwd: string;
-
-  /** Combined display name, e.g. `"Model (Provider)"` (provider embedded). */
-  modelName: string | undefined;
-}
-
 const RANDOM_TIP =
   HEADER_TIPS[Math.floor(Math.random() * HEADER_TIPS.length)]?.text ?? "";
 
-function wrapLines(
-  lines: string[],
-  maxLen: number,
-  style?: (line: string) => string,
-): string[] {
-  const wrapped = lines.map((l) => wrapTextWithAnsi(l, maxLen)).flat();
-  if (style) return wrapped.map((l) => (l.length ? style(l) : l));
-
-  return wrapped;
-}
-
-export function createHeader(
+export function createBoxHeader(
   _tui: TUI,
   theme: Theme,
   pi: ExtensionAPI,
@@ -66,36 +47,13 @@ export function createHeader(
   const accentColor = settings.accentColor ?? "accent";
 
   const logo = {
-    lines: LOGO_LINES,
     color: LOGO_COLOR,
+    lines: LOGO_LINES,
   };
 
   const border = (s: string, fg?: ThemeColor) => theme.fg(fg ?? accentColor, s);
 
-  /** Space-pad `text` so it sits horizontally centered within `inner` cols. */
-  function center(text: string, inner: number): string {
-    const w = visibleWidth(text);
-    const left = Math.max(0, Math.floor((inner - w) / 2));
-    const right = Math.max(0, inner - w - left);
-
-    return " ".repeat(left) + text + " ".repeat(right);
-  }
-
-  /** Claude-style split row: │ logo (leftW) │ info (rightW) │, exactly `width` cols. */
-  function splitRow(
-    leftW: number,
-    rightW: number,
-    left: string,
-    right: string,
-  ): string {
-    const left2 = center(left, leftW);
-    const right2 = "  " + right;
-    const pad = " ".repeat(Math.max(0, rightW - visibleWidth(right2)));
-
-    return border("│") + left2 + border("│") + right2 + pad + border("│");
-  }
-
-  /** Right column halves: top = model(+provider), bottom = cwd + git. */
+  /** Right column halves: top = model(+provider), bottom = cwd + git */
   function infoRows(env: HeaderEnv, width: number): string[] {
     const icons = DEFAULT_ICONS;
     const parts: string[] = [];
@@ -103,6 +61,7 @@ export function createHeader(
     if (env.cwd) {
       parts.push(theme.fg("muted", `${icons.folder} ${getShortCwd(env.cwd)}`));
     }
+
     if (env.gitBranch) {
       parts.push(theme.fg(accentColor, `${icons.gitBranch} ${env.gitBranch}`));
 
@@ -137,6 +96,8 @@ export function createHeader(
   }
 
   return {
+    invalidate() {},
+
     render(width: number): string[] {
       const env = getEnv(pi);
 
@@ -163,12 +124,12 @@ export function createHeader(
         ),
       ];
 
-      // Too narrow for a box → fall back to a plain centered logo.
+      // Too narrow for a box → fall back to a plain centered logo
       if (width < MIN_BOX_WIDTH) {
         return leftLines;
       }
 
-      // No truncation: overflow wraps onto following lines until it all fits.
+      // No truncation: overflow wraps onto following lines until it all fits
       const height = Math.max(leftLines.length, rightLines.length);
       const logoTop = Math.max(0, Math.floor((height - leftLines.length) / 2));
 
@@ -180,7 +141,7 @@ export function createHeader(
       const lines: string[] = [""];
 
       lines.push(fitFrameRow("╭", "╮", "", "", width, border));
-      lines.push(splitRow(leftW, rightW, "", ""));
+      lines.push(splitRow(leftW, rightW, "", "", border));
 
       for (let i = 0; i < height; i++) {
         const l = i - logoTop;
@@ -189,14 +150,13 @@ export function createHeader(
         const r = i - rightTop;
         const rightLine = r >= 0 && r < rightLines.length ? rightLines[r]! : "";
 
-        lines.push(splitRow(leftW, rightW, leftLine, rightLine));
+        lines.push(splitRow(leftW, rightW, leftLine, rightLine, border));
       }
 
-      lines.push(splitRow(leftW, rightW, "", ""));
+      lines.push(splitRow(leftW, rightW, "", "", border));
       lines.push(fitFrameRow("╰", "╯", "", "", width, border));
 
       return lines;
     },
-    invalidate() {},
   };
 }

package/extensions/headers/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export { createBoxHeader } from "./box";

package/extensions/headers/types.ts

@@ -0,0 +1,9 @@
+/** Live env snapshot the header renders in the right column */
+export interface HeaderEnv {
+  cwd: string;
+  gitDirty: number;
+  gitBranch: string | undefined;
+
+  /** Combined display name, e.g. `"Model (Provider)"` (provider embedded) */
+  modelName: string | undefined;
+}

package/extensions/index.ts

@@ -31,27 +31,27 @@ import type { Settings, SpinnerPhase } from "./config/types";
 import type { AgentMode, AgentState, ExternalData } from "./components/types";
 import { getEditorFrame, getHeader } from "./renderers/registry";
 import type { EditorFrameRenderer } from "./renderers/types";
-import {
-  capitalize,
-  readAgentModeFromSession,
-  readGit,
-  type GitInfo,
-} from "./utils";
-import { type HeaderEnv } from "./components/header";
+import { capitalize, getData, type GitInfo } from "./utils";
+import { type HeaderEnv } from "./headers";
 import { getUsage } from "./utils/token";
 
-let editor: EditorFrameRenderer | null = null;
-let currentCtx: ExtensionContext | null = null;
 let settings: Settings = DEFAULT_SETTINGS;
+
+let editor: EditorFrameRenderer | null = null;
 let spinnerPhase: SpinnerPhase | null = null;
-let agentMode: AgentMode = null;
+
+let currentCtx: ExtensionContext | null = null;
+
 let notifyEnabled = false;
+let agentMode: AgentMode = null;
+
 let git: GitInfo = {
   branch: undefined,
   dirty: 0,
 };
-let workingMessageTimer: ReturnType<typeof setInterval> | null = null;
+
 let workingMessageBag: string[] = [];
+let workingMessageTimer: ReturnType<typeof setInterval> | null = null;
 
 /** Pop a random message; reshuffles when the pool is exhausted (no back-to-back repeats). */
 function nextWorkingMessage(): string {
@@ -91,15 +91,15 @@ function provideExternal(pi: ExtensionAPI): ExternalData {
   return {
     agentMode,
     spinnerPhase,
+    notifyEnabled,
     cwd: ctx?.cwd ?? "",
     gitDirty: git.dirty,
-    gitBranch: git.branch,
     theme: ctx?.ui.theme,
+    gitBranch: git.branch,
     context: getUsage(ctx ?? undefined),
     thinkingLevel: pi.getThinkingLevel(),
     modelName: model?.name ?? model?.id ?? "Unknown",
     modelProvider: capitalize(model?.provider ?? "unknown"),
-    notifyEnabled,
   };
 }
 
@@ -116,12 +116,21 @@ function paletteKeys(): string[] {
       readFileSync(join(getAgentDir(), "keybindings.json"), "utf8"),
     ) as Record<string, unknown>;
     const v = raw[PALETTE_SHORTCUT_ID];
+
     if (typeof v === "string") return [v];
     if (Array.isArray(v) && v.every((k) => typeof k === "string")) return v;
   } catch {}
+
   return [PALETTE_DEFAULT_KEY];
 }
 
+function refreshData(ctx: ExtensionContext) {
+  const data = getData(ctx);
+
+  git = data.git;
+  agentMode = data.agentMode;
+}
+
 // ── extension entry ──────────────────────────────────────────────────────
 
 export default async function (pi: ExtensionAPI) {
@@ -155,14 +164,17 @@ export default async function (pi: ExtensionAPI) {
   pi.events.on(PI_NOTIFY_TOGGLE_EVENT, (event) => {
     const enabled = (event as { enabled?: unknown } | undefined)?.enabled;
     if (typeof enabled === "boolean") notifyEnabled = enabled;
+
     editor?.refresh();
   });
 
+  pi.on("turn_end", async (_, ctx) => {
+    refreshData(ctx);
+  });
+
   pi.on("session_start", async (_event, ctx) => {
+    refreshData(ctx);
     currentCtx = ctx;
-    agentMode = readAgentModeFromSession(ctx) || agentMode;
-
-    git = readGit(ctx.cwd);
 
     ctx.ui.setWorkingIndicator({
       intervalMs: 80,
@@ -183,7 +195,7 @@ export default async function (pi: ExtensionAPI) {
 
     if (settings.header?.enable) {
       const headerFactory =
-        getHeader(settings.header.type ?? "basic") ?? getHeader("basic")!;
+        getHeader(settings.header.type ?? "box") ?? getHeader("box")!;
       ctx.ui.setHeader((_tui, theme) =>
         headerFactory(_tui, theme, pi, settings, getHeaderEnv),
       );

package/extensions/renderers/registry.ts

@@ -4,10 +4,9 @@
  * getEditorFrame/getHeader
  */
 import type { EditorFrameFactory, HeaderRendererFactory } from "./types";
-import { createHeader } from "../components/header";
-import { BlockyEditor } from "../editor/blocky-editor";
-import { MinimalistEditor } from "../editor/minimalist-editor";
-import { CustomEditor } from "@earendil-works/pi-coding-agent";
+
+import { BlockyEditor, LinearEditor, MinimalistEditor } from "../editor";
+import { createBoxHeader } from "../headers";
 
 const editorFrames = new Map<string, EditorFrameFactory>();
 const headers = new Map<string, HeaderRendererFactory>();
@@ -47,4 +46,10 @@ registerEditorFrame(
     new MinimalistEditor(pi, provider, opts, ...args),
 );
 
-registerHeader("basic", createHeader);
+registerEditorFrame(
+  "linear",
+  (pi, provider, opts, ...args) =>
+    new LinearEditor(pi, provider, opts, ...args),
+);
+
+registerHeader("box", createBoxHeader);

package/extensions/renderers/types.ts

@@ -7,7 +7,8 @@ import type {
 } 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";
+
+import type { HeaderEnv } from "../headers";
 
 /** What pi's TUI needs from any header implementation */
 export interface HeaderRenderer {

package/extensions/utils/data.ts

@@ -0,0 +1,11 @@
+import { ExtensionContext } from "@earendil-works/pi-coding-agent";
+
+import { readGit } from "./git";
+import { readAgentModeFromSession } from "./agent";
+
+export function getData(ctx: ExtensionContext) {
+  return {
+    git: readGit(ctx.cwd),
+    agentMode: readAgentModeFromSession(ctx),
+  };
+}

package/extensions/utils/index.ts

@@ -5,9 +5,11 @@ import { THEME_COLORS } from "../config/constants";
  * Shared helpers, grouped by domain and re-exported from a single barrel.
  * Import everything with `import { ... } from "../utils"`.
  */
-export * from "./agent";
 export * from "./git";
+export * from "./tui";
+export * from "./data";
 export * from "./path";
+export * from "./agent";
 export { capitalize } from "@leo-alvarenga/pi-ext-core";
 
 export function isThemeColor(value: string): value is ThemeColor {

package/extensions/utils/tui.ts

@@ -0,0 +1,36 @@
+import { visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+
+export function wrapLines(
+  lines: string[],
+  maxLen: number,
+  style?: (line: string) => string,
+): string[] {
+  const wrapped = lines.map((l) => wrapTextWithAnsi(l, maxLen)).flat();
+  if (style) return wrapped.map((l) => (l.length ? style(l) : l));
+
+  return wrapped;
+}
+
+/** Space-pad `text` so it sits horizontally centered within `inner` cols. */
+export function center(text: string, inner: number): string {
+  const w = visibleWidth(text);
+  const left = Math.max(0, Math.floor((inner - w) / 2));
+  const right = Math.max(0, inner - w - left);
+
+  return " ".repeat(left) + text + " ".repeat(right);
+}
+
+/** Claude-style split row: │ logo (leftW) │ info (rightW) │ exactly `width` cols */
+export function splitRow(
+  leftW: number,
+  rightW: number,
+  left: string,
+  right: string,
+  border: (s: string) => string,
+): string {
+  const left2 = center(left, leftW);
+  const right2 = "  " + right;
+  const pad = " ".repeat(Math.max(0, rightW - visibleWidth(right2)));
+
+  return border("│") + left2 + border("│") + right2 + pad + border("│");
+}

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.20.0",
+  "version": "0.21.2",
   "license": "MIT",
   "repository": "github.com/leo-alvarenga/pi-mono",
   "publishConfig": {