@ash-ai/dashboard 0.0.8 → 0.1.0

package/app/agents/knowledge/page.tsx

@@ -1,70 +1,21 @@
 'use client'
 
-import { Suspense, useState, useRef, useCallback } from 'react'
+import { Suspense } from 'react'
 import { useSearchParams } from 'next/navigation'
 import Link from 'next/link'
-import { useAgentFiles } from '@/lib/hooks'
+import dynamic from 'next/dynamic'
 import { getClient } from '@/lib/client'
-import { Card, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { EmptyState } from '@/components/ui/empty-state'
 import { ShimmerBlock } from '@/components/ui/shimmer'
-import { formatRelativeTime } from '@/lib/utils'
-import {
-  ArrowLeft,
-  BookOpen,
-  Upload,
-  Trash2,
-  FileText,
-  ChevronDown,
-  ChevronRight,
-  X,
-  Loader2,
-} from 'lucide-react'
+import { ArrowLeft } from 'lucide-react'
+
+const AgentKnowledgeBase = dynamic(
+  () => import('@ash-ai/ui').then((mod) => ({ default: mod.AgentKnowledgeBase })),
+  { ssr: false, loading: () => <ShimmerBlock height={200} /> }
+)
 
 function KnowledgeContent() {
   const searchParams = useSearchParams()
   const name = searchParams.get('name')
-  const { files, loading, refresh } = useAgentFiles(name)
-  const [expandedFile, setExpandedFile] = useState<string | null>(null)
-  const [deleting, setDeleting] = useState<string | null>(null)
-  const [uploading, setUploading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-
-  const handleUpload = useCallback(async (fileList: FileList) => {
-    if (!name) return
-    setUploading(true)
-    setError(null)
-    try {
-      const filesToUpload: Array<{ path: string; content: string }> = []
-      for (const file of Array.from(fileList)) {
-        const text = await file.text()
-        filesToUpload.push({ path: file.name, content: text })
-      }
-      await getClient().uploadAgentFiles(name, filesToUpload)
-      refresh()
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to upload files')
-    } finally {
-      setUploading(false)
-    }
-  }, [name, refresh])
-
-  async function handleDelete(filePath: string) {
-    if (!name) return
-    setDeleting(filePath)
-    setError(null)
-    try {
-      await getClient().deleteAgentFile(name, filePath)
-      setExpandedFile(null)
-      refresh()
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to delete file')
-    } finally {
-      setDeleting(null)
-    }
-  }
 
   if (!name) {
     return (
@@ -79,7 +30,6 @@ function KnowledgeContent() {
 
   return (
     <div className="space-y-6">
-      {/* Back link */}
       <Link
         href={`/agents/detail?name=${encodeURIComponent(name)}`}
         className="inline-flex items-center gap-1.5 text-sm text-white/50 hover:text-white transition-colors"
@@ -88,107 +38,14 @@ function KnowledgeContent() {
         Back to {name}
       </Link>
 
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-white">Knowledge Base</h1>
-          <p className="mt-1 text-sm text-white/50">
-            Files for <span className="text-white/70">{name}</span>
-          </p>
-        </div>
-        <Button onClick={() => fileInputRef.current?.click()} disabled={uploading}>
-          {uploading ? (
-            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-          ) : (
-            <Upload className="h-4 w-4 mr-2" />
-          )}
-          {uploading ? 'Uploading...' : 'Upload Files'}
-        </Button>
-        <input
-          ref={fileInputRef}
-          type="file"
-          multiple
-          className="hidden"
-          onChange={(e) => {
-            if (e.target.files && e.target.files.length > 0) {
-              handleUpload(e.target.files)
-              e.target.value = ''
-            }
-          }}
-        />
+      <div>
+        <h1 className="text-2xl font-bold text-white">Knowledge Base</h1>
+        <p className="mt-1 text-sm text-white/50">
+          Manage files for <span className="text-white/70">{name}</span>
+        </p>
       </div>
 
-      {error && (
-        <div className="text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg px-4 py-2">
-          {error}
-        </div>
-      )}
-
-      {loading ? (
-        <div className="space-y-3">
-          {[1, 2, 3].map((i) => (
-            <ShimmerBlock key={i} height={60} />
-          ))}
-        </div>
-      ) : files.length === 0 ? (
-        <EmptyState
-          icon={<BookOpen className="h-12 w-12" />}
-          title="No files yet"
-          description="Upload knowledge base files for your agent. These files will be available in the agent's working directory."
-          action={
-            <Button onClick={() => fileInputRef.current?.click()}>
-              <Upload className="h-4 w-4 mr-2" />
-              Upload Files
-            </Button>
-          }
-        />
-      ) : (
-        <div className="space-y-2">
-          {files.map((file: any) => {
-            const filePath = typeof file === 'string' ? file : file.path || file.name
-            const isExpanded = expandedFile === filePath
-            return (
-              <Card key={filePath}>
-                <CardContent className="!py-3">
-                  <div className="flex items-center justify-between">
-                    <button
-                      onClick={() => setExpandedFile(isExpanded ? null : filePath)}
-                      className="flex items-center gap-2 min-w-0 flex-1 text-left"
-                    >
-                      {isExpanded ? (
-                        <ChevronDown className="h-4 w-4 text-white/40 flex-shrink-0" />
-                      ) : (
-                        <ChevronRight className="h-4 w-4 text-white/40 flex-shrink-0" />
-                      )}
-                      <FileText className="h-4 w-4 text-indigo-400 flex-shrink-0" />
-                      <span className="text-sm text-white truncate">{filePath}</span>
-                    </button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => handleDelete(filePath)}
-                      disabled={deleting === filePath}
-                      className="text-white/30 hover:text-red-400 flex-shrink-0 ml-2"
-                    >
-                      {deleting === filePath ? (
-                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                      ) : (
-                        <Trash2 className="h-3.5 w-3.5" />
-                      )}
-                    </Button>
-                  </div>
-                  {isExpanded && typeof file === 'object' && file.content && (
-                    <div className="mt-3 pt-3 border-t border-white/5">
-                      <pre className="text-xs text-white/60 bg-black/20 rounded-lg p-3 overflow-x-auto max-h-64 overflow-y-auto whitespace-pre-wrap">
-                        {file.content}
-                      </pre>
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
-            )
-          })}
-        </div>
-      )}
+      <AgentKnowledgeBase client={getClient()} agentName={name} />
     </div>
   )
 }

package/app/agents/page.tsx

@@ -12,10 +12,14 @@ import { ShimmerBlock } from '@/components/ui/shimmer'
 import { formatRelativeTime } from '@/lib/utils'
 import {
   Bot,
+  BookOpen,
   Code2,
   Copy,
+  FlaskConical,
+  GitBranch,
   MoreVertical,
   Plus,
+  Settings,
   Terminal,
   Trash2,
   Upload,
@@ -168,7 +172,36 @@ function AgentCard({
             {showMenu && (
               <>
                 <div className="fixed inset-0" onClick={() => setShowMenu(false)} />
-                <div className="absolute right-0 mt-1 w-40 rounded-lg border border-white/10 bg-[#1c2129] shadow-xl z-10 py-1">
+                <div className="absolute right-0 mt-1 w-44 rounded-lg border border-white/10 bg-[#1c2129] shadow-xl z-10 py-1">
+                  <Link
+                    href={`/agents/config?name=${encodeURIComponent(agent.name)}`}
+                    onClick={() => setShowMenu(false)}
+                    className="flex w-full items-center gap-2 px-3 py-2 text-sm text-white/70 hover:bg-white/5"
+                  >
+                    <Settings className="h-3.5 w-3.5" /> Config
+                  </Link>
+                  <Link
+                    href={`/agents/versions?name=${encodeURIComponent(agent.name)}`}
+                    onClick={() => setShowMenu(false)}
+                    className="flex w-full items-center gap-2 px-3 py-2 text-sm text-white/70 hover:bg-white/5"
+                  >
+                    <GitBranch className="h-3.5 w-3.5" /> Versions
+                  </Link>
+                  <Link
+                    href={`/agents/knowledge?name=${encodeURIComponent(agent.name)}`}
+                    onClick={() => setShowMenu(false)}
+                    className="flex w-full items-center gap-2 px-3 py-2 text-sm text-white/70 hover:bg-white/5"
+                  >
+                    <BookOpen className="h-3.5 w-3.5" /> Knowledge
+                  </Link>
+                  <Link
+                    href={`/agents/evals?name=${encodeURIComponent(agent.name)}`}
+                    onClick={() => setShowMenu(false)}
+                    className="flex w-full items-center gap-2 px-3 py-2 text-sm text-white/70 hover:bg-white/5"
+                  >
+                    <FlaskConical className="h-3.5 w-3.5" /> Evals
+                  </Link>
+                  <div className="my-1 border-t border-white/5" />
                   <button
                     onClick={() => {
                       navigator.clipboard.writeText(agent.name)

package/app/agents/versions/page.tsx

@@ -1,47 +1,21 @@
 'use client'
 
-import { Suspense, useState } from 'react'
+import { Suspense } from 'react'
 import { useSearchParams } from 'next/navigation'
 import Link from 'next/link'
-import { useAgentVersions } from '@/lib/hooks'
+import dynamic from 'next/dynamic'
 import { getClient } from '@/lib/client'
-import { Card, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Badge } from '@/components/ui/badge'
-import { EmptyState } from '@/components/ui/empty-state'
 import { ShimmerBlock } from '@/components/ui/shimmer'
-import { formatRelativeTime } from '@/lib/utils'
-import {
-  ArrowLeft,
-  GitBranch,
-  Plus,
-  CheckCircle2,
-  Loader2,
-  X,
-} from 'lucide-react'
+import { ArrowLeft } from 'lucide-react'
+
+const AgentVersionManager = dynamic(
+  () => import('@ash-ai/ui').then((mod) => ({ default: mod.AgentVersionManager })),
+  { ssr: false, loading: () => <ShimmerBlock height={200} /> }
+)
 
 function VersionsContent() {
   const searchParams = useSearchParams()
   const name = searchParams.get('name')
-  const { versions, loading, refresh } = useAgentVersions(name)
-  const [showCreate, setShowCreate] = useState(false)
-  const [activating, setActivating] = useState<number | null>(null)
-  const [error, setError] = useState<string | null>(null)
-
-  async function handleActivate(versionNumber: number) {
-    if (!name) return
-    setActivating(versionNumber)
-    setError(null)
-    try {
-      await getClient().activateAgentVersion(name, versionNumber)
-      refresh()
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to activate version')
-    } finally {
-      setActivating(null)
-    }
-  }
 
   if (!name) {
     return (
@@ -56,7 +30,6 @@ function VersionsContent() {
 
   return (
     <div className="space-y-6">
-      {/* Back link */}
       <Link
         href={`/agents/detail?name=${encodeURIComponent(name)}`}
         className="inline-flex items-center gap-1.5 text-sm text-white/50 hover:text-white transition-colors"
@@ -65,208 +38,14 @@ function VersionsContent() {
         Back to {name}
       </Link>
 
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-white">Versions</h1>
-          <p className="mt-1 text-sm text-white/50">
-            Manage versions for <span className="text-white/70">{name}</span>
-          </p>
-        </div>
-        <Button onClick={() => setShowCreate(true)}>
-          <Plus className="h-4 w-4 mr-2" />
-          Create Version
-        </Button>
+      <div>
+        <h1 className="text-2xl font-bold text-white">Versions</h1>
+        <p className="mt-1 text-sm text-white/50">
+          Manage versions for <span className="text-white/70">{name}</span>
+        </p>
       </div>
 
-      {error && (
-        <div className="text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg px-4 py-2">
-          {error}
-        </div>
-      )}
-
-      {loading ? (
-        <div className="space-y-3">
-          {[1, 2, 3].map((i) => (
-            <ShimmerBlock key={i} height={80} />
-          ))}
-        </div>
-      ) : versions.length === 0 ? (
-        <EmptyState
-          icon={<GitBranch className="h-12 w-12" />}
-          title="No versions yet"
-          description="Create your first version to snapshot the agent's configuration."
-          action={
-            <Button onClick={() => setShowCreate(true)}>
-              <Plus className="h-4 w-4 mr-2" />
-              Create Version
-            </Button>
-          }
-        />
-      ) : (
-        <div className="space-y-3">
-          {versions.map((version) => (
-            <Card key={version.id}>
-              <CardContent>
-                <div className="flex items-center justify-between">
-                  <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-2">
-                      <h3 className="text-sm font-semibold text-white">
-                        v{version.versionNumber}
-                      </h3>
-                      {version.name && (
-                        <span className="text-sm text-white/50">{version.name}</span>
-                      )}
-                      {version.isActive && (
-                        <Badge variant="success">
-                          <CheckCircle2 className="h-3 w-3 mr-1" />
-                          Active
-                        </Badge>
-                      )}
-                    </div>
-                    {version.releaseNotes && (
-                      <p className="text-xs text-white/40 mt-1">{version.releaseNotes}</p>
-                    )}
-                    <div className="flex items-center gap-3 mt-2">
-                      <span className="text-xs text-white/30">
-                        {formatRelativeTime(version.createdAt)}
-                      </span>
-                      {version.systemPrompt && (
-                        <span className="text-xs text-white/30">Has system prompt</span>
-                      )}
-                      {version.knowledgeFiles && version.knowledgeFiles.length > 0 && (
-                        <span className="text-xs text-white/30">
-                          {version.knowledgeFiles.length} knowledge file{version.knowledgeFiles.length !== 1 ? 's' : ''}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                  {!version.isActive && (
-                    <Button
-                      variant="secondary"
-                      size="sm"
-                      onClick={() => handleActivate(version.versionNumber)}
-                      disabled={activating === version.versionNumber}
-                    >
-                      {activating === version.versionNumber ? (
-                        <Loader2 className="h-3 w-3 animate-spin mr-1" />
-                      ) : (
-                        <CheckCircle2 className="h-3 w-3 mr-1" />
-                      )}
-                      Activate
-                    </Button>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      )}
-
-      {/* Create Version Modal */}
-      {showCreate && (
-        <CreateVersionModal
-          agentName={name}
-          onClose={() => setShowCreate(false)}
-          onCreated={() => {
-            setShowCreate(false)
-            refresh()
-          }}
-        />
-      )}
-    </div>
-  )
-}
-
-// ─── Create Version Modal ───
-
-function CreateVersionModal({
-  agentName,
-  onClose,
-  onCreated,
-}: {
-  agentName: string
-  onClose: () => void
-  onCreated: () => void
-}) {
-  const [versionName, setVersionName] = useState('')
-  const [systemPrompt, setSystemPrompt] = useState('')
-  const [releaseNotes, setReleaseNotes] = useState('')
-  const [creating, setCreating] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  async function handleCreate() {
-    setCreating(true)
-    setError(null)
-    try {
-      await getClient().createAgentVersion(agentName, {
-        name: versionName || undefined,
-        systemPrompt: systemPrompt || undefined,
-        releaseNotes: releaseNotes || undefined,
-      })
-      onCreated()
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to create version')
-    } finally {
-      setCreating(false)
-    }
-  }
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-      <Card className="w-full max-w-lg max-h-[90vh] overflow-auto">
-        <CardContent>
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-lg font-semibold text-white">Create Version</h2>
-            <button onClick={onClose} className="text-white/40 hover:text-white">
-              <X className="h-5 w-5" />
-            </button>
-          </div>
-
-          <div className="space-y-4">
-            <Input
-              label="Version Name (optional)"
-              placeholder="e.g. v2 - improved grounding"
-              value={versionName}
-              onChange={(e) => setVersionName(e.target.value)}
-            />
-            <div className="space-y-1.5">
-              <label className="block text-sm font-medium text-white/70">
-                System Prompt (optional)
-              </label>
-              <textarea
-                value={systemPrompt}
-                onChange={(e) => setSystemPrompt(e.target.value)}
-                rows={4}
-                placeholder="System prompt for this version..."
-                className="flex w-full rounded-xl border px-3 py-2 text-sm bg-white/5 border-white/10 text-white placeholder:text-white/40 focus-visible:outline-none focus-visible:border-indigo-500/50 resize-none"
-              />
-            </div>
-            <div className="space-y-1.5">
-              <label className="block text-sm font-medium text-white/70">
-                Release Notes (optional)
-              </label>
-              <textarea
-                value={releaseNotes}
-                onChange={(e) => setReleaseNotes(e.target.value)}
-                rows={2}
-                placeholder="What changed in this version..."
-                className="flex w-full rounded-xl border px-3 py-2 text-sm bg-white/5 border-white/10 text-white placeholder:text-white/40 focus-visible:outline-none focus-visible:border-indigo-500/50 resize-none"
-              />
-            </div>
-
-            {error && <p className="text-sm text-red-400">{error}</p>}
-
-            <div className="flex justify-end gap-3 pt-2">
-              <Button variant="ghost" onClick={onClose}>
-                Cancel
-              </Button>
-              <Button onClick={handleCreate} disabled={creating}>
-                {creating ? 'Creating...' : 'Create Version'}
-              </Button>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      <AgentVersionManager client={getClient()} agentName={name} />
     </div>
   )
 }

package/app/sessions/page.tsx

@@ -21,6 +21,7 @@ import {
   MessageSquare,
   Pause,
   Play,
+  Plug,
   Square,
   Terminal,
 } from 'lucide-react'
@@ -244,6 +245,7 @@ function SessionDetail({ session }: { session: Session }) {
               {formatRelativeTime(session.createdAt)}
             </span>
             {session.model && <Badge variant="info">{session.model}</Badge>}
+            <McpStatusBadge events={events} config={session.config} />
           </div>
         </div>
         <div className="flex items-center gap-2">
@@ -478,6 +480,7 @@ function EventsTab({ events }: { events: SessionEvent[] }) {
     error: 'text-red-400',
     turn_complete: 'text-green-400',
     lifecycle: 'text-zinc-400',
+    mcp_status: 'text-cyan-400',
   }
 
   return (
@@ -505,7 +508,11 @@ function EventRow({
       typeof event.data === 'string' ? JSON.parse(event.data) : event.data
     if (data && typeof data === 'object') {
       const d = data as Record<string, unknown>
-      if (typeof d.text === 'string') summary = d.text.slice(0, 100)
+      if (typeof d.action === 'string' && d.action === 'configured' && Array.isArray(d.servers)) {
+        summary = `${d.servers.length} server(s): ${(d.servers as Array<{name?: string}>).map(s => s.name).join(', ')}`
+      } else if (typeof d.action === 'string' && d.action === 'error' && typeof d.error === 'string') {
+        summary = `MCP error: ${d.error.slice(0, 80)}`
+      } else if (typeof d.text === 'string') summary = d.text.slice(0, 100)
       else if (typeof d.name === 'string') summary = d.name
       else if (typeof d.error === 'string') summary = d.error.slice(0, 100)
     }
@@ -539,6 +546,49 @@ function EventRow({
   )
 }
 
+// ─── MCP Status Badge ───
+
+function McpStatusBadge({ events, config }: { events: SessionEvent[]; config?: { mcpServers?: Record<string, unknown> } | null }) {
+  const mcpEvents = events.filter(e => e.type === 'mcp_status')
+  const mcpServers = config?.mcpServers
+
+  // No MCP configured at all
+  if (!mcpServers && mcpEvents.length === 0) return null
+
+  const hasError = mcpEvents.some(e => {
+    try {
+      const d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data
+      return d?.action === 'error'
+    } catch { return false }
+  })
+
+  const serverCount = mcpServers ? Object.keys(mcpServers).length : 0
+  const configuredEvent = mcpEvents.find(e => {
+    try {
+      const d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data
+      return d?.action === 'configured'
+    } catch { return false }
+  })
+  const configuredCount = configuredEvent ? (() => {
+    try {
+      const d = typeof configuredEvent.data === 'string' ? JSON.parse(configuredEvent.data) : configuredEvent.data
+      return d?.servers?.length ?? 0
+    } catch { return 0 }
+  })() : serverCount
+
+  return (
+    <span className={cn(
+      'inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-xs font-medium',
+      hasError
+        ? 'bg-red-500/10 text-red-400 border border-red-500/20'
+        : 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20'
+    )}>
+      <Plug className="h-3 w-3" />
+      {hasError ? `MCP Error` : `MCP: ${configuredCount} server${configuredCount !== 1 ? 's' : ''}`}
+    </span>
+  )
+}
+
 // ─── Terminal Tab ───
 
 function TerminalTab({ logs }: { logs: string[] }) {