Commit Graph

896 Commits

Author SHA1 Message Date
Usman Baig
205cdf314c perf: bound SWR cache, clean stale storage, cap annotations
Add LRU cache provider (200 entries) to prevent unbounded SWR memory
growth. Clean up stale PKCE localStorage keys on app init. Cap chart
annotations to 20 visible reference lines with overflow indicator.
2026-03-10 21:19:33 +01:00
Usman Baig
502f4952fc perf: lazy-load globe/map and update changelog
Globe and DottedMap now only render when the Locations section enters
the viewport via IntersectionObserver. Added changelog entries for
rate limit fallback, buffer improvements, and lazy loading.
2026-03-10 20:57:55 +01:00
Usman Baig
f10b903a80 perf: add export loading state and virtual scrolling for large lists
Export modal now shows a loading indicator and doesn't freeze the UI.
Large list modals use virtual scrolling for smooth performance.
2026-03-10 20:45:49 +01:00
Usman Baig
848bde237f docs: add faster entry/exit page stats to changelog 2026-03-10 20:25:57 +01:00
Usman Baig
835c284a6b docs: add smarter caching improvement to changelog 2026-03-10 20:13:09 +01:00
Usman Baig
beee87bd2e docs: add query timeout improvement to changelog 2026-03-10 18:45:52 +01:00
Usman Baig
bcaa5c25f8 perf: replace real-time polling with SSE streaming
Replace 5-second setInterval polling with EventSource connection to the
new /realtime/stream SSE endpoint. The server pushes visitor updates
instead of each client independently polling. Auto-reconnects on
connection drops.
2026-03-10 18:33:17 +01:00
Usman Baig
d863004d5f perf: consolidate 7 dashboard hooks into single batch request
Replace useDashboardOverview, useDashboardPages, useDashboardLocations,
useDashboardDevices, useDashboardReferrers, useDashboardPerformance, and
useDashboardGoals with a single useDashboard hook that calls the existing
/dashboard batch endpoint. This endpoint runs all queries in parallel on
the backend and caches the result in Redis (30s TTL).

Reduces dashboard requests from 12 to 6 per refresh cycle (50% reduction).
At 1,000 concurrent users: ~6,000 req/min instead of 12,000.
2026-03-10 17:55:29 +01:00
Usman Baig
00d8656ad2 Fix modal titles, hover rounding, search focus, and page filter dimension
- Remove redundant prefixes from modal titles
- Remove -mx-2 from modal rows so hover rounds evenly on both sides
- Fix page filter using wrong dimension name (path -> page)
- Bump @ciphera-net/ui to 0.1.3 (fixes search input losing focus)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 01:46:31 +01:00
Usman Baig
64a8652423 Add search bar to expanded panel modals 2026-03-10 01:34:05 +01:00
Usman Baig
a99d13309f Improve expanded modals: wider, taller, hover percentage, click-to-filter
- Widen modals from max-w-lg to max-w-2xl
- Increase max height from 60vh to 80vh
- Add hover percentage on each row (matching card behavior)
- Click any row to filter dashboard and close modal
2026-03-10 01:32:00 +01:00
Usman Baig
7aa809c8a0 Move expand icon to the right of panel titles 2026-03-10 01:25:46 +01:00
Usman Baig
ca71c1646d Move expand icon to the left of panel titles 2026-03-10 01:22:11 +01:00
Usman Baig
3587f93645 Scope 1s tick interval to Chart component to eliminate page-level re-renders
The setInterval that drives the "Live · Xs ago" display was at the page level,
forcing all 10+ dashboard components to re-render every second. Now it lives
inside Chart — the only consumer — so the rest of the dashboard is unaffected.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 01:19:34 +01:00
Usman Baig
e07fd3f0e8 Move expand icon to top-right corner of panels, make it larger
Reposition FrameCornersIcon from next to the title to the far right
of each card header (after tabs). Increase size from w-3.5 to w-4
and add hover background for better visibility and discoverability.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 01:13:03 +01:00
Usman Baig
05d13bff81 Use FrameCornersIcon for expand buttons in dashboard panels
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 01:06:56 +01:00
Usman Baig
a9f42acbf6 Use ref for lastUpdatedAt to avoid extra re-render on mount
When navigating to dashboard with cached SWR data, setLastUpdatedAt
triggered a second full render of the entire dashboard immediately
after the first. Using a ref instead avoids this — the value still
updates and Chart reads it on the next 1-second tick re-render.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 01:03:12 +01:00
Usman Baig
a60efeb6a7 Replace 'View all' buttons with expand icon in block headers
Add ArrowsOutSimpleIcon next to each panel title (Pages, Referrers,
Locations, Technology, Campaigns) that opens the full-data modal.
Remove the old text-based 'View all' button from the bottom of lists.
Update changelog with performance and UI improvements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 01:00:09 +01:00
Usman Baig
88f02a244b Hoist DottedMap constants to module scope, static-import above-fold components
DottedMap: move createMap, stagger helpers, and base dots path to module
scope so they compute once on module load and survive unmount/remount
cycles — eliminates all recomputation when switching tabs.

Dashboard: restore static imports for the 5 above-fold components
(Chart, ContentStats, TopReferrers, Locations, TechSpecs) now that
their heavy computations are memoized. Keeps below-fold components
(PerformanceStats, GoalStats, ScrollDepth, Campaigns, etc.) dynamic.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 00:51:32 +01:00
Usman Baig
8c5b452f73 Batch 8000 SVG circles into single path element in DottedMap
Instead of rendering 8000 individual <circle> elements (each a React
node to reconcile), batch all map dots into a single <path d="...">
string. Reduces DOM nodes from ~8000 to 1 for the base map layer.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 00:47:27 +01:00
Usman Baig
5f797112ec Memoize expensive computations in Chart and Globe components
Chart: wrap chartData (Date formatting on every data point) and
metricsWithTrends in useMemo — these ran on every render.
Globe: memoize marker computation (Math.max + filter + map on every render).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 00:44:19 +01:00
Usman Baig
ae0f6b8ffa Fix dashboard and map tab lag with memoization and code splitting
Memoize createMap() in DottedMap (was regenerating 8000 SVG dots every
render) and convert 11 heavy dashboard components to next/dynamic imports
so the page shell renders instantly instead of blocking on one massive
render pass.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 00:39:35 +01:00
Usman Baig
4babbc7555 fix: skip skeleton when SWR has cached data + lazy-load Map and Globe 2026-03-10 00:32:07 +01:00
Usman Baig
01f6d8d065 fix: remove content crossfade animation that caused lag on heavy pages
Also configure PWA service worker to use network-first for JS chunks
to prevent ChunkLoadError after deploys.
2026-03-10 00:26:50 +01:00
Usman Baig
628749a416 feat: opacity-only page transition + sliding indicator on all sub-tabs 2026-03-10 00:18:52 +01:00
Usman Baig
b88f4d438b fix: use popLayout mode so heavy pages animate in without delay 2026-03-10 00:12:59 +01:00
Usman Baig
2776c803f1 fix: use focus-visible for all button/tab/link focus rings across app
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 00:08:09 +01:00
Usman Baig
c46d463533 fix: use focus-visible for tab nav ring so it only shows on keyboard 2026-03-09 23:45:41 +01:00
Usman Baig
6f964f38f3 feat: add sliding tab indicator and content crossfade animations
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 23:41:34 +01:00
Usman Baig
330cc134aa feat: instant tab navigation by moving SiteNav to shared layout
SiteNav now lives in the [id] layout instead of each page, so it stays
mounted during route transitions. Switching between Dashboard, Uptime,
Funnels, and Settings no longer flashes a full-page skeleton.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 23:35:06 +01:00
Usman Baig
92fae83772 chore: move site nav tabs above site header and update changelog
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 23:21:12 +01:00
Usman Baig
242c76b763 fix: reduce funnel chart size with max-w-md constraint 2026-03-09 23:12:37 +01:00
Usman Baig
9f2032fc32 Replace custom FunnelChart with 21st.dev funnel-chart component
Drops in the exact 21st.dev FunnelChart component with motion/react,
curved bezier segments, layered rings, and spring hover animations.
Removes the previous custom SVG implementation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 23:06:31 +01:00
Usman Baig
cc4f924fb8 fix: put annotations and live indicator on same row in chart footer 2026-03-09 23:03:58 +01:00
Usman Baig
5625703168 fix: move annotations and live indicator inside Card component 2026-03-09 23:00:44 +01:00
Usman Baig
7175de44af Fix metric cards grid to use md: breakpoint instead of @container queries
Tailwind 3 doesn't support container queries without a plugin.
2026-03-09 22:56:53 +01:00
Usman Baig
033d735c3a Replace dashboard BarChart with 21st.dev LineChart component
Swap the main site dashboard chart from a bar chart to a line chart
using 21st.dev's line-charts-6 component with dot grid background,
glow shadow, and animated active dots. Add Badge trend indicators
on metric cards using Phosphor icons. All existing features preserved
(annotations, comparison, export, live indicator, interval controls).

New UI primitives: line-charts-6, badge-2, card, button-1, avatar.
Added shadcn-compatible CSS variables and Tailwind color mappings.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 22:53:35 +01:00
Usman Baig
5721d25291 Rewrite FunnelChart as proper SVG funnel with curved sides
Replaces crude clip-path divs with SVG bezier paths matching the 21st.dev
reference: smooth curved sides, background glow, divider lines, centered
percentage pills, and labels on both sides.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 22:20:55 +01:00
Usman Baig
536aebc086 Add FunnelChart visualization to replace BarChart on funnel detail page
Replaces the recharts BarChart with a custom funnel component using clip-path
trapezoid segments, framer-motion animations, and hover interactions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 22:12:34 +01:00
Usman Baig
8c9c711296 Make Globe drag more responsive (damping 3000→800) 2026-03-09 21:56:38 +01:00
Usman Baig
652c93cbd0 Update changelog with Globe, DottedMap, theme toggle, and chart restyle 2026-03-09 16:22:41 +01:00
Usman Baig
2d7e13b098 Rewrite Globe with pure refs, remove framer-motion dependency
- Remove useMotionValue/useSpring which caused effect re-runs
  and globe destroy/recreate cycles (source of glitches)
- All state tracked via refs (phi, drag offset, pointer position)
- Effect only re-runs on theme change, not on every spring tick
- Direct delta tracking for drag instead of spring physics
- Simpler, more stable WebGL lifecycle
2026-03-09 16:18:24 +01:00
Usman Baig
58c151e2b0 Fix Globe glitches: stop resizing buffer every frame
- Set canvas size once on mount instead of every render frame
- Use actual devicePixelRatio (capped at 2) instead of hardcoded 2
- Remove redundant width*2 doubling (was 4x with devicePixelRatio:2)
- Increase spring damping 50→60, reduce stiffness 80→60 for smoother drag
2026-03-09 16:15:38 +01:00
Usman Baig
1a75b44c68 Move Globe up to top of container to fill space 2026-03-09 16:10:19 +01:00
Usman Baig
9629a5788c Add very slow auto-rotation to Globe (pauses on drag) 2026-03-09 16:07:52 +01:00
Usman Baig
464a361094 Center Globe horizontally and move up to show more surface 2026-03-09 16:05:44 +01:00
Usman Baig
12ae1a9175 Zoom in Globe and slow drag speed
- Position globe lower with overflow-hidden for cropped zoomed look
- Globe at 140% width pushed down 30% so only top portion visible
- Add radial gradient overlay at bottom for depth
- Increase movement damping 1400→3000 for slower drag
2026-03-09 16:02:47 +01:00
Usman Baig
3268a70baa Fix Globe: reduce mapBrightness to fix glitches, brighten base color
mapBrightness 6→2 fixes overblown dot artifacts, baseColor 0.3→0.5
makes the sphere visible against the dark card background
2026-03-09 15:57:33 +01:00
Usman Baig
9dba2cf2e2 Fix Globe: remove auto-spin, brighten dark mode, reduce jitter 2026-03-09 15:51:01 +01:00
Usman Baig
efd647d856 Add interactive 3D Globe tab to Locations using cobe WebGL
- Magic UI Globe component with auto-rotation and drag interaction
- Dark/light mode reactive (base color, glow, brightness)
- Country markers from visitor data using existing centroids
- Brand orange (#FD5E0F) marker color matching DottedMap

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 15:46:29 +01:00