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>
2026-04-03 06:12:14 +08:00 · 2026-03-03 21:32:01 +08:00
parent 8342e88534
commit 7de94394d4
61 changed files with 3002 additions and 503 deletions
--- a/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/layout.tsx
+++ b/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/layout.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { PromptInputProvider } from "@/components/ai-elements/prompt-input";
+import { ArtifactsProvider } from "@/components/workspace/artifacts";
+import { SubtasksProvider } from "@/core/tasks/context";
+
+export default function AgentChatLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <SubtasksProvider>
+      <ArtifactsProvider>
+        <PromptInputProvider>{children}</PromptInputProvider>
+      </ArtifactsProvider>
+    </SubtasksProvider>
+  );
+}
--- a/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/page.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import { BotIcon } from "lucide-react";
+import { useParams } from "next/navigation";
+import { useCallback } from "react";
+
+import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
+import { AgentWelcome } from "@/components/workspace/agent-welcome";
+import { ArtifactTrigger } from "@/components/workspace/artifacts";
+import { ChatBox, useThreadChat } from "@/components/workspace/chats";
+import { InputBox } from "@/components/workspace/input-box";
+import { MessageList } from "@/components/workspace/messages";
+import { ThreadContext } from "@/components/workspace/messages/context";
+import { ThreadTitle } from "@/components/workspace/thread-title";
+import { TodoList } from "@/components/workspace/todo-list";
+import { useAgent } from "@/core/agents";
+import { useI18n } from "@/core/i18n/hooks";
+import { useNotification } from "@/core/notification/hooks";
+import { useLocalSettings } from "@/core/settings";
+import { useThreadStream } from "@/core/threads/hooks";
+import { textOfMessage } from "@/core/threads/utils";
+import { env } from "@/env";
+import { cn } from "@/lib/utils";
+
+export default function AgentChatPage() {
+  const { t } = useI18n();
+  const [settings, setSettings] = useLocalSettings();
+
+  const { agent_name, thread_id: threadIdFromPath } = useParams<{
+    agent_name: string;
+    thread_id: string;
+  }>();
+
+  const { agent } = useAgent(agent_name);
+
+  const { threadId, isNewThread, setIsNewThread } = useThreadChat();
+
+  const { showNotification } = useNotification();
+  const [thread, sendMessage] = useThreadStream({
+    threadId: threadIdFromPath !== "new" ? threadIdFromPath : undefined,
+    context: { ...settings.context, agent_name: agent_name },
+    onStart: () => {
+      setIsNewThread(false);
+      history.replaceState(
+        null,
+        "",
+        `/workspace/agents/${agent_name}/chats/${threadId}`,
+      );
+    },
+    onFinish: (state) => {
+      if (document.hidden || !document.hasFocus()) {
+        let body = "Conversation finished";
+        const lastMessage = state.messages[state.messages.length - 1];
+        if (lastMessage) {
+          const textContent = textOfMessage(lastMessage);
+          if (textContent) {
+            body =
+              textContent.length > 200
+                ? textContent.substring(0, 200) + "..."
+                : textContent;
+          }
+        }
+        showNotification(state.title, { body });
+      }
+    },
+  });
+
+  const handleSubmit = useCallback(
+    (message: PromptInputMessage) => {
+      void sendMessage(threadId, message, { agent_name });
+    },
+    [sendMessage, threadId, agent_name],
+  );
+
+  const handleStop = useCallback(async () => {
+    await thread.stop();
+  }, [thread]);
+
+  return (
+    <ThreadContext.Provider value={{ thread }}>
+      <ChatBox threadId={threadId}>
+        <div className="relative flex size-full min-h-0 justify-between">
+          <header
+            className={cn(
+              "absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center gap-2 px-4",
+              isNewThread
+                ? "bg-background/0 backdrop-blur-none"
+                : "bg-background/80 shadow-xs backdrop-blur",
+            )}
+          >
+            {/* Agent badge */}
+            <div className="flex shrink-0 items-center gap-1.5 rounded-md border px-2 py-1">
+              <BotIcon className="text-primary h-3.5 w-3.5" />
+              <span className="text-xs font-medium">
+                {agent?.name ?? agent_name}
+              </span>
+            </div>
+
+            <div className="flex w-full items-center text-sm font-medium">
+              <ThreadTitle threadId={threadId} thread={thread} />
+            </div>
+            <div>
+              <ArtifactTrigger />
+            </div>
+          </header>
+
+          <main className="flex min-h-0 max-w-full grow flex-col">
+            <div className="flex size-full justify-center">
+              <MessageList
+                className={cn("size-full", !isNewThread && "pt-10")}
+                threadId={threadId}
+                thread={thread}
+              />
+            </div>
+
+            <div className="absolute right-0 bottom-0 left-0 z-30 flex justify-center px-4">
+              <div
+                className={cn(
+                  "relative w-full",
+                  isNewThread && "-translate-y-[calc(50vh-96px)]",
+                  isNewThread
+                    ? "max-w-(--container-width-sm)"
+                    : "max-w-(--container-width-md)",
+                )}
+              >
+                <div className="absolute -top-4 right-0 left-0 z-0">
+                  <div className="absolute right-0 bottom-0 left-0">
+                    <TodoList
+                      className="bg-background/5"
+                      todos={thread.values.todos ?? []}
+                      hidden={
+                        !thread.values.todos || thread.values.todos.length === 0
+                      }
+                    />
+                  </div>
+                </div>
+
+                <InputBox
+                  className={cn("bg-background/5 w-full -translate-y-4")}
+                  isNewThread={isNewThread}
+                  autoFocus={isNewThread}
+                  status={thread.isLoading ? "streaming" : "ready"}
+                  context={settings.context}
+                  extraHeader={
+                    isNewThread && (
+                      <AgentWelcome agent={agent} agentName={agent_name} />
+                    )
+                  }
+                  disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"}
+                  onContextChange={(context) => setSettings("context", context)}
+                  onSubmit={handleSubmit}
+                  onStop={handleStop}
+                />
+                {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" && (
+                  <div className="text-muted-foreground/67 w-full translate-y-12 text-center text-xs">
+                    {t.common.notAvailableInDemoMode}
+                  </div>
+                )}
+              </div>
+            </div>
+          </main>
+        </div>
+      </ChatBox>
+    </ThreadContext.Provider>
+  );
+}
--- a/frontend/src/app/workspace/agents/new/page.tsx
+++ b/frontend/src/app/workspace/agents/new/page.tsx
@@ -0,0 +1,251 @@
+"use client";
+
+import { ArrowLeftIcon, BotIcon, CheckCircleIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+
+import {
+  PromptInput,
+  PromptInputFooter,
+  PromptInputSubmit,
+  PromptInputTextarea,
+} from "@/components/ai-elements/prompt-input";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ArtifactsProvider } from "@/components/workspace/artifacts";
+import { MessageList } from "@/components/workspace/messages";
+import { ThreadContext } from "@/components/workspace/messages/context";
+import type { Agent } from "@/core/agents";
+import { checkAgentName, getAgent } from "@/core/agents/api";
+import { useI18n } from "@/core/i18n/hooks";
+import { useThreadStream } from "@/core/threads/hooks";
+import { uuid } from "@/core/utils/uuid";
+import { cn } from "@/lib/utils";
+
+type Step = "name" | "chat";
+
+const NAME_RE = /^[A-Za-z0-9-]+$/;
+
+export default function NewAgentPage() {
+  const { t } = useI18n();
+  const router = useRouter();
+
+  // ── Step 1: name form ──────────────────────────────────────────────────────
+  const [step, setStep] = useState<Step>("name");
+  const [nameInput, setNameInput] = useState("");
+  const [nameError, setNameError] = useState("");
+  const [isCheckingName, setIsCheckingName] = useState(false);
+  const [agentName, setAgentName] = useState("");
+  const [agent, setAgent] = useState<Agent | null>(null);
+  // ── Step 2: chat ───────────────────────────────────────────────────────────
+
+  // Stable thread ID — all turns belong to the same thread
+  const threadId = useMemo(() => uuid(), []);
+
+  const [thread, sendMessage] = useThreadStream({
+    context: {
+      mode: "flash",
+      is_bootstrap: true,
+    },
+    onToolEnd({ name }) {
+      if (name !== "setup_agent" || !agentName) return;
+      getAgent(agentName)
+        .then((fetched) => setAgent(fetched))
+        .catch(() => {
+          // agent write may not be flushed yet — ignore silently
+        });
+    },
+  });
+
+  // ── Handlers ───────────────────────────────────────────────────────────────
+
+  const handleConfirmName = useCallback(async () => {
+    const trimmed = nameInput.trim();
+    if (!trimmed) return;
+    if (!NAME_RE.test(trimmed)) {
+      setNameError(t.agents.nameStepInvalidError);
+      return;
+    }
+    setNameError("");
+    setIsCheckingName(true);
+    try {
+      const result = await checkAgentName(trimmed);
+      if (!result.available) {
+        setNameError(t.agents.nameStepAlreadyExistsError);
+        return;
+      }
+    } catch {
+      setNameError(t.agents.nameStepCheckError);
+      return;
+    } finally {
+      setIsCheckingName(false);
+    }
+    setAgentName(trimmed);
+    setStep("chat");
+    await sendMessage(threadId, {
+      text: t.agents.nameStepBootstrapMessage.replace("{name}", trimmed),
+      files: [],
+    });
+  }, [
+    nameInput,
+    sendMessage,
+    threadId,
+    t.agents.nameStepBootstrapMessage,
+    t.agents.nameStepInvalidError,
+    t.agents.nameStepAlreadyExistsError,
+    t.agents.nameStepCheckError,
+  ]);
+
+  const handleNameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      void handleConfirmName();
+    }
+  };
+
+  const handleChatSubmit = useCallback(
+    async (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed || thread.isLoading) return;
+      await sendMessage(
+        threadId,
+        { text: trimmed, files: [] },
+        { agent_name: agentName },
+      );
+    },
+    [thread.isLoading, sendMessage, threadId, agentName],
+  );
+
+  // ── Shared header ──────────────────────────────────────────────────────────
+
+  const header = (
+    <header className="flex shrink-0 items-center gap-3 border-b px-4 py-3">
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        onClick={() => router.push("/workspace/agents")}
+      >
+        <ArrowLeftIcon className="h-4 w-4" />
+      </Button>
+      <h1 className="text-sm font-semibold">{t.agents.createPageTitle}</h1>
+    </header>
+  );
+
+  // ── Step 1: name form ──────────────────────────────────────────────────────
+
+  if (step === "name") {
+    return (
+      <div className="flex size-full flex-col">
+        {header}
+        <main className="flex flex-1 flex-col items-center justify-center px-4">
+          <div className="w-full max-w-sm space-y-8">
+            <div className="space-y-3 text-center">
+              <div className="bg-primary/10 mx-auto flex h-14 w-14 items-center justify-center rounded-full">
+                <BotIcon className="text-primary h-7 w-7" />
+              </div>
+              <div className="space-y-1">
+                <h2 className="text-xl font-semibold">
+                  {t.agents.nameStepTitle}
+                </h2>
+                <p className="text-muted-foreground text-sm">
+                  {t.agents.nameStepHint}
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <Input
+                autoFocus
+                placeholder={t.agents.nameStepPlaceholder}
+                value={nameInput}
+                onChange={(e) => {
+                  setNameInput(e.target.value);
+                  setNameError("");
+                }}
+                onKeyDown={handleNameKeyDown}
+                className={cn(nameError && "border-destructive")}
+              />
+              {nameError && (
+                <p className="text-destructive text-sm">{nameError}</p>
+              )}
+              <Button
+                className="w-full"
+                onClick={() => void handleConfirmName()}
+                disabled={!nameInput.trim() || isCheckingName}
+              >
+                {t.agents.nameStepContinue}
+              </Button>
+            </div>
+          </div>
+        </main>
+      </div>
+    );
+  }
+
+  // ── Step 2: chat ───────────────────────────────────────────────────────────
+
+  return (
+    <ThreadContext.Provider value={{ thread }}>
+      <ArtifactsProvider>
+        <div className="flex size-full flex-col">
+          {header}
+
+          <main className="flex min-h-0 flex-1 flex-col">
+            {/* ── Message area ── */}
+            <div className="flex min-h-0 flex-1 justify-center">
+              <MessageList
+                className="size-full pt-10"
+                threadId={threadId}
+                thread={thread}
+              />
+            </div>
+
+            {/* ── Bottom action area ── */}
+            <div className="bg-background flex shrink-0 justify-center border-t px-4 py-4">
+              <div className="w-full max-w-(--container-width-md)">
+                {agent ? (
+                  // ✅ Success card
+                  <div className="flex flex-col items-center gap-4 rounded-2xl border py-8 text-center">
+                    <CheckCircleIcon className="text-primary h-10 w-10" />
+                    <p className="font-semibold">{t.agents.agentCreated}</p>
+                    <div className="flex gap-2">
+                      <Button
+                        onClick={() =>
+                          router.push(
+                            `/workspace/agents/${agentName}/chats/new`,
+                          )
+                        }
+                      >
+                        {t.agents.startChatting}
+                      </Button>
+                      <Button
+                        variant="outline"
+                        onClick={() => router.push("/workspace/agents")}
+                      >
+                        {t.agents.backToGallery}
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  // 📝 Normal input
+                  <PromptInput
+                    onSubmit={({ text }) => void handleChatSubmit(text)}
+                  >
+                    <PromptInputTextarea
+                      autoFocus
+                      placeholder={t.agents.createPageSubtitle}
+                      disabled={thread.isLoading}
+                    />
+                    <PromptInputFooter className="justify-end">
+                      <PromptInputSubmit disabled={thread.isLoading} />
+                    </PromptInputFooter>
+                  </PromptInput>
+                )}
+              </div>
+            </div>
+          </main>
+        </div>
+      </ArtifactsProvider>
+    </ThreadContext.Provider>
+  );
+}
--- a/frontend/src/app/workspace/agents/page.tsx
+++ b/frontend/src/app/workspace/agents/page.tsx
@@ -0,0 +1,5 @@
+import { AgentGallery } from "@/components/workspace/agents/agent-gallery";
+
+export default function AgentsPage() {
+  return <AgentGallery />;
+}
--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
@@ -1,366 +1,145 @@
 "use client";

-import type { Message } from "@langchain/langgraph-sdk";
-import type { UseStream } from "@langchain/langgraph-sdk/react";
-import { FilesIcon, XIcon } from "lucide-react";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback } from "react";

-import { ConversationEmptyState } from "@/components/ai-elements/conversation";
-import { usePromptInputController } from "@/components/ai-elements/prompt-input";
-import { Button } from "@/components/ui/button";
+import { type PromptInputMessage } from "@/components/ai-elements/prompt-input";
+import { ArtifactTrigger } from "@/components/workspace/artifacts";
 import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable";
-import { useSidebar } from "@/components/ui/sidebar";
-import {
-  ArtifactFileDetail,
-  ArtifactFileList,
-  useArtifacts,
-} from "@/components/workspace/artifacts";
+  ChatBox,
+  useSpecificChatMode,
+  useThreadChat,
+} from "@/components/workspace/chats";
 import { InputBox } from "@/components/workspace/input-box";
 import { MessageList } from "@/components/workspace/messages";
 import { ThreadContext } from "@/components/workspace/messages/context";
 import { ThreadTitle } from "@/components/workspace/thread-title";
 import { TodoList } from "@/components/workspace/todo-list";
-import { Tooltip } from "@/components/workspace/tooltip";
 import { Welcome } from "@/components/workspace/welcome";
 import { useI18n } from "@/core/i18n/hooks";
 import { useNotification } from "@/core/notification/hooks";
 import { useLocalSettings } from "@/core/settings";
-import { type AgentThreadState } from "@/core/threads";
-import { useSubmitThread, useThreadStream } from "@/core/threads/hooks";
-import {
-  pathOfThread,
-  textOfMessage,
-} from "@/core/threads/utils";
-import { uuid } from "@/core/utils/uuid";
+import { useThreadStream } from "@/core/threads/hooks";
+import { textOfMessage } from "@/core/threads/utils";
 import { env } from "@/env";
 import { cn } from "@/lib/utils";

 export default function ChatPage() {
  const { t } = useI18n();
-  const router = useRouter();
  const [settings, setSettings] = useLocalSettings();
-  const { setOpen: setSidebarOpen } = useSidebar();
-  const {
-    artifacts,
-    open: artifactsOpen,
-    setOpen: setArtifactsOpen,
-    setArtifacts,
-    select: selectArtifact,
-    selectedArtifact,
-  } = useArtifacts();
-  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]);
-  const isNewThread = useMemo(
-    () => threadIdFromPath === "new",
-    [threadIdFromPath],
-  );
-  const [threadId, setThreadId] = useState<string | null>(null);
-  useEffect(() => {
-    if (threadIdFromPath !== "new") {
-      setThreadId(threadIdFromPath);
-    } else {
-      setThreadId(uuid());
-    }
-  }, [threadIdFromPath]);
+
+  const { threadId, isNewThread, setIsNewThread, isMock } = useThreadChat();
+  useSpecificChatMode();

  const { showNotification } = useNotification();
-  const [finalState, setFinalState] = useState<AgentThreadState | null>(null);
-  const thread = useThreadStream({
-    isNewThread,
-    threadId,
+
+  const [thread, sendMessage] = useThreadStream({
+    threadId: isNewThread ? undefined : threadId,
+    context: settings.context,
+    isMock,
+    onStart: () => {
+      setIsNewThread(false);
+      history.replaceState(null, "", `/workspace/chats/${threadId}`);
+    },
    onFinish: (state) => {
-      setFinalState(state);
      if (document.hidden || !document.hasFocus()) {
        let body = "Conversation finished";
        const lastMessage = state.messages.at(-1);
        if (lastMessage) {
          const textContent = textOfMessage(lastMessage);
          if (textContent) {
-            if (textContent.length > 200) {
-              body = textContent.substring(0, 200) + "...";
-            } else {
-              body = textContent;
-            }
+            body =
+              textContent.length > 200
+                ? textContent.substring(0, 200) + "..."
+                : textContent;
          }
        }
-        showNotification(state.title, {
-          body,
-        });
+        showNotification(state.title, { body });
      }
    },
-  }) as unknown as UseStream<AgentThreadState>;
-  useEffect(() => {
-    if (thread.isLoading) setFinalState(null);
-  }, [thread.isLoading]);
-
-  const title = thread.values?.title ?? "Untitled";
-  useEffect(() => {
-    const pageTitle = isNewThread
-      ? t.pages.newChat
-      : thread.isThreadLoading
-        ? "Loading..."
-        : title === "Untitled" ? t.pages.untitled : title;
-    document.title = `${pageTitle} - ${t.pages.appName}`;
-  }, [
-    isNewThread,
-    t.pages.newChat,
-    t.pages.untitled,
-    t.pages.appName,
-    title,
-    thread.isThreadLoading,
-  ]);
-
-  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]);
-
-  const [todoListCollapsed, setTodoListCollapsed] = useState(true);
-
-  const handleSubmit = useSubmitThread({
-    isNewThread,
-    threadId,
-    thread,
-    threadContext: {
-      ...settings.context,
-      thinking_enabled: settings.context.mode !== "flash",
-      is_plan_mode:
-        settings.context.mode === "pro" || settings.context.mode === "ultra",
-      subagent_enabled: settings.context.mode === "ultra",
-      reasoning_effort: settings.context.reasoning_effort,
-    },
-    afterSubmit() {
-      router.push(pathOfThread(threadId!));
-    },
  });
+
+  const handleSubmit = useCallback(
+    (message: PromptInputMessage) => {
+      void sendMessage(threadId, message);
+    },
+    [sendMessage, threadId],
+  );
  const handleStop = useCallback(async () => {
    await thread.stop();
  }, [thread]);

-  if (!threadId) {
-    return null;
-  }
-
  return (
-    <ThreadContext.Provider value={{ threadId, thread }}>
-      <ResizablePanelGroup orientation="horizontal">
-        <ResizablePanel
-          className="relative"
-          defaultSize={artifactPanelOpen ? 46 : 100}
-          minSize={artifactPanelOpen ? 30 : 100}
-        >
-          <div className="relative flex size-full min-h-0 justify-between">
-            <header
-              className={cn(
-                "absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center px-4",
-                isNewThread
-                  ? "bg-background/0 backdrop-blur-none"
-                  : "bg-background/80 shadow-xs backdrop-blur",
-              )}
-            >
-              <div className="flex w-full items-center text-sm font-medium">
-                {title !== "Untitled" && (
-                  <ThreadTitle threadId={threadId} threadTitle={title} />
-                )}
-              </div>
-              <div>
-                {artifacts?.length > 0 && !artifactsOpen && (
-                  <Tooltip content="Show artifacts of this conversation">
-                    <Button
-                      className="text-muted-foreground hover:text-foreground"
-                      variant="ghost"
-                      onClick={() => {
-                        setArtifactsOpen(true);
-                        setSidebarOpen(false);
-                      }}
-                    >
-                      <FilesIcon />
-                      {t.common.artifacts}
-                    </Button>
-                  </Tooltip>
-                )}
-              </div>
-            </header>
-            <main className="flex min-h-0 max-w-full grow flex-col">
-              <div className="flex size-full justify-center">
-                <MessageList
-                  className={cn("size-full", !isNewThread && "pt-10")}
-                  threadId={threadId}
-                  thread={thread}
-                  messages={
-                    (finalState?.messages as Message[])
-                      ?? thread.messages
-                  }
-                  paddingBottom={todoListCollapsed ? 160 : 280}
-                />
-              </div>
-              <div className="absolute right-0 bottom-0 left-0 z-30 flex justify-center px-4">
-                <div
-                  className={cn(
-                    "relative w-full",
-                    isNewThread && "-translate-y-[calc(50vh-96px)]",
-                    isNewThread
-                      ? "max-w-(--container-width-sm)"
-                      : "max-w-(--container-width-md)",
-                  )}
-                >
-                  <div className="absolute -top-4 right-0 left-0 z-0">
-                    <div className="absolute right-0 bottom-0 left-0">
-                      <TodoList
-                        className="bg-background/5"
-                        todos={thread.values.todos ?? []}
-                        collapsed={todoListCollapsed}
-                        hidden={
-                          !thread.values.todos ||
-                          thread.values.todos.length === 0
-                        }
-                        onToggle={() =>
-                          setTodoListCollapsed(!todoListCollapsed)
-                        }
-                      />
-                    </div>
-                  </div>
-                  <InputBox
-                    className={cn("bg-background/5 w-full -translate-y-4")}
-                    isNewThread={isNewThread}
-                    autoFocus={isNewThread}
-                    status={thread.isLoading ? "streaming" : "ready"}
-                    context={settings.context}
-                    extraHeader={
-                      isNewThread && <Welcome mode={settings.context.mode} />
-                    }
-                    disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"}
-                    onContextChange={(context) =>
-                      setSettings("context", context)
-                    }
-                    onSubmit={handleSubmit}
-                    onStop={handleStop}
-                  />
-                  {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" && (
-                    <div className="text-muted-foreground/67 w-full translate-y-12 text-center text-xs">
-                      {t.common.notAvailableInDemoMode}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </main>
-          </div>
-        </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",
-          )}
-          defaultSize={artifactPanelOpen ? 64 : 0}
-          minSize={0}
-          maxSize={artifactPanelOpen ? undefined : 0}
-        >
-          <div
+    <ThreadContext.Provider value={{ thread, isMock }}>
+      <ChatBox threadId={threadId}>
+        <div className="relative flex size-full min-h-0 justify-between">
+          <header
            className={cn(
-              "h-full p-4 transition-transform duration-300 ease-in-out",
-              artifactPanelOpen ? "translate-x-0" : "translate-x-full",
+              "absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center px-4",
+              isNewThread
+                ? "bg-background/0 backdrop-blur-none"
+                : "bg-background/80 shadow-xs backdrop-blur",
            )}
          >
-            {selectedArtifact ? (
-              <ArtifactFileDetail
-                className="size-full"
-                filepath={selectedArtifact}
+            <div className="flex w-full items-center text-sm font-medium">
+              <ThreadTitle threadId={threadId} thread={thread} />
+            </div>
+            <div>
+              <ArtifactTrigger />
+            </div>
+          </header>
+          <main className="flex min-h-0 max-w-full grow flex-col">
+            <div className="flex size-full justify-center">
+              <MessageList
+                className={cn("size-full", !isNewThread && "pt-10")}
                threadId={threadId}
+                thread={thread}
              />
-            ) : (
-              <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>
+            <div className="absolute right-0 bottom-0 left-0 z-30 flex justify-center px-4">
+              <div
+                className={cn(
+                  "relative w-full",
+                  isNewThread && "-translate-y-[calc(50vh-96px)]",
+                  isNewThread
+                    ? "max-w-(--container-width-sm)"
+                    : "max-w-(--container-width-md)",
+                )}
+              >
+                <div className="absolute -top-4 right-0 left-0 z-0">
+                  <div className="absolute right-0 bottom-0 left-0">
+                    <TodoList
+                      className="bg-background/5"
+                      todos={thread.values.todos ?? []}
+                      hidden={
+                        !thread.values.todos || thread.values.todos.length === 0
+                      }
+                    />
+                  </div>
                </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>
+                <InputBox
+                  className={cn("bg-background/5 w-full -translate-y-4")}
+                  isNewThread={isNewThread}
+                  autoFocus={isNewThread}
+                  status={thread.isLoading ? "streaming" : "ready"}
+                  context={settings.context}
+                  extraHeader={
+                    isNewThread && <Welcome mode={settings.context.mode} />
+                  }
+                  disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"}
+                  onContextChange={(context) => setSettings("context", context)}
+                  onSubmit={handleSubmit}
+                  onStop={handleStop}
+                />
+                {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" && (
+                  <div className="text-muted-foreground/67 w-full translate-y-12 text-center text-xs">
+                    {t.common.notAvailableInDemoMode}
                  </div>
                )}
              </div>
-            )}
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
+            </div>
+          </main>
+        </div>
+      </ChatBox>
    </ThreadContext.Provider>
  );
 }
--- a/frontend/src/app/workspace/layout.tsx
+++ b/frontend/src/app/workspace/layout.tsx
@@ -1,12 +1,12 @@
 "use client";

 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useState } from "react";
 import { Toaster } from "sonner";

 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { WorkspaceSidebar } from "@/components/workspace/workspace-sidebar";
-import { useLocalSettings } from "@/core/settings";
+import { getLocalSettings, useLocalSettings } from "@/core/settings";

 const queryClient = new QueryClient();

@@ -14,7 +14,11 @@ export default function WorkspaceLayout({
  children,
 }: Readonly<{ children: React.ReactNode }>) {
  const [settings, setSettings] = useLocalSettings();
-  const [open, setOpen] = useState(() => !settings.layout.sidebar_collapsed);
+  const [open, setOpen] = useState(false); // SSR default: open (matches server render)
+  useLayoutEffect(() => {
+    // Runs synchronously before first paint on the client — no visual flash
+    setOpen(!getLocalSettings().layout.sidebar_collapsed);
+  }, []);
  useEffect(() => {
    setOpen(!settings.layout.sidebar_collapsed);
  }, [settings.layout.sidebar_collapsed]);
--- a/frontend/src/components/landing/sections/case-study-section.tsx
+++ b/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">
--- a/frontend/src/components/workspace/agent-welcome.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/components/workspace/agents/agent-card.tsx
+++ b/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>
+    </>
+  );
+}
--- a/frontend/src/components/workspace/agents/agent-gallery.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/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;
 }
-
--- a/frontend/src/components/workspace/artifacts/artifact-trigger.tsx
+++ b/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>
+  );
+};
--- a/frontend/src/components/workspace/artifacts/index.ts
+++ b/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";
--- a/frontend/src/components/workspace/chats/chat-box.tsx
+++ b/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 };
--- a/frontend/src/components/workspace/chats/index.ts
+++ b/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";
--- a/frontend/src/components/workspace/chats/use-chat-mode.ts
+++ b/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]);
+}
--- a/frontend/src/components/workspace/chats/use-thread-chat.ts
+++ b/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 };
+}
--- a/frontend/src/components/workspace/messages/context.ts
+++ b/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>(
--- a/frontend/src/components/workspace/messages/message-list-item.tsx
+++ b/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>
  );
 }
--- a/frontend/src/components/workspace/messages/message-list.tsx
+++ b/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 (
--- a/frontend/src/components/workspace/thread-title.tsx
+++ b/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>
+  );
 }
--- a/frontend/src/components/workspace/todo-list.tsx
+++ b/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">
--- a/frontend/src/components/workspace/workspace-nav-chat-list.tsx
+++ b/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>
  );
--- a/frontend/src/core/agents/api.ts
+++ b/frontend/src/core/agents/api.ts
@@ -0,0 +1,67 @@
+import { getBackendBaseURL } from "@/core/config";
+
+import type { Agent, CreateAgentRequest, UpdateAgentRequest } from "./types";
+
+export async function listAgents(): Promise<Agent[]> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents`);
+  if (!res.ok) throw new Error(`Failed to load agents: ${res.statusText}`);
+  const data = (await res.json()) as { agents: Agent[] };
+  return data.agents;
+}
+
+export async function getAgent(name: string): Promise<Agent> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents/${name}`);
+  if (!res.ok) throw new Error(`Agent '${name}' not found`);
+  return res.json() as Promise<Agent>;
+}
+
+export async function createAgent(request: CreateAgentRequest): Promise<Agent> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(request),
+  });
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(err.detail ?? `Failed to create agent: ${res.statusText}`);
+  }
+  return res.json() as Promise<Agent>;
+}
+
+export async function updateAgent(
+  name: string,
+  request: UpdateAgentRequest,
+): Promise<Agent> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents/${name}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(request),
+  });
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(err.detail ?? `Failed to update agent: ${res.statusText}`);
+  }
+  return res.json() as Promise<Agent>;
+}
+
+export async function deleteAgent(name: string): Promise<void> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents/${name}`, {
+    method: "DELETE",
+  });
+  if (!res.ok) throw new Error(`Failed to delete agent: ${res.statusText}`);
+}
+
+export async function checkAgentName(
+  name: string,
+): Promise<{ available: boolean; name: string }> {
+  const res = await fetch(
+    `${getBackendBaseURL()}/api/agents/check?name=${encodeURIComponent(name)}`,
+  );
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(
+      err.detail ?? `Failed to check agent name: ${res.statusText}`,
+    );
+  }
+  return res.json() as Promise<{ available: boolean; name: string }>;
+}
--- a/frontend/src/core/agents/hooks.ts
+++ b/frontend/src/core/agents/hooks.ts
@@ -0,0 +1,64 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import {
+  createAgent,
+  deleteAgent,
+  getAgent,
+  listAgents,
+  updateAgent,
+} from "./api";
+import type { CreateAgentRequest, UpdateAgentRequest } from "./types";
+
+export function useAgents() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["agents"],
+    queryFn: () => listAgents(),
+  });
+  return { agents: data ?? [], isLoading, error };
+}
+
+export function useAgent(name: string | null | undefined) {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["agents", name],
+    queryFn: () => getAgent(name!),
+    enabled: !!name,
+  });
+  return { agent: data ?? null, isLoading, error };
+}
+
+export function useCreateAgent() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (request: CreateAgentRequest) => createAgent(request),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["agents"] });
+    },
+  });
+}
+
+export function useUpdateAgent() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      name,
+      request,
+    }: {
+      name: string;
+      request: UpdateAgentRequest;
+    }) => updateAgent(name, request),
+    onSuccess: (_data, { name }) => {
+      void queryClient.invalidateQueries({ queryKey: ["agents"] });
+      void queryClient.invalidateQueries({ queryKey: ["agents", name] });
+    },
+  });
+}
+
+export function useDeleteAgent() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (name: string) => deleteAgent(name),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["agents"] });
+    },
+  });
+}
--- a/frontend/src/core/agents/index.ts
+++ b/frontend/src/core/agents/index.ts
@@ -0,0 +1,3 @@
+export * from "./api";
+export * from "./hooks";
+export * from "./types";
--- a/frontend/src/core/agents/types.ts
+++ b/frontend/src/core/agents/types.ts
@@ -0,0 +1,22 @@
+export interface Agent {
+  name: string;
+  description: string;
+  model: string | null;
+  tool_groups: string[] | null;
+  soul?: string | null;
+}
+
+export interface CreateAgentRequest {
+  name: string;
+  description?: string;
+  model?: string | null;
+  tool_groups?: string[] | null;
+  soul?: string;
+}
+
+export interface UpdateAgentRequest {
+  description?: string | null;
+  model?: string | null;
+  tool_groups?: string[] | null;
+  soul?: string | null;
+}
--- a/frontend/src/core/api/api-client.ts
+++ b/frontend/src/core/api/api-client.ts
@@ -5,9 +5,9 @@ import { Client as LangGraphClient } from "@langchain/langgraph-sdk/client";
 import { getLangGraphBaseURL } from "../config";

 let _singleton: LangGraphClient | null = null;
-export function getAPIClient(): LangGraphClient {
+export function getAPIClient(isMock?: boolean): LangGraphClient {
  _singleton ??= new LangGraphClient({
-    apiUrl: getLangGraphBaseURL(),
+    apiUrl: getLangGraphBaseURL(isMock),
  });
  return _singleton;
 }
--- a/frontend/src/core/artifacts/hooks.ts
+++ b/frontend/src/core/artifacts/hooks.ts
@@ -17,17 +17,18 @@ export function useArtifactContent({
  const isWriteFile = useMemo(() => {
    return filepath.startsWith("write-file:");
  }, [filepath]);
-  const { thread } = useThread();
+  const { thread, isMock } = useThread();
  const content = useMemo(() => {
    if (isWriteFile) {
      return loadArtifactContentFromToolCall({ url: filepath, thread });
    }
    return null;
  }, [filepath, isWriteFile, thread]);
+
  const { data, isLoading, error } = useQuery({
-    queryKey: ["artifact", filepath, threadId],
+    queryKey: ["artifact", filepath, threadId, isMock],
    queryFn: () => {
-      return loadArtifactContent({ filepath, threadId });
+      return loadArtifactContent({ filepath, threadId, isMock });
    },
    enabled,
    // Cache artifact content for 5 minutes to avoid repeated fetches (especially for .skill ZIP extraction)
--- a/frontend/src/core/artifacts/loader.ts
+++ b/frontend/src/core/artifacts/loader.ts
@@ -1,4 +1,4 @@
-import type { UseStream } from "@langchain/langgraph-sdk/react";
+import type { BaseStream } from "@langchain/langgraph-sdk/react";

 import type { AgentThreadState } from "../threads";

@@ -7,15 +7,17 @@ import { urlOfArtifact } from "./utils";
 export async function loadArtifactContent({
  filepath,
  threadId,
+  isMock,
 }: {
  filepath: string;
  threadId: string;
+  isMock?: boolean;
 }) {
  let enhancedFilepath = filepath;
  if (filepath.endsWith(".skill")) {
    enhancedFilepath = filepath + "/SKILL.md";
  }
-  const url = urlOfArtifact({ filepath: enhancedFilepath, threadId });
+  const url = urlOfArtifact({ filepath: enhancedFilepath, threadId, isMock });
  const response = await fetch(url);
  const text = await response.text();
  return text;
@@ -26,7 +28,7 @@ export function loadArtifactContentFromToolCall({
  thread,
 }: {
  url: string;
-  thread: UseStream<AgentThreadState>;
+  thread: BaseStream<AgentThreadState>;
 }) {
  const url = new URL(urlString);
  const toolCallId = url.searchParams.get("tool_call_id");
--- a/frontend/src/core/artifacts/utils.ts
+++ b/frontend/src/core/artifacts/utils.ts
@@ -5,11 +5,16 @@ export function urlOfArtifact({
  filepath,
  threadId,
  download = false,
+  isMock = false,
 }: {
  filepath: string;
  threadId: string;
  download?: boolean;
+  isMock?: boolean;
 }) {
+  if (isMock) {
+    return `${getBackendBaseURL()}/mock/api/threads/${threadId}/artifacts${filepath}${download ? "?download=true" : ""}`;
+  }
  return `${getBackendBaseURL()}/api/threads/${threadId}/artifacts${filepath}${download ? "?download=true" : ""}`;
 }

--- a/frontend/src/core/config/index.ts
+++ b/frontend/src/core/config/index.ts
@@ -8,9 +8,14 @@ export function getBackendBaseURL() {
  }
 }

-export function getLangGraphBaseURL() {
+export function getLangGraphBaseURL(isMock?: boolean) {
  if (env.NEXT_PUBLIC_LANGGRAPH_BASE_URL) {
    return env.NEXT_PUBLIC_LANGGRAPH_BASE_URL;
+  } else if (isMock) {
+    if (typeof window !== "undefined") {
+      return `${window.location.origin}/mock/api`;
+    }
+    return "http://localhost:3000/mock/api";
  } else {
    // LangGraph SDK requires a full URL, construct it from current origin
    if (typeof window !== "undefined") {
--- a/frontend/src/core/i18n/locales/en-US.ts
+++ b/frontend/src/core/i18n/locales/en-US.ts
@@ -151,6 +151,41 @@ export const enUS: Translations = {
    chats: "Chats",
    recentChats: "Recent chats",
    demoChats: "Demo chats",
+    agents: "Agents",
+  },
+
+  // Agents
+  agents: {
+    title: "Agents",
+    description:
+      "Create and manage custom agents with specialized prompts and capabilities.",
+    newAgent: "New Agent",
+    emptyTitle: "No custom agents yet",
+    emptyDescription:
+      "Create your first custom agent with a specialized system prompt.",
+    chat: "Chat",
+    delete: "Delete",
+    deleteConfirm:
+      "Are you sure you want to delete this agent? This action cannot be undone.",
+    deleteSuccess: "Agent deleted",
+    newChat: "New chat",
+    createPageTitle: "Design your Agent",
+    createPageSubtitle:
+      "Describe the agent you want — I'll help you create it through conversation.",
+    nameStepTitle: "Name your new Agent",
+    nameStepHint:
+      "Letters, digits, and hyphens only — stored lowercase (e.g. code-reviewer)",
+    nameStepPlaceholder: "e.g. code-reviewer",
+    nameStepContinue: "Continue",
+    nameStepInvalidError:
+      "Invalid name — use only letters, digits, and hyphens",
+    nameStepAlreadyExistsError: "An agent with this name already exists",
+    nameStepCheckError: "Could not verify name availability — please try again",
+    nameStepBootstrapMessage:
+      "The new custom agent name is {name}. Let's bootstrap it's **SOUL**.",
+    agentCreated: "Agent created!",
+    startChatting: "Start chatting",
+    backToGallery: "Back to Gallery",
  },

  // Breadcrumb
--- a/frontend/src/core/i18n/locales/types.ts
+++ b/frontend/src/core/i18n/locales/types.ts
@@ -99,6 +99,34 @@ export interface Translations {
    newChat: string;
    chats: string;
    demoChats: string;
+    agents: string;
+  };
+
+  // Agents
+  agents: {
+    title: string;
+    description: string;
+    newAgent: string;
+    emptyTitle: string;
+    emptyDescription: string;
+    chat: string;
+    delete: string;
+    deleteConfirm: string;
+    deleteSuccess: string;
+    newChat: string;
+    createPageTitle: string;
+    createPageSubtitle: string;
+    nameStepTitle: string;
+    nameStepHint: string;
+    nameStepPlaceholder: string;
+    nameStepContinue: string;
+    nameStepInvalidError: string;
+    nameStepAlreadyExistsError: string;
+    nameStepCheckError: string;
+    nameStepBootstrapMessage: string;
+    agentCreated: string;
+    startChatting: string;
+    backToGallery: string;
  };

  // Breadcrumb
--- a/frontend/src/core/i18n/locales/zh-CN.ts
+++ b/frontend/src/core/i18n/locales/zh-CN.ts
@@ -148,6 +148,36 @@ export const zhCN: Translations = {
    chats: "对话",
    recentChats: "最近的对话",
    demoChats: "演示对话",
+    agents: "智能体",
+  },
+
+  // Agents
+  agents: {
+    title: "智能体",
+    description: "创建和管理具有专属 Prompt 与能力的自定义智能体。",
+    newAgent: "新建智能体",
+    emptyTitle: "还没有自定义智能体",
+    emptyDescription: "创建你的第一个自定义智能体，设置专属系统提示词。",
+    chat: "对话",
+    delete: "删除",
+    deleteConfirm: "确定要删除该智能体吗？此操作不可撤销。",
+    deleteSuccess: "智能体已删除",
+    newChat: "新对话",
+    createPageTitle: "设计你的智能体",
+    createPageSubtitle: "描述你想要的智能体，我来帮你通过对话创建。",
+    nameStepTitle: "给新智能体起个名字",
+    nameStepHint:
+      "只允许字母、数字和连字符，存储时自动转为小写（例如 code-reviewer）",
+    nameStepPlaceholder: "例如 code-reviewer",
+    nameStepContinue: "继续",
+    nameStepInvalidError: "名称无效，只允许字母、数字和连字符",
+    nameStepAlreadyExistsError: "已存在同名智能体",
+    nameStepCheckError: "无法验证名称可用性，请稍后重试",
+    nameStepBootstrapMessage:
+      "新智能体的名称是 {name}，现在开始为它生成 **SOUL**。",
+    agentCreated: "智能体已创建！",
+    startChatting: "开始对话",
+    backToGallery: "返回 Gallery",
  },

  // Breadcrumb
--- a/frontend/src/core/settings/hooks.ts
+++ b/frontend/src/core/settings/hooks.ts
@@ -1,5 +1,4 @@
-import { useCallback, useState } from "react";
-import { useEffect } from "react";
+import { useCallback, useLayoutEffect, useState } from "react";

 import {
  DEFAULT_LOCAL_SETTINGS,
@@ -17,7 +16,7 @@ export function useLocalSettings(): [
 ] {
  const [mounted, setMounted] = useState(false);
  const [state, setState] = useState<LocalSettings>(DEFAULT_LOCAL_SETTINGS);
-  useEffect(() => {
+  useLayoutEffect(() => {
    if (!mounted) {
      setState(getLocalSettings());
    }
@@ -28,6 +27,7 @@ export function useLocalSettings(): [
      key: keyof LocalSettings,
      value: Partial<LocalSettings[keyof LocalSettings]>,
    ) => {
+      if (!mounted) return;
      setState((prev) => {
        const newState = {
          ...prev,
@@ -40,7 +40,7 @@ export function useLocalSettings(): [
        return newState;
      });
    },
-    [],
+    [mounted],
  );
  return [state, setter];
 }
--- a/frontend/src/core/threads/hooks.ts
+++ b/frontend/src/core/threads/hooks.ts
@@ -1,42 +1,63 @@
-import type { HumanMessage } from "@langchain/core/messages";
 import type { AIMessage } from "@langchain/langgraph-sdk";
 import type { ThreadsClient } from "@langchain/langgraph-sdk/client";
 import { useStream, type UseStream } from "@langchain/langgraph-sdk/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { toast } from "sonner";

 import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";

 import { getAPIClient } from "../api";
+import type { LocalSettings } from "../settings";
 import { useUpdateSubtask } from "../tasks/context";
 import { uploadFiles } from "../uploads";

-import type {
-  AgentThread,
-  AgentThreadContext,
-  AgentThreadState,
-} from "./types";
+import type { AgentThread, AgentThreadState } from "./types";
+
+export type ToolEndEvent = {
+  name: string;
+  data: unknown;
+};
+
+export type ThreadStreamOptions = {
+  threadId?: string | null | undefined;
+  context: LocalSettings["context"];
+  isMock?: boolean;
+  onStart?: (threadId: string) => void;
+  onFinish?: (state: AgentThreadState) => void;
+  onToolEnd?: (event: ToolEndEvent) => void;
+};

 export function useThreadStream({
  threadId,
-  isNewThread,
+  context,
+  isMock,
+  onStart,
  onFinish,
-}: {
-  isNewThread: boolean;
-  threadId: string | null | undefined;
-  onFinish?: (state: AgentThreadState) => void;
-}) {
+  onToolEnd,
+}: ThreadStreamOptions) {
+  const [_threadId, setThreadId] = useState<string | null>(threadId ?? null);
  const queryClient = useQueryClient();
  const updateSubtask = useUpdateSubtask();
  const thread = useStream<AgentThreadState>({
-    client: getAPIClient(),
+    client: getAPIClient(isMock),
    assistantId: "lead_agent",
-    threadId: isNewThread ? undefined : threadId,
+    threadId: _threadId,
    reconnectOnMount: true,
    fetchStateHistory: { limit: 1 },
+    onCreated(meta) {
+      setThreadId(meta.thread_id);
+      onStart?.(meta.thread_id);
+    },
+    onLangChainEvent(event) {
+      if (event.event === "on_tool_end") {
+        onToolEnd?.({
+          name: event.name,
+          data: event.data,
+        });
+      }
+    },
    onCustomEvent(event: unknown) {
-      console.info(event);
      if (
        typeof event === "object" &&
        event !== null &&
@@ -76,25 +97,13 @@ export function useThreadStream({
      );
    },
  });
-  return thread;
-}

-export function useSubmitThread({
-  threadId,
-  thread,
-  threadContext,
-  isNewThread,
-  afterSubmit,
-}: {
-  isNewThread: boolean;
-  threadId: string | null | undefined;
-  thread: UseStream<AgentThreadState>;
-  threadContext: Omit<AgentThreadContext, "thread_id">;
-  afterSubmit?: () => void;
-}) {
-  const queryClient = useQueryClient();
-  const callback = useCallback(
-    async (message: PromptInputMessage) => {
+  const sendMessage = useCallback(
+    async (
+      threadId: string,
+      message: PromptInputMessage,
+      extraContext?: Record<string, unknown>,
+    ) => {
      const text = message.text.trim();

      // Upload files first if any
@@ -163,10 +172,10 @@ export function useSubmitThread({
                },
              ],
            },
-          ] as HumanMessage[],
+          ],
        },
        {
-          threadId: isNewThread ? threadId! : undefined,
+          threadId: threadId,
          streamSubgraphs: true,
          streamResumable: true,
          streamMode: ["values", "messages-tuple", "custom"],
@@ -174,17 +183,21 @@ export function useSubmitThread({
            recursion_limit: 1000,
          },
          context: {
-            ...threadContext,
+            ...extraContext,
+            ...context,
+            thinking_enabled: context.mode !== "flash",
+            is_plan_mode: context.mode === "pro" || context.mode === "ultra",
+            subagent_enabled: context.mode === "ultra",
            thread_id: threadId,
          },
        },
      );
      void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
-      afterSubmit?.();
+      // afterSubmit?.();
    },
-    [thread, isNewThread, threadId, threadContext, queryClient, afterSubmit],
+    [thread, context, queryClient],
  );
-  return callback;
+  return [thread, sendMessage] as const;
 }

 export function useThreads(
--- a/frontend/src/core/threads/types.ts
+++ b/frontend/src/core/threads/types.ts
@@ -1,11 +1,10 @@
-import { type BaseMessage } from "@langchain/core/messages";
-import type { Thread } from "@langchain/langgraph-sdk";
+import type { Message, Thread } from "@langchain/langgraph-sdk";

 import type { Todo } from "../todos";

 export interface AgentThreadState extends Record<string, unknown> {
  title: string;
-  messages: BaseMessage[];
+  messages: Message[];
  artifacts: string[];
  todos?: Todo[];
 }
@@ -19,4 +18,5 @@ export interface AgentThreadContext extends Record<string, unknown> {
  is_plan_mode: boolean;
  subagent_enabled: boolean;
  reasoning_effort?: "minimal" | "low" | "medium" | "high";
+  agent_name?: string;
 }
--- a/frontend/src/core/threads/utils.ts
+++ b/frontend/src/core/threads/utils.ts
@@ -1,4 +1,4 @@
-import type { BaseMessage } from "@langchain/core/messages";
+import type { Message } from "@langchain/langgraph-sdk";

 import type { AgentThread } from "./types";

@@ -6,12 +6,15 @@ export function pathOfThread(threadId: string) {
  return `/workspace/chats/${threadId}`;
 }

-export function textOfMessage(message: BaseMessage) {
+export function textOfMessage(message: Message) {
  if (typeof message.content === "string") {
    return message.content;
  } else if (Array.isArray(message.content)) {
-    return message.content.find((part) => part.type === "text" && part.text)
-      ?.text as string;
+    for (const part of message.content) {
+      if (part.type === "text") {
+        return part.text;
+      }
+    }
  }
  return null;
 }