crewswarm 0.8.1-beta

package/apps/dashboard/src/components/active-tasks-panel.js

@@ -0,0 +1,175 @@
+/**
+ * Active Tasks Panel - Shows running tasks with individual controls
+ */
+
+import { taskManager } from '../core/task-manager.js';
+
+let _container = null;
+let _completedTasks = []; // Track recently completed tasks
+const COMPLETED_TASK_RETENTION_MS = 5 * 60 * 1000; // Keep for 5 minutes
+
+function getRecentCompletedTasks() {
+  const now = Date.now();
+  // Filter out tasks older than 5 minutes
+  _completedTasks = _completedTasks.filter(t => now - t.completedAt < COMPLETED_TASK_RETENTION_MS);
+  return _completedTasks;
+}
+
+export function initActiveTasksPanel(containerId = 'activeTasksPanel') {
+  _container = document.getElementById(containerId);
+  if (!_container) {
+    console.warn('Active tasks panel container not found:', containerId);
+    return;
+  }
+
+  // Subscribe to task changes
+  taskManager.subscribe((tasks) => {
+    // Track completed tasks before they're removed
+    const activeTasks = taskManager.getActiveTasks();
+    const taskIds = new Set(activeTasks.map(t => t.id));
+    
+    // Find tasks that just completed (were in list before, not anymore)
+    if (_container._lastTaskIds) {
+      _container._lastTaskIds.forEach(oldId => {
+        if (!taskIds.has(oldId)) {
+          // Task completed or failed - add to completed list
+          const existingCompleted = _completedTasks.find(t => t.id === oldId);
+          if (!existingCompleted) {
+            _completedTasks.push({
+              id: oldId,
+              agent: 'Task',
+              type: 'completed',
+              status: 'completed',
+              completedAt: Date.now(),
+              startTime: Date.now() - 30000, // Estimate it took 30s
+              duration: '30s'
+            });
+          }
+        }
+      });
+    }
+    
+    _container._lastTaskIds = taskIds;
+    renderTasksPanel(tasks);
+  });
+
+  // Initial render
+  renderTasksPanel(taskManager.getActiveTasks());
+}
+
+function renderTasksPanel(tasks) {
+  if (!_container) return;
+
+  // Get recent completed tasks
+  const recentCompletions = getRecentCompletedTasks();
+  const allTasks = [...tasks, ...recentCompletions];
+
+  if (allTasks.length === 0) {
+    _container.style.display = 'none';
+    return;
+  }
+
+  _container.style.display = 'block';
+  
+  const header = document.createElement('div');
+  header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface-2);';
+  
+  const title = document.createElement('div');
+  title.style.cssText = 'font-size:12px;font-weight:600;color:var(--text-1);';
+  const activeCount = tasks.length;
+  const completedCount = recentCompletions.length;
+  title.textContent = `⚡ Tasks: ${activeCount} active${completedCount > 0 ? `, ${completedCount} completed` : ''}`;
+  
+  const stopAllBtn = document.createElement('button');
+  stopAllBtn.textContent = '⏹ Stop All';
+  stopAllBtn.style.cssText = 'font-size:11px;padding:3px 8px;border-radius:4px;border:1px solid var(--red-hi);background:transparent;color:var(--red-hi);cursor:pointer;';
+  stopAllBtn.onclick = () => {
+    if (confirm('Stop all active tasks?')) {
+      taskManager.stopAll();
+    }
+  };
+  
+  header.appendChild(title);
+  if (activeCount > 0) header.appendChild(stopAllBtn);
+
+  const tasksList = document.createElement('div');
+  tasksList.style.cssText = 'max-height:200px;overflow-y:auto;';
+
+  allTasks.forEach((task) => {
+    const isCompleted = task.status === 'completed' || task.status === 'failed';
+    const taskRow = document.createElement('div');
+    taskRow.style.cssText = `display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg-card);${isCompleted ? 'opacity:0.6;' : ''}`;
+
+    // Status icon
+    const statusIcon = document.createElement('span');
+    statusIcon.style.cssText = 'font-size:14px;flex-shrink:0;';
+    if (task.status === 'completed') {
+      statusIcon.textContent = '✅';
+    } else if (task.status === 'failed') {
+      statusIcon.textContent = '❌';
+    } else {
+      statusIcon.textContent = '⚡';
+    }
+
+    // Agent badge
+    const agentBadge = document.createElement('span');
+    agentBadge.style.cssText = 'font-size:10px;font-weight:600;padding:2px 6px;border-radius:12px;background:var(--purple);color:#fff;white-space:nowrap;';
+    agentBadge.textContent = task.agent || task.type || 'task';
+
+    // Task description
+    const desc = document.createElement('div');
+    desc.style.cssText = 'flex:1;font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+    desc.textContent = task.description || (isCompleted ? 'Completed' : 'Working...');
+    desc.title = task.description || '';
+
+    // Duration
+    const duration = document.createElement('span');
+    duration.style.cssText = 'font-size:10px;color:var(--text-3);white-space:nowrap;';
+    const elapsed = task.duration || (Math.floor((Date.now() - task.startTime) / 1000) + 's');
+    duration.textContent = elapsed;
+
+    taskRow.appendChild(statusIcon);
+    taskRow.appendChild(agentBadge);
+    taskRow.appendChild(desc);
+    taskRow.appendChild(duration);
+
+    // Stop button only for active tasks
+    if (!isCompleted) {
+      const stopBtn = document.createElement('button');
+      stopBtn.textContent = '⏹';
+      stopBtn.title = 'Stop this task';
+      stopBtn.style.cssText = 'font-size:14px;padding:2px 6px;border-radius:4px;border:1px solid var(--border);background:var(--surface-2);color:var(--red-hi);cursor:pointer;';
+      stopBtn.onclick = () => {
+        taskManager.stopTask(task.id);
+      };
+      taskRow.appendChild(stopBtn);
+    }
+
+    tasksList.appendChild(taskRow);
+  });
+
+  _container.replaceChildren(header, tasksList);
+
+  // Update durations every second
+  if (!_container._intervalSet) {
+    _container._intervalSet = true;
+    setInterval(() => {
+      const activeTasks = taskManager.getActiveTasks();
+      if (activeTasks.length > 0 || getRecentCompletedTasks().length > 0) {
+        renderTasksPanel(activeTasks);
+      }
+    }, 1000);
+  }
+}
+
+export function showActiveTasksPanel() {
+  if (_container) {
+    _container.style.display = 'block';
+  }
+}
+
+export function hideActiveTasksPanel() {
+  if (_container) {
+    _container.style.display = 'none';
+  }
+}

package/apps/dashboard/src/core/api.js

@@ -0,0 +1,18 @@
+// Simple fetch wrapper - no cache for dev tools
+export async function getJSON(p, { ttl = 0, bust = false } = {}) {
+  const r = await fetch(p);
+  if (!r.ok) throw new Error(await r.text());
+  return await r.json();
+}
+
+/** No-op - cache removed for dev tool responsiveness */
+export function bustCache(p) {
+  // No cache to bust
+}
+
+export async function postJSON(p, body, signal) {
+  const r = await fetch(p, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body), signal });
+  const txt = await r.text();
+  if (!r.ok) throw new Error(txt.slice(0, 120));
+  try { return JSON.parse(txt); } catch { throw new Error('Bad response: ' + txt.slice(0, 80)); }
+}

package/apps/dashboard/src/core/dom.js

@@ -0,0 +1,220 @@
+export function renderStatusBadge(liveness, ageSec) {
+  if (liveness === "online")
+    return '<span title="● online — heartbeat <90s" style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);margin-right:4px;flex-shrink:0;"></span>';
+  if (liveness === "stale")
+    return (
+      '<span title="● stale — last seen >' +
+      (ageSec || "?") +
+      's ago" style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#f59e0b;margin-right:4px;flex-shrink:0;"></span>'
+    );
+  if (liveness === "offline")
+    return '<span title="● offline — no heartbeat in 5min" style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red-hi);margin-right:4px;flex-shrink:0;"></span>';
+  return '<span title="● unknown — never seen" style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--text-3);margin-right:4px;flex-shrink:0;"></span>';
+}
+
+export function showLoading(el, msg) {
+  if (el)
+    el.innerHTML =
+      '<div class="meta" style="padding:20px;">' +
+      (msg || "Loading\u2026") +
+      "</div>";
+}
+
+export function showEmpty(el, msg) {
+  if (el)
+    el.innerHTML =
+      '<div class="meta" style="padding:20px;">' +
+      (msg || "No items found.") +
+      "</div>";
+}
+
+export function showError(el, msg) {
+  if (el)
+    el.innerHTML =
+      '<div class="meta" style="padding:20px;color:var(--red-hi);">' +
+      (msg || "An error occurred.") +
+      "</div>";
+}
+
+export function escHtml(s) {
+  return String(s ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export function showNotification(msg, type) {
+  const d = document.createElement("div");
+  d.className =
+    "notification" +
+    (type === "error" || type === true
+      ? " error"
+      : type === "warning"
+        ? " warning"
+        : "");
+  d.setAttribute("role", "alert");
+  d.setAttribute("aria-live", "polite");
+  d.textContent = msg;
+  document.body.appendChild(d);
+  setTimeout(() => d.remove(), 4500);
+}
+
+export function fmt(ts) {
+  try {
+    return new Date(ts).toLocaleTimeString();
+  } catch {
+    return String(ts);
+  }
+}
+
+export function createdAt(info) {
+  return (info && info.time && info.time.created) || "";
+}
+
+export function appendChatBubble(
+  role,
+  text,
+  fallbackModel,
+  fallbackReason,
+  primaryModel,
+  engineUsed,
+  sourceInfo,
+  bubbleOptions,
+) {
+  const box = document.getElementById("chatMessages");
+  if (!box) return;
+  const isUser = role === "user";
+  const isHistoryRender = Boolean(sourceInfo);
+  const forceAppend =
+    bubbleOptions &&
+    typeof bubbleOptions === "object" &&
+    bubbleOptions.force === true;
+  if (!isUser && !forceAppend) {
+    const last = box.lastElementChild;
+    if (last && last.children.length >= 2) {
+      const lastBubbleText = last.children[1].textContent;
+      if (lastBubbleText.trim() === String(text).trim()) return;
+    }
+  }
+  const div = document.createElement("div");
+  div.style.cssText =
+    "display:flex;flex-direction:column;align-items:" +
+    (isUser ? "flex-end" : "flex-start") +
+    ";gap:4px;";
+  const labelEl = document.createElement("div");
+  labelEl.style.cssText =
+    "font-size:11px;color:var(--text-3);padding:0 6px;display:flex;align-items:center;gap:6px;";
+  const cl = window._crewLeadInfo || { emoji: "🧠", name: "crew-lead" };
+
+  // If sourceInfo provided (from history), show source indicator instead of default
+  if (sourceInfo) {
+    let agentName = "crew-lead";
+    if (isUser) {
+      agentName = "You";
+    } else if (sourceInfo.agentName) {
+      agentName = sourceInfo.agentName;
+    } else if (sourceInfo.agent) {
+      agentName = sourceInfo.agent;
+    } else if (sourceInfo.source === "cli") {
+      agentName = sourceInfo.engine || "cli";
+    } else if (sourceInfo.source === "sub-agent") {
+      agentName = "sub-agent";
+    } else if (sourceInfo.source === "agent") {
+      agentName = sourceInfo.targetAgent || "agent";
+    } else if (sourceInfo.source === "dashboard") {
+      agentName = "crew-lead";
+    }
+    const engineLabel =
+      !isUser && sourceInfo.engine && sourceInfo.engine !== agentName
+        ? ` · ${sourceInfo.engine}`
+        : "";
+    labelEl.textContent = `${sourceInfo.emoji || "🤖"} ${agentName}${engineLabel}`;
+
+    // Add timestamp as a separate subdued span
+    const ts = document.createElement("span");
+    ts.style.cssText = "opacity:0.6;";
+    ts.textContent = sourceInfo.timestamp ? " · " + sourceInfo.timestamp : "";
+    labelEl.appendChild(ts);
+  } else {
+    const displayName = isUser
+      ? "You"
+      : role === "assistant"
+        ? cl.emoji + " " + cl.name
+        : role;
+    labelEl.textContent = displayName;
+  }
+
+  // Show model badge - always for non-user messages
+  if (!isUser) {
+    const modelToShow = fallbackModel || primaryModel;
+    if (modelToShow) {
+      const badge = document.createElement("span");
+      if (fallbackModel) {
+        badge.title =
+          "Primary failed (" +
+          (fallbackReason || "error") +
+          ") — running on fallback";
+        badge.style.cssText =
+          "font-size:10px;padding:1px 6px;border-radius:999px;background:rgba(245,158,11,0.15);color:#f59e0b;border:1px solid rgba(245,158,11,0.3);cursor:default;";
+        badge.textContent = "⚡ fallback: " + fallbackModel;
+      } else {
+        badge.title = "Primary model";
+        badge.style.cssText =
+          "font-size:10px;padding:1px 6px;border-radius:999px;background:rgba(52,211,153,0.1);color:#34d399;border:1px solid rgba(52,211,153,0.2);cursor:default;";
+        badge.textContent = modelToShow;
+      }
+      labelEl.appendChild(badge);
+    }
+
+    // Show engine badge if available (for coding agents using CLIs)
+    if (engineUsed) {
+      const engineColors = {
+        claude: "#e07a5f",
+        codex: "#8338ec",
+        cursor: "#3d405b",
+        opencode: "#06d6a0",
+        gemini: "#4285f4",
+        "docker-sandbox": "#0db7ed",
+      };
+      const engineLabels = {
+        claude: "🤖 Claude Code",
+        codex: "🟣 Codex",
+        cursor: "🖱 Cursor",
+        opencode: "⚡ OpenCode",
+        gemini: "✨ Gemini",
+        "docker-sandbox": "🐳 Docker",
+      };
+      const engineBadge = document.createElement("span");
+      engineBadge.title =
+        "Executed by " + (engineLabels[engineUsed] || engineUsed);
+      engineBadge.style.cssText =
+        "font-size:10px;padding:1px 6px;border-radius:999px;color:#fff;background:" +
+        (engineColors[engineUsed] || "var(--text-3)") +
+        ";cursor:default;";
+      engineBadge.textContent = engineLabels[engineUsed] || engineUsed;
+      labelEl.appendChild(engineBadge);
+    }
+  }
+
+  const bubble = document.createElement("div");
+  const assistantBg = "var(--surface-2)";
+  const assistantText = "var(--text-2)";
+  const assistantBorder = "var(--border)";
+  bubble.style.cssText =
+    "max-width:80%;padding:10px 14px;border-radius:" +
+    (isUser ? "14px 14px 4px 14px" : "14px 14px 14px 4px") +
+    ";background:" +
+    (isUser ? "var(--purple)" : assistantBg) +
+    ";color:" +
+    (isUser ? "#fff" : assistantText) +
+    ";font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word;border:1px solid " +
+    (isUser ? "var(--border)" : assistantBorder) +
+    ";";
+  bubble.textContent = text;
+  div.appendChild(labelEl);
+  div.appendChild(bubble);
+  box.appendChild(div);
+  box.scrollTop = box.scrollHeight;
+}

package/apps/dashboard/src/core/state.js

@@ -0,0 +1,91 @@
+// Shared in-memory state — mutate via the exported object properties
+// Restored from sessionStorage on page load to survive refresh
+
+const STORAGE_KEY = 'crewswarm_ui_state';
+
+function loadSaved() {
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : {};
+  } catch { return {}; }
+}
+
+const saved = loadSaved();
+
+export const state = {
+  // OpenCode session selection (Sessions tab)
+  selected: saved.selected || null,
+  
+  // Selected CLI engine for Sessions tab (opencode, claude, codex, gemini, crew-cli)
+  selectedEngine: saved.selectedEngine || 'opencode',
+
+  // Agent list (loaded from /api/agents)
+  agents: saved.agents || [],
+
+  // Active chat project
+  chatActiveProjectId: saved.chatActiveProjectId || '',
+
+  // Active shared channel/project for the Swarm tab
+  swarmChatProjectId: saved.swarmChatProjectId || '',
+
+  // Project registry cache (populated by loadProjects)
+  projectsData: saved.projectsData || {},
+
+  // Active tab (for scroll restoration)
+  activeTab: saved.activeTab || 'chat',
+
+  // Per-tab scroll positions { tabName: scrollTop }
+  scrollPositions: saved.scrollPositions || {},
+};
+
+/** Persist current state to sessionStorage (call after meaningful state changes). */
+export function persistState() {
+  try {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify({
+      selected: state.selected,
+      selectedEngine: state.selectedEngine,
+      chatActiveProjectId: state.chatActiveProjectId,
+      swarmChatProjectId: state.swarmChatProjectId,
+      projectsData: state.projectsData,
+      activeTab: state.activeTab,
+      scrollPositions: state.scrollPositions,
+      // Don't persist agents list — it's large and gets stale
+    }));
+  } catch { /* quota exceeded or private mode — ignore */ }
+}
+
+/** Save scroll position for the current active tab. */
+export function saveScrollPosition(tabName) {
+  const main = document.querySelector('.view.active');
+  if (main) {
+    state.scrollPositions[tabName || state.activeTab] = main.scrollTop;
+    persistState();
+  }
+}
+
+/** Restore scroll position for a tab after re-render. */
+export function restoreScrollPosition(tabName) {
+  const pos = state.scrollPositions[tabName];
+  if (pos != null) {
+    requestAnimationFrame(() => {
+      const main = document.querySelector('.view.active');
+      if (main) main.scrollTop = pos;
+    });
+  }
+}
+
+export const AGENT_RANK = {
+  'crew-lead': 0,
+  'crew-orchestrator': 1, 'orchestrator': 1, 'crew-main': 2,
+  'crew-pm': 3, 'crew-architect': 4,
+  'crew-coder': 5, 'crew-coder-back': 6, 'crew-coder-front': 7, 'crew-frontend': 8,
+  'crew-ml': 9, 'crew-fixer': 10,
+  'crew-qa': 11, 'crew-security': 12,
+  'crew-researcher': 13, 'crew-copywriter': 14, 'crew-seo': 15,
+  'crew-github': 16, 'crew-db-migrator': 17,
+  'crew-telegram': 18, 'crew-mega': 19,
+};
+
+export function sortAgents(arr) {
+  return (arr || []).sort((a, b) => (AGENT_RANK[a.id] ?? 50) - (AGENT_RANK[b.id] ?? 50));
+}

package/apps/dashboard/src/core/task-manager.js

@@ -0,0 +1,134 @@
+/**
+ * Task Manager - Tracks and controls active tasks/agents
+ * Allows individual stop controls and concurrent operations
+ */
+
+export class TaskManager {
+  constructor() {
+    this.activeTasks = new Map(); // taskId -> { agent, controller, startTime, status, type }
+    this.listeners = new Set();
+  }
+
+  /**
+   * Register a new task with abort controller
+   * @param {string} taskId - Unique task identifier
+   * @param {object} details - { agent, type, description, controller }
+   */
+  registerTask(taskId, details) {
+    this.activeTasks.set(taskId, {
+      ...details,
+      startTime: Date.now(),
+      status: 'running',
+    });
+    this.notifyListeners();
+  }
+
+  /**
+   * Stop a specific task by ID
+   * @param {string} taskId
+   */
+  stopTask(taskId) {
+    const task = this.activeTasks.get(taskId);
+    if (!task) return false;
+    
+    if (task.controller) {
+      task.controller.abort();
+    }
+    
+    task.status = 'stopped';
+    this.activeTasks.delete(taskId);
+    this.notifyListeners();
+    return true;
+  }
+
+  /**
+   * Mark task as completed
+   * @param {string} taskId
+   */
+  completeTask(taskId) {
+    const task = this.activeTasks.get(taskId);
+    if (!task) return;
+    
+    task.status = 'completed';
+    this.activeTasks.delete(taskId);
+    this.notifyListeners();
+  }
+
+  /**
+   * Mark task as failed
+   * @param {string} taskId
+   * @param {string} error
+   */
+  failTask(taskId, error) {
+    const task = this.activeTasks.get(taskId);
+    if (!task) return;
+    
+    task.status = 'failed';
+    task.error = error;
+    this.activeTasks.delete(taskId);
+    this.notifyListeners();
+  }
+
+  /**
+   * Get all active tasks
+   */
+  getActiveTasks() {
+    return Array.from(this.activeTasks.entries()).map(([id, task]) => ({
+      id,
+      ...task,
+    }));
+  }
+
+  /**
+   * Check if a specific agent is currently busy
+   * @param {string} agent
+   */
+  isAgentBusy(agent) {
+    return Array.from(this.activeTasks.values()).some(
+      (task) => task.agent === agent && task.status === 'running'
+    );
+  }
+
+  /**
+   * Stop all tasks
+   */
+  stopAll() {
+    for (const [taskId] of this.activeTasks) {
+      this.stopTask(taskId);
+    }
+  }
+
+  /**
+   * Stop all tasks for a specific agent
+   * @param {string} agent
+   */
+  stopAgent(agent) {
+    for (const [taskId, task] of this.activeTasks) {
+      if (task.agent === agent) {
+        this.stopTask(taskId);
+      }
+    }
+  }
+
+  /**
+   * Subscribe to task changes
+   * @param {function} callback
+   */
+  subscribe(callback) {
+    this.listeners.add(callback);
+    return () => this.listeners.delete(callback);
+  }
+
+  notifyListeners() {
+    for (const listener of this.listeners) {
+      try {
+        listener(this.getActiveTasks());
+      } catch (err) {
+        console.error('TaskManager listener error:', err);
+      }
+    }
+  }
+}
+
+// Singleton instance
+export const taskManager = new TaskManager();