@agent-link/server 0.1.156 → 0.1.158

package/web/landing.html

@@ -53,7 +53,7 @@
     --accent: #3b82f6;
     --accent-soft: rgba(59,130,246,0.15);
     --accent-glow: rgba(59,130,246,0.4);
-    --rose: #f59e0b;
+    --rose: #f43f5e;
     --amber: #f59e0b;
     --cyan: #22d3ee;
     --green: #34d399;
@@ -662,7 +662,7 @@
   }
 
   .bento-icon.purple { background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.05)); color: var(--accent); }
-  .bento-icon.rose { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); color: var(--rose); }
+  .bento-icon.rose { background: linear-gradient(135deg, rgba(244,63,94,0.2), rgba(244,63,94,0.05)); color: var(--rose); }
   .bento-icon.cyan { background: linear-gradient(135deg, rgba(34,211,238,0.2), rgba(34,211,238,0.05)); color: var(--cyan); }
   .bento-icon.green { background: linear-gradient(135deg, rgba(52,211,153,0.2), rgba(52,211,153,0.05)); color: var(--green); }
   .bento-icon.amber { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); color: var(--amber); }
@@ -1194,7 +1194,7 @@
   </div>
 
   <!-- File Preview -->
-  <div class="bento-card">
+  <div class="bento-card wide">
     <div class="bento-visual">
       <div class="bento-icon rose">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></svg>

package/web/landing.zh.html

@@ -55,7 +55,7 @@
     --accent: #3b82f6;
     --accent-soft: rgba(59,130,246,0.15);
     --accent-glow: rgba(59,130,246,0.4);
-    --rose: #f59e0b;
+    --rose: #f43f5e;
     --amber: #f59e0b;
     --cyan: #22d3ee;
     --green: #34d399;
@@ -663,7 +663,7 @@
   }
 
   .bento-icon.purple { background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.05)); color: var(--accent); }
-  .bento-icon.rose { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); color: var(--rose); }
+  .bento-icon.rose { background: linear-gradient(135deg, rgba(244,63,94,0.2), rgba(244,63,94,0.05)); color: var(--rose); }
   .bento-icon.cyan { background: linear-gradient(135deg, rgba(34,211,238,0.2), rgba(34,211,238,0.05)); color: var(--cyan); }
   .bento-icon.green { background: linear-gradient(135deg, rgba(52,211,153,0.2), rgba(52,211,153,0.05)); color: var(--green); }
   .bento-icon.amber { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); color: var(--amber); }
@@ -1193,7 +1193,7 @@
   </div>
 
   <!-- File Preview -->
-  <div class="bento-card">
+  <div class="bento-card wide">
     <div class="bento-visual">
       <div class="bento-icon rose">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></svg>

package/web/modules/backgroundRouting.js

@@ -45,7 +45,8 @@ export function buildHistoryBatch(history, nextId) {
       batch.push({
         id: nextId(), role: 'tool',
         toolId: h.toolId || '', toolName: h.toolName || 'unknown',
-        toolInput: h.toolInput || '', hasResult: true,
+        toolInput: h.toolInput || '', hasResult: !!h.toolOutput,
+        toolOutput: h.toolOutput || '',
         expanded: (h.toolName === 'Edit' || h.toolName === 'TodoWrite' || h.toolName === 'Agent'),
         timestamp: h.timestamp ? new Date(h.timestamp) : new Date(),
       });

package/web/modules/connection.js

@@ -43,6 +43,10 @@ export function createConnection(deps) {
   let team = null;
   function setTeam(t) { team = t; }
 
+  // Loop module — set after creation to resolve circular dependency
+  let loop = null;
+  function setLoop(l) { loop = l; }
+
   let ws = null;
   let sessionKey = null;
   let reconnectAttempts = 0;
@@ -230,6 +234,12 @@ export function createConnection(deps) {
         return;
       }
 
+      // ── Loop messages: route before normal conversation routing ──
+      if (loop && (msg.type?.startsWith('loop_') || msg.type === 'loops_list')) {
+        loop.handleLoopMessage(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.
@@ -268,6 +278,7 @@ export function createConnection(deps) {
           }
           sidebar.requestSessionList();
           if (team) team.requestTeamsList();
+          if (loop) loop.requestLoopsList();
           startPing();
           wsSend({ type: 'query_active_conversations' });
         } else {
@@ -312,6 +323,7 @@ export function createConnection(deps) {
         }
         sidebar.requestSessionList();
         if (team) team.requestTeamsList();
+        if (loop) loop.requestLoopsList();
         startPing();
         wsSend({ type: 'query_active_conversations' });
       } else if (msg.type === 'active_conversations') {
@@ -386,6 +398,10 @@ export function createConnection(deps) {
         if (currentConversationId && currentConversationId.value) {
           processingConversations.value[currentConversationId.value] = false;
         }
+        // Forward error to Loop module for inline display
+        if (loop && loop.loopError) {
+          loop.loopError.value = msg.message || '';
+        }
         _dequeueNext();
       } else if (msg.type === 'claude_output') {
         handleClaudeOutput(msg, scheduleHighlight);
@@ -551,8 +567,13 @@ export function createConnection(deps) {
           content: 'Working directory changed to: ' + msg.workDir,
           timestamp: new Date(),
         });
+        // Clear old history immediately so UI doesn't show stale data
+        historySessions.value = [];
+        if (team) team.teamsList.value = [];
+        if (loop) loop.loopsList.value = [];
         sidebar.requestSessionList();
         if (team) team.requestTeamsList();
+        if (loop) loop.requestLoopsList();
       }
     };
 
@@ -603,5 +624,5 @@ export function createConnection(deps) {
     ws.send(JSON.stringify({ type: 'authenticate', password: pwd }));
   }
 
-  return { connect, wsSend, closeWs, submitPassword, setDequeueNext, setFileBrowser, setFilePreview, setTeam, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap };
+  return { connect, wsSend, closeWs, submitPassword, setDequeueNext, setFileBrowser, setFilePreview, setTeam, setLoop, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap };
 }

package/web/modules/loop.js

@@ -0,0 +1,337 @@
+// ── Loop mode: state management and message routing ───────────────────────────
+const { ref, computed } = Vue;
+
+import { buildHistoryBatch } from './backgroundRouting.js';
+
+/**
+ * Creates the Loop mode controller.
+ * @param {object} deps
+ * @param {Function} deps.wsSend
+ * @param {Function} deps.scrollToBottom
+ */
+export function createLoop(deps) {
+  const { wsSend, scrollToBottom } = deps;
+
+  // ── Reactive state ──────────────────────────────────
+
+  /** @type {import('vue').Ref<Array>} All Loop definitions from agent */
+  const loopsList = ref([]);
+
+  /** @type {import('vue').Ref<object|null>} Loop selected for detail view */
+  const selectedLoop = ref(null);
+
+  /** @type {import('vue').Ref<string|null>} Execution ID selected for replay */
+  const selectedExecution = ref(null);
+
+  /** @type {import('vue').Ref<Array>} Execution history for selectedLoop */
+  const executionHistory = ref([]);
+
+  /** @type {import('vue').Ref<Array>} Messages for selectedExecution replay */
+  const executionMessages = ref([]);
+
+  /** @type {import('vue').Ref<object>} loopId -> LoopExecution for currently running */
+  const runningLoops = ref({});
+
+  /** @type {import('vue').Ref<boolean>} Loading execution list */
+  const loadingExecutions = ref(false);
+
+  /** @type {import('vue').Ref<boolean>} Loading single execution detail */
+  const loadingExecution = ref(false);
+
+  /** @type {import('vue').Ref<string|null>} Loop being edited (loopId) or null for new */
+  const editingLoopId = ref(null);
+
+  /** @type {import('vue').Ref<string>} Error message from last loop operation (create/update) */
+  const loopError = ref('');
+
+  /** @type {number} Current execution history page limit */
+  let execPageLimit = 20;
+
+  /** @type {import('vue').Ref<boolean>} Whether more execution history may be available */
+  const hasMoreExecutions = ref(false);
+
+  /** @type {import('vue').Ref<boolean>} Loading more executions via pagination */
+  const loadingMoreExecutions = ref(false);
+
+  // ── Computed ──────────────────────────────────────
+
+  /** Whether any Loop execution is currently running */
+  const hasRunningLoop = computed(() => Object.keys(runningLoops.value).length > 0);
+
+  /** Get the first running loop for notification banner */
+  const firstRunningLoop = computed(() => {
+    const entries = Object.entries(runningLoops.value);
+    if (entries.length === 0) return null;
+    const [loopId, execution] = entries[0];
+    const loop = loopsList.value.find(l => l.id === loopId);
+    return { loopId, execution, name: loop?.name || 'Unknown' };
+  });
+
+  // ── Loop CRUD ─────────────────────────────────────
+
+  function createNewLoop(config) {
+    wsSend({ type: 'create_loop', ...config });
+  }
+
+  function updateExistingLoop(loopId, updates) {
+    wsSend({ type: 'update_loop', loopId, updates });
+  }
+
+  function deleteExistingLoop(loopId) {
+    wsSend({ type: 'delete_loop', loopId });
+  }
+
+  function toggleLoop(loopId) {
+    const loop = loopsList.value.find(l => l.id === loopId);
+    if (!loop) return;
+    wsSend({ type: 'update_loop', loopId, updates: { enabled: !loop.enabled } });
+  }
+
+  function runNow(loopId) {
+    wsSend({ type: 'run_loop', loopId });
+  }
+
+  function cancelExecution(loopId) {
+    wsSend({ type: 'cancel_loop_execution', loopId });
+  }
+
+  function requestLoopsList() {
+    wsSend({ type: 'list_loops' });
+  }
+
+  // ── Navigation ────────────────────────────────────
+
+  function viewLoopDetail(loopId) {
+    const loop = loopsList.value.find(l => l.id === loopId);
+    if (!loop) return;
+    selectedLoop.value = { ...loop };
+    selectedExecution.value = null;
+    executionMessages.value = [];
+    executionHistory.value = [];
+    loadingExecutions.value = true;
+    editingLoopId.value = null;
+    execPageLimit = 20;
+    hasMoreExecutions.value = false;
+    wsSend({ type: 'list_loop_executions', loopId, limit: execPageLimit });
+  }
+
+  function viewExecution(loopId, executionId) {
+    selectedExecution.value = executionId;
+    loadingExecution.value = true;
+    executionMessages.value = [];
+    wsSend({ type: 'get_loop_execution_messages', loopId, executionId });
+  }
+
+  function backToLoopsList() {
+    selectedLoop.value = null;
+    selectedExecution.value = null;
+    executionHistory.value = [];
+    executionMessages.value = [];
+    editingLoopId.value = null;
+  }
+
+  function backToLoopDetail() {
+    selectedExecution.value = null;
+    executionMessages.value = [];
+  }
+
+  function startEditing(loopId) {
+    editingLoopId.value = loopId;
+  }
+
+  function cancelEditing() {
+    editingLoopId.value = null;
+  }
+
+  function loadMoreExecutions() {
+    if (!selectedLoop.value || loadingMoreExecutions.value) return;
+    loadingMoreExecutions.value = true;
+    execPageLimit *= 2;
+    wsSend({ type: 'list_loop_executions', loopId: selectedLoop.value.id, limit: execPageLimit });
+  }
+
+  function clearLoopError() {
+    loopError.value = '';
+  }
+
+  // ── Live output accumulation ─────────────────────
+
+  /** Message ID counter for live execution messages */
+  let liveMsgIdCounter = 0;
+
+  /**
+   * Append a Claude output message to the live execution display.
+   * Mirrors the team.js handleTeamAgentOutput accumulation logic.
+   */
+  function appendOutputToDisplay(data) {
+    if (!data) return;
+    const msgs = executionMessages.value;
+
+    if (data.type === 'content_block_delta' && data.delta) {
+      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: ++liveMsgIdCounter, role: 'assistant',
+          content: data.delta, isStreaming: true, timestamp: Date.now(),
+        });
+      }
+    } else if (data.type === 'tool_use' && data.tools) {
+      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: ++liveMsgIdCounter, 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;
+        }
+      }
+    }
+
+    scrollToBottom();
+  }
+
+  // ── Message routing ───────────────────────────────
+
+  /**
+   * Handle incoming Loop-related messages from the WebSocket.
+   * Returns true if the message was consumed.
+   */
+  function handleLoopMessage(msg) {
+    switch (msg.type) {
+      case 'loops_list':
+        loopsList.value = msg.loops || [];
+        return true;
+
+      case 'loop_created':
+        loopsList.value.push(msg.loop);
+        loopError.value = '';
+        return true;
+
+      case 'loop_updated': {
+        const idx = loopsList.value.findIndex(l => l.id === msg.loop.id);
+        if (idx >= 0) loopsList.value[idx] = msg.loop;
+        if (selectedLoop.value?.id === msg.loop.id) {
+          selectedLoop.value = { ...msg.loop };
+        }
+        editingLoopId.value = null;
+        loopError.value = '';
+        return true;
+      }
+
+      case 'loop_deleted':
+        loopsList.value = loopsList.value.filter(l => l.id !== msg.loopId);
+        if (selectedLoop.value?.id === msg.loopId) backToLoopsList();
+        return true;
+
+      case 'loop_execution_started':
+        runningLoops.value = { ...runningLoops.value, [msg.loopId]: msg.execution };
+        // If viewing this loop's detail, prepend to history
+        if (selectedLoop.value?.id === msg.loopId) {
+          executionHistory.value.unshift(msg.execution);
+        }
+        return true;
+
+      case 'loop_execution_output':
+        // If user is viewing this execution live, append to display
+        if (selectedExecution.value === msg.executionId) {
+          appendOutputToDisplay(msg.data);
+        }
+        return true;
+
+      case 'loop_execution_completed': {
+        const newRunning = { ...runningLoops.value };
+        delete newRunning[msg.loopId];
+        runningLoops.value = newRunning;
+        // Update execution in history list
+        if (selectedLoop.value?.id === msg.loopId) {
+          const idx = executionHistory.value.findIndex(e => e.id === msg.execution.id);
+          if (idx >= 0) executionHistory.value[idx] = msg.execution;
+        }
+        // Finalize streaming message
+        const msgs = executionMessages.value;
+        if (msgs.length > 0) {
+          const last = msgs[msgs.length - 1];
+          if (last.role === 'assistant' && last.isStreaming) {
+            last.isStreaming = false;
+          }
+        }
+        // Update Loop's lastExecution in sidebar list
+        const loop = loopsList.value.find(l => l.id === msg.loopId);
+        if (loop) {
+          loop.lastExecution = {
+            id: msg.execution.id,
+            status: msg.execution.status,
+            startedAt: msg.execution.startedAt,
+            durationMs: msg.execution.durationMs,
+            trigger: msg.execution.trigger,
+          };
+        }
+        return true;
+      }
+
+      case 'loop_executions_list':
+        if (selectedLoop.value?.id === msg.loopId) {
+          const execs = msg.executions || [];
+          executionHistory.value = execs;
+          loadingExecutions.value = false;
+          loadingMoreExecutions.value = false;
+          hasMoreExecutions.value = execs.length >= execPageLimit;
+        }
+        return true;
+
+      case 'loop_execution_messages':
+        if (selectedExecution.value === msg.executionId) {
+          if (msg.messages && msg.messages.length > 0) {
+            let idCounter = 0;
+            executionMessages.value = buildHistoryBatch(msg.messages, () => ++idCounter);
+            liveMsgIdCounter = idCounter;
+          } else {
+            executionMessages.value = [];
+          }
+          loadingExecution.value = false;
+          scrollToBottom();
+        }
+        return true;
+
+      default:
+        return false;
+    }
+  }
+
+  return {
+    // State
+    loopsList, selectedLoop, selectedExecution,
+    executionHistory, executionMessages, runningLoops,
+    loadingExecutions, loadingExecution, editingLoopId,
+    loopError, hasMoreExecutions, loadingMoreExecutions,
+    // Computed
+    hasRunningLoop, firstRunningLoop,
+    // CRUD
+    createNewLoop, updateExistingLoop, deleteExistingLoop,
+    toggleLoop, runNow, cancelExecution, requestLoopsList,
+    // Navigation
+    viewLoopDetail, viewExecution,
+    backToLoopsList, backToLoopDetail,
+    startEditing, cancelEditing,
+    // Pagination & errors
+    loadMoreExecutions, clearLoopError,
+    // Message routing
+    handleLoopMessage,
+  };
+}

package/web/modules/loopTemplates.js

@@ -0,0 +1,110 @@
+// ── Loop template definitions ─────────────────────────────────────────────────
+// Predefined sample cases for the Loop creation panel ("Try it" cards).
+// Each template pre-fills name, prompt, scheduleType, and scheduleConfig.
+
+export const LOOP_TEMPLATES = {
+  'competitive-intel': {
+    label: 'Competitive Intel Monitor',
+    description: 'Track competitor products, pricing, and industry trends',
+    name: 'Competitive Intelligence Monitor',
+    prompt: `Monitor competitor and industry developments. Scan the working directory for any tracked competitor data, news feeds, or intelligence files.
+
+1. Identify new product launches, feature updates, or pricing changes from competitors
+2. Summarize key industry trends, regulatory changes, or market shifts
+3. Highlight strategic threats (competitors gaining ground) and opportunities (gaps in market)
+4. Compare against our current positioning where relevant
+
+Provide a structured briefing with sections: Key Developments, Threats, Opportunities, Recommended Actions.`,
+    scheduleType: 'daily',
+    scheduleConfig: { hour: 8, minute: 0 },
+  },
+
+  'knowledge-base': {
+    label: 'Knowledge Base Maintenance',
+    description: 'Audit notes and docs for broken links, orphan files, and organization',
+    name: 'Knowledge Base Maintenance',
+    prompt: `Perform a maintenance audit on the knowledge base / notes in this directory.
+
+1. Find broken internal links (references to files or headings that no longer exist)
+2. Identify orphan files (documents with no inbound links from any other document)
+3. Detect duplicate or near-duplicate content across files
+4. Check for outdated information (files not modified in 90+ days that reference time-sensitive topics)
+5. Suggest tag/folder reorganization for better discoverability
+
+Provide a structured report with sections: Broken Links, Orphan Files, Duplicates, Stale Content, Reorganization Suggestions.`,
+    scheduleType: 'weekly',
+    scheduleConfig: { hour: 20, minute: 0, dayOfWeek: 5 },  // Friday 20:00
+  },
+
+  'daily-summary': {
+    label: '日报/周报生成',
+    description: '根据 git log 自动总结代码变更和工作进展',
+    name: '每日工作总结',
+    prompt: `根据当前工作目录的 git log 生成今日工作总结。
+
+1. 列出今天所有 commit，按功能模块分组
+2. 总结主要完成的功能、修复的 bug、重构的代码
+3. 统计变更的文件数量和代码行数（新增/删除）
+4. 标注仍在进行中的工作（未完成的分支、TODO 等）
+5. 列出明日待办事项建议
+
+输出格式：结构化的日报，包含：今日完成、进行中、明日计划。`,
+    scheduleType: 'daily',
+    scheduleConfig: { hour: 18, minute: 0 },
+  },
+};
+
+export const LOOP_TEMPLATE_KEYS = ['competitive-intel', 'knowledge-base', 'daily-summary'];
+
+/**
+ * Convert scheduleType + scheduleConfig into a cron expression string.
+ * @param {string} scheduleType - 'hourly' | 'daily' | 'weekly' | 'cron'
+ * @param {object} scheduleConfig - { hour?, minute?, dayOfWeek?, cronExpression? }
+ * @returns {string} cron expression
+ */
+export function buildCronExpression(scheduleType, scheduleConfig) {
+  const min = scheduleConfig.minute ?? 0;
+  const hr = scheduleConfig.hour ?? 9;
+  switch (scheduleType) {
+    case 'manual':
+      return '';
+    case 'hourly':
+      return `${min} * * * *`;
+    case 'daily':
+      return `${min} ${hr} * * *`;
+    case 'weekly':
+      return `${min} ${hr} * * ${scheduleConfig.dayOfWeek ?? 1}`;
+    case 'cron':
+      return scheduleConfig.cronExpression || `${min} ${hr} * * *`;
+    default:
+      return `${min} ${hr} * * *`;
+  }
+}
+
+/**
+ * Format a cron expression into a human-readable description.
+ * @param {string} scheduleType - 'hourly' | 'daily' | 'weekly' | 'cron'
+ * @param {object} scheduleConfig - { hour?, minute?, dayOfWeek? }
+ * @param {string} cronExpr - raw cron expression (for 'cron' type)
+ * @returns {string}
+ */
+export function formatSchedule(scheduleType, scheduleConfig, cronExpr) {
+  const pad = n => String(n).padStart(2, '0');
+  const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  switch (scheduleType) {
+    case 'manual':
+      return 'Manual only';
+    case 'hourly':
+      return 'Every hour';
+    case 'daily':
+      return `Every day at ${pad(scheduleConfig.hour ?? 9)}:${pad(scheduleConfig.minute ?? 0)}`;
+    case 'weekly': {
+      const day = DAYS[scheduleConfig.dayOfWeek ?? 1] || 'Monday';
+      return `Every ${day} at ${pad(scheduleConfig.hour ?? 9)}:${pad(scheduleConfig.minute ?? 0)}`;
+    }
+    case 'cron':
+      return cronExpr || 'Custom cron';
+    default:
+      return cronExpr || 'Unknown schedule';
+  }
+}

package/web/modules/team.js

@@ -23,8 +23,8 @@ export function createTeam(deps) {
   /** @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>} 'chat' | 'team' | 'loop' — current view mode */
+  const viewMode = ref('chat');
 
   /** @type {import('vue').Ref<string|null>} Currently viewed agent ID, null = dashboard */
   const activeAgentView = ref(null);
@@ -135,13 +135,13 @@ export function createTeam(deps) {
   }
 
   function backToChat() {
-    teamMode.value = 'chat';
+    viewMode.value = 'chat';
     historicalTeam.value = null;
     activeAgentView.value = null;
   }
 
   function newTeam() {
-    teamMode.value = 'team';
+    viewMode.value = 'team';
     historicalTeam.value = null;
     activeAgentView.value = null;
     // If completed team is still in teamState, clear it so create panel shows
@@ -161,7 +161,7 @@ export function createTeam(deps) {
     switch (msg.type) {
       case 'team_created':
         teamState.value = msg.team;
-        teamMode.value = 'team';
+        viewMode.value = 'team';
         historicalTeam.value = null;
         activeAgentView.value = null;
         agentMessages.value = {};
@@ -266,7 +266,7 @@ export function createTeam(deps) {
 
       case 'team_detail':
         historicalTeam.value = msg.team;
-        teamMode.value = 'team';
+        viewMode.value = 'team';
         activeAgentView.value = null;
         return true;
 
@@ -355,7 +355,7 @@ export function createTeam(deps) {
   function handleActiveTeamRestore(activeTeam) {
     if (!activeTeam) return;
     teamState.value = activeTeam;
-    teamMode.value = 'team';
+    viewMode.value = 'team';
     // Re-initialize agent message lists (messages lost on reconnect)
     if (!agentMessages.value['lead']) {
       agentMessages.value['lead'] = [];
@@ -371,7 +371,7 @@ export function createTeam(deps) {
 
   return {
     // State
-    teamState, teamMode, activeAgentView, historicalTeam, teamsList,
+    teamState, viewMode, activeAgentView, historicalTeam, teamsList,
     agentMessages,
     // Computed
     isTeamActive, isTeamRunning, displayTeam,