import { ArrowLeftIcon, ChevronRightIcon, FolderIcon, GitPullRequestIcon, PlusIcon, RocketIcon, SettingsIcon, SquarePenIcon, TerminalIcon, TriangleAlertIcon,} from "lucide-react";import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent } from "react";import { DndContext, type DragCancelEvent, type CollisionDetection, PointerSensor, type DragStartEvent, closestCorners, pointerWithin, useSensor, useSensors, type DragEndEvent,} from "@dnd-kit/core";import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";import { restrictToFirstScrollableAncestor, restrictToVerticalAxis } from "@dnd-kit/modifiers";import { CSS } from "@dnd-kit/utilities";import { DEFAULT_MODEL_BY_PROVIDER, type DesktopUpdateState, ProjectId, ThreadId, type GitStatusResult, type ResolvedKeybindingsConfig,} from "@t3tools/contracts";import { useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";import { useLocation, useNavigate, useParams } from "@tanstack/react-router";import { useAppSettings } from "../appSettings";import { isElectron } from "../env";import { APP_STAGE_LABEL, APP_VERSION } from "../branding";import { isMacPlatform, newCommandId, newProjectId } from "../lib/utils";import { useStore } from "../store";import { shortcutLabelForCommand } from "../keybindings";import { derivePendingApprovals, derivePendingUserInputs } from "../session-logic";import { gitRemoveWorktreeMutationOptions, gitStatusQueryOptions } from "../lib/gitReactQuery";import { serverConfigQueryOptions } from "../lib/serverReactQuery";import { readNativeApi } from "../nativeApi";import { useComposerDraftStore } from "../composerDraftStore";import { useHandleNewThread } from "../hooks/useHandleNewThread";import { selectThreadTerminalState, useTerminalStateStore } from "../terminalStateStore";import { toastManager } from "./ui/toast";import { getArm64IntelBuildWarningDescription, getDesktopUpdateActionError, getDesktopUpdateButtonTooltip, isDesktopUpdateButtonDisabled, resolveDesktopUpdateButtonAction, shouldShowArm64IntelBuildWarning, shouldHighlightDesktopUpdateError, shouldShowDesktopUpdateButton, shouldToastDesktopUpdateActionResult,} from "./desktopUpdate.logic";import { Alert, AlertAction, AlertDescription, AlertTitle } from "./ui/alert";import { Button } from "./ui/button";import { Collapsible, CollapsibleContent } from "./ui/collapsible";import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";import { SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarMenuAction, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarSeparator, SidebarTrigger,} from "./ui/sidebar";import { useThreadSelectionStore } from "../threadSelectionStore";import { formatWorktreePathForDisplay, getOrphanedWorktreePathForThread } from "../worktreeCleanup";import { isNonEmpty as isNonEmptyString } from "effect/String";import { resolveSidebarNewThreadEnvMode, resolveThreadRowClassName, resolveThreadStatusPill, shouldClearThreadSelectionOnMouseDown,} from "./Sidebar.logic";import { useCopyToClipboard } from "~/hooks/useCopyToClipboard"; const EMPTY_KEYBINDINGS: ResolvedKeybindingsConfig = [];const THREAD_PREVIEW_LIMIT = 6; function formatRelativeTime(iso: string): string { const diff = Date.now() - new Date(iso).getTime(); const minutes = Math.floor(diff / 60_000); if (minutes < 1) return "just now"; if (minutes < 60) return `${minutes}m ago`; const hours = Math.floor(minutes / 60); if (hours < 24) return `${hours}h ago`; return `${Math.floor(hours / 24)}d ago`;} interface TerminalStatusIndicator { label: "Terminal process running"; colorClass: string; pulse: boolean;} interface PrStatusIndicator { label: "PR open" | "PR closed" | "PR merged"; colorClass: string; tooltip: string; url: string;} type ThreadPr = GitStatusResult["pr"]; function terminalStatusFromRunningIds( runningTerminalIds: string[],): TerminalStatusIndicator | null { if (runningTerminalIds.length === 0) { return null; } return { label: "Terminal process running", colorClass: "text-teal-600 dark:text-teal-300/90", pulse: true, };} function prStatusIndicator(pr: ThreadPr): PrStatusIndicator | null { if (!pr) return null; if (pr.state === "open") { return { label: "PR open", colorClass: "text-emerald-600 dark:text-emerald-300/90", tooltip: `#${pr.number} PR open: ${pr.title}`, url: pr.url, }; } if (pr.state === "closed") { return { label: "PR closed", colorClass: "text-zinc-500 dark:text-zinc-400/80", tooltip: `#${pr.number} PR closed: ${pr.title}`, url: pr.url, }; } if (pr.state === "merged") { return { label: "PR merged", colorClass: "text-violet-600 dark:text-violet-300/90", tooltip: `#${pr.number} PR merged: ${pr.title}`, url: pr.url, }; } return null;} function T3Wordmark() { return ( <svg aria-label="T3" className="h-2.5 w-auto shrink-0 text-foreground" viewBox="15.5309 37 94.3941 56.96" xmlns="http://www.w3.org/2000/svg" > <path d="M33.4509 93V47.56H15.5309V37H64.3309V47.56H46.4109V93H33.4509ZM86.7253 93.96C82.832 93.96 78.9653 93.4533 75.1253 92.44C71.2853 91.3733 68.032 89.88 65.3653 87.96L70.4053 78.04C72.5386 79.5867 75.0186 80.8133 77.8453 81.72C80.672 82.6267 83.5253 83.08 86.4053 83.08C89.6586 83.08 92.2186 82.44 94.0853 81.16C95.952 79.88 96.8853 78.12 96.8853 75.88C96.8853 73.7467 96.0586 72.0667 94.4053 70.84C92.752 69.6133 90.0853 69 86.4053 69H80.4853V60.44L96.0853 42.76L97.5253 47.4H68.1653V37H107.365V45.4L91.8453 63.08L85.2853 59.32H89.0453C95.9253 59.32 101.125 60.8667 104.645 63.96C108.165 67.0533 109.925 71.0267 109.925 75.88C109.925 79.0267 109.099 81.9867 107.445 84.76C105.792 87.48 103.259 89.6933 99.8453 91.4C96.432 93.1067 92.0586 93.96 86.7253 93.96Z" fill="currentColor" /> </svg> );} /** * Derives the server's HTTP origin (scheme + host + port) from the same * sources WsTransport uses, converting ws(s) to http(s). */function getServerHttpOrigin(): string { const bridgeUrl = window.desktopBridge?.getWsUrl(); const envUrl = import.meta.env.VITE_WS_URL as string | undefined; const wsUrl = bridgeUrl && bridgeUrl.length > 0 ? bridgeUrl : envUrl && envUrl.length > 0 ? envUrl : `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.hostname}:${window.location.port}`; // Parse to extract just the origin, dropping path/query (e.g. ?token=…) const httpUrl = wsUrl.replace(/^wss:/, "https:").replace(/^ws:/, "http:"); try { return new URL(httpUrl).origin; } catch { return httpUrl; }} const serverHttpOrigin = getServerHttpOrigin(); function ProjectFavicon({ cwd }: { cwd: string }) { const [status, setStatus] = useState<"loading" | "loaded" | "error">("loading"); const src = `${serverHttpOrigin}/api/project-favicon?cwd=${encodeURIComponent(cwd)}`; if (status === "error") { return <FolderIcon className="size-3.5 shrink-0 text-muted-foreground/50" />; } return ( <img src={src} alt="" className={`size-3.5 shrink-0 rounded-sm object-contain ${status === "loading" ? "hidden" : ""}`} onLoad={() => setStatus("loaded")} onError={() => setStatus("error")} /> );} type SortableProjectHandleProps = Pick<ReturnType<typeof useSortable>, "attributes" | "listeners">; function SortableProjectItem({ projectId, children,}: { projectId: ProjectId; children: (handleProps: SortableProjectHandleProps) => React.ReactNode;}) { const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = useSortable({ id: projectId }); return ( <li ref={setNodeRef} style={{ transform: CSS.Translate.toString(transform), transition, }} className={`group/menu-item relative rounded-md ${ isDragging ? "z-20 opacity-80" : "" } ${isOver && !isDragging ? "ring-1 ring-primary/40" : ""}`} data-sidebar="menu-item" data-slot="sidebar-menu-item" > {children({ attributes, listeners })} </li> );} export default function Sidebar() { const projects = useStore((store) => store.projects); const threads = useStore((store) => store.threads); const markThreadUnread = useStore((store) => store.markThreadUnread); const toggleProject = useStore((store) => store.toggleProject); const reorderProjects = useStore((store) => store.reorderProjects); const clearComposerDraftForThread = useComposerDraftStore((store) => store.clearThreadDraft); const getDraftThreadByProjectId = useComposerDraftStore( (store) => store.getDraftThreadByProjectId, ); const terminalStateByThreadId = useTerminalStateStore((state) => state.terminalStateByThreadId); const clearTerminalState = useTerminalStateStore((state) => state.clearTerminalState); const clearProjectDraftThreadId = useComposerDraftStore( (store) => store.clearProjectDraftThreadId, ); const clearProjectDraftThreadById = useComposerDraftStore( (store) => store.clearProjectDraftThreadById, ); const navigate = useNavigate(); const isOnSettings = useLocation({ select: (loc) => loc.pathname === "/settings" }); const { settings: appSettings } = useAppSettings(); const { handleNewThread } = useHandleNewThread(); const routeThreadId = useParams({ strict: false, select: (params) => (params.threadId ? ThreadId.makeUnsafe(params.threadId) : null), }); const { data: keybindings = EMPTY_KEYBINDINGS } = useQuery({ ...serverConfigQueryOptions(), select: (config) => config.keybindings, }); const queryClient = useQueryClient(); const removeWorktreeMutation = useMutation(gitRemoveWorktreeMutationOptions({ queryClient })); const [addingProject, setAddingProject] = useState(false); const [newCwd, setNewCwd] = useState(""); const [isPickingFolder, setIsPickingFolder] = useState(false); const [isAddingProject, setIsAddingProject] = useState(false); const [addProjectError, setAddProjectError] = useState<string | null>(null); const addProjectInputRef = useRef<HTMLInputElement | null>(null); const [renamingThreadId, setRenamingThreadId] = useState<ThreadId | null>(null); const [renamingTitle, setRenamingTitle] = useState(""); const [expandedThreadListsByProject, setExpandedThreadListsByProject] = useState< ReadonlySet<ProjectId> >(() => new Set()); const renamingCommittedRef = useRef(false); const renamingInputRef = useRef<HTMLInputElement | null>(null); const dragInProgressRef = useRef(false); const suppressProjectClickAfterDragRef = useRef(false); const [desktopUpdateState, setDesktopUpdateState] = useState<DesktopUpdateState | null>(null); const selectedThreadIds = useThreadSelectionStore((s) => s.selectedThreadIds); const toggleThreadSelection = useThreadSelectionStore((s) => s.toggleThread); const rangeSelectTo = useThreadSelectionStore((s) => s.rangeSelectTo); const clearSelection = useThreadSelectionStore((s) => s.clearSelection); const removeFromSelection = useThreadSelectionStore((s) => s.removeFromSelection); const setSelectionAnchor = useThreadSelectionStore((s) => s.setAnchor); const shouldBrowseForProjectImmediately = isElectron; const shouldShowProjectPathEntry = addingProject && !shouldBrowseForProjectImmediately; const projectCwdById = useMemo( () => new Map(projects.map((project) => [project.id, project.cwd] as const)), [projects], ); const threadGitTargets = useMemo( () => threads.map((thread) => ({ threadId: thread.id, branch: thread.branch, cwd: thread.worktreePath ?? projectCwdById.get(thread.projectId) ?? null, })), [projectCwdById, threads], ); const threadGitStatusCwds = useMemo( () => [ ...new Set( threadGitTargets .filter((target) => target.branch !== null) .map((target) => target.cwd) .filter((cwd): cwd is string => cwd !== null), ), ], [threadGitTargets], ); const threadGitStatusQueries = useQueries({ queries: threadGitStatusCwds.map((cwd) => ({ ...gitStatusQueryOptions(cwd), staleTime: 30_000, refetchInterval: 60_000, })), }); const prByThreadId = useMemo(() => { const statusByCwd = new Map<string, GitStatusResult>(); for (let index = 0; index < threadGitStatusCwds.length; index += 1) { const cwd = threadGitStatusCwds[index]; if (!cwd) continue; const status = threadGitStatusQueries[index]?.data; if (status) { statusByCwd.set(cwd, status); } } const map = new Map<ThreadId, ThreadPr>(); for (const target of threadGitTargets) { const status = target.cwd ? statusByCwd.get(target.cwd) : undefined; const branchMatches = target.branch !== null && status?.branch !== null && status?.branch === target.branch; map.set(target.threadId, branchMatches ? (status?.pr ?? null) : null); } return map; }, [threadGitStatusCwds, threadGitStatusQueries, threadGitTargets]); const openPrLink = useCallback((event: React.MouseEvent<HTMLElement>, prUrl: string) => { event.preventDefault(); event.stopPropagation(); const api = readNativeApi(); if (!api) { toastManager.add({ type: "error", title: "Link opening is unavailable.", }); return; } void api.shell.openExternal(prUrl).catch((error) => { toastManager.add({ type: "error", title: "Unable to open PR link", description: error instanceof Error ? error.message : "An error occurred.", }); }); }, []); const focusMostRecentThreadForProject = useCallback( (projectId: ProjectId) => { const latestThread = threads .filter((thread) => thread.projectId === projectId) .toSorted((a, b) => { const byDate = new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(); if (byDate !== 0) return byDate; return b.id.localeCompare(a.id); })[0]; if (!latestThread) return; void navigate({ to: "/$threadId", params: { threadId: latestThread.id }, }); }, [navigate, threads], ); const addProjectFromPath = useCallback( async (rawCwd: string) => { const cwd = rawCwd.trim(); if (!cwd || isAddingProject) return; const api = readNativeApi(); if (!api) return; setIsAddingProject(true); const finishAddingProject = () => { setIsAddingProject(false); setNewCwd(""); setAddProjectError(null); setAddingProject(false); }; const existing = projects.find((project) => project.cwd === cwd); if (existing) { focusMostRecentThreadForProject(existing.id); finishAddingProject(); return; } const projectId = newProjectId(); const createdAt = new Date().toISOString(); const title = cwd.split(/[/\\]/).findLast(isNonEmptyString) ?? cwd; try { await api.orchestration.dispatchCommand({ type: "project.create", commandId: newCommandId(), projectId, title, workspaceRoot: cwd, defaultModel: DEFAULT_MODEL_BY_PROVIDER.codex, createdAt, }); await handleNewThread(projectId, { envMode: appSettings.defaultThreadEnvMode, }).catch(() => undefined); } catch (error) { const description = error instanceof Error ? error.message : "An error occurred while adding the project."; setIsAddingProject(false); if (shouldBrowseForProjectImmediately) { toastManager.add({ type: "error", title: "Failed to add project", description, }); } else { setAddProjectError(description); } return; } finishAddingProject(); }, [ focusMostRecentThreadForProject, handleNewThread, isAddingProject, projects, shouldBrowseForProjectImmediately, appSettings.defaultThreadEnvMode, ], ); const handleAddProject = () => { void addProjectFromPath(newCwd); }; const canAddProject = newCwd.trim().length > 0 && !isAddingProject; const handlePickFolder = async () => { const api = readNativeApi(); if (!api || isPickingFolder) return; setIsPickingFolder(true); let pickedPath: string | null = null; try { pickedPath = await api.dialogs.pickFolder(); } catch { // Ignore picker failures and leave the current thread selection unchanged. } if (pickedPath) { await addProjectFromPath(pickedPath); } else if (!shouldBrowseForProjectImmediately) { addProjectInputRef.current?.focus(); } setIsPickingFolder(false); }; const handleStartAddProject = () => { setAddProjectError(null); if (shouldBrowseForProjectImmediately) { void handlePickFolder(); return; } setAddingProject((prev) => !prev); }; Lines 1–500 of 1677. Load more
import { ArrowLeftIcon, ChevronRightIcon, FolderIcon, GitPullRequestIcon, PlusIcon, RocketIcon, SettingsIcon, SquarePenIcon, TerminalIcon, TriangleAlertIcon, } from "lucide-react"; import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent } from "react"; import { DndContext, type DragCancelEvent, type CollisionDetection, PointerSensor, type DragStartEvent, closestCorners, pointerWithin, useSensor, useSensors, type DragEndEvent, } from "@dnd-kit/core"; import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable"; import { restrictToFirstScrollableAncestor, restrictToVerticalAxis } from "@dnd-kit/modifiers"; import { CSS } from "@dnd-kit/utilities"; import { DEFAULT_MODEL_BY_PROVIDER, type DesktopUpdateState, ProjectId, ThreadId, type GitStatusResult, type ResolvedKeybindingsConfig, } from "@t3tools/contracts"; import { useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query"; import { useLocation, useNavigate, useParams } from "@tanstack/react-router"; import { useAppSettings } from "../appSettings"; import { isElectron } from "../env"; import { APP_STAGE_LABEL, APP_VERSION } from "../branding"; import { isMacPlatform, newCommandId, newProjectId } from "../lib/utils"; import { useStore } from "../store"; import { shortcutLabelForCommand } from "../keybindings"; import { derivePendingApprovals, derivePendingUserInputs } from "../session-logic"; import { gitRemoveWorktreeMutationOptions, gitStatusQueryOptions } from "../lib/gitReactQuery"; import { serverConfigQueryOptions } from "../lib/serverReactQuery"; import { readNativeApi } from "../nativeApi"; import { useComposerDraftStore } from "../composerDraftStore"; import { useHandleNewThread } from "../hooks/useHandleNewThread"; import { selectThreadTerminalState, useTerminalStateStore } from "../terminalStateStore"; import { toastManager } from "./ui/toast"; import { getArm64IntelBuildWarningDescription, getDesktopUpdateActionError, getDesktopUpdateButtonTooltip, isDesktopUpdateButtonDisabled, resolveDesktopUpdateButtonAction, shouldShowArm64IntelBuildWarning, shouldHighlightDesktopUpdateError, shouldShowDesktopUpdateButton, shouldToastDesktopUpdateActionResult, } from "./desktopUpdate.logic"; import { Alert, AlertAction, AlertDescription, AlertTitle } from "./ui/alert"; import { Button } from "./ui/button"; import { Collapsible, CollapsibleContent } from "./ui/collapsible"; import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip"; import { SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarMenuAction, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarSeparator, SidebarTrigger, } from "./ui/sidebar"; import { useThreadSelectionStore } from "../threadSelectionStore"; import { formatWorktreePathForDisplay, getOrphanedWorktreePathForThread } from "../worktreeCleanup"; import { isNonEmpty as isNonEmptyString } from "effect/String"; import { resolveSidebarNewThreadEnvMode, resolveThreadRowClassName, resolveThreadStatusPill, shouldClearThreadSelectionOnMouseDown, } from "./Sidebar.logic"; import { useCopyToClipboard } from "~/hooks/useCopyToClipboard"; const EMPTY_KEYBINDINGS: ResolvedKeybindingsConfig = []; const THREAD_PREVIEW_LIMIT = 6; function formatRelativeTime(iso: string): string { const diff = Date.now() - new Date(iso).getTime(); const minutes = Math.floor(diff / 60_000); if (minutes < 1) return "just now"; if (minutes < 60) return `${minutes}m ago`; const hours = Math.floor(minutes / 60); if (hours < 24) return `${hours}h ago`; return `${Math.floor(hours / 24)}d ago`; } interface TerminalStatusIndicator { label: "Terminal process running"; colorClass: string; pulse: boolean; } interface PrStatusIndicator { label: "PR open" | "PR closed" | "PR merged"; colorClass: string; tooltip: string; url: string; } type ThreadPr = GitStatusResult["pr"]; function terminalStatusFromRunningIds( runningTerminalIds: string[], ): TerminalStatusIndicator | null { if (runningTerminalIds.length === 0) { return null; } return { label: "Terminal process running", colorClass: "text-teal-600 dark:text-teal-300/90", pulse: true, }; } function prStatusIndicator(pr: ThreadPr): PrStatusIndicator | null { if (!pr) return null; if (pr.state === "open") { return { label: "PR open", colorClass: "text-emerald-600 dark:text-emerald-300/90", tooltip: `#${pr.number} PR open: ${pr.title}`, url: pr.url, }; } if (pr.state === "closed") { return { label: "PR closed", colorClass: "text-zinc-500 dark:text-zinc-400/80", tooltip: `#${pr.number} PR closed: ${pr.title}`, url: pr.url, }; } if (pr.state === "merged") { return { label: "PR merged", colorClass: "text-violet-600 dark:text-violet-300/90", tooltip: `#${pr.number} PR merged: ${pr.title}`, url: pr.url, }; } return null; } function T3Wordmark() { return ( <svg aria-label="T3" className="h-2.5 w-auto shrink-0 text-foreground" viewBox="15.5309 37 94.3941 56.96" xmlns="http://www.w3.org/2000/svg" > <path d="M33.4509 93V47.56H15.5309V37H64.3309V47.56H46.4109V93H33.4509ZM86.7253 93.96C82.832 93.96 78.9653 93.4533 75.1253 92.44C71.2853 91.3733 68.032 89.88 65.3653 87.96L70.4053 78.04C72.5386 79.5867 75.0186 80.8133 77.8453 81.72C80.672 82.6267 83.5253 83.08 86.4053 83.08C89.6586 83.08 92.2186 82.44 94.0853 81.16C95.952 79.88 96.8853 78.12 96.8853 75.88C96.8853 73.7467 96.0586 72.0667 94.4053 70.84C92.752 69.6133 90.0853 69 86.4053 69H80.4853V60.44L96.0853 42.76L97.5253 47.4H68.1653V37H107.365V45.4L91.8453 63.08L85.2853 59.32H89.0453C95.9253 59.32 101.125 60.8667 104.645 63.96C108.165 67.0533 109.925 71.0267 109.925 75.88C109.925 79.0267 109.099 81.9867 107.445 84.76C105.792 87.48 103.259 89.6933 99.8453 91.4C96.432 93.1067 92.0586 93.96 86.7253 93.96Z" fill="currentColor" /> </svg> ); } /** * Derives the server's HTTP origin (scheme + host + port) from the same * sources WsTransport uses, converting ws(s) to http(s). */ function getServerHttpOrigin(): string { const bridgeUrl = window.desktopBridge?.getWsUrl(); const envUrl = import.meta.env.VITE_WS_URL as string | undefined; const wsUrl = bridgeUrl && bridgeUrl.length > 0 ? bridgeUrl : envUrl && envUrl.length > 0 ? envUrl : `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.hostname}:${window.location.port}`; // Parse to extract just the origin, dropping path/query (e.g. ?token=…) const httpUrl = wsUrl.replace(/^wss:/, "https:").replace(/^ws:/, "http:"); try { return new URL(httpUrl).origin; } catch { return httpUrl; } } const serverHttpOrigin = getServerHttpOrigin(); function ProjectFavicon({ cwd }: { cwd: string }) { const [status, setStatus] = useState<"loading" | "loaded" | "error">("loading"); const src = `${serverHttpOrigin}/api/project-favicon?cwd=${encodeURIComponent(cwd)}`; if (status === "error") { return <FolderIcon className="size-3.5 shrink-0 text-muted-foreground/50" />; } return ( <img src={src} alt="" className={`size-3.5 shrink-0 rounded-sm object-contain ${status === "loading" ? "hidden" : ""}`} onLoad={() => setStatus("loaded")} onError={() => setStatus("error")} /> ); } type SortableProjectHandleProps = Pick<ReturnType<typeof useSortable>, "attributes" | "listeners">; function SortableProjectItem({ projectId, children, }: { projectId: ProjectId; children: (handleProps: SortableProjectHandleProps) => React.ReactNode; }) { const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = useSortable({ id: projectId }); return ( <li ref={setNodeRef} style={{ transform: CSS.Translate.toString(transform), transition, }} className={`group/menu-item relative rounded-md ${ isDragging ? "z-20 opacity-80" : "" } ${isOver && !isDragging ? "ring-1 ring-primary/40" : ""}`} data-sidebar="menu-item" data-slot="sidebar-menu-item" > {children({ attributes, listeners })} </li> ); } export default function Sidebar() { const projects = useStore((store) => store.projects); const threads = useStore((store) => store.threads); const markThreadUnread = useStore((store) => store.markThreadUnread); const toggleProject = useStore((store) => store.toggleProject); const reorderProjects = useStore((store) => store.reorderProjects); const clearComposerDraftForThread = useComposerDraftStore((store) => store.clearThreadDraft); const getDraftThreadByProjectId = useComposerDraftStore( (store) => store.getDraftThreadByProjectId, ); const terminalStateByThreadId = useTerminalStateStore((state) => state.terminalStateByThreadId); const clearTerminalState = useTerminalStateStore((state) => state.clearTerminalState); const clearProjectDraftThreadId = useComposerDraftStore( (store) => store.clearProjectDraftThreadId, ); const clearProjectDraftThreadById = useComposerDraftStore( (store) => store.clearProjectDraftThreadById, ); const navigate = useNavigate(); const isOnSettings = useLocation({ select: (loc) => loc.pathname === "/settings" }); const { settings: appSettings } = useAppSettings(); const { handleNewThread } = useHandleNewThread(); const routeThreadId = useParams({ strict: false, select: (params) => (params.threadId ? ThreadId.makeUnsafe(params.threadId) : null), }); const { data: keybindings = EMPTY_KEYBINDINGS } = useQuery({ ...serverConfigQueryOptions(), select: (config) => config.keybindings, }); const queryClient = useQueryClient(); const removeWorktreeMutation = useMutation(gitRemoveWorktreeMutationOptions({ queryClient })); const [addingProject, setAddingProject] = useState(false); const [newCwd, setNewCwd] = useState(""); const [isPickingFolder, setIsPickingFolder] = useState(false); const [isAddingProject, setIsAddingProject] = useState(false); const [addProjectError, setAddProjectError] = useState<string | null>(null); const addProjectInputRef = useRef<HTMLInputElement | null>(null); const [renamingThreadId, setRenamingThreadId] = useState<ThreadId | null>(null); const [renamingTitle, setRenamingTitle] = useState(""); const [expandedThreadListsByProject, setExpandedThreadListsByProject] = useState< ReadonlySet<ProjectId> >(() => new Set()); const renamingCommittedRef = useRef(false); const renamingInputRef = useRef<HTMLInputElement | null>(null); const dragInProgressRef = useRef(false); const suppressProjectClickAfterDragRef = useRef(false); const [desktopUpdateState, setDesktopUpdateState] = useState<DesktopUpdateState | null>(null); const selectedThreadIds = useThreadSelectionStore((s) => s.selectedThreadIds); const toggleThreadSelection = useThreadSelectionStore((s) => s.toggleThread); const rangeSelectTo = useThreadSelectionStore((s) => s.rangeSelectTo); const clearSelection = useThreadSelectionStore((s) => s.clearSelection); const removeFromSelection = useThreadSelectionStore((s) => s.removeFromSelection); const setSelectionAnchor = useThreadSelectionStore((s) => s.setAnchor); const shouldBrowseForProjectImmediately = isElectron; const shouldShowProjectPathEntry = addingProject && !shouldBrowseForProjectImmediately; const projectCwdById = useMemo( () => new Map(projects.map((project) => [project.id, project.cwd] as const)), [projects], ); const threadGitTargets = useMemo( () => threads.map((thread) => ({ threadId: thread.id, branch: thread.branch, cwd: thread.worktreePath ?? projectCwdById.get(thread.projectId) ?? null, })), [projectCwdById, threads], ); const threadGitStatusCwds = useMemo( () => [ ...new Set( threadGitTargets .filter((target) => target.branch !== null) .map((target) => target.cwd) .filter((cwd): cwd is string => cwd !== null), ), ], [threadGitTargets], ); const threadGitStatusQueries = useQueries({ queries: threadGitStatusCwds.map((cwd) => ({ ...gitStatusQueryOptions(cwd), staleTime: 30_000, refetchInterval: 60_000, })), }); const prByThreadId = useMemo(() => { const statusByCwd = new Map<string, GitStatusResult>(); for (let index = 0; index < threadGitStatusCwds.length; index += 1) { const cwd = threadGitStatusCwds[index]; if (!cwd) continue; const status = threadGitStatusQueries[index]?.data; if (status) { statusByCwd.set(cwd, status); } } const map = new Map<ThreadId, ThreadPr>(); for (const target of threadGitTargets) { const status = target.cwd ? statusByCwd.get(target.cwd) : undefined; const branchMatches = target.branch !== null && status?.branch !== null && status?.branch === target.branch; map.set(target.threadId, branchMatches ? (status?.pr ?? null) : null); } return map; }, [threadGitStatusCwds, threadGitStatusQueries, threadGitTargets]); const openPrLink = useCallback((event: React.MouseEvent<HTMLElement>, prUrl: string) => { event.preventDefault(); event.stopPropagation(); const api = readNativeApi(); if (!api) { toastManager.add({ type: "error", title: "Link opening is unavailable.", }); return; } void api.shell.openExternal(prUrl).catch((error) => { toastManager.add({ type: "error", title: "Unable to open PR link", description: error instanceof Error ? error.message : "An error occurred.", }); }); }, []); const focusMostRecentThreadForProject = useCallback( (projectId: ProjectId) => { const latestThread = threads .filter((thread) => thread.projectId === projectId) .toSorted((a, b) => { const byDate = new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(); if (byDate !== 0) return byDate; return b.id.localeCompare(a.id); })[0]; if (!latestThread) return; void navigate({ to: "/$threadId", params: { threadId: latestThread.id }, }); }, [navigate, threads], ); const addProjectFromPath = useCallback( async (rawCwd: string) => { const cwd = rawCwd.trim(); if (!cwd || isAddingProject) return; const api = readNativeApi(); if (!api) return; setIsAddingProject(true); const finishAddingProject = () => { setIsAddingProject(false); setNewCwd(""); setAddProjectError(null); setAddingProject(false); }; const existing = projects.find((project) => project.cwd === cwd); if (existing) { focusMostRecentThreadForProject(existing.id); finishAddingProject(); return; } const projectId = newProjectId(); const createdAt = new Date().toISOString(); const title = cwd.split(/[/\\]/).findLast(isNonEmptyString) ?? cwd; try { await api.orchestration.dispatchCommand({ type: "project.create", commandId: newCommandId(), projectId, title, workspaceRoot: cwd, defaultModel: DEFAULT_MODEL_BY_PROVIDER.codex, createdAt, }); await handleNewThread(projectId, { envMode: appSettings.defaultThreadEnvMode, }).catch(() => undefined); } catch (error) { const description = error instanceof Error ? error.message : "An error occurred while adding the project."; setIsAddingProject(false); if (shouldBrowseForProjectImmediately) { toastManager.add({ type: "error", title: "Failed to add project", description, }); } else { setAddProjectError(description); } return; } finishAddingProject(); }, [ focusMostRecentThreadForProject, handleNewThread, isAddingProject, projects, shouldBrowseForProjectImmediately, appSettings.defaultThreadEnvMode, ], ); const handleAddProject = () => { void addProjectFromPath(newCwd); }; const canAddProject = newCwd.trim().length > 0 && !isAddingProject; const handlePickFolder = async () => { const api = readNativeApi(); if (!api || isPickingFolder) return; setIsPickingFolder(true); let pickedPath: string | null = null; try { pickedPath = await api.dialogs.pickFolder(); } catch { // Ignore picker failures and leave the current thread selection unchanged. } if (pickedPath) { await addProjectFromPath(pickedPath); } else if (!shouldBrowseForProjectImmediately) { addProjectInputRef.current?.focus(); } setIsPickingFolder(false); }; const handleStartAddProject = () => { setAddProjectError(null); if (shouldBrowseForProjectImmediately) { void handlePickFolder(); return; } setAddingProject((prev) => !prev); };