The NeuralDesk AI Ops Dashboard uses Next.js App Router with route groups to separate the main AI ops interface from the authentication flow.
Directory Overview
neuraldesk-ai-ops-dashboard/
├── app/
│ ├── (app)/ # Main AI ops pages
│ │ ├── layout.tsx # AppSidebar + Header
│ │ ├── dashboard/page.tsx # AI ops dashboard
│ │ ├── models/page.tsx # Model registry
│ │ ├── prompts/page.tsx # Prompt library
│ │ ├── usage/page.tsx # Usage analytics
│ │ ├── logs/page.tsx # Request/response logs
│ │ ├── errors/page.tsx # Error tracking
│ │ ├── playground/page.tsx # Prompt playground
│ │ ├── team/page.tsx # Team management
│ │ └── settings/page.tsx # Settings
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Centered card layout
│ │ ├── login/page.tsx
│ │ ├── signup/page.tsx
│ │ └── forgot-password/page.tsx
│ ├── page.tsx # Root page
│ ├── globals.css # Design tokens
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/ # shadcn/ui primitives
│ ├── a11y/ # Accessibility (live-region, visually-hidden)
│ ├── layout/ # App chrome (sidebar, header, skip-link, theme-toggle)
│ ├── dashboard/ # Dashboard composites (stat cards, charts, activity feed)
│ ├── models/ # Model composites (registry table, status badges, version timeline)
│ ├── prompts/ # Prompt composites (library table, template cards, version diff)
│ ├── usage/ # Usage composites (token charts, cost breakdown, budget alerts)
│ ├── logs/ # Log composites (log table, filters, detail panel)
│ ├── errors/ # Error composites (error list, frequency chart, detail view)
│ ├── playground/ # Playground composites (editor, output panel, parameter controls)
│ ├── team/ # Team composites (member table, role badges, API key list)
│ └── settings/ # Settings composites (config forms, preference panels)
├── data/
│ └── seed.ts # Mock data for all pages
├── types/
│ └── index.ts # TypeScript interfaces
├── hooks/
│ ├── use-mobile.ts # Mobile viewport detection
│ ├── use-announce.ts # Screen reader announcements
│ ├── use-focus-trap.ts # Focus trap for modals
│ ├── use-keyboard-navigation.ts # Keyboard nav support
│ └── use-reduced-motion.ts # Reduced motion preference
├── lib/
│ └── utils.ts # cn() utility
└── public/
└── images/ # Static images
Route Groups
| Group |
Layout |
Purpose |
(app) |
AppSidebar + Header |
Main AI ops pages (dashboard, models, prompts, usage, logs, errors, playground, team, settings) |
(auth) |
Centered card |
Login, signup, forgot password |
Component Organization
Primitives (components/ui/)
shadcn/ui components: Avatar, Badge, Breadcrumb, Button, Card, Chart, Checkbox, Collapsible, Command, Dialog, DropdownMenu, Input, Label, Popover, Progress, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Sonner, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, and Tooltip.
Dashboard Composites (components/dashboard/)
| Component |
Used In |
stat-card |
Dashboard (active models, total tokens, monthly cost, avg latency, error rate, active users) |
token-usage-chart |
Dashboard (daily/weekly token usage via Recharts AreaChart) |
cost-tracking-chart |
Dashboard (cost by model via Recharts BarChart) |
latency-chart |
Dashboard (latency trends via Recharts LineChart) |
activity-feed |
Dashboard (recent API calls, deployments, prompt changes) |
Model Composites (components/models/)
| Component |
Used In |
model-registry-table |
Models page (sortable, filterable model list) |
model-status-badge |
Models page (deployed, staging, deprecated status) |
version-timeline |
Models page (version history with deployment dates) |
performance-comparison |
Models page (side-by-side model metric comparison) |
Prompt Composites (components/prompts/)
| Component |
Used In |
prompt-library-table |
Prompts page (prompt list with categories and tags) |
template-card |
Prompts page (prompt template preview cards) |
version-diff |
Prompts page (side-by-side prompt version comparison) |
ab-test-results |
Prompts page (A/B test performance metrics) |
Layout Components (components/layout/)
| Component |
Purpose |
app-sidebar |
Collapsible sidebar with AI ops navigation sections (Overview, Operations, Testing, Admin) |
header |
Top bar with breadcrumbs, search, notifications, theme toggle, user menu |
skip-link |
Accessibility skip navigation link |
theme-toggle |
Light/dark mode switch |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data (models, prompts, usage records, logs, errors, team members, API keys, etc.) |
types/index.ts |
TypeScript interfaces for all domain objects (Model, Prompt, UsageRecord, LogEntry, ErrorEvent, TeamMember, ApiKey, etc.) |
lib/utils.ts |
cn() class name utility |
app/globals.css |
Design tokens (oklch colors with purple/violet hue 285, spacing, typography) |