pi-powerline-footer 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [0.2.8] - 2026-01-16
+
+### Changed
+- `quietStartup: true` → shows welcome as header (dismisses on first input)
+- `quietStartup: false` or not set → shows welcome as centered overlay (dismisses on key/timeout)
+- Both modes use same two-column layout: logo, model info, tips, loaded counts, recent sessions
+- Refactored welcome.ts to share rendering logic between header and overlay
+
+### Fixed
+- `/powerline` toggle off now clears all custom UI (editor, footer, header)
+
 ## [0.2.6] - 2026-01-16
 
 ### Fixed

package/index.ts

@@ -1,7 +1,8 @@
 import type { ExtensionAPI, ReadonlyFooterDataProvider } from "@mariozechner/pi-coding-agent";
 import type { AssistantMessage } from "@mariozechner/pi-ai";
 import { visibleWidth } from "@mariozechner/pi-tui";
-import { readFileSync } from "node:fs";
+import { readFileSync, existsSync } from "node:fs";
+import { join } from "node:path";
 
 import type { SegmentContext, StatusLinePreset } from "./types.js";
 import { getPreset, PRESETS } from "./presets.js";
@@ -9,7 +10,7 @@ import { getSeparator } from "./separators.js";
 import { renderSegment } from "./segments.js";
 import { getGitStatus, invalidateGitStatus, invalidateGitBranch } from "./git-status.js";
 import { ansi, getFgAnsiCode } from "./colors.js";
-import { WelcomeComponent, discoverLoadedCounts, getRecentSessions } from "./welcome.js";
+import { WelcomeComponent, WelcomeHeader, discoverLoadedCounts, getRecentSessions } from "./welcome.js";
 
 // ═══════════════════════════════════════════════════════════════════════════
 // Configuration
@@ -23,6 +24,21 @@ let config: PowerlineConfig = {
   preset: "default",
 };
 
+// Check if quietStartup is enabled in settings
+function isQuietStartup(): boolean {
+  const homeDir = process.env.HOME || process.env.USERPROFILE || "";
+  const settingsPath = join(homeDir, ".pi", "agent", "settings.json");
+  
+  try {
+    if (existsSync(settingsPath)) {
+      const settings = JSON.parse(readFileSync(settingsPath, "utf-8"));
+      return settings.quietStartup === true;
+    }
+  } catch {}
+  
+  return false;
+}
+
 // ═══════════════════════════════════════════════════════════════════════════
 // Status Line Builder (for top border)
 // ═══════════════════════════════════════════════════════════════════════════
@@ -71,6 +87,8 @@ export default function powerlineFooter(pi: ExtensionAPI) {
   let getThinkingLevelFn: (() => string) | null = null;
   let isStreaming = false;
   let tuiRef: any = null; // Store TUI reference for forcing re-renders
+  let dismissWelcomeOverlay: (() => void) | null = null; // Callback to dismiss welcome overlay
+  let welcomeHeaderActive = false; // Track if welcome header should be cleared on first input
 
   // Track session start
   pi.on("session_start", async (_event, ctx) => {
@@ -84,7 +102,12 @@ export default function powerlineFooter(pi: ExtensionAPI) {
     
     if (enabled && ctx.hasUI) {
       setupCustomEditor(ctx);
-      setupWelcomeOverlay(ctx);
+      // quietStartup: true → compact header, otherwise → full overlay
+      if (isQuietStartup()) {
+        setupWelcomeHeader(ctx);
+      } else {
+        setupWelcomeOverlay(ctx);
+      }
     }
   });
 
@@ -139,6 +162,18 @@ export default function powerlineFooter(pi: ExtensionAPI) {
     isStreaming = false;
   });
 
+  // Dismiss welcome overlay/header on first user message
+  pi.on("user_message", async (_event, ctx) => {
+    if (dismissWelcomeOverlay) {
+      dismissWelcomeOverlay();
+      dismissWelcomeOverlay = null;
+    }
+    if (welcomeHeaderActive) {
+      welcomeHeaderActive = false;
+      ctx.ui.setHeader(undefined);
+    }
+  });
+
   // Command to toggle/configure
   pi.registerCommand("powerline", {
     description: "Configure powerline status (toggle, preset)",
@@ -153,9 +188,10 @@ export default function powerlineFooter(pi: ExtensionAPI) {
           setupCustomEditor(ctx);
           ctx.ui.notify("Powerline enabled", "info");
         } else {
-          // setFooter(undefined) internally calls the old footer's dispose()
+          // Clear all custom UI components
           ctx.ui.setEditorComponent(undefined);
           ctx.ui.setFooter(undefined);
+          ctx.ui.setHeader(undefined);
           footerDataRef = null;
           tuiRef = null;
           ctx.ui.notify("Defaults restored", "info");
@@ -249,6 +285,22 @@ export default function powerlineFooter(pi: ExtensionAPI) {
         // Create custom editor that overrides render for status in top border
         const editor = new CustomEditor(tui, theme, keybindings);
         
+        // Override handleInput to dismiss welcome on first keypress
+        const originalHandleInput = editor.handleInput.bind(editor);
+        editor.handleInput = (data: string) => {
+          // Dismiss welcome overlay/header on first keypress
+          if (dismissWelcomeOverlay) {
+            const dismiss = dismissWelcomeOverlay;
+            dismissWelcomeOverlay = null;
+            setTimeout(dismiss, 0);
+          }
+          if (welcomeHeaderActive) {
+            welcomeHeaderActive = false;
+            ctx.ui.setHeader(undefined);
+          }
+          originalHandleInput(data);
+        };
+        
         // Store original render
         const originalRender = editor.render.bind(editor);
         
@@ -299,10 +351,9 @@ export default function powerlineFooter(pi: ExtensionAPI) {
           } else {
             // Status too wide - truncate by removing segments from the end
             // Build progressively shorter content until it fits
-            const allSegments = [...presetDef.leftSegments, ...presetDef.rightSegments];
             let truncatedContent = "";
             
-            for (let numSegments = allSegments.length - 1; numSegments >= 1; numSegments--) {
+            for (let numSegments = presetDef.leftSegments.length - 1; numSegments >= 1; numSegments--) {
               const limitedPreset = {
                 ...presetDef,
                 leftSegments: presetDef.leftSegments.slice(0, numSegments),
@@ -368,8 +419,7 @@ export default function powerlineFooter(pi: ExtensionAPI) {
         return {
           dispose: unsub,
           invalidate() {
-            // Re-render when thinking level or other settings change
-            tui.requestRender();
+            // No cache to clear - render is always fresh
           },
           render(width: number): string[] {
             // Only show status in footer during streaming (editor hidden)
@@ -388,10 +438,9 @@ export default function powerlineFooter(pi: ExtensionAPI) {
               return [statusContent + " ".repeat(width - statusWidth)];
             } else {
               // Truncate by removing segments (same logic as editor)
-              const allSegments = [...presetDef.leftSegments, ...presetDef.rightSegments];
               let truncatedContent = "";
               
-              for (let numSegments = allSegments.length - 1; numSegments >= 1; numSegments--) {
+              for (let numSegments = presetDef.leftSegments.length - 1; numSegments >= 1; numSegments--) {
                 const limitedPreset = {
                   ...presetDef,
                   leftSegments: presetDef.leftSegments.slice(0, numSegments),
@@ -413,30 +462,38 @@ export default function powerlineFooter(pi: ExtensionAPI) {
     });
   }
 
-  function setupWelcomeOverlay(ctx: any) {
-    // Get version from package.json  
-    let version = "0.0.0";
-    try {
-      const pkgPath = new URL("./package.json", import.meta.url).pathname;
-      const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
-      version = pkg.version || version;
-    } catch {}
-    
-    // Get model info
+  function setupWelcomeHeader(ctx: any) {
     const modelName = ctx.model?.name || ctx.model?.id || "No model";
     const providerName = ctx.model?.provider || "Unknown";
+    const loadedCounts = discoverLoadedCounts();
+    const recentSessions = getRecentSessions(3);
+    
+    const header = new WelcomeHeader(modelName, providerName, recentSessions, loadedCounts);
+    welcomeHeaderActive = true; // Will be cleared on first user input
     
-    // Discover loaded counts and recent sessions
+    ctx.ui.setHeader((_tui: any, _theme: any) => {
+      return {
+        render(width: number): string[] {
+          return header.render(width);
+        },
+        invalidate() {
+          header.invalidate();
+        },
+      };
+    });
+  }
+
+  function setupWelcomeOverlay(ctx: any) {
+    const modelName = ctx.model?.name || ctx.model?.id || "No model";
+    const providerName = ctx.model?.provider || "Unknown";
     const loadedCounts = discoverLoadedCounts();
     const recentSessions = getRecentSessions(3);
     
-    // Small delay to let pi-mono finish initialization before showing overlay
+    // Small delay to let pi-mono finish initialization
     setTimeout(() => {
-      // Show welcome as an overlay that dismisses on any key or after timeout
       ctx.ui.custom(
         (tui: any, _theme: any, _keybindings: any, done: (result: void) => void) => {
           const welcome = new WelcomeComponent(
-            version,
             modelName,
             providerName,
             recentSessions,
@@ -450,30 +507,26 @@ export default function powerlineFooter(pi: ExtensionAPI) {
             if (dismissed) return;
             dismissed = true;
             clearInterval(interval);
+            dismissWelcomeOverlay = null;
             done();
           };
           
-          // Update countdown every second
+          // Store dismiss callback so user_message/keypress can trigger it
+          dismissWelcomeOverlay = dismiss;
+          
           const interval = setInterval(() => {
             if (dismissed) return;
             countdown--;
             welcome.setCountdown(countdown);
             tui.requestRender();
-            
-            if (countdown <= 0) {
-              dismiss();
-            }
+            if (countdown <= 0) dismiss();
           }, 1000);
           
-          // Create a focusable wrapper component
-          // Must have 'focused' property for TUI to recognize it as focusable
           return {
-            focused: false, // TUI sets this to true when focused
+            focused: false,
             invalidate: () => welcome.invalidate(),
             render: (width: number) => welcome.render(width),
-            handleInput: (_data: string) => {
-              dismiss();
-            },
+            handleInput: (_data: string) => dismiss(),
             dispose: () => {
               dismissed = true;
               clearInterval(interval);
@@ -487,9 +540,7 @@ export default function powerlineFooter(pi: ExtensionAPI) {
             horizontalAlign: "center",
           }),
         },
-      ).catch(() => {
-        // Dismissed, ignore
-      });
-    }, 100); // Small delay to let init complete
+      ).catch(() => {});
+    }, 100);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-powerline-footer",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Powerline-style status bar extension for pi coding agent",
   "type": "module",
   "bin": {

package/welcome.ts

@@ -16,31 +16,232 @@ export interface LoadedCounts {
   promptTemplates: number;
 }
 
+// ═══════════════════════════════════════════════════════════════════════════
+// Shared rendering utilities
+// ═══════════════════════════════════════════════════════════════════════════
+
+const PI_LOGO = [
+  "▀████████████▀",
+  " ╘███    ███  ",
+  "  ███    ███  ",
+  "  ███    ███  ",
+  " ▄███▄  ▄███▄ ",
+];
+
+const GRADIENT_COLORS = [
+  "\x1b[38;5;199m",
+  "\x1b[38;5;171m",
+  "\x1b[38;5;135m",
+  "\x1b[38;5;99m",
+  "\x1b[38;5;75m",
+  "\x1b[38;5;51m",
+];
+
+function bold(text: string): string {
+  return `\x1b[1m${text}\x1b[22m`;
+}
+
+function dim(text: string): string {
+  return getFgAnsiCode("sep") + text + ansi.reset;
+}
+
+function checkmark(): string {
+  return fgOnly("gitClean", "✓");
+}
+
+function gradientLine(line: string): string {
+  const reset = ansi.reset;
+  let result = "";
+  let colorIdx = 0;
+  const step = Math.max(1, Math.floor(line.length / GRADIENT_COLORS.length));
+
+  for (let i = 0; i < line.length; i++) {
+    if (i > 0 && i % step === 0 && colorIdx < GRADIENT_COLORS.length - 1) colorIdx++;
+    const char = line[i];
+    if (char !== " ") {
+      result += GRADIENT_COLORS[colorIdx] + char + reset;
+    } else {
+      result += char;
+    }
+  }
+  return result;
+}
+
+function centerText(text: string, width: number): string {
+  const visLen = visibleWidth(text);
+  if (visLen > width) return truncateToWidth(text, width);
+  if (visLen === width) return text;
+  const leftPad = Math.floor((width - visLen) / 2);
+  const rightPad = width - visLen - leftPad;
+  return " ".repeat(leftPad) + text + " ".repeat(rightPad);
+}
+
+function fitToWidth(str: string, width: number): string {
+  const visLen = visibleWidth(str);
+  if (visLen > width) return truncateToWidth(str, width);
+  return str + " ".repeat(width - visLen);
+}
+
+function truncateToWidth(str: string, width: number): string {
+  const ellipsis = "…";
+  const maxWidth = Math.max(0, width - 1);
+  let truncated = "";
+  let currentWidth = 0;
+  let inEscape = false;
+  
+  for (const char of str) {
+    if (char === "\x1b") inEscape = true;
+    if (inEscape) {
+      truncated += char;
+      if (char === "m") inEscape = false;
+    } else if (currentWidth < maxWidth) {
+      truncated += char;
+      currentWidth++;
+    }
+  }
+  
+  if (visibleWidth(str) > width) return truncated + ellipsis;
+  return truncated;
+}
+
+interface WelcomeData {
+  modelName: string;
+  providerName: string;
+  recentSessions: RecentSession[];
+  loadedCounts: LoadedCounts;
+}
+
+function buildLeftColumn(data: WelcomeData, colWidth: number): string[] {
+  const logoColored = PI_LOGO.map((line) => gradientLine(line));
+  
+  return [
+    "",
+    centerText(bold("Welcome back!"), colWidth),
+    "",
+    ...logoColored.map((l) => centerText(l, colWidth)),
+    "",
+    centerText(fgOnly("model", data.modelName), colWidth),
+    centerText(dim(data.providerName), colWidth),
+  ];
+}
+
+function buildRightColumn(data: WelcomeData, colWidth: number): string[] {
+  const hChar = "─";
+  const separator = ` ${dim(hChar.repeat(colWidth - 2))}`;
+  
+  // Session lines
+  const sessionLines: string[] = [];
+  if (data.recentSessions.length === 0) {
+    sessionLines.push(` ${dim("No recent sessions")}`);
+  } else {
+    for (const session of data.recentSessions.slice(0, 3)) {
+      sessionLines.push(
+        ` ${dim("• ")}${fgOnly("path", session.name)}${dim(` (${session.timeAgo})`)}`,
+      );
+    }
+  }
+  
+  // Loaded counts lines
+  const countLines: string[] = [];
+  const { contextFiles, extensions, skills, promptTemplates } = data.loadedCounts;
+  
+  if (contextFiles > 0 || extensions > 0 || skills > 0 || promptTemplates > 0) {
+    if (contextFiles > 0) {
+      countLines.push(` ${checkmark()} ${fgOnly("gitClean", `${contextFiles}`)} context file${contextFiles !== 1 ? "s" : ""}`);
+    }
+    if (extensions > 0) {
+      countLines.push(` ${checkmark()} ${fgOnly("gitClean", `${extensions}`)} extension${extensions !== 1 ? "s" : ""}`);
+    }
+    if (skills > 0) {
+      countLines.push(` ${checkmark()} ${fgOnly("gitClean", `${skills}`)} skill${skills !== 1 ? "s" : ""}`);
+    }
+    if (promptTemplates > 0) {
+      countLines.push(` ${checkmark()} ${fgOnly("gitClean", `${promptTemplates}`)} prompt template${promptTemplates !== 1 ? "s" : ""}`);
+    }
+  } else {
+    countLines.push(` ${dim("No extensions loaded")}`);
+  }
+  
+  return [
+    ` ${bold(fgOnly("accent", "Tips"))}`,
+    ` ${dim("/")} for commands`,
+    ` ${dim("!")} to run bash`,
+    ` ${dim("Shift+Tab")} cycle thinking`,
+    separator,
+    ` ${bold(fgOnly("accent", "Loaded"))}`,
+    ...countLines,
+    separator,
+    ` ${bold(fgOnly("accent", "Recent sessions"))}`,
+    ...sessionLines,
+    "",
+  ];
+}
+
+function renderWelcomeBox(
+  data: WelcomeData, 
+  termWidth: number, 
+  bottomLine: string,
+): string[] {
+  const minWidth = 76;
+  const maxWidth = 96;
+  const boxWidth = Math.max(minWidth, Math.min(termWidth - 2, maxWidth));
+  const leftCol = 26;
+  const rightCol = boxWidth - leftCol - 3;
+  
+  const hChar = "─";
+  const v = dim("│");
+  const tl = dim("╭");
+  const tr = dim("╮");
+  const bl = dim("╰");
+  const br = dim("╯");
+  
+  const leftLines = buildLeftColumn(data, leftCol);
+  const rightLines = buildRightColumn(data, rightCol);
+  
+  const lines: string[] = [];
+  
+  // Top border with title
+  const title = " pi agent ";
+  const titlePrefix = dim(hChar.repeat(3));
+  const titleStyled = titlePrefix + fgOnly("model", title);
+  const titleVisLen = 3 + visibleWidth(title);
+  const afterTitle = boxWidth - 2 - titleVisLen;
+  const afterTitleText = afterTitle > 0 ? dim(hChar.repeat(afterTitle)) : "";
+  lines.push(tl + titleStyled + afterTitleText + tr);
+  
+  // Content rows
+  const maxRows = Math.max(leftLines.length, rightLines.length);
+  for (let i = 0; i < maxRows; i++) {
+    const left = fitToWidth(leftLines[i] ?? "", leftCol);
+    const right = fitToWidth(rightLines[i] ?? "", rightCol);
+    lines.push(v + left + v + right + v);
+  }
+  
+  // Bottom border
+  lines.push(bl + bottomLine + br);
+  
+  return lines;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Welcome Components
+// ═══════════════════════════════════════════════════════════════════════════
+
 /**
  * Welcome overlay component for pi agent.
  * Displays a branded splash screen with logo, tips, and loaded counts.
- * Includes a countdown timer for auto-dismiss.
  */
 export class WelcomeComponent implements Component {
-  private version: string;
-  private modelName: string;
-  private providerName: string;
-  private recentSessions: RecentSession[];
-  private loadedCounts: LoadedCounts;
+  private data: WelcomeData;
   private countdown: number = 30;
 
   constructor(
-    version: string,
     modelName: string,
     providerName: string,
     recentSessions: RecentSession[] = [],
     loadedCounts: LoadedCounts = { contextFiles: 0, extensions: 0, skills: 0, promptTemplates: 0 },
   ) {
-    this.version = version;
-    this.modelName = modelName;
-    this.providerName = providerName;
-    this.recentSessions = recentSessions;
-    this.loadedCounts = loadedCounts;
+    this.data = { modelName, providerName, recentSessions, loadedCounts };
   }
 
   setCountdown(seconds: number): void {
@@ -50,227 +251,63 @@ export class WelcomeComponent implements Component {
   invalidate(): void {}
 
   render(termWidth: number): string[] {
-    // Box dimensions - responsive with min/max
     const minWidth = 76;
     const maxWidth = 96;
     const boxWidth = Math.max(minWidth, Math.min(termWidth - 2, maxWidth));
-    const leftCol = 26;
-    const rightCol = boxWidth - leftCol - 3; // 3 = │ + │ + │
-
-    // Block-based PI logo (gradient: magenta → cyan)
-    const piLogo = [
-      "▀████████████▀",
-      " ╘███    ███  ",
-      "  ███    ███  ",
-      "  ███    ███  ",
-      " ▄███▄  ▄███▄ ",
-    ];
-
-    // Apply gradient to logo
-    const logoColored = piLogo.map((line) => this.gradientLine(line));
-
-    // Left column - centered content
-    const leftLines = [
-      "",
-      this.centerText(this.bold("Welcome back!"), leftCol),
-      "",
-      ...logoColored.map((l) => this.centerText(l, leftCol)),
-      "",
-      this.centerText(fgOnly("model", this.modelName), leftCol),
-      this.centerText(this.dim(this.providerName), leftCol),
-    ];
-
-    // Right column separator
-    const separatorWidth = rightCol - 2;
-    const hChar = "─";
-    const separator = ` ${this.dim(hChar.repeat(separatorWidth))}`;
-
-    // Recent sessions content
-    const sessionLines: string[] = [];
-    if (this.recentSessions.length === 0) {
-      sessionLines.push(` ${this.dim("No recent sessions")}`);
-    } else {
-      for (const session of this.recentSessions.slice(0, 3)) {
-        sessionLines.push(
-          ` ${this.dim("• ")}${fgOnly("path", session.name)}${this.dim(` (${session.timeAgo})`)}`,
-        );
-      }
-    }
-
-    // Loaded counts content
-    const countLines: string[] = [];
-    const { contextFiles, extensions, skills, promptTemplates } = this.loadedCounts;
     
-    if (contextFiles > 0 || extensions > 0 || skills > 0 || promptTemplates > 0) {
-      if (contextFiles > 0) {
-        countLines.push(` ${this.checkmark()} ${fgOnly("gitClean", `${contextFiles}`)} context file${contextFiles !== 1 ? "s" : ""}`);
-      }
-      if (extensions > 0) {
-        countLines.push(` ${this.checkmark()} ${fgOnly("gitClean", `${extensions}`)} extension${extensions !== 1 ? "s" : ""}`);
-      }
-      if (skills > 0) {
-        countLines.push(` ${this.checkmark()} ${fgOnly("gitClean", `${skills}`)} skill${skills !== 1 ? "s" : ""}`);
-      }
-      if (promptTemplates > 0) {
-        countLines.push(` ${this.checkmark()} ${fgOnly("gitClean", `${promptTemplates}`)} prompt template${promptTemplates !== 1 ? "s" : ""}`);
-      }
-    } else {
-      countLines.push(` ${this.dim("No extensions loaded")}`);
-    }
-
-    // Right column
-    const rightLines = [
-      ` ${this.bold(fgOnly("accent", "Tips"))}`,
-      ` ${this.dim("/")} for commands`,
-      ` ${this.dim("!")} to run bash`,
-      ` ${this.dim("Shift+Tab")} cycle thinking`,
-      separator,
-      ` ${this.bold(fgOnly("accent", "Loaded"))}`,
-      ...countLines,
-      separator,
-      ` ${this.bold(fgOnly("accent", "Recent sessions"))}`,
-      ...sessionLines,
-      "",
-    ];
-
-    // Border characters (dim)
-    const v = this.dim("│");
-    const tl = this.dim("╭");
-    const tr = this.dim("╮");
-    const bl = this.dim("╰");
-    const br = this.dim("╯");
-
-    const lines: string[] = [];
-
-    // Top border with embedded title
-    const title = ` pi agent v${this.version} `;
-    const titlePrefix = this.dim(hChar.repeat(3));
-    const titleStyled = titlePrefix + fgOnly("model", title);
-    const titleVisLen = 3 + visibleWidth(title);
-    const afterTitle = boxWidth - 2 - titleVisLen;
-    const afterTitleText = afterTitle > 0 ? this.dim(hChar.repeat(afterTitle)) : "";
-    lines.push(tl + titleStyled + afterTitleText + tr);
-
-    // Content rows
-    const maxRows = Math.max(leftLines.length, rightLines.length);
-    for (let i = 0; i < maxRows; i++) {
-      const left = this.fitToWidth(leftLines[i] ?? "", leftCol);
-      const right = this.fitToWidth(rightLines[i] ?? "", rightCol);
-      lines.push(v + left + v + right + v);
-    }
-
-    // Bottom border with countdown
+    // Bottom line with countdown
     const countdownText = ` Press any key to continue (${this.countdown}s) `;
-    const countdownStyled = this.dim(countdownText);
-    const bottomContentWidth = boxWidth - 2; // -2 for corners
+    const countdownStyled = dim(countdownText);
+    const bottomContentWidth = boxWidth - 2;
     const countdownVisLen = visibleWidth(countdownText);
     const leftPad = Math.floor((bottomContentWidth - countdownVisLen) / 2);
     const rightPad = bottomContentWidth - countdownVisLen - leftPad;
-    
-    lines.push(
-      bl + 
-      this.dim(hChar.repeat(Math.max(0, leftPad))) + 
+    const hChar = "─";
+    const bottomLine = dim(hChar.repeat(Math.max(0, leftPad))) + 
       countdownStyled + 
-      this.dim(hChar.repeat(Math.max(0, rightPad))) + 
-      br
-    );
-
-    return lines;
-  }
-
-  private bold(text: string): string {
-    return `\x1b[1m${text}\x1b[22m`;
-  }
-
-  private dim(text: string): string {
-    return getFgAnsiCode("sep") + text + ansi.reset;
-  }
-
-  private checkmark(): string {
-    return fgOnly("gitClean", "✓");
+      dim(hChar.repeat(Math.max(0, rightPad)));
+    
+    return renderWelcomeBox(this.data, termWidth, bottomLine);
   }
+}
 
-  /** Center text within a given width */
-  private centerText(text: string, width: number): string {
-    const visLen = visibleWidth(text);
-    if (visLen > width) {
-      return this.truncateToWidth(text, width);
-    }
-    if (visLen === width) {
-      return text; // Exact fit, no centering needed
-    }
-    const leftPad = Math.floor((width - visLen) / 2);
-    const rightPad = width - visLen - leftPad;
-    return " ".repeat(leftPad) + text + " ".repeat(rightPad);
-  }
+/**
+ * Welcome header - same layout as overlay but persistent (no countdown).
+ * Used when quietStartup: true.
+ */
+export class WelcomeHeader implements Component {
+  private data: WelcomeData;
 
-  /** Apply magenta→cyan gradient to a string */
-  private gradientLine(line: string): string {
-    const colors = [
-      "\x1b[38;5;199m", // bright magenta
-      "\x1b[38;5;171m", // magenta-purple
-      "\x1b[38;5;135m", // purple
-      "\x1b[38;5;99m",  // purple-blue
-      "\x1b[38;5;75m",  // cyan-blue
-      "\x1b[38;5;51m",  // bright cyan
-    ];
-    const reset = ansi.reset;
-
-    let result = "";
-    let colorIdx = 0;
-    const step = Math.max(1, Math.floor(line.length / colors.length));
-
-    for (let i = 0; i < line.length; i++) {
-      if (i > 0 && i % step === 0 && colorIdx < colors.length - 1) {
-        colorIdx++;
-      }
-      const char = line[i];
-      if (char !== " ") {
-        result += colors[colorIdx] + char + reset;
-      } else {
-        result += char;
-      }
-    }
-    return result;
+  constructor(
+    modelName: string,
+    providerName: string,
+    recentSessions: RecentSession[] = [],
+    loadedCounts: LoadedCounts = { contextFiles: 0, extensions: 0, skills: 0, promptTemplates: 0 },
+  ) {
+    this.data = { modelName, providerName, recentSessions, loadedCounts };
   }
 
-  /** Fit string to exact width with ANSI-aware truncation/padding */
-  private fitToWidth(str: string, width: number): string {
-    const visLen = visibleWidth(str);
-    if (visLen > width) {
-      return this.truncateToWidth(str, width);
-    }
-    return str + " ".repeat(width - visLen);
-  }
+  invalidate(): void {}
 
-  /** Truncate string to width, preserving ANSI codes */
-  private truncateToWidth(str: string, width: number): string {
-    const ellipsis = "…";
-    const maxWidth = Math.max(0, width - 1);
-    let truncated = "";
-    let currentWidth = 0;
-    let inEscape = false;
+  render(termWidth: number): string[] {
+    const minWidth = 76;
+    const maxWidth = 96;
+    const boxWidth = Math.max(minWidth, Math.min(termWidth - 2, maxWidth));
+    const hChar = "─";
     
-    for (const char of str) {
-      if (char === "\x1b") inEscape = true;
-      if (inEscape) {
-        truncated += char;
-        if (char === "m") inEscape = false;
-      } else if (currentWidth < maxWidth) {
-        truncated += char;
-        currentWidth++;
-      }
-    }
+    // Bottom line with column separator (leftCol=26, rightCol=boxWidth-29)
+    const leftCol = 26;
+    const rightCol = boxWidth - leftCol - 3;
+    const bottomLine = dim(hChar.repeat(leftCol)) + dim("┴") + dim(hChar.repeat(rightCol));
     
-    if (visibleWidth(str) > width) {
-      return truncated + ellipsis;
-    }
-    return truncated;
+    const lines = renderWelcomeBox(this.data, termWidth, bottomLine);
+    lines.push(""); // Add empty line for spacing
+    return lines;
   }
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-// Discovery helpers
+// Discovery functions
 // ═══════════════════════════════════════════════════════════════════════════
 
 /**
@@ -285,7 +322,6 @@ export function discoverLoadedCounts(): LoadedCounts {
   let skills = 0;
   let promptTemplates = 0;
 
-  // Count AGENTS.md context files (check all locations pi-mono supports)
   const agentsMdPaths = [
     join(homeDir, ".pi", "agent", "AGENTS.md"),
     join(homeDir, ".claude", "AGENTS.md"),
@@ -295,12 +331,9 @@ export function discoverLoadedCounts(): LoadedCounts {
   ];
   
   for (const path of agentsMdPaths) {
-    if (existsSync(path)) {
-      contextFiles++;
-    }
+    if (existsSync(path)) contextFiles++;
   }
 
-  // Count extensions - both standalone .ts files and directories with index.ts
   const extensionDirs = [
     join(homeDir, ".pi", "agent", "extensions"),
     join(cwd, "extensions"),
@@ -318,7 +351,6 @@ export function discoverLoadedCounts(): LoadedCounts {
           const stats = statSync(entryPath);
           
           if (stats.isDirectory()) {
-            // Directory extension - check for index.ts or package.json
             if (existsSync(join(entryPath, "index.ts")) || existsSync(join(entryPath, "package.json"))) {
               if (!countedExtensions.has(entry)) {
                 countedExtensions.add(entry);
@@ -326,7 +358,6 @@ export function discoverLoadedCounts(): LoadedCounts {
               }
             }
           } else if (entry.endsWith(".ts") && !entry.startsWith(".")) {
-            // Standalone .ts file extension
             const name = basename(entry, ".ts");
             if (!countedExtensions.has(name)) {
               countedExtensions.add(name);
@@ -338,7 +369,6 @@ export function discoverLoadedCounts(): LoadedCounts {
     }
   }
 
-  // Count skills
   const skillDirs = [
     join(homeDir, ".pi", "agent", "skills"),
     join(cwd, ".pi", "skills"),
@@ -355,7 +385,6 @@ export function discoverLoadedCounts(): LoadedCounts {
           const entryPath = join(dir, entry);
           try {
             if (statSync(entryPath).isDirectory()) {
-              // Check for SKILL.md
               if (existsSync(join(entryPath, "SKILL.md"))) {
                 if (!countedSkills.has(entry)) {
                   countedSkills.add(entry);
@@ -369,7 +398,6 @@ export function discoverLoadedCounts(): LoadedCounts {
     }
   }
 
-  // Count prompt templates (slash commands) - recursively find .md files
   const templateDirs = [
     join(homeDir, ".pi", "agent", "commands"),
     join(homeDir, ".claude", "commands"),
@@ -388,7 +416,6 @@ export function discoverLoadedCounts(): LoadedCounts {
         try {
           const stats = statSync(entryPath);
           if (stats.isDirectory()) {
-            // Recurse into subdirectories
             countTemplatesInDir(entryPath);
           } else if (entry.endsWith(".md")) {
             const name = basename(entry, ".md");
@@ -411,12 +438,10 @@ export function discoverLoadedCounts(): LoadedCounts {
 
 /**
  * Get recent sessions from the sessions directory.
- * pi-mono stores sessions in subdirectories: ~/.pi/agent/sessions/<project-path>/*.jsonl
  */
 export function getRecentSessions(maxCount: number = 3): RecentSession[] {
   const homeDir = process.env.HOME || process.env.USERPROFILE || "";
   
-  // Try multiple possible session directories (pi-mono uses ~/.pi/agent/sessions/)
   const sessionsDirs = [
     join(homeDir, ".pi", "agent", "sessions"),
     join(homeDir, ".pi", "sessions"),
@@ -433,15 +458,11 @@ export function getRecentSessions(maxCount: number = 3): RecentSession[] {
         try {
           const stats = statSync(entryPath);
           if (stats.isDirectory()) {
-            // Recurse into subdirectories (project folders)
             scanDir(entryPath);
           } else if (entry.endsWith(".jsonl")) {
-            // Extract project name from parent directory
             const parentName = basename(dir);
-            // Clean up the directory name (it's URL-encoded path like --Users-nicobailon-...)
             let projectName = parentName;
             if (parentName.startsWith("--")) {
-              // Extract last path segment
               const parts = parentName.split("-").filter(p => p);
               projectName = parts[parts.length - 1] || parentName;
             }
@@ -458,7 +479,6 @@ export function getRecentSessions(maxCount: number = 3): RecentSession[] {
   
   if (sessions.length === 0) return [];
   
-  // Sort by modification time (newest first) and deduplicate by name
   sessions.sort((a, b) => b.mtime - a.mtime);
   
   const seen = new Set<string>();
@@ -470,7 +490,6 @@ export function getRecentSessions(maxCount: number = 3): RecentSession[] {
     }
   }
 
-  // Format time ago
   const now = Date.now();
   return uniqueSessions.slice(0, maxCount).map(s => ({
     name: s.name.length > 20 ? s.name.slice(0, 17) + "…" : s.name,