import type { ComponentProps, Dispatch, Ref, SetStateAction } from "react";
import type { PersonaState } from "@/shared/ai-elements/persona";
import type { StatusTone } from "@/shared/ui/status";
import type { AgentChatSessionSummary, AgentInputDelivery, AgentResponseInput } from "../api/client";
import type { AgentApprovalMode, AgentChatMessage, AgentModelOption, AgentPermissionReply, AgentPermissionRequest, AgentQuestionRequest, AgentStreamRenderState, AgentUiResult } from "../types";
import type { AgentSpeakOptions, AgentSpeechState } from "../speech";
import type { AnswerUiMapTarget } from "../answer-ui/answer-ui-view";
import type { AnswerUiSelection } from "../answer-ui/answer-ui-interaction-context";
import type { AnswerViewStateScope } from "../session-state/answer-view-state-scope";
import { AgentInteractionReply, AgentInteractionRequests } from "./agent-interaction-request-card";
import { canReplaceInteractionRequest } from "../api/interaction-requests";
import type { InteractionRequestsController } from "../hooks/use-interaction-requests";
import { AnswerViewStateProvider } from "../session-state/answer-view-state-context";
import { AnswerPartsView } from "../answer-ui/answer-parts-view";
import { ExpandableReading } from "@/shared/ui/reading-workspace";
import { canExpandAnswer, getAnswerPartsTranscript, getAnswerPresentation } from "../answer-ui/answer-presentation";
import { AgentProcessDisclosure } from "./agent-process-disclosure";
import { AgentMessageProcessContent } from "./agent-message-process-content";
import { groupMessageProcesses, hasPendingMessageInput } from "../presentation/message-process-groups";
import { AgentUserMessageText } from "./agent-user-message-text";
import { useAgentAnswerTransition } from "../hooks/use-agent-answer-transition";
import { copySelectedText } from "@/shared/ai-elements/paragraph-copy";
import { ArrowUp, ChevronLeft, Eye, History, Plus, Quote, Square, X } from "lucide-react";
import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/react";
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import { useStickToBottomContext } from "use-stick-to-bottom";
import { showMapNotice } from "@/features/map/core";
import { Agent, AgentContent } from "@/shared/ai-elements/agent";
import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from "@/shared/ai-elements/conversation";
import { Message, MessageContent } from "@/shared/ai-elements/message";
import { PromptInput, PromptInputBody, PromptInputFooter, PromptInputSubmit, PromptInputTextarea } from "@/shared/ai-elements/prompt-input";
import { Suggestion, Suggestions } from "@/shared/ai-elements/suggestion";
import { Button } from "@/shared/ui/button";
import { Separator } from "@/shared/ui/separator";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/shared/ui/tooltip";
import { cn } from "@/shared/ui/cn";
import { StatusDot } from "@/shared/ui/status";
import { AgentChatMessageActions, AgentChatMessageHeader, AgentChatMessageToolbar } from "./agent-chat-message-chrome";
import { agentLayoutTransition, agentPanelItemVariants, agentPanelListVariants } from "./agent-motion";
import { AgentPersona } from "./agent-persona";
import { AgentTopicControls } from "./agent-topic-controls";
import { AgentHistoryPanel } from "./agent-history-panel";
import { AgentMessageInbox } from "./agent-message-inbox";
import { AgentPendingInputs } from "./agent-pending-inputs";
import { AgentMessageDetails } from "./agent-message-details";
import { AgentUiEnvelopeRenderer } from "./agent-ui-envelope-renderer";
import { useAgentSpeechRecognition, useAgentSpeechSynthesis } from "../hooks/use-agent-voice";
import { stripSpeechMarkdown } from "../speech";
import type { AgentConnectionStatus } from "../types";
import { VoiceInputButton, InputDeliverySelect, ApprovalModeSelect, AgentModelSelect } from "./agent-panel-controls";
import { AgentSpeechMessage, AgentMessageSpeechControls } from "./agent-message-speech";

export type AgentCommandPanelPresentation = "desktop-dock" | "desktop-floating" | "mobile-sheet";

export type AgentWorkspaceContextItem = {
  id: string;
  label: string;
  value: string;
  tone?: "neutral" | "info" | "warning";
};

type AgentCommandPanelProps = {
  presentation?: AgentCommandPanelPresentation;
  collapsing?: boolean;
  personaState?: PersonaState;
  sessionTitle?: string;
  sessionHistory?: AgentChatSessionSummary[];
  sessionHistoryLoading?: boolean;
  historyQuery?: string;
  historyHasMore?: boolean;
  historyLoadingMore?: boolean;
  historyError?: string;
  historyPendingUpdate?: boolean;
  onHistoryQueryChange?: (value: string) => void;
  onHistoryOpen?: () => Promise<void> | void;
  onHistoryClose?: () => void;
  onLoadMoreHistory?: () => Promise<unknown> | void;
  hasOlderMessages?: boolean;
  loadingOlderMessages?: boolean;
  onLoadOlderMessages?: () => Promise<void> | void;
  backgroundStatus?: string;
  readingPosition?: { messageId?: string; offset: number; atBottom: boolean };
  onReadingPositionChange?: (position: { messageId?: string; offset: number; atBottom: boolean }) => void;
  promptSuggestions?: Array<{ question: string; sourceLabel?: string }>;
  promptSuggestionsLoading?: boolean;
  promptSuggestionsUnavailable?: boolean;
  onRetryPromptSuggestions?: () => void;
  activeSessionId?: string | null;
  answerStateScope?: AnswerViewStateScope;
  qaOnly?: boolean;
  executionHistory?: boolean;
  statusLabel?: string;
  connectionStatus?: AgentConnectionStatus;
  streaming?: boolean;
  inputDelivery?: AgentInputDelivery;
  pendingInputs?: AgentResponseInput[];
  onInputDeliveryChange?: (delivery: AgentInputDelivery) => void;
  onPendingInputDeliveryChange?: (id: string, delivery: AgentInputDelivery) => Promise<void> | void;
  onPendingInputEdit?: (id: string) => Promise<void> | void;
  onPendingInputCancel?: (id: string) => Promise<void> | void;
  onDownloadFile?: (path: string) => Promise<void> | void;
  messages?: AgentChatMessage[];
  streamRenderState?: AgentStreamRenderState;
  modelOptions?: AgentModelOption[];
  selectedModel?: string;
  currentProjectName?: string | null;
  topicControls?: ComponentProps<typeof AgentTopicControls>;
  historyTopicId?: string;
  onHistoryTopicChange?: (id: string | undefined) => void;
  onMoveSessionToTopic?: (sessionId: string, topicId: string | null) => Promise<void>;
  approvalMode?: AgentApprovalMode;
  uiResults?: AgentUiResult[];
  interactionRequests?: InteractionRequestsController;
  messageInbox?: ComponentProps<typeof AgentMessageInbox>;
  workspaceContext?: AgentWorkspaceContextItem[];
  prompt: string;
  promptFocusRequest?: number;
  promptReference?: { title: string; detail?: string; placeholder?: string };
  contentReference?: AnswerUiSelection;
  onContentReferenceChange?: (selection: AnswerUiSelection | undefined) => void;
  onCollapse: () => void;
  onPromptChange: Dispatch<SetStateAction<string>>;
  onRefreshHistory?: () => Promise<void> | void;
  onStartNewSession?: () => Promise<void> | void;
  onLoadHistorySession?: (sessionId: string) => Promise<void> | void;
  onRenameHistorySession?: (sessionId: string, title: string) => Promise<void> | void;
  onDeleteHistorySession?: (sessionId: string) => Promise<void> | void;
  onSelectModel?: (model: string) => void;
  onApprovalModeChange?: (mode: AgentApprovalMode) => void;
  onSubmitPrompt: (prompt: string) => Promise<void> | void;
  onLocateAnswerFeatures?: (target: AnswerUiMapTarget) => Promise<unknown> | void;
  onStopPrompt?: () => void;
  onReplyPermission?: (
    permission: AgentPermissionRequest,
    reply: AgentPermissionReply
  ) => Promise<void> | void;
  onReplyQuestion?: (request: AgentQuestionRequest, answers: string[][]) => Promise<void> | void;
  onRejectQuestion?: (request: AgentQuestionRequest) => Promise<void> | void;
};

export function AgentCommandPanel({
  presentation = "desktop-dock",
  collapsing = false,
  personaState,
  sessionTitle = "新对话",
  sessionHistory = [],
  sessionHistoryLoading = false,
  historyQuery, historyHasMore, historyLoadingMore, historyError, historyPendingUpdate,
  onHistoryQueryChange, onHistoryOpen, onHistoryClose, onLoadMoreHistory,
  hasOlderMessages, loadingOlderMessages, onLoadOlderMessages, backgroundStatus,
  readingPosition, onReadingPositionChange,
  promptSuggestions = [],
  promptSuggestionsLoading = false,
  promptSuggestionsUnavailable = false,
  onRetryPromptSuggestions,
  activeSessionId,
  answerStateScope,
  qaOnly = false,
  executionHistory = false,
  connectionStatus = "connecting",
  streaming = false,
  inputDelivery = "steer",
  pendingInputs = [],
  onInputDeliveryChange,
  onPendingInputDeliveryChange,
  onPendingInputEdit,
  onPendingInputCancel,
  onDownloadFile,
  messages = [],
  streamRenderState = {},
  modelOptions = [],
  selectedModel = "",
  currentProjectName,
  topicControls, historyTopicId, onHistoryTopicChange, onMoveSessionToTopic,
  approvalMode = "request",
  uiResults = [],
  interactionRequests,
  messageInbox,
  prompt,
  promptFocusRequest = 0,
  promptReference,
  contentReference,
  onContentReferenceChange,
  onCollapse,
  onPromptChange,
  onRefreshHistory,
  onStartNewSession,
  onLoadHistorySession,
  onRenameHistorySession,
  onDeleteHistorySession,
  onSelectModel,
  onApprovalModeChange,
  onSubmitPrompt,
  onLocateAnswerFeatures,
  onStopPrompt,
  onReplyPermission,
  onReplyQuestion,
  onRejectQuestion
}: AgentCommandPanelProps) {
  const [historyOpen, setHistoryOpen] = useState(false);
  const [historySelectionError, setHistorySelectionError] = useState<string | undefined>();
  const [loadingSessionId, setLoadingSessionId] = useState<string | null>(null);
  const [scrollRequestId, setScrollRequestId] = useState(0);
  const [submissionError, setSubmissionError] = useState<string | null>(null);
  const prefersReducedMotion = useReducedMotion();
  const historyTriggerRef = useRef<HTMLButtonElement | null>(null);
  const promptRestoreGenerationRef = useRef(0);
  const promptTextareaRef = useRef<HTMLTextAreaElement | null>(null);
  const mountedRef = useRef(true);
  const desktopFloating = presentation === "desktop-floating";
  const floatingPresentation = desktopFloating;
  const hasConversation = messages.length > 0 || streaming || Boolean(messageInbox?.messages.length);
  // Task discussions keep their reference and composer layout before the first message.
  const centeredComposer = !hasConversation && !loadingSessionId && !promptReference
    && uiResults.length === 0 && !messageInbox?.loading && !messageInbox?.error;
  const showStartSuggestions = centeredComposer && !qaOnly && !promptReference;
  const trimmedPrompt = prompt.trim();
  const isStopAction = streaming && !trimmedPrompt;
  const acceptsAdditionalInput = streaming || Boolean(interactionRequests?.awaitingInput);
  useEffect(() => {
    if (!promptFocusRequest) return;
    const frame = requestAnimationFrame(() => {
      const textarea = promptTextareaRef.current;
      textarea?.focus();
      textarea?.setSelectionRange(textarea.value.length, textarea.value.length);
    });
    return () => cancelAnimationFrame(frame);
  }, [promptFocusRequest]);

  const {
    speechState,
    speakingMessageId,
    speak,
    pause: pauseSpeech,
    resume: resumeSpeech,
    stop: stopSpeech,
    isSupported: isSpeechSupported
  } = useAgentSpeechSynthesis((message) => {
    showMapNotice({
      id: "agent-speech-playback-error",
      tone: "error",
      title: "语音播放失败",
      message,
      duration: 5000
    });
  });
  const appendRecognitionResult = useCallback((text: string) => {
    promptRestoreGenerationRef.current += 1;
    onPromptChange((current) => `${current}${current.trim() ? " " : ""}${text}`);
  }, [onPromptChange]);
  const showRecognitionError = useCallback((message: string) => {
    showMapNotice({
      id: "agent-speech-recognition-error",
      tone: "error",
      title: "语音输入不可用",
      message,
      duration: 5000
    });
  }, []);
  const {
    isListening,
    start: startListening,
    stop: stopListening,
    isSupported: isRecognitionSupported
  } = useAgentSpeechRecognition(appendRecognitionResult);

  useEffect(() => {
    mountedRef.current = true;
    return () => {
      mountedRef.current = false;
      promptRestoreGenerationRef.current += 1;
    };
  }, []);

  useEffect(() => {
    stopSpeech();
    setSubmissionError(null);
  }, [activeSessionId, stopSpeech]);

  useEffect(() => {
    if (streaming) stopListening();
  }, [stopListening, streaming]);

  const submitPrompt = (nextPrompt: string) => {
    if (!nextPrompt) {
      return;
    }
    const submittedReference = contentReference;
    const message = submittedReference
      ? `${nextPrompt}\n\n引用内容：${submittedReference.title}\n${submittedReference.text}`
      : nextPrompt;
    if (message.length > 10000) {
      setSubmissionError(`消息与引用合计 ${message.length.toLocaleString()} 字，超过 10,000 字。请缩短问题或减少引用内容后再发送。`);
      return;
    }
    setSubmissionError(null);
    const restoreGeneration = promptRestoreGenerationRef.current + 1;
    promptRestoreGenerationRef.current = restoreGeneration;
    onPromptChange("");
    stopListening();
    setScrollRequestId((requestId) => requestId + 1);
    onContentReferenceChange?.(undefined);
    void Promise.resolve().then(() => onSubmitPrompt(message)).catch(() => {
      if (!mountedRef.current || promptRestoreGenerationRef.current !== restoreGeneration) {
        return;
      }
      onPromptChange((current) => current || nextPrompt);
      if (submittedReference) onContentReferenceChange?.(submittedReference);
    });
  };
  const historyPanel = (
    <AgentHistoryPanel
      open={historyOpen}
      onOpenChange={(open) => { setHistoryOpen(open); if (!open) onHistoryClose?.(); }}
      triggerRef={historyTriggerRef}
      scopeLabel={currentProjectName ?? "当前项目"}
      query={historyQuery} onQueryChange={onHistoryQueryChange}
      hasMore={historyHasMore} loadingMore={historyLoadingMore} error={historySelectionError ?? historyError}
      pendingUpdate={historyPendingUpdate} onLoadMore={onLoadMoreHistory}
      activeSessionId={activeSessionId}
      loadingSessionId={loadingSessionId}
      loading={sessionHistoryLoading}
      sessions={sessionHistory}
      topics={topicControls?.topics} topicId={historyTopicId} onTopicChange={onHistoryTopicChange} onMoveSessionToTopic={onMoveSessionToTopic}
      onRefresh={onRefreshHistory}
      onSelectSession={(nextSessionId) => {
        promptRestoreGenerationRef.current += 1;
        setLoadingSessionId(nextSessionId);
        setHistorySelectionError(undefined);
        void Promise.resolve(onLoadHistorySession?.(nextSessionId))
          .then(() => { setHistoryOpen(false); onHistoryClose?.(); })
          .catch((error: unknown) => setHistorySelectionError(error instanceof Error ? error.message : "无法打开这个历史会话"))
          .finally(() => setLoadingSessionId(null));
      }}
      onRenameSession={onRenameHistorySession}
      onDeleteSession={onDeleteHistorySession}
    />
  );
  return (
    <AnswerViewStateProvider scope={answerStateScope} sessionId={activeSessionId}>
    <MotionConfig reducedMotion="user">
      {historyPanel}
      <motion.aside
        onCopy={copySelectedText}
        aria-label="Agent 命令面板"
        data-agent-presentation={presentation}
        data-agent-starting={!hasConversation}
        data-agent-centered={centeredComposer}
        initial={prefersReducedMotion ? false : { opacity: 0, x: -8, scale: 0.985 }}
        animate={collapsing ? { opacity: 0, x: -8, scale: 0.985 } : { opacity: 1, x: 0, scale: 1 }}
        transition={prefersReducedMotion ? { duration: 0 } : agentLayoutTransition}
        style={{ transformOrigin: "left top" }}
        onClickCapture={(event) => {
          const target = event.target instanceof Element ? event.target.closest("a") : null;
          const href = target?.getAttribute("href");
          if (!href?.startsWith("/api/v1/session/") || !href.includes("/files/")) return;
          event.preventDefault();
          event.stopPropagation();
          void onDownloadFile?.(href);
        }}
        className={cn(
          "pointer-events-auto flex h-full min-h-0 w-full flex-col",
          "agent-panel-shell",
          presentation === "desktop-dock"
            ? "surface-dock overflow-hidden rounded-none border-0 border-r"
            : desktopFloating
              ? "acrylic-panel overflow-visible rounded-2xl border"
              : "overflow-hidden rounded-none border-0 bg-transparent",
          collapsing && "pointer-events-none"
        )}
      >
        <Agent
          className={cn(
            "relative flex h-full min-h-0 flex-col border-0 bg-transparent",
            floatingPresentation && "gap-1 overflow-visible p-1"
          )}
        >
          <div className="relative z-30 h-20 shrink-0">
            <header
              className={cn(
                "agent-panel-header agent-panel-header-expandable inset-x-0 top-0 overflow-hidden",
                floatingPresentation && "agent-panel-integrated-header",
                presentation === "mobile-sheet" && "agent-panel-header-mobile"
              )}
            >
              <div className="flex h-20 items-center justify-between gap-2 px-2 py-2 sm:px-3">
                <div className="flex min-w-0 flex-1 items-center gap-2">
                  <AgentPersona state={personaState} />
                  <div className="flex min-w-0 flex-1 flex-col items-start gap-1.5">
                    <div className="flex min-w-0 max-w-full items-center gap-1 sm:gap-2">
                      <p className="shrink-0 whitespace-nowrap text-sm font-semibold leading-5 text-foreground">供水助手</p>
                      <p role="status" title={agentConnectionMetadata[connectionStatus].label}
                        className="flex shrink-0 items-center gap-1 whitespace-nowrap text-xs leading-4 text-muted-foreground sm:gap-1.5">
                        <StatusDot tone={agentConnectionMetadata[connectionStatus].tone} activity={connectionStatus === "connecting" ? "live" : "static"} />
                        <span>{agentConnectionMetadata[connectionStatus].label}</span>
                      </p>
                    </div>
                    {topicControls && !qaOnly ? <AgentTopicControls {...topicControls} /> : null}
                  </div>
                </div>
                <div role="group" aria-label="对话操作" className="flex shrink-0 items-center gap-0.5">
                  <Button variant="ghost" size="icon"
                    type="button"
                    aria-label="新建 Agent 对话"
                    title="新建 Agent 对话"
                    onClick={() => {
                      promptRestoreGenerationRef.current += 1;
                      setHistoryOpen(false);
                      void Promise.resolve(onStartNewSession?.());
                    }}
                    className="agent-panel-icon-button grid h-10 w-10 shrink-0 place-items-center rounded-xl text-[var(--ink-muted)]"
                  >
                    <Plus size={17} aria-hidden="true" />
                  </Button>
                  <Button variant="ghost" size="icon"
                    ref={historyTriggerRef}
                    type="button"
                    aria-label="打开 Agent 历史记录"
                    title="打开 Agent 历史记录"
                    aria-expanded={historyOpen}
                    aria-haspopup="dialog"
                    onClick={() => {
                      setHistoryOpen(true);
                      void Promise.resolve(onHistoryOpen?.()).catch(() => {});
                    }}
                    className="agent-panel-icon-button grid h-10 w-10 shrink-0 place-items-center rounded-xl text-[var(--ink-muted)] aria-expanded:bg-[var(--surface-control)] aria-expanded:text-foreground"
                  >
                    <History size={17} aria-hidden="true" />
                  </Button>
                  {presentation === "mobile-sheet" ? (
                    <Button variant="ghost" size="icon"
                      type="button"
                      aria-label="关闭 Agent 面板"
                      title="关闭 Agent 面板"
                      onClick={onCollapse}
                      className="agent-panel-icon-button grid h-10 w-10 shrink-0 place-items-center rounded-xl text-[var(--ink-muted)]"
                    >
                      <X size={17} aria-hidden="true" />
                    </Button>
                  ) : (
                    <Button variant="ghost" size="icon"
                      type="button"
                      aria-label="折叠 Agent 面板"
                      title="折叠 Agent 面板"
                      onClick={onCollapse}
                      className="agent-panel-icon-button grid h-10 w-10 shrink-0 place-items-center rounded-xl text-[var(--ink-muted)]"
                    >
                      <ChevronLeft size={17} aria-hidden="true" />
                    </Button>
                  )}
                </div>
              </div>
            </header>
          </div>

          <Separator data-agent-header-divider className="bg-border/40" />
          {hasConversation || sessionTitle !== "新对话" ? <div className="agent-chat-context-bar">
            <p className="line-clamp-2 min-w-0 break-words text-sm font-medium text-foreground" title={sessionTitle}>
              {sessionTitle}
            </p>
          </div> : null}

          {backgroundStatus ? <button type="button" className="mx-3 mb-2 rounded-lg bg-[var(--surface-control)] px-3 py-2 text-left text-xs text-muted-foreground"
            onClick={() => { setHistoryOpen(true); void Promise.resolve(onHistoryOpen?.()).catch(() => {}); }}>{backgroundStatus}</button> : null}
          <motion.div layoutScroll className="agent-panel-body relative flex min-h-0 flex-1 flex-col">
            <AgentContent className="agent-panel-main-content flex min-h-0 flex-1 flex-col gap-0 p-0">
              <Conversation
                data-agent-conversation-state={hasConversation ? "active" : "empty"}
                className={cn(
                  "agent-panel-conversation min-h-0",
                  floatingPresentation && "agent-panel-conversation-canvas"
                )}
              >
                <ConversationContent
                  className={cn(
                    "gap-4 p-3",
                    messages.length === 0 && "min-h-full",
                    floatingPresentation && "agent-panel-conversation-content",
                    floatingPresentation &&
                      !hasConversation &&
                      "agent-panel-conversation-content-empty"
                  )}
                >
                  <AgentOlderMessages hasMore={hasOlderMessages} loading={loadingOlderMessages}
                    onLoad={onLoadOlderMessages} sessionId={activeSessionId} messages={messages} />
                  {loadingSessionId && !hasConversation ? (
                    <p role="status" className="p-4 text-center text-sm text-muted-foreground">正在加载对话…</p>
                  ) : null}
                  <AnimatePresence mode="popLayout" initial={false}>
                    {messages.length > 0 || Boolean(messageInbox?.messages.length) ? (
                      <BackendMessageList
                        key="messages"
                        presentation={presentation}
                        messages={messages}
                        streaming={streaming}
                        streamRenderState={streamRenderState}
                        interactionRequests={interactionRequests}
                        onReplyPermission={onReplyPermission}
                        onReplyQuestion={onReplyQuestion}
                        onRejectQuestion={onRejectQuestion}
                        isSpeechSupported={isSpeechSupported}
                        speakingMessageId={speakingMessageId}
                        speechState={speechState}
                        onSpeak={speak}
                        onPauseSpeech={pauseSpeech}
                        onResumeSpeech={resumeSpeech}
                        onStopSpeech={stopSpeech}
                        qaOnly={qaOnly}
                        showProcess={!qaOnly || executionHistory}
                        onLocateAnswerFeatures={onLocateAnswerFeatures}
                        onSubmitAnswerForm={onSubmitPrompt}

                      />
                    ) : null}
                  </AnimatePresence>

                  {!qaOnly ? <AgentUiEnvelopeRenderer results={uiResults} /> : null}
                  {interactionRequests ? <AgentInteractionRequests controller={interactionRequests}
                    representedMessageIds={new Set(messages.filter((message) => message.role === "user").map((message) => message.id))} /> : null}
                  {messageInbox ? <AgentMessageInbox {...messageInbox} /> : null}
                </ConversationContent>
                <AgentConversationScrollManager
                  readingPosition={readingPosition}
                  onPositionChange={onReadingPositionChange}
                  activeSessionId={activeSessionId}
                  messages={messages}
                  scrollRequestId={scrollRequestId}
                  streaming={streaming}
                />
                <ConversationScrollButton
                  data-agent-presentation={presentation}
                  className={cn(
                    "agent-panel-overlay agent-panel-floating-acrylic agent-conversation-scroll-button",
                    floatingPresentation ? "bottom-[10.25rem] z-30" : "bottom-3"
                  )}
                />
              </Conversation>
            </AgentContent>

            <div
              className={cn(
                "agent-panel-band relative",
                floatingPresentation
                  ? "agent-panel-floating-acrylic agent-panel-composer absolute bottom-3 z-20 rounded-2xl p-1"
                  : "border-t border-[var(--surface-divider)] p-3"
              )}
            >
              {executionHistory ? (
                <div role="note" className="agent-panel-control mb-1 flex min-h-14 items-center gap-2.5 rounded-xl px-3 py-2 text-sm">
                  <Eye className="size-4 shrink-0 text-muted-foreground" aria-hidden />
                  <div className="min-w-0">
                    <p className="font-medium text-foreground">执行记录自动同步</p>
                    <p className="text-xs leading-5 text-muted-foreground">发送消息后进入独立调试会话，系统执行记录不会被修改。</p>
                  </div>
                </div>
              ) : null}
              {centeredComposer && !promptReference ? (
                <ConversationEmptyState className="agent-chat-empty-state">
                  <h2 className="text-2xl font-medium tracking-tight text-foreground">有什么可以帮你？</h2>
                </ConversationEmptyState>
              ) : null}
              <motion.div
                className="agent-panel-composer-motion"
                layout={prefersReducedMotion ? false : "position"}
                layoutDependency={centeredComposer}
                transition={{ layout: agentLayoutTransition }}
              >
                <AgentPendingInputs presentation={presentation} inputs={pendingInputs}
                  onDeliveryChange={onPendingInputDeliveryChange}
                  onEdit={onPendingInputEdit} onCancel={onPendingInputCancel} />
                <PromptInput
                  className="@container/agent-composer agent-panel-control agent-panel-input-form overflow-hidden rounded-2xl [&>[data-slot=input-group]]:rounded-[inherit] [&>[data-slot=input-group]]:border-0 [&>[data-slot=input-group]]:shadow-none"
                  onSubmit={(message) => {
                    const nextPrompt = message.text.trim();
                    if (nextPrompt) {
                      submitPrompt(nextPrompt);
                    }
                  }}
                >
                  <PromptInputBody className="agent-panel-input-body">
                    {contentReference ? <div role="group" aria-label="已选内容引用" className="agent-panel-input-reference mx-3 mt-2 flex min-w-0 items-start gap-1.5 text-sm leading-5">
                      <Quote size={14} className="mt-2 shrink-0 text-muted-foreground" aria-hidden />
                      <details className="min-w-0 flex-1 py-1.5">
                        <summary className="flex cursor-pointer list-none flex-wrap items-baseline gap-x-2 gap-y-1 rounded-sm focus-visible:outline-2 focus-visible:outline-ring">
                          <span className="min-w-0 truncate font-medium">{contentReference.title}</span>
                          <span className="shrink-0 text-muted-foreground">查看引用内容</span>
                        </summary>
                        <p className="mt-2 max-h-32 overflow-y-auto whitespace-pre-wrap break-words text-muted-foreground">{contentReference.text}</p>
                        <div className="mt-2 flex flex-wrap gap-1" aria-label="引用内容的分析方向">
                          {["解释这些内容", "比较差异与关联", "核查依据与缺口"].map((intent) => <Button key={intent} type="button" variant="outline" size="sm" className="h-8 text-sm"
                            onClick={() => {
                              promptRestoreGenerationRef.current += 1;
                              onPromptChange((current) => current.trim() ? `${current}\n${intent}` : intent);
                              setSubmissionError(null);
                              promptTextareaRef.current?.focus();
                            }}>{intent}</Button>)}
                        </div>
                      </details>
                      <Button type="button" size="icon" variant="ghost" className="size-8 shrink-0" aria-label="移除内容引用" title="移除内容引用"
                        onClick={() => { onContentReferenceChange?.(undefined); setSubmissionError(null); }}><X size={14} aria-hidden /></Button>
                    </div> : null}
                    {promptReference ? (
                      <div role="group" aria-label="对话引用" className="agent-panel-input-reference mx-3 mt-2 flex min-w-0 items-start gap-1.5 py-1 text-sm leading-5 text-muted-foreground">
                        <Quote aria-hidden="true" className="mt-0.5 size-3.5 shrink-0" />
                        <div className="min-w-0 flex-1 break-words">
                          <span data-agent-reference-title className="font-medium text-foreground">{promptReference.title}</span>
                          {promptReference.detail ? <>{" "}<span data-agent-reference-detail className="ml-1">{promptReference.detail.split(" · ").map((detail, index) => <span key={detail} className="inline-block whitespace-nowrap">{index ? " · " : ""}{detail}</span>)}</span></> : null}
                        </div>
                      </div>
                    ) : null}
                    <PromptInputTextarea
                      ref={promptTextareaRef}
                      value={prompt}
                      onChange={(event) => {
                        setSubmissionError(null);
                        promptRestoreGenerationRef.current += 1;
                        onPromptChange(event.currentTarget.value);
                      }}
                      className={cn("agent-panel-prompt-textarea text-base", floatingPresentation ? "min-h-20" : "min-h-14")}
                      aria-label={promptReference?.placeholder ?? "询问供水问题，或描述需要处理的任务"}
                      placeholder={promptReference?.placeholder ?? (streaming ? "继续补充，或安排下一条消息…" : "询问供水问题，或描述需要处理的任务")}
                    />
                  </PromptInputBody>
                  {submissionError ? <p role="alert" className="mx-3 mb-2 text-sm leading-5 text-destructive">{submissionError}</p> : null}
                  <PromptInputFooter className="agent-panel-input-tools justify-between gap-2">
                    <div className="flex min-w-0 items-center gap-1">
                      <ApprovalModeSelect presentation={presentation} value={approvalMode} disabled={streaming} onValueChange={onApprovalModeChange} />
                    </div>
                    <div className="flex shrink-0 items-center gap-1">
                      {acceptsAdditionalInput ? <InputDeliverySelect presentation={presentation} label="消息发送方式"
                        value={inputDelivery} onValueChange={onInputDeliveryChange} /> : <AgentModelSelect
                        presentation={presentation}
                        models={modelOptions}
                        value={selectedModel}
                        onValueChange={onSelectModel}
                      />}
                      {isRecognitionSupported && !streaming ? (
                        <VoiceInputButton
                          isListening={isListening}
                          disabled={streaming}
                          onClick={
                            isListening ? stopListening : () => startListening(showRecognitionError)
                          }
                        />
                      ) : null}
                      <PromptInputSubmit
                        aria-label={isStopAction ? "停止 Agent 指令" : acceptsAdditionalInput ? inputDelivery === "steer" ? "引导当前 Agent 任务" : "将消息加入 Agent 队列" : "发送 Agent 指令"}
                        title={isStopAction ? "停止 Agent 指令" : acceptsAdditionalInput ? inputDelivery === "steer" ? "引导当前 Agent 任务" : "将消息加入 Agent 队列" : "发送 Agent 指令"}
                        className="agent-panel-primary-icon size-10 shrink-0"
                        data-agent-action={isStopAction ? "stop" : "send"}
                        disabled={!streaming && !trimmedPrompt}
                        status={isStopAction ? "streaming" : "ready"}
                        onStop={onStopPrompt}
                      >
                        {isStopAction ? <Square className="size-4" aria-hidden /> : <ArrowUp
                          className="agent-panel-send-icon size-5"
                          aria-hidden="true"
                        />}
                      </PromptInputSubmit>
                    </div>
                  </PromptInputFooter>
                </PromptInput>
              </motion.div>
              {showStartSuggestions ? (
                <TooltipProvider delayDuration={250}>
                  <Suggestions className="agent-chat-suggestions" role="group" aria-label="推荐问题" aria-live="polite" aria-busy={promptSuggestionsLoading}>
                    {promptSuggestionsLoading && promptSuggestions.length === 0 ? (
                      <p className="agent-panel-suggestion-status">正在根据最近活动整理问题…</p>
                    ) : promptSuggestions.length ? promptSuggestions.map((suggestion) => (
                      <Tooltip key={suggestion.question}>
                        <TooltipTrigger asChild>
                          <Suggestion
                            suggestion={suggestion.question}
                            onClick={submitPrompt}
                            className="agent-chat-suggestion"
                          >
                            <span className="min-w-0 whitespace-normal break-words text-left">{suggestion.question}</span>
                            {suggestion.sourceLabel ? <span className="sr-only">来源：{suggestion.sourceLabel}</span> : null}
                          </Suggestion>
                        </TooltipTrigger>
                        <TooltipContent className="max-w-72 bg-zinc-900 text-white">
                          <p className="leading-5">{suggestion.question}</p>
                          {suggestion.sourceLabel ? <p className="mt-1 text-[11px] text-zinc-300">{suggestion.sourceLabel}</p> : null}
                        </TooltipContent>
                      </Tooltip>
                    )) : (
                      <div className="agent-panel-suggestion-status">
                        <p>{promptSuggestionsUnavailable ? "推荐问题暂不可用，可直接输入任务。" : "描述调查目标，即可开始分析。"}</p>
                        {promptSuggestionsUnavailable && onRetryPromptSuggestions && (
                          <Button variant="ghost" size="sm" onClick={onRetryPromptSuggestions}>重试推荐</Button>
                        )}
                      </div>
                    )}
                  </Suggestions>
                </TooltipProvider>
              ) : null}
            </div>
          </motion.div>
        </Agent>
      </motion.aside>
    </MotionConfig>
    </AnswerViewStateProvider>
  );
}

type AgentConversationScrollSnapshot = {
  activeSessionId?: string | null;
  lastMessageRevision: string;
  lastUserMessageId: string | null;
  scrollRequestId: number;
  streaming: boolean;
};

function AgentConversationScrollManager({
  activeSessionId,
  messages,
  scrollRequestId,
  streaming,
  readingPosition,
  onPositionChange,
}: {
  activeSessionId?: string | null;
  messages: AgentChatMessage[];
  scrollRequestId: number;
  streaming: boolean;
  readingPosition?: { messageId?: string; offset: number; atBottom: boolean };
  onPositionChange?: (position: { messageId?: string; offset: number; atBottom: boolean }) => void;
}) {
  const { scrollToBottom, scrollRef, stopScroll } = useStickToBottomContext();
  const positionRef = useRef(readingPosition);
  const onPositionRef = useRef(onPositionChange);
  positionRef.current = readingPosition;
  onPositionRef.current = onPositionChange;
  useEffect(() => {
    const scroll = scrollRef.current;
    if (!scroll) return;
    const save = () => {
      const top = scroll.getBoundingClientRect().top;
      const message = [...scroll.querySelectorAll<HTMLElement>("[data-agent-message-id]")]
        .find((element) => element.getBoundingClientRect().bottom > top);
      onPositionRef.current?.({ messageId: message?.dataset.agentMessageId,
        offset: message ? message.getBoundingClientRect().top - top : 0,
        atBottom: scroll.scrollHeight - scroll.clientHeight - scroll.scrollTop < 24 });
    };
    scroll.addEventListener("scroll", save, { passive: true });
    return () => scroll.removeEventListener("scroll", save);
  }, [activeSessionId, scrollRef]);
  const previousSnapshotRef = useRef<AgentConversationScrollSnapshot | null>(null);
  const lastUserMessageId = getLastUserMessageId(messages);
  const lastMessageRevision = getLastMessageRevision(messages);
  const snapshot = useMemo<AgentConversationScrollSnapshot>(
    () => ({
      activeSessionId,
      lastMessageRevision,
      lastUserMessageId,
      scrollRequestId,
      streaming
    }),
    [activeSessionId, lastMessageRevision, lastUserMessageId, scrollRequestId, streaming]
  );

  useEffect(() => {
    const previousSnapshot = previousSnapshotRef.current;
    previousSnapshotRef.current = snapshot;

    const forceScroll =
      !previousSnapshot ||
      previousSnapshot.activeSessionId !== snapshot.activeSessionId ||
      previousSnapshot.scrollRequestId !== snapshot.scrollRequestId;

    if (!forceScroll) {
      return;
    }

    const animationFrameId = window.requestAnimationFrame(() => {
      const position = positionRef.current;
      if (previousSnapshot?.activeSessionId !== snapshot.activeSessionId && position && !position.atBottom && position.messageId) {
        const scroll = scrollRef.current;
        const target = scroll?.querySelector<HTMLElement>(`[data-agent-message-id="${CSS.escape(position.messageId)}"]`);
        if (scroll && target) {
          stopScroll();
          scroll.scrollTop += target.getBoundingClientRect().top - scroll.getBoundingClientRect().top - position.offset;
          return;
        }
      }
      void scrollToBottom({
        animation: "instant",
        ignoreEscapes: true,
        wait: false
      });
    });

    return () => window.cancelAnimationFrame(animationFrameId);
  }, [scrollRef, scrollToBottom, snapshot, stopScroll]);

  return null;
}

function AgentOlderMessages({ hasMore, loading, onLoad, sessionId, messages }: {
  hasMore?: boolean; loading?: boolean; onLoad?: () => Promise<void> | void;
  sessionId?: string | null; messages: AgentChatMessage[];
}) {
  const { scrollRef, stopScroll } = useStickToBottomContext();
  const anchor = useRef<{ id?: string; top: number; height: number; sessionId?: string | null } | null>(null);
  const pending = useRef(false);
  const load = useCallback(async () => {
    const scroll = scrollRef.current;
    if (!scroll || !hasMore || loading || pending.current || !onLoad) return;
    const visible = [...scroll.querySelectorAll<HTMLElement>("[data-agent-message-id]")]
      .find((element) => element.getBoundingClientRect().bottom > scroll.getBoundingClientRect().top);
    anchor.current = { id: visible?.dataset.agentMessageId, top: visible?.getBoundingClientRect().top ?? 0,
      height: scroll.scrollHeight, sessionId };
    pending.current = true;
    stopScroll();
    try { await onLoad(); } finally { pending.current = false; }
  }, [hasMore, loading, onLoad, scrollRef, sessionId, stopScroll]);
  useLayoutEffect(() => {
    const prior = anchor.current;
    const scroll = scrollRef.current;
    if (!prior || !scroll || prior.sessionId !== sessionId || scroll.scrollHeight === prior.height) return;
    const visible = prior.id ? scroll.querySelector<HTMLElement>(`[data-agent-message-id="${CSS.escape(prior.id)}"]`) : null;
    if (visible) scroll.scrollTop += visible.getBoundingClientRect().top - prior.top;
    anchor.current = null;
  }, [messages, scrollRef, sessionId]);
  useEffect(() => {
    const scroll = scrollRef.current;
    if (!scroll) return;
    const onScroll = () => { if (scroll.scrollTop < 64) void load(); };
    scroll.addEventListener("scroll", onScroll, { passive: true });
    return () => scroll.removeEventListener("scroll", onScroll);
  }, [load, scrollRef]);
  return hasMore ? <Button variant="ghost" className="w-full shrink-0" loading={loading}
    onClick={() => void load()}>加载更早消息</Button> : null;
}

function getLastMessageRevision(messages: AgentChatMessage[]) {
  const lastMessage = messages.at(-1);

  if (!lastMessage) {
    return "";
  }

  const progressRevision =
    lastMessage.progress?.map((item) => `${item.id}:${item.status}`).join("|") ?? "";

  return `${lastMessage.id}:${lastMessage.content.length}:${progressRevision}`;
}

function getLastUserMessageId(messages: AgentChatMessage[]) {
  for (let index = messages.length - 1; index >= 0; index -= 1) {
    if (messages[index].role === "user") {
      return messages[index].id;
    }
  }

  return null;
}

const agentConnectionMetadata = {
  connecting: { label: "连接中", tone: "info" },
  online: { label: "在线", tone: "success" },
  offline: { label: "离线", tone: "danger" }
} satisfies Record<AgentConnectionStatus, { label: string; tone: StatusTone }>;

type BackendMessageListProps = {
  presentation: AgentCommandPanelPresentation;
  messages: AgentChatMessage[];
  streaming: boolean;
  streamRenderState: AgentStreamRenderState;
  onReplyPermission?: (permission: AgentPermissionRequest, reply: AgentPermissionReply) => Promise<void> | void;
  onReplyQuestion?: (request: AgentQuestionRequest, answers: string[][]) => Promise<void> | void;
  onRejectQuestion?: (request: AgentQuestionRequest) => Promise<void> | void;
  isSpeechSupported: boolean;
  speakingMessageId: string | null;
  speechState: AgentSpeechState;
  onSpeak: (messageId: string, text: string, options?: AgentSpeakOptions) => Promise<void> | void;
  onPauseSpeech: () => void;
  onResumeSpeech: () => void;
  onStopSpeech: () => void;
  qaOnly: boolean;
  showProcess: boolean;
  onLocateAnswerFeatures?: (target: AnswerUiMapTarget) => Promise<unknown> | void;
  onSubmitAnswerForm: (text: string) => Promise<void> | void;
  interactionRequests?: InteractionRequestsController;
};

function BackendMessageList(props: BackendMessageListProps) {
  const { messages, streaming, interactionRequests } = props;
  const replies = new Map<string, InteractionRequestsController["entries"][number]>();
  for (const message of messages) {
    if (message.role === "user" && message.interactionReply) replies.set(message.id, {
      record: message.interactionReply, draft: message.interactionReply.draft, dirty: false, busy: false,
    });
  }
  for (const entry of interactionRequests?.entries ?? []) {
    if (!entry.record.delivery || !["answered", "skipped"].includes(entry.record.status)) continue;
    const id = entry.record.delivery.native_message_id;
    const previous = replies.get(id);
    if (!previous || canReplaceInteractionRequest(entry.record, previous.record)) replies.set(id, entry);
  }
  const processGroups = groupMessageProcesses(messages, [...replies.values()].map(({ record }) => record));
  return (
    <motion.div
      className="agent-chat-message-list flex w-full flex-col gap-6"
      variants={agentPanelListVariants}
      animate="animate"
    >
      <AnimatePresence initial={false} mode="popLayout">
        {messages.map((message, index) => {
          return (
            <BackendMessage
              key={message.id}
              {...props}
              message={message}
              processMessages={processGroups.get(message.id) ?? []}
              running={streaming && index === messages.length - 1}
              reply={message.role === "user" ? replies.get(message.id) : undefined}
            />
          );
        })}
      </AnimatePresence>
    </motion.div>
  );
}

function BackendMessage({
  ref,
  message: incomingMessage,
  processMessages: incomingProcessMessages,
  running,
  reply,
  presentation,
  streamRenderState,
  onReplyPermission,
  onReplyQuestion,
  onRejectQuestion,
  isSpeechSupported,
  speakingMessageId,
  speechState,
  onSpeak,
  onPauseSpeech,
  onResumeSpeech,
  onStopSpeech,
  qaOnly,
  showProcess,
  onLocateAnswerFeatures,
  onSubmitAnswerForm,
  interactionRequests,
}: BackendMessageListProps & {
  ref?: Ref<HTMLDivElement>;
  message: AgentChatMessage;
  processMessages: AgentChatMessage[];
  running: boolean;
  reply?: InteractionRequestsController["entries"][number];
}) {
  const transition = useAgentAnswerTransition(incomingMessage, running && incomingMessage.role === "assistant");
  const { message, completed } = transition;
  const processMessages = incomingProcessMessages.map((source) => (source.id === message.id ? message : source));
  const answer = getAnswerPresentation(message);
  const needsReply = hasPendingMessageInput(message);
  if (message.role === "assistant" && !processMessages.length && !answer.report.length && !needsReply) return null;

  const reportText = getAnswerPartsTranscript(answer.report);
  const hasOutput = answer.report.length > 0;
  const speech =
    completed && hasOutput && isSpeechSupported ? (
      <AgentMessageSpeechControls
        speechState={speakingMessageId === message.id ? speechState : "idle"}
        onSpeak={() => void Promise.resolve(onSpeak(message.id, stripSpeechMarkdown(reportText)))}
        onPause={onPauseSpeech}
        onResume={onResumeSpeech}
        onStop={onStopSpeech}
      />
    ) : null;
  const copy = completed ? <AgentChatMessageActions parts={answer.report} /> : null;
  const processComplete = completed;
  const hasProcess =
    message.role === "assistant" &&
    processMessages.some(
      (source) =>
        getAnswerPresentation(source).process.length > 0 ||
        (showProcess && source.progress?.length) ||
        (!qaOnly && !hasPendingMessageInput(source)
          && (source.todos?.todos.length || source.permissions?.length || source.questions?.length)),
    );
  const hasProcessError = processMessages.some((source) => source.progress?.some((item) => item.status === "error"));
  return (
    <motion.div
      ref={ref}
      className={cn("w-full", message.role === "user" && "flex justify-end")}
      initial="initial"
      animate="animate"
      exit="exit"
      variants={agentPanelItemVariants}
    >
      <Message
        data-agent-message-id={message.id}
        from={message.role}
        className={message.role === "user" ? "max-w-[92%]" : "max-w-full"}
      >
        <MessageContent
          className={cn(
            message.role === "user" &&
              "agent-panel-user-message rounded-2xl px-3 py-3 text-base leading-7 text-slate-800",
            message.role === "assistant" &&
              "agent-panel-message w-full rounded-2xl p-3 text-base leading-7 text-slate-700",
          )}
        >
          <motion.div
            ref={transition.root}
            initial={false}
            animate={transition.controls}
            data-answer-phase={transition.phase}
            className="space-y-3"
          >
            {message.role === "assistant" ? <AgentChatMessageHeader running={!completed} /> : null}
            {message.role === "assistant" && message.taskContext ? (
              <p className="text-sm leading-5 text-[var(--ink-muted)]">
                依据：
                {message.taskContext.execution_generation == null
                  ? "历史资料 · 轮次未记录"
                  : `第 ${message.taskContext.execution_generation} 轮`}
                {message.taskContext.report_revision == null
                  ? " · 尚无报告"
                  : ` · 报告第 ${message.taskContext.report_revision} 版`}
              </p>
            ) : null}
            {hasOutput ? (
              message.role === "assistant" ? (
                <AgentSpeechMessage
                  presentation={presentation}
                  messageId={message.id}
                  content={reportText}
                  disabled={!completed}
                  isSupported={isSpeechSupported}
                  onSpeak={onSpeak}
                >
                  <ExpandableReading
                    title="对话中的分析报告"
                    enabled={canExpandAnswer(answer.report)}
                    summary={
                      <p className="line-clamp-3">
                        {answer.report.find((part) => part.type === "text")?.text ?? "交互内容已在工作区展开。"}
                      </p>
                    }
                  >
                    <AnswerPartsView
                      parts={answer.report}
                      persist={answer.final && completed}
                      messageId={message.id}
                      disabled={!completed}
                      streaming={!answer.final && !completed}
                      streamDone={answer.final || (streamRenderState[message.id]?.done ?? completed)}
                      onLocate={onLocateAnswerFeatures}
                      onSubmit={onSubmitAnswerForm}
                    />
                  </ExpandableReading>
                </AgentSpeechMessage>
              ) : reply ? (
                <AgentInteractionReply
                  entry={reply}
                  checking={interactionRequests?.checking ?? false}
                  onResume={() => void interactionRequests?.act(reply.record.interaction_id, "resume")}
                />
              ) : (
                <AgentUserMessageText content={message.content} />
              )
            ) : null}
            {message.role === "assistant" && processComplete && hasProcessError ? (
              <p role="status" className="text-xs text-[var(--status-warning-foreground)]">
                部分查询或工具未完成，可展开处理过程查看原因。
              </p>
            ) : null}
            {message.role === "assistant" &&
            !qaOnly &&
            (needsReply ||
              (!completed && processMessages.length > 0) ||
              (processMessages.length > 0 && !hasProcess)) ? (
              <AgentMessageDetails
                message={message}
                onReplyPermission={onReplyPermission}
                onReplyQuestion={onReplyQuestion}
                onRejectQuestion={onRejectQuestion}
              />
            ) : null}
            {hasProcess ? (
              <AgentProcessDisclosure
                key="message-process"
                label="查看处理过程"
                live={!completed}
                toolbar={(trigger) => (
                  <AgentChatMessageToolbar speech={speech} copy={copy}>
                    {trigger}
                  </AgentChatMessageToolbar>
                )}
              >
                <AgentMessageProcessContent
                  messages={processMessages}
                  qaOnly={qaOnly}
                  showProgress={showProcess}
                  runningMessageId={!completed ? message.id : undefined}
                />
              </AgentProcessDisclosure>
            ) : null}
            {message.role === "assistant" && completed && hasOutput && !hasProcess ? (
              <AgentChatMessageToolbar speech={speech} copy={copy} />
            ) : null}
          </motion.div>
        </MessageContent>
      </Message>
    </motion.div>
  );
}