@pellux/goodvibes-agent 0.1.2 → 0.1.4

package/src/panels/wrfc-panel.ts

@@ -1,609 +0,0 @@
-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 {
-  buildPanelLine,
-  buildPanelWorkspace,
-  resolveScrollablePanelSection,
-  DEFAULT_PANEL_PALETTE,
-  type PanelWorkspaceSection,
-  buildSelectablePanelLine,
-  buildStyledPanelLine,
-  buildEmptyState,
-} from './polish.ts';
-import { getDisplayWidth } from '../utils/terminal-width.ts';
-
-// ---------------------------------------------------------------------------
-// Colour palette
-// ---------------------------------------------------------------------------
-const C = {
-  // states
-  passed:     '#22c55e', // green
-  failed:     '#ef4444', // red
-  reviewing:  '#eab308', // yellow
-  engineering:'#22d3ee', // cyan
-  fixing:     '#f97316', // orange
-  pending:    '#6b7280', // grey
-  gating:     '#a78bfa', // violet
-  committing: '#38bdf8', // sky
-
-  // UI chrome
-  header:     '#94a3b8',
-  headerBold: '#e2e8f0',
-  dim:        '#4b5563',
-  label:      '#64748b',
-  value:      '#cbd5e1',
-  selected:   '#1e40af', // selection bg
-  selectedFg: '#f8fafc',
-  border:     '#334155',
-  spark:      '#38bdf8',
-  sparkLow:   '#ef4444',
-  sparkHigh:  '#22c55e',
-  issueCrit:  '#ef4444',
-  issueMaj:   '#f97316',
-  issueMin:   '#eab308',
-  issueSug:   '#6b7280',
-  gatePass:   '#22c55e',
-  gateFail:   '#ef4444',
-  // constraint status
-  constraintSat:  '#22c55e', // green — satisfied
-  constraintUnsat:'#ef4444', // red — unsatisfied
-  constraintUnv:  '#4b5563', // grey — unverified (no finding yet)
-} as const;
-
-// ---------------------------------------------------------------------------
-// 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;
-    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 '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.constraintUnv, dim: true };
-  }
-  if (finding.satisfied) {
-    return { tag: '[SAT]', fg: C.constraintSat, 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 };
-}
-
-// ---------------------------------------------------------------------------
-// Panel
-// ---------------------------------------------------------------------------
-export interface WrfcPanelDeps {
-  readonly controller: Pick<WrfcController, 'listChains'>;
-}
-
-export class WrfcPanel extends BasePanel {
-  private chains: WrfcChain[] = [];
-  private selectedIndex = 0;
-  private scrollOffset = 0;
-  private expandedChainIds = new Set<string>();
-  private unsubscribers: Array<() => void> = [];
-
-  constructor(
-    private readonly workflowEvents: UiEventFeed<WorkflowEvent>,
-    private readonly deps: WrfcPanelDeps,
-  ) {
-    super('wrfc', 'WRFC', 'W', 'agent');
-    this.subscribeToEvents();
-    this.syncFromController();
-  }
-
-  // -------------------------------------------------------------------------
-  // Lifecycle
-  // -------------------------------------------------------------------------
-  override onActivate(): void {
-    super.onActivate();
-    this.syncFromController();
-  }
-
-  override onDestroy(): void {
-    for (const unsub of this.unsubscribers) unsub();
-    this.unsubscribers = [];
-  }
-
-  // -------------------------------------------------------------------------
-  // Input
-  // -------------------------------------------------------------------------
-  handleInput(key: string): boolean {
-    switch (key) {
-      case 'up':    this.moveSelection(-1); return true;
-      case 'down':  this.moveSelection(1);  return true;
-      case 'return':
-      case 'enter': this.toggleExpanded();  return true;
-      default:      return false;
-    }
-  }
-
-  // -------------------------------------------------------------------------
-  // Render
-  // -------------------------------------------------------------------------
-  render(width: number, height: number): Line[] {
-    return this.trackedRender(() => {
-    const activeCount  = this.chains.filter(c => !['passed', 'failed'].includes(c.state)).length;
-    const passedCount  = this.chains.filter(c => c.state === 'passed').length;
-    const failedCount  = this.chains.filter(c => c.state === 'failed').length;
-
-    if (this.chains.length === 0) {
-      return buildPanelWorkspace(width, height, {
-        title: ' WRFC Chain Monitor',
-        intro: 'Track WRFC engineering, review, fixing, gating, and final chain outcomes.',
-        sections: [
-          {
-            lines: buildEmptyState(
-              width,
-              ' No WRFC chains yet',
-              'WRFC chains appear here as review/fix cycles execute. Expanded rows show scores, gates, issues, and failure detail.',
-              [],
-              DEFAULT_PANEL_PALETTE,
-            ),
-          },
-        ],
-        palette: DEFAULT_PANEL_PALETTE,
-      });
-    }
-
-    const chainLines: Line[] = [];
-    let selectedLineIndex = 0;
-    for (let i = 0; i < this.chains.length; i++) {
-      const chain      = this.chains[i];
-      const isSelected = i === this.selectedIndex;
-      const isExpanded = this.expandedChainIds.has(chain.id);
-      const rowBg      = isSelected ? C.selected : '';
-      const rowFg      = isSelected ? C.selectedFg : '';
-
-      if (isSelected) selectedLineIndex = chainLines.length;
-      chainLines.push(...this.renderChainRow(chain, width, isSelected, isExpanded, rowBg, rowFg));
-
-      if (isExpanded) {
-        chainLines.push(...this.renderChainDetail(chain, width, 12));
-      }
-    }
-
-    const selectedChain = this.chains[this.selectedIndex];
-    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],
-          ]),
-          buildPanelLine(width, [
-            [' Reviews ', DEFAULT_PANEL_PALETTE.label],
-            [String(selectedChain.reviewCycles), DEFAULT_PANEL_PALETTE.value],
-            ['   Fixes ', DEFAULT_PANEL_PALETTE.label],
-            [String(selectedChain.fixAttempts), DEFAULT_PANEL_PALETTE.value],
-            ['   Scores ', DEFAULT_PANEL_PALETTE.label],
-            [selectedChain.reviewScores.length > 0 ? selectedChain.reviewScores.map((score) => score.toFixed(0)).join(' -> ') : 'none', DEFAULT_PANEL_PALETTE.info],
-          ]),
-          ...(selectedChain.constraints.length > 0 ? [
-            buildPanelLine(width, (() => {
-              const total = selectedChain.constraints.length;
-              const findings = selectedChain.reviewerReport?.constraintFindings;
-              const satisfied = findings ? findings.filter(f => f.satisfied).length : 0;
-              const satFg = !findings || findings.length === 0
-                ? DEFAULT_PANEL_PALETTE.dim
-                : satisfied === total ? C.constraintSat : C.constraintUnsat;
-              return [
-                [' Constraints ', DEFAULT_PANEL_PALETTE.label],
-                [`${satisfied} sat / ${total} total`, satFg],
-              ] as Array<[string, string]>;
-            })()),
-          ] : []),
-        ]
-      : [];
-
-    const summarySection: PanelWorkspaceSection = {
-      title: 'Summary',
-      lines: [
-        buildPanelLine(width, [
-          [' Active ', DEFAULT_PANEL_PALETTE.label],
-          [String(activeCount), activeCount > 0 ? DEFAULT_PANEL_PALETTE.warn : DEFAULT_PANEL_PALETTE.dim],
-          ['   Passed ', DEFAULT_PANEL_PALETTE.label],
-          [String(passedCount), DEFAULT_PANEL_PALETTE.good],
-          ['   Failed ', DEFAULT_PANEL_PALETTE.label],
-          [String(failedCount), failedCount > 0 ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.dim],
-        ]),
-      ],
-    };
-    const selectedSection: PanelWorkspaceSection = {
-      title: 'Selected',
-      lines: selectedLines,
-    };
-    const chainsSection = resolveScrollablePanelSection(width, height, {
-      intro: 'Track WRFC engineering, review, fixing, gating, and final chain outcomes.',
-      footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
-      palette: DEFAULT_PANEL_PALETTE,
-      beforeSections: [summarySection],
-      section: {
-        title: 'Chains',
-        scrollableLines: chainLines,
-        selectedIndex: selectedLineIndex,
-        scrollOffset: this.scrollOffset,
-        minRows: 8,
-      },
-      afterSections: [selectedSection],
-    });
-    this.scrollOffset = chainsSection.scrollOffset;
-    const sections: PanelWorkspaceSection[] = [summarySection, chainsSection.section, selectedSection];
-
-    return buildPanelWorkspace(width, height, {
-      title: ' WRFC Chain Monitor',
-      intro: 'Track WRFC engineering, review, fixing, gating, and final chain outcomes.',
-      sections,
-      footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
-      palette: DEFAULT_PANEL_PALETTE,
-    });
-    });
-  }
-
-  // -------------------------------------------------------------------------
-  // Rendering helpers
-  // -------------------------------------------------------------------------
-  private renderChainRow(
-    chain: WrfcChain,
-    width: number,
-    isSelected: boolean,
-    isExpanded: boolean,
-    bg: string,
-    fg: string,
-  ): Line[] {
-    const stateCol   = stateColor(chain.state);
-    const stateTag   = ` ${stateLabel(chain.state).padEnd(6)}`;
-    const arrow      = isExpanded ? '▾' : '▸';
-    const chainIdShort = chain.id.slice(-6);
-    const prefix     = ` ${arrow} [${chainIdShort}] `;
-    const fixes      = chain.fixAttempts > 0 ? ` fix:${chain.fixAttempts}` : '';
-    const cycles     = chain.reviewCycles > 0 ? ` rev:${chain.reviewCycles}` : '';
-    const latestScore = chain.reviewScores.length > 0
-      ? ` ${chain.reviewScores[chain.reviewScores.length - 1].toFixed(1)}/10`
-      : '';
-    // Constraint badge: c:sat/total — only when constraints exist
-    let constraintBadge = '';
-    if (chain.constraints.length > 0) {
-      const total = chain.constraints.length;
-      const findings = chain.reviewerReport?.constraintFindings;
-      const satisfied = findings ? findings.filter(f => f.satisfied).length : 0;
-      constraintBadge = ` c:${satisfied}/${total}`;
-    }
-    const rightInfo  = `${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
-    // rather than producing corrupted layout.
-    const usedWithoutTask = getDisplayWidth(prefix) + getDisplayWidth(stateTag) + 1; // prefix + stateTag + space
-    const taskMax    = width - usedWithoutTask - getDisplayWidth(rightInfo);
-    const taskText   = truncate(chain.task, Math.max(8, taskMax));
-    const usedWidth  = usedWithoutTask + getDisplayWidth(taskText);
-    const remaining  = width - usedWidth;
-
-    const segments = [
-      { text: prefix,   fg: isSelected ? fg : C.header },
-      { text: stateTag, fg: stateCol, bold: true },
-      { text: ' ',      fg: '' },
-      { text: taskText, fg: isSelected ? fg : C.value },
-    ];
-    if (remaining >= rightInfo.length + 1) {
-      // Right-align rightInfo in the remaining space
-      // Colour the constraint badge separately when present
-      if (chain.constraints.length > 0 && !isSelected) {
-        const total = chain.constraints.length;
-        const findings = chain.reviewerReport?.constraintFindings;
-        const satisfied = findings ? findings.filter(f => f.satisfied).length : 0;
-        // Determine badge colour
-        let badgeFg: string;
-        if (!findings || findings.length === 0) {
-          badgeFg = C.constraintUnv;
-        } else if (satisfied === total) {
-          badgeFg = C.constraintSat;
-        } else if (findings.some(f => !f.satisfied)) {
-          badgeFg = C.constraintUnsat;
-        } else {
-          badgeFg = C.reviewing; // some unverified but none failed
-        }
-        // Split: everything before the badge, then the badge
-        const badgeText = ` c:${satisfied}/${total}`;
-        const beforeBadge = rightInfo.slice(0, rightInfo.length - badgeText.length - 1);
-        const padding = remaining - rightInfo.length;
-        segments.push({ text: beforeBadge.padStart(padding + beforeBadge.length), fg: isSelected ? fg : C.label });
-        segments.push({ text: badgeText, fg: badgeFg });
-        segments.push({ text: ' ', fg: '' });
-      } else {
-        segments.push({ text: rightInfo.padStart(remaining), fg: isSelected ? fg : C.label });
-      }
-    }
-    // else: no room — makeSegmentedLine will pad with spaces to fill width
-
-    const row = buildSelectablePanelLine(width, segments, {
-      selected: isSelected,
-      selectedBg: bg,
-      fillFg: isSelected ? fg : '',
-    });
-
-    return [row];
-  }
-
-  private renderChainDetail(chain: WrfcChain, width: number, maxLines: number): Line[] {
-    const lines: Line[] = [];
-    const indent = '     ';
-
-    // Score sparkline
-    if (chain.reviewScores.length > 0) {
-      const spark = sparkline(chain.reviewScores);
-      const latestScore = chain.reviewScores[chain.reviewScores.length - 1];
-      const sparkColor  = latestScore >= 8 ? C.sparkHigh : latestScore >= 5 ? C.spark : C.sparkLow;
-      lines.push(buildStyledPanelLine(width, [
-        { text: `${indent}Scores  `, fg: C.label },
-        { text: spark,               fg: sparkColor },
-        { text: ` (${chain.reviewScores.map(s => s.toFixed(0)).join(' -> ')})`, fg: C.dim },
-      ]));
-    }
-
-    // Fix attempts + review cycles
-    if (chain.fixAttempts > 0 || chain.reviewCycles > 0) {
-      lines.push(buildStyledPanelLine(width, [
-        { text: `${indent}Cycles  `, fg: C.label },
-        { text: `${chain.reviewCycles} review`,  fg: C.value },
-        { text: '  ',                             fg: '' },
-        { text: `${chain.fixAttempts} fix`,       fg: chain.fixAttempts > 0 ? C.fixing : C.value },
-      ]));
-    }
-
-    // Constraints section (between Cycles and Gates)
-    if (chain.constraints.length > 0 && lines.length < maxLines) {
-      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}  `;
-        const textMax = Math.max(8, width - rowPrefix.length);
-        const constraintText = truncate(constraint.text, textMax);
-        lines.push(buildStyledPanelLine(width, [
-          { text: `${indent}  `, fg: C.dim },
-          { text: statusTag,      fg: marker.fg, dim: marker.dim, bold: !marker.dim },
-          { text: '  ',           fg: '' },
-          { text: constraintText, fg: C.value },
-        ]));
-      }
-      const remaining = chain.constraints.length - MAX_CONSTRAINTS;
-      if (remaining > 0 && lines.length < maxLines) {
-        lines.push(buildStyledPanelLine(width, [
-          { text: `${indent}  (+${remaining} more)`, fg: C.dim, dim: true },
-        ]));
-      }
-    }
-
-    // Quality gate results
-    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 + '  '));
-      }
-    }
-
-    // Gate status (no results yet but state is gating)
-    if (chain.state === 'gating' || chain.state === 'awaiting_gates') {
-      if (!chain.gateResults || chain.gateResults.length === 0) {
-        lines.push(buildStyledPanelLine(width, [{ text: `${indent}Gates   awaiting...`, fg: C.gating, dim: true }]));
-      }
-    }
-
-    // Synthetic issues injected by controller (continuity violations)
-    if (chain.syntheticIssues && chain.syntheticIssues.length > 0 && lines.length < maxLines) {
-      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);
-        lines.push(buildStyledPanelLine(width, [
-          { text: prefix, fg: C.issueCrit, bold: true },
-          { text: desc,   fg: C.value },
-        ]));
-      }
-    }
-
-    // Issues from reviewer
-    const issues = chain.reviewerReport?.issues ?? [];
-    if (issues.length > 0 && lines.length < maxLines) {
-      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));
-        lines.push(buildStyledPanelLine(width, [
-          { text: prefix, fg: issueColor(issue.severity), bold: issue.severity === 'critical' },
-          { text: desc,   fg: C.value },
-        ]));
-      }
-    }
-
-    // Error
-    if (chain.error && lines.length < maxLines) {
-      const errPrefix = `${indent}Error   `;
-      lines.push(buildStyledPanelLine(width, [
-        { text: errPrefix,                                fg: C.failed, bold: true },
-        { text: truncate(chain.error, width - errPrefix.length), fg: C.value },
-      ]));
-    }
-
-    // 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);
-  }
-
-  private renderGateResult(gate: QualityGateResult, width: number, indent: string): Line {
-    const icon   = gate.passed ? '✓' : '✕';
-    const iconFg = gate.passed ? C.gatePass : C.gateFail;
-    const dur    = `${gate.durationMs}ms`;
-    const nameMax = width - indent.length - 2 - dur.length - 4;
-    const name   = truncate(gate.gate, Math.max(8, nameMax));
-
-    return buildStyledPanelLine(width, [
-      { text: indent,          fg: C.dim },
-      { text: `${icon} `,      fg: iconFg, bold: true },
-      { text: name,            fg: gate.passed ? C.value : C.failed },
-      { text: ` (${dur})`,     fg: C.dim },
-    ]);
-  }
-
-  // -------------------------------------------------------------------------
-  // Navigation
-  // -------------------------------------------------------------------------
-  private moveSelection(delta: number): void {
-    if (this.chains.length === 0) return;
-    this.selectedIndex = Math.max(0, Math.min(this.chains.length - 1, this.selectedIndex + delta));
-    this.markDirty();
-  }
-
-  private toggleExpanded(): void {
-    const chain = this.chains[this.selectedIndex];
-    if (!chain) return;
-    if (this.expandedChainIds.has(chain.id)) {
-      this.expandedChainIds.delete(chain.id);
-    } else {
-      this.expandedChainIds.add(chain.id);
-    }
-    this.markDirty();
-  }
-
-  // -------------------------------------------------------------------------
-  // Event subscriptions
-  // -------------------------------------------------------------------------
-  private subscribeToEvents(): void {
-    const refresh = () => { this.syncFromController(); 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),
-      this.workflowEvents.on('WORKFLOW_CONSTRAINTS_ENUMERATED', refresh),
-    );
-  }
-
-  private syncFromController(): void {
-    try {
-      // Sort: active first (by createdAt desc), then completed
-      const all = this.deps.controller.listChains();
-      const active   = all.filter(c => !['passed', 'failed'].includes(c.state));
-      const done     = all.filter(c =>  ['passed', 'failed'].includes(c.state));
-      active.sort((a, b) => b.createdAt - a.createdAt);
-      done.sort(  (a, b) => (b.completedAt ?? 0) - (a.completedAt ?? 0));
-      this.chains = [...active, ...done];
-
-      // Clamp selection
-      if (this.chains.length > 0) {
-        this.selectedIndex = Math.min(this.selectedIndex, this.chains.length - 1);
-      }
-    } catch {
-      // WrfcController not yet initialized — leave chain list empty
-    }
-  }
-}