@pi-unipi/footer 0.1.4 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pi-unipi/footer",
-  "version": "0.1.4",
+  "version": "2.0.1",
   "description": "Persistent status bar for Unipi — subscribes to UNIPI_EVENTS and renders key stats from all unipi packages",
   "type": "module",
   "license": "MIT",

package/src/commands.ts

@@ -5,7 +5,7 @@
  * /unipi:footer-settings.
  */
 
-import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
+import type { ExtensionAPI, ExtensionContext } from "@mariozechner/pi-coding-agent";
 import { UNIPI_PREFIX, FOOTER_COMMANDS } from "@pi-unipi/core";
 import { loadFooterSettings, saveFooterSettings } from "./config.js";
 import { showFooterSettings } from "./tui/settings-tui.js";
@@ -23,7 +23,7 @@ interface FooterState {
   };
   segmentLookup: Map<string, FooterSegment>;
   piContext: unknown;
-  setupUI: ((pi: ExtensionAPI, ctx: any) => void) | null;
+  setupUI: ((pi: ExtensionAPI, ctx: ExtensionContext) => void) | null;
 }
 
 /**

package/src/config.ts

@@ -144,6 +144,18 @@ export function isSegmentEnabled(groupId: string, segmentId: string): boolean {
   return true;
 }
 
+/**
+ * Check if a segment is explicitly enabled by user settings (toggled on).
+ * Returns true only if the segment appears in the settings with value `true`.
+ * Segments that are enabled by default but not explicitly configured return false.
+ */
+export function isSegmentExplicitlyEnabled(groupId: string, segmentId: string): boolean {
+  const settings = loadFooterSettings();
+  const groupSettings = settings.groups[groupId];
+  if (!groupSettings) return false;
+  return groupSettings.segments?.[segmentId] === true;
+}
+
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
 function isValidSeparator(value: unknown): boolean {

package/src/help.ts

@@ -75,7 +75,7 @@ function buildHelpLines(
 function getGroupForSegment(segId: string): string {
   const coreIds = ["model", "api_state", "tool_count", "git", "context_pct", "cost", "tokens_total", "tokens_in", "tokens_out", "session", "hostname", "time", "tps", "clock", "duration", "thinking_level"];
   if (coreIds.includes(segId)) return "core";
-  const compactorIds = ["session_events", "compactions", "tokens_saved", "compression_ratio", "indexed_docs", "sandbox_runs", "search_queries"];
+  const compactorIds = ["session_events", "compactions", "tokens_saved", "compression_ratio", "cocoindex_status", "sandbox_runs", "search_queries"];
   if (compactorIds.includes(segId)) return "compactor";
   if (["project_count", "total_count", "consolidations"].includes(segId)) return "memory";
   if (["servers_total", "servers_active", "tools_total", "servers_failed"].includes(segId)) return "mcp";
@@ -101,7 +101,7 @@ export function showFooterHelp(
   // Use pi's custom UI overlay
   const ctx = (pi as any)._ctx;
   if (ctx?.ui?.custom) {
-    ctx.ui.custom((tui: any) => {
+    ctx.ui.custom((tui: import("@mariozechner/pi-tui").TUI) => {
       let scrollOffset = 0;
 
       return {

package/src/index.ts

@@ -5,7 +5,8 @@
  * initializes renderer on session_start.
  */
 
-import type { ExtensionAPI, Theme } from "@mariozechner/pi-coding-agent";
+import type { ExtensionAPI, Theme, ExtensionContext } from "@mariozechner/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
 import { UNIPI_EVENTS, emitEvent, UNIPI_PREFIX, FOOTER_COMMANDS } from "@pi-unipi/core";
 import { FooterRegistry, getFooterRegistry } from "./registry/index.js";
 import { FooterRenderer } from "./rendering/renderer.js";
@@ -62,10 +63,10 @@ export interface FooterState {
   unsubscribeEvents: (() => void) | null;
   piContext: unknown;
   footerData: unknown;
-  tuiRef: any;
+  tuiRef: import("@mariozechner/pi-tui").TUI | null | undefined;
   refreshTimer: ReturnType<typeof setInterval> | null;
   /** Re-register footer + widgets with pi UI (for live enable) */
-  setupUI: ((pi: ExtensionAPI, ctx: any) => void) | null;
+  setupUI: ((pi: ExtensionAPI, ctx: ExtensionContext) => void) | null;
 }
 
 export default function footerExtension(pi: ExtensionAPI): void {
@@ -78,7 +79,7 @@ export default function footerExtension(pi: ExtensionAPI): void {
     registry: getFooterRegistry(),
     renderer: new FooterRenderer(
       getFooterRegistry(),
-      { get: (id: string) => segmentLookup.get(id) },
+      { get: (id: string) => segmentLookup.get(id), allIds: () => Array.from(segmentLookup.keys()) },
       loadFooterSettings().preset,
     ),
     segmentLookup,
@@ -111,7 +112,7 @@ export default function footerExtension(pi: ExtensionAPI): void {
 
     // Setup footer + widgets
     setupFooterUI(pi, ctx, state);
-    state.setupUI = (p: ExtensionAPI, c: any) => setupFooterUI(p, c, state);
+    state.setupUI = (p: ExtensionAPI, c: ExtensionContext) => setupFooterUI(p, c, state);
   });
 
   pi.on("session_shutdown", async () => {
@@ -135,7 +136,7 @@ export default function footerExtension(pi: ExtensionAPI): void {
   // ─── Emit MODULE_READY ──────────────────────────────────────────────────
 
   pi.on("session_start", async () => {
-    emitEvent(pi as any, UNIPI_EVENTS.MODULE_READY, {
+    emitEvent(pi, UNIPI_EVENTS.MODULE_READY, {
       name: "@pi-unipi/footer",
       version: "0.1.0",
       commands: [`${UNIPI_PREFIX}${FOOTER_COMMANDS.FOOTER}`, `${UNIPI_PREFIX}${FOOTER_COMMANDS.FOOTER_SETTINGS}`, `${UNIPI_PREFIX}${FOOTER_COMMANDS.FOOTER_HELP}`],
@@ -146,9 +147,9 @@ export default function footerExtension(pi: ExtensionAPI): void {
 
 // ─── Footer UI setup ────────────────────────────────────────────────────────
 
-function setupFooterUI(pi: ExtensionAPI, ctx: any, state: FooterState): void {
+function setupFooterUI(pi: ExtensionAPI, ctx: ExtensionContext, state: FooterState): void {
   // Register footer (minimal — handles branch changes)
-  ctx.ui.setFooter((tui: any, _theme: Theme, footerData: any) => {
+  ctx.ui.setFooter((tui, _theme, footerData) => {
     state.tuiRef = tui;
 
     // Start periodic refresh for time-sensitive segments (e.g. clock)
@@ -199,7 +200,7 @@ function setupFooterUI(pi: ExtensionAPI, ctx: any, state: FooterState): void {
   });
 
   // Top row widget
-  ctx.ui.setWidget("footer-top", (_tui: any, theme: Theme) => {
+  ctx.ui.setWidget("footer-top", (_tui, theme) => {
     // Update the renderer's theme-like
     const themeLike = { fg: (color: string, text: string) => theme.fg(color as any, text) };
     // We need to patch the context with proper theme
@@ -211,30 +212,38 @@ function setupFooterUI(pi: ExtensionAPI, ctx: any, state: FooterState): void {
         state.renderer.resetLayoutCache();
       },
       render(width: number): string[] {
-        if (!state.enabled || !state.piContext) return [];
+        if (!state.enabled || !state.piContext || width <= 0) return [];
 
         // Build layout with proper theme by creating segment contexts
         const layout = state.renderer.computeLayout(width);
-        return layout.topContent ? [layout.topContent] : [];
+        if (!layout.topContent) return [];
+
+        // Hard safety net: never return a line wider than the terminal.
+        // This catches any edge cases in layout math or visibleWidth()
+        // inconsistencies with PUA characters + ANSI codes.
+        const line = layout.topContent;
+        return [visibleWidth(line) > width ? truncateToWidth(line, width) : line];
       },
     };
   }, { placement: "aboveEditor" });
 
   // Secondary row widget
-  ctx.ui.setWidget("footer-secondary", (_tui: any, _theme: Theme) => {
+  ctx.ui.setWidget("footer-secondary", (_tui, _theme) => {
     return {
       dispose() {},
       invalidate() {
         state.renderer.resetLayoutCache();
       },
       render(width: number): string[] {
-        if (!state.enabled || !state.piContext) return [];
+        if (!state.enabled || !state.piContext || width <= 0) return [];
 
         const lines: string[] = [];
 
         const layout = state.renderer.computeLayout(width);
         if (layout.secondaryContent) {
-          lines.push(layout.secondaryContent);
+          // Hard safety net: never return a line wider than the terminal.
+          const line = layout.secondaryContent;
+          lines.push(visibleWidth(line) > width ? truncateToWidth(line, width) : line);
         }
 
         return lines;

package/src/presets.ts

@@ -73,7 +73,7 @@ const FULL_PRESET: PresetDef = {
   secondarySegments: [
     "hostname",
     "tokens_in", "tokens_out",
-    "compression_ratio", "indexed_docs",
+    "compression_ratio", "cocoindex_status",
     "platforms_enabled", "last_sent",
     "thinking_level",
   ],
@@ -98,7 +98,7 @@ const NERD_PRESET: PresetDef = {
   secondarySegments: [
     "hostname",
     "tokens_in", "tokens_out",
-    "compression_ratio", "indexed_docs",
+    "compression_ratio", "cocoindex_status",
     "platforms_enabled", "last_sent",
     "thinking_level",
   ],

package/src/registry/index.ts

@@ -156,5 +156,5 @@ export function resetFooterRegistry(): void {
 
 // Expose on globalThis for cross-package access
 if (typeof globalThis !== "undefined") {
-  (globalThis as Record<string, unknown>).__unipi_footer_registry = getFooterRegistry();
+  globalThis.__unipi_footer_registry = getFooterRegistry();
 }

package/src/rendering/icons.ts

@@ -84,65 +84,65 @@ export interface IconSet {
 /** Nerd Font glyphs — requires a Nerd Font installed in the terminal */
 export const NERD_ICONS: IconSet = {
   // Core
-  model:           "\uDB81\uDE5B", // 󰚩 custom model icon
-  apiState:        "\uF725", // 󱂛 api state icon
-  toolCount:       "\uF0AD", //  tool count icon
-  git:             "\uF0E8", //  git icon
-  context:         "\uF8D8", //  context icon
-  cost:            "\uF155", //  cost icon
-  tokens:          "\uF07B", //  tokens icon
-  tokensIn:        "\uF07B", //  tokens in icon
-  tokensOut:       "\uF07B", //  tokens out icon
-  session:         "\uF550", // nf-md-identifier
-  hostname:        "\uF109", // nf-fa-laptop
-  time:            "\uF017", // nf-fa-clock_o
-  tps:             "\uF062", // \u2191 up arrow
-  clock:           "\uF017", // nf-fa-clock_o
-  duration:        "\uF49B", // nf-md-timer_outline
-  thinkingLevel:   "\uF4D8", // nf-fa-lightbulb_o
+  model:           "\u{F06A9}", // 󰚩
+  apiState:        "\u{F109B}", // 󱂛
+  toolCount:       "\u{F1064}", // 󱁤
+  git:             "\uEAFE", // 
+  context:         "\u{F0077}", // 󰁷
+  cost:            "\uF155", // 
+  tokens:          "\uEDE8", // 
+  tokensIn:        "\uEDE8", // 
+  tokensOut:       "\uEDE8", // 
+  session:         "\uF03A", // 
+  hostname:        "\uEA7A", // 
+  time:            "\uF017", // 
+  tps:             "\u{F04C5}", // 󰓅
+  clock:           "\uF017", // 
+  duration:        "\u{F13AB}", // 󱎫
+  thinkingLevel:   "\uF400", // 
 
   // Compactor
-  sessionEvents:   "\uDBB1\uDECF", // 󰲏 session events icon
-  compactions:     "\uDBB1\uDECF", // 󰲏 compactions icon
-  tokensSaved:     "\uF155", //  tokens saved icon
-  compressionRatio:"\uDBB1\uDECF", // 󰲏 compression ratio icon
-  indexedDocs:     "\uDB81\uDE19", // 󰈙 indexed docs icon
-  sandboxRuns:     "\uF121", //  sandbox runs icon
-  searchQueries:   "\uF002", //  search queries icon
+  sessionEvents:   "\uEA86", // 
+  compactions:     "\u{F0C8F}", // 󰲏
+  tokensSaved:     "\uF155", //  (kept — missing from customization)
+  compressionRatio:"\u{F0C8F}", // 󰲏
+  indexedDocs:     "\u{F0219}", // 󰈙
+  sandboxRuns:     "\uF233", // 
+  searchQueries:   "\uF002", // 
 
   // Memory
-  projectCount:    "\uDB81\uDED4", // 󰍚 memory icon
-  totalCount:      "\uEB9C", //  total count icon
-  consolidations:  "\uDB81\uDED4", // 󰍚 consolidations icon
+  projectCount:    "\uEE9C", // 
+  totalCount:      "\uEE9C", // 
+  consolidations:  "\uEE9C", // 
 
   // MCP
-  serversTotal:    "\uF0F6", //  servers total icon
-  serversActive:   "\uF058", //  servers active icon
-  toolsTotal:      "\uF0AD", //  tools total icon
-  serversFailed:   "\uF467", //  servers failed icon
+  serversTotal:    "\u{F05B7}", // 󰖷
+  serversActive:   "\u{F05B7}", // 󰖷
+  toolsTotal:      "\u{F05B7}", // 󰖷
+  serversFailed:   "\u{F05B7}", // 󰖷
 
   // Ralph
-  activeLoops:     "\udb81\udf09", // 󰼉 ralph loop icon
-  totalIterations: "\udb81\udf09", // 󰼉 ralph loop icon
-  loopStatus:      "\udb81\udf09", // 󰼉 ralph loop icon
+  activeLoops:     "\u{F0709}", // 󰜉
+  totalIterations: "\u{F0709}", // 󰜉
+  loopStatus:      "\u{F0709}", // 󰜉
 
   // Workflow
-  currentCommand:  "\uF0E8", //  current command icon
-  sandboxLevel:    "\uDBB1\uDDFE", // 󰟾 sandbox level icon
-  commandDuration: "\uDBB9\uDEAB", // 󱎫 command duration icon
+  currentCommand:  "\uF124", // 
+  sandboxLevel:    "\u{F07FE}", // 󰟾
+  commandDuration: "\u{F13AB}", // 󱎫
 
   // Kanboard
-  docsCount:       "\uDB81\uDE19", // 󰈙 docs count icon
-  tasksDone:       "\uF0E8", //  tasks done icon
-  tasksTotal:      "\uF0E8", //  tasks total icon
-  taskPct:         "\uF0E8", //  task pct icon
+  docsCount:       "\u{F09EE}", // 󰧮
+  tasksDone:       "\u{F1A9A}", // 󱪚
+  tasksTotal:      "\uF4A0", // 
+  taskPct:         "\uF4A0", // 
 
   // Notify
-  platformsEnabled:"\uF0E0", // nf-fa-envelope
-  lastSent:        "\uF017", // nf-fa-clock_o
+  platformsEnabled:"\uEB9A", // 
+  lastSent:        "\u{F13AB}", // 󱎫
 
   // Extension status
-  extensionStatuses:"\uDBB5\uDEAB", // 󱖫 extension statuses icon
+  extensionStatuses:"\u{F15AB}", // 󱖫
 
   separator:       "\uE0B1", // nf-pl-left_soft_divider
 };

package/src/rendering/renderer.ts

@@ -14,11 +14,13 @@ import { getSeparator, separatorVisibleWidth } from "./separators.js";
 import { getDefaultColors } from "./theme.js";
 import { setIconStyle } from "./icons.js";
 import { getPreset } from "../presets.js";
-import { isSegmentEnabled, loadFooterSettings } from "../config.js";
+import { isSegmentEnabled, isSegmentExplicitlyEnabled, loadFooterSettings } from "../config.js";
 
 /** Segment lookup by ID across all groups */
 interface SegmentLookup {
   get(id: string): FooterSegment | undefined;
+  /** All known segment IDs */
+  allIds(): string[];
 }
 
 /** Rendered segment with width info */
@@ -162,6 +164,19 @@ export class FooterRenderer {
     const primaryIds = [...presetDef.leftSegments, ...presetDef.rightSegments];
     const secondaryIds = [...presetDef.secondarySegments];
 
+    // Also include segments explicitly enabled by user that are NOT in the preset.
+    // This ensures toggling a segment "on" in the settings TUI makes it visible
+    // even when the active preset doesn't include it.
+    if (this.segmentLookup.allIds) {
+      for (const segId of this.segmentLookup.allIds()) {
+        if (primaryIds.includes(segId) || secondaryIds.includes(segId)) continue;
+        const groupId = this.getGroupForSegment(segId);
+        if (isSegmentExplicitlyEnabled(groupId, segId)) {
+          primaryIds.push(segId);
+        }
+      }
+    }
+
     // Render segments grouped by their zone
     const zones: Record<SegmentZone, RenderedSegmentWithWidth[]> = {
       left: [],
@@ -203,9 +218,11 @@ export class FooterRenderer {
 
     const sepDef = getSeparator(settings.separator);
     const sepWidth = visibleWidth(sepDef.left) + 2;
-    const zoneSep = presetDef.zoneSeparator ?? settings.zoneSeparator ?? "\u2502";
-    const zoneSepWidth = visibleWidth(zoneSep) + 2; // +2 for spaces around zone sep
-    const dimZoneSep = `\x1b[2m${zoneSep}\x1b[0m`; // dimmed zone separator
+    const rawZoneSep = presetDef.zoneSeparator ?? settings.zoneSeparator ?? "\u2502";
+    const zoneSepHidden = !rawZoneSep || rawZoneSep === "none";
+    const zoneSep = zoneSepHidden ? "" : rawZoneSep;
+    const zoneSepWidth = zoneSepHidden ? 0 : visibleWidth(zoneSep) + 2; // +2 for spaces around zone sep
+    const dimZoneSep = zoneSepHidden ? "" : `\x1b[2m${zoneSep}\x1b[0m`; // dimmed zone separator
 
     // Calculate widths per zone
     const leftWidth = this.measureZoneWidth(zones.left, sepWidth);
@@ -213,15 +230,36 @@ export class FooterRenderer {
     const numZoneSeps = (leftWidth > 0 ? 1 : 0) + (rightWidth > 0 ? 1 : 0);
     const availableForCenter = width - leftWidth - rightWidth - numZoneSeps * zoneSepWidth - 2; // -2 for margins
 
+    // Progressive segment dropping: if left + right already exceed width,
+    // drop right-zone segments from the end until they fit.
+    const marginWidth = 2; // leading + trailing space
+    let adjustedRightWidth = rightWidth;
+    while (zones.right.length > 0 && leftWidth + adjustedRightWidth + marginWidth > width) {
+      const dropped = zones.right.pop()!;
+      adjustedRightWidth = this.measureZoneWidth(zones.right, sepWidth);
+      overflowZones.right.push(dropped);
+    }
+    // If left zone alone exceeds width, drop segments from the end until it fits.
+    let adjustedLeftWidth = leftWidth;
+    while (zones.left.length > 1 && adjustedLeftWidth + marginWidth > width) {
+      const dropped = zones.left.pop()!;
+      adjustedLeftWidth = this.measureZoneWidth(zones.left, sepWidth);
+      overflowZones.left.push(dropped);
+    }
+    // Recalculate available center after possible right-zone dropping
+    const adjLeftWidth = zones.left.length > 0 ? this.measureZoneWidth(zones.left, sepWidth) : 0;
+    const adjNumZoneSeps = (zones.left.length > 0 ? 1 : 0) + (zones.right.length > 0 ? 1 : 0);
+    const adjAvailableForCenter = width - adjLeftWidth - adjustedRightWidth - adjNumZoneSeps * zoneSepWidth - marginWidth;
+
     // Overflow check: if center doesn't fit, move excess to overflow
     const centerWidth = this.measureZoneWidth(zones.center, sepWidth);
-    if (centerWidth > Math.max(0, availableForCenter)) {
+    if (centerWidth > Math.max(0, adjAvailableForCenter)) {
       // Move overflow center segments to secondary
       let fitWidth = 0;
       let cutoffIdx = 0;
       for (let i = 0; i < zones.center.length; i++) {
         const needed = zones.center[i].width + (i > 0 ? sepWidth : 0);
-        if (fitWidth + needed <= Math.max(0, availableForCenter)) {
+        if (fitWidth + needed <= Math.max(0, adjAvailableForCenter)) {
           fitWidth += needed;
           cutoffIdx = i + 1;
         } else {
@@ -236,10 +274,11 @@ export class FooterRenderer {
     const topContent = this.buildZoneRow(zones, width, sepDef, dimZoneSep);
 
     // Build secondary row with overflow + preset secondary segments
-    const allSecondary = [...overflowZones.center, ...secondaryRendered];
+    const allSecondary = [...overflowZones.left, ...overflowZones.center, ...overflowZones.right, ...secondaryRendered];
     const secondaryContent = this.buildContentFromParts(
       allSecondary.map(s => s.content),
       sepDef,
+      width,
     );
 
     this.lastLayoutResult = { topContent, secondaryContent };
@@ -334,7 +373,7 @@ export class FooterRenderer {
     }
 
     if (centerContent) {
-      if (leftContent) result += ` ${dimZoneSep} `;
+      if (leftContent && dimZoneSep) result += ` ${dimZoneSep} `;
       result += centerContent;
     }
 
@@ -348,20 +387,22 @@ export class FooterRenderer {
         result += " ".repeat(gap);
       }
 
-      if (centerContent || leftContent) {
-        // Only add zone separator if there's content before it
-        if (gap > visibleWidth(dimZoneSep) + 2) {
-          // Place zone sep right before right content
-          const sepPos = result.length - gap + Math.floor((gap - visibleWidth(dimZoneSep)) / 2);
-          // Simpler: just put it at the boundary
-        }
+      // If gap is negative, right zone doesn't fit — skip it to prevent overflow.
+      // truncateToWidth below is the safety net for any remaining excess.
+      if (gap > visibleWidth(dimZoneSep) + 2) {
+        // Enough room for zone separator aesthetic
       }
 
-      result += rightContent;
+      // Only append right zone if it fits within terminal width
+      if (gap >= 0) {
+        result += rightContent;
+      }
     }
 
     result += " "; // trailing margin
-    return result;
+
+    // Safety net: never exceed terminal width
+    return truncateToWidth(result, fullWidth);
   }
 
   /** Build content from parts array (raw strings) */
@@ -374,11 +415,17 @@ export class FooterRenderer {
 
   // ─── Helpers ─────────────────────────────────────────────────────────────
 
-  private buildContentFromParts(parts: string[], sepDef: { left: string }): string {
+  private buildContentFromParts(parts: string[], sepDef: { left: string }, maxWidth?: number): string {
     if (parts.length === 0) return "";
     const sep = sepDef.left;
     const sepAnsi = getFgAnsiCode(getPreset(this.presetName).colors ?? getDefaultColors(), "separator");
-    return " " + parts.join(` ${sepAnsi}${sep}${ANSI_RESET} `) + ANSI_RESET + " ";
+    const result = " " + parts.join(` ${sepAnsi}${sep}${ANSI_RESET} `) + ANSI_RESET + " ";
+    // Safety net: never exceed maxWidth if provided
+    if (maxWidth != null && maxWidth > 0) {
+      return truncateToWidth(result, maxWidth);
+    }
+    // If no maxWidth, truncate to a reasonable default to prevent unbounded output
+    return truncateToWidth(result, 200);
   }
 
   /** Map a segment ID to its group ID */
@@ -388,7 +435,7 @@ export class FooterRenderer {
     if (coreIds.includes(segId)) return "core";
 
     // Compactor segments
-    const compactorIds = ["session_events", "compactions", "tokens_saved", "compression_ratio", "indexed_docs", "sandbox_runs", "search_queries"];
+    const compactorIds = ["session_events", "compactions", "tokens_saved", "compression_ratio", "cocoindex_status", "sandbox_runs", "search_queries"];
     if (compactorIds.includes(segId)) return "compactor";
 
     // Memory segments

package/src/segments/compactor.ts

@@ -2,7 +2,7 @@
  * @pi-unipi/footer — Compactor segments
  *
  * Segment renderers for the compactor group: session_events, compactions,
- * tokens_saved, compression_ratio, indexed_docs, sandbox_runs, search_queries.
+ * tokens_saved, compression_ratio, cocoindex_status, sandbox_runs, search_queries.
  *
  * Data sourced from piContext.sessionManager (live session data).
  * Segments without a reliable data source are hidden (visible: false)
@@ -53,7 +53,7 @@ function renderSessionEventsSegment(ctx: FooterSegmentContext): RenderedSegment
   const count = events.length;
   if (count === 0) {
     if (isSegmentEnabled("compactor", "session_events")) {
-      return { content: mutedPlaceholder("📈 CMP 0"), visible: true };
+      return { content: mutedPlaceholder(withIcon("sessionEvents", "0")), visible: true };
     }
     return hidden();
   }
@@ -74,7 +74,7 @@ function renderCompactionsSegment(ctx: FooterSegmentContext): RenderedSegment {
   }
   if (compactionCount === 0) {
     if (isSegmentEnabled("compactor", "compactions")) {
-      return { content: mutedPlaceholder("🗜️ CMP 0"), visible: true };
+      return { content: mutedPlaceholder(withIcon("compactions", "0")), visible: true };
     }
     return hidden();
   }
@@ -84,15 +84,20 @@ function renderCompactionsSegment(ctx: FooterSegmentContext): RenderedSegment {
 }
 
 function renderTokensSavedSegment(ctx: FooterSegmentContext): RenderedSegment {
-  // Sum tokens saved from compaction events if available
+  // Sum tokens saved from compaction entries.
+  // Pi's CompactionEntry has tokensBefore (total tokens before compaction).
+  // Compaction keeps ~10-15% of context, so tokens saved ≈ tokensBefore × 0.85.
   const events = getSessionEvents(ctx);
   let tokensSaved = 0;
   let hasCompaction = false;
   for (const e of events) {
     if (!e || typeof e !== "object") continue;
-    if (e.type === "compaction" || e.type === "compacted") {
+    if (e.type === "compaction") {
       hasCompaction = true;
-      tokensSaved += Number(e.tokensSaved ?? e.tokens_saved ?? 0);
+      const tokensBefore = Number(e.tokensBefore ?? 0);
+      // Estimate tokens kept at ~12% (compaction summary + recent messages)
+      const tokensAfter = Math.round(tokensBefore * 0.12);
+      tokensSaved += Math.max(0, tokensBefore - tokensAfter);
     }
   }
   if (!hasCompaction || tokensSaved === 0) return hidden();
@@ -102,37 +107,67 @@ function renderTokensSavedSegment(ctx: FooterSegmentContext): RenderedSegment {
 }
 
 function renderCompressionRatioSegment(ctx: FooterSegmentContext): RenderedSegment {
-  // Check last compaction event for compression ratio
+  // Calculate compression ratio from Pi's CompactionEntry.tokensBefore.
+  // Compaction keeps ~12% of context, giving ~8:1 compression.
   const events = getSessionEvents(ctx);
-  let lastRatio: number | undefined;
+  let totalBefore = 0;
+  let totalAfter = 0;
   for (const e of events) {
     if (!e || typeof e !== "object") continue;
-    if (e.type === "compaction" || e.type === "compacted") {
-      const ratio = e.compressionRatio ?? e.compression_ratio;
-      if (ratio !== undefined && ratio !== null) {
-        lastRatio = Number(ratio);
+    if (e.type === "compaction") {
+      const before = Number(e.tokensBefore ?? 0);
+      if (before > 0) {
+        totalBefore += before;
+        totalAfter += Math.round(before * 0.12);
       }
     }
   }
-  if (lastRatio === undefined) return hidden();
+  if (totalBefore === 0 || totalAfter === 0) return hidden();
 
-  const content = withIcon("compressionRatio", `${lastRatio.toFixed(1)}x`);
+  const ratio = totalBefore / totalAfter;
+  const content = withIcon("compressionRatio", `${ratio.toFixed(1)}x`);
   return { content: applyColor("compactor", content, ctx.theme, ctx.colors), visible: true };
 }
 
-function renderIndexedDocsSegment(_ctx: FooterSegmentContext): RenderedSegment {
-  // No reliable data source for indexed docs count
+function renderCocoindexStatusSegment(_ctx: FooterSegmentContext): RenderedSegment {
+  // CocoIndex status — would need to query cocoindex bridge at render time.
+  // For now, hidden. Use /unipi:cocoindex-status for live status.
   return hidden();
 }
 
-function renderSandboxRunsSegment(_ctx: FooterSegmentContext): RenderedSegment {
-  // No reliable data source for sandbox run count
-  return hidden();
+function renderSandboxRunsSegment(ctx: FooterSegmentContext): RenderedSegment {
+  // Count sandbox events from session manager branch
+  const events = getSessionEvents(ctx);
+  let sandboxCount = 0;
+  for (const e of events) {
+    if (!e || typeof e !== "object") continue;
+    // Count tool calls that are sandbox/execute tools
+    const name = String((e as any).name ?? "").toLowerCase();
+    if (name.includes("sandbox") || name.includes("ctx_execute") || name === "execute") {
+      sandboxCount++;
+    }
+  }
+  if (sandboxCount === 0) return hidden();
+
+  const content = withIcon("sandboxRuns", `${sandboxCount}`);
+  return { content: applyColor("compactor", content, ctx.theme, ctx.colors), visible: true };
 }
 
-function renderSearchQueriesSegment(_ctx: FooterSegmentContext): RenderedSegment {
-  // No reliable data source for search query count
-  return hidden();
+function renderSearchQueriesSegment(ctx: FooterSegmentContext): RenderedSegment {
+  // Count search events from session manager branch
+  const events = getSessionEvents(ctx);
+  let searchCount = 0;
+  for (const e of events) {
+    if (!e || typeof e !== "object") continue;
+    const name = String((e as any).name ?? "").toLowerCase();
+    if (name.includes("search") || name.includes("ctx_search")) {
+      searchCount++;
+    }
+  }
+  if (searchCount === 0) return hidden();
+
+  const content = withIcon("searchQueries", `${searchCount}`);
+  return { content: applyColor("compactor", content, ctx.theme, ctx.colors), visible: true };
 }
 
 export const COMPACTOR_SEGMENTS: FooterSegment[] = [
@@ -140,7 +175,7 @@ export const COMPACTOR_SEGMENTS: FooterSegment[] = [
   { id: "compactions", label: "Compactions", shortLabel: "CMP", description: "Number of context compactions", zone: "center", icon: "", render: renderCompactionsSegment, defaultShow: true },
   { id: "tokens_saved", label: "Tokens Saved", shortLabel: "SVD", description: "Tokens saved by compaction", zone: "center", icon: "", render: renderTokensSavedSegment, defaultShow: true },
   { id: "compression_ratio", label: "Compression Ratio", shortLabel: "RAT", description: "Last compaction compression ratio", zone: "center", icon: "", render: renderCompressionRatioSegment, defaultShow: false },
-  { id: "indexed_docs", label: "Indexed Docs", shortLabel: "IDX", description: "Number of indexed documents", zone: "center", icon: "", render: renderIndexedDocsSegment, defaultShow: false },
+  { id: "cocoindex_status", label: "CocoIndex", shortLabel: "CIDX", description: "CocoIndex indexing status", zone: "center", icon: "", render: renderCocoindexStatusSegment, defaultShow: false },
   { id: "sandbox_runs", label: "Sandbox Runs", shortLabel: "SBX", description: "Number of sandbox code runs", zone: "center", icon: "", render: renderSandboxRunsSegment, defaultShow: false },
   { id: "search_queries", label: "Search Queries", shortLabel: "QRY", description: "Number of search queries", zone: "center", icon: "", render: renderSearchQueriesSegment, defaultShow: false },
 ];

package/src/segments/core.ts

@@ -176,7 +176,8 @@ function renderCostSegment(ctx: FooterSegmentContext): RenderedSegment {
   if (!stats.cost && !usingSubscription) return { content: "", visible: false };
 
   const costDisplay = usingSubscription ? "(sub)" : `$${stats.cost.toFixed(2)}`;
-  return { content: color(ctx, "cost", costDisplay), visible: true };
+  const content = withIcon("cost", costDisplay);
+  return { content: color(ctx, "cost", content), visible: true };
 }
 
 function renderTokensSegment(variant: "total" | "in" | "out"): (ctx: FooterSegmentContext) => RenderedSegment {

package/src/segments/kanboard.ts

@@ -22,7 +22,7 @@ function withIcon(segmentId: string, text: string): string {
  */
 function getKanboardData(): Record<string, unknown> | null {
   try {
-    const registry = (globalThis as Record<string, unknown>).__unipi_kanboard_registry;
+    const registry = globalThis.__unipi_kanboard_registry;
     if (!registry || typeof registry !== "object") return null;
     return registry as Record<string, unknown>;
   } catch {
@@ -35,7 +35,7 @@ function renderDocsCountSegment(ctx: FooterSegmentContext): RenderedSegment {
   const value = kb?.docsCount;
   if (value === undefined || value === null) {
     if (isSegmentEnabled("kanboard", "docs_count")) {
-      return { content: mutedPlaceholder("KB 0"), visible: true };
+      return { content: mutedPlaceholder(withIcon("docsCount", "0")), visible: true };
     }
     return { content: "", visible: false };
   }
@@ -48,7 +48,7 @@ function renderTasksDoneSegment(ctx: FooterSegmentContext): RenderedSegment {
   const value = kb?.tasksDone;
   if (value === undefined || value === null) {
     if (isSegmentEnabled("kanboard", "tasks_done")) {
-      return { content: mutedPlaceholder("KB 0"), visible: true };
+      return { content: mutedPlaceholder(withIcon("tasksDone", "0")), visible: true };
     }
     return { content: "", visible: false };
   }
@@ -61,7 +61,7 @@ function renderTasksTotalSegment(ctx: FooterSegmentContext): RenderedSegment {
   const value = kb?.tasksTotal;
   if (value === undefined || value === null) {
     if (isSegmentEnabled("kanboard", "tasks_total")) {
-      return { content: mutedPlaceholder("KB 0"), visible: true };
+      return { content: mutedPlaceholder(withIcon("tasksTotal", "0")), visible: true };
     }
     return { content: "", visible: false };
   }

package/src/segments/mcp.ts

@@ -25,14 +25,6 @@ interface McpStats {
   toolsTotal?: number;
 }
 
-/** Shape of the global escape-hatch object */
-interface GlobalMcpStats extends McpStats {}
-
-declare global {
-  // eslint-disable-next-line no-var
-  var __unipi_mcp_stats: GlobalMcpStats | undefined;
-}
-
 function withIcon(segmentId: string, text: string): string {
   const icon = getIcon(segmentId);
   return icon ? `${icon} ${text}` : text;
@@ -67,7 +59,7 @@ function renderServersTotalSegment(ctx: FooterSegmentContext): RenderedSegment {
   const stats = getMcpStats(ctx);
   if (!hasUsefulValue(stats.serversTotal)) {
     if (isSegmentEnabled("mcp", "servers_total")) {
-      return { content: mutedPlaceholder("🖥️ MCP 0"), visible: true };
+      return { content: mutedPlaceholder(withIcon("serversTotal", "0")), visible: true };
     }
     return { content: "", visible: false };
   }
@@ -80,7 +72,7 @@ function renderServersActiveSegment(ctx: FooterSegmentContext): RenderedSegment
   if (!hasUsefulValue(stats.serversActive)) {
     if (isSegmentEnabled("mcp", "servers_active")) {
       const total = stats.serversTotal ?? 0;
-      return { content: mutedPlaceholder(`🖥️ MCP ${total}/0`), visible: true };
+      return { content: mutedPlaceholder(withIcon("serversActive", `${total}/0`)), visible: true };
     }
     return { content: "", visible: false };
   }
@@ -92,7 +84,7 @@ function renderToolsTotalSegment(ctx: FooterSegmentContext): RenderedSegment {
   const stats = getMcpStats(ctx);
   if (!hasUsefulValue(stats.toolsTotal)) {
     if (isSegmentEnabled("mcp", "tools_total")) {
-      return { content: mutedPlaceholder("🖥️ MCP 0"), visible: true };
+      return { content: mutedPlaceholder(withIcon("toolsTotal", "0")), visible: true };
     }
     return { content: "", visible: false };
   }

package/src/segments/memory.ts

@@ -51,8 +51,7 @@ interface InfoRegistryLike {
  */
 function getInfoRegistryMemoryData(): InfoMemoryData | null {
   try {
-    const g = globalThis as Record<string, unknown>;
-    const registry = g.__unipi_info_registry;
+    const registry = globalThis.__unipi_info_registry;
     if (!registry || typeof registry !== "object") return null;
 
     // The info registry exposes getCachedData(groupId) synchronously
@@ -83,7 +82,7 @@ function renderProjectCountSegment(ctx: FooterSegmentContext): RenderedSegment {
   const counts = getMemoryCounts();
   if (counts.project === null) {
     if (isSegmentEnabled("memory", "project_count")) {
-      return { content: mutedPlaceholder("🧠 MEM 0"), visible: true };
+      return { content: mutedPlaceholder(withIcon("projectCount", "0")), visible: true };
     }
     return { content: "", visible: false };
   }

package/src/segments/notify.ts

@@ -26,7 +26,7 @@ function renderPlatformsEnabledSegment(ctx: FooterSegmentContext): RenderedSegme
   const platforms = data.platforms as string[] | undefined;
   if (!platforms || platforms.length === 0) {
     if (isSegmentEnabled("notify", "platforms_enabled")) {
-      return { content: mutedPlaceholder("NTF OFF"), visible: true };
+      return { content: mutedPlaceholder(withIcon("platformsEnabled", "OFF")), visible: true };
     }
     return { content: "", visible: false };
   }
@@ -40,7 +40,7 @@ function renderLastSentSegment(ctx: FooterSegmentContext): RenderedSegment {
   const timestamp = data.timestamp as string | undefined;
   if (!timestamp) {
     if (isSegmentEnabled("notify", "last_sent")) {
-      return { content: mutedPlaceholder("NTF 0"), visible: true };
+      return { content: mutedPlaceholder(withIcon("lastSent", "0")), visible: true };
     }
     return { content: "", visible: false };
   }

package/src/segments/ralph.ts

@@ -51,7 +51,8 @@ function renderActiveLoopsSegment(ctx: FooterSegmentContext): RenderedSegment {
   if (!active && !name && iteration === undefined) {
     // Show muted placeholder when enabled but no data
     if (isSegmentEnabled("ralph", "active_loops")) {
-      return { content: mutedPlaceholder("🔁 RL OFF"), visible: true };
+      const ralphIcon = getIcon("activeLoops");
+      return { content: mutedPlaceholder(`${ralphIcon} OFF`), visible: true };
     }
     return { content: "", visible: false };
   }
@@ -81,9 +82,7 @@ function renderTotalIterationsSegment(ctx: FooterSegmentContext): RenderedSegmen
   const lastIteration = data.lastIteration as Record<string, unknown> | undefined;
   const iteration = data.iteration ?? lastIteration?.iteration;
   if (iteration === undefined || iteration === null) {
-    if (isSegmentEnabled("ralph", "total_iterations")) {
-      return { content: mutedPlaceholder("🔁 RL 0"), visible: true };
-    }
+    // No data — hide to avoid duplicating active_loops placeholder
     return { content: "", visible: false };
   }
   const maxIterations = data.maxIterations;
@@ -101,15 +100,14 @@ function renderLoopStatusSegment(ctx: FooterSegmentContext): RenderedSegment {
   const status = data.status as string | undefined;
   const name = data.name as string | undefined;
   if (!status && !name) {
-    if (isSegmentEnabled("ralph", "loop_status")) {
-      return { content: mutedPlaceholder("🔁 RL OFF"), visible: true };
-    }
+    // No data — hide to avoid duplicating active_loops placeholder
     return { content: "", visible: false };
   }
 
   const ralphIcon = getIcon("activeLoops");
   const dot = status === "active" ? GREEN_DOT : status === "completed" ? GREEN_DOT : RED_DOT;
-  const statusIcon = status === "active" ? "▶" : status === "paused" ? "⏸" : status === "completed" ? "✓" : "";
+  // Small geometric status indicators (▶ ⏸ ✓) work in all icon styles
+  const statusIcon = status === "active" ? "\u25B6" : status === "paused" ? "\u23F8" : status === "completed" ? "\u2713" : "";
   const display = name ? `${statusIcon} ${name}` : `${statusIcon}`;
 
   const active = status === "active" || status === "completed";

package/src/segments/workflow.ts

@@ -75,7 +75,8 @@ function renderCurrentCommandSegment(ctx: FooterSegmentContext): RenderedSegment
     return { content: applyColor("workflow", content, ctx.theme, ctx.colors), visible: true };
   }
 
-  const statusPrefix = active ? "▶" : "✓";
+  // Small geometric status indicators work in all icon styles
+  const statusPrefix = active ? "\u25B6" : "\u2713";
   const semanticColor = getWorkflowSemanticColor(command);
   const content = `${workflowIcon} ${statusPrefix} ${command}`;
   return { content: applyColor(semanticColor, content, ctx.theme, ctx.colors), visible: true };

package/src/tui/settings-tui.ts

@@ -9,7 +9,7 @@
  * Uses pi-tui SettingsList for vim/arrow keybinding support.
  */
 
-import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
+import type { ExtensionAPI, ExtensionCommandContext } from "@mariozechner/pi-coding-agent";
 import { SettingsList, type SettingItem, type SettingsListTheme } from "@mariozechner/pi-tui";
 import { loadFooterSettings, saveFooterSettings } from "../config.js";
 import { PRESET_NAMES } from "../presets.js";
@@ -30,6 +30,7 @@ const SECTION_LABELS: Record<Section, string> = {
 
 const SEPARATOR_STYLES: SeparatorStyle[] = ["powerline", "powerline-thin", "slash", "pipe", "dot", "ascii"];
 const ICON_STYLES: IconStyle[] = ["nerd", "emoji", "text"];
+const ZONE_SEPARATOR_OPTIONS = ["│", "╎", "·", "─", "none"];
 
 // ─── Theme for SettingsList ────────────────────────────────────────────
 
@@ -65,9 +66,9 @@ function visibleWidth(text: string): number {
 
 // ─── Show the footer settings overlay ──────────────────────────────────
 
-export function showFooterSettings(ctx: any, groups: FooterGroup[], onSettingsChanged?: () => void): void {
-  ctx.ui.custom(
-    (tui: any, _theme: any, _keybindings: any, done: (result: void) => void) => {
+export function showFooterSettings(ctx: ExtensionCommandContext, groups: FooterGroup[], onSettingsChanged?: () => void): void {
+  ctx.ui.custom<void>(
+    (tui, _theme, _keybindings, done) => {
       const overlay = new FooterSettingsOverlay(groups, onSettingsChanged);
       overlay.onClose = () => done();
 
@@ -85,8 +86,7 @@ export function showFooterSettings(ctx: any, groups: FooterGroup[], onSettingsCh
     {
       overlay: true,
       overlayOptions: () => ({
-        verticalAlign: "center",
-        horizontalAlign: "center",
+        anchor: "center" as const,
       }),
     },
   ).catch(() => {
@@ -251,6 +251,13 @@ class FooterSettingsOverlay {
         currentValue: this.settings.iconStyle,
         values: ICON_STYLES,
       },
+      {
+        id: "zoneSeparator",
+        label: "Zone Separator",
+        description: "Divider between zones (left · center · right)",
+        currentValue: this.settings.zoneSeparator ?? "│",
+        values: ZONE_SEPARATOR_OPTIONS,
+      },
       {
         id: "showFullLabels",
         label: "Full Labels",
@@ -371,6 +378,9 @@ class FooterSettingsOverlay {
         this.settings.iconStyle = newValue as IconStyle;
         setIconStyle(newValue as IconStyle);
         break;
+      case "zoneSeparator":
+        this.settings.zoneSeparator = newValue;
+        break;
       case "showFullLabels":
         this.settings.showFullLabels = newValue === "on";
         // Sync with labels section
@@ -420,7 +430,16 @@ class FooterSettingsOverlay {
   // ─── Section navigation ────────────────────────────────────────────
 
   private getFocusedGroupId(): string | null {
-    return this.selectedGroupId ?? this.groups[0]?.id ?? null;
+    if (this.selectedGroupId) return this.selectedGroupId;
+    // Access SettingsList internal state — it doesn't expose a getSelectedId() method
+    const list = this.groupList as unknown as {
+      selectedIndex: number;
+      items: SettingItem[];
+      filteredItems: SettingItem[];
+      searchEnabled: boolean;
+    };
+    const displayItems = list.searchEnabled ? list.filteredItems : list.items;
+    return displayItems[list.selectedIndex]?.id ?? null;
   }
 
   private enterSegmentsMode(groupId: string): void {