From b9cbe71adbec9e9f92fabbc54bd0bea09b08f185 Mon Sep 17 00:00:00 2001
From: Hooman <69511785+hoomanaskari@users.noreply.github.com>
Date: Wed, 8 Apr 2026 13:10:38 -0400
Subject: [PATCH] Fix project icon syncing and fallbacks

Ensure project icon updates propagate across the app when a custom icon is uploaded or removed from project settings.

This change refreshes selected project state from the latest project records, replaces GitHub avatar fallback with a repo-initial fallback avatar, and loads custom icons through the binary file reader so icons stored under the app userData path render reliably.

It also updates sidebar icon sizing and fallback avatar styling for a clearer, more consistent workspace list.
---
 src/renderer/App.tsx                          |   9 +-
 .../agents-project-worktree-tab.tsx           |  58 ++++---
 src/renderer/components/ui/project-icon.tsx   |  46 +++--
 src/renderer/features/agents/atoms/index.ts   |   2 +
 .../agents/components/agent-chat-card.tsx     | 103 +++--------
 .../components/agents-quick-switch-dialog.tsx |  14 +-
 .../agents/components/project-selector.tsx    |  55 +-----
 src/renderer/features/agents/lib/drafts.ts    |   3 +-
 .../features/agents/lib/selected-project.ts   |  58 +++++++
 .../features/agents/main/new-chat-form.tsx    |  29 +---
 .../features/agents/ui/archive-popover.tsx    |  83 ++++-----
 .../features/layout/agents-layout.tsx         |  11 +-
 .../features/onboarding/select-repo-page.tsx  |  29 +---
 .../features/sidebar/agents-sidebar.tsx       | 160 +++++++++---------
 src/renderer/lib/hooks/use-project-icon.ts    |  86 +++++-----
 15 files changed, 349 insertions(+), 397 deletions(-)
 create mode 100644 src/renderer/features/agents/lib/selected-project.ts

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 72fa8d406..8651aa6fe 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -6,6 +6,7 @@ import { TooltipProvider } from "./components/ui/tooltip"
 import { TRPCProvider } from "./contexts/TRPCProvider"
 import { WindowProvider, getInitialWindowParams } from "./contexts/WindowContext"
 import { selectedProjectAtom, selectedAgentChatIdAtom } from "./features/agents/atoms"
+import { getFreshSelectedProject } from "./features/agents/lib/selected-project"
 import { useAgentSubChatStore } from "./features/agents/stores/sub-chat-store"
 import { AgentsLayout } from "./features/layout/agents-layout"
 import {
@@ -119,13 +120,7 @@ function AppContent() {
 
   // Validated project - only valid if exists in DB
   const validatedProject = useMemo(() => {
-    if (!selectedProject) return null
-    // While loading, trust localStorage value to prevent flicker
-    if (isLoadingProjects) return selectedProject
-    // After loading, validate against DB
-    if (!projects) return null
-    const exists = projects.some((p) => p.id === selectedProject.id)
-    return exists ? selectedProject : null
+    return getFreshSelectedProject(selectedProject, projects, isLoadingProjects)
   }, [selectedProject, projects, isLoadingProjects])
 
   // Determine which page to show:
diff --git a/src/renderer/components/dialogs/settings-tabs/agents-project-worktree-tab.tsx b/src/renderer/components/dialogs/settings-tabs/agents-project-worktree-tab.tsx
index 079b05008..f8c0f6360 100644
--- a/src/renderer/components/dialogs/settings-tabs/agents-project-worktree-tab.tsx
+++ b/src/renderer/components/dialogs/settings-tabs/agents-project-worktree-tab.tsx
@@ -4,9 +4,9 @@ import { useAtomValue, useSetAtom } from "jotai"
 import { trpc } from "../../../lib/trpc"
 import { Button, buttonVariants } from "../../ui/button"
 import { Input } from "../../ui/input"
-import { Plus, Trash2, FolderOpen } from "lucide-react"
+import { Plus, Trash2 } from "lucide-react"
 import { AIPenIcon, ExternalLinkIcon, FolderFilledIcon, ImageIcon } from "../../ui/icons"
-import { invalidateProjectIcon, useProjectIcon } from "../../../lib/hooks/use-project-icon"
+import { invalidateProjectIcon } from "../../../lib/hooks/use-project-icon"
 import { ProjectIcon } from "../../ui/project-icon"
 import finderIcon from "../../../assets/app-icons/finder.png"
 import {
@@ -36,11 +36,13 @@ import {
 import { cn } from "../../../lib/utils"
 import { ResizableSidebar } from "../../ui/resizable-sidebar"
 import { settingsProjectsSidebarWidthAtom } from "../../../features/agents/atoms"
+import { toSelectedProject } from "../../../features/agents/lib/selected-project"
 
 // --- Detail Panel ---
 function ProjectDetail({ projectId }: { projectId: string }) {
+  const utils = trpc.useUtils()
   // Get config for selected project
-  const { data: configData, refetch: refetchConfig } =
+  const { data: configData } =
     trpc.worktreeConfig.get.useQuery(
       { projectId },
       { enabled: !!projectId },
@@ -65,18 +67,32 @@ function ProjectDetail({ projectId }: { projectId: string }) {
   })
 
   // Get project info
-  const { data: project, refetch: refetchProject } = trpc.projects.get.useQuery(
+  const { data: project } = trpc.projects.get.useQuery(
     { id: projectId },
     { enabled: !!projectId },
   )
 
-  // Cached project icon
-  const { src: iconSrc } = useProjectIcon(project)
+  const syncProjectState = useCallback((updatedProject: NonNullable<typeof project>) => {
+    utils.projects.get.setData({ id: projectId }, updatedProject)
+    utils.projects.list.setData(undefined, (oldProjects) => {
+      if (!oldProjects) return [updatedProject]
+      const exists = oldProjects.some((candidate) => candidate.id === updatedProject.id)
+      if (!exists) return [updatedProject, ...oldProjects]
+      return oldProjects.map((candidate) =>
+        candidate.id === updatedProject.id ? updatedProject : candidate,
+      )
+    })
+    setSelectedProject((current) =>
+      current?.id === updatedProject.id ? toSelectedProject(updatedProject) : current,
+    )
+  }, [projectId, setSelectedProject, utils.projects.get, utils.projects.list])
 
   // Rename mutation
   const renameMutation = trpc.projects.rename.useMutation({
-    onSuccess: () => {
-      refetchProject()
+    onSuccess: (updatedProject) => {
+      if (updatedProject) {
+        syncProjectState(updatedProject)
+      }
       toast.success("Project renamed")
     },
     onError: (err) => {
@@ -86,7 +102,13 @@ function ProjectDetail({ projectId }: { projectId: string }) {
 
   // Delete project mutation
   const deleteMutation = trpc.projects.delete.useMutation({
-    onSuccess: () => {
+    onSuccess: (deletedProject) => {
+      if (deletedProject) {
+        utils.projects.get.setData({ id: projectId }, undefined)
+        utils.projects.list.setData(undefined, (oldProjects) =>
+          oldProjects?.filter((candidate) => candidate.id !== deletedProject.id) ?? [],
+        )
+      }
       toast.success("Project removed from list")
       setSelectedProject((current) => {
         if (current?.id === projectId) {
@@ -105,7 +127,7 @@ function ProjectDetail({ projectId }: { projectId: string }) {
     onSuccess: (data) => {
       if (!data) return // User cancelled file picker
       invalidateProjectIcon(projectId)
-      refetchProject()
+      syncProjectState(data)
       toast.success("Icon updated")
     },
     onError: (err) => {
@@ -114,9 +136,11 @@ function ProjectDetail({ projectId }: { projectId: string }) {
   })
 
   const removeIconMutation = trpc.projects.removeIcon.useMutation({
-    onSuccess: () => {
+    onSuccess: (updatedProject) => {
       invalidateProjectIcon(projectId)
-      refetchProject()
+      if (updatedProject) {
+        syncProjectState(updatedProject)
+      }
       toast.success("Icon removed")
     },
   })
@@ -336,15 +360,7 @@ function ProjectDetail({ projectId }: { projectId: string }) {
                   onClick={() => uploadIconMutation.mutate({ id: projectId })}
                   title="Click to change icon"
                 >
-                  {iconSrc ? (
-                    <img
-                      src={iconSrc}
-                      alt=""
-                      className="h-full w-full object-cover"
-                    />
-                  ) : (
-                    <FolderOpen className="h-5 w-5 text-muted-foreground" />
-                  )}
+                  <ProjectIcon project={project} className="h-full w-full" />
                   <div className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 group-hover/icon:opacity-100 transition-opacity duration-150">
                     <ImageIcon className="h-4 w-4 text-white" />
                   </div>
diff --git a/src/renderer/components/ui/project-icon.tsx b/src/renderer/components/ui/project-icon.tsx
index eafcfcfc4..672533723 100644
--- a/src/renderer/components/ui/project-icon.tsx
+++ b/src/renderer/components/ui/project-icon.tsx
@@ -1,16 +1,19 @@
-import { useState, useCallback } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { FolderOpen } from "lucide-react"
 import { useProjectIcon } from "../../lib/hooks/use-project-icon"
 import { cn } from "../../lib/utils"
 
 interface ProjectIconProps {
-  project: {
-    id: string
-    iconPath?: string | null
-    updatedAt?: string | Date | null
-    gitOwner?: string | null
-    gitProvider?: string | null
-  } | null | undefined
+  project:
+    | {
+        id?: string | null
+        name?: string | null
+        gitRepo?: string | null
+        iconPath?: string | null
+        updatedAt?: string | Date | null
+      }
+    | null
+    | undefined
   className?: string
 }
 
@@ -18,8 +21,17 @@ export function ProjectIcon({ project, className }: ProjectIconProps) {
   const { src, hasError } = useProjectIcon(project)
   const [imgError, setImgError] = useState(false)
   const handleError = useCallback(() => setImgError(true), [])
+  const fallbackInitial = useMemo(() => {
+    const label = (project?.gitRepo || project?.name || "").trim()
+    const initial = label.replace(/^[^a-zA-Z0-9]+/, "").charAt(0)
+    return initial ? initial.toUpperCase() : "?"
+  }, [project?.gitRepo, project?.name])
 
-  if (!project || hasError || !src || imgError) {
+  useEffect(() => {
+    setImgError(false)
+  }, [src, project?.id, project?.iconPath, project?.updatedAt])
+
+  if (!project) {
     return (
       <FolderOpen
         className={cn("text-muted-foreground flex-shrink-0", className)}
@@ -27,10 +39,24 @@ export function ProjectIcon({ project, className }: ProjectIconProps) {
     )
   }
 
+  if (hasError || !src || imgError) {
+    return (
+      <div
+        aria-hidden="true"
+        className={cn(
+          "rounded-sm bg-input-background border text-muted-foreground flex-shrink-0 flex items-center justify-center font-medium uppercase",
+          className,
+        )}
+      >
+        <span className="text-[0.65em] leading-none">{fallbackInitial}</span>
+      </div>
+    )
+  }
+
   return (
     <img
       src={src}
-      alt=""
+      alt={project.gitRepo || project.name || "Project icon"}
       className={cn("rounded-sm flex-shrink-0 object-cover", className)}
       onError={handleError}
     />
diff --git a/src/renderer/features/agents/atoms/index.ts b/src/renderer/features/agents/atoms/index.ts
index 666975a20..383130d8a 100644
--- a/src/renderer/features/agents/atoms/index.ts
+++ b/src/renderer/features/agents/atoms/index.ts
@@ -191,6 +191,8 @@ export type SelectedProject = {
   id: string
   name: string
   path: string
+  iconPath?: string | null
+  updatedAt?: string | Date | null
   gitRemoteUrl?: string | null
   gitProvider?: "github" | "gitlab" | "bitbucket" | null
   gitOwner?: string | null
diff --git a/src/renderer/features/agents/components/agent-chat-card.tsx b/src/renderer/features/agents/components/agent-chat-card.tsx
index 7f76f3cea..8878d1cbd 100644
--- a/src/renderer/features/agents/components/agent-chat-card.tsx
+++ b/src/renderer/features/agents/components/agent-chat-card.tsx
@@ -1,51 +1,11 @@
 "use client"
 
-import { useState, useCallback } from "react"
-import { cn } from "../../../lib/utils"
-import {
-  GitHubLogo,
-  IconSpinner,
-  PlanIcon,
-  AgentIcon,
-} from "../../../components/ui/canvas-icons"
 import { useAtomValue } from "jotai"
+import { cn } from "../../../lib/utils"
+import { IconSpinner, PlanIcon, AgentIcon } from "../../../components/ui/canvas-icons"
+import { ProjectIcon } from "../../../components/ui/project-icon"
 import { agentsUnseenChangesAtom, lastChatModesAtom } from "../atoms"
 
-// GitHub avatar with loading placeholder
-function GitHubAvatar({
-  gitOwner,
-  className = "h-4 w-4",
-}: {
-  gitOwner: string
-  className?: string
-}) {
-  const [isLoaded, setIsLoaded] = useState(false)
-  const [hasError, setHasError] = useState(false)
-
-  const handleLoad = useCallback(() => setIsLoaded(true), [])
-  const handleError = useCallback(() => setHasError(true), [])
-
-  if (hasError) {
-    return <GitHubLogo className={cn(className, "text-muted-foreground flex-shrink-0")} />
-  }
-
-  return (
-    <div className={cn(className, "relative flex-shrink-0")}>
-      {/* Placeholder background while loading */}
-      {!isLoaded && (
-        <div className="absolute inset-0 rounded-sm bg-muted" />
-      )}
-      <img
-        src={`https://github.com/${gitOwner}.png?size=64`}
-        alt={gitOwner}
-        className={cn(className, "rounded-sm flex-shrink-0", isLoaded ? 'opacity-100' : 'opacity-0')}
-        onLoad={handleLoad}
-        onError={handleError}
-      />
-    </div>
-  )
-}
-
 interface AgentChatCardProps {
   chat: {
     id: string
@@ -59,9 +19,15 @@ interface AgentChatCardProps {
   onClick?: () => void
   onMouseEnter?: () => void
   variant?: "sidebar" | "quick-switch"
-  // Git info from project (passed from parent)
-  gitOwner?: string | null
-  gitProvider?: string | null
+  project?:
+    | {
+        id?: string | null
+        name?: string | null
+        gitRepo?: string | null
+        iconPath?: string | null
+        updatedAt?: string | Date | null
+      }
+    | null
   repoName?: string | null
 }
 
@@ -71,31 +37,25 @@ function ChatIconWithBadge({
   hasUnseenChanges,
   lastMode,
   isSelected = false,
-  gitOwner,
-  gitProvider,
+  project,
 }: {
   isLoading: boolean
   hasUnseenChanges: boolean
   lastMode: "plan" | "agent"
   isSelected?: boolean
-  gitOwner?: string | null
-  gitProvider?: string | null
+  project?:
+    | {
+        id?: string | null
+        name?: string | null
+        gitRepo?: string | null
+        iconPath?: string | null
+        updatedAt?: string | Date | null
+      }
+    | null
 }) {
-  // Show GitHub avatar if available, otherwise blank project icon
-  const renderMainIcon = () => {
-    if (gitOwner && gitProvider === "github") {
-      return <GitHubAvatar gitOwner={gitOwner} />
-    }
-
-    return (
-      <GitHubLogo className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
-    )
-  }
-
   return (
     <div className="relative flex-shrink-0 h-4 w-4">
-      {renderMainIcon()}
-      {/* Badge in bottom-right corner */}
+      <ProjectIcon project={project} className="h-4 w-4" />
       <div
         className={cn(
           "absolute -bottom-1 -right-1 w-3 h-3 rounded-full flex items-center justify-center",
@@ -138,23 +98,19 @@ export function AgentChatCard({
   onClick,
   onMouseEnter,
   variant = "sidebar",
-  gitOwner,
-  gitProvider,
+  project,
   repoName,
 }: AgentChatCardProps) {
-  // Get status atoms
   const unseenChanges = useAtomValue(agentsUnseenChangesAtom)
   const lastChatModes = useAtomValue(lastChatModesAtom)
 
   const hasUnseenChanges = unseenChanges.has(chat.id)
   const lastMode = lastChatModes.get(chat.id) || "agent"
-  // isLoading is already derived from loadingSubChatsAtom (local tracking)
   const actualIsLoading = isLoading
 
   if (variant === "quick-switch") {
-    // Desktop: use branch from chat and repo name from project
     const branch = chat.branch
-    const displayRepoName = repoName || "Local project"
+    const displayRepoName = repoName || project?.gitRepo || project?.name || "Local project"
     const displayText = branch
       ? `${displayRepoName} • ${branch}`
       : displayRepoName
@@ -175,12 +131,10 @@ export function AgentChatCard({
               hasUnseenChanges={hasUnseenChanges}
               lastMode={lastMode}
               isSelected={isSelected}
-              gitOwner={gitOwner}
-              gitProvider={gitProvider}
+              project={project}
             />
           </div>
           <div className="flex-1 min-w-0 flex flex-col gap-0.5">
-            {/* Chat name */}
             <span
               className={cn(
                 "truncate block text-sm leading-tight",
@@ -189,7 +143,6 @@ export function AgentChatCard({
             >
               {chat.name || "Untitled Chat"}
             </span>
-            {/* Branch/Repository info */}
             <span
               className={cn(
                 "text-[11px] truncate",
@@ -206,7 +159,6 @@ export function AgentChatCard({
     )
   }
 
-  // Sidebar variant (default)
   return (
     <div
       onClick={onClick}
@@ -225,8 +177,7 @@ export function AgentChatCard({
             hasUnseenChanges={hasUnseenChanges}
             lastMode={lastMode}
             isSelected={isSelected}
-            gitOwner={gitOwner}
-            gitProvider={gitProvider}
+            project={project}
           />
         </div>
         <div className="flex-1 min-w-0">
diff --git a/src/renderer/features/agents/components/agents-quick-switch-dialog.tsx b/src/renderer/features/agents/components/agents-quick-switch-dialog.tsx
index 7034f8250..f7c9b5491 100644
--- a/src/renderer/features/agents/components/agents-quick-switch-dialog.tsx
+++ b/src/renderer/features/agents/components/agents-quick-switch-dialog.tsx
@@ -18,7 +18,16 @@ interface AgentsQuickSwitchDialogProps {
     projectId: string
   }>
   selectedIndex: number
-  projectsMap: Map<string, { gitOwner?: string | null; gitProvider?: string | null; gitRepo?: string | null; name: string }>
+  projectsMap: Map<
+    string,
+    {
+      id?: string
+      gitRepo?: string | null
+      name: string
+      iconPath?: string | null
+      updatedAt?: string | Date | null
+    }
+  >
   onHover?: (index: number) => void
 }
 
@@ -76,8 +85,7 @@ export function AgentsQuickSwitchDialog({
                           isSelected={isSelected}
                           isLoading={isLoading}
                           variant="quick-switch"
-                          gitOwner={project?.gitOwner}
-                          gitProvider={project?.gitProvider}
+                          project={project}
                           repoName={project?.gitRepo || project?.name}
                           onMouseEnter={() => onHover?.(index)}
                         />
diff --git a/src/renderer/features/agents/components/project-selector.tsx b/src/renderer/features/agents/components/project-selector.tsx
index 82bd838b4..47cb5baf9 100644
--- a/src/renderer/features/agents/components/project-selector.tsx
+++ b/src/renderer/features/agents/components/project-selector.tsx
@@ -25,6 +25,7 @@ import { IconChevronDown, CheckIcon, FolderPlusIcon, GitHubIcon } from "../../..
 import { ProjectIcon } from "../../../components/ui/project-icon"
 import { trpc } from "../../../lib/trpc"
 import { selectedProjectAtom } from "../atoms"
+import { getFreshSelectedProject, toSelectedProject } from "../lib/selected-project"
 
 export function ProjectSelector() {
   const [selectedProject, setSelectedProject] = useAtom(selectedProjectAtom)
@@ -67,19 +68,7 @@ export function ProjectSelector() {
           return [project, ...oldData]
         })
 
-        setSelectedProject({
-          id: project.id,
-          name: project.name,
-          path: project.path,
-          gitRemoteUrl: project.gitRemoteUrl,
-          gitProvider: project.gitProvider as
-            | "github"
-            | "gitlab"
-            | "bitbucket"
-            | null,
-          gitOwner: project.gitOwner,
-          gitRepo: project.gitRepo,
-        })
+        setSelectedProject(toSelectedProject(project))
       }
     },
   })
@@ -99,19 +88,7 @@ export function ProjectSelector() {
           return [project, ...oldData]
         })
 
-        setSelectedProject({
-          id: project.id,
-          name: project.name,
-          path: project.path,
-          gitRemoteUrl: project.gitRemoteUrl,
-          gitProvider: project.gitProvider as
-            | "github"
-            | "gitlab"
-            | "bitbucket"
-            | null,
-          gitOwner: project.gitOwner,
-          gitRepo: project.gitRepo,
-        })
+        setSelectedProject(toSelectedProject(project))
         setGithubDialogOpen(false)
         setGithubUrl("")
       }
@@ -131,19 +108,7 @@ export function ProjectSelector() {
   const handleSelectProject = (projectId: string) => {
     const project = projects?.find((p) => p.id === projectId)
     if (project) {
-      setSelectedProject({
-        id: project.id,
-        name: project.name,
-        path: project.path,
-        gitRemoteUrl: project.gitRemoteUrl,
-        gitProvider: project.gitProvider as
-          | "github"
-          | "gitlab"
-          | "bitbucket"
-          | null,
-        gitOwner: project.gitOwner,
-        gitRepo: project.gitRepo,
-      })
+      setSelectedProject(toSelectedProject(project))
       setOpen(false)
     }
   }
@@ -151,17 +116,7 @@ export function ProjectSelector() {
   // Validate selected project still exists and use latest DB data (e.g. renamed project)
   // While loading, trust localStorage value to prevent showing "Select repo" on app restart
   const validSelection = useMemo(() => {
-    if (!selectedProject) return null
-    // While loading, trust localStorage value
-    if (isLoadingProjects) return selectedProject
-    // After loading, validate against DB and use fresh data
-    if (!projects) return null
-    const dbProject = projects.find((p) => p.id === selectedProject.id)
-    if (!dbProject) return null
-    return {
-      ...selectedProject,
-      name: dbProject.name,
-    }
+    return getFreshSelectedProject(selectedProject, projects, isLoadingProjects)
   }, [selectedProject, projects, isLoadingProjects])
 
   // If no projects exist and none selected - show direct "Add repository" button
diff --git a/src/renderer/features/agents/lib/drafts.ts b/src/renderer/features/agents/lib/drafts.ts
index 01c4e6440..b8d55c6be 100644
--- a/src/renderer/features/agents/lib/drafts.ts
+++ b/src/renderer/features/agents/lib/drafts.ts
@@ -51,6 +51,8 @@ export interface DraftProject {
   id: string
   name: string
   path: string
+  iconPath?: string | null
+  updatedAt?: string | Date | null
   gitOwner?: string | null
   gitRepo?: string | null
   gitProvider?: string | null
@@ -631,4 +633,3 @@ export async function saveSubChatDraftWithAttachments(
     return { success: false, error: "save_failed" }
   }
 }
-
diff --git a/src/renderer/features/agents/lib/selected-project.ts b/src/renderer/features/agents/lib/selected-project.ts
new file mode 100644
index 000000000..8a6ff1d0f
--- /dev/null
+++ b/src/renderer/features/agents/lib/selected-project.ts
@@ -0,0 +1,58 @@
+import type { SelectedProject } from "../atoms"
+
+type ProjectLike = {
+  id: string
+  name: string
+  path: string
+  iconPath?: string | null
+  updatedAt?: string | Date | null
+  gitRemoteUrl?: string | null
+  gitProvider?: string | null
+  gitOwner?: string | null
+  gitRepo?: string | null
+}
+
+function normalizeGitProvider(
+  gitProvider: string | null | undefined,
+): "github" | "gitlab" | "bitbucket" | null {
+  if (
+    gitProvider === "github" ||
+    gitProvider === "gitlab" ||
+    gitProvider === "bitbucket"
+  ) {
+    return gitProvider
+  }
+
+  return null
+}
+
+export function toSelectedProject(
+  project: ProjectLike | null | undefined,
+): SelectedProject {
+  if (!project) return null
+
+  return {
+    id: project.id,
+    name: project.name,
+    path: project.path,
+    iconPath: project.iconPath ?? null,
+    updatedAt: project.updatedAt ?? null,
+    gitRemoteUrl: project.gitRemoteUrl ?? null,
+    gitProvider: normalizeGitProvider(project.gitProvider),
+    gitOwner: project.gitOwner ?? null,
+    gitRepo: project.gitRepo ?? null,
+  }
+}
+
+export function getFreshSelectedProject(
+  selectedProject: SelectedProject,
+  projects: ProjectLike[] | undefined,
+  isLoading: boolean,
+): SelectedProject {
+  if (!selectedProject) return null
+  if (isLoading) return selectedProject
+  if (!projects) return null
+
+  const project = projects.find((candidate) => candidate.id === selectedProject.id)
+  return toSelectedProject(project)
+}
diff --git a/src/renderer/features/agents/main/new-chat-form.tsx b/src/renderer/features/agents/main/new-chat-form.tsx
index 6f0f61381..5a7ac7576 100644
--- a/src/renderer/features/agents/main/new-chat-form.tsx
+++ b/src/renderer/features/agents/main/new-chat-form.tsx
@@ -116,8 +116,11 @@ import {
   generateDraftId,
   deleteNewChatDraft,
   markDraftVisible,
-  type DraftProject,
 } from "../lib/drafts"
+import {
+  getFreshSelectedProject,
+  toSelectedProject,
+} from "../lib/selected-project"
 import {
   CLAUDE_MODELS,
   CODEX_MODELS,
@@ -205,13 +208,7 @@ export function NewChatForm({
   // Validate selected project exists in DB
   // While loading, trust the stored value to prevent flicker
   const validatedProject = useMemo(() => {
-    if (!selectedProject) return null
-    // While loading, trust localStorage value to prevent flicker
-    if (isLoadingProjects) return selectedProject
-    // After loading, validate against DB
-    if (!projectsList) return null
-    const exists = projectsList.some((p) => p.id === selectedProject.id)
-    return exists ? selectedProject : null
+    return getFreshSelectedProject(selectedProject, projectsList, isLoadingProjects)
   }, [selectedProject, projectsList, isLoadingProjects])
 
   // Clear invalid project from storage
@@ -1075,19 +1072,7 @@ export function NewChatForm({
           return [project, ...oldData]
         })
 
-        setSelectedProject({
-          id: project.id,
-          name: project.name,
-          path: project.path,
-          gitRemoteUrl: project.gitRemoteUrl,
-          gitProvider: project.gitProvider as
-            | "github"
-            | "gitlab"
-            | "bitbucket"
-            | null,
-          gitOwner: project.gitOwner,
-          gitRepo: project.gitRepo,
-        })
+        setSelectedProject(toSelectedProject(project))
       }
     },
   })
@@ -1296,6 +1281,8 @@ export function NewChatForm({
             id: validatedProject.id,
             name: validatedProject.name,
             path: validatedProject.path,
+            iconPath: validatedProject.iconPath,
+            updatedAt: validatedProject.updatedAt,
             gitOwner: validatedProject.gitOwner,
             gitRepo: validatedProject.gitRepo,
             gitProvider: validatedProject.gitProvider,
diff --git a/src/renderer/features/agents/ui/archive-popover.tsx b/src/renderer/features/agents/ui/archive-popover.tsx
index a8af3d2f5..f2b57df3c 100644
--- a/src/renderer/features/agents/ui/archive-popover.tsx
+++ b/src/renderer/features/agents/ui/archive-popover.tsx
@@ -19,9 +19,9 @@ import {
   SearchIcon,
   ArchiveIcon,
   UnarchiveIcon,
-  GitHubLogo,
   CloudIcon,
 } from "../../../components/ui/icons"
+import { ProjectIcon } from "../../../components/ui/project-icon"
 import {
   Popover,
   PopoverContent,
@@ -29,41 +29,6 @@ import {
 } from "../../../components/ui/popover"
 import { cn } from "../../../lib/utils"
 
-// GitHub avatar with loading placeholder
-function GitHubAvatar({
-  gitOwner,
-  className = "h-4 w-4",
-}: {
-  gitOwner: string
-  className?: string
-}) {
-  const [isLoaded, setIsLoaded] = useState(false)
-  const [hasError, setHasError] = useState(false)
-
-  const handleLoad = useCallback(() => setIsLoaded(true), [])
-  const handleError = useCallback(() => setHasError(true), [])
-
-  if (hasError) {
-    return <GitHubLogo className={cn(className, "text-muted-foreground flex-shrink-0")} />
-  }
-
-  return (
-    <div className={cn(className, "relative flex-shrink-0")}>
-      {/* Placeholder background while loading */}
-      {!isLoaded && (
-        <div className="absolute inset-0 rounded-sm bg-muted" />
-      )}
-      <img
-        src={`https://github.com/${gitOwner}.png?size=64`}
-        alt={gitOwner}
-        className={cn(className, "rounded-sm flex-shrink-0", isLoaded ? 'opacity-100' : 'opacity-0')}
-        onLoad={handleLoad}
-        onError={handleError}
-      />
-    </div>
-  )
-}
-
 // Format relative time - moved outside component to avoid recreation
 const formatTime = (dateInput: Date | string) => {
   const date = dateInput instanceof Date ? dateInput : new Date(dateInput)
@@ -103,7 +68,18 @@ interface ArchiveChatItemProps {
   isSelected: boolean
   isCurrentChat: boolean
   showIcon: boolean
-  projectsMap: Map<string, { gitOwner: string | null; gitRepo: string | null; gitProvider: string | null; name: string }>
+  projectsMap: Map<
+    string,
+    {
+      id?: string
+      gitOwner: string | null
+      gitRepo: string | null
+      gitProvider: string | null
+      name: string
+      iconPath?: string | null
+      updatedAt?: string | Date | null
+    }
+  >
   stats?: { additions: number; deletions: number }
   onSelect: (id: string) => void
   onRestore: (id: string) => void
@@ -125,10 +101,7 @@ const ArchiveChatItem = memo(function ArchiveChatItem({
   const branch = chat.branch
   // For local chats, use projectsMap; for remote chats, use chat properties directly
   const project = chat.projectId ? projectsMap.get(chat.projectId) : null
-  const gitOwner = chat.gitOwner || project?.gitOwner
   const gitRepo = chat.repository || project?.gitRepo
-  const gitProvider = chat.gitProvider || project?.gitProvider
-  const isGitHubRepo = gitProvider === "github" && !!gitOwner
 
   const repoName = gitRepo || project?.name
   const displayText = branch
@@ -165,18 +138,24 @@ const ArchiveChatItem = memo(function ArchiveChatItem({
       <div className="flex items-start gap-2.5">
         {showIcon && (
           <div className="pt-0.5">
-            {isGitHubRepo && gitOwner ? (
-              <GitHubAvatar gitOwner={gitOwner} />
-            ) : (
-              <GitHubLogo
-                className={cn(
-                  "h-4 w-4 flex-shrink-0 transition-colors duration-75",
-                  isSelected
-                    ? "text-foreground"
-                    : "text-muted-foreground",
-                )}
-              />
-            )}
+            <ProjectIcon
+              project={
+                project
+                  ? {
+                      id: project.id ?? chat.projectId ?? chat.id,
+                      name: project.name,
+                      gitRepo: project.gitRepo,
+                      iconPath: project.iconPath,
+                      updatedAt: project.updatedAt,
+                    }
+                  : {
+                      id: chat.id,
+                      name: repoName || chat.name || "Local project",
+                      gitRepo,
+                    }
+              }
+              className="h-4 w-4"
+            />
           </div>
         )}
         <div className="flex-1 min-w-0 flex flex-col gap-0.5">
diff --git a/src/renderer/features/layout/agents-layout.tsx b/src/renderer/features/layout/agents-layout.tsx
index c76bbdf53..c8f2c60ae 100644
--- a/src/renderer/features/layout/agents-layout.tsx
+++ b/src/renderer/features/layout/agents-layout.tsx
@@ -20,6 +20,7 @@ import {
   betaKanbanEnabledAtom,
 } from "../../lib/atoms"
 import { selectedAgentChatIdAtom, selectedProjectAtom, selectedDraftIdAtom, showNewChatFormAtom, desktopViewAtom, fileSearchDialogOpenAtom } from "../agents/atoms"
+import { getFreshSelectedProject, toSelectedProject } from "../agents/lib/selected-project"
 import { trpc } from "../../lib/trpc"
 import { useAgentsHotkeys } from "../agents/lib/agents-hotkeys-manager"
 import { toggleSearchAtom } from "../agents/search"
@@ -118,13 +119,7 @@ export function AgentsLayout() {
   // Validated project - only valid if exists in DB
   // While loading, trust localStorage value to prevent clearing on app restart
   const validatedProject = useMemo(() => {
-    if (!selectedProject) return null
-    // While loading, trust localStorage value to prevent flicker and clearing
-    if (isLoadingProjects) return selectedProject
-    // After loading, validate against DB
-    if (!projects) return null
-    const exists = projects.some((p) => p.id === selectedProject.id)
-    return exists ? selectedProject : null
+    return getFreshSelectedProject(selectedProject, projects, isLoadingProjects)
   }, [selectedProject, projects, isLoadingProjects])
 
   // Clear invalid project from storage (only after loading completes)
@@ -227,7 +222,7 @@ export function AgentsLayout() {
           onClick: () => {
             const projectMatch = projects?.find((project) => project.id === payload.projectId)
             if (projectMatch) {
-              setSelectedProject(projectMatch as any)
+              setSelectedProject(toSelectedProject(projectMatch))
             }
             setSettingsActiveTab("projects")
             setSettingsDialogOpen(true)
diff --git a/src/renderer/features/onboarding/select-repo-page.tsx b/src/renderer/features/onboarding/select-repo-page.tsx
index fc36e91a6..287dcaa16 100644
--- a/src/renderer/features/onboarding/select-repo-page.tsx
+++ b/src/renderer/features/onboarding/select-repo-page.tsx
@@ -9,6 +9,7 @@ import { Logo } from "../../components/ui/logo"
 import { Input } from "../../components/ui/input"
 import { trpc } from "../../lib/trpc"
 import { selectedProjectAtom } from "../agents/atoms"
+import { toSelectedProject } from "../agents/lib/selected-project"
 
 export function SelectRepoPage() {
   const [, setSelectedProject] = useAtom(selectedProjectAtom)
@@ -34,19 +35,7 @@ export function SelectRepoPage() {
           return [project, ...oldData]
         })
 
-        setSelectedProject({
-          id: project.id,
-          name: project.name,
-          path: project.path,
-          gitRemoteUrl: project.gitRemoteUrl,
-          gitProvider: project.gitProvider as
-            | "github"
-            | "gitlab"
-            | "bitbucket"
-            | null,
-          gitOwner: project.gitOwner,
-          gitRepo: project.gitRepo,
-        })
+        setSelectedProject(toSelectedProject(project))
       }
     },
   })
@@ -66,19 +55,7 @@ export function SelectRepoPage() {
           return [project, ...oldData]
         })
 
-        setSelectedProject({
-          id: project.id,
-          name: project.name,
-          path: project.path,
-          gitRemoteUrl: project.gitRemoteUrl,
-          gitProvider: project.gitProvider as
-            | "github"
-            | "gitlab"
-            | "bitbucket"
-            | null,
-          gitOwner: project.gitOwner,
-          gitRepo: project.gitRepo,
-        })
+        setSelectedProject(toSelectedProject(project))
         setShowClonePage(false)
         setGithubUrl("")
       }
diff --git a/src/renderer/features/sidebar/agents-sidebar.tsx b/src/renderer/features/sidebar/agents-sidebar.tsx
index feb803843..7ea1c9d0c 100644
--- a/src/renderer/features/sidebar/agents-sidebar.tsx
+++ b/src/renderer/features/sidebar/agents-sidebar.tsx
@@ -90,7 +90,6 @@ import {
   ProfileIcon,
   PublisherStudioIcon,
   SearchIcon,
-  GitHubLogo,
   LoadingDot,
   ArchiveIcon,
   TrashIcon,
@@ -103,6 +102,7 @@ import {
 import { Logo } from "../../components/ui/logo"
 import { Input } from "../../components/ui/input"
 import { Button } from "../../components/ui/button"
+import { ProjectIcon } from "../../components/ui/project-icon"
 import {
   selectedAgentChatIdAtom,
   selectedChatIsRemoteAtom,
@@ -142,41 +142,6 @@ import { exportChat, copyChat, type ExportFormat } from "../agents/lib/export-ch
 const FEEDBACK_URL =
   import.meta.env.VITE_FEEDBACK_URL || "https://discord.gg/8ektTZGnj4"
 
-// GitHub avatar with loading placeholder
-const GitHubAvatar = React.memo(function GitHubAvatar({
-  gitOwner,
-  className = "h-4 w-4",
-}: {
-  gitOwner: string
-  className?: string
-}) {
-  const [isLoaded, setIsLoaded] = useState(false)
-  const [hasError, setHasError] = useState(false)
-
-  const handleLoad = useCallback(() => setIsLoaded(true), [])
-  const handleError = useCallback(() => setHasError(true), [])
-
-  if (hasError) {
-    return <GitHubLogo className={cn(className, "text-muted-foreground flex-shrink-0")} />
-  }
-
-  return (
-    <div className={cn(className, "relative flex-shrink-0")}>
-      {/* Placeholder background while loading */}
-      {!isLoaded && (
-        <div className="absolute inset-0 rounded-sm bg-muted" />
-      )}
-      <img
-        src={`https://github.com/${gitOwner}.png?size=64`}
-        alt={gitOwner}
-        className={cn(className, "rounded-sm flex-shrink-0", isLoaded ? 'opacity-100' : 'opacity-0')}
-        onLoad={handleLoad}
-        onError={handleError}
-      />
-    </div>
-  )
-})
-
 // Component to render chat icon with loading status
 const ChatIcon = React.memo(function ChatIcon({
   isSelected,
@@ -187,8 +152,7 @@ const ChatIcon = React.memo(function ChatIcon({
   isMultiSelectMode = false,
   isChecked = false,
   onCheckboxClick,
-  gitOwner,
-  gitProvider,
+  projectIcon,
   showIcon = true,
 }: {
   isSelected: boolean
@@ -199,25 +163,17 @@ const ChatIcon = React.memo(function ChatIcon({
   isMultiSelectMode?: boolean
   isChecked?: boolean
   onCheckboxClick?: (e: React.MouseEvent) => void
-  gitOwner?: string | null
-  gitProvider?: string | null
+  projectIcon?:
+    | {
+        id?: string | null
+        name?: string | null
+        gitRepo?: string | null
+        iconPath?: string | null
+        updatedAt?: string | Date | null
+      }
+    | null
   showIcon?: boolean
 }) {
-  // Show GitHub avatar if available, otherwise blank project icon
-  const renderMainIcon = () => {
-    if (gitOwner && gitProvider === "github") {
-      return <GitHubAvatar gitOwner={gitOwner} />
-    }
-    return (
-      <GitHubLogo
-        className={cn(
-          "h-4 w-4 flex-shrink-0 transition-colors",
-          isSelected ? "text-foreground" : "text-muted-foreground",
-        )}
-      />
-    )
-  }
-
   // When icon is hidden and not in multi-select mode, render nothing
   // The loader/status will be rendered inline by the parent component
   if (!showIcon && !isMultiSelectMode) {
@@ -225,7 +181,7 @@ const ChatIcon = React.memo(function ChatIcon({
   }
 
   return (
-    <div className="relative flex-shrink-0 w-4 h-4">
+    <div className="relative flex-shrink-0 w-5 h-5">
       {/* Checkbox slides in from left, icon slides out */}
       <div
         className={cn(
@@ -251,7 +207,7 @@ const ChatIcon = React.memo(function ChatIcon({
             : "opacity-100 scale-100",
         )}
       >
-        {renderMainIcon()}
+        <ProjectIcon project={projectIcon} className="h-5 w-5" />
       </div>
       {/* Badge in bottom-right corner: question > loader > amber dot > blue dot - hidden during multi-select or when icon is hidden */}
       <AnimatePresence mode="wait">
@@ -323,8 +279,9 @@ const DraftItem = React.memo(function DraftItem({
   draftId,
   draftText,
   draftUpdatedAt,
-  projectGitOwner,
-  projectGitProvider,
+  projectId,
+  projectIconPath,
+  projectUpdatedAt,
   projectGitRepo,
   projectName,
   isSelected,
@@ -338,8 +295,9 @@ const DraftItem = React.memo(function DraftItem({
   draftId: string
   draftText: string
   draftUpdatedAt: number
-  projectGitOwner: string | null | undefined
-  projectGitProvider: string | null | undefined
+  projectId: string | null | undefined
+  projectIconPath: string | null | undefined
+  projectUpdatedAt: string | Date | null | undefined
   projectGitRepo: string | null | undefined
   projectName: string | null | undefined
   isSelected: boolean
@@ -367,13 +325,16 @@ const DraftItem = React.memo(function DraftItem({
       <div className="flex items-start gap-2.5">
         {showIcon && (
           <div className="pt-0.5">
-            <div className="relative flex-shrink-0 w-4 h-4">
-              {projectGitOwner && projectGitProvider === "github" ? (
-                <GitHubAvatar gitOwner={projectGitOwner} />
-              ) : (
-                <GitHubLogo className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
-              )}
-            </div>
+            <ProjectIcon
+              project={{
+                id: projectId ?? draftId,
+                name: projectName,
+                gitRepo: projectGitRepo,
+                iconPath: projectIconPath,
+                updatedAt: projectUpdatedAt,
+              }}
+              className="h-5 w-5"
+            />
           </div>
         )}
         <div className="flex-1 min-w-0 flex flex-col gap-0.5">
@@ -436,8 +397,7 @@ const AgentChatItem = React.memo(function AgentChatItem({
   isDesktop,
   isPinned,
   displayText,
-  gitOwner,
-  gitProvider,
+  projectIcon,
   stats,
   selectedChatIdsSize,
   canShowPinOption,
@@ -484,8 +444,15 @@ const AgentChatItem = React.memo(function AgentChatItem({
   isDesktop: boolean
   isPinned: boolean
   displayText: string
-  gitOwner: string | null | undefined
-  gitProvider: string | null | undefined
+  projectIcon?:
+    | {
+        id?: string | null
+        name?: string | null
+        gitRepo?: string | null
+        iconPath?: string | null
+        updatedAt?: string | Date | null
+      }
+    | null
   stats: { fileCount: number; additions: number; deletions: number } | undefined
   selectedChatIdsSize: number
   canShowPinOption: boolean
@@ -581,8 +548,7 @@ const AgentChatItem = React.memo(function AgentChatItem({
                   isMultiSelectMode={isMultiSelectMode}
                   isChecked={isChecked}
                   onCheckboxClick={(e) => onCheckboxClick(e, chatId)}
-                  gitOwner={gitOwner}
-                  gitProvider={gitProvider}
+                  projectIcon={projectIcon}
                   showIcon={showIcon}
                 />
               </div>
@@ -864,7 +830,18 @@ interface ChatListSectionProps {
   isMobileFullscreen: boolean
   isDesktop: boolean
   pinnedChatIds: Set<string>
-  projectsMap: Map<string, { gitOwner?: string | null; gitProvider?: string | null; gitRepo?: string | null; name?: string | null }>
+  projectsMap: Map<
+    string,
+    {
+      id?: string
+      gitOwner?: string | null
+      gitProvider?: string | null
+      gitRepo?: string | null
+      name?: string | null
+      iconPath?: string | null
+      updatedAt?: string | Date | null
+    }
+  >
   workspaceFileStats: Map<string, { fileCount: number; additions: number; deletions: number }>
   filteredChats: Array<{ id: string }>
   canShowPinOption: boolean
@@ -985,11 +962,7 @@ const ChatListSection = React.memo(function ChatListSection({
           const isLastInFilteredChats = globalIndex === filteredChats.length - 1
           const isJustCreated = justCreatedIds.has(chat.id)
 
-          // For remote chats, extract gitOwner from meta.repository (e.g. "owner/repo" -> "owner")
-          const gitOwner = chat.isRemote
-            ? chat.meta?.repository?.split('/')[0]
-            : project?.gitOwner
-          const gitProvider = chat.isRemote ? 'github' : project?.gitProvider
+          const remoteRepoName = chat.meta?.repository?.split("/")[1] || chat.meta?.repository
 
           return (
             <AgentChatItem
@@ -1012,8 +985,26 @@ const ChatListSection = React.memo(function ChatListSection({
               isDesktop={isDesktop}
               isPinned={isPinned}
               displayText={displayText}
-              gitOwner={gitOwner}
-              gitProvider={gitProvider}
+              projectIcon={
+                chat.isRemote
+                  ? {
+                      id: chat.id,
+                      name: repoName || chat.name || "Remote project",
+                      gitRepo: remoteRepoName,
+                    }
+                  : project
+                    ? {
+                        id: project.id,
+                        name: project.name,
+                        gitRepo: project.gitRepo,
+                        iconPath: project.iconPath,
+                        updatedAt: project.updatedAt,
+                      }
+                    : {
+                        id: chat.id,
+                        name: repoName || chat.name || "Local project",
+                      }
+              }
               stats={stats ?? undefined}
               selectedChatIdsSize={selectedChatIds.size}
               canShowPinOption={canShowPinOption}
@@ -3256,8 +3247,9 @@ export function AgentsSidebar({
                     draftId={draft.id}
                     draftText={draft.text}
                     draftUpdatedAt={draft.updatedAt}
-                    projectGitOwner={draft.project?.gitOwner}
-                    projectGitProvider={draft.project?.gitProvider}
+                    projectId={draft.project?.id}
+                    projectIconPath={draft.project?.iconPath}
+                    projectUpdatedAt={draft.project?.updatedAt}
                     projectGitRepo={draft.project?.gitRepo}
                     projectName={draft.project?.name}
                     isSelected={selectedDraftId === draft.id && !selectedChatId}
diff --git a/src/renderer/lib/hooks/use-project-icon.ts b/src/renderer/lib/hooks/use-project-icon.ts
index 3201e40ca..351962fcb 100644
--- a/src/renderer/lib/hooks/use-project-icon.ts
+++ b/src/renderer/lib/hooks/use-project-icon.ts
@@ -1,70 +1,81 @@
-import { useState, useEffect } from "react"
+import { useEffect, useState } from "react"
+import { trpcClient } from "../trpc"
 
-// Module-level cache for local file icons: projectId → blob URL
+// Module-level cache for local file icons: cache key -> data URL
 const fileIconCache = new Map<string, string>()
 // Deduplicate concurrent fetches
 const pendingFetches = new Map<string, Promise<string | null>>()
 
-async function fetchFileIcon(projectId: string, fileUrl: string): Promise<string | null> {
-  const cached = fileIconCache.get(projectId)
+async function fetchFileIcon(
+  cacheKey: string,
+  filePath: string,
+): Promise<string | null> {
+  const cached = fileIconCache.get(cacheKey)
   if (cached) return cached
 
-  const pending = pendingFetches.get(projectId)
+  const pending = pendingFetches.get(cacheKey)
   if (pending) return pending
 
   const promise = (async () => {
     try {
-      const res = await fetch(fileUrl)
-      if (!res.ok) return null
-      const blob = await res.blob()
-      const blobUrl = URL.createObjectURL(blob)
-      fileIconCache.set(projectId, blobUrl)
-      return blobUrl
+      const result = await trpcClient.files.readBinaryFile.query({ filePath })
+      if (!result.ok) return null
+
+      const dataUrl = `data:${result.mimeType};base64,${result.data}`
+      fileIconCache.set(cacheKey, dataUrl)
+      return dataUrl
     } catch {
       return null
     } finally {
-      pendingFetches.delete(projectId)
+      pendingFetches.delete(cacheKey)
     }
   })()
 
-  pendingFetches.set(projectId, promise)
+  pendingFetches.set(cacheKey, promise)
   return promise
 }
 
 /**
  * Invalidate a project's cached icon (call after upload/remove).
- * Revokes the blob URL and removes the cache entry so the hook re-fetches.
+ * Removes all cached icon variants for that project so the hook re-fetches.
  */
 export function invalidateProjectIcon(projectId: string) {
-  const cached = fileIconCache.get(projectId)
-  if (cached) {
-    URL.revokeObjectURL(cached)
-    fileIconCache.delete(projectId)
+  const cachePrefix = `${projectId}:`
+
+  for (const key of fileIconCache.keys()) {
+    if (key === projectId || key.startsWith(cachePrefix)) {
+      fileIconCache.delete(key)
+    }
+  }
+
+  for (const key of pendingFetches.keys()) {
+    if (key === projectId || key.startsWith(cachePrefix)) {
+      pendingFetches.delete(key)
+    }
   }
 }
 
 interface ProjectIconData {
-  id: string
+  id?: string | null
   iconPath?: string | null
   updatedAt?: string | Date | null
-  gitOwner?: string | null
-  gitProvider?: string | null
 }
 
 interface UseProjectIconResult {
-  /** URL to use as img src — blob URL for local icons, direct URL for GitHub avatars */
+  /** URL to use as img src for a custom local icon */
   src: string | null
   isLoading: boolean
   hasError: boolean
 }
 
 /**
- * Hook that returns a URL for a project's icon.
- * - Custom local icons: fetched once and cached as blob URLs (avoids re-reading file)
- * - GitHub avatars: returns direct URL (browser <img> handles caching, no CSP issue)
+ * Hook that returns a URL for a project's custom icon.
+ * - Custom local icons: fetched once and cached as data URLs
  * - No icon: returns null
  */
-export function useProjectIcon(project: ProjectIconData | null | undefined): UseProjectIconResult {
+export function useProjectIcon(
+  project: ProjectIconData | null | undefined,
+): UseProjectIconResult {
   const [src, setSrc] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(false)
   const [hasError, setHasError] = useState(false)
@@ -80,8 +91,12 @@ export function useProjectIcon(project: ProjectIconData | null | undefined): Use
     let cancelled = false
 
     if (project.iconPath) {
-      // Local file icon — fetch and cache as blob URL
-      const cached = fileIconCache.get(project.id)
+      const cacheKey = [
+        project.id ?? project.iconPath,
+        project.iconPath,
+        project.updatedAt ? String(project.updatedAt) : "",
+      ].join(":")
+      const cached = fileIconCache.get(cacheKey)
       if (cached) {
         setSrc(cached)
         setIsLoading(false)
@@ -91,12 +106,12 @@ export function useProjectIcon(project: ProjectIconData | null | undefined): Use
 
       setIsLoading(true)
       setHasError(false)
+      setSrc(null)
 
-      const fileUrl = `file://${project.iconPath}?t=${project.updatedAt}`
-      fetchFileIcon(project.id, fileUrl).then((blobUrl) => {
+      fetchFileIcon(cacheKey, project.iconPath).then((iconSrc) => {
         if (cancelled) return
-        if (blobUrl) {
-          setSrc(blobUrl)
+        if (iconSrc) {
+          setSrc(iconSrc)
           setHasError(false)
         } else {
           setSrc(null)
@@ -104,11 +119,6 @@ export function useProjectIcon(project: ProjectIconData | null | undefined): Use
         }
         setIsLoading(false)
       })
-    } else if (project.gitOwner && project.gitProvider === "github") {
-      // GitHub avatar — return direct URL, <img> handles loading/caching
-      setSrc(`https://github.com/${project.gitOwner}.png?size=64`)
-      setIsLoading(false)
-      setHasError(false)
     } else {
       setSrc(null)
       setIsLoading(false)
@@ -118,7 +128,7 @@ export function useProjectIcon(project: ProjectIconData | null | undefined): Use
     return () => {
       cancelled = true
     }
-  }, [project?.id, project?.iconPath, project?.updatedAt, project?.gitOwner, project?.gitProvider])
+  }, [project?.id, project?.iconPath, project?.updatedAt])
 
   return { src, isLoading, hasError }
 }