import {
  EDITORS,
  type EditorId,
  ModelSlug,
  type NativeApi,
  PROVIDER_SEND_TURN_MAX_INPUT_CHARS,
  PROVIDER_SEND_TURN_MAX_ATTACHMENTS,
  PROVIDER_SEND_TURN_MAX_IMAGE_BYTES,
  type ResolvedKeybindingsConfig,
  type ProviderApprovalDecision,
  type ProviderSendTurnAttachmentInput,
} from "@t3tools/contracts";
import {
  type ClipboardEvent,
  type DragEvent,
  type FormEvent,
  type KeyboardEvent,
  memo,
  type RefObject,
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { type VirtualItem, useVirtualizer } from "@tanstack/react-virtual";
import { gitBranchesQueryOptions, gitCreateWorktreeMutationOptions } from "~/lib/gitReactQuery";
import { serverConfigQueryOptions } from "~/lib/serverReactQuery";

import { isElectron } from "../env";
import { buildBootstrapInput } from "../historyBootstrap";
import {
  DEFAULT_MODEL,
  DEFAULT_REASONING,
  MODEL_OPTIONS,
  REASONING_OPTIONS,
  ReasoningEffort,
  resolveModelSlug,
} from "../model-logic";
import {
  derivePendingApprovals,
  derivePhase,
  deriveTimelineEntries,
  type PendingApproval,
  deriveWorkLogEntries,
  formatDuration,
  formatElapsed,
  formatTimestamp,
} from "../session-logic";
import { isScrollContainerNearBottom } from "../chat-scroll";
import { useStore } from "../store";
import type { ChatImageAttachment } from "../types";
import BranchToolbar from "./BranchToolbar";
import GitActionsControl from "./GitActionsControl";
import {
  isOpenFavoriteEditorShortcut,
  isTerminalCloseShortcut,
  isTerminalNewShortcut,
  isTerminalSplitShortcut,
  isTerminalToggleShortcut,
  shortcutLabelForCommand,
} from "../keybindings";
import ChatMarkdown from "./ChatMarkdown";
import ThreadTerminalDrawer from "./ThreadTerminalDrawer";
import { useNativeApi } from "../hooks/useNativeApi";
import { Alert, AlertAction, AlertDescription, AlertTitle } from "./ui/alert";
import {
  ChevronDownIcon,
  CircleAlertIcon,
  FolderClosedIcon,
  InfoIcon,
  LockIcon,
  LockOpenIcon,
  XIcon,
} from "lucide-react";
import { Button } from "./ui/button";
import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "./ui/select";
import { Separator } from "./ui/separator";
import { Group, GroupSeparator } from "./ui/group";
import { Menu, MenuItem, MenuPopup, MenuShortcut, MenuTrigger } from "./ui/menu";
import { CursorIcon, Icon } from "./Icons";
import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
import { Badge } from "./ui/badge";

function formatMessageMeta(createdAt: string, duration: string | null): string {
  if (!duration) return formatTimestamp(createdAt);
  return `${formatTimestamp(createdAt)} • ${duration}`;
}

const LAST_EDITOR_KEY = "t3code:last-editor";
const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
const IMAGE_SIZE_LIMIT_LABEL = `${Math.round(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES / (1024 * 1024))}MB`;
const IMAGE_ONLY_BOOTSTRAP_PROMPT =
  "[User attached one or more images without additional text. Respond using the conversation context and the attached image(s).]";
const EMPTY_KEYBINDINGS: ResolvedKeybindingsConfig = [];

function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
  if (tone === "error") return "text-rose-300/50 dark:text-rose-300/50";
  if (tone === "tool") return "text-muted-foreground/70";
  if (tone === "thinking") return "text-muted-foreground/50";
  return "text-muted-foreground/40";
}

type SessionContinuityState = "resumed" | "new" | "fallback_new";

interface EnsuredSessionInfo {
  sessionId: string;
  resolvedThreadId: string | null;
  continuityState: SessionContinuityState;
}

interface ComposerImageAttachment extends Omit<ChatImageAttachment, "previewUrl"> {
  previewUrl: string;
  file: File;
}

interface ExpandedImagePreview {
  src: string;
  name: string;
}

function readFileAsDataUrl(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      if (typeof reader.result === "string") {
        resolve(reader.result);
        return;
      }
      reject(new Error("Could not read image data."));
    });
    reader.addEventListener("error", () => {
      reject(reader.error ?? new Error("Failed to read image."));
    });
    reader.readAsDataURL(file);
  });
}

export default function ChatView() {
  const { state, dispatch } = useStore();
  const api = useNativeApi();
  const queryClient = useQueryClient();
  const createWorktreeMutation = useMutation(
    gitCreateWorktreeMutationOptions({ api, queryClient }),
  );
  const [prompt, setPrompt] = useState("");
  const [composerImages, setComposerImages] = useState<ComposerImageAttachment[]>([]);
  const [isDragOverComposer, setIsDragOverComposer] = useState(false);
  const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
  const [isSending, setIsSending] = useState(false);
  const [isConnecting, setIsConnecting] = useState(false);
  const [selectedEffort, setSelectedEffort] = useState(DEFAULT_REASONING);
  const [envMode, setEnvMode] = useState<"local" | "worktree">("local");
  const [isSwitchingRuntimeMode, setIsSwitchingRuntimeMode] = useState(false);
  const [respondingRequestIds, setRespondingRequestIds] = useState<string[]>([]);
  const [expandedWorkGroups, setExpandedWorkGroups] = useState<Record<string, boolean>>({});
  const [nowTick, setNowTick] = useState(() => Date.now());
  const [terminalFocusRequestId, setTerminalFocusRequestId] = useState(0);
  const messagesScrollRef = useRef<HTMLDivElement>(null);
  const shouldAutoScrollRef = useRef(true);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
  const dragDepthRef = useRef(0);
  const terminalOpenByThreadRef = useRef<Record<string, boolean>>({});

  const activeThread = state.threads.find((t) => t.id === state.activeThreadId);
  const activeThreadId = activeThread?.id ?? null;
  const activeSessionId = activeThread?.session?.sessionId;
  const activeProject = state.projects.find((p) => p.id === activeThread?.projectId);
  const selectedModel = resolveModelSlug(
    activeThread?.model ?? activeProject?.model ?? DEFAULT_MODEL,
  );
  const phase = derivePhase(activeThread?.session ?? null);
  const isWorking = phase === "running" || isSending || isConnecting;
  const nowIso = new Date(nowTick).toISOString();
  const workLogEntries = useMemo(
    () => deriveWorkLogEntries(activeThread?.events ?? [], undefined),
    [activeThread?.events],
  );
  const latestTurnWorkEntries = useMemo(
    () => deriveWorkLogEntries(activeThread?.events ?? [], activeThread?.latestTurnId),
    [activeThread?.events, activeThread?.latestTurnId],
  );
  const pendingApprovals = useMemo(
    () => derivePendingApprovals(activeThread?.events ?? []),
    [activeThread?.events],
  );
  const assistantCompletionByItemId = useMemo(() => {
    const map = new Map<string, string>();
    const ordered = [...(activeThread?.events ?? [])].toReversed();
    for (const event of ordered) {
      if (event.method !== "item/completed") continue;
      if (!event.itemId) continue;
      map.set(event.itemId, event.createdAt);
    }
    return map;
  }, [activeThread?.events]);
  const timelineEntries = useMemo(
    () => deriveTimelineEntries(activeThread?.messages ?? [], workLogEntries),
    [activeThread?.messages, workLogEntries],
  );
  const completionSummary = useMemo(() => {
    if (!activeThread?.latestTurnStartedAt) return null;
    if (!activeThread.latestTurnCompletedAt) return null;
    if (!latestTurnWorkEntries.some((entry) => entry.tone === "tool")) {
      return null;
    }

    if (
      typeof activeThread.latestTurnDurationMs === "number" &&
      Number.isFinite(activeThread.latestTurnDurationMs) &&
      activeThread.latestTurnDurationMs >= 0
    ) {
      return `Worked for ${formatDuration(activeThread.latestTurnDurationMs)}`;
    }

    const elapsed = formatElapsed(
      activeThread.latestTurnStartedAt,
      activeThread.latestTurnCompletedAt,
    );
    return elapsed ? `Worked for ${elapsed}` : null;
  }, [
    activeThread?.latestTurnStartedAt,
    activeThread?.latestTurnCompletedAt,
    activeThread?.latestTurnDurationMs,
    latestTurnWorkEntries,
  ]);
  const completionDividerBeforeEntryId = useMemo(() => {
    if (!activeThread?.latestTurnStartedAt) return null;
    if (!activeThread.latestTurnCompletedAt) return null;
    if (!completionSummary) return null;

    const turnStartedAt = Date.parse(activeThread.latestTurnStartedAt);
    const turnCompletedAt = Date.parse(activeThread.latestTurnCompletedAt);
    if (Number.isNaN(turnStartedAt)) return null;
    if (Number.isNaN(turnCompletedAt)) return null;

    let inRangeMatch: string | null = null;
    let fallbackMatch: string | null = null;
    for (const timelineEntry of timelineEntries) {
      if (timelineEntry.kind !== "message") continue;
      if (timelineEntry.message.role !== "assistant") continue;
      const messageAt = Date.parse(timelineEntry.message.createdAt);
      if (Number.isNaN(messageAt) || messageAt < turnStartedAt) continue;
      fallbackMatch = timelineEntry.id;
      if (messageAt <= turnCompletedAt) {
        inRangeMatch = timelineEntry.id;
      }
    }
    return inRangeMatch ?? fallbackMatch;
  }, [
    activeThread?.latestTurnCompletedAt,
    activeThread?.latestTurnStartedAt,
    completionSummary,
    timelineEntries,
  ]);
  const runtimeSessionConfig =
    state.runtimeMode === "full-access"
      ? ({
          approvalPolicy: "never",
          sandboxMode: "danger-full-access",
        } as const)
      : ({
          approvalPolicy: "on-request",
          sandboxMode: "workspace-write",
        } as const);
  const gitCwd = activeThread?.worktreePath ?? activeProject?.cwd ?? null;
  const branchesQuery = useQuery(gitBranchesQueryOptions(api, gitCwd));
  const keybindingsQuery = useQuery({
    ...serverConfigQueryOptions(api),
    select: (config) => config.keybindings,
  });
  const keybindings = keybindingsQuery.data ?? EMPTY_KEYBINDINGS;
  // Default true while loading to avoid toolbar flicker.
  const isGitRepo = branchesQuery.data?.isRepo ?? true;
  const splitTerminalShortcutLabel = useMemo(
    () => shortcutLabelForCommand(keybindings, "terminal.split"),
    [keybindings],
  );
  const newTerminalShortcutLabel = useMemo(
    () => shortcutLabelForCommand(keybindings, "terminal.new"),
    [keybindings],
  );
  const closeTerminalShortcutLabel = useMemo(
    () => shortcutLabelForCommand(keybindings, "terminal.close"),
    [keybindings],
  );

  const envLocked = Boolean(
    activeThread &&
    (activeThread.messages.length > 0 ||
      (activeThread.session !== null && activeThread.session.status !== "closed")),
  );

  const revokePreviewUrls = useCallback((images: Array<{ previewUrl?: string }>) => {
    for (const image of images) {
      if (!image.previewUrl) continue;
      URL.revokeObjectURL(image.previewUrl);
    }
  }, []);
  const focusComposer = useCallback(() => {
    const textarea = textareaRef.current;
    if (!textarea) return;
    textarea.focus();
    const cursor = textarea.value.length;
    textarea.setSelectionRange(cursor, cursor);
  }, []);
  const scheduleComposerFocus = useCallback(() => {
    window.requestAnimationFrame(() => {
      focusComposer();
    });
  }, [focusComposer]);
  const toggleTerminalVisibility = useCallback(() => {
    if (!activeThreadId) return;
    dispatch({
      type: "SET_THREAD_TERMINAL_OPEN",
      threadId: activeThreadId,
      open: !activeThread?.terminalOpen,
    });
  }, [activeThread?.terminalOpen, activeThreadId, dispatch]);
  const splitTerminal = useCallback(() => {
    if (!activeThreadId) return;
    dispatch({
      type: "SPLIT_THREAD_TERMINAL",
      threadId: activeThreadId,
      terminalId: `terminal-${crypto.randomUUID()}`,
    });
    setTerminalFocusRequestId((value) => value + 1);
  }, [activeThreadId, dispatch]);
  const createNewTerminal = useCallback(() => {
    if (!activeThreadId) return;
    dispatch({
      type: "NEW_THREAD_TERMINAL",
      threadId: activeThreadId,
      terminalId: `terminal-${crypto.randomUUID()}`,
    });
    setTerminalFocusRequestId((value) => value + 1);
  }, [activeThreadId, dispatch]);
  const activateTerminal = useCallback(
    (terminalId: string) => {
      if (!activeThreadId) return;
      dispatch({
        type: "SET_THREAD_ACTIVE_TERMINAL",
        threadId: activeThreadId,
        terminalId,
      });
      setTerminalFocusRequestId((value) => value + 1);
    },
    [activeThreadId, dispatch],
  );
  const closeTerminal = useCallback(
    (terminalId: string) => {
      if (!activeThreadId || !api) return;
      const isFinalTerminal = (activeThread?.terminalIds.length ?? 0) <= 1;
      const fallbackExitWrite = () =>
        api.terminal
          .write({ threadId: activeThreadId, terminalId, data: "exit\n" })
          .catch(() => undefined);
      if ("close" in api.terminal && typeof api.terminal.close === "function") {
        void (async () => {
          if (isFinalTerminal) {
            await api.terminal
              .clear({ threadId: activeThreadId, terminalId })
              .catch(() => undefined);
          }
          await api.terminal.close({ threadId: activeThreadId, terminalId, deleteHistory: true });
        })().catch(() => fallbackExitWrite());
      } else {
        void fallbackExitWrite();
      }
      dispatch({
        type: "CLOSE_THREAD_TERMINAL",
        threadId: activeThreadId,
        terminalId,
      });
      setTerminalFocusRequestId((value) => value + 1);
    },
    [activeThread?.terminalIds.length, activeThreadId, api, dispatch],
  );

  const handleRuntimeModeChange = async (mode: "approval-required" | "full-access") => {
    if (mode === state.runtimeMode) return;
    dispatch({ type: "SET_RUNTIME_MODE", mode });
    scheduleComposerFocus();
    if (!api) return;

    const sessionIds = state.threads
      .map((t) => t.session)
      .filter((s): s is NonNullable<typeof s> => s !== null && s.status !== "closed")
      .map((s) => s.sessionId);

    if (sessionIds.length === 0) return;

    setIsSwitchingRuntimeMode(true);
    try {
      await Promise.all(
        sessionIds.map((id) => api.providers.stopSession({ sessionId: id }).catch(() => undefined)),
      );
    } finally {
      setIsSwitchingRuntimeMode(false);
    }
  };

  // Auto-scroll on new messages
  const messageCount = activeThread?.messages.length ?? 0;
  const workLogCount = workLogEntries.length;
  const scrollMessagesToBottom = useCallback((behavior: ScrollBehavior = "auto") => {
    const scrollContainer = messagesScrollRef.current;
    if (!scrollContainer) return;
    scrollContainer.scrollTo({ top: scrollContainer.scrollHeight, behavior });
    shouldAutoScrollRef.current = true;
  }, []);
  const onMessagesScroll = useCallback(() => {
    const scrollContainer = messagesScrollRef.current;
    if (!scrollContainer) return;
    shouldAutoScrollRef.current = isScrollContainerNearBottom(scrollContainer);
  }, []);
  useLayoutEffect(() => {
    if (!activeThread?.id) return;
    scrollMessagesToBottom();
  }, [activeThread?.id, scrollMessagesToBottom]);
  useEffect(() => {
    if (!shouldAutoScrollRef.current) return;
    scrollMessagesToBottom("smooth");
  }, [messageCount, scrollMessagesToBottom]);
  useEffect(() => {
    if (phase !== "running") return;
    if (!shouldAutoScrollRef.current) return;
    scrollMessagesToBottom("smooth");
  }, [phase, workLogCount, scrollMessagesToBottom]);

  useEffect(() => {
    setExpandedWorkGroups({});
  }, [activeThread?.id]);

  useEffect(() => {
    if (!activeThread?.id || activeThread.terminalOpen) return;
    const frame = window.requestAnimationFrame(() => {
      focusComposer();
    });
    return () => {
      window.cancelAnimationFrame(frame);
    };
  }, [activeThread?.id, activeThread?.terminalOpen, focusComposer]);

  useEffect(() => {
    composerImagesRef.current = composerImages;
  }, [composerImages]);

  useEffect(() => {
    setComposerImages((existing) => {
      revokePreviewUrls(existing);
      return [];
    });
    dragDepthRef.current = 0;
    setIsDragOverComposer(false);
    setExpandedImage(null);
  }, [activeThread?.id, revokePreviewUrls]);

  useEffect(() => {
    return () => {
      revokePreviewUrls(composerImagesRef.current);
    };
  }, [revokePreviewUrls]);

  /**
   * Close expanded image on Escape key
   */
  useEffect(() => {
    if (!expandedImage) {
      return;
    }

    const onKeyDown = (event: globalThis.KeyboardEvent) => {
      if (event.key !== "Escape") return;
      setExpandedImage(null);
    };

    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [expandedImage]);

  const activeWorktreePath = activeThread?.worktreePath;

  useEffect(() => {
    if (!activeThread?.id) return;
    setEnvMode(activeWorktreePath ? "worktree" : "local");
  }, [activeThread?.id, activeWorktreePath]);

  // Auto-resize textarea
  useEffect(() => {
    const ta = textareaRef.current;
    if (!ta) return;
    ta.style.height = "auto";
    ta.style.height = `${Math.min(ta.scrollHeight, 200)}px`;
  }, [prompt]);

  useEffect(() => {
    if (phase !== "running") return;
    const timer = window.setInterval(() => {
      setNowTick(Date.now());
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, [phase]);

  useEffect(() => {
    if (!activeThreadId) return;
    const previous = terminalOpenByThreadRef.current[activeThreadId] ?? false;
    const current = Boolean(activeThread?.terminalOpen);

    if (!previous && current) {
      setTerminalFocusRequestId((value) => value + 1);
    } else if (previous && !current) {
      terminalOpenByThreadRef.current[activeThreadId] = current;
      const frame = window.requestAnimationFrame(() => {
        focusComposer();
      });
      return () => {
        window.cancelAnimationFrame(frame);
      };
    }

    terminalOpenByThreadRef.current[activeThreadId] = current;
  }, [activeThread?.terminalOpen, activeThreadId, focusComposer]);

  useEffect(() => {
    const isTerminalFocused = (): boolean => {
      const activeElement = document.activeElement;
      if (!(activeElement instanceof HTMLElement)) return false;
      if (activeElement.classList.contains("xterm-helper-textarea")) return true;
      return activeElement.closest(".thread-terminal-drawer .xterm") !== null;
    };

    const handler = (event: globalThis.KeyboardEvent) => {
      if (!activeThreadId || event.defaultPrevented) return;
      const shortcutContext = {
        terminalFocus: isTerminalFocused(),
        terminalOpen: Boolean(activeThread?.terminalOpen),
      };

      if (isTerminalToggleShortcut(event, keybindings, { context: shortcutContext })) {
        event.preventDefault();
        event.stopPropagation();
        toggleTerminalVisibility();
        return;
      }

      if (isTerminalSplitShortcut(event, keybindings, { context: shortcutContext })) {
        event.preventDefault();
        event.stopPropagation();
        if (!activeThread?.terminalOpen) {
          dispatch({
            type: "SET_THREAD_TERMINAL_OPEN",
            threadId: activeThreadId,
            open: true,
          });
        }
        splitTerminal();
        return;
      }

      if (isTerminalCloseShortcut(event, keybindings, { context: shortcutContext })) {
        event.preventDefault();
        event.stopPropagation();
        if (!activeThread?.terminalOpen) return;
        closeTerminal(activeThread.activeTerminalId);
        return;
      }

      if (!isTerminalNewShortcut(event, keybindings, { context: shortcutContext })) return;
      event.preventDefault();
      event.stopPropagation();
      if (!activeThread?.terminalOpen) {
        dispatch({
          type: "SET_THREAD_TERMINAL_OPEN",
          threadId: activeThreadId,
          open: true,
        });
      }
      createNewTerminal();
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [
    activeThread?.terminalOpen,
    activeThread?.activeTerminalId,
    activeThreadId,
    closeTerminal,
    createNewTerminal,
    dispatch,
    splitTerminal,
    keybindings,
    toggleTerminalVisibility,
  ]);

  const setThreadError = (threadId: string | null, error: string | null) => {
    if (!threadId) return;
    dispatch({
      type: "SET_ERROR",
      threadId,
      error,
    });
  };

  const addComposerImages = (files: File[]) => {
    if (!activeThreadId || files.length === 0) return;

    const nextImages = [...composerImagesRef.current];
    let error: string | null = null;
    for (const file of files) {
      if (!file.type.startsWith("image/")) {
        error = `Unsupported file type for '${file.name}'. Please attach image files only.`;
        continue;
      }
      if (file.size > PROVIDER_SEND_TURN_MAX_IMAGE_BYTES) {
        error = `'${file.name}' exceeds the ${IMAGE_SIZE_LIMIT_LABEL} attachment limit.`;
        continue;
      }
      if (nextImages.length >= PROVIDER_SEND_TURN_MAX_ATTACHMENTS) {
        error = `You can attach up to ${PROVIDER_SEND_TURN_MAX_ATTACHMENTS} images per message.`;
        break;
      }

      const previewUrl = URL.createObjectURL(file);
      nextImages.push({
        type: "image",
        id: crypto.randomUUID(),
        name: file.name || "image",
        mimeType: file.type,
        sizeBytes: file.size,
        previewUrl,
        file,
      });
    }

    setComposerImages(nextImages);
    setThreadError(activeThreadId, error);
  };

  const removeComposerImage = (imageId: string) => {
    setComposerImages((existing) => {
      const match = existing.find((image) => image.id === imageId);
      if (match?.previewUrl) {
        URL.revokeObjectURL(match.previewUrl);
      }
      return existing.filter((image) => image.id !== imageId);
    });
  };

  const onComposerPaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
    const files = Array.from(event.clipboardData.files);
    if (files.length === 0) {
      return;
    }
    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
    if (imageFiles.length === 0) {
      return;
    }
    event.preventDefault();
    addComposerImages(imageFiles);
  };

  const onComposerDragEnter = (event: DragEvent<HTMLDivElement>) => {
    if (!event.dataTransfer.types.includes("Files")) {
      return;
    }
    event.preventDefault();
    dragDepthRef.current += 1;
    setIsDragOverComposer(true);
  };

  const onComposerDragOver = (event: DragEvent<HTMLDivElement>) => {
    if (!event.dataTransfer.types.includes("Files")) {
      return;
    }
    event.preventDefault();
    event.dataTransfer.dropEffect = "copy";
    setIsDragOverComposer(true);
  };

  const onComposerDragLeave = (event: DragEvent<HTMLDivElement>) => {
    if (!event.dataTransfer.types.includes("Files")) {
      return;
    }
    event.preventDefault();
    const nextTarget = event.relatedTarget;
    if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
      return;
    }
    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
    if (dragDepthRef.current === 0) {
      setIsDragOverComposer(false);
    }
  };

  const onComposerDrop = (event: DragEvent<HTMLDivElement>) => {
    if (!event.dataTransfer.types.includes("Files")) {
      return;
    }
    event.preventDefault();
    dragDepthRef.current = 0;
    setIsDragOverComposer(false);
    const files = Array.from(event.dataTransfer.files);
    addComposerImages(files);
    focusComposer();
  };

  const ensureSession = async (cwdOverride?: string): Promise<EnsuredSessionInfo | null> => {
    if (!api || !activeThread || !activeProject) return null;
    if (activeThread.session && activeThread.session.status !== "closed") {
      const sessionThreadId = activeThread.session.threadId ?? null;
      const continuityState: SessionContinuityState =
        activeThread.codexThreadId === null
          ? "new"
          : sessionThreadId === activeThread.codexThreadId
            ? "resumed"
            : "fallback_new";
      return {
        sessionId: activeThread.session.sessionId,
        resolvedThreadId: sessionThreadId,
        continuityState,
      } satisfies EnsuredSessionInfo;
    }

    const priorCodexThreadId = activeThread.codexThreadId;
    setIsConnecting(true);
    try {
      const session = await api.providers.startSession({
        provider: "codex",
        cwd: cwdOverride ?? activeThread.worktreePath ?? activeProject.cwd,
        model: selectedModel || undefined,
        resumeThreadId: priorCodexThreadId ?? undefined,
        approvalPolicy: runtimeSessionConfig.approvalPolicy,
        sandboxMode: runtimeSessionConfig.sandboxMode,
      });
      dispatch({
        type: "UPDATE_SESSION",
        threadId: activeThread.id,
        session,
      });
      const resolvedThreadId = session.threadId ?? null;
      const continuityState: SessionContinuityState =
        priorCodexThreadId === null
          ? "new"
          : resolvedThreadId === priorCodexThreadId
            ? "resumed"
            : "fallback_new";
      return {
        sessionId: session.sessionId,
        resolvedThreadId,
        continuityState,
      };
    } catch (err) {
      dispatch({
        type: "SET_ERROR",
        threadId: activeThread.id,
        error: err instanceof Error ? err.message : "Failed to connect.",
      });
      return null;
    } finally {
      setIsConnecting(false);
    }
  };

  const onSend = async (e: FormEvent) => {
    e.preventDefault();
    if (!api || !activeThread || isSending || isConnecting) return;
    const trimmed = prompt.trim();
    if (!trimmed && composerImages.length === 0) return;
    if (!activeProject) return;
    const composerImagesSnapshot = [...composerImages];

    // On first message: lock in branch + create worktree if needed.
    let sessionCwd: string | undefined;
    if (
      activeThread.messages.length === 0 &&
      activeThread.branch &&
      envMode === "worktree" &&
      !activeThread.worktreePath
    ) {
      try {
        const newBranch = `codething/${crypto.randomUUID().slice(0, 8)}`;
        const result = await createWorktreeMutation.mutateAsync({
          cwd: activeProject.cwd,
          branch: activeThread.branch,
          newBranch,
        });
        sessionCwd = result.worktree.path;
        dispatch({
          type: "SET_THREAD_BRANCH",
          threadId: activeThread.id,
          branch: result.worktree.branch,
          worktreePath: result.worktree.path,
        });
      } catch (err) {
        dispatch({
          type: "SET_ERROR",
          threadId: activeThread.id,
          error: err instanceof Error ? err.message : "Failed to create worktree",
        });
        return;
      }
    }

    // Auto-title from first message
    if (activeThread.messages.length === 0) {
      const titleSeed =
        trimmed ||
        (composerImagesSnapshot.length > 0
          ? `Image: ${composerImagesSnapshot[0]?.name ?? "attachment"}`
          : "New thread");
      const title = titleSeed.length > 50 ? `${titleSeed.slice(0, 50)}...` : titleSeed;
      dispatch({
        type: "SET_THREAD_TITLE",
        threadId: activeThread.id,
        title,
      });
    }

    setThreadError(activeThread.id, null);
    const messageAttachments: ChatImageAttachment[] = composerImagesSnapshot.map((image) => ({
      type: "image",
      id: image.id,
      name: image.name,
      mimeType: image.mimeType,
      sizeBytes: image.sizeBytes,
      previewUrl: image.previewUrl,
    }));
    dispatch({
      type: "PUSH_USER_MESSAGE",
      threadId: activeThread.id,
      id: crypto.randomUUID(),
      text: trimmed,
      ...(messageAttachments.length > 0 ? { attachments: messageAttachments } : {}),
    });
    const previousMessages = activeThread.messages;
    setPrompt("");
    setComposerImages([]);

    const sessionInfo = await ensureSession(sessionCwd);
    if (!sessionInfo) return;

    setIsSending(true);
    try {
      const turnAttachments = await Promise.all(
        composerImagesSnapshot.map(
          async (image): Promise<ProviderSendTurnAttachmentInput> => ({
            type: "image",
            name: image.name,
            mimeType: image.mimeType,
            sizeBytes: image.sizeBytes,
            dataUrl: await readFileAsDataUrl(image.file),
          }),
        ),
      );
      const shouldBootstrap =
        previousMessages.length > 0 &&
        (sessionInfo.continuityState === "new" || sessionInfo.continuityState === "fallback_new");
      const latestPromptForBootstrap = trimmed || IMAGE_ONLY_BOOTSTRAP_PROMPT;
      const input = shouldBootstrap
        ? buildBootstrapInput(
            previousMessages,
            latestPromptForBootstrap,
            PROVIDER_SEND_TURN_MAX_INPUT_CHARS,
          ).text
        : trimmed || undefined;
      await api.providers.sendTurn({
        sessionId: sessionInfo.sessionId,
        ...(input ? { input } : {}),
        ...(turnAttachments.length > 0 ? { attachments: turnAttachments } : {}),
        model: selectedModel || undefined,
        effort: selectedEffort || undefined,
      });
    } catch (err) {
      setThreadError(
        activeThread.id,
        err instanceof Error ? err.message : "Failed to send message.",
      );
    } finally {
      setIsSending(false);
    }
  };

  const onInterrupt = async () => {
    if (!api || !activeThread?.session) return;
    await api.providers.interruptTurn({
      sessionId: activeThread.session.sessionId,
      turnId: activeThread.session.activeTurnId,
    });
  };

  const onRespondToApproval = useCallback(
    async (requestId: string, decision: ProviderApprovalDecision) => {
      if (!api || !activeSessionId || !activeThreadId) return;

      setRespondingRequestIds((existing) =>
        existing.includes(requestId) ? existing : [...existing, requestId],
      );
      try {
        await api.providers.respondToRequest({
          sessionId: activeSessionId,
          requestId,
          decision,
        });
      } catch (err) {
        dispatch({
          type: "SET_ERROR",
          threadId: activeThreadId,
          error: err instanceof Error ? err.message : "Failed to submit approval decision.",
        });
      } finally {
        setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
      }
    },
    [activeSessionId, activeThreadId, api, dispatch],
  );

  const onModelSelect = useCallback(
    (model: ModelSlug) => {
      if (!activeThread) return;
      dispatch({
        type: "SET_THREAD_MODEL",
        threadId: activeThread.id,
        model: resolveModelSlug(model),
      });
      scheduleComposerFocus();
    },
    [activeThread, dispatch, scheduleComposerFocus],
  );
  const onEffortSelect = useCallback(
    (effort: ReasoningEffort) => {
      setSelectedEffort(effort);
      scheduleComposerFocus();
    },
    [scheduleComposerFocus],
  );
  const onEnvModeChange = useCallback(
    (mode: "local" | "worktree") => {
      setEnvMode(mode);
      scheduleComposerFocus();
    },
    [scheduleComposerFocus],
  );

  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      void onSend(e as unknown as FormEvent);
    }
  };
  const onToggleWorkGroup = useCallback((groupId: string) => {
    setExpandedWorkGroups((existing) => ({
      ...existing,
      [groupId]: !existing[groupId],
    }));
  }, []);
  const onExpandTimelineImage = useCallback((image: ExpandedImagePreview) => {
    setExpandedImage(image);
  }, []);
  const onToggleDiff = useCallback(() => {
    dispatch({ type: "TOGGLE_DIFF" });
  }, [dispatch]);

  // Empty state: no active thread
  if (!activeThread) {
    return (
      <div className="flex min-h-0 flex-1 flex-col bg-background text-muted-foreground/40">
        {isElectron && (
          <div className="drag-region flex h-[52px] shrink-0 items-center border-b border-border px-5">
            <span className="text-xs text-muted-foreground/50">No active thread</span>
          </div>
        )}
        <div className="flex flex-1 items-center justify-center">
          <div className="text-center">
            <p className="text-sm">Select a thread or create a new one to get started.</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex min-h-0 flex-1 flex-col bg-background">
      {/* Top bar */}
      <header
        className={`flex items-center justify-between border-b border-border px-5 ${isElectron ? "drag-region h-[52px]" : "py-3"}`}
      >
        <ChatHeader
          activeThreadTitle={activeThread.title}
          activeProjectName={activeProject?.name}
          keybindings={keybindings}
          api={api}
          gitCwd={gitCwd}
          diffOpen={state.diffOpen}
          onToggleDiff={onToggleDiff}
        />
      </header>

      {/* Error banner */}
      <ThreadErrorBanner error={activeThread.error} />
      <PendingApprovalsPanel
        pendingApprovals={pendingApprovals}
        respondingRequestIds={respondingRequestIds}
        onRespondToApproval={onRespondToApproval}
      />

      {/* Messages */}
      <div
        ref={messagesScrollRef}
        data-perf-messages-scroll
        data-perf-active-thread-id={activeThread.id}
        data-perf-message-count={activeThread.messages.length}
        className="min-h-0 flex-1 overflow-y-auto px-5 py-4"
        onScroll={onMessagesScroll}
      >
        <MessagesTimeline
          hasMessages={activeThread.messages.length > 0}
          isWorking={isWorking}
          scrollContainerRef={messagesScrollRef}
          timelineEntries={timelineEntries}
          completionDividerBeforeEntryId={completionDividerBeforeEntryId}
          completionSummary={completionSummary}
          assistantCompletionByItemId={assistantCompletionByItemId}
          nowIso={nowIso}
          expandedWorkGroups={expandedWorkGroups}
          onToggleWorkGroup={onToggleWorkGroup}
          onImageExpand={onExpandTimelineImage}
        />
      </div>

      {/* Input bar */}
      <div className={cn("px-5 pt-2", isGitRepo ? "pb-1" : "pb-4")}>
        <form onSubmit={onSend} className="mx-auto max-w-3xl">
          <div
            className={`group rounded-[20px] border bg-card transition-colors duration-200 focus-within:border-ring ${
              isDragOverComposer ? "border-primary/70 bg-accent/30" : "border-border"
            }`}
            onDragEnter={onComposerDragEnter}
            onDragOver={onComposerDragOver}
            onDragLeave={onComposerDragLeave}
            onDrop={onComposerDrop}
          >
            {/* Textarea area */}
            <div className="px-4 pt-4 pb-2">
              {composerImages.length > 0 && (
                <div className="mb-3 flex flex-wrap gap-2">
                  {composerImages.map((image) => (
                    <div
                      key={image.id}
                      className="relative h-16 w-16 overflow-hidden rounded-lg border border-border/80 bg-background"
                    >
                      {image.previewUrl ? (
                        <img
                          src={image.previewUrl}
                          alt={image.name}
                          className="h-full w-full cursor-zoom-in object-cover"
                          onClick={() =>
                            setExpandedImage({ src: image.previewUrl, name: image.name })
                          }
                        />
                      ) : (
                        <div className="flex h-full w-full items-center justify-center px-1 text-center text-[10px] text-muted-foreground/70">
                          {image.name}
                        </div>
                      )}
                      <Button
                        variant="ghost"
                        size="icon-xs"
                        className="absolute right-1 top-1 bg-background/80 hover:bg-background/90"
                        onClick={() => removeComposerImage(image.id)}
                        aria-label={`Remove ${image.name}`}
                      >
                        <XIcon />
                      </Button>
                    </div>
                  ))}
                </div>
              )}
              <textarea
                ref={textareaRef}
                data-perf-composer-input
                className="w-full resize-none bg-transparent text-[14px] leading-relaxed text-foreground placeholder:text-muted-foreground/35 focus:outline-none"
                rows={2}
                value={prompt}
                onChange={(e) => setPrompt(e.target.value)}
                onKeyDown={onKeyDown}
                onPaste={onComposerPaste}
                placeholder={
                  phase === "disconnected"
                    ? "Ask for follow-up changes or attach images"
                    : "Ask anything, or attach images..."
                }
                disabled={isSending || isConnecting}
              />
            </div>

            {/* Bottom toolbar */}
            <div className="flex items-center justify-between px-3 pb-3">
              <div className="flex items-center gap-1">
                {/* Model picker */}
                <ModelPicker model={selectedModel} onModelChange={onModelSelect} />

                {/* Divider */}
                <Separator orientation="vertical" className="mx-0.5 h-4" />

                {/* Reasoning effort */}
                <ReasoningEffortPicker effort={selectedEffort} onEffortChange={onEffortSelect} />

                {/* Divider */}
                <Separator orientation="vertical" className="mx-0.5 h-4" />

                {/* Runtime mode toggle */}
                <Button
                  variant="ghost"
                  className="text-muted-foreground/70 hover:text-foreground/80"
                  size="sm"
                  type="button"
                  data-perf-runtime-toggle
                  disabled={isSwitchingRuntimeMode}
                  onClick={() =>
                    void handleRuntimeModeChange(
                      state.runtimeMode === "full-access" ? "approval-required" : "full-access",
                    )
                  }
                  title={
                    state.runtimeMode === "full-access"
                      ? "Full access — click to require approvals"
                      : "Approval required — click for full access"
                  }
                >
                  {state.runtimeMode === "full-access" ? <LockOpenIcon /> : <LockIcon />}
                  {state.runtimeMode === "full-access" ? "Full access" : "Supervised"}
                </Button>
              </div>

              {/* Right side: send / stop button */}
              <div className="flex items-center gap-2">
                {phase === "running" ? (
                  <button
                    type="button"
                    className="flex h-8 w-8 items-center justify-center rounded-full bg-rose-500/90 text-white transition-all duration-150 hover:bg-rose-500 hover:scale-105"
                    onClick={() => void onInterrupt()}
                    aria-label="Stop generation"
                  >
                    <svg
                      width="12"
                      height="12"
                      viewBox="0 0 12 12"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <rect x="2" y="2" width="8" height="8" rx="1.5" />
                    </svg>
                  </button>
                ) : (
                  <button
                    type="submit"
                    className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/90 text-primary-foreground transition-all duration-150 hover:bg-primary hover:scale-105 disabled:opacity-30 disabled:hover:scale-100"
                    disabled={
                      isSending || isConnecting || (!prompt.trim() && composerImages.length === 0)
                    }
                    aria-label={
                      isConnecting ? "Connecting" : isSending ? "Sending" : "Send message"
                    }
                  >
                    {isConnecting || isSending ? (
                      <svg
                        width="14"
                        height="14"
                        viewBox="0 0 14 14"
                        fill="none"
                        className="animate-spin"
                        aria-hidden="true"
                      >
                        <circle
                          cx="7"
                          cy="7"
                          r="5.5"
                          stroke="currentColor"
                          strokeWidth="1.5"
                          strokeLinecap="round"
                          strokeDasharray="20 12"
                        />
                      </svg>
                    ) : (
                      <svg
                        width="14"
                        height="14"
                        viewBox="0 0 14 14"
                        fill="none"
                        aria-hidden="true"
                      >
                        <path
                          d="M7 11.5V2.5M7 2.5L3 6.5M7 2.5L11 6.5"
                          stroke="currentColor"
                          strokeWidth="1.8"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    )}
                  </button>
                )}
              </div>
            </div>
          </div>
        </form>
      </div>

      {isGitRepo && (
        <BranchToolbar
          envMode={envMode}
          onEnvModeChange={onEnvModeChange}
          envLocked={envLocked}
          onComposerFocusRequest={scheduleComposerFocus}
        />
      )}

      {activeThread.terminalOpen && api && activeProject && (
        <ThreadTerminalDrawer
          key={activeThread.id}
          api={api}
          threadId={activeThread.id}
          cwd={gitCwd ?? activeProject.cwd}
          height={activeThread.terminalHeight}
          terminalIds={activeThread.terminalIds}
          activeTerminalId={activeThread.activeTerminalId}
          terminalGroups={activeThread.terminalGroups}
          activeTerminalGroupId={activeThread.activeTerminalGroupId}
          focusRequestId={terminalFocusRequestId}
          onSplitTerminal={splitTerminal}
          onNewTerminal={createNewTerminal}
          splitShortcutLabel={splitTerminalShortcutLabel ?? undefined}
          newShortcutLabel={newTerminalShortcutLabel ?? undefined}
          closeShortcutLabel={closeTerminalShortcutLabel ?? undefined}
          onActiveTerminalChange={activateTerminal}
          onCloseTerminal={closeTerminal}
          onHeightChange={(height) =>
            dispatch({
              type: "SET_THREAD_TERMINAL_HEIGHT",
              threadId: activeThread.id,
              height,
            })
          }
        />
      )}

      {expandedImage && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 px-4 py-6 [-webkit-app-region:no-drag]"
          role="dialog"
          aria-modal="true"
          aria-label="Expanded image preview"
          onClick={() => setExpandedImage(null)}
        >
          <div
            className="relative isolate max-h-[92vh] max-w-[92vw]"
            onClick={(event) => event.stopPropagation()}
          >
            <Button
              type="button"
              size="icon-xs"
              variant="ghost"
              className="absolute right-2 top-2"
              onClick={() => setExpandedImage(null)}
              aria-label="Close image preview"
            >
              <XIcon />
            </Button>
            <img
              src={expandedImage.src}
              alt={expandedImage.name}
              className="max-h-[86vh] max-w-[92vw] select-none rounded-lg border border-border/70 bg-background object-contain shadow-2xl"
              draggable={false}
            />
            <p className="mt-2 max-w-[92vw] truncate text-center text-xs text-muted-foreground/80">
              {expandedImage.name}
            </p>
          </div>
        </div>
      )}
    </div>
  );
}

interface ChatHeaderProps {
  activeThreadTitle: string;
  activeProjectName: string | undefined;
  keybindings: ResolvedKeybindingsConfig;
  api: NativeApi | undefined;
  gitCwd: string | null;
  diffOpen: boolean;
  onToggleDiff: () => void;
}

const ChatHeader = memo(function ChatHeader({
  activeThreadTitle,
  activeProjectName,
  keybindings,
  api,
  gitCwd,
  diffOpen,
  onToggleDiff,
}: ChatHeaderProps) {
  return (
    <>
      <div className="flex items-center gap-3">
        <h2 className="text-sm font-medium text-foreground">{activeThreadTitle}</h2>
        {activeProjectName && <Badge variant="outline">{activeProjectName}</Badge>}
      </div>
      <div className="flex items-center gap-3">
        {activeProjectName && <OpenInPicker keybindings={keybindings} />}
        {activeProjectName && <GitActionsControl api={api} gitCwd={gitCwd} />}
        <Button
          size="xs"
          variant="ghost"
          data-perf-diff-toggle
          className={cn(
            "text-muted-foreground/70 hover:text-foreground/80",
            diffOpen && "bg-accent text-accent-foreground",
          )}
          onClick={onToggleDiff}
        >
          Diff
        </Button>
      </div>
    </>
  );
});

const ThreadErrorBanner = memo(function ThreadErrorBanner({ error }: { error: string | null }) {
  if (!error) return null;
  return (
    <div className="pt-3 mx-auto max-w-3xl">
      <Alert variant="error">
        <CircleAlertIcon />
        <AlertDescription className="line-clamp-3" title={error}>
          {error}
        </AlertDescription>
      </Alert>
    </div>
  );
});

interface PendingApprovalsPanelProps {
  pendingApprovals: PendingApproval[];
  respondingRequestIds: string[];
  onRespondToApproval: (requestId: string, decision: ProviderApprovalDecision) => Promise<void>;
}

const PendingApprovalsPanel = memo(function PendingApprovalsPanel({
  pendingApprovals,
  respondingRequestIds,
  onRespondToApproval,
}: PendingApprovalsPanelProps) {
  if (pendingApprovals.length === 0) return null;
  return (
    <div className="pt-3 mx-auto max-w-3xl space-y-2">
      {pendingApprovals.map((approval) => {
        const isResponding = respondingRequestIds.includes(approval.requestId);

        return (
          <Alert variant="warning" key={approval.requestId}>
            <InfoIcon />
            <AlertTitle className="text-xs">
              {approval.requestKind === "command"
                ? "Command approval requested"
                : "File-change approval requested"}
            </AlertTitle>
            <AlertDescription
              className="truncate block font-mono text-[11px]"
              title={approval.detail}
            >
              {approval.detail}
            </AlertDescription>
            <AlertAction className="col-start-2! -col-end-1! mt-1.5 sm:row-start-auto sm:row-end-auto">
              <Button
                size="xs"
                variant="default"
                disabled={isResponding}
                onClick={() => void onRespondToApproval(approval.requestId, "accept")}
              >
                Approve once
              </Button>
              <Button
                size="xs"
                variant="outline"
                disabled={isResponding}
                onClick={() => void onRespondToApproval(approval.requestId, "acceptForSession")}
              >
                Always allow this session
              </Button>
              <Button
                size="xs"
                variant="destructive-outline"
                disabled={isResponding}
                onClick={() => void onRespondToApproval(approval.requestId, "decline")}
              >
                Decline
              </Button>
              <Button
                size="xs"
                variant="ghost"
                disabled={isResponding}
                onClick={() => void onRespondToApproval(approval.requestId, "cancel")}
              >
                Cancel turn
              </Button>
            </AlertAction>
          </Alert>
        );
      })}
    </div>
  );
});

interface MessagesTimelineProps {
  hasMessages: boolean;
  isWorking: boolean;
  scrollContainerRef: RefObject<HTMLDivElement | null>;
  timelineEntries: ReturnType<typeof deriveTimelineEntries>;
  completionDividerBeforeEntryId: string | null;
  completionSummary: string | null;
  assistantCompletionByItemId: Map<string, string>;
  nowIso: string;
  expandedWorkGroups: Record<string, boolean>;
  onToggleWorkGroup: (groupId: string) => void;
  onImageExpand: (image: ExpandedImagePreview) => void;
}

type TimelineEntry = ReturnType<typeof deriveTimelineEntries>[number];
type TimelineMessage = Extract<TimelineEntry, { kind: "message" }>["message"];

type TimelineRow =
  | {
      kind: "work";
      id: string;
      groupedEntries: {
        id: string;
        tone: "thinking" | "tool" | "info" | "error";
        label: string;
        detail?: string | null;
      }[];
    }
  | {
      kind: "message";
      id: string;
      message: TimelineMessage;
      showCompletionDivider: boolean;
    }
  | { kind: "working"; id: string };

const MessagesTimeline = memo(function MessagesTimeline({
  hasMessages,
  isWorking,
  scrollContainerRef,
  timelineEntries,
  completionDividerBeforeEntryId,
  completionSummary,
  assistantCompletionByItemId,
  nowIso,
  expandedWorkGroups,
  onToggleWorkGroup,
  onImageExpand,
}: MessagesTimelineProps) {
  const rows = useMemo<TimelineRow[]>(() => {
    const nextRows: TimelineRow[] = [];

    for (let index = 0; index < timelineEntries.length; index += 1) {
      const timelineEntry = timelineEntries[index];
      if (!timelineEntry) {
        continue;
      }

      if (timelineEntry.kind === "work") {
        const groupedEntries = [timelineEntry.entry];
        let cursor = index + 1;
        while (cursor < timelineEntries.length) {
          const nextEntry = timelineEntries[cursor];
          if (!nextEntry || nextEntry.kind !== "work") break;
          groupedEntries.push(nextEntry.entry);
          cursor += 1;
        }
        nextRows.push({
          kind: "work",
          id: timelineEntry.id,
          groupedEntries,
        });
        index = cursor - 1;
        continue;
      }

      nextRows.push({
        kind: "message",
        id: timelineEntry.id,
        message: timelineEntry.message,
        showCompletionDivider:
          timelineEntry.message.role === "assistant" &&
          completionDividerBeforeEntryId === timelineEntry.id,
      });
    }

    if (isWorking) {
      nextRows.push({ kind: "working", id: "working-indicator-row" });
    }

    return nextRows;
  }, [timelineEntries, completionDividerBeforeEntryId, isWorking]);

  const rowVirtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => scrollContainerRef.current,
    estimateSize: (index: number) => {
      const row = rows[index];
      if (!row) return 96;
      if (row.kind === "work") return 112;
      if (row.kind === "working") return 40;
      return row.message.role === "assistant" ? 180 : 150;
    },
    measureElement: (element: HTMLElement) => element.getBoundingClientRect().height,
    overscan: 8,
  });

  const virtualRows = rowVirtualizer.getVirtualItems();

  if (!hasMessages && !isWorking) {
    return (
      <div className="flex h-full items-center justify-center">
        <p className="text-sm text-muted-foreground/30">
          Send a message to start the conversation.
        </p>
      </div>
    );
  }

  return (
    <div
      className="relative mx-auto max-w-3xl"
      style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
    >
      {virtualRows.map((virtualRow: VirtualItem) => {
        const row = rows[virtualRow.index];
        if (!row) return null;

        return (
          <div
            key={row.id}
            data-index={virtualRow.index}
            ref={rowVirtualizer.measureElement}
            className="absolute left-0 top-0 w-full"
            style={{ transform: `translateY(${virtualRow.start}px)` }}
          >
            <div className="pb-4">
              {row.kind === "work" &&
                (() => {
                  const groupId = row.id;
                  const groupedEntries = row.groupedEntries;
                  const isExpanded = expandedWorkGroups[groupId] ?? false;
                  const hasOverflow = groupedEntries.length > MAX_VISIBLE_WORK_LOG_ENTRIES;
                  const visibleEntries =
                    hasOverflow && !isExpanded
                      ? groupedEntries.slice(-MAX_VISIBLE_WORK_LOG_ENTRIES)
                      : groupedEntries;
                  const hiddenCount = groupedEntries.length - visibleEntries.length;
                  const onlyToolEntries = groupedEntries.every((entry) => entry.tone === "tool");
                  const groupLabel = onlyToolEntries
                    ? groupedEntries.length === 1
                      ? "Tool call"
                      : `Tool calls (${groupedEntries.length})`
                    : groupedEntries.length === 1
                      ? "Work event"
                      : `Work log (${groupedEntries.length})`;

                  return (
                    <div className="rounded-lg border border-border/80 bg-card/45 px-3 py-2">
                      <div className="mb-1.5 flex items-center justify-between gap-3">
                        <p className="text-[10px] uppercase tracking-[0.12em] text-muted-foreground/65">
                          {groupLabel}
                        </p>
                        {hasOverflow && (
                          <button
                            type="button"
                            className="text-[10px] uppercase tracking-[0.12em] text-muted-foreground/55 transition-colors duration-150 hover:text-muted-foreground/80"
                            onClick={() => onToggleWorkGroup(groupId)}
                          >
                            {isExpanded ? "Show less" : `Show ${hiddenCount} more`}
                          </button>
                        )}
                      </div>
                      <div className="space-y-1">
                        {visibleEntries.map((workEntry) => (
                          <div
                            key={`work-row:${workEntry.id}`}
                            className="flex items-start gap-2 py-0.5"
                          >
                            <span className="mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/30" />
                            <p
                              className={`py-[2px] text-[11px] leading-relaxed ${workToneClass(workEntry.tone)}`}
                            >
                              {workEntry.detail ? (
                                <>
                                  {workEntry.label}
                                  <span
                                    className="ml-1.5 inline-block max-w-[70ch] truncate align-bottom font-mono text-[11px] opacity-60"
                                    title={workEntry.detail}
                                  >
                                    {workEntry.detail}
                                  </span>
                                </>
                              ) : (
                                workEntry.label
                              )}
                            </p>
                          </div>
                        ))}
                      </div>
                    </div>
                  );
                })()}

              {row.kind === "message" &&
                row.message.role === "user" &&
                (() => {
                  const userImages = row.message.attachments ?? [];
                  return (
                    <div className="flex justify-end">
                      <div className="max-w-[80%] rounded-2xl rounded-br-sm border border-border bg-secondary px-4 py-3">
                        {userImages.length > 0 && (
                          <div className="mb-2 grid max-w-[420px] grid-cols-2 gap-2">
                            {userImages.map(
                              (image: NonNullable<TimelineMessage["attachments"]>[number]) => (
                                <div
                                  key={image.id}
                                  className="overflow-hidden rounded-lg border border-border/80 bg-background/70"
                                >
                                  {image.previewUrl ? (
                                    <img
                                      src={image.previewUrl}
                                      alt={image.name}
                                      className="h-full max-h-[220px] w-full cursor-zoom-in object-cover"
                                      onClick={() =>
                                        onImageExpand({ src: image.previewUrl!, name: image.name })
                                      }
                                    />
                                  ) : (
                                    <div className="flex min-h-[72px] items-center justify-center px-2 py-3 text-center text-[11px] text-muted-foreground/70">
                                      {image.name}
                                    </div>
                                  )}
                                </div>
                              ),
                            )}
                          </div>
                        )}
                        {row.message.text && (
                          <pre className="whitespace-pre-wrap wrap-break-word font-mono text-sm leading-relaxed text-foreground">
                            {row.message.text}
                          </pre>
                        )}
                        <p className="mt-1.5 text-right text-[10px] text-muted-foreground/30">
                          {formatTimestamp(row.message.createdAt)}
                        </p>
                      </div>
                    </div>
                  );
                })()}

              {row.kind === "message" &&
                row.message.role === "assistant" &&
                (() => {
                  const messageText =
                    row.message.text || (row.message.streaming ? "" : "(empty response)");
                  return (
                    <>
                      {row.showCompletionDivider && (
                        <div className="my-3 flex items-center gap-3">
                          <span className="h-px flex-1 bg-border" />
                          <span className="rounded-full border border-border bg-background px-2.5 py-1 text-[10px] uppercase tracking-[0.14em] text-muted-foreground/80">
                            {completionSummary ? `Response • ${completionSummary}` : "Response"}
                          </span>
                          <span className="h-px flex-1 bg-border" />
                        </div>
                      )}
                      <div className="px-1 py-0.5">
                        <ChatMarkdown text={messageText} />
                        <p className="mt-1.5 text-[10px] text-muted-foreground/30">
                          {formatMessageMeta(
                            row.message.createdAt,
                            row.message.streaming
                              ? formatElapsed(row.message.createdAt, nowIso)
                              : formatElapsed(
                                  row.message.createdAt,
                                  assistantCompletionByItemId.get(row.message.id),
                                ),
                          )}
                        </p>
                      </div>
                    </>
                  );
                })()}

              {row.kind === "working" && (
                <div className="flex items-center gap-2 py-0.5 pl-1.5">
                  <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/30" />
                  <div className="flex items-center pt-1">
                    <span className="inline-flex items-center gap-[3px]">
                      <span className="h-1 w-1 rounded-full bg-muted-foreground/30 animate-pulse" />
                      <span className="h-1 w-1 rounded-full bg-muted-foreground/30 animate-pulse [animation-delay:200ms]" />
                      <span className="h-1 w-1 rounded-full bg-muted-foreground/30 animate-pulse [animation-delay:400ms]" />
                    </span>
                  </div>
                </div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
});

const ModelPicker = memo(function ModelPicker(props: {
  model: ModelSlug;
  onModelChange: (model: ModelSlug) => void;
}) {
  return (
    <Select
      items={MODEL_OPTIONS.map((option) => ({ label: option.name, value: option.slug }))}
      value={props.model}
      onValueChange={(value) => (value ? props.onModelChange(value) : undefined)}
    >
      <SelectTrigger size="sm" variant="ghost" data-perf-model-trigger>
        <SelectValue />
      </SelectTrigger>
      <SelectPopup alignItemWithTrigger={false}>
        {MODEL_OPTIONS.map(({ slug, name }) => (
          <SelectItem key={slug} value={slug} data-perf-model-option={slug}>
            {name}
          </SelectItem>
        ))}
      </SelectPopup>
    </Select>
  );
});

const ReasoningEffortPicker = memo(function ReasoningEffortPicker(props: {
  effort: ReasoningEffort;
  onEffortChange: (effort: ReasoningEffort) => void;
}) {
  return (
    <Select
      value={props.effort}
      onValueChange={(value) => (value ? props.onEffortChange(value) : undefined)}
    >
      <SelectTrigger variant="ghost" size="sm" data-perf-reasoning-trigger>
        <SelectValue />
      </SelectTrigger>
      <SelectPopup alignItemWithTrigger={false}>
        {REASONING_OPTIONS.map((effort) => (
          <SelectItem key={effort} value={effort} data-perf-reasoning-option={effort}>
            {effort}
            {effort === DEFAULT_REASONING ? " (default)" : ""}
          </SelectItem>
        ))}
      </SelectPopup>
    </Select>
  );
});

const OpenInPicker = memo(function OpenInPicker({
  keybindings,
}: {
  keybindings: ResolvedKeybindingsConfig;
}) {
  const [lastEditor, setLastEditor] = useState<EditorId>(() => {
    const stored = localStorage.getItem(LAST_EDITOR_KEY);
    return EDITORS.some((e) => e.id === stored) ? (stored as EditorId) : EDITORS[0].id;
  });

  const options = [
    {
      label: "Cursor",
      Icon: CursorIcon,
      value: "cursor",
    },
    {
      label: isMacPlatform(navigator.platform)
        ? "Finder"
        : isWindowsPlatform(navigator.platform)
          ? "Explorer"
          : "Files",
      Icon: FolderClosedIcon,
      value: "file-manager",
    },
  ] satisfies { label: string; Icon: Icon; value: EditorId }[];
  const primaryOption = options.find(({ value }) => value === lastEditor);

  const api = useNativeApi();
  const { state } = useStore();
  const activeThread = state.threads.find((t) => t.id === state.activeThreadId);
  const activeProject = state.projects.find((p) => p.id === activeThread?.projectId);

  const openInEditor = useCallback(
    (editorId: EditorId | null) => {
      if (!api || !activeProject) return;
      const editor = editorId ?? lastEditor;
      const cwd = activeThread?.worktreePath ?? activeProject.cwd;
      void api.shell.openInEditor(cwd, editor);
      localStorage.setItem(LAST_EDITOR_KEY, editor);
      setLastEditor(editor);
    },
    [api, activeProject, activeThread, lastEditor, setLastEditor],
  );

  const openFavoriteEditorShortcutLabel = useMemo(
    () => shortcutLabelForCommand(keybindings, "editor.openFavorite"),
    [keybindings],
  );

  useEffect(() => {
    const handler = (e: globalThis.KeyboardEvent) => {
      if (!isOpenFavoriteEditorShortcut(e, keybindings)) return;
      if (!api || !activeProject) return;

      e.preventDefault();
      const cwd = activeThread?.worktreePath ?? activeProject.cwd;
      void api.shell.openInEditor(cwd, lastEditor);
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [api, activeProject, activeThread, keybindings, lastEditor]);

  return (
    <Group aria-label="Subscription actions">
      <Button size="xs" variant="outline" onClick={() => openInEditor(lastEditor)}>
        {primaryOption?.Icon && <primaryOption.Icon aria-hidden="true" className="size-3.5" />}
        <span className="ml-0.5">Open</span>
      </Button>
      <GroupSeparator />
      <Menu>
        <MenuTrigger render={<Button aria-label="Copy options" size="icon-xs" variant="outline" />}>
          <ChevronDownIcon aria-hidden="true" className="size-4" />
        </MenuTrigger>
        <MenuPopup align="end">
          {options.map(({ label, Icon, value }) => (
            <MenuItem key={value} onClick={() => openInEditor(value)}>
              <Icon aria-hidden="true" className="text-muted-foreground" />
              {label}
              {value === lastEditor && openFavoriteEditorShortcutLabel && (
                <MenuShortcut>{openFavoriteEditorShortcutLabel}</MenuShortcut>
              )}
            </MenuItem>
          ))}
        </MenuPopup>
      </Menu>
    </Group>
  );
});