@zmzai/theme 0.9.7 → 0.9.8

package/package.json

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

package/src/components/reasoning/Reasoning.tsx

@@ -1,16 +1,17 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 
 import { Icon } from "../../components/icon/Icon";
 import "./reasoning.css";
 
 /**
- * Reasoning — 思考过程折叠块。
+ * Reasoning — 思考过程折叠块（v0.9.8 计时）。
  *
+ * 标签行显示思考时长：文本持续增长时「思考中 Ns」，停止增长 1.5s 后
+ * 「已思考 Ns」——流式体验与主流（Claude / o3 的 Thought for Xs）对齐。
  * 运行中自动展开（呼吸圆点），完成后收起为标签行，点击回看。
- * 展开内容渐显（AnimatePresence）。
  *
  * @example
  * <Reasoning text={chainOfThought} active={isStreaming} />
@@ -18,11 +19,44 @@ import "./reasoning.css";
 export function Reasoning({ text, active = false }: { text: string; active?: boolean }) {
   const [open, setOpen] = useState(false);
   const expanded = active || open;
+
+  // 思考计时：startedAt = 首次收到文本；lastChangeAt = 最近一次文本变化。
+  // 「正在思考」= active，或 1.5s 内文本仍在变化（delta 流）。
+  const startedAtRef = useRef<number | null>(null);
+  const lastChangeRef = useRef<number>(0);
+  const [thinking, setThinking] = useState(false);
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    if (!text) return;
+    if (startedAtRef.current === null) startedAtRef.current = Date.now();
+    lastChangeRef.current = Date.now();
+    setThinking(true);
+  }, [text]);
+
+  useEffect(() => {
+    if (!thinking) return;
+    const timer = setInterval(() => {
+      const now = Date.now();
+      const settled = now - lastChangeRef.current > 1500 && !active;
+      const secs = Math.max(1, Math.round((now - (startedAtRef.current ?? now)) / 1000));
+      setSeconds(secs);
+      if (settled) setThinking(false);
+    }, 500);
+    return () => clearInterval(timer);
+  }, [thinking, active]);
+
+  const label = thinking
+    ? `思考中 ${seconds ? `${seconds}s` : "…"}`
+    : seconds > 0
+      ? `已思考 ${seconds}s`
+      : "思考过程";
+
   return (
     <div className="zmz-reasoning">
       <button type="button" className="zmz-reasoning-toggle" aria-expanded={expanded} onClick={() => setOpen((value) => !value)}>
-        <span className={`zmz-reasoning-dot ${active ? "live" : ""}`} aria-hidden />
-        <span>思考过程</span>
+        <span className={`zmz-reasoning-dot ${active || thinking ? "live" : ""}`} aria-hidden />
+        <span>{label}</span>
         <Icon name="chevron-down" size={11} className={expanded ? "zmz-chevron open" : "zmz-chevron"} />
       </button>
       <AnimatePresence initial={false}>

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

@@ -4,13 +4,15 @@ import { useState } from "react";
 
 import { Badge } from "../../components/badge";
 import { Icon } from "../../components/icon/Icon";
-import { formatToolInput, toolDuration, type ToolCall } from "./types";
+import { formatToolInput, formatToolSummary, toolDuration, type ToolCall } from "./types";
 import "./tool-card.css";
 
 /**
  * ToolCard — 单次工具调用卡：状态色左边条 + 展开/收起的输入输出详情。
  *
- * 运行中卡常开；进入终态后收起，点标题可再看输出。
+ * 标题行显示人类可读摘要（v0.9.8 formatToolSummary：`Read src/foo.ts`、
+ * `Bash pnpm build`），引擎提供的 state.title 优先；JSON 结构化输入只出现在
+ * 展开区。运行中卡常开；进入终态后收起，点标题可再看输出。
  * `sessionIdle=true` 时非终态工具渲染为「失败（中断）」——
  * 会话空闲却停在 running 是崩溃/重启的遗留，不该永远转圈。
  *
@@ -22,7 +24,9 @@ export function ToolCard({ call, sessionIdle = false }: { call: ToolCall; sessio
   const state = call.state;
   const running = state.status === "running" || state.status === "pending";
   const interrupted = running && sessionIdle;
-  const title = state.status === "completed" ? state.title : state.status === "running" ? (state.title ?? call.tool) : call.tool;
+  const summary = formatToolSummary(call.tool, state.input);
+  const title = ("title" in state && state.title) || summary || call.tool;
+  const isSummary = !("title" in state && state.title) && !!summary; // 摘要是路径/命令 → 等宽更可读
   const output = state.status === "completed" ? state.output : state.status === "error" ? state.error : null;
   const statusClass = state.status === "completed" ? "completed" : interrupted ? "failed" : state.status === "error" ? "failed" : "running";
   const isOpen = running || expanded;
@@ -31,7 +35,7 @@ export function ToolCard({ call, sessionIdle = false }: { call: ToolCall; sessio
     <div className={`tool-card ${statusClass}`}>
       <button type="button" className="tool-card-trigger" aria-expanded={isOpen} onClick={() => setExpanded((value) => !value)}>
         <span className="tool-card-glyph" aria-hidden><Icon name={state.status === "completed" ? "check" : interrupted || state.status === "error" ? "cross" : "chevron-down"} size={12} /></span>
-        <span className="tool-card-label">{title}</span>
+        <span className={isSummary ? "tool-card-label tool-card-label-mono" : "tool-card-label"}>{title}</span>
         {(state.status === "error" || interrupted) && <Badge variant="danger" size="sm">失败</Badge>}
         {running && !interrupted && <Badge variant="live" size="sm">运行中</Badge>}
         {toolDuration(call) && <span className="tool-card-duration">{toolDuration(call)}</span>}
@@ -75,11 +79,9 @@ export function ToolGroup({ calls, sessionIdle = false }: { calls: ToolCall[]; s
   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
+    ? ("title" in single.state && single.state.title) ||
+      formatToolSummary(single.tool, single.state.input) ||
+      (single.state.status === "error" ? single.state.error : single.tool)
     : null;
   const summary = [
     running.length > 0 && `${running.length} 个进行中`,

package/src/components/tool-card/tool-card.css

@@ -12,6 +12,8 @@
 .tool-card.completed .tool-card-glyph { color: var(--color-success); }
 .tool-card.failed .tool-card-glyph { color: var(--color-danger); }
 .tool-card-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; }
+/* 摘要行（formatToolSummary）：路径/命令用等宽，与 JSON 展开区视觉连续 */
+.tool-card-label-mono { font-family: var(--font-mono); font-size: 0.7rem; }
 .tool-card-duration { flex: 0 0 auto; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.6rem; }
 .tool-card-chevron { flex: 0 0 auto; color: var(--color-muted); transition: transform 0.15s var(--ease-out); }
 .tool-card-chevron.open { transform: rotate(180deg); }

package/src/components/tool-card/types.ts

@@ -39,3 +39,51 @@ export function formatToolInput(input: unknown): string {
     return String(input);
   }
 }
+
+/** 工具输入摘要（v0.9.8）：从 input 的关键字段生成人类可读一行 ——
+ *  `Read src/foo.ts`、`Edit src/bar.ts`、`Bash pnpm build`、`Grep "pat" in src/`。
+ *  字段名与 agent-framework 工具 schema 对齐（path/command/pattern/description…），
+ *  未知工具尽力提取，提取不到返回 null（调用方回落工具名）。 */
+export function formatToolSummary(tool: string, input: unknown): string | null {
+  if (input === null || input === undefined) return null;
+  if (typeof input !== "object") return typeof input === "string" ? oneLine(input) : null;
+  const o = input as Record<string, unknown>;
+  const str = (k: string): string | undefined => (typeof o[k] === "string" && (o[k] as string).trim() ? (o[k] as string).trim() : undefined);
+  const path = str("path") ?? str("file_path") ?? str("filePath") ?? str("notebook_path");
+  const cmd = str("command") ?? str("cmd");
+  const pattern = str("pattern") ?? str("query") ?? str("q");
+  const url = str("url");
+  const desc = str("description") ?? str("prompt") ?? str("task");
+  const cap = (s: string): string => (s.length > 80 ? `${s.slice(0, 80)}…` : s);
+  const verb = tool.charAt(0).toUpperCase() + tool.slice(1);
+  switch (tool) {
+    case "read":
+      return path ? `Read ${cap(path)}` : null;
+    case "glob":
+      return pattern ? `Glob ${cap(pattern)}${path ? ` in ${cap(path)}` : ""}` : path ? `Glob ${cap(path)}` : null;
+    case "grep":
+      return pattern ? `Grep ${cap(pattern)}${path ? ` in ${cap(path)}` : ""}` : path ? `Grep ${cap(path)}` : null;
+    case "edit":
+    case "write":
+      return path ? `${tool === "edit" ? "Edit" : "Write"} ${cap(path)}` : null;
+    case "bash":
+    case "terminal":
+      return cmd ? `Bash ${cap(oneLine(cmd))}` : null;
+    case "webfetch":
+    case "web_fetch":
+      return url ? `Fetch ${cap(url)}` : null;
+    case "task":
+      return desc ? `Task ${cap(oneLine(desc))}` : null;
+    default: {
+      if (path) return `${cap(tool)} ${cap(path)}`;
+      if (cmd) return `${cap(tool)} ${cap(oneLine(cmd))}`;
+      if (url) return `${cap(tool)} ${cap(url)}`;
+      if (desc) return `${cap(tool)} ${cap(oneLine(desc))}`;
+      return null;
+    }
+  }
+}
+
+function oneLine(s: string): string {
+  return s.replace(/\s+/g, " ").trim();
+}