From 8aa52e7e3caeb6c8bac15efb47424c0f8bc2a39b Mon Sep 17 00:00:00 2001
From: zjy <2642113241@qq.com>
Date: Fri, 29 May 2026 09:51:44 +0800
Subject: [PATCH 1/9] =?UTF-8?q?'feat:=E6=99=BA=E8=83=BD=E4=BD=93=E6=9A=97?=
 =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend-web/src/components/ui/card.tsx       |   6 +-
 .../src/components/ui/input-group.tsx         |   2 +-
 frontend-web/src/components/ui/input.tsx      |   9 +-
 frontend-web/src/components/ui/tabs.tsx       | 114 +++++++-------
 frontend-web/src/components/ui/textarea.tsx   |   4 +-
 .../workspace/agents/agent-card.tsx           |  15 +-
 .../workspace/agents/agent-gallery.tsx        |  16 +-
 .../workspace/tags/tag-search-bar.tsx         |   2 +-
 frontend-web/src/pages/NewAgentPage.tsx       | 140 +++++++++++++-----
 offline-backend-20260512/backend/config.yaml  |   6 +-
 10 files changed, 202 insertions(+), 112 deletions(-)

diff --git a/frontend-web/src/components/ui/card.tsx b/frontend-web/src/components/ui/card.tsx
index eb693c16..8a613603 100644
--- a/frontend-web/src/components/ui/card.tsx
+++ b/frontend-web/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-[4px] border py-6 shadow-sm dark:border-[#0049A5] dark:bg-[#02244C]",
         className,
       )}
       {...props}
@@ -42,7 +42,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground text-sm dark:text-[#F2F3F5]", className)}
       {...props}
     />
   );
@@ -65,7 +65,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-content"
-      className={cn("px-6", className)}
+      className={cn("px-6 ", className)}
       {...props}
     />
   );
diff --git a/frontend-web/src/components/ui/input-group.tsx b/frontend-web/src/components/ui/input-group.tsx
index bb535dbb..ec7272b4 100644
--- a/frontend-web/src/components/ui/input-group.tsx
+++ b/frontend-web/src/components/ui/input-group.tsx
@@ -14,7 +14,7 @@ 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 relative flex w-full items-center rounded-md border border-input/50 bg-white/80 shadow-xs transition-[color,box-shadow] outline-none dark:border-[#1B477E] dark:bg-[#022248]",
         "h-9 min-w-0 has-[>textarea]:h-auto",
 
         // Variants based on alignment.
diff --git a/frontend-web/src/components/ui/input.tsx b/frontend-web/src/components/ui/input.tsx
index 481e6788..6537bb0f 100644
--- a/frontend-web/src/components/ui/input.tsx
+++ b/frontend-web/src/components/ui/input.tsx
@@ -8,9 +8,12 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] md:text-sm",
+        "border-input placeholder:text-muted-foreground",
+        "dark:border-[#1B477E] dark:bg-[#022248] dark:text-[#AACEFF] dark:placeholder:text-[#566B7F] rounded-[4px] text-[16px]",
+        "file:text-foreground selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] dark:focus-visible:border-[#3b82f6] dark:focus-visible:ring-[#3b82f6]/30",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}
diff --git a/frontend-web/src/components/ui/tabs.tsx b/frontend-web/src/components/ui/tabs.tsx
index 41a53cc7..9bbb70e2 100644
--- a/frontend-web/src/components/ui/tabs.tsx
+++ b/frontend-web/src/components/ui/tabs.tsx
@@ -30,7 +30,8 @@ const tabsListVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-muted",
+        default:
+          "bg-muted dark:group-data-[orientation=horizontal]/tabs:h-8! dark:items-stretch dark:gap-0 dark:overflow-hidden dark:rounded-[2px] dark:border dark:border-[#55A6FE] dark:bg-[#022248] dark:p-0",
         line: "gap-1 bg-transparent",
       },
     },
@@ -40,60 +41,65 @@ const tabsListVariants = cva(
   },
 );
 
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> &
-    VariantProps<typeof tabsListVariants>
->(({ className, variant = "default", ...props }, ref) => {
-  return (
-    <TabsPrimitive.List
-      ref={ref}
-      data-slot="tabs-list"
-      data-variant={variant}
-      className={cn(tabsListVariants({ variant }), className)}
-      {...props}
-    />
-  );
-});
-
-TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> &
+    VariantProps<typeof tabsListVariants>
+>(({ className, variant = "default", ...props }, ref) => {
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
 
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => {
-  return (
-    <TabsPrimitive.Trigger
-      ref={ref}
-      data-slot="tabs-trigger"
-      className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+TabsList.displayName = TabsPrimitive.List.displayName;
 
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => {
-  return (
-    <TabsPrimitive.Content
-      ref={ref}
-      data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
-      {...props}
-    />
-  );
-});
-
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => {
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      data-slot="tabs-trigger"
+      className={cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "dark:text-muted-foreground dark:hover:text-foreground",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground",
+        "dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-input dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-input/30 dark:group-data-[variant=line]/tabs-list:data-[state=active]:text-foreground",
+        "dark:group-data-[variant=default]/tabs-list:relative dark:group-data-[variant=default]/tabs-list:!h-full dark:group-data-[variant=default]/tabs-list:self-stretch dark:group-data-[variant=default]/tabs-list:flex-none dark:group-data-[variant=default]/tabs-list:rounded-none dark:group-data-[variant=default]/tabs-list:border-0 dark:group-data-[variant=default]/tabs-list:bg-transparent dark:group-data-[variant=default]/tabs-list:px-4 dark:group-data-[variant=default]/tabs-list:!py-0 dark:group-data-[variant=default]/tabs-list:!leading-none dark:group-data-[variant=default]/tabs-list:shadow-none dark:group-data-[variant=default]/tabs-list:focus-visible:ring-0 dark:group-data-[variant=default]/tabs-list:[&_svg]:text-[#CCD2DA]",
+        "dark:group-data-[variant=default]/tabs-list:not(:first-child):border-l dark:group-data-[variant=default]/tabs-list:not(:first-child):border-[#1d3961] dark:group-data-[variant=default]/tabs-list:data-[state=active]:border-l-0",
+        "dark:group-data-[variant=default]/tabs-list:data-[state=active]:rounded-none dark:group-data-[variant=default]/tabs-list:data-[state=active]:border-0 dark:group-data-[variant=default]/tabs-list:data-[state=active]:bg-[#0062D9] dark:group-data-[variant=default]/tabs-list:data-[state=active]:text-[#FFFFFF] dark:group-data-[variant=default]/tabs-list:data-[state=active]:shadow-none dark:group-data-[variant=default]/tabs-list:data-[state=active]:[&_svg]:text-[#FFFFFF] dark:group-data-[variant=default]/tabs-list:hover:text-[#CCD2DA]",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => {
+  return (
+    <TabsPrimitive.Content
+      ref={ref}
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+});
+
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
diff --git a/frontend-web/src/components/ui/textarea.tsx b/frontend-web/src/components/ui/textarea.tsx
index d55b5a4b..5bdc6ef7 100644
--- a/frontend-web/src/components/ui/textarea.tsx
+++ b/frontend-web/src/components/ui/textarea.tsx
@@ -7,7 +7,9 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground/60 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground/60 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "dark:border-[#1B477E] dark:bg-[#022248] dark:text-[#AACEFF] ",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,
       )}
       {...props}
diff --git a/frontend-web/src/components/workspace/agents/agent-card.tsx b/frontend-web/src/components/workspace/agents/agent-card.tsx
index 0842da4e..99d44e12 100644
--- a/frontend-web/src/components/workspace/agents/agent-card.tsx
+++ b/frontend-web/src/components/workspace/agents/agent-card.tsx
@@ -188,15 +188,18 @@ export function AgentCard({ agent }: AgentCardProps) {
 
   return (
     <>
-      <Card className="group flex flex-col transition-shadow hover:shadow-md">
-        <CardHeader className="pb-3">
-          <div className="flex items-start justify-between gap-2">
-            <div className="flex min-w-0 flex-1 items-center gap-2">
+      <Card className="group flex min-w-0 flex-col transition-shadow hover:shadow-md">
+        <CardHeader className="min-w-0 pb-3">
+          <div className="flex min-w-0 items-start justify-between gap-2">
+            <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
               <div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
                 <BotIcon className="h-5 w-5" />
               </div>
-              <div className="min-w-0 flex-1">
-                <CardTitle className="truncate text-base" title={desensitize(agent.name)}>
+              <div className="min-w-0 flex-1 overflow-hidden">
+                <CardTitle
+                  className="block w-full min-w-0 overflow-hidden text-base text-ellipsis whitespace-nowrap"
+                  title={desensitize(agent.name)}
+                >
                   {desensitize(agent.name)}
                 </CardTitle>
                 {agent.model && (
diff --git a/frontend-web/src/components/workspace/agents/agent-gallery.tsx b/frontend-web/src/components/workspace/agents/agent-gallery.tsx
index cdce912f..b6e12196 100644
--- a/frontend-web/src/components/workspace/agents/agent-gallery.tsx
+++ b/frontend-web/src/components/workspace/agents/agent-gallery.tsx
@@ -49,15 +49,21 @@ export function AgentGallery() {
 
   const renderEmpty = (description: string, showNewButton = false) => (
     <div className="flex h-64 flex-col items-center justify-center gap-3 text-center">
-      <div className="bg-muted flex h-14 w-14 items-center justify-center rounded-full">
-        <BotIcon className="text-muted-foreground h-7 w-7" />
+      <div className="bg-muted flex h-14 w-14 items-center justify-center rounded-full dark:bg-[#022248]">
+        <BotIcon className="text-muted-foreground h-7 w-7 dark:text-[#AACEFF]" />
       </div>
       <div>
-        <p className="font-medium">{t.agents.emptyTitle}</p>
-        <p className="text-muted-foreground mt-1 text-sm">{description}</p>
+        <p className="font-medium dark:text-[#AACEFF]">{t.agents.emptyTitle}</p>
+        <p className="text-muted-foreground mt-1 text-sm dark:text-[#55A6FE]">
+          {description}
+        </p>
       </div>
       {showNewButton && (
-        <Button variant="outline" className="mt-2" onClick={handleNewAgent}>
+        <Button
+          variant="outline"
+          className="mt-2 dark:border-[#2580FF] dark:bg-[#2580FF] dark:text-white dark:hover:border-[#2580FF] dark:hover:bg-[#2580FF]/90 dark:hover:text-white"
+          onClick={handleNewAgent}
+        >
           <PlusIcon className="mr-1.5 h-4 w-4" />
           {t.agents.newAgent}
         </Button>
diff --git a/frontend-web/src/components/workspace/tags/tag-search-bar.tsx b/frontend-web/src/components/workspace/tags/tag-search-bar.tsx
index 1430e9df..e4ffe2b4 100644
--- a/frontend-web/src/components/workspace/tags/tag-search-bar.tsx
+++ b/frontend-web/src/components/workspace/tags/tag-search-bar.tsx
@@ -68,7 +68,7 @@ export function TagSearchBar({
   return (
     <div className={cn("flex flex-col gap-2.5", className)}>
       <div className="relative">
-        <SearchIcon className="text-muted-foreground absolute left-2.5 top-1/2 size-4 -translate-y-1/2" />
+        <SearchIcon className="text-muted-foreground dark:text-[#60a5fa]/90 absolute left-2.5 top-1/2 size-4 -translate-y-1/2" />
         <Input
           value={input}
           onChange={(e) => setInput(e.target.value)}
diff --git a/frontend-web/src/pages/NewAgentPage.tsx b/frontend-web/src/pages/NewAgentPage.tsx
index 8a5c977c..6129a35b 100644
--- a/frontend-web/src/pages/NewAgentPage.tsx
+++ b/frontend-web/src/pages/NewAgentPage.tsx
@@ -19,6 +19,13 @@ import {
 } from "@/components/ai-elements/prompt-input";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { ArtifactsProvider } from "@/components/workspace/artifacts";
 import {
@@ -115,10 +122,34 @@ export default function NewAgentPage() {
       return;
     }
     const first = models[0]!.name;
-    setModelInput((prev) => prev || first);
-    setChatModelInput((prev) => prev || first);
+    setModelInput((prev) =>
+      prev && models.some((m) => m.name === prev) ? prev : first,
+    );
+    setChatModelInput((prev) =>
+      prev && models.some((m) => m.name === prev) ? prev : first,
+    );
   }, [models]);
 
+  const resolvedModelInput = useMemo(() => {
+    if (models.length === 0) {
+      return "";
+    }
+    if (modelInput && models.some((m) => m.name === modelInput)) {
+      return modelInput;
+    }
+    return models[0]!.name;
+  }, [modelInput, models]);
+
+  const resolvedChatModelInput = useMemo(() => {
+    if (models.length === 0) {
+      return "";
+    }
+    if (chatModelInput && models.some((m) => m.name === chatModelInput)) {
+      return chatModelInput;
+    }
+    return models[0]!.name;
+  }, [chatModelInput, models]);
+
   const [thread, sendMessage] = useThreadStream({
     threadId,
     assistantId: agentId || undefined,
@@ -347,23 +378,42 @@ export default function NewAgentPage() {
                   <span className="text-muted-foreground text-xs">
                     当前对话模型
                   </span>
-                  <select
-                    value={chatModelInput}
-                    onChange={(event) =>
-                      setChatModelInput(event.currentTarget.value)
-                    }
-                    disabled={isModelsLoading || thread.isLoading}
-                    className="border-input bg-background h-7 min-w-[10rem] rounded-md border px-2 text-xs shadow-xs outline-none"
-                  >
-                    <option value="" disabled>
-                      选择模型
-                    </option>
-                    {models.map((model) => (
-                      <option key={model.name} value={model.name}>
-                        {model.display_name || model.name}
-                      </option>
-                    ))}
-                  </select>
+                  {isModelsLoading || models.length === 0 ? (
+                    <div className="border-input bg-background text-muted-foreground flex h-7 min-w-[10rem] items-center rounded-md border px-2 text-xs shadow-xs dark:border-[#1B477E] dark:bg-[#022248]">
+                      {isModelsLoading ? "加载中…" : "暂无模型"}
+                    </div>
+                  ) : (
+                    <Select
+                      value={resolvedChatModelInput}
+                      onValueChange={setChatModelInput}
+                      disabled={thread.isLoading}
+                    >
+                      <SelectTrigger
+                        className={cn(
+                          "border-input bg-background h-7 min-w-[10rem] px-2 text-xs shadow-xs outline-none",
+                          "dark:border-[#1B477E] dark:bg-[#022248] dark:text-[#AACEFF] dark:hover:bg-[#022248]",
+                          "data-[placeholder]:text-muted-foreground",
+                          "[&_svg]:dark:text-[#AACEE2]",
+                        )}
+                      >
+                        <SelectValue placeholder="选择模型" />
+                      </SelectTrigger>
+                      <SelectContent
+                        position="popper"
+                        className="w-[var(--radix-select-trigger-width)] dark:border-[#1B477E] dark:bg-[#022248]"
+                      >
+                        {models.map((model) => (
+                          <SelectItem
+                            key={model.name}
+                            value={model.name}
+                            className="dark:text-[#AACEFF] dark:data-[highlighted]:bg-[#0062D9] dark:data-[highlighted]:text-white"
+                          >
+                            {model.display_name || model.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
                 </div>
                 <PromptInput
                   onSubmit={({ text }) => void handleChatSubmit(text)}
@@ -415,21 +465,41 @@ export default function NewAgentPage() {
 
                 <div className="space-y-2">
                   <label className="text-sm font-medium">模型</label>
-                  <select
-                    value={modelInput}
-                    onChange={(event) => setModelInput(event.currentTarget.value)}
-                    disabled={isModelsLoading}
-                    className="border-input bg-background h-9 w-full rounded-md border px-3 text-sm shadow-xs outline-none"
-                  >
-                    <option value="" disabled>
-                      选择模型
-                    </option>
-                    {models.map((model) => (
-                      <option key={model.name} value={model.name}>
-                        {model.display_name || model.name}
-                      </option>
-                    ))}
-                  </select>
+                  {isModelsLoading || models.length === 0 ? (
+                    <div className="border-input bg-background text-muted-foreground flex h-9 w-full items-center rounded-md border px-3 text-sm shadow-xs dark:border-[#1B477E] dark:bg-[#022248]">
+                      {isModelsLoading ? "加载模型…" : "暂无可用模型"}
+                    </div>
+                  ) : (
+                    <Select
+                      value={resolvedModelInput}
+                      onValueChange={setModelInput}
+                    >
+                      <SelectTrigger
+                        className={cn(
+                          "border-input bg-background h-9 w-full shadow-xs outline-none",
+                          "dark:border-[#1B477E] dark:bg-[#022248] dark:text-[#AACEFF] dark:hover:bg-[#022248]",
+                          "data-[placeholder]:text-muted-foreground",
+                          "[&_svg]:dark:text-[#AACEE2]",
+                        )}
+                      >
+                        <SelectValue placeholder="选择模型" />
+                      </SelectTrigger>
+                      <SelectContent
+                        position="popper"
+                        className="w-[var(--radix-select-trigger-width)] dark:border-[#1B477E] dark:bg-[#022248]"
+                      >
+                        {models.map((model) => (
+                          <SelectItem
+                            key={model.name}
+                            value={model.name}
+                            className="dark:text-[#AACEFF] dark:data-[highlighted]:bg-[#0062D9] dark:data-[highlighted]:text-white"
+                          >
+                            {model.display_name || model.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
                   <p className="text-muted-foreground text-xs">
                     该智能体被使用时调用的模型。
                   </p>
@@ -463,7 +533,7 @@ export default function NewAgentPage() {
                       />
                     </div>
                   )}
-                  <div className="max-h-[240px] overflow-y-auto rounded-md border p-2">
+                  <div className="max-h-[240px] overflow-y-auto rounded-md border p-2 dark:border-[#1B477E] dark:bg-[#022248]">
                     {isSkillsLoading ? (
                       <p className="text-muted-foreground text-sm">技能加载中...</p>
                     ) : enabledSkills.length === 0 ? (
diff --git a/offline-backend-20260512/backend/config.yaml b/offline-backend-20260512/backend/config.yaml
index ac83d28f..e2044acd 100644
--- a/offline-backend-20260512/backend/config.yaml
+++ b/offline-backend-20260512/backend/config.yaml
@@ -129,14 +129,14 @@ agents_api:
   enabled: true
 
 database:
-  backend: mysql
-  mysql_url: $MYSQL_DATABASE_URL
+  backend: sqlite
+  sqlite_dir: .deer-flow/data
   pool_size: 10
   echo_sql: false
 
 checkpointer:
   type: sqlite
-  connection_string: D:\cursor-work\offline-backend-20260512\backend\.deer-flow\data\deerflow.db
+  connection_string: D:\05271502\deerflow-server\offline-backend-20260512\backend\.deer-flow\data\deerflow.db
 
 # 记忆子系统:跨会话持久化用户画像与 agent 私有记忆。
 # 三层覆盖优先级(高->低):

From 1a122eb7fd8c6d87f005a441761a8dae862e33c0 Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Fri, 29 May 2026 11:19:58 +0800
Subject: [PATCH 2/9] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend-web/src/assets/icon/down-logo.svg    |   1 +
 frontend-web/src/assets/icon/nav-active.svg   |   1 +
 .../src/assets/icon/nav-line-logo.svg         |   1 +
 frontend-web/src/components/page-sdebar.css   |  44 +++-
 .../src/components/page-sidebar-dark.tsx      |   3 +-
 .../components/ai-writing/AIWritingPanel.tsx  |  12 +
 .../ai-writing/InterventionCard.tsx           |  98 +++++--
 .../components/ai-writing/MaterialItem.tsx    |  10 +-
 .../ai-writing/MaterialsToolbar.tsx           |  98 +++----
 .../components/ai-writing/SkillStepsCard.tsx  | 105 ++++++++
 .../open-canvas/hooks/useAIWritingStream.ts   |  42 ++-
 .../src/open-canvas/types/ai-writing.ts       |  25 +-
 .../components/RecommendAgentsDialog.tsx      |  33 ++-
 offline-backend-20260512/backend/config.yaml  |  20 +-
 .../backend/extensions_config.json            |  11 +
 .../deerflow/agents/ai_writing/graph.py       |  19 +-
 .../agents/ai_writing/nodes/researcher.py     | 146 ++++++++---
 .../agents/ai_writing/search/__init__.py      |   2 +
 .../agents/ai_writing/search/skill_search.py  | 248 ++++++++++++++++++
 .../deerflow/agents/ai_writing/state.py       |  33 ++-
 20 files changed, 812 insertions(+), 140 deletions(-)
 create mode 100644 frontend-web/src/assets/icon/down-logo.svg
 create mode 100644 frontend-web/src/assets/icon/nav-active.svg
 create mode 100644 frontend-web/src/assets/icon/nav-line-logo.svg
 create mode 100644 frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
 create mode 100644 offline-backend-20260512/backend/extensions_config.json
 create mode 100644 offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py

diff --git a/frontend-web/src/assets/icon/down-logo.svg b/frontend-web/src/assets/icon/down-logo.svg
new file mode 100644
index 00000000..19343061
--- /dev/null
+++ b/frontend-web/src/assets/icon/down-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:url(#a);}</style><linearGradient id="a" x1="0.277" y1="0.03" x2="0.725" y2="1.083" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff"/><stop offset="1" stop-color="#00c7ff"/></linearGradient></defs><g transform="translate(-128.5 -117)"><rect class="a" width="16" height="16" transform="translate(128.5 117)"/><path class="b" d="M4,0,8,5H0Z" transform="translate(140.5 128) rotate(180)"/></g></svg>
\ No newline at end of file
diff --git a/frontend-web/src/assets/icon/nav-active.svg b/frontend-web/src/assets/icon/nav-active.svg
new file mode 100644
index 00000000..776703e6
--- /dev/null
+++ b/frontend-web/src/assets/icon/nav-active.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="84.499" height="70" viewBox="0 0 84.499 70"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="0.043" x2="0.978" y2="1.016" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#0062d9" stop-opacity="0.6"/><stop offset="1" stop-color="#0062d9" stop-opacity="0.302"/></linearGradient></defs><path class="a" d="M8855.277-1940.39l-.054-70h78v31.183l6.5,5.257-6.5,5.259v28.3Z" transform="translate(-8855.224 2010.389)"/></svg>
\ No newline at end of file
diff --git a/frontend-web/src/assets/icon/nav-line-logo.svg b/frontend-web/src/assets/icon/nav-line-logo.svg
new file mode 100644
index 00000000..0f31a8e2
--- /dev/null
+++ b/frontend-web/src/assets/icon/nav-line-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77" height="45" viewBox="0 0 77 45"><defs><style>.a{fill:url(#a);}</style><pattern id="a" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 340 45"><image width="340" height="45" xlink:href="data:image/png;base64,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"/></pattern></defs><rect class="a" width="77" height="45"/></svg>
\ No newline at end of file
diff --git a/frontend-web/src/components/page-sdebar.css b/frontend-web/src/components/page-sdebar.css
index 06ad158e..263fc14d 100644
--- a/frontend-web/src/components/page-sdebar.css
+++ b/frontend-web/src/components/page-sdebar.css
@@ -10,11 +10,12 @@
     flex-direction: column;
     align-items: center;
     padding: 12px 10px;
+    position: relative;
 }
 
 .item-nav{
     width:100%;
-    padding:14px 0;
+    padding:10px 0;
     border-bottom:1px solid rgba(85, 166, 254, 0.2);
     font-family:'Noto Sans S Chinese', sans-serif;
     font-weight:500;
@@ -39,4 +40,45 @@
     box-sizing:border-box;
     letter-spacing:6px;
     word-break:break-all;
+}
+
+.item-nav-content{ 
+    width: 155px;
+    height: 970px;
+    background: rgba(3, 38, 80, 0.8);
+    border: 1px solid;
+    border-color: rgba(43, 143, 254, 0.6);
+    border-radius: 4px;
+    backdrop-filter: blur(2px);
+    position: absolute;
+    left: 97px;
+    top: 0;
+    z-index: 1000;
+}
+
+.item-nav-active{
+    color:#ffffff;
+    position: relative;
+}
+
+.item-nav-active::before{
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width:84.5px;
+    height:70px;
+    background: url('../assets/icon/nav-active.svg') no-repeat;
+    background-size: contain;
+}
+
+.item-nav-active::after{
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 25px;
+    width:77px;
+    height:45px;
+    background: url('../assets/icon/nav-line-logo.svg') no-repeat;
+    background-size: cover;
 }
\ No newline at end of file
diff --git a/frontend-web/src/components/page-sidebar-dark.tsx b/frontend-web/src/components/page-sidebar-dark.tsx
index cf24537d..dd841c64 100644
--- a/frontend-web/src/components/page-sidebar-dark.tsx
+++ b/frontend-web/src/components/page-sidebar-dark.tsx
@@ -332,8 +332,9 @@ export function PageSidebarDark({
       {/* TODO: 在这里编写深色主题的侧边栏 HTML 结构 */}
       <div className="sidebar-contnet">
         <div className="sidebar-contents">
+          <div className="item-nav-content"></div>
           {visibleMenuItems.map((item) => (
-            <div key={item.id} className="item-nav">
+            <div key={item.id} className={`item-nav ${item.id === 'qa-center' ? 'item-nav-active' : ''}`}>
               <span className="item-nav__label">{item.label}</span>
             </div>
           ))}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
index c9b5ba9f..e96ad767 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
@@ -38,6 +38,7 @@ const ENABLE_PAUSE_RESUME_UI = false;
 import { AIWritingForm } from './AIWritingForm';
 import { AIWritingTimeline } from './AIWritingTimeline';
 import { InterventionCard } from './InterventionCard';
+import { SkillStepsCard } from './SkillStepsCard';
 import { WritingSkeletonCard } from './WritingSkeletonCard';
 import { DraftStreamingView } from './DraftStreamingView';
 import { IntentResultCard } from './IntentResultCard';
@@ -411,6 +412,8 @@ export function AIWritingPanel({
                   reviewResult={state.reviewResult}
                   draftTitle={state.currentDraftTitle}
                   revisionCount={state.revisionCount}
+                  skillSearchSteps={state.skillSearchSteps}
+                  skillSearchInProgress={state.status === 'researching' && state.skillSearchSteps.length > 0}
                   onSubmit={submitIntervention}
                   disabled={false}
                 />
@@ -444,10 +447,19 @@ export function AIWritingPanel({
           />
         )}
 
+        {/* 研究中 + 已有技能步骤：实时流式展示技能检索过程，避免 skeleton 卡片掩盖步骤 */}
+        {state.status === 'researching' && state.skillSearchSteps.length > 0 && (
+          <div className="px-4 pb-2">
+            <SkillStepsCard steps={state.skillSearchSteps} inProgress />
+          </div>
+        )}
+
         {showSkeleton &&
          state.status !== 'writing_draft' &&
          !(state.status === 'writing_outline' && (state.outlineStreamingText || state.outlineThinkingText)) &&
          !(state.status === 'reviewing' && state.streamingReviewItems.length > 0) &&
+         /* 技能检索已经在流式展示步骤，不需要再叠加 skeleton */
+         !(state.status === 'researching' && state.skillSearchSteps.length > 0) &&
          /* 意图解析流式过程中（LLM 还在吐 JSON）不要显示 skeleton */
          !state.intentStreamingText && !state.intentThinkingText && (
           <div className="px-4 pb-4">
diff --git a/frontend-web/src/open-canvas/components/ai-writing/InterventionCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/InterventionCard.tsx
index 6f652103..0230c061 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/InterventionCard.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/InterventionCard.tsx
@@ -2,7 +2,7 @@ import { useRef, useState } from 'react';
 import {
   PauseCircle, CheckCircle2, RotateCcw, Search,
   RefreshCw, PenLine, ArrowRight, ShieldAlert, ClipboardEdit, SendHorizonal,
-  Trash2, BookOpen,
+  Trash2, BookOpen, Sparkles,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
@@ -10,11 +10,13 @@ import type {
   AIMaterial, AIOutline, ReviewResult, ReviewIssue,
   ProgressEvent, UserInterventionPayload,
   BlockedSection, SectionDecisionKind,
+  SkillSearchStep,
 } from '../../types/ai-writing';
 import { MaterialsCard } from './MaterialsCard';
 import { MaterialsToolbar } from './MaterialsToolbar';
 import { OutlineCard } from './OutlineCard';
 import { ReviewCard } from './ReviewCard';
+import { SkillStepsCard } from './SkillStepsCard';
 
 interface InterventionCardProps {
   pauseEvent: ProgressEvent;
@@ -23,18 +25,29 @@ interface InterventionCardProps {
   reviewResult: ReviewResult | null;
   draftTitle: string;
   revisionCount: number;
+  skillSearchSteps?: SkillSearchStep[];
+  /** 是否正在检索中（researching/awaiting 切换之间，前端用于流式展示步骤进行中） */
+  skillSearchInProgress?: boolean;
   onSubmit: (payload: UserInterventionPayload) => void;
   disabled?: boolean;
 }
 
 export function InterventionCard({
   pauseEvent, materials, outline, reviewResult,
-  draftTitle, revisionCount, onSubmit, disabled,
+  draftTitle, revisionCount, skillSearchSteps, skillSearchInProgress, onSubmit, disabled,
 }: InterventionCardProps) {
   const pausePoint = pauseEvent.pausePoint;
 
   if (pausePoint === 'material_confirm') {
-    return <MaterialConfirmCard materials={materials} onSubmit={onSubmit} disabled={disabled} />;
+    return (
+      <MaterialConfirmCard
+        materials={materials}
+        skillSearchSteps={skillSearchSteps ?? []}
+        skillSearchInProgress={skillSearchInProgress}
+        onSubmit={onSubmit}
+        disabled={disabled}
+      />
+    );
   }
 
   if (pausePoint === 'outline_confirm') {
@@ -106,30 +119,40 @@ function formatSelectedIssues(issues: ReviewIssue[], selectedIndices: Set<number
 
 interface MaterialConfirmCardProps {
   materials: AIMaterial[];
+  skillSearchSteps: SkillSearchStep[];
+  skillSearchInProgress?: boolean;
   onSubmit: (payload: UserInterventionPayload) => void;
   disabled?: boolean;
 }
 
-function MaterialConfirmCard({ materials, onSubmit, disabled }: MaterialConfirmCardProps) {
+function MaterialConfirmCard({ materials, skillSearchSteps, skillSearchInProgress, onSubmit, disabled }: MaterialConfirmCardProps) {
   const [selectedIds, setSelectedIds] = useState<Set<string>>(
     () => new Set(materials.map((m) => m.id)),
   );
-  const [extraKeywords, setExtraKeywords] = useState<string[]>([]);
+  const [userQuery, setUserQuery] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
   async function handleConfirm() {
     setSubmitting(true);
-    await onSubmit({ action: 'confirm', approvedMaterialIds: [...selectedIds], extraKeywords });
+    await onSubmit({ action: 'confirm', approvedMaterialIds: [...selectedIds], userQuery: userQuery.trim() || undefined });
     setSubmitting(false);
   }
 
   async function handleReSearch() {
     setSubmitting(true);
-    await onSubmit({ action: 're_search', approvedMaterialIds: [], extraKeywords });
+    await onSubmit({ action: 're_search', approvedMaterialIds: [], userQuery: userQuery.trim() || undefined });
     setSubmitting(false);
   }
 
-  const hasExtra = extraKeywords.length > 0;
+  async function handleEnableSkillSearch() {
+    setSubmitting(true);
+    await onSubmit({ action: 'enable_skill_search', userQuery: userQuery.trim() || undefined });
+    setSubmitting(false);
+  }
+
+  const hasQuery = userQuery.trim().length > 0;
+  // 当前素材是否来自技能检索：根据素材 sourceType 推断（覆盖式替换后全是 skill）
+  const isSkillResult = materials.length > 0 && materials.every((m) => m.sourceType === 'skill');
 
   // 空数据态：未检索到任何素材，提示用户重新搜索或在无素材情况下继续
   if (materials.length === 0) {
@@ -140,33 +163,45 @@ function MaterialConfirmCard({ materials, onSubmit, disabled }: MaterialConfirmC
           <div>
             <p className="text-xs font-medium">未检索到任何素材</p>
             <p className="text-xs text-muted-foreground mt-0.5">
-              素材收集专家本次没有检索到相关数据。你可以补充关键词重新搜索，或在无素材的情况下直接继续写作（文章将仅依据写作意图生成）。
+              素材收集专家本次没有检索到相关数据。你可以补充关键词重新搜索、启用技能检索，或在无素材的情况下直接继续写作。
             </p>
           </div>
         </div>
 
+        {(skillSearchSteps.length > 0 || skillSearchInProgress) && (
+          <SkillStepsCard steps={skillSearchSteps} inProgress={skillSearchInProgress} />
+        )}
+
         <MaterialsToolbar
           materials={materials}
           selectedIds={selectedIds}
           onSelectAll={() => setSelectedIds(new Set())}
           onDeselectAll={() => setSelectedIds(new Set())}
-          extraKeywords={extraKeywords}
-          onAddKeyword={(kw) => setExtraKeywords((prev) => [...prev, kw])}
-          onRemoveKeyword={(kw) => setExtraKeywords((prev) => prev.filter((k) => k !== kw))}
+          userQuery={userQuery}
+          onUserQueryChange={setUserQuery}
+          onSubmitQuery={handleReSearch}
+          disabled={disabled || submitting}
         />
 
-        <div className="flex gap-2 pt-1">
+        <div className="flex flex-wrap gap-2 pt-1">
           <Button
-            type="button" size="sm" className="flex-1 h-8 text-xs gap-1.5"
+            type="button" size="sm" className="flex-1 min-w-[140px] h-8 text-xs gap-1.5"
             onClick={handleReSearch} disabled={disabled || submitting}
           >
-            {hasExtra
-              ? <><Search className="size-3.5" />追加搜索</>
+            {hasQuery
+              ? <><Search className="size-3.5" />按输入重新搜索</>
               : <><RotateCcw className="size-3.5" />重新搜索</>}
           </Button>
+          <Button
+            type="button" variant="outline" size="sm"
+            className="h-8 text-xs gap-1.5 shrink-0 border-violet-200 text-violet-700 hover:bg-violet-50 dark:border-violet-800 dark:text-violet-300 dark:hover:bg-violet-950/30"
+            onClick={handleEnableSkillSearch} disabled={disabled || submitting}
+          >
+            <Sparkles className="size-3.5" />技能检索
+          </Button>
           <Button
             type="button" variant="outline" size="sm" className="h-8 text-xs gap-1.5 shrink-0"
-            onClick={handleConfirm} disabled={disabled || submitting}
+            onClick={() => onSubmit({ action: 'confirm', approvedMaterialIds: [] })} disabled={disabled || submitting}
           >
             <ArrowRight className="size-3.5" />无数据继续写作
           </Button>
@@ -182,11 +217,14 @@ function MaterialConfirmCard({ materials, onSubmit, disabled }: MaterialConfirmC
         <div>
           <p className="text-xs font-medium">需要您确认素材，才能继续</p>
           <p className="text-xs text-muted-foreground mt-0.5">
-            已搜集到 {materials.length} 条素材（默认全选）。您可以取消勾选不相关的素材，或补充关键词追加搜索。
+            已搜集到 {materials.length} 条{isSkillResult ? '技能素材' : '素材'}（默认全选）。
+            您可以取消勾选不相关的素材，或补充关键词追加搜索{isSkillResult ? '' : '，也可以启用技能检索从已启用的技能中获取素材'}。
           </p>
         </div>
       </div>
 
+      {skillSearchSteps.length > 0 && <SkillStepsCard steps={skillSearchSteps} />}
+
       <MaterialsCard materials={materials} selectedIds={selectedIds} onToggle={(id) => {
         setSelectedIds((prev) => {
           const next = new Set(prev);
@@ -200,24 +238,34 @@ function MaterialConfirmCard({ materials, onSubmit, disabled }: MaterialConfirmC
         selectedIds={selectedIds}
         onSelectAll={() => setSelectedIds(new Set(materials.map((m) => m.id)))}
         onDeselectAll={() => setSelectedIds(new Set())}
-        extraKeywords={extraKeywords}
-        onAddKeyword={(kw) => setExtraKeywords((prev) => [...prev, kw])}
-        onRemoveKeyword={(kw) => setExtraKeywords((prev) => prev.filter((k) => k !== kw))}
+        userQuery={userQuery}
+        onUserQueryChange={setUserQuery}
+        onSubmitQuery={handleReSearch}
+        disabled={disabled || submitting}
       />
 
-      <div className="flex gap-2 pt-1">
+      <div className="flex flex-wrap gap-2 pt-1">
         <Button
-          type="button" size="sm" className="flex-1 h-8 text-xs gap-1.5"
+          type="button" size="sm" className="flex-1 min-w-[180px] h-8 text-xs gap-1.5"
           onClick={handleConfirm} disabled={disabled || submitting || selectedIds.size === 0}
         >
           <CheckCircle2 className="size-3.5" />确认素材，开始规划大纲
         </Button>
+        {!isSkillResult && (
+          <Button
+            type="button" variant="outline" size="sm"
+            className="h-8 text-xs gap-1.5 shrink-0 border-violet-200 text-violet-700 hover:bg-violet-50 dark:border-violet-800 dark:text-violet-300 dark:hover:bg-violet-950/30"
+            onClick={handleEnableSkillSearch} disabled={disabled || submitting}
+          >
+            <Sparkles className="size-3.5" />技能检索
+          </Button>
+        )}
         <Button
           type="button" variant="outline" size="sm" className="h-8 text-xs gap-1.5 shrink-0"
           onClick={handleReSearch} disabled={disabled || submitting}
         >
-          {hasExtra
-            ? <><Search className="size-3.5" />追加搜索</>
+          {hasQuery
+            ? <><Search className="size-3.5" />按输入重新搜索</>
             : <><RotateCcw className="size-3.5" />重新搜索</>}
         </Button>
       </div>
diff --git a/frontend-web/src/open-canvas/components/ai-writing/MaterialItem.tsx b/frontend-web/src/open-canvas/components/ai-writing/MaterialItem.tsx
index 539d90ff..b8a6cace 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/MaterialItem.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/MaterialItem.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ChevronRight, ExternalLink } from 'lucide-react';
+import { ChevronRight, ExternalLink, Sparkles } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { buildIntranetSourceUrl } from '@/core/config';
 import type { AIMaterial } from '../../types/ai-writing';
@@ -26,12 +26,14 @@ function relevanceLabel(score: number): string {
 export function MaterialItem({ material, checked, onToggle }: MaterialItemProps) {
   const [expanded, setExpanded] = useState(false);
   const pct = Math.round(material.relevanceScore * 100);
+  const isSkill = material.sourceType === 'skill';
 
   return (
     <div
       className={cn(
         'rounded-md border text-xs transition-colors',
         checked ? 'border-border bg-background' : 'border-border/50 bg-muted/30',
+        isSkill && checked && 'border-violet-300/70 dark:border-violet-800/60',
       )}
     >
       {/* 头部行 */}
@@ -50,6 +52,12 @@ export function MaterialItem({ material, checked, onToggle }: MaterialItemProps)
           onClick={() => setExpanded((v) => !v)}
           className="flex flex-1 items-start gap-1.5 text-left"
         >
+          {isSkill && (
+            <span className="mt-0.5 inline-flex items-center gap-0.5 px-1 py-0.5 rounded text-[10px] font-medium bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200 shrink-0">
+              <Sparkles className="size-2.5" />
+              技能
+            </span>
+          )}
           <span className={cn('flex-1 font-medium leading-snug line-clamp-2', !checked && 'text-muted-foreground')}>
             {material.title}
           </span>
diff --git a/frontend-web/src/open-canvas/components/ai-writing/MaterialsToolbar.tsx b/frontend-web/src/open-canvas/components/ai-writing/MaterialsToolbar.tsx
index aa38973e..1b149ed4 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/MaterialsToolbar.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/MaterialsToolbar.tsx
@@ -1,6 +1,4 @@
-import { useState } from 'react';
-import { Plus } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useRef } from 'react';
 import type { AIMaterial } from '../../types/ai-writing';
 
 interface MaterialsToolbarProps {
@@ -8,9 +6,13 @@ interface MaterialsToolbarProps {
   selectedIds: Set<string>;
   onSelectAll: () => void;
   onDeselectAll: () => void;
-  extraKeywords: string[];
-  onAddKeyword: (kw: string) => void;
-  onRemoveKeyword: (kw: string) => void;
+  /** 单输入框文本：可以是技能名、检索来源、补充检索意图 */
+  userQuery: string;
+  onUserQueryChange: (text: string) => void;
+  /** 回车键提交（默认重新搜索；详细按钮交给父组件渲染） */
+  onSubmitQuery?: () => void;
+  placeholder?: string;
+  disabled?: boolean;
 }
 
 export function MaterialsToolbar({
@@ -18,18 +20,27 @@ export function MaterialsToolbar({
   selectedIds,
   onSelectAll,
   onDeselectAll,
-  extraKeywords,
-  onAddKeyword,
-  onRemoveKeyword,
+  userQuery,
+  onUserQueryChange,
+  onSubmitQuery,
+  placeholder,
+  disabled,
 }: MaterialsToolbarProps) {
-  const [kwInput, setKwInput] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const allSelected = materials.length > 0 && selectedIds.size === materials.length;
 
-  function handleAddKeyword() {
-    const kw = kwInput.trim();
-    if (!kw || extraKeywords.includes(kw)) return;
-    onAddKeyword(kw);
-    setKwInput('');
+  function handleInput(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    onUserQueryChange(e.target.value);
+    const el = e.target;
+    el.style.height = 'auto';
+    el.style.height = `${Math.min(el.scrollHeight, 96)}px`;
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Enter' && !e.shiftKey && onSubmitQuery) {
+      e.preventDefault();
+      onSubmitQuery();
+    }
   }
 
   return (
@@ -51,50 +62,21 @@ export function MaterialsToolbar({
         </div>
       )}
 
-      {/* 补充关键词 */}
+      {/* 单输入框 */}
       <div className="space-y-1.5">
-        <label className="text-xs text-muted-foreground">补充搜索关键词（可选）</label>
-        <div className="flex gap-1.5">
-          <input
-            type="text"
-            value={kwInput}
-            onChange={(e) => setKwInput(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && handleAddKeyword()}
-            placeholder="输入关键词后按 Enter 或点击 +"
-            className="flex-1 h-7 rounded-md border border-input bg-background px-2.5 py-1 text-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          />
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="h-7 px-2"
-            onClick={handleAddKeyword}
-            disabled={!kwInput.trim()}
-          >
-            <Plus className="size-3" />
-          </Button>
-        </div>
-
-        {/* 已添加关键词 Tag 列表 */}
-        {extraKeywords.length > 0 && (
-          <div className="flex flex-wrap gap-1">
-            {extraKeywords.map((kw) => (
-              <span
-                key={kw}
-                className="inline-flex items-center gap-1 rounded-full bg-primary/10 text-primary px-2 py-0.5 text-xs"
-              >
-                {kw}
-                <button
-                  type="button"
-                  onClick={() => onRemoveKeyword(kw)}
-                  className="hover:text-destructive leading-none"
-                >
-                  ×
-                </button>
-              </span>
-            ))}
-          </div>
-        )}
+        <label className="text-xs text-muted-foreground">
+          补充检索（可选）— 写下你想检索的内容，然后点"重新搜索"或"技能检索"
+        </label>
+        <textarea
+          ref={textareaRef}
+          rows={1}
+          value={userQuery}
+          onChange={handleInput}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder ?? '例如：想查看各大平台销量 / 2025 年财报 / 行业头部公司近期动态…'}
+          disabled={disabled}
+          className="w-full resize-none rounded-md border border-input bg-background px-2.5 py-1.5 text-xs leading-5 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 min-h-[28px] max-h-24"
+        />
       </div>
     </div>
   );
diff --git a/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
new file mode 100644
index 00000000..9e0b9f86
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { ChevronRight, Sparkles, ListChecks, Zap, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { SkillSearchStep } from '../../types/ai-writing';
+import { CollapseTransition } from './CollapseTransition';
+
+interface SkillStepsCardProps {
+  steps: SkillSearchStep[];
+  /** 是否仍在进行中（researching 状态下显示 spinner，让用户看到流式进展） */
+  inProgress?: boolean;
+}
+
+const STEP_ICON: Record<SkillSearchStep['type'], typeof Sparkles> = {
+  list_skills: ListChecks,
+  select_skills: Sparkles,
+  invoke_skill: Zap,
+};
+
+const STEP_LABEL: Record<SkillSearchStep['type'], string> = {
+  list_skills: '列出可用技能',
+  select_skills: '筛选相关技能',
+  invoke_skill: '调用技能',
+};
+
+export function SkillStepsCard({ steps, inProgress }: SkillStepsCardProps) {
+  const [expanded, setExpanded] = useState(true);
+  if (steps.length === 0 && !inProgress) return null;
+
+  return (
+    <div className="rounded-md border border-violet-200 bg-violet-50/40 dark:border-violet-900/40 dark:bg-violet-950/20 overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className="w-full flex items-center gap-2 px-3 py-2 text-xs font-medium hover:bg-violet-100/50 dark:hover:bg-violet-900/30 transition-colors text-left"
+      >
+        {inProgress
+          ? <Loader2 className="size-3.5 text-violet-500 shrink-0 animate-spin" />
+          : <Sparkles className="size-3.5 text-violet-500 shrink-0" />}
+        <span className="flex-1">
+          技能检索过程
+          <span className="ml-1 text-muted-foreground font-normal">
+            （共 {steps.length} 步{inProgress ? '，进行中…' : ''}）
+          </span>
+        </span>
+        <ChevronRight
+          className={cn(
+            'size-3 text-muted-foreground transition-transform duration-200',
+            expanded && 'rotate-90',
+          )}
+        />
+      </button>
+
+      <CollapseTransition open={expanded}>
+        <ol className="px-3 pb-2.5 pt-1 space-y-1.5 border-t border-violet-200/60 dark:border-violet-900/30">
+          {steps.map((step, idx) => {
+            const Icon = STEP_ICON[step.type] ?? Sparkles;
+            const label = STEP_LABEL[step.type] ?? step.type;
+            return (
+              <li key={idx} className="flex items-start gap-2 text-[11px]">
+                <span className="shrink-0 mt-0.5 inline-flex items-center justify-center size-4 rounded-full text-[10px] font-medium bg-violet-100 dark:bg-violet-900/60 text-violet-600 dark:text-violet-300">
+                  {idx + 1}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-1 font-medium text-violet-700 dark:text-violet-300">
+                    <Icon className="size-3 shrink-0" />
+                    <span>{label}</span>
+                    {step.skillName && (
+                      <span className="font-mono text-violet-900 dark:text-violet-100">
+                        · {step.skillName}
+                      </span>
+                    )}
+                  </div>
+                  <div className="text-muted-foreground mt-0.5">{step.message}</div>
+                  {step.skillNames && step.skillNames.length > 0 && (
+                    <div className="mt-1 flex flex-wrap gap-1">
+                      {step.skillNames.map((name) => (
+                        <span
+                          key={name}
+                          className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-mono bg-violet-100 dark:bg-violet-900/60 text-violet-700 dark:text-violet-200"
+                        >
+                          {name}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                  {step.reason && (
+                    <div className="mt-0.5 text-[10px] text-violet-600/80 dark:text-violet-400/80 italic">
+                      原因：{step.reason}
+                    </div>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+          {inProgress && (
+            <li className="flex items-center gap-2 text-[11px] text-muted-foreground italic">
+              <Loader2 className="size-3 animate-spin" />
+              更多步骤生成中…
+            </li>
+          )}
+        </ol>
+      </CollapseTransition>
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts b/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts
index 1b21eb16..58a04a53 100644
--- a/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts
+++ b/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts
@@ -41,6 +41,7 @@ import type {
   ProgressEventType,
   ReviewIssue,
   ReviewResult,
+  SkillSearchStep,
   StreamingReviewItem,
   UserInterventionPayload,
   WritingStatus,
@@ -71,6 +72,7 @@ const INITIAL_STATE: AIWritingState = {
   intentThinkingText: '',
   parsedIntent: null,
   researchProgress: '',
+  skillSearchSteps: [],
   streamingReviewItems: [],
   revisionSummary: null,
   pendingRevisionContext: null,
@@ -105,7 +107,7 @@ function reducer(prev: AIWritingState, action: Action): AIWritingState {
         ...prev,
         currentPause: null,
         status: ns,
-        ...(ns === 'researching' ? { researchProgress: '' } : {}),
+        ...(ns === 'researching' ? { researchProgress: '', skillSearchSteps: [] } : {}),
         ...(ns === 'writing_outline' ? { outlineStreamingText: '', outlineThinkingText: '' } : {}),
         ...(ns === 'writing_draft' ? { streamingDraftSections: [], streamingDraftTitle: '' } : {}),
         ...(ns === 'reviewing' ? { streamingReviewItems: [] } : {}),
@@ -191,12 +193,22 @@ function handleEvent(prev: AIWritingState, event: ProgressEvent): AIWritingState
     case 'resumed':
       return { ...base, currentPause: null };
 
-    case 'materials_ready':
+    case 'skill_search_step': {
+      const step = event.skillStep;
+      if (!step) return base;
+      return { ...base, skillSearchSteps: [...prev.skillSearchSteps, step] };
+    }
+
+    case 'materials_ready': {
+      // 后端把 pkg.skill_search_steps 一并塞回来时，覆盖前端累积（保证刷新页面回放也对）
+      const incomingSteps = (event as unknown as { skillSearchSteps?: SkillSearchStep[] }).skillSearchSteps;
       return {
         ...base,
         materials: (event.materials ?? []) as AIMaterial[],
         researchProgress: '',
+        ...(incomingSteps ? { skillSearchSteps: incomingSteps } : {}),
       };
+    }
 
     case 'outline_chunk': {
       const text = (event as unknown as { text: string }).text ?? '';
@@ -337,6 +349,7 @@ function handleEvent(prev: AIWritingState, event: ProgressEvent): AIWritingState
 // ── snake_case ↔ camelCase 归一化（custom 通道事件 + interrupt payload） ──────
 
 function normalizeMaterial(m: Record<string, unknown>): AIMaterial {
+  const extra = (m.extra_metadata ?? m.extraMetadata) as Record<string, unknown> | undefined;
   return {
     id: String(m.id ?? ''),
     title: String(m.title ?? ''),
@@ -344,9 +357,21 @@ function normalizeMaterial(m: Record<string, unknown>): AIMaterial {
     source: String(m.source ?? ''),
     publishedAt: String(m.published_at ?? m.publishedAt ?? ''),
     relevanceScore: Number(m.relevance_score ?? m.relevanceScore ?? 0),
-    sourceType: (m.source_type ?? m.sourceType ?? 'internet') as 'internet' | 'intranet',
+    sourceType: (m.source_type ?? m.sourceType ?? 'internet') as AIMaterial['sourceType'],
     url: m.url as string | undefined,
     recUuid: (m.recUuid ?? m.rec_uuid) as string | undefined,
+    extraMetadata: extra,
+  };
+}
+
+function normalizeSkillStep(s: Record<string, unknown>): SkillSearchStep {
+  return {
+    type: (s.type as SkillSearchStep['type']) ?? 'invoke_skill',
+    message: String(s.message ?? ''),
+    skillNames: (s.skill_names ?? s.skillNames) as string[] | undefined,
+    skillName: (s.skill_name ?? s.skillName) as string | undefined,
+    reason: s.reason as string | undefined,
+    matchedCount: (s.matched_count ?? s.matchedCount) as number | undefined,
   };
 }
 
@@ -445,6 +470,7 @@ function customToProgressEvent(raw: unknown, sessionId: string): ProgressEvent |
     'intent_chunk', 'intent_ready',
     'research_progress', 'outline_chunk', 'draft_chunk',
     'review_chunk', 'review_item_done',
+    'skill_search_step',
   ];
   if (!allowed.includes(type as ProgressEventType)) return null;
 
@@ -459,6 +485,10 @@ function customToProgressEvent(raw: unknown, sessionId: string): ProgressEvent |
   if (Array.isArray(merged.issues)) {
     merged.reviewItemIssues = (merged.issues as Record<string, unknown>[]).map(normalizeReviewIssue);
   }
+  // skill_search_step：把字段折成 skillStep 子对象，方便 reducer / UI 取用
+  if (type === 'skill_search_step') {
+    merged.skillStep = normalizeSkillStep(o);
+  }
   return merged as unknown as ProgressEvent;
 }
 
@@ -478,6 +508,9 @@ function nodeUpdatesToEvents(nodeOutput: unknown, sessionId: string): ProgressEv
   // ``material_package`` 出现 → materials_ready（节点 progress_events 里不带）
   if (out.material_package && typeof out.material_package === 'object') {
     const pkg = out.material_package as Record<string, unknown>;
+    const skillSteps = Array.isArray(pkg.skill_search_steps ?? pkg.skillSearchSteps)
+      ? ((pkg.skill_search_steps ?? pkg.skillSearchSteps) as Record<string, unknown>[]).map(normalizeSkillStep)
+      : undefined;
     events.push({
       type: 'materials_ready',
       sessionId,
@@ -485,7 +518,8 @@ function nodeUpdatesToEvents(nodeOutput: unknown, sessionId: string): ProgressEv
       materials: Array.isArray(pkg.materials) ? (pkg.materials as Record<string, unknown>[]).map(normalizeMaterial) : [],
       keywords: (pkg.keywords ?? []) as string[],
       materialSummary: (pkg.summary as string) ?? '',
-    });
+      ...(skillSteps ? { skillSearchSteps: skillSteps } as unknown as Partial<ProgressEvent> : {}),
+    } as ProgressEvent);
   }
 
   // ``current_outline`` 出现且 progress_events 里没 outline_ready → 合成一条
diff --git a/frontend-web/src/open-canvas/types/ai-writing.ts b/frontend-web/src/open-canvas/types/ai-writing.ts
index e73e703c..28a4a567 100644
--- a/frontend-web/src/open-canvas/types/ai-writing.ts
+++ b/frontend-web/src/open-canvas/types/ai-writing.ts
@@ -7,9 +7,24 @@ export interface AIMaterial {
   source: string;
   publishedAt: string;
   relevanceScore: number;
-  sourceType: 'internet' | 'intranet';
+  sourceType: 'internet' | 'intranet' | 'skill';
   url?: string;
   recUuid?: string;
+  // skill 类素材的元信息（skill_name / container_path / category / skill_full_content 等）
+  extraMetadata?: Record<string, unknown>;
+}
+
+// 技能检索过程的单步记录（前端时间线展示"使用了 X 技能"）
+//   list_skills：列出全部 enabled 技能
+//   select_skills：LLM 按相关度排序的候选
+//   invoke_skill：实际按顺序调用某个技能
+export interface SkillSearchStep {
+  type: 'list_skills' | 'select_skills' | 'invoke_skill';
+  message: string;
+  skillNames?: string[];
+  skillName?: string;
+  reason?: string;
+  matchedCount?: number;
 }
 
 // ── 大纲 ─────────────────────────────────────────────────────────────────────
@@ -139,6 +154,7 @@ export type ProgressEventType =
   | 'await_user'
   | 'resumed'
   | 'notice'
+  | 'skill_search_step'
   | 'done'
   | 'error';
 
@@ -173,6 +189,8 @@ export interface ProgressEvent {
   pauseContext?: Record<string, unknown>;
   // section_help：素材不足、待用户决策的章节
   blockedSections?: BlockedSection[];
+  // skill_search_step：技能检索步骤事件（list_skills / select_skills / invoke_skill）
+  skillStep?: SkillSearchStep;
 }
 
 // ── 用户干预提交体 ────────────────────────────────────────────────────────────
@@ -180,7 +198,10 @@ export interface ProgressEvent {
 export interface UserInterventionPayload {
   action: string;
   approvedMaterialIds?: string[];
+  /** @deprecated 旧版多关键词追加。新版统一用 userQuery 单输入框 */
   extraKeywords?: string[];
+  /** PAUSE-1 素材确认：用户单输入框写的自然语言（技能名/来源/检索意图都行）。re_search / enable_skill_search 共用。 */
+  userQuery?: string;
   editedOutline?: AIOutline;
   outlineFeedback?: string;
   userRevisionNotes?: string;
@@ -291,6 +312,8 @@ export interface AIWritingState {
   parsedIntent: ParsedIntent | null;
   // 素材收集实时进度（最新一条提示文案）
   researchProgress: string;
+  // 技能检索步骤（按发生顺序累积，pause_material 卡片里渲染时间线）
+  skillSearchSteps: SkillSearchStep[];
   // 流式审核（逐条到达）
   streamingReviewItems: StreamingReviewItem[];
   // 修改摘要
diff --git a/frontend-web/src/roundtable-planning/components/RecommendAgentsDialog.tsx b/frontend-web/src/roundtable-planning/components/RecommendAgentsDialog.tsx
index 415b48a2..9bb89f75 100644
--- a/frontend-web/src/roundtable-planning/components/RecommendAgentsDialog.tsx
+++ b/frontend-web/src/roundtable-planning/components/RecommendAgentsDialog.tsx
@@ -36,7 +36,9 @@ import {
   type RecommendCandidate,
   type RecommendStreamPhase,
 } from "../api/recommend";
+import { useAutoScroll } from "../hooks/useAutoScroll";
 import { splitInlineReasoning } from "../lib/reasoning";
+import { ScrollToBottomButton } from "./ScrollToBottomButton";
 
 /**
  * Picks-selection dialog that sits between Step 1 (intent) and Step 2
@@ -453,6 +455,7 @@ export function RecommendAgentsDialog({
             state.phase === "loading_agents" || state.phase === "recommending"
           }
           phase={state.phase}
+          scrollDeps={[state.rationale, state.steps, state.streamPhase]}
         >
           <RecommenderOutput state={state} />
         </CollapsibleModelOutput>
@@ -593,16 +596,22 @@ const MODEL_OUTPUT_AUTO_CLOSE_DELAY_MS = 1000;
 function CollapsibleModelOutput({
   isLoading,
   phase,
+  scrollDeps,
   children,
 }: {
   /** True 时面板保持展开 + header 显示 spinner;涵盖加载候选 + 流式生成。 */
   isLoading: boolean;
   phase: DialogPhase;
+  /** 内容变化时触发自动滚到底(与 Step1/Step2 对话区同一套 useAutoScroll)。 */
+  scrollDeps: React.DependencyList;
   children: React.ReactNode;
 }) {
   const [open, setOpen] = useState<boolean>(true);
   const userTouchedRef = useRef<boolean>(false);
   const hasAutoClosedRef = useRef<boolean>(false);
+  const modelOutputScrollRef = useRef<HTMLDivElement>(null);
+  const { atBottom: modelOutputAtBottom, scrollToBottom: scrollModelOutputToBottom } =
+    useAutoScroll(modelOutputScrollRef, scrollDeps);
 
   // 加载中 → 保持展开(用户没手动动过的前提下)。
   // 加载完成 → 延迟自动收起一次(仅一次),让出焦点给下方推荐卡片。
@@ -677,8 +686,16 @@ function CollapsibleModelOutput({
         />
       </button>
       {open && (
-        <div className="px-3 pb-3 min-h-0 flex-1 overflow-y-auto custom-scrollbar">
-          {children}
+        <div className="relative min-h-0 flex-1 flex flex-col">
+          <div
+            ref={modelOutputScrollRef}
+            className="px-3 pb-3 min-h-0 flex-1 overflow-y-auto custom-scrollbar"
+          >
+            {children}
+          </div>
+          {!modelOutputAtBottom && (
+            <ScrollToBottomButton onClick={scrollModelOutputToBottom} />
+          )}
         </div>
       )}
     </section>
@@ -751,7 +768,10 @@ function RecommenderOutput({ state }: { state: InternalState }) {
       {hasReasoning && (
         <ReasoningBlock
           streaming={isStreaming}
-          contentClassName="max-h-48 overflow-y-auto custom-scrollbar"
+          contentClassName={cn(
+            "overflow-y-auto custom-scrollbar",
+            isStreaming ? "max-h-none" : "max-h-48",
+          )}
         >
           {reasoning!}
         </ReasoningBlock>
@@ -762,7 +782,12 @@ function RecommenderOutput({ state }: { state: InternalState }) {
       )}
 
       {hasRationale && (
-        <div className="max-h-40 overflow-y-auto custom-scrollbar rounded-md border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-700 leading-relaxed">
+        <div
+          className={cn(
+            "overflow-y-auto custom-scrollbar rounded-md border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-700 leading-relaxed",
+            isStreaming ? "max-h-none" : "max-h-40",
+          )}
+        >
           <MarkdownContent>{cleanedRationale}</MarkdownContent>
           {isStreaming && <StreamingCursor />}
         </div>
diff --git a/offline-backend-20260512/backend/config.yaml b/offline-backend-20260512/backend/config.yaml
index 5bda2872..86bee47b 100644
--- a/offline-backend-20260512/backend/config.yaml
+++ b/offline-backend-20260512/backend/config.yaml
@@ -23,6 +23,19 @@ models:
     supports_vision: true
     supports_thinking: true
 
+  - name: deepseek-chat
+    display_name: DeepSeek Chat
+    use: langchain_openai:ChatOpenAI
+    model: deepseek-chat
+    api_key: sk-1520028668cb4cc388ed8315ff1e856e
+    base_url: https://api.deepseek.com
+    request_timeout: 600.0
+    max_retries: 2
+    max_tokens: 4096
+    temperature: 1.0
+    supports_vision: true
+    supports_thinking: true
+
   - name: deepseek-v4-flash
     display_name: DeepSeek V4 Flash
     use: langchain_openai:ChatOpenAI
@@ -86,6 +99,11 @@ tools:
     use: deerflow.community.ddg_search.tools:web_search_tool
     max_results: 5
 
+  - name: web_fetch
+    group: web
+    use: deerflow.community.jina_ai.tools:web_fetch_tool
+    timeout: 15
+
   - name: ls
     group: file:read
     use: deerflow.sandbox.tools:ls_tool
@@ -121,7 +139,7 @@ sandbox:
   allow_host_bash: true
 
 skills:
-  path: D:\cursor-work\offline-backend-20260512\backend\skills
+  path: skills
   security_scan:
     enabled: false
 
diff --git a/offline-backend-20260512/backend/extensions_config.json b/offline-backend-20260512/backend/extensions_config.json
new file mode 100644
index 00000000..b21e0a45
--- /dev/null
+++ b/offline-backend-20260512/backend/extensions_config.json
@@ -0,0 +1,11 @@
+{
+  "mcpServers": {},
+  "skills": {
+    "web-research": { "enabled": true },
+    "deep-search": { "enabled": true },
+    "code-retrieval": { "enabled": true },
+    "news-briefing": { "enabled": true },
+    "workspace-search": { "enabled": true },
+    "policy-knowledge": { "enabled": true }
+  }
+}
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/graph.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/graph.py
index 6cb08c14..b43035d1 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/graph.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/graph.py
@@ -55,6 +55,9 @@ async def pause_material_confirm(state: AIWritingState) -> dict:
 
     action = user_input.get("action", "confirm")
 
+    # 单输入框文本：可能是技能名 / 来源 / 检索意图，re_search 和 enable_skill_search 都用得到
+    user_query = (user_input.get("userQuery") or user_input.get("user_query") or "").strip()
+
     if action == "confirm":
         approved_ids = set(user_input.get("approvedMaterialIds") or [m["id"] for m in pkg["materials"]])
         filtered = [m for m in pkg["materials"] if m["id"] in approved_ids]
@@ -66,12 +69,22 @@ async def pause_material_confirm(state: AIWritingState) -> dict:
             "progress_events": [{"type": "resumed", "agent_name": "系统", "message": "用户已确认素材，开始规划大纲"}],
         }
 
-    # re_search：重新搜索
+    # enable_skill_search：用户选择"启用技能检索"，回到 researcher 走 skill 模式
+    if action == "enable_skill_search":
+        msg = f"已启用技能检索（输入：{user_query[:30]}）" if user_query else "已启用技能检索，正在筛选可用技能…"
+        return {
+            "last_user_intervention": {**user_input, "action": "enable_skill_search", "user_query": user_query},
+            "status": "researching",
+            "progress_events": [{"type": "resumed", "agent_name": "系统", "message": msg}],
+        }
+
+    # re_search：重新搜索（支持新版 user_query 单输入框 + 旧版 extraKeywords 数组）
     extra_kws = user_input.get("extraKeywords") or []
+    msg = f"按输入「{user_query[:30]}」重新搜索…" if user_query else "重新搜索中..."
     return {
-        "last_user_intervention": {**user_input, "_extra_keywords": extra_kws},
+        "last_user_intervention": {**user_input, "_extra_keywords": extra_kws, "user_query": user_query},
         "status": "researching",
-        "progress_events": [{"type": "resumed", "agent_name": "系统", "message": "重新搜索中..."}],
+        "progress_events": [{"type": "resumed", "agent_name": "系统", "message": msg}],
     }
 
 
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py
index 25488e18..a381755c 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py
@@ -9,7 +9,7 @@ from typing import List
 
 from langchain_core.runnables import RunnableConfig
 
-from ..search import get_search_provider, SearchResult
+from ..search import get_search_provider, SearchResult, SkillSearchProvider
 from ..state import AIWritingState, Material, MaterialPackage
 from ..prompts.researcher_prompts import (
     EXTRACT_KEYWORDS_SYSTEM, EXTRACT_KEYWORDS_USER,
@@ -96,15 +96,24 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
     # 检查干预模式（PAUSE-1 素材确认 / 素材不足求助）
     intervention = state.get("last_user_intervention") or {}
     extra_keywords: list[str] = intervention.get("_extra_keywords") or intervention.get("extra_keywords") or []
+    # PAUSE-1 单输入框：用户写的自然语言（技能名 / 来源 / 检索意图），优先级最高
+    user_query: str = (intervention.get("user_query") or "").strip()
     action = intervention.get("action")
 
     # 素材不足求助点触发的「补充检索」：保留原大纲，检索完直接回写作、不走素材确认/大纲
     is_supplement = action == "supplement_search"
-    # PAUSE-1 素材确认卡用户点「追加检索」并填了新关键词：
+    # PAUSE-1 素材确认卡用户点「按输入重新搜索」并填了 user_query：
     #   - 跳过 LLM 重新生成检索词（节省一次调用 + 尊重用户意图）
-    #   - 只检索 extra_keywords 这几个新词，不重检索之前 LLM 出过的词
+    #   - 直接用 user_query 作为唯一检索词
     #   - 保留 existing material_package，按 URL 去重合并
-    is_append_only = action == "re_search" and bool(extra_keywords)
+    is_user_query_search = action == "re_search" and bool(user_query)
+    # 兼容旧版"追加关键词"调用方（如果还有 client 传 extra_keywords 数组而非 user_query）
+    is_append_only = action == "re_search" and not user_query and bool(extra_keywords)
+    # PAUSE-1 素材确认卡用户点「启用技能检索」：
+    #   - 不再走 web/intranet 检索，改用 SkillSearchProvider
+    #   - 顺序调用候选技能 + 早停（第一个技能够就停，不够再加下一个）
+    #   - 旧 material_package 完全丢弃（覆盖式替换，让用户对比 web vs skill 结果）
+    is_skill_search = action == "enable_skill_search"
 
     # 用户指定的检索关键词数量（1~10），决定生成多少个检索词、检索多少个方向
     keyword_count = _resolve_keyword_count(state.get("keyword_count"))
@@ -126,10 +135,14 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
         writer({"type": "research_progress", "message": message})
 
     # Step 1: 提取关键词
-    kw_result: dict = {}  # 走追加分支时跳过 LLM 调用，但下方 notice 拼接需要兜底值
-    if is_append_only:
-        # 追加模式：直接用用户填的关键词，不再调 LLM
-        keywords: list[str] = _clean_keywords(extra_keywords, intent)
+    kw_result: dict = {}  # 走"用户输入 / 追加关键词"分支时跳过 LLM 调用，notice 拼接需要兜底值
+    if is_user_query_search:
+        # 用户输入分支：把整段自然语言作为唯一检索词，尊重原意，不再做关键词拆分
+        keywords: list[str] = [user_query]
+        _emit(f"按你的输入「{user_query[:30]}」检索…")
+    elif is_append_only:
+        # 兼容旧版追加模式：直接用用户填的关键词，不再调 LLM
+        keywords = _clean_keywords(extra_keywords, intent)
         _emit(f"追加检索 {len(keywords)} 个关键词…")
     else:
         _emit("正在生成检索词…")
@@ -150,13 +163,31 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
         if extra_keywords:
             keywords = list(dict.fromkeys(keywords + extra_keywords))
 
-    # Step 2: 并发搜索
-    provider = get_search_provider(ai_writing_config)
+    # Step 2: 搜索
+    # 技能检索：用 SkillSearchProvider 替代 web/intranet；步骤事件单独走 skill_search_step 通道
+    skill_steps: list[dict] = []
+
+    if is_skill_search:
+        def _emit_skill_step(step: dict) -> None:
+            skill_steps.append(step)
+            writer({"type": "skill_search_step", "agent_name": "素材收集专家", **step})
+
+        async def _llm_select(system: str, user_prompt: str, fallback: dict) -> dict:
+            return await llm_json(system, user_prompt, fallback=fallback, config=config, model_name=keyword_model)
+
+        provider = SkillSearchProvider(
+            llm_select=_llm_select,
+            emit_step=_emit_skill_step,
+            max_select=max(1, min(int(max_materials), 10)),
+            user_query=user_query,
+        )
+    else:
+        provider = get_search_provider(ai_writing_config)
 
     # 按用户指定的关键词数量截断。
-    # 追加模式：keywords 本身就是用户填的，全部检索不截断（用户填 N 个就搜 N 个）。
+    # 用户输入 / 追加模式：keywords 本身就是用户填的，全部检索不截断。
     # 其他模式：受 keyword_count 限制，但 extra_keywords 在内时上限放宽到 keywords 总数。
-    if is_append_only:
+    if is_user_query_search or is_append_only:
         search_keywords = keywords
     else:
         search_limit = keyword_count
@@ -168,31 +199,48 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
     per_keyword = _per_keyword_limit(max_materials, total)
     _emit(f"检索词已生成，开始检索 {total} 个方向…")
 
-    # 并发搜索，但每完成一个就推送进度（计数在单线程 asyncio 下无需加锁）
-    completed = 0
+    # 技能模式：串行调用 provider（早停语义靠 provider 内部累积计数）
+    # 其它模式：并发调用，每完成一个就推送进度
+    if is_skill_search:
+        all_results_nested: list[list[SearchResult]] = []
+        for kw in search_keywords:
+            try:
+                res = await provider.search(kw, max_results=per_keyword, user_intent=intent)
+            except Exception as e:
+                logger.warning("skill search failed: %s", e)
+                all_results_nested.append(e)  # type: ignore[arg-type]
+                continue
+            all_results_nested.append(res)
+            # provider 内部 early_stop_at 已触发时不会再返回新 skill，提前 break 避免空轮询
+            if not res:
+                break
+    else:
+        completed = 0
 
-    async def _search_one(kw: str) -> list[SearchResult]:
-        nonlocal completed
-        try:
-            return await provider.search(kw, max_results=per_keyword)
-        finally:
-            completed += 1
-            if completed < total:
-                _emit(f"已完成 {completed}/{total} 次检索，正在继续检索相关内容…")
-            else:
-                _emit(f"已完成全部 {total} 次检索")
+        async def _search_one(kw: str) -> list[SearchResult]:
+            nonlocal completed
+            try:
+                return await provider.search(kw, max_results=per_keyword)
+            finally:
+                completed += 1
+                if completed < total:
+                    _emit(f"已完成 {completed}/{total} 次检索，正在继续检索相关内容…")
+                else:
+                    _emit(f"已完成全部 {total} 次检索")
 
-    search_tasks = [_search_one(kw) for kw in search_keywords]
-    all_results_nested: list[list[SearchResult]] = await asyncio.gather(*search_tasks, return_exceptions=True)
+        search_tasks = [_search_one(kw) for kw in search_keywords]
+        all_results_nested = await asyncio.gather(*search_tasks, return_exceptions=True)
 
     # 合并去重
     # - 首次检索 / 普通 re_search（不带 extra_keywords，用户只想 LLM 重出）：旧素材丢弃
     # - 素材不足求助 supplement_search：保留旧素材 + 追加新检索结果
     # - PAUSE-1 追加检索 is_append_only：保留旧素材 + 仅检索新关键词
+    # - 技能检索 is_skill_search：覆盖式替换，旧素材完全丢弃（用户期望对比 web vs skill 结果）
     seen_urls: set[str] = set()
+    seen_skill_ids: set[str] = set()  # skill 素材无 URL，按 skill_name 去重
     raw_materials: list[Material] = []
     existing_pkg = state.get("material_package")
-    preserve_existing = existing_pkg and (is_supplement or is_append_only)
+    preserve_existing = existing_pkg and (is_supplement or is_append_only) and not is_skill_search
     if preserve_existing:
         for m in existing_pkg.get("materials", []):
             seen_urls.add(m.get("url", ""))
@@ -205,10 +253,19 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
             search_errors.append(f"{type(results).__name__}: {results}")
             continue
         for r in results:
-            if r.url and r.url in seen_urls:
+            # skill 素材按 skill_name 去重（同一个 skill 被多个关键词命中只保留一次）
+            if r.source_type == "skill":
+                meta = getattr(r, "extra_metadata", {}) or {}
+                sk_name = meta.get("skill_name", "")
+                if sk_name and sk_name in seen_skill_ids:
+                    continue
+                if sk_name:
+                    seen_skill_ids.add(sk_name)
+            elif r.url and r.url in seen_urls:
                 continue
-            seen_urls.add(r.url)
-            raw_materials.append(Material(
+            else:
+                seen_urls.add(r.url)
+            mat: Material = Material(
                 id=f"m{len(raw_materials)+1:03d}",
                 title=r.title,
                 content=r.content[:500],
@@ -218,7 +275,11 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
                 source_type=r.source_type,
                 url=r.url,
                 recUuid=r.recUuid,
-            ))
+            )
+            extra = getattr(r, "extra_metadata", None)
+            if extra:
+                mat["extra_metadata"] = extra
+            raw_materials.append(mat)
 
     # provider 内部吞掉的检索异常（如内网 ES 连接失败），一并取出用于提示用户
     search_errors.extend(getattr(provider, "errors", []))
@@ -264,6 +325,14 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
         old_kws = list(existing_pkg.get("keywords") or [])
         pkg_keywords = list(dict.fromkeys(old_kws + keywords))
     pkg = MaterialPackage(keywords=pkg_keywords, materials=materials, summary=summary)
+    # 技能检索时把过程步骤一并放进 pkg，前端在素材确认卡里能展示"使用了哪些技能"
+    if is_skill_search:
+        pkg["skill_search_used"] = True
+        pkg["skill_search_steps"] = skill_steps
+    elif existing_pkg and existing_pkg.get("skill_search_used") and (is_supplement or is_append_only):
+        # 保留之前一次技能检索的痕迹（不污染纯 web 检索）
+        pkg["skill_search_used"] = existing_pkg.get("skill_search_used", False)
+        pkg["skill_search_steps"] = existing_pkg.get("skill_search_steps", [])
 
     # 容错告警：检索接口 / 模型调用出错时以非致命 notice 提示用户，不打断写作流程
     notices: list[dict] = []
@@ -281,12 +350,15 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
             raw="\n\n----------\n\n".join(raw_dumps[:3]),
         ))
 
-    # 进度事件文案：追加模式下让用户看到只搜了哪几个新词
-    step_start_msg = (
-        f"追加检索关键词：{', '.join(keywords[:3])}"
-        if is_append_only
-        else f"搜索关键词：{', '.join(keywords[:3])}"
-    )
+    # 进度事件文案：用户输入 / 追加模式 / 技能模式下让用户看到差异化提示
+    if is_skill_search:
+        step_start_msg = f"启用技能检索（{len(skill_steps)} 步）"
+    elif is_user_query_search:
+        step_start_msg = f"按你的输入检索：{user_query[:40]}"
+    elif is_append_only:
+        step_start_msg = f"追加检索关键词：{', '.join(keywords[:3])}"
+    else:
+        step_start_msg = f"搜索关键词：{', '.join(keywords[:3])}"
     return {
         "material_package": pkg,
         # 补充检索：直接回写作（沿用原大纲）；常规检索：进入素材确认暂停点
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/__init__.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/__init__.py
index 61402670..89e0b408 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/__init__.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/__init__.py
@@ -3,6 +3,7 @@ from .internet_search import InternetSearchProvider
 from .intranet_stub import IntranetSearchProvider
 from .demo_search import DemoSearchProvider
 from .duckduckgo_search import DuckDuckGoSearchProvider
+from .skill_search import SkillSearchProvider
 
 
 def get_search_provider(ai_writing_config: dict) -> BaseSearchProvider:
@@ -60,5 +61,6 @@ __all__ = [
     "BaseSearchProvider", "SearchResult",
     "InternetSearchProvider", "IntranetSearchProvider",
     "DemoSearchProvider", "DuckDuckGoSearchProvider",
+    "SkillSearchProvider",
     "get_search_provider",
 ]
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py
new file mode 100644
index 00000000..2a08a773
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py
@@ -0,0 +1,248 @@
+"""技能检索 Provider：把已启用的 Skill 当作可检索的素材源。
+
+流程（保持简单，对应素材确认卡上的"技能检索"按钮）：
+1) list_skills 事件 —— 列出当前启用的全部 skill
+2) select_skills 事件 —— LLM 根据用户输入 + 写作意图按相关度选出若干个
+3) invoke_skill 事件 —— 按相关度从高到低顺序产出 SearchResult
+
+输出格式严格对齐 BaseSearchProvider 的 SearchResult，让 researcher 节点
+不需要分支处理，下游 Material 字段同构。
+"""
+from __future__ import annotations
+
+import logging
+import re
+from typing import Callable, List, Optional
+
+from .base import BaseSearchProvider, SearchResult
+
+logger = logging.getLogger(__name__)
+
+
+_SELECT_SKILLS_SYSTEM = """你是一名情报研究员，需要从可用「技能」中挑出对写作任务有帮助的若干个，并按相关度从高到低排序。
+技能是一段封装好的指令 / 知识 / 工作流，每个技能有 name 和 description。
+
+【严禁思考】
+- 这是一个简单的匹配任务，禁止任何思考、分析、推理过程，禁止输出 <think></think> 标签。
+- 收到输入后立即直接输出最终 JSON，不得有任何前置文字。
+
+【输出要求】
+- 只输出一个 JSON 对象，不要 markdown 代码块。
+- 必须使用英文双引号。
+- selected_skills 中的 name 必须严格来自下方"可用技能"列表，不要编造，按相关度从高到低排序。
+- 如果用户输入里明确点名了某个技能（按 name 完全匹配），把它排在第一位。
+
+【完整示例】
+{"selected_skills": ["web-search", "knowledge-lookup"], "reason": "用户想检索互联网信息，web-search 最相关，知识库查询作为补充"}"""
+
+_SELECT_SKILLS_USER = """写作意图：{user_intent}
+用户补充输入：{user_query}
+检索关键词：{keywords}
+
+可用技能（共 {skill_count} 个）：
+{skill_list}
+
+请从中按相关度从高到低选出最多 {max_select} 个技能。如果没有合适的技能，selected_skills 返回空数组。
+只输出 JSON：
+{{"selected_skills": ["name1", "name2"], "reason": "为什么选这些 + 排序依据"}}
+
+/no_think"""
+
+
+EmitStepFn = Callable[[dict], None]
+
+
+def _summarize_skill_content(content: str, limit: int = 500) -> str:
+    """从 SKILL.md 提取摘要：跳过 frontmatter，取正文开头 limit 字。"""
+    if not content:
+        return ""
+    body = content
+    m = re.match(r"^---\s*\n(.*?\n)---\s*\n(.*)$", content, flags=re.DOTALL)
+    if m:
+        body = m.group(2)
+    body = re.sub(r"^#\s+.*?\n", "", body.lstrip(), count=1)
+    body = body.strip()
+    if len(body) > limit:
+        return body[:limit].rstrip() + "…"
+    return body
+
+
+class SkillSearchProvider(BaseSearchProvider):
+    """从启用的 Skills 中筛选并返回作为素材。
+
+    构造参数：
+      llm_select: 异步 LLM 调用 (system, user, fallback) -> dict。
+      emit_step:  可选；推送时间线步骤事件（list_skills / select_skills / invoke_skill）。
+      max_select: LLM 单次最多挑几个技能。
+      user_query: 用户在素材确认卡输入框写的自然语言（可能包含技能名 / 来源 / 补充意图）。
+    """
+
+    def __init__(
+        self,
+        llm_select: Callable,
+        *,
+        emit_step: Optional[EmitStepFn] = None,
+        max_select: int = 5,
+        user_query: str = "",
+    ) -> None:
+        self._llm_select = llm_select
+        self._emit_step = emit_step or (lambda _step: None)
+        self._max_select = max_select
+        self._user_query = (user_query or "").strip()
+        self._errors: list[str] = []
+        # 单次 researcher 调用内复用结果，避免每个 keyword 都问一次 LLM
+        self._selected_cache: list[dict] | None = None
+        self._enabled_skills: list | None = None
+        # 跨 keyword 调用时同一个 skill 只暴露一次
+        self._yielded_skills: set[str] = set()
+
+    @property
+    def errors(self) -> list[str]:
+        return list(self._errors)
+
+    def _load_enabled_skills(self) -> list:
+        if self._enabled_skills is not None:
+            return self._enabled_skills
+        try:
+            from deerflow.skills import get_or_new_skill_storage
+            storage = get_or_new_skill_storage()
+            skills = storage.load_skills(enabled_only=True)
+        except Exception as e:
+            logger.exception("ai_writing.skill_search: 加载启用技能失败")
+            self._errors.append(f"skill list error: {e}")
+            skills = []
+        self._enabled_skills = skills
+        self._emit_step({
+            "type": "list_skills",
+            "message": f"发现 {len(skills)} 个可用技能",
+            "skill_names": [s.name for s in skills],
+        })
+        return skills
+
+    async def _select_skills(self, query: str, user_intent: str) -> list[dict]:
+        """让 LLM 从启用的技能中按相关度排序选出若干个。同一次检索复用结果。"""
+        if self._selected_cache is not None:
+            return self._selected_cache
+
+        skills = self._load_enabled_skills()
+        if not skills:
+            self._selected_cache = []
+            return []
+
+        skill_list_text = "\n".join(
+            f"- {s.name}: {s.description or '(无描述)'}" for s in skills
+        )
+        try:
+            result = await self._llm_select(
+                _SELECT_SKILLS_SYSTEM,
+                _SELECT_SKILLS_USER.format(
+                    user_intent=user_intent or query,
+                    user_query=self._user_query or "(无)",
+                    keywords=query,
+                    skill_count=len(skills),
+                    skill_list=skill_list_text,
+                    max_select=self._max_select,
+                ),
+                fallback={"selected_skills": [s.name for s in skills[: self._max_select]]},
+            )
+        except Exception as e:
+            logger.exception("ai_writing.skill_search: LLM 选择技能失败")
+            self._errors.append(f"skill select error: {e}")
+            result = {"selected_skills": [s.name for s in skills[: self._max_select]]}
+
+        wanted_names = result.get("selected_skills") or []
+        if not isinstance(wanted_names, list):
+            wanted_names = []
+        by_name = {s.name: s for s in skills}
+        chosen: list[dict] = []
+        for name in wanted_names:
+            if not isinstance(name, str):
+                continue
+            sk = by_name.get(name.strip())
+            if sk:
+                chosen.append({"skill": sk, "reason": result.get("reason", "")})
+            if len(chosen) >= self._max_select:
+                break
+
+        self._emit_step({
+            "type": "select_skills",
+            "message": f"按相关度排序，候选 {len(chosen)} 个技能（将按顺序调用）",
+            "skill_names": [c["skill"].name for c in chosen],
+            "reason": result.get("reason", ""),
+        })
+        self._selected_cache = chosen
+        return chosen
+
+    @staticmethod
+    def _read_skill_content(skill) -> str:
+        try:
+            return skill.skill_file.read_text(encoding="utf-8")
+        except Exception as e:
+            logger.warning("ai_writing.skill_search: 读 SKILL.md 失败 %s: %s", skill.name, e)
+            return skill.description or ""
+
+    def _to_search_result(self, skill, reason: str) -> SearchResult:
+        raw = self._read_skill_content(skill)
+        summary = _summarize_skill_content(raw, limit=500)
+        category_value = skill.category.value if hasattr(skill.category, "value") else str(skill.category)
+        return SearchResult(
+            title=skill.name,
+            content=summary or (skill.description or skill.name),
+            source=f"技能库 / {category_value}",
+            published_at="",
+            url="",
+            relevance_score=1.0,
+            source_type="skill",
+            recUuid="",
+            extra_metadata={
+                "skill_name": skill.name,
+                "skill_description": skill.description or "",
+                "skill_path": skill.skill_path,
+                "container_path": skill.get_container_file_path(),
+                "category": category_value,
+                "select_reason": reason,
+                # 完整 SKILL.md 内容，供 writer_draft 节点按需注入到 prompt
+                "skill_full_content": raw,
+            },
+        )
+
+    async def search(
+        self,
+        query: str,
+        max_results: int = 5,
+        date_from: str = "",
+        date_to: str = "",
+        user_intent: str = "",
+    ) -> List[SearchResult]:
+        """按相关度顺序产出候选 skills 对应的 SearchResult。
+
+        说明：每个 skill 直接产出一条 SearchResult。researcher 节点上游会按
+        skill_name 去重，所以同一个 SkillSearchProvider 多次调用本方法时不会
+        产出重复 skill 素材（_yielded_skills 兜底）。
+        """
+        chosen = await self._select_skills(query, user_intent=user_intent)
+        if not chosen:
+            return []
+
+        results: List[SearchResult] = []
+        for entry in chosen:
+            sk = entry["skill"]
+            if sk.name in self._yielded_skills:
+                continue
+            self._emit_step({
+                "type": "invoke_skill",
+                "message": f"调用技能：{sk.name}",
+                "skill_name": sk.name,
+                "matched_count": len(self._yielded_skills) + 1,
+            })
+            results.append(self._to_search_result(sk, entry.get("reason", "")))
+            self._yielded_skills.add(sk.name)
+            if len(results) >= max_results:
+                break
+        return results
+
+    async def health_check(self) -> bool:
+        try:
+            return bool(self._load_enabled_skills())
+        except Exception:
+            return False
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/state.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/state.py
index a64c3321..2420ef50 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/state.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/state.py
@@ -3,21 +3,43 @@ import operator
 
 # ── 素材 ──────────────────────────────────────────────────────────────────────
 
-class Material(TypedDict):
+class Material(TypedDict, total=False):
     id: str
     title: str
     content: str           # 截断到 500 字
     source: str
     published_at: str
     relevance_score: float
-    source_type: str       # "internet" | "intranet"
+    source_type: str       # "internet" | "intranet" | "skill"
     url: str
     recUuid: str
+    # skill 类素材附带的元信息（skill_name / container_path / category），其他类型为空
+    extra_metadata: dict
 
-class MaterialPackage(TypedDict):
+class SkillStep(TypedDict, total=False):
+    """技能检索过程的单步记录，用于前端时间线展示。
+
+    type=match_skills：根据用户输入流式分析有没有匹配技能（无 skill_names）
+    type=list_skills：列出可用技能
+    type=select_skills：LLM 从中选出的相关技能
+    type=invoke_skill：实际调用某一个技能检索
+    type=stop_early：达到素材阈值，提前停止后续技能调用
+    """
+    type: str
+    message: str
+    skill_names: List[str]
+    skill_name: str
+    matched_count: int
+    reason: str
+
+class MaterialPackage(TypedDict, total=False):
     keywords: List[str]
     materials: List[Material]
     summary: str
+    # 是否本次素材来自技能检索（覆盖式替换 web 检索）
+    skill_search_used: bool
+    # 技能检索的步骤记录（前端展示"使用了 X 技能"卡片）
+    skill_search_steps: List[SkillStep]
 
 # ── 大纲 ──────────────────────────────────────────────────────────────────────
 # 三级结构:章节(##) → 小节(###) → 子要点(bullet -)。
@@ -72,10 +94,13 @@ class ReviewResult(TypedDict):
 
 # ── 用户干预 ──────────────────────────────────────────────────────────────────
 
-class UserInterventionPayload(TypedDict):
+class UserInterventionPayload(TypedDict, total=False):
     action: str
     approved_material_ids: List[str]
     extra_keywords: List[str]
+    # PAUSE-1 素材确认 / enable_skill_search 共用：用户在单输入框里填的自然语言
+    # （可能是要使用的技能名、想检索的来源、或者一段补充检索意图）。
+    user_query: str
     edited_outline: Optional[Outline]
     outline_feedback: str
     user_revision_notes: str

From 2c136c1fde017efc48cf1b0e07304e83ce40e27d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=89=E9=91=AB=E5=8D=87?= <xsji@kland.com.cn>
Date: Fri, 29 May 2026 11:31:31 +0800
Subject: [PATCH 3/9] =?UTF-8?q?=E5=8F=82=E8=80=83=E6=96=87=E7=8C=AE?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=90=88=E5=B9=B6=E4=B8=BA=E5=8D=95=E4=B8=80?=
 =?UTF-8?q?=20referenceBatch=20=E5=B9=B6=E7=BB=9F=E4=B8=80=E8=BF=9E?=
 =?UTF-8?q?=E7=BB=AD=E7=BC=96=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将同一轮检索结果合并为一个 referenceBatch，由系统统一从 [1] 连续编号，避免每个检索词各自重新编号；提示词引导优先并行检索后再作答。智能体列表接口并发加载技能等轻量信息以渲染卡片徽章，并新增参考文献相关测试。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../backend/app/gateway/routers/agents.py     | 21 ++--
 .../backend/app/gateway/services.py           |  3 +-
 .../deerflow/agents/lead_agent/prompt.py      | 34 +++----
 .../middlewares/rag_citation_middleware.py    |  6 +-
 .../harness/deerflow/runtime/references.py    | 39 ++++++--
 .../harness/tests/test_rag_references.py      | 96 +++++++++++++++++++
 6 files changed, 164 insertions(+), 35 deletions(-)
 create mode 100644 offline-backend-20260512/backend/packages/harness/tests/test_rag_references.py

diff --git a/offline-backend-20260512/backend/app/gateway/routers/agents.py b/offline-backend-20260512/backend/app/gateway/routers/agents.py
index 512dcb7a..4b0f50fb 100644
--- a/offline-backend-20260512/backend/app/gateway/routers/agents.py
+++ b/offline-backend-20260512/backend/app/gateway/routers/agents.py
@@ -435,14 +435,19 @@ async def list_agents(
             agents = await store.list_all()
         else:
             agents = await store.list_visible(user_id)
-        # List endpoint stays lean: skip per-agent SOUL.md read, config.yaml
-        # parse, and dir self-heal — none of those feed UI fields the gallery /
-        # recommend dialog / selector actually render. Detail endpoints (single
-        # agent + create/update responses) still load them.
-        responses = [
-            _record_to_response(a, include_soul=False, include_extras=False)
-            for a in agents
-        ]
+        # Load lightweight extras (skills / model / tool_groups from config.yaml)
+        # so the gallery cards can render skill badges. SOUL.md is still skipped
+        # (only the edit dialog reads it). The per-agent config.yaml reads run in
+        # worker threads concurrently, so the event loop stays responsive even
+        # with many agents.
+        responses = list(
+            await asyncio.gather(
+                *(
+                    _record_to_response_async(a, include_soul=False, include_extras=True)
+                    for a in agents
+                )
+            )
+        )
 
         assignments = await tag_store.list_assignments("agent", [r.id for r in responses])
         favorite_ids = await store.list_favorite_ids(user_id)
diff --git a/offline-backend-20260512/backend/app/gateway/services.py b/offline-backend-20260512/backend/app/gateway/services.py
index 46965a2c..873e0299 100644
--- a/offline-backend-20260512/backend/app/gateway/services.py
+++ b/offline-backend-20260512/backend/app/gateway/services.py
@@ -104,7 +104,8 @@ _BUILTIN_GRAPH_IDS: frozenset[str] = frozenset({"lead_agent", "canvas_agent", "a
 
 _RAG_CITATION_PROMPT = """当前对话已开启参考文献模式。
 如果本轮调用了搜索、知识库、检索类技能或工具，请基于本轮所有检索结果整体回答。
-你必须把同一轮内多次检索得到的资料视为同一批参考文献，按出现顺序从 [1] 开始连续编号，不要让每个检索词各自从 [1] 重新编号。
+如果你已经知道需要多个检索词，请优先在同一步里并行调用检索工具，等这些检索都返回后再回答，不要查一个检索词就先写一版答案。
+你必须把同一轮内多次检索得到的资料视为同一个 referenceBatch，按系统稍后提供的合并批次从 [1] 开始连续编号，不要让每个检索词各自从 [1] 重新编号。
 回答正文中的关键结论必须标注对应编号，例如 [1]、[2]，多个来源可写为 [1][3][5]。
 不要引用不存在的编号，不要使用技能内部自带的编号，不要把参考文献完整列表堆在正文末尾。
 如果没有任何可用检索结果，请直接说明未检索到可靠参考资料。"""
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/lead_agent/prompt.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/lead_agent/prompt.py
index 96dacf1f..366c3ea8 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/lead_agent/prompt.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/lead_agent/prompt.py
@@ -703,12 +703,14 @@ def _get_cached_skills_prompt_section(
 
     display_pattern = (
         """
-**Skill Result Display Pattern:**
-- If a skill has `<display mode="citation">`, use the skill's returned result order as reference numbers. Cite facts from the first result as `[[1]]`, the second as `[[2]]`, and so on. Use only numbers that correspond to returned results.
-- If a skill has `<display mode="list">`, summarize the returned items as a concise list and keep item order stable.
-- If a skill has `<display mode="table">`, summarize the result and output `<skill-display tool="SKILL_OR_TOOL_NAME" mode="table" />` where the frontend should render the real table. Do not hand-write the table rows yourself.
-- If a skill has `<display mode="card">`, summarize the result and output `<skill-display tool="SKILL_OR_TOOL_NAME" mode="card" />` where the frontend should render the cards.
-- If a skill has `<display mode="custom">`, follow the custom display instruction in the `<display>` tag when presenting the skill result.
+**Skill Result Display Pattern:**
+- If RAG/reference display mode is enabled, do not number each skill result independently. Treat all retrieval results from the same user turn as one combined `referenceBatch` and cite with `[1]`, `[2]`, etc. from the system-provided reference prompt.
+- In RAG/reference display mode, do not output `<skill-display .../>`; the frontend renders cards, tables, lists, and citation details in the right reference panel.
+- If RAG/reference display mode is not enabled and a skill has `<display mode="citation">`, use the skill's returned result order as reference numbers. Cite facts from the first result as `[1]`, the second as `[2]`, and so on. Use only numbers that correspond to returned results.
+- If a skill has `<display mode="list">`, summarize the returned items as a concise list and keep item order stable.
+- If a skill has `<display mode="table">`, summarize the result and output `<skill-display tool="SKILL_OR_TOOL_NAME" mode="table" />` where the frontend should render the real table. Do not hand-write the table rows yourself.
+- If a skill has `<display mode="card">`, summarize the result and output `<skill-display tool="SKILL_OR_TOOL_NAME" mode="card" />` where the frontend should render the cards.
+- If a skill has `<display mode="custom">`, follow the custom display instruction in the `<display>` tag when presenting the skill result.
 """
         if display_signature
         else ""
@@ -993,16 +995,16 @@ Writing mode is enabled for this run.
     network_policy_section = _build_network_policy_section()
     rag_mode_section = (
         """
-<rag_citation_mode>
-RAG/reference display mode is enabled.
-When a search, knowledge, skill, or MCP tool returns a result list:
-- If the skill has a display adapter, follow that adapter first.
-- For `citation`, cite returned items with `[[1]]`, `[[2]]`, etc. Only cite real returned items.
-- For `table`, do not hand-write the table. Summarize and place `<skill-display tool="SKILL_OR_TOOL_NAME" mode="table" />` where the table should appear. The frontend will render the real tool result as a stable table.
-- For `list` or `card`, summarize and place `<skill-display tool="SKILL_OR_TOOL_NAME" mode="list" />` or `<skill-display tool="SKILL_OR_TOOL_NAME" mode="card" />` where the structured result should appear.
-- If no display adapter exists, default to citation mode with numbered citations.
-</rag_citation_mode>
-"""
+<rag_citation_mode>
+RAG/reference display mode is enabled.
+When a search, knowledge, skill, or MCP tool returns a result list:
+- If multiple search terms are needed, prefer calling the retrieval tools for all known terms in the same step, then answer after the tool results are returned.
+- Treat every retrieval result from the same user turn as one combined `referenceBatch`; do not restart numbering for each search term, tool call, skill, or display adapter.
+- Use only the system-provided merged reference numbers in the final answer, formatted as `[1]`, `[2]`, `[1][3][5]`.
+- Do not output `<skill-display .../>` in RAG/reference mode. The frontend renders configured cards, tables, lists, and citation details in the right reference panel.
+- If no display adapter exists, the frontend defaults the right reference panel to numbered citations.
+</rag_citation_mode>
+"""
         if rag_mode_enabled
         else ""
     )
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/middlewares/rag_citation_middleware.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/middlewares/rag_citation_middleware.py
index 04eae320..07883766 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/middlewares/rag_citation_middleware.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/middlewares/rag_citation_middleware.py
@@ -80,13 +80,15 @@ class RagCitationMiddleware(AgentMiddleware[AgentState]):
             return None
         summary = build_reference_debug_summary(messages, [batch] if batch else None)
         _log_rag_debug(
-            "middleware reference-prompt enabled=true prompt=true messages=%s tool_messages=%s "
-            "raw_items=%s normalized_items=%s kept_items=%s latest_batch_sources=%s",
+            "middleware reference-prompt enabled=true prompt=true single_batch=true messages=%s "
+            "tool_messages=%s raw_items=%s normalized_items=%s kept_items=%s latest_batch_id=%s "
+            "latest_batch_sources=%s",
             summary["messages"],
             summary["tool_messages"],
             summary["raw_items"],
             summary["normalized_items"],
             summary["kept_items"],
+            (batch or {}).get("id"),
             len((batch or {}).get("sources") or []),
         )
         _log_rag_debug(
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/runtime/references.py b/offline-backend-20260512/backend/packages/harness/deerflow/runtime/references.py
index d6029b09..e04d8f36 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/runtime/references.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/runtime/references.py
@@ -37,24 +37,45 @@ def build_reference_batches(messages: list[Any]) -> list[dict[str, Any]]:
     return batches
 
 
-def build_latest_reference_prompt(messages: list[Any]) -> tuple[str, dict[str, Any] | None]:
+def build_latest_reference_batch(messages: list[Any]) -> dict[str, Any] | None:
+    """Return the single combined citation batch for the latest human turn."""
     human_index = _find_latest_human_index(messages)
     if human_index is None:
-        return "", None
+        return None
     sources = _collect_sources(messages[human_index + 1 :])
     if not sources:
-        return "", None
+        return None
     assistant = _find_reference_batch_anchor(messages, human_index + 1, len(messages))
     message_id = _message_id(assistant) or _message_id(messages[human_index]) or str(human_index)
-    batch = {
+    return {
         "id": message_id,
         "assistant_message_id": message_id,
+        "source_count": len(sources),
         "sources": sources,
     }
+
+
+def build_latest_reference_prompt(messages: list[Any]) -> tuple[str, dict[str, Any] | None]:
+    batch = build_latest_reference_batch(messages)
+    if batch is None:
+        return "", None
+    return build_reference_prompt_for_batch(batch), batch
+
+
+def build_reference_prompt_for_batch(batch: dict[str, Any]) -> str:
+    """Build the authoritative model prompt from one already-combined batch."""
+    sources = [
+        source
+        for source in batch.get("sources", [])
+        if isinstance(source, dict)
+    ]
+    source_count = len(sources)
     lines = [
-        "本轮检索结果已由系统统一合并并重新编号。最终回答必须使用下面这套编号。",
-        "如果你仍需要补充检索，请先继续调用工具；最终回答只能引用最新合并后的编号。",
+        f"本轮所有检索结果已合并为同一个 referenceBatch，共 {source_count} 条，编号从 [1] 到 [{source_count}] 唯一连续。",
+        "下面这一批就是当前回答唯一可用的参考文献批次；不要按检索词、工具调用次数或工具原始编号重新分批编号。",
+        "如果你仍需要补充检索，请只继续调用工具，不要输出正文；最终回答只能引用补充检索后系统重新合并出的最新 referenceBatch。",
         "",
+        f"<reference_batch source_count=\"{source_count}\">",
     ]
     for source in sources:
         title = source.get("title") or f"参考文献 {source.get('index')}"
@@ -73,18 +94,20 @@ def build_latest_reference_prompt(messages: list[Any]) -> tuple[str, dict[str, A
         if content:
             lines.append(content)
         lines.append("")
+    lines.append("</reference_batch>")
+    lines.append("")
     lines.extend(
         [
             "引用规则：",
             "1. 回答正文中的关键结论必须标注对应编号，例如 [1]、[2]。",
             "2. 多个来源可写为 [1][3][5]。",
             "3. 只能引用上方存在的编号，不要编造编号。",
-            "4. 不要使用工具原始编号，也不要重新排序编号。",
+            "4. 不要使用工具原始编号，也不要重新排序、重新分批或重新从 [1] 开始编号。",
             "5. 不要在正文末尾堆完整参考文献列表，前端会展示右侧参考文献。",
             "6. 参考文献模式下不要输出 <skill-display .../> 占位符，也不要在正文里额外渲染卡片、表格或列表；前端会在右侧参考文献区域展示。",
         ]
     )
-    return "\n".join(lines).strip(), batch
+    return "\n".join(lines).strip()
 
 
 def _find_latest_human_index(messages: list[Any]) -> int | None:
diff --git a/offline-backend-20260512/backend/packages/harness/tests/test_rag_references.py b/offline-backend-20260512/backend/packages/harness/tests/test_rag_references.py
new file mode 100644
index 00000000..c28514d5
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/tests/test_rag_references.py
@@ -0,0 +1,96 @@
+"""Tests for RAG citation batch construction."""
+
+from __future__ import annotations
+
+import json
+
+from deerflow.runtime.references import (
+    build_latest_reference_batch,
+    build_latest_reference_prompt,
+    build_reference_batches,
+)
+
+
+def _tool_message(call_id: str, query: str, start: int) -> dict:
+    return {
+        "type": "tool",
+        "name": "web_search",
+        "tool_call_id": call_id,
+        "content": json.dumps(
+            {
+                "query": query,
+                "results": [
+                    {
+                        "title": f"{query} result {start}",
+                        "content": f"{query} content {start}",
+                        "url": f"https://example.test/{start}",
+                    },
+                    {
+                        "title": f"{query} result {start + 1}",
+                        "content": f"{query} content {start + 1}",
+                        "url": f"https://example.test/{start + 1}",
+                    },
+                ],
+            },
+            ensure_ascii=False,
+        ),
+    }
+
+
+def test_latest_reference_prompt_uses_one_combined_batch_for_multi_search_turn() -> None:
+    messages = [
+        {"type": "human", "id": "human-1", "content": "search two terms"},
+        {
+            "type": "ai",
+            "id": "ai-search-1",
+            "content": "",
+            "tool_calls": [{"id": "call-1", "name": "web_search", "args": {"query": "Trump"}}],
+        },
+        _tool_message("call-1", "Trump", 1),
+        {
+            "type": "ai",
+            "id": "ai-search-2",
+            "content": "",
+            "tool_calls": [{"id": "call-2", "name": "web_search", "args": {"query": "White House"}}],
+        },
+        _tool_message("call-2", "White House", 3),
+    ]
+
+    batch = build_latest_reference_batch(messages)
+    assert batch is not None
+    assert batch["source_count"] == 4
+    assert [source["index"] for source in batch["sources"]] == [1, 2, 3, 4]
+    assert [source["title"] for source in batch["sources"]] == [
+        "Trump result 1",
+        "Trump result 2",
+        "White House result 3",
+        "White House result 4",
+    ]
+
+    prompt, prompt_batch = build_latest_reference_prompt(messages)
+    assert prompt_batch == batch
+    assert '<reference_batch source_count="4">' in prompt
+    assert "[1] Trump result 1" in prompt
+    assert "[4] White House result 4" in prompt
+    assert "重新分批" in prompt
+
+
+def test_reference_batches_keep_separate_user_turns_but_merge_searches_inside_turn() -> None:
+    messages = [
+        {"type": "human", "id": "human-1", "content": "first"},
+        {"type": "ai", "id": "ai-1", "content": "", "tool_calls": [{"id": "c1", "name": "web_search"}]},
+        _tool_message("c1", "first", 1),
+        {"type": "ai", "id": "answer-1", "content": "answer [1]"},
+        {"type": "human", "id": "human-2", "content": "second"},
+        {"type": "ai", "id": "ai-2", "content": "", "tool_calls": [{"id": "c2", "name": "web_search"}]},
+        _tool_message("c2", "second-a", 3),
+        {"type": "ai", "id": "ai-3", "content": "", "tool_calls": [{"id": "c3", "name": "web_search"}]},
+        _tool_message("c3", "second-b", 5),
+        {"type": "ai", "id": "answer-2", "content": "answer [1][4]"},
+    ]
+
+    batches = build_reference_batches(messages)
+    assert [len(batch["sources"]) for batch in batches] == [2, 4]
+    assert [source["index"] for source in batches[1]["sources"]] == [1, 2, 3, 4]
+    assert batches[0]["assistant_message_id"] == "answer-1"
+    assert batches[1]["assistant_message_id"] == "answer-2"

From 07ad87365f7b9516e1803b0c9b63f1364e164d83 Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Fri, 29 May 2026 11:42:30 +0800
Subject: [PATCH 4/9] =?UTF-8?q?=E4=BD=9C=E5=AE=B6=E5=86=99=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend-web/src/components/page-sdebar.css   |  91 ++++++-
 .../src/components/page-sidebar-dark.tsx      |  85 ++++++-
 .../components/ai-writing/SkillStepsCard.tsx  |  30 ++-
 .../open-canvas/hooks/useAIWritingStream.ts   |   5 +-
 .../src/open-canvas/types/ai-writing.ts       |   6 +-
 .../agents/ai_writing/nodes/researcher.py     | 233 +++++++++++-------
 .../agents/ai_writing/search/skill_search.py  | 158 +++---------
 7 files changed, 380 insertions(+), 228 deletions(-)

diff --git a/frontend-web/src/components/page-sdebar.css b/frontend-web/src/components/page-sdebar.css
index 263fc14d..f628f7b9 100644
--- a/frontend-web/src/components/page-sdebar.css
+++ b/frontend-web/src/components/page-sdebar.css
@@ -16,7 +16,9 @@
 .item-nav{
     width:100%;
     padding:10px 0;
+    border:0;
     border-bottom:1px solid rgba(85, 166, 254, 0.2);
+    background:transparent;
     font-family:'Noto Sans S Chinese', sans-serif;
     font-weight:500;
     color:rgba(255, 255, 255, 0.8);
@@ -44,7 +46,7 @@
 
 .item-nav-content{ 
     width: 155px;
-    height: 970px;
+    min-height: 970px;
     background: rgba(3, 38, 80, 0.8);
     border: 1px solid;
     border-color: rgba(43, 143, 254, 0.6);
@@ -54,6 +56,8 @@
     left: 97px;
     top: 0;
     z-index: 1000;
+    padding: 14px 13px 18px 16px;
+    overflow-y:auto;
 }
 
 .item-nav-active{
@@ -81,4 +85,87 @@
     height:45px;
     background: url('../assets/icon/nav-line-logo.svg') no-repeat;
     background-size: cover;
-}
\ No newline at end of file
+}
+
+.sidebar-flyout-list{
+    display:flex;
+    flex-direction:column;
+    gap:2px;
+    position:relative;
+}
+
+.sidebar-flyout-list--level-1,
+.sidebar-flyout-list--level-2,
+.sidebar-flyout-list--level-3{
+    margin-left:19px;
+    padding-left:14px;
+}
+
+.sidebar-flyout-node{
+    position:relative;
+}
+
+.sidebar-flyout-node--has-children.sidebar-flyout-node--expanded > .sidebar-flyout-list::before{
+    content:'';
+    position:absolute;
+    left:0;
+    top:0;
+    width:1px;
+    height:100%;
+    background:rgba(43, 143, 254, 0.22);
+}
+
+.sidebar-flyout-item{
+    width:100%;
+    min-height:34px;
+    display:flex;
+    align-items:center;
+    gap:9px;
+    border:0;
+    background:transparent;
+    padding:3px 0;
+    font-family:Noto Sans S Chinese;
+    font-size:18px;
+    line-height:28px;
+    font-weight:500;
+    letter-spacing:0;
+    color:rgba(255, 255, 255, 0.8);
+    text-align:left;
+    cursor:pointer;
+    transition:color 0.2s ease, text-shadow 0.2s ease;
+}
+
+.sidebar-flyout-item:hover,
+.sidebar-flyout-item--active{
+    color:#48ddff;
+    text-shadow:0 0 8px rgba(72, 221, 255, 0.25);
+}
+
+.sidebar-flyout-item--leaf{
+    justify-content:center;
+    padding-left:0;
+}
+
+.sidebar-flyout-list--level-1 > .sidebar-flyout-node > .sidebar-flyout-item--leaf,
+.sidebar-flyout-list--level-2 > .sidebar-flyout-node > .sidebar-flyout-item--leaf,
+.sidebar-flyout-list--level-3 > .sidebar-flyout-node > .sidebar-flyout-item--leaf{
+    padding-left:0;
+}
+
+.sidebar-flyout-arrow{
+    width:9px;
+    height:9px;
+    flex:0 0 9px;
+    background:url('../assets/icon/down-logo.svg') center / contain no-repeat;
+    transform:rotate(-90deg);
+    transition:transform 0.2s ease;
+}
+
+.sidebar-flyout-node--expanded > .sidebar-flyout-item > .sidebar-flyout-arrow{
+    transform:rotate(0deg);
+}
+
+.sidebar-flyout-label{
+    flex:1;
+    white-space:nowrap;
+}
diff --git a/frontend-web/src/components/page-sidebar-dark.tsx b/frontend-web/src/components/page-sidebar-dark.tsx
index dd841c64..aa18608f 100644
--- a/frontend-web/src/components/page-sidebar-dark.tsx
+++ b/frontend-web/src/components/page-sidebar-dark.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import type { ElementType } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import {
@@ -285,7 +285,10 @@ export function PageSidebarDark({
   const { theme } = useTheme();
   const isDark = theme === "dark";
   const isAdmin = getStoredAuth()?.system_role === "admin";
-  const visibleMenuItems = filterMenuItemsByRole(menuItems, !!isAdmin);
+  const visibleMenuItems = useMemo(
+    () => filterMenuItemsByRole(menuItems, !!isAdmin),
+    [isAdmin],
+  );
   const { t } = useI18n();
   const { data: unreadCount = 0 } = useUnreadCount();
   const [expandedIds, setExpandedIds] = useState<Set<string>>(defaultExpandedIds);
@@ -306,6 +309,26 @@ export function PageSidebarDark({
     setSettingsOpen(true);
   };
 
+  const hasActiveChild = (item: MenuItem): boolean => {
+    if (item.path && pathname === item.path) {
+      return true;
+    }
+
+    return item.children?.some(hasActiveChild) ?? false;
+  };
+
+  const initialActiveTopItem = visibleMenuItems.find(hasActiveChild) ?? visibleMenuItems[0];
+  const [activeTopId, setActiveTopId] = useState(initialActiveTopItem?.id ?? "qa-center");
+
+  useEffect(() => {
+    const matchedTopItem = visibleMenuItems.find(hasActiveChild);
+    if (matchedTopItem) {
+      setActiveTopId(matchedTopItem.id);
+    }
+  }, [pathname, visibleMenuItems]);
+
+  const activeTopItem = visibleMenuItems.find((item) => item.id === activeTopId) ?? initialActiveTopItem;
+
   const toggleExpanded = (id: string) => {
     setExpandedIds((prev) => {
       const next = new Set(prev);
@@ -318,6 +341,51 @@ export function PageSidebarDark({
     });
   };
 
+  const handleTopItemClick = (item: MenuItem) => {
+    setActiveTopId(item.id);
+
+    if (!item.children?.length && item.path) {
+      navigate(item.path);
+    }
+  };
+
+  const handleMenuItemClick = (item: MenuItem) => {
+    if (item.children?.length) {
+      toggleExpanded(item.id);
+      return;
+    }
+
+    if (item.path) {
+      navigate(item.path);
+    }
+  };
+
+  const renderFlyoutMenu = (items: MenuItem[], level = 0) => (
+    <div className={`sidebar-flyout-list sidebar-flyout-list--level-${level}`}>
+      {items.map((item) => {
+        const hasChildren = !!item.children?.length;
+        const isExpanded = expandedIds.has(item.id);
+        const isSelected = item.path ? pathname === item.path : hasActiveChild(item);
+
+        return (
+          <div
+            key={item.id}
+            className={`sidebar-flyout-node sidebar-flyout-node--level-${level} ${hasChildren ? "sidebar-flyout-node--has-children" : ""} ${isExpanded ? "sidebar-flyout-node--expanded" : ""}`}
+          >
+            <button
+              type="button"
+              className={`sidebar-flyout-item ${isSelected ? "sidebar-flyout-item--active" : ""} ${hasChildren ? "sidebar-flyout-item--parent" : "sidebar-flyout-item--leaf"}`}
+              onClick={() => handleMenuItemClick(item)}
+            >
+              {hasChildren ? <span className="sidebar-flyout-arrow" aria-hidden="true" /> : null}
+              <span className="sidebar-flyout-label">{item.label}</span>
+            </button>
+            {hasChildren && isExpanded ? renderFlyoutMenu(item.children ?? [], level + 1) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
   return (
     <>
       <SettingsDialog
@@ -332,11 +400,18 @@ export function PageSidebarDark({
       {/* TODO: 在这里编写深色主题的侧边栏 HTML 结构 */}
       <div className="sidebar-contnet">
         <div className="sidebar-contents">
-          <div className="item-nav-content"></div>
+          <div className="item-nav-content">
+            {activeTopItem?.children?.length ? renderFlyoutMenu(activeTopItem.children) : null}
+          </div>
           {visibleMenuItems.map((item) => (
-            <div key={item.id} className={`item-nav ${item.id === 'qa-center' ? 'item-nav-active' : ''}`}>
+            <button
+              type="button"
+              key={item.id}
+              className={`item-nav ${item.id === activeTopId ? "item-nav-active" : ""}`}
+              onClick={() => handleTopItemClick(item)}
+            >
               <span className="item-nav__label">{item.label}</span>
-            </div>
+            </button>
           ))}
         </div>
       </div>
diff --git a/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
index 9e0b9f86..526fedce 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ChevronRight, Sparkles, ListChecks, Zap, Loader2 } from 'lucide-react';
+import { ChevronRight, Sparkles, ListChecks, Zap, Loader2, CheckCircle2, CircleStop } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { SkillSearchStep } from '../../types/ai-writing';
 import { CollapseTransition } from './CollapseTransition';
@@ -14,12 +14,16 @@ const STEP_ICON: Record<SkillSearchStep['type'], typeof Sparkles> = {
   list_skills: ListChecks,
   select_skills: Sparkles,
   invoke_skill: Zap,
+  skill_result: CheckCircle2,
+  stop_early: CircleStop,
 };
 
 const STEP_LABEL: Record<SkillSearchStep['type'], string> = {
   list_skills: '列出可用技能',
   select_skills: '筛选相关技能',
   invoke_skill: '调用技能',
+  skill_result: '检索结果',
+  stop_early: '提前停止',
 };
 
 export function SkillStepsCard({ steps, inProgress }: SkillStepsCardProps) {
@@ -55,13 +59,33 @@ export function SkillStepsCard({ steps, inProgress }: SkillStepsCardProps) {
           {steps.map((step, idx) => {
             const Icon = STEP_ICON[step.type] ?? Sparkles;
             const label = STEP_LABEL[step.type] ?? step.type;
+            const isStopEarly = step.type === 'stop_early';
+            const isResult = step.type === 'skill_result';
             return (
               <li key={idx} className="flex items-start gap-2 text-[11px]">
-                <span className="shrink-0 mt-0.5 inline-flex items-center justify-center size-4 rounded-full text-[10px] font-medium bg-violet-100 dark:bg-violet-900/60 text-violet-600 dark:text-violet-300">
+                <span
+                  className={cn(
+                    'shrink-0 mt-0.5 inline-flex items-center justify-center size-4 rounded-full text-[10px] font-medium',
+                    isStopEarly
+                      ? 'bg-amber-100 dark:bg-amber-900/60 text-amber-600 dark:text-amber-300'
+                      : isResult
+                        ? 'bg-emerald-100 dark:bg-emerald-900/60 text-emerald-600 dark:text-emerald-300'
+                        : 'bg-violet-100 dark:bg-violet-900/60 text-violet-600 dark:text-violet-300',
+                  )}
+                >
                   {idx + 1}
                 </span>
                 <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-1 font-medium text-violet-700 dark:text-violet-300">
+                  <div
+                    className={cn(
+                      'flex items-center gap-1 font-medium',
+                      isStopEarly
+                        ? 'text-amber-700 dark:text-amber-300'
+                        : isResult
+                          ? 'text-emerald-700 dark:text-emerald-300'
+                          : 'text-violet-700 dark:text-violet-300',
+                    )}
+                  >
                     <Icon className="size-3 shrink-0" />
                     <span>{label}</span>
                     {step.skillName && (
diff --git a/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts b/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts
index 58a04a53..798eb502 100644
--- a/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts
+++ b/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts
@@ -767,7 +767,9 @@ export function useAIWriting() {
     // 乐观更新到下一阶段，跟老 hook 行为对齐
     let nextStatus: WritingStatus = state.status;
     if (pausePoint === 'material_confirm') {
-      nextStatus = payload.action === 're_search' ? 'researching' : 'writing_outline';
+      // re_search / enable_skill_search 都回到 researching；confirm 才进大纲
+      nextStatus = (payload.action === 're_search' || payload.action === 'enable_skill_search')
+        ? 'researching' : 'writing_outline';
     } else if (pausePoint === 'outline_confirm') {
       nextStatus = payload.action === 're_outline' ? 'writing_outline' : 'writing_draft';
     } else if (pausePoint === 'draft_confirm') {
@@ -788,6 +790,7 @@ export function useAIWriting() {
     };
     if (payload.approvedMaterialIds !== undefined) resumePayload.approvedMaterialIds = payload.approvedMaterialIds;
     if (payload.extraKeywords !== undefined) resumePayload.extraKeywords = payload.extraKeywords;
+    if (payload.userQuery !== undefined) resumePayload.userQuery = payload.userQuery;
     if (payload.editedOutline !== undefined) resumePayload.editedOutline = payload.editedOutline;
     if (payload.outlineFeedback !== undefined) resumePayload.outlineFeedback = payload.outlineFeedback;
     if (payload.userRevisionNotes !== undefined) resumePayload.userRevisionNotes = payload.userRevisionNotes;
diff --git a/frontend-web/src/open-canvas/types/ai-writing.ts b/frontend-web/src/open-canvas/types/ai-writing.ts
index 28a4a567..b1c2faa5 100644
--- a/frontend-web/src/open-canvas/types/ai-writing.ts
+++ b/frontend-web/src/open-canvas/types/ai-writing.ts
@@ -17,9 +17,11 @@ export interface AIMaterial {
 // 技能检索过程的单步记录（前端时间线展示"使用了 X 技能"）
 //   list_skills：列出全部 enabled 技能
 //   select_skills：LLM 按相关度排序的候选
-//   invoke_skill：实际按顺序调用某个技能
+//   invoke_skill：开始调用某个技能去检索
+//   skill_result：某个技能检索返回了 N 条素材
+//   stop_early：累计素材达到上限，停止后续技能
 export interface SkillSearchStep {
-  type: 'list_skills' | 'select_skills' | 'invoke_skill';
+  type: 'list_skills' | 'select_skills' | 'invoke_skill' | 'skill_result' | 'stop_early';
   message: string;
   skillNames?: string[];
   skillName?: string;
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py
index a381755c..ed0b17e0 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py
@@ -9,7 +9,8 @@ from typing import List
 
 from langchain_core.runnables import RunnableConfig
 
-from ..search import get_search_provider, SearchResult, SkillSearchProvider
+from ..search import get_search_provider, SearchResult
+from ..search.skill_search import SkillPicker
 from ..state import AIWritingState, Material, MaterialPackage
 from ..prompts.researcher_prompts import (
     EXTRACT_KEYWORDS_SYSTEM, EXTRACT_KEYWORDS_USER,
@@ -135,10 +136,13 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
         writer({"type": "research_progress", "message": message})
 
     # Step 1: 提取关键词
-    kw_result: dict = {}  # 走"用户输入 / 追加关键词"分支时跳过 LLM 调用，notice 拼接需要兜底值
-    if is_user_query_search:
+    kw_result: dict = {}  # 走"用户输入 / 追加 / 技能"分支时跳过 LLM 调用，notice 拼接需要兜底值
+    if is_skill_search:
+        # 技能模式：每个 skill 会自己拼 query（user_query + skill.description），这里不用 LLM 生成关键词
+        keywords: list[str] = [user_query or intent]
+    elif is_user_query_search:
         # 用户输入分支：把整段自然语言作为唯一检索词，尊重原意，不再做关键词拆分
-        keywords: list[str] = [user_query]
+        keywords = [user_query]
         _emit(f"按你的输入「{user_query[:30]}」检索…")
     elif is_append_only:
         # 兼容旧版追加模式：直接用用户填的关键词，不再调 LLM
@@ -164,57 +168,115 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
             keywords = list(dict.fromkeys(keywords + extra_keywords))
 
     # Step 2: 搜索
-    # 技能检索：用 SkillSearchProvider 替代 web/intranet；步骤事件单独走 skill_search_step 通道
+    # 技能检索：技能不是素材，是"检索策略 / 视角"。流程：
+    #   a. SkillPicker 选出按相关度排序的 skills（推 list_skills + select_skills 事件）
+    #   b. 按顺序遍历 skills：每个 skill 用其 description 让 LLM 生成针对性关键词
+    #   c. 调真实 web/intranet provider 执行检索，推 invoke_skill + skill_result 事件
+    #   d. 累积素材到 max_materials 即 break，推 stop_early
     skill_steps: list[dict] = []
+    search_errors: list[str] = []
+
+    def _emit_skill_step(step: dict) -> None:
+        skill_steps.append(step)
+        writer({"type": "skill_search_step", "agent_name": "素材收集专家", **step})
+
+    async def _llm_select(system: str, user_prompt: str, fallback: dict) -> dict:
+        return await llm_json(system, user_prompt, fallback=fallback, config=config, model_name=keyword_model)
 
     if is_skill_search:
-        def _emit_skill_step(step: dict) -> None:
-            skill_steps.append(step)
-            writer({"type": "skill_search_step", "agent_name": "素材收集专家", **step})
-
-        async def _llm_select(system: str, user_prompt: str, fallback: dict) -> dict:
-            return await llm_json(system, user_prompt, fallback=fallback, config=config, model_name=keyword_model)
-
-        provider = SkillSearchProvider(
+        # ── 技能编排检索 ──
+        picker = SkillPicker(
             llm_select=_llm_select,
             emit_step=_emit_skill_step,
-            max_select=max(1, min(int(max_materials), 10)),
+            max_select=5,
             user_query=user_query,
         )
+        selected = await picker.pick(user_intent=intent)
+        search_errors.extend(picker.errors)
+
+        # 真实 web/intranet provider（按 config.yaml 配置）
+        web_provider = get_search_provider(ai_writing_config)
+
+        # 每个 skill 尽量多取（不分摊），第一个就达到 max_materials 即可早停；
+        # 这才贴近"第一个技能够了就停，否则下一个补充"的语义。
+        per_skill = max(1, max_materials)
+        raw_materials_pre: list[Material] = []
+        seen_urls_pre: set[str] = set()
+        stopped_early = False
+
+        for entry in selected:
+            sk = entry["skill"]
+            # 用 LLM 把 user_query + skill.description 转成针对性关键词
+            _emit_skill_step({
+                "type": "invoke_skill",
+                "message": f"使用技能「{sk.name}」开始检索…",
+                "skill_name": sk.name,
+            })
+            skill_query = f"{user_query} {sk.description or ''}".strip() or intent
+            try:
+                res = await web_provider.search(skill_query, max_results=per_skill)
+            except Exception as e:
+                logger.warning("skill[%s] search failed: %s", sk.name, e)
+                search_errors.append(f"skill[{sk.name}]: {e}")
+                res = []
+
+            # 去重累积
+            new_count = 0
+            for r in res or []:
+                if r.url and r.url in seen_urls_pre:
+                    continue
+                if r.url:
+                    seen_urls_pre.add(r.url)
+                raw_materials_pre.append(Material(
+                    id=f"m{len(raw_materials_pre)+1:03d}",
+                    title=r.title,
+                    content=r.content[:500],
+                    source=f"{r.source}（via 技能 {sk.name}）",
+                    published_at=r.published_at,
+                    relevance_score=r.relevance_score,
+                    source_type=r.source_type,
+                    url=r.url,
+                    recUuid=r.recUuid,
+                ))
+                new_count += 1
+
+            _emit_skill_step({
+                "type": "skill_result",
+                "message": f"技能「{sk.name}」检索到 {new_count} 条新素材",
+                "skill_name": sk.name,
+                "matched_count": new_count,
+            })
+
+            # 早停：累积素材已达上限
+            if len(raw_materials_pre) >= max_materials:
+                stopped_early = True
+                _emit_skill_step({
+                    "type": "stop_early",
+                    "message": f"已获取 {len(raw_materials_pre)} 条素材，达到上限，停止调用后续技能",
+                    "matched_count": len(raw_materials_pre),
+                })
+                break
+
+        # 技能模式不再走下面的并发/合并逻辑，all_results_nested 留空、跳过 web 通用搜索
+        all_results_nested: list = []
+        # 把已收集到的素材挂在 raw_materials_pre，下方合并阶段直接挪过去
     else:
+        # ── 常规 web/intranet 模式 ──
         provider = get_search_provider(ai_writing_config)
 
-    # 按用户指定的关键词数量截断。
-    # 用户输入 / 追加模式：keywords 本身就是用户填的，全部检索不截断。
-    # 其他模式：受 keyword_count 限制，但 extra_keywords 在内时上限放宽到 keywords 总数。
-    if is_user_query_search or is_append_only:
-        search_keywords = keywords
-    else:
-        search_limit = keyword_count
-        if extra_keywords:
-            search_limit = max(search_limit, len(keywords))
-        search_keywords = keywords[:search_limit]
-    total = len(search_keywords)
-    # 每个检索词分到的检索条数 = 总量上限 / 检索词数（向上取整）
-    per_keyword = _per_keyword_limit(max_materials, total)
-    _emit(f"检索词已生成，开始检索 {total} 个方向…")
+        # 按用户指定的关键词数量截断。
+        # 用户输入 / 追加模式：keywords 本身就是用户填的，全部检索不截断。
+        if is_user_query_search or is_append_only:
+            search_keywords = keywords
+        else:
+            search_limit = keyword_count
+            if extra_keywords:
+                search_limit = max(search_limit, len(keywords))
+            search_keywords = keywords[:search_limit]
+        total = len(search_keywords)
+        per_keyword = _per_keyword_limit(max_materials, total)
+        _emit(f"检索词已生成，开始检索 {total} 个方向…")
 
-    # 技能模式：串行调用 provider（早停语义靠 provider 内部累积计数）
-    # 其它模式：并发调用，每完成一个就推送进度
-    if is_skill_search:
-        all_results_nested: list[list[SearchResult]] = []
-        for kw in search_keywords:
-            try:
-                res = await provider.search(kw, max_results=per_keyword, user_intent=intent)
-            except Exception as e:
-                logger.warning("skill search failed: %s", e)
-                all_results_nested.append(e)  # type: ignore[arg-type]
-                continue
-            all_results_nested.append(res)
-            # provider 内部 early_stop_at 已触发时不会再返回新 skill，提前 break 避免空轮询
-            if not res:
-                break
-    else:
         completed = 0
 
         async def _search_one(kw: str) -> list[SearchResult]:
@@ -230,59 +292,48 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
 
         search_tasks = [_search_one(kw) for kw in search_keywords]
         all_results_nested = await asyncio.gather(*search_tasks, return_exceptions=True)
+        # provider 内部吞掉的检索异常（如内网 ES 连接失败），一并取出用于提示用户
+        search_errors.extend(getattr(provider, "errors", []))
 
     # 合并去重
     # - 首次检索 / 普通 re_search（不带 extra_keywords，用户只想 LLM 重出）：旧素材丢弃
     # - 素材不足求助 supplement_search：保留旧素材 + 追加新检索结果
     # - PAUSE-1 追加检索 is_append_only：保留旧素材 + 仅检索新关键词
-    # - 技能检索 is_skill_search：覆盖式替换，旧素材完全丢弃（用户期望对比 web vs skill 结果）
-    seen_urls: set[str] = set()
-    seen_skill_ids: set[str] = set()  # skill 素材无 URL，按 skill_name 去重
-    raw_materials: list[Material] = []
+    # - 技能检索 is_skill_search：覆盖式替换，旧素材完全丢弃（编排循环已经把素材累积到 raw_materials_pre）
     existing_pkg = state.get("material_package")
-    preserve_existing = existing_pkg and (is_supplement or is_append_only) and not is_skill_search
-    if preserve_existing:
-        for m in existing_pkg.get("materials", []):
-            seen_urls.add(m.get("url", ""))
-            raw_materials.append(m)
+    if is_skill_search:
+        # 技能编排循环已经完成素材累积，直接用 raw_materials_pre 当 raw_materials
+        raw_materials: list[Material] = raw_materials_pre  # type: ignore[name-defined]
+    else:
+        seen_urls: set[str] = set()
+        raw_materials = []
+        preserve_existing = existing_pkg and (is_supplement or is_append_only)
+        if preserve_existing:
+            for m in existing_pkg.get("materials", []):
+                seen_urls.add(m.get("url", ""))
+                raw_materials.append(m)
 
-    search_errors: list[str] = []
-    for results in all_results_nested:
-        if isinstance(results, Exception):
-            logger.warning("search failed: %s", results)
-            search_errors.append(f"{type(results).__name__}: {results}")
-            continue
-        for r in results:
-            # skill 素材按 skill_name 去重（同一个 skill 被多个关键词命中只保留一次）
-            if r.source_type == "skill":
-                meta = getattr(r, "extra_metadata", {}) or {}
-                sk_name = meta.get("skill_name", "")
-                if sk_name and sk_name in seen_skill_ids:
-                    continue
-                if sk_name:
-                    seen_skill_ids.add(sk_name)
-            elif r.url and r.url in seen_urls:
+        for results in all_results_nested:
+            if isinstance(results, Exception):
+                logger.warning("search failed: %s", results)
+                search_errors.append(f"{type(results).__name__}: {results}")
                 continue
-            else:
-                seen_urls.add(r.url)
-            mat: Material = Material(
-                id=f"m{len(raw_materials)+1:03d}",
-                title=r.title,
-                content=r.content[:500],
-                source=r.source,
-                published_at=r.published_at,
-                relevance_score=r.relevance_score,
-                source_type=r.source_type,
-                url=r.url,
-                recUuid=r.recUuid,
-            )
-            extra = getattr(r, "extra_metadata", None)
-            if extra:
-                mat["extra_metadata"] = extra
-            raw_materials.append(mat)
-
-    # provider 内部吞掉的检索异常（如内网 ES 连接失败），一并取出用于提示用户
-    search_errors.extend(getattr(provider, "errors", []))
+            for r in results:
+                if r.url and r.url in seen_urls:
+                    continue
+                if r.url:
+                    seen_urls.add(r.url)
+                raw_materials.append(Material(
+                    id=f"m{len(raw_materials)+1:03d}",
+                    title=r.title,
+                    content=r.content[:500],
+                    source=r.source,
+                    published_at=r.published_at,
+                    relevance_score=r.relevance_score,
+                    source_type=r.source_type,
+                    url=r.url,
+                    recUuid=r.recUuid,
+                ))
 
     # Step 3: 相关度排序（如素材较多，让 LLM 排序）
     _emit("检索完成，正在筛选排序素材…")
@@ -343,7 +394,9 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
     if search_errors:
         uniq = list(dict.fromkeys(search_errors))
         # 解析失败时收集到的接口原始响应体，前端折叠展示便于定位
-        raw_dumps = list(dict.fromkeys(getattr(provider, "raw_responses", []) or []))
+        # （技能模式下 provider 局部变量没暴露，所以 raw_dumps 兜底为空列表）
+        provider_obj = locals().get("provider") or locals().get("web_provider")
+        raw_dumps = list(dict.fromkeys(getattr(provider_obj, "raw_responses", []) or []))
         notices.append(_notice(
             "ES 波动导致检索异常",
             "；".join(uniq[:3]),
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py
index 2a08a773..9095b94b 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py
@@ -1,26 +1,27 @@
-"""技能检索 Provider：把已启用的 Skill 当作可检索的素材源。
+"""技能选择器：根据用户意图 + 输入，从启用的 Skills 里挑出按相关度排序的若干个。
 
-流程（保持简单，对应素材确认卡上的"技能检索"按钮）：
+注意：这个模块**只负责选择技能，不直接产出素材**。
+真正的素材产出由 researcher 节点用每个 skill 的描述去编排真实 web/intranet 检索。
+
+流程（对应素材确认卡上的"技能检索"按钮）：
 1) list_skills 事件 —— 列出当前启用的全部 skill
 2) select_skills 事件 —— LLM 根据用户输入 + 写作意图按相关度选出若干个
-3) invoke_skill 事件 —— 按相关度从高到低顺序产出 SearchResult
 
-输出格式严格对齐 BaseSearchProvider 的 SearchResult，让 researcher 节点
-不需要分支处理，下游 Material 字段同构。
+下游 researcher 节点拿到 selected_skills 后，**按顺序**：
+- 用 skill.description + user_query 生成针对性关键词
+- 调真实 web search provider 执行
+- 累积素材达到阈值就停（推 stop_early）
 """
 from __future__ import annotations
 
 import logging
-import re
 from typing import Callable, List, Optional
 
-from .base import BaseSearchProvider, SearchResult
-
 logger = logging.getLogger(__name__)
 
 
-_SELECT_SKILLS_SYSTEM = """你是一名情报研究员，需要从可用「技能」中挑出对写作任务有帮助的若干个，并按相关度从高到低排序。
-技能是一段封装好的指令 / 知识 / 工作流，每个技能有 name 和 description。
+_SELECT_SKILLS_SYSTEM = """你是一名情报研究员，需要从可用「技能」中挑出对当前检索任务最有帮助的若干个，并按相关度从高到低排序。
+技能是一段封装好的指令 / 知识 / 检索策略，每个技能有 name 和 description。
 
 【严禁思考】
 - 这是一个简单的匹配任务，禁止任何思考、分析、推理过程，禁止输出 <think></think> 标签。
@@ -31,18 +32,18 @@ _SELECT_SKILLS_SYSTEM = """你是一名情报研究员，需要从可用「技
 - 必须使用英文双引号。
 - selected_skills 中的 name 必须严格来自下方"可用技能"列表，不要编造，按相关度从高到低排序。
 - 如果用户输入里明确点名了某个技能（按 name 完全匹配），把它排在第一位。
+- 至少选 1 个，最多选 {max_select} 个。
 
 【完整示例】
-{"selected_skills": ["web-search", "knowledge-lookup"], "reason": "用户想检索互联网信息，web-search 最相关，知识库查询作为补充"}"""
+{{"selected_skills": ["platform-sales-data", "industry-report"], "reason": "用户想查各平台销量，平台销量技能最相关"}}"""
 
 _SELECT_SKILLS_USER = """写作意图：{user_intent}
 用户补充输入：{user_query}
-检索关键词：{keywords}
 
 可用技能（共 {skill_count} 个）：
 {skill_list}
 
-请从中按相关度从高到低选出最多 {max_select} 个技能。如果没有合适的技能，selected_skills 返回空数组。
+请从中按相关度从高到低选出最多 {max_select} 个技能。
 只输出 JSON：
 {{"selected_skills": ["name1", "name2"], "reason": "为什么选这些 + 排序依据"}}
 
@@ -52,27 +53,12 @@ _SELECT_SKILLS_USER = """写作意图：{user_intent}
 EmitStepFn = Callable[[dict], None]
 
 
-def _summarize_skill_content(content: str, limit: int = 500) -> str:
-    """从 SKILL.md 提取摘要：跳过 frontmatter，取正文开头 limit 字。"""
-    if not content:
-        return ""
-    body = content
-    m = re.match(r"^---\s*\n(.*?\n)---\s*\n(.*)$", content, flags=re.DOTALL)
-    if m:
-        body = m.group(2)
-    body = re.sub(r"^#\s+.*?\n", "", body.lstrip(), count=1)
-    body = body.strip()
-    if len(body) > limit:
-        return body[:limit].rstrip() + "…"
-    return body
-
-
-class SkillSearchProvider(BaseSearchProvider):
-    """从启用的 Skills 中筛选并返回作为素材。
+class SkillPicker:
+    """从启用的 Skills 中选择按相关度排序的若干个供下游编排使用。
 
     构造参数：
       llm_select: 异步 LLM 调用 (system, user, fallback) -> dict。
-      emit_step:  可选；推送时间线步骤事件（list_skills / select_skills / invoke_skill）。
+      emit_step:  可选；推送时间线步骤事件（list_skills / select_skills）。
       max_select: LLM 单次最多挑几个技能。
       user_query: 用户在素材确认卡输入框写的自然语言（可能包含技能名 / 来源 / 补充意图）。
     """
@@ -90,19 +76,12 @@ class SkillSearchProvider(BaseSearchProvider):
         self._max_select = max_select
         self._user_query = (user_query or "").strip()
         self._errors: list[str] = []
-        # 单次 researcher 调用内复用结果，避免每个 keyword 都问一次 LLM
-        self._selected_cache: list[dict] | None = None
-        self._enabled_skills: list | None = None
-        # 跨 keyword 调用时同一个 skill 只暴露一次
-        self._yielded_skills: set[str] = set()
 
     @property
     def errors(self) -> list[str]:
         return list(self._errors)
 
     def _load_enabled_skills(self) -> list:
-        if self._enabled_skills is not None:
-            return self._enabled_skills
         try:
             from deerflow.skills import get_or_new_skill_storage
             storage = get_or_new_skill_storage()
@@ -111,7 +90,6 @@ class SkillSearchProvider(BaseSearchProvider):
             logger.exception("ai_writing.skill_search: 加载启用技能失败")
             self._errors.append(f"skill list error: {e}")
             skills = []
-        self._enabled_skills = skills
         self._emit_step({
             "type": "list_skills",
             "message": f"发现 {len(skills)} 个可用技能",
@@ -119,14 +97,15 @@ class SkillSearchProvider(BaseSearchProvider):
         })
         return skills
 
-    async def _select_skills(self, query: str, user_intent: str) -> list[dict]:
-        """让 LLM 从启用的技能中按相关度排序选出若干个。同一次检索复用结果。"""
-        if self._selected_cache is not None:
-            return self._selected_cache
-
+    async def pick(self, user_intent: str) -> List[dict]:
+        """选择并排序候选技能，返回 [{skill, reason}, ...]，列表中的 skill 按相关度降序。"""
         skills = self._load_enabled_skills()
         if not skills:
-            self._selected_cache = []
+            self._emit_step({
+                "type": "select_skills",
+                "message": "当前没有启用的技能可用",
+                "skill_names": [],
+            })
             return []
 
         skill_list_text = "\n".join(
@@ -134,11 +113,10 @@ class SkillSearchProvider(BaseSearchProvider):
         )
         try:
             result = await self._llm_select(
-                _SELECT_SKILLS_SYSTEM,
+                _SELECT_SKILLS_SYSTEM.format(max_select=self._max_select),
                 _SELECT_SKILLS_USER.format(
-                    user_intent=user_intent or query,
+                    user_intent=user_intent or "(无明确写作意图)",
                     user_query=self._user_query or "(无)",
-                    keywords=query,
                     skill_count=len(skills),
                     skill_list=skill_list_text,
                     max_select=self._max_select,
@@ -154,95 +132,25 @@ class SkillSearchProvider(BaseSearchProvider):
         if not isinstance(wanted_names, list):
             wanted_names = []
         by_name = {s.name: s for s in skills}
+        reason = result.get("reason", "") or ""
         chosen: list[dict] = []
         for name in wanted_names:
             if not isinstance(name, str):
                 continue
             sk = by_name.get(name.strip())
-            if sk:
-                chosen.append({"skill": sk, "reason": result.get("reason", "")})
+            if sk and sk.name not in {c["skill"].name for c in chosen}:
+                chosen.append({"skill": sk, "reason": reason})
             if len(chosen) >= self._max_select:
                 break
 
         self._emit_step({
             "type": "select_skills",
-            "message": f"按相关度排序，候选 {len(chosen)} 个技能（将按顺序调用）",
+            "message": f"按相关度排序，候选 {len(chosen)} 个技能（将按顺序使用）",
             "skill_names": [c["skill"].name for c in chosen],
-            "reason": result.get("reason", ""),
+            "reason": reason,
         })
-        self._selected_cache = chosen
         return chosen
 
-    @staticmethod
-    def _read_skill_content(skill) -> str:
-        try:
-            return skill.skill_file.read_text(encoding="utf-8")
-        except Exception as e:
-            logger.warning("ai_writing.skill_search: 读 SKILL.md 失败 %s: %s", skill.name, e)
-            return skill.description or ""
 
-    def _to_search_result(self, skill, reason: str) -> SearchResult:
-        raw = self._read_skill_content(skill)
-        summary = _summarize_skill_content(raw, limit=500)
-        category_value = skill.category.value if hasattr(skill.category, "value") else str(skill.category)
-        return SearchResult(
-            title=skill.name,
-            content=summary or (skill.description or skill.name),
-            source=f"技能库 / {category_value}",
-            published_at="",
-            url="",
-            relevance_score=1.0,
-            source_type="skill",
-            recUuid="",
-            extra_metadata={
-                "skill_name": skill.name,
-                "skill_description": skill.description or "",
-                "skill_path": skill.skill_path,
-                "container_path": skill.get_container_file_path(),
-                "category": category_value,
-                "select_reason": reason,
-                # 完整 SKILL.md 内容，供 writer_draft 节点按需注入到 prompt
-                "skill_full_content": raw,
-            },
-        )
-
-    async def search(
-        self,
-        query: str,
-        max_results: int = 5,
-        date_from: str = "",
-        date_to: str = "",
-        user_intent: str = "",
-    ) -> List[SearchResult]:
-        """按相关度顺序产出候选 skills 对应的 SearchResult。
-
-        说明：每个 skill 直接产出一条 SearchResult。researcher 节点上游会按
-        skill_name 去重，所以同一个 SkillSearchProvider 多次调用本方法时不会
-        产出重复 skill 素材（_yielded_skills 兜底）。
-        """
-        chosen = await self._select_skills(query, user_intent=user_intent)
-        if not chosen:
-            return []
-
-        results: List[SearchResult] = []
-        for entry in chosen:
-            sk = entry["skill"]
-            if sk.name in self._yielded_skills:
-                continue
-            self._emit_step({
-                "type": "invoke_skill",
-                "message": f"调用技能：{sk.name}",
-                "skill_name": sk.name,
-                "matched_count": len(self._yielded_skills) + 1,
-            })
-            results.append(self._to_search_result(sk, entry.get("reason", "")))
-            self._yielded_skills.add(sk.name)
-            if len(results) >= max_results:
-                break
-        return results
-
-    async def health_check(self) -> bool:
-        try:
-            return bool(self._load_enabled_skills())
-        except Exception:
-            return False
+# 保留旧名字让 search/__init__.py 的导出不报错；研究节点不再用它
+SkillSearchProvider = SkillPicker

From a9332c0ab083070915bfe78f01983157677181bf Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Fri, 29 May 2026 15:22:28 +0800
Subject: [PATCH 5/9] =?UTF-8?q?=E6=8A=80=E8=83=BD=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend-web/src/components/page-sdebar.css   | 223 +++++++++---------
 .../components/ai-writing/AIWritingPanel.tsx  |  13 +-
 .../ai-writing/SkillSelectStreamingView.tsx   | 158 +++++++++++++
 .../open-canvas/hooks/useAIWritingStream.ts   |  22 +-
 .../src/open-canvas/types/ai-writing.ts       |   4 +
 .../agents/ai_writing/nodes/researcher.py     |   7 +-
 .../agents/ai_writing/search/skill_search.py  |  87 +++++--
 7 files changed, 369 insertions(+), 145 deletions(-)
 create mode 100644 frontend-web/src/open-canvas/components/ai-writing/SkillSelectStreamingView.tsx

diff --git a/frontend-web/src/components/page-sdebar.css b/frontend-web/src/components/page-sdebar.css
index f628f7b9..29b4e477 100644
--- a/frontend-web/src/components/page-sdebar.css
+++ b/frontend-web/src/components/page-sdebar.css
@@ -1,11 +1,11 @@
-.sidebar-contents{
-    width:98px;
-    min-height:986px;
-    background:rgba(3, 38, 80, 0.8);
-    border:1px solid;
-    border-color:rgba(43, 143, 254, 0.6);
-    border-radius:4px;
-    backdrop-filter:blur(2px);
+.sidebar-contents {
+    width: 98px;
+    min-height: 986px;
+    background: rgba(3, 38, 80, 0.8);
+    border: 1px solid;
+    border-color: rgba(43, 143, 254, 0.6);
+    border-radius: 4px;
+    backdrop-filter: blur(2px);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -13,38 +13,44 @@
     position: relative;
 }
 
-.item-nav{
-    width:100%;
-    padding:10px 0;
-    border:0;
-    border-bottom:1px solid rgba(85, 166, 254, 0.2);
-    background:transparent;
-    font-family:'Noto Sans S Chinese', sans-serif;
-    font-weight:500;
-    color:rgba(255, 255, 255, 0.8);
-    font-size:20px;
-    line-height:26px;
-    text-align:center;
-    cursor:pointer;
-    transition:background 0.2s ease, color 0.2s ease;
+.item-nav {
+    width: 100%;
+    height: 70px;
+    background: #ffffff1a;
+    border-color: #fefafa4d;
+    margin-top: 13px;
+    font-family: Noto Sans S Chinese;
+    font-weight: 550;
+    color: #fff;
+    font-size: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background: #000c1c26;
+    border: 1px solid;
+    border-color: #55a6fe33;
+    box-shadow: 0 0 20px #00b9ff26 inset;
+    position: relative;
 }
 
-.item-nav:hover{
-    background:rgba(85, 166, 254, 0.12);
-    color:#ffffff;
+.item-nav:hover {
+    background: rgba(85, 166, 254, 0.12);
+    color: #ffffff;
 }
 
-.item-nav__label{
-    display:block;
-    width:3em;
-    margin:0 auto;
-    padding-left:6px;
-    box-sizing:border-box;
-    letter-spacing:6px;
-    word-break:break-all;
+.item-nav__label {
+    display: block;
+    width: 3em;
+    margin: 0 auto;
+    padding-left: 6px;
+    box-sizing: border-box;
+    letter-spacing: 6px;
+    word-break: break-all;
 }
 
-.item-nav-content{ 
+.item-nav-content {
     width: 155px;
     min-height: 970px;
     background: rgba(3, 38, 80, 0.8);
@@ -57,115 +63,110 @@
     top: 0;
     z-index: 1000;
     padding: 14px 13px 18px 16px;
-    overflow-y:auto;
+    overflow-y: auto;
 }
 
-.item-nav-active{
-    color:#ffffff;
+.item-nav-active {
+    color: #ffffff;
+    background: linear-gradient(134.25deg,
+            rgba(0, 98, 217, 0.59) 2.28%,
+            rgba(0, 98, 217, 0.3) 99.59%) !important;
+    background-size: cover;
+    border: 1px solid;
+    border-color: rgba(255, 255, 255, 0.2);
     position: relative;
 }
 
-.item-nav-active::before{
+.item-nav-active::after {
     content: '';
     position: absolute;
     left: 0;
-    top: 0;
-    width:84.5px;
-    height:70px;
-    background: url('../assets/icon/nav-active.svg') no-repeat;
-    background-size: contain;
-}
-
-.item-nav-active::after{
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 25px;
-    width:77px;
-    height:45px;
+    top: 24px;
+    width: 77px;
+    height: 45px;
     background: url('../assets/icon/nav-line-logo.svg') no-repeat;
     background-size: cover;
 }
 
-.sidebar-flyout-list{
-    display:flex;
-    flex-direction:column;
-    gap:2px;
-    position:relative;
+.sidebar-flyout-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    position: relative;
 }
 
 .sidebar-flyout-list--level-1,
 .sidebar-flyout-list--level-2,
-.sidebar-flyout-list--level-3{
-    margin-left:19px;
-    padding-left:14px;
+.sidebar-flyout-list--level-3 {
+    margin-left: 19px;
+    padding-left: 14px;
 }
 
-.sidebar-flyout-node{
-    position:relative;
+.sidebar-flyout-node {
+    position: relative;
 }
 
-.sidebar-flyout-node--has-children.sidebar-flyout-node--expanded > .sidebar-flyout-list::before{
-    content:'';
-    position:absolute;
-    left:0;
-    top:0;
-    width:1px;
-    height:100%;
-    background:rgba(43, 143, 254, 0.22);
+.sidebar-flyout-node--has-children.sidebar-flyout-node--expanded>.sidebar-flyout-list::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1px;
+    height: 100%;
+    background: rgba(43, 143, 254, 0.22);
 }
 
-.sidebar-flyout-item{
-    width:100%;
-    min-height:34px;
-    display:flex;
-    align-items:center;
-    gap:9px;
-    border:0;
-    background:transparent;
-    padding:3px 0;
-    font-family:Noto Sans S Chinese;
-    font-size:18px;
-    line-height:28px;
-    font-weight:500;
-    letter-spacing:0;
-    color:rgba(255, 255, 255, 0.8);
-    text-align:left;
-    cursor:pointer;
-    transition:color 0.2s ease, text-shadow 0.2s ease;
+.sidebar-flyout-item {
+    width: 100%;
+    min-height: 34px;
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    border: 0;
+    background: transparent;
+    padding: 3px 0;
+    font-family: Noto Sans S Chinese;
+    font-size: 18px;
+    line-height: 28px;
+    font-weight: 500;
+    letter-spacing: 0;
+    color: rgba(255, 255, 255, 0.8);
+    text-align: left;
+    cursor: pointer;
+    transition: color 0.2s ease, text-shadow 0.2s ease;
 }
 
 .sidebar-flyout-item:hover,
-.sidebar-flyout-item--active{
-    color:#48ddff;
-    text-shadow:0 0 8px rgba(72, 221, 255, 0.25);
+.sidebar-flyout-item--active {
+    color: #48ddff;
+    text-shadow: 0 0 8px rgba(72, 221, 255, 0.25);
 }
 
-.sidebar-flyout-item--leaf{
-    justify-content:center;
-    padding-left:0;
+.sidebar-flyout-item--leaf {
+    justify-content: center;
+    padding-left: 0;
 }
 
-.sidebar-flyout-list--level-1 > .sidebar-flyout-node > .sidebar-flyout-item--leaf,
-.sidebar-flyout-list--level-2 > .sidebar-flyout-node > .sidebar-flyout-item--leaf,
-.sidebar-flyout-list--level-3 > .sidebar-flyout-node > .sidebar-flyout-item--leaf{
-    padding-left:0;
+.sidebar-flyout-list--level-1>.sidebar-flyout-node>.sidebar-flyout-item--leaf,
+.sidebar-flyout-list--level-2>.sidebar-flyout-node>.sidebar-flyout-item--leaf,
+.sidebar-flyout-list--level-3>.sidebar-flyout-node>.sidebar-flyout-item--leaf {
+    padding-left: 0;
 }
 
-.sidebar-flyout-arrow{
-    width:9px;
-    height:9px;
-    flex:0 0 9px;
-    background:url('../assets/icon/down-logo.svg') center / contain no-repeat;
-    transform:rotate(-90deg);
-    transition:transform 0.2s ease;
+.sidebar-flyout-arrow {
+    width: 9px;
+    height: 9px;
+    flex: 0 0 9px;
+    background: url('../assets/icon/down-logo.svg') center / contain no-repeat;
+    transform: rotate(-90deg);
+    transition: transform 0.2s ease;
 }
 
-.sidebar-flyout-node--expanded > .sidebar-flyout-item > .sidebar-flyout-arrow{
-    transform:rotate(0deg);
+.sidebar-flyout-node--expanded>.sidebar-flyout-item>.sidebar-flyout-arrow {
+    transform: rotate(0deg);
 }
 
-.sidebar-flyout-label{
-    flex:1;
-    white-space:nowrap;
-}
+.sidebar-flyout-label {
+    flex: 1;
+    white-space: nowrap;
+}
\ No newline at end of file
diff --git a/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
index e96ad767..9efa88b2 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
@@ -39,6 +39,7 @@ import { AIWritingForm } from './AIWritingForm';
 import { AIWritingTimeline } from './AIWritingTimeline';
 import { InterventionCard } from './InterventionCard';
 import { SkillStepsCard } from './SkillStepsCard';
+import { SkillSelectStreamingView } from './SkillSelectStreamingView';
 import { WritingSkeletonCard } from './WritingSkeletonCard';
 import { DraftStreamingView } from './DraftStreamingView';
 import { IntentResultCard } from './IntentResultCard';
@@ -447,6 +448,14 @@ export function AIWritingPanel({
           />
         )}
 
+        {/* 技能选择 LLM 流式打字（含 <think> 思考分离），select_skills 完成后自动清空 */}
+        {state.status === 'researching' && (state.skillSelectStreamingText || state.skillSelectThinkingText) && (
+          <SkillSelectStreamingView
+            text={state.skillSelectStreamingText}
+            thinkingText={state.skillSelectThinkingText}
+          />
+        )}
+
         {/* 研究中 + 已有技能步骤：实时流式展示技能检索过程，避免 skeleton 卡片掩盖步骤 */}
         {state.status === 'researching' && state.skillSearchSteps.length > 0 && (
           <div className="px-4 pb-2">
@@ -458,8 +467,8 @@ export function AIWritingPanel({
          state.status !== 'writing_draft' &&
          !(state.status === 'writing_outline' && (state.outlineStreamingText || state.outlineThinkingText)) &&
          !(state.status === 'reviewing' && state.streamingReviewItems.length > 0) &&
-         /* 技能检索已经在流式展示步骤，不需要再叠加 skeleton */
-         !(state.status === 'researching' && state.skillSearchSteps.length > 0) &&
+         /* 技能检索已经在流式展示步骤 / 选择打字机，不需要再叠加 skeleton */
+         !(state.status === 'researching' && (state.skillSearchSteps.length > 0 || state.skillSelectStreamingText || state.skillSelectThinkingText)) &&
          /* 意图解析流式过程中（LLM 还在吐 JSON）不要显示 skeleton */
          !state.intentStreamingText && !state.intentThinkingText && (
           <div className="px-4 pb-4">
diff --git a/frontend-web/src/open-canvas/components/ai-writing/SkillSelectStreamingView.tsx b/frontend-web/src/open-canvas/components/ai-writing/SkillSelectStreamingView.tsx
new file mode 100644
index 00000000..ca8bd908
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/SkillSelectStreamingView.tsx
@@ -0,0 +1,158 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Sparkles, ChevronDown, ChevronRight, Brain, Zap } from 'lucide-react';
+
+interface SkillSelectStreamingViewProps {
+  text: string;
+  thinkingText?: string;
+}
+
+/**
+ * 从流式 JSON 文本里增量提取已经识别出的技能名。
+ *
+ * LLM 输出形如 `{"selected_skills": ["skill-a", "skill-b", "skill-c"], "reason": "..."}`，
+ * 我们不等整段 JSON 解析完，逐字符扫描"已闭合"的双引号字符串：
+ *   - 找到 `"selected_skills"`（或末尾不完整时回退兜底）后取后续内容
+ *   - 在该位置之后的 `[ ... ]` 内逐个匹配 `"..."`
+ *   - 只取**已闭合**的字符串（结尾必须是 `"`），确保不把正在打字的半截名字露出来
+ */
+function extractStreamingSkillNames(text: string): string[] {
+  if (!text) return [];
+  // 定位 selected_skills 的值起点（容错：允许中英文引号 / 不同空白）
+  const keyMatch = text.match(/["']?selected_skills["']?\s*:\s*\[/);
+  if (!keyMatch) return [];
+  const start = keyMatch.index! + keyMatch[0].length;
+  // 截取数组段（找到对应的 ]，或者文本结尾）
+  const rest = text.slice(start);
+  const endIdx = rest.indexOf(']');
+  const arrBody = endIdx >= 0 ? rest.slice(0, endIdx) : rest;
+  // 只提取已经"闭合"的字符串：[^"\\]*(?:\\.[^"\\]*)* 处理转义引号
+  const names: string[] = [];
+  const re = /"((?:[^"\\]|\\.)*)"/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(arrBody)) !== null) {
+    const name = m[1].trim();
+    if (name) names.push(name);
+  }
+  return names;
+}
+
+/**
+ * 技能选择 LLM 流式打字机视图。
+ *
+ * - 思考过程（<think></think> 内）用 amber 折叠面板（与 OutlineStreamingView 风格一致）
+ * - 正文 JSON 用 violet 主题（与 SkillStepsCard 同色系，强调"技能"语义）
+ * - 两边都自动滚动到底；正文带闪烁光标，思考过程在正文未开始时也有光标
+ */
+export function SkillSelectStreamingView({ text, thinkingText }: SkillSelectStreamingViewProps) {
+  const preRef = useRef<HTMLPreElement>(null);
+  const thinkRef = useRef<HTMLPreElement>(null);
+  const [thinkOpen, setThinkOpen] = useState(true);
+
+  // 实时从流式 JSON 中增量解析出已识别的技能名
+  const streamingSkills = useMemo(() => extractStreamingSkillNames(text), [text]);
+
+  useEffect(() => {
+    if (preRef.current) preRef.current.scrollTop = preRef.current.scrollHeight;
+  }, [text]);
+
+  useEffect(() => {
+    if (thinkOpen && thinkRef.current) thinkRef.current.scrollTop = thinkRef.current.scrollHeight;
+  }, [thinkingText, thinkOpen]);
+
+  if (!text && !thinkingText) return null;
+
+  return (
+    <div className="px-4 pb-2 space-y-2">
+      {thinkingText && (
+        <div className="rounded-xl border border-amber-200 dark:border-amber-900 bg-amber-50/50 dark:bg-amber-950/20 overflow-hidden shadow-sm">
+          <button
+            type="button"
+            onClick={() => setThinkOpen((v) => !v)}
+            className="w-full flex items-center gap-2 px-3 py-2 border-b border-amber-200/60 dark:border-amber-900/60 bg-amber-100/40 dark:bg-amber-900/30 hover:bg-amber-100/70 dark:hover:bg-amber-900/50 transition-colors"
+          >
+            <Brain className="size-3.5 text-amber-500 shrink-0" />
+            <span className="text-xs font-medium text-amber-600 dark:text-amber-400">
+              思考过程
+            </span>
+            <span className="ml-auto text-amber-400">
+              {thinkOpen
+                ? <ChevronDown className="size-3.5" />
+                : <ChevronRight className="size-3.5" />}
+            </span>
+          </button>
+          {thinkOpen && (
+            <pre
+              ref={thinkRef}
+              className="text-[11px] font-mono leading-relaxed p-3 text-amber-700/70 dark:text-amber-300/60 whitespace-pre-wrap max-h-40 overflow-y-auto italic"
+            >
+              {thinkingText}
+              {!text && (
+                <span className="inline-block w-0.5 h-3.5 bg-amber-400 ml-0.5 align-text-bottom animate-[blink_1s_step-end_infinite]" />
+              )}
+            </pre>
+          )}
+        </div>
+      )}
+
+      {text && (
+        <div className="rounded-xl border border-violet-200 dark:border-violet-900 bg-violet-50/50 dark:bg-violet-950/20 overflow-hidden shadow-sm">
+          <div className="flex items-center gap-2 px-3 py-2 border-b border-violet-200/60 dark:border-violet-900/60 bg-violet-100/40 dark:bg-violet-900/30">
+            <Sparkles className="size-3.5 text-violet-500 shrink-0" />
+            <span className="text-xs font-medium text-violet-600 dark:text-violet-400">
+              正在筛选相关技能
+              {streamingSkills.length > 0 && (
+                <span className="ml-1 text-violet-500/80">
+                  · 已识别 {streamingSkills.length} 个
+                </span>
+              )}
+            </span>
+            <span className="ml-auto inline-flex gap-1">
+              {[0, 1, 2].map((i) => (
+                <span
+                  key={i}
+                  className="size-1 rounded-full bg-violet-400 animate-bounce"
+                  style={{ animationDelay: `${i * 150}ms` }}
+                />
+              ))}
+            </span>
+          </div>
+
+          {/* 已识别的技能名：每个新出现的 badge 会 fade-in，给用户即时反馈 */}
+          {streamingSkills.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 px-3 py-2 border-b border-violet-200/40 dark:border-violet-900/40 bg-violet-50/40 dark:bg-violet-950/10">
+              {streamingSkills.map((name, idx) => (
+                <span
+                  key={`${name}-${idx}`}
+                  className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-mono bg-violet-100 dark:bg-violet-900/60 text-violet-700 dark:text-violet-200 animate-[skill-fade-in_0.25s_ease-out]"
+                  style={{ animationFillMode: 'both' }}
+                >
+                  <Zap className="size-2.5 shrink-0" />
+                  {name}
+                </span>
+              ))}
+            </div>
+          )}
+
+          <pre
+            ref={preRef}
+            className="text-[11px] font-mono leading-relaxed p-3 text-muted-foreground whitespace-pre-wrap max-h-52 overflow-y-auto"
+          >
+            {text}
+            <span className="inline-block w-0.5 h-3.5 bg-violet-400 ml-0.5 align-text-bottom animate-[blink_1s_step-end_infinite]" />
+          </pre>
+        </div>
+      )}
+
+      <style>{`
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50%       { opacity: 0; }
+        }
+        @keyframes skill-fade-in {
+          from { opacity: 0; transform: translateY(-2px) scale(0.95); }
+          to   { opacity: 1; transform: translateY(0) scale(1); }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts b/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts
index 798eb502..0cd2943e 100644
--- a/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts
+++ b/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts
@@ -73,6 +73,8 @@ const INITIAL_STATE: AIWritingState = {
   parsedIntent: null,
   researchProgress: '',
   skillSearchSteps: [],
+  skillSelectStreamingText: '',
+  skillSelectThinkingText: '',
   streamingReviewItems: [],
   revisionSummary: null,
   pendingRevisionContext: null,
@@ -107,7 +109,7 @@ function reducer(prev: AIWritingState, action: Action): AIWritingState {
         ...prev,
         currentPause: null,
         status: ns,
-        ...(ns === 'researching' ? { researchProgress: '', skillSearchSteps: [] } : {}),
+        ...(ns === 'researching' ? { researchProgress: '', skillSearchSteps: [], skillSelectStreamingText: '', skillSelectThinkingText: '' } : {}),
         ...(ns === 'writing_outline' ? { outlineStreamingText: '', outlineThinkingText: '' } : {}),
         ...(ns === 'writing_draft' ? { streamingDraftSections: [], streamingDraftTitle: '' } : {}),
         ...(ns === 'reviewing' ? { streamingReviewItems: [] } : {}),
@@ -196,7 +198,21 @@ function handleEvent(prev: AIWritingState, event: ProgressEvent): AIWritingState
     case 'skill_search_step': {
       const step = event.skillStep;
       if (!step) return base;
-      return { ...base, skillSearchSteps: [...prev.skillSearchSteps, step] };
+      // select_skills 步骤到达 = LLM 选择完成，清空流式打字缓冲
+      const clearStreaming = step.type === 'select_skills'
+        ? { skillSelectStreamingText: '', skillSelectThinkingText: '' }
+        : {};
+      return { ...base, skillSearchSteps: [...prev.skillSearchSteps, step], ...clearStreaming };
+    }
+
+    case 'skill_select_chunk': {
+      const text = (event as unknown as { text: string }).text ?? '';
+      const isThinking = (event as unknown as { is_thinking: boolean }).is_thinking ?? false;
+      return {
+        ...prev,
+        skillSelectStreamingText: isThinking ? prev.skillSelectStreamingText : prev.skillSelectStreamingText + text,
+        skillSelectThinkingText: isThinking ? prev.skillSelectThinkingText + text : prev.skillSelectThinkingText,
+      };
     }
 
     case 'materials_ready': {
@@ -470,7 +486,7 @@ function customToProgressEvent(raw: unknown, sessionId: string): ProgressEvent |
     'intent_chunk', 'intent_ready',
     'research_progress', 'outline_chunk', 'draft_chunk',
     'review_chunk', 'review_item_done',
-    'skill_search_step',
+    'skill_search_step', 'skill_select_chunk',
   ];
   if (!allowed.includes(type as ProgressEventType)) return null;
 
diff --git a/frontend-web/src/open-canvas/types/ai-writing.ts b/frontend-web/src/open-canvas/types/ai-writing.ts
index b1c2faa5..2a1e2936 100644
--- a/frontend-web/src/open-canvas/types/ai-writing.ts
+++ b/frontend-web/src/open-canvas/types/ai-writing.ts
@@ -157,6 +157,7 @@ export type ProgressEventType =
   | 'resumed'
   | 'notice'
   | 'skill_search_step'
+  | 'skill_select_chunk'
   | 'done'
   | 'error';
 
@@ -316,6 +317,9 @@ export interface AIWritingState {
   researchProgress: string;
   // 技能检索步骤（按发生顺序累积，pause_material 卡片里渲染时间线）
   skillSearchSteps: SkillSearchStep[];
+  // 技能选择 LLM 流式打字内容（正文 / 思考分开），select_skills 完成后清空
+  skillSelectStreamingText: string;
+  skillSelectThinkingText: string;
   // 流式审核（逐条到达）
   streamingReviewItems: StreamingReviewItem[];
   // 修改摘要
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py
index ed0b17e0..1f219e8a 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py
@@ -180,13 +180,12 @@ async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict
         skill_steps.append(step)
         writer({"type": "skill_search_step", "agent_name": "素材收集专家", **step})
 
-    async def _llm_select(system: str, user_prompt: str, fallback: dict) -> dict:
-        return await llm_json(system, user_prompt, fallback=fallback, config=config, model_name=keyword_model)
-
     if is_skill_search:
         # ── 技能编排检索 ──
+        # 技能选择走流式 LLM（推 skill_select_chunk）+ <think> 分离，前端打字机展示
         picker = SkillPicker(
-            llm_select=_llm_select,
+            config=config,
+            model_name=keyword_model,
             emit_step=_emit_skill_step,
             max_select=5,
             user_query=user_query,
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py
index 9095b94b..98c0b1c2 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py
@@ -5,10 +5,11 @@
 
 流程（对应素材确认卡上的"技能检索"按钮）：
 1) list_skills 事件 —— 列出当前启用的全部 skill
-2) select_skills 事件 —— LLM 根据用户输入 + 写作意图按相关度选出若干个
+2) skill_select_chunk 事件 —— LLM 流式打字 + <think></think> 分离（前端打字机展示）
+3) select_skills 事件 —— LLM 给出的排序结果（结构化字段，写到 SkillStepsCard 里）
 
 下游 researcher 节点拿到 selected_skills 后，**按顺序**：
-- 用 skill.description + user_query 生成针对性关键词
+- 用 skill.description + user_query 生成针对性 query
 - 调真实 web search provider 执行
 - 累积素材达到阈值就停（推 stop_early）
 """
@@ -17,16 +18,23 @@ from __future__ import annotations
 import logging
 from typing import Callable, List, Optional
 
+from langchain_core.messages import HumanMessage, SystemMessage
+from langchain_core.runnables import RunnableConfig
+
+from ..nodes._utils import (
+    ThinkTagParser,
+    _content_to_text,
+    get_model,
+    parse_json,
+    safe_get_stream_writer,
+)
+
 logger = logging.getLogger(__name__)
 
 
 _SELECT_SKILLS_SYSTEM = """你是一名情报研究员，需要从可用「技能」中挑出对当前检索任务最有帮助的若干个，并按相关度从高到低排序。
 技能是一段封装好的指令 / 知识 / 检索策略，每个技能有 name 和 description。
 
-【严禁思考】
-- 这是一个简单的匹配任务，禁止任何思考、分析、推理过程，禁止输出 <think></think> 标签。
-- 收到输入后立即直接输出最终 JSON，不得有任何前置文字。
-
 【输出要求】
 - 只输出一个 JSON 对象，不要 markdown 代码块。
 - 必须使用英文双引号。
@@ -45,33 +53,34 @@ _SELECT_SKILLS_USER = """写作意图：{user_intent}
 
 请从中按相关度从高到低选出最多 {max_select} 个技能。
 只输出 JSON：
-{{"selected_skills": ["name1", "name2"], "reason": "为什么选这些 + 排序依据"}}
-
-/no_think"""
+{{"selected_skills": ["name1", "name2"], "reason": "为什么选这些 + 排序依据"}}"""
 
 
 EmitStepFn = Callable[[dict], None]
 
 
 class SkillPicker:
-    """从启用的 Skills 中选择按相关度排序的若干个供下游编排使用。
+    """从启用的 Skills 中流式选择按相关度排序的若干个供下游编排使用。
 
     构造参数：
-      llm_select: 异步 LLM 调用 (system, user, fallback) -> dict。
-      emit_step:  可选；推送时间线步骤事件（list_skills / select_skills）。
-      max_select: LLM 单次最多挑几个技能。
-      user_query: 用户在素材确认卡输入框写的自然语言（可能包含技能名 / 来源 / 补充意图）。
+      config:     LangGraph runnable config（用于创建 model）
+      model_name: 指定使用的模型，None 则用 configurable.model_name
+      emit_step:  推送时间线步骤事件（list_skills / select_skills）
+      max_select: LLM 单次最多挑几个技能
+      user_query: 用户在素材确认卡输入框写的自然语言
     """
 
     def __init__(
         self,
-        llm_select: Callable,
+        config: RunnableConfig,
         *,
+        model_name: Optional[str] = None,
         emit_step: Optional[EmitStepFn] = None,
         max_select: int = 5,
         user_query: str = "",
     ) -> None:
-        self._llm_select = llm_select
+        self._config = config
+        self._model_name = model_name
         self._emit_step = emit_step or (lambda _step: None)
         self._max_select = max_select
         self._user_query = (user_query or "").strip()
@@ -98,7 +107,11 @@ class SkillPicker:
         return skills
 
     async def pick(self, user_intent: str) -> List[dict]:
-        """选择并排序候选技能，返回 [{skill, reason}, ...]，列表中的 skill 按相关度降序。"""
+        """流式选择并排序候选技能，返回 [{skill, reason}, ...]，按相关度降序。
+
+        过程中通过 custom 通道推送 ``skill_select_chunk`` 事件给前端打字机；
+        结束后再推一条 ``select_skills`` 结构化事件。
+        """
         skills = self._load_enabled_skills()
         if not skills:
             self._emit_step({
@@ -111,22 +124,46 @@ class SkillPicker:
         skill_list_text = "\n".join(
             f"- {s.name}: {s.description or '(无描述)'}" for s in skills
         )
+
+        fallback = {"selected_skills": [s.name for s in skills[: self._max_select]], "reason": ""}
+
+        # 流式 LLM 调用：与 intent_parser / writer_outline 同套机制
+        writer = safe_get_stream_writer()
+        parser = ThinkTagParser()
+        full_text = ""
+
+        def _emit_chunk(text: str, is_thinking: bool) -> None:
+            writer({
+                "type": "skill_select_chunk",
+                "text": text,
+                "is_thinking": is_thinking,
+                "agent_name": "素材收集专家",
+            })
+
         try:
-            result = await self._llm_select(
-                _SELECT_SKILLS_SYSTEM.format(max_select=self._max_select),
-                _SELECT_SKILLS_USER.format(
+            model = get_model(self._config, model_name=self._model_name)
+            async for chunk in model.astream([
+                SystemMessage(content=_SELECT_SKILLS_SYSTEM.format(max_select=self._max_select)),
+                HumanMessage(content=_SELECT_SKILLS_USER.format(
                     user_intent=user_intent or "(无明确写作意图)",
                     user_query=self._user_query or "(无)",
                     skill_count=len(skills),
                     skill_list=skill_list_text,
                     max_select=self._max_select,
-                ),
-                fallback={"selected_skills": [s.name for s in skills[: self._max_select]]},
-            )
+                )),
+            ]):
+                delta = _content_to_text(chunk.content)
+                if not delta:
+                    continue
+                for is_thinking, text in parser.feed(delta):
+                    if not is_thinking:
+                        full_text += text
+                    _emit_chunk(text, is_thinking)
         except Exception as e:
-            logger.exception("ai_writing.skill_search: LLM 选择技能失败")
+            logger.exception("ai_writing.skill_search: 流式选择技能失败")
             self._errors.append(f"skill select error: {e}")
-            result = {"selected_skills": [s.name for s in skills[: self._max_select]]}
+
+        result = parse_json(full_text, fallback) if full_text else fallback
 
         wanted_names = result.get("selected_skills") or []
         if not isinstance(wanted_names, list):

From 8ed3b0eb91192b3d4e53d9369ca9e4472fdae985 Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Fri, 29 May 2026 15:26:41 +0800
Subject: [PATCH 6/9] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend-web/src/components/page-sdebar.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/frontend-web/src/components/page-sdebar.css b/frontend-web/src/components/page-sdebar.css
index 29b4e477..de2edd84 100644
--- a/frontend-web/src/components/page-sdebar.css
+++ b/frontend-web/src/components/page-sdebar.css
@@ -77,6 +77,19 @@
     position: relative;
 }
 
+.item-nav-active::before {
+    content: '';
+    position: absolute;
+    right: -10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-left: 10px solid rgba(0, 98, 217, 0.45);
+    pointer-events: none;
+}
 .item-nav-active::after {
     content: '';
     position: absolute;

From 786ddaa38fadabbc4826cf1c472077a3ed8368e7 Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Fri, 29 May 2026 18:07:45 +0800
Subject: [PATCH 7/9] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend-web/src/components/page-sdebar.css   | 135 +++++++++++-----
 .../src/components/page-sidebar-dark.tsx      | 150 +++++++++---------
 .../components/ai-writing/AIWritingPanel.tsx  |  16 +-
 .../ai-writing/SkillSelectStreamingView.tsx   | 117 ++++++++------
 .../components/ai-writing/SkillStepsCard.tsx  |   4 +-
 .../src/open-canvas/types/ai-writing.ts       |   3 +-
 frontend-web/src/pages/PageRoutes.tsx         |  14 +-
 frontend-web/src/pages/WorkspaceRoutes.tsx    |  16 +-
 .../agents/ai_writing/search/skill_search.py  |  11 ++
 9 files changed, 293 insertions(+), 173 deletions(-)

diff --git a/frontend-web/src/components/page-sdebar.css b/frontend-web/src/components/page-sdebar.css
index de2edd84..f8b264dd 100644
--- a/frontend-web/src/components/page-sdebar.css
+++ b/frontend-web/src/components/page-sdebar.css
@@ -1,6 +1,16 @@
+.sidebar-contnet {
+    position: fixed;
+    left: 0;
+    top: 4rem;
+    z-index: 40;
+    width: 98px;
+    height: calc(100vh - 4rem);
+    flex-shrink: 0;
+}
+
 .sidebar-contents {
     width: 98px;
-    min-height: 986px;
+    min-height: calc(100% - 20px);
     background: rgba(3, 38, 80, 0.8);
     border: 1px solid;
     border-color: rgba(43, 143, 254, 0.6);
@@ -11,16 +21,30 @@
     align-items: center;
     padding: 12px 10px;
     position: relative;
+    height: calc(100% - 20px);
+    box-sizing: border-box;
+    transform: translate(10px, 10px);
+}
+
+.item-nav-group {
+    width: 100%;
+}
+
+.item-nav-wrap {
+    position: relative;
+    width: 100%;
+}
+
+.item-nav-group:first-child .item-nav {
+    margin-top: 0;
 }
 
 .item-nav {
     width: 100%;
     height: 70px;
-    background: #ffffff1a;
-    border-color: #fefafa4d;
     margin-top: 13px;
     font-family: Noto Sans S Chinese;
-    font-weight: 550;
+    font-weight: 500;
     color: #fff;
     font-size: 20px;
     display: flex;
@@ -35,9 +59,46 @@
     position: relative;
 }
 
-.item-nav:hover {
-    background: rgba(85, 166, 254, 0.12);
+.item-nav:hover,
+.item-nav-active,
+.item-nav-hovered {
     color: #ffffff;
+    background: linear-gradient(134.25deg,
+            rgba(0, 98, 217, 0.59) 2.28%,
+            rgba(0, 98, 217, 0.3) 99.59%) !important;
+    background-size: cover;
+    border: 1px solid;
+    border-color: rgba(255, 255, 255, 0.2);
+    position: relative;
+}
+
+.item-nav:hover::before,
+.item-nav-active::before,
+.item-nav-hovered::before {
+    content: '';
+    position: absolute;
+    right: -10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-left: 10px solid rgba(0, 98, 217, 0.45);
+    pointer-events: none;
+}
+
+.item-nav:hover::after,
+.item-nav-active::after,
+.item-nav-hovered::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 24px;
+    width: 77px;
+    height: 45px;
+    background: url('../assets/icon/nav-line-logo.svg') no-repeat;
+    background-size: cover;
 }
 
 .item-nav__label {
@@ -52,53 +113,47 @@
 
 .item-nav-content {
     width: 155px;
-    min-height: 970px;
+    height: calc(100vh - 4rem - 20px);
+    min-height: calc(100vh - 4rem - 20px);
     background: rgba(3, 38, 80, 0.8);
     border: 1px solid;
     border-color: rgba(43, 143, 254, 0.6);
     border-radius: 4px;
     backdrop-filter: blur(2px);
     position: absolute;
-    left: 97px;
+    left: 108px;
     top: 0;
     z-index: 1000;
     padding: 14px 13px 18px 16px;
     overflow-y: auto;
-}
-
-.item-nav-active {
-    color: #ffffff;
-    background: linear-gradient(134.25deg,
-            rgba(0, 98, 217, 0.59) 2.28%,
-            rgba(0, 98, 217, 0.3) 99.59%) !important;
-    background-size: cover;
-    border: 1px solid;
-    border-color: rgba(255, 255, 255, 0.2);
-    position: relative;
-}
-
-.item-nav-active::before {
-    content: '';
-    position: absolute;
-    right: -10px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 0;
-    height: 0;
-    border-top: 8px solid transparent;
-    border-bottom: 8px solid transparent;
-    border-left: 10px solid rgba(0, 98, 217, 0.45);
+    opacity: 0;
+    visibility: hidden;
     pointer-events: none;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
 }
-.item-nav-active::after {
+
+.item-nav-content::before {
     content: '';
     position: absolute;
-    left: 0;
-    top: 24px;
-    width: 77px;
-    height: 45px;
-    background: url('../assets/icon/nav-line-logo.svg') no-repeat;
-    background-size: cover;
+    left: -30px;
+    top: 0;
+    width: 30px;
+    height: 100%;
+}
+
+.item-nav-hover-bridge {
+    position: absolute;
+    right: -30px;
+    top: 0;
+    width: 30px;
+    height: 100%;
+    z-index: 999;
+}
+
+.item-nav-content--visible {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
 }
 
 .sidebar-flyout-list {
@@ -140,7 +195,7 @@
     padding: 3px 0;
     font-family: Noto Sans S Chinese;
     font-size: 18px;
-    line-height: 28px;
+    line-height: 16px;
     font-weight: 500;
     letter-spacing: 0;
     color: rgba(255, 255, 255, 0.8);
diff --git a/frontend-web/src/components/page-sidebar-dark.tsx b/frontend-web/src/components/page-sidebar-dark.tsx
index aa18608f..17238017 100644
--- a/frontend-web/src/components/page-sidebar-dark.tsx
+++ b/frontend-web/src/components/page-sidebar-dark.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { ElementType } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import {
@@ -37,18 +37,7 @@ import {
   Wrench,
 } from "lucide-react";
 
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { NotificationDialog } from "@/components/workspace/notification-dialog";
-import { SettingsDialog } from "@/components/workspace/settings";
-import { useTheme } from "@/contexts/ThemeContext";
 import { getStoredAuth } from "@/core/auth";
-import { useI18n } from "@/core/i18n/hooks";
-import { useUnreadCount } from "@/core/notifications";
 import './page-sdebar.css'
 
 type MenuItem = {
@@ -60,13 +49,6 @@ type MenuItem = {
   children?: MenuItem[];
 };
 
-type PageSidebarDarkProps = {
-  collapsed: boolean;
-  onToggleCollapsed: () => void;
-};
-
-type SettingsSection = "account" | "appearance" | "memory" | "tools" | "about";
-
 const menuItems: MenuItem[] = [
   {
     id: "qa-center",
@@ -158,9 +140,9 @@ const menuItems: MenuItem[] = [
         label: "PG中任务",
         icon: Folder,
         children: [
-          { id: "pg-task-pg", label: "任务PG", icon: ListTodo },
-          { id: "pg-task-xdpg", label: "XDPG", icon: ListTodo },
-          { id: "pg-task-info-pg", label: "信息PG", icon: ListTodo },
+          { id: "pg-task-pg", label: "任务PG", icon: ListTodo, path: "/page/strategy/task-management/effect-task-pg" },
+          { id: "pg-task-xdpg", label: "XDPG", icon: ListTodo, path: "/page/strategy/task-management/effect-action-pg" },
+          { id: "pg-task-info-pg", label: "信息PG", icon: ListTodo, path: "/page/strategy/task-management/effect-info-pg" },
         ],
       },
       {
@@ -168,9 +150,9 @@ const menuItems: MenuItem[] = [
         label: "TY中任务",
         icon: Folder,
         children: [
-          { id: "ty-task-xdty", label: "XDTY任务", icon: ListTodo },
-          { id: "ty-task-plan", label: "方案TY任务", icon: ListTodo },
-          { id: "ty-task-xxty", label: "XXTY任务", icon: ListTodo },
+          { id: "ty-task-xdty", label: "XDTY任务", icon: ListTodo, path: "/page/strategy/task-management/mnty-task-mechanism" },
+          { id: "ty-task-plan", label: "方案TY任务", icon: ListTodo, path: "/page/strategy/task-management/mnty-task-plan" },
+          { id: "ty-task-xxty", label: "XXTY任务", icon: ListTodo, path: "/page/strategy/task-management/mnty-task-zsty" },
         ],
       },
     ],
@@ -278,35 +260,49 @@ function filterMenuItemsByRole(items: MenuItem[], isAdmin: boolean): MenuItem[]
     );
 }
 
-export function PageSidebarDark({
-  collapsed,
-  onToggleCollapsed,
-}: PageSidebarDarkProps) {
-  const { theme } = useTheme();
-  const isDark = theme === "dark";
+export function PageSidebarDark() {
   const isAdmin = getStoredAuth()?.system_role === "admin";
   const visibleMenuItems = useMemo(
     () => filterMenuItemsByRole(menuItems, !!isAdmin),
     [isAdmin],
   );
-  const { t } = useI18n();
-  const { data: unreadCount = 0 } = useUnreadCount();
   const [expandedIds, setExpandedIds] = useState<Set<string>>(defaultExpandedIds);
-  const [settingsOpen, setSettingsOpen] = useState(false);
-  const [settingsDefaultSection, setSettingsDefaultSection] =
-    useState<SettingsSection>("appearance");
-  const [notificationOpen, setNotificationOpen] = useState(false);
-  const [mounted, setMounted] = useState(false);
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
+  // pathname 变化时取消任何未触发的 hover 关闭计时（cleanup 在卸载时也跑）
   useEffect(() => {
-    setMounted(true);
+    return () => {
+      if (hoverCloseTimerRef.current !== null) {
+        window.clearTimeout(hoverCloseTimerRef.current);
+      }
+    };
   }, []);
 
-  const openSettings = (section: SettingsSection) => {
-    setSettingsDefaultSection(section);
-    setSettingsOpen(true);
+  const handleNavHoverEnter = (id: string) => {
+    if (hoverCloseTimerRef.current !== null) {
+      window.clearTimeout(hoverCloseTimerRef.current);
+      hoverCloseTimerRef.current = null;
+    }
+    setHoveredTopId(id);
+  };
+
+  const scheduleNavPanelClose = () => {
+    if (hoverCloseTimerRef.current !== null) {
+      window.clearTimeout(hoverCloseTimerRef.current);
+    }
+    hoverCloseTimerRef.current = window.setTimeout(() => {
+      setHoveredTopId(null);
+      hoverCloseTimerRef.current = null;
+    }, 180);
+  };
+
+  const closeNavPanel = () => {
+    if (hoverCloseTimerRef.current !== null) {
+      window.clearTimeout(hoverCloseTimerRef.current);
+      hoverCloseTimerRef.current = null;
+    }
+    setHoveredTopId(null);
   };
 
   const hasActiveChild = (item: MenuItem): boolean => {
@@ -317,18 +313,21 @@ export function PageSidebarDark({
     return item.children?.some(hasActiveChild) ?? false;
   };
 
-  const initialActiveTopItem = visibleMenuItems.find(hasActiveChild) ?? visibleMenuItems[0];
-  const [activeTopId, setActiveTopId] = useState(initialActiveTopItem?.id ?? "qa-center");
+  // lazy init：仅在首次 render 计算一次 active id；之后由下面的 useEffect 跟随 pathname 同步
+  const [activeTopId, setActiveTopId] = useState<string>(
+    () => visibleMenuItems.find(hasActiveChild)?.id ?? visibleMenuItems[0]?.id ?? "qa-center",
+  );
+  const [hoveredTopId, setHoveredTopId] = useState<string | null>(null);
+  const hoverCloseTimerRef = useRef<number | null>(null);
 
   useEffect(() => {
     const matchedTopItem = visibleMenuItems.find(hasActiveChild);
     if (matchedTopItem) {
       setActiveTopId(matchedTopItem.id);
     }
+    closeNavPanel();
   }, [pathname, visibleMenuItems]);
 
-  const activeTopItem = visibleMenuItems.find((item) => item.id === activeTopId) ?? initialActiveTopItem;
-
   const toggleExpanded = (id: string) => {
     setExpandedIds((prev) => {
       const next = new Set(prev);
@@ -345,6 +344,7 @@ export function PageSidebarDark({
     setActiveTopId(item.id);
 
     if (!item.children?.length && item.path) {
+      closeNavPanel();
       navigate(item.path);
     }
   };
@@ -356,6 +356,7 @@ export function PageSidebarDark({
     }
 
     if (item.path) {
+      closeNavPanel();
       navigate(item.path);
     }
   };
@@ -387,34 +388,37 @@ export function PageSidebarDark({
     </div>
   );
   return (
-    <>
-      <SettingsDialog
-        open={settingsOpen}
-        onOpenChange={setSettingsOpen}
-        defaultSection={settingsDefaultSection}
-      />
-      <NotificationDialog
-        open={notificationOpen}
-        onOpenChange={setNotificationOpen}
-      />
-      {/* TODO: 在这里编写深色主题的侧边栏 HTML 结构 */}
-      <div className="sidebar-contnet">
-        <div className="sidebar-contents">
-          <div className="item-nav-content">
-            {activeTopItem?.children?.length ? renderFlyoutMenu(activeTopItem.children) : null}
+    <aside className="sidebar-contnet">
+      <div className="sidebar-contents">
+        {visibleMenuItems.map((item) => (
+          <div
+            key={item.id}
+            className="item-nav-group"
+            onMouseEnter={() => handleNavHoverEnter(item.id)}
+            onMouseLeave={scheduleNavPanelClose}
+          >
+            {item.children?.length ? (
+              <div
+                className={`item-nav-content ${hoveredTopId === item.id ? "item-nav-content--visible" : ""}`}
+              >
+                {renderFlyoutMenu(item.children)}
+              </div>
+            ) : null}
+            <div className="item-nav-wrap">
+              <button
+                type="button"
+                className={`item-nav ${item.id === activeTopId ? "item-nav-active" : ""} ${hoveredTopId === item.id ? "item-nav-hovered" : ""}`}
+                onClick={() => handleTopItemClick(item)}
+              >
+                <span className="item-nav__label">{item.label}</span>
+              </button>
+              {item.children?.length && hoveredTopId === item.id ? (
+                <span className="item-nav-hover-bridge" aria-hidden="true" />
+              ) : null}
+            </div>
           </div>
-          {visibleMenuItems.map((item) => (
-            <button
-              type="button"
-              key={item.id}
-              className={`item-nav ${item.id === activeTopId ? "item-nav-active" : ""}`}
-              onClick={() => handleTopItemClick(item)}
-            >
-              <span className="item-nav__label">{item.label}</span>
-            </button>
-          ))}
-        </div>
+        ))}
       </div>
-    </>
+    </aside>
   );
 }
diff --git a/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
index 9efa88b2..b319a573 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
@@ -448,8 +448,15 @@ export function AIWritingPanel({
           />
         )}
 
-        {/* 技能选择 LLM 流式打字（含 <think> 思考分离），select_skills 完成后自动清空 */}
-        {state.status === 'researching' && (state.skillSelectStreamingText || state.skillSelectThinkingText) && (
+        {/* 技能选择 LLM 流式打字（含 <think> 思考分离），select_skills 完成后自动清空。
+            挂载条件包含"过渡态"：已经走到 match_skills 但还没出 select_skills 时也保持挂载，
+            让首个空 chunk 一到就能立刻显示等待提示 + 闪烁光标，避免模型 buffer 期间静默。 */}
+        {state.status === 'researching' && (
+          state.skillSelectStreamingText
+            || state.skillSelectThinkingText
+            || (state.skillSearchSteps.some((s) => s.type === 'match_skills')
+                && !state.skillSearchSteps.some((s) => s.type === 'select_skills'))
+        ) && (
           <SkillSelectStreamingView
             text={state.skillSelectStreamingText}
             thinkingText={state.skillSelectThinkingText}
@@ -467,8 +474,9 @@ export function AIWritingPanel({
          state.status !== 'writing_draft' &&
          !(state.status === 'writing_outline' && (state.outlineStreamingText || state.outlineThinkingText)) &&
          !(state.status === 'reviewing' && state.streamingReviewItems.length > 0) &&
-         /* 技能检索已经在流式展示步骤 / 选择打字机，不需要再叠加 skeleton */
-         !(state.status === 'researching' && (state.skillSearchSteps.length > 0 || state.skillSelectStreamingText || state.skillSelectThinkingText)) &&
+         /* 技能检索已经在流式展示步骤 / 选择打字机 / 等待 chunk 中，不再叠加 skeleton */
+         !(state.status === 'researching' && state.skillSearchSteps.length > 0) &&
+         !(state.status === 'researching' && (state.skillSelectStreamingText || state.skillSelectThinkingText)) &&
          /* 意图解析流式过程中（LLM 还在吐 JSON）不要显示 skeleton */
          !state.intentStreamingText && !state.intentThinkingText && (
           <div className="px-4 pb-4">
diff --git a/frontend-web/src/open-canvas/components/ai-writing/SkillSelectStreamingView.tsx b/frontend-web/src/open-canvas/components/ai-writing/SkillSelectStreamingView.tsx
index ca8bd908..f1c958c0 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/SkillSelectStreamingView.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/SkillSelectStreamingView.tsx
@@ -7,25 +7,22 @@ interface SkillSelectStreamingViewProps {
 }
 
 /**
- * 从流式 JSON 文本里增量提取已经识别出的技能名。
+ * 从流式 JSON 文本里增量提取已识别的技能名（仅取**已闭合**的字符串项）。
  *
- * LLM 输出形如 `{"selected_skills": ["skill-a", "skill-b", "skill-c"], "reason": "..."}`，
- * 我们不等整段 JSON 解析完，逐字符扫描"已闭合"的双引号字符串：
- *   - 找到 `"selected_skills"`（或末尾不完整时回退兜底）后取后续内容
- *   - 在该位置之后的 `[ ... ]` 内逐个匹配 `"..."`
- *   - 只取**已闭合**的字符串（结尾必须是 `"`），确保不把正在打字的半截名字露出来
+ * LLM 输出形如 `{"selected_skills": ["skill-a", "skill-b", "skill-c"], "reason": "..."}`。
+ * 不等整段 JSON 解析完，逐字符扫描：
+ *   - 定位 `"selected_skills":\s*[`
+ *   - 在该位置后到 `]`（或文本末尾）之间逐个匹配 `"..."`
+ *   - 只取已闭合的字符串（结尾必须是 `"`），保证不显示正在打字的半截名字
  */
 function extractStreamingSkillNames(text: string): string[] {
   if (!text) return [];
-  // 定位 selected_skills 的值起点（容错：允许中英文引号 / 不同空白）
   const keyMatch = text.match(/["']?selected_skills["']?\s*:\s*\[/);
   if (!keyMatch) return [];
   const start = keyMatch.index! + keyMatch[0].length;
-  // 截取数组段（找到对应的 ]，或者文本结尾）
   const rest = text.slice(start);
   const endIdx = rest.indexOf(']');
   const arrBody = endIdx >= 0 ? rest.slice(0, endIdx) : rest;
-  // 只提取已经"闭合"的字符串：[^"\\]*(?:\\.[^"\\]*)* 处理转义引号
   const names: string[] = [];
   const re = /"((?:[^"\\]|\\.)*)"/g;
   let m: RegExpExecArray | null;
@@ -37,32 +34,46 @@ function extractStreamingSkillNames(text: string): string[] {
 }
 
 /**
- * 技能选择 LLM 流式打字机视图。
+ * 从流式 JSON 文本里提取 `reason` 字段当前已输出的内容。
  *
- * - 思考过程（<think></think> 内）用 amber 折叠面板（与 OutlineStreamingView 风格一致）
- * - 正文 JSON 用 violet 主题（与 SkillStepsCard 同色系，强调"技能"语义）
- * - 两边都自动滚动到底；正文带闪烁光标，思考过程在正文未开始时也有光标
+ * 和 skill name 不同，reason 是流式叙述文本，**未闭合也要展示**（带闪烁光标），
+ * 让用户看到 LLM 正在解释选择理由。
  */
+function extractStreamingReason(text: string): { value: string; closed: boolean } {
+  if (!text) return { value: '', closed: false };
+  // 匹配 "reason": "..." 直到下一个未转义的 " 或文本末尾
+  const m = text.match(/["']?reason["']?\s*:\s*"((?:[^"\\]|\\.)*?)("|$)/);
+  if (!m) return { value: '', closed: false };
+  const raw = m[1];
+  const closed = m[2] === '"';
+  // 反转义常见序列
+  const value = raw
+    .replace(/\\n/g, '\n')
+    .replace(/\\t/g, '\t')
+    .replace(/\\"/g, '"')
+    .replace(/\\\\/g, '\\');
+  return { value, closed };
+}
+
 export function SkillSelectStreamingView({ text, thinkingText }: SkillSelectStreamingViewProps) {
-  const preRef = useRef<HTMLPreElement>(null);
   const thinkRef = useRef<HTMLPreElement>(null);
   const [thinkOpen, setThinkOpen] = useState(true);
 
-  // 实时从流式 JSON 中增量解析出已识别的技能名
+  // 增量解析：候选技能 + 选择原因
   const streamingSkills = useMemo(() => extractStreamingSkillNames(text), [text]);
-
-  useEffect(() => {
-    if (preRef.current) preRef.current.scrollTop = preRef.current.scrollHeight;
-  }, [text]);
+  const reason = useMemo(() => extractStreamingReason(text), [text]);
 
   useEffect(() => {
     if (thinkOpen && thinkRef.current) thinkRef.current.scrollTop = thinkRef.current.scrollHeight;
   }, [thinkingText, thinkOpen]);
 
-  if (!text && !thinkingText) return null;
+  // 步骤预览始终渲染（挂载即显示），让父组件控制挂载时机；
+  // 这样首个空 chunk 到达时用户就能看到"等待模型输出"占位 + 跳动光标
+  const showStepPreview = true;
 
   return (
     <div className="px-4 pb-2 space-y-2">
+      {/* 思考过程（amber，可折叠） */}
       {thinkingText && (
         <div className="rounded-xl border border-amber-200 dark:border-amber-900 bg-amber-50/50 dark:bg-amber-950/20 overflow-hidden shadow-sm">
           <button
@@ -94,15 +105,16 @@ export function SkillSelectStreamingView({ text, thinkingText }: SkillSelectStre
         </div>
       )}
 
-      {text && (
+      {/* 步骤预览（violet，与 SkillStepsCard 的"筛选相关技能"步骤同构） */}
+      {showStepPreview && (
         <div className="rounded-xl border border-violet-200 dark:border-violet-900 bg-violet-50/50 dark:bg-violet-950/20 overflow-hidden shadow-sm">
           <div className="flex items-center gap-2 px-3 py-2 border-b border-violet-200/60 dark:border-violet-900/60 bg-violet-100/40 dark:bg-violet-900/30">
             <Sparkles className="size-3.5 text-violet-500 shrink-0" />
             <span className="text-xs font-medium text-violet-600 dark:text-violet-400">
-              正在筛选相关技能
+              筛选相关技能
               {streamingSkills.length > 0 && (
-                <span className="ml-1 text-violet-500/80">
-                  · 已识别 {streamingSkills.length} 个
+                <span className="ml-1 text-violet-500/80 font-normal">
+                  · 候选 {streamingSkills.length} 个（将按顺序使用）
                 </span>
               )}
             </span>
@@ -117,29 +129,42 @@ export function SkillSelectStreamingView({ text, thinkingText }: SkillSelectStre
             </span>
           </div>
 
-          {/* 已识别的技能名：每个新出现的 badge 会 fade-in，给用户即时反馈 */}
-          {streamingSkills.length > 0 && (
-            <div className="flex flex-wrap gap-1.5 px-3 py-2 border-b border-violet-200/40 dark:border-violet-900/40 bg-violet-50/40 dark:bg-violet-950/10">
-              {streamingSkills.map((name, idx) => (
-                <span
-                  key={`${name}-${idx}`}
-                  className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-mono bg-violet-100 dark:bg-violet-900/60 text-violet-700 dark:text-violet-200 animate-[skill-fade-in_0.25s_ease-out]"
-                  style={{ animationFillMode: 'both' }}
-                >
-                  <Zap className="size-2.5 shrink-0" />
-                  {name}
-                </span>
-              ))}
-            </div>
-          )}
+          <div className="px-3 py-2.5 space-y-2">
+            {/* 已识别的候选技能 badges */}
+            {streamingSkills.length > 0 && (
+              <div className="flex flex-wrap gap-1.5">
+                {streamingSkills.map((name, idx) => (
+                  <span
+                    key={`${name}-${idx}`}
+                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-mono bg-violet-100 dark:bg-violet-900/60 text-violet-700 dark:text-violet-200 animate-[skill-fade-in_0.25s_ease-out]"
+                    style={{ animationFillMode: 'both' }}
+                  >
+                    <Zap className="size-2.5 shrink-0" />
+                    {name}
+                  </span>
+                ))}
+              </div>
+            )}
 
-          <pre
-            ref={preRef}
-            className="text-[11px] font-mono leading-relaxed p-3 text-muted-foreground whitespace-pre-wrap max-h-52 overflow-y-auto"
-          >
-            {text}
-            <span className="inline-block w-0.5 h-3.5 bg-violet-400 ml-0.5 align-text-bottom animate-[blink_1s_step-end_infinite]" />
-          </pre>
+            {/* reason 实时文本：未闭合也展示（带光标），闭合后光标消失 */}
+            {reason.value && (
+              <div className="text-[11px] text-violet-700/85 dark:text-violet-300/85 italic leading-relaxed whitespace-pre-wrap">
+                <span className="not-italic font-medium text-violet-600 dark:text-violet-400 mr-1">原因：</span>
+                {reason.value}
+                {!reason.closed && (
+                  <span className="inline-block w-0.5 h-3 bg-violet-400 ml-0.5 align-text-bottom animate-[blink_1s_step-end_infinite]" />
+                )}
+              </div>
+            )}
+
+            {/* 还没出现任何 skill / reason 时给一个占位提示 */}
+            {!streamingSkills.length && !reason.value && (
+              <div className="text-[11px] text-muted-foreground italic flex items-center gap-1">
+                等待模型输出
+                <span className="inline-block w-0.5 h-3 bg-violet-400 align-text-bottom animate-[blink_1s_step-end_infinite]" />
+              </div>
+            )}
+          </div>
         </div>
       )}
 
diff --git a/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
index 526fedce..2f95f1fe 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ChevronRight, Sparkles, ListChecks, Zap, Loader2, CheckCircle2, CircleStop } from 'lucide-react';
+import { ChevronRight, Sparkles, ListChecks, Zap, Loader2, CheckCircle2, CircleStop, Search } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { SkillSearchStep } from '../../types/ai-writing';
 import { CollapseTransition } from './CollapseTransition';
@@ -12,6 +12,7 @@ interface SkillStepsCardProps {
 
 const STEP_ICON: Record<SkillSearchStep['type'], typeof Sparkles> = {
   list_skills: ListChecks,
+  match_skills: Search,
   select_skills: Sparkles,
   invoke_skill: Zap,
   skill_result: CheckCircle2,
@@ -20,6 +21,7 @@ const STEP_ICON: Record<SkillSearchStep['type'], typeof Sparkles> = {
 
 const STEP_LABEL: Record<SkillSearchStep['type'], string> = {
   list_skills: '列出可用技能',
+  match_skills: '分析中',
   select_skills: '筛选相关技能',
   invoke_skill: '调用技能',
   skill_result: '检索结果',
diff --git a/frontend-web/src/open-canvas/types/ai-writing.ts b/frontend-web/src/open-canvas/types/ai-writing.ts
index 2a1e2936..faa6a3c6 100644
--- a/frontend-web/src/open-canvas/types/ai-writing.ts
+++ b/frontend-web/src/open-canvas/types/ai-writing.ts
@@ -16,12 +16,13 @@ export interface AIMaterial {
 
 // 技能检索过程的单步记录（前端时间线展示"使用了 X 技能"）
 //   list_skills：列出全部 enabled 技能
+//   match_skills：进入 LLM 流式选择前的过渡提示（让用户立刻看到反馈）
 //   select_skills：LLM 按相关度排序的候选
 //   invoke_skill：开始调用某个技能去检索
 //   skill_result：某个技能检索返回了 N 条素材
 //   stop_early：累计素材达到上限，停止后续技能
 export interface SkillSearchStep {
-  type: 'list_skills' | 'select_skills' | 'invoke_skill' | 'skill_result' | 'stop_early';
+  type: 'list_skills' | 'match_skills' | 'select_skills' | 'invoke_skill' | 'skill_result' | 'stop_early';
   message: string;
   skillNames?: string[];
   skillName?: string;
diff --git a/frontend-web/src/pages/PageRoutes.tsx b/frontend-web/src/pages/PageRoutes.tsx
index c748e18f..e88e6562 100644
--- a/frontend-web/src/pages/PageRoutes.tsx
+++ b/frontend-web/src/pages/PageRoutes.tsx
@@ -24,10 +24,7 @@ function PageLayout() {
       <div className="flex flex-1 overflow-hidden">
         {sidebarEnabled && (
           isDark ? (
-            <PageSidebarDark
-              collapsed={collapsed}
-              onToggleCollapsed={() => setCollapsed((prev) => !prev)}
-            />
+            <PageSidebarDark />
           ) : (
             <PageSidebar
               collapsed={collapsed}
@@ -37,7 +34,13 @@ function PageLayout() {
         )}
         <main
           className={`flex-1 overflow-hidden transition-[padding] duration-300 ${
-            !sidebarEnabled ? "" : collapsed ? "pl-16" : "pl-64"
+            !sidebarEnabled
+              ? ""
+              : isDark
+                ? "pl-[118px]"
+                : collapsed
+                  ? "pl-16"
+                  : "pl-64"
           }`}
         >
           <Routes>
@@ -50,6 +53,7 @@ function PageLayout() {
                   pageSidebarHidden={!sidebarEnabled}
                   headerHidden={!sidebarEnabled}
                   compactWorkspaceSidebar={sidebarEnabled}
+                  pageSidebarDark={isDark}
                 />
               }
             />
diff --git a/frontend-web/src/pages/WorkspaceRoutes.tsx b/frontend-web/src/pages/WorkspaceRoutes.tsx
index 9c111b62..08b7181d 100644
--- a/frontend-web/src/pages/WorkspaceRoutes.tsx
+++ b/frontend-web/src/pages/WorkspaceRoutes.tsx
@@ -47,18 +47,25 @@ export function WorkspaceLayout({
   pageSidebarHidden = false,
   headerHidden = false,
   compactWorkspaceSidebar = false,
+  pageSidebarDark = false,
 }: {
   children: ReactNode;
   pageSidebarCollapsed: boolean;
   pageSidebarHidden?: boolean;
   headerHidden?: boolean;
   compactWorkspaceSidebar?: boolean;
+  pageSidebarDark?: boolean;
 }) {
   const pageSidebarWidth = pageSidebarHidden
     ? "0rem"
-    : pageSidebarCollapsed
-      ? "4rem"
-      : "16rem";
+    : pageSidebarDark
+      // dark page sidebar 视觉右边界是 108px（外框 98 + 内层 translateX 10），
+      // 再 +10px gap 让 workspace sidebar 跟它之间留一条间隔；
+      // 与 PageRoutes.tsx 的 main pl-[118px] 保持一致
+      ? "118px"
+      : pageSidebarCollapsed
+        ? "4rem"
+        : "16rem";
 
   return (
     <SidebarProvider
@@ -97,17 +104,20 @@ export default function WorkspaceRoutes({
   pageSidebarHidden = false,
   headerHidden = false,
   compactWorkspaceSidebar = false,
+  pageSidebarDark = false,
 }: {
   pageSidebarCollapsed?: boolean;
   pageSidebarHidden?: boolean;
   headerHidden?: boolean;
   compactWorkspaceSidebar?: boolean;
+  pageSidebarDark?: boolean;
 }) {
   const layoutProps = {
     pageSidebarCollapsed,
     pageSidebarHidden,
     headerHidden,
     compactWorkspaceSidebar,
+    pageSidebarDark,
   };
 
   return (
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py
index 98c0b1c2..1b4ea6e0 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/skill_search.py
@@ -127,6 +127,13 @@ class SkillPicker:
 
         fallback = {"selected_skills": [s.name for s in skills[: self._max_select]], "reason": ""}
 
+        # list_skills 之后立刻发一个"分析中"提示步骤，避免 LLM 第一个 chunk 到来前
+        # 用户看到空窗期（某些模型 astream 在头部 buffer 时间较长）
+        self._emit_step({
+            "type": "match_skills",
+            "message": "正在让模型从候选技能中筛选最合适的…",
+        })
+
         # 流式 LLM 调用：与 intent_parser / writer_outline 同套机制
         writer = safe_get_stream_writer()
         parser = ThinkTagParser()
@@ -140,6 +147,10 @@ class SkillPicker:
                 "agent_name": "素材收集专家",
             })
 
+        # 立刻推一个空 chunk，让前端 streaming view 立即挂载（占位 + 闪烁光标），
+        # 即使后续 LLM 首个 chunk 到达较慢，UI 也不再静默
+        _emit_chunk("", False)
+
         try:
             model = get_model(self._config, model_name=self._model_name)
             async for chunk in model.astream([

From c890ae5a1570e438b5a42e4f5e60d1ee34e902b9 Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Fri, 29 May 2026 18:17:08 +0800
Subject: [PATCH 8/9] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/page-sidebar-dark.tsx      | 267 +--------------
 frontend-web/src/components/page-sidebar.tsx  | 311 +----------------
 .../src/core/page-layout/sidebar-menu.ts      | 316 ++++++++++++++++++
 3 files changed, 334 insertions(+), 560 deletions(-)
 create mode 100644 frontend-web/src/core/page-layout/sidebar-menu.ts

diff --git a/frontend-web/src/components/page-sidebar-dark.tsx b/frontend-web/src/components/page-sidebar-dark.tsx
index 17238017..c9dc31c3 100644
--- a/frontend-web/src/components/page-sidebar-dark.tsx
+++ b/frontend-web/src/components/page-sidebar-dark.tsx
@@ -1,272 +1,23 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import type { ElementType } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import {
-  Bell,
-  Bot,
-  Brain,
-  CalendarClock,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsUpDown,
-  CircleHelp,
-  Database,
-  FileBox,
-  FileText,
-  Folder,
-  FolderOpen,
-  Gauge,
-  Grid3X3,
-  HelpCircle,
-  History,
-  Layout,
-  Library,
-  List,
-  ListChecks,
-  ListTodo,
-  MessageSquareCode,
-  MessageSquarePlus,
-  Network,
-  NotebookPen,
-  Plus,
-  Settings,
-  Sparkles,
-  Target,
-  User,
-  Users,
-  Wrench,
-} from "lucide-react";
 
 import { getStoredAuth } from "@/core/auth";
+import {
+  defaultExpandedIds,
+  filterMenuItemsByRole,
+  sidebarMenuItems,
+  type MenuItem,
+} from "@/core/page-layout/sidebar-menu";
 import './page-sdebar.css'
 
-type MenuItem = {
-  id: string;
-  label: string;
-  icon: ElementType;
-  path?: string;
-  adminOnly?: boolean;
-  children?: MenuItem[];
-};
-
-const menuItems: MenuItem[] = [
-  {
-    id: "qa-center",
-    label: "问答中心",
-    icon: HelpCircle,
-    children: [
-      { id: "general-qa", label: "通用问答", icon: CircleHelp, path: "/page/workspace/chats/new" },
-      { id: "expert-qa", label: "专家问答", icon: Brain, path: "/page/strategy/qa/expert-qa" },
-      { id: "qa-zzjc", label: "zzjc支持", icon: Bot },
-      { id: "qa-zzxd", label: "zzXD应用", icon: Layout },
-      { id: "qa-research", label: "课题研究", icon: FileText, path: "/page/canvas/ai-writing" },
-    ],
-  },
-  {
-    id: "light-app-center",
-    label: "轻应用",
-    icon: Grid3X3,
-    children: [
-      {
-        id: "light-app-note-management",
-        label: "笔记管理",
-        icon: NotebookPen,
-        children: [
-          {
-            id: "light-app-new-note",
-            label: "新建笔记",
-            icon: Plus,
-            path: "/page/strategy/light-app/new-note",
-          },
-          {
-            id: "light-app-note-list",
-            label: "笔记列表",
-            icon: List,
-            path: "/page/strategy/light-app/notes",
-          },
-          {
-            id: "light-app-note-qa",
-            label: "笔记问答",
-            icon: MessageSquareCode,
-            path: "/page/strategy/light-app/note-qa",
-          },
-        ],
-      },
-      { id: "light-app-square", label: "应用广场", icon: Layout },
-      { id: "light-app-records", label: "运行记录", icon: History },
-    ],
-  },
-  {
-    id: "task-management",
-    label: "任务管理",
-    icon: Target,
-    children: [
-      {
-        id: "xk-center-task",
-        label: "XK中任务",
-        icon: Folder,
-        children: [
-          { id: "xk-task-jc", label: "任务JC", icon: ListTodo, path: "/page/strategy/task-management/xk-task-jc" },
-          { id: "xk-task-dispatch", label: "任务调度", icon: ListTodo, path: "/page/strategy/task-management/xk-task-dispatch" },
-        ],
-      },
-      {
-        id: "coh-center-task",
-        label: "COH中任务",
-        icon: Folder,
-        children: [
-          {
-            id: "coh-task-3qfx",
-            label: "3QFX",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/plan-task-sentiment",
-          },
-          {
-            id: "coh-task-fx",
-            label: "任务FX",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/plan-task/plan-task-fx",
-          },
-          {
-            id: "coh-task-xdfx",
-            label: "XDFX",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/plan-task/plan-task-action",
-          },
-        ],
-      },
-      {
-        id: "pg-center-task",
-        label: "PG中任务",
-        icon: Folder,
-        children: [
-          { id: "pg-task-pg", label: "任务PG", icon: ListTodo, path: "/page/strategy/task-management/effect-task-pg" },
-          { id: "pg-task-xdpg", label: "XDPG", icon: ListTodo, path: "/page/strategy/task-management/effect-action-pg" },
-          { id: "pg-task-info-pg", label: "信息PG", icon: ListTodo, path: "/page/strategy/task-management/effect-info-pg" },
-        ],
-      },
-      {
-        id: "ty-center-task",
-        label: "TY中任务",
-        icon: Folder,
-        children: [
-          { id: "ty-task-xdty", label: "XDTY任务", icon: ListTodo, path: "/page/strategy/task-management/mnty-task-mechanism" },
-          { id: "ty-task-plan", label: "方案TY任务", icon: ListTodo, path: "/page/strategy/task-management/mnty-task-plan" },
-          { id: "ty-task-xxty", label: "XXTY任务", icon: ListTodo, path: "/page/strategy/task-management/mnty-task-zsty" },
-        ],
-      },
-    ],
-  },
-  {
-    id: "comprehensive-management",
-    label: "综合管理",
-    icon: Settings,
-    children: [
-      { id: "mgmt-agents", label: "智能体管理", icon: Bot, path: "/page/strategy/agents" },
-      { id: "mgmt-skills", label: "技能管理", icon: Sparkles, path: "/page/strategy/skills" },
-      { id: "mgmt-memory", label: "记忆管理", icon: Brain, path: "/page/strategy/memory" },
-      {
-        id: "mgmt-tasks",
-        label: "任务管理",
-        icon: ListChecks,
-        path: "/page/strategy/scheduled/tasks",
-      },
-      {
-        id: "mgmt-recommended-questions",
-        label: "推荐问题配置",
-        icon: MessageSquarePlus,
-        path: "/page/strategy/settings/recommended-questions",
-        adminOnly: true,
-      },
-      {
-        id: "mgmt-prompt-prefix",
-        label: "问答前缀配置",
-        icon: MessageSquareCode,
-        path: "/page/strategy/settings/prompt-prefix",
-        adminOnly: true,
-      },
-      {
-        id: "mgmt-llm-metrics",
-        label: "大模型调用统计",
-        icon: Gauge,
-        path: "/page/strategy/settings/llm-metrics",
-        adminOnly: true,
-      },
-      {
-        id: "mgmt-users",
-        label: "用户管理",
-        icon: Users,
-        path: "/page/strategy/admin/users",
-        adminOnly: true,
-      },
-      {
-        id: "mgmt-admin-scheduled-tasks",
-        label: "定时任务管理",
-        icon: CalendarClock,
-        path: "/page/strategy/admin/scheduled-tasks",
-        adminOnly: true,
-      },
-      {
-        id: "mgmt-user-activity",
-        label: "用户活动审计",
-        icon: History,
-        path: "/page/strategy/admin/user-activity",
-        adminOnly: true,
-      },
-    ],
-  },
-  {
-    id: "resource-management",
-    label: "资源管理",
-    icon: Database,
-    children: [
-      {
-        id: "resource-network-xwt",
-        label: "网络xwt资源管理",
-        icon: Network,
-        path: "/page/strategy/resource-management/resource-network-actor",
-      },
-      {
-        id: "resource-knowledge-base",
-        label: "知识库资源管理",
-        icon: Library,
-        path: "/page/strategy/resource-management/resource-knowledge-base",
-      },
-      {
-        id: "resource-evaluation-index",
-        label: "作战资源管理",
-        icon: FileBox,
-        path: "/page/strategy/resource-management/resource-evaluation-index",
-      },
-    ],
-  },
-];
-
-const defaultExpandedIds = new Set([
-  "qa-center",
-  "light-app-center",
-  "light-app-note-management",
-  "task-management",
-  "xk-center-task",
-]);
-
-function filterMenuItemsByRole(items: MenuItem[], isAdmin: boolean): MenuItem[] {
-  return items
-    .filter((item) => !item.adminOnly || isAdmin)
-    .map((item) =>
-      item.children
-        ? { ...item, children: filterMenuItemsByRole(item.children, isAdmin) }
-        : item,
-    );
-}
-
 export function PageSidebarDark() {
   const isAdmin = getStoredAuth()?.system_role === "admin";
   const visibleMenuItems = useMemo(
-    () => filterMenuItemsByRole(menuItems, !!isAdmin),
+    () => filterMenuItemsByRole(sidebarMenuItems, !!isAdmin),
     [isAdmin],
   );
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(defaultExpandedIds);
+  // defaultExpandedIds 是共享的 ReadonlySet，复制一份给 useState（避免外部突变）
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => new Set(defaultExpandedIds));
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
diff --git a/frontend-web/src/components/page-sidebar.tsx b/frontend-web/src/components/page-sidebar.tsx
index 11dec345..10512957 100644
--- a/frontend-web/src/components/page-sidebar.tsx
+++ b/frontend-web/src/components/page-sidebar.tsx
@@ -1,40 +1,14 @@
 import { useEffect, useState } from "react";
-import type { ElementType } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import {
   Bell,
-  Bot,
-  Brain,
-  CalendarClock,
   ChevronLeft,
   ChevronRight,
   ChevronsUpDown,
-  CircleHelp,
-  Database,
-  FileBox,
-  FileText,
   Folder,
   FolderOpen,
-  Gauge,
-  Grid3X3,
-  HelpCircle,
-  History,
-  Layout,
-  Library,
-  List,
-  ListChecks,
-  ListTodo,
-  MessageSquareCode,
-  MessageSquarePlus,
-  ShieldCheck,
-  Network,
-  NotebookPen,
-  Plus,
   Settings,
-  Sparkles,
-  Target,
   User,
-  Users,
   Wrench,
 } from "lucide-react";
 
@@ -50,14 +24,12 @@ import { useTheme } from "@/contexts/ThemeContext";
 import { getStoredAuth } from "@/core/auth";
 import { useI18n } from "@/core/i18n/hooks";
 import { useUnreadCount } from "@/core/notifications";
-type MenuItem = {
-  id: string;
-  label: string;
-  icon: ElementType;
-  path?: string;
-  adminOnly?: boolean;
-  children?: MenuItem[];
-};
+import {
+  defaultExpandedIds,
+  filterMenuItemsByRole,
+  sidebarMenuItems,
+  type MenuItem,
+} from "@/core/page-layout/sidebar-menu";
 
 type PageSidebarProps = {
   collapsed: boolean;
@@ -66,272 +38,6 @@ type PageSidebarProps = {
 
 type SettingsSection = "account" | "appearance" | "memory" | "tools" | "about";
 
-const menuItems: MenuItem[] = [
-  {
-    id: "qa-center",
-    label: "问答中心",
-    icon: HelpCircle,
-    children: [
-      { id: "general-qa", label: "通用问答", icon: CircleHelp, path: "/page/workspace/chats/new" },
-      { id: "expert-qa", label: "专家问答", icon: Brain, path: "/page/strategy/qa/expert-qa" },
-      // 「圆桌规划」入口暂时隐藏 —— 功能仍在 /page/roundtable/planning,只是不在侧边栏出现。
-      // 需要重新开放时取消注释即可。
-      // {
-      //   id: "qa-roundtable",
-      //   label: "圆桌规划",
-      //   icon: Bot,
-      //   path: "/page/roundtable/planning",
-      // },
-      { id: "qa-zzjc", label: "zzjc支持", icon: Bot },
-      { id: "qa-zzxd", label: "zzXD应用", icon: Layout },
-      { id: "qa-research", label: "课题研究", icon: FileText, path: "/page/canvas/ai-writing" },
-    ],
-  },
-  {
-    id: "light-app-center",
-    label: "轻应用",
-    icon: Grid3X3,
-    children: [
-      {
-        id: "light-app-note-management",
-        label: "笔记管理",
-        icon: NotebookPen,
-        children: [
-          {
-            id: "light-app-new-note",
-            label: "新建笔记",
-            icon: Plus,
-            path: "/page/strategy/light-app/new-note",
-          },
-          {
-            id: "light-app-note-list",
-            label: "笔记列表",
-            icon: List,
-            path: "/page/strategy/light-app/notes",
-          },
-          {
-            id: "light-app-note-qa",
-            label: "笔记问答",
-            icon: MessageSquareCode,
-            path: "/page/strategy/light-app/note-qa",
-          },
-        ],
-      },
-      { id: "light-app-square", label: "应用广场", icon: Layout },
-      { id: "light-app-records", label: "运行记录", icon: History },
-    ],
-  },
-  {
-    id: "task-management",
-    label: "任务管理",
-    icon: Target,
-    children: [
-      {
-        id: "xk-center-task",
-        label: "XK中任务",
-        icon: Folder,
-        children: [
-          {
-            id: "xk-task-jc",
-            label: "任务JC",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/xk-task-jc",
-          },
-          {
-            id: "xk-task-dispatch",
-            label: "任务调度",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/xk-task-dispatch",
-          },
-        ],
-      },
-      {
-        id: "coh-center-task",
-        label: "COH中任务",
-        icon: Folder,
-        children: [
-          {
-            id: "coh-task-3qfx",
-            label: "3QFX",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/plan-task-sentiment",
-          },
-          {
-            id: "coh-task-fx",
-            label: "任务FX",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/plan-task/plan-task-fx",
-          },
-          {
-            id: "coh-task-xdfx",
-            label: "XDFX",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/plan-task/plan-task-action",
-          },
-        ],
-      },
-      {
-        id: "pg-center-task",
-        label: "PG中任务",
-        icon: Folder,
-        children: [
-          {
-            id: "pg-task-pg",
-            label: "任务PG",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/effect-task-pg",
-          },
-          {
-            id: "pg-task-xdpg",
-            label: "XDPG",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/effect-action-pg",
-          },
-          {
-            id: "pg-task-info-pg",
-            label: "信息PG",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/effect-info-pg",
-          },
-        ],
-      },
-      {
-        id: "ty-center-task",
-        label: "TY中任务",
-        icon: Folder,
-        children: [
-          {
-            id: "ty-task-xdty",
-            label: "XDTY任务",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/mnty-task-mechanism",
-          },
-          {
-            id: "ty-task-plan",
-            label: "方案TY任务",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/mnty-task-plan",
-          },
-          {
-            id: "ty-task-xxty",
-            label: "XXTY任务",
-            icon: ListTodo,
-            path: "/page/strategy/task-management/mnty-task-zsty",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "comprehensive-management",
-    label: "综合管理",
-    icon: Settings,
-    children: [
-      { id: "mgmt-agents", label: "智能体管理", icon: Bot, path: "/page/strategy/agents" },
-      { id: "mgmt-skills", label: "技能管理", icon: Sparkles, path: "/page/strategy/skills" },
-      { id: "mgmt-memory", label: "记忆管理", icon: Brain, path: "/page/strategy/memory" },
-      {
-        id: "mgmt-tasks",
-        label: "定时任务",
-        icon: ListChecks,
-        path: "/page/strategy/scheduled/tasks",
-      },
-      {
-        id: "mgmt-recommended-questions",
-        label: "推荐问题配置",
-        icon: MessageSquarePlus,
-        path: "/page/strategy/settings/recommended-questions",
-        adminOnly: true,
-      },
-      {
-        id: "mgmt-prompt-prefix",
-        label: "问答前缀配置",
-        icon: MessageSquareCode,
-        path: "/page/strategy/settings/prompt-prefix",
-        adminOnly: true,
-      },
-      {
-        id: "mgmt-private-square",
-        label: "私密广场配置",
-        icon: ShieldCheck,
-        path: "/page/strategy/settings/private-square",
-        adminOnly: true,
-      },
-      {
-        id: "mgmt-llm-metrics",
-        label: "大模型调用统计",
-        icon: Gauge,
-        path: "/page/strategy/settings/llm-metrics",
-        adminOnly: true,
-      },
-      {
-        id: "mgmt-users",
-        label: "用户管理",
-        icon: Users,
-        path: "/page/strategy/admin/users",
-        adminOnly: true,
-      },
-      {
-        id: "mgmt-admin-scheduled-tasks",
-        label: "定时任务管理",
-        icon: CalendarClock,
-        path: "/page/strategy/admin/scheduled-tasks",
-        adminOnly: true,
-      },
-      {
-        id: "mgmt-user-activity",
-        label: "用户活动审计",
-        icon: History,
-        path: "/page/strategy/admin/user-activity",
-        adminOnly: true,
-      },
-    ],
-  },
-  {
-    id: "resource-management",
-    label: "资源管理",
-    icon: Database,
-    children: [
-      {
-        id: "resource-network-xwt",
-        label: "网络xwt资源管理",
-        icon: Network,
-        path: "/page/strategy/resource-management/resource-network-actor",
-      },
-      {
-        id: "resource-knowledge-base",
-        label: "知识库资源管理",
-        icon: Library,
-        path: "/page/strategy/resource-management/resource-knowledge-base",
-      },
-      {
-        id: "resource-evaluation-index",
-        label: "作战资源管理",
-        icon: FileBox,
-        path: "/page/strategy/resource-management/resource-evaluation-index",
-      },
-    ],
-  },
-];
-
-const defaultExpandedIds = new Set([
-  "qa-center",
-  "light-app-center",
-  "light-app-note-management",
-  "task-management",
-  "xk-center-task",
-]);
-
-function filterMenuItemsByRole(items: MenuItem[], isAdmin: boolean): MenuItem[] {
-  return items
-    .filter((item) => !item.adminOnly || isAdmin)
-    .map((item) =>
-      item.children
-        ? { ...item, children: filterMenuItemsByRole(item.children, isAdmin) }
-        : item,
-    );
-}
-
 export function PageSidebar({
   collapsed,
   onToggleCollapsed,
@@ -339,10 +45,11 @@ export function PageSidebar({
   const { theme } = useTheme();
   const isDark = theme === "dark";
   const isAdmin = getStoredAuth()?.system_role === "admin";
-  const visibleMenuItems = filterMenuItemsByRole(menuItems, !!isAdmin);
+  const visibleMenuItems = filterMenuItemsByRole(sidebarMenuItems, !!isAdmin);
   const { t } = useI18n();
   const { data: unreadCount = 0 } = useUnreadCount();
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(defaultExpandedIds);
+  // defaultExpandedIds 是共享的 ReadonlySet，复制一份给 useState（避免外部突变）
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => new Set(defaultExpandedIds));
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsDefaultSection, setSettingsDefaultSection] =
     useState<SettingsSection>("appearance");
diff --git a/frontend-web/src/core/page-layout/sidebar-menu.ts b/frontend-web/src/core/page-layout/sidebar-menu.ts
new file mode 100644
index 00000000..446d6be8
--- /dev/null
+++ b/frontend-web/src/core/page-layout/sidebar-menu.ts
@@ -0,0 +1,316 @@
+/**
+ * 全局侧边栏菜单数据与权限过滤逻辑。
+ *
+ * 浅色 ``PageSidebar`` 和深色 ``PageSidebarDark`` 共用这份数据 —— 菜单结构与
+ * adminOnly 权限策略对两种皮肤完全一致；UI 渲染（icon 显示/折叠样式/hover flyout）
+ * 在各自组件里实现。
+ *
+ * 修改菜单只需改这一处，两个 sidebar 自动同步。
+ */
+import type { ElementType } from "react";
+import {
+  Bot,
+  Brain,
+  CalendarClock,
+  CircleHelp,
+  Database,
+  FileBox,
+  FileText,
+  Folder,
+  Gauge,
+  Grid3X3,
+  HelpCircle,
+  History,
+  Layout,
+  Library,
+  List,
+  ListChecks,
+  ListTodo,
+  MessageSquareCode,
+  MessageSquarePlus,
+  Network,
+  NotebookPen,
+  Plus,
+  Settings,
+  ShieldCheck,
+  Sparkles,
+  Target,
+  Users,
+} from "lucide-react";
+
+export type MenuItem = {
+  id: string;
+  label: string;
+  icon: ElementType;
+  path?: string;
+  adminOnly?: boolean;
+  children?: MenuItem[];
+};
+
+export const sidebarMenuItems: MenuItem[] = [
+  {
+    id: "qa-center",
+    label: "问答中心",
+    icon: HelpCircle,
+    children: [
+      { id: "general-qa", label: "通用问答", icon: CircleHelp, path: "/page/workspace/chats/new" },
+      { id: "expert-qa", label: "专家问答", icon: Brain, path: "/page/strategy/qa/expert-qa" },
+      // 「圆桌规划」入口暂时隐藏 —— 功能仍在 /page/roundtable/planning,只是不在侧边栏出现。
+      // 需要重新开放时取消注释即可。
+      // {
+      //   id: "qa-roundtable",
+      //   label: "圆桌规划",
+      //   icon: Bot,
+      //   path: "/page/roundtable/planning",
+      // },
+      { id: "qa-zzjc", label: "zzjc支持", icon: Bot },
+      { id: "qa-zzxd", label: "zzXD应用", icon: Layout },
+      { id: "qa-research", label: "课题研究", icon: FileText, path: "/page/canvas/ai-writing" },
+    ],
+  },
+  {
+    id: "light-app-center",
+    label: "轻应用",
+    icon: Grid3X3,
+    children: [
+      {
+        id: "light-app-note-management",
+        label: "笔记管理",
+        icon: NotebookPen,
+        children: [
+          {
+            id: "light-app-new-note",
+            label: "新建笔记",
+            icon: Plus,
+            path: "/page/strategy/light-app/new-note",
+          },
+          {
+            id: "light-app-note-list",
+            label: "笔记列表",
+            icon: List,
+            path: "/page/strategy/light-app/notes",
+          },
+          {
+            id: "light-app-note-qa",
+            label: "笔记问答",
+            icon: MessageSquareCode,
+            path: "/page/strategy/light-app/note-qa",
+          },
+        ],
+      },
+      { id: "light-app-square", label: "应用广场", icon: Layout },
+      { id: "light-app-records", label: "运行记录", icon: History },
+    ],
+  },
+  {
+    id: "task-management",
+    label: "任务管理",
+    icon: Target,
+    children: [
+      {
+        id: "xk-center-task",
+        label: "XK中任务",
+        icon: Folder,
+        children: [
+          {
+            id: "xk-task-jc",
+            label: "任务JC",
+            icon: ListTodo,
+            path: "/page/strategy/task-management/xk-task-jc",
+          },
+          {
+            id: "xk-task-dispatch",
+            label: "任务调度",
+            icon: ListTodo,
+            path: "/page/strategy/task-management/xk-task-dispatch",
+          },
+        ],
+      },
+      {
+        id: "coh-center-task",
+        label: "COH中任务",
+        icon: Folder,
+        children: [
+          {
+            id: "coh-task-3qfx",
+            label: "3QFX",
+            icon: ListTodo,
+            path: "/page/strategy/task-management/plan-task-sentiment",
+          },
+          {
+            id: "coh-task-fx",
+            label: "任务FX",
+            icon: ListTodo,
+            path: "/page/strategy/task-management/plan-task/plan-task-fx",
+          },
+          {
+            id: "coh-task-xdfx",
+            label: "XDFX",
+            icon: ListTodo,
+            path: "/page/strategy/task-management/plan-task/plan-task-action",
+          },
+        ],
+      },
+      {
+        id: "pg-center-task",
+        label: "PG中任务",
+        icon: Folder,
+        children: [
+          {
+            id: "pg-task-pg",
+            label: "任务PG",
+            icon: ListTodo,
+            path: "/page/strategy/task-management/effect-task-pg",
+          },
+          {
+            id: "pg-task-xdpg",
+            label: "XDPG",
+            icon: ListTodo,
+            path: "/page/strategy/task-management/effect-action-pg",
+          },
+          {
+            id: "pg-task-info-pg",
+            label: "信息PG",
+            icon: ListTodo,
+            path: "/page/strategy/task-management/effect-info-pg",
+          },
+        ],
+      },
+      {
+        id: "ty-center-task",
+        label: "TY中任务",
+        icon: Folder,
+        children: [
+          {
+            id: "ty-task-xdty",
+            label: "XDTY任务",
+            icon: ListTodo,
+            path: "/page/strategy/task-management/mnty-task-mechanism",
+          },
+          {
+            id: "ty-task-plan",
+            label: "方案TY任务",
+            icon: ListTodo,
+            path: "/page/strategy/task-management/mnty-task-plan",
+          },
+          {
+            id: "ty-task-xxty",
+            label: "XXTY任务",
+            icon: ListTodo,
+            path: "/page/strategy/task-management/mnty-task-zsty",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "comprehensive-management",
+    label: "综合管理",
+    icon: Settings,
+    children: [
+      { id: "mgmt-agents", label: "智能体管理", icon: Bot, path: "/page/strategy/agents" },
+      { id: "mgmt-skills", label: "技能管理", icon: Sparkles, path: "/page/strategy/skills" },
+      { id: "mgmt-memory", label: "记忆管理", icon: Brain, path: "/page/strategy/memory" },
+      {
+        id: "mgmt-tasks",
+        label: "定时任务",
+        icon: ListChecks,
+        path: "/page/strategy/scheduled/tasks",
+      },
+      {
+        id: "mgmt-recommended-questions",
+        label: "推荐问题配置",
+        icon: MessageSquarePlus,
+        path: "/page/strategy/settings/recommended-questions",
+        adminOnly: true,
+      },
+      {
+        id: "mgmt-prompt-prefix",
+        label: "问答前缀配置",
+        icon: MessageSquareCode,
+        path: "/page/strategy/settings/prompt-prefix",
+        adminOnly: true,
+      },
+      {
+        id: "mgmt-private-square",
+        label: "私密广场配置",
+        icon: ShieldCheck,
+        path: "/page/strategy/settings/private-square",
+        adminOnly: true,
+      },
+      {
+        id: "mgmt-llm-metrics",
+        label: "大模型调用统计",
+        icon: Gauge,
+        path: "/page/strategy/settings/llm-metrics",
+        adminOnly: true,
+      },
+      {
+        id: "mgmt-users",
+        label: "用户管理",
+        icon: Users,
+        path: "/page/strategy/admin/users",
+        adminOnly: true,
+      },
+      {
+        id: "mgmt-admin-scheduled-tasks",
+        label: "定时任务管理",
+        icon: CalendarClock,
+        path: "/page/strategy/admin/scheduled-tasks",
+        adminOnly: true,
+      },
+      {
+        id: "mgmt-user-activity",
+        label: "用户活动审计",
+        icon: History,
+        path: "/page/strategy/admin/user-activity",
+        adminOnly: true,
+      },
+    ],
+  },
+  {
+    id: "resource-management",
+    label: "资源管理",
+    icon: Database,
+    children: [
+      {
+        id: "resource-network-xwt",
+        label: "网络xwt资源管理",
+        icon: Network,
+        path: "/page/strategy/resource-management/resource-network-actor",
+      },
+      {
+        id: "resource-knowledge-base",
+        label: "知识库资源管理",
+        icon: Library,
+        path: "/page/strategy/resource-management/resource-knowledge-base",
+      },
+      {
+        id: "resource-evaluation-index",
+        label: "作战资源管理",
+        icon: FileBox,
+        path: "/page/strategy/resource-management/resource-evaluation-index",
+      },
+    ],
+  },
+];
+
+/** 默认展开的菜单 id 集合（浅色版可折叠交互的初始状态） */
+export const defaultExpandedIds: ReadonlySet<string> = new Set([
+  "qa-center",
+  "light-app-center",
+  "light-app-note-management",
+  "task-management",
+  "xk-center-task",
+]);
+
+/** 按 admin 角色过滤菜单：非 admin 不展示 ``adminOnly: true`` 的项及其子项 */
+export function filterMenuItemsByRole(items: MenuItem[], isAdmin: boolean): MenuItem[] {
+  return items
+    .filter((item) => !item.adminOnly || isAdmin)
+    .map((item) =>
+      item.children
+        ? { ...item, children: filterMenuItemsByRole(item.children, isAdmin) }
+        : item,
+    );
+}

From 27cfd53c062f579d2850bbcc5609784875970706 Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Fri, 29 May 2026 20:16:41 +0800
Subject: [PATCH 9/9] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend-web/src/components/page-sdebar.css   | 86 ++++++++++++++++++-
 .../src/components/page-sidebar-dark.tsx      | 66 +++++++++++++-
 frontend-web/src/core/auth/external-login.ts  | 57 ++++++++++++
 .../src/core/page-layout/sidebar-menu.ts      | 68 +++++++--------
 .../components/ai-writing/AIWritingPanel.tsx  |  9 +-
 .../ai-writing/MaterialsToolbar.tsx           |  2 +-
 .../components/ai-writing/SkillStepsCard.tsx  | 23 ++++-
 .../open-canvas/hooks/useAIWritingStream.ts   |  8 +-
 .../src/open-canvas/types/ai-writing.ts       |  3 +
 frontend-web/src/pages/LoginPage.tsx          | 28 ++++++
 frontend-web/src/pages/PageRoutes.tsx         | 17 ++--
 frontend-web/src/pages/WorkspaceRoutes.tsx    | 10 ++-
 12 files changed, 321 insertions(+), 56 deletions(-)
 create mode 100644 frontend-web/src/core/auth/external-login.ts

diff --git a/frontend-web/src/components/page-sdebar.css b/frontend-web/src/components/page-sdebar.css
index f8b264dd..f4710c40 100644
--- a/frontend-web/src/components/page-sdebar.css
+++ b/frontend-web/src/components/page-sdebar.css
@@ -41,7 +41,7 @@
 
 .item-nav {
     width: 100%;
-    height: 70px;
+    height: 75px;
     margin-top: 13px;
     font-family: Noto Sans S Chinese;
     font-weight: 500;
@@ -94,7 +94,7 @@
     content: '';
     position: absolute;
     left: 0;
-    top: 24px;
+    top: 29px;
     width: 77px;
     height: 45px;
     background: url('../assets/icon/nav-line-logo.svg') no-repeat;
@@ -237,4 +237,86 @@
 .sidebar-flyout-label {
     flex: 1;
     white-space: nowrap;
+}
+
+.sidebar-collapse-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.sidebar-collapse-btn__icon {
+    width: 16px;
+    height: 16px;
+    flex: 0 0 16px;
+    color: #80e9ff;
+}
+
+.sidebar-collapse-btn__label {
+    font-size: 14px;
+    line-height: 1;
+    white-space: nowrap;
+}
+
+.sidebar-collapse-btn--inline {
+    width: calc(100% - 6px);
+    min-height: 58px;
+    margin-top: auto;
+    margin-bottom: 2px;
+    flex-direction: column;
+    gap: 6px;
+    border: 1px solid #55a6fe33;
+    background: #000c1c26;
+    color: rgba(255, 255, 255, 0.9);
+    box-shadow: inset 0 0 16px #00b9ff1f;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.sidebar-collapse-btn--inline .sidebar-collapse-btn__label {
+    font-size: 16px;
+    line-height: 1.1;
+}
+
+.sidebar-collapse-btn--inline:hover {
+    background: rgba(0, 98, 217, 0.3);
+    border-color: rgba(255, 255, 255, 0.25);
+}
+
+.sidebar-collapse-btn--floating {
+    position: fixed;
+    left: 10px;
+    bottom: 10px;
+    z-index: 60;
+    width: 36px;
+    height: 36px;
+    min-height: 36px;
+    padding: 0 10px;
+    border: 1px solid rgba(128, 233, 255, 0.35);
+    background: rgba(3, 38, 80, 0.82);
+    color: rgba(205, 245, 255, 0.95);
+    backdrop-filter: blur(2px);
+    transition: width 0.22s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+    overflow: hidden;
+}
+
+.sidebar-collapse-btn--floating:hover {
+    width: 104px;
+    background: rgba(7, 52, 110, 0.9);
+    border-color: rgba(128, 233, 255, 0.65);
+}
+
+.sidebar-collapse-btn--floating .sidebar-collapse-btn__label {
+    max-width: 0;
+    opacity: 0;
+    transform: translateX(-4px);
+    transition: max-width 0.22s ease, opacity 0.16s ease, transform 0.22s ease;
+}
+
+.sidebar-collapse-btn--floating:hover .sidebar-collapse-btn__label {
+    max-width: 64px;
+    opacity: 1;
+    transform: translateX(0);
 }
\ No newline at end of file
diff --git a/frontend-web/src/components/page-sidebar-dark.tsx b/frontend-web/src/components/page-sidebar-dark.tsx
index c9dc31c3..96158764 100644
--- a/frontend-web/src/components/page-sidebar-dark.tsx
+++ b/frontend-web/src/components/page-sidebar-dark.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
+import { PanelLeftOpen, PanelLeftClose } from "lucide-react";
 
 import { getStoredAuth } from "@/core/auth";
 import {
@@ -10,7 +11,13 @@ import {
 } from "@/core/page-layout/sidebar-menu";
 import './page-sdebar.css'
 
-export function PageSidebarDark() {
+type PageSidebarDarkProps = {
+  /** 是否收起（true 时只渲染左下角浮动入口，sidebar 主体隐藏） */
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+};
+
+export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDarkProps) {
   const isAdmin = getStoredAuth()?.system_role === "admin";
   const visibleMenuItems = useMemo(
     () => filterMenuItemsByRole(sidebarMenuItems, !!isAdmin),
@@ -91,10 +98,37 @@ export function PageSidebarDark() {
     });
   };
 
+  const findFirstRoutePath = (items?: MenuItem[]): string | null => {
+    if (!items?.length) {
+      return null;
+    }
+
+    for (const child of items) {
+      if (child.path) {
+        return child.path;
+      }
+      const nestedPath = findFirstRoutePath(child.children);
+      if (nestedPath) {
+        return nestedPath;
+      }
+    }
+
+    return null;
+  };
+
   const handleTopItemClick = (item: MenuItem) => {
     setActiveTopId(item.id);
 
-    if (!item.children?.length && item.path) {
+    if (item.children?.length) {
+      const firstPath = findFirstRoutePath(item.children);
+      if (firstPath) {
+        closeNavPanel();
+        navigate(firstPath);
+      }
+      return;
+    }
+
+    if (item.path) {
       closeNavPanel();
       navigate(item.path);
     }
@@ -138,6 +172,22 @@ export function PageSidebarDark() {
       })}
     </div>
   );
+  // collapsed 状态：sidebar 主体完全消失（包括占据的宽度），只渲染左下角浮动入口
+  if (collapsed) {
+    return (
+      <button
+        type="button"
+        title="展开侧边栏"
+        aria-label="展开侧边栏"
+        className="sidebar-collapse-btn sidebar-collapse-btn--floating"
+        onClick={onToggleCollapsed}
+      >
+        <PanelLeftOpen className="sidebar-collapse-btn__icon" aria-hidden="true" />
+        <span className="sidebar-collapse-btn__label">收起面板</span>
+      </button>
+    );
+  }
+
   return (
     <aside className="sidebar-contnet">
       <div className="sidebar-contents">
@@ -169,6 +219,18 @@ export function PageSidebarDark() {
             </div>
           </div>
         ))}
+
+        {/* 底部"收起面板"按钮：独立样式，mt-auto 推到底 */}
+        <button
+          type="button"
+          title="收起侧边栏"
+          aria-label="收起侧边栏"
+          className="sidebar-collapse-btn sidebar-collapse-btn--inline"
+          onClick={onToggleCollapsed}
+        >
+          <PanelLeftClose className="sidebar-collapse-btn__icon" aria-hidden="true" />
+          <span className="sidebar-collapse-btn__label">收起面板</span>
+        </button>
       </div>
     </aside>
   );
diff --git a/frontend-web/src/core/auth/external-login.ts b/frontend-web/src/core/auth/external-login.ts
new file mode 100644
index 00000000..219db2b2
--- /dev/null
+++ b/frontend-web/src/core/auth/external-login.ts
@@ -0,0 +1,57 @@
+/**
+ * 外部系统跳转登录时透传的参数：
+ *   theme  —— 主题色，"dark-blue" => 深色，其他 => 浅色（在 LoginPage 调 setTheme 直接生效）
+ *   ticket —— 第三方 ticket，持久化到 localStorage 供后续请求使用
+ *   userId —— 外部用户 id，同上
+ *   env    —— 环境标识，同上
+ *
+ * 这里只暴露 ``ticket / userId / env`` 三个 storage key 和读写工具；
+ * theme 不存（直接走 ThemeContext，避免双源）。
+ */
+
+export const EXTERNAL_LOGIN_STORAGE_KEYS = {
+  ticket: "login.ticket",
+  userId: "login.userId",
+  env: "login.env",
+} as const;
+
+export type ExternalLoginParams = {
+  ticket?: string;
+  userId?: string;
+  env?: string;
+};
+
+/** 把外部跳转带来的三个参数写到 localStorage；隐私模式 / quota 异常时静默失败 */
+export function persistExternalLoginParams(params: ExternalLoginParams): void {
+  try {
+    if (params.ticket) {
+      localStorage.setItem(EXTERNAL_LOGIN_STORAGE_KEYS.ticket, params.ticket);
+    }
+    if (params.userId) {
+      localStorage.setItem(EXTERNAL_LOGIN_STORAGE_KEYS.userId, params.userId);
+    }
+    if (params.env) {
+      localStorage.setItem(EXTERNAL_LOGIN_STORAGE_KEYS.env, params.env);
+    }
+  } catch {
+    // localStorage 不可用时不阻断登录流程
+  }
+}
+
+/** 读取持久化的外部登录参数；不可用时返回空字符串 */
+export function readExternalLoginParams(): Required<ExternalLoginParams> {
+  try {
+    return {
+      ticket: localStorage.getItem(EXTERNAL_LOGIN_STORAGE_KEYS.ticket) ?? "",
+      userId: localStorage.getItem(EXTERNAL_LOGIN_STORAGE_KEYS.userId) ?? "",
+      env: localStorage.getItem(EXTERNAL_LOGIN_STORAGE_KEYS.env) ?? "",
+    };
+  } catch {
+    return { ticket: "", userId: "", env: "" };
+  }
+}
+
+/** 把 ``theme`` query 值映射成 ThemeContext 的 ``'dark' | 'light'`` */
+export function resolveThemeFromQuery(themeParam: string | null | undefined): "dark" | "light" {
+  return themeParam === "dark-blue" ? "dark" : "light";
+}
diff --git a/frontend-web/src/core/page-layout/sidebar-menu.ts b/frontend-web/src/core/page-layout/sidebar-menu.ts
index 446d6be8..d2fe690a 100644
--- a/frontend-web/src/core/page-layout/sidebar-menu.ts
+++ b/frontend-web/src/core/page-layout/sidebar-menu.ts
@@ -68,40 +68,40 @@ export const sidebarMenuItems: MenuItem[] = [
       { id: "qa-research", label: "课题研究", icon: FileText, path: "/page/canvas/ai-writing" },
     ],
   },
-  {
-    id: "light-app-center",
-    label: "轻应用",
-    icon: Grid3X3,
-    children: [
-      {
-        id: "light-app-note-management",
-        label: "笔记管理",
-        icon: NotebookPen,
-        children: [
-          {
-            id: "light-app-new-note",
-            label: "新建笔记",
-            icon: Plus,
-            path: "/page/strategy/light-app/new-note",
-          },
-          {
-            id: "light-app-note-list",
-            label: "笔记列表",
-            icon: List,
-            path: "/page/strategy/light-app/notes",
-          },
-          {
-            id: "light-app-note-qa",
-            label: "笔记问答",
-            icon: MessageSquareCode,
-            path: "/page/strategy/light-app/note-qa",
-          },
-        ],
-      },
-      { id: "light-app-square", label: "应用广场", icon: Layout },
-      { id: "light-app-records", label: "运行记录", icon: History },
-    ],
-  },
+  // {
+  //   id: "light-app-center",
+  //   label: "轻应用",
+  //   icon: Grid3X3,
+  //   children: [
+  //     {
+  //       id: "light-app-note-management",
+  //       label: "笔记管理",
+  //       icon: NotebookPen,
+  //       children: [
+  //         {
+  //           id: "light-app-new-note",
+  //           label: "新建笔记",
+  //           icon: Plus,
+  //           path: "/page/strategy/light-app/new-note",
+  //         },
+  //         {
+  //           id: "light-app-note-list",
+  //           label: "笔记列表",
+  //           icon: List,
+  //           path: "/page/strategy/light-app/notes",
+  //         },
+  //         {
+  //           id: "light-app-note-qa",
+  //           label: "笔记问答",
+  //           icon: MessageSquareCode,
+  //           path: "/page/strategy/light-app/note-qa",
+  //         },
+  //       ],
+  //     },
+  //     { id: "light-app-square", label: "应用广场", icon: Layout },
+  //     { id: "light-app-records", label: "运行记录", icon: History },
+  //   ],
+  // },
   {
     id: "task-management",
     label: "任务管理",
diff --git a/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
index b319a573..87e75736 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
@@ -463,8 +463,9 @@ export function AIWritingPanel({
           />
         )}
 
-        {/* 研究中 + 已有技能步骤：实时流式展示技能检索过程，避免 skeleton 卡片掩盖步骤 */}
-        {state.status === 'researching' && state.skillSearchSteps.length > 0 && (
+        {/* 技能检索 pending：用户点击瞬间到 awaiting 之间，始终显示 SkillStepsCard 占位
+            steps.length === 0 时 SkillStepsCard 内部会渲染骨架行，不让用户干等空白 */}
+        {state.skillSearchPending && (
           <div className="px-4 pb-2">
             <SkillStepsCard steps={state.skillSearchSteps} inProgress />
           </div>
@@ -474,8 +475,8 @@ export function AIWritingPanel({
          state.status !== 'writing_draft' &&
          !(state.status === 'writing_outline' && (state.outlineStreamingText || state.outlineThinkingText)) &&
          !(state.status === 'reviewing' && state.streamingReviewItems.length > 0) &&
-         /* 技能检索已经在流式展示步骤 / 选择打字机 / 等待 chunk 中，不再叠加 skeleton */
-         !(state.status === 'researching' && state.skillSearchSteps.length > 0) &&
+         /* 技能检索占位卡 / 选择打字机 已经在流式展示，不再叠加 skeleton */
+         !state.skillSearchPending &&
          !(state.status === 'researching' && (state.skillSelectStreamingText || state.skillSelectThinkingText)) &&
          /* 意图解析流式过程中（LLM 还在吐 JSON）不要显示 skeleton */
          !state.intentStreamingText && !state.intentThinkingText && (
diff --git a/frontend-web/src/open-canvas/components/ai-writing/MaterialsToolbar.tsx b/frontend-web/src/open-canvas/components/ai-writing/MaterialsToolbar.tsx
index 1b149ed4..66906405 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/MaterialsToolbar.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/MaterialsToolbar.tsx
@@ -73,7 +73,7 @@ export function MaterialsToolbar({
           value={userQuery}
           onChange={handleInput}
           onKeyDown={handleKeyDown}
-          placeholder={placeholder ?? '例如：想查看各大平台销量 / 2025 年财报 / 行业头部公司近期动态…'}
+          placeholder={placeholder ?? '输入文字后点击“重新搜索”或“技能检索”按钮…'}
           disabled={disabled}
           className="w-full resize-none rounded-md border border-input bg-background px-2.5 py-1.5 text-xs leading-5 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 min-h-[28px] max-h-24"
         />
diff --git a/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
index 2f95f1fe..a243e295 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
@@ -118,9 +118,28 @@ export function SkillStepsCard({ steps, inProgress }: SkillStepsCardProps) {
               </li>
             );
           })}
-          {inProgress && (
+          {inProgress && steps.length === 0 && (
+            // 用户刚点击"技能检索"，还没收到任何步骤事件：用骨架行 + spinner 占位，
+            // 避免用户在等待后端 emit 时干等空白
+            <>
+              <li className="flex items-center gap-2 text-[11px] text-violet-700/80 dark:text-violet-300/70 italic">
+                <Loader2 className="size-3 animate-spin shrink-0" />
+                正在准备技能检索…
+              </li>
+              {[0, 1, 2].map((i) => (
+                <li key={`skel-${i}`} className="flex items-start gap-2 animate-pulse" style={{ animationDelay: `${i * 120}ms` }}>
+                  <span className="shrink-0 mt-0.5 size-4 rounded-full bg-violet-100 dark:bg-violet-900/60" />
+                  <div className="flex-1 min-w-0 space-y-1">
+                    <div className="h-2.5 w-24 rounded bg-violet-100 dark:bg-violet-900/60" />
+                    <div className="h-2 w-40 rounded bg-violet-50 dark:bg-violet-900/30" />
+                  </div>
+                </li>
+              ))}
+            </>
+          )}
+          {inProgress && steps.length > 0 && (
             <li className="flex items-center gap-2 text-[11px] text-muted-foreground italic">
-              <Loader2 className="size-3 animate-spin" />
+              <Loader2 className="size-3 animate-spin shrink-0" />
               更多步骤生成中…
             </li>
           )}
diff --git a/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts b/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts
index 0cd2943e..94b5ada4 100644
--- a/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts
+++ b/frontend-web/src/open-canvas/hooks/useAIWritingStream.ts
@@ -75,6 +75,7 @@ const INITIAL_STATE: AIWritingState = {
   skillSearchSteps: [],
   skillSelectStreamingText: '',
   skillSelectThinkingText: '',
+  skillSearchPending: false,
   streamingReviewItems: [],
   revisionSummary: null,
   pendingRevisionContext: null,
@@ -105,10 +106,13 @@ function reducer(prev: AIWritingState, action: Action): AIWritingState {
 
     case 'intervention_submitted': {
       const ns = action.nextStatus;
+      // 点击瞬间标记技能检索 pending（动机 = 用户的 action 类型），让 SkillStepsCard 占位卡立即挂载
+      const enablingSkillSearch = action.record.action === 'enable_skill_search';
       return {
         ...prev,
         currentPause: null,
         status: ns,
+        skillSearchPending: enablingSkillSearch ? true : prev.skillSearchPending,
         ...(ns === 'researching' ? { researchProgress: '', skillSearchSteps: [], skillSelectStreamingText: '', skillSelectThinkingText: '' } : {}),
         ...(ns === 'writing_outline' ? { outlineStreamingText: '', outlineThinkingText: '' } : {}),
         ...(ns === 'writing_draft' ? { streamingDraftSections: [], streamingDraftTitle: '' } : {}),
@@ -341,7 +345,9 @@ function handleEvent(prev: AIWritingState, event: ProgressEvent): AIWritingState
       const extra: Partial<AIWritingState> = {};
       if (pp === 'material_confirm' && event.materials?.length) extra.materials = event.materials;
       if (pp === 'outline_confirm' && event.outline) extra.outline = event.outline;
-      return { ...base, ...extra, status: pauseStatus, currentPause: event };
+      // 进入素材确认（material_confirm）= 技能检索（如果在进行）已经完成，清掉 pending 占位
+      const clearPending = pp === 'material_confirm' ? { skillSearchPending: false } : {};
+      return { ...base, ...extra, ...clearPending, status: pauseStatus, currentPause: event };
     }
 
     case 'done':
diff --git a/frontend-web/src/open-canvas/types/ai-writing.ts b/frontend-web/src/open-canvas/types/ai-writing.ts
index faa6a3c6..98d6a380 100644
--- a/frontend-web/src/open-canvas/types/ai-writing.ts
+++ b/frontend-web/src/open-canvas/types/ai-writing.ts
@@ -321,6 +321,9 @@ export interface AIWritingState {
   // 技能选择 LLM 流式打字内容（正文 / 思考分开），select_skills 完成后清空
   skillSelectStreamingText: string;
   skillSelectThinkingText: string;
+  /** 技能检索是否正在进行：用户点击"技能检索"瞬间 true，进入 awaiting 时清掉。
+   *  用于在 LangGraph 还没推任何 skill_search_step 事件时给前端展示占位卡。 */
+  skillSearchPending: boolean;
   // 流式审核（逐条到达）
   streamingReviewItems: StreamingReviewItem[];
   // 修改摘要
diff --git a/frontend-web/src/pages/LoginPage.tsx b/frontend-web/src/pages/LoginPage.tsx
index 16ee95b9..5edbf2db 100644
--- a/frontend-web/src/pages/LoginPage.tsx
+++ b/frontend-web/src/pages/LoginPage.tsx
@@ -3,8 +3,13 @@
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 
+import { useTheme } from "@/contexts/ThemeContext";
 import { loginByUsername } from "@/core/auth/api";
 import { setStoredAuth } from "@/core/auth";
+import {
+  persistExternalLoginParams,
+  resolveThemeFromQuery,
+} from "@/core/auth/external-login";
 import {
   isSidebarEnabledFromSearch,
   persistSidebarEnabled,
@@ -18,6 +23,7 @@ export default function LoginPage() {
   const { username } = useParams<{ username?: string }>();
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { setTheme } = useTheme();
   const sidebarEnabled = useMemo(
     () => isSidebarEnabledFromSearch(searchParams.toString()),
     [searchParams],
@@ -26,9 +32,31 @@ export default function LoginPage() {
     const raw = username?.trim();
     return raw && raw.length > 0 ? raw : DEFAULT_USERNAME;
   }, [username]);
+  // 外部跳转参数：theme 直接调 setTheme；ticket/userId/env 持久化到 localStorage
+  const externalParams = useMemo(() => ({
+    theme: searchParams.get("theme") ?? "",
+    ticket: searchParams.get("ticket") ?? "",
+    userId: searchParams.get("userId") ?? "",
+    env: searchParams.get("env") ?? "",
+  }), [searchParams]);
   const [status, setStatus] = useState<LoginStatus>("loading");
   const [errorMessage, setErrorMessage] = useState<string>("");
 
+  // 主题切换：theme=dark-blue → 深色，其他值或缺省 → 浅色
+  useEffect(() => {
+    if (!externalParams.theme) return;
+    setTheme(resolveThemeFromQuery(externalParams.theme));
+  }, [externalParams.theme, setTheme]);
+
+  // ticket / userId / env 持久化（与 login 请求并行做，互不阻塞）
+  useEffect(() => {
+    persistExternalLoginParams({
+      ticket: externalParams.ticket,
+      userId: externalParams.userId,
+      env: externalParams.env,
+    });
+  }, [externalParams.ticket, externalParams.userId, externalParams.env]);
+
   useEffect(() => {
     let cancelled = false;
 
diff --git a/frontend-web/src/pages/PageRoutes.tsx b/frontend-web/src/pages/PageRoutes.tsx
index e88e6562..db4ed060 100644
--- a/frontend-web/src/pages/PageRoutes.tsx
+++ b/frontend-web/src/pages/PageRoutes.tsx
@@ -24,7 +24,10 @@ function PageLayout() {
       <div className="flex flex-1 overflow-hidden">
         {sidebarEnabled && (
           isDark ? (
-            <PageSidebarDark />
+            <PageSidebarDark
+              collapsed={collapsed}
+              onToggleCollapsed={() => setCollapsed((prev) => !prev)}
+            />
           ) : (
             <PageSidebar
               collapsed={collapsed}
@@ -33,14 +36,16 @@ function PageLayout() {
           )
         )}
         <main
-          className={`flex-1 overflow-hidden transition-[padding] duration-300 ${
+          className={`flex-1 overflow-hidden ${
             !sidebarEnabled
               ? ""
               : isDark
-                ? "pl-[118px]"
-                : collapsed
-                  ? "pl-16"
-                  : "pl-64"
+                // 深色 sidebar：展开 118px（10 + 98 + 10 gap），收起 = 0 sidebar 完全消失，
+                // 只剩左下角浮动按钮（fixed，叠在 main 上不影响布局）。
+                // 不加 transition：transition + sidebar 立刻 unmount 不同步会抽搐
+                ? (collapsed ? "pl-0" : "pl-[118px]")
+                // 浅色仍保留过渡动画（pl-16 ↔ pl-64 平滑收展）
+                : `transition-[padding] duration-300 ${collapsed ? "pl-16" : "pl-64"}`
           }`}
         >
           <Routes>
diff --git a/frontend-web/src/pages/WorkspaceRoutes.tsx b/frontend-web/src/pages/WorkspaceRoutes.tsx
index 08b7181d..f70d42a1 100644
--- a/frontend-web/src/pages/WorkspaceRoutes.tsx
+++ b/frontend-web/src/pages/WorkspaceRoutes.tsx
@@ -59,10 +59,12 @@ export function WorkspaceLayout({
   const pageSidebarWidth = pageSidebarHidden
     ? "0rem"
     : pageSidebarDark
-      // dark page sidebar 视觉右边界是 108px（外框 98 + 内层 translateX 10），
-      // 再 +10px gap 让 workspace sidebar 跟它之间留一条间隔；
-      // 与 PageRoutes.tsx 的 main pl-[118px] 保持一致
-      ? "118px"
+      // dark page sidebar:
+      //   展开: 视觉右边界 108px（外框 98 + 内层 translateX 10）+ 10px gap = 118px
+      //   收起: sidebar 主体完全消失（连同其占据的宽度），workspace 内容铺到屏幕左边；
+      //         左下角浮动按钮是 fixed，叠在主内容上不影响 layout
+      // 与 PageRoutes.tsx 的 main pl-[118px] / pl-0 保持一致
+      ? (pageSidebarCollapsed ? "0rem" : "118px")
       : pageSidebarCollapsed
         ? "4rem"
         : "16rem";