Conversation
…ive telemetry Wholesale rewrite of the Next.js dashboard at /frontend to a Vercel-grade quality bar. The previous version worked but read as "AI-generated dashboard" — too much indigo glow, too little typographic discipline, hardcoded sparkline data, no command palette, no theme management, no toast outlet, no telemetry consumer. Design system overhaul (src/app/globals.css + tailwind.config.ts): - Four surface tiers, four text tiers, three border weights, all anchored on a single neutral hue. Brand indigo fires only for active state, the brand mark, and the primary CTA. Status colours scoped to status only. - Geist Sans + Geist Mono for typography, with cv02/cv03/cv04/cv11 + ss01 OpenType features enabled site-wide. - Tight Vercel-style radii (4/6/8/12), tabular-nums on by default for every metric surface. - Calibrated keyframes (fade-up, scale-in, pulse-ring, shimmer, count-up) with cubic-bezier(0.16, 1, 0.3, 1) easing. - Light + dark themes via next-themes, plumbed through `data-theme`. Component library (17 UI primitives, 5 dashboard atoms, plus run/documents): - Button (7 variants × 5 sizes), Card (with description + footer), Badge (8 variants), Input, Select, Skeleton, Sparkline (smoothed bezier with gradient fill + terminator dot), StatusDot (with optional pulse halo), EmptyState, CodeBlock (copy-to-clipboard), Kbd, Tooltip, DropdownMenu, Dialog, Tabs, Avatar, ScrollArea, Popover, Separator. - StatCard counts up via useAnimatedNumber on first render. Trend indicator + sparkline + hover state. No glow chrome. - DocumentsTable with debounced search, status filter, optimistic reindex + sonner toast, paginated. - ChatInterface with auto-grow textarea, abort, scroll-to-bottom button, toast on stream errors. Bubble palette retuned to neutral surfaces. - ActivityFeed, AlertBanner, QuotaBar — all rebuilt on the new tokens. - MetricChart — recharts-based area chart with dashboard-tuned axes, brand-tinted gradient, custom tooltip rendering surface-2 floats. Layout (src/components/layout): - Sidebar v2: tighter 216px width, primary + account sections, command palette trigger with ⌘K keyboard hint, footer SOC2 status pill. - TopBar v2: sticky frosted, breadcrumbs auto-derived from pathname, API status pill (live/offline/connecting), theme toggle, user menu. - Breadcrumbs auto-derive from URL. - ThemeToggle with light/dark/system via next-themes. - UserMenu with avatar + tenant + role + dropdown. - CommandPalette (cmdk) with fuzzy search, navigate group, theme group. Mounted once in root layout via CommandPaletteProvider context. Pages: - / Overview: live KPI tiles wired to /api/stats (queries_total, queries_24h, queries_7d, p95_latency, indexed_chunks). Platform status row with uptime, last deploy, p50, avg retrieval. Quota + activity row. KILLS the "Placeholder sparkline data until real trend data is available from the BFF" TODO that was sitting in the original page.tsx. - /telemetry NEW: full Tier-A consumer with 30s visibility-aware polling (usePolling), 8-tile metric grid, tabbed details (overview/contract/ raw response), CodeBlock with curl + JSON examples. - /documents: rebuilt on the new primitives. - /run: rebuilt with auto-grow textarea, sonner error toasts, refined message bubbles in neutral palette. - /api-keys NEW: active key card, reveal/hide secret, curl + TS examples. - /settings NEW: theme switcher, workspace info, entitlements grid. - /not-found NEW, /error NEW (with digest ref), /loading NEW (skeleton shell matching the overview layout). Plumbing: - next.config.mjs: rewrites /api/stats → upstream public endpoint, plus /api/* → /v1/* for versioned BFF. Adds optimizePackageImports for lucide + recharts. Security headers (X-Content-Type-Options, X-Frame- Options, Referrer-Policy, Permissions-Policy). - src/lib/utils.ts: formatters (formatNumber, formatDuration, formatRelative, formatDate, truncate, percent, isMac). - src/lib/hooks.ts: useDebounce, useMounted, useHotkey, useAnimatedNumber, usePolling (visibility-aware). - src/lib/api.ts: extended with PublicStats type + fetchPublicStats() for the public /api/stats endpoint. Tests (vitest + Testing Library + jsdom): - 36 tests across 6 files. utils formatters with fake timers, hooks, Button (variants + asChild + disabled), Sparkline (empty/single/multi data + dot terminator), Badge variants, StatCard loading/render/display override. - All pass. Type-check clean. Production build successful at 9 routes, ~150KB First Load JS shared, 5–7KB per-route. Documentation: - frontend/README.md documents stack, routes, design system, live data wiring, scripts, keyboard shortcuts, deployment instructions, and architecture notes. Deployment: - frontend/vercel.json pins the Next.js framework preset. - The frontend deploys as its own Vercel project pointing at /frontend rootDir. The existing nexusrag project continues to serve the FastAPI backend uninterrupted.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The 5 showcase dashboards (agent-runbook-orchestrator, evalops-workbench,
repo-rag-debugger, revenue-signal-copilot, data-quality-watchtower) ended
up more descriptive than NexusRAG because they surface the strategic
narrative — problem, why-now, MVP scope, audience, stack, three-phase
roadmap — alongside the live telemetry. This commit ports that narrative
surface to NexusRAG, adapted for its Tier-A production stage.
Differences from the showcase template:
- stage = "Live in production" (not "Ready to build"); badge tone is
success-green instead of brand-indigo
- /capabilities surfaces "What's shipping" (the README feature matrix
marked ✅) rather than "MVP scope" (a future commitment)
- /roadmap phases reflect production reality:
Now — live multi-tenant API, Tier-A telemetry, audit log
Next — CHANGELOG Unreleased themes (notification receiver
contract v1.0, governance retention, keyring rotation)
Later — federated retrieval, geo-replicated audit, edge embeddings
- Both pages source from src/lib/project.ts (hardcoded TS module — no
runtime FS access, ships statically at 185 B per route)
Sidebar: new "Project" section between Workspace and Account groups
with Capabilities (Sparkles) + Roadmap (Map) entries.
CommandPalette: ⌘K entries + G-then-key shortcuts (G C → Capabilities,
G M → Roadmap) added in the Navigate group, keeping parity with the
existing G O / G T / G D / G R bindings.
Verified: tsc --noEmit clean, npm run build clean (11 routes, all ○
static prerendered), 36/36 vitest tests pass.
…ngelog
Battle-horse showcase upgrade. Every claim grounded in real artifacts —
README Feature Matrix (30+ rows), CHANGELOG.md (36+ tagged releases
across 8 thematic eras), 49 runbooks under docs/runbooks/, the README
architecture diagram, and the 26-path OpenAPI surface.
Four new content-rich routes:
/architecture
- Six-step request authorization pipeline rendered as an ordered list
(tenant boundary → kill switches → RBAC → doc ACL → ABAC → default
deny) with failure codes attached to each step.
- Four layered architecture cards: Edge & Auth, Agent Runtime, Retrieval
Backends, Infrastructure. Each layer expands into 3-5 component cards
with config flags, kill switches, and runbook references inline.
/feature-matrix
- 30+ features grouped into 9 capability categories (Agent Runtime,
Multi-Cloud Retrieval, Auth & Identity, Reliability & Throttling,
Cost & SLA, Crypto & Backups, Compliance & Governance, Observability,
Developer Experience).
- Each feature shows status badge (live/beta/preview), env flag, kill
switch (when one exists), since-version, and a 1-sentence blurb.
- In-page anchor nav at the top.
/compliance
- Six control domains as cards: SOC 2 catalog, audit log, DSAR +
governance, envelope encryption, API key lifecycle, DR backup +
restore. Each card surfaces the API endpoint and config flag.
- Authorization model summary with cross-link to /architecture.
- 21-runbook chip cloud (subset of docs/runbooks/ covering compliance,
crypto, DR, identity, retention).
/changelog
- 36 releases grouped into 8 thematic eras (Foundation → Enterprise
primitives → Reliability + DR → Resilience + crypto → Identity +
ABAC → Compliance + cost + SLA → Notification reliability →
Unreleased). Each era has a 1-line blurb framing its scope.
- Per-release: version + date + theme line + bullet highlights, with
era badge for visual grouping.
- Source link to CHANGELOG.md on GitHub.
Data layer:
- src/lib/feature-matrix.ts (categorized catalog)
- src/lib/changelog.ts (releases + eras + theme summaries)
- src/lib/architecture.ts (layers + components + authz pipeline)
All four pages are pure server components — they read from static TS
modules and ship at 196 B per route in the production bundle.
Sidebar: new "Project" nav section with all 6 narrative routes
(Capabilities, Architecture, Feature Matrix, Compliance, Roadmap,
Changelog).
CommandPalette: ⌘K entries + G-then-key shortcuts:
G C → Capabilities
G A → Architecture
G F → Feature Matrix
G P → Compliance (P for Policy)
G M → Roadmap (M for Map)
G L → Changelog (L for Log)
Verified: tsc --noEmit clean; npm run build clean (13 routes, all ○
static prerendered, narrative pages 196 B each); 36/36 vitest pass.
The 5 showcase dashboards open with a strategic-narrative pitch banner
(stage badge, summary, problem, why-now, CTAs to Capabilities and
Architecture). NexusRAG's Overview was metrics-only — strong on live
data, light on framing. This banner closes the gap.
The banner sits above the live Tier-A metrics, so readers immediately
see what NexusRAG is and why it matters before scanning queries / p95 /
uptime. CTAs route into the new narrative pages: /capabilities,
/architecture, and the GitHub source.
Visual: success-tone Stage badge ("Live in production"), Category +
Track badges, "Tier-A telemetry" right-anchored badge, gradient
background (surface → brand/5%) for elevation.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Wholesale rewrite of the Next.js dashboard at `/frontend` to a Vercel-grade quality bar. The previous version worked but read as "AI-generated dashboard" — too much indigo glow, too little typographic discipline, hardcoded sparkline data, no command palette, no theme management, no toast outlet, no telemetry consumer. This PR closes that gap.
Status: type-check clean · build green · 36 / 36 tests pass · ready to deploy as a separate Vercel project pointing at `/frontend` root.
What's new
Design system (`globals.css` + `tailwind.config.ts`)
Component library (17 UI primitives + 5 dashboard atoms + chat/documents)
Button (7×5), Card (incl. Description + Footer), Badge (8), Input, Select, Skeleton, Sparkline (smoothed bezier + gradient + terminator dot), StatusDot (with optional pulse halo), EmptyState, CodeBlock (copy-to-clipboard), Kbd, Tooltip, DropdownMenu, Dialog, Tabs, Avatar, ScrollArea, Popover, Separator.
Layout
Pages
Plumbing
Tests (vitest + Testing Library + jsdom)
```
✓ src/lib/utils.test.ts (15 tests)
✓ src/lib/hooks.test.ts (4 tests)
✓ src/components/ui/button.test.tsx (6 tests)
✓ src/components/ui/sparkline.test.tsx (5 tests)
✓ src/components/ui/badge.test.tsx (3 tests)
✓ src/components/dashboard/StatCard.test.tsx (3 tests)
Tests: 36 passed (36) · 1.1 s
```
Build
```
Route (app) Size First Load JS
┌ ○ / 5.24 kB 148 kB
├ ○ /_not-found 141 B 87.3 kB
├ ○ /api-keys 3.46 kB 146 kB
├ ○ /documents 4.11 kB 164 kB
├ ○ /run 3.36 kB 156 kB
├ ○ /settings 2.98 kB 154 kB
└ ○ /telemetry 6.53 kB 150 kB
```
Deployment
The frontend deploys as its own Vercel project pointing at `/frontend` rootDir. The existing `nexusrag` project continues to serve the FastAPI backend uninterrupted.
To set up:
`vercel.json` already pins the framework preset, build command, and output directory.
Test plan