tavern-harness 0.1.0

package/src/components/ChatView.tsx

@@ -0,0 +1,1639 @@
+import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } 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';
+import { FileDisplayViewButton, parseStoredDisplayRef } from './FileDisplayModal';
+import { formatMetrics } from '../core/stats';
+import { saveTextFile } from '../core/fileDownload';
+import { effectiveDisplayQueue, speakerLabel, suggestMagicCommands } from '../core/turnLoop';
+import { onChatScroll, onQueueScroll, onQueueScrollIntent, registerChatEl, registerQueueEl, scrollChatTo, scrollQueueToLoop } from '../core/linkedScroll';
+import { useT, translate } from '../core/i18n';
+import { escapeRegExp, prettyJson, trimEdgeNewlines } from '../core/strings';
+
+function fmtTime(ts: number): string {
+  const d = new Date(ts);
+  const hh = String(d.getHours()).padStart(2, '0');
+  const mm = String(d.getMinutes()).padStart(2, '0');
+  return `${hh}:${mm}`;
+}
+
+function renderComposerRichNodes(text: string, names: string[]): ReactNode[] {
+  if (!text) return [];
+  const mentionRe =
+    names.length > 0
+      ? new RegExp(`@(?:${[...names].sort((a, b) => b.length - a.length).map(escapeRegExp).join('|')})(?=\\s|[，。！？,.!?]|$)`, 'g')
+      : null;
+  const hits: Array<{ start: number; end: number; cls: string }> = [];
+  if (mentionRe) {
+    for (const m of text.matchAll(mentionRe)) {
+      hits.push({ start: m.index ?? 0, end: (m.index ?? 0) + m[0].length, cls: 'mention mention-live' });
+    }
+  }
+  // 行首魔法指令前缀（/new /pass 及它们的前缀）也用高亮颜色
+  const cmdMatch = /^(\/[A-Za-z]*)/.exec(text);
+  const cmdTok = cmdMatch ? cmdMatch[1] : '';
+  if (cmdTok && suggestMagicCommands(cmdTok).length > 0) {
+    hits.push({ start: 0, end: cmdTok.length, cls: 'cmd-live' });
+  }
+  if (hits.length === 0) return [];
+  hits.sort((a, b) => a.start - b.start);
+  const out: ReactNode[] = [];
+  let last = 0;
+  let i = 0;
+  for (const h of hits) {
+    if (h.start < last) continue;
+    if (h.start > last) out.push(text.slice(last, h.start));
+    out.push(<span key={`h-${i++}`} className={h.cls}>{text.slice(h.start, h.end)}</span>);
+    last = h.end;
+  }
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+
+/** 从 dataUrl / URL 猜测一个可显示的文件名 */
+function attachmentName(a: string): string {
+  const attach = translate('common.attachment');
+  if (a.startsWith('data:')) {
+    const m = /^data:([^;]+);/.exec(a);
+    const mime = m ? m[1] : '';
+    const ext = mime.split('/')[1] || 'bin';
+    return `${attach}.${ext}`;
+  }
+  try {
+    const u = new URL(a);
+    const name = u.pathname.split('/').pop();
+    if (name) return decodeURIComponent(name);
+  } catch {
+    /* ignore */
+  }
+  return attach;
+}
+
+// ============================================================
+// 聊天内容区
+// ============================================================
+
+export function ChatView({
+  session,
+  messages,
+  participants,
+  compressions,
+  streaming,
+}: {
+  session: ChatSession;
+  messages: ChatMessage[];
+  participants: ChatParticipant[];
+  compressions: ContextCompression[];
+  streaming: boolean;
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const positionedSessionRef = useRef<{ id: number | undefined; messageCount: number } | null>(null);
+  const updateStreaming = useStore((s) => s.streaming.sessionId === session.id);
+  const t = useT();
+  const compressionsByEndMessageId = useMemo(
+    () => new Map(compressions.map((compression) => [compression.endMessageId, compression])),
+    [compressions],
+  );
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    // 注册滚动容器，供「对话⇄队列」双向联动（registerChatEl 内部会重置抑制标志）
+    registerChatEl(el);
+    return () => registerChatEl(null); // 卸载时解除引用，避免跨会话联动到已卸载的容器
+  }, []);
+
+  // 进入或切换会话时直接定位到最新消息，不播放滚动动画。
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const positioned = positionedSessionRef.current;
+    const enteringSession = positioned?.id !== session.id;
+    const historyJustLoaded = positioned != null && positioned.id === session.id && positioned.messageCount === 0 && messages.length > 0;
+    if (!enteringSession && !historyJustLoaded) return;
+    el.scrollTop = el.scrollHeight;
+    positionedSessionRef.current = { id: session.id, messageCount: messages.length };
+  }, [session.id, messages.length]);
+
+  // 自动滚动到底（新消息 / 流式更新时）：群聊流式生成时同样跟随最新内容
+  const isGroup = session.mode === 'GROUP';
+  useEffect(() => {
+    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;
+    // 群聊：仅在已处于底部或正在流式生成时自动吸附（流式画布增长时继续跟随），
+    // 用户主动向上回看时不打断
+    if (!isGroup || nearBottom || updateStreaming) {
+      el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [messages.length, updateStreaming, messages[messages.length - 1]?.content.length, isGroup]);
+
+  const npcId = session.associatedId;
+  const npc = useStore((s) => s.npcs.find((n) => n.id === npcId));
+
+  // 工具调用结果按 toolCallId 分组；已由 assistant 消息工具卡片展示的调用 id，其结果并入卡片内部渲染
+  const toolResultsByCallId = useMemo(() => {
+    const map = new Map<string, ChatMessage[]>();
+    for (const m of messages) {
+      if (m.role === 'tool' && m.toolCallId) {
+        const arr = map.get(m.toolCallId);
+        if (arr) arr.push(m);
+        else map.set(m.toolCallId, [m]);
+      }
+    }
+    return map;
+  }, [messages]);
+  const displayedToolCallIds = useMemo(() => {
+    const ids = new Set<string>();
+    for (const m of messages) {
+      if (m.role !== 'assistant') continue;
+      try {
+        for (const tc of JSON.parse(m.toolCallsJson || '[]') as ToolCallRecord[]) {
+          if (tc.id) ids.add(tc.id);
+        }
+      } catch {
+        /* ignore */
+      }
+    }
+    return ids;
+  }, [messages]);
+
+  return (
+    <div className="chat-scroll" ref={scrollRef} onScroll={onChatScroll}>
+      <div className="chat-col">
+        {messages.length === 0 && (
+          <div className="empty-state fade-up">
+            <div className="big">🫖</div>
+            <div>
+              {session.mode === 'STANDARD' && <><b>{t('chat.emptyStandardTitle')}</b><br />{t('chat.emptyStandardSub')}</>}
+              {session.mode === 'NPC' && <><b>{t('chat.emptyNpcTitle', { name: npc?.name ?? t('chat.speakerChar') })}</b><br />{npc?.greeting}</>}
+              {session.mode === 'GROUP' && <><b>{t('chat.emptyGroupTitle')}</b><br />{t('chat.emptyGroupSub')}</>}
+            </div>
+          </div>
+        )}
+        {messages.map((m) => (
+          <Fragment key={m.id}>
+            <MessageBubble
+              msg={m}
+              session={session}
+              participants={participants}
+              loopIndex={isGroup ? (m.loopIndex ?? 0) : null}
+              streaming={streaming && m.id === lastMsgId(messages)}
+              toolResultsByCallId={toolResultsByCallId}
+              suppressedResultIds={displayedToolCallIds}
+            />
+            {compressionsByEndMessageId.has(m.id!) && (
+              <div className="compression-banner-wrap">
+                <div
+                  className="sys-banner fade-up compression-banner"
+                  onContextMenu={(e) => {
+                    e.preventDefault();
+                    const compression = compressionsByEndMessageId.get(m.id!);
+                    if (compression) openCompressionMenu(e, compression.summary, compression, t('chat.contextCompressed'));
+                  }}
+                >
+                  ⟐ {t('chat.contextCompressed')}
+                </div>
+              </div>
+            )}
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function lastMsgId(messages: ChatMessage[]): number | undefined {
+  return messages.length > 0 ? messages[messages.length - 1].id : undefined;
+}
+
+// ============================================================
+// 单条消息气泡
+// ============================================================
+
+function MessageBubble({
+  msg,
+  session,
+  participants,
+  streaming,
+  loopIndex,
+  toolResultsByCallId,
+  suppressedResultIds,
+}: {
+  msg: ChatMessage;
+  session: ChatSession;
+  participants: ChatParticipant[];
+  streaming: boolean;
+  /** 群聊循环号（0 起）；非群聊为 null */
+  loopIndex: number | null;
+  /** 工具结果按 toolCallId 分组（用于并入发起它的调用卡片内部展示） */
+  toolResultsByCallId: Map<string, ChatMessage[]>;
+  /** 已在 assistant 消息工具卡片内展示结果的 toolCallId 集合（独立结果行不再重复渲染） */
+  suppressedResultIds: Set<string>;
+}) {
+  const t = useT();
+  const providers = useStore((s) => s.providers);
+  const turnStreaming = useStore((s) => s.streaming.sessionId === session.id);
+  // System 消息（/new 标记）
+  if (msg.role === 'system') {
+    return (
+      <div className="sys-banner fade-up" data-loop={loopIndex ?? undefined}>⟐ {msg.content}</div>
+    );
+  }
+
+  // 工具消息
+  if (msg.role === 'tool') {
+    // 该结果已并入发起它的工具调用卡片内部 → 不再独立渲染
+    if (msg.toolCallId && suppressedResultIds.has(msg.toolCallId)) return null;
+    const isError = msg.content.startsWith('ERROR:') || msg.content.startsWith('CANCELLED:');
+    // 展示类工具：结果里带有 DISPLAY_REF 前缀，收起前缀展示干净的摘要
+    const displayPayload = msg.displayRef ? parseStoredDisplayRef(msg.displayRef) : null;
+    const displayContent = displayPayload
+      ? (msg.content.replace(/^DISPLAY_REF: [^\n]*\n?/, '') || t('display.view'))
+      : msg.content;
+    return (
+      <div className="msg-row tool-row fade-up" data-loop={loopIndex ?? undefined} data-speaker={msg.speakerParticipantId != null ? String(msg.speakerParticipantId) : undefined}>
+        <div className="msg-body">
+          <div className={`tool-result ${isError ? 'err' : ''}`}>
+            <Icon name={isError ? 'cancel' : 'check'} size={13} />
+            <span className="mono">{displayContent.slice(0, 200)}{displayContent.length > 200 ? '…' : ''}</span>
+          </div>
+          {/* 展示类工具（file_display）：保留「查看」按钮，随时重开已展示的文件 */}
+          {msg.displayRef && <FileDisplayViewButton displayRef={msg.displayRef} />}
+        </div>
+      </div>
+    );
+  }
+
+  const toolCalls = useMemo(() => {
+    try {
+      return JSON.parse(msg.toolCallsJson || '[]') as ToolCallRecord[];
+    } catch {
+      return [];
+    }
+  }, [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)
+    : undefined;
+  const speakerName = msg.speakerName ?? (isUser ? t('common.user') : session.mode === 'NPC' ? t('chat.speakerChar') : t('chat.speakerAssistant'));
+  const npcHue = speaker?.npcId ? useStore((s) => s.npcs.find((n) => n.id === speaker.npcId)?.avatarColorOrdinal ?? 0) : 0;
+  const npcAvatar = speaker?.npcId ? useStore((s) => s.npcs.find((n) => n.id === speaker.npcId)?.avatarDataUrl ?? null) : null;
+  const visibleContent = isUser ? msg.content : trimEdgeNewlines(msg.content);
+  const displayVisibleContent = session.mode === 'GROUP'
+    ? visibleContent.replace(/@(?:用户|用戶)(?=\s|[，。！？,.!?]|$)/g, '@User')
+    : visibleContent;
+  const displayContent = msg.displayHandoffMention
+    ? `${displayVisibleContent}${displayVisibleContent ? ' ' : ''}@User`
+    : displayVisibleContent;
+
+  if (isUser) {
+    return <UserBubble msg={msg} session={session} editing={isEditing} loopIndex={loopIndex} />;
+  }
+
+  // 用于「点击队列发言 → 对话定位」：NPC 用 participantId，玩家/未知用 null（定位到循环首条）
+  const speakerKey = msg.speakerParticipantId != null ? String(msg.speakerParticipantId) : null;
+
+  // 群聊：NPC 发言的 @台词 高亮（斜体加粗 + 特殊颜色）
+  const mentionNames = session.mode === 'GROUP'
+    ? participants
+      .filter((p) => p.participantId !== msg.speakerParticipantId)
+      .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' : ''}`}
+      data-loop={loopIndex ?? undefined}
+      data-speaker={speakerKey ?? undefined}
+      onContextMenu={(e) => { e.preventDefault(); openMsgMenu(e, msg, session); }}
+    >
+      <Avatar name={speakerName} colorOrdinal={npcHue} imageUrl={npcAvatar} />
+      <div className="msg-body">
+        <div className="msg-head">
+          <span className="msg-name">{speakerName}</span>
+          {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}>
+            <Markdown text={msg.thinkingContent} mathEnabled={false} />
+          </Collapse>
+        )}
+        {toolCalls.length > 0 && (
+          <div className="tool-calls">
+            {toolCalls.map((tc, i) => (
+              <ToolCallCard
+                key={i}
+                tc={tc}
+                executing={turnStreaming && (toolResultsByCallId.get(tc.id) ?? []).length === 0}
+                results={toolResultsByCallId.get(tc.id) ?? []}
+              />
+            ))}
+          </div>
+        )}
+        {(displayContent || msg.attachments.length > 0) && (
+          <div className={`bubble ${isUser ? '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-content-row">
+              <div className="bubble-text">
+                {displayContent ? <Markdown text={displayContent} mentionNames={mentionNames} /> : streaming && <span className="stream-cursor" />}
+              </div>
+              {/* 编辑按钮：位于正文气泡内最右侧，铅笔图标 */}
+              <button className="msg-edit-btn" title={t('chat.editMsg')} onClick={() => startEditingMsg(msg.id!)}>
+                <Icon name="pencil" size={13} />
+              </button>
+            </div>
+          </div>
+        )}
+        {(msg.latencyMs != null || msg.promptTokens > 0 || msg.completionTokens > 0) && !streaming && (
+          <div className="msg-metrics">{formatMetrics(msg)}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** 气泡内联编辑器（替换弹窗编辑，支持管理附件） */
+function BubbleEditor({
+  msg,
+  session,
+  onDone,
+}: {
+  msg: ChatMessage;
+  session: ChatSession;
+  onDone: () => void;
+}) {
+  const t = useT();
+  const [text, setText] = useState(msg.content);
+  const [attachments, setAttachments] = useState<{ dataUrl: string; name: string }[]>(
+    msg.attachments.map((a, i) => ({ dataUrl: a, name: msg.attachmentInfos?.[i]?.displayName || attachmentName(a) }))
+  );
+  const fileRef = useRef<HTMLInputElement>(null);
+  const editMessage = useStore((s) => s.editMessage);
+  const saveMessageOnly = useStore((s) => s.saveMessageOnly);
+  const streaming = useStore((s) => s.streaming.sessionId === session.id);
+  // 玩家（user）消息：保存并重新生成；NPC（assistant）消息：仅保存、不触发生成
+  const isUserMsg = msg.role === 'user';
+
+  const doSave = async () => {
+    if (!text.trim() || streaming) return;
+    // 立即退回消息气泡状态；保存 + 重新生成在后台继续
+    onDone();
+    await editMessage(
+      msg.id!,
+      text,
+      session.id!,
+      attachments.map((a) => a.dataUrl),
+      attachments.map((a) => a.name)
+    );
+  };
+
+  const doSaveOnly = async () => {
+    if (!text.trim() || streaming) return;
+    onDone();
+    await saveMessageOnly(
+      msg.id!,
+      text,
+      session.id!,
+      attachments.map((a) => a.dataUrl),
+      attachments.map((a) => a.name)
+    );
+  };
+
+  // 主按钮动作：玩家 → 保存并重新生成；NPC → 仅保存
+  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 style={{ display: 'flex', gap: 8 }}>
+          <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 style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+          <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>
+      </div>
+    </div>
+  );
+}
+
+function UserBubble({ msg, session, editing, loopIndex }: { msg: ChatMessage; session: ChatSession; editing?: boolean; loopIndex?: number | null }) {
+  const t = useT();
+  const participants = useStore((s) => (session.id != null ? (s.participants[session.id] ?? []) : []));
+  // 群聊中「用户消息」的 @角色名 也作为特殊指令高亮（点名）
+  const mentionNames =
+    session.mode === 'GROUP'
+      ? participants.filter((p) => p.kind === 'NPC').map((p) => p.displayName)
+      : [];
+  return (
+    <div className="msg-row user-row fade-up" data-loop={loopIndex ?? undefined} data-speaker="player" onContextMenu={(e) => { e.preventDefault(); openMsgMenu(e, msg, session); }}>
+      <div className="avatar sm user-avatar">{t('common.me')}</div>
+      <div className="msg-body">
+        <div className="msg-head right">
+          <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-content-row">
+              <div className="bubble-text">
+                {msg.content && <Markdown text={msg.content} mentionNames={mentionNames} />}
+              </div>
+              <button className="msg-edit-btn" title={t('chat.editMsg')} onClick={() => startEditingMsg(msg.id!)}>
+                <Icon name="pencil" size={13} />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ToolCallCard({ tc, executing, results }: { tc: ToolCallRecord; executing: boolean; results: ChatMessage[] }) {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const formattedArgs = useMemo(() => {
+    if (!open) return '';
+    return prettyJson(tc.argumentsJson);
+  }, [open, tc.argumentsJson]);
+  const hasResult = results.length > 0;
+  const isError = results.some((r) => r.content.startsWith('ERROR:') || r.content.startsWith('CANCELLED:'));
+  // 展示类工具（file_display）结果：去掉 DISPLAY_REF / OK 前缀再拼展示文本
+  const displayRef = results.find((r) => r.displayRef)?.displayRef ?? null;
+  const resultText = results
+    .map((r) => {
+      if (r.displayRef && parseStoredDisplayRef(r.displayRef)) {
+        return r.content.replace(/^DISPLAY_REF: [^\n]*\n?/, '');
+      }
+      return r.content;
+    })
+    .join('\n');
+  return (
+    <div className={`tool-card ${executing ? 'executing' : ''} ${hasResult ? (isError ? 'has-error' : 'has-result') : ''}`}>
+      <button className="tool-card-head" onClick={() => setOpen(!open)}>
+        <span className="tool-card-icon">
+          {executing ? <span className="spinner" style={{ width: 12, height: 12 }} /> : hasResult ? <Icon name={isError ? 'cancel' : 'check'} size={13} /> : '🔧'}
+        </span>
+        <span className="tool-card-name">{t('chat.toolCall', { name: tc.name })}</span>
+        <span className="collp-arrow" style={{ transform: open ? 'rotate(180deg)' : undefined }}>▾</span>
+      </button>
+      {/* 未展开时展示工具调用结果摘要行（单行折叠，便于扫读） */}
+      {hasResult && !open && (
+        <div className={`tool-card-result-line ${isError ? 'err' : ''}`}>
+          <Icon name={isError ? 'cancel' : 'check'} size={12} />
+          <span className="mono">{resultText.trim().split('\n').filter(Boolean).slice(0, 2).join(' · ') || resultText.replace(/\s+/g, ' ').slice(0, 160)}{resultText.length > 160 ? '…' : ''}</span>
+          {displayRef && <FileDisplayViewButton displayRef={displayRef} />}
+        </div>
+      )}
+      {open && (
+        <div className="tool-card-body">
+          <pre className="tool-args mono">{formattedArgs}</pre>
+          {hasResult && (
+            <div className={`tool-result ${isError ? 'err' : ''}`}>
+              <Icon name={isError ? 'cancel' : 'check'} size={13} />
+              <span className="mono">{resultText.length > 2000 ? resultText.slice(0, 2000) + '…' : resultText}</span>
+              {displayRef && <FileDisplayViewButton displayRef={displayRef} />}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// 输入区
+// ============================================================
+
+export function ChatInput({ sessionId }: { sessionId: number }) {
+  const t = useT();
+  const [text, setText] = useState('');
+  const [attachments, setAttachments] = useState<{ dataUrl: string; name: string }[]>([]);
+  const [showCmd, setShowCmd] = useState(false);
+  const [showMention, setShowMention] = useState(false);
+  const [mentionQuery, setMentionQuery] = useState('');
+  const mentionRef = useRef<HTMLDivElement>(null);
+  const richRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [typing, setTyping] = useState(false);
+  const [showModels, setShowModels] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
+  const sendMessage = useStore((s) => s.sendMessage);
+  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));
+  const providers = useStore((s) => s.providers);
+  const defaultModel = useStore((s) => s.settings?.defaultModel?.trim() || '');
+  const defaultProviderId = useStore((s) => s.settings?.defaultProviderId ?? null);
+
+  const canSend = text.trim().length > 0 || attachments.length > 0;
+
+  const doSend = () => {
+    if (!canSend || typing) return;
+    if (streaming) return;
+    const sendingText = text.trim();
+    const sendingAttachments = [...attachments];
+    setText('');
+    setAttachments([]);
+    setShowCmd(false);
+    setShowMention(false);
+    setTyping(true);
+    sendMessage(
+      sendingText,
+      sendingAttachments.map((a) => a.dataUrl),
+      sendingAttachments.map((a) => a.name)
+    ).finally(() => {
+      setTyping(false);
+    });
+  };
+
+  // 输入区 @ 自动补全（仅在群聊、且匹配到成员时展示；不支持 @自己）
+  const sessionParticipants = useStore((s) => s.participants[sessionId] ?? []);
+  const groupMembers = useMemo(() => {
+    return sessionParticipants
+      .filter((p) => p.kind === 'NPC')
+      .map((p) => p.displayName)
+      .sort((a, b) => a.length - b.length);
+  }, [sessionParticipants]);
+  const mentionCandidates = useMemo(() => {
+    if (!showMention || session?.mode !== 'GROUP') return [];
+    const q = mentionQuery.trim().toLowerCase();
+    return groupMembers.filter((n) => !q || n.toLowerCase().includes(q));
+  }, [showMention, mentionQuery, groupMembers, session?.mode]);
+  const composerRichNodes = useMemo(
+    () => renderComposerRichNodes(text, session?.mode === 'GROUP' ? groupMembers : []),
+    [session?.mode, text, groupMembers]
+  );
+  const [activeMentionIdx, setActiveMentionIdx] = useState(0);
+  const cmdRef = useRef<HTMLDivElement>(null);
+  const [activeCmdIdx, setActiveCmdIdx] = useState(0);
+
+  const closeMention = () => {
+    setShowMention(false);
+    setMentionQuery('');
+    setActiveMentionIdx(0);
+  };
+
+  const applyMention = (name: string) => {
+    if (!textareaRef.current) return;
+    const el = textareaRef.current;
+    const pos = el.selectionStart ?? text.length;
+    const before = text.slice(0, pos);
+    const after = text.slice(pos);
+    const atIdx = before.lastIndexOf('@');
+    if (atIdx < 0) return;
+    const hasSpaceAfter = /^\s/.test(after);
+    const suffix = hasSpaceAfter ? '' : ' ';
+    const next = before.slice(0, atIdx) + `@${name}` + suffix + after;
+    setText(next);
+    closeMention();
+    requestAnimationFrame(() => {
+      el.focus();
+      const caret = before.slice(0, atIdx).length + name.length + 1 + suffix.length;
+      el.setSelectionRange(caret, caret);
+    });
+  };
+
+  const detectMention = (value: string, caret: number) => {
+    if (session?.mode !== 'GROUP') {
+      setShowMention(false);
+      return;
+    }
+    if (caret < 0 || caret > value.length) {
+      setShowMention(false);
+      return;
+    }
+    const before = value.slice(0, caret);
+    const m = /(?:^|[^A-Za-z0-9_@])(@[\u4e00-\u9fa5A-Za-z0-9_]{0,30})$/.exec(before);
+    if (!m) {
+      setShowMention(false);
+      return;
+    }
+    const q = m[1].slice(1).toLowerCase();
+    // 仅在查询词变化（含面板首次打开）时重置选中项；
+    // 否则方向键选中后紧跟的 onKeyUp 会把高亮打回第一项（“选不中”/“跳回去”问题）
+    if (!(showMention && q === mentionQuery)) setActiveMentionIdx(0);
+    setMentionQuery(q);
+    setShowMention(true);
+  };
+
+  // 拖放 / 粘贴附件
+  useEffect(() => {
+    const onPaste = (e: ClipboardEvent) => {
+      if (streaming) return;
+      const files = e.clipboardData?.files;
+      if (files && files.length > 0 && files[0].type.startsWith('image')) {
+        e.preventDefault();
+        const f = files[0];
+        readFileAsDataUrl(f).then((url) => setAttachments((a) => [...a, { dataUrl: url, name: f.name || translate('chat.pasteImage', { ext: f.type.split('/')[1] || 'png' }) }]));
+      }
+    };
+    window.addEventListener('paste', onPaste);
+    return () => window.removeEventListener('paste', onPaste);
+  }, [streaming]);
+
+  useEffect(() => {
+    if (!streaming) return;
+    setShowCmd(false);
+    setShowMention(false);
+    setShowModels(false);
+  }, [streaming]);
+
+  // 点击自动补全面板外部时关闭
+  useEffect(() => {
+    if (!showMention) return;
+    const onDoc = (e: MouseEvent) => {
+      if (mentionRef.current && !mentionRef.current.contains(e.target as Node)) closeMention();
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [showMention]);
+
+  // 键盘选中项滚动到可视区（@ 点名 / 魔法指令候选）
+  useEffect(() => {
+    if (!showMention || !mentionRef.current) return;
+    mentionRef.current.querySelector('.mention-item.active')?.scrollIntoView({ block: 'nearest' });
+  }, [activeMentionIdx, showMention]);
+
+  useEffect(() => {
+    if (!showCmd || !cmdRef.current) return;
+    cmdRef.current.querySelector('.cmd-item.active')?.scrollIntoView({ block: 'nearest' });
+  }, [activeCmdIdx, showCmd]);
+
+  // 输入区 / 魔法指令自动补全候选 + 键盘选中项（列表缩短时自动收敛）
+  const cmdCandidates = useMemo(() => suggestMagicCommands(text), [text]);
+  const cmdIdx = Math.min(activeCmdIdx, Math.max(0, cmdCandidates.length - 1));
+
+  const applyCommand = (cmd: string) => {
+    setText(cmd);
+    setShowCmd(false);
+    setActiveCmdIdx(0);
+    requestAnimationFrame(() => {
+      const el = textareaRef.current;
+      if (!el) return;
+      el.focus();
+      el.setSelectionRange(cmd.length, cmd.length);
+    });
+  };
+
+  return (
+    <div className="composer">
+      {attachments.length > 0 && (
+        <div className="attach-preview">
+          {attachments.map((a, i) => (
+            <AttachCard
+              key={i}
+              name={a.name}
+              onRemove={() => setAttachments(attachments.filter((_, j) => j !== i))}
+            />
+          ))}
+        </div>
+      )}
+      {showCmd && cmdCandidates.length > 0 && (
+        <div className="cmd-menu" ref={cmdRef}>
+          {cmdCandidates.map((c, i) => (
+            <button
+              key={c.text}
+              className={`cmd-item ${i === cmdIdx ? 'active' : ''}`}
+              onMouseEnter={() => setActiveCmdIdx(i)}
+              onClick={() => {
+                setText(c.text);
+                setShowCmd(false);
+                setActiveCmdIdx(0);
+              }}
+            >
+              <span className="cmd-text">{c.text}</span>
+              <span className="cmd-desc">{c.description}</span>
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="composer-box">
+        {/* 模型选择器：输入框左侧，弹出列表（非弹窗） */}
+        <div className="composer-model">
+          <button
+            className={`composer-model-btn ${showModels ? 'open' : ''}`}
+            title={t('chat.selectModel')}
+            disabled={streaming}
+            onClick={() => setShowModels(!showModels)}
+          >
+            <span className="composer-model-label" title={defaultModel}>{defaultModel ? displayModelName(providers, defaultModel, defaultProviderId) : t('chat.chooseModel')}</span>
+          </button>
+          {showModels && (
+            <ModelPickerPanel onClose={() => setShowModels(false)} />
+          )}
+        </div>
+        <button
+          className="icon-btn composer-attach"
+          title={t('chat.attachTip')}
+          disabled={streaming}
+          onClick={() => fileRef.current?.click()}
+        >
+          <Icon name="image" size={18} />
+        </button>
+        <input
+          ref={fileRef}
+          type="file"
+          accept="image/*,video/*"
+          multiple
+          hidden
+          disabled={streaming}
+          onChange={(e) => {
+            const files = e.target.files;
+            if (files) {
+              Array.from(files).forEach((f) => readFileAsDataUrl(f).then((url) => setAttachments((a) => [...a, { dataUrl: url, name: f.name }])));
+            }
+            e.target.value = '';
+          }}
+        />
+        <div className="composer-input-wrap">
+          {composerRichNodes.length > 0 && (
+            <div
+              className="composer-rich"
+              ref={richRef}
+              aria-hidden
+            >
+              {composerRichNodes}
+            </div>
+          )}
+          <textarea
+            ref={textareaRef}
+            className={composerRichNodes.length > 0 ? 'with-rich' : ''}
+            value={text}
+            disabled={streaming}
+            onChange={(e) => {
+              const v = e.target.value;
+              setText(v);
+              const cmdOpen = v.startsWith('/') && !v.includes('\n');
+              setShowCmd(cmdOpen);
+              // 面板重新打开时选中回到第一项
+              if (cmdOpen && !showCmd) setActiveCmdIdx(0);
+              detectMention(v, e.target.selectionStart ?? v.length);
+            }}
+            onKeyDown={(e) => {
+              const composing = e.nativeEvent.isComposing;
+              // 输入法组词期间不劫持方向键/回车（否则拼音候选选择被破坏）
+              const mentionOpen = !composing && showMention && mentionCandidates.length > 0;
+              // 仅在输入仍是「前缀」时拦截回车/Tab；键入完整命令（如 /new）时回车直接发送
+              const cmdOpen =
+                !composing &&
+                showCmd &&
+                cmdCandidates.length > 0 &&
+                cmdCandidates.some((c) => c.text !== text);
+              if (mentionOpen || cmdOpen) {
+                if (e.key === 'ArrowDown') {
+                  e.preventDefault();
+                  if (mentionOpen) {
+                    setActiveMentionIdx((idx) => (idx + 1) % mentionCandidates.length);
+                  } else {
+                    setActiveCmdIdx((idx) => (idx + 1) % cmdCandidates.length);
+                  }
+                  return;
+                }
+                if (e.key === 'ArrowUp') {
+                  e.preventDefault();
+                  if (mentionOpen) {
+                    setActiveMentionIdx((idx) => (idx - 1 + mentionCandidates.length) % mentionCandidates.length);
+                  } else {
+                    setActiveCmdIdx((idx) => (idx - 1 + cmdCandidates.length) % cmdCandidates.length);
+                  }
+                  return;
+                }
+                if (e.key === 'Enter' || e.key === 'Tab') {
+                  e.preventDefault();
+                  if (mentionOpen) {
+                    applyMention(mentionCandidates[activeMentionIdx]);
+                  } else {
+                    applyCommand(cmdCandidates[cmdIdx].text);
+                  }
+                  return;
+                }
+                if (e.key === 'Escape') {
+                  e.preventDefault();
+                  if (mentionOpen) {
+                    closeMention();
+                  } else {
+                    setShowCmd(false);
+                    setActiveCmdIdx(0);
+                  }
+                  return;
+                }
+              }
+              if (e.key === 'Enter' && !e.shiftKey && !composing) {
+                e.preventDefault();
+                doSend();
+              }
+              if (e.key === 'Escape') {
+                setShowCmd(false);
+                setActiveCmdIdx(0);
+                closeMention();
+              }
+            }}
+            onScroll={(e) => {
+              const rich = richRef.current;
+              if (!rich) return;
+              rich.scrollTop = e.currentTarget.scrollTop;
+              rich.scrollLeft = e.currentTarget.scrollLeft;
+            }}
+            onClick={(e) => detectMention(text, e.currentTarget.selectionStart ?? text.length)}
+            onKeyUp={(e) => detectMention(text, e.currentTarget.selectionStart ?? text.length)}
+            placeholder={
+              session?.mode === 'GROUP'
+                ? t('chat.phGroup')
+                : t('chat.phSingle')
+            }
+            rows={1}
+            style={{ height: 'auto', minHeight: 38 }}
+          />
+          {showMention && mentionCandidates.length > 0 && (
+            <div className="mention-pop" ref={mentionRef}>
+              <div className="mention-pop-head">{t('chat.mentionHead')}</div>
+              {mentionCandidates.map((n, i) => (
+                <button
+                  key={n}
+                  className={`mention-item ${i === activeMentionIdx ? 'active' : ''}`}
+                  onMouseEnter={() => { setActiveMentionIdx(i); }}
+                  onClick={() => applyMention(n)}
+                >
+                  <span className="mention-item-at">@</span>
+                  {n}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        {streaming ? (
+          <button className="btn btn-primary btn-round" onClick={stopStreaming} title={t('chat.stopTip')}>
+            <Icon name="stop" size={15} />
+          </button>
+        ) : (
+          <button className="btn btn-primary btn-round" disabled={!canSend} onClick={doSend} title={t('chat.sendTip')}>
+            <Icon name="send" size={15} />
+          </button>
+        )}
+      </div>
+      <div className="composer-hint">
+        <span>{t('chat.hintSend')}</span>
+        <span className="composer-hint-right">{t('chat.hintMagic')}{session?.mode === 'GROUP' ? t('chat.hintMention') : ''}</span>
+      </div>
+    </div>
+  );
+}
+
+/** 模型选择下拉列表（弹出在输入框左侧上方） */
+function ModelPickerPanel({ onClose }: { onClose: () => void }) {
+  const t = useT();
+  const settings = useStore((s) => s.settings);
+  const models = useStore((s) => s.modelsList);
+  const selectModel = useStore((s) => s.selectModel);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onDocClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const onEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('keydown', onEsc);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('keydown', onEsc);
+    };
+  }, [onClose]);
+
+  const selected = settings?.defaultModel?.trim() || '';
+  const selectedProviderId = settings?.defaultProviderId ?? null;
+
+  const pick = async (option: (typeof models)[number]) => {
+    await selectModel(option);
+    onClose();
+  };
+
+  return (
+    <div className="model-popover card" ref={ref} onClick={(e) => e.stopPropagation()}>
+      <div className="model-popover-head">
+        <span>{t('chat.selectModel')}</span>
+        <button className="icon-btn" onClick={onClose} title={t('common.close')}><Icon name="x" size={12} /></button>
+      </div>
+      {models.length === 0 ? (
+        <div className="model-popover-empty">
+          {t('chat.modelEmpty')}
+        </div>
+      ) : (
+        <div className="model-popover-list">
+          {models.map((option) => {
+            const active = option.providerId === selectedProviderId && option.modelId === selected;
+            return (
+              <button
+                key={`${option.providerId}:${option.modelId}`}
+                className={`model-option ${active ? 'active' : ''}`}
+                onClick={() => pick(option)}
+              >
+                <span className="model-option-dot">{active ? '●' : '○'}</span>
+                <span className="model-option-name" title={option.modelId}>{option.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+// ============================================================
+// 消息操作菜单（右键：编辑 / 重新生成 / 原始日志 / 分叉）
+// ============================================================
+
+type CompressionMenuSource = {
+  x: number;
+  y: number;
+  summary?: string;
+  rawLog?: RawLogData;
+  title: string;
+};
+
+let msgMenuState:
+  | { x: number; y: number; msg: ChatMessage; session: ChatSession }
+  | CompressionMenuSource
+  | null = null;
+let msgMenuListeners: Array<() => void> = [];
+function notifyMsgMenu() {
+  msgMenuListeners.forEach((fn) => fn());
+}
+function openMsgMenu(e: React.MouseEvent, msg: ChatMessage, session: ChatSession) {
+  msgMenuState = { x: e.clientX, y: e.clientY, msg, session };
+  notifyMsgMenu();
+}
+function openCompressionMenu(e: React.MouseEvent, summary: string | undefined, rawLog: RawLogData | undefined, title: string) {
+  msgMenuState = { x: e.clientX, y: e.clientY, summary, rawLog, title };
+  notifyMsgMenu();
+}
+function closeMsgMenu() {
+  msgMenuState = null;
+  notifyMsgMenu();
+}
+
+// ---- 内联编辑全局状态（编辑目标由 MessageBubble 监听） ----
+let editingMsgState: { msgId: number } | null = null;
+let editingMsgListeners: Array<() => void> = [];
+function startEditingMsg(msgId: number) {
+  editingMsgState = { msgId };
+  editingMsgListeners.forEach((fn) => fn());
+  closeMsgMenu();
+}
+function stopEditingMsg() {
+  editingMsgState = null;
+  editingMsgListeners.forEach((fn) => fn());
+}
+
+export function MessageMenu() {
+  const [, force] = useState(0);
+  const t = useT();
+  const regenerateMessage = useStore((s) => s.regenerateMessage);
+  const forkSession = useStore((s) => s.forkSession);
+  const addToast = useStore((s) => s.addToast);
+  const messages = useStore((s) => s.messages);
+  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);
+
+  useEffect(() => {
+    const fn = () => force((n) => n + 1);
+    msgMenuListeners.push(fn);
+    return () => {
+      msgMenuListeners = msgMenuListeners.filter((f) => f !== fn);
+    };
+  }, []);
+
+  // 原始日志弹窗（独立状态，优先于右键菜单）
+  if (rawLog) {
+    return (
+      <RawLogModal
+        rawLog={rawLog.data}
+        title={rawLog.title}
+        onClose={() => setRawLog(null)}
+        onExport={async () => {
+          const raw = buildRawLog(rawLog.data);
+          const result = await saveTextFile(raw, 'text/plain', rawLog.filename);
+          if (result === 'canceled') {
+            addToast(t('toast.exportCanceled'));
+          } else {
+            addToast(t('toast.rawExported'));
+            setRawLog(null);
+          }
+        }}
+      />
+    );
+  }
+
+  if (compressionSummary) {
+    return (
+      <Modal onClose={() => setCompressionSummary(null)} width="min(680px, calc(100vw - 40px))">
+        <div className="modal-head">
+          <span>{compressionSummary.title}</span>
+          <button className="icon-btn" onClick={() => setCompressionSummary(null)} aria-label={t('common.close')}>×</button>
+        </div>
+        <div className="compression-summary-body"><Markdown text={compressionSummary.content} /></div>
+      </Modal>
+    );
+  }
+
+  if (!msgMenuState) return null;
+  if (!('msg' in msgMenuState)) {
+    const { x, y, summary, rawLog: compressionRawLog, title } = msgMenuState;
+    return (
+      <>
+        <div className="overlay-msg" onClick={closeMsgMenu} />
+        <div className="msg-menu card" style={{ left: Math.min(x, window.innerWidth - 190), top: Math.min(y, window.innerHeight - 200) }}>
+          <button
+            className="msg-menu-item"
+            disabled={!summary}
+            onClick={() => {
+              if (summary) setCompressionSummary({ content: summary, title });
+              closeMsgMenu();
+            }}
+          >
+            <Icon name="eye" size={13} /> {t('chat.viewMemory')}
+          </button>
+          <button
+            className="msg-menu-item"
+            disabled={!compressionRawLog?.rawRequestBody && !compressionRawLog?.rawResponseBody}
+            onClick={() => {
+              if (compressionRawLog) setRawLog({ data: compressionRawLog, title, filename: 'raw-log-context-compression.txt' });
+              closeMsgMenu();
+            }}
+          >
+            <Icon name="file" size={13} /> {t('chat.viewRaw')}
+          </button>
+        </div>
+      </>
+    );
+  }
+  const { x, y, msg } = msgMenuState;
+
+  const actions: Array<{ label: string; icon: string; onClick: () => void; danger?: boolean }> = [];
+  if (msg.role === 'user' || msg.role === 'assistant') {
+    actions.push({
+      label: t('chat.editMsg'),
+      icon: 'settings',
+      onClick: () => {
+        startEditingMsg(msg.id!);
+      },
+    });
+  }
+  const isOpeningGreeting = msg.isOpeningGreeting
+    ?? (msg.role === 'assistant'
+      && messages[msg.sessionId]?.find((message) => message.role === 'assistant')?.id === msg.id
+      && npcs.some((npc) => npc.id === msg.speakerParticipantId && [npc.greeting, ...(npc.alternateGreetings ?? [])].includes(msg.content)));
+  if (msg.role === 'assistant' && !isOpeningGreeting) {
+    actions.push({
+      label: t('chat.regenerate'),
+      icon: 'refresh',
+      onClick: async () => {
+        closeMsgMenu();
+        await regenerateMessage(msg.id!);
+      },
+    });
+  }
+  if (msg.rawRequestBody || msg.rawResponseBody) {
+    actions.push({
+      label: t('chat.viewRaw'),
+      icon: 'file',
+      onClick: () => {
+        setRawLog({
+          data: msg,
+          title: t('chat.rawLogTitle', { id: msg.id ?? '' }),
+          filename: `raw-log-${msg.id}.txt`,
+        });
+        closeMsgMenu();
+      },
+    });
+  }
+  // 分支 / Fork：从该消息复制出新会话
+  actions.push({
+    label: t('chat.fork'),
+    icon: 'git-branch',
+    onClick: async () => {
+      closeMsgMenu();
+      await forkSession(msg.id!);
+    },
+  });
+
+  return (
+    <>
+      <div className="overlay-msg" onClick={closeMsgMenu} />
+      <div className="msg-menu card" style={{ left: Math.min(x, window.innerWidth - 190), top: Math.min(y, window.innerHeight - 200) }}>
+        {actions.map((a) => (
+          <button
+            key={a.label}
+            className="msg-menu-item"
+            onClick={() => {
+              closeMsgMenu();
+              a.onClick();
+            }}
+          >
+            <Icon name={a.icon} size={13} /> {a.label}
+          </button>
+        ))}
+        {actions.length === 0 && <div style={{ padding: 10, fontSize: 12, color: 'var(--text-faint)' }}>{t('chat.noActions')}</div>}
+      </div>
+    </>
+  );
+}
+
+type RawLogData = Pick<ChatMessage, 'rawRequestBody' | 'rawResponseBody'> & Partial<Pick<ChatMessage, 'id' | 'role'>>;
+
+/** 原始日志弹窗：将响应 JSON 展示为完整回复，便于阅读 */
+function RawLogModal({ rawLog, title, onClose, onExport }: { rawLog: RawLogData; title: string; onClose: () => void; onExport: () => void }) {
+  const t = useT();
+  const req = rawLog.rawRequestBody ? prettyJson(rawLog.rawRequestBody) : '';
+  const merged = parseRawResponse(rawLog.rawResponseBody);
+
+  const [tab, setTab] = useState<'request' | 'merged'>('request');
+  const [autoWrap, setAutoWrap] = useState(true);
+
+  return (
+    <Modal onClose={onClose} className="raw-log-modal" width="min(760px, calc(100vw - 40px))">
+      <div className="modal-head raw-modal-head">
+        <span className="raw-modal-title">
+          <Icon name="file" size={15} /> {title}
+        </span>
+        <div className="raw-tabs">
+          <button className={`raw-tab ${tab === 'request' ? 'active' : ''}`} onClick={() => setTab('request')}>{t('chat.requestBody')}</button>
+          <button className={`raw-tab ${tab === 'merged' ? 'active' : ''}`} onClick={() => setTab('merged')}>{t('chat.fullResponse')}</button>
+        </div>
+        <div className="raw-head-actions">
+          <button
+            className={`icon-btn ${autoWrap ? 'active' : ''}`}
+            title={t(autoWrap ? 'display.disableWrap' : 'display.enableWrap')}
+            aria-label={t(autoWrap ? 'display.disableWrap' : 'display.enableWrap')}
+            aria-pressed={autoWrap}
+            onClick={() => setAutoWrap((wrapped) => !wrapped)}
+          >
+            <Icon name="text-wrap" size={17} />
+          </button>
+          <button
+            className="icon-btn"
+            onClick={onExport}
+            title={t('chat.exportTip')}
+            aria-label={t('chat.exportTip')}
+          >
+            <Icon name="share" size={17} />
+          </button>
+          <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
+        </div>
+      </div>
+      <div className="modal-body" style={{ padding: 0 }}>
+        {tab === 'request' && (
+          <pre className={`raw-pre mono ${autoWrap ? '' : 'raw-pre-nowrap'}`}>{req || t('chat.noRequestBody')}</pre>
+        )}
+        {tab === 'merged' && (
+          merged ? (
+            <div className="raw-merged">
+              <div className="raw-merged-head">
+                <span>{t('chat.fullResponseJson')}</span>
+                <span className="mono" style={{ fontSize: 11, color: 'var(--text-faint)' }}>{t('chat.fromSse')}</span>
+              </div>
+              <pre className={`raw-pre mono ${autoWrap ? '' : 'raw-pre-nowrap'}`}>{JSON.stringify(merged, null, 2)}</pre>
+            </div>
+          ) : (
+            <div className="raw-empty">{t('chat.noRawContent')}</div>
+          )
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+/** 从流式 SSE 原始行拼装出完整回复 JSON（合并所有分片）
+ *  注意：rawResponseBody 存的是去掉 "data: " 前缀后的裸 JSON 行，
+ *  因此这里同时兼容裸 JSON 行与带 data: 前缀的完整行。 */
+interface ChoiceAccum {
+  role?: string;
+  content: string;
+  finish_reason?: string | null;
+  toolCalls: Map<number, { id: string; type: string; name: string; args: string }>;
+}
+
+function assembleFullResponseJson(rawBody: string | null): Record<string, unknown> | null {
+  if (!rawBody) return null;
+  const lines = rawBody.split('\n');
+
+  // 用于收集分片信息
+  let merged: Record<string, unknown> = {};
+  const choicesAccum = new Map<number, ChoiceAccum>();
+  let usage: Record<string, unknown> | null = null;
+
+  const applyChunk = (chunk: Record<string, unknown>) => {
+    const id = chunk.id;
+    const object = chunk.object;
+    const created = chunk.created;
+    const model = chunk.model;
+    if (typeof id === 'string') merged.id = id;
+    if (typeof object === 'string') merged.object = object;
+    if (typeof created === 'number') merged.created = created;
+    if (typeof model === 'string') merged.model = model;
+
+    const choices = chunk.choices as Array<{ index?: number; delta?: Record<string, unknown>; finish_reason?: string | null }> | undefined;
+    if (choices) {
+      for (const c of choices) {
+        const idx = c.index ?? 0;
+        let acc = choicesAccum.get(idx);
+        if (!acc) {
+          acc = { content: '', toolCalls: new Map() };
+          choicesAccum.set(idx, acc);
+        }
+        const delta = c.delta ?? {};
+        if (typeof delta.role === 'string' && !acc.role) acc.role = delta.role;
+        if (typeof delta.content === 'string') acc.content += delta.content;
+        if (typeof c.finish_reason === 'string') acc.finish_reason = c.finish_reason;
+        // 工具调用增量按 index 组装（name / arguments 递增拼接）
+        const tcDeltas = delta.tool_calls as Array<{ index?: number; id?: string; type?: string; function?: { name?: string; arguments?: string } }> | undefined;
+        if (tcDeltas) {
+          for (const tc of tcDeltas) {
+            const tci = tc.index ?? 0;
+            const cur = acc.toolCalls.get(tci) ?? { id: '', type: 'function', name: '', args: '' };
+            if (tc.id) cur.id = tc.id;
+            if (tc.type) cur.type = tc.type;
+            if (tc.function?.name) cur.name += tc.function.name;
+            if (tc.function?.arguments) cur.args += tc.function.arguments;
+            acc.toolCalls.set(tci, cur);
+          }
+        }
+      }
+    }
+
+    if (chunk.usage) usage = chunk.usage as Record<string, unknown>;
+  };
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    const data = trimmed.startsWith('data:') ? trimmed.slice(5).trim() : trimmed;
+    if (!data || data === '[DONE]') continue;
+    try {
+      applyChunk(JSON.parse(data));
+    } catch {
+      /* 忽略非 JSON 行 */
+    }
+  }
+
+  if (Object.keys(merged).length === 0) return null;
+
+  // 组装 choices：message 结构 + finish_reason
+  const mergedChoices = Array.from(choicesAccum.entries())
+    .sort((a, b) => a[0] - b[0])
+    .map(([idx, acc]) => {
+      const message: Record<string, unknown> = {};
+      if (acc.role) message.role = acc.role;
+      if (acc.content) message.content = acc.content;
+      if (acc.toolCalls.size > 0) {
+        message.tool_calls = Array.from(acc.toolCalls.entries())
+          .sort((a, b) => a[0] - b[0])
+          .map(([, tc]) => ({
+            id: tc.id,
+            type: tc.type,
+            function: { name: tc.name, arguments: tc.args },
+          }));
+      }
+      const choice: Record<string, unknown> = { index: idx, message };
+      if (acc.finish_reason != null) choice.finish_reason = acc.finish_reason;
+      return choice;
+    });
+  merged.choices = mergedChoices;
+  if (usage) merged.usage = usage;
+
+  return merged;
+}
+
+function parseRawResponse(rawBody: string | null): Record<string, unknown> | null {
+  if (!rawBody) return null;
+  try {
+    return JSON.parse(rawBody) as Record<string, unknown>;
+  } catch {
+    return assembleFullResponseJson(rawBody);
+  }
+}
+
+function buildRawLog(rawLog: RawLogData): string {
+  const req = rawLog.rawRequestBody ? prettyJson(rawLog.rawRequestBody) : null;
+  const resp = rawLog.rawResponseBody ? prettyJson(rawLog.rawResponseBody) : null;
+  return [
+    rawLog.id != null ? `# Raw Log — message #${rawLog.id}` : '# Raw Log — context compression',
+    rawLog.role ? `role: ${rawLog.role}` : '',
+    req ? `\n## Request\n${req}` : '',
+    resp ? `\n## Response\n${resp}` : '',
+  ].join('\n');
+}
+
+// ============================================================
+// 发言队列面板（群聊右侧）：按循环展示完整发言顺序历史 + 实时指示正在发言者
+// ============================================================
+
+export function TurnQueuePanel({
+  session,
+  participants,
+}: {
+  session: ChatSession;
+  participants: ChatParticipant[];
+}) {
+  // ⚠️ 保持 hooks 无条件执行：本组件在 App 中始终挂载，切换会话（群聊 ⇄ 单人）
+  // 时若 hooks 数量变化会触发 “Rendered fewer hooks than expected” 导致整页白屏。
+  // 因此把模式判断放在所有 hooks 之后，仅用返回 JSX 与否控制渲染。
+  const t = useT();
+  const byId = useMemo(() => new Map(participants.map((p) => [p.participantId, p])), [participants]);
+  const npcs = useStore((s) => s.npcs);
+  const streamingSessionId = useStore((s) => s.streaming.sessionId);
+  const sessionMessages = useStore((s) => (session.id != null ? (s.messages[session.id] ?? []) : []));
+  // 订阅实时队列快照（每个回合推进 / 发言开始 / 玩家轮到都会更新）
+  const live = useStore((s) => s.liveQueueBySession[session.id!]);
+  const isStreamingThisSession = streamingSessionId === session.id;
+  const playerId = useMemo(() => participants.find((p) => p.kind === 'PLAYER')?.participantId ?? -1, [participants]);
+  const loopLabel = (live?.loopIndex ?? session.loopIndex) + 1;
+  const currentLoopIndex = loopLabel - 1;
+  // 正在发言者 = 剩余队列队首（live.queue[0]；随发言推进而变化）且正在流式生成
+  const liveQueue = live?.queue ?? effectiveDisplayQueue(session, participants);
+  const currentId = liveQueue.length > 0 ? parseInt(liveQueue[0], 10) : null;
+  const current = currentId != null ? byId.get(currentId) : null;
+  const isCurrentPlaying = current != null && current.kind === 'NPC' && isStreamingThisSession;
+  const spokenByLoop = useMemo(() => {
+    const map = new Map<number, string[]>();
+    const list = [...sessionMessages]
+      .filter((m) => m.loopIndex != null && (m.role === 'assistant' || m.role === 'user'))
+      .sort((a, b) => a.timestamp - b.timestamp);
+    for (const m of list) {
+      const loop = m.loopIndex as number;
+      const speakerId = m.role === 'user' ? playerId : m.speakerParticipantId;
+      if (m.role === 'assistant' && !trimEdgeNewlines(m.content)) continue;
+      if (speakerId == null) continue;
+      const arr = map.get(loop) ?? [];
+      const key = String(speakerId);
+      if (arr[arr.length - 1] !== key) arr.push(key);
+      map.set(loop, arr);
+    }
+    return map;
+  }, [sessionMessages, playerId]);
+  const currentSpoken = spokenByLoop.get(currentLoopIndex) ?? [];
+  const currentRemaining = useMemo(() => {
+    const rem = [...liveQueue];
+    if (isCurrentPlaying && currentSpoken.length > 0 && rem.length > 0 && rem[0] === currentSpoken[currentSpoken.length - 1]) {
+      rem.shift();
+    }
+    return rem;
+  }, [liveQueue, currentSpoken, isCurrentPlaying]);
+  const currentDisplay = useMemo(
+    () => [...currentSpoken, ...currentRemaining],
+    [currentSpoken, currentRemaining]
+  );
+  const currentSpeakingIndex = useMemo(() => {
+    if (!isCurrentPlaying || currentId == null) return null;
+    const cid = String(currentId);
+    if (currentSpoken.length > 0 && currentSpoken[currentSpoken.length - 1] === cid) return currentSpoken.length - 1;
+    return currentSpoken.length;
+  }, [isCurrentPlaying, currentId, currentSpoken]);
+  const currentWaitingIndex = useMemo(() => {
+    if (isCurrentPlaying || currentId == null) return null;
+    return currentSpoken.length;
+  }, [isCurrentPlaying, currentId, currentSpoken]);
+  // 展示历史：当前循环显示“已发言 + 剩余队列”；已结束循环显示“真实已发言顺序”
+  const loops = useMemo(() => {
+    if (live) {
+      const loopIndices = [
+        ...Array.from(spokenByLoop.keys()),
+        ...live.history.map((_, i) => i),
+        currentLoopIndex,
+      ];
+      const maxLoop = Math.max(0, ...loopIndices);
+      const out: string[][] = [];
+      for (let i = 0; i <= maxLoop; i++) {
+        if (i === currentLoopIndex) {
+          out.push(currentDisplay.length > 0 ? currentDisplay : (live.history[i] ?? []));
+          continue;
+        }
+        const spoken = spokenByLoop.get(i) ?? [];
+        if (spoken.length > 0) {
+          out.push(spoken);
+          continue;
+        }
+        out.push(live.history[i] ?? []);
+      }
+      return out;
+    }
+    const fallback = effectiveDisplayQueue(session, participants);
+    return [fallback];
+  }, [live, spokenByLoop, currentLoopIndex, currentDisplay, session, participants]);
+
+  // ---- 联动滚动：注册队列滚动容器，双向驱动由 linkedScroll 协调 ----
+  const bodyRef = useRef<HTMLDivElement>(null);
+  // 注册容器（registerQueueEl 内部重置抑制标志），body 只做注册，不含自驱动滚动
+  const isGroup = session.mode === 'GROUP';
+  useEffect(() => {
+    // 仅群聊时注册队列滚动容器，避免非群聊下误注册/联动
+    if (!isGroup) return;
+    registerQueueEl(bodyRef.current);
+    return () => registerQueueEl(null); // 卸载时解除引用
+  }, [isGroup]);
+  // 新循环加入（轮数变化）→ 队列自动滚到当前循环（底部对齐，整组可见）
+  const loopsLen = loops.length;
+  useEffect(() => {
+    // 非群聊下不触发联动滚动
+    if (!isGroup) return;
+    if (loopsLen > 0) scrollQueueToLoop(loopLabel);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loopsLen, isGroup]);
+
+  // 非群聊：不渲染发言队列（hooks 已无条件执行，只在这里返回空）
+  if (!isGroup) return null;
+
+  const handleQueueItemClick = (loopNum: number, speakerKey: string | null) => {
+    scrollChatTo(loopNum - 1, speakerKey);
+  };
+
+  const renderLoop = (loopQueue: string[], loopNum: number) => {
+    const isCurrent = loopNum === loopLabel;
+    return (
+      <div
+        className="turn-queue-loop-group"
+        key={loopNum}
+        data-loop={loopNum - 1}
+      >
+        <div className="turn-queue-loop-head">
+          <span>{t('chat.loop', { n: loopNum })}</span>
+          {isCurrent && <span className="turn-queue-loop-cur">{t('chat.current')}</span>}
+        </div>
+        <ul className="turn-queue-list">
+          {loopQueue.map((id, i) => {
+            const p = byId.get(parseInt(id, 10));
+            if (!p) return null;
+            const isPlayer = p.kind === 'PLAYER';
+            const npc = p.npcId ? npcs.find((n) => n.id === p.npcId) : undefined;
+            const hue = npc?.avatarColorOrdinal ?? 0;
+            const avatarUrl = npc?.avatarDataUrl ?? null;
+            // 正在发言：仅当前循环中该角色 = 剩余队首（含思考阶段）
+            const isSpeaking = isCurrent && currentSpeakingIndex != null && i === currentSpeakingIndex;
+            // 轮到玩家（且未在发言中）：队列首部 = 玩家 → 等待你
+            const isWaitingPlayer =
+              isCurrent &&
+              !isSpeaking &&
+              isPlayer &&
+              currentWaitingIndex != null &&
+              i === currentWaitingIndex &&
+              currentId != null &&
+              id === String(currentId);
+            return (
+              <li
+                key={`${loopNum}-${id}-${i}`}
+                className={`turn-queue-item ${isSpeaking ? 'active playing' : ''} ${isWaitingPlayer ? 'waiting-user' : ''}`}
+                onClick={() => handleQueueItemClick(loopNum, isPlayer ? 'player' : id)}
+                title={isPlayer ? t('chat.queueLocateSelf') : t('chat.queueLocateNpc', { name: speakerLabel(p) })}
+              >
+                <span className="turn-queue-idx">{i + 1}</span>
+                <Avatar name={speakerLabel(p)} colorOrdinal={hue} imageUrl={avatarUrl} size="xs" />
+                <span className="turn-queue-name">{speakerLabel(p)}</span>
+                {isPlayer && <span className="turn-queue-seat">{t('common.you')}</span>}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  };
+
+  return (
+    <div className="turn-queue">
+      <div className="turn-queue-head">
+        <span>{t('chat.queueTitle')}</span>
+        <span className="turn-queue-loop">{t('chat.queueLoops', { n: loops.length })}</span>
+      </div>
+      <div
+        className="turn-queue-body"
+        ref={bodyRef}
+        onPointerDown={onQueueScrollIntent}
+        onTouchStart={onQueueScrollIntent}
+        onWheel={onQueueScrollIntent}
+        onScroll={onQueueScroll}
+      >
+        {loops.map((loopQueue, idx) => renderLoop(loopQueue, idx + 1))}
+      </div>
+      <div className="turn-queue-foot">
+        <span>{(live?.turnOrderMode ?? session.turnOrderMode) === 'RANDOM' ? t('chat.queueRandom') : t('chat.queueFixed')}</span>
+      </div>
+    </div>
+  );
+}
+
+export default ChatView;