@pellux/goodvibes-tui 0.18.4

package/src/panels/agent-logs-panel.ts

@@ -0,0 +1,539 @@
+import { readFileSync, existsSync, watch, type FSWatcher } from 'fs';
+import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { createEmptyLine, createStyledCell } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { BasePanel } from './base-panel.ts';
+import type { AgentManager, AgentRecord } from '../tools/agent/index.ts';
+import type { AgentEvent } from '../runtime/events/index.ts';
+import type { UiEventFeed } from '../runtime/ui-events.ts';
+import {
+  buildEmptyState,
+  buildPanelLine,
+  buildStyledPanelLine,
+  buildPanelWorkspace,
+  resolveScrollablePanelSection,
+  DEFAULT_PANEL_PALETTE,
+} from './polish.ts';
+import {
+  type AgentLogEntry as LogEntry,
+  type AgentLogFilterType as FilterType,
+  AGENT_LOG_COLORS as COLOR,
+  AGENT_LOG_FILTER_CYCLE as FILTER_CYCLE,
+  AGENT_LOG_FILTER_LABELS as FILTER_LABELS,
+  parseAgentJsonl,
+} from './agent-logs-shared.ts';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const POLL_INTERVAL_MS = 500;
+
+export interface AgentLogsPanelDeps {
+  readonly agentManager: Pick<AgentManager, 'list'>;
+  readonly workingDirectory: string;
+}
+
+
+// ---------------------------------------------------------------------------
+// AgentLogsPanel
+// ---------------------------------------------------------------------------
+
+export class AgentLogsPanel extends BasePanel {
+  // ── Agent state ─────────────────────────────────────────────────────────
+  private agents: AgentRecord[] = [];
+  private selectedAgentIndex = 0;
+
+  // ── Log state ────────────────────────────────────────────────────────────
+  private allEntries: LogEntry[] = []; // raw parsed JSONL for selected agent
+  private filteredEntries: LogEntry[] = []; // after filter applied
+  private lastFileSize = 0;
+  private scrollOffset = 0;
+
+  // ── Modes ────────────────────────────────────────────────────────────────
+  private autoFollow = true;
+  private paused = false;
+  private filter: FilterType = 'all';
+
+  // ── Infrastructure ───────────────────────────────────────────────────────
+  private pollTimer: ReturnType<typeof setInterval> | null = null;
+  private fsWatcher: FSWatcher | null = null;
+  private unsubs: Array<() => void> = [];
+  private readonly agentEvents: UiEventFeed<AgentEvent>;
+
+  constructor(agentEvents: UiEventFeed<AgentEvent>, private readonly deps: AgentLogsPanelDeps) {
+    super('agent-logs', 'Agents', 'A', 'agent');
+    this.agentEvents = agentEvents;
+    this._refreshAgents();
+    this._startPolling();
+    this._subscribeEvents();
+  }
+
+  // ── Lifecycle ─────────────────────────────────────────────────────────────
+
+  override onActivate(): void {
+    super.onActivate();
+    this._refreshAgents();
+    this._pollCurrentAgent();
+  }
+
+  override onDeactivate(): void {
+    super.onDeactivate();
+  }
+
+  override onDestroy(): void {
+    this._stopPolling();
+    this._unsubscribeEvents();
+  }
+
+  // ── Input ─────────────────────────────────────────────────────────────────
+
+  handleInput(key: string): boolean {
+    switch (key) {
+      case 'tab':
+      case '\t': // Tab — cycle to next agent
+        this._selectNextAgent();
+        return true;
+      case ' ': // Space — pause/resume
+        this._togglePause();
+        return true;
+      case 'f': // f — cycle filter
+        this._cycleFilter();
+        return true;
+      case 'g': // g — jump to top
+        this.scrollOffset = 0;
+        this.autoFollow = false;
+        this.markDirty();
+        return true;
+      case 'G': // G — jump to bottom / re-enable auto-follow
+        this.autoFollow = true;
+        this._clampScroll();
+        this.markDirty();
+        return true;
+      case 'k': // k / up
+      case '\x1b[A':
+        this.autoFollow = false;
+        this.scrollOffset = Math.max(0, this.scrollOffset - 1);
+        this.markDirty();
+        return true;
+      case 'j': // j / down
+      case '\x1b[B':
+        this.scrollOffset++;
+        this.markDirty();
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  render(width: number, height: number): Line[] {
+    this.needsRender = false;
+    const footerLines = [
+      buildPanelLine(width, [
+        [' Tab', DEFAULT_PANEL_PALETTE.info], [' next agent', DEFAULT_PANEL_PALETTE.dim],
+        ['   Space', DEFAULT_PANEL_PALETTE.info], [' pause', DEFAULT_PANEL_PALETTE.dim],
+        ['   f', DEFAULT_PANEL_PALETTE.info], [' filter', DEFAULT_PANEL_PALETTE.dim],
+        ['   g/G', DEFAULT_PANEL_PALETTE.info], [' scroll', DEFAULT_PANEL_PALETTE.dim],
+      ]),
+    ];
+
+    const summaryLines = [
+      buildPanelLine(width, [
+        [' Agents ', DEFAULT_PANEL_PALETTE.label],
+        [String(this.agents.length), DEFAULT_PANEL_PALETTE.value],
+        ['   Filter ', DEFAULT_PANEL_PALETTE.label],
+        [FILTER_LABELS[this.filter], DEFAULT_PANEL_PALETTE.info],
+        ['   Mode ', DEFAULT_PANEL_PALETTE.label],
+        [this.paused ? 'paused' : this.autoFollow ? 'auto-follow' : 'manual', this.paused ? DEFAULT_PANEL_PALETTE.warn : this.autoFollow ? DEFAULT_PANEL_PALETTE.good : DEFAULT_PANEL_PALETTE.dim],
+      ]),
+    ];
+
+    if (this.agents.length === 0) {
+      return buildPanelWorkspace(width, height, {
+        title: ' Agents',
+        intro: 'View-only live session stream for running agents, with per-agent switching and filtered event tails.',
+        sections: [
+          { title: 'Summary', lines: summaryLines },
+          {
+            lines: buildEmptyState(
+              width,
+              ' No agents running',
+              'Spawn or attach to an agent session and its structured logs will appear here.',
+              [],
+              DEFAULT_PANEL_PALETTE,
+            ),
+          },
+        ],
+        footerLines,
+        palette: DEFAULT_PANEL_PALETTE,
+      });
+    }
+
+    const selectedAgent = this._selectedAgent();
+    const selectorLine = this._renderAgentSelector(width);
+    if (selectedAgent) {
+      summaryLines.push(buildPanelLine(width, [
+        [' Selected ', DEFAULT_PANEL_PALETTE.label],
+        [selectedAgent.id, DEFAULT_PANEL_PALETTE.info],
+        ['   Status ', DEFAULT_PANEL_PALETTE.label],
+        [selectedAgent.status, selectedAgent.status === 'running' ? DEFAULT_PANEL_PALETTE.good : selectedAgent.status === 'failed' ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.dim],
+      ]));
+    }
+
+    if (this.filteredEntries.length === 0) {
+      return buildPanelWorkspace(width, height, {
+        title: ' Agents',
+        intro: 'View-only live session stream for running agents, with per-agent switching and filtered event tails.',
+        sections: [
+          { title: 'Summary', lines: summaryLines },
+          { title: 'Agents', lines: [selectorLine] },
+          {
+            lines: buildEmptyState(
+              width,
+              ` No ${this.filter === 'all' ? '' : `${this.filter} `}log entries yet`,
+              'Once the selected agent writes session events, they will appear here and can be filtered by type.',
+              [],
+              DEFAULT_PANEL_PALETTE,
+            ),
+          },
+        ],
+        footerLines,
+        palette: DEFAULT_PANEL_PALETTE,
+      });
+    }
+
+    const focusIndex = this.autoFollow
+      ? Math.max(0, this.filteredEntries.length - 1)
+      : Math.min(this.scrollOffset, Math.max(0, this.filteredEntries.length - 1));
+    const summarySection = { title: 'Summary', lines: summaryLines } as const;
+    const agentsSection = { title: 'Agents', lines: [selectorLine] } as const;
+    const logStreamSection = resolveScrollablePanelSection(width, height, {
+      intro: 'Tail per-agent JSONL session logs, filter entries, and switch between running or completed agents.',
+      footerLines,
+      palette: DEFAULT_PANEL_PALETTE,
+      beforeSections: [summarySection, agentsSection],
+      section: {
+        title: 'Log Stream',
+        scrollableLines: this.filteredEntries.map((entry) => this._renderEntry(entry, width)),
+        selectedIndex: focusIndex,
+        scrollOffset: this.scrollOffset,
+        minRows: 8,
+      },
+    });
+    this.scrollOffset = logStreamSection.scrollOffset;
+
+    return buildPanelWorkspace(width, height, {
+      title: ' Agents',
+      intro: 'View-only live session stream for running agents, with per-agent switching and filtered event tails.',
+      sections: [
+        summarySection,
+        agentsSection,
+        logStreamSection.section,
+      ],
+      footerLines,
+      palette: DEFAULT_PANEL_PALETTE,
+    });
+  }
+
+  // ── Private: polling ─────────────────────────────────────────────────────
+
+  private _startPolling(): void {
+    if (this.pollTimer !== null) return;
+    this.pollTimer = setInterval(() => {
+      if (!this.paused) {
+        this._pollCurrentAgent();
+      }
+    }, POLL_INTERVAL_MS);
+    // Also do an immediate read
+    this._pollCurrentAgent();
+  }
+
+  private _stopPolling(): void {
+    if (this.pollTimer !== null) {
+      clearInterval(this.pollTimer);
+      this.pollTimer = null;
+    }
+    this._stopWatcher();
+  }
+
+  private _pollCurrentAgent(): void {
+    const agent = this._selectedAgent();
+    if (!agent) return;
+
+    const sessionFile = this._sessionFilePath(agent.id);
+    if (!existsSync(sessionFile)) return;
+
+    try {
+      const content = readFileSync(sessionFile, 'utf-8');
+      if (content.length === this.lastFileSize) return;
+      this.lastFileSize = content.length;
+
+      // Re-parse all lines (simple: no partial-line tracking needed at 500ms)
+      this.allEntries = parseAgentJsonl(content);
+      this._applyFilter();
+      if (this.autoFollow) {
+        this.scrollOffset = Math.max(0, this.filteredEntries.length - 1);
+      }
+      this.markDirty();
+    } catch {
+      // Non-fatal: file may be mid-write
+    }
+  }
+
+  // ── Private: fs.watch (supplemental) ─────────────────────────────────────
+
+  private _watchAgent(agentId: string): void {
+    this._stopWatcher();
+    const sessionFile = this._sessionFilePath(agentId);
+    if (!existsSync(sessionFile)) return;
+    try {
+      this.fsWatcher = watch(sessionFile, () => {
+        if (!this.paused) {
+          this._pollCurrentAgent();
+        }
+      });
+    } catch {
+      // Non-fatal: polling covers us
+    }
+  }
+
+  private _stopWatcher(): void {
+    if (this.fsWatcher) {
+      try { this.fsWatcher.close(); } catch { /* ignore */ }
+      this.fsWatcher = null;
+    }
+  }
+
+  // ── Private: event subscriptions ─────────────────────────────────────────
+
+  private _subscribeEvents(): void {
+    const onSpawned = (data: { id: string; task: string }) => {
+      void data;
+      this._refreshAgents();
+      // Auto-select the newest agent if none selected or all done
+      const running = this.agents.filter(a => a.status === 'running' || a.status === 'pending');
+      if (running.length === 1) {
+        const idx = this.agents.findIndex(a => a.id === running[0]!.id);
+        if (idx >= 0) this._selectAgent(idx);
+      }
+      this.markDirty();
+    };
+
+    const onComplete = (data: { id: string }) => {
+      void data;
+      this._refreshAgents();
+      this.markDirty();
+    };
+
+    const onError = (data: { id: string; error: Error }) => {
+      void data;
+      this._refreshAgents();
+      this.markDirty();
+    };
+
+    this.unsubs.push(
+      this.agentEvents.on('AGENT_SPAWNING', (payload) => onSpawned({ id: payload.agentId, task: payload.task })),
+      this.agentEvents.on('AGENT_COMPLETED', (payload) => onComplete({ id: payload.agentId })),
+      this.agentEvents.on('AGENT_FAILED', (payload) => onError({ id: payload.agentId, error: new Error(payload.error) })),
+    );
+  }
+
+  private _unsubscribeEvents(): void {
+    for (const unsub of this.unsubs) unsub();
+    this.unsubs = [];
+  }
+
+  // ── Private: agent management ─────────────────────────────────────────────
+
+  private _refreshAgents(): void {
+    const prev = this._selectedAgent();
+    this.agents = this.deps.agentManager.list()
+      .sort((a, b) => b.startedAt - a.startedAt); // newest first
+
+    // Try to keep same agent selected
+    if (prev) {
+      const idx = this.agents.findIndex(a => a.id === prev.id);
+      this.selectedAgentIndex = idx >= 0 ? idx : 0;
+    } else {
+      this.selectedAgentIndex = 0;
+    }
+
+    // Re-watch if agent changed
+    const current = this._selectedAgent();
+    if (current) {
+      this._watchAgent(current.id);
+      this._reloadAgent(current);
+    }
+  }
+
+  private _selectAgent(index: number): void {
+    if (index < 0 || index >= this.agents.length) return;
+    this.selectedAgentIndex = index;
+    this.allEntries = [];
+    this.filteredEntries = [];
+    this.lastFileSize = 0;
+    this.scrollOffset = 0;
+    this.autoFollow = true;
+    const agent = this._selectedAgent();
+    if (agent) {
+      this._watchAgent(agent.id);
+      this._reloadAgent(agent);
+    }
+    this.markDirty();
+  }
+
+  private _selectNextAgent(): void {
+    if (this.agents.length === 0) return;
+    this._selectAgent((this.selectedAgentIndex + 1) % this.agents.length);
+  }
+
+  private _selectedAgent(): AgentRecord | null {
+    return this.agents[this.selectedAgentIndex] ?? null;
+  }
+
+  private _reloadAgent(agent: AgentRecord): void {
+    const sessionFile = this._sessionFilePath(agent.id);
+    if (!existsSync(sessionFile)) {
+      this.allEntries = [];
+      this.filteredEntries = [];
+      this.lastFileSize = 0;
+      return;
+    }
+    try {
+      const content = readFileSync(sessionFile, 'utf-8');
+      this.lastFileSize = content.length;
+      this.allEntries = parseAgentJsonl(content);
+      this._applyFilter();
+      if (this.autoFollow) {
+        this.scrollOffset = Math.max(0, this.filteredEntries.length - 1);
+      }
+    } catch {
+      this.allEntries = [];
+      this.filteredEntries = [];
+    }
+  }
+
+  private _sessionFilePath(agentId: string): string {
+    return `${this.deps.workingDirectory}/.goodvibes/tui/sessions/${agentId}.jsonl`;
+  }
+
+  // ── Private: filter ───────────────────────────────────────────────────────
+
+  private _applyFilter(): void {
+    if (this.filter === 'all') {
+      this.filteredEntries = [...this.allEntries];
+      return;
+    }
+    this.filteredEntries = this.allEntries.filter(e => {
+      if (this.filter === 'assistant') return e.type === 'assistant';
+      if (this.filter === 'tool') return e.type === 'tool';
+      if (this.filter === 'error') return e.type === 'error';
+      return true;
+    });
+  }
+
+  private _cycleFilter(): void {
+    const idx = FILTER_CYCLE.indexOf(this.filter);
+    this.filter = FILTER_CYCLE[(idx + 1) % FILTER_CYCLE.length]!;
+    this._applyFilter();
+    if (this.autoFollow) {
+      this.scrollOffset = Math.max(0, this.filteredEntries.length - 1);
+    }
+    this.markDirty();
+  }
+
+  private _togglePause(): void {
+    this.paused = !this.paused;
+    this.markDirty();
+  }
+
+  private _clampScroll(): void {
+    this.scrollOffset = Math.min(this.scrollOffset, Math.max(0, this.filteredEntries.length - 1));
+  }
+
+  // ── Private: rendering helpers ─────────────────────────────────────────────
+
+  /** Top header bar: title + filter label + mode indicators */
+  private _renderHeader(width: number): Line {
+    const title = ' Agent Logs ';
+    const filterLabel = `[${FILTER_LABELS[this.filter]}] `;
+    const pause = this.paused ? ' PAUSED ' : '';
+    const follow = this.autoFollow ? ' AUTO-FOLLOW ' : '';
+    const keyhints = '  Tab:next  Space:pause  f:filter  g/G:scroll ';
+    return buildStyledPanelLine(width, [
+      { text: title, fg: COLOR.header_accent, bold: true },
+      { text: filterLabel, fg: COLOR.filter_active },
+      { text: pause, fg: COLOR.paused },
+      { text: follow, fg: COLOR.auto_follow },
+      { text: keyhints, fg: COLOR.header_label },
+    ]);
+  }
+
+  /** Agent selector bar: shows running agents with cycle indicator */
+  private _renderAgentSelector(width: number): Line {
+    const prefix = ' Agents: ';
+    const segments: Array<{ text: string; fg: string; bold?: boolean }> = [
+      { text: prefix, fg: COLOR.header_label },
+    ];
+    for (let i = 0; i < this.agents.length; i++) {
+      const agent = this.agents[i]!;
+      const isSelected = i === this.selectedAgentIndex;
+      const statusColor = this._agentStatusColor(agent.status);
+      const shortId = agent.id.replace('agent-', '');
+      const label = isSelected
+        ? `[${shortId}:${agent.status}] `
+        : `${shortId}:${agent.status}  `;
+      segments.push({
+        text: label,
+        fg: isSelected ? COLOR.agent_selected : statusColor,
+        bold: isSelected,
+      });
+    }
+    return buildStyledPanelLine(width, segments);
+  }
+
+  private _renderNoAgents(width: number): Line {
+    const msg = ' No agents running. ';
+    return buildStyledPanelLine(width, [{ text: msg, fg: COLOR.dim }]);
+  }
+
+  private _renderSeparator(width: number): Line {
+    return buildStyledPanelLine(width, [{ text: '─'.repeat(width), fg: COLOR.separator }]);
+  }
+
+  private _renderEmpty(width: number, bodyHeight: number): Line[] {
+    const lines: Line[] = [];
+    const msg = this.agents.length === 0
+      ? ' No agents running '
+      : ` No ${this.filter === 'all' ? '' : this.filter + ' '}log entries yet `;
+    const offset = Math.max(0, Math.floor((width - msg.length) / 2));
+    const textLine = buildStyledPanelLine(width, [
+      { text: ' '.repeat(offset), fg: COLOR.dim },
+      { text: msg, fg: COLOR.dim },
+    ]);
+    lines.push(textLine);
+    while (lines.length < bodyHeight) {
+      lines.push(createEmptyLine(width));
+    }
+    return lines;
+  }
+
+  private _renderEntry(entry: LogEntry, width: number): Line {
+    // Indent non-session entries
+    const prefix = entry.type === 'session_start' ? '' : '  ';
+    const fullText = prefix + entry.text;
+    return buildStyledPanelLine(width, [{ text: fullText, fg: entry.color, bold: entry.bold }]);
+  }
+
+  private _agentStatusColor(status: AgentRecord['status']): string {
+    switch (status) {
+      case 'running': return COLOR.agent_running;
+      case 'pending': return COLOR.agent_pending;
+      case 'completed': return COLOR.agent_done;
+      case 'failed': return COLOR.agent_error;
+      case 'cancelled': return COLOR.agent_done;
+      default: return COLOR.dim;
+    }
+  }
+}

package/src/panels/agent-logs-shared.ts

@@ -0,0 +1,129 @@
+export type AgentLogFilterType = 'all' | 'assistant' | 'tool' | 'error';
+
+export interface AgentLogEntry {
+  raw: Record<string, unknown>;
+  type: string;
+  text: string;
+  color: string;
+  bold: boolean;
+}
+
+export const AGENT_LOG_FILTER_LABELS: Record<AgentLogFilterType, string> = {
+  all: 'All',
+  assistant: 'Assistant',
+  tool: 'Tool',
+  error: 'Error',
+};
+
+export const AGENT_LOG_FILTER_CYCLE: AgentLogFilterType[] = ['all', 'assistant', 'tool', 'error'];
+
+export const AGENT_LOG_COLORS = {
+  header_bg: '235',
+  header_fg: '250',
+  header_accent: '#00ffff',
+  header_label: '244',
+  agent_selected: '#00ffff',
+  agent_running: '#00ff87',
+  agent_pending: '220',
+  agent_done: '244',
+  agent_error: '#ff5f5f',
+  assistant: '255',
+  tool: '#00e5ff',
+  error: '#ff5f5f',
+  dim: '240',
+  paused: '220',
+  auto_follow: '#00ff87',
+  session_start: '238',
+  separator: '237',
+  filter_active: '#00ffff',
+  filter_inactive: '244',
+} as const;
+
+export function parseAgentJsonl(content: string): AgentLogEntry[] {
+  const entries: AgentLogEntry[] = [];
+  for (const line of content.split('\n')) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    try {
+      const obj = JSON.parse(trimmed) as Record<string, unknown>;
+      entries.push(toAgentLogEntry(obj));
+    } catch {
+      // ignore malformed lines
+    }
+  }
+  return entries;
+}
+
+export function toAgentLogEntry(obj: Record<string, unknown>): AgentLogEntry {
+  const type = typeof obj.type === 'string' ? obj.type : 'unknown';
+  switch (type) {
+    case 'meta':
+    case 'session_start': {
+      const agentId = String(obj.agentId ?? '');
+      const model = String(obj.model ?? '');
+      const provider = String(obj.provider ?? '');
+      const ts = String(obj.timestamp ?? '').replace('T', ' ').replace(/\.\d+Z$/, '');
+      return {
+        raw: obj,
+        type: 'session_start',
+        text: `[${ts}] Session started  agent=${agentId}  model=${model}  provider=${provider}`,
+        color: AGENT_LOG_COLORS.session_start,
+        bold: false,
+      };
+    }
+    case 'assistant':
+      return {
+        raw: obj,
+        type: 'assistant',
+        text: String(obj.content ?? obj.text ?? ''),
+        color: AGENT_LOG_COLORS.assistant,
+        bold: false,
+      };
+    case 'tool_call': {
+      const tool = String(obj.tool ?? obj.name ?? '');
+      const args = obj.args ?? obj.arguments ?? {};
+      const argsStr = typeof args === 'string' ? args : JSON.stringify(args);
+      return {
+        raw: obj,
+        type: 'tool',
+        text: `[tool] ${tool}  ${argsStr.slice(0, 120)}`,
+        color: AGENT_LOG_COLORS.tool,
+        bold: false,
+      };
+    }
+    case 'tool_result': {
+      const tool = String(obj.tool ?? obj.name ?? '');
+      const result = obj.result ?? obj.output ?? '';
+      const resultStr = typeof result === 'string' ? result : JSON.stringify(result);
+      return {
+        raw: obj,
+        type: 'tool',
+        text: `[result] ${tool}  ${resultStr.slice(0, 120)}`,
+        color: AGENT_LOG_COLORS.tool,
+        bold: false,
+      };
+    }
+    case 'error':
+      return {
+        raw: obj,
+        type: 'error',
+        text: `[error] ${String(obj.error ?? obj.message ?? obj.msg ?? JSON.stringify(obj))}`,
+        color: AGENT_LOG_COLORS.error,
+        bold: true,
+      };
+    default: {
+      const text = typeof obj.text === 'string'
+        ? obj.text
+        : typeof obj.content === 'string'
+          ? obj.content
+          : `[${type}] ${JSON.stringify(obj).slice(0, 120)}`;
+      return {
+        raw: obj,
+        type,
+        text,
+        color: AGENT_LOG_COLORS.dim,
+        bold: false,
+      };
+    }
+  }
+}