@runcore-sh/runcore 0.5.6 → 0.5.7

package/public/index.html

@@ -1646,6 +1646,33 @@
 
   /* Agent card wrapper — sits in chat flow like a message */
   /* Agent block — inline in assistant message, Claude Code style */
+  /* --- Tool call indicators --- */
+  .tool-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    margin: 4px 0;
+    font-size: 12px;
+    color: var(--text-dim);
+    background: rgba(109,93,252,0.08);
+    border-radius: 6px;
+    font-family: var(--mono);
+  }
+  .tool-indicator strong { color: var(--accent); font-weight: 500; }
+  .tool-indicator.tool-done { color: var(--green); background: rgba(34,197,94,0.08); }
+  .tool-indicator.tool-error { color: #e57373; background: rgba(229,115,115,0.08); }
+  .tool-spinner {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border: 2px solid rgba(109,93,252,0.3);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: tool-spin 0.6s linear infinite;
+  }
+  @keyframes tool-spin { to { transform: rotate(360deg); } }
+
   .agent-block {
     margin: 8px 0;
     border: 1px solid rgba(168,85,247,0.15);
@@ -2675,10 +2702,12 @@
     <a href="/" style="color:inherit;text-decoration:none;font-weight:600;" id="agent-name-header">Core</a>
     <nav class="header-nav" id="header-nav">
       <a href="/" class="active">Chat</a>
+      <a href="/whiteboard">Whiteboard</a>
     </nav>
     <button class="thread-toggle-btn" id="thread-toggle-btn" title="Toggle chats">&#9776;</button>
     <span class="thread-current-label" id="thread-current-label" title="Click to toggle chats"></span>
     <span class="spacer"></span>
+    <button class="gear-btn" id="search-flyout-btn" onclick="openSearchFlyout()" title="Search (Ctrl+K)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></button>
     <button class="gear-btn" id="mobile-pair-btn" onclick="openMobileModal()" title="Go Mobile"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg></button>
     <button class="gear-btn" id="share-btn" onclick="nativeShare()" title="Share"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg></button>
     <button class="gear-btn" id="theme-toggle-btn" title="Toggle theme"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button>
@@ -2923,7 +2952,7 @@
       </div>
       <!-- Model selection (always visible — local tier needs this) -->
       <div class="settings-section" id="llm-settings-section">
-        <h3 class="settings-section-title">Model <a href="https://ollama.com/library" target="_blank" rel="noopener" style="font-size:11px;font-weight:400;color:var(--accent);text-decoration:none;margin-left:6px;">Browse models &rarr;</a></h3>
+        <h3 class="settings-section-title">Model <a href="https://ollama.com/library" target="_blank" rel="noopener" style="font-size:11px;font-weight:400;color:var(--accent);text-decoration:none;margin-left:6px;">Ollama &rarr;</a> <a href="https://openrouter.ai/models" target="_blank" rel="noopener" style="font-size:11px;font-weight:400;color:var(--accent);text-decoration:none;margin-left:6px;">OpenRouter &rarr;</a></h3>
         <div class="model-field">
           <label>Chat model</label>
           <select id="model-chat" style="flex:1;padding:8px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;font-family:inherit;">
@@ -3274,12 +3303,6 @@
 
   function renderThreadList() {
     threadListEl.innerHTML = "";
-    // Add "Main chat" as the default option
-    const mainItem = document.createElement("div");
-    mainItem.className = "thread-item" + (currentThreadId === null ? " active" : "");
-    mainItem.innerHTML = '<div class="thread-item-title">Main</div><div class="thread-item-meta">Always here</div>';
-    mainItem.addEventListener("click", () => switchThread(null));
-    threadListEl.appendChild(mainItem);
 
     for (const t of threads) {
       const item = document.createElement("div");
@@ -3301,7 +3324,7 @@
           await api("/api/threads/" + encodeURIComponent(tid) + "?sessionId=" + encodeURIComponent(sessionId), {
             method: "DELETE",
           });
-          if (currentThreadId === tid) await switchThread(null);
+          if (currentThreadId === tid) await createAndSwitchNewThread();
           loadThreads();
         } catch (err) { console.log("Delete thread failed:", err.message); }
       });
@@ -3346,7 +3369,7 @@
     updateThreadLabel();
 
     if (threadId) {
-      // Load thread-specific history
+      // Load thread history
       try {
         const data = await api("/api/threads/" + encodeURIComponent(threadId) + "/history?sessionId=" + encodeURIComponent(sessionId));
         if (data.messages) {
@@ -3355,29 +3378,25 @@
             if (typeof content === "string" && content.includes("[AGENT_REQUEST]")) {
               content = content.replace(/\s*\[AGENT_REQUEST\][\s\S]*?\[\/AGENT_REQUEST\]\s*/g, "").trim();
             }
-            addMessage(msg.role === "user" ? "user" : "assistant", content);
-          }
-        }
-      } catch (err) {
-        console.log("Failed to load thread history:", err.message);
-      }
-    } else {
-      // Load main session history
-      try {
-        const data = await api("/api/history?sessionId=" + encodeURIComponent(sessionId));
-        if (data.messages) {
-          for (const msg of data.messages) {
-            let content = msg.content;
-            if (typeof content === "string" && content.includes("[AGENT_REQUEST]")) {
-              content = content.replace(/\s*\[AGENT_REQUEST\][\s\S]*?\[\/AGENT_REQUEST\]\s*/g, "").trim();
+            var el = addMessage(msg.role === "user" ? "user" : "assistant", content);
+            if (msg.toolsUsed && msg.toolsUsed.length > 0 && el) {
+              var th = msg.toolsUsed.map(function(t) {
+                var c2 = t.isError ? "tool-indicator tool-error" : "tool-indicator tool-done";
+                return '<div class="' + c2 + '">' + (t.isError ? "&#10007; " : "&#10003; ") + '<strong>' + t.name.replace(/</g,"&lt;") + '</strong></div>';
+              }).join("");
+              var td = document.createElement("div");
+              td.innerHTML = th;
+              var cd = el.querySelector(".content");
+              if (cd && cd.parentElement) cd.parentElement.insertBefore(td, cd);
             }
-            addMessage(msg.role === "user" ? "user" : "assistant", content);
+            renderPersistedAgents(el, msg.agentsUsed);
           }
         }
       } catch (err) {
-        console.log("Failed to load history:", err.message);
+        console.log("Failed to load thread history:", err.message);
       }
     }
+    // If no threadId, just show empty — user will get a thread on first message
   }
 
   function updateThreadLabel() {
@@ -3385,11 +3404,11 @@
       const t = threads.find(t => t.id === currentThreadId);
       threadCurrentLabel.textContent = t ? t.title : "Chat";
     } else {
-      threadCurrentLabel.textContent = "";
+      threadCurrentLabel.textContent = "New chat";
     }
   }
 
-  threadNewBtn.addEventListener("click", async () => {
+  async function createAndSwitchNewThread() {
     try {
       const data = await fetch("/api/threads", {
         method: "POST",
@@ -3400,15 +3419,19 @@
       if (data.thread) {
         await loadThreads();
         await switchThread(data.thread.id);
+        return data.thread.id;
       }
     } catch (err) {
       console.error("Failed to create thread:", err.message);
     }
-  });
+    return null;
+  }
+
+  threadNewBtn.addEventListener("click", () => createAndSwitchNewThread());
 
   // --- Auto-title chats after first exchange ---
   var chatAutoTitled = {}; // threadId → true if already titled
-  function autoTitleChat(threadId) {
+  async function autoTitleChat(threadId) {
     if (!threadId || chatAutoTitled[threadId]) return;
     // Skip if already has a real title
     var existing = threads.find(function(x) { return x.id === threadId; });
@@ -3443,18 +3466,19 @@
 
     chatAutoTitled[threadId] = true;
 
-    // Update server
-    fetch("/api/threads/" + encodeURIComponent(threadId), {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json", ...authHeaders() },
-      body: JSON.stringify({ sessionId: sessionId, title: title }),
-    }).then(function() {
+    // Update server — await so loadThreads() doesn't race
+    try {
+      await fetch("/api/threads/" + encodeURIComponent(threadId), {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json", ...authHeaders() },
+        body: JSON.stringify({ sessionId: sessionId, title: title }),
+      });
       // Update local state and sidebar
       var t = threads.find(function(x) { return x.id === threadId; });
       if (t) t.title = title;
       renderThreadList();
       updateThreadLabel();
-    }).catch(function() {});
+    } catch (e) { /* ignore title failures */ }
   }
 
   // --- Attached files ---
@@ -4169,7 +4193,18 @@
           if (content.includes("[AGENT_REQUEST]")) {
             content = content.replace(/\s*\[AGENT_REQUEST\][\s\S]*?\[\/AGENT_REQUEST\]\s*/g, "").trim();
           }
-          addMessage(msg.role === "user" ? "user" : "assistant", content);
+          var hEl = addMessage(msg.role === "user" ? "user" : "assistant", content);
+          if (msg.toolsUsed && msg.toolsUsed.length > 0 && hEl) {
+            var htHtml = msg.toolsUsed.map(function(t) {
+              var hcls = t.isError ? "tool-indicator tool-error" : "tool-indicator tool-done";
+              return '<div class="' + hcls + '">' + (t.isError ? "&#10007; " : "&#10003; ") + '<strong>' + t.name.replace(/</g,"&lt;") + '</strong></div>';
+            }).join("");
+            var htDiv = document.createElement("div");
+            htDiv.innerHTML = htHtml;
+            var hcDiv = hEl.querySelector(".content");
+            if (hcDiv && hcDiv.parentElement) hcDiv.parentElement.insertBefore(htDiv, hcDiv);
+          }
+          renderPersistedAgents(hEl, msg.agentsUsed);
         }
       }
     } catch (err) {
@@ -4232,6 +4267,10 @@
         if (thread) await switchThread(thread);
         if (scroll && messagesEl) requestAnimationFrame(() => { messagesEl.scrollTop = scroll; });
       }
+      // Ensure we always have a thread — auto-select the most recent or create one
+      if (!currentThreadId && threads.length > 0) {
+        await switchThread(threads[0].id);
+      }
     } catch (e) { console.log("Restore failed:", e); }
 
     // Initialize voice features (non-blocking)
@@ -4857,7 +4896,20 @@
             if (m.role === "user" && m.source === "phone") {
               label = (userName || "You") + " (phone)";
             }
-            addMessage(m.role === "user" ? "user" : "assistant", m.content, label);
+            var msgEl = addMessage(m.role === "user" ? "user" : "assistant", m.content, label);
+            // Render persisted tool usage indicators
+            if (m.toolsUsed && m.toolsUsed.length > 0 && msgEl) {
+              var toolsHtml = m.toolsUsed.map(function(t) {
+                var cls = t.isError ? "tool-indicator tool-error" : "tool-indicator tool-done";
+                var icon = t.isError ? "&#10007; " : "&#10003; ";
+                return '<div class="' + cls + '">' + icon + '<strong>' + t.name.replace(/</g,"&lt;") + '</strong></div>';
+              }).join("");
+              var toolsDiv = document.createElement("div");
+              toolsDiv.innerHTML = toolsHtml;
+              var contentDiv = msgEl.querySelector(".content");
+              if (contentDiv && contentDiv.parentElement) contentDiv.parentElement.insertBefore(toolsDiv, contentDiv);
+            }
+            renderPersistedAgents(msgEl, m.agentsUsed);
           }
           chatPollIndex = data.total;
           messagesEl.scrollTop = messagesEl.scrollHeight;
@@ -4993,9 +5045,23 @@
     }
 
     try {
-      const payload = { sessionId, message: msgText };
+      // Ensure we always have a thread — auto-create silently if needed
+      if (!currentThreadId) {
+        try {
+          const td = await fetch("/api/threads", {
+            method: "POST",
+            headers: { "Content-Type": "application/json", ...authHeaders() },
+            body: JSON.stringify({ sessionId }),
+          }).then(r => r.json());
+          if (td.thread) {
+            currentThreadId = td.thread.id;
+            loadThreads(); // refresh sidebar (fire-and-forget)
+          }
+        } catch {}
+        if (!currentThreadId) { addMessage("system", "Failed to create chat thread."); return; }
+      }
+      const payload = { sessionId, message: msgText, threadId: currentThreadId };
       if (imgPayload) payload.images = imgPayload;
-      if (currentThreadId) payload.threadId = currentThreadId;
 
       const res = await fetch("/api/chat", {
         method: "POST",
@@ -5065,6 +5131,25 @@
               contentEl.innerHTML = renderStreamingMarkdown(streamingText);
               messagesEl.scrollTop = messagesEl.scrollHeight;
             }
+            if (data.toolCall) {
+              // Model is calling a tool — show indicator
+              var toolEl = document.createElement("div");
+              toolEl.className = "tool-indicator";
+              toolEl.innerHTML = '<span class="tool-spinner"></span> Using <strong>' + (data.toolCall.name || "tool").replace(/</g,"&lt;") + '</strong>...';
+              if (contentEl && contentEl.parentElement) {
+                contentEl.parentElement.appendChild(toolEl);
+                messagesEl.scrollTop = messagesEl.scrollHeight;
+              }
+            }
+            if (data.toolResult) {
+              // Tool finished — update indicator
+              var indicators = document.querySelectorAll(".tool-indicator");
+              if (indicators.length > 0) {
+                var last = indicators[indicators.length - 1];
+                last.innerHTML = (data.toolResult.isError ? "&#10007; " : "&#10003; ") + '<strong>' + (data.toolResult.name || "tool").replace(/</g,"&lt;") + '</strong>';
+                last.className = "tool-indicator " + (data.toolResult.isError ? "tool-error" : "tool-done");
+              }
+            }
             if (data.agentSpawned) {
               // Server spawned an agent — render block immediately with real task ID
               console.log("[agent] SSE agentSpawned:", data.agentSpawned);
@@ -5203,9 +5288,9 @@
       abortController = null;
       setButtonSend();
       chatInput.focus();
-      // Auto-title chat after first assistant response
+      // Auto-title chat after first assistant response, then refresh sidebar
       if (currentThreadId) {
-        autoTitleChat(currentThreadId);
+        await autoTitleChat(currentThreadId);
         loadThreads();
       }
     }
@@ -5265,6 +5350,69 @@
     return s < 60 ? s + "s" : Math.floor(s/60) + "m " + (s%60) + "s";
   }
 
+  /** Create a static agent block for history rendering (already completed/failed). */
+  function createPersistedAgentBlock(agent) {
+    var isDone = agent.status === "completed";
+    var isFailed = agent.status === "failed" || agent.status === "cancelled";
+    var block = document.createElement("div");
+    block.className = "agent-block " + (isDone ? "done" : isFailed ? "failed" : "");
+    block.dataset.taskId = agent.taskId || "";
+    var icon = isDone
+      ? '<span class="agent-block-check">\u2713</span>'
+      : isFailed
+        ? '<span class="agent-block-fail">\u2717</span>'
+        : '<div class="agent-block-spinner"></div>';
+    var timerText = agent.elapsed || agent.status || "";
+    block.innerHTML =
+      '<div class="agent-block-header">'
+        + icon
+        + '<span class="agent-block-label">' + (agent.label || "Agent").replace(/</g, "&lt;") + '</span>'
+        + '<span class="agent-block-timer">' + timerText + '</span>'
+      + '</div>'
+      + '<div class="agent-block-body">' + (agent.resultSummary || "").replace(/</g, "&lt;") + '</div>';
+    var header = block.querySelector(".agent-block-header");
+    header.addEventListener("click", function() { block.classList.toggle("expanded"); });
+    return block;
+  }
+
+  /** Render agentsUsed blocks inside a message element. */
+  function renderPersistedAgents(msgEl, agents) {
+    if (!agents || agents.length === 0 || !msgEl) return;
+    for (var i = 0; i < agents.length; i++) {
+      var block = createPersistedAgentBlock(agents[i]);
+      msgEl.appendChild(block);
+    }
+    // If any agents have taskIds and status is "running" or "completed" placeholder, poll once for real status
+    var taskIds = agents.filter(function(a) { return a.taskId; }).map(function(a) { return a.taskId; });
+    if (taskIds.length > 0) {
+      api("/api/agents/tasks").then(function(data) {
+        if (!data.tasks) return;
+        for (var j = 0; j < data.tasks.length; j++) {
+          var task = data.tasks[j];
+          var blockEl = msgEl.querySelector('.agent-block[data-task-id="' + task.id + '"]');
+          if (!blockEl) continue;
+          var isDone = task.status === "completed";
+          var isFailed = task.status === "failed" || task.status === "cancelled";
+          var isRunning = task.status === "running" || task.status === "pending";
+          blockEl.className = "agent-block " + (isDone ? "done" : isFailed ? "failed" : "");
+          var spinnerEl = blockEl.querySelector(".agent-block-spinner, .agent-block-check, .agent-block-fail");
+          if (spinnerEl) {
+            spinnerEl.outerHTML = isDone
+              ? '<span class="agent-block-check">\u2713</span>'
+              : isFailed
+                ? '<span class="agent-block-fail">\u2717</span>'
+                : '<div class="agent-block-spinner"></div>';
+          }
+          if (isRunning) { blockEl.className = "agent-block"; startAgentPoll(); }
+          var timerEl = blockEl.querySelector(".agent-block-timer");
+          if (timerEl && !isRunning) timerEl.textContent = task.status;
+          var bodyEl = blockEl.querySelector(".agent-block-body");
+          if (bodyEl && task.resultSummary) bodyEl.textContent = task.resultSummary;
+        }
+      }).catch(function() {});
+    }
+  }
+
   async function pollAgentTasks() {
     try {
       var data = await api("/api/agents/tasks");
@@ -5595,6 +5743,9 @@
     try {
       const data = await api("/api/models");
       const models = data.models || [];
+      const ollamaModels = models.filter(function(m) { return m.source === "ollama"; });
+      const openrouterModels = models.filter(function(m) { return m.source === "openrouter"; });
+
       var dropdowns = [
         { el: modelChatSelect, current: selectedChat, autoLabel: "Auto (best available)" },
         { el: modelUtilitySelect, current: selectedUtility, autoLabel: "Auto (best available)" },
@@ -5602,16 +5753,38 @@
       ];
       for (var dd of dropdowns) {
         dd.el.innerHTML = '<option value="auto">' + dd.autoLabel + '</option>';
-        for (const m of models) {
-          const opt = document.createElement("option");
-          opt.value = m.name;
-          const sizeMB = m.size ? Math.round(m.size / 1024 / 1024) : 0;
-          opt.textContent = m.name + (sizeMB ? ` (${sizeMB >= 1024 ? (sizeMB / 1024).toFixed(1) + "GB" : sizeMB + "MB"})` : "");
-          if (m.name === dd.current) opt.selected = true;
-          dd.el.appendChild(opt);
+
+        // Ollama models
+        if (ollamaModels.length > 0) {
+          var ollamaGroup = document.createElement("optgroup");
+          ollamaGroup.label = "Local (Ollama)";
+          for (const m of ollamaModels) {
+            const opt = document.createElement("option");
+            opt.value = m.name;
+            const sizeMB = m.size ? Math.round(m.size / 1024 / 1024) : 0;
+            opt.textContent = m.name + (sizeMB ? " (" + (sizeMB >= 1024 ? (sizeMB / 1024).toFixed(1) + "GB" : sizeMB + "MB") + ")" : "");
+            if (m.name === dd.current) opt.selected = true;
+            ollamaGroup.appendChild(opt);
+          }
+          dd.el.appendChild(ollamaGroup);
         }
+
+        // OpenRouter models
+        if (openrouterModels.length > 0) {
+          var orGroup = document.createElement("optgroup");
+          orGroup.label = "Cloud (OpenRouter)";
+          for (const m of openrouterModels) {
+            const opt = document.createElement("option");
+            opt.value = m.name;
+            opt.textContent = m.name;
+            if (m.name === dd.current) opt.selected = true;
+            orGroup.appendChild(opt);
+          }
+          dd.el.appendChild(orGroup);
+        }
+
         // If the saved model isn't in the list, add it as an option anyway
-        if (dd.current && dd.current !== "auto" && !models.some(m => m.name === dd.current)) {
+        if (dd.current && dd.current !== "auto" && !models.some(function(m) { return m.name === dd.current; })) {
           const opt = document.createElement("option");
           opt.value = dd.current;
           opt.textContent = dd.current + " (not found)";
@@ -6816,6 +6989,7 @@
 </script>
 
 <script src="/public/share-modal.js"></script>
+<script src="/public/search-flyout.js"></script>
 
 <!-- UI update toast -->
 <div class="ui-update-toast" id="ui-update-toast">