Skip to content

Conversation

@kaitranntt
Copy link
Owner

@kaitranntt kaitranntt commented Dec 14, 2025

Summary

Complete redesign of the home page auth monitor with interactive flow visualization, real-time stats, and enhanced theming.

Key Features

Auth Monitor & Flow Visualization

  • Interactive Flow Chart: SVG bezier curves connecting accounts to providers with smooth animations
  • Draggable Cards: All account and provider cards are draggable with real-time curve recalculation
  • Connection Timeline: Live feed showing recent request activity per account
  • Per-Account Stats: Success/failure counts fetched from CLIProxy stats endpoint
  • Pulse Animations: Traveling dot animation along paths when new requests are detected

Light Theme Contrast Improvements

  • Darker foreground colors (0.2 → 0.15 OKLCH lightness)
  • Enhanced muted-foreground (0.55 → 0.40) for better readability
  • Darker borders (0.85 → 0.78) for better definition
  • Status colors updated: green-700, amber-700, red-700 for light mode
  • Account segment colors darkened ~25% for visibility

UI Enhancements

  • Added documentation link button in header
  • Removed excess whitespace from auth monitor container
  • Improved hero section layout with inline stats

Files Changed (19 files, +1916/-273 lines)

Component Description
account-flow-viz.tsx New 782-line flow visualization component
auth-monitor.tsx New 463-line live monitoring component
index.css Enhanced animations, light theme CSS vars
home.tsx Integrated auth monitor, improved layout
stats-fetcher.ts Extended for per-account stats
provider-config.ts Provider colors and display names
utils.ts Status colors, model color generator
docs-link.tsx New documentation button component

Technical Details

Animation System

  • request-pulse: 2s duration with drop-shadow glow effect
  • travel-dot: 1.5s traveling circle along bezier path
  • glow-pulse: 2.5s box-shadow pulsing with scale transform
  • Cubic-bezier easing for smooth motion

Data Flow

  • 5s polling interval for near-real-time updates
  • Per-account stats from /api/cliproxy/stats endpoint
  • Activity detection triggers pulse animations

Test Plan

  • Auth monitor displays on home page with real account data
  • Drag cards → bezier curves update in real-time
  • Light theme has sufficient contrast (WCAG compliant)
  • Pulse animations trigger when request counts increase
  • Connection timeline shows chronological activity
  • Click account card → shows detail panel with stats
  • Provider cards clickable → navigates to account flow view
  • Docs button links to https://docs.ccs.kaitran.ca

- Add ConnectionTimeline component showing recent connection events
- Restructure layout to 2-column design: flow viz (flex) | timeline (fixed)
- Flow chart now expands to fill available space with justify-between
- Timeline has compact fixed width (w-56) on the right
- Detail panel now uses flow-based positioning instead of absolute
- Generate mock connection events based on account success/failure data
@kaitranntt kaitranntt changed the title feat(auth): redesign auth monitor with flow visualization feat(ui): auth monitor with real-time account flow visualization Dec 16, 2025
@kaitranntt kaitranntt merged commit 5b2cf14 into dev Dec 16, 2025
1 check passed
@kaitranntt kaitranntt deleted the kai/feat/auth-monitor-design branch December 17, 2025 19:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant