@esso0428/pi-subagents 0.17.2 → 0.17.4

package/src/ui/conversation-viewer.ts

@@ -29,6 +29,44 @@ const MATCH_BG = "\x1b[48;5;238m";
 const MATCH_BG_CURRENT = "\x1b[48;5;220m\x1b[30m";
 const BG_RESET = "\x1b[49m\x1b[39m";
 
+function renderScrollbarCell(
+  theme: Theme,
+  totalLines: number,
+  viewportHeight: number,
+  scrollOffset: number,
+  lineIndex: number,
+  active: boolean,
+): string {
+  const total = Math.max(0, Math.floor(totalLines));
+  const viewport = Math.max(1, Math.floor(viewportHeight));
+  if (total <= viewport) return theme.fg("scrollbarTrack", " ");
+  const maxOffset = Math.max(0, total - viewport);
+  const offset = Math.max(0, Math.min(maxOffset, Math.floor(scrollOffset)));
+  const thumbHeight = Math.max(1, Math.round((viewport * viewport) / total));
+  const thumbStart = Math.round(((viewport - thumbHeight) * offset) / maxOffset);
+  const inThumb = lineIndex >= thumbStart && lineIndex < thumbStart + thumbHeight;
+  return theme.fg(
+    inThumb ? "scrollbarThumb" : "scrollbarTrack",
+    inThumb ? (active ? "█" : "┃") : "│",
+  );
+}
+
+function renderScrollMoreRule(
+  theme: Theme,
+  width: number,
+  direction: "top" | "bottom",
+  hiddenLines: number,
+): string {
+  const safeWidth = Math.max(1, Math.floor(width));
+  if (hiddenLines <= 0) return theme.fg("border", `├${"─".repeat(safeWidth)}┤`);
+  const label = `${direction === "top" ? "↑" : "↓"} ${hiddenLines} more`;
+  const labelWidth = visibleWidth(label);
+  if (labelWidth + 2 > safeWidth) return theme.fg("border", `├${"─".repeat(safeWidth)}┤`);
+  const left = Math.floor((safeWidth - labelWidth) / 2);
+  const right = Math.max(0, safeWidth - left - labelWidth);
+  return `${theme.fg("border", `├${"─".repeat(left)}`)}${theme.fg("dim", label)}${theme.fg("border", `${"─".repeat(right)}┤`)}`;
+}
+
 /** The live fields needed by the viewer; historical viewers use a static source. */
 export type ConversationSource = Pick<AgentSession, "messages" | "subscribe">;
 
@@ -48,6 +86,7 @@ class FullToolPreview implements Component {
   private totalLines = 1;
   private pendingTop = false;
   private hoveredClose = false;
+  private scrollbarActive = false;
 
   constructor(
     private readonly tui: TUI,
@@ -99,10 +138,12 @@ class FullToolPreview implements Component {
   render(width: number): string[] {
     const safeWidth = Math.max(12, Math.floor(Number.isFinite(width) ? width : 12));
     const inner = Math.max(1, safeWidth - 2);
+    // Reserve the rightmost inner cell for the same track/thumb rail used by
+    // pi-tui's native ScrollView layout.
     const bodyWidth = Math.max(1, inner - 1);
     const terminalRows = Math.max(1, this.tui.terminal.rows);
     const viewport = Math.max(1, Math.min(30, Math.floor(terminalRows * 0.8), terminalRows - 6));
-    const wrapped = this.body.render(bodyWidth);
+    const wrapped = this.body.render(Math.max(1, bodyWidth - 1));
     this.totalLines = wrapped.length;
     this.pageSize = viewport;
     this.scrollOffset = Math.min(this.scrollOffset, Math.max(0, this.totalLines - this.pageSize));
@@ -112,15 +153,28 @@ class FullToolPreview implements Component {
       const clipped = truncateToWidth(text, rowWidth, "…", true);
       return clipped + " ".repeat(Math.max(0, rowWidth - visibleWidth(clipped)));
     };
+    const hiddenAbove = this.scrollOffset;
+    const hiddenBelow = Math.max(0, this.totalLines - this.scrollOffset - this.pageSize);
     const close = this.theme.fg(this.hoveredClose ? "text" : "dim", "[esc]");
     const header = this.theme.bold(this.theme.fg("accent", this.title));
     const status = `${this.scrollOffset + 1}-${Math.min(this.totalLines, this.scrollOffset + this.pageSize)} / ${this.totalLines} lines · j/k gg/G ↑↓ PgUp/PgDn · [esc] close`;
     return [
       border(`╭${"─".repeat(inner)}╮`),
       `${border("│")}${pad(` ${header}`, inner - visibleWidth(close))}${close}${border("│")}`,
-      `${border("├")}${border("─".repeat(inner))}${border("┤")}`,
-      ...Array.from({ length: viewport }, (_, index) => `${border("│")}${pad(` ${visible[index] ?? ""}`, bodyWidth)}${border("│")}`),
-      `${border("├")}${border("─".repeat(inner))}${border("┤")}`,
+      renderScrollMoreRule(this.theme, inner, "top", hiddenAbove),
+      ...Array.from({ length: viewport }, (_, index) => {
+        const content = pad(` ${visible[index] ?? ""}`, bodyWidth);
+        const rail = renderScrollbarCell(
+          this.theme,
+          this.totalLines,
+          this.pageSize,
+          this.scrollOffset,
+          index,
+          this.scrollbarActive,
+        );
+        return `${border("│")}${content}${rail}${border("│")}`;
+      }),
+      renderScrollMoreRule(this.theme, inner, "bottom", hiddenBelow),
       `${border("│")}${pad(this.theme.fg("dim", ` ${status}`))}${border("│")}`,
       border(`╰${"─".repeat(inner)}╯`),
     ];
@@ -134,6 +188,7 @@ class FullToolPreview implements Component {
     const next = Math.max(0, Math.min(Math.max(0, this.totalLines - this.pageSize), offset));
     if (next === this.scrollOffset) return;
     this.scrollOffset = next;
+    this.scrollbarActive = true;
     this.tui.requestRender();
   }
 }
@@ -164,6 +219,7 @@ export class ConversationViewer implements Component {
   private lastInnerW = 0;
   private closed = false;
   private stopArmed = false;
+  private hoveredPreview = false;
   private hoveredClose = false;
   private keys: ViewerKeys;
   private composer: Input | undefined;
@@ -171,6 +227,10 @@ export class ConversationViewer implements Component {
   private searchQuery = "";
   private searchMatches: ConversationMatch[] = [];
   private currentMatchIdx = -1;
+  /** Follow-up drafts, newest first, matching pi editor history semantics. */
+  private steerHistory: string[] = [];
+  private steerHistoryIndex = -1;
+  private steerHistoryDraft = "";
   private timeline: ConversationTimeline;
 
   constructor(
@@ -202,7 +262,16 @@ export class ConversationViewer implements Component {
 
   handleInput(data: string): void {
     if (this.composer) {
-      this.composer.handleInput(data);
+      if (matchesKey(data, Key.alt("up")) || data === "a-up" || data === "alt+up") {
+        this.recallSteerDraft();
+      } else {
+        const before = this.composer.getValue();
+        this.composer.handleInput(data);
+        if (this.composer && before !== this.composer.getValue()) {
+          this.steerHistoryIndex = -1;
+          this.steerHistoryDraft = "";
+        }
+      }
       this.tui.requestRender();
       return;
     }
@@ -305,11 +374,16 @@ export class ConversationViewer implements Component {
 
   handleMouse(event: TuiMouseEvent): { handled?: boolean; capture?: boolean; render?: boolean } | undefined {
     const innerW = Math.max(1, this.lastInnerW || event.width - 4);
+    const previewHit = this.isPreviewButtonHit(event.x, event.y, innerW);
     const closeHit = this.isCloseButtonHit(event.x, event.y, innerW);
     if (event.type === "move") {
+      const previewChanged = previewHit !== this.hoveredPreview;
       const closeChanged = closeHit !== this.hoveredClose;
+      this.hoveredPreview = previewHit;
       this.hoveredClose = closeHit;
-      if (this.composer || this.searchMode) return closeChanged ? { handled: true, render: true } : undefined;
+      if (this.composer || this.searchMode) {
+        return previewChanged || closeChanged ? { handled: true, render: true } : undefined;
+      }
       const contentLines = this.buildContentLines(innerW);
       const viewportHeight = this.viewportHeight();
       const maxScroll = Math.max(0, contentLines.length - viewportHeight);
@@ -318,7 +392,14 @@ export class ConversationViewer implements Component {
       const contentOrigin = 3 + (this.invocationLine() ? 1 : 0);
       const contentY = event.y - contentOrigin + visibleStart;
       const timelineResult = this.timeline.handleMouse({ ...event, y: contentY });
-      return timelineResult ?? (closeChanged ? { handled: true, render: true } : undefined);
+      return timelineResult ?? (previewChanged || closeChanged ? { handled: true, render: true } : undefined);
+    }
+    if (previewHit && event.button === "left") {
+      if (event.type === "press") return { handled: true, capture: true, render: false };
+      if (event.type === "click") {
+        this.openFocusedToolPreview();
+        return { handled: true, render: false };
+      }
     }
     if (closeHit && event.button === "left") {
       if (event.type === "press") return { handled: true, capture: true, render: false };
@@ -362,11 +443,24 @@ export class ConversationViewer implements Component {
     return result;
   }
 
+  private headerActionGeometry(innerW: number): { previewStart: number; previewEnd: number; closeStart: number; closeEnd: number } {
+    const closeEnd = 2 + innerW;
+    const closeStart = closeEnd - visibleWidth("[esc]");
+    const previewEnd = closeStart - 1;
+    const previewStart = previewEnd - visibleWidth("[preview]");
+    return { previewStart, previewEnd, closeStart, closeEnd };
+  }
+
+  private isPreviewButtonHit(x: number, y: number, innerW: number): boolean {
+    if (y !== 1) return false;
+    const { previewStart, previewEnd } = this.headerActionGeometry(innerW);
+    return x >= previewStart && x < previewEnd;
+  }
+
   private isCloseButtonHit(x: number, y: number, innerW: number): boolean {
     if (y !== 1) return false;
-    const labelWidth = visibleWidth("[esc]");
-    const labelStart = 2 + Math.max(0, innerW - labelWidth);
-    return x >= labelStart && x < 2 + innerW;
+    const { closeStart, closeEnd } = this.headerActionGeometry(innerW);
+    return x >= closeStart && x < closeEnd;
   }
 
   render(width: number): string[] {
@@ -396,11 +490,15 @@ export class ConversationViewer implements Component {
       headerParts.push(formatSessionTokens(tokens, percent, th, this.record.compactionCount));
     }
     const headerText = `${statusIcon} ${th.bold(name)}${modeTag}  ${th.fg("muted", this.record.description)} ${th.fg("dim", "·")} ${fgPreservingNestedStyles(th, "dim", headerParts.join(" · "))}`;
+    const previewAvailable = this.focusedToolBlock() !== undefined;
+    const previewLabel = previewAvailable && this.hoveredPreview
+      ? th.fg("text", th.bold("[preview]"))
+      : th.fg("dim", "[preview]");
     const closeLabel = this.hoveredClose ? th.fg("text", th.bold("[esc]")) : th.fg("dim", "[esc]");
-    const closeWidth = visibleWidth(closeLabel);
-    const headerLeft = truncateToWidth(headerText, Math.max(0, innerW - closeWidth - 1), "", true);
-    const headerGap = Math.max(1, innerW - visibleWidth(headerLeft) - closeWidth);
-    lines.push(row(headerLeft + " ".repeat(headerGap) + closeLabel));
+    const actionsWidth = visibleWidth(previewLabel) + 1 + visibleWidth(closeLabel);
+    const headerLeft = truncateToWidth(headerText, Math.max(0, innerW - actionsWidth - 1), "", true);
+    const headerGap = Math.max(1, innerW - visibleWidth(headerLeft) - actionsWidth);
+    lines.push(row(headerLeft + " ".repeat(headerGap) + previewLabel + " " + closeLabel));
     const invocationLine = this.invocationLine();
     if (invocationLine) lines.push(row(invocationLine));
     lines.push(hrMid);
@@ -442,7 +540,7 @@ export class ConversationViewer implements Component {
     lines.push(hrMid);
     if (this.composer) {
       lines.push(row(this.composer.render(innerW)[0] ?? ""));
-      const hint = th.fg("dim", "Enter send · Esc cancel");
+      const hint = th.fg("dim", "Enter send · Esc cancel · Alt+Up recall");
       const label = th.fg("accent", "✎ steer");
       lines.push(row(label + " ".repeat(Math.max(1, innerW - visibleWidth(label) - visibleWidth(hint))) + hint));
     } else if (this.searchMode) {
@@ -710,14 +808,18 @@ export class ConversationViewer implements Component {
     this.scrollOffset = Math.max(0, Math.min(maxScroll, this.scrollOffset));
   }
 
-  private openFocusedToolPreview(): void {
+  private focusedToolBlock(): ConversationBlock | undefined {
     this.buildContentLines(this.lastInnerW || 80);
     const focusedToolCallId = this.timeline.getFocusedToolCallId();
-    const block = focusedToolCallId
-      ? this.cachedMessageBlocks.find((candidate) => candidate.toolCallId === focusedToolCallId)
-      : this.currentBlock();
+    if (!focusedToolCallId) return undefined;
+    const block = this.cachedMessageBlocks.find((candidate) => candidate.toolCallId === focusedToolCallId);
+    return block?.kind === "tool" ? block : undefined;
+  }
+
+  private openFocusedToolPreview(): void {
+    const block = this.focusedToolBlock();
     const custom = this.operations?.ctx?.ui?.custom;
-    if (block?.kind !== "tool" || typeof custom !== "function") return;
+    if (!block || typeof custom !== "function") return;
 
     const toolName = block.toolName || "tool";
     const args = block.args ?? block.toolArguments;
@@ -865,17 +967,39 @@ export class ConversationViewer implements Component {
   private openComposer(): void {
     const input = new Input();
     input.focused = true;
+    this.steerHistoryIndex = -1;
+    this.steerHistoryDraft = "";
     input.onSubmit = (value: string) => {
       const message = value.trim();
       this.composer = undefined;
-      if (message) this.onSteer?.(message);
+      this.steerHistoryIndex = -1;
+      this.steerHistoryDraft = "";
+      if (message) {
+        if (this.steerHistory[0] !== message) this.steerHistory.unshift(message);
+        if (this.steerHistory.length > 100) this.steerHistory.pop();
+        this.onSteer?.(message);
+      }
       this.tui.requestRender();
     };
     input.onEscape = () => {
       this.composer = undefined;
+      this.steerHistoryIndex = -1;
+      this.steerHistoryDraft = "";
       this.tui.requestRender();
     };
     this.composer = input;
     this.tui.requestRender();
   }
+
+  /** Recall the newest prior steer, preserving the draft for future editing. */
+  private recallSteerDraft(): void {
+    if (!this.composer || this.steerHistory.length === 0) return;
+    if (this.steerHistoryIndex < 0) {
+      this.steerHistoryDraft = this.composer.getValue();
+      this.steerHistoryIndex = 0;
+    } else if (this.steerHistoryIndex < this.steerHistory.length - 1) {
+      this.steerHistoryIndex++;
+    }
+    this.composer.setValue(this.steerHistory[this.steerHistoryIndex] ?? this.steerHistoryDraft);
+  }
 }