'feat:智能体技能折叠、多智能体规划弹框展示详情'

frontend-web/package.json

@@ -63,7 +63,6 @@
     "codemirror": "^6.0.2",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.21",
-    "dnd-kit": "^0.0.2",
     "docx": "^9.5.1",
     "dotenv": "^17.2.3",
     "embla-carousel-react": "^8.6.0",

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

@@ -2,6 +2,8 @@
 
 import {
   BotIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
   CopyIcon,
   GlobeIcon,
   InfoIcon,
@@ -85,6 +87,10 @@ export function AgentCard({ agent }: AgentCardProps) {
     agent.skills ?? [],
   );
   const [detailSkillName, setDetailSkillName] = useState<string | null>(null);
+  const [skillsExpanded, setSkillsExpanded] = useState(false);
+
+  const agentSkills = agent.skills ?? [];
+  const showSkillsToggle = agentSkills.length >= 3;
 
   // The /api/agents list response intentionally omits `soul` (perf optimization
   // — SOUL.md is only read on demand). Fetch the detail row when the edit
@@ -111,6 +117,10 @@ export function AgentCard({ agent }: AgentCardProps) {
   const canFavorite = !isOwned;
   const isFavorite = !!agent.is_favorite;
 
+  useEffect(() => {
+    setSkillsExpanded(false);
+  }, [agent.id, agentSkills.length]);
+
   useEffect(() => {
     if (!editOpen) {
       return;
@@ -382,11 +392,13 @@ export function AgentCard({ agent }: AgentCardProps) {
               )}
             </div>
           </div>
-          {agent.description && (
+          <div className="mt-2 min-h-10">
-            <CardDescription className="mt-2 line-clamp-2 text-sm">
+            {agent.description ? (
-              {desensitize(agent.description)}
+              <CardDescription className="line-clamp-2 text-sm">
-            </CardDescription>
+                {desensitize(agent.description)}
-          )}
+              </CardDescription>
+            ) : null}
+          </div>
         </CardHeader>
 
         {(agent.tags?.length ?? 0) > 0 && (
@@ -396,36 +408,73 @@ export function AgentCard({ agent }: AgentCardProps) {
         )}
 
         {(agent.tool_groups?.length ?? agent.skills?.length ?? 0) > 0 && (
-          <CardContent className="pt-0 pb-3">
+          <CardContent className="min-w-0 pt-0 pb-3">
-            <div className="flex flex-wrap gap-1">
+            {(agent.tool_groups?.length ?? 0) > 0 && (
-              {agent.tool_groups?.map((group) => (
+              <div className="mb-1 flex flex-wrap gap-1">
-                <Badge
+                {agent.tool_groups?.map((group) => (
-                  key={`tg:${group}`}
+                  <Badge
-                  variant="outline"
+                    key={`tg:${group}`}
-                  className="text-xs"
+                    variant="outline"
+                    className="text-xs"
+                  >
+                    {desensitize(group)}
+                  </Badge>
+                ))}
+              </div>
+            )}
+            {agentSkills.length > 0 && (
+              <div className="relative min-w-0">
+                {showSkillsToggle && (
+                  <Button
+                    type="button"
+                    size="icon"
+                    variant="ghost"
+                    className="text-muted-foreground absolute top-0 right-0 z-10 h-6 w-6 shrink-0"
+                    title={skillsExpanded ? "收起技能" : "展开全部技能"}
+                    aria-expanded={skillsExpanded}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setSkillsExpanded((open) => !open);
+                    }}
+                  >
+                    {skillsExpanded ? (
+                      <ChevronUpIcon className="h-3.5 w-3.5" />
+                    ) : (
+                      <ChevronDownIcon className="h-3.5 w-3.5" />
+                    )}
+                  </Button>
+                )}
+                <div
+                  className={cn(
+                    "flex min-w-0 flex-wrap gap-1",
+                    showSkillsToggle && "pr-7",
+                    !skillsExpanded &&
+                      showSkillsToggle &&
+                      "max-h-12 overflow-hidden",
+                  )}
                 >
-                  {desensitize(group)}
+                  {agentSkills.map((skill) => (
-                </Badge>
+                    <Badge
-              ))}
+                      key={`sk:${skill}`}
-              {agent.skills?.map((skill) => (
+                      variant="secondary"
-                <Badge
+                      className="hover:bg-secondary/70 max-w-full min-w-0 cursor-pointer text-xs"
-                  key={`sk:${skill}`}
+                      title={t.settings.skills.viewDetailAction}
-                  variant="secondary"
+                      onClick={(e) => {
-                  className="hover:bg-secondary/70 cursor-pointer text-xs"
+                        e.stopPropagation();
-                  title={t.settings.skills.viewDetailAction}
+                        setDetailSkillName(skill);
-                  onClick={(e) => {
+                      }}
-                    e.stopPropagation();
+                    >
-                    setDetailSkillName(skill);
+                      <span className="truncate">{desensitize(skill)}</span>
-                  }}
+                    </Badge>
-                >
+                  ))}
-                  {desensitize(skill)}
+                </div>
-                </Badge>
+              </div>
-              ))}
+            )}
-            </div>
           </CardContent>
         )}
 
         <CardFooter className="mt-auto flex flex-col items-stretch gap-2 pt-3">
+          
           {(canEdit || canDelete || isOwned || isAdmin || canFavorite) && (
             <div className="flex flex-wrap items-center justify-end gap-1">
               {canFavorite && (

frontend-web/src/components/workspace/agents/agent-inspect-dialog.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { InfoIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { SkillDetailDialog } from "@/components/workspace/skills/skill-detail-dialog";
+import { useAgent } from "@/core/agents";
+import { useI18n } from "@/core/i18n/hooks";
+import { useSkills } from "@/core/skills/hooks";
+import { desensitize } from "@/lib/desensitize";
+
+/** 与 `AgentCard` 编辑弹框同布局，仅查看、不可修改。 */
+export function AgentInspectDialog({
+  agentId,
+  open,
+  onOpenChange,
+}: {
+  agentId: string | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const { t } = useI18n();
+  const { agent, isLoading } = useAgent(open ? agentId : null);
+  const { skills, isLoading: isSkillsLoading } = useSkills();
+  const [detailSkillName, setDetailSkillName] = useState<string | null>(null);
+
+  const enabledSkills = useMemo(
+    () => skills.filter((s) => s.enabled),
+    [skills],
+  );
+
+  const selectedSkills = useMemo(
+    () =>
+      (agent?.skills ?? []).map((name) => {
+        const meta = enabledSkills.find((s) => s.name === name);
+        return { name, description: meta?.description };
+      }),
+    [agent?.skills, enabledSkills],
+  );
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              查看智能体
+              {agent ? `:${desensitize(agent.name)}` : ""}
+            </DialogTitle>
+            <DialogDescription>
+              仅查看名称、描述、技能白名单、SOUL 与发布状态，不可修改。
+            </DialogDescription>
+          </DialogHeader>
+          {isLoading && !agent ? (
+            <p className="text-muted-foreground py-8 text-center text-sm">
+              {t.common.loading}
+            </p>
+          ) : !agent ? (
+            <p className="text-muted-foreground py-8 text-center text-sm">
+              无法加载智能体信息
+            </p>
+          ) : (
+            <div className="space-y-4 py-2">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">名称</label>
+                <Input
+                  readOnly
+                  value={desensitize(agent.name)}
+                  className="bg-muted/30"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">描述</label>
+                <Textarea
+                  readOnly
+                  value={desensitize(agent.description ?? "")}
+                  placeholder="暂无描述"
+                  className="min-h-20 bg-muted/30"
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <label className="text-sm font-medium">技能白名单</label>
+                  <span className="text-muted-foreground text-xs">
+                    已选 {selectedSkills.length} 个
+                  </span>
+                </div>
+                <div className="max-h-[240px] overflow-y-auto rounded-md border bg-muted/20 p-2">
+                  {isSkillsLoading ? (
+                    <p className="text-muted-foreground text-sm">技能加载中...</p>
+                  ) : selectedSkills.length === 0 ? (
+                    <p className="text-muted-foreground text-sm">未配置技能</p>
+                  ) : (
+                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                      {selectedSkills.map((skill) => (
+                        <div
+                          key={skill.name}
+                          className="flex w-full min-w-0 items-center"
+                        >
+                          <Badge
+                            variant="secondary"
+                            className="h-8 min-w-0 flex-1 justify-start rounded-r-none px-2 font-normal"
+                            title={desensitize(skill.description ?? "")}
+                          >
+                            <span className="truncate">
+                              {desensitize(skill.name)}
+                            </span>
+                          </Badge>
+                          <Button
+                            type="button"
+                            size="icon"
+                            variant="secondary"
+                            onClick={() => setDetailSkillName(skill.name)}
+                            title={t.settings.skills.viewDetailAction}
+                            className="h-8 w-7 shrink-0 rounded-l-none border-l-0"
+                          >
+                            <InfoIcon className="size-3.5" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+                {selectedSkills.length === 0 && (
+                  <p className="text-muted-foreground text-xs">
+                    不选任何技能会保存为无技能(skills = [])。
+                  </p>
+                )}
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">SOUL</label>
+                <Textarea
+                  readOnly
+                  value={agent.soul ?? ""}
+                  placeholder="暂无 SOUL 内容"
+                  className="min-h-40 bg-muted/30 font-mono text-xs"
+                />
+              </div>
+              <div className="flex items-center justify-between rounded-md border bg-muted/20 p-3">
+                <div>
+                  <p className="text-sm font-medium">公开发布</p>
+                  <p className="text-muted-foreground text-xs">
+                    {agent.is_private
+                      ? "已加入私密广场，不可发布。"
+                      : "打开后,该智能体对所有用户可见。"}
+                  </p>
+                </div>
+                <span className="text-sm tabular-nums">
+                  {agent.published && !agent.is_private ? "是" : "否"}
+                </span>
+              </div>
+              <div className="flex items-center justify-between rounded-md border bg-muted/20 p-3">
+                <div>
+                  <p className="text-sm font-medium">加入私密广场</p>
+                  <p className="text-muted-foreground text-xs">
+                    打开后,该智能体仅在私密广场显示,需输入密码才能查看;与「公开发布」互斥。
+                  </p>
+                </div>
+                <span className="text-sm tabular-nums">
+                  {agent.is_private ? "是" : "否"}
+                </span>
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              关闭
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <SkillDetailDialog
+        skillName={detailSkillName}
+        open={detailSkillName !== null}
+        onOpenChange={(o) => {
+          if (!o) setDetailSkillName(null);
+        }}
+      />
+    </>
+  );
+}

frontend-web/src/roundtable-planning/pages/BusinessChainEditorPage.tsx

@@ -30,6 +30,7 @@ import {
   Bot,
   ChevronDown,
   ChevronUp,
+  Eye,
   GripVertical,
   ListOrdered,
   Loader2,
@@ -61,6 +62,7 @@ import { CSS } from "@dnd-kit/utilities";
 
 import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
+import { AgentInspectDialog } from "@/components/workspace/agents/agent-inspect-dialog";
 import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
 import { listAgents } from "@/core/agents";
 
@@ -832,6 +834,7 @@ function SeatStrip({
   const avatarType = getAvatarTypeFor(seat.agent_id, index);
   const isFirst = index === 0;
   const isLast = index === total - 1;
+  const [viewOpen, setViewOpen] = useState(false);
   return (
     <div
       ref={setNodeRef}
@@ -877,8 +880,19 @@ function SeatStrip({
         )}
       </div>
 
-      {/* 控制：上移 / 下移 / 移除 */}
+      {/* 控制：查看 / 上移 / 下移 / 移除 */}
       <div className="flex shrink-0 items-center gap-0.5 border-l border-border px-2">
+        <button
+          type="button"
+          onClick={() => setViewOpen(true)}
+          title="查看智能体详情"
+          className={cn(
+            "p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            R_CTRL,
+          )}
+        >
+          <Eye className="size-3.5" />
+        </button>
         <button
           type="button"
           onClick={() => onMove(-1)}
@@ -921,6 +935,12 @@ function SeatStrip({
           <X className="size-3.5" />
         </button>
       </div>
+
+      <AgentInspectDialog
+        agentId={seat.agent_id}
+        open={viewOpen}
+        onOpenChange={setViewOpen}
+      />
     </div>
   );
 }