@pi-unipi/footer 0.1.1

package/src/rendering/renderer.ts

@@ -0,0 +1,310 @@
+/**
+ * @pi-unipi/footer — FooterRenderer
+ *
+ * Main renderer using pi's setFooter + setWidget APIs.
+ * Implements responsive layout with top row + secondary row.
+ * Segments fit into available width; overflow goes to secondary.
+ */
+
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import type { PresetDef, FooterSegmentContext, FooterSegment, ColorScheme, RenderedSegment } from "../types.js";
+import type { FooterRegistry } from "../registry/index.js";
+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";
+
+/** Segment lookup by ID across all groups */
+interface SegmentLookup {
+  get(id: string): FooterSegment | undefined;
+}
+
+/** Rendered segment with width info */
+interface RenderedSegmentWithWidth {
+  content: string;
+  width: number;
+  visible: boolean;
+}
+
+// ─── ANSI helpers ───────────────────────────────────────────────────────────
+
+/** Strip ANSI escape codes and measure visible width */
+function visibleWidth(text: string): number {
+  const stripped = text.replace(/\x1b\[[0-9;]*m/g, "");
+  return stripped.length;
+}
+
+const ANSI_RESET = "\x1b[0m";
+
+function getFgAnsiCode(colors: ColorScheme, semantic: string): string {
+  // Simplified: use dim color for separators
+  return "\x1b[2m"; // dim
+}
+
+// ─── FooterRenderer class ──────────────────────────────────────────────────
+
+export class FooterRenderer {
+  /** Current active preset name */
+  private presetName: string;
+
+  /** Footer registry for data access */
+  private registry: FooterRegistry;
+
+  /** Segment lookup function */
+  private segmentLookup: SegmentLookup;
+
+  /** Current terminal width */
+  private currentWidth = 0;
+
+  /** Whether the renderer is active */
+  private active = false;
+
+  /** Layout cache */
+  private lastLayoutResult: { topContent: string; secondaryContent: string } | null = null;
+  private lastLayoutWidth = 0;
+  private lastLayoutTimestamp = 0;
+  private layoutDirty = true;
+
+  /** Pi context references */
+  private piContext: unknown = null;
+  private footerData: unknown = null;
+
+  /** Debounce timer for renders */
+  private renderTimer: ReturnType<typeof setTimeout> | null = null;
+  private static readonly RENDER_DEBOUNCE_MS = 33;
+
+  constructor(
+    registry: FooterRegistry,
+    segmentLookup: SegmentLookup,
+    initialPreset = "default",
+  ) {
+    this.registry = registry;
+    this.segmentLookup = segmentLookup;
+    this.presetName = initialPreset;
+    this.syncIconStyle();
+
+    // Subscribe to registry changes
+    this.registry.subscribe(() => {
+      this.layoutDirty = true;
+      this.scheduleRender();
+    });
+  }
+
+  /** Set the active preset */
+  setPreset(name: string): void {
+    this.presetName = name;
+    this.resetLayoutCache();
+    this.syncIconStyle();
+  }
+
+  /** Sync the icon style from settings to the icons module */
+  private syncIconStyle(): void {
+    const settings = loadFooterSettings();
+    setIconStyle(settings.iconStyle);
+  }
+
+  /** Get the active preset name */
+  getPresetName(): string {
+    return this.presetName;
+  }
+
+  /** Set pi context references */
+  setContext(piContext: unknown, footerData: unknown): void {
+    this.piContext = piContext;
+    this.footerData = footerData;
+    this.resetLayoutCache();
+  }
+
+  /** Activate/deactivate the renderer */
+  setActive(active: boolean): void {
+    this.active = active;
+    this.resetLayoutCache();
+  }
+
+  /** Whether the renderer is active */
+  isActive(): boolean {
+    return this.active;
+  }
+
+  /** Schedule a debounced render */
+  scheduleRender(): void {
+    if (this.renderTimer) clearTimeout(this.renderTimer);
+    this.renderTimer = setTimeout(() => {
+      this.layoutDirty = true;
+    }, FooterRenderer.RENDER_DEBOUNCE_MS);
+  }
+
+  /** Reset layout cache, forcing re-computation on next render */
+  resetLayoutCache(): void {
+    this.lastLayoutResult = null;
+    this.lastLayoutWidth = 0;
+    this.layoutDirty = true;
+  }
+
+  /**
+   * Compute responsive layout for the given width.
+   * Segments that don't fit in the top row overflow to the secondary row.
+   */
+  computeLayout(width: number): { topContent: string; secondaryContent: string } {
+    // Return cached layout if still valid
+    const now = Date.now();
+    if (this.lastLayoutResult && this.lastLayoutWidth === width && !this.layoutDirty && now - this.lastLayoutTimestamp < 5000) {
+      return this.lastLayoutResult;
+    }
+
+    const presetDef = getPreset(this.presetName);
+    const colors = presetDef.colors ?? getDefaultColors();
+
+    // Render all segments
+    const allSegmentIds = [
+      ...presetDef.leftSegments,
+      ...presetDef.rightSegments,
+      ...presetDef.secondarySegments,
+    ];
+
+    const renderedSegments: RenderedSegmentWithWidth[] = [];
+    for (const segId of allSegmentIds) {
+      if (!isSegmentEnabled(this.getGroupForSegment(segId), segId)) continue;
+
+      const segment = this.segmentLookup.get(segId);
+      if (!segment) continue;
+
+      const ctx: FooterSegmentContext = {
+        theme: this.getThemeLike(),
+        colors,
+        data: this.registry.getGroupData(this.getGroupForSegment(segId)),
+        width,
+        piContext: this.piContext,
+        footerData: this.footerData,
+      };
+
+      const rendered = segment.render(ctx);
+      if (!rendered.visible || !rendered.content) continue;
+
+      renderedSegments.push({
+        content: rendered.content,
+        width: visibleWidth(rendered.content),
+        visible: true,
+      });
+    }
+
+    if (renderedSegments.length === 0) {
+      this.lastLayoutResult = { topContent: "", secondaryContent: "" };
+      this.lastLayoutWidth = width;
+      this.lastLayoutTimestamp = now;
+      this.layoutDirty = false;
+      return this.lastLayoutResult;
+    }
+
+    // Separate primary (left+right) from secondary
+    const primaryIds = new Set([...presetDef.leftSegments, ...presetDef.rightSegments]);
+    const primarySegments: RenderedSegmentWithWidth[] = [];
+    const secondarySegments: RenderedSegmentWithWidth[] = [];
+
+    for (const seg of renderedSegments) {
+      // Check if this segment's content matches a primary or secondary segment
+      // We'll do a simpler approach: fit what fits in top row, overflow to secondary
+      primarySegments.push(seg);
+    }
+
+    // Compute responsive layout
+    const sepDef = getSeparator(presetDef.separator);
+    const sepWidth = visibleWidth(sepDef.left) + 2; // separator + spaces
+
+    const baseOverhead = 2; // leading + trailing space
+    let currentWidth = baseOverhead;
+    let topParts: string[] = [];
+    let overflowParts: RenderedSegmentWithWidth[] = [];
+    let overflow = false;
+
+    for (const seg of primarySegments) {
+      const needed = seg.width + (topParts.length > 0 ? sepWidth : 0);
+      if (!overflow && currentWidth + needed <= width) {
+        topParts.push(seg.content);
+        currentWidth += needed;
+      } else {
+        overflow = true;
+        overflowParts.push(seg);
+      }
+    }
+
+    // Fit overflow into secondary row
+    let secondaryWidth = baseOverhead;
+    let secondaryParts: string[] = [];
+    for (const seg of overflowParts) {
+      const needed = seg.width + (secondaryParts.length > 0 ? sepWidth : 0);
+      if (secondaryWidth + needed <= width) {
+        secondaryParts.push(seg.content);
+        secondaryWidth += needed;
+      } else {
+        break; // Stop at first non-fitting segment
+      }
+    }
+
+    const topContent = this.buildContentFromParts(topParts, sepDef);
+    const secondaryContent = this.buildContentFromParts(secondaryParts, sepDef);
+
+    this.lastLayoutResult = { topContent, secondaryContent };
+    this.lastLayoutWidth = width;
+    this.lastLayoutTimestamp = now;
+    this.layoutDirty = false;
+
+    return this.lastLayoutResult;
+  }
+
+  // ─── Helpers ─────────────────────────────────────────────────────────────
+
+  private buildContentFromParts(parts: string[], sepDef: { left: string }): 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 + " ";
+  }
+
+  /** Map a segment ID to its group ID */
+  private getGroupForSegment(segId: string): string {
+    // Core segments
+    const coreIds = ["model", "thinking", "path", "git", "context_pct", "cost", "tokens_total", "tokens_in", "tokens_out", "session", "hostname", "time"];
+    if (coreIds.includes(segId)) return "core";
+
+    // Compactor segments
+    const compactorIds = ["session_events", "compactions", "tokens_saved", "compression_ratio", "indexed_docs", "sandbox_runs", "search_queries"];
+    if (compactorIds.includes(segId)) return "compactor";
+
+    // Memory segments
+    if (["project_count", "total_count", "consolidations"].includes(segId)) return "memory";
+
+    // MCP segments
+    if (["servers_total", "servers_active", "tools_total", "servers_failed"].includes(segId)) return "mcp";
+
+    // Ralph segments
+    if (["active_loops", "total_iterations", "loop_status"].includes(segId)) return "ralph";
+
+    // Workflow segments
+    if (["current_command", "sandbox_level", "command_duration"].includes(segId)) return "workflow";
+
+    // Kanboard segments
+    if (["docs_count", "tasks_done", "tasks_total", "task_pct"].includes(segId)) return "kanboard";
+
+    // Notify segments
+    if (["platforms_enabled", "last_sent"].includes(segId)) return "notify";
+
+    // Status extension
+    if (segId === "extension_statuses") return "status_ext";
+
+    return "core";
+  }
+
+  /** Get a ThemeLike object for rendering context */
+  private getThemeLike(): { fg: (color: string, text: string) => string } {
+    // Use a minimal theme-like that applies ANSI codes based on color names
+    // The real theme is passed via setWidget callback
+    return {
+      fg: (color: string, text: string) => {
+        // Return text as-is; actual theming applied by segment renderers
+        return text;
+      },
+    };
+  }
+}

package/src/rendering/separators.ts

@@ -0,0 +1,112 @@
+/**
+ * @pi-unipi/footer — Separator rendering
+ *
+ * Provides separator glyphs for all supported styles.
+ * Uses Nerd Font characters when available, ASCII fallbacks otherwise.
+ */
+
+import type { SeparatorDef, SeparatorStyle } from "../types.js";
+
+// ─── Nerd Font separator glyphs ─────────────────────────────────────────────
+
+const NERD_SEPARATORS = {
+  powerlineLeft: "\uE0B0",     // 
+  powerlineRight: "\uE0B2",    // 
+  powerlineThinLeft: "\uE0B1", // 
+  powerlineThinRight: "\uE0B3", // 
+  slash: "/",
+  pipe: "|",
+  dot: "\u00B7",               // ·
+  asciiLeft: ">",
+  asciiRight: "<",
+} as const;
+
+// ─── ASCII fallback separator glyphs ────────────────────────────────────────
+
+const ASCII_SEPARATORS = {
+  powerlineLeft: ">",
+  powerlineRight: "<",
+  powerlineThinLeft: "|",
+  powerlineThinRight: "|",
+  slash: "/",
+  pipe: "|",
+  dot: ".",
+  asciiLeft: ">",
+  asciiRight: "<",
+} as const;
+
+// ─── Nerd Font detection ────────────────────────────────────────────────────
+
+/**
+ * Detect whether the current terminal likely supports Nerd Font glyphs.
+ * Checks TERM_PROGRAM for known terminals and optional env override.
+ */
+export function detectNerdFontSupport(): boolean {
+  // Explicit overrides
+  if (process.env.POWERLINE_NERD_FONTS === "1") return true;
+  if (process.env.POWERLINE_NERD_FONTS === "0") return false;
+
+  // Ghostty exposes GHOSTTY_RESOURCES_DIR even inside tmux
+  if (process.env.GHOSTTY_RESOURCES_DIR) return true;
+
+  // Check common terminals known to ship/bundle Nerd Fonts
+  const term = (process.env.TERM_PROGRAM || "").toLowerCase();
+  const nerdTerms = ["iterm", "wezterm", "kitty", "ghostty", "alacritty"];
+  return nerdTerms.some(t => term.includes(t));
+}
+
+/**
+ * Get the separator character set based on terminal capabilities.
+ */
+function getSeparatorChars() {
+  return detectNerdFontSupport() ? NERD_SEPARATORS : ASCII_SEPARATORS;
+}
+
+// ─── Separator map ──────────────────────────────────────────────────────────
+
+/**
+ * Get separator definition for the given style.
+ * Returns left and right glyph strings.
+ */
+export function getSeparator(style: SeparatorStyle): SeparatorDef {
+  const chars = getSeparatorChars();
+
+  switch (style) {
+    case "powerline":
+      return {
+        left: chars.powerlineLeft,
+        right: chars.powerlineRight,
+      };
+
+    case "powerline-thin":
+      return {
+        left: chars.powerlineThinLeft,
+        right: chars.powerlineThinRight,
+      };
+
+    case "slash":
+      return { left: ` ${chars.slash} `, right: ` ${chars.slash} ` };
+
+    case "pipe":
+      return { left: ` ${chars.pipe} `, right: ` ${chars.pipe} ` };
+
+    case "dot":
+      return { left: ` ${chars.dot} `, right: ` ${chars.dot} ` };
+
+    case "ascii":
+      return { left: ` ${chars.asciiLeft} `, right: ` ${chars.asciiRight} ` };
+
+    default:
+      return getSeparator("powerline-thin");
+  }
+}
+
+/**
+ * Get the visible width of a separator (ANSI-stripped length).
+ */
+export function separatorVisibleWidth(style: SeparatorStyle): number {
+  const sep = getSeparator(style);
+  // Strip ANSI codes and measure
+  const stripped = sep.left.replace(/\x1b\[[0-9;]*m/g, "");
+  return stripped.length;
+}

package/src/rendering/theme.ts

@@ -0,0 +1,98 @@
+/**
+ * @pi-unipi/footer — Theme color resolution
+ *
+ * Maps semantic color names to pi theme colors. Supports
+ * hex overrides via ColorScheme.
+ */
+
+import type { Theme, ThemeColor } from "@mariozechner/pi-coding-agent";
+import type { ColorScheme, ColorValue, SemanticColor, ThemeLike } from "../types.js";
+
+/** Default semantic-to-theme-color mapping */
+const DEFAULT_COLOR_MAP: Record<SemanticColor, ThemeColor> = {
+  model: "accent",
+  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",
+  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",
+};
+
+/**
+ * Get the default color scheme mapping semantic names to theme colors.
+ */
+export function getDefaultColors(): ColorScheme {
+  const scheme: ColorScheme = {};
+  for (const [key, value] of Object.entries(DEFAULT_COLOR_MAP)) {
+    scheme[key as SemanticColor] = value;
+  }
+  return scheme;
+}
+
+/**
+ * Resolve a ColorValue to an actual color string using the theme.
+ * If the value is a theme color name, uses theme.fg().
+ * If it's a hex string, returns it directly.
+ */
+export function resolveColor(color: ColorValue, theme: ThemeLike): string {
+  // Check if it's a hex color (starts with #)
+  if (color.startsWith("#")) {
+    return color;
+  }
+  // It's a ThemeColor — use theme.fg
+  return theme.fg(color as ThemeColor, "").replace(/\x1b\[0m$/, "");
+}
+
+/**
+ * Apply a semantic color to text using the theme.
+ * Falls back to the default theme color if no override is provided.
+ */
+export function applyColor(
+  semantic: SemanticColor,
+  text: string,
+  theme: ThemeLike,
+  colors: ColorScheme,
+): string {
+  const colorValue = colors[semantic];
+  if (!colorValue) {
+    // Use default from the map
+    const defaultColor = DEFAULT_COLOR_MAP[semantic] || "text";
+    return theme.fg(defaultColor as ThemeColor, text);
+  }
+
+  if (colorValue.startsWith("#")) {
+    // Hex color — we need to emit ANSI directly
+    const hex = colorValue.slice(1);
+    const r = Number.parseInt(hex.slice(0, 2), 16);
+    const g = Number.parseInt(hex.slice(2, 4), 16);
+    const b = Number.parseInt(hex.slice(4, 6), 16);
+    return `\x1b[38;2;${r};${g};${b}m${text}\x1b[0m`;
+  }
+
+  return theme.fg(colorValue as ThemeColor, text);
+}

package/src/segments/compactor.ts

@@ -0,0 +1,135 @@
+/**
+ * @pi-unipi/footer — Compactor segments
+ *
+ * Segment renderers for the compactor group: session_events, compactions,
+ * tokens_saved, compression_ratio, indexed_docs, sandbox_runs, search_queries.
+ *
+ * Data sourced from piContext.sessionManager (live session data).
+ * Segments without a reliable data source are hidden (visible: false)
+ * rather than showing a placeholder like "—".
+ */
+
+import type { FooterSegment, FooterSegmentContext, RenderedSegment } from "../types.js";
+import { applyColor } from "../rendering/theme.js";
+import { getIcon } from "../rendering/icons.js";
+
+function withIcon(segmentId: string, text: string): string {
+  const icon = getIcon(segmentId);
+  return icon ? `${icon} ${text}` : text;
+}
+
+function formatTokens(n: number): string {
+  if (n < 1000) return n.toString();
+  if (n < 10000) return `${(n / 1000).toFixed(1)}k`;
+  if (n < 1000000) return `${Math.round(n / 1000)}k`;
+  return `${(n / 1000000).toFixed(1)}M`;
+}
+
+/** Hidden segment — no reliable data source available */
+function hidden(): RenderedSegment {
+  return { content: "", visible: false };
+}
+
+/** Safely extract sessionManager from piContext */
+function getSessionManager(ctx: FooterSegmentContext): any {
+  const piCtx = ctx.piContext as Record<string, unknown> | undefined;
+  return piCtx?.sessionManager as any | undefined;
+}
+
+/** Get all session events from sessionManager branch */
+function getSessionEvents(ctx: FooterSegmentContext): any[] {
+  const sm = getSessionManager(ctx);
+  if (!sm || typeof sm.getBranch !== "function") return [];
+  try {
+    return sm.getBranch() ?? [];
+  } catch {
+    return [];
+  }
+}
+
+function renderSessionEventsSegment(ctx: FooterSegmentContext): RenderedSegment {
+  const events = getSessionEvents(ctx);
+  const count = events.length;
+  if (count === 0) return hidden();
+
+  const content = withIcon("sessionEvents", `${count}`);
+  return { content: applyColor("compactor", content, ctx.theme, ctx.colors), visible: true };
+}
+
+function renderCompactionsSegment(ctx: FooterSegmentContext): RenderedSegment {
+  // Count compaction entries in the session events
+  const events = getSessionEvents(ctx);
+  let compactionCount = 0;
+  for (const e of events) {
+    if (!e || typeof e !== "object") continue;
+    if (e.type === "compaction" || e.type === "compacted") {
+      compactionCount++;
+    }
+  }
+  if (compactionCount === 0) 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
+  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") {
+      hasCompaction = true;
+      tokensSaved += Number(e.tokensSaved ?? e.tokens_saved ?? 0);
+    }
+  }
+  if (!hasCompaction || tokensSaved === 0) return hidden();
+
+  const content = withIcon("tokensSaved", formatTokens(tokensSaved));
+  return { content: applyColor("compactor", content, ctx.theme, ctx.colors), visible: true };
+}
+
+function renderCompressionRatioSegment(ctx: FooterSegmentContext): RenderedSegment {
+  // Check last compaction event for compression ratio
+  const events = getSessionEvents(ctx);
+  let lastRatio: number | undefined;
+  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 (lastRatio === undefined) return hidden();
+
+  const content = withIcon("compressionRatio", `${lastRatio.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
+  return hidden();
+}
+
+function renderSandboxRunsSegment(_ctx: FooterSegmentContext): RenderedSegment {
+  // No reliable data source for sandbox run count
+  return hidden();
+}
+
+function renderSearchQueriesSegment(_ctx: FooterSegmentContext): RenderedSegment {
+  // No reliable data source for search query count
+  return hidden();
+}
+
+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 },
+];