claudehq 1.0.2 → 1.0.3

package/public/index.html

@@ -2672,6 +2672,558 @@
       justify-content: center;
       font-size: 24px;
     }
+
+    /* Orchestration Panel Styles */
+    .orchestration-panel {
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 480px;
+      height: 100vh;
+      background: var(--bg-secondary);
+      border-left: 1px solid var(--border);
+      transform: translateX(100%);
+      transition: transform 0.2s ease;
+      z-index: 100;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .orchestration-panel.open {
+      transform: translateX(0);
+    }
+
+    .orchestration-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .orchestration-header h3 {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .orchestration-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+    }
+
+    .orchestration-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .orchestration-card {
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 12px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .orchestration-card:hover {
+      border-color: var(--accent);
+      background: var(--bg-hover);
+    }
+
+    .orchestration-card.active {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 1px var(--accent);
+    }
+
+    .orchestration-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+    }
+
+    .orchestration-name {
+      font-weight: 600;
+      font-size: 14px;
+    }
+
+    .orchestration-status {
+      font-size: 11px;
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-weight: 500;
+    }
+
+    .orchestration-status.draft { background: var(--bg-active); color: var(--text-secondary); }
+    .orchestration-status.running { background: var(--status-progress-bg); color: var(--status-progress); }
+    .orchestration-status.completed { background: var(--status-done-bg); color: var(--status-done); }
+    .orchestration-status.failed { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
+    .orchestration-status.paused { background: var(--status-pending-bg); color: var(--status-pending); }
+
+    .orchestration-agents {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+
+    .agent-badge {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 11px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      background: var(--bg-active);
+    }
+
+    .agent-badge .status-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+    }
+
+    .agent-badge .status-dot.pending { background: var(--text-tertiary); }
+    .agent-badge .status-dot.spawning { background: var(--status-pending); animation: pulse 1s infinite; }
+    .agent-badge .status-dot.running { background: var(--status-progress); animation: pulse 1s infinite; }
+    .agent-badge .status-dot.waiting { background: var(--status-pending); }
+    .agent-badge .status-dot.completed { background: var(--status-done); }
+    .agent-badge .status-dot.failed { background: #ef4444; }
+    .agent-badge .status-dot.cancelled { background: var(--text-tertiary); }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    .orchestration-detail {
+      padding: 16px;
+    }
+
+    .orchestration-detail-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    .orchestration-detail-title {
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .orchestration-controls {
+      display: flex;
+      gap: 8px;
+    }
+
+    .orch-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      border: none;
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .orch-btn.primary {
+      background: var(--accent);
+      color: white;
+    }
+
+    .orch-btn.primary:hover {
+      background: var(--accent-hover);
+    }
+
+    .orch-btn.secondary {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+      border: 1px solid var(--border);
+    }
+
+    .orch-btn.secondary:hover {
+      background: var(--bg-hover);
+    }
+
+    .orch-btn.danger {
+      background: rgba(239, 68, 68, 0.1);
+      color: #ef4444;
+      border: 1px solid rgba(239, 68, 68, 0.3);
+    }
+
+    .orch-btn.danger:hover {
+      background: rgba(239, 68, 68, 0.2);
+    }
+
+    .agent-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-top: 16px;
+    }
+
+    .agent-card {
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 12px;
+    }
+
+    .agent-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .agent-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .agent-status-indicator {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+    }
+
+    .agent-status-indicator.pending { background: var(--text-tertiary); }
+    .agent-status-indicator.spawning { background: var(--status-pending); animation: pulse 1s infinite; }
+    .agent-status-indicator.running { background: var(--status-progress); animation: pulse 1s infinite; }
+    .agent-status-indicator.waiting { background: var(--status-pending); }
+    .agent-status-indicator.completed { background: var(--status-done); }
+    .agent-status-indicator.failed { background: #ef4444; }
+    .agent-status-indicator.cancelled { background: var(--text-tertiary); }
+
+    .agent-name {
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    .agent-model {
+      font-size: 11px;
+      color: var(--text-tertiary);
+      padding: 1px 6px;
+      background: var(--bg-active);
+      border-radius: 4px;
+    }
+
+    .agent-actions {
+      display: flex;
+      gap: 4px;
+    }
+
+    .agent-action-btn {
+      padding: 4px 8px;
+      border: none;
+      border-radius: 4px;
+      font-size: 11px;
+      cursor: pointer;
+      background: var(--bg-active);
+      color: var(--text-secondary);
+      transition: all 0.15s ease;
+    }
+
+    .agent-action-btn:hover {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+
+    .agent-prompt {
+      margin-top: 8px;
+      font-size: 12px;
+      color: var(--text-secondary);
+      background: var(--bg-primary);
+      padding: 8px;
+      border-radius: 4px;
+      white-space: pre-wrap;
+      max-height: 80px;
+      overflow: hidden;
+    }
+
+    .agent-dependencies {
+      margin-top: 8px;
+      font-size: 11px;
+      color: var(--text-tertiary);
+    }
+
+    .create-orchestration-btn {
+      width: 100%;
+      padding: 10px;
+      border: 1px dashed var(--border);
+      border-radius: 8px;
+      background: transparent;
+      color: var(--text-secondary);
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .create-orchestration-btn:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+      background: var(--bg-tertiary);
+    }
+
+    .orchestration-toggle-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: var(--bg-tertiary);
+      color: var(--text-secondary);
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .orchestration-toggle-btn:hover {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+
+    .orchestration-toggle-btn.active {
+      background: var(--accent);
+      color: white;
+      border-color: var(--accent);
+    }
+
+    .add-agent-form {
+      margin-top: 16px;
+      padding: 12px;
+      background: var(--bg-tertiary);
+      border-radius: 8px;
+    }
+
+    .add-agent-form .form-row {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+
+    .add-agent-form input,
+    .add-agent-form select,
+    .add-agent-form textarea {
+      flex: 1;
+      padding: 8px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      font-size: 12px;
+    }
+
+    .add-agent-form textarea {
+      resize: vertical;
+      min-height: 60px;
+    }
+
+    .empty-orchestrations {
+      text-align: center;
+      padding: 40px 20px;
+      color: var(--text-tertiary);
+    }
+
+    .empty-orchestrations-icon {
+      font-size: 48px;
+      margin-bottom: 12px;
+    }
+
+    /* Dependency Graph Styles */
+    .dependency-graph {
+      background: var(--bg-primary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 16px;
+      min-height: 150px;
+      position: relative;
+    }
+
+    .dependency-graph-title {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-tertiary);
+      text-transform: uppercase;
+      margin-bottom: 12px;
+    }
+
+    .graph-container {
+      position: relative;
+      width: 100%;
+      min-height: 120px;
+    }
+
+    .graph-node {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      transition: transform 0.15s ease;
+    }
+
+    .graph-node:hover {
+      transform: scale(1.1);
+    }
+
+    .graph-node-circle {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 600;
+      color: white;
+      border: 2px solid var(--bg-secondary);
+      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    }
+
+    .graph-node-circle.pending { background: var(--text-tertiary); }
+    .graph-node-circle.spawning { background: var(--status-pending); animation: pulse 1s infinite; }
+    .graph-node-circle.running { background: var(--status-progress); animation: pulse 1s infinite; }
+    .graph-node-circle.waiting { background: var(--status-pending); }
+    .graph-node-circle.completed { background: var(--status-done); }
+    .graph-node-circle.failed { background: #ef4444; }
+    .graph-node-circle.cancelled { background: var(--text-tertiary); }
+
+    .graph-node-label {
+      font-size: 10px;
+      color: var(--text-secondary);
+      max-width: 60px;
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .graph-svg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    .graph-edge {
+      stroke: var(--border);
+      stroke-width: 2;
+      fill: none;
+      marker-end: url(#arrowhead);
+    }
+
+    .graph-edge.active {
+      stroke: var(--status-progress);
+      stroke-width: 2.5;
+    }
+
+    /* Per-Agent Activity Feed */
+    .agent-activity {
+      margin-top: 8px;
+      border-top: 1px solid var(--border);
+      padding-top: 8px;
+    }
+
+    .agent-activity-toggle {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      color: var(--text-tertiary);
+      cursor: pointer;
+      padding: 4px 0;
+    }
+
+    .agent-activity-toggle:hover {
+      color: var(--text-secondary);
+    }
+
+    .agent-activity-toggle svg {
+      transition: transform 0.15s ease;
+    }
+
+    .agent-activity-toggle.expanded svg {
+      transform: rotate(90deg);
+    }
+
+    .agent-activity-feed {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.2s ease;
+    }
+
+    .agent-activity-feed.expanded {
+      max-height: 200px;
+      overflow-y: auto;
+    }
+
+    .agent-activity-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 6px 0;
+      font-size: 11px;
+      border-bottom: 1px solid var(--border-subtle);
+    }
+
+    .agent-activity-item:last-child {
+      border-bottom: none;
+    }
+
+    .agent-activity-icon {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      flex-shrink: 0;
+    }
+
+    .agent-activity-icon.tool { background: var(--status-progress-bg); color: var(--status-progress); }
+    .agent-activity-icon.success { background: var(--status-done-bg); color: var(--status-done); }
+    .agent-activity-icon.error { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
+
+    .agent-activity-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .agent-activity-tool {
+      font-weight: 500;
+      color: var(--text-primary);
+    }
+
+    .agent-activity-time {
+      color: var(--text-tertiary);
+      font-size: 10px;
+    }
+
+    .agent-activity-empty {
+      padding: 12px;
+      text-align: center;
+      color: var(--text-tertiary);
+      font-size: 11px;
+    }
   </style>
 </head>
 <body>
@@ -2758,6 +3310,13 @@
           </svg>
           Conversation
         </button>
+        <button class="orchestration-toggle-btn" onclick="toggleOrchestrationPanel()" id="orch-toggle">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="3"/>
+            <path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
+          </svg>
+          Agents
+        </button>
         <button class="filter-btn" onclick="toggleTheme()" id="theme-toggle">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="theme-icon-dark" style="display:none">
             <circle cx="12" cy="12" r="5"/>
@@ -2880,6 +3439,93 @@
     </div>
   </div>
 
+  <!-- Orchestration Panel -->
+  <div class="orchestration-panel" id="orchestration-panel">
+    <div class="orchestration-header">
+      <h3>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="3"/>
+          <path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
+        </svg>
+        Multi-Agent Orchestration
+      </h3>
+      <button class="close-btn" onclick="toggleOrchestrationPanel()">&times;</button>
+    </div>
+    <div class="orchestration-content">
+      <div id="orchestration-view">
+        <!-- List view -->
+        <div id="orchestration-list-view">
+          <div class="orchestration-list" id="orchestration-list"></div>
+          <button class="create-orchestration-btn" onclick="openCreateOrchestrationModal()">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 5v14M5 12h14"/>
+            </svg>
+            New Orchestration
+          </button>
+        </div>
+
+        <!-- Detail view -->
+        <div id="orchestration-detail-view" style="display: none;">
+          <div class="orchestration-detail">
+            <button class="orch-btn secondary" onclick="showOrchestrationList()" style="margin-bottom: 16px;">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M19 12H5M12 19l-7-7 7-7"/>
+              </svg>
+              Back
+            </button>
+            <div class="orchestration-detail-header">
+              <div>
+                <div class="orchestration-detail-title" id="orch-detail-name">Orchestration</div>
+                <div class="orchestration-status" id="orch-detail-status">draft</div>
+              </div>
+              <div class="orchestration-controls" id="orch-controls"></div>
+            </div>
+            <div class="agent-list" id="agent-list"></div>
+            <div class="add-agent-form" id="add-agent-form">
+              <h4 style="margin-bottom: 8px; font-size: 12px;">Add Agent</h4>
+              <div class="form-row">
+                <input type="text" id="new-agent-name" placeholder="Agent name (e.g., Frontend Expert)">
+                <select id="new-agent-model">
+                  <option value="sonnet">Sonnet</option>
+                  <option value="haiku">Haiku</option>
+                  <option value="opus">Opus</option>
+                </select>
+              </div>
+              <textarea id="new-agent-prompt" placeholder="Initial prompt for this agent..."></textarea>
+              <button class="orch-btn primary" onclick="addAgentToOrchestration()" style="margin-top: 8px; width: 100%;">
+                Add Agent
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Create Orchestration Modal -->
+  <div class="modal-overlay" id="create-orchestration-modal" onclick="closeCreateOrchestrationModal(event)">
+    <div class="modal" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <h3>Create New Orchestration</h3>
+        <button class="close-btn" onclick="closeCreateOrchestrationModal()">&times;</button>
+      </div>
+      <form class="modal-form" id="create-orchestration-form" onsubmit="submitCreateOrchestration(event)">
+        <div class="form-group">
+          <label for="orch-name">Name</label>
+          <input type="text" id="orch-name" placeholder="e.g., Full-Stack Feature" required>
+        </div>
+        <div class="form-group">
+          <label for="orch-description">Description</label>
+          <textarea id="orch-description" placeholder="What will this orchestration do?" rows="2"></textarea>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="modal-btn secondary" onclick="closeCreateOrchestrationModal()">Cancel</button>
+          <button type="submit" class="modal-btn primary">Create</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
   <div class="toast" id="toast">
     <svg class="toast-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
       <path d="M20 6L9 17l-5-5"/>
@@ -4454,6 +5100,22 @@
               renderManagedSessions();
             }
             break;
+          // Orchestration events
+          case 'orchestration_created':
+          case 'orchestration_updated':
+          case 'orchestration_started':
+          case 'orchestration_completed':
+          case 'orchestration_failed':
+          case 'orchestration_paused':
+          case 'orchestration_deleted':
+          case 'agent_created':
+          case 'agent_spawned':
+          case 'agent_status_changed':
+          case 'agent_completed':
+          case 'agent_failed':
+          case 'agent_killed':
+            handleOrchestrationEvent(data);
+            break;
           case 'update':
           default:
             // Fallback to full reload for unknown event types
@@ -6760,6 +7422,584 @@
         console.error('Failed to load Claude events:', e);
       }
     }
+
+    // =========================================================================
+    // Orchestration Management
+    // =========================================================================
+
+    let orchestrations = [];
+    let selectedOrchestration = null;
+    let orchestrationPanelOpen = false;
+
+    // Toggle orchestration panel
+    function toggleOrchestrationPanel() {
+      orchestrationPanelOpen = !orchestrationPanelOpen;
+      const panel = document.getElementById('orchestration-panel');
+      const btn = document.getElementById('orch-toggle');
+
+      panel.classList.toggle('open', orchestrationPanelOpen);
+      btn.classList.toggle('active', orchestrationPanelOpen);
+
+      if (orchestrationPanelOpen) {
+        loadOrchestrations();
+      }
+    }
+
+    // Load all orchestrations
+    async function loadOrchestrations() {
+      try {
+        const res = await fetch('/api/orchestrations');
+        const data = await res.json();
+        if (data.ok) {
+          orchestrations = data.orchestrations;
+          renderOrchestrations();
+        }
+      } catch (e) {
+        console.error('Failed to load orchestrations:', e);
+      }
+    }
+
+    // Render orchestrations list
+    function renderOrchestrations() {
+      const list = document.getElementById('orchestration-list');
+
+      if (orchestrations.length === 0) {
+        list.innerHTML = `
+          <div class="empty-orchestrations">
+            <div class="empty-orchestrations-icon">🤖</div>
+            <h3>No Orchestrations</h3>
+            <p>Create an orchestration to coordinate multiple Claude agents</p>
+          </div>
+        `;
+        return;
+      }
+
+      list.innerHTML = orchestrations.map(orch => `
+        <div class="orchestration-card ${selectedOrchestration?.id === orch.id ? 'active' : ''}"
+             onclick="selectOrchestration('${orch.id}')">
+          <div class="orchestration-card-header">
+            <span class="orchestration-name">${escapeHtml(orch.name)}</span>
+            <span class="orchestration-status ${orch.status}">${orch.status}</span>
+          </div>
+          <div class="orchestration-agents">
+            ${orch.agents.map(agent => `
+              <span class="agent-badge">
+                <span class="status-dot ${agent.status}"></span>
+                ${escapeHtml(agent.name)}
+              </span>
+            `).join('')}
+            ${orch.agents.length === 0 ? '<span style="color: var(--text-tertiary); font-size: 11px;">No agents yet</span>' : ''}
+          </div>
+        </div>
+      `).join('');
+    }
+
+    // Select an orchestration and show detail view
+    async function selectOrchestration(id) {
+      try {
+        const res = await fetch(`/api/orchestrations/${id}`);
+        const data = await res.json();
+        if (data.ok) {
+          selectedOrchestration = data.orchestration;
+          showOrchestrationDetail();
+        }
+      } catch (e) {
+        console.error('Failed to load orchestration:', e);
+      }
+    }
+
+    // Show orchestration detail view
+    function showOrchestrationDetail() {
+      document.getElementById('orchestration-list-view').style.display = 'none';
+      document.getElementById('orchestration-detail-view').style.display = 'block';
+      renderOrchestrationDetail();
+    }
+
+    // Show orchestration list view
+    function showOrchestrationList() {
+      document.getElementById('orchestration-list-view').style.display = 'block';
+      document.getElementById('orchestration-detail-view').style.display = 'none';
+      selectedOrchestration = null;
+      loadOrchestrations();
+    }
+
+    // Render orchestration detail
+    function renderOrchestrationDetail() {
+      if (!selectedOrchestration) return;
+
+      const orch = selectedOrchestration;
+      document.getElementById('orch-detail-name').textContent = orch.name;
+
+      const statusEl = document.getElementById('orch-detail-status');
+      statusEl.textContent = orch.status;
+      statusEl.className = `orchestration-status ${orch.status}`;
+
+      // Render controls based on status
+      const controls = document.getElementById('orch-controls');
+      if (orch.status === 'draft' || orch.status === 'paused') {
+        controls.innerHTML = `
+          <button class="orch-btn primary" onclick="startOrchestration('${orch.id}')">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polygon points="5 3 19 12 5 21 5 3"/>
+            </svg>
+            Start
+          </button>
+          <button class="orch-btn danger" onclick="deleteOrchestration('${orch.id}')">Delete</button>
+        `;
+      } else if (orch.status === 'running') {
+        controls.innerHTML = `
+          <button class="orch-btn secondary" onclick="stopOrchestration('${orch.id}')">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>
+            </svg>
+            Stop
+          </button>
+        `;
+      } else {
+        controls.innerHTML = `
+          <button class="orch-btn danger" onclick="deleteOrchestration('${orch.id}')">Delete</button>
+        `;
+      }
+
+      // Render dependency graph if there are agents
+      const agentList = document.getElementById('agent-list');
+      let graphHtml = '';
+      if (orch.agents.length > 1) {
+        graphHtml = renderDependencyGraph(orch);
+      }
+
+      // Render agents
+      if (orch.agents.length === 0) {
+        agentList.innerHTML = '<p style="color: var(--text-tertiary); text-align: center; padding: 20px;">No agents yet. Add one below.</p>';
+      } else {
+        agentList.innerHTML = graphHtml + orch.agents.map(agent => `
+          <div class="agent-card" id="agent-card-${agent.id}">
+            <div class="agent-card-header">
+              <div class="agent-info">
+                <span class="agent-status-indicator ${agent.status}"></span>
+                <span class="agent-name">${escapeHtml(agent.name)}</span>
+                <span class="agent-model">${agent.model}</span>
+              </div>
+              <div class="agent-actions">
+                ${agent.status === 'pending' && orch.status === 'running' ?
+                  `<button class="agent-action-btn" onclick="spawnAgent('${orch.id}', '${agent.id}')">Spawn</button>` : ''}
+                ${agent.status === 'running' ?
+                  `<button class="agent-action-btn" onclick="killAgent('${orch.id}', '${agent.id}')">Kill</button>` : ''}
+                ${['pending', 'completed', 'failed', 'cancelled'].includes(agent.status) ?
+                  `<button class="agent-action-btn" onclick="removeAgent('${orch.id}', '${agent.id}')">Remove</button>` : ''}
+              </div>
+            </div>
+            ${agent.prompt ? `<div class="agent-prompt">${escapeHtml(agent.prompt.substring(0, 200))}${agent.prompt.length > 200 ? '...' : ''}</div>` : ''}
+            ${agent.dependencies.length > 0 ? `
+              <div class="agent-dependencies">
+                Depends on: ${agent.dependencies.map(depId => {
+                  const dep = orch.agents.find(a => a.id === depId);
+                  return dep ? escapeHtml(dep.name) : depId.slice(-8);
+                }).join(', ')}
+              </div>
+            ` : ''}
+            ${agent.error ? `<div style="color: #ef4444; font-size: 11px; margin-top: 4px;">Error: ${escapeHtml(agent.error)}</div>` : ''}
+            ${renderAgentActivityFeed(agent)}
+          </div>
+        `).join('');
+      }
+
+      // Show/hide add agent form based on status
+      const addForm = document.getElementById('add-agent-form');
+      addForm.style.display = orch.status === 'completed' ? 'none' : 'block';
+    }
+
+    // Render dependency graph visualization
+    function renderDependencyGraph(orch) {
+      if (orch.agents.length < 2) return '';
+
+      const agents = orch.agents;
+      const nodeWidth = 60;
+      const nodeHeight = 60;
+      const padding = 20;
+
+      // Calculate positions using a simple layout algorithm
+      // Agents with no dependencies go first (left), then their dependents
+      const levels = [];
+      const agentLevels = new Map();
+
+      // Find agents with no dependencies (root level)
+      const roots = agents.filter(a => a.dependencies.length === 0);
+      if (roots.length === 0) {
+        // Circular dependency or all have deps, just line them up
+        agents.forEach((a, i) => agentLevels.set(a.id, 0));
+      } else {
+        // BFS to assign levels
+        const queue = roots.map(a => ({ agent: a, level: 0 }));
+        const visited = new Set();
+
+        while (queue.length > 0) {
+          const { agent, level } = queue.shift();
+          if (visited.has(agent.id)) continue;
+          visited.add(agent.id);
+          agentLevels.set(agent.id, level);
+
+          // Find agents that depend on this one
+          const dependents = agents.filter(a => a.dependencies.includes(agent.id));
+          dependents.forEach(d => {
+            if (!visited.has(d.id)) {
+              queue.push({ agent: d, level: level + 1 });
+            }
+          });
+        }
+
+        // Handle any unvisited (disconnected) agents
+        agents.forEach(a => {
+          if (!agentLevels.has(a.id)) {
+            agentLevels.set(a.id, 0);
+          }
+        });
+      }
+
+      // Group agents by level
+      const levelGroups = new Map();
+      agents.forEach(a => {
+        const level = agentLevels.get(a.id);
+        if (!levelGroups.has(level)) levelGroups.set(level, []);
+        levelGroups.get(level).push(a);
+      });
+
+      const maxLevel = Math.max(...agentLevels.values());
+      const graphWidth = (maxLevel + 1) * 100;
+      const maxNodesInLevel = Math.max(...[...levelGroups.values()].map(g => g.length));
+      const graphHeight = Math.max(120, maxNodesInLevel * 50 + 40);
+
+      // Calculate node positions
+      const positions = new Map();
+      for (const [level, levelAgents] of levelGroups) {
+        const x = padding + level * 100 + nodeWidth / 2;
+        levelAgents.forEach((agent, idx) => {
+          const y = padding + (idx * 50) + (graphHeight - levelAgents.length * 50) / 2;
+          positions.set(agent.id, { x, y });
+        });
+      }
+
+      // Generate SVG edges
+      let edges = '';
+      agents.forEach(agent => {
+        const toPos = positions.get(agent.id);
+        agent.dependencies.forEach(depId => {
+          const fromPos = positions.get(depId);
+          if (fromPos && toPos) {
+            const depAgent = agents.find(a => a.id === depId);
+            const isActive = depAgent && depAgent.status === 'running';
+            edges += `<path class="graph-edge ${isActive ? 'active' : ''}" d="M${fromPos.x + 18} ${fromPos.y + 18} C${fromPos.x + 50} ${fromPos.y + 18}, ${toPos.x - 32} ${toPos.y + 18}, ${toPos.x - 18} ${toPos.y + 18}"/>`;
+          }
+        });
+      });
+
+      // Generate nodes
+      let nodes = '';
+      agents.forEach((agent, idx) => {
+        const pos = positions.get(agent.id);
+        const initial = agent.name.charAt(0).toUpperCase();
+        nodes += `
+          <div class="graph-node" style="left: ${pos.x - 18}px; top: ${pos.y}px;" onclick="scrollToAgent('${agent.id}')" title="${escapeHtml(agent.name)} (${agent.status})">
+            <div class="graph-node-circle ${agent.status}">${initial}</div>
+            <div class="graph-node-label">${escapeHtml(agent.name)}</div>
+          </div>
+        `;
+      });
+
+      return `
+        <div class="dependency-graph">
+          <div class="dependency-graph-title">Execution Flow</div>
+          <div class="graph-container" style="height: ${graphHeight}px;">
+            <svg class="graph-svg" style="width: ${graphWidth + padding * 2}px; height: ${graphHeight}px;">
+              <defs>
+                <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+                  <polygon points="0 0, 10 3.5, 0 7" fill="var(--border)"/>
+                </marker>
+              </defs>
+              ${edges}
+            </svg>
+            ${nodes}
+          </div>
+        </div>
+      `;
+    }
+
+    // Scroll to agent card
+    function scrollToAgent(agentId) {
+      const card = document.getElementById(`agent-card-${agentId}`);
+      if (card) {
+        card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        card.style.boxShadow = '0 0 0 2px var(--accent)';
+        setTimeout(() => { card.style.boxShadow = ''; }, 2000);
+      }
+    }
+
+    // Render per-agent activity feed
+    function renderAgentActivityFeed(agent) {
+      // Only show activity for agents that have been spawned
+      if (!agent.sessionId && agent.status === 'pending') {
+        return '';
+      }
+
+      // Filter claude events for this agent's session
+      const agentEvents = agent.sessionId
+        ? claudeEvents.filter(e => e.sessionId === agent.sessionId).slice(-10)
+        : [];
+
+      // Also include tool usage from agent data
+      const toolEvents = (agent.toolsUsed || []).slice(-5);
+
+      const hasActivity = agentEvents.length > 0 || toolEvents.length > 0;
+
+      return `
+        <div class="agent-activity">
+          <div class="agent-activity-toggle" onclick="toggleAgentActivity(this)">
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 18l6-6-6-6"/>
+            </svg>
+            Activity (${agentEvents.length + toolEvents.length})
+          </div>
+          <div class="agent-activity-feed">
+            ${!hasActivity ? '<div class="agent-activity-empty">No activity recorded yet</div>' : ''}
+            ${toolEvents.map(t => `
+              <div class="agent-activity-item">
+                <span class="agent-activity-icon ${t.status === 'success' ? 'success' : t.status === 'error' ? 'error' : 'tool'}">
+                  ${t.status === 'success' ? '✓' : t.status === 'error' ? '!' : '⚡'}
+                </span>
+                <div class="agent-activity-content">
+                  <span class="agent-activity-tool">${escapeHtml(t.tool)}</span>
+                  ${t.duration ? `<span class="agent-activity-time">${t.duration}ms</span>` : ''}
+                </div>
+              </div>
+            `).join('')}
+            ${agentEvents.map(e => `
+              <div class="agent-activity-item">
+                <span class="agent-activity-icon tool">⚡</span>
+                <div class="agent-activity-content">
+                  <span class="agent-activity-tool">${escapeHtml(e.tool || e.type)}</span>
+                  <span class="agent-activity-time">${new Date(e.timestamp).toLocaleTimeString()}</span>
+                </div>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      `;
+    }
+
+    // Toggle agent activity feed expansion
+    function toggleAgentActivity(el) {
+      el.classList.toggle('expanded');
+      const feed = el.nextElementSibling;
+      feed.classList.toggle('expanded');
+    }
+
+    // Create orchestration modal
+    function openCreateOrchestrationModal() {
+      document.getElementById('create-orchestration-modal').style.display = 'flex';
+      document.getElementById('orch-name').focus();
+    }
+
+    function closeCreateOrchestrationModal(event) {
+      if (event && event.target !== event.currentTarget) return;
+      document.getElementById('create-orchestration-modal').style.display = 'none';
+      document.getElementById('create-orchestration-form').reset();
+    }
+
+    async function submitCreateOrchestration(event) {
+      event.preventDefault();
+
+      const name = document.getElementById('orch-name').value.trim();
+      const description = document.getElementById('orch-description').value.trim();
+
+      try {
+        const res = await fetch('/api/orchestrations', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name, description })
+        });
+        const data = await res.json();
+        if (data.ok) {
+          closeCreateOrchestrationModal();
+          showToast('Orchestration created');
+          loadOrchestrations();
+          selectOrchestration(data.orchestration.id);
+        } else {
+          alert(data.error || 'Failed to create orchestration');
+        }
+      } catch (e) {
+        console.error('Failed to create orchestration:', e);
+        alert('Failed to create orchestration');
+      }
+    }
+
+    // Add agent to orchestration
+    async function addAgentToOrchestration() {
+      if (!selectedOrchestration) return;
+
+      const name = document.getElementById('new-agent-name').value.trim();
+      const model = document.getElementById('new-agent-model').value;
+      const prompt = document.getElementById('new-agent-prompt').value.trim();
+
+      if (!name) {
+        alert('Please enter an agent name');
+        return;
+      }
+
+      try {
+        const res = await fetch(`/api/orchestrations/${selectedOrchestration.id}/agents`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name, model, prompt, workingDirectory: '.' })
+        });
+        const data = await res.json();
+        if (data.ok) {
+          // Clear form
+          document.getElementById('new-agent-name').value = '';
+          document.getElementById('new-agent-prompt').value = '';
+          showToast('Agent added');
+          selectOrchestration(selectedOrchestration.id);
+        } else {
+          alert(data.error || 'Failed to add agent');
+        }
+      } catch (e) {
+        console.error('Failed to add agent:', e);
+        alert('Failed to add agent');
+      }
+    }
+
+    // Start orchestration
+    async function startOrchestration(id) {
+      try {
+        const res = await fetch(`/api/orchestrations/${id}/start`, { method: 'POST' });
+        const data = await res.json();
+        if (data.ok) {
+          showToast(`Started with ${data.spawnedAgents} agents`);
+          selectOrchestration(id);
+        } else {
+          alert(data.error || 'Failed to start orchestration');
+        }
+      } catch (e) {
+        console.error('Failed to start orchestration:', e);
+        alert('Failed to start orchestration');
+      }
+    }
+
+    // Stop orchestration
+    async function stopOrchestration(id) {
+      try {
+        const res = await fetch(`/api/orchestrations/${id}/stop`, { method: 'POST' });
+        const data = await res.json();
+        if (data.ok) {
+          showToast('Orchestration stopped');
+          selectOrchestration(id);
+        } else {
+          alert(data.error || 'Failed to stop orchestration');
+        }
+      } catch (e) {
+        console.error('Failed to stop orchestration:', e);
+        alert('Failed to stop orchestration');
+      }
+    }
+
+    // Delete orchestration
+    async function deleteOrchestration(id) {
+      if (!confirm('Are you sure you want to delete this orchestration?')) return;
+
+      try {
+        const res = await fetch(`/api/orchestrations/${id}`, { method: 'DELETE' });
+        const data = await res.json();
+        if (data.ok) {
+          showToast('Orchestration deleted');
+          showOrchestrationList();
+        } else {
+          alert(data.error || 'Failed to delete orchestration');
+        }
+      } catch (e) {
+        console.error('Failed to delete orchestration:', e);
+        alert('Failed to delete orchestration');
+      }
+    }
+
+    // Spawn individual agent
+    async function spawnAgent(orchId, agentId) {
+      try {
+        const res = await fetch(`/api/orchestrations/${orchId}/agents/${agentId}/spawn`, { method: 'POST' });
+        const data = await res.json();
+        if (data.ok) {
+          showToast('Agent spawned');
+          selectOrchestration(orchId);
+        } else {
+          alert(data.error || 'Failed to spawn agent');
+        }
+      } catch (e) {
+        console.error('Failed to spawn agent:', e);
+        alert('Failed to spawn agent');
+      }
+    }
+
+    // Kill individual agent
+    async function killAgent(orchId, agentId) {
+      try {
+        const res = await fetch(`/api/orchestrations/${orchId}/agents/${agentId}/kill`, { method: 'POST' });
+        const data = await res.json();
+        if (data.ok) {
+          showToast('Agent killed');
+          selectOrchestration(orchId);
+        } else {
+          alert(data.error || 'Failed to kill agent');
+        }
+      } catch (e) {
+        console.error('Failed to kill agent:', e);
+        alert('Failed to kill agent');
+      }
+    }
+
+    // Remove agent
+    async function removeAgent(orchId, agentId) {
+      try {
+        const res = await fetch(`/api/orchestrations/${orchId}/agents/${agentId}`, { method: 'DELETE' });
+        const data = await res.json();
+        if (data.ok) {
+          showToast('Agent removed');
+          selectOrchestration(orchId);
+        } else {
+          alert(data.error || 'Failed to remove agent');
+        }
+      } catch (e) {
+        console.error('Failed to remove agent:', e);
+        alert('Failed to remove agent');
+      }
+    }
+
+    // Handle orchestration SSE events
+    function handleOrchestrationEvent(event) {
+      if (!orchestrationPanelOpen) return;
+
+      const eventTypes = [
+        'orchestration_created', 'orchestration_updated', 'orchestration_started',
+        'orchestration_completed', 'orchestration_failed', 'orchestration_paused',
+        'orchestration_deleted', 'agent_created', 'agent_spawned', 'agent_status_changed',
+        'agent_completed', 'agent_failed', 'agent_killed'
+      ];
+
+      if (eventTypes.includes(event.type)) {
+        // Refresh orchestration list or detail
+        if (selectedOrchestration && event.orchestrationId === selectedOrchestration.id) {
+          selectOrchestration(selectedOrchestration.id);
+        } else {
+          loadOrchestrations();
+        }
+      }
+    }
+
+    // Hook into SSE events
+    const originalHandleSSEMessage = typeof handleSSEMessage !== 'undefined' ? handleSSEMessage : null;
+    function handleSSEMessageWithOrchestration(event) {
+      if (originalHandleSSEMessage) {
+        originalHandleSSEMessage(event);
+      }
+      handleOrchestrationEvent(event);
+    }
   </script>
 </body>
 </html>