@zmzai/theme 0.9.6 → 0.9.8

package/package.json

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

package/src/brand/brand-lockup/BrandLockup.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { cn } from "../../utils/cn";
+import { Logo } from "../logo";
+import { Wordmark } from "../wordmark";
+
+/**
+ * BrandLockup — 全站统一的品牌锁标：云朵 Logo + ZMZAI wordmark + 子站标。
+ *
+ * 背景（2026-08-31）：theme 有两套骨架，品牌区 API 不对称 ——
+ * Navbar 内置 Logo + Wordmark，AppShell 的 brand 只吃 {label, suffix} 文本。
+ * 结果走 Navbar 的站（Folio / Quill / Index / auth）有云朵标，
+ * 走 AppShell 的站（Tome / Plate / Margin）没有。抽成一处，谁都不许自造。
+ *
+ * 纪律（BRAND §7.7）：
+ *   · 云朵 Logo 只出现在品牌锁标里，不单独当装饰散落在页面各处
+ *   · 子站标是站点对外的品牌名（书写系列），不是技术仓库名
+ *
+ * @example
+ * <BrandLockup sublabel="tome" />                     // 白底（默认）
+ * <BrandLockup sublabel="auth" tone="dark" />          // 墨底叙事区
+ */
+export interface BrandLockupProps {
+  /** 云朵标直径（px），默认 22 —— 全站统一，不要按场景私调 */
+  logoSize?: number;
+  /** wordmark 字号（px），默认 16 */
+  markSize?: number;
+  /** ZMZAI 后的子站标，如 "tome" / "quill" / "auth" */
+  sublabel?: string;
+  /** 墨底载体：云朵标反白、文字转暗底配色，默认 "light" */
+  tone?: "light" | "dark";
+  className?: string;
+}
+
+export function BrandLockup({
+  logoSize = 22,
+  markSize = 16,
+  sublabel,
+  tone = "light",
+  className,
+}: BrandLockupProps) {
+  const dark = tone === "dark";
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-2 select-none",
+        dark && "text-dark-ink",
+        className,
+      )}
+    >
+      <Logo size={logoSize} inverted={dark} />
+      <Wordmark
+        size={markSize}
+        sublabel={sublabel}
+        // 墨底时压掉 Wordmark 子标自带的 text-ink-3（暗底上不可读）。
+        // 任意变体选择器特异性高于单类名，能可靠覆盖。
+        className={dark ? "[&>span]:text-dark-ink/45" : undefined}
+      />
+    </span>
+  );
+}

package/src/brand/brand-lockup/index.ts

@@ -0,0 +1,2 @@
+// @zmzai/theme — Brand lockup barrel
+export { BrandLockup, type BrandLockupProps } from "./BrandLockup";

package/src/brand/index.ts

@@ -1,3 +1,4 @@
 // @zmzai/theme — Brand assets barrel
 export * from "./logo";
 export * from "./wordmark";
+export * from "./brand-lockup";

package/src/components/app-shell/AppShell.tsx

@@ -3,6 +3,8 @@
 import { useEffect, useMemo, useState } from "react";
 import type { ComponentType, ReactNode } from "react";
 
+import { BrandLockup } from "../../brand/brand-lockup";
+
 import { Badge } from "../badge/Badge";
 import { Icon, type IconName } from "../icon/Icon";
 import { CommandPalette, type AppPaletteItem } from "./CommandPalette";
@@ -130,9 +132,11 @@ export function AppShell({
   }, [hasPalette]);
 
   const brandBlock = (
-    <Link href={brand.href ?? "/"} className="flex items-baseline gap-1.5 px-2">
-      <span className="text-sm font-semibold tracking-tight">{brand.label}</span>
-      {brand.suffix ? <span className="font-mono text-[11px] text-ink-3">{brand.suffix}</span> : null}
+    <Link href={brand.href ?? "/"} className="flex flex-col gap-1 px-2">
+      {/* 品牌区统一走 BrandLockup（2026-08-31 抽出，与 Navbar 共用一份锁标）。
+          label 同时是顶栏兜底标题与子站标，两处语义一致。 */}
+      <BrandLockup sublabel={brand.label} />
+      {brand.suffix ? <span className="font-mono text-[10px] text-ink-3">{brand.suffix}</span> : null}
     </Link>
   );
 

package/src/components/navbar/Navbar.tsx

@@ -2,8 +2,7 @@
 
 import { type ReactNode, useEffect, useState } from "react";
 import { cn } from "../../utils/cn";
-import { Logo } from "../../brand/logo";
-import { Wordmark } from "../../brand/wordmark";
+import { BrandLockup } from "../../brand/brand-lockup";
 import { Icon } from "../icon/Icon";
 
 /**
@@ -66,12 +65,8 @@ export function Navbar({ sublabel, brand, children, actions, badge, brandHref, m
     return () => window.removeEventListener("keydown", onKey);
   }, [open]);
 
-  const brandNode = brand ?? (
-    <span className="inline-flex items-center gap-2">
-      <Logo size={22} />
-      <Wordmark size={16} sublabel={sublabel} />
-    </span>
-  );
+  // 品牌区统一走 BrandLockup（2026-08-31 抽出，与 AppShell 共用一份锁标）
+  const brandNode = brand ?? <BrandLockup sublabel={sublabel} />;
   const nav = children ? (
     <nav
       className="flex min-w-0 items-center gap-1 overflow-x-auto"

package/src/components/page-header/PageHeader.tsx

@@ -15,6 +15,13 @@
  *   · 描述统一 text-sm text-ink-2 —— ink-3 只有 3.69:1，副文案不用它
  *
  * v0.9.5 追加 centered（居中 Hero，/quill 首页用）。
+ *
+ * v0.9.7 page 变体改版（用户定案 2026-08-31，与 BRAND 戒律 14 同步）：
+ *   · 眉标改 mono 小写间距体（原 sans semibold）—— 等宽小标是全站通用的小节语言
+ *   · 标题从 text-2xl 提到 text-3xl，font-semibold → font-bold —— 衬线的视觉
+ *     体量比无衬线小，不放大反而显得比原来弱
+ *   · 图标从 text-ink 降到 text-ink-2 —— 图标是辅助信息，不该跟标题同权重
+ *   · 描述加 max-w-2xl + leading-7 —— 衬线大标题下的 sans 正文要更松才不挤
  */
 
 import type { ReactNode } from "react";
@@ -93,19 +100,19 @@ export function PageHeader({
     <header className={`flex flex-wrap items-end justify-between gap-3 ${className}`}>
       <div className="min-w-0">
         {eyebrow ? (
-          <small className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-3">
+          <small className="mb-1.5 block font-mono text-[11px] uppercase tracking-[0.16em] text-ink-3">
             {eyebrow}
           </small>
         ) : null}
-        <div className="flex min-w-0 items-center gap-2">
-          {icon ? <Icon name={icon} size={20} className="shrink-0 text-ink" /> : null}
-          <h1
-            className={`font-serif text-2xl font-semibold tracking-tight text-ink ${titleClassName}`}
-          >
+        <div className="flex min-w-0 items-center gap-2.5">
+          {icon ? <Icon name={icon} size={20} strokeWidth={1.5} className="shrink-0 text-ink-2" /> : null}
+          <h1 className={`font-serif text-3xl font-bold leading-[1.2] tracking-tight text-ink ${titleClassName}`}>
             {title}
           </h1>
         </div>
-        {description ? <p className="mt-2 text-sm leading-6 text-ink-2">{description}</p> : null}
+        {description ? (
+          <p className="mt-2.5 max-w-2xl text-sm leading-7 text-ink-2">{description}</p>
+        ) : null}
       </div>
       {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
     </header>

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();
+}