@pellux/goodvibes-tui 0.27.0 → 0.28.0

package/src/panels/polish.ts

@@ -2,152 +2,31 @@ import type { Line } from '../types/grid.ts';
 import { createEmptyLine, createStyledCell } from '../types/grid.ts';
 import { getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
 import { getSurfaceContentRows, getTrackedVisibleWindow, getVisibleWindow, type VisibleWindow } from '../renderer/surface-layout.ts';
-import { GLYPHS, UI_TONES } from '../renderer/ui-primitives.ts';
+import { GLYPHS } from '../renderer/ui-primitives.ts';
 import { type StatusState, STATE_GLYPHS } from '../renderer/status-glyphs.ts';
-
-export interface PanelPalette {
-  readonly label: string;
-  readonly value: string;
-  readonly dim: string;
-  readonly info: string;
-  readonly good?: string;
-  readonly warn?: string;
-  readonly bad?: string;
-  readonly empty: string;
-  readonly header?: string;
-  readonly headerBg?: string;
-  readonly surfaceBg?: string;
-  readonly sectionBg?: string;
-  readonly summaryBg?: string;
-  readonly inputBg?: string;
-  readonly accent?: string;
-  readonly selectBg?: string;
-}
-
-export const DEFAULT_PANEL_PALETTE: Readonly<Required<PanelPalette>> = {
-  header: UI_TONES.fg.primary,
-  headerBg: UI_TONES.bg.title,
-  label: UI_TONES.fg.muted,
-  value: UI_TONES.fg.primary,
-  dim: UI_TONES.fg.dim,
-  info: UI_TONES.state.info,
-  good: UI_TONES.state.good,
-  warn: UI_TONES.state.warn,
-  bad: UI_TONES.state.bad,
-  empty: '#334155',
-  surfaceBg: UI_TONES.bg.surface,
-  sectionBg: UI_TONES.bg.section,
-  summaryBg: UI_TONES.bg.summary,
-  inputBg: UI_TONES.bg.input,
-  accent: UI_TONES.fg.secondary,
-  selectBg: UI_TONES.bg.selected,
-} as const;
-
-/**
- * Extend the base panel palette with domain-specific colors.
- *
- * Convention: raw hex colors may only live inside a palette constant declared
- * at the top of a panel file, not inline in render calls.
- *
- * @example
- * ```ts
- * const C = extendPalette(DEFAULT_PANEL_PALETTE, {
- *   decision: '#38bdf8',
- *   incident: '#ef4444',
- * });
- * ```
- */
-export function extendPalette<T extends Record<string, string>>(
-  base: typeof DEFAULT_PANEL_PALETTE,
-  extras: T,
-): typeof DEFAULT_PANEL_PALETTE & T {
-  return { ...base, ...extras };
-}
-
-export function buildPanelLine(
-  width: number,
-  segments: Array<StyledPanelSegment | [string, string, string?]>,
-): Line {
-  return buildStyledPanelLine(
-    width,
-    segments.map((seg) =>
-      Array.isArray(seg) ? { text: seg[0], fg: seg[1], bg: seg[2] } : seg,
-    ),
-  );
-}
-
-export interface StyledPanelSegment {
-  readonly text: string;
-  readonly fg: string;
-  readonly bg?: string;
-  readonly bold?: boolean;
-  readonly dim?: boolean;
-}
-
-export function buildSelectablePanelLine(
-  width: number,
-  segments: ReadonlyArray<StyledPanelSegment>,
-  options: { selected?: boolean; selectedBg?: string; fillFg?: string; fillBg?: string; leadingMarker?: string } = {},
-): Line {
-  const selected = options.selected ?? false;
-  const selectedBg = selected ? (options.selectedBg ?? DEFAULT_PANEL_PALETTE.selectBg) : '';
-  const fillBg = selectedBg || options.fillBg || '';
-  const fillFg = options.fillFg ?? '';
-  const cells = createEmptyLine(width);
-  if (fillBg) {
-    for (let col = 0; col < width; col++) {
-      cells[col] = createStyledCell(' ', { bg: fillBg, fg: fillFg });
-    }
-  }
-
-  let col = 0;
-  if (selected && options.leadingMarker) {
-    for (const ch of options.leadingMarker) {
-      const charWidth = getDisplayWidth(ch);
-      if (charWidth <= 0 || col + charWidth > width) break;
-      cells[col] = createStyledCell(ch, { fg: DEFAULT_PANEL_PALETTE.info, bg: selectedBg, bold: true });
-      if (charWidth > 1 && col + 1 < width) cells[col + 1] = createStyledCell(' ', { fg: DEFAULT_PANEL_PALETTE.info, bg: selectedBg, bold: true });
-      col += charWidth;
-    }
-  }
-  for (const segment of segments) {
-    const fg = segment.fg;
-    const bg = segment.bg ?? fillBg;
-    for (const ch of segment.text) {
-      const charWidth = getDisplayWidth(ch);
-      if (charWidth <= 0) continue;
-      if (col + charWidth > width) return cells;
-      cells[col] = createStyledCell(ch, {
-        fg,
-        bg,
-        bold: segment.bold ?? false,
-        dim: segment.dim ?? false,
-      });
-      if (charWidth > 1 && col + 1 < width) {
-        cells[col + 1] = createStyledCell(' ', {
-          fg,
-          bg,
-          bold: segment.bold ?? false,
-          dim: segment.dim ?? false,
-        });
-      }
-      col += charWidth;
-    }
-  }
-
-  while (col < width) {
-    cells[col++] = createStyledCell(' ', { bg: fillBg, fg: fillFg });
-  }
-  return cells;
-}
-
-export function buildStyledPanelLine(
-  width: number,
-  segments: ReadonlyArray<StyledPanelSegment>,
-  options: { fillBg?: string; fillFg?: string } = {},
-): Line {
-  return buildSelectablePanelLine(width, segments, options);
-}
+import { buildPanelLine, buildStyledPanelLine, DEFAULT_PANEL_PALETTE } from './polish-core.ts';
+import type { PanelPalette, StyledPanelSegment } from './polish-core.ts';
+
+// The panel formatting toolkit is split across three modules to stay under the
+// architecture line-count cap; every symbol remains importable from './polish.ts':
+//   - ./polish-core.ts    palette + base line primitives (leaf)
+//   - ./polish-tables.ts  table / tree / badge / aligned-row primitives
+// This module keeps the higher-level builders + workspace layout.
+export * from './polish-core.ts';
+export {
+  buildAlignedRow,
+  buildStatusBadge,
+  buildTreeRow,
+  buildTable,
+  type ColumnAlign,
+  type ColumnSpec,
+  type AlignedCell,
+  type StatusBadgeKind,
+  type TreeItemSpec,
+  type TableColumn,
+  type TableCell,
+  type TableRow,
+} from './polish-tables.ts';
 
 export function buildGuidanceLine(
   width: number,
@@ -680,6 +559,26 @@ export function resolveStackedScrollableSections(
   });
 }
 
+/**
+ * Standardized footer keyboard-hint row so every panel's hints look identical.
+ * Each hint renders as `keys` (info color) + `label` (dim).
+ */
+export function buildKeyboardHints(
+  width: number,
+  hints: ReadonlyArray<{ keys: string; label: string }>,
+  palette: PanelPalette,
+): Line {
+  const segments: Array<[string, string, string?]> = [];
+  hints.forEach((hint, i) => {
+    if (i > 0) segments.push(['   ', palette.dim]);
+    else segments.push([' ', palette.dim]);
+    segments.push([hint.keys, palette.info]);
+    segments.push([' ', palette.dim]);
+    segments.push([hint.label, palette.dim]);
+  });
+  return buildPanelLine(width, segments);
+}
+
 export function buildPanelWorkspace(
   width: number,
   height: number,

package/src/panels/project-planning-panel.ts

@@ -367,12 +367,34 @@ export class ProjectPlanningPanel extends BasePanel {
       : readiness === 'needs-user-input'
       ? C.blocked
       : C.dim;
+    const blockingGaps = (evaluation?.gaps ?? []).filter((gap) => gap.severity === 'blocking').length;
+    const openQuestions = state.openQuestions.filter((q) => (q.status ?? 'open') === 'open').length;
+    // Surface the most important thing first: is this plan executable, and what
+    // is the single blocker to getting there.
+    const nextStep = state.executionApproved
+      ? 'approved — execution may proceed'
+      : openQuestions > 0
+      ? `answer ${openQuestions} open question${openQuestions === 1 ? '' : 's'}`
+      : blockingGaps > 0
+      ? `resolve ${blockingGaps} blocking gap${blockingGaps === 1 ? '' : 's'}`
+      : readiness === 'executable'
+      ? 'press a to approve execution'
+      : 'continue the planning interview';
     const lines: Line[] = [
       buildKeyValueLine(width, [
         { label: 'readiness', value: readiness, valueColor: readinessColor },
         { label: 'approved', value: state.executionApproved ? 'yes' : 'no', valueColor: state.executionApproved ? C.approved : C.blocked },
         { label: 'questions', value: `${state.openQuestions.length} open / ${state.answeredQuestions.length} answered`, valueColor: C.value },
       ], C),
+      buildKeyValueLine(width, [
+        { label: 'blocking gaps', value: String(blockingGaps), valueColor: blockingGaps > 0 ? C.blocked : C.good },
+        { label: 'tasks', value: String(state.tasks.length), valueColor: state.tasks.length > 0 ? C.value : C.dim },
+        { label: 'gates', value: String(state.verificationGates.length), valueColor: state.verificationGates.length > 0 ? C.good : C.dim },
+      ], C),
+      buildPanelLine(width, [
+        [' Next step ', C.label],
+        [nextStep, state.executionApproved ? C.approved : C.planning],
+      ]),
       ...buildBodyText(width, `Goal: ${state.goal || '(not set)'}`, C, state.goal ? C.value : C.blocked),
     ];
     if (state.scope) lines.push(...buildBodyText(width, `Scope: ${state.scope}`, C, C.value));

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

@@ -1,12 +1,14 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import {
+  buildAlignedRow,
   buildDetailBlock,
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
   buildKeyValueLine,
-  buildPanelListRow,
   buildPanelLine,
   buildSummaryBlock,
   buildPanelWorkspace,
@@ -50,14 +52,32 @@ export class ProviderAccountsPanel extends ScrollableListPanel<ProviderAccountRe
     return this.records;
   }
 
+  private readonly listColumns = [
+    { width: 16 },
+    { width: 14 },
+    { width: 8, align: 'right' as const },
+    { width: 11 },
+    { width: 8, align: 'right' as const },
+  ];
+
   protected renderItem(item: ProviderAccountRecord, _index: number, selected: boolean, width: number): Line {
-    return buildPanelListRow(width, [
-      { text: item.providerId.padEnd(16), fg: item.active ? C.good : C.value },
-      { text: ` ${item.activeRoute.padEnd(14)}`, fg: item.activeRoute === 'subscription' ? C.info : item.activeRoute === 'api-key' ? C.warn : item.activeRoute === 'service-oauth' ? C.value : C.dim },
-      { text: ` models=${String(item.modelCount).padEnd(4)}`, fg: C.dim },
-      { text: ` ${item.authFreshness.padEnd(10)}`, fg: item.authFreshness === 'expired' ? C.bad : item.authFreshness === 'expiring' || item.authFreshness === 'pending' ? C.warn : C.dim },
-      { text: ` issues=${String(item.issues.length).padEnd(2)}`, fg: item.issues.length > 0 ? C.bad : C.good },
-    ], C, { selected });
+    const routeFg = item.activeRoute === 'subscription' ? C.info
+      : item.activeRoute === 'api-key' ? C.warn
+      : item.activeRoute === 'service-oauth' ? C.value : C.dim;
+    const freshFg = item.authFreshness === 'expired' ? C.bad
+      : item.authFreshness === 'expiring' || item.authFreshness === 'pending' ? C.warn : C.dim;
+    return buildAlignedRow(
+      width,
+      [
+        { text: item.providerId, fg: item.active ? C.good : C.value, bold: selected },
+        { text: item.activeRoute, fg: routeFg },
+        { text: `${item.modelCount} mdl`, fg: C.dim },
+        { text: item.authFreshness, fg: freshFg },
+        { text: item.issues.length > 0 ? `${item.issues.length} !` : 'ok', fg: item.issues.length > 0 ? C.bad : C.good },
+      ],
+      this.listColumns,
+      { selected, selectedBg: C.selectBg, marker: '▸' },
+    );
   }
 
   public handleInput(key: string): boolean {
@@ -85,7 +105,11 @@ export class ProviderAccountsPanel extends ScrollableListPanel<ProviderAccountRe
   public render(width: number, height: number): Line[] {
     this.needsRender = false;
     const intro = 'Provider auth routes, subscription posture, quota-window hints, and routing-safety notes.';
-    const footerLines = [buildPanelLine(width, [['  Up/Down move  r refresh  /accounts routes <provider>  /accounts repair <provider>', C.dim]])];
+    const footerLines = [buildKeyboardHints(width, [
+      { keys: 'Up/Down', label: 'select' },
+      { keys: 'r', label: 'refresh' },
+      { keys: '/accounts repair <provider>', label: 'recover routing' },
+    ], C)];
     if (this.loading && this.records.length === 0) {
       const lines = buildPanelWorkspace(width, height, {
         title: 'Provider Account Control Room',
@@ -140,8 +164,8 @@ export class ProviderAccountsPanel extends ScrollableListPanel<ProviderAccountRe
         { label: 'oauth ready', value: selected.oauthReady ? 'yes' : 'no', valueColor: selected.oauthReady ? C.info : C.dim },
         { label: 'pending login', value: selected.pendingLogin ? 'yes' : 'no', valueColor: selected.pendingLogin ? C.warn : C.dim },
       ], C),
-      buildPanelLine(width, [[`  Active route reason: ${selected.activeRouteReason}`.slice(0, width), C.dim]]),
-      buildPanelLine(width, [[`  Available routes: ${selected.availableRoutes.join(', ') || 'unconfigured'}`.slice(0, width), C.dim]]),
+      buildPanelLine(width, [[truncateDisplay(`  Active route reason: ${selected.activeRouteReason}`, width), C.dim]]),
+      buildPanelLine(width, [[truncateDisplay(`  Available routes: ${selected.availableRoutes.join(', ') || 'unconfigured'}`, width), C.dim]]),
     ];
     if (selected.expiresAt) {
       detailRows.push(buildPanelLine(width, [
@@ -152,28 +176,28 @@ export class ProviderAccountsPanel extends ScrollableListPanel<ProviderAccountRe
       ]));
     }
     if (selected.fallbackRisk) {
-      detailRows.push(buildPanelLine(width, [[`  fallback: ${selected.fallbackRisk}`.slice(0, width), C.warn]]));
+      detailRows.push(buildPanelLine(width, [[truncateDisplay(`  fallback: ${selected.fallbackRisk}`, width), C.warn]]));
     }
     for (const route of selected.routeRecords) {
       detailRows.push(buildPanelLine(width, [[
-        `  route ${route.route}: ${route.usable ? 'usable' : 'blocked'} • ${route.freshness} • ${route.detail}`.slice(0, width),
+        truncateDisplay(`  route ${route.route}: ${route.usable ? 'usable' : 'blocked'} • ${route.freshness} • ${route.detail}`, width),
         route.usable ? C.dim : C.bad,
       ]]));
       for (const issue of route.issues) {
-        detailRows.push(buildPanelLine(width, [[`    issue: ${issue}`.slice(0, width), C.bad]]));
+        detailRows.push(buildPanelLine(width, [[truncateDisplay(`    issue: ${issue}`, width), C.bad]]));
       }
     }
     for (const windowHint of selected.usageWindows) {
-      detailRows.push(buildPanelLine(width, [[`  ${windowHint.label}: ${windowHint.detail}`.slice(0, width), C.dim]]));
+      detailRows.push(buildPanelLine(width, [[truncateDisplay(`  ${windowHint.label}: ${windowHint.detail}`, width), C.dim]]));
     }
     for (const issue of selected.issues) {
-      detailRows.push(buildPanelLine(width, [[`  issue: ${issue}`.slice(0, width), C.bad]]));
+      detailRows.push(buildPanelLine(width, [[truncateDisplay(`  issue: ${issue}`, width), C.bad]]));
     }
     for (const note of selected.notes) {
-      detailRows.push(buildPanelLine(width, [[`  note: ${note}`.slice(0, width), C.info]]));
+      detailRows.push(buildPanelLine(width, [[truncateDisplay(`  note: ${note}`, width), C.info]]));
     }
     for (const action of selected.recommendedActions) {
-      detailRows.push(buildPanelLine(width, [[`  next: ${action}`.slice(0, width), C.value]]));
+      detailRows.push(buildPanelLine(width, [[truncateDisplay(`  next: ${action}`, width), C.value]]));
     }
     if (selected.issues.length === 0 && selected.notes.length === 0 && selected.usageWindows.length === 0 && selected.recommendedActions.length === 0) {
       detailRows.push(buildPanelLine(width, [['  No active account warnings for this provider.', C.dim]]));
@@ -183,6 +207,18 @@ export class ProviderAccountsPanel extends ScrollableListPanel<ProviderAccountRe
     const rawProviderLines: Line[] = this.records.map((record, absolute) =>
       this.renderItem(record, absolute, absolute === this.selectedIndex, width),
     );
+    const columnHeader = buildAlignedRow(
+      width,
+      [
+        { text: 'provider', fg: C.label, bold: true },
+        { text: 'route', fg: C.label, bold: true },
+        { text: 'models', fg: C.label, bold: true },
+        { text: 'auth', fg: C.label, bold: true },
+        { text: 'issues', fg: C.label, bold: true },
+      ],
+      this.listColumns,
+      { marker: '▸' },
+    );
     const resolvedProvidersSection = resolvePrimaryScrollableSection(width, height, {
       intro,
       footerLines,
@@ -190,6 +226,7 @@ export class ProviderAccountsPanel extends ScrollableListPanel<ProviderAccountRe
       beforeSections: [postureSection],
       section: {
         title: 'Providers',
+        fixedLines: [columnHeader],
         scrollableLines: rawProviderLines,
         selectedIndex: this.selectedIndex,
         scrollOffset: this.scrollStart,

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

@@ -1,4 +1,5 @@
 import type { ConfigManager } from '@pellux/goodvibes-sdk/platform/config';
+import { formatLatencyMs } from '../utils/format-duration.ts';
 import { BasePanel } from './base-panel.ts';
 import { createEmptyLine, createStyledCell, type Line } from '../types/grid.ts';
 import type { ProviderAuthRouteDescriptor } from '@pellux/goodvibes-sdk/platform/providers';
@@ -26,13 +27,13 @@ import type {
 } from '../runtime/ui-read-models.ts';
 import { evaluateSessionMaintenance } from '@/runtime/index.ts';
 import {
+  buildAlignedRow,
   buildBodyText,
   buildDetailBlock,
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
   buildKeyValueLine,
-  buildPanelListRow,
-  buildPanelLine,
   buildPanelWorkspace,
   buildSummaryBlock,
   DEFAULT_PANEL_PALETTE,
@@ -66,6 +67,7 @@ export interface ProviderHealthPanelDeps {
 const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   title:   '#00ffff',
   unknown: '244',
+  rowSelectBg: '#111827',
 });
 
 const LATENCY_WARN_MS = 2_000;
@@ -104,10 +106,7 @@ function latencyColor(ms: number): string {
 }
 
 function fmtMs(ms: number): string {
-  if (ms <= 0)      return 'n/a';
-  if (ms >= 10_000) return `${(ms / 1000).toFixed(1)}s`;
-  if (ms >= 1_000)  return `${(ms / 1000).toFixed(2)}s`;
-  return `${Math.round(ms)}ms`;
+  return formatLatencyMs(ms);
 }
 
 function fmtAgo(ts: number | undefined): string {
@@ -592,13 +591,19 @@ export class ProviderHealthPanel extends BasePanel {
       worktrees: this.deps.worktrees.getSnapshot(),
       session: this.deps.session.getSnapshot(),
     })) {
-      domainLines.push(buildPanelLine(width, [
-        ['  ', C.label],
-        [domain.name.padEnd(14), C.value],
-        [domain.summary.slice(0, Math.max(0, width - 36)).padEnd(Math.max(0, width - 36)), domainColor(domain.level)],
-        [' ', C.label],
-        [domain.next.slice(0, 20), C.dim],
-      ]));
+      domainLines.push(buildAlignedRow(
+        width,
+        [
+          { text: domain.name, fg: C.value, bold: true },
+          { text: domain.summary, fg: domainColor(domain.level) },
+          { text: domain.next, fg: C.dim },
+        ],
+        [
+          { width: 14 },
+          { width: Math.max(10, width - 38) },
+          { width: 20 },
+        ],
+      ));
       for (const detail of domain.details.slice(0, 2)) {
         domainLines.push(...buildBodyText(width, `    ${detail}`, { ...DEFAULT_PANEL_PALETTE, header: C.title }, C.dim));
       }
@@ -672,26 +677,63 @@ export class ProviderHealthPanel extends BasePanel {
     const domainsSection: PanelWorkspaceSection = { title: 'Repair Domains', lines: domainLines };
     const maintenanceSections = maintenanceLines.length > 0 ? [{ title: 'Session Maintenance', lines: maintenanceLines } satisfies PanelWorkspaceSection] : [];
     const selectedSections = selectedLines.length > 0 ? [{ lines: buildDetailBlock(width, 'Selected provider', selectedLines, { ...DEFAULT_PANEL_PALETTE, header: C.title }) } satisfies PanelWorkspaceSection] : [];
+    const footerHint = buildKeyboardHints(width, [
+      { keys: 'j/k or Up/Down', label: 'select provider' },
+      { keys: '/provider', label: 'switch model' },
+      { keys: '/accounts', label: 'auth routes' },
+    ], { ...DEFAULT_PANEL_PALETTE, header: C.title });
+    const providerColumnHeader = buildAlignedRow(
+      width,
+      [
+        { text: 'provider', fg: C.label, bold: true },
+        { text: 'status', fg: C.label, bold: true },
+        { text: 'lat', fg: C.label, bold: true },
+        { text: 'last ok', fg: C.label, bold: true },
+        { text: 'auth', fg: C.label, bold: true },
+      ],
+      [
+        { width: 18 },
+        { width: 13 },
+        { width: 8, align: 'right' },
+        { width: 10, align: 'right' },
+        { width: 12 },
+      ],
+      { marker: '▸' },
+    );
     const resolvedProvidersSection = resolvePrimaryScrollableSection(width, height, {
       intro,
-      footerLines: [buildPanelLine(width, [['  j/k or Up/Down move  live cooldowns refresh while active', C.dim]])],
+      footerLines: [footerHint],
       palette: { ...DEFAULT_PANEL_PALETTE, header: C.title },
       beforeSections: [postureSection, domainsSection, ...maintenanceSections],
       section: {
         title: 'Providers',
+        fixedLines: [providerColumnHeader],
         scrollableLines: providers.map((name, absolute) => {
           const health = this.providerHealthTracker.get(name);
           const status = health?.status ?? 'unknown';
+          const dot = statusDot(status);
           const latency = health?.lastLatencyMs !== undefined ? fmtMs(health.lastLatencyMs) : 'n/a';
           const latencyFg = health?.lastLatencyMs !== undefined ? latencyColor(health.lastLatencyMs) : C.dim;
-          return buildPanelListRow(width, [
-            { text: name.padEnd(16), fg: C.value },
-            { text: statusLabel(status).padEnd(14), fg: statusDot(status).color },
-            { text: ' lat ', fg: C.label },
-            { text: latency.padEnd(8), fg: latencyFg },
-            { text: ' ok ', fg: C.label },
-            { text: fmtAgo(health?.lastSuccessAt).padEnd(10), fg: C.value },
-          ], { ...DEFAULT_PANEL_PALETTE, header: C.title }, { selected: absolute === this._selectedIndex, selectedBg: '#111827' });
+          const account = this._accountRecords.get(name);
+          const authFg = account ? freshnessColor(account.authFreshness) : C.dim;
+          return buildAlignedRow(
+            width,
+            [
+              { text: `${dot.char} ${name}`, fg: C.value, bold: absolute === this._selectedIndex },
+              { text: statusLabel(status), fg: dot.color },
+              { text: latency, fg: latencyFg },
+              { text: fmtAgo(health?.lastSuccessAt), fg: C.value },
+              { text: account ? account.authFreshness : '-', fg: authFg },
+            ],
+            [
+              { width: 18 },
+              { width: 13 },
+              { width: 8, align: 'right' },
+              { width: 10, align: 'right' },
+              { width: 12 },
+            ],
+            { selected: absolute === this._selectedIndex, selectedBg: C.rowSelectBg, marker: '▸' },
+          );
         }),
         selectedIndex: this._selectedIndex,
         scrollOffset: this._scrollOffset,
@@ -713,7 +755,7 @@ export class ProviderHealthPanel extends BasePanel {
       title: 'Health',
       intro,
       sections,
-      footerLines: [buildPanelLine(width, [['  j/k or Up/Down move  live cooldowns refresh while active', C.dim]])],
+      footerLines: [footerHint],
       palette: { ...DEFAULT_PANEL_PALETTE, header: C.title },
     });
   }