PulseBot 应用构建器

要解决什么问题

当你要做一个数据处理小工具、管道可视化、实时看板或流式分析前端，而数据源是 Timeplus Proton 时，常见路径是搭 React 工程、装 npm 包、配构建与代理。这个技能的目标是把交付物收敛成一个可直接用浏览器打开的 HTML 文件：通过 CDN 加载 @timeplus/proton-javascript-driver 与 @timeplus/vistral 的 UMD 构建，直连本机 localhost:8001 上的 Proton agent 代理，并用 Vistral 组件渲染图表。

技能如何工作

流程从澄清需求开始：流/表名、可视化类型（时序、柱状、表格、单值、多面板）、查询是流式（SELECT ... FROM stream_name）还是历史（SELECT ... FROM table(stream_name)），以及过滤与窗口聚合。若 schema 不明，会先建议 DESCRIBE / SHOW STREAMS。

实现上固定走单文件 HTML 模板：脚本顺序为 React → ReactDOM → lodash → ramda → @antv/g2 → @antv/s2 → vistral → proton-javascript-driver；从 window.ProtonDriver 取 ProtonClient，配置 { host: 'localhost', port: 8001 }；从 window.Vistral 使用 StreamChart、SingleValueChart、DataTable 等，图表经 React.createElement 渲染且 theme="dark"。首行数据用 inferColumns() 推断列；chartType 与 temporal 模式需与查询类型匹配（例如时序用 line/area + axis，排行快照用 bar + frame）。样式遵循 Timeplus App Style Guide（如背景 #0f1117、卡片 #1e2235、主色 #7c6af7、56px 顶栏与 LIVE/连接状态）。交付前会核对：无独立 JS/CSS、无 package.json、SQL 语法正确、可 abort() 停止查询、状态指示在连接/结束/错误时更新。

适用边界

• 依赖本机 8001 端口 Proton 代理；不是通用 BI 或任意数据库前端生成器。
• 复杂 SQL（窗口函数 tumble/hop/session、join 等）需结合 timeplus-sql-guide 等资料，本技能侧重应用壳与可视化拼装。
• PulseBot 部署相关步骤在 SKILL 中有单独说明，与「单文件本地打开」是同一套 HTML 产物上的延伸。