@blade-hq/agent-react 2610.0.0-beta.34 → 2610.0.0-beta.36

package/dist/components/ChatSurface.d.ts

@@ -60,6 +60,12 @@ interface ChatSurfaceProps extends ChatPresentationProps {
     showPlanUpdates?: boolean;
     /** 仅实时成功的 update_plan 递增；历史 hydration 不得改变。 */
     planRevealRevision?: number;
+    historyPaging?: {
+        hasOlder: boolean;
+        loading: boolean;
+        /** Resolves true only when the paging cursor advanced. */
+        loadOlder: (beforeCommit?: () => void) => Promise<boolean>;
+    };
     /** 连接状态条下方的横幅（回放模式条用）。不传时不渲染任何节点。 */
     banner?: ReactNode;
 }
@@ -69,5 +75,5 @@ interface ChatSurfaceProps extends ChatPresentationProps {
  * 这里的 DOM 结构受 tests/chat-view-compat.test.tsx 的快照保护——接入方拿
  * .blade-chat-* 类名写了自己的样式，结构一动他们的页面就歪。
  */
-export declare function ChatSurface({ theme, classNames, renderers, slots, placeholder, connection, errorMessage, messages, postChatFollowup, isStreaming, isStopping, inputText, onInputChange, onSuggestion, onSend, onAppend, onStop, sessionStatus, askAnswers, onAnswer, sessionId, isViewer, resultFeedbackByEntry, onResultFeedbackSaved, onFollowupInteraction, beforeInput, showPlanUpdates, planRevealRevision, banner, }: ChatSurfaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatSurface({ theme, classNames, renderers, slots, placeholder, connection, errorMessage, messages, postChatFollowup, isStreaming, isStopping, inputText, onInputChange, onSuggestion, onSend, onAppend, onStop, sessionStatus, askAnswers, onAnswer, sessionId, isViewer, resultFeedbackByEntry, onResultFeedbackSaved, onFollowupInteraction, beforeInput, showPlanUpdates, planRevealRevision, historyPaging, banner, }: ChatSurfaceProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/MessageList.d.ts

@@ -20,10 +20,16 @@ interface Props {
     onFollowupInteraction?: (event: FollowupInteractionEvent) => void;
     resultFeedbackByEntry?: ReadonlyMap<string, ResultFeedback>;
     onResultFeedbackSaved?: (feedback: ResultFeedback) => void;
+    historyPaging?: {
+        hasOlder: boolean;
+        loading: boolean;
+        /** Resolves true only when the paging cursor advanced. */
+        loadOlder: (beforeCommit?: () => void) => Promise<boolean>;
+    };
 }
 /**
  * 消息列表：use-stick-to-bottom 自动滚动 + 按轮次分组渲染。
  * 相比第一方版本去掉了轮次导航栏、吸顶状态条与规划摘要卡片。
  */
-export declare function MessageList({ messages, postChatFollowup, onSuggestion, isStreaming, sessionStatus, askAnswers, onAnswer, toolCallRenderer, hidePlanUpdateTools, emptyState, className, sessionId, isViewer, onFollowupInteraction, resultFeedbackByEntry, onResultFeedbackSaved, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function MessageList({ messages, postChatFollowup, onSuggestion, isStreaming, sessionStatus, askAnswers, onAnswer, toolCallRenderer, hidePlanUpdateTools, emptyState, className, sessionId, isViewer, onFollowupInteraction, resultFeedbackByEntry, onResultFeedbackSaved, historyPaging, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/embed/entry.d.ts

@@ -27,6 +27,7 @@ declare const BladeAgent: {
     SessionHub: typeof agentClient.SessionHub;
     SessionSetupError: typeof agentClient.SessionSetupError;
     createInitialSessionState: typeof agentClient.createInitialSessionState;
+    reconcileHistoricalUserTurns: typeof agentClient.reconcileHistoricalUserTurns;
     reconcileOptimisticUserTurns: typeof agentClient.reconcileOptimisticUserTurns;
     toReplaySnapshot: typeof agentClient.toReplaySnapshot;
     connectEmbedded: typeof agentClient.connectEmbedded;
@@ -37,6 +38,7 @@ declare const BladeAgent: {
     computerState: typeof agentClient.computerState;
     sortComputers: typeof agentClient.sortComputers;
     ModelsResource: typeof agentClient.ModelsResource;
+    hasChatRunEvent: typeof agentClient.hasChatRunEvent;
     buildMessageContent: typeof agentClient.buildMessageContent;
     chatErrorForDisplay: typeof agentClient.chatErrorForDisplay;
     contentPreview: typeof agentClient.contentPreview;
@@ -53,6 +55,8 @@ declare const BladeAgent: {
     getContextGroupDisplayState: typeof agentClient.getContextGroupDisplayState;
     groupAdjacentContextRuns: typeof agentClient.groupAdjacentContextRuns;
     latestPostChatFollowup: typeof agentClient.latestPostChatFollowup;
+    prependOlder: typeof agentClient.prependOlder;
+    replaceWindow: typeof agentClient.replaceWindow;
     DEFAULT_REPLAY_SPEED: agentClient.ReplaySpeed;
     SessionInfo: import("arktype/internal/variants/object.ts").ObjectType<{
         id: string;
@@ -100,6 +104,7 @@ declare const BladeAgent: {
     }, {}>;
     TaskStatus: import("arktype/internal/variants/string.ts").StringType<"done" | "failed" | "in_progress" | "pending" | "skipped", {}>;
     acceptedPostChatFollowupCompletesLatestRun: typeof agentClient.acceptedPostChatFollowupCompletesLatestRun;
+    acknowledgeTurnEvents: typeof agentClient.acknowledgeTurnEvents;
     ClientProjectionBuilder: typeof agentClient.ClientProjectionBuilder;
     createSocket: typeof agentClient.createSocket;
     getChat: typeof getChat;

package/dist/index.js

@@ -1144,7 +1144,7 @@ var X = createLucideIcon("X", [
 ]);
 
 // src/components/AgentChat.tsx
-import { useCallback as useCallback8, useEffect as useEffect13, useMemo as useMemo8, useState as useState15 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect12, useMemo as useMemo8, useState as useState15 } from "react";
 
 // src/lib/utils.ts
 function cn(...inputs) {
@@ -1613,7 +1613,7 @@ function CurrentPlanPanel({
 import { chatErrorForDisplay as chatErrorForDisplay2 } from "@blade-hq/agent-client";
 
 // src/components/ChatInput.tsx
-import { useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
+import { useState as useState5 } from "react";
 import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function isImeCompositionKey(event) {
   return event.isComposing || event.keyCode === 229;
@@ -1635,36 +1635,12 @@ function ChatInput({
 }) {
   const trimmed = value.trim();
   const [sendMode, setSendMode] = useState5("direct");
-  const [promptQueue, setPromptQueue] = useState5([]);
-  const queueSendingRef = useRef5(false);
-  const queueBlockedRef = useRef5(false);
-  const previousQueueKeyRef = useRef5(queueKey);
-  useEffect5(() => {
-    if (previousQueueKeyRef.current === queueKey) return;
-    previousQueueKeyRef.current = queueKey;
-    setPromptQueue([]);
-    queueBlockedRef.current = false;
-  }, [queueKey]);
+  void queueKey;
   const canSend = trimmed.length > 0 && (!isStreaming || sendMode === "queue");
-  useEffect5(() => {
-    if (isStreaming) {
-      queueBlockedRef.current = false;
-      return;
-    }
-    if (queueBlockedRef.current || promptQueue.length === 0 || queueSendingRef.current) return;
-    const next = promptQueue[0];
-    queueSendingRef.current = true;
-    Promise.resolve().then(() => onSend(next)).then((accepted) => {
-      if (accepted) setPromptQueue((current) => current.slice(1));
-      else queueBlockedRef.current = true;
-    }).finally(() => {
-      queueSendingRef.current = false;
-    });
-  }, [isStreaming, onSend, promptQueue]);
   const handleSend = async () => {
     if (!canSend) return;
     if (isStreaming && sendMode === "queue") {
-      setPromptQueue((current) => [...current, trimmed]);
+      if (onAppend) onAppend(trimmed);
       onValueChange("");
       return;
     }
@@ -1690,24 +1666,11 @@ function ChatInput({
     }
   };
   return /* @__PURE__ */ jsxs4("div", { className: cn("blade-chat-input border-t border-[hsl(var(--border))] py-3", className), children: [
-    /* @__PURE__ */ jsxs4("div", { className: "mx-auto mb-2 flex max-w-[748px] items-center justify-between px-1 text-xs text-[hsl(var(--muted-foreground))]", children: [
-      /* @__PURE__ */ jsxs4("fieldset", { className: "flex items-center gap-1 rounded-md border border-[hsl(var(--border))] p-0.5", children: [
-        /* @__PURE__ */ jsx5("legend", { className: "sr-only", children: "\u53D1\u9001\u65B9\u5F0F" }),
-        /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => setSendMode("direct"), "aria-pressed": sendMode === "direct", disabled: isStreaming && !onAppend, className: `rounded px-2 py-1 ${sendMode === "direct" ? "bg-[hsl(var(--accent))] text-[hsl(var(--foreground))]" : ""}`, children: "\u76F4\u63A5\u63D2\u5165" }),
-        /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => setSendMode("queue"), "aria-pressed": sendMode === "queue", className: `rounded px-2 py-1 ${sendMode === "queue" ? "bg-[hsl(var(--accent))] text-[hsl(var(--foreground))]" : ""}`, children: "\u6392\u961F\u6267\u884C" })
-      ] }),
-      promptQueue.length > 0 ? /* @__PURE__ */ jsxs4("details", { className: "relative", children: [
-        /* @__PURE__ */ jsxs4("summary", { className: "cursor-pointer list-none rounded px-2 py-1 hover:bg-[hsl(var(--accent))]", children: [
-          "\u5F85\u6267\u884C ",
-          promptQueue.length,
-          " \u6761"
-        ] }),
-        /* @__PURE__ */ jsx5("div", { className: "absolute bottom-full right-0 z-20 mb-2 w-64 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-2 shadow-lg", children: promptQueue.map((item, index) => /* @__PURE__ */ jsxs4("div", { className: "flex gap-2 border-b border-[hsl(var(--border))] py-2 last:border-0", children: [
-          /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate", children: item }),
-          /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => setPromptQueue((current) => current.filter((_, i) => i !== index)), children: "\u53D6\u6D88" })
-        ] }, `${index}-${item}`)) })
-      ] }) : null
-    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "mx-auto mb-2 flex max-w-[748px] items-center justify-between px-1 text-xs text-[hsl(var(--muted-foreground))]", children: /* @__PURE__ */ jsxs4("fieldset", { className: "flex items-center gap-1 rounded-md border border-[hsl(var(--border))] p-0.5", children: [
+      /* @__PURE__ */ jsx5("legend", { className: "sr-only", children: "\u53D1\u9001\u65B9\u5F0F" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => setSendMode("direct"), "aria-pressed": sendMode === "direct", disabled: isStreaming && !onAppend, className: `rounded px-2 py-1 ${sendMode === "direct" ? "bg-[hsl(var(--accent))] text-[hsl(var(--foreground))]" : ""}`, children: "\u76F4\u63A5\u63D2\u5165" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => setSendMode("queue"), "aria-pressed": sendMode === "queue", className: `rounded px-2 py-1 ${sendMode === "queue" ? "bg-[hsl(var(--accent))] text-[hsl(var(--foreground))]" : ""}`, children: "\u6392\u961F\u6267\u884C" })
+    ] }) }),
     /* @__PURE__ */ jsxs4("div", { className: "blade-chat-input-inner mx-auto flex max-w-[748px] items-end gap-2 rounded-2xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] px-3 py-2", children: [
       /* @__PURE__ */ jsx5(
         "textarea",
@@ -1746,16 +1709,16 @@ function ChatInput({
 }
 
 // src/components/ConnectionBanner.tsx
-import { useEffect as useEffect6, useRef as useRef6, useState as useState6 } from "react";
+import { useEffect as useEffect5, useRef as useRef5, useState as useState6 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var CONNECTION_NOTICE_DELAY_MS = 3e3;
 var CONNECTION_ERROR_DELAY_MS = 15e3;
 function useConnectionNoticePhase(connected) {
   const [phase, setPhase] = useState6("hidden");
-  const connectedRef = useRef6(connected);
-  const timersRef = useRef6([]);
+  const connectedRef = useRef5(connected);
+  const timersRef = useRef5([]);
   connectedRef.current = connected;
-  useEffect6(() => {
+  useEffect5(() => {
     const clearTimers = () => {
       for (const timer of timersRef.current) clearTimeout(timer);
       timersRef.current = [];
@@ -1795,7 +1758,7 @@ function useConnectionNoticePhase(connected) {
   return phase;
 }
 function ConnectionBanner({ connection, className }) {
-  const hasConnectedRef = useRef6(connection === "connected" || connection === "reconnecting");
+  const hasConnectedRef = useRef5(connection === "connected" || connection === "reconnecting");
   if (connection === "connected") hasConnectedRef.current = true;
   const connected = connection === "connected";
   const phase = useConnectionNoticePhase(connected);
@@ -1822,10 +1785,10 @@ function ConnectionBanner({ connection, className }) {
 
 // src/components/MessageList.tsx
 import { isHiddenInternalMessage } from "@blade-hq/agent-client";
-import { useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo7, useRef as useRef13, useState as useState14 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo7, useRef as useRef12, useState as useState14 } from "react";
 
 // ../../node_modules/.pnpm/use-stick-to-bottom@1.1.3_react@19.2.4/node_modules/use-stick-to-bottom/dist/useStickToBottom.js
-import { useCallback as useCallback4, useMemo as useMemo3, useRef as useRef7, useState as useState7 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo3, useRef as useRef6, useState as useState7 } from "react";
 var DEFAULT_SPRING_ANIMATION = {
   /**
    * A value from 0 to 1, on how much to damp the animation.
@@ -1865,7 +1828,7 @@ var useStickToBottom = (options = {}) => {
   const [escapedFromLock, updateEscapedFromLock] = useState7(false);
   const [isAtBottom, updateIsAtBottom] = useState7(options.initial !== false);
   const [isNearBottom, setIsNearBottom] = useState7(false);
-  const optionsRef = useRef7(null);
+  const optionsRef = useRef6(null);
   optionsRef.current = options;
   const isSelecting = useCallback4(() => {
     if (!mouseDown) {
@@ -2169,11 +2132,11 @@ function mergeAnimations(...animations) {
 
 // ../../node_modules/.pnpm/use-stick-to-bottom@1.1.3_react@19.2.4/node_modules/use-stick-to-bottom/dist/StickToBottom.js
 import * as React from "react";
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect7, useImperativeHandle, useLayoutEffect, useMemo as useMemo4, useRef as useRef8 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect6, useImperativeHandle, useLayoutEffect, useMemo as useMemo4, useRef as useRef7 } from "react";
 var StickToBottomContext = createContext2(null);
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect7;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect6;
 function StickToBottom({ instance, children, resize, initial, mass, damping, stiffness, targetScrollTop: currentTargetScrollTop, contextRef, ...props }) {
-  const customTargetScrollTop = useRef8(null);
+  const customTargetScrollTop = useRef7(null);
   const targetScrollTop = React.useCallback((target, elements) => {
     const get = context?.targetScrollTop ?? currentTargetScrollTop;
     return get?.(target, elements) ?? target;
@@ -2255,7 +2218,7 @@ import {
   getTextContent,
   normalizeMessageContent
 } from "@blade-hq/agent-client";
-import { useEffect as useEffect10, useRef as useRef11, useState as useState12 } from "react";
+import { useEffect as useEffect9, useRef as useRef10, useState as useState12 } from "react";
 
 // src/components/AgentLoopBlock.tsx
 import { useState as useState8 } from "react";
@@ -2320,9 +2283,9 @@ function AgentLoopBlock({ toolCall }) {
 
 // src/components/MarkdownContent.tsx
 import {
-  useEffect as useEffect8,
+  useEffect as useEffect7,
   useMemo as useMemo5,
-  useRef as useRef9,
+  useRef as useRef8,
   useState as useState9
 } from "react";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -2340,10 +2303,10 @@ function normalizeAdjacentUrlFormatting(value) {
   return normalized.replace(/blade-url-protected-(\d+)-marker/g, (_, index) => protectedSegments[Number(index)]);
 }
 function CodeBlockPre({ children, node: _node, ...props }) {
-  const preRef = useRef9(null);
+  const preRef = useRef8(null);
   const [copied, setCopied] = useState9(false);
   const [language, setLanguage] = useState9("");
-  useEffect8(() => {
+  useEffect7(() => {
     const codeEl = preRef.current?.querySelector("code");
     setLanguage(codeEl?.className.match(/language-(\S+)/)?.[1] ?? "");
   }, []);
@@ -2417,7 +2380,7 @@ function Shimmer({ children = "\u6B63\u5728\u601D\u8003...", className }) {
 import { useState as useState11 } from "react";
 
 // src/components/AskUserQuestionBlock.tsx
-import { useEffect as useEffect9, useMemo as useMemo6, useRef as useRef10, useState as useState10 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo6, useRef as useRef9, useState as useState10 } from "react";
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var CUSTOM_TEXTAREA_MAX_HEIGHT = 160;
 function resizeCustomTextarea(textarea) {
@@ -2426,12 +2389,12 @@ function resizeCustomTextarea(textarea) {
   textarea.style.overflowY = textarea.scrollHeight > CUSTOM_TEXTAREA_MAX_HEIGHT ? "auto" : "hidden";
 }
 function useAutoResizeTextarea(value) {
-  const textareaRef = useRef10(null);
-  useEffect9(() => {
+  const textareaRef = useRef9(null);
+  useEffect8(() => {
     const textarea = textareaRef.current;
     if (textarea?.value === value) resizeCustomTextarea(textarea);
   }, [value]);
-  useEffect9(() => {
+  useEffect8(() => {
     const textarea = textareaRef.current;
     if (!textarea || typeof ResizeObserver === "undefined") return;
     let previousWidth = textarea.clientWidth;
@@ -2461,7 +2424,7 @@ function AskUserQuestionBlock({
   const [usingCustom, setUsingCustom] = useState10(/* @__PURE__ */ new Set());
   const [note, setNote] = useState10("");
   const [submitted, setSubmitted] = useState10(false);
-  useEffect9(() => {
+  useEffect8(() => {
     if (sessionStatus === "failed" || sessionStatus === "interrupted") {
       setSubmitted(false);
     }
@@ -3255,9 +3218,9 @@ function AssistantTurnBlock({
   const [displayMode, setDisplayMode] = useState12(
     () => isStreaming || hasActionableToolCall ? "detail" : "compact"
   );
-  const userSelectedDisplayModeRef = useRef11(false);
-  const wasStreamingRef = useRef11(isStreaming);
-  useEffect10(() => {
+  const userSelectedDisplayModeRef = useRef10(false);
+  const wasStreamingRef = useRef10(isStreaming);
+  useEffect9(() => {
     if (wasStreamingRef.current && !isStreaming && !userSelectedDisplayModeRef.current) {
       setDisplayMode(hasActionableToolCall ? "detail" : "compact");
     }
@@ -3269,7 +3232,7 @@ function AssistantTurnBlock({
   const hasLiveStartTime = messages.some(
     (message) => message.timestamp != null && Number.isFinite(Date.parse(message.timestamp))
   );
-  useEffect10(() => {
+  useEffect9(() => {
     if (!isStreaming || !hasLiveStartTime) return;
     const timer = window.setInterval(() => setClock(Date.now()), 1e3);
     return () => window.clearInterval(timer);
@@ -3579,7 +3542,7 @@ var RenderErrorBoundary = class extends Component {
 };
 
 // src/components/PostChatFollowupBlock.tsx
-import { useCallback as useCallback6, useEffect as useEffect11, useRef as useRef12, useState as useState13 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef11, useState as useState13 } from "react";
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function emitInteraction(callback, event) {
   try {
@@ -3710,10 +3673,10 @@ function ResultFeedback({
   const [reason, setReason] = useState13(savedFeedback?.reason ?? null);
   const [saving, setSaving] = useState13(false);
   const [saveError, setSaveError] = useState13(false);
-  const reportedShown = useRef12(false);
-  const latestChoice = useRef12(null);
+  const reportedShown = useRef11(false);
+  const latestChoice = useRef11(null);
   const eligible = followup.feedback_eligible === true && Boolean(sessionId) && !isViewer;
-  useEffect11(() => {
+  useEffect10(() => {
     if (!eligible || reportedShown.current) return;
     reportedShown.current = true;
     emitInteraction(onInteraction, {
@@ -3722,7 +3685,7 @@ function ResultFeedback({
       assistantEntryId: followup.assistant_entry_id
     });
   }, [eligible, followup.assistant_entry_id, onInteraction, sessionId]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (!savedFeedback || latestChoice.current) return;
     setSaved(savedFeedback);
     setHelpful(savedFeedback.helpful);
@@ -3835,13 +3798,13 @@ function PostChatFollowupBlock({
   onFeedbackSaved
 }) {
   const [expanded, setExpanded] = useState13(false);
-  const adopted = useRef12(/* @__PURE__ */ new Set());
-  const reportedSuggestions = useRef12(false);
-  const reportedArtifacts = useRef12(/* @__PURE__ */ new Set());
-  const openedArtifacts = useRef12(/* @__PURE__ */ new Set());
+  const adopted = useRef11(/* @__PURE__ */ new Set());
+  const reportedSuggestions = useRef11(false);
+  const reportedArtifacts = useRef11(/* @__PURE__ */ new Set());
+  const openedArtifacts = useRef11(/* @__PURE__ */ new Set());
   const artifacts = followup.final_artifacts ?? [];
   const visibleArtifacts = expanded ? artifacts : artifacts.slice(0, 3);
-  useEffect11(() => {
+  useEffect10(() => {
     if (!reportedSuggestions.current && followup.suggestions.length > 0) {
       reportedSuggestions.current = true;
       emitInteraction(onInteraction, {
@@ -4150,7 +4113,8 @@ function MessageList({
   isViewer = false,
   onFollowupInteraction,
   resultFeedbackByEntry = /* @__PURE__ */ new Map(),
-  onResultFeedbackSaved
+  onResultFeedbackSaved,
+  historyPaging
 }) {
   const visibleRootMessages = messages.filter((message) => {
     if ((message.loop_name ?? "root") !== "root") return false;
@@ -4247,6 +4211,7 @@ function MessageList({
         resize: "instant",
         children: [
           /* @__PURE__ */ jsx17(StickToBottom.Content, { className: "blade-chat-messages-scroll", children: /* @__PURE__ */ jsxs15("div", { className: "blade-chat-messages-content mx-auto max-w-[748px]", children: [
+            historyPaging && (historyPaging.hasOlder || historyPaging.loading) ? /* @__PURE__ */ jsx17(LoadOlderSentinel, { ...historyPaging }) : null,
             isStreaming && latestUserMessage && latestPromptPreview ? /* @__PURE__ */ jsx17(
               "button",
               {
@@ -4346,14 +4311,84 @@ function MessageList({
     )
   ] });
 }
+function LoadOlderSentinel({
+  hasOlder,
+  loading,
+  loadOlder
+}) {
+  const { contentRef, scrollRef } = useStickToBottomContext();
+  const sentinelRef = useRef12(null);
+  const stateRef = useRef12({ hasOlder, loading, loadOlder });
+  stateRef.current = { hasOlder, loading, loadOlder };
+  useEffect11(() => {
+    const sentinel = sentinelRef.current;
+    const scroller = scrollRef.current;
+    if (!sentinel || !scroller || typeof IntersectionObserver === "undefined") return;
+    let entered = false;
+    let disposed = false;
+    const firstVisible = () => {
+      const top = scroller.getBoundingClientRect().top;
+      for (const row of contentRef.current?.querySelectorAll("[data-entry-id]") ?? []) {
+        const rect = row.getBoundingClientRect();
+        if (rect.bottom >= top) return { id: row.dataset.entryId, offset: rect.top - top };
+      }
+      return null;
+    };
+    const load = async () => {
+      if (disposed || !stateRef.current.hasOlder || stateRef.current.loading) return;
+      const commitSnapshot = { anchor: null, height: scroller.scrollHeight };
+      let advanced = false;
+      try {
+        advanced = await stateRef.current.loadOlder(() => {
+          commitSnapshot.anchor = firstVisible();
+          commitSnapshot.height = scroller.scrollHeight;
+        });
+      } catch {
+        return;
+      }
+      if (disposed) return;
+      await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+      if (disposed) return;
+      const anchor = commitSnapshot.anchor;
+      const heightBefore = commitSnapshot.height;
+      const anchored = anchor?.id ? Array.from(contentRef.current?.querySelectorAll("[data-entry-id]") ?? []).find((row) => row.dataset.entryId === anchor.id) : null;
+      if (anchored && anchor) {
+        scroller.scrollTop += anchored.getBoundingClientRect().top - scroller.getBoundingClientRect().top - anchor.offset;
+      } else {
+        scroller.scrollTop += scroller.scrollHeight - heightBefore;
+      }
+      if (!disposed && advanced && stateRef.current.hasOlder && !stateRef.current.loading && scroller.scrollHeight <= scroller.clientHeight) {
+        await load();
+      }
+    };
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) {
+          entered = false;
+          return;
+        }
+        if (entered) return;
+        entered = true;
+        void load();
+      },
+      { root: scroller, rootMargin: "160px 0px 0px" }
+    );
+    observer.observe(sentinel);
+    return () => {
+      disposed = true;
+      observer.disconnect();
+    };
+  }, [contentRef, scrollRef]);
+  return /* @__PURE__ */ jsx17("div", { ref: sentinelRef, "data-history-sentinel": true, className: "flex h-6 items-center justify-center", children: loading ? /* @__PURE__ */ jsx17("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: "\u6B63\u5728\u52A0\u8F7D\u66F4\u65E9\u6D88\u606F\u2026" }) : null });
+}
 function PinLatestUserMessage({
   userMessageCount,
   shouldPinLatestUser,
   targetKey
 }) {
   const { contentRef, scrollRef, scrollToBottom, stopScroll } = useStickToBottomContext();
-  const previousCountRef = useRef13(userMessageCount);
-  const spacerHeightRef = useRef13(0);
+  const previousCountRef = useRef12(userMessageCount);
+  const spacerHeightRef = useRef12(0);
   const getScrollElement = useCallback7(() => scrollRef.current, [scrollRef]);
   const getContentElement = useCallback7(() => contentRef.current, [contentRef]);
   const getTargetElement = useCallback7(() => {
@@ -4382,7 +4417,7 @@ function PinLatestUserMessage({
     stopAutoScroll: stopScroll,
     scrollToBottom
   });
-  useEffect12(() => {
+  useEffect11(() => {
     if (userMessageCount > previousCountRef.current && !shouldPinLatestUser) {
       scrollToBottom("instant");
     }
@@ -4393,8 +4428,8 @@ function PinLatestUserMessage({
 function ScrollToBottomButton() {
   const { isAtBottom, scrollToBottom } = useStickToBottomContext();
   const [visible, setVisible] = useState14(false);
-  const hideTimerRef = useRef13(null);
-  useEffect12(() => {
+  const hideTimerRef = useRef12(null);
+  useEffect11(() => {
     if (isAtBottom) {
       if (!hideTimerRef.current) {
         hideTimerRef.current = setTimeout(() => {
@@ -4484,6 +4519,7 @@ function ChatSurface({
   beforeInput,
   showPlanUpdates = false,
   planRevealRevision = 0,
+  historyPaging,
   banner
 }) {
   return /* @__PURE__ */ jsxs16(
@@ -4520,7 +4556,8 @@ function ChatSurface({
             isViewer,
             resultFeedbackByEntry,
             onResultFeedbackSaved,
-            onFollowupInteraction
+            onFollowupInteraction,
+            historyPaging
           }
         ),
         showPlanUpdates ? /* @__PURE__ */ jsx18(
@@ -4658,7 +4695,7 @@ function ChatSessionView({
   const [resultFeedback, setResultFeedback] = useState15([]);
   const resolvedSessionId = session?.sessionId;
   const isViewer = state?.viewerRole === "viewer";
-  useEffect13(() => {
+  useEffect12(() => {
     setResultFeedback([]);
     if (!resolvedSessionId || isViewer) return;
     let cancelled = false;
@@ -4693,12 +4730,12 @@ function ChatSessionView({
       saved
     ]);
   }, []);
-  useEffect13(() => {
+  useEffect12(() => {
     if (session) {
       onSessionReady?.(session);
     }
   }, [session, onSessionReady]);
-  useEffect13(() => {
+  useEffect12(() => {
     if (!session) return;
     const offAttach = session.on("attachRequested", ({ label, content }) => {
       setInputText((prev) => `${prev ? `${prev}
@@ -4714,12 +4751,12 @@ ${content}`);
       offInsert();
     };
   }, [session]);
-  useEffect13(() => {
+  useEffect12(() => {
     if (isUnauthorizedError(error)) {
       onUnauthorized();
     }
   }, [error, onUnauthorized]);
-  useEffect13(() => {
+  useEffect12(() => {
     if (!session || !commands) return;
     const unsubscribes = Object.entries(commands).map(
       ([action, handler]) => session.onCommand(action, (payload) => handler(payload))
@@ -4772,13 +4809,22 @@ ${content}`);
       isStreaming,
       showPlanUpdates: true,
       planRevealRevision,
+      historyPaging: session && state ? {
+        hasOlder: session.hasOlderHistory,
+        loading: state.loadingOlder,
+        loadOlder: async (beforeCommit) => {
+          const before = session.getState().nextBefore;
+          await session.loadOlderHistory({ beforeCommit });
+          return before !== session.getState().nextBefore;
+        }
+      } : void 0,
       isStopping,
       inputText,
       onInputChange: setInputText,
       onSuggestion: setInputText,
       onSend: handleSend,
       onAppend: (text) => {
-        void session?.send(text, { mode: state?.mode ?? void 0 });
+        void session?.queue(text);
       },
       onStop: handleStop,
       sessionStatus: state?.status ?? void 0,
@@ -4796,7 +4842,7 @@ ${content}`);
 }
 
 // src/components/LlmChat.tsx
-import { useEffect as useEffect14, useMemo as useMemo9, useState as useState17 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo9, useState as useState17 } from "react";
 
 // src/components/LlmAdvancedSettings.tsx
 import { useState as useState16 } from "react";
@@ -4944,7 +4990,7 @@ ${text}` : text),
     }),
     [send, reset]
   );
-  useEffect14(() => {
+  useEffect13(() => {
     onReady?.(handle);
   }, [handle, onReady]);
   return /* @__PURE__ */ jsx21(
@@ -5091,7 +5137,7 @@ function ContextGroupCard({ contexts, className }) {
 }
 
 // src/components/SessionMemoryToggle.tsx
-import { useCallback as useCallback9, useEffect as useEffect15, useRef as useRef14, useState as useState18, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect14, useRef as useRef13, useState as useState18, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var saveStates = /* @__PURE__ */ new WeakMap();
 function getSaveState(client, sessionId) {
@@ -5150,9 +5196,9 @@ function SessionMemoryToggle({
     getSaving
   );
   const [draftEnabled, setDraftEnabled] = useState18(enabled);
-  const activeSessionIdRef = useRef14(sessionId);
+  const activeSessionIdRef = useRef13(sessionId);
   activeSessionIdRef.current = sessionId;
-  useEffect15(() => {
+  useEffect14(() => {
     setDraftEnabled(enabled);
   }, [enabled, sessionId]);
   const update = useCallback9(