@pellux/goodvibes-tui 0.27.0 → 0.29.0

package/src/panels/skills-panel.ts

@@ -1,41 +1,28 @@
 import { promises as fsPromises } from 'node:fs';
-import { join } from 'node:path';
+import { join, sep } 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 { SearchableListPanel } from './scrollable-list-panel.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
+import { FilePreviewPanel } from './file-preview-panel.ts';
+import type { PanelIntegrationContext } from './types.ts';
 import type { ComponentHealthMonitor } from '../runtime/perf/panel-health-monitor.ts';
-import type { ShellPathService } from '@/runtime/index.ts';
+import { listInstalledEcosystemEntries, type EcosystemCatalogPathOptions, type ShellPathService } from '@/runtime/index.ts';
 import {
   buildPanelLine,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
 } from './polish.ts';
-import {
-  getPanelSearchFocusTransition,
-  isPanelSearchCancel,
-} from './search-focus.ts';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
-  header: '#94a3b8',
-  headerBg: '#1e293b',
-  searchFg: '#f97316',
-  searchBg: '#1e293b',
-  label: '#64748b',
-  value: '#e2e8f0',
-  dim: '#64748b',
-  empty: '#334155',
-  selectedFg: '#e2e8f0',
-  selectedBg: '#1e3a5f',
-  project: '#38bdf8',
-  global: '#a78bfa',
-  hint: '#475569',
-  path: '#94a3b8',
-  selectBg: '#1e3a5f',
-} as const;
+// Domain accents only; base chrome (header/headerBg/label/value/dim/empty/
+// selectBg) comes from DEFAULT_PANEL_PALETTE.
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  project: '#38bdf8',   // project-local skill origin
+  global:  '#a78bfa',   // global skill origin
+} as const);
 
 export type SkillOrigin = 'project-local' | 'global' | 'custom';
 
@@ -47,11 +34,20 @@ export interface SkillRecord {
   dependencies: string[];
   includes: string[];
   frontmatter: Record<string, string>;
+  /**
+   * Set when this skill's file lives under an installed ecosystem-marketplace
+   * receipt's targetPath — the receipt's provenance summary (e.g. curated
+   * source / signature info), so marketplace-installed skills read as such
+   * instead of looking identical to hand-authored ones.
+   */
+  marketplaceProvenance?: string;
 }
 
 export interface SkillsPanelOptions {
   shellPaths: Pick<ShellPathService, 'workingDirectory' | 'homeDirectory'>;
   componentHealthMonitor?: ComponentHealthMonitor;
+  /** When provided, installed skill entries are tagged with marketplace provenance. */
+  ecosystemPaths?: EcosystemCatalogPathOptions;
 }
 
 function parseFrontmatter(content: string): Record<string, string> {
@@ -133,7 +129,31 @@ async function scanSkillDirectory(root: string, origin: SkillOrigin): Promise<Sk
   return records;
 }
 
-export async function discoverSkills(shellPaths: Pick<ShellPathService, 'workingDirectory' | 'homeDirectory'>): Promise<SkillRecord[]> {
+/**
+ * Tags records whose file lives under an installed ecosystem-marketplace
+ * receipt's targetPath with that receipt's provenance summary. Best-effort:
+ * a lookup failure (e.g. no ecosystem catalogs configured) leaves records
+ * untagged rather than failing skill discovery.
+ */
+function applyMarketplaceProvenance(records: SkillRecord[], ecosystemPaths: EcosystemCatalogPathOptions): SkillRecord[] {
+  let receipts: ReturnType<typeof listInstalledEcosystemEntries>;
+  try {
+    receipts = listInstalledEcosystemEntries('skill', ecosystemPaths);
+  } catch {
+    return records;
+  }
+  if (receipts.length === 0) return records;
+  return records.map((record) => {
+    const receipt = receipts.find((candidate) => record.path === candidate.targetPath || record.path.startsWith(`${candidate.targetPath}${sep}`));
+    if (!receipt) return record;
+    return { ...record, marketplaceProvenance: receipt.provenanceSummary };
+  });
+}
+
+export async function discoverSkills(
+  shellPaths: Pick<ShellPathService, 'workingDirectory' | 'homeDirectory'>,
+  ecosystemPaths?: EcosystemCatalogPathOptions,
+): Promise<SkillRecord[]> {
   const cwd = shellPaths.workingDirectory;
   const homeDir = shellPaths.homeDirectory;
   const seen = new Set<string>();
@@ -147,7 +167,9 @@ export async function discoverSkills(shellPaths: Pick<ShellPathService, 'working
     }
   }
 
-  return records.sort((a, b) => {
+  const tagged = ecosystemPaths ? applyMarketplaceProvenance(records, ecosystemPaths) : records;
+
+  return tagged.sort((a, b) => {
     const originRank = a.origin === b.origin
       ? 0
       : a.origin === 'project-local'
@@ -227,27 +249,34 @@ function originColor(origin: SkillOrigin): string {
   }
 }
 
-export class SkillsPanel extends SearchableListPanel<SkillRecord> {
+export class SkillsPanel extends ScrollableListPanel<SkillRecord> {
   private readonly shellPaths: Pick<ShellPathService, 'workingDirectory' | 'homeDirectory'>;
-  /** Whether the filter input row is focused for typing (vs. list navigation). */
-  private filterFocused = false;
+  private readonly ecosystemPaths: EcosystemCatalogPathOptions | undefined;
   private cached: SkillRecord[] | null = null;
   private cacheDirty = true;
   // I1: confirm state for destructive delete
   private confirm: ConfirmState | null = null;
   private readyPromise: Promise<void> | null = null;
+  // Staged pending action consumed by handlePanelIntegrationAction (same
+  // pattern as diff-panel.ts's pendingOpenPreview): Enter marks the intent
+  // here, the actual PanelManager/preview wiring happens once the
+  // integration context is available.
+  private pendingOpenPreview = false;
 
   public constructor(options: SkillsPanelOptions) {
-    super('skills', 'Skills', 'K', 'monitoring', options.componentHealthMonitor);
+    super('skills', 'Skills', '▩', 'automation-control', options.componentHealthMonitor);
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true; // WO-153: converged modal '/' filter
+    this.filterLabel = 'Filter';
     this.shellPaths = options.shellPaths;
+    this.ecosystemPaths = options.ecosystemPaths;
   }
 
   // -------------------------------------------------------------------------
-  // SearchableListPanel implementation
+  // ScrollableListPanel implementation
   // -------------------------------------------------------------------------
 
-  protected getAllItems(): readonly SkillRecord[] {
+  protected getItems(): readonly SkillRecord[] {
     return this.cached ?? [];
   }
 
@@ -255,9 +284,9 @@ export class SkillsPanel extends SearchableListPanel<SkillRecord> {
     const p = (async () => {
       try {
         await this.withLoading('Scanning skills\u2026', async () => {
-          this.cached = await discoverSkills(this.shellPaths);
+          this.cached = await discoverSkills(this.shellPaths, this.ecosystemPaths);
           this.cacheDirty = false;
-          this.invalidateFilter();
+          this.markDirty();
         });
       } catch (err) {
         this.setError(summarizeError(err));
@@ -273,14 +302,31 @@ export class SkillsPanel extends SearchableListPanel<SkillRecord> {
     return this.readyPromise ?? Promise.resolve();
   }
 
-  protected matchesSearch(skill: SkillRecord, query: string): boolean {
-    const q = query.trim().toLowerCase();
-    if (!q) return true;
+  /**
+   * REAL delete: removes the confirmed skill's markdown file from disk, then
+   * rescans so the list reflects the change immediately. Replaces the old
+   * setError('Delete via shell: rm …') signpost, which never actually
+   * deleted anything.
+   */
+  private async _deleteSkill(path: string): Promise<void> {
+    try {
+      await fsPromises.rm(path);
+      this.cacheDirty = true;
+      await this._loadSkillsAsync();
+    } catch (err) {
+      this.setError(summarizeError(err));
+      this.markDirty();
+    }
+  }
+
+  /** `q` arrives already trimmed + lower-cased from ScrollableListPanel.getVisibleItems(). */
+  protected override filterMatches(skill: SkillRecord, q: string): boolean {
     const haystack = [
       skill.name,
       skill.description,
       skill.path,
       skill.origin,
+      skill.marketplaceProvenance ?? '',
       skill.dependencies.join(' '),
       skill.includes.join(' '),
     ].join(' ').toLowerCase();
@@ -290,17 +336,22 @@ export class SkillsPanel extends SearchableListPanel<SkillRecord> {
   protected renderItem(skill: SkillRecord, index: number, selected: boolean, width: number): Line {
     const bg = selected ? C.selectBg : undefined;
     const dot = skill.origin === 'project-local' ? '\u25c6' : '\u2022';
+    // Marketplace-installed skills get a badge glyph; unbadged column stays a
+    // single blank cell so rows stay aligned either way.
+    const marketplaceBadge = skill.marketplaceProvenance ? '\u2605' : ' ';
     const desc = skill.description || 'No description provided.';
-    const descWidth = Math.max(1, width - 4 - skill.name.length - 6);
+    const descWidth = Math.max(1, width - 6 - skill.name.length - 6);
     const descLines = wordWrap(desc, descWidth);
     return buildPanelLine(width, [
-      [selected ? '\u25b8' : ' ', C.selectedFg, bg],
+      [selected ? '\u25b8' : ' ', C.value, bg],
       [' ', C.dim, bg],
       [dot, originColor(skill.origin), bg],
       [' ', C.dim, bg],
-      [skill.name, selected ? C.selectedFg : C.value, bg],
+      [marketplaceBadge, C.info, bg],
+      [' ', C.dim, bg],
+      [skill.name, selected ? C.value : C.value, bg],
       ['  ', C.dim, bg],
-      [descLines[0] ?? '', selected ? C.selectedFg : C.dim, bg],
+      [descLines[0] ?? '', selected ? C.value : C.dim, bg],
     ]);
   }
 
@@ -315,24 +366,66 @@ export class SkillsPanel extends SearchableListPanel<SkillRecord> {
 
   public override onActivate(): void {
     super.onActivate();
-    this.searchQuery = '';
-    this.invalidateFilter();
-    this.filterFocused = false;
+    this.filterQuery = '';
+    this.filterActive = false;
     this.cacheDirty = true;
     void this._loadSkillsAsync();
   }
 
   public override onDestroy(): void {}
 
+  protected override onSelect(_skill: SkillRecord): void {
+    // Enter opens the skill's markdown source in the preview panel — see
+    // handlePanelIntegrationAction for the actual PanelManager wiring
+    // (needs the integration context, not available here). Selection itself
+    // is read back from getVisibleItems() in that hook. onSelect is only
+    // invoked by ScrollableListPanel's navigation handler when the filter is
+    // not active, so no manual guard is needed here.
+    this.pendingOpenPreview = true;
+  }
+
+  /**
+   * Cross-panel integration hook — Enter opens the selected skill's markdown
+   * source in the preview panel via the same open/focus bridge DiffPanel
+   * uses (src/input/panel-integration-actions.ts), without this panel
+   * needing to know about PanelManager pane/focus mechanics beyond what ctx
+   * exposes.
+   */
+  public handlePanelIntegrationAction(_key: string, ctx: PanelIntegrationContext): boolean {
+    if (!this.pendingOpenPreview) return false;
+    this.pendingOpenPreview = false;
+    const skill = this.getSelectedItem();
+    if (!skill) return false;
+
+    const pm = ctx.panelManager;
+    let previewPanel = pm.getPanel('preview');
+    if (previewPanel instanceof FilePreviewPanel) {
+      const pane = pm.getPaneOf('preview');
+      pm.activateById('preview');
+      if (pane) pm.focusPane(pane);
+    } else {
+      const targetPane: 'top' | 'bottom' = pm.isBottomPaneVisible()
+        ? (pm.getFocusedPane() === 'top' ? 'bottom' : 'top')
+        : 'bottom';
+      const opened = pm.open('preview', targetPane);
+      pm.show();
+      pm.focusPane(targetPane);
+      previewPanel = opened instanceof FilePreviewPanel ? opened : null;
+    }
+    if (previewPanel instanceof FilePreviewPanel) {
+      previewPanel.openFile(skill.path);
+      return true;
+    }
+    return false;
+  }
+
   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}"`);
+      void this._deleteSkill(toDelete);
       this.markDirty();
       return true;
     }
@@ -343,38 +436,11 @@ export class SkillsPanel extends SearchableListPanel<SkillRecord> {
     }
     if (confirmResult === 'absorbed') return true;
 
-    const items = this.getItems();
-
-    // Filter-focus mode: typing goes into the search query
-    if (this.filterFocused) {
-      const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.selectedIndex, itemCount: items.length });
-      if (transition === 'focus-list') {
-        this.filterFocused = false;
-        this.markDirty();
-        return true;
-      }
-      // Escape: also blur filter focus (clear + return to list navigation)
-      if (isPanelSearchCancel(key)) {
-        this.filterFocused = false;
-        // Delegate to super to clear the query. If the query is empty, super
-        // returns false and escape propagates to the panel dismissal handler —
-        // this is the intentional double-escape UX (blur filter, then close).
-        return super.handleInput(key);
-      }
-      // Delegate backspace/printable to SearchableListPanel.handleInput
-      return super.handleInput(key);
-    }
-
-    const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.selectedIndex, itemCount: items.length });
-    if (transition === 'focus-search') {
-      this.filterFocused = true;
-      this.markDirty();
-      return true;
-    }
-
-    // I1: 'd' prompts delete confirmation
-    if (key === 'd') {
-      const skill = items[this.selectedIndex];
+    // I1: 'd' prompts delete confirmation — only outside filter mode, so 'd'
+    // remains typeable into the filter query while it is active (WO-153:
+    // converged modal '/' filter coexists with single-letter action keys).
+    if (!this.filterActive && key === 'd') {
+      const skill = this.getSelectedItem();
       if (skill) {
         this.confirm = { subject: skill.path, label: skill.name };
         this.markDirty();
@@ -382,7 +448,8 @@ export class SkillsPanel extends SearchableListPanel<SkillRecord> {
       return true;
     }
 
-    // Navigation + search: delegate to SearchableListPanel (up/down/g/G/page/enter + backspace/escape)
+    // Navigation + filter: delegate to ScrollableListPanel ('/' enters
+    // filter, typing narrows, Esc clears, up/down/g/G/page/enter navigate).
     return super.handleInput(key);
   }
 
@@ -402,27 +469,28 @@ export class SkillsPanel extends SearchableListPanel<SkillRecord> {
       return lines.slice(0, height);
     }
 
-    // Build filter input line (provided by SearchableListPanel base)
-    const filterLine = this.buildFilterInputLine(width, 'Filter', this.filterFocused);
-
     // Build detail footer for the currently selected skill
-    const items = this.getItems();
-    const selected = items[this.selectedIndex];
+    const selected = this.getSelectedItem();
     const detailLines: Line[] = [];
     if (selected) {
       detailLines.push(
         buildPanelLine(width, [['  Selected: ', C.label], [selected.name, C.value], ['  [', C.dim], [originLabel(selected.origin), originColor(selected.origin)], [']', C.dim]]),
-        buildPanelLine(width, [['  Path: ', C.label], [truncatePathDisplay(selected.path, Math.max(1, width - 8)), C.path]]),
+        buildPanelLine(width, [['  Path: ', C.label], [truncatePathDisplay(selected.path, Math.max(1, width - 8)), C.label]]),
         buildPanelLine(width, [['  Desc: ', C.label], [selected.description || 'No description provided.', C.value]]),
         buildPanelLine(width, [['  Depends: ', C.label], [selected.dependencies.length > 0 ? selected.dependencies.join(', ') : 'none', C.dim]]),
         buildPanelLine(width, [['  Includes: ', C.label], [selected.includes.length > 0 ? selected.includes.join(', ') : 'none', C.dim]]),
+        buildPanelLine(width, [
+          ['  Provenance: ', C.label],
+          [selected.marketplaceProvenance ?? 'not installed via marketplace', selected.marketplaceProvenance ? C.info : C.dim],
+        ]),
       );
     }
-    detailLines.push(buildPanelLine(width, [['  Up/Down navigate  / or Up-at-top focus filter  Esc blur  Backspace clear', C.hint]]));
+    detailLines.push(buildPanelLine(width, [['  Up/Down navigate  / filter  Esc clear  Backspace edit', C.dim]]));
+    detailLines.push(buildPanelLine(width, [['  Enter open in preview  d delete (confirm)', C.dim]]));
 
+    // Filter input line is auto-injected by renderList() (filterEnabled=true).
     const lines = this.renderList(width, height, {
       title: 'Skills - discover project-local and global skill packs',
-      header: [filterLine],
       footer: detailLines,
     });
     return lines;

package/src/panels/subscription-panel.ts

@@ -1,14 +1,16 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
+import { fitDisplay } from '../utils/terminal-width.ts';
+import { formatElapsed } from '../utils/format-elapsed.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
-import type { KeyName } from './types.ts';
+import type { KeyName, PanelIntegrationContext } from './types.ts';
 import type { ProviderSubscription, PendingSubscriptionLogin } from '@pellux/goodvibes-sdk/platform/config';
 import { listBuiltinSubscriptionProviders } from '@pellux/goodvibes-sdk/platform/config';
 import { type ConfirmState, handleConfirmInput } from './confirm-state.ts';
 import type { ServiceInspectionQuery, SubscriptionAccessQuery } from '../runtime/ui-service-queries.ts';
 import {
   buildEmptyState,
-  buildGuidanceLine,
+  buildKeyboardHints,
   buildKeyValueLine,
   buildPanelListRow,
   buildPanelLine,
@@ -17,17 +19,9 @@ import {
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
 
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
-  header: '#e2e8f0',
-  headerBg: '#1e293b',
-  dim: '#64748b',
-  info: '#38bdf8',
-  good: '#22c55e',
-  warn: '#f59e0b',
-  bad: '#ef4444',
-  selectedBg: '#0f172a',
-} as const;
+// Base chrome only — title band, state colors, and text tokens all come
+// straight from DEFAULT_PANEL_PALETTE (WO-002).
+const C = DEFAULT_PANEL_PALETTE;
 
 interface SubscriptionRow {
   readonly provider: string;
@@ -55,18 +49,38 @@ function statusColor(status: ReturnType<typeof statusOf>): string {
   }
 }
 
+// Highlight window for "expiring soon" — mirrors the provider-console
+// convention of flagging tokens inside their last day of validity so the
+// operator can refresh/re-login before the subscription actually lapses.
+const EXPIRING_SOON_MS = 24 * 60 * 60 * 1000;
+
+function isExpiringSoon(subscription: ProviderSubscription | null): boolean {
+  if (!subscription?.expiresAt) return false;
+  const remaining = subscription.expiresAt - Date.now();
+  return remaining > 0 && remaining <= EXPIRING_SOON_MS;
+}
+
 export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
   private readonly serviceRegistry: Pick<ServiceInspectionQuery, 'getAll'>;
   private readonly subscriptionManager: SubscriptionAccessQuery;
   private rows: SubscriptionRow[] = [];
   /** Pending logout confirmation — uses project-standard ConfirmState contract. */
   private confirm: ConfirmState<string> | null = null;
+  // Set by handleInput (Enter on an 'available' row) and consumed on the very
+  // next handlePanelIntegrationAction dispatch of that same key — handleInput
+  // has no ctx.executeCommand, so the actual login-start dispatch happens via
+  // the bridge (remote-panel.ts / token-budget-panel.ts pattern).
+  private pendingCommand: { name: string; args: string[] } | null = null;
+  // Background posture refresh while the panel is visible, so a login/logout
+  // that completes elsewhere (e.g. the browser OAuth handshake finishing)
+  // shows up without requiring an explicit 'r'.
+  private refreshTimer: ReturnType<typeof setInterval> | null = null;
 
   public constructor(
     serviceRegistry: Pick<ServiceInspectionQuery, 'getAll'>,
     subscriptionManager: SubscriptionAccessQuery,
   ) {
-    super('subscription', 'Subscriptions', 'B', 'monitoring');
+    super('subscription', 'Subscriptions', 'B', 'providers');
     this.showSelectionGutter = true; // I5: non-color selection affordance
     this.serviceRegistry = serviceRegistry;
     this.subscriptionManager = subscriptionManager;
@@ -75,6 +89,28 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
   public override onActivate(): void {
     super.onActivate();
     this.refresh();
+    if (this.refreshTimer === null) {
+      this.refreshTimer = this.registerTimer(setInterval(() => {
+        this.refresh();
+        this.markDirty();
+      }, 5_000));
+    }
+  }
+
+  public override onDeactivate(): void {
+    if (this.refreshTimer !== null) {
+      this.clearTimer(this.refreshTimer);
+      this.refreshTimer = null;
+    }
+  }
+
+  /** Consumes the login-start command queued by handleInput's Enter-on-'available' branch. */
+  public handlePanelIntegrationAction(_key: string, ctx: PanelIntegrationContext): boolean {
+    if (!this.pendingCommand) return false;
+    const { name, args } = this.pendingCommand;
+    this.pendingCommand = null;
+    void ctx.executeCommand?.(name, args);
+    return true;
   }
 
   protected override getPalette() { return C; }
@@ -93,12 +129,17 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
 
   protected renderItem(row: SubscriptionRow, index: number, selected: boolean, width: number): Line {
     const status = statusOf(row);
+    // Expiring-soon highlight: the STATUS text stays 'ACTIVE' (the row is
+    // still active), but it's colored as a warning and gets a trailing
+    // marker so an about-to-lapse token stands out from the list.
+    const expiringSoon = isExpiringSoon(row.subscription);
     return buildPanelListRow(width, [
-      { text: row.provider.padEnd(16).slice(0, 16), fg: C.value },
-      { text: ` ${status.toUpperCase().padEnd(12)}`, fg: statusColor(status) },
+      { text: fitDisplay(row.provider, 16), fg: C.value },
+      { text: ` ${status.toUpperCase().padEnd(12)}`, fg: expiringSoon ? C.warn : 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 });
+      ...(expiringSoon ? [{ text: ' expiring soon', fg: C.warn }] : []),
+    ], C, { selected, selectedBg: C.selectBg });
   }
 
   public handleInput(key: KeyName): boolean {
@@ -120,7 +161,7 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
     if (confirmResult === 'absorbed') return true;
 
     if (this.rows.length === 0) return false;
-    const selected = this.rows[this.selectedIndex] ?? null;
+    const selected = this.getSelectedItem() ?? null;
     if (key === 'up' || key === 'k') {
       this.selectedIndex = Math.max(0, this.selectedIndex - 1);
       this.confirm = null;
@@ -134,10 +175,18 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
       return true;
     }
     if (key === 'enter' || key === 'return') {
-      if (!selected?.subscription) return false;
-      this.confirm = { subject: selected.provider, label: selected.provider };
-      this.markDirty();
-      return true;
+      if (selected?.subscription) {
+        this.confirm = { subject: selected.provider, label: selected.provider };
+        this.markDirty();
+        return true;
+      }
+      // Enter on an 'available' row starts the real login flow via the
+      // bridge instead of leaving it as a printed signpost.
+      if (selected && statusOf(selected) === 'available') {
+        this.pendingCommand = { name: 'subscription', args: ['login', selected.provider, 'start'] };
+        return true;
+      }
+      return false;
     }
     if (key === 'r') {
       this.refresh();
@@ -177,9 +226,29 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
     this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.rows.length - 1));
   }
 
+  /** Footer hints that reflect the current view: confirm-pending vs browsing. */
+  private buildFooterHint(width: number): Line {
+    if (this.confirm) {
+      return buildKeyboardHints(width, [
+        { keys: 'y/Enter', label: 'confirm sign out' },
+        { keys: 'n/Esc', label: 'cancel' },
+      ], C);
+    }
+    const selected = this.getSelectedItem();
+    const hints: Array<{ keys: string; label: string }> = [{ keys: 'Up/Down', label: 'select' }];
+    if (selected?.subscription) hints.push({ keys: 'Enter', label: 'sign out' });
+    else if (selected?.hasOAuthConfig) hints.push({ keys: 'Enter', label: 'sign in' });
+    hints.push({ keys: 'r', label: 'refresh' });
+    return buildKeyboardHints(width, hints, C);
+  }
+
+  // WO-139: refresh() moved out of render() (hooks-panel.ts:109 pattern) — it
+  // now runs on onActivate(), on 'r', and on the 5s background timer above,
+  // instead of rebuilding the row set (service registry scan + builtin
+  // provider list + subscription-manager reads) on every single frame.
   public render(width: number, height: number): Line[] {
-    this.refresh();
     this.clampSelection();
+    const selected = this.getSelectedItem();
     const intro = 'Review provider login state, subscription-backed routing, and pending browser auth handshakes.';
 
     const activeCount = this.rows.filter((row) => row.subscription).length;
@@ -192,10 +261,9 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
         { label: 'providers', value: String(this.rows.length), valueColor: C.value },
       ], C),
       buildKeyValueLine(width, [
-        { label: 'selected', value: (this.rows[this.selectedIndex]?.provider ?? 'none'), valueColor: this.rows[this.selectedIndex] ? C.value : C.dim },
-        { label: 'status', value: this.rows[this.selectedIndex] ? statusOf(this.rows[this.selectedIndex]!) : 'n/a', valueColor: this.rows[this.selectedIndex] ? statusColor(statusOf(this.rows[this.selectedIndex]!)) : C.dim },
+        { label: 'selected', value: (selected?.provider ?? 'none'), valueColor: selected ? C.value : C.dim },
+        { label: 'status', value: selected ? statusOf(selected) : 'n/a', valueColor: selected ? statusColor(statusOf(selected)) : C.dim },
       ], C),
-      buildGuidanceLine(width, '/subscription login <provider> start', 'start or repair browser login for the selected provider route', C),
     ];
 
     // Empty state: render posture + base empty state
@@ -213,8 +281,7 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
         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 sign out selected provider  y/Esc confirm/cancel  r refresh', C.dim]]),
+          this.buildFooterHint(width),
         ],
         palette: C,
       });
@@ -222,7 +289,7 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
       return workspace.slice(0, height);
     }
 
-    const selectedRow = this.rows[this.selectedIndex];
+    const selectedRow = selected;
     const detailRows: Line[] = [];
     if (selectedRow) {
       detailRows.push(buildKeyValueLine(width, [
@@ -231,12 +298,13 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
         { label: 'oauth config', value: selectedRow.hasOAuthConfig ? 'present' : 'missing', valueColor: selectedRow.hasOAuthConfig ? C.good : C.bad },
       ], C));
       if (selectedRow.subscription) {
+        const expiringSoon = isExpiringSoon(selectedRow.subscription);
         const expires = selectedRow.subscription.expiresAt
           ? new Date(selectedRow.subscription.expiresAt).toISOString()
           : 'n/a';
         detailRows.push(buildKeyValueLine(width, [
           { label: 'token type', value: selectedRow.subscription.tokenType, valueColor: C.info },
-          { label: 'expires', value: expires, valueColor: C.dim },
+          { label: 'expires', value: expiringSoon ? `${expires} (expiring soon)` : expires, valueColor: expiringSoon ? C.warn : C.dim },
         ], C));
         detailRows.push(buildPanelLine(width, [[
           ` ${selectedRow.subscription.overrideAmbientApiKeys
@@ -244,13 +312,17 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
             : 'Stored for subscription-backed flows. Ambient API-key resolution remains unchanged.'}`,
           C.dim,
         ]]));
+        if (expiringSoon) {
+          detailRows.push(buildPanelLine(width, [[' Token expires within 24h — sign out and re-login (Enter) to refresh it before it lapses.', C.warn]]));
+        }
         if (this.confirm?.subject === selectedRow.provider) {
           detailRows.push(buildPanelLine(width, [[` Sign out ${selectedRow.provider}? Press y or Enter to confirm, n or Esc to cancel.`, C.warn]]));
         }
       } else if (selectedRow.pending) {
-        detailRows.push(buildPanelLine(width, [[' Login is pending. Finish with /subscription login <provider> finish <code>.', C.warn]]));
+        const age = formatElapsed(Date.now() - selectedRow.pending.createdAt);
+        detailRows.push(buildPanelLine(width, [[` Login is pending (started ${age} ago). Finish with /subscription login <provider> finish <code>.`, C.warn]]));
       } else if (selectedRow.hasOAuthConfig) {
-        detailRows.push(buildPanelLine(width, [[' Ready for login. Start with /subscription login <provider> start.', C.dim]]));
+        detailRows.push(buildPanelLine(width, [[' Ready for login. Press Enter to start it here.', 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]]));
       }
@@ -263,8 +335,7 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
       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 sign out selected provider  y/Esc confirm/cancel  r refresh', C.dim]]),
+        this.buildFooterHint(width),
       ],
     });
   }