feat: implement UI for listing and searching agent networks, tools, and workflows with associated types.

Author: ssdeanx

app/components/networks-list.tsx

@@ -7,8 +7,8 @@ import { Badge } from '@/ui/badge'
 import { Input } from '@/ui/input'
 import { PublicPageHero } from '@/app/components/primitives/public-page-hero'
 import { AnimatedRadarScan } from '@/app/components/gsap/svg-suite'
-import { useAgents } from '@/lib/hooks/use-mastra-query'
-import type { Agent } from '@/lib/hooks/use-mastra-query'
+import { useMastraQuery } from '@/lib/hooks/use-mastra-query'
+import type { Agent } from '@/lib/types/mastra-api'
 import {
     SearchIcon,
     NetworkIcon,
@@ -52,14 +52,15 @@ function selectNetworkIcon(id: string): typeof NetworkIcon {
 }
 
 export function NetworksList() {
-    const { data, loading, error } = useAgents()
+    const { useAgents } = useMastraQuery()
+    const { data, isLoading: loading, error } = useAgents()
     const [search, setSearch] = useState('')
 
     const networks: NetworkCard[] = (data ?? [])
         .filter((agent: Agent) => agent.id.toLowerCase().includes('network'))
         .map((network: Agent) => ({
             id: network.id,
-            name: network.name ?? network.id,
+            name: network.name,
             description:
                 network.description ??
                 'Network orchestrator available from backend.',

app/components/tools-list.tsx

@@ -8,8 +8,8 @@ import { Badge } from '@/ui/badge'
 import { Button } from '@/ui/button'
 import { PublicPageHero } from '@/app/components/primitives/public-page-hero'
 import { AnimatedQuantumLattice } from '@/app/components/gsap/svg-suite'
-import { useTools } from '@/lib/hooks/use-mastra'
-import type { Tool } from '@/lib/hooks/use-mastra-query'
+import { useMastraQuery } from '@/lib/hooks/use-mastra-query'
+import type { Tool } from '@/lib/types/mastra-api'
 import {
     SearchIcon,
     WrenchIcon,
@@ -132,17 +132,18 @@ function chooseToolIcon(id: string): typeof WrenchIcon {
 }
 
 export function ToolsList() {
-    const { data, loading, error } = useTools()
+    const { useTools } = useMastraQuery()
+    const { data, isLoading: loading, error } = useTools()
     const [search, setSearch] = useState('')
     const [selectedCategory, setSelectedCategory] = useState('All')
     const [showAll, setShowAll] = useState(false)
 
     const tools: ToolCard[] = (data ?? []).map((tool: Tool) => ({
         id: tool.id,
-        name: tool.name ?? tool.id,
-        description: tool.description ?? 'Tool available from backend catalog.',
-        inputSchema: tool.id,
-        outputSchema: tool.id,
+        name: tool.id,
+        description: tool.description,
+        inputSchema: tool.inputSchema,
+        outputSchema: tool.outputSchema,
         category: classifyToolCategory(tool.id),
         icon: chooseToolIcon(tool.id),
     }))

app/components/workflows-list.tsx

@@ -8,8 +8,8 @@ import { Badge } from '@/ui/badge'
 import { Button } from '@/ui/button'
 import { PublicPageHero } from '@/app/components/primitives/public-page-hero'
 import { AnimatedHelixDna } from '@/app/components/gsap/svg-suite'
-import { useWorkflows } from '@/lib/hooks/use-mastra'
-import type { Workflow as WorkflowType } from '@/lib/hooks/use-mastra-query'
+import { useMastraQuery } from '@/lib/hooks/use-mastra-query'
+import type { Workflow as WorkflowType } from '@/lib/types/mastra-api'
 import {
     SearchIcon,
     PlayIcon,
@@ -53,24 +53,25 @@ function workflowStepsCount(workflow: WorkflowType): number {
     if (Array.isArray(workflow.steps)) {
         return workflow.steps.length
     }
-    if (workflow.steps) {
+    if (typeof workflow.steps === 'object') {
         return Object.keys(workflow.steps).length
     }
     return 0
 }
 
 export function WorkflowsList() {
-    const { data, loading, error } = useWorkflows()
+    const { useWorkflows } = useMastraQuery()
+    const { data, isLoading: loading, error } = useWorkflows()
     const [search, setSearch] = useState('')
     const [selectedCategory, setSelectedCategory] = useState('All')
 
     const workflows: WorkflowCard[] = (data ?? []).map(
         (workflow: WorkflowType) => ({
-            id: workflow.id,
-            name: workflow.name ?? workflow.id,
+            id: workflow.name,
+            name: workflow.name,
             description:
                 workflow.description ?? 'Workflow available from backend.',
-            category: classifyWorkflowCategory(workflow.id),
+            category: classifyWorkflowCategory(workflow.name),
             steps: workflowStepsCount(workflow),
         })
     )

lib/types/mastra-api.ts

@@ -115,9 +115,9 @@ export type {
 }
 
 // Convenience Aliases for the app
-export type Agent = GetAgentResponse & { id: string }
-export type Tool = GetToolResponse & { id: string }
-export type Workflow = GetWorkflowResponse & { id: string }
+export type Agent = GetAgentResponse
+export type Tool = GetToolResponse
+export type Workflow = GetWorkflowResponse
 export type StoredAgent = StoredAgentResponse
 export type MemoryThread = ListMemoryThreadsResponse['threads'][number]
 export type Message = ListMemoryThreadMessagesResponse['messages'][number]