npm - @ash-ai/dashboard - Versions diffs - 0.0.1 - Mend

@ash-ai/dashboard 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/LICENSE +21 -0
package/app/agents/page.tsx +408 -0
package/app/analytics/page.tsx +226 -0
package/app/globals.css +33 -0
package/app/layout.tsx +38 -0
package/app/logs/page.tsx +233 -0
package/app/page.tsx +140 -0
package/app/playground/page.tsx +44 -0
package/app/queue/page.tsx +295 -0
package/app/sessions/page.tsx +529 -0
package/app/settings/api-keys/page.tsx +222 -0
package/app/settings/credentials/page.tsx +250 -0
package/components/nav.tsx +151 -0
package/components/providers.tsx +18 -0
package/components/ui/badge.tsx +43 -0
package/components/ui/button.tsx +44 -0
package/components/ui/card.tsx +43 -0
package/components/ui/empty-state.tsx +20 -0
package/components/ui/input.tsx +36 -0
package/components/ui/select.tsx +50 -0
package/components/ui/shimmer.tsx +53 -0
package/lib/client.ts +41 -0
package/lib/exports.ts +55 -0
package/lib/hooks.ts +169 -0
package/lib/utils.ts +44 -0
package/next.config.ts +28 -0
package/out/404/index.html +1 -0
package/out/404.html +1 -0
package/out/_next/static/J9asKIV7Gq221ygeAP958/_buildManifest.js +1 -0
package/out/_next/static/J9asKIV7Gq221ygeAP958/_ssgManifest.js +1 -0
package/out/_next/static/chunks/322-bab4df5c5188e993.js +1 -0
package/out/_next/static/chunks/432-11ec8af7ccfbd019.js +1 -0
package/out/_next/static/chunks/447.6d3368efa2d996b0.js +1 -0
package/out/_next/static/chunks/513-c4683887323154aa.js +1 -0
package/out/_next/static/chunks/522-cf174cf1bbbe9557.js +1 -0
package/out/_next/static/chunks/53-b012ce05184a4754.js +1 -0
package/out/_next/static/chunks/929-6faf1adeb65ee383.js +1 -0
package/out/_next/static/chunks/app/_not-found/page-04f9d3958a76bc38.js +1 -0
package/out/_next/static/chunks/app/agents/page-8d68e3019b4d7077.js +1 -0
package/out/_next/static/chunks/app/analytics/page-6b725a46e9c48019.js +1 -0
package/out/_next/static/chunks/app/layout-9cae773a790a15b2.js +1 -0
package/out/_next/static/chunks/app/logs/page-2efd945345a44a0e.js +1 -0
package/out/_next/static/chunks/app/page-06f62e11f9cd82d5.js +1 -0
package/out/_next/static/chunks/app/playground/page-10d3461f118bfb21.js +1 -0
package/out/_next/static/chunks/app/queue/page-38e79b84cbd59335.js +1 -0
package/out/_next/static/chunks/app/sessions/page-2a67c9eddfac029e.js +1 -0
package/out/_next/static/chunks/app/settings/api-keys/page-619682cf8a1c26eb.js +1 -0
package/out/_next/static/chunks/app/settings/credentials/page-106d0ba4f12afe81.js +1 -0
package/out/_next/static/chunks/b59f762a-cea625f74e98e0aa.js +1 -0
package/out/_next/static/chunks/framework-5a02266cf144994c.js +1 -0
package/out/_next/static/chunks/main-994a6af9cdcd7fb9.js +1 -0
package/out/_next/static/chunks/main-app-5bcd4dcc44c4ae09.js +1 -0
package/out/_next/static/chunks/pages/_app-9fd734050704698a.js +1 -0
package/out/_next/static/chunks/pages/_error-310ed5880fd5d5e6.js +1 -0
package/out/_next/static/chunks/polyfills-42372ed130431b0a.js +1 -0
package/out/_next/static/chunks/webpack-a50a78a04aed446d.js +1 -0
package/out/_next/static/css/4b2beada31dbc623.css +1 -0
package/out/agents/index.html +1 -0
package/out/agents/index.txt +22 -0
package/out/analytics/index.html +1 -0
package/out/analytics/index.txt +22 -0
package/out/index.html +1 -0
package/out/index.txt +22 -0
package/out/logs/index.html +1 -0
package/out/logs/index.txt +22 -0
package/out/playground/index.html +1 -0
package/out/playground/index.txt +22 -0
package/out/queue/index.html +1 -0
package/out/queue/index.txt +22 -0
package/out/sessions/index.html +1 -0
package/out/sessions/index.txt +22 -0
package/out/settings/api-keys/index.html +1 -0
package/out/settings/api-keys/index.txt +22 -0
package/out/settings/credentials/index.html +1 -0
package/out/settings/credentials/index.txt +22 -0
package/package.json +40 -0
package/postcss.config.mjs +7 -0
package/tsconfig.json +27 -0

package/app/layout.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+import type { Metadata } from 'next'
+import Script from 'next/script'
+import './globals.css'
+import { DashboardNav } from '@/components/nav'
+import { AshProvider } from '@/components/providers'
+export const metadata: Metadata = {
+  title: 'Ash Dashboard',
+  description: 'Manage agents, sessions, and monitor your Ash server',
+}
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        {/* Injects window.__ASH_CONFIG__ with API key + server version.
+            beforeInteractive ensures it loads before React hydration. */}
+        <Script src="/dashboard/config.js" strategy="beforeInteractive" />
+      </head>
+      <body className="bg-[#0d1117] text-zinc-100 antialiased">
+        <AshProvider>
+          <div className="flex min-h-screen">
+            <DashboardNav />
+            <main className="min-w-0 flex-1 pl-64 overflow-y-auto overflow-x-hidden">
+              <div className="mx-auto max-w-[1600px] px-6 pb-6 pt-8 sm:px-8 sm:pb-8 sm:pt-10">
+                {children}
+              </div>
+            </main>
+          </div>
+        </AshProvider>
+      </body>
+    </html>
+  )
+}

package/app/logs/page.tsx ADDED Viewed

@@ -0,0 +1,233 @@
+'use client'
+import { useState, useCallback } from 'react'
+import { useAgents, useSessions } from '@/lib/hooks'
+import { getClient } from '@/lib/client'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge, StatusBadge } from '@/components/ui/badge'
+import { Select } from '@/components/ui/select'
+import { Input } from '@/components/ui/input'
+import { ShimmerBlock } from '@/components/ui/shimmer'
+import { cn, formatRelativeTime, truncateId } from '@/lib/utils'
+import { ChevronDown, ChevronRight, Download, RefreshCw, Search } from 'lucide-react'
+import type { Session, SessionEvent } from '@ash-ai/shared'
+export default function LogsPage() {
+  const { agents } = useAgents()
+  const [agentFilter, setAgentFilter] = useState('')
+  const [statusFilter, setStatusFilter] = useState('')
+  const [search, setSearch] = useState('')
+  const [autoRefresh, setAutoRefresh] = useState(true)
+  const { sessions, loading, refetch } = useSessions({
+    agent: agentFilter || undefined,
+    autoRefresh,
+  })
+  const filtered = sessions.filter((s) => {
+    if (statusFilter && s.status !== statusFilter) return false
+    if (search) {
+      const q = search.toLowerCase()
+      return (
+        s.id.toLowerCase().includes(q) ||
+        s.agentName.toLowerCase().includes(q) ||
+        s.status.toLowerCase().includes(q)
+      )
+    }
+    return true
+  })
+  function exportCSV() {
+    const rows = [
+      ['Session ID', 'Agent', 'Status', 'Created'].join(','),
+      ...filtered.map((s) =>
+        [s.id, s.agentName, s.status, s.createdAt].join(',')
+      ),
+    ]
+    const blob = new Blob([rows.join('\n')], { type: 'text/csv' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'sessions.csv'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+  function exportJSON() {
+    const blob = new Blob([JSON.stringify(filtered, null, 2)], {
+      type: 'application/json',
+    })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'sessions.json'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-white">Logs</h1>
+          <p className="mt-1 text-sm text-white/50">
+            Session activity and event explorer
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="sm" onClick={exportCSV}>
+            <Download className="h-4 w-4 mr-1" /> CSV
+          </Button>
+          <Button variant="ghost" size="sm" onClick={exportJSON}>
+            <Download className="h-4 w-4 mr-1" /> JSON
+          </Button>
+          <Button
+            variant={autoRefresh ? 'secondary' : 'ghost'}
+            size="sm"
+            onClick={() => setAutoRefresh(!autoRefresh)}
+          >
+            <RefreshCw className={cn('h-4 w-4', autoRefresh && 'animate-spin')} />
+          </Button>
+        </div>
+      </div>
+      {/* Filters */}
+      <div className="flex gap-3">
+        <div className="flex-1 relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-white/30" />
+          <input
+            type="text"
+            placeholder="Search sessions..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full h-9 pl-9 pr-3 rounded-xl border bg-white/5 border-white/10 text-sm text-white placeholder:text-white/40 focus-visible:outline-none focus-visible:border-indigo-500/50"
+          />
+        </div>
+        <Select
+          options={[
+            { value: '', label: 'All Agents' },
+            ...agents.map((a) => ({ value: a.name, label: a.name })),
+          ]}
+          value={agentFilter}
+          onChange={(e) => setAgentFilter(e.target.value)}
+          className="w-40 h-9 text-xs"
+        />
+        <Select
+          options={[
+            { value: '', label: 'All Statuses' },
+            { value: 'active', label: 'Active' },
+            { value: 'paused', label: 'Paused' },
+            { value: 'ended', label: 'Ended' },
+            { value: 'error', label: 'Error' },
+          ]}
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value)}
+          className="w-36 h-9 text-xs"
+        />
+      </div>
+      {/* Table */}
+      <Card>
+        <CardContent className="p-0">
+          {loading ? (
+            <div className="p-4 space-y-2">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <ShimmerBlock key={i} height={40} />
+              ))}
+            </div>
+          ) : filtered.length === 0 ? (
+            <p className="text-sm text-white/40 text-center py-12">
+              No sessions found
+            </p>
+          ) : (
+            <div className="divide-y divide-white/5">
+              {filtered.map((session) => (
+                <SessionRow key={session.id} session={session} />
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+function SessionRow({ session }: { session: Session }) {
+  const [expanded, setExpanded] = useState(false)
+  const [events, setEvents] = useState<SessionEvent[]>([])
+  const [loadingEvents, setLoadingEvents] = useState(false)
+  async function toggleExpand() {
+    if (!expanded && events.length === 0) {
+      setLoadingEvents(true)
+      try {
+        const result = await getClient().listSessionEvents(session.id, { limit: 50 })
+        setEvents(result)
+      } catch {
+        // ignore
+      } finally {
+        setLoadingEvents(false)
+      }
+    }
+    setExpanded(!expanded)
+  }
+  return (
+    <div>
+      <button
+        onClick={toggleExpand}
+        aria-expanded={expanded}
+        className="flex items-center gap-4 w-full px-4 py-3 text-sm hover:bg-white/[0.02] transition-colors"
+      >
+        {expanded ? (
+          <ChevronDown className="h-4 w-4 text-white/30 shrink-0" />
+        ) : (
+          <ChevronRight className="h-4 w-4 text-white/30 shrink-0" />
+        )}
+        <span className="text-xs text-white/30 w-24">
+          {formatRelativeTime(session.createdAt)}
+        </span>
+        <span className="text-xs font-mono text-white/50 w-20">
+          {truncateId(session.id)}
+        </span>
+        <span className="text-sm text-white/70 flex-1 text-left truncate">
+          {session.agentName}
+        </span>
+        <StatusBadge status={session.status} />
+      </button>
+      {expanded && (
+        <div className="pl-12 pr-4 pb-4">
+          {loadingEvents ? (
+            <div className="space-y-1">
+              {[1, 2, 3].map((i) => (
+                <ShimmerBlock key={i} height={24} />
+              ))}
+            </div>
+          ) : events.length === 0 ? (
+            <p className="text-xs text-white/30 py-2">No events</p>
+          ) : (
+            <div className="space-y-0.5 max-h-64 overflow-auto scrollbar-thin">
+              {events.map((e, i) => {
+                let summary = ''
+                try {
+                  const data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data
+                  summary = data?.text?.slice(0, 80) || data?.name || data?.error?.slice(0, 80) || ''
+                } catch {
+                  // ignore
+                }
+                return (
+                  <div key={e.id || i} className="flex items-center gap-3 text-xs py-1">
+                    <span className="text-white/20 font-mono w-6">#{e.sequence}</span>
+                    <Badge>{e.type}</Badge>
+                    <span className="text-white/40 truncate">{summary}</span>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/app/page.tsx ADDED Viewed

@@ -0,0 +1,140 @@
+'use client'
+import { useAgents } from '@/lib/hooks'
+import { useSessions } from '@/lib/hooks'
+import { useHealth } from '@/lib/hooks'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { StatusBadge } from '@/components/ui/badge'
+import { ShimmerBlock } from '@/components/ui/shimmer'
+import { formatRelativeTime } from '@/lib/utils'
+import { Activity, Bot, Cpu, Zap } from 'lucide-react'
+import Link from 'next/link'
+export default function DashboardHome() {
+  const { agents, loading: agentsLoading } = useAgents()
+  const { sessions, loading: sessionsLoading } = useSessions({ limit: 5 })
+  const { health } = useHealth()
+  const activeSessions = sessions.filter((s) => s.status === 'active')
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-2xl font-bold text-white">Dashboard</h1>
+        <p className="mt-1 text-sm text-white/50">
+          Overview of your Ash server
+        </p>
+      </div>
+      {/* Stat cards */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          icon={<Bot className="h-5 w-5" />}
+          label="Agents"
+          value={agentsLoading ? '-' : agents.length.toString()}
+          href="/agents"
+        />
+        <StatCard
+          icon={<Activity className="h-5 w-5" />}
+          label="Active Sessions"
+          value={sessionsLoading ? '-' : activeSessions.length.toString()}
+          href="/sessions"
+        />
+        <StatCard
+          icon={<Zap className="h-5 w-5" />}
+          label="Total Sessions"
+          value={sessionsLoading ? '-' : sessions.length.toString()}
+          href="/sessions"
+        />
+        <StatCard
+          icon={<Cpu className="h-5 w-5" />}
+          label="Sandboxes"
+          value={health?.activeSandboxes?.toString() ?? '-'}
+        />
+      </div>
+      {/* Recent Sessions */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle>Recent Sessions</CardTitle>
+            <Link
+              href="/sessions"
+              className="text-sm text-indigo-400 hover:text-indigo-300 transition-colors"
+            >
+              View all
+            </Link>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {sessionsLoading ? (
+            <div className="space-y-3">
+              {[1, 2, 3].map((i) => (
+                <ShimmerBlock key={i} height={48} />
+              ))}
+            </div>
+          ) : sessions.length === 0 ? (
+            <p className="text-sm text-white/40 py-8 text-center">
+              No sessions yet. Create an agent and start a session in the Playground.
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {sessions.slice(0, 5).map((session) => (
+                <Link
+                  key={session.id}
+                  href={`/sessions?id=${session.id}`}
+                  className="flex items-center justify-between rounded-lg border border-white/5 bg-white/[0.02] px-4 py-3 hover:bg-white/5 transition-colors"
+                >
+                  <div className="flex items-center gap-3 min-w-0">
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium text-white truncate">
+                        {session.agentName}
+                      </p>
+                      <p className="text-xs text-white/40 font-mono">
+                        {session.id.slice(0, 8)}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <StatusBadge status={session.status} />
+                    <span className="text-xs text-white/30">
+                      {formatRelativeTime(session.createdAt)}
+                    </span>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+function StatCard({
+  icon,
+  label,
+  value,
+  href,
+}: {
+  icon: React.ReactNode
+  label: string
+  value: string
+  href?: string
+}) {
+  const content = (
+    <Card className={href ? 'hover:border-white/20 cursor-pointer' : ''}>
+      <CardContent>
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-white/50">{label}</p>
+            <p className="text-2xl font-bold text-white mt-1">{value}</p>
+          </div>
+          <div className="text-white/20">{icon}</div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+  if (href) return <Link href={href}>{content}</Link>
+  return content
+}

package/app/playground/page.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+'use client'
+import { Suspense } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { getClient } from '@/lib/client'
+// Dynamic import to avoid SSR issues with @ash-ai/ui
+import dynamic from 'next/dynamic'
+const Playground = dynamic(
+  () => import('@ash-ai/ui').then((mod) => ({ default: mod.Playground })),
+  { ssr: false, loading: () => <PlaygroundSkeleton /> }
+)
+function PlaygroundSkeleton() {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <div className="text-sm text-white/40">Loading playground...</div>
+    </div>
+  )
+}
+function PlaygroundInner() {
+  const searchParams = useSearchParams()
+  const initialAgent = searchParams.get('agent') || undefined
+  const client = getClient()
+  return (
+    <div className="h-[calc(100vh-5rem)]">
+      <Playground
+        client={client}
+        {...(initialAgent ? { initialAgent } : {})}
+      />
+    </div>
+  )
+}
+export default function PlaygroundPage() {
+  return (
+    <Suspense fallback={<PlaygroundSkeleton />}>
+      <PlaygroundInner />
+    </Suspense>
+  )
+}