Commit 36183ef
feat(dashboard): live polling, animations, and UX polish
Make the dashboard feel alive with real-time updates and smooth
interactions instead of requiring manual page refresh.
Live polling:
- Request feed polls every 3s, prepends new cards with slide-in animation
- Hook list polls every 5s to keep request counts fresh
- Polling auto-stops on navigation (no leaked intervals)
- Tracks seen request IDs to avoid duplicates
Animations & micro-interactions:
- View transitions (fade-in on route change)
- Card hover lift (translateY + shadow)
- New request pulse glow (blue border + expanding ring)
- Button click feedback (scale-down on :active)
- Toast exit animation (fade-out before removal)
- Skeleton loading cards with shimmer effect
- Live green pulsing dot on request feed
- "Listening for webhooks..." animated dots on empty feed
Inline interactions (no more browser dialogs):
- Hook creation via inline expanding form (replaces prompt())
- Delete confirmation via inline "sure? yes/no" (replaces confirm())
- Enter to submit, Escape to cancel create form
- Auto-focus input on form open
Request detail polish:
- Collapsible headers and body sections (click to toggle)
- JSON syntax highlighting (keys, strings, numbers, bools, null)
- Line numbers in code blocks
- Pretty/Raw toggle for JSON bodies
- Copy body copies raw (un-pretty-printed) content
Quality of life:
- Relative time ticker updates every second (no re-fetch needed)
- Activity spinner in header during API calls
- "N new" badge appears when scrolled down, click to scroll to top
- Richer empty states with icons and contextual hints
Total UI: ~40KB (up from ~21KB) for a fully live SPA.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>1 parent 7baf2b1 commit 36183ef
3 files changed
Lines changed: 759 additions & 94 deletions
0 commit comments