@blade-hq/agent-react 2610.0.0-beta.66 → 2610.0.0-beta.68

package/dist/index.js

@@ -16635,7 +16635,7 @@ import {
   queuePauseReasonLabel,
   queuedMessageStatusLabel
 } from "@blade-hq/agent-client";
-import { useRef as useRef12, useState as useState18 } from "react";
+import { useContext as useContext3, useLayoutEffect, useRef as useRef12, useState as useState18 } from "react";
 
 // src/lib/utils.ts
 function cn(...inputs) {
@@ -16666,8 +16666,17 @@ async function copyToClipboard(text) {
   }
 }
 
+// src/components/queue-panel-adjacency.ts
+import { createContext as createContext3 } from "react";
+var QueuePanelAdjacencyContext = createContext3(null);
+
 // src/components/SessionQueuePanel.tsx
 import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var QUEUE_INSET_CLASS = "mx-3";
+function isQueuePanelVisible(snapshot, notice, editing = false) {
+  return snapshot.items.length > 0 || snapshot.paused || Boolean(notice) || editing;
+}
+var DEFAULT_CONTENT_WIDTH_CLASS = "max-w-[748px]";
 var ICON_BUTTON = "flex h-6 w-6 items-center justify-center rounded-md text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent";
 var LABEL_BUTTON = "inline-flex h-6 items-center gap-1 rounded-md px-2 text-[11px] text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent";
 function SessionQueuePanel({
@@ -16681,7 +16690,11 @@ function SessionQueuePanel({
   onRequeue,
   onMove,
   onReorder,
-  onDeliver
+  onDeliver,
+  contentWidthClassName = DEFAULT_CONTENT_WIDTH_CLASS,
+  rootClassName,
+  onVisibleChange,
+  mergesWithInputBelow: mergesWithInputBelowProp
 }) {
   const [collapsed, setCollapsed] = useState18(false);
   const [editing, setEditing] = useState18(null);
@@ -16691,8 +16704,17 @@ function SessionQueuePanel({
   const dropRef = useRef12(null);
   const requeuePending = useRef12(false);
   const [requeueing, setRequeueing] = useState18(false);
+  const adjacency = useContext3(QueuePanelAdjacencyContext);
+  const mergesWithInputBelow = mergesWithInputBelowProp ?? adjacency ?? true;
   const items = snapshot.items;
-  if (items.length === 0 && !snapshot.paused && !notice && !editing) return null;
+  const visible = isQueuePanelVisible(snapshot, notice, Boolean(editing));
+  const onVisibleChangeRef = useRef12(onVisibleChange);
+  onVisibleChangeRef.current = onVisibleChange;
+  useLayoutEffect(() => {
+    onVisibleChangeRef.current?.(visible);
+    return () => onVisibleChangeRef.current?.(false);
+  }, [visible]);
+  if (!visible) return null;
   const pendingIds = items.filter(canEditQueuedMessage).map((item) => item.id);
   const collapsible = items.length > 3;
   const visibleItems = collapsible && collapsed ? items.slice(0, 1) : items;
@@ -16733,258 +16755,276 @@ function SessionQueuePanel({
     next.splice(edge === "after" ? target + 1 : target, 0, sourceId);
     onReorder(next);
   };
-  return /* @__PURE__ */ jsx7("section", { className: "blade-chat-queue shrink-0 px-4 pt-2", "aria-label": "\u5F85\u6267\u884C\u6D88\u606F", children: /* @__PURE__ */ jsxs5("div", { className: "mx-auto max-w-[748px]", children: [
-    snapshot.paused || collapsible ? /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 px-0.5 text-[11px] text-[hsl(var(--muted-foreground))]", children: [
-      /* @__PURE__ */ jsxs5("span", { className: "font-medium", children: [
-        "\u5F85\u6267\u884C \xB7 ",
-        items.length
-      ] }),
-      snapshot.paused && /* @__PURE__ */ jsxs5(Fragment4, { children: [
-        /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1 text-[hsl(var(--destructive))]", children: [
-          /* @__PURE__ */ jsx7(CirclePause, { size: 12 }),
-          pauseLabel
+  return (
+    // 外层左右留白必须跟输入框一致：两边各自 mx-auto 居中，padding 不同的话
+    // 即使 max-width 相同也会整体错开，看起来就是"没对齐"。
+    // 用变量而不是写死 px：SDK 输入框用 --blade-chat-gutter（默认 1rem，
+    // 容器查询下还会变），内置 Web 输入框外层是 px-5（20px）；调用方按
+    // .blade-chat-queue 覆盖 --blade-chat-queue-gutter 即可对齐，两边共用
+    // 同一套机制。
+    /* @__PURE__ */ jsx7("section", { className: cn("blade-chat-queue shrink-0 pt-2", rootClassName), "aria-label": "\u5F85\u6267\u884C\u6D88\u606F", children: /* @__PURE__ */ jsxs5("div", { className: cn("mx-auto", contentWidthClassName), children: [
+      snapshot.paused || collapsible ? /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 px-0.5 text-[11px] text-[hsl(var(--muted-foreground))]", children: [
+        /* @__PURE__ */ jsxs5("span", { className: "font-medium", children: [
+          "\u5F85\u6267\u884C \xB7 ",
+          items.length
         ] }),
-        /* @__PURE__ */ jsx7(
+        snapshot.paused && /* @__PURE__ */ jsxs5(Fragment4, { children: [
+          /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1 text-[hsl(var(--destructive))]", children: [
+            /* @__PURE__ */ jsx7(CirclePause, { size: 12 }),
+            pauseLabel
+          ] }),
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              onClick: onResume,
+              className: "h-6 rounded-md border border-[hsl(var(--border))] px-2 font-medium text-[hsl(var(--foreground))] transition-colors hover:bg-[hsl(var(--accent))]",
+              children: "\u7EE7\u7EED\u6267\u884C"
+            }
+          )
+        ] }),
+        collapsible && /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
-            onClick: onResume,
-            className: "h-6 rounded-md border border-[hsl(var(--border))] px-2 font-medium text-[hsl(var(--foreground))] transition-colors hover:bg-[hsl(var(--accent))]",
-            children: "\u7EE7\u7EED\u6267\u884C"
+            onClick: () => setCollapsed((value) => !value),
+            "aria-expanded": !collapsed,
+            className: "ml-auto inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))]",
+            children: [
+              collapsed ? "\u5C55\u5F00" : "\u6298\u53E0",
+              /* @__PURE__ */ jsx7(ChevronDown, { size: 12, className: cn(!collapsed && "rotate-180") })
+            ]
           }
         )
+      ] }) : null,
+      notice && /* @__PURE__ */ jsxs5("div", { className: "blade-chat-queue-notice mt-2 flex items-start gap-1.5 text-xs text-[hsl(var(--destructive))]", children: [
+        /* @__PURE__ */ jsx7(CircleAlert, { size: 13, className: "mt-0.5 shrink-0" }),
+        /* @__PURE__ */ jsx7("span", { className: "min-w-0 whitespace-pre-wrap break-words [overflow-wrap:anywhere]", children: notice })
       ] }),
-      collapsible && /* @__PURE__ */ jsxs5(
-        "button",
-        {
-          type: "button",
-          onClick: () => setCollapsed((value) => !value),
-          "aria-expanded": !collapsed,
-          className: "ml-auto inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))]",
-          children: [
-            collapsed ? "\u5C55\u5F00" : "\u6298\u53E0",
-            /* @__PURE__ */ jsx7(ChevronDown, { size: 12, className: cn(!collapsed && "rotate-180") })
-          ]
-        }
-      )
-    ] }) : null,
-    notice && /* @__PURE__ */ jsxs5("div", { className: "blade-chat-queue-notice mt-2 flex items-start gap-1.5 text-xs text-[hsl(var(--destructive))]", children: [
-      /* @__PURE__ */ jsx7(CircleAlert, { size: 13, className: "mt-0.5 shrink-0" }),
-      /* @__PURE__ */ jsx7("span", { className: "min-w-0 whitespace-pre-wrap break-words [overflow-wrap:anywhere]", children: notice })
-    ] }),
-    detachedEdit && /* @__PURE__ */ jsxs5("div", { className: "mt-2 flex flex-col gap-2 text-xs", children: [
-      /* @__PURE__ */ jsx7("span", { children: "\u539F\u6D88\u606F\u5DF2\u53D8\u5316\uFF0C\u4FEE\u6539\u5185\u5BB9\u5DF2\u4FDD\u7559" }),
-      /* @__PURE__ */ jsx7(
-        "textarea",
-        {
-          "aria-label": "\u4FDD\u7559\u7684\u4FEE\u6539\u5185\u5BB9",
-          value: detachedEdit.text,
-          onChange: (event) => setEditing((current) => current ? { ...current, text: event.target.value } : current),
-          rows: 2,
-          className: "w-full rounded border border-[hsl(var(--border))] bg-transparent p-2"
-        }
-      ),
-      /* @__PURE__ */ jsxs5("div", { className: "flex justify-end gap-2", children: [
-        /* @__PURE__ */ jsx7("button", { type: "button", className: "rounded border border-[hsl(var(--border))] px-2 py-1", disabled: requeueing, onClick: stopEdit, children: "\u653E\u5F03\u4FEE\u6539" }),
-        onRequeue && /* @__PURE__ */ jsx7("button", { type: "button", className: "rounded bg-[hsl(var(--primary))] px-2 py-1 text-[hsl(var(--primary-foreground))] disabled:opacity-40", disabled: requeueing || !detachedEdit.text.trim(), onClick: async () => {
-          if (requeuePending.current) return;
-          requeuePending.current = true;
-          setRequeueing(true);
-          const submitted = editing;
-          try {
-            if (await onRequeue(detachedEdit.text.trim())) {
-              setEditing((current) => current === submitted ? null : current);
-            }
-          } finally {
-            requeuePending.current = false;
-            setRequeueing(false);
+      detachedEdit && /* @__PURE__ */ jsxs5("div", { className: "mt-2 flex flex-col gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx7("span", { children: "\u539F\u6D88\u606F\u5DF2\u53D8\u5316\uFF0C\u4FEE\u6539\u5185\u5BB9\u5DF2\u4FDD\u7559" }),
+        /* @__PURE__ */ jsx7(
+          "textarea",
+          {
+            "aria-label": "\u4FDD\u7559\u7684\u4FEE\u6539\u5185\u5BB9",
+            value: detachedEdit.text,
+            onChange: (event) => setEditing((current) => current ? { ...current, text: event.target.value } : current),
+            rows: 2,
+            className: "w-full rounded border border-[hsl(var(--border))] bg-transparent p-2"
           }
-        }, children: "\u4F5C\u4E3A\u65B0\u6D88\u606F\u6392\u961F" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx7("ul", { className: "mx-3 flex max-h-56 flex-col overflow-y-auto rounded-t-[22px] border border-[hsl(var(--border))] bg-[hsl(var(--card))] px-1.5 py-1.5", children: visibleItems.map((item) => {
-      const position = items.indexOf(item) + 1;
-      const pending = canEditQueuedMessage(item);
-      const busy = pendingItemId === item.id;
-      const isEditing = activeEdit?.id === item.id;
-      const pendingIndex = pendingIds.indexOf(item.id);
-      const statusLabel = item.status === "pending" ? null : queuedMessageStatusLabel(item.status);
-      const deliverable = canDeliver && canDeliverQueuedMessage(item);
-      return /* @__PURE__ */ jsx7(
-        "li",
-        {
-          draggable: pending && !busy && !isEditing,
-          onDragStart: (event) => {
-            draggingRef.current = item.id;
-            setDraggingId(item.id);
-            const text = event.currentTarget.querySelector("[data-queue-text]");
-            if (text && event.dataTransfer) {
-              const rect = text.getBoundingClientRect();
-              event.dataTransfer.setDragImage(
-                text,
-                event.clientX - rect.left,
-                event.clientY - rect.top
-              );
+        ),
+        /* @__PURE__ */ jsxs5("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx7("button", { type: "button", className: "rounded border border-[hsl(var(--border))] px-2 py-1", disabled: requeueing, onClick: stopEdit, children: "\u653E\u5F03\u4FEE\u6539" }),
+          onRequeue && /* @__PURE__ */ jsx7("button", { type: "button", className: "rounded bg-[hsl(var(--primary))] px-2 py-1 text-[hsl(var(--primary-foreground))] disabled:opacity-40", disabled: requeueing || !detachedEdit.text.trim(), onClick: async () => {
+            if (requeuePending.current) return;
+            requeuePending.current = true;
+            setRequeueing(true);
+            const submitted = editing;
+            try {
+              if (await onRequeue(detachedEdit.text.trim())) {
+                setEditing((current) => current === submitted ? null : current);
+              }
+            } finally {
+              requeuePending.current = false;
+              setRequeueing(false);
             }
-          },
-          onDragEnd: () => {
-            draggingRef.current = null;
-            dropRef.current = null;
-            setDraggingId(null);
-            setDropAt(null);
-          },
-          onDragOver: (event) => {
-            if (!pending) return;
-            event.preventDefault();
-            if (!draggingRef.current || draggingRef.current === item.id) return;
-            const rect = event.currentTarget.getBoundingClientRect();
-            const edge = event.clientY > rect.top + rect.height / 2 ? "after" : "before";
-            dropRef.current = { id: item.id, edge };
-            setDropAt(
-              (current) => current?.id === item.id && current.edge === edge ? current : { id: item.id, edge }
-            );
-          },
-          onDragLeave: () => {
-            if (dropRef.current?.id === item.id) dropRef.current = null;
-            setDropAt((current) => current?.id === item.id ? null : current);
-          },
-          onDrop: (event) => {
-            event.preventDefault();
-            const landed = dropRef.current;
-            if (pending) handleDrop(item.id, landed?.id === item.id ? landed.edge : "before");
-          },
+          }, children: "\u4F5C\u4E3A\u65B0\u6D88\u606F\u6392\u961F" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx7(
+        "ul",
+        {
           className: cn(
-            "blade-chat-queue-item group relative flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[11px]",
-            pending && !isEditing && "cursor-grab active:cursor-grabbing",
-            busy && "opacity-60",
-            draggingId === item.id && "opacity-40"
+            QUEUE_INSET_CLASS,
+            "flex max-h-56 flex-col overflow-y-auto rounded-t-[22px] border border-[hsl(var(--border))] bg-[hsl(var(--card))] px-1.5 py-1.5",
+            !mergesWithInputBelow && "rounded-b-[22px]"
           ),
-          children: isEditing ? /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
-            /* @__PURE__ */ jsx7(
-              "textarea",
+          children: visibleItems.map((item) => {
+            const position = items.indexOf(item) + 1;
+            const pending = canEditQueuedMessage(item);
+            const busy = pendingItemId === item.id;
+            const isEditing = activeEdit?.id === item.id;
+            const pendingIndex = pendingIds.indexOf(item.id);
+            const statusLabel = item.status === "pending" ? null : queuedMessageStatusLabel(item.status);
+            const deliverable = canDeliver && canDeliverQueuedMessage(item);
+            return /* @__PURE__ */ jsx7(
+              "li",
               {
-                value: activeEdit?.text ?? "",
-                onChange: (event) => setEditing(
-                  (current) => current ? { ...current, text: event.target.value } : current
-                ),
-                rows: 2,
-                "aria-label": `\u7F16\u8F91\u7B2C ${position} \u6761\u6D88\u606F`,
-                className: "w-full resize-none rounded-md border border-[hsl(var(--border))] bg-transparent px-2 py-1.5 text-sm leading-5 text-[hsl(var(--foreground))] outline-none"
-              }
-            ),
-            /* @__PURE__ */ jsxs5("div", { className: "flex justify-end gap-1.5", children: [
-              /* @__PURE__ */ jsx7(
-                "button",
-                {
-                  type: "button",
-                  onClick: stopEdit,
-                  className: "h-7 rounded-md border border-[hsl(var(--border))] px-2 text-xs text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))]",
-                  children: "\u53D6\u6D88"
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => commitEdit(item),
-                  disabled: busy || !activeEdit?.text.trim(),
-                  className: "h-7 rounded-md bg-[hsl(var(--primary))] px-2 text-xs font-medium text-[hsl(var(--primary-foreground))] transition-opacity hover:opacity-90 disabled:opacity-40",
-                  children: "\u4FDD\u5B58"
-                }
-              )
-            ] })
-          ] }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
-            dropAt?.id === item.id ? /* @__PURE__ */ jsx7(
-              "span",
-              {
-                "aria-hidden": "true",
-                style: { background: "var(--resize-line-hover, hsl(var(--foreground) / 0.55))" },
-                className: cn(
-                  "pointer-events-none absolute inset-x-1 h-[2px] rounded-full",
-                  dropAt.edge === "before" ? "top-0" : "bottom-0"
-                )
-              }
-            ) : null,
-            /* @__PURE__ */ jsx7(
-              "button",
-              {
-                type: "button",
-                disabled: !pending || busy,
-                "aria-label": `\u8C03\u6574\u7B2C ${position} \u6761\u7684\u987A\u5E8F\uFF08\u62D6\u52A8\uFF0C\u6216\u6309 Alt+\u4E0A/\u4E0B\uFF09`,
-                title: "\u62D6\u52A8\u8C03\u6574\u987A\u5E8F\uFF08Alt+\u4E0A/\u4E0B \u4E5F\u884C\uFF09",
-                onKeyDown: (event) => {
-                  if (!event.altKey) return;
-                  if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+                draggable: pending && !busy && !isEditing,
+                onDragStart: (event) => {
+                  draggingRef.current = item.id;
+                  setDraggingId(item.id);
+                  const text = event.currentTarget.querySelector("[data-queue-text]");
+                  if (text && event.dataTransfer) {
+                    const rect = text.getBoundingClientRect();
+                    event.dataTransfer.setDragImage(
+                      text,
+                      event.clientX - rect.left,
+                      event.clientY - rect.top
+                    );
+                  }
+                },
+                onDragEnd: () => {
+                  draggingRef.current = null;
+                  dropRef.current = null;
+                  setDraggingId(null);
+                  setDropAt(null);
+                },
+                onDragOver: (event) => {
+                  if (!pending) return;
                   event.preventDefault();
-                  const delta = event.key === "ArrowUp" ? -1 : 1;
-                  if (pendingIndex < 0) return;
-                  if (delta < 0 && pendingIndex === 0) return;
-                  if (delta > 0 && pendingIndex === pendingIds.length - 1) return;
-                  onMove(item, delta);
+                  if (!draggingRef.current || draggingRef.current === item.id) return;
+                  const rect = event.currentTarget.getBoundingClientRect();
+                  const edge = event.clientY > rect.top + rect.height / 2 ? "after" : "before";
+                  dropRef.current = { id: item.id, edge };
+                  setDropAt(
+                    (current) => current?.id === item.id && current.edge === edge ? current : { id: item.id, edge }
+                  );
                 },
-                className: "-ml-0.5 flex h-5 w-4 shrink-0 cursor-grab items-center justify-center rounded text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))] active:cursor-grabbing disabled:cursor-default disabled:opacity-60 disabled:hover:bg-transparent",
-                children: /* @__PURE__ */ jsx7(Menu, { size: 14, "aria-hidden": "true" })
-              }
-            ),
-            /* @__PURE__ */ jsx7(
-              "span",
-              {
-                "data-queue-text": true,
-                className: "min-w-0 flex-1 truncate pt-px text-[hsl(var(--foreground))]",
-                children: item.content
-              }
-            ),
-            item.error ? /* @__PURE__ */ jsx7("span", { className: "shrink-0 pt-1 text-[11px] text-[hsl(var(--destructive))]", children: item.error }) : busy ? /* @__PURE__ */ jsxs5("span", { className: "mt-0.5 inline-flex shrink-0 items-center gap-1 text-[11px] text-[hsl(var(--muted-foreground))]", children: [
-              /* @__PURE__ */ jsx7(LoaderCircle, { size: 11, className: "animate-spin" }),
-              "\u5904\u7406\u4E2D"
-            ] }) : statusLabel ? /* @__PURE__ */ jsx7("span", { className: "shrink-0 pt-1 text-[11px] text-[hsl(var(--muted-foreground))]", children: statusLabel }) : null,
-            /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-has-[:focus-visible]:opacity-100", children: [
-              /* @__PURE__ */ jsxs5(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `\u7ACB\u523B\u53D1\u9001\u7B2C ${position} \u6761`,
-                  title: deliverable ? "\u7ACB\u523B\u53D1\u9001" : "\u5F53\u524D\u6CA1\u6709\u53EF\u63A5\u6536\u8865\u5145\u7684\u4EFB\u52A1",
-                  disabled: busy || !deliverable,
-                  onClick: () => onDeliver(item),
-                  className: LABEL_BUTTON,
-                  children: [
-                    /* @__PURE__ */ jsx7(Send, { size: 13, "aria-hidden": "true" }),
-                    "\u7ACB\u523B\u53D1\u9001"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `\u7F16\u8F91\u7B2C ${position} \u6761`,
-                  title: "\u7F16\u8F91",
-                  disabled: busy || !pending,
-                  onClick: () => startEdit(item),
-                  className: ICON_BUTTON,
-                  children: /* @__PURE__ */ jsx7(Pencil, { size: 13, "aria-hidden": "true" })
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `\u5220\u9664\u7B2C ${position} \u6761`,
-                  title: "\u5220\u9664",
-                  disabled: busy || !canCancelQueuedMessage(item),
-                  onClick: () => onCancel(item),
-                  className: ICON_BUTTON,
-                  children: /* @__PURE__ */ jsx7(Trash2, { size: 13, "aria-hidden": "true" })
-                }
-              )
-            ] })
-          ] })
-        },
-        item.id
-      );
-    }) })
-  ] }) });
+                onDragLeave: () => {
+                  if (dropRef.current?.id === item.id) dropRef.current = null;
+                  setDropAt((current) => current?.id === item.id ? null : current);
+                },
+                onDrop: (event) => {
+                  event.preventDefault();
+                  const landed = dropRef.current;
+                  if (pending) handleDrop(item.id, landed?.id === item.id ? landed.edge : "before");
+                },
+                className: cn(
+                  "blade-chat-queue-item group relative flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[11px]",
+                  pending && !isEditing && "cursor-grab active:cursor-grabbing",
+                  busy && "opacity-60",
+                  draggingId === item.id && "opacity-40"
+                ),
+                children: isEditing ? /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+                  /* @__PURE__ */ jsx7(
+                    "textarea",
+                    {
+                      value: activeEdit?.text ?? "",
+                      onChange: (event) => setEditing(
+                        (current) => current ? { ...current, text: event.target.value } : current
+                      ),
+                      rows: 2,
+                      "aria-label": `\u7F16\u8F91\u7B2C ${position} \u6761\u6D88\u606F`,
+                      className: "w-full resize-none rounded-md border border-[hsl(var(--border))] bg-transparent px-2 py-1.5 text-sm leading-5 text-[hsl(var(--foreground))] outline-none"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs5("div", { className: "flex justify-end gap-1.5", children: [
+                    /* @__PURE__ */ jsx7(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: stopEdit,
+                        className: "h-7 rounded-md border border-[hsl(var(--border))] px-2 text-xs text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))]",
+                        children: "\u53D6\u6D88"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => commitEdit(item),
+                        disabled: busy || !activeEdit?.text.trim(),
+                        className: "h-7 rounded-md bg-[hsl(var(--primary))] px-2 text-xs font-medium text-[hsl(var(--primary-foreground))] transition-opacity hover:opacity-90 disabled:opacity-40",
+                        children: "\u4FDD\u5B58"
+                      }
+                    )
+                  ] })
+                ] }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
+                  dropAt?.id === item.id ? /* @__PURE__ */ jsx7(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      style: { background: "var(--resize-line-hover, hsl(var(--foreground) / 0.55))" },
+                      className: cn(
+                        "pointer-events-none absolute inset-x-1 h-[2px] rounded-full",
+                        dropAt.edge === "before" ? "top-0" : "bottom-0"
+                      )
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: !pending || busy,
+                      "aria-label": `\u8C03\u6574\u7B2C ${position} \u6761\u7684\u987A\u5E8F\uFF08\u62D6\u52A8\uFF0C\u6216\u6309 Alt+\u4E0A/\u4E0B\uFF09`,
+                      title: "\u62D6\u52A8\u8C03\u6574\u987A\u5E8F\uFF08Alt+\u4E0A/\u4E0B \u4E5F\u884C\uFF09",
+                      onKeyDown: (event) => {
+                        if (!event.altKey) return;
+                        if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+                        event.preventDefault();
+                        const delta = event.key === "ArrowUp" ? -1 : 1;
+                        if (pendingIndex < 0) return;
+                        if (delta < 0 && pendingIndex === 0) return;
+                        if (delta > 0 && pendingIndex === pendingIds.length - 1) return;
+                        onMove(item, delta);
+                      },
+                      className: "-ml-0.5 flex h-5 w-4 shrink-0 cursor-grab items-center justify-center rounded text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))] active:cursor-grabbing disabled:cursor-default disabled:opacity-60 disabled:hover:bg-transparent",
+                      children: /* @__PURE__ */ jsx7(Menu, { size: 14, "aria-hidden": "true" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "span",
+                    {
+                      "data-queue-text": true,
+                      className: "min-w-0 flex-1 truncate pt-px text-[hsl(var(--foreground))]",
+                      children: item.content
+                    }
+                  ),
+                  item.error ? /* @__PURE__ */ jsx7("span", { className: "shrink-0 pt-1 text-[11px] text-[hsl(var(--destructive))]", children: item.error }) : busy ? /* @__PURE__ */ jsxs5("span", { className: "mt-0.5 inline-flex shrink-0 items-center gap-1 text-[11px] text-[hsl(var(--muted-foreground))]", children: [
+                    /* @__PURE__ */ jsx7(LoaderCircle, { size: 11, className: "animate-spin" }),
+                    "\u5904\u7406\u4E2D"
+                  ] }) : statusLabel ? /* @__PURE__ */ jsx7("span", { className: "shrink-0 pt-1 text-[11px] text-[hsl(var(--muted-foreground))]", children: statusLabel }) : null,
+                  /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-has-[:focus-visible]:opacity-100", children: [
+                    /* @__PURE__ */ jsxs5(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `\u7ACB\u523B\u53D1\u9001\u7B2C ${position} \u6761`,
+                        title: deliverable ? "\u7ACB\u523B\u53D1\u9001" : "\u5F53\u524D\u6CA1\u6709\u53EF\u63A5\u6536\u8865\u5145\u7684\u4EFB\u52A1",
+                        disabled: busy || !deliverable,
+                        onClick: () => onDeliver(item),
+                        className: LABEL_BUTTON,
+                        children: [
+                          /* @__PURE__ */ jsx7(Send, { size: 13, "aria-hidden": "true" }),
+                          "\u7ACB\u523B\u53D1\u9001"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `\u7F16\u8F91\u7B2C ${position} \u6761`,
+                        title: "\u7F16\u8F91",
+                        disabled: busy || !pending,
+                        onClick: () => startEdit(item),
+                        className: ICON_BUTTON,
+                        children: /* @__PURE__ */ jsx7(Pencil, { size: 13, "aria-hidden": "true" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `\u5220\u9664\u7B2C ${position} \u6761`,
+                        title: "\u5220\u9664",
+                        disabled: busy || !canCancelQueuedMessage(item),
+                        onClick: () => onCancel(item),
+                        className: ICON_BUTTON,
+                        children: /* @__PURE__ */ jsx7(Trash2, { size: 13, "aria-hidden": "true" })
+                      }
+                    )
+                  ] })
+                ] })
+              },
+              item.id
+            );
+          })
+        }
+      )
+    ] }) })
+  );
 }
 
 // src/components/ReplayBar.tsx
@@ -42307,9 +42347,9 @@ function SF(G, Q2) {
 }
 
 // src/components/McpAppCard.tsx
-import { createContext as createContext3, useContext as useContext3, useEffect as useEffect14, useLayoutEffect, useRef as useRef14, useState as useState20 } from "react";
+import { createContext as createContext4, useContext as useContext4, useEffect as useEffect14, useLayoutEffect as useLayoutEffect2, useRef as useRef14, useState as useState20 } from "react";
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var McpAppMessageContext = createContext3(null);
+var McpAppMessageContext = createContext4(null);
 function securedHtml(archive) {
   const ui = archive.resourceMeta.ui;
   const csp = ui?.csp ?? {};
@@ -42346,7 +42386,7 @@ function securedHtml(archive) {
 }
 function McpAppCard({ sessionId, sourceId, client: suppliedClient, onMessage: suppliedOnMessage }) {
   const contextClient = useOptionalBladeClient();
-  const contextMessage = useContext3(McpAppMessageContext);
+  const contextMessage = useContext4(McpAppMessageContext);
   const client = suppliedClient ?? contextClient;
   const onMessage = suppliedOnMessage ?? contextMessage;
   const onMessageRef = useRef14(onMessage);
@@ -42360,7 +42400,7 @@ function McpAppCard({ sessionId, sourceId, client: suppliedClient, onMessage: su
   const [ready, setReady] = useState20(false);
   const [expanded, setExpanded] = useState20(false);
   const [height, setHeight] = useState20(360);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const dialog = panel.current;
     if (!dialog) return;
     dialog.close();
@@ -42581,6 +42621,7 @@ function ChatInput({
   isStreaming,
   isStopping = false,
   queueWhileRunning = false,
+  mergesWithPanelAbove = false,
   placeholder = "\u8F93\u5165\u6D88\u606F\u2026",
   className,
   queueKey,
@@ -42618,40 +42659,53 @@ function ChatInput({
       void handleSend();
     }
   };
-  return /* @__PURE__ */ jsx12("div", { className: cn("blade-chat-input border-t border-[hsl(var(--border))] py-3", className), children: /* @__PURE__ */ jsxs10("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__ */ jsx12(
-      "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__ */ jsxs10(Fragment5, { children: [
-      queueWhileRunning ? /* @__PURE__ */ jsx12("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__ */ jsx12(ArrowUp, { size: 15 }) }) : null,
-      /* @__PURE__ */ jsx12("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__ */ jsx12(LoaderCircle, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ jsx12(Square, { size: 12, fill: "currentColor" }) })
-    ] }) : /* @__PURE__ */ jsx12(
-      "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__ */ jsx12(ArrowUp, { size: 15 })
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      style: mergesWithPanelAbove ? { "--blade-chat-input-top-border": "0" } : void 0,
+      className: cn(
+        "blade-chat-input border-t border-[hsl(var(--border))] py-3",
+        // 上留白没有这个问题：它是 Tailwind 的 `py-3`，与 `pt-0` 同在 utilities 层，
+        // 按源码顺序后者胜。
+        mergesWithPanelAbove && "pt-0",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs10("div", { className: `blade-chat-input-inner mx-auto flex max-w-[748px] items-end gap-2 border border-[hsl(var(--border))] bg-[hsl(var(--card))] px-3 py-2 ${mergesWithPanelAbove ? "rounded-b-[22px]" : "rounded-2xl"}`, children: [
+        /* @__PURE__ */ jsx12(
+          "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__ */ jsxs10(Fragment5, { children: [
+          queueWhileRunning ? /* @__PURE__ */ jsx12("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__ */ jsx12(ArrowUp, { size: 15 }) }) : null,
+          /* @__PURE__ */ jsx12("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__ */ jsx12(LoaderCircle, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ jsx12(Square, { size: 12, fill: "currentColor" }) })
+        ] }) : /* @__PURE__ */ jsx12(
+          "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__ */ jsx12(ArrowUp, { size: 15 })
+          }
+        )
+      ] })
+    }
+  );
 }
 
 // src/components/ConnectionBanner.tsx
@@ -43078,9 +43132,9 @@ 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 createContext4, useContext as useContext4, useEffect as useEffect16, useImperativeHandle, useLayoutEffect as useLayoutEffect2, useMemo as useMemo13, useRef as useRef18 } from "react";
-var StickToBottomContext = createContext4(null);
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect2 : useEffect16;
+import { createContext as createContext5, useContext as useContext5, useEffect as useEffect16, useImperativeHandle, useLayoutEffect as useLayoutEffect3, useMemo as useMemo13, useRef as useRef18 } from "react";
+var StickToBottomContext = createContext5(null);
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect3 : useEffect16;
 function StickToBottom({ instance, children, resize, initial, mass, damping, stiffness, targetScrollTop: currentTargetScrollTop, contextRef, ...props }) {
   const customTargetScrollTop = useRef18(null);
   const targetScrollTop = React.useCallback((target, elements) => {
@@ -43150,7 +43204,7 @@ function StickToBottom({ instance, children, resize, initial, mass, damping, sti
   StickToBottom2.Content = Content;
 })(StickToBottom || (StickToBottom = {}));
 function useStickToBottomContext() {
-  const context = useContext4(StickToBottomContext);
+  const context = useContext5(StickToBottomContext);
   if (!context) {
     throw new Error("use-stick-to-bottom component context must be used within a StickToBottom component");
   }
@@ -45534,6 +45588,7 @@ function ChatSurface({
   onFollowupInteraction,
   beforeInput,
   queuePanel,
+  queuePanelVisible,
   showPlanUpdates = false,
   planRevealRevision = 0,
   historyPaging,
@@ -45608,7 +45663,7 @@ ${item.content}`), text].filter(Boolean).join("\n\n");
           }
         ) : null,
         beforeInput,
-        queuePanel,
+        /* @__PURE__ */ jsx26(QueuePanelAdjacencyContext.Provider, { value: currentPending.length === 0, children: queuePanel }),
         currentPending.map((item) => /* @__PURE__ */ jsxs22("div", { style: { display: "flex", gap: 8, padding: "8px 16px" }, children: [
           /* @__PURE__ */ jsxs22("details", { style: { flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ jsx26("summary", { children: item.label }),
@@ -45627,6 +45682,7 @@ ${item.content}`), text].filter(Boolean).join("\n\n");
             isStreaming,
             isStopping,
             queueWhileRunning: queuePanel != null,
+            mergesWithPanelAbove: (queuePanelVisible ?? queuePanel != null) && currentPending.length === 0,
             placeholder,
             queueKey: sessionId,
             className: classNames?.chatInput
@@ -45742,6 +45798,7 @@ function ChatSessionView({
   const [inputText, setInputText] = useState32("");
   const [queueNotice, setQueueNotice] = useState32(null);
   const [queuePendingItemId, setQueuePendingItemId] = useState32(null);
+  const [queuePanelVisible, setQueuePanelVisible] = useState32(false);
   const [resultFeedback, setResultFeedback] = useState32([]);
   const resolvedSessionId = session?.sessionId;
   const isViewer = state?.viewerRole === "viewer";
@@ -45933,11 +45990,13 @@ ${content}`);
             onDeliver: (item) => void runQueueCommand(
               item.id,
               (target) => target.deliverQueuedMessage(item.id, item.version)
-            )
+            ),
+            onVisibleChange: setQueuePanelVisible
           },
           resolvedSessionId
         ) : void 0
       ),
+      queuePanelVisible,
       historyPaging: session && state ? {
         hasOlder: session.hasOlderHistory,
         loading: state.loadingOlder,
@@ -46694,6 +46753,7 @@ export {
   isAgentComputerCommand,
   isAgentComputerToolCall,
   isPlanUpdateTool,
+  isQueuePanelVisible,
   mergeConnectorItems,
   normalizeAdjacentUrlFormatting,
   parsePlanUpdate,