feat(ai写作): 左栏智能体 Tab 内嵌问答并优化模块侧栏

AI 写作页默认展示智能体 Tab，在页内复用 ai-writing 模块配置与 AgentChatPage；确认类型后侧栏扁平展示类型名并支持整块收起动画。同步历史回看、流式续跑、改写菜单与 researcher 检索相关改动。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend-web/src/components/workspace/agents/agent-module-sidebar.tsx

@@ -107,33 +107,11 @@ function groupAgentsByTag(agents: Agent[], allowedTagIds: string[]): AgentGroup[
   return groups;
 }
 
-/**
- * 「按类型聚合智能体 + 聊天记录」左栏（需求 0616 #3 zzJC / #4 zzXD）。
- *
- * - 上半：可见智能体按标签（类型）分组、可折叠；点击进入该智能体对话（保持当前路由
- *   命名空间，全量模式下为 /page/strategy）。
- * - 下半：聊天记录 —— 仅与本模块智能体（即左栏列出的智能体）的会话，按 metadata.agent_id 过滤。
- * - 宽度与通用问答左栏一致（``--sidebar-width``）。
- */
-export function AgentModuleSidebar({
-  moduleKey,
-  activeAgentId,
-  onOpenSettings,
-}: {
-  moduleKey: string;
-  activeAgentId?: string;
-  /** 传入则在左栏顶部显示设置齿轮（admin）。 */
-  onOpenSettings?: () => void;
-}) {
-  const routeBase = useRouteBase();
-  const pathname = usePathname();
-  // 智能体图标配色分主题：深蓝主题用规范蓝-青系，其它（浅色）保持原高彩度色，互不影响。
-  const { theme } = useTheme();
-  const isDark = theme === "dark";
-  const { agents } = useAgents();
+export function useAgentModuleSidebarData(moduleKey: string) {
+  const { agents, isLoading: agentsLoading } = useAgents();
   const { data: threads = [] } = useThreads();
-  const { data: moduleConfig } = useAgentModuleConfig(moduleKey);
-  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
+  const { data: moduleConfig, isLoading: configLoading } =
+    useAgentModuleConfig(moduleKey);
 
   const allowedTagIds = useMemo(
     () => moduleConfig?.tag_ids ?? [],
@@ -161,6 +139,56 @@ export function AgentModuleSidebar({
     [threads, moduleAgentIds],
   );
 
+  return {
+    groups,
+    moduleAgentIds,
+    moduleThreads,
+    allowedTagIds,
+    // admin 是否已确认该模块展示的智能体类型（配置了标签）。
+    hasConfiguredType: allowedTagIds.length > 0,
+    isLoading: agentsLoading || configLoading,
+  };
+}
+
+/**
+ * 「按类型聚合智能体 + 聊天记录」左栏（需求 0616 #3 zzJC / #4 zzXD）。
+ *
+ * - 上半：可见智能体按标签（类型）分组、可折叠；点击进入该智能体对话（保持当前路由
+ *   命名空间，全量模式下为 /page/strategy）。
+ * - 下半：聊天记录 —— 仅与本模块智能体（即左栏列出的智能体）的会话，按 metadata.agent_id 过滤。
+ * - 宽度与通用问答左栏一致（``--sidebar-width``）。
+ */
+export function AgentModuleSidebar({
+  moduleKey,
+  activeAgentId,
+  activeThreadId,
+  routeBase: routeBaseProp,
+  headerTitle = "智能体",
+  className,
+  onOpenSettings,
+}: {
+  moduleKey: string;
+  activeAgentId?: string;
+  activeThreadId?: string;
+  routeBase?: string;
+  headerTitle?: string;
+  className?: string;
+  /** 传入则在左栏顶部显示设置齿轮（admin）。 */
+  onOpenSettings?: () => void;
+}) {
+  const contextRouteBase = useRouteBase();
+  const routeBase = routeBaseProp ?? contextRouteBase;
+  const pathname = usePathname();
+  // 智能体图标配色分主题：深蓝主题用规范蓝-青系，其它（浅色）保持原高彩度色，互不影响。
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
+  const { groups, moduleThreads, hasConfiguredType } =
+    useAgentModuleSidebarData(moduleKey);
+  // 已确认智能体类型时，允许把上半「智能体类型」整块收起，把空间让给下半聊天记录。
+  const [agentsSectionCollapsed, setAgentsSectionCollapsed] = useState(false);
+  const agentsCollapsed = hasConfiguredType && agentsSectionCollapsed;
+
   const toggleGroup = (key: string) =>
     setCollapsed((prev) => {
       const next = new Set(prev);
@@ -169,14 +197,68 @@ export function AgentModuleSidebar({
       return next;
     });
 
+  // 已确认类型时把所有分组的智能体拍平（单选类型一般只有一个分组），
+  // 标题行直接显示该类型名 + 数量，去掉额外的分组行。
+  const flatAgents = useMemo(() => groups.flatMap((g) => g.agents), [groups]);
+  const configuredTypeLabel =
+    groups.length === 1 ? (groups[0]?.label ?? "智能体类型") : "智能体类型";
+
+  const renderAgentCard = (agent: Agent, keyPrefix: string) => {
+    const href = `${routeBase}/agents/${agent.id}/chats/new`;
+    const isActive = agent.id === activeAgentId;
+    const { from, to } = agentColor(agent.id, isDark);
+    return (
+      <Link
+        key={`${keyPrefix}:${agent.id}`}
+        href={href}
+        className={cn(
+          "group relative flex w-full items-start gap-2.5 rounded-xl border px-2.5 py-2 transition-colors",
+          isActive
+            ? "border-primary/40 bg-primary/5"
+            : "border-transparent hover:border-border hover:bg-accent/50",
+        )}
+      >
+        <span
+          className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg text-white shadow-sm"
+          style={{ backgroundImage: `linear-gradient(135deg, ${from}, ${to})` }}
+        >
+          <Bot className="size-[18px]" />
+        </span>
+        <span className="min-w-0 flex-1">
+          <span
+            className={cn(
+              "block truncate text-[13px] font-semibold",
+              isActive ? "text-primary" : "text-foreground",
+            )}
+          >
+            {desensitize(agent.name)}
+          </span>
+          <span className="mt-0.5 block truncate text-[11px] leading-snug text-muted-foreground">
+            {agent.description ? desensitize(agent.description) : "智能体助手"}
+          </span>
+        </span>
+        {isActive && (
+          <span className="absolute top-1/2 right-1 h-6 w-1 -translate-y-1/2 rounded-full bg-primary" />
+        )}
+      </Link>
+    );
+  };
+
   return (
     // 原有布局不变，仅做配色适配：深色下左栏改为半透明深蓝玻璃面板（对齐 .sidebar-contents：
     // bg rgba(3,38,80,.8) + 蓝色发光边框），叠 backdrop-blur 让外壳的深蓝底图朦胧透出；
     // 浅色保持白底。其余颜色已走语义 token 自适配。
-    <aside className="flex h-full w-(--sidebar-width) shrink-0 flex-col overflow-hidden border-r border-border/70 bg-white text-foreground backdrop-blur-md dark:border-[#2b8ffe]/45 dark:bg-[#032650]/80">
+    <aside
+      className={cn(
+        "flex h-full w-(--sidebar-width) shrink-0 flex-col overflow-hidden border-r border-border/70 bg-white text-foreground backdrop-blur-md dark:border-[#2b8ffe]/45 dark:bg-[#032650]/80",
+        className,
+      )}
+    >
       {onOpenSettings && (
         <div className="flex shrink-0 items-center justify-between border-b border-border/60 px-3 py-2">
-          <span className="text-xs font-semibold text-foreground/80">智能体</span>
+          <span className="text-xs font-semibold text-foreground/80">
+            {headerTitle}
+          </span>
           <button
             type="button"
             onClick={onOpenSettings}
@@ -189,89 +271,116 @@ export function AgentModuleSidebar({
         </div>
       )}
 
-      {/* 上半：按类型分组的智能体（彩色卡片，与全量版看齐） */}
-      <div className="flex min-h-0 flex-[3] flex-col overflow-y-auto px-2 py-3">
-        <h2 className="mb-1 px-3 py-1 text-[11px] font-semibold tracking-[0.04em] text-muted-foreground/80 select-none">
-          智能体类型
-        </h2>
-        {groups.length === 0 ? (
-          <p className="px-3 py-1.5 text-xs text-muted-foreground/70">暂无智能体</p>
+      {/* 上半：智能体列表。
+          - 未确认类型：按类型分组、可逐组折叠（与全量版一致）。
+          - 已确认类型：标题行直接显示该类型名 + 数量（去掉单独的分组行），
+            扁平列出该类型下的智能体，并可整块收起（grid 行高过渡动画），
+            收起后只留标题、把高度让给下半聊天记录。 */}
+      <div
+        className={cn(
+          "flex flex-col px-2 py-3",
+          agentsCollapsed ? "shrink-0" : "min-h-0 flex-[3]",
+        )}
+      >
+        {hasConfiguredType ? (
+          <>
+            <button
+              type="button"
+              onClick={() => setAgentsSectionCollapsed((prev) => !prev)}
+              title={agentsCollapsed ? "展开智能体" : "收起智能体"}
+              className="flex shrink-0 items-center justify-between px-3 py-1 text-[11px] font-semibold tracking-[0.04em] text-muted-foreground/80 transition-colors hover:text-muted-foreground select-none"
+            >
+              <span className="flex items-center gap-1.5 truncate">
+                <span className="truncate">{configuredTypeLabel}</span>
+                <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground tabular-nums">
+                  {flatAgents.length}
+                </span>
+              </span>
+              <ChevronDown
+                className={cn(
+                  "size-3.5 shrink-0 transition-transform duration-300",
+                  agentsCollapsed && "-rotate-90",
+                )}
+              />
+            </button>
+            <div
+              className={cn(
+                "grid transition-[grid-template-rows] duration-300 ease-in-out",
+                agentsCollapsed
+                  ? "grid-rows-[0fr]"
+                  : "mt-1 min-h-0 flex-1 grid-rows-[1fr]",
+              )}
+            >
+              <div
+                className={cn(
+                  "min-h-0",
+                  agentsCollapsed
+                    ? "overflow-hidden"
+                    : "overflow-y-auto overflow-x-hidden",
+                )}
+              >
+                {flatAgents.length === 0 ? (
+                  <p className="px-3 py-1.5 text-xs text-muted-foreground/70">
+                    暂无智能体
+                  </p>
+                ) : (
+                  <div className="flex flex-col gap-1">
+                    {flatAgents.map((agent) =>
+                      renderAgentCard(agent, "configured"),
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          </>
         ) : (
-          <div className="flex flex-col gap-1.5">
-            {groups.map((group) => {
-              const isCollapsed = collapsed.has(group.key);
-              return (
-                <div key={group.key}>
-                  <button
-                    type="button"
-                    onClick={() => toggleGroup(group.key)}
-                    className="flex w-full items-center justify-between px-3 py-1 text-[11px] font-semibold tracking-[0.04em] text-muted-foreground/80 transition-colors hover:text-muted-foreground select-none"
-                  >
-                    <span className="flex items-center gap-1.5 truncate">
-                      <span className="truncate">{group.label}</span>
-                      <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground tabular-nums">
-                        {group.agents.length}
-                      </span>
-                    </span>
-                    <ChevronDown
-                      className={cn(
-                        "size-3.5 shrink-0 transition-transform duration-200",
-                        isCollapsed && "-rotate-90",
-                      )}
-                    />
-                  </button>
-                  {!isCollapsed && (
-                    <div className="mt-1 flex flex-col gap-1">
-                      {group.agents.map((agent) => {
-                        const href = `${routeBase}/agents/${agent.id}/chats/new`;
-                        const isActive = agent.id === activeAgentId;
-                        const { from, to } = agentColor(agent.id, isDark);
-                        return (
-                          <Link
-                            key={`${group.key}:${agent.id}`}
-                            href={href}
+          <>
+            <h2 className="mb-1 shrink-0 px-3 py-1 text-[11px] font-semibold tracking-[0.04em] text-muted-foreground/80 select-none">
+              智能体类型
+            </h2>
+            <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
+              {groups.length === 0 ? (
+                <p className="px-3 py-1.5 text-xs text-muted-foreground/70">
+                  暂无智能体
+                </p>
+              ) : (
+                <div className="flex flex-col gap-1.5">
+                  {groups.map((group) => {
+                    const isCollapsed = collapsed.has(group.key);
+                    return (
+                      <div key={group.key}>
+                        <button
+                          type="button"
+                          onClick={() => toggleGroup(group.key)}
+                          className="flex w-full items-center justify-between px-3 py-1 text-[11px] font-semibold tracking-[0.04em] text-muted-foreground/80 transition-colors hover:text-muted-foreground select-none"
+                        >
+                          <span className="flex items-center gap-1.5 truncate">
+                            <span className="truncate">{group.label}</span>
+                            <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground tabular-nums">
+                              {group.agents.length}
+                            </span>
+                          </span>
+                          <ChevronDown
                             className={cn(
-                              "group relative flex w-full items-start gap-2.5 rounded-xl border px-2.5 py-2 transition-colors",
-                              isActive
-                                ? "border-primary/40 bg-primary/5"
-                                : "border-transparent hover:border-border hover:bg-accent/50",
+                              "size-3.5 shrink-0 transition-transform duration-200",
+                              isCollapsed && "-rotate-90",
                             )}
-                          >
-                            <span
-                              className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg text-white shadow-sm"
-                              style={{
-                                backgroundImage: `linear-gradient(135deg, ${from}, ${to})`,
-                              }}
-                            >
-                              <Bot className="size-[18px]" />
-                            </span>
-                            <span className="min-w-0 flex-1">
-                              <span
-                                className={cn(
-                                  "block truncate text-[13px] font-semibold",
-                                  isActive ? "text-primary" : "text-foreground",
-                                )}
-                              >
-                                {desensitize(agent.name)}
-                              </span>
-                              <span className="mt-0.5 block truncate text-[11px] leading-snug text-muted-foreground">
-                                {agent.description
-                                  ? desensitize(agent.description)
-                                  : "智能体助手"}
-                              </span>
-                            </span>
-                            {isActive && (
-                              <span className="absolute top-1/2 right-1 h-6 w-1 -translate-y-1/2 rounded-full bg-primary" />
+                          />
+                        </button>
+                        {!isCollapsed && (
+                          <div className="mt-1 flex flex-col gap-1">
+                            {group.agents.map((agent) =>
+                              renderAgentCard(agent, group.key),
                             )}
-                          </Link>
-                        );
-                      })}
-                    </div>
-                  )}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
                 </div>
-              );
-            })}
-          </div>
+              )}
+            </div>
+          </>
         )}
       </div>
 
@@ -286,7 +395,8 @@ export function AgentModuleSidebar({
           <div className="flex flex-col gap-0.5">
             {moduleThreads.map((thread) => {
               const href = pathOfThread(thread, undefined, routeBase);
-              const isActive = href === pathname;
+              const isActive =
+                thread.thread_id === activeThreadId || href === pathname;
               return (
                 <Link
                   key={thread.thread_id}