@pellux/goodvibes-tui 0.18.4

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

@@ -0,0 +1,199 @@
+// ---------------------------------------------------------------------------
+// ContextVisualizerPanel — stacked bar showing context window composition.
+// ---------------------------------------------------------------------------
+
+import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { BasePanel } from './base-panel.ts';
+import { evaluateSessionMaintenance } from './session-maintenance.ts';
+import type { TurnEvent } from '../runtime/events/index.ts';
+import type { UiEventFeed } from '../runtime/ui-events.ts';
+import type { UiReadModel, UiSessionSnapshot } from '../runtime/ui-read-models.ts';
+import type { SessionMemoryQuery } from '../runtime/ui-service-queries.ts';
+import {
+  buildEmptyState,
+  buildGuidanceLine,
+  buildMeterLine,
+  buildPanelLine,
+  buildStyledPanelLine,
+  buildPanelWorkspace,
+  DEFAULT_PANEL_PALETTE,
+} from './polish.ts';
+
+const C = {
+  convFg: '#cc99ff',
+  overFg: '#ff6666',
+  barEmpty: '#333344',
+  labelFg: '#8888bb',
+} as const;
+
+
+
+interface ContextSnapshot {
+  input: number;
+  limit: number;
+}
+
+function formatK(n: number): string {
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+  return String(n);
+}
+
+export class ContextVisualizerPanel extends BasePanel {
+  private snapshot: ContextSnapshot = { input: 0, limit: 0 };
+  private unsubs: Array<() => void> = [];
+  private readonly sessionMemoryStore: SessionMemoryQuery;
+
+  constructor(
+    private readonly turnEvents: UiEventFeed<TurnEvent>,
+    sessionMemoryStore: SessionMemoryQuery,
+    private getUsage?: () => { input: number; output: number; cacheRead: number; cacheWrite: number; model?: string },
+    private contextLimit?: number,
+    private sessionReadModel?: UiReadModel<UiSessionSnapshot>,
+  ) {
+    super('context', 'Context', 'C', 'ai');
+    this.sessionMemoryStore = sessionMemoryStore;
+    this._attachBus();
+    this._refresh();
+  }
+
+  override onActivate(): void {
+    this.needsRender = true;
+    this._refresh();
+  }
+
+  override onDeactivate(): void {
+    super.onDeactivate();
+  }
+
+  override onDestroy(): void {
+    this._detachBus();
+  }
+
+  render(width: number, height: number): Line[] {
+    if (height <= 0 || width <= 0) return [];
+
+    const input = this.snapshot.input;
+    const limit = this.snapshot.limit;
+    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;
+    if (limit <= 0) {
+      return buildPanelWorkspace(width, height, {
+        title: ' Context Usage',
+        intro: 'Visualize current input-token pressure against the active model context window.',
+        sections: [
+          {
+            lines: buildEmptyState(
+              width,
+              ' Context limit unavailable',
+              'Select a model with a known context window and submit or complete a turn to populate live context usage.',
+              [],
+              DEFAULT_PANEL_PALETTE,
+            ),
+          },
+        ],
+        palette: DEFAULT_PANEL_PALETTE,
+      });
+    }
+
+    return buildPanelWorkspace(width, height, {
+      title: ' Context Usage',
+      intro: 'Visualize current input-token pressure against the active model context window.',
+      sections: [
+        {
+          title: 'Summary',
+          lines: [
+            buildPanelLine(width, [
+              [' Input ', DEFAULT_PANEL_PALETTE.label],
+              [formatK(input), DEFAULT_PANEL_PALETTE.value],
+              ['   Limit ', DEFAULT_PANEL_PALETTE.label],
+              [formatK(limit), DEFAULT_PANEL_PALETTE.info],
+              ['   Fill ', DEFAULT_PANEL_PALETTE.label],
+              [`${pct}%`, overLimit ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.good],
+            ]),
+          ],
+        },
+        {
+          title: 'Usage',
+          lines: [
+            this._renderBar(width, barWidth, input, limit),
+            this._renderSegLine(width, 'Input tokens', input, pct, fg),
+            buildPanelLine(width, [[` ${formatK(input)} / ${formatK(limit)} tokens  (${pct}%)  Refreshes each LLM call`, DEFAULT_PANEL_PALETTE.dim]]),
+          ],
+        },
+        {
+          title: 'Maintenance',
+          lines: this._renderMaintenance(width),
+        },
+      ],
+      palette: DEFAULT_PANEL_PALETTE,
+    });
+  }
+
+  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;
+    return buildMeterLine(width, filled, barWidth, {
+      filled: barFg,
+      empty: C.barEmpty,
+      label: DEFAULT_PANEL_PALETTE.dim,
+    });
+  }
+
+  private _renderSegLine(width: number, label: string, val: number, pct: number, fg: string): Line {
+    const labelPadded = `  ${label}`.padEnd(22);
+    const valStr = formatK(val).padStart(7);
+    const pctStr = `${pct}%`.padStart(5);
+    return buildStyledPanelLine(width, [
+      { text: labelPadded, fg: C.labelFg },
+      { text: valStr, fg },
+      { text: '  ', fg: DEFAULT_PANEL_PALETTE.dim },
+      { text: pctStr, fg },
+    ]);
+  }
+
+  private _refresh(): void {
+    const usage = this.getUsage?.();
+    if (usage) {
+      this.snapshot.input = usage.input;
+      this.snapshot.limit = this.contextLimit ?? 0;
+    }
+    this.markDirty();
+  }
+
+  private _renderMaintenance(width: number): Line[] {
+    const status = evaluateSessionMaintenance({
+      currentTokens: this.snapshot.input,
+      contextWindow: this.snapshot.limit,
+      sessionMemoryCount: this.sessionMemoryStore.list().length,
+      session: this.sessionReadModel?.getSnapshot().session,
+    });
+    const lines: Line[] = [
+      buildPanelLine(width, [[` ${status.summary}`, DEFAULT_PANEL_PALETTE.label]]),
+    ];
+    if (status.reasons[0]) {
+      lines.push(buildPanelLine(width, [[` ${status.reasons[0]}`, DEFAULT_PANEL_PALETTE.dim]]));
+    }
+    if (status.guidanceMode !== 'off' && status.nextSteps[0]) {
+      lines.push(buildGuidanceLine(width, status.nextSteps[0], 'open the suggested maintenance action', DEFAULT_PANEL_PALETTE));
+    }
+    return lines;
+  }
+
+  private _attachBus(): void {
+    if (this.unsubs.length > 0) return;
+    this.unsubs.push(this.turnEvents.on('TURN_COMPLETED', () => {
+      this._refresh();
+    }));
+    this.unsubs.push(this.turnEvents.on('TURN_SUBMITTED', () => {
+      this._refresh();
+    }));
+  }
+
+  private _detachBus(): void {
+    for (const unsub of this.unsubs) unsub();
+    this.unsubs = [];
+  }
+}

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

@@ -0,0 +1,266 @@
+import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { BasePanel } from './base-panel.ts';
+import type { UiControlPlaneSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
+import { truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import {
+  buildEmptyState,
+  buildGuidanceLine,
+  buildKeyValueLine,
+  buildPanelLine,
+  buildPanelWorkspace,
+  DEFAULT_PANEL_PALETTE,
+  resolvePrimaryScrollableSection,
+  type PanelWorkspaceSection,
+} from './polish.ts';
+
+const C = {
+  ...DEFAULT_PANEL_PALETTE,
+  header: '#94a3b8',
+  headerBg: '#1e293b',
+  ok: '#22c55e',
+  warn: '#eab308',
+  error: '#ef4444',
+  info: '#38bdf8',
+  selectBg: '#0f172a',
+} as const;
+
+function formatTime(value?: number): string {
+  if (!value) return 'n/a';
+  return new Date(value).toLocaleString();
+}
+
+function connectionColor(state: string): string {
+  if (state === 'connected' || state === 'healthy') return C.ok;
+  if (state === 'degraded' || state === 'connecting' || state === 'initializing') return C.warn;
+  if (state === 'terminal_failure') return C.error;
+  return C.dim;
+}
+
+export class ControlPlanePanel extends BasePanel {
+  private readonly unsub: (() => void) | null;
+  private selectedIndex = 0;
+  private scrollOffset = 0;
+
+  public constructor(private readonly readModel?: UiReadModel<UiControlPlaneSnapshot>) {
+    super('control-plane', 'Control Plane', 'C', 'monitoring');
+    this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
+  }
+
+  public override onDestroy(): void {
+    this.unsub?.();
+  }
+
+  public handleInput(key: string): boolean {
+    const clients = this.clients();
+    if (clients.length === 0) return false;
+    if (key === 'up' || key === 'k') {
+      this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+      this.markDirty();
+      return true;
+    }
+    if (key === 'down' || key === 'j') {
+      this.selectedIndex = Math.min(clients.length - 1, this.selectedIndex + 1);
+      this.markDirty();
+      return true;
+    }
+    return false;
+  }
+
+  private clients() {
+    if (!this.readModel) return [];
+    return [...this.readModel.getSnapshot().clients];
+  }
+
+  public render(width: number, height: number): Line[] {
+    this.needsRender = false;
+    const intro = 'Shared daemon control plane state, live clients, approval pressure, and recent omnichannel session posture.';
+
+    if (!this.readModel) {
+      const workspace = buildPanelWorkspace(width, height, {
+        title: 'Control Plane',
+        intro,
+        sections: [{
+          lines: buildEmptyState(
+            width,
+            ' Runtime read model not wired.',
+            'This panel needs the shared control-plane read model to inspect clients, requests, and approvals.',
+            [{ command: '/cockpit', summary: 'use the cockpit while control-plane wiring is unavailable' }],
+            C,
+          ),
+        }],
+        palette: C,
+      });
+      while (workspace.length < height) workspace.push(createEmptyLine(width));
+      return workspace;
+    }
+
+    const snapshot = this.readModel.getSnapshot();
+    const approvals = snapshot.approvals;
+    const sessions = snapshot.sessions;
+    const recentEvents = snapshot.recentEvents;
+    const clients = this.clients();
+
+    const summarySection: PanelWorkspaceSection = {
+      title: 'Posture',
+      lines: [
+        buildKeyValueLine(width, [
+          { label: 'state', value: snapshot.connectionState, valueColor: connectionColor(snapshot.connectionState) },
+          { label: 'clients', value: String(snapshot.activeClientIds.length), valueColor: snapshot.activeClientIds.length > 0 ? C.ok : C.dim },
+          { label: 'requests', value: String(snapshot.requestCount), valueColor: snapshot.requestCount > 0 ? C.info : C.dim },
+          { label: 'errors', value: String(snapshot.errorCount), valueColor: snapshot.errorCount > 0 ? C.error : C.dim },
+        ], C),
+        buildKeyValueLine(width, [
+          { label: 'host', value: `${snapshot.host}:${snapshot.port}`, valueColor: C.value },
+          { label: 'approvals', value: String(approvals.filter((entry) => entry.status === 'pending').length), valueColor: approvals.some((entry) => entry.status === 'pending') ? C.warn : C.dim },
+          { label: 'sessions', value: String(sessions.length), valueColor: sessions.length > 0 ? C.info : C.dim },
+          { label: 'events', value: String(recentEvents.length), valueColor: recentEvents.length > 0 ? C.info : C.dim },
+        ], C),
+        buildGuidanceLine(width, '/cockpit', 'use the web operator surface or daemon APIs for direct interventions while this panel tracks overall posture', C),
+      ],
+    };
+
+    if (clients.length === 0 && approvals.length === 0 && sessions.length === 0) {
+      const workspace = buildPanelWorkspace(width, height, {
+        title: 'Control Plane',
+        intro,
+        sections: [
+          summarySection,
+          {
+            lines: buildEmptyState(
+              width,
+              ' No control-plane activity recorded.',
+              'Start the daemon, connect a surface, or trigger an approval to populate this operator panel.',
+              [
+                { command: '/cockpit', summary: 'watch operator posture from the terminal' },
+                { command: '/schedule list', summary: 'run automation that creates surface and daemon traffic' },
+              ],
+              C,
+            ),
+          },
+        ],
+        palette: C,
+      });
+      while (workspace.length < height) workspace.push(createEmptyLine(width));
+      return workspace;
+    }
+
+    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, clients.length - 1));
+    const selected = clients[this.selectedIndex];
+
+    const detailSection: PanelWorkspaceSection = selected
+      ? {
+          title: 'Selected Client',
+          lines: [
+            buildPanelLine(width, [
+              ['  Client: ', C.label],
+              [selected.label, C.value],
+              ['  Kind: ', C.label],
+              [selected.kind, C.info],
+            ]),
+            buildPanelLine(width, [
+              ['  Transport: ', C.label],
+              [selected.transport, C.value],
+              ['  Connected: ', C.label],
+              [selected.connected ? 'yes' : 'no', selected.connected ? C.ok : C.warn],
+            ]),
+            buildPanelLine(width, [
+              ['  Route: ', C.label],
+              [selected.routeId ?? 'n/a', C.dim],
+              ['  Session: ', C.label],
+              [selected.sessionId ?? 'n/a', C.dim],
+            ]),
+            buildPanelLine(width, [
+              ['  Last seen: ', C.label],
+              [formatTime(selected.lastSeenAt), C.dim],
+              ['  Remote: ', C.label],
+              [truncateDisplay(selected.remoteAddress ?? 'n/a', Math.max(0, width - 36)), C.dim],
+            ]),
+          ],
+        }
+      : {
+          title: 'Selected Client',
+          lines: [buildPanelLine(width, [['  No connected client selected.', C.dim]])],
+        };
+
+    const approvalsSection: PanelWorkspaceSection = {
+      title: 'Approvals',
+      lines: approvals.length > 0
+        ? approvals.slice(0, 6).map((approval) => buildPanelLine(width, [
+            [' ', C.label],
+            [approval.status.padEnd(10), approval.status === 'pending' ? C.warn : approval.status === 'approved' ? C.ok : approval.status === 'denied' ? C.error : C.dim],
+            [` ${truncateDisplay(approval.request.tool, 16).padEnd(16)}`, C.value],
+            [` ${truncateDisplay(approval.sessionId ?? approval.id, Math.max(0, width - 30))}`, C.dim],
+          ]))
+        : [buildPanelLine(width, [['  No recent approvals.', C.dim]])],
+    };
+
+    const sessionsSection: PanelWorkspaceSection = {
+      title: 'Sessions',
+      lines: sessions.length > 0
+        ? sessions.slice(0, 6).map((session) => buildPanelLine(width, [
+            [' ', C.label],
+            [session.status.padEnd(10), session.status === 'active' ? C.ok : C.dim],
+            [` ${truncateDisplay(session.title, 20).padEnd(20)}`, C.value],
+            [` ${truncateDisplay(session.activeAgentId ?? session.id, Math.max(0, width - 34))}`, C.dim],
+          ]))
+        : [buildPanelLine(width, [['  No shared sessions recorded.', C.dim]])],
+    };
+
+    const eventsSection: PanelWorkspaceSection = {
+      title: 'Recent Events',
+      lines: recentEvents.length > 0
+        ? recentEvents.slice(0, 6).map((event) => buildPanelLine(width, [
+            [' ', C.label],
+            [truncateDisplay(event.event, 16).padEnd(16), C.info],
+            [` ${truncateDisplay(typeof event.payload === 'string' ? event.payload : JSON.stringify(event.payload) ?? '', Math.max(0, width - 19))}`, C.dim],
+          ]))
+        : [buildPanelLine(width, [['  No recent control-plane events.', C.dim]])],
+    };
+
+    const resolvedClients = resolvePrimaryScrollableSection(width, height, {
+      intro,
+      footerLines: [buildPanelLine(width, [['  Up/Down move through connected clients', C.dim]])],
+      palette: C,
+      beforeSections: [summarySection],
+      section: {
+        title: 'Clients',
+        scrollableLines: clients.map((client, absolute) => {
+          const bg = absolute === this.selectedIndex ? C.selectBg : undefined;
+          return buildPanelLine(width, [
+            [' ', C.label, bg],
+            [client.kind.padEnd(10), C.info, bg],
+            [` ${truncateDisplay(client.label, 20).padEnd(20)}`, C.value, bg],
+            [` ${client.transport.padEnd(12)}`, C.dim, bg],
+            [` ${truncateDisplay(formatTime(client.lastSeenAt), Math.max(0, width - 46))}`, C.dim, bg],
+          ]);
+        }),
+        selectedIndex: this.selectedIndex,
+        scrollOffset: this.scrollOffset,
+        guardRows: 1,
+        minRows: 4,
+        appendWindowSummary: { dimColor: C.dim },
+      },
+      afterSections: [detailSection, approvalsSection, sessionsSection, eventsSection],
+    });
+    this.scrollOffset = resolvedClients.scrollOffset;
+
+    const sections: PanelWorkspaceSection[] = [
+      summarySection,
+      resolvedClients.section,
+      detailSection,
+      approvalsSection,
+      sessionsSection,
+      eventsSection,
+    ];
+    const lines = buildPanelWorkspace(width, height, {
+      title: 'Control Plane',
+      intro,
+      sections,
+      footerLines: [buildPanelLine(width, [['  Up/Down move through connected clients', C.dim]])],
+      palette: C,
+    });
+    while (lines.length < height) lines.push(createEmptyLine(width));
+    return lines.slice(0, height);
+  }
+}