@leo-alvarenga/pi-zen-frame 0.12.1 → 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/header.ts

@@ -143,7 +143,7 @@ export function createHeader(
 
       const rightW = inner - leftW - 1;
 
-      const rightLines = infoRows(env, rightW);
+      const rightLines = infoRows(env, rightW - 2);
       const leftLines = [
         ...logo.lines.map((l) => theme.fg(logo.color, l)),
 
@@ -152,7 +152,7 @@ export function createHeader(
 
         ...wrapLines(
           [settings.header?.heading ?? DEFAULT_SETTINGS.header?.heading ?? ""],
-          leftW,
+          leftW - 2,
         ).map((line) => theme.bold(theme.fg("muted", line))),
 
         "",
@@ -163,7 +163,7 @@ export function createHeader(
               DEFAULT_SETTINGS.header?.subheading ??
               "",
           ],
-          leftW,
+          leftW - 2,
         ).map((line) => theme.italic(theme.fg("muted", line))),
       ];
 

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/contracts.ts

@@ -0,0 +1,12 @@
+/** External contract IDs: the zen-mode keybinding and the optional
+ *  pi-agent-manager integration (no hard dependency).
+ */
+/** pi-agent-manager integration (optional — no hard dependency). */
+export const PI_AGENT_MANAGER_AGENT_EVENT = "pi-agent-manager:agent-changed";
+export const PI_AGENT_MANAGER_AGENT_DATA_KEY = "pi-agent-manager-agent";
+
+/** Keybinding id users bind in keybindings.json to toggle zen mode. */
+export const ZEN_MODE_SHORTCUT_ID = "piZenFrame.zenMode";
+/** Default key when the user hasn't bound one (override or disable via
+ *  keybindings.json; `[]` disables the shortcut, `/zen_mode` still works). */
+export const ZEN_MODE_DEFAULT_KEY = "ctrl+shift+z";

package/extensions/config/constants/defaults.ts

@@ -0,0 +1,46 @@
+import type { Settings } from "../types";
+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",
+
+    heading: "Welcome back!",
+    subheading:
+      "Ready for your next session? Terminal warm, context clean, tools ready to execute",
+
+    logo: ["█████████  ", "███   ███  ", "██████     ", "███     ███"],
+  },
+
+  workingMessage: {
+    enable: true,
+    intervalMs: 3000,
+    messages: WORKING_MESSAGES,
+  },
+
+  frame: {
+    icons: {},
+    marginX: 1,
+    paddingX: 2,
+    prefix: "┃",
+    enable: true,
+    minWidth: 20,
+    marginTop: 0,
+    showCwd: true,
+    paddingTop: 1,
+    marginBottom: 0,
+    showModel: true,
+    paddingBottom: 1,
+    showSpinner: false,
+    showContext: true,
+    showThinking: true,
+    showAgentMode: true,
+    prefixColor: "agentMode",
+  },
+};

package/extensions/config/constants/file.ts

@@ -0,0 +1,2 @@
+/** Config file name (in the pi agent dir) holding user settings. */
+export const CONFIG_FILE_NAME = "pi-zen-frame.json";

package/extensions/config/constants/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Constants, grouped by concern and re-exported from a single barrel.
+ * Import everything with `import { ... } from "../config/constants"` —
+ * resolution keeps working now that this is a directory.
+ */
+export * from "./file";
+export * from "./contracts";
+export * from "./visuals";
+export * from "./messages";
+export * from "./defaults";