@pellux/goodvibes-tui 0.18.19 → 0.18.23

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

@@ -1,16 +1,13 @@
 import type { Line } from '../types/grid.ts';
-import { createEmptyLine } from '../types/grid.ts';
-import { BasePanel } from './base-panel.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import {
   buildDetailBlock,
   buildGuidanceLine,
   buildPanelListRow,
   buildPanelLine,
-  buildPanelWorkspace,
   buildSummaryBlock,
   DEFAULT_PANEL_PALETTE,
-  resolvePrimaryScrollableSection,
-  type PanelWorkspaceSection,
+  type PanelPalette,
 } from './polish.ts';
 import { getSettingsControlPlaneSnapshot } from '@pellux/goodvibes-sdk/platform/runtime/settings/control-plane';
 import type { ConfigManager } from '../config/index.ts';
@@ -24,141 +21,98 @@ const C = {
   error: '#ef4444',
 } as const;
 
-export class SettingsSyncPanel extends BasePanel {
-  private selectedIndex = 0;
-  private scrollOffset = 0;
+type ResolvedEntry = ReturnType<typeof getSettingsControlPlaneSnapshot>['resolvedEntries'][number];
 
+export class SettingsSyncPanel extends ScrollableListPanel<ResolvedEntry> {
   public constructor(private readonly configManager: ConfigManager) {
     super('settings-sync', 'Settings Sync', 'S', 'monitoring');
   }
 
-  public handleInput(key: string): boolean {
-    const total = getSettingsControlPlaneSnapshot(this.configManager).resolvedEntries.length;
-    if (total <= 0) return false;
-    if (key === 'up' || key === 'k') {
-      this.selectedIndex = Math.max(0, this.selectedIndex - 1);
-      this.markDirty();
-      return true;
-    }
-    if (key === 'down' || key === 'j') {
-      this.selectedIndex = Math.min(total - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    return false;
+  protected override getPalette(): PanelPalette {
+    return C;
+  }
+
+  protected getItems(): readonly ResolvedEntry[] {
+    return getSettingsControlPlaneSnapshot(this.configManager).resolvedEntries;
+  }
+
+  protected renderItem(entry: ResolvedEntry, _index: number, selected: boolean, width: number): Line {
+    return buildPanelListRow(width, [
+      { text: entry.key.padEnd(32), fg: C.value },
+      { text: ` ${entry.effectiveSource}`.padEnd(11), fg: entry.effectiveSource === 'managed' ? C.warn : entry.effectiveSource === 'synced' ? C.ok : entry.effectiveSource === 'local' ? C.info : C.dim },
+      { text: `${String(entry.effectiveValue)}`.slice(0, Math.max(0, width - 47)), fg: entry.locked ? C.warn : C.dim },
+    ], C, { selected });
+  }
+
+  protected override getEmptyStateMessage(): string {
+    return ' No resolved settings entries.';
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
     const snapshot = getSettingsControlPlaneSnapshot(this.configManager);
-    const safeSelectedIndex = Math.max(0, Math.min(this.selectedIndex, Math.max(0, snapshot.resolvedEntries.length - 1)));
-    this.selectedIndex = safeSelectedIndex;
+
     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, [[' 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),
     ];
-    const prefixSections: PanelWorkspaceSection[] = [
-      {
-        lines: buildSummaryBlock(width, 'Settings posture', postureLines, C),
-      },
-      {
-        title: 'Layers',
-        lines: [
-          buildPanelLine(width, [[' local typed config ', C.label], [String(snapshot.liveKeyCount), C.value], ['  saved profiles ', C.label], [String(snapshot.profileCount), C.info], ['  managed locks ', C.label], [String(snapshot.managedLockCount), snapshot.managedLockCount > 0 ? C.warn : C.dim]]),
-          buildPanelLine(width, [[' effective local ', C.label], [String(snapshot.resolvedCounts.local), C.info], ['  synced ', C.label], [String(snapshot.resolvedCounts.synced), snapshot.resolvedCounts.synced > 0 ? C.ok : C.dim], ['  managed ', C.label], [String(snapshot.resolvedCounts.managed), snapshot.resolvedCounts.managed > 0 ? C.warn : C.dim]]),
-          buildPanelLine(width, [[' last sync ', C.label], [snapshot.lastSync ? `${snapshot.lastSync.surface}/${snapshot.lastSync.direction}` : 'none', snapshot.lastSync ? C.ok : C.dim], ['  when ', C.label], [snapshot.lastSync ? new Date(snapshot.lastSync.timestamp).toLocaleString() : 'n/a', C.dim]]),
-        ],
-      },
-      {
-        title: 'Staged Bundle',
-        lines: snapshot.stagedManagedBundle
-          ? [
-              buildPanelLine(width, [[' profile ', C.label], [snapshot.stagedManagedBundle.profileName, C.value], ['  risk ', C.label], [snapshot.stagedManagedBundle.risk, snapshot.stagedManagedBundle.risk === 'high' ? C.error : snapshot.stagedManagedBundle.risk === 'medium' ? C.warn : C.ok], ['  changes ', C.label], [String(snapshot.stagedManagedBundle.changeCount), C.info]]),
-              buildPanelLine(width, [[' path ', C.label], [snapshot.stagedManagedBundle.path.slice(0, Math.max(0, width - 9)), C.dim]]),
-            ]
-          : [buildPanelLine(width, [[' No staged managed settings bundle.', C.dim]])],
-      },
-      {
-        title: 'Recent Events',
-        lines: snapshot.recentEvents.length > 0
-          ? snapshot.recentEvents.map((event) => buildPanelLine(width, [[` ${event.surface}/${event.direction}`.padEnd(18), C.info], [` ${event.detail}`.slice(0, Math.max(0, width - 20)), C.dim]]))
-          : [buildPanelLine(width, [[' No sync or managed-setting events recorded yet.', C.dim]])],
-      },
-      {
-        title: 'Managed Locks',
-        lines: snapshot.managedLocks.length > 0
-          ? snapshot.managedLocks.slice(0, 10).map((lock) => buildPanelLine(width, [[` ${lock.key}`.padEnd(30), C.value], [` source=${lock.source}`.padEnd(24), C.info], [` ${lock.reason}`.slice(0, Math.max(0, width - 56)), C.dim]]))
-          : [buildPanelLine(width, [[' No managed locks are currently active.', C.dim]])],
-      },
-      {
-        title: 'Failures',
-        lines: snapshot.recentFailures.length > 0
-          ? snapshot.recentFailures.map((failure) => buildPanelLine(width, [[` ${failure.surface}`.padEnd(10), C.error], [` ${failure.message}`.slice(0, Math.max(0, width - 12)), C.dim]]))
-          : [buildPanelLine(width, [[' No recent sync or managed-setting failures.', C.dim]])],
-      },
-      {
-        title: 'Conflicts',
-          lines: snapshot.conflicts.length > 0
-          ? snapshot.conflicts.map((conflict) => buildPanelLine(width, [[` ${conflict.key}`.padEnd(30), C.value], [` ${conflict.source}`.padEnd(10), C.warn], [` resolve: /settingssync resolve ${conflict.key} local|synced`.slice(0, Math.max(0, width - 42)), C.dim]]))
-          : [buildPanelLine(width, [[' No settings conflicts detected.', C.dim]])],
-      },
-      {
-        title: 'Rollback History',
-        lines: snapshot.rollbackHistory.length > 0
-          ? snapshot.rollbackHistory.map((entry) => buildPanelLine(width, [[` ${entry.token}`.padEnd(18), C.info], [` ${entry.profileName}`.padEnd(18), C.value], [` restored=${String(entry.restoredKeys.length).padEnd(4)}`, C.warn], [` ${new Date(entry.appliedAt).toLocaleString()}`.slice(0, Math.max(0, width - 46)), C.dim]]))
-          : [buildPanelLine(width, [[' No managed rollback records yet.', C.dim]])],
-      },
+
+    const headerLines: Line[] = [
+      ...buildSummaryBlock(width, 'Settings posture', postureLines, C),
+      buildPanelLine(width, [[' local typed config ', C.label], [String(snapshot.liveKeyCount), C.value], ['  saved profiles ', C.label], [String(snapshot.profileCount), C.info], ['  managed locks ', C.label], [String(snapshot.managedLockCount), snapshot.managedLockCount > 0 ? C.warn : C.dim]]),
+      buildPanelLine(width, [[' effective local ', C.label], [String(snapshot.resolvedCounts.local), C.info], ['  synced ', C.label], [String(snapshot.resolvedCounts.synced), snapshot.resolvedCounts.synced > 0 ? C.ok : C.dim], ['  managed ', C.label], [String(snapshot.resolvedCounts.managed), snapshot.resolvedCounts.managed > 0 ? C.warn : C.dim]]),
+      buildPanelLine(width, [[' last sync ', C.label], [snapshot.lastSync ? `${snapshot.lastSync.surface}/${snapshot.lastSync.direction}` : 'none', snapshot.lastSync ? C.ok : C.dim], ['  when ', C.label], [snapshot.lastSync ? new Date(snapshot.lastSync.timestamp).toLocaleString() : 'n/a', C.dim]]),
+      // Staged Bundle
+      ...(snapshot.stagedManagedBundle
+        ? [
+            buildPanelLine(width, [[' profile ', C.label], [snapshot.stagedManagedBundle.profileName, C.value], ['  risk ', C.label], [snapshot.stagedManagedBundle.risk, snapshot.stagedManagedBundle.risk === 'high' ? C.error : snapshot.stagedManagedBundle.risk === 'medium' ? C.warn : C.ok], ['  changes ', C.label], [String(snapshot.stagedManagedBundle.changeCount), C.info]]),
+            buildPanelLine(width, [[' path ', C.label], [snapshot.stagedManagedBundle.path.slice(0, Math.max(0, width - 9)), C.dim]]),
+          ]
+        : [buildPanelLine(width, [[' No staged managed settings bundle.', C.dim]])]),
+      // Recent Events
+      ...(snapshot.recentEvents.length > 0
+        ? snapshot.recentEvents.map((event) => buildPanelLine(width, [[` ${event.surface}/${event.direction}`.padEnd(18), C.info], [` ${event.detail}`.slice(0, Math.max(0, width - 20)), C.dim]]))
+        : [buildPanelLine(width, [[' No sync or managed-setting events recorded yet.', C.dim]])]),
+      // Managed Locks
+      ...(snapshot.managedLocks.length > 0
+        ? snapshot.managedLocks.slice(0, 10).map((lock) => buildPanelLine(width, [[` ${lock.key}`.padEnd(30), C.value], [` source=${lock.source}`.padEnd(24), C.info], [` ${lock.reason}`.slice(0, Math.max(0, width - 56)), C.dim]]))
+        : [buildPanelLine(width, [[' No managed locks are currently active.', C.dim]])]),
+      // Failures
+      ...(snapshot.recentFailures.length > 0
+        ? snapshot.recentFailures.map((failure) => buildPanelLine(width, [[` ${failure.surface}`.padEnd(10), C.error], [` ${failure.message}`.slice(0, Math.max(0, width - 12)), C.dim]]))
+        : [buildPanelLine(width, [[' No recent sync or managed-setting failures.', C.dim]])]),
+      // Conflicts
+      ...(snapshot.conflicts.length > 0
+        ? snapshot.conflicts.map((conflict) => buildPanelLine(width, [[` ${conflict.key}`.padEnd(30), C.value], [` ${conflict.source}`.padEnd(10), C.warn], [` resolve: /settingssync resolve ${conflict.key} local|synced`.slice(0, Math.max(0, width - 42)), C.dim]]))
+        : [buildPanelLine(width, [[' No settings conflicts detected.', C.dim]])]),
+      // Rollback History
+      ...(snapshot.rollbackHistory.length > 0
+        ? snapshot.rollbackHistory.map((entry) => buildPanelLine(width, [[` ${entry.token}`.padEnd(18), C.info], [` ${entry.profileName}`.padEnd(18), C.value], [` restored=${String(entry.restoredKeys.length).padEnd(4)}`, C.warn], [` ${new Date(entry.appliedAt).toLocaleString()}`.slice(0, Math.max(0, width - 46)), C.dim]]))
+        : [buildPanelLine(width, [[' No managed rollback records yet.', C.dim]])]),
     ];
-    const selected = snapshot.resolvedEntries[this.selectedIndex];
-    const selectedSections = !selected ? [] as PanelWorkspaceSection[] : [{
-      lines: buildDetailBlock(width, 'Selected setting', [
-        buildPanelLine(width, [[' key ', C.label], [selected.key, C.value], ['  category ', C.label], [selected.category, C.info]]),
-        buildPanelLine(width, [[' effective ', C.label], [selected.effectiveSource, selected.effectiveSource === 'managed' ? C.warn : selected.effectiveSource === 'synced' ? C.ok : selected.effectiveSource === 'local' ? C.info : C.dim], ['  locked ', C.label], [selected.locked ? 'yes' : 'no', selected.locked ? C.warn : C.dim], ['  conflict ', C.label], [selected.conflict ? 'yes' : 'no', selected.conflict ? C.error : C.good]]),
-        buildPanelLine(width, [[' source ', C.label], [(selected.sourceLabel ?? 'local/default').slice(0, Math.max(0, width - 10)), C.dim]]),
-        buildPanelLine(width, [[' overrides ', C.label], [(selected.overriddenSources.length > 0 ? selected.overriddenSources.join(', ') : 'none').slice(0, Math.max(0, width - 13)), C.dim]]),
-        buildPanelLine(width, [[' local ', C.label], [String(selected.localValue).slice(0, Math.max(0, width - 9)), C.dim]]),
-        buildPanelLine(width, [[' synced ', C.label], [String(selected.syncedValue ?? '(unset)').slice(0, Math.max(0, width - 10)), C.ok]]),
-        buildPanelLine(width, [[' managed ', C.label], [String(selected.managedValue ?? '(unset)').slice(0, Math.max(0, width - 11)), C.warn]]),
-      ], C),
-    }];
-    const resolvedEntriesSection = resolvePrimaryScrollableSection(width, height, {
-      intro: 'Local typed config, synced and managed layers, staged bundle review, conflicts, and control-plane failures.',
-      footerLines: [buildPanelLine(width, [[' ↑/↓ browse  /settingssync show <key>  /settingssync resolve <key> <local|synced>  /managed apply-staged [key...] ', C.dim]])],
-      palette: C,
-      beforeSections: prefixSections,
-      section: {
-        title: 'Resolved Entries',
-        scrollableLines: snapshot.resolvedEntries.map((entry, absolute) => {
-          return buildPanelListRow(width, [
-            { text: entry.key.padEnd(32), fg: C.value },
-            { text: ` ${entry.effectiveSource}`.padEnd(11), fg: entry.effectiveSource === 'managed' ? C.warn : entry.effectiveSource === 'synced' ? C.ok : entry.effectiveSource === 'local' ? C.info : C.dim },
-            { text: `${String(entry.effectiveValue)}`.slice(0, Math.max(0, width - 47)), fg: entry.locked ? C.warn : C.dim },
-          ], C, { selected: absolute === this.selectedIndex });
-        }),
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        guardRows: 1,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: selectedSections,
-    });
-    this.scrollOffset = resolvedEntriesSection.scrollOffset;
-    const sections: PanelWorkspaceSection[] = [
-      ...prefixSections,
-      resolvedEntriesSection.section,
-      ...selectedSections,
+
+    this.clampSelection();
+    const selectedEntry = snapshot.resolvedEntries[this.selectedIndex];
+    const footerLines: Line[] = [
+      ...(selectedEntry
+        ? buildDetailBlock(width, 'Selected setting', [
+            buildPanelLine(width, [[' key ', C.label], [selectedEntry.key, C.value], ['  category ', C.label], [selectedEntry.category, C.info]]),
+            buildPanelLine(width, [[' effective ', C.label], [selectedEntry.effectiveSource, selectedEntry.effectiveSource === 'managed' ? C.warn : selectedEntry.effectiveSource === 'synced' ? C.ok : selectedEntry.effectiveSource === 'local' ? C.info : C.dim], ['  locked ', C.label], [selectedEntry.locked ? 'yes' : 'no', selectedEntry.locked ? C.warn : C.dim], ['  conflict ', C.label], [selectedEntry.conflict ? 'yes' : 'no', selectedEntry.conflict ? C.error : C.good]]),
+            buildPanelLine(width, [[' source ', C.label], [(selectedEntry.sourceLabel ?? 'local/default').slice(0, Math.max(0, width - 10)), C.dim]]),
+            buildPanelLine(width, [[' overrides ', C.label], [(selectedEntry.overriddenSources.length > 0 ? selectedEntry.overriddenSources.join(', ') : 'none').slice(0, Math.max(0, width - 13)), C.dim]]),
+            buildPanelLine(width, [[' local ', C.label], [String(selectedEntry.localValue).slice(0, Math.max(0, width - 9)), C.dim]]),
+            buildPanelLine(width, [[' synced ', C.label], [String(selectedEntry.syncedValue ?? '(unset)').slice(0, Math.max(0, width - 10)), C.ok]]),
+            buildPanelLine(width, [[' managed ', C.label], [String(selectedEntry.managedValue ?? '(unset)').slice(0, Math.max(0, width - 11)), C.warn]]),
+          ], C)
+        : []),
+      buildPanelLine(width, [[' ↑/↓ browse  /settingssync show <key>  /settingssync resolve <key> <local|synced>  /managed apply-staged [key...] ', C.dim]]),
     ];
-    const lines = buildPanelWorkspace(width, height, {
+
+    return this.renderList(width, height, {
       title: 'Settings Sync',
-      intro: 'Local typed config, synced and managed layers, staged bundle review, conflicts, and control-plane failures.',
-      sections,
-      footerLines: [buildPanelLine(width, [[' ↑/↓ browse  /settingssync show <key>  /settingssync resolve <key> <local|synced>  /managed apply-staged [key...] ', C.dim]])],
-      palette: C,
+      header: headerLines,
+      footer: footerLines,
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines.slice(0, height);
   }
 }

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,11 +1,10 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
-import { BasePanel } from './base-panel.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.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';
 import {
-  buildDetailBlock,
   buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
@@ -14,8 +13,6 @@ import {
   buildSummaryBlock,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
-  resolvePrimaryScrollableSection,
-  type PanelWorkspaceSection,
 } from './polish.ts';
 
 const C = {
@@ -56,12 +53,10 @@ function statusColor(status: ReturnType<typeof statusOf>): string {
   }
 }
 
-export class SubscriptionPanel extends BasePanel {
+export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
   private readonly serviceRegistry: Pick<ServiceInspectionQuery, 'getAll'>;
   private readonly subscriptionManager: SubscriptionAccessQuery;
   private rows: SubscriptionRow[] = [];
-  private selectedIndex = 0;
-  private scrollOffset = 0;
   private logoutConfirmationTarget: string | null = null;
 
   public constructor(
@@ -78,6 +73,30 @@ export class SubscriptionPanel extends BasePanel {
     this.refresh();
   }
 
+  protected override getPalette() { return C; }
+  protected override getEmptyStateMessage() { return ' No provider subscriptions are active yet.'; }
+  protected override getEmptyStateActions() {
+    return [
+      { command: '/subscription login openai start', summary: 'start the first-class OpenAI subscription flow' },
+      { command: '/login provider <name> start', summary: 'use the front-door auth surface for supported providers' },
+      { command: '/services auth-review', summary: 'inspect configured service auth posture and stored secrets' },
+    ];
+  }
+
+  protected getItems(): readonly SubscriptionRow[] {
+    return this.rows;
+  }
+
+  protected renderItem(row: SubscriptionRow, index: number, selected: boolean, width: number): Line {
+    const status = statusOf(row);
+    return buildPanelListRow(width, [
+      { text: row.provider.padEnd(16).slice(0, 16), fg: C.value },
+      { text: ` ${status.toUpperCase().padEnd(12)}`, fg: statusColor(status) },
+      { text: ` oauth=${row.hasOAuthConfig ? 'yes' : 'no'} `, fg: row.hasOAuthConfig ? C.info : C.dim },
+      { text: ` override=${row.subscription ? 'active' : 'off'}`, fg: row.subscription ? C.good : C.dim },
+    ], C, { selected, selectedBg: C.selectedBg });
+  }
+
   public handleInput(key: string): boolean {
     if (this.rows.length === 0) return false;
     const selected = this.rows[this.selectedIndex] ?? null;
@@ -95,7 +114,7 @@ export class SubscriptionPanel extends BasePanel {
     }
     if (key === 'enter' || key === 'x') {
       if (!selected?.subscription) return false;
-      if (this.logoutConfirmationTarget !== selected.provider) {
+      if (this.logoutConfirmationTarget === null || this.logoutConfirmationTarget !== selected.provider) {
         this.logoutConfirmationTarget = selected.provider;
         this.markDirty();
         return true;
@@ -106,6 +125,11 @@ export class SubscriptionPanel extends BasePanel {
       this.markDirty();
       return true;
     }
+    if ((key === 'n' || key === 'escape') && this.logoutConfirmationTarget) {
+      this.logoutConfirmationTarget = null;
+      this.markDirty();
+      return true;
+    }
     if (key === 'r') {
       this.refresh();
       this.logoutConfirmationTarget = null;
@@ -145,8 +169,9 @@ export class SubscriptionPanel extends BasePanel {
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
     this.refresh();
+    this.clampSelection();
+    const intro = 'Review provider login state, subscription-backed routing, and pending browser auth handshakes.';
 
     const activeCount = this.rows.filter((row) => row.subscription).length;
     const pendingCount = this.rows.filter((row) => row.pending).length;
@@ -163,111 +188,75 @@ export class SubscriptionPanel extends BasePanel {
       ], C),
       buildGuidanceLine(width, '/subscription login <provider> start', 'start or repair browser login for the selected provider route', C),
     ];
-    const footerLines = [
-      buildGuidanceLine(width, '/subscription login <provider> start', 'start browser-based provider login from the packaged subscription surface', C),
-      buildPanelLine(width, [['  Up/Down move  Enter/X sign out selected provider  r refresh', C.dim]]),
-    ] as const;
 
+    // Empty state: render posture + base empty state
     if (this.rows.length === 0) {
-      const lines: Line[] = [];
-      lines.push(...buildSummaryBlock(width, 'Subscription posture', postureLines, C));
-      lines.push(...buildEmptyState(
+      const summaryLines = buildSummaryBlock(width, 'Subscription posture', postureLines, C);
+      const emptyLines = buildEmptyState(
         width,
-        ' No provider subscriptions are active yet.',
+        this.getEmptyStateMessage(),
         'Built-in OAuth-capable providers and configured service providers will appear here once available for browser login or session import.',
-        [
-          { command: '/subscription login openai start', summary: 'start the first-class OpenAI subscription flow' },
-          { command: '/login provider <name> start', summary: 'use the front-door auth surface for supported providers' },
-          { command: '/services auth-review', summary: 'inspect configured service auth posture and stored secrets' },
-        ],
+        this.getEmptyStateActions(),
         C,
-      ));
+      );
       const workspace = buildPanelWorkspace(width, height, {
         title: 'Provider Subscriptions',
-        intro: 'Review provider login state, subscription-backed routing, and pending browser auth handshakes.',
-        sections: [{ lines }] satisfies readonly PanelWorkspaceSection[],
-        footerLines,
+        intro,
+        sections: [{ lines: [...summaryLines, ...emptyLines] }],
+        footerLines: [
+          buildGuidanceLine(width, '/subscription login <provider> start', 'start browser-based provider login from the packaged subscription surface', C),
+          buildPanelLine(width, [['  Up/Down move  Enter/X sign out selected provider  r refresh', C.dim]]),
+        ],
         palette: C,
       });
       while (workspace.length < height) workspace.push(createEmptyLine(width));
       return workspace.slice(0, height);
     }
 
-    const selected = this.rows[this.selectedIndex];
+    const selectedRow = this.rows[this.selectedIndex];
     const detailRows: Line[] = [];
-    if (selected) {
+    if (selectedRow) {
       detailRows.push(buildKeyValueLine(width, [
-        { label: 'provider', value: selected.provider, valueColor: C.value },
-        { label: 'status', value: statusOf(selected), valueColor: statusColor(statusOf(selected)) },
-        { label: 'oauth config', value: selected.hasOAuthConfig ? 'present' : 'missing', valueColor: selected.hasOAuthConfig ? C.good : C.bad },
+        { label: 'provider', value: selectedRow.provider, valueColor: C.value },
+        { label: 'status', value: statusOf(selectedRow), valueColor: statusColor(statusOf(selectedRow)) },
+        { label: 'oauth config', value: selectedRow.hasOAuthConfig ? 'present' : 'missing', valueColor: selectedRow.hasOAuthConfig ? C.good : C.bad },
       ], C));
-      if (selected.subscription) {
-        const expires = selected.subscription.expiresAt
-          ? new Date(selected.subscription.expiresAt).toISOString()
+      if (selectedRow.subscription) {
+        const expires = selectedRow.subscription.expiresAt
+          ? new Date(selectedRow.subscription.expiresAt).toISOString()
           : 'n/a';
         detailRows.push(buildKeyValueLine(width, [
-          { label: 'token type', value: selected.subscription.tokenType, valueColor: C.info },
+          { label: 'token type', value: selectedRow.subscription.tokenType, valueColor: C.info },
           { label: 'expires', value: expires, valueColor: C.dim },
         ], C));
         detailRows.push(buildPanelLine(width, [[
-          ` ${selected.subscription.overrideAmbientApiKeys
+          ` ${selectedRow.subscription.overrideAmbientApiKeys
             ? 'Provider subscription overrides ambient API-key resolution for this provider.'
             : 'Stored for subscription-backed flows. Ambient API-key resolution remains unchanged.'}`,
           C.dim,
         ]]));
-        if (this.logoutConfirmationTarget === selected.provider) {
-          detailRows.push(buildPanelLine(width, [[` Press Enter or X again to sign out ${selected.provider}.`, C.warn]]));
+        if (this.logoutConfirmationTarget === selectedRow.provider) {
+          detailRows.push(buildPanelLine(width, [[` Press Enter or X again to sign out ${selectedRow.provider}.`, C.warn]]));
         }
-      } else if (selected.pending) {
+      } else if (selectedRow.pending) {
         detailRows.push(buildPanelLine(width, [[' Login is pending. Finish with /subscription login <provider> finish <code>.', C.warn]]));
-      } else if (selected.hasOAuthConfig) {
+      } else if (selectedRow.hasOAuthConfig) {
         detailRows.push(buildPanelLine(width, [[' Ready for login. Start with /subscription login <provider> start.', C.dim]]));
       } else {
         detailRows.push(buildPanelLine(width, [[' Add a provider-specific OAuth config or enable a built-in subscription provider to use subscription login.', C.bad]]));
       }
     }
-    const postureSection: PanelWorkspaceSection = { lines: buildSummaryBlock(width, 'Subscription posture', postureLines, C) };
-    const detailSection: PanelWorkspaceSection = { lines: buildDetailBlock(width, 'Selected provider', detailRows, C) };
-    const rawProviderLines: Line[] = this.rows.map((row, absolute) => {
-      const status = statusOf(row);
-      return buildPanelListRow(width, [
-        { text: row.provider.padEnd(16).slice(0, 16), fg: C.value },
-        { text: ` ${status.toUpperCase().padEnd(12)}`, fg: statusColor(status) },
-        { text: ` oauth=${row.hasOAuthConfig ? 'yes' : 'no'} `, fg: row.hasOAuthConfig ? C.info : C.dim },
-        { text: ` override=${row.subscription ? 'active' : 'off'}`, fg: row.subscription ? C.good : C.dim },
-      ], C, { selected: absolute === this.selectedIndex, selectedBg: C.selectedBg });
-    });
-    const resolvedProvidersSection = resolvePrimaryScrollableSection(width, height, {
-      intro: 'Review provider login state, subscription-backed routing, and pending browser auth handshakes.',
-      footerLines,
-      palette: C,
-      beforeSections: [postureSection],
-      section: {
-        title: 'Providers',
-        scrollableLines: rawProviderLines,
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        guardRows: 1,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: [detailSection],
-    });
-    this.scrollOffset = resolvedProvidersSection.scrollOffset;
 
-    const sections: PanelWorkspaceSection[] = [
-      postureSection,
-      resolvedProvidersSection.section,
-      detailSection,
-    ];
-    const lines = buildPanelWorkspace(width, height, {
+    const headerLines: Line[] = buildSummaryBlock(width, 'Subscription posture', postureLines, C);
+
+    return this.renderList(width, height, {
       title: 'Provider Subscriptions',
-      intro: 'Review provider login state, subscription-backed routing, and pending browser auth handshakes.',
-      sections,
-      footerLines,
-      palette: C,
+      header: headerLines,
+      footer: [
+        ...detailRows,
+        buildGuidanceLine(width, '/subscription login <provider> start', 'start browser-based provider login from the packaged subscription surface', C),
+        buildPanelLine(width, [['  Up/Down move  Enter/X sign out selected provider  r refresh', C.dim]]),
+      ],
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines.slice(0, height);
   }
 }