live-dashboard

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,"range":[0,360]},{"name":"surface_warmth","type":"spacing","default":0,"range":[-12,24]},{"name":"density","type":"spacing","default":18,"range":[8,36]},{"name":"display_scale","type":"font-scale","default":1,"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 " + 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 . 1px hairline grid, no shadows, no rounded internal cards. Numbers , weight 600, letter-spacing -0.01em. Each KPI gets a small grey delta line ().