pi-powerline-footer 0.2.11 → 0.2.13

package/CHANGELOG.md

@@ -2,6 +2,44 @@
 
 ## [Unreleased]
 
+## [0.2.13] - 2026-01-27
+
+### Added
+- **Theme system** — Colors now integrate with pi's theme system instead of hardcoded values
+- Each preset defines its own color scheme with semantic color names
+- Optional `theme.json` file for user customization (power user feature)
+- Colors can be theme names (`accent`, `primary`, `muted`) or hex values (`#ff5500`)
+- Added `theme.example.json` documenting all available color options
+
+### Changed
+- Segments now use pi's `Theme` object for color rendering
+- Removed hardcoded ANSI color codes in favor of theme-based colors
+- Presets include both layout AND color scheme for cohesive looks
+- Simplified thinking level colors to use semantic `thinking` color (rainbow preserved for high/xhigh)
+
+## [0.2.12] - 2026-01-27
+
+### Added
+- **Responsive segment layout** — Segments dynamically flow between top bar and secondary row based on terminal width
+- When terminal is wide: all segments fit in top bar, secondary row hidden
+- When terminal is narrow: overflow segments move to secondary row automatically
+
+### Changed
+- **Default preset reordered** — New order: π → folder → model → think → git → context% → cache → cost
+- Path now appears before model name for better visual hierarchy
+- Thinking level now appears right after model name
+- Added git, cache_read, and cost to primary row in default preset
+- **Thinking label shortened** — `thinking:level` → `think:level` to save 3 characters
+
+### Fixed
+- **Narrow terminal crash** — Welcome screen now gracefully skips rendering on terminals < 44 columns wide
+- **Editor crash on very narrow terminals** — Falls back to original render when width < 10
+- **Streaming footer crash** — Truncation now properly handles edge cases and won't render content that exceeds terminal width
+- **Secondary widget crash** — Content width is now validated before rendering
+- **Layout cache invalidation** — Cache now properly clears when preset changes or powerline is toggled off
+
+## [0.2.11] - 2026-01-26
+
 ### Changed
 - Added `pi` manifest to package.json for pi v0.50.0 package system compliance
 - Added `pi-package` keyword for npm discoverability

package/README.md

@@ -75,3 +75,44 @@ Configure via preset options: `path: { mode: "full" }`
 ## Separators
 
 `powerline` · `powerline-thin` · `slash` · `pipe` · `dot` · `chevron` · `star` · `block` · `none` · `ascii`
+
+## Theming
+
+Colors are configurable via pi's theme system. Each preset defines its own color scheme, and you can override individual colors with a `theme.json` file in the extension directory.
+
+### Default Colors
+
+| Semantic | Theme Color | Description |
+|----------|-------------|-------------|
+| `pi` | `accent` | Pi icon |
+| `model` | `primary` | Model name |
+| `path` | `muted` | Directory path |
+| `gitClean` | `success` | Git branch (clean) |
+| `gitDirty` | `warning` | Git branch (dirty) |
+| `thinking` | `muted` | Thinking level |
+| `context` | `dim` | Context usage |
+| `contextWarn` | `warning` | Context usage >70% |
+| `contextError` | `error` | Context usage >90% |
+| `cost` | `primary` | Cost display |
+| `tokens` | `muted` | Token counts |
+
+### Custom Theme Override
+
+Create `~/.pi/agent/extensions/powerline-footer/theme.json`:
+
+```json
+{
+  "colors": {
+    "pi": "#ff5500",
+    "model": "accent",
+    "path": "#00afaf",
+    "gitClean": "success"
+  }
+}
+```
+
+Colors can be:
+- **Theme color names**: `accent`, `primary`, `muted`, `dim`, `text`, `success`, `warning`, `error`, `borderMuted`
+- **Hex colors**: `#ff5500`, `#d787af`
+
+See `theme.example.json` for all available options.

package/index.ts

@@ -1,16 +1,17 @@
-import type { ExtensionAPI, ReadonlyFooterDataProvider } from "@mariozechner/pi-coding-agent";
+import type { ExtensionAPI, ReadonlyFooterDataProvider, Theme } from "@mariozechner/pi-coding-agent";
 import type { AssistantMessage } from "@mariozechner/pi-ai";
 import { visibleWidth } from "@mariozechner/pi-tui";
 import { readFileSync, existsSync } from "node:fs";
 import { join } from "node:path";
 
-import type { SegmentContext, StatusLinePreset } from "./types.js";
+import type { ColorScheme, SegmentContext, StatusLinePreset, StatusLineSegmentId } from "./types.js";
 import { getPreset, PRESETS } from "./presets.js";
 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, WelcomeHeader, discoverLoadedCounts, getRecentSessions } from "./welcome.js";
+import { getDefaultColors } from "./theme.js";
 
 // ═══════════════════════════════════════════════════════════════════════════
 // Configuration
@@ -43,36 +44,122 @@ function isQuietStartup(): boolean {
 // Status Line Builder (for top border)
 // ═══════════════════════════════════════════════════════════════════════════
 
-/** Build just the status content (segments with separators, no borders) */
-function buildStatusContent(ctx: SegmentContext, presetDef: ReturnType<typeof getPreset>): string {
+/** Render a single segment and return its content with width */
+function renderSegmentWithWidth(
+  segId: StatusLineSegmentId,
+  ctx: SegmentContext
+): { content: string; width: number; visible: boolean } {
+  const rendered = renderSegment(segId, ctx);
+  if (!rendered.visible || !rendered.content) {
+    return { content: "", width: 0, visible: false };
+  }
+  return { content: rendered.content, width: visibleWidth(rendered.content), visible: true };
+}
+
+/** Build status content from a list of segment IDs */
+function buildStatusContentFromSegments(
+  segmentIds: StatusLineSegmentId[],
+  ctx: SegmentContext,
+  presetDef: ReturnType<typeof getPreset>
+): string {
   const separatorDef = getSeparator(presetDef.separator);
   const sepAnsi = getFgAnsiCode("sep");
 
   // Collect visible segment contents
-  const leftParts: string[] = [];
-  for (const segId of presetDef.leftSegments) {
-    const rendered = renderSegment(segId, ctx);
-    if (rendered.visible && rendered.content) {
-      leftParts.push(rendered.content);
-    }
-  }
-
-  const rightParts: string[] = [];
-  for (const segId of presetDef.rightSegments) {
+  const parts: string[] = [];
+  for (const segId of segmentIds) {
     const rendered = renderSegment(segId, ctx);
     if (rendered.visible && rendered.content) {
-      rightParts.push(rendered.content);
+      parts.push(rendered.content);
     }
   }
 
-  if (leftParts.length === 0 && rightParts.length === 0) {
+  if (parts.length === 0) {
     return "";
   }
 
   // Build content with powerline separators (no background)
   const sep = separatorDef.left;
-  const allParts = [...leftParts, ...rightParts];
-  return " " + allParts.join(` ${sepAnsi}${sep}${ansi.reset} `) + ansi.reset + " ";
+  return " " + parts.join(` ${sepAnsi}${sep}${ansi.reset} `) + ansi.reset + " ";
+}
+
+/** Build content string from pre-rendered parts */
+function buildContentFromParts(
+  parts: string[],
+  presetDef: ReturnType<typeof getPreset>
+): string {
+  if (parts.length === 0) return "";
+  const separatorDef = getSeparator(presetDef.separator);
+  const sepAnsi = getFgAnsiCode("sep");
+  const sep = separatorDef.left;
+  return " " + parts.join(` ${sepAnsi}${sep}${ansi.reset} `) + ansi.reset + " ";
+}
+
+/**
+ * Responsive segment layout - fits segments into top bar, overflows to secondary row.
+ * When terminal is wide enough, secondary segments move up to top bar.
+ * When narrow, top bar segments overflow down to secondary row.
+ */
+function computeResponsiveLayout(
+  ctx: SegmentContext,
+  presetDef: ReturnType<typeof getPreset>,
+  availableWidth: number
+): { topContent: string; secondaryContent: string } {
+  const separatorDef = getSeparator(presetDef.separator);
+  const sepWidth = visibleWidth(separatorDef.left) + 2; // separator + spaces around it
+  
+  // Get all segments: primary first, then secondary
+  const primaryIds = [...presetDef.leftSegments, ...presetDef.rightSegments];
+  const secondaryIds = presetDef.secondarySegments ?? [];
+  const allSegmentIds = [...primaryIds, ...secondaryIds];
+  
+  // Render all segments and get their widths
+  const renderedSegments: { id: StatusLineSegmentId; content: string; width: number }[] = [];
+  for (const segId of allSegmentIds) {
+    const { content, width, visible } = renderSegmentWithWidth(segId, ctx);
+    if (visible) {
+      renderedSegments.push({ id: segId, content, width });
+    }
+  }
+  
+  if (renderedSegments.length === 0) {
+    return { topContent: "", secondaryContent: "" };
+  }
+  
+  // Calculate how many segments fit in top bar
+  // Account for: leading space (1) + trailing space (1) = 2 chars overhead
+  const baseOverhead = 2;
+  let currentWidth = baseOverhead;
+  let topSegments: string[] = [];
+  let secondarySegments: string[] = [];
+  let overflow = false;
+  
+  for (let i = 0; i < renderedSegments.length; i++) {
+    const seg = renderedSegments[i];
+    // Width needed: segment width + separator (except for first segment)
+    const neededWidth = seg.width + (topSegments.length > 0 ? sepWidth : 0);
+    
+    if (!overflow && currentWidth + neededWidth <= availableWidth) {
+      // Fits in top bar
+      topSegments.push(seg.content);
+      currentWidth += neededWidth;
+    } else {
+      // Overflow to secondary row
+      overflow = true;
+      secondarySegments.push(seg.content);
+    }
+  }
+  
+  return {
+    topContent: buildContentFromParts(topSegments, presetDef),
+    secondaryContent: buildContentFromParts(secondarySegments, presetDef),
+  };
+}
+
+/** Build primary status content (for top border) - legacy, used during streaming */
+function buildStatusContent(ctx: SegmentContext, presetDef: ReturnType<typeof getPreset>): string {
+  const allSegments = [...presetDef.leftSegments, ...presetDef.rightSegments];
+  return buildStatusContentFromSegments(allSegments, ctx, presetDef);
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
@@ -90,6 +177,11 @@ export default function powerlineFooter(pi: ExtensionAPI) {
   let dismissWelcomeOverlay: (() => void) | null = null; // Callback to dismiss welcome overlay
   let welcomeHeaderActive = false; // Track if welcome header should be cleared on first input
   let welcomeOverlayShouldDismiss = false; // Track early dismissal request (before overlay setup completes)
+  
+  // Cache for responsive layout (shared between editor and widget for consistency)
+  let lastLayoutWidth = 0;
+  let lastLayoutResult: { topContent: string; secondaryContent: string } | null = null;
+  let lastLayoutTimestamp = 0;
 
   // Track session start
   pi.on("session_start", async (_event, ctx) => {
@@ -208,8 +300,11 @@ export default function powerlineFooter(pi: ExtensionAPI) {
           ctx.ui.setEditorComponent(undefined);
           ctx.ui.setFooter(undefined);
           ctx.ui.setHeader(undefined);
+          ctx.ui.setWidget("powerline-secondary", undefined);
           footerDataRef = null;
           tuiRef = null;
+          // Clear layout cache
+          lastLayoutResult = null;
           ctx.ui.notify("Defaults restored", "info");
         }
         return;
@@ -219,6 +314,8 @@ export default function powerlineFooter(pi: ExtensionAPI) {
       const preset = args.trim().toLowerCase() as StatusLinePreset;
       if (preset in PRESETS) {
         config.preset = preset;
+        // Invalidate layout cache since preset changed
+        lastLayoutResult = null;
         if (enabled) {
           setupCustomEditor(ctx);
         }
@@ -232,8 +329,9 @@ export default function powerlineFooter(pi: ExtensionAPI) {
     },
   });
 
-  function buildSegmentContext(ctx: any, width: number): SegmentContext {
+  function buildSegmentContext(ctx: any, width: number, theme: Theme): SegmentContext {
     const presetDef = getPreset(config.preset);
+    const colors: ColorScheme = presetDef.colors ?? getDefaultColors();
 
     // Build usage stats and get thinking level from session
     let input = 0, output = 0, cacheRead = 0, cacheWrite = 0, cost = 0;
@@ -291,9 +389,34 @@ export default function powerlineFooter(pi: ExtensionAPI) {
       extensionStatuses: footerDataRef?.getExtensionStatuses() ?? new Map(),
       options: presetDef.segmentOptions ?? {},
       width,
+      theme,
+      colors,
     };
   }
 
+  /**
+   * Get cached responsive layout or compute fresh one.
+   * Layout is cached per render cycle (same width = same layout).
+   */
+  function getResponsiveLayout(width: number, theme: Theme): { topContent: string; secondaryContent: string } {
+    const now = Date.now();
+    // Cache is valid if same width and within 50ms (same render cycle)
+    if (lastLayoutResult && lastLayoutWidth === width && now - lastLayoutTimestamp < 50) {
+      return lastLayoutResult;
+    }
+    
+    const presetDef = getPreset(config.preset);
+    const segmentCtx = buildSegmentContext(currentCtx, width, theme);
+    // Available width for top bar content (minus box corners: ╭─ and ─╮ = 4 chars)
+    const topBarAvailable = width - 4;
+    
+    lastLayoutWidth = width;
+    lastLayoutResult = computeResponsiveLayout(segmentCtx, presetDef, topBarAvailable);
+    lastLayoutTimestamp = now;
+    
+    return lastLayoutResult;
+  }
+
   function setupCustomEditor(ctx: any) {
     // Import CustomEditor dynamically and create wrapper
     import("@mariozechner/pi-coding-agent").then(({ CustomEditor }) => {
@@ -318,6 +441,12 @@ export default function powerlineFooter(pi: ExtensionAPI) {
         // ╰─                                  ─╯
         // + autocomplete items (if showing)
         editor.render = (width: number): string[] => {
+          // Minimum width for box layout: borders (4) + minimal content (1) = 5
+          // Fall back to original render on extremely narrow terminals
+          if (width < 10) {
+            return originalRender(width);
+          }
+          
           const bc = (s: string) => `${getFgAnsiCode("border")}${s}${ansi.reset}`;
           
           // Box drawing chars
@@ -347,43 +476,14 @@ export default function powerlineFooter(pi: ExtensionAPI) {
           const result: string[] = [];
           
           // Top border: ╭─ status ────────────╮
-          const presetDef = getPreset(config.preset);
-          const segmentCtx = buildSegmentContext(currentCtx, width);
-          const statusContent = buildStatusContent(segmentCtx, presetDef);
+          // Use responsive layout - overflow goes to secondary row
+          const layout = getResponsiveLayout(width, theme);
+          const statusContent = layout.topContent;
           const statusWidth = visibleWidth(statusContent);
           const topFillWidth = width - 4; // Reserve 4 for corners (╭─ and ─╮)
           
-          if (statusWidth <= topFillWidth) {
-            const fillWidth = topFillWidth - statusWidth;
-            result.push(topLeft + statusContent + bc("─".repeat(fillWidth)) + topRight);
-          } else {
-            // Status too wide - truncate by removing segments from the end
-            // Build progressively shorter content until it fits
-            let truncatedContent = "";
-            
-            for (let numSegments = presetDef.leftSegments.length - 1; numSegments >= 1; numSegments--) {
-              const limitedPreset = {
-                ...presetDef,
-                leftSegments: presetDef.leftSegments.slice(0, numSegments),
-                rightSegments: [],
-              };
-              truncatedContent = buildStatusContent(segmentCtx, limitedPreset);
-              const truncWidth = visibleWidth(truncatedContent);
-              if (truncWidth <= topFillWidth - 1) { // -1 for ellipsis
-                truncatedContent += "…";
-                break;
-              }
-            }
-            
-            const truncWidth = visibleWidth(truncatedContent);
-            if (truncWidth <= topFillWidth) {
-              const fillWidth = topFillWidth - truncWidth;
-              result.push(topLeft + truncatedContent + bc("─".repeat(fillWidth)) + topRight);
-            } else {
-              // Still too wide, show minimal
-              result.push(topLeft + bc("─".repeat(Math.max(0, topFillWidth))) + topRight);
-            }
-          }
+          const fillWidth = Math.max(0, topFillWidth - statusWidth);
+          result.push(topLeft + statusContent + bc("─".repeat(fillWidth)) + topRight);
           
           // Content lines (between top border at 0 and bottom border)
           for (let i = 1; i < bottomBorderIndex; i++) {
@@ -418,8 +518,8 @@ export default function powerlineFooter(pi: ExtensionAPI) {
         return editor;
       });
 
-      // Also set up footer data provider access via a minimal footer
-      ctx.ui.setFooter((tui: any, _theme: any, footerData: ReadonlyFooterDataProvider) => {
+      // Set up footer data provider access via a minimal footer
+      ctx.ui.setFooter((tui: any, theme: Theme, footerData: ReadonlyFooterDataProvider) => {
         footerDataRef = footerData;
         tuiRef = tui; // Store TUI reference for re-renders on git branch changes
         const unsub = footerData.onBranchChange(() => tui.requestRender());
@@ -430,43 +530,76 @@ export default function powerlineFooter(pi: ExtensionAPI) {
             // No cache to clear - render is always fresh
           },
           render(width: number): string[] {
-            // Only show status in footer during streaming (editor hidden)
-            // When editor is visible, status shows in editor top border instead
-            if (!isStreaming || !currentCtx) return [];
+            if (!currentCtx) return [];
             
             const presetDef = getPreset(config.preset);
-            const segmentCtx = buildSegmentContext(currentCtx, width);
-            const statusContent = buildStatusContent(segmentCtx, presetDef);
-            
-            if (!statusContent) return [];
+            const segmentCtx = buildSegmentContext(currentCtx, width, theme);
+            const lines: string[] = [];
             
-            // Single line with status content, padded/truncated to width
-            const statusWidth = visibleWidth(statusContent);
-            if (statusWidth <= width) {
-              return [statusContent + " ".repeat(width - statusWidth)];
-            } else {
-              // Truncate by removing segments (same logic as editor)
-              let truncatedContent = "";
-              
-              for (let numSegments = presetDef.leftSegments.length - 1; numSegments >= 1; numSegments--) {
-                const limitedPreset = {
-                  ...presetDef,
-                  leftSegments: presetDef.leftSegments.slice(0, numSegments),
-                  rightSegments: [],
-                };
-                truncatedContent = buildStatusContent(segmentCtx, limitedPreset);
-                const truncWidth = visibleWidth(truncatedContent);
-                if (truncWidth <= width - 1) {
-                  truncatedContent += "…";
-                  break;
+            // During streaming, show primary status in footer (editor hidden)
+            if (isStreaming) {
+              const statusContent = buildStatusContent(segmentCtx, presetDef);
+              if (statusContent) {
+                const statusWidth = visibleWidth(statusContent);
+                if (statusWidth <= width) {
+                  lines.push(statusContent + " ".repeat(width - statusWidth));
+                } else {
+                  // Truncate by removing segments until it fits
+                  // Start from leftSegments.length to try "just leftSegments" when rightSegments exists
+                  let truncatedContent = "";
+                  let foundFit = false;
+                  for (let numSegments = presetDef.leftSegments.length; numSegments >= 1; numSegments--) {
+                    const limitedPreset = {
+                      ...presetDef,
+                      leftSegments: presetDef.leftSegments.slice(0, numSegments),
+                      rightSegments: [],
+                    };
+                    truncatedContent = buildStatusContent(segmentCtx, limitedPreset);
+                    const truncWidth = visibleWidth(truncatedContent);
+                    if (truncWidth <= width - 1) {
+                      truncatedContent += "…";
+                      foundFit = true;
+                      break;
+                    }
+                  }
+                  // Only push if we found a fit, otherwise skip (don't crash on very narrow terminals)
+                  if (foundFit) {
+                    lines.push(truncatedContent);
+                  }
                 }
               }
-              
-              return [truncatedContent];
             }
+            
+            return lines;
           },
         };
       });
+
+      // Set up secondary row as a widget below editor (above sub bar)
+      // Shows overflow segments when top bar is too narrow
+      ctx.ui.setWidget("powerline-secondary", (tui: any, theme: Theme) => {
+        return {
+          dispose() {},
+          invalidate() {},
+          render(width: number): string[] {
+            if (!currentCtx) return [];
+            
+            // Use responsive layout - secondary row shows overflow from top bar
+            const layout = getResponsiveLayout(width, theme);
+            
+            // Only show secondary row if there's overflow content that fits
+            if (layout.secondaryContent) {
+              const contentWidth = visibleWidth(layout.secondaryContent);
+              // Don't render if content exceeds terminal width (graceful degradation)
+              if (contentWidth <= width) {
+                return [layout.secondaryContent];
+              }
+            }
+            
+            return [];
+          },
+        };
+      }, { placement: "belowEditor" });
     });
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-powerline-footer",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "Powerline-style status bar extension for pi coding agent",
   "type": "module",
   "bin": {
@@ -9,6 +9,7 @@
   "files": [
     "*.ts",
     "*.md",
+    "*.json",
     "cli.js"
   ],
   "keywords": [

package/presets.ts

@@ -1,10 +1,36 @@
-import type { PresetDef, StatusLinePreset } from "./types.js";
+import type { ColorScheme, PresetDef, StatusLinePreset } from "./types.js";
+import { getDefaultColors } from "./theme.js";
+
+// Get base colors from theme.ts (single source of truth)
+const DEFAULT_COLORS: ColorScheme = getDefaultColors();
+
+// Minimal - more muted, less colorful
+const MINIMAL_COLORS: ColorScheme = {
+  ...DEFAULT_COLORS,
+  pi: "dim",
+  model: "text",
+  path: "text",
+  git: "dim",
+  gitClean: "dim",
+};
+
+// Nerd - vibrant colors
+const NERD_COLORS: ColorScheme = {
+  ...DEFAULT_COLORS,
+  pi: "accent",
+  model: "accent",
+  path: "success",
+  tokens: "primary",
+  cost: "warning",
+};
 
 export const PRESETS: Record<StatusLinePreset, PresetDef> = {
   default: {
-    leftSegments: ["pi", "model", "thinking", "path", "git", "context_pct", "token_total", "cost", "extension_statuses"],
+    leftSegments: ["pi", "path", "model", "thinking", "git", "context_pct", "cache_read", "cost"],
     rightSegments: [],
+    secondarySegments: ["extension_statuses"],
     separator: "powerline-thin",
+    colors: DEFAULT_COLORS,
     segmentOptions: {
       model: { showThinkingLevel: false },
       path: { mode: "basename" },
@@ -16,6 +42,7 @@ export const PRESETS: Record<StatusLinePreset, PresetDef> = {
     leftSegments: ["path", "git"],
     rightSegments: ["context_pct"],
     separator: "slash",
+    colors: MINIMAL_COLORS,
     segmentOptions: {
       path: { mode: "basename" },
       git: { showBranch: true, showStaged: false, showUnstaged: false, showUntracked: false },
@@ -26,6 +53,7 @@ export const PRESETS: Record<StatusLinePreset, PresetDef> = {
     leftSegments: ["model", "git"],
     rightSegments: ["cost", "context_pct"],
     separator: "powerline-thin",
+    colors: DEFAULT_COLORS,
     segmentOptions: {
       model: { showThinkingLevel: false },
       git: { showBranch: true, showStaged: true, showUnstaged: true, showUntracked: false },
@@ -36,6 +64,7 @@ export const PRESETS: Record<StatusLinePreset, PresetDef> = {
     leftSegments: ["pi", "hostname", "model", "thinking", "path", "git", "subagents"],
     rightSegments: ["token_in", "token_out", "cache_read", "cost", "context_pct", "time_spent", "time", "extension_statuses"],
     separator: "powerline",
+    colors: DEFAULT_COLORS,
     segmentOptions: {
       model: { showThinkingLevel: false },
       path: { mode: "abbreviated", maxLength: 50 },
@@ -48,6 +77,7 @@ export const PRESETS: Record<StatusLinePreset, PresetDef> = {
     leftSegments: ["pi", "hostname", "model", "thinking", "path", "git", "session", "subagents"],
     rightSegments: ["token_in", "token_out", "cache_read", "cache_write", "cost", "context_pct", "context_total", "time_spent", "time", "extension_statuses"],
     separator: "powerline",
+    colors: NERD_COLORS,
     segmentOptions: {
       model: { showThinkingLevel: false },
       path: { mode: "abbreviated", maxLength: 60 },
@@ -60,6 +90,7 @@ export const PRESETS: Record<StatusLinePreset, PresetDef> = {
     leftSegments: ["model", "path", "git"],
     rightSegments: ["token_total", "cost", "context_pct"],
     separator: "ascii",
+    colors: MINIMAL_COLORS,
     segmentOptions: {
       model: { showThinkingLevel: true },
       path: { mode: "abbreviated", maxLength: 40 },
@@ -71,6 +102,7 @@ export const PRESETS: Record<StatusLinePreset, PresetDef> = {
     leftSegments: ["model", "path", "git"],
     rightSegments: ["token_total", "cost", "context_pct"],
     separator: "powerline-thin",
+    colors: DEFAULT_COLORS,
     segmentOptions: {},
   },
 };

package/segments.ts

@@ -1,9 +1,14 @@
 import { hostname as osHostname } from "node:os";
 import { basename } from "node:path";
-import type { RenderedSegment, SegmentContext, StatusLineSegment, StatusLineSegmentId } from "./types.js";
-import { fgOnly, rainbow } from "./colors.js";
+import type { RenderedSegment, SegmentContext, SemanticColor, StatusLineSegment, StatusLineSegmentId } from "./types.js";
+import { fg, rainbow, applyColor } from "./theme.js";
 import { getIcons, SEP_DOT, getThinkingText } from "./icons.js";
 
+// Helper to apply semantic color from context
+function color(ctx: SegmentContext, semantic: SemanticColor, text: string): string {
+  return fg(ctx.theme, semantic, text, ctx.colors);
+}
+
 // ═══════════════════════════════════════════════════════════════════════════
 // Helpers
 // ═══════════════════════════════════════════════════════════════════════════
@@ -36,11 +41,11 @@ function formatDuration(ms: number): string {
 
 const piSegment: StatusLineSegment = {
   id: "pi",
-  render(_ctx) {
+  render(ctx) {
     const icons = getIcons();
     if (!icons.pi) return { content: "", visible: false };
     const content = `${icons.pi} `;
-    return { content: fgOnly("accent", content), visible: true };
+    return { content: color(ctx, "pi", content), visible: true };
   },
 };
 
@@ -69,7 +74,7 @@ const modelSegment: StatusLineSegment = {
       }
     }
 
-    return { content: fgOnly("model", content), visible: true };
+    return { content: color(ctx, "model", content), visible: true };
   },
 };
 
@@ -107,7 +112,7 @@ const pathSegment: StatusLineSegment = {
     }
 
     const content = withIcon(icons.folder, pwd);
-    return { content: fgOnly("path", content), visible: true };
+    return { content: color(ctx, "path", content), visible: true };
   },
 };
 
@@ -125,29 +130,32 @@ const gitSegment: StatusLineSegment = {
 
     const isDirty = gitStatus && (gitStatus.staged > 0 || gitStatus.unstaged > 0 || gitStatus.untracked > 0);
     const showBranch = opts.showBranch !== false;
+    const branchColor: SemanticColor = isDirty ? "gitDirty" : "gitClean";
 
-    // Build content
+    // Build content - color branch separately from indicators
     let content = "";
     if (showBranch && branch) {
-      content = withIcon(icons.branch, branch);
+      // Color just the branch name (icon + branch text)
+      content = color(ctx, branchColor, withIcon(icons.branch, branch));
     }
 
-    // Add status indicators
+    // Add status indicators (each with their own color, not wrapped)
     if (gitStatus) {
       const indicators: string[] = [];
       if (opts.showUnstaged !== false && gitStatus.unstaged > 0) {
-        indicators.push(fgOnly("unstaged", `*${gitStatus.unstaged}`));
+        indicators.push(applyColor(ctx.theme, "warning", `*${gitStatus.unstaged}`));
       }
       if (opts.showStaged !== false && gitStatus.staged > 0) {
-        indicators.push(fgOnly("staged", `+${gitStatus.staged}`));
+        indicators.push(applyColor(ctx.theme, "success", `+${gitStatus.staged}`));
       }
       if (opts.showUntracked !== false && gitStatus.untracked > 0) {
-        indicators.push(fgOnly("untracked", `?${gitStatus.untracked}`));
+        indicators.push(applyColor(ctx.theme, "muted", `?${gitStatus.untracked}`));
       }
       if (indicators.length > 0) {
         const indicatorText = indicators.join(" ");
         if (!content && showBranch === false) {
-          content = withIcon(icons.git, indicatorText);
+          // No branch shown, color the git icon with branch color
+          content = color(ctx, branchColor, icons.git ? `${icons.git} ` : "") + indicatorText;
         } else {
           content += content ? ` ${indicatorText}` : indicatorText;
         }
@@ -156,9 +164,7 @@ const gitSegment: StatusLineSegment = {
 
     if (!content) return { content: "", visible: false };
 
-    // Wrap entire content in branch color
-    const colorName = isDirty ? "gitDirty" : "gitClean";
-    return { content: fgOnly(colorName, content), visible: true };
+    return { content, visible: true };
   },
 };
 
@@ -177,23 +183,15 @@ const thinkingSegment: StatusLineSegment = {
       xhigh: "xhigh",
     };
     const label = levelText[level] || level;
-    const content = `thinking:${label}`;
+    const content = `think:${label}`;
 
     // Use rainbow effect for high/xhigh (like Claude Code ultrathink)
     if (level === "high" || level === "xhigh") {
       return { content: rainbow(content), visible: true };
     }
 
-    // Use dedicated thinking colors (gradient: gray → purple → blue → teal)
-    const colorMap: Record<string, "thinkingOff" | "thinkingMinimal" | "thinkingLow" | "thinkingMedium"> = {
-      off: "thinkingOff",
-      minimal: "thinkingMinimal",
-      low: "thinkingLow",
-      medium: "thinkingMedium",
-    };
-    const color = colorMap[level] || "thinkingOff";
-    
-    return { content: fgOnly(color, content), visible: true };
+    // Use thinking color for lower levels
+    return { content: color(ctx, "thinking", content), visible: true };
   },
 };
 
@@ -215,7 +213,7 @@ const tokenInSegment: StatusLineSegment = {
     if (!input) return { content: "", visible: false };
 
     const content = withIcon(icons.input, formatTokens(input));
-    return { content: fgOnly("spend", content), visible: true };
+    return { content: color(ctx, "tokens", content), visible: true };
   },
 };
 
@@ -227,7 +225,7 @@ const tokenOutSegment: StatusLineSegment = {
     if (!output) return { content: "", visible: false };
 
     const content = withIcon(icons.output, formatTokens(output));
-    return { content: fgOnly("output", content), visible: true };
+    return { content: color(ctx, "tokens", content), visible: true };
   },
 };
 
@@ -240,7 +238,7 @@ const tokenTotalSegment: StatusLineSegment = {
     if (!total) return { content: "", visible: false };
 
     const content = withIcon(icons.tokens, formatTokens(total));
-    return { content: fgOnly("spend", content), visible: true };
+    return { content: color(ctx, "tokens", content), visible: true };
   },
 };
 
@@ -255,7 +253,7 @@ const costSegment: StatusLineSegment = {
     }
 
     const costDisplay = usingSubscription ? "(sub)" : `$${cost.toFixed(2)}`;
-    return { content: fgOnly("cost", costDisplay), visible: true };
+    return { content: color(ctx, "cost", costDisplay), visible: true };
   },
 };
 
@@ -269,14 +267,14 @@ const contextPctSegment: StatusLineSegment = {
     const autoIcon = ctx.autoCompactEnabled && icons.auto ? ` ${icons.auto}` : "";
     const text = `${pct.toFixed(1)}%/${formatTokens(window)}${autoIcon}`;
 
-    // Icon outside color, text inside
+    // Icon outside color, text inside - use semantic colors for thresholds
     let content: string;
     if (pct > 90) {
-      content = withIcon(icons.context, fgOnly("error", text));
+      content = withIcon(icons.context, color(ctx, "contextError", text));
     } else if (pct > 70) {
-      content = withIcon(icons.context, fgOnly("warning", text));
+      content = withIcon(icons.context, color(ctx, "contextWarn", text));
     } else {
-      content = withIcon(icons.context, fgOnly("context", text));
+      content = withIcon(icons.context, color(ctx, "context", text));
     }
 
     return { content, visible: true };
@@ -291,7 +289,7 @@ const contextTotalSegment: StatusLineSegment = {
     if (!window) return { content: "", visible: false };
 
     return {
-      content: fgOnly("context", withIcon(icons.context, formatTokens(window))),
+      content: color(ctx, "context", withIcon(icons.context, formatTokens(window))),
       visible: true,
     };
   },
@@ -367,7 +365,7 @@ const cacheReadSegment: StatusLineSegment = {
     // Space-separated parts
     const parts = [icons.cache, icons.input, formatTokens(cacheRead)].filter(Boolean);
     const content = parts.join(" ");
-    return { content: fgOnly("spend", content), visible: true };
+    return { content: color(ctx, "tokens", content), visible: true };
   },
 };
 
@@ -381,7 +379,7 @@ const cacheWriteSegment: StatusLineSegment = {
     // Space-separated parts
     const parts = [icons.cache, icons.output, formatTokens(cacheWrite)].filter(Boolean);
     const content = parts.join(" ");
-    return { content: fgOnly("output", content), visible: true };
+    return { content: color(ctx, "tokens", content), visible: true };
   },
 };
 

package/theme.example.json

@@ -0,0 +1,19 @@
+{
+  "colors": {
+    "pi": "accent",
+    "model": "primary",
+    "path": "muted",
+    "git": "success",
+    "gitDirty": "warning",
+    "gitClean": "success",
+    "thinking": "muted",
+    "thinkingHigh": "accent",
+    "context": "dim",
+    "contextWarn": "warning",
+    "contextError": "error",
+    "cost": "primary",
+    "tokens": "muted",
+    "separator": "dim",
+    "border": "borderMuted"
+  }
+}

package/theme.ts

@@ -0,0 +1,171 @@
+/**
+ * Theme system for powerline-footer
+ * 
+ * Colors are resolved in order:
+ * 1. User overrides from theme.json (if exists)
+ * 2. Preset colors
+ * 3. Default colors
+ */
+
+import type { Theme, ThemeColor } from "@mariozechner/pi-coding-agent";
+import { existsSync, readFileSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import type { ColorScheme, ColorValue, SemanticColor } from "./types.js";
+
+// Default color scheme (uses pi theme colors)
+const DEFAULT_COLORS: Required<ColorScheme> = {
+  pi: "accent",
+  model: "primary",
+  path: "muted",
+  git: "success",
+  gitDirty: "warning",
+  gitClean: "success",
+  thinking: "muted",
+  thinkingHigh: "accent",
+  context: "dim",
+  contextWarn: "warning",
+  contextError: "error",
+  cost: "primary",
+  tokens: "muted",
+  separator: "dim",
+  border: "borderMuted",
+};
+
+// Rainbow colors for high thinking levels
+const RAINBOW_COLORS = [
+  "#b281d6", "#d787af", "#febc38", "#e4c00f", 
+  "#89d281", "#00afaf", "#178fb9", "#b281d6",
+];
+
+// Cache for user theme overrides
+let userThemeCache: ColorScheme | null = null;
+let userThemeCacheTime = 0;
+const CACHE_TTL = 5000; // 5 seconds
+
+/**
+ * Get the path to the theme.json file
+ */
+function getThemePath(): string {
+  const extDir = dirname(fileURLToPath(import.meta.url));
+  return join(extDir, "theme.json");
+}
+
+/**
+ * Load user theme overrides from theme.json
+ */
+function loadUserTheme(): ColorScheme {
+  const now = Date.now();
+  if (userThemeCache && now - userThemeCacheTime < CACHE_TTL) {
+    return userThemeCache;
+  }
+
+  const themePath = getThemePath();
+  try {
+    if (existsSync(themePath)) {
+      const content = readFileSync(themePath, "utf-8");
+      const parsed = JSON.parse(content);
+      userThemeCache = parsed.colors ?? {};
+      userThemeCacheTime = now;
+      return userThemeCache;
+    }
+  } catch {
+    // Ignore errors, use defaults
+  }
+
+  userThemeCache = {};
+  userThemeCacheTime = now;
+  return userThemeCache;
+}
+
+/**
+ * Resolve a semantic color to an actual color value
+ */
+export function resolveColor(
+  semantic: SemanticColor,
+  presetColors?: ColorScheme
+): ColorValue {
+  const userTheme = loadUserTheme();
+  
+  // Priority: user overrides > preset colors > defaults
+  return userTheme[semantic] 
+    ?? presetColors?.[semantic] 
+    ?? DEFAULT_COLORS[semantic];
+}
+
+/**
+ * Check if a color value is a hex color
+ */
+function isHexColor(color: ColorValue): color is `#${string}` {
+  return typeof color === "string" && color.startsWith("#");
+}
+
+/**
+ * Convert hex color to ANSI escape code
+ */
+function hexToAnsi(hex: string): string {
+  const h = hex.replace("#", "");
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  return `\x1b[38;2;${r};${g};${b}m`;
+}
+
+/**
+ * Apply a color to text using the pi theme or custom hex
+ */
+export function applyColor(
+  theme: Theme,
+  color: ColorValue,
+  text: string
+): string {
+  if (isHexColor(color)) {
+    return `${hexToAnsi(color)}${text}\x1b[0m`;
+  }
+  return theme.fg(color as ThemeColor, text);
+}
+
+/**
+ * Apply a semantic color to text
+ */
+export function fg(
+  theme: Theme,
+  semantic: SemanticColor,
+  text: string,
+  presetColors?: ColorScheme
+): string {
+  const color = resolveColor(semantic, presetColors);
+  return applyColor(theme, color, text);
+}
+
+/**
+ * Apply rainbow gradient to text (for high thinking levels)
+ */
+export function rainbow(text: string): string {
+  let result = "";
+  let colorIndex = 0;
+  for (const char of text) {
+    if (char === " " || char === ":") {
+      result += char;
+    } else {
+      result += hexToAnsi(RAINBOW_COLORS[colorIndex % RAINBOW_COLORS.length]) + char;
+      colorIndex++;
+    }
+  }
+  return result + "\x1b[0m";
+}
+
+/**
+ * Get the default color scheme
+ */
+export function getDefaultColors(): Required<ColorScheme> {
+  return { ...DEFAULT_COLORS };
+}
+
+/**
+ * Clear the user theme cache (for reloading)
+ */
+export function clearThemeCache(): void {
+  userThemeCache = null;
+  userThemeCacheTime = 0;
+}

package/types.ts

@@ -1,3 +1,29 @@
+import type { Theme, ThemeColor } from "@mariozechner/pi-coding-agent";
+
+// Theme color - either a pi theme color name or a custom hex color
+export type ColorValue = ThemeColor | `#${string}`;
+
+// Semantic color names for segments
+export type SemanticColor =
+  | "pi"
+  | "model"
+  | "path"
+  | "git"
+  | "gitDirty"
+  | "gitClean"
+  | "thinking"
+  | "thinkingHigh"
+  | "context"
+  | "contextWarn"
+  | "contextError"
+  | "cost"
+  | "tokens"
+  | "separator"
+  | "border";
+
+// Color scheme mapping semantic names to actual colors
+export type ColorScheme = Partial<Record<SemanticColor, ColorValue>>;
+
 // Segment identifiers
 export type StatusLineSegmentId =
   | "pi"
@@ -58,8 +84,12 @@ export interface StatusLineSegmentOptions {
 export interface PresetDef {
   leftSegments: StatusLineSegmentId[];
   rightSegments: StatusLineSegmentId[];
+  /** Secondary row segments (shown in footer, above sub bar) */
+  secondarySegments?: StatusLineSegmentId[];
   separator: StatusLineSeparatorStyle;
   segmentOptions?: StatusLineSegmentOptions;
+  /** Color scheme for this preset */
+  colors?: ColorScheme;
 }
 
 // Separator definition
@@ -114,6 +144,10 @@ export interface SegmentContext {
   // Options
   options: StatusLineSegmentOptions;
   width: number;
+  
+  // Theming
+  theme: Theme;
+  colors: ColorScheme;
 }
 
 // Rendered segment output

package/welcome.ts

@@ -182,11 +182,20 @@ function renderWelcomeBox(
   termWidth: number, 
   bottomLine: string,
 ): string[] {
+  // Minimum width for two-column layout: leftCol(26) + separator(3) + minRightCol(15) = 44
+  const minLayoutWidth = 44;
+  
+  // If terminal is too narrow for the layout, return empty (skip welcome box)
+  if (termWidth < minLayoutWidth) {
+    return [];
+  }
+  
   const minWidth = 76;
   const maxWidth = 96;
-  const boxWidth = Math.max(minWidth, Math.min(termWidth - 2, maxWidth));
+  // Clamp to termWidth to prevent crash on narrow terminals
+  const boxWidth = Math.min(termWidth, Math.max(minWidth, Math.min(termWidth - 2, maxWidth)));
   const leftCol = 26;
-  const rightCol = boxWidth - leftCol - 3;
+  const rightCol = Math.max(1, boxWidth - leftCol - 3); // Ensure rightCol is at least 1
   
   const hChar = "─";
   const v = dim("│");
@@ -251,9 +260,16 @@ export class WelcomeComponent implements Component {
   invalidate(): void {}
 
   render(termWidth: number): string[] {
+    // Minimum width for two-column layout (must match renderWelcomeBox)
+    const minLayoutWidth = 44;
+    if (termWidth < minLayoutWidth) {
+      return [];
+    }
+    
     const minWidth = 76;
     const maxWidth = 96;
-    const boxWidth = Math.max(minWidth, Math.min(termWidth - 2, maxWidth));
+    // Clamp to termWidth to prevent crash on narrow terminals
+    const boxWidth = Math.min(termWidth, Math.max(minWidth, Math.min(termWidth - 2, maxWidth)));
     
     // Bottom line with countdown
     const countdownText = ` Press any key to continue (${this.countdown}s) `;
@@ -290,18 +306,27 @@ export class WelcomeHeader implements Component {
   invalidate(): void {}
 
   render(termWidth: number): string[] {
+    // Minimum width for two-column layout (must match renderWelcomeBox)
+    const minLayoutWidth = 44;
+    if (termWidth < minLayoutWidth) {
+      return [];
+    }
+    
     const minWidth = 76;
     const maxWidth = 96;
-    const boxWidth = Math.max(minWidth, Math.min(termWidth - 2, maxWidth));
+    // Clamp to termWidth to prevent crash on narrow terminals
+    const boxWidth = Math.min(termWidth, Math.max(minWidth, Math.min(termWidth - 2, maxWidth)));
     const hChar = "─";
     
     // Bottom line with column separator (leftCol=26, rightCol=boxWidth-29)
     const leftCol = 26;
-    const rightCol = boxWidth - leftCol - 3;
+    const rightCol = Math.max(1, boxWidth - leftCol - 3);
     const bottomLine = dim(hChar.repeat(leftCol)) + dim("┴") + dim(hChar.repeat(rightCol));
     
     const lines = renderWelcomeBox(this.data, termWidth, bottomLine);
-    lines.push(""); // Add empty line for spacing
+    if (lines.length > 0) {
+      lines.push(""); // Add empty line for spacing only if we rendered content
+    }
     return lines;
   }
 }