From e9c250ce7866caec840ce037b8091967be1a2495 Mon Sep 17 00:00:00 2001
From: Michael Sun <michael.sun@scale.com>
Date: Mon, 24 Nov 2025 18:30:15 -0500
Subject: [PATCH] better empty states

---
 .../components/agents-list/agents-list.tsx    | 39 +++++++++++++------
 .../task-sidebar/task-sidebar-body.tsx        | 23 ++++++++---
 2 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/agentex-ui/components/agents-list/agents-list.tsx b/agentex-ui/components/agents-list/agents-list.tsx
index c4b41cde..dde6a558 100644
--- a/agentex-ui/components/agents-list/agents-list.tsx
+++ b/agentex-ui/components/agents-list/agents-list.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useRef } from 'react';
 
+import Link from 'next/link';
+
 import { Agent } from 'agentex/resources';
 import { motion } from 'framer-motion';
 
@@ -25,24 +27,39 @@ export function AgentsList({ agents, isLoading = false }: AgentsListProps) {
     ? agents.filter(agent => agent.name === selectedAgentName)
     : agents;
 
+  if (isLoading) {
+    return (
+      <div className="mb-2 flex max-w-4xl flex-wrap items-center justify-center gap-2">
+        {[...Array(6)].map((_, i) => (
+          <Skeleton key={i} className="h-9.5 w-32 rounded-full" />
+        ))}
+      </div>
+    );
+  }
+
   return (
     <TooltipProvider delayDuration={200}>
       <motion.div
         className="mb-2 flex max-w-4xl flex-wrap items-center justify-center gap-2"
         layout={hasMounted.current}
       >
-        {isLoading ? (
-          <>
-            {[...Array(6)].map((_, i) => (
-              <Skeleton key={i} className="h-9.5 w-32 rounded-full" />
-            ))}
-          </>
+        {displayedAgents.length > 0 ? (
+          displayedAgents?.map(agent => (
+            <AgentBadge key={agent.name} agent={agent} />
+          ))
         ) : (
-          <>
-            {displayedAgents?.map(agent => (
-              <AgentBadge key={agent.name} agent={agent} />
-            ))}
-          </>
+          <div className="flex items-center justify-center">
+            <p className="text-muted-foreground text-xs">
+              {'No agents found. '}
+              <Link
+                href="https://github.com/scaleapi/scale-agentex#getting-started"
+                target="_blank"
+                className="decoration-muted-foreground/50 hover:decoration-foreground underline underline-offset-2 transition-colors"
+              >
+                {'Learn how to create one'}
+              </Link>
+            </p>
+          </div>
         )}
       </motion.div>
     </TooltipProvider>
diff --git a/agentex-ui/components/task-sidebar/task-sidebar-body.tsx b/agentex-ui/components/task-sidebar/task-sidebar-body.tsx
index a9871ba9..3e107cf2 100644
--- a/agentex-ui/components/task-sidebar/task-sidebar-body.tsx
+++ b/agentex-ui/components/task-sidebar/task-sidebar-body.tsx
@@ -70,13 +70,24 @@ export const TaskSidebarBody = ({ className }: TaskSidebarBodyProps) => {
 
   return (
     <div ref={scrollContainerRef} className={bodyClassName}>
-      <AnimatePresence initial={false}>
-        {tasks.length > 0 &&
-          tasks.map(task => <TaskButton key={task.id} task={task} />)}
-      </AnimatePresence>
-      {isFetchingNextPage && (
+      {tasks.length > 0 ? (
+        <>
+          <AnimatePresence initial={false}>
+            {tasks.map(task => (
+              <TaskButton key={task.id} task={task} />
+            ))}
+          </AnimatePresence>
+          {isFetchingNextPage && (
+            <div className="flex items-center justify-center py-4">
+              <Loader2 className="text-muted-foreground size-5 animate-spin" />
+            </div>
+          )}
+        </>
+      ) : (
         <div className="flex items-center justify-center py-4">
-          <Loader2 className="text-muted-foreground size-5 animate-spin" />
+          <p className="text-muted-foreground text-xs">
+            No tasks. Start a chat to create one.
+          </p>
         </div>
       )}
     </div>