aicodeman 0.4.5 → 0.4.7

package/dist/web/public/orchestrator-panel.js

@@ -0,0 +1,475 @@
+/**
+ * @fileoverview Orchestrator loop panel — plan-based autonomous execution UI.
+ * Shows orchestrator state, plan phases, task progress, and verification results.
+ * Provides controls for start, approve, reject, pause, resume, stop, skip, retry.
+ *
+ * @mixin Extends CodemanApp.prototype via Object.assign
+ * @dependency app.js (CodemanApp class, this.orchestratorState)
+ * @dependency constants.js (SSE_EVENTS, escapeHtml)
+ * @loadorder 9.5 of 16 — loaded after ralph-panel.js, before settings-ui.js
+ */
+
+// ═══════════════════════════════════════════════════════════════
+// State color/label mappings
+// ═══════════════════════════════════════════════════════════════
+
+const ORCH_STATE_COLORS = {
+  idle: '#6b7280',
+  planning: '#f59e0b',
+  approval: '#8b5cf6',
+  executing: '#3b82f6',
+  verifying: '#06b6d4',
+  replanning: '#f97316',
+  completed: '#22c55e',
+  failed: '#ef4444',
+  paused: '#9ca3af',
+};
+
+const ORCH_PHASE_STATUS_ICONS = {
+  pending: '\u25cb',    // ○
+  executing: '\u25d4',  // ◔
+  passed: '\u2713',     // ✓
+  failed: '\u2717',     // ✗
+  skipped: '\u2192',    // →
+};
+
+Object.assign(CodemanApp.prototype, {
+
+  // ═══════════════════════════════════════════════════════════════
+  // SSE Event Handlers
+  // ═══════════════════════════════════════════════════════════════
+
+  _onOrchestratorStateChanged(data) {
+    if (!this.orchestratorState) this.orchestratorState = {};
+    this.orchestratorState.state = data.state;
+    if (data.state === 'planning') {
+      this.orchestratorState.planProgress = [];
+      this.showOrchestratorPanel();
+    }
+    this.renderOrchestratorPanel();
+  },
+
+  _onOrchestratorPlanProgress(data) {
+    if (!this.orchestratorState) this.orchestratorState = {};
+    if (!this.orchestratorState.planProgress) this.orchestratorState.planProgress = [];
+    this.orchestratorState.planProgress.push({ phase: data.phase, detail: data.detail, time: Date.now() });
+    this.renderOrchestratorPanel();
+  },
+
+  _onOrchestratorPlanReady(data) {
+    if (!this.orchestratorState) this.orchestratorState = {};
+    this.orchestratorState.plan = data.plan;
+    this.orchestratorState.state = 'approval';
+    this.showOrchestratorPanel();
+    this.renderOrchestratorPanel();
+  },
+
+  _onOrchestratorPhaseStarted(data) {
+    if (!this.orchestratorState) return;
+    this._updateOrchestratorPhase(data.phase);
+    this.renderOrchestratorPanel();
+  },
+
+  _onOrchestratorPhaseCompleted(data) {
+    if (!this.orchestratorState) return;
+    this._updateOrchestratorPhase(data.phase);
+    this.renderOrchestratorPanel();
+  },
+
+  _onOrchestratorPhaseFailed(data) {
+    if (!this.orchestratorState) return;
+    this._updateOrchestratorPhase(data.phase);
+    this.renderOrchestratorPanel();
+  },
+
+  _onOrchestratorVerification(data) {
+    if (!this.orchestratorState) return;
+    // Store verification result on the phase
+    if (this.orchestratorState.plan) {
+      const phase = this.orchestratorState.plan.phases.find(p => p.id === data.phaseId);
+      if (phase) phase._lastVerification = data.result;
+    }
+    this.renderOrchestratorPanel();
+  },
+
+  _onOrchestratorTaskAssigned(data) {
+    if (!this.orchestratorState) return;
+    this._updateOrchestratorTask(data.task);
+    this.renderOrchestratorPanel();
+  },
+
+  _onOrchestratorTaskCompleted(data) {
+    if (!this.orchestratorState) return;
+    this._updateOrchestratorTask(data.task);
+    this.renderOrchestratorPanel();
+  },
+
+  _onOrchestratorTaskFailed(data) {
+    if (!this.orchestratorState) return;
+    this._updateOrchestratorTask(data.task);
+    this.renderOrchestratorPanel();
+  },
+
+  _onOrchestratorCompleted(data) {
+    if (!this.orchestratorState) this.orchestratorState = {};
+    this.orchestratorState.state = 'completed';
+    this.orchestratorState.stats = data.stats;
+    this.renderOrchestratorPanel();
+  },
+
+  _onOrchestratorError(data) {
+    if (!this.orchestratorState) this.orchestratorState = {};
+    this.orchestratorState.state = 'failed';
+    this.orchestratorState.lastError = data.error;
+    this.renderOrchestratorPanel();
+  },
+
+  // ═══════════════════════════════════════════════════════════════
+  // Internal helpers
+  // ═══════════════════════════════════════════════════════════════
+
+  _updateOrchestratorPhase(updatedPhase) {
+    if (!this.orchestratorState?.plan) return;
+    const idx = this.orchestratorState.plan.phases.findIndex(p => p.id === updatedPhase.id);
+    if (idx >= 0) this.orchestratorState.plan.phases[idx] = updatedPhase;
+  },
+
+  _updateOrchestratorTask(updatedTask) {
+    if (!this.orchestratorState?.plan) return;
+    for (const phase of this.orchestratorState.plan.phases) {
+      const idx = phase.tasks.findIndex(t => t.id === updatedTask.id);
+      if (idx >= 0) {
+        phase.tasks[idx] = updatedTask;
+        return;
+      }
+    }
+  },
+
+  // ═══════════════════════════════════════════════════════════════
+  // Panel visibility
+  // ═══════════════════════════════════════════════════════════════
+
+  showOrchestratorPanel() {
+    this.orchestratorPanelVisible = true;
+    const panel = document.getElementById('orchestratorPanel');
+    if (panel) panel.style.display = '';
+    this.renderOrchestratorPanel();
+  },
+
+  closeOrchestratorPanel() {
+    this.orchestratorPanelVisible = false;
+    const panel = document.getElementById('orchestratorPanel');
+    if (panel) panel.style.display = 'none';
+  },
+
+  toggleOrchestratorPanel() {
+    if (this.orchestratorPanelVisible) {
+      this.closeOrchestratorPanel();
+    } else {
+      this.showOrchestratorPanel();
+    }
+  },
+
+  // ═══════════════════════════════════════════════════════════════
+  // API calls
+  // ═══════════════════════════════════════════════════════════════
+
+  async orchestratorStart(goal, config) {
+    try {
+      const res = await fetch('/api/orchestrator/start', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ goal, config }),
+      });
+      const data = await res.json();
+      if (data.ok) {
+        this.orchestratorState = { state: 'planning', plan: null };
+        this.showOrchestratorPanel();
+        this.renderOrchestratorPanel();
+      }
+      return data;
+    } catch (err) {
+      console.error('[Orchestrator] Start failed:', err);
+    }
+  },
+
+  async orchestratorApprove() {
+    try {
+      await fetch('/api/orchestrator/approve', { method: 'POST' });
+    } catch (err) {
+      console.error('[Orchestrator] Approve failed:', err);
+    }
+  },
+
+  async orchestratorReject(feedback) {
+    try {
+      await fetch('/api/orchestrator/reject', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ feedback }),
+      });
+    } catch (err) {
+      console.error('[Orchestrator] Reject failed:', err);
+    }
+  },
+
+  async orchestratorPause() {
+    try {
+      await fetch('/api/orchestrator/pause', { method: 'POST' });
+    } catch (err) {
+      console.error('[Orchestrator] Pause failed:', err);
+    }
+  },
+
+  async orchestratorResume() {
+    try {
+      await fetch('/api/orchestrator/resume', { method: 'POST' });
+    } catch (err) {
+      console.error('[Orchestrator] Resume failed:', err);
+    }
+  },
+
+  async orchestratorStop() {
+    try {
+      await fetch('/api/orchestrator/stop', { method: 'POST' });
+      this.orchestratorState = { state: 'idle' };
+      this.renderOrchestratorPanel();
+    } catch (err) {
+      console.error('[Orchestrator] Stop failed:', err);
+    }
+  },
+
+  async orchestratorSkipPhase(phaseId) {
+    try {
+      await fetch(`/api/orchestrator/phase/${phaseId}/skip`, { method: 'POST' });
+    } catch (err) {
+      console.error('[Orchestrator] Skip failed:', err);
+    }
+  },
+
+  async orchestratorRetryPhase(phaseId) {
+    try {
+      await fetch(`/api/orchestrator/phase/${phaseId}/retry`, { method: 'POST' });
+    } catch (err) {
+      console.error('[Orchestrator] Retry failed:', err);
+    }
+  },
+
+  async refreshOrchestratorStatus() {
+    try {
+      const res = await fetch('/api/orchestrator/status');
+      const data = await res.json();
+      if (data.ok) {
+        this.orchestratorState = data;
+        this.renderOrchestratorPanel();
+      }
+    } catch (err) {
+      console.error('[Orchestrator] Status fetch failed:', err);
+    }
+  },
+
+  // ═══════════════════════════════════════════════════════════════
+  // Rendering
+  // ═══════════════════════════════════════════════════════════════
+
+  renderOrchestratorPanel() {
+    const panel = document.getElementById('orchestratorPanel');
+    if (!panel) return;
+
+    const state = this.orchestratorState?.state || 'idle';
+    const plan = this.orchestratorState?.plan;
+
+    // Update badge
+    const badge = document.getElementById('orchestratorStateBadge');
+    if (badge) {
+      badge.textContent = state;
+      badge.style.background = ORCH_STATE_COLORS[state] || '#6b7280';
+    }
+
+    // Update action buttons
+    const actions = document.getElementById('orchestratorActions');
+    if (actions) {
+      actions.innerHTML = this._renderOrchestratorActions(state);
+    }
+
+    // Update body
+    const body = document.getElementById('orchestratorBody');
+    if (body) {
+      body.innerHTML = this._renderOrchestratorBody(state, plan);
+    }
+  },
+
+  _renderOrchestratorActions(state) {
+    const btn = (label, onclick, cls = '') =>
+      `<button class="orch-btn ${cls}" onclick="${onclick}">${label}</button>`;
+
+    switch (state) {
+      case 'idle':
+      case 'completed':
+      case 'failed':
+        return btn('New Goal', 'app.promptOrchestratorGoal()', 'orch-btn-primary');
+      case 'planning':
+        return btn('Cancel', 'app.orchestratorStop()', 'orch-btn-danger');
+      case 'approval':
+        return [
+          btn('Approve', 'app.orchestratorApprove()', 'orch-btn-primary'),
+          btn('Reject', 'app.promptOrchestratorReject()', 'orch-btn-warn'),
+          btn('Cancel', 'app.orchestratorStop()', 'orch-btn-danger'),
+        ].join('');
+      case 'executing':
+      case 'verifying':
+      case 'replanning':
+        return [
+          btn('Pause', 'app.orchestratorPause()'),
+          btn('Stop', 'app.orchestratorStop()', 'orch-btn-danger'),
+        ].join('');
+      case 'paused':
+        return [
+          btn('Resume', 'app.orchestratorResume()', 'orch-btn-primary'),
+          btn('Stop', 'app.orchestratorStop()', 'orch-btn-danger'),
+        ].join('');
+      default:
+        return '';
+    }
+  },
+
+  _renderOrchestratorBody(state, plan) {
+    if (state === 'idle' && !plan) {
+      return '<div class="orch-empty">No orchestration active. Click "New Goal" to start.</div>';
+    }
+
+    if (state === 'planning') {
+      const progress = this.orchestratorState?.planProgress || [];
+      let progressHtml = '';
+      if (progress.length > 0) {
+        const items = progress.map(p =>
+          `<div class="orch-progress-item"><span class="orch-progress-phase">${escapeHtml(p.phase)}</span> ${escapeHtml(p.detail)}</div>`
+        ).join('');
+        progressHtml = `<div class="orch-progress-log">${items}</div>`;
+      }
+      return `<div class="orch-planning"><div class="orch-spinner"></div>Generating plan...${progressHtml}</div>`;
+    }
+
+    if (!plan) return '';
+
+    const parts = [];
+
+    // Goal
+    parts.push(`<div class="orch-goal"><strong>Goal:</strong> ${escapeHtml(plan.goal.slice(0, 200))}</div>`);
+
+    // Progress summary
+    const completed = plan.phases.filter(p => p.status === 'passed' || p.status === 'skipped').length;
+    const total = plan.phases.length;
+    const pct = total > 0 ? Math.round((completed / total) * 100) : 0;
+    parts.push(`<div class="orch-progress-bar"><div class="orch-progress-fill" style="width:${pct}%"></div><span>${completed}/${total} phases</span></div>`);
+
+    // Phase list
+    parts.push('<div class="orch-phases">');
+    for (const phase of plan.phases) {
+      parts.push(this._renderOrchestratorPhase(phase, state));
+    }
+    parts.push('</div>');
+
+    // Stats (if completed/failed)
+    if (state === 'completed' || state === 'failed') {
+      const stats = this.orchestratorState?.stats;
+      if (stats) {
+        parts.push(this._renderOrchestratorStats(stats));
+      }
+      if (this.orchestratorState?.lastError) {
+        parts.push(`<div class="orch-error">Error: ${escapeHtml(this.orchestratorState.lastError)}</div>`);
+      }
+    }
+
+    return parts.join('');
+  },
+
+  _renderOrchestratorPhase(phase, orchState) {
+    const icon = ORCH_PHASE_STATUS_ICONS[phase.status] || '\u25cb';
+    const isActive = phase.status === 'executing';
+    const cls = `orch-phase ${isActive ? 'orch-phase-active' : ''} orch-phase-${phase.status}`;
+
+    let actions = '';
+    if (orchState === 'executing' || orchState === 'failed') {
+      if (phase.status === 'pending') {
+        actions += `<button class="orch-phase-btn" onclick="app.orchestratorSkipPhase('${phase.id}')" title="Skip">skip</button>`;
+      }
+      if (phase.status === 'failed') {
+        actions += `<button class="orch-phase-btn" onclick="app.orchestratorRetryPhase('${phase.id}')" title="Retry">retry</button>`;
+      }
+    }
+
+    // Task summary
+    const tasksDone = phase.tasks.filter(t => t.status === 'completed').length;
+    const tasksFailed = phase.tasks.filter(t => t.status === 'failed').length;
+    const tasksTotal = phase.tasks.length;
+    const taskSummary = `${tasksDone}/${tasksTotal}${tasksFailed > 0 ? ` (${tasksFailed} failed)` : ''}`;
+
+    // Duration
+    let duration = '';
+    if (phase.durationMs) {
+      const secs = Math.round(phase.durationMs / 1000);
+      duration = secs < 60 ? `${secs}s` : `${Math.floor(secs / 60)}m ${secs % 60}s`;
+    }
+
+    let html = `<div class="${cls}">`;
+    html += `<div class="orch-phase-header">`;
+    html += `<span class="orch-phase-icon">${icon}</span>`;
+    html += `<span class="orch-phase-name">${escapeHtml(phase.name)}</span>`;
+    html += `<span class="orch-phase-tasks">${taskSummary}</span>`;
+    if (duration) html += `<span class="orch-phase-duration">${duration}</span>`;
+    if (actions) html += `<span class="orch-phase-actions">${actions}</span>`;
+    html += `</div>`;
+
+    // Expanded task list for active phase
+    if (isActive || phase.status === 'failed') {
+      html += '<div class="orch-phase-tasks-list">';
+      for (const task of phase.tasks) {
+        const taskIcon = ORCH_PHASE_STATUS_ICONS[task.status] || '\u25cb';
+        const taskCls = `orch-task orch-task-${task.status}`;
+        html += `<div class="${taskCls}"><span class="orch-task-icon">${taskIcon}</span>`;
+        html += `<span class="orch-task-prompt">${escapeHtml(task.prompt.slice(0, 100))}</span>`;
+        if (task.error) html += `<span class="orch-task-error">${escapeHtml(task.error.slice(0, 80))}</span>`;
+        html += '</div>';
+      }
+      html += '</div>';
+    }
+
+    // Verification result
+    if (phase._lastVerification) {
+      const v = phase._lastVerification;
+      const vCls = v.passed ? 'orch-verify-pass' : 'orch-verify-fail';
+      html += `<div class="${vCls}">${v.passed ? 'Verified' : 'Failed'}: ${escapeHtml(v.summary || '')}</div>`;
+    }
+
+    html += '</div>';
+    return html;
+  },
+
+  _renderOrchestratorStats(stats) {
+    return `<div class="orch-stats">
+      <span>Phases: ${stats.phasesCompleted} done, ${stats.phasesFailed} failed</span>
+      <span>Tasks: ${stats.totalTasksCompleted} done, ${stats.totalTasksFailed} failed</span>
+      ${stats.replanCount > 0 ? `<span>Replans: ${stats.replanCount}</span>` : ''}
+      ${stats.totalDurationMs ? `<span>Duration: ${Math.round(stats.totalDurationMs / 60000)}m</span>` : ''}
+    </div>`;
+  },
+
+  // ═══════════════════════════════════════════════════════════════
+  // User prompts
+  // ═══════════════════════════════════════════════════════════════
+
+  promptOrchestratorGoal() {
+    const goal = prompt('Enter your goal for the orchestrator:');
+    if (goal && goal.trim()) {
+      this.orchestratorStart(goal.trim());
+    }
+  },
+
+  promptOrchestratorReject() {
+    const feedback = prompt('Feedback on the plan (what should change?):');
+    if (feedback && feedback.trim()) {
+      this.orchestratorReject(feedback.trim());
+    }
+  },
+});