@openhands/agent-canvas 1.0.0-alpha.8 → 1.0.0-alpha.9

package/dist/routes/conversation.js

@@ -9,88 +9,86 @@ import { useConversationStateStore as s } from "../stores/conversation-state-sto
 import { useActiveBackend as c } from "../contexts/active-backend-context.js";
 import { clearLastConversationId as l, setLastConversationId as u } from "../api/backend-registry/last-conversation-store.js";
 import { displayErrorToast as d } from "../utils/custom-toast-handlers.js";
-import { useEventStore as f } from "../stores/use-event-store.js";
-import { useErrorMessageStore as p } from "../stores/error-message-store.js";
-import { resumeCloudSandbox as m } from "../api/cloud/conversation-service.api.js";
-import { useActiveConversation as h } from "../hooks/query/use-active-conversation.js";
-import { EventHandler as g } from "../wrapper/event-handler.js";
-import { useTaskPolling as _ } from "../hooks/query/use-task-polling.js";
-import { useIsAuthed as v } from "../hooks/query/use-is-authed.js";
-import { ConversationMain as y, ConversationMobilePanelPage as b } from "../components/features/conversation/conversation-main/conversation-main.js";
-import { WebSocketProviderWrapper as x } from "../contexts/websocket-provider-wrapper.js";
-import S from "react";
-import { jsx as C } from "react/jsx-runtime";
-import { useLocation as w, useMatch as T, useNavigate as E } from "react-router";
+import { useErrorMessageStore as f } from "../stores/error-message-store.js";
+import { resumeCloudSandbox as p } from "../api/cloud/conversation-service.api.js";
+import { useActiveConversation as m } from "../hooks/query/use-active-conversation.js";
+import { EventHandler as h } from "../wrapper/event-handler.js";
+import { useTaskPolling as g } from "../hooks/query/use-task-polling.js";
+import { useIsAuthed as _ } from "../hooks/query/use-is-authed.js";
+import { ConversationMain as v, ConversationMobilePanelPage as y } from "../components/features/conversation/conversation-main/conversation-main.js";
+import { WebSocketProviderWrapper as b } from "../contexts/websocket-provider-wrapper.js";
+import x from "react";
+import { jsx as S } from "react/jsx-runtime";
+import { useLocation as C, useMatch as w, useNavigate as T } from "react-router";
 //#region src/routes/conversation.tsx
-function D() {
-	let { t: D } = e("openhands"), { conversationId: O } = r(), k = T("/conversations/:conversationId/panel"), A = f((e) => e.clearEvents), { isTask: j, taskStatus: M, taskDetail: N } = _(), P = c(), F = S.useRef(P.backend.id), I = S.useRef(P.orgId), L = F.current !== P.backend.id || I.current !== P.orgId, { data: R, isFetched: z } = h(), { data: B } = v(), { resetConversationState: V } = a(), H = E(), U = w(), W = i((e) => e.clearTerminal), G = s((e) => e.reset), K = o((e) => e.setCurrentAgentState), q = p((e) => e.removeErrorMessage);
-	S.useEffect(() => {
-		W(), V(), G(), K(n.LOADING), q(), A();
+function E() {
+	let { t: E } = e("openhands"), { conversationId: D } = r(), O = w("/conversations/:conversationId/panel"), { isTask: k, taskStatus: A, taskDetail: j } = g(), M = c(), N = x.useRef(M.backend.id), P = x.useRef(M.orgId), F = N.current !== M.backend.id || P.current !== M.orgId, { data: I, isFetched: L } = m(), { data: R } = _(), { resetConversationState: z } = a(), B = T(), V = C(), H = i((e) => e.clearTerminal), U = s((e) => e.reset), W = o((e) => e.setCurrentAgentState), G = f((e) => e.removeErrorMessage);
+	x.useEffect(() => {
+		H(), z(), U(), W(n.LOADING), G();
 	}, [
-		O,
+		D,
+		H,
+		z,
+		U,
 		W,
-		V,
-		G,
-		K,
-		q,
-		A
-	]), S.useEffect(() => {
-		if (j && M === "ERROR") {
-			d(N || D(t.CONVERSATION$FAILED_TO_START_FROM_TASK));
-			let e = U.state?.resumedFromConversationId;
-			H(e ? `/conversations/${e}` : "/conversations", { replace: !0 });
+		G
+	]), x.useEffect(() => {
+		if (k && A === "ERROR") {
+			d(j || E(t.CONVERSATION$FAILED_TO_START_FROM_TASK));
+			let e = V.state?.resumedFromConversationId;
+			B(e ? `/conversations/${e}` : "/conversations", { replace: !0 });
 		}
 	}, [
+		k,
+		A,
 		j,
-		M,
-		N,
-		D,
-		H,
-		U.state
-	]), S.useEffect(() => {
-		!z || !B || L || R || (l(P.backend.id, P.orgId), d(D(t.CONVERSATION$NOT_EXIST_OR_NO_PERMISSION)), H("/conversations"));
+		E,
+		B,
+		V.state
+	]), x.useEffect(() => {
+		!L || !R || F || I || (l(M.backend.id, M.orgId), d(E(t.CONVERSATION$NOT_EXIST_OR_NO_PERMISSION)), B("/conversations"));
 	}, [
+		I,
+		L,
 		R,
-		z,
 		B,
-		H,
-		D,
-		L,
-		P.backend.id,
-		P.orgId
-	]), S.useEffect(() => {
-		L || O && (O.startsWith("task-") || u(P.backend.id, P.orgId, O));
+		E,
+		F,
+		M.backend.id,
+		M.orgId
+	]), x.useEffect(() => {
+		F || D && (D.startsWith("task-") || u(M.backend.id, M.orgId, D));
 	}, [
-		O,
-		L,
-		P.backend.id,
-		P.orgId
+		D,
+		F,
+		M.backend.id,
+		M.orgId
 	]);
-	let J = S.useRef(null);
-	return S.useEffect(() => {
-		!z || !R || P.backend.kind === "cloud" && R.sandbox_status === "PAUSED" && R.sandbox_id && J.current !== R.id && (J.current = R.id, m(R.sandbox_id).catch(() => {
-			d(D(t.CONVERSATION$FAILED_TO_START_FROM_TASK));
+	let K = x.useRef(null);
+	return x.useEffect(() => {
+		!L || !I || M.backend.kind === "cloud" && I.sandbox_status === "PAUSED" && I.sandbox_id && K.current !== I.id && (K.current = I.id, p(I.sandbox_id).catch(() => {
+			d(E(t.CONVERSATION$FAILED_TO_START_FROM_TASK));
 		}));
 	}, [
-		z,
-		R?.id,
-		R?.sandbox_status,
-		R?.sandbox_id,
-		P.backend.kind,
-		D
-	]), /* @__PURE__ */ C(x, {
-		conversationId: O,
-		children: /* @__PURE__ */ C(g, { children: /* @__PURE__ */ C("div", {
+		L,
+		I?.id,
+		I?.sandbox_status,
+		I?.sandbox_id,
+		M.backend.kind,
+		E
+	]), /* @__PURE__ */ S(b, {
+		conversationId: D,
+		children: /* @__PURE__ */ S(h, { children: /* @__PURE__ */ S("div", {
 			"data-testid": "app-route",
 			className: "flex h-full flex-col",
-			children: k ? /* @__PURE__ */ C(b, { onNavigateBack: () => H(`/conversations/${O}`) }) : /* @__PURE__ */ C(y, {})
+			children: O ? /* @__PURE__ */ S(y, { onNavigateBack: () => B(`/conversations/${D}`) }) : /* @__PURE__ */ S(v, {})
 		}) })
 	});
 }
-function O() {
-	return /* @__PURE__ */ C(D, {});
+function D() {
+	return /* @__PURE__ */ S(E, {});
 }
 //#endregion
-export { O as default };
+export { D as default };
 
 //# sourceMappingURL=conversation.js.map

package/dist/routes/conversation.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.js","names":[],"sources":["../../src/routes/conversation.tsx"],"sourcesContent":["import React from \"react\";\nimport { useNavigate, useLocation, useMatch } from \"react-router\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useCommandStore } from \"#/stores/command-store\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentStore } from \"#/stores/agent-store\";\nimport { useConversationStateStore } from \"#/stores/conversation-state-store\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport {\n  clearLastConversationId,\n  setLastConversationId,\n} from \"#/api/backend-registry/last-conversation-store\";\nimport { AgentState } from \"#/types/agent-state\";\n\nimport { EventHandler } from \"../wrapper/event-handler\";\n\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\n\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { useIsAuthed } from \"#/hooks/query/use-is-authed\";\nimport {\n  ConversationMain,\n  ConversationMobilePanelPage,\n} from \"#/components/features/conversation/conversation-main/conversation-main\";\n\nimport { WebSocketProviderWrapper } from \"#/contexts/websocket-provider-wrapper\";\nimport { useErrorMessageStore } from \"#/stores/error-message-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useEventStore } from \"#/stores/use-event-store\";\nimport { resumeCloudSandbox } from \"#/api/cloud/conversation-service.api\";\n\nfunction AppContent() {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useConversationId();\n  const panelViewMatch = useMatch(\"/conversations/:conversationId/panel\");\n  const clearEvents = useEventStore((state) => state.clearEvents);\n\n  const { isTask, taskStatus, taskDetail } = useTaskPolling();\n\n  // The conversationId in the URL belongs to whichever backend was\n  // active when the route first mounted. If the user switches backends\n  // while this route is still mounted, the id is meaningless under the\n  // new backend — disable the active-conversation fetch (and its 404\n  // toast) so we don't fire a request that the BackendSelector's\n  // redirect will immediately navigate away from anyway. Mirrors the\n  // same guard in `routes/automation-detail.tsx`.\n  const active = useActiveBackend();\n  const mountedBackendId = React.useRef(active.backend.id);\n  const mountedOrgId = React.useRef(active.orgId);\n  const backendChanged =\n    mountedBackendId.current !== active.backend.id ||\n    mountedOrgId.current !== active.orgId;\n\n  const { data: conversation, isFetched } = useActiveConversation();\n  const { data: isAuthed } = useIsAuthed();\n  const { resetConversationState } = useConversationStore();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const clearTerminal = useCommandStore((state) => state.clearTerminal);\n  const resetConversationRuntimeState = useConversationStateStore(\n    (state) => state.reset,\n  );\n  const setCurrentAgentState = useAgentStore(\n    (state) => state.setCurrentAgentState,\n  );\n  const removeErrorMessage = useErrorMessageStore(\n    (state) => state.removeErrorMessage,\n  );\n\n  React.useEffect(() => {\n    clearTerminal();\n    resetConversationState();\n    resetConversationRuntimeState();\n    setCurrentAgentState(AgentState.LOADING);\n    removeErrorMessage();\n    clearEvents();\n  }, [\n    conversationId,\n    clearTerminal,\n    resetConversationState,\n    resetConversationRuntimeState,\n    setCurrentAgentState,\n    removeErrorMessage,\n    clearEvents,\n  ]);\n\n  React.useEffect(() => {\n    if (isTask && taskStatus === \"ERROR\") {\n      displayErrorToast(\n        taskDetail || t(I18nKey.CONVERSATION$FAILED_TO_START_FROM_TASK),\n      );\n      // Navigate back to the original conversation when a resume task fails so\n      // the user isn't stranded at the dead task-{id} URL. The resume effect's\n      // ref prevents it from immediately retrying once we land there.\n      const resumedFrom = (location.state as Record<string, unknown> | null)\n        ?.resumedFromConversationId as string | undefined;\n      navigate(\n        resumedFrom ? `/conversations/${resumedFrom}` : \"/conversations\",\n        { replace: true },\n      );\n    }\n  }, [isTask, taskStatus, taskDetail, t, navigate, location.state]);\n\n  React.useEffect(() => {\n    if (!isFetched || !isAuthed) return;\n    // The BackendSelector is in the middle of redirecting us away from\n    // this route — don't toast/navigate based on a 404 that's just\n    // \"this id doesn't exist on the new backend\".\n    if (backendChanged) return;\n\n    if (!conversation) {\n      // Clear the per-backend \"last selected\" slot so the next switch\n      // to this backend doesn't try to revisit a stale id.\n      clearLastConversationId(active.backend.id, active.orgId);\n      displayErrorToast(t(I18nKey.CONVERSATION$NOT_EXIST_OR_NO_PERMISSION));\n      navigate(\"/conversations\");\n    }\n  }, [\n    conversation,\n    isFetched,\n    isAuthed,\n    navigate,\n    t,\n    backendChanged,\n    active.backend.id,\n    active.orgId,\n  ]);\n\n  // Remember the most recently selected conversation for the current\n  // (backend, org) so flipping back to this backend later restores the\n  // user to where they left off. Skip while a backend switch is in\n  // flight: the id in the URL is from the previous backend and would\n  // otherwise overwrite the new backend's memory.\n  React.useEffect(() => {\n    if (backendChanged) return;\n    if (!conversationId) return;\n    if (conversationId.startsWith(\"task-\")) return;\n    setLastConversationId(active.backend.id, active.orgId, conversationId);\n  }, [conversationId, backendChanged, active.backend.id, active.orgId]);\n\n  // Cloud conversation resume: mirrors OpenHands' useSandboxRecovery.\n  //\n  // When the cloud API reports sandbox_status === \"PAUSED\" the sandbox is\n  // sleeping. The correct wake-up call is POST /api/v1/sandboxes/{id}/resume\n  // (a lightweight unpause). The previous approach — creating a new start task\n  // via POST /api/v1/app-conversations — was wrong: it tries to provision a\n  // fresh conversation in the sandbox and is subject to a 120-second cold-start\n  // timeout that can fail. The resume endpoint simply unpauses the existing one.\n  //\n  // After calling resume we stay on the current URL. The 3-second refetch\n  // interval in useActiveConversation (active while conversation_url is null)\n  // polls until conversation_url populates, then the WebSocket connects.\n  //\n  // A ref guards against duplicate triggers per unique conversation.id within\n  // the same route-mount lifetime.\n  const resumeTriggeredForRef = React.useRef<string | null>(null);\n  React.useEffect(() => {\n    if (!isFetched || !conversation) return;\n    if (active.backend.kind !== \"cloud\") return;\n    if (conversation.sandbox_status !== \"PAUSED\") return; // only resume PAUSED sandboxes\n    if (!conversation.sandbox_id) return; // no sandbox to resume\n    if (resumeTriggeredForRef.current === conversation.id) return; // already sent\n\n    resumeTriggeredForRef.current = conversation.id;\n\n    resumeCloudSandbox(conversation.sandbox_id).catch(() => {\n      displayErrorToast(t(I18nKey.CONVERSATION$FAILED_TO_START_FROM_TASK));\n    });\n  }, [\n    isFetched,\n    conversation?.id,\n    conversation?.sandbox_status,\n    conversation?.sandbox_id,\n    active.backend.kind,\n    t,\n  ]);\n\n  const content = (\n    <EventHandler>\n      <div data-testid=\"app-route\" className=\"flex h-full flex-col\">\n        {panelViewMatch ? (\n          <ConversationMobilePanelPage\n            onNavigateBack={() => navigate(`/conversations/${conversationId}`)}\n          />\n        ) : (\n          <ConversationMain />\n        )}\n      </div>\n    </EventHandler>\n  );\n\n  return (\n    <WebSocketProviderWrapper conversationId={conversationId}>\n      {content}\n    </WebSocketProviderWrapper>\n  );\n}\n\nexport function ConversationView() {\n  return <AppContent />;\n}\n\nexport default ConversationView;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAS,IAAa;CACpB,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,sBAAmB,GAAmB,EACxC,IAAiB,EAAS,uCAAuC,EACjE,IAAc,GAAe,MAAU,EAAM,YAAY,EAEzD,EAAE,WAAQ,eAAY,kBAAe,GAAgB,EASrD,IAAS,GAAkB,EAC3B,IAAmB,EAAM,OAAO,EAAO,QAAQ,GAAG,EAClD,IAAe,EAAM,OAAO,EAAO,MAAM,EACzC,IACJ,EAAiB,YAAY,EAAO,QAAQ,MAC5C,EAAa,YAAY,EAAO,OAE5B,EAAE,MAAM,GAAc,iBAAc,GAAuB,EAC3D,EAAE,MAAM,MAAa,GAAa,EAClC,EAAE,8BAA2B,GAAsB,EACnD,IAAW,GAAa,EACxB,IAAW,GAAa,EACxB,IAAgB,GAAiB,MAAU,EAAM,cAAc,EAC/D,IAAgC,GACnC,MAAU,EAAM,MAClB,EACK,IAAuB,GAC1B,MAAU,EAAM,qBAClB,EACK,IAAqB,GACxB,MAAU,EAAM,mBAClB;AAkED,CAhEA,EAAM,gBAAgB;AAMpB,EALA,GAAe,EACf,GAAwB,EACxB,GAA+B,EAC/B,EAAqB,EAAW,QAAQ,EACxC,GAAoB,EACpB,GAAa;IACZ;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EAEF,EAAM,gBAAgB;AACpB,MAAI,KAAU,MAAe,SAAS;AACpC,KACE,KAAc,EAAE,EAAQ,uCAAuC,CAChE;GAID,IAAM,IAAe,EAAS,OAC1B;AACJ,KACE,IAAc,kBAAkB,MAAgB,kBAChD,EAAE,SAAS,IAAM,CAClB;;IAEF;EAAC;EAAQ;EAAY;EAAY;EAAG;EAAU,EAAS;EAAM,CAAC,EAEjE,EAAM,gBAAgB;AAChB,GAAC,KAAa,CAAC,KAIf,KAEC,MAGH,EAAwB,EAAO,QAAQ,IAAI,EAAO,MAAM,EACxD,EAAkB,EAAE,EAAQ,wCAAwC,CAAC,EACrE,EAAS,iBAAiB;IAE3B;EACD;EACA;EACA;EACA;EACA;EACA;EACA,EAAO,QAAQ;EACf,EAAO;EACR,CAAC,EAOF,EAAM,gBAAgB;AAChB,OACC,MACD,EAAe,WAAW,QAAQ,IACtC,EAAsB,EAAO,QAAQ,IAAI,EAAO,OAAO,EAAe;IACrE;EAAC;EAAgB;EAAgB,EAAO,QAAQ;EAAI,EAAO;EAAM,CAAC;CAiBrE,IAAM,IAAwB,EAAM,OAAsB,KAAK;AAoC/D,QAnCA,EAAM,gBAAgB;AAChB,GAAC,KAAa,CAAC,KACf,EAAO,QAAQ,SAAS,WACxB,EAAa,mBAAmB,YAC/B,EAAa,cACd,EAAsB,YAAY,EAAa,OAEnD,EAAsB,UAAU,EAAa,IAE7C,EAAmB,EAAa,WAAW,CAAC,YAAY;AACtD,KAAkB,EAAE,EAAQ,uCAAuC,CAAC;IACpE;IACD;EACD;EACA,GAAc;EACd,GAAc;EACd,GAAc;EACd,EAAO,QAAQ;EACf;EACD,CAAC,EAiBA,kBAAC,GAAD;EAA0C;YAd1C,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;GAAK,eAAY;GAAY,WAAU;aACpC,IACC,kBAAC,GAAD,EACE,sBAAsB,EAAS,kBAAkB,IAAiB,EAClE,CAAA,GAEF,kBAAC,GAAD,EAAoB,CAAA;GAElB,CAAA,EACO,CAKZ;EACwB,CAAA;;AAI/B,SAAgB,IAAmB;AACjC,QAAO,kBAAC,GAAD,EAAc,CAAA"}
+{"version":3,"file":"conversation.js","names":[],"sources":["../../src/routes/conversation.tsx"],"sourcesContent":["import React from \"react\";\nimport { useNavigate, useLocation, useMatch } from \"react-router\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useCommandStore } from \"#/stores/command-store\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentStore } from \"#/stores/agent-store\";\nimport { useConversationStateStore } from \"#/stores/conversation-state-store\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport {\n  clearLastConversationId,\n  setLastConversationId,\n} from \"#/api/backend-registry/last-conversation-store\";\nimport { AgentState } from \"#/types/agent-state\";\n\nimport { EventHandler } from \"../wrapper/event-handler\";\n\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\n\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { useIsAuthed } from \"#/hooks/query/use-is-authed\";\nimport {\n  ConversationMain,\n  ConversationMobilePanelPage,\n} from \"#/components/features/conversation/conversation-main/conversation-main\";\n\nimport { WebSocketProviderWrapper } from \"#/contexts/websocket-provider-wrapper\";\nimport { useErrorMessageStore } from \"#/stores/error-message-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { resumeCloudSandbox } from \"#/api/cloud/conversation-service.api\";\n\nfunction AppContent() {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useConversationId();\n  const panelViewMatch = useMatch(\"/conversations/:conversationId/panel\");\n\n  const { isTask, taskStatus, taskDetail } = useTaskPolling();\n\n  // The conversationId in the URL belongs to whichever backend was\n  // active when the route first mounted. If the user switches backends\n  // while this route is still mounted, the id is meaningless under the\n  // new backend — disable the active-conversation fetch (and its 404\n  // toast) so we don't fire a request that the BackendSelector's\n  // redirect will immediately navigate away from anyway. Mirrors the\n  // same guard in `routes/automation-detail.tsx`.\n  const active = useActiveBackend();\n  const mountedBackendId = React.useRef(active.backend.id);\n  const mountedOrgId = React.useRef(active.orgId);\n  const backendChanged =\n    mountedBackendId.current !== active.backend.id ||\n    mountedOrgId.current !== active.orgId;\n\n  const { data: conversation, isFetched } = useActiveConversation();\n  const { data: isAuthed } = useIsAuthed();\n  const { resetConversationState } = useConversationStore();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const clearTerminal = useCommandStore((state) => state.clearTerminal);\n  const resetConversationRuntimeState = useConversationStateStore(\n    (state) => state.reset,\n  );\n  const setCurrentAgentState = useAgentStore(\n    (state) => state.setCurrentAgentState,\n  );\n  const removeErrorMessage = useErrorMessageStore(\n    (state) => state.removeErrorMessage,\n  );\n\n  // Per-conversation UI/runtime resets. The event store is cleared separately,\n  // inside ConversationWebSocketProvider, so the clear is ordered *before* the\n  // preloaded-history re-seed (see the note there) — clearing it here would run\n  // too late and wipe the freshly seeded history on a conversation switch.\n  React.useEffect(() => {\n    clearTerminal();\n    resetConversationState();\n    resetConversationRuntimeState();\n    setCurrentAgentState(AgentState.LOADING);\n    removeErrorMessage();\n  }, [\n    conversationId,\n    clearTerminal,\n    resetConversationState,\n    resetConversationRuntimeState,\n    setCurrentAgentState,\n    removeErrorMessage,\n  ]);\n\n  React.useEffect(() => {\n    if (isTask && taskStatus === \"ERROR\") {\n      displayErrorToast(\n        taskDetail || t(I18nKey.CONVERSATION$FAILED_TO_START_FROM_TASK),\n      );\n      // Navigate back to the original conversation when a resume task fails so\n      // the user isn't stranded at the dead task-{id} URL. The resume effect's\n      // ref prevents it from immediately retrying once we land there.\n      const resumedFrom = (location.state as Record<string, unknown> | null)\n        ?.resumedFromConversationId as string | undefined;\n      navigate(\n        resumedFrom ? `/conversations/${resumedFrom}` : \"/conversations\",\n        { replace: true },\n      );\n    }\n  }, [isTask, taskStatus, taskDetail, t, navigate, location.state]);\n\n  React.useEffect(() => {\n    if (!isFetched || !isAuthed) return;\n    // The BackendSelector is in the middle of redirecting us away from\n    // this route — don't toast/navigate based on a 404 that's just\n    // \"this id doesn't exist on the new backend\".\n    if (backendChanged) return;\n\n    if (!conversation) {\n      // Clear the per-backend \"last selected\" slot so the next switch\n      // to this backend doesn't try to revisit a stale id.\n      clearLastConversationId(active.backend.id, active.orgId);\n      displayErrorToast(t(I18nKey.CONVERSATION$NOT_EXIST_OR_NO_PERMISSION));\n      navigate(\"/conversations\");\n    }\n  }, [\n    conversation,\n    isFetched,\n    isAuthed,\n    navigate,\n    t,\n    backendChanged,\n    active.backend.id,\n    active.orgId,\n  ]);\n\n  // Remember the most recently selected conversation for the current\n  // (backend, org) so flipping back to this backend later restores the\n  // user to where they left off. Skip while a backend switch is in\n  // flight: the id in the URL is from the previous backend and would\n  // otherwise overwrite the new backend's memory.\n  React.useEffect(() => {\n    if (backendChanged) return;\n    if (!conversationId) return;\n    if (conversationId.startsWith(\"task-\")) return;\n    setLastConversationId(active.backend.id, active.orgId, conversationId);\n  }, [conversationId, backendChanged, active.backend.id, active.orgId]);\n\n  // Cloud conversation resume: mirrors OpenHands' useSandboxRecovery.\n  //\n  // When the cloud API reports sandbox_status === \"PAUSED\" the sandbox is\n  // sleeping. The correct wake-up call is POST /api/v1/sandboxes/{id}/resume\n  // (a lightweight unpause). The previous approach — creating a new start task\n  // via POST /api/v1/app-conversations — was wrong: it tries to provision a\n  // fresh conversation in the sandbox and is subject to a 120-second cold-start\n  // timeout that can fail. The resume endpoint simply unpauses the existing one.\n  //\n  // After calling resume we stay on the current URL. The 3-second refetch\n  // interval in useActiveConversation (active while conversation_url is null)\n  // polls until conversation_url populates, then the WebSocket connects.\n  //\n  // A ref guards against duplicate triggers per unique conversation.id within\n  // the same route-mount lifetime.\n  const resumeTriggeredForRef = React.useRef<string | null>(null);\n  React.useEffect(() => {\n    if (!isFetched || !conversation) return;\n    if (active.backend.kind !== \"cloud\") return;\n    if (conversation.sandbox_status !== \"PAUSED\") return; // only resume PAUSED sandboxes\n    if (!conversation.sandbox_id) return; // no sandbox to resume\n    if (resumeTriggeredForRef.current === conversation.id) return; // already sent\n\n    resumeTriggeredForRef.current = conversation.id;\n\n    resumeCloudSandbox(conversation.sandbox_id).catch(() => {\n      displayErrorToast(t(I18nKey.CONVERSATION$FAILED_TO_START_FROM_TASK));\n    });\n  }, [\n    isFetched,\n    conversation?.id,\n    conversation?.sandbox_status,\n    conversation?.sandbox_id,\n    active.backend.kind,\n    t,\n  ]);\n\n  const content = (\n    <EventHandler>\n      <div data-testid=\"app-route\" className=\"flex h-full flex-col\">\n        {panelViewMatch ? (\n          <ConversationMobilePanelPage\n            onNavigateBack={() => navigate(`/conversations/${conversationId}`)}\n          />\n        ) : (\n          <ConversationMain />\n        )}\n      </div>\n    </EventHandler>\n  );\n\n  return (\n    <WebSocketProviderWrapper conversationId={conversationId}>\n      {content}\n    </WebSocketProviderWrapper>\n  );\n}\n\nexport function ConversationView() {\n  return <AppContent />;\n}\n\nexport default ConversationView;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAS,IAAa;CACpB,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,sBAAmB,GAAmB,EACxC,IAAiB,EAAS,uCAAuC,EAEjE,EAAE,WAAQ,eAAY,kBAAe,GAAgB,EASrD,IAAS,GAAkB,EAC3B,IAAmB,EAAM,OAAO,EAAO,QAAQ,GAAG,EAClD,IAAe,EAAM,OAAO,EAAO,MAAM,EACzC,IACJ,EAAiB,YAAY,EAAO,QAAQ,MAC5C,EAAa,YAAY,EAAO,OAE5B,EAAE,MAAM,GAAc,iBAAc,GAAuB,EAC3D,EAAE,MAAM,MAAa,GAAa,EAClC,EAAE,8BAA2B,GAAsB,EACnD,IAAW,GAAa,EACxB,IAAW,GAAa,EACxB,IAAgB,GAAiB,MAAU,EAAM,cAAc,EAC/D,IAAgC,GACnC,MAAU,EAAM,MAClB,EACK,IAAuB,GAC1B,MAAU,EAAM,qBAClB,EACK,IAAqB,GACxB,MAAU,EAAM,mBAClB;AAoED,CA9DA,EAAM,gBAAgB;AAKpB,EAJA,GAAe,EACf,GAAwB,EACxB,GAA+B,EAC/B,EAAqB,EAAW,QAAQ,EACxC,GAAoB;IACnB;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EAEF,EAAM,gBAAgB;AACpB,MAAI,KAAU,MAAe,SAAS;AACpC,KACE,KAAc,EAAE,EAAQ,uCAAuC,CAChE;GAID,IAAM,IAAe,EAAS,OAC1B;AACJ,KACE,IAAc,kBAAkB,MAAgB,kBAChD,EAAE,SAAS,IAAM,CAClB;;IAEF;EAAC;EAAQ;EAAY;EAAY;EAAG;EAAU,EAAS;EAAM,CAAC,EAEjE,EAAM,gBAAgB;AAChB,GAAC,KAAa,CAAC,KAIf,KAEC,MAGH,EAAwB,EAAO,QAAQ,IAAI,EAAO,MAAM,EACxD,EAAkB,EAAE,EAAQ,wCAAwC,CAAC,EACrE,EAAS,iBAAiB;IAE3B;EACD;EACA;EACA;EACA;EACA;EACA;EACA,EAAO,QAAQ;EACf,EAAO;EACR,CAAC,EAOF,EAAM,gBAAgB;AAChB,OACC,MACD,EAAe,WAAW,QAAQ,IACtC,EAAsB,EAAO,QAAQ,IAAI,EAAO,OAAO,EAAe;IACrE;EAAC;EAAgB;EAAgB,EAAO,QAAQ;EAAI,EAAO;EAAM,CAAC;CAiBrE,IAAM,IAAwB,EAAM,OAAsB,KAAK;AAoC/D,QAnCA,EAAM,gBAAgB;AAChB,GAAC,KAAa,CAAC,KACf,EAAO,QAAQ,SAAS,WACxB,EAAa,mBAAmB,YAC/B,EAAa,cACd,EAAsB,YAAY,EAAa,OAEnD,EAAsB,UAAU,EAAa,IAE7C,EAAmB,EAAa,WAAW,CAAC,YAAY;AACtD,KAAkB,EAAE,EAAQ,uCAAuC,CAAC;IACpE;IACD;EACD;EACA,GAAc;EACd,GAAc;EACd,GAAc;EACd,EAAO,QAAQ;EACf;EACD,CAAC,EAiBA,kBAAC,GAAD;EAA0C;YAd1C,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;GAAK,eAAY;GAAY,WAAU;aACpC,IACC,kBAAC,GAAD,EACE,sBAAsB,EAAS,kBAAkB,IAAiB,EAClE,CAAA,GAEF,kBAAC,GAAD,EAAoB,CAAA;GAElB,CAAA,EACO,CAKZ;EACwB,CAAA;;AAI/B,SAAgB,IAAmB;AACjC,QAAO,kBAAC,GAAD,EAAc,CAAA"}

package/dist/stores/use-event-store.cjs

@@ -1,2 +1,2 @@
-require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../node_modules/zustand/esm/react.cjs`),t=require(`../utils/handle-event-for-ui.cjs`);var n=e=>`id`in e?e.id:void 0,r=e=>`timestamp`in e?e.timestamp:void 0,i=(e,t)=>{let n=r(e),i=r(t);return!n&&!i?0:n?i?n.localeCompare(i):-1:1},a=(e,t)=>{if(e.length===0)return!1;let n=e[e.length-1],i=r(n),a=r(t);return!i||!a?!1:a<i},o=(e,r)=>{let i=n(r);if(i!==void 0&&e.eventIds.has(i))return e;let a=i===void 0?e.eventIds:new Set(e.eventIds).add(i);return{...e,events:[...e.events,r],eventIds:a,uiEvents:t.handleEventForUI(r,e.uiEvents)}},s=e=>({...e,events:[...e.events].sort(i),uiEvents:[...e.uiEvents].sort(i)}),c=(e,t)=>{let n=o(e,t);return n===e?e:!a(e.events,t)&&!a(e.uiEvents,t)?n:s(n)},l=e.create()(e=>({events:[],eventIds:new Set,uiEvents:[],addEvent:t=>e(e=>c(e,t)),addEvents:r=>e(e=>{if(r.length===0)return e;let i=new Set(e.eventIds),a=[...e.events],o=[...e.uiEvents],c=!1;for(let e of r){let r=n(e);r!==void 0&&i.has(r)||(c=!0,r!==void 0&&i.add(r),a.push(e),o=t.handleEventForUI(e,o))}return c?s({...e,events:a,eventIds:i,uiEvents:o}):e}),clearEvents:()=>e(()=>({events:[],eventIds:new Set,uiEvents:[]}))}));exports.useEventStore=l;
+require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../node_modules/zustand/esm/react.cjs`),t=require(`../utils/handle-event-for-ui.cjs`);var n=e=>`id`in e?e.id:void 0,r=e=>`timestamp`in e?e.timestamp:void 0,i=(e,t)=>{let n=r(e),i=r(t);return!n&&!i?0:n?i?n.localeCompare(i):-1:1},a=(e,t)=>{if(e.length===0)return!1;let n=e[e.length-1],i=r(n),a=r(t);return!i||!a?!1:a<i},o=(e,r)=>{let i=n(r);if(i!==void 0&&e.eventIds.has(i))return e;let a=i===void 0?e.eventIds:new Set(e.eventIds).add(i);return{...e,events:[...e.events,r],eventIds:a,uiEvents:t.handleEventForUI(r,e.uiEvents)}},s=e=>({...e,events:[...e.events].sort(i),uiEvents:[...e.uiEvents].sort(i)}),c=(e,t)=>{let n=o(e,t);return n===e?e:!a(e.events,t)&&!a(e.uiEvents,t)?n:s(n)},l=e.create()(e=>({events:[],eventIds:new Set,uiEvents:[],loadedConversationId:null,addEvent:t=>e(e=>c(e,t)),addEvents:r=>e(e=>{if(r.length===0)return e;let i=new Set(e.eventIds),a=[...e.events],o=[...e.uiEvents],c=!1;for(let e of r){let r=n(e);r!==void 0&&i.has(r)||(c=!0,r!==void 0&&i.add(r),a.push(e),o=t.handleEventForUI(e,o))}return c?s({...e,events:a,eventIds:i,uiEvents:o}):e}),clearEvents:()=>e(()=>({events:[],eventIds:new Set,uiEvents:[],loadedConversationId:null})),clearEventsForConversation:t=>e(()=>({events:[],eventIds:new Set,uiEvents:[],loadedConversationId:t}))}));exports.useEventStore=l;
 //# sourceMappingURL=use-event-store.cjs.map

package/dist/stores/use-event-store.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-event-store.cjs","names":[],"sources":["../../src/stores/use-event-store.ts"],"sourcesContent":["import { create } from \"zustand\";\nimport { OpenHandsEvent } from \"#/types/agent-server/core\";\nimport { handleEventForUI } from \"#/utils/handle-event-for-ui\";\n\nexport type OHEvent = OpenHandsEvent & {\n  isFromPlanningAgent?: boolean;\n};\n\nconst getEventId = (event: OHEvent): string | number | undefined =>\n  \"id\" in event ? event.id : undefined;\n\nconst getEventTimestamp = (event: OHEvent): string | undefined =>\n  \"timestamp\" in event ? event.timestamp : undefined;\n\n/**\n * Compare two events by timestamp for sorting.\n * Events without timestamps are placed at the end.\n */\nconst compareEventsByTimestamp = (a: OHEvent, b: OHEvent): number => {\n  const timestampA = getEventTimestamp(a);\n  const timestampB = getEventTimestamp(b);\n\n  // Events without timestamps go to the end\n  if (!timestampA && !timestampB) return 0;\n  if (!timestampA) return 1;\n  if (!timestampB) return -1;\n\n  // Compare ISO timestamp strings (lexicographic comparison works for ISO format)\n  return timestampA.localeCompare(timestampB);\n};\n\n/**\n * Check if the new event needs sorting (i.e., it's out of order).\n * Returns true if the new event's timestamp is earlier than the last event's timestamp.\n */\nconst needsSorting = (events: OHEvent[], newEvent: OHEvent): boolean => {\n  if (events.length === 0) return false;\n\n  const lastEvent = events[events.length - 1];\n  const lastTimestamp = getEventTimestamp(lastEvent);\n  const newTimestamp = getEventTimestamp(newEvent);\n\n  // If either event doesn't have a timestamp, don't sort\n  if (!lastTimestamp || !newTimestamp) return false;\n\n  // Sort needed if new event's timestamp is earlier than last event's timestamp\n  return newTimestamp < lastTimestamp;\n};\n\nexport interface EventState {\n  events: OHEvent[];\n  eventIds: Set<string | number>;\n  uiEvents: OHEvent[];\n  addEvent: (event: OHEvent) => void;\n  /**\n   * Bulk-insert events. Used for the initial REST history load and for\n   * \"scroll up to load older\" pagination. Newly-added events are de-duped\n   * against the existing store and the combined list is re-sorted by\n   * timestamp so older pages drop into the correct position.\n   */\n  addEvents: (events: OHEvent[]) => void;\n  clearEvents: () => void;\n}\n\nconst appendEvent = (state: EventState, event: OHEvent): EventState => {\n  // Deduplicate: skip if event with same id already exists (O(1) lookup)\n  const eventId = getEventId(event);\n  if (eventId !== undefined && state.eventIds.has(eventId)) {\n    return state;\n  }\n\n  const newEventIds =\n    eventId !== undefined\n      ? new Set(state.eventIds).add(eventId)\n      : state.eventIds;\n\n  return {\n    ...state,\n    events: [...state.events, event],\n    eventIds: newEventIds,\n    uiEvents: handleEventForUI(event, state.uiEvents),\n  };\n};\n\nconst sortEventState = (state: EventState): EventState => ({\n  ...state,\n  events: [...state.events].sort(compareEventsByTimestamp),\n  uiEvents: [...state.uiEvents].sort(compareEventsByTimestamp),\n});\n\nconst applyAddEvent = (state: EventState, event: OHEvent): EventState => {\n  const next = appendEvent(state, event);\n  if (next === state) {\n    return state;\n  }\n\n  if (\n    !needsSorting(state.events, event) &&\n    !needsSorting(state.uiEvents, event)\n  ) {\n    return next;\n  }\n\n  return sortEventState(next);\n};\n\nexport const useEventStore = create<EventState>()((set) => ({\n  events: [],\n  eventIds: new Set(),\n  uiEvents: [],\n  addEvent: (event: OHEvent) => set((state) => applyAddEvent(state, event)),\n  addEvents: (incoming: OHEvent[]) =>\n    set((state) => {\n      if (incoming.length === 0) return state;\n\n      const eventIds = new Set(state.eventIds);\n      const events = [...state.events];\n      let uiEvents = [...state.uiEvents];\n      let added = false;\n\n      for (const event of incoming) {\n        const eventId = getEventId(event);\n        const isDuplicate = eventId !== undefined && eventIds.has(eventId);\n\n        if (!isDuplicate) {\n          added = true;\n          if (eventId !== undefined) {\n            eventIds.add(eventId);\n          }\n          events.push(event);\n          uiEvents = handleEventForUI(event, uiEvents);\n        }\n      }\n\n      if (!added) {\n        return state;\n      }\n\n      return sortEventState({\n        ...state,\n        events,\n        eventIds,\n        uiEvents,\n      });\n    }),\n  clearEvents: () =>\n    set(() => ({\n      events: [],\n      eventIds: new Set(),\n      uiEvents: [],\n    })),\n}));\n\n// In dev builds, expose the store on `window` so that fixture/preview\n// scripts (e.g. .pr/issue-132 demo capture) can inject synthetic events\n// without round-tripping through the agent-server. Tree-shaken in\n// production builds via `import.meta.env.DEV`.\nif (\n  typeof window !== \"undefined\" &&\n  typeof import.meta !== \"undefined\" &&\n  (import.meta as { env?: { DEV?: boolean } }).env?.DEV\n) {\n  (\n    window as unknown as { __OH_EVENT_STORE__?: typeof useEventStore }\n  ).__OH_EVENT_STORE__ = useEventStore;\n}\n"],"mappings":"oJAQA,IAAM,EAAc,GAClB,OAAQ,EAAQ,EAAM,GAAK,IAAA,GAEvB,EAAqB,GACzB,cAAe,EAAQ,EAAM,UAAY,IAAA,GAMrC,GAA4B,EAAY,IAAuB,CACnE,IAAM,EAAa,EAAkB,EAAE,CACjC,EAAa,EAAkB,EAAE,CAQvC,MALI,CAAC,GAAc,CAAC,EAAmB,EAClC,EACA,EAGE,EAAW,cAAc,EAAW,CAHnB,GADA,GAWpB,GAAgB,EAAmB,IAA+B,CACtE,GAAI,EAAO,SAAW,EAAG,MAAO,GAEhC,IAAM,EAAY,EAAO,EAAO,OAAS,GACnC,EAAgB,EAAkB,EAAU,CAC5C,EAAe,EAAkB,EAAS,CAMhD,MAHI,CAAC,GAAiB,CAAC,EAAqB,GAGrC,EAAe,GAkBlB,GAAe,EAAmB,IAA+B,CAErE,IAAM,EAAU,EAAW,EAAM,CACjC,GAAI,IAAY,IAAA,IAAa,EAAM,SAAS,IAAI,EAAQ,CACtD,OAAO,EAGT,IAAM,EACJ,IAAY,IAAA,GAER,EAAM,SADN,IAAI,IAAI,EAAM,SAAS,CAAC,IAAI,EAAQ,CAG1C,MAAO,CACL,GAAG,EACH,OAAQ,CAAC,GAAG,EAAM,OAAQ,EAAM,CAChC,SAAU,EACV,SAAU,EAAA,iBAAiB,EAAO,EAAM,SAAS,CAClD,EAGG,EAAkB,IAAmC,CACzD,GAAG,EACH,OAAQ,CAAC,GAAG,EAAM,OAAO,CAAC,KAAK,EAAyB,CACxD,SAAU,CAAC,GAAG,EAAM,SAAS,CAAC,KAAK,EAAyB,CAC7D,EAEK,GAAiB,EAAmB,IAA+B,CACvE,IAAM,EAAO,EAAY,EAAO,EAAM,CAYtC,OAXI,IAAS,EACJ,EAIP,CAAC,EAAa,EAAM,OAAQ,EAAM,EAClC,CAAC,EAAa,EAAM,SAAU,EAAM,CAE7B,EAGF,EAAe,EAAK,EAGhB,EAAgB,EAAA,QAAoB,CAAE,IAAS,CAC1D,OAAQ,EAAE,CACV,SAAU,IAAI,IACd,SAAU,EAAE,CACZ,SAAW,GAAmB,EAAK,GAAU,EAAc,EAAO,EAAM,CAAC,CACzE,UAAY,GACV,EAAK,GAAU,CACb,GAAI,EAAS,SAAW,EAAG,OAAO,EAElC,IAAM,EAAW,IAAI,IAAI,EAAM,SAAS,CAClC,EAAS,CAAC,GAAG,EAAM,OAAO,CAC5B,EAAW,CAAC,GAAG,EAAM,SAAS,CAC9B,EAAQ,GAEZ,IAAK,IAAM,KAAS,EAAU,CAC5B,IAAM,EAAU,EAAW,EAAM,CACb,IAAY,IAAA,IAAa,EAAS,IAAI,EAAQ,GAGhE,EAAQ,GACJ,IAAY,IAAA,IACd,EAAS,IAAI,EAAQ,CAEvB,EAAO,KAAK,EAAM,CAClB,EAAW,EAAA,iBAAiB,EAAO,EAAS,EAQhD,OAJK,EAIE,EAAe,CACpB,GAAG,EACH,SACA,WACA,WACD,CAAC,CARO,GAST,CACJ,gBACE,OAAW,CACT,OAAQ,EAAE,CACV,SAAU,IAAI,IACd,SAAU,EAAE,CACb,EAAE,CACN,EAAE"}
+{"version":3,"file":"use-event-store.cjs","names":[],"sources":["../../src/stores/use-event-store.ts"],"sourcesContent":["import { create } from \"zustand\";\nimport { OpenHandsEvent } from \"#/types/agent-server/core\";\nimport { handleEventForUI } from \"#/utils/handle-event-for-ui\";\n\nexport type OHEvent = OpenHandsEvent & {\n  isFromPlanningAgent?: boolean;\n};\n\nconst getEventId = (event: OHEvent): string | number | undefined =>\n  \"id\" in event ? event.id : undefined;\n\nconst getEventTimestamp = (event: OHEvent): string | undefined =>\n  \"timestamp\" in event ? event.timestamp : undefined;\n\n/**\n * Compare two events by timestamp for sorting.\n * Events without timestamps are placed at the end.\n */\nconst compareEventsByTimestamp = (a: OHEvent, b: OHEvent): number => {\n  const timestampA = getEventTimestamp(a);\n  const timestampB = getEventTimestamp(b);\n\n  // Events without timestamps go to the end\n  if (!timestampA && !timestampB) return 0;\n  if (!timestampA) return 1;\n  if (!timestampB) return -1;\n\n  // Compare ISO timestamp strings (lexicographic comparison works for ISO format)\n  return timestampA.localeCompare(timestampB);\n};\n\n/**\n * Check if the new event needs sorting (i.e., it's out of order).\n * Returns true if the new event's timestamp is earlier than the last event's timestamp.\n */\nconst needsSorting = (events: OHEvent[], newEvent: OHEvent): boolean => {\n  if (events.length === 0) return false;\n\n  const lastEvent = events[events.length - 1];\n  const lastTimestamp = getEventTimestamp(lastEvent);\n  const newTimestamp = getEventTimestamp(newEvent);\n\n  // If either event doesn't have a timestamp, don't sort\n  if (!lastTimestamp || !newTimestamp) return false;\n\n  // Sort needed if new event's timestamp is earlier than last event's timestamp\n  return newTimestamp < lastTimestamp;\n};\n\nexport interface EventState {\n  events: OHEvent[];\n  eventIds: Set<string | number>;\n  uiEvents: OHEvent[];\n  /**\n   * The conversation whose events currently populate the store. The store is\n   * global (not keyed by conversation), so the conversation route uses this to\n   * tell a genuine conversation switch apart from a remount of the *same*\n   * conversation (e.g. navigating to Settings and back) — only the former\n   * should clear the accumulated events.\n   */\n  loadedConversationId: string | null;\n  addEvent: (event: OHEvent) => void;\n  /**\n   * Bulk-insert events. Used for the initial REST history load and for\n   * \"scroll up to load older\" pagination. Newly-added events are de-duped\n   * against the existing store and the combined list is re-sorted by\n   * timestamp so older pages drop into the correct position.\n   */\n  addEvents: (events: OHEvent[]) => void;\n  /**\n   * Clear all events. Also resets `loadedConversationId` to `null` so the\n   * store never claims to hold a conversation whose events have been wiped —\n   * the invariant (`loadedConversationId` reflects the conversation whose\n   * events are in the arrays) holds even for a standalone clear.\n   */\n  clearEvents: () => void;\n  /**\n   * Atomically clear all events and record which conversation is now loaded.\n   * Collapsing the reset and the bookkeeping into a single `set` keeps the\n   * store invariant enforced at the boundary, rather than relying on every\n   * call-site to invoke a clear and a `loadedConversationId` setter in the\n   * right order.\n   */\n  clearEventsForConversation: (conversationId: string | null) => void;\n}\n\nconst appendEvent = (state: EventState, event: OHEvent): EventState => {\n  // Deduplicate: skip if event with same id already exists (O(1) lookup)\n  const eventId = getEventId(event);\n  if (eventId !== undefined && state.eventIds.has(eventId)) {\n    return state;\n  }\n\n  const newEventIds =\n    eventId !== undefined\n      ? new Set(state.eventIds).add(eventId)\n      : state.eventIds;\n\n  return {\n    ...state,\n    events: [...state.events, event],\n    eventIds: newEventIds,\n    uiEvents: handleEventForUI(event, state.uiEvents),\n  };\n};\n\nconst sortEventState = (state: EventState): EventState => ({\n  ...state,\n  events: [...state.events].sort(compareEventsByTimestamp),\n  uiEvents: [...state.uiEvents].sort(compareEventsByTimestamp),\n});\n\nconst applyAddEvent = (state: EventState, event: OHEvent): EventState => {\n  const next = appendEvent(state, event);\n  if (next === state) {\n    return state;\n  }\n\n  if (\n    !needsSorting(state.events, event) &&\n    !needsSorting(state.uiEvents, event)\n  ) {\n    return next;\n  }\n\n  return sortEventState(next);\n};\n\nexport const useEventStore = create<EventState>()((set) => ({\n  events: [],\n  eventIds: new Set(),\n  uiEvents: [],\n  loadedConversationId: null,\n  addEvent: (event: OHEvent) => set((state) => applyAddEvent(state, event)),\n  addEvents: (incoming: OHEvent[]) =>\n    set((state) => {\n      if (incoming.length === 0) return state;\n\n      const eventIds = new Set(state.eventIds);\n      const events = [...state.events];\n      let uiEvents = [...state.uiEvents];\n      let added = false;\n\n      for (const event of incoming) {\n        const eventId = getEventId(event);\n        const isDuplicate = eventId !== undefined && eventIds.has(eventId);\n\n        if (!isDuplicate) {\n          added = true;\n          if (eventId !== undefined) {\n            eventIds.add(eventId);\n          }\n          events.push(event);\n          uiEvents = handleEventForUI(event, uiEvents);\n        }\n      }\n\n      if (!added) {\n        return state;\n      }\n\n      return sortEventState({\n        ...state,\n        events,\n        eventIds,\n        uiEvents,\n      });\n    }),\n  clearEvents: () =>\n    set(() => ({\n      events: [],\n      eventIds: new Set(),\n      uiEvents: [],\n      loadedConversationId: null,\n    })),\n  clearEventsForConversation: (conversationId: string | null) =>\n    set(() => ({\n      events: [],\n      eventIds: new Set(),\n      uiEvents: [],\n      loadedConversationId: conversationId,\n    })),\n}));\n\n// In dev builds, expose the store on `window` so that fixture/preview\n// scripts (e.g. .pr/issue-132 demo capture) can inject synthetic events\n// without round-tripping through the agent-server. Tree-shaken in\n// production builds via `import.meta.env.DEV`.\nif (\n  typeof window !== \"undefined\" &&\n  typeof import.meta !== \"undefined\" &&\n  (import.meta as { env?: { DEV?: boolean } }).env?.DEV\n) {\n  (\n    window as unknown as { __OH_EVENT_STORE__?: typeof useEventStore }\n  ).__OH_EVENT_STORE__ = useEventStore;\n}\n"],"mappings":"oJAQA,IAAM,EAAc,GAClB,OAAQ,EAAQ,EAAM,GAAK,IAAA,GAEvB,EAAqB,GACzB,cAAe,EAAQ,EAAM,UAAY,IAAA,GAMrC,GAA4B,EAAY,IAAuB,CACnE,IAAM,EAAa,EAAkB,EAAE,CACjC,EAAa,EAAkB,EAAE,CAQvC,MALI,CAAC,GAAc,CAAC,EAAmB,EAClC,EACA,EAGE,EAAW,cAAc,EAAW,CAHnB,GADA,GAWpB,GAAgB,EAAmB,IAA+B,CACtE,GAAI,EAAO,SAAW,EAAG,MAAO,GAEhC,IAAM,EAAY,EAAO,EAAO,OAAS,GACnC,EAAgB,EAAkB,EAAU,CAC5C,EAAe,EAAkB,EAAS,CAMhD,MAHI,CAAC,GAAiB,CAAC,EAAqB,GAGrC,EAAe,GAwClB,GAAe,EAAmB,IAA+B,CAErE,IAAM,EAAU,EAAW,EAAM,CACjC,GAAI,IAAY,IAAA,IAAa,EAAM,SAAS,IAAI,EAAQ,CACtD,OAAO,EAGT,IAAM,EACJ,IAAY,IAAA,GAER,EAAM,SADN,IAAI,IAAI,EAAM,SAAS,CAAC,IAAI,EAAQ,CAG1C,MAAO,CACL,GAAG,EACH,OAAQ,CAAC,GAAG,EAAM,OAAQ,EAAM,CAChC,SAAU,EACV,SAAU,EAAA,iBAAiB,EAAO,EAAM,SAAS,CAClD,EAGG,EAAkB,IAAmC,CACzD,GAAG,EACH,OAAQ,CAAC,GAAG,EAAM,OAAO,CAAC,KAAK,EAAyB,CACxD,SAAU,CAAC,GAAG,EAAM,SAAS,CAAC,KAAK,EAAyB,CAC7D,EAEK,GAAiB,EAAmB,IAA+B,CACvE,IAAM,EAAO,EAAY,EAAO,EAAM,CAYtC,OAXI,IAAS,EACJ,EAIP,CAAC,EAAa,EAAM,OAAQ,EAAM,EAClC,CAAC,EAAa,EAAM,SAAU,EAAM,CAE7B,EAGF,EAAe,EAAK,EAGhB,EAAgB,EAAA,QAAoB,CAAE,IAAS,CAC1D,OAAQ,EAAE,CACV,SAAU,IAAI,IACd,SAAU,EAAE,CACZ,qBAAsB,KACtB,SAAW,GAAmB,EAAK,GAAU,EAAc,EAAO,EAAM,CAAC,CACzE,UAAY,GACV,EAAK,GAAU,CACb,GAAI,EAAS,SAAW,EAAG,OAAO,EAElC,IAAM,EAAW,IAAI,IAAI,EAAM,SAAS,CAClC,EAAS,CAAC,GAAG,EAAM,OAAO,CAC5B,EAAW,CAAC,GAAG,EAAM,SAAS,CAC9B,EAAQ,GAEZ,IAAK,IAAM,KAAS,EAAU,CAC5B,IAAM,EAAU,EAAW,EAAM,CACb,IAAY,IAAA,IAAa,EAAS,IAAI,EAAQ,GAGhE,EAAQ,GACJ,IAAY,IAAA,IACd,EAAS,IAAI,EAAQ,CAEvB,EAAO,KAAK,EAAM,CAClB,EAAW,EAAA,iBAAiB,EAAO,EAAS,EAQhD,OAJK,EAIE,EAAe,CACpB,GAAG,EACH,SACA,WACA,WACD,CAAC,CARO,GAST,CACJ,gBACE,OAAW,CACT,OAAQ,EAAE,CACV,SAAU,IAAI,IACd,SAAU,EAAE,CACZ,qBAAsB,KACvB,EAAE,CACL,2BAA6B,GAC3B,OAAW,CACT,OAAQ,EAAE,CACV,SAAU,IAAI,IACd,SAAU,EAAE,CACZ,qBAAsB,EACvB,EAAE,CACN,EAAE"}

package/dist/stores/use-event-store.d.ts

@@ -6,6 +6,14 @@ export interface EventState {
     events: OHEvent[];
     eventIds: Set<string | number>;
     uiEvents: OHEvent[];
+    /**
+     * The conversation whose events currently populate the store. The store is
+     * global (not keyed by conversation), so the conversation route uses this to
+     * tell a genuine conversation switch apart from a remount of the *same*
+     * conversation (e.g. navigating to Settings and back) — only the former
+     * should clear the accumulated events.
+     */
+    loadedConversationId: string | null;
     addEvent: (event: OHEvent) => void;
     /**
      * Bulk-insert events. Used for the initial REST history load and for
@@ -14,6 +22,20 @@ export interface EventState {
      * timestamp so older pages drop into the correct position.
      */
     addEvents: (events: OHEvent[]) => void;
+    /**
+     * Clear all events. Also resets `loadedConversationId` to `null` so the
+     * store never claims to hold a conversation whose events have been wiped —
+     * the invariant (`loadedConversationId` reflects the conversation whose
+     * events are in the arrays) holds even for a standalone clear.
+     */
     clearEvents: () => void;
+    /**
+     * Atomically clear all events and record which conversation is now loaded.
+     * Collapsing the reset and the bookkeeping into a single `set` keeps the
+     * store invariant enforced at the boundary, rather than relying on every
+     * call-site to invoke a clear and a `loadedConversationId` setter in the
+     * right order.
+     */
+    clearEventsForConversation: (conversationId: string | null) => void;
 }
 export declare const useEventStore: import("zustand").UseBoundStore<import("zustand").StoreApi<EventState>>;

package/dist/stores/use-event-store.js

@@ -29,6 +29,7 @@ var n = (e) => "id" in e ? e.id : void 0, r = (e) => "timestamp" in e ? e.timest
 	events: [],
 	eventIds: /* @__PURE__ */ new Set(),
 	uiEvents: [],
+	loadedConversationId: null,
 	addEvent: (t) => e((e) => c(e, t)),
 	addEvents: (r) => e((e) => {
 		if (r.length === 0) return e;
@@ -47,7 +48,14 @@ var n = (e) => "id" in e ? e.id : void 0, r = (e) => "timestamp" in e ? e.timest
 	clearEvents: () => e(() => ({
 		events: [],
 		eventIds: /* @__PURE__ */ new Set(),
-		uiEvents: []
+		uiEvents: [],
+		loadedConversationId: null
+	})),
+	clearEventsForConversation: (t) => e(() => ({
+		events: [],
+		eventIds: /* @__PURE__ */ new Set(),
+		uiEvents: [],
+		loadedConversationId: t
 	}))
 }));
 //#endregion

package/dist/stores/use-event-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-event-store.js","names":[],"sources":["../../src/stores/use-event-store.ts"],"sourcesContent":["import { create } from \"zustand\";\nimport { OpenHandsEvent } from \"#/types/agent-server/core\";\nimport { handleEventForUI } from \"#/utils/handle-event-for-ui\";\n\nexport type OHEvent = OpenHandsEvent & {\n  isFromPlanningAgent?: boolean;\n};\n\nconst getEventId = (event: OHEvent): string | number | undefined =>\n  \"id\" in event ? event.id : undefined;\n\nconst getEventTimestamp = (event: OHEvent): string | undefined =>\n  \"timestamp\" in event ? event.timestamp : undefined;\n\n/**\n * Compare two events by timestamp for sorting.\n * Events without timestamps are placed at the end.\n */\nconst compareEventsByTimestamp = (a: OHEvent, b: OHEvent): number => {\n  const timestampA = getEventTimestamp(a);\n  const timestampB = getEventTimestamp(b);\n\n  // Events without timestamps go to the end\n  if (!timestampA && !timestampB) return 0;\n  if (!timestampA) return 1;\n  if (!timestampB) return -1;\n\n  // Compare ISO timestamp strings (lexicographic comparison works for ISO format)\n  return timestampA.localeCompare(timestampB);\n};\n\n/**\n * Check if the new event needs sorting (i.e., it's out of order).\n * Returns true if the new event's timestamp is earlier than the last event's timestamp.\n */\nconst needsSorting = (events: OHEvent[], newEvent: OHEvent): boolean => {\n  if (events.length === 0) return false;\n\n  const lastEvent = events[events.length - 1];\n  const lastTimestamp = getEventTimestamp(lastEvent);\n  const newTimestamp = getEventTimestamp(newEvent);\n\n  // If either event doesn't have a timestamp, don't sort\n  if (!lastTimestamp || !newTimestamp) return false;\n\n  // Sort needed if new event's timestamp is earlier than last event's timestamp\n  return newTimestamp < lastTimestamp;\n};\n\nexport interface EventState {\n  events: OHEvent[];\n  eventIds: Set<string | number>;\n  uiEvents: OHEvent[];\n  addEvent: (event: OHEvent) => void;\n  /**\n   * Bulk-insert events. Used for the initial REST history load and for\n   * \"scroll up to load older\" pagination. Newly-added events are de-duped\n   * against the existing store and the combined list is re-sorted by\n   * timestamp so older pages drop into the correct position.\n   */\n  addEvents: (events: OHEvent[]) => void;\n  clearEvents: () => void;\n}\n\nconst appendEvent = (state: EventState, event: OHEvent): EventState => {\n  // Deduplicate: skip if event with same id already exists (O(1) lookup)\n  const eventId = getEventId(event);\n  if (eventId !== undefined && state.eventIds.has(eventId)) {\n    return state;\n  }\n\n  const newEventIds =\n    eventId !== undefined\n      ? new Set(state.eventIds).add(eventId)\n      : state.eventIds;\n\n  return {\n    ...state,\n    events: [...state.events, event],\n    eventIds: newEventIds,\n    uiEvents: handleEventForUI(event, state.uiEvents),\n  };\n};\n\nconst sortEventState = (state: EventState): EventState => ({\n  ...state,\n  events: [...state.events].sort(compareEventsByTimestamp),\n  uiEvents: [...state.uiEvents].sort(compareEventsByTimestamp),\n});\n\nconst applyAddEvent = (state: EventState, event: OHEvent): EventState => {\n  const next = appendEvent(state, event);\n  if (next === state) {\n    return state;\n  }\n\n  if (\n    !needsSorting(state.events, event) &&\n    !needsSorting(state.uiEvents, event)\n  ) {\n    return next;\n  }\n\n  return sortEventState(next);\n};\n\nexport const useEventStore = create<EventState>()((set) => ({\n  events: [],\n  eventIds: new Set(),\n  uiEvents: [],\n  addEvent: (event: OHEvent) => set((state) => applyAddEvent(state, event)),\n  addEvents: (incoming: OHEvent[]) =>\n    set((state) => {\n      if (incoming.length === 0) return state;\n\n      const eventIds = new Set(state.eventIds);\n      const events = [...state.events];\n      let uiEvents = [...state.uiEvents];\n      let added = false;\n\n      for (const event of incoming) {\n        const eventId = getEventId(event);\n        const isDuplicate = eventId !== undefined && eventIds.has(eventId);\n\n        if (!isDuplicate) {\n          added = true;\n          if (eventId !== undefined) {\n            eventIds.add(eventId);\n          }\n          events.push(event);\n          uiEvents = handleEventForUI(event, uiEvents);\n        }\n      }\n\n      if (!added) {\n        return state;\n      }\n\n      return sortEventState({\n        ...state,\n        events,\n        eventIds,\n        uiEvents,\n      });\n    }),\n  clearEvents: () =>\n    set(() => ({\n      events: [],\n      eventIds: new Set(),\n      uiEvents: [],\n    })),\n}));\n\n// In dev builds, expose the store on `window` so that fixture/preview\n// scripts (e.g. .pr/issue-132 demo capture) can inject synthetic events\n// without round-tripping through the agent-server. Tree-shaken in\n// production builds via `import.meta.env.DEV`.\nif (\n  typeof window !== \"undefined\" &&\n  typeof import.meta !== \"undefined\" &&\n  (import.meta as { env?: { DEV?: boolean } }).env?.DEV\n) {\n  (\n    window as unknown as { __OH_EVENT_STORE__?: typeof useEventStore }\n  ).__OH_EVENT_STORE__ = useEventStore;\n}\n"],"mappings":";;;AAQA,IAAM,KAAc,MAClB,QAAQ,IAAQ,EAAM,KAAK,KAAA,GAEvB,KAAqB,MACzB,eAAe,IAAQ,EAAM,YAAY,KAAA,GAMrC,KAA4B,GAAY,MAAuB;CACnE,IAAM,IAAa,EAAkB,EAAE,EACjC,IAAa,EAAkB,EAAE;AAQvC,QALI,CAAC,KAAc,CAAC,IAAmB,IAClC,IACA,IAGE,EAAW,cAAc,EAAW,GAHnB,KADA;GAWpB,KAAgB,GAAmB,MAA+B;AACtE,KAAI,EAAO,WAAW,EAAG,QAAO;CAEhC,IAAM,IAAY,EAAO,EAAO,SAAS,IACnC,IAAgB,EAAkB,EAAU,EAC5C,IAAe,EAAkB,EAAS;AAMhD,QAHI,CAAC,KAAiB,CAAC,IAAqB,KAGrC,IAAe;GAkBlB,KAAe,GAAmB,MAA+B;CAErE,IAAM,IAAU,EAAW,EAAM;AACjC,KAAI,MAAY,KAAA,KAAa,EAAM,SAAS,IAAI,EAAQ,CACtD,QAAO;CAGT,IAAM,IACJ,MAAY,KAAA,IAER,EAAM,WADN,IAAI,IAAI,EAAM,SAAS,CAAC,IAAI,EAAQ;AAG1C,QAAO;EACL,GAAG;EACH,QAAQ,CAAC,GAAG,EAAM,QAAQ,EAAM;EAChC,UAAU;EACV,UAAU,EAAiB,GAAO,EAAM,SAAS;EAClD;GAGG,KAAkB,OAAmC;CACzD,GAAG;CACH,QAAQ,CAAC,GAAG,EAAM,OAAO,CAAC,KAAK,EAAyB;CACxD,UAAU,CAAC,GAAG,EAAM,SAAS,CAAC,KAAK,EAAyB;CAC7D,GAEK,KAAiB,GAAmB,MAA+B;CACvE,IAAM,IAAO,EAAY,GAAO,EAAM;AAYtC,QAXI,MAAS,IACJ,IAIP,CAAC,EAAa,EAAM,QAAQ,EAAM,IAClC,CAAC,EAAa,EAAM,UAAU,EAAM,GAE7B,IAGF,EAAe,EAAK;GAGhB,IAAgB,GAAoB,EAAE,OAAS;CAC1D,QAAQ,EAAE;CACV,0BAAU,IAAI,KAAK;CACnB,UAAU,EAAE;CACZ,WAAW,MAAmB,GAAK,MAAU,EAAc,GAAO,EAAM,CAAC;CACzE,YAAY,MACV,GAAK,MAAU;AACb,MAAI,EAAS,WAAW,EAAG,QAAO;EAElC,IAAM,IAAW,IAAI,IAAI,EAAM,SAAS,EAClC,IAAS,CAAC,GAAG,EAAM,OAAO,EAC5B,IAAW,CAAC,GAAG,EAAM,SAAS,EAC9B,IAAQ;AAEZ,OAAK,IAAM,KAAS,GAAU;GAC5B,IAAM,IAAU,EAAW,EAAM;AAGjC,GAFoB,MAAY,KAAA,KAAa,EAAS,IAAI,EAAQ,KAGhE,IAAQ,IACJ,MAAY,KAAA,KACd,EAAS,IAAI,EAAQ,EAEvB,EAAO,KAAK,EAAM,EAClB,IAAW,EAAiB,GAAO,EAAS;;AAQhD,SAJK,IAIE,EAAe;GACpB,GAAG;GACH;GACA;GACA;GACD,CAAC,GARO;GAST;CACJ,mBACE,SAAW;EACT,QAAQ,EAAE;EACV,0BAAU,IAAI,KAAK;EACnB,UAAU,EAAE;EACb,EAAE;CACN,EAAE"}
+{"version":3,"file":"use-event-store.js","names":[],"sources":["../../src/stores/use-event-store.ts"],"sourcesContent":["import { create } from \"zustand\";\nimport { OpenHandsEvent } from \"#/types/agent-server/core\";\nimport { handleEventForUI } from \"#/utils/handle-event-for-ui\";\n\nexport type OHEvent = OpenHandsEvent & {\n  isFromPlanningAgent?: boolean;\n};\n\nconst getEventId = (event: OHEvent): string | number | undefined =>\n  \"id\" in event ? event.id : undefined;\n\nconst getEventTimestamp = (event: OHEvent): string | undefined =>\n  \"timestamp\" in event ? event.timestamp : undefined;\n\n/**\n * Compare two events by timestamp for sorting.\n * Events without timestamps are placed at the end.\n */\nconst compareEventsByTimestamp = (a: OHEvent, b: OHEvent): number => {\n  const timestampA = getEventTimestamp(a);\n  const timestampB = getEventTimestamp(b);\n\n  // Events without timestamps go to the end\n  if (!timestampA && !timestampB) return 0;\n  if (!timestampA) return 1;\n  if (!timestampB) return -1;\n\n  // Compare ISO timestamp strings (lexicographic comparison works for ISO format)\n  return timestampA.localeCompare(timestampB);\n};\n\n/**\n * Check if the new event needs sorting (i.e., it's out of order).\n * Returns true if the new event's timestamp is earlier than the last event's timestamp.\n */\nconst needsSorting = (events: OHEvent[], newEvent: OHEvent): boolean => {\n  if (events.length === 0) return false;\n\n  const lastEvent = events[events.length - 1];\n  const lastTimestamp = getEventTimestamp(lastEvent);\n  const newTimestamp = getEventTimestamp(newEvent);\n\n  // If either event doesn't have a timestamp, don't sort\n  if (!lastTimestamp || !newTimestamp) return false;\n\n  // Sort needed if new event's timestamp is earlier than last event's timestamp\n  return newTimestamp < lastTimestamp;\n};\n\nexport interface EventState {\n  events: OHEvent[];\n  eventIds: Set<string | number>;\n  uiEvents: OHEvent[];\n  /**\n   * The conversation whose events currently populate the store. The store is\n   * global (not keyed by conversation), so the conversation route uses this to\n   * tell a genuine conversation switch apart from a remount of the *same*\n   * conversation (e.g. navigating to Settings and back) — only the former\n   * should clear the accumulated events.\n   */\n  loadedConversationId: string | null;\n  addEvent: (event: OHEvent) => void;\n  /**\n   * Bulk-insert events. Used for the initial REST history load and for\n   * \"scroll up to load older\" pagination. Newly-added events are de-duped\n   * against the existing store and the combined list is re-sorted by\n   * timestamp so older pages drop into the correct position.\n   */\n  addEvents: (events: OHEvent[]) => void;\n  /**\n   * Clear all events. Also resets `loadedConversationId` to `null` so the\n   * store never claims to hold a conversation whose events have been wiped —\n   * the invariant (`loadedConversationId` reflects the conversation whose\n   * events are in the arrays) holds even for a standalone clear.\n   */\n  clearEvents: () => void;\n  /**\n   * Atomically clear all events and record which conversation is now loaded.\n   * Collapsing the reset and the bookkeeping into a single `set` keeps the\n   * store invariant enforced at the boundary, rather than relying on every\n   * call-site to invoke a clear and a `loadedConversationId` setter in the\n   * right order.\n   */\n  clearEventsForConversation: (conversationId: string | null) => void;\n}\n\nconst appendEvent = (state: EventState, event: OHEvent): EventState => {\n  // Deduplicate: skip if event with same id already exists (O(1) lookup)\n  const eventId = getEventId(event);\n  if (eventId !== undefined && state.eventIds.has(eventId)) {\n    return state;\n  }\n\n  const newEventIds =\n    eventId !== undefined\n      ? new Set(state.eventIds).add(eventId)\n      : state.eventIds;\n\n  return {\n    ...state,\n    events: [...state.events, event],\n    eventIds: newEventIds,\n    uiEvents: handleEventForUI(event, state.uiEvents),\n  };\n};\n\nconst sortEventState = (state: EventState): EventState => ({\n  ...state,\n  events: [...state.events].sort(compareEventsByTimestamp),\n  uiEvents: [...state.uiEvents].sort(compareEventsByTimestamp),\n});\n\nconst applyAddEvent = (state: EventState, event: OHEvent): EventState => {\n  const next = appendEvent(state, event);\n  if (next === state) {\n    return state;\n  }\n\n  if (\n    !needsSorting(state.events, event) &&\n    !needsSorting(state.uiEvents, event)\n  ) {\n    return next;\n  }\n\n  return sortEventState(next);\n};\n\nexport const useEventStore = create<EventState>()((set) => ({\n  events: [],\n  eventIds: new Set(),\n  uiEvents: [],\n  loadedConversationId: null,\n  addEvent: (event: OHEvent) => set((state) => applyAddEvent(state, event)),\n  addEvents: (incoming: OHEvent[]) =>\n    set((state) => {\n      if (incoming.length === 0) return state;\n\n      const eventIds = new Set(state.eventIds);\n      const events = [...state.events];\n      let uiEvents = [...state.uiEvents];\n      let added = false;\n\n      for (const event of incoming) {\n        const eventId = getEventId(event);\n        const isDuplicate = eventId !== undefined && eventIds.has(eventId);\n\n        if (!isDuplicate) {\n          added = true;\n          if (eventId !== undefined) {\n            eventIds.add(eventId);\n          }\n          events.push(event);\n          uiEvents = handleEventForUI(event, uiEvents);\n        }\n      }\n\n      if (!added) {\n        return state;\n      }\n\n      return sortEventState({\n        ...state,\n        events,\n        eventIds,\n        uiEvents,\n      });\n    }),\n  clearEvents: () =>\n    set(() => ({\n      events: [],\n      eventIds: new Set(),\n      uiEvents: [],\n      loadedConversationId: null,\n    })),\n  clearEventsForConversation: (conversationId: string | null) =>\n    set(() => ({\n      events: [],\n      eventIds: new Set(),\n      uiEvents: [],\n      loadedConversationId: conversationId,\n    })),\n}));\n\n// In dev builds, expose the store on `window` so that fixture/preview\n// scripts (e.g. .pr/issue-132 demo capture) can inject synthetic events\n// without round-tripping through the agent-server. Tree-shaken in\n// production builds via `import.meta.env.DEV`.\nif (\n  typeof window !== \"undefined\" &&\n  typeof import.meta !== \"undefined\" &&\n  (import.meta as { env?: { DEV?: boolean } }).env?.DEV\n) {\n  (\n    window as unknown as { __OH_EVENT_STORE__?: typeof useEventStore }\n  ).__OH_EVENT_STORE__ = useEventStore;\n}\n"],"mappings":";;;AAQA,IAAM,KAAc,MAClB,QAAQ,IAAQ,EAAM,KAAK,KAAA,GAEvB,KAAqB,MACzB,eAAe,IAAQ,EAAM,YAAY,KAAA,GAMrC,KAA4B,GAAY,MAAuB;CACnE,IAAM,IAAa,EAAkB,EAAE,EACjC,IAAa,EAAkB,EAAE;AAQvC,QALI,CAAC,KAAc,CAAC,IAAmB,IAClC,IACA,IAGE,EAAW,cAAc,EAAW,GAHnB,KADA;GAWpB,KAAgB,GAAmB,MAA+B;AACtE,KAAI,EAAO,WAAW,EAAG,QAAO;CAEhC,IAAM,IAAY,EAAO,EAAO,SAAS,IACnC,IAAgB,EAAkB,EAAU,EAC5C,IAAe,EAAkB,EAAS;AAMhD,QAHI,CAAC,KAAiB,CAAC,IAAqB,KAGrC,IAAe;GAwClB,KAAe,GAAmB,MAA+B;CAErE,IAAM,IAAU,EAAW,EAAM;AACjC,KAAI,MAAY,KAAA,KAAa,EAAM,SAAS,IAAI,EAAQ,CACtD,QAAO;CAGT,IAAM,IACJ,MAAY,KAAA,IAER,EAAM,WADN,IAAI,IAAI,EAAM,SAAS,CAAC,IAAI,EAAQ;AAG1C,QAAO;EACL,GAAG;EACH,QAAQ,CAAC,GAAG,EAAM,QAAQ,EAAM;EAChC,UAAU;EACV,UAAU,EAAiB,GAAO,EAAM,SAAS;EAClD;GAGG,KAAkB,OAAmC;CACzD,GAAG;CACH,QAAQ,CAAC,GAAG,EAAM,OAAO,CAAC,KAAK,EAAyB;CACxD,UAAU,CAAC,GAAG,EAAM,SAAS,CAAC,KAAK,EAAyB;CAC7D,GAEK,KAAiB,GAAmB,MAA+B;CACvE,IAAM,IAAO,EAAY,GAAO,EAAM;AAYtC,QAXI,MAAS,IACJ,IAIP,CAAC,EAAa,EAAM,QAAQ,EAAM,IAClC,CAAC,EAAa,EAAM,UAAU,EAAM,GAE7B,IAGF,EAAe,EAAK;GAGhB,IAAgB,GAAoB,EAAE,OAAS;CAC1D,QAAQ,EAAE;CACV,0BAAU,IAAI,KAAK;CACnB,UAAU,EAAE;CACZ,sBAAsB;CACtB,WAAW,MAAmB,GAAK,MAAU,EAAc,GAAO,EAAM,CAAC;CACzE,YAAY,MACV,GAAK,MAAU;AACb,MAAI,EAAS,WAAW,EAAG,QAAO;EAElC,IAAM,IAAW,IAAI,IAAI,EAAM,SAAS,EAClC,IAAS,CAAC,GAAG,EAAM,OAAO,EAC5B,IAAW,CAAC,GAAG,EAAM,SAAS,EAC9B,IAAQ;AAEZ,OAAK,IAAM,KAAS,GAAU;GAC5B,IAAM,IAAU,EAAW,EAAM;AAGjC,GAFoB,MAAY,KAAA,KAAa,EAAS,IAAI,EAAQ,KAGhE,IAAQ,IACJ,MAAY,KAAA,KACd,EAAS,IAAI,EAAQ,EAEvB,EAAO,KAAK,EAAM,EAClB,IAAW,EAAiB,GAAO,EAAS;;AAQhD,SAJK,IAIE,EAAe;GACpB,GAAG;GACH;GACA;GACA;GACD,CAAC,GARO;GAST;CACJ,mBACE,SAAW;EACT,QAAQ,EAAE;EACV,0BAAU,IAAI,KAAK;EACnB,UAAU,EAAE;EACZ,sBAAsB;EACvB,EAAE;CACL,6BAA6B,MAC3B,SAAW;EACT,QAAQ,EAAE;EACV,0BAAU,IAAI,KAAK;EACnB,UAAU,EAAE;EACZ,sBAAsB;EACvB,EAAE;CACN,EAAE"}

package/dist/ui/context-menu.d.ts

@@ -5,7 +5,7 @@ declare const contextMenuVariants: (props?: ({
     size?: "default" | "compact" | null | undefined;
     layout?: "vertical" | null | undefined;
     position?: "none" | "top" | "bottom" | null | undefined;
-    spacing?: "none" | "default" | null | undefined;
+    spacing?: "default" | "none" | null | undefined;
     alignment?: "none" | "left" | "right" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ContextMenuProps {

package/dist/ui/help-link.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "class-variance-authority";
 declare const helpLinkVariants: (props?: ({
-    size?: "settings" | "default" | null | undefined;
+    size?: "default" | "settings" | null | undefined;
     linkColor?: "default" | "white" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface HelpLinkProps extends VariantProps<typeof helpLinkVariants> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openhands/agent-canvas",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
   "description": "Agent Canvas UI for OpenHands - run AI coding agents with a visual interface",
   "license": "MIT",
   "private": false,
@@ -23,8 +23,8 @@
     "@heroui/react": "2.8.10",
     "@microlink/react-json-view": "1.31.20",
     "@monaco-editor/react": "4.7.0",
-    "@openhands/extensions": "git+https://github.com/OpenHands/extensions.git#39711065f53166c52608462f60a4c8507253ce56",
-    "@openhands/typescript-client": "1.24.0",
+    "@openhands/extensions": "git+https://github.com/OpenHands/extensions.git#e14f740c59b4bfd7369d4bb6aea5eeb33dd05909",
+    "@openhands/typescript-client": "1.24.3",
     "@react-router/node": "7.14.2",
     "@react-router/serve": "7.14.2",
     "@tailwindcss/vite": "4.2.4",

package/scripts/dev-safe.mjs

@@ -210,6 +210,36 @@ function tryPort(port, host = "127.0.0.1") {
   });
 }
 
+/**
+ * Assert that all listed ports are available, throwing a descriptive error if
+ * any are already in use.
+ *
+ * Intended as a pre-flight check before spawning services so that a concurrent
+ * agent-canvas instance is detected immediately rather than silently starting
+ * on a different port.
+ *
+ * @param {Array<{name: string, port: number}>} portConfigs - Named port list
+ * @param {string} [host]
+ */
+export async function assertPortsFree(portConfigs, host = "127.0.0.1") {
+  const results = await Promise.all(
+    portConfigs.map(async ({ name, port }) => ({
+      name,
+      port,
+      free: await tryPort(port, host),
+    })),
+  );
+  const busy = results.filter(({ free }) => !free);
+  if (busy.length === 0) return;
+
+  const lines = busy.map(({ name, port }) => `   • ${name}: port ${port}`).join("\n");
+  throw new Error(
+    `Cannot start: the following ports are already in use:\n\n${lines}\n\n` +
+      `Another agent-canvas instance may already be running.\n` +
+      `Stop it first, or override the port via environment variables (e.g. PORT=<other>).`,
+  );
+}
+
 /**
  * Find multiple free ports at once, each preferring its specified default.
  *
@@ -491,26 +521,14 @@ export async function buildSafeDevConfigAsync(
     preferredBackendPort + 1,
   );
 
-  // Find available ports, preferring the defaults
-  const ports = await findFreePorts([
-    { name: "backend", preferred: preferredBackendPort },
-    { name: "vscode", preferred: preferredVscodePort },
+  // Fail fast if any required port is already in use.
+  await assertPortsFree([
+    { name: "agent-server", port: preferredBackendPort },
+    { name: "vscode", port: preferredVscodePort },
   ]);
 
-  // Log if we're using non-default ports
-  if (ports.backend !== preferredBackendPort) {
-    console.log(
-      `  ℹ Port ${preferredBackendPort} busy, using ${ports.backend} for agent-server`,
-    );
-  }
-  if (ports.vscode !== preferredVscodePort) {
-    console.log(
-      `  ℹ Port ${preferredVscodePort} busy, using ${ports.vscode} for vscode`,
-    );
-  }
-
   return buildConfigFromPorts(
-    { backendPort: ports.backend, vscodePort: ports.vscode },
+    { backendPort: preferredBackendPort, vscodePort: preferredVscodePort },
     cwd,
     env,
   );

package/scripts/dev-with-automation.mjs

@@ -51,13 +51,13 @@ import { setTimeout as delay } from "node:timers/promises";
 import process from "node:process";
 
 import {
+  assertPortsFree,
   buildAgentServerCommand,
   buildSafeDevConfig,
   buildAgentServerEnv,
   buildNpmScriptCommand,
   buildRuntimeServicesInfo,
   formatMissingUvxGuidance,
-  findFreePorts,
   getOrCreatePersistedApiKey,
   validateFrontendDependencies,
   validateLocalAgentServerPath,
@@ -281,52 +281,27 @@ async function buildConfig(args, env = process.env) {
     env.OH_AUTOMATION_REPO = args.automationRepo;
   }
 
-  // Preferred ports (from env or defaults)
+  // Preferred ports (from env or defaults).
+  // OH_CANVAS_SAFE_BACKEND_PORT / OH_CANVAS_SAFE_AUTOMATION_PORT /
+  // OH_CANVAS_SAFE_VITE_PORT allow tests (and advanced users) to redirect
+  // internal service ports without affecting the production default.
   const preferredIngressPort = args.port || parseInt(env.PORT, 10) || 8000;
-  const preferredBackendPort = DEFAULT_BACKEND_PORT;
-  const preferredAutomationPort = DEFAULT_AUTOMATION_PORT;
-  const preferredVitePort = 3001;
-
-  // Find available ports, preferring the defaults
-  logStep("ports", "Allocating ports...");
-  const ports = await findFreePorts([
-    { name: "ingress", preferred: preferredIngressPort },
-    { name: "backend", preferred: preferredBackendPort },
-    { name: "automation", preferred: preferredAutomationPort },
-    { name: "vite", preferred: preferredVitePort },
+  const preferredBackendPort =
+    parseInt(env.OH_CANVAS_SAFE_BACKEND_PORT, 10) || DEFAULT_BACKEND_PORT;
+  const preferredAutomationPort =
+    parseInt(env.OH_CANVAS_SAFE_AUTOMATION_PORT, 10) || DEFAULT_AUTOMATION_PORT;
+  const preferredVitePort = parseInt(env.OH_CANVAS_SAFE_VITE_PORT, 10) || 3001;
+
+  // Fail fast if any preferred port is already in use.
+  logStep("ports", "Checking ports...");
+  await assertPortsFree([
+    { name: "ingress", port: preferredIngressPort },
+    { name: "agent-server", port: preferredBackendPort },
+    { name: "automation", port: preferredAutomationPort },
+    { name: "vite", port: preferredVitePort },
   ]);
 
-  // Log any port changes
-  if (ports.ingress !== preferredIngressPort) {
-    logService(
-      "ports",
-      `Port ${preferredIngressPort} busy, using ${ports.ingress} for ingress`,
-      c.yellow,
-    );
-  }
-  if (ports.backend !== preferredBackendPort) {
-    logService(
-      "ports",
-      `Port ${preferredBackendPort} busy, using ${ports.backend} for agent-server`,
-      c.yellow,
-    );
-  }
-  if (ports.automation !== preferredAutomationPort) {
-    logService(
-      "ports",
-      `Port ${preferredAutomationPort} busy, using ${ports.automation} for automation`,
-      c.yellow,
-    );
-  }
-  if (ports.vite !== preferredVitePort) {
-    logService(
-      "ports",
-      `Port ${preferredVitePort} busy, using ${ports.vite} for vite`,
-      c.yellow,
-    );
-  }
-
-  const vscodePort = ports.backend + 1000;
+  const vscodePort = preferredBackendPort + 1000;
 
   // Session API key — shared by both agent-server and automation backend.
   // Both validate it via the `X-Session-API-Key` header.
@@ -336,19 +311,19 @@ async function buildConfig(args, env = process.env) {
   const safeConfig = buildSafeDevConfig(projectRoot, {
     ...env,
     OH_CANVAS_SAFE_STATE_DIR: stateDir,
-    OH_CANVAS_SAFE_BACKEND_PORT: ports.backend.toString(),
+    OH_CANVAS_SAFE_BACKEND_PORT: preferredBackendPort.toString(),
     OH_CANVAS_SAFE_VSCODE_PORT: vscodePort.toString(),
   });
   const sessionApiKey = safeConfig.sessionApiKey;
 
   return {
     // Ingress port (main entry point)
-    ingressPort: ports.ingress,
+    ingressPort: preferredIngressPort,
 
     // Service ports (internal)
-    agentServerPort: ports.backend,
-    autoBackendPort: ports.automation,
-    vitePort: ports.vite,
+    agentServerPort: preferredBackendPort,
+    autoBackendPort: preferredAutomationPort,
+    vitePort: preferredVitePort,
     vscodePort,
 
     // Paths