@pellux/goodvibes-agent 0.1.0

package/src/panels/confirm-state.ts

@@ -0,0 +1,61 @@
+// ---------------------------------------------------------------------------
+// useConfirmState<T> — reusable inline y/n confirmation helper
+//
+// Pattern (chosen over ConfirmableListPanel base class):
+//   - Composable: any panel holds a ConfirmState field, not a new base class
+//   - Identical y/n UX everywhere: y confirms, n/Esc cancels, any other key
+//     is absorbed (does nothing) while confirm is active
+//   - Render: caller calls renderConfirmLines(width, state) to get the two
+//     lines that replace the normal content area when confirming
+// ---------------------------------------------------------------------------
+
+import type { Line } from '../types/grid.ts';
+import { buildPanelLine } from './polish.ts';
+import { DEFAULT_PANEL_PALETTE } from './polish.ts';
+
+export interface ConfirmState<T = string> {
+  /** The subject of the confirmation (e.g. item name or id). */
+  readonly subject: T;
+  /** Human-readable label for the item being destroyed. */
+  readonly label: string;
+}
+
+/**
+ * Call this from a panel's handleInput() BEFORE any other key handling.
+ *
+ * Returns:
+ *   - `'confirmed'` — user pressed y; caller must execute the action and
+ *     clear state (set confirm to null)
+ *   - `'cancelled'` — user pressed n or Esc; caller must clear state
+ *   - `'absorbed'`  — any other key while confirm is active; caller returns true
+ *   - `'inactive'`  — no confirm pending; caller continues normal dispatch
+ */
+export function handleConfirmInput<T = string>(
+  confirm: ConfirmState<T> | null,
+  key: string,
+): 'confirmed' | 'cancelled' | 'absorbed' | 'inactive' {
+  if (!confirm) return 'inactive';
+  if (key === 'y') return 'confirmed';
+  if (key === 'n' || key === 'escape') return 'cancelled';
+  return 'absorbed';
+}
+
+/**
+ * Build the two confirmation lines to show in place of the normal list body.
+ * Callers embed these lines in a workspace section titled 'Confirmation'.
+ */
+export function renderConfirmLines<T = string>(width: number, state: ConfirmState<T>): Line[] {
+  const palette = DEFAULT_PANEL_PALETTE;
+  return [
+    buildPanelLine(width, [[
+      ` Delete "${state.label}"?`,
+      palette.warn,
+    ]]),
+    buildPanelLine(width, [
+      [' y', palette.info],
+      ['  confirm delete', palette.dim],
+      ['   n / Esc', palette.info],
+      ['  cancel', palette.dim],
+    ]),
+  ];
+}

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

@@ -0,0 +1,204 @@
+// ---------------------------------------------------------------------------
+// ContextVisualizerPanel — stacked bar showing context window composition.
+// ---------------------------------------------------------------------------
+
+import type { ConfigManager } from '@pellux/goodvibes-sdk/platform/config';
+import type { Line } from '../types/grid.ts';
+import { BasePanel } from './base-panel.ts';
+import { evaluateSessionMaintenance } from '@/runtime/index.ts';
+import type { TurnEvent } from '@/runtime/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 readonly configManager: Pick<ConfigManager, 'get'>,
+    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[] {
+    return this.trackedRender(() => {
+    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({
+      configManager: this.configManager,
+      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,211 @@
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
+import type { UiControlPlaneSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
+import {
+  buildEmptyState,
+  buildGuidanceLine,
+  buildKeyValueLine,
+  buildPanelLine,
+  buildPanelWorkspace,
+  DEFAULT_PANEL_PALETTE,
+  type PanelPalette,
+} 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;
+}
+
+type ControlPlaneClient = UiControlPlaneSnapshot['clients'][number];
+
+export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
+  private readonly unsub: (() => void) | null;
+
+  public constructor(private readonly readModel?: UiReadModel<UiControlPlaneSnapshot>) {
+    super('control-plane', 'Control Plane', 'C', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
+  }
+
+  public override onDestroy(): void {
+    this.unsub?.();
+  }
+
+  protected override getPalette(): PanelPalette {
+    return C;
+  }
+
+  protected getItems(): readonly ControlPlaneClient[] {
+    if (!this.readModel) return [];
+    return this.readModel.getSnapshot().clients;
+  }
+
+  protected renderItem(client: ControlPlaneClient, _index: number, selected: boolean, width: number): Line {
+    const bg = selected ? 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],
+    ]);
+  }
+
+  protected override getEmptyStateMessage(): string {
+    return ' No control-plane activity recorded.';
+  }
+
+  protected override getEmptyStateActions(): Array<{ command: string; summary: string }> {
+    return [
+      { command: '/cockpit', summary: 'watch operator posture from the terminal' },
+      { command: '/schedule list', summary: 'inspect externally managed automation without starting jobs here' },
+    ];
+  }
+
+  public render(width: number, height: number): Line[] {
+    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.getItems();
+
+    const headerLines: Line[] = [
+      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) {
+      return this.renderList(width, height, {
+        title: 'Control Plane',
+        header: headerLines,
+        emptyMessage: ' No control-plane activity recorded.',
+      });
+    }
+
+    this.clampSelection();
+    const selected = clients[this.selectedIndex];
+
+    const footerLines: Line[] = [];
+    if (selected) {
+      footerLines.push(
+        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],
+        ]),
+      );
+    } else {
+      footerLines.push(buildPanelLine(width, [['  No connected client selected.', C.dim]]));
+    }
+
+    if (approvals.length > 0) {
+      footerLines.push(
+        ...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],
+        ])),
+      );
+    }
+
+    if (sessions.length > 0) {
+      footerLines.push(
+        ...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],
+        ])),
+      );
+    }
+
+    if (recentEvents.length > 0) {
+      footerLines.push(
+        ...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],
+        ])),
+      );
+    }
+    footerLines.push(buildPanelLine(width, [['  Up/Down move through connected clients', C.dim]]));
+
+    return this.renderList(width, height, {
+      title: 'Control Plane',
+      header: headerLines,
+      footer: footerLines,
+    });
+  }
+}