@pellux/goodvibes-tui 0.26.0 → 0.28.0

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

@@ -1,7 +1,32 @@
 import type { Line } from '../types/grid.ts';
-import { UIFactory } from '../renderer/ui-factory.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
+import {
+  buildDetailBlock,
+  buildGuidanceLine,
+  buildKeyboardHints,
+  buildKeyValueLine,
+  buildMeterLine,
+  buildPanelLine,
+  buildPanelListRow,
+  buildSummaryBlock,
+  DEFAULT_PANEL_PALETTE,
+  extendPalette,
+  type PanelPalette,
+} from './polish.ts';
 import type { WorkPlanItem, WorkPlanItemStatus, WorkPlanStore } from '../work-plans/work-plan-store.ts';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
+
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  pending: '#94a3b8',
+  inProgress: '#38bdf8',
+  blocked: '#f59e0b',
+  done: '#22c55e',
+  failed: '#ef4444',
+  cancelled: '#64748b',
+  accent: '#a5b4fc',
+  selectBg: '#1e293b',
+});
 
 const STATUS_LABEL: Record<WorkPlanItemStatus, string> = {
   pending: '[ ]',
@@ -13,17 +38,15 @@ const STATUS_LABEL: Record<WorkPlanItemStatus, string> = {
 };
 
 const STATUS_COLOR: Record<WorkPlanItemStatus, string> = {
-  pending: '#94a3b8',
-  in_progress: '#38bdf8',
-  blocked: '#f59e0b',
-  done: '#22c55e',
-  failed: '#ef4444',
-  cancelled: '#64748b',
+  pending: C.pending,
+  in_progress: C.inProgress,
+  blocked: C.blocked,
+  done: C.done,
+  failed: C.failed,
+  cancelled: C.cancelled,
 };
 
-function line(text: string, width: number, style: Parameters<typeof UIFactory.stringToLine>[2] = {}): Line {
-  return UIFactory.stringToLine(text.padEnd(width).slice(0, width), width, style);
-}
+const STATUS_ORDER: WorkPlanItemStatus[] = ['pending', 'in_progress', 'blocked', 'done', 'failed', 'cancelled'];
 
 function compactDate(value: number): string {
   return new Date(value).toISOString().replace('T', ' ').slice(0, 16);
@@ -47,13 +70,16 @@ export class WorkPlanPanel extends ScrollableListPanel<WorkPlanItem> {
     this.refresh();
   }
 
+  protected override getPalette(): PanelPalette {
+    return C;
+  }
+
   render(width: number, height: number): Line[] {
     this.refresh();
     return this.renderList(width, height, {
       title: 'Work Plan',
       header: this.renderHeader(width),
       footer: this.renderFooter(width),
-      emptyMessage: 'No work plan items yet',
     });
   }
 
@@ -98,7 +124,7 @@ export class WorkPlanPanel extends ScrollableListPanel<WorkPlanItem> {
           return super.handleInput(key);
       }
     } catch (error) {
-      this.setError(error instanceof Error ? error.message : String(error));
+      this.setError(summarizeError(error));
       return true;
     }
   }
@@ -107,10 +133,14 @@ export class WorkPlanPanel extends ScrollableListPanel<WorkPlanItem> {
     return this.items;
   }
 
+  protected override getEmptyStateMessage(): string {
+    return ' No work plan items yet';
+  }
+
   protected getEmptyStateActions(): Array<{ command: string; summary: string }> {
     return [
-      { command: '/work-plan add <title>', summary: 'add a persistent item' },
-      { command: '/work-plan list', summary: 'print the current plan' },
+      { command: '/work-plan add <title>', summary: 'add a persistent item that survives across sessions' },
+      { command: '/work-plan list', summary: 'print the current plan to the shell' },
     ];
   }
 
@@ -118,12 +148,14 @@ export class WorkPlanPanel extends ScrollableListPanel<WorkPlanItem> {
     const status = STATUS_LABEL[item.status];
     const owner = item.owner ? ` @${item.owner}` : '';
     const source = item.source ? ` (${item.source})` : '';
-    const text = `${status} ${item.title}${owner}${source}`;
-    return line(text, width, {
-      fg: selected ? '#e2e8f0' : STATUS_COLOR[item.status],
-      bg: selected ? '#1e293b' : undefined,
-      bold: selected || item.status === 'in_progress',
-    });
+    const reserve = status.length + owner.length + source.length + 4;
+    const title = truncateDisplay(item.title, Math.max(6, width - reserve));
+    return buildPanelListRow(width, [
+      { text: `${status} `, fg: STATUS_COLOR[item.status], bold: item.status === 'in_progress' },
+      { text: title, fg: selected ? C.value : C.label, bold: selected || item.status === 'in_progress' },
+      { text: owner, fg: C.accent },
+      { text: source, fg: C.dim },
+    ], C, { selected, selectedBg: C.selectBg });
   }
 
   private setSelectedStatus(status: WorkPlanItemStatus): boolean {
@@ -146,30 +178,90 @@ export class WorkPlanPanel extends ScrollableListPanel<WorkPlanItem> {
   private renderHeader(width: number): Line[] {
     const plan = this.store.getActivePlan();
     const counts = new Map<WorkPlanItemStatus, number>();
-    for (const status of Object.keys(STATUS_LABEL) as WorkPlanItemStatus[]) counts.set(status, 0);
+    for (const status of STATUS_ORDER) counts.set(status, 0);
     for (const item of plan.items) counts.set(item.status, (counts.get(item.status) ?? 0) + 1);
-    const active = this.items[this.selectedIndex];
-    const header = [
-      line(`Persistent Work Plan`, width, { fg: '#22d3ee', bold: true }),
-      line(`Project: ${plan.projectRoot}`, width, { fg: '#cbd5e1' }),
-      line(
-        `Items: ${plan.items.length}  pending ${counts.get('pending') ?? 0}  active ${counts.get('in_progress') ?? 0}  blocked ${counts.get('blocked') ?? 0}  done ${counts.get('done') ?? 0}`,
-        width,
-        { fg: '#94a3b8' },
-      ),
-      line(`Saved: ${this.store.filePath}`, width, { fg: '#64748b' }),
+
+    const total = plan.items.length;
+    const done = (counts.get('done') ?? 0) + (counts.get('cancelled') ?? 0);
+    const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+    const meterWidth = Math.max(10, Math.min(26, width - 34));
+
+    const postureLines: Line[] = [
+      buildPanelLine(width, [
+        [' Project ', C.label],
+        [truncateDisplay(plan.projectRoot, Math.max(8, width - 11)), C.value],
+      ]),
+      buildMeterLine(width, Math.round((pct / 100) * meterWidth), meterWidth, {
+        filled: pct === 100 ? C.done : C.inProgress,
+        empty: C.empty,
+        label: C.label,
+      }, { prefix: ' Progress ', suffix: ` ${done}/${total} (${pct}%) ` }),
+      buildKeyValueLine(width, [
+        { label: 'pending', value: String(counts.get('pending') ?? 0), valueColor: (counts.get('pending') ?? 0) > 0 ? C.pending : C.dim },
+        { label: 'active', value: String(counts.get('in_progress') ?? 0), valueColor: (counts.get('in_progress') ?? 0) > 0 ? C.inProgress : C.dim },
+        { label: 'blocked', value: String(counts.get('blocked') ?? 0), valueColor: (counts.get('blocked') ?? 0) > 0 ? C.blocked : C.dim },
+        { label: 'done', value: String(counts.get('done') ?? 0), valueColor: (counts.get('done') ?? 0) > 0 ? C.done : C.dim },
+      ], C),
+      buildGuidanceLine(width, '/work-plan add <title>', 'append a persistent item to the active plan', C),
     ];
+
+    const header: Line[] = buildSummaryBlock(width, 'Persistent Work Plan', postureLines, C);
+
+    const active = this.items[this.selectedIndex];
     if (active) {
-      header.push(line('', width));
-      header.push(line(`Selected: ${active.id}  ${statusName(active.status)}  updated ${compactDate(active.updatedAt)}`, width, { fg: '#a5b4fc' }));
-      if (active.notes) header.push(line(`Notes: ${active.notes}`, width, { fg: '#cbd5e1' }));
+      const detailRows: Line[] = [
+        buildPanelLine(width, [
+          [' ', C.label],
+          [STATUS_LABEL[active.status], STATUS_COLOR[active.status]],
+          [' ', C.label],
+          [truncateDisplay(active.title, Math.max(8, width - 6)), C.value],
+        ]),
+        buildKeyValueLine(width, [
+          { label: 'status', value: statusName(active.status), valueColor: STATUS_COLOR[active.status] },
+          ...(active.owner ? [{ label: 'owner', value: active.owner, valueColor: C.accent }] : []),
+          { label: 'updated', value: compactDate(active.updatedAt), valueColor: C.dim },
+        ], C),
+      ];
+      if (active.source) {
+        detailRows.push(buildPanelLine(width, [[' source ', C.label], [active.source, C.info]]));
+      }
+      if (active.notes) {
+        detailRows.push(buildPanelLine(width, [
+          [' notes ', C.label],
+          [truncateDisplay(active.notes, Math.max(8, width - 8)), C.value],
+        ]));
+      }
+      header.push(...buildDetailBlock(width, 'Selected item', detailRows, C));
     }
     return header;
   }
 
   private renderFooter(width: number): Line[] {
+    const hasItem = this.items.length > 0;
+    if (!hasItem) {
+      return [
+        buildKeyboardHints(width, [
+          { keys: '↑/↓', label: 'navigate' },
+        ], C),
+      ];
+    }
     return [
-      line('Enter/Space cycle  1 pending  2 active  3 blocked  4 done  5 failed  6 cancelled  d delete  c clear done  r refresh', width, { fg: '#94a3b8' }),
+      buildKeyboardHints(width, [
+        { keys: this.items.length > 0 ? `${this.selectedIndex + 1}/${this.items.length}` : '0/0', label: 'item' },
+        { keys: 'Enter', label: 'cycle status' },
+        { keys: '1-6', label: 'set status' },
+        { keys: 'd', label: 'delete' },
+        { keys: 'c', label: 'clear done' },
+        { keys: 'r', label: 'refresh' },
+      ], C),
+      buildPanelLine(width, [
+        [' 1', C.info], [' pending  ', C.dim],
+        ['2', C.info], [' active  ', C.dim],
+        ['3', C.info], [' blocked  ', C.dim],
+        ['4', C.info], [' done  ', C.dim],
+        ['5', C.info], [' failed  ', C.dim],
+        ['6', C.info], [' cancelled', C.dim],
+      ]),
     ];
   }
 }

package/src/panels/worktree-panel.ts

@@ -1,7 +1,8 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
+import { basename } from 'node:path';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
-import { buildKeyValueLine, buildPanelLine, buildPanelWorkspace, DEFAULT_PANEL_PALETTE, resolvePrimaryScrollableSection, type PanelWorkspaceSection } from './polish.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';
 
 const C = {
@@ -22,6 +23,44 @@ function stateColor(state: WorktreeStatusRecord['state']): string {
   }
 }
 
+/** Glyph that reads at a glance: ● active, ◌ paused/kept, ⊘ discard/cleanup. */
+function stateGlyph(state: WorktreeStatusRecord['state']): string {
+  switch (state) {
+    case 'active': return '●';
+    case 'paused':
+    case 'kept': return '◌';
+    default: return '⊘';
+  }
+}
+
+/**
+ * One worktree row, aligned with display-width-aware columns so a wide-char or
+ * long branch name never shoves the path column out of alignment. The active
+ * worktree is flagged with a ● glyph and selection uses the shared marker.
+ */
+function buildWorktreeRow(width: number, row: WorktreeStatusRecord, selected: boolean): Line {
+  const pathW = Math.max(8, width - (2 + 10 + 13 + 20) - 4 - 2);
+  const columns: ColumnSpec[] = [
+    { width: 2 },
+    { width: 10 },
+    { width: 13 },
+    { width: 20 },
+    { width: pathW },
+  ];
+  return buildAlignedRow(
+    width,
+    [
+      { text: stateGlyph(row.state), fg: stateColor(row.state) },
+      { text: row.kind, fg: C.info },
+      { text: row.state, fg: stateColor(row.state) },
+      { text: row.branch, fg: C.value },
+      { text: basename(row.path) || row.path, fg: C.dim },
+    ],
+    columns,
+    { selected, selectedBg: C.headerBg, marker: '▸' },
+  );
+}
+
 export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
   private rows: WorktreeStatusRecord[] = [];
   private loading = false;
@@ -52,13 +91,7 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
   }
 
   protected renderItem(row: WorktreeStatusRecord, index: number, _selected: boolean, width: number): Line {
-    const bg = index === this.selectedIndex ? C.headerBg : undefined;
-    return buildPanelLine(width, [
-      [` ${row.kind}`.padEnd(14), C.info, bg],
-      [` ${row.state}`.padEnd(16), stateColor(row.state), bg],
-      [` ${row.branch}`.padEnd(24), C.value, bg],
-      [` ${row.path}`.slice(0, Math.max(0, width - 56)), C.dim, bg],
-    ]);
+    return buildWorktreeRow(width, row, index === this.selectedIndex);
   }
 
   private async refresh(): Promise<void> {
@@ -80,7 +113,13 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
     if (this.loading && this.rows.length === 0) {
       sections.push({ title: 'Worktrees', lines: [buildPanelLine(width, [[' Loading worktree state...', C.info]])] });
     } else if (this.rows.length === 0) {
-      sections.push({ title: 'Worktrees', lines: [buildPanelLine(width, [[' No git worktrees discovered for this project.', C.dim]])] });
+      sections.push({
+        title: 'Worktrees',
+        lines: [
+          buildPanelLine(width, [[' No git worktrees discovered for this project yet.', C.dim]]),
+          buildPanelLine(width, [['  /worktree attach <path>', C.info], ['  register a worktree for orchestrator-managed lifecycle', C.dim]]),
+        ],
+      });
     } else {
       const summary = summarizeWorktreeOwnership(this.rows);
       sections.push({
@@ -142,20 +181,26 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
       };
       const resolvedWorktreesSection = resolvePrimaryScrollableSection(width, height, {
         intro: 'Orchestrator-owned worktree lifecycle, attachments, pause/resume posture, and cleanup state.',
-        footerLines: [buildPanelLine(width, [[' r refresh  /worktree inspect <path>  /worktree attach|pause|resume|keep|discard|cleanup ', C.dim]])],
+        footerLines: [buildKeyboardHints(width, [{ keys: '↑/↓', label: 'select' }, { keys: 'r', label: 'refresh' }, { keys: '/worktree inspect', label: '<path>' }, { keys: 'attach·pause·resume·keep·discard·cleanup', label: '' }], C)],
         palette: C,
         beforeSections: sections,
         section: {
           title: 'Worktrees',
-          scrollableLines: this.rows.map((row, absolute) => {
-            const bg = absolute === this.selectedIndex ? C.headerBg : undefined;
-            return buildPanelLine(width, [
-              [` ${row.kind}`.padEnd(14), C.info, bg],
-              [` ${row.state}`.padEnd(16), stateColor(row.state), bg],
-              [` ${row.branch}`.padEnd(24), C.value, bg],
-              [` ${row.path}`.slice(0, Math.max(0, width - 56)), C.dim, bg],
-            ]);
-          }),
+          fixedLines: [
+            buildAlignedRow(width, [
+              { text: '', fg: C.dim },
+              { text: 'KIND', fg: C.label, bold: true },
+              { text: 'STATE', fg: C.label, bold: true },
+              { text: 'BRANCH', fg: C.label, bold: true },
+              { text: 'WORKTREE', fg: C.label, bold: true },
+            ], [
+              { width: 2 }, { width: 10 }, { width: 13 }, { width: 20 },
+              { width: Math.max(8, width - (2 + 10 + 13 + 20) - 4 - 2) },
+            ], { marker: ' ' }),
+          ],
+          scrollableLines: this.rows.map((row, absolute) =>
+            buildWorktreeRow(width, row, absolute === this.selectedIndex),
+          ),
           selectedIndex: this.selectedIndex,
           scrollOffset: this.scrollStart,
           guardRows: 1,
@@ -173,7 +218,7 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
       title: 'Worktree Control Room',
       intro: 'Orchestrator-owned worktree lifecycle, attachments, pause/resume posture, and cleanup state.',
       sections,
-      footerLines: [buildPanelLine(width, [[' r refresh  /worktree inspect <path>  /worktree attach|pause|resume|keep|discard|cleanup ', C.dim]])],
+      footerLines: [buildKeyboardHints(width, [{ keys: '↑/↓', label: 'select' }, { keys: 'r', label: 'refresh' }, { keys: '/worktree inspect', label: '<path>' }, { keys: 'attach·pause·resume·keep·discard·cleanup', label: '' }], C)],
       palette: C,
     });
     while (lines.length < height) lines.push(createEmptyLine(width));

package/src/panels/wrfc-panel-format.ts

@@ -0,0 +1,133 @@
+import { truncateDisplay } from '../utils/terminal-width.ts';
+import type { WrfcState, Constraint, ConstraintFinding } from '@pellux/goodvibes-sdk/platform/agents';
+import { DEFAULT_PANEL_PALETTE, extendPalette } from './polish.ts';
+
+// ---------------------------------------------------------------------------
+// Colour palette + formatting helpers for the WRFC panel.
+//
+// Extracted from wrfc-panel.ts to keep that module under the architecture
+// line-count cap. Leaf module (only polish + terminal-width + sdk types); the
+// panel re-exports the public helpers so ./wrfc-panel.ts stays their import site.
+// ---------------------------------------------------------------------------
+export 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';
+  }
+}
+
+export 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;
+  }
+}
+
+export 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 {
+  return truncateDisplay(s, max);
+}
+
+// ---------------------------------------------------------------------------
+// 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 };
+}