Skip to content

Commit 6e263bf

Browse files
ssdeanxssdeanx
committed
feat: Refactor Mastra Admin Dashboard to v2
- Implement modular component architecture for the dashboard using Next.js 16 patterns. - Integrate React Query for data management and caching, improving performance and user experience. - Define TypeScript types and Zod schemas for all MastraClient API responses, enhancing type safety. - Create shared components including Sidebar, ErrorBoundary, LoadingSkeleton, DataTable, and DetailPanel. - Develop feature components for Agents, Workflows, Tools, Traces, Memory, Observability, Logs, and Telemetry. - Establish error handling with component-level and page-level error boundaries. - Add loading states and empty state displays for better user feedback. - Prepare for future authentication with context structure and route protection middleware. - Update documentation including PRD and tasks for clarity on new features and structure.
1 parent b30b191 commit 6e263bf

63 files changed

Lines changed: 7688 additions & 69 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.env.example‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,7 @@ NEXT_PUBLIC_MASTRA_API_URL='http://localhost:4111'
6666

6767
# Example placeholders for local testing
6868
LOCAL_DEV='true'
69+
70+
# WorkOS Configuration (optional, for authentication)
71+
WORKOS_API_KEY=sk_live_...
72+
WORKOS_CLIENT_ID=client_...

‎.github/copilot-instructions.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ applyTo: '**'
88
- 🔒 Follow security & style rules in `copilot-rules.md`.
99
- 📝 On "/update memory bank", refresh activeContext.md & progress.md.
1010
- ✅ Confirm memory bank loaded with `[Memory Bank: Active]` or warn with `[Memory Bank: Missing]`.
11-
- 🎯 Always use [`#problem`] tool for debugging, to ensure code quality.
11+
- 🎯 Always use [`#problems`] tool for debugging, to ensure code quality.
12+
- Never run commands without checking with `#problems` tool first. *This is critical to avoid errors.*
13+
- This is YOUR Internal TOOL. NOT PART OF THE USER PROJECT ITS YOUR OWN TOOL TO HELP YOU BUILD debug.
14+
- 📝 Always update `#progress.md` with your progress.
15+
- 📝 Always update `#activeContext.md` with your progress.
16+
- 📝 Always update `#AGENTS.md` with your progress.
1217
- 📚 Always sync `#AGENTS.md` in dir your working on so we have up to date info.
1318
- 🔍 For research, use [#web] or [#websearch] tool and to make sure you have no knowledge gaps.
1419
- 🤖 Check if there is a problem, use [#problem] tool to check code for errors.

‎app/components/blog-list.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client"
22

33
import Link from "next/link"
4+
import type { Route } from "next"
45
import { motion } from "framer-motion"
56
import { Badge } from "@/ui/badge"
67
import { CalendarIcon, ClockIcon, ArrowRightIcon } from "lucide-react"
@@ -70,7 +71,7 @@ export function BlogList() {
7071
viewport={{ once: true }}
7172
>
7273
<Link
73-
href={`/blog/${post.slug}`}
74+
href={`/blog/${post.slug}` as Route}
7475
className="group block rounded-2xl border border-border bg-card p-8 transition-all hover:border-primary/50 hover:shadow-lg"
7576
>
7677
<div className="mb-4 flex flex-wrap items-center gap-4">

‎app/components/careers-content.tsx‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
"use client"
22

33
import Link from "next/link"
4+
import type { Route } from "next"
45
import { motion } from "framer-motion"
6+
import type { ReactElement } from "react"
57
import { Button } from "@/ui/button"
68
import { Badge } from "@/ui/badge"
79
import { MapPinIcon, ClockIcon, ArrowRightIcon, BriefcaseIcon } from "lucide-react"
@@ -46,7 +48,7 @@ const BENEFITS = [
4648
"Latest equipment",
4749
]
4850

49-
export function CareersContent() {
51+
export function CareersContent(): ReactElement {
5052
return (
5153
<section className="container mx-auto px-4 py-24">
5254
<div className="mb-16 text-center">
@@ -86,18 +88,24 @@ export function CareersContent() {
8688
const href = `/careers/${slug}`
8789

8890
return (
89-
<motion.div
90-
key={position.title}
91-
initial={{ opacity: 0, y: 20 }}
92-
whileInView={{ opacity: 1, y: 0 }}
93-
transition={{ duration: 0.4, delay: index * 0.1 }}
94-
viewport={{ once: true }}
95-
>
96-
<Link href={href as any} className="group flex flex-col gap-4 rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/50 hover:shadow-lg sm:flex-row sm:items-center sm:justify-between">
91+
<motion.div
92+
key={position.title}
93+
initial={{ opacity: 0, y: 20 }}
94+
whileInView={{ opacity: 1, y: 0 }}
95+
transition={{ duration: 0.4, delay: index * 0.1 }}
96+
viewport={{ once: true }}
97+
>
98+
<Link href={href as Route} className="group flex flex-col gap-4 rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/50 hover:shadow-lg sm:flex-row sm:items-center sm:justify-between">
9799
<div>
98100
<div className="mb-2 flex flex-wrap items-center gap-2">
99-
<Badge variant="secondary">{position.department}</Badge>
100-
<Badge variant="outline">{position.type}</Badge>
101+
<span className="flex items-center gap-2">
102+
<BriefcaseIcon className="size-4 text-muted-foreground" />
103+
<Badge variant="secondary">{position.department}</Badge>
104+
</span>
105+
<span className="flex items-center gap-2">
106+
<ClockIcon className="size-4 text-muted-foreground" />
107+
<Badge variant="outline">{position.type}</Badge>
108+
</span>
101109
</div>
102110
<h3 className="mb-1 text-xl font-bold text-foreground group-hover:text-primary transition-colors">
103111
{position.title}
@@ -114,7 +122,8 @@ export function CareersContent() {
114122
</Button>
115123
</Link>
116124
</motion.div>
117-
))}
125+
)
126+
})}
118127
</div>
119128
</div>
120129
</div>

‎app/dashboard/AGENTS.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# Dashboard AGENTS.md
2+
3+
## Overview
4+
5+
The Dashboard (`app/dashboard/`) is a comprehensive admin interface that uses **MastraClient** to interact with the Mastra server for observability, management, and data access. It complements the AI SDK-based streaming pages (chat, workflows, networks) by providing REST-based data retrieval and management capabilities.
6+
7+
## Architecture
8+
9+
```
10+
app/dashboard/
11+
├── layout.tsx # Sidebar navigation layout
12+
├── page.tsx # Overview dashboard with metrics
13+
├── agents/page.tsx # Agent management
14+
├── workflows/page.tsx # Workflow management & execution
15+
├── tools/page.tsx # Tool execution & details
16+
├── vectors/page.tsx # Vector index management
17+
├── memory/page.tsx # Thread & working memory management
18+
├── observability/page.tsx # Traces, spans, scoring
19+
├── logs/page.tsx # System & run logs
20+
└── telemetry/page.tsx # Metrics & analytics
21+
```
22+
23+
## Key Files
24+
25+
### lib/hooks/use-mastra.ts
26+
27+
Custom React hooks wrapping MastraClient for data fetching:
28+
29+
| Hook | Purpose |
30+
|------|---------|
31+
| `useAgents()` | List all agents |
32+
| `useAgent(id)` | Get agent details |
33+
| `useAgentEvals(id)` | Get CI/live evaluations |
34+
| `useWorkflows()` | List all workflows |
35+
| `useWorkflow(id)` | Get workflow details |
36+
| `useTools()` | List all tools |
37+
| `useTool(id)` | Get tool details |
38+
| `useVectorIndexes(name)` | List vector indexes |
39+
| `useVectorDetails(name, index)` | Get index details |
40+
| `useMemoryThreads(resourceId, agentId)` | List memory threads |
41+
| `useMemoryThread(threadId, agentId)` | Get thread messages |
42+
| `useWorkingMemory(agentId, threadId, resourceId)` | Get working memory |
43+
| `useAITraces(params)` | List AI traces with filtering |
44+
| `useAITrace(traceId)` | Get complete trace |
45+
| `useLogs(transportId)` | Get system logs |
46+
| `useRunLogs(runId, transportId)` | Get run-specific logs |
47+
| `useTelemetry(params)` | Get telemetry data |
48+
49+
### Action Hooks
50+
51+
| Hook | Purpose |
52+
|------|---------|
53+
| `useExecuteTool()` | Execute a tool with args |
54+
| `useCreateMemoryThread()` | Create new thread |
55+
| `useUpdateWorkingMemory()` | Update working memory |
56+
| `useVectorQuery()` | Query vectors |
57+
| `useScoreTraces()` | Score traces |
58+
59+
## Features by Page
60+
61+
### Dashboard Home (`/dashboard`)
62+
- Stats overview (agents, workflows, tools, traces)
63+
- Recent agents list
64+
- Recent workflows list
65+
- Recent traces
66+
- Quick links to all sections
67+
68+
### Agents (`/dashboard/agents`)
69+
- List/search agents
70+
- View agent details (instructions, config)
71+
- View agent tools
72+
- View CI/live evaluations
73+
- Link to chat with agent
74+
75+
### Workflows (`/dashboard/workflows`)
76+
- List/search workflows
77+
- View workflow details & steps
78+
- Run workflows with custom input
79+
- View input schema
80+
81+
### Tools (`/dashboard/tools`)
82+
- List/search tools
83+
- View tool details
84+
- View input/output schemas
85+
- Execute tools with custom args
86+
87+
### Vectors (`/dashboard/vectors`)
88+
- List vector indexes
89+
- Create new indexes (name, dimension, metric)
90+
- View index details
91+
- Query vectors with filters
92+
- Delete indexes
93+
94+
### Memory (`/dashboard/memory`)
95+
- List memory threads by resource/agent
96+
- Create new threads
97+
- View thread messages
98+
- View/edit working memory
99+
- Delete threads
100+
101+
### Observability (`/dashboard/observability`)
102+
- List AI traces with pagination
103+
- Filter by name, span type, entity type
104+
- View complete trace with all spans
105+
- Score traces with registered scorers
106+
- View trace attributes
107+
108+
### Logs (`/dashboard/logs`)
109+
- List system logs
110+
- Filter by transport, level
111+
- Search logs
112+
- View run-specific logs
113+
- Expandable log entries
114+
115+
### Telemetry (`/dashboard/telemetry`)
116+
- View telemetry data
117+
- Filter by name, scope
118+
- Aggregate stats (duration, success rate)
119+
- Expandable telemetry entries
120+
121+
## Usage Pattern
122+
123+
The dashboard separates concerns:
124+
125+
1. **AI SDK** (`@ai-sdk/react`) - Used for real-time streaming in `/chat`, `/workflows`, `/networks`
126+
2. **MastraClient** (`@mastra/client-js`) - Used for REST-based data access in `/dashboard/*`
127+
128+
This allows:
129+
- Real-time interactions via AI SDK's optimized streaming
130+
- Data management and monitoring via MastraClient's comprehensive API
131+
- Clean separation between "do work" and "view results" interfaces
132+
133+
## Environment Variables
134+
135+
```env
136+
NEXT_PUBLIC_MASTRA_API_URL=http://localhost:4111
137+
```
138+
139+
## MastraClient Configuration
140+
141+
```typescript
142+
import { MastraClient } from "@mastra/client-js"
143+
144+
export const mastraClient = new MastraClient({
145+
baseUrl: process.env.NEXT_PUBLIC_MASTRA_API_URL || "http://localhost:4111",
146+
retries: 3,
147+
backoffMs: 300,
148+
maxBackoffMs: 5000,
149+
})
150+
```
151+
152+
---
153+
Last updated: 2025-12-05

0 commit comments

Comments
 (0)