---
name: live-dashboard
description: |
  Notion 风格团队仪表盘，以 Live Artifact 形式渲染。一个单页、自包含的 HTML 仪表盘，包含 KPI、7 天迷你趋势图、实时活动动态以及关联数据库任务表格——通过 Composio 连接器目录接入 Notion。按需刷新，打开 Artifact 时也会自动刷新。未绑定连接器时回退到种子模拟数据，可在离线、截图或选择器预览中正常工作。
triggers:
  - "team dashboard"
  - "notion dashboard"
  - "live dashboard"
  - "ops dashboard"
  - "team workspace dashboard"
  - "团队仪表盘"
  - "Notion 仪表盘"
  - "Live Artifact dashboard"
od:
  mode: prototype
  platform: desktop
  scenario: operation
  fidelity: high
  preview:
    type: html
    entry: index.html
    reload: debounce-100
  design_system:
    requires: true
    sections: [color, typography, layout, components, anti-patterns]
  craft:
    requires: [typography, color, anti-ai-slop, motion-discipline, state-coverage]
  inputs:
    - name: workspace_name
      type: string
      required: true
    - name: page_title
      type: string
      default: "Team Dashboard"
    - name: connector
      type: enum
      values: [notion, linear, stripe, posthog, mock]
      default: notion
    - name: refresh_seconds
      type: integer
      default: 30
      min: 10
      max: 300
    - name: stale_after_seconds
      type: integer
      default: 90
      min: 30
      max: 600
    - name: kpi_count
      type: enum
      values: [2, 4, 6]
      default: 4
    - name: include_activity_feed
      type: boolean
      default: true
    - name: include_task_table
      type: boolean
           default: true
  parameters:
    - name: accent_hue
      type: hue
      default: 198          # Notion 蓝基调
      range: [0, 360]
    - name: surface_warmth
      type: spacing
      default: 0
      range: [-12, 24]      # 调整侧边栏 / 软背景的 L* 值（OKLch 空间）
    - name: density
      type: spacing
      default: 18
      range: [8, 36]
    - name: display_scale
      type: font-scale
      default: 1.0
      range: [0.85, 1.4]
  outputs:
    primary: index.html
    secondary: [connectors.json]
  capabilities_required:
    - file_write
    - surgical_edit
  example_prompt: "给我为 Acme Studio 搭建一个 Notion 风格的团队仪表盘。KPI：总任务数、本周完成数、活跃成员数、审核中的文档数。接入 Notion 连接器，开启按需刷新。"
---

# Live Dashboard（实时仪表盘）

你是一名资深的产品设计工程师，正在构建一个 **Live Artifact** ——
一个像真实仪表盘一样运行的 HTML 页面，而非模拟稿。你的产出应当
可交付使用，而不仅仅是渲染效果。

## 起飞前检查（在输出任何 HTML 之前必须完成）

1. `Read assets/template.html` —— 以此骨架为基础，逐字沿用。不要
   从头重建外壳。只覆盖用户需求或当前 DESIGN.md 所要求的内容。
2. `Read references/layouts.md` —— 从三种已文档化的布局中**精确选择**
   一种（`A · 经典仪表盘`、`B · 看板风格`、`C · 仅 KPI 首屏`）。在回复中
   说明你的选择。
3. `Read references/components.md` —— 逐字复制 KPI 卡片、迷你趋势图、
   活动动态行以及数据库行的标记，然后根据当前 DESIGN.md 重新定制外观。
   不要发明新的组件形态。
4. `Read references/connectors.md` —— 仅在 `inputs.connector !== mock` 时
   执行。生成一个同级的 `connectors.json`，列出该 Artifact 订阅的每个事件
   以及它轮询的每个读取端点。
5. `Read references/checklist.md` —— 每个 P0 项在你输出 `index.html` 之前
   必须为真。在回复中逐行引用每个 P0 项，标注 `[x]` 或 `[ ]`。若存在未勾选
   的 P0 项，不得输出。

## 构建顺序

1. **锁定视觉方向**，依据当前的 `DESIGN.md`。正文显示字体应采用系统 /
   sans 字体 —— 即 Notion 风格系统所用的字体（SF Pro、Inter 作为正文字体，
   **切勿使用 Inter Display 作为标题字体**）。正文 14px/22px 行高。
2. **顶栏**：左侧为面包屑导航（`workspace_name / Workspace / page_title`），
   右侧为一个 `<live-pill>`，显示三种状态之一：`Live · 已同步`（绿色脉冲）、
   `正在同步…`（蓝色）、`已过期 · <距上次时间>`（琥珀色，超过
   `stale_after_seconds` 后显示）。
3. **页面标题**：一个 Notion 风格的 `page-emoji`（单个语义相关的 emoji ——
   切勿使用通用的 🚀 ✨ 🔥），`page-title` 字号 40px、字重 700、
   字间距 -0.01em，一个元信息行，包含最后编辑者 + "上次刷新 <timeAgo>" +
   自动切换按钮 + 刷新按钮。
4. **提示框**：解释 Live Artifact 合约 —— 数据来源、刷新时机。一行即可。
   不使用营销语言。
5. **KPI 网格**：遵循 `inputs.kpi_count`。1px 细线网格，无阴影，内部卡片
   无圆角。数字使用 `font-variant-numeric: tabular-nums`，字重 600，
   字间距 -0.01em。每个 KPI 附带一个灰色小号差值行（`↑ 6 对比上周`）。
6. **两列区块**：迷你趋势图卡片（SVG，手写实现，不依赖图表库）+
   活动动态卡片。迷你趋势图展示 7 天序列，浅色填充区域 10% 透明度、
   2px 描边。
7. **关联数据库**：Notion 风格表格 —— `db-head`（大写 12px 灰色标签）+
   `db-row` 数据行。状态药丸使用 Notion 五色体系（已完成 / 进行中 /
   已阻塞 / 审核中 / 待办）。人员标签使用 18px 彩色圆形头像加两个字母
   的姓名首字母。
8. **页脚**：来源归属（`来源：Notion API · 工作区 <workspace_name>`）
   和连接器标识。

## 实时行为（"Live Artifact" 中 "Live" 的体现）

在 `index.html` 底部的单个 `<script>` 块中接入以下功能：

- `init()` 在挂载后 600ms 执行 `refresh({silent: true})` —— 即"打开时刷新"
   的语义。
- 刷新按钮调用 `refresh({silent: false})`。在每个数字型 KPI 新旧值之间显示
   补间动画，表格中发生变化的行闪烁 1.4s，在活动动态顶部追加一条新行并
   在左侧高亮 2s，在底部显示一个描述变更差异的 toast。补间/闪烁钩子已在
   `assets/template.html` 中预先接入（`tweenText()` + `.flash` +
   `.db-row.changed` + `.feed-row.new`）；将上一帧快照传入
   `renderKpi(prev)`，将变更行的 id 传入 `renderRows(changedId)`，补间和
   闪烁效果即可通过现有 CSS 自动生效。请勿从头重建。
- 当自动模式开启时，`setInterval(refresh, refresh_seconds * 1000)`。
- 在 `stale_after_seconds` 内未成功刷新时，将药丸切换为琥珀色
   `已过期 · <距上次时间>`。
- 真实连接器模式：`POST /api/od/connectors/poll`，请求体为 JSON
   `{ project, read }`，其中 `project` 为 `<meta name="od:project">` 的 id，
   `read` 为 `connectors.json` 中声明的 `bindings[*].reads[].id` 值之一。
   OD 守护进程在服务端解析主绑定、认证源和实时提供商调用；Artifact 不会接触
   原始提供商 URL 或令牌。详见 `references/connectors.md` 中的交互格式和
   守护进程解析顺序。出错时回退到种子模拟数据，确保 Artifact 不会显示为
   损坏状态 —— 通过页脚中的灰色小提示显示错误，切勿使用红色横幅。

## 自我评审（输出前必须执行）

从继承自 `skills/critique/` 的五个维度对 Artifact 进行评分：
**Philosophy（理念）· Hierarchy（层级）· Detail（细节）· Function（功能）· Innovation（创新）**。

若 `Philosophy < 4`（"看起来像 AI 生成的"），在输出前迭代调整字体和
调色板。在回复中引用违规元素并说明修复方式。若有任一维度得分低于 3，
不得输出。

## 硬性禁止项（反 AI 痕迹）

- 禁止紫色→粉色的渐变标题。
- 禁止页面顶部使用 emoji 图标条。
- 禁止带有 4px 左侧边框强调色的圆角卡片。
- 禁止 "10× faster" / "infinite" / "join 50,000+" 等文案，除非用户明确
  提供了该数字。
- 禁止 KPI 卡片上的毛玻璃效果 / backdrop-blur。
- 禁止在 KPI 数字下方使用彩色进度条；差值行已足够。
- Inter 仅限正文使用。页面标题可使用 SF Pro Display；
  Fraunces / GT Sectra 可在编辑类 DESIGN.md 变体中使用。

## 输出合约

- `index.html` —— 单个自包含文件，不依赖外部 CSS / JS 导入（系统字体栈和
   单个 OD `<live-counter>` 自定义元素除外）。
- `connectors.json` —— 当 `inputs.connector !== mock` 时生成。
   架构详见 `references/connectors.md`。
- 两个文件均放在项目的当前工作目录下。不得写入其他位置。