@pi-unipi/compactor 0.1.7 → 0.2.2

package/src/tui/settings-overlay.ts

@@ -2,34 +2,27 @@
  * @pi-unipi/compactor — TUI Settings Overlay
  *
  * Interactive settings editor for compactor configuration.
- * Navigate strategies, toggle on/off, cycle modes, apply presets.
+ * Uses pi-tui SettingsList for proper keybinding support.
+ * Tabbed sections (Presets / Strategies / Pipeline), search,
+ * preset preview, per-project override.
  */
 
 import type { Component } from "@mariozechner/pi-tui";
-import { truncateToWidth } from "@mariozechner/pi-tui";
-import { loadConfig, saveConfig } from "../config/manager.js";
+import { truncateToWidth, visibleWidth, SettingsList, type SettingItem, type SettingsListTheme } from "@mariozechner/pi-tui";
+import { loadConfig, saveConfig, projectConfigPath } from "../config/manager.js";
 import { applyPreset, detectPreset } from "../config/presets.js";
 import type { CompactorPreset } from "../types.js";
 import type { CompactorConfig } from "../types.js";
+import { existsSync, unlinkSync } from "node:fs";
 
-/** ANSI escape codes */
-const ansi = {
-  reset: "\x1b[0m",
-  bold: "\x1b[1m",
-  dim: "\x1b[2m",
-  cyan: "\x1b[36m",
-  green: "\x1b[32m",
-  yellow: "\x1b[33m",
-  red: "\x1b[31m",
-  gray: "\x1b[90m",
-  magenta: "\x1b[35m",
-};
+// ─── Section types ─────────────────────────────────────────────────────
+
+type Section = "presets" | "strategies" | "pipeline";
+const SECTIONS: Section[] = ["presets", "strategies", "pipeline"];
 
-const TOGGLE_ON = `${ansi.green}●${ansi.reset}`;
-const TOGGLE_OFF = `${ansi.dim}○${ansi.reset}`;
+// ─── Strategy item definition ──────────────────────────────────────────
 
-/** Strategy item definition */
-interface StrategyItem {
+interface StrategyDef {
   key: string;
   label: string;
   description: string;
@@ -40,25 +33,34 @@ interface StrategyItem {
   setMode: (c: CompactorConfig, v: string) => void;
 }
 
-/** Top-level debug toggle that mirrors config.debug */
-const GLOBAL_DEBUG: StrategyItem = {
-  key: "debug",
-  label: "Verbose Debug",
-  description: "Log ALL compaction events to console",
-  modes: ["on", "off"],
-  getEnabled: (c) => c.debug,
-  setEnabled: (c, v) => (c.debug = v),
-  getMode: (c) => (c.debug ? "on" : "off"),
-  setMode: (c, v) => (c.debug = v === "on"),
-};
+/** Pipeline feature item */
+interface PipelineDef {
+  key: string;
+  label: string;
+  description: string;
+  group: string;
+  getValue: (c: CompactorConfig) => boolean;
+  setValue: (c: CompactorConfig, v: boolean) => void;
+}
+
+// ─── Static definitions ────────────────────────────────────────────────
 
-/** All configurable strategies */
-const STRATEGIES: StrategyItem[] = [
+const STRATEGIES: StrategyDef[] = [
+  {
+    key: "debug",
+    label: "Verbose Debug",
+    description: "Log ALL compaction events to console",
+    modes: ["on", "off"],
+    getEnabled: (c) => c.debug,
+    setEnabled: (c, v) => (c.debug = v),
+    getMode: (c) => (c.debug ? "on" : "off"),
+    setMode: (c, v) => (c.debug = v === "on"),
+  },
   {
     key: "sessionGoals",
     label: "Session Goals",
     description: "Extract goals from conversation",
-    modes: ["full", "minimal"],
+    modes: ["full", "brief", "off"],
     getEnabled: (c) => c.sessionGoals.enabled,
     setEnabled: (c, v) => (c.sessionGoals.enabled = v),
     getMode: (c) => c.sessionGoals.mode,
@@ -68,7 +70,7 @@ const STRATEGIES: StrategyItem[] = [
     key: "filesAndChanges",
     label: "Files & Changes",
     description: "Track file activity",
-    modes: ["all", "modified", "none"],
+    modes: ["all", "modified-only", "off"],
     getEnabled: (c) => c.filesAndChanges.enabled,
     setEnabled: (c, v) => (c.filesAndChanges.enabled = v),
     getMode: (c) => c.filesAndChanges.mode,
@@ -78,7 +80,7 @@ const STRATEGIES: StrategyItem[] = [
     key: "commits",
     label: "Commits",
     description: "Extract git commits",
-    modes: ["full", "minimal", "none"],
+    modes: ["full", "brief", "off"],
     getEnabled: (c) => c.commits.enabled,
     setEnabled: (c, v) => (c.commits.enabled = v),
     getMode: (c) => c.commits.mode,
@@ -88,7 +90,7 @@ const STRATEGIES: StrategyItem[] = [
     key: "outstandingContext",
     label: "Outstanding Context",
     description: "Track blockers and pending items",
-    modes: ["full", "minimal"],
+    modes: ["full", "critical-only", "off"],
     getEnabled: (c) => c.outstandingContext.enabled,
     setEnabled: (c, v) => (c.outstandingContext.enabled = v),
     getMode: (c) => c.outstandingContext.mode,
@@ -98,7 +100,7 @@ const STRATEGIES: StrategyItem[] = [
     key: "userPreferences",
     label: "User Preferences",
     description: "Track learned preferences",
-    modes: ["all", "minimal"],
+    modes: ["all", "recent-only", "off"],
     getEnabled: (c) => c.userPreferences.enabled,
     setEnabled: (c, v) => (c.userPreferences.enabled = v),
     getMode: (c) => c.userPreferences.mode,
@@ -108,7 +110,7 @@ const STRATEGIES: StrategyItem[] = [
     key: "briefTranscript",
     label: "Brief Transcript",
     description: "Rolling window of recent messages",
-    modes: ["full", "compact", "minimal"],
+    modes: ["full", "compact", "minimal", "off"],
     getEnabled: (c) => c.briefTranscript.enabled,
     setEnabled: (c, v) => (c.briefTranscript.enabled = v),
     getMode: (c) => c.briefTranscript.mode,
@@ -118,7 +120,7 @@ const STRATEGIES: StrategyItem[] = [
     key: "sessionContinuity",
     label: "Session Continuity",
     description: "XML resume snapshot for compaction survival",
-    modes: ["full", "minimal"],
+    modes: ["full", "essential-only", "off"],
     getEnabled: (c) => c.sessionContinuity.enabled,
     setEnabled: (c, v) => (c.sessionContinuity.enabled = v),
     getMode: (c) => c.sessionContinuity.mode,
@@ -128,7 +130,7 @@ const STRATEGIES: StrategyItem[] = [
     key: "fts5Index",
     label: "FTS5 Index",
     description: "Full-text search index",
-    modes: ["auto", "manual", "disabled"],
+    modes: ["auto", "manual", "off"],
     getEnabled: (c) => c.fts5Index.enabled,
     setEnabled: (c, v) => (c.fts5Index.enabled = v),
     getMode: (c) => c.fts5Index.mode,
@@ -138,7 +140,7 @@ const STRATEGIES: StrategyItem[] = [
     key: "sandboxExecution",
     label: "Sandbox Execution",
     description: "Polyglot code execution",
-    modes: ["all", "safe", "none"],
+    modes: ["all", "safe-only", "off"],
     getEnabled: (c) => c.sandboxExecution.enabled,
     setEnabled: (c, v) => (c.sandboxExecution.enabled = v),
     getMode: (c) => c.sandboxExecution.mode,
@@ -148,7 +150,7 @@ const STRATEGIES: StrategyItem[] = [
     key: "toolDisplay",
     label: "Tool Display",
     description: "Override tool output rendering",
-    modes: ["opencode", "summary", "verbose", "minimal"],
+    modes: ["opencode", "balanced", "verbose", "custom"],
     getEnabled: (c) => c.toolDisplay.enabled,
     setEnabled: (c, v) => (c.toolDisplay.enabled = v),
     getMode: (c) => c.toolDisplay.mode,
@@ -156,149 +158,357 @@ const STRATEGIES: StrategyItem[] = [
   },
 ];
 
-/** All navigable items: debug toggle first, then strategies */
-const ALL_ITEMS: StrategyItem[] = [GLOBAL_DEBUG, ...STRATEGIES];
+const PIPELINE_ITEMS: PipelineDef[] = [
+  { key: "ttlCache", label: "TTL Cache", description: "Cache with time-based expiry", group: "On Compaction", getValue: (c) => c.pipeline.ttlCache, setValue: (c, v) => (c.pipeline.ttlCache = v) },
+  { key: "autoInjection", label: "Auto Injection", description: "Inject behavioral state after compaction", group: "On Compaction", getValue: (c) => c.pipeline.autoInjection, setValue: (c, v) => (c.pipeline.autoInjection = v) },
+  { key: "mmapPragma", label: "MMap Pragma", description: "Use mmap for SQLite I/O", group: "On Compaction", getValue: (c) => c.pipeline.mmapPragma, setValue: (c, v) => (c.pipeline.mmapPragma = v) },
+  { key: "proximityReranking", label: "Proximity Reranking", description: "Rerank search results by proximity", group: "On Search", getValue: (c) => c.pipeline.proximityReranking, setValue: (c, v) => (c.pipeline.proximityReranking = v) },
+  { key: "timelineSort", label: "Timeline Sort", description: "Sort session events chronologically", group: "On Search", getValue: (c) => c.pipeline.timelineSort, setValue: (c, v) => (c.pipeline.timelineSort = v) },
+  { key: "progressiveThrottling", label: "Progressive Throttling", description: "Slow down indexing for large projects", group: "On Index", getValue: (c) => c.pipeline.progressiveThrottling, setValue: (c, v) => (c.pipeline.progressiveThrottling = v) },
+];
+
+const PRESETS: CompactorPreset[] = ["precise", "balanced", "thorough", "lean"];
+
+const PRESET_DESCRIPTIONS: Record<string, { summary: string; detail: string }> = {
+  precise: {
+    summary: "Code-heavy, minimal waste — compaction: full, FTS5: manual, pipeline: 2/6 on",
+    detail: "Max token savings. Compaction: full. Display: minimal.\nFTS5: manual. Sandbox: safe-only. Pipeline: ttlCache+mmap on.",
+  },
+  balanced: {
+    summary: "Daily use (default) — all strategies moderate, pipeline: all on",
+    detail: "Moderate all strategies. Display: balanced.\nFTS5: auto. Sandbox: all. Pipeline: all 6 on.",
+  },
+  thorough: {
+    summary: "Debug/audit — everything on, full transcript, pipeline: all on",
+    detail: "Everything enabled. Display: verbose.\nFTS5: auto. Sandbox: all. Pipeline: all 6 on.",
+  },
+  lean: {
+    summary: "Quick fixes, short sessions — compaction only, pipeline: all off",
+    detail: "Compaction only. Display: opencode.\nFTS5: off. Sandbox: off. Pipeline: all 6 off.",
+  },
+};
+
+// ─── Theme for SettingsList ────────────────────────────────────────────
+
+const THEME: SettingsListTheme = {
+  label: (text, selected) => selected ? `\x1b[1m${text}\x1b[0m` : `\x1b[2m${text}\x1b[0m`,
+  value: (text, selected) => selected ? `\x1b[35m${text}\x1b[0m` : `\x1b[35m${text}\x1b[0m`,
+  description: (text) => `\x1b[90m${text}\x1b[0m`,
+  cursor: `\x1b[36m▸\x1b[0m`,
+  hint: (text) => `\x1b[2m${text}\x1b[0m`,
+};
+
+// ─── Helper: frame a line inside box drawing ───────────────────────────
+
+function frameLine(content: string, innerWidth: number): string {
+  const truncated = truncateToWidth(content, innerWidth, "");
+  const padding = Math.max(0, innerWidth - visibleWidth(truncated));
+  return `\x1b[90m│\x1b[0m${truncated}${" ".repeat(padding)}\x1b[90m│\x1b[0m`;
+}
+
+function ruleLine(innerWidth: number): string {
+  return `\x1b[90m├${"─".repeat(innerWidth)}┤\x1b[0m`;
+}
 
-const PRESETS: CompactorPreset[] = ["opencode", "balanced", "verbose", "minimal"];
+function borderLine(innerWidth: number, edge: "top" | "bottom"): string {
+  const left = edge === "top" ? "┌" : "└";
+  const right = edge === "top" ? "┐" : "┘";
+  return `\x1b[90m${left}${"─".repeat(innerWidth)}${right}\x1b[0m`;
+}
+
+// ─── Main component ────────────────────────────────────────────────────
 
 /**
  * Settings overlay component for compactor configuration.
+ * Uses SettingsList from pi-tui for proper vim/arrow keybinding support.
  */
 export class CompactorSettingsOverlay implements Component {
   private config: CompactorConfig;
-  private selectedIndex = 0;
-  private mode = "strategy" as "strategy" | "preset";
-  private presetIndex = 0;
+  private section: Section = "presets";
+  private perProjectOverride = false;
+  private projectDir: string;
+  private saved = false;
   onClose?: () => void;
 
-  constructor() {
-    this.config = loadConfig();
-    const currentPreset = detectPreset(this.config);
-    this.presetIndex = PRESETS.indexOf(currentPreset as CompactorPreset);
-    if (this.presetIndex < 0) this.presetIndex = 0;
+  // Per-section SettingsList instances
+  private presetList!: SettingsList;
+  private strategyList!: SettingsList;
+  private pipelineList!: SettingsList;
+
+  constructor(opts?: { cwd?: string }) {
+    this.projectDir = opts?.cwd ?? process.cwd();
+    this.config = loadConfig(this.projectDir);
+
+    // Detect per-project override
+    const projPath = projectConfigPath(this.projectDir);
+    this.perProjectOverride = existsSync(projPath);
+
+    this.buildLists();
+  }
+
+  invalidate(): void {
+    this.currentList?.invalidate();
+  }
+
+  // ─── Build SettingsList instances ──────────────────────────────────
+
+  private buildLists(): void {
+    // ── Presets list ──────────────────────────────────────────────────
+    const presetItems: SettingItem[] = PRESETS.map((name) => {
+      const desc = PRESET_DESCRIPTIONS[name]!;
+      return {
+        id: `preset:${name}`,
+        label: name.charAt(0).toUpperCase() + name.slice(1),
+        description: desc.summary,
+        currentValue: detectPreset(this.config) === name ? "✓ active" : "",
+        values: ["apply"],
+      };
+    });
+    // Add per-project override as a setting item
+    presetItems.push({
+      id: "projectOverride",
+      label: "Project Override",
+      description: "Override global config for this project only",
+      currentValue: this.perProjectOverride ? "enabled" : "disabled",
+      values: ["enabled", "disabled"],
+    });
+
+    this.presetList = new SettingsList(
+      presetItems,
+      8,
+      THEME,
+      (id, newValue) => this.onPresetChange(id, newValue),
+      () => this.onCancel(),
+    );
+
+    // ── Strategies list ───────────────────────────────────────────────
+    const strategyItems: SettingItem[] = STRATEGIES.map((s) => ({
+      id: `strategy:${s.key}`,
+      label: s.label,
+      description: s.description,
+      currentValue: this.formatStrategyValue(s),
+      values: s.modes,
+    }));
+
+    this.strategyList = new SettingsList(
+      strategyItems,
+      12,
+      THEME,
+      (id, newValue) => this.onStrategyChange(id, newValue),
+      () => this.onCancel(),
+      { enableSearch: true },
+    );
+
+    // ── Pipeline list ─────────────────────────────────────────────────
+    const pipelineItems: SettingItem[] = PIPELINE_ITEMS.map((p) => ({
+      id: `pipeline:${p.key}`,
+      label: `${p.group}: ${p.label}`,
+      description: p.description,
+      currentValue: p.getValue(this.config) ? "on" : "off",
+      values: ["on", "off"],
+    }));
+
+    this.pipelineList = new SettingsList(
+      pipelineItems,
+      8,
+      THEME,
+      (id, newValue) => this.onPipelineChange(id, newValue),
+      () => this.onCancel(),
+    );
+  }
+
+  // ─── Current section's list ────────────────────────────────────────
+
+  private get currentList(): SettingsList {
+    if (this.section === "strategies") return this.strategyList;
+    if (this.section === "pipeline") return this.pipelineList;
+    return this.presetList;
+  }
+
+  // ─── Change handlers ───────────────────────────────────────────────
+
+  private onPresetChange(id: string, _newValue: string): void {
+    if (id === "projectOverride") {
+      this.perProjectOverride = _newValue === "enabled";
+      if (!this.perProjectOverride) {
+        const projPath = projectConfigPath(this.projectDir);
+        try { unlinkSync(projPath); } catch { /* ignore */ }
+      }
+      this.presetList.updateValue("projectOverride", this.perProjectOverride ? "enabled" : "disabled");
+      return;
+    }
+    // Apply the preset
+    const presetName = id.replace("preset:", "") as CompactorPreset;
+    if (PRESETS.includes(presetName)) {
+      this.config = applyPreset(presetName);
+      // Update all strategy/pipeline items to reflect new config
+      this.refreshStrategyValues();
+      this.refreshPipelineValues();
+      // Update preset indicators
+      for (const name of PRESETS) {
+        this.presetList.updateValue(
+          `preset:${name}`,
+          detectPreset(this.config) === name ? "✓ active" : "",
+        );
+      }
+    }
+  }
+
+  private onStrategyChange(id: string, newValue: string): void {
+    const key = id.replace("strategy:", "");
+    const strat = STRATEGIES.find((s) => s.key === key);
+    if (!strat) return;
+
+    // Map the cycled value to enabled + mode
+    strat.setMode(this.config, newValue);
+    // If mode is "off", disable; otherwise enable
+    strat.setEnabled(this.config, newValue !== "off");
+
+    this.strategyList.updateValue(id, this.formatStrategyValue(strat));
+
+    // Update preset indicators since config may no longer match a preset
+    for (const name of PRESETS) {
+      this.presetList.updateValue(
+        `preset:${name}`,
+        detectPreset(this.config) === name ? "✓ active" : "",
+      );
+    }
+  }
+
+  private onPipelineChange(id: string, newValue: string): void {
+    const key = id.replace("pipeline:", "");
+    const item = PIPELINE_ITEMS.find((p) => p.key === key);
+    if (!item) return;
+    item.setValue(this.config, newValue === "on");
+    this.pipelineList.updateValue(id, newValue);
+
+    // Update preset indicators
+    for (const name of PRESETS) {
+      this.presetList.updateValue(
+        `preset:${name}`,
+        detectPreset(this.config) === name ? "✓ active" : "",
+      );
+    }
+  }
+
+  private onCancel(): void {
+    this.onClose?.();
   }
 
-  invalidate(): void {}
+  // ─── Helpers ───────────────────────────────────────────────────────
+
+  private formatStrategyValue(s: StrategyDef): string {
+    const enabled = s.getEnabled(this.config);
+    const mode = s.getMode(this.config);
+    if (!enabled) return "off";
+    return mode;
+  }
+
+  private refreshStrategyValues(): void {
+    for (const s of STRATEGIES) {
+      this.strategyList.updateValue(`strategy:${s.key}`, this.formatStrategyValue(s));
+    }
+  }
+
+  private refreshPipelineValues(): void {
+    for (const p of PIPELINE_ITEMS) {
+      this.pipelineList.updateValue(`pipeline:${p.key}`, p.getValue(this.config) ? "on" : "off");
+    }
+  }
+
+  // ─── Input handling ────────────────────────────────────────────────
 
   handleInput(data: string): void {
-    switch (data) {
-      case "\x1b[A": // Up
-      case "k":
-        if (this.mode === "strategy") {
-          this.selectedIndex = (this.selectedIndex - 1 + ALL_ITEMS.length) % ALL_ITEMS.length;
-        } else {
-          this.presetIndex = (this.presetIndex - 1 + PRESETS.length) % PRESETS.length;
-        }
-        break;
-      case "\x1b[B": // Down
-      case "j":
-        if (this.mode === "strategy") {
-          this.selectedIndex = (this.selectedIndex + 1) % ALL_ITEMS.length;
-        } else {
-          this.presetIndex = (this.presetIndex + 1) % PRESETS.length;
-        }
-        break;
-      case " ": // Space - toggle enabled
-        if (this.mode === "strategy") {
-          const item = ALL_ITEMS[this.selectedIndex];
-          item.setEnabled(this.config, !item.getEnabled(this.config));
-        }
-        break;
-      case "\x1b[C": // Right - cycle mode forward
-      case "\r": // Enter
-        if (this.mode === "strategy") {
-          const strat = ALL_ITEMS[this.selectedIndex];
-          const modes = strat.modes;
-          const currentIdx = modes.indexOf(strat.getMode(this.config));
-          const nextIdx = (currentIdx + 1) % modes.length;
-          strat.setMode(this.config, modes[nextIdx]);
-        } else {
-          // Apply preset
-          this.config = applyPreset(PRESETS[this.presetIndex]);
-          this.mode = "strategy";
-        }
-        break;
-      case "\x1b[D": // Left - cycle mode backward
-        if (this.mode === "strategy") {
-          const strat2 = ALL_ITEMS[this.selectedIndex];
-          const modes2 = strat2.modes;
-          const curIdx = modes2.indexOf(strat2.getMode(this.config));
-          const prevIdx = (curIdx - 1 + modes2.length) % modes2.length;
-          strat2.setMode(this.config, modes2[prevIdx]);
-        }
-        break;
-      case "p": // Toggle preset mode
-        this.mode = this.mode === "preset" ? "strategy" : "preset";
-        break;
-      case "s": // Save
-        saveConfig(this.config);
-        this.onClose?.();
-        break;
-      case "\x1b": // Escape - cancel
-        this.onClose?.();
-        break;
+    // Tab switches section
+    if (data === "\t" || data === "\x1b[Z") {
+      const idx = SECTIONS.indexOf(this.section);
+      this.section = SECTIONS[(idx + 1) % SECTIONS.length];
+      return;
+    }
+
+    // Enter saves and closes
+    if (data === "\r") {
+      saveConfig(this.config, { perProject: this.perProjectOverride, cwd: this.projectDir });
+      this.saved = true;
+      setTimeout(() => this.onClose?.(), 400);
+      return;
     }
+
+    // Escape cancels (but SettingsList also handles it, calling onCancel)
+    if (data === "\x1b") {
+      this.onClose?.();
+      return;
+    }
+
+    // Delegate all other input to the current section's SettingsList
+    this.currentList.handleInput(data);
   }
 
+  // ─── Render ────────────────────────────────────────────────────────
+
   render(width: number): string[] {
+    const innerWidth = Math.max(22, width - 2);
     const lines: string[] = [];
-    const add = (s: string) => lines.push(truncateToWidth(s, width));
 
     // Header
-    add(`${ansi.bold}${ansi.cyan}🗜️  Compactor Settings${ansi.reset}`);
+    lines.push(borderLine(innerWidth, "top"));
+    lines.push(frameLine(`\x1b[1m\x1b[36m🗜️  Compactor Settings\x1b[0m`, innerWidth));
+
+    // Current preset indicator
     const presetName = detectPreset(this.config);
-    add(`${ansi.dim}Preset: ${presetName === "custom" ? "custom (modified)" : presetName}${ansi.reset}`);
-    add("");
-
-    if (this.mode === "preset") {
-      // Preset selection
-      add(`${ansi.bold}Select Preset:${ansi.reset}`);
-      add("");
-      for (let i = 0; i < PRESETS.length; i++) {
-        const isSelected = i === this.presetIndex;
-        const prefix = isSelected ? `${ansi.cyan}▸${ansi.reset}` : " ";
-        const label = isSelected ? `${ansi.bold}${PRESETS[i]}${ansi.reset}` : PRESETS[i];
-        add(`${prefix} ${label}`);
-      }
-      add("");
-      add(`${ansi.dim}↑↓ navigate • Enter apply • p back to strategies • s save • Esc cancel${ansi.reset}`);
-    } else {
-      // Strategy list (GLOBAL_DEBUG at top, then all strategies)
-      for (let i = 0; i < ALL_ITEMS.length; i++) {
-        const item = ALL_ITEMS[i];
-        const isSelected = i === this.selectedIndex;
-        const enabled = item.getEnabled(this.config);
-        const mode = item.getMode(this.config);
-        const toggle = enabled ? TOGGLE_ON : TOGGLE_OFF;
-        const labelColor = isSelected ? ansi.bold : "";
-        const modeColor = ansi.magenta;
-        const descColor = ansi.gray;
-
-        const cursor = isSelected ? `${ansi.cyan}▸${ansi.reset}` : " ";
-        add(`${cursor} ${toggle} ${labelColor}${item.label}${ansi.reset} ${modeColor}[${mode}]${ansi.reset}`);
-        add(`   ${descColor}${item.description}${ansi.reset}`);
+    const presetLabel = presetName === "custom" ? "custom (modified)" : presetName;
+    const overrideLabel = this.perProjectOverride
+      ? `\x1b[33mProject override\x1b[0m`
+      : `\x1b[2mGlobal config\x1b[0m`;
+    lines.push(frameLine(`\x1b[2mPreset: ${presetLabel}  ·  ${overrideLabel}\x1b[0m`, innerWidth));
+    lines.push(ruleLine(innerWidth));
+
+    // Section tabs
+    const tabParts = SECTIONS.map((s) => {
+      const label = s.charAt(0).toUpperCase() + s.slice(1);
+      if (s === this.section) {
+        return `\x1b[1m\x1b[36m[${label}]\x1b[0m`;
       }
+      return `\x1b[2m${label}\x1b[0m`;
+    });
+    lines.push(frameLine(`  ${tabParts.join("  ")}`, innerWidth));
+    lines.push(ruleLine(innerWidth));
 
-      add("");
-      add(`${ansi.dim}↑↓ navigate • Space toggle • ←→ cycle mode • p presets • s save • Esc cancel${ansi.reset}`);
+    // Section content (rendered by SettingsList)
+    const contentLines = this.currentList.render(innerWidth - 2);
+    for (const line of contentLines) {
+      lines.push(frameLine(` ${line}`, innerWidth));
     }
 
+    // Saved indicator
+    if (this.saved) {
+      lines.push(ruleLine(innerWidth));
+      lines.push(frameLine(`  \x1b[32m✓ Settings saved\x1b[0m`, innerWidth));
+    }
+
+    // Footer hints
+    lines.push(ruleLine(innerWidth));
+    const hints = this.section === "strategies"
+      ? "↑↓ navigate · Space change · Tab switch · / search · Enter save · Esc cancel"
+      : "↑↓ navigate · Space change · Tab switch · Enter save · Esc cancel";
+    lines.push(frameLine(`\x1b[2m${hints}\x1b[0m`, innerWidth));
+    lines.push(borderLine(innerWidth, "bottom"));
+
     return lines;
   }
 }
 
 /**
  * Factory function for ctx.ui.custom() integration.
- * Returns a render function compatible with pi-tui's custom overlay API.
  */
-export function renderSettingsOverlay() {
-  return (tui: any, _theme: any, _kb: any, done: (result: any) => void) => {
-    const overlay = new CompactorSettingsOverlay();
+export function renderSettingsOverlay(cwd?: string) {
+  return (_tui: any, _theme: any, _kb: any, done: (result: any) => void) => {
+    const overlay = new CompactorSettingsOverlay({ cwd });
     overlay.onClose = () => done(overlay);
 
     return {
       render: (width: number) => overlay.render(width),
-      invalidate: () => {},
+      invalidate: () => overlay.invalidate(),
       handleInput: (data: string) => overlay.handleInput(data),
     };
   };