@agent-link/server 0.1.156 → 0.1.158

package/web/app.js

@@ -20,6 +20,8 @@ import { createFileBrowser } from './modules/fileBrowser.js';
 import { createFilePreview } from './modules/filePreview.js';
 import { createTeam } from './modules/team.js';
 import { TEMPLATES, TEMPLATE_KEYS, buildFullLeadPrompt } from './modules/teamTemplates.js';
+import { createLoop } from './modules/loop.js';
+import { LOOP_TEMPLATES, LOOP_TEMPLATE_KEYS, buildCronExpression, formatSchedule } from './modules/loopTemplates.js';
 import { createScrollManager, createHighlightScheduler, formatUsage } from './modules/appHelpers.js';
 
 // ── App ─────────────────────────────────────────────────────────────────────
@@ -121,7 +123,10 @@ const App = {
     const workdirMenuOpen = ref(false);
     const teamsCollapsed = ref(false);
     const chatsCollapsed = ref(false);
+    const loopsCollapsed = ref(false);
+    const _sidebarCollapseKey = () => hostname.value ? `agentlink-sidebar-collapsed-${hostname.value}` : null;
     const loadingTeams = ref(false);
+    const loadingLoops = ref(false);
 
     // Team creation state
     const teamInstruction = ref('');
@@ -157,6 +162,21 @@ const App = {
     const kanbanExpanded = ref(false);
     const instructionExpanded = ref(false);
 
+    // Loop creation/editing form state
+    const loopName = ref('');
+    const loopPrompt = ref('');
+    const loopScheduleType = ref('daily');
+    const loopScheduleHour = ref(9);
+    const loopScheduleMinute = ref(0);
+    const loopScheduleDayOfWeek = ref(1);
+    const loopCronExpr = ref('0 9 * * *');
+    const loopSelectedTemplate = ref(null);
+    const loopDeleteConfirmOpen = ref(false);
+    const loopDeleteConfirmId = ref(null);
+    const loopDeleteConfirmName = ref('');
+    const renamingLoopId = ref(null);
+    const renameLoopText = ref('');
+
     // File preview state
     const previewPanelOpen = ref(false);
     const previewPanelWidth = ref(parseInt(localStorage.getItem('agentlink-preview-panel-width'), 10) || 400);
@@ -278,7 +298,7 @@ const App = {
       switchConversation,
     });
 
-    const { connect, wsSend, closeWs, submitPassword, setDequeueNext, setFileBrowser, setFilePreview, setTeam, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap } = createConnection({
+    const { connect, wsSend, closeWs, submitPassword, setDequeueNext, setFileBrowser, setFilePreview, setTeam, setLoop, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap } = createConnection({
       status, agentName, hostname, workDir, sessionId, error,
       serverVersion, agentVersion, latency,
       messages, isProcessing, isCompacting, visibleLimit, queuedMessages, usageStats,
@@ -305,8 +325,13 @@ const App = {
       wsSend, scrollToBottom,
     });
     setTeam(team);
+    // Loop module
+    const loop = createLoop({
+      wsSend, scrollToBottom,
+    });
+    setLoop(loop);
     sidebar.setOnSwitchToChat(() => {
-      team.teamMode.value = 'chat';
+      team.viewMode.value = 'chat';
       team.historicalTeam.value = null;
     });
 
@@ -462,9 +487,35 @@ const App = {
 
     watch(hostname, (name) => {
       document.title = name ? `${name} — AgentLink` : 'AgentLink';
+      // Restore sidebar collapsed states from localStorage
+      const key = _sidebarCollapseKey();
+      if (key) {
+        try {
+          const saved = JSON.parse(localStorage.getItem(key) || '{}');
+          if (saved.chats !== undefined) chatsCollapsed.value = saved.chats;
+          if (saved.teams !== undefined) teamsCollapsed.value = saved.teams;
+          if (saved.loops !== undefined) loopsCollapsed.value = saved.loops;
+        } catch (_) { /* ignore */ }
+      }
     });
 
+    // Persist sidebar collapsed states to localStorage
+    const _saveSidebarCollapsed = () => {
+      const key = _sidebarCollapseKey();
+      if (key) {
+        localStorage.setItem(key, JSON.stringify({
+          chats: chatsCollapsed.value,
+          teams: teamsCollapsed.value,
+          loops: loopsCollapsed.value,
+        }));
+      }
+    };
+    watch(chatsCollapsed, _saveSidebarCollapsed);
+    watch(teamsCollapsed, _saveSidebarCollapsed);
+    watch(loopsCollapsed, _saveSidebarCollapsed);
+
     watch(team.teamsList, () => { loadingTeams.value = false; });
+    watch(loop.loopsList, () => { loadingLoops.value = false; });
 
     // ── Lifecycle ──
     onMounted(() => { connect(scheduleHighlight); });
@@ -579,7 +630,7 @@ const App = {
       // File preview
       previewPanelOpen, previewPanelWidth, previewFile, previewLoading, previewMarkdownRendered, filePreview,
       workdirMenuOpen,
-      teamsCollapsed, chatsCollapsed, loadingTeams,
+      teamsCollapsed, chatsCollapsed, loopsCollapsed, loadingTeams, loadingLoops,
       toggleWorkdirMenu() { workdirMenuOpen.value = !workdirMenuOpen.value; },
       workdirMenuBrowse() {
         workdirMenuOpen.value = false;
@@ -597,7 +648,7 @@ const App = {
       // Team mode
       team,
       teamState: team.teamState,
-      teamMode: team.teamMode,
+      viewMode: team.viewMode,
       activeAgentView: team.activeAgentView,
       historicalTeam: team.historicalTeam,
       teamsList: team.teamsList,
@@ -709,6 +760,206 @@ const App = {
         }
         return '';
       },
+      // Loop mode
+      loop,
+      loopsList: loop.loopsList,
+      selectedLoop: loop.selectedLoop,
+      selectedExecution: loop.selectedExecution,
+      executionHistory: loop.executionHistory,
+      executionMessages: loop.executionMessages,
+      runningLoops: loop.runningLoops,
+      loadingExecutions: loop.loadingExecutions,
+      loadingExecution: loop.loadingExecution,
+      editingLoopId: loop.editingLoopId,
+      hasRunningLoop: loop.hasRunningLoop,
+      firstRunningLoop: loop.firstRunningLoop,
+      loopError: loop.loopError,
+      hasMoreExecutions: loop.hasMoreExecutions,
+      loadingMoreExecutions: loop.loadingMoreExecutions,
+      toggleLoop: loop.toggleLoop,
+      runNow: loop.runNow,
+      cancelLoopExecution: loop.cancelExecution,
+      viewLoopDetail: loop.viewLoopDetail,
+      viewExecution: loop.viewExecution,
+      backToLoopsList: loop.backToLoopsList,
+      backToLoopDetail: loop.backToLoopDetail,
+      LOOP_TEMPLATES, LOOP_TEMPLATE_KEYS,
+      buildCronExpression, formatSchedule,
+      // Loop form state
+      loopName, loopPrompt, loopScheduleType,
+      loopScheduleHour, loopScheduleMinute, loopScheduleDayOfWeek,
+      loopCronExpr, loopSelectedTemplate,
+      loopDeleteConfirmOpen, loopDeleteConfirmId, loopDeleteConfirmName,
+      renamingLoopId, renameLoopText,
+      startLoopRename(l) {
+        renamingLoopId.value = l.id;
+        renameLoopText.value = l.name || '';
+      },
+      confirmLoopRename() {
+        const lid = renamingLoopId.value;
+        const name = renameLoopText.value.trim();
+        if (!lid || !name) { renamingLoopId.value = null; renameLoopText.value = ''; return; }
+        loop.updateExistingLoop(lid, { name });
+        renamingLoopId.value = null;
+        renameLoopText.value = '';
+      },
+      cancelLoopRename() {
+        renamingLoopId.value = null;
+        renameLoopText.value = '';
+      },
+      requestLoopsList() {
+        loadingLoops.value = true;
+        loop.requestLoopsList();
+      },
+      newLoop() {
+        loop.backToLoopsList();
+        loop.editingLoopId.value = null;
+        loopSelectedTemplate.value = null;
+        loopName.value = '';
+        loopPrompt.value = '';
+        loopScheduleType.value = 'daily';
+        loopScheduleHour.value = 9;
+        loopScheduleMinute.value = 0;
+        loopScheduleDayOfWeek.value = 1;
+        loopCronExpr.value = '0 9 * * *';
+        team.viewMode.value = 'loop';
+      },
+      viewLoop(loopId) {
+        loop.viewLoopDetail(loopId);
+        team.viewMode.value = 'loop';
+      },
+      selectLoopTemplate(key) {
+        loopSelectedTemplate.value = key;
+        const tpl = LOOP_TEMPLATES[key];
+        if (!tpl) return;
+        loopName.value = tpl.name || '';
+        loopPrompt.value = tpl.prompt || '';
+        loopScheduleType.value = tpl.scheduleType || 'daily';
+        const cfg = tpl.scheduleConfig || {};
+        loopScheduleHour.value = cfg.hour ?? 9;
+        loopScheduleMinute.value = cfg.minute ?? 0;
+        loopScheduleDayOfWeek.value = cfg.dayOfWeek ?? 1;
+        loopCronExpr.value = buildCronExpression(tpl.scheduleType || 'daily', cfg);
+      },
+      resetLoopForm() {
+        loopSelectedTemplate.value = null;
+        loopName.value = '';
+        loopPrompt.value = '';
+        loopScheduleType.value = 'daily';
+        loopScheduleHour.value = 9;
+        loopScheduleMinute.value = 0;
+        loopScheduleDayOfWeek.value = 1;
+        loopCronExpr.value = '0 9 * * *';
+        loop.editingLoopId.value = null;
+      },
+      createLoopFromPanel() {
+        const name = loopName.value.trim();
+        const prompt = loopPrompt.value.trim();
+        if (!name || !prompt) return;
+        loop.clearLoopError();
+        const schedCfg = { hour: loopScheduleHour.value, minute: loopScheduleMinute.value };
+        if (loopScheduleType.value === 'weekly') schedCfg.dayOfWeek = loopScheduleDayOfWeek.value;
+        if (loopScheduleType.value === 'cron') schedCfg.cronExpression = loopCronExpr.value;
+        const schedule = loopScheduleType.value === 'manual' ? ''
+          : loopScheduleType.value === 'cron' ? loopCronExpr.value
+          : buildCronExpression(loopScheduleType.value, schedCfg);
+        loop.createNewLoop({ name, prompt, schedule, scheduleType: loopScheduleType.value, scheduleConfig: schedCfg });
+        // Reset form
+        loopSelectedTemplate.value = null;
+        loopName.value = '';
+        loopPrompt.value = '';
+        loopScheduleType.value = 'daily';
+        loopScheduleHour.value = 9;
+        loopScheduleMinute.value = 0;
+        loopScheduleDayOfWeek.value = 1;
+        loopCronExpr.value = '0 9 * * *';
+      },
+      startEditingLoop(l) {
+        loop.editingLoopId.value = l.id;
+        loopName.value = l.name || '';
+        loopPrompt.value = l.prompt || '';
+        loopScheduleType.value = l.scheduleType || 'daily';
+        const cfg = l.scheduleConfig || {};
+        loopScheduleHour.value = cfg.hour ?? 9;
+        loopScheduleMinute.value = cfg.minute ?? 0;
+        loopScheduleDayOfWeek.value = cfg.dayOfWeek ?? 1;
+        loopCronExpr.value = l.schedule || buildCronExpression(l.scheduleType || 'daily', cfg);
+      },
+      saveLoopEdits() {
+        const lid = loop.editingLoopId.value;
+        if (!lid) return;
+        const name = loopName.value.trim();
+        const prompt = loopPrompt.value.trim();
+        if (!name || !prompt) return;
+        loop.clearLoopError();
+        const schedCfg = { hour: loopScheduleHour.value, minute: loopScheduleMinute.value };
+        if (loopScheduleType.value === 'weekly') schedCfg.dayOfWeek = loopScheduleDayOfWeek.value;
+        if (loopScheduleType.value === 'cron') schedCfg.cronExpression = loopCronExpr.value;
+        const schedule = loopScheduleType.value === 'manual' ? ''
+          : loopScheduleType.value === 'cron' ? loopCronExpr.value
+          : buildCronExpression(loopScheduleType.value, schedCfg);
+        loop.updateExistingLoop(lid, { name, prompt, schedule, scheduleType: loopScheduleType.value, scheduleConfig: schedCfg });
+        loop.editingLoopId.value = null;
+        loopName.value = '';
+        loopPrompt.value = '';
+      },
+      cancelEditingLoop() {
+        loop.editingLoopId.value = null;
+        loopName.value = '';
+        loopPrompt.value = '';
+        loopScheduleType.value = 'daily';
+        loopScheduleHour.value = 9;
+        loopScheduleMinute.value = 0;
+      },
+      requestDeleteLoop(l) {
+        loopDeleteConfirmId.value = l.id;
+        loopDeleteConfirmName.value = l.name || l.id.slice(0, 8);
+        loopDeleteConfirmOpen.value = true;
+      },
+      confirmDeleteLoop() {
+        if (!loopDeleteConfirmId.value) return;
+        loop.deleteExistingLoop(loopDeleteConfirmId.value);
+        loopDeleteConfirmOpen.value = false;
+        loopDeleteConfirmId.value = null;
+      },
+      cancelDeleteLoop() {
+        loopDeleteConfirmOpen.value = false;
+        loopDeleteConfirmId.value = null;
+      },
+      loadMoreExecutions() {
+        loop.loadMoreExecutions();
+      },
+      clearLoopError() {
+        loop.clearLoopError();
+      },
+      loopScheduleDisplay(l) {
+        return formatSchedule(l.scheduleType, l.scheduleConfig || {}, l.schedule);
+      },
+      loopLastRunDisplay(l) {
+        if (!l.lastExecution) return '';
+        const exec = l.lastExecution;
+        const ago = formatRelativeTime(exec.startedAt);
+        const icon = exec.status === 'success' ? 'OK' : exec.status === 'error' ? 'ERR' : exec.status;
+        return ago + ' ' + icon;
+      },
+      formatExecTime(ts) {
+        if (!ts) return '';
+        const d = new Date(ts);
+        return d.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ', ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+      },
+      formatDuration(ms) {
+        if (!ms && ms !== 0) return '';
+        const secs = Math.floor(ms / 1000);
+        const m = Math.floor(secs / 60);
+        const s = secs % 60;
+        return m + 'm ' + String(s).padStart(2, '0') + 's';
+      },
+      isLoopRunning(loopId) {
+        return !!loop.runningLoops.value[loopId];
+      },
+      padTwo(n) {
+        return String(n).padStart(2, '0');
+      },
     };
   },
   template: `
@@ -725,9 +976,15 @@ const App = {
           <span v-if="latency !== null && status === 'Connected'" class="latency" :class="{ good: latency < 100, ok: latency >= 100 && latency < 500, bad: latency >= 500 }">{{ latency }}ms</span>
           <span v-if="agentName" class="agent-label">{{ agentName }}</span>
           <div class="team-mode-toggle">
-            <button :class="['team-mode-btn', { active: teamMode === 'chat' }]" @click="teamMode = 'chat'">Chat</button>
-            <button :class="['team-mode-btn', { active: teamMode === 'team' }]" @click="teamMode = 'team'">Team</button>
+            <button :class="['team-mode-btn', { active: viewMode === 'chat' }]" @click="viewMode = 'chat'">Chat</button>
+            <button :class="['team-mode-btn', { active: viewMode === 'team' }]" @click="viewMode = 'team'">Team</button>
+            <button :class="['team-mode-btn', { active: viewMode === 'loop' }]" @click="viewMode = 'loop'">Loop</button>
           </div>
+          <select class="team-mode-select" :value="viewMode" @change="viewMode = $event.target.value">
+            <option value="chat">Chat</option>
+            <option value="team">Team</option>
+            <option value="loop">Loop</option>
+          </select>
           <button class="theme-toggle" @click="toggleTheme" :title="theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'">
             <svg v-if="theme === 'dark'" viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>
             <svg v-else viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/></svg>
@@ -887,8 +1144,86 @@ const App = {
             </div>
           </div>
 
+          <!-- Chat History section -->
+          <div class="sidebar-section sidebar-sessions" :style="{ flex: chatsCollapsed ? '0 0 auto' : '1 1 0', minHeight: chatsCollapsed ? 'auto' : '0' }">
+            <div class="sidebar-section-header" @click="chatsCollapsed = !chatsCollapsed" style="cursor: pointer;">
+              <span>Chat History</span>
+              <span class="sidebar-section-header-actions">
+                <button class="sidebar-refresh-btn" @click.stop="requestSessionList" title="Refresh" :disabled="loadingSessions">
+                  <svg :class="{ spinning: loadingSessions }" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+                </button>
+                <button class="sidebar-collapse-btn" :title="chatsCollapsed ? 'Expand' : 'Collapse'">
+                  <svg :class="{ collapsed: chatsCollapsed }" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>
+                </button>
+              </span>
+            </div>
+
+            <div v-show="!chatsCollapsed" class="sidebar-section-collapsible">
+            <button class="new-conversation-btn" @click="newConversation">
+              <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+              New conversation
+            </button>
+
+            <div v-if="loadingSessions && historySessions.length === 0" class="sidebar-loading">
+              Loading sessions...
+            </div>
+            <div v-else-if="historySessions.length === 0" class="sidebar-empty">
+              No previous sessions found.
+            </div>
+            <div v-else class="session-list">
+              <div v-for="group in groupedSessions" :key="group.label" class="session-group">
+                <div class="session-group-label">{{ group.label }}</div>
+                <div
+                  v-for="s in group.sessions" :key="s.sessionId"
+                  :class="['session-item', { active: currentClaudeSessionId === s.sessionId, processing: isSessionProcessing(s.sessionId) }]"
+                  @click="renamingSessionId !== s.sessionId && resumeSession(s)"
+                  :title="s.preview"
+                  :aria-label="(s.title || s.sessionId.slice(0, 8)) + (isSessionProcessing(s.sessionId) ? ' (processing)' : '')"
+                >
+                  <div v-if="renamingSessionId === s.sessionId" class="session-rename-row">
+                    <input
+                      class="session-rename-input"
+                      v-model="renameText"
+                      @click.stop
+                      @keydown.enter.stop="confirmRename"
+                      @keydown.escape.stop="cancelRename"
+                      @vue:mounted="$event.el.focus()"
+                    />
+                    <button class="session-rename-ok" @click.stop="confirmRename" title="Confirm">&#10003;</button>
+                    <button class="session-rename-cancel" @click.stop="cancelRename" title="Cancel">&times;</button>
+                  </div>
+                  <div v-else class="session-title">
+                    <svg v-if="s.title && s.title.startsWith('You are a team lead')" class="session-team-icon" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
+                    {{ s.title }}
+                  </div>
+                  <div class="session-meta">
+                    <span>{{ formatRelativeTime(s.lastModified) }}</span>
+                    <span v-if="renamingSessionId !== s.sessionId" class="session-actions">
+                      <button
+                        class="session-rename-btn"
+                        @click.stop="startRename(s)"
+                        title="Rename session"
+                      >
+                        <svg viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+                      </button>
+                      <button
+                        v-if="currentClaudeSessionId !== s.sessionId"
+                        class="session-delete-btn"
+                        @click.stop="deleteSession(s)"
+                        title="Delete session"
+                      >
+                        <svg viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+                      </button>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            </div>
+          </div>
+
           <!-- Teams section -->
-          <div class="sidebar-section sidebar-teams">
+          <div class="sidebar-section sidebar-teams" :style="{ flex: teamsCollapsed ? '0 0 auto' : '1 1 0', minHeight: teamsCollapsed ? 'auto' : '0' }">
             <div class="sidebar-section-header" @click="teamsCollapsed = !teamsCollapsed" style="cursor: pointer;">
               <span>Teams History</span>
               <span class="sidebar-section-header-actions">
@@ -947,73 +1282,58 @@ const App = {
             </div>
           </div>
 
-          <div class="sidebar-section sidebar-sessions">
-            <div class="sidebar-section-header" @click="chatsCollapsed = !chatsCollapsed" style="cursor: pointer;">
-              <span>Chat History</span>
+          <!-- Loops section -->
+          <div class="sidebar-section sidebar-loops" :style="{ flex: loopsCollapsed ? '0 0 auto' : '1 1 0', minHeight: loopsCollapsed ? 'auto' : '0' }">
+            <div class="sidebar-section-header" @click="loopsCollapsed = !loopsCollapsed" style="cursor: pointer;">
+              <span>Loops</span>
               <span class="sidebar-section-header-actions">
-                <button class="sidebar-refresh-btn" @click.stop="requestSessionList" title="Refresh" :disabled="loadingSessions">
-                  <svg :class="{ spinning: loadingSessions }" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+                <button class="sidebar-refresh-btn" @click.stop="requestLoopsList" title="Refresh" :disabled="loadingLoops">
+                  <svg :class="{ spinning: loadingLoops }" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
                 </button>
-                <button class="sidebar-collapse-btn" :title="chatsCollapsed ? 'Expand' : 'Collapse'">
-                  <svg :class="{ collapsed: chatsCollapsed }" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>
+                <button class="sidebar-collapse-btn" :title="loopsCollapsed ? 'Expand' : 'Collapse'">
+                  <svg :class="{ collapsed: loopsCollapsed }" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>
                 </button>
               </span>
             </div>
 
-            <div v-show="!chatsCollapsed" class="sidebar-section-collapsible">
-            <button class="new-conversation-btn" @click="newConversation">
+            <div v-show="!loopsCollapsed" class="sidebar-section-collapsible">
+            <button class="new-conversation-btn" @click="newLoop">
               <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-              New conversation
+              New loop
             </button>
 
-            <div v-if="loadingSessions && historySessions.length === 0" class="sidebar-loading">
-              Loading sessions...
+            <div v-if="loopsList.length === 0 && !loadingLoops" class="sidebar-empty">
+              No loops configured.
             </div>
-            <div v-else-if="historySessions.length === 0" class="sidebar-empty">
-              No previous sessions found.
-            </div>
-            <div v-else class="session-list">
-              <div v-for="group in groupedSessions" :key="group.label" class="session-group">
-                <div class="session-group-label">{{ group.label }}</div>
-                <div
-                  v-for="s in group.sessions" :key="s.sessionId"
-                  :class="['session-item', { active: currentClaudeSessionId === s.sessionId, processing: isSessionProcessing(s.sessionId) }]"
-                  @click="renamingSessionId !== s.sessionId && resumeSession(s)"
-                  :title="s.preview"
-                  :aria-label="(s.title || s.sessionId.slice(0, 8)) + (isSessionProcessing(s.sessionId) ? ' (processing)' : '')"
-                >
-                  <div v-if="renamingSessionId === s.sessionId" class="session-rename-row">
+            <div v-else class="loop-history-list">
+              <div
+                v-for="l in loopsList" :key="l.id"
+                :class="['team-history-item', { active: selectedLoop?.id === l.id }]"
+                @click="renamingLoopId !== l.id && viewLoop(l.id)"
+                :title="l.name"
+              >
+                <div class="team-history-info">
+                  <div v-if="renamingLoopId === l.id" class="session-rename-row">
                     <input
                       class="session-rename-input"
-                      v-model="renameText"
+                      v-model="renameLoopText"
                       @click.stop
-                      @keydown.enter.stop="confirmRename"
-                      @keydown.escape.stop="cancelRename"
+                      @keydown.enter.stop="confirmLoopRename"
+                      @keydown.escape.stop="cancelLoopRename"
                       @vue:mounted="$event.el.focus()"
                     />
-                    <button class="session-rename-ok" @click.stop="confirmRename" title="Confirm">&#10003;</button>
-                    <button class="session-rename-cancel" @click.stop="cancelRename" title="Cancel">&times;</button>
-                  </div>
-                  <div v-else class="session-title">
-                    <svg v-if="s.title && s.title.startsWith('You are a team lead')" class="session-team-icon" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
-                    {{ s.title }}
+                    <button class="session-rename-ok" @click.stop="confirmLoopRename" title="Confirm">&#10003;</button>
+                    <button class="session-rename-cancel" @click.stop="cancelLoopRename" title="Cancel">&times;</button>
                   </div>
-                  <div class="session-meta">
-                    <span>{{ formatRelativeTime(s.lastModified) }}</span>
-                    <span v-if="renamingSessionId !== s.sessionId" class="session-actions">
-                      <button
-                        class="session-rename-btn"
-                        @click.stop="startRename(s)"
-                        title="Rename session"
-                      >
+                  <div v-else class="team-history-title">{{ l.name || 'Untitled loop' }}</div>
+                  <div v-if="renamingLoopId !== l.id" class="team-history-meta">
+                    <span :class="['team-status-badge', 'team-status-badge-sm', l.enabled ? 'team-status-running' : 'team-status-completed']">{{ l.enabled ? 'active' : 'paused' }}</span>
+                    <span v-if="l.scheduleType" class="team-history-tasks">{{ formatSchedule(l.scheduleType, l.scheduleConfig || {}, l.schedule) }}</span>
+                    <span class="session-actions">
+                      <button class="session-rename-btn" @click.stop="startLoopRename(l)" title="Rename loop">
                         <svg viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
                       </button>
-                      <button
-                        v-if="currentClaudeSessionId !== s.sessionId"
-                        class="session-delete-btn"
-                        @click.stop="deleteSession(s)"
-                        title="Delete session"
-                      >
+                      <button class="session-delete-btn" @click.stop="requestDeleteLoop(l)" title="Delete loop">
                         <svg viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
                       </button>
                     </span>
@@ -1079,7 +1399,7 @@ const App = {
         <div class="chat-area">
 
           <!-- ══ Team Dashboard ══ -->
-          <template v-if="teamMode === 'team'">
+          <template v-if="viewMode === 'team'">
 
             <!-- Team creation panel (no active team) -->
             <div v-if="!displayTeam" class="team-create-panel">
@@ -1425,8 +1745,284 @@ const App = {
             </div>
           </template>
 
+          <!-- ══ Loop Dashboard ══ -->
+          <template v-else-if="viewMode === 'loop'">
+
+            <!-- ── Execution detail view ── -->
+            <div v-if="selectedLoop && selectedExecution" class="team-create-panel">
+              <div class="team-create-inner">
+                <div class="loop-detail-header">
+                  <button class="team-agent-back-btn" @click="backToLoopDetail()">
+                    <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                    {{ selectedLoop.name }}
+                  </button>
+                </div>
+
+                <div v-if="loadingExecution" class="loop-loading">
+                  <div class="history-loading-spinner"></div>
+                  <span>Loading execution...</span>
+                </div>
+
+                <div v-else class="loop-exec-messages">
+                  <div v-if="executionMessages.length === 0" class="team-agent-empty-msg">No messages recorded for this execution.</div>
+                  <template v-for="(msg, mi) in executionMessages" :key="msg.id">
+                    <div v-if="msg.role === 'user' && msg.content" class="team-agent-prompt">
+                      <div class="team-agent-prompt-label">Loop Prompt</div>
+                      <div class="team-agent-prompt-body markdown-body" v-html="getRenderedContent(msg)"></div>
+                    </div>
+                    <div v-else-if="msg.role === 'assistant'" :class="['message', 'message-assistant']">
+                      <div :class="['message-bubble', 'assistant-bubble', { streaming: msg.isStreaming }]">
+                        <div class="message-content markdown-body" v-html="getRenderedContent(msg)"></div>
+                      </div>
+                    </div>
+                    <div v-else-if="msg.role === 'tool'" class="tool-line-wrapper">
+                      <div :class="['tool-line', { completed: msg.hasResult, running: !msg.hasResult }]" @click="toggleTool(msg)">
+                        <span class="tool-icon" v-html="getToolIcon(msg.toolName)"></span>
+                        <span class="tool-name">{{ msg.toolName }}</span>
+                        <span class="tool-summary">{{ getToolSummary(msg) }}</span>
+                        <span class="tool-status-icon" v-if="msg.hasResult">\u{2713}</span>
+                        <span class="tool-status-icon running-dots" v-else>
+                          <span></span><span></span><span></span>
+                        </span>
+                        <span class="tool-toggle">{{ msg.expanded ? '\u{25B2}' : '\u{25BC}' }}</span>
+                      </div>
+                      <div v-show="msg.expanded" class="tool-expand">
+                        <div v-if="isEditTool(msg) && getEditDiffHtml(msg)" class="tool-diff" v-html="getEditDiffHtml(msg)"></div>
+                        <div v-else-if="getFormattedToolInput(msg)" class="tool-input-formatted" v-html="getFormattedToolInput(msg)"></div>
+                        <pre v-else-if="msg.toolInput" class="tool-block">{{ msg.toolInput }}</pre>
+                        <pre v-if="msg.toolOutput" class="tool-block tool-output">{{ msg.toolOutput }}</pre>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+
+            <!-- ── Loop detail view (execution history) ── -->
+            <div v-else-if="selectedLoop" class="team-create-panel">
+              <div class="team-create-inner">
+                <div class="loop-detail-header">
+                  <button class="team-agent-back-btn" @click="backToLoopsList()">
+                    <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                    Back to Loops
+                  </button>
+                </div>
+                <div class="loop-detail-info">
+                  <h2 class="loop-detail-name">{{ selectedLoop.name }}</h2>
+                  <div class="loop-detail-meta">
+                    <span class="loop-detail-schedule">{{ loopScheduleDisplay(selectedLoop) }}</span>
+                    <span :class="['loop-status-badge', selectedLoop.enabled ? 'loop-status-enabled' : 'loop-status-disabled']">{{ selectedLoop.enabled ? 'Enabled' : 'Disabled' }}</span>
+                  </div>
+                  <div class="loop-detail-actions">
+                    <button class="loop-action-btn" @click="startEditingLoop(selectedLoop); selectedLoop = null">Edit</button>
+                    <button class="loop-action-btn loop-action-run" @click="runNow(selectedLoop.id)" :disabled="isLoopRunning(selectedLoop.id)">Run Now</button>
+                    <button class="loop-action-btn" @click="toggleLoop(selectedLoop.id)">{{ selectedLoop.enabled ? 'Disable' : 'Enable' }}</button>
+                  </div>
+                </div>
+
+                <div class="loop-detail-prompt-section">
+                  <div class="loop-detail-prompt-label">Prompt</div>
+                  <div class="loop-detail-prompt-text">{{ selectedLoop.prompt }}</div>
+                </div>
+
+                <div class="loop-exec-history-section">
+                  <div class="loop-exec-history-header">Execution History</div>
+                  <div v-if="loadingExecutions" class="loop-loading">
+                    <div class="history-loading-spinner"></div>
+                    <span>Loading executions...</span>
+                  </div>
+                  <div v-else-if="executionHistory.length === 0" class="loop-exec-empty">No executions yet.</div>
+                  <div v-else class="loop-exec-list">
+                    <div v-for="exec in executionHistory" :key="exec.id" class="loop-exec-item">
+                      <div class="loop-exec-item-left">
+                        <span :class="['loop-exec-status-icon', 'loop-exec-status-' + exec.status]">
+                          <template v-if="exec.status === 'running'">\u{21BB}</template>
+                          <template v-else-if="exec.status === 'success'">\u{2713}</template>
+                          <template v-else-if="exec.status === 'error'">\u{2717}</template>
+                          <template v-else-if="exec.status === 'cancelled'">\u{25CB}</template>
+                          <template v-else>?</template>
+                        </span>
+                        <span class="loop-exec-time">{{ formatExecTime(exec.startedAt) }}</span>
+                        <span v-if="exec.status === 'running'" class="loop-exec-running-label">Running...</span>
+                        <span v-else-if="exec.durationMs" class="loop-exec-duration">{{ formatDuration(exec.durationMs) }}</span>
+                        <span v-if="exec.error" class="loop-exec-error-text" :title="exec.error">{{ exec.error.length > 40 ? exec.error.slice(0, 40) + '...' : exec.error }}</span>
+                        <span v-if="exec.trigger === 'manual'" class="loop-exec-trigger-badge">manual</span>
+                      </div>
+                      <div class="loop-exec-item-right">
+                        <button v-if="exec.status === 'running'" class="loop-action-btn" @click="viewExecution(selectedLoop.id, exec.id)">View</button>
+                        <button v-if="exec.status === 'running'" class="loop-action-btn loop-action-cancel" @click="cancelLoopExecution(selectedLoop.id)">Cancel</button>
+                        <button v-if="exec.status !== 'running'" class="loop-action-btn" @click="viewExecution(selectedLoop.id, exec.id)">View</button>
+                      </div>
+                    </div>
+                    <!-- Load more executions -->
+                    <div v-if="hasMoreExecutions && !loadingExecutions" class="loop-load-more">
+                      <button class="loop-action-btn" :disabled="loadingMoreExecutions" @click="loadMoreExecutions()">
+                        {{ loadingMoreExecutions ? 'Loading...' : 'Load more' }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- ── Loop creation panel (default) ── -->
+            <div v-else class="team-create-panel">
+              <div class="team-create-inner">
+                <div class="team-create-header">
+                  <svg viewBox="0 0 24 24" width="28" height="28"><path fill="currentColor" opacity="0.5" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
+                  <h2>{{ editingLoopId ? 'Edit Loop' : 'Create a Scheduled Loop' }}</h2>
+                </div>
+                <p class="team-create-desc">Configure recurring tasks that run on a schedule. Select a template or create your own.</p>
+
+                <!-- Template cards -->
+                <div v-if="!editingLoopId" class="team-examples-section" style="margin-top: 0;">
+                  <div class="team-examples-header">Templates</div>
+                  <div class="team-examples-list">
+                    <div v-for="key in LOOP_TEMPLATE_KEYS" :key="key"
+                         :class="['team-example-card', { 'loop-template-selected': loopSelectedTemplate === key }]"
+                    >
+                      <div class="team-example-icon">
+                        <svg v-if="key === 'competitive-intel'" viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/></svg>
+                        <svg v-else-if="key === 'knowledge-base'" viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
+                        <svg v-else viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>
+                      </div>
+                      <div class="team-example-body">
+                        <div class="team-example-title">{{ LOOP_TEMPLATES[key].label }}</div>
+                        <div class="team-example-text">{{ LOOP_TEMPLATES[key].description }}</div>
+                      </div>
+                      <button class="team-example-try" @click="selectLoopTemplate(key)">Try it</button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Name field -->
+                <div class="team-tpl-section">
+                  <label class="team-tpl-label">Name</label>
+                  <input
+                    v-model="loopName"
+                    type="text"
+                    class="loop-name-input"
+                    placeholder="e.g. Daily Code Review"
+                  />
+                </div>
+
+                <!-- Prompt field -->
+                <div class="team-tpl-section">
+                  <label class="team-tpl-label">Prompt</label>
+                  <textarea
+                    v-model="loopPrompt"
+                    class="team-create-textarea"
+                    placeholder="Describe what the Loop should do each time it runs..."
+                    rows="5"
+                  ></textarea>
+                </div>
+
+                <!-- Schedule selector -->
+                <div class="team-tpl-section">
+                  <label class="team-tpl-label">Schedule</label>
+                  <div class="loop-schedule-options">
+                    <label class="loop-schedule-radio">
+                      <input type="radio" v-model="loopScheduleType" value="manual" />
+                      <span>Manual</span>
+                      <span v-if="loopScheduleType === 'manual'" class="loop-schedule-detail" style="opacity:0.6">run only when triggered</span>
+                    </label>
+                    <label class="loop-schedule-radio">
+                      <input type="radio" v-model="loopScheduleType" value="hourly" />
+                      <span>Every hour</span>
+                      <span v-if="loopScheduleType === 'hourly'" class="loop-schedule-detail">at minute {{ padTwo(loopScheduleMinute) }}</span>
+                    </label>
+                    <label class="loop-schedule-radio">
+                      <input type="radio" v-model="loopScheduleType" value="daily" />
+                      <span>Every day</span>
+                      <span v-if="loopScheduleType === 'daily'" class="loop-schedule-detail">
+                        at
+                        <input type="number" v-model.number="loopScheduleHour" min="0" max="23" class="loop-time-input" />
+                        :
+                        <input type="number" v-model.number="loopScheduleMinute" min="0" max="59" class="loop-time-input" />
+                      </span>
+                    </label>
+                    <label class="loop-schedule-radio">
+                      <input type="radio" v-model="loopScheduleType" value="cron" />
+                      <span>Advanced (cron)</span>
+                      <span v-if="loopScheduleType === 'cron'" class="loop-schedule-detail">
+                        <input type="text" v-model="loopCronExpr" class="loop-cron-input" placeholder="0 9 * * *" />
+                      </span>
+                    </label>
+                  </div>
+                </div>
+
+                <!-- Action buttons -->
+                <div class="team-create-actions">
+                  <button v-if="editingLoopId" class="team-create-launch" :disabled="!loopName.trim() || !loopPrompt.trim()" @click="saveLoopEdits()">
+                    Save Changes
+                  </button>
+                  <button v-else class="team-create-launch" :disabled="!loopName.trim() || !loopPrompt.trim()" @click="createLoopFromPanel()">
+                    <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
+                    Create Loop
+                  </button>
+                  <button v-if="editingLoopId" class="team-create-cancel" @click="cancelEditingLoop()">Cancel</button>
+                  <button class="team-create-cancel" @click="backToChat()">Back to Chat</button>
+                </div>
+
+                <!-- Error message -->
+                <div v-if="loopError" class="loop-error-banner" @click="clearLoopError()">
+                  <span class="loop-error-icon">\u{26A0}</span>
+                  <span class="loop-error-text">{{ loopError }}</span>
+                  <span class="loop-error-dismiss">\u{2715}</span>
+                </div>
+
+                <!-- Active Loops list -->
+                <div v-if="loopsList.length > 0" class="loop-active-section">
+                  <div class="loop-active-header">Active Loops</div>
+                  <div class="loop-active-list">
+                    <div v-for="l in loopsList" :key="l.id" class="loop-active-item">
+                      <div class="loop-active-item-info" @click="viewLoop(l.id)">
+                        <div class="loop-active-item-top">
+                          <span class="loop-active-item-name">{{ l.name }}</span>
+                          <span :class="['loop-status-dot', l.enabled ? 'loop-status-dot-on' : 'loop-status-dot-off']"></span>
+                        </div>
+                        <div class="loop-active-item-meta">
+                          <span class="loop-active-item-schedule">{{ loopScheduleDisplay(l) }}</span>
+                          <span v-if="l.lastExecution" class="loop-active-item-last">
+                            Last: {{ loopLastRunDisplay(l) }}
+                          </span>
+                          <span v-if="isLoopRunning(l.id)" class="loop-exec-running-label">Running...</span>
+                        </div>
+                      </div>
+                      <div class="loop-active-item-actions">
+                        <button class="loop-action-btn loop-action-sm" @click="startEditingLoop(l)" title="Edit">Edit</button>
+                        <button class="loop-action-btn loop-action-sm loop-action-run" @click="runNow(l.id)" :disabled="isLoopRunning(l.id)" title="Run now">Run</button>
+                        <button class="loop-action-btn loop-action-sm" @click="toggleLoop(l.id)" :title="l.enabled ? 'Disable' : 'Enable'">{{ l.enabled ? 'Pause' : 'Resume' }}</button>
+                        <button v-if="!l.enabled" class="loop-action-btn loop-action-sm loop-action-delete" @click="requestDeleteLoop(l)" title="Delete">Del</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Running Loop notification banner -->
+            <div v-if="hasRunningLoop && !selectedLoop" class="loop-running-banner">
+              <span class="loop-running-banner-dot"></span>
+              <span>{{ firstRunningLoop.name }} is running...</span>
+              <button class="loop-action-btn loop-action-sm" @click="viewLoop(firstRunningLoop.loopId)">View</button>
+            </div>
+
+            <!-- Loop delete confirm dialog -->
+            <div v-if="loopDeleteConfirmOpen" class="modal-overlay" @click.self="cancelDeleteLoop()">
+              <div class="modal-dialog">
+                <div class="modal-title">Delete Loop</div>
+                <div class="modal-body">Are you sure you want to delete <strong>{{ loopDeleteConfirmName }}</strong>? This cannot be undone.</div>
+                <div class="modal-actions">
+                  <button class="modal-confirm-btn" @click="confirmDeleteLoop()">Delete</button>
+                  <button class="modal-cancel-btn" @click="cancelDeleteLoop()">Cancel</button>
+                </div>
+              </div>
+            </div>
+          </template>
+
           <!-- ══ Normal Chat ══ -->
-          <template v-else>
+          <template v-else-if="viewMode === 'chat'">
           <div class="message-list" @scroll="onMessageListScroll">
             <div class="message-list-inner">
               <div v-if="messages.length === 0 && status === 'Connected' && !loadingHistory" class="empty-state">
@@ -1598,7 +2194,7 @@ const App = {
           </template>
 
           <!-- Input area (shown in both chat and team create mode) -->
-          <div class="input-area" v-if="teamMode !== 'team'">
+          <div class="input-area" v-if="viewMode === 'chat'">
             <input
               type="file"
               ref="fileInputRef"