Review fixes

charlesvien · charlesvien · commit fb04ea486024 · 2026-03-12T14:14:25.000-07:00
diff --git a/apps/code/src/renderer/features/command-center/components/CommandCenterGrid.tsx b/apps/code/src/renderer/features/command-center/components/CommandCenterGrid.tsx
@@ -23,14 +23,19 @@ function useTaskDragActive() {
     };
     const onDragEnd = () => setActive(false);
     const onDrop = () => setActive(false);
+    const onDragLeave = (e: DragEvent) => {
+      if (!e.relatedTarget) setActive(false);
+    };
 
     document.addEventListener("dragstart", onDragStart);
     document.addEventListener("dragend", onDragEnd);
     document.addEventListener("drop", onDrop);
+    document.addEventListener("dragleave", onDragLeave);
     return () => {
       document.removeEventListener("dragstart", onDragStart);
       document.removeEventListener("dragend", onDragEnd);
       document.removeEventListener("drop", onDrop);
+      document.removeEventListener("dragleave", onDragLeave);
     };
   }, []);
 
diff --git a/apps/code/src/renderer/features/command-center/components/CommandCenterSessionView.tsx b/apps/code/src/renderer/features/command-center/components/CommandCenterSessionView.tsx
@@ -2,12 +2,10 @@ import { useDraftStore } from "@features/message-editor/stores/draftStore";
 import { SessionView } from "@features/sessions/components/SessionView";
 import { useSessionCallbacks } from "@features/sessions/hooks/useSessionCallbacks";
 import { useSessionConnection } from "@features/sessions/hooks/useSessionConnection";
-import { useSessionForTask } from "@features/sessions/stores/sessionStore";
-import { useCwd } from "@features/sidebar/hooks/useCwd";
-import { useWorkspace } from "@features/workspace/hooks/useWorkspace";
+import { useSessionViewState } from "@features/sessions/hooks/useSessionViewState";
 import { Flex } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 
 interface CommandCenterSessionViewProps {
   taskId: string;
@@ -18,14 +16,8 @@ export function CommandCenterSessionView({
   taskId,
   task,
 }: CommandCenterSessionViewProps) {
-  const session = useSessionForTask(taskId);
-  const repoPath = useCwd(taskId);
-  const workspace = useWorkspace(taskId);
   const { requestFocus } = useDraftStore((s) => s.actions);
 
-  const isCloud =
-    workspace?.mode === "cloud" || task.latest_run?.environment === "cloud";
-
   useSessionConnection({ taskId, task });
 
   const {
@@ -36,50 +28,20 @@ export function CommandCenterSessionView({
     handleBashCommand,
   } = useSessionCallbacks({ taskId, task });
 
-  const isCloudRunNotTerminal =
-    isCloud &&
-    (!session?.cloudStatus ||
-      session.cloudStatus === "started" ||
-      session.cloudStatus === "in_progress");
-
-  const isRunning = isCloud
-    ? isCloudRunNotTerminal
-    : session?.status === "connected";
-  const hasError = isCloud ? false : session?.status === "error";
-
-  const events = session?.events ?? [];
-  const isPromptPending = session?.isPromptPending ?? false;
-  const promptStartedAt = session?.promptStartedAt;
-
-  const isNewSessionWithInitialPrompt =
-    !task.latest_run?.id && !!task.description;
-  const isResumingExistingSession = !!task.latest_run?.id;
-  const isInitializing = isCloud
-    ? !session || (events.length === 0 && isCloudRunNotTerminal)
-    : !session ||
-      (session.status === "connecting" && events.length === 0) ||
-      (session.status === "connected" &&
-        events.length === 0 &&
-        (isPromptPending ||
-          isNewSessionWithInitialPrompt ||
-          isResumingExistingSession));
-
-  const cloudBranch = isCloud
-    ? (workspace?.baseBranch ?? task.latest_run?.branch ?? null)
-    : null;
-
-  const readOnlyMessage = useMemo(() => {
-    if (!isCloud) return undefined;
-    const status = session?.cloudStatus;
-    if (
-      status === "completed" ||
-      status === "failed" ||
-      status === "cancelled"
-    ) {
-      return "This cloud run has finished";
-    }
-    return undefined;
-  }, [isCloud, session?.cloudStatus]);
+  const {
+    repoPath,
+    isCloud,
+    isRunning,
+    hasError,
+    events,
+    isPromptPending,
+    promptStartedAt,
+    isInitializing,
+    cloudBranch,
+    readOnlyMessage,
+    errorTitle,
+    errorMessage,
+  } = useSessionViewState(taskId, task);
 
   useEffect(() => {
     requestFocus(taskId);
@@ -90,7 +52,7 @@ export function CommandCenterSessionView({
       <SessionView
         events={events}
         taskId={taskId}
-        isRunning={!!isRunning}
+        isRunning={isRunning}
         isPromptPending={isCloud ? null : isPromptPending}
         promptStartedAt={isCloud ? undefined : promptStartedAt}
         onSendPrompt={handleSendPrompt}
@@ -99,8 +61,8 @@ export function CommandCenterSessionView({
         repoPath={repoPath}
         cloudBranch={cloudBranch}
         hasError={hasError}
-        errorTitle={session?.errorTitle}
-        errorMessage={session?.errorMessage}
+        errorTitle={errorTitle}
+        errorMessage={errorMessage}
         onRetry={isCloud ? undefined : handleRetry}
         onNewSession={isCloud ? undefined : handleNewSession}
         isInitializing={isInitializing}
diff --git a/apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts b/apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts
@@ -69,6 +69,7 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
 
       assignTask: (cellIndex, taskId) =>
         set((state) => {
+          if (cellIndex < 0 || cellIndex >= state.cells.length) return state;
           const cells = [...state.cells];
           const existingIndex = cells.indexOf(taskId);
           if (existingIndex !== -1) {
diff --git a/apps/code/src/renderer/features/sessions/hooks/useSessionCallbacks.ts b/apps/code/src/renderer/features/sessions/hooks/useSessionCallbacks.ts
@@ -7,7 +7,7 @@ import type { Task } from "@shared/types";
 import { useNavigationStore } from "@stores/navigationStore";
 import { logger } from "@utils/logger";
 import { toast } from "@utils/toast";
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { getSessionService } from "../service/service";
 import { sessionStoreSetters, useSessionForTask } from "../stores/sessionStore";
 
@@ -27,18 +27,21 @@ export function useSessionCallbacks({
   const { markActivity, markAsViewed } = useTaskViewed();
   const { requestFocus, setPendingContent } = useDraftStore((s) => s.actions);
 
-  const events = session?.events ?? [];
+  const sessionRef = useRef(session);
+  sessionRef.current = session;
 
   const handleSendPrompt = useCallback(
     async (text: string) => {
+      const currentSession = sessionRef.current;
+      const currentEvents = currentSession?.events ?? [];
       const handled = await tryExecuteCodeCommand(text, {
         taskId,
         repoPath,
-        session: session
+        session: currentSession
           ? {
-              taskRunId: session.taskRunId,
-              logUrl: session.logUrl,
-              events,
+              taskRunId: currentSession.taskRunId,
+              logUrl: currentSession.logUrl,
+              events: currentEvents,
             }
           : null,
         taskRun: task.latest_run ?? null,
@@ -64,15 +67,7 @@ export function useSessionCallbacks({
         log.error("Failed to send prompt", error);
       }
     },
-    [
-      taskId,
-      repoPath,
-      markActivity,
-      markAsViewed,
-      events,
-      session,
-      task.latest_run,
-    ],
+    [taskId, repoPath, markActivity, markAsViewed, task.latest_run],
   );
 
   const handleCancelPrompt = useCallback(async () => {
diff --git a/apps/code/src/renderer/features/sessions/hooks/useSessionConnection.ts b/apps/code/src/renderer/features/sessions/hooks/useSessionConnection.ts
@@ -6,13 +6,15 @@ import { trpcClient } from "@renderer/trpc/client";
 import type { Task } from "@shared/types";
 import { useQueryClient } from "@tanstack/react-query";
 import { logger } from "@utils/logger";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import { getSessionService } from "../service/service";
 import { useSessionForTask } from "../stores/sessionStore";
 import { useChatTitleGenerator } from "./useChatTitleGenerator";
 
 const log = logger.scope("session-connection");
 
+const connectingTasks = new Set<string>();
+
 interface UseSessionConnectionOptions {
   taskId: string;
   task: Task;
@@ -34,8 +36,6 @@ export function useSessionConnection({
 
   useChatTitleGenerator(taskId);
 
-  const isConnecting = useRef(false);
-
   useEffect(() => {
     const taskRunId = session?.taskRunId;
     if (!taskRunId) return;
@@ -73,7 +73,7 @@ export function useSessionConnection({
 
   useEffect(() => {
     if (!repoPath) return;
-    if (isConnecting.current) return;
+    if (connectingTasks.has(taskId)) return;
     if (!isOnline) return;
     if (isCloud) return;
 
@@ -85,7 +85,7 @@ export function useSessionConnection({
       return;
     }
 
-    isConnecting.current = true;
+    connectingTasks.add(taskId);
 
     const isNewSession = !task.latest_run?.id;
     const hasInitialPrompt = isNewSession && task.description;
@@ -109,7 +109,7 @@ export function useSessionConnection({
           : undefined,
       })
       .finally(() => {
-        isConnecting.current = false;
+        connectingTasks.delete(taskId);
       });
-  }, [task, repoPath, session, markActivity, isOnline, isCloud]);
+  }, [task, taskId, repoPath, session, markActivity, isOnline, isCloud]);
 }
diff --git a/apps/code/src/renderer/features/sessions/hooks/useSessionViewState.ts b/apps/code/src/renderer/features/sessions/hooks/useSessionViewState.ts
@@ -0,0 +1,73 @@
+import { useCwd } from "@features/sidebar/hooks/useCwd";
+import { useWorkspace } from "@features/workspace/hooks/useWorkspace";
+import type { Task } from "@shared/types";
+import { useMemo } from "react";
+import { useSessionForTask } from "../stores/sessionStore";
+
+export function useSessionViewState(taskId: string, task: Task) {
+  const session = useSessionForTask(taskId);
+  const repoPath = useCwd(taskId);
+  const workspace = useWorkspace(taskId);
+
+  const isCloud =
+    workspace?.mode === "cloud" || task.latest_run?.environment === "cloud";
+
+  const cloudStatus = session?.cloudStatus ?? null;
+  const isCloudRunNotTerminal =
+    isCloud &&
+    (!cloudStatus ||
+      cloudStatus === "started" ||
+      cloudStatus === "in_progress");
+  const isCloudRunTerminal = isCloud && !isCloudRunNotTerminal;
+
+  const isRunning = isCloud
+    ? isCloudRunNotTerminal
+    : session?.status === "connected";
+  const hasError = isCloud ? false : session?.status === "error";
+
+  const events = session?.events ?? [];
+  const isPromptPending = session?.isPromptPending ?? false;
+  const promptStartedAt = session?.promptStartedAt;
+
+  const isNewSessionWithInitialPrompt =
+    !task.latest_run?.id && !!task.description;
+  const isResumingExistingSession = !!task.latest_run?.id;
+  const isInitializing = isCloud
+    ? !session || (events.length === 0 && isCloudRunNotTerminal)
+    : !session ||
+      (session.status === "connecting" && events.length === 0) ||
+      (session.status === "connected" &&
+        events.length === 0 &&
+        (isPromptPending ||
+          isNewSessionWithInitialPrompt ||
+          isResumingExistingSession));
+
+  const cloudBranch = isCloud
+    ? (workspace?.baseBranch ?? task.latest_run?.branch ?? null)
+    : null;
+
+  const readOnlyMessage = useMemo(() => {
+    if (!isCloud) return undefined;
+    if (isCloudRunTerminal) return "This cloud run has finished";
+    return undefined;
+  }, [isCloud, isCloudRunTerminal]);
+
+  return {
+    session,
+    repoPath,
+    isCloud,
+    isCloudRunNotTerminal,
+    isCloudRunTerminal,
+    cloudStatus,
+    isRunning: !!isRunning,
+    hasError,
+    events,
+    isPromptPending,
+    promptStartedAt,
+    isInitializing,
+    cloudBranch,
+    readOnlyMessage,
+    errorTitle: isCloud ? undefined : session?.errorTitle,
+    errorMessage: isCloud ? undefined : session?.errorMessage,
+  };
+}
diff --git a/apps/code/src/renderer/features/sidebar/components/DraggableFolder.tsx b/apps/code/src/renderer/features/sidebar/components/DraggableFolder.tsx
@@ -1,10 +1,5 @@
 import { useSortable } from "@dnd-kit/react/sortable";
-import {
-  cloneElement,
-  isValidElement,
-  type ReactElement,
-  type ReactNode,
-} from "react";
+import { cloneElement, isValidElement, type ReactNode } from "react";
 
 interface DraggableFolderProps {
   id: string;
@@ -31,15 +26,12 @@ export function DraggableFolder({ id, index, children }: DraggableFolderProps) {
         cursor: isDragging ? "grabbing" : undefined,
       }}
     >
-      {isValidElement(children)
-        ? cloneElement(
-            children as ReactElement<{
-              dragHandleRef?: (el: Element | null) => void;
-            }>,
-            {
-              dragHandleRef: handleRef,
-            },
-          )
+      {isValidElement<{ dragHandleRef?: React.RefCallback<HTMLButtonElement> }>(
+        children,
+      )
+        ? cloneElement(children, {
+            dragHandleRef: handleRef as React.RefCallback<HTMLButtonElement>,
+          })
         : children}
     </div>
   );
diff --git a/apps/code/src/renderer/features/sidebar/components/SidebarMenu.tsx b/apps/code/src/renderer/features/sidebar/components/SidebarMenu.tsx
@@ -188,11 +188,13 @@ function SidebarMenuComponent() {
             />
           </Box>
 
-          <CommandCenterItem
-            isActive={sidebarData.isCommandCenterActive}
-            onClick={handleCommandCenterClick}
-            activeCount={commandCenterActiveCount}
-          />
+          <Box mb="2">
+            <CommandCenterItem
+              isActive={sidebarData.isCommandCenterActive}
+              onClick={handleCommandCenterClick}
+              activeCount={commandCenterActiveCount}
+            />
+          </Box>
 
           {sidebarData.isLoading ? (
             <SidebarItem
diff --git a/apps/code/src/renderer/features/sidebar/components/SidebarSection.tsx b/apps/code/src/renderer/features/sidebar/components/SidebarSection.tsx
@@ -15,7 +15,7 @@ interface SidebarSectionProps {
   tooltipContent?: string;
   onNewTask?: () => void;
   newTaskTooltip?: string;
-  dragHandleRef?: (el: Element | null) => void;
+  dragHandleRef?: React.RefCallback<HTMLButtonElement>;
 }
 
 export function SidebarSection({
@@ -37,7 +37,7 @@ export function SidebarSection({
     <Collapsible.Root open={isExpanded} onOpenChange={onToggle}>
       <Collapsible.Trigger asChild>
         <button
-          ref={dragHandleRef as React.Ref<HTMLButtonElement>}
+          ref={dragHandleRef}
           type="button"
           className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-2 py-1 text-left font-mono text-[12px] text-gray-11 transition-colors hover:bg-gray-3"
           style={{
diff --git a/apps/code/src/renderer/features/task-detail/components/TaskLogsPanel.tsx b/apps/code/src/renderer/features/task-detail/components/TaskLogsPanel.tsx
diff --git a/apps/code/src/renderer/stores/navigationStore.ts b/apps/code/src/renderer/stores/navigationStore.ts
diff --git a/apps/code/src/shared/types/analytics.ts b/apps/code/src/shared/types/analytics.ts
