@chrysb/alphaclaw 0.8.3-beta.2 → 0.8.3-beta.4

package/lib/public/js/components/routes/chat-route.js

@@ -2,6 +2,7 @@ import { h } from "preact";
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -17,6 +18,20 @@ const kNewChatEventName = "alphaclaw:chat-new";
 const kWsReconnectMaxAttempts = 8;
 const kAutoscrollBottomThresholdPx = 40;
 const kChatDebugQueryFlag = "chatDebug";
+const kComposerMaxLines = 5;
+const kComposerFontSizePx = 12;
+const kComposerLineHeight = 1.4;
+const kComposerPaddingYPx = 20;
+
+const resizeComposerTextarea = (element) => {
+  if (!element) return;
+  const linePx = kComposerFontSizePx * kComposerLineHeight;
+  const minH = linePx + kComposerPaddingYPx;
+  const maxH = linePx * kComposerMaxLines + kComposerPaddingYPx;
+  element.style.height = "auto";
+  const next = Math.min(Math.max(element.scrollHeight, minH), maxH);
+  element.style.height = `${next}px`;
+};
 
 const buildMessage = ({
   role = "assistant",
@@ -174,8 +189,10 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
   const [activeRunBySession, setActiveRunBySession] = useState({});
   const [connectionError, setConnectionError] = useState("");
   const [historyLoading, setHistoryLoading] = useState(false);
+  const [assistantStreamStarted, setAssistantStreamStarted] = useState(false);
   const wsRef = useRef(null);
   const threadRef = useRef(null);
+  const composerRef = useRef(null);
   const reconnectTimerRef = useRef(null);
   const reconnectAttemptsRef = useRef(0);
   const selectedSessionKeyRef = useRef(selectedSessionKey);
@@ -206,6 +223,14 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
     selectedSessionKeyRef.current = selectedSessionKey;
   }, [selectedSessionKey]);
 
+  useEffect(() => {
+    setAssistantStreamStarted(false);
+  }, [selectedSessionKey]);
+
+  useLayoutEffect(() => {
+    resizeComposerTextarea(composerRef.current);
+  }, [draft, selectedSessionKey]);
+
   useEffect(() => {
     if (!selectedSessionKey) return;
     setDraft(String(draftBySession[selectedSessionKey] || ""));
@@ -294,6 +319,7 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
         setIsConnected(false);
         setStreaming(false);
         setSending(false);
+        setAssistantStreamStarted(false);
         setHistoryLoading(false);
         if (realtimeDisabledRef.current) return;
         if (reconnectAttemptsRef.current >= kWsReconnectMaxAttempts) return;
@@ -368,6 +394,7 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
           if (!chunkSessionKey || !messageId) return;
           setSending(false);
           setStreaming(true);
+          setAssistantStreamStarted(true);
           setMessagesBySession((currentMap) => {
             const currentMessages = currentMap[chunkSessionKey] || [];
             const lastMessage = currentMessages[currentMessages.length - 1];
@@ -424,6 +451,8 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
             payload.sessionKey || selectedSessionKeyRef.current || "",
           );
           if (!toolSessionKey) return;
+          setSending(false);
+          setAssistantStreamStarted(true);
           const toolPhase = String(payload.phase || "").toLowerCase();
           const toolCall =
             payload?.toolCall && typeof payload.toolCall === "object"
@@ -552,6 +581,7 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
           );
           const runId = String(payload.runId || "");
           if (!nextSessionKey || !runId) return;
+          setSending(false);
           setActiveRunBySession((currentMap) => ({
             ...currentMap,
             [nextSessionKey]: runId,
@@ -572,6 +602,7 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
           }
           setSending(false);
           setStreaming(false);
+          setAssistantStreamStarted(false);
           setHistoryLoading(false);
           if (doneSessionKey && ws && ws.readyState === 1) {
             setHistoryLoading(true);
@@ -592,6 +623,7 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
         if (payload.type === "error") {
           setSending(false);
           setStreaming(false);
+          setAssistantStreamStarted(false);
           setHistoryLoading(false);
           const errorSessionKey = String(
             payload.sessionKey || selectedSessionKeyRef.current || "",
@@ -791,6 +823,7 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
       ...currentMap,
       [selectedSessionKey]: "",
     }));
+    setAssistantStreamStarted(false);
     setSending(true);
     setMessagesBySession((currentMap) => ({
       ...currentMap,
@@ -829,8 +862,20 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
     });
     setStreaming(false);
     setSending(false);
+    setAssistantStreamStarted(false);
   }, [appendDebugEvent, selectedSessionKey]);
 
+  const handleComposerKeyDown = useCallback(
+    (event) => {
+      if (event.key !== "Enter") return;
+      if (event.shiftKey) return;
+      if (event.isComposing) return;
+      event.preventDefault();
+      handleSend();
+    },
+    [handleSend],
+  );
+
   const rawHistory = selectedSessionKey
     ? rawHistoryBySession[selectedSessionKey]
     : null;
@@ -1024,14 +1069,12 @@ ${JSON.stringify(
                     })()}
                   `,
                 )}
-        ${selectedSessionKey && (sending || streaming)
+        ${selectedSessionKey &&
+        (sending || streaming) &&
+        !assistantStreamStarted
           ? html`
               <div class="chat-bubble is-assistant chat-typing-indicator">
-                <div class="chat-bubble-meta">
-                  <span>Agent</span>
-                  <span>${isConnected ? "typing..." : "reconnecting..."}</span>
-                </div>
-                <div class="chat-typing-dots">
+                <div class="chat-typing-dots" aria-hidden="true">
                   <span></span><span></span><span></span>
                 </div>
               </div>
@@ -1055,12 +1098,15 @@ ${JSON.stringify(
       <div class="chat-composer">
         <textarea
           class="chat-composer-input"
+          ref=${composerRef}
+          rows=${1}
           placeholder=${selectedSessionKey
-            ? "Type a message..."
+            ? "Message… (Enter to send, Shift+Enter for newline)"
             : "Select a session to start"}
           value=${draft}
           disabled=${!selectedSessionKey || sending || !isConnected}
           oninput=${handleDraftInput}
+          onkeydown=${handleComposerKeyDown}
         ></textarea>
         <div class="chat-composer-actions">
           ${streaming
@@ -1085,7 +1131,7 @@ ${JSON.stringify(
             !String(draft || "").trim()}
             onclick=${handleSend}
           >
-            ${sending || streaming ? "Sending..." : "Send"}
+            ${sending ? "Sending..." : "Send"}
           </button>
         </div>
       </div>

package/lib/server/chat-ws.js

@@ -354,6 +354,10 @@ const createChatWsService = ({
   let gatewayConnectPromise = null;
   const pendingGatewayRequests = new Map();
   const runTargets = new Map();
+  /** While `chat.send` is in flight, agent events can arrive before we have `runId` + runTargets — match by session. */
+  const pendingSessionBySessionKey = new Map();
+  /** Agent events keyed by runId when the event references a run not yet in runTargets (race with chat.send response). */
+  const pendingAgentEventsByRunId = new Map();
   const browserRuns = new WeakMap();
 
   const sendJson = (ws, payload = {}) => {
@@ -382,6 +386,9 @@ const createChatWsService = ({
   };
 
   const clearRunTargetsForBrowser = (ws) => {
+    for (const [sk, pending] of pendingSessionBySessionKey.entries()) {
+      if (pending.ws === ws) pendingSessionBySessionKey.delete(sk);
+    }
     const runs = browserRuns.get(ws);
     if (!runs) return;
     for (const runId of runs) runTargets.delete(runId);
@@ -416,6 +423,7 @@ const createChatWsService = ({
   const markGatewayDisconnected = (reason = "Gateway disconnected") => {
     gatewaySocket = null;
     gatewayConnectPromise = null;
+    pendingAgentEventsByRunId.clear();
     rejectAllGatewayRequests(reason);
   };
 
@@ -436,6 +444,17 @@ const createChatWsService = ({
           sessionTarget = targetRow;
         }
         if (sessionTarget) return { runId: "", target: sessionTarget };
+        const pending = pendingSessionBySessionKey.get(sessionKey);
+        if (pending) {
+          return {
+            runId: resolveRunIdFromPayload(payload),
+            target: {
+              ws: pending.ws,
+              messageId: pending.messageId,
+              sessionKey,
+            },
+          };
+        }
       }
       if (runTargets.size === 1) {
         for (const [singleRunId, singleTarget] of runTargets.entries()) {
@@ -446,9 +465,60 @@ const createChatWsService = ({
     };
     if (eventName === "agent") {
       const { runId, target } = resolveTargetForPayload();
-      if (!target) return;
+      if (!target) {
+        const runIdEarly = resolveRunIdFromPayload(payload);
+        if (runIdEarly && !runTargets.get(runIdEarly)) {
+          const list = pendingAgentEventsByRunId.get(runIdEarly) || [];
+          list.push(eventPayload);
+          pendingAgentEventsByRunId.set(runIdEarly, list);
+        }
+        return;
+      }
       const stream = String(payload?.stream || "");
       const data = payload?.data || {};
+      if (stream === "tool") {
+        const toolPhase = String(data?.phase || "");
+        const toolName = String(data?.name || "unknown");
+        const toolCallId = String(data?.toolCallId || "");
+        if (toolPhase === "start") {
+          sendJson(target.ws, {
+            type: "tool",
+            phase: "call",
+            messageId: target.messageId,
+            sessionKey: target.sessionKey,
+            timestamp: Number(payload?.ts) || Date.now(),
+            toolCall: {
+              id: toolCallId,
+              name: toolName,
+              arguments: data?.args || null,
+              partialJson: "",
+            },
+            toolResult: null,
+            rawEvent: eventPayload || null,
+          });
+        } else if (toolPhase === "result") {
+          const resultText = collectTextFromUnknownShape(data?.result);
+          sendJson(target.ws, {
+            type: "tool",
+            phase: "result",
+            messageId: target.messageId,
+            sessionKey: target.sessionKey,
+            timestamp: Number(payload?.ts) || Date.now(),
+            toolCall: null,
+            toolResult: {
+              role: "toolResult",
+              toolCallId,
+              toolName,
+              content: resultText
+                ? [{ type: "text", text: resultText }]
+                : [],
+              isError: data?.isError === true,
+            },
+            rawEvent: eventPayload || null,
+          });
+        }
+        return;
+      }
       const toolCall =
         extractToolCallFromUnknownShape(payload) ||
         extractToolCallFromUnknownShape(data);
@@ -557,7 +627,7 @@ const createChatWsService = ({
             },
             role: "operator",
             scopes: kGatewayChatBridgeScopes,
-            caps: [],
+            caps: ["tool-events"],
             commands: [],
             permissions: {},
             auth: { token: getGatewayToken() },
@@ -689,13 +759,21 @@ const createChatWsService = ({
       });
       return;
     }
-    const result = await requestGateway("chat.send", {
-      sessionKey,
-      message: content,
-      idempotencyKey: crypto.randomUUID(),
-    });
+    pendingSessionBySessionKey.set(sessionKey, { ws, messageId });
+    let result;
+    try {
+      result = await requestGateway("chat.send", {
+        sessionKey,
+        message: content,
+        idempotencyKey: crypto.randomUUID(),
+      });
+    } catch (err) {
+      pendingSessionBySessionKey.delete(sessionKey);
+      throw err;
+    }
     const runId = String(result?.runId || "").trim();
     if (!runId) {
+      pendingSessionBySessionKey.delete(sessionKey);
       sendJson(ws, {
         type: "error",
         message: "Something went wrong connecting to the agent.",
@@ -706,12 +784,20 @@ const createChatWsService = ({
     }
     runTargets.set(runId, { ws, messageId, sessionKey });
     registerRunForBrowser(ws, runId);
+    pendingSessionBySessionKey.delete(sessionKey);
     sendJson(ws, {
       type: "started",
       sessionKey,
       runId,
       messageId,
     });
+    const buffered = pendingAgentEventsByRunId.get(runId);
+    if (buffered && buffered.length) {
+      pendingAgentEventsByRunId.delete(runId);
+      for (const stored of buffered) {
+        handleGatewayEvent(stored);
+      }
+    }
   };
 
   const handleStop = async ({ ws, payload }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.8.3-beta.2",
+  "version": "0.8.3-beta.4",
   "publishConfig": {
     "access": "public"
   },
@@ -20,12 +20,13 @@
   "files": [
     "bin/",
     "lib/",
-    "patches/"
+    "patches/",
+    "scripts/apply-openclaw-patches.js"
   ],
   "scripts": {
     "start": "node bin/alphaclaw.js start",
     "build:ui": "node scripts/build-ui.mjs",
-    "postinstall": "patch-package",
+    "postinstall": "node ./scripts/apply-openclaw-patches.js",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:watchdog": "vitest run tests/server/watchdog.test.js tests/server/watchdog-db.test.js tests/server/routes-watchdog.test.js",

package/scripts/apply-openclaw-patches.js

@@ -0,0 +1,99 @@
+/**
+ * patch-package resolves paths relative to the npm/yarn project root (where the
+ * lockfile lives). When this package's postinstall runs, process.cwd() is often
+ * this package directory, so a plain `patch-package` call treats that as the
+ * app root and looks for ./node_modules/openclaw under it — but openclaw is
+ * usually hoisted to the consumer's top-level node_modules.
+ *
+ * This script finds the real install root (directory containing a lockfile) and
+ * runs patch-package there with --patch-dir pointing at our bundled patches/.
+ */
+const { spawnSync } = require("child_process");
+const fs = require("fs");
+const path = require("path");
+
+const kAlphaclawRoot = path.join(__dirname, "..");
+
+const findProjectRootFromOpenclawDir = (openclawDir) => {
+  let dir = path.resolve(openclawDir);
+  for (let i = 0; i < 30; i += 1) {
+    if (
+      fs.existsSync(path.join(dir, "package-lock.json")) ||
+      fs.existsSync(path.join(dir, "yarn.lock")) ||
+      fs.existsSync(path.join(dir, "pnpm-lock.yaml"))
+    ) {
+      return dir;
+    }
+    const parent = path.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return path.dirname(path.dirname(openclawDir));
+};
+
+const main = () => {
+  const patchesDir = path.join(kAlphaclawRoot, "patches");
+  if (!fs.existsSync(patchesDir)) {
+    return;
+  }
+  const hasPatch = fs
+    .readdirSync(patchesDir)
+    .some((name) => name.endsWith(".patch"));
+  if (!hasPatch) {
+    return;
+  }
+
+  let openclawMainPath;
+  try {
+    openclawMainPath = require.resolve("openclaw", { paths: [kAlphaclawRoot] });
+  } catch {
+    return;
+  }
+
+  const openclawDir = (() => {
+    let dir = path.dirname(openclawMainPath);
+    for (let i = 0; i < 8; i += 1) {
+      const pkgPath = path.join(dir, "package.json");
+      if (fs.existsSync(pkgPath)) {
+        try {
+          const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+          if (pkg.name === "openclaw") return dir;
+        } catch {
+          /* continue */
+        }
+      }
+      const parent = path.dirname(dir);
+      if (parent === dir) break;
+      dir = parent;
+    }
+    return path.dirname(path.dirname(openclawMainPath));
+  })();
+  const projectRoot = findProjectRootFromOpenclawDir(openclawDir);
+
+  let relPatchDir = path.relative(projectRoot, patchesDir);
+  if (relPatchDir.startsWith("..") || path.isAbsolute(relPatchDir)) {
+    console.error(
+      "[@chrysb/alphaclaw] patch-package: could not resolve patch dir relative to project root",
+    );
+    process.exit(1);
+  }
+  relPatchDir = relPatchDir.split(path.sep).join("/");
+
+  const patchPackageMain = require.resolve("patch-package/dist/index.js", {
+    paths: [kAlphaclawRoot],
+  });
+
+  const result = spawnSync(
+    process.execPath,
+    [patchPackageMain, "--patch-dir", relPatchDir],
+    { cwd: projectRoot, stdio: "inherit", env: process.env },
+  );
+  if (result.error) {
+    throw result.error;
+  }
+  if (result.status !== 0 && result.status !== null) {
+    process.exit(result.status);
+  }
+};
+
+main();