@pellux/goodvibes-tui 0.27.0 → 0.29.0

package/src/panels/wrfc-panel.ts

@@ -1,16 +1,15 @@
 import type { Line } from '../types/grid.ts';
 import type { WrfcChain, WrfcState, QualityGateResult } from '@pellux/goodvibes-sdk/platform/agents';
-import type { Constraint, ConstraintFinding } from '@pellux/goodvibes-sdk/platform/agents';
 import type { WrfcController } from '@pellux/goodvibes-sdk/platform/agents';
 import { BasePanel } from './base-panel.ts';
 import type { WorkflowEvent } from '@/runtime/index.ts';
 import type { UiEventFeed } from '../runtime/ui-events.ts';
 import {
+  buildMeterLine,
   buildPanelLine,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
-  extendPalette,
   type PanelWorkspaceSection,
   buildSelectablePanelLine,
   buildStyledPanelLine,
@@ -22,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
@@ -45,131 +47,21 @@ const TERMINAL_STATES: readonly WrfcState[] = ['passed', 'failed'];
 const RESUMABLE_STATES: readonly WrfcState[] = ['pending', 'reviewing', 'fixing', 'awaiting_gates'];
 
 // ---------------------------------------------------------------------------
-// Colour palette
+// Colour palette + formatting helpers live in ./wrfc-panel-format.ts (extracted
+// to keep this module under the architecture line-count cap). Re-exported here
+// so ./wrfc-panel.ts remains their public import site.
 // ---------------------------------------------------------------------------
-const C = extendPalette(DEFAULT_PANEL_PALETTE, {
-  // WRFC state-machine colours (domain status -- no shared equivalent)
-  passed:     '#22c55e', // green
-  failed:     '#ef4444', // red
-  reviewing:  '#eab308', // yellow
-  engineering:'#22d3ee', // cyan
-  fixing:     '#f97316', // orange
-  pending:    '#6b7280', // grey
-  gating:     '#a78bfa', // violet
-  committing: '#38bdf8', // sky
-  integrating:'#818cf8', // indigo
-
-  // Issue-severity ramp (domain -- no shared equivalent)
-  issueCrit:  '#ef4444',
-  issueMaj:   '#f97316',
-  issueMin:   '#eab308',
-  issueSug:   '#6b7280',
-
-  // Selection + divider chrome with no shared equivalent
-  selected:   '#1e40af', // selection bg
-  selectedFg: '#f8fafc',
-  border:     '#334155',
-});
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-const SPARKLINE_CHARS = '._-:=+*#';
-
-export function sparkline(scores: number[], maxScore = 10): string {
-  if (scores.length === 0) return '';
-  return scores
-    .map(s => {
-      const ratio = Math.max(0, Math.min(1, s / maxScore));
-      const idx   = Math.round(ratio * (SPARKLINE_CHARS.length - 1));
-      return SPARKLINE_CHARS[idx];
-    })
-    .join('');
-}
-
-export function stateColor(state: WrfcState): string {
-  switch (state) {
-    case 'passed':          return C.passed;
-    case 'failed':          return C.failed;
-    case 'reviewing':       return C.reviewing;
-    case 'engineering':     return C.engineering;
-    case 'fixing':          return C.fixing;
-    case 'gating':
-    case 'awaiting_gates':  return C.gating;
-    case 'committing':      return C.committing;
-    case 'integrating':     return C.integrating;
-    default:                return C.pending;
-  }
-}
-
-export function stateLabel(state: WrfcState): string {
-  switch (state) {
-    case 'engineering':    return 'ENG';
-    case 'reviewing':      return 'REV';
-    case 'fixing':         return 'FIX';
-    case 'gating':         return 'GATE';
-    case 'awaiting_gates': return 'WAIT';
-    case 'committing':     return 'COMMIT';
-    case 'integrating':    return 'INTG';
-    case 'passed':         return 'PASS';
-    case 'failed':         return 'FAIL';
-    default:               return 'PEND';
-  }
-}
-
-function issueColor(severity: string): string {
-  switch (severity) {
-    case 'critical': return C.issueCrit;
-    case 'major':    return C.issueMaj;
-    case 'minor':    return C.issueMin;
-    default:         return C.issueSug;
-  }
-}
-
-function issuePrefix(severity: string): string {
-  switch (severity) {
-    case 'critical': return '[CRIT] ';
-    case 'major':    return '[MAJR] ';
-    case 'minor':    return '[MINR] ';
-    default:         return '[SUGG] ';
-  }
-}
-
-export function truncate(s: string, max: number): string {
-  if (s.length <= max) return s;
-  return s.slice(0, max - 3) + '...';
-}
-
-// ---------------------------------------------------------------------------
-// Constraint helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Returns display tag, foreground colour, and dim flag for a single constraint
- * based on whether a reviewer finding exists for it.
- */
-export function constraintStatusMarker(
-  constraint: Constraint,
-  findings: ConstraintFinding[] | undefined,
-): { tag: string; fg: string; dim: boolean } {
-  const finding = findings?.find(f => f.constraintId === constraint.id);
-  if (!finding) {
-    return { tag: '[UNV]', fg: C.dim, dim: true };
-  }
-  if (finding.satisfied) {
-    return { tag: '[SAT]', fg: C.good, dim: false };
-  }
-  // Unsatisfied — use severity to pick colour and tag text
-  const sev = finding.severity ?? 'major';
-  let sevTag: string;
-  let fg: string;
-  switch (sev) {
-    case 'critical': sevTag = '[UNS CRIT]';  fg = C.issueCrit; break;
-    case 'minor':    sevTag = '[UNS MINOR]'; fg = C.issueMin;  break;
-    default:         sevTag = '[UNS MAJOR]'; fg = C.issueMaj;  break;
-  }
-  return { tag: sevTag, fg, dim: false };
-}
+import {
+  C,
+  sparkline,
+  stateColor,
+  stateLabel,
+  issueColor,
+  issuePrefix,
+  truncate,
+  constraintStatusMarker,
+} from './wrfc-panel-format.ts';
+export { sparkline, stateColor, stateLabel, truncate, constraintStatusMarker } from './wrfc-panel-format.ts';
 
 // ---------------------------------------------------------------------------
 // Panel
@@ -184,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. */
@@ -248,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
   // -------------------------------------------------------------------------
@@ -269,7 +226,10 @@ export class WrfcPanel extends BasePanel {
             width,
             ' No WRFC chains yet',
             'WRFC chains appear here as review/fix cycles execute. Expanded rows show scores, gates, issues, and failure detail.',
-            [],
+            [
+              { 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,
           ),
         },
@@ -303,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],
@@ -344,6 +308,10 @@ export class WrfcPanel extends BasePanel {
         ]
       : [];
 
+    const totalChains = this.chains.length;
+    const stalledCount = this.chains.filter((c) => this.isStalled(c, now)).length;
+    const completedChains = passedCount + failedCount;
+    const meterWidth = Math.max(10, Math.min(24, width - 34));
     const summarySection: PanelWorkspaceSection = {
       title: 'Summary',
       lines: [
@@ -354,7 +322,16 @@ export class WrfcPanel extends BasePanel {
           [String(passedCount), DEFAULT_PANEL_PALETTE.good],
           ['   Failed ', DEFAULT_PANEL_PALETTE.label],
           [String(failedCount), failedCount > 0 ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.dim],
+          ['   Stalled ', DEFAULT_PANEL_PALETTE.label],
+          [String(stalledCount), stalledCount > 0 ? C.warn : DEFAULT_PANEL_PALETTE.dim],
         ]),
+        buildMeterLine(
+          width,
+          totalChains > 0 ? Math.round((completedChains / totalChains) * meterWidth) : 0,
+          meterWidth,
+          { filled: failedCount > 0 ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.good, empty: C.border, label: DEFAULT_PANEL_PALETTE.label },
+          { prefix: ' Resolved ', suffix: ` ${completedChains}/${totalChains} ` },
+        ),
       ],
     };
     const selectedSection: PanelWorkspaceSection = {
@@ -379,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, [
@@ -388,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],
       ]),
     ];
 
@@ -449,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
@@ -463,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) {
@@ -471,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
@@ -529,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 = '     ';
 
@@ -555,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}  `;
@@ -575,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 },
         ]));
@@ -586,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 + '  '));
       }
     }
@@ -599,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);
@@ -615,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));
@@ -630,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 },
@@ -639,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 {
@@ -671,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);
@@ -754,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,
@@ -769,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);
@@ -791,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));
+  }
 }

package/src/renderer/compaction-preview.ts

@@ -17,6 +17,7 @@
  */
 
 import { estimateConversationTokens } from '@pellux/goodvibes-sdk/platform/core';
+import { computeContextUsage } from '../core/context-usage.ts';
 import type { CompactionEvent } from '@pellux/goodvibes-sdk/platform/core';
 import type { ProviderMessage } from '@pellux/goodvibes-sdk/platform/providers';
 
@@ -58,7 +59,7 @@ export function buildCompactionPreview(opts: CompactionPreviewOptions): string {
   const tokensAfterEstimate = COMPACTION_OUTPUT_CEILING_ESTIMATE;
 
   const contextStr = contextWindow > 0
-    ? ` (${Math.round((tokensBefore / contextWindow) * 100)}% of ${fmtN(contextWindow)} context window)`
+    ? ` (${Math.round(computeContextUsage(tokensBefore, contextWindow).rawRatio * 100)}% of ${fmtN(contextWindow)} context window)`
     : '';
 
   const pinStr = pinnedMemoryCount > 0