@pellux/goodvibes-tui 0.28.0 → 0.29.0

package/src/panels/plan-dashboard-panel.ts

@@ -1,8 +1,11 @@
 import type { Line } from '../types/grid.ts';
-import type { ExecutionPlan, PlanItem, PlanItemStatus } from '@pellux/goodvibes-sdk/platform/core';
+import type { ExecutionPlan, ExecutionPlanManager, PlanItem, PlanItemStatus } from '@pellux/goodvibes-sdk/platform/core';
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import { BasePanel } from './base-panel.ts';
-import type { PlanDashboardQuery } from '../runtime/ui-service-queries.ts';
+import { AgentInspectorPanel } from './agent-inspector-panel.ts';
+import type { PanelIntegrationContext } from './types.ts';
+import type { WorkflowEvent } from '@/runtime/index.ts';
+import type { UiEventFeed } from '../runtime/ui-events.ts';
 import {
   buildEmptyState,
   buildKeyboardHints,
@@ -52,6 +55,21 @@ const STATUS_FG: Record<PlanItemStatus, string> = {
   skipped: C.skipped,
 };
 
+// ---------------------------------------------------------------------------
+// Deps
+// ---------------------------------------------------------------------------
+
+/**
+ * The subset of ExecutionPlanManager the dashboard needs: the live active
+ * plan (getActive) plus history/switching support (list/getSummary/
+ * toMarkdown — the same trio /plan list|show consume, planning-runtime.ts:
+ * 140-165) so the panel can browse and view any plan on disk, not just the
+ * currently active one.
+ */
+export interface PlanDashboardPanelDeps {
+  readonly planManager: Pick<ExecutionPlanManager, 'getActive' | 'list' | 'getSummary' | 'toMarkdown'>;
+}
+
 // ---------------------------------------------------------------------------
 // PlanDashboardPanel
 // ---------------------------------------------------------------------------
@@ -65,11 +83,37 @@ export class PlanDashboardPanel extends BasePanel {
   // Item flat-list parallel to navigable rows (set during render) for detail.
   private navItems: PlanItem[] = [];
   private blockedItemIds = new Set<string>();
-  private readonly planManager: PlanDashboardQuery;
 
-  constructor(planManager: PlanDashboardQuery) {
-    super('plan', 'Plan', 'P', 'agent');
-    this.planManager = planManager;
+  /**
+   * The plan item under the cursor. This panel owns its own selection state
+   * (`selectedIndex` navigates the `this.navItems` flat list directly), so
+   * every selected-row read routes through this one accessor — indexing
+   * `this.navItems` by the cursor directly is banned by the
+   * no-raw-selectedindex-read architecture rule.
+   */
+  private selectedNavItem(): PlanItem | undefined {
+    return this.navItems.at(this.selectedIndex);
+  }
+
+  // Plan history / switching (planManager.list()/getSummary()/toMarkdown()).
+  // `viewingPlanId` is null while following the live active plan; once set,
+  // the dashboard renders that specific plan from disk instead.
+  private viewingPlanId: string | null = null;
+  private historyMode = false;
+  private historyPlans: ExecutionPlan[] = [];
+  private historySelectedIndex = 0;
+  private historyScrollOffset = 0;
+
+  // Live-refresh subscriptions (WrfcPanel pattern: subscribe ui.events.workflows
+  // so the dashboard updates during a run without requiring a keypress).
+  private unsubscribers: Array<() => void> = [];
+
+  constructor(
+    private readonly workflowEvents: UiEventFeed<WorkflowEvent>,
+    private readonly deps: PlanDashboardPanelDeps,
+  ) {
+    super('plan', 'Plan', '▤', 'agent');
+    this.subscribeToEvents();
   }
 
   override onActivate(): void {
@@ -78,11 +122,52 @@ export class PlanDashboardPanel extends BasePanel {
     this.markDirty();
   }
 
+  override onDestroy(): void {
+    for (const unsub of this.unsubscribers) unsub();
+    this.unsubscribers = [];
+    super.onDestroy();
+  }
+
+  // --------------------------------------------------------------------------
+  // Live refresh — mirrors WrfcPanel: any workflow event may have changed the
+  // active plan's item statuses (WRFC updates plan items via
+  // wrfcController.setPlanManager, main.ts:120), so re-render without
+  // requiring a keypress.
+  // --------------------------------------------------------------------------
+
+  private subscribeToEvents(): void {
+    const refresh = () => this.markDirty();
+    this.unsubscribers.push(
+      this.workflowEvents.on('WORKFLOW_CHAIN_CREATED', refresh),
+      this.workflowEvents.on('WORKFLOW_STATE_CHANGED', refresh),
+      this.workflowEvents.on('WORKFLOW_REVIEW_COMPLETED', refresh),
+      this.workflowEvents.on('WORKFLOW_FIX_ATTEMPTED', refresh),
+      this.workflowEvents.on('WORKFLOW_GATE_RESULT', refresh),
+      this.workflowEvents.on('WORKFLOW_CHAIN_PASSED', refresh),
+      this.workflowEvents.on('WORKFLOW_CHAIN_FAILED', refresh),
+      this.workflowEvents.on('WORKFLOW_AUTO_COMMITTED', refresh),
+      this.workflowEvents.on('WORKFLOW_CASCADE_ABORTED', refresh),
+    );
+  }
+
   // --------------------------------------------------------------------------
   // Input
   // --------------------------------------------------------------------------
 
   handleInput(key: string): boolean {
+    if (this.historyMode) {
+      return this.handleHistoryInput(key);
+    }
+    if (key === 'h') {
+      this.enterHistoryMode();
+      return true;
+    }
+    if (key === 'a' && this.viewingPlanId !== null) {
+      this.viewingPlanId = null;
+      this.selectedIndex = 0;
+      this.markDirty();
+      return true;
+    }
     if (key === 'up' || key === 'k') {
       if (this.selectedIndex > 0) {
         this.selectedIndex--;
@@ -108,17 +193,94 @@ export class PlanDashboardPanel extends BasePanel {
         this.markDirty();
       }
       return true;
+    } else if (key === 'enter' || key === 'return') {
+      // Consumed here (so the integration router fires next) only when the
+      // selected item actually has an agent to jump to; see
+      // handlePanelIntegrationAction below.
+      const item = this.selectedNavItem();
+      if (item?.agentId) return true;
     }
     return false;
   }
 
+  /**
+   * Cross-panel jump: Enter on a plan item with an assigned agent opens the
+   * Inspector focused on that agent (inspectAgent, WO-110). The inspector
+   * already renders a WRFC badge for the inspected agent, so this also
+   * cross-links the owning WRFC chain without the dashboard needing to know
+   * about WrfcController directly.
+   */
+  handlePanelIntegrationAction(key: string, ctx: PanelIntegrationContext): boolean {
+    if (this.historyMode) return false;
+    if (key !== 'enter' && key !== 'return') return false;
+    const item = this.selectedNavItem();
+    if (!item?.agentId) return false;
+    const inspector = ctx.panelManager.open('inspector');
+    if (inspector instanceof AgentInspectorPanel) {
+      inspector.inspectAgent(item.agentId);
+    }
+    return true;
+  }
+
+  // --------------------------------------------------------------------------
+  // Plan history / switching
+  // --------------------------------------------------------------------------
+
+  private enterHistoryMode(): void {
+    this.historyPlans = [...this.deps.planManager.list()].sort(
+      (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
+    );
+    this.historySelectedIndex = 0;
+    this.historyScrollOffset = 0;
+    this.historyMode = true;
+    this.markDirty();
+  }
+
+  private handleHistoryInput(key: string): boolean {
+    if (key === 'up' || key === 'k') {
+      if (this.historySelectedIndex > 0) {
+        this.historySelectedIndex--;
+        this.markDirty();
+      }
+      return true;
+    }
+    if (key === 'down' || key === 'j') {
+      if (this.historySelectedIndex < this.historyPlans.length - 1) {
+        this.historySelectedIndex++;
+        this.markDirty();
+      }
+      return true;
+    }
+    if (key === 'enter' || key === 'return') {
+      const plan = this.historyPlans[this.historySelectedIndex];
+      if (plan) {
+        this.viewingPlanId = plan.id;
+        this.selectedIndex = 0;
+      }
+      this.historyMode = false;
+      this.markDirty();
+      return true;
+    }
+    if (key === 'escape' || key === 'h') {
+      this.historyMode = false;
+      this.markDirty();
+      return true;
+    }
+    // Modal browsing: absorb everything else (mirrors ConfirmState's "others
+    // absorbed" contract) so stray keys cannot leak into item navigation.
+    return true;
+  }
+
   // --------------------------------------------------------------------------
   // Render
   // --------------------------------------------------------------------------
 
   render(width: number, height: number): Line[] {
     return this.trackedRender(() => {
-    const plan = this.planManager.getActive();
+    if (this.historyMode) {
+      return this.renderHistory(width, height);
+    }
+    const plan = this.resolveViewedPlan();
     if (!plan) {
       return buildPanelWorkspace(width, height, {
         title: ' Plan Dashboard',
@@ -128,14 +290,16 @@ export class PlanDashboardPanel extends BasePanel {
             lines: buildEmptyState(
               width,
               ' No active execution plan',
-              'No plan is being executed yet. Create one and its phases, progress, blocked steps, and next action surface here.',
+              'Execution plans are produced by WRFC-reviewed tasks (gather-plan-apply execution). Start one from Teamwork and its phases, progress, blocked steps, and next action will surface here.',
               [
-                { command: '/plan', summary: 'create an execution plan to populate this dashboard' },
+                { command: '/teamwork create-mode local-engineer <title>', summary: 'start a WRFC-reviewed engineer task — the only producer of a real execution plan' },
+                { command: '/teamwork modes', summary: 'see every reviewMode: wrfc mode that can seed a plan' },
               ],
               C,
             ),
           },
         ],
+        footerLines: this.historyFooterHintLines(width),
         palette: C,
       });
     }
@@ -143,11 +307,149 @@ export class PlanDashboardPanel extends BasePanel {
     });
   }
 
+  /** Resolve which plan to render: the pinned history selection, or the live active plan. */
+  private resolveViewedPlan(): ExecutionPlan | null {
+    if (this.viewingPlanId !== null) {
+      const found = this.deps.planManager.list().find((p) => p.id === this.viewingPlanId);
+      if (found) return found;
+      // The pinned plan is gone (e.g. deleted from disk) — fall back to live.
+      this.viewingPlanId = null;
+    }
+    return this.deps.planManager.getActive();
+  }
+
+  /** Keyboard hint shown even on the empty state so 'h' (history) stays discoverable. */
+  private historyFooterHintLines(width: number): Line[] {
+    return [
+      buildKeyboardHints(width, [
+        { keys: 'h', label: 'plan history' },
+      ], C),
+    ];
+  }
+
+  // --------------------------------------------------------------------------
+  // Plan history browser
+  // --------------------------------------------------------------------------
+
+  private renderHistory(width: number, height: number): Line[] {
+    if (this.historyPlans.length === 0) {
+      return buildPanelWorkspace(width, height, {
+        title: ' Plan History',
+        intro: 'Every execution plan ever created for this project.',
+        sections: [
+          {
+            lines: buildEmptyState(
+              width,
+              ' No plans on disk',
+              'Plans appear here once a WRFC-reviewed task (gather-plan-apply execution) creates one.',
+              [],
+              C,
+            ),
+          },
+        ],
+        footerLines: [buildKeyboardHints(width, [{ keys: 'Esc / h', label: 'back' }], C)],
+        palette: C,
+      });
+    }
+
+    const activePlan = this.deps.planManager.getActive();
+    const rows: Line[] = [];
+    let selectedLineIndex = 0;
+    for (let i = 0; i < this.historyPlans.length; i++) {
+      const plan = this.historyPlans[i]!;
+      const isSelected = i === this.historySelectedIndex;
+      if (isSelected) selectedLineIndex = rows.length;
+      rows.push(this.renderHistoryRow(plan, activePlan?.id === plan.id, isSelected, width));
+    }
+
+    const highlighted = this.historyPlans[this.historySelectedIndex];
+    const detailSection: PanelWorkspaceSection | null = highlighted ? {
+      title: 'Plan Detail',
+      lines: this.buildHistoryDetailLines(highlighted, width),
+    } : null;
+
+    const footerLines: Line[] = [
+      buildKeyboardHints(width, [
+        { keys: '↑/↓', label: 'browse' },
+        { keys: 'Enter', label: 'view plan' },
+        { keys: 'Esc / h', label: 'back' },
+      ], C),
+    ];
+
+    const intro = `${this.historyPlans.length} plan${this.historyPlans.length === 1 ? '' : 's'} on disk`;
+    const historySection = resolveScrollablePanelSection(width, height, {
+      intro,
+      footerLines,
+      palette: C,
+      afterSections: detailSection ? [detailSection] : [],
+      section: {
+        title: 'Plan History',
+        scrollableLines: rows,
+        selectedIndex: selectedLineIndex,
+        scrollOffset: this.historyScrollOffset,
+        minRows: 6,
+      },
+    });
+    this.historyScrollOffset = historySection.scrollOffset;
+
+    return buildPanelWorkspace(width, height, {
+      title: ' Plan History',
+      intro,
+      sections: [
+        historySection.section,
+        ...(detailSection ? [detailSection] : []),
+      ],
+      footerLines,
+      palette: C,
+    });
+  }
+
+  private renderHistoryRow(plan: ExecutionPlan, isActive: boolean, isSelected: boolean, width: number): Line {
+    const marker = isActive ? '▶' : ' ';
+    const idShort = plan.id.slice(0, 8);
+    const statusTag = `[${plan.status.padEnd(8)}]`;
+    const prefix = ` ${marker} ${idShort}  ${statusTag} `;
+    const label = truncateDisplay(plan.title, Math.max(6, width - prefix.length - 2));
+    return buildSelectablePanelLine(width, [
+      { text: ` ${marker} `, fg: isActive ? C.good : C.dim, bold: isActive },
+      { text: `${idShort}  `, fg: C.dim },
+      { text: `${statusTag} `, fg: this.statusColor(plan.status) },
+      { text: label, fg: C.value },
+    ], {
+      selected: isSelected,
+      selectedBg: C.selectBg,
+      leadingMarker: '▸',
+    });
+  }
+
+  private buildHistoryDetailLines(plan: ExecutionPlan, width: number): Line[] {
+    const lines: Line[] = [
+      buildPanelLine(width, [
+        [' Summary ', C.label],
+        [truncateDisplay(this.deps.planManager.getSummary(plan), Math.max(8, width - 12)), C.value],
+      ]),
+    ];
+    const markdown = this.deps.planManager.toMarkdown(plan)
+      .split('\n')
+      .filter((line) => line.trim().length > 0)
+      .slice(0, 4);
+    for (const line of markdown) {
+      lines.push(buildPanelLine(width, [
+        [' ', C.label],
+        [truncateDisplay(line, Math.max(8, width - 3)), C.dim],
+      ]));
+    }
+    return lines;
+  }
+
   // --------------------------------------------------------------------------
   // Plan render
   // --------------------------------------------------------------------------
 
   private renderPlan(plan: ExecutionPlan, width: number, height: number): Line[] {
+    const activePlan = this.deps.planManager.getActive();
+    const isHistorical = activePlan?.id !== plan.id;
+
     const phaseOrder: string[] = [];
     const byPhase = new Map<string, PlanItem[]>();
     for (const item of plan.items) {
@@ -247,6 +549,16 @@ export class PlanDashboardPanel extends BasePanel {
       ],
     };
 
+    const historyBanner: PanelWorkspaceSection | null = isHistorical ? {
+      lines: [
+        buildPanelLine(width, [
+          [' Viewing history ', C.warn],
+          [plan.status.toUpperCase(), this.statusColor(plan.status)],
+          ['  —  press a to return to the live plan', C.dim],
+        ]),
+      ],
+    } : null;
+
     const detailSection = this.buildDetailSection(width);
     const footerLines = this.footerLines(width);
 
@@ -254,7 +566,7 @@ export class PlanDashboardPanel extends BasePanel {
       intro: plan.title,
       footerLines,
       palette: C,
-      beforeSections: [summary],
+      beforeSections: historyBanner ? [historyBanner, summary] : [summary],
       afterSections: detailSection ? [detailSection] : [],
       section: {
         title: 'Execution Plan',
@@ -271,6 +583,7 @@ export class PlanDashboardPanel extends BasePanel {
       title: ` Plan Dashboard`,
       intro: plan.title,
       sections: [
+        ...(historyBanner ? [historyBanner] : []),
         summary,
         planSection.section,
         ...(detailSection ? [detailSection] : []),
@@ -281,7 +594,7 @@ export class PlanDashboardPanel extends BasePanel {
   }
 
   private buildDetailSection(width: number): PanelWorkspaceSection | null {
-    const item = this.navItems[this.selectedIndex];
+    const item = this.selectedNavItem();
     if (!item) return null;
     const blocked = this.blockedItemIds.has(item.id);
     const lines: Line[] = [
@@ -307,13 +620,16 @@ export class PlanDashboardPanel extends BasePanel {
   }
 
   private footerLines(width: number): Line[] {
-    return [
-      buildKeyboardHints(width, [
-        { keys: this.totalRows > 0 ? `${this.selectedIndex + 1}/${this.totalRows}` : '0/0', label: 'step' },
-        { keys: '↑/↓', label: 'navigate' },
-        { keys: 'Home/End', label: 'jump' },
-      ], C),
+    const hints: Array<{ keys: string; label: string }> = [
+      { keys: this.totalRows > 0 ? `${this.selectedIndex + 1}/${this.totalRows}` : '0/0', label: 'step' },
+      { keys: '↑/↓', label: 'navigate' },
+      { keys: 'Home/End', label: 'jump' },
+      { keys: 'h', label: 'history' },
     ];
+    const item = this.selectedNavItem();
+    if (item?.agentId) hints.push({ keys: 'Enter', label: 'inspect agent' });
+    if (this.viewingPlanId !== null) hints.push({ keys: 'a', label: 'back to active' });
+    return [buildKeyboardHints(width, hints, C)];
   }
 
   // --------------------------------------------------------------------------