From 7bf2b73a522af75acd737e742a4bcc52f2a297d0 Mon Sep 17 00:00:00 2001
From: daniel wang <danielwang@supermicro.com>
Date: Wed, 9 Sep 2026 09:20:39 +0000
Subject: [PATCH] fix chat bubble and @

---
 apps/web/src/App.tsx            | 103 ++++++++++++++++++++++++++-----
 apps/web/src/animated-icons.tsx |   3 +
 apps/web/src/chat.css           |  38 +++++++++---
 apps/web/src/locales/en.ts      |   5 ++
 apps/web/src/locales/zh-TW.ts   |   2 +
 apps/web/src/markdown.tsx       |  86 ++++++++++++++++++++++++--
 apps/web/src/mentions.ts        | 104 ++++++++++++++++++++++++++++++++
 apps/web/src/refinements.css    |  11 +---
 apps/web/src/responsive.css     |   2 +-
 crates/api/src/attachments.rs   |  46 +++++++++++---
 tests/frontend.test.mjs         |  57 ++++++++++++++++-
 11 files changed, 409 insertions(+), 48 deletions(-)

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index bdba7f1..d39e3ad 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,9 +1,8 @@
-import { FormEvent, Fragment, KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { BotIcon, Brain, ChevronDown, ChevronsRight, CircleHelp, ClipboardPaste, Computer, Download, Ellipsis, Info, LogOut, Megaphone, Paperclip, Pencil, Pin, Plug, Plus, RefreshCw, Settings, Smartphone, Sparkle, Square, Upload, Users, X } from "./animated-icons";
+import { FormEvent, Fragment, KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { BotIcon, Brain, ChevronDown, ChevronsRight, CircleHelp, ClipboardPaste, Computer, Download, Ellipsis, Info, LogOut, Megaphone, Paperclip, Pencil, Pin, Plug, Plus, RefreshCw, Reply, Settings, Smartphone, Sparkle, Square, Upload, Users, X } from "./animated-icons";
 import UseAnimations from "./use-animations";
 import loading from "react-useanimations/lib/loading";
 import arrowUp from "react-useanimations/lib/arrowUp";
-import bookmark from "react-useanimations/lib/bookmark";
 import copy from "react-useanimations/lib/copy";
 import folder from "react-useanimations/lib/folder";
 import mail from "react-useanimations/lib/mail";
@@ -17,13 +16,13 @@ import searchToX from "react-useanimations/lib/searchToX";
 import { api, ApiError } from "./api";
 import { createCoalescer, subscribeToSession } from "./live";
 import { applyReplyEvent, type ReplyDrafts } from "./reply-stream";
-import { acceptMention, mentionChoices, mentionToken } from "./mentions";
+import { acceptMention, ensureMention, mentionChoices, mentionToken, replySnippet } from "./mentions";
 import { clockTime, dayLabel, sameDay } from "./chat-time";
 import { HANDOFF_MS, VEIL_FADE_MS, handoffRemaining, keepScreenUrl, nextVeil, viewOnlyFor, viewerPath, type Veil } from "./handoff";
 import { Avatar, AvatarLookProvider, AvatarStack, BLOBATAR_BACKGROUNDS, BLOBATAR_EXPRESSIONS, BLOBATAR_SHAPES, DEFAULT_LOOK, persistBlobatarShape, readAvatarLooks, resolveBlobatarShape, writeAvatarLook, type AvatarBackground, type AvatarExpression, type AvatarLook } from "./avatar";
 import { dateLocale, getLocale, listJoin, setLocale, t, useLocale, type MessageKey } from "./i18n";
 import type { AvatarShape, Bot, ComputerMode, ComputerStatus, FileSkill, McpCatalogEntry, McpServer, McpTransport, MemoryItem, MemoryStatus, Message, MessageFile, ModelProviderId, Playbook, PlaybookInput, PlaybookStep, Room, RoomMember, Session, TaughtSkill, VoiceSettings, WorkspaceSettings } from "./types";
-import { ChatMarkdown, CopyMessageButton } from "./markdown";
+import { ChatMarkdown, MentionText, copyText } from "./markdown";
 import { RunProbe, errorActions, errorTitle } from "./run-monitor";
 import { ScheduleEditor, ScheduleList, cronFromPreset, defaultCronPreset, presetFromCron, scheduleWhen, type CronPreset, type ScheduleItem } from "./schedule";
 import { CallOverlay, PhoneIcon } from "./call";
@@ -125,6 +124,7 @@ function fileExt(name:string){const dot=name.lastIndexOf(".");const ext=dot>=0?n
 function messageFiles(blocks:unknown):MessageFile[]{if(!Array.isArray(blocks))return [];return blocks.flatMap(block=>{if(!block||typeof block!=="object")return [];const value=block as {kind?:string;name?:string;mimeType?:string;size?:number};if(value.kind!=="file"&&value.kind!=="image")return [];return [{kind:value.kind,name:value.name||"file",mimeType:value.mimeType,size:value.size}]})}
 type MessageChip={kind:string;site?:string;why?:string;name?:string;human?:string;cron?:string;reason?:string;turns?:number;limit?:number;code?:string;retryable?:boolean;runId?:string;turn?:number;step?:string|null};
 function chipBlocks(blocks:unknown){if(!Array.isArray(blocks))return [] as MessageChip[];return blocks.flatMap(block=>{if(!block||typeof block!=="object")return [];const value=block as MessageChip;if(value.kind==="login"||value.kind==="schedule"||value.kind==="scheduleRun"||value.kind==="resume"||value.kind==="error")return [value];return []})}
+function replyQuote(blocks:unknown){if(!Array.isArray(blocks))return null;for(const block of blocks){if(!block||typeof block!=="object")continue;const value=block as {kind?:string;name?:string;body?:string};if(value.kind==="reply")return {name:value.name||"",body:value.body||""}}return null}
 function resumeTitle(reason?:string){return reason==="budget_exhausted"?t("resumeBudget"):reason==="loop_detected"?t("resumeLoop"):t("resumeMidTask")}
 function isAutoAttachCaption(body:string,files:MessageFile[]){const text=body.trim();if(!files.length)return false;if(!text)return true;return files.some(file=>text===file.name||text===`附件 ${file.name}`||text===`Attached ${file.name}`||text===t("attachedFile",{name:file.name}))}
 function isAutoScheduleCaption(body:string,chips:{kind?:string}[]){if(!chips.some(chip=>chip.kind==="schedule"||chip.kind==="scheduleRun"))return false;const text=body.trim();return /^\[排程(試跑)?\]/.test(text)||/^\[Schedule( test)?\]/i.test(text)}
@@ -165,6 +165,10 @@ export function App(){
   const workspaceStart=readWorkspace();
   const [showHidden,setShowHidden]=useState(workspaceStart.showHidden);const[context,setContext]=useState<{bot:Bot;x:number;y:number}|null>(null);
   const [roomContext,setRoomContext]=useState<{room:Room;x:number;y:number}|null>(null);
+  const [messageMenu,setMessageMenu]=useState<{message:Message;x:number;y:number}|null>(null);
+  const [replyTarget,setReplyTarget]=useState<Message|null>(null);
+  const longPressRef=useRef<{timer:number;x:number;y:number;id:string}|null>(null);
+  const menuOpenedAtRef=useRef(0);
   const [roomToDelete,setRoomToDelete]=useState<Room|null>(null); const [mcpServers,setMcpServers]=useState<McpServer[]>([]);
   const [accountOpen,setAccountOpen]=useState(false); const [accountDialog,setAccountDialog]=useState<AccountDialog>(null);
   const [voiceSettings,setVoiceSettings]=useState<VoiceSettings|null>(null); const [callOpen,setCallOpen]=useState(false);
@@ -284,7 +288,7 @@ export function App(){
   useEffect(()=>{if(authRequired)return;api<FileSkill[]>("/api/file-skills").then(setFileSkills).catch(()=>setFileSkills([]))},[authRequired]);
   useEffect(()=>{if(activeId||activeRoomId||bots.length===0)return;setActiveId(bots[0].id)},[bots,activeId,activeRoomId]);
   useEffect(()=>{setMessages([]);loadSessions().catch(e=>setError(localizeError(e.message)))},[loadSessions]);
-  useEffect(()=>{historyIndexRef.current=null;historyDraftRef.current="";setPendingFiles(current=>{current.forEach(file=>file.preview&&URL.revokeObjectURL(file.preview));return []})},[activeSessionId]);
+  useEffect(()=>{historyIndexRef.current=null;historyDraftRef.current="";setReplyTarget(null);setMessageMenu(null);setPendingFiles(current=>{current.forEach(file=>file.preview&&URL.revokeObjectURL(file.preview));return []})},[activeSessionId]);
   useEffect(()=>{if(!plusOpen)setSkillQuery("")},[plusOpen]);
   useEffect(()=>{const panel=messageEndRef.current?.parentElement;if(panel&&panel.scrollHeight-panel.scrollTop-panel.clientHeight<180)panel.scrollTop=panel.scrollHeight},[replyDrafts]);
   useEffect(()=>{messageEndRef.current?.scrollIntoView({block:"end",behavior:"smooth"})},[activeSessionId,lastMessageId,workingMembers.length,pausedForUser]);
@@ -318,8 +322,8 @@ export function App(){
     if(!activeRoom||botId===roomHostId)return;
     try{await api<Room>(`/api/rooms/${activeRoom.id}`,{method:"PATCH",body:JSON.stringify({hostBotId:botId})});await loadBots()}catch(error){setError(localizeError(error instanceof Error?error.message:t("operationFailed")))}
   }
-  useEffect(()=>{const close=(event:MouseEvent)=>{const target=event.target;if(target instanceof Element&&target.closest(".create-menu-wrap,.account-wrap,.session-picker,.context-menu,.plus-menu-wrap,.host-chip-wrap"))return;setContext(null);setRoomContext(null);setSessionMenuOpen(false);setAccountOpen(false);setCreateMenuOpen(false);setPlusOpen(false);setHostMenuOpen(false)};window.addEventListener("click",close);return()=>window.removeEventListener("click",close)},[]);
-  useEffect(()=>{const onKey=(event:KeyboardEvent)=>{if(event.key!=="Escape")return;setAccountOpen(false);setAccountDialog(null);setCreateMenuOpen(false);setPlusOpen(false);setTeachOpen(false);setEditingSkillId(null);setSessionMenuOpen(false);setContext(null);setRoomContext(null)};window.addEventListener("keydown",onKey);return()=>window.removeEventListener("keydown",onKey)},[]);
+  useEffect(()=>{const close=(event:MouseEvent)=>{const target=event.target;if(target instanceof Element&&target.closest(".create-menu-wrap,.account-wrap,.session-picker,.context-menu,.plus-menu-wrap,.host-chip-wrap"))return;if(Date.now()-menuOpenedAtRef.current>=450)setMessageMenu(null);setContext(null);setRoomContext(null);setSessionMenuOpen(false);setAccountOpen(false);setCreateMenuOpen(false);setPlusOpen(false);setHostMenuOpen(false)};window.addEventListener("click",close);return()=>window.removeEventListener("click",close)},[]);
+  useEffect(()=>{const onKey=(event:KeyboardEvent)=>{if(event.key!=="Escape")return;setAccountOpen(false);setAccountDialog(null);setCreateMenuOpen(false);setPlusOpen(false);setTeachOpen(false);setEditingSkillId(null);setSessionMenuOpen(false);setContext(null);setRoomContext(null);setMessageMenu(null)};window.addEventListener("keydown",onKey);return()=>window.removeEventListener("keydown",onKey)},[]);
   useEffect(()=>{setWorkspaceName(name=>isDefaultWorkspaceName(name)?t("localWorkspace"):name)},[locale]);
   useEffect(()=>{localStorage.setItem(WORKSPACE_STORE,JSON.stringify({name:workspaceName,showHidden}))},[workspaceName,showHidden]);
   useEffect(()=>{if(!sessionStoreKey||!activeSessionId)return;if(!sessions.some(session=>session.id===activeSessionId))return;if(!activeRoomId&&!sessions.some(session=>session.id===activeSessionId&&session.botId===activeId))return;writeSessionStore(sessionStoreKey,activeSessionId)},[sessionStoreKey,activeId,activeRoomId,activeSessionId,sessions]);
@@ -347,6 +351,7 @@ export function App(){
     finally{setScheduleSaving(false)}
   }
 
+  const mentionAgents=useMemo(()=>activeRoom?activeRoom.members.map(member=>({id:member.id,name:member.name})):[],[activeRoom]);
   const sessionBusy=workingMembers.length>0;
   const otherSessionBusy=Boolean(computer.busyBotName&&!sessionBusy);
   const chatName=activeRoom?.name||active?.name||"";
@@ -369,20 +374,22 @@ export function App(){
   async function send(event:FormEvent){
     event.preventDefault();
     if(sendingRef.current||busy)return;
-    const submittedDraft=draft,text=submittedDraft.trim(),files=pendingFiles,sessionId=activeSessionId;
+    const submittedDraft=draft,text=submittedDraft.trim(),files=pendingFiles,sessionId=activeSessionId,reply=replyTarget;
     if((!active&&!activeRoom)||!sessionId||(!text&&files.length===0))return;
     // An uncertain HTTP result must reuse the original nonce on retry. Keep
     // the user's input until acknowledgement; a failed refresh is not a failed send.
-    const key=JSON.stringify([sessionId,text,files.map(file=>file.id)]);
+    const key=JSON.stringify([sessionId,text,files.map(file=>file.id),reply?.id||""]);
     const nonce=pendingSendNonces.current.get(key)||clientNonce();
     pendingSendNonces.current.set(key,nonce);
     sendingRef.current=true;setSendingMessage(true);
     try{await action(async()=>{
       const attachments=await Promise.all(files.map(async item=>({name:item.file.name,mimeType:item.file.type,content:await readAsBase64(item.file)})));
-      await api(`/api/sessions/${sessionId}/messages`,{method:"POST",body:JSON.stringify({text,clientNonce:nonce,attachments})});
+      const quoted=reply?[{kind:"reply",messageId:reply.id,name:reply.role==="user"?t("you"):(reply.speakerName||paneBot?.name||""),body:replySnippet(reply.body)||messageFiles(reply.blocks).map(file=>file.name).join(" · ")}]:[];
+      await api(`/api/sessions/${sessionId}/messages`,{method:"POST",body:JSON.stringify({text,clientNonce:nonce,attachments,blocks:quoted})});
       pendingSendNonces.current.delete(key);
       if(currentSessionRef.current===sessionId){
         setDraft(current=>current===submittedDraft?"":current);
+        setReplyTarget(null);
         setPendingFiles(current=>current.filter(item=>!files.some(sent=>sent.id===item.id)));
         historyIndexRef.current=null;historyDraftRef.current="";
       }
@@ -394,6 +401,71 @@ export function App(){
   }
 
   function pickMention(choice:{name:string}){const next=acceptMention(draft,caretAt,choice.name);setDraft(next.text);setCaretAt(next.caret);requestAnimationFrame(()=>composerRef.current?.focus())}
+  function openMessageMenu(message:Message,x:number,y:number){
+    menuOpenedAtRef.current=Date.now();
+    setContext(null);setRoomContext(null);setPlusOpen(false);setSessionMenuOpen(false);
+    setMessageMenu({message,x,y});
+  }
+  function messagePress(message:Message){
+    const skip=(target:EventTarget|null)=>target instanceof Element&&Boolean(target.closest("a[href],img,video,button,input,textarea"));
+    return {
+      onContextMenu(event:ReactMouseEvent){
+        if(skip(event.target))return;
+        event.preventDefault();
+        event.stopPropagation();
+        openMessageMenu(message,event.clientX,event.clientY);
+      },
+      onTouchStart(event:ReactTouchEvent){
+        if(skip(event.target))return;
+        const touch=event.touches[0];
+        if(!touch)return;
+        window.clearTimeout(longPressRef.current?.timer);
+        const timer=window.setTimeout(()=>{
+          longPressRef.current=null;
+          openMessageMenu(message,touch.clientX,touch.clientY);
+          try{navigator.vibrate?.(10)}catch{/* ignore */}
+        },500);
+        longPressRef.current={timer,x:touch.clientX,y:touch.clientY,id:message.id};
+      },
+      onTouchMove(event:ReactTouchEvent){
+        const press=longPressRef.current;
+        if(!press||press.id!==message.id)return;
+        const touch=event.touches[0];
+        if(!touch)return;
+        if(Math.hypot(touch.clientX-press.x,touch.clientY-press.y)>12){
+          window.clearTimeout(press.timer);
+          longPressRef.current=null;
+        }
+      },
+      onTouchEnd(event:ReactTouchEvent){
+        const press=longPressRef.current;
+        if(press&&press.id===message.id){
+          window.clearTimeout(press.timer);
+          longPressRef.current=null;
+        }
+        if(Date.now()-menuOpenedAtRef.current<500)event.preventDefault();
+      },
+      onTouchCancel(){
+        const press=longPressRef.current;
+        if(!press||press.id!==message.id)return;
+        window.clearTimeout(press.timer);
+        longPressRef.current=null;
+      },
+    };
+  }
+  function copyChatMessage(message:Message){
+    const selected=window.getSelection()?.toString().trim();
+    const text=selected||message.body.trim()||messageFiles(message.blocks).map(file=>file.name).join("\n");
+    if(text)void copyText(text);
+  }
+  function beginReply(message:Message){
+    setMessageMenu(null);
+    if(message.role==="user")return;
+    setReplyTarget(message);
+    const name=message.role!=="user"?(message.speakerName||(activeRoom?paneBot?.name:undefined)):undefined;
+    if(activeRoom&&name)setDraft(current=>ensureMention(current,name));
+    requestAnimationFrame(()=>composerRef.current?.focus());
+  }
   function composerKeyDown(event:ReactKeyboardEvent<HTMLTextAreaElement>){if(event.nativeEvent.isComposing||event.key==="Process")return;if(mentionList.length){if(event.key==="Escape"){event.preventDefault();setMentionDismissed(true);return}if(event.key==="ArrowDown"||event.key==="ArrowUp"){event.preventDefault();setMentionIndex(index=>(index+(event.key==="ArrowDown"?1:mentionList.length-1))%mentionList.length);return}if(event.key==="Tab"||(event.key==="Enter"&&!event.shiftKey)){event.preventDefault();pickMention(mentionList[mentionIndex%mentionList.length]);return}}if(slashSuggestions.length){if(event.key==="Escape"){event.preventDefault();setSlashDismissed(true);return}if(event.key==="ArrowDown"||event.key==="ArrowUp"){event.preventDefault();setSlashIndex(index=>(index+(event.key==="ArrowDown"?1:slashSuggestions.length-1))%slashSuggestions.length);return}if(event.key==="Tab"||(event.key==="Enter"&&!event.shiftKey)){event.preventDefault();setDraft(`/${slashSuggestions[slashIndex%slashSuggestions.length].name} `);return}}const history=sentHistoryRef.current;if(event.key==="ArrowUp"&&history.length>0&&(!event.currentTarget.value.includes("\n")||event.currentTarget.selectionStart===0)){event.preventDefault();if(historyIndexRef.current===null){historyDraftRef.current=draft;historyIndexRef.current=history.length-1}else historyIndexRef.current=Math.max(0,historyIndexRef.current-1);setDraft(history[historyIndexRef.current]);return}if(event.key==="ArrowDown"&&historyIndexRef.current!==null&&(!event.currentTarget.value.includes("\n")||event.currentTarget.selectionEnd===event.currentTarget.value.length)){event.preventDefault();if(historyIndexRef.current<history.length-1){historyIndexRef.current+=1;setDraft(history[historyIndexRef.current])}else{historyIndexRef.current=null;setDraft(historyDraftRef.current)}return}if(event.key==="Enter"&&!event.shiftKey){event.preventDefault();if(sendingRef.current||busy)return;event.currentTarget.form?.requestSubmit()}}
   function selectSession(id:string){setActiveSessionId(id);setSessionMenuOpen(false);if(sessionStoreKey)writeSessionStore(sessionStoreKey,id)}
   async function createSession(){if(!sessionsPath||!sessionStoreKey)return;setSessionMenuOpen(false);setBusy(true);setError(null);try{const session=await api<Session>(sessionsPath,{method:"POST",body:JSON.stringify({title:t("newConversation")})});writeSessionStore(sessionStoreKey,session.id);const next=await api<Session[]>(sessionsPath);setSessions(next);setActiveSessionId(session.id);setMessages([])}catch(e){setError(e instanceof Error?localizeError(e.message):t("operationFailed"))}finally{setBusy(false)}}
@@ -435,6 +507,7 @@ export function App(){
   async function copyClipboard(){try{await navigator.clipboard.writeText(desktopClipboard)}catch{setError(t("clipboardWriteBlocked"))}}
   async function inbox(bot:Bot,actionName:string,groupName?:string|null){await api(`/api/bots/${bot.id}/inbox`,{method:"POST",body:JSON.stringify({action:actionName,groupName})});await loadBots()}
   function openBot(bot:Bot){setCallOpen(false);setMobileNav(false);setSessionMenuOpen(false);if(bot.unreadCount>0)void inbox(bot,"read");if(bot.id===activeId&&!activeRoomId){if(!activeSessionId){const stored=readSessionStore()[bot.id];if(stored)setActiveSessionId(stored);else void loadSessions()}return}setMessages([]);setActiveSessionId(null);setActiveRoomId(null);setBusyMembers([]);setActiveId(bot.id)}
+  function openMention(id:string){const bot=bots.find(item=>item.id===id);if(!bot)return;setMessageMenu(null);openBot(bot)}
   function openRoom(room:Room){setCallOpen(false);setMobileNav(false);setSessionMenuOpen(false);if(rightPart==="settings")setRightPart("computer");if(room.id===activeRoomId){if(!activeSessionId){const stored=readSessionStore()[`room:${room.id}`];if(stored)setActiveSessionId(stored);else void loadSessions()}return}setMessages([]);setActiveSessionId(null);setActiveId(null);setBusyMembers([]);setActiveRoomId(room.id)}
   async function deleteRoom(room:Room){setRoomToDelete(null);await action(async()=>{await api(`/api/rooms/${room.id}`,{method:"DELETE"});if(activeRoomId===room.id){setActiveRoomId(null);setActiveSessionId(null);setMessages([]);setBusyMembers([])}await loadBots()})}
   function openAccount(dialog:AccountDialog){setAccountOpen(false);setAccountDialog(dialog)}
@@ -556,12 +629,12 @@ export function App(){
     <main className="chat-panel">
       <header className="topbar"><button type="button" className="icon-button mobile-menu" aria-label={t("chooseBot")} aria-expanded={mobileNav} aria-controls="conversation-sidebar" onClick={()=>setMobileNav(v=>!v)}><UseAnimations animation={menu} size={18} strokeColor="var(--ink)"/></button>{activeRoom?<><AvatarStack members={activeRoom.members} size={32} online thinkingIds={busyMembers.map(member=>member.id)}/><strong>{activeRoom.name}</strong><span className="host-chip-wrap" onClick={event=>event.stopPropagation()}><button type="button" className="host-chip" title={t("hostHint")} aria-haspopup="menu" aria-expanded={hostMenuOpen} onClick={()=>setHostMenuOpen(v=>!v)}><Megaphone size={13}/><span>{roomHost?roomHost.name:t("hostBadge")}</span></button>{hostMenuOpen&&<div className="host-menu" role="menu"><small className="host-menu-label">{t("hostMenuLabel")}</small>{activeRoom.members.map(member=><button type="button" role="menuitemradio" aria-checked={member.id===roomHostId} key={member.id} onClick={()=>void setRoomHost(member.id)}><Avatar lookId={member.id} name={member.name} color={member.avatarColor} shape={member.avatarShape} size={18}/><span>{member.name}</span>{member.id===roomHostId&&<b className="host-flag">{t("hostBadge")}</b>}</button>)}</div>}</span><SessionMenu sessions={sessions} activeSessionId={activeSessionId} open={sessionMenuOpen} setOpen={setSessionMenuOpen} busy={busy} onSelect={selectSession} onCreate={createSession} onDelete={id=>{setSessionMenuOpen(false);setSessionToDelete(id)}} onClear={()=>{setSessionMenuOpen(false);setClearOpen(true)}}/><span className="grow"/>{topTools}</>:active?<><Avatar lookId={active.id} name={active.name} color={active.avatarColor} shape={active.avatarShape} active online/><strong>{active.name}</strong><SessionMenu sessions={sessions} activeSessionId={activeSessionId} open={sessionMenuOpen} setOpen={setSessionMenuOpen} busy={busy} onSelect={selectSession} onCreate={createSession} onDelete={id=>{setSessionMenuOpen(false);setSessionToDelete(id)}} onClear={()=>{setSessionMenuOpen(false);setClearOpen(true)}}/><span className="grow"/>{topTools}</>:<><strong>{t("chooseBot")}</strong><span className="grow"/>{topTools}</>}</header>
       {callOpen&&voiceSettings?.enabled&&active&&activeSessionId&&!activeRoomId?<CallOverlay bot={active} sessionId={activeSessionId} takeover={computer.takeoverRequested||(!computer.sharedInput&&computer.controlHolder==="user")} onHangUp={()=>setCallOpen(false)} onTakeOver={()=>{setRightPart("computer");setRightCollapsed(false);setComputerOpen(true);if(active&&!computer.sharedInput)void setControl("user",active.id)}}/>:null}
-      <div className="messages">{(activeRoom||active)&&messages.length===0?<div className="welcome">{activeRoom?<AvatarStack members={activeRoom.members} size={56} online/>:<Avatar lookId={active!.id} name={active!.name} color={active!.avatarColor} shape={active!.avatarShape} active online size={64}/>}<h1>{activeRoom?t("startRoomDiscussion",{name:activeRoom.name}):t("startBotWork",{name:active!.name})}</h1><p>{activeRoom?t("roomWillReply",{names:listJoin(activeRoom.members.map(member=>member.name))}):active!.description||t("botWelcome")}</p></div>:messages.map((message,index)=>{const spoken=message.role!=="user"&&Boolean(activeRoom);const speakerName=message.speakerName||(spoken?paneBot?.name:undefined);const speakerShape=(message.speakerShape||paneBot?.avatarShape||"blob") as AvatarShape;const files=messageFiles(message.blocks);const chips=chipBlocks(message.blocks);const hideBody=isAutoAttachCaption(message.body,files)||isAutoScheduleCaption(message.body,chips);const previous=index>0?messages[index-1]:null;const newDay=!previous||!sameDay(previous.createdAt,message.createdAt);return <Fragment key={message.id}>{newDay&&<DayDivider value={message.createdAt}/>}<div className={`message ${message.role} ${spoken?"spoken":""} ${files.length?"with-files":""}`}>{spoken&&<span className="msg-avatar"><Avatar lookId={message.speakerBotId||paneBot?.id||undefined} name={speakerName||"agent"} color={message.speakerColor||undefined} shape={speakerShape} size={22}/></span>}{spoken&&<b className="speaker" style={{color:message.speakerColor||undefined}}>{speakerName}</b>}{files.length>0&&<div className="msg-attachments">{files.map(file=><FileCard key={file.name} file={file}/>)}</div>}{chips.map((chip,index)=>chip.kind==="error"?<div className="login-chip error-chip" key={`${message.id}-error-${index}`}><div className="login-label">{errorTitle(chip.code)}</div><div className="error-actions">{errorActions(chip.code).map(next=>next==="retry"?<button type="button" className="primary" key="retry" title={t("errorRetryHint")} disabled={busy||!chip.runId||Boolean(retriedRuns[chip.runId])} onClick={()=>void retryRun(chip.runId)}>{retriedRuns[chip.runId||""]?t("errorRetried"):t("errorRetry")}</button>:next==="screen"?<button type="button" key="screen" onClick={()=>void openLoginScreen()}>{t("loginOpenScreen")}</button>:<button type="button" key="settings" onClick={()=>openAccount("model")}>{t("errorOpenSettings")}</button>)}<RunProbe runId={chip.runId||null} align="end" label={t("errorDetails")}><span className="error-probe" title={t("errorDetails")}><Info/></span></RunProbe></div></div>:chip.kind==="resume"?<div className="login-chip resume-chip" key={`${message.id}-resume-${index}`}><div className="login-label">{resumeTitle(chip.reason)}</div>{(chip.limit||0)>0?<div className="login-why">{t("resumeProgress",{turns:chip.turns||0,limit:chip.limit||0})}</div>:null}{resumedChips[message.id]||(message.seq??0)<lastAssistantSeq?null:<div className="resume-actions"><button type="button" className="primary" disabled={busy} onClick={()=>void continueRun(message.id)}>{t("resumeContinue")}</button><button type="button" className="outline" disabled={busy} onClick={()=>setResumedChips(current=>({...current,[message.id]:true}))}>{t("resumeStop")}</button></div>}</div>:chip.kind==="login"?<div className="login-chip" key={`${message.id}-login-${index}`}><div className="login-label">{t("loginNeedsYou")}</div><div className="login-site">{chip.site||message.body}</div>{chip.why?<div className="login-why">{t("loginWhy",{why:chip.why})}</div>:null}<button type="button" className="primary" onClick={()=>void openLoginScreen()}>{t("loginOpenScreen")}</button></div>:chip.kind==="schedule"?<div className="sched-chip" key={`${message.id}-sched-${index}`}><div className="sched-label">{t("scheduleChip")}</div><strong>{chip.name}</strong><small>{scheduleWhen(chip.cron,chip.human)}</small></div>:<div className="sched-chip" key={`${message.id}-run-${index}`}><div className="sched-label">{t("scheduleRunChip")}</div><strong>{chip.name}</strong><small>{scheduleWhen(chip.cron,chip.human)}</small></div>)}{!hideBody&&(message.role==="assistant"?<div className="message-stack"><div className="message-body md"><ChatMarkdown>{message.body}</ChatMarkdown></div>{message.body.trim()?<CopyMessageButton text={message.body}/>:null}{message.runId&&<RunProbe runId={message.runId} label={t("messageRunDetails")}><span className="message-run-details"><Info/>{t("messageRunDetails")}</span></RunProbe>}</div>:<span className="message-body">{message.body}</span>)}{!hideBody&&message.body.trim()&&<button type="button" className={`remember-msg ${remembered[message.id]?"saved":""}`} title={remembered[message.id]?t("remembered"):t("remember")} disabled={!!remembered[message.id]} onClick={()=>void rememberMessage(message)}><UseAnimations animation={bookmark} size={14} strokeColor="var(--muted)"/></button>}<MessageTime value={message.createdAt}/>{message.replyBots&&message.replyBots.length>0&&<div className="route-note">{message.role==="user"?t("routedTo",{names:listJoin(message.replyBots.map(reply=>reply.name))}):t("handedTo",{name:message.replyBots[0].name})}</div>}</div></Fragment>})}{pausedForUser&&paneBot&&<div className="pause-banner" role="status"><span>{computer.sharedInput?t("sharedNeedsUser",{name:paneBot.name}):computer.controlHolder==="user"?t("pausedUserControl",{name:paneBot.name}):t("pausedNeedsUser",{name:paneBot.name})}{(computer.queuedRuns||0)>0&&<> {t("queuedMessages",{count:computer.queuedRuns||0})}</>}</span>{computer.sharedInput||computer.controlHolder==="user"?<button type="button" className="primary" disabled={busy||controlBusy} onClick={()=>void setControl("none",paneBot.id)}>{computer.sharedInput?t("doneContinue"):t("releaseAndContinue")}</button>:<button type="button" className="primary" disabled={busy||controlBusy} onClick={()=>void setControl("user",paneBot.id)}>{t("takeOverNow")}</button>}</div>}{teaching&&active&&<div className="teach-banner recording" role="status"><span><i className="record-dot live"/>{t("teachingLive",{goal:teaching.goal})}<small>{t("teachingHint")}{teaching.eventCount>0&&<> · {t("teachingCaptured",{count:teaching.eventCount})}</>}</small></span><button type="button" className="primary" disabled={busy} onClick={()=>void stopTeaching()}>{t("finishDemo")}</button><button type="button" className="outline" disabled={busy} onClick={()=>void cancelTeaching()}>{t("cancel")}</button></div>}{drafting&&<div className="teach-banner" role="status"><UseAnimations animation={loading} size={18} wrapperStyle={{display:"inline-block",verticalAlign:"middle"}}/><span>{t("distilling",{goal:drafting.goal})}</span></div>}{skillDraft&&active&&<SkillDraftCard key={skillDraft.id} skill={skillDraft} busy={busy} onSave={(name,playbook)=>void saveSkill(skillDraft,name,playbook)} onTest={(name,playbook)=>void testSkill(skillDraft,name,playbook)} onDiscard={()=>void discardSkill(skillDraft)} onEdit={()=>setEditingSkillId(skillDraft.id)} onExport={(name,playbook)=>downloadSkill(name,skillDraft.goal,playbook)}/>}{Object.values(replyDrafts).filter(reply=>reply.text&&(!reply.messageId||!messages.some(message=>message.id===reply.messageId))).map(reply=>{const speaker=bots.find(bot=>bot.id===reply.botId);return <div className={`message assistant ${activeRoom?"spoken":""}`} key={reply.runId} aria-busy={!reply.messageId}>{activeRoom&&speaker&&<><span className="msg-avatar"><Avatar lookId={speaker.id} name={speaker.name} color={speaker.avatarColor} shape={speaker.avatarShape} online/></span><span className="speaker">{speaker.name}</span></>}<div className="message-stack"><div className="message-body md"><ChatMarkdown>{reply.text}</ChatMarkdown></div></div></div>})}<div ref={messageEndRef} aria-hidden="true"/></div>
+      <div className="messages">{(activeRoom||active)&&messages.length===0?<div className="welcome">{activeRoom?<AvatarStack members={activeRoom.members} size={56} online/>:<Avatar lookId={active!.id} name={active!.name} color={active!.avatarColor} shape={active!.avatarShape} active online size={64}/>}<h1>{activeRoom?t("startRoomDiscussion",{name:activeRoom.name}):t("startBotWork",{name:active!.name})}</h1><p>{activeRoom?t("roomWillReply",{names:listJoin(activeRoom.members.map(member=>member.name))}):active!.description||t("botWelcome")}</p></div>:messages.map((message,index)=>{const spoken=message.role!=="user"&&Boolean(activeRoom);const speakerName=message.speakerName||(spoken?paneBot?.name:undefined);const speakerShape=(message.speakerShape||paneBot?.avatarShape||"blob") as AvatarShape;const files=messageFiles(message.blocks);const chips=chipBlocks(message.blocks);const hideBody=isAutoAttachCaption(message.body,files)||isAutoScheduleCaption(message.body,chips);const quoted=replyQuote(message.blocks);const quoteChip=quoted?<span className="reply-quote"><strong>{quoted.name||t("you")}</strong><span><MentionText text={quoted.body} agents={mentionAgents} onMention={openMention}/></span></span>:null;const previous=index>0?messages[index-1]:null;const newDay=!previous||!sameDay(previous.createdAt,message.createdAt);return <Fragment key={message.id}>{newDay&&<DayDivider value={message.createdAt}/>}<div className={`message ${message.role} ${spoken?"spoken":""} ${files.length?"with-files":""} ${replyTarget?.id===message.id?"replying":""}`}>{spoken&&<span className="msg-avatar"><Avatar lookId={message.speakerBotId||paneBot?.id||undefined} name={speakerName||"agent"} color={message.speakerColor||undefined} shape={speakerShape} size={22}/></span>}{spoken&&<b className="speaker" style={{color:message.speakerColor||undefined}}>{speakerName}</b>}{files.length>0&&<div className="msg-attachments">{files.map(file=><FileCard key={file.name} file={file}/>)}</div>}{chips.map((chip,index)=>chip.kind==="error"?<div className="login-chip error-chip" key={`${message.id}-error-${index}`}><div className="login-label">{errorTitle(chip.code)}</div><div className="error-actions">{errorActions(chip.code).map(next=>next==="retry"?<button type="button" className="primary" key="retry" title={t("errorRetryHint")} disabled={busy||!chip.runId||Boolean(retriedRuns[chip.runId])} onClick={()=>void retryRun(chip.runId)}>{retriedRuns[chip.runId||""]?t("errorRetried"):t("errorRetry")}</button>:next==="screen"?<button type="button" key="screen" onClick={()=>void openLoginScreen()}>{t("loginOpenScreen")}</button>:<button type="button" key="settings" onClick={()=>openAccount("model")}>{t("errorOpenSettings")}</button>)}<RunProbe runId={chip.runId||null} align="end" label={t("errorDetails")}><span className="error-probe" title={t("errorDetails")}><Info/></span></RunProbe></div></div>:chip.kind==="resume"?<div className="login-chip resume-chip" key={`${message.id}-resume-${index}`}><div className="login-label">{resumeTitle(chip.reason)}</div>{(chip.limit||0)>0?<div className="login-why">{t("resumeProgress",{turns:chip.turns||0,limit:chip.limit||0})}</div>:null}{resumedChips[message.id]||(message.seq??0)<lastAssistantSeq?null:<div className="resume-actions"><button type="button" className="primary" disabled={busy} onClick={()=>void continueRun(message.id)}>{t("resumeContinue")}</button><button type="button" className="outline" disabled={busy} onClick={()=>setResumedChips(current=>({...current,[message.id]:true}))}>{t("resumeStop")}</button></div>}</div>:chip.kind==="login"?<div className="login-chip" key={`${message.id}-login-${index}`}><div className="login-label">{t("loginNeedsYou")}</div><div className="login-site">{chip.site||message.body}</div>{chip.why?<div className="login-why">{t("loginWhy",{why:chip.why})}</div>:null}<button type="button" className="primary" onClick={()=>void openLoginScreen()}>{t("loginOpenScreen")}</button></div>:chip.kind==="schedule"?<div className="sched-chip" key={`${message.id}-sched-${index}`}><div className="sched-label">{t("scheduleChip")}</div><strong>{chip.name}</strong><small>{scheduleWhen(chip.cron,chip.human)}</small></div>:<div className="sched-chip" key={`${message.id}-run-${index}`}><div className="sched-label">{t("scheduleRunChip")}</div><strong>{chip.name}</strong><small>{scheduleWhen(chip.cron,chip.human)}</small></div>)}{!hideBody&&(message.role==="assistant"?<div className="message-stack" {...messagePress(message)}><div className="message-body md">{quoteChip}<ChatMarkdown agents={mentionAgents} onMention={openMention}>{message.body}</ChatMarkdown></div></div>:<span className="message-body" {...messagePress(message)}>{quoteChip}<MentionText text={message.body} agents={mentionAgents} onMention={openMention}/></span>)}<MessageTime value={message.createdAt}/></div></Fragment>})}{pausedForUser&&paneBot&&<div className="pause-banner" role="status"><span>{computer.sharedInput?t("sharedNeedsUser",{name:paneBot.name}):computer.controlHolder==="user"?t("pausedUserControl",{name:paneBot.name}):t("pausedNeedsUser",{name:paneBot.name})}{(computer.queuedRuns||0)>0&&<> {t("queuedMessages",{count:computer.queuedRuns||0})}</>}</span>{computer.sharedInput||computer.controlHolder==="user"?<button type="button" className="primary" disabled={busy||controlBusy} onClick={()=>void setControl("none",paneBot.id)}>{computer.sharedInput?t("doneContinue"):t("releaseAndContinue")}</button>:<button type="button" className="primary" disabled={busy||controlBusy} onClick={()=>void setControl("user",paneBot.id)}>{t("takeOverNow")}</button>}</div>}{teaching&&active&&<div className="teach-banner recording" role="status"><span><i className="record-dot live"/>{t("teachingLive",{goal:teaching.goal})}<small>{t("teachingHint")}{teaching.eventCount>0&&<> · {t("teachingCaptured",{count:teaching.eventCount})}</>}</small></span><button type="button" className="primary" disabled={busy} onClick={()=>void stopTeaching()}>{t("finishDemo")}</button><button type="button" className="outline" disabled={busy} onClick={()=>void cancelTeaching()}>{t("cancel")}</button></div>}{drafting&&<div className="teach-banner" role="status"><UseAnimations animation={loading} size={18} wrapperStyle={{display:"inline-block",verticalAlign:"middle"}}/><span>{t("distilling",{goal:drafting.goal})}</span></div>}{skillDraft&&active&&<SkillDraftCard key={skillDraft.id} skill={skillDraft} busy={busy} onSave={(name,playbook)=>void saveSkill(skillDraft,name,playbook)} onTest={(name,playbook)=>void testSkill(skillDraft,name,playbook)} onDiscard={()=>void discardSkill(skillDraft)} onEdit={()=>setEditingSkillId(skillDraft.id)} onExport={(name,playbook)=>downloadSkill(name,skillDraft.goal,playbook)}/>}{Object.values(replyDrafts).filter(reply=>reply.text&&(!reply.messageId||!messages.some(message=>message.id===reply.messageId))).map(reply=>{const speaker=bots.find(bot=>bot.id===reply.botId);return <div className={`message assistant ${activeRoom?"spoken":""}`} key={reply.runId} aria-busy={!reply.messageId}>{activeRoom&&speaker&&<><span className="msg-avatar"><Avatar lookId={speaker.id} name={speaker.name} color={speaker.avatarColor} shape={speaker.avatarShape} online/></span><span className="speaker">{speaker.name}</span></>}<div className="message-stack"><div className="message-body md"><ChatMarkdown agents={mentionAgents} onMention={openMention}>{reply.text}</ChatMarkdown></div></div></div>})}<div ref={messageEndRef} aria-hidden="true"/></div>
       <div className={`composer-dock ${statusMembers.length?"has-status":""}`}>
       {error&&<div className="error-banner"><span>{error}</span><button onClick={()=>setError(null)}><X/></button></div>}
       {otherSessionBusy&&<div className="queue-hint">{t("anotherConversationQueued")}</div>}
-      {statusMembers.map(member=>{const step=computer.busyStep&&member.id===computer.botId?computer.busyStep:null;const transition=isTransitionStep(step);const label=t("working",{name:member.name});return <div className="thinking-row" key={member.id}><RunProbe runId={member.id===computer.botId?computer.busyRunId:null}><Avatar lookId={member.id} name={member.name} color={member.avatarColor} shape={member.avatarShape} thinking online/></RunProbe><span className="working-copy"><span className="working-label">{label}</span>{!transition&&step?<span className="working-step">{localizeStep(step)}</span>:null}</span></div>})}
-      <form className={`composer ${pendingFiles.length?"has-files":""}`} onSubmit={send} onDragOver={event=>{event.preventDefault()}} onDrop={event=>{event.preventDefault();if(event.dataTransfer.files.length)addPendingFiles(event.dataTransfer.files)}}><div className="plus-menu-wrap" onClick={event=>event.stopPropagation()}><button type="button" className={`composer-plus ${plusOpen?"open":""}`} disabled={!activeSessionId} title={t("moreActions")} aria-label={t("moreActions")} aria-haspopup="menu" aria-expanded={plusOpen} onClick={()=>setPlusOpen(v=>!v)}><Plus/></button>{plusOpen&&<div className="plus-menu" role="menu"><button type="button" role="menuitem" disabled={!activeSessionId||Boolean(teaching)} title={t("attachFileHint")} onClick={()=>{setPlusOpen(false);attachRef.current?.click()}}><Paperclip/>{t("attachFile")}</button><button type="button" role="menuitem" disabled={!active||Boolean(teaching)||Boolean(drafting)} title={active?t("teachTaskHint"):t("teachNeedsBot")} onClick={()=>{setPlusOpen(false);setTeachOpen(true)}}><i className="record-dot"/>{t("teachTask")}</button><button type="button" role="menuitem" disabled={!active} title={t("importSkillHint")} onClick={()=>{setPlusOpen(false);importRef.current?.click()}}><Upload/>{t("importSkill")}</button>{savedSkills.length>0&&<><hr/><div className="plus-menu-skills"><small className="plus-menu-label">{t("taughtSkills")}{savedSkills.length>5?` · ${savedSkills.length}`:""}</small>{savedSkills.length>=6&&<input className="plus-menu-search" value={skillQuery} onChange={e=>setSkillQuery(e.target.value)} placeholder={t("searchSkills")} aria-label={t("searchSkills")} onClick={e=>e.stopPropagation()}/>}<div className="plus-menu-skill-list">{listedSkills.map(skill=><div className="plus-menu-skill" key={skill.id}><button type="button" role="menuitem" title={t("runSkillNamed",{name:skill.name})+(skill.playbook.whenToUse?`\n${skill.playbook.whenToUse}`:"")} onClick={()=>runSkill(skill)}><Sparkle/>{skill.name}</button><button type="button" className="skill-edit" title={t("exportSkillHint")} aria-label={t("exportSkill")} onClick={()=>downloadSkill(skill.name,skill.goal,skill.playbook)}><Download/></button><button type="button" className="skill-edit" title={t("editSkill")} aria-label={t("editSkill")} onClick={()=>{setPlusOpen(false);setEditingSkillId(skill.id)}}><Pencil/></button></div>)}{listedSkills.length===0&&<small className="plus-menu-empty">{t("noMatchingSkills")}</small>}</div></div></>}</div>}</div><input ref={importRef} className="skill-import-input" type="file" accept="application/json,.json" tabIndex={-1} aria-hidden="true" onChange={event=>{const file=event.target.files?.[0];event.currentTarget.value="";if(file)void importSkillFile(file)}}/><input ref={attachRef} className="skill-import-input attach-input" type="file" multiple accept={ATTACH_ACCEPT} tabIndex={-1} aria-hidden="true" onChange={event=>{const files=[...event.target.files||[]];event.currentTarget.value="";if(files.length)addPendingFiles(files)}}/>{pendingFiles.length>0&&<div className="composer-files">{pendingFiles.map(item=><FileCard key={item.id} file={{name:item.file.name,size:item.file.size}} preview={item.preview} onRemove={()=>removePendingFile(item.id)}/>)}</div>}{slashSuggestions.length>0&&<div className="slash-suggestions" role="listbox" aria-label={t("slashList")}>{slashSuggestions.map((skill,index)=><button type="button" role="option" aria-selected={index===slashIndex} key={skill.name} onClick={()=>{setDraft(`/${skill.name} `);requestAnimationFrame(()=>document.querySelector<HTMLTextAreaElement>(".composer textarea")?.focus())}}><strong>/{skill.name}</strong><small>{skill.kind}</small><span>{skill.description}</span></button>)}</div>}{mentionList.length>0&&<div className="slash-suggestions mention-suggestions" role="listbox" aria-label={t("mentionList")}>{mentionList.map((choice,index)=><button type="button" role="option" aria-selected={index===mentionIndex} key={choice.member?.id||"everyone"} onClick={()=>pickMention(choice)}>{choice.member&&<Avatar lookId={choice.member.id} name={choice.member.name} color={choice.member.avatarColor} shape={choice.member.avatarShape} size={18}/>}<strong>@{choice.name}</strong>{choice.member?null:<small>{t("mentionEveryoneHint")}</small>}</button>)}</div>}<textarea ref={composerRef} rows={1} value={draft} onChange={e=>{setDraft(e.target.value);setCaretAt(e.target.selectionStart??e.target.value.length)}} onSelect={e=>setCaretAt(e.currentTarget.selectionStart)} onKeyDown={composerKeyDown} onPaste={event=>{const files=event.clipboardData?.files;if(files&&files.length){event.preventDefault();addPendingFiles(files)}}} placeholder={teaching?t("teachingComposerHint"):activeSessionId&&chatName?t("messageTo",{name:chatName}):t("chooseConversationFirst")} disabled={!activeSessionId||Boolean(teaching)}/>{sessionBusy?<button type="button" className="send stop-send" title={t("stopConversation")} onClick={()=>void action(stopChat)}><Square/></button>:<button className="send" disabled={!activeSessionId||(!draft.trim()&&pendingFiles.length===0)||busy}><UseAnimations animation={sendingMessage?loading:arrowUp} size={20} strokeColor="var(--on-send)"/></button>}</form>
+      {statusMembers.map(member=>{const label=t("working",{name:member.name});return <div className="thinking-row" key={member.id}><Avatar lookId={member.id} name={member.name} color={member.avatarColor} shape={member.avatarShape} thinking online/><span className="working-copy"><span className="working-label">{label}</span></span></div>})}
+      <form className={`composer ${pendingFiles.length?"has-files":""} ${replyTarget?"has-reply":""}`} onSubmit={send} onDragOver={event=>{event.preventDefault()}} onDrop={event=>{event.preventDefault();if(event.dataTransfer.files.length)addPendingFiles(event.dataTransfer.files)}}><div className="plus-menu-wrap" onClick={event=>event.stopPropagation()}><button type="button" className={`composer-plus ${plusOpen?"open":""}`} disabled={!activeSessionId} title={t("moreActions")} aria-label={t("moreActions")} aria-haspopup="menu" aria-expanded={plusOpen} onClick={()=>setPlusOpen(v=>!v)}><Plus/></button>{plusOpen&&<div className="plus-menu" role="menu"><button type="button" role="menuitem" disabled={!activeSessionId||Boolean(teaching)} title={t("attachFileHint")} onClick={()=>{setPlusOpen(false);attachRef.current?.click()}}><Paperclip/>{t("attachFile")}</button><button type="button" role="menuitem" disabled={!active||Boolean(teaching)||Boolean(drafting)} title={active?t("teachTaskHint"):t("teachNeedsBot")} onClick={()=>{setPlusOpen(false);setTeachOpen(true)}}><i className="record-dot"/>{t("teachTask")}</button><button type="button" role="menuitem" disabled={!active} title={t("importSkillHint")} onClick={()=>{setPlusOpen(false);importRef.current?.click()}}><Upload/>{t("importSkill")}</button>{savedSkills.length>0&&<><hr/><div className="plus-menu-skills"><small className="plus-menu-label">{t("taughtSkills")}{savedSkills.length>5?` · ${savedSkills.length}`:""}</small>{savedSkills.length>=6&&<input className="plus-menu-search" value={skillQuery} onChange={e=>setSkillQuery(e.target.value)} placeholder={t("searchSkills")} aria-label={t("searchSkills")} onClick={e=>e.stopPropagation()}/>}<div className="plus-menu-skill-list">{listedSkills.map(skill=><div className="plus-menu-skill" key={skill.id}><button type="button" role="menuitem" title={t("runSkillNamed",{name:skill.name})+(skill.playbook.whenToUse?`\n${skill.playbook.whenToUse}`:"")} onClick={()=>runSkill(skill)}><Sparkle/>{skill.name}</button><button type="button" className="skill-edit" title={t("exportSkillHint")} aria-label={t("exportSkill")} onClick={()=>downloadSkill(skill.name,skill.goal,skill.playbook)}><Download/></button><button type="button" className="skill-edit" title={t("editSkill")} aria-label={t("editSkill")} onClick={()=>{setPlusOpen(false);setEditingSkillId(skill.id)}}><Pencil/></button></div>)}{listedSkills.length===0&&<small className="plus-menu-empty">{t("noMatchingSkills")}</small>}</div></div></>}</div>}</div><input ref={importRef} className="skill-import-input" type="file" accept="application/json,.json" tabIndex={-1} aria-hidden="true" onChange={event=>{const file=event.target.files?.[0];event.currentTarget.value="";if(file)void importSkillFile(file)}}/><input ref={attachRef} className="skill-import-input attach-input" type="file" multiple accept={ATTACH_ACCEPT} tabIndex={-1} aria-hidden="true" onChange={event=>{const files=[...event.target.files||[]];event.currentTarget.value="";if(files.length)addPendingFiles(files)}}/>{replyTarget&&<div className="composer-reply"><div className="composer-reply-copy"><small>{t("replyingTo",{name:replyTarget.role==="user"?t("you"):(replyTarget.speakerName||paneBot?.name||t("replyToThis"))})}</small><span>{replySnippet(replyTarget.body)||messageFiles(replyTarget.blocks).map(file=>file.name).join(" · ")||t("replyToThis")}</span></div><button type="button" className="composer-reply-close" title={t("cancelReply")} aria-label={t("cancelReply")} onClick={()=>setReplyTarget(null)}><X/></button></div>}{pendingFiles.length>0&&<div className="composer-files">{pendingFiles.map(item=><FileCard key={item.id} file={{name:item.file.name,size:item.file.size}} preview={item.preview} onRemove={()=>removePendingFile(item.id)}/>)}</div>}{slashSuggestions.length>0&&<div className="slash-suggestions" role="listbox" aria-label={t("slashList")}>{slashSuggestions.map((skill,index)=><button type="button" role="option" aria-selected={index===slashIndex} key={skill.name} onClick={()=>{setDraft(`/${skill.name} `);requestAnimationFrame(()=>document.querySelector<HTMLTextAreaElement>(".composer textarea")?.focus())}}><strong>/{skill.name}</strong><small>{skill.kind}</small><span>{skill.description}</span></button>)}</div>}{mentionList.length>0&&<div className="slash-suggestions mention-suggestions" role="listbox" aria-label={t("mentionList")}>{mentionList.map((choice,index)=><button type="button" role="option" aria-selected={index===mentionIndex} key={choice.member?.id||"everyone"} onClick={()=>pickMention(choice)}>{choice.member&&<Avatar lookId={choice.member.id} name={choice.member.name} color={choice.member.avatarColor} shape={choice.member.avatarShape} size={18}/>}<strong>@{choice.name}</strong>{choice.member?null:<small>{t("mentionEveryoneHint")}</small>}</button>)}</div>}<textarea ref={composerRef} rows={1} value={draft} onChange={e=>{setDraft(e.target.value);setCaretAt(e.target.selectionStart??e.target.value.length)}} onSelect={e=>setCaretAt(e.currentTarget.selectionStart)} onKeyDown={composerKeyDown} onPaste={event=>{const files=event.clipboardData?.files;if(files&&files.length){event.preventDefault();addPendingFiles(files)}}} placeholder={teaching?t("teachingComposerHint"):activeSessionId&&chatName?t("messageTo",{name:chatName}):t("chooseConversationFirst")} disabled={!activeSessionId||Boolean(teaching)}/>{sessionBusy?<button type="button" className="send stop-send" title={t("stopConversation")} onClick={()=>void action(stopChat)}><Square/></button>:<button className="send" disabled={!activeSessionId||(!draft.trim()&&pendingFiles.length===0)||busy}><UseAnimations animation={sendingMessage?loading:arrowUp} size={20} strokeColor="var(--on-send)"/></button>}</form>
       </div>
     </main>
 
@@ -602,6 +675,7 @@ export function App(){
     {roomToDelete&&<ConfirmRoomDelete room={roomToDelete} close={()=>setRoomToDelete(null)} confirm={()=>void deleteRoom(roomToDelete)}/>}
     {context&&<BotContextMenu context={context} close={()=>setContext(null)} run={async(actionName,group)=>{setContext(null);if(actionName==="delete"){setActiveId(context.bot.id);setActiveRoomId(null);setDeleteOpen(true);return}await inbox(context.bot,actionName,group)}}/>}
     {roomContext&&<RoomContextMenu context={roomContext} close={()=>setRoomContext(null)} onDelete={()=>{setRoomToDelete(roomContext.room);setRoomContext(null)}}/>}
+    {messageMenu&&<MessageContextMenu context={messageMenu} close={()=>setMessageMenu(null)} onCopy={()=>{copyChatMessage(messageMenu.message);setMessageMenu(null)}} onReply={()=>beginReply(messageMenu.message)}/>}
     {pendingMemory&&<div className="modal-backdrop" onClick={()=>!memorySaveBusy&&setPendingMemory(null)}><div className="dialog" role="dialog" aria-modal="true" aria-labelledby="memory-destination-title" onClick={e=>e.stopPropagation()}>
       <div className="dialog-title"><h2 id="memory-destination-title">{t("memoryChooseAgent")}</h2><button type="button" aria-label={t("cancel")} disabled={memorySaveBusy} onClick={()=>setPendingMemory(null)}><X/></button></div>
       <p className="dialog-lead">{t("memoryChooseAgentHelp")}</p>
@@ -956,6 +1030,7 @@ function ClipboardDialog({close,paste}:{close:()=>void;paste:(text:string)=>void
 function CreateDialog({close,created}:{close:()=>void;created:(bot:Bot)=>void}){const[name,setName]=useState("");const[mode,setMode]=useState<ComputerMode>("team");const[busy,setBusy]=useState(false);return <div className="modal-backdrop"><form className="dialog" onSubmit={async e=>{e.preventDefault();if(!name.trim())return;setBusy(true);try{created(await api<Bot>("/api/bots",{method:"POST",body:JSON.stringify({name:name.trim(),computerMode:mode})}))}finally{setBusy(false)}}}><div className="dialog-title"><h2>{t("addBot")}</h2><button type="button" onClick={close}><X/></button></div><label>{t("name")}<input autoFocus value={name} onChange={e=>setName(e.target.value)} placeholder={t("botNamePlaceholder")}/></label><div className="mode-grid"><button type="button" className={mode==="team"?"picked":""} onClick={()=>setMode("team")}><BotIcon/><strong>{t("sharedComputer")}</strong><small>{t("sharedComputerHint")}</small></button><button type="button" className={mode==="dedicated"?"picked":""} onClick={()=>setMode("dedicated")}><Computer/><strong>{t("privateComputer")}</strong><small>{t("privateComputerHint")}</small></button></div><div className="dialog-actions"><button type="button" className="outline" onClick={close}>{t("cancel")}</button><button className="primary" disabled={busy||!name.trim()}>{t("create")}</button></div></form></div>}
 function CreateGroupDialog({bots,close,created}:{bots:Bot[];close:()=>void;created:(room:Room)=>void}){const[name,setName]=useState("");const[selected,setSelected]=useState<string[]>([]);const[busy,setBusy]=useState(false);const visible=bots.filter(bot=>!bot.hidden);return <div className="modal-backdrop"><form className="dialog" onSubmit={async e=>{e.preventDefault();const groupName=name.trim();if(!groupName||selected.length<2)return;setBusy(true);try{created(await api<Room>("/api/rooms",{method:"POST",body:JSON.stringify({name:groupName,memberIds:selected})}))}finally{setBusy(false)}}}><div className="dialog-title"><h2>{t("addGroup")}</h2><button type="button" onClick={close}><X/></button></div><p className="dialog-lead">{t("groupDescription")}</p><label>{t("groupName")}<input autoFocus value={name} maxLength={30} onChange={e=>setName(e.target.value)} placeholder={t("groupNamePlaceholder")}/></label><fieldset className="group-picker"><legend>{t("chooseBots")}</legend>{visible.map(bot=><label key={bot.id}><input type="checkbox" checked={selected.includes(bot.id)} onChange={()=>setSelected(ids=>ids.includes(bot.id)?ids.filter(id=>id!==bot.id):[...ids,bot.id])}/><Avatar lookId={bot.id} name={bot.name} color={bot.avatarColor} shape={bot.avatarShape} online/><span>{bot.name}</span></label>)}</fieldset>{selected.length>0&&<p className="dialog-note">{t("groupHostHint",{name:visible.find(bot=>bot.id===selected[0])?.name||""})}</p>}<div className="dialog-actions"><button type="button" className="outline" onClick={close}>{t("cancel")}</button><button className="primary" disabled={busy||!name.trim()||selected.length<2}>{busy?t("creating"):t("createGroup")}</button></div></form></div>}
 function RoomContextMenu({context,close,onDelete}:{context:{room:Room;x:number;y:number};close:()=>void;onDelete:()=>void}){return <div className="context-menu" style={{left:Math.min(context.x,window.innerWidth-220),top:Math.min(context.y,window.innerHeight-160)}} onClick={e=>e.stopPropagation()}><button className="danger-item" onClick={onDelete}><UseAnimations animation={trash2} size={15} strokeColor="var(--danger-soft)"/>{t("deleteGroup")}</button><button className="context-close" onClick={close}><X/></button></div>}
+function MessageContextMenu({context,close,onCopy,onReply}:{context:{message:Message;x:number;y:number};close:()=>void;onCopy:()=>void;onReply:()=>void}){const canReply=context.message.role!=="user";return <div className="context-menu" role="menu" style={{left:Math.min(context.x,window.innerWidth-220),top:Math.min(context.y,window.innerHeight-120)}} onClick={e=>e.stopPropagation()}><button type="button" role="menuitem" onClick={onCopy}><UseAnimations animation={copy} size={15} strokeColor="var(--ink)"/>{t("copyMessage")}</button>{canReply&&<button type="button" role="menuitem" onClick={onReply}><Reply/>{t("replyToThis")}</button>}<button type="button" className="context-close" onClick={close}><X/></button></div>}
 function ConfirmRoomDelete({room,close,confirm}:{room:Room;close:()=>void;confirm:()=>void}){return <div className="modal-backdrop"><div className="dialog compact"><h2>{t("deleteNamed",{name:room.name})}</h2><p>{t("deleteGroupDescription")}</p><div className="dialog-actions"><button className="outline" onClick={close}>{t("cancel")}</button><button className="danger" onClick={confirm}>{t("deleteGroup")}</button></div></div></div>}
 function ConfirmDelete({bot,close,confirm}:{bot:Bot;close:()=>void;confirm:()=>void}){return <div className="modal-backdrop"><div className="dialog compact"><h2>{t("deleteNamed",{name:bot.name})}</h2><p>{bot.computerMode==="dedicated"?t("deleteDedicatedBotDescription"):t("deleteSharedBotDescription")}</p><div className="dialog-actions"><button className="outline" onClick={close}>{t("cancel")}</button><button className="danger" onClick={confirm}>{t("delete")}</button></div></div></div>}
 
diff --git a/apps/web/src/animated-icons.tsx b/apps/web/src/animated-icons.tsx
index 48bc3f5..d984c63 100644
--- a/apps/web/src/animated-icons.tsx
+++ b/apps/web/src/animated-icons.tsx
@@ -67,3 +67,6 @@ export function Download({className,size=16}:IconProps){
 export function Upload({className,size=16}:IconProps){
   return <svg className={["animated-icon",className].filter(Boolean).join(" ")} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>;
 }
+export function Reply({className,size=16}:IconProps){
+  return <svg className={["animated-icon",className].filter(Boolean).join(" ")} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>;
+}
diff --git a/apps/web/src/chat.css b/apps/web/src/chat.css
index ad3bc17..6aca44c 100644
--- a/apps/web/src/chat.css
+++ b/apps/web/src/chat.css
@@ -26,8 +26,8 @@
 .thinking-dots i:nth-child(3){animation-delay:.32s}
 .composer-dock{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;gap:20px;padding:28px var(--chat-gutter) 20px;background:var(--main);pointer-events:none;flex:none;width:100%}
 .composer-dock:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:32px;background:linear-gradient(180deg,transparent,var(--main));pointer-events:none}
-.composer-dock>*{box-sizing:border-box;pointer-events:auto;width:var(--chat-col);max-width:760px;margin-inline:auto}
-.composer{position:relative;left:auto;right:auto;bottom:auto;width:var(--chat-col);min-height:62px;align-items:center;padding:9px 10px;transform:none}
+.composer-dock>*{box-sizing:border-box;pointer-events:auto;width:var(--chat-col);max-width:760px;min-width:0;margin-inline:auto}
+.composer{position:relative;left:auto;right:auto;bottom:auto;width:var(--chat-col);min-width:0;max-width:100%;min-height:62px;align-items:center;padding:9px 10px;transform:none}
 .composer.has-files{flex-wrap:wrap;align-items:flex-end;padding-top:10px}
 .composer textarea{align-self:center;box-sizing:border-box;height:42px;min-height:42px;max-height:126px;padding:11px 4px;line-height:20px}
 .slash-suggestions{position:absolute;left:58px;right:58px;bottom:calc(100% + 8px);z-index:8;display:grid;gap:2px;padding:6px;border:1px solid var(--border);border-radius:14px;background:var(--menu);box-shadow:0 14px 34px rgba(0,0,0,.35)}
@@ -52,8 +52,8 @@
 .stop-send{background:var(--cream);color:var(--on-send)}
 .stop-send svg{width:14px;height:14px;fill:currentColor}
 .composer-plus:disabled{opacity:.35;cursor:not-allowed}
-.message{position:relative;padding-right:28px}
-.messages .remember-msg{display:grid}
+.message{position:relative;padding-right:0;-webkit-touch-callout:none;touch-action:manipulation}
+.messages .remember-msg{display:none}
 .working-label{font-size:13px;letter-spacing:.02em;line-height:1.35;white-space:nowrap;background:linear-gradient(90deg,#7a8088 0%,#7a8088 28%,#fff 50%,#7a8088 72%,#7a8088 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:working-shimmer 1.35s linear infinite}
 .message.assistant.spoken{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;row-gap:3px;justify-content:start;align-items:end}
 .message.assistant.spoken .msg-avatar{grid-column:1;grid-row:2;align-self:start;max-width:none;margin:4px 0 0;padding:0;border-radius:0;background:transparent;line-height:normal}
@@ -76,7 +76,7 @@
 
 .message{padding-bottom:21px}
 .message-time{position:absolute;bottom:0;left:0;font-size:11px;line-height:17px;color:var(--muted);font-variant-numeric:tabular-nums}
-.message.user .message-time{left:auto;right:28px}
+.message.user .message-time{left:auto;right:0}
 
 /* The day is said once, centred above the first message of that day, so each
    message only needs its clock time. */
@@ -86,9 +86,31 @@
 /* Who the room sent a message to: one thin line in the space under the bubble,
    opposite the timestamp, so it reads as a note about the message and never as
    a second message. */
-.route-note{position:absolute;bottom:0;left:0;max-width:56%;overflow:hidden;color:var(--muted);font-size:11px;line-height:17px;opacity:.78;text-overflow:ellipsis;white-space:nowrap}
-.message.user .route-note{left:0;right:auto}
-.message.assistant .route-note{left:auto;right:28px;text-align:right}
+.route-note{display:none}
+
+.composer.has-reply{flex-wrap:wrap;align-items:flex-end;padding-top:10px}
+.composer-reply{display:flex;align-items:center;gap:8px;box-sizing:border-box;flex:1 1 100%;min-width:0;max-width:100%;width:100%;overflow:hidden;order:-2;margin:2px 0 4px;padding:7px 8px 7px 46px;border-left:2px solid var(--accent);border-radius:10px;background:rgba(255,255,255,.04)}
+.composer-reply-copy{min-width:0;flex:1 1 auto;overflow:hidden}
+.composer-reply-copy small,.composer-reply-copy span{display:block;overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap}
+.composer-reply-copy small{color:var(--accent);font-size:11px;font-weight:650;line-height:1.3}
+.composer-reply-copy span{color:var(--muted);font-size:12px;line-height:1.35}
+.composer-reply-close{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
+.composer-reply-close:hover{color:var(--ink);background:rgba(255,255,255,.08)}
+.composer-reply-close svg{width:14px;height:14px}
+
+.reply-quote{display:block;margin:0 0 8px;padding:6px 10px;border-left:2px solid var(--accent);border-radius:8px;background:rgba(255,255,255,.05);white-space:normal}
+.reply-quote strong{display:block;color:var(--accent);font-size:11px;font-weight:650;line-height:1.3}
+.reply-quote span{display:block;overflow:hidden;color:var(--muted);font-size:12px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
+.message.user .reply-quote{background:rgba(0,0,0,.08)}
+.message.user .reply-quote strong{color:var(--on-cream);opacity:.72}
+.message.user .reply-quote span{color:var(--on-cream);opacity:.7}
+.message.replying>.message-body,.message.replying>.message-stack>.message-body{box-shadow:inset 0 0 0 1px var(--accent)}
+
+.mention-link{display:inline;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--accent);font:inherit;line-height:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-underline-offset:.16em;cursor:pointer}
+.mention-link:hover{color:#7ee0c8}
+.mention-link.is-everyone{cursor:default;font-weight:650}
+.message.user .mention-link{color:#0f766e;text-decoration-color:color-mix(in srgb,#0f766e 50%,transparent)}
+.message.user .mention-link:hover{color:#115e59}
 
 /* The `@` list sits where the slash list sits: only one of them is ever open. */
 .mention-suggestions button{align-items:center;gap:8px}
diff --git a/apps/web/src/locales/en.ts b/apps/web/src/locales/en.ts
index c954e13..bba0c0a 100644
--- a/apps/web/src/locales/en.ts
+++ b/apps/web/src/locales/en.ts
@@ -58,6 +58,7 @@ export const en: { [K in keyof typeof zhTW]: string } = {
   startBotWork: "Start working with {name}",
   roomWillReply: "{names} are here. Whoever is @-mentioned answers; otherwise the host, or the best fit, picks it up.",
   everyoneMention: "everyone", mentionEveryoneHint: "every member answers", mentionList: "Members to mention",
+  openAgentChat: "Open chat with {name}",
   routedTo: "{names} will answer this", handedTo: "→ handed to {name}",
   today: "Today", yesterday: "Yesterday",
   hostBadge: "Host", hostMenuLabel: "Who hosts", hostHint: "The host answers what nobody is named for. Tap to change it.",
@@ -69,6 +70,10 @@ export const en: { [K in keyof typeof zhTW]: string } = {
   copiedCode: "Copied",
   copyMessage: "Copy",
   copiedMessage: "Copied",
+  replyToThis: "Reply to this",
+  replyingTo: "Replying to {name}",
+  cancelReply: "Cancel reply",
+  you: "You",
   anotherConversationQueued: "Another chat is running, so this one is queued.",
   workingStep: "{name} is working… {step}",
   queuedMessages: "{count} more messages queued",
diff --git a/apps/web/src/locales/zh-TW.ts b/apps/web/src/locales/zh-TW.ts
index 4d0df98..6414088 100644
--- a/apps/web/src/locales/zh-TW.ts
+++ b/apps/web/src/locales/zh-TW.ts
@@ -16,11 +16,13 @@ export const zhTW = {
   openOnPhone: "在手機開啟", settings: "設定", about: "關於", helpCenter: "說明中心", sendFeedback: "傳送意見回饋", logout: "登出", workspaceMenu: "工作區選單",
   chooseBot: "選擇一個機器人", startRoomDiscussion: "和 {name} 開始討論", startBotWork: "和 {name} 開始工作", roomWillReply: "{names} 都在這裡。@誰就由誰回覆，沒點名時由主持人或最合適的 Agent 接手。",
   everyoneMention: "所有人", mentionEveryoneHint: "每個人都回覆", mentionList: "可點名的成員",
+  openAgentChat: "開啟與 {name} 的對話",
   routedTo: "本輪由 {names} 回覆", handedTo: "→ 交給 {name}",
   today: "今天", yesterday: "昨天",
   hostBadge: "主持人", hostMenuLabel: "由誰主持", hostHint: "沒被點名的時候由主持人回答。點一下換人。",
   botWelcome: "傳送訊息，讓它在自己的電腦上完成任務。", remembered: "已記住", remember: "記住", working: "{name} 正在工作…",
   copyCode: "複製程式碼", copiedCode: "已複製", copyMessage: "複製", copiedMessage: "已複製",
+  replyToThis: "回覆這個", replyingTo: "回覆 {name}", cancelReply: "取消回覆", you: "你",
   anotherConversationQueued: "另一則對話正在執行，這則會排隊。",
   workingStep: "{name} 正在工作… {step}", queuedMessages: "還有 {count} 則訊息排隊中",
   pausedUserControl: "你正在操控畫面，{name} 已暫停。完成後按「釋放控制」，它會從目前畫面接著做（排隊中的訊息也會一起處理）。",
diff --git a/apps/web/src/markdown.tsx b/apps/web/src/markdown.tsx
index 3d0270c..e9768ef 100644
--- a/apps/web/src/markdown.tsx
+++ b/apps/web/src/markdown.tsx
@@ -1,8 +1,9 @@
-import { memo, useCallback, useRef, useState, type ComponentPropsWithoutRef } from "react";
+import { Children, cloneElement, createElement, isValidElement, memo, useCallback, useMemo, useRef, useState, type ComponentPropsWithoutRef, type ReactNode } from "react";
 import ReactMarkdown, { type Components } from "react-markdown";
 import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
 import { t } from "./i18n";
+import { mentionSpans, type MentionAgent } from "./mentions";
 import "./markdown.css";
 
 const protocolPattern = /^([a-z][a-z\d+.-]*):/i;
@@ -44,7 +45,7 @@ function useCopiedFlag() {
   return {copied, markCopied};
 }
 
-function copyText(text: string): Promise<boolean> {
+export function copyText(text: string): Promise<boolean> {
   if (!navigator.clipboard) return Promise.resolve(false);
   return navigator.clipboard.writeText(text).then(() => true).catch(() => false);
 }
@@ -94,11 +95,88 @@ export function CopyMessageButton({text}:{text:string}) {
   );
 }
 
-export const ChatMarkdown = memo(function ChatMarkdown({children}:{children:string}) {
+export function MentionText({
+  text,
+  agents,
+  onMention,
+}:{
+  text:string;
+  agents:MentionAgent[];
+  onMention?:(id:string)=>void;
+}) {
+  const spans=mentionSpans(text,agents);
+  if(!spans.length)return null;
+  if(spans.length===1&&spans[0].kind==="text")return text;
+  return <>{spans.map((span,index)=>{
+    if(span.kind==="text")return <span key={index}>{span.text}</span>;
+    if(span.kind==="everyone")return <span key={index} className="mention-link is-everyone">{span.text}</span>;
+    const name=span.text.slice(1);
+    return <button
+      key={index}
+      type="button"
+      className="mention-link"
+      title={t("openAgentChat",{name})}
+      aria-label={t("openAgentChat",{name})}
+      onClick={event=>{event.preventDefault();event.stopPropagation();onMention?.(span.id);}}
+    >{span.text}</button>;
+  })}</>;
+}
+
+const SKIP_TAGS=new Set(["code","pre","a"]);
+
+function linkifyMentions(node:ReactNode,agents:MentionAgent[],onMention?:(id:string)=>void):ReactNode {
+  if(node==null||typeof node==="boolean")return node;
+  if(typeof node==="number")return node;
+  if(typeof node==="string")return <MentionText text={node} agents={agents} onMention={onMention}/>;
+  if(Array.isArray(node))return Children.map(node,child=>linkifyMentions(child,agents,onMention));
+  if(isValidElement(node)){
+    if(typeof node.type!=="string")return node;
+    if(SKIP_TAGS.has(node.type))return node;
+    const kids=(node.props as {children?:ReactNode}).children;
+    if(kids==null)return node;
+    return cloneElement(node,undefined,linkifyMentions(kids,agents,onMention));
+  }
+  return node;
+}
+
+function mentionComponents(agents:MentionAgent[],onMention?:(id:string)=>void):Components {
+  const wrap=(tag:"p"|"li"|"td"|"th"|"h1"|"h2"|"h3"|"h4"|"h5"|"h6"|"blockquote")=>
+    function MentionTag({node:_node,children,...props}:{node?:unknown;children?:ReactNode}){
+      return createElement(tag,props,linkifyMentions(children,agents,onMention));
+    };
+  return {
+    ...components,
+    p:wrap("p"),
+    li:wrap("li"),
+    td:wrap("td"),
+    th:wrap("th"),
+    h1:wrap("h1"),
+    h2:wrap("h2"),
+    h3:wrap("h3"),
+    h4:wrap("h4"),
+    h5:wrap("h5"),
+    h6:wrap("h6"),
+    blockquote:wrap("blockquote"),
+  };
+}
+
+export const ChatMarkdown = memo(function ChatMarkdown({
+  children,
+  agents=[],
+  onMention,
+}:{
+  children:string;
+  agents?:MentionAgent[];
+  onMention?:(id:string)=>void;
+}) {
+  const mdComponents=useMemo(
+    ()=>agents.length?mentionComponents(agents,onMention):components,
+    [agents,onMention],
+  );
   return (
     <div className="md-body">
       <ReactMarkdown
-        components={components}
+        components={mdComponents}
         remarkPlugins={[remarkGfm, remarkBreaks]}
         skipHtml
         urlTransform={(url) => sanitizeMarkdownUrl(url) ?? ""}
diff --git a/apps/web/src/mentions.ts b/apps/web/src/mentions.ts
index 6e3dc16..f309f42 100644
--- a/apps/web/src/mentions.ts
+++ b/apps/web/src/mentions.ts
@@ -54,3 +54,107 @@ export function acceptMention(
   const inserted = `${head}@${name} `;
   return { text: inserted + text.slice(end), caret: inserted.length };
 }
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/**
+ * Put `@name` at the front of a reply so the room routes it, without doubling
+ * a mention that is already in the draft.
+ */
+export function ensureMention(text: string, name: string): string {
+  const token = `@${name.trim()}`;
+  if (token === "@") return text;
+  if (new RegExp(`(?:^|\\s)${escapeRegExp(token)}(?=\\s|$)`).test(text)) return text;
+  const trimmed = text.trimStart();
+  return trimmed ? `${token} ${trimmed}` : `${token} `;
+}
+
+/** One line for a reply preview or quote chip. */
+export function replySnippet(body: string, max = 80): string {
+  const text = body.trim().replace(/\s+/g, " ");
+  if (!text) return "";
+  return text.length <= max ? text : `${text.slice(0, Math.max(1, max - 1))}…`;
+}
+
+/** Same spellings the server treats as “the whole room”. */
+export const EVERYONE_KEYWORDS = ["所有人", "全部", "all", "everyone", "everybody"] as const;
+
+export type MentionAgent = { id: string; name: string };
+export type MentionSpan =
+  | { kind: "text"; text: string }
+  | { kind: "agent"; text: string; id: string }
+  | { kind: "everyone"; text: string };
+
+/**
+ * Does `tail` open with `name`? ASCII names need a word boundary after them so
+ * `@Ali` cannot pick "Alice"; CJK names run together, so the longest match is
+ * already the boundary.
+ */
+export function nameHit(tail: string, name: string): boolean {
+  const lowered = tail.toLowerCase();
+  const needle = name.trim().toLowerCase();
+  if (!needle || !lowered.startsWith(needle)) return false;
+  const needleChars = Array.from(needle);
+  const last = needleChars[needleChars.length - 1];
+  if (!/^[0-9a-z]$/i.test(last)) return true;
+  const next = Array.from(lowered)[needleChars.length];
+  if (next === undefined) return true;
+  return !/^[0-9a-z_-]$/i.test(next);
+}
+
+function isWordChar(ch: string): boolean {
+  return /\p{L}|\p{N}/u.test(ch);
+}
+
+/**
+ * Split a message into plain text and `@name` runs so the chat can link a
+ * mention to that agent’s own conversation. Longest name wins; `mail@x.com`
+ * is not a mention.
+ */
+function charsOf(value: string): string[] {
+  return Array.from(value);
+}
+
+export function mentionSpans(text: string, agents: MentionAgent[]): MentionSpan[] {
+  if (!text) return [];
+  if (!agents.length) return [{ kind: "text", text }];
+  const ranked = agents
+    .filter((agent) => agent.name.trim())
+    .sort((a, b) => charsOf(b.name.trim()).length - charsOf(a.name.trim()).length);
+  const chars = charsOf(text);
+  const spans: MentionSpan[] = [];
+  let buffer = "";
+  const flush = () => {
+    if (!buffer) return;
+    spans.push({ kind: "text", text: buffer });
+    buffer = "";
+  };
+  for (let index = 0; index < chars.length; ) {
+    const ch = chars[index];
+    if (ch === "@" && (index === 0 || !isWordChar(chars[index - 1]))) {
+      const tail = chars.slice(index + 1).join("");
+      const everyone = EVERYONE_KEYWORDS.find((word) => nameHit(tail, word));
+      if (everyone) {
+        const length = charsOf(everyone).length;
+        flush();
+        spans.push({ kind: "everyone", text: `@${chars.slice(index + 1, index + 1 + length).join("")}` });
+        index += 1 + length;
+        continue;
+      }
+      const agent = ranked.find((item) => nameHit(tail, item.name));
+      if (agent) {
+        const length = charsOf(agent.name.trim()).length;
+        flush();
+        spans.push({ kind: "agent", text: `@${chars.slice(index + 1, index + 1 + length).join("")}`, id: agent.id });
+        index += 1 + length;
+        continue;
+      }
+    }
+    buffer += ch;
+    index += 1;
+  }
+  flush();
+  return spans;
+}
diff --git a/apps/web/src/refinements.css b/apps/web/src/refinements.css
index c8bad2e..12b2b80 100644
--- a/apps/web/src/refinements.css
+++ b/apps/web/src/refinements.css
@@ -471,16 +471,7 @@
 .pause-banner .primary{flex:0 0 auto;white-space:nowrap}
 
 
-.remember-msg{position:absolute;top:8px;right:4px;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
-
-
-.remember-msg svg{width:14px;height:14px}
-
-
-.remember-msg:hover:not(:disabled){background:rgba(255,255,255,.07);color:var(--ink)}
-
-
-.remember-msg.saved,.remember-msg:disabled{color:var(--accent);opacity:.9;cursor:default}
+.remember-msg{display:none}
 
 
 .panel-open-btn{display:none}
diff --git a/apps/web/src/responsive.css b/apps/web/src/responsive.css
index fcf6e88..e7ac30f 100644
--- a/apps/web/src/responsive.css
+++ b/apps/web/src/responsive.css
@@ -2,7 +2,7 @@
 @media(max-width:700px){.app-shell{display:block}.sidebar{position:fixed;z-index:40;inset:0 auto 0 0;width:min(300px,88vw);transform:translateX(-105%);transition:.2s;box-shadow:20px 0 60px #000}.sidebar.open{transform:none}.chat-panel{height:100%}.mobile-menu{display:inline-flex}.topbar{padding:0 12px}.messages{padding:24px 18px 16px}.composer{left:12px;right:12px}.computer-overlay>header{height:auto;min-height:64px;flex-wrap:wrap;padding:10px}.computer-overlay>header>div:last-child{flex-wrap:wrap;justify-content:flex-end}.overlay-screen{padding:8px}.mode-grid{grid-template-columns:1fr}}
 @media(max-width:1200px){.app-shell{grid-template-columns:230px minmax(0,1fr) 330px}}
 @media(max-width:1050px){.app-shell{grid-template-columns:250px minmax(0,1fr)}}
-@media(max-width:700px){.chat-panel{--chat-gutter:18px}.app-shell{display:block}.message{width:100%}.day-divider{width:100%}.message>span,.message>.message-body,.message-stack{max-width:90%}.composer-dock{padding:20px var(--chat-gutter) 16px}.composer{width:var(--chat-col);min-height:60px}.composer-files{padding:2px 4px 8px 8px}.file-card{max-width:100%;height:52px}.file-card-remove{flex-basis:32px;width:32px;height:32px}.message.with-files .msg-attachments{max-width:100%}.messages{padding-bottom:16px}}
+@media(max-width:700px){.chat-panel{--chat-gutter:18px}.app-shell{display:block}.message{width:100%}.day-divider{width:100%}.message>span,.message>.message-body,.message-stack{max-width:90%}.composer-dock{padding:20px var(--chat-gutter) 16px}.composer{width:var(--chat-col);min-height:60px}.composer-files{padding:2px 4px 8px 8px}.composer-reply{margin:2px 0 4px;padding-left:12px}.file-card{max-width:100%;height:52px}.file-card-remove{flex-basis:32px;width:32px;height:32px}.message.with-files .msg-attachments{max-width:100%}.messages{padding-bottom:16px}.context-menu{width:min(220px,calc(100vw - 24px))}.context-menu button{height:44px}}
 @media(prefers-reduced-motion:reduce){.avatar.blobatar.thinking:before,.avatar.blobatar.thinking:after,.thinking-dots i{animation:none!important}}
 @media(max-width:1200px){.app-shell.right-open{grid-template-columns:230px minmax(0,1fr) 340px}.app-shell.right-collapsed{grid-template-columns:230px minmax(0,1fr) 52px}}
 @media(max-width:1050px){
diff --git a/crates/api/src/attachments.rs b/crates/api/src/attachments.rs
index 5bdf4b0..4a75e3a 100644
--- a/crates/api/src/attachments.rs
+++ b/crates/api/src/attachments.rs
@@ -148,6 +148,31 @@ pub async fn stage_for_bots(
     Ok(())
 }
 
+fn extra_prompt_notes(blocks: &[Value], file_count: usize) -> Vec<String> {
+    let mut notes = Vec::new();
+    for block in blocks {
+        if block.get("kind").and_then(Value::as_str) != Some("reply") {
+            continue;
+        }
+        let name = block.get("name").and_then(Value::as_str).unwrap_or("");
+        let body = block.get("body").and_then(Value::as_str).unwrap_or("");
+        if name.is_empty() && body.is_empty() {
+            continue;
+        }
+        notes.push(if name.is_empty() {
+            format!("The user is replying to: {body}")
+        } else {
+            format!("The user is replying to {name}: {body}")
+        });
+    }
+    if file_count > 0 {
+        notes.push(format!(
+            "User attached {file_count} file(s). Chat history does not keep the bytes. Copies live in inbox/ on this computer and expire after 2 hours."
+        ));
+    }
+    notes
+}
+
 pub async fn llm_parts(
     state: &AppState,
     actor: &Actor,
@@ -156,17 +181,11 @@ pub async fn llm_parts(
     vision: bool,
 ) -> Vec<UserContent> {
     let files = load_from_blocks(state, actor, bot_id, blocks).await;
-    if files.is_empty() && blocks.is_empty() {
+    let mut notes = extra_prompt_notes(blocks, files.len());
+    if files.is_empty() && notes.is_empty() {
         return Vec::new();
     }
     let mut parts = Vec::new();
-    let mut notes = Vec::new();
-    if !blocks.is_empty() {
-        notes.push(format!(
-            "User attached {} file(s). Chat history does not keep the bytes. Copies live in inbox/ on this computer and expire after 2 hours.",
-            blocks.len()
-        ));
-    }
     for (stored, bytes) in files {
         notes.push(format!(
             "- {} ({}, {} bytes) at {}",
@@ -507,6 +526,17 @@ mod tests {
         assert!(!allowed_mime("application/x-msdownload"));
     }
 
+    #[test]
+    fn reply_blocks_are_not_counted_as_files() {
+        let reply = json!({"kind":"reply","name":"阿狗","body":"在這等你"});
+        let notes = extra_prompt_notes(&[reply], 0);
+        assert_eq!(notes, vec!["The user is replying to 阿狗: 在這等你".to_string()]);
+        assert!(extra_prompt_notes(&[json!({"kind":"login","site":"x"})], 0).is_empty());
+        let mixed = extra_prompt_notes(&[json!({"kind":"reply","name":"小美","body":"hi"})], 2);
+        assert!(mixed[0].contains("小美"));
+        assert!(mixed[1].contains("2 file(s)"));
+    }
+
     #[test]
     fn stored_blocks_drop_bytes() {
         let files = [DecodedAttachment {
diff --git a/tests/frontend.test.mjs b/tests/frontend.test.mjs
index 9b51080..d85a486 100644
--- a/tests/frontend.test.mjs
+++ b/tests/frontend.test.mjs
@@ -44,10 +44,11 @@ test('VNC paste delegates once to confirmed backend and rejects another source',
 
 const mdJs=ts.transpileModule(fs.readFileSync('apps/web/src/markdown.tsx','utf8'),{compilerOptions:{module:ts.ModuleKind.CommonJS,jsx:ts.JsxEmit.ReactJSX}}).outputText;
 const mdBox={exports:{},require:(name)=>{
- if(name==='react')return{useCallback:fn=>fn,useRef:()=>({current:null}),useState:()=>[false,()=>{}],memo:fn=>fn};
+ if(name==='react')return{useCallback:fn=>fn,useRef:()=>({current:null}),useState:()=>[false,()=>{}],useMemo:fn=>fn(),memo:fn=>fn,Children:{map:(n,fn)=>n},cloneElement:el=>el,isValidElement:()=>false};
  if(name==='react/jsx-runtime')return{jsx:()=>null,jsxs:()=>null,Fragment:'Fragment'};
  if(name==='react-markdown'||name==='remark-gfm'||name==='remark-breaks')return{default:()=>null};
  if(name==='./i18n')return{t:key=>key};
+ if(name==='./mentions')return{mentionSpans:()=>[]};
  if(name.endsWith('.css'))return{};
  throw new Error('unexpected import '+name);
 }};
@@ -367,6 +368,20 @@ test('trail lines read as sentences with the detail a stuck run needs',()=>{
  assert.match(trailText({id:9,kind:'notice',createdAt:'',text:'這輪不需要電腦'}),/這輪不需要電腦/);
 });
 
+test('chat messages use a copy-or-reply menu instead of inline run details',()=>{
+  const app=fs.readFileSync('apps/web/src/App.tsx','utf8');
+  assert.match(app,/function MessageContextMenu/);
+  assert.match(app,/t\("replyToThis"\)/);
+  assert.match(app,/t\("copyMessage"\)/);
+  assert.match(app,/\{\.\.\.messagePress\(message\)\}/);
+  assert.match(app,/if\(message\.role==="user"\)return/);
+  assert.match(app,/canReply=context\.message\.role!=="user"/);
+  assert.match(app,/kind:"reply"/);
+  assert.doesNotMatch(app,/CopyMessageButton/);
+  assert.doesNotMatch(app,/remember-msg/);
+  assert.doesNotMatch(app,/className="route-note"/);
+});
+
 test('the bubble reads the run activity endpoint the API actually mounts',()=>{
  const monitor=fs.readFileSync('crates/api/src/monitor.rs','utf8');
  assert.match(monitor,/\.route\("\/api\/runs\/\{id\}\/activity", get\(activity\)\)/);
@@ -376,7 +391,9 @@ test('the bubble reads the run activity endpoint the API actually mounts',()=>{
  assert.match(app,/errorActions\(chip\.code\)/);
  assert.match(app,/`\/api\/runs\/\$\{runId\}\/retry`,\{method:"POST",body:"\{\}"\}/);
  assert.match(app,/<RunProbe runId=\{chip\.runId\|\|null\} align="end" label=\{t\("errorDetails"\)\}/);
- assert.match(app,/<RunProbe runId=\{member\.id===computer\.botId\?computer\.busyRunId:null\}><Avatar/);
+ assert.match(app,/<RunProbe runId=\{computer\.busyRunId\|\|computer\.waitingRunId\}>/);
+ assert.doesNotMatch(app,/message-run-details/);
+ assert.match(app,/className="thinking-row"/);
  const probe=fs.readFileSync('apps/web/src/run-monitor.tsx','utf8');
  assert.match(probe,/`\/api\/runs\/\$\{runId\}\/activity\$\{after\}`/);
  assert.doesNotMatch(probe,/export function RunStatus/);
@@ -629,7 +646,7 @@ for(const hostUpdatesDuringReconnect of [false,true])test(`reconnect preserves s
 const mentionsJs=ts.transpileModule(fs.readFileSync('apps/web/src/mentions.ts','utf8'),{compilerOptions:{module:ts.ModuleKind.CommonJS}}).outputText;
 const mentionsBox={exports:{},require:()=>{throw new Error('unexpected import')}};
 vm.runInNewContext(mentionsJs,mentionsBox);
-const {mentionToken,mentionChoices,acceptMention}=mentionsBox.exports;
+const {mentionToken,mentionChoices,acceptMention,ensureMention,replySnippet,mentionSpans,nameHit}=mentionsBox.exports;
 const EVERYONE='所有人';
 const roster=[{id:'b1',name:'小美'},{id:'b2',name:'Alex'},{id:'b3',name:'Alexa'},{id:'b4',name:'工程小助手'}];
 // The list is built inside a vm, so its arrays are not this realm's arrays:
@@ -676,6 +693,40 @@ test('accepting a mention leaves the sentence readable and the list closed',()=>
   assert.equal(acceptMention('@小',2,'小美').text,'@小美 ','a half-typed name is replaced whole');
 });
 
+test('replying to a room message names the speaker once',()=>{
+  assert.equal(ensureMention('','小美'),'@小美 ');
+  assert.equal(ensureMention('看一下這個','小美'),'@小美 看一下這個');
+  assert.equal(ensureMention('@小美 已經點名','小美'),'@小美 已經點名','an existing mention is left alone');
+  assert.equal(ensureMention('請 @小美 幫忙','小美'),'請 @小美 幫忙','a mention later in the sentence also counts');
+  assert.equal(ensureMention('  前面有空白','Alex'),'@Alex 前面有空白');
+  assert.equal(ensureMention('',''),'');
+  assert.equal(replySnippet('沒拚嘛，在這等你聊天～有事直接說就好。'),'沒拚嘛，在這等你聊天～有事直接說就好。');
+  assert.equal(replySnippet('one\n\ntwo   three'),'one two three');
+  const long='字'.repeat(90);
+  assert.equal(replySnippet(long).length,80);
+  assert.ok(replySnippet(long).endsWith('…'));
+});
+
+test('group @mentions become agent spans and ignore emails',()=>{
+  const room=[{id:'b',name:'小美'},{id:'a',name:'阿明'},{id:'c',name:'Dev'}];
+  const kinds=(text)=>mentionSpans(text,room).map(span=>span.kind==='agent'?`${span.kind}:${span.id}`:`${span.kind}:${span.text}`).join('|');
+  assert.equal(kinds('@小美 幫我看這份報表'),'agent:b|text: 幫我看這份報表');
+  assert.equal(kinds('@阿明哥 來一下'),'agent:a|text:哥 來一下','a CJK name has no word boundary, so 阿明 matches inside 阿明哥 when that longer member is absent');
+  const overlap=[{id:'a',name:'阿明'},{id:'b',name:'阿明哥'}];
+  assert.equal(mentionSpans('@阿明哥 來一下',overlap)[0].id,'b');
+  assert.equal(mentionSpans('@阿明 來一下',overlap)[0].id,'a');
+  assert.equal(kinds('@dev 幫我看'),'agent:c|text: 幫我看');
+  assert.equal(kinds('@Dev, help'),'agent:c|text:, help');
+  assert.equal(kinds('@Developer 幫我看'),'text:@Developer 幫我看');
+  assert.equal(kinds('寄到 mail@小美 或 report@dev.example 就好'),'text:寄到 mail@小美 或 report@dev.example 就好');
+  assert.equal(kinds('（@小美）'),'text:（|agent:b|text:）');
+  assert.equal(mentionSpans('@所有人 結論定了',room)[0].kind,'everyone');
+  assert.equal(mentionSpans('@everyone look',room)[0].kind,'everyone');
+  assert.ok(nameHit('小美 幫我','小美'));
+  assert.equal(mentionSpans('@allison 來了',room)[0].kind,'text');
+  assert.equal(mentionSpans('@小美 幫我看',[])[0].kind,'text','one-to-one chats do not link mentions');
+});
+
 // When a message was said is split the way chat apps split it: the day once,
 // as a divider, and the clock time on each message. The words for today and
 // yesterday come from the catalog; everything else is the locale's own spelling.