refactor: update component styles and state management

- Updated tool type casting in AgentTools component for better type safety.
- Changed trend color classes in StatCard and AgentEvalsTab components to use new design tokens.
- Modified LogsPage component to initialize selectedTransport and levelFilter states with "all" for improved filtering.
- Adjusted ObservabilityPage component to set spanTypeFilter and entityTypeFilter defaults to "all".
- Enhanced DashboardPage component styles to align with new design guidelines.
- Updated Mastra configuration to include new headers and commented out unused middleware for clarity.

Author: ssdeanx

app/chat/components/agent-tools.tsx

@@ -34,7 +34,7 @@ export function AgentTools({ tools }: AgentToolsProps) {
           <Tool key={t.toolCallId} defaultOpen={false}>
             <ToolHeader
               title={toolName}
-              type={toolType}
+              type={toolType as `tool-${string}`}
               state={toolState}
             />
             <ToolContent>

app/dashboard/_components/stat-card.tsx

@@ -56,7 +56,7 @@ export function StatCard({
           <p
             className={cn(
               "text-xs mt-1",
-              trend.positive ? "text-green-500" : "text-red-500"
+              trend.positive ? "text-accent" : "text-destructive"
             )}
           >
             {trend.positive ? "+" : "-"}

app/dashboard/agents/_components/agent-evals-tab.tsx

@@ -52,9 +52,9 @@ export function AgentEvalsTab({ agentId }: AgentEvalsTabProps) {
               >
                 <div className="flex items-center gap-3">
                   {evaluation.passed ? (
-                    <CheckCircle2 className="h-4 w-4 text-green-500" />
+                    <CheckCircle2 className="h-4 w-4 text-accent" />
                   ) : (
-                    <XCircle className="h-4 w-4 text-red-500" />
+                    <XCircle className="h-4 w-4 text-destructive" />
                   )}
                   <span className="font-medium">{evaluation.name || `Eval ${index + 1}`}</span>
                 </div>

app/dashboard/logs/page.tsx

@@ -32,16 +32,16 @@ import { cn } from "@/lib/utils"
 
 export default function LogsPage() {
   const { data: transports, loading: transportsLoading } = useLogTransports()
-  const [selectedTransport, setSelectedTransport] = useState<string>("")
+  const [selectedTransport, setSelectedTransport] = useState<string>("all")
   const [runIdFilter, setRunIdFilter] = useState("")
-  const { data: logs, loading, error, refetch } = useLogs(selectedTransport || undefined)
+  const { data: logs, loading, error, refetch } = useLogs(selectedTransport === "all" ? undefined : selectedTransport)
   const { data: runLogs, loading: runLogsLoading } = useRunLogs(
     runIdFilter || null,
-    selectedTransport || undefined
+    selectedTransport === "all" ? undefined : selectedTransport
   )
 
   const [searchQuery, setSearchQuery] = useState("")
-  const [levelFilter, setLevelFilter] = useState<string>("")
+  const [levelFilter, setLevelFilter] = useState<string>("all")
 
   const logsArray = Array.isArray(logs) ? logs : (logs as unknown as { logs?: unknown[] })?.logs ?? []
   const filteredLogs = logsArray.filter((log: Record<string, unknown>) => {
@@ -50,7 +50,7 @@ export default function LogsPage() {
       (log.message as string)?.toLowerCase().includes(searchQuery.toLowerCase()) ||
       JSON.stringify(log).toLowerCase().includes(searchQuery.toLowerCase())
 
-    const matchesLevel = !levelFilter || log.level === levelFilter
+    const matchesLevel = levelFilter === "all" || log.level === levelFilter
 
     return matchesSearch && matchesLevel
   })
@@ -80,7 +80,7 @@ export default function LogsPage() {
                 <SelectValue placeholder="Select transport" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="">All Transports</SelectItem>
+                <SelectItem value="all">All Transports</SelectItem>
                 {((transports as unknown as { transports?: string[] })?.transports ?? []).map((t) => (
                   <SelectItem key={t} value={t}>
                     {t}
@@ -97,7 +97,7 @@ export default function LogsPage() {
                 <SelectValue placeholder="All Levels" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="">All Levels</SelectItem>
+                <SelectItem value="all">All Levels</SelectItem>
                 <SelectItem value="error">Error</SelectItem>
                 <SelectItem value="warn">Warning</SelectItem>
                 <SelectItem value="info">Info</SelectItem>
@@ -145,7 +145,7 @@ export default function LogsPage() {
             ) : filteredLogs && filteredLogs.length > 0 ? (
               <div className="p-4 space-y-2">
                 {filteredLogs.map((log: any, index: number) => (
-                  <LogEntry key={log.id || index} log={log} />
+                  <LogEntry key={log.id ?? index} log={log} />
                 ))}
               </div>
             ) : (
@@ -190,7 +190,7 @@ export default function LogsPage() {
               <div className="p-4 space-y-2">
                 {Array.isArray(runLogs) ? (
                   runLogs.map((log: any, index: number) => (
-                    <LogEntry key={log.id || index} log={log} />
+                    <LogEntry key={log.id ?? index} log={log} />
                   ))
                 ) : (
                   <LogEntry log={runLogs} />
@@ -216,12 +216,12 @@ function LogEntry({ log }: { log: any }) {
 
   const levelConfig: Record<string, { icon: typeof Info; color: string; bg: string }> = {
     error: { icon: AlertCircle, color: "text-destructive", bg: "bg-destructive/10" },
-    warn: { icon: AlertTriangle, color: "text-yellow-500", bg: "bg-yellow-500/10" },
-    info: { icon: Info, color: "text-blue-500", bg: "bg-blue-500/10" },
+    warn: { icon: AlertTriangle, color: "text-secondary dark:text-secondary-foreground", bg: "bg-secondary/10 dark:bg-secondary/30" },
+    info: { icon: Info, color: "text-primary dark:text-primary-foreground", bg: "bg-primary/10 dark:bg-primary/30" },
     debug: { icon: Bug, color: "text-muted-foreground", bg: "bg-muted" },
   }
 
-  const level = log.level?.toLowerCase() || "info"
+  const level = log.level?.toLowerCase() ?? "info"
   const config = levelConfig[level] || levelConfig.info
   const Icon = config.icon
 
@@ -249,7 +249,7 @@ function LogEntry({ log }: { log: any }) {
                 </Badge>
               )}
             </div>
-            <p className="mt-1 text-sm truncate">{log.message || JSON.stringify(log)}</p>
+            <p className="mt-1 text-sm truncate">{log.message ?? JSON.stringify(log)}</p>
           </div>
           {expanded ? (
             <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />

app/dashboard/observability/page.tsx

@@ -42,16 +42,19 @@ export default function ObservabilityPage() {
   const [page, setPage] = useState(1)
   const [perPage, setPerPage] = useState(20)
   const [nameFilter, setNameFilter] = useState("")
-  const [spanTypeFilter, setSpanTypeFilter] = useState<string>("")
-  const [entityTypeFilter, setEntityTypeFilter] = useState<string>("")
+  const [spanTypeFilter, setSpanTypeFilter] = useState<string>("all")
+  const [entityTypeFilter, setEntityTypeFilter] = useState<string>("all")
 
   const { data: traces, loading, error, refetch } = useAITraces({
     page,
     perPage,
     filters: {
       name: nameFilter || undefined,
-      spanType: spanTypeFilter || undefined,
-      entityType: (entityTypeFilter || undefined) as "agent" | "workflow" | undefined,
+      spanType: spanTypeFilter === "all" ? undefined : spanTypeFilter,
+      entityType: (entityTypeFilter === "all" ? undefined : entityTypeFilter) as
+        | "agent"
+        | "workflow"
+        | undefined,
     },
   })
 
@@ -86,7 +89,7 @@ export default function ObservabilityPage() {
                   <SelectValue placeholder="Span Type" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="">All Types</SelectItem>
+                  <SelectItem value="all">All Types</SelectItem>
                   <SelectItem value="agent">Agent</SelectItem>
                   <SelectItem value="tool">Tool</SelectItem>
                   <SelectItem value="workflow">Workflow</SelectItem>
@@ -98,7 +101,7 @@ export default function ObservabilityPage() {
                   <SelectValue placeholder="Entity Type" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="">All Entities</SelectItem>
+                  <SelectItem value="all">All Entities</SelectItem>
                   <SelectItem value="agent">Agent</SelectItem>
                   <SelectItem value="tool">Tool</SelectItem>
                   <SelectItem value="workflow">Workflow</SelectItem>
@@ -132,27 +135,27 @@ export default function ObservabilityPage() {
                   <div className="flex items-start gap-3">
                     <Activity className="h-5 w-5 mt-0.5 text-muted-foreground" />
                     <div className="flex-1 min-w-0">
-                      <div className="font-medium truncate">{span.name || span.traceId}</div>
+                      <div className="font-medium truncate">{span.name ?? span.traceId}</div>
                       <div className="flex items-center gap-2 mt-1">
                         <Badge variant="secondary" className="text-xs">
-                          {span.spanType || "unknown"}
+                          {span.spanType ?? "unknown"}
                         </Badge>
-                        {span.duration && (
+                        {(Boolean(span.duration)) && (
                           <span className="text-xs text-muted-foreground flex items-center gap-1">
                             <Clock className="h-3 w-3" />
                             {span.duration}ms
                           </span>
                         )}
                       </div>
                       <div className="text-xs text-muted-foreground mt-1">
-                        {span.startTime ? new Date(span.startTime).toLocaleString() : "No timestamp"}
+                        {(span.startTime) ? new Date(span.startTime).toLocaleString() : "No timestamp"}
                       </div>
                     </div>
                     <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
                   </div>
                 </button>
               ))}
-              {(!traces || !(traces as any)?.spans?.length) && (
+              {(!traces || !((traces as any)?.spans?.length)) && (
                 <div className="p-4 text-center text-sm text-muted-foreground">
                   No traces found
                 </div>
@@ -191,7 +194,7 @@ export default function ObservabilityPage() {
 
       {/* Trace Details */}
       <div className="flex-1 overflow-auto">
-        {selectedTraceId ? (
+        {(selectedTraceId) ? (
           <TraceDetails traceId={selectedTraceId} />
         ) : (
           <div className="flex h-full items-center justify-center text-muted-foreground">
@@ -250,7 +253,7 @@ function TraceDetails({ traceId }: { traceId: string }) {
       {/* Header */}
       <div className="flex items-start justify-between">
         <div>
-          <h1 className="text-2xl font-bold">{traceData?.name || traceId}</h1>
+          <h1 className="text-2xl font-bold">{traceData?.name ?? traceId}</h1>
           <p className="text-muted-foreground mt-1">
             Trace ID: <code className="text-xs bg-muted px-1 py-0.5 rounded">{traceId}</code>
           </p>
@@ -279,7 +282,7 @@ function TraceDetails({ traceId }: { traceId: string }) {
                   className="mt-1"
                 />
               </div>
-              {scoreResult && (
+              {(Boolean(scoreResult)) && (
                 <div className="space-y-2">
                   <Label>Result</Label>
                   <pre className="text-sm bg-muted p-3 rounded-md overflow-auto max-h-48">
@@ -312,7 +315,7 @@ function TraceDetails({ traceId }: { traceId: string }) {
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
-              {traceData?.duration ? `${traceData.duration}ms` : "N/A"}
+              {(traceData?.duration) ? `${traceData.duration}ms` : "N/A"}
             </div>
           </CardContent>
         </Card>
@@ -338,7 +341,7 @@ function TraceDetails({ traceId }: { traceId: string }) {
           </CardHeader>
           <CardContent>
             <Badge variant="secondary">
-              {traceData?.spanType || "Unknown"}
+              {traceData?.spanType ?? "Unknown"}
             </Badge>
           </CardContent>
         </Card>
@@ -353,7 +356,7 @@ function TraceDetails({ traceId }: { traceId: string }) {
             <Badge
               variant={traceData?.status === "ok" || traceData?.status === "success" ? "default" : "destructive"}
             >
-              {traceData?.status || "Unknown"}
+              {traceData?.status ?? "Unknown"}
             </Badge>
           </CardContent>
         </Card>
@@ -381,29 +384,29 @@ function TraceDetails({ traceId }: { traceId: string }) {
                   <div className="space-y-2">
                     {traceData.spans.map((span: any, index: number) => (
                       <div
-                        key={span.spanId || index}
+                        key={span.spanId ?? index}
                         className="p-4 bg-muted rounded-md"
-                        style={{ marginLeft: `${(span.depth || 0) * 20}px` }}
+                        style={{ marginLeft: `${(span.depth ?? 0) * 20}px` }}
                       >
                         <div className="flex items-start justify-between">
                           <div>
-                            <div className="font-medium">{span.name || `Span ${index + 1}`}</div>
+                            <div className="font-medium">{span.name ?? `Span ${index + 1}`}</div>
                             <div className="text-sm text-muted-foreground">
                               {span.spanId}
                             </div>
                           </div>
                           <div className="flex items-center gap-2">
-                            {span.duration && (
+                            {(Boolean(span.duration)) && (
                               <span className="text-xs text-muted-foreground">
                                 {span.duration}ms
                               </span>
                             )}
                             <Badge variant="outline" className="text-xs">
-                              {span.spanType || span.kind || "unknown"}
+                              {(span.spanType ?? span.kind) ?? "unknown"}
                             </Badge>
                           </div>
                         </div>
-                        {span.attributes && Object.keys(span.attributes).length > 0 && (
+                        {(Boolean(span.attributes)) && Object.keys(span.attributes).length > 0 && (
                           <details className="mt-2">
                             <summary className="text-xs text-muted-foreground cursor-pointer">
                               Attributes
@@ -433,7 +436,7 @@ function TraceDetails({ traceId }: { traceId: string }) {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              {traceData?.attributes ? (
+              {(traceData?.attributes) ? (
                 <pre className="whitespace-pre-wrap text-sm bg-muted p-4 rounded-md overflow-auto max-h-96">
                   {JSON.stringify(traceData.attributes, null, 2)}
                 </pre>

app/dashboard/page.tsx

@@ -190,8 +190,8 @@ export default function DashboardPage() {
             <CardHeader className="bg-muted/30">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
-                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-500/10">
-                    <Workflow className="h-4 w-4 text-blue-500" />
+                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary dark:bg-primary/30 dark:text-primary-foreground">
+                    <Workflow className="h-4 w-4" />
                   </div>
                   <div>
                     <CardTitle className="text-base">Workflows</CardTitle>
@@ -258,8 +258,8 @@ export default function DashboardPage() {
           <CardHeader className="bg-muted/30">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-green-500/10">
-                  <Activity className="h-4 w-4 text-green-500" />
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent/10 text-accent dark:bg-accent/30 dark:text-accent-foreground">
+                  <Activity className="h-4 w-4" />
                 </div>
                 <div>
                   <CardTitle className="text-base">Recent Traces</CardTitle>
@@ -374,10 +374,10 @@ export default function DashboardPage() {
 }
 
 const colorVariants = {
-  purple: "bg-purple-500/10 text-purple-500",
-  pink: "bg-pink-500/10 text-pink-500",
-  orange: "bg-orange-500/10 text-orange-500",
-  cyan: "bg-cyan-500/10 text-cyan-500",
+  purple: "bg-primary/10 text-primary dark:bg-primary/30 dark:text-primary-foreground",
+  pink: "bg-accent/10 text-accent dark:bg-accent/30 dark:text-accent-foreground",
+  orange: "bg-secondary/10 text-secondary dark:bg-secondary/30 dark:text-secondary-foreground",
+  cyan: "bg-muted/10 text-muted-foreground dark:bg-muted/30 dark:text-muted-foreground",
 }
 
 function QuickLinkCard({

src/mastra/index.ts

@@ -640,33 +640,35 @@ export const mastra = new Mastra({
     cors: {
       origin: ["*"], // Allow specific origins or '*' for all
       allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
-      allowHeaders: ["Content-Type", "Authorization"],
+      allowHeaders: ["Content-Type", "Authorization", 'x-mastra-client-type'],
+      exposeHeaders: ["Content-Length", "X-Requested-With"],
       credentials: false,
     },
     middleware: [
-      async (c, next) => {
-        const runtimeContext = c.get("runtimeContext");
-
-        if (c.req.method === "POST") {
-          try {
-            const clonedReq = c.req.raw.clone();
-            const body = await clonedReq.json();
-
+      // Middleware to extract data from the request body
+//      async (c, next) => {
+//        const runtimeContext = c.get("runtimeContext");
+//
+//        if (c.req.method === "POST") {
+//          try {
+//            const clonedReq = c.req.raw.clone();
+///            const body = await clonedReq.json();
+//
             // Ensure body and body.data are objects before using them
-            if (body !== null && typeof body === 'object' && body.data !== null && typeof body.data === 'object') {
-              const data = body.data as Record<string, unknown>;
-              for (const [key, value] of Object.entries(data)) {
-                runtimeContext.set(key, value);
-              }
-            }
-          } catch {
-            log.error("Failed to parse request body for middleware");
-          }
-        }
-        await next();
-      },
-    ],
-  }
+//            if (body !== null && typeof body === 'object' && body.data !== null && typeof body.data === 'object') {
+//              const data = body.data as Record<string, unknown>;
+//              for (const [key, value] of Object.entries(data)) {
+//                runtimeContext.set(key, value);
+//              }
+//            }
+//          } catch {
+//            log.error("Failed to parse request body for middleware");
+//          }
+//        }
+//        await next();
+//      },
+          ],
+    }
 });
 
 log.info("Mastra instance created");