提示
一次贴完整段。先要外壳（侧栏 + 顶栏 + 指标行），再要带双序列面积图的图表卡，最后要右侧栏。钉死近黑底，免得漂成冷海军蓝。
Build a dark AI analytics dashboard (a developer platform's "Overview" page), in the visual language of Vercel or PostHog. It must feel like a real product, not a demo.
STYLE
- Near-black surface: page #0a0a0a, sidebar #0e0e10, card #161618, hairline borders rgba(255,255,255,.08)
- Accent blue #3b82f6 and teal #2dd4bf; positive deltas green #1ec98a, negative red #ff5c5c
- 8px radii, Inter / Plus Jakarta Sans, tabular numbers for metrics
LAYOUT (two columns)
- Left sidebar (~130px): brand "Helix" with a glowing dot, grouped nav — Workspace (Overview active, Models, Experiments), Observe (Traces, Alerts), footer Settings / Docs
- Main pane split into a top bar and a body grid (1.7fr chart area : 1fr rail)
TOP BAR
- Left: page title "Analytics" + subtitle "Realtime model telemetry"
- Right: "Last 30 days ▾" pill, segmented control W/M/Q (W active), "Export" button, avatar circle
KPI ROW (4 cards, each with label / big value / delta / sparkline)
- Requests 4.82M ▲12.4%
- Latency 142 ms ▼8.1% (lower is better)
- Accuracy 96.3% ▲0.4%
- Models 28 ▲3
CHART AREA (left column)
- Card "Inference traffic": a filled area chart, two series — Training (blue line) and Inference (teal area+line) over ~30 days, faint gridlines, legend top-right
- Below it (desktop): "Recent events" table — Event / Model / Status(pill) / Latency. One row is an anomaly with a red "alert" pill (vision-x, 2.4s)
RIGHT RAIL
- Card "Traffic by source": a donut (Organic 42 / Referral 28 / Direct 18 / Social 12) with center % and a 2-col legend
- Card "AI insights": two auto-generated insight lines, one flagged warn (latency above SLO)
INTERACTION
- Hover states, 120ms transitions; active nav + segmented item highlighted; status pills colored
- Responsive: rail stacks under the chart on narrow widths
TECHNICAL
- React + TypeScript
- Tailwind CSS
- Recharts or visx for the area chart and donut; keep it server-renderable
- Make KPI sparklines inline SVG so they need no chart lib