@supaku/agentfactory-dashboard 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Supaku
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@supaku/agentfactory-dashboard",
+  "version": "0.5.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Premium dashboard UI components for AgentFactory",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles": "./src/styles/globals.css",
+    "./tailwind-preset": "./tailwind.config.ts"
+  },
+  "files": [
+    "src",
+    "tailwind.config.ts",
+    "components.json"
+  ],
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.400.0",
+    "swr": "^2.2.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "peerDependencies": {
+    "next": ">=14.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "tailwindcss": ">=3.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "typescript": "^5"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/components/fleet/agent-card.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { Card } from '../../components/ui/card'
+import { Badge } from '../../components/ui/badge'
+import { StatusDot } from './status-dot'
+import { ProviderIcon } from './provider-icon'
+import { formatDuration, formatCost } from '../../lib/format'
+import { getWorkTypeConfig } from '../../lib/work-type-config'
+import { getStatusConfig } from '../../lib/status-config'
+import type { PublicSessionResponse } from '../../types/api'
+
+interface AgentCardProps {
+  session: PublicSessionResponse
+  className?: string
+}
+
+export function AgentCard({ session, className }: AgentCardProps) {
+  const statusConfig = getStatusConfig(session.status)
+  const workTypeConfig = getWorkTypeConfig(session.workType)
+
+  return (
+    <Card
+      className={cn(
+        'relative p-4 transition-colors hover:border-af-surface-border/80',
+        className
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-2">
+          <StatusDot status={session.status} showHeartbeat={session.status === 'working'} />
+          <span className="text-sm font-medium text-af-text-primary font-mono">
+            {session.identifier}
+          </span>
+        </div>
+        <ProviderIcon size={14} />
+      </div>
+
+      <div className="mt-3 flex items-center gap-2">
+        <Badge
+          variant="outline"
+          className={cn('text-xs', workTypeConfig.bgColor, workTypeConfig.color, 'border-transparent')}
+        >
+          {workTypeConfig.label}
+        </Badge>
+        <Badge
+          variant="outline"
+          className={cn('text-xs', statusConfig.bgColor, statusConfig.textColor, 'border-transparent')}
+        >
+          {statusConfig.label}
+        </Badge>
+      </div>
+
+      <div className="mt-3 flex items-center justify-between text-xs text-af-text-secondary">
+        <span className="tabular-nums">{formatDuration(session.duration)}</span>
+        {session.costUsd != null && (
+          <span className="tabular-nums font-mono">{formatCost(session.costUsd)}</span>
+        )}
+      </div>
+    </Card>
+  )
+}

package/src/components/fleet/fleet-overview.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { useStats } from '../../hooks/use-stats'
+import { useSessions } from '../../hooks/use-sessions'
+import { StatCard } from './stat-card'
+import { AgentCard } from './agent-card'
+import { EmptyState } from '../../components/shared/empty-state'
+import { Skeleton } from '../../components/ui/skeleton'
+import { formatCost } from '../../lib/format'
+import { Users, Cpu, ListTodo, CheckCircle2, Gauge, DollarSign } from 'lucide-react'
+
+interface FleetOverviewProps {
+  className?: string
+}
+
+export function FleetOverview({ className }: FleetOverviewProps) {
+  const { data: stats, isLoading: statsLoading } = useStats()
+  const { data: sessionsData, isLoading: sessionsLoading } = useSessions()
+
+  const sessions = sessionsData?.sessions ?? []
+
+  return (
+    <div className={cn('space-y-6 p-5', className)}>
+      {/* Stats grid */}
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+        <StatCard
+          label="Workers Online"
+          value={stats?.workersOnline ?? 0}
+          icon={<Users className="h-3.5 w-3.5" />}
+          loading={statsLoading}
+        />
+        <StatCard
+          label="Agents Working"
+          value={stats?.agentsWorking ?? 0}
+          icon={<Cpu className="h-3.5 w-3.5" />}
+          loading={statsLoading}
+        />
+        <StatCard
+          label="Queue Depth"
+          value={stats?.queueDepth ?? 0}
+          icon={<ListTodo className="h-3.5 w-3.5" />}
+          loading={statsLoading}
+        />
+        <StatCard
+          label="Completed Today"
+          value={stats?.completedToday ?? 0}
+          icon={<CheckCircle2 className="h-3.5 w-3.5" />}
+          loading={statsLoading}
+        />
+        <StatCard
+          label="Capacity"
+          value={stats?.availableCapacity ?? 0}
+          icon={<Gauge className="h-3.5 w-3.5" />}
+          loading={statsLoading}
+        />
+        <StatCard
+          label="Cost Today"
+          value={formatCost(stats?.totalCostToday)}
+          icon={<DollarSign className="h-3.5 w-3.5" />}
+          loading={statsLoading}
+        />
+      </div>
+
+      {/* Agent cards */}
+      <div>
+        <h2 className="mb-3 text-sm font-medium text-af-text-secondary">Active Sessions</h2>
+        {sessionsLoading ? (
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Skeleton key={i} className="h-32 rounded-lg" />
+            ))}
+          </div>
+        ) : sessions.length === 0 ? (
+          <EmptyState
+            title="No active sessions"
+            description="Sessions will appear here when agents start working."
+          />
+        ) : (
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {sessions.map((session) => (
+              <AgentCard key={session.id} session={session} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/fleet/provider-icon.tsx

@@ -0,0 +1,61 @@
+import { cn } from '../../lib/utils'
+
+interface ProviderIconProps {
+  provider?: string
+  className?: string
+  size?: number
+}
+
+export function ProviderIcon({ provider = 'claude', className, size = 16 }: ProviderIconProps) {
+  const name = provider.toLowerCase()
+
+  if (name === 'codex' || name === 'openai') {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        className={cn('text-emerald-400', className)}
+      >
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+
+  if (name === 'amp') {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        className={cn('text-yellow-400', className)}
+      >
+        <path d="M11 21h-1l1-7H7.5c-.88 0-.33-.75-.31-.78C8.48 10.94 10.42 7.54 13.01 3h1l-1 7h3.51c.4 0 .62.19.4.66C12.97 17.55 11 21 11 21z" fill="currentColor" />
+      </svg>
+    )
+  }
+
+  // Default: Claude
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={cn('text-af-accent', className)}
+    >
+      <path
+        d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

package/src/components/fleet/stat-card.tsx

@@ -0,0 +1,43 @@
+import { cn } from '../../lib/utils'
+import { Card } from '../../components/ui/card'
+import { Skeleton } from '../../components/ui/skeleton'
+
+interface StatCardProps {
+  label: string
+  value: string | number
+  detail?: string
+  icon?: React.ReactNode
+  trend?: 'up' | 'down' | 'neutral'
+  loading?: boolean
+  className?: string
+}
+
+export function StatCard({ label, value, detail, icon, loading, className }: StatCardProps) {
+  if (loading) {
+    return (
+      <Card className={cn('p-4', className)}>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-4 w-4 rounded" />
+        </div>
+        <Skeleton className="mt-2 h-7 w-12" />
+        <Skeleton className="mt-1 h-3 w-20" />
+      </Card>
+    )
+  }
+
+  return (
+    <Card className={cn('p-4', className)}>
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium text-af-text-secondary">{label}</span>
+        {icon && <span className="text-af-text-secondary">{icon}</span>}
+      </div>
+      <div className="mt-1.5 text-2xl font-bold tabular-nums text-af-text-primary">
+        {value}
+      </div>
+      {detail && (
+        <p className="mt-0.5 text-xs text-af-text-secondary">{detail}</p>
+      )}
+    </Card>
+  )
+}

package/src/components/fleet/status-dot.tsx

@@ -0,0 +1,32 @@
+import { cn } from '../../lib/utils'
+import { getStatusConfig, type SessionStatus } from '../../lib/status-config'
+
+interface StatusDotProps {
+  status: SessionStatus
+  className?: string
+  showHeartbeat?: boolean
+}
+
+export function StatusDot({ status, className, showHeartbeat = false }: StatusDotProps) {
+  const config = getStatusConfig(status)
+
+  return (
+    <span className={cn('relative inline-flex h-2.5 w-2.5', className)}>
+      {config.animate && showHeartbeat && (
+        <span
+          className={cn(
+            'absolute inset-0 rounded-full animate-heartbeat',
+            config.dotColor
+          )}
+        />
+      )}
+      <span
+        className={cn(
+          'relative inline-flex h-2.5 w-2.5 rounded-full',
+          config.dotColor,
+          config.animate && 'animate-pulse-dot'
+        )}
+      />
+    </span>
+  )
+}

package/src/components/layout/bottom-bar.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { useStats } from '../../hooks/use-stats'
+import { formatCost } from '../../lib/format'
+
+interface BottomBarProps {
+  className?: string
+}
+
+export function BottomBar({ className }: BottomBarProps) {
+  const { data } = useStats()
+
+  return (
+    <footer
+      className={cn(
+        'flex h-8 items-center justify-between border-t border-af-surface-border bg-af-bg-secondary px-5',
+        className
+      )}
+    >
+      <div className="flex items-center gap-4 text-xs text-af-text-secondary">
+        <span>
+          Completed today:{' '}
+          <span className="font-medium text-af-text-primary">{data?.completedToday ?? 0}</span>
+        </span>
+        <span>
+          Capacity:{' '}
+          <span className="font-medium text-af-text-primary">{data?.availableCapacity ?? 0}</span>
+        </span>
+        {data?.totalCostToday != null && (
+          <span>
+            Cost today:{' '}
+            <span className="font-medium text-af-text-primary">
+              {formatCost(data.totalCostToday)}
+            </span>
+          </span>
+        )}
+      </div>
+
+      <a
+        href="https://github.com/supaku/agentfactory"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-xs text-af-text-secondary hover:text-af-text-primary transition-colors"
+      >
+        Powered by AgentFactory
+      </a>
+    </footer>
+  )
+}

package/src/components/layout/shell.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { Sidebar } from './sidebar'
+import { TopBar } from './top-bar'
+import { BottomBar } from './bottom-bar'
+import { Sheet, SheetContent, SheetTrigger, SheetTitle } from '../../components/ui/sheet'
+import { Button } from '../../components/ui/button'
+import { TooltipProvider } from '../../components/ui/tooltip'
+import { Menu } from 'lucide-react'
+
+interface DashboardShellProps {
+  children: React.ReactNode
+  currentPath?: string
+  className?: string
+}
+
+export function DashboardShell({ children, currentPath = '/', className }: DashboardShellProps) {
+  return (
+    <TooltipProvider>
+      <div className={cn('flex h-screen bg-af-bg-primary', className)}>
+        {/* Desktop sidebar */}
+        <div className="hidden md:block">
+          <Sidebar currentPath={currentPath} />
+        </div>
+
+        {/* Main content area */}
+        <div className="flex flex-1 flex-col overflow-hidden">
+          {/* Mobile header with hamburger */}
+          <div className="flex items-center gap-2 border-b border-af-surface-border bg-af-bg-secondary px-3 py-2 md:hidden">
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8">
+                  <Menu className="h-4 w-4" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="w-56 p-0">
+                <SheetTitle className="sr-only">Navigation</SheetTitle>
+                <Sidebar currentPath={currentPath} />
+              </SheetContent>
+            </Sheet>
+            <span className="text-sm font-semibold text-af-text-primary">AgentFactory</span>
+          </div>
+
+          <TopBar className="hidden md:flex" />
+
+          <main className="flex-1 overflow-auto">
+            {children}
+          </main>
+
+          <BottomBar />
+        </div>
+      </div>
+    </TooltipProvider>
+  )
+}

package/src/components/layout/sidebar.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { Logo } from '../../components/shared/logo'
+import { Separator } from '../../components/ui/separator'
+import { LayoutDashboard, Columns3, Activity, Settings } from 'lucide-react'
+
+export interface NavItem {
+  label: string
+  href: string
+  icon: React.ReactNode
+}
+
+const defaultNavItems: NavItem[] = [
+  { label: 'Fleet', href: '/', icon: <LayoutDashboard className="h-4 w-4" /> },
+  { label: 'Pipeline', href: '/pipeline', icon: <Columns3 className="h-4 w-4" /> },
+  { label: 'Sessions', href: '/sessions', icon: <Activity className="h-4 w-4" /> },
+  { label: 'Settings', href: '/settings', icon: <Settings className="h-4 w-4" /> },
+]
+
+interface SidebarProps {
+  currentPath?: string
+  navItems?: NavItem[]
+  className?: string
+}
+
+export function Sidebar({ currentPath = '/', navItems = defaultNavItems, className }: SidebarProps) {
+  const isActive = (href: string) => {
+    if (href === '/') return currentPath === '/'
+    return currentPath.startsWith(href)
+  }
+
+  return (
+    <aside
+      className={cn(
+        'flex h-full w-56 flex-col border-r border-af-surface-border bg-af-bg-secondary',
+        className
+      )}
+    >
+      <div className="flex items-center gap-2.5 px-5 py-4">
+        <Logo size={24} />
+        <span className="text-sm font-semibold text-af-text-primary tracking-tight">
+          AgentFactory
+        </span>
+      </div>
+
+      <Separator />
+
+      <nav className="flex-1 space-y-0.5 px-3 py-3">
+        {navItems.map((item) => (
+          <a
+            key={item.href}
+            href={item.href}
+            className={cn(
+              'flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors',
+              isActive(item.href)
+                ? 'bg-af-surface text-af-text-primary'
+                : 'text-af-text-secondary hover:bg-af-surface/50 hover:text-af-text-primary'
+            )}
+          >
+            {item.icon}
+            {item.label}
+          </a>
+        ))}
+      </nav>
+
+      <Separator />
+
+      <div className="px-5 py-3">
+        <a
+          href="https://github.com/supaku/agentfactory"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-xs text-af-text-secondary hover:text-af-text-primary transition-colors"
+        >
+          AgentFactory
+        </a>
+      </div>
+    </aside>
+  )
+}

package/src/components/layout/top-bar.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { StatusDot } from '../../components/fleet/status-dot'
+import { useStats } from '../../hooks/use-stats'
+import { Skeleton } from '../../components/ui/skeleton'
+
+interface TopBarProps {
+  className?: string
+}
+
+export function TopBar({ className }: TopBarProps) {
+  const { data, isLoading } = useStats()
+
+  return (
+    <header
+      className={cn(
+        'flex h-11 items-center justify-between border-b border-af-surface-border bg-af-bg-secondary px-5',
+        className
+      )}
+    >
+      <div className="flex items-center gap-4">
+        {isLoading ? (
+          <>
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-4 w-20" />
+          </>
+        ) : (
+          <>
+            <div className="flex items-center gap-1.5">
+              <StatusDot status={data?.workersOnline ? 'working' : 'stopped'} showHeartbeat />
+              <span className="text-xs text-af-text-secondary">
+                <span className="font-medium text-af-text-primary">{data?.workersOnline ?? 0}</span>{' '}
+                {data?.workersOnline === 1 ? 'worker' : 'workers'} online
+              </span>
+            </div>
+            <div className="text-xs text-af-text-secondary">
+              <span className="font-medium text-af-text-primary">{data?.agentsWorking ?? 0}</span> working
+            </div>
+            <div className="text-xs text-af-text-secondary">
+              <span className="font-medium text-af-text-primary">{data?.queueDepth ?? 0}</span> queued
+            </div>
+          </>
+        )}
+      </div>
+
+      <div className="text-xs text-af-text-secondary">
+        {data?.timestamp && (
+          <span>Updated {new Date(data.timestamp).toLocaleTimeString()}</span>
+        )}
+      </div>
+    </header>
+  )
+}

package/src/components/pipeline/pipeline-card.tsx

@@ -0,0 +1,42 @@
+import { cn } from '../../lib/utils'
+import { StatusDot } from '../../components/fleet/status-dot'
+import { Badge } from '../../components/ui/badge'
+import { formatDuration } from '../../lib/format'
+import { getWorkTypeConfig } from '../../lib/work-type-config'
+import type { PublicSessionResponse } from '../../types/api'
+
+interface PipelineCardProps {
+  session: PublicSessionResponse
+  className?: string
+}
+
+export function PipelineCard({ session, className }: PipelineCardProps) {
+  const workTypeConfig = getWorkTypeConfig(session.workType)
+
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-af-surface-border bg-af-surface p-3 transition-colors hover:border-af-surface-border/80',
+        className
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <StatusDot status={session.status} />
+        <span className="text-xs font-medium text-af-text-primary font-mono truncate">
+          {session.identifier}
+        </span>
+      </div>
+      <div className="mt-2 flex items-center justify-between">
+        <Badge
+          variant="outline"
+          className={cn('text-xs', workTypeConfig.bgColor, workTypeConfig.color, 'border-transparent')}
+        >
+          {workTypeConfig.label}
+        </Badge>
+        <span className="text-xs text-af-text-secondary tabular-nums">
+          {formatDuration(session.duration)}
+        </span>
+      </div>
+    </div>
+  )
+}