ape-claw 0.1.3 → 0.1.5

package/ui/forge/js/forge-chat.js

@@ -1,6 +1,10 @@
 /**
  * forge-chat.js — Agent chat panel for ClawBot Forge.
- * Posts to /api/chat, streams responses via SSE at /api/chat/stream.
+ *
+ * Three modes (auto-detected):
+ * 1. Website (apeclaw.ai / vercel.app): always uses /api/forge/chat (The Clawllector)
+ * 2. Local + PERPLEXITY_API_KEY set: uses /api/forge/chat (your own OpenClaw agent)
+ * 3. Local without key: falls back to /api/chat (basic message relay)
  */
 
 /* ══════════════════════════════════════════════════════════
@@ -14,6 +18,65 @@ const badge = () => document.getElementById("forgeChatBadge");
 
 let unread = 0;
 let streaming = false;
+let forgeAgentAvailable = null; // null = unknown, true/false after probe
+let localAgentName = "Agent";
+let localProvider = "";
+
+const conversationHistory = [];
+
+function escapeHtml(s) {
+  return String(s || "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function renderChatText(raw) {
+  let text = String(raw || "");
+  // Strip common citation markers from provider answers (e.g. [1], [2]).
+  text = text.replace(/\[(\d+)\]/g, "");
+
+  // Escape first for safety, then apply a tiny markdown subset.
+  let html = escapeHtml(text);
+
+  // Fenced code blocks.
+  html = html.replace(/```([\s\S]*?)```/g, (_m, code) => `<pre><code>${code}</code></pre>`);
+  // Inline code.
+  html = html.replace(/`([^`]+?)`/g, "<code>$1</code>");
+  // Bold.
+  html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+
+  // Basic bullet list support.
+  html = html.replace(/(?:^|\n)- (.+?)(?=\n|$)/g, "<li>$1</li>");
+  html = html.replace(/(<li>[\s\S]*?<\/li>)/g, "<ul>$1</ul>");
+
+  // Preserve line breaks.
+  html = html.replace(/\n/g, "<br>");
+  return html;
+}
+
+/* ══════════════════════════════════════════════════════════
+   Environment detection
+   ══════════════════════════════════════════════════════════ */
+function isWebsiteMode() {
+  const host = window.location.hostname;
+  return host.includes("apeclaw.ai") || host.includes("vercel.app") || host.includes("railway.app");
+}
+
+async function probeForgeAgent() {
+  try {
+    const res = await fetch("/api/forge/status", { signal: AbortSignal.timeout(3000) });
+    if (!res.ok) return false;
+    const data = await res.json();
+    if (data.agentName) localAgentName = data.agentName;
+    if (data.provider) localProvider = data.provider;
+    return data.configured === true;
+  } catch {
+    return false;
+  }
+}
 
 /* ══════════════════════════════════════════════════════════
    Message rendering
@@ -35,7 +98,13 @@ function appendMsg(role, text) {
 
   const name = document.createElement("span");
   name.className = "chat-msg-name";
-  name.textContent = role === "user" ? "You" : "Agent";
+  if (role === "user") {
+    name.textContent = "You";
+  } else if (isWebsiteMode()) {
+    name.textContent = "The Clawllector";
+  } else {
+    name.textContent = forgeAgentAvailable ? localAgentName : "Agent";
+  }
   header.appendChild(name);
 
   const time = document.createElement("span");
@@ -45,7 +114,8 @@ function appendMsg(role, text) {
 
   const body = document.createElement("div");
   body.className = "chat-msg-text";
-  body.textContent = text;
+  if (role === "agent") body.innerHTML = renderChatText(text);
+  else body.textContent = text;
 
   el.appendChild(header);
   el.appendChild(body);
@@ -62,7 +132,7 @@ function appendMsg(role, text) {
 }
 
 /* ══════════════════════════════════════════════════════════
-   Send message via POST /api/chat
+   Send message — routes to the right endpoint
    ══════════════════════════════════════════════════════════ */
 async function sendMessage() {
   const inp = input();
@@ -70,22 +140,134 @@ async function sendMessage() {
   if (!text || streaming) return;
 
   appendMsg("user", text);
+  conversationHistory.push({ role: "user", content: text });
   inp.value = "";
   updateCounter();
 
   streaming = true;
+  if (window.__forgeSetSpeaking) window.__forgeSetSpeaking(true);
   const btn = sendBtn();
   if (btn) btn.disabled = true;
 
+  if (isWebsiteMode() || forgeAgentAvailable) {
+    await sendToForgeAgent(text);
+  } else {
+    await sendToLocalChat(text);
+  }
+}
+
+/* ══════════════════════════════════════════════════════════
+   Forge agent: POST /api/forge/chat (SSE stream)
+   ══════════════════════════════════════════════════════════ */
+async function sendToForgeAgent(text) {
+  const btn = sendBtn();
+  const bodyEl = appendMsg("agent", "");
+  let buffer = "";
+
+  try {
+    async function requestOnce() {
+      return fetch("/api/forge/chat", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          message: text,
+          history: conversationHistory.slice(-20),
+        }),
+      });
+    }
+
+    let res = await requestOnce();
+    if (!res.ok && (res.status === 429 || res.status === 502 || res.status === 503 || res.status === 504)) {
+      const waitMs = 500;
+      await new Promise((resolve) => setTimeout(resolve, waitMs));
+      res = await requestOnce();
+    }
+
+    if (!res.ok) {
+      const errData = await res.json().catch(() => ({}));
+      let errMsg = errData.error || errData.message || res.statusText || `HTTP ${res.status}`;
+      if (errData.status && !String(errMsg).includes(String(errData.status))) {
+        errMsg += ` (${errData.status})`;
+      }
+      if (errData.retryAfter) {
+        errMsg += `, retry in ${errData.retryAfter}s`;
+      }
+      if (bodyEl) bodyEl.textContent = `Error: ${errMsg}`;
+      finishStreaming();
+      return;
+    }
+
+    const contentType = res.headers.get("content-type") || "";
+    if (!contentType.includes("text/event-stream")) {
+      const data = await res.json().catch(() => ({}));
+      if (bodyEl) bodyEl.innerHTML = renderChatText(data.reply || data.message || "No response");
+      if (data.reply || data.message) {
+        conversationHistory.push({ role: "assistant", content: data.reply || data.message });
+      }
+      finishStreaming();
+      return;
+    }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let sseBuffer = "";
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      sseBuffer += decoder.decode(value, { stream: true });
+      const lines = sseBuffer.split("\n");
+      sseBuffer = lines.pop() || "";
+
+      for (const line of lines) {
+        if (!line.startsWith("data: ")) continue;
+        const data = line.slice(6).trim();
+        if (data === "[DONE]") continue;
+        try {
+          const chunk = JSON.parse(data);
+          const t = chunk.text || chunk.content || "";
+          if (t) {
+            buffer += t;
+            if (bodyEl) bodyEl.innerHTML = renderChatText(buffer);
+            const box = msgBox();
+            if (box) box.scrollTop = box.scrollHeight;
+          }
+        } catch { /* ignore parse errors */ }
+      }
+    }
+
+    if (buffer) {
+      conversationHistory.push({ role: "assistant", content: buffer });
+    } else if (bodyEl && !bodyEl.textContent) {
+      bodyEl.textContent = "No response received";
+    }
+  } catch (err) {
+    if (bodyEl) {
+      const msg = buffer || `Connection error: ${err.message}`;
+      bodyEl.innerHTML = renderChatText(msg);
+    }
+  }
+
+  finishStreaming();
+}
+
+/* ══════════════════════════════════════════════════════════
+   Local fallback: POST /api/chat (basic message relay)
+   ══════════════════════════════════════════════════════════ */
+async function sendToLocalChat(text) {
+  const btn = sendBtn();
+
   try {
     const res = await fetch("/api/chat", {
       method: "POST",
       headers: { "content-type": "application/json" },
-      body: JSON.stringify({ message: text, room: "forge" }),
+      body: JSON.stringify({ text, room: "forge" }),
     });
 
     if (!res.ok) {
       appendMsg("agent", `Error: ${res.status} ${res.statusText}`);
+      finishStreaming();
       return;
     }
 
@@ -96,19 +278,25 @@ async function sendMessage() {
       streamResponse(data.streamId);
       return;
     } else {
-      appendMsg("agent", data.message || "No response");
+      appendMsg("agent", data.message?.text || "Message sent");
     }
   } catch (err) {
     appendMsg("agent", `Connection error: ${err.message}`);
-  } finally {
-    streaming = false;
-    if (btn) btn.disabled = false;
-    inp?.focus();
   }
+
+  finishStreaming();
+}
+
+function finishStreaming() {
+  streaming = false;
+  if (window.__forgeSetSpeaking) window.__forgeSetSpeaking(false);
+  const btn = sendBtn();
+  if (btn) btn.disabled = false;
+  input()?.focus();
 }
 
 /* ══════════════════════════════════════════════════════════
-   SSE streaming for long responses
+   SSE streaming for local mode long responses
    ══════════════════════════════════════════════════════════ */
 function streamResponse(streamId) {
   const bodyEl = appendMsg("agent", "");
@@ -118,16 +306,13 @@ function streamResponse(streamId) {
   evtSrc.onmessage = (e) => {
     if (e.data === "[DONE]") {
       evtSrc.close();
-      streaming = false;
-      const btn = sendBtn();
-      if (btn) btn.disabled = false;
-      input()?.focus();
+      finishStreaming();
       return;
     }
     try {
       const chunk = JSON.parse(e.data);
       buffer += chunk.text || chunk.content || "";
-      if (bodyEl) bodyEl.textContent = buffer;
+      if (bodyEl) bodyEl.innerHTML = renderChatText(buffer);
       const box = msgBox();
       if (box) box.scrollTop = box.scrollHeight;
     } catch { /* ignore parse errors */ }
@@ -136,9 +321,7 @@ function streamResponse(streamId) {
   evtSrc.onerror = () => {
     evtSrc.close();
     if (!buffer && bodyEl) bodyEl.textContent = "Stream interrupted";
-    streaming = false;
-    const btn = sendBtn();
-    if (btn) btn.disabled = false;
+    finishStreaming();
   };
 }
 
@@ -154,9 +337,46 @@ function updateCounter() {
 /* ══════════════════════════════════════════════════════════
    Init
    ══════════════════════════════════════════════════════════ */
-function init() {
+async function init() {
   const inp = input();
   const btn = sendBtn();
+  const indicator = document.getElementById("forgeChatAgentIndicator");
+
+  if (isWebsiteMode()) {
+    forgeAgentAvailable = true;
+    if (inp) inp.disabled = false;
+    if (btn) btn.disabled = false;
+    if (inp) inp.placeholder = "Ask The Clawllector anything...";
+    if (indicator) {
+      indicator.textContent = "\u{1F99E} Talking to The Clawllector (OpenClaw agent)";
+      indicator.style.display = "block";
+    }
+  } else {
+    forgeAgentAvailable = await probeForgeAgent();
+
+    if (forgeAgentAvailable) {
+      if (inp) { inp.disabled = false; inp.placeholder = `Ask ${localAgentName} anything...`; }
+      if (btn) btn.disabled = false;
+      if (indicator) {
+        const providerTag = localProvider ? ` via ${localProvider}` : "";
+        indicator.textContent = `\u{1F99E} Connected to ${localAgentName}${providerTag}`;
+        indicator.style.display = "block";
+      }
+    } else {
+      if (inp) inp.disabled = true;
+      if (btn) btn.disabled = true;
+      if (indicator) {
+        indicator.innerHTML =
+          '\u{1F512} Forge agent not configured. Set an LLM API key ' +
+          '(<code style="color:var(--neon-cyan,#63d7ff)">OPENAI_API_KEY</code>, ' +
+          '<code style="color:var(--neon-cyan,#63d7ff)">ANTHROPIC_API_KEY</code>, ' +
+          '<code style="color:var(--neon-cyan,#63d7ff)">PERPLEXITY_API_KEY</code>, ' +
+          'or <code style="color:var(--neon-cyan,#63d7ff)">OLLAMA_HOST</code>) to enable. ' +
+          '<a href="/docs" style="color:var(--accent,#cfff04)">Setup guide</a>';
+        indicator.style.display = "block";
+      }
+    }
+  }
 
   if (inp) {
     inp.addEventListener("input", updateCounter);

package/ui/forge/js/forge-data.js

@@ -22,6 +22,7 @@ import { CSS2DObject } from "three/addons/renderers/CSS2DRenderer.js";
 let skills = [];
 let allLibrarySkills = [];
 let podStatus = null;
+let forgeAgentOnline = false;
 let podFiles = {};
 let clawbots = [];
 let agentName = "The Clawllector";
@@ -35,12 +36,23 @@ const SEARCH_LIMIT = 30;
 /* ══════════════════════════════════════════════════════════
    Fetch helpers
    ══════════════════════════════════════════════════════════ */
-async function fetchJSON(url, options = {}) {
-  try {
-    const r = await fetch(url, options);
-    if (!r.ok) return null;
-    return await r.json();
-  } catch { return null; }
+async function fetchJSON(url, options = {}, config = {}) {
+  const retries = Number(config.retries ?? 0);
+  const timeoutMs = Number(config.timeoutMs ?? 8000);
+  for (let attempt = 0; attempt <= retries; attempt++) {
+    try {
+      const r = await fetch(url, {
+        ...options,
+        signal: options.signal || AbortSignal.timeout(timeoutMs),
+      });
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return await r.json();
+    } catch {
+      if (attempt >= retries) return null;
+      await new Promise((resolve) => setTimeout(resolve, 250 * (attempt + 1)));
+    }
+  }
+  return null;
 }
 
 function authHeaders() {
@@ -158,9 +170,9 @@ function inferCategory(skill) {
    ══════════════════════════════════════════════════════════ */
 async function loadInstalledSkills() {
   const [seedRes, userRes, starterRes] = await Promise.all([
-    fetchJSON("/api/skills/search?source=seed&limit=500"),
-    fetchJSON("/api/skillcards/user"),
-    fetchJSON("/api/pod/starter-pack"),
+    fetchJSON("/api/skills/search?source=seed&limit=500", {}, { retries: 1 }),
+    fetchJSON("/api/skillcards/user", {}, { retries: 1 }),
+    fetchJSON("/api/pod/starter-pack", {}, { retries: 1, timeoutMs: 12000 }),
   ]);
 
   const seedSkills = seedRes?.results || [];
@@ -176,19 +188,33 @@ async function loadInstalledSkills() {
     }
   }
 
+  // Fallback: if live endpoints briefly fail, populate from stats.recent so the bot still has visible parts.
+  if (merged.length === 0) {
+    const stats = await fetchJSON("/api/skills/stats", {}, { retries: 1 });
+    const recent = Array.isArray(stats?.recent) ? stats.recent : [];
+    for (const s of recent) {
+      if (s?.slug && !seen.has(s.slug)) {
+        seen.add(s.slug);
+        merged.push({ ...s, source: s.source || "fallback-recent" });
+      }
+    }
+  }
+
   skills = merged.map(s => ({ ...s, category: inferCategory(s) }));
   return skills;
 }
 
 async function loadAllData() {
-  const [_, statusRes, filesRes, botsRes] = await Promise.all([
+  const [_, statusRes, filesRes, botsRes, forgeRes] = await Promise.all([
     loadInstalledSkills(),
     fetchJSON("/api/pod/status"),
     fetchJSON("/api/pod/files", { headers: authHeaders() }),
     fetchJSON("/api/clawbots"),
+    fetchJSON("/api/forge/status", {}, { retries: 2, timeoutMs: 12000 }),
   ]);
 
   podStatus = statusRes;
+  forgeAgentOnline = !!(forgeRes?.configured);
   if (filesRes?.files) podFiles = filesRes.files;
   if (botsRes && Array.isArray(botsRes.clawbots)) clawbots = botsRes.clawbots;
 
@@ -218,7 +244,7 @@ function updateHeader() {
   if (statusEl) {
     const dot = statusEl.querySelector(".forge-status-dot");
     const txt = statusEl.querySelector(".forge-status-text");
-    const running = podStatus && podStatus.running;
+    const running = (podStatus && podStatus.running) || forgeAgentOnline;
     if (dot) dot.className = `forge-status-dot ${running ? "running" : "stopped"}`;
     if (txt) txt.textContent = running ? "ONLINE" : "OFFLINE";
   }
@@ -344,8 +370,9 @@ function buildIdentityPlate() {
 
   const statusDiv = document.createElement("div");
   statusDiv.className = "forge-identity-status";
+  statusDiv.id = "forgeIdentityStatus";
   const dot = document.createElement("span");
-  const running = podStatus && podStatus.running;
+  const running = (podStatus && podStatus.running) || forgeAgentOnline;
   dot.className = `forge-identity-dot ${running ? "running" : podStatus ? "stopped" : "uninitialized"}`;
   statusDiv.appendChild(dot);
   const txt = document.createElement("span");
@@ -361,6 +388,16 @@ function buildIdentityPlate() {
   return label;
 }
 
+function refreshIdentityStatus() {
+  const statusDiv = document.getElementById("forgeIdentityStatus");
+  if (!statusDiv) return;
+  const running = (podStatus && podStatus.running) || forgeAgentOnline;
+  const dot = statusDiv.querySelector(".forge-identity-dot");
+  const txt = statusDiv.querySelector("span:last-child");
+  if (dot) dot.className = `forge-identity-dot ${running ? "running" : podStatus ? "stopped" : "uninitialized"}`;
+  if (txt) txt.textContent = running ? "ONLINE" : "OFFLINE";
+}
+
 /* ══════════════════════════════════════════════════════════
    Install skill
    ══════════════════════════════════════════════════════════ */
@@ -740,7 +777,10 @@ async function init() {
   document.getElementById("forgeAuthAgentId")?.addEventListener("change", saveAuth);
   document.getElementById("forgeAuthAgentToken")?.addEventListener("change", saveAuth);
 
-  window.addEventListener("forge:ready", async () => {
+  let started = false;
+  async function startForgeAssembly() {
+    if (started) return;
+    started = true;
     const loaded = await loadAllData();
     updateHeader();
     initShareToX();
@@ -762,6 +802,17 @@ async function init() {
       robotGroup.add(identityLabel);
     }
 
+    if (!forgeAgentOnline) {
+      setTimeout(async () => {
+        const retry = await fetchJSON("/api/forge/status", {}, { retries: 2, timeoutMs: 12000 });
+        if (retry?.configured) {
+          forgeAgentOnline = true;
+          updateHeader();
+          refreshIdentityStatus();
+        }
+      }, 3000);
+    }
+
     animateAssembly(currentAttachments, () => {
       updateProgress(skills.length, skills.length);
       const idleAnim = makeIdleAnimator(currentAttachments);
@@ -779,7 +830,18 @@ async function init() {
 
     window.addEventListener("forge:select", (e) => showInspector(e.detail));
     window.addEventListener("forge:deselect", () => hideInspector());
-  });
+  }
+
+  window.addEventListener("forge:ready", startForgeAssembly, { once: true });
+
+  // Fallback for race conditions where forge:ready fired before listener attach.
+  if (window.__forgeSceneReady === true) {
+    startForgeAssembly();
+  } else {
+    setTimeout(() => {
+      if (!started) startForgeAssembly();
+    }, 2500);
+  }
 }
 
 function groupByCategory(arr) {