@pellux/goodvibes-tui 0.18.23 → 0.19.0

package/src/panels/polish.ts

@@ -3,6 +3,7 @@ import { createEmptyLine, createStyledCell } from '../types/grid.ts';
 import { getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
 import { getSurfaceContentRows, getTrackedVisibleWindow, getVisibleWindow, type VisibleWindow } from '../renderer/surface-layout.ts';
 import { GLYPHS, UI_TONES } from '../renderer/ui-primitives.ts';
+import { type StatusState, STATE_GLYPHS } from '../renderer/status-glyphs.ts';
 
 export interface PanelPalette {
   readonly label: string;
@@ -42,13 +43,36 @@ export const DEFAULT_PANEL_PALETTE: Readonly<Required<PanelPalette>> = {
   selectBg: UI_TONES.bg.selected,
 } as const;
 
+/**
+ * Extend the base panel palette with domain-specific colors.
+ *
+ * Convention: raw hex colors may only live inside a palette constant declared
+ * at the top of a panel file, not inline in render calls.
+ *
+ * @example
+ * ```ts
+ * const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+ *   decision: '#38bdf8',
+ *   incident: '#ef4444',
+ * });
+ * ```
+ */
+export function extendPalette<T extends Record<string, string>>(
+  base: typeof DEFAULT_PANEL_PALETTE,
+  extras: T,
+): typeof DEFAULT_PANEL_PALETTE & T {
+  return { ...base, ...extras };
+}
+
 export function buildPanelLine(
   width: number,
-  segments: Array<[string, string, string?]>,
+  segments: Array<StyledPanelSegment | [string, string, string?]>,
 ): Line {
   return buildStyledPanelLine(
     width,
-    segments.map(([text, fg, bg]) => ({ text, fg, bg })),
+    segments.map((seg) =>
+      Array.isArray(seg) ? { text: seg[0], fg: seg[1], bg: seg[2] } : seg,
+    ),
   );
 }
 
@@ -256,6 +280,31 @@ export function buildSearchInputLine(
   ], { fillBg: bg });
 }
 
+/**
+ * Build a status pill segment (glyph + label) for use in buildPanelLine.
+ *
+ * Returns StyledPanelSegment[] — spread directly into a buildPanelLine segments
+ * array:
+ *   buildPanelLine(width, [['  count ', C.label], ...buildStatusPill('bad', '3')])
+ *
+ * Convention: raw hex colors may only live inside a palette constant declared at
+ * the top of a panel file; buildStatusPill derives its color from the palette.
+ */
+export function buildStatusPill(
+  state: StatusState,
+  label: string,
+  opts?: { glyph?: string; bg?: string; count?: number },
+): StyledPanelSegment[] {
+  const glyph = opts?.glyph ?? STATE_GLYPHS[state];
+  const color = state === 'good' ? DEFAULT_PANEL_PALETTE.good
+    : state === 'warn' ? DEFAULT_PANEL_PALETTE.warn
+    : state === 'bad'  ? DEFAULT_PANEL_PALETTE.bad
+    : DEFAULT_PANEL_PALETTE.info;
+  const bg = opts?.bg;
+  const text = opts?.count !== undefined ? `${glyph} ${label} (${opts.count})` : `${glyph} ${label}`;
+  return [{ text, fg: color, bg }];
+}
+
 export function buildStatPill(
   label: string,
   value: string,

package/src/panels/provider-accounts-panel.ts

@@ -36,6 +36,7 @@ export class ProviderAccountsPanel extends ScrollableListPanel<ProviderAccountRe
 
   public constructor(deps: ProviderAccountsPanelDeps) {
     super('accounts', 'Accounts', 'Q', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.providerAccounts = deps.providerAccounts;
     void this.refresh();
   }

package/src/panels/provider-health-panel.ts

@@ -362,7 +362,7 @@ function buildProviderRuntimeRecord(
  */
 export class ProviderHealthPanel extends BasePanel {
   private _unsubs: Array<() => void> = [];
-  private _refreshTimer: ReturnType<typeof setInterval> | null = null;
+  private _refreshTimerId: ReturnType<typeof setInterval> | null = null;
   private _selectedIndex = 0;
   private _scrollOffset = 0;
   private _accountRecords = new Map<string, ProviderRuntimeRecord>();
@@ -461,23 +461,21 @@ export class ProviderHealthPanel extends BasePanel {
   }
 
   override onDestroy(): void {
-    if (this._refreshTimer !== null) {
-      clearInterval(this._refreshTimer);
-      this._refreshTimer = null;
-    }
+    super.onDestroy();
+    this._refreshTimerId = null;
     for (const unsub of this._unsubs) unsub();
     this._unsubs = [];
   }
 
   private _ensureRefreshTimer(): void {
-    if (this._refreshTimer !== null) return;
-    this._refreshTimer = setInterval(() => {
+    if (this._refreshTimerId !== null) return;
+    this._refreshTimerId = this.registerTimer(setInterval(() => {
       if (Date.now() - this._accountRefreshAt > 30_000) {
         void this._refreshAccountPosture();
       }
       this.markDirty();
       this.requestRender();
-    }, 1_000);
+    }, 1_000));
   }
 
   handleInput(key: string): boolean {

package/src/panels/routes-panel.ts

@@ -9,6 +9,7 @@ import {
   buildKeyValueLine,
   buildPanelLine,
   buildPanelWorkspace,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
   type PanelPalette,
 } from './polish.ts';
@@ -37,6 +38,7 @@ export class RoutesPanel extends ScrollableListPanel<RouteBinding> {
 
   public constructor(readModel?: UiReadModel<UiRoutesSnapshot>) {
     super('routes', 'Routes', 'R', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.readModel = readModel;
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }
@@ -60,7 +62,7 @@ export class RoutesPanel extends ScrollableListPanel<RouteBinding> {
       [' ', C.label, bg],
       [binding.surfaceKind.padEnd(9), C.info, bg],
       [` ${truncateDisplay(binding.title ?? binding.externalId, 22).padEnd(22)}`, C.value, bg],
-      [` ${truncateDisplay(binding.sessionId ?? binding.runId ?? 'unbound', 18).padEnd(18)}`, binding.sessionId ? C.ok : C.warn, bg],
+      ...buildStatusPill(binding.sessionId ? 'good' : 'warn', ` ${truncateDisplay(binding.sessionId ?? binding.runId ?? 'unbound', 18).padEnd(18)}`, { bg }),
       [` ${truncateDisplay(formatTime(binding.lastSeenAt), Math.max(0, width - 54))}`, C.dim, bg],
     ]);
   }

package/src/panels/schedule-panel.ts

@@ -87,7 +87,7 @@ export class SchedulePanel extends BasePanel {
   private items: ViewItem[] = [];
   private selectedIndex = 0;
   private scrollOffset = 0;
-  private refreshTimer: ReturnType<typeof setInterval> | null = null;
+  private refreshTimerId: ReturnType<typeof setInterval> | null = null;
   private readonly automationManager: ScheduleAutomationManager;
 
   constructor(automationManager: ScheduleAutomationManager) {
@@ -106,21 +106,22 @@ export class SchedulePanel extends BasePanel {
       this.markDirty();
     });
     this.rebuild();
-    this.refreshTimer = setInterval(() => {
+    this.refreshTimerId = this.registerTimer(setInterval(() => {
       this.rebuild();
       this.markDirty();
-    }, 5_000);
+    }, 5_000));
   }
 
   override onDeactivate(): void {
-    if (this.refreshTimer !== null) {
-      clearInterval(this.refreshTimer);
-      this.refreshTimer = null;
+    if (this.refreshTimerId !== null) {
+      this.clearTimer(this.refreshTimerId);
+      this.refreshTimerId = null;
     }
   }
 
   override onDestroy(): void {
     this.onDeactivate();
+    super.onDestroy();
   }
 
   // -------------------------------------------------------------------------

package/src/panels/scrollable-list-panel.ts

@@ -122,9 +122,26 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
   // Navigation — consistent across ALL panels
   // -------------------------------------------------------------------------
 
+  /**
+   * Handle keyboard input for list navigation.
+   *
+   * **Auto-clearError contract**: At the top of this method, `lastError` is cleared if
+   * non-null. This means any transient error set via `setError()` is dismissed on the
+   * very next keystroke the user presses. Subclasses that override `handleInput()` should
+   * either:
+   *   1. Call `super.handleInput(key)` as a fallback (preferred), which will clear the
+   *      error when navigation keys are pressed, or
+   *   2. Manually call `this.clearError()` at the top of their override to maintain
+   *      the same contract for their handled keys.
+   *
+   * Returns `true` if the key was consumed, `false` to let the panel manager try another
+   * handler.
+   */
   handleInput(key: string): boolean {
-    // I2: auto-clear error on next keypress
-    if (this.lastError) this.clearError();
+    // I2: auto-clear transient errors on the next keystroke so stale errors don't linger.
+    // Subclasses that override handleInput should call super.handleInput(key) OR manually
+    // call this.clearError() at the start of their handler.
+    if (this.lastError !== null) this.clearError();
 
     const items = this.getItems();
     const total = items.length;

package/src/panels/security-panel.ts

@@ -7,6 +7,7 @@ import {
   buildGuidanceLine,
   buildPanelLine,
   buildPanelWorkspace,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
 import { createEmptyLine } from '../types/grid.ts';
@@ -61,6 +62,7 @@ export class SecurityPanel extends ScrollableListPanel<TokenAuditResult> {
 
   public constructor(private readonly readModel: UiReadModel<UiSecuritySnapshot>) {
     super('security', 'Security', 'U', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.unsub = this.readModel.subscribe(() => this.markDirty());
   }
 
@@ -125,46 +127,46 @@ export class SecurityPanel extends ScrollableListPanel<TokenAuditResult> {
         ['  tokens ', C.label],
         [String(view.totalTokens), C.value],
         ['  blocked ', C.label],
-        [String(view.blocked.length), view.blocked.length > 0 ? C.error : C.ok],
+        ...buildStatusPill(view.blocked.length > 0 ? 'bad' : 'good', String(view.blocked.length)),
         ['  scope violations ', C.label],
-        [String(view.scopeViolations.length), view.scopeViolations.length > 0 ? C.error : C.ok],
+        ...buildStatusPill(view.scopeViolations.length > 0 ? 'bad' : 'good', String(view.scopeViolations.length)),
         ['  overdue ', C.label],
-        [String(view.rotationOverdue.length), view.rotationOverdue.length > 0 ? C.error : C.ok],
+        ...buildStatusPill(view.rotationOverdue.length > 0 ? 'bad' : 'good', String(view.rotationOverdue.length)),
         ['  warnings ', C.label],
-        [String(view.rotationWarnings.length), view.rotationWarnings.length > 0 ? C.warn : C.ok],
+        ...buildStatusPill(view.rotationWarnings.length > 0 ? 'warn' : 'good', String(view.rotationWarnings.length)),
       ]),
       buildPanelLine(width, [
         [' preflight ', C.label],
-        [preflightStatus.toUpperCase(), preflightStatus === 'block' ? C.error : preflightStatus === 'warn' ? C.warn : preflightStatus === 'pass' ? C.ok : C.dim],
+        ...buildStatusPill(preflightStatus === 'block' ? 'bad' : preflightStatus === 'warn' ? 'warn' : preflightStatus === 'pass' ? 'good' : 'info', preflightStatus.toUpperCase()),
         ['  issues ', C.label],
-        [String(preflightIssueCount), preflightIssueCount > 0 ? C.warn : C.ok],
+        ...buildStatusPill(preflightIssueCount > 0 ? 'warn' : 'good', String(preflightIssueCount)),
         ['  lint ', C.label],
-        [String(lintFindingCount), lintFindingCount > 0 ? C.warn : C.ok],
+        ...buildStatusPill(lintFindingCount > 0 ? 'warn' : 'good', String(lintFindingCount)),
         ['  denied permissions ', C.label],
-        [String(snapshot.deniedPermissions), snapshot.deniedPermissions > 0 ? C.warn : C.ok],
+        ...buildStatusPill(snapshot.deniedPermissions > 0 ? 'warn' : 'good', String(snapshot.deniedPermissions)),
       ]),
       buildPanelLine(width, [
         [' quarantined MCP ', C.label],
-        [String(quarantinedMcp.length), quarantinedMcp.length > 0 ? C.error : C.ok],
+        ...buildStatusPill(quarantinedMcp.length > 0 ? 'bad' : 'good', String(quarantinedMcp.length)),
         ['  elevated MCP ', C.label],
-        [String(elevatedMcp.length), elevatedMcp.length > 0 ? C.warn : C.ok],
+        ...buildStatusPill(elevatedMcp.length > 0 ? 'warn' : 'good', String(elevatedMcp.length)),
         ['  quarantined plugins ', C.label],
-        [String(quarantinedPlugins.length), quarantinedPlugins.length > 0 ? C.error : C.ok],
+        ...buildStatusPill(quarantinedPlugins.length > 0 ? 'bad' : 'good', String(quarantinedPlugins.length)),
         ['  untrusted plugins ', C.label],
-        [String(untrustedPlugins.length), untrustedPlugins.length > 0 ? C.warn : C.ok],
+        ...buildStatusPill(untrustedPlugins.length > 0 ? 'warn' : 'good', String(untrustedPlugins.length)),
       ]),
       buildPanelLine(width, [
         ['  incidents ', C.label],
-        [String(incidents.length), incidents.length > 0 ? C.warn : C.ok],
+        ...buildStatusPill(incidents.length > 0 ? 'warn' : 'good', String(incidents.length)),
       ]),
     ];
 
     const attackPathLines: Line[] = [
       buildPanelLine(width, [
         ['  attack paths ', C.label],
-        [String(attackPathReview.criticalFindings), attackPathReview.criticalFindings > 0 ? C.error : C.ok],
+        ...buildStatusPill(attackPathReview.criticalFindings > 0 ? 'bad' : 'good', String(attackPathReview.criticalFindings)),
         [' critical ', C.label],
-        [String(attackPathReview.incoherentFindings), attackPathReview.incoherentFindings > 0 ? C.warn : C.ok],
+        ...buildStatusPill(attackPathReview.incoherentFindings > 0 ? 'warn' : 'good', String(attackPathReview.incoherentFindings)),
         [' review ', C.label],
         [attackPathReview.summary.slice(0, Math.max(0, width - 36)), C.dim],
       ]),

package/src/panels/services-panel.ts

@@ -11,6 +11,7 @@ import {
   buildEmptyState,
   buildPanelLine,
   buildPanelWorkspace,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
 
@@ -78,6 +79,7 @@ export class ServicesPanel extends ScrollableListPanel<ServicePanelEntry> {
     subscriptionManager: SubscriptionAccessQuery,
   ) {
     super('services', 'Services', 'V', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.registry = registry;
     this.subscriptionManager = subscriptionManager;
     void this.refresh();
@@ -188,16 +190,16 @@ export class ServicesPanel extends ScrollableListPanel<ServicePanelEntry> {
       ]));
       detailLines.push(buildPanelLine(width, [
         ['  Primary credential: ', C.label],
-        [inspect.hasPrimaryCredential ? 'present' : 'missing', inspect.hasPrimaryCredential ? C.ok : C.error],
+        ...buildStatusPill(inspect.hasPrimaryCredential ? 'good' : 'bad', inspect.hasPrimaryCredential ? 'present' : 'missing'),
         ['  Webhook URL: ', C.label],
-        [inspect.hasWebhookUrl ? 'present' : 'missing', inspect.hasWebhookUrl ? C.ok : C.dim],
+        ...buildStatusPill(inspect.hasWebhookUrl ? 'good' : 'info', inspect.hasWebhookUrl ? 'present' : 'missing'),
         ['  Signing secret: ', C.label],
-        [inspect.hasSigningSecret ? 'present' : 'missing', inspect.hasSigningSecret ? C.ok : C.dim],
+        ...buildStatusPill(inspect.hasSigningSecret ? 'good' : 'info', inspect.hasSigningSecret ? 'present' : 'missing'),
       ]));
       if (selected.lastTest) {
         detailLines.push(buildPanelLine(width, [
           ['  Last test: ', C.label],
-          [selected.lastTest.ok ? 'ok' : 'failed', selected.lastTest.ok ? C.ok : C.error],
+          ...buildStatusPill(selected.lastTest.ok ? 'good' : 'bad', selected.lastTest.ok ? 'ok' : 'failed'),
           ['  Status: ', C.label],
           [selected.lastTest.status != null ? String(selected.lastTest.status) : 'n/a', C.value],
           ['  URL: ', C.label],

package/src/panels/session-browser-panel.ts

@@ -26,6 +26,7 @@ import {
   isPanelSearchCommit,
   isPanelSearchPrintable,
 } from './search-focus.ts';
+import { type ConfirmState, handleConfirmInput } from './confirm-state.ts';
 
 const C = {
   headerBg:   '#1a1a2e',
@@ -79,7 +80,7 @@ function formatReturnContextLines(returnContext: SessionInfo['returnContext']):
 // ---------------------------------------------------------------------------
 // Confirmation state for deletion
 // ---------------------------------------------------------------------------
-type ConfirmState = { sessionName: string } | null;
+// ConfirmState<string> — subject holds the session name to delete
 
 export class SessionBrowserPanel extends BasePanel {
   private sessions: SessionInfo[] = [];
@@ -88,10 +89,10 @@ export class SessionBrowserPanel extends BasePanel {
   private searching = false; // true when user is actively typing a search
   private cursorIndex = 0;
   private scrollOffset = 0;
-  private confirm: ConfirmState = null;
+  private confirm: ConfirmState<string> | null = null;
   private deleteError = '';
   private loadError = '';
-  private refreshTimer: ReturnType<typeof setInterval> | null = null;
+  private refreshTimerId: ReturnType<typeof setInterval> | null = null;
 
   constructor(
     private readonly sessionManager: SessionBrowserQuery,
@@ -103,29 +104,29 @@ export class SessionBrowserPanel extends BasePanel {
   override onActivate(): void {
     super.onActivate();
     this._load();
-    this.refreshTimer = setInterval(() => { this._load(); }, 5000);
+    this.refreshTimerId = this.registerTimer(setInterval(() => { this._load(); }, 5000));
   }
 
   override onDeactivate(): void {
-    if (this.refreshTimer) { clearInterval(this.refreshTimer); this.refreshTimer = null; }
+    if (this.refreshTimerId !== null) { this.clearTimer(this.refreshTimerId); this.refreshTimerId = null; }
     this.searching = false;
     this.confirm = null;
     super.onDeactivate();
   }
 
   handleInput(key: string): boolean {
-    // Confirmation dialog
-    if (this.confirm) {
-      if (key === 'y') {
-        this._deleteConfirmed();
-        return true;
-      } else if (key === 'n' || key === 'escape') {
-        this.confirm = null;
-        this.markDirty();
-        return true;
-      }
+    // Confirmation dialog — use shared handleConfirmInput for y/n/Esc UX
+    const confirmResult = handleConfirmInput(this.confirm, key);
+    if (confirmResult === 'confirmed') {
+      this._deleteConfirmed();
+      return true;
+    }
+    if (confirmResult === 'cancelled') {
+      this.confirm = null;
+      this.markDirty();
       return true;
     }
+    if (confirmResult === 'absorbed') return true;
 
     // Search mode
     if (this.searching) {
@@ -200,7 +201,7 @@ export class SessionBrowserPanel extends BasePanel {
           {
             title: 'Confirmation',
             lines: [
-              buildPanelLine(width, [[` Delete "${this.confirm.sessionName}"?`, DEFAULT_PANEL_PALETTE.warn]]),
+              buildPanelLine(width, [[` Delete "${this.confirm.subject}"?`, DEFAULT_PANEL_PALETTE.warn]]),
               buildPanelLine(width, [[' y', DEFAULT_PANEL_PALETTE.info], ['  confirm delete', DEFAULT_PANEL_PALETTE.dim], ['   n / Esc', DEFAULT_PANEL_PALETTE.info], ['  cancel', DEFAULT_PANEL_PALETTE.dim]]),
             ],
           },
@@ -378,13 +379,13 @@ export class SessionBrowserPanel extends BasePanel {
   private _promptDelete(): void {
     const sess = this.filtered[this.cursorIndex];
     if (!sess) return;
-    this.confirm = { sessionName: sess.name };
+    this.confirm = { subject: sess.name, label: sess.name };
     this.markDirty();
   }
 
   private _deleteConfirmed(): void {
     if (!this.confirm) return;
-    const name = this.confirm.sessionName;
+    const name = this.confirm.subject;
     this.confirm = null;
     try {
       this.sessionManager.delete(name);

package/src/panels/settings-sync-panel.ts

@@ -5,6 +5,7 @@ import {
   buildGuidanceLine,
   buildPanelListRow,
   buildPanelLine,
+  buildStatusPill,
   buildSummaryBlock,
   DEFAULT_PANEL_PALETTE,
   type PanelPalette,
@@ -26,6 +27,7 @@ type ResolvedEntry = ReturnType<typeof getSettingsControlPlaneSnapshot>['resolve
 export class SettingsSyncPanel extends ScrollableListPanel<ResolvedEntry> {
   public constructor(private readonly configManager: ConfigManager) {
     super('settings-sync', 'Settings Sync', 'S', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
   }
 
   protected override getPalette(): PanelPalette {
@@ -52,7 +54,7 @@ export class SettingsSyncPanel extends ScrollableListPanel<ResolvedEntry> {
     const snapshot = getSettingsControlPlaneSnapshot(this.configManager);
 
     const postureLines: Line[] = [
-      buildPanelLine(width, [[' resolved keys ', C.label], [String(snapshot.resolvedEntries.length), C.value], ['  conflicts ', C.label], [String(snapshot.conflicts.length), snapshot.conflicts.length > 0 ? C.error : C.good], ['  failures ', C.label], [String(snapshot.recentFailures.length), snapshot.recentFailures.length > 0 ? C.warn : C.good]]),
+      buildPanelLine(width, [[' resolved keys ', C.label], [String(snapshot.resolvedEntries.length), C.value], ['  conflicts ', C.label], ...buildStatusPill(snapshot.conflicts.length > 0 ? 'bad' : 'good', String(snapshot.conflicts.length)), ['  failures ', C.label], ...buildStatusPill(snapshot.recentFailures.length > 0 ? 'warn' : 'good', String(snapshot.recentFailures.length))]),
       buildPanelLine(width, [[' managed locks ', C.label], [String(snapshot.managedLockCount), snapshot.managedLockCount > 0 ? C.warn : C.dim], ['  staged bundle ', C.label], [snapshot.stagedManagedBundle ? snapshot.stagedManagedBundle.profileName : 'none', snapshot.stagedManagedBundle ? C.info : C.dim]]),
       buildGuidanceLine(width, '/settingssync conflicts', 'review conflicting synced values before they silently shape effective configuration', C),
       buildGuidanceLine(width, '/managed review', 'inspect staged managed changes, risk posture, and rollback records', C),