@agents24/react 0.2.6 → 0.2.8

package/dist/index.js

@@ -29,7 +29,7 @@ function getThreadActivity(thread) {
   return {
     status,
     runId: activeRun?.run_id || thread.last_run_id || null,
-    isSpinning: Boolean(activeRun),
+    isSpinning: Boolean(activeRun) && !["waiting", "interrupted"].includes(status || ""),
     isPaused: status === "paused",
     isFailed: status === "failed",
     isCompleted: status === "completed",
@@ -37,6 +37,24 @@ function getThreadActivity(thread) {
   };
 }
 var record = (value) => value && typeof value === "object" && !Array.isArray(value) ? value : null;
+function computerResourceTargets(value) {
+  const output = record(value);
+  if (!output) return [];
+  const candidates = [
+    output.resource_target,
+    ...Array.isArray(output.resource_targets) ? output.resource_targets : [],
+    ...Array.isArray(output.files) ? output.files.map((file) => record(file)?.resource_target) : []
+  ];
+  const seen = /* @__PURE__ */ new Set();
+  return candidates.flatMap((candidate) => {
+    const target = record(candidate);
+    if (target?.type !== "computer" || typeof target.thread_id !== "string" || typeof target.computer_id !== "string" || typeof target.path !== "string" || !target.path.startsWith("/workspace") || target.kind !== "file" && target.kind !== "directory") return [];
+    const key = `${target.thread_id}:${target.computer_id}:${target.path}:${target.kind}`;
+    if (seen.has(key)) return [];
+    seen.add(key);
+    return [target];
+  });
+}
 var text = (value) => typeof value === "string" && value.trim() ? value : null;
 var finiteNumber = (value) => typeof value === "number" && Number.isFinite(value) ? value : null;
 var statusToToolState = (value) => {
@@ -200,6 +218,7 @@ function partsFromResponseBlocks(blocks, fallbackText = "", fallbackPartId = "as
         state: statusToToolState(block.status),
         input: tool.input,
         output: tool.output,
+        resourceTargets: computerResourceTargets(tool.output),
         errorText: text(tool.error || block.error),
         failure: failureView(tool.failure),
         presentation: toolPresentation(tool)
@@ -369,6 +388,21 @@ function threadDetailToMessages(detail) {
     return output;
   });
 }
+function threadTimelineToMessages(items, detail) {
+  const feedbackByRun = new Map((detail?.turns || []).flatMap((turn) => turn.run_id && turn.feedback ? [[turn.run_id, turn.feedback]] : []));
+  return items.map((item) => ({
+    id: item.id,
+    role: item.role,
+    runId: item.run_id,
+    segmentIndex: item.segment_index,
+    content: item.text,
+    createdAt: item.created_at,
+    isFinal: item.status === "completed" || item.status === "delivered",
+    parts: item.role === "assistant" ? partsFromResponseBlocks(item.response_blocks, item.text, `${item.id}-text`) : item.text ? [{ id: `${item.id}-text`, type: "text", kind: "text", text: item.text }] : [],
+    attachments: item.role === "user" ? item.attachment_ids.map((id) => ({ id, filename: "Attachment" })) : void 0,
+    feedback: item.role === "assistant" && item.run_id ? feedbackByRun.get(item.run_id) : void 0
+  }));
+}
 function latestThreadContext(detail) {
   let contextWindow = null;
   for (const turn of detail.turns || []) {
@@ -477,12 +511,18 @@ function withAgentChatBackgroundError(state, cause) {
 function clearAgentChatBackgroundError(state) {
   return state.backgroundError ? { ...state, backgroundError: null } : state;
 }
-function reconcileRefreshedThreads(current, incoming, activeThreadId) {
-  if (!activeThreadId || incoming.some((thread) => thread.id === activeThreadId)) {
-    return incoming;
-  }
-  const active = current.find((thread) => thread.id === activeThreadId);
-  return active?.isHydrated ? [active, ...incoming] : incoming;
+function reconcileRefreshedThreads(current, incoming, activeThreadId, concurrentEvents = []) {
+  const currentById = new Map(current.map((thread) => [thread.id, thread]));
+  const newest = incoming.map((thread) => preferNewestThreadSummary(currentById.get(thread.id), thread));
+  const active = activeThreadId && !incoming.some((thread) => thread.id === activeThreadId) ? current.find((thread) => thread.id === activeThreadId) : null;
+  const base = active?.isHydrated ? [active, ...newest] : newest;
+  return concurrentEvents.reduce(applyThreadSummaryEvent, base);
+}
+function preferNewestThreadSummary(current, incoming) {
+  if (!current?.updated_at || !incoming.updated_at) return incoming;
+  const currentTime = Date.parse(current.updated_at);
+  const incomingTime = Date.parse(incoming.updated_at);
+  return Number.isFinite(currentTime) && Number.isFinite(incomingTime) && currentTime > incomingTime ? current : incoming;
 }
 function adoptStreamingThread(state, threadId) {
   const normalizedThreadId = threadId.trim();
@@ -509,13 +549,20 @@ function appendStableStreamingTurn(messages, userMessage, assistantMessage) {
   ))) next.push(assistantMessage);
   return next;
 }
+function preserveMountedMessageIds(canonical, current) {
+  return canonical.map((message) => {
+    const mounted = current.find((item) => item.role === message.role && (item.durableId === message.id || item.id === message.id || message.role === "assistant" && message.segmentIndex === 1 && item.runId && item.runId === message.runId && !item.durableId));
+    return mounted && mounted.id !== message.id ? { ...message, id: mounted.id, durableId: message.id } : message;
+  });
+}
 function upsertStableAssistantMessage(messages, input) {
   const next = [...messages];
   for (const baseMessage of input.baseMessages || []) {
-    const isTarget = baseMessage.role === "assistant" && (Boolean(input.messageId && baseMessage.id === input.messageId) || Boolean(input.runId && baseMessage.runId === input.runId));
+    const isTarget = baseMessage.role === "assistant" && (Boolean(input.messageId && baseMessage.id === input.messageId) || Boolean(!input.strictMessageId && input.runId && baseMessage.runId === input.runId));
     if (!isTarget && !next.some((message) => message.id === baseMessage.id)) next.push(baseMessage);
   }
-  const index = next.findIndex((message) => message.role === "assistant" && (Boolean(input.messageId && message.id === input.messageId) || Boolean(input.runId && message.runId === input.runId)));
+  const exactIndex = next.findIndex((message) => message.role === "assistant" && Boolean(input.messageId && message.id === input.messageId));
+  const index = exactIndex >= 0 ? exactIndex : input.strictMessageId ? -1 : next.findIndex((message) => message.role === "assistant" && Boolean(input.runId && message.runId === input.runId));
   if (index === -1) next.push(input.create());
   else next[index] = input.update(next[index]);
   return next;
@@ -561,11 +608,14 @@ function applyRuntimeEvent(state, event) {
   const projection = assistantProjectionFromEvent(event);
   const eventName = String(event.event || "");
   const runId = event.run_id || state.activeRunId;
-  const messageId = state.streamingMessageId || `${runId || "run"}-assistant`;
+  const segmentId = typeof event.payload?.segment_id === "string" ? event.payload.segment_id : null;
+  const distinctSegment = Boolean(segmentId && segmentId !== `${runId}:0`);
+  const messageId = distinctSegment ? `${runId || "run"}-assistant-${segmentId}` : state.streamingMessageId || `${runId || "run"}-assistant`;
   const terminal = eventName === "run.completed" || eventName === "run.failed" || eventName === "run.cancelled";
   const paused = eventName === "run.paused" || projection.parts.some((part) => part.kind === "hitl" && part.status === "pending");
+  const suspension = eventName === "run.waiting" ? "waiting" : eventName === "run.interrupted" ? "interrupted" : null;
   const cancelling = eventName === "run.cancelling" || String(event.payload?.status || "") === "cancelling";
-  const existing = state.messages.find((message) => message.role === "assistant" && (message.id === messageId || Boolean(runId && message.runId === runId)));
+  const existing = state.messages.find((message) => message.role === "assistant" && message.id === messageId) || (!distinctSegment ? state.messages.find((message) => message.role === "assistant" && Boolean(runId && message.runId === runId)) : void 0);
   const payload = event.payload || {};
   const eventThreadId = typeof payload.thread_id === "string" && payload.thread_id.trim() ? payload.thread_id.trim() : null;
   const contextApplies = (!state.activeThreadId || !eventThreadId || eventThreadId === state.activeThreadId) && (!state.activeRunId || !runId || runId === state.activeRunId);
@@ -592,6 +642,7 @@ function applyRuntimeEvent(state, event) {
   const messages = upsertStableAssistantMessage(state.messages, {
     messageId,
     runId,
+    strictMessageId: distinctSegment,
     create: () => ({
       id: messageId,
       role: "assistant",
@@ -637,14 +688,26 @@ function applyRuntimeEvent(state, event) {
     contextWindow,
     contextCompression,
     contextCompressionRevision: hasLiveCompressionUpdate ? state.contextCompressionRevision + 1 : state.contextCompressionRevision,
-    runState: paused ? "paused" : cancelling ? "cancelling" : terminal ? eventName === "run.completed" ? "completed" : eventName === "run.cancelled" ? "cancelled" : "failed" : "streaming",
-    streamingMessageId: terminal || paused ? null : messageId
+    runState: suspension || (paused ? "paused" : cancelling ? "cancelling" : terminal ? eventName === "run.completed" ? "completed" : eventName === "run.cancelled" ? "cancelled" : "failed" : "streaming"),
+    streamingMessageId: terminal || paused || suspension ? null : messageId
   };
 }
 function applyRuntimeEvents(state, events) {
   return events.reduce(applyRuntimeEvent, state);
 }
 function applyThreadSummaryEvent(threads, event) {
+  if (String(event.event) === "thread.task.updated") {
+    const value = event;
+    const handle = value.task?.handle;
+    if (typeof handle !== "string") return threads;
+    return threads.map((thread) => thread.id === value.thread_id ? {
+      ...thread,
+      taskNotifications: [
+        ...(thread.taskNotifications || []).filter((task) => task.handle !== handle),
+        { ...value.task, handle }
+      ].slice(-1e3)
+    } : thread);
+  }
   if (event.event === "snapshot_required") return threads;
   if (event.event === "thread.deleted") return threads.filter((thread) => thread.id !== event.thread_id);
   if (event.event !== "thread.summary.updated") return threads;
@@ -652,12 +715,153 @@ function applyThreadSummaryEvent(threads, event) {
   const index = threads.findIndex((thread) => thread.id === incoming.id);
   if (index === -1) return [{ ...incoming, messages: incoming.messages || [], isHydrated: false }, ...threads];
   const next = [...threads];
-  next[index] = { ...next[index], ...incoming, messages: next[index].messages, isHydrated: next[index].isHydrated };
+  next[index] = preferNewestThreadSummary(next[index], {
+    ...next[index],
+    ...incoming,
+    messages: next[index].messages,
+    isHydrated: next[index].isHydrated
+  });
   return next;
 }
 
-// src/use-agent-chat.ts
+// src/thread-message-queue.ts
 import * as React2 from "react";
+function useThreadMessageQueue({ threadId, transport, onPromoted }) {
+  const [pendingMessages, setPendingMessages] = React2.useState([]);
+  const [messageQueue, setMessageQueue] = React2.useState(null);
+  const pendingRef = React2.useRef(/* @__PURE__ */ new Map());
+  const versionRef = React2.useRef(0);
+  const cursorRef = React2.useRef(0);
+  const promotedRef = React2.useRef(/* @__PURE__ */ new Set());
+  const threadRef = React2.useRef(threadId);
+  const transportRef = React2.useRef(transport);
+  const onPromotedRef = React2.useRef(onPromoted);
+  threadRef.current = threadId;
+  transportRef.current = transport;
+  onPromotedRef.current = onPromoted;
+  const hydrate = React2.useCallback((page, selectedThreadId) => {
+    if (threadRef.current !== selectedThreadId) return;
+    const pending = page.pending.filter((message) => !promotedRef.current.has(message.id));
+    for (const message of pending) pendingRef.current.set(message.id, message);
+    setPendingMessages(pending);
+    setMessageQueue(page.queue);
+  }, []);
+  const refresh = React2.useCallback(async (selectedThreadId = threadRef.current) => {
+    if (!selectedThreadId) return null;
+    const version = ++versionRef.current;
+    const page = await transportRef.current.list(selectedThreadId);
+    if (version !== versionRef.current || threadRef.current !== selectedThreadId) return null;
+    for (const item of page.items) {
+      if (item.role === "user" && item.status === "delivered" && item.run_id) {
+        const pending = pendingRef.current.get(item.id);
+        if (pending && !promotedRef.current.has(item.id)) {
+          promotedRef.current.add(item.id);
+          pendingRef.current.delete(item.id);
+          onPromotedRef.current(pending, item.run_id);
+        }
+      }
+    }
+    hydrate(page, selectedThreadId);
+    return page;
+  }, [hydrate]);
+  const acceptNotice = React2.useCallback((notice) => {
+    if (notice.cursor && notice.cursor <= cursorRef.current) return false;
+    if (notice.cursor) cursorRef.current = notice.cursor;
+    const pending = pendingRef.current.get(notice.messageId);
+    if (notice.status === "delivered" && notice.runId && pending && !promotedRef.current.has(pending.id)) {
+      promotedRef.current.add(pending.id);
+      pendingRef.current.delete(pending.id);
+      versionRef.current += 1;
+      setPendingMessages((current) => current.filter((message) => message.id !== pending.id));
+      onPromotedRef.current(pending, notice.runId);
+    }
+    if (notice.status === "removed") pendingRef.current.delete(notice.messageId);
+    void refresh().catch(() => void 0);
+    return true;
+  }, [refresh]);
+  const submit = React2.useCallback(async (input) => {
+    const selectedThreadId = threadRef.current;
+    if (!selectedThreadId) throw new Error("No active Agent thread is available.");
+    const result = await transportRef.current.submit({ ...input, threadId: selectedThreadId });
+    if (threadRef.current !== selectedThreadId) return result;
+    versionRef.current += 1;
+    if (!result.run_id && ["queued", "steer_pending", "blocked"].includes(result.status)) {
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      const pending = {
+        id: result.message_id,
+        thread_id: selectedThreadId,
+        sequence: Number.MAX_SAFE_INTEGER,
+        run_id: null,
+        turn_id: null,
+        segment_index: null,
+        role: "user",
+        status: result.status,
+        requested_mode: input.mode,
+        text: input.input,
+        attachment_ids: input.attachmentIds || [],
+        response_blocks: [],
+        revision: 1,
+        created_at: now,
+        updated_at: now
+      };
+      pendingRef.current.set(pending.id, pending);
+      setPendingMessages((current) => current.some((message) => message.id === pending.id) ? current : [...current, pending]);
+      setMessageQueue((current) => ({
+        pending_count: Math.max(current?.pending_count || 0, result.queue_position || 1),
+        paused: current?.paused || false,
+        reason: current?.reason || null
+      }));
+    }
+    void refresh().catch(() => void 0);
+    return result;
+  }, [refresh]);
+  const edit = React2.useCallback(async (message, input) => {
+    const updated = await transportRef.current.edit(message, input);
+    versionRef.current += 1;
+    pendingRef.current.set(updated.id, updated);
+    await refresh(message.thread_id);
+    return updated;
+  }, [refresh]);
+  const remove = React2.useCallback(async (message) => {
+    await transportRef.current.remove(message);
+    versionRef.current += 1;
+    pendingRef.current.delete(message.id);
+    setPendingMessages((current) => current.filter((item) => item.id !== message.id));
+    await refresh(message.thread_id);
+  }, [refresh]);
+  const retractForEdit = React2.useCallback(async (message) => {
+    await remove(message);
+    return { text: message.text, attachment_ids: message.attachment_ids, attachments: message.attachments };
+  }, [remove]);
+  const resume = React2.useCallback(async () => {
+    const selectedThreadId = threadRef.current;
+    if (!selectedThreadId) return null;
+    const result = await transportRef.current.resume(selectedThreadId);
+    await refresh(selectedThreadId);
+    return result;
+  }, [refresh]);
+  React2.useEffect(() => {
+    versionRef.current += 1;
+    cursorRef.current = 0;
+    promotedRef.current.clear();
+    pendingRef.current.clear();
+    setPendingMessages([]);
+    setMessageQueue(null);
+    if (threadId) void refresh(threadId).catch(() => void 0);
+  }, [threadId, refresh]);
+  React2.useEffect(() => {
+    if (!threadId || !pendingMessages.length || messageQueue?.paused) return;
+    const clock = globalThis;
+    const timer = clock.setInterval(() => {
+      void refresh(threadId).catch(() => void 0);
+    }, 3e3);
+    return () => clock.clearInterval(timer);
+  }, [threadId, pendingMessages.length, messageQueue?.paused, refresh]);
+  return { pendingMessages, messageQueue, refresh, hydrate, acceptNotice, submit, edit, remove, retractForEdit, resume };
+}
+
+// src/use-agent-chat.ts
+import * as React6 from "react";
 
 // src/runtime-event-buffer.ts
 function runtimeEventFrameScheduler() {
@@ -707,6 +911,219 @@ function createRuntimeEventFrameBuffer(apply, scheduleFrame) {
   };
 }
 
+// src/thread-summary-subscription.ts
+function waitForReconnect(signal, delay) {
+  return new Promise((resolve) => {
+    if (signal.aborted) return resolve();
+    const clock = globalThis;
+    const finish = () => {
+      clock.clearTimeout(timer);
+      signal.removeEventListener("abort", finish);
+      resolve();
+    };
+    const timer = clock.setTimeout(finish, delay);
+    signal.addEventListener("abort", finish, { once: true });
+  });
+}
+async function subscribeToThreadSummaries(input) {
+  let cursor;
+  let failures = 0;
+  while (!input.signal.aborted) {
+    let refreshedFromSnapshot = false;
+    try {
+      await input.client.threads.events({ cursor, signal: input.signal }, async (event) => {
+        if (event.event === "snapshot_required") {
+          await input.refresh();
+          cursor = void 0;
+          refreshedFromSnapshot = true;
+          return;
+        }
+        cursor = event.cursor;
+        failures = 0;
+        await input.onEvent(event);
+      });
+      if (input.signal.aborted) break;
+      if (!refreshedFromSnapshot) await input.refresh();
+      input.onRecovered();
+      failures = 0;
+    } catch (error) {
+      if (input.signal.aborted || isAbortLike(error)) break;
+      input.onError(error);
+      failures += 1;
+      try {
+        await input.refresh();
+        input.onRecovered();
+      } catch (refreshError) {
+        if (!input.signal.aborted && !isAbortLike(refreshError)) input.onError(refreshError);
+      }
+    }
+    if (!input.signal.aborted) {
+      await waitForReconnect(input.signal, Math.min(3e4, 1e3 * 2 ** Math.min(failures, 5)));
+    }
+  }
+}
+
+// src/use-agent-chat-thread-list.ts
+import * as React3 from "react";
+function summaryToStored(thread) {
+  return { ...thread, id: String(thread.id), messages: [], isHydrated: false };
+}
+function useAgentChatThreadList({ client, threadPageSize, stateRef, update, clearOperationError, failOperation }) {
+  const [isLoadingThreads, setIsLoadingThreads] = React3.useState(false);
+  const [isLoadingMoreThreads, setIsLoadingMoreThreads] = React3.useState(false);
+  const [threadTotal, setThreadTotal] = React3.useState();
+  const refreshPromiseRef = React3.useRef(null);
+  const eventsDuringRefreshRef = React3.useRef(null);
+  const refreshThreads = React3.useCallback(() => {
+    if (refreshPromiseRef.current) return refreshPromiseRef.current;
+    clearOperationError();
+    setIsLoadingThreads(true);
+    eventsDuringRefreshRef.current = [];
+    const request = (async () => {
+      try {
+        const result = await client.threads.list({ limit: threadPageSize });
+        const concurrentEvents = eventsDuringRefreshRef.current || [];
+        eventsDuringRefreshRef.current = null;
+        setThreadTotal(result.total);
+        update((current) => {
+          const byId = new Map(current.threads.map((thread) => [thread.id, thread]));
+          const incoming = result.items.map((item) => {
+            const existing = byId.get(item.id);
+            return { ...existing, ...summaryToStored(item), messages: existing?.messages || [], isHydrated: existing?.isHydrated };
+          });
+          return { ...current, threads: reconcileRefreshedThreads(current.threads, incoming, current.activeThreadId, concurrentEvents) };
+        });
+      } catch (error) {
+        if (!isAbortLike(error)) {
+          failOperation("refresh_threads", error);
+          throw error;
+        }
+      } finally {
+        eventsDuringRefreshRef.current = null;
+        setIsLoadingThreads(false);
+      }
+    })();
+    refreshPromiseRef.current = request;
+    void request.finally(() => {
+      if (refreshPromiseRef.current === request) refreshPromiseRef.current = null;
+    }).catch(() => void 0);
+    return request;
+  }, [clearOperationError, client, failOperation, threadPageSize, update]);
+  const loadMoreThreads = React3.useCallback(async () => {
+    if (isLoadingMoreThreads) return;
+    const skip = stateRef.current.threads.length;
+    if (threadTotal !== void 0 && skip >= threadTotal) return;
+    clearOperationError();
+    setIsLoadingMoreThreads(true);
+    try {
+      const result = await client.threads.list({ skip, limit: threadPageSize });
+      setThreadTotal(result.total);
+      update((current) => {
+        const byId = new Map(current.threads.map((thread) => [thread.id, thread]));
+        for (const item of result.items) {
+          const existing = byId.get(item.id);
+          byId.set(item.id, preferNewestThreadSummary(existing, {
+            ...existing,
+            ...summaryToStored(item),
+            messages: existing?.messages || [],
+            isHydrated: existing?.isHydrated
+          }));
+        }
+        return { ...current, threads: [...byId.values()] };
+      });
+    } catch (error) {
+      if (!isAbortLike(error)) {
+        failOperation("load_more_threads", error);
+        throw error;
+      }
+    } finally {
+      setIsLoadingMoreThreads(false);
+    }
+  }, [clearOperationError, client, failOperation, isLoadingMoreThreads, stateRef, threadPageSize, threadTotal, update]);
+  return { isLoadingThreads, isLoadingMoreThreads, threadTotal, eventsDuringRefreshRef, refreshThreads, loadMoreThreads };
+}
+
+// src/use-agent-chat-feedback.ts
+import * as React4 from "react";
+function useAgentChatFeedback({ client, update, clearOperationError, failOperation }) {
+  return React4.useCallback(async (message, input) => {
+    const runId = message.runId;
+    if (!runId || message.role !== "assistant" || message.isFinal === false) {
+      const error = new Error("Only persisted final responses can receive feedback.");
+      failOperation("set_feedback", error);
+      throw error;
+    }
+    const previous = message.feedback ?? null;
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+    const optimistic = input.rating ? {
+      rating: input.rating,
+      reason: input.rating === "dislike" ? input.reason ?? null : null,
+      comment: input.rating === "dislike" ? input.comment?.trim() || null : null,
+      created_at: previous?.created_at || timestamp,
+      updated_at: timestamp
+    } : null;
+    const replaceFeedback = (current, feedback) => ({
+      ...current,
+      messages: current.messages.map((item) => item.id === message.id ? { ...item, feedback } : item),
+      threads: current.threads.map((thread) => ({
+        ...thread,
+        messages: thread.messages.map((item) => item.id === message.id ? { ...item, feedback } : item)
+      }))
+    });
+    clearOperationError();
+    update((current) => replaceFeedback(current, optimistic));
+    try {
+      const result = await client.runs.setFeedback({ runId, ...input });
+      update((current) => replaceFeedback(current, result.feedback));
+    } catch (error) {
+      update((current) => withAgentChatOperationError(replaceFeedback(current, previous), "set_feedback", error));
+      throw error;
+    }
+  }, [clearOperationError, client, failOperation, update]);
+}
+
+// src/use-agent-chat-queue-actions.ts
+import * as React5 from "react";
+function useAgentChatQueueActions({
+  queue,
+  stateRef,
+  createId,
+  clearOperationError,
+  failOperation,
+  refreshMessages,
+  attachRun
+}) {
+  const steer = React5.useCallback(async (text2) => {
+    const threadId = stateRef.current.activeThreadId;
+    if (!threadId || !text2.trim()) throw new Error("An active thread and text are required to steer.");
+    clearOperationError();
+    try {
+      await queue.submit({ mode: "steer", input: text2.trim(), idempotencyKey: createId() });
+      await refreshMessages(threadId);
+    } catch (error) {
+      failOperation("submit", error);
+      throw error;
+    }
+  }, [clearOperationError, createId, failOperation, queue.submit, refreshMessages, stateRef]);
+  const editPendingMessage = React5.useCallback(async (message, input) => {
+    await queue.edit(message, {
+      text: input.text,
+      attachmentIds: input.attachmentIds ?? message.attachment_ids,
+      requestedAgentId: input.requestedAgentId,
+      requestedModelId: input.requestedModelId
+    });
+  }, [queue.edit]);
+  const steerPendingMessage = React5.useCallback(async (message) => {
+    await queue.edit(message, { text: message.text, attachmentIds: message.attachment_ids, mode: "steer" });
+  }, [queue.edit]);
+  const resumeQueue = React5.useCallback(async () => {
+    if (!stateRef.current.activeThreadId) return;
+    const result = await queue.resume();
+    if (result?.run_id) void attachRun(result.run_id).catch(() => void 0);
+  }, [attachRun, queue.resume, stateRef]);
+  return { steer, editPendingMessage, steerPendingMessage, removePendingMessage: queue.remove, resumeQueue };
+}
+
 // src/initial-thread.ts
 function resolveInitialActiveThreadId(options, storedThreadId) {
   return Object.prototype.hasOwnProperty.call(options, "activeThreadId") ? options.activeThreadId ?? null : storedThreadId;
@@ -719,9 +1136,6 @@ function isCurrentThreadOpenRequest(input) {
 }
 
 // src/use-agent-chat.ts
-function summaryToStored(thread) {
-  return { ...thread, id: String(thread.id), messages: [], isHydrated: false };
-}
 function activeRunIdFromThread(thread) {
   if (!thread) return null;
   const activity = getThreadActivity(thread);
@@ -732,7 +1146,7 @@ function useAgentChat(options = {}) {
   const client = options.client || runtime.client;
   const pageSize = options.pageSize ?? 30;
   const threadPageSize = options.threadPageSize ?? 50;
-  const [state, setState] = React2.useState(() => ({
+  const [state, setState] = React6.useState(() => ({
     ...initialAgentChatState,
     activeThreadId: resolveInitialActiveThreadId(
       options,
@@ -740,24 +1154,25 @@ function useAgentChat(options = {}) {
     ),
     threads: runtime.storage?.loadThreads() ?? []
   }));
-  const [isLoadingThreads, setIsLoadingThreads] = React2.useState(false);
-  const [isLoadingMoreThreads, setIsLoadingMoreThreads] = React2.useState(false);
-  const [threadTotal, setThreadTotal] = React2.useState();
-  const [isLoadingHistory, setIsLoadingHistory] = React2.useState(false);
-  const [isLoadingOlder, setIsLoadingOlder] = React2.useState(false);
-  const [isSubmitting, setIsSubmitting] = React2.useState(false);
-  const streamControllerRef = React2.useRef(null);
-  const threadOpenControllerRef = React2.useRef(null);
-  const threadOpenGenerationRef = React2.useRef(0);
-  const refreshThreadsPromiseRef = React2.useRef(null);
-  const attachRunRef = React2.useRef(async () => void 0);
-  const stateRef = React2.useRef(state);
+  const [isLoadingHistory, setIsLoadingHistory] = React6.useState(false);
+  const [isLoadingOlder, setIsLoadingOlder] = React6.useState(false);
+  const [isSubmitting, setIsSubmitting] = React6.useState(false);
+  const streamControllerRef = React6.useRef(null);
+  const threadOpenControllerRef = React6.useRef(null);
+  const threadOpenGenerationRef = React6.useRef(0);
+  const attachRunRef = React6.useRef(async () => void 0);
+  const messageRefreshVersionRef = React6.useRef(0);
+  const promotedRunHintRef = React6.useRef(null);
+  const promotedAttachRef = React6.useRef(null);
+  const firstSubmissionRef = React6.useRef(null);
+  const firstSubmissionAdmittedRef = React6.useRef(null);
+  const stateRef = React6.useRef(state);
   stateRef.current = state;
-  const persist = React2.useCallback((next) => {
+  const persist = React6.useCallback((next) => {
     runtime.storage?.saveThreads(next.threads);
     runtime.storage?.saveActiveThreadId?.(next.activeThreadId);
   }, [runtime.storage]);
-  const update = React2.useCallback((updater) => {
+  const update = React6.useCallback((updater) => {
     setState((current) => {
       const next = updater(current);
       stateRef.current = next;
@@ -765,116 +1180,121 @@ function useAgentChat(options = {}) {
       return next;
     });
   }, [persist]);
-  const eventBuffer = React2.useMemo(
+  const queueTransport = React6.useMemo(() => ({
+    list: (threadId) => client.threads.messages.list({ threadId, limit: pageSize }),
+    submit: (input) => client.threads.messages.submit(input),
+    edit: (message, input) => client.threads.messages.edit({
+      threadId: message.thread_id,
+      messageId: message.id,
+      revision: message.revision,
+      input: input.text,
+      attachmentIds: input.attachmentIds ?? message.attachment_ids,
+      mode: input.mode,
+      requestedAgentId: input.requestedAgentId,
+      requestedModelId: input.requestedModelId
+    }),
+    remove: async (message) => {
+      await client.threads.messages.remove({ threadId: message.thread_id, messageId: message.id, revision: message.revision });
+    },
+    resume: (threadId) => client.threads.resumeQueue({ threadId })
+  }), [client, pageSize]);
+  const onQueuePromotion = React6.useCallback((message, runId) => {
+    if (stateRef.current.activeThreadId !== message.thread_id) return;
+    promotedRunHintRef.current = runId;
+    const userMessage = threadTimelineToMessages([{ ...message, run_id: runId, status: "delivered" }])[0];
+    update((current) => current.activeThreadId === message.thread_id && !current.messages.some((item) => item.id === userMessage.id) ? { ...current, messages: [...current.messages, userMessage] } : current);
+    if (stateRef.current.activeRunId !== runId && promotedAttachRef.current !== runId) {
+      promotedAttachRef.current = runId;
+      void attachRunRef.current(runId).catch(() => {
+        promotedAttachRef.current = null;
+      });
+    }
+  }, [update]);
+  const queue = useThreadMessageQueue({ threadId: state.activeThreadId, transport: queueTransport, onPromoted: onQueuePromotion });
+  const { pendingMessages, messageQueue } = queue;
+  const eventBuffer = React6.useMemo(
     () => createRuntimeEventFrameBuffer(
       (events) => update((current) => applyRuntimeEvents(current, events)),
       runtimeEventFrameScheduler()
     ),
     [update]
   );
-  const clearOperationError = React2.useCallback((operation) => {
+  const clearOperationError = React6.useCallback((operation) => {
     update((current) => clearAgentChatOperationError(current, operation));
   }, [update]);
-  const clearBackgroundError = React2.useCallback(() => {
+  const clearBackgroundError = React6.useCallback(() => {
     update(clearAgentChatBackgroundError);
   }, [update]);
-  const failOperation = React2.useCallback((operation, cause) => {
+  const failOperation = React6.useCallback((operation, cause) => {
     update((current) => withAgentChatOperationError(current, operation, cause));
   }, [update]);
-  const invalidateThreadOpen = React2.useCallback(() => {
+  const {
+    isLoadingThreads,
+    isLoadingMoreThreads,
+    threadTotal,
+    eventsDuringRefreshRef: threadEventsDuringRefreshRef,
+    refreshThreads,
+    loadMoreThreads
+  } = useAgentChatThreadList({ client, threadPageSize, stateRef, update, clearOperationError, failOperation });
+  const invalidateThreadOpen = React6.useCallback(() => {
     threadOpenGenerationRef.current += 1;
     threadOpenControllerRef.current?.abort("Thread selection changed.");
     threadOpenControllerRef.current = null;
     setIsLoadingHistory(false);
   }, []);
-  const detach = React2.useCallback(() => {
+  const detach = React6.useCallback(() => {
     eventBuffer.flush();
     streamControllerRef.current?.abort();
     streamControllerRef.current = null;
     update((current) => ({ ...current, streamingMessageId: null, runState: current.activeRunId ? "reconnecting" : "idle" }));
   }, [eventBuffer, update]);
-  React2.useEffect(() => () => {
+  const refreshMessages = React6.useCallback(async (threadId, promotedRunId) => {
+    const target = threadId || stateRef.current.activeThreadId;
+    if (!target) return;
+    const version = ++messageRefreshVersionRef.current;
+    const page = await client.threads.messages.list({ threadId: target, limit: pageSize });
+    if (stateRef.current.activeThreadId !== target || version !== messageRefreshVersionRef.current) return;
+    queue.hydrate(page, target);
+    const promoted = promotedRunId || promotedRunHintRef.current;
+    if (promoted && page.items.some((message) => message.role === "user" && message.run_id === promoted)) {
+      promotedRunHintRef.current = null;
+      update((current) => {
+        if (current.activeThreadId !== target) return current;
+        const canonical = preserveMountedMessageIds(threadTimelineToMessages(page.items), current.messages);
+        const canonicalIds = new Set(canonical.map((message) => message.id));
+        const older = current.messages.filter((message) => !canonicalIds.has(message.id) && message.id !== current.streamingMessageId);
+        const live = current.activeRunId === promoted ? current.messages.filter((message) => message.id === current.streamingMessageId) : [];
+        return {
+          ...current,
+          messages: [...older, ...canonical, ...live.filter((message) => !canonicalIds.has(message.id))],
+          streamingMessageId: live.length ? current.streamingMessageId : null
+        };
+      });
+      return;
+    }
+    if (stateRef.current.activeRunId) {
+      const delivered = threadTimelineToMessages(page.items.filter((item) => item.role === "user" && item.run_id === stateRef.current.activeRunId && (item.segment_index ?? 0) > 0));
+      if (delivered.length) update((current) => {
+        if (current.activeThreadId !== target) return current;
+        const additions = delivered.filter((item) => !current.messages.some((existing) => existing.id === item.id));
+        return additions.length ? { ...current, messages: [...current.messages, ...additions] } : current;
+      });
+    }
+    if (!stateRef.current.activeRunId && page.items.length) {
+      update((current) => current.activeThreadId === target && !current.activeRunId ? (() => {
+        const messages = preserveMountedMessageIds(threadTimelineToMessages(page.items), current.messages);
+        return { ...current, messages, threads: current.threads.map((thread) => thread.id === target ? { ...thread, messages } : thread) };
+      })() : current);
+    }
+  }, [client, pageSize, queue.hydrate, update]);
+  React6.useEffect(() => () => {
     eventBuffer.dispose();
     streamControllerRef.current?.abort();
     threadOpenControllerRef.current?.abort();
   }, [eventBuffer]);
-  const refreshThreads = React2.useCallback(() => {
-    if (refreshThreadsPromiseRef.current) return refreshThreadsPromiseRef.current;
-    clearOperationError();
-    setIsLoadingThreads(true);
-    const request = (async () => {
-      try {
-        const result = await client.threads.list({ limit: threadPageSize });
-        setThreadTotal(result.total);
-        update((current) => {
-          const byId = new Map(current.threads.map((thread) => [thread.id, thread]));
-          const nextThreads = result.items.map((item) => {
-            const existing = byId.get(item.id);
-            return { ...existing, ...summaryToStored(item), messages: existing?.messages || [], isHydrated: existing?.isHydrated };
-          });
-          return {
-            ...current,
-            threads: reconcileRefreshedThreads(
-              current.threads,
-              nextThreads,
-              current.activeThreadId
-            )
-          };
-        });
-      } catch (error) {
-        if (!isAbortLike(error)) {
-          failOperation("refresh_threads", error);
-          throw error;
-        }
-      } finally {
-        setIsLoadingThreads(false);
-      }
-    })();
-    refreshThreadsPromiseRef.current = request;
-    void request.then(
-      () => {
-        if (refreshThreadsPromiseRef.current === request) refreshThreadsPromiseRef.current = null;
-      },
-      () => {
-        if (refreshThreadsPromiseRef.current === request) refreshThreadsPromiseRef.current = null;
-      }
-    );
-    return request;
-  }, [clearOperationError, client, failOperation, threadPageSize, update]);
-  const loadMoreThreads = React2.useCallback(async () => {
-    if (isLoadingMoreThreads) return;
-    const skip = stateRef.current.threads.length;
-    if (threadTotal !== void 0 && skip >= threadTotal) return;
-    clearOperationError();
-    setIsLoadingMoreThreads(true);
-    try {
-      const result = await client.threads.list({ skip, limit: threadPageSize });
-      setThreadTotal(result.total);
-      update((current) => {
-        const byId = new Map(current.threads.map((thread) => [thread.id, thread]));
-        for (const item of result.items) {
-          const existing = byId.get(item.id);
-          byId.set(item.id, {
-            ...existing,
-            ...summaryToStored(item),
-            messages: existing?.messages || [],
-            isHydrated: existing?.isHydrated
-          });
-        }
-        return { ...current, threads: [...byId.values()] };
-      });
-    } catch (error) {
-      if (!isAbortLike(error)) {
-        failOperation("load_more_threads", error);
-        throw error;
-      }
-    } finally {
-      setIsLoadingMoreThreads(false);
-    }
-  }, [clearOperationError, client, failOperation, isLoadingMoreThreads, threadPageSize, threadTotal, update]);
-  const openThread = React2.useCallback(async (threadId) => {
+  const openThread = React6.useCallback(async (threadId) => {
     const previousSelection = captureAgentChatThreadSelection(stateRef.current);
-    threadOpenControllerRef.current?.abort("A newer thread was selected.");
+    threadOpenControllerRef.current?.abort();
     const requestController = runtime.createAbortController();
     threadOpenControllerRef.current = requestController;
     const requestGeneration = threadOpenGenerationRef.current + 1;
@@ -908,7 +1328,16 @@ function useAgentChat(options = {}) {
         requestedThreadId: threadId,
         signalAborted: requestController.signal.aborted
       })) return;
-      const messages = threadDetailToMessages(detail);
+      const timeline = await client.threads.messages.list({ threadId, limit: pageSize, signal: requestController.signal });
+      if (!isCurrentThreadOpenRequest({
+        activeThreadId: stateRef.current.activeThreadId,
+        currentGeneration: threadOpenGenerationRef.current,
+        requestGeneration,
+        requestedThreadId: threadId,
+        signalAborted: requestController.signal.aborted
+      })) return;
+      queue.hydrate(timeline, threadId);
+      const messages = timeline.items.length ? threadTimelineToMessages(timeline.items, detail) : threadDetailToMessages(detail);
       const context = latestThreadContext(detail);
       const stored = {
         ...detail,
@@ -942,7 +1371,7 @@ function useAgentChat(options = {}) {
         signalAborted: requestController.signal.aborted
       })) await attachRunRef.current(activeRunId).catch(() => void 0);
     } catch (error) {
-      if (!isAbortLike(error) && requestGeneration === threadOpenGenerationRef.current) {
+      if (!requestController.signal.aborted && !isAbortLike(error) && requestGeneration === threadOpenGenerationRef.current) {
         failOperation("open_thread", error);
         update((current) => restoreAgentChatThreadSelection(current, previousSelection));
         if (previousSelection.activeRunId) {
@@ -956,15 +1385,23 @@ function useAgentChat(options = {}) {
         setIsLoadingHistory(false);
       }
     }
-  }, [clearOperationError, client, detach, failOperation, pageSize, runtime, update]);
-  const consumeEvent = React2.useCallback((event) => {
+  }, [clearOperationError, client, detach, failOperation, pageSize, queue.hydrate, runtime, update]);
+  const consumeEvent = React6.useCallback((event) => {
+    if (event.event === "run.accepted" && !stateRef.current.activeThreadId && typeof event.payload?.message_id === "string") {
+      const durableId = event.payload.message_id;
+      update((current) => ({
+        ...current,
+        messages: current.messages.map((message) => message.role === "user" && !message.runId && !message.durableId ? { ...message, durableId, runId: event.run_id } : message.role === "assistant" && !message.runId ? { ...message, runId: event.run_id } : message)
+      }));
+    }
     const eventThreadId = typeof event.payload?.thread_id === "string" ? event.payload.thread_id.trim() : "";
     if (eventThreadId && !stateRef.current.activeThreadId) {
       update((current) => adoptStreamingThread(current, eventThreadId));
+      firstSubmissionAdmittedRef.current?.();
     }
     eventBuffer.push(event);
   }, [eventBuffer, update]);
-  const attachRun = React2.useCallback(async (runId, cursor) => {
+  const attachRun = React6.useCallback(async (runId, cursor) => {
     streamControllerRef.current?.abort();
     const controller = runtime.createAbortController();
     streamControllerRef.current = controller;
@@ -972,7 +1409,9 @@ function useAgentChat(options = {}) {
     update((current) => ({ ...current, activeRunId: runId, runState: "reconnecting", error: null }));
     try {
       const result = await client.runs.attach({ runId, cursor, signal: controller.signal }, consumeEvent);
+      eventBuffer.flush();
       update((current) => ({ ...current, activeRunId: result.detached ? runId : current.activeRunId, cursor: result.cursor ?? current.cursor, runState: result.detached ? "reconnecting" : current.runState }));
+      if (!result.detached && result.threadId) await refreshMessages(result.threadId);
     } catch (error) {
       if (!isAbortLike(error)) {
         update((current) => ({ ...current, runState: "failed", streamingMessageId: null }));
@@ -982,100 +1421,171 @@ function useAgentChat(options = {}) {
     } finally {
       if (streamControllerRef.current === controller) streamControllerRef.current = null;
     }
-  }, [clearOperationError, client, consumeEvent, failOperation, runtime, update]);
+  }, [clearOperationError, client, consumeEvent, eventBuffer, failOperation, refreshMessages, runtime, update]);
   attachRunRef.current = attachRun;
-  const submit = React2.useCallback(async (input) => {
+  const submit = React6.useCallback(async (input) => {
     if (!input.text.trim() && !input.attachmentIds?.length && !input.uploads?.length) return;
-    invalidateThreadOpen();
-    detach();
-    const controller = runtime.createAbortController();
-    streamControllerRef.current = controller;
-    const userId = runtime.createId();
-    const assistantId = runtime.createId();
-    const idempotencyKey = runtime.createId();
-    const optimisticAttachments = input.attachments?.length ? input.attachments : input.uploads?.map((upload, index) => ({
-      id: `${userId}-attachment-${index}`,
-      filename: upload.name,
-      mediaType: upload.mediaType,
-      status: "uploading"
-    }));
-    const userMessage = { id: userId, role: "user", content: input.text.trim(), createdAt: (/* @__PURE__ */ new Date()).toISOString(), parts: input.text.trim() ? [{ id: `${userId}-text`, type: "text", kind: "text", text: input.text.trim() }] : [], attachments: optimisticAttachments };
-    const assistantMessage = { id: assistantId, role: "assistant", content: "", createdAt: (/* @__PURE__ */ new Date()).toISOString(), isFinal: false, parts: [] };
-    clearOperationError();
-    const hasPendingUploads = Boolean(input.uploads?.length);
-    update((current) => ({
-      ...current,
-      messages: appendStableStreamingTurn(current.messages, userMessage, assistantMessage),
-      streamingMessageId: assistantId,
-      runState: hasPendingUploads ? "uploading" : "streaming",
-      error: null
-    }));
-    setIsSubmitting(true);
-    let streamStarted = false;
-    try {
-      const uploaded = hasPendingUploads ? await client.attachments.uploadBatch({
-        uploads: input.uploads || [],
-        threadId: stateRef.current.activeThreadId || void 0,
-        requestedAgentId: input.requestedAgentId,
-        idempotencyKey: runtime.createId(),
-        signal: controller.signal
-      }) : [];
-      if (hasPendingUploads && uploaded.length !== input.uploads?.length) {
-        throw new Error("Attachment upload returned an incomplete batch");
-      }
-      const resolvedAttachments = uploaded.length ? uploaded.map(attachmentResultToChatAttachment) : input.attachments;
-      const attachmentIds = uploaded.length ? uploaded.map((attachment) => attachment.id) : input.attachmentIds;
-      if (uploaded.length) {
-        update((current) => ({
-          ...current,
-          messages: current.messages.map((message) => message.id === userId ? { ...message, attachments: resolvedAttachments } : message),
-          runState: "streaming"
-        }));
-      }
-      streamStarted = true;
-      const result = await client.chat.stream({ input: input.text.trim(), threadId: stateRef.current.activeThreadId || void 0, attachmentIds, requestedModelId: input.requestedModelId, requestedAgentId: input.requestedAgentId, idempotencyKey, signal: controller.signal }, consumeEvent);
-      eventBuffer.flush();
-      update((current) => {
-        const threadId = result.threadId || current.activeThreadId;
-        return {
-          ...current,
-          activeThreadId: threadId,
-          activeRunId: result.detached ? result.runId : current.activeRunId,
-          cursor: result.cursor,
-          runState: result.detached ? "reconnecting" : current.runState,
-          threads: threadId ? current.threads.map((thread) => thread.id === threadId ? { ...thread, messages: current.messages, isHydrated: true } : thread) : current.threads
-        };
-      });
-      if (result.threadId) await refreshThreads().catch(() => void 0);
-    } catch (error) {
-      if (isAbortLike(error) && !streamStarted) {
-        update((current) => current.streamingMessageId === assistantId ? {
-          ...current,
-          messages: current.messages.filter((message) => message.id !== userId && message.id !== assistantId),
-          runState: "idle",
-          streamingMessageId: null
-        } : current);
-      } else if (!isAbortLike(error)) {
-        update((current) => ({
-          ...current,
-          messages: streamStarted ? current.messages : current.messages.filter((message) => message.id !== userId && message.id !== assistantId),
-          runState: "failed",
-          streamingMessageId: null
-        }));
+    if (firstSubmissionRef.current && !stateRef.current.activeThreadId) {
+      await firstSubmissionRef.current;
+    }
+    const existingThreadId = stateRef.current.activeThreadId;
+    if (existingThreadId) {
+      clearOperationError();
+      setIsSubmitting(true);
+      try {
+        const uploaded = input.uploads?.length ? await client.attachments.uploadBatch({
+          uploads: input.uploads,
+          threadId: existingThreadId,
+          requestedAgentId: input.requestedAgentId,
+          idempotencyKey: runtime.createId()
+        }) : [];
+        const result = await queue.submit({
+          mode: "queue",
+          input: input.text.trim(),
+          attachmentIds: uploaded.length ? uploaded.map((item) => item.id) : input.attachmentIds,
+          requestedAgentId: input.requestedAgentId,
+          requestedModelId: input.requestedModelId,
+          idempotencyKey: runtime.createId()
+        });
+        if (stateRef.current.activeThreadId !== existingThreadId) return;
+        if (result.run_id) {
+          const userMessage = {
+            id: result.message_id,
+            role: "user",
+            runId: result.run_id,
+            content: input.text.trim(),
+            createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+            isFinal: true,
+            parts: input.text.trim() ? [{ id: `${result.message_id}-text`, type: "text", kind: "text", text: input.text.trim() }] : [],
+            attachments: input.attachments || []
+          };
+          update((current) => current.activeThreadId !== existingThreadId || current.messages.some((message) => message.id === userMessage.id) ? current : { ...current, messages: [...current.messages, userMessage] });
+        }
+        void refreshMessages(existingThreadId).catch(() => void 0);
+        if (result.run_id && promotedAttachRef.current !== result.run_id && stateRef.current.activeRunId !== result.run_id) {
+          void attachRunRef.current(result.run_id).catch(() => void 0);
+        }
+      } catch (error) {
         failOperation("submit", error);
         throw error;
+      } finally {
+        setIsSubmitting(false);
+      }
+      return;
+    }
+    const admission = new Promise((resolve) => {
+      firstSubmissionAdmittedRef.current = resolve;
+    });
+    const stream = (async () => {
+      invalidateThreadOpen();
+      detach();
+      const controller = runtime.createAbortController();
+      streamControllerRef.current = controller;
+      const userId = runtime.createId();
+      const assistantId = runtime.createId();
+      const idempotencyKey = runtime.createId();
+      const optimisticAttachments = input.attachments?.length ? input.attachments : input.uploads?.map((upload, index) => ({
+        id: `${userId}-attachment-${index}`,
+        filename: upload.name,
+        mediaType: upload.mediaType,
+        status: "uploading"
+      }));
+      const userMessage = { id: userId, role: "user", content: input.text.trim(), createdAt: (/* @__PURE__ */ new Date()).toISOString(), parts: input.text.trim() ? [{ id: `${userId}-text`, type: "text", kind: "text", text: input.text.trim() }] : [], attachments: optimisticAttachments };
+      const assistantMessage = { id: assistantId, role: "assistant", content: "", createdAt: (/* @__PURE__ */ new Date()).toISOString(), isFinal: false, parts: [] };
+      clearOperationError();
+      const hasPendingUploads = Boolean(input.uploads?.length);
+      update((current) => ({
+        ...current,
+        messages: appendStableStreamingTurn(current.messages, userMessage, assistantMessage),
+        streamingMessageId: assistantId,
+        runState: hasPendingUploads ? "uploading" : "streaming",
+        error: null
+      }));
+      setIsSubmitting(true);
+      let streamStarted = false;
+      try {
+        const uploaded = hasPendingUploads ? await client.attachments.uploadBatch({
+          uploads: input.uploads || [],
+          threadId: stateRef.current.activeThreadId || void 0,
+          requestedAgentId: input.requestedAgentId,
+          idempotencyKey: runtime.createId(),
+          signal: controller.signal
+        }) : [];
+        if (hasPendingUploads && uploaded.length !== input.uploads?.length) {
+          throw new Error("Attachment upload returned an incomplete batch");
+        }
+        const resolvedAttachments = uploaded.length ? uploaded.map(attachmentResultToChatAttachment) : input.attachments;
+        const attachmentIds = uploaded.length ? uploaded.map((attachment) => attachment.id) : input.attachmentIds;
+        if (uploaded.length) {
+          update((current) => ({
+            ...current,
+            messages: current.messages.map((message) => message.id === userId ? { ...message, attachments: resolvedAttachments } : message),
+            runState: "streaming"
+          }));
+        }
+        streamStarted = true;
+        const result = await client.chat.stream({ input: input.text.trim(), threadId: stateRef.current.activeThreadId || void 0, attachmentIds, requestedModelId: input.requestedModelId, requestedAgentId: input.requestedAgentId, idempotencyKey, signal: controller.signal }, consumeEvent);
+        eventBuffer.flush();
+        update((current) => {
+          const threadId = result.threadId || current.activeThreadId;
+          return {
+            ...current,
+            activeThreadId: threadId,
+            activeRunId: result.detached ? result.runId : current.activeRunId,
+            cursor: result.cursor,
+            runState: result.detached ? "reconnecting" : current.runState,
+            threads: threadId ? current.threads.map((thread) => thread.id === threadId ? { ...thread, messages: current.messages, isHydrated: true } : thread) : current.threads
+          };
+        });
+        if (result.threadId) await refreshThreads().catch(() => void 0);
+        if (result.threadId && !result.detached) await refreshMessages(result.threadId);
+      } catch (error) {
+        if (isAbortLike(error) && !streamStarted) {
+          update((current) => current.streamingMessageId === assistantId ? {
+            ...current,
+            messages: current.messages.filter((message) => message.id !== userId && message.id !== assistantId),
+            runState: "idle",
+            streamingMessageId: null
+          } : current);
+        } else if (!isAbortLike(error)) {
+          update((current) => ({
+            ...current,
+            messages: streamStarted ? current.messages : current.messages.filter((message) => message.id !== userId && message.id !== assistantId),
+            runState: "failed",
+            streamingMessageId: null
+          }));
+          failOperation("submit", error);
+          throw error;
+        }
+      } finally {
+        setIsSubmitting(false);
+        if (streamControllerRef.current === controller) streamControllerRef.current = null;
       }
+    })();
+    const accepted = Promise.race([stream, admission]);
+    firstSubmissionRef.current = accepted;
+    try {
+      await accepted;
     } finally {
-      setIsSubmitting(false);
-      if (streamControllerRef.current === controller) streamControllerRef.current = null;
+      if (firstSubmissionRef.current === accepted) firstSubmissionRef.current = null;
+      firstSubmissionAdmittedRef.current = null;
     }
-  }, [clearOperationError, client, consumeEvent, detach, eventBuffer, failOperation, invalidateThreadOpen, refreshThreads, runtime, update]);
-  const startNewThread = React2.useCallback(() => {
+  }, [clearOperationError, client, consumeEvent, detach, eventBuffer, failOperation, invalidateThreadOpen, queue.submit, refreshMessages, refreshThreads, runtime, update]);
+  const { steer, editPendingMessage, steerPendingMessage, removePendingMessage, resumeQueue } = useAgentChatQueueActions({
+    queue,
+    stateRef,
+    createId: runtime.createId,
+    clearOperationError,
+    failOperation,
+    refreshMessages,
+    attachRun
+  });
+  const startNewThread = React6.useCallback(() => {
     invalidateThreadOpen();
     detach();
     update((current) => ({ ...initialAgentChatState, threads: current.threads }));
   }, [detach, invalidateThreadOpen, update]);
-  const deleteThread = React2.useCallback(async (threadId) => {
+  const deleteThread = React6.useCallback(async (threadId) => {
     if (stateRef.current.activeThreadId === threadId) invalidateThreadOpen();
     clearOperationError();
     try {
@@ -1096,7 +1606,7 @@ function useAgentChat(options = {}) {
       }
     }
   }, [clearOperationError, client, failOperation, invalidateThreadOpen, runtime, update]);
-  const cancelRun = React2.useCallback(async () => {
+  const cancelRun = React6.useCallback(async () => {
     const runId = stateRef.current.activeRunId;
     if (!runId || stateRef.current.runState === "cancelling") return;
     const previousRunState = stateRef.current.runState;
@@ -1135,7 +1645,7 @@ function useAgentChat(options = {}) {
       }
     }
   }, [clearOperationError, client, detach, failOperation, runtime, update]);
-  const resumeHitl = React2.useCallback(async (part, response) => {
+  const resumeHitl = React6.useCallback(async (part, response) => {
     const runId = stateRef.current.activeRunId || stateRef.current.messages.find((message) => message.parts.includes(part))?.runId;
     clearOperationError();
     if (!runId) {
@@ -1156,54 +1666,8 @@ function useAgentChat(options = {}) {
       throw error;
     }
   }, [attachRun, clearOperationError, client, failOperation, runtime]);
-  const setFeedback = React2.useCallback(async (message, input) => {
-    const runId = message.runId;
-    if (!runId || message.role !== "assistant" || message.isFinal === false) {
-      const error = new Error("Only persisted final responses can receive feedback.");
-      failOperation("set_feedback", error);
-      throw error;
-    }
-    const previous = message.feedback ?? null;
-    const timestamp = (/* @__PURE__ */ new Date()).toISOString();
-    const optimistic = input.rating ? {
-      rating: input.rating,
-      reason: input.rating === "dislike" ? input.reason ?? null : null,
-      comment: input.rating === "dislike" ? input.comment?.trim() || null : null,
-      created_at: previous?.created_at || timestamp,
-      updated_at: timestamp
-    } : null;
-    const replaceFeedback = (current, feedback) => {
-      const messages = current.messages.map(
-        (item) => item.id === message.id ? { ...item, feedback } : item
-      );
-      return {
-        ...current,
-        messages,
-        threads: current.threads.map((thread) => ({
-          ...thread,
-          messages: thread.messages.map(
-            (item) => item.id === message.id ? { ...item, feedback } : item
-          )
-        }))
-      };
-    };
-    clearOperationError();
-    update((current) => replaceFeedback(current, optimistic));
-    try {
-      const result = await client.runs.setFeedback({ runId, ...input });
-      update((current) => replaceFeedback(current, result.feedback));
-    } catch (error) {
-      update(
-        (current) => withAgentChatOperationError(
-          replaceFeedback(current, previous),
-          "set_feedback",
-          error
-        )
-      );
-      throw error;
-    }
-  }, [clearOperationError, client, failOperation, update]);
-  const loadOlder = React2.useCallback(async () => {
+  const setFeedback = useAgentChatFeedback({ client, update, clearOperationError, failOperation });
+  const loadOlder = React6.useCallback(async () => {
     const thread = stateRef.current.threads.find((item) => item.id === stateRef.current.activeThreadId);
     if (!thread?.nextBeforeTurnIndex) return;
     clearOperationError();
@@ -1221,7 +1685,7 @@ function useAgentChat(options = {}) {
       setIsLoadingOlder(false);
     }
   }, [clearOperationError, client, failOperation, pageSize, update]);
-  const regenerate = React2.useCallback(async (message) => {
+  const regenerate = React6.useCallback(async (message) => {
     const index = stateRef.current.messages.findIndex((item) => item.id === message.id);
     const user = stateRef.current.messages.slice(0, index).reverse().find((item) => item.role === "user");
     if (user) await submit({
@@ -1230,25 +1694,50 @@ function useAgentChat(options = {}) {
       attachments: user.attachments
     });
   }, [submit]);
-  React2.useEffect(() => {
+  React6.useEffect(() => {
     const controller = runtime.createAbortController();
     clearBackgroundError();
-    void client.threads.events({ signal: controller.signal }, async (event) => {
-      if (event.event === "snapshot_required") {
+    void subscribeToThreadSummaries({
+      client,
+      signal: controller.signal,
+      refresh: refreshThreads,
+      onEvent(event) {
+        threadEventsDuringRefreshRef.current?.push(event);
+        update((current) => ({
+          ...clearAgentChatBackgroundError(current),
+          threads: applyThreadSummaryEvent(current.threads, event)
+        }));
+        if (event.event === "thread.message.updated" && event.thread_id === stateRef.current.activeThreadId) {
+          const wasQueued = queue.acceptNotice({
+            messageId: event.message_id,
+            status: event.status,
+            runId: event.run_id,
+            cursor: event.cursor
+          });
+          if (wasQueued) void refreshMessages(event.thread_id, event.run_id || void 0).catch(() => void 0);
+        }
+        if (event.event === "thread.summary.updated" && event.thread.id === stateRef.current.activeThreadId) {
+          if (streamControllerRef.current && stateRef.current.messages.some((message) => message.role === "user" && !message.runId)) return;
+          const promotedRunId = activeRunIdFromThread(summaryToStored(event.thread));
+          void (async () => {
+            await refreshMessages(String(event.thread.id), promotedRunId || void 0);
+            if (promotedRunId && stateRef.current.activeRunId !== promotedRunId && stateRef.current.activeThreadId === String(event.thread.id) && promotedAttachRef.current !== promotedRunId) {
+              promotedAttachRef.current = promotedRunId;
+              await attachRunRef.current(promotedRunId);
+            }
+          })().catch(() => void 0);
+        }
+      },
+      onError(error) {
+        update((current) => withAgentChatBackgroundError(current, error));
+      },
+      onRecovered() {
         clearBackgroundError();
-        await refreshThreads();
-        return;
       }
-      update((current) => ({
-        ...clearAgentChatBackgroundError(current),
-        threads: applyThreadSummaryEvent(current.threads, event)
-      }));
-    }).catch((error) => {
-      if (!isAbortLike(error)) update((current) => withAgentChatBackgroundError(current, error));
     });
     return () => controller.abort();
-  }, [clearBackgroundError, client, refreshThreads, runtime.createAbortController, update]);
-  React2.useEffect(() => {
+  }, [clearBackgroundError, client, queue.acceptNotice, refreshMessages, refreshThreads, runtime.createAbortController, update]);
+  React6.useEffect(() => {
     const threadId = options.activeThreadId;
     const activeThread2 = stateRef.current.threads.find((thread) => thread.id === stateRef.current.activeThreadId);
     if (shouldHydrateSelectedThread(threadId, stateRef.current.activeThreadId, Boolean(activeThread2?.isHydrated))) {
@@ -1260,6 +1749,8 @@ function useAgentChat(options = {}) {
   return {
     ...state,
     activeThread,
+    pendingMessages,
+    messageQueue,
     hasOlderTurns: Boolean(activeThread?.hasOlderTurns),
     hasMoreThreads,
     isLoadingHistory,
@@ -1278,6 +1769,13 @@ function useAgentChat(options = {}) {
     openThread,
     refreshThreads,
     regenerate,
+    refreshMessages,
+    editPendingMessage,
+    steerPendingMessage,
+    removePendingMessage,
+    retractPendingMessage: queue.retractForEdit,
+    resumeQueue,
+    steer,
     resumeHitl,
     setFeedback,
     startNewThread,
@@ -1286,15 +1784,15 @@ function useAgentChat(options = {}) {
 }
 
 // src/use-agent-resources.ts
-import * as React3 from "react";
+import * as React7 from "react";
 function useAgentThreads(options = {}) {
   const { client, createAbortController } = useAgents24Runtime();
-  const [threads, setThreads] = React3.useState([]);
-  const [total, setTotal] = React3.useState();
-  const [isLoading, setIsLoading] = React3.useState(true);
-  const [error, setError] = React3.useState(null);
-  const controllerRef = React3.useRef(null);
-  const load = React3.useCallback(async () => {
+  const [threads, setThreads] = React7.useState([]);
+  const [total, setTotal] = React7.useState();
+  const [isLoading, setIsLoading] = React7.useState(true);
+  const [error, setError] = React7.useState(null);
+  const controllerRef = React7.useRef(null);
+  const load = React7.useCallback(async () => {
     controllerRef.current?.abort();
     const controller = createAbortController();
     controllerRef.current = controller;
@@ -1313,7 +1811,7 @@ function useAgentThreads(options = {}) {
       }
     }
   }, [client, createAbortController, options.limit, options.skip]);
-  React3.useEffect(() => {
+  React7.useEffect(() => {
     void load();
     return () => controllerRef.current?.abort();
   }, [load]);
@@ -1321,11 +1819,11 @@ function useAgentThreads(options = {}) {
 }
 function useAgentThread(threadId, options = {}) {
   const { client, createAbortController } = useAgents24Runtime();
-  const [thread, setThread] = React3.useState(null);
-  const [isLoading, setIsLoading] = React3.useState(Boolean(threadId));
-  const [error, setError] = React3.useState(null);
-  const controllerRef = React3.useRef(null);
-  const load = React3.useCallback(async () => {
+  const [thread, setThread] = React7.useState(null);
+  const [isLoading, setIsLoading] = React7.useState(Boolean(threadId));
+  const [error, setError] = React7.useState(null);
+  const controllerRef = React7.useRef(null);
+  const load = React7.useCallback(async () => {
     if (!threadId) {
       controllerRef.current?.abort();
       controllerRef.current = null;
@@ -1352,24 +1850,73 @@ function useAgentThread(threadId, options = {}) {
       }
     }
   }, [client, createAbortController, options.beforeTurnIndex, options.limit, threadId]);
-  React3.useEffect(() => {
+  React7.useEffect(() => {
     void load();
     return () => controllerRef.current?.abort();
   }, [load]);
   return { error, isLoading, refresh: load, thread };
 }
+function useThreadComputer(threadId) {
+  const { client, createAbortController } = useAgents24Runtime();
+  const [computer, setComputer] = React7.useState(null);
+  const [isLoading, setIsLoading] = React7.useState(Boolean(threadId));
+  const [error, setError] = React7.useState(null);
+  const controllerRef = React7.useRef(null);
+  const refresh = React7.useCallback(async () => {
+    controllerRef.current?.abort();
+    if (!threadId) {
+      setComputer(null);
+      setIsLoading(false);
+      return null;
+    }
+    const controller = createAbortController();
+    controllerRef.current = controller;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await client.threads.computer.get({ threadId, signal: controller.signal });
+      setComputer(result);
+      return result;
+    } catch (nextError) {
+      if (!isAbortLike(nextError)) setError(nextError);
+      return null;
+    } finally {
+      if (controllerRef.current === controller) {
+        controllerRef.current = null;
+        setIsLoading(false);
+      }
+    }
+  }, [client, createAbortController, threadId]);
+  React7.useEffect(() => {
+    void refresh();
+    return () => controllerRef.current?.abort();
+  }, [refresh]);
+  const list = React7.useCallback((input) => {
+    if (!threadId) throw new Error("A thread is required to list computer files");
+    return client.threads.computer.list({ threadId, ...input });
+  }, [client, threadId]);
+  const read = React7.useCallback((path) => {
+    if (!threadId) throw new Error("A thread is required to read a computer file");
+    return client.threads.computer.read({ threadId, path });
+  }, [client, threadId]);
+  const createContentAccess = React7.useCallback((path, download = false) => {
+    if (!threadId) throw new Error("A thread is required to access a computer file");
+    return client.threads.computer.createContentAccess({ threadId, path, download });
+  }, [client, threadId]);
+  return { computer, error, isLoading, list, read, createContentAccess, refresh };
+}
 function useAgentRun() {
   const { client, createAbortController, createId } = useAgents24Runtime();
-  const controllerRef = React3.useRef(null);
-  const [isAttached, setIsAttached] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  React3.useEffect(() => () => controllerRef.current?.abort(), []);
-  const detach = React3.useCallback(() => {
+  const controllerRef = React7.useRef(null);
+  const [isAttached, setIsAttached] = React7.useState(false);
+  const [error, setError] = React7.useState(null);
+  React7.useEffect(() => () => controllerRef.current?.abort(), []);
+  const detach = React7.useCallback(() => {
     controllerRef.current?.abort();
     controllerRef.current = null;
     setIsAttached(false);
   }, []);
-  const attach = React3.useCallback(async (runId, onEvent, cursor) => {
+  const attach = React7.useCallback(async (runId, onEvent, cursor) => {
     detach();
     const controller = createAbortController();
     controllerRef.current = controller;
@@ -1385,7 +1932,7 @@ function useAgentRun() {
       setIsAttached(false);
     }
   }, [client, createAbortController, detach]);
-  const cancel = React3.useCallback(async (runId) => {
+  const cancel = React7.useCallback(async (runId) => {
     const result = await client.runs.cancel({ runId, idempotencyKey: createId() });
     detach();
     return result;
@@ -1394,9 +1941,9 @@ function useAgentRun() {
 }
 function useAgentAttachments() {
   const { client, createId } = useAgents24Runtime();
-  const [uploads, setUploads] = React3.useState({});
-  const [isUploading, setIsUploading] = React3.useState(false);
-  const uploadBatch = React3.useCallback(async (input) => {
+  const [uploads, setUploads] = React7.useState({});
+  const [isUploading, setIsUploading] = React7.useState(false);
+  const uploadBatch = React7.useCallback(async (input) => {
     setIsUploading(true);
     try {
       const results = await client.attachments.uploadBatch({ uploads: input.uploads, threadId: input.threadId, requestedAgentId: input.requestedAgentId, idempotencyKey: createId(), signal: input.signal });
@@ -1409,7 +1956,7 @@ function useAgentAttachments() {
       setIsUploading(false);
     }
   }, [client, createId]);
-  const createContentAccess = React3.useCallback(
+  const createContentAccess = React7.useCallback(
     (input) => client.attachments.createContentAccess(input),
     [client]
   );
@@ -1417,9 +1964,9 @@ function useAgentAttachments() {
 }
 function useAgentHitl() {
   const { client, createId } = useAgents24Runtime();
-  const [isResolving, setIsResolving] = React3.useState(false);
-  const [lastResult, setLastResult] = React3.useState(null);
-  const resume = React3.useCallback(async (input) => {
+  const [isResolving, setIsResolving] = React7.useState(false);
+  const [lastResult, setLastResult] = React7.useState(null);
+  const resume = React7.useCallback(async (input) => {
     setIsResolving(true);
     try {
       const result = await client.hitl.resume({ ...input, idempotencyKey: createId() });
@@ -1433,8 +1980,8 @@ function useAgentHitl() {
 }
 function useAgentMcp() {
   const { client, createId } = useAgents24Runtime();
-  const [isAuthorizing, setIsAuthorizing] = React3.useState(false);
-  const startAuthorization = React3.useCallback(async (input) => {
+  const [isAuthorizing, setIsAuthorizing] = React7.useState(false);
+  const startAuthorization = React7.useCallback(async (input) => {
     setIsAuthorizing(true);
     try {
       return await client.mcp.startAuthorization({ ...input, idempotencyKey: createId() });
@@ -1442,7 +1989,7 @@ function useAgentMcp() {
       setIsAuthorizing(false);
     }
   }, [client, createId]);
-  const redeemCallback = React3.useCallback(async (input) => client.mcp.redeemCallback({ ...input, idempotencyKey: createId() }), [client, createId]);
+  const redeemCallback = React7.useCallback(async (input) => client.mcp.redeemCallback({ ...input, idempotencyKey: createId() }), [client, createId]);
   return { isAuthorizing, redeemCallback, startAuthorization };
 }
 export {
@@ -1458,6 +2005,7 @@ export {
   chatAttachmentIds,
   clearAgentChatBackgroundError,
   clearAgentChatOperationError,
+  computerResourceTargets,
   contextCompressionPartFromEvent,
   createPortableId,
   getThreadActivity,
@@ -1466,9 +2014,12 @@ export {
   latestThreadContext,
   modelTurnPartFromEvent,
   partsFromResponseBlocks,
+  preferNewestThreadSummary,
+  preserveMountedMessageIds,
   reconcileRefreshedThreads,
   restoreAgentChatThreadSelection,
   threadDetailToMessages,
+  threadTimelineToMessages,
   upsertStableAssistantMessage,
   useAgentAttachments,
   useAgentChat,
@@ -1479,6 +2030,8 @@ export {
   useAgentThread,
   useAgentThreads,
   useAgents24Runtime,
+  useThreadComputer,
+  useThreadMessageQueue,
   withAgentChatBackgroundError,
   withAgentChatOperationError
 };