Skip to content

[Feature] Flip the whole dashboard into a live realtime view (PULSE-17) #741

Description

@uz1mani

The dashboard's "current visitors" chip opens a popover and touches nothing else. Rebuild it so clicking it — or picking a new Realtime entry in the view switcher — flips the whole dashboard into a live view: headline stats, chart, and every block below, updating in realtime behind an orange pulsating orb.

Plane work item: https://plane-sks.ciphera.net/ciphera/projects/7f1d6ca7-7bcb-4af3-ba59-b5051602efa1/issues/47a0c7e4-e7fa-432f-805c-04fe735b2feb (PULSE-17)
Design doc: Pulse/docs/plans/22-09-2026-realtime-dashboard-mode-design.md

Frontend scope

  • Realtime mode as a page-scoped extraPresets group + rollingMinutes, addressable as ?period=realtime. Copy the Visitors page precedent (lib/visitors/range.ts) rather than widening the shared Period grammar into every other page's picker.
  • useRealtimeSync(siteId) — the single transport seam: ticket mint, WebSocket connect, exponential-backoff reconnect, visibility gating, 1s debounce, mutate() of the realtime keys, 5s poll fallback.
  • Replace RealtimeVisitorsPopover's green animate-pulse chip with the orange orb (reuse the established two-span dot recipe, recoloured to brand-orange; count in tabular-nums, never font-mono).
  • Feed CommandDeck a rolling last-30-min interval='minute' series; honour missingAsZero with the honest em-dash tooltip.
  • Live top-N for Sources / Locations / TechSpecs / Outbound / ContentStats. PeakHours is hidden in realtime mode — a weekly hour-of-day heatmap has no meaning at a live instant.
  • Same flip on components/share/PublicDashboard.tsx (owner decision: both surfaces), gated on the backend privacy pass.
  • Preserve or deliberately repoint data-tour="realtime-trigger"; lib/tour/steps.ts anchors a step to it and will break silently otherwise.
  • Resolve the dead lastUpdatedAt/1s-tick plumbing in PublicDashboard (computed, never rendered).

Constraints

  • The whole-site live count is unfloored by explicit owner design — do not add an n>=5 floor to it.
  • Facet is dark-only; all radii are 0 except full; brand-orange is #FD5E0F.
  • animate-ping is unused in this codebase today — probe it against the shipped CSS in the mock round like any other class.
  • A mocked-on-production options round is approved before any pixels are built.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions