@blade-hq/agent-react 2610.0.0-beta.33 → 2610.0.0-beta.35

package/dist/index.js

@@ -1144,7 +1144,7 @@ var X = createLucideIcon("X", [
 ]);
 
 // src/components/AgentChat.tsx
-import { useCallback as useCallback8, useEffect as useEffect12, useMemo as useMemo8, useState as useState14 } 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,8 @@ function CurrentPlanPanel({
 import { chatErrorForDisplay as chatErrorForDisplay2 } from "@blade-hq/agent-client";
 
 // src/components/ChatInput.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+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;
 }
@@ -1624,16 +1625,31 @@ function ChatInput({
   value,
   onValueChange,
   onSend,
+  onAppend,
   onStop,
   isStreaming,
   isStopping = false,
   placeholder = "\u8F93\u5165\u6D88\u606F\u2026",
-  className
+  className,
+  queueKey
 }) {
   const trimmed = value.trim();
-  const canSend = trimmed.length > 0 && !isStreaming;
+  const [sendMode, setSendMode] = useState5("direct");
+  void queueKey;
+  const canSend = trimmed.length > 0 && (!isStreaming || sendMode === "queue");
   const handleSend = async () => {
     if (!canSend) return;
+    if (isStreaming && sendMode === "queue") {
+      if (onAppend) onAppend(trimmed);
+      onValueChange("");
+      return;
+    }
+    if (isStreaming && sendMode === "direct") {
+      if (!onAppend) return;
+      onAppend(trimmed);
+      onValueChange("");
+      return;
+    }
     const accepted = await onSend(trimmed);
     if (!accepted) return;
     onValueChange("");
@@ -1649,57 +1665,56 @@ function ChatInput({
       void handleSend();
     }
   };
-  return /* @__PURE__ */ jsx5("div", { className: cn("blade-chat-input border-t border-[hsl(var(--border))] py-3", className), children: /* @__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",
-      {
-        value,
-        onChange: (event) => onValueChange(event.target.value),
-        onKeyDown: handleKeyDown,
-        onInput: (event) => {
-          const el = event.currentTarget;
-          el.style.height = "auto";
-          el.style.height = `${Math.min(el.scrollHeight, 192)}px`;
-        },
-        rows: 1,
-        placeholder,
-        "aria-label": "\u804A\u5929\u8F93\u5165",
-        className: "blade-chat-textarea max-h-48 min-h-[28px] flex-1 resize-none bg-transparent py-1 text-sm leading-6 text-[hsl(var(--foreground))] outline-none placeholder:text-[hsl(var(--muted-foreground)/0.6)]"
-      }
-    ),
-    isStreaming ? /* @__PURE__ */ jsx5(
-      "button",
-      {
-        type: "button",
-        onClick: onStop,
-        disabled: isStopping,
-        "aria-label": isStopping ? "\u6B63\u5728\u505C\u6B62" : "\u505C\u6B62\u56DE\u590D",
-        title: isStopping ? "\u6B63\u5728\u505C\u6B62" : "\u505C\u6B62\u56DE\u590D",
-        className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] transition-opacity hover:opacity-90 disabled:opacity-60",
-        children: isStopping ? /* @__PURE__ */ jsx5(LoaderCircle, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ jsx5(Square, { size: 12, fill: "currentColor" })
-      }
-    ) : /* @__PURE__ */ jsx5(
-      "button",
-      {
-        type: "button",
-        onClick: handleSend,
-        disabled: !canSend,
-        "aria-label": "\u53D1\u9001\u6D88\u606F",
-        title: "\u53D1\u9001\u6D88\u606F",
-        className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40",
-        children: /* @__PURE__ */ jsx5(ArrowUp, { size: 15 })
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsxs4("div", { className: cn("blade-chat-input border-t border-[hsl(var(--border))] py-3", className), children: [
+    /* @__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",
+        {
+          value,
+          onChange: (event) => onValueChange(event.target.value),
+          onKeyDown: handleKeyDown,
+          onInput: (event) => {
+            const el = event.currentTarget;
+            el.style.height = "auto";
+            el.style.height = `${Math.min(el.scrollHeight, 192)}px`;
+          },
+          rows: 1,
+          placeholder,
+          "aria-label": "\u804A\u5929\u8F93\u5165",
+          className: "blade-chat-textarea max-h-48 min-h-[28px] flex-1 resize-none bg-transparent py-1 text-sm leading-6 text-[hsl(var(--foreground))] outline-none placeholder:text-[hsl(var(--muted-foreground)/0.6)]"
+        }
+      ),
+      isStreaming ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+        sendMode === "queue" ? /* @__PURE__ */ jsx5("button", { type: "button", onClick: handleSend, disabled: !canSend, "aria-label": "\u52A0\u5165\u6392\u961F", title: "\u52A0\u5165\u6392\u961F", className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] disabled:opacity-40", children: /* @__PURE__ */ jsx5(ArrowUp, { size: 15 }) }) : null,
+        /* @__PURE__ */ jsx5("button", { type: "button", onClick: onStop, disabled: isStopping, "aria-label": isStopping ? "\u6B63\u5728\u505C\u6B62" : "\u505C\u6B62\u56DE\u590D", title: isStopping ? "\u6B63\u5728\u505C\u6B62" : "\u505C\u6B62\u56DE\u590D", className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] transition-opacity hover:opacity-90 disabled:opacity-60", children: isStopping ? /* @__PURE__ */ jsx5(LoaderCircle, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ jsx5(Square, { size: 12, fill: "currentColor" }) })
+      ] }) : /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: handleSend,
+          disabled: !canSend,
+          "aria-label": "\u53D1\u9001\u6D88\u606F",
+          title: "\u53D1\u9001\u6D88\u606F",
+          className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40",
+          children: /* @__PURE__ */ jsx5(ArrowUp, { size: 15 })
+        }
+      )
+    ] })
+  ] });
 }
 
 // src/components/ConnectionBanner.tsx
-import { useEffect as useEffect5, useRef as useRef5, useState as useState5 } 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] = useState5("hidden");
+  const [phase, setPhase] = useState6("hidden");
   const connectedRef = useRef5(connected);
   const timersRef = useRef5([]);
   connectedRef.current = connected;
@@ -1770,10 +1785,10 @@ function ConnectionBanner({ connection, className }) {
 
 // src/components/MessageList.tsx
 import { isHiddenInternalMessage } from "@blade-hq/agent-client";
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo7, useRef as useRef12, useState as useState13 } 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 useRef6, useState as useState6 } 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.
@@ -1810,9 +1825,9 @@ globalThis.document?.addEventListener("click", () => {
   mouseDown = false;
 });
 var useStickToBottom = (options = {}) => {
-  const [escapedFromLock, updateEscapedFromLock] = useState6(false);
-  const [isAtBottom, updateIsAtBottom] = useState6(options.initial !== false);
-  const [isNearBottom, setIsNearBottom] = useState6(false);
+  const [escapedFromLock, updateEscapedFromLock] = useState7(false);
+  const [isAtBottom, updateIsAtBottom] = useState7(options.initial !== false);
+  const [isNearBottom, setIsNearBottom] = useState7(false);
   const optionsRef = useRef6(null);
   optionsRef.current = options;
   const isSelecting = useCallback4(() => {
@@ -2203,10 +2218,10 @@ import {
   getTextContent,
   normalizeMessageContent
 } from "@blade-hq/agent-client";
-import { useEffect as useEffect9, useRef as useRef10, useState as useState11 } from "react";
+import { useEffect as useEffect9, useRef as useRef10, useState as useState12 } from "react";
 
 // src/components/AgentLoopBlock.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function parseAgentDescription(argumentsJson) {
   try {
@@ -2217,7 +2232,7 @@ function parseAgentDescription(argumentsJson) {
   }
 }
 function AgentLoopBlock({ toolCall }) {
-  const [expanded, setExpanded] = useState7(false);
+  const [expanded, setExpanded] = useState8(false);
   const description = parseAgentDescription(toolCall.arguments);
   const running = toolCall.status === "pending" || toolCall.status === "awaiting_answer";
   const failed = toolCall.status === "error" || toolCall.status === "cancelled";
@@ -2271,7 +2286,7 @@ import {
   useEffect as useEffect7,
   useMemo as useMemo5,
   useRef as useRef8,
-  useState as useState8
+  useState as useState9
 } from "react";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var SYSTEM_REMINDER_RE = /<system-reminder>[\s\S]*?<\/system-reminder>/gi;
@@ -2289,8 +2304,8 @@ function normalizeAdjacentUrlFormatting(value) {
 }
 function CodeBlockPre({ children, node: _node, ...props }) {
   const preRef = useRef8(null);
-  const [copied, setCopied] = useState8(false);
-  const [language, setLanguage] = useState8("");
+  const [copied, setCopied] = useState9(false);
+  const [language, setLanguage] = useState9("");
   useEffect7(() => {
     const codeEl = preRef.current?.querySelector("code");
     setLanguage(codeEl?.className.match(/language-(\S+)/)?.[1] ?? "");
@@ -2362,10 +2377,10 @@ function Shimmer({ children = "\u6B63\u5728\u601D\u8003...", className }) {
 }
 
 // src/components/ToolCallBlock.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/components/AskUserQuestionBlock.tsx
-import { useEffect as useEffect8, useMemo as useMemo6, useRef as useRef9, useState as useState9 } 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) {
@@ -2404,11 +2419,11 @@ function AskUserQuestionBlock({
   answerData,
   onAnswer
 }) {
-  const [selections, setSelections] = useState9(/* @__PURE__ */ new Map());
-  const [customTexts, setCustomTexts] = useState9(/* @__PURE__ */ new Map());
-  const [usingCustom, setUsingCustom] = useState9(/* @__PURE__ */ new Set());
-  const [note, setNote] = useState9("");
-  const [submitted, setSubmitted] = useState9(false);
+  const [selections, setSelections] = useState10(/* @__PURE__ */ new Map());
+  const [customTexts, setCustomTexts] = useState10(/* @__PURE__ */ new Map());
+  const [usingCustom, setUsingCustom] = useState10(/* @__PURE__ */ new Set());
+  const [note, setNote] = useState10("");
+  const [submitted, setSubmitted] = useState10(false);
   useEffect8(() => {
     if (sessionStatus === "failed" || sessionStatus === "interrupted") {
       setSubmitted(false);
@@ -2798,7 +2813,7 @@ function normalizeOptionItem(value) {
 }
 
 // src/components/ToolCallBlock.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function resolveAskQuestionState({
   toolStatus,
   hasAnswerData,
@@ -2820,12 +2835,12 @@ function ToolCallBlock({
   isActiveQuestion,
   renderer
 }) {
-  const [expanded, setExpanded] = useState10(false);
+  const [expanded, setExpanded] = useState11(false);
   const normalizedName = formatToolName(toolCall.name);
   if (renderer) {
     const custom = renderer(toolCall);
     if (custom !== null && custom !== void 0) {
-      return /* @__PURE__ */ jsx11(Fragment, { children: custom });
+      return /* @__PURE__ */ jsx11(Fragment2, { children: custom });
     }
   }
   if (normalizedName === "AskUserQuestion") {
@@ -2908,7 +2923,7 @@ function ToolCallBlock({
       /* @__PURE__ */ jsx11("div", { className: "mb-3 font-mono text-[11px] text-[hsl(var(--foreground))]", children: normalizedName }),
       /* @__PURE__ */ jsx11("div", { className: "mb-1 text-[10px] uppercase tracking-wider text-[hsl(var(--muted-foreground))]", children: "\u53C2\u6570" }),
       /* @__PURE__ */ jsx11("pre", { className: "overflow-x-auto whitespace-pre-wrap rounded-md bg-[hsl(var(--muted))] p-2 font-mono text-[11px] text-[hsl(var(--foreground))]", children: formatToolArgs(toolCall.arguments) }),
-      toolCall.result != null && /* @__PURE__ */ jsxs9(Fragment, { children: [
+      toolCall.result != null && /* @__PURE__ */ jsxs9(Fragment2, { children: [
         /* @__PURE__ */ jsx11("div", { className: "mb-1 mt-3 text-[10px] uppercase tracking-wider text-[hsl(var(--muted-foreground))]", children: "\u7ED3\u679C" }),
         /* @__PURE__ */ jsx11("pre", { className: "max-h-[400px] overflow-auto whitespace-pre-wrap rounded-md bg-[hsl(var(--muted))] p-2 font-mono text-[11px] text-[hsl(var(--foreground))]", children: formatToolResult(toolCall.result) })
       ] })
@@ -2930,7 +2945,7 @@ function buildAskUserPayload(argumentsJson) {
 // src/components/AssistantTurnBlock.tsx
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function ThinkingBlock({ reasoning, isStreaming }) {
-  const [open, setOpen] = useState11(false);
+  const [open, setOpen] = useState12(false);
   if (!isStreaming) return null;
   return /* @__PURE__ */ jsxs10("div", { className: "blade-chat-thinking text-xs", children: [
     /* @__PURE__ */ jsxs10(
@@ -3200,7 +3215,7 @@ function AssistantTurnBlock({
     )
   );
   const activeQuestionId = questionToolCalls.filter((toolCall) => toolCall.status === "pending").at(-1)?.id;
-  const [displayMode, setDisplayMode] = useState11(
+  const [displayMode, setDisplayMode] = useState12(
     () => isStreaming || hasActionableToolCall ? "detail" : "compact"
   );
   const userSelectedDisplayModeRef = useRef10(false);
@@ -3213,7 +3228,7 @@ function AssistantTurnBlock({
   }, [hasActionableToolCall, isStreaming]);
   const effectiveMode = resolveTurnDisplayMode({ isStreaming, displayMode });
   const executionDurationMs = getExecutionDurationMs({ messages, isStreaming });
-  const [clock, setClock] = useState11(() => Date.now());
+  const [clock, setClock] = useState12(() => Date.now());
   const hasLiveStartTime = messages.some(
     (message) => message.timestamp != null && Number.isFinite(Date.parse(message.timestamp))
   );
@@ -3392,7 +3407,7 @@ function collectMemoryRefs(messages) {
   return [...refs.values()];
 }
 function MemoryRefsHint({ refs }) {
-  const [expanded, setExpanded] = useState11(false);
+  const [expanded, setExpanded] = useState12(false);
   const label = refs.some((ref) => ref.skill_name) ? "\u53C2\u8003\u4E86\u8BE5\u6280\u80FD\u7684\u5386\u53F2\u7ECF\u9A8C" : "\u53C2\u8003\u4E86\u5386\u53F2\u7ECF\u9A8C";
   return /* @__PURE__ */ jsxs10("div", { className: "blade-chat-memory-refs ml-1 w-full max-w-[680px]", children: [
     /* @__PURE__ */ jsxs10("button", { type: "button", onClick: () => setExpanded((value) => !value), className: "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[hsl(var(--primary)/0.22)] bg-[hsl(var(--primary)/0.07)] px-3 text-xs font-medium text-[hsl(var(--primary))]", children: [
@@ -3527,8 +3542,8 @@ var RenderErrorBoundary = class extends Component {
 };
 
 // src/components/PostChatFollowupBlock.tsx
-import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef11, useState as useState12 } from "react";
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+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 {
     callback?.(event);
@@ -3547,7 +3562,7 @@ function ArtifactCard({
   onArtifactOpened
 }) {
   const client = useBladeClient();
-  const [downloading, setDownloading] = useState12(false);
+  const [downloading, setDownloading] = useState13(false);
   const name = artifact.label || basename(artifact.target);
   if (artifact.kind === "link") {
     return /* @__PURE__ */ jsxs12(
@@ -3653,11 +3668,11 @@ function ResultFeedback({
   onFeedbackSaved
 }) {
   const client = useBladeClient();
-  const [saved, setSaved] = useState12(savedFeedback ?? null);
-  const [helpful, setHelpful] = useState12(savedFeedback?.helpful ?? null);
-  const [reason, setReason] = useState12(savedFeedback?.reason ?? null);
-  const [saving, setSaving] = useState12(false);
-  const [saveError, setSaveError] = useState12(false);
+  const [saved, setSaved] = useState13(savedFeedback ?? null);
+  const [helpful, setHelpful] = useState13(savedFeedback?.helpful ?? null);
+  const [reason, setReason] = useState13(savedFeedback?.reason ?? null);
+  const [saving, setSaving] = useState13(false);
+  const [saveError, setSaveError] = useState13(false);
   const reportedShown = useRef11(false);
   const latestChoice = useRef11(null);
   const eligible = followup.feedback_eligible === true && Boolean(sessionId) && !isViewer;
@@ -3782,7 +3797,7 @@ function PostChatFollowupBlock({
   savedFeedback,
   onFeedbackSaved
 }) {
-  const [expanded, setExpanded] = useState12(false);
+  const [expanded, setExpanded] = useState13(false);
   const adopted = useRef11(/* @__PURE__ */ new Set());
   const reportedSuggestions = useRef11(false);
   const reportedArtifacts = useRef11(/* @__PURE__ */ new Set());
@@ -3842,7 +3857,7 @@ function PostChatFollowupBlock({
         "\u672C\u8F6E\u5C0F\u7ED3"
       ] }),
       followup.recaption ? /* @__PURE__ */ jsx14("p", { className: "text-[13px] leading-5", children: followup.recaption }) : null,
-      artifacts.length > 0 ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
+      artifacts.length > 0 ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
         /* @__PURE__ */ jsx14("div", { className: "grid max-w-full grid-cols-3 gap-1.5", children: visibleArtifacts.map((artifact, artifactIndex) => /* @__PURE__ */ jsx14(
           ArtifactCard,
           {
@@ -4098,10 +4113,19 @@ function MessageList({
   isViewer = false,
   onFollowupInteraction,
   resultFeedbackByEntry = /* @__PURE__ */ new Map(),
-  onResultFeedbackSaved
+  onResultFeedbackSaved,
+  historyPaging
 }) {
-  const userMessages = messages.filter((message) => isUserMessage(message));
+  const visibleRootMessages = messages.filter((message) => {
+    if ((message.loop_name ?? "root") !== "root") return false;
+    if (isHiddenInternalMessage(message)) return false;
+    if (message.kind === "context") return false;
+    return message.role !== "tool" || getPlanningDividerKind(message) !== null;
+  });
+  const userMessages = visibleRootMessages.filter((message) => isUserMessage(message));
   const latestUserMessage = userMessages.at(-1);
+  const latestPromptText = latestUserMessage ? (typeof latestUserMessage.content === "string" ? latestUserMessage.content : latestUserMessage.content.filter((part) => part.type === "text").map((part) => part.text).join("")).replace(/\s+/g, " ").trim() : "";
+  const latestPromptPreview = latestPromptText.length > 80 ? `${latestPromptText.slice(0, 80)}\u2026` : latestPromptText;
   const shouldPinLatestUser = latestUserMessage != null && (latestUserMessage.entry_id == null || latestUserMessage.entry_id.startsWith("local-user-"));
   const renderBlocks = useMemo7(() => {
     const visible = messages.filter((message) => {
@@ -4186,78 +4210,91 @@ function MessageList({
         initial: "instant",
         resize: "instant",
         children: [
-          /* @__PURE__ */ jsx17(StickToBottom.Content, { className: "blade-chat-messages-scroll", children: /* @__PURE__ */ jsx17("div", { className: "blade-chat-messages-content mx-auto max-w-[748px]", children: /* @__PURE__ */ jsxs15("div", { className: "flex min-w-0 flex-col", children: [
-            renderBlocks.length === 0 ? emptyState ?? /* @__PURE__ */ jsxs15("div", { className: "blade-chat-empty", children: [
-              /* @__PURE__ */ jsx17(MessageSquare, { size: 40, strokeWidth: 1.5 }),
-              /* @__PURE__ */ jsx17("span", { className: "text-base font-medium", children: "\u5F00\u59CB\u5BF9\u8BDD" }),
-              /* @__PURE__ */ jsx17("span", { className: "text-sm opacity-60", children: "\u5728\u4E0B\u65B9\u8F93\u5165\u6D88\u606F\u5F00\u59CB\u804A\u5929" })
-            ] }) : renderBlocks.map((block) => {
-              if (block.type === "message") {
-                return /* @__PURE__ */ jsx17("div", { "data-entry-id": block.message.entry_id, children: isUserMessage(block.message) ? /* @__PURE__ */ jsx17(UserMessageBubble, { message: block.message }) : isErrorMessage(block.message) ? /* @__PURE__ */ jsx17(ErrorMessageBlock, { message: block.message }) : null }, block.key);
-              }
-              if (block.type === "assistant_turn") {
-                const blockFeedback = block.messages.map(
-                  (message) => message.entry_id ? resultFeedbackByEntry.get(message.entry_id) : void 0
-                ).find((feedback) => feedback != null);
-                const hasActiveFollowup = Boolean(
-                  postChatFollowup && block.messages.some(
-                    (message) => message.entry_id === postChatFollowup.assistant_entry_id
-                  )
-                );
-                return /* @__PURE__ */ jsx17("div", { "data-entry-id": block.messages[0]?.entry_id, children: /* @__PURE__ */ jsxs15(
-                  RenderErrorBoundary,
-                  {
-                    label: "\u52A9\u624B\u6D88\u606F",
-                    details: block.key,
-                    resetKey: getMessageResetSignature(block.messages),
-                    children: [
-                      /* @__PURE__ */ jsx17(
-                        AssistantTurnBlock,
-                        {
-                          messages: block.messages,
-                          isStreaming: block.isStreaming,
-                          askAnswers,
-                          onAnswer,
-                          sessionStatus,
-                          toolCallRenderer,
-                          hidePlanUpdateTools,
-                          sessionId
-                        }
-                      ),
-                      blockFeedback && !hasActiveFollowup ? /* @__PURE__ */ jsx17(HistoricalResultFeedback, { feedback: blockFeedback }) : null,
-                      hasActiveFollowup && postChatFollowup ? /* @__PURE__ */ jsx17(
-                        PostChatFollowupBlock,
-                        {
-                          followup: postChatFollowup,
-                          sessionId,
-                          onSuggestion,
-                          isViewer,
-                          onInteraction: onFollowupInteraction,
-                          savedFeedback: blockFeedback,
-                          onFeedbackSaved: onResultFeedbackSaved
-                        }
-                      ) : null
-                    ]
-                  }
-                ) }, block.key);
-              }
-              if (block.type === "compaction") {
-                return /* @__PURE__ */ jsxs15(
-                  "div",
-                  {
-                    className: "flex items-center gap-2 text-xs text-[hsl(var(--muted-foreground))]",
-                    children: [
-                      /* @__PURE__ */ jsx17(Layers, { size: 12 }),
-                      /* @__PURE__ */ jsx17("span", { children: "\u4E0A\u4E0B\u6587\u5DF2\u538B\u7F29" })
-                    ]
-                  },
-                  block.key
-                );
+          /* @__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",
+              {
+                type: "button",
+                className: "sticky top-0 z-20 mb-4 w-full truncate rounded-2xl border border-[hsl(var(--primary)/0.2)] bg-[hsl(var(--background)/0.92)] px-4 py-3 text-left text-sm font-medium shadow-sm backdrop-blur",
+                onClick: () => Array.from(document.querySelectorAll("[data-entry-id]")).find((el) => el.dataset.entryId === latestUserMessage.entry_id)?.scrollIntoView({ behavior: "smooth", block: "start" }),
+                "aria-label": "\u8DF3\u8F6C\u5230\u5F53\u524D\u63D0\u95EE",
+                children: latestPromptPreview
               }
-              return /* @__PURE__ */ jsx17(PlanningDivider, { kind: block.kind }, block.key);
-            }),
-            sessionStatus === "interrupted" && !isStreaming ? /* @__PURE__ */ jsx17("div", { className: "flex", children: /* @__PURE__ */ jsx17("div", { className: "rounded-full border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.12em] text-amber-300", children: "\u5DF2\u4E2D\u65AD" }) }) : null
-          ] }) }) }),
+            ) : null,
+            /* @__PURE__ */ jsxs15("div", { className: "flex min-w-0 flex-col", children: [
+              renderBlocks.length === 0 ? emptyState ?? /* @__PURE__ */ jsxs15("div", { className: "blade-chat-empty", children: [
+                /* @__PURE__ */ jsx17(MessageSquare, { size: 40, strokeWidth: 1.5 }),
+                /* @__PURE__ */ jsx17("span", { className: "text-base font-medium", children: "\u5F00\u59CB\u5BF9\u8BDD" }),
+                /* @__PURE__ */ jsx17("span", { className: "text-sm opacity-60", children: "\u5728\u4E0B\u65B9\u8F93\u5165\u6D88\u606F\u5F00\u59CB\u804A\u5929" })
+              ] }) : renderBlocks.map((block) => {
+                if (block.type === "message") {
+                  return /* @__PURE__ */ jsx17("div", { "data-entry-id": block.message.entry_id, children: isUserMessage(block.message) ? /* @__PURE__ */ jsx17(UserMessageBubble, { message: block.message }) : isErrorMessage(block.message) ? /* @__PURE__ */ jsx17(ErrorMessageBlock, { message: block.message }) : null }, block.key);
+                }
+                if (block.type === "assistant_turn") {
+                  const blockFeedback = block.messages.map(
+                    (message) => message.entry_id ? resultFeedbackByEntry.get(message.entry_id) : void 0
+                  ).find((feedback) => feedback != null);
+                  const hasActiveFollowup = Boolean(
+                    postChatFollowup && block.messages.some(
+                      (message) => message.entry_id === postChatFollowup.assistant_entry_id
+                    )
+                  );
+                  return /* @__PURE__ */ jsx17("div", { "data-entry-id": block.messages[0]?.entry_id, children: /* @__PURE__ */ jsxs15(
+                    RenderErrorBoundary,
+                    {
+                      label: "\u52A9\u624B\u6D88\u606F",
+                      details: block.key,
+                      resetKey: getMessageResetSignature(block.messages),
+                      children: [
+                        /* @__PURE__ */ jsx17(
+                          AssistantTurnBlock,
+                          {
+                            messages: block.messages,
+                            isStreaming: block.isStreaming,
+                            askAnswers,
+                            onAnswer,
+                            sessionStatus,
+                            toolCallRenderer,
+                            hidePlanUpdateTools,
+                            sessionId
+                          }
+                        ),
+                        blockFeedback && !hasActiveFollowup ? /* @__PURE__ */ jsx17(HistoricalResultFeedback, { feedback: blockFeedback }) : null,
+                        hasActiveFollowup && postChatFollowup ? /* @__PURE__ */ jsx17(
+                          PostChatFollowupBlock,
+                          {
+                            followup: postChatFollowup,
+                            sessionId,
+                            onSuggestion,
+                            isViewer,
+                            onInteraction: onFollowupInteraction,
+                            savedFeedback: blockFeedback,
+                            onFeedbackSaved: onResultFeedbackSaved
+                          }
+                        ) : null
+                      ]
+                    }
+                  ) }, block.key);
+                }
+                if (block.type === "compaction") {
+                  return /* @__PURE__ */ jsxs15(
+                    "div",
+                    {
+                      className: "flex items-center gap-2 text-xs text-[hsl(var(--muted-foreground))]",
+                      children: [
+                        /* @__PURE__ */ jsx17(Layers, { size: 12 }),
+                        /* @__PURE__ */ jsx17("span", { children: "\u4E0A\u4E0B\u6587\u5DF2\u538B\u7F29" })
+                      ]
+                    },
+                    block.key
+                  );
+                }
+                return /* @__PURE__ */ jsx17(PlanningDivider, { kind: block.kind }, block.key);
+              }),
+              sessionStatus === "interrupted" && !isStreaming ? /* @__PURE__ */ jsx17("div", { className: "flex", children: /* @__PURE__ */ jsx17("div", { className: "rounded-full border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.12em] text-amber-300", children: "\u5DF2\u4E2D\u65AD" }) }) : null
+            ] })
+          ] }) }),
           /* @__PURE__ */ jsx17(
             PinLatestUserMessage,
             {
@@ -4274,6 +4311,76 @@ 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,
@@ -4320,7 +4427,7 @@ function PinLatestUserMessage({
 }
 function ScrollToBottomButton() {
   const { isAtBottom, scrollToBottom } = useStickToBottomContext();
-  const [visible, setVisible] = useState13(false);
+  const [visible, setVisible] = useState14(false);
   const hideTimerRef = useRef12(null);
   useEffect11(() => {
     if (isAtBottom) {
@@ -4399,6 +4506,7 @@ function ChatSurface({
   onInputChange,
   onSuggestion,
   onSend,
+  onAppend,
   onStop,
   sessionStatus,
   askAnswers,
@@ -4411,6 +4519,7 @@ function ChatSurface({
   beforeInput,
   showPlanUpdates = false,
   planRevealRevision = 0,
+  historyPaging,
   banner
 }) {
   return /* @__PURE__ */ jsxs16(
@@ -4447,7 +4556,8 @@ function ChatSurface({
             isViewer,
             resultFeedbackByEntry,
             onResultFeedbackSaved,
-            onFollowupInteraction
+            onFollowupInteraction,
+            historyPaging
           }
         ),
         showPlanUpdates ? /* @__PURE__ */ jsx18(
@@ -4467,10 +4577,12 @@ function ChatSurface({
             value: inputText,
             onValueChange: onInputChange,
             onSend,
+            onAppend,
             onStop,
             isStreaming,
             isStopping,
             placeholder,
+            queueKey: sessionId,
             className: classNames?.chatInput
           }
         ),
@@ -4481,13 +4593,13 @@ function ChatSurface({
 }
 
 // src/components/AgentChat.tsx
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function isUnauthorizedError(error) {
   return error instanceof BladeApiError && error.status === 401;
 }
 function LoginCard({ client, onLoggedIn }) {
-  const [loggingIn, setLoggingIn] = useState14(false);
-  const [loginError, setLoginError] = useState14(null);
+  const [loggingIn, setLoggingIn] = useState15(false);
+  const [loginError, setLoginError] = useState15(null);
   const handleLogin = async () => {
     setLoggingIn(true);
     setLoginError(null);
@@ -4519,8 +4631,8 @@ function LoginCard({ client, onLoggedIn }) {
 }
 function AgentChat(props) {
   const client = useBladeClient();
-  const [attempt, setAttempt] = useState14(0);
-  const [needLogin, setNeedLogin] = useState14(() => !client.hasToken());
+  const [attempt, setAttempt] = useState15(0);
+  const [needLogin, setNeedLogin] = useState15(() => !client.hasToken());
   if (needLogin) {
     return /* @__PURE__ */ jsx19(
       "div",
@@ -4557,7 +4669,7 @@ function ChatSessionView({
   onUnauthorized
 }) {
   const client = useBladeClient();
-  const [planRevealRevisions, setPlanRevealRevisions] = useState14(
+  const [planRevealRevisions, setPlanRevealRevisions] = useState15(
     () => /* @__PURE__ */ new Map()
   );
   const handleSessionConnected = useCallback8((connectedSession) => {
@@ -4578,9 +4690,9 @@ function ChatSessionView({
     onSessionConnected: handleSessionConnected
   });
   const replay = useReplay(session);
-  const [stopRequested, setStopRequested] = useState14(false);
-  const [inputText, setInputText] = useState14("");
-  const [resultFeedback, setResultFeedback] = useState14([]);
+  const [stopRequested, setStopRequested] = useState15(false);
+  const [inputText, setInputText] = useState15("");
+  const [resultFeedback, setResultFeedback] = useState15([]);
   const resolvedSessionId = session?.sessionId;
   const isViewer = state?.viewerRole === "viewer";
   useEffect12(() => {
@@ -4676,7 +4788,7 @@ ${content}`);
       slots,
       placeholder,
       connection: state?.connection ?? "connecting",
-      banner: /* @__PURE__ */ jsxs17(Fragment3, { children: [
+      banner: /* @__PURE__ */ jsxs17(Fragment4, { children: [
         /* @__PURE__ */ jsx19(
           ReplayBar,
           {
@@ -4697,11 +4809,23 @@ ${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?.queue(text);
+      },
       onStop: handleStop,
       sessionStatus: state?.status ?? void 0,
       askAnswers: state?.askAnswers,
@@ -4718,10 +4842,10 @@ ${content}`);
 }
 
 // src/components/LlmChat.tsx
-import { useEffect as useEffect13, useMemo as useMemo9, useState as useState16 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo9, useState as useState17 } from "react";
 
 // src/components/LlmAdvancedSettings.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 var FIELDS = [
   { id: "baseURL", label: "\u6A21\u578B\u670D\u52A1\u5730\u5740", placeholder: "http://\u5185\u7F51\u5730\u5740/v1" },
@@ -4768,8 +4892,8 @@ function writeOverride(settings, baseURL, override) {
 }
 function LlmAdvancedSettingsBar({ settings, defaults, override, onChange }) {
   const normalized = normalizeAdvanced(settings);
-  const [open, setOpen] = useState15(false);
-  const [draft, setDraft] = useState15(override);
+  const [open, setOpen] = useState16(false);
+  const [draft, setDraft] = useState16(override);
   if (!normalized) return null;
   const fields = FIELDS.filter((field) => normalized[field.id]);
   const dirty = Object.keys(override).length > 0;
@@ -4852,11 +4976,11 @@ function LlmChat({
   onOverrideChange,
   ...options
 }) {
-  const [override, setOverride] = useState16(() => readOverride(advanced, options.baseURL));
+  const [override, setOverride] = useState17(() => readOverride(advanced, options.baseURL));
   const effective = { ...options, ...override };
   const { messages, isStreaming, error, send, stop, reset } = useLlmChat(effective);
-  const [inputText, setInputText] = useState16("");
-  const [stopRequested, setStopRequested] = useState16(false);
+  const [inputText, setInputText] = useState17("");
+  const [stopRequested, setStopRequested] = useState17(false);
   const handle = useMemo9(
     () => ({
       insertText: (text) => setInputText((prev) => prev ? `${prev}
@@ -5013,7 +5137,7 @@ function ContextGroupCard({ contexts, className }) {
 }
 
 // src/components/SessionMemoryToggle.tsx
-import { useCallback as useCallback9, useEffect as useEffect14, useRef as useRef13, useState as useState17, 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) {
@@ -5071,7 +5195,7 @@ function SessionMemoryToggle({
     getSaving,
     getSaving
   );
-  const [draftEnabled, setDraftEnabled] = useState17(enabled);
+  const [draftEnabled, setDraftEnabled] = useState18(enabled);
   const activeSessionIdRef = useRef13(sessionId);
   activeSessionIdRef.current = sessionId;
   useEffect14(() => {