@ash-ai/dashboard 0.0.1

package/app/settings/api-keys/page.tsx

@@ -0,0 +1,222 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { getAuthHeaders } from '@/lib/client'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { ShimmerBlock } from '@/components/ui/shimmer'
+import { formatRelativeTime } from '@/lib/utils'
+import { Copy, Key, Plus, Trash2 } from 'lucide-react'
+
+interface ApiKey {
+  id: string
+  label: string
+  keyPrefix?: string
+  createdAt: string
+}
+
+export default function ApiKeysPage() {
+  const [keys, setKeys] = useState<ApiKey[]>([])
+  const [loading, setLoading] = useState(true)
+  const [newKeyName, setNewKeyName] = useState('')
+  const [createdKey, setCreatedKey] = useState<string | null>(null)
+  const [creating, setCreating] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function fetchKeys() {
+    try {
+      const res = await fetch('/api/api-keys', {
+        headers: getAuthHeaders(),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        setKeys(data.keys || data || [])
+      }
+    } catch {
+      // Endpoint may not exist yet
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchKeys()
+  }, [])
+
+  async function handleCreate() {
+    if (!newKeyName.trim()) {
+      setError('Key name is required')
+      return
+    }
+
+    setCreating(true)
+    setError(null)
+
+    try {
+      const res = await fetch('/api/api-keys', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...getAuthHeaders(),
+        },
+        body: JSON.stringify({ label: newKeyName.trim() }),
+      })
+
+      if (!res.ok) throw new Error('Failed to create key')
+
+      const data = await res.json()
+      setCreatedKey(data.key)
+      setNewKeyName('')
+      fetchKeys()
+    } catch (e) {
+      const message = e instanceof Error ? e.message : 'Failed to create key'
+      setError(message)
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  async function handleRevoke(id: string) {
+    try {
+      const res = await fetch(`/api/api-keys/${id}`, {
+        method: 'DELETE',
+        headers: getAuthHeaders(),
+      })
+      if (!res.ok) throw new Error('Failed to revoke key')
+      fetchKeys()
+    } catch (e) {
+      const message = e instanceof Error ? e.message : 'Failed to revoke key'
+      setError(message)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-white">API Keys</h1>
+        <p className="mt-1 text-sm text-white/50">
+          Create API keys to authenticate with the Ash server
+        </p>
+      </div>
+
+      {/* Create key */}
+      <Card>
+        <CardContent>
+          <div className="flex gap-3">
+            <Input
+              placeholder="Key name (e.g. production)"
+              value={newKeyName}
+              onChange={(e) => setNewKeyName(e.target.value)}
+              className="flex-1"
+              onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
+            />
+            <Button onClick={handleCreate} disabled={creating}>
+              <Plus className="h-4 w-4 mr-2" />
+              {creating ? 'Creating...' : 'Create Key'}
+            </Button>
+          </div>
+          {error && <p className="text-sm text-red-400 mt-2">{error}</p>}
+        </CardContent>
+      </Card>
+
+      {/* Newly created key */}
+      {createdKey && (
+        <Card className="border-green-500/30">
+          <CardContent>
+            <div className="flex items-center gap-2 mb-2">
+              <Key className="h-4 w-4 text-green-400" />
+              <p className="text-sm font-medium text-green-400">
+                Key created! Copy it now — it won&apos;t be shown again.
+              </p>
+            </div>
+            <div className="flex items-center gap-2 bg-black/30 rounded-lg px-4 py-3">
+              <code className="flex-1 text-sm text-white font-mono break-all">
+                {createdKey}
+              </code>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  navigator.clipboard.writeText(createdKey)
+                }}
+              >
+                <Copy className="h-4 w-4" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Getting started */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Getting Started</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="rounded-lg bg-black/30 p-4 font-mono text-sm text-white/80 space-y-1">
+            <div className="text-white/40"># Set your API key</div>
+            <div>export ASH_API_KEY=ash_sk_...</div>
+            <div className="text-white/40 mt-3"># Deploy an agent</div>
+            <div>ash deploy ./my-agent --name my-agent</div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Key list */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Active Keys</CardTitle>
+        </CardHeader>
+        <CardContent className="p-0">
+          {loading ? (
+            <div className="p-4 space-y-2">
+              {[1, 2, 3].map((i) => (
+                <ShimmerBlock key={i} height={40} />
+              ))}
+            </div>
+          ) : keys.length === 0 ? (
+            <p className="text-sm text-white/40 text-center py-8">
+              No API keys yet
+            </p>
+          ) : (
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-white/10">
+                  <th className="text-left px-6 py-3 text-xs font-medium text-white/40 uppercase">Name</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-white/40 uppercase">Key</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-white/40 uppercase">Created</th>
+                  <th className="text-right px-6 py-3 text-xs font-medium text-white/40 uppercase">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-white/5">
+                {keys.map((key) => (
+                  <tr key={key.id} className="hover:bg-white/[0.02]">
+                    <td className="px-6 py-3 text-white/80 font-medium">{key.label}</td>
+                    <td className="px-6 py-3 text-white/40 font-mono text-xs">
+                      {key.keyPrefix || '••••••••'}
+                    </td>
+                    <td className="px-6 py-3 text-white/40">
+                      {formatRelativeTime(key.createdAt)}
+                    </td>
+                    <td className="px-6 py-3 text-right">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleRevoke(key.id)}
+                        className="text-red-400 hover:text-red-300"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/app/settings/credentials/page.tsx

@@ -0,0 +1,250 @@
+'use client'
+
+import { useState } from 'react'
+import { useCredentials } from '@/lib/hooks'
+import { getClient } from '@/lib/client'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Select } from '@/components/ui/select'
+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 { Lock, Plus, Trash2, X } from 'lucide-react'
+
+const CREDENTIAL_TYPES = [
+  { value: 'anthropic', label: 'Anthropic' },
+  { value: 'openai', label: 'OpenAI' },
+  { value: 'bedrock', label: 'AWS Bedrock' },
+  { value: 'custom', label: 'Custom' },
+]
+
+export default function CredentialsPage() {
+  const { credentials, loading, refetch } = useCredentials()
+  const [showCreate, setShowCreate] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleDelete(id: string) {
+    setError(null)
+    try {
+      await getClient().deleteCredential(id)
+      refetch()
+    } catch (e) {
+      const message = e instanceof Error ? e.message : 'Failed to delete credential'
+      setError(message)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-white">Credentials</h1>
+          <p className="mt-1 text-sm text-white/50">
+            Store API keys for LLM providers. Encrypted at rest.
+          </p>
+        </div>
+        <Button onClick={() => setShowCreate(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Credential
+        </Button>
+      </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>
+      )}
+
+      <Card>
+        <CardContent className="p-0">
+          {loading ? (
+            <div className="p-4 space-y-2">
+              {[1, 2, 3].map((i) => (
+                <ShimmerBlock key={i} height={48} />
+              ))}
+            </div>
+          ) : credentials.length === 0 ? (
+            <EmptyState
+              icon={<Lock className="h-12 w-12" />}
+              title="No credentials stored"
+              description="Add API keys for LLM providers to use with your agents."
+              action={
+                <Button onClick={() => setShowCreate(true)}>
+                  <Plus className="h-4 w-4 mr-2" />
+                  Add Credential
+                </Button>
+              }
+            />
+          ) : (
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-white/10">
+                  <th className="text-left px-6 py-3 text-xs font-medium text-white/40 uppercase">Provider</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-white/40 uppercase">Label</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-white/40 uppercase">Status</th>
+                  <th className="text-left px-6 py-3 text-xs font-medium text-white/40 uppercase">Last Used</th>
+                  <th className="text-right px-6 py-3 text-xs font-medium text-white/40 uppercase">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-white/5">
+                {credentials.map((cred) => (
+                  <tr key={cred.id} className="hover:bg-white/[0.02]">
+                    <td className="px-6 py-3">
+                      <Badge variant="info">{cred.type}</Badge>
+                    </td>
+                    <td className="px-6 py-3 text-white/80">{cred.label || '-'}</td>
+                    <td className="px-6 py-3">
+                      <Badge variant={cred.active ? 'success' : 'default'}>
+                        {cred.active ? 'Active' : 'Inactive'}
+                      </Badge>
+                    </td>
+                    <td className="px-6 py-3 text-white/40">
+                      {cred.lastUsedAt ? formatRelativeTime(cred.lastUsedAt) : 'Never'}
+                    </td>
+                    <td className="px-6 py-3 text-right">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleDelete(cred.id)}
+                        className="text-red-400 hover:text-red-300"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </CardContent>
+      </Card>
+
+      {showCreate && (
+        <CreateCredentialModal
+          onClose={() => setShowCreate(false)}
+          onCreated={() => {
+            setShowCreate(false)
+            refetch()
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+function CreateCredentialModal({
+  onClose,
+  onCreated,
+}: {
+  onClose: () => void
+  onCreated: () => void
+}) {
+  const [type, setType] = useState('anthropic')
+  const [label, setLabel] = useState('')
+  const [apiKey, setApiKey] = useState('')
+  const [accessKeyId, setAccessKeyId] = useState('')
+  const [secretKey, setSecretKey] = useState('')
+  const [region, setRegion] = useState('us-east-1')
+  const [creating, setCreating] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleCreate() {
+    setCreating(true)
+    setError(null)
+
+    try {
+      const client = getClient()
+      if (type === 'bedrock') {
+        await client.storeBedrockCredential({
+          accessKeyId,
+          secretAccessKey: secretKey,
+          region,
+          label: label || undefined,
+        })
+      } else {
+        await client.storeCredential(type, apiKey, label || undefined)
+      }
+      onCreated()
+    } catch (e) {
+      const message = e instanceof Error ? e.message : 'Failed to store credential'
+      setError(message)
+    } 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-md">
+        <CardContent>
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-lg font-semibold text-white">Add Credential</h2>
+            <button onClick={onClose} className="text-white/40 hover:text-white">
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+
+          <div className="space-y-4">
+            <Select
+              label="Provider"
+              options={CREDENTIAL_TYPES}
+              value={type}
+              onChange={(e) => setType(e.target.value)}
+            />
+
+            <Input
+              label="Label (optional)"
+              placeholder="e.g. production"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+            />
+
+            {type === 'bedrock' ? (
+              <>
+                <Input
+                  label="Access Key ID"
+                  placeholder="AKIA..."
+                  value={accessKeyId}
+                  onChange={(e) => setAccessKeyId(e.target.value)}
+                />
+                <Input
+                  label="Secret Access Key"
+                  type="password"
+                  value={secretKey}
+                  onChange={(e) => setSecretKey(e.target.value)}
+                />
+                <Input
+                  label="Region"
+                  placeholder="us-east-1"
+                  value={region}
+                  onChange={(e) => setRegion(e.target.value)}
+                />
+              </>
+            ) : (
+              <Input
+                label="API Key"
+                type="password"
+                placeholder={type === 'anthropic' ? 'sk-ant-...' : 'sk-...'}
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+              />
+            )}
+
+            {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 ? 'Saving...' : 'Save'}
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/components/nav.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import { useHealth } from '@/lib/hooks'
+import {
+  Activity,
+  Bot,
+  Code2,
+  Key,
+  LayoutDashboard,
+  ListOrdered,
+  Lock,
+  ScrollText,
+  Settings,
+  TrendingUp,
+} from 'lucide-react'
+
+export interface NavItem {
+  href: string
+  label: string
+  icon: React.ComponentType<{ className?: string }>
+  external?: boolean
+}
+
+interface DashboardNavProps {
+  extraItems?: NavItem[]
+  extraBottomLinks?: NavItem[]
+  branding?: string
+}
+
+const navItems: NavItem[] = [
+  { href: '/', label: 'Dashboard', icon: LayoutDashboard },
+  { href: '/playground', label: 'Playground', icon: Code2 },
+  { href: '/agents', label: 'Agents', icon: Bot },
+  { href: '/sessions', label: 'Sessions', icon: Activity },
+  { href: '/logs', label: 'Logs', icon: ScrollText },
+  { href: '/analytics', label: 'Analytics', icon: TrendingUp },
+]
+
+const bottomLinks: NavItem[] = [
+  { href: '/settings/api-keys', label: 'API Keys', icon: Key },
+  { href: '/settings/credentials', label: 'Credentials', icon: Lock },
+  { href: '/queue', label: 'Queue', icon: ListOrdered },
+]
+
+export function DashboardNav({ extraItems, extraBottomLinks, branding }: DashboardNavProps) {
+  const pathname = usePathname()
+  const { health } = useHealth()
+
+  const allItems = extraItems ? [...navItems, ...extraItems] : navItems
+  const allBottomLinks = extraBottomLinks ? [...bottomLinks, ...extraBottomLinks] : bottomLinks
+
+  const isHealthy = health?.status === 'ok'
+
+  return (
+    <nav className="fixed inset-y-0 left-0 z-50 w-64 flex flex-col border-r border-white/10 bg-[#0d1117]">
+      {/* Logo */}
+      <div className="flex h-16 items-center gap-3 px-5 border-b border-white/10">
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-500">
+          <span className="text-sm font-bold text-white">A</span>
+        </div>
+        <div className="min-w-0">
+          <span className="text-white font-bold tracking-tight block">
+            {branding || 'Ash'}
+          </span>
+          <div className="flex items-center gap-1.5 text-white/40 text-xs font-mono">
+            <span
+              className={cn(
+                'w-1.5 h-1.5 rounded-full',
+                isHealthy ? 'bg-green-400 animate-pulse' : 'bg-red-400'
+              )}
+            />
+            {isHealthy ? 'ONLINE' : 'OFFLINE'}
+          </div>
+        </div>
+      </div>
+
+      {/* Main nav */}
+      <div className="flex-1 overflow-auto px-3 py-4 scrollbar-thin">
+        <div className="space-y-0.5">
+          {allItems.map((item) => {
+            const isActive =
+              pathname === item.href ||
+              (item.href !== '/' && pathname.startsWith(item.href))
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200',
+                  isActive
+                    ? 'bg-indigo-500/10 text-indigo-400 border border-indigo-500/30'
+                    : 'text-white/60 hover:text-white hover:bg-white/5 border border-transparent'
+                )}
+              >
+                <item.icon className="h-4 w-4" />
+                {item.label}
+                {isActive && (
+                  <div className="ml-auto w-1.5 h-1.5 rounded-full bg-indigo-400 animate-pulse" />
+                )}
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Bottom links */}
+      <div className="border-t border-white/10 px-3 py-3 space-y-0.5">
+        {allBottomLinks.map((item) => {
+          const isActive = !item.external && pathname.startsWith(item.href)
+          if (item.external) {
+            return (
+              <a
+                key={item.label}
+                href={item.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-white/40 hover:text-white hover:bg-white/5 transition-all duration-200"
+              >
+                <item.icon className="h-4 w-4" />
+                {item.label}
+              </a>
+            )
+          }
+          return (
+            <Link
+              key={item.label}
+              href={item.href}
+              className={cn(
+                'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200',
+                isActive
+                  ? 'text-indigo-400'
+                  : 'text-white/40 hover:text-white hover:bg-white/5'
+              )}
+            >
+              <item.icon className="h-4 w-4" />
+              {item.label}
+            </Link>
+          )
+        })}
+        {health?.version && (
+          <div className="px-3 py-2 text-xs text-white/20 font-mono">
+            v{health.version}
+          </div>
+        )}
+      </div>
+    </nav>
+  )
+}

package/components/providers.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+import type { AshClient } from '@ash-ai/sdk'
+import { getClient } from '@/lib/client'
+
+const AshContext = createContext<AshClient | null>(null)
+
+export function AshProvider({ children }: { children: React.ReactNode }) {
+  const client = getClient()
+  return <AshContext.Provider value={client}>{children}</AshContext.Provider>
+}
+
+export function useAshClient(): AshClient {
+  const client = useContext(AshContext)
+  if (!client) throw new Error('useAshClient must be used within AshProvider')
+  return client
+}

package/components/ui/badge.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@/lib/utils'
+
+export interface BadgeProps {
+  children: React.ReactNode
+  variant?: 'default' | 'success' | 'warning' | 'error' | 'info'
+  className?: string
+}
+
+const variants = {
+  default: 'bg-white/10 text-white/70 border border-white/10',
+  success: 'bg-green-500/20 text-green-400 border border-green-500/30',
+  warning: 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/30',
+  error: 'bg-red-500/20 text-red-400 border border-red-500/30',
+  info: 'bg-blue-500/20 text-blue-400 border border-blue-500/30',
+}
+
+export function Badge({ children, variant = 'default', className }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
+        variants[variant],
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+export function StatusBadge({ status }: { status: string }) {
+  const variant =
+    ({
+      active: 'success',
+      starting: 'info',
+      paused: 'warning',
+      stopped: 'default',
+      ended: 'default',
+      error: 'error',
+    } as Record<string, BadgeProps['variant']>)[status] || 'default'
+
+  return <Badge variant={variant}>{status}</Badge>
+}