@pi-unipi/footer 0.1.3 → 2.0.0

package/src/tui/settings-tui.ts

@@ -1,20 +1,36 @@
 /**
  * @pi-unipi/footer — Settings TUI
  *
- * Interactive settings overlay for toggling groups and individual segments.
- * Uses pi-tui SettingsList for proper vim/arrow keybinding support and search.
- * Modeled after the compactor settings overlay pattern.
+ * Unified settings overlay with 3 categories:
+ * - Appearance: preset, separator, icon style, full labels
+ * - Segments: group → segment drill-down
+ * - Labels & Help: label mode, zone headers
+ *
+ * Uses pi-tui SettingsList for vim/arrow keybinding support.
  */
 
-import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
+import type { ExtensionAPI, ExtensionCommandContext } from "@mariozechner/pi-coding-agent";
 import { SettingsList, type SettingItem, type SettingsListTheme } from "@mariozechner/pi-tui";
 import { loadFooterSettings, saveFooterSettings } from "../config.js";
-import type { FooterGroup, FooterSettings } from "../types.js";
+import { PRESET_NAMES } from "../presets.js";
+import { setIconStyle } from "../rendering/icons.js";
+import type { FooterGroup, FooterSettings, SeparatorStyle, IconStyle } from "../types.js";
 
 // ─── Section types ─────────────────────────────────────────────────────
 
-type Section = "groups" | "segments";
-const SECTIONS: Section[] = ["groups", "segments"];
+type Section = "appearance" | "segments" | "labels";
+const SECTIONS: Section[] = ["appearance", "segments", "labels"];
+const SECTION_LABELS: Record<Section, string> = {
+  appearance: "Appearance",
+  segments: "Segments",
+  labels: "Labels & Help",
+};
+
+// ─── Valid option values ───────────────────────────────────────────────
+
+const SEPARATOR_STYLES: SeparatorStyle[] = ["powerline", "powerline-thin", "slash", "pipe", "dot", "ascii"];
+const ICON_STYLES: IconStyle[] = ["nerd", "emoji", "text"];
+const ZONE_SEPARATOR_OPTIONS = ["│", "╎", "·", "─", "none"];
 
 // ─── Theme for SettingsList ────────────────────────────────────────────
 
@@ -44,17 +60,16 @@ function borderLine(innerWidth: number, edge: "top" | "bottom"): string {
   return `\x1b[90m${left}${"─".repeat(innerWidth)}${right}\x1b[0m`;
 }
 
-// Visible width helper (strip ANSI)
 function visibleWidth(text: string): number {
   return text.replace(/\x1b\[[0-9;]*m/g, "").length;
 }
 
 // ─── Show the footer settings overlay ──────────────────────────────────
 
-export function showFooterSettings(ctx: any, groups: FooterGroup[]): void {
-  ctx.ui.custom(
-    (tui: any, _theme: any, _keybindings: any, done: (result: void) => void) => {
-      const overlay = new FooterSettingsOverlay(groups);
+export function showFooterSettings(ctx: ExtensionCommandContext, groups: FooterGroup[], onSettingsChanged?: () => void): void {
+  ctx.ui.custom<void>(
+    (tui, _theme, _keybindings, done) => {
+      const overlay = new FooterSettingsOverlay(groups, onSettingsChanged);
       overlay.onClose = () => done();
 
       return {
@@ -71,8 +86,7 @@ export function showFooterSettings(ctx: any, groups: FooterGroup[]): void {
     {
       overlay: true,
       overlayOptions: () => ({
-        verticalAlign: "center",
-        horizontalAlign: "center",
+        anchor: "center" as const,
       }),
     },
   ).catch(() => {
@@ -82,53 +96,83 @@ export function showFooterSettings(ctx: any, groups: FooterGroup[]): void {
 
 // ─── Footer settings overlay component ─────────────────────────────────
 
-/**
- * Footer settings overlay component.
- * Uses SettingsList from pi-tui for proper vim/arrow keybinding support.
- * Two sections: Groups (toggle groups) and Segments (toggle segments within a group).
- */
 class FooterSettingsOverlay {
   private settings: FooterSettings;
   private groups: FooterGroup[];
-  private section: Section = "groups";
+  private section: Section = "appearance";
   private selectedGroupId: string | null = null;
   onClose?: () => void;
+  private onSettingsChanged?: () => void;
 
   // Per-section SettingsList instances
+  private appearanceList!: SettingsList;
   private groupList!: SettingsList;
   private segmentList: SettingsList | null = null;
+  private labelsList!: SettingsList;
 
-  constructor(groups: FooterGroup[]) {
+  constructor(groups: FooterGroup[], onSettingsChanged?: () => void) {
     this.settings = loadFooterSettings();
     this.groups = groups;
+    this.onSettingsChanged = onSettingsChanged;
+    this.buildAppearanceList();
     this.buildGroupList();
+    this.buildLabelsList();
   }
 
   invalidate(): void {
+    this.appearanceList?.invalidate();
     this.groupList?.invalidate();
     this.segmentList?.invalidate();
+    this.labelsList?.invalidate();
   }
 
   handleInput(data: string): void {
-    // Tab switches section (only if segments are available)
+    // Tab cycles sections
     if (data === "\t" || data === "\x1b[Z") {
-      if (this.section === "groups" && this.selectedGroupId) {
-        this.section = "segments";
+      const idx = SECTIONS.indexOf(this.section);
+      if (data === "\t") {
+        this.section = SECTIONS[(idx + 1) % SECTIONS.length];
       } else {
-        this.section = "groups";
+        this.section = SECTIONS[(idx - 1 + SECTIONS.length) % SECTIONS.length];
+      }
+      // If leaving segments drill-down, go back to groups
+      if (this.section !== "segments") {
         this.selectedGroupId = null;
+        this.segmentList = null;
       }
       return;
     }
 
-    // Escape / q — close
-    if (data === "\x1b" || data === "q") {
+    // q — always close
+    if (data === "q") {
       this.onClose?.();
       return;
     }
 
-    // Enter in groups mode — enter segments for the focused group
-    if (data === "\r" && this.section === "groups") {
+    // Escape — back from drill-down, or close at root
+    if (data === "\x1b") {
+      if (this.section === "segments" && this.selectedGroupId) {
+        this.backToGroups();
+      } else {
+        this.onClose?.();
+      }
+      return;
+    }
+
+    // j — navigate down (same as down arrow)
+    if (data === "j") {
+      this.currentList?.handleInput("\x1b[B");
+      return;
+    }
+
+    // k — navigate up (same as up arrow)
+    if (data === "k") {
+      this.currentList?.handleInput("\x1b[A");
+      return;
+    }
+
+    // l — drill into group from segments section (same as Enter)
+    if (data === "l" && this.section === "segments" && !this.selectedGroupId) {
       const focusedId = this.getFocusedGroupId();
       if (focusedId) {
         this.enterSegmentsMode(focusedId);
@@ -136,8 +180,35 @@ class FooterSettingsOverlay {
       return;
     }
 
-    // Left arrow / backspace in segments — back to groups
-    if (this.section === "segments" && (data === "\x1b[D" || data === "h" || data === "\x7f")) {
+    // Space — toggle on/off
+    if (data === " ") {
+      this.currentList?.handleInput("\r");
+      return;
+    }
+
+    // h — back from segment drill-down
+    if (data === "h" && this.section === "segments" && this.selectedGroupId) {
+      this.backToGroups();
+      return;
+    }
+
+    // / — focus search in segments section
+    if (data === "/") {
+      this.currentList?.handleInput("/");
+      return;
+    }
+
+    // Enter in segments/groups mode — enter segments for the focused group
+    if (data === "\r" && this.section === "segments" && !this.selectedGroupId) {
+      const focusedId = this.getFocusedGroupId();
+      if (focusedId) {
+        this.enterSegmentsMode(focusedId);
+      }
+      return;
+    }
+
+    // Left arrow / backspace in segment drill-down — back to groups
+    if (this.section === "segments" && this.selectedGroupId && (data === "\x1b[D" || data === "\x7f")) {
       this.backToGroups();
       return;
     }
@@ -147,12 +218,65 @@ class FooterSettingsOverlay {
   }
 
   private get currentList(): SettingsList | null {
-    if (this.section === "segments") return this.segmentList;
-    return this.groupList;
+    switch (this.section) {
+      case "appearance": return this.appearanceList;
+      case "segments":
+        return this.segmentList ?? this.groupList;
+      case "labels": return this.labelsList;
+    }
   }
 
   // ─── Build SettingsList instances ──────────────────────────────────
 
+  private buildAppearanceList(): void {
+    const items: SettingItem[] = [
+      {
+        id: "preset",
+        label: "Preset",
+        description: "Footer layout preset",
+        currentValue: this.settings.preset,
+        values: PRESET_NAMES,
+      },
+      {
+        id: "separator",
+        label: "Separator",
+        description: "Segment divider style",
+        currentValue: this.settings.separator,
+        values: SEPARATOR_STYLES,
+      },
+      {
+        id: "iconStyle",
+        label: "Icon Style",
+        description: "Icon glyph set (nerd requires Nerd Font)",
+        currentValue: this.settings.iconStyle,
+        values: ICON_STYLES,
+      },
+      {
+        id: "zoneSeparator",
+        label: "Zone Separator",
+        description: "Divider between zones (left · center · right)",
+        currentValue: this.settings.zoneSeparator ?? "│",
+        values: ZONE_SEPARATOR_OPTIONS,
+      },
+      {
+        id: "showFullLabels",
+        label: "Full Labels",
+        description: "Show descriptive labels instead of abbreviations",
+        currentValue: this.settings.showFullLabels ? "on" : "off",
+        values: ["on", "off"],
+      },
+    ];
+
+    this.appearanceList = new SettingsList(
+      items,
+      Math.min(items.length + 2, 12),
+      THEME,
+      (id, newValue) => this.onAppearanceChange(id, newValue),
+      () => this.onClose?.(),
+      { enableSearch: false },
+    );
+  }
+
   private buildGroupList(): void {
     const items: SettingItem[] = this.groups.map((group) => {
       const groupSettings = this.settings.groups[group.id] ?? { show: group.defaultShow, segments: {} };
@@ -166,7 +290,7 @@ class FooterSettingsOverlay {
       return {
         id: group.id,
         label: group.name,
-        description: `${enabledCount}/${segCount} segments active`,
+        description: `${enabledCount}/${segCount} segments · Enter to drill down`,
         currentValue: isEnabled ? "on" : "off",
         values: ["on", "off"],
       };
@@ -195,8 +319,8 @@ class FooterSettingsOverlay {
       const isEnabled = groupSettings.segments?.[seg.id] ?? seg.defaultShow;
       return {
         id: seg.id,
-        label: seg.label,
-        description: "",
+        label: `${seg.shortLabel}  ${seg.label}`,
+        description: seg.description,
         currentValue: isEnabled ? "on" : "off",
         values: ["on", "off"],
       };
@@ -212,16 +336,69 @@ class FooterSettingsOverlay {
     );
   }
 
+  private buildLabelsList(): void {
+    const items: SettingItem[] = [
+      {
+        id: "showFullLabelsAlways",
+        label: "Full Labels",
+        description: "Always show descriptive labels instead of abbreviations",
+        currentValue: this.settings.showFullLabels ? "on" : "off",
+        values: ["on", "off"],
+      },
+      {
+        id: "showZoneHeaders",
+        label: "Zone Headers",
+        description: "Show zone labels (Identity / Metrics / Time)",
+        currentValue: "off", // TODO: implement zone headers
+        values: ["on", "off"],
+      },
+    ];
+
+    this.labelsList = new SettingsList(
+      items,
+      Math.min(items.length + 2, 12),
+      THEME,
+      (id, newValue) => this.onLabelsChange(id, newValue),
+      () => this.onClose?.(),
+      { enableSearch: false },
+    );
+  }
+
   // ─── Change handlers ───────────────────────────────────────────────
 
+  private onAppearanceChange(id: string, newValue: string): void {
+    switch (id) {
+      case "preset":
+        this.settings.preset = newValue;
+        break;
+      case "separator":
+        this.settings.separator = newValue as SeparatorStyle;
+        break;
+      case "iconStyle":
+        this.settings.iconStyle = newValue as IconStyle;
+        setIconStyle(newValue as IconStyle);
+        break;
+      case "zoneSeparator":
+        this.settings.zoneSeparator = newValue;
+        break;
+      case "showFullLabels":
+        this.settings.showFullLabels = newValue === "on";
+        // Sync with labels section
+        this.labelsList.updateValue("showFullLabelsAlways", newValue);
+        break;
+    }
+    saveFooterSettings(this.settings);
+    this.appearanceList.updateValue(id, newValue);
+    this.onSettingsChanged?.();
+  }
+
   private onGroupChange(groupId: string, newValue: string): void {
     const groupSettings = this.settings.groups[groupId] ?? { show: true, segments: {} };
     groupSettings.show = newValue === "on";
     this.settings.groups[groupId] = groupSettings;
     saveFooterSettings(this.settings);
-
-    // Update display
     this.groupList.updateValue(groupId, newValue);
+    this.onSettingsChanged?.();
   }
 
   private onSegmentChange(groupId: string, segmentId: string, newValue: string): void {
@@ -230,41 +407,51 @@ class FooterSettingsOverlay {
     groupSettings.segments[segmentId] = newValue === "on";
     this.settings.groups[groupId] = groupSettings;
     saveFooterSettings(this.settings);
-
-    // Update the segment list display
     this.segmentList?.updateValue(segmentId, newValue);
+    this.onSettingsChanged?.();
+  }
 
-    // Update group description (segment count)
-    const group = this.groups.find(g => g.id === groupId);
-    if (group) {
-      const segCount = group.segments.length;
-      const enabledCount = group.segments.filter(s => {
-        const segOverride = groupSettings.segments?.[s.id];
-        return segOverride !== undefined ? segOverride : s.defaultShow;
-      }).length;
-      this.groupList.updateValue(groupId, groupSettings.show ? "on" : "off");
+  private onLabelsChange(id: string, newValue: string): void {
+    switch (id) {
+      case "showFullLabelsAlways":
+        this.settings.showFullLabels = newValue === "on";
+        // Sync with appearance section
+        this.appearanceList.updateValue("showFullLabels", newValue);
+        break;
+      case "showZoneHeaders":
+        // TODO: implement zone headers setting
+        break;
     }
+    saveFooterSettings(this.settings);
+    this.labelsList.updateValue(id, newValue);
+    this.onSettingsChanged?.();
   }
 
   // ─── Section navigation ────────────────────────────────────────────
 
   private getFocusedGroupId(): string | null {
-    // Walk the group list items in order; return the first one
-    // that matches the focused index. Since SettingsList doesn't
-    // expose selectedIndex, we track by the group array order.
-    return this.selectedGroupId ?? this.groups[0]?.id ?? null;
+    if (this.selectedGroupId) return this.selectedGroupId;
+    // Access SettingsList internal state — it doesn't expose a getSelectedId() method
+    const list = this.groupList as unknown as {
+      selectedIndex: number;
+      items: SettingItem[];
+      filteredItems: SettingItem[];
+      searchEnabled: boolean;
+    };
+    const displayItems = list.searchEnabled ? list.filteredItems : list.items;
+    return displayItems[list.selectedIndex]?.id ?? null;
   }
 
   private enterSegmentsMode(groupId: string): void {
     this.selectedGroupId = groupId;
-    this.section = "segments";
     this.buildSegmentList(groupId);
   }
 
   private backToGroups(): void {
-    this.section = "groups";
     this.selectedGroupId = null;
     this.segmentList = null;
+    // Rebuild group list to reflect segment changes
+    this.buildGroupList();
   }
 
   // ─── Render ────────────────────────────────────────────────────────
@@ -279,19 +466,16 @@ class FooterSettingsOverlay {
 
     // Section tabs
     const tabParts = SECTIONS.map((s) => {
-      const label = s.charAt(0).toUpperCase() + s.slice(1);
+      const label = SECTION_LABELS[s];
       if (s === this.section) {
         return `\x1b[1m\x1b[36m[${label}]\x1b[0m`;
       }
-      if (s === "segments" && !this.selectedGroupId) {
-        return `\x1b[2m${label}\x1b[0m`; // dimmed if no group selected
-      }
       return `\x1b[2m${label}\x1b[0m`;
     });
     lines.push(frameLine(`  ${tabParts.join("  ")}`, innerWidth));
     lines.push(ruleLine(innerWidth));
 
-    // Section content (rendered by SettingsList)
+    // Section content
     const activeList = this.currentList;
     if (activeList) {
       const contentLines = activeList.render(innerWidth - 2);
@@ -302,9 +486,15 @@ class FooterSettingsOverlay {
 
     // Footer hints
     lines.push(ruleLine(innerWidth));
-    const hints = this.section === "groups"
-      ? "↑↓ navigate · Space toggle · Enter segments · / search · q close"
-      : "↑↓ navigate · Space toggle · ← back · / search · q close";
+
+    let hints: string;
+    if (this.section === "segments" && this.selectedGroupId) {
+      hints = "j/k navigate · Space toggle · h/Esc back · / search · q close";
+    } else if (this.section === "segments") {
+      hints = "j/k navigate · Space toggle · l/Enter segments · / search · q close";
+    } else {
+      hints = "j/k navigate · Space/Enter change · Tab section · q close";
+    }
     lines.push(frameLine(`\x1b[2m${hints}\x1b[0m`, innerWidth));
     lines.push(borderLine(innerWidth, "bottom"));
 

package/src/types.ts

@@ -9,39 +9,64 @@ import type { Theme, ThemeColor } from "@mariozechner/pi-coding-agent";
 
 // ─── Semantic Colors ────────────────────────────────────────────────────────
 
+/** Zone assignment for segment positioning */
+export type SegmentZone = "left" | "center" | "right";
+
 /** Semantic color names mapped to segment groups */
 export type SemanticColor =
+  // ── Model & Identity (Left zone) ──
   | "model"
   | "path"
   | "git"
-  | "compactor"
-  | "memory"
-  | "mcp"
-  | "ralph"
-  | "ralphOn"
-  | "ralphOff"
+  | "gitClean"
+  | "gitDirty"
+  | "session"
+  | "worktree"
+  // ── Workflow (Left zone) ──
   | "workflow"
+  | "workflowNone"
   | "workflowBrainstorm"
   | "workflowPlan"
   | "workflowWork"
   | "workflowReview"
   | "workflowAuto"
+  | "workflowDebug"
+  | "workflowChoreExec"
   | "workflowOther"
+  // ── TPS tiers (Center zone) ──
+  | "tpsSlow"
+  | "tpsModerate"
+  | "tpsGood"
+  | "tpsFast"
+  | "tpsBlazing"
+  | "tpsIdle"
+  // ── Metrics (Center zone) ──
+  | "compactor"
+  | "memory"
+  | "mcp"
+  | "ralph"
+  | "ralphOn"
+  | "ralphOff"
   | "kanboard"
   | "notify"
-  | "separator"
-  | "border"
   | "context"
   | "contextWarn"
   | "contextError"
   | "cost"
   | "tokens"
+  // ── Time (Right zone) ──
+  | "clock"
+  | "duration"
+  // ── Thinking levels ──
   | "thinking"
   | "thinkingMinimal"
   | "thinkingLow"
   | "thinkingMedium"
   | "thinkingHigh"
-  | "thinkingXhigh";
+  | "thinkingXhigh"
+  // ── UI chrome ──
+  | "separator"
+  | "border";
 
 /** A theme color name or custom hex color */
 export type ColorValue = ThemeColor | `#${string}`;
@@ -98,6 +123,8 @@ export interface FooterSegmentContext {
   piContext?: unknown;
   /** Footer data provider (for core segments that need git, extension statuses) */
   footerData?: unknown;
+  /** Label mode: compact (shortLabel) or labeled (full label) */
+  labelMode?: "compact" | "labeled";
 }
 
 /** Segment render function type */
@@ -107,8 +134,14 @@ export type SegmentRenderFn = (ctx: FooterSegmentContext) => RenderedSegment;
 export interface FooterSegment {
   /** Unique segment identifier (e.g., "model", "compactions") */
   id: string;
-  /** Display label */
+  /** Display label (full name, used in labeled mode) */
   label: string;
+  /** Compact display name (used in compact mode, e.g. "ses", "tps", "ctx") */
+  shortLabel: string;
+  /** Human-readable description (shown in footer-help overlay) */
+  description: string;
+  /** Layout zone assignment */
+  zone: SegmentZone;
   /** Icon glyph (Nerd Font or ASCII) */
   icon: string;
   /** Render function */
@@ -153,6 +186,10 @@ export interface FooterSettings {
   separator: SeparatorStyle;
   /** Icon style: nerd (Nerd Font glyphs), emoji (Unicode emoji), text (plain labels) */
   iconStyle: IconStyle;
+  /** Zone separator string (between zones, default: "│") */
+  zoneSeparator?: string;
+  /** Show full labels instead of compact short labels */
+  showFullLabels?: boolean;
   /** Per-group settings */
   groups: Record<string, FooterGroupSettings>;
 }
@@ -174,10 +211,12 @@ export interface PresetDef {
   rightSegments: string[];
   /** Secondary row segments (shown when terminal is narrow) */
   secondarySegments: string[];
-  /** Separator style for this preset */
-  separator: SeparatorStyle;
   /** Color scheme for this preset */
   colors?: ColorScheme;
   /** Per-segment options */
   segmentOptions?: Record<string, Record<string, unknown>>;
+  /** Zone order (default: left, center, right) */
+  zoneOrder?: ("left" | "center" | "right")[];
+  /** Zone separator string (between zones) */
+  zoneSeparator?: string;
 }