feat(agent):Supports custom agent and chat experience with refactoring (#957)

* feat: add agent management functionality with creation, editing, and deletion

* feat: enhance agent creation and chat experience

- Added AgentWelcome component to display agent description on new thread creation.
- Improved agent name validation with availability check during agent creation.
- Updated NewAgentPage to handle agent creation flow more effectively, including enhanced error handling and user feedback.
- Refactored chat components to streamline message handling and improve user experience.
- Introduced new bootstrap skill for personalized onboarding conversations, including detailed conversation phases and a structured SOUL.md template.
- Updated localization files to reflect new features and error messages.
- General code cleanup and optimizations across various components and hooks.

* Refactor workspace layout and agent management components

- Updated WorkspaceLayout to use useLayoutEffect for sidebar state initialization.
- Removed unused AgentFormDialog and related edit functionality from AgentCard.
- Introduced ArtifactTrigger component to manage artifact visibility.
- Enhanced ChatBox to handle artifact selection and display.
- Improved message list rendering logic to avoid loading states.
- Updated localization files to remove deprecated keys and add new translations.
- Refined hooks for local settings and thread management to improve performance and clarity.
- Added temporal awareness guidelines to deep research skill documentation.

* feat: refactor chat components and introduce thread management hooks

* feat: improve artifact file detail preview logic and clean up console logs

* feat: refactor lead agent creation logic and improve logging details

* feat: validate agent name format and enhance error handling in agent setup

* feat: simplify thread search query by removing unnecessary metadata

* feat: update query key in useDeleteThread and useRenameThread for consistency

* feat: add isMock parameter to thread and artifact handling for improved testing

* fix: reorder import of setup_agent for consistency in builtins module

* feat: append mock parameter to thread links in CaseStudySection for testing purposes

* fix: update load_agent_soul calls to use cfg.name for improved clarity

* fix: update date format in apply_prompt_template for consistency

* feat: integrate isMock parameter into artifact content loading for enhanced testing

* docs: add license section to SKILL.md for clarity and attribution

* feat(agent): enhance model resolution and agent configuration handling

* chore: remove unused import of _resolve_model_name from agents

* feat(agent): remove unused field

* fix(agent): set default value for requested_model_name in _resolve_model_name function

* feat(agent): update get_available_tools call to handle optional agent_config and improve middleware function signature

---------

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>

frontend/src/components/landing/sections/case-study-section.tsx

@@ -55,7 +55,7 @@ export function CaseStudySection({ className }: { className?: string }) {
         {caseStudies.map((caseStudy) => (
           <Link
             key={caseStudy.title}
-            href={pathOfThread(caseStudy.threadId)}
+            href={pathOfThread(caseStudy.threadId) + "?mock=true"}
             target="_blank"
           >
             <Card className="group/card relative h-64 overflow-hidden">

frontend/src/components/workspace/agent-welcome.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { BotIcon } from "lucide-react";
+
+import { type Agent } from "@/core/agents";
+import { cn } from "@/lib/utils";
+
+export function AgentWelcome({
+  className,
+  agent,
+  agentName,
+}: {
+  className?: string;
+  agent: Agent | null | undefined;
+  agentName: string;
+}) {
+  const displayName = agent?.name ?? agentName;
+  const description = agent?.description;
+
+  return (
+    <div
+      className={cn(
+        "mx-auto flex w-full flex-col items-center justify-center gap-2 px-8 py-4 text-center",
+        className,
+      )}
+    >
+      <div className="bg-primary/10 flex h-12 w-12 items-center justify-center rounded-full">
+        <BotIcon className="text-primary h-6 w-6" />
+      </div>
+      <div className="text-2xl font-bold">{displayName}</div>
+      {description && (
+        <p className="text-muted-foreground max-w-sm text-sm">{description}</p>
+      )}
+    </div>
+  );
+}

frontend/src/components/workspace/agents/agent-card.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { BotIcon, MessageSquareIcon, Trash2Icon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useDeleteAgent } from "@/core/agents";
+import type { Agent } from "@/core/agents";
+import { useI18n } from "@/core/i18n/hooks";
+
+interface AgentCardProps {
+  agent: Agent;
+}
+
+export function AgentCard({ agent }: AgentCardProps) {
+  const { t } = useI18n();
+  const router = useRouter();
+  const deleteAgent = useDeleteAgent();
+  const [deleteOpen, setDeleteOpen] = useState(false);
+
+  function handleChat() {
+    router.push(`/workspace/agents/${agent.name}/chats/new`);
+  }
+
+  async function handleDelete() {
+    try {
+      await deleteAgent.mutateAsync(agent.name);
+      toast.success(t.agents.deleteSuccess);
+      setDeleteOpen(false);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  return (
+    <>
+      <Card className="group flex flex-col transition-shadow hover:shadow-md">
+        <CardHeader className="pb-3">
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
+                <BotIcon className="h-5 w-5" />
+              </div>
+              <div className="min-w-0">
+                <CardTitle className="truncate text-base">
+                  {agent.name}
+                </CardTitle>
+                {agent.model && (
+                  <Badge variant="secondary" className="mt-0.5 text-xs">
+                    {agent.model}
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </div>
+          {agent.description && (
+            <CardDescription className="mt-2 line-clamp-2 text-sm">
+              {agent.description}
+            </CardDescription>
+          )}
+        </CardHeader>
+
+        {agent.tool_groups && agent.tool_groups.length > 0 && (
+          <CardContent className="pt-0 pb-3">
+            <div className="flex flex-wrap gap-1">
+              {agent.tool_groups.map((group) => (
+                <Badge key={group} variant="outline" className="text-xs">
+                  {group}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        )}
+
+        <CardFooter className="mt-auto flex items-center justify-between gap-2 pt-3">
+          <Button size="sm" className="flex-1" onClick={handleChat}>
+            <MessageSquareIcon className="mr-1.5 h-3.5 w-3.5" />
+            {t.agents.chat}
+          </Button>
+          <div className="flex gap-1">
+            <Button
+              size="icon"
+              variant="ghost"
+              className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
+              onClick={() => setDeleteOpen(true)}
+              title={t.agents.delete}
+            >
+              <Trash2Icon className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </CardFooter>
+      </Card>
+
+      {/* Delete Confirm */}
+      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t.agents.delete}</DialogTitle>
+            <DialogDescription>{t.agents.deleteConfirm}</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setDeleteOpen(false)}
+              disabled={deleteAgent.isPending}
+            >
+              {t.common.cancel}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={deleteAgent.isPending}
+            >
+              {deleteAgent.isPending ? t.common.loading : t.common.delete}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

frontend/src/components/workspace/agents/agent-gallery.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { BotIcon, PlusIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { useAgents } from "@/core/agents";
+import { useI18n } from "@/core/i18n/hooks";
+
+import { AgentCard } from "./agent-card";
+
+export function AgentGallery() {
+  const { t } = useI18n();
+  const { agents, isLoading } = useAgents();
+  const router = useRouter();
+
+  const handleNewAgent = () => {
+    router.push("/workspace/agents/new");
+  };
+
+  return (
+    <div className="flex size-full flex-col">
+      {/* Page header */}
+      <div className="flex items-center justify-between border-b px-6 py-4">
+        <div>
+          <h1 className="text-xl font-semibold">{t.agents.title}</h1>
+          <p className="text-muted-foreground mt-0.5 text-sm">
+            {t.agents.description}
+          </p>
+        </div>
+        <Button onClick={handleNewAgent}>
+          <PlusIcon className="mr-1.5 h-4 w-4" />
+          {t.agents.newAgent}
+        </Button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6">
+        {isLoading ? (
+          <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
+            {t.common.loading}
+          </div>
+        ) : agents.length === 0 ? (
+          <div className="flex h-64 flex-col items-center justify-center gap-3 text-center">
+            <div className="bg-muted flex h-14 w-14 items-center justify-center rounded-full">
+              <BotIcon className="text-muted-foreground h-7 w-7" />
+            </div>
+            <div>
+              <p className="font-medium">{t.agents.emptyTitle}</p>
+              <p className="text-muted-foreground mt-1 text-sm">
+                {t.agents.emptyDescription}
+              </p>
+            </div>
+            <Button variant="outline" className="mt-2" onClick={handleNewAgent}>
+              <PlusIcon className="mr-1.5 h-4 w-4" />
+              {t.agents.newAgent}
+            </Button>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {agents.map((agent) => (
+              <AgentCard key={agent.name} agent={agent} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/workspace/artifacts/artifact-file-detail.tsx

@@ -39,6 +39,7 @@ import { env } from "@/env";
 import { cn } from "@/lib/utils";
 
 import { CitationLink } from "../citations/citation-link";
+import { useThread } from "../messages/context";
 import { Tooltip } from "../tooltip";
 
 import { useArtifacts } from "./context";
@@ -79,7 +80,7 @@ export function ArtifactFileDetail({
     }
     return checkCodeFile(filepath);
   }, [filepath, isWriteFile, isSkillFile]);
-  const previewable = useMemo(() => {
+  const isSupportPreview = useMemo(() => {
     return (language === "html" && !isWriteFile) || language === "markdown";
   }, [isWriteFile, language]);
   const { content } = useArtifactContent({
@@ -92,14 +93,14 @@ export function ArtifactFileDetail({
 
   const [viewMode, setViewMode] = useState<"code" | "preview">("code");
   const [isInstalling, setIsInstalling] = useState(false);
-
+  const { isMock } = useThread();
   useEffect(() => {
-    if (previewable) {
+    if (isSupportPreview) {
       setViewMode("preview");
     } else {
       setViewMode("code");
     }
-  }, [previewable]);
+  }, [isSupportPreview]);
 
   const handleInstallSkill = useCallback(async () => {
     if (isInstalling) return;
@@ -148,16 +149,18 @@ export function ArtifactFileDetail({
           </ArtifactTitle>
         </div>
         <div className="flex min-w-0 grow items-center justify-center">
-          {previewable && (
+          {isSupportPreview && (
             <ToggleGroup
               className="mx-auto"
               type="single"
               variant="outline"
               size="sm"
               value={viewMode}
-              onValueChange={(value) =>
-                setViewMode(value as "code" | "preview")
-              }
+              onValueChange={(value) => {
+                if (value) {
+                  setViewMode(value as "code" | "preview");
+                }
+              }}
             >
               <ToggleGroupItem value="code">
                 <Code2Icon />
@@ -232,7 +235,7 @@ export function ArtifactFileDetail({
         </div>
       </ArtifactHeader>
       <ArtifactContent className="p-0">
-        {previewable &&
+        {isSupportPreview &&
           viewMode === "preview" &&
           (language === "markdown" || language === "html") && (
             <ArtifactFilePreview
@@ -252,7 +255,7 @@ export function ArtifactFileDetail({
         {!isCodeFile && (
           <iframe
             className="size-full"
-            src={urlOfArtifact({ filepath, threadId })}
+            src={urlOfArtifact({ filepath, threadId, isMock })}
           />
         )}
       </ArtifactContent>
@@ -271,6 +274,7 @@ export function ArtifactFilePreview({
   content: string;
   language: string;
 }) {
+  const { isMock } = useThread();
   if (language === "markdown") {
     return (
       <div className="size-full px-4">
@@ -288,10 +292,9 @@ export function ArtifactFilePreview({
     return (
       <iframe
         className="size-full"
-        src={urlOfArtifact({ filepath, threadId })}
+        src={urlOfArtifact({ filepath, threadId, isMock })}
       />
     );
   }
   return null;
 }
-

frontend/src/components/workspace/artifacts/artifact-trigger.tsx

@@ -0,0 +1,30 @@
+import { FilesIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/workspace/tooltip";
+import { useI18n } from "@/core/i18n/hooks";
+
+import { useArtifacts } from "./context";
+
+export const ArtifactTrigger = () => {
+  const { t } = useI18n();
+  const { artifacts, setOpen: setArtifactsOpen } = useArtifacts();
+
+  if (artifacts?.length === 0) {
+    return null;
+  }
+  return (
+    <Tooltip content="Show artifacts of this conversation">
+      <Button
+        className="text-muted-foreground hover:text-foreground"
+        variant="ghost"
+        onClick={() => {
+          setArtifactsOpen(true);
+        }}
+      >
+        <FilesIcon />
+        {t.common.artifacts}
+      </Button>
+    </Tooltip>
+  );
+};

frontend/src/components/workspace/artifacts/index.ts

@@ -1,3 +1,4 @@
 export * from "./artifact-file-detail";
 export * from "./artifact-file-list";
+export * from "./artifact-trigger";
 export * from "./context";

frontend/src/components/workspace/chats/chat-box.tsx

@@ -0,0 +1,151 @@
+import { FilesIcon, XIcon } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { GroupImperativeHandle } from "react-resizable-panels";
+
+import { ConversationEmptyState } from "@/components/ai-elements/conversation";
+import { Button } from "@/components/ui/button";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { env } from "@/env";
+import { cn } from "@/lib/utils";
+
+import {
+  ArtifactFileDetail,
+  ArtifactFileList,
+  useArtifacts,
+} from "../artifacts";
+import { useThread } from "../messages/context";
+
+const CLOSE_MODE = { chat: 100, artifacts: 0 };
+const OPEN_MODE = { chat: 60, artifacts: 40 };
+
+const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
+  children,
+  threadId,
+}) => {
+  const { thread } = useThread();
+  const layoutRef = useRef<GroupImperativeHandle>(null);
+  const {
+    artifacts,
+    open: artifactsOpen,
+    setOpen: setArtifactsOpen,
+    setArtifacts,
+    select: selectArtifact,
+    selectedArtifact,
+  } = useArtifacts();
+
+  const [autoSelectFirstArtifact, setAutoSelectFirstArtifact] = useState(true);
+  useEffect(() => {
+    setArtifacts(thread.values.artifacts);
+    if (
+      env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" &&
+      autoSelectFirstArtifact
+    ) {
+      if (thread?.values?.artifacts?.length > 0) {
+        setAutoSelectFirstArtifact(false);
+        selectArtifact(thread.values.artifacts[0]!);
+      }
+    }
+  }, [
+    autoSelectFirstArtifact,
+    selectArtifact,
+    setArtifacts,
+    thread.values.artifacts,
+  ]);
+
+  const artifactPanelOpen = useMemo(() => {
+    if (env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true") {
+      return artifactsOpen && artifacts?.length > 0;
+    }
+    return artifactsOpen;
+  }, [artifactsOpen, artifacts]);
+
+  useEffect(() => {
+    if (layoutRef.current) {
+      if (artifactPanelOpen) {
+        layoutRef.current.setLayout(OPEN_MODE);
+      } else {
+        layoutRef.current.setLayout(CLOSE_MODE);
+      }
+    }
+  }, [artifactPanelOpen]);
+
+  return (
+    <ResizablePanelGroup
+      orientation="horizontal"
+      defaultLayout={{ chat: 100, artifacts: 0 }}
+      groupRef={layoutRef}
+    >
+      <ResizablePanel className="relative" defaultSize={100} id="chat">
+        {children}
+      </ResizablePanel>
+      <ResizableHandle
+        className={cn(
+          "opacity-33 hover:opacity-100",
+          !artifactPanelOpen && "pointer-events-none opacity-0",
+        )}
+      />
+      <ResizablePanel
+        className={cn(
+          "transition-all duration-300 ease-in-out",
+          !artifactsOpen && "opacity-0",
+        )}
+        id="artifacts"
+      >
+        <div
+          className={cn(
+            "h-full p-4 transition-transform duration-300 ease-in-out",
+            artifactPanelOpen ? "translate-x-0" : "translate-x-full",
+          )}
+        >
+          {selectedArtifact ? (
+            <ArtifactFileDetail
+              className="size-full"
+              filepath={selectedArtifact}
+              threadId={threadId}
+            />
+          ) : (
+            <div className="relative flex size-full justify-center">
+              <div className="absolute top-1 right-1 z-30">
+                <Button
+                  size="icon-sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setArtifactsOpen(false);
+                  }}
+                >
+                  <XIcon />
+                </Button>
+              </div>
+              {thread.values.artifacts?.length === 0 ? (
+                <ConversationEmptyState
+                  icon={<FilesIcon />}
+                  title="No artifact selected"
+                  description="Select an artifact to view its details"
+                />
+              ) : (
+                <div className="flex size-full max-w-(--container-width-sm) flex-col justify-center p-4 pt-8">
+                  <header className="shrink-0">
+                    <h2 className="text-lg font-medium">Artifacts</h2>
+                  </header>
+                  <main className="min-h-0 grow">
+                    <ArtifactFileList
+                      className="max-w-(--container-width-sm) p-4 pt-12"
+                      files={thread.values.artifacts ?? []}
+                      threadId={threadId}
+                    />
+                  </main>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+};
+
+export { ChatBox };

frontend/src/components/workspace/chats/index.ts

@@ -0,0 +1,3 @@
+export * from "./chat-box";
+export * from "./use-chat-mode";
+export * from "./use-thread-chat";

frontend/src/components/workspace/chats/use-chat-mode.ts

@@ -0,0 +1,41 @@
+import { useParams, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useRef } from "react";
+
+import { usePromptInputController } from "@/components/ai-elements/prompt-input";
+import { useI18n } from "@/core/i18n/hooks";
+
+/**
+ * Hook to determine if the chat is in a specific mode based on URL parameters, and to set an initial prompt input value accordingly.
+ */
+export function useSpecificChatMode() {
+  const { t } = useI18n();
+  const { thread_id: threadIdFromPath } = useParams<{ thread_id: string }>();
+  const searchParams = useSearchParams();
+  const promptInputController = usePromptInputController();
+  const inputInitialValue = useMemo(() => {
+    if (threadIdFromPath !== "new" || searchParams.get("mode") !== "skill") {
+      return undefined;
+    }
+    return t.inputBox.createSkillPrompt;
+  }, [threadIdFromPath, searchParams, t.inputBox.createSkillPrompt]);
+  const lastInitialValueRef = useRef<string | undefined>(undefined);
+  const setInputRef = useRef(promptInputController.textInput.setInput);
+  setInputRef.current = promptInputController.textInput.setInput;
+  useEffect(() => {
+    if (
+      inputInitialValue &&
+      inputInitialValue !== lastInitialValueRef.current
+    ) {
+      lastInitialValueRef.current = inputInitialValue;
+      setTimeout(() => {
+        setInputRef.current(inputInitialValue);
+        const textarea = document.querySelector("textarea");
+        if (textarea) {
+          textarea.focus();
+          textarea.selectionStart = textarea.value.length;
+          textarea.selectionEnd = textarea.value.length;
+        }
+      }, 100);
+    }
+  }, [inputInitialValue]);
+}

frontend/src/components/workspace/chats/use-thread-chat.ts

@@ -0,0 +1,21 @@
+"use client";
+
+import { useParams, useSearchParams } from "next/navigation";
+import { useMemo, useState } from "react";
+
+import { uuid } from "@/core/utils/uuid";
+
+export function useThreadChat() {
+  const { thread_id: threadIdFromPath } = useParams<{ thread_id: string }>();
+  const searchParams = useSearchParams();
+  const threadId = useMemo(
+    () => (threadIdFromPath === "new" ? uuid() : threadIdFromPath),
+    [threadIdFromPath],
+  );
+
+  const [isNewThread, setIsNewThread] = useState(
+    () => threadIdFromPath === "new",
+  );
+  const isMock = searchParams.get("mock") === "true";
+  return { threadId, isNewThread, setIsNewThread, isMock };
+}

frontend/src/components/workspace/messages/context.ts

@@ -1,11 +1,11 @@
-import type { UseStream } from "@langchain/langgraph-sdk/react";
+import type { BaseStream } from "@langchain/langgraph-sdk/react";
 import { createContext, useContext } from "react";
 
 import type { AgentThreadState } from "@/core/threads";
 
 export interface ThreadContextType {
-  threadId: string;
-  thread: UseStream<AgentThreadState>;
+  thread: BaseStream<AgentThreadState>;
+  isMock?: boolean;
 }
 
 export const ThreadContext = createContext<ThreadContextType | undefined>(

frontend/src/components/workspace/messages/message-list-item.tsx

@@ -46,22 +46,24 @@ export function MessageListItem({
         message={message}
         isLoading={isLoading}
       />
-      <MessageToolbar
-        className={cn(
-          isHuman ? "-bottom-9 justify-end" : "-bottom-8",
-          "absolute right-0 left-0 z-20 opacity-0 transition-opacity delay-200 duration-300 group-hover/conversation-message:opacity-100",
-        )}
-      >
-        <div className="flex gap-1">
-          <CopyButton
-            clipboardData={
-              extractContentFromMessage(message) ??
-              extractReasoningContentFromMessage(message) ??
-              ""
-            }
-          />
-        </div>
-      </MessageToolbar>
+      {!isLoading && (
+        <MessageToolbar
+          className={cn(
+            isHuman ? "-bottom-9 justify-end" : "-bottom-8",
+            "absolute right-0 left-0 z-20 opacity-0 transition-opacity delay-200 duration-300 group-hover/conversation-message:opacity-100",
+          )}
+        >
+          <div className="flex gap-1">
+            <CopyButton
+              clipboardData={
+                extractContentFromMessage(message) ??
+                extractReasoningContentFromMessage(message) ??
+                ""
+              }
+            />
+          </div>
+        </MessageToolbar>
+      )}
     </AIElementMessage>
   );
 }

frontend/src/components/workspace/messages/message-list.tsx

@@ -1,5 +1,4 @@
-import type { Message } from "@langchain/langgraph-sdk";
-import type { UseStream } from "@langchain/langgraph-sdk/react";
+import type { BaseStream } from "@langchain/langgraph-sdk/react";
 
 import {
   Conversation,
@@ -34,19 +33,18 @@ export function MessageList({
   className,
   threadId,
   thread,
-  messages,
   paddingBottom = 160,
 }: {
   className?: string;
   threadId: string;
-  thread: UseStream<AgentThreadState>;
-  messages: Message[];
+  thread: BaseStream<AgentThreadState>;
   paddingBottom?: number;
 }) {
   const { t } = useI18n();
   const rehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
   const updateSubtask = useUpdateSubtask();
-  if (thread.isThreadLoading) {
+  const messages = thread.messages;
+  if (thread.isThreadLoading && messages.length === 0) {
     return <MessageListSkeleton />;
   }
   return (

frontend/src/components/workspace/thread-title.tsx

@@ -1,11 +1,45 @@
+import type { BaseStream } from "@langchain/langgraph-sdk";
+import { useEffect } from "react";
+
+import { useI18n } from "@/core/i18n/hooks";
+import type { AgentThreadState } from "@/core/threads";
+
 import { FlipDisplay } from "./flip-display";
 
 export function ThreadTitle({
-  threadTitle,
+  threadId,
+  thread,
 }: {
   className?: string;
   threadId: string;
-  threadTitle: string;
+  thread: BaseStream<AgentThreadState>;
 }) {
-  return <FlipDisplay uniqueKey={threadTitle}>{threadTitle}</FlipDisplay>;
+  const { t } = useI18n();
+  useEffect(() => {
+    const pageTitle = !thread.values
+      ? t.pages.newChat
+      : thread.values?.title && thread.values.title !== "Untitled"
+        ? thread.values.title
+        : t.pages.untitled;
+    if (thread.isThreadLoading) {
+      document.title = `Loading... - ${t.pages.appName}`;
+    } else {
+      document.title = `${pageTitle} - ${t.pages.appName}`;
+    }
+  }, [
+    t.pages.newChat,
+    t.pages.untitled,
+    t.pages.appName,
+    thread.isThreadLoading,
+    thread.values,
+  ]);
+
+  if (!thread.values?.title) {
+    return null;
+  }
+  return (
+    <FlipDisplay uniqueKey={threadId}>
+      {thread.values.title ?? "Untitled"}
+    </FlipDisplay>
+  );
 }

frontend/src/components/workspace/todo-list.tsx

@@ -1,4 +1,5 @@
 import { ChevronUpIcon, ListTodoIcon } from "lucide-react";
+import { useState } from "react";
 
 import type { Todo } from "@/core/todos";
 import { cn } from "@/lib/utils";
@@ -13,7 +14,7 @@ import {
 export function TodoList({
   className,
   todos,
-  collapsed = false,
+  collapsed: controlledCollapsed,
   hidden = false,
   onToggle,
 }: {
@@ -23,6 +24,18 @@ export function TodoList({
   hidden?: boolean;
   onToggle?: () => void;
 }) {
+  const [internalCollapsed, setInternalCollapsed] = useState(true);
+  const isControlled = controlledCollapsed !== undefined;
+  const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+
+  const handleToggle = () => {
+    if (isControlled) {
+      onToggle?.();
+    } else {
+      setInternalCollapsed((prev) => !prev);
+    }
+  };
+
   return (
     <div
       className={cn(
@@ -35,9 +48,7 @@ export function TodoList({
         className={cn(
           "bg-accent flex min-h-8 shrink-0 cursor-pointer items-center justify-between px-4 text-sm transition-all duration-300 ease-out",
         )}
-        onClick={() => {
-          onToggle?.();
-        }}
+        onClick={handleToggle}
       >
         <div className="text-muted-foreground">
           <div className="flex items-center justify-center gap-2">

frontend/src/components/workspace/workspace-nav-chat-list.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { MessagesSquare } from "lucide-react";
+import { BotIcon, MessagesSquare } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
@@ -26,6 +26,17 @@ export function WorkspaceNavChatList() {
             </Link>
           </SidebarMenuButton>
         </SidebarMenuItem>
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            isActive={pathname.startsWith("/workspace/agents")}
+            asChild
+          >
+            <Link className="text-muted-foreground" href="/workspace/agents">
+              <BotIcon />
+              <span>{t.sidebar.agents}</span>
+            </Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
       </SidebarMenu>
     </SidebarGroup>
   );