@pellux/goodvibes-tui 0.18.19 → 0.18.20

package/CHANGELOG.md

@@ -4,6 +4,56 @@ All notable changes to GoodVibes TUI.
 
 ---
 
+## [0.18.20] — 2026-04-16
+
+### Wave 3a / Tier 2 TUI UX Consistency Infrastructure
+
+Six infrastructure items that make the TUI behave consistently across all panels.
+
+### I1 — Reusable inline confirm dialog
+
+- **New file `src/panels/confirm-state.ts`**: exports `ConfirmState<T>`, `handleConfirmInput<T>`, and `renderConfirmLines<T>`. Identical y/n UX across all panels: y confirms, n/Esc cancels, any other key is absorbed while confirm is active.
+- **SkillsPanel**: 'd' key now shows an inline `Confirmation` section before surfacing the shell delete hint. Pressing Esc on the confirm panel cancels it via the generic helper.
+- **KnowledgePanel**: 's' (stale) and 'c' (contradicted) now prompt confirm before calling `registry.review()`. Error from review mutation is surfaced via I2 `setError()`.
+- **SubscriptionPanel**: 'n' and Escape now cancel a pending logout confirmation via the confirm helper.
+
+### I2 — Error surface slot on BasePanel
+
+- **`src/panels/base-panel.ts`**: added `protected lastError`, `setError()`, `clearError()`, `renderErrorLine(width)`. Auto-clear on next keypress in `ScrollableListPanel.handleInput()`.
+- **`src/panels/scrollable-list-panel.ts`**: `renderList()` prepends the error line to the `effectiveFooter` — visible in both normal and empty states.
+- **MarketplacePanel**: `refresh()` now wraps catalog load in try/catch and calls `setError()` on failure. Clears error on successful reload.
+- **KnowledgePanel**: `registry.review()` call in confirm dispatch wrapped in try/catch, wired to `setError()`.
+
+### I3 — Loading spinner slot on BasePanel
+
+- **`src/panels/base-panel.ts`**: added `loadingState: 'idle'|'loading'|'error'`, `startLoading(label?)`, `stopLoading()`, `renderLoadingLine(width, frame)`. Uses `SPINNER_FRAMES` from `src/renderer/progress.ts`.
+- **`src/panels/scrollable-list-panel.ts`**: `renderList()` short-circuits to a spinner-only view when `loadingState === 'loading'`.
+- **GitPanel**: `openDiff()` now calls `startLoading('Loading diff...')` before the await and `stopLoading()` in both success and error paths. The `render()` method checks `this.loadingState === 'loading'` to show the spinner while the diff is being fetched.
+
+### I4 — Accessible status tokens
+
+- **New file `src/renderer/status-token.ts`**: exports `buildStatusToken(state, label, opts?)` → `Cell[]`. State map: `good=✓`, `warn=⚠`, `bad=✕`, `info=○`. Glyph + color together so colorblind users can distinguish states without relying on color alone.
+- **ApprovalPanel**: recent approvals/denials/pending row now uses inline `✓ approvals (N)  ✕ denials (N)  ○ pending (N)` cells instead of bare color-only counts.
+
+### I6 — Two-stage Escape in panel focus
+
+- **`src/input/handler-feed-routes.ts`**: `handlePanelFocusToken()` now passes `'escape'` to the active panel's `handleInput()` BEFORE deciding to unfocus. If the panel returns `true` (e.g. dismisses a confirm dialog or clears a search), the panel stays focused. Only if the panel returns `false` does the router set `panelFocused = false`.
+
+### Tests
+
+- **`src/test/renderer/status-token.test.ts`** (8 tests): glyph/color/count/override coverage for `buildStatusToken`.
+- **`src/test/panels/base-panel-ux.test.ts`** (16 tests): `setError`/`clearError`/`renderErrorLine` and `startLoading`/`stopLoading`/`renderLoadingLine` state transitions.
+- **`src/test/panels/confirm-state.test.ts`** (13 tests): `handleConfirmInput` all four return values + `renderConfirmLines` width/content.
+- **`src/test/panels/knowledge-panel.test.ts`**: updated to reflect I1 two-step confirm for `'s'` (stale) action.
+
+### Tests & Checks
+
+- Test suite: 441/441 passing (3 new test files)
+- Architecture check: passing (298 non-test source files)
+- Typecheck: clean
+
+---
+
 ## [0.18.19] — 2026-04-16
 
 ### Quality bump — address sub-10 dimensions from 0.18.18 review

package/README.md

@@ -2,7 +2,7 @@
 
 [![CI](https://github.com/mgd34msu/goodvibes-tui/actions/workflows/ci.yml/badge.svg)](https://github.com/mgd34msu/goodvibes-tui/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Version](https://img.shields.io/badge/version-0.18.19-blue.svg)](https://github.com/mgd34msu/goodvibes-tui)
+[![Version](https://img.shields.io/badge/version-0.18.20-blue.svg)](https://github.com/mgd34msu/goodvibes-tui)
 
 A terminal-native AI coding, operations, automation, knowledge, and integration console with a typed runtime, omnichannel surfaces, structured memory/knowledge, and a raw ANSI renderer.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pellux/goodvibes-tui",
-  "version": "0.18.19",
+  "version": "0.18.20",
   "description": "Terminal-native GoodVibes product for coding, operations, automation, knowledge, channels, and daemon-backed control-plane workflows.",
   "type": "module",
   "main": "src/main.ts",

package/src/input/handler-feed-routes.ts

@@ -54,7 +54,17 @@ export function handlePanelFocusToken(state: PanelFocusRouteState, token: InputT
   }
 
   if (token.type === 'key') {
+    // I6: two-stage Escape — give the panel a chance to consume escape first
+    // (e.g. dismiss a confirm dialog or clear search). Only unfocus if the
+    // panel returns false (unconsumed) or there is no active panel.
     if (token.logicalName === 'escape') {
+      const activePanel = state.panelManager.getActive();
+      const panelConsumedEscape = activePanel?.handleInput?.('escape') ?? false;
+      if (panelConsumedEscape) {
+        state.onPanelInputConsumed?.(activePanel!, 'escape');
+        state.requestRender();
+        return { handled: true, panelFocused };
+      }
       panelFocused = false;
       state.requestRender();
       return { handled: true, panelFocused };

package/src/panels/approval-panel.ts

@@ -81,11 +81,19 @@ export class ApprovalPanel extends BasePanel {
         { label: 'what-if', value: '/policy simulate + preflight', valueColor: C.info },
         { label: 'operator', value: '/security + /cockpit', valueColor: C.good },
       ], C),
-      buildKeyValueLine(width, [
-        { label: 'recent approvals', value: String(policySnapshot.recentPermissionAudit.filter((entry) => entry.approved === true).length), valueColor: C.good },
-        { label: 'recent denials', value: String(policySnapshot.recentPermissionAudit.filter((entry) => entry.approved === false).length), valueColor: C.bad },
-        { label: 'pending', value: String(policySnapshot.recentPermissionAudit.filter((entry) => entry.approved === undefined).length), valueColor: C.info },
-      ], C),
+      (() => {
+        const approvalCount = policySnapshot.recentPermissionAudit.filter((entry) => entry.approved === true).length;
+        const denialCount = policySnapshot.recentPermissionAudit.filter((entry) => entry.approved === false).length;
+        const pendingCount = policySnapshot.recentPermissionAudit.filter((entry) => entry.approved === undefined).length;
+        return buildPanelLine(width, [
+          ['  \u2713 ', C.good],
+          [`approvals (${approvalCount})  `, C.good],
+          ['\u2715 ', C.bad],
+          [`denials (${denialCount})  `, C.bad],
+          ['\u25cb ', C.info],
+          [`pending (${pendingCount})`, C.info],
+        ]);
+      })(),
       buildGuidanceLine(width, '/approval review shell', 'inspect the highest-risk approval lane and refine scoped review posture', C),
     ];
     const footerLines = [buildPanelLine(width, [[`  Up/Down move  Home/End jump  selected lane opens the next command path`, C.dim]])];

package/src/panels/base-panel.ts

@@ -2,6 +2,8 @@ import type { Line } from '../types/grid.ts';
 import type { Panel, PanelCategory } from './types.ts';
 import type { ComponentResourceContract, ComponentHealthState } from '../runtime/perf/panel-contracts.ts';
 import type { ComponentHealthMonitor } from '../runtime/perf/panel-health-monitor.ts';
+import { UIFactory } from '../renderer/ui-factory.ts';
+import { SPINNER_FRAMES } from '../renderer/progress.ts';
 
 export abstract class BasePanel implements Panel {
   public needsRender = true;
@@ -9,6 +11,75 @@ export abstract class BasePanel implements Panel {
   public isPinned = false;
   protected readonly componentHealthMonitor?: ComponentHealthMonitor;
 
+  // -------------------------------------------------------------------------
+  // I2: Error surface slot
+  // -------------------------------------------------------------------------
+
+  /** Last error message to surface in the panel footer. Auto-cleared on next input. */
+  protected lastError: string | null = null;
+
+  /** Set a transient error message. Triggers a re-render. */
+  protected setError(msg: string): void {
+    this.lastError = msg;
+    this.needsRender = true;
+  }
+
+  /** Clear the current error. */
+  protected clearError(): void {
+    this.lastError = null;
+  }
+
+  /**
+   * Build a single error Line for display above the hints footer.
+   * Returns null when there is no active error.
+   *
+   * Color: bold red foreground (palette-consistent: #ef4444).
+   */
+  protected renderErrorLine(width: number): Line | null {
+    if (!this.lastError) return null;
+    return UIFactory.stringToLine(
+      ` ✕ ${this.lastError}`.padEnd(width).slice(0, width),
+      width,
+      { fg: '#ef4444', bold: true },
+    );
+  }
+
+  // -------------------------------------------------------------------------
+  // I3: Loading spinner slot
+  // -------------------------------------------------------------------------
+
+  /** Tracks the loading label for the spinner (undefined = no spinner active). */
+  protected loadingState: 'idle' | 'loading' | 'error' = 'idle';
+  private _loadingLabel = '';
+
+  /** Begin loading. Triggers a re-render. */
+  protected startLoading(label = 'Loading...'): void {
+    this.loadingState = 'loading';
+    this._loadingLabel = label;
+    this.needsRender = true;
+  }
+
+  /** End loading (returns to idle). Triggers a re-render. */
+  protected stopLoading(): void {
+    this.loadingState = 'idle';
+    this._loadingLabel = '';
+    this.needsRender = true;
+  }
+
+  /**
+   * Build a spinner Line for the loading state.
+   * Returns null when loadingState is not 'loading'.
+   *
+   * @param width  Panel width in columns.
+   * @param frame  Current animation frame index (caller increments each render).
+   */
+  protected renderLoadingLine(width: number, frame = 0): Line | null {
+    if (this.loadingState !== 'loading') return null;
+    const spinner = SPINNER_FRAMES[frame % SPINNER_FRAMES.length] ?? SPINNER_FRAMES[0]!;
+    const text = ` ${spinner} ${this._loadingLabel}`;
+    return UIFactory.stringToLine(text.padEnd(width).slice(0, width), width, { fg: '135', bold: true });
+  }
+
   /**
    * Optional resource contract for this panel.
    * Override in subclasses to declare a custom contract; leave undefined

package/src/panels/confirm-state.ts

@@ -0,0 +1,61 @@
+// ---------------------------------------------------------------------------
+// useConfirmState<T> — reusable inline y/n confirmation helper
+//
+// Pattern (chosen over ConfirmableListPanel base class):
+//   - Composable: any panel holds a ConfirmState field, not a new base class
+//   - Identical y/n UX everywhere: y confirms, n/Esc cancels, any other key
+//     is absorbed (does nothing) while confirm is active
+//   - Render: caller calls renderConfirmLines(width, state) to get the two
+//     lines that replace the normal content area when confirming
+// ---------------------------------------------------------------------------
+
+import type { Line } from '../types/grid.ts';
+import { buildPanelLine } from './polish.ts';
+import { DEFAULT_PANEL_PALETTE } from './polish.ts';
+
+export interface ConfirmState<T = string> {
+  /** The subject of the confirmation (e.g. item name or id). */
+  readonly subject: T;
+  /** Human-readable label for the item being destroyed. */
+  readonly label: string;
+}
+
+/**
+ * Call this from a panel's handleInput() BEFORE any other key handling.
+ *
+ * Returns:
+ *   - `'confirmed'` — user pressed y; caller must execute the action and
+ *     clear state (set confirm to null)
+ *   - `'cancelled'` — user pressed n or Esc; caller must clear state
+ *   - `'absorbed'`  — any other key while confirm is active; caller returns true
+ *   - `'inactive'`  — no confirm pending; caller continues normal dispatch
+ */
+export function handleConfirmInput<T = string>(
+  confirm: ConfirmState<T> | null,
+  key: string,
+): 'confirmed' | 'cancelled' | 'absorbed' | 'inactive' {
+  if (!confirm) return 'inactive';
+  if (key === 'y') return 'confirmed';
+  if (key === 'n' || key === 'escape') return 'cancelled';
+  return 'absorbed';
+}
+
+/**
+ * Build the two confirmation lines to show in place of the normal list body.
+ * Callers embed these lines in a workspace section titled 'Confirmation'.
+ */
+export function renderConfirmLines<T = string>(width: number, state: ConfirmState<T>): Line[] {
+  const palette = DEFAULT_PANEL_PALETTE;
+  return [
+    buildPanelLine(width, [[
+      ` Delete "${state.label}"?`,
+      palette.warn,
+    ]]),
+    buildPanelLine(width, [
+      [' y', palette.info],
+      ['  confirm delete', palette.dim],
+      ['   n / Esc', palette.info],
+      ['  cancel', palette.dim],
+    ]),
+  ];
+}

package/src/panels/git-panel.ts

@@ -326,13 +326,18 @@ export class GitPanel extends BasePanel {
     const item = this.items[this.selectedIndex];
     if (!item || item.kind !== 'file') return;
 
+    // I3: show base-class spinner while awaiting diff
+    this.startLoading('Loading diff...');
+    this.markDirty();
     try {
       const git = new GitService(this.workingDirectory);
       const raw = await git.diffFile(item.entry.path, item.entry.staged);
+      this.stopLoading();
       this.expandedDiff = raw ? raw.split('\n') : ['(no diff available)'];
       this.scrollOffset = 0;
       this.markDirty();
     } catch (err) {
+      this.stopLoading();
       this.expandedDiff = [`Error: ${summarizeError(err)}`];
       this.scrollOffset = 0;
       this.markDirty();
@@ -350,6 +355,10 @@ export class GitPanel extends BasePanel {
     if (this.error) {
       return this.renderMessage(width, height, `Git error: ${this.error}`, C.unstaged);
     }
+    // I3: spinner during openDiff() async fetch
+    if (this.loadingState === 'loading') {
+      return this.renderMessage(width, height, 'Loading diff...', C.branch);
+    }
     if (this.expandedDiff !== null) {
       return this.renderDiff(width, height);
     }

package/src/panels/knowledge-panel.ts

@@ -1,5 +1,6 @@
 import type { Line } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
+import { type ConfirmState, handleConfirmInput, renderConfirmLines } from './confirm-state.ts';
 import type { MemoryClass, MemoryRecord, MemoryRegistry, MemoryReviewState } from '@pellux/goodvibes-sdk/platform/state/memory-store';
 import {
   buildBodyText,
@@ -47,6 +48,8 @@ export class KnowledgePanel extends BasePanel {
   private selectedIndex = 0;
   private scrollOffset = 0;
   private records: MemoryRecord[] = [];
+  // I1: confirm for destructive review-state mutations
+  private confirm: ConfirmState<{ id: string; action: 'stale' | 'contradicted' }> | null = null;
 
   public constructor(registry: MemoryRegistry) {
     super('knowledge', 'Knowledge', 'K', 'agent');
@@ -72,6 +75,50 @@ export class KnowledgePanel extends BasePanel {
   }
 
   public handleInput(key: string): boolean {
+    // I1: y/n confirm for stale/contradict
+    if (this.confirm) {
+      const result = handleConfirmInput(this.confirm, key);
+      if (result === 'confirmed') {
+        const { id, action } = this.confirm.subject;
+        this.confirm = null;
+        const selected = this.records.find((r) => r.id === id);
+        if (selected) {
+          try {
+            if (action === 'stale') {
+              this.registry.review(id, {
+                state: 'stale',
+                confidence: Math.min(selected.confidence, 40),
+                reviewedBy: 'operator',
+                staleReason: 'marked stale from the knowledge panel',
+              });
+            } else {
+              this.registry.review(id, {
+                state: 'contradicted',
+                confidence: 0,
+                reviewedBy: 'operator',
+                staleReason: 'marked contradicted from the knowledge panel',
+              });
+            }
+          } catch (e) {
+            // I2: surface async failure
+            this.setError(`Review update failed: ${e instanceof Error ? e.message : String(e)}`);
+          }
+        }
+        this.refresh();
+        this.markDirty();
+        return true;
+      }
+      if (result === 'cancelled') {
+        this.confirm = null;
+        this.markDirty();
+        return true;
+      }
+      if (result === 'absorbed') return true;
+    }
+
+    // I2: auto-clear error on next keypress
+    if (this.lastError) this.clearError();
+
     if (this.records.length === 0) return false;
     if (key === 'ArrowUp' || key === 'k') {
       this.selectedIndex = Math.max(0, this.selectedIndex - 1);
@@ -98,24 +145,14 @@ export class KnowledgePanel extends BasePanel {
       return true;
     }
     if (key === 's') {
-      this.registry.review(selected.id, {
-        state: 'stale',
-        confidence: Math.min(selected.confidence, 40),
-        reviewedBy: 'operator',
-        staleReason: 'marked stale from the knowledge panel',
-      });
-      this.refresh();
+      // I1: prompt confirm before marking stale
+      this.confirm = { subject: { id: selected.id, action: 'stale' }, label: selected.summary.slice(0, 40) };
       this.markDirty();
       return true;
     }
     if (key === 'c') {
-      this.registry.review(selected.id, {
-        state: 'contradicted',
-        confidence: 0,
-        reviewedBy: 'operator',
-        staleReason: 'marked contradicted from the knowledge panel',
-      });
-      this.refresh();
+      // I1: prompt confirm before marking contradicted
+      this.confirm = { subject: { id: selected.id, action: 'contradicted' }, label: selected.summary.slice(0, 40) };
       this.markDirty();
       return true;
     }
@@ -141,6 +178,18 @@ export class KnowledgePanel extends BasePanel {
 
   public render(width: number, height: number): Line[] {
     this.needsRender = false;
+
+    // I1: show confirm dialog in place of normal content
+    if (this.confirm) {
+      return buildPanelWorkspace(width, height, {
+        title: 'Knowledge Control Room',
+        intro: '',
+        sections: [{ title: 'Confirmation', lines: renderConfirmLines(width, this.confirm) }],
+        footerLines: [buildPanelLine(width, [['  y confirm  n / Esc cancel', C.dim]])],
+        palette: C,
+      });
+    }
+
     if (this.records.length === 0) this.refresh();
 
     const intro = 'Typed project knowledge, reviewed evidence, and operator-governed memory across session, project, and team scopes.';

package/src/panels/marketplace-panel.ts

@@ -81,18 +81,25 @@ export class MarketplacePanel extends BasePanel {
       this.scrollOffset = 0;
       return;
     }
-    const installedPlugins = new Set(listInstalledEcosystemEntries('plugin', this.ecosystemPaths).map((receipt) => receipt.entry.id));
-    const installedSkills = new Set(listInstalledEcosystemEntries('skill', this.ecosystemPaths).map((receipt) => receipt.entry.id));
-    const installedHookPacks = new Set(listInstalledEcosystemEntries('hook-pack', this.ecosystemPaths).map((receipt) => receipt.entry.id));
-    const installedPolicyPacks = new Set(listInstalledEcosystemEntries('policy-pack', this.ecosystemPaths).map((receipt) => receipt.entry.id));
-    const rows: MarketplaceRow[] = [
-      ...loadEcosystemCatalog('plugin', this.ecosystemPaths).map((entry) => ({ kind: 'plugin' as const, entry, installed: installedPlugins.has(entry.id) })),
-      ...loadEcosystemCatalog('skill', this.ecosystemPaths).map((entry) => ({ kind: 'skill' as const, entry, installed: installedSkills.has(entry.id) })),
-      ...loadEcosystemCatalog('hook-pack', this.ecosystemPaths).map((entry) => ({ kind: 'hook-pack' as const, entry, installed: installedHookPacks.has(entry.id) })),
-      ...loadEcosystemCatalog('policy-pack', this.ecosystemPaths).map((entry) => ({ kind: 'policy-pack' as const, entry, installed: installedPolicyPacks.has(entry.id) })),
-    ];
-    this.rows = rows.sort((a, b) => a.entry.name.localeCompare(b.entry.name));
-    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.rows.length - 1));
+    try {
+      const installedPlugins = new Set(listInstalledEcosystemEntries('plugin', this.ecosystemPaths).map((receipt) => receipt.entry.id));
+      const installedSkills = new Set(listInstalledEcosystemEntries('skill', this.ecosystemPaths).map((receipt) => receipt.entry.id));
+      const installedHookPacks = new Set(listInstalledEcosystemEntries('hook-pack', this.ecosystemPaths).map((receipt) => receipt.entry.id));
+      const installedPolicyPacks = new Set(listInstalledEcosystemEntries('policy-pack', this.ecosystemPaths).map((receipt) => receipt.entry.id));
+      const rows: MarketplaceRow[] = [
+        ...loadEcosystemCatalog('plugin', this.ecosystemPaths).map((entry) => ({ kind: 'plugin' as const, entry, installed: installedPlugins.has(entry.id) })),
+        ...loadEcosystemCatalog('skill', this.ecosystemPaths).map((entry) => ({ kind: 'skill' as const, entry, installed: installedSkills.has(entry.id) })),
+        ...loadEcosystemCatalog('hook-pack', this.ecosystemPaths).map((entry) => ({ kind: 'hook-pack' as const, entry, installed: installedHookPacks.has(entry.id) })),
+        ...loadEcosystemCatalog('policy-pack', this.ecosystemPaths).map((entry) => ({ kind: 'policy-pack' as const, entry, installed: installedPolicyPacks.has(entry.id) })),
+      ];
+      this.rows = rows.sort((a, b) => a.entry.name.localeCompare(b.entry.name));
+      this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.rows.length - 1));
+      // I2: clear any previous catalog load error on successful refresh
+      this.clearError();
+    } catch (e) {
+      // I2: surface catalog load failure
+      this.setError(`Catalog load failed: ${e instanceof Error ? e.message : String(e)}`);
+    }
   }
 
   public render(width: number, height: number): Line[] {

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

@@ -115,6 +115,9 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
   // -------------------------------------------------------------------------
 
   handleInput(key: string): boolean {
+    // I2: auto-clear error on next keypress
+    if (this.lastError) this.clearError();
+
     const items = this.getItems();
     const total = items.length;
 
@@ -205,6 +208,7 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
    * @param options.footer  Lines appended as the last workspace section.
    * @param options.emptyMessage  Override for the empty-state title text.
    * @param options.title  Workspace title (defaults to `this.name`).
+   * @param options.spinnerFrame  Animation frame for the loading spinner.
    */
   protected renderList(
     width: number,
@@ -214,6 +218,7 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
       readonly footer?: readonly Line[];
       readonly emptyMessage?: string;
       readonly title?: string;
+      readonly spinnerFrame?: number;
     } = {},
   ): Line[] {
     this.needsRender = false;
@@ -221,6 +226,25 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
     const items = this.getItems();
     const title = options.title ?? this.name;
 
+    // I2: inject error line into footer when present
+    const errorLine = this.renderErrorLine(width);
+    const baseFooter = options.footer ? [...options.footer as Line[]] : [];
+    const effectiveFooter: Line[] = errorLine ? [errorLine, ...baseFooter] : baseFooter;
+
+    // I3: if loading, show spinner in place of normal content
+    const spinnerLine = this.renderLoadingLine(width, options.spinnerFrame ?? 0);
+    if (spinnerLine) {
+      const loadingSection = { lines: [spinnerLine] };
+      const headerSection = options.header ? [{ lines: options.header as Line[] }] : [];
+      const lines = buildPanelWorkspace(width, height, {
+        title,
+        sections: [...headerSection, loadingSection],
+        palette,
+      });
+      while (lines.length < height) lines.push(createEmptyLine(width));
+      return lines.slice(0, height);
+    }
+
     // Build all item lines (pre-render for resolveScrollablePanelSection)
     const scrollableLines: Line[] = items.map((item, index) =>
       this.renderItem(item, index, index === this.selectedIndex, width),
@@ -240,7 +264,7 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
         sections: [
           ...(options.header ? [{ lines: options.header as Line[] }] : []),
           { lines: emptyLines },
-          ...(options.footer ? [{ lines: options.footer as Line[] }] : []),
+          ...(effectiveFooter.length > 0 ? [{ lines: effectiveFooter }] : []),
         ],
         palette,
       });
@@ -250,7 +274,7 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
 
     // Resolve scrollable section (updates scrollStart)
     const beforeSections = options.header ? [{ lines: options.header as Line[] }] : [];
-    const afterSections = options.footer ? [{ lines: options.footer as Line[] }] : [];
+    const afterSections = effectiveFooter.length > 0 ? [{ lines: effectiveFooter }] : [];
 
     const resolved = resolveScrollablePanelSection(width, height, {
       palette,

package/src/panels/skills-panel.ts

@@ -2,6 +2,7 @@ import { existsSync, readdirSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
+import { type ConfirmState, handleConfirmInput, renderConfirmLines } from './confirm-state.ts';
 import { getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
 import { BasePanel } from './base-panel.ts';
 import type { ComponentHealthMonitor } from '../runtime/perf/panel-health-monitor.ts';
@@ -241,6 +242,8 @@ export class SkillsPanel extends BasePanel {
   private scrollOffset = 0;
   private cached: SkillRecord[] | null = null;
   private cacheDirty = true;
+  // I1: confirm state for destructive delete
+  private confirm: ConfirmState | null = null;
 
   public constructor(options: SkillsPanelOptions) {
     super('skills', 'Skills', 'K', 'monitoring', options.componentHealthMonitor);
@@ -259,6 +262,24 @@ export class SkillsPanel extends BasePanel {
   public override onDestroy(): void {}
 
   public handleInput(key: string): boolean {
+    // I1: y/n confirmation dialog for delete
+    const confirmResult = handleConfirmInput(this.confirm, key);
+    if (confirmResult === 'confirmed') {
+      const toDelete = this.confirm!.subject;
+      this.confirm = null;
+      // Skills are read from the filesystem — deletion requires a shell command.
+      // Surface an error directing the user to remove the file manually.
+      this.setError(`Delete via shell: rm "${toDelete}"`);
+      this.markDirty();
+      return true;
+    }
+    if (confirmResult === 'cancelled') {
+      this.confirm = null;
+      this.markDirty();
+      return true;
+    }
+    if (confirmResult === 'absorbed') return true;
+
     const records = this._filteredSkills();
     if (this.filterFocused) {
       const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.selectedIndex, itemCount: records.length });
@@ -329,6 +350,15 @@ export class SkillsPanel extends BasePanel {
       this.markDirty();
       return true;
     }
+    // I1: 'd' prompts delete confirmation
+    if (key === 'd') {
+      const skill = records[this.selectedIndex];
+      if (skill) {
+        this.confirm = { subject: skill.path, label: skill.name };
+        this.markDirty();
+      }
+      return true;
+    }
     if (isPanelSearchBackspace(key)) {
       if (this.query.length === 0) return false;
       this.query = this.query.slice(0, -1);
@@ -355,6 +385,20 @@ export class SkillsPanel extends BasePanel {
 
     const start = Date.now();
     this.needsRender = false;
+
+    // I1: show confirm dialog in place of normal content
+    if (this.confirm) {
+      const lines = buildPanelWorkspace(width, height, {
+        title: 'Skills - confirm action',
+        intro: '',
+        sections: [{ title: 'Confirmation', lines: renderConfirmLines(width, this.confirm) }],
+        palette: C,
+      });
+      while (lines.length < height) lines.push(createEmptyLine(width));
+      this.reportRenderDuration(Date.now() - start);
+      return lines.slice(0, height);
+    }
+
     const intro = 'Discover project-local and global skill packs, filter by name or description, and inspect path, dependencies, and includes.';
     const skills = this._filteredSkills();
 

package/src/panels/subscription-panel.ts

@@ -1,6 +1,7 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
+import { handleConfirmInput, renderConfirmLines } from './confirm-state.ts';
 import type { ProviderSubscription, PendingSubscriptionLogin } from '@pellux/goodvibes-sdk/platform/config/subscriptions';
 import { listBuiltinSubscriptionProviders } from '@pellux/goodvibes-sdk/platform/config/subscription-providers';
 import type { ServiceInspectionQuery, SubscriptionAccessQuery } from '../runtime/ui-service-queries.ts';
@@ -95,7 +96,12 @@ export class SubscriptionPanel extends BasePanel {
     }
     if (key === 'enter' || key === 'x') {
       if (!selected?.subscription) return false;
-      if (this.logoutConfirmationTarget !== selected.provider) {
+      // I1: use confirm helper — first press sets target, second (y) executes
+      const confirmResult = handleConfirmInput(
+        this.logoutConfirmationTarget ? { subject: this.logoutConfirmationTarget, label: this.logoutConfirmationTarget } : null,
+        key,
+      );
+      if (this.logoutConfirmationTarget === null || this.logoutConfirmationTarget !== selected.provider) {
         this.logoutConfirmationTarget = selected.provider;
         this.markDirty();
         return true;
@@ -106,6 +112,12 @@ export class SubscriptionPanel extends BasePanel {
       this.markDirty();
       return true;
     }
+    // Allow n/Esc to cancel pending logout confirm
+    if ((key === 'n' || key === 'escape') && this.logoutConfirmationTarget) {
+      this.logoutConfirmationTarget = null;
+      this.markDirty();
+      return true;
+    }
     if (key === 'r') {
       this.refresh();
       this.logoutConfirmationTarget = null;

package/src/renderer/status-token.ts

@@ -0,0 +1,71 @@
+// ---------------------------------------------------------------------------
+// buildStatusToken — always glyph + color, never color-only.
+//
+// Maps a semantic state to a Unicode glyph AND a palette color so that
+// colorblind users and screen readers can distinguish states without color.
+//
+// Glyphs:
+//   good  ✓  (CHECK MARK)
+//   warn  ⚠  (WARNING SIGN)
+//   bad   ✕  (MULTIPLICATION X)
+//   info  ○  (WHITE CIRCLE)
+// ---------------------------------------------------------------------------
+
+import type { Cell } from '../types/grid.ts';
+import { DEFAULT_PANEL_PALETTE } from '../panels/polish.ts';
+
+export type StatusState = 'good' | 'warn' | 'bad' | 'info';
+
+const STATE_GLYPHS: Record<StatusState, string> = {
+  good: '\u2713', // ✓
+  warn: '\u26a0', // ⚠
+  bad:  '\u2715', // ✕
+  info: '\u25cb', // ○
+};
+
+const STATE_COLORS: Record<StatusState, string> = {
+  good: DEFAULT_PANEL_PALETTE.good,
+  warn: DEFAULT_PANEL_PALETTE.warn,
+  bad:  DEFAULT_PANEL_PALETTE.bad,
+  info: DEFAULT_PANEL_PALETTE.info,
+};
+
+export interface StatusTokenOpts {
+  /** Append a numeric count after the label, e.g. "label (3)". */
+  count?: number;
+  /** Override the default glyph for this state. */
+  glyph?: string;
+}
+
+/**
+ * Build a small sequence of styled cells: [glyph, space, label, optional count]
+ *
+ * Always prepends the glyph so colorblind users can parse the state.
+ * The color is applied to both glyph and label as a redundant cue.
+ *
+ * @param state   Semantic state — controls default glyph and color.
+ * @param label   Human-readable label string.
+ * @param opts    Optional count suffix or glyph override.
+ * @returns       Array of Cell objects ready to embed in a Line.
+ */
+export function buildStatusToken(
+  state: StatusState,
+  label: string,
+  opts?: StatusTokenOpts,
+): Cell[] {
+  const glyph = opts?.glyph ?? STATE_GLYPHS[state];
+  const color = STATE_COLORS[state];
+  const suffix = opts?.count !== undefined ? ` (${opts.count})` : '';
+  const text = `${glyph} ${label}${suffix}`;
+
+  return text.split('').map((char): Cell => ({
+    char,
+    fg: color,
+    bg: '',
+    bold: false,
+    dim: false,
+    underline: false,
+    italic: false,
+    strikethrough: false,
+  }));
+}

package/src/version.ts

@@ -6,7 +6,7 @@ import { join } from 'node:path';
 // The prebuild script updates the fallback value before compilation.
 // Uses import.meta.dir (Bun) to locate package.json relative to this file,
 // which is correct regardless of the process working directory.
-let _version = '0.18.19';
+let _version = '0.18.20';
 try {
   const pkg = JSON.parse(readFileSync(join(import.meta.dir, '..', 'package.json'), 'utf-8'));
   _version = pkg.version ?? _version;