@pi-unipi/footer 0.1.3 → 0.1.4

package/src/index.ts

@@ -27,6 +27,7 @@ import { STATUS_EXT_SEGMENTS } from "./segments/status-ext.js";
 
 import type { FooterGroup, FooterSegment } from "./types.js";
 import { rainbowBorder } from "./segments/core.js";
+import { tpsTracker } from "./tps-tracker.js";
 
 /** All segment groups */
 const ALL_GROUPS: FooterGroup[] = [
@@ -124,6 +125,7 @@ export default function footerExtension(pi: ExtensionAPI): void {
       state.refreshTimer = null;
     }
     state.tuiRef = null;
+    tpsTracker.reset();
   });
 
   // ─── Register commands ──────────────────────────────────────────────────
@@ -136,7 +138,7 @@ export default function footerExtension(pi: ExtensionAPI): void {
     emitEvent(pi as any, UNIPI_EVENTS.MODULE_READY, {
       name: "@pi-unipi/footer",
       version: "0.1.0",
-      commands: [`${UNIPI_PREFIX}${FOOTER_COMMANDS.FOOTER}`, `${UNIPI_PREFIX}${FOOTER_COMMANDS.FOOTER_SETTINGS}`],
+      commands: [`${UNIPI_PREFIX}${FOOTER_COMMANDS.FOOTER}`, `${UNIPI_PREFIX}${FOOTER_COMMANDS.FOOTER_SETTINGS}`, `${UNIPI_PREFIX}${FOOTER_COMMANDS.FOOTER_HELP}`],
       tools: [],
     });
   });
@@ -152,6 +154,28 @@ function setupFooterUI(pi: ExtensionAPI, ctx: any, state: FooterState): void {
     // Start periodic refresh for time-sensitive segments (e.g. clock)
     if (!state.refreshTimer) {
       state.refreshTimer = setInterval(() => {
+        // Feed TPS tracker with per-message data
+        try {
+          const piCtx = state.piContext as Record<string, unknown> | undefined;
+          if (piCtx?.sessionManager) {
+            const sm = (piCtx as any).sessionManager;
+            const events = sm?.getBranch?.() ?? [];
+            let msgIndex = 0;
+            for (const e of events) {
+              if (!e || typeof e !== "object") continue;
+              if (e.type !== "message") continue;
+              const m = e.message;
+              if (!m || m.role !== "assistant") continue;
+              if (m.stopReason === "error" || m.stopReason === "aborted") continue;
+              const output = m.usage?.output ?? 0;
+              const hasStop = !!m.stopReason;
+              tpsTracker.onMessageUpdate(msgIndex, output, hasStop);
+              msgIndex++;
+            }
+          }
+        } catch {
+          // Silently ignore — TPS is best-effort
+        }
         state.renderer.resetLayoutCache();
         state.tuiRef?.requestRender();
       }, 1_000);

package/src/presets.ts

@@ -2,8 +2,11 @@
  * @pi-unipi/footer — Presets system
  *
  * Preset definitions: default, minimal, compact, full, nerd, ascii.
- * Each preset defines which segments appear on left, right, and secondary rows,
+ * Each preset defines which segments appear (left/center/right/secondary),
  * plus separator style and color scheme.
+ *
+ * Segments are grouped by their zone field regardless of which array they're
+ * listed in. The arrays define ordering within the preset.
  */
 
 import type { PresetDef, SeparatorStyle, ColorScheme } from "./types.js";
@@ -12,100 +15,106 @@ import { getDefaultColors } from "./rendering/theme.js";
 /** Default preset — balanced view */
 const DEFAULT_PRESET: PresetDef = {
   leftSegments: [
-    "model", "api_state", "tool_count", "git", "context_pct", "cost",
+    "model", "api_state", "tool_count", "git",
   ],
   rightSegments: [
-    "compactions", "tokens_saved", "project_count", "loop_status",
+    "tps", "context_pct", "cost",
+    "compactions", "tokens_saved", "project_count",
+    "current_command", "loop_status", "extension_statuses",
+    "clock", "duration",
   ],
   secondarySegments: [
-    "current_command", "session_events",
+    "session",
   ],
-  separator: "powerline-thin",
   colors: getDefaultColors(),
 };
 
 /** Minimal preset — just the essentials */
 const MINIMAL_PRESET: PresetDef = {
   leftSegments: [
-    "git", "context_pct",
+    "model", "git",
+  ],
+  rightSegments: [
+    "context_pct",
+    "clock",
   ],
-  rightSegments: [],
   secondarySegments: [],
-  separator: "pipe",
   colors: getDefaultColors(),
 };
 
 /** Compact preset — core + key stats */
 const COMPACT_PRESET: PresetDef = {
   leftSegments: [
-    "model", "git", "cost", "context_pct",
+    "model", "git",
   ],
   rightSegments: [
-    "compactions", "total_count",
+    "tps", "context_pct", "cost",
+    "clock", "duration",
   ],
   secondarySegments: [],
-  separator: "dot",
   colors: getDefaultColors(),
 };
 
 /** Full preset — everything */
 const FULL_PRESET: PresetDef = {
   leftSegments: [
-    "model", "api_state", "tool_count", "git", "context_pct", "cost",
-    "tokens_total", "tokens_in", "tokens_out",
+    "model", "api_state", "tool_count", "git", "current_command", "session",
   ],
   rightSegments: [
-    "session_events", "compactions", "tokens_saved", "compression_ratio",
-    "indexed_docs", "sandbox_runs", "search_queries",
-    "project_count", "total_count", "consolidations",
-    "servers_total", "servers_active", "tools_total", "servers_failed",
-    "active_loops", "total_iterations", "loop_status",
-    "current_command", "command_duration",
-    "docs_count", "tasks_done", "tasks_total", "task_pct",
+    "tps", "context_pct", "cost", "tokens_total",
+    "session_events", "compactions", "tokens_saved",
+    "project_count", "total_count",
+    "servers_total", "servers_active", "tools_total",
+    "active_loops", "loop_status",
+    "docs_count", "tasks_done", "task_pct",
     "extension_statuses",
+    "clock", "duration",
   ],
   secondarySegments: [
-    "hostname", "time",
+    "hostname",
+    "tokens_in", "tokens_out",
+    "compression_ratio", "indexed_docs",
     "platforms_enabled", "last_sent",
+    "thinking_level",
   ],
-  separator: "powerline-thin",
   colors: getDefaultColors(),
 };
 
 /** Nerd preset — maximum detail for Nerd Font users */
 const NERD_PRESET: PresetDef = {
   leftSegments: [
-    "model", "api_state", "tool_count", "git", "context_pct", "cost",
-    "tokens_total",
+    "model", "api_state", "tool_count", "git", "current_command", "session",
   ],
   rightSegments: [
+    "tps", "context_pct", "cost", "tokens_total",
     "session_events", "compactions", "tokens_saved",
     "project_count", "total_count",
     "servers_total", "servers_active", "tools_total",
     "active_loops", "loop_status",
-    "current_command",
-    "docs_count", "tasks_done", "tasks_total", "task_pct",
+    "docs_count", "tasks_done", "task_pct",
     "extension_statuses",
+    "clock", "duration",
   ],
   secondarySegments: [
-    "session", "hostname", "time",
+    "hostname",
+    "tokens_in", "tokens_out",
     "compression_ratio", "indexed_docs",
     "platforms_enabled", "last_sent",
+    "thinking_level",
   ],
-  separator: "powerline",
   colors: getDefaultColors(),
 };
 
 /** ASCII preset — safe for any terminal */
 const ASCII_PRESET: PresetDef = {
   leftSegments: [
-    "model", "git", "context_pct", "cost",
+    "model", "git",
   ],
   rightSegments: [
-    "compactions", "tokens_saved", "project_count",
+    "tps", "context_pct", "cost",
+    "clock", "duration",
   ],
   secondarySegments: [],
-  separator: "ascii",
   colors: getDefaultColors(),
 };
 

package/src/rendering/icons.ts

@@ -27,6 +27,10 @@ export interface IconSet {
   session: string;
   hostname: string;
   time: string;
+  tps: string;
+  clock: string;
+  duration: string;
+  thinkingLevel: string;
 
   // Compactor segments
   sessionEvents: string;
@@ -92,6 +96,10 @@ export const NERD_ICONS: IconSet = {
   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
 
   // Compactor
   sessionEvents:   "\uDBB1\uDECF", // 󰲏 session events icon
@@ -147,33 +155,38 @@ export const EMOJI_ICONS: IconSet = {
   model:           "🤖",
   apiState:        "🔄",
   toolCount:       "🔧",
-  git:             "⎇",
+  git:             "🔀",
   context:         "🗄️",
   cost:            "💲",
-  tokens:          "⊛",
-  tokensIn:        "→",
-  tokensOut:       "←",
-  session:         "#",
-  hostname:        "⌂",
+  tokens:          "📊",
+  tokensIn:        "⬇️",
+  tokensOut:       "⬆️",
+  session:         "📋",
+  hostname:        "🏠",
   time:            "⏱",
 
+  tps:             "⚡",
+  clock:           "🕔",
+  duration:        "⏱",
+  thinkingLevel:   "💡",
+
   // Compactor
-  sessionEvents:   "⚡",
-  compactions:     "◧",
+  sessionEvents:   "📈",
+  compactions:     "🗜️",
   tokensSaved:     "💲",
-  compressionRatio:"⇄",
-  indexedDocs:     "☰",
-  sandboxRuns:     "▶",
-  searchQueries:   "⊗",
+  compressionRatio:"📐",
+  indexedDocs:     "📑",
+  sandboxRuns:     "▶️",
+  searchQueries:   "🔍",
 
   // Memory
   projectCount:    "🧠",
   totalCount:      "🧠",
-  consolidations:  "🧠",
+  consolidations:  "🔄",
 
   // MCP
   serversTotal:    "🖥️",
-  serversActive:   "●",
+  serversActive:   "🟢",
   toolsTotal:      "🔧",
   serversFailed:   "⚠️",
 
@@ -188,17 +201,17 @@ export const EMOJI_ICONS: IconSet = {
   commandDuration: "⏱",
 
   // Kanboard
-  docsCount:       "☰",
-  tasksDone:       "✓",
-  tasksTotal:      "☐",
-  taskPct:         "%",
+  docsCount:       "📑",
+  tasksDone:       "✅",
+  tasksTotal:      "📋",
+  taskPct:         "📊",
 
   // Notify
-  platformsEnabled:"♮",
+  platformsEnabled:"🔔",
   lastSent:        "⏱",
 
   // Extension status
-  extensionStatuses:"▦",
+  extensionStatuses:"🧩",
 
   separator:       "|",
 };
@@ -221,6 +234,11 @@ export const TEXT_ICONS: IconSet = {
   hostname:        "HST",
   time:            "TIM",
 
+  tps:             "TPS",
+  clock:           "CLK",
+  duration:        "DUR",
+  thinkingLevel:   "THK",
+
   // Compactor
   sessionEvents:   "EVT",
   compactions:     "CMP",

package/src/rendering/renderer.ts

@@ -7,7 +7,7 @@
  */
 
 import type { Theme } from "@mariozechner/pi-coding-agent";
-import type { PresetDef, FooterSegmentContext, FooterSegment, ColorScheme, RenderedSegment } from "../types.js";
+import type { PresetDef, FooterSegmentContext, FooterSegment, ColorScheme, RenderedSegment, SegmentZone } from "../types.js";
 import type { FooterRegistry } from "../registry/index.js";
 import { visibleWidth as piVisibleWidth, truncateToWidth } from "@mariozechner/pi-tui";
 import { getSeparator, separatorVisibleWidth } from "./separators.js";
@@ -143,8 +143,8 @@ export class FooterRenderer {
   }
 
   /**
-   * Compute responsive layout for the given width.
-   * Segments that don't fit in the top row overflow to the secondary row.
+   * Compute responsive zone-based layout for the given width.
+   * Segments are grouped by zone (left/center/right) and rendered with alignment.
    */
   computeLayout(width: number): { topContent: string; secondaryContent: string } {
     // Return cached layout if still valid
@@ -155,41 +155,45 @@ export class FooterRenderer {
 
     const presetDef = getPreset(this.presetName);
     const colors = presetDef.colors ?? getDefaultColors();
+    const settings = loadFooterSettings();
+    const labelMode = settings.showFullLabels ? "labeled" as const : "compact" as const;
 
-    // Render all segments
-    const allSegmentIds = [
-      ...presetDef.leftSegments,
-      ...presetDef.rightSegments,
-      ...presetDef.secondarySegments,
-    ];
+    // Collect all segment IDs from preset
+    const primaryIds = [...presetDef.leftSegments, ...presetDef.rightSegments];
+    const secondaryIds = [...presetDef.secondarySegments];
 
-    const renderedSegments: RenderedSegmentWithWidth[] = [];
-    for (const segId of allSegmentIds) {
-      if (!isSegmentEnabled(this.getGroupForSegment(segId), segId)) continue;
+    // Render segments grouped by their zone
+    const zones: Record<SegmentZone, RenderedSegmentWithWidth[]> = {
+      left: [],
+      center: [],
+      right: [],
+    };
+    const overflowZones: Record<SegmentZone, RenderedSegmentWithWidth[]> = {
+      left: [],
+      center: [],
+      right: [],
+    };
 
+    // Render primary segments and group by zone
+    for (const segId of primaryIds) {
+      const rendered = this.renderSegment(segId, colors, width, labelMode);
+      if (!rendered) 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,
-      });
+      const zone = segment?.zone ?? "center";
+      zones[zone].push(rendered);
+    }
+
+    // Render secondary segments
+    const secondaryRendered: RenderedSegmentWithWidth[] = [];
+    for (const segId of secondaryIds) {
+      const rendered = this.renderSegment(segId, colors, width, labelMode);
+      if (!rendered) continue;
+      secondaryRendered.push(rendered);
     }
 
-    if (renderedSegments.length === 0) {
+    // Check if we have any content
+    const totalSegments = zones.left.length + zones.center.length + zones.right.length;
+    if (totalSegments === 0 && secondaryRendered.length === 0) {
       this.lastLayoutResult = { topContent: "", secondaryContent: "" };
       this.lastLayoutWidth = width;
       this.lastLayoutTimestamp = now;
@@ -197,53 +201,46 @@ export class FooterRenderer {
       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);
+    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
+
+    // Calculate widths per zone
+    const leftWidth = this.measureZoneWidth(zones.left, sepWidth);
+    const rightWidth = this.measureZoneWidth(zones.right, sepWidth);
+    const numZoneSeps = (leftWidth > 0 ? 1 : 0) + (rightWidth > 0 ? 1 : 0);
+    const availableForCenter = width - leftWidth - rightWidth - numZoneSeps * zoneSepWidth - 2; // -2 for margins
+
+    // Overflow check: if center doesn't fit, move excess to overflow
+    const centerWidth = this.measureZoneWidth(zones.center, sepWidth);
+    if (centerWidth > Math.max(0, availableForCenter)) {
+      // 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)) {
+          fitWidth += needed;
+          cutoffIdx = i + 1;
+        } else {
+          break;
+        }
       }
+      const overflow = zones.center.splice(cutoffIdx);
+      overflowZones.center.push(...overflow);
     }
 
-    // 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
-      }
-    }
+    // Build top row with zones
+    const topContent = this.buildZoneRow(zones, width, sepDef, dimZoneSep);
 
-    const topContent = this.buildContentFromParts(topParts, sepDef);
-    const secondaryContent = this.buildContentFromParts(secondaryParts, sepDef);
+    // Build secondary row with overflow + preset secondary segments
+    const allSecondary = [...overflowZones.center, ...secondaryRendered];
+    const secondaryContent = this.buildContentFromParts(
+      allSecondary.map(s => s.content),
+      sepDef,
+    );
 
     this.lastLayoutResult = { topContent, secondaryContent };
     this.lastLayoutWidth = width;
@@ -253,6 +250,128 @@ export class FooterRenderer {
     return this.lastLayoutResult;
   }
 
+  /** Render a single segment by ID, returns null if not visible */
+  private renderSegment(
+    segId: string,
+    colors: ColorScheme,
+    fullWidth: number,
+    labelMode: "compact" | "labeled",
+  ): RenderedSegmentWithWidth | null {
+    if (!isSegmentEnabled(this.getGroupForSegment(segId), segId)) return null;
+
+    const segment = this.segmentLookup.get(segId);
+    if (!segment) return null;
+
+    const ctx: FooterSegmentContext = {
+      theme: this.getThemeLike(),
+      colors,
+      data: this.registry.getGroupData(this.getGroupForSegment(segId)),
+      width: fullWidth,
+      piContext: this.piContext,
+      footerData: this.footerData,
+      labelMode,
+    };
+
+    const rendered = segment.render(ctx);
+    if (!rendered.visible || !rendered.content) return null;
+
+    return {
+      content: rendered.content,
+      width: visibleWidth(rendered.content),
+      visible: true,
+    };
+  }
+
+  /** Measure total width of a zone's rendered segments */
+  private measureZoneWidth(segments: RenderedSegmentWithWidth[], sepWidth: number): number {
+    if (segments.length === 0) return 0;
+    let total = 0;
+    for (let i = 0; i < segments.length; i++) {
+      total += segments[i].width + (i > 0 ? sepWidth : 0);
+    }
+    return total;
+  }
+
+  /** Build a zone-based row string */
+  private buildZoneRow(
+    zones: Record<SegmentZone, RenderedSegmentWithWidth[]>,
+    fullWidth: number,
+    sepDef: { left: string },
+    dimZoneSep: string,
+  ): string {
+    const parts: string[] = [];
+
+    // Left zone
+    const leftContent = this.buildContentFromPartsRaw(
+      zones.left.map(s => s.content),
+      sepDef,
+    );
+
+    // Center zone
+    const centerContent = this.buildContentFromPartsRaw(
+      zones.center.map(s => s.content),
+      sepDef,
+    );
+
+    // Right zone
+    const rightContent = this.buildContentFromPartsRaw(
+      zones.right.map(s => s.content),
+      sepDef,
+    );
+
+    // Assemble zones with alignment
+    const leftWidth = zones.left.length > 0 ? this.measureZoneWidth(zones.left, visibleWidth(sepDef.left) + 2) : 0;
+    const rightWidth = zones.right.length > 0 ? this.measureZoneWidth(zones.right, visibleWidth(sepDef.left) + 2) : 0;
+
+    // Simple case: no zones → return empty
+    if (!leftContent && !centerContent && !rightContent) return "";
+
+    // Build with zone separators
+    let result = " "; // leading margin
+
+    if (leftContent) {
+      result += leftContent;
+    }
+
+    if (centerContent) {
+      if (leftContent) result += ` ${dimZoneSep} `;
+      result += centerContent;
+    }
+
+    if (rightContent) {
+      const currentLen = visibleWidth(result);
+      const rightStart = fullWidth - rightWidth - 1; // -1 for trailing margin
+      const gap = rightStart - currentLen;
+
+      if (gap > 0) {
+        // Pad to right-align the right zone
+        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
+        }
+      }
+
+      result += rightContent;
+    }
+
+    result += " "; // trailing margin
+    return result;
+  }
+
+  /** Build content from parts array (raw strings) */
+  private buildContentFromPartsRaw(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} `);
+  }
+
   // ─── Helpers ─────────────────────────────────────────────────────────────
 
   private buildContentFromParts(parts: string[], sepDef: { left: string }): string {
@@ -265,7 +384,7 @@ export class FooterRenderer {
   /** Map a segment ID to its group ID */
   private getGroupForSegment(segId: string): string {
     // Core segments
-    const coreIds = ["model", "api_state", "tool_count", "git", "context_pct", "cost", "tokens_total", "tokens_in", "tokens_out", "session", "hostname", "time"];
+    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";
 
     // Compactor segments