open-design/docs
Joey-nexu 55aa24167b
add live-dashboard skill (#778)
* add live-dashboard skill

Notion-style team dashboard rendered as a Live Artifact.

Wires the OD 0.4.0 connector catalog (#381) end-to-end:

refresh-on-open, manual Refresh tween, auto-refresh, stale state.

Falls back to seeded mock data when no connector is bound.

* address PR #778 review comments

P1 — security and correctness:
- skills/live-dashboard/assets/template.html · skills/live-dashboard/example.html: escape every connector-derived string before innerHTML interpolation. Adds a tiny e() helper and routes feed.who/action/target/suffix/icon, row.title/icon/due/prio, person.name/color/id, KPI label/delta through it. Closes lefarcen #3200122795 + #3200122820.
- skills/live-dashboard/SKILL.md (live behavior section): align connector poll URL with references/connectors.md — POST /api/od/connectors/poll with { project, read } body, not /api/od/connectors/<id>/poll. Closes codex bot #3200100897.
- apps/web/src/i18n/content{,.ru,.fr}.ts: register live-dashboard in DE_/RU_/FR_SKILL_IDS_WITH_EN_FALLBACK so the localized-content e2e check passes. Closes mrcfps #3200122059.
- skills/live-dashboard/references/connectors.md: prepend a Status callout that names skills/live-artifact/ as the canonical file/CLI live-artifact contract and frames the HTTP shape as a forward-looking proposal sitting alongside it (out-of-the-box the artifact runs on seeded data; only seedNextChange() needs swapping when POST /api/od/connectors/poll lands). Closes lefarcen #3200122811.

P2 — quality and honesty:
- skills/live-dashboard/references/connectors.md: rewrite the auth_ref resolution step to match apps/daemon/src/media-config.ts (OD_MEDIA_CONFIG_DIR → OD_DATA_DIR → <projectRoot>/.od/media-config.json, $HOME/~/relative paths handled via expandHomePrefix). Closes codex bot #3200100906.
- skills/live-dashboard/example.html: switch the live-pill to a sticky Sample data state with a grey static dot, rewrite the callout to admit the figures are seeded fixtures, retitle the toast and the refresh tooltip, and refuse to flip to Live · synced inside updateTimes(). Adds a .pill-live.sample CSS variant. Closes lefarcen #3200122823.
- skills/live-dashboard/assets/template.html: hoist <meta name=od:project> from <body> into <head>. Closes lefarcen #3200122832.
- skills/live-dashboard/assets/template.html · example.html: add role=button + tabindex=0 + aria-current to every clickable .ws / .side-search / .nav-item, and wire a single document-level keydown handler that maps Enter/Space to a synthetic click for any role=button div (skipping real buttons / anchors / form controls). Closes lefarcen #3200122837.
- skills/live-dashboard/assets/template.html: implement the KPI tween + flash + snapshotKpi() the SKILL.md prose already promised — first render builds escaped cards, subsequent renderKpi(prev) calls tween numeric values and flash() the cells that actually changed; refresh() now calls snapshotKpi() before mutating state and forwards prev. SKILL.md spells out the wire-up. Closes lefarcen #3200122839.

* gate KPI tween + flash + row/feed highlight on prefers-reduced-motion

Addresses mrcfps's non-blocking review item on PR #778 (comment #3200614137,
template.html:453). The CSS @media (prefers-reduced-motion: reduce) block
already neutralizes CSS animations and transitions, but the new JS-driven
helpers kept moving for opted-out users:

- tweenText() scheduled requestAnimationFrame updates for 600ms
- flash() toggled the .flash highlight class for 700ms
- renderFeed()/renderRows() applied .feed-row.new / .db-row.changed
  classes which carry transient backgrounds even when their CSS
  animations are off

Both runtimes (assets/template.html and example.html) now share a
reduceMotion() helper (window.matchMedia('(prefers-reduced-motion:
reduce)').matches). When it returns true:

- tweenText()/tween() set the final value immediately and return
- flash() returns without touching the class
- renderFeed()/renderRows() pass null as the highlight id so the .new /
  .changed classes are never applied

Normal-motion users see the existing tween + flash + highlight pulse
unchanged. Keeps the P0 prefers-reduced-motion row in
references/checklist.md honest for agents that copy this template
verbatim.

---------

Co-authored-by: joey <joey@joeydeMacBook-Air.local>
Co-authored-by: joeylee12629-star <joeylee12629-star@users.noreply.github.com>
2026-05-07 18:21:22 +08:00
..
assets Update docs/assets/github-metrics.svg - [Skip GitHub Action] (#718) 2026-05-07 10:12:29 +08:00
examples Refactor project name from "Open Claude Design" to "Open Design" (#1) 2026-04-28 16:03:35 +08:00
plans Implement manual edit mode (#620) 2026-05-06 16:13:52 +08:00
screenshots add live-dashboard skill (#778) 2026-05-07 18:21:22 +08:00
agent-adapters.md feat[qoder cli] add Qoder CLI agent support (#626) 2026-05-06 19:54:03 +08:00
architecture.md docs: fix broken links to pi-ai (404), split into coding-agent and ai packages (#277) 2026-05-07 00:41:11 +08:00
codex-pets.md feat(web): add pet companion with Codex hatch-pet integration (#296) 2026-05-02 23:45:39 +08:00
modes.md Refactor project name from "Open Claude Design" to "Open Design" (#1) 2026-04-28 16:03:35 +08:00
references.md docs: fix broken links to pi-ai (404), split into coding-agent and ai packages (#277) 2026-05-07 00:41:11 +08:00
roadmap.md Refresh desktop integration control plane (#123) 2026-04-30 14:23:53 +08:00
skills-protocol.md feat(craft): add brand-agnostic craft references + Refero-derived lint rules (#225) 2026-05-02 11:00:33 +08:00
spec.md docs: fix broken links to pi-ai (404), split into coding-agent and ai packages (#277) 2026-05-07 00:41:11 +08:00