From 1c4a4525b3de6a12686222f7056ddbf6f3691e0b Mon Sep 17 00:00:00 2001
From: MT-Fire <798521692@qq.com>
Date: Wed, 18 Mar 2026 23:29:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=A7=E7=89=88=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E7=AC=AC=E4=B8=80=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docker/nginx/nginx.local.conf                 |   6 +-
 frontend/.vscode/settings.json                |  66 +-
 .../app/workspace/chats/[thread_id]/page.tsx  | 387 +++++-----
 frontend/src/app/workspace/layout.tsx         |  50 +-
 .../src/components/ai-elements/artifact.tsx   |  11 +-
 .../ai-elements/chain-of-thought.tsx          |   8 +-
 .../components/ai-elements/conversation.tsx   |   2 +-
 .../src/components/ai-elements/message.tsx    |   9 +-
 .../components/ai-elements/prompt-input.tsx   | 228 ++++--
 frontend/src/components/ai-elements/queue.tsx |   4 +-
 .../src/components/ai-elements/suggestion.tsx |   7 +-
 frontend/src/components/ui/button.tsx         |   2 +-
 frontend/src/components/ui/card.tsx           |   4 +-
 frontend/src/components/ui/dev-dialog.tsx     | 148 ++++
 frontend/src/components/ui/dropdown-menu.tsx  |   6 +-
 .../src/components/ui/dropdown-selector.tsx   |  55 ++
 frontend/src/components/ui/input-group.tsx    |  10 +-
 frontend/src/components/ui/resizable.tsx      |   2 +-
 frontend/src/components/ui/sidebar.tsx        |   5 +-
 frontend/src/components/ui/sonner.tsx         |  10 +-
 frontend/src/components/ui/tooltip.tsx        |   2 +-
 .../artifacts/artifact-file-detail.tsx        | 359 +++++++--
 .../artifacts/artifact-file-list.tsx          |   4 +-
 .../workspace/artifacts/context.tsx           |   7 +
 .../src/components/workspace/code-editor.tsx  |   4 +
 .../components/workspace/dev-todo-list.tsx    |  69 ++
 .../workspace/iframe-test-panel.tsx           | 225 ++++++
 .../src/components/workspace/input-box.tsx    | 702 ++++++++++--------
 .../workspace/messages/message-group.tsx      |   2 +-
 .../workspace/messages/message-list-item.tsx  |   2 +-
 .../src/components/workspace/use-chat-mode.ts |  42 ++
 frontend/src/components/workspace/welcome.tsx |  15 +-
 frontend/src/core/i18n/locales/en-US.ts       |  96 ++-
 frontend/src/core/i18n/locales/types.ts       |  53 ++
 frontend/src/core/i18n/locales/zh-CN.ts       |  87 ++-
 frontend/src/hooks/use-iframe-skill.ts        |  77 ++
 .../src/hooks/use-selected-skill-listener.ts  | 145 ++++
 frontend/src/styles/globals.css               |  81 +-
 38 files changed, 2277 insertions(+), 715 deletions(-)
 create mode 100644 frontend/src/components/ui/dev-dialog.tsx
 create mode 100644 frontend/src/components/ui/dropdown-selector.tsx
 create mode 100644 frontend/src/components/workspace/dev-todo-list.tsx
 create mode 100644 frontend/src/components/workspace/iframe-test-panel.tsx
 create mode 100644 frontend/src/components/workspace/use-chat-mode.ts
 create mode 100644 frontend/src/hooks/use-iframe-skill.ts
 create mode 100644 frontend/src/hooks/use-selected-skill-listener.ts

diff --git a/docker/nginx/nginx.local.conf b/docker/nginx/nginx.local.conf
index 50e5ac69..76504a60 100644
--- a/docker/nginx/nginx.local.conf
+++ b/docker/nginx/nginx.local.conf
@@ -16,15 +16,15 @@ http {
 
     # Upstream servers (using Docker service names for Docker Compose)
     upstream gateway {
-        server gateway:8001;
+        server localhost:8001;
     }
 
     upstream langgraph {
-        server langgraph:2024;
+        server localhost:2024;
     }
 
     upstream frontend {
-        server frontend:3000;
+        server localhost:3000;
     }
 
     server {
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
index 19bd6ebc..f06ac9c4 100644
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -1,3 +1,67 @@
 {
-  "window.title": "${activeEditorShort}${separator}${separator}deer-flow/frontend"
+  "window.title": "${activeEditorShort}${separator}${separator}deer-flow/frontend",
+  "todo-tree.regex.regex": "((%|#|//|<!--|\\{/\\*|^\\s*\\*)\\s*($TAGS)|^\\s*- \\[ \\])",
+  "todo-tree.general.tags": [
+    "TODO:",
+    "BUG:",
+    "TAG:",
+    "DONE:",
+    "MARK:",
+    "TEST:",
+    "XXX:"
+  ],
+  "todo-tree.regex.regexCaseSensitive": false,
+  "todo-tree.highlights.defaultHighlight": {
+    "foreground": "#000000",
+    "background": "#fff700",
+    "icon": "check",
+    "rulerColour": "#fff700",
+    "type": "tag",
+    "iconColour": "#fff700"
+  },
+  "todo-tree.highlights.customHighlight": {
+    "TODO:": {
+      "icon": "todo",
+      "background": "#fff700",
+      "rulerColour": "#fff700",
+      "iconColour": "#fff700"
+    },
+    "BUG:": {
+      "background": "#eb5c5c",
+      "icon": "bug",
+      "rulerColour": "#eb5c5c",
+      "iconColour": "#eb5c5c"
+    },
+    "TAG:": {
+      "background": "#38b2f4",
+      "icon": "tag",
+      "rulerColour": "#38b2f4",
+      "iconColour": "#38b2f4",
+      "rulerLane": "full"
+    },
+    "DONE:": {
+      "background": "#5eec95",
+      "icon": "check",
+      "rulerColour": "#5eec95",
+      "iconColour": "#5eec95"
+    },
+    "MARK:": {
+      "background": "#f90",
+      "icon": "note",
+      "rulerColour": "#f90",
+      "iconColour": "#f90"
+    },
+    "TEST:": {
+      "background": "#df7be6",
+      "icon": "flame",
+      "rulerColour": "#df7be6",
+      "iconColour": "#df7be6"
+    },
+    "XXX:": {
+      "background": "#d65d8e",
+      "icon": "versions",
+      "rulerColour": "#d65d8e",
+      "iconColour": "#d65d8e"
+    }
+  }
 }
diff --git a/frontend/src/app/workspace/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
index c52f083c..aab2ee4c 100644
--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
@@ -2,13 +2,20 @@
 
 import type { Message } from "@langchain/langgraph-sdk";
 import type { UseStream } from "@langchain/langgraph-sdk/react";
-import { FilesIcon, XIcon } from "lucide-react";
+import { FilesIcon, ListTodoIcon, XIcon } from "lucide-react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { ConversationEmptyState } from "@/components/ai-elements/conversation";
 import { usePromptInputController } from "@/components/ai-elements/prompt-input";
 import { Button } from "@/components/ui/button";
+import {
+  DevDialog,
+  DevDialogContent,
+  DevDialogFooter,
+  DevDialogHeader,
+  DevDialogTitle,
+} from "@/components/ui/dev-dialog";
 import {
   ResizableHandle,
   ResizablePanel,
@@ -20,6 +27,8 @@ import {
   ArtifactFileList,
   useArtifacts,
 } from "@/components/workspace/artifacts";
+import { Badge } from "@/components/ui/badge";
+import { DevTodoList } from "@/components/workspace/dev-todo-list";
 import { InputBox } from "@/components/workspace/input-box";
 import { MessageList } from "@/components/workspace/messages";
 import { ThreadContext } from "@/components/workspace/messages/context";
@@ -27,6 +36,9 @@ 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 { useSpecificChatMode } from "@/components/workspace/use-chat-mode";
+import { IframeTestPanel } from "@/components/workspace/iframe-test-panel";
+import { useSelectedSkillListener } from "@/hooks/use-selected-skill-listener";
 import { useI18n } from "@/core/i18n/hooks";
 import { useNotification } from "@/core/notification/hooks";
 import { useLocalSettings } from "@/core/settings";
@@ -45,6 +57,7 @@ import { cn } from "@/lib/utils";
 export default function ChatPage() {
   const { t } = useI18n();
   const router = useRouter();
+  useSpecificChatMode();
   const [settings, setSettings] = useLocalSettings();
   const { setOpen: setSidebarOpen } = useSidebar();
   const {
@@ -54,36 +67,12 @@ export default function ChatPage() {
     setArtifacts,
     select: selectArtifact,
     selectedArtifact,
+    fullscreen,
   } = 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]);
+
   // UI mode depends only on route: /workspace/chats/new is always "new page" mode.
   const isNewThread = useMemo(
     () => threadIdFromPath === "new",
@@ -106,31 +95,13 @@ export default function ChatPage() {
     return target === "skill" ? "skill" : undefined;
   }, [searchParams]);
 
-  const skillBootstrap = useMemo(() => {
-    const skillIdRaw = searchParams.get("skill_id")?.trim();
-    if (!skillIdRaw) return undefined;
-
-    const contentId = Number(skillIdRaw);
-    if (!Number.isFinite(contentId)) return undefined;
-
-    const languageTypeRaw =
-      searchParams.get("languageType")?.trim() ??
-      searchParams.get("language_type")?.trim();
-    const languageType = languageTypeRaw ? Number(languageTypeRaw) : 0;
-
-    return {
-      contentId,
-      languageType: Number.isFinite(languageType) ? languageType : 0,
-    };
-  }, [threadIdFromPath, searchParams]);
-
   const [threadId, setThreadId] = useState<string | null>(null);
   useEffect(() => {
     if (threadIdFromPath !== "new") {
       setThreadId(threadIdFromPath);
     } else {
       const queryThreadId = searchParams.get("thread_id")?.trim();
-      setThreadId(queryThreadId || uuid());
+      setThreadId(queryThreadId ?? uuid());
     }
   }, [threadIdFromPath, searchParams]);
 
@@ -143,11 +114,14 @@ export default function ChatPage() {
   );
 
   const { showNotification } = useNotification();
-  const [isSkillBootstrapping, setIsSkillBootstrapping] = useState(false);
-  const [skillBootstrapError, setSkillBootstrapError] = useState<string | null>(
-    null,
-  );
-  const skillBootstrappedKeyRef = useRef<string | null>(null);
+
+  // 监听宿主页 selectedSkill 消息
+  const {
+    selectedSkill,
+    skillError: selectedSkillError,
+    clearSkillError: clearSelectedSkillError,
+    isBootstrapping: isSelectedSkillBootstrapping,
+  } = useSelectedSkillListener({ threadId });
   const [finalState, setFinalState] = useState<AgentThreadState | null>(null);
   const thread = useThreadStream({
     // Keep UI in new-page mode, but runtime may reuse existing thread
@@ -240,55 +214,7 @@ export default function ChatPage() {
   }, [artifactsOpen, artifacts]);
 
   const [todoListCollapsed, setTodoListCollapsed] = useState(true);
-
-  useEffect(() => {
-    if (!threadId || !skillBootstrap?.contentId) {
-      setIsSkillBootstrapping(false);
-      setSkillBootstrapError(null);
-      return;
-    }
-
-    const languageType = skillBootstrap.languageType ?? 0;
-    const initKey = `${threadId}:${skillBootstrap.contentId}:${languageType}`;
-    if (skillBootstrappedKeyRef.current === initKey) {
-      return;
-    }
-
-    let cancelled = false;
-
-    const runBootstrap = async () => {
-      setIsSkillBootstrapping(true);
-      setSkillBootstrapError(null);
-      try {
-        await bootstrapRemoteSkill({
-          thread_id: threadId,
-          content_id: skillBootstrap.contentId,
-          language_type: languageType,
-          target_dir: "/mnt/user-data/uploads/skill",
-          clear_target: true,
-        });
-
-        if (!cancelled) {
-          skillBootstrappedKeyRef.current = initKey;
-          setIsSkillBootstrapping(false);
-        }
-      } catch (error) {
-        if (!cancelled) {
-          const message =
-            error instanceof Error ? error.message : "Skill 初始化失败";
-          setSkillBootstrapError(message);
-          setIsSkillBootstrapping(false);
-          showNotification("Skill 初始化失败", { body: message });
-        }
-      }
-    };
-
-    void runBootstrap();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [threadId, skillBootstrap, showNotification]);
+  const [showExitDialog, setShowExitDialog] = useState(false);
 
   const submitThread = useSubmitThread({
     isNewThread,
@@ -309,13 +235,13 @@ export default function ChatPage() {
   });
   const handleSubmit = useCallback(
     (message: Parameters<typeof submitThread>[0]) => {
-      if (isSkillBootstrapping) {
+      if (isSelectedSkillBootstrapping) {
         return;
       }
       setHasSubmitted(true);
       void submitThread(message);
     },
-    [isSkillBootstrapping, submitThread],
+    [isSelectedSkillBootstrapping, submitThread],
   );
   const handleStop = useCallback(async () => {
     await thread.stop();
@@ -329,29 +255,68 @@ export default function ChatPage() {
     <ThreadContext.Provider value={{ threadId, thread }}>
       <ResizablePanelGroup orientation="horizontal">
         <ResizablePanel
-          className="relative"
+          className="relative overflow-hidden rounded-[20px]"
           defaultSize={artifactPanelOpen ? 46 : 100}
           minSize={artifactPanelOpen ? 30 : 100}
         >
-          <div className="relative flex size-full min-h-0 justify-between">
+          <div className="relative flex size-full min-h-0 justify-between rounded-[20px]">
             <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",
+                "bg-background absolute top-0 right-0 left-0 z-30 mx-4 grid h-[58px] shrink-0 grid-cols-3 items-center border-b transition-all duration-300 ease-in-out",
+                isNewThread ? "hidden" : "",
               )}
             >
-              <div className="flex w-full items-center text-sm font-medium">
+              <div className="flex items-center justify-start overflow-hidden text-sm font-medium">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="px-[10px] py-[5px] text-sm font-medium text-[#150033] hover:text-[#150033]/80"
+                  onClick={() => setShowExitDialog(true)}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M3.5 10H13.25H15.6875H16.5M3.5 10L7.5625 6M3.5 10L7.5625 14"
+                      stroke="#666666"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </Button>
+              </div>
+              <div className="flex items-center justify-center overflow-hidden text-sm font-medium">
                 {title !== "Untitled" && (
                   <ThreadTitle threadId={threadId} threadTitle={title} />
                 )}
               </div>
-              <div>
-                {artifacts?.length > 0 && !artifactsOpen && (
-                  <Tooltip content="Show artifacts of this conversation">
+              <div className="flex items-center justify-end gap-2 overflow-hidden">
+                <DevTodoList
+                  className="bg-white"
+                  todos={thread.values.todos ?? []}
+                  hidden={
+                    !thread.values.todos || thread.values.todos.length === 0
+                  }
+                  trigger={
                     <Button
-                      className="text-muted-foreground hover:text-foreground"
+                      size="sm"
+                      variant="ghost"
+                      className="h-full px-[10px] py-[5px] text-sm font-medium text-[#150033] hover:text-[#150033]"
+                    >
+                      <ListTodoIcon className="size-4" /> To-dos
+                    </Button>
+                  }
+                />
+
+                {artifacts?.length > 0 && !artifactsOpen && (
+                  <Tooltip content="点击可查看生成的文件结果">
+                    <Button
+                      className="text-[#150033] hover:text-[#150033]/80"
                       variant="ghost"
                       onClick={() => {
                         setArtifactsOpen(true);
@@ -365,7 +330,12 @@ export default function ChatPage() {
                 )}
               </div>
             </header>
-            <main className="flex min-h-0 max-w-full grow flex-col">
+            <main
+              className={cn(
+                "flex min-h-0 max-w-full grow flex-col rounded-[20px]",
+                isNewThread ? "bg-white" : "bg-background",
+              )}
+            >
               <div className="flex size-full justify-center">
                 <MessageList
                   className={cn("size-full", !isNewThread && "pt-10")}
@@ -382,71 +352,6 @@ export default function ChatPage() {
                   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={
-                      suppressExistingThreadPrefetchUi
-                        ? "ready"
-                        : thread.isLoading
-                          ? "streaming"
-                          : "ready"
-                    }
-                    context={settings.context}
-                    extraHeader={
-                      isNewThread && <Welcome mode={settings.context.mode} />
-                    }
-                    disabled={
-                      env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" ||
-                      isSkillBootstrapping
-                    }
-                    onContextChange={(context) =>
-                      setSettings("context", context)
-                    }
-                    onSubmit={handleSubmit}
-                    onStop={handleStop}
-                  />
-                  {(isSkillBootstrapping || skillBootstrapError) && (
-                    <div className="text-muted-foreground w-full translate-y-8 text-center text-xs">
-                      {isSkillBootstrapping
-                        ? "正在初始化 Skill 文件..."
-                        : `Skill 初始化失败：${skillBootstrapError}`}
-                    </div>
-                  )}
-                  {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>
@@ -458,7 +363,7 @@ export default function ChatPage() {
         />
         <ResizablePanel
           className={cn(
-            "transition-all duration-300 ease-in-out",
+            "bg-background ml-[20px] rounded-[20px] transition-all duration-300 ease-in-out",
             !artifactsOpen && "opacity-0",
           )}
           defaultSize={artifactPanelOpen ? 64 : 0}
@@ -467,7 +372,7 @@ export default function ChatPage() {
         >
           <div
             className={cn(
-              "h-full p-4 transition-transform duration-300 ease-in-out",
+              "h-full w-full transition-transform duration-300 ease-in-out",
               artifactPanelOpen ? "translate-x-0" : "translate-x-full",
             )}
           >
@@ -478,7 +383,7 @@ export default function ChatPage() {
                 threadId={threadId}
               />
             ) : (
-              <div className="relative flex size-full justify-center">
+              <div className="relative flex size-full justify-center px-[20px]">
                 <div className="absolute top-1 right-1 z-30">
                   <Button
                     size="icon-sm"
@@ -499,7 +404,9 @@ export default function ChatPage() {
                 ) : (
                   <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>
+                      <h2 className="text-lg font-medium">
+                        {t.common.artifacts}
+                      </h2>
                     </header>
                     <main className="min-h-0 grow">
                       <ArtifactFileList
@@ -515,6 +422,120 @@ export default function ChatPage() {
           </div>
         </ResizablePanel>
       </ResizablePanelGroup>
+
+      {/* Fixed 底部居中输入框容器 */}
+      <div
+        className={cn(
+          "pointer-events-none fixed right-0 bottom-3 left-0 z-30 flex justify-center px-4",
+          "transition-all duration-300 ease-in-out",
+          fullscreen ? "right-[50%]" : "",
+        )}
+      >
+        <div
+          className={cn(
+            "pointer-events-auto relative w-full max-w-[720px]",
+            isNewThread && "top-[-65px] -translate-y-[calc(50vh-96px)]",
+          )}
+        >
+          <InputBox
+            className={cn("w-full rounded-[20px] bg-[#FBFAFC]")}
+            isNewThread={isNewThread}
+            autoFocus={isNewThread}
+            status={
+              suppressExistingThreadPrefetchUi
+                ? "ready"
+                : thread.isLoading
+                  ? "streaming"
+                  : "ready"
+            }
+            context={settings.context}
+            extraHeader={
+              <div className="flex flex-col gap-4">
+                {isNewThread && <Welcome mode={settings.context.mode} />}
+              </div>
+            }
+            disabled={
+              env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" ||
+              isSelectedSkillBootstrapping
+            }
+            onContextChange={(context) => setSettings("context", context)}
+            onSubmit={handleSubmit}
+            onStop={handleStop}
+          />
+          {isSelectedSkillBootstrapping && (
+            <div className="text-muted-foreground w-full translate-y-8 text-center text-xs">
+              正在初始化 Skill 文件...
+            </div>
+          )}
+          {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>
+
+      {/* 退出确认对话框 */}
+      <DevDialog open={showExitDialog} onOpenChange={setShowExitDialog}>
+        <DevDialogContent>
+          <DevDialogHeader>
+            <DevDialogTitle>提示</DevDialogTitle>
+          </DevDialogHeader>
+          <p className="text-muted-foreground text-sm">
+            退出后，当前会话结束并销毁，请先下载保存当前结果！
+          </p>
+          <DevDialogFooter>
+            <Button
+              className="w-full bg-[#f9f8fa] hover:bg-[#8E47F0] hover:text-white"
+              variant="ghost"
+              onClick={() => setShowExitDialog(false)}
+            >
+              取消
+            </Button>
+            <Button
+              className="w-full bg-[#f9f8fa] hover:bg-[#8E47F0] hover:text-white"
+              variant="ghost"
+              onClick={() => {
+                setShowExitDialog(false);
+                router.push("/workspace/chats/new");
+              }}
+            >
+              确定
+            </Button>
+          </DevDialogFooter>
+        </DevDialogContent>
+      </DevDialog>
+
+      {/* selectedSkill 失败：错误弹窗 */}
+      <DevDialog
+        open={!!selectedSkillError}
+        onOpenChange={(open) => {
+          if (!open) clearSelectedSkillError();
+        }}
+      >
+        <DevDialogContent>
+          <DevDialogHeader>
+            <DevDialogTitle>
+              ⚠️ {selectedSkillError?.title ?? "技能加载失败"}
+            </DevDialogTitle>
+          </DevDialogHeader>
+          <p className="text-muted-foreground text-sm">
+            {selectedSkillError?.message ?? "发生了未知错误，请稍后重试。"}
+          </p>
+          <DevDialogFooter singleColumn>
+            <Button
+              className="w-full bg-[#f9f8fa] hover:bg-[#8E47F0] hover:text-white"
+              variant="ghost"
+              onClick={clearSelectedSkillError}
+            >
+              关闭
+            </Button>
+          </DevDialogFooter>
+        </DevDialogContent>
+      </DevDialog>
+
+      {/* MARK:  开发测试：iframe 通信功能测试面板 */}
+      {/* <IframeTestPanel /> */}
     </ThreadContext.Provider>
   );
 }
diff --git a/frontend/src/app/workspace/layout.tsx b/frontend/src/app/workspace/layout.tsx
index aa67dfa1..67d53f91 100644
--- a/frontend/src/app/workspace/layout.tsx
+++ b/frontend/src/app/workspace/layout.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useCallback, useEffect, useState } from "react";
-import { Toaster } from "sonner";
+import { useCallback, useEffect, useLayoutEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { Toaster } from "@/components/ui/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 +15,16 @@ 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)
+  const searchParams = useSearchParams();
+
+  // iframe 技能模式（mode=skill）时隐藏侧边栏
+  const isSkillMode = searchParams.get("mode") === "skill";
+
+  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]);
@@ -32,10 +42,38 @@ export default function WorkspaceLayout({
         open={open}
         onOpenChange={handleOpenChange}
       >
-        <WorkspaceSidebar />
+        {/* MARK:！！！！ 生产环境下必须注释才能提交！！！！ */}
+        {/* {!isSkillMode && <WorkspaceSidebar className="" />} */}
         <SidebarInset className="min-w-0">{children}</SidebarInset>
       </SidebarProvider>
-      <Toaster position="top-center" />
+      <Toaster
+        position="top-center"
+        toastOptions={{
+          duration: 2200,
+          classNames: {
+            toast: [
+              /* 灰色圆角矩形容器 */
+              "rounded-[20px] border-none",
+              /* 浅灰色背景 + 轻微透明 */
+              "bg-[#999999]! backdrop-blur-sm",
+              /* 阴影极轻 */
+              "shadow-[0_2px_12px_0_rgba(0,0,0,0.18)]",
+              /* 内边距：宽松居中 */
+              "px-5 py-2.5",
+              /* 单行布局，内容水平居中 */
+              "flex items-center justify-center gap-0",
+              /* 整体文字样式 */
+              "text-white text-sm font-normal font-sans",
+              /* 去掉 icon 区域间距 */
+              "[&>[data-icon]]:hidden",
+            ].join(" "),
+            title:
+              "text-white! text-sm font-normal text-center w-full leading-snug",
+            description: "hidden",
+            icon: "hidden",
+          },
+        }}
+      />
     </QueryClientProvider>
   );
 }
diff --git a/frontend/src/components/ai-elements/artifact.tsx b/frontend/src/components/ai-elements/artifact.tsx
index 550dfa11..4867b22a 100644
--- a/frontend/src/components/ai-elements/artifact.tsx
+++ b/frontend/src/components/ai-elements/artifact.tsx
@@ -16,7 +16,7 @@ export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
 export const Artifact = ({ className, ...props }: ArtifactProps) => (
   <div
     className={cn(
-      "bg-background flex flex-col overflow-hidden rounded-lg border shadow-lg",
+      "bg-background flex flex-col overflow-hidden rounded-[20px] px-[20px] pt-[15px]",
       className,
     )}
     {...props}
@@ -31,7 +31,7 @@ export const ArtifactHeader = ({
 }: ArtifactHeaderProps) => (
   <div
     className={cn(
-      "bg-muted/50 flex items-center justify-between border-b px-4 py-3",
+      "mb-[20px] grid grid-cols-3 items-center justify-between",
       className,
     )}
     {...props}
@@ -143,8 +143,7 @@ export const ArtifactContent = ({
   className,
   ...props
 }: ArtifactContentProps) => (
-  <div
-    className={cn("min-h-0 flex-1 overflow-auto p-4", className)}
-    {...props}
-  />
+  <div className="min-h-0 flex-1 overflow-auto">
+    <div className={cn("mb-[208px] p-4", className)} {...props} />
+  </div>
 );
diff --git a/frontend/src/components/ai-elements/chain-of-thought.tsx b/frontend/src/components/ai-elements/chain-of-thought.tsx
index cd3a6b7a..1b61a51d 100644
--- a/frontend/src/components/ai-elements/chain-of-thought.tsx
+++ b/frontend/src/components/ai-elements/chain-of-thought.tsx
@@ -147,7 +147,11 @@ export const ChainOfThoughtStep = memo(
         {...props}
       >
         <div className="relative mt-0.5">
-          {isValidElement(Icon) ? Icon : <Icon className="size-4" />}
+          {isValidElement(Icon) ? (
+            Icon
+          ) : (
+            <Icon className="size-4 stroke-[1.5px] stroke-[#333333] text-[#333333]" />
+          )}
           <div className="bg-border absolute top-7 bottom-0 left-1/2 -mx-px w-px" />
         </div>
         <div className="flex-1 space-y-2 overflow-hidden">
@@ -202,7 +206,7 @@ export const ChainOfThoughtContent = memo(
       <Collapsible open={isOpen}>
         <CollapsibleContent
           className={cn(
-            "mt-2 space-y-3",
+            "mt-2 space-y-3 bg-[#ffffff]",
             "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
             className,
           )}
diff --git a/frontend/src/components/ai-elements/conversation.tsx b/frontend/src/components/ai-elements/conversation.tsx
index 4842cc3f..7afa8be0 100644
--- a/frontend/src/components/ai-elements/conversation.tsx
+++ b/frontend/src/components/ai-elements/conversation.tsx
@@ -28,7 +28,7 @@ export const ConversationContent = ({
   ...props
 }: ConversationContentProps) => (
   <StickToBottom.Content
-    className={cn("flex flex-col gap-8 p-4", className)}
+    className={cn("flex flex-col gap-8 p-[20px]", className)}
     {...props}
   />
 );
diff --git a/frontend/src/components/ai-elements/message.tsx b/frontend/src/components/ai-elements/message.tsx
index f929e147..8f235da3 100644
--- a/frontend/src/components/ai-elements/message.tsx
+++ b/frontend/src/components/ai-elements/message.tsx
@@ -27,8 +27,10 @@ export type MessageProps = HTMLAttributes<HTMLDivElement> & {
 export const Message = ({ className, from, ...props }: MessageProps) => (
   <div
     className={cn(
-      "group flex w-full flex-col gap-2",
-      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
+      "group flex w-full flex-col gap-2 rounded-[10px] p-[20px]",
+      from === "user"
+        ? "is-user ml-auto justify-end"
+        : "is-assistant bg-[#ffffff]",
       className,
     )}
     {...props}
@@ -44,7 +46,8 @@ export const MessageContent = ({
 }: MessageContentProps) => (
   <div
     className={cn(
-      "is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-hidden",
+      "is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-visible",
+      "group-[.is-user]:overflow-hidden",
       "group-[.is-user]:bg-secondary group-[.is-user]:text-foreground group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:px-4 group-[.is-user]:py-3",
       "group-[.is-assistant]:text-foreground",
       className,
diff --git a/frontend/src/components/ai-elements/prompt-input.tsx b/frontend/src/components/ai-elements/prompt-input.tsx
index 4e3a1950..dd96c28b 100644
--- a/frontend/src/components/ai-elements/prompt-input.tsx
+++ b/frontend/src/components/ai-elements/prompt-input.tsx
@@ -35,6 +35,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
+import { Tooltip } from "../workspace/tooltip";
 import type { ChatStatus, FileUIPart } from "ai";
 import {
   ArrowUpIcon,
@@ -70,6 +71,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { useI18n } from "@/core/i18n/hooks";
 
 // ============================================================================
 // Provider Context & Types
@@ -295,81 +297,112 @@ export function PromptInputAttachment({
     data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
   const isImage = mediaType === "image";
 
-  const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
+  const truncateFilename = (name: string, maxLen: number = 10) => {
+    if (name.length <= maxLen) return name;
+    const ext = name.slice(name.lastIndexOf("."));
+    const baseName = name.slice(0, name.lastIndexOf("."));
+    const truncated = baseName.slice(0, maxLen - ext.length - 3);
+    return truncated + "..." + ext;
+  };
 
   return (
-    <PromptInputHoverCard>
-      <HoverCardTrigger asChild>
-        <div
-          className={cn(
-            "group border-border hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 relative flex h-8 cursor-pointer items-center gap-1.5 rounded-md border px-1.5 text-sm font-medium transition-all select-none",
-            className,
-          )}
-          key={data.id}
-          {...props}
-        >
-          <div className="relative size-5 shrink-0">
-            <div className="bg-background absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded transition-opacity group-hover:opacity-0">
-              {isImage ? (
-                <img
-                  alt={filename || "attachment"}
-                  className="size-5 object-cover"
-                  height={20}
-                  src={data.url}
-                  width={20}
-                />
-              ) : (
-                <div className="text-muted-foreground flex size-5 items-center justify-center">
-                  <PaperclipIcon className="size-3" />
-                </div>
-              )}
-            </div>
-            <Button
+    <div
+      className={cn(
+        "group relative flex size-16 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg transition-all select-none",
+        isImage ? "p-0" : "bg-gray-100 dark:bg-gray-700",
+        className,
+      )}
+      key={data.id}
+      {...props}
+    >
+      {isImage ? (
+        <>
+          <img
+            alt={filename || "attachment"}
+            className="size-full object-cover"
+            src={data.url}
+          />
+          {/* 悬浮遮罩层 */}
+          <div
+            className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
+            style={{ borderRadius: "10px", background: "rgba(0, 0, 0, 0.60)" }}
+          >
+            {/* 眼睛图标 - 居中 */}
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+            >
+              <path
+                d="M10 4.75C13.3315 4.75 16.4669 6.61444 18.9805 9.88281C19.0335 9.95183 19.0335 10.0482 18.9805 10.1172C16.4669 13.3856 13.3315 15.25 10 15.25C6.66835 15.2499 3.53309 13.3857 1.01953 10.1172C0.966466 10.0482 0.966465 9.95182 1.01953 9.88281C3.53309 6.61435 6.66835 4.75014 10 4.75Z"
+                stroke="white"
+                strokeWidth="1.5"
+              />
+              <path
+                d="M10 7.75C11.2426 7.75 12.25 8.75736 12.25 10C12.25 11.2426 11.2426 12.25 10 12.25C8.75736 12.25 7.75 11.2426 7.75 10C7.75 8.75736 8.75736 7.75 10 7.75Z"
+                stroke="white"
+                strokeWidth="1.5"
+              />
+            </svg>
+            {/* 删除按钮 - 右上角 */}
+            <button
               aria-label="Remove attachment"
-              className="absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5"
+              className="absolute top-1.5 right-1.5 z-10 flex size-4 cursor-pointer items-center justify-center rounded-sm transition-colors hover:bg-white/20"
               onClick={(e) => {
                 e.stopPropagation();
                 attachments.remove(data.id);
               }}
               type="button"
-              variant="ghost"
             >
-              <XIcon />
-              <span className="sr-only">Remove</span>
-            </Button>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="8"
+                height="8"
+                viewBox="0 0 8 8"
+                fill="none"
+              >
+                <path
+                  d="M0.75 0.75L6.74995 6.74995"
+                  stroke="white"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+                <path
+                  d="M6.75 0.75L0.750025 6.74992"
+                  stroke="white"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </button>
           </div>
-
-          <span className="flex-1 truncate">{attachmentLabel}</span>
-        </div>
-      </HoverCardTrigger>
-      <PromptInputHoverCardContent className="w-auto p-2">
-        <div className="w-auto space-y-3">
-          {isImage && (
-            <div className="flex max-h-96 w-96 items-center justify-center overflow-hidden rounded-md border">
-              <img
-                alt={filename || "attachment preview"}
-                className="max-h-full max-w-full object-contain"
-                height={384}
-                src={data.url}
-                width={448}
-              />
-            </div>
-          )}
-          <div className="flex items-center gap-2.5">
-            <div className="min-w-0 flex-1 space-y-1 px-0.5">
-              <h4 className="truncate text-sm leading-none font-semibold">
-                {filename || (isImage ? "Image" : "Attachment")}
-              </h4>
-              {data.mediaType && (
-                <p className="text-muted-foreground truncate font-mono text-xs">
-                  {data.mediaType}
-                </p>
-              )}
-            </div>
+        </>
+      ) : (
+        <>
+          <div className="flex flex-col items-center justify-center gap-1 px-1">
+            <PaperclipIcon className="size-6 text-gray-400" />
+            <span className="max-w-full truncate text-center text-[10px] text-gray-500">
+              {truncateFilename(filename)}
+            </span>
           </div>
-        </div>
-      </PromptInputHoverCardContent>
-    </PromptInputHoverCard>
+          {/* 关闭按钮 - 右上角 */}
+          <button
+            aria-label="Remove attachment"
+            className="absolute top-1 right-1 z-10 flex size-5 cursor-pointer items-center justify-center rounded bg-white/90 transition-colors hover:bg-white dark:bg-gray-800/90 dark:hover:bg-gray-800"
+            onClick={(e) => {
+              e.stopPropagation();
+              attachments.remove(data.id);
+            }}
+            type="button"
+          >
+            <XIcon className="size-3 text-gray-600 dark:text-gray-300" />
+            <span className="sr-only">Remove</span>
+          </button>
+        </>
+      )}
+    </div>
   );
 }
 
@@ -393,13 +426,14 @@ export function PromptInputAttachments({
 
   return (
     <div
-      className={cn("flex w-full flex-wrap items-center gap-2 p-3", className)}
+      className={cn(
+        "inline-flex flex-row flex-nowrap items-center gap-2 rounded-xl p-2",
+        className,
+      )}
       {...props}
     >
       {attachments.files.map((file) => (
-        <Fragment key={file.id}>
-          <div className="max-w-60">{children(file)}</div>
-        </Fragment>
+        <Fragment key={file.id}>{children(file)}</Fragment>
       ))}
     </div>
   );
@@ -457,10 +491,13 @@ export type PromptInputProps = Omit<
     message: PromptInputMessage,
     event: FormEvent<HTMLFormElement>,
   ) => void | Promise<void>;
+  // className for InputGroup (passes through to inner InputGroup component)
+  inputGroupClassName?: string;
 };
 
 export const PromptInput = ({
   className,
+  inputGroupClassName,
   accept,
   disabled,
   multiple,
@@ -794,7 +831,7 @@ export const PromptInput = ({
         ref={formRef}
         {...props}
       >
-        <InputGroup>{children}</InputGroup>
+        <InputGroup className={inputGroupClassName}>{children}</InputGroup>
       </form>
     </>
   );
@@ -1027,32 +1064,63 @@ export type PromptInputSubmitProps = ComponentProps<typeof InputGroupButton> & {
 export const PromptInputSubmit = ({
   className,
   variant = "default",
-  size = "icon-sm",
+  size = "sm",
   status,
+  disabled,
   children,
   ...props
 }: PromptInputSubmitProps) => {
+  const controller = useOptionalPromptInputController();
+  const { t } = useI18n();
+
+  // 判断是否有内容可发送
+  const hasContent = controller
+    ? controller.textInput.value.trim().length > 0 ||
+      controller.attachments.files.length > 0
+    : false;
+
+  // 正在 streaming 时不允许发送
+  // const isStreaming = status === "streaming" || status === "submitted";
+
+  // const isDisabled = disabled || !hasContent || isStreaming;
+
   let Icon = <ArrowUpIcon className="size-4" />;
 
+  let text: string = "发送";
+
   if (status === "submitted") {
     Icon = <Loader2Icon className="size-4 animate-spin" />;
+    text = "生成中...";
   } else if (status === "streaming") {
     Icon = <SquareIcon className="size-4" />;
+    text = "停止";
   } else if (status === "error") {
     Icon = <XIcon className="size-4" />;
+    text = "错误";
   }
 
   return (
-    <InputGroupButton
-      aria-label="Submit"
-      className={cn(className)}
-      size={size}
-      type="submit"
-      variant={variant}
-      {...props}
-    >
-      {children ?? Icon}
-    </InputGroupButton>
+    <Tooltip content={t.inputBox.sendMessagePrice}>
+      <InputGroupButton
+        aria-label="Submit"
+        // 被button{bgc:#fff}覆盖了，只能加"!"
+        className={cn(
+          "h-[40px] w-[140px] rounded-[10px] border-0 font-bold transition-all",
+          // isDisabled
+          //   ? "cursor-not-allowed !bg-gray-200 text-gray-400":
+          "!bg-[#F0E8FB] text-[#8E47F0] hover:!bg-[#8E47F0] hover:text-[#FFFFFF]",
+          className,
+        )}
+        size={size}
+        type="submit"
+        variant={variant}
+        // disabled={isDisabled}
+        {...props}
+      >
+        {/* {children ?? Icon} */}
+        {text}
+      </InputGroupButton>
+    </Tooltip>
   );
 };
 
diff --git a/frontend/src/components/ai-elements/queue.tsx b/frontend/src/components/ai-elements/queue.tsx
index 4a69d37d..a9c5a74e 100644
--- a/frontend/src/components/ai-elements/queue.tsx
+++ b/frontend/src/components/ai-elements/queue.tsx
@@ -186,8 +186,8 @@ export const QueueList = ({
   className,
   ...props
 }: QueueListProps) => (
-  <ScrollArea className={cn("mt-2 -mb-1", className)} {...props}>
-    <div className="max-h-40 pr-4">
+  <ScrollArea className={cn("-mb-1", className)} {...props}>
+    <div className="max-h-40">
       <ul>{children}</ul>
     </div>
   </ScrollArea>
diff --git a/frontend/src/components/ai-elements/suggestion.tsx b/frontend/src/components/ai-elements/suggestion.tsx
index 7c06e9ce..a640835d 100644
--- a/frontend/src/components/ai-elements/suggestion.tsx
+++ b/frontend/src/components/ai-elements/suggestion.tsx
@@ -61,16 +61,17 @@ export const Suggestion = ({
   return (
     <Button
       className={cn(
-        "text-muted-foreground cursor-pointer rounded-full px-4 text-xs font-normal",
+        "cursor-pointer rounded-full px-[20px] py-[15px] text-xs font-normal",
+        "bg-[#F9F8FA] text-[#666666] border-none",
+        "hover:bg-[#EAE9EB] hover:text-[#150033]",
         className,
       )}
       onClick={handleClick}
       size={size}
       type="button"
-      variant={variant}
       {...props}
     >
-      {Icon && <Icon className="size-4" />}
+      {/* {Icon && <Icon className="size-4" />} */}
       {children || suggestion}
     </Button>
   );
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index f332e0d9..f11b51b9 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -18,7 +18,7 @@ const buttonVariants = cva(
         secondary:
           "cursor-pointer bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
-          "cursor-pointer hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "cursor-pointer bg-transparent hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "cursor-pointer text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index 4f880247..48ae7eb2 100644
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-[20px]",
         className,
       )}
       {...props}
@@ -20,7 +20,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/dev-dialog.tsx b/frontend/src/components/ui/dev-dialog.tsx
new file mode 100644
index 00000000..36b600bf
--- /dev/null
+++ b/frontend/src/components/ui/dev-dialog.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function DevDialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dev-dialog" {...props} />;
+}
+
+function DevDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dev-dialog-trigger" {...props} />;
+}
+
+function DevDialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dev-dialog-portal" {...props} />;
+}
+
+function DevDialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dev-dialog-close" {...props} />;
+}
+
+function DevDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dev-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DevDialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DevDialogPortal data-slot="dev-dialog-portal">
+      <DevDialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dev-dialog-content"
+        className={cn(
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-[400px] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-[#ffffff] p-[40px] shadow-lg duration-200 outline-none sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dev-dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DevDialogPortal>
+  );
+}
+
+function DevDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dev-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DevDialogFooter({
+  className,
+  singleColumn = false,
+  ...props
+}: React.ComponentProps<"div"> & { singleColumn?: boolean }) {
+  return (
+    <div
+      data-slot="dev-dialog-footer"
+      className={cn(
+        "grid w-full justify-between gap-[30px] sm:flex-row",
+        singleColumn ? "grid-cols-1" : "grid-cols-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DevDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dev-dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DevDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dev-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  DevDialog,
+  DevDialogClose,
+  DevDialogContent,
+  DevDialogDescription,
+  DevDialogFooter,
+  DevDialogHeader,
+  DevDialogOverlay,
+  DevDialogPortal,
+  DevDialogTitle,
+  DevDialogTrigger,
+};
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index 0329b9b0..3fe3d08d 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -21,11 +21,13 @@ function DropdownMenuPortal({
 }
 
 function DropdownMenuTrigger({
+  className,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
   return (
     <DropdownMenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
+      className={cn(className)}
       {...props}
     />
   );
@@ -42,7 +44,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[20px] border p-[20px] shadow-md",
           className,
         )}
         {...props}
@@ -230,7 +232,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-[20px] border p-1 shadow-lg",
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/dropdown-selector.tsx b/frontend/src/components/ui/dropdown-selector.tsx
new file mode 100644
index 00000000..8d1f6da8
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-selector.tsx
@@ -0,0 +1,55 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export interface DropdownSelectorOption<T extends string> {
+  value: T;
+  label: string;
+}
+
+interface DropdownSelectorProps<T extends string> {
+  value: T;
+  options: DropdownSelectorOption<T>[];
+  onChange: (value: T) => void;
+  triggerClassName?: string;
+  contentClassName?: string;
+}
+
+export function DropdownSelector<T extends string>({
+  value,
+  options,
+  onChange,
+  triggerClassName,
+  contentClassName,
+}: DropdownSelectorProps<T>) {
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className={
+          triggerClassName ??
+          "border-none bg-transparent shadow-none select-none focus:outline-none"
+        }
+      >
+        {selectedOption?.label ?? value}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className={contentClassName}>
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={(v) => onChange(v as T)}
+        >
+          {options.map((option) => (
+            <DropdownMenuRadioItem key={option.value} value={option.value}>
+              {option.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/frontend/src/components/ui/input-group.tsx b/frontend/src/components/ui/input-group.tsx
index e35f75b2..86505606 100644
--- a/frontend/src/components/ui/input-group.tsx
+++ b/frontend/src/components/ui/input-group.tsx
@@ -14,20 +14,20 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "group/input-group border-input/50 dark:bg-background/80 relative flex w-full items-center rounded-md border bg-white/80 shadow-xs transition-[color,box-shadow] outline-none",
+        "group/input-group dark:bg-background/80 relative flex w-full max-w-[720px] items-center overflow-hidden rounded-md bg-[#FBFAFC] shadow-[0_0_20px_0_rgba(0,0,0,0.10)] transition-[color,box-shadow] outline-none",
         "h-9 min-w-0 has-[>textarea]:h-auto",
 
         // Variants based on alignment.
         "has-[>[data-align=inline-start]]:[&>input]:pl-2",
         "has-[>[data-align=inline-end]]:[&>input]:pr-2",
         "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        "has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
 
         // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-input has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
 
         // Error state.
-        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
 
         className,
       )}
@@ -152,7 +152,7 @@ function InputGroupTextarea({
     <Textarea
       data-slot="input-group-control"
       className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        "flex-1 resize-none rounded-none border-0 bg-transparent p-[20px] shadow-none focus-visible:ring-0 dark:bg-transparent",
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/resizable.tsx b/frontend/src/components/ui/resizable.tsx
index 2a04e8ef..18577c8e 100644
--- a/frontend/src/components/ui/resizable.tsx
+++ b/frontend/src/components/ui/resizable.tsx
@@ -39,7 +39,7 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
index c232e36c..5b6a6a96 100644
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -139,7 +139,7 @@ function SidebarProvider({
             } as React.CSSProperties
           }
           className={cn(
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar m-auto flex min-h-svh w-full overflow-hidden rounded-t-[20px]",
             className,
           )}
           {...props}
@@ -207,6 +207,7 @@ function Sidebar({
 
   return (
     <div
+      // !
       className="group peer text-sidebar-foreground hidden md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
@@ -309,7 +310,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
+        "relative flex w-full flex-1 flex-col",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className,
       )}
diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
index 28c5ec35..64734467 100644
--- a/frontend/src/components/ui/sonner.tsx
+++ b/frontend/src/components/ui/sonner.tsx
@@ -18,11 +18,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
+        success: null,
+        info: null,
+        warning: null,
+        error: null,
+        loading: null,
       }}
       style={
         {
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
index ad590050..91f395c1 100644
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -46,7 +46,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset ?? 4}
         className={cn(
-          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background dark:text-foreground z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md border px-3 py-1.5 text-xs text-balance shadow-xs dark:border-white/18 dark:bg-[#050504]",
+          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-tooltip-background text-background dark:text-foreground z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md border px-3 py-1.5 text-xs text-balance shadow-xs dark:border-white/18 dark:bg-[#050504]",
           className,
         )}
         {...props}
diff --git a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
index 9796a746..93acfa0f 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -7,10 +7,21 @@ import {
   PackageIcon,
   SquareArrowOutUpRightIcon,
   XIcon,
+  ZoomIn,
+  ZoomOut,
+  type LucideIcon,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type HTMLAttributes,
+} from "react";
 import { toast } from "sonner";
 import { Streamdown } from "streamdown";
+import { DropdownSelector } from "@/components/ui/dropdown-selector";
 
 import {
   Artifact,
@@ -54,6 +65,7 @@ export function ArtifactFileDetail({
 }) {
   const { t } = useI18n();
   const { artifacts, setOpen, select } = useArtifacts();
+  const [fullscreen, setFullscreen] = useState(false);
   const isWriteFile = useMemo(() => {
     return filepathFromProps.startsWith("write-file:");
   }, [filepathFromProps]);
@@ -90,8 +102,42 @@ export function ArtifactFileDetail({
 
   const displayContent = content ?? "";
 
+  const artifactOptions = useMemo(() => {
+    return (artifacts ?? []).map((artifactPath) => ({
+      value: artifactPath,
+      label: getFileName(artifactPath),
+    }));
+  }, [artifacts]);
+
   const [viewMode, setViewMode] = useState<"code" | "preview">("code");
   const [isInstalling, setIsInstalling] = useState(false);
+  const [zoom, setZoom] = useState(100);
+
+  // 全屏切换处理
+  const handleFullscreenToggle = useCallback(() => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen().catch((err) => {
+        console.error("无法进入全屏模式:", err);
+      });
+      setFullscreen(true);
+    } else {
+      document.exitFullscreen().catch((err) => {
+        console.error("无法退出全屏模式:", err);
+      });
+      setFullscreen(false);
+    }
+  }, [setFullscreen]);
+
+  // 监听全屏变化
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, [setFullscreen]);
 
   useEffect(() => {
     if (previewable) {
@@ -124,40 +170,19 @@ export function ArtifactFileDetail({
   }, [threadId, filepath, isInstalling]);
   return (
     <Artifact className={cn(className)}>
-      <ArtifactHeader className="px-2">
-        <div className="flex items-center gap-2">
-          <ArtifactTitle>
-            {isWriteFile ? (
-              <div className="px-2">{getFileName(filepath)}</div>
-            ) : (
-              <Select value={filepath} onValueChange={select}>
-                <SelectTrigger className="border-none bg-transparent! shadow-none select-none focus:outline-0 active:outline-0">
-                  <SelectValue placeholder="Select a file" />
-                </SelectTrigger>
-                <SelectContent className="select-none">
-                  <SelectGroup>
-                    {(artifacts ?? []).map((filepath) => (
-                      <SelectItem key={filepath} value={filepath}>
-                        {getFileName(filepath)}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            )}
-          </ArtifactTitle>
-        </div>
-        <div className="flex min-w-0 grow items-center justify-center">
+      <ArtifactHeader>
+        <div className="flex items-center justify-start gap-2">
           {previewable && (
             <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 />
@@ -168,34 +193,25 @@ export function ArtifactFileDetail({
             </ToggleGroup>
           )}
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex min-w-0 grow items-center justify-center">
+          <ArtifactTitle>
+            {isWriteFile ? (
+              <div className="px-2">{getFileName(filepath)}</div>
+            ) : (
+              <DropdownSelector
+                value={filepath}
+                options={artifactOptions}
+                onChange={select}
+              />
+            )}
+          </ArtifactTitle>
+        </div>
+        <div className="flex items-center justify-end overflow-hidden">
+          {/* 放大缩小选择器 */}
+          <ArtifactZoomSelector value={zoom} onChange={setZoom} />
           <ArtifactActions>
-            {!isWriteFile && filepath.endsWith(".skill") && (
-              <Tooltip content={t.toolCalls.skillInstallTooltip}>
-                <ArtifactAction
-                  icon={isInstalling ? LoaderIcon : PackageIcon}
-                  label={t.common.install}
-                  tooltip={t.common.install}
-                  disabled={
-                    isInstalling ||
-                    env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"
-                  }
-                  onClick={handleInstallSkill}
-                />
-              </Tooltip>
-            )}
-            {!isWriteFile && (
-              <a href={urlOfArtifact({ filepath, threadId })} target="_blank">
-                <ArtifactAction
-                  icon={SquareArrowOutUpRightIcon}
-                  label={t.common.openInNewWindow}
-                  tooltip={t.common.openInNewWindow}
-                />
-              </a>
-            )}
             {isCodeFile && (
               <ArtifactAction
-                icon={CopyIcon}
                 label={t.clipboard.copyToClipboard}
                 disabled={!content}
                 onClick={async () => {
@@ -208,7 +224,30 @@ export function ArtifactFileDetail({
                   }
                 }}
                 tooltip={t.clipboard.copyToClipboard}
-              />
+              >
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 18 18"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 2H13C14.1046 2 15 2.89543 15 4V13"
+                    stroke="#666666"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <rect
+                    x="2.5"
+                    y="4.5"
+                    width="10"
+                    height="11"
+                    rx="1.5"
+                    stroke="#666666"
+                  />
+                </svg>
+              </ArtifactAction>
             )}
             {!isWriteFile && (
               <a
@@ -216,36 +255,128 @@ export function ArtifactFileDetail({
                 target="_blank"
               >
                 <ArtifactAction
-                  icon={DownloadIcon}
                   label={t.common.download}
                   tooltip={t.common.download}
-                />
+                >
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 18 18"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M16 9V14C16 15.1046 15.1046 16 14 16H4C2.89543 16 2 15.1046 2 14V9"
+                      stroke="#666666"
+                      stroke-linecap="round"
+                    />
+                    <path
+                      d="M9 2V13M9 13L5 9M9 13L13 9"
+                      stroke="#666666"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </ArtifactAction>
               </a>
             )}
+            {/* 全屏按钮 */}
+            <ArtifactAction
+              label={
+                fullscreen ? t.common.closeFullScreen : t.common.fullScreen
+              }
+              onClick={handleFullscreenToggle}
+              tooltip={
+                fullscreen ? t.common.closeFullScreen : t.common.fullScreen
+              }
+            >
+              {fullscreen ? (
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 18 18"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 2V4C6 5.10457 5.10457 6 4 6H2"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M6 16V14C6 12.8954 5.10457 12 4 12H2"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M12 2V4C12 5.10457 12.8954 6 14 6H16"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M12 16V14C12 12.8954 12.8954 12 14 12H16"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              ) : (
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 18 18"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M5.75 15.5H4.5C3.39543 15.5 2.5 14.6046 2.5 13.5V12.25M2.5 5.75V4.5C2.5 3.39543 3.39543 2.5 4.5 2.5H5.75M12.25 2.5H13.5C14.6046 2.5 15.5 3.39543 15.5 4.5V5.75M15.5 12.25V13.5C15.5 14.6046 14.6046 15.5 13.5 15.5H12.25"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              )}
+            </ArtifactAction>
             <ArtifactAction
-              icon={XIcon}
               label={t.common.close}
               onClick={() => setOpen(false)}
               tooltip={t.common.close}
-            />
+            >
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 18 18"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M4 14L14 4M4 4L14 14"
+                  stroke="#666666"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </ArtifactAction>
           </ArtifactActions>
         </div>
       </ArtifactHeader>
-      <ArtifactContent className="p-0">
+      <ArtifactContent className="rounded-[10px] bg-white p-0">
         {previewable &&
           viewMode === "preview" &&
           (language === "markdown" || language === "html") && (
             <ArtifactFilePreview
-              filepath={filepath}
-              threadId={threadId}
               content={displayContent}
               language={language ?? "text"}
+              zoom={zoom}
             />
           )}
         {isCodeFile && viewMode === "code" && (
           <CodeEditor
             className="size-full resize-none rounded-none border-none"
             value={displayContent ?? ""}
+            zoom={zoom}
             readonly
           />
         )}
@@ -261,19 +392,22 @@ export function ArtifactFileDetail({
 }
 
 export function ArtifactFilePreview({
-  filepath,
-  threadId,
   content,
   language,
+  zoom = 100,
 }: {
-  filepath: string;
-  threadId: string;
   content: string;
   language: string;
+  zoom?: number;
 }) {
+  const zoomScale = zoom / 100;
+
   if (language === "markdown") {
     return (
-      <div className="size-full px-4">
+      <div
+        className={cn("size-full p-[20px]")}
+        style={{ "--zoom-scale": zoomScale } as React.CSSProperties}
+      >
         <Streamdown
           className="size-full"
           {...streamdownPlugins}
@@ -288,9 +422,98 @@ export function ArtifactFilePreview({
     return (
       <iframe
         className="size-full"
-        src={urlOfArtifact({ filepath, threadId })}
+        title="Artifact preview"
+        srcDoc={content}
+        sandbox="allow-scripts allow-forms"
+        style={{ zoom: zoomScale }}
       />
     );
   }
   return null;
 }
+
+// 缩放比例选项
+const ZOOM_LEVELS = [50, 60, 70, 80, 90, 100, 110, 120, 130, 150, 175, 200];
+
+export type ArtifactZoomSelectorProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> & {
+  value?: number;
+  onChange?: (value: number) => void;
+};
+
+export const ArtifactZoomSelector = ({
+  value = 100,
+  onChange,
+  className,
+  ...props
+}: ArtifactZoomSelectorProps) => {
+  const handleZoomIn = () => {
+    const currentIndex = ZOOM_LEVELS.indexOf(value);
+    const nextValue = ZOOM_LEVELS[currentIndex + 1];
+    if (currentIndex < ZOOM_LEVELS.length - 1 && nextValue !== undefined) {
+      onChange?.(nextValue);
+    }
+  };
+
+  const handleZoomOut = () => {
+    const currentIndex = ZOOM_LEVELS.indexOf(value);
+    const prevValue = ZOOM_LEVELS[currentIndex - 1];
+    if (currentIndex > 0 && prevValue !== undefined) {
+      onChange?.(prevValue);
+    }
+  };
+
+  const canZoomIn = ZOOM_LEVELS.indexOf(value) < ZOOM_LEVELS.length - 1;
+  const canZoomOut = ZOOM_LEVELS.indexOf(value) > 0;
+
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-2 rounded-[10px] bg-white px-2 py-1 backdrop-blur-sm",
+        "border border-gray-200/50",
+        "dark:border-gray-700/50 dark:bg-gray-800/90",
+        className,
+      )}
+      {...props}
+    >
+      <button
+        type="button"
+        onClick={handleZoomIn}
+        disabled={!canZoomIn}
+        className={cn(
+          "flex h-6 w-6 items-center justify-center rounded transition-colors",
+          "text-gray-400 hover:bg-gray-100 hover:text-gray-600",
+          "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
+          "dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-300",
+        )}
+        aria-label="放大"
+      >
+        <ZoomIn className="h-3.5 w-3.5" />
+      </button>
+      <span
+        className={cn(
+          "min-w-[42px] text-center text-xs font-medium text-gray-600",
+          "dark:text-gray-300",
+        )}
+      >
+        {value}%
+      </span>
+      <button
+        type="button"
+        onClick={handleZoomOut}
+        disabled={!canZoomOut}
+        className={cn(
+          "flex h-6 w-6 items-center justify-center rounded transition-colors",
+          "text-gray-400 hover:bg-gray-100 hover:text-gray-600",
+          "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
+          "dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-300",
+        )}
+        aria-label="缩小"
+      >
+        <ZoomOut className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+};
diff --git a/frontend/src/components/workspace/artifacts/artifact-file-list.tsx b/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
index 99b2e374..e5e65eeb 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
@@ -81,9 +81,9 @@ export function ArtifactFileList({
         >
           <CardHeader className="pr-2 pl-1">
             <CardTitle className="relative pl-8">
-              <div>{getFileName(file)}</div>
+              <div className="text-sm font-normal">{getFileName(file)}</div>
               <div className="absolute top-2 -left-0.5">
-                {getFileIcon(file, "size-6")}
+                {getFileIcon(file, "size-6 stroke-[1.5px] stroke-[#333333]")}
               </div>
             </CardTitle>
             <CardDescription className="pl-8 text-xs">
diff --git a/frontend/src/components/workspace/artifacts/context.tsx b/frontend/src/components/workspace/artifacts/context.tsx
index 22ccb1d1..3804e3b2 100644
--- a/frontend/src/components/workspace/artifacts/context.tsx
+++ b/frontend/src/components/workspace/artifacts/context.tsx
@@ -15,6 +15,9 @@ export interface ArtifactsContextType {
   open: boolean;
   autoOpen: boolean;
   setOpen: (open: boolean) => void;
+
+  fullscreen: boolean;
+  setFullscreen: (fullscreen: boolean) => void;
 }
 
 const ArtifactsContext = createContext<ArtifactsContextType | undefined>(
@@ -33,6 +36,7 @@ export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
     env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true",
   );
   const [autoOpen, setAutoOpen] = useState(true);
+  const [fullscreen, setFullscreen] = useState(false);
   const { setOpen: setSidebarOpen } = useSidebar();
 
   const select = (artifact: string, autoSelect = false) => {
@@ -68,6 +72,9 @@ export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
     selectedArtifact,
     select,
     deselect,
+
+    fullscreen,
+    setFullscreen,
   };
 
   return (
diff --git a/frontend/src/components/workspace/code-editor.tsx b/frontend/src/components/workspace/code-editor.tsx
index 84c558c4..cdda7f86 100644
--- a/frontend/src/components/workspace/code-editor.tsx
+++ b/frontend/src/components/workspace/code-editor.tsx
@@ -42,6 +42,7 @@ export function CodeEditor({
   disabled,
   autoFocus,
   settings,
+  zoom = 100,
 }: {
   className?: string;
   placeholder?: string;
@@ -50,6 +51,7 @@ export function CodeEditor({
   disabled?: boolean;
   autoFocus?: boolean;
   settings?: unknown;
+  zoom?: number;
 }) {
   const {
     thread: { isLoading },
@@ -70,12 +72,14 @@ export function CodeEditor({
     ];
   }, []);
 
+  const zoomScale = (zoom ?? 100) / 100;
   return (
     <div
       className={cn(
         "flex cursor-text flex-col overflow-hidden rounded-md",
         className,
       )}
+      style={{ "--zoom-scale": zoomScale } as React.CSSProperties}
     >
       {isLoading ? (
         <Textarea
diff --git a/frontend/src/components/workspace/dev-todo-list.tsx b/frontend/src/components/workspace/dev-todo-list.tsx
new file mode 100644
index 00000000..466d395a
--- /dev/null
+++ b/frontend/src/components/workspace/dev-todo-list.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import type { Todo } from "@/core/todos";
+import { cn } from "@/lib/utils";
+
+import {
+  QueueItem,
+  QueueItemContent,
+  QueueItemIndicator,
+  QueueList,
+} from "../ai-elements/queue";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+
+export function DevTodoList({
+  className,
+  todos,
+  trigger,
+  hidden,
+}: {
+  className?: string;
+  todos: Todo[];
+  trigger: React.ReactNode;
+  hidden: boolean;
+}) {
+  if (hidden) {
+    return null;
+  }
+  console.log(todos);
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent
+        className={cn(
+          "z-[100] rounded-[20px] bg-white p-5 shadow-[0_0_20px_0_rgba(0,0,0,0.20)]",
+          className,
+        )}
+        align="start"
+        side="top"
+      >
+        <QueueList className="w-64">
+          {todos.map((todo, i) => (
+            <QueueItem key={i + (todo.content ?? "")}>
+              <div className="flex items-center gap-2">
+                <QueueItemIndicator
+                  className={
+                    todo.status === "in_progress" ? "bg-primary/70" : ""
+                  }
+                  completed={todo.status === "completed"}
+                />
+                <QueueItemContent
+                  className={
+                    todo.status === "in_progress" ? "text-primary/70" : ""
+                  }
+                  completed={todo.status === "completed"}
+                >
+                  {todo.content}
+                </QueueItemContent>
+              </div>
+            </QueueItem>
+          ))}
+        </QueueList>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/frontend/src/components/workspace/iframe-test-panel.tsx b/frontend/src/components/workspace/iframe-test-panel.tsx
new file mode 100644
index 00000000..b39115ef
--- /dev/null
+++ b/frontend/src/components/workspace/iframe-test-panel.tsx
@@ -0,0 +1,225 @@
+"use client";
+
+import { useState } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { useIframeSkill } from "@/hooks/use-iframe-skill";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+/**
+ * IframeTestPanel —— 仅用于开发阶段测试 iframe 通信功能
+ *
+ * 测试场景：
+ * 1. mode=skill 侧边栏隐藏
+ * 2. useSpecificChatMode 注入提示词
+ * 3. sendSelectSkill / openSkillDialog / clearSkill
+ */
+export function IframeTestPanel() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const iframeSkill = useIframeSkill();
+  const [log, setLog] = useState<string[]>([]);
+  const [open, setOpen] = useState(true);
+
+  const isSkillMode = searchParams.get("mode") === "skill";
+
+  function addLog(msg: string) {
+    setLog((prev) => [
+      `[${new Date().toLocaleTimeString()}] ${msg}`,
+      ...prev.slice(0, 9),
+    ]);
+  }
+
+  function handleEnterSkillMode() {
+    router.push(`?mode=skill&skill_id=123&title=测试技能`);
+    addLog("进入 mode=skill，URL 已更新");
+  }
+
+  function handleExitSkillMode() {
+    router.push(`?`);
+    addLog("退出 skill 模式");
+  }
+
+  function handleSendSelectSkill() {
+    iframeSkill.sendSelectSkill("skill_001");
+    addLog("postMessage → selectSkill (skill_id=skill_001)");
+  }
+
+  function handleOpenSkillDialog() {
+    iframeSkill.openSkillDialog();
+    addLog("postMessage → openSkillDialog");
+  }
+
+  function handleClearSkill() {
+    iframeSkill.clearSkill();
+    addLog("clearSkill 已调用，postMessage → skill_id=0");
+  }
+  if (!open) {
+    return (
+      <button
+        className="fixed bottom-24 left-3 z-[9999] rounded-full bg-violet-500 px-3 py-1 text-xs font-bold text-white shadow-lg hover:bg-violet-600"
+        onClick={() => setOpen(true)}
+      >
+        🧪 测试面板
+      </button>
+    );
+  }
+  return (
+    <div className="fixed bottom-24 left-3 z-[9999] w-72 rounded-xl border border-violet-200 bg-white/95 shadow-2xl backdrop-blur-sm">
+      {/* 标题栏 */}
+      <div className="flex items-center justify-between rounded-t-xl bg-violet-500 px-3 py-2">
+        <span className="text-xs font-bold text-white">🧪 iframe 通信测试</span>
+        <button
+          className="text-white/70 hover:text-white"
+          onClick={() => setOpen(false)}
+        >
+          ✕
+        </button>
+      </div>
+
+      <div className="space-y-3 p-3">
+        {/* 当前状态 */}
+        <div className="rounded-lg bg-gray-50 px-3 py-2 text-xs">
+          <div className="mb-1 font-semibold text-gray-500">当前状态</div>
+          <div className="flex flex-col gap-1">
+            <span>
+              <span className="text-gray-400">mode：</span>
+              <span
+                className={cn(
+                  "font-mono font-bold",
+                  isSkillMode ? "text-violet-600" : "text-gray-400",
+                )}
+              >
+                {isSkillMode ? "skill ✅" : "普通"}
+              </span>
+            </span>
+            <span>
+              <span className="text-gray-400">selectedSkill：</span>
+              <span className="font-mono text-violet-600">
+                {iframeSkill.selectedSkill
+                  ? `${iframeSkill.selectedSkill.skill_id} / ${iframeSkill.selectedSkill.title}`
+                  : "无"}
+              </span>
+            </span>
+          </div>
+        </div>
+
+        {/* 场景 1：侧边栏隐藏 */}
+        <div>
+          <div className="mb-1 text-xs font-semibold text-gray-500">
+            ① 侧边栏隐藏（layout）
+          </div>
+          <div className="flex gap-2">
+            <Button
+              size="sm"
+              className="flex-1 text-xs"
+              variant="outline"
+              onClick={handleEnterSkillMode}
+            >
+              进入 skill 模式
+            </Button>
+            <Button
+              size="sm"
+              className="flex-1 text-xs"
+              variant="outline"
+              onClick={handleExitSkillMode}
+            >
+              退出 skill 模式
+            </Button>
+          </div>
+        </div>
+
+        {/* 场景 2：skill 选择通信 */}
+        <div>
+          <div className="mb-1 text-xs font-semibold text-gray-500">
+            ② postMessage 通信（发送到宿主）
+          </div>
+          <div className="flex flex-col gap-2">
+            <Button
+              size="sm"
+              className="w-full bg-violet-50 text-xs text-violet-700 hover:bg-violet-100"
+              variant="ghost"
+              onClick={handleSendSelectSkill}
+            >
+              sendSelectSkill (skill_001)
+            </Button>
+            <Button
+              size="sm"
+              className="w-full bg-violet-50 text-xs text-violet-700 hover:bg-violet-100"
+              variant="ghost"
+              onClick={handleOpenSkillDialog}
+            >
+              openSkillDialog
+            </Button>
+            <Button
+              size="sm"
+              className="w-full bg-red-50 text-xs text-red-600 hover:bg-red-100"
+              variant="ghost"
+              onClick={handleClearSkill}
+            >
+              clearSkill (发送 skill_id=0)
+            </Button>
+          </div>
+        </div>
+
+        {/* 场景 3：接收宿主页 selectedSkill */}
+        <div>
+          <div className="mb-1 text-xs font-semibold text-gray-500">
+            ③ 接收宿主页 selectedSkill
+          </div>
+          <div className="flex flex-col gap-2">
+            <Button
+              size="sm"
+              className="w-full bg-green-50 text-xs text-green-700 hover:bg-green-100"
+              variant="ghost"
+              onClick={() => {
+                window.postMessage(
+                  { type: "selectedSkill", id: 5, title: "文档处理" },
+                  "*",
+                );
+                addLog(
+                  "模拟宿主页 → selectedSkill { id: 5, title: '文档处理' }",
+                );
+              }}
+            >
+              ✅ 模拟 selectedSkill（成功）
+            </Button>
+            <Button
+              size="sm"
+              className="w-full bg-orange-50 text-xs text-orange-700 hover:bg-orange-100"
+              variant="ghost"
+              onClick={() => {
+                window.postMessage(
+                  { type: "selectedSkill", id: 999999, title: "不存在的技能" },
+                  "*",
+                );
+                addLog(
+                  "模拟宿主页 → selectedSkill { id: 999999, title: '不存在的技能' }",
+                );
+              }}
+            >
+              ❌ 模拟 selectedSkill（失败/错误）
+            </Button>
+          </div>
+        </div>
+
+        {/* 日志 */}
+        {log.length > 0 && (
+          <div className="rounded-lg bg-gray-900 p-2">
+            <div className="mb-1 text-[10px] font-semibold text-gray-400">
+              操作日志
+            </div>
+            {log.map((l, i) => (
+              <div
+                key={i}
+                className="truncate font-mono text-[10px] text-green-400"
+              >
+                {l}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/workspace/input-box.tsx b/frontend/src/components/workspace/input-box.tsx
index b32febfa..bde11d96 100644
--- a/frontend/src/components/workspace/input-box.tsx
+++ b/frontend/src/components/workspace/input-box.tsx
@@ -9,10 +9,18 @@ import {
   PlusIcon,
   SparklesIcon,
   RocketIcon,
+  XIcon,
   ZapIcon,
 } from "lucide-react";
-import { useSearchParams } from "next/navigation";
-import { useCallback, useMemo, useState, type ComponentProps } from "react";
+import { useParams, useSearchParams } from "next/navigation";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+} from "react";
 
 import {
   PromptInput,
@@ -32,7 +40,17 @@ import {
   usePromptInputController,
   type PromptInputMessage,
 } from "@/components/ai-elements/prompt-input";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { ConfettiButton } from "@/components/ui/confetti-button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   DropdownMenuGroup,
   DropdownMenuLabel,
@@ -41,6 +59,7 @@ import {
 import { useI18n } from "@/core/i18n/hooks";
 import { useModels } from "@/core/models/hooks";
 import type { AgentThreadContext } from "@/core/threads";
+import { useIframeSkill } from "@/hooks/use-iframe-skill";
 import { cn } from "@/lib/utils";
 
 import {
@@ -102,6 +121,42 @@ export function InputBox({
 }) {
   const { t } = useI18n();
   const searchParams = useSearchParams();
+  const iframeSkill = useIframeSkill();
+
+  const params = useParams() as Record<string, string>;
+  const threadId = params?.thread_id;
+  const { textInput } = usePromptInputController();
+  const attachments = usePromptInputAttachments();
+  const promptRootRef = useRef<HTMLDivElement | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [followups, setFollowups] = useState<string[]>([]);
+  const [followupsHidden, setFollowupsHidden] = useState(false);
+  const [followupsLoading, setFollowupsLoading] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [pendingSuggestion, setPendingSuggestion] = useState<string | null>(
+    null,
+  );
+  const [isFocused, setIsFocused] = useState(false);
+
+  // isNewThread 时禁用收缩，始终保持展开
+  const effectiveIsFocused = isNewThread || isFocused;
+
+  // 点击外部区域时收起输入框
+  useEffect(() => {
+    if (!isFocused) return;
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsFocused(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isFocused]);
+
   const [modelDialogOpen, setModelDialogOpen] = useState(false);
   const { models } = useModels();
   const selectedModel = useMemo(() => {
@@ -154,40 +209,143 @@ export function InputBox({
     },
     [onSubmit, onStop, status],
   );
+
+  const requestFormSubmit = useCallback(() => {
+    const form = promptRootRef.current?.querySelector("form");
+    form?.requestSubmit();
+  }, []);
+
+  const handleFollowupClick = useCallback(
+    (suggestion: string) => {
+      if (status === "streaming") return;
+      const current = (textInput?.value ?? "").trim();
+      if (current) {
+        setPendingSuggestion(suggestion);
+        setConfirmOpen(true);
+        return;
+      }
+      textInput?.setInput(suggestion);
+      setFollowupsHidden(true);
+      setTimeout(() => requestFormSubmit(), 0);
+    },
+    [requestFormSubmit, status, textInput],
+  );
+
+  const confirmReplaceAndSend = useCallback(() => {
+    if (!pendingSuggestion) return;
+    textInput?.setInput(pendingSuggestion);
+    setFollowupsHidden(true);
+    setConfirmOpen(false);
+    setTimeout(() => requestFormSubmit(), 0);
+  }, [pendingSuggestion, requestFormSubmit, textInput]);
+
+  const confirmAppendAndSend = useCallback(() => {
+    if (!pendingSuggestion) return;
+    const current = (textInput?.value ?? "").trim();
+    textInput?.setInput(
+      current ? `${current}\n${pendingSuggestion}` : pendingSuggestion,
+    );
+    setFollowupsHidden(true);
+    setConfirmOpen(false);
+    setTimeout(() => requestFormSubmit(), 0);
+  }, [pendingSuggestion, requestFormSubmit, textInput]);
+
+  useEffect(() => {
+    if (!threadId || isNewThread || disabled) return;
+    const controller = new AbortController();
+    setFollowupsHidden(false);
+    setFollowupsLoading(true);
+    setFollowups([]);
+
+    fetch(`/api/threads/${threadId}/suggestions`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ messages: [], n: 3 }),
+      signal: controller.signal,
+    })
+      .then(async (res) => {
+        if (!res.ok) return { suggestions: [] };
+        return await res.json();
+      })
+      .then((data) => {
+        const suggestions = (data.suggestions || [])
+          .filter(Boolean)
+          .slice(0, 5);
+        setFollowups(suggestions);
+      })
+      .catch(() => setFollowups([]))
+      .finally(() => setFollowupsLoading(false));
+
+    return () => controller.abort();
+  }, [disabled, isNewThread, threadId]);
+
   return (
-    <PromptInput
-      className={cn(
-        "bg-background/85 rounded-2xl backdrop-blur-sm transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
-        className,
-      )}
-      disabled={disabled}
-      globalDrop
-      multiple
-      onSubmit={handleSubmit}
-      {...props}
+    <div
+      ref={(el) => {
+        promptRootRef.current = el;
+        containerRef.current = el;
+      }}
+      className="relative w-full"
     >
+      <AttachmentPreviewBar />
+
       {extraHeader && (
-        <div className="absolute top-0 right-0 left-0 z-10">
-          <div className="absolute right-0 bottom-0 left-0 flex items-center justify-center">
-            {extraHeader}
-          </div>
-        </div>
+        <ExtraHeaderContainer hasAttachments={attachments.files.length > 0}>
+          {extraHeader}
+        </ExtraHeaderContainer>
       )}
-      <PromptInputAttachments>
-        {(attachment) => <PromptInputAttachment data={attachment} />}
-      </PromptInputAttachments>
-      <PromptInputBody className="absolute top-0 right-0 left-0 z-3">
-        <PromptInputTextarea
-          className={cn("size-full")}
-          disabled={disabled}
-          placeholder={t.inputBox.placeholder}
-          autoFocus={autoFocus}
-          defaultValue={initialValue}
-        />
-      </PromptInputBody>
-      <PromptInputFooter className="flex">
-        <PromptInputTools>
-          {/* TODO: Add more connectors here
+
+      <PromptInput
+        className={cn(
+          "bg-background w-full rounded-2xl transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
+          className,
+        )}
+        inputGroupClassName={cn(
+          "border-0 rounded-[20px] backdrop-blur-sm",
+          "transition-[height] duration-300 ease-out",
+          !isNewThread && "h-[200px] shadow-[0_0_20px_0_rgba(0,0,0,0.10)]",
+          effectiveIsFocused ? "h-[200px]" : "h-[80px]",
+        )}
+        disabled={disabled}
+        globalDrop
+        multiple
+        onSubmit={handleSubmit}
+        {...props}
+      >
+        <PromptInputBody
+          className={cn("transition-[opacity,transform] duration-300 ease-out")}
+        >
+          <PromptInputTextarea
+            ref={textareaRef}
+            className={cn(
+              "size-full",
+              !effectiveIsFocused && "h-[80px] py-0 leading-20",
+            )}
+            disabled={disabled}
+            placeholder={t.inputBox.placeholder}
+            autoFocus={autoFocus}
+            defaultValue={initialValue}
+            onFocus={() => setIsFocused(true)}
+          />
+        </PromptInputBody>
+        {!effectiveIsFocused && (
+          <div
+            className="absolute inset-0 z-1 cursor-text"
+            onClick={() => {
+              setIsFocused(true);
+              textareaRef.current?.focus();
+            }}
+          />
+        )}
+        <PromptInputFooter
+          className={cn(
+            "flex transition-all duration-300 ease-out",
+            !effectiveIsFocused &&
+              "pointer-events-none invisible h-[0px] translate-y-2 p-[0px] opacity-0",
+          )}
+        >
+          <PromptInputTools>
+            {/* TODO: Add more connectors here
           <PromptInputActionMenu>
             <PromptInputActionMenuTrigger className="px-2!" />
             <PromptInputActionMenuContent>
@@ -196,243 +354,131 @@ export function InputBox({
               />
             </PromptInputActionMenuContent>
           </PromptInputActionMenu> */}
-          <AddAttachmentsButton className="px-2!" />
-          <PromptInputActionMenu>
-            <ModeHoverGuide
-              mode={
-                context.mode === "flash" ||
-                context.mode === "thinking" ||
-                context.mode === "pro" ||
-                context.mode === "ultra"
-                  ? context.mode
-                  : "flash"
-              }
-            >
-              <PromptInputActionMenuTrigger className="gap-1! px-2!">
-                <div>
-                  {context.mode === "flash" && <ZapIcon className="size-3" />}
-                  {context.mode === "thinking" && (
-                    <LightbulbIcon className="size-3" />
-                  )}
-                  {context.mode === "pro" && (
-                    <GraduationCapIcon className="size-3" />
-                  )}
-                  {context.mode === "ultra" && (
-                    <RocketIcon className="size-3 text-[#dabb5e]" />
-                  )}
-                </div>
-                <div
-                  className={cn(
-                    "text-xs font-normal",
-                    context.mode === "ultra" ? "golden-text" : "",
-                  )}
-                >
-                  {(context.mode === "flash" && t.inputBox.flashMode) ||
-                    (context.mode === "thinking" && t.inputBox.reasoningMode) ||
-                    (context.mode === "pro" && t.inputBox.proMode) ||
-                    (context.mode === "ultra" && t.inputBox.ultraMode)}
-                </div>
-              </PromptInputActionMenuTrigger>
-            </ModeHoverGuide>
-            <PromptInputActionMenuContent className="w-80">
-              <DropdownMenuGroup>
-                <DropdownMenuLabel className="text-muted-foreground text-xs">
-                  {t.inputBox.mode}
-                </DropdownMenuLabel>
-                <PromptInputActionMenu>
-                  <PromptInputActionMenuItem
-                    className={cn(
-                      context.mode === "flash"
-                        ? "text-accent-foreground"
-                        : "text-muted-foreground/65",
-                    )}
-                    onSelect={() => handleModeSelect("flash")}
-                  >
-                    <div className="flex flex-col gap-2">
-                      <div className="flex items-center gap-1 font-bold">
-                        <ZapIcon
-                          className={cn(
-                            "mr-2 size-4",
-                            context.mode === "flash" &&
-                              "text-accent-foreground",
-                          )}
-                        />
-                        {t.inputBox.flashMode}
-                      </div>
-                      <div className="pl-7 text-xs">
-                        {t.inputBox.flashModeDescription}
-                      </div>
-                    </div>
-                    {context.mode === "flash" ? (
-                      <CheckIcon className="ml-auto size-4" />
-                    ) : (
-                      <div className="ml-auto size-4" />
-                    )}
-                  </PromptInputActionMenuItem>
-                  {supportThinking && (
-                    <PromptInputActionMenuItem
-                      className={cn(
-                        context.mode === "thinking"
-                          ? "text-accent-foreground"
-                          : "text-muted-foreground/65",
-                      )}
-                      onSelect={() => handleModeSelect("thinking")}
-                    >
-                      <div className="flex flex-col gap-2">
-                        <div className="flex items-center gap-1 font-bold">
-                          <LightbulbIcon
-                            className={cn(
-                              "mr-2 size-4",
-                              context.mode === "thinking" &&
-                                "text-accent-foreground",
-                            )}
-                          />
-                          {t.inputBox.reasoningMode}
-                        </div>
-                        <div className="pl-7 text-xs">
-                          {t.inputBox.reasoningModeDescription}
-                        </div>
-                      </div>
-                      {context.mode === "thinking" ? (
-                        <CheckIcon className="ml-auto size-4" />
-                      ) : (
-                        <div className="ml-auto size-4" />
-                      )}
-                    </PromptInputActionMenuItem>
-                  )}
-                  <PromptInputActionMenuItem
-                    className={cn(
-                      context.mode === "pro"
-                        ? "text-accent-foreground"
-                        : "text-muted-foreground/65",
-                    )}
-                    onSelect={() => handleModeSelect("pro")}
-                  >
-                    <div className="flex flex-col gap-2">
-                      <div className="flex items-center gap-1 font-bold">
-                        <GraduationCapIcon
-                          className={cn(
-                            "mr-2 size-4",
-                            context.mode === "pro" && "text-accent-foreground",
-                          )}
-                        />
-                        {t.inputBox.proMode}
-                      </div>
-                      <div className="pl-7 text-xs">
-                        {t.inputBox.proModeDescription}
-                      </div>
-                    </div>
-                    {context.mode === "pro" ? (
-                      <CheckIcon className="ml-auto size-4" />
-                    ) : (
-                      <div className="ml-auto size-4" />
-                    )}
-                  </PromptInputActionMenuItem>
-                  <PromptInputActionMenuItem
-                    className={cn(
-                      context.mode === "ultra"
-                        ? "text-accent-foreground"
-                        : "text-muted-foreground/65",
-                    )}
-                    onSelect={() => handleModeSelect("ultra")}
-                  >
-                    <div className="flex flex-col gap-2">
-                      <div className="flex items-center gap-1 font-bold">
-                        <RocketIcon
-                          className={cn(
-                            "mr-2 size-4",
-                            context.mode === "ultra" && "text-[#dabb5e]",
-                          )}
-                        />
-                        <div
-                          className={cn(
-                            context.mode === "ultra" && "golden-text",
-                          )}
-                        >
-                          {t.inputBox.ultraMode}
-                        </div>
-                      </div>
-                      <div className="pl-7 text-xs">
-                        {t.inputBox.ultraModeDescription}
-                      </div>
-                    </div>
-                    {context.mode === "ultra" ? (
-                      <CheckIcon className="ml-auto size-4" />
-                    ) : (
-                      <div className="ml-auto size-4" />
-                    )}
-                  </PromptInputActionMenuItem>
-                </PromptInputActionMenu>
-              </DropdownMenuGroup>
-            </PromptInputActionMenuContent>
-          </PromptInputActionMenu>
-        </PromptInputTools>
-        <PromptInputTools>
-          <ModelSelector
-            open={modelDialogOpen}
-            onOpenChange={setModelDialogOpen}
-          >
-            <ModelSelectorTrigger asChild>
-              <PromptInputButton>
-                <ModelSelectorName className="text-xs font-normal">
-                  {selectedModel?.display_name}
-                </ModelSelectorName>
-              </PromptInputButton>
-            </ModelSelectorTrigger>
-            <ModelSelectorContent>
-              <ModelSelectorInput placeholder={t.inputBox.searchModels} />
-              <ModelSelectorList>
-                {models.map((m) => (
-                  <ModelSelectorItem
-                    key={m.name}
-                    value={m.name}
-                    onSelect={() => handleModelSelect(m.name)}
-                  >
-                    <ModelSelectorName>{m.display_name}</ModelSelectorName>
-                    {m.name === context.model_name ? (
-                      <CheckIcon className="ml-auto size-4" />
-                    ) : (
-                      <div className="ml-auto size-4" />
-                    )}
-                  </ModelSelectorItem>
-                ))}
-              </ModelSelectorList>
-            </ModelSelectorContent>
-          </ModelSelector>
-          <PromptInputSubmit
-            className="rounded-full"
-            disabled={disabled}
-            variant="outline"
-            status={status}
-          />
-        </PromptInputTools>
-      </PromptInputFooter>
+            <AddAttachmentsButton className="px-2!" />
+            <IframeSkillDialogButton
+              className="px-2!"
+              selectedSkill={iframeSkill.selectedSkill}
+              openSkillDialog={iframeSkill.openSkillDialog}
+              clearSkill={iframeSkill.clearSkill}
+            />
+            {/* 参考 kexue 版本隐藏运行模式切换按钮 */}
+          </PromptInputTools>
+          <PromptInputTools>
+            {/* 占位符 */}
+            <div className="w-[150px]"></div>
+          </PromptInputTools>
+        </PromptInputFooter>
+        <PromptInputSubmit
+          className="absolute right-3 bottom-5 z-[20] border-0"
+          disabled={disabled}
+          variant="outline"
+          status={status}
+        />
+      </PromptInput>
+
       {isNewThread && searchParams.get("mode") !== "skill" && (
-        <div className="absolute right-0 -bottom-20 left-0 z-0 flex items-center justify-center">
-          <SuggestionList />
-        </div>
+        <SuggestionListContainer
+          sendSelectSkill={iframeSkill.sendSelectSkill}
+        />
       )}
-      {!isNewThread && (
-        <div className="bg-background absolute right-0 -bottom-[17px] left-0 z-0 h-4"></div>
-      )}
-    </PromptInput>
+
+      {!disabled &&
+        !isNewThread &&
+        !followupsHidden &&
+        (followupsLoading || followups.length > 0) && (
+          <div className="absolute -top-20 right-0 left-0 z-20 flex items-center justify-center">
+            <div className="flex items-center gap-2">
+              {followupsLoading ? (
+                <div className="text-muted-foreground bg-background/80 rounded-full border px-4 py-2 text-xs backdrop-blur-sm">
+                  加载中...
+                </div>
+              ) : (
+                <Suggestions className="min-h-16 w-fit items-start">
+                  {followups.map((s) => (
+                    <Suggestion
+                      key={s}
+                      suggestion={s}
+                      onClick={() => handleFollowupClick(s)}
+                    />
+                  ))}
+                  <Button
+                    aria-label={t.common.close}
+                    className="text-muted-foreground cursor-pointer rounded-full px-3 text-xs font-normal"
+                    variant="outline"
+                    size="sm"
+                    type="button"
+                    onClick={() => setFollowupsHidden(true)}
+                  >
+                    <XIcon className="size-4" />
+                  </Button>
+                </Suggestions>
+              )}
+            </div>
+          </div>
+        )}
+
+      <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>提示</DialogTitle>
+            <DialogDescription>
+              请确认要如何处理当前的追加建议内容？
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setConfirmOpen(false)}>
+              取消
+            </Button>
+            <Button variant="secondary" onClick={confirmAppendAndSend}>
+              追加内容
+            </Button>
+            <Button onClick={confirmReplaceAndSend}>替换发送</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
   );
 }
 
-function SuggestionList() {
+// SuggestionList 容器
+function SuggestionListContainer({
+  sendSelectSkill,
+}: {
+  sendSelectSkill: (skill_id: string) => void;
+}) {
+  return (
+    <div className="absolute right-0 bottom-0 left-0 z-0 flex translate-y-full items-center justify-center pt-4">
+      <SuggestionList sendSelectSkill={sendSelectSkill} />
+    </div>
+  );
+}
+
+// 快速选择skillbutton
+function SuggestionList({
+  sendSelectSkill,
+}: {
+  sendSelectSkill: (skill_id: string) => void;
+}) {
   const { t } = useI18n();
   const { textInput } = usePromptInputController();
+
   const handleSuggestionClick = useCallback(
-    (prompt: string | undefined) => {
-      if (!prompt) return;
-      textInput.setInput(prompt);
+    (suggestion: { prompt: string; skill_id?: string }) => {
+      // 如果有 skill_id，发送给宿主页
+      if (suggestion.skill_id) {
+        sendSelectSkill(suggestion.skill_id);
+        return;
+      }
+      // 原有逻辑
+      if (!suggestion.prompt) return;
+      textInput.setInput(suggestion.prompt);
       setTimeout(() => {
         const textarea = document.querySelector<HTMLTextAreaElement>(
           "textarea[name='message']",
         );
         if (textarea) {
-          const selStart = prompt.indexOf("[");
-          const selEnd = prompt.indexOf("]");
+          const selStart = suggestion.prompt.indexOf("[");
+          const selEnd = suggestion.prompt.indexOf("]");
           if (selStart !== -1 && selEnd !== -1) {
             textarea.setSelectionRange(selStart, selEnd + 1);
             textarea.focus();
@@ -440,50 +486,18 @@ function SuggestionList() {
         }
       }, 500);
     },
-    [textInput],
+    [textInput, sendSelectSkill],
   );
   return (
     <Suggestions className="min-h-16 w-fit items-start">
-      <ConfettiButton
-        className="text-muted-foreground cursor-pointer rounded-full px-4 text-xs font-normal"
-        variant="outline"
-        size="sm"
-        onClick={() => handleSuggestionClick(t.inputBox.surpriseMePrompt)}
-      >
-        <SparklesIcon className="size-4" /> {t.inputBox.surpriseMe}
-      </ConfettiButton>
       {t.inputBox.suggestions.map((suggestion) => (
         <Suggestion
           key={suggestion.suggestion}
           icon={suggestion.icon}
           suggestion={suggestion.suggestion}
-          onClick={() => handleSuggestionClick(suggestion.prompt)}
+          onClick={() => handleSuggestionClick(suggestion)}
         />
       ))}
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Suggestion icon={PlusIcon} suggestion={t.common.create} />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuGroup>
-            {t.inputBox.suggestionsCreate.map((suggestion, index) =>
-              "type" in suggestion && suggestion.type === "separator" ? (
-                <DropdownMenuSeparator key={index} />
-              ) : (
-                !("type" in suggestion) && (
-                  <DropdownMenuItem
-                    key={suggestion.suggestion}
-                    onClick={() => handleSuggestionClick(suggestion.prompt)}
-                  >
-                    {suggestion.icon && <suggestion.icon className="size-4" />}
-                    {suggestion.suggestion}
-                  </DropdownMenuItem>
-                )
-              ),
-            )}
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
     </Suggestions>
   );
 }
@@ -494,11 +508,115 @@ function AddAttachmentsButton({ className }: { className?: string }) {
   return (
     <Tooltip content={t.inputBox.addAttachments}>
       <PromptInputButton
-        className={cn("px-2!", className)}
+        className={cn("group px-2! hover:bg-[#EAE2F5]", className)}
         onClick={() => attachments.openFileDialog()}
       >
-        <PaperclipIcon className="size-3" />
+        <svg
+          width="18"
+          height="15"
+          viewBox="0 0 18 15"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="transition-[stroke] duration-200 [&>path]:transition-[fill,stroke] [&>path]:duration-200 [&>path:first-child]:group-hover:fill-[#8E47F0] [&>path:last-child]:group-hover:stroke-[#8E47F0]"
+        >
+          <path
+            d="M7.05042 7.65254C6.9754 7.72756 6.90039 7.80257 6.90039 7.95258C6.90039 8.02759 6.9754 8.1776 7.05042 8.25262C7.20043 8.40263 7.42545 8.40263 7.57546 8.25262L8.8506 6.97747V10.7279C8.8506 10.9529 9.00061 11.1029 9.22563 11.1029C9.30065 11.1029 9.45066 11.0279 9.52567 11.0279C9.60067 10.9529 9.67568 10.8779 9.67568 10.7279V6.97747L10.9508 8.25262C11.1008 8.40263 11.3259 8.40263 11.4759 8.25262C11.5509 8.1776 11.6259 8.10259 11.6259 7.95258C11.6259 7.87757 11.5509 7.72756 11.4759 7.65254L9.52567 5.70235C9.37564 5.55234 9.15062 5.55234 9.00061 5.70235L7.05042 7.65254Z"
+            fill="#150033"
+          />
+          <path
+            d="M1.12695 0.5H6.67871C6.87077 0.500077 7.01409 0.574515 7.07324 0.648438L7.09082 0.669922L8.30762 1.88672C8.6222 2.20119 9.01344 2.3681 9.44629 2.36816H16.875C17.2382 2.36842 17.5012 2.63339 17.5 2.99414V13.8848C17.5048 14.2408 17.2454 14.5056 16.8818 14.5059H1.12695C0.764649 14.5057 0.5 14.2401 0.5 13.877V1.12793C0.500049 0.810129 0.702664 0.567404 0.996094 0.511719L1.12695 0.5Z"
+            stroke="#150033"
+          />
+        </svg>
       </PromptInputButton>
     </Tooltip>
   );
 }
+// 启动iframeSkillDialog
+function IframeSkillDialogButton({
+  className,
+  selectedSkill,
+  openSkillDialog,
+  clearSkill,
+}: {
+  className?: string;
+  selectedSkill: { skill_id: string; title: string } | null;
+  openSkillDialog: () => void;
+  clearSkill: () => void;
+}) {
+  const { t } = useI18n();
+
+  return (
+    <div className="flex items-center gap-2">
+      <Tooltip content={t.inputBox.selectSkill}>
+        <PromptInputButton
+          className={cn("group px-2! hover:bg-[#EAE2F5]", className)}
+          onClick={openSkillDialog}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="size-4 transition-[stroke] duration-200 [&>path]:transition-[stroke] [&>path]:duration-200 [&>path]:group-hover:stroke-[#8E47F0]"
+            viewBox="0 0 12 16"
+            fill="none"
+          >
+            <path
+              d="M3.7998 0.5H9.19922C9.24033 0.5 9.26852 0.518136 9.28516 0.541992C9.30124 0.565318 9.30411 0.588767 9.29395 0.613281H9.29297L7.43066 5.07422L7.1416 5.76758H11.3994C11.4295 5.76765 11.4474 5.77552 11.459 5.7832C11.4724 5.79207 11.4846 5.80503 11.4922 5.82129C11.4997 5.83745 11.5013 5.85253 11.5 5.86328C11.4989 5.87156 11.4953 5.88556 11.4785 5.9043L2.87891 15.4629V15.4639C2.85396 15.4914 2.83406 15.4971 2.82031 15.499C2.80144 15.5016 2.77553 15.4981 2.74902 15.4844C2.72225 15.4705 2.70837 15.453 2.70312 15.4424C2.70056 15.4372 2.69457 15.4253 2.70312 15.3936V15.3926L4.30273 9.49512L4.47461 8.86426H0.600586C0.559682 8.86424 0.531324 8.84587 0.514648 8.82227C0.498608 8.79944 0.496551 8.777 0.505859 8.75293L3.70508 0.558594C3.71075 0.544183 3.72173 0.529788 3.73828 0.518555C3.74688 0.51277 3.75704 0.508037 3.76758 0.504883L3.7998 0.5Z"
+              stroke="#150033"
+            />
+          </svg>
+        </PromptInputButton>
+      </Tooltip>
+      {selectedSkill && (
+        <Badge
+          variant="secondary"
+          className="gap-1 bg-[#EAE2F5] px-[15px] py-[4px] text-[#8E47F0]"
+        >
+          {selectedSkill.title}
+          <button
+            onClick={clearSkill}
+            className="hover:bg-muted-foreground/20 ml-1 rounded-full"
+          >
+            <XIcon className="size-3" />
+          </button>
+        </Badge>
+      )}
+    </div>
+  );
+}
+
+// 附件预览栏 - 在输入框上方显示
+function AttachmentPreviewBar() {
+  const attachments = usePromptInputAttachments();
+
+  if (!attachments.files.length) {
+    return null;
+  }
+
+  return (
+    <div className="absolute bottom-full left-0 z-20 mb-3 ml-1 flex justify-start">
+      <PromptInputAttachments>
+        {(attachment) => <PromptInputAttachment data={attachment} />}
+      </PromptInputAttachments>
+    </div>
+  );
+}
+
+// ExtraHeader 容器 - 有附件时上浮
+function ExtraHeaderContainer({
+  hasAttachments,
+  children,
+}: {
+  hasAttachments: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "absolute right-0 bottom-full left-0 z-30 flex items-center justify-center pb-4 transition-transform duration-300",
+        hasAttachments && "-translate-y-20",
+      )}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/frontend/src/components/workspace/messages/message-group.tsx b/frontend/src/components/workspace/messages/message-group.tsx
index b7205f55..45c57211 100644
--- a/frontend/src/components/workspace/messages/message-group.tsx
+++ b/frontend/src/components/workspace/messages/message-group.tsx
@@ -79,7 +79,7 @@ export function MessageGroup({
   const rehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
   return (
     <ChainOfThought
-      className={cn("w-full gap-2 rounded-lg border p-0.5", className)}
+      className={cn("w-full gap-2 rounded-lg bg-white", className)}
       open={true}
     >
       {aboveLastToolCallSteps.length > 0 && (
diff --git a/frontend/src/components/workspace/messages/message-list-item.tsx b/frontend/src/components/workspace/messages/message-list-item.tsx
index 561c7c55..dec98669 100644
--- a/frontend/src/components/workspace/messages/message-list-item.tsx
+++ b/frontend/src/components/workspace/messages/message-list-item.tsx
@@ -19,8 +19,8 @@ import {
   parseUploadedFiles,
   type UploadedFile,
 } from "@/core/messages/utils";
-import { materializeSkillYaml } from "@/core/skills";
 import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
+import { materializeSkillYaml } from "@/core/skills";
 import { humanMessagePlugins } from "@/core/streamdown";
 import { cn } from "@/lib/utils";
 
diff --git a/frontend/src/components/workspace/use-chat-mode.ts b/frontend/src/components/workspace/use-chat-mode.ts
new file mode 100644
index 00000000..fedbef4c
--- /dev/null
+++ b/frontend/src/components/workspace/use-chat-mode.ts
@@ -0,0 +1,42 @@
+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";
+
+/**
+ * 根据 URL 参数判断当前是否处于特定 Chat 模式（如 iframe 技能模式），
+ * 并根据模式自动填入默认 prompt 值。
+ */
+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]);
+}
diff --git a/frontend/src/components/workspace/welcome.tsx b/frontend/src/components/workspace/welcome.tsx
index 4fa9ec74..b43da1b6 100644
--- a/frontend/src/components/workspace/welcome.tsx
+++ b/frontend/src/components/workspace/welcome.tsx
@@ -41,10 +41,9 @@ export function Welcome({
           `✨ ${t.welcome.createYourOwnSkill} ✨`
         ) : (
           <div className="flex items-center gap-2">
-            <div className={cn("inline-block", !waved ? "animate-wave" : "")}>
-              {isUltra ? "🚀" : "👋"}
-            </div>
-            <AuroraText colors={colors}>{t.welcome.greeting}</AuroraText>
+            <AuroraText className="text-[18px] text-[#150033]" colors={colors}>
+              {t.welcome.greeting}
+            </AuroraText>
           </div>
         )}
       </div>
@@ -59,13 +58,7 @@ export function Welcome({
           )}
         </div>
       ) : (
-        <div className="text-muted-foreground text-sm">
-          {t.welcome.description.includes("\n") ? (
-            <pre className="whitespace-pre">{t.welcome.description}</pre>
-          ) : (
-            <p>{t.welcome.description}</p>
-          )}
-        </div>
+        <div> </div>
       )}
     </div>
   );
diff --git a/frontend/src/core/i18n/locales/en-US.ts b/frontend/src/core/i18n/locales/en-US.ts
index 1bc60a9a..dc1fb7d7 100644
--- a/frontend/src/core/i18n/locales/en-US.ts
+++ b/frontend/src/core/i18n/locales/en-US.ts
@@ -24,6 +24,8 @@ export const enUS: Translations = {
     delete: "Delete",
     rename: "Rename",
     share: "Share",
+    fullScreen: "fullScreen",
+    closeFullScreen: "closeFullScreen",
     openInNewWindow: "Open in new window",
     close: "Close",
     more: "More",
@@ -70,6 +72,7 @@ export const enUS: Translations = {
     createSkillPrompt:
       "We're going to build a new skill step by step with `skill-creator`. To start, what do you want this skill to do?",
     addAttachments: "Add attachments",
+    selectSkill: "Select Skill",
     mode: "Mode",
     flashMode: "Flash",
     flashModeDescription: "Fast and efficient, but may not be accurate",
@@ -82,30 +85,61 @@ export const enUS: Translations = {
     ultraMode: "Ultra",
     ultraModeDescription:
       "Pro mode with subagents to divide work; best for complex multi-step tasks",
+    reasoningEffort: "Reasoning Effort",
+    reasoningEffortMinimal: "Minimal",
+    reasoningEffortMinimalDescription: "Retrieval + Direct Output",
+    reasoningEffortLow: "Low",
+    reasoningEffortLowDescription: "Simple Logic Check + Shallow Deduction",
+    reasoningEffortMedium: "Medium",
+    reasoningEffortMediumDescription:
+      "Multi-layer Logic Analysis + Basic Verification",
+    reasoningEffortHigh: "High",
+    reasoningEffortHighDescription:
+      "Full-dimensional Logic Deduction + Multi-path Verification + Backward Check",
     searchModels: "Search models...",
     surpriseMe: "Surprise",
     surpriseMePrompt: "Surprise me",
+    followupLoading: "Generating follow-up questions...",
+    followupConfirmTitle: "Send suggestion?",
+    followupConfirmDescription:
+      "You already have text in the input. Choose how to send it.",
+    followupConfirmAppend: "Append & send",
+    followupConfirmReplace: "Replace & send",
     suggestions: [
       {
-        suggestion: "Write",
-        prompt: "Write a blog post about the latest trends on [topic]",
-        icon: PenLineIcon,
-      },
-      {
-        suggestion: "Research",
+        suggestion: "Paper Writing",
         prompt:
-          "Conduct a deep dive research on [topic], and summarize the findings.",
+          "Write an academic paper about [topic], including abstract, introduction, body and references.",
+        icon: PenLineIcon,
+        skill_id: "paper-writing",
+      },
+      {
+        suggestion: "Report Generation",
+        prompt:
+          "Analyze [topic] in depth and generate a well-structured research report.",
         icon: MicroscopeIcon,
+        skill_id: "report-generation",
       },
       {
-        suggestion: "Collect",
-        prompt: "Collect data from [source] and create a report.",
+        suggestion: "Copywriting",
+        prompt:
+          "Create a complete planning proposal and promotional copy for [project/event].",
         icon: ShapesIcon,
+        skill_id: "planning-copywriting",
       },
       {
-        suggestion: "Learn",
-        prompt: "Learn about [topic] and create a tutorial.",
+        suggestion: "PPT Generation",
+        prompt:
+          "Generate a PPT presentation outline and content about [topic].",
         icon: GraduationCapIcon,
+        skill_id: "ppt-generation",
+      },
+      {
+        suggestion: "Document Processing",
+        prompt:
+          "Process [document] with reading, summarizing, translating or format conversion.",
+        icon: CompassIcon,
+        skill_id: "document-processing",
       },
     ],
     suggestionsCreate: [
@@ -142,6 +176,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
@@ -204,6 +273,11 @@ export const enUS: Translations = {
   },
 
   // Subtasks
+  uploads: {
+    uploading: "Uploading...",
+    uploadingFiles: "Uploading files, please wait...",
+  },
+
   subtasks: {
     subtask: "Subtask",
     executing: (count: number) =>
diff --git a/frontend/src/core/i18n/locales/types.ts b/frontend/src/core/i18n/locales/types.ts
index 7213efa1..7560d73f 100644
--- a/frontend/src/core/i18n/locales/types.ts
+++ b/frontend/src/core/i18n/locales/types.ts
@@ -15,6 +15,8 @@ export interface Translations {
     share: string;
     openInNewWindow: string;
     close: string;
+    fullScreen: string;
+    closeFullScreen: string;
     more: string;
     search: string;
     download: string;
@@ -52,9 +54,11 @@ export interface Translations {
 
   // Input Box
   inputBox: {
+    sendMessagePrice: string;
     placeholder: string;
     createSkillPrompt: string;
     addAttachments: string;
+    selectSkill: string;
     mode: string;
     flashMode: string;
     flashModeDescription: string;
@@ -64,13 +68,28 @@ export interface Translations {
     proModeDescription: string;
     ultraMode: string;
     ultraModeDescription: string;
+    reasoningEffort: string;
+    reasoningEffortMinimal: string;
+    reasoningEffortMinimalDescription: string;
+    reasoningEffortLow: string;
+    reasoningEffortLowDescription: string;
+    reasoningEffortMedium: string;
+    reasoningEffortMediumDescription: string;
+    reasoningEffortHigh: string;
+    reasoningEffortHighDescription: string;
     searchModels: string;
     surpriseMe: string;
     surpriseMePrompt: string;
+    followupLoading: string;
+    followupConfirmTitle: string;
+    followupConfirmDescription: string;
+    followupConfirmAppend: string;
+    followupConfirmReplace: string;
     suggestions: {
       suggestion: string;
       prompt: string;
       icon: LucideIcon;
+      skill_id?: string;
     }[];
     suggestionsCreate: (
       | {
@@ -90,6 +109,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
@@ -150,6 +197,12 @@ export interface Translations {
     skillInstallTooltip: string;
   };
 
+  // Uploads
+  uploads: {
+    uploading: string;
+    uploadingFiles: string;
+  };
+
   // Subtasks
   subtasks: {
     subtask: string;
diff --git a/frontend/src/core/i18n/locales/zh-CN.ts b/frontend/src/core/i18n/locales/zh-CN.ts
index a3d399bf..a94b6976 100644
--- a/frontend/src/core/i18n/locales/zh-CN.ts
+++ b/frontend/src/core/i18n/locales/zh-CN.ts
@@ -26,11 +26,13 @@ export const zhCN: Translations = {
     share: "分享",
     openInNewWindow: "在新窗口打开",
     close: "关闭",
+    fullScreen: "全屏",
+    closeFullScreen: "关闭全屏",
     more: "更多",
     search: "搜索",
     download: "下载",
     thinking: "思考",
-    artifacts: "文件",
+    artifacts: "查看结果",
     public: "公共",
     custom: "自定义",
     notAvailableInDemoMode: "在演示模式下不可用",
@@ -47,7 +49,7 @@ export const zhCN: Translations = {
 
   // Welcome
   welcome: {
-    greeting: "你好，欢迎回来！",
+    greeting: "使用Skill",
     description:
       "欢迎使用 🦌 DeerFlow，一个完全开源的超级智能体。通过内置和自定义的 Skills，\nDeerFlow 可以帮你搜索网络、分析数据，还能为你生成幻灯片、\n图片、视频、播客及网页等，几乎可以做任何事情。",
 
@@ -66,10 +68,13 @@ export const zhCN: Translations = {
 
   // Input Box
   inputBox: {
-    placeholder: "今天我能为你做些什么？",
+    placeholder: "先输入说明需求，选择Skill，开始使用吧",
     createSkillPrompt:
       "我们一起用 skill-creator 技能来创建一个技能吧。先问问我希望这个技能能做什么。",
+    sendMessagePrice:
+      "请注意，此功能将消耗token，请保证账户余额大于200可学豆。",
     addAttachments: "添加附件",
+    selectSkill: "选择Skill",
     mode: "模式",
     flashMode: "闪速",
     flashModeDescription: "快速且高效的完成任务，但可能不够精准",
@@ -80,29 +85,54 @@ export const zhCN: Translations = {
     ultraMode: "Ultra",
     ultraModeDescription:
       "继承自 Pro 模式，可调用子代理分工协作，适合复杂多步骤任务，能力最强",
+    reasoningEffort: "推理深度",
+    reasoningEffortMinimal: "最低",
+    reasoningEffortMinimalDescription: "检索 + 直接输出",
+    reasoningEffortLow: "低",
+    reasoningEffortLowDescription: "简单逻辑校验 + 浅层推演",
+    reasoningEffortMedium: "中",
+    reasoningEffortMediumDescription: "多层逻辑分析 + 基础验证",
+    reasoningEffortHigh: "高",
+    reasoningEffortHighDescription: "全维度逻辑推演 + 多路径验证 + 反推校验",
     searchModels: "搜索模型...",
     surpriseMe: "小惊喜",
     surpriseMePrompt: "给我一个小惊喜吧",
+    followupLoading: "正在生成可能的后续问题...",
+    followupConfirmTitle: "发送建议问题？",
+    followupConfirmDescription: "当前输入框已有内容，选择发送方式。",
+    followupConfirmAppend: "追加并发送",
+    followupConfirmReplace: "替换并发送",
     suggestions: [
       {
-        suggestion: "写作",
-        prompt: "撰写一篇关于[主题]的博客文章",
+        suggestion: "论文写作",
+        prompt:
+          "撰写一篇关于[主题]的学术论文，包含摘要、引言、正文和参考文献。",
         icon: PenLineIcon,
+        skill_id: "1",
       },
       {
-        suggestion: "研究",
-        prompt: "深入浅出的研究一下[主题]，并总结发现。",
+        suggestion: "报告生成",
+        prompt: "深入分析[主题]，生成一份结构清晰的调研报告。",
         icon: MicroscopeIcon,
+        skill_id: "2",
       },
       {
-        suggestion: "收集",
-        prompt: "从[来源]收集数据并创建报告。",
+        suggestion: "策划文案",
+        prompt: "为[项目/活动]撰写一份完整的策划方案和宣传文案。",
         icon: ShapesIcon,
+        skill_id: "3",
       },
       {
-        suggestion: "学习",
-        prompt: "学习关于[主题]并创建教程。",
+        suggestion: "PPT生成",
+        prompt: "生成一个关于[主题]的PPT演示文稿大纲和内容。",
         icon: GraduationCapIcon,
+        skill_id: "4",
+      },
+      {
+        suggestion: "文档处理",
+        prompt: "对[文档]进行阅读、总结、翻译或格式转换等处理。",
+        icon: CompassIcon,
+        skill_id: "5",
       },
     ],
     suggestionsCreate: [
@@ -139,6 +169,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
@@ -199,6 +259,11 @@ export const zhCN: Translations = {
     skillInstallTooltip: "安装技能并使其可在 DeerFlow 中使用",
   },
 
+  uploads: {
+    uploading: "上传中...",
+    uploadingFiles: "文件上传中，请稍候...",
+  },
+
   subtasks: {
     subtask: "子任务",
     executing: (count: number) =>
diff --git a/frontend/src/hooks/use-iframe-skill.ts b/frontend/src/hooks/use-iframe-skill.ts
new file mode 100644
index 00000000..a5b9e9ec
--- /dev/null
+++ b/frontend/src/hooks/use-iframe-skill.ts
@@ -0,0 +1,77 @@
+import { useSearchParams } from "next/navigation";
+import { useState, useEffect, useCallback } from "react";
+
+// 消息类型常量
+const MESSAGE_TYPES = {
+  SELECT_SKILL: "selectSkill",
+  OPEN_SKILL_DIALOG: "openSkillDialog",
+} as const;
+
+// Skill 数据类型
+interface SkillData {
+  skill_id: string;
+  title: string;
+}
+
+// Hook 返回类型
+interface UseIframeSkillReturn {
+  selectedSkill: SkillData | null;
+  sendSelectSkill: (skill_id: string) => void;
+  openSkillDialog: () => void;
+  clearSkill: () => void;
+}
+
+export function useIframeSkill(): UseIframeSkillReturn {
+  const searchParams = useSearchParams();
+  const skillIdFromQuery = searchParams.get("skill_id");
+  const titleFromQuery = searchParams.get("title");
+
+  const [selectedSkill, setSelectedSkill] = useState<SkillData | null>(null);
+
+  // 1. 监听 query 参数变化
+  useEffect(() => {
+    if (skillIdFromQuery && titleFromQuery) {
+      setSelectedSkill({ skill_id: skillIdFromQuery, title: titleFromQuery });
+    }
+  }, [skillIdFromQuery, titleFromQuery]);
+
+  // 2. 监听宿主页 postMessage
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === "selectedSkill") {
+        const { id, title } = event.data;
+        setSelectedSkill({ skill_id: String(id), title });
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+
+  // 发送选择预定义 skill
+  const sendSelectSkill = useCallback((skill_id: string) => {
+    const message = { type: MESSAGE_TYPES.SELECT_SKILL, skill_id };
+    console.log("[useIframeSkill] sendSelectSkill:", message);
+    window.parent.postMessage(message, "*");
+  }, []);
+
+  // 打开 skill 选择对话框
+  const openSkillDialog = useCallback(() => {
+    const message = {
+      type: MESSAGE_TYPES.OPEN_SKILL_DIALOG,
+      openSkillDialog: true,
+    };
+    console.log("[useIframeSkill] openSkillDialog:", message);
+    window.parent.postMessage(message, "*");
+  }, []);
+
+  // 清除选中并发送 skill_id=0 给主页
+  const clearSkill = useCallback(() => {
+    setSelectedSkill(null);
+    // 发送 skill_id=0 给主页，通知取消选择
+    const message = { type: MESSAGE_TYPES.SELECT_SKILL, skill_id: "0" };
+    console.log("[useIframeSkill] clearSkill, sending skill_id=0:", message);
+    window.parent.postMessage(message, "*");
+  }, []);
+
+  return { selectedSkill, sendSelectSkill, openSkillDialog, clearSkill };
+}
diff --git a/frontend/src/hooks/use-selected-skill-listener.ts b/frontend/src/hooks/use-selected-skill-listener.ts
new file mode 100644
index 00000000..cf78b145
--- /dev/null
+++ b/frontend/src/hooks/use-selected-skill-listener.ts
@@ -0,0 +1,145 @@
+import { useSearchParams } from "next/navigation";
+import { useEffect, useCallback, useState, useRef } from "react";
+import { toast } from "sonner";
+import { bootstrapRemoteSkill } from "@/core/skills/api";
+
+/** 宿主页发过来的 selectedSkill 消息结构 */
+interface SelectedSkillMessage {
+  type: "selectedSkill";
+  id: number | string;
+  title: string;
+}
+
+/** 技能基础数据 */
+interface SkillData {
+  skill_id: string;
+  title: string;
+}
+
+/** 错误信息状态 */
+interface SkillError {
+  title: string;
+  message: string;
+}
+
+interface UseSelectedSkillListenerOptions {
+  /** 当前会话 thread_id，用于调用 bootstrapRemoteSkill */
+  threadId: string | null;
+}
+
+interface UseSelectedSkillListenerReturn {
+  /** 当前选中的技能数据（用于 UI 展示，如 Badge） */
+  selectedSkill: SkillData | null;
+  /** 当前错误信息，不为 null 时展示 DevDialog */
+  skillError: SkillError | null;
+  /** 清除错误信息（关闭 DevDialog 时调用） */
+  clearSkillError: () => void;
+  /** 是否正在加载（处理 skill 中） */
+  isBootstrapping: boolean;
+}
+
+/**
+ * 监听宿主页通过 postMessage 发送的 selectedSkill 消息或 URL 中的 skill 参数，
+ * 收到后自动调用 bootstrapRemoteSkill 接口：
+ * - 成功：使用 toast 提示
+ * - 失败：返回 skillError 供 DevDialog 显示
+ */
+export function useSelectedSkillListener({
+  threadId,
+}: UseSelectedSkillListenerOptions): UseSelectedSkillListenerReturn {
+  const searchParams = useSearchParams();
+  const [selectedSkill, setSelectedSkill] = useState<SkillData | null>(null);
+  const [skillError, setSkillError] = useState<SkillError | null>(null);
+  const [isBootstrapping, setIsBootstrapping] = useState(false);
+
+  const isFirstLoadRef = useRef(false);
+  const skillBootstrappedKeyRef = useRef<string | null>(null);
+
+  const performBootstrap = useCallback(
+    async (id: number | string, title: string) => {
+      if (!threadId) return;
+
+      const languageTypeRaw =
+        searchParams.get("languageType")?.trim() ??
+        searchParams.get("language_type")?.trim();
+      const languageType = languageTypeRaw ? Number(languageTypeRaw) : 0;
+
+      const initKey = `${threadId}:${id}:${languageType}`;
+      if (skillBootstrappedKeyRef.current === initKey) {
+        return;
+      }
+
+      console.log(`[useSelectedSkillListener] 开始初始化技能: ${title} (${id})`);
+      setIsBootstrapping(true);
+      toast.loading(`正在加载技能「${title}」...`, { id: "skill-bootstrap" });
+
+      try {
+        const result = await bootstrapRemoteSkill({
+          thread_id: threadId,
+          content_id: Number(id),
+          language_type: languageType,
+          target_dir: "/mnt/user-data/uploads/skill",
+          clear_target: true,
+        });
+
+        toast.dismiss("skill-bootstrap");
+
+        if (result.success) {
+          skillBootstrappedKeyRef.current = initKey;
+          toast.success(`技能「${title}」加载成功`, {
+            description: result.message || `已创建 ${result.created_files} 个文件`,
+            duration: 4000,
+          });
+        } else {
+          setSkillError({
+            title: `技能「${title}」加载失败`,
+            message: result.message || "未知错误",
+          });
+        }
+      } catch (err) {
+        toast.dismiss("skill-bootstrap");
+        const message = err instanceof Error ? err.message : "网络请求失败";
+        setSkillError({ title: `技能「${title}」加载出错`, message });
+      } finally {
+        setIsBootstrapping(false);
+      }
+    },
+    [threadId, searchParams],
+  );
+
+  // 1. URL 初始化集成
+  useEffect(() => {
+    if (!threadId || isFirstLoadRef.current) return;
+
+    const skillIdFromQuery = searchParams.get("skill_id");
+    const titleFromQuery = searchParams.get("title");
+    if (skillIdFromQuery && titleFromQuery) {
+      isFirstLoadRef.current = true;
+      setSelectedSkill({ skill_id: skillIdFromQuery, title: titleFromQuery });
+      void performBootstrap(skillIdFromQuery, titleFromQuery);
+    }
+  }, [threadId, searchParams, performBootstrap]);
+
+  const handleMessage = useCallback(
+    async (event: MessageEvent) => {
+      const data = event.data as SelectedSkillMessage;
+      if (!data || data.type !== "selectedSkill") return;
+
+      const { id, title } = data;
+      console.log("[useSelectedSkillListener] 收到 postMessage selectedSkill:", data);
+
+      setSelectedSkill({ skill_id: String(id), title });
+      void performBootstrap(id, title);
+    },
+    [performBootstrap],
+  );
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [handleMessage]);
+
+  const clearSkillError = useCallback(() => setSkillError(null), []);
+
+  return { selectedSkill, skillError, clearSkillError, isBootstrapping };
+}
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index bbe79d43..593623c9 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -72,8 +72,9 @@
 
 @theme {
   --font-sans:
-    var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    "Microsoft YaHei", "微软雅黑", var(--font-geist-sans), ui-sans-serif,
+    system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
 
   --animate-fade-in: fade-in 1.1s;
   @keyframes fade-in {
@@ -185,6 +186,7 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-tooltip-background: var(--tooltip-background);
   --animate-aurora: aurora 8s ease-in-out infinite alternate;
   @keyframes aurora {
     0% {
@@ -224,19 +226,25 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(0.9855 0.0098 87.47);
+  --background: #f9f8fa;
   --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0.0098 87.47);
+  /* --foreground: #00000066; */
+  /* --card: oklch(1 0.0098 87.47); */
+  --card: #ffffff;
   --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0.0098 87.47);
+  /* --popover: oklch(1 0.0098 87.47); */
+  --popover: #ffffff;
   --popover-foreground: oklch(0.145 0 0);
   --primary: oklch(0 0 0);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.9455 0.0098 87.47);
+  /* --secondary: oklch(0.9455 0.0098 87.47); */
+  --secondary: #1500331a;
   --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0.0098 87.47);
+  /* --muted: oklch(0.97 0.0098 87.47); */
+  --muted: #1500331a;
   --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.94 0.0098 87.47);
+  /* --accent: oklch(0.94 0.0098 87.47); */
+  --accent: #1500331a;
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0.0098 87.47);
@@ -255,6 +263,7 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0.0098 87.47);
   --sidebar-ring: oklch(0.708 0 0);
+  --tooltip-background: #00000066;
 }
 
 .dark {
@@ -289,6 +298,7 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+  --tooltip-background: oklch(0.85 0 0);
   font-weight: 300;
 }
 
@@ -297,7 +307,7 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
   }
 
   .container-md {
@@ -384,9 +394,62 @@
   }
 }
 
+/* Hide scrollbar but keep scroll behavior */
+* {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+*::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
 :root {
   --container-width-xs: calc(var(--spacing) * 72);
   --container-width-sm: calc(var(--spacing) * 144);
   --container-width-md: calc(var(--spacing) * 204);
   --container-width-lg: calc(var(--spacing) * 256);
 }
+
+/* ========================================
+   Streamdown Markdown Styles
+   使用 data-streamdown 属性选择器统一定义
+   支持 zoom-scale CSS 变量进行缩放
+   ======================================== */
+
+/* 缩放变量，默认为 1 (100%) */
+:root {
+  --zoom-scale: 1;
+}
+
+/* p标签没有标识data-streamdown，暂时只能这么写 */
+p {
+  font-size: calc(14px * var(--zoom-scale));
+}
+
+/* 列表项 - 14px */
+[data-streamdown="list-item"] {
+  font-size: calc(14px * var(--zoom-scale));
+  padding-top: calc(4px * var(--zoom-scale));
+  padding-bottom: calc(4px * var(--zoom-scale));
+}
+
+/* 一级标题 - 20px */
+[data-streamdown="heading-1"] {
+  font-size: calc(20px * var(--zoom-scale));
+}
+
+/* 二三级标题 - 16px */
+[data-streamdown="heading-2"],
+[data-streamdown="heading-3"] {
+  font-size: calc(16px * var(--zoom-scale));
+}
+
+/* 二三级标题 - 16px */
+[data-streamdown="code-block"] pre {
+  font-size: calc(16px * var(--zoom-scale));
+}
+
+.cm-line {
+  font-size: calc(14px * var(--zoom-scale));
+}