@pellux/goodvibes-tui 2.0.21 → 2.1.0

package/src/input/theme-settings-actions.ts

@@ -0,0 +1,82 @@
+/**
+ * theme-settings-actions, the `display.theme` picker opened from settings.
+ *
+ * Lists 'system' plus every bundled theme (label + the modes it was authored
+ * for). Moving the cursor previews the highlighted theme live (palettes
+ * rebuild, full repaint); Enter stores it in `display.theme`; Esc restores the
+ * theme that was active when the picker opened.
+ */
+
+import type { CommandContext } from './command-registry.ts';
+import type { SelectionItem } from './selection-modal.ts';
+import {
+  getActiveThemeName,
+  listThemeChoices,
+  normalizeThemeName,
+  setActiveThemeName,
+  type ThemeChoice,
+} from '../renderer/theme.ts';
+import { THEME_NAME_CONFIG_KEY } from '../renderer/theme-mode-config.ts';
+import { getTerminalPalette } from '../renderer/terminal-palette.ts';
+
+function variantText(choice: ThemeChoice): string {
+  return choice.variants.length > 1 ? `${choice.variants.join(' + ')}` : `${choice.variants[0] ?? 'dark'} only`;
+}
+
+function systemNote(): string {
+  const palette = getTerminalPalette();
+  const answered = palette !== null
+    && (palette.background !== undefined || palette.foreground !== undefined || palette.ansi.some((slot) => slot !== undefined));
+  return answered ? 'from your terminal colors' : 'terminal colors not read; shows GoodVibes';
+}
+
+/** Build the picker rows (exported for tests). */
+export function buildThemePickerItems(current: string): SelectionItem[] {
+  return listThemeChoices().map((choice) => {
+    const detailParts = [choice.name === 'system' ? systemNote() : variantText(choice)];
+    if (choice.name === current) detailParts.push('(current)');
+    return {
+      id: choice.name,
+      label: choice.label,
+      detail: detailParts.join('  '),
+      category: choice.name === 'system' ? 'follow the terminal' : 'bundled themes',
+      primaryAction: 'select',
+      actions: '[Enter] use theme  [Esc] keep previous',
+    };
+  });
+}
+
+/** Open the theme picker. Returns false when this runtime has no selection modal. */
+export function openThemePicker(ctx: CommandContext): boolean {
+  if (!ctx.openSelection) return false;
+  const configured = normalizeThemeName(ctx.platform.configManager.get(THEME_NAME_CONFIG_KEY));
+  const previous = getActiveThemeName();
+  const repaint = (): void => {
+    ctx.requestFullRepaint?.();
+    ctx.renderRequest();
+  };
+
+  ctx.openSelection('Choose Theme', buildThemePickerItems(configured), {
+    preSelectId: configured,
+    allowSearch: true,
+    primaryVerbLabel: 'Use',
+    onHighlight: (item) => {
+      if (!item || item.id === getActiveThemeName()) return;
+      setActiveThemeName(item.id);
+      repaint();
+    },
+  }, (result) => {
+    if (!result) {
+      if (getActiveThemeName() !== previous) {
+        setActiveThemeName(previous);
+        repaint();
+      }
+      return;
+    }
+    ctx.platform.configManager.setDynamic(THEME_NAME_CONFIG_KEY, result.item.id);
+    const applied = setActiveThemeName(result.item.id);
+    ctx.print(`Theme set to ${applied}.`);
+    repaint();
+  });
+  return true;
+}

package/src/input/usage-modal.ts

@@ -0,0 +1,183 @@
+/**
+ * usage-modal.ts, the Usage modal (/usage, /cost, ctrl+p "usage").
+ *
+ * Reads the session's UsageTracker (runtime/usage-tracker.ts), which has been
+ * collecting since startup, so opening this late loses nothing.
+ *
+ * Keys: tab / shift+tab (or ← →) switch Overview, Turns and Agents; ↑↓ scroll
+ * the turns or pick an agent; c compacts the context now (the modal closes
+ * first so the compaction's own output is visible); b edits the budget alert;
+ * p sets your own price for the current model; r refreshes. Esc closes an open
+ * entry first, then the modal.
+ */
+
+import type { InputToken } from '@pellux/goodvibes-sdk/platform/core';
+import type { SurfaceModal, SurfaceModalHost } from './surface-modal-host.ts';
+import type { SurfaceLayer } from '../renderer/surface-kit.ts';
+import { renderUsageModal, USAGE_TABS, type UsageModalView, type UsageTab } from '../renderer/usage-modal.ts';
+import type { UsageTracker } from '../runtime/usage-tracker.ts';
+import { isTextBackspace } from './delete-key-policy.ts';
+
+export interface UsageModalOptions {
+  readonly tracker: UsageTracker;
+  /** Run the context compaction (the /compact command). */
+  readonly compact: () => void;
+  /** Which tab to open on. */
+  readonly tab?: UsageTab;
+  /** Repaint (the tracker changed, a poll landed). */
+  readonly requestRender?: () => void;
+  /** How often running agents' usage is re-read while the modal is open. */
+  readonly pollMs?: number;
+}
+
+export class UsageModal implements SurfaceModal, UsageModalView {
+  readonly name = 'usage';
+  tab: UsageTab;
+  turnOffset = 0;
+  agentIndex = 0;
+  entry: { kind: 'budget' | 'price'; draft: string } | null = null;
+  status: string | null = null;
+  private readonly unsubscribe: () => void;
+  private pollTimer: ReturnType<typeof setInterval> | null = null;
+
+  constructor(private readonly options: UsageModalOptions) {
+    this.tab = options.tab ?? 'overview';
+    this.unsubscribe = options.tracker.subscribe(() => {
+      this.turnOffset = Math.min(this.turnOffset, Math.max(0, this.tracker.turns().length - 1));
+    });
+    const pollMs = options.pollMs ?? 3_000;
+    if (pollMs > 0) {
+      this.pollTimer = setInterval(() => {
+        if (this.tracker.pollRunningAgents()) options.requestRender?.();
+      }, pollMs);
+    }
+  }
+
+  get tracker(): UsageTracker {
+    return this.options.tracker;
+  }
+
+  onClose(): void {
+    this.unsubscribe();
+    if (this.pollTimer !== null) clearInterval(this.pollTimer);
+    this.pollTimer = null;
+  }
+
+  escape(): boolean {
+    if (this.entry) {
+      this.entry = null;
+      return true;
+    }
+    return false;
+  }
+
+  private stepTab(direction: 1 | -1): void {
+    const index = USAGE_TABS.indexOf(this.tab);
+    this.tab = USAGE_TABS[(index + direction + USAGE_TABS.length) % USAGE_TABS.length]!;
+    this.status = null;
+  }
+
+  private scroll(delta: number): void {
+    if (this.tab === 'agents') {
+      const count = this.tracker.agents().length;
+      if (count === 0) return;
+      this.agentIndex = Math.max(0, Math.min(count - 1, this.agentIndex + delta));
+      return;
+    }
+    const count = this.tracker.turns().length;
+    if (count === 0) return;
+    // Up goes back in time (a larger offset from the newest turn).
+    this.turnOffset = Math.max(0, Math.min(count - 1, this.turnOffset - delta));
+  }
+
+  private openEntry(kind: 'budget' | 'price'): void {
+    if (kind === 'budget') {
+      const current = this.tracker.budget();
+      this.entry = { kind, draft: current > 0 ? String(current) : '' };
+    } else {
+      this.entry = { kind, draft: '' };
+    }
+    this.status = null;
+  }
+
+  private commitEntry(): void {
+    const entry = this.entry;
+    if (!entry) return;
+    if (entry.kind === 'budget') {
+      const raw = entry.draft.trim();
+      const usd = Number(raw);
+      if (raw.length === 0 || !this.tracker.setBudget(usd)) {
+        this.status = 'Budget not changed: type an amount in USD, 0 turns the alert off.';
+      } else {
+        this.status = usd > 0 ? `Budget alert set to $${usd.toFixed(2)}.` : 'Budget alert turned off.';
+      }
+      this.entry = null;
+      return;
+    }
+    if (!this.tracker.canSetModelPrice()) {
+      this.entry = null;
+      return;
+    }
+    const parts = entry.draft.trim().split(/[\s,]+/).filter(Boolean);
+    const input = Number(parts[0]);
+    const output = Number(parts[1]);
+    if (parts.length === 2 && this.tracker.setModelPrice(input, output)) {
+      this.status = `Price saved for ${this.tracker.modelId()}.`;
+      this.entry = null;
+    } else {
+      // A malformed price keeps the entry open so it can be corrected.
+      this.status = 'Type two amounts: input,output in USD per 1M tokens.';
+    }
+  }
+
+  private handleEntryToken(token: InputToken): void {
+    const entry = this.entry!;
+    if (token.type === 'text') {
+      const allowed = entry.kind === 'budget' ? /[0-9.]/ : /[0-9., ]/;
+      for (const ch of token.value) {
+        if (!allowed.test(ch)) continue;
+        if (entry.kind === 'budget' && ch === '.' && entry.draft.includes('.')) continue;
+        entry.draft += ch;
+      }
+      return;
+    }
+    if (token.type !== 'key') return;
+    const key = token.logicalName ?? '';
+    if (key === 'enter') this.commitEntry();
+    else if (isTextBackspace(key)) entry.draft = entry.draft.slice(0, -1);
+  }
+
+  handleToken(token: InputToken, host: SurfaceModalHost): void {
+    if (this.entry) {
+      this.handleEntryToken(token);
+      return;
+    }
+    if (token.type === 'text') {
+      const ch = token.value;
+      if (ch === 'c') {
+        host.close(this, 'done');
+        this.options.compact();
+      } else if (ch === 'b') this.openEntry('budget');
+      else if (ch === 'p') this.openEntry('price');
+      else if (ch === 'r') {
+        this.tracker.pollRunningAgents();
+        this.status = 'Refreshed.';
+      } else if (ch === 'j') this.scroll(1);
+      else if (ch === 'k') this.scroll(-1);
+      return;
+    }
+    if (token.type !== 'key') return;
+    const key = token.logicalName ?? '';
+    if (key === 'tab' && token.shift) this.stepTab(-1);
+    else if (key === 'tab' || key === 'right') this.stepTab(1);
+    else if (key === 'left' || key === '\x1b[Z') this.stepTab(-1);
+    else if (key === 'up') this.scroll(-1);
+    else if (key === 'down') this.scroll(1);
+    else if (key === 'pageup') this.scroll(-5);
+    else if (key === 'pagedown') this.scroll(5);
+  }
+
+  render(screenWidth: number, screenHeight: number): SurfaceLayer {
+    return renderUsageModal(this, screenWidth, screenHeight);
+  }
+}

package/src/input/views.ts

@@ -0,0 +1,97 @@
+/**
+ * views.ts, where every old view name goes now.
+ *
+ * Views live in four kit modals (Usage, Changes, Agents, Notifications), the
+ * session picker and the config-modal surfaces. Old names still arrive from
+ * many places: `/panel open <id>`, notifications that name the view they are
+ * about, cross-modal jumps (the work plan's "show this agent"), saved muscle
+ * memory. resolveViewName turns any of them into the modal that holds that
+ * content now, so none of them dead-ends.
+ */
+
+/** A specific row to select when a view opens (a fleet process id, optionally its kind). */
+export interface ViewTarget {
+  readonly id: string;
+  readonly kind?: string;
+}
+
+export type ViewRoute =
+  | { readonly kind: 'agents'; readonly hosted?: boolean }
+  | { readonly kind: 'usage'; readonly tab?: 'agents' }
+  | { readonly kind: 'changes'; readonly mode?: 'review' | 'git' }
+  | { readonly kind: 'notifications' }
+  | { readonly kind: 'sessions' }
+  | { readonly kind: 'modal'; readonly name: string };
+
+/**
+ * Every old name for the live process console. Fleet absorbed these consoles
+ * before; the Agents modal holds that content now, and the palette uses the
+ * list as search words so typing an old name finds it.
+ */
+export const AGENT_VIEW_NAMES: readonly string[] = [
+  'agents', 'fleet', 'cockpit', 'approval', 'automation', 'routes', 'control-plane', 'worktrees',
+  'tasks', 'orchestration', 'ops', 'ops-control', 'communication', 'incident', 'forensics',
+  'agent-logs', 'inspector', 'wrfc', 'plan', 'processes',
+];
+
+/** Old names for the context and cost consoles. */
+export const USAGE_VIEW_NAMES: readonly string[] = ['usage', 'tokens', 'context', 'cost'];
+
+/** Old names for the git, diff and review consoles. */
+export const CHANGES_VIEW_NAMES: readonly string[] = ['changes', 'git', 'diff', 'review'];
+
+/** Parse `<id>[:<kind>]` (the `--target` flag's value). */
+export function parseViewTarget(raw: string | undefined): ViewTarget | undefined {
+  if (!raw) return undefined;
+  const sep = raw.indexOf(':');
+  return sep >= 0 ? { id: raw.slice(0, sep), kind: raw.slice(sep + 1) || undefined } : { id: raw };
+}
+
+/**
+ * Remove `--target <id>[:<kind>]` from `args` (in place) and return it, so
+ * positional arguments are read the same wherever the flag appears.
+ */
+export function takeTargetFlag(args: string[]): ViewTarget | undefined {
+  const index = args.indexOf('--target');
+  if (index < 0) return undefined;
+  const raw = args[index + 1];
+  args.splice(index, raw === undefined ? 1 : 2);
+  return parseViewTarget(raw);
+}
+
+/**
+ * The modal an old or current view name opens, or null when nothing holds it.
+ * `modalRedirect` resolves config-modal names ('providers', 'services', ...).
+ */
+export function resolveViewName(name: string, modalRedirect: (name: string) => string | undefined): ViewRoute | null {
+  const id = name.trim().toLowerCase();
+  if (!id) return null;
+  if (id === 'hosted') return { kind: 'agents', hosted: true };
+  if (AGENT_VIEW_NAMES.includes(id)) return { kind: 'agents' };
+  // The old cost view's heart was the per-agent cost ledger: Usage's Agents tab.
+  if (id === 'cost') return { kind: 'usage', tab: 'agents' };
+  if (USAGE_VIEW_NAMES.includes(id)) return { kind: 'usage' };
+  if (id === 'review') return { kind: 'changes', mode: 'review' };
+  if (id === 'git') return { kind: 'changes', mode: 'git' };
+  if (CHANGES_VIEW_NAMES.includes(id)) return { kind: 'changes' };
+  if (id === 'notifications') return { kind: 'notifications' };
+  if (id === 'sessions' || id === 'session-picker') return { kind: 'sessions' };
+  if (id === 'local-auth') return { kind: 'modal', name: 'local-auth-modal' };
+  const redirect = modalRedirect(id);
+  if (redirect === 'sessionPicker') return { kind: 'sessions' };
+  if (redirect) return { kind: 'modal', name: redirect };
+  if (id.endsWith('-modal')) return { kind: 'modal', name: id };
+  return null;
+}
+
+/** A one-line description of where a view name goes, for `/panel list`. */
+export function describeViewRoute(route: ViewRoute): string {
+  switch (route.kind) {
+    case 'agents': return route.hosted ? 'Agents (the hosted session)' : 'Agents';
+    case 'usage': return 'Usage';
+    case 'changes': return route.mode === 'review' ? 'Changes (review)' : 'Changes';
+    case 'notifications': return 'Notifications';
+    case 'sessions': return 'Sessions';
+    case 'modal': return route.name;
+  }
+}