@copilotkit/react-core 1.61.1 → 1.62.0

package/dist/v2/headless.mjs

@@ -3,8 +3,8 @@ import React, { createContext, useCallback, useContext, useEffect, useLayoutEffe
 import { DEFAULT_AGENT_ID, randomUUID } from "@copilotkit/shared";
 import { twMerge } from "tailwind-merge";
 import { jsx } from "react/jsx-runtime";
-import { HttpAgent } from "@ag-ui/client";
-import { CopilotKitCoreRuntimeConnectionStatus, ProxiedCopilotRuntimeAgent, ToolCallStatus, ɵcreateThreadStore, ɵselectHasNextPage, ɵselectIsFetchingNextPage, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
+import { HttpAgent, buildResumeArray, isInterruptExpired, randomUUID as randomUUID$1 } from "@ag-ui/client";
+import { CopilotKitCoreRuntimeConnectionStatus, ProxiedCopilotRuntimeAgent, ToolCallStatus, ɵcreateThreadStore, ɵselectHasNextPage, ɵselectIsFetchingNextPage, ɵselectIsMutating, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
 import { z } from "zod";
 
 //#region src/v2/lib/slots.tsx
@@ -115,6 +115,25 @@ const CopilotChatDefaultLabels = {
 	modalHeaderTitle: "CopilotKit Chat",
 	welcomeMessageText: "How can I help you today?"
 };
+/**
+* Mobile breakpoint below which the chat modal and the thread-list drawer are
+* mutually exclusive. At or above this width both surfaces may coexist. This
+* mirrors the `(max-width: 767px)` / `(min-width: 768px)` split already used by
+* CopilotChatInput and CopilotSidebarView.
+*/
+const MOBILE_MAX_WIDTH_PX = 767;
+/**
+* Reports whether the current viewport is in the mobile range (`<768px`), where
+* the chat modal and drawer must not be open simultaneously. SSR-safe and
+* defensive against environments without `matchMedia` (treated as desktop, so
+* no mutual-exclusion constraint is applied).
+*
+* @returns `true` when the viewport is mobile-width, `false` otherwise.
+*/
+function isMobileViewport() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+	return window.matchMedia(`(max-width: ${MOBILE_MAX_WIDTH_PX}px)`).matches;
+}
 const CopilotChatConfiguration = createContext(null);
 const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, hasExplicitThreadId, isModalDefaultOpen }) => {
 	const parentConfig = useContext(CopilotChatConfiguration);
@@ -125,12 +144,22 @@ const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId,
 		...stableLabels
 	}), [stableLabels, parentConfig?.labels]);
 	const resolvedAgentId = agentId ?? parentConfig?.agentId ?? DEFAULT_AGENT_ID;
+	const threadIdPropIsAuthoritative = threadId !== void 0 && hasExplicitThreadId !== false;
+	const isThreadIdControlled = threadIdPropIsAuthoritative;
+	const [activeThreadOverride, setActiveThreadOverride] = useState(null);
 	const resolvedThreadId = useMemo(() => {
-		if (threadId) return threadId;
+		if (threadIdPropIsAuthoritative) return threadId;
+		if (activeThreadOverride) return activeThreadOverride.threadId;
 		if (parentConfig?.threadId) return parentConfig.threadId;
+		if (threadId) return threadId;
 		return randomUUID();
-	}, [threadId, parentConfig?.threadId]);
-	const resolvedHasExplicitThreadId = (hasExplicitThreadId !== void 0 ? hasExplicitThreadId : !!threadId) || !!parentConfig?.hasExplicitThreadId;
+	}, [
+		threadIdPropIsAuthoritative,
+		threadId,
+		parentConfig?.threadId,
+		activeThreadOverride
+	]);
+	const resolvedHasExplicitThreadId = (threadIdPropIsAuthoritative ? true : activeThreadOverride?.explicit ?? hasExplicitThreadId ?? false) || !!parentConfig?.hasExplicitThreadId;
 	const [internalModalOpen, setInternalModalOpen] = useState(isModalDefaultOpen ?? true);
 	const hasExplicitDefault = isModalDefaultOpen !== void 0;
 	const setAndSync = useCallback((open) => {
@@ -149,20 +178,113 @@ const CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId,
 	}, [parentConfig?.isModalOpen, hasExplicitDefault]);
 	const resolvedIsModalOpen = hasExplicitDefault ? internalModalOpen : parentConfig?.isModalOpen ?? internalModalOpen;
 	const resolvedSetModalOpen = hasExplicitDefault ? setAndSync : parentConfig?.setModalOpen ?? setInternalModalOpen;
+	const [ownDrawerOpen, setOwnDrawerOpen] = useState(false);
+	const [ownDrawerCount, setOwnDrawerCount] = useState(0);
+	const modalCloseRef = useRef(() => {});
+	modalCloseRef.current = resolvedSetModalOpen;
+	const registeredModalClosersRef = useRef([]);
+	const ownRegisterModalCloser = useCallback((closeModal) => {
+		registeredModalClosersRef.current.push(closeModal);
+		return () => {
+			registeredModalClosersRef.current = registeredModalClosersRef.current.filter((entry) => entry !== closeModal);
+		};
+	}, []);
+	const ownSetDrawerOpen = useCallback((open) => {
+		setOwnDrawerOpen(open);
+		if (open && isMobileViewport()) {
+			const registered = registeredModalClosersRef.current;
+			(registered.length > 0 ? registered[registered.length - 1] : modalCloseRef.current)(false);
+		}
+	}, []);
+	const ownRegisterDrawer = useCallback(() => {
+		setOwnDrawerCount((count) => count + 1);
+		return () => {
+			setOwnDrawerCount((count) => Math.max(0, count - 1));
+		};
+	}, []);
+	const resolvedDrawerOpen = parentConfig ? parentConfig.drawerOpen : ownDrawerOpen;
+	const resolvedSetDrawerOpen = parentConfig ? parentConfig.setDrawerOpen : ownSetDrawerOpen;
+	const resolvedDrawerRegistered = parentConfig ? parentConfig.drawerRegistered : ownDrawerCount > 0;
+	const resolvedRegisterDrawer = parentConfig ? parentConfig.registerDrawer : ownRegisterDrawer;
+	const resolvedRegisterModalCloser = parentConfig ? parentConfig.ɵregisterModalCloser : ownRegisterModalCloser;
+	useEffect(() => {
+		if (!hasExplicitDefault) return;
+		return resolvedRegisterModalCloser(resolvedSetModalOpen);
+	}, [
+		hasExplicitDefault,
+		resolvedRegisterModalCloser,
+		resolvedSetModalOpen
+	]);
+	const isThreadIdControlledRef = useRef(isThreadIdControlled);
+	isThreadIdControlledRef.current = isThreadIdControlled;
+	const ownSetActiveThreadId = useCallback((id, options) => {
+		setActiveThreadOverride({
+			threadId: id,
+			explicit: options?.explicit ?? true
+		});
+	}, []);
+	const ownStartNewThread = useCallback(() => {
+		setActiveThreadOverride({
+			threadId: randomUUID(),
+			explicit: false
+		});
+	}, []);
+	const parentSetActiveThreadId = parentConfig?.setActiveThreadId;
+	const parentStartNewThread = parentConfig?.startNewThread;
+	const resolvedSetActiveThreadId = useCallback((id, options) => {
+		if (isThreadIdControlledRef.current) {
+			console.warn("[CopilotKit] Ignoring setActiveThreadId(): threadId is controlled via the `threadId` prop on CopilotChatConfigurationProvider.");
+			return;
+		}
+		if (parentSetActiveThreadId) {
+			parentSetActiveThreadId(id, options);
+			return;
+		}
+		ownSetActiveThreadId(id, options);
+	}, [parentSetActiveThreadId, ownSetActiveThreadId]);
+	const resolvedStartNewThread = useCallback(() => {
+		if (isThreadIdControlledRef.current) {
+			console.warn("[CopilotKit] Ignoring startNewThread(): threadId is controlled via the `threadId` prop on CopilotChatConfigurationProvider.");
+			return;
+		}
+		if (parentStartNewThread) {
+			parentStartNewThread();
+			return;
+		}
+		ownStartNewThread();
+	}, [parentStartNewThread, ownStartNewThread]);
+	const setModalOpenWithDrawerExclusion = useCallback((open) => {
+		if (open && isMobileViewport()) resolvedSetDrawerOpen(false);
+		resolvedSetModalOpen(open);
+	}, [resolvedSetModalOpen, resolvedSetDrawerOpen]);
 	const configurationValue = useMemo(() => ({
 		labels: mergedLabels,
 		agentId: resolvedAgentId,
 		threadId: resolvedThreadId,
 		hasExplicitThreadId: resolvedHasExplicitThreadId,
 		isModalOpen: resolvedIsModalOpen,
-		setModalOpen: resolvedSetModalOpen
+		setModalOpen: setModalOpenWithDrawerExclusion,
+		drawerOpen: resolvedDrawerOpen,
+		setDrawerOpen: resolvedSetDrawerOpen,
+		drawerRegistered: resolvedDrawerRegistered,
+		registerDrawer: resolvedRegisterDrawer,
+		ɵregisterModalCloser: resolvedRegisterModalCloser,
+		setActiveThreadId: resolvedSetActiveThreadId,
+		startNewThread: resolvedStartNewThread
 	}), [
 		mergedLabels,
 		resolvedAgentId,
 		resolvedThreadId,
 		resolvedHasExplicitThreadId,
 		resolvedIsModalOpen,
-		resolvedSetModalOpen
+		setModalOpenWithDrawerExclusion,
+		resolvedDrawerOpen,
+		resolvedSetDrawerOpen,
+		resolvedDrawerRegistered,
+		resolvedRegisterDrawer,
+		resolvedRegisterModalCloser,
+		resolvedSetActiveThreadId,
+		resolvedStartNewThread
 	]);
 	return /* @__PURE__ */ jsx(CopilotChatConfiguration.Provider, {
 		value: configurationValue,
@@ -204,7 +326,7 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 		if (isRuntimeConfigured && (status === CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
 			const cached = provisionalAgentCache.current.get(agentId);
 			if (cached) {
-				cached.headers = { ...copilotkit.headers };
+				copilotkit.applyHeadersToAgent(cached);
 				return cached;
 			}
 			const provisional = new ProxiedCopilotRuntimeAgent({
@@ -213,14 +335,14 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 				transport: copilotkit.runtimeTransport,
 				runtimeMode: "pending"
 			});
-			provisional.headers = { ...copilotkit.headers };
+			copilotkit.applyHeadersToAgent(provisional);
 			provisionalAgentCache.current.set(agentId, provisional);
 			return provisional;
 		}
 		if (isRuntimeConfigured && status === CopilotKitCoreRuntimeConnectionStatus.Error) {
 			const cached = provisionalAgentCache.current.get(agentId);
 			if (cached) {
-				cached.headers = { ...copilotkit.headers };
+				copilotkit.applyHeadersToAgent(cached);
 				return cached;
 			}
 			const provisional = new ProxiedCopilotRuntimeAgent({
@@ -229,7 +351,7 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 				transport: copilotkit.runtimeTransport,
 				runtimeMode: "pending"
 			});
-			provisional.headers = { ...copilotkit.headers };
+			copilotkit.applyHeadersToAgent(provisional);
 			provisionalAgentCache.current.set(agentId, provisional);
 			return provisional;
 		}
@@ -280,7 +402,7 @@ function useAgent({ agentId, updates, throttleMs } = {}) {
 		updateFlags
 	]);
 	useEffect(() => {
-		if (agent instanceof HttpAgent) agent.headers = { ...copilotkit.headers };
+		if (agent instanceof HttpAgent) copilotkit.applyHeadersToAgent(agent);
 	}, [agent, JSON.stringify(copilotkit.headers)]);
 	const chatConfig = useCopilotChatConfiguration();
 	const configThreadId = chatConfig?.threadId;
@@ -492,114 +614,165 @@ const INTERRUPT_EVENT_NAME = "on_interrupt";
 function isPromiseLike(value) {
 	return (typeof value === "object" || typeof value === "function") && value !== null && typeof Reflect.get(value, "then") === "function";
 }
+/** Derive the legacy-compatible `event` for any pending interrupt. */
+function toLegacyEvent(pending) {
+	if (pending.kind === "legacy") return pending.event;
+	return {
+		name: INTERRUPT_EVENT_NAME,
+		value: pending.interrupts[0]
+	};
+}
 /**
-* Handles agent interrupts (`on_interrupt`) with optional filtering, preprocessing, and resume behavior.
-*
-* The hook listens to custom events on the active agent, stores interrupt payloads per run,
-* and surfaces a render callback once the run finalizes. Call `resolve` from your UI to resume
-* execution with user-provided data.
-*
-* - `renderInChat: true` (default): the element is published into `<CopilotChat>` and this hook returns `void`.
-* - `renderInChat: false`: the hook returns the interrupt element so you can place it anywhere in your component tree.
+* Handles agent interrupts with optional filtering, preprocessing, and resume behavior.
 *
-* `event.value` is typed as `any` since the interrupt payload shape depends on your agent.
-* Type-narrow it in your callbacks (e.g. `handler`, `enabled`, `render`) as needed.
+* Supports both the AG-UI standard interrupt flow (`RUN_FINISHED` with
+* `outcome.type === "interrupt"`) and the legacy custom-event flow
+* (`on_interrupt`). For standard interrupts, `render` receives `interrupt`
+* (the primary one) and `interrupts` (the full open set); call `resolve(payload)`
+* to resume or `cancel()` to cancel. Resuming addresses the targeted interrupt
+* and, once every open interrupt is addressed, submits a single spec `resume`
+* array via `copilotkit.runAgent`.
 *
-* @typeParam TResult - Inferred from `handler` return type. Exposed as `result` in `render`.
-* @param config - Interrupt configuration (renderer, optional handler/filter, and render mode).
-* @returns When `renderInChat` is `false`, returns the interrupt element (or `null` when idle).
-* Otherwise returns `void` and publishes the element into chat. In `render`, `result` is always
-* either the handler's resolved return value or `null` (including when no handler is provided,
-* when filtering skips the interrupt, or when handler execution fails).
+* - `renderInChat: true` (default): the element is published into `<CopilotChat>`; returns `void`.
+* - `renderInChat: false`: the hook returns the interrupt element for manual placement.
 *
 * @example
 * ```tsx
-* import { useInterrupt } from "@copilotkit/react-core/v2";
-*
-* function InterruptUI() {
-*   useInterrupt({
-*     render: ({ event, resolve }) => (
-*       <div>
-*         <p>{event.value.question}</p>
-*         <button onClick={() => resolve({ approved: true })}>Approve</button>
-*         <button onClick={() => resolve({ approved: false })}>Reject</button>
-*       </div>
-*     ),
-*   });
-*
-*   return null;
-* }
-* ```
-*
-* @example
-* ```tsx
-* import { useInterrupt } from "@copilotkit/react-core/v2";
-*
-* function CustomPanel() {
-*   const interruptElement = useInterrupt({
-*     renderInChat: false,
-*     enabled: (event) => event.value.startsWith("approval:"),
-*     handler: async ({ event }) => ({ label: event.value.toUpperCase() }),
-*     render: ({ event, result, resolve }) => (
-*       <aside>
-*         <strong>{result?.label ?? ""}</strong>
-*         <button onClick={() => resolve({ value: event.value })}>Continue</button>
-*       </aside>
-*     ),
-*   });
-*
-*   return <>{interruptElement}</>;
-* }
+* useInterrupt({
+*   render: ({ interrupt, resolve, cancel }) => (
+*     <div>
+*       <p>{interrupt?.message}</p>
+*       <button onClick={() => resolve({ approved: true })}>Approve</button>
+*       <button onClick={() => cancel()}>Cancel</button>
+*     </div>
+*   ),
+* });
 * ```
 */
 function useInterrupt(config) {
 	const { copilotkit } = useCopilotKit();
 	const { agent } = useAgent({ agentId: config.agentId });
-	const [pendingEvent, setPendingEvent] = useState(null);
-	const pendingEventRef = useRef(pendingEvent);
-	pendingEventRef.current = pendingEvent;
+	const [pending, setPending] = useState(null);
+	const pendingRef = useRef(pending);
+	pendingRef.current = pending;
 	const [handlerResult, setHandlerResult] = useState(null);
+	const responsesRef = useRef({});
 	useEffect(() => {
-		let localInterrupt = null;
+		let localLegacy = null;
+		let localStandard = null;
 		const subscription = agent.subscribe({
 			onCustomEvent: ({ event }) => {
-				if (event.name === INTERRUPT_EVENT_NAME) localInterrupt = {
+				if (event.name === INTERRUPT_EVENT_NAME) localLegacy = {
 					name: event.name,
 					value: event.value
 				};
 			},
+			onRunFinishedEvent: (params) => {
+				if (params.outcome === "interrupt") localStandard = params.interrupts;
+			},
 			onRunStartedEvent: () => {
-				localInterrupt = null;
-				setPendingEvent(null);
+				localLegacy = null;
+				localStandard = null;
+				responsesRef.current = {};
+				setPending(null);
 			},
 			onRunFinalized: () => {
-				if (localInterrupt) {
-					setPendingEvent(localInterrupt);
-					localInterrupt = null;
-				}
+				if (localStandard && localStandard.length > 0) setPending({
+					kind: "standard",
+					interrupts: localStandard
+				});
+				else if (localLegacy) setPending({
+					kind: "legacy",
+					event: localLegacy
+				});
+				localLegacy = null;
+				localStandard = null;
 			},
 			onRunFailed: () => {
-				localInterrupt = null;
-				setPendingEvent(null);
+				localLegacy = null;
+				localStandard = null;
+				responsesRef.current = {};
+				setPending(null);
 			}
 		});
 		return () => subscription.unsubscribe();
 	}, [agent]);
-	const resolve = useCallback(async (response) => {
+	const submitStandardIfComplete = useCallback(async (interrupts) => {
+		if (!interrupts.every((i) => responsesRef.current[i.id])) return;
+		const expired = interrupts.find((i) => isInterruptExpired(i));
+		if (expired) {
+			console.error(`[CopilotKit] useInterrupt: interrupt ${expired.id} expired at ${expired.expiresAt}; not resuming.`);
+			responsesRef.current = {};
+			setPending(null);
+			return;
+		}
+		const resume = buildResumeArray(interrupts, responsesRef.current);
+		for (const i of interrupts) {
+			if (!i.toolCallId) continue;
+			const response = responsesRef.current[i.id];
+			const content = response.status === "cancelled" ? { status: "cancelled" } : response.payload ?? { status: "resolved" };
+			agent.addMessage({
+				id: randomUUID$1(),
+				role: "tool",
+				toolCallId: i.toolCallId,
+				content: JSON.stringify(content)
+			});
+		}
+		responsesRef.current = {};
 		try {
+			return await copilotkit.runAgent({
+				agent,
+				resume
+			});
+		} catch (err) {
+			console.error("[CopilotKit] useInterrupt resolve: runAgent rejected; clearing pending + rethrowing", err);
+			setPending(null);
+			throw err;
+		}
+	}, [agent, copilotkit]);
+	const resolve = useCallback(async (payload, interruptId) => {
+		const current = pendingRef.current;
+		if (!current) return;
+		if (current.kind === "legacy") try {
 			return await copilotkit.runAgent({
 				agent,
 				forwardedProps: { command: {
-					resume: response,
-					interruptEvent: pendingEventRef.current?.value
+					resume: payload,
+					interruptEvent: current.event.value
 				} }
 			});
 		} catch (err) {
 			console.error("[CopilotKit] useInterrupt resolve: runAgent rejected; clearing pending + rethrowing", err);
-			setPendingEvent(null);
+			setPending(null);
 			throw err;
 		}
-	}, [agent, copilotkit]);
+		if (current.interrupts.length > 1 && interruptId === void 0) console.warn(`[CopilotKit] useInterrupt: resolve()/cancel() called without an interruptId while ${current.interrupts.length} interrupts are open; defaulting to the first. Pass an interruptId to address a specific interrupt.`);
+		const id = interruptId ?? current.interrupts[0]?.id;
+		if (!id) return;
+		responsesRef.current[id] = {
+			status: "resolved",
+			payload
+		};
+		return submitStandardIfComplete(current.interrupts);
+	}, [
+		agent,
+		copilotkit,
+		submitStandardIfComplete
+	]);
+	const cancel = useCallback(async (interruptId) => {
+		const current = pendingRef.current;
+		if (!current) return;
+		if (current.kind === "legacy") {
+			console.warn("[CopilotKit] useInterrupt: cancel() is not supported for legacy on_interrupt interrupts; dismissing.");
+			setPending(null);
+			return;
+		}
+		if (current.interrupts.length > 1 && interruptId === void 0) console.warn(`[CopilotKit] useInterrupt: resolve()/cancel() called without an interruptId while ${current.interrupts.length} interrupts are open; defaulting to the first. Pass an interruptId to address a specific interrupt.`);
+		const id = interruptId ?? current.interrupts[0]?.id;
+		if (!id) return;
+		responsesRef.current[id] = { status: "cancelled" };
+		return submitStandardIfComplete(current.interrupts);
+	}, [submitStandardIfComplete]);
 	const renderRef = useRef(config.render);
 	renderRef.current = config.render;
 	const enabledRef = useRef(config.enabled);
@@ -608,6 +781,8 @@ function useInterrupt(config) {
 	handlerRef.current = config.handler;
 	const resolveRef = useRef(resolve);
 	resolveRef.current = resolve;
+	const cancelRef = useRef(cancel);
+	cancelRef.current = cancel;
 	const isEnabled = (event) => {
 		const predicate = enabledRef.current;
 		if (!predicate) return true;
@@ -619,11 +794,12 @@ function useInterrupt(config) {
 		}
 	};
 	useEffect(() => {
-		if (!pendingEvent) {
+		if (!pending) {
 			setHandlerResult(null);
 			return;
 		}
-		if (!isEnabled(pendingEvent)) {
+		const legacyEvent = toLegacyEvent(pending);
+		if (!isEnabled(legacyEvent)) {
 			setHandlerResult(null);
 			return;
 		}
@@ -636,8 +812,11 @@ function useInterrupt(config) {
 		let maybePromise;
 		try {
 			maybePromise = handler({
-				event: pendingEvent,
-				resolve: resolveRef.current
+				event: legacyEvent,
+				interrupt: pending.kind === "standard" ? pending.interrupts[0] : null,
+				interrupts: pending.kind === "standard" ? pending.interrupts : [],
+				resolve: resolveRef.current,
+				cancel: cancelRef.current
 			});
 		} catch (err) {
 			console.error("[CopilotKit] useInterrupt handler threw; result will be null:", err);
@@ -656,19 +835,24 @@ function useInterrupt(config) {
 		return () => {
 			cancelled = true;
 		};
-	}, [pendingEvent]);
+	}, [pending]);
 	const element = useMemo(() => {
-		if (!pendingEvent) return null;
-		if (!isEnabled(pendingEvent)) return null;
+		if (!pending) return null;
+		const legacyEvent = toLegacyEvent(pending);
+		if (!isEnabled(legacyEvent)) return null;
 		return renderRef.current({
-			event: pendingEvent,
+			event: legacyEvent,
+			interrupt: pending.kind === "standard" ? pending.interrupts[0] : null,
+			interrupts: pending.kind === "standard" ? pending.interrupts : [],
 			result: handlerResult,
-			resolve
+			resolve,
+			cancel
 		});
 	}, [
-		pendingEvent,
+		pending,
 		handlerResult,
-		resolve
+		resolve,
+		cancel
 	]);
 	useEffect(() => {
 		if (config.renderInChat === false) return;
@@ -930,7 +1114,7 @@ function useThreadStoreSelector(store, selector) {
 	return useSyncExternalStore(useCallback((onStoreChange) => {
 		const subscription = store.select(selector).subscribe(onStoreChange);
 		return () => subscription.unsubscribe();
-	}, [store, selector]), () => selector(store.getState()));
+	}, [store, selector]), () => selector(store.getState()), () => selector(store.getServerState()));
 }
 /**
 * React hook for listing and managing Intelligence platform threads.
@@ -941,9 +1125,9 @@ function useThreadStoreSelector(store, selector) {
 * current without polling — thread creates, renames, archives, and deletes
 * from any client are reflected immediately.
 *
-* Mutation methods (`renameThread`, `archiveThread`, `deleteThread`) return
-* promises that resolve once the platform confirms the operation and reject
-* with an `Error` on failure.
+* Mutation methods (`renameThread`, `archiveThread`, `unarchiveThread`,
+* `deleteThread`) return promises that resolve once the platform confirms the
+* operation and reject with an `Error` on failure.
 *
 * @param input - Agent identifier and optional list controls.
 * @returns Thread list state and stable mutation callbacks.
@@ -973,7 +1157,7 @@ function useThreadStoreSelector(store, selector) {
 * }
 * ```
 */
-function useThreads({ agentId, includeArchived, limit }) {
+function useThreads({ agentId, includeArchived, limit, enabled = true }) {
 	const { copilotkit } = useCopilotKit();
 	const [store] = useState(() => ɵcreateThreadStore({ fetch: globalThis.fetch }));
 	const coreThreads = useThreadStoreSelector(store, ɵselectThreads);
@@ -990,6 +1174,7 @@ function useThreads({ agentId, includeArchived, limit }) {
 	const storeError = useThreadStoreSelector(store, ɵselectThreadsError);
 	const hasMoreThreads = useThreadStoreSelector(store, ɵselectHasNextPage);
 	const isFetchingMoreThreads = useThreadStoreSelector(store, ɵselectIsFetchingNextPage);
+	const isMutating = useThreadStoreSelector(store, ɵselectIsMutating);
 	const headersKey = useMemo(() => {
 		return JSON.stringify(Object.entries(copilotkit.headers ?? {}).sort(([left], [right]) => left.localeCompare(right)));
 	}, [copilotkit.headers]);
@@ -1010,9 +1195,16 @@ function useThreads({ agentId, includeArchived, limit }) {
 		return /* @__PURE__ */ new Error("Thread mutations are not available on this CopilotKit runtime");
 	}, [threadMutationsSupported]);
 	const [hasDispatchedContext, setHasDispatchedContext] = useState(false);
-	const preConnectLoading = !!copilotkit.runtimeUrl && !threadEndpointsUnavailable && !hasDispatchedContext;
-	const isLoading = runtimeError || threadEndpointsError ? false : preConnectLoading || storeIsLoading;
-	const error = runtimeError ?? threadEndpointsError ?? storeError;
+	const preConnectLoading = enabled && !!copilotkit.runtimeUrl && !threadEndpointsUnavailable && !hasDispatchedContext;
+	const [configErrorDismissed, setConfigErrorDismissed] = useState(false);
+	useEffect(() => {
+		setConfigErrorDismissed(false);
+	}, [runtimeError, threadEndpointsError]);
+	const activeRuntimeError = configErrorDismissed ? null : runtimeError;
+	const activeThreadEndpointsError = configErrorDismissed ? null : threadEndpointsError;
+	const isLoading = activeRuntimeError || activeThreadEndpointsError ? false : preConnectLoading || storeIsLoading;
+	const error = activeRuntimeError ?? activeThreadEndpointsError ?? storeError;
+	const listError = storeError;
 	useEffect(() => {
 		store.start();
 		return () => {
@@ -1020,6 +1212,7 @@ function useThreads({ agentId, includeArchived, limit }) {
 		};
 	}, [store]);
 	useEffect(() => {
+		if (!enabled) return;
 		copilotkit.registerThreadStore(agentId, store);
 		return () => {
 			copilotkit.unregisterThreadStore(agentId);
@@ -1027,9 +1220,15 @@ function useThreads({ agentId, includeArchived, limit }) {
 	}, [
 		copilotkit,
 		agentId,
-		store
+		store,
+		enabled
 	]);
 	useEffect(() => {
+		if (!enabled) {
+			store.setContext(null);
+			setHasDispatchedContext(false);
+			return;
+		}
 		if (!copilotkit.runtimeUrl) {
 			store.setContext(null);
 			setHasDispatchedContext(false);
@@ -1053,6 +1252,7 @@ function useThreads({ agentId, includeArchived, limit }) {
 		setHasDispatchedContext(true);
 	}, [
 		store,
+		enabled,
 		copilotkit.runtimeUrl,
 		runtimeStatus,
 		headersKey,
@@ -1070,16 +1270,25 @@ function useThreads({ agentId, includeArchived, limit }) {
 	}, [threadMutationsError]);
 	const renameThread = useMemo(() => guardMutation((threadId, name) => store.renameThread(threadId, name)), [store, guardMutation]);
 	const archiveThread = useMemo(() => guardMutation((threadId) => store.archiveThread(threadId)), [store, guardMutation]);
+	const unarchiveThread = useMemo(() => guardMutation((threadId) => store.unarchiveThread(threadId)), [store, guardMutation]);
 	const deleteThread = useMemo(() => guardMutation((threadId) => store.deleteThread(threadId)), [store, guardMutation]);
 	return {
 		threads,
 		isLoading,
 		error,
+		listError,
 		hasMoreThreads,
 		isFetchingMoreThreads,
+		isMutating,
 		fetchMoreThreads: useCallback(() => store.fetchNextPage(), [store]),
+		refetchThreads: useCallback(() => store.refetchThreads(), [store]),
+		startNewThread: useCallback(() => {
+			setConfigErrorDismissed(true);
+			store.startNewThread();
+		}, [store]),
 		renameThread,
 		archiveThread,
+		unarchiveThread,
 		deleteThread
 	};
 }
@@ -1154,10 +1363,20 @@ function useRenderTool(config, deps) {
 		}) : defineToolCallRenderer({
 			name: config.name,
 			args: config.parameters,
-			render: (props) => config.render({
-				...props,
-				parameters: props.args
-			}),
+			render: (props) => {
+				if (props.status === ToolCallStatus.InProgress) return config.render({
+					...props,
+					parameters: props.args
+				});
+				if (props.status === ToolCallStatus.Executing) return config.render({
+					...props,
+					parameters: props.args
+				});
+				return config.render({
+					...props,
+					parameters: props.args
+				});
+			},
 			...config.agentId ? { agentId: config.agentId } : {}
 		});
 		copilotkit.addHookRenderToolCall(renderer);