gsd-pi 2.18.0 → 2.19.0

package/src/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/src/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/src/resources/extensions/remote-questions/discord-adapter.ts

@@ -12,6 +12,7 @@ const NUMBER_EMOJIS = ["1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣"];
 export class DiscordAdapter implements ChannelAdapter {
   readonly name = "discord" as const;
   private botUserId: string | null = null;
+  private guildId: string | null = null;
   private readonly token: string;
   private readonly channelId: string;
 
@@ -24,6 +25,17 @@ export class DiscordAdapter implements ChannelAdapter {
     const res = await this.discordApi("GET", "/users/@me");
     if (!res.id) throw new Error("Discord auth failed: invalid token");
     this.botUserId = String(res.id);
+
+    // Resolve guild ID for message URL generation.
+    // The channel belongs to a guild — fetch channel info to discover it.
+    try {
+      const channelInfo = await this.discordApi("GET", `/channels/${this.channelId}`);
+      if (channelInfo.guild_id) {
+        this.guildId = String(channelInfo.guild_id);
+      }
+    } catch {
+      // Non-fatal — message URLs will be omitted if guild ID can't be resolved
+    }
   }
 
   async sendPrompt(prompt: RemotePrompt): Promise<RemoteDispatchResult> {
@@ -46,12 +58,18 @@ export class DiscordAdapter implements ChannelAdapter {
       }
     }
 
+    // Build message URL if guild ID is available
+    const messageUrl = this.guildId
+      ? `https://discord.com/channels/${this.guildId}/${this.channelId}/${messageId}`
+      : undefined;
+
     return {
       ref: {
         id: prompt.id,
         channel: "discord",
         messageId,
         channelId: this.channelId,
+        threadUrl: messageUrl,
       },
     };
   }
@@ -67,6 +85,21 @@ export class DiscordAdapter implements ChannelAdapter {
     return this.checkReplies(prompt, ref);
   }
 
+  /**
+   * Acknowledge that an answer was received by adding a ✅ reaction to the
+   * original prompt message. Best-effort — failures are silently ignored.
+   */
+  async acknowledgeAnswer(ref: RemotePromptRef): Promise<void> {
+    try {
+      await this.discordApi(
+        "PUT",
+        `/channels/${ref.channelId}/messages/${ref.messageId}/reactions/${encodeURIComponent("✅")}/@me`,
+      );
+    } catch {
+      // Best-effort — don't let acknowledgement failures affect the flow
+    }
+  }
+
   private async checkReactions(prompt: RemotePrompt, ref: RemotePromptRef): Promise<RemoteAnswer | null> {
     const reactions: Array<{ emoji: string; count: number }> = [];
     for (const emoji of NUMBER_EMOJIS) {

package/src/resources/extensions/remote-questions/format.ts

@@ -69,18 +69,24 @@ export function formatForDiscord(prompt: RemotePrompt): { embeds: DiscordEmbed[]
       return `${emoji} **${opt.label}** — ${opt.description}`;
     });
 
-    const footerText = supportsReactions
-      ? (q.allowMultiple
-          ? "Reply with comma-separated choices (`1,3`) or react with matching numbers"
-          : "Reply with a number or react with the matching number")
-      : `Question ${questionIndex + 1}/${prompt.questions.length} — reply with one line per question or use semicolons`;
+    const footerParts: string[] = [];
+    if (supportsReactions) {
+      footerParts.push(q.allowMultiple
+        ? "Reply with comma-separated choices (`1,3`) or react with matching numbers"
+        : "Reply with a number or react with the matching number");
+    } else {
+      footerParts.push(`Question ${questionIndex + 1}/${prompt.questions.length} — reply with one line per question or use semicolons`);
+    }
+    if (prompt.context?.source) {
+      footerParts.push(`Source: ${prompt.context.source}`);
+    }
 
     return {
       title: q.header,
       description: q.question,
       color: 0x7c3aed,
       fields: [{ name: "Options", value: optionLines.join("\n") }],
-      footer: { text: footerText },
+      footer: { text: footerParts.join(" · ") },
     };
   });
 

package/src/resources/extensions/remote-questions/manager.ts

@@ -76,6 +76,14 @@ export async function tryRemoteQuestions(
   }
 
   markPromptAnswered(prompt.id, answer);
+
+  // Acknowledge receipt with a ✅ on Discord (Slack threads are self-evident)
+  if (config.channel === "discord" && dispatch.ref) {
+    try {
+      await (adapter as import("./discord-adapter.js").DiscordAdapter).acknowledgeAnswer(dispatch.ref);
+    } catch { /* best-effort */ }
+  }
+
   return {
     content: [{ type: "text", text: JSON.stringify({ answers: formatForTool(answer) }) }],
     details: {