@pi-unipi/footer 0.1.3 → 2.0.0

package/src/rendering/theme.ts

@@ -8,39 +8,66 @@
 import type { Theme, ThemeColor } from "@mariozechner/pi-coding-agent";
 import type { ColorScheme, ColorValue, SemanticColor, ThemeLike } from "../types.js";
 
+/** Wrap text in dim ANSI codes for muted placeholder display */
+export function mutedPlaceholder(text: string): string {
+  return `\x1b[2m${text}\x1b[0m`;
+}
+
 /** Default semantic-to-theme-color mapping */
-const DEFAULT_COLOR_MAP: Record<SemanticColor, ThemeColor> = {
-  model: "accent",
+const DEFAULT_COLOR_MAP: Record<SemanticColor, ThemeColor | `#${string}`> = {
+  // ── Model & Identity (Left zone) ──
+  model: "#c792ea",           // Soft purple — model name
   path: "text",
-  git: "accent",
-  compactor: "muted",
-  memory: "accent",
-  mcp: "success",
-  ralph: "warning",
-  ralphOn: "success",
-  ralphOff: "error",
-  workflow: "accent",
-  workflowBrainstorm: "warning",
-  workflowPlan: "success",
-  workflowWork: "accent",
-  workflowReview: "muted",
-  workflowAuto: "thinkingHigh",
-  workflowOther: "dim",
-  kanboard: "dim",
-  notify: "muted",
+  git: "#82cc6f",            // Green (clean default)
+  gitClean: "#82cc6f",       // Green — clean branch
+  gitDirty: "#e5c07b",       // Amber — dirty branch
+  session: "#61afef",        // Blue — session name
+  worktree: "#61afef",       // Blue — worktree indicator
+  // ── Workflow (Left zone) ──
+  workflow: "#c792ea",       // Purple (default)
+  workflowNone: "#4a6a7a",   // Muted teal — idle
+  workflowBrainstorm: "#e06c75", // Red
+  workflowPlan: "#d19a66",   // Orange
+  workflowWork: "#e5c07b",   // Yellow
+  workflowReview: "#82cc6f", // Green
+  workflowAuto: "#c792ea",   // Purple
+  workflowDebug: "#e06c75",  // Red
+  workflowChoreExec: "#d19a66", // Orange
+  workflowOther: "#c792ea",  // Purple
+  // ── TPS tiers (Center zone) ──
+  tpsSlow: "#e06c75",        // Red — < 30 t/s
+  tpsModerate: "#e5c07b",    // Amber — 30-50 t/s
+  tpsGood: "#56d4bc",        // Teal — 50-100 t/s
+  tpsFast: "#82cc6f",        // Green — 100-200 t/s
+  tpsBlazing: "#c792ea",     // Purple — > 200 t/s
+  tpsIdle: "#4a6a7a",        // Muted teal — session avg when idle
+  // ── Metrics (Center zone) ──
+  compactor: "#56b6c2",      // Cyan — compaction stats
+  memory: "#61afef",         // Blue — memory count
+  mcp: "#82cc6f",            // Green — MCP status
+  ralph: "#e5c07b",          // Amber — ralph loops
+  ralphOn: "#82cc6c",        // Green — ralph active
+  ralphOff: "#e06c75",       // Red — ralph inactive
+  kanboard: "#c678dd",       // Purple — kanboard
+  notify: "#56b6c2",         // Cyan — notifications
+  context: "muted",          // Theme token for OK context
+  contextWarn: "#e5c07b",    // Amber — context 70-90%
+  contextError: "#e06c75",   // Red — context > 90%
+  cost: "#d19a66",           // Gold — cost
+  tokens: "#abb2bf",         // Silver — token counts
+  // ── Time (Right zone) ──
+  clock: "#abb2bf",          // Silver — wall clock
+  duration: "#61afef",       // Blue — session duration
+  // ── Thinking levels ──
+  thinking: "#61afef",
+  thinkingMinimal: "#56b6c2", // Cyan
+  thinkingLow: "#61afef",    // Blue
+  thinkingMedium: "#c792ea", // Purple
+  thinkingHigh: "#d19a66",   // Gold
+  thinkingXhigh: "#e06c75",  // Red
+  // ── UI chrome ──
   separator: "dim",
   border: "dim",
-  context: "muted",
-  contextWarn: "warning",
-  contextError: "error",
-  cost: "text",
-  tokens: "muted",
-  thinking: "accent",
-  thinkingMinimal: "thinkingMinimal",
-  thinkingLow: "thinkingLow",
-  thinkingMedium: "thinkingMedium",
-  thinkingHigh: "thinkingHigh",
-  thinkingXhigh: "thinkingXhigh",
 };
 
 /**

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)
@@ -10,8 +10,9 @@
  */
 
 import type { FooterSegment, FooterSegmentContext, RenderedSegment } from "../types.js";
-import { applyColor } from "../rendering/theme.js";
+import { applyColor, mutedPlaceholder } from "../rendering/theme.js";
 import { getIcon } from "../rendering/icons.js";
+import { isSegmentEnabled } from "../config.js";
 
 function withIcon(segmentId: string, text: string): string {
   const icon = getIcon(segmentId);
@@ -50,7 +51,12 @@ function getSessionEvents(ctx: FooterSegmentContext): any[] {
 function renderSessionEventsSegment(ctx: FooterSegmentContext): RenderedSegment {
   const events = getSessionEvents(ctx);
   const count = events.length;
-  if (count === 0) return hidden();
+  if (count === 0) {
+    if (isSegmentEnabled("compactor", "session_events")) {
+      return { content: mutedPlaceholder(withIcon("sessionEvents", "0")), visible: true };
+    }
+    return hidden();
+  }
 
   const content = withIcon("sessionEvents", `${count}`);
   return { content: applyColor("compactor", content, ctx.theme, ctx.colors), visible: true };
@@ -66,22 +72,32 @@ function renderCompactionsSegment(ctx: FooterSegmentContext): RenderedSegment {
       compactionCount++;
     }
   }
-  if (compactionCount === 0) return hidden();
+  if (compactionCount === 0) {
+    if (isSegmentEnabled("compactor", "compactions")) {
+      return { content: mutedPlaceholder(withIcon("compactions", "0")), visible: true };
+    }
+    return hidden();
+  }
 
   const content = withIcon("compactions", `${compactionCount}`);
   return { content: applyColor("compactor", content, ctx.theme, ctx.colors), visible: true };
 }
 
 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();
@@ -91,45 +107,75 @@ 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[] = [
-  { id: "session_events", label: "Session Events", icon: "", render: renderSessionEventsSegment, defaultShow: true },
-  { id: "compactions", label: "Compactions", icon: "", render: renderCompactionsSegment, defaultShow: true },
-  { id: "tokens_saved", label: "Tokens Saved", icon: "", render: renderTokensSavedSegment, defaultShow: true },
-  { id: "compression_ratio", label: "Compression Ratio", icon: "", render: renderCompressionRatioSegment, defaultShow: false },
-  { id: "indexed_docs", label: "Indexed Docs", icon: "", render: renderIndexedDocsSegment, defaultShow: false },
-  { id: "sandbox_runs", label: "Sandbox Runs", icon: "", render: renderSandboxRunsSegment, defaultShow: false },
-  { id: "search_queries", label: "Search Queries", icon: "", render: renderSearchQueriesSegment, defaultShow: false },
+  { id: "session_events", label: "Session Events", shortLabel: "EVT", description: "Number of session events", zone: "center", icon: "", render: renderSessionEventsSegment, defaultShow: true },
+  { 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: "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

@@ -10,6 +10,7 @@ import { hostname as osHostname } from "node:os";
 import type { FooterSegment, FooterSegmentContext, RenderedSegment, SemanticColor } from "../types.js";
 import { applyColor } from "../rendering/theme.js";
 import { getIcon } from "../rendering/icons.js";
+import { tpsTracker } from "../tps-tracker.js";
 
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
@@ -130,8 +131,10 @@ function renderGitSegment(ctx: FooterSegmentContext): RenderedSegment {
   const branch = footerData?.getGitBranch?.() ?? null;
   if (!branch) return { content: "", visible: false };
 
+  const isDirty = footerData?.getGitDirty?.() ?? false;
+  const semanticColor: SemanticColor = isDirty ? "gitDirty" : "gitClean";
   const content = withIcon("git", branch);
-  return { content: color(ctx, "git", content), visible: true };
+  return { content: color(ctx, semanticColor, content), visible: true };
 }
 
 function renderContextPctSegment(ctx: FooterSegmentContext): RenderedSegment {
@@ -173,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 {
@@ -206,7 +210,7 @@ function renderSessionSegment(ctx: FooterSegmentContext): RenderedSegment {
   const sessionId = (piCtx?.sessionManager as any)?.getSessionId?.();
   const display = sessionId?.slice(0, 8) || "new";
   const content = withIcon("session", display);
-  return { content: color(ctx, "model", content), visible: true };
+  return { content: color(ctx, "session", content), visible: true };
 }
 
 function renderHostnameSegment(_ctx: FooterSegmentContext): RenderedSegment {
@@ -224,19 +228,124 @@ function renderTimeSegment(ctx: FooterSegmentContext): RenderedSegment {
   return { content, visible: true };
 }
 
+// ─── TPS tier color function ────────────────────────────────────────────────
+
+function getTpsSemanticColor(tps: number): SemanticColor {
+  if (tps > 200) return "tpsBlazing";
+  if (tps > 100) return "tpsFast";
+  if (tps > 50) return "tpsGood";
+  if (tps > 30) return "tpsModerate";
+  return "tpsSlow";
+}
+
+function renderTpsSegment(ctx: FooterSegmentContext): RenderedSegment {
+  const streaming = tpsTracker.isStreaming();
+  const liveTps = tpsTracker.getLiveTps();
+  const avgTps = tpsTracker.getSessionAvgTps();
+
+  // No data yet — hide
+  if (!tpsTracker.getTotalOutput()) return { content: "", visible: false };
+
+  const icon = getIcon("tps");
+
+  if (streaming && liveTps > 0) {
+    // Active generation: show live rate + avg
+    const liveDisplay = Math.round(liveTps);
+    const avgDisplay = Math.round(avgTps);
+    const liveText = `\u2191 ${liveDisplay} T/S`;
+    const avgText = `AVG ${avgDisplay}`;
+    const liveColored = applyColor(getTpsSemanticColor(liveTps), liveText, ctx.theme, ctx.colors);
+    const avgColored = applyColor("tpsIdle", avgText, ctx.theme, ctx.colors);
+    const content = icon ? `${icon} ${liveColored} \u00b7 ${avgColored}` : `${liveColored} \u00b7 ${avgColored}`;
+    return { content, visible: true };
+  }
+
+  // Idle: show session average
+  const avgDisplay = Math.round(avgTps);
+  const avgText = `AVG ${avgDisplay} T/S`;
+  const avgColored = applyColor("tpsIdle", avgText, ctx.theme, ctx.colors);
+  const content = icon ? `${icon} ${avgColored}` : avgColored;
+  return { content, visible: true };
+}
+
+function renderClockSegment(ctx: FooterSegmentContext): RenderedSegment {
+  const now = new Date();
+  const h = now.getHours().toString().padStart(2, "0");
+  const m = now.getMinutes().toString().padStart(2, "0");
+  const s = now.getSeconds().toString().padStart(2, "0");
+  const timeStr = `${h}:${m}:${s}`;
+  const content = withIcon("clock", timeStr);
+  return { content: color(ctx, "clock", content), visible: true };
+}
+
+function renderDurationSegment(ctx: FooterSegmentContext): RenderedSegment {
+  // Derive session duration from sessionManager
+  const piCtx = ctx.piContext as Record<string, unknown> | undefined;
+  const sessionStart = (piCtx?.sessionManager as any)?.getSessionStartTime?.();
+  if (!sessionStart) {
+    // Fallback: show current time segment style
+    return { content: "", visible: false };
+  }
+
+  const elapsedMs = Date.now() - sessionStart;
+  const totalSeconds = Math.floor(elapsedMs / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  let display: string;
+  if (hours > 0) {
+    display = `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  } else {
+    display = `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  }
+
+  const content = withIcon("duration", display);
+  return { content: color(ctx, "duration", content), visible: true };
+}
+
+// ─── Thinking level ──────────────────────────────────────────────────────────
+
+/** Map thinking level to semantic color */
+function getThinkingSemanticColor(level: string | undefined): SemanticColor {
+  switch (level) {
+    case "minimal": return "thinkingMinimal";
+    case "low": return "thinkingLow";
+    case "medium": return "thinkingMedium";
+    case "high": return "thinkingHigh";
+    case "xhigh": return "thinkingXhigh";
+    default: return "thinking";
+  }
+}
+
+function renderThinkingLevelSegment(ctx: FooterSegmentContext): RenderedSegment {
+  const piCtx = ctx.piContext as Record<string, unknown> | undefined;
+  const model = piCtx?.model as Record<string, unknown> | undefined;
+  const thinkingLevel = model?.thinkingLevel as string | undefined;
+
+  if (!thinkingLevel || thinkingLevel === "off") return { content: "", visible: false };
+
+  const semanticColor = getThinkingSemanticColor(thinkingLevel);
+  const content = withIcon("thinkingLevel", thinkingLevel);
+  return { content: color(ctx, semanticColor, content), visible: true };
+}
+
 // ─── Core segments array ────────────────────────────────────────────────────
 
 export const CORE_SEGMENTS: FooterSegment[] = [
-  { id: "model", label: "Model", icon: "", render: renderModelSegment, defaultShow: true },
-  { id: "api_state", label: "WEB", icon: "", render: renderApiStateSegment, defaultShow: true },
-  { id: "tool_count", label: "Tool Count", icon: "", render: renderToolCountSegment, defaultShow: true },
-  { id: "git", label: "Git", icon: "", render: renderGitSegment, defaultShow: true },
-  { id: "context_pct", label: "Context %", icon: "", render: renderContextPctSegment, defaultShow: true },
-  { id: "cost", label: "Cost", icon: "", render: renderCostSegment, defaultShow: true },
-  { id: "tokens_total", label: "Tokens Total", icon: "", render: renderTokensSegment("total"), defaultShow: false },
-  { id: "tokens_in", label: "Tokens In", icon: "", render: renderTokensSegment("in"), defaultShow: false },
-  { id: "tokens_out", label: "Tokens Out", icon: "", render: renderTokensSegment("out"), defaultShow: false },
-  { id: "session", label: "Session", icon: "", render: renderSessionSegment, defaultShow: false },
-  { id: "hostname", label: "Hostname", icon: "", render: renderHostnameSegment, defaultShow: false },
-  { id: "time", label: "Time", icon: "", render: renderTimeSegment, defaultShow: false },
+  { id: "model", label: "Model", shortLabel: "MDL", description: "Current model name", zone: "left", icon: "", render: renderModelSegment, defaultShow: true },
+  { id: "api_state", label: "API", shortLabel: "API", description: "API connection state", zone: "left", icon: "", render: renderApiStateSegment, defaultShow: true },
+  { id: "tool_count", label: "Tool Count", shortLabel: "TLS", description: "Number of tools available", zone: "left", icon: "", render: renderToolCountSegment, defaultShow: true },
+  { id: "git", label: "Git", shortLabel: "GIT", description: "Current git branch + dirty/clean status", zone: "left", icon: "", render: renderGitSegment, defaultShow: true },
+  { id: "tps", label: "TPS", shortLabel: "TPS", description: "Tokens per second \u2014 live during generation", zone: "center", icon: "", render: renderTpsSegment, defaultShow: true },
+  { id: "context_pct", label: "Context %", shortLabel: "CTX", description: "Context window usage percentage", zone: "center", icon: "", render: renderContextPctSegment, defaultShow: true },
+  { id: "cost", label: "Cost", shortLabel: "CST", description: "Session cost in USD", zone: "center", icon: "", render: renderCostSegment, defaultShow: true },
+  { id: "tokens_total", label: "Tokens Total", shortLabel: "TOK", description: "Total tokens used this session", zone: "center", icon: "", render: renderTokensSegment("total"), defaultShow: false },
+  { id: "tokens_in", label: "Tokens In", shortLabel: "TIN", description: "Input tokens consumed", zone: "center", icon: "", render: renderTokensSegment("in"), defaultShow: false },
+  { id: "tokens_out", label: "Tokens Out", shortLabel: "TOUT", description: "Output tokens generated", zone: "center", icon: "", render: renderTokensSegment("out"), defaultShow: false },
+  { id: "session", label: "Session", shortLabel: "SES", description: "Session identifier", zone: "left", icon: "", render: renderSessionSegment, defaultShow: false },
+  { id: "hostname", label: "Hostname", shortLabel: "HST", description: "Machine hostname", zone: "left", icon: "", render: renderHostnameSegment, defaultShow: false },
+  { id: "clock", label: "Clock", shortLabel: "CLK", description: "Current wall time (HH:MM:SS)", zone: "right", icon: "", render: renderClockSegment, defaultShow: true },
+  { id: "duration", label: "Duration", shortLabel: "DUR", description: "Session duration", zone: "right", icon: "", render: renderDurationSegment, defaultShow: true },
+  { id: "thinking_level", label: "Thinking", shortLabel: "THK", description: "Current model thinking level", zone: "center", icon: "", render: renderThinkingLevelSegment, defaultShow: false },
 ];

package/src/segments/kanboard.ts

@@ -7,8 +7,9 @@
  */
 
 import type { FooterSegment, FooterSegmentContext, RenderedSegment } from "../types.js";
-import { applyColor } from "../rendering/theme.js";
+import { applyColor, mutedPlaceholder } from "../rendering/theme.js";
 import { getIcon } from "../rendering/icons.js";
+import { isSegmentEnabled } from "../config.js";
 
 function withIcon(segmentId: string, text: string): string {
   const icon = getIcon(segmentId);
@@ -21,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 {
@@ -32,7 +33,12 @@ function getKanboardData(): Record<string, unknown> | null {
 function renderDocsCountSegment(ctx: FooterSegmentContext): RenderedSegment {
   const kb = getKanboardData();
   const value = kb?.docsCount;
-  if (value === undefined || value === null) return { content: "", visible: false };
+  if (value === undefined || value === null) {
+    if (isSegmentEnabled("kanboard", "docs_count")) {
+      return { content: mutedPlaceholder(withIcon("docsCount", "0")), visible: true };
+    }
+    return { content: "", visible: false };
+  }
   const content = withIcon("docsCount", `${value}`);
   return { content: applyColor("kanboard", content, ctx.theme, ctx.colors), visible: true };
 }
@@ -40,7 +46,12 @@ function renderDocsCountSegment(ctx: FooterSegmentContext): RenderedSegment {
 function renderTasksDoneSegment(ctx: FooterSegmentContext): RenderedSegment {
   const kb = getKanboardData();
   const value = kb?.tasksDone;
-  if (value === undefined || value === null) return { content: "", visible: false };
+  if (value === undefined || value === null) {
+    if (isSegmentEnabled("kanboard", "tasks_done")) {
+      return { content: mutedPlaceholder(withIcon("tasksDone", "0")), visible: true };
+    }
+    return { content: "", visible: false };
+  }
   const content = withIcon("tasksDone", `${value}`);
   return { content: applyColor("kanboard", content, ctx.theme, ctx.colors), visible: true };
 }
@@ -48,7 +59,12 @@ function renderTasksDoneSegment(ctx: FooterSegmentContext): RenderedSegment {
 function renderTasksTotalSegment(ctx: FooterSegmentContext): RenderedSegment {
   const kb = getKanboardData();
   const value = kb?.tasksTotal;
-  if (value === undefined || value === null) return { content: "", visible: false };
+  if (value === undefined || value === null) {
+    if (isSegmentEnabled("kanboard", "tasks_total")) {
+      return { content: mutedPlaceholder(withIcon("tasksTotal", "0")), visible: true };
+    }
+    return { content: "", visible: false };
+  }
   const content = withIcon("tasksTotal", `${value}`);
   return { content: applyColor("kanboard", content, ctx.theme, ctx.colors), visible: true };
 }
@@ -68,8 +84,8 @@ function renderTaskPctSegment(ctx: FooterSegmentContext): RenderedSegment {
 }
 
 export const KANBOARD_SEGMENTS: FooterSegment[] = [
-  { id: "docs_count", label: "Docs Count", icon: "", render: renderDocsCountSegment, defaultShow: true },
-  { id: "tasks_done", label: "Tasks Done", icon: "", render: renderTasksDoneSegment, defaultShow: true },
-  { id: "tasks_total", label: "Tasks Total", icon: "", render: renderTasksTotalSegment, defaultShow: true },
-  { id: "task_pct", label: "Task %", icon: "", render: renderTaskPctSegment, defaultShow: true },
+  { id: "docs_count", label: "Docs", shortLabel: "DOC", description: "Workflow documents count", zone: "center", icon: "", render: renderDocsCountSegment, defaultShow: true },
+  { id: "tasks_done", label: "Done", shortLabel: "DNE", description: "Completed tasks", zone: "center", icon: "", render: renderTasksDoneSegment, defaultShow: true },
+  { id: "tasks_total", label: "Total", shortLabel: "TSK", description: "Total tasks", zone: "center", icon: "", render: renderTasksTotalSegment, defaultShow: true },
+  { id: "task_pct", label: "Progress", shortLabel: "PCT", description: "Task completion percentage", zone: "center", icon: "", render: renderTaskPctSegment, defaultShow: true },
 ];

package/src/segments/mcp.ts

@@ -13,8 +13,9 @@
  */
 
 import type { FooterSegment, FooterSegmentContext, RenderedSegment } from "../types.js";
-import { applyColor } from "../rendering/theme.js";
+import { applyColor, mutedPlaceholder } from "../rendering/theme.js";
 import { getIcon } from "../rendering/icons.js";
+import { isSegmentEnabled } from "../config.js";
 
 /** Shape of aggregate MCP stats from globalThis or registry */
 interface McpStats {
@@ -24,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;
@@ -64,21 +57,37 @@ function hasUsefulValue(value: unknown): value is number {
 
 function renderServersTotalSegment(ctx: FooterSegmentContext): RenderedSegment {
   const stats = getMcpStats(ctx);
-  if (!hasUsefulValue(stats.serversTotal)) return { content: "", visible: false };
+  if (!hasUsefulValue(stats.serversTotal)) {
+    if (isSegmentEnabled("mcp", "servers_total")) {
+      return { content: mutedPlaceholder(withIcon("serversTotal", "0")), visible: true };
+    }
+    return { content: "", visible: false };
+  }
   const content = withIcon("serversTotal", `${stats.serversTotal}`);
   return { content: applyColor("mcp", content, ctx.theme, ctx.colors), visible: true };
 }
 
 function renderServersActiveSegment(ctx: FooterSegmentContext): RenderedSegment {
   const stats = getMcpStats(ctx);
-  if (!hasUsefulValue(stats.serversActive)) return { content: "", visible: false };
+  if (!hasUsefulValue(stats.serversActive)) {
+    if (isSegmentEnabled("mcp", "servers_active")) {
+      const total = stats.serversTotal ?? 0;
+      return { content: mutedPlaceholder(withIcon("serversActive", `${total}/0`)), visible: true };
+    }
+    return { content: "", visible: false };
+  }
   const content = withIcon("serversActive", `${stats.serversActive}`);
   return { content: applyColor("mcp", content, ctx.theme, ctx.colors), visible: true };
 }
 
 function renderToolsTotalSegment(ctx: FooterSegmentContext): RenderedSegment {
   const stats = getMcpStats(ctx);
-  if (!hasUsefulValue(stats.toolsTotal)) return { content: "", visible: false };
+  if (!hasUsefulValue(stats.toolsTotal)) {
+    if (isSegmentEnabled("mcp", "tools_total")) {
+      return { content: mutedPlaceholder(withIcon("toolsTotal", "0")), visible: true };
+    }
+    return { content: "", visible: false };
+  }
   const content = withIcon("toolsTotal", `${stats.toolsTotal}`);
   return { content: applyColor("mcp", content, ctx.theme, ctx.colors), visible: true };
 }
@@ -93,8 +102,8 @@ function renderServersFailedSegment(ctx: FooterSegmentContext): RenderedSegment
 }
 
 export const MCP_SEGMENTS: FooterSegment[] = [
-  { id: "servers_total", label: "Servers Total", icon: "", render: renderServersTotalSegment, defaultShow: true },
-  { id: "servers_active", label: "Servers Active", icon: "", render: renderServersActiveSegment, defaultShow: true },
-  { id: "tools_total", label: "Tools Total", icon: "", render: renderToolsTotalSegment, defaultShow: true },
-  { id: "servers_failed", label: "Servers Failed", icon: "", render: renderServersFailedSegment, defaultShow: true },
+  { id: "servers_total", label: "Servers", shortLabel: "SRV", description: "Total MCP servers configured", zone: "center", icon: "", render: renderServersTotalSegment, defaultShow: true },
+  { id: "servers_active", label: "Active", shortLabel: "ACT", description: "Currently connected MCP servers", zone: "center", icon: "", render: renderServersActiveSegment, defaultShow: true },
+  { id: "tools_total", label: "Tools", shortLabel: "TLS", description: "Total MCP tools available", zone: "center", icon: "", render: renderToolsTotalSegment, defaultShow: true },
+  { id: "servers_failed", label: "Failed", shortLabel: "ERR", description: "Failed MCP server connections", zone: "center", icon: "", render: renderServersFailedSegment, defaultShow: true },
 ];

package/src/segments/memory.ts

@@ -18,8 +18,9 @@
  */
 
 import type { FooterSegment, FooterSegmentContext, RenderedSegment } from "../types.js";
-import { applyColor } from "../rendering/theme.js";
+import { applyColor, mutedPlaceholder } from "../rendering/theme.js";
 import { getIcon } from "../rendering/icons.js";
+import { isSegmentEnabled } from "../config.js";
 
 function withIcon(segmentId: string, text: string): string {
   const icon = getIcon(segmentId);
@@ -50,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
@@ -81,6 +81,9 @@ function getMemoryCounts(): { project: number | null; total: number | null } {
 function renderProjectCountSegment(ctx: FooterSegmentContext): RenderedSegment {
   const counts = getMemoryCounts();
   if (counts.project === null) {
+    if (isSegmentEnabled("memory", "project_count")) {
+      return { content: mutedPlaceholder(withIcon("projectCount", "0")), visible: true };
+    }
     return { content: "", visible: false };
   }
 
@@ -136,7 +139,7 @@ function renderConsolidationsSegment(ctx: FooterSegmentContext): RenderedSegment
 }
 
 export const MEMORY_SEGMENTS: FooterSegment[] = [
-  { id: "project_count", label: "Project Count", icon: "", render: renderProjectCountSegment, defaultShow: true },
-  { id: "total_count", label: "Total Count", icon: "", render: renderTotalCountSegment, defaultShow: true },
-  { id: "consolidations", label: "Consolidations", icon: "", render: renderConsolidationsSegment, defaultShow: false },
+  { id: "project_count", label: "Project Memory", shortLabel: "MEM", description: "Memory entries for this project", zone: "center", icon: "", render: renderProjectCountSegment, defaultShow: true },
+  { id: "total_count", label: "Total Memory", shortLabel: "TOT", description: "Total memory entries across projects", zone: "center", icon: "", render: renderTotalCountSegment, defaultShow: true },
+  { id: "consolidations", label: "Consolidations", shortLabel: "CNS", description: "Number of memory consolidations", zone: "center", icon: "", render: renderConsolidationsSegment, defaultShow: false },
 ];