@agents24/chat-react 0.1.6 → 0.1.8

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -23,31 +33,38 @@ __export(index_exports, {
   DEFAULT_THREAD_PAGE_SIZE: () => DEFAULT_THREAD_PAGE_SIZE,
   DefaultChatPart: () => DefaultChatPart,
   DefaultToolPart: () => DefaultToolPart,
-  LatestThreadViewport: () => LatestThreadViewport,
+  LatestThreadScroller: () => LatestThreadScroller,
+  LatestThreadScrollerButton: () => LatestThreadScrollerButton,
+  LatestThreadScrollerContent: () => LatestThreadScrollerContent,
+  LatestThreadScrollerItem: () => LatestThreadScrollerItem,
+  LatestThreadScrollerOutline: () => LatestThreadScrollerOutline,
+  LatestThreadScrollerProvider: () => LatestThreadScrollerProvider,
+  LatestThreadScrollerRoot: () => LatestThreadScrollerRoot,
+  LatestThreadScrollerViewport: () => LatestThreadScrollerViewport,
+  MessageScroller: () => import_message_scroller2.MessageScroller,
   activeRunIdFromThread: () => activeRunIdFromThread,
   activeRunIdFromThreadDetail: () => activeRunIdFromThreadDetail,
   assistantTextFromParts: () => assistantTextFromParts,
   assistantTextFromResponseBlocks: () => assistantTextFromResponseBlocks,
+  compressionFromContextWindow: () => compressionFromContextWindow,
   consumeSseResponse: () => consumeSseResponse,
   createChatId: () => createChatId,
   createFetchChatTransport: () => createFetchChatTransport,
   getActiveStreamingTextPartId: () => getActiveStreamingTextPartId,
-  getLatestScrollTop: () => getLatestScrollTop,
   hasStaleUnfinishedAssistantCache: () => hasStaleUnfinishedAssistantCache,
   hasUnfinishedAssistantMessage: () => hasUnfinishedAssistantMessage,
   isActiveStreamingTextPart: () => isActiveStreamingTextPart,
-  isAtTimelineLatestEdge: () => isAtTimelineLatestEdge,
   isRunningThreadStatus: () => isRunningThreadStatus,
-  isScrollable: () => isScrollable,
   latestContextWindowFromThread: () => latestContextWindowFromThread,
+  mergeContextWindow: () => mergeContextWindow,
+  mergeContextWindowUpdate: () => mergeContextWindowUpdate,
   mergeReasoningSteps: () => mergeReasoningSteps,
-  nextLatestFollowStateOnScroll: () => nextLatestFollowStateOnScroll,
+  normalizeContextCompression: () => normalizeContextCompression,
+  normalizeContextWindow: () => normalizeContextWindow,
   parseSseBlock: () => parseSseBlock,
   partsFromResponseBlocks: () => partsFromResponseBlocks,
   reasoningStepsFromParts: () => reasoningStepsFromParts,
   renderChatPart: () => renderChatPart,
-  shouldPrefetchOlder: () => shouldPrefetchOlder,
-  shouldUseTopOriginTimeline: () => shouldUseTopOriginTimeline,
   textFromFinalOutput: () => textFromFinalOutput,
   threadActivityDate: () => threadActivityDate,
   threadDetailToMessages: () => threadDetailToMessages,
@@ -55,7 +72,9 @@ __export(index_exports, {
   titleFromMessage: () => titleFromMessage,
   toolStateFromStatus: () => toolStateFromStatus,
   useAgents24ChatController: () => useAgents24ChatController,
-  useLatestThreadViewport: () => useLatestThreadViewport,
+  useMessageScroller: () => import_message_scroller2.useMessageScroller,
+  useMessageScrollerScrollable: () => import_message_scroller2.useMessageScrollerScrollable,
+  useMessageScrollerVisibility: () => import_message_scroller2.useMessageScrollerVisibility,
   useStreamingText: () => useStreamingText
 });
 module.exports = __toCommonJS(index_exports);
@@ -63,9 +82,128 @@ module.exports = __toCommonJS(index_exports);
 // src/controller.ts
 var import_react = require("react");
 
+// src/context-window.ts
+var SOURCE_PRIORITY = {
+  unknown: 0,
+  heuristic_estimate: 1,
+  tokenizer_estimate: 1,
+  text_estimate: 1,
+  estimated: 1,
+  multimodal_estimate: 2,
+  hf_tokenizer: 3,
+  runtime_tokenizer: 3,
+  provider_count_api: 4,
+  provider_usage: 5,
+  exact: 5
+};
+var STAGE_PRIORITY = {
+  preflight: 0,
+  sent_prompt: 1,
+  final_usage: 2
+};
+function numberOrNull(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function stagePriority(window2) {
+  return STAGE_PRIORITY[window2?.stage || "sent_prompt"] ?? STAGE_PRIORITY.sent_prompt;
+}
+function hasRenderableContextWindow(window2) {
+  const maxTokens = window2?.max_tokens;
+  return typeof maxTokens === "number" && Number.isFinite(maxTokens) && maxTokens > 0;
+}
+function windowWeight(window2) {
+  if (!window2) return [0, 0];
+  return [stagePriority(window2), SOURCE_PRIORITY[window2.source] || 0];
+}
+function normalizeContextCompression(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const payload = value;
+  return {
+    active: Boolean(payload.active),
+    reason: typeof payload.reason === "string" ? payload.reason : null,
+    input_tokens: numberOrNull(payload.input_tokens),
+    max_tokens: numberOrNull(payload.max_tokens),
+    usage_ratio: numberOrNull(payload.usage_ratio),
+    full_frame_count: numberOrNull(payload.full_frame_count),
+    compact_frame_count: numberOrNull(payload.compact_frame_count),
+    dropped_frame_count: numberOrNull(payload.dropped_frame_count),
+    artifact_ref_count: numberOrNull(payload.artifact_ref_count),
+    compression_trigger_budget: numberOrNull(payload.compression_trigger_budget),
+    compression_target_budget: numberOrNull(payload.compression_target_budget),
+    compression_target_ratio: numberOrNull(payload.compression_target_ratio),
+    threshold_used: numberOrNull(payload.threshold_used)
+  };
+}
+function normalizeContextWindow(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const payload = value;
+  const rawSource = String(payload.source || "").trim();
+  const source = rawSource === "exact" || rawSource === "estimated" || rawSource === "unknown" || rawSource === "provider_count_api" || rawSource === "provider_usage" || rawSource === "runtime_tokenizer" || rawSource === "hf_tokenizer" || rawSource === "multimodal_estimate" || rawSource === "text_estimate" || rawSource === "tokenizer_estimate" || rawSource === "heuristic_estimate" ? rawSource : rawSource ? "estimated" : "unknown";
+  const rawStage = String(payload.stage || "").trim();
+  const stage = rawStage === "preflight" || rawStage === "sent_prompt" || rawStage === "final_usage" ? rawStage : "sent_prompt";
+  const rawConfidence = String(payload.confidence || "").trim();
+  const confidence = rawConfidence === "exact" || rawConfidence === "high" || rawConfidence === "medium" || rawConfidence === "low" || rawConfidence === "unknown" ? rawConfidence : null;
+  return {
+    source,
+    run_id: typeof payload.run_id === "string" ? payload.run_id : null,
+    stage,
+    confidence,
+    counter: typeof payload.counter === "string" ? payload.counter : null,
+    model_id: typeof payload.model_id === "string" ? payload.model_id : null,
+    max_tokens: numberOrNull(payload.max_tokens),
+    max_tokens_source: typeof payload.max_tokens_source === "string" ? payload.max_tokens_source : null,
+    input_tokens: numberOrNull(payload.input_tokens),
+    remaining_tokens: numberOrNull(payload.remaining_tokens),
+    usage_ratio: numberOrNull(payload.usage_ratio),
+    assembly: payload.assembly && typeof payload.assembly === "object" && !Array.isArray(payload.assembly) ? payload.assembly : null,
+    context_compression: normalizeContextCompression(payload.context_compression)
+  };
+}
+function mergeContextWindow(current, incoming) {
+  if (!incoming) return current ?? null;
+  if (!current) return incoming;
+  if (hasRenderableContextWindow(current) && !hasRenderableContextWindow(incoming)) return current;
+  const currentRunId = current.run_id || null;
+  const incomingRunId = incoming.run_id || null;
+  if (incomingRunId && currentRunId && incomingRunId !== currentRunId) {
+    return stagePriority(incoming) >= STAGE_PRIORITY.sent_prompt ? incoming : current;
+  }
+  const currentWeight = windowWeight(current);
+  const incomingWeight = windowWeight(incoming);
+  return incomingWeight[0] > currentWeight[0] || incomingWeight[0] === currentWeight[0] && incomingWeight[1] >= currentWeight[1] ? incoming : current;
+}
+function mergeContextWindowUpdate(current, incoming) {
+  return mergeContextWindow(current, normalizeContextWindow(incoming));
+}
+function compressionFromContextWindow(contextWindow) {
+  if (!contextWindow) return null;
+  if (contextWindow.context_compression) return contextWindow.context_compression;
+  const assembly = contextWindow.assembly;
+  if (!assembly || typeof assembly !== "object" || Array.isArray(assembly)) return null;
+  const artifactRefs = Array.isArray(assembly.artifact_refs) ? assembly.artifact_refs : [];
+  const compactFrameCount = numberOrNull(assembly.compact_frame_count) ?? 0;
+  const droppedFrameCount = numberOrNull(assembly.dropped_frame_count) ?? 0;
+  const reason = typeof assembly.compaction_reason === "string" ? assembly.compaction_reason : "none";
+  return {
+    active: reason !== "none" || compactFrameCount > 0 || droppedFrameCount > 0,
+    reason,
+    input_tokens: contextWindow.input_tokens ?? null,
+    max_tokens: contextWindow.max_tokens ?? null,
+    usage_ratio: contextWindow.usage_ratio ?? null,
+    full_frame_count: numberOrNull(assembly.full_frame_count),
+    compact_frame_count: compactFrameCount,
+    dropped_frame_count: droppedFrameCount,
+    artifact_ref_count: artifactRefs.length,
+    compression_trigger_budget: numberOrNull(assembly.compression_trigger_budget),
+    compression_target_budget: numberOrNull(assembly.compression_target_budget),
+    compression_target_ratio: numberOrNull(assembly.compression_target_ratio),
+    threshold_used: numberOrNull(assembly.threshold_used)
+  };
+}
+
 // src/model.ts
 var DEFAULT_THREAD_PAGE_SIZE = 5;
-var isRunningThreadStatus = (status) => (/* @__PURE__ */ new Set(["queued", "running"])).has(String(status || "").toLowerCase());
+var isRunningThreadStatus = (status) => (/* @__PURE__ */ new Set(["queued", "running", "cancelling"])).has(String(status || "").toLowerCase());
 var createChatId = () => {
   if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
   return `chat-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
@@ -104,6 +242,16 @@ var attachmentsFromTurn = (turn) => (turn.attachments || []).map((attachment, in
     mediaType: String(record.mime_type || record.mediaType || record.type || "application/octet-stream")
   };
 });
+var tokenUsageFromTurn = (turn) => {
+  const usage = turn.run_usage;
+  if (!usage || typeof usage !== "object") return void 0;
+  return {
+    inputTokens: usage.input_tokens ?? null,
+    outputTokens: usage.output_tokens ?? null,
+    totalTokens: usage.total_tokens ?? null,
+    usageSource: usage.source ?? null
+  };
+};
 var latestEventPayloadValue = (events, key) => {
   for (let index = (events || []).length - 1; index >= 0; index -= 1) {
     const payload = events?.[index]?.payload;
@@ -305,7 +453,8 @@ var turnToMessages = (turn, activeRunId) => {
       createdAt: turn.completed_at ? new Date(turn.completed_at) : createdAt,
       parts,
       reasoningSteps: mergeReasoningSteps(reasoningStepsFromParts(parts), { finalize: !isRunning }),
-      isFinal: !isRunning
+      isFinal: !isRunning,
+      tokenUsage: tokenUsageFromTurn(turn)
     });
   }
   return messages;
@@ -322,10 +471,11 @@ var threadPaging = (thread) => {
   };
 };
 var latestContextWindowFromThread = (thread) => {
-  if (thread.context_window && typeof thread.context_window === "object") return thread.context_window;
+  const threadContextWindow = normalizeContextWindow(thread.context_window);
+  if (threadContextWindow) return threadContextWindow;
   for (let index = (thread.turns || []).length - 1; index >= 0; index -= 1) {
-    const value = thread.turns?.[index]?.context_window;
-    if (value && typeof value === "object") return value;
+    const contextWindow = normalizeContextWindow(thread.turns?.[index]?.context_window);
+    if (contextWindow) return contextWindow;
   }
   return null;
 };
@@ -356,10 +506,6 @@ var activeRunIdFromThreadDetail = (thread) => {
 };
 
 // src/controller.ts
-var mergeContextWindow = (current, incoming) => {
-  if (!incoming || typeof incoming !== "object") return current;
-  return { ...current || {}, ...incoming };
-};
 var threadSummaryToStored = (thread) => ({
   ...thread,
   id: String(thread.id),
@@ -377,7 +523,9 @@ function useAgents24ChatController({
   createId = createChatId,
   onActiveThreadIdChange,
   onSourceClick,
-  onStreamErrorMessage
+  onStreamErrorMessage,
+  onRuntimeEvent,
+  onThreadDetailLoaded
 }) {
   const activeThreadId = controlledActiveThreadId ?? storage.getActiveThreadId?.() ?? null;
   const initialCached = activeThreadId ? storage.getThread(activeThreadId) : void 0;
@@ -394,6 +542,9 @@ function useAgents24ChatController({
   const [disliked, setDisliked] = (0, import_react.useState)({});
   const [copiedMessageId, setCopiedMessageId] = (0, import_react.useState)(null);
   const [lastThinkingDurationMs, setLastThinkingDurationMs] = (0, import_react.useState)(null);
+  const [threads, setThreads] = (0, import_react.useState)(() => storage.listThreads());
+  const [isRefreshingThreads, setIsRefreshingThreads] = (0, import_react.useState)(false);
+  const [activeRunId, setActiveRunId] = (0, import_react.useState)(null);
   const textareaRef = (0, import_react.useRef)(null);
   const activeThreadIdRef = (0, import_react.useRef)(activeThreadId);
   const messagesRef = (0, import_react.useRef)(messages);
@@ -410,6 +561,20 @@ function useAgents24ChatController({
   const streamingMessageIdRef = (0, import_react.useRef)(null);
   const reasoningRef = (0, import_react.useRef)([]);
   const liveVoiceIdsRef = (0, import_react.useRef)({});
+  const setActiveRunIdValue = (0, import_react.useCallback)((runId) => {
+    activeRunIdRef.current = runId;
+    setActiveRunId(runId);
+  }, []);
+  const syncThreadsFromStorage = (0, import_react.useCallback)(() => {
+    setThreads(storage.listThreads());
+  }, [storage]);
+  const upsertStoredThread = (0, import_react.useCallback)(
+    (thread) => {
+      storage.upsertThread(thread);
+      syncThreadsFromStorage();
+    },
+    [storage, syncThreadsFromStorage]
+  );
   (0, import_react.useEffect)(() => {
     messagesRef.current = messages;
   }, [messages]);
@@ -417,7 +582,7 @@ function useAgents24ChatController({
     (threadId, nextMessages, paging, options) => {
       const existing = storage.getThread(threadId);
       const firstUser = nextMessages.find((message) => message.role === "user");
-      storage.upsertThread({
+      upsertStoredThread({
         ...existing || {},
         id: threadId,
         title: existing?.title || (firstUser ? titleFromMessage(firstUser.content, firstUser.attachments || []) : "New chat"),
@@ -428,13 +593,13 @@ function useAgents24ChatController({
         nextBeforeTurnIndex: paging?.nextBeforeTurnIndex ?? nextBeforeTurnIndexRef.current
       });
     },
-    [storage]
+    [storage, upsertStoredThread]
   );
   const markThreadRunStatus = (0, import_react.useCallback)(
     (threadId, runId, status, lastEventSeq) => {
       const existing = storage.getThread(threadId);
       if (!existing || !runId) return;
-      storage.upsertThread({
+      upsertStoredThread({
         ...existing,
         last_run_id: runId,
         last_run_status: status,
@@ -451,14 +616,25 @@ function useAgents24ChatController({
           created_at: existing.activeRun?.created_at ?? existing.active_run?.created_at ?? (/* @__PURE__ */ new Date()).toISOString()
         },
         lastEventSeq: typeof lastEventSeq === "number" ? lastEventSeq : existing.lastEventSeq ?? null,
-        isRunning: status === "queued" || status === "running"
+        isRunning: activeRunIdFromThread({
+          lastRunId: runId,
+          lastRunStatus: status,
+          activeRun: { run_id: runId, status }
+        }) !== null
       });
     },
-    [storage]
+    [storage, upsertStoredThread]
   );
   const refresh = (0, import_react.useCallback)(async () => {
-    const data = await transport.listThreads();
-    storage.setThreads((data.items || []).map((item) => threadSummaryToStored(item)));
+    setIsRefreshingThreads(true);
+    try {
+      const data = await transport.listThreads();
+      const nextThreads = (data.items || []).map((item) => threadSummaryToStored(item));
+      storage.setThreads(nextThreads);
+      setThreads(storage.listThreads());
+    } finally {
+      setIsRefreshingThreads(false);
+    }
   }, [storage, transport]);
   const applyThreadId = (0, import_react.useCallback)(
     (threadId, baseMessages) => {
@@ -486,7 +662,7 @@ function useAgents24ChatController({
     const controller = abortControllerRef.current;
     abortControllerRef.current = null;
     controller?.abort();
-    activeRunIdRef.current = null;
+    setActiveRunIdValue(null);
     reattachedRunIdRef.current = null;
     streamingMessageIdRef.current = null;
     streamingContentRef.current = "";
@@ -495,7 +671,7 @@ function useAgents24ChatController({
     setIsLoading(false);
     setStreamingContent("");
     setCurrentReasoning([]);
-  }, []);
+  }, [setActiveRunIdValue]);
   const setLiveAssistantMessage = (0, import_react.useCallback)(
     (input) => {
       setMessages((prev) => {
@@ -565,7 +741,7 @@ function useAgents24ChatController({
         persistThread(input.threadId, completed);
         const existingThread = storage.getThread(input.threadId);
         if (existingThread && input.runId) {
-          storage.upsertThread({
+          upsertStoredThread({
             ...existingThread,
             messages: completed,
             last_run_id: input.runId,
@@ -580,7 +756,7 @@ function useAgents24ChatController({
       }
       return completed;
     },
-    [createId, persistThread, storage]
+    [createId, persistThread, storage, upsertStoredThread]
   );
   const loadThread = (0, import_react.useCallback)(
     async (threadId) => {
@@ -595,6 +771,7 @@ function useAgents24ChatController({
           includeRunEvents: false
         });
         if (activeThreadIdRef.current !== threadId || seq !== requestSeqRef.current) return;
+        void onThreadDetailLoaded?.(detail);
         const nextMessages = threadDetailToMessages(detail);
         const paging = threadPaging(detail);
         setContextStatus(latestContextWindowFromThread(detail));
@@ -604,7 +781,7 @@ function useAgents24ChatController({
         hasOlderTurnsRef.current = paging.hasOlderTurns;
         nextBeforeTurnIndexRef.current = paging.nextBeforeTurnIndex;
         loadedThreadIdRef.current = threadId;
-        storage.upsertThread({
+        upsertStoredThread({
           ...threadSummaryToStored(detail),
           messages: nextMessages,
           isHydrated: true,
@@ -616,7 +793,7 @@ function useAgents24ChatController({
         if (activeThreadIdRef.current === threadId) setLoadingHistory(false);
       }
     },
-    [pageSize, setLoadingHistory, storage, transport]
+    [onThreadDetailLoaded, pageSize, setLoadingHistory, transport, upsertStoredThread]
   );
   const loadOlderTurns = (0, import_react.useCallback)(async () => {
     const threadId = activeThreadIdRef.current;
@@ -648,11 +825,18 @@ function useAgents24ChatController({
   }, [pageSize, persistThread, transport]);
   const handleStreamEvent = (0, import_react.useCallback)(
     (input) => {
-      const { event, assistantMessageId, startedAt, streamThreadIdRef, baseMessages } = input;
+      const { mode, event, assistantMessageId, startedAt, streamThreadIdRef, baseMessages } = input;
       const payload = event.payload || {};
       const responseBlocks = Array.isArray(payload.response_blocks) ? payload.response_blocks : null;
-      if (event.run_id) activeRunIdRef.current = event.run_id;
-      setContextStatus((current) => mergeContextWindow(current, payload.context_window));
+      if (event.run_id) setActiveRunIdValue(event.run_id);
+      void onRuntimeEvent?.(event, {
+        mode,
+        assistantMessageId,
+        threadId: streamThreadIdRef.current,
+        runId: event.run_id || activeRunIdRef.current,
+        startedAt
+      });
+      setContextStatus((current) => mergeContextWindowUpdate(current, payload.context_window));
       if (responseBlocks) {
         const blockText = String(payload.assistant_output_text || "") || assistantTextFromResponseBlocks(responseBlocks) || streamingContentRef.current;
         if (blockText) setStreamingText(blockText);
@@ -698,7 +882,7 @@ function useAgents24ChatController({
         error: isFailed ? String(payload.message || payload.error || event.diagnostics?.[0]?.message || onStreamErrorMessage?.(event) || "The chat run failed.") : void 0
       });
     },
-    [applyThreadId, finalizeAssistantMessage, markThreadRunStatus, onStreamErrorMessage, setLiveAssistantMessage, setReasoningSteps]
+    [applyThreadId, finalizeAssistantMessage, markThreadRunStatus, onRuntimeEvent, onStreamErrorMessage, setActiveRunIdValue, setLiveAssistantMessage, setReasoningSteps]
   );
   const runStream = (0, import_react.useCallback)(
     async (input) => {
@@ -760,16 +944,16 @@ function useAgents24ChatController({
       }
       try {
         if (input.mode === "attach") {
-          activeRunIdRef.current = input.runId;
+          setActiveRunIdValue(input.runId);
           reattachedRunIdRef.current = input.runId;
           await transport.attachRun(
             { runId: input.runId, signal: controller.signal },
-            (event) => handleStreamEvent({ event, assistantMessageId, startedAt, streamThreadIdRef, baseMessages })
+            (event) => handleStreamEvent({ mode: "attach", event, assistantMessageId, startedAt, streamThreadIdRef, baseMessages })
           );
         } else {
           await transport.streamMessage(
-            { text: input.message.text, files: input.message.files || [], threadId: activeThreadIdRef.current, signal: controller.signal },
-            (event) => handleStreamEvent({ event, assistantMessageId, startedAt, streamThreadIdRef, baseMessages })
+            { ...input.message, files: input.message.files || [], threadId: activeThreadIdRef.current, signal: controller.signal },
+            (event) => handleStreamEvent({ mode: "submit", event, assistantMessageId, startedAt, streamThreadIdRef, baseMessages })
           );
         }
         if (streamingContentRef.current.trim() && streamingMessageIdRef.current) {
@@ -801,7 +985,7 @@ function useAgents24ChatController({
         const isCurrentStream = abortControllerRef.current === controller || streamingMessageIdRef.current === assistantMessageId;
         if (abortControllerRef.current === controller) abortControllerRef.current = null;
         if (isCurrentStream) {
-          activeRunIdRef.current = null;
+          setActiveRunIdValue(null);
           streamingMessageIdRef.current = null;
           reattachedRunIdRef.current = null;
           setStreamingMessageId(null);
@@ -812,7 +996,7 @@ function useAgents24ChatController({
         }
       }
     },
-    [createId, finalizeAssistantMessage, handleStreamEvent, onStreamErrorMessage, persistThread, refresh, setReasoningSteps, transport]
+    [createId, finalizeAssistantMessage, handleStreamEvent, onStreamErrorMessage, persistThread, refresh, setActiveRunIdValue, setReasoningSteps, transport]
   );
   const handleSubmit = (0, import_react.useCallback)(
     async (message) => {
@@ -827,7 +1011,7 @@ function useAgents24ChatController({
     const liveMessageId = streamingMessageIdRef.current;
     abortControllerRef.current?.abort();
     abortControllerRef.current = null;
-    activeRunIdRef.current = null;
+    setActiveRunIdValue(null);
     streamingMessageIdRef.current = null;
     setStreamingMessageId(null);
     setIsLoading(false);
@@ -844,10 +1028,16 @@ function useAgents24ChatController({
         messageId: liveMessageId
       });
     }
-  }, [finalizeAssistantMessage, lastThinkingDurationMs, setReasoningSteps, transport]);
+  }, [finalizeAssistantMessage, lastThinkingDurationMs, setActiveRunIdValue, setReasoningSteps, transport]);
   (0, import_react.useEffect)(() => {
-    refresh().catch(() => storage.setThreads([]));
+    refresh().catch(() => {
+      storage.setThreads([]);
+      setThreads([]);
+    });
   }, [refresh, storage]);
+  (0, import_react.useEffect)(() => {
+    syncThreadsFromStorage();
+  }, [storageKey, syncThreadsFromStorage]);
   (0, import_react.useEffect)(() => {
     const previous = activeThreadIdRef.current;
     activeThreadIdRef.current = activeThreadId;
@@ -955,7 +1145,40 @@ function useAgents24ChatController({
       return next;
     });
   }, [createId, persistThread]);
+  const startNewThread = (0, import_react.useCallback)(() => {
+    detachActiveStream();
+    requestSeqRef.current += 1;
+    activeThreadIdRef.current = null;
+    loadedThreadIdRef.current = null;
+    nextBeforeTurnIndexRef.current = null;
+    hasOlderTurnsRef.current = false;
+    storage.setActiveThreadId?.(null);
+    onActiveThreadIdChange?.(null);
+    setMessages([]);
+    messagesRef.current = [];
+    setHasOlderTurns(false);
+    setIsLoadingOlder(false);
+    setContextStatus(null);
+    setLoadingHistory(false);
+  }, [detachActiveStream, onActiveThreadIdChange, setLoadingHistory, storage]);
+  const loadThreadById = (0, import_react.useCallback)(
+    async (threadId) => {
+      if (!threadId) return;
+      if (activeThreadIdRef.current !== threadId) {
+        if (abortControllerRef.current) detachActiveStream();
+        activeThreadIdRef.current = threadId;
+        storage.setActiveThreadId?.(threadId);
+        onActiveThreadIdChange?.(threadId);
+      }
+      await loadThread(threadId);
+    },
+    [detachActiveStream, loadThread, onActiveThreadIdChange, storage]
+  );
+  const activeThread = activeThreadId ? storage.getThread(activeThreadId) || threads.find((thread) => thread.id === activeThreadId) || null : null;
   return (0, import_react.useMemo)(() => ({
+    threads,
+    activeThreadId,
+    activeThread,
     messages,
     streamingContent,
     streamingMessageId,
@@ -964,12 +1187,13 @@ function useAgents24ChatController({
     isLoading,
     isLoadingHistory,
     isLoadingOlder,
+    isRefreshingThreads,
     hasOlderTurns,
     liked,
     disliked,
     copiedMessageId,
     lastThinkingDurationMs,
-    activeRunId: activeRunIdRef.current,
+    activeRunId,
     handleSubmit,
     handleStop,
     handleCopy,
@@ -978,11 +1202,16 @@ function useAgents24ChatController({
     handleRetry,
     handleSourceClick: (citations) => onSourceClick?.(citations),
     upsertLiveVoiceMessage,
+    startNewThread,
+    loadThreadById,
     loadOlderTurns,
     refresh,
     textareaRef
   }), [
     copiedMessageId,
+    activeRunId,
+    activeThread,
+    activeThreadId,
     contextStatus,
     currentReasoning,
     disliked,
@@ -996,26 +1225,373 @@ function useAgents24ChatController({
     isLoading,
     isLoadingHistory,
     isLoadingOlder,
+    isRefreshingThreads,
     lastThinkingDurationMs,
     liked,
+    loadThreadById,
     loadOlderTurns,
     messages,
     onSourceClick,
     refresh,
     streamingContent,
     streamingMessageId,
+    startNewThread,
+    threads,
     upsertLiveVoiceMessage
   ]);
 }
 
-// src/renderers.tsx
+// src/latest-thread-scroller.tsx
+var React = __toESM(require("react"), 1);
+var import_message_scroller = require("@shadcn/react/message-scroller");
 var import_jsx_runtime = require("react/jsx-runtime");
+var cx = (...values) => values.filter(Boolean).join(" ");
+var LatestThreadScrollerLayoutContext = React.createContext(null);
+var useLatestThreadScrollerLayout = () => React.useContext(LatestThreadScrollerLayoutContext);
+function LatestThreadScrollerProvider({
+  autoScroll = true,
+  defaultScrollPosition = "last-anchor",
+  scrollPreviousItemPeek = 64,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Provider,
+    {
+      autoScroll,
+      defaultScrollPosition,
+      scrollPreviousItemPeek,
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerRoot({
+  className,
+  ref,
+  ...props
+}) {
+  const [rootElement, setRootElement] = React.useState(null);
+  const [contentElement, setContentElement] = React.useState(null);
+  const layoutContext = React.useMemo(
+    () => ({
+      contentElement,
+      rootElement,
+      setContentElement,
+      setRootElement
+    }),
+    [contentElement, rootElement]
+  );
+  const setRef = React.useCallback(
+    (node) => {
+      setRootElement(node);
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LatestThreadScrollerLayoutContext.Provider, { value: layoutContext, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Root,
+    {
+      ref: setRef,
+      className: cx(
+        "relative flex size-full min-h-0 flex-1 flex-col overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function LatestThreadScrollerViewport({
+  className,
+  onViewportChange,
+  preserveScrollOnPrepend = true,
+  ref,
+  ...props
+}) {
+  const setRef = React.useCallback(
+    (node) => {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+      onViewportChange?.(node);
+    },
+    [onViewportChange, ref]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Viewport,
+    {
+      ref: setRef,
+      className: cx(
+        "size-full min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain",
+        className
+      ),
+      preserveScrollOnPrepend,
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerContent({
+  className,
+  ref,
+  ...props
+}) {
+  const layout = useLatestThreadScrollerLayout();
+  const setRef = React.useCallback(
+    (node) => {
+      layout?.setContentElement(node);
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [layout, ref]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Content,
+    {
+      ref: setRef,
+      "data-agents24-latest-thread-content": "",
+      className: cx("flex h-max min-h-full flex-col gap-8 p-4", className),
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerItem({
+  className,
+  messageId,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Item,
+    {
+      className: cx(
+        "min-w-0 shrink-0 overflow-visible",
+        className
+      ),
+      messageId,
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerButton({
+  children,
+  className,
+  direction = "end",
+  render,
+  ...props
+}) {
+  if (render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_message_scroller.MessageScroller.Button,
+      {
+        direction,
+        render,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Button,
+    {
+      direction,
+      render: (buttonProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          ...buttonProps,
+          "aria-label": direction === "end" ? "Scroll to latest message" : "Scroll to first message",
+          className: cx(
+            "absolute bottom-4 left-1/2 z-50 flex size-9 -translate-x-1/2 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-md transition-all duration-200 data-[active=false]:pointer-events-none data-[active=false]:translate-y-2 data-[active=false]:opacity-0 data-[active=true]:translate-y-0 data-[active=true]:opacity-100",
+            className
+          ),
+          type: "button",
+          children: children ?? (direction === "end" ? "\u2193" : "\u2191")
+        }
+      ),
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerOutline({
+  cardClassName,
+  className,
+  contentMaxWidth = 768,
+  dir = "ltr",
+  items,
+  minContainerWidthForRail = 0,
+  minSideGutterForRail = 48,
+  side
+}) {
+  const navRef = React.useRef(null);
+  const layout = useLatestThreadScrollerLayout();
+  const [hasSideRoom, setHasSideRoom] = React.useState(false);
+  const [hoveredIndex, setHoveredIndex] = React.useState(null);
+  const { scrollToMessage } = (0, import_message_scroller.useMessageScroller)();
+  const { currentAnchorId, visibleMessageIds } = (0, import_message_scroller.useMessageScrollerVisibility)();
+  const visibleMessageIdSet = React.useMemo(
+    () => new Set(visibleMessageIds),
+    [visibleMessageIds]
+  );
+  const focusIndex = hoveredIndex ?? -1;
+  const railSide = side ?? (dir === "rtl" ? "right" : "left");
+  React.useEffect(() => {
+    const root = layout?.rootElement ?? navRef.current?.parentElement;
+    if (!root) return;
+    const updateSideRoom = () => {
+      const rootRect = root.getBoundingClientRect();
+      const rootWidth = rootRect.width;
+      const content2 = layout?.contentElement;
+      const sideGutter = content2 ? Math.max(
+        0,
+        railSide === "left" ? content2.getBoundingClientRect().left - rootRect.left : rootRect.right - content2.getBoundingClientRect().right
+      ) : Math.max(0, (rootWidth - contentMaxWidth) / 2);
+      const nextHasSideRoom = rootWidth >= minContainerWidthForRail && sideGutter >= minSideGutterForRail;
+      setHasSideRoom(
+        (current) => current === nextHasSideRoom ? current : nextHasSideRoom
+      );
+    };
+    updateSideRoom();
+    const resizeObserver = new ResizeObserver(updateSideRoom);
+    resizeObserver.observe(root);
+    const content = layout?.contentElement;
+    if (content) {
+      resizeObserver.observe(content);
+    }
+    return () => resizeObserver.disconnect();
+  }, [
+    contentMaxWidth,
+    layout?.contentElement,
+    layout?.rootElement,
+    minContainerWidthForRail,
+    minSideGutterForRail,
+    railSide
+  ]);
+  if (items.length < 2) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "nav",
+    {
+      ref: navRef,
+      "aria-label": "Transcript outline",
+      className: cx(
+        "pointer-events-none absolute top-[46%] z-10 max-h-[min(18rem,calc(100%-10rem))] w-16 -translate-y-1/2 overflow-visible",
+        hasSideRoom ? "hidden md:block" : "hidden",
+        railSide === "left" ? "left-1" : "right-1",
+        className
+      ),
+      dir,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-auto flex flex-col gap-0 py-1", children: items.map((item, index) => {
+        const itemMessageIds = item.messageIds && item.messageIds.length > 0 ? item.messageIds : [item.id];
+        const active = itemMessageIds.some(
+          (messageId) => visibleMessageIdSet.has(messageId) || messageId === currentAnchorId
+        );
+        const distance = focusIndex >= 0 ? Math.abs(index - focusIndex) : Number.POSITIVE_INFINITY;
+        const isFocused = distance === 0;
+        const isNear = distance === 1;
+        const isNextNear = distance === 2;
+        const barWidth = isFocused ? 50 : isNear ? 36 : isNextNear ? 23 : 10;
+        const barOpacity = isFocused ? 1 : isNear ? 0.78 : isNextNear ? 0.58 : 0.36;
+        const fallbackLabel = `Turn ${index + 1}`;
+        const previewLabel = item.label && item.label !== fallbackLabel ? item.label : "";
+        const responsePreview = (item.responsePreview || "").trim();
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            "data-active": active,
+            dir: "ltr",
+            className: cx(
+              "group relative flex h-2 w-16 items-center rounded-sm outline-none",
+              railSide === "left" ? "justify-start" : "justify-end"
+            ),
+            "aria-label": `Jump to ${item.label || fallbackLabel}`,
+            onBlur: () => setHoveredIndex(null),
+            onFocus: () => setHoveredIndex(index),
+            onMouseEnter: () => setHoveredIndex(index),
+            onMouseLeave: () => setHoveredIndex(null),
+            onClick: () => scrollToMessage(item.id, {
+              align: "start",
+              behavior: "smooth"
+            }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: "h-0.5 rounded-full bg-muted-foreground/55 transition-[width,background-color,opacity] duration-150 ease-out group-hover:bg-foreground group-focus-visible:bg-foreground group-data-[active=true]:bg-foreground",
+                  style: {
+                    opacity: barOpacity,
+                    width: barWidth
+                  }
+                }
+              ),
+              previewLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "span",
+                {
+                  dir,
+                  className: cx(
+                    "pointer-events-none absolute top-1/2 z-20 max-h-32 w-64 -translate-y-1/2 overflow-hidden rounded-lg border border-border/80 bg-background p-3 text-start opacity-0 shadow-lg transition-all duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-visible:pointer-events-auto group-focus-visible:opacity-100",
+                    railSide === "left" ? "left-full ml-2 -translate-x-1 group-hover:translate-x-0 group-focus-visible:translate-x-0" : "right-full mr-2 translate-x-1 group-hover:translate-x-0 group-focus-visible:translate-x-0",
+                    cardClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        className: "block overflow-hidden text-sm leading-5 text-foreground",
+                        style: {
+                          display: "-webkit-box",
+                          WebkitBoxOrient: "vertical",
+                          WebkitLineClamp: responsePreview ? 2 : 4
+                        },
+                        children: previewLabel
+                      }
+                    ),
+                    responsePreview ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        className: "mt-1 block overflow-hidden text-sm leading-5 text-muted-foreground",
+                        style: {
+                          display: "-webkit-box",
+                          WebkitBoxOrient: "vertical",
+                          WebkitLineClamp: 2
+                        },
+                        children: responsePreview
+                      }
+                    ) : null
+                  ]
+                }
+              ) : null
+            ]
+          },
+          item.id
+        );
+      }) })
+    }
+  );
+}
+var LatestThreadScroller = {
+  Provider: LatestThreadScrollerProvider,
+  Root: LatestThreadScrollerRoot,
+  Viewport: LatestThreadScrollerViewport,
+  Content: LatestThreadScrollerContent,
+  Item: LatestThreadScrollerItem,
+  Button: LatestThreadScrollerButton,
+  Outline: LatestThreadScrollerOutline
+};
+
+// src/renderers.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var DefaultToolPart = ({ part }) => {
   const label = typeof part.presentation?.activity === "string" ? part.presentation.activity : typeof part.presentation?.title === "string" ? part.presentation.title : part.toolName;
   const detail = typeof part.presentation?.detail === "string" ? part.presentation.detail : part.errorText || part.state;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: label }),
-    detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: detail }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: label }),
+    detail ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: detail }) : null
   ] });
 };
 var DefaultChatPart = ({
@@ -1024,28 +1600,28 @@ var DefaultChatPart = ({
   renderOptions
 }) => {
   if (renderOptions?.renderPart) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderOptions.renderPart(part, message) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderOptions.renderPart(part, message) });
   }
-  if (part.kind === "text") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: part.text });
+  if (part.kind === "text") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: part.text });
   if (part.kind === "tool") {
     const ToolRenderer = renderOptions?.toolRenderers?.[part.type] || renderOptions?.fallbackToolRenderer || DefaultToolPart;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ToolRenderer({ part, message }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: ToolRenderer({ part, message }) });
   }
   if (part.kind === "reasoning") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-agents24-reasoning-part": true, children: part.text || part.label });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-agents24-reasoning-part": true, children: part.text || part.label });
   }
   if (part.kind === "ui-blocks") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-agents24-ui-blocks-part": true, "data-state": part.state });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-agents24-ui-blocks-part": true, "data-state": part.state });
   }
   if (part.kind === "approval") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-agents24-approval-part": true });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-agents24-approval-part": true });
   }
   if (part.kind === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-agents24-error-part": true, children: part.errorText });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-agents24-error-part": true, children: part.errorText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-agents24-data-part": part.name });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-agents24-data-part": part.name });
 };
-var renderChatPart = (part, message, renderOptions) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var renderChatPart = (part, message, renderOptions) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   DefaultChatPart,
   {
     part,
@@ -1311,306 +1887,45 @@ var createFetchChatTransport = ({
   };
 };
 
-// src/viewport.tsx
-var import_react3 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var LATEST_EDGE_THRESHOLD_PX = 2;
-var MIN_OLDER_PREFETCH_PX = 320;
-var MAX_OLDER_PREFETCH_PX = 900;
-var isScrollable = (element) => element.scrollHeight - element.clientHeight > LATEST_EDGE_THRESHOLD_PX;
-var isAtTimelineLatestEdge = (element, isTopOrigin) => {
-  if (!isScrollable(element)) return true;
-  return isTopOrigin ? element.scrollHeight - element.clientHeight - element.scrollTop <= LATEST_EDGE_THRESHOLD_PX : Math.abs(element.scrollTop) <= LATEST_EDGE_THRESHOLD_PX;
-};
-var shouldPrefetchOlder = (element) => Math.abs(element.scrollTop) + element.clientHeight >= element.scrollHeight - Math.min(MAX_OLDER_PREFETCH_PX, Math.max(MIN_OLDER_PREFETCH_PX, element.clientHeight * 0.75));
-var getLatestScrollTop = (element, isTopOrigin) => isTopOrigin ? Math.max(0, element.scrollHeight - element.clientHeight) : 0;
-var shouldUseTopOriginTimeline = ({
-  hasOlder,
-  itemCount,
-  topOriginMaxItems = 4
-}) => !hasOlder && itemCount > 0 && itemCount <= topOriginMaxItems;
-var nextLatestFollowStateOnScroll = ({
-  atLatest,
-  current,
-  isProgrammatic
-}) => {
-  if (isProgrammatic) return current;
-  return atLatest ? "following" : "detached";
-};
-function useLatestThreadViewport({
-  itemCount,
-  hasOlder,
-  isLoadingOlder,
-  onLoadOlder,
-  activeStreamKey,
-  shouldAutoFollow = true,
-  topOriginMaxItems = 4
-}) {
-  const scrollContainerRef = (0, import_react3.useRef)(null);
-  const olderPagePreserveRef = (0, import_react3.useRef)(null);
-  const olderPageRequestInFlightRef = (0, import_react3.useRef)(false);
-  const intrinsicResizePreserveRef = (0, import_react3.useRef)(null);
-  const followStateRef = (0, import_react3.useRef)("following");
-  const programmaticScrollRef = (0, import_react3.useRef)(false);
-  const programmaticScrollTimeoutRef = (0, import_react3.useRef)(null);
-  const activeStreamKeyRef = (0, import_react3.useRef)(null);
-  const observedScrollHeightRef = (0, import_react3.useRef)(null);
-  const [isAtLatest, setIsAtLatest] = (0, import_react3.useState)(true);
-  const [followState, setFollowState] = (0, import_react3.useState)("following");
-  const isTopOrigin = shouldUseTopOriginTimeline({ hasOlder, itemCount, topOriginMaxItems });
-  const setLatestFollowState = (0, import_react3.useCallback)((next) => {
-    if (followStateRef.current === next) return;
-    followStateRef.current = next;
-    setFollowState(next);
-  }, []);
-  const markProgrammaticScroll = (0, import_react3.useCallback)(() => {
-    programmaticScrollRef.current = true;
-    if (programmaticScrollTimeoutRef.current) clearTimeout(programmaticScrollTimeoutRef.current);
-    programmaticScrollTimeoutRef.current = setTimeout(() => {
-      programmaticScrollRef.current = false;
-      programmaticScrollTimeoutRef.current = null;
-    }, 80);
-  }, []);
-  const scrollToLatest = (0, import_react3.useCallback)((options) => {
-    const element = scrollContainerRef.current;
-    if (!element) return;
-    if (options?.reattach !== false) setLatestFollowState("following");
-    markProgrammaticScroll();
-    element.scrollTop = getLatestScrollTop(element, isTopOrigin);
-    setIsAtLatest(true);
-    observedScrollHeightRef.current = element.scrollHeight;
-  }, [isTopOrigin, markProgrammaticScroll, setLatestFollowState]);
-  const detachFromLatest = (0, import_react3.useCallback)(() => {
-    setLatestFollowState("detached");
-  }, [setLatestFollowState]);
-  const reattachToLatest = (0, import_react3.useCallback)(() => {
-    scrollToLatest({ reattach: true });
-  }, [scrollToLatest]);
-  const handleUserScrollIntent = (0, import_react3.useCallback)(() => {
-    const element = scrollContainerRef.current;
-    if (!activeStreamKey || !element) return;
-    if (!isAtTimelineLatestEdge(element, isTopOrigin)) detachFromLatest();
-  }, [activeStreamKey, detachFromLatest, isTopOrigin]);
-  (0, import_react3.useEffect)(() => {
-    return () => {
-      if (programmaticScrollTimeoutRef.current) clearTimeout(programmaticScrollTimeoutRef.current);
-      const preserve = intrinsicResizePreserveRef.current;
-      if (preserve?.frame !== null && preserve?.frame !== void 0) cancelAnimationFrame(preserve.frame);
-    };
-  }, []);
-  (0, import_react3.useLayoutEffect)(() => {
-    const element = scrollContainerRef.current;
-    const preserve = olderPagePreserveRef.current;
-    if (!element) return;
-    observedScrollHeightRef.current = element.scrollHeight;
-    if (!preserve) {
-      setIsAtLatest(isAtTimelineLatestEdge(element, isTopOrigin));
-      return;
-    }
-    const addedHeight = element.scrollHeight - preserve.previousHeight;
-    markProgrammaticScroll();
-    element.scrollTop = preserve.previousTop - addedHeight;
-    olderPagePreserveRef.current = null;
-    olderPageRequestInFlightRef.current = false;
-    setIsAtLatest(isAtTimelineLatestEdge(element, isTopOrigin));
-  }, [isTopOrigin, itemCount, markProgrammaticScroll]);
-  const handleScroll = (0, import_react3.useCallback)(
-    (event) => {
-      const element = event.currentTarget;
-      const atLatest = isAtTimelineLatestEdge(element, isTopOrigin);
-      setIsAtLatest(atLatest);
-      setLatestFollowState(
-        nextLatestFollowStateOnScroll({
-          atLatest,
-          current: followStateRef.current,
-          isProgrammatic: programmaticScrollRef.current
-        })
-      );
-      if (isTopOrigin || !hasOlder || isLoadingOlder || olderPageRequestInFlightRef.current || !shouldPrefetchOlder(element)) {
-        return;
-      }
-      olderPageRequestInFlightRef.current = true;
-      olderPagePreserveRef.current = {
-        previousHeight: element.scrollHeight,
-        previousTop: element.scrollTop
-      };
-      void Promise.resolve(onLoadOlder()).finally(() => {
-        requestAnimationFrame(() => {
-          if (!olderPagePreserveRef.current) return;
-          olderPagePreserveRef.current = null;
-          olderPageRequestInFlightRef.current = false;
-        });
-      });
-    },
-    [hasOlder, isLoadingOlder, isTopOrigin, onLoadOlder, setLatestFollowState]
-  );
-  const preserveIntrinsicResize = (0, import_react3.useCallback)(() => {
-    const element = scrollContainerRef.current;
-    if (!element || isTopOrigin) return;
-    const active = intrinsicResizePreserveRef.current;
-    if (active?.frame !== null && active?.frame !== void 0) cancelAnimationFrame(active.frame);
-    intrinsicResizePreserveRef.current = {
-      lastHeight: element.scrollHeight,
-      endAt: Date.now() + 260,
-      frame: null
-    };
-    const preserveFrame = () => {
-      const nextElement = scrollContainerRef.current;
-      const preserve = intrinsicResizePreserveRef.current;
-      if (!nextElement || !preserve) return;
-      const heightDelta = nextElement.scrollHeight - preserve.lastHeight;
-      if (Math.abs(heightDelta) >= 1) {
-        markProgrammaticScroll();
-        nextElement.scrollTop -= heightDelta;
-        preserve.lastHeight = nextElement.scrollHeight;
-        setIsAtLatest(isAtTimelineLatestEdge(nextElement, isTopOrigin));
-      }
-      if (Date.now() < preserve.endAt) {
-        preserve.frame = requestAnimationFrame(preserveFrame);
-      } else {
-        intrinsicResizePreserveRef.current = null;
-      }
-    };
-    intrinsicResizePreserveRef.current.frame = requestAnimationFrame(preserveFrame);
-  }, [isTopOrigin, markProgrammaticScroll]);
-  (0, import_react3.useLayoutEffect)(() => {
-    const key = activeStreamKey || null;
-    const previousKey = activeStreamKeyRef.current;
-    if (!key) {
-      activeStreamKeyRef.current = null;
-      if (previousKey && shouldAutoFollow && followStateRef.current === "following" && !isLoadingOlder && !olderPageRequestInFlightRef.current) {
-        const frame2 = requestAnimationFrame(() => {
-          if (followStateRef.current === "following" && !isLoadingOlder && !olderPageRequestInFlightRef.current) {
-            scrollToLatest({ reattach: false });
-          }
-        });
-        return () => cancelAnimationFrame(frame2);
-      }
-      return;
-    }
-    if (previousKey === key) {
-      activeStreamKeyRef.current = key;
-      return;
-    }
-    setLatestFollowState("following");
-    const frame = requestAnimationFrame(() => scrollToLatest());
-    activeStreamKeyRef.current = key;
-    return () => cancelAnimationFrame(frame);
-  }, [activeStreamKey, isLoadingOlder, scrollToLatest, setLatestFollowState, shouldAutoFollow]);
-  (0, import_react3.useLayoutEffect)(() => {
-    if (!activeStreamKey || !shouldAutoFollow || followStateRef.current !== "following") return;
-    if (isLoadingOlder || olderPageRequestInFlightRef.current) return;
-    const frame = requestAnimationFrame(() => {
-      if (followStateRef.current === "following" && !isLoadingOlder && !olderPageRequestInFlightRef.current) {
-        scrollToLatest({ reattach: false });
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [activeStreamKey, isLoadingOlder, itemCount, scrollToLatest, shouldAutoFollow]);
-  (0, import_react3.useEffect)(() => {
-    if (!activeStreamKey) {
-      observedScrollHeightRef.current = scrollContainerRef.current?.scrollHeight ?? null;
-      return;
-    }
-    let frame = null;
-    const watchStreamResize = () => {
-      const element = scrollContainerRef.current;
-      if (!element) return;
-      const previousHeight = observedScrollHeightRef.current;
-      const nextHeight = element.scrollHeight;
-      observedScrollHeightRef.current = nextHeight;
-      if (previousHeight !== null && Math.abs(nextHeight - previousHeight) >= 1 && shouldAutoFollow && followStateRef.current === "following" && !isLoadingOlder && !olderPageRequestInFlightRef.current) {
-        scrollToLatest({ reattach: false });
-      }
-      frame = requestAnimationFrame(watchStreamResize);
-    };
-    frame = requestAnimationFrame(watchStreamResize);
-    return () => {
-      if (frame !== null) cancelAnimationFrame(frame);
-    };
-  }, [activeStreamKey, isLoadingOlder, scrollToLatest, shouldAutoFollow]);
-  return {
-    scrollContainerRef,
-    isAtLatest,
-    isFollowingLatest: followState === "following",
-    isTopOrigin,
-    shouldShowLatestButton: !isAtLatest,
-    handleScroll,
-    handleUserScrollIntent,
-    scrollToLatest,
-    detachFromLatest,
-    reattachToLatest,
-    preserveIntrinsicResize
-  };
-}
-function LatestThreadViewport({
-  items,
-  hasOlder,
-  isLoadingOlder,
-  onLoadOlder,
-  activeStreamKey,
-  className,
-  latestSpacer,
-  trailingSpacer,
-  renderItem
-}) {
-  const viewport = useLatestThreadViewport({
-    itemCount: items.length,
-    hasOlder,
-    isLoadingOlder,
-    onLoadOlder,
-    activeStreamKey
-  });
-  const timelineItems = (0, import_react3.useMemo)(() => viewport.isTopOrigin ? items : [...items].reverse(), [items, viewport.isTopOrigin]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "div",
-    {
-      ref: viewport.scrollContainerRef,
-      className,
-      onKeyDown: viewport.handleUserScrollIntent,
-      onScroll: viewport.handleScroll,
-      onTouchMove: viewport.handleUserScrollIntent,
-      onWheel: viewport.handleUserScrollIntent,
-      role: "log",
-      style: { overflowAnchor: "none" },
-      children: [
-        !viewport.isTopOrigin && (latestSpacer ?? null),
-        timelineItems.map((item) => renderItem(item, viewport)),
-        viewport.isTopOrigin && (trailingSpacer ?? latestSpacer ?? null)
-      ]
-    }
-  );
-}
+// src/viewport.ts
+var import_message_scroller2 = require("@shadcn/react/message-scroller");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_THREAD_PAGE_SIZE,
   DefaultChatPart,
   DefaultToolPart,
-  LatestThreadViewport,
+  LatestThreadScroller,
+  LatestThreadScrollerButton,
+  LatestThreadScrollerContent,
+  LatestThreadScrollerItem,
+  LatestThreadScrollerOutline,
+  LatestThreadScrollerProvider,
+  LatestThreadScrollerRoot,
+  LatestThreadScrollerViewport,
+  MessageScroller,
   activeRunIdFromThread,
   activeRunIdFromThreadDetail,
   assistantTextFromParts,
   assistantTextFromResponseBlocks,
+  compressionFromContextWindow,
   consumeSseResponse,
   createChatId,
   createFetchChatTransport,
   getActiveStreamingTextPartId,
-  getLatestScrollTop,
   hasStaleUnfinishedAssistantCache,
   hasUnfinishedAssistantMessage,
   isActiveStreamingTextPart,
-  isAtTimelineLatestEdge,
   isRunningThreadStatus,
-  isScrollable,
   latestContextWindowFromThread,
+  mergeContextWindow,
+  mergeContextWindowUpdate,
   mergeReasoningSteps,
-  nextLatestFollowStateOnScroll,
+  normalizeContextCompression,
+  normalizeContextWindow,
   parseSseBlock,
   partsFromResponseBlocks,
   reasoningStepsFromParts,
   renderChatPart,
-  shouldPrefetchOlder,
-  shouldUseTopOriginTimeline,
   textFromFinalOutput,
   threadActivityDate,
   threadDetailToMessages,
@@ -1618,7 +1933,9 @@ function LatestThreadViewport({
   titleFromMessage,
   toolStateFromStatus,
   useAgents24ChatController,
-  useLatestThreadViewport,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
   useStreamingText
 });
 //# sourceMappingURL=index.cjs.map