@zmzai/theme 0.5.4 → 0.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zmzai/theme",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "private": false,
   "type": "module",
   "description": "zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans",

package/src/components/index.ts

@@ -57,6 +57,7 @@ export * from "./markdown";
 export * from "./markdown";
 export * from "./diff-view";
 export * from "./tool-card";
+export * from "./subtask";
 export * from "./todo-checklist";
 export * from "./permission-card";
 

package/src/components/subtask/SubtaskPart.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import "./subtask.css";
+
+import { Badge } from "../badge/Badge";
+import { Icon } from "../icon/Icon";
+
+export interface SubtaskPartProps {
+  /** 子任务描述；缺省时回退显示 agent 名 */
+  description?: string;
+  /** 执行该子任务的智能体名 */
+  agent?: string;
+  /** 子任务 prompt（mono 小字显示） */
+  prompt?: string;
+}
+
+/**
+ * SubtaskPart — 执行树中的子任务行（分支线样式与 ToolCard 一致）。
+ *
+ * 上下文增强（执行树 ::before 分支线）依赖消费端容器留出左侧空间，
+ * 与 ToolCard 的执行树用法相同。
+ */
+export function SubtaskPart({ description, agent, prompt }: SubtaskPartProps) {
+  return (
+    <div className="subtask-row">
+      <span className="subtask-icon" aria-hidden>
+        <Icon name="chevron-down" size={12} />
+      </span>
+      <span className="subtask-copy">
+        <strong>{description || agent}</strong>
+        {prompt ? <small>{prompt}</small> : null}
+      </span>
+      <Badge variant="outline" size="sm">子任务</Badge>
+    </div>
+  );
+}

package/src/components/subtask/index.ts

@@ -0,0 +1 @@
+export * from "./SubtaskPart";

package/src/components/subtask/subtask.css

@@ -0,0 +1,11 @@
+/* SubtaskPart — 执行树中的子任务行。token 依赖消费端 @theme
+   （--color-line、--color-accent、--color-muted、--font-mono）。
+   执行树分支线（::before）等上下文增强由消费端自己的 CSS 叠加。 */
+
+.subtask-row { position: relative; display: flex; align-items: center; gap: 0.5rem; min-height: 2.15rem; padding: 0.38rem 0.4rem; background: transparent; }
+/* 执行树分支线（挂在左侧时间轴上；独立使用时容器需留出左侧空间） */
+.subtask-row::before { position: absolute; top: 1.08rem; left: -0.81rem; width: 0.81rem; height: 1px; background: var(--color-line); content: ""; }
+.subtask-icon { display: grid; width: 1rem; height: 1rem; place-items: center; color: var(--color-accent); }
+.subtask-copy { display: grid; min-width: 0; flex: 1; gap: 0.1rem; }
+.subtask-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; font-weight: 600; }
+.subtask-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.6rem; }

package/src/components/tool-card/ToolCard.tsx

@@ -59,7 +59,8 @@ export function ToolCard({ call, sessionIdle = false }: { call: ToolCall; sessio
 /**
  * ToolGroup — 连续工具调用的折叠组（G1 防淹没）。
  *
- * 运行中/有失败/单条时自动展开；多条完成时折叠为一条摘要行。
+ * 仅运行中自动展开；失败/单条/历史组一律折叠为一条可点击的摘要行，
+ * 避免长会话里"运行了 1 个工具"头 + 展开卡的双倍瀑布。
  *
  * @example
  * <ToolGroup calls={toolCalls} sessionIdle={idle} />
@@ -69,9 +70,17 @@ export function ToolGroup({ calls, sessionIdle = false }: { calls: ToolCall[]; s
   const running = calls.filter((c) => c.state.status === "running" || c.state.status === "pending");
   const failed = calls.filter((c) => c.state.status === "error" || (sessionIdle && (c.state.status === "running" || c.state.status === "pending")));
   const done = calls.filter((c) => c.state.status === "completed");
-  const autoExpand = running.length > 0 || failed.length > 0 || calls.length <= 1;
+  const autoExpand = running.length > 0;
   const open = expanded || autoExpand;
   const glyph = failed.length > 0 ? "cross" : running.length > 0 ? "chevron-down" : "check";
+  const single = calls.length === 1 ? calls[0] : undefined;
+  const singleTitle = single
+    ? single.state.status === "completed"
+      ? (single.state.title ?? single.tool)
+      : single.state.status === "error"
+        ? single.state.error
+        : single.tool
+    : null;
   const summary = [
     running.length > 0 && `${running.length} 个进行中`,
     failed.length > 0 && `${failed.length} 个失败`,
@@ -81,8 +90,8 @@ export function ToolGroup({ calls, sessionIdle = false }: { calls: ToolCall[]; s
     <div className="zmz-tool-group">
       <button type="button" className="zmz-tool-group-trigger" aria-expanded={open} onClick={() => setExpanded((value) => !value)} disabled={autoExpand}>
         <span className="tool-card-glyph" aria-hidden><Icon name={glyph} size={12} /></span>
-        <span className="zmz-tool-group-label">运行了 {calls.length} 个工具</span>
-        {!autoExpand && <small>{summary}</small>}
+        <span className="zmz-tool-group-label">{single ? singleTitle : `运行了 ${calls.length} 个工具`}</span>
+        <small>{single ? (single.state.status === "completed" ? "完成" : single.state.status === "error" ? "失败" : "进行中") : summary}</small>
         <Icon name="chevron-down" size={12} className={open ? "tool-card-chevron open" : "tool-card-chevron"} />
       </button>
       {open && (