import {  type ApprovalRequestId,  DEFAULT_MODEL_BY_PROVIDER,  type EditorId,  type KeybindingCommand,  type CodexReasoningEffort,  type MessageId,  type ProjectId,  type ProjectEntry,  type ProjectScript,  type ModelSlug,  PROVIDER_SEND_TURN_MAX_ATTACHMENTS,  PROVIDER_SEND_TURN_MAX_IMAGE_BYTES,  type ResolvedKeybindingsConfig,  type ProviderApprovalDecision,  type ServerProviderStatus,  type ProviderKind,  type ThreadId,  type TurnId,  OrchestrationThreadActivity,  RuntimeMode,  ProviderInteractionMode,} from "@t3tools/contracts";import {  getDefaultModel,  getDefaultReasoningEffort,  getReasoningEffortOptions,  normalizeModelSlug,  resolveModelSlugForProvider,} from "@t3tools/shared/model";import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";import { useDebouncedValue } from "@tanstack/react-pacer";import { useNavigate, useSearch } from "@tanstack/react-router";import { gitBranchesQueryOptions, gitCreateWorktreeMutationOptions } from "~/lib/gitReactQuery";import { projectSearchEntriesQueryOptions } from "~/lib/projectReactQuery";import { serverConfigQueryOptions, serverQueryKeys } from "~/lib/serverReactQuery";import { isElectron } from "../env";import { parseDiffRouteSearch, stripDiffSearchParams } from "../diffRouteSearch";import {  clampCollapsedComposerCursor,  type ComposerTrigger,  collapseExpandedComposerCursor,  detectComposerTrigger,  expandCollapsedComposerCursor,  parseStandaloneComposerSlashCommand,  replaceTextRange,} from "../composer-logic";import {  derivePendingApprovals,  derivePendingUserInputs,  derivePhase,  deriveTimelineEntries,  deriveActiveWorkStartedAt,  deriveActivePlanState,  findLatestProposedPlan,  deriveWorkLogEntries,  hasToolActivityForTurn,  isLatestTurnSettled,  formatElapsed,} from "../session-logic";import { isScrollContainerNearBottom } from "../chat-scroll";import {  buildPendingUserInputAnswers,  derivePendingUserInputProgress,  setPendingUserInputCustomAnswer,  type PendingUserInputDraftAnswer,} from "../pendingUserInput";import { useStore } from "../store";import {  buildPlanImplementationThreadTitle,  buildPlanImplementationPrompt,  proposedPlanTitle,  resolvePlanFollowUpSubmission,} from "../proposedPlan";import { truncateTitle } from "../truncateTitle";import {  DEFAULT_INTERACTION_MODE,  DEFAULT_RUNTIME_MODE,  DEFAULT_THREAD_TERMINAL_ID,  MAX_TERMINALS_PER_GROUP,  type ChatMessage,  type TurnDiffSummary,} from "../types";import { basenameOfPath } from "../vscode-icons";import { useTheme } from "../hooks/useTheme";import { useTurnDiffSummaries } from "../hooks/useTurnDiffSummaries";import BranchToolbar from "./BranchToolbar";import { resolveShortcutCommand, shortcutLabelForCommand } from "../keybindings";import PlanSidebar from "./PlanSidebar";import ThreadTerminalDrawer from "./ThreadTerminalDrawer";import {  BotIcon,  ChevronDownIcon,  ChevronLeftIcon,  ChevronRightIcon,  CircleAlertIcon,  ListTodoIcon,  LockIcon,  LockOpenIcon,  XIcon,} from "lucide-react";import { Button } from "./ui/button";import { Separator } from "./ui/separator";import { Menu, MenuItem, MenuPopup, MenuTrigger } from "./ui/menu";import { cn, randomUUID } from "~/lib/utils";import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";import { toastManager } from "./ui/toast";import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";import { type NewProjectScriptInput } from "./ProjectScriptsControl";import {  commandForProjectScript,  nextProjectScriptId,  projectScriptRuntimeEnv,  projectScriptIdFromCommand,  setupProjectScript,} from "~/projectScripts";import { SidebarTrigger } from "./ui/sidebar";import { newCommandId, newMessageId, newThreadId } from "~/lib/utils";import { readNativeApi } from "~/nativeApi";import { resolveAppModelSelection, useAppSettings } from "../appSettings";import { isTerminalFocused } from "../lib/terminalFocus";import {  type ComposerImageAttachment,  type DraftThreadEnvMode,  type PersistedComposerImageAttachment,  useComposerDraftStore,  useComposerThreadDraft,} from "../composerDraftStore";import { shouldUseCompactComposerFooter } from "./composerFooterLayout";import { selectThreadTerminalState, useTerminalStateStore } from "../terminalStateStore";import { ComposerPromptEditor, type ComposerPromptEditorHandle } from "./ComposerPromptEditor";import { PullRequestThreadDialog } from "./PullRequestThreadDialog";import { MessagesTimeline } from "./chat/MessagesTimeline";import { ChatHeader } from "./chat/ChatHeader";import { buildExpandedImagePreview, ExpandedImagePreview } from "./chat/ExpandedImagePreview";import { AVAILABLE_PROVIDER_OPTIONS, ProviderModelPicker } from "./chat/ProviderModelPicker";import { ComposerCommandItem, ComposerCommandMenu } from "./chat/ComposerCommandMenu";import { ComposerPendingApprovalActions } from "./chat/ComposerPendingApprovalActions";import { CodexTraitsPicker } from "./chat/CodexTraitsPicker";import { CompactComposerControlsMenu } from "./chat/CompactComposerControlsMenu";import { ComposerPendingApprovalPanel } from "./chat/ComposerPendingApprovalPanel";import { ComposerPendingUserInputPanel } from "./chat/ComposerPendingUserInputPanel";import { ComposerPlanFollowUpBanner } from "./chat/ComposerPlanFollowUpBanner";import { ProviderHealthBanner } from "./chat/ProviderHealthBanner";import { ThreadErrorBanner } from "./chat/ThreadErrorBanner";import {  buildLocalDraftThread,  buildTemporaryWorktreeBranchName,  cloneComposerImageForRetry,  collectUserMessageBlobPreviewUrls,  getCustomModelOptionsByProvider,  LAST_INVOKED_SCRIPT_BY_PROJECT_KEY,  LastInvokedScriptByProjectSchema,  PullRequestDialogState,  readFileAsDataUrl,  revokeBlobPreviewUrl,  revokeUserMessagePreviewUrls,  SendPhase,} from "./ChatView.logic";import { useLocalStorage } from "~/hooks/useLocalStorage"; const ATTACHMENT_PREVIEW_HANDOFF_TTL_MS = 5000;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_ACTIVITIES: OrchestrationThreadActivity[] = [];const EMPTY_KEYBINDINGS: ResolvedKeybindingsConfig = [];const EMPTY_PROJECT_ENTRIES: ProjectEntry[] = [];const EMPTY_AVAILABLE_EDITORS: EditorId[] = [];const EMPTY_PROVIDER_STATUSES: ServerProviderStatus[] = [];const EMPTY_PENDING_USER_INPUT_ANSWERS: Record<string, PendingUserInputDraftAnswer> = {};const COMPOSER_PATH_QUERY_DEBOUNCE_MS = 120;const SCRIPT_TERMINAL_COLS = 120;const SCRIPT_TERMINAL_ROWS = 30; const extendReplacementRangeForTrailingSpace = (  text: string,  rangeEnd: number,  replacement: string,): number => {  if (!replacement.endsWith(" ")) {    return rangeEnd;  }  return text[rangeEnd] === " " ? rangeEnd + 1 : rangeEnd;}; interface ChatViewProps {  threadId: ThreadId;} export default function ChatView({ threadId }: ChatViewProps) {  const threads = useStore((store) => store.threads);  const projects = useStore((store) => store.projects);  const markThreadVisited = useStore((store) => store.markThreadVisited);  const syncServerReadModel = useStore((store) => store.syncServerReadModel);  const setStoreThreadError = useStore((store) => store.setError);  const setStoreThreadBranch = useStore((store) => store.setThreadBranch);  const { settings } = useAppSettings();  const timestampFormat = settings.timestampFormat;  const navigate = useNavigate();  const rawSearch = useSearch({    strict: false,    select: (params) => parseDiffRouteSearch(params),  });  const { resolvedTheme } = useTheme();  const queryClient = useQueryClient();  const createWorktreeMutation = useMutation(gitCreateWorktreeMutationOptions({ queryClient }));  const composerDraft = useComposerThreadDraft(threadId);  const prompt = composerDraft.prompt;  const composerImages = composerDraft.images;  const nonPersistedComposerImageIds = composerDraft.nonPersistedImageIds;  const setComposerDraftPrompt = useComposerDraftStore((store) => store.setPrompt);  const setComposerDraftProvider = useComposerDraftStore((store) => store.setProvider);  const setComposerDraftModel = useComposerDraftStore((store) => store.setModel);  const setComposerDraftRuntimeMode = useComposerDraftStore((store) => store.setRuntimeMode);  const setComposerDraftInteractionMode = useComposerDraftStore(    (store) => store.setInteractionMode,  );  const setComposerDraftEffort = useComposerDraftStore((store) => store.setEffort);  const setComposerDraftCodexFastMode = useComposerDraftStore((store) => store.setCodexFastMode);  const addComposerDraftImage = useComposerDraftStore((store) => store.addImage);  const addComposerDraftImages = useComposerDraftStore((store) => store.addImages);  const removeComposerDraftImage = useComposerDraftStore((store) => store.removeImage);  const clearComposerDraftPersistedAttachments = useComposerDraftStore(    (store) => store.clearPersistedAttachments,  );  const syncComposerDraftPersistedAttachments = useComposerDraftStore(    (store) => store.syncPersistedAttachments,  );  const clearComposerDraftContent = useComposerDraftStore((store) => store.clearComposerContent);  const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);  const getDraftThreadByProjectId = useComposerDraftStore(    (store) => store.getDraftThreadByProjectId,  );  const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);  const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);  const clearProjectDraftThreadId = useComposerDraftStore(    (store) => store.clearProjectDraftThreadId,  );  const draftThread = useComposerDraftStore(    (store) => store.draftThreadsByThreadId[threadId] ?? null,  );  const promptRef = useRef(prompt);  const [showScrollToBottom, setShowScrollToBottom] = useState(false);  const [isDragOverComposer, setIsDragOverComposer] = useState(false);  const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);  const [optimisticUserMessages, setOptimisticUserMessages] = useState<ChatMessage[]>([]);  const optimisticUserMessagesRef = useRef(optimisticUserMessages);  optimisticUserMessagesRef.current = optimisticUserMessages;  const [localDraftErrorsByThreadId, setLocalDraftErrorsByThreadId] = useState<    Record<ThreadId, string | null>  >({});  const [sendPhase, setSendPhase] = useState<SendPhase>("idle");  const [sendStartedAt, setSendStartedAt] = useState<string | null>(null);  const [isConnecting, _setIsConnecting] = useState(false);  const [isRevertingCheckpoint, setIsRevertingCheckpoint] = useState(false);  const [respondingRequestIds, setRespondingRequestIds] = useState<ApprovalRequestId[]>([]);  const [respondingUserInputRequestIds, setRespondingUserInputRequestIds] = useState<    ApprovalRequestId[]  >([]);  const [pendingUserInputAnswersByRequestId, setPendingUserInputAnswersByRequestId] = useState<    Record<string, Record<string, PendingUserInputDraftAnswer>>  >({});  const [pendingUserInputQuestionIndexByRequestId, setPendingUserInputQuestionIndexByRequestId] =    useState<Record<string, number>>({});  const [expandedWorkGroups, setExpandedWorkGroups] = useState<Record<string, boolean>>({});  const [planSidebarOpen, setPlanSidebarOpen] = useState(false);  const [isComposerFooterCompact, setIsComposerFooterCompact] = useState(false);  // Tracks whether the user explicitly dismissed the sidebar for the active turn.  const planSidebarDismissedForTurnRef = useRef<string | null>(null);  // When set, the thread-change reset effect will open the sidebar instead of closing it.  // Used by "Implement in new thread" to carry the sidebar-open intent across navigation.  const planSidebarOpenOnNextThreadRef = useRef(false);  const [nowTick, setNowTick] = useState(() => Date.now());  const [terminalFocusRequestId, setTerminalFocusRequestId] = useState(0);  const [composerHighlightedItemId, setComposerHighlightedItemId] = useState<string | null>(null);  const [pullRequestDialogState, setPullRequestDialogState] =    useState<PullRequestDialogState | null>(null);  const [attachmentPreviewHandoffByMessageId, setAttachmentPreviewHandoffByMessageId] = useState<    Record<string, string[]>  >({});  const [composerCursor, setComposerCursor] = useState(() =>    collapseExpandedComposerCursor(prompt, prompt.length),  );  const [composerTrigger, setComposerTrigger] = useState<ComposerTrigger | null>(() =>    detectComposerTrigger(prompt, prompt.length),  );  const [lastInvokedScriptByProjectId, setLastInvokedScriptByProjectId] = useLocalStorage(    LAST_INVOKED_SCRIPT_BY_PROJECT_KEY,    {},    LastInvokedScriptByProjectSchema,  );  const messagesScrollRef = useRef<HTMLDivElement>(null);  const [messagesScrollElement, setMessagesScrollElement] = useState<HTMLDivElement | null>(null);  const shouldAutoScrollRef = useRef(true);  const lastKnownScrollTopRef = useRef(0);  const isPointerScrollActiveRef = useRef(false);  const lastTouchClientYRef = useRef<number | null>(null);  const pendingUserScrollUpIntentRef = useRef(false);  const pendingAutoScrollFrameRef = useRef<number | null>(null);  const pendingInteractionAnchorRef = useRef<{    element: HTMLElement;    top: number;  } | null>(null);  const pendingInteractionAnchorFrameRef = useRef<number | null>(null);  const composerEditorRef = useRef<ComposerPromptEditorHandle>(null);  const composerFormRef = useRef<HTMLFormElement>(null);  const composerFormHeightRef = useRef(0);  const composerImagesRef = useRef<ComposerImageAttachment[]>([]);  const composerSelectLockRef = useRef(false);  const composerMenuOpenRef = useRef(false);  const composerMenuItemsRef = useRef<ComposerCommandItem[]>([]);  const activeComposerMenuItemRef = useRef<ComposerCommandItem | null>(null);  const attachmentPreviewHandoffByMessageIdRef = useRef<Record<string, string[]>>({});  const attachmentPreviewHandoffTimeoutByMessageIdRef = useRef<Record<string, number>>({});  const sendInFlightRef = useRef(false);  const dragDepthRef = useRef(0);  const terminalOpenByThreadRef = useRef<Record<string, boolean>>({});  const setMessagesScrollContainerRef = useCallback((element: HTMLDivElement | null) => {    messagesScrollRef.current = element;    setMessagesScrollElement(element);  }, []);   const terminalState = useTerminalStateStore((state) =>    selectThreadTerminalState(state.terminalStateByThreadId, threadId),  );  const storeSetTerminalOpen = useTerminalStateStore((s) => s.setTerminalOpen);  const storeSetTerminalHeight = useTerminalStateStore((s) => s.setTerminalHeight);  const storeSplitTerminal = useTerminalStateStore((s) => s.splitTerminal);  const storeNewTerminal = useTerminalStateStore((s) => s.newTerminal);  const storeSetActiveTerminal = useTerminalStateStore((s) => s.setActiveTerminal);  const storeCloseTerminal = useTerminalStateStore((s) => s.closeTerminal);   const setPrompt = useCallback(    (nextPrompt: string) => {      setComposerDraftPrompt(threadId, nextPrompt);    },    [setComposerDraftPrompt, threadId],  );  const addComposerImage = useCallback(    (image: ComposerImageAttachment) => {      addComposerDraftImage(threadId, image);    },    [addComposerDraftImage, threadId],  );  const addComposerImagesToDraft = useCallback(    (images: ComposerImageAttachment[]) => {      addComposerDraftImages(threadId, images);    },    [addComposerDraftImages, threadId],  );  const removeComposerImageFromDraft = useCallback(    (imageId: string) => {      removeComposerDraftImage(threadId, imageId);    },    [removeComposerDraftImage, threadId],  );   const serverThread = threads.find((t) => t.id === threadId);  const fallbackDraftProject = projects.find((project) => project.id === draftThread?.projectId);  const localDraftError = serverThread ? null : (localDraftErrorsByThreadId[threadId] ?? null);  const localDraftThread = useMemo(    () =>      draftThread        ? buildLocalDraftThread(            threadId,            draftThread,            fallbackDraftProject?.model ?? DEFAULT_MODEL_BY_PROVIDER.codex,            localDraftError,          )        : undefined,    [draftThread, fallbackDraftProject?.model, localDraftError, threadId],  );  const activeThread = serverThread ?? localDraftThread;  const runtimeMode =    composerDraft.runtimeMode ?? activeThread?.runtimeMode ?? DEFAULT_RUNTIME_MODE;  const interactionMode =    composerDraft.interactionMode ?? activeThread?.interactionMode ?? DEFAULT_INTERACTION_MODE;  const isServerThread = serverThread !== undefined;  const isLocalDraftThread = !isServerThread && localDraftThread !== undefined;  const canCheckoutPullRequestIntoThread = isLocalDraftThread;  const diffOpen = rawSearch.diff === "1";  const activeThreadId = activeThread?.id ?? null;  const activeLatestTurn = activeThread?.latestTurn ?? null;  const latestTurnSettled = isLatestTurnSettled(activeLatestTurn, activeThread?.session ?? null);  const activeProject = projects.find((p) => p.id === activeThread?.projectId);   const openPullRequestDialog = useCallback(    (reference?: string) => {      if (!canCheckoutPullRequestIntoThread) {        return;      }      setPullRequestDialogState({        initialReference: reference ?? null,        key: Date.now(),      });      setComposerHighlightedItemId(null);    },    [canCheckoutPullRequestIntoThread],  );   const closePullRequestDialog = useCallback(() => {    setPullRequestDialogState(null);  }, []);   const openOrReuseProjectDraftThread = useCallback(    async (input: { branch: string; worktreePath: string | null; envMode: DraftThreadEnvMode }) => {      if (!activeProject) {        throw new Error("No active project is available for this pull request.");      }      const storedDraftThread = getDraftThreadByProjectId(activeProject.id);      if (storedDraftThread) {        setDraftThreadContext(storedDraftThread.threadId, input);        setProjectDraftThreadId(activeProject.id, storedDraftThread.threadId, input);        if (storedDraftThread.threadId !== threadId) {          await navigate({            to: "/$threadId",            params: { threadId: storedDraftThread.threadId },          });        }        return;      }       const activeDraftThread = getDraftThread(threadId);      if (!isServerThread && activeDraftThread?.projectId === activeProject.id) {        setDraftThreadContext(threadId, input);        setProjectDraftThreadId(activeProject.id, threadId, input);        return;      }       clearProjectDraftThreadId(activeProject.id);      const nextThreadId = newThreadId();      setProjectDraftThreadId(activeProject.id, nextThreadId, {        createdAt: new Date().toISOString(),        runtimeMode: DEFAULT_RUNTIME_MODE,        interactionMode: DEFAULT_INTERACTION_MODE,        ...input,      });      await navigate({        to: "/$threadId",        params: { threadId: nextThreadId },      });    },    [      activeProject,      clearProjectDraftThreadId,      getDraftThread,      getDraftThreadByProjectId,      isServerThread,      navigate,      setDraftThreadContext,      setProjectDraftThreadId,      threadId,    ],  );   const handlePreparedPullRequestThread = useCallback(    async (input: { branch: string; worktreePath: string | null }) => {      await openOrReuseProjectDraftThread({        branch: input.branch,        worktreePath: input.worktreePath,        envMode: input.worktreePath ? "worktree" : "local",      });    },    [openOrReuseProjectDraftThread],  );   useEffect(() => {    if (!activeThread?.id) return;    if (!latestTurnSettled) return;    if (!activeLatestTurn?.completedAt) return;    const turnCompletedAt = Date.parse(activeLatestTurn.completedAt);    if (Number.isNaN(turnCompletedAt)) return;    const lastVisitedAt = activeThread.lastVisitedAt ? Date.parse(activeThread.lastVisitedAt) : NaN;    if (!Number.isNaN(lastVisitedAt) && lastVisitedAt >= turnCompletedAt) return;     markThreadVisited(activeThread.id);  }, [    activeThread?.id,    activeThread?.lastVisitedAt,    activeLatestTurn?.completedAt,    latestTurnSettled,    markThreadVisited,  ]);   const sessionProvider = activeThread?.session?.provider ?? null;  const selectedProviderByThreadId = composerDraft.provider;  const hasThreadStarted = Boolean(    activeThread &&    (activeThread.latestTurn !== null ||      activeThread.messages.length > 0 ||      activeThread.session !== null),  );  const lockedProvider: ProviderKind | null = hasThreadStarted    ? (sessionProvider ?? selectedProviderByThreadId ?? null)    : null;  const selectedProvider: ProviderKind = lockedProvider ?? selectedProviderByThreadId ?? "codex";  const baseThreadModel = resolveModelSlugForProvider(    selectedProvider,

Lines 1–500 of 3956. Load more