@pellux/goodvibes-tui 0.26.0 → 0.28.0

package/src/panels/communication-panel.ts

@@ -4,13 +4,17 @@ import type { UiCommunicationSnapshot, UiReadModel } from '../runtime/ui-read-mo
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
   buildBodyText,
+  buildDetailBlock,
   buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
+  buildStatusBadge,
   DEFAULT_PANEL_PALETTE,
   type PanelPalette,
+  type StatusBadgeKind,
 } from './polish.ts';
 import { createEmptyLine } from '../types/grid.ts';
 
@@ -26,13 +30,28 @@ const C = {
 
 type CommunicationRecord = UiCommunicationSnapshot['records'][number];
 
+function statusBadgeKind(status: CommunicationRecord['status']): StatusBadgeKind {
+  return status === 'blocked' ? 'blocked' : status === 'delivered' ? 'completed' : 'running';
+}
+
+function fmtAgo(ts: number): string {
+  const sec = Math.max(0, Math.floor((Date.now() - ts) / 1000));
+  if (sec < 60) return `${sec}s`;
+  if (sec < 3600) return `${Math.floor(sec / 60)}m`;
+  return `${Math.floor(sec / 3600)}h`;
+}
+
 export class CommunicationPanel extends ScrollableListPanel<CommunicationRecord> {
   private readonly readModel?: UiReadModel<UiCommunicationSnapshot>;
   private readonly unsub: (() => void) | null;
+  /** When true, the list is narrowed to blocked messages only (b toggles). */
+  private blockedOnly = false;
 
   public constructor(readModel?: UiReadModel<UiCommunicationSnapshot>) {
     super('communication', 'Communication', 'Y', 'monitoring');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter messages';
     this.readModel = readModel;
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }
@@ -47,18 +66,47 @@ export class CommunicationPanel extends ScrollableListPanel<CommunicationRecord>
 
   protected getItems(): readonly CommunicationRecord[] {
     if (!this.readModel) return [];
-    return this.readModel.getSnapshot().records;
+    const records = this.readModel.getSnapshot().records;
+    return this.blockedOnly ? records.filter((r) => r.status === 'blocked') : records;
   }
 
-  protected renderItem(record: CommunicationRecord, index: number, selected: boolean, width: number): Line {
+  protected override filterMatches(record: CommunicationRecord, q: string): boolean {
+    return (record.content ?? '').toLowerCase().includes(q)
+      || record.kind.toLowerCase().includes(q)
+      || String(record.fromId ?? '').toLowerCase().includes(q)
+      || String(record.toId ?? '').toLowerCase().includes(q);
+  }
+
+  public override handleInput(key: string): boolean {
+    // `b` toggles the blocked-lanes-only view — guarded so it only acts when not
+    // typing into the filter input.
+    if (key === 'b' && !this.filterActive) {
+      this.blockedOnly = !this.blockedOnly;
+      this.selectedIndex = 0;
+      this.markDirty();
+      return true;
+    }
+    return super.handleInput(key);
+  }
+
+  protected renderItem(record: CommunicationRecord, _index: number, selected: boolean, width: number): Line {
     const bg = selected ? C.selectBg : undefined;
-    const color = record.status === 'blocked' ? C.error : record.status === 'delivered' ? C.ok : C.info;
+    const badge = buildStatusBadge(statusBadgeKind(record.status), record.status)[0]!;
+    const route = truncateDisplay(`${record.fromId} → ${record.toId}`, 26);
+    const contentWidth = Math.max(0, width - 50);
+    // Blocked messages have no delivered content; surface the policy reason
+    // inline so the most important detail (why a lane is blocked) is visible
+    // without selecting the row.
+    const tail = record.status === 'blocked' && record.reason
+      ? { text: record.reason, fg: C.warn }
+      : { text: record.content, fg: C.dim };
     return buildPanelLine(width, [
       [' ', C.label, bg],
-      [record.status.padEnd(10), color, bg],
-      [` ${record.kind.padEnd(10)}`, C.info, bg],
-      [` ${truncateDisplay(`${record.fromId} -> ${record.toId}`, 28).padEnd(28)}`, C.value, bg],
-      [` ${truncateDisplay(record.content, Math.max(0, width - 53))}`, C.dim, bg],
+      [`${fmtAgo(record.timestamp)} `.padStart(5), C.dim, bg],
+      [` ${badge.text} `.padEnd(12), badge.fg, bg],
+      [`${record.kind} `.padEnd(9), C.info, bg],
+      [`${route} `.padEnd(27), C.value, bg],
+      [truncateDisplay(tail.text, contentWidth), tail.fg, bg],
     ]);
   }
 
@@ -68,7 +116,7 @@ export class CommunicationPanel extends ScrollableListPanel<CommunicationRecord>
 
   protected override getEmptyStateActions(): Array<{ command: string; summary: string }> {
     return [
-      { command: '/orchestration', summary: 'review graphs and recursive agent activity' },
+      { command: '/orchestration', summary: 'review graphs and recursive agent activity that emit messages' },
       { command: '/communication', summary: 'reopen this workspace once the runtime emits message traffic' },
     ];
   }
@@ -98,56 +146,73 @@ export class CommunicationPanel extends ScrollableListPanel<CommunicationRecord>
     const snapshot = this.readModel.getSnapshot();
     const records = this.getItems();
 
-    const postureLines: Line[] = [
-      buildPanelLine(width, [['  Communication posture', C.label]]),
-      buildKeyValueLine(width, [
-        { label: 'sent', value: String(snapshot.totalSent), valueColor: snapshot.totalSent > 0 ? C.info : C.dim },
-        { label: 'delivered', value: String(snapshot.totalDelivered), valueColor: snapshot.totalDelivered > 0 ? C.ok : C.dim },
-        { label: 'blocked', value: String(snapshot.totalBlocked), valueColor: snapshot.totalBlocked > 0 ? C.error : C.dim },
-      ], C),
-      buildGuidanceLine(width, '/orchestration', 'inspect recursive routing, message handoff, and blocked broadcast posture', C),
+    // Posture: blocked lanes / message flow surfaced first per the panel's purpose.
+    const postureLines = (): Line[] => [
+      buildPanelLine(width, [
+        ['  ', C.label],
+        ...buildStatusBadge('blocked', 'blocked', { count: snapshot.totalBlocked }),
+        ['    ', C.dim],
+        ...buildStatusBadge('completed', 'delivered', { count: snapshot.totalDelivered }),
+        ['    ', C.dim],
+        ...buildStatusBadge('running', 'sent', { count: snapshot.totalSent }),
+        ...(this.blockedOnly ? ([['   (blocked-only view)', C.warn]] as Array<[string, string]>) : []),
+      ]),
+      snapshot.totalBlocked > 0
+        ? buildPanelLine(width, [[`  ${snapshot.totalBlocked} message${snapshot.totalBlocked !== 1 ? 's' : ''} blocked by routing policy — press b to isolate blocked lanes.`, C.warn]])
+        : buildGuidanceLine(width, '/orchestration', 'inspect recursive routing, message handoff, and broadcast posture', C),
     ];
 
     if (records.length === 0) {
       return this.renderList(width, height, {
         title: 'Communication Control Room',
-        header: postureLines,
+        header: postureLines(),
+        footer: [buildKeyboardHints(width, this.footerHints(false), C)],
       });
     }
 
     this.clampSelection();
-    const selected = records[this.selectedIndex];
-
-    // Update posture with selected info
-    const postureWithSelected: Line[] = [
-      buildPanelLine(width, [['  Communication posture', C.label]]),
-      buildKeyValueLine(width, [
-        { label: 'sent', value: String(snapshot.totalSent), valueColor: snapshot.totalSent > 0 ? C.info : C.dim },
-        { label: 'delivered', value: String(snapshot.totalDelivered), valueColor: snapshot.totalDelivered > 0 ? C.ok : C.dim },
-        { label: 'blocked', value: String(snapshot.totalBlocked), valueColor: snapshot.totalBlocked > 0 ? C.error : C.dim },
-        { label: 'selected', value: `${selected?.fromId ?? 'n/a'} -> ${selected?.toId ?? 'n/a'}`, valueColor: C.value },
-      ], C),
-      buildGuidanceLine(width, '/orchestration', 'inspect recursive routing, message handoff, and blocked broadcast posture', C),
-    ];
+    const visible = this.getVisibleItems();
+    const selected = visible[this.selectedIndex];
 
-    const footerLines: Line[] = [];
+    const detailLines: Line[] = [];
     if (selected) {
-      footerLines.push(
-        buildPanelLine(width, [['  Route: ', C.label], [`${selected.scope} / ${selected.kind}`, C.value], ['  Status: ', C.label], [selected.status, selected.status === 'blocked' ? C.error : C.ok]]),
-        buildPanelLine(width, [['  From: ', C.label], [selected.fromId, C.value], ['  To: ', C.label], [selected.toId, C.value]]),
-        buildPanelLine(width, [['  Roles: ', C.label], [`${selected.fromRole ?? 'unknown'} -> ${selected.toRole ?? 'unknown'}`, C.dim]]),
-      );
-      if (selected.reason) {
-        footerLines.push(buildPanelLine(width, [['  Reason: ', C.label], [truncateDisplay(selected.reason, Math.max(0, width - 11)), C.warn]]));
-      }
-      footerLines.push(...buildBodyText(width, ` Content: ${selected.content}`, C));
+      detailLines.push(...buildDetailBlock(width, `Message · ${selected.kind}`, [
+        buildKeyValueLine(width, [
+          { label: 'status', value: selected.status, valueColor: selected.status === 'blocked' ? C.error : C.ok },
+          { label: 'scope', value: selected.scope, valueColor: C.value },
+          { label: 'when', value: `${fmtAgo(selected.timestamp)} ago`, valueColor: C.dim },
+        ], C),
+        buildKeyValueLine(width, [
+          { label: 'from', value: `${selected.fromId} (${selected.fromRole ?? 'unknown'})`, valueColor: C.value },
+          { label: 'to', value: `${selected.toId} (${selected.toRole ?? 'unknown'})`, valueColor: C.value },
+        ], C),
+        ...(selected.reason
+          ? buildBodyText(width, `blocked: ${selected.reason}`, C, C.warn)
+          : []),
+        ...buildBodyText(width, selected.content, C, C.value),
+      ], C));
     }
-    footerLines.push(buildPanelLine(width, [['  Up/Down move through messages', C.dim]]));
 
     return this.renderList(width, height, {
       title: 'Communication Control Room',
-      header: postureWithSelected,
-      footer: footerLines,
+      header: postureLines(),
+      footer: [...detailLines, buildKeyboardHints(width, this.footerHints(true), C)],
     });
   }
+
+  // Context-aware hints: filter keys reflect filter state, `b` reflects the
+  // blocked-only toggle, and the inspect hint only appears when rows exist.
+  private footerHints(hasRows: boolean): Array<{ keys: string; label: string }> {
+    const hints: Array<{ keys: string; label: string }> = [];
+    if (hasRows) hints.push({ keys: '↑/↓', label: 'select' });
+    hints.push({ keys: 'b', label: this.blockedOnly ? 'show all lanes' : 'blocked only' });
+    if (this.filterActive) {
+      hints.push({ keys: 'Esc', label: 'clear filter' });
+    } else if (this.filterQuery) {
+      hints.push({ keys: '/', label: 'edit filter' }, { keys: 'Esc', label: 'clear filter' });
+    } else {
+      hints.push({ keys: '/', label: 'filter' });
+    }
+    return hints;
+  }
 }

package/src/panels/context-visualizer-panel.ts

@@ -13,19 +13,19 @@ import type { SessionMemoryQuery } from '../runtime/ui-service-queries.ts';
 import {
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
   buildMeterLine,
   buildPanelLine,
+  buildStatusPill,
   buildStyledPanelLine,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
 } from './polish.ts';
 
-const C = {
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   convFg: '#cc99ff',
-  overFg: '#ff6666',
-  barEmpty: '#333344',
-  labelFg: '#8888bb',
-} as const;
+});
 
 
 
@@ -49,8 +49,9 @@ export class ContextVisualizerPanel extends BasePanel {
     sessionMemoryStore: SessionMemoryQuery,
     private readonly configManager: Pick<ConfigManager, 'get'>,
     private getUsage?: () => { input: number; output: number; cacheRead: number; cacheWrite: number; model?: string },
-    private contextLimit?: number,
+    private contextLimit?: number | (() => number),
     private sessionReadModel?: UiReadModel<UiSessionSnapshot>,
+    private getLastInputTokens?: () => number,
   ) {
     super('context', 'Context', 'C', 'ai');
     this.sessionMemoryStore = sessionMemoryStore;
@@ -80,7 +81,7 @@ export class ContextVisualizerPanel extends BasePanel {
     const pct = limit > 0 ? Math.min(100, Math.round((input / limit) * 100)) : 0;
     const barWidth = Math.max(1, width - 2);
     const overLimit = limit > 0 && input > limit;
-    const fg = overLimit ? C.overFg : C.convFg;
+    const fg = overLimit ? C.bad : C.convFg;
     if (limit <= 0) {
       return buildPanelWorkspace(width, height, {
         title: ' Context Usage',
@@ -91,7 +92,10 @@ export class ContextVisualizerPanel extends BasePanel {
               width,
               ' Context limit unavailable',
               'Select a model with a known context window and submit or complete a turn to populate live context usage.',
-              [],
+              [
+                { command: '/model', summary: 'pick an active model so its context window is known' },
+                { command: '/context', summary: 'review current context composition and pressure' },
+              ],
               DEFAULT_PANEL_PALETTE,
             ),
           },
@@ -100,6 +104,11 @@ export class ContextVisualizerPanel extends BasePanel {
       });
     }
 
+    // Pressure state drives the headline pill and the footer hint so the most
+    // important signal — am I about to overflow context — is obvious at a glance.
+    const pressureState = overLimit ? 'bad' : pct >= 90 ? 'bad' : pct >= 75 ? 'warn' : 'good';
+    const pressureLabel = overLimit ? 'over limit' : pct >= 90 ? 'critical' : pct >= 75 ? 'elevated' : 'healthy';
+
     return buildPanelWorkspace(width, height, {
       title: ' Context Usage',
       intro: 'Visualize current input-token pressure against the active model context window.',
@@ -114,6 +123,8 @@ export class ContextVisualizerPanel extends BasePanel {
               [formatK(limit), DEFAULT_PANEL_PALETTE.info],
               ['   Fill ', DEFAULT_PANEL_PALETTE.label],
               [`${pct}%`, overLimit ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.good],
+              ['   ', DEFAULT_PANEL_PALETTE.dim],
+              ...buildStatusPill(pressureState, pressureLabel),
             ]),
           ],
         },
@@ -130,6 +141,18 @@ export class ContextVisualizerPanel extends BasePanel {
           lines: this._renderMaintenance(width),
         },
       ],
+      footerLines: [
+        buildKeyboardHints(width, pressureState === 'good'
+          ? [
+              { keys: '/context', label: 'composition' },
+              { keys: '/model', label: 'switch model' },
+            ]
+          : [
+              { keys: '/compact', label: 'reduce context now' },
+              { keys: '/context', label: 'composition' },
+              { keys: '/model', label: 'larger window' },
+            ], DEFAULT_PANEL_PALETTE),
+      ],
       palette: DEFAULT_PANEL_PALETTE,
     });
     });
@@ -138,10 +161,10 @@ export class ContextVisualizerPanel extends BasePanel {
   private _renderBar(width: number, barWidth: number, input: number, limit: number): Line {
     const filled = limit > 0 ? Math.min(barWidth, Math.round((input / limit) * barWidth)) : 0;
     const overLimit = limit > 0 && input > limit;
-    const barFg = overLimit ? C.overFg : C.convFg;
+    const barFg = overLimit ? C.bad : C.convFg;
     return buildMeterLine(width, filled, barWidth, {
       filled: barFg,
-      empty: C.barEmpty,
+      empty: C.empty,
       label: DEFAULT_PANEL_PALETTE.dim,
     });
   }
@@ -151,7 +174,7 @@ export class ContextVisualizerPanel extends BasePanel {
     const valStr = formatK(val).padStart(7);
     const pctStr = `${pct}%`.padStart(5);
     return buildStyledPanelLine(width, [
-      { text: labelPadded, fg: C.labelFg },
+      { text: labelPadded, fg: C.label },
       { text: valStr, fg },
       { text: '  ', fg: DEFAULT_PANEL_PALETTE.dim },
       { text: pctStr, fg },
@@ -159,10 +182,21 @@ export class ContextVisualizerPanel extends BasePanel {
   }
 
   private _refresh(): void {
-    const usage = this.getUsage?.();
-    if (usage) {
-      this.snapshot.input = usage.input;
-      this.snapshot.limit = this.contextLimit ?? 0;
+    // Resolve the context window live so the panel tracks /model switches when a
+    // getter is supplied; a plain number stays fixed at its provided value.
+    this.snapshot.limit =
+      typeof this.contextLimit === 'function' ? this.contextLimit() : (this.contextLimit ?? 0);
+    // Prefer the live per-call input occupancy (cache-inclusive, matching the
+    // Tokens panel and the auto-compaction threshold) when a getter is wired;
+    // otherwise fall back to the cumulative usage input.
+    const lastInput = this.getLastInputTokens?.();
+    if (lastInput !== undefined) {
+      this.snapshot.input = lastInput;
+    } else {
+      const usage = this.getUsage?.();
+      if (usage) {
+        this.snapshot.input = usage.input;
+      }
     }
     this.markDirty();
   }

package/src/panels/control-plane-panel.ts

@@ -7,8 +7,10 @@ import {
   buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
+  buildSectionHeader,
   DEFAULT_PANEL_PALETTE,
   type PanelPalette,
 } from './polish.ts';
@@ -44,6 +46,8 @@ export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
   public constructor(private readonly readModel?: UiReadModel<UiControlPlaneSnapshot>) {
     super('control-plane', 'Control Plane', 'C', 'monitoring');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter clients';
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }
 
@@ -55,6 +59,12 @@ export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
     return C;
   }
 
+  protected override filterMatches(client: ControlPlaneClient, q: string): boolean {
+    return client.kind.toLowerCase().includes(q)
+      || client.label.toLowerCase().includes(q)
+      || client.transport.toLowerCase().includes(q);
+  }
+
   protected getItems(): readonly ControlPlaneClient[] {
     if (!this.readModel) return [];
     return this.readModel.getSnapshot().clients;
@@ -170,6 +180,8 @@ export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
     }
 
     if (approvals.length > 0) {
+      const pending = approvals.filter((entry) => entry.status === 'pending').length;
+      footerLines.push(buildSectionHeader(width, `Approvals (${pending} pending / ${approvals.length})`, C));
       footerLines.push(
         ...approvals.slice(0, 6).map((approval) => buildPanelLine(width, [
           [' ', C.label],
@@ -181,6 +193,8 @@ export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
     }
 
     if (sessions.length > 0) {
+      const activeSessions = sessions.filter((session) => session.status === 'active').length;
+      footerLines.push(buildSectionHeader(width, `Sessions (${activeSessions} active / ${sessions.length})`, C));
       footerLines.push(
         ...sessions.slice(0, 6).map((session) => buildPanelLine(width, [
           [' ', C.label],
@@ -192,6 +206,7 @@ export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
     }
 
     if (recentEvents.length > 0) {
+      footerLines.push(buildSectionHeader(width, `Recent Events (${recentEvents.length})`, C));
       footerLines.push(
         ...recentEvents.slice(0, 6).map((event) => buildPanelLine(width, [
           [' ', C.label],
@@ -200,7 +215,18 @@ export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
         ])),
       );
     }
-    footerLines.push(buildPanelLine(width, [['  Up/Down move through connected clients', C.dim]]));
+    footerLines.push(
+      this.filterActive
+        ? buildKeyboardHints(width, [
+            { keys: 'type', label: 'filter clients' },
+            { keys: 'Enter', label: 'apply' },
+            { keys: 'Esc', label: 'clear' },
+          ], C)
+        : buildKeyboardHints(width, [
+            { keys: 'Up/Down', label: 'select client' },
+            { keys: '/', label: 'filter' },
+          ], C),
+    );
 
     return this.renderList(width, height, {
       title: 'Control Plane',