Agentaily Design System — ROADMAP

按能力跟踪这个设计系统能做什么、接下来做什么。详细设计规范见 DESIGN.md;发布与运维见 OPERATIONS.md;消费指南见 skill/SKILL.md。

已完成 (Shipped)

• Foundations — 双主题单色 tokens(亮色 paper 优先,:root 默认;暗色 ink 走 [data-theme="dark"])、Space Grotesk + JetBrains Mono、4px 间距栅格、硬边圆角(2/4/8px)、品牌母题(光标 ▍ / 点阵 / 角标刻线 / mono ALL-CAPS)。布局尺寸 token --topbar-h / --bar-h。(src/tokens、src/foundations)
• 组件库 — 122 个组件 / 15 个类别:buttons · inputs · display · feedback · overlay · layout · chat · ai · code · voice · workflow · utilities,加产品域 settings · auth · review。每个组件 ship .jsx + .d.ts(props 契约)+ .prompt.md(用法)+ .stories.jsx。
• 生产级表单层 — Form / FormActions + 可选的 Form.useForm / Form.useFieldArray(RHF 对齐,零依赖)。(#2)
• 无头 hooks(逻辑层) — Queue.useQueue、AuthDialog.useAuth、VerifyEmailPage.useVerify、Form.useForm / useFieldArray,作为静态属性挂在配对组件上,状态归调用方持有。
• 整页 shells / frames(活组件,非拷贝模板) — AppShell、DesignerShell、DocsLayout、SignInPage、VerifyEmailPage、ConversationThread、ChatApp(整页聊天应用框架:会话历史侧栏 + 活动会话线程),以及设置链:PanelSheet(全屏上浮浮层外壳)→ SettingsSheet(基于它的浮动设置页:左导航 + 右内容),配套 PanelFooter(页脚内容)、SettingsSaveBar(每 tab 显式保存条)、PageSection(通用分区头部,别名 SettingsSection)。
• workbench seams(prop 加法,组件数不变) — DocsLayout 加 collapsed(侧栏折叠到 0)/ flush(children 撑满文章区、无 prose 宽度·内边距,如预览 iframe)/ toc=[](去掉 TOC 列)/ brand={null}(隐藏导航品牌),让它兼作「侧栏 + 内容(+ 可选 TOC)」工作台;Dialog 加 size(sm/md/lg/xl,内容多的弹窗如市场浏览用,body 滚动);WebPreview 加 leading(栏首槽,放侧栏开关)/ onRefresh(刷新按钮生效)/ fill(撑满宿主高度)。三者 .d.ts/.prompt.md 同步。
• 预览工作台(PreviewWorkbench,code) — 文件树(按 页面/脚本/样式 分组,复用 FileTree)+ 右侧运行预览(复用 WebPreview 浏览器边框 iframe);点文件 → 切换预览展示哪个文件(index.html→整页 · .js→该脚本宿主页 · .css/其它→整页带样式),绝不显示代码。把 apps/web 的零构建 VFS 拼装引擎(assembleFilePreview / assembleInlinePreview / previewableEntries / workbenchFileTree)抽进 DS 导出复用;受控/非受控选中 + 侧栏折叠;沙箱 allow-scripts(无 allow-same-origin)。配单测(拼装逻辑 + </script> 转义 + 选中态)。
• 产品域图层 — auth(AuthDialog / AccountControl〔邮箱行可点跳转 onProfile〕 / SignInPage / VerifyEmailPage〔整页邮箱验证:verifying → ok / error 状态机 + useVerify,失败不自动跳、成功倒计时返回、重发带冷却〕)、settings(ConnectionCard 连接卡共享外壳〔基于底层 Card〕→ DeepSeekCard 纯展示连接卡,配 SecretField / StatusPill / TestRow / HelpSteps)、review(MarkupLayer 点选式标注 —— 现为 @agentaily/annotate canonical overlay 的薄 React 门面,带平滑跟随动画、data-mk-label opt-in、scoped 面板)、utilities(Icon 统一 Lucide 集、BrandMark、RotatingTagline 动画品牌标语)。
• 对话消息 markdown 渲染 — <Markdown> 原语(全 GFM:段落/加粗/斜体/删除线/行内代码/代码块/有序·无序·嵌套·任务列表/引用块/表格列对齐/水平线/标题/链接 + 裸 URL;XSS 安全、流式半截容错、双主题);<Message> 正文接受 markdown 字符串(markdown prop 或字符串 children),React-node children 向后兼容。(#16)
• locale-agnostic 文案(headless 派) — DS 不自带 i18n:用户可见文案走 copy prop(英文默认 fallback + 消费方覆盖),沿用 SignInPage / AuthDialog 的 DEFAULT_COPY idiom。settings/账户区已 headless 化:DeepSeekCard(copy 一处贯穿 ConnectionCard → TestRow)、ConnectionCard(copy + testCopy)、TestRow、SettingsSaveBar、AccountControl 各带 copy;SettingsSheet 的 crumb / navLabel 默认翻英文。HelpSteps / PageSection 本就 headless。下游中文产品需传 L() copy。(#35;StatusPill badge 文案 follow-up)
• 单元测试 gate(逻辑层起步) — vitest + @testing-library/react + jsdom,首批覆盖 <Markdown>(XSS 净化 / 全 GFM 语法 / 流式半截容错,30 例);npm test 纳入 done-gate + lefthook pre-push。测试落 tests/(组件目录之外);重引 implementer agent 驱动内环。分层 / 护栏见 TESTING.md。(#18)
• 分发三渠道 — npm 包 @agentaily/design-system(ESM、每组件一模块、可 tree-shake、含 CHANGELOG.md)、托管 Storybook(GitHub Pages)、Agent Skill(skill/SKILL.md)。
• 全自动发版 — Changesets + GitHub Actions(Version PR → npm trusted publishing + GitHub Release)。(#1、#3)
• 非视觉浏览器运行时(吸收 web-kit) — 从 @agentaily/web-kit 移植 theme / i18n / 跨子域持久化进 src/runtime/{theme,i18n,persistence}/,从主 barrel 导出 ThemeProvider / useTheme / themeInitScript / createI18n / createStorage / persistentState。手写非镜像代码,配单测(tests/runtime-*);纯加法、react/react-dom 仍 peerDeps。为弃用 web-kit、把共享代码收敛到唯一上游 DS 铺路。(#39)

进行中 (In progress)

• 弃用 @agentaily/web-kit — 运行时已吸收进 DS(上一条)。下一步:下游(form-design-website / official-website / form-design)改指 DS 的运行时导出,再 deprecate web-kit 包。

待办 (Backlog)

• 自托管品牌字体 — 上生产前把 src/tokens/fonts.css 的 Google Fonts CDN 换成自托管 @font-face。
• 授权条款 — package.json 现为 UNLICENSED,公开发布前确认 license。
• 参考聊天屏 — 把新 AI 原语接进一个完整范例屏(ModelSelector 进 composer、Reasoning/ToolCall 对话回合、⌘K 命令面板)。