diff --git a/agentex-ui/app/agentex-ui-root.tsx b/agentex-ui/app/agentex-ui-root.tsx
new file mode 100644
index 00000000..18b45799
--- /dev/null
+++ b/agentex-ui/app/agentex-ui-root.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { Suspense, useCallback, useEffect, useState } from 'react';
+
+import { ToastContainer } from 'react-toastify';
+
+import { TaskSidebar } from '@/components/agentex/task-sidebar';
+import { TracesSidebar } from '@/components/agentex/traces-sidebar';
+import { AgentexProvider } from '@/components/providers';
+import { QueryProvider } from '@/components/providers/query-provider';
+import { useLocalStorageState } from '@/hooks/use-local-storage-state';
+import {
+  SearchParamKey,
+  useSafeSearchParams,
+} from '@/hooks/use-safe-search-params';
+
+import { PrimaryContent } from './primary-content';
+
+type AgentexUIRootProps = {
+  sgpAppURL: string;
+  agentexAPIBaseURL: string;
+};
+
+export function AgentexUIRoot({
+  sgpAppURL,
+  agentexAPIBaseURL,
+}: AgentexUIRootProps) {
+  const { agentName, updateParams } = useSafeSearchParams();
+  const [isTracesSidebarOpen, setIsTracesSidebarOpen] = useState(false);
+  const [localAgentName] = useLocalStorageState<string | undefined>(
+    'lastSelectedAgent',
+    undefined
+  );
+
+  useEffect(() => {
+    if (!agentName && localAgentName) {
+      updateParams({ [SearchParamKey.AGENT_NAME]: localAgentName });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSelectTask = useCallback(
+    (taskId: string | null) => {
+      updateParams({
+        [SearchParamKey.TASK_ID]: taskId,
+      });
+    },
+    [updateParams]
+  );
+
+  // Global keyboard shortcut: cmd + k for new chat
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+        event.preventDefault();
+        handleSelectTask(null);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleSelectTask]);
+
+  return (
+    <QueryProvider>
+      <AgentexProvider
+        sgpAppURL={sgpAppURL ?? ''}
+        agentexAPIBaseURL={agentexAPIBaseURL}
+      >
+        <Suspense fallback={<div>Loading...</div>}>
+          <div className="fixed inset-0 flex w-full">
+            <TaskSidebar />
+            <PrimaryContent
+              isTracesSidebarOpen={isTracesSidebarOpen}
+              toggleTracesSidebar={() =>
+                setIsTracesSidebarOpen(!isTracesSidebarOpen)
+              }
+            />
+            <TracesSidebar isOpen={isTracesSidebarOpen} />
+          </div>
+        </Suspense>
+      </AgentexProvider>
+      <ToastContainer />
+    </QueryProvider>
+  );
+}
diff --git a/agentex-ui/app/chat-view.tsx b/agentex-ui/app/chat-view.tsx
new file mode 100644
index 00000000..8aa928cd
--- /dev/null
+++ b/agentex-ui/app/chat-view.tsx
@@ -0,0 +1,30 @@
+import { useRef } from 'react';
+
+import { motion } from 'framer-motion';
+
+import { MemoizedTaskMessagesComponent } from '@/components/agentex/task-messages';
+import { TaskProvider } from '@/components/providers';
+
+export function ChatView({ taskID }: { taskID: string }) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <motion.div
+      key="chat-view"
+      layout
+      ref={scrollContainerRef}
+      className="relative flex-1 overflow-y-auto"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.25, ease: 'easeInOut' }}
+    >
+      <div className="flex min-h-full w-full flex-col items-center px-4 sm:px-6 md:px-8">
+        <div className="w-full max-w-3xl">
+          <TaskProvider taskId={taskID}>
+            <MemoizedTaskMessagesComponent taskId={taskID} />
+          </TaskProvider>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/agentex-ui/app/home-view.tsx b/agentex-ui/app/home-view.tsx
new file mode 100644
index 00000000..ad9d92e9
--- /dev/null
+++ b/agentex-ui/app/home-view.tsx
@@ -0,0 +1,46 @@
+import { motion } from 'framer-motion';
+
+import { AgentsList } from '@/components/agentex/agents-list';
+import { useAgentexClient } from '@/components/providers/agentex-provider';
+import { useAgents } from '@/hooks/use-agents';
+import { useLocalStorageState } from '@/hooks/use-local-storage-state';
+import {
+  SearchParamKey,
+  useSafeSearchParams,
+} from '@/hooks/use-safe-search-params';
+
+export function HomeView() {
+  const { agentName, updateParams } = useSafeSearchParams();
+  const { agentexClient } = useAgentexClient();
+  const { data: agents = [], isLoading } = useAgents(agentexClient);
+  const [, setLocalAgentName] = useLocalStorageState<string | undefined>(
+    'lastSelectedAgent',
+    undefined
+  );
+
+  return (
+    <motion.div
+      key="home-view"
+      className="flex items-center justify-center"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.25, ease: 'easeInOut' }}
+    >
+      <div className="flex flex-col items-center justify-center px-4">
+        <div className="mb-6 text-2xl font-bold">Agentex</div>
+        <AgentsList agents={agents} isLoading={isLoading} />
+        <button
+          onClick={() => {
+            updateParams({ [SearchParamKey.AGENT_NAME]: null });
+            setLocalAgentName(undefined);
+          }}
+          className={`text-muted-foreground cursor-pointer text-xs transition-opacity duration-200 hover:underline ${
+            agentName ? 'opacity-100' : 'pointer-events-none opacity-0'
+          }`}
+        >
+          view all agents
+        </button>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/agentex-ui/app/main-content.tsx b/agentex-ui/app/main-content.tsx
deleted file mode 100644
index 38abd435..00000000
--- a/agentex-ui/app/main-content.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-'use client';
-
-import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
-
-import { AnimatePresence, motion } from 'framer-motion';
-import { ArrowDown } from 'lucide-react';
-import { ToastContainer } from 'react-toastify';
-
-import { AgentsList } from '@/components/agentex/agents-list';
-import { IconButton } from '@/components/agentex/icon-button';
-import { PromptInput } from '@/components/agentex/prompt-input';
-import { MemoizedTaskMessagesComponent } from '@/components/agentex/task-messages';
-import { TaskSidebar } from '@/components/agentex/task-sidebar';
-import { TaskTopBar } from '@/components/agentex/task-top-bar';
-import { TracesSidebar } from '@/components/agentex/traces-sidebar';
-import {
-  AgentexProvider,
-  TaskProvider,
-  useAgentexClient,
-} from '@/components/providers';
-import { QueryProvider } from '@/components/providers/query-provider';
-import { useAgents } from '@/hooks/use-agents';
-import { useLocalStorageState } from '@/hooks/use-local-storage-state';
-import {
-  SearchParamKey,
-  useSafeSearchParams,
-} from '@/hooks/use-safe-search-params';
-
-function NoAgentImpl() {
-  const { taskID, agentName, updateParams } = useSafeSearchParams();
-  const [isTracesSidebarOpen, setIsTracesSidebarOpen] = useState(false);
-  const [localAgentName] = useLocalStorageState<string | undefined>(
-    'lastSelectedAgent',
-    undefined
-  );
-
-  const selectedAgentName = agentName ?? localAgentName;
-
-  const handleSelectTask = useCallback(
-    (taskId: string | null) => {
-      updateParams({
-        [SearchParamKey.TASK_ID]: taskId,
-      });
-    },
-    [updateParams]
-  );
-
-  // Global keyboard shortcut: cmd + k for new chat
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
-        event.preventDefault();
-        handleSelectTask(null);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [handleSelectTask]);
-
-  return (
-    <div className="fixed inset-0 flex w-full">
-      <AnimatePresence>
-        {
-          <motion.div
-            key="task-sidebar"
-            initial={{ opacity: 0, x: -20, width: 0 }}
-            animate={{ opacity: 1, x: 0, width: 'auto' }}
-            exit={{ opacity: 0, x: -20, width: 0 }}
-            transition={{ duration: 0.25, ease: 'easeInOut' }}
-          >
-            <TaskSidebar
-              selectedTaskID={taskID}
-              selectedAgentName={selectedAgentName ?? ''}
-              onSelectTask={handleSelectTask}
-            />
-          </motion.div>
-        }
-      </AnimatePresence>
-      <ContentArea
-        taskID={taskID}
-        isTracesSidebarOpen={isTracesSidebarOpen}
-        toggleTracesSidebar={() => setIsTracesSidebarOpen(!isTracesSidebarOpen)}
-      />
-      <AnimatePresence>
-        {taskID && (
-          <motion.div
-            key="traces-sidebar"
-            initial={{ opacity: 0, x: 20, width: 0 }}
-            animate={{ opacity: 1, x: 0, width: 'auto' }}
-            exit={{ opacity: 0, x: 20, width: 0 }}
-            transition={{ duration: 0.25, ease: 'easeInOut' }}
-          >
-            <TracesSidebar isOpen={isTracesSidebarOpen} taskId={taskID} />
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
-
-interface ContentAreaProps {
-  taskID: string | null;
-  isTracesSidebarOpen: boolean;
-  toggleTracesSidebar: () => void;
-}
-
-function ContentArea({
-  taskID,
-  isTracesSidebarOpen,
-  toggleTracesSidebar,
-}: ContentAreaProps) {
-  const { agentexClient } = useAgentexClient();
-  const { data: agents = [], isLoading } = useAgents(agentexClient);
-  const { agentName, updateParams } = useSafeSearchParams();
-  const [prompt, setPrompt] = useState<string>('');
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const [showScrollButton, setShowScrollButton] = useState(false);
-  const [localAgentName, setLocalAgentName] = useLocalStorageState<
-    string | undefined
-  >('lastSelectedAgent', undefined);
-
-  useEffect(() => {
-    if (!isLoading) {
-      if (!agentName && localAgentName) {
-        updateParams({ [SearchParamKey.AGENT_NAME]: localAgentName });
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading]);
-
-  const handleSelectAgent = useCallback(
-    (agentName: string | undefined) => {
-      updateParams({
-        [SearchParamKey.AGENT_NAME]: agentName ?? null,
-        [SearchParamKey.TASK_ID]: null,
-      });
-      setPrompt('');
-    },
-    [updateParams, setPrompt]
-  );
-
-  // Scroll detection - track if user is near bottom
-  useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (!container) {
-      setShowScrollButton(false);
-      return;
-    }
-
-    const handleScroll = () => {
-      const { scrollTop, scrollHeight, clientHeight } = container;
-      const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-
-      const scrollThreshold = 100; // pixels from bottom
-      const isNearBottom = distanceFromBottom < scrollThreshold;
-
-      setShowScrollButton(!isNearBottom);
-    };
-
-    container.addEventListener('scroll', handleScroll);
-    return () => container.removeEventListener('scroll', handleScroll);
-  }, [taskID]);
-
-  const scrollToBottom = useCallback(() => {
-    if (!scrollContainerRef.current) return;
-    scrollContainerRef.current.scrollTo({
-      top: scrollContainerRef.current.scrollHeight,
-      behavior: 'smooth',
-    });
-  }, [scrollContainerRef]);
-
-  useEffect(() => {
-    if (scrollContainerRef.current && taskID) {
-      setTimeout(() => {
-        scrollToBottom();
-      }, 150);
-    }
-  }, [scrollToBottom, taskID]);
-
-  return (
-    <AnimatePresence>
-      <motion.div
-        layout
-        className={`relative flex h-full flex-1 flex-col ${!taskID ? 'justify-center' : 'justify-between'}`}
-        transition={{ duration: 0.25, ease: 'easeInOut' }}
-      >
-        {taskID && agentName && (
-          <motion.div
-            key="topbar"
-            initial={{ opacity: 0, y: -20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.25, ease: 'easeInOut' }}
-          >
-            <TaskTopBar
-              taskId={taskID}
-              isTracesSidebarOpen={isTracesSidebarOpen}
-              toggleTracesSidebar={toggleTracesSidebar}
-              agents={agents}
-              onAgentChange={handleSelectAgent}
-            />
-          </motion.div>
-        )}
-
-        {taskID ? (
-          <motion.div
-            key="chat-view"
-            layout
-            ref={scrollContainerRef}
-            className="relative flex-1 overflow-y-auto"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.25, ease: 'easeInOut' }}
-          >
-            <div className="flex min-h-full w-full flex-col items-center px-4 sm:px-6 md:px-8">
-              <div className="w-full max-w-3xl">
-                <TaskProvider taskId={taskID}>
-                  <MemoizedTaskMessagesComponent taskId={taskID} />
-                </TaskProvider>
-              </div>
-            </div>
-          </motion.div>
-        ) : (
-          <motion.div
-            key="home-view"
-            className="flex items-center justify-center"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.25, ease: 'easeInOut' }}
-          >
-            <div className="flex flex-col items-center justify-center px-4">
-              <div className="mb-6 text-2xl font-bold">Agentex</div>
-              <AgentsList agents={agents} isLoading={isLoading} />
-              <button
-                onClick={() => {
-                  updateParams({ [SearchParamKey.AGENT_NAME]: null });
-                  setLocalAgentName(undefined);
-                }}
-                className={`text-muted-foreground cursor-pointer text-xs transition-opacity duration-200 hover:underline ${
-                  agentName ? 'opacity-100' : 'pointer-events-none opacity-0'
-                }`}
-              >
-                view all agents
-              </button>
-            </div>
-          </motion.div>
-        )}
-
-        <motion.div
-          layout="position"
-          className="relative flex w-full justify-center px-4 py-4 sm:px-6 md:px-8"
-          transition={{
-            layout: {
-              type: 'spring',
-              damping: 40,
-              stiffness: 300,
-              mass: 0.8,
-            },
-          }}
-        >
-          {taskID && (
-            <AnimatePresence>
-              {showScrollButton && (
-                <motion.div
-                  className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-4 -translate-x-1/2"
-                  initial={{ y: 30, opacity: 0 }}
-                  animate={{ y: 0, opacity: 1 }}
-                  exit={{ y: 30, opacity: 0 }}
-                  transition={{
-                    duration: 0.2,
-                    type: 'spring',
-                    stiffness: 300,
-                    damping: 35,
-                    mass: 0.8,
-                  }}
-                >
-                  <IconButton
-                    className="pointer-events-auto size-10 rounded-full shadow-lg"
-                    onClick={scrollToBottom}
-                    icon={ArrowDown}
-                  />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-
-          <div className="w-full max-w-3xl">
-            <PromptInput prompt={prompt} setPrompt={setPrompt} />
-          </div>
-        </motion.div>
-      </motion.div>
-    </AnimatePresence>
-  );
-}
-
-type Props = {
-  sgpAppURL: string;
-  agentexAPIBaseURL: string;
-};
-
-export function MainContent({ sgpAppURL, agentexAPIBaseURL }: Props) {
-  return (
-    <QueryProvider>
-      <AgentexProvider
-        sgpAppURL={sgpAppURL ?? ''}
-        agentexAPIBaseURL={agentexAPIBaseURL}
-      >
-        <Suspense fallback={<div>Loading...</div>}>
-          <NoAgentImpl />
-        </Suspense>
-      </AgentexProvider>
-      <ToastContainer />
-    </QueryProvider>
-  );
-}
diff --git a/agentex-ui/app/page.tsx b/agentex-ui/app/page.tsx
index f2b4f7e4..7b0363aa 100644
--- a/agentex-ui/app/page.tsx
+++ b/agentex-ui/app/page.tsx
@@ -1,6 +1,6 @@
 import { connection } from 'next/server';
 
-import { MainContent } from './main-content';
+import { AgentexUIRoot } from './agentex-ui-root';
 
 export default async function RootPage() {
   await connection();
@@ -19,6 +19,9 @@ export default async function RootPage() {
   }
 
   return (
-    <MainContent sgpAppURL={sgpAppURL} agentexAPIBaseURL={agentexAPIBaseURL} />
+    <AgentexUIRoot
+      sgpAppURL={sgpAppURL}
+      agentexAPIBaseURL={agentexAPIBaseURL}
+    />
   );
 }
diff --git a/agentex-ui/app/primary-content.tsx b/agentex-ui/app/primary-content.tsx
new file mode 100644
index 00000000..32f2d2ee
--- /dev/null
+++ b/agentex-ui/app/primary-content.tsx
@@ -0,0 +1,154 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { ArrowDown } from 'lucide-react';
+
+import { IconButton } from '@/components/agentex/icon-button';
+import { PromptInput } from '@/components/agentex/prompt-input';
+import { TaskTopBar } from '@/components/agentex/task-top-bar';
+import { useAgentexClient } from '@/components/providers';
+import { useAgents } from '@/hooks/use-agents';
+import {
+  useSafeSearchParams,
+  SearchParamKey,
+} from '@/hooks/use-safe-search-params';
+
+import { ChatView } from './chat-view';
+import { HomeView } from './home-view';
+
+interface ContentAreaProps {
+  isTracesSidebarOpen: boolean;
+  toggleTracesSidebar: () => void;
+}
+
+export function PrimaryContent({
+  isTracesSidebarOpen,
+  toggleTracesSidebar,
+}: ContentAreaProps) {
+  const { taskID } = useSafeSearchParams();
+  const { agentexClient } = useAgentexClient();
+  const { data: agents = [] } = useAgents(agentexClient);
+  const { agentName, updateParams } = useSafeSearchParams();
+  const [prompt, setPrompt] = useState<string>('');
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+
+  const handleSelectAgent = useCallback(
+    (agentName: string | undefined) => {
+      updateParams({
+        [SearchParamKey.AGENT_NAME]: agentName ?? null,
+        [SearchParamKey.TASK_ID]: null,
+      });
+      setPrompt('');
+    },
+    [updateParams, setPrompt]
+  );
+
+  // Scroll detection - track if user is near bottom
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      setShowScrollButton(false);
+      return;
+    }
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+
+      const scrollThreshold = 100; // pixels from bottom
+      const isNearBottom = distanceFromBottom < scrollThreshold;
+
+      setShowScrollButton(!isNearBottom);
+    };
+
+    container.addEventListener('scroll', handleScroll);
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, [taskID]);
+
+  const scrollToBottom = useCallback(() => {
+    if (!scrollContainerRef.current) return;
+    scrollContainerRef.current.scrollTo({
+      top: scrollContainerRef.current.scrollHeight,
+      behavior: 'smooth',
+    });
+  }, [scrollContainerRef]);
+
+  useEffect(() => {
+    if (scrollContainerRef.current && taskID) {
+      setTimeout(() => {
+        scrollToBottom();
+      }, 150);
+    }
+  }, [scrollToBottom, taskID]);
+
+  return (
+    <motion.div
+      layout
+      className={`relative flex h-full flex-1 flex-col ${!taskID ? 'justify-center' : 'justify-between'}`}
+      transition={{ duration: 0.25, ease: 'easeInOut' }}
+    >
+      {taskID && agentName && (
+        <motion.div
+          key="topbar"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.25, ease: 'easeInOut' }}
+        >
+          <TaskTopBar
+            taskId={taskID}
+            isTracesSidebarOpen={isTracesSidebarOpen}
+            toggleTracesSidebar={toggleTracesSidebar}
+            agents={agents}
+            onAgentChange={handleSelectAgent}
+          />
+        </motion.div>
+      )}
+
+      {taskID ? <ChatView taskID={taskID} /> : <HomeView />}
+
+      <motion.div
+        layout="position"
+        className="relative flex w-full justify-center px-4 py-4 sm:px-6 md:px-8"
+        transition={{
+          layout: {
+            type: 'spring',
+            damping: 40,
+            stiffness: 300,
+            mass: 0.8,
+          },
+        }}
+      >
+        {taskID && (
+          <AnimatePresence>
+            {showScrollButton && (
+              <motion.div
+                className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-4 -translate-x-1/2"
+                initial={{ y: 30, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                exit={{ y: 30, opacity: 0 }}
+                transition={{
+                  duration: 0.2,
+                  type: 'spring',
+                  stiffness: 300,
+                  damping: 35,
+                  mass: 0.8,
+                }}
+              >
+                <IconButton
+                  className="pointer-events-auto size-10 rounded-full shadow-lg"
+                  onClick={scrollToBottom}
+                  icon={ArrowDown}
+                />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        )}
+
+        <div className="w-full max-w-3xl">
+          <PromptInput prompt={prompt} setPrompt={setPrompt} />
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}
diff --git a/agentex-ui/components/agentex/task-sidebar.tsx b/agentex-ui/components/agentex/task-sidebar.tsx
index ad273613..8a2aed4e 100644
--- a/agentex-ui/components/agentex/task-sidebar.tsx
+++ b/agentex-ui/components/agentex/task-sidebar.tsx
@@ -19,6 +19,10 @@ import { useAgentexClient } from '@/components/providers';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { Skeleton } from '@/components/ui/skeleton';
+import {
+  SearchParamKey,
+  useSafeSearchParams,
+} from '@/hooks/use-safe-search-params';
 import { useInfiniteTasks } from '@/hooks/use-tasks';
 import { cn } from '@/lib/utils';
 
@@ -26,14 +30,21 @@ import type { TaskListResponse } from 'agentex/resources';
 
 type TaskButtonProps = {
   task: TaskListResponse.TaskListResponseItem;
-  selectedTaskID: TaskListResponse.TaskListResponseItem['id'] | null;
-  selectTask: (
-    taskID: TaskListResponse.TaskListResponseItem['id'] | null
-  ) => void;
 };
 
-function TaskButton({ task, selectedTaskID, selectTask }: TaskButtonProps) {
+function TaskButton({ task }: TaskButtonProps) {
+  const { taskID, updateParams } = useSafeSearchParams();
   const taskName = createTaskName(task);
+
+  const handleTaskSelect = useCallback(
+    (taskID: TaskListResponse.TaskListResponseItem['id']) => {
+      updateParams({
+        [SearchParamKey.TASK_ID]: taskID,
+      });
+    },
+    [updateParams]
+  );
+
   const createdAtString = useMemo(
     () =>
       task.created_at
@@ -80,14 +91,14 @@ function TaskButton({ task, selectedTaskID, selectTask }: TaskButtonProps) {
       <Button
         variant="ghost"
         className={`hover:bg-sidebar-accent hover:text-sidebar-primary-foreground flex h-auto w-full cursor-pointer flex-col items-start justify-start gap-1 px-2 py-2 text-left transition-colors ${
-          selectedTaskID === task.id
+          taskID === task.id
             ? 'bg-sidebar-primary text-sidebar-primary-foreground'
             : 'text-sidebar-foreground'
         }`}
-        onClick={() => selectTask(task.id)}
+        onClick={() => handleTaskSelect(task.id)}
         onKeyDown={e => {
           if (e.key === 'Enter' || e.key === ' ') {
-            selectTask(task.id);
+            handleTaskSelect(task.id);
           }
         }}
       >
@@ -109,19 +120,8 @@ function TaskButton({ task, selectedTaskID, selectTask }: TaskButtonProps) {
   );
 }
 
-export type TaskSidebarProps = {
-  selectedTaskID: TaskListResponse.TaskListResponseItem['id'] | null;
-  selectedAgentName?: string;
-  onSelectTask: (
-    taskID: TaskListResponse.TaskListResponseItem['id'] | null
-  ) => void;
-};
-
-export function TaskSidebar({
-  selectedTaskID,
-  selectedAgentName,
-  onSelectTask,
-}: TaskSidebarProps) {
+export function TaskSidebar() {
+  const { agentName, updateParams } = useSafeSearchParams();
   const { agentexClient } = useAgentexClient();
 
   const {
@@ -132,7 +132,7 @@ export function TaskSidebar({
     isFetchingNextPage,
   } = useInfiniteTasks(
     agentexClient,
-    selectedAgentName ? { agentName: selectedAgentName } : undefined
+    agentName ? { agentName: agentName } : undefined
   );
 
   const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
@@ -162,16 +162,11 @@ export function TaskSidebar({
     return () => scrollContainer.removeEventListener('scroll', handleScroll);
   }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
 
-  const handleTaskSelect = useCallback(
-    (taskID: TaskListResponse.TaskListResponseItem['id'] | null) => {
-      onSelectTask(taskID);
-    },
-    [onSelectTask]
-  );
-
   const handleNewChat = useCallback(() => {
-    onSelectTask(null);
-  }, [onSelectTask]);
+    updateParams({
+      [SearchParamKey.TASK_ID]: null,
+    });
+  }, [updateParams]);
 
   const toggleCollapse = useCallback(() => {
     setIsCollapsed(prev => !prev);
@@ -223,14 +218,7 @@ export function TaskSidebar({
             <>
               <AnimatePresence initial={false}>
                 {tasks.length > 0 &&
-                  tasks.map(task => (
-                    <TaskButton
-                      key={task.id}
-                      task={task}
-                      selectedTaskID={selectedTaskID}
-                      selectTask={handleTaskSelect}
-                    />
-                  ))}
+                  tasks.map(task => <TaskButton key={task.id} task={task} />)}
               </AnimatePresence>
               {isFetchingNextPage && (
                 <div className="flex items-center justify-center py-4">
diff --git a/agentex-ui/components/agentex/traces-sidebar.tsx b/agentex-ui/components/agentex/traces-sidebar.tsx
index 011bbb65..732bb759 100644
--- a/agentex-ui/components/agentex/traces-sidebar.tsx
+++ b/agentex-ui/components/agentex/traces-sidebar.tsx
@@ -1,3 +1,5 @@
+import { AnimatePresence, motion } from 'framer-motion';
+
 import { JsonViewer } from '@/components/agentex/json-viewer';
 import { ResizableSidebar } from '@/components/agentex/resizable-sidebar';
 import {
@@ -6,6 +8,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import { useSafeSearchParams } from '@/hooks/use-safe-search-params';
 import { useSpans } from '@/hooks/use-spans';
 
 const MIN_SIDEBAR_WIDTH = 350;
@@ -13,85 +16,99 @@ const DEFAULT_SIDEBAR_WIDTH = 350;
 
 export type TracesSidebarProps = {
   isOpen: boolean;
-  taskId: string | null;
 };
 
-export function TracesSidebar({ isOpen, taskId }: TracesSidebarProps) {
-  const { spans, isLoading, error } = useSpans(taskId);
+export function TracesSidebar({ isOpen }: TracesSidebarProps) {
+  const { taskID } = useSafeSearchParams();
+  const { spans, isLoading, error } = useSpans(taskID);
 
   return (
-    <ResizableSidebar
-      side="right"
-      storageKey="tracesSidebarWidth"
-      defaultWidth={DEFAULT_SIDEBAR_WIDTH}
-      minWidth={MIN_SIDEBAR_WIDTH}
-      isCollapsed={!isOpen}
-      collapsedWidth={0}
-    >
-      <TooltipProvider>
-        <div className="flex h-full flex-col">
-          <div className="border-sidebar-border border-b px-4 py-4">
-            <h2 className="text-sidebar-foreground text-lg font-semibold">
-              Traces
-            </h2>
-            <p className="text-muted-foreground mt-1 text-sm">
-              Span details and execution data
-            </p>
-          </div>
+    <AnimatePresence>
+      {taskID && (
+        <motion.div
+          key="traces-sidebar"
+          initial={{ opacity: 0, x: 20, width: 0 }}
+          animate={{ opacity: 1, x: 0, width: 'auto' }}
+          exit={{ opacity: 0, x: 20, width: 0 }}
+          transition={{ duration: 0.25, ease: 'easeInOut' }}
+        >
+          <ResizableSidebar
+            side="right"
+            storageKey="tracesSidebarWidth"
+            defaultWidth={DEFAULT_SIDEBAR_WIDTH}
+            minWidth={MIN_SIDEBAR_WIDTH}
+            isCollapsed={!isOpen}
+            collapsedWidth={0}
+          >
+            <TooltipProvider>
+              <div className="flex h-full flex-col">
+                <div className="border-sidebar-border border-b px-4 py-4">
+                  <h2 className="text-sidebar-foreground text-lg font-semibold">
+                    Traces
+                  </h2>
+                  <p className="text-muted-foreground mt-1 text-sm">
+                    Span details and execution data
+                  </p>
+                </div>
 
-          <div className="flex-1 space-y-4 overflow-y-auto p-4">
-            {!taskId && (
-              <div className="text-muted-foreground text-sm">
-                Select a task to view traces
-              </div>
-            )}
+                <div className="flex-1 space-y-4 overflow-y-auto p-4">
+                  {!taskID && (
+                    <div className="text-muted-foreground text-sm">
+                      Select a task to view traces
+                    </div>
+                  )}
 
-            {isLoading && (
-              <div className="text-muted-foreground text-sm">
-                Loading traces...
-              </div>
-            )}
+                  {isLoading && (
+                    <div className="text-muted-foreground text-sm">
+                      Loading traces...
+                    </div>
+                  )}
 
-            {error && (
-              <div className="text-destructive text-sm">Error: {error}</div>
-            )}
+                  {error && (
+                    <div className="text-destructive text-sm">
+                      Error: {error}
+                    </div>
+                  )}
 
-            {spans.length === 0 && !isLoading && !error && taskId && (
-              <div className="text-muted-foreground text-sm">
-                No spans found for this task
-              </div>
-            )}
+                  {spans.length === 0 && !isLoading && !error && taskID && (
+                    <div className="text-muted-foreground text-sm">
+                      No spans found for this task
+                    </div>
+                  )}
 
-            {spans.map(span => {
-              const startTime = new Date(span.start_time);
+                  {spans.map(span => {
+                    const startTime = new Date(span.start_time);
 
-              return (
-                <div key={span.id}>
-                  <div className="mb-2 flex items-baseline gap-2">
-                    <h3 className="text-sidebar-foreground text-sm font-medium">
-                      {span.name}
-                    </h3>
-                    <Tooltip delayDuration={0}>
-                      <TooltipTrigger asChild>
-                        <span className="text-muted-foreground text-xs">
-                          {startTime.toLocaleTimeString()}
-                        </span>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        {startTime.toLocaleString()}
-                      </TooltipContent>
-                    </Tooltip>
-                  </div>
-                  <JsonViewer
-                    data={JSON.parse(JSON.stringify(span))}
-                    defaultExpanded={false}
-                  />
+                    return (
+                      <div key={span.id}>
+                        <div className="mb-2 flex items-baseline gap-2">
+                          <h3 className="text-sidebar-foreground text-sm font-medium">
+                            {span.name}
+                          </h3>
+                          <Tooltip delayDuration={0}>
+                            <TooltipTrigger asChild>
+                              <span className="text-muted-foreground text-xs">
+                                {startTime.toLocaleTimeString()}
+                              </span>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              {startTime.toLocaleString()}
+                            </TooltipContent>
+                          </Tooltip>
+                        </div>
+                        <JsonViewer
+                          data={JSON.parse(JSON.stringify(span))}
+                          defaultExpanded={false}
+                        />
+                      </div>
+                    );
+                  })}
                 </div>
-              );
-            })}
-          </div>
-        </div>
-      </TooltipProvider>
-    </ResizableSidebar>
+              </div>
+            </TooltipProvider>
+          </ResizableSidebar>
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 }
diff --git a/agentex-ui/hooks/use-create-task.ts b/agentex-ui/hooks/use-create-task.ts
index 44f4270c..3aaec492 100644
--- a/agentex-ui/hooks/use-create-task.ts
+++ b/agentex-ui/hooks/use-create-task.ts
@@ -16,7 +16,6 @@ import type { Task, TaskListResponse } from 'agentex/resources';
 
 type CreateTaskParams = {
   agentName: string;
-  name?: string;
   params?: Record<string, unknown>;
 };
 
@@ -33,7 +32,6 @@ export function useCreateTask({
   return useMutation({
     mutationFn: async ({
       agentName,
-      // name,
       params,
     }: CreateTaskParams): Promise<Task> => {
       const response = await agentRPCNonStreaming(
@@ -41,10 +39,6 @@ export function useCreateTask({
         { agentName },
         'task/create',
         {
-          // TODO: Theres a crazy backend error where if you create two tasks with teh same name, it
-          // returns the same task id for the second one rather than creating a new task.
-          // Uncomment this once that bug is fixed.
-          // name: name ?? null,
           params: params ?? {},
         }
       );