Guard React Doctor and clean focused diagnostics

apps/web/src/components/ChatView.tsx

@@ -8139,6 +8139,7 @@ export default function ChatView({
       </header>
 
       <RenameThreadDialog
+        key={activeThread.id}
         open={renameDialogOpen}
         currentTitle={activeThread.title}
         onOpenChange={setRenameDialogOpen}

apps/web/src/components/GitActionsControl.tsx

@@ -953,15 +953,14 @@ export default function GitActionsControl({
     normalizedCreateBranchName !== normalizedCurrentBranchName &&
     branchNames.has(normalizedCreateBranchName);
 
-  const createAndCheckoutBranch = useCallback(
-    async (branchName: string) => {
-      const api = readNativeApi();
-      if (!api || !gitCwd) return;
+  const createAndCheckoutBranch = async (branchName: string) => {
+    const api = readNativeApi();
+    if (!api || !gitCwd) return;
 
-      const trimmedName = branchName.trim();
-      if (!trimmedName) return;
+    const trimmedName = branchName.trim();
+    if (!trimmedName) return;
 
-      setIsCreateBranchDialogOpen(false);
+    setIsCreateBranchDialogOpen(false);
       setCreateBranchName("");
 
       if (trimmedName.toLowerCase() === normalizedCurrentBranchName) {
@@ -1041,18 +1040,7 @@ export default function GitActionsControl({
           data: threadToastData,
         });
       }
-    },
-    [
-      activeThread?.worktreePath,
-      activeThreadId,
-      gitCwd,
-      hasOriginRemote,
-      normalizedCurrentBranchName,
-      queryClient,
-      setThreadWorkspaceAction,
-      threadToastData,
-    ],
-  );
+    };
 
   const openDialogForMenuItem = useCallback(
     (item: GitActionMenuItem) => {

apps/web/src/components/ProjectScriptsControl.tsx

@@ -14,7 +14,6 @@ import React, {
   type FormEvent,
   type KeyboardEvent,
   useCallback,
-  useEffect,
   useMemo,
   useRef,
   useState,
@@ -271,16 +270,14 @@ export default function ProjectScriptsControl({
 
   // Allow parent surfaces like the compact header menu to open the shared
   // "Add action" dialog without duplicating script form logic.
-  useEffect(() => {
-    if (openAddActionNonce === undefined) return;
-    if (lastOpenAddActionNonceRef.current === undefined) {
-      lastOpenAddActionNonceRef.current = openAddActionNonce;
-      return;
-    }
-    if (openAddActionNonce === lastOpenAddActionNonceRef.current) return;
+  if (
+    openAddActionNonce !== undefined &&
+    lastOpenAddActionNonceRef.current !== undefined &&
+    openAddActionNonce !== lastOpenAddActionNonceRef.current
+  ) {
     lastOpenAddActionNonceRef.current = openAddActionNonce;
     openAddDialog();
-  }, [openAddActionNonce]);
+  }
 
   const confirmDeleteScript = useCallback(() => {
     if (!editingScriptId) return;

apps/web/src/components/ProjectSidebarIcon.tsx

@@ -86,22 +86,46 @@ export function ProjectSidebarIcon({
   className = "size-4",
 }: ProjectSidebarIconProps) {
   const faviconSrc = resolveProjectFaviconUrl(cwd);
-  const shouldUseFavicon = iconMetadata === null;
+  const FolderGlyph = expanded ? HiOutlineFolderOpen : FolderClosed;
+
+  if (iconMetadata) {
+    const artwork = PROJECT_ICON_ARTWORK[iconMetadata.iconId];
+    const Icon = artwork.icon;
+
+    return (
+      <span
+        aria-label={`${iconMetadata.label} project icon`}
+        className={`${className} inline-flex shrink-0 items-center justify-center`}
+        data-project-icon-id={iconMetadata.iconId}
+        style={{ color: artwork.color }}
+        title={iconMetadata.label}
+      >
+        <Icon aria-hidden="true" className="size-[94%]" focusable="false" />
+      </span>
+    );
+  }
+
+  return (
+    <ProjectFolderIcon className={className} faviconSrc={faviconSrc} FolderGlyph={FolderGlyph} />
+  );
+}
+
+function ProjectFolderIcon({
+  className,
+  faviconSrc,
+  FolderGlyph,
+}: {
+  className: string;
+  faviconSrc: string;
+  FolderGlyph: typeof HiOutlineFolderOpen;
+}) {
   const [hasFavicon, setHasFavicon] = useState<boolean>(
-    () => shouldUseFavicon && projectFaviconPresence.get(faviconSrc) === true,
+    () => projectFaviconPresence.get(faviconSrc) === true,
   );
-  const FolderGlyph = expanded ? HiOutlineFolderOpen : FolderClosed;
 
   // Probe with Image() so Electron/file-origin behaves like the actual visible <img>.
   useEffect(() => {
-    if (!shouldUseFavicon) {
-      setHasFavicon(false);
-      return;
-    }
-
-    const cached = projectFaviconPresence.get(faviconSrc);
-    if (cached !== undefined) {
-      setHasFavicon(cached);
+    if (projectFaviconPresence.has(faviconSrc)) {
       return;
     }
 
@@ -130,28 +154,10 @@ export function ProjectSidebarIcon({
       image.removeEventListener("load", handleLoad);
       image.removeEventListener("error", handleError);
     };
-  }, [faviconSrc, shouldUseFavicon]);
-
-  if (iconMetadata) {
-    const artwork = PROJECT_ICON_ARTWORK[iconMetadata.iconId];
-    const Icon = artwork.icon;
-
-    return (
-      <span
-        aria-label={`${iconMetadata.label} project icon`}
-        className={`${className} inline-flex shrink-0 items-center justify-center`}
-        data-project-icon-id={iconMetadata.iconId}
-        role="img"
-        style={{ color: artwork.color }}
-        title={iconMetadata.label}
-      >
-        <Icon aria-hidden="true" className="size-[94%]" focusable="false" />
-      </span>
-    );
-  }
+  }, [faviconSrc]);
 
   return (
-    <>
+    <span className="relative inline-flex shrink-0 items-center justify-center">
       <FolderGlyph aria-hidden="true" focusable="false" className={className} />
       {hasFavicon ? (
         <img
@@ -165,6 +171,6 @@ export function ProjectSidebarIcon({
           }}
         />
       ) : null}
-    </>
+    </span>
   );
 }

apps/web/src/components/PullRequestThreadDialog.tsx

@@ -1,7 +1,7 @@
 import type { GitResolvePullRequestResult } from "@jcode/contracts";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useDebouncedValue } from "@tanstack/react-pacer";
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 
 import {
   gitPreparePullRequestThreadMutationOptions,
@@ -53,13 +53,6 @@ export function PullRequestThreadDialog({
     (debouncerState) => ({ isPending: debouncerState.isPending }),
   );
 
-  useEffect(() => {
-    if (!open) return;
-    setReference(initialReference ?? "");
-    setReferenceDirty(false);
-    setPreparingMode(null);
-  }, [initialReference, open]);
-
   useEffect(() => {
     if (!open) return;
     const frame = window.requestAnimationFrame(() => {
@@ -79,7 +72,7 @@ export function PullRequestThreadDialog({
       reference: open ? parsedDebouncedReference : null,
     }),
   );
-  const cachedPullRequest = useMemo(() => {
+  const cachedPullRequest = (() => {
     if (!cwd || !parsedReference) {
       return null;
     }
@@ -90,7 +83,7 @@ export function PullRequestThreadDialog({
       parsedReference,
     ]);
     return cached?.pullRequest ?? null;
-  }, [cwd, parsedReference, queryClient]);
+  })();
   const preparePullRequestThreadMutation = useMutation(
     gitPreparePullRequestThreadMutationOptions({ cwd, queryClient }),
   );
@@ -108,7 +101,7 @@ export function PullRequestThreadDialog({
       parsedReference !== parsedDebouncedReference ||
       resolvePullRequestQuery.isPending ||
       resolvePullRequestQuery.isFetching);
-  const statusTone = useMemo(() => {
+  const statusTone = (() => {
     switch (resolvedPullRequest?.state) {
       case "merged":
         return "text-[var(--app-status-plan-fg)]";
@@ -119,42 +112,34 @@ export function PullRequestThreadDialog({
       default:
         return "text-muted-foreground";
     }
-  }, [resolvedPullRequest?.state]);
+  })();
 
-  const handleConfirm = useCallback(
-    async (mode: "local" | "worktree") => {
-      if (!parsedReference) {
-        setReferenceDirty(true);
-        return;
-      }
-      if (!parsedReference || !resolvedPullRequest || !cwd) {
-        return;
-      }
-      setPreparingMode(mode);
-      try {
-        const result = await preparePullRequestThreadMutation.mutateAsync({
-          reference: parsedReference,
-          mode,
-        });
-        await onPrepared({
-          branch: result.branch,
-          worktreePath: result.worktreePath,
-          pullRequest: resolvedPullRequest,
-        });
-        onOpenChange(false);
-      } finally {
-        setPreparingMode(null);
-      }
-    },
-    [
-      cwd,
-      onOpenChange,
-      onPrepared,
-      parsedReference,
-      preparePullRequestThreadMutation,
-      resolvedPullRequest,
-    ],
-  );
+  const handleConfirm = async (mode: "local" | "worktree") => {
+    if (!parsedReference) {
+      setReferenceDirty(true);
+      return;
+    }
+    if (!parsedReference || !resolvedPullRequest || !cwd) {
+      return;
+    }
+    setPreparingMode(mode);
+    try {
+      const result = await preparePullRequestThreadMutation.mutateAsync({
+        reference: parsedReference,
+        mode,
+      });
+      await onPrepared({
+        branch: result.branch,
+        worktreePath: result.worktreePath,
+        pullRequest: resolvedPullRequest,
+      });
+      onOpenChange(false);
+      setPreparingMode(null);
+    } catch (error) {
+      setPreparingMode(null);
+      throw error;
+    }
+  };
 
   const validationMessage = !referenceDirty
     ? null

apps/web/src/components/RenameThreadDialog.tsx

@@ -24,41 +24,47 @@ export function RenameThreadDialog({
   onOpenChange,
   onSave,
 }: RenameThreadDialogProps) {
-  const [value, setValue] = useState(currentTitle);
+  const [value, setValue] = useState<string | null>(null);
   const [isSaving, setIsSaving] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (!open) {
-      setIsSaving(false);
-      return;
-    }
-    setValue(currentTitle);
+    if (!open) return;
     const frame = window.requestAnimationFrame(() => {
       inputRef.current?.focus();
       inputRef.current?.select();
     });
     return () => {
       window.cancelAnimationFrame(frame);
     };
-  }, [open, currentTitle]);
+  }, [open]);
 
-  const trimmed = value.trim();
+  const inputValue = value ?? currentTitle;
+  const trimmed = inputValue.trim();
   const canSave = trimmed.length > 0 && !isSaving;
 
+  const closeDialog = () => {
+    setValue(null);
+    setIsSaving(false);
+    onOpenChange(false);
+  };
+
   const handleSubmit = async () => {
     if (!canSave) return;
     setIsSaving(true);
     try {
       await onSave(trimmed);
-      onOpenChange(false);
+      closeDialog();
     } catch {
       setIsSaving(false);
     }
   };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => (nextOpen ? onOpenChange(true) : closeDialog())}
+    >
       <DialogPopup className="max-w-md">
         <DialogHeader>
           <DialogTitle>Rename chat</DialogTitle>
@@ -74,20 +80,20 @@ export function RenameThreadDialog({
             <Input
               ref={inputRef}
               size="lg"
-              value={value}
+              value={inputValue}
               disabled={isSaving}
               onChange={(event) => setValue(event.target.value)}
               onKeyDown={(event) => {
                 if (event.key === "Escape") {
                   event.preventDefault();
-                  onOpenChange(false);
+                  closeDialog();
                 }
               }}
             />
           </form>
         </DialogPanel>
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
+          <Button variant="outline" onClick={closeDialog} disabled={isSaving}>
             Cancel
           </Button>
           <Button onClick={() => void handleSubmit()} disabled={!canSave}>