用途:为 NodeJS-Starter-V1 项目固化实时仪表盘架构,覆盖 Status Command Centre 组件库、后端分析 API 与 Scientific Luxury 设计规则,约束所有数据可视化界面。
主要能力:提供时间线/轨道布局、光谱状态配色、Framer Motion 物理动画、Supabase Realtime 订阅、30 秒轮询、加载骨架与空状态、连接状态指示,以及 en-AU 本地化格式。组件包括 StatusCommandCentre、DataStrip、MetricTile、ProgressOrb、ProgressRing、StatusPulse、StatusBadge、AgentNode、ActivityTimeline、NotificationStream、ElapsedTimer 等,位于 apps/web/components/status-command-centre/。
使用方式:新仪表盘页面用 Server Component 初始取数并带 fallback,实时页订阅 agent_runs 表,非实时页每 30 秒轮询;状态颜色通过 getStatusConfig(status) 获取;日期用 formatDateAU、formatTimestampAU 等工具。
适用场景:新建仪表盘页面、添加实时可视化组件、集成 Supabase Realtime、编写加载/空状态、审查布局合规性。
限制:禁止 grid-cols-2/4 卡片网格、CSS transition、浅色背景、硬编码状态色;采集指标应使用 metrics-collector,邮件模板用 email-template,非仪表盘 UI 用 scientific-luxury。具体安装命令与版本要求暂未提供。