@agent-link/server 0.1.157 → 0.1.159

package/web/landing.html

@@ -668,6 +668,60 @@
   .bento-icon.amber { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); color: var(--amber); }
   .bento-icon.blue { background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(96,165,250,0.05)); color: var(--blue); }
 
+  /* Mode toggle visual */
+  .mode-toggle {
+    display: flex;
+    gap: 0;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  .mode-toggle-item {
+    flex: 1;
+    text-align: center;
+    padding: 0.7rem 1rem;
+    position: relative;
+    transition: all 0.3s;
+  }
+
+  .mode-toggle-item:not(:last-child) {
+    border-right: 1px solid var(--border);
+  }
+
+  .mode-toggle-item.active {
+    background: rgba(59,130,246,0.12);
+  }
+
+  .mode-toggle-item .mode-icon {
+    width: 32px; height: 32px;
+    margin: 0 auto 0.4rem;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mode-toggle-item .mode-icon svg { width: 18px; height: 18px; }
+
+  .mode-toggle-item .mode-icon.chat-icon { background: rgba(59,130,246,0.15); color: var(--accent); }
+  .mode-toggle-item .mode-icon.team-icon { background: rgba(96,165,250,0.15); color: var(--blue); }
+  .mode-toggle-item .mode-icon.loop-icon { background: rgba(52,211,153,0.15); color: var(--green); }
+
+  .mode-toggle-item .mode-name {
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-bottom: 0.2rem;
+    color: var(--text);
+  }
+
+  .mode-toggle-item .mode-desc {
+    font-size: 0.68rem;
+    color: var(--text-dim);
+    line-height: 1.4;
+  }
+
   /* Encryption visual */
   .encrypt-visual {
     display: flex;
@@ -1142,33 +1196,35 @@
     <p>Phone, tablet, laptop &mdash; any browser becomes your Claude Code terminal.</p>
   </div>
 
-  <!-- Full Claude Code — wide -->
+  <!-- Chat | Team | Loop — wide -->
   <div class="bento-card wide">
     <div class="bento-visual">
-      <div class="device-flow">
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
-          Terminal
-        </div>
-        <div class="flow-line"></div>
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
-          Files
+      <div class="mode-toggle">
+        <div class="mode-toggle-item active">
+          <div class="mode-icon chat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+          </div>
+          <div class="mode-name">Chat</div>
+          <div class="mode-desc">Interactive coding sessions</div>
         </div>
-        <div class="flow-line"></div>
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-          Search
+        <div class="mode-toggle-item">
+          <div class="mode-icon team-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+          </div>
+          <div class="mode-name">Team</div>
+          <div class="mode-desc">Parallel sub-agents</div>
         </div>
-        <div class="flow-line"></div>
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
-          Chat
+        <div class="mode-toggle-item">
+          <div class="mode-icon loop-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+          </div>
+          <div class="mode-name">Loop</div>
+          <div class="mode-desc">Scheduled cron tasks</div>
         </div>
       </div>
     </div>
-    <h3>Full Claude Code Experience</h3>
-    <p>File editing, shell commands, search, multi-turn conversations &mdash; every capability, now in your browser.</p>
+    <h3>Three Modes, One Interface</h3>
+    <p>Chat with Claude interactively, spawn agent teams for complex tasks, or schedule recurring Loop jobs with cron &mdash; all from the same browser tab.</p>
   </div>
 
   <!-- Self-hostable -->

package/web/landing.zh.html

@@ -669,6 +669,60 @@
   .bento-icon.amber { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); color: var(--amber); }
   .bento-icon.blue { background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(96,165,250,0.05)); color: var(--blue); }
 
+  /* Mode toggle visual */
+  .mode-toggle {
+    display: flex;
+    gap: 0;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  .mode-toggle-item {
+    flex: 1;
+    text-align: center;
+    padding: 0.7rem 1rem;
+    position: relative;
+    transition: all 0.3s;
+  }
+
+  .mode-toggle-item:not(:last-child) {
+    border-right: 1px solid var(--border);
+  }
+
+  .mode-toggle-item.active {
+    background: rgba(59,130,246,0.12);
+  }
+
+  .mode-toggle-item .mode-icon {
+    width: 32px; height: 32px;
+    margin: 0 auto 0.4rem;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mode-toggle-item .mode-icon svg { width: 18px; height: 18px; }
+
+  .mode-toggle-item .mode-icon.chat-icon { background: rgba(59,130,246,0.15); color: var(--accent); }
+  .mode-toggle-item .mode-icon.team-icon { background: rgba(96,165,250,0.15); color: var(--blue); }
+  .mode-toggle-item .mode-icon.loop-icon { background: rgba(52,211,153,0.15); color: var(--green); }
+
+  .mode-toggle-item .mode-name {
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-bottom: 0.2rem;
+    color: var(--text);
+  }
+
+  .mode-toggle-item .mode-desc {
+    font-size: 0.68rem;
+    color: var(--text-dim);
+    line-height: 1.4;
+  }
+
   /* Encryption visual */
   .encrypt-visual {
     display: flex;
@@ -1141,33 +1195,35 @@
     <p>手机、平板、笔记本 &mdash; 有浏览器就行，随时切到你的 Claude。</p>
   </div>
 
-  <!-- Full Claude Code — wide -->
+  <!-- Chat | Team | Loop — wide -->
   <div class="bento-card wide">
     <div class="bento-visual">
-      <div class="device-flow">
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
-          终端
-        </div>
-        <div class="flow-line"></div>
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
-          文件
+      <div class="mode-toggle">
+        <div class="mode-toggle-item active">
+          <div class="mode-icon chat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+          </div>
+          <div class="mode-name">Chat</div>
+          <div class="mode-desc">交互式编程对话</div>
         </div>
-        <div class="flow-line"></div>
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-          搜索
+        <div class="mode-toggle-item">
+          <div class="mode-icon team-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+          </div>
+          <div class="mode-name">Team</div>
+          <div class="mode-desc">并行子 Agent 协作</div>
         </div>
-        <div class="flow-line"></div>
-        <div class="device-pill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
-          对话
+        <div class="mode-toggle-item">
+          <div class="mode-icon loop-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+          </div>
+          <div class="mode-name">Loop</div>
+          <div class="mode-desc">定时 Cron 任务</div>
         </div>
       </div>
     </div>
-    <h3>完整的 Claude Code 体验</h3>
-    <p>文件编辑、Shell 命令、代码搜索、多轮对话 &mdash; 所有能力，现在搬到了浏览器里。</p>
+    <h3>三大模式，一个界面</h3>
+    <p>和 Claude 交互对话、启动 Agent 团队处理复杂任务、或用 Cron 调度定时 Loop 任务 &mdash; 全在同一个浏览器标签页里。</p>
   </div>
 
   <!-- Self-hostable -->

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,
+  };
+}