@pellux/goodvibes-tui 0.28.0 → 1.0.0

package/src/panels/worktree-panel.ts

@@ -3,20 +3,43 @@ import { createEmptyLine } from '../types/grid.ts';
 import { basename } from 'node:path';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import { buildAlignedRow, buildKeyValueLine, buildKeyboardHints, buildPanelLine, buildPanelWorkspace, DEFAULT_PANEL_PALETTE, resolvePrimaryScrollableSection, type ColumnSpec, type PanelWorkspaceSection } from './polish.ts';
-import { summarizeWorktreeOwnership, type WorktreeRegistry, type WorktreeStatusRecord } from '@/runtime/index.ts';
+import { type ConfirmState, handleConfirmInput, renderConfirmLines } from './confirm-state.ts';
+import { summarizeWorktreeOwnership, type WorktreeStatusRecord } from '@/runtime/index.ts';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
+import type { PanelIntegrationContext } from './types.ts';
 
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
-  dim: '#475569',
-  info: '#38bdf8',
-  ok: '#22c55e',
-  warn: '#eab308',
-  headerBg: '#1e293b',
-} as const;
+// Base chrome only — state colors and text tokens come straight from
+// DEFAULT_PANEL_PALETTE (WO-002).
+const C = DEFAULT_PANEL_PALETTE;
+
+/**
+ * Structural shape the panel actually needs from a worktree registry. The
+ * real `WorktreeRegistry` (from the SDK) satisfies this directly; it has no
+ * `subscribe()` method today, so the panel falls back to polling when one
+ * isn't provided (see constructor). Kept narrow and `Like`-suffixed per the
+ * project's duck-typing convention (see `agent-inspector-shared.ts`).
+ */
+export interface WorktreeRegistryLike {
+  list(): Promise<WorktreeStatusRecord[]>;
+  attach(path: string, target: { sessionId?: string; taskId?: string }): void;
+  setState(path: string, state: WorktreeStatusRecord['state']): void;
+  cleanup(path: string): Promise<void>;
+  /** Optional live-update hook; when present the panel prefers it over polling. */
+  subscribe?(listener: () => void): () => void;
+}
+
+/** What a pending destructive confirm will do once the user confirms. */
+interface WorktreeConfirmSubject {
+  readonly path: string;
+  readonly action: 'discard' | 'cleanup';
+}
+
+/** Poll cadence used only when the registry has no `subscribe()` method. */
+const POLL_INTERVAL_MS = 5_000;
 
 function stateColor(state: WorktreeStatusRecord['state']): string {
   switch (state) {
-    case 'active': return C.ok;
+    case 'active': return C.good;
     case 'paused':
     case 'kept': return C.warn;
     default: return C.dim;
@@ -61,16 +84,37 @@ function buildWorktreeRow(width: number, row: WorktreeStatusRecord, selected: bo
   );
 }
 
+const WORKTREE_HINTS = [
+  { keys: '↑/↓', label: 'select' },
+  { keys: 'p/u/k', label: 'pause/resume/keep' },
+  { keys: 'd/c', label: 'discard/cleanup' },
+  { keys: 'enter', label: 'jump to session/task' },
+  { keys: 'r', label: 'refresh' },
+] as const;
+
 export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
   private rows: WorktreeStatusRecord[] = [];
   private loading = false;
-  private readonly worktreeRegistry: WorktreeRegistry;
+  private confirm: ConfirmState<WorktreeConfirmSubject> | null = null;
+  private pendingJump: { targetPanel: 'sessions' | 'tasks' } | null = null;
+  private readonly worktreeRegistry: WorktreeRegistryLike;
+  private readonly requestRender: () => void;
+  private unsubscribe: (() => void) | null = null;
 
-  public constructor(worktreeRegistry: WorktreeRegistry) {
-    super('worktrees', 'Worktrees', 'W', 'monitoring');
+  public constructor(worktreeRegistry: WorktreeRegistryLike, requestRender: () => void = () => {}) {
+    super('worktrees', 'Worktrees', '▯', 'automation-control');
     this.showSelectionGutter = true; // I5: non-color selection affordance
     this.worktreeRegistry = worktreeRegistry;
+    this.requestRender = requestRender;
     void this.refresh();
+    // Live state: prefer a registry subscription when the caller provides one
+    // (matches the mock shape used by contract tests); otherwise poll, so the
+    // real SDK WorktreeRegistry (which has no subscribe() today) still stays live.
+    if (typeof this.worktreeRegistry.subscribe === 'function') {
+      this.unsubscribe = this.worktreeRegistry.subscribe(() => { void this.refresh(); });
+    } else {
+      this.registerTimer(setInterval(() => { void this.refresh(); }, POLL_INTERVAL_MS));
+    }
   }
 
   public override onActivate(): void {
@@ -78,14 +122,102 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
     if (!this.loading) void this.refresh();
   }
 
-  public handleInput(key: string): boolean {
+  public override onDestroy(): void {
+    super.onDestroy();
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = null;
+    }
+  }
+
+  public override handleInput(key: string): boolean {
+    if (this.lastError !== null) this.clearError();
+
+    const confirmResult = handleConfirmInput(this.confirm, key);
+    if (confirmResult === 'confirmed') {
+      const subject = this.confirm!.subject;
+      this.confirm = null;
+      if (subject.action === 'discard') {
+        this.worktreeRegistry.setState(subject.path, 'discard');
+        void this.refresh();
+      } else {
+        void this._cleanup(subject.path);
+      }
+      this.markDirty();
+      return true;
+    }
+    if (confirmResult === 'cancelled') {
+      this.confirm = null;
+      this.markDirty();
+      return true;
+    }
+    if (confirmResult === 'absorbed') return true;
+
     if (key === 'r') {
       void this.refresh();
       return true;
     }
+
+    const selected = this.getSelectedItem();
+
+    if (key === 'p' && selected && selected.state !== 'paused') {
+      this.worktreeRegistry.setState(selected.path, 'paused');
+      void this.refresh();
+      return true;
+    }
+    if (key === 'u' && selected && selected.state !== 'active') {
+      this.worktreeRegistry.setState(selected.path, 'active');
+      void this.refresh();
+      return true;
+    }
+    if (key === 'k' && selected && selected.state !== 'kept') {
+      this.worktreeRegistry.setState(selected.path, 'kept');
+      void this.refresh();
+      return true;
+    }
+    if (key === 'd' && selected && selected.state !== 'discard') {
+      this.confirm = {
+        subject: { path: selected.path, action: 'discard' },
+        label: `worktree ${basename(selected.path)} (${selected.branch})`,
+        verb: 'Discard',
+      };
+      this.markDirty();
+      return true;
+    }
+    if (key === 'c' && selected) {
+      this.confirm = {
+        subject: { path: selected.path, action: 'cleanup' },
+        label: `worktree ${basename(selected.path)} (${selected.branch})`,
+        verb: 'Clean up',
+      };
+      this.markDirty();
+      return true;
+    }
+    if ((key === 'enter' || key === 'return') && selected && (selected.sessionId || selected.taskId)) {
+      this.pendingJump = { targetPanel: selected.sessionId ? 'sessions' : 'tasks' };
+      return true;
+    }
+
     return super.handleInput(key);
   }
 
+  /**
+   * Enter on an attached worktree row jumps to the owning session/task panel.
+   * The actual `PanelManager.open()` call requires the integration context,
+   * which is only available here (invoked right after `handleInput` returns
+   * `true` for the same key) — same staged-pending-action pattern as
+   * `incident-review-panel.ts`.
+   */
+  public handlePanelIntegrationAction(_key: string, ctx: PanelIntegrationContext): boolean {
+    if (this.pendingJump) {
+      const jump = this.pendingJump;
+      this.pendingJump = null;
+      ctx.panelManager.open(jump.targetPanel);
+      return true;
+    }
+    return false;
+  }
+
   protected getItems(): readonly WorktreeStatusRecord[] {
     return this.rows;
   }
@@ -103,11 +235,33 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
     } finally {
       this.loading = false;
       this.markDirty();
+      this.requestRender();
+    }
+  }
+
+  private async _cleanup(path: string): Promise<void> {
+    try {
+      await this.worktreeRegistry.cleanup(path);
+    } catch (err) {
+      this.setError(summarizeError(err));
+    } finally {
+      await this.refresh();
     }
   }
 
   public render(width: number, height: number): Line[] {
     this.needsRender = false;
+
+    if (this.confirm) {
+      const lines = buildPanelWorkspace(width, height, {
+        title: 'Worktree Control Room',
+        sections: [{ title: 'Confirmation', lines: renderConfirmLines(width, this.confirm) }],
+        palette: C,
+      });
+      while (lines.length < height) lines.push(createEmptyLine(width));
+      return lines.slice(0, height);
+    }
+
     const sections: PanelWorkspaceSection[] = [];
 
     if (this.loading && this.rows.length === 0) {
@@ -127,7 +281,7 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
         lines: [
           buildKeyValueLine(width, [
             { label: 'total', value: String(summary.total), valueColor: C.value },
-            { label: 'active', value: String(summary.active), valueColor: C.ok },
+            { label: 'active', value: String(summary.active), valueColor: C.good },
             { label: 'paused', value: String(summary.paused), valueColor: summary.paused > 0 ? C.warn : C.dim },
             { label: 'cleanup', value: String(summary.pendingCleanup), valueColor: summary.pendingCleanup > 0 ? C.warn : C.dim },
           ], C),
@@ -139,19 +293,7 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
           ], C),
         ],
       });
-      sections.push({
-        title: 'Next Actions',
-        lines: [
-          buildPanelLine(width, [[
-            summary.pendingCleanup > 0 || summary.discard > 0
-              ? ' Review pending-cleanup and discard-marked worktrees before they drift from orchestrator ownership.'
-              : ' Worktree ownership is healthy. Use the task and session links below for restore, merge, or cleanup review.',
-            summary.pendingCleanup > 0 || summary.discard > 0 ? C.warn : C.dim,
-          ]]),
-          buildPanelLine(width, [['  /worktree task <task-id>  /worktree session <session-id>  /worktree inspect <path>', C.info]]),
-        ],
-      });
-      const selected = this.rows[this.selectedIndex]!;
+      const selected = this.getSelectedItem()!;
       const detailSection: PanelWorkspaceSection = {
         title: 'Details',
         lines: [
@@ -165,23 +307,11 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
               : ' Unattached worktree detected. Review whether it should be attached, kept, discarded, or cleaned up.',
             selected.sessionId || selected.taskId ? C.info : C.warn,
           ]]),
-          buildPanelLine(width, [[
-            selected.state === 'paused'
-              ? ` Next: /worktree resume ${selected.path}`
-              : selected.state === 'discard' || selected.state === 'pending-cleanup'
-                ? ` Next: /worktree cleanup ${selected.path}`
-                : selected.taskId
-                  ? ` Next: /worktree task ${selected.taskId}`
-                  : selected.sessionId
-                    ? ` Next: /worktree session ${selected.sessionId}`
-                    : ` Next: /worktree inspect ${selected.path}`,
-            C.dim,
-          ]]),
         ],
       };
       const resolvedWorktreesSection = resolvePrimaryScrollableSection(width, height, {
         intro: 'Orchestrator-owned worktree lifecycle, attachments, pause/resume posture, and cleanup state.',
-        footerLines: [buildKeyboardHints(width, [{ keys: '↑/↓', label: 'select' }, { keys: 'r', label: 'refresh' }, { keys: '/worktree inspect', label: '<path>' }, { keys: 'attach·pause·resume·keep·discard·cleanup', label: '' }], C)],
+        footerLines: [buildKeyboardHints(width, WORKTREE_HINTS, C)],
         palette: C,
         beforeSections: sections,
         section: {
@@ -214,11 +344,14 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
       sections.push(detailSection);
     }
 
+    const errorLine = this.renderErrorLine(width);
+    if (errorLine) sections.push({ title: 'Error', lines: [errorLine] });
+
     const lines = buildPanelWorkspace(width, height, {
       title: 'Worktree Control Room',
       intro: 'Orchestrator-owned worktree lifecycle, attachments, pause/resume posture, and cleanup state.',
       sections,
-      footerLines: [buildKeyboardHints(width, [{ keys: '↑/↓', label: 'select' }, { keys: 'r', label: 'refresh' }, { keys: '/worktree inspect', label: '<path>' }, { keys: 'attach·pause·resume·keep·discard·cleanup', label: '' }], C)],
+      footerLines: [buildKeyboardHints(width, WORKTREE_HINTS, C)],
       palette: C,
     });
     while (lines.length < height) lines.push(createEmptyLine(width));

package/src/panels/wrfc-panel.ts

@@ -21,6 +21,9 @@ import {
   handleConfirmInput,
 } from './confirm-state.ts';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
+import { formatDuration } from '../utils/format-duration.ts';
+import { AgentInspectorPanel } from './agent-inspector-panel.ts';
+import type { PanelIntegrationContext } from './types.ts';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -73,6 +76,17 @@ export class WrfcPanel extends BasePanel {
   private chains: WrfcChain[] = [];
   private selectedIndex = 0;
   private scrollOffset = 0;
+
+  /**
+   * The chain under the cursor. This panel owns its own selection state
+   * (`selectedIndex` navigates `this.chains` directly), so every selected-row
+   * read routes through this one accessor — indexing `this.chains` by the
+   * cursor directly is banned by the no-raw-selectedindex-read architecture rule.
+   */
+  private selectedChain(): WrfcChain | undefined {
+    return this.chains.at(this.selectedIndex);
+  }
+
   private expandedChainIds = new Set<string>();
   private unsubscribers: Array<() => void> = [];
   /** Last event timestamp per chain id, for stall detection. */
@@ -137,10 +151,64 @@ export class WrfcPanel extends BasePanel {
       case 'enter': this.toggleExpanded();  return true;
       case 'c':     this.beginCancelConfirm(); return true;
       case 'r':     this.doResume();           return true;
+      // 'a' jumps to the selected chain's owner agent in the Inspector. The
+      // actual navigation happens in handlePanelIntegrationAction (it needs
+      // the PanelManager); consuming the key here just requires a selected
+      // chain to exist so the router below fires next.
+      case 'a':     return this.selectedChain() !== undefined;
       default:      return false;
     }
   }
 
+  /**
+   * Cross-panel jump: 'a' on a selected chain opens the Inspector focused on
+   * that chain's owner agent (inspectAgent, reverse of the forward jump
+   * agent-detail-modal.ts makes from an agent record's wrfcId to its chain).
+   */
+  handlePanelIntegrationAction(key: string, ctx: PanelIntegrationContext): boolean {
+    if (key !== 'a') return false;
+    const chain = this.selectedChain();
+    if (!chain) return false;
+    const inspector = ctx.panelManager.open('inspector');
+    if (inspector instanceof AgentInspectorPanel) {
+      inspector.inspectAgent(chain.ownerAgentId);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Mouse-wheel scroll: pan the chain list viewport without moving the
+   * selection cursor (BasePanel's default forwards wheel deltas into
+   * handleInput('up'/'down'), which would also move the selected row).
+   * scrollOffset is a hint consumed by resolveScrollablePanelSection's
+   * tracked window on the next render, which clamps it into range and keeps
+   * the selected row inside the guard band — so an over-large delta here is
+   * always safe.
+   */
+  override handleScroll(deltaRows: number): boolean {
+    if (this.confirmCancel) return false;
+    const rows = Math.trunc(deltaRows);
+    if (rows === 0) return false;
+    const next = Math.max(0, this.scrollOffset + rows);
+    if (next === this.scrollOffset) return false;
+    this.scrollOffset = next;
+    this.markDirty();
+    return true;
+  }
+
+  /**
+   * Cross-panel jump target: select the chain by id and expand it. Used by
+   * WorkPlanPanel's 'w' jump key when an item links a wrfcId.
+   */
+  selectChain(chainId: string): void {
+    const index = this.chains.findIndex((chain) => chain.id === chainId);
+    if (index < 0) return;
+    this.selectedIndex = index;
+    this.expandedChainIds.add(chainId);
+    this.markDirty();
+  }
+
   // -------------------------------------------------------------------------
   // Render
   // -------------------------------------------------------------------------
@@ -159,7 +227,8 @@ export class WrfcPanel extends BasePanel {
             ' No WRFC chains yet',
             'WRFC chains appear here as review/fix cycles execute. Expanded rows show scores, gates, issues, and failure detail.',
             [
-              { command: '/wrfc run <task>', summary: 'start a write-review-fix-commit chain for a task' },
+              { command: '/teamwork create-mode local-engineer <task>', summary: 'run an engineer task through the write-review-fix-commit loop (reviewMode: wrfc)' },
+              { command: '/teamwork modes', summary: 'list every teamwork mode and see which ones use reviewMode wrfc' },
             ],
             DEFAULT_PANEL_PALETTE,
           ),
@@ -194,21 +263,25 @@ export class WrfcPanel extends BasePanel {
       const stalled    = this.isStalled(chain, now);
 
       if (isSelected) selectedLineIndex = chainLines.length;
-      chainLines.push(...this.renderChainRow(chain, width, isSelected, isExpanded, rowBg, rowFg, stalled));
+      chainLines.push(...this.renderChainRow(chain, width, isSelected, isExpanded, rowBg, rowFg, stalled, now));
 
       if (isExpanded) {
         chainLines.push(...this.renderChainDetail(chain, width, 12));
       }
     }
 
-    const selectedChain = this.chains[this.selectedIndex];
+    const selectedChain = this.selectedChain();
     const selectedLines: Line[] = selectedChain
       ? [
           buildPanelLine(width, [
             [' State ', DEFAULT_PANEL_PALETTE.label],
             [stateLabel(selectedChain.state), stateColor(selectedChain.state)],
-            ['   Task ', DEFAULT_PANEL_PALETTE.label],
-            [truncate(selectedChain.task, Math.max(8, width - 24)), DEFAULT_PANEL_PALETTE.value],
+            [TERMINAL_STATES.includes(selectedChain.state) ? '   Duration ' : '   Elapsed ', DEFAULT_PANEL_PALETTE.label],
+            [this.durationLabel(selectedChain, now), DEFAULT_PANEL_PALETTE.info],
+          ]),
+          buildPanelLine(width, [
+            [' Task ', DEFAULT_PANEL_PALETTE.label],
+            [truncate(selectedChain.task, Math.max(8, width - 8)), DEFAULT_PANEL_PALETTE.value],
           ]),
           buildPanelLine(width, [
             [' Reviews ', DEFAULT_PANEL_PALETTE.label],
@@ -283,7 +356,7 @@ export class WrfcPanel extends BasePanel {
     } : null;
 
     // Footer: show resume-disabled reason for the selected chain.
-    const selectedForFooter = this.chains[this.selectedIndex];
+    const selectedForFooter = this.selectedChain();
     const resumeReason = selectedForFooter ? this.resumeDisabledReason(selectedForFooter) : null;
     const footerLines: Line[] = [
       buildPanelLine(width, [
@@ -292,6 +365,7 @@ export class WrfcPanel extends BasePanel {
         ['   c', DEFAULT_PANEL_PALETTE.info],      [' cancel',   DEFAULT_PANEL_PALETTE.dim],
         ['   r', resumeReason ? DEFAULT_PANEL_PALETTE.dim : DEFAULT_PANEL_PALETTE.info],
         [resumeReason ? ` resume (${resumeReason})` : ' resume', DEFAULT_PANEL_PALETTE.dim],
+        ['   a', DEFAULT_PANEL_PALETTE.info],      [' jump to agent', DEFAULT_PANEL_PALETTE.dim],
       ]),
     ];
 
@@ -353,6 +427,7 @@ export class WrfcPanel extends BasePanel {
     bg: string,
     fg: string,
     stalled = false,
+    now: number = Date.now(),
   ): Line[] {
     const stateCol   = stalled ? C.warn : stateColor(chain.state);
     const stateTag   = stalled
@@ -367,6 +442,7 @@ export class WrfcPanel extends BasePanel {
       ? ` ${chain.reviewScores[chain.reviewScores.length - 1].toFixed(1)}/10`
       : '';
     const stalledBadge = stalled ? ' [STALLED]' : '';
+    const durationTag = ` ${this.durationLabel(chain, now)}`;
     // Constraint badge: c:sat/total — only when constraints exist
     let constraintBadge = '';
     if (chain.constraints.length > 0) {
@@ -375,7 +451,7 @@ export class WrfcPanel extends BasePanel {
       const satisfied = findings ? findings.filter(f => f.satisfied).length : 0;
       constraintBadge = ` c:${satisfied}/${total}`;
     }
-    const rightInfo  = `${stalledBadge}${latestScore}${fixes}${cycles}${constraintBadge} `;
+    const rightInfo  = `${stalledBadge}${durationTag}${latestScore}${fixes}${cycles}${constraintBadge} `;
 
     // Compute how much space the task text can use, then check if rightInfo fits.
     // If the terminal is narrow and rightInfo would overflow, omit it entirely
@@ -433,6 +509,11 @@ export class WrfcPanel extends BasePanel {
   }
 
   private renderChainDetail(chain: WrfcChain, width: number, maxLines: number): Line[] {
+    // Build the FULL detail content first (no per-section maxLines guards
+    // below), then apply one cap at the end so a truncation always ends with
+    // a visible "+N more" indicator instead of silently dropping content —
+    // the constraint sub-list keeps its own independent (+N more) cap since
+    // that is documented, unrelated badge/marker behavior (PRESERVE).
     const lines: Line[] = [];
     const indent = '     ';
 
@@ -459,13 +540,12 @@ export class WrfcPanel extends BasePanel {
     }
 
     // Constraints section (between Cycles and Gates)
-    if (chain.constraints.length > 0 && lines.length < maxLines) {
+    if (chain.constraints.length > 0) {
       lines.push(buildStyledPanelLine(width, [{ text: `${indent}Constraints`, fg: C.label }]));
       const MAX_CONSTRAINTS = 10;
       const findings = chain.reviewerReport?.constraintFindings;
       const displayed = chain.constraints.slice(0, MAX_CONSTRAINTS);
       for (const constraint of displayed) {
-        if (lines.length >= maxLines) break;
         const marker = constraintStatusMarker(constraint, findings);
         const statusTag = marker.tag;
         const rowPrefix = `${indent}  ${statusTag}  `;
@@ -479,7 +559,7 @@ export class WrfcPanel extends BasePanel {
         ]));
       }
       const remaining = chain.constraints.length - MAX_CONSTRAINTS;
-      if (remaining > 0 && lines.length < maxLines) {
+      if (remaining > 0) {
         lines.push(buildStyledPanelLine(width, [
           { text: `${indent}  (+${remaining} more)`, fg: C.dim, dim: true },
         ]));
@@ -490,7 +570,6 @@ export class WrfcPanel extends BasePanel {
     if (chain.gateResults && chain.gateResults.length > 0) {
       lines.push(buildStyledPanelLine(width, [{ text: `${indent}Gates`, fg: C.label }]));
       for (const gate of chain.gateResults) {
-        if (lines.length >= maxLines) break;
         lines.push(this.renderGateResult(gate, width, indent + '  '));
       }
     }
@@ -503,10 +582,9 @@ export class WrfcPanel extends BasePanel {
     }
 
     // Synthetic issues injected by controller (continuity violations)
-    if (chain.syntheticIssues && chain.syntheticIssues.length > 0 && lines.length < maxLines) {
+    if (chain.syntheticIssues && chain.syntheticIssues.length > 0) {
       lines.push(buildStyledPanelLine(width, [{ text: `${indent}Controller flags`, fg: C.issueCrit, bold: true }]));
       for (const synthetic of chain.syntheticIssues) {
-        if (lines.length >= maxLines) break;
         const prefix = `${indent}  [CRIT] `;
         const descMax = Math.max(8, width - prefix.length);
         const desc = truncate(synthetic.description, descMax);
@@ -519,10 +597,9 @@ export class WrfcPanel extends BasePanel {
 
     // Issues from reviewer
     const issues = chain.reviewerReport?.issues ?? [];
-    if (issues.length > 0 && lines.length < maxLines) {
+    if (issues.length > 0) {
       lines.push(buildStyledPanelLine(width, [{ text: `${indent}Issues`, fg: C.label }]));
       for (const issue of issues) {
-        if (lines.length >= maxLines) break;
         const prefix = `${indent}  ${issuePrefix(issue.severity)}`;
         const descMax = width - prefix.length;
         const desc = truncate(issue.description, Math.max(8, descMax));
@@ -534,7 +611,7 @@ export class WrfcPanel extends BasePanel {
     }
 
     // Error
-    if (chain.error && lines.length < maxLines) {
+    if (chain.error) {
       const errPrefix = `${indent}Error   `;
       lines.push(buildStyledPanelLine(width, [
         { text: errPrefix,                                fg: C.failed, bold: true },
@@ -543,11 +620,15 @@ export class WrfcPanel extends BasePanel {
     }
 
     // Divider after expanded section
-    if (lines.length < maxLines) {
-      lines.push(buildStyledPanelLine(width, [{ text: '  ' + '-'.repeat(Math.max(0, width - 4)) + '  ', fg: C.border, dim: true }]));
-    }
-
-    return lines.slice(0, maxLines);
+    lines.push(buildStyledPanelLine(width, [{ text: '  ' + '-'.repeat(Math.max(0, width - 4)) + '  ', fg: C.border, dim: true }]));
+
+    if (lines.length <= maxLines) return lines;
+    const visible = lines.slice(0, Math.max(0, maxLines - 1));
+    const hidden = lines.length - visible.length;
+    visible.push(buildStyledPanelLine(width, [
+      { text: `${indent}+${hidden} more (press a to inspect the owner agent for full detail)`, fg: C.dim, dim: true },
+    ]));
+    return visible;
   }
 
   private renderGateResult(gate: QualityGateResult, width: number, indent: string): Line {
@@ -575,7 +656,7 @@ export class WrfcPanel extends BasePanel {
   }
 
   private toggleExpanded(): void {
-    const chain = this.chains[this.selectedIndex];
+    const chain = this.selectedChain();
     if (!chain) return;
     if (this.expandedChainIds.has(chain.id)) {
       this.expandedChainIds.delete(chain.id);
@@ -658,7 +739,7 @@ export class WrfcPanel extends BasePanel {
 
   /** Initiate cancel-confirm flow for the selected chain (noop if terminal). */
   private beginCancelConfirm(): void {
-    const chain = this.chains[this.selectedIndex];
+    const chain = this.selectedChain();
     if (!chain || TERMINAL_STATES.includes(chain.state)) return;
     this.confirmCancel = {
       subject: chain.id,
@@ -673,7 +754,7 @@ export class WrfcPanel extends BasePanel {
    * Emits a visible noop reason when the chain is not resumable.
    */
   private doResume(): void {
-    const chain = this.chains[this.selectedIndex];
+    const chain = this.selectedChain();
     if (!chain) return;
     if (!RESUMABLE_STATES.includes(chain.state)) return;
     this.deps.controller.resumeChain(chain.id);
@@ -695,4 +776,15 @@ export class WrfcPanel extends BasePanel {
     const last = this.lastEventAt.get(chain.id) ?? chain.createdAt;
     return (now - last) >= STALL_THRESHOLD_MS;
   }
+
+  /**
+   * Elapsed time since createdAt for an active chain, or total duration from
+   * createdAt to completedAt for a terminal one. createdAt/completedAt are
+   * already consumed for chain sort order (syncFromController) — this just
+   * surfaces the same fields as a human-readable label.
+   */
+  private durationLabel(chain: WrfcChain, now: number): string {
+    const end = chain.completedAt ?? now;
+    return formatDuration(Math.max(0, end - chain.createdAt));
+  }
 }