202 lines
8.2 KiB
Markdown
202 lines
8.2 KiB
Markdown
|
---
|
|||
|
|
name: live-dashboard
|
|||
|
|
description: |
|
|||
|
|
Notion-style team dashboard rendered as a Live Artifact. A single-page,
|
|||
|
|
self-contained HTML dashboard with KPIs, a 7-day sparkline, a real-time
|
|||
|
|
activity feed and a linked-database task table — wired to Notion via the
|
|||
|
|
Composio connector catalog. Refreshes on demand and when the artifact
|
|||
|
|
is opened. Falls back to seeded mock data when no connector is bound,
|
|||
|
|
so it works offline / in screenshots / in the picker preview.
|
|||
|
|
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-blue baseline
|
|||
|
|
range: [0, 360]
|
|||
|
|
- name: surface_warmth
|
|||
|
|
type: spacing
|
|||
|
|
default: 0
|
|||
|
|
range: [-12, 24] # nudges sidebar / soft-bg L* in 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: "Build me a Notion-style team dashboard for Acme Studio. KPIs: total tasks, done this week, active members, docs in review. Wire it to the Notion connector and let it refresh on demand."
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Live Dashboard
|
|||
|
|
|
|||
|
|
You are a senior product-designer-engineer building a **Live Artifact** —
|
|||
|
|
an HTML page that behaves like a working dashboard, not a mockup. Your
|
|||
|
|
output ships, not only renders.
|
|||
|
|
|
|||
|
|
## Pre-flight (must complete before emitting any HTML)
|
|||
|
|
|
|||
|
|
1. `Read assets/template.html` — start from this skeleton verbatim. Do
|
|||
|
|
not rebuild the shell from scratch. Override only what the user's
|
|||
|
|
brief or the active DESIGN.md require.
|
|||
|
|
2. `Read references/layouts.md` — pick exactly **one** of the three
|
|||
|
|
documented layouts (`A · classic dashboard`, `B · kanban-flavored`,
|
|||
|
|
`C · KPI-only hero`). State your choice in your reply.
|
|||
|
|
3. `Read references/components.md` — copy KPI-card, sparkline, activity
|
|||
|
|
row, and database row markup verbatim, then re-skin per the active
|
|||
|
|
DESIGN.md. Do not invent new component shapes.
|
|||
|
|
4. `Read references/connectors.md` — only when `inputs.connector !== mock`.
|
|||
|
|
Emit a sibling `connectors.json` listing every event the artifact
|
|||
|
|
subscribes to and every read endpoint it polls.
|
|||
|
|
5. `Read references/checklist.md` — every P0 row must be true before
|
|||
|
|
you emit `index.html`. Quote each P0 row inline in your reply with
|
|||
|
|
`[x]` or `[ ]`. Do not emit while any P0 is unchecked.
|
|||
|
|
|
|||
|
|
## Build order
|
|||
|
|
|
|||
|
|
1. **Lock visual direction** from the active `DESIGN.md`. Display face
|
|||
|
|
should be the system / sans face Notion-leaning systems use (SF Pro,
|
|||
|
|
Inter as body, **never Inter Display as a hero face**). Body 14/22.
|
|||
|
|
2. **Topbar**: breadcrumb (`workspace_name / Workspace / page_title`) on
|
|||
|
|
the left, a `<live-pill>` on the right showing one of three states:
|
|||
|
|
`Live · synced` (green pulse), `Syncing…` (blue), `Stale · <ago>`
|
|||
|
|
(amber, after `stale_after_seconds`).
|
|||
|
|
3. **Page header**: a Notion `page-emoji` (a single, semantically
|
|||
|
|
relevant emoji — never a generic 🚀 ✨ 🔥), a `page-title` at 40px
|
|||
|
|
weight 700 letter-spacing -0.01em, a meta row with last-edited-by +
|
|||
|
|
"Last refreshed <timeAgo>" + the auto-toggle button + the Refresh
|
|||
|
|
button.
|
|||
|
|
4. **Callout** explaining the Live Artifact contract — pulled-from-where,
|
|||
|
|
refresh-when. One line. No marketing language.
|
|||
|
|
5. **KPI grid**: respect `inputs.kpi_count`. 1px hairline grid, no
|
|||
|
|
shadows, no rounded internal cards. Numbers `font-variant-numeric:
|
|||
|
|
tabular-nums`, weight 600, letter-spacing -0.01em. Each KPI gets a
|
|||
|
|
small grey delta line (`↑ 6 vs last week`).
|
|||
|
|
6. **Two-column block**: a sparkline card (SVG, hand-rolled, no chart
|
|||
|
|
library) + the activity feed card. Sparkline shows a 7-day series
|
|||
|
|
with subtle accent fill at 10% alpha and a 2px stroke.
|
|||
|
|
7. **Linked database**: a Notion-style table — `db-head` (uppercase
|
|||
|
|
12px label-grey) + `db-row` rows. Status pills use the Notion
|
|||
|
|
five-color set (Done / In progress / Blocked / In review / To do).
|
|||
|
|
Person chips use a colored 18px round avatar with two-letter
|
|||
|
|
initials.
|
|||
|
|
8. **Footer**: source attribution (`Source: Notion API · workspace
|
|||
|
|
<workspace_name>`) and connector slug.
|
|||
|
|
|
|||
|
|
## Live behavior (the part that earns the "Live" in Live Artifact)
|
|||
|
|
|
|||
|
|
Wire these in a single `<script>` block at the bottom of `index.html`:
|
|||
|
|
|
|||
|
|
- `init()` runs `refresh({silent: true})` 600ms after mount — the
|
|||
|
|
"refresh on open" semantic.
|
|||
|
|
- The Refresh button calls `refresh({silent: false})`. Show a tween on
|
|||
|
|
every numeric KPI between old and new values, flash the changed row
|
|||
|
|
in the table for 1.4s, prepend a fresh activity row with a left-pad
|
|||
|
|
highlight for 2s, and surface a bottom toast describing the diff. The
|
|||
|
|
tween/flash hooks are already wired in `assets/template.html`
|
|||
|
|
(`tweenText()` + `.flash` + `.db-row.changed` + `.feed-row.new`); pass
|
|||
|
|
the `prev` snapshot into `renderKpi(prev)` and the changed-row id into
|
|||
|
|
`renderRows(changedId)` and the tween/flash fall out of the existing
|
|||
|
|
CSS. Do not rebuild this from scratch.
|
|||
|
|
- `setInterval(refresh, refresh_seconds * 1000)` when Auto is on.
|
|||
|
|
- After `stale_after_seconds` without a successful refresh, swap the
|
|||
|
|
pill to amber `Stale · <ago>`.
|
|||
|
|
- Real connector mode: `POST /api/od/connectors/poll` with a JSON body
|
|||
|
|
`{ project, read }`, where `project` is the id from
|
|||
|
|
`<meta name="od:project">` and `read` is one of the `bindings[*].reads[].id`
|
|||
|
|
values declared in `connectors.json`. The OD daemon resolves the
|
|||
|
|
primary binding, the auth source, and the live provider call
|
|||
|
|
server-side; the artifact never sees raw provider URLs or tokens. See
|
|||
|
|
`references/connectors.md` for the wire shape and the daemon
|
|||
|
|
resolution order. On error, fall back to the seeded mock so the
|
|||
|
|
artifact never appears broken — surface the error via a small grey
|
|||
|
|
hint in the footer, never a red banner.
|
|||
|
|
|
|||
|
|
## Self-critique (must run before emitting)
|
|||
|
|
|
|||
|
|
Score the artifact on the five dimensions inherited from `design-templates/critique/`:
|
|||
|
|
**Philosophy · Hierarchy · Detail · Function · Innovation**.
|
|||
|
|
|
|||
|
|
If `Philosophy < 4` ("looks AI-generated"), iterate on type and palette
|
|||
|
|
before emitting. Quote the offending element in your reply and explain
|
|||
|
|
the fix. Do not emit if any dimension scores below 3.
|
|||
|
|
|
|||
|
|
## Hard nos (anti-AI-slop)
|
|||
|
|
|
|||
|
|
- No purple→pink gradient header.
|
|||
|
|
- No emoji icon strip across the top of the page.
|
|||
|
|
- No rounded card with a 4px left-border accent.
|
|||
|
|
- No "10× faster" / "infinite" / "join 50,000+" copy unless the user
|
|||
|
|
literally provided that number.
|
|||
|
|
- No glassmorphism / backdrop-blur on KPI cards.
|
|||
|
|
- No colored progress bars under KPI numbers; the delta line is enough.
|
|||
|
|
- Inter is body-only. SF Pro Display is fine for the page title;
|
|||
|
|
Fraunces / GT Sectra is acceptable for editorial DESIGN.md variants.
|
|||
|
|
|
|||
|
|
## Output contract
|
|||
|
|
|
|||
|
|
- `index.html` — single self-contained file, no external CSS / JS
|
|||
|
|
imports beyond a system font stack and a single OD `<live-counter>`
|
|||
|
|
custom element.
|
|||
|
|
- `connectors.json` — when `inputs.connector !== mock`. See
|
|||
|
|
`references/connectors.md` for the schema.
|
|||
|
|
- Both files in the project cwd. Do not write anywhere else.
|