gsd-pi 2.17.0 → 2.19.0

package/dist/resources/extensions/gsd/visualizer-data.ts

@@ -0,0 +1,154 @@
+// Data loader for workflow visualizer overlay — aggregates state + metrics.
+
+import { deriveState } from './state.js';
+import { parseRoadmap, parsePlan, loadFile } from './files.js';
+import { findMilestoneIds } from './guided-flow.js';
+import { resolveMilestoneFile, resolveSliceFile } from './paths.js';
+import {
+  getLedger,
+  getProjectTotals,
+  aggregateByPhase,
+  aggregateBySlice,
+  aggregateByModel,
+  loadLedgerFromDisk,
+} from './metrics.js';
+
+import type { Phase } from './types.js';
+import type {
+  ProjectTotals,
+  PhaseAggregate,
+  SliceAggregate,
+  ModelAggregate,
+  UnitMetrics,
+} from './metrics.js';
+
+// ─── Visualizer Types ─────────────────────────────────────────────────────────
+
+export interface VisualizerMilestone {
+  id: string;
+  title: string;
+  status: 'complete' | 'active' | 'pending';
+  dependsOn: string[];
+  slices: VisualizerSlice[];
+}
+
+export interface VisualizerSlice {
+  id: string;
+  title: string;
+  done: boolean;
+  active: boolean;
+  risk: string;
+  depends: string[];
+  tasks: VisualizerTask[];
+}
+
+export interface VisualizerTask {
+  id: string;
+  title: string;
+  done: boolean;
+  active: boolean;
+}
+
+export interface VisualizerData {
+  milestones: VisualizerMilestone[];
+  phase: Phase;
+  totals: ProjectTotals | null;
+  byPhase: PhaseAggregate[];
+  bySlice: SliceAggregate[];
+  byModel: ModelAggregate[];
+  units: UnitMetrics[];
+}
+
+// ─── Loader ───────────────────────────────────────────────────────────────────
+
+export async function loadVisualizerData(basePath: string): Promise<VisualizerData> {
+  const state = await deriveState(basePath);
+  const milestoneIds = findMilestoneIds(basePath);
+
+  const milestones: VisualizerMilestone[] = [];
+
+  for (const mid of milestoneIds) {
+    const entry = state.registry.find(r => r.id === mid);
+    const status = entry?.status ?? 'pending';
+    const dependsOn = entry?.dependsOn ?? [];
+
+    const slices: VisualizerSlice[] = [];
+
+    const roadmapFile = resolveMilestoneFile(basePath, mid, 'ROADMAP');
+    const roadmapContent = roadmapFile ? await loadFile(roadmapFile) : null;
+
+    if (roadmapContent) {
+      const roadmap = parseRoadmap(roadmapContent);
+
+      for (const s of roadmap.slices) {
+        const isActiveSlice =
+          state.activeMilestone?.id === mid &&
+          state.activeSlice?.id === s.id;
+
+        const tasks: VisualizerTask[] = [];
+
+        if (isActiveSlice) {
+          const planFile = resolveSliceFile(basePath, mid, s.id, 'PLAN');
+          const planContent = planFile ? await loadFile(planFile) : null;
+
+          if (planContent) {
+            const plan = parsePlan(planContent);
+            for (const t of plan.tasks) {
+              tasks.push({
+                id: t.id,
+                title: t.title,
+                done: t.done,
+                active: state.activeTask?.id === t.id,
+              });
+            }
+          }
+        }
+
+        slices.push({
+          id: s.id,
+          title: s.title,
+          done: s.done,
+          active: isActiveSlice,
+          risk: s.risk,
+          depends: s.depends,
+          tasks,
+        });
+      }
+    }
+
+    milestones.push({
+      id: mid,
+      title: entry?.title ?? mid,
+      status,
+      dependsOn,
+      slices,
+    });
+  }
+
+  // Metrics
+  let totals: ProjectTotals | null = null;
+  let byPhase: PhaseAggregate[] = [];
+  let bySlice: SliceAggregate[] = [];
+  let byModel: ModelAggregate[] = [];
+  let units: UnitMetrics[] = [];
+
+  const ledger = getLedger() ?? loadLedgerFromDisk(basePath);
+
+  if (ledger && ledger.units.length > 0) {
+    units = [...ledger.units].sort((a, b) => a.startedAt - b.startedAt);
+    totals = getProjectTotals(units);
+    byPhase = aggregateByPhase(units);
+    bySlice = aggregateBySlice(units);
+    byModel = aggregateByModel(units);
+  }
+
+  return {
+    milestones,
+    phase: state.phase,
+    totals,
+    byPhase,
+    bySlice,
+    byModel,
+    units,
+  };
+}

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

@@ -0,0 +1,193 @@
+import type { Theme } from "@gsd/pi-coding-agent";
+import { truncateToWidth, visibleWidth, matchesKey, Key } from "@gsd/pi-tui";
+import { loadVisualizerData, type VisualizerData } from "./visualizer-data.js";
+import {
+  renderProgressView,
+  renderDepsView,
+  renderMetricsView,
+  renderTimelineView,
+} from "./visualizer-views.js";
+
+const TAB_LABELS = ["1 Progress", "2 Deps", "3 Metrics", "4 Timeline"];
+
+export class GSDVisualizerOverlay {
+  private tui: { requestRender: () => void };
+  private theme: Theme;
+  private onClose: () => void;
+
+  activeTab = 0;
+  scrollOffsets: number[] = [0, 0, 0, 0];
+  loading = true;
+  disposed = false;
+  cachedWidth?: number;
+  cachedLines?: string[];
+  refreshTimer: ReturnType<typeof setInterval>;
+  data: VisualizerData | null = null;
+  basePath: string;
+
+  constructor(
+    tui: { requestRender: () => void },
+    theme: Theme,
+    onClose: () => void,
+  ) {
+    this.tui = tui;
+    this.theme = theme;
+    this.onClose = onClose;
+    this.basePath = process.cwd();
+
+    loadVisualizerData(this.basePath).then((d) => {
+      this.data = d;
+      this.loading = false;
+      this.tui.requestRender();
+    });
+
+    this.refreshTimer = setInterval(() => {
+      loadVisualizerData(this.basePath).then((d) => {
+        if (this.disposed) return;
+        this.data = d;
+        this.invalidate();
+        this.tui.requestRender();
+      });
+    }, 2000);
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
+      this.dispose();
+      this.onClose();
+      return;
+    }
+
+    if (matchesKey(data, Key.tab)) {
+      this.activeTab = (this.activeTab + 1) % 4;
+      this.invalidate();
+      this.tui.requestRender();
+      return;
+    }
+
+    if (data === "1" || data === "2" || data === "3" || data === "4") {
+      this.activeTab = parseInt(data, 10) - 1;
+      this.invalidate();
+      this.tui.requestRender();
+      return;
+    }
+
+    if (matchesKey(data, Key.down) || matchesKey(data, "j")) {
+      this.scrollOffsets[this.activeTab]++;
+      this.invalidate();
+      this.tui.requestRender();
+      return;
+    }
+
+    if (matchesKey(data, Key.up) || matchesKey(data, "k")) {
+      this.scrollOffsets[this.activeTab] = Math.max(0, this.scrollOffsets[this.activeTab] - 1);
+      this.invalidate();
+      this.tui.requestRender();
+      return;
+    }
+
+    if (data === "g") {
+      this.scrollOffsets[this.activeTab] = 0;
+      this.invalidate();
+      this.tui.requestRender();
+      return;
+    }
+
+    if (data === "G") {
+      this.scrollOffsets[this.activeTab] = 999;
+      this.invalidate();
+      this.tui.requestRender();
+      return;
+    }
+  }
+
+  render(width: number): string[] {
+    if (this.cachedLines && this.cachedWidth === width) {
+      return this.cachedLines;
+    }
+
+    const th = this.theme;
+    const innerWidth = width - 4;
+    const content: string[] = [];
+
+    // Tab bar
+    const tabs = TAB_LABELS.map((label, i) => {
+      if (i === this.activeTab) {
+        return th.fg("accent", `[${label}]`);
+      }
+      return th.fg("dim", `[${label}]`);
+    });
+    content.push(" " + tabs.join("  "));
+    content.push("");
+
+    if (this.loading) {
+      const loadingText = "Loading…";
+      const vis = visibleWidth(loadingText);
+      const leftPad = Math.max(0, Math.floor((innerWidth - vis) / 2));
+      content.push(" ".repeat(leftPad) + loadingText);
+    } else if (this.data) {
+      let viewLines: string[] = [];
+      switch (this.activeTab) {
+        case 0:
+          viewLines = renderProgressView(this.data, th, innerWidth);
+          break;
+        case 1:
+          viewLines = renderDepsView(this.data, th, innerWidth);
+          break;
+        case 2:
+          viewLines = renderMetricsView(this.data, th, innerWidth);
+          break;
+        case 3:
+          viewLines = renderTimelineView(this.data, th, innerWidth);
+          break;
+      }
+      content.push(...viewLines);
+    }
+
+    // Apply scroll
+    const viewportHeight = Math.max(5, process.stdout.rows ? process.stdout.rows - 8 : 24);
+    const chromeHeight = 2;
+    const visibleContentRows = Math.max(1, viewportHeight - chromeHeight);
+    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);
+
+    // Footer hint
+    const hint = th.fg("dim", "Tab/1-4 switch · ↑↓ scroll · g/G top/end · esc close");
+    const hintVis = visibleWidth(hint);
+    const hintPad = Math.max(0, Math.floor((width - hintVis) / 2));
+    lines.push(" ".repeat(hintPad) + hint);
+
+    this.cachedWidth = width;
+    this.cachedLines = lines;
+    return lines;
+  }
+
+  private wrapInBox(inner: string[], width: 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) {
+      const truncated = truncateToWidth(line, innerWidth);
+      const padWidth = Math.max(0, innerWidth - visibleWidth(truncated));
+      lines.push(border("│") + " " + truncated + " ".repeat(padWidth) + " " + border("│"));
+    }
+    lines.push(border("╰" + "─".repeat(width - 2) + "╯"));
+    return lines;
+  }
+
+  invalidate(): void {
+    this.cachedWidth = undefined;
+    this.cachedLines = undefined;
+  }
+
+  dispose(): void {
+    this.disposed = true;
+    clearInterval(this.refreshTimer);
+  }
+}

package/dist/resources/extensions/gsd/visualizer-views.ts

@@ -0,0 +1,293 @@
+// View renderers for the GSD workflow visualizer overlay.
+
+import type { Theme } from "@gsd/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@gsd/pi-tui";
+import type { VisualizerData, VisualizerMilestone } from "./visualizer-data.js";
+import { formatCost, formatTokenCount } from "./metrics.js";
+
+// ─── Local Helpers ───────────────────────────────────────────────────────────
+
+function formatDuration(ms: number): string {
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  const rs = s % 60;
+  if (m < 60) return `${m}m ${rs}s`;
+  const h = Math.floor(m / 60);
+  const rm = m % 60;
+  return `${h}h ${rm}m`;
+}
+
+function padRight(content: string, width: number): string {
+  const vis = visibleWidth(content);
+  return content + " ".repeat(Math.max(0, width - vis));
+}
+
+function joinColumns(left: string, right: string, width: number): string {
+  const leftW = visibleWidth(left);
+  const rightW = visibleWidth(right);
+  if (leftW + rightW + 2 > width) {
+    return truncateToWidth(`${left}  ${right}`, width);
+  }
+  return left + " ".repeat(width - leftW - rightW) + right;
+}
+
+// ─── Progress View ───────────────────────────────────────────────────────────
+
+export function renderProgressView(
+  data: VisualizerData,
+  th: Theme,
+  width: number,
+): string[] {
+  const lines: string[] = [];
+
+  for (const ms of data.milestones) {
+    // Milestone header line
+    const statusGlyph =
+      ms.status === "complete"
+        ? th.fg("success", "✓")
+        : ms.status === "active"
+          ? th.fg("accent", "▸")
+          : th.fg("dim", "○");
+    const statusLabel =
+      ms.status === "complete"
+        ? th.fg("success", "complete")
+        : ms.status === "active"
+          ? th.fg("accent", "active")
+          : th.fg("dim", "pending");
+    const msLeft = `${ms.id}: ${ms.title}`;
+    const msRight = `${statusGlyph} ${statusLabel}`;
+    lines.push(joinColumns(msLeft, msRight, width));
+
+    if (ms.slices.length === 0 && ms.dependsOn.length > 0) {
+      lines.push(th.fg("dim", `  (depends on ${ms.dependsOn.join(", ")})`));
+      continue;
+    }
+
+    if (ms.status === "pending" && ms.dependsOn.length > 0) {
+      lines.push(th.fg("dim", `  (depends on ${ms.dependsOn.join(", ")})`));
+      continue;
+    }
+
+    for (const sl of ms.slices) {
+      // Slice line
+      const slGlyph = sl.done
+        ? th.fg("success", "✓")
+        : sl.active
+          ? th.fg("accent", "▸")
+          : th.fg("dim", "○");
+      const riskColor =
+        sl.risk === "high"
+          ? "warning"
+          : sl.risk === "medium"
+            ? "text"
+            : "dim";
+      const riskBadge = th.fg(riskColor, sl.risk);
+      const slLeft = `  ${slGlyph} ${sl.id}: ${sl.title}`;
+      lines.push(joinColumns(slLeft, riskBadge, width));
+
+      // Show tasks for active slice
+      if (sl.active && sl.tasks.length > 0) {
+        for (const task of sl.tasks) {
+          const tGlyph = task.done
+            ? th.fg("success", "✓")
+            : task.active
+              ? th.fg("accent", "▸")
+              : th.fg("dim", "○");
+          lines.push(`      ${tGlyph} ${task.id}: ${task.title}`);
+        }
+      }
+    }
+  }
+
+  return lines;
+}
+
+// ─── Dependencies View ───────────────────────────────────────────────────────
+
+export function renderDepsView(
+  data: VisualizerData,
+  th: Theme,
+  width: number,
+): string[] {
+  const lines: string[] = [];
+
+  // Milestone Dependencies
+  lines.push(th.fg("accent", th.bold("Milestone Dependencies")));
+  lines.push("");
+
+  const msDeps = data.milestones.filter((ms) => ms.dependsOn.length > 0);
+  if (msDeps.length === 0) {
+    lines.push(th.fg("dim", "  No milestone dependencies."));
+  } else {
+    for (const ms of msDeps) {
+      for (const dep of ms.dependsOn) {
+        lines.push(
+          `  ${th.fg("text", dep)} ${th.fg("accent", "──►")} ${th.fg("text", ms.id)}`,
+        );
+      }
+    }
+  }
+
+  lines.push("");
+
+  // Slice Dependencies (active milestone)
+  lines.push(th.fg("accent", th.bold("Slice Dependencies (active milestone)")));
+  lines.push("");
+
+  const activeMs = data.milestones.find((ms) => ms.status === "active");
+  if (!activeMs) {
+    lines.push(th.fg("dim", "  No active milestone."));
+  } else {
+    const slDeps = activeMs.slices.filter((sl) => sl.depends.length > 0);
+    if (slDeps.length === 0) {
+      lines.push(th.fg("dim", "  No slice dependencies."));
+    } else {
+      for (const sl of slDeps) {
+        for (const dep of sl.depends) {
+          lines.push(
+            `  ${th.fg("text", dep)} ${th.fg("accent", "──►")} ${th.fg("text", sl.id)}`,
+          );
+        }
+      }
+    }
+  }
+
+  return lines;
+}
+
+// ─── Metrics View ────────────────────────────────────────────────────────────
+
+export function renderMetricsView(
+  data: VisualizerData,
+  th: Theme,
+  width: number,
+): string[] {
+  const lines: string[] = [];
+
+  if (data.totals === null) {
+    lines.push(th.fg("dim", "No metrics data available."));
+    return lines;
+  }
+
+  const totals = data.totals;
+
+  // Summary line
+  lines.push(
+    th.fg("accent", th.bold("Summary")),
+  );
+  lines.push(
+    `  Cost: ${th.fg("text", formatCost(totals.cost))}  ` +
+    `Tokens: ${th.fg("text", formatTokenCount(totals.tokens.total))}  ` +
+    `Units: ${th.fg("text", String(totals.units))}`,
+  );
+  lines.push("");
+
+  const barWidth = Math.max(10, width - 40);
+
+  // By Phase
+  if (data.byPhase.length > 0) {
+    lines.push(th.fg("accent", th.bold("By Phase")));
+    lines.push("");
+
+    const maxPhaseCost = Math.max(...data.byPhase.map((p) => p.cost));
+
+    for (const phase of data.byPhase) {
+      const pct = totals.cost > 0 ? (phase.cost / totals.cost) * 100 : 0;
+      const fillLen =
+        maxPhaseCost > 0
+          ? Math.round((phase.cost / maxPhaseCost) * barWidth)
+          : 0;
+      const bar =
+        th.fg("accent", "█".repeat(fillLen)) +
+        th.fg("dim", "░".repeat(barWidth - fillLen));
+      const label = padRight(phase.phase, 14);
+      const costStr = formatCost(phase.cost);
+      const pctStr = `${pct.toFixed(1)}%`;
+      const tokenStr = formatTokenCount(phase.tokens.total);
+      lines.push(`  ${label} ${bar} ${costStr} ${pctStr} ${tokenStr}`);
+    }
+
+    lines.push("");
+  }
+
+  // By Model
+  if (data.byModel.length > 0) {
+    lines.push(th.fg("accent", th.bold("By Model")));
+    lines.push("");
+
+    const maxModelCost = Math.max(...data.byModel.map((m) => m.cost));
+
+    for (const model of data.byModel) {
+      const pct = totals.cost > 0 ? (model.cost / totals.cost) * 100 : 0;
+      const fillLen =
+        maxModelCost > 0
+          ? Math.round((model.cost / maxModelCost) * barWidth)
+          : 0;
+      const bar =
+        th.fg("accent", "█".repeat(fillLen)) +
+        th.fg("dim", "░".repeat(barWidth - fillLen));
+      const label = padRight(model.model, 20);
+      const costStr = formatCost(model.cost);
+      const pctStr = `${pct.toFixed(1)}%`;
+      lines.push(`  ${label} ${bar} ${costStr} ${pctStr}`);
+    }
+  }
+
+  return lines;
+}
+
+// ─── Timeline View ──────────────────────────────────────────────────────────
+
+export function renderTimelineView(
+  data: VisualizerData,
+  th: Theme,
+  width: number,
+): string[] {
+  const lines: string[] = [];
+
+  if (data.units.length === 0) {
+    lines.push(th.fg("dim", "No execution history."));
+    return lines;
+  }
+
+  // Show up to 20 most recent (units are sorted by startedAt asc, show most recent)
+  const recent = data.units.slice(-20).reverse();
+
+  const maxDuration = Math.max(
+    ...recent.map((u) => u.finishedAt - u.startedAt),
+  );
+  const timeBarWidth = Math.max(4, Math.min(12, width - 60));
+
+  for (const unit of recent) {
+    const dt = new Date(unit.startedAt);
+    const hh = String(dt.getHours()).padStart(2, "0");
+    const mm = String(dt.getMinutes()).padStart(2, "0");
+    const time = `${hh}:${mm}`;
+
+    const duration = unit.finishedAt - unit.startedAt;
+    const glyph =
+      unit.finishedAt > 0
+        ? th.fg("success", "✓")
+        : th.fg("accent", "▸");
+
+    const typeLabel = padRight(unit.type, 16);
+    const idLabel = padRight(unit.id, 14);
+
+    const fillLen =
+      maxDuration > 0
+        ? Math.round((duration / maxDuration) * timeBarWidth)
+        : 0;
+    const bar =
+      th.fg("accent", "█".repeat(fillLen)) +
+      th.fg("dim", "░".repeat(timeBarWidth - fillLen));
+
+    const durStr = formatDuration(duration);
+    const costStr = formatCost(unit.cost);
+
+    const line = `  ${time}  ${glyph} ${typeLabel} ${idLabel} ${bar}  ${durStr}  ${costStr}`;
+    lines.push(truncateToWidth(line, width));
+  }
+
+  return lines;
+}

package/dist/resources/extensions/gsd/worktree-manager.ts

@@ -94,7 +94,7 @@ export function worktreeBranchName(name: string): string {
  *
  * @param opts.branch — override the default `worktree/<name>` branch name
  */
-export function createWorktree(basePath: string, name: string, opts: { branch?: string } = {}): WorktreeInfo {
+export function createWorktree(basePath: string, name: string, opts: { branch?: string; startPoint?: string } = {}): WorktreeInfo {
   // Validate name: alphanumeric, hyphens, underscores only
   if (!/^[a-zA-Z0-9_-]+$/.test(name)) {
     throw new Error(`Invalid worktree name "${name}". Use only letters, numbers, hyphens, and underscores.`);
@@ -114,9 +114,12 @@ export function createWorktree(basePath: string, name: string, opts: { branch?:
   // Prune any stale worktree entries from a previous removal
   nativeWorktreePrune(basePath);
 
+  // Use the explicit start point (e.g. integration branch) if provided,
+  // otherwise fall back to the repo's detected main branch.
+  const startPoint = opts.startPoint ?? nativeDetectMainBranch(basePath);
+
   // Check if the branch already exists (leftover from a previous worktree)
   const branchAlreadyExists = nativeBranchExists(basePath, branch);
-  const mainBranch = nativeDetectMainBranch(basePath);
 
   if (branchAlreadyExists) {
     // Check if the branch is actively used by an existing worktree.
@@ -130,11 +133,11 @@ export function createWorktree(basePath: string, name: string, opts: { branch?:
       );
     }
 
-    // Reset the stale branch to current main, then attach worktree to it
-    nativeBranchForceReset(basePath, branch, mainBranch);
+    // Reset the stale branch to the start point, then attach worktree to it
+    nativeBranchForceReset(basePath, branch, startPoint);
     nativeWorktreeAdd(basePath, wtPath, branch);
   } else {
-    nativeWorktreeAdd(basePath, wtPath, branch, true, mainBranch);
+    nativeWorktreeAdd(basePath, wtPath, branch, true, startPoint);
   }
 
   return {

package/dist/resources/extensions/gsd/worktree.ts

@@ -76,6 +76,28 @@ export function detectWorktreeName(basePath: string): string | null {
   return name || null;
 }
 
+/**
+ * Resolve the project root from a path that may be inside a worktree.
+ * If the path contains `/.gsd/worktrees/<name>/`, returns the portion
+ * before `/.gsd/`. Otherwise returns the input unchanged.
+ *
+ * Use this in commands that call `process.cwd()` to ensure they always
+ * operate against the real project root, not a worktree subdirectory.
+ */
+export function resolveProjectRoot(basePath: string): string {
+  const normalizedPath = basePath.replaceAll("\\", "/");
+  const marker = "/.gsd/worktrees/";
+  const idx = normalizedPath.indexOf(marker);
+  if (idx === -1) return basePath;
+  // Return the original path up to the .gsd/ marker (un-normalized)
+  // Account for potential OS-specific separators
+  const sep = basePath.includes("\\") ? "\\" : "/";
+  const markerOs = `${sep}.gsd${sep}worktrees${sep}`;
+  const idxOs = basePath.indexOf(markerOs);
+  if (idxOs !== -1) return basePath.slice(0, idxOs);
+  return basePath.slice(0, idx);
+}
+
 /**
  * Get the slice branch name, namespaced by worktree when inside one.
  *