@pellux/goodvibes-tui 0.26.0 → 0.28.0

package/src/panels/polish-tables.ts

@@ -0,0 +1,258 @@
+import type { Line } from '../types/grid.ts';
+import { getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
+import { GLYPHS, UI_TONES } from '../renderer/ui-primitives.ts';
+// Build on the leaf primitives in ./polish-core.ts (palette + base line
+// builders). polish-core has no back-edge to this file, so there is no cycle.
+import { buildSelectablePanelLine, DEFAULT_PANEL_PALETTE } from './polish-core.ts';
+import type { PanelPalette, StyledPanelSegment } from './polish-core.ts';
+
+// ---------------------------------------------------------------------------
+// Shared formatting primitives (the toolkit panels standardize on).
+//
+// All are display-width aware (via getDisplayWidth / truncateDisplay) so they
+// stay aligned across emoji, CJK, and other wide characters — never hand-roll
+// .slice()/.padEnd() truncation or alignment in panels.
+// ---------------------------------------------------------------------------
+
+export type ColumnAlign = 'left' | 'right' | 'center';
+
+export interface ColumnSpec {
+  /** Fixed display width of the column. */
+  readonly width: number;
+  /** Horizontal alignment within the column. Default 'left'. */
+  readonly align?: ColumnAlign;
+}
+
+export interface AlignedCell {
+  readonly text: string;
+  readonly fg: string;
+  readonly bg?: string;
+  readonly bold?: boolean;
+  readonly dim?: boolean;
+}
+
+/** Truncate + pad `text` to exactly `width` display columns with alignment. */
+function alignText(text: string, width: number, align: ColumnAlign): string {
+  if (width <= 0) return '';
+  const truncated = truncateDisplay(text, width);
+  const pad = Math.max(0, width - getDisplayWidth(truncated));
+  if (pad === 0) return truncated;
+  if (align === 'right') return ' '.repeat(pad) + truncated;
+  if (align === 'center') {
+    const left = Math.floor(pad / 2);
+    return ' '.repeat(left) + truncated + ' '.repeat(pad - left);
+  }
+  return truncated + ' '.repeat(pad);
+}
+
+/**
+ * Build a multi-column row with display-width-aware alignment. Replaces manual
+ * `.padEnd()`/`.padStart()` column math (which misaligns on wide chars).
+ *
+ * `cells` and `columns` are zip-aligned by index; extra cells are ignored.
+ */
+export function buildAlignedRow(
+  width: number,
+  cells: ReadonlyArray<AlignedCell>,
+  columns: ReadonlyArray<ColumnSpec>,
+  options: {
+    readonly gap?: number;
+    readonly selected?: boolean;
+    readonly selectedBg?: string;
+    readonly marker?: string;
+    readonly fillBg?: string;
+  } = {},
+): Line {
+  const gap = options.gap ?? 1;
+  const segments: StyledPanelSegment[] = [];
+  const count = Math.min(cells.length, columns.length);
+  for (let i = 0; i < count; i++) {
+    const col = columns[i]!;
+    const cell = cells[i]!;
+    if (i > 0 && gap > 0) segments.push({ text: ' '.repeat(gap), fg: cell.fg, bg: cell.bg });
+    segments.push({
+      text: alignText(cell.text, col.width, col.align ?? 'left'),
+      fg: cell.fg,
+      bg: cell.bg,
+      bold: cell.bold,
+      dim: cell.dim,
+    });
+  }
+  return buildSelectablePanelLine(width, segments, {
+    selected: options.selected,
+    selectedBg: options.selectedBg,
+    fillBg: options.fillBg,
+    leadingMarker: options.marker,
+  });
+}
+
+export type StatusBadgeKind =
+  | 'pending'
+  | 'running'
+  | 'completed'
+  | 'failed'
+  | 'cancelled'
+  | 'blocked'
+  | 'review';
+
+interface BadgeSpec {
+  readonly glyph: string;
+  readonly fg: string;
+  readonly label: string;
+}
+
+const STATUS_BADGES: Record<StatusBadgeKind, BadgeSpec> = {
+  pending:   { glyph: GLYPHS.status.pending, fg: DEFAULT_PANEL_PALETTE.info, label: 'Pending' },
+  running:   { glyph: GLYPHS.status.active,  fg: UI_TONES.state.active,      label: 'Running' },
+  completed: { glyph: GLYPHS.status.success, fg: DEFAULT_PANEL_PALETTE.good, label: 'Completed' },
+  failed:    { glyph: GLYPHS.status.failure, fg: DEFAULT_PANEL_PALETTE.bad,  label: 'Failed' },
+  cancelled: { glyph: GLYPHS.status.skipped, fg: DEFAULT_PANEL_PALETTE.dim,  label: 'Cancelled' },
+  blocked:   { glyph: GLYPHS.status.blocked, fg: UI_TONES.state.blocked,     label: 'Blocked' },
+  review:    { glyph: GLYPHS.status.review,  fg: DEFAULT_PANEL_PALETTE.info, label: 'Review' },
+};
+
+/**
+ * Canonical status badge (glyph + label) with a consistent color per lifecycle
+ * state. Returns StyledPanelSegment[] — spread into a buildPanelLine call:
+ *   buildPanelLine(width, [['  ', C.label], ...buildStatusBadge('running')])
+ * Supersedes ad-hoc per-panel status→color maps.
+ */
+export function buildStatusBadge(
+  kind: StatusBadgeKind,
+  label?: string,
+  opts?: { glyph?: string; bg?: string; count?: number },
+): StyledPanelSegment[] {
+  const spec = STATUS_BADGES[kind];
+  const glyph = opts?.glyph ?? spec.glyph;
+  const text = label ?? spec.label;
+  const rendered = opts?.count !== undefined ? `${glyph} ${text} (${opts.count})` : `${glyph} ${text}`;
+  return [{ text: rendered, fg: spec.fg, bg: opts?.bg }];
+}
+
+export interface TreeItemSpec {
+  readonly depth: number;
+  readonly label: string;
+  readonly icon?: string;
+  readonly expandable?: boolean;
+  readonly expanded?: boolean;
+  readonly labelColor?: string;
+  /** Right-aligned metadata columns (e.g. size, mtime). */
+  readonly metadata?: ReadonlyArray<{ text: string; fg: string }>;
+}
+
+/**
+ * Build a hierarchical tree row: indentation + expand/collapse glyph + optional
+ * icon + label, with right-aligned metadata. Replaces hand-rolled indentation
+ * in file-explorer / symbol-outline / orchestration panels.
+ */
+export function buildTreeRow(
+  width: number,
+  item: TreeItemSpec,
+  palette: PanelPalette,
+  options: { selected?: boolean; selectedBg?: string; indentWidth?: number } = {},
+): Line {
+  const indent = ' '.repeat(Math.max(0, item.depth) * (options.indentWidth ?? 2));
+  const toggle = item.expandable
+    ? (item.expanded ? GLYPHS.navigation.expanded : GLYPHS.navigation.collapsed)
+    : ' ';
+  const iconPart = item.icon ? `${item.icon} ` : '';
+  const prefix = `${indent}${toggle} ${iconPart}`;
+  const prefixW = getDisplayWidth(prefix);
+
+  const metadata = item.metadata ?? [];
+  const metaText = metadata.map((m) => m.text).join(' ');
+  const metaW = getDisplayWidth(metaText);
+  const reserve = metaW > 0 ? metaW + 1 : 0;
+
+  const labelBudget = Math.max(0, width - prefixW - reserve);
+  const label = truncateDisplay(item.label, labelBudget);
+  const usedW = prefixW + getDisplayWidth(label);
+
+  const segments: StyledPanelSegment[] = [
+    { text: prefix, fg: palette.dim },
+    { text: label, fg: item.labelColor ?? palette.value },
+  ];
+  if (metaW > 0) {
+    const spacer = Math.max(1, width - usedW - metaW);
+    segments.push({ text: ' '.repeat(spacer), fg: palette.dim });
+    metadata.forEach((m, i) => {
+      if (i > 0) segments.push({ text: ' ', fg: palette.dim });
+      segments.push({ text: m.text, fg: m.fg });
+    });
+  }
+  return buildSelectablePanelLine(width, segments, {
+    selected: options.selected,
+    selectedBg: options.selectedBg ?? palette.selectBg,
+  });
+}
+
+export interface TableColumn {
+  readonly label: string;
+  /** Fixed width; omit to auto-distribute remaining space. */
+  readonly width?: number;
+  readonly align?: ColumnAlign;
+}
+
+export interface TableCell {
+  readonly text: string;
+  readonly fg?: string;
+  readonly bg?: string;
+  readonly bold?: boolean;
+}
+
+export interface TableRow {
+  readonly cells: ReadonlyArray<TableCell>;
+  readonly selected?: boolean;
+}
+
+/** Resolve concrete per-column widths, auto-distributing any unsized columns. */
+function resolveColumnWidths(width: number, columns: ReadonlyArray<TableColumn>, gap: number): number[] {
+  const totalGap = gap * Math.max(0, columns.length - 1);
+  const explicit = columns.reduce((s, c) => s + (c.width ?? 0), 0);
+  const autoIdx = columns.map((c, i) => (c.width === undefined ? i : -1)).filter((i) => i >= 0);
+  const autoBudget = Math.max(0, width - totalGap - explicit);
+  const each = autoIdx.length > 0 ? Math.floor(autoBudget / autoIdx.length) : 0;
+  const widths = columns.map((c) => c.width ?? each);
+  if (autoIdx.length > 0) {
+    const used = each * autoIdx.length;
+    widths[autoIdx[autoIdx.length - 1]!] += autoBudget - used; // remainder to last auto col
+  }
+  return widths;
+}
+
+/**
+ * Build a table: a header row plus aligned data rows. Replaces ad-hoc
+ * row/column offset math in history/ledger/roster panels.
+ */
+export function buildTable(
+  width: number,
+  columns: ReadonlyArray<TableColumn>,
+  rows: ReadonlyArray<TableRow>,
+  palette: PanelPalette,
+  options: { gap?: number; selectedBg?: string } = {},
+): Line[] {
+  const gap = options.gap ?? 1;
+  const widths = resolveColumnWidths(width, columns, gap);
+  const specs: ColumnSpec[] = columns.map((c, i) => ({ width: widths[i]!, align: c.align }));
+
+  const header = buildAlignedRow(
+    width,
+    columns.map((c) => ({ text: c.label, fg: palette.label, bold: true })),
+    specs,
+    { gap },
+  );
+
+  const dataRows = rows.map((row) =>
+    buildAlignedRow(
+      width,
+      columns.map((_, i) => {
+        const cell = row.cells[i] ?? { text: '', fg: palette.value };
+        return { text: cell.text, fg: cell.fg ?? palette.value, bg: cell.bg, bold: cell.bold };
+      }),
+      specs,
+      { gap, selected: row.selected, selectedBg: options.selectedBg ?? palette.selectBg },
+    ),
+  );
+
+  return [header, ...dataRows];
+}

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

@@ -23,6 +23,7 @@ import {
   resolveScrollablePanelSection,
   type PanelWorkspaceSection,
 } from './polish.ts';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 
 const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   planning: '#38bdf8',
@@ -366,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));
@@ -512,7 +535,7 @@ export class ProjectPlanningPanel extends BasePanel {
         };
         this.clearError();
       } catch (err) {
-        this.setError(err instanceof Error ? err.message : String(err));
+        this.setError(summarizeError(err));
       } finally {
         this.loading = false;
         this.markDirty();
@@ -647,7 +670,7 @@ export class ProjectPlanningPanel extends BasePanel {
         this.refresh(true);
         this.registerTimer(setTimeout(() => this.refresh(true), 250));
       } catch (err) {
-        this.setError(err instanceof Error ? err.message : String(err));
+        this.setError(summarizeError(err));
         this.requestRender();
       }
     })();
@@ -698,7 +721,7 @@ export class ProjectPlanningPanel extends BasePanel {
         this.dismissPlanning?.();
         this.refresh(true);
       } catch (err) {
-        this.setError(err instanceof Error ? err.message : String(err));
+        this.setError(summarizeError(err));
         this.requestRender();
       }
     })();
@@ -741,7 +764,7 @@ export class ProjectPlanningPanel extends BasePanel {
         });
         this.refresh(true);
       } catch (err) {
-        this.setError(err instanceof Error ? err.message : String(err));
+        this.setError(summarizeError(err));
         this.requestRender();
       }
     })();

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,