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

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: "zen",
     enable: false,
-    type: "basic",
   },
 
   workingMessage: {

package/extensions/config/constants/messages.ts

@@ -174,3 +174,16 @@ export const HEADER_TIPS: BannerTip[] = [
     text: "For multi-file changes, ask for a plan first (files touched + order) and approve it before any edits — cheap insurance against wrong-direction refactors",
   },
 ];
+
+export const GREETINGS: string[] = [
+  "Welcome back!",
+  "Ready when you are",
+  "New moment, new beginning",
+  "The present is yours",
+  "Stillness before the work",
+  "Breathe. Then begin",
+  "Here and now",
+  "Empty mind, open hands",
+  "The path continues",
+  "Begin with intention",
+];

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 "zen" */
   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,34 @@
 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,
+  GREETINGS,
+  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 HEADING = GREETINGS[Math.floor(Math.random() * GREETINGS.length)]!;
 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 +48,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 +62,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 +97,8 @@ export function createHeader(
   }
 
   return {
+    invalidate() {},
+
     render(width: number): string[] {
       const env = getEnv(pi);
 
@@ -163,12 +125,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 +142,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 +151,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,3 @@
+export * from "./types";
+export { createBoxHeader } from "./box";
+export { createZenHeader } from "./zen";

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/headers/zen/index.ts

@@ -0,0 +1,51 @@
+import type { TUI } from "@earendil-works/pi-tui";
+import type { ExtensionAPI, Theme } from "@earendil-works/pi-coding-agent";
+
+import { GREETINGS, LOGO_COLOR, LOGO_LINES } from "../../config/constants";
+import type { Settings } from "../../config/types";
+import type { HeaderEnv } from "../types";
+import { center, wrapLines } from "../../utils";
+import { QUOTES } from "./quotes";
+
+const TOP_PAD = 2;
+
+const GREETING = GREETINGS[Math.floor(Math.random() * GREETINGS.length)]!;
+const QUOTE = QUOTES[Math.floor(Math.random() * QUOTES.length)]!;
+
+export function createZenHeader(
+  _tui: TUI,
+  theme: Theme,
+  _pi: ExtensionAPI,
+  settings: Settings,
+  _getEnv: (pi: ExtensionAPI) => HeaderEnv,
+) {
+  if (!settings.header?.enable) {
+    return { render: (): string[] => [], invalidate() {} };
+  }
+
+  return {
+    invalidate() {},
+
+    render(width: number): string[] {
+      const lines: string[] = [];
+
+      for (let i = 0; i < TOP_PAD; i++) lines.push("");
+
+      for (const line of LOGO_LINES) {
+        lines.push(center(theme.fg(LOGO_COLOR, line), width));
+      }
+
+      lines.push("");
+      lines.push(center(theme.bold(GREETING), width));
+      lines.push("");
+
+      const quoteText = `"${QUOTE.text}"  — ${QUOTE.author}`;
+      for (const l of wrapLines([quoteText], Math.min(width - 4, 80))) {
+        lines.push(center(theme.italic(theme.fg("muted", l)), width));
+      }
+
+      lines.push("");
+      return lines;
+    },
+  };
+}

package/extensions/headers/zen/quotes.ts

@@ -0,0 +1,187 @@
+export const QUOTES = [
+  {
+    text: "Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.",
+    author: "Buddha",
+  },
+  {
+    text: "The present moment is the only moment available to us, and it is the door to all moments.",
+    author: "Thich Nhat Hanh",
+  },
+  {
+    text: "You have power over your mind, not outside events. Realize this, and you will find strength.",
+    author: "Marcus Aurelius",
+  },
+  {
+    text: "Knowing others is wisdom. Knowing yourself is enlightenment.",
+    author: "Lao Tzu",
+  },
+  {
+    text: "Out beyond ideas of wrongdoing and rightdoing, there is a field. I'll meet you there.",
+    author: "Rumi",
+  },
+  {
+    text: "Life is what happens to you while you're busy making other plans.",
+    author: "John Lennon",
+  },
+  { text: "The obstacle is the path.", author: "Zen proverb" },
+  {
+    text: "He who is not every day conquering some fear has not learned the secret of life.",
+    author: "Ralph Waldo Emerson",
+  },
+  {
+    text: "Make the present moment your friend rather than your enemy.",
+    author: "Eckhart Tolle",
+  },
+  {
+    text: "Waste no more time arguing about what a good person should be. Be one.",
+    author: "Marcus Aurelius",
+  },
+  {
+    text: "The quieter you become, the more you can hear.",
+    author: "Ram Dass",
+  },
+  {
+    text: "Nature does not hurry, yet everything is accomplished.",
+    author: "Lao Tzu",
+  },
+  {
+    text: "Man suffers only because he takes seriously what the gods made for fun.",
+    author: "Alan Watts",
+  },
+  {
+    text: "If you realize that all things change, there is nothing you will try to hold on to.",
+    author: "Lao Tzu",
+  },
+  {
+    text: "Before enlightenment, chop wood, carry water. After enlightenment, chop wood, carry water.",
+    author: "Zen proverb",
+  },
+  {
+    text: "It is not death that a person should fear, but rather they should fear never beginning to live.",
+    author: "Marcus Aurelius",
+  },
+  {
+    text: "The soul that sees beauty may sometimes walk alone.",
+    author: "Johann Wolfgang von Goethe",
+  },
+  {
+    text: "Wherever you are is always the right place. There is never a need to fix anything, to hush the noise or turn off the light.",
+    author: "John Kabat-Zinn",
+  },
+  {
+    text: "When you realize there is nothing lacking, the whole world belongs to you.",
+    author: "Lao Tzu",
+  },
+  {
+    text: "The first step in the journey of a thousand miles is taken beneath your feet.",
+    author: "Lao Tzu",
+  },
+  {
+    text: "Do not be too timid and squeamish about your actions. All life is an experiment.",
+    author: "Ralph Waldo Emerson",
+  },
+  {
+    text: "Peace comes from within. Do not seek it without.",
+    author: "Buddha",
+  },
+  {
+    text: "Not knowing how near the truth is, people seek it far away.",
+    author: "Hakuin Ekaku",
+  },
+  {
+    text: "The Tao that can be told is not the eternal Tao.",
+    author: "Lao Tzu",
+  },
+  {
+    text: "You must be the change you wish to see in the world.",
+    author: "Mahatma Gandhi",
+  },
+  { text: "What you seek is seeking you.", author: "Rumi" },
+  { text: "Sell your cleverness and buy bewilderment.", author: "Rumi" },
+  {
+    text: "To understand everything is to forgive everything.",
+    author: "Osho",
+  },
+  {
+    text: "Begin at once to live, and count each separate day as a separate life.",
+    author: "Seneca",
+  },
+  {
+    text: "Happiness is not something ready made. It comes from your own actions.",
+    author: "Dalai Lama",
+  },
+  {
+    text: "We are what we repeatedly do. Excellence, then, is not an act but a habit.",
+    author: "Aristotle",
+  },
+  {
+    text: "The mind is everything. What you think you become.",
+    author: "Buddha",
+  },
+  {
+    text: "In the beginner's mind there are many possibilities, but in the expert's mind there are few.",
+    author: "Shunryu Suzuki",
+  },
+  {
+    text: "No snowflake ever falls in the wrong place.",
+    author: "Zen proverb",
+  },
+  {
+    text: "Look within. Within is the fountain of good, and it will ever bubble up, if thou wilt ever dig.",
+    author: "Marcus Aurelius",
+  },
+  {
+    text: "There is no way to happiness. Happiness is the way.",
+    author: "Thich Nhat Hanh",
+  },
+  {
+    text: "The two most powerful warriors are patience and time.",
+    author: "Leo Tolstoy",
+  },
+  {
+    text: "A man who dares to waste one hour of life has not discovered the value of life.",
+    author: "Charles Darwin",
+  },
+  {
+    text: "The only way to do great work is to love what you do.",
+    author: "Steve Jobs",
+  },
+  { text: "Everything you can imagine is real.", author: "Pablo Picasso" },
+  {
+    text: "I have just three things to teach: simplicity, patience, compassion.",
+    author: "Lao Tzu",
+  },
+  { text: "Act without expectation.", author: "Lao Tzu" },
+  {
+    text: "Man stands in his own shadow and wonders why it is dark.",
+    author: "Zen proverb",
+  },
+  {
+    text: "To the mind that is still, the whole universe surrenders.",
+    author: "Lao Tzu",
+  },
+  {
+    text: "Better than a thousand hollow words is one word that brings peace.",
+    author: "Buddha",
+  },
+  {
+    text: "Yesterday I was clever, so I wanted to change the world. Today I am wise, so I am changing myself.",
+    author: "Rumi",
+  },
+  {
+    text: "It is the mark of an educated mind to be able to entertain a thought without accepting it.",
+    author: "Aristotle",
+  },
+  {
+    text: "Accept what is, let go of what was, have faith in what will be.",
+    author: "Sonia Ricotti",
+  },
+  {
+    text: "The greatest weapon against stress is our ability to choose one thought over another.",
+    author: "William James",
+  },
+  {
+    text: "The moment you stop accepting challenges is the moment you stop moving forward.",
+    author: "Epictetus",
+  },
+];

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 ?? "zen") ?? getHeader("zen")!;
       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, createZenHeader } from "../headers";
 
 const editorFrames = new Map<string, EditorFrameFactory>();
 const headers = new Map<string, HeaderRendererFactory>();
@@ -47,4 +46,11 @@ 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);
+registerHeader("zen", createZenHeader);

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