gsd-pi 2.24.0 → 2.26.0

package/src/resources/extensions/gsd/visualizer-overlay.ts

@@ -9,11 +9,14 @@ import {
   renderAgentView,
   renderChangelogView,
   renderExportView,
+  renderKnowledgeView,
+  renderCapturesView,
+  renderHealthView,
   type ProgressFilter,
 } from "./visualizer-views.js";
 import { writeExportFile } from "./export.js";
 
-const TAB_COUNT = 7;
+const TAB_COUNT = 10;
 const TAB_LABELS = [
   "1 Progress",
   "2 Deps",
@@ -22,8 +25,15 @@ const TAB_LABELS = [
   "5 Agent",
   "6 Changes",
   "7 Export",
+  "8 Knowledge",
+  "9 Captures",
+  "0 Health",
 ];
 
+function stripAnsi(s: string): string {
+  return s.replace(/\x1b\[[0-9;]*m/g, "");
+}
+
 export class GSDVisualizerOverlay {
   private tui: { requestRender: () => void };
   private theme: Theme;
@@ -39,7 +49,7 @@ export class GSDVisualizerOverlay {
   data: VisualizerData | null = null;
   basePath: string;
 
-  // Filter state (Progress tab)
+  // Filter state
   filterMode = false;
   filterText = "";
   filterField: "all" | "status" | "risk" | "keyword" = "all";
@@ -48,6 +58,11 @@ export class GSDVisualizerOverlay {
   lastExportPath?: string;
   exportStatus?: string;
 
+  // New state
+  private lastVisibleRows = 20;
+  collapsedMilestones = new Set<string>();
+  showHelp = false;
+
   constructor(
     tui: { requestRender: () => void },
     theme: Theme,
@@ -58,6 +73,9 @@ export class GSDVisualizerOverlay {
     this.onClose = onClose;
     this.basePath = process.cwd();
 
+    // Enable SGR mouse tracking
+    process.stdout.write("\x1b[?1003h\x1b[?1006h");
+
     loadVisualizerData(this.basePath).then((d) => {
       this.data = d;
       this.loading = false;
@@ -74,6 +92,17 @@ export class GSDVisualizerOverlay {
     }, 2000);
   }
 
+  private parseSGRMouse(data: string): { button: number; x: number; y: number; press: boolean } | null {
+    const match = data.match(/^\x1b\[<(\d+);(\d+);(\d+)([Mm])$/);
+    if (!match) return null;
+    return {
+      button: parseInt(match[1], 10),
+      x: parseInt(match[2], 10),
+      y: parseInt(match[3], 10),
+      press: match[4] === "M",
+    };
+  }
+
   handleInput(data: string): void {
     // Filter mode input routing
     if (this.filterMode) {
@@ -106,6 +135,53 @@ export class GSDVisualizerOverlay {
       return;
     }
 
+    // Help overlay dismissal
+    if (this.showHelp) {
+      if (matchesKey(data, Key.escape) || data === "?") {
+        this.showHelp = false;
+        this.invalidate();
+        this.tui.requestRender();
+        return;
+      }
+      return;
+    }
+
+    // Mouse handling (before keyboard checks)
+    const mouse = this.parseSGRMouse(data);
+    if (mouse) {
+      if (mouse.button === 64) {
+        // Wheel up
+        this.scrollOffsets[this.activeTab] = Math.max(0, this.scrollOffsets[this.activeTab] - 3);
+        this.invalidate();
+        this.tui.requestRender();
+        return;
+      }
+      if (mouse.button === 65) {
+        // Wheel down
+        this.scrollOffsets[this.activeTab] += 3;
+        this.invalidate();
+        this.tui.requestRender();
+        return;
+      }
+      if (mouse.button === 0 && mouse.press) {
+        // Left click — check if on tab bar row
+        if (mouse.y === 2) {
+          let xPos = 3;
+          for (let i = 0; i < TAB_LABELS.length; i++) {
+            const tabWidth = TAB_LABELS[i].length + 2;
+            if (mouse.x >= xPos && mouse.x < xPos + tabWidth) {
+              this.activeTab = i;
+              this.invalidate();
+              this.tui.requestRender();
+              return;
+            }
+            xPos += tabWidth + 1;
+          }
+        }
+      }
+      return;
+    }
+
     if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
       this.dispose();
       this.onClose();
@@ -126,15 +202,16 @@ export class GSDVisualizerOverlay {
       return;
     }
 
-    if ("1234567".includes(data) && data.length === 1) {
-      this.activeTab = parseInt(data, 10) - 1;
+    if ("1234567890".includes(data) && data.length === 1) {
+      const idx = data === "0" ? 9 : parseInt(data, 10) - 1;
+      this.activeTab = idx;
       this.invalidate();
       this.tui.requestRender();
       return;
     }
 
-    // "/" enters filter mode on Progress tab
-    if (data === "/" && this.activeTab === 0) {
+    // "/" enters filter mode on any tab
+    if (data === "/") {
       this.filterMode = true;
       this.filterText = "";
       this.invalidate();
@@ -142,16 +219,48 @@ export class GSDVisualizerOverlay {
       return;
     }
 
-    // "f" cycles filter field on Progress tab (when not in filter mode)
-    if (data === "f" && this.activeTab === 0) {
-      const fields: Array<"all" | "status" | "risk" | "keyword"> = ["all", "status", "risk", "keyword"];
-      const idx = fields.indexOf(this.filterField);
-      this.filterField = fields[(idx + 1) % fields.length];
+    // "f" cycles filter field (limit to all/keyword on non-Progress tabs)
+    if (data === "f") {
+      if (this.activeTab === 0) {
+        const fields: Array<"all" | "status" | "risk" | "keyword"> = ["all", "status", "risk", "keyword"];
+        const idx = fields.indexOf(this.filterField);
+        this.filterField = fields[(idx + 1) % fields.length];
+      } else {
+        this.filterField = this.filterField === "all" ? "keyword" : "all";
+      }
       this.invalidate();
       this.tui.requestRender();
       return;
     }
 
+    // "?" toggles help overlay
+    if (data === "?") {
+      this.showHelp = true;
+      this.invalidate();
+      this.tui.requestRender();
+      return;
+    }
+
+    // Enter/Space toggles collapse on Progress tab
+    if ((matchesKey(data, Key.enter) || data === " ") && this.activeTab === 0 && this.data) {
+      const viewLines = this.renderTabContent(0, 80);
+      const offset = this.scrollOffsets[0];
+      for (const ms of this.data.milestones) {
+        const lineIdx = viewLines.findIndex(l => stripAnsi(l).includes(`${ms.id}:`));
+        if (lineIdx >= offset && lineIdx < offset + this.lastVisibleRows) {
+          if (this.collapsedMilestones.has(ms.id)) {
+            this.collapsedMilestones.delete(ms.id);
+          } else {
+            this.collapsedMilestones.add(ms.id);
+          }
+          this.invalidate();
+          this.tui.requestRender();
+          return;
+        }
+      }
+      return;
+    }
+
     // Export tab key handling
     if (this.activeTab === 6 && this.data) {
       if (data === "m" || data === "j" || data === "s") {
@@ -160,6 +269,40 @@ export class GSDVisualizerOverlay {
       }
     }
 
+    // Page Up/Down
+    if (matchesKey(data, Key.pageUp)) {
+      const amount = Math.max(1, this.lastVisibleRows - 2);
+      this.scrollOffsets[this.activeTab] = Math.max(0, this.scrollOffsets[this.activeTab] - amount);
+      this.invalidate();
+      this.tui.requestRender();
+      return;
+    }
+
+    if (matchesKey(data, Key.pageDown)) {
+      const amount = Math.max(1, this.lastVisibleRows - 2);
+      this.scrollOffsets[this.activeTab] += amount;
+      this.invalidate();
+      this.tui.requestRender();
+      return;
+    }
+
+    // Half-page scroll: Ctrl+U / Ctrl+D
+    if (matchesKey(data, Key.ctrl("u"))) {
+      const amount = Math.max(1, Math.floor(this.lastVisibleRows / 2));
+      this.scrollOffsets[this.activeTab] = Math.max(0, this.scrollOffsets[this.activeTab] - amount);
+      this.invalidate();
+      this.tui.requestRender();
+      return;
+    }
+
+    if (matchesKey(data, Key.ctrl("d"))) {
+      const amount = Math.max(1, Math.floor(this.lastVisibleRows / 2));
+      this.scrollOffsets[this.activeTab] += amount;
+      this.invalidate();
+      this.tui.requestRender();
+      return;
+    }
+
     if (matchesKey(data, Key.down) || matchesKey(data, "j")) {
       this.scrollOffsets[this.activeTab]++;
       this.invalidate();
@@ -226,7 +369,7 @@ export class GSDVisualizerOverlay {
       case 0: {
         const filter: ProgressFilter | undefined =
           this.filterText ? { text: this.filterText, field: this.filterField } : undefined;
-        return renderProgressView(this.data, th, width, filter);
+        return renderProgressView(this.data, th, width, filter, this.collapsedMilestones);
       }
       case 1:
         return renderDepsView(this.data, th, width);
@@ -240,11 +383,46 @@ export class GSDVisualizerOverlay {
         return renderChangelogView(this.data, th, width);
       case 6:
         return renderExportView(this.data, th, width, this.lastExportPath);
+      case 7:
+        return renderKnowledgeView(this.data, th, width);
+      case 8:
+        return renderCapturesView(this.data, th, width);
+      case 9:
+        return renderHealthView(this.data, th, width);
       default:
         return [];
     }
   }
 
+  private renderHelpContent(width: number): string[] {
+    const th = this.theme;
+    const lines: string[] = [];
+    lines.push(th.fg("accent", th.bold("Keyboard Shortcuts")));
+    lines.push("");
+    const bindings: [string, string][] = [
+      ["Tab/Shift+Tab", "Next/Previous tab"],
+      ["1-9, 0", "Jump to tab"],
+      ["j/k, Up/Down", "Scroll line"],
+      ["PgUp/PgDn", "Scroll page"],
+      ["Ctrl+U/Ctrl+D", "Scroll half-page"],
+      ["g/G", "Top/Bottom"],
+      ["/", "Search/filter"],
+      ["f", "Cycle filter field"],
+      ["Enter/Space", "Toggle collapse (Progress)"],
+      ["Mouse wheel", "Scroll"],
+      ["Click tab", "Switch tab"],
+      ["?", "Toggle help"],
+      ["Esc", "Close"],
+    ];
+    for (const [key, desc] of bindings) {
+      const keyStr = th.fg("accent", key.padEnd(20));
+      lines.push(`  ${keyStr} ${desc}`);
+    }
+    lines.push("");
+    lines.push(th.fg("dim", "Press ? or Esc to dismiss"));
+    return lines;
+  }
+
   render(width: number): string[] {
     if (this.cachedLines && this.cachedWidth === width) {
       return this.cachedLines;
@@ -257,9 +435,13 @@ export class GSDVisualizerOverlay {
     // Tab bar
     const tabs = TAB_LABELS.map((label, i) => {
       let displayLabel = label;
-      // Show filter indicator on Progress tab
-      if (i === 0 && this.filterText) {
-        displayLabel += " ✱";
+      // Show filter indicator on active tab with filter
+      if (i === this.activeTab && this.filterText) {
+        displayLabel += " \u2731";
+      }
+      // Show captures badge
+      if (i === 8 && this.data?.captures?.pendingCount) {
+        displayLabel += ` (${this.data.captures.pendingCount})`;
       }
       if (i === this.activeTab) {
         return th.fg("accent", `[${displayLabel}]`);
@@ -269,21 +451,23 @@ export class GSDVisualizerOverlay {
     content.push(" " + tabs.join(" "));
     content.push("");
 
-    // Filter bar (when in filter mode)
-    if (this.filterMode && this.activeTab === 0) {
+    // Filter bar (when in filter mode on any tab)
+    if (this.filterMode) {
       content.push(
-        th.fg("accent", `Filter (${this.filterField}): ${this.filterText}█`),
+        th.fg("accent", `Filter (${this.filterField}): ${this.filterText}\u2588`),
       );
       content.push("");
     }
 
-    if (this.loading) {
-      const loadingText = "Loading…";
+    if (this.showHelp) {
+      content.push(...this.renderHelpContent(innerWidth));
+    } else if (this.loading) {
+      const loadingText = "Loading\u2026";
       const vis = visibleWidth(loadingText);
       const leftPad = Math.max(0, Math.floor((innerWidth - vis) / 2));
       content.push(" ".repeat(leftPad) + loadingText);
     } else if (this.data) {
-      const viewLines = this.renderTabContent(this.activeTab, innerWidth);
+      let viewLines = this.renderTabContent(this.activeTab, innerWidth);
 
       // Show export status message if present
       if (this.exportStatus && this.activeTab === 6) {
@@ -292,6 +476,12 @@ export class GSDVisualizerOverlay {
         this.exportStatus = undefined;
       }
 
+      // Apply cross-tab filter for non-Progress tabs
+      if (this.filterText && this.activeTab !== 0) {
+        const lowerFilter = this.filterText.toLowerCase();
+        viewLines = viewLines.filter(line => stripAnsi(line).toLowerCase().includes(lowerFilter));
+      }
+
       content.push(...viewLines);
     }
 
@@ -299,15 +489,17 @@ export class GSDVisualizerOverlay {
     const viewportHeight = Math.max(5, process.stdout.rows ? process.stdout.rows - 8 : 24);
     const chromeHeight = 2;
     const visibleContentRows = Math.max(1, viewportHeight - chromeHeight);
+    this.lastVisibleRows = visibleContentRows;
+    const totalLines = content.length;
     const maxScroll = Math.max(0, content.length - visibleContentRows);
     this.scrollOffsets[this.activeTab] = Math.min(this.scrollOffsets[this.activeTab], maxScroll);
     const offset = this.scrollOffsets[this.activeTab];
     const visibleContent = content.slice(offset, offset + visibleContentRows);
 
-    const lines = this.wrapInBox(visibleContent, width);
+    const lines = this.wrapInBox(visibleContent, width, offset, visibleContentRows, totalLines);
 
     // Footer hint
-    const hint = th.fg("dim", "Tab/Shift+Tab/1-7 switch · / filter · ↑↓ scroll · g/G top/end · esc close");
+    const hint = th.fg("dim", "Tab/Shift+Tab/1-9,0 switch \u00b7 / filter \u00b7 PgUp/PgDn scroll \u00b7 ? help \u00b7 esc close");
     const hintVis = visibleWidth(hint);
     const hintPad = Math.max(0, Math.floor((width - hintVis) / 2));
     lines.push(" ".repeat(hintPad) + hint);
@@ -317,18 +509,33 @@ export class GSDVisualizerOverlay {
     return lines;
   }
 
-  private wrapInBox(inner: string[], width: number): string[] {
+  private wrapInBox(inner: string[], width: number, offset?: number, visibleRows?: number, totalLines?: number): string[] {
     const th = this.theme;
     const border = (s: string) => th.fg("borderAccent", s);
     const innerWidth = width - 4;
     const lines: string[] = [];
-    lines.push(border("╭" + "─".repeat(width - 2) + "╮"));
-    for (const line of inner) {
+    lines.push(border("\u256d" + "\u2500".repeat(width - 2) + "\u256e"));
+
+    // Compute scroll indicator positions
+    const scrollable = totalLines !== undefined && visibleRows !== undefined && totalLines > visibleRows;
+    let thumbStart = -1;
+    let thumbLen = 0;
+    const innerRows = inner.length;
+    if (scrollable && innerRows > 0 && totalLines! > 0) {
+      thumbStart = Math.round(((offset ?? 0) / totalLines!) * innerRows);
+      thumbLen = Math.max(1, Math.round((visibleRows! / totalLines!) * innerRows));
+    }
+
+    for (let i = 0; i < inner.length; i++) {
+      const line = inner[i];
       const truncated = truncateToWidth(line, innerWidth);
       const padWidth = Math.max(0, innerWidth - visibleWidth(truncated));
-      lines.push(border("│") + " " + truncated + " ".repeat(padWidth) + " " + border("│"));
+      const rightBorder = scrollable && i >= thumbStart && i < thumbStart + thumbLen
+        ? border("\u2503")
+        : border("\u2502");
+      lines.push(border("\u2502") + " " + truncated + " ".repeat(padWidth) + " " + rightBorder);
     }
-    lines.push(border("╰" + "─".repeat(width - 2) + "╯"));
+    lines.push(border("\u2570" + "\u2500".repeat(width - 2) + "\u256f"));
     return lines;
   }
 
@@ -340,5 +547,7 @@ export class GSDVisualizerOverlay {
   dispose(): void {
     this.disposed = true;
     clearInterval(this.refreshTimer);
+    // Disable SGR mouse tracking
+    process.stdout.write("\x1b[?1003l\x1b[?1006l");
   }
 }