import "./QuickChatFAB.css";
import {
  memo,
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
  type KeyboardEvent as ReactKeyboardEvent,
  type ReactNode,
} from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import type { Components } from "react-markdown";
import { ChevronDown, Eye, EyeOff, MessageSquare, Paperclip, Plus, Send, Square, Wrench, X } from "lucide-react";
import { fetchDiscoveredSkills, fetchModels, type Agent, type ModelInfo } from "../api";
import type { DiscoveredSkill } from "@fusion/dashboard";
import { CustomModelDropdown } from "./CustomModelDropdown";
import { ProviderIcon } from "./ProviderIcon";
import { AgentMentionPopup } from "./AgentMentionPopup";
import { matchesAgentMentionFilter } from "./mentionMatching";
import { FN_AGENT_ID, useQuickChat, type ChatMessageInfo, type ToolCallInfo } from "../hooks/useQuickChat";
import { useAgents } from "../hooks/useAgents";
import { FileMentionPopup } from "./FileMentionPopup";
import { useFileMention } from "../hooks/useFileMention";
import { useMobileKeyboard } from "../hooks/useMobileKeyboard";
import { useViewportMode } from "../hooks/useViewportMode";

interface PendingAttachment {
  file: File;
  /** Object URL for image previews; empty string for non-image attachments. */
  previewUrl: string;
}

interface QuickChatFABProps {
  projectId?: string;
  addToast: (msg: string, type?: "success" | "error" | "warning") => void;
  /** When false, the FAB button is hidden but the panel can still be opened programmatically via the open prop */
  showFAB?: boolean;
  /** When true, the chat panel is open */
  open?: boolean;
  /** Callback when the panel should be opened/closed */
  onOpenChange?: (open: boolean) => void;
  /** List of favorite provider names in preferred order */
  favoriteProviders?: string[];
  /** List of favorited model identifiers in format "{provider}/{modelId}" */
  favoriteModels?: string[];
  /** Called when user toggles a provider's favorite status */
  onToggleFavorite?: (provider: string) => void;
  /** Called when user toggles a model's favorite status */
  onToggleModelFavorite?: (modelId: string) => void;
}

interface ParsedModelSelection {
  modelProvider: string;
  modelId: string;
}

function getAgentLabel(agent: Agent): string {
  const base = agent.name?.trim() || agent.id;
  return `${base} (${agent.role})`;
}

function parseModelSelection(selectedModel: string): ParsedModelSelection | null {
  const value = selectedModel.trim();
  const slashIndex = value.indexOf("/");

  if (!value || slashIndex <= 0 || slashIndex >= value.length - 1) {
    return null;
  }

  return {
    modelProvider: value.slice(0, slashIndex),
    modelId: value.slice(slashIndex + 1),
  };
}

function formatModelTagName(modelInfo: ModelInfo | null, parsedSelection: ParsedModelSelection | null): string | null {
  if (!parsedSelection) {
    return null;
  }

  if (modelInfo?.name?.trim()) {
    return modelInfo.name.trim();
  }

  return parsedSelection.modelId
    .replace(/[-_]/g, " ")
    .replace(/\s+/g, " ")
    .replace(/^\w/, (letter) => letter.toUpperCase())
    .trim();
}

function truncateToolValue(value: string, maxLength: number): string {
  if (value.length <= maxLength) return value;
  return `${value.slice(0, maxLength)}…`;
}

function formatToolArgsSummary(args?: Record<string, unknown>): string | null {
  if (!args) return null;
  const entries = Object.entries(args);
  if (entries.length === 0) return null;
  return entries
    .map(([key, value]) => {
      const stringValue = typeof value === "string" ? value : (() => {
        try {
          return JSON.stringify(value);
        } catch {
          return String(value);
        }
      })();
      return `${key}=${truncateToolValue(stringValue, 50)}`;
    })
    .join(", ");
}

function formatToolResultSummary(result: unknown): string | null {
  if (result === undefined) return null;
  if (typeof result === "string") return truncateToolValue(result, 200);
  try {
    return truncateToolValue(JSON.stringify(result), 200);
  } catch {
    return truncateToolValue(String(result), 200);
  }
}

function renderToolCalls(toolCalls?: ToolCallInfo[], compact = false): ReactNode {
  if (!toolCalls || toolCalls.length === 0) return null;

  const renderToolCallItem = (toolCall: ToolCallInfo, index: number) => {
    const isRunning = toolCall.status === "running";
    const isError = toolCall.status === "completed" && toolCall.isError;
    const argsSummary = formatToolArgsSummary(toolCall.args);
    const resultSummary = formatToolResultSummary(toolCall.result);
    const baseSummaryPreview = isRunning
      ? argsSummary
      : resultSummary
        ? `result: ${resultSummary}`
        : argsSummary
          ? `args: ${argsSummary}`
          : null;
    const summaryPreview = compact ? null : baseSummaryPreview;
    const statusLabel = isRunning ? "running" : isError ? "error" : "completed";

    return (
      <details
        key={`${toolCall.toolName}-${index}`}
        className={`chat-tool-call${isRunning ? " chat-tool-call--running" : ""}${isError ? " chat-tool-call--error" : ""}`}
        open={isRunning}
      >
        <summary>
          <span className="chat-tool-call-status-dot" aria-hidden="true" />
          <span className="chat-tool-call-name" title={toolCall.toolName}>{toolCall.toolName}</span>
          {summaryPreview && <span className="chat-tool-call-preview" title={summaryPreview}>{summaryPreview}</span>}
          <span className="chat-tool-call-status-text">{statusLabel}</span>
        </summary>
        <div className="chat-tool-call-content">
          {argsSummary && (
            <div className="chat-tool-call-row">
              <span className="chat-tool-call-label">args</span>
              <span className="chat-tool-call-value">{argsSummary}</span>
            </div>
          )}
          {resultSummary && (
            <div className={`chat-tool-call-row${isError ? " chat-tool-call-row--error" : ""}`}>
              <span className="chat-tool-call-label">result</span>
              <span className="chat-tool-call-value">{resultSummary}</span>
            </div>
          )}
        </div>
      </details>
    );
  };

  const className = `chat-tool-calls${compact ? " chat-tool-calls--compact" : ""}`;
  if (toolCalls.length === 1) {
    return (
      <div className={className} data-testid="chat-tool-calls">
        <div className="chat-tool-calls-header">
          <Wrench size={12} aria-hidden="true" />
          <span>Tool calls</span>
        </div>
        {renderToolCallItem(toolCalls[0], 0)}
      </div>
    );
  }

  const runningCount = toolCalls.filter((toolCall) => toolCall.status === "running").length;
  const errorCount = toolCalls.filter((toolCall) => toolCall.status === "completed" && toolCall.isError).length;
  const hasRunning = runningCount > 0;
  const uniqueNames = Array.from(new Set(toolCalls.map((toolCall) => toolCall.toolName)));
  const visibleNames = uniqueNames.slice(0, 5);
  const overflowCount = Math.max(0, uniqueNames.length - visibleNames.length);
  const namesSummary = overflowCount > 0
    ? `${visibleNames.join(", ")}, +${overflowCount} more`
    : visibleNames.join(", ");
  const statusSummary = hasRunning
    ? `(${runningCount} running)`
    : errorCount > 0
      ? `(${errorCount} ${errorCount === 1 ? "error" : "errors"})`
      : null;

  return (
    <div className={className} data-testid="chat-tool-calls">
      <details className={`chat-tool-calls-group${compact ? " chat-tool-calls-group--compact" : ""}`} data-testid="chat-tool-calls-group" open={hasRunning}>
        <summary className="chat-tool-calls-group-summary">
          <Wrench size={12} aria-hidden="true" />
          <span className="chat-tool-calls-count">{toolCalls.length} tool calls</span>
          <span className="chat-tool-calls-names" title={namesSummary}>{namesSummary}</span>
          {statusSummary && <span className="chat-tool-calls-group-status">{statusSummary}</span>}
        </summary>
        {toolCalls.map((toolCall, index) => renderToolCallItem(toolCall, index))}
      </details>
    </div>
  );
}

const quickChatMarkdownComponents: Components = {
  pre: ({ children, ...props }) => (
    <pre {...props} className="quick-chat-markdown-pre">
      {children}
    </pre>
  ),
  table: ({ children, ...props }) => (
    <table {...props} className="quick-chat-markdown-table">
      {children}
    </table>
  ),
};

function getSkillTriggerMatch(value: string): { filter: string; start: number; end: number } | null {
  const triggerMatch = /(^|[\s])\/([^\s]*)$/.exec(value);
  if (!triggerMatch) {
    return null;
  }

  const prefix = triggerMatch[1] ?? "";
  const filter = triggerMatch[2] ?? "";
  const start = triggerMatch.index + prefix.length;
  return {
    filter,
    start,
    end: value.length,
  };
}

function getMentionTriggerMatch(
  value: string,
  cursorPos: number,
): { filter: string; start: number; end: number } | null {
  const textBeforeCursor = value.slice(0, cursorPos);
  const triggerMatch = /(^|[\s])@([\w-]*)$/.exec(textBeforeCursor);
  if (!triggerMatch) {
    return null;
  }

  const filter = triggerMatch[2] ?? "";
  const start = textBeforeCursor.length - filter.length - 1;
  return {
    filter,
    start,
    end: cursorPos,
  };
}

/** Position type for FAB positioning (right and bottom offsets from viewport edges) */
interface Position {
  x: number;
  y: number;
}

interface PanelSize {
  width: number;
  height: number;
}

type ResizeDirection = "n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se";

/** Offset of the panel anchor relative to the FAB position (right/bottom deltas in px). */
interface PanelAnchorOffset {
  right: number;
  bottom: number;
}

const QUICK_CHAT_DEFAULT_PANEL_SIZE: PanelSize = {
  width: 320,
  height: 400,
};

const ALLOWED_ATTACHMENT_TYPES = new Set([
  "image/png",
  "image/jpeg",
  "image/gif",
  "image/webp",
  "text/plain",
  "application/json",
  "text/yaml",
  "text/x-log",
  "text/csv",
  "application/xml",
  "text/markdown",
]);

const ALLOWED_ATTACHMENT_EXTENSIONS = [
  ".png",
  ".jpg",
  ".jpeg",
  ".gif",
  ".webp",
  ".txt",
  ".json",
  ".yaml",
  ".yml",
  ".log",
  ".csv",
  ".xml",
  ".md",
];

function isImageAttachment(file: File): boolean {
  return file.type.startsWith("image/");
}

function isAllowedAttachment(file: File): boolean {
  if (ALLOWED_ATTACHMENT_TYPES.has(file.type)) {
    return true;
  }

  const lowerName = file.name.toLowerCase();
  return ALLOWED_ATTACHMENT_EXTENSIONS.some((extension) => lowerName.endsWith(extension));
}

const QUICK_CHAT_MIN_PANEL_SIZE: PanelSize = {
  width: 280,
  height: 260,
};

const QUICK_CHAT_DESKTOP_BREAKPOINT = 768;
const QUICK_CHAT_VIEWPORT_PADDING = 8;

/**
 * Custom hook for draggable behavior.
 * Positions are stored as right/bottom offsets (matching the current positioning model).
 * Position persists in localStorage keyed per-project.
 * @param projectId - Optional project ID for localStorage key
 * @param externalDidDragRef - External ref to track drag state for click detection
 */
function useDraggable(projectId?: string, externalDidDragRef?: React.MutableRefObject<boolean>) {
  // Get executor footer height from CSS variable
  const getFooterHeight = useCallback((): number => {
    if (typeof window === "undefined") return 0;
    const height = getComputedStyle(document.documentElement)
      .getPropertyValue("--executor-footer-height")
      .trim();
    return height ? parseFloat(height) || 0 : 0;
  }, []);

  // Default positions
  const getDefaultPosition = useCallback((): Position => {
    // Mobile uses tighter default offset (4px vs 24px) to maximize screen space
    if (typeof window !== "undefined" && window.innerWidth <= 768) {
      return { x: 4, y: 4 + getFooterHeight() };
    }
    return { x: 24, y: 24 + getFooterHeight() };
  }, [getFooterHeight]);

  // Load position from localStorage on mount
  const [position, setPosition] = useState<Position>(() => {
    if (typeof window === "undefined") return getDefaultPosition();

    const storageKey = `fusion-quick-chat-position-${projectId || "default"}`;
    try {
      const saved = localStorage.getItem(storageKey);
      if (saved) {
        const parsed = JSON.parse(saved) as Position;
        // Validate the parsed position has valid numbers
        if (typeof parsed.x === "number" && typeof parsed.y === "number" && !isNaN(parsed.x) && !isNaN(parsed.y)) {
          return parsed;
        }
      }
    } catch {
      // Ignore parse errors, fall back to default
    }
    return getDefaultPosition();
  });

  const [isDragging, setIsDragging] = useState(false);
  const dragStartRef = useRef<{ x: number; y: number; pointerX: number; pointerY: number } | null>(null);
  const positionRef = useRef(position);
  const activePointerIdRef = useRef<number | null>(null);
  const dragTargetRef = useRef<HTMLElement | null>(null);
  // Use external ref if provided, otherwise create internal one
  const didDragRef = externalDidDragRef ?? useRef(false);

  useEffect(() => {
    positionRef.current = position;
  }, [position]);

  // Clamp position to keep FAB within viewport
  const clampPosition = useCallback((pos: Position): Position => {
    if (typeof window === "undefined") return pos;

    const fabSize = 48; // FAB is 48x48px
    // Mobile uses tighter margin (4px) to maximize screen space on small devices
    const edgeMargin = window.innerWidth <= 768 ? 4 : 8;
    // Account for mobile nav height when clamping bottom
    const mobileNavHeight = window.innerWidth <= 768 ? 44 : 0;
    // Account for executor footer height on desktop
    const footerHeight = window.innerWidth > 768 ? getFooterHeight() : 0;

    const maxX = window.innerWidth - fabSize - edgeMargin;
    const maxY = window.innerHeight - fabSize - edgeMargin - mobileNavHeight - footerHeight;

    return {
      x: Math.max(edgeMargin, Math.min(maxX, pos.x)),
      y: Math.max(edgeMargin, Math.min(maxY, pos.y)),
    };
  }, [getFooterHeight]);

  // Persist position to localStorage
  const savePosition = useCallback((pos: Position) => {
    if (typeof window === "undefined") return;

    const storageKey = `fusion-quick-chat-position-${projectId || "default"}`;
    try {
      localStorage.setItem(storageKey, JSON.stringify(pos));
    } catch {
      // Ignore storage errors
    }
  }, [projectId]);

  const endDrag = useCallback(() => {
    if (!dragStartRef.current) {
      return;
    }

    const dragTarget = dragTargetRef.current;
    const pointerId = activePointerIdRef.current;

    if (dragTarget && pointerId !== null && typeof dragTarget.releasePointerCapture === "function") {
      dragTarget.releasePointerCapture(pointerId);
    }

    dragStartRef.current = null;
    activePointerIdRef.current = null;
    dragTargetRef.current = null;
    setIsDragging(false);
    document.body.style.userSelect = "";

    if (didDragRef.current) {
      savePosition(positionRef.current);
    }

    document.removeEventListener("pointermove", handleDocumentPointerMove);
    document.removeEventListener("pointerup", handleDocumentPointerUp);
    document.removeEventListener("pointercancel", handleDocumentPointerCancel);
  }, [savePosition]);

  const handleDocumentPointerMove = useCallback((event: PointerEvent) => {
    if (!dragStartRef.current) {
      return;
    }

    if (activePointerIdRef.current !== null && event.pointerId !== activePointerIdRef.current) {
      return;
    }

    const deltaX = event.clientX - dragStartRef.current.pointerX;
    const deltaY = event.clientY - dragStartRef.current.pointerY;

    // Check if we've moved enough to be considered a drag (>= 5px)
    if (Math.abs(deltaX) >= 5 || Math.abs(deltaY) >= 5) {
      didDragRef.current = true;
    }

    if (!didDragRef.current) {
      return;
    }

    // Move in the opposite direction (dragging right moves FAB right, which means reducing right offset)
    const newX = dragStartRef.current.x - deltaX;
    const newY = dragStartRef.current.y - deltaY;

    const clamped = clampPosition({ x: newX, y: newY });
    positionRef.current = clamped;
    setPosition(clamped);
  }, [clampPosition]);

  const handleDocumentPointerUp = useCallback((event: PointerEvent) => {
    if (activePointerIdRef.current !== null && event.pointerId !== activePointerIdRef.current) {
      return;
    }

    endDrag();
  }, [endDrag]);

  const handleDocumentPointerCancel = useCallback((event: PointerEvent) => {
    if (activePointerIdRef.current !== null && event.pointerId !== activePointerIdRef.current) {
      return;
    }

    endDrag();
  }, [endDrag]);

  // Handle pointer down (start drag)
  const handlePointerDown = useCallback((event: React.PointerEvent<HTMLButtonElement>) => {
    // Only handle primary button (left click) or touch
    if (event.button !== 0 && event.pointerType === "mouse") return;

    const fabButton = event.currentTarget;

    event.preventDefault();
    // setPointerCapture may not exist in jsdom/tests
    if (typeof fabButton.setPointerCapture === "function") {
      fabButton.setPointerCapture(event.pointerId);
    }

    const currentPosition = positionRef.current;
    dragStartRef.current = {
      x: currentPosition.x,
      y: currentPosition.y,
      pointerX: event.clientX,
      pointerY: event.clientY,
    };
    activePointerIdRef.current = event.pointerId;
    dragTargetRef.current = fabButton;
    didDragRef.current = false;
    setIsDragging(true);

    // Prevent text selection during drag
    document.body.style.userSelect = "none";

    document.addEventListener("pointermove", handleDocumentPointerMove, { passive: true });
    document.addEventListener("pointerup", handleDocumentPointerUp);
    document.addEventListener("pointercancel", handleDocumentPointerCancel);
  }, [handleDocumentPointerCancel, handleDocumentPointerMove, handleDocumentPointerUp]);

  useEffect(() => () => {
    document.removeEventListener("pointermove", handleDocumentPointerMove);
    document.removeEventListener("pointerup", handleDocumentPointerUp);
    document.removeEventListener("pointercancel", handleDocumentPointerCancel);
    document.body.style.userSelect = "";
  }, [handleDocumentPointerCancel, handleDocumentPointerMove, handleDocumentPointerUp]);

  return {
    position,
    isDragging,
    handlePointerDown,
  };
}

function usePanelResize(projectId: string | undefined, fabRight: number, fabBottom: number) {
  const storageKey = `fusion:quick-chat-size-${projectId || "default"}`;

  const isDesktopViewport = useCallback(
    () => typeof window !== "undefined" && window.innerWidth > QUICK_CHAT_DESKTOP_BREAKPOINT,
    [],
  );

  /** Clamp width/height given the effective anchor point (right/bottom offsets from viewport edges). */
  const clampPanelSize = useCallback(
    (size: PanelSize, anchorRight: number, anchorBottom: number): PanelSize => {
      if (typeof window === "undefined") {
        return size;
      }

      const maxWidth = Math.max(
        QUICK_CHAT_MIN_PANEL_SIZE.width,
        window.innerWidth - anchorRight - QUICK_CHAT_VIEWPORT_PADDING,
      );
      const maxHeight = Math.max(
        QUICK_CHAT_MIN_PANEL_SIZE.height,
        window.innerHeight - anchorBottom - QUICK_CHAT_VIEWPORT_PADDING,
      );

      return {
        width: Math.max(QUICK_CHAT_MIN_PANEL_SIZE.width, Math.min(maxWidth, size.width)),
        height: Math.max(QUICK_CHAT_MIN_PANEL_SIZE.height, Math.min(maxHeight, size.height)),
      };
    },
    [],
  );

  const loadPersistedSize = useCallback((): PanelSize => {
    if (typeof window === "undefined" || window.innerWidth <= QUICK_CHAT_DESKTOP_BREAKPOINT) {
      return QUICK_CHAT_DEFAULT_PANEL_SIZE;
    }
    try {
      const raw = localStorage.getItem(storageKey);
      if (!raw) return QUICK_CHAT_DEFAULT_PANEL_SIZE;
      const parsed = JSON.parse(raw) as Partial<PanelSize>;
      if (typeof parsed.width !== "number" || typeof parsed.height !== "number") {
        return QUICK_CHAT_DEFAULT_PANEL_SIZE;
      }
      return { width: parsed.width, height: parsed.height };
    } catch {
      return QUICK_CHAT_DEFAULT_PANEL_SIZE;
    }
  }, [storageKey]);

  const [panelSize, setPanelSize] = useState<PanelSize>(loadPersistedSize);

  /**
   * Anchor offset relative to the FAB position.
   * When the user drags the south or east handle, we shift the anchor so the
   * panel top/left edge moves while the opposite edge stays fixed.
   */
  const [anchorOffset, setAnchorOffset] = useState<PanelAnchorOffset>({ right: 0, bottom: 0 });

  useEffect(() => {
    if (!isDesktopViewport()) return;
    const effective = { right: fabRight + anchorOffset.right, bottom: fabBottom + anchorOffset.bottom };
    setPanelSize((current) => clampPanelSize(current, effective.right, effective.bottom));
  }, [clampPanelSize, isDesktopViewport, fabRight, fabBottom, anchorOffset]);

  useEffect(() => {
    if (!isDesktopViewport()) return;
    try {
      localStorage.setItem(storageKey, JSON.stringify(panelSize));
    } catch {
      // Ignore storage errors (private mode / quota)
    }
  }, [isDesktopViewport, panelSize, storageKey]);

  const handleResizeStart = useCallback(
    (event: React.PointerEvent<HTMLDivElement>) => {
      if (!isDesktopViewport()) return;

      const direction = event.currentTarget.dataset.resizeDirection as ResizeDirection | undefined;
      if (!direction) return;

      event.preventDefault();
      event.stopPropagation();

      const resizeHandle = event.currentTarget;
      if (typeof resizeHandle.setPointerCapture === "function") {
        resizeHandle.setPointerCapture(event.pointerId);
      }

      const startState = {
        pointerX: event.clientX,
        pointerY: event.clientY,
        width: panelSize.width,
        height: panelSize.height,
        anchorRight: anchorOffset.right,
        anchorBottom: anchorOffset.bottom,
      };

      document.body.style.userSelect = "none";

      const onPointerMove = (moveEvent: PointerEvent) => {
        const dx = moveEvent.clientX - startState.pointerX;
        const dy = moveEvent.clientY - startState.pointerY;

        let nextWidth = startState.width;
        let nextHeight = startState.height;
        let nextAnchorRight = startState.anchorRight;
        let nextAnchorBottom = startState.anchorBottom;

        // West handle: dragging left grows width (panel expands left).
        if (direction.includes("w")) {
          nextWidth = startState.width - dx;
        }

        // East handle: dragging right grows width (panel expands right).
        // The right anchor must shift leftward (decrease) to keep left edge fixed.
        if (direction.includes("e")) {
          const widthDelta = dx;
          nextWidth = startState.width + widthDelta;
          nextAnchorRight = startState.anchorRight - widthDelta;
        }

        // North handle: dragging up grows height (panel expands upward).
        if (direction.includes("n")) {
          nextHeight = startState.height - dy;
        }

        // South handle: dragging down grows height (panel expands downward).
        // The bottom anchor must shift upward (decrease) to keep the top edge fixed.
        if (direction.includes("s")) {
          const heightDelta = dy;
          nextHeight = startState.height + heightDelta;
          nextAnchorBottom = startState.anchorBottom - heightDelta;
        }

        // Clamp size against effective anchor position.
        const effectiveRight = fabRight + nextAnchorRight;
        const effectiveBottom = fabBottom + nextAnchorBottom;
        const clamped = clampPanelSize({ width: nextWidth, height: nextHeight }, effectiveRight, effectiveBottom);

        // Also clamp the anchor offsets so the panel doesn't go off-screen.
        const clampedAnchorRight = Math.max(
          QUICK_CHAT_VIEWPORT_PADDING - fabRight,
          Math.min(
            window.innerWidth - fabRight - QUICK_CHAT_MIN_PANEL_SIZE.width - QUICK_CHAT_VIEWPORT_PADDING,
            nextAnchorRight,
          ),
        );
        const clampedAnchorBottom = Math.max(
          QUICK_CHAT_VIEWPORT_PADDING - fabBottom,
          Math.min(
            window.innerHeight - fabBottom - QUICK_CHAT_MIN_PANEL_SIZE.height - QUICK_CHAT_VIEWPORT_PADDING,
            nextAnchorBottom,
          ),
        );

        setPanelSize(clamped);
        setAnchorOffset({ right: clampedAnchorRight, bottom: clampedAnchorBottom });
      };

      const onPointerUp = (upEvent: PointerEvent) => {
        if (typeof resizeHandle.releasePointerCapture === "function") {
          resizeHandle.releasePointerCapture(upEvent.pointerId);
        }
        document.body.style.userSelect = "";
        document.removeEventListener("pointermove", onPointerMove);
        document.removeEventListener("pointerup", onPointerUp);

        // Persist final size.
        try {
          localStorage.setItem(storageKey, JSON.stringify({ width: panelSize.width, height: panelSize.height }));
        } catch {
          // Best-effort
        }
      };

      document.addEventListener("pointermove", onPointerMove);
      document.addEventListener("pointerup", onPointerUp);
    },
    [
      anchorOffset.bottom,
      anchorOffset.right,
      clampPanelSize,
      fabBottom,
      fabRight,
      isDesktopViewport,
      panelSize.height,
      panelSize.width,
      storageKey,
    ],
  );

  return {
    panelSize,
    anchorOffset,
    handleResizeStart,
  };
}

interface QuickChatMessageItemProps {
  message: ChatMessageInfo;
  forcePlain: boolean;
  mentionAgentsByName: Map<string, Agent>;
  onToggleRender: (id: string) => void;
}

// Memoized so streaming state churn doesn't re-render every prior message
// (each one would re-run ReactMarkdown over its full content otherwise).
const QuickChatMessageItem = memo(function QuickChatMessageItem({
  message,
  forcePlain,
  mentionAgentsByName,
  onToggleRender,
}: QuickChatMessageItemProps) {
  const isSent = message.role === "user";

  const renderedUserContent = useMemo<ReactNode>(() => {
    if (!isSent) return null;
    const content = message.content;
    const mentionRegex = /@([\w-]+)/g;
    const parts: ReactNode[] = [];
    let lastIndex = 0;
    let match = mentionRegex.exec(content);
    while (match) {
      const [fullMatch, rawName = ""] = match;
      const start = match.index;
      if (start > lastIndex) parts.push(content.slice(lastIndex, start));
      const normalizedName = rawName.replace(/_/g, " ").toLowerCase();
      const mentionedAgent = mentionAgentsByName.get(normalizedName);
      if (mentionedAgent) {
        parts.push(
          <span key={`${mentionedAgent.id}-${start}`} className="chat-mention-chip">
            @{mentionedAgent.name.replace(/\s+/g, "_")}
          </span>,
        );
      } else {
        parts.push(fullMatch);
      }
      lastIndex = start + fullMatch.length;
      match = mentionRegex.exec(content);
    }
    if (lastIndex < content.length) parts.push(content.slice(lastIndex));
    return parts.length === 0 ? content : parts;
  }, [isSent, message.content, mentionAgentsByName]);

  const assistantBody = useMemo<ReactNode>(() => {
    if (isSent) return null;
    if (forcePlain) {
      return <div className="quick-chat-message-content quick-chat-message-content--plain">{message.content}</div>;
    }
    return (
      <div className="quick-chat-message-content quick-chat-message-content--markdown">
        <ReactMarkdown remarkPlugins={[remarkGfm]} components={quickChatMarkdownComponents}>
          {message.content}
        </ReactMarkdown>
      </div>
    );
  }, [isSent, forcePlain, message.content]);

  return (
    <div
      className={`quick-chat-panel-message ${isSent ? "quick-chat-panel-message--sent" : "quick-chat-panel-message--received"}`}
      data-testid={`quick-chat-message-${message.id}`}
    >
      {isSent
        ? <p>{renderedUserContent}</p>
        : (
          <>
            {assistantBody}
            <button
              type="button"
              className={`quick-chat-message-render-toggle${forcePlain ? " quick-chat-message-render-toggle--plain" : ""}`}
              data-testid="quick-chat-message-render-toggle"
              aria-label={forcePlain ? "Show rendered markdown" : "Show plain text"}
              onClick={() => onToggleRender(message.id)}
            >
              {forcePlain ? <EyeOff size={14} /> : <Eye size={14} />}
            </button>
          </>
        )}
      {renderToolCalls(message.toolCalls, true)}
    </div>
  );
});

export function QuickChatFAB({
  projectId,
  addToast,
  showFAB = true,
  open,
  onOpenChange,
  favoriteProviders = [],
  favoriteModels = [],
  onToggleFavorite,
  onToggleModelFavorite,
}: QuickChatFABProps) {
  const { agents } = useAgents(projectId);
  // Internal state for uncontrolled mode, controlled state when open prop is provided
  const [internalOpen, setInternalOpen] = useState(false);
  const isControlled = open !== undefined;
  const isOpen = isControlled ? open : internalOpen;
  const setIsOpen = isControlled
    ? (value: boolean | ((prev: boolean) => boolean)) => {
        if (typeof value === "function") {
          onOpenChange?.(value(isOpen));
        } else {
          onOpenChange?.(value);
        }
      }
    : setInternalOpen;

  // We still consume keyboardOpen for layout decisions outside the panel,
  // but the high-frequency --vv-offset-top / --vv-height tracking is set
  // directly on the panel DOM in a layout effect below — going through
  // React state introduces a per-event reconciliation lag that the human
  // eye reads as jank while the iOS keyboard is animating in.
  useMobileKeyboard({ enabled: isOpen });
  const viewportMode = useViewportMode();

  const [chatMode, setChatMode] = useState<"agent" | "model">("agent");
  const [selectedAgentId, setSelectedAgentId] = useState<string>("");
  const [newSessionChooserOpen, setNewSessionChooserOpen] = useState(false);
  const [newSessionMode, setNewSessionMode] = useState<"agent" | "model">("model");
  const [newSessionAgentId, setNewSessionAgentId] = useState<string>("");
  const [newSessionModel, setNewSessionModel] = useState<string>("");
  const [models, setModels] = useState<ModelInfo[]>([]);
  const [modelsLoading, setModelsLoading] = useState(false);
  const [selectedModel, setSelectedModel] = useState<string>("");
  const [configuredDefaultModelSelection, setConfiguredDefaultModelSelection] = useState<string>("");
  const [messageInput, setMessageInput] = useState("");
  const [discoveredSkills, setDiscoveredSkills] = useState<DiscoveredSkill[]>([]);
  const [skillsLoading, setSkillsLoading] = useState(false);
  const [showSkillMenu, setShowSkillMenu] = useState(false);
  const [skillFilter, setSkillFilter] = useState("");
  const [highlightedSkillIndex, setHighlightedSkillIndex] = useState(0);
  const [mentionFilter, setMentionFilter] = useState("");
  const [mentionPopupVisible, setMentionPopupVisible] = useState(false);
  const [mentionHighlightIndex, setMentionHighlightIndex] = useState(0);
  const [mentionStartPos, setMentionStartPos] = useState(-1);
  const [plainTextMessageIds, setPlainTextMessageIds] = useState<Set<string>>(() => new Set());
  const [helpMessageVisible, setHelpMessageVisible] = useState(false);
  /** Pending attachments staged in the composer before being sent. */
  const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
  const [isAttachmentDragOver, setIsAttachmentDragOver] = useState(false);
  const [isUserScrolling, setIsUserScrolling] = useState(false);

  // File mention state and hook
  const [, setFileMentionPopupVisible] = useState(false);
  const [fileMentionPosition, setFileMentionPosition] = useState({ top: 0, left: 0 });
  const fileMention = useFileMention({ projectId });

  // Calculate popup position based on caret position in input
  const updateFileMentionPosition = useCallback((input: HTMLInputElement | null) => {
    if (!input || !fileMention.mentionActive) return;

    // Get input position
    const rect = input.getBoundingClientRect();

    // Position above the input, using viewport coordinates
    // The popup is absolutely positioned, so we use window coordinates
    setFileMentionPosition({
      top: rect.top - 260, // Popup appears above with gap (accounting for popup height)
      left: rect.left + 8, // Small left offset
    });
  }, [fileMention.mentionActive]);

  // Track if we just finished a drag (to prevent click from firing after drag)
  const didDragRef = useRef(false);
  const modelsRequestedRef = useRef(false);
  const prevSessionTargetRef = useRef("");
  const mentionCursorPosRef = useRef(0);
  const hideMentionPopupTimeoutRef = useRef<number | null>(null);
  const hideSkillMenuTimeoutRef = useRef<number | null>(null);
  const dragDepthRef = useRef(0);

  // Draggable hook for FAB positioning
  const {
    position,
    isDragging,
    handlePointerDown,
  } = useDraggable(projectId, didDragRef);

  // Panel stays 60px above FAB (FAB is 48px tall + 12px gap)
  const panelY = position.y + 60;
  const { panelSize, anchorOffset, handleResizeStart } = usePanelResize(projectId, position.x, panelY);
  const shouldApplyDesktopPanelSize = typeof window !== "undefined" && window.innerWidth > QUICK_CHAT_DESKTOP_BREAKPOINT;

  // Chat session hook
  const {
    activeSession,
    messages,
    isStreaming,
    streamingText,
    streamingThinking,
    streamingToolCalls,
    sessions,
    sessionsLoading,
    messagesLoading,
    sendMessage,
    stopStreaming,
    pendingMessage,
    clearPendingMessage,
    switchSession,
    selectSession,
    startModelChat,
    startFreshSession,
    refreshSessions,
    skipNextSessionInitRef,
  } = useQuickChat(projectId, addToast);

  const panelRef = useRef<HTMLDivElement | null>(null);
  const fabRef = useRef<HTMLButtonElement | null>(null);
  const messagesRef = useRef<HTMLDivElement | null>(null);
  const inputRef = useRef<HTMLInputElement | null>(null);
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const pendingAttachmentsRef = useRef<PendingAttachment[]>([]);
  const shouldAutoFocusComposerRef = useRef(false);
  const handledMobileActionRef = useRef(false);
  const preserveComposerFocusRef = useRef(false);
  // Always-mounted offscreen input used to claim the iOS soft keyboard
  // synchronously inside the FAB click gesture, before the real composer
  // input has rendered (or while it is still `disabled` waiting for the
  // session). Focus is transferred to the real input once it is enabled —
  // iOS keeps the keyboard up across that transfer.
  const stealthInputRef = useRef<HTMLInputElement | null>(null);
  // Set true briefly while the keyboard is dismissing. While set, the
  // visualViewport apply() ignores incoming vv.height values so iOS's
  // mid-dismiss reports cannot shrink the panel back down — the panel
  // visually grows to full height immediately on blur and the keyboard
  // slides down on top of it.
  const suppressVvShrinkRef = useRef(false);
  const isUserScrollingRef = useRef(false);
  const previousOpenStateRef = useRef<{ isOpen: boolean; sessionId: string | null }>({ isOpen: false, sessionId: null });

  // Pin the document at the top while the panel is open on mobile.
  // Otherwise iOS can leave window.scrollY > 0 (e.g. after the keyboard
  // was opened and dismissed once), and on the next open the
  // position:fixed panel anchors to layout top:0 which is *above* the
  // visible viewport — only the bottom of the panel (the input bar)
  // pokes into view at the top of the screen.
  //
  // We deliberately do NOT use `body { position: fixed }` to lock scroll:
  // that would make the body the containing block for the panel's
  // position:fixed and reintroduce the same translation bug. Instead we
  // scroll to 0 and lock overflow on <html> and <body>; the panel's
  // viewport anchor stays correct.
  useEffect(() => {
    if (!isOpen) return;
    if (typeof window === "undefined" || typeof document === "undefined") return;
    if (window.innerWidth > QUICK_CHAT_DESKTOP_BREAKPOINT) return;

    const scrollY = window.scrollY;
    const html = document.documentElement;
    const body = document.body;
    const prev = {
      htmlOverflow: html.style.overflow,
      bodyOverflow: body.style.overflow,
    };

    window.scrollTo(0, 0);
    html.style.overflow = "hidden";
    body.style.overflow = "hidden";

    return () => {
      html.style.overflow = prev.htmlOverflow;
      body.style.overflow = prev.bodyOverflow;
      window.scrollTo(0, scrollY);
    };
  }, [isOpen]);

  // Mirror visualViewport metrics onto the panel as CSS variables
  // directly, bypassing React state. --vv-height shrinks the panel to
  // the visible area; --vv-offset-top compensates for iOS shifting the
  // visual viewport on input focus (without it the position:fixed panel
  // slides off-screen on the second focus after the keyboard has been
  // dismissed once).
  //
  // We deliberately do NOT throttle via requestAnimationFrame here.
  // iOS fires visualViewport resize/scroll events on the same frame as
  // its own keyboard animation; deferring our write to the next frame
  // makes the panel lag iOS by one paint, which is visible as a slide.
  // Synchronous writes keep the panel locked to the visual viewport.
  useLayoutEffect(() => {
    if (!isOpen) return;
    if (typeof window === "undefined" || !window.visualViewport) return;
    const panel = panelRef.current;
    if (!panel) return;

    const vv = window.visualViewport;
    const apply = () => {
      if (suppressVvShrinkRef.current) return;
      panel.style.setProperty("--vv-height", `${vv.height}px`);
      panel.style.setProperty("--vv-offset-top", `${vv.offsetTop || 0}px`);
    };

    apply();
    vv.addEventListener("resize", apply);
    vv.addEventListener("scroll", apply);
    return () => {
      vv.removeEventListener("resize", apply);
      vv.removeEventListener("scroll", apply);
    };
  }, [isOpen]);

  const resolvedModelSelection = selectedModel || configuredDefaultModelSelection;
  const targetModelSelection = useMemo(
    () => parseModelSelection(resolvedModelSelection),
    [resolvedModelSelection],
  );
  const displayedModelSelection = useMemo(() => {
    if (chatMode === "model" && activeSession?.modelProvider && activeSession?.modelId) {
      return `${activeSession.modelProvider}/${activeSession.modelId}`;
    }
    return resolvedModelSelection;
  }, [activeSession?.modelId, activeSession?.modelProvider, chatMode, resolvedModelSelection]);

  const parsedModelSelection = useMemo(() => parseModelSelection(displayedModelSelection), [displayedModelSelection]);
  const selectedModelInfo = useMemo(
    () => models.find((model) => `${model.provider}/${model.id}` === displayedModelSelection) ?? null,
    [displayedModelSelection, models],
  );
  const selectedModelTag = useMemo(
    () => formatModelTagName(selectedModelInfo, parsedModelSelection),
    [selectedModelInfo, parsedModelSelection],
  );

  const sessionTargetKey = useMemo(() => {
    if (chatMode === "model") {
      if (targetModelSelection) {
        return `${FN_AGENT_ID}::${targetModelSelection.modelProvider}/${targetModelSelection.modelId}`;
      }
      return "";
    }
    // chatMode === "agent"
    if (selectedAgentId) {
      return `${selectedAgentId}::`;
    }
    return "";
  }, [chatMode, selectedAgentId, targetModelSelection]);

  const hasChatTarget = chatMode === "agent" ? Boolean(selectedAgentId) : Boolean(targetModelSelection);
  const inputDisabled = !hasChatTarget || !activeSession;

  useEffect(() => {
    if (agents.length === 0) {
      setSelectedAgentId("");
      setChatMode("model");
      return;
    }

    const selectedStillExists = agents.some((agent) => agent.id === selectedAgentId);
    if (!selectedStillExists) {
      setSelectedAgentId(agents[0]?.id ?? "");
    }
  }, [agents, selectedAgentId]);

  // Lazy-load models on first panel open.
  useEffect(() => {
    if (!isOpen || modelsRequestedRef.current) {
      return;
    }

    modelsRequestedRef.current = true;
    setModelsLoading(true);

    fetchModels()
      .then((response) => {
        const loadedModels = response.models ?? [];
        setModels(loadedModels);

        if (selectedModel || loadedModels.length === 0) {
          return;
        }

        const defaultProvider = response.defaultProvider;
        const defaultModelId = response.defaultModelId;
        if (defaultProvider && defaultModelId) {
          const defaultSelection = `${defaultProvider}/${defaultModelId}`;
          const hasDefaultModel = loadedModels.some(
            (model) => `${model.provider}/${model.id}` === defaultSelection,
          );
          if (hasDefaultModel) {
            setConfiguredDefaultModelSelection(defaultSelection);
            setSelectedModel(defaultSelection);
            // Switch to model mode regardless of whether agents are present —
            // a configured default model is an explicit user preference and
            // should drive the panel to its corresponding mode immediately,
            // otherwise the tag/dropdown auto-selection would be invisible
            // until the user manually toggles modes.
            setChatMode("model");
            return;
          }
        }

        setConfiguredDefaultModelSelection("");

        // Always pre-select the first model so users can start chatting in model mode
        // without having to manually pick from the dropdown.
        const firstModel = loadedModels[0];
        if (firstModel) {
          setSelectedModel(`${firstModel.provider}/${firstModel.id}`);
        }
      })
      .catch((error: unknown) => {
        console.error("[QuickChatFAB] Failed to load models:", error);
        setModels([]);
        setConfiguredDefaultModelSelection("");
      })
      .finally(() => {
        setModelsLoading(false);
      });
  }, [isOpen, agents.length, selectedModel]);

  useEffect(() => {
    if (!isOpen || !projectId) {
      return;
    }

    setSkillsLoading(true);
    fetchDiscoveredSkills(projectId)
      .then((skills) => {
        setDiscoveredSkills(skills);
      })
      .catch(() => {
        setDiscoveredSkills([]);
      })
      .finally(() => {
        setSkillsLoading(false);
      });
  }, [isOpen, projectId]);

  useEffect(() => {
    if (!isOpen) return;
    void refreshSessions();
  }, [isOpen, refreshSessions]);

  // Initialize/switch quick chat session whenever the selected target changes.
  // NOTE: activeSession and sessionsLoading are in the dependency array to
  // enable retry-when-null (see shouldRetrySessionInit), but the hook's
  // switchSession now reads activeSession from a ref so it doesn't get a
  // new identity on every activeSession change.
  useEffect(() => {
    if (!isOpen) {
      prevSessionTargetRef.current = "";
      return;
    }

    if (!sessionTargetKey) {
      prevSessionTargetRef.current = "";
      return;
    }

    // When startFreshSession is in progress, skip the automatic init to
    // prevent racing with the explicit fresh-session creation.  Record the
    // target key as "seen" so a later render won't re-trigger for the same
    // target.
    if (skipNextSessionInitRef.current) {
      prevSessionTargetRef.current = sessionTargetKey;
      return;
    }

    const shouldRetrySessionInit = sessionTargetKey === prevSessionTargetRef.current
      && !activeSession
      && !sessionsLoading;

    if (sessionTargetKey === prevSessionTargetRef.current && !shouldRetrySessionInit) {
      return;
    }

    prevSessionTargetRef.current = sessionTargetKey;

    if (chatMode === "model" && targetModelSelection) {
      void startModelChat(targetModelSelection.modelProvider, targetModelSelection.modelId);
      return;
    }

    if (chatMode === "agent" && selectedAgentId) {
      void switchSession(selectedAgentId);
    }
  }, [
    isOpen,
    chatMode,
    targetModelSelection,
    selectedAgentId,
    sessionTargetKey,
    activeSession,
    sessionsLoading,
    startModelChat,
    switchSession,
    skipNextSessionInitRef,
  ]);

  useEffect(() => {
    if (isOpen) {
      return;
    }

    setMentionPopupVisible(false);
    setMentionFilter("");
    setMentionStartPos(-1);
    setShowSkillMenu(false);
    setSkillFilter("");
    setHighlightedSkillIndex(0);
    pendingAttachmentsRef.current.forEach((attachment) => {
      if (attachment.previewUrl) {
        URL.revokeObjectURL(attachment.previewUrl);
      }
    });
    setPendingAttachments([]);
  }, [isOpen]);

  useEffect(() => {
    pendingAttachmentsRef.current = pendingAttachments;
  }, [pendingAttachments]);

  useEffect(() => {
    if (!isOpen) {
      shouldAutoFocusComposerRef.current = false;
      return;
    }

    if (typeof window === "undefined") {
      return;
    }

    shouldAutoFocusComposerRef.current = window.innerWidth <= QUICK_CHAT_DESKTOP_BREAKPOINT;
  }, [isOpen]);

  useEffect(() => {
    if (!isOpen || inputDisabled || !shouldAutoFocusComposerRef.current) {
      return;
    }

    const input = inputRef.current;
    if (!input) {
      return;
    }

    const activeElement = document.activeElement;
    const panelContainsFocus = activeElement ? panelRef.current?.contains(activeElement) : false;
    const isBodyFocused = activeElement === document.body;
    const stealthIsFocused = activeElement === stealthInputRef.current;

    if (!panelContainsFocus && !isBodyFocused && !stealthIsFocused) {
      shouldAutoFocusComposerRef.current = false;
      return;
    }

    // When the stealth input is currently holding the iOS keyboard, transfer
    // focus synchronously — going through requestAnimationFrame breaks the
    // keyboard handoff on Safari and the keyboard dismisses.
    if (stealthIsFocused) {
      input.focus({ preventScroll: true });
      shouldAutoFocusComposerRef.current = false;
      return;
    }

    const frame = requestAnimationFrame(() => {
      input.focus();
      shouldAutoFocusComposerRef.current = false;
    });

    return () => cancelAnimationFrame(frame);
  }, [isOpen, inputDisabled]);

  // Attachment object URLs must be revoked when the composer unmounts.
  useEffect(() => {
    return () => {
      pendingAttachmentsRef.current.forEach((attachment) => {
        if (attachment.previewUrl) {
          URL.revokeObjectURL(attachment.previewUrl);
        }
      });
    };
  }, []);

  const handleStartFreshChat = useCallback(() => {
    setNewSessionChooserOpen(true);
    setNewSessionMode("model");
    setNewSessionAgentId(agents[0]?.id ?? "");
    setNewSessionModel(selectedModel || configuredDefaultModelSelection || "");
  }, [agents, configuredDefaultModelSelection, selectedModel]);

  const selectedAgent = useMemo(
    () => agents.find((agent) => agent.id === selectedAgentId) ?? null,
    [agents, selectedAgentId],
  );

  const filteredSkills = useMemo(() => {
    const normalizedFilter = skillFilter.trim().toLowerCase();
    const matchingSkills = normalizedFilter
      ? discoveredSkills.filter((skill) => skill.name.toLowerCase().includes(normalizedFilter))
      : discoveredSkills;
    return matchingSkills.slice(0, 10);
  }, [discoveredSkills, skillFilter]);

  const filteredMentionAgents = useMemo(
    () => agents.filter((agent) => matchesAgentMentionFilter(agent.name, mentionFilter)),
    [agents, mentionFilter],
  );

  const mentionAgentsByName = useMemo(() => {
    const byName = new Map<string, Agent>();
    for (const agent of agents) {
      byName.set(agent.name.toLowerCase(), agent);
    }
    return byName;
  }, [agents]);

  useEffect(() => {
    setHighlightedSkillIndex(0);
  }, [filteredSkills]);

  useEffect(() => {
    setMentionHighlightIndex(0);
  }, [mentionFilter, mentionPopupVisible]);

  useEffect(() => {
    return () => {
      if (hideMentionPopupTimeoutRef.current !== null) {
        window.clearTimeout(hideMentionPopupTimeoutRef.current);
        hideMentionPopupTimeoutRef.current = null;
      }
      if (hideSkillMenuTimeoutRef.current !== null) {
        window.clearTimeout(hideSkillMenuTimeoutRef.current);
        hideSkillMenuTimeoutRef.current = null;
      }
    };
  }, []);

  // Click outside and escape handling
  useEffect(() => {
    if (!isOpen) return;

    const handleDocumentClick = (event: MouseEvent) => {
      const target = event.target as Node;
      if (panelRef.current?.contains(target)) return;
      if (fabRef.current?.contains(target)) return;
      // Don't close if clicking inside a portaled dropdown (e.g., CustomModelDropdown)
      if ((target as HTMLElement).closest(".model-combobox-dropdown--portal")) return;
      setIsOpen(false);
    };

    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setIsOpen(false);
      }
    };

    document.addEventListener("mousedown", handleDocumentClick);
    document.addEventListener("keydown", handleEscape);

    return () => {
      document.removeEventListener("mousedown", handleDocumentClick);
      document.removeEventListener("keydown", handleEscape);
    };
  }, [isOpen, setIsOpen]);

  const updateScrollState = useCallback(() => {
    const messagesEl = messagesRef.current;
    if (!messagesEl) return;

    const threshold = 50;
    const atBottom = messagesEl.scrollTop + messagesEl.clientHeight >= messagesEl.scrollHeight - threshold;
    setIsUserScrolling(!atBottom);
    isUserScrollingRef.current = !atBottom;
  }, []);

  const anchorToBottom = useCallback((container: HTMLElement) => {
    if (!container.isConnected) return;

    let frame = 0;
    let stableFrames = 0;
    let lastScrollHeight = -1;
    const maxFrames = 6;

    const writeBottom = () => {
      if (!container.isConnected) return;

      container.scrollTop = container.scrollHeight;
      if (container.scrollHeight === lastScrollHeight) {
        stableFrames += 1;
      } else {
        stableFrames = 0;
        lastScrollHeight = container.scrollHeight;
      }

      frame += 1;
      if (frame >= maxFrames || stableFrames >= 2) {
        setIsUserScrolling(false);
        isUserScrollingRef.current = false;
        return;
      }

      window.requestAnimationFrame(writeBottom);
    };

    writeBottom();
  }, []);

  const scrollToBottom = useCallback(() => {
    const messagesEl = messagesRef.current;
    if (!messagesEl) return;
    anchorToBottom(messagesEl);
  }, [anchorToBottom]);

  useLayoutEffect(() => {
    const sessionId = activeSession?.id ?? null;
    const previousState = previousOpenStateRef.current;
    previousOpenStateRef.current = { isOpen, sessionId };

    if (!isOpen || !sessionId) {
      return;
    }

    const openingNow = !previousState.isOpen && isOpen;
    const sessionChangedWhileOpen = previousState.isOpen && previousState.sessionId !== sessionId;
    if (!openingNow && !sessionChangedWhileOpen) {
      return;
    }

    const messagesEl = messagesRef.current;
    if (!messagesEl) return;

    anchorToBottom(messagesEl);
  }, [isOpen, activeSession?.id, anchorToBottom]);

  // Auto-scroll messages when user is near the live tail.
  useEffect(() => {
    if (!isOpen) return;
    if (!isUserScrollingRef.current) {
      scrollToBottom();
    }
  }, [messages, streamingText, streamingThinking, isStreaming, isOpen, scrollToBottom]);

  const sessionOptions = useMemo(() => {
    const agentNameById = new Map(agents.map((agent) => [agent.id, agent.name?.trim() || agent.id]));
    const modelNameByKey = new Map(
      models.map((model) => [`${model.provider}/${model.id}`, model.name?.trim() || ""]),
    );

    return sessions.map((session, index) => {
      const baseLabel = session.title?.trim() || `Session ${index + 1}`;

      let descriptor: string | null = null;
      if (session.agentId && session.agentId !== FN_AGENT_ID) {
        descriptor = agentNameById.get(session.agentId) || session.agentId;
      } else if (session.modelProvider && session.modelId) {
        const modelKey = `${session.modelProvider}/${session.modelId}`;
        const modelName = modelNameByKey.get(modelKey);
        descriptor = modelName ? `${modelName} [${modelKey}]` : modelKey;
      }

      return {
        id: session.id,
        label: descriptor ? `${baseLabel} — ${descriptor}` : baseLabel,
      };
    });
  }, [agents, models, sessions]);

  const inputPlaceholder = useMemo(() => {
    if (chatMode === "agent") {
      if (selectedAgent) {
        return `Message ${selectedAgent.name || selectedAgent.id}`;
      }
      return "Select an agent to start chatting";
    }
    // model mode
    if (selectedModelTag) {
      return `Message ${selectedModelTag}`;
    }
    return "Select a model to start chatting";
  }, [chatMode, selectedAgent, selectedModelTag]);

  const handleSessionSwitch = useCallback((sessionId: string) => {
    const selectedSession = sessions.find((session) => session.id === sessionId);
    if (!selectedSession) {
      return;
    }

    if (selectedSession.modelProvider && selectedSession.modelId) {
      setChatMode("model");
      setSelectedModel(`${selectedSession.modelProvider}/${selectedSession.modelId}`);
    } else {
      setChatMode("agent");
      setSelectedAgentId(selectedSession.agentId);
    }

    void selectSession(selectedSession);
  }, [selectSession, sessions]);

  const handleCreateFreshSession = useCallback(async () => {
    if (sessionsLoading) return;

    if (newSessionMode === "agent") {
      if (!newSessionAgentId) return;
      setChatMode("agent");
      setSelectedAgentId(newSessionAgentId);
      await startFreshSession(newSessionAgentId);
    } else {
      const parsed = parseModelSelection(newSessionModel || selectedModel || configuredDefaultModelSelection);
      if (!parsed) return;
      setChatMode("model");
      setSelectedModel(`${parsed.modelProvider}/${parsed.modelId}`);
      await startFreshSession(FN_AGENT_ID, parsed.modelProvider, parsed.modelId);
    }

    await refreshSessions();
    setNewSessionChooserOpen(false);
    setNewSessionMode("model");
  }, [
    configuredDefaultModelSelection,
    newSessionAgentId,
    newSessionMode,
    newSessionModel,
    refreshSessions,
    selectedModel,
    sessionsLoading,
    startFreshSession,
  ]);

  const pendingPreview = pendingMessage.length > 50
    ? `${pendingMessage.slice(0, 50)}…`
    : pendingMessage;

  /**
   * Capture file selections from picker, paste, or drop and stage them in composer state.
   */
  const handleAttachmentFiles = useCallback((files: FileList | null | undefined) => {
    if (!files || files.length === 0) {
      return;
    }

    const newAttachments: PendingAttachment[] = [];
    for (let index = 0; index < files.length; index += 1) {
      const file = files[index];
      if (!isAllowedAttachment(file)) {
        continue;
      }

      newAttachments.push({
        file,
        previewUrl: isImageAttachment(file) ? URL.createObjectURL(file) : "",
      });
    }

    if (newAttachments.length > 0) {
      setPendingAttachments((previous) => [...previous, ...newAttachments]);
    }
  }, []);

  const removeAttachment = useCallback((index: number) => {
    setPendingAttachments((previous) => {
      const removed = previous[index];
      if (removed?.previewUrl) {
        URL.revokeObjectURL(removed.previewUrl);
      }
      return previous.filter((_, attachmentIndex) => attachmentIndex !== index);
    });
  }, []);

  const handlePaste = useCallback((event: React.ClipboardEvent<HTMLInputElement>) => {
    handleAttachmentFiles(event.clipboardData?.files);
  }, [handleAttachmentFiles]);

  const focusComposerInput = useCallback(() => {
    if (typeof window === "undefined") return;
    if (window.innerWidth > QUICK_CHAT_DESKTOP_BREAKPOINT) return;
    const input = inputRef.current;
    if (!input || input.disabled) return;
    input.focus({ preventScroll: true });
  }, []);

  const markPreserveComposerFocus = useCallback(() => {
    if (typeof window === "undefined") return;
    if (window.innerWidth > QUICK_CHAT_DESKTOP_BREAKPOINT) return;
    preserveComposerFocusRef.current = true;
  }, []);

  const handleSendMessage = useCallback(async () => {
    const trimmed = messageInput.trim();
    const attachmentsToSend = pendingAttachmentsRef.current;
    if (!trimmed && attachmentsToSend.length === 0) return;
    if (inputDisabled) return;

    setMessageInput("");
    setMentionPopupVisible(false);
    setMentionFilter("");
    setMentionStartPos(-1);

    if (trimmed === "/help") {
      setHelpMessageVisible(true);
      focusComposerInput();
      preserveComposerFocusRef.current = false;
      return;
    }

    if (trimmed === "/clear") {
      stopStreaming();
      clearPendingMessage();
      attachmentsToSend.forEach((attachment) => {
        if (attachment.previewUrl) {
          URL.revokeObjectURL(attachment.previewUrl);
        }
      });
      setPendingAttachments((previous) => previous.filter((attachment) => !attachmentsToSend.includes(attachment)));

      try {
        if (chatMode === "model") {
          const parsed = parseModelSelection(resolvedModelSelection);
          if (!parsed) {
            return;
          }
          await startFreshSession(FN_AGENT_ID, parsed.modelProvider, parsed.modelId);
        } else if (selectedAgentId) {
          await startFreshSession(selectedAgentId);
        }
      } catch {
        addToast("Failed to clear conversation", "error");
      } finally {
        focusComposerInput();
        preserveComposerFocusRef.current = false;
      }
      return;
    }

    try {
      setHelpMessageVisible(false);
      await sendMessage(trimmed, attachmentsToSend.map((attachment) => attachment.file));
      attachmentsToSend.forEach((attachment) => {
        if (attachment.previewUrl) {
          URL.revokeObjectURL(attachment.previewUrl);
        }
      });
      setPendingAttachments((previous) => previous.filter((attachment) => !attachmentsToSend.includes(attachment)));
    } catch {
      // Keep pending attachments on failure so user can retry.
    } finally {
      focusComposerInput();
      preserveComposerFocusRef.current = false;
    }
  }, [
    addToast,
    chatMode,
    clearPendingMessage,
    focusComposerInput,
    inputDisabled,
    messageInput,
    resolvedModelSelection,
    selectedAgentId,
    sendMessage,
    startFreshSession,
    stopStreaming,
  ]);

  const handleAttachmentDragEnter = useCallback((event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    dragDepthRef.current += 1;
    setIsAttachmentDragOver(true);
  }, []);

  const handleAttachmentDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    event.dataTransfer.dropEffect = "copy";
    setIsAttachmentDragOver(true);
  }, []);

  const handleAttachmentDragLeave = useCallback((event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
    if (dragDepthRef.current === 0) {
      setIsAttachmentDragOver(false);
    }
  }, []);

  const handleAttachmentDrop = useCallback((event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    dragDepthRef.current = 0;
    setIsAttachmentDragOver(false);
    handleAttachmentFiles(event.dataTransfer?.files);
  }, [handleAttachmentFiles]);

  const updateMentionState = useCallback((value: string, cursorPos: number) => {
    const mentionTriggerMatch = getMentionTriggerMatch(value, cursorPos);
    if (mentionTriggerMatch) {
      setMentionPopupVisible(true);
      setMentionFilter(mentionTriggerMatch.filter);
      setMentionStartPos(mentionTriggerMatch.start);
      return;
    }

    setMentionPopupVisible(false);
    setMentionFilter("");
    setMentionStartPos(-1);
  }, []);

  const handleSkillSelect = useCallback((skill: DiscoveredSkill) => {
    setMessageInput((currentInput) => {
      const triggerMatch = getSkillTriggerMatch(currentInput);
      if (!triggerMatch) {
        return currentInput;
      }

      const replacement = `/skill:${skill.name} `;
      const nextInput = currentInput.slice(0, triggerMatch.start) + replacement + currentInput.slice(triggerMatch.end);

      window.requestAnimationFrame(() => {
        if (!inputRef.current) return;
        inputRef.current.focus();
      });

      return nextInput;
    });

    setShowSkillMenu(false);
    setSkillFilter("");
    setHighlightedSkillIndex(0);
  }, []);

  const handleMentionSelect = useCallback(
    (agent: Agent) => {
      const input = inputRef.current;
      if (!input || mentionStartPos < 0) {
        return;
      }

      const selectionStart = input.selectionStart ?? mentionCursorPosRef.current;
      const selectionEnd = input.selectionEnd ?? selectionStart;
      const cursorPos = Math.max(selectionStart, selectionEnd);
      const safeStart = Math.min(mentionStartPos, cursorPos);
      const mentionText = `@${agent.name.replace(/\s+/g, "_")}`;
      const replacement = `${mentionText} `;
      const nextInput = messageInput.slice(0, safeStart) + replacement + messageInput.slice(cursorPos);
      const nextCursorPos = safeStart + replacement.length;

      setMessageInput(nextInput);
      setMentionPopupVisible(false);
      setMentionFilter("");
      setMentionHighlightIndex(0);
      setMentionStartPos(-1);

      window.requestAnimationFrame(() => {
        if (!inputRef.current) return;
        inputRef.current.focus();
        inputRef.current.setSelectionRange(nextCursorPos, nextCursorPos);
      });
    },
    [mentionStartPos, messageInput],
  );

  const handleInputChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const nextValue = event.target.value;
      const cursorPos = event.target.selectionStart ?? nextValue.length;
      mentionCursorPosRef.current = cursorPos;
      setMessageInput(nextValue);
      if (helpMessageVisible && nextValue.trim().length > 0) {
        setHelpMessageVisible(false);
      }
      updateMentionState(nextValue, cursorPos);

      const skillTriggerMatch = getSkillTriggerMatch(nextValue);
      if (skillTriggerMatch) {
        setShowSkillMenu(true);
        setSkillFilter(skillTriggerMatch.filter);
      } else {
        setShowSkillMenu(false);
        setSkillFilter("");
      }

      // Detect file mentions
      fileMention.detectMention(nextValue, cursorPos);
      setFileMentionPopupVisible(fileMention.mentionActive);
      if (fileMention.mentionActive) {
        updateFileMentionPosition(event.target);
      }
    },
    [helpMessageVisible, updateMentionState, fileMention, updateFileMentionPosition],
  );

  const handleInputBlur = useCallback(() => {
    if (preserveComposerFocusRef.current) {
      window.requestAnimationFrame(() => {
        focusComposerInput();
      });
      return;
    }

    // Pre-grow the panel ahead of iOS's keyboard dismiss animation so the
    // user sees the panel snap to full height immediately instead of
    // following the keyboard slide-down. The suppress flag prevents the
    // visualViewport listener from clobbering this with mid-dismiss
    // reports while iOS is still animating the keyboard out.
    if (
      typeof window !== "undefined"
      && window.innerWidth <= QUICK_CHAT_DESKTOP_BREAKPOINT
      && panelRef.current
    ) {
      suppressVvShrinkRef.current = true;
      panelRef.current.style.removeProperty("--vv-height");
      panelRef.current.style.removeProperty("--vv-offset-top");
      window.setTimeout(() => {
        suppressVvShrinkRef.current = false;
      }, 450);
    }

    if (hideMentionPopupTimeoutRef.current !== null) {
      window.clearTimeout(hideMentionPopupTimeoutRef.current);
    }

    hideMentionPopupTimeoutRef.current = window.setTimeout(() => {
      setMentionPopupVisible(false);
      setMentionFilter("");
      setMentionStartPos(-1);
      setFileMentionPopupVisible(false);
      fileMention.dismissMention();
      hideMentionPopupTimeoutRef.current = null;
    }, 120);

    if (hideSkillMenuTimeoutRef.current !== null) {
      window.clearTimeout(hideSkillMenuTimeoutRef.current);
    }

    hideSkillMenuTimeoutRef.current = window.setTimeout(() => {
      setShowSkillMenu(false);
      hideSkillMenuTimeoutRef.current = null;
    }, 120);
  }, [fileMention, focusComposerInput]);

  const handleInputFocus = useCallback(() => {
    // Re-enable visualViewport tracking — the suppress flag set on blur
    // would otherwise still be in effect if the user re-focused inside
    // the suppress window.
    suppressVvShrinkRef.current = false;
    if (hideMentionPopupTimeoutRef.current !== null) {
      window.clearTimeout(hideMentionPopupTimeoutRef.current);
      hideMentionPopupTimeoutRef.current = null;
    }
    if (hideSkillMenuTimeoutRef.current !== null) {
      window.clearTimeout(hideSkillMenuTimeoutRef.current);
      hideSkillMenuTimeoutRef.current = null;
    }
  }, []);

  const handleInputSelectionChange = useCallback(
    (event: React.SyntheticEvent<HTMLInputElement>) => {
      const input = event.currentTarget;
      const cursorPos = input.selectionStart ?? input.value.length;
      mentionCursorPosRef.current = cursorPos;
      updateMentionState(input.value, cursorPos);

      // Detect file mentions
      fileMention.detectMention(input.value, cursorPos);
      setFileMentionPopupVisible(fileMention.mentionActive);
      if (fileMention.mentionActive) {
        updateFileMentionPosition(input);
      }
    },
    [updateMentionState, fileMention, updateFileMentionPosition],
  );

  const handleInputKeyUp = useCallback(
    (event: React.KeyboardEvent<HTMLInputElement>) => {
      if (event.key === "Escape") {
        return;
      }
      handleInputSelectionChange(event);
    },
    [handleInputSelectionChange],
  );

  const toggleMessageRenderMode = useCallback((messageId: string) => {
    setPlainTextMessageIds((current) => {
      const next = new Set(current);
      if (next.has(messageId)) {
        next.delete(messageId);
      } else {
        next.add(messageId);
      }
      return next;
    });
  }, []);

  const renderAssistantMessageContent = useCallback(
    (content: string, forcePlain = false) => {
      if (forcePlain) {
        return <div className="quick-chat-message-content quick-chat-message-content--plain">{content}</div>;
      }

      return (
        <div className="quick-chat-message-content quick-chat-message-content--markdown">
          <ReactMarkdown remarkPlugins={[remarkGfm]} components={quickChatMarkdownComponents}>
            {content}
          </ReactMarkdown>
        </div>
      );
    },
    [],
  );

  const handleInputKeyDown = useCallback(
    (event: ReactKeyboardEvent<HTMLInputElement>) => {
      mentionCursorPosRef.current = event.currentTarget.selectionStart ?? mentionCursorPosRef.current;

      // Handle file mention popup keyboard navigation first
      if (fileMention.mentionActive && fileMention.files.length > 0) {
        fileMention.handleKeyDown(event, messageInput);
        if (event.key === "Enter" || event.key === "Tab") {
          // Select the highlighted file
          const file = fileMention.files[fileMention.selectedIndex];
          if (file) {
            const newText = fileMention.selectFile(file, messageInput);
            setMessageInput(newText);
            fileMention.dismissMention();
            setFileMentionPopupVisible(false);
          }
        }
        return;
      }

      if (mentionPopupVisible && event.key === "ArrowDown") {
        event.preventDefault();
        if (filteredMentionAgents.length > 0) {
          setMentionHighlightIndex((prev) => (prev + 1) % filteredMentionAgents.length);
        }
        return;
      }

      if (mentionPopupVisible && event.key === "ArrowUp") {
        event.preventDefault();
        if (filteredMentionAgents.length > 0) {
          setMentionHighlightIndex((prev) =>
            prev === 0 ? filteredMentionAgents.length - 1 : prev - 1,
          );
        }
        return;
      }

      if (mentionPopupVisible && event.key === "Enter") {
        event.preventDefault();
        const agentToSelect = filteredMentionAgents[mentionHighlightIndex] ?? filteredMentionAgents[0];
        if (agentToSelect) {
          handleMentionSelect(agentToSelect);
        }
        return;
      }

      if (mentionPopupVisible && event.key === "Escape") {
        event.preventDefault();
        event.stopPropagation();
        setMentionPopupVisible(false);
        setMentionFilter("");
        setMentionStartPos(-1);
        return;
      }

      if (showSkillMenu && filteredSkills.length > 0 && event.key === "ArrowDown") {
        event.preventDefault();
        setHighlightedSkillIndex((prev) => (prev + 1) % filteredSkills.length);
        return;
      }

      if (showSkillMenu && filteredSkills.length > 0 && event.key === "ArrowUp") {
        event.preventDefault();
        setHighlightedSkillIndex((prev) => (prev === 0 ? filteredSkills.length - 1 : prev - 1));
        return;
      }

      if (showSkillMenu && (event.key === "Enter" || event.key === "Tab")) {
        event.preventDefault();
        const selectedSkill = filteredSkills[highlightedSkillIndex] ?? filteredSkills[0];
        if (selectedSkill) {
          handleSkillSelect(selectedSkill);
        }
        return;
      }

      if (showSkillMenu && event.key === "Escape") {
        event.preventDefault();
        setShowSkillMenu(false);
        setSkillFilter("");
        return;
      }

      if (event.key !== "Enter" || event.shiftKey) return;
      event.preventDefault();
      void handleSendMessage();
    },
    [
      mentionPopupVisible,
      filteredMentionAgents,
      mentionHighlightIndex,
      handleMentionSelect,
      handleSendMessage,
      fileMention,
      messageInput,
      showSkillMenu,
      filteredSkills,
      highlightedSkillIndex,
      handleSkillSelect,
    ],
  );

  // Handle FAB click - only toggle if this was a click (not a drag)
  // Reset didDragRef after checking to prevent double-toggle
  const handleFABClick = useCallback(() => {
    if (didDragRef.current) {
      // Was a drag, don't toggle
      didDragRef.current = false;
      return;
    }
    if (isOpen) {
      setIsOpen(false);
      return;
    }
    // iOS only opens the soft keyboard from a focus() that runs while
    // the originating user-gesture is still active, AND the focused
    // element must not be `disabled`. The real composer input renders
    // disabled until the chat session is created, so we focus an
    // always-mounted stealth input here to claim the keyboard now; the
    // auto-focus effect below transfers focus to the real input once
    // it is enabled, which keeps the keyboard up.
    if (typeof window !== "undefined" && window.innerWidth <= QUICK_CHAT_DESKTOP_BREAKPOINT) {
      stealthInputRef.current?.focus({ preventScroll: true });
    }
    setIsOpen(true);
  }, [isOpen, setIsOpen]);

  return (
    <>
      <input
        ref={stealthInputRef}
        type="text"
        className="quick-chat-stealth-input"
        aria-hidden="true"
        tabIndex={-1}
      />
      {showFAB && (
        <button
          ref={fabRef}
          type="button"
          className="quick-chat-fab"
          aria-label="Open quick chat"
          data-testid="quick-chat-fab"
          data-dragging={isDragging ? "true" : "false"}
          style={{ right: position.x, bottom: position.y }}
          onPointerDown={handlePointerDown}
          onClick={handleFABClick}
        >
          <MessageSquare size={24} />
        </button>
      )}

      {isOpen && (
        <div
          className="quick-chat-panel"
          ref={panelRef}
          data-testid="quick-chat-panel"
          style={{
            ...(shouldApplyDesktopPanelSize
              ? {
                  right: position.x + anchorOffset.right,
                  bottom: panelY + anchorOffset.bottom,
                  width: panelSize.width,
                  height: panelSize.height,
                }
              : {}),
          }}
        >
          {shouldApplyDesktopPanelSize && (
            <>
              {/* Edge handles */}
              <div
                className="quick-chat-resize-handle"
                data-resize-direction="n"
                data-testid="quick-chat-resize-n"
                onPointerDown={handleResizeStart}
                role="separator"
                aria-orientation="horizontal"
                aria-label="Resize panel from top"
              />
              <div
                className="quick-chat-resize-handle"
                data-resize-direction="s"
                data-testid="quick-chat-resize-s"
                onPointerDown={handleResizeStart}
                role="separator"
                aria-orientation="horizontal"
                aria-label="Resize panel from bottom"
              />
              <div
                className="quick-chat-resize-handle"
                data-resize-direction="e"
                data-testid="quick-chat-resize-e"
                onPointerDown={handleResizeStart}
                role="separator"
                aria-orientation="vertical"
                aria-label="Resize panel from right"
              />
              <div
                className="quick-chat-resize-handle"
                data-resize-direction="w"
                data-testid="quick-chat-resize-w"
                onPointerDown={handleResizeStart}
                role="separator"
                aria-orientation="vertical"
                aria-label="Resize panel from left"
              />
              {/* Corner handles */}
              <div
                className="quick-chat-resize-handle"
                data-resize-direction="nw"
                data-testid="quick-chat-resize-nw"
                onPointerDown={handleResizeStart}
                role="separator"
                aria-label="Resize panel from top-left corner"
              />
              <div
                className="quick-chat-resize-handle"
                data-resize-direction="ne"
                data-testid="quick-chat-resize-ne"
                onPointerDown={handleResizeStart}
                role="separator"
                aria-label="Resize panel from top-right corner"
              />
              <div
                className="quick-chat-resize-handle"
                data-resize-direction="sw"
                data-testid="quick-chat-resize-sw"
                onPointerDown={handleResizeStart}
                role="separator"
                aria-label="Resize panel from bottom-left corner"
              />
              <div
                className="quick-chat-resize-handle"
                data-resize-direction="se"
                data-testid="quick-chat-resize-se"
                onPointerDown={handleResizeStart}
                role="separator"
                aria-label="Resize panel from bottom-right corner"
              />
            </>
          )}

          <div className="quick-chat-panel-header">
            <div className="quick-chat-panel-title-wrap">
              <h3>Quick Chat</h3>
              {chatMode === "model" && selectedModelTag && (() => {
                const provider =
                  selectedModelInfo?.provider ?? parsedModelSelection?.modelProvider ?? "";
                // On mobile the header pill is squeezed by mode toggle + new-chat
                // + close buttons, so swap a long model name for the provider
                // icon to keep the title row tidy.
                const tagTooLong = viewportMode === "mobile" && selectedModelTag.length > 12;
                if (tagTooLong && provider) {
                  return (
                    <span
                      className="quick-chat-model-tag quick-chat-model-tag--icon"
                      data-testid="quick-chat-model-tag"
                      title={selectedModelTag}
                      aria-label={selectedModelTag}
                    >
                      <ProviderIcon provider={provider} size="sm" />
                    </span>
                  );
                }
                return (
                  <span className="quick-chat-model-tag" data-testid="quick-chat-model-tag" title={selectedModelTag}>
                    {selectedModelTag}
                  </span>
                );
              })()}
            </div>
            <div className="quick-chat-panel-header-actions">
              <button
                type="button"
                className="btn-icon quick-chat-new-chat-btn"
                data-testid="quick-chat-new-thread"
                aria-label="Start a new chat"
                onClick={handleStartFreshChat}
                disabled={sessionsLoading}
              >
                <Plus size={16} />
              </button>
              <button
                type="button"
                className="btn-icon"
                aria-label="Close quick chat"
                data-testid="quick-chat-close"
                onClick={() => setIsOpen(false)}
              >
                <X size={16} />
              </button>
            </div>
          </div>

          <div className="quick-chat-panel-agent-select" data-testid="quick-chat-session-select">
            <label htmlFor="quick-chat-session-select" className="visually-hidden">Select session</label>
            <select
              id="quick-chat-session-select"
              value={activeSession?.id ?? ""}
              onChange={(event) => handleSessionSwitch(event.target.value)}
              data-testid="quick-chat-session-dropdown"
            >
              <option value="" disabled>{sessionsLoading ? "Loading sessions…" : "Select a session"}</option>
              {sessionOptions.map((sessionOption) => (
                <option key={sessionOption.id} value={sessionOption.id}>{sessionOption.label}</option>
              ))}
            </select>
          </div>

          {newSessionChooserOpen && (
            <div className="quick-chat-new-session-chooser" data-testid="quick-chat-new-session-chooser">
              <div className="quick-chat-inline-mode-toggle" data-testid="quick-chat-inline-mode-toggle">
                <button
                  type="button"
                  className={`quick-chat-mode-btn${newSessionMode === "model" ? " quick-chat-mode-btn--active" : ""}`}
                  data-testid="quick-chat-inline-mode-model"
                  onClick={() => setNewSessionMode("model")}
                >
                  Model
                </button>
                <button
                  type="button"
                  className={`quick-chat-mode-btn${newSessionMode === "agent" ? " quick-chat-mode-btn--active" : ""}`}
                  data-testid="quick-chat-inline-mode-agent"
                  onClick={() => setNewSessionMode("agent")}
                >
                  Agent
                </button>
              </div>

              {newSessionMode === "agent" ? (
                <div className="quick-chat-panel-agent-select">
                  <label htmlFor="quick-chat-new-agent-select" className="visually-hidden">Select agent for new chat</label>
                  <select
                    id="quick-chat-new-agent-select"
                    value={newSessionAgentId}
                    onChange={(event) => setNewSessionAgentId(event.target.value)}
                    data-testid="quick-chat-new-agent-select"
                  >
                    {agents.map((agent) => (
                      <option key={agent.id} value={agent.id}>{getAgentLabel(agent)}</option>
                    ))}
                  </select>
                </div>
              ) : (
                <div className="quick-chat-panel-agent-select" data-testid="quick-chat-new-model-select">
                  <CustomModelDropdown
                    id="quick-chat-new-model-select"
                    models={models}
                    value={newSessionModel}
                    onChange={setNewSessionModel}
                    label="Select model override"
                    placeholder={modelsLoading ? "Loading models…" : "Select a model"}
                    disabled={modelsLoading || models.length === 0}
                    favoriteProviders={favoriteProviders}
                    favoriteModels={favoriteModels}
                    onToggleFavorite={onToggleFavorite}
                    onToggleModelFavorite={onToggleModelFavorite}
                  />
                </div>
              )}

              <div className="quick-chat-new-session-actions">
                <button
                  type="button"
                  className="btn"
                  data-testid="quick-chat-new-session-cancel"
                  onClick={() => {
                    setNewSessionChooserOpen(false);
                    setNewSessionMode("model");
                  }}
                >
                  Cancel
                </button>
                <button
                  type="button"
                  className="btn btn-primary"
                  data-testid="quick-chat-new-session-submit"
                  onClick={() => void handleCreateFreshSession()}
                  disabled={sessionsLoading || (newSessionMode === "agent" ? !newSessionAgentId : !parseModelSelection(newSessionModel || selectedModel || configuredDefaultModelSelection))}
                >
                  Create
                </button>
              </div>
            </div>
          )}

          <div className="quick-chat-panel-messages" ref={messagesRef} data-testid="quick-chat-messages" onScroll={updateScrollState}>
            {sessionsLoading ? (
              <div className="quick-chat-panel-empty">Loading conversation…</div>
            ) : isStreaming ? (
              <>
                {messages.map((message: ChatMessageInfo) => (
                  <QuickChatMessageItem
                    key={message.id}
                    message={message}
                    forcePlain={message.role !== "user" && plainTextMessageIds.has(message.id)}
                    mentionAgentsByName={mentionAgentsByName}
                    onToggleRender={toggleMessageRenderMode}
                  />
                ))}
                {helpMessageVisible && (
                  <div className="quick-chat-panel-message quick-chat-panel-message--received" data-testid="quick-chat-help-message">
                    {renderAssistantMessageContent("Available commands:\n- `/clear` — Clear conversation and start fresh\n- `/skill:{name}` — Use a specific skill\n- `/help` — Show this help")}
                  </div>
                )}
                <div
                  className="quick-chat-panel-message quick-chat-panel-message--received quick-chat-panel-message--streaming"
                  data-testid="quick-chat-streaming-message"
                >
                  {streamingText ? (
                    <>
                      <div data-testid="quick-chat-streaming-text">
                        {renderAssistantMessageContent(streamingText, plainTextMessageIds.has("__streaming__"))}
                      </div>
                      <button
                        type="button"
                        className={`quick-chat-message-render-toggle${plainTextMessageIds.has("__streaming__") ? " quick-chat-message-render-toggle--plain" : ""}`}
                        data-testid="quick-chat-message-render-toggle"
                        aria-label={plainTextMessageIds.has("__streaming__") ? "Show rendered markdown" : "Show plain text"}
                        onClick={() => toggleMessageRenderMode("__streaming__")}
                      >
                        {plainTextMessageIds.has("__streaming__") ? <EyeOff size={14} /> : <Eye size={14} />}
                      </button>
                    </>
                  ) : (
                    <p className="quick-chat-panel-waiting" data-testid="quick-chat-waiting">
                      {streamingThinking ? "Thinking…" : "Connecting…"}
                    </p>
                  )}
                  {renderToolCalls(streamingToolCalls, true)}
                  {streamingThinking && (
                    <details className="chat-message-thinking" data-testid="quick-chat-streaming-thinking">
                      <summary>Thinking</summary>
                      <pre className="chat-message-thinking-content">{streamingThinking}</pre>
                    </details>
                  )}
                </div>
              </>
            ) : messagesLoading ? (
              <div className="quick-chat-panel-empty">Loading conversation…</div>
            ) : messages.length === 0 && !streamingText && !streamingThinking && !isStreaming && !helpMessageVisible ? (
              <div className="quick-chat-panel-empty">No messages yet. Start the conversation!</div>
            ) : (
              <>
                {messages.map((message: ChatMessageInfo) => (
                  <QuickChatMessageItem
                    key={message.id}
                    message={message}
                    forcePlain={message.role !== "user" && plainTextMessageIds.has(message.id)}
                    mentionAgentsByName={mentionAgentsByName}
                    onToggleRender={toggleMessageRenderMode}
                  />
                ))}
                {helpMessageVisible && (
                  <div className="quick-chat-panel-message quick-chat-panel-message--received" data-testid="quick-chat-help-message">
                    {renderAssistantMessageContent("Available commands:\n- `/clear` — Clear conversation and start fresh\n- `/skill:{name}` — Use a specific skill\n- `/help` — Show this help")}
                  </div>
                )}
              </>
            )}
          </div>

          {isUserScrolling && (
            <button
              type="button"
              className="btn btn-sm quick-chat-jump-to-latest"
              data-testid="quick-chat-jump-to-latest"
              onClick={scrollToBottom}
            >
              <ChevronDown size={14} />
              Latest
            </button>
          )}

          {pendingAttachments.length > 0 && (
            <div className="quick-chat-attachment-previews" data-testid="quick-chat-attachment-previews">
              {pendingAttachments.map((attachment, index) => (
                <div
                  key={`${attachment.file.name}-${index}`}
                  className="quick-chat-attachment-preview"
                  data-testid={`quick-chat-attachment-preview-${index}`}
                >
                  {attachment.previewUrl
                    ? <img src={attachment.previewUrl} alt={attachment.file.name} />
                    : <span className="quick-chat-attachment-preview-name">{attachment.file.name}</span>}
                  <button
                    type="button"
                    className="quick-chat-attachment-remove"
                    data-testid={`quick-chat-attachment-remove-${index}`}
                    aria-label={`Remove ${attachment.file.name}`}
                    onClick={() => removeAttachment(index)}
                  >
                    ×
                  </button>
                </div>
              ))}
            </div>
          )}

          <div className="quick-chat-panel-input">
            <div
              className={`quick-chat-input-wrapper${isAttachmentDragOver ? " quick-chat-input-wrapper--dragover" : ""}`}
              onDragEnter={handleAttachmentDragEnter}
              onDragOver={handleAttachmentDragOver}
              onDragLeave={handleAttachmentDragLeave}
              onDrop={handleAttachmentDrop}
            >
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*,.txt,.json,.yaml,.yml,.log,.csv,.xml,.md"
                multiple
                tabIndex={-1}
                aria-hidden="true"
                className="quick-chat-attachment-input"
                onChange={(event) => {
                  handleAttachmentFiles(event.target.files);
                  event.target.value = "";
                }}
              />
              <div className="quick-chat-input-row" data-testid="quick-chat-input-row">
                <button
                  type="button"
                  className="btn-icon quick-chat-attach-btn"
                  data-testid="quick-chat-attach-btn"
                  aria-label="Attach files"
                  onClick={() => fileInputRef.current?.click()}
                >
                  <Paperclip size={16} />
                </button>
                <input
                  ref={inputRef}
                  type="text"
                  value={messageInput}
                  onChange={handleInputChange}
                  onKeyDown={handleInputKeyDown}
                  onKeyUp={handleInputKeyUp}
                  onClick={handleInputSelectionChange}
                  onBlur={handleInputBlur}
                  onFocus={handleInputFocus}
                  onPaste={handlePaste}
                  // Intercept the touch *before* iOS's default focus-and-
                  // scroll handler runs. Without this, on the second focus
                  // (after a keyboard dismiss) iOS shifts the visual
                  // viewport to "scroll" the input into view, which yanks
                  // the position:fixed panel up off-screen for ~1s before
                  // settling back. preventDefault on touchstart suppresses
                  // that auto-scroll; we then focus programmatically with
                  // preventScroll so the keyboard still comes up.
                  onTouchStart={(event) => {
                    if (typeof window === "undefined") return;
                    if (window.innerWidth > QUICK_CHAT_DESKTOP_BREAKPOINT) return;
                    if (document.activeElement === event.currentTarget) return;
                    event.preventDefault();
                    event.currentTarget.focus({ preventScroll: true });
                  }}
                  placeholder={inputPlaceholder}
                  disabled={inputDisabled}
                  data-testid="quick-chat-input"
                />
                {isStreaming ? (
                  <button
                    type="button"
                    className="chat-input-stop quick-chat-send-btn"
                    onPointerDown={(event) => {
                      if (typeof window === "undefined" || window.innerWidth > QUICK_CHAT_DESKTOP_BREAKPOINT) return;
                      event.preventDefault();
                      if (event.pointerType && event.pointerType !== "mouse") {
                        handledMobileActionRef.current = true;
                        stopStreaming();
                      }
                    }}
                    onTouchStart={(event) => {
                      if (typeof window === "undefined" || window.innerWidth > QUICK_CHAT_DESKTOP_BREAKPOINT) return;
                      event.preventDefault();
                      handledMobileActionRef.current = true;
                      stopStreaming();
                    }}
                    onMouseDown={(event) => {
                      if (typeof window === "undefined" || window.innerWidth > QUICK_CHAT_DESKTOP_BREAKPOINT) return;
                      event.preventDefault();
                    }}
                    onClick={() => {
                      if (handledMobileActionRef.current) {
                        handledMobileActionRef.current = false;
                        return;
                      }
                      stopStreaming();
                    }}
                    aria-label="Stop generation"
                    data-testid="quick-chat-stop"
                  >
                    <Square size={14} />
                  </button>
                ) : (
                  <button
                    type="button"
                    className="quick-chat-send-btn"
                    onPointerDown={(event) => {
                      if (typeof window === "undefined" || window.innerWidth > QUICK_CHAT_DESKTOP_BREAKPOINT) return;
                      event.preventDefault();
                      if (event.pointerType && event.pointerType !== "mouse") {
                        handledMobileActionRef.current = true;
                        markPreserveComposerFocus();
                        focusComposerInput();
                        void handleSendMessage();
                      }
                    }}
                    onTouchStart={(event) => {
                      if (typeof window === "undefined" || window.innerWidth > QUICK_CHAT_DESKTOP_BREAKPOINT) return;
                      event.preventDefault();
                      handledMobileActionRef.current = true;
                      markPreserveComposerFocus();
                      focusComposerInput();
                      void handleSendMessage();
                    }}
                    onMouseDown={(event) => {
                      if (typeof window === "undefined" || window.innerWidth > QUICK_CHAT_DESKTOP_BREAKPOINT) return;
                      event.preventDefault();
                    }}
                    onClick={() => {
                      if (handledMobileActionRef.current) {
                        handledMobileActionRef.current = false;
                        return;
                      }
                      void handleSendMessage();
                    }}
                    disabled={inputDisabled || (messageInput.trim().length === 0 && pendingAttachments.length === 0)}
                    data-testid="quick-chat-send"
                  >
                    <Send size={16} />
                  </button>
                )}
              </div>
              <AgentMentionPopup
                agents={agents}
                filter={mentionFilter}
                highlightedIndex={mentionHighlightIndex}
                visible={mentionPopupVisible}
                onSelect={handleMentionSelect}
                position="above"
              />
              <FileMentionPopup
                visible={fileMention.mentionActive && !mentionPopupVisible}
                position={fileMentionPosition}
                files={fileMention.files}
                selectedIndex={fileMention.selectedIndex}
                onSelect={(file) => {
                  const newText = fileMention.selectFile(file, messageInput);
                  setMessageInput(newText);
                  fileMention.dismissMention();
                  setFileMentionPopupVisible(false);
                  inputRef.current?.focus();
                }}
                loading={fileMention.loading}
              />
              {showSkillMenu && (
                <div className="chat-skill-menu" data-testid="quick-chat-skill-menu" role="listbox" aria-label="Skill suggestions">
                  {skillsLoading ? (
                    <div className="chat-skill-menu-empty">Loading skills…</div>
                  ) : filteredSkills.length === 0 ? (
                    <div className="chat-skill-menu-empty">
                      {skillFilter ? "No skills found" : "No skills available"}
                    </div>
                  ) : (
                    filteredSkills.map((skill, index) => (
                      <button
                        key={skill.id}
                        type="button"
                        role="option"
                        aria-selected={index === highlightedSkillIndex}
                        className={`chat-skill-menu-item${index === highlightedSkillIndex ? " chat-skill-menu-item--highlighted" : ""}`}
                        onMouseDown={(event) => event.preventDefault()}
                        onMouseEnter={() => setHighlightedSkillIndex(index)}
                        onClick={() => handleSkillSelect(skill)}
                      >
                        <span className="chat-skill-menu-item-name">{skill.name}</span>
                        <span className="chat-skill-menu-item-description" title={skill.relativePath}>
                          {skill.relativePath}
                        </span>
                      </button>
                    ))
                  )}
                </div>
              )}
              {pendingMessage && (
                <div className="chat-pending-message" data-testid="chat-pending-indicator">
                  <span>{`Queued: ${pendingPreview}`}</span>
                  <button
                    type="button"
                    className="chat-pending-message-dismiss"
                    aria-label="Dismiss queued message"
                    data-testid="chat-pending-dismiss"
                    onClick={clearPendingMessage}
                  >
                    ×
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </>
  );
}