weifuwu 0.57.0 → 0.59.0

package/dist/client/ai.d.ts

@@ -0,0 +1,59 @@
+/**
+ * weifuwu/client AI 解码器 — 消费 wf: 协议（docs/ai-contract.md）
+ *
+ * 协议的前端参考实现：POST → 解析 SSE → 按事件名分发回调。
+ *
+ * - 零依赖：fetch + ReadableStream + 自研 SSE 解析
+ * - 未知事件透传不抛错（协议 §6）：x:* 走 onEvent，未订阅的跳过
+ * - 事件录制（副产品）：record 开启时记录完整事件序列，可导出为测试 fixture
+ * - trace 桥（协议 §7）：默认自动生成 X-Trace-Id 并随请求发送，
+ *   后端以之作为 wf:message_start.id → 整个 agent run 一次搜完
+ * - abort：handle.abort() 或外部 signal → 取消请求 → 后端断开 → provider 取消
+ */
+import type { WfApprovalRequest, WfDone, WfError, WfStreamEvent, WfToolCall, WfToolProgress, WfToolResult, WfUsage } from '../ai/types.ts';
+export interface AiStreamCallbacks {
+    /** wf:token — 增量文本，直接 append */
+    onToken?: (text: string) => void;
+    /** wf:tool_call — 完整工具调用（后端已聚合） */
+    onToolCall?: (call: WfToolCall) => void;
+    /** wf:tool_result — ok:false 不代表会话结束 */
+    onToolResult?: (result: WfToolResult) => void;
+    /** wf:tool_progress — 长任务进度 */
+    onToolProgress?: (p: WfToolProgress) => void;
+    /** wf:step — 步骤可视化（agent 扩展） */
+    onStep?: (s: {
+        type: 'llm' | 'tool';
+        content?: string;
+        toolCallId?: string;
+        name?: string;
+    }) => void;
+    /** wf:approval_request — 渲染审批卡片 */
+    onApproval?: (req: WfApprovalRequest) => void;
+    /** wf:usage — token 计数 */
+    onUsage?: (u: WfUsage) => void;
+    /** wf:done — 收尾 */
+    onDone?: (d: WfDone) => void;
+    /** wf:error — 错误即值，结构化降级 */
+    onError?: (e: WfError) => void;
+    /** x:* 自定义事件透传兜底（协议 §6：框架不解释） */
+    onEvent?: (name: string, data: unknown) => void;
+}
+export interface AiStreamOptions extends AiStreamCallbacks {
+    signal?: AbortSignal;
+    headers?: Record<string, string>;
+    /** 显式指定 traceId；默认自动生成（协议 §7） */
+    traceId?: string;
+    /** 录制事件序列（调试/导出 fixture），默认开启，环形上限 1000 */
+    record?: boolean;
+}
+export interface AiStreamHandle {
+    /** 取消请求（用户停止/组件卸载/导航跳走时调用） */
+    abort: () => void;
+    /** 流结束（正常 done / error / abort 都 resolve） */
+    done: Promise<void>;
+    /** 本次请求使用的 traceId（自动生成的也能拿到） */
+    traceId: string;
+    /** 录制的事件序列（record: true 时） */
+    events: WfStreamEvent[];
+}
+export declare function aiStream(url: string, body: unknown, options?: AiStreamOptions): AiStreamHandle;

package/dist/client/index.d.ts

@@ -31,6 +31,9 @@ export { ApiError } from './middleware/api.ts';
 export type { AuthClient, AuthOptions, AuthInjected } from './middleware/auth.ts';
 export { extendCtx } from './types.ts';
 export type { WfuiContext, AppMiddleware, RouteDef } from './types.ts';
+export { aiStream } from './ai.ts';
+export type { AiStreamCallbacks, AiStreamOptions, AiStreamHandle } from './ai.ts';
+export type { WfStreamEvent, WfMessageStart, WfToken, WfUsage, WfDone, WfError, WfErrorCode, WfToolCall, WfToolResult, WfToolProgress, WfStep, WfApprovalRequest, WfApprovalResponse, WfApprovalDecision, ChatMessage, ChatParams, MessageRole, ToolCall, ToolDefinition, } from '../ai/types.ts';
 export { ErrorBoundary } from './error-boundary.ts';
 export type { ErrorBoundaryProps } from './error-boundary.ts';
 export { i18n } from './i18n.ts';

package/dist/client/index.js

@@ -1584,6 +1584,133 @@ function auth(options) {
   };
 }
 
+// src/client/ai.ts
+var RECORD_LIMIT = 1e3;
+function aiStream(url, body, options) {
+  const controller = new AbortController();
+  const external = options?.signal;
+  if (external) {
+    if (external.aborted) controller.abort();
+    else external.addEventListener("abort", () => controller.abort(), { once: true });
+  }
+  const traceId = options?.traceId ?? randomId();
+  const record = options?.record !== false;
+  const events = [];
+  const done = (async () => {
+    let res;
+    try {
+      res = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Trace-Id": traceId,
+          Accept: "text/event-stream",
+          ...options?.headers
+        },
+        body: JSON.stringify(body),
+        signal: controller.signal
+      });
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      options?.onError?.({ code: "provider_error", message: err instanceof Error ? err.message : String(err) });
+      return;
+    }
+    if (!res.ok) {
+      options?.onError?.({
+        code: httpErrorCode(res.status),
+        message: `HTTP ${res.status} ${res.statusText}`
+      });
+      return;
+    }
+    try {
+      for await (const { name, data } of parseWfEvents(res.body)) {
+        if (controller.signal.aborted) return;
+        pushEvent(events, { name, data }, record);
+        dispatch(name, data, options ?? {});
+      }
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      options?.onError?.({ code: "provider_error", message: err instanceof Error ? err.message : String(err) });
+    }
+  })();
+  return {
+    abort: () => controller.abort(),
+    done,
+    traceId,
+    events
+  };
+}
+function dispatch(name, data, o) {
+  switch (name) {
+    case "wf:token":
+      return o.onToken?.(data.text);
+    case "wf:tool_call":
+      return o.onToolCall?.(data);
+    case "wf:tool_result":
+      return o.onToolResult?.(data);
+    case "wf:tool_progress":
+      return o.onToolProgress?.(data);
+    case "wf:step":
+      return o.onStep?.(data);
+    case "wf:approval_request":
+      return o.onApproval?.(data);
+    case "wf:usage":
+      return o.onUsage?.(data);
+    case "wf:done":
+      return o.onDone?.(data);
+    case "wf:error":
+      return o.onError?.(data);
+    default:
+      return o.onEvent?.(name, data);
+  }
+}
+async function* parseWfEvents(stream) {
+  const reader = stream.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const blocks = buffer.split("\n\n");
+      buffer = blocks.pop() ?? "";
+      for (const block of blocks) {
+        let name = "message";
+        let data = "";
+        for (const line of block.split("\n")) {
+          if (line.startsWith("event: ")) name = line.slice(7);
+          else if (line.startsWith("data: ")) data += line.slice(6);
+        }
+        if (!data) continue;
+        try {
+          yield { name, data: JSON.parse(data) };
+        } catch {
+        }
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+function pushEvent(events, e, record) {
+  if (!record) return;
+  if (events.length >= RECORD_LIMIT) events.shift();
+  events.push(e);
+}
+function httpErrorCode(status) {
+  if (status === 401 || status === 403) return "auth_failed";
+  if (status === 429) return "rate_limited";
+  if (status >= 500) return "provider_error";
+  return "invalid_request";
+}
+function randomId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `trace-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
 // src/client/error-boundary.ts
 function ErrorBoundary(props, ctx) {
   let error = null;
@@ -1842,6 +1969,7 @@ export {
   Fragment,
   Portal,
   RouteView,
+  aiStream,
   api,
   asyncComponent,
   auth,

package/dist/components/ApprovalCard/ApprovalCard.d.ts

@@ -0,0 +1,30 @@
+import type { Component } from '../../client/vnode.ts';
+import type { WfApprovalRequest } from '../../ai/types.ts';
+/**
+ * ApprovalCard — 人工审批卡片（wf: 协议 §4.5 交互原语）
+ *
+ * 状态机：pending（待批，允许/拒绝 + 备注）→ approved / rejected / timeout（终态）。
+ * 纯受控组件：决策回传由 onApprove / onReject 上抛（app 负责 POST /approve）。
+ *
+ * ```tsx
+ * <ApprovalCard
+ *   request={approvalReq}
+ *   onApprove={() => respond('approved')}
+ *   onReject={(note) => respond('rejected', note)}
+ * />
+ * ```
+ */
+export type ApprovalStatus = 'pending' | 'approved' | 'rejected' | 'timeout';
+export interface ApprovalCardProps {
+    /** wf:approval_request 数据 */
+    request: WfApprovalRequest;
+    /** 卡片状态（默认 pending） */
+    status?: ApprovalStatus;
+    /** 用户点"允许" */
+    onApprove?: () => void;
+    /** 用户点"拒绝"，note 为可选备注（进 agent 上下文） */
+    onReject?: (note?: string) => void;
+    /** 自定义详情渲染（默认显示 name + args） */
+    renderDetail?: (request: WfApprovalRequest) => any;
+}
+export declare const ApprovalCard: Component<ApprovalCardProps>;

package/dist/components/Avatar/Avatar.d.ts

@@ -3,5 +3,7 @@ export interface AvatarProps {
     name?: string;
     src?: string;
     size?: 'sm' | 'md' | 'lg';
+    /** 指定背景色（覆盖按名字哈希的颜色），如按类型着色：user=蓝 / ai=紫 */
+    color?: string;
 }
 export declare const Avatar: Component<AvatarProps>;

package/dist/components/Card/Card.d.ts

@@ -3,6 +3,10 @@ export interface CardProps {
     variant?: 'default' | 'outlined';
     padding?: 'sm' | 'md' | 'lg';
     clickable?: boolean;
+    /** hover 抬升（阴影 + 上移），适合可点击/可悬停的卡片 */
+    hover?: boolean;
+    /** 选中态（边框高亮 + 品牌浅底），适合选择卡片 */
+    active?: boolean;
     onClick?: () => void;
     children?: any;
 }

package/dist/components/Input/Input.d.ts

@@ -9,6 +9,8 @@ export interface InputProps {
     disabled?: boolean;
     error?: string;
     hint?: string;
+    /** 边框变体：borderless 用于可编辑标题/内联编辑（hover/focus 才显边框） */
+    variant?: 'default' | 'borderless';
     onInput?: (e: Event) => void;
     onChange?: (e: Event) => void;
 }

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,22 @@
+import type { Component } from '../../client/vnode.ts';
+export interface SegmentedOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    /** 选项列表（label 可为字符串或任意 VNode） */
+    options: SegmentedOption[];
+    /** 当前选中值 */
+    value?: string;
+    onChange?: (value: string) => void;
+    size?: 'sm' | 'md';
+    /** 撑满父容器宽度（选项等分） */
+    block?: boolean;
+    ariaLabel?: string;
+}
+/**
+ * 分段控件 — 单选切换（模式切换 / 状态筛选 / 模板选择）
+ * 语义：toggle group（aria-pressed），键盘 focus-visible 可见
+ */
+export declare const SegmentedControl: Component<SegmentedControlProps>;

package/dist/components/StatCard/StatCard.d.ts

@@ -5,5 +5,7 @@ export interface StatCardProps {
     trend?: 'up' | 'down';
     trendLabel?: string;
     icon?: string;
+    /** 点击跳转/交互（悬停抬升 + role=button） */
+    onClick?: () => void;
 }
 export declare const StatCard: Component<StatCardProps>;

package/dist/components/Textarea/Textarea.d.ts

@@ -8,6 +8,10 @@ export interface TextareaProps {
     error?: string;
     hint?: string;
     rows?: number;
+    /** 最大字符数（同时限制输入） */
+    maxLength?: number;
+    /** 显示字数统计（右下角；配合受控 value 实时更新） */
+    showCount?: boolean;
     onInput?: (e: Event) => void;
 }
 export declare const Textarea: Component<TextareaProps>;

package/dist/components/ToolCallCard/ToolCallCard.d.ts

@@ -0,0 +1,23 @@
+import type { Component } from '../../client/vnode.ts';
+import type { WfToolCall, WfToolProgress, WfToolResult } from '../../ai/types.ts';
+/**
+ * ToolCallCard — 工具调用卡片（wf: 协议 §4 交互原语）
+ *
+ * 纯展示组件：接收协议事件数据 + 可选回调，无内部状态。
+ * 状态机：running（等待/执行中，带进度条）→ ok / error（有 result 时）。
+ *
+ * ```tsx
+ * <ToolCallCard call={toolCall} progress={progress} result={result} />
+ * ```
+ */
+export interface ToolCallCardProps {
+    /** wf:tool_call 数据 */
+    call: WfToolCall;
+    /** wf:tool_progress 数据（可选，展示进度条） */
+    progress?: WfToolProgress;
+    /** wf:tool_result 数据（可选，ok/error 终态） */
+    result?: WfToolResult;
+    /** 自定义参数渲染（默认 JSON.stringify） */
+    renderArgs?: (args: Record<string, unknown>) => any;
+}
+export declare const ToolCallCard: Component<ToolCallCardProps>;

package/dist/components/index.d.ts

@@ -59,6 +59,8 @@ export { Slider } from './Slider/Slider.ts';
 export type { SliderProps } from './Slider/Slider.ts';
 export { SearchInput } from './SearchInput/SearchInput.ts';
 export type { SearchInputProps } from './SearchInput/SearchInput.ts';
+export { SegmentedControl } from './SegmentedControl/SegmentedControl.ts';
+export type { SegmentedControlProps, SegmentedOption } from './SegmentedControl/SegmentedControl.ts';
 export { ProgressBar } from './ProgressBar/ProgressBar.ts';
 export type { ProgressBarProps } from './ProgressBar/ProgressBar.ts';
 export { Accordion } from './Accordion/Accordion.ts';
@@ -92,3 +94,7 @@ export type { EditorProps, ToolbarItem } from './Editor/Editor.ts';
 export { ThemeSwitch } from './ThemeSwitch/ThemeSwitch.ts';
 export type { ThemeSwitchProps, ThemeMode } from './ThemeSwitch/ThemeSwitch.ts';
 export { applyTheme, getTheme } from './ThemeSwitch/ThemeSwitch.ts';
+export { ToolCallCard } from './ToolCallCard/ToolCallCard.ts';
+export type { ToolCallCardProps } from './ToolCallCard/ToolCallCard.ts';
+export { ApprovalCard } from './ApprovalCard/ApprovalCard.ts';
+export type { ApprovalCardProps, ApprovalStatus } from './ApprovalCard/ApprovalCard.ts';

package/dist/components/index.js

@@ -52,9 +52,9 @@ var Button = (_init, ctx) => (props) => {
 
 // src/components/Input/Input.ts
 var Input = (_init) => (props) => {
-  const { label, name, type = "text", value, placeholder, required, disabled, error, hint, onInput, onChange } = props;
+  const { label, name, type = "text", value, placeholder, required, disabled, error, hint, variant = "default", onInput, onChange } = props;
   const inputEl = h("input", {
-    class: "wf-input",
+    class: `wf-input${variant === "borderless" ? " wf-input--borderless" : ""}`,
     name: name || void 0,
     type,
     value: value ?? "",
@@ -79,7 +79,7 @@ var Input = (_init) => (props) => {
 
 // src/components/Textarea/Textarea.ts
 var Textarea = (_init, _ctx) => (props) => {
-  const { label, value, placeholder, required, disabled, error, hint, rows = 3, onInput } = props;
+  const { label, value, placeholder, required, disabled, error, hint, rows = 3, maxLength, showCount, onInput } = props;
   const textareaEl = h("textarea", {
     class: "wf-textarea",
     value: value ?? "",
@@ -87,6 +87,7 @@ var Textarea = (_init, _ctx) => (props) => {
     required: required || void 0,
     disabled: disabled || void 0,
     rows,
+    maxLength,
     onInput
   });
   const children = [];
@@ -96,6 +97,14 @@ var Textarea = (_init, _ctx) => (props) => {
     children.push(h("label", { class: "wf-textarea-label" }, labelContent));
   }
   children.push(textareaEl);
+  if (showCount) {
+    const len = (value ?? "").length;
+    const over = maxLength != null && len > maxLength;
+    children.push(h("div", {
+      class: `wf-textarea-count${over ? " wf-textarea-count--over" : ""}`,
+      "aria-live": "polite"
+    }, maxLength != null ? `${len}/${maxLength}` : String(len)));
+  }
   if (error) children.push(h("div", { class: "wf-textarea-err" }, error));
   if (hint && !error) children.push(h("div", { class: "wf-textarea-hint" }, hint));
   return h("div", { class: `wf-textarea-wrap${error ? " wf-textarea--err" : ""}` }, children);
@@ -1059,12 +1068,14 @@ function getPageRange(current, total) {
 
 // src/components/Card/Card.ts
 var Card = (_init, _ctx) => (props) => {
-  const { variant = "default", padding = "md", clickable, onClick, children } = props;
+  const { variant = "default", padding = "md", clickable, hover, active, onClick, children } = props;
   const cls = [
     "wf-card",
     `wf-card--${variant}`,
     `wf-card--pad-${padding}`,
-    clickable && "wf-card--clickable"
+    clickable && "wf-card--clickable",
+    hover && "wf-card--hover",
+    active && "wf-card--active"
   ].filter(Boolean).join(" ");
   return h("div", { class: cls, onClick, role: clickable ? "button" : void 0, tabindex: clickable ? 0 : void 0 }, children);
 };
@@ -1086,7 +1097,7 @@ function hashColor(name) {
   return COLORS[Math.abs(hash) % COLORS.length];
 }
 var Avatar = (_init, _ctx) => (props) => {
-  const { name = "", src, size = "md" } = props;
+  const { name = "", src, size = "md", color } = props;
   const initial = name.trim()[0]?.toUpperCase() ?? "?";
   if (src) {
     return h("img", {
@@ -1097,7 +1108,7 @@ var Avatar = (_init, _ctx) => (props) => {
   }
   return h("div", {
     class: `wf-avatar wf-avatar--${size}`,
-    style: { background: hashColor(name) }
+    style: { background: color ?? hashColor(name) }
   }, initial);
 };
 
@@ -1113,7 +1124,7 @@ var Tag = (_init, _ctx) => (props) => {
 
 // src/components/StatCard/StatCard.ts
 var StatCard = (_init, _ctx) => (props) => {
-  const { label, value, trend, trendLabel, icon } = props;
+  const { label, value, trend, trendLabel, icon, onClick } = props;
   const children = [];
   if (icon) children.push(h("div", { class: "wf-stat-icon" }, icon));
   children.push(h("div", { class: "wf-stat-value" }, String(value)));
@@ -1126,7 +1137,12 @@ var StatCard = (_init, _ctx) => (props) => {
       trendLabel ? h("span", { class: "wf-stat-trend-label" }, trendLabel) : null
     ].filter(Boolean)));
   }
-  return h("div", { class: "wf-stat" }, children);
+  return h("div", {
+    class: `wf-stat${onClick ? " wf-stat--clickable" : ""}`,
+    onClick,
+    role: onClick ? "button" : void 0,
+    tabindex: onClick ? 0 : void 0
+  }, children);
 };
 
 // src/components/Steps/Steps.ts
@@ -1279,6 +1295,27 @@ var SearchInput = (_init, _ctx) => (props) => {
   ].filter(Boolean));
 };
 
+// src/components/SegmentedControl/SegmentedControl.ts
+var SegmentedControl = (_init, _ctx) => (props) => {
+  const { options, value, onChange, size = "md", block, ariaLabel } = props;
+  const cls = [
+    "wf-segmented",
+    size === "sm" && "wf-segmented--sm",
+    block && "wf-segmented--block"
+  ].filter(Boolean).join(" ");
+  return h(
+    "div",
+    { class: cls, role: "group", "aria-label": ariaLabel },
+    options.map((opt) => h("button", {
+      type: "button",
+      class: `wf-segmented-option${opt.value === value ? " wf-segmented-option--active" : ""}`,
+      "aria-pressed": opt.value === value ? "true" : "false",
+      disabled: opt.disabled || void 0,
+      onClick: opt.disabled ? void 0 : () => onChange?.(opt.value)
+    }, opt.label))
+  );
+};
+
 // src/components/ProgressBar/ProgressBar.ts
 var ProgressBar = (_init, ctx) => (props) => {
   const { value = 0, max = 100, label, showValue } = props;
@@ -3084,9 +3121,94 @@ var ThemeSwitch = (initProps, ctx) => {
     }, segments);
   };
 };
+
+// src/components/ToolCallCard/ToolCallCard.ts
+var stateIcon = { running: "\u2699", ok: "\u2713", error: "\u2715" };
+var ToolCallCard = (_init, _ctx) => (props) => {
+  const { call, progress, result, renderArgs } = props;
+  const state = result ? result.ok ? "ok" : "error" : "running";
+  const argsNode = renderArgs ? renderArgs(call.args) : h("code", { class: "wf-toolcall-args" }, JSON.stringify(call.args));
+  const progressNode = progress ? [
+    progress.message ? h("div", { class: "wf-toolcall-msg" }, `${progress.message} (${progress.step}/${progress.total})`) : null,
+    h("div", { class: "wf-toolcall-bar", role: "progressbar", "aria-valuenow": progress.step, "aria-valuemax": progress.total }, [
+      h("div", {
+        class: "wf-toolcall-bar-fill",
+        style: { width: `${Math.min(100, progress.step / Math.max(1, progress.total) * 100)}%` }
+      })
+    ])
+  ] : null;
+  const errorNode = result && !result.ok && result.error ? h("div", { class: "wf-toolcall-error" }, `${result.error.code}: ${result.error.message}`) : null;
+  return h("div", { class: `wf-toolcall wf-toolcall--${state}` }, [
+    h("div", { class: "wf-toolcall-header" }, [
+      h("span", { class: `wf-toolcall-icon wf-toolcall-icon--${state}` }, stateIcon[state]),
+      h("span", { class: "wf-toolcall-name" }, call.name)
+    ]),
+    h("div", { class: "wf-toolcall-body" }, [argsNode, progressNode, errorNode].filter(Boolean))
+  ]);
+};
+
+// src/components/ApprovalCard/ApprovalCard.ts
+var statusText = {
+  pending: "\u7B49\u5F85\u5BA1\u6279",
+  approved: "\u5DF2\u6279\u51C6",
+  rejected: "\u5DF2\u62D2\u7EDD",
+  timeout: "\u5BA1\u6279\u8D85\u65F6"
+};
+var ApprovalCard = (_init, ctx) => {
+  let note = "";
+  let showNote = false;
+  return (props) => {
+    const { request, status = "pending", onApprove, onReject, renderDetail } = props;
+    const detail = renderDetail ? renderDetail(request) : [
+      h("div", { class: "wf-approval-name" }, request.name),
+      h("code", { class: "wf-approval-args" }, JSON.stringify(request.args))
+    ];
+    const actions = status === "pending" ? h("div", { class: "wf-approval-actions" }, [
+      showNote ? h("div", { class: "wf-approval-note" }, [
+        h("input", {
+          class: "wf-approval-note-input",
+          placeholder: "\u5907\u6CE8\uFF08\u62D2\u7EDD\u539F\u56E0\uFF0C\u5C06\u8FDB\u5165 agent \u4E0A\u4E0B\u6587\uFF09\u2026",
+          value: note,
+          onInput: (e) => {
+            note = e.target.value;
+          }
+        })
+      ]) : null,
+      h("div", { class: "wf-approval-btns" }, [
+        h("button", {
+          class: "wf-btn wf-btn--primary wf-btn--sm",
+          type: "button",
+          onClick: () => onApprove?.()
+        }, "\u5141\u8BB8"),
+        h("button", {
+          class: "wf-btn wf-btn--danger wf-btn--sm",
+          type: "button",
+          onClick: () => {
+            if (!showNote) {
+              showNote = true;
+              ctx.ui.render();
+              return;
+            }
+            onReject?.(note);
+          }
+        }, showNote ? "\u786E\u8BA4\u62D2\u7EDD" : "\u62D2\u7EDD")
+      ])
+    ].filter(Boolean)) : h("div", { class: `wf-approval-status wf-approval-status--${status}` }, statusText[status]);
+    return h("div", { class: `wf-approval wf-approval--${status}` }, [
+      h("div", { class: "wf-approval-header" }, [
+        h("span", { class: "wf-approval-icon" }, status === "pending" ? "\u23F8" : status === "approved" ? "\u2713" : "\u2715"),
+        h("span", { class: "wf-approval-title" }, "\u5DE5\u5177\u5BA1\u6279")
+      ]),
+      h("div", { class: "wf-approval-detail" }, detail),
+      request.reason ? h("div", { class: "wf-approval-reason" }, request.reason) : null,
+      actions
+    ]);
+  };
+};
 export {
   Accordion,
   Alert,
+  ApprovalCard,
   Avatar,
   Badge,
   Breadcrumb,
@@ -3115,6 +3237,7 @@ export {
   ProgressBar,
   RadioGroup,
   SearchInput,
+  SegmentedControl,
   Select,
   Skeleton,
   Slider,
@@ -3127,6 +3250,7 @@ export {
   Textarea,
   ThemeSwitch,
   Toast,
+  ToolCallCard,
   Tooltip,
   applyTheme,
   confirm,