replit/timmy-tower
2
0
Fork 0
Code Issues 26 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Workshop Activity Heatmap (24h Job Volume) #9

New Issue
Closed
opened 2026-03-20 22:23:20 +00:00 by replit · 1 comment
replit commented 2026-03-20 22:23:20 +00:00
Owner
Copy Link

What & Why

A compact 24-hour activity heatmap shows visitors when the Workshop is busiest — giving newcomers a sense of the community's rhythm and making the Workshop feel like it has a life of its own. A compelling 'proof of activity' visual no static landing page can replicate.

Done looks like

  • Horizontal heatmap bar (24 segments = 24 hours) visible in the Workshop showing job volume per hour
  • Segment color intensity reflects relative volume; current hour pulses
  • Data fetched from /api/stats/activity on load and refreshed every 5 minutes
  • Hovering a segment shows tooltip: '3pm: 12 jobs completed'
  • On mobile, heatmap collapses to icon that opens a full-screen overlay
  • Zero-activity hours shown as dim segments (not hidden)

Out of scope

  • Historical data beyond 24h
  • Per-agent or per-category breakdown
  • Real-time per-minute granularity

Tasks

  1. Activity stats endpoint — Add /api/stats/activity returning job counts bucketed by hour for the past 24h; GROUP BY query on jobs table.
  2. Heatmap component — 24-segment heatmap using Canvas or SVG; color scale dim to bright; current-hour pulse animation.
  3. Tooltip + mobile — Hover tooltip with hour label and count; mobile collapse/expand behavior.
  4. Auto-refresh — Poll /api/stats/activity every 5 minutes and re-render; no WebSocket needed.

Relevant files

  • artifacts/api-server/src/routes/jobs.ts
  • the-matrix/js/ui.js
  • the-matrix/js/main.js
## What & Why A compact 24-hour activity heatmap shows visitors when the Workshop is busiest — giving newcomers a sense of the community's rhythm and making the Workshop feel like it has a life of its own. A compelling 'proof of activity' visual no static landing page can replicate. ## Done looks like - Horizontal heatmap bar (24 segments = 24 hours) visible in the Workshop showing job volume per hour - Segment color intensity reflects relative volume; current hour pulses - Data fetched from `/api/stats/activity` on load and refreshed every 5 minutes - Hovering a segment shows tooltip: '3pm: 12 jobs completed' - On mobile, heatmap collapses to icon that opens a full-screen overlay - Zero-activity hours shown as dim segments (not hidden) ## Out of scope - Historical data beyond 24h - Per-agent or per-category breakdown - Real-time per-minute granularity ## Tasks 1. **Activity stats endpoint** — Add `/api/stats/activity` returning job counts bucketed by hour for the past 24h; GROUP BY query on jobs table. 2. **Heatmap component** — 24-segment heatmap using Canvas or SVG; color scale dim to bright; current-hour pulse animation. 3. **Tooltip + mobile** — Hover tooltip with hour label and count; mobile collapse/expand behavior. 4. **Auto-refresh** — Poll `/api/stats/activity` every 5 minutes and re-render; no WebSocket needed. ## Relevant files - `artifacts/api-server/src/routes/jobs.ts` - `the-matrix/js/ui.js` - `the-matrix/js/main.js`
replit added the backendworkshopfrontend labels 2026-03-20 22:23:20 +00:00
claude was assigned by Rockachopa 2026-03-22 23:37:45 +00:00
claude commented 2026-03-23 20:35:32 +00:00
Collaborator
Copy Link

PR created: #91

Backend: Added GET /api/stats/activity in artifacts/api-server/src/routes/stats.ts — queries jobs grouped by date_trunc(hour, created_at) for the last 24h, returns { hours: number[24] } zero-padded for empty hours.

Frontend: 24-segment heatmap bar centered at the bottom of the Workshop (#activity-heatmap). Color intensity scales dim→bright based on relative volume; current-hour segment pulses via CSS animation. Hover tooltip shows e.g. 3pm: 12 jobs submitted. On mobile (≤600px), collapses to icon that opens a full-screen overlay. Auto-refreshes every 5 minutes.

All changes in the-matrix/index.html and the-matrix/js/ui.js. Typecheck and lint pass (0 errors).

PR created: #91 **Backend:** Added `GET /api/stats/activity` in `artifacts/api-server/src/routes/stats.ts` — queries jobs grouped by `date_trunc(hour, created_at)` for the last 24h, returns `{ hours: number[24] }` zero-padded for empty hours. **Frontend:** 24-segment heatmap bar centered at the bottom of the Workshop (`#activity-heatmap`). Color intensity scales dim→bright based on relative volume; current-hour segment pulses via CSS animation. Hover tooltip shows e.g. `3pm: 12 jobs submitted`. On mobile (≤600px), collapses to icon that opens a full-screen overlay. Auto-refreshes every 5 minutes. All changes in `the-matrix/index.html` and `the-matrix/js/ui.js`. Typecheck and lint pass (0 errors).
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
ai
backend
frontend
lightning
mobile
mobile
nostr
workshop
No Label backend frontend workshop
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claude gemini replit
No Assignees claude
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: replit/timmy-tower#9
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?