@pi-unipi/footer 0.1.2 → 0.1.4

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

@@ -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("📈 CMP 0"), visible: true };
+    }
+    return hidden();
+  }
 
   const content = withIcon("sessionEvents", `${count}`);
   return { content: applyColor("compactor", content, ctx.theme, ctx.colors), visible: true };
@@ -66,7 +72,12 @@ function renderCompactionsSegment(ctx: FooterSegmentContext): RenderedSegment {
       compactionCount++;
     }
   }
-  if (compactionCount === 0) return hidden();
+  if (compactionCount === 0) {
+    if (isSegmentEnabled("compactor", "compactions")) {
+      return { content: mutedPlaceholder("🗜️ CMP 0"), visible: true };
+    }
+    return hidden();
+  }
 
   const content = withIcon("compactions", `${compactionCount}`);
   return { content: applyColor("compactor", content, ctx.theme, ctx.colors), visible: true };
@@ -125,11 +136,11 @@ function renderSearchQueriesSegment(_ctx: FooterSegmentContext): RenderedSegment
 }
 
 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: "indexed_docs", label: "Indexed Docs", shortLabel: "IDX", description: "Number of indexed documents", zone: "center", icon: "", render: renderIndexedDocsSegment, 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

@@ -1,16 +1,16 @@
 /**
  * @pi-unipi/footer — Core segments
  *
- * Segment renderers for the core group: model, thinking, path, git,
+ * Segment renderers for the core group: model, api_state, tool_count, git,
  * context_pct, cost, tokens_total, tokens_in, tokens_out, session,
  * hostname, time.
  */
 
 import { hostname as osHostname } from "node:os";
-import { basename } from "node:path";
 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 ────────────────────────────────────────────────────────────────
 
@@ -61,9 +61,9 @@ function getUsageStats(piContext: unknown): UsageStats {
   return { input, output, cacheRead, cacheWrite, cost };
 }
 
-// ─── Rainbow helpers for xhigh thinking level ───────────────────────────────
+// ─── Rainbow helpers (kept for potential future use) ─────────────────────────
 
-/** ANSI 256-color rainbow palette for xhigh thinking level */
+/** ANSI 256-color rainbow palette */
 const RAINBOW_COLORS = [
   "\x1b[38;5;196m", // red
   "\x1b[38;5;202m", // orange
@@ -100,14 +100,6 @@ export function rainbowBorder(width: number): string {
   return result;
 }
 
-/** Get the current thinking level from piContext */
-export function getThinkingLevel(piContext: unknown): string {
-  const piCtx = piContext as Record<string, unknown> | undefined;
-  return typeof piCtx?.getThinkingLevel === "function"
-    ? (piCtx as any).getThinkingLevel()
-    : "off";
-}
-
 // ─── Segment Renderers ──────────────────────────────────────────────────────
 
 function renderModelSegment(ctx: FooterSegmentContext): RenderedSegment {
@@ -121,49 +113,17 @@ function renderModelSegment(ctx: FooterSegmentContext): RenderedSegment {
   return { content: color(ctx, "model", content), visible: true };
 }
 
-function renderThinkingSegment(ctx: FooterSegmentContext): RenderedSegment {
-  const thinkingLevel = getThinkingLevel(ctx.piContext);
-
-  if (thinkingLevel === "off") return { content: "", visible: false };
-
-  const levelText: Record<string, string> = {
-    minimal: "min", low: "low", medium: "med", high: "high", xhigh: "xhigh",
-  };
-  const label = levelText[thinkingLevel] || thinkingLevel;
-  const icon = getIcon("thinking");
-  const text = `think:${label}`;
-  const content = icon ? `${icon} ${text}` : text;
-
-  // xhigh uses rainbow coloring
-  if (thinkingLevel === "xhigh") {
-    return { content: rainbowText(content), visible: true };
-  }
-
-  let semanticColor: SemanticColor = "thinking";
-  if (thinkingLevel === "minimal") semanticColor = "thinkingMinimal";
-  else if (thinkingLevel === "low") semanticColor = "thinkingLow";
-  else if (thinkingLevel === "medium") semanticColor = "thinkingMedium";
-  else if (thinkingLevel === "high") semanticColor = "thinkingHigh";
-
-  return { content: color(ctx, semanticColor, content), visible: true };
+function renderApiStateSegment(ctx: FooterSegmentContext): RenderedSegment {
+  // Show WEB to indicate the web-api package is active.
+  const content = "WEB";
+  return { content: color(ctx, "model", content), visible: true };
 }
 
-function renderPathSegment(ctx: FooterSegmentContext): RenderedSegment {
-  const piCtx = ctx.piContext as Record<string, unknown> | undefined;
-  const cwd = (piCtx?.cwd as string) || process.cwd();
-  const home = process.env.HOME || process.env.USERPROFILE;
-  let pwd = cwd;
-
-  if (home && pwd.startsWith(home)) {
-    pwd = `~${pwd.slice(home.length)}`;
-  }
-  // For brevity, show basename by default
-  if (pwd.length > 30) {
-    pwd = `…${pwd.slice(-29)}`;
-  }
-
-  const content = withIcon("path", pwd);
-  return { content: color(ctx, "path", content), visible: true };
+function renderToolCountSegment(ctx: FooterSegmentContext): RenderedSegment {
+  // Tool count is not directly exposed in piContext yet.
+  // TODO: Connect to actual tool count when pi exposes it.
+  const content = withIcon("toolCount", "—");
+  return { content: color(ctx, "model", content), visible: true };
 }
 
 function renderGitSegment(ctx: FooterSegmentContext): RenderedSegment {
@@ -171,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 {
@@ -247,7 +209,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 {
@@ -265,19 +227,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: "thinking", label: "Thinking", icon: "", render: renderThinkingSegment, defaultShow: true },
-  { id: "path", label: "Path", icon: "", render: renderPathSegment, 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);
@@ -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("KB 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("KB 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("KB 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 {
@@ -64,21 +65,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("🖥️ MCP 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(`🖥️ MCP ${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("🖥️ MCP 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 +110,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,11 +18,14 @@
  */
 
 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";
 
-/** Nerd Font icon for memory:  */
-const MEMORY_ICON = "\uee9c";
+function withIcon(segmentId: string, text: string): string {
+  const icon = getIcon(segmentId);
+  return icon ? `${icon} ${text}` : text;
+}
 
 /**
  * Shape of the info-screen memory group data:
@@ -79,16 +82,19 @@ 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("🧠 MEM 0"), visible: true };
+    }
     return { content: "", visible: false };
   }
 
   // Show as 76/102 format when both are available
   if (counts.total !== null) {
-    const content = `${MEMORY_ICON} ${counts.project}/${counts.total}`;
+    const content = withIcon("projectCount", `${counts.project}/${counts.total}`);
     return { content: applyColor("memory", content, ctx.theme, ctx.colors), visible: true };
   }
 
-  const content = `${MEMORY_ICON} ${counts.project}`;
+  const content = withIcon("projectCount", `${counts.project}`);
   return { content: applyColor("memory", content, ctx.theme, ctx.colors), visible: true };
 }
 
@@ -106,7 +112,7 @@ function renderTotalCountSegment(ctx: FooterSegmentContext): RenderedSegment {
     return { content: "", visible: false };
   }
 
-  const content = `${MEMORY_ICON} ${counts.total}`;
+  const content = withIcon("totalCount", `${counts.total}`);
   return { content: applyColor("memory", content, ctx.theme, ctx.colors), visible: true };
 }
 
@@ -116,7 +122,7 @@ function renderConsolidationsSegment(ctx: FooterSegmentContext): RenderedSegment
   // Check for explicit consolidations stat from info registry
   const consolidationsValue = infoData?.consolidations?.value;
   if (consolidationsValue !== undefined && consolidationsValue !== null) {
-    const content = `${MEMORY_ICON} cns:${consolidationsValue}`;
+    const content = withIcon("consolidations", `cns:${consolidationsValue}`);
     return { content: applyColor("memory", content, ctx.theme, ctx.colors), visible: true };
   }
 
@@ -129,12 +135,12 @@ function renderConsolidationsSegment(ctx: FooterSegmentContext): RenderedSegment
     return { content: "", visible: false };
   }
 
-  const content = `${MEMORY_ICON} cns:${count}`;
+  const content = withIcon("consolidations", `cns:${count}`);
   return { content: applyColor("memory", content, ctx.theme, ctx.colors), visible: true };
 }
 
 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 },
 ];