@pellux/goodvibes-tui 1.13.0 → 1.14.0

package/src/panels/diff-review-panel.ts

@@ -0,0 +1,395 @@
+// ---------------------------------------------------------------------------
+// DiffReviewPanel — comment-on-hunk review loop.
+//
+// Shows the current session's file changes per-file and hunk-boundaried, lets
+// the user select a hunk, attach a comment, and submit that comment to the
+// session as a steering message carrying structured context (file path, new-file
+// line range, and a short patch excerpt) so the model knows exactly what the
+// comment targets.
+//
+// Data source (labelled honestly in the panel): `git diff <base> -- <files>`,
+// where <files> is the set the SDK SessionChangeTracker recorded this session.
+// That is CURRENT working-tree content vs the base ref — not a turn-start
+// snapshot. The panel never presents a stale diff as current.
+// ---------------------------------------------------------------------------
+
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
+import { GitService } from '@pellux/goodvibes-sdk/platform/git';
+import { BasePanel } from './base-panel.ts';
+import { DIFF_TONES, UI_TONES } from '../renderer/ui-primitives.ts';
+import {
+  buildEmptyState,
+  buildPanelWorkspace,
+  buildStyledPanelLine,
+  resolveScrollablePanelSection,
+  DEFAULT_PANEL_PALETTE,
+  extendPalette,
+} from './polish.ts';
+import { isPanelSearchBackspace, isPanelSearchCancel, isPanelSearchCommit, isPanelSearchPrintable } from './search-focus.ts';
+import { appendSteerText } from './fleet-tabs.ts';
+import {
+  parseReviewDiff,
+  flattenHunks,
+  hunkLineRange,
+  buildSteerMessage,
+  type ReviewFile,
+  type ReviewHunk,
+  type HunkComment,
+} from './diff-review-model.ts';
+
+const COLOR = extendPalette(DEFAULT_PANEL_PALETTE, {
+  addition: DIFF_TONES.add,
+  deletion: DIFF_TONES.del,
+  hunk: DIFF_TONES.hunk,
+} as const);
+
+/** A comment attached to a hunk plus whether it has already been steered to the session. */
+interface CommentState {
+  comment: string;
+  submitted: boolean;
+}
+
+function basename(p: string): string {
+  const parts = p.replace(/\\/g, '/').split('/');
+  return parts[parts.length - 1] ?? p;
+}
+
+export class DiffReviewPanel extends BasePanel {
+  public override isTransient = true;
+
+  private readonly workingDirectory: string;
+  private readonly getChangedFiles: (() => string[]) | undefined;
+  private files: ReviewFile[] = [];
+  private hunks: ReviewHunk[] = [];
+  private cursor = 0;
+  private scrollOffset = 0;
+  /** Comments keyed by `${fileIndex}:${hunkIndex}`. */
+  private comments = new Map<string, CommentState>();
+  private composing = false;
+  private draft = '';
+  private submitSteer: ((text: string) => void) | null = null;
+  /** Injected by the /review command: reverse-apply (reject) the given hunk via checkpoints.revertHunk. */
+  private revertHunk: ((hunk: ReviewHunk) => void) | null = null;
+  private sourceLabel = 'working tree vs HEAD (files edited this session)';
+  private status: string | null = null;
+  /** True once a load has completed (so the empty state can distinguish "no changes" from "not loaded"). */
+  private loaded = false;
+
+  constructor(
+    workingDirectory: string,
+    private readonly requestRender: () => void = () => {},
+    getChangedFiles?: () => string[],
+  ) {
+    super('review', 'Review', 'R', 'development');
+    this.workingDirectory = workingDirectory;
+    this.getChangedFiles = getChangedFiles;
+  }
+
+  // -------------------------------------------------------------------------
+  // Public API — driven by the /review command
+  // -------------------------------------------------------------------------
+
+  /** Wire the steering submit path (the /review command passes ctx.submitInput). */
+  setSubmit(fn: (text: string) => void): void {
+    this.submitSteer = fn;
+  }
+
+  /** Wire the hunk-revert path (the /review command drives checkpoints.revertHunk). */
+  setRevertHandler(fn: (hunk: ReviewHunk) => void): void {
+    this.revertHunk = fn;
+  }
+
+  /** Surface a status line (the revert flow reports conflicts/outcomes here). */
+  note(message: string): void {
+    this.status = message;
+    this.markDirty();
+    this.requestRender();
+  }
+
+  /** Re-load the session diff — used after a revert mutates the working tree. */
+  async refresh(): Promise<void> {
+    await this.loadSessionReview();
+    this.requestRender();
+  }
+
+  private keyFor(hunk: ReviewHunk): string {
+    return `${hunk.fileIndex}:${hunk.hunkIndex}`;
+  }
+
+  private currentHunk(): ReviewHunk | null {
+    return this.hunks[this.cursor] ?? null;
+  }
+
+  /** Adopt a parsed review set with an explicit provenance label. */
+  loadReview(files: ReviewFile[], sourceLabel: string): void {
+    this.files = files;
+    this.hunks = flattenHunks(files);
+    this.cursor = 0;
+    this.scrollOffset = 0;
+    this.comments.clear();
+    this.composing = false;
+    this.draft = '';
+    this.sourceLabel = sourceLabel;
+    this.loaded = true;
+    this.markDirty();
+  }
+
+  /**
+   * Load the session's changed files as a git diff against `ref` (default HEAD)
+   * and parse it into per-file hunks. Honest source: current working-tree
+   * content vs the base ref, restricted to files this session edited.
+   */
+  async loadSessionReview(ref = 'HEAD'): Promise<void> {
+    if (!GitService.isGitRepo(this.workingDirectory)) {
+      this.status = 'Not a git repository — no working-tree diff to review.';
+      this.loaded = true;
+      this.markDirty();
+      return;
+    }
+    const files = (this.getChangedFiles?.() ?? []).filter(Boolean);
+    const args = ['diff', ref, '--', ...files];
+    const wholeRepo = files.length === 0;
+    const proc = Bun.spawn(['git', ...(wholeRepo ? ['diff', ref] : args)], { stdout: 'pipe', stderr: 'pipe', cwd: this.workingDirectory });
+    const [raw, errText] = await Promise.all([new Response(proc.stdout).text(), new Response(proc.stderr).text()]);
+    const exitCode = await proc.exited;
+    if (exitCode !== 0) {
+      this.status = `git diff failed: ${errText.trim() || 'unknown error'}`;
+      this.loaded = true;
+      this.markDirty();
+      return;
+    }
+    const label = wholeRepo
+      ? `working tree vs ${ref} (no session-tracked files; showing whole working tree)`
+      : `working tree vs ${ref} (${files.length} file${files.length === 1 ? '' : 's'} edited this session)`;
+    this.loadReview(parseReviewDiff(raw), label);
+  }
+
+  // -------------------------------------------------------------------------
+  // Input
+  // -------------------------------------------------------------------------
+
+  handleInput(key: string): boolean {
+    if (this.composing) return this.handleComposerInput(key);
+    switch (key) {
+      case 'up': case 'k': this.moveCursor(-1); return true;
+      case 'down': case 'j': this.moveCursor(1); return true;
+      case 'tab': this.jumpFile(1); return true;
+      case '\x1b[Z': case 'shift-tab': case 'backtab': this.jumpFile(-1); return true;
+      case 'pageup': this.moveCursor(-5); return true;
+      case 'pagedown': this.moveCursor(5); return true;
+      case 'c': this.openComposer(); return true;
+      case 'x': this.clearComment(); return true;
+      case 'a': this.submitAll(); return true;
+      case 'r': this.rejectCurrent(); return true;
+      case 'enter': case 'return': this.submitCurrent(); return true;
+      default: return false;
+    }
+  }
+
+  private handleComposerInput(key: string): boolean {
+    if (isPanelSearchCancel(key)) {
+      this.composing = false;
+      this.draft = '';
+      this.status = 'Comment cancelled.';
+      this.markDirty();
+      return true;
+    }
+    if (isPanelSearchCommit(key)) {
+      const hunk = this.currentHunk();
+      const text = this.draft.trim();
+      if (hunk && text.length > 0) {
+        this.comments.set(this.keyFor(hunk), { comment: text, submitted: false });
+        this.status = 'Comment attached. Press Enter to send it, or a to send all.';
+      } else {
+        this.status = 'Empty comment discarded.';
+      }
+      this.composing = false;
+      this.draft = '';
+      this.markDirty();
+      return true;
+    }
+    if (isPanelSearchBackspace(key)) {
+      this.draft = this.draft.slice(0, -1);
+      this.markDirty();
+      return true;
+    }
+    if (key.length === 1 && (isPanelSearchPrintable(key) || key === '\r' || key === '\n')) {
+      this.draft = appendSteerText(this.draft, key);
+      this.markDirty();
+      return true;
+    }
+    return true; // swallow other keys while composing
+  }
+
+  private moveCursor(delta: number): void {
+    if (this.hunks.length === 0) return;
+    this.cursor = Math.max(0, Math.min(this.hunks.length - 1, this.cursor + delta));
+    this.markDirty();
+  }
+
+  private jumpFile(direction: number): void {
+    const cur = this.currentHunk();
+    if (!cur) return;
+    const targetFile = cur.fileIndex + direction;
+    const idx = this.hunks.findIndex((h) => h.fileIndex === targetFile);
+    if (idx >= 0) {
+      this.cursor = idx;
+      this.markDirty();
+    }
+  }
+
+  private openComposer(): void {
+    const hunk = this.currentHunk();
+    if (!hunk) return;
+    this.composing = true;
+    this.draft = this.comments.get(this.keyFor(hunk))?.comment ?? '';
+    this.status = null;
+    this.markDirty();
+  }
+
+  private clearComment(): void {
+    const hunk = this.currentHunk();
+    if (!hunk) return;
+    if (this.comments.delete(this.keyFor(hunk))) {
+      this.status = 'Comment removed.';
+      this.markDirty();
+    }
+  }
+
+  private steer(items: HunkComment[]): boolean {
+    if (!this.submitSteer) {
+      this.status = 'No session is wired to receive steering here.';
+      this.markDirty();
+      return false;
+    }
+    if (items.length === 0) {
+      this.status = 'No comment to send. Press c to write one.';
+      this.markDirty();
+      return false;
+    }
+    this.submitSteer(buildSteerMessage(items, this.sourceLabel));
+    for (const { hunk } of items) {
+      const state = this.comments.get(this.keyFor(hunk));
+      if (state) state.submitted = true;
+    }
+    this.status = items.length === 1
+      ? 'Comment sent to the session as a steering message.'
+      : `${items.length} comments sent to the session as one steering message.`;
+    this.markDirty();
+    this.requestRender();
+    return true;
+  }
+
+  private submitCurrent(): void {
+    const hunk = this.currentHunk();
+    if (!hunk) return;
+    const state = this.comments.get(this.keyFor(hunk));
+    if (!state || state.comment.length === 0) {
+      this.status = 'This hunk has no comment yet. Press c to write one.';
+      this.markDirty();
+      return;
+    }
+    this.steer([{ hunk, comment: state.comment }]);
+  }
+
+  /** Reject the selected hunk: hand it to the revert flow (preview → confirm → revertHunk). */
+  private rejectCurrent(): void {
+    const hunk = this.currentHunk();
+    if (!hunk) return;
+    if (!this.revertHunk) {
+      this.note('Hunk revert is not wired in this session.');
+      return;
+    }
+    this.revertHunk(hunk);
+  }
+
+  private submitAll(): void {
+    const items: HunkComment[] = [];
+    for (const hunk of this.hunks) {
+      const state = this.comments.get(this.keyFor(hunk));
+      if (state && !state.submitted && state.comment.length > 0) items.push({ hunk, comment: state.comment });
+    }
+    this.steer(items);
+  }
+
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+
+  private hunkRow(hunk: ReviewHunk, isCursor: boolean, width: number): Line {
+    const state = this.comments.get(this.keyFor(hunk));
+    const marker = !state ? '   ' : state.submitted ? '[✓]' : '[c]';
+    const range = hunkLineRange(hunk);
+    const label = `${marker} ${basename(hunk.filePath)}:${range.start}-${range.end}  +${hunk.added} -${hunk.removed}`;
+    return buildStyledPanelLine(width, [{
+      text: truncateDisplay(`${isCursor ? '▸ ' : '  '}${label}`, width),
+      fg: state?.submitted ? COLOR.addition : isCursor ? COLOR.value : COLOR.dim,
+      bg: isCursor ? UI_TONES.bg.selected : undefined,
+      bold: isCursor,
+    }]);
+  }
+
+  private detailLines(hunk: ReviewHunk, width: number): Line[] {
+    const lines: Line[] = [];
+    lines.push(buildStyledPanelLine(width, [{ text: truncateDisplay(` ${hunk.filePath}`, width), fg: COLOR.value, bold: true }]));
+    lines.push(buildStyledPanelLine(width, [{ text: truncateDisplay(` ${hunk.header}`, width), fg: COLOR.hunk }]));
+    for (const raw of hunk.bodyLines.slice(0, 8)) {
+      const fg = raw.startsWith('+') ? COLOR.addition : raw.startsWith('-') ? COLOR.deletion : COLOR.dim;
+      lines.push(buildStyledPanelLine(width, [{ text: truncateDisplay(` ${raw}`, width), fg }]));
+    }
+    const state = this.comments.get(this.keyFor(hunk));
+    if (this.composing) {
+      lines.push(buildStyledPanelLine(width, [{ text: truncateDisplay(` comment> ${this.draft}_`, width), fg: COLOR.value, bold: true }]));
+    } else if (state) {
+      const tag = state.submitted ? '(sent)' : '(unsent)';
+      lines.push(buildStyledPanelLine(width, [{ text: truncateDisplay(` comment ${tag}: ${state.comment}`, width), fg: state.submitted ? COLOR.addition : COLOR.value }]));
+    }
+    return lines;
+  }
+
+  private footer(width: number): Line {
+    const hints = this.composing
+      ? ' Enter attach  Esc cancel'
+      : ' ↑/↓ hunk  Tab file  c comment  Enter send  a send all  r revert  x clear';
+    const text = this.status ? `${hints}  •  ${this.status}` : hints;
+    return buildStyledPanelLine(width, [{ text: truncateDisplay(text, width), fg: COLOR.dim, bg: COLOR.sectionBg }], { fillBg: COLOR.sectionBg });
+  }
+
+  render(width: number, height: number): Line[] {
+    return this.trackedRender(() => {
+      if (height <= 0 || width <= 0) return [];
+      if (this.hunks.length === 0) {
+        const detail = this.loaded
+          ? (this.status ?? 'No changes to review. Files edited this session appear here as hunks.')
+          : 'Loading session changes…';
+        return buildPanelWorkspace(width, height, {
+          title: 'Review',
+          palette: COLOR,
+          sections: [{ title: 'Review', lines: buildEmptyState(width, ' Nothing to review yet.', detail, [{ command: '/review', summary: 'load this session\'s file changes as commentable hunks' }], COLOR) }],
+        });
+      }
+
+      const hunk = this.currentHunk();
+      const listLines = this.hunks.map((h, i) => this.hunkRow(h, i === this.cursor, width));
+      const section = resolveScrollablePanelSection(width, height, {
+        palette: COLOR,
+        footerLines: [this.footer(width)],
+        beforeSections: [{ title: `Selected hunk (${this.sourceLabel})`, lines: hunk ? this.detailLines(hunk, width) : [] }],
+        section: { title: `Hunks (${this.cursor + 1}/${this.hunks.length})`, scrollableLines: listLines, scrollOffset: this.scrollOffset, selectedIndex: this.cursor, minRows: 1 },
+      });
+      this.scrollOffset = section.scrollOffset;
+
+      return buildPanelWorkspace(width, height, {
+        title: 'Review',
+        palette: COLOR,
+        footerLines: [this.footer(width)],
+        sections: [
+          { title: `Selected hunk (${this.sourceLabel})`, lines: hunk ? this.detailLines(hunk, width) : [createEmptyLine(width)] },
+          { title: section.section.title, lines: section.section.lines },
+        ],
+      });
+    });
+  }
+}

package/src/panels/fleet-panel-format.ts

@@ -7,10 +7,20 @@
 // renderItem/renderDetail call, with no `this` dependency.
 // ---------------------------------------------------------------------------
 
-import type { ProcessCostState, ProcessUsage } from '@pellux/goodvibes-sdk/platform/runtime/fleet';
+import type { ProcessCostState, ProcessNode, ProcessUsage } from '@pellux/goodvibes-sdk/platform/runtime/fleet';
+import type { Line } from '../types/grid.ts';
 import { formatAgentCost } from './agent-inspector-shared.ts';
-import { DEFAULT_PANEL_PALETTE, type ColumnSpec, type PanelPalette } from './polish.ts';
+import { buildPanelLine, DEFAULT_PANEL_PALETTE, type ColumnSpec, type PanelPalette } from './polish.ts';
 import { fleetUsageTokens, hasFleetCost, type FleetStateTone } from './fleet-read-model.ts';
+import { fleetStateDisplay } from './fleet-stop.ts';
+import { formatElapsed } from '../utils/format-elapsed.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
+import { formatWorkItemIsolationDetailFromRaw } from './fleet-panel-worktree-detail.ts';
+import { buildAlignedRow } from './polish.ts';
+import { fleetKindTag } from './fleet-read-model.ts';
+import { steerBadgeGlyph, steerBadgeTone } from './fleet-steer.ts';
+import type { SteerBadge } from './fleet-tabs.ts';
+import type { FleetTreeRow } from './fleet-read-model.ts';
 
 // Column widths for the tree row layout. `label` absorbs whatever width is
 // left over after the fixed columns + gaps; on hostile (narrow) widths the
@@ -60,3 +70,105 @@ export function formatFleetCost(costUsd: number | null | undefined, costState: P
   const formatted = formatAgentCost(costUsd as number);
   return costState === 'estimated' ? `~${formatted}` : formatted;
 }
+
+/**
+ * One fleet tree row. Pure (extracted from FleetPanel.renderItem for the
+ * 800-line cap). Two display-only overrides in priority order: an in-flight
+ * `stopping` wins the glyph/label/activity, then a `blocked`-on-user node gets
+ * the ⚑ badge + 'blocked on you' in the activity slot. Otherwise a queued-steer
+ * badge (if any) prefixes the live activity text.
+ */
+export function renderFleetRowLine(
+  row: FleetTreeRow,
+  width: number,
+  stopping: boolean,
+  blocked: boolean,
+  badge: SteerBadge | null,
+  palette: PanelPalette = DEFAULT_PANEL_PALETTE,
+): Line {
+  const C = palette;
+  const node = row.node;
+  const disp = fleetStateDisplay(node.state, stopping, blocked);
+  const color = toneColor(disp.tone, C);
+  // Best-of-N grouping: badge a sibling attempt so the N candidates read as one
+  // group and a held (pick-ready) candidate is visible (node.attemptGroup, SDK).
+  const attemptBadge = node.attemptGroup
+    ? ` [attempt ${node.attemptGroup.index + 1}/${node.attemptGroup.total}${node.attemptGroup.held ? ', held' : ''}]`
+    : '';
+  const label = `${row.treePrefix}${node.label}${attemptBadge}`;
+  // Activity column doubles as the badge slot: 'blocked on you' shouts the
+  // wait louder than the raw currentActivity text ('awaiting approval …').
+  const activity = stopping
+    ? disp.label
+    : blocked
+      ? 'blocked on you'
+      : badge
+        ? `${steerBadgeGlyph(badge.status)} ${node.currentActivity?.text ?? ''}`.trimEnd()
+        : (node.currentActivity?.text ?? '');
+  const activityColor = stopping ? color : blocked ? color : badge ? steerBadgeTone(badge.status, C) : C.dim;
+
+  return buildAlignedRow(
+    width,
+    [
+      { text: disp.glyph, fg: color },
+      { text: fleetKindTag(node.kind), fg: C.dim },
+      { text: label, fg: C.value },
+      { text: formatElapsed(node.elapsedMs), fg: C.dim },
+      { text: formatFleetTokens(node.usage), fg: C.dim },
+      { text: formatFleetCost(node.costUsd, node.costState), fg: C.value },
+      { text: activity, fg: activityColor },
+    ],
+    planColumns(width),
+  );
+}
+
+/**
+ * The selected-node detail block under the fleet tree. Pure (extracted from
+ * FleetPanel.renderDetail to hold that file under the 800-line architecture
+ * cap). `stopping`/`blocked` are display-only overrides the caller derives from
+ * the stop tracker + node state — mirror the tree row exactly so the literal
+ * 'state' text never claims a past-tense outcome mid-write, and a
+ * blocked-on-user node reads 'blocked on you' here too.
+ */
+export function renderFleetDetailLines(
+  node: ProcessNode,
+  width: number,
+  stopping: boolean,
+  blocked: boolean,
+  palette: PanelPalette = DEFAULT_PANEL_PALETTE,
+): Line[] {
+  const C = palette;
+  const disp = fleetStateDisplay(node.state, stopping, blocked);
+  const color = toneColor(disp.tone, C);
+
+  const line1 = buildPanelLine(width, [
+    [' ', C.dim],
+    [disp.glyph, color],
+    [` ${node.kind}`, C.dim],
+    ['  id ', C.label],
+    [node.id, C.value],
+    ['  state ', C.label],
+    [disp.label, color],
+    ['  elapsed ', C.label],
+    [formatElapsed(node.elapsedMs), C.value],
+  ]);
+  const line2 = buildPanelLine(width, [
+    [' model ', C.label],
+    [node.model ?? 'unknown', C.info],
+    ['  tokens ', C.label],
+    [formatFleetTokens(node.usage), C.value],
+    ['  cost ', C.label],
+    [formatFleetCost(node.costUsd, node.costState), C.value],
+  ]);
+  const activityText = node.currentActivity
+    ? `${node.currentActivity.kind}: ${node.currentActivity.text}`
+    : '(no recent activity)';
+  const line3 = buildPanelLine(width, [
+    [' activity ', C.label],
+    [truncateDisplay(activityText, Math.max(0, width - 11)), C.dim],
+  ]);
+  // Approval history attaches here once session tabs land.
+  const line4 = buildPanelLine(width, [[' approvals ', C.label], ['—', C.dim]]);
+  const isolationDetail = node.kind === 'work-item' ? formatWorkItemIsolationDetailFromRaw(node.raw) : null;
+  return [line1, line2, line3, line4, ...(isolationDetail ? [buildPanelLine(width, [[' isolation ', C.label], [isolationDetail, C.dim]])] : [])];
+}