tavern-harness 0.1.13 → 0.1.14

package/src/components/ChatView.tsx

@@ -1,4 +1,4 @@
-import { Fragment, lazy, Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { Fragment, lazy, Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode, type UIEvent } from 'react';
 import { useStore } from '../store/store';
 import { type ChatMessage, type ChatParticipant, type ChatSession, type ContextCompression, type ToolCallRecord, displayModelName } from '../types/models';
 import { Avatar, Icon, Markdown, Collapse, Modal, AttachCard } from './shared';
@@ -12,7 +12,7 @@ import { escapeRegExp, prettyJson, trimEdgeNewlines } from '../core/strings';
 import { copyText } from '../core/clipboard';
 import { clearTextSelection, shouldSuppressContextMenuWhileTyping, useTouchLongPress } from '../core/longPress';
 import { fixedViewportPoint } from '../core/viewport';
-import { keepStickyBottom } from '../core/stickyBottom';
+import { keepStickyBottom, isNearBottom } from '../core/stickyBottom';
 import { PopoverMenu } from './PopoverMenu';
 
 const CharacterBookEditor = lazy(() => import('./CharacterBookEditor'));
@@ -90,15 +90,29 @@ export function ChatView({
   participants,
   compressions,
   streaming,
+  active = true,
 }: {
   session: ChatSession;
   messages: ChatMessage[];
   participants: ChatParticipant[];
   compressions: ContextCompression[];
   streaming: boolean;
+  /** 是否为当前显示的 Tab。切走的 Tab 不显示（display:none 或 content-visibility:hidden）。 */
+  active?: boolean;
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
+  const chatColumnRef = useRef<HTMLDivElement>(null);
+  const streamingScrollFrameRef = useRef<number | null>(null);
+  const streamingScrollTargetRef = useRef(0);
+  const streamingProgrammaticScrollTopRef = useRef<number | null>(null);
+  const followStreamingRef = useRef(true);
+  const suspendStickyScrollRef = useRef(false);
   const positionedSessionRef = useRef<{ id: number | undefined; messageCount: number } | null>(null);
+  const scrollMemory = useRef<{ sessionId: number | undefined; top: number; atBottom: boolean }>({
+    sessionId: undefined,
+    top: 0,
+    atBottom: true,
+  });
   const updateStreaming = useStore((s) => s.streaming.sessionId === session.id);
   const t = useT();
   const compressionsByEndMessageId = useMemo(
@@ -115,6 +129,7 @@ export function ChatView({
 
   // 进入或切换会话时直接定位到最新消息，不播放滚动动画。
   useLayoutEffect(() => {
+    if (!active) return;
     const el = scrollRef.current;
     if (!el) return;
     const positioned = positionedSessionRef.current;
@@ -123,22 +138,96 @@ export function ChatView({
     if (!enteringSession && !historyJustLoaded) return;
     el.scrollTop = el.scrollHeight;
     positionedSessionRef.current = { id: session.id, messageCount: messages.length };
-  }, [session.id, messages.length]);
+  }, [active, session.id, messages.length]);
+
+  useLayoutEffect(() => {
+    if (!active) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    const memory = scrollMemory.current;
+    // 记下的位置属于另一个会话（切 Tab 的同时也切换了会话）：直接贴底。
+    if (memory.sessionId !== session.id) {
+      el.scrollTop = el.scrollHeight;
+      return;
+    }
+    el.scrollTop = memory.atBottom ? el.scrollHeight : memory.top;
+  }, [active, session.id]);
 
-  // 自动滚动到底（新消息 / 流式更新时）：群聊流式生成时同样跟随最新内容
+  // 自动滚动到底（新消息 / 流式更新时）：群聊流式生成时同样跟随最新内容。
+  // 将 token 的高频更新合并至一个 requestAnimationFrame，并插值追赶最新底部位置。
+  // 不反复重启浏览器的 smooth 动画，滚动可以保持连续。
   const isGroup = session.mode === 'GROUP';
-  useEffect(() => {
+  useEffect(() => () => {
+    if (streamingScrollFrameRef.current != null) cancelAnimationFrame(streamingScrollFrameRef.current);
+    if (chatColumnRef.current) chatColumnRef.current.style.paddingBottom = '';
+  }, []);
+  useLayoutEffect(() => {
+    if (updateStreaming) return;
+    if (streamingScrollFrameRef.current != null) cancelAnimationFrame(streamingScrollFrameRef.current);
+    streamingScrollFrameRef.current = null;
+    if (chatColumnRef.current) chatColumnRef.current.style.paddingBottom = '';
+  }, [updateStreaming]);
+  useLayoutEffect(() => {
+    if (!active) return;
     const el = scrollRef.current;
     if (!el) return;
     if (positionedSessionRef.current?.id !== session.id) return;
     const selection = document.getSelection();
     if (selection && !selection.isCollapsed) return;
-    const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 60;
+    const nearBottom = isNearBottom(el.scrollHeight, el.scrollTop, el.clientHeight);
+    if (!updateStreaming) followStreamingRef.current = true;
+    if (updateStreaming && !followStreamingRef.current) return;
     // 群聊：仅在已处于底部或正在流式生成时自动吸附（流式画布增长时继续跟随），
-    // 用户主动向上回看时不打断
+    // 用户主动向上回看时不打断。
     if (!isGroup || nearBottom || updateStreaming) {
-      el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+      if (!updateStreaming) {
+        el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+        return;
+      }
+      streamingScrollTargetRef.current = el.scrollHeight;
+      if (streamingScrollFrameRef.current != null) return;
+      const followStreamingBottom = () => {
+        const container = scrollRef.current;
+        if (!container || !followStreamingRef.current) {
+          streamingScrollFrameRef.current = null;
+          return;
+        }
+        // iOS 等浏览器的键盘只会压缩 visualViewport，聊天容器的 clientHeight
+        // 仍可能包含被键盘覆盖的区域。以可见视口底部作为滚动终点，确保思考卡片
+        // 完整露在输入框和键盘上方。
+        streamingScrollTargetRef.current = Math.max(streamingScrollTargetRef.current, container.scrollHeight);
+        const viewport = window.visualViewport;
+        const containerTop = container.getBoundingClientRect().top;
+        const visibleHeight = Math.min(
+          container.clientHeight,
+          Math.max(0, (viewport?.height ?? window.innerHeight) - containerTop),
+        );
+        const keyboardCoveredHeight = Math.max(0, container.clientHeight - visibleHeight);
+        // 为视觉视口被键盘遮住的部分追加底部空间。这样浏览器的原生滚动上限
+        // 也能让思考气泡越过输入框，而不是把目标位置夹回旧的底部。
+        const column = chatColumnRef.current;
+        if (column) column.style.paddingBottom = `${keyboardCoveredHeight + 8}px`;
+        const target = Math.min(
+          Math.max(0, container.scrollHeight - container.clientHeight),
+          Math.max(0, streamingScrollTargetRef.current - visibleHeight + 8),
+        );
+        const distance = target - container.scrollTop;
+        if (Math.abs(distance) < 0.5) {
+          streamingProgrammaticScrollTopRef.current = target;
+          container.scrollTop = target;
+          streamingScrollFrameRef.current = requestAnimationFrame(followStreamingBottom);
+          return;
+        }
+        // 思考内容增长时加快追赶速度，避免平滑动画长期落后于卡片底部。
+        const step = Math.sign(distance) * Math.max(2, Math.abs(distance) * 0.45);
+        const nextTop = container.scrollTop + (Math.abs(step) >= Math.abs(distance) ? distance : step);
+        streamingProgrammaticScrollTopRef.current = nextTop;
+        container.scrollTop = nextTop;
+        streamingScrollFrameRef.current = requestAnimationFrame(followStreamingBottom);
+      };
+      streamingScrollFrameRef.current = requestAnimationFrame(followStreamingBottom);
     }
+    // 恢复由上方 layout effect 处理。
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messages.length, updateStreaming, messages[messages.length - 1]?.content.length, isGroup]);
 
@@ -147,7 +236,36 @@ export function ChatView({
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
-    return keepStickyBottom(el);
+    return keepStickyBottom(el, undefined, () => suspendStickyScrollRef.current);
+  }, []);
+
+  // 任意通用弹窗内的编辑控件都会触发软键盘；后台聊天列表在此期间保持位置。
+  // 焦点进入时立即冻结，失焦并等待键盘收起动画结束后再恢复。
+  useEffect(() => {
+    let resumeTimer = 0;
+    const isModalEditor = (target: EventTarget | null) =>
+      target instanceof HTMLElement
+      && target.matches('input, textarea, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]')
+      && target.closest('.modal-root') != null;
+    const onFocusIn = (event: FocusEvent) => {
+      if (!isModalEditor(event.target)) return;
+      window.clearTimeout(resumeTimer);
+      suspendStickyScrollRef.current = true;
+    };
+    const onFocusOut = (event: FocusEvent) => {
+      if (!isModalEditor(event.target)) return;
+      window.clearTimeout(resumeTimer);
+      resumeTimer = window.setTimeout(() => {
+        suspendStickyScrollRef.current = false;
+      }, 350);
+    };
+    document.addEventListener('focusin', onFocusIn, true);
+    document.addEventListener('focusout', onFocusOut, true);
+    return () => {
+      window.clearTimeout(resumeTimer);
+      document.removeEventListener('focusin', onFocusIn, true);
+      document.removeEventListener('focusout', onFocusOut, true);
+    };
   }, []);
 
   const npcId = session.associatedId;
@@ -184,9 +302,39 @@ export function ChatView({
     return ids;
   }, [messages]);
 
+  const handleScroll = (event: UIEvent<HTMLDivElement>) => {
+    const el = event.currentTarget;
+    // 隐藏过程中浏览器会把滚动位置夹到 0 并派发一次 scroll 事件，
+    // 那不是用户的滚动意图，不能覆盖掉记下的位置。
+    if (!active || el.clientHeight === 0) return;
+    const atBottom = isNearBottom(el.scrollHeight, el.scrollTop, el.clientHeight);
+    if (updateStreaming && followStreamingRef.current) {
+      const programmaticTop = streamingProgrammaticScrollTopRef.current;
+      // 仅忽略刚刚由自动跟随写入的位置；其它滚动事件都来自用户，应立刻停止跟随。
+      if (programmaticTop != null && Math.abs(el.scrollTop - programmaticTop) <= 2) {
+        streamingProgrammaticScrollTopRef.current = null;
+      }
+    }
+    scrollMemory.current = {
+      sessionId: session.id,
+      top: el.scrollTop,
+      atBottom,
+    };
+    onChatScroll();
+  };
+
   return (
-    <div className="chat-scroll" ref={scrollRef} onScroll={onChatScroll}>
-      <div className="chat-col">
+    <div
+      className="chat-scroll"
+      ref={scrollRef}
+      onScroll={handleScroll}
+      onWheel={() => { if (updateStreaming) followStreamingRef.current = false; }}
+      onTouchStart={() => { if (updateStreaming) followStreamingRef.current = false; }}
+      onPointerDown={(event) => {
+        if (updateStreaming && event.pointerType === 'mouse') followStreamingRef.current = false;
+      }}
+    >
+      <div className="chat-col" ref={chatColumnRef}>
         {messages.length === 0 && (
           <div className="empty-state fade-up">
             <div className="big">🫖</div>
@@ -316,20 +464,6 @@ function MessageBubble({
     }
   }, [msg.toolCallsJson]);
 
-  // ---- 内联编辑状态（右键菜单 → 编辑消息，直接在气泡内编辑，不弹窗） ----
-  const [isEditing, setIsEditing] = useState(false);
-  useEffect(() => {
-    const fn = () => {
-      const isTarget = editingMsgState?.msgId === msg.id;
-      setIsEditing(isTarget);
-    };
-    editingMsgListeners.push(fn);
-    return () => {
-      editingMsgListeners = editingMsgListeners.filter((f) => f !== fn);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [msg.id]);
-
   const isUser = msg.role === 'user';
   const speaker = msg.speakerParticipantId != null
     ? participants.find((p) => p.participantId === msg.speakerParticipantId)
@@ -349,7 +483,7 @@ function MessageBubble({
   );
 
   if (isUser) {
-    return <UserBubble msg={msg} session={session} userPersonaName={userPersonaName} editing={isEditing} loopIndex={loopIndex} />;
+    return <UserBubble msg={msg} session={session} userPersonaName={userPersonaName} loopIndex={loopIndex} />;
   }
 
   // 用于「点击队列发言 → 对话定位」：NPC 用 participantId，玩家/未知用 null（定位到循环首条）
@@ -362,21 +496,6 @@ function MessageBubble({
       .map((p) => p.kind === 'PLAYER' ? 'User' : p.displayName)
     : [];
 
-  if (isEditing) {
-    return (
-      <div className="msg-row fade-up" data-loop={loopIndex ?? undefined} data-speaker={speakerKey ?? undefined}>
-        <Avatar name={speakerName} colorOrdinal={npcHue} imageUrl={npcAvatar} />
-        <div className="msg-body">
-          <div className="msg-head">
-            <span className="msg-name">{speakerName}</span>
-            <span className="msg-time">{fmtTime(msg.timestamp)}</span>
-          </div>
-          <BubbleEditor msg={msg} session={session} onDone={stopEditingMsg} />
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div
       className={`msg-row fade-up ${streaming ? 'streaming' : ''}`}
@@ -391,13 +510,14 @@ function MessageBubble({
           {msg.modelUsed && !msg.modelUsed.startsWith('scheduled:') && <span className="msg-model" title={msg.modelUsed}>{displayModelName(providers, msg.modelUsed)}</span>}
           <span className="msg-time">{fmtTime(msg.timestamp)}</span>
         </div>
-        {msg.thinkingContent && streaming && (
-          <Collapse title={t('chat.thinking')} icon="🧠" accent="think" preview={msg.thinkingContent} live>
-            <Markdown text={msg.thinkingContent} mathEnabled={false} />
-          </Collapse>
-        )}
-        {msg.thinkingContent && !streaming && (
-          <Collapse title={t('chat.thinking')} icon="🧠" accent="think" defaultOpen={false} preview={msg.thinkingContent}>
+        {msg.thinkingContent && (
+          <Collapse
+            title={t('chat.thinking')}
+            icon="🧠"
+            accent="think"
+            preview={msg.thinkingContent}
+            live={streaming && !displayContent}
+          >
             <Markdown text={msg.thinkingContent} mathEnabled={false} />
           </Collapse>
         )}
@@ -427,6 +547,9 @@ function MessageBubble({
             </div>
           </div>
         )}
+        {msg.interrupted && !streaming && (
+          <div className="msg-metrics">{t('chat.interrupted')}</div>
+        )}
         {(msg.latencyMs != null || msg.promptTokens > 0 || msg.completionTokens > 0) && !streaming && (
           <div className="msg-metrics">{formatMetrics(msg)}</div>
         )}
@@ -435,8 +558,8 @@ function MessageBubble({
   );
 }
 
-/** 气泡内联编辑器（替换弹窗编辑，支持管理附件） */
-function BubbleEditor({
+/** 统一消息编辑弹窗，集中处理虚拟键盘、滚动与安全区适配。 */
+function MessageEditorModal({
   msg,
   session,
   onDone,
@@ -486,69 +609,69 @@ function BubbleEditor({
   const primaryAction = isUserMsg ? doSave : doSaveOnly;
 
   return (
-    <div className="bubble-editor">
-      <textarea
-        className="textarea mono"
-        rows={Math.max(3, Math.min(12, text.split('\n').length))}
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        autoFocus
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-            e.preventDefault();
-            primaryAction();
-          }
-          if (e.key === 'Escape') {
-            e.preventDefault();
-            onDone();
-          }
-        }}
-      />
-      {/* 附件管理 */}
-      {attachments.length > 0 && (
-        <div className="attachments" style={{ marginBottom: 0 }}>
-          {attachments.map((a, i) => (
-            <AttachCard
-              key={i}
-              name={a.name}
-              onRemove={() => setAttachments(attachments.filter((_, j) => j !== i))}
-            />
-          ))}
-        </div>
-      )}
-      <div className="bubble-editor-actions">
-        <div className="bubble-editor-actions-start">
-          <input
-            ref={fileRef}
-            type="file"
-            accept="image/*,video/*"
-            multiple
-            hidden
-            onChange={(e) => {
-              const files = e.target.files;
-              if (files) {
-                Array.from(files).forEach((f) => readFileAsDataUrl(f).then((url) => setAttachments((prev) => [...prev, { dataUrl: url, name: f.name }])));
-              }
-              e.target.value = '';
-            }}
-          />
-          <button className="btn btn-sm" onClick={() => fileRef.current?.click()}>
-            <Icon name="image" size={12} /> {t('chat.addAttachment')}
-          </button>
-        </div>
-        <div className="bubble-editor-actions-end">
-          <span className="bubble-editor-hint">{t('chat.saveHint')}</span>
-          <button className="btn btn-sm" onClick={onDone}>{t('common.cancel')}</button>
-          <button className="btn btn-sm btn-primary" disabled={!text.trim() || streaming} onClick={primaryAction}>
-            {isUserMsg ? t('chat.saveRegenerate') : t('chat.saveOnly')}
-          </button>
-        </div>
+    <Modal onClose={onDone} size="wide" className="message-editor-modal">
+      <div className="modal-head">
+        <span>{t('chat.editMsg')}</span>
+        <button className="icon-btn" onClick={onDone} aria-label={t('common.close')}>×</button>
       </div>
-    </div>
+      <div className="modal-body message-editor-body">
+        <textarea
+          className="textarea message-editor-textarea"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+              e.preventDefault();
+              void primaryAction();
+            }
+            if (e.key === 'Escape') {
+              e.preventDefault();
+              onDone();
+            }
+          }}
+        />
+        {attachments.length > 0 && (
+          <div className="attachments message-editor-attachments">
+            {attachments.map((a, i) => (
+              <AttachCard
+                key={i}
+                name={a.name}
+                onRemove={() => setAttachments(attachments.filter((_, j) => j !== i))}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+      <div className="modal-foot message-editor-actions">
+        <input
+          ref={fileRef}
+          id={`message-editor-attachment-${msg.id}`}
+          type="file"
+          accept="image/*,video/*"
+          multiple
+          hidden
+          onChange={(e) => {
+            const files = e.target.files;
+            if (files) {
+              Array.from(files).forEach((f) => readFileAsDataUrl(f).then((url) => setAttachments((prev) => [...prev, { dataUrl: url, name: f.name }])));
+            }
+            e.target.value = '';
+          }}
+        />
+        <label className="btn btn-sm message-editor-attachment" htmlFor={`message-editor-attachment-${msg.id}`}>
+          <Icon name="image" size={12} /> {t('chat.addAttachment')}
+        </label>
+        <span className="message-editor-hint">{t('chat.saveHint')}</span>
+        <button className="btn btn-sm" onClick={onDone}>{t('common.cancel')}</button>
+        <button className="btn btn-sm btn-primary" disabled={!text.trim() || streaming} onClick={() => void primaryAction()}>
+          {isUserMsg ? t('chat.saveRegenerate') : t('chat.saveOnly')}
+        </button>
+      </div>
+    </Modal>
   );
 }
 
-function UserBubble({ msg, session, userPersonaName, editing, loopIndex }: { msg: ChatMessage; session: ChatSession; userPersonaName: string | null; editing?: boolean; loopIndex?: number | null }) {
+function UserBubble({ msg, session, userPersonaName, loopIndex }: { msg: ChatMessage; session: ChatSession; userPersonaName: string | null; loopIndex?: number | null }) {
   const t = useT();
   const participants = useStore((s) => (session.id != null ? (s.participants[session.id] ?? []) : []));
   const longPressProps = useMessageLongPress(msg, session);
@@ -570,22 +693,18 @@ function UserBubble({ msg, session, userPersonaName, editing, loopIndex }: { msg
           <span className="msg-time">{fmtTime(msg.timestamp)}</span>
           <span className="msg-name">{t('common.you')}</span>
         </div>
-        {editing ? (
-          <BubbleEditor msg={msg} session={session} onDone={stopEditingMsg} />
-        ) : (
-          <div className="bubble bubble-user">
-            {msg.attachments.length > 0 && (
-              <div className="attachments">
-                {msg.attachments.map((a, i) => (
-                  <AttachCard key={i} name={msg.attachmentInfos?.[i]?.displayName || attachmentName(a)} />
-                ))}
-              </div>
-            )}
-            <div className="bubble-text">
-              {msg.content && <Markdown text={displayUserPersonaPlaceholder(msg.content, userPersonaName)} mentionNames={mentionNames} />}
+        <div className="bubble bubble-user">
+          {msg.attachments.length > 0 && (
+            <div className="attachments">
+              {msg.attachments.map((a, i) => (
+                <AttachCard key={i} name={msg.attachmentInfos?.[i]?.displayName || attachmentName(a)} />
+              ))}
             </div>
+          )}
+          <div className="bubble-text">
+            {msg.content && <Markdown text={displayUserPersonaPlaceholder(msg.content, userPersonaName)} mentionNames={mentionNames} />}
           </div>
-        )}
+        </div>
       </div>
     </div>
   );
@@ -661,6 +780,7 @@ export function ChatInput({ sessionId }: { sessionId: number }) {
   const [showModels, setShowModels] = useState(false);
   const fileRef = useRef<HTMLInputElement>(null);
   const sendMessage = useStore((s) => s.sendMessage);
+  const addToast = useStore((s) => s.addToast);
   const streaming = useStore((s) => s.streaming.sessionId != null);
   const stopStreaming = useStore((s) => s.stopStreaming);
   const session = useStore((s) => s.sessions.find((x) => x.id === sessionId));
@@ -685,7 +805,13 @@ export function ChatInput({ sessionId }: { sessionId: number }) {
       sendingText,
       sendingAttachments.map((a) => a.dataUrl),
       sendingAttachments.map((a) => a.name)
-    ).finally(() => {
+    ).catch((error: unknown) => {
+      // 发送链路本身也可能失败（例如另一个浏览器持有了写锁）：不能静默丢掉
+      // 用户输入，恢复草稿并提示原因。
+      console.error('Failed to send message', error);
+      setText((current) => current || sendingText);
+      addToast(t('toast.genFailed', { msg: error instanceof Error ? error.message : String(error) }), 'error');
+    }).finally(() => {
       setTyping(false);
     });
   };
@@ -1128,17 +1254,15 @@ function closeMsgMenu() {
   notifyMsgMenu();
 }
 
-// ---- 内联编辑全局状态（编辑目标由 MessageBubble 监听） ----
-let editingMsgState: { msgId: number } | null = null;
-let editingMsgListeners: Array<() => void> = [];
-function startEditingMsg(msgId: number) {
-  editingMsgState = { msgId };
-  editingMsgListeners.forEach((fn) => fn());
+// ---- 消息编辑弹窗状态（由全局消息菜单打开） ----
+let editingMsgState: { msg: ChatMessage; session: ChatSession } | null = null;
+function startEditingMsg(msg: ChatMessage, session: ChatSession) {
+  editingMsgState = { msg, session };
   closeMsgMenu();
 }
 function stopEditingMsg() {
   editingMsgState = null;
-  editingMsgListeners.forEach((fn) => fn());
+  notifyMsgMenu();
 }
 
 export function MessageMenu() {
@@ -1151,6 +1275,7 @@ export function MessageMenu() {
   const npcs = useStore((s) => s.npcs);
   const [rawLog, setRawLog] = useState<{ data: RawLogData; title: string; filename: string } | null>(null);
   const [compressionSummary, setCompressionSummary] = useState<{ content: string; title: string } | null>(null);
+  const editingMessage = editingMsgState;
 
   useEffect(() => {
     const fn = () => force((n) => n + 1);
@@ -1160,6 +1285,10 @@ export function MessageMenu() {
     };
   }, []);
 
+  if (editingMessage) {
+    return <MessageEditorModal msg={editingMessage.msg} session={editingMessage.session} onDone={stopEditingMsg} />;
+  }
+
   // 原始日志弹窗（独立状态，优先于右键菜单）
   if (rawLog) {
     return (
@@ -1183,7 +1312,7 @@ export function MessageMenu() {
 
   if (compressionSummary) {
     return (
-      <Modal onClose={() => setCompressionSummary(null)} width="min(680px, calc(100vw - 40px))">
+      <Modal onClose={() => setCompressionSummary(null)} size="wide">
         <div className="modal-head">
           <span>{compressionSummary.title}</span>
           <button className="icon-btn" onClick={() => setCompressionSummary(null)} aria-label={t('common.close')}>×</button>
@@ -1221,7 +1350,7 @@ export function MessageMenu() {
       </PopoverMenu>
     );
   }
-  const { x, y, msg } = msgMenuState;
+  const { x, y, msg, session } = msgMenuState;
 
   const actions: Array<{ label: string; icon: string; onClick: () => void; danger?: boolean }> = [];
   if (msg.content.trim()) {
@@ -1241,7 +1370,7 @@ export function MessageMenu() {
       label: t('chat.editMsg'),
       icon: 'settings',
       onClick: () => {
-        startEditingMsg(msg.id!);
+        startEditingMsg(msg, session);
       },
     });
   }
@@ -1314,7 +1443,7 @@ function RawLogModal({ rawLog, title, onClose, onExport }: { rawLog: RawLogData;
   const [autoWrap, setAutoWrap] = useState(true);
 
   return (
-    <Modal onClose={onClose} className="raw-log-modal" width="min(760px, calc(100vw - 40px))">
+    <Modal onClose={onClose} size="wide" className="raw-log-modal">
       <div className="modal-head raw-modal-head">
         <span className="raw-modal-title">
           <Icon name="file" size={15} /> {title}

package/src/components/Dashboard.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import { createSession, useStore } from '../store/store';
 import { db } from '../db/database';
-import { Icon, MasonryGrid, SessionVisual } from './shared';
+import { Avatar, Icon, MasonryGrid, SessionVisual } from './shared';
 import { NewSessionMenu } from './NewSessionMenu';
 import { useT, currentLocale } from '../core/i18n';
+import { textPreview } from '../core/textPreview';
 import type { SessionMember } from './shared';
 import type { NpcCharacter } from '../types/models';
 
@@ -11,7 +12,7 @@ import type { NpcCharacter } from '../types/models';
 // 仪表盘（无活动会话时的起始页）
 // ============================================================
 
-export function Dashboard() {
+export const Dashboard = memo(function Dashboard() {
   const npcs = useStore((s) => s.npcs);
   const sessions = useStore((s) => s.sessions);
   const t = useT();
@@ -161,13 +162,16 @@ export function Dashboard() {
             {npcs.map((n) => (
               <div key={n.id} className="char-card">
                 <div className="cname">
-                  <span className="avatar xs" style={{ background: `linear-gradient(135deg, var(--grad-from), var(--grad-to))` }}>
-                    {n.name.slice(0, 1)}
-                  </span>
+                  <Avatar
+                    name={n.name}
+                    colorOrdinal={n.avatarColorOrdinal}
+                    imageUrl={n.avatarDataUrl}
+                    size="xs"
+                  />
                   {n.name}
                   {n.isBuiltIn && <span className="tag">{t('common.builtin')}</span>}
                 </div>
-                <div className="cgreet">{n.greeting}</div>
+                <div className="cgreet">{textPreview(n.greeting)}</div>
                 <div className="cactions">
                   <button className="btn btn-sm btn-primary" onClick={() => startNpc(n.id!)}>{t('dash.startChat')}</button>
                 </div>
@@ -180,4 +184,4 @@ export function Dashboard() {
       {showNew && <NewSessionMenu onClose={() => setShowNew(false)} />}
     </div>
   );
-}
+});

package/src/components/DeleteConfirmDialog.tsx

@@ -23,7 +23,7 @@ export function DeleteConfirmDialog({
   const t = useT();
   const danger = dangerText ?? t('common.delete');
   return (
-    <Modal onClose={onCancel} width="min(400px, calc(100vw - 32px))">
+    <Modal onClose={onCancel} size="compact">
       <div className="modal-head">
         <span style={{ fontWeight: 800, fontSize: 15 }}>{title}</span>
         <button className="icon-btn" onClick={onCancel}><Icon name="x" /></button>

package/src/components/FileDisplayModal.tsx

@@ -483,7 +483,7 @@ export function FileDisplayModal() {
 
   return createPortal(
     <>
-      {!isPictureInPicture && <div key="overlay" className="overlay" onClick={close} />}
+      {!isPictureInPicture && <div key="overlay" className="overlay" />}
       <div
         key="display-container"
         className={isPictureInPicture ? 'display-pip card' : 'modal-root'}

package/src/components/GameplayDialogs.tsx

@@ -46,7 +46,7 @@ export function GameplayExportModal({
   };
 
   return (
-    <Modal onClose={onClose} width={420}>
+    <Modal onClose={onClose} size="compact">
       <div className="modal-head">
         <span style={{ fontWeight: 800, fontSize: 15, display: 'flex', alignItems: 'center', gap: 8 }}>
           <Icon name="share" size={15} /> {t('gameplay.exportTitle')}
@@ -150,7 +150,7 @@ export function GameplayImportModal({
   };
 
   return (
-    <Modal onClose={onClose} width={420}>
+    <Modal onClose={onClose} size="compact">
       <div className="modal-head">
         <span style={{ fontWeight: 800, fontSize: 15, display: 'flex', alignItems: 'center', gap: 8 }}>
           <Icon name="import" size={15} /> {t('gameplay.importTitle')}