ui: use icons in fe

frontend/src/components/sidebar/nav-agents.tsx

@@ -14,6 +14,7 @@ import {
   Check,
   History
 } from "lucide-react"
+import { ThreadIcon } from "./thread-icon"
 import { toast } from "sonner"
 import { usePathname, useRouter } from "next/navigation"
 
@@ -108,7 +109,13 @@ const ThreadItem: React.FC<{
           >
             {isThreadLoading ? (
               <Loader2 className="h-4 w-4 animate-spin mr-2 flex-shrink-0" />
-            ) : null}
+            ) : (
+              <ThreadIcon 
+                iconName={thread.iconName} 
+                className="mr-2" 
+                size={16} 
+              />
+            )}
             <span className="truncate">{thread.projectName}</span>
           </Link>
           

frontend/src/components/sidebar/thread-icon.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { DynamicIcon } from 'lucide-react/dynamic';
+import { MessageSquareMore } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ThreadIconProps {
+  iconName?: string | null;
+  className?: string;
+  size?: number;
+}
+
+export function ThreadIcon({
+  iconName,
+  className,
+  size = 16
+}: ThreadIconProps) {
+  // If no icon name is provided, use MessageSquareMore as fallback
+  if (!iconName) {
+    return (
+      <MessageSquareMore 
+        className={cn("shrink-0", className)} 
+        size={size}
+      />
+    );
+  }
+
+  // Use DynamicIcon for lucide-react icons
+  return (
+    <DynamicIcon 
+      name={iconName as any} 
+      size={size} 
+      className={cn("shrink-0", className)}
+    />
+  );
+}

frontend/src/hooks/react-query/sidebar/use-sidebar.ts

@@ -87,6 +87,8 @@ export type ThreadWithProject = {
   projectName: string;
   url: string;
   updatedAt: string;
+  // Icon system field for thread categorization
+  iconName?: string | null;
 };
 
 export const processThreadsWithProjects = (
@@ -108,7 +110,11 @@ export const processThreadsWithProjects = (
     if (!project) {
       continue;
     }
+    // Use dedicated icon_name field from backend
     let displayName = project.name || 'Unnamed Project';
+    const iconName = project.icon_name; // Get icon from dedicated database field
+    
+    // Override display name for workflow threads
     if (thread.metadata?.is_workflow_execution && thread.metadata?.workflow_run_name) {
       displayName = thread.metadata.workflow_run_name;
     }
@@ -120,6 +126,8 @@ export const processThreadsWithProjects = (
       url: `/projects/${projectId}/thread/${thread.thread_id}`,
       updatedAt:
         thread.updated_at || project.updated_at || new Date().toISOString(),
+      // Use dedicated field or parsed embedded data
+      iconName: iconName,
     });
   }
 

frontend/src/lib/api.ts

@@ -185,6 +185,8 @@ export type Project = {
     pass?: string;
   };
   is_public?: boolean; // Flag to indicate if the project is public
+  // Icon system field for thread categorization
+  icon_name?: string | null;
   [key: string]: any; // Allow additional properties to handle database fields
 };
 
@@ -354,6 +356,8 @@ export const getProjects = async (): Promise<Project[]> => {
         vnc_preview: '',
         sandbox_url: '',
       },
+      // Include icon field for thread categorization
+      icon_name: project.icon_name,
     }));
 
     return mappedProjects;