@agent-link/server 0.1.132 → 0.1.133

package/web/modules/connection.js

@@ -38,6 +38,10 @@ export function createConnection(deps) {
   let filePreview = null;
   function setFilePreview(fp) { filePreview = fp; }
 
+  // Team module — set after creation to resolve circular dependency
+  let team = null;
+  function setTeam(t) { team = t; }
+
   let ws = null;
   let sessionKey = null;
   let reconnectAttempts = 0;
@@ -105,7 +109,7 @@ export function createConnection(deps) {
               id: ++cache.messageIdCounter, role: 'tool',
               toolId: h.toolId || '', toolName: h.toolName || 'unknown',
               toolInput: h.toolInput || '', hasResult: true,
-              expanded: (h.toolName === 'Edit' || h.toolName === 'TodoWrite'),
+              expanded: (h.toolName === 'Edit' || h.toolName === 'TodoWrite' || h.toolName === 'Agent'),
               timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
             });
           }
@@ -177,7 +181,7 @@ export function createConnection(deps) {
             id: ++cache.messageIdCounter, role: 'tool',
             toolId: tool.id, toolName: tool.name || 'unknown',
             toolInput: tool.input ? JSON.stringify(tool.input, null, 2) : '',
-            hasResult: false, expanded: (tool.name === 'Edit' || tool.name === 'TodoWrite'),
+            hasResult: false, expanded: (tool.name === 'Edit' || tool.name === 'TodoWrite' || tool.name === 'Agent'),
             timestamp: new Date(),
           };
           msgs.push(toolMsg);
@@ -383,7 +387,7 @@ export function createConnection(deps) {
           id: streaming.nextId(), role: 'tool',
           toolId: tool.id, toolName: tool.name || 'unknown',
           toolInput: tool.input ? JSON.stringify(tool.input, null, 2) : '',
-          hasResult: false, expanded: (tool.name === 'Edit' || tool.name === 'TodoWrite'), timestamp: new Date(),
+          hasResult: false, expanded: (tool.name === 'Edit' || tool.name === 'TodoWrite' || tool.name === 'Agent'), timestamp: new Date(),
         };
         messages.value.push(toolMsg);
         if (tool.id) toolMsgMap.set(tool.id, toolMsg);
@@ -473,6 +477,16 @@ export function createConnection(deps) {
         msg = parsed;
       }
 
+      // ── Team messages: route before normal conversation routing ──
+      if (team && (msg.type?.startsWith('team_') || msg.type === 'teams_list' || (msg.type === 'claude_output' && msg.teamId))) {
+        if (msg.type === 'claude_output' && msg.teamId) {
+          team.handleTeamAgentOutput(msg);
+        } else {
+          team.handleTeamMessage(msg);
+        }
+        return;
+      }
+
       // ── Multi-session: route messages to background conversations ──
       // Messages with a conversationId that doesn't match the current foreground
       // conversation are routed to their cached background state.
@@ -510,6 +524,7 @@ export function createConnection(deps) {
             wsSend({ type: 'change_workdir', workDir: savedDir });
           }
           sidebar.requestSessionList();
+          if (team) team.requestTeamsList();
           startPing();
           wsSend({ type: 'query_active_conversations' });
         } else {
@@ -553,6 +568,7 @@ export function createConnection(deps) {
           sidebar.addToWorkdirHistory(msg.agent.workDir);
         }
         sidebar.requestSessionList();
+        if (team) team.requestTeamsList();
         startPing();
         wsSend({ type: 'query_active_conversations' });
       } else if (msg.type === 'active_conversations') {
@@ -607,6 +623,14 @@ export function createConnection(deps) {
             processingConversations.value[convId] = true;
           }
         }
+
+        // Restore active team state on reconnect
+        if (team && msg.activeTeam) {
+          team.handleActiveTeamRestore(msg.activeTeam);
+        } else if (team && !msg.activeTeam && msg.lastCompletedTeamId) {
+          // Team completed before page refresh — auto-load as historical view
+          team.viewHistoricalTeam(msg.lastCompletedTeamId);
+        }
       } else if (msg.type === 'error') {
         streaming.flushReveal();
         finalizeStreamingMsg(scheduleHighlight);
@@ -755,7 +779,7 @@ export function createConnection(deps) {
                 id: streaming.nextId(), role: 'tool',
                 toolId: h.toolId || '', toolName: h.toolName || 'unknown',
                 toolInput: h.toolInput || '', hasResult: true,
-                expanded: (h.toolName === 'Edit' || h.toolName === 'TodoWrite'), timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
+                expanded: (h.toolName === 'Edit' || h.toolName === 'TodoWrite' || h.toolName === 'Agent'), timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
               });
             }
           }
@@ -880,5 +904,5 @@ export function createConnection(deps) {
     ws.send(JSON.stringify({ type: 'authenticate', password: pwd }));
   }
 
-  return { connect, wsSend, closeWs, submitPassword, setDequeueNext, setFileBrowser, setFilePreview, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap };
+  return { connect, wsSend, closeWs, submitPassword, setDequeueNext, setFileBrowser, setFilePreview, setTeam, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap };
 }

package/web/modules/markdown.js

@@ -73,6 +73,7 @@ const TOOL_SVG = {
   Glob:      '<svg viewBox="0 0 16 16" width="14" height="14"><path fill="currentColor" d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 1 1-1.06 1.06l-3.04-3.04zM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7z"/></svg>',
   Grep:      '<svg viewBox="0 0 16 16" width="14" height="14"><path fill="currentColor" d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 1 1-1.06 1.06l-3.04-3.04zM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7z"/></svg>',
   Task:      '<svg viewBox="0 0 16 16" width="14" height="14"><path fill="currentColor" d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 14.25 15H1.75A1.75 1.75 0 0 1 0 13.25V2.75C0 1.784.784 1 1.75 1zm0 1.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V2.75a.25.25 0 0 0-.25-.25H1.75zM3.5 5h9v1.5h-9V5zm0 3h9v1.5h-9V8zm0 3h5v1.5h-5V11z"/></svg>',
+  Agent:     '<svg viewBox="0 0 16 16" width="14" height="14"><path fill="currentColor" d="M10.5 5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zm.061 3.073a4 4 0 1 0-5.123 0 6.004 6.004 0 0 0-3.431 5.142.75.75 0 0 0 1.498.07 4.5 4.5 0 0 1 8.99 0 .75.75 0 1 0 1.498-.07 6.004 6.004 0 0 0-3.432-5.142z"/></svg>',
   WebFetch:  '<svg viewBox="0 0 16 16" width="14" height="14"><path fill="currentColor" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.7 5.3a.75.75 0 0 0-1.06-1.06l-5.5 5.5a.75.75 0 1 0 1.06 1.06l5.5-5.5zM8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z"/></svg>',
   WebSearch: '<svg viewBox="0 0 16 16" width="14" height="14"><path fill="currentColor" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.7 5.3a.75.75 0 0 0-1.06-1.06l-5.5 5.5a.75.75 0 1 0 1.06 1.06l5.5-5.5zM8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z"/></svg>',
   TodoWrite: '<svg viewBox="0 0 16 16" width="14" height="14"><path fill="currentColor" d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 1.042-1.08L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z"/></svg>',

package/web/modules/messageHelpers.js

@@ -69,6 +69,8 @@ export function getToolSummary(msg) {
       return `${done}/${obj.todos.length} done`;
     }
     if (name === 'Task' && obj.description) return obj.description;
+    if (name === 'Agent' && obj.description) return obj.description;
+    if (name === 'Agent' && obj.prompt) return obj.prompt.length > 80 ? obj.prompt.slice(0, 80) + '...' : obj.prompt;
     if (name === 'WebSearch' && obj.query) return obj.query;
     if (name === 'WebFetch' && obj.url) return obj.url.length > 60 ? obj.url.slice(0, 60) + '...' : obj.url;
   } catch {}
@@ -135,13 +137,12 @@ export function getFormattedToolInput(msg) {
       return html;
     }
 
-    if (name === 'Task') {
+    if (name === 'Task' || name === 'Agent') {
       let html = '';
       if (obj.description) html += '<div class="task-field"><span class="tool-input-meta">Description</span> ' + esc(obj.description) + '</div>';
       if (obj.subagent_type) html += '<div class="task-field"><span class="tool-input-meta">Agent</span> <code class="tool-input-cmd">' + esc(obj.subagent_type) + '</code></div>';
       if (obj.prompt) {
-        const short = obj.prompt.length > 200 ? obj.prompt.slice(0, 200) + '...' : obj.prompt;
-        html += '<div class="task-field"><span class="tool-input-meta">Prompt</span></div><div class="task-prompt">' + esc(short) + '</div>';
+        html += '<div class="task-field"><span class="tool-input-meta">Prompt</span></div><div class="task-prompt">' + esc(obj.prompt) + '</div>';
       }
       if (html) return html;
     }

package/web/modules/team.js

@@ -0,0 +1,342 @@
+// ── Team mode: state management and message routing ───────────────────────
+const { ref, computed } = Vue;
+
+const MAX_FEED_ENTRIES = 200;
+
+// Color palette (matches agent/src/team.ts AGENT_COLORS)
+const AGENT_COLORS = [
+  '#EF4444', '#EAB308', '#3B82F6', '#10B981', '#8B5CF6',
+  '#F97316', '#EC4899', '#06B6D4', '#84CC16', '#6366F1',
+];
+
+/**
+ * Creates the team mode controller.
+ * @param {object} deps
+ * @param {Function} deps.wsSend
+ * @param {Function} deps.scrollToBottom
+ */
+export function createTeam(deps) {
+  const { wsSend, scrollToBottom } = deps;
+
+  // ── Reactive state ──
+
+  /** @type {import('vue').Ref<object|null>} Current team state (TeamStateSerialized or null) */
+  const teamState = ref(null);
+
+  /** @type {import('vue').Ref<string>} 'chat' | 'team' — current input mode */
+  const teamMode = ref('chat');
+
+  /** @type {import('vue').Ref<string|null>} Currently viewed agent ID, null = dashboard */
+  const activeAgentView = ref(null);
+
+  /** @type {import('vue').Ref<object|null>} Historical team loaded for read-only viewing */
+  const historicalTeam = ref(null);
+
+  /** @type {import('vue').Ref<Array>} Teams list from server */
+  const teamsList = ref([]);
+
+  /** Per-agent message accumulator: agentId → message[] */
+  const agentMessages = ref({});
+
+  /** Per-agent message ID counter */
+  let agentMsgIdCounter = 0;
+
+  // ── Computed ──
+
+  const isTeamActive = computed(() => teamState.value !== null && teamState.value.status !== 'completed' && teamState.value.status !== 'failed');
+  const isTeamRunning = computed(() => teamState.value !== null && (teamState.value.status === 'running' || teamState.value.status === 'planning' || teamState.value.status === 'summarizing'));
+
+  /** The team being displayed: active or historical */
+  const displayTeam = computed(() => historicalTeam.value || teamState.value);
+
+  const pendingTasks = computed(() => {
+    const t = displayTeam.value;
+    if (!t) return [];
+    return t.tasks.filter(task => task.status === 'pending');
+  });
+  const activeTasks = computed(() => {
+    const t = displayTeam.value;
+    if (!t) return [];
+    return t.tasks.filter(task => task.status === 'active');
+  });
+  const doneTasks = computed(() => {
+    const t = displayTeam.value;
+    if (!t) return [];
+    return t.tasks.filter(task => task.status === 'done');
+  });
+  const failedTasks = computed(() => {
+    const t = displayTeam.value;
+    if (!t) return [];
+    return t.tasks.filter(task => task.status === 'failed');
+  });
+
+  // ── Methods ──
+
+  function launchTeam(instruction, template) {
+    wsSend({ type: 'create_team', instruction, template: template || 'custom' });
+  }
+
+  function dissolveTeam() {
+    wsSend({ type: 'dissolve_team' });
+  }
+
+  function viewAgent(agentId) {
+    activeAgentView.value = agentId;
+  }
+
+  function viewDashboard() {
+    activeAgentView.value = null;
+  }
+
+  function viewHistoricalTeam(teamId) {
+    wsSend({ type: 'get_team', teamId });
+  }
+
+  function requestTeamsList() {
+    wsSend({ type: 'list_teams' });
+  }
+
+  function requestAgentHistory(teamId, agentId) {
+    wsSend({ type: 'get_team_agent_history', teamId, agentId });
+  }
+
+  function getAgentColor(agentId) {
+    if (agentId === 'lead') return '#A78BFA'; // purple for lead
+    const t = displayTeam.value;
+    if (!t || !t.agents) return AGENT_COLORS[0];
+    const idx = t.agents.findIndex(a => a.id === agentId);
+    return idx >= 0 ? AGENT_COLORS[idx % AGENT_COLORS.length] : AGENT_COLORS[0];
+  }
+
+  function findAgent(agentId) {
+    if (agentId === 'lead') return { id: 'lead', name: 'Lead', color: '#A78BFA', status: 'working' };
+    const t = displayTeam.value;
+    if (!t || !t.agents) return null;
+    return t.agents.find(a => a.id === agentId) || null;
+  }
+
+  function getAgentMessages(agentId) {
+    return agentMessages.value[agentId] || [];
+  }
+
+  function backToChat() {
+    teamMode.value = 'chat';
+    historicalTeam.value = null;
+    activeAgentView.value = null;
+  }
+
+  function newTeam() {
+    historicalTeam.value = null;
+    activeAgentView.value = null;
+    // If completed team is still in teamState, clear it so create panel shows
+    if (teamState.value && (teamState.value.status === 'completed' || teamState.value.status === 'failed')) {
+      teamState.value = null;
+    }
+    requestTeamsList();
+  }
+
+  // ── Message routing ──
+
+  /**
+   * Handle incoming team-related messages from the WebSocket.
+   * Returns true if the message was consumed (should not be processed further).
+   */
+  function handleTeamMessage(msg) {
+    switch (msg.type) {
+      case 'team_created':
+        teamState.value = msg.team;
+        teamMode.value = 'team';
+        historicalTeam.value = null;
+        activeAgentView.value = null;
+        agentMessages.value = {};
+        agentMsgIdCounter = 0;
+        // Initialize lead message list
+        agentMessages.value['lead'] = [];
+        // Initialize agent message lists
+        if (msg.team.agents) {
+          for (const agent of msg.team.agents) {
+            agentMessages.value[agent.id] = [];
+          }
+        }
+        return true;
+
+      case 'team_agent_status': {
+        if (!teamState.value || teamState.value.teamId !== msg.teamId) return false;
+        const agent = msg.agent;
+        const existing = teamState.value.agents.find(a => a.id === agent.id);
+        if (existing) {
+          existing.status = agent.status;
+          existing.taskId = agent.taskId;
+        } else {
+          // New agent joined
+          teamState.value.agents.push(agent);
+          if (!agentMessages.value[agent.id]) {
+            agentMessages.value[agent.id] = [];
+          }
+        }
+        // Update team status to running when first subagent appears
+        if (teamState.value.status === 'planning') {
+          teamState.value.status = 'running';
+        }
+        return true;
+      }
+
+      case 'team_task_update': {
+        if (!teamState.value || teamState.value.teamId !== msg.teamId) return false;
+        const task = msg.task;
+        const idx = teamState.value.tasks.findIndex(t => t.id === task.id);
+        if (idx >= 0) {
+          teamState.value.tasks[idx] = task;
+        } else {
+          teamState.value.tasks.push(task);
+        }
+        return true;
+      }
+
+      case 'team_feed': {
+        if (!teamState.value || teamState.value.teamId !== msg.teamId) return false;
+        teamState.value.feed.push(msg.entry);
+        // Cap feed entries
+        if (teamState.value.feed.length > MAX_FEED_ENTRIES) {
+          teamState.value.feed = teamState.value.feed.slice(-MAX_FEED_ENTRIES);
+        }
+        return true;
+      }
+
+      case 'team_completed': {
+        if (!teamState.value || teamState.value.teamId !== msg.teamId) return false;
+        // Update with final state from server
+        teamState.value = msg.team;
+        return true;
+      }
+
+      case 'team_lead_status': {
+        if (!teamState.value || teamState.value.teamId !== msg.teamId) return false;
+        teamState.value.leadStatus = msg.leadStatus;
+        return true;
+      }
+
+      case 'teams_list':
+        teamsList.value = msg.teams || [];
+        return true;
+
+      case 'team_detail':
+        historicalTeam.value = msg.team;
+        teamMode.value = 'team';
+        activeAgentView.value = null;
+        return true;
+
+      case 'team_agent_history': {
+        if (msg.agentId) {
+          if (msg.messages && msg.messages.length > 0) {
+            // Default expand tool messages in history view
+            for (const m of msg.messages) {
+              if (m.role === 'tool' && m.expanded === undefined) m.expanded = true;
+            }
+            agentMessages.value[msg.agentId] = msg.messages;
+          } else {
+            agentMessages.value[msg.agentId] = [];
+          }
+        }
+        return true;
+      }
+
+      default:
+        return false;
+    }
+  }
+
+  /**
+   * Handle claude_output messages tagged with teamId + agentRole.
+   * Accumulates per-agent messages for agent detail view.
+   * Returns true if consumed.
+   */
+  function handleTeamAgentOutput(msg) {
+    if (!msg.teamId || !msg.agentRole) return false;
+    if (!teamState.value || teamState.value.teamId !== msg.teamId) return false;
+
+    const agentId = msg.agentRole;
+    if (!agentMessages.value[agentId]) {
+      agentMessages.value[agentId] = [];
+    }
+    const msgs = agentMessages.value[agentId];
+    const data = msg.data;
+    if (!data) return true;
+
+    if (data.type === 'content_block_delta' && data.delta) {
+      // Append text to last assistant message (or create new one)
+      const last = msgs.length > 0 ? msgs[msgs.length - 1] : null;
+      if (last && last.role === 'assistant' && last.isStreaming) {
+        last.content += data.delta;
+      } else {
+        msgs.push({
+          id: ++agentMsgIdCounter, role: 'assistant',
+          content: data.delta, isStreaming: true, timestamp: Date.now(),
+        });
+      }
+    } else if (data.type === 'tool_use' && data.tools) {
+      // Finalize streaming message
+      const last = msgs.length > 0 ? msgs[msgs.length - 1] : null;
+      if (last && last.role === 'assistant' && last.isStreaming) {
+        last.isStreaming = false;
+      }
+      for (const tool of data.tools) {
+        msgs.push({
+          id: ++agentMsgIdCounter, role: 'tool',
+          toolId: tool.id, toolName: tool.name || 'unknown',
+          toolInput: tool.input ? JSON.stringify(tool.input, null, 2) : '',
+          hasResult: false, expanded: true, timestamp: Date.now(),
+        });
+      }
+    } else if (data.type === 'user' && data.tool_use_result) {
+      const result = data.tool_use_result;
+      const results = Array.isArray(result) ? result : [result];
+      for (const r of results) {
+        const toolMsg = msgs.find(m => m.role === 'tool' && m.toolId === r.tool_use_id);
+        if (toolMsg) {
+          toolMsg.toolOutput = typeof r.content === 'string'
+            ? r.content : JSON.stringify(r.content, null, 2);
+          toolMsg.hasResult = true;
+        }
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * Handle active_conversations response that includes activeTeam.
+   * Called on initial connect + reconnect to restore team state.
+   */
+  function handleActiveTeamRestore(activeTeam) {
+    if (!activeTeam) return;
+    teamState.value = activeTeam;
+    teamMode.value = 'team';
+    // Re-initialize agent message lists (messages lost on reconnect)
+    if (!agentMessages.value['lead']) {
+      agentMessages.value['lead'] = [];
+    }
+    if (activeTeam.agents) {
+      for (const agent of activeTeam.agents) {
+        if (!agentMessages.value[agent.id]) {
+          agentMessages.value[agent.id] = [];
+        }
+      }
+    }
+  }
+
+  return {
+    // State
+    teamState, teamMode, activeAgentView, historicalTeam, teamsList,
+    agentMessages,
+    // Computed
+    isTeamActive, isTeamRunning, displayTeam,
+    pendingTasks, activeTasks, doneTasks, failedTasks,
+    // Methods
+    launchTeam, dissolveTeam, viewAgent, viewDashboard,
+    viewHistoricalTeam, requestTeamsList, requestAgentHistory,
+    getAgentColor, findAgent, getAgentMessages, backToChat, newTeam,
+    // Message handling
+    handleTeamMessage, handleTeamAgentOutput, handleActiveTeamRestore,
+  };
+}