feat(webui): preview dragged session mentions

webui/src/components/ChatList.tsx

@@ -40,7 +40,7 @@ import {
   visibleSessionsForGroup,
   type ChatGroupLabels,
 } from "@/lib/chat-groups";
-import { writeDraggedSession } from "@/lib/session-drag";
+import { clearDraggedSession, writeDraggedSession } from "@/lib/session-drag";
 import { cn } from "@/lib/utils";
 import type { ChatSummary, SidebarDensity, SidebarSortMode } from "@/lib/types";
 
@@ -357,6 +357,7 @@ export const ChatList = memo(function ChatList({
                               writeDraggedSession(event.dataTransfer, s.key);
                             }}
                             onDragEnd={() => {
+                              clearDraggedSession();
                               setDraggedSessionKey(null);
                               setSessionDropTarget(null);
                             }}

webui/src/components/thread/ThreadComposer.tsx

@@ -106,6 +106,7 @@ import {
   slashCommandLifecycle,
 } from "@/lib/slash-command";
 import {
+  clearDraggedSession,
   hasDraggedSession,
   readDraggedSession,
 } from "@/lib/session-drag";
@@ -321,6 +322,35 @@ type MentionCandidate = {
     }
 );
 
+interface MentionInsertion {
+  value: string;
+  cursor: number;
+  tokenStart: number;
+  tokenEnd: number;
+}
+
+function mentionInsertion(
+  value: string,
+  name: string,
+  start: number,
+  end: number,
+): MentionInsertion {
+  const from = Math.min(Math.max(start, 0), value.length);
+  const to = Math.min(Math.max(end, from), value.length);
+  const prefix = value.slice(0, from);
+  const suffix = value.slice(to);
+  const leadingSpace = prefix && !/\s$/.test(prefix) ? " " : "";
+  const trailingSpace = /^\s/.test(suffix) ? "" : " ";
+  const tokenStart = prefix.length + leadingSpace.length;
+  const tokenEnd = tokenStart + name.length + 1;
+  return {
+    value: `${prefix}${leadingSpace}@${name}${trailingSpace}${suffix}`,
+    cursor: tokenEnd + trailingSpace.length,
+    tokenStart,
+    tokenEnd,
+  };
+}
+
 function sessionMentionBase(session: ChatSummary): string {
   const label = session.title?.trim() || session.preview.trim() || "session";
   const slug = label
@@ -940,6 +970,11 @@ export function ThreadComposer({
   const { t } = useTranslation();
   const [value, setValue] = useState("");
   const [selectedSessionMentions, setSelectedSessionMentions] = useState<SessionMention[]>([]);
+  const [sessionDragPreview, setSessionDragPreview] = useState<{
+    mention: SessionMention;
+    start: number;
+    end: number;
+  } | null>(null);
   const [inlineError, setInlineError] = useState<string | null>(null);
   const [voiceErrorFading, setVoiceErrorFading] = useState(false);
   const [slashMenuDismissed, setSlashMenuDismissed] = useState(false);
@@ -1267,6 +1302,22 @@ export function ThreadComposer({
     () => splitCapabilityMentionSegments(value, cliApps, mcpPresets, selectedSessionMentions),
     [cliApps, mcpPresets, selectedSessionMentions, value],
   );
+  const sessionDragInsertion = sessionDragPreview
+    ? mentionInsertion(
+        value,
+        sessionDragPreview.mention.name,
+        sessionDragPreview.start,
+        sessionDragPreview.end,
+      )
+    : null;
+  const displayMentionSegments = sessionDragInsertion && sessionDragPreview
+    ? splitCapabilityMentionSegments(
+        sessionDragInsertion.value,
+        cliApps,
+        mcpPresets,
+        [...selectedSessionMentions, sessionDragPreview.mention],
+      )
+    : mentionSegments;
   const activeSessionMentions = useMemo(() => {
     const seen = new Set<string>();
     return mentionSegments.flatMap((segment) => {
@@ -1355,7 +1406,7 @@ export function ThreadComposer({
 
   const showCliAppMenu = filteredMentionCandidates.length > 0;
   const showAnyPalette = showSlashMenu || showCliAppMenu;
-  const hasMentionDecorations = mentionSegments.some(
+  const hasMentionDecorations = displayMentionSegments.some(
     (segment) => segment.kind !== "text",
   );
   const activeCliMentionApps = useMemo(() => {
@@ -1626,15 +1677,9 @@ export function ThreadComposer({
           candidate.mention,
         ]);
       }
-      const prefix = value.slice(0, start);
+      const insertion = mentionInsertion(value, candidate.name, start, end);
-      const suffix = value.slice(end);
+      setValue(insertion.value);
-      const leadingSpace = prefix && !/\s$/.test(prefix) ? " " : "";
+      setCursorPosition(insertion.cursor);
-      const trailingSpace = /^\s/.test(suffix) ? "" : " ";
-      const mention = `${leadingSpace}@${candidate.name}${trailingSpace}`;
-      const next = `${prefix}${mention}${suffix}`;
-      const nextCursor = prefix.length + mention.length;
-      setValue(next);
-      setCursorPosition(nextCursor);
       setCliAppMenuDismissed(true);
       setSlashMenuDismissed(false);
       setInlineError(null);
@@ -1643,7 +1688,7 @@ export function ThreadComposer({
         const el = textareaRef.current;
         if (!el) return;
         el.focus();
-        el.setSelectionRange(nextCursor, nextCursor);
+        el.setSelectionRange(insertion.cursor, insertion.cursor);
       });
     },
     [activeSessionMentions, resizeTextarea, value],
@@ -1660,13 +1705,16 @@ export function ThreadComposer({
   const handleSessionDrop = useCallback((event: React.DragEvent) => {
     if (!hasDraggedSession(event.dataTransfer)) return false;
     event.preventDefault();
+    clearDraggedSession();
+    const preview = sessionDragPreview;
+    setSessionDragPreview(null);
     if (disabled) return true;
     const sessionKey = readDraggedSession(event.dataTransfer);
     const mention = availableSessionMentions.find(
-      (candidate) => candidate.session_key === sessionKey,
+      (candidate) => candidate.session_key === (sessionKey ?? preview?.mention.session_key),
     );
     if (!mention) return true;
-    const caret = textareaRef.current?.selectionStart ?? value.length;
+    const caret = preview?.start ?? textareaRef.current?.selectionStart ?? value.length;
     insertMentionCandidate(
       {
         kind: "session",
@@ -1675,10 +1723,51 @@ export function ThreadComposer({
         mention,
       },
       caret,
-      textareaRef.current?.selectionEnd ?? caret,
+      preview?.end ?? textareaRef.current?.selectionEnd ?? caret,
     );
     return true;
-  }, [availableSessionMentions, disabled, insertMentionCandidate, value.length]);
+  }, [availableSessionMentions, disabled, insertMentionCandidate, sessionDragPreview, value.length]);
+
+  const previewSessionDrop = useCallback((event: React.DragEvent) => {
+    if (!hasDraggedSession(event.dataTransfer)) return false;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+    if (disabled) {
+      setSessionDragPreview(null);
+      return true;
+    }
+    const sessionKey = readDraggedSession(event.dataTransfer);
+    const mention = availableSessionMentions.find(
+      (candidate) => candidate.session_key === sessionKey,
+    );
+    const alreadySelected = mention && activeSessionMentions.some(
+      (candidate) => candidate.session_key === mention.session_key,
+    );
+    if (!mention || (!alreadySelected && activeSessionMentions.length >= SESSION_MENTIONS_LIMIT)) {
+      setSessionDragPreview(null);
+      return true;
+    }
+    const start = textareaRef.current?.selectionStart ?? value.length;
+    const end = textareaRef.current?.selectionEnd ?? start;
+    setSessionDragPreview((current) => (
+      current?.mention.session_key === mention.session_key
+      && current.start === start
+      && current.end === end
+        ? current
+        : { mention, start, end }
+    ));
+    return true;
+  }, [activeSessionMentions, availableSessionMentions, disabled, value.length]);
+
+  useEffect(() => {
+    if (!sessionDragPreview) return;
+    const clearPreview = () => {
+      clearDraggedSession();
+      setSessionDragPreview(null);
+    };
+    document.addEventListener("dragend", clearPreview);
+    return () => document.removeEventListener("dragend", clearPreview);
+  }, [sessionDragPreview]);
 
   const clearComposerText = useCallback((restoreFocus = true) => {
     setValue("");
@@ -2108,16 +2197,22 @@ export function ThreadComposer({
         e.preventDefault();
         submit();
       }}
-      onDragEnter={onDragEnter}
+      onDragEnter={(event) => {
+        if (!previewSessionDrop(event)) onDragEnter(event);
+      }}
       onDragOver={(event) => {
-        if (hasDraggedSession(event.dataTransfer)) {
+        if (!previewSessionDrop(event)) onDragOver(event);
-          event.preventDefault();
+      }}
-          event.dataTransfer.dropEffect = "copy";
+      onDragLeave={(event) => {
-        } else {
+        if (!hasDraggedSession(event.dataTransfer)) {
-          onDragOver(event);
+          onDragLeave(event);
+          return;
+        }
+        const nextTarget = event.relatedTarget;
+        if (!(nextTarget instanceof Node) || !event.currentTarget.contains(nextTarget)) {
+          setSessionDragPreview(null);
         }
       }}
-      onDragLeave={onDragLeave}
       onDrop={(event) => {
         if (!handleSessionDrop(event)) onDrop(event);
       }}
@@ -2150,6 +2245,7 @@ export function ThreadComposer({
             ? "max-w-[58rem] rounded-[28px] bg-muted/30 focus-within:bg-muted/50 dark:bg-card dark:focus-within:bg-white/[0.06]"
             : "max-w-[49.5rem] rounded-[22px] bg-muted/30 focus-within:bg-muted/50 dark:bg-card dark:focus-within:bg-white/[0.06]",
           disabled && "opacity-60",
+          sessionDragPreview && "ring-1 ring-primary/25",
           isDragging && "ring-2 ring-primary/40 motion-reduce:ring-0 motion-reduce:border-primary",
           goalState?.active &&
             "goal-shell-glow ring-1 ring-sky-400/35 motion-reduce:ring-sky-400/25 dark:ring-sky-400/45",
@@ -2234,9 +2330,12 @@ export function ThreadComposer({
         <div className="relative">
           {hasMentionDecorations ? (
             <ComposerCliMentionOverlay
-              segments={mentionSegments}
+              segments={displayMentionSegments}
               isHero={isHero}
               className={inputTextClasses}
+              ghostRange={sessionDragInsertion
+                ? { start: sessionDragInsertion.tokenStart, end: sessionDragInsertion.tokenEnd }
+                : null}
             />
           ) : null}
           <textarea
@@ -2259,7 +2358,7 @@ export function ThreadComposer({
             onClick={(e) => setCursorPosition(e.currentTarget.selectionStart ?? e.currentTarget.value.length)}
             onPaste={onPaste}
             rows={1}
-            placeholder={resolvedPlaceholder}
+            placeholder={sessionDragPreview ? "" : resolvedPlaceholder}
             disabled={disabled}
             aria-label={t("thread.composer.inputAria")}
             className={cn(
@@ -2646,11 +2745,14 @@ function ComposerCliMentionOverlay({
   segments,
   isHero,
   className,
+  ghostRange,
 }: {
   segments: CapabilityMentionSegment[];
   isHero: boolean;
   className: string;
+  ghostRange?: { start: number; end: number } | null;
 }) {
+  let offset = 0;
   return (
     <div
       aria-hidden
@@ -2660,16 +2762,24 @@ function ComposerCliMentionOverlay({
       )}
     >
       {segments.map((segment, index) => {
+        const start = offset;
+        offset += segment.text.length;
         if (segment.kind === "text") {
           return <span key={`text-${index}`}>{segment.text}</span>;
         }
+        const isGhost = ghostRange?.start === start && ghostRange.end === offset;
         return (
-          <CapabilityMentionToken
+          <span
             key={`${segment.kind}-${index}`}
-            segment={segment}
+            data-testid={isGhost ? "composer-session-drag-preview" : undefined}
-            variant="composer"
+            className={cn(isGhost && "opacity-45 transition-opacity duration-100")}
-            isHero={isHero}
+          >
-          />
+            <CapabilityMentionToken
+              segment={segment}
+              variant="composer"
+              isHero={isHero}
+            />
+          </span>
         );
       })}
     </div>

webui/src/lib/session-drag.ts

@@ -1,18 +1,25 @@
 export const SESSION_DRAG_TYPE = "application/x-nanobot-session-key";
 
+let activeSessionKey: string | null = null;
+
 export function hasDraggedSession(dataTransfer: DataTransfer): boolean {
   return Array.from(dataTransfer.types).includes(SESSION_DRAG_TYPE);
 }
 
 export function readDraggedSession(dataTransfer: DataTransfer): string | null {
   const sessionKey = dataTransfer.getData(SESSION_DRAG_TYPE).trim();
-  return sessionKey || null;
+  return sessionKey || activeSessionKey;
+}
+
+export function clearDraggedSession(): void {
+  activeSessionKey = null;
 }
 
 export function writeDraggedSession(
   dataTransfer: DataTransfer,
   sessionKey: string,
 ): void {
+  activeSessionKey = sessionKey;
   dataTransfer.effectAllowed = "copyMove";
   dataTransfer.setData(SESSION_DRAG_TYPE, sessionKey);
 }

webui/src/tests/chat-list.test.tsx

@@ -79,6 +79,7 @@ describe("ChatList", () => {
       SESSION_DRAG_TYPE,
       "websocket:reference",
     );
+    fireEvent.dragEnd(reference, { dataTransfer });
   });
 
   it("reorders chats around a Codex-style insertion line", () => {

webui/src/tests/thread-composer.test.tsx

@@ -1619,9 +1619,21 @@ describe("ThreadComposer", () => {
 
     fireEvent.dragEnter(input, { dataTransfer });
     fireEvent.dragOver(input, { dataTransfer });
+
+    expect(input).toHaveValue("Compare notes");
+    expect(screen.getByTestId("composer-session-drag-preview"))
+      .toHaveTextContent("@收费设计");
+
+    fireEvent.dragEnd(document);
+    expect(screen.queryByTestId("composer-session-drag-preview")).not.toBeInTheDocument();
+
+    fireEvent.dragEnter(input, { dataTransfer });
+    fireEvent.dragOver(input, { dataTransfer });
+
     fireEvent.drop(input, { dataTransfer });
 
     expect(input).toHaveValue("Compare @收费设计 notes");
+    expect(screen.queryByTestId("composer-session-drag-preview")).not.toBeInTheDocument();
     expect(screen.getByTestId("composer-session-mention-收费设计"))
       .toHaveTextContent("@收费设计");