ICEN UI 设计系统

AI 子智能体

子智能体卡 .ai-subagent：activities（AiToolCallModel[]）递归渲染工具卡 / 推理块 / 再嵌套子代理（缩进 + 左侧引导线表达层级）；展开时活动项按 --ai-activity-index 逐条 icen-pop-in 渐入；底部完成回执区。renderAiSubagent(el, model) 返回 update(patch)；第三方 kind 走 ai-core 的 registerAiKind 扩展（demo 里注册了一个 deploy kind）。

上面：运行中，活动流实时更新 · 下面：已完成，点头展开看逐条渐入的嵌套活动（含一层子代理）

<div style="display:flex;flex-direction:column;gap:12px;width:100%">  <div id="ai-sub-live"></div>  <div id="ai-sub-done"></div></div><p class="demo-label" style="margin-top:8px">上面：运行中，活动流实时更新 · 下面：已完成，点头展开看逐条渐入的嵌套活动（含一层子代理）</p>

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

import { initAiSubagent } from '@icen.ai/ui/kit/ai-subagent';initAiSubagent();

也可以用脚手架直接打印引入行：

bunx --bun @icen.ai/ui add ai-subagent

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/ai-tool.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

import { initAiSubagent, renderAiSubagent } from '@icen.ai/ui/kit/ai-subagent';initAiSubagent();   // head 展开/折叠委托（嵌套卡各自独立监听） // activities 是 AiToolCallModel[]，kind: 'subagent' 的项递归渲染子卡const h = renderAiSubagent(el, {  id: 'sa-1', name: 'explore', kind: 'subagent', status: 'running',  input: { task: '搜索 auth 模块的所有入口' },  activities: [    { id: 'a1', name: 'Grep', kind: 'grep', status: 'done', input: { pattern: 'auth' }, output: '6 处命中', durationMs: 900 },  ],});// 活动流按 id 增量 diff：已有的 update、新增的 append（渐入）、消失的移除h.update({ status: 'done', durationMs: 12400, output: 'auth 模块共 3 个入口' });// 第三方 kind：registerAiKind('deploy', { label, icon, tint, summarize })