@supaku/agentfactory-dashboard 0.5.0 → 0.6.2

package/README.md

@@ -0,0 +1,248 @@
+# @supaku/agentfactory-dashboard
+
+A self-contained React component library for AgentFactory fleet management. Provides a complete dashboard UI with real-time data fetching, a dark design system with orange accent, and four page-level components.
+
+## Installation
+
+```bash
+npm install @supaku/agentfactory-dashboard
+# or
+pnpm add @supaku/agentfactory-dashboard
+```
+
+### Peer Dependencies
+
+- `next` >= 14.0.0
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+- `tailwindcss` >= 3.4.0
+
+## Quick Start
+
+The package distributes TypeScript source — no build step. Add it to `transpilePackages` in your Next.js config:
+
+```typescript
+// next.config.ts
+const nextConfig: NextConfig = {
+  transpilePackages: ['@supaku/agentfactory-dashboard'],
+}
+```
+
+### Tailwind v3
+
+Import the globals CSS and use the tailwind preset:
+
+```css
+/* globals.css */
+@import '@supaku/agentfactory-dashboard/styles';
+```
+
+```typescript
+// tailwind.config.ts
+import dashboardPreset from '@supaku/agentfactory-dashboard/tailwind-preset'
+
+export default {
+  presets: [dashboardPreset],
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/@supaku/agentfactory-dashboard/src/**/*.{ts,tsx}',
+  ],
+}
+```
+
+### Tailwind v4
+
+Skip the preset and globals import. Instead, register the design tokens directly in your `globals.css`:
+
+```css
+@source "../../node_modules/@supaku/agentfactory-dashboard/src";
+
+@theme {
+  /* Dashboard colors */
+  --color-af-bg-primary: #0A0E1A;
+  --color-af-bg-secondary: #111827;
+  --color-af-surface: #1A1F2E;
+  --color-af-surface-border: #2A3040;
+  --color-af-accent: #FF6B35;
+  --color-af-status-success: #22C55E;
+  --color-af-status-warning: #F59E0B;
+  --color-af-status-error: #EF4444;
+  --color-af-text-primary: #F9FAFB;
+  --color-af-text-secondary: #9CA3AF;
+  --color-af-code: #A5B4FC;
+
+  /* Dashboard animations */
+  --animate-pulse-dot: pulse-dot 2s ease-in-out infinite;
+  --animate-heartbeat: heartbeat 2s ease-out infinite;
+
+  @keyframes pulse-dot {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+
+  @keyframes heartbeat {
+    0% { transform: scale(1); opacity: 0.6; }
+    50% { transform: scale(1.8); opacity: 0; }
+    100% { transform: scale(1); opacity: 0; }
+  }
+}
+```
+
+And set the `:root` CSS variables to the dashboard palette:
+
+```css
+:root {
+  --background: 222 47% 7%;
+  --foreground: 210 40% 98%;
+  --primary: 19 100% 60%;       /* orange accent */
+  --card: 222 30% 14%;
+  --muted: 222 20% 22%;
+  --border: 222 20% 22%;
+  --ring: 19 100% 60%;
+  /* ... see full palette in source */
+}
+```
+
+## Pages
+
+Four page components handle complete views with data fetching:
+
+```tsx
+import {
+  DashboardShell,
+  DashboardPage,
+  PipelinePage,
+  SessionPage,
+  SettingsPage,
+} from '@supaku/agentfactory-dashboard'
+```
+
+| Component | Route | Description |
+|-----------|-------|-------------|
+| `DashboardPage` | `/` | Fleet overview with stat cards and agent session grid |
+| `PipelinePage` | `/pipeline` | Kanban board with queued/working/completed columns |
+| `SessionPage` | `/sessions` | Session list table with status filtering |
+| `SessionPage` | `/sessions/[id]` | Session detail view (pass `sessionId` prop) |
+| `SettingsPage` | `/settings` | Integration status and worker list |
+
+### Usage with Next.js App Router
+
+Wrap each page in `DashboardShell` for the sidebar layout:
+
+```tsx
+// app/page.tsx
+'use client'
+
+import { DashboardShell, DashboardPage as FleetPage } from '@supaku/agentfactory-dashboard'
+import { usePathname } from 'next/navigation'
+
+export default function Home() {
+  const pathname = usePathname()
+  return (
+    <DashboardShell currentPath={pathname}>
+      <FleetPage />
+    </DashboardShell>
+  )
+}
+```
+
+```tsx
+// app/sessions/[id]/page.tsx
+'use client'
+
+import { DashboardShell, SessionPage } from '@supaku/agentfactory-dashboard'
+import { usePathname, useParams } from 'next/navigation'
+
+export default function SessionDetail() {
+  const pathname = usePathname()
+  const params = useParams<{ id: string }>()
+  return (
+    <DashboardShell currentPath={pathname}>
+      <SessionPage sessionId={params.id} />
+    </DashboardShell>
+  )
+}
+```
+
+## Layout Components
+
+```tsx
+import { DashboardShell, Sidebar, TopBar, BottomBar } from '@supaku/agentfactory-dashboard'
+```
+
+- **DashboardShell** — Full layout with sidebar, top bar, bottom bar, and mobile hamburger menu
+- **Sidebar** — Navigation sidebar with customizable `navItems` and active state via `currentPath`
+- **TopBar** — System status bar showing worker count, queue depth, uptime
+- **BottomBar** — Footer bar with version and connection status
+
+## Fleet Components
+
+```tsx
+import { FleetOverview, AgentCard, StatCard, StatusDot, ProviderIcon } from '@supaku/agentfactory-dashboard'
+```
+
+## Pipeline Components
+
+```tsx
+import { PipelineView, PipelineColumn, PipelineCard } from '@supaku/agentfactory-dashboard'
+```
+
+## Session Components
+
+```tsx
+import { SessionList, SessionDetail, SessionTimeline, TokenChart } from '@supaku/agentfactory-dashboard'
+```
+
+## Data Hooks
+
+SWR-based hooks that fetch from AgentFactory API routes with automatic 5-second refresh:
+
+```tsx
+import { useStats, useSessions, useWorkers } from '@supaku/agentfactory-dashboard'
+```
+
+| Hook | Endpoint | Returns |
+|------|----------|---------|
+| `useStats()` | `/api/public/stats` | `{ workersOnline, agentsWorking, queueDepth, completedToday, ... }` |
+| `useSessions()` | `/api/public/sessions` | `{ sessions: PublicSessionResponse[], count }` |
+| `useWorkers()` | `/api/workers` | `{ workers: WorkerResponse[] }` |
+
+## Utilities
+
+```tsx
+import { cn, formatDuration, formatCost, formatTokens, formatRelativeTime } from '@supaku/agentfactory-dashboard'
+import { getWorkTypeConfig, getStatusConfig } from '@supaku/agentfactory-dashboard'
+```
+
+## UI Primitives
+
+Re-exports of Radix-based primitives styled for the dashboard:
+
+```tsx
+import {
+  Button, Card, Badge, Skeleton, Separator,
+  ScrollArea, Tabs, Tooltip, Sheet, DropdownMenu,
+} from '@supaku/agentfactory-dashboard'
+```
+
+## Design System
+
+Dark-only theme with orange accent (`#FF6B35`). All custom colors use the `af-` prefix:
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `af-bg-primary` | `#0A0E1A` | Page background |
+| `af-bg-secondary` | `#111827` | Sidebar, panels |
+| `af-surface` | `#1A1F2E` | Cards, active states |
+| `af-surface-border` | `#2A3040` | Borders, dividers |
+| `af-accent` | `#FF6B35` | Primary actions, highlights |
+| `af-status-success` | `#22C55E` | Online, completed |
+| `af-status-warning` | `#F59E0B` | Queued, warnings |
+| `af-status-error` | `#EF4444` | Failed, errors |
+| `af-text-primary` | `#F9FAFB` | Headings, labels |
+| `af-text-secondary` | `#9CA3AF` | Descriptions, metadata |
+| `af-code` | `#A5B4FC` | Code, identifiers |
+
+## License
+
+MIT

package/package.json

@@ -1,11 +1,32 @@
 {
   "name": "@supaku/agentfactory-dashboard",
-  "version": "0.5.0",
+  "version": "0.6.2",
+  "description": "Premium dashboard UI components for AgentFactory",
+  "author": "Supaku (https://supaku.com)",
+  "license": "MIT",
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/supaku/agentfactory",
+    "directory": "packages/dashboard"
+  },
+  "homepage": "https://github.com/supaku/agentfactory/tree/main/packages/dashboard",
+  "bugs": {
+    "url": "https://github.com/supaku/agentfactory/issues"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "description": "Premium dashboard UI components for AgentFactory",
-  "license": "MIT",
+  "keywords": [
+    "dashboard",
+    "agentfactory",
+    "fleet-management",
+    "react",
+    "ui-components",
+    "tailwindcss"
+  ],
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
@@ -15,7 +36,9 @@
   "files": [
     "src",
     "tailwind.config.ts",
-    "components.json"
+    "components.json",
+    "README.md",
+    "LICENSE"
   ],
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.0",
@@ -38,10 +61,18 @@
     "tailwindcss": ">=3.4.0"
   },
   "devDependencies": {
+    "@types/node": "^22",
     "@types/react": "^19",
+    "autoprefixer": "^10",
+    "next": "^15.3.0",
+    "postcss": "^8",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^3.4.0",
     "typescript": "^5"
   },
   "scripts": {
+    "dev": "cd dev && next dev",
     "typecheck": "tsc --noEmit"
   }
 }

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

@@ -1,7 +1,6 @@
 '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'
@@ -9,54 +8,85 @@ 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'
+import { Clock, Coins } from 'lucide-react'
 
 interface AgentCardProps {
   session: PublicSessionResponse
   className?: string
+  onSelect?: (sessionId: string) => void
 }
 
-export function AgentCard({ session, className }: AgentCardProps) {
+export function AgentCard({ session, className, onSelect }: AgentCardProps) {
   const statusConfig = getStatusConfig(session.status)
   const workTypeConfig = getWorkTypeConfig(session.workType)
 
   return (
-    <Card
+    <div
       className={cn(
-        'relative p-4 transition-colors hover:border-af-surface-border/80',
+        'group relative rounded-xl border border-af-surface-border/50 bg-af-surface/40 p-4 transition-all duration-300 hover-glow',
+        session.status === 'working' && 'border-af-status-success/10',
+        session.status === 'failed' && 'border-af-status-error/10',
+        onSelect && 'cursor-pointer',
         className
       )}
+      {...(onSelect && {
+        role: 'button',
+        tabIndex: 0,
+        onClick: () => onSelect(session.id),
+        onKeyDown: (e: React.KeyboardEvent) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            onSelect(session.id)
+          }
+        },
+      })}
     >
-      <div className="flex items-start justify-between">
-        <div className="flex items-center gap-2">
+      {/* Top row: identifier + provider */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0">
           <StatusDot status={session.status} showHeartbeat={session.status === 'working'} />
-          <span className="text-sm font-medium text-af-text-primary font-mono">
+          <span className="text-sm font-mono font-medium text-af-text-primary truncate">
             {session.identifier}
           </span>
         </div>
-        <ProviderIcon size={14} />
+        <ProviderIcon size={14} className="shrink-0 opacity-40 group-hover:opacity-70 transition-opacity" />
       </div>
 
-      <div className="mt-3 flex items-center gap-2">
+      {/* Badges */}
+      <div className="mt-3 flex items-center gap-1.5">
         <Badge
           variant="outline"
-          className={cn('text-xs', workTypeConfig.bgColor, workTypeConfig.color, 'border-transparent')}
+          className={cn(
+            'text-2xs border',
+            workTypeConfig.bgColor, workTypeConfig.color, workTypeConfig.borderColor
+          )}
         >
           {workTypeConfig.label}
         </Badge>
         <Badge
           variant="outline"
-          className={cn('text-xs', statusConfig.bgColor, statusConfig.textColor, 'border-transparent')}
+          className={cn(
+            'text-2xs border',
+            statusConfig.bgColor, statusConfig.textColor, statusConfig.borderColor
+          )}
         >
           {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>
+      {/* Footer metrics */}
+      <div className="mt-3.5 flex items-center justify-between text-2xs font-body text-af-text-tertiary">
+        <span className="flex items-center gap-1 tabular-nums">
+          <Clock className="h-3 w-3" />
+          {formatDuration(session.duration)}
+        </span>
         {session.costUsd != null && (
-          <span className="tabular-nums font-mono">{formatCost(session.costUsd)}</span>
+          <span className="flex items-center gap-1 tabular-nums font-mono text-af-text-secondary">
+            <Coins className="h-3 w-3" />
+            {formatCost(session.costUsd)}
+          </span>
         )}
       </div>
-    </Card>
+    </div>
   )
 }

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

@@ -12,63 +12,94 @@ import { Users, Cpu, ListTodo, CheckCircle2, Gauge, DollarSign } from 'lucide-re
 
 interface FleetOverviewProps {
   className?: string
+  onSessionSelect?: (sessionId: string) => void
 }
 
-export function FleetOverview({ className }: FleetOverviewProps) {
+export function FleetOverview({ className, onSessionSelect }: FleetOverviewProps) {
   const { data: stats, isLoading: statsLoading } = useStats()
   const { data: sessionsData, isLoading: sessionsLoading } = useSessions()
 
   const sessions = sessionsData?.sessions ?? []
+  const activeSessions = sessions.filter((s) => s.status === 'working' || s.status === 'queued')
 
   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 className={cn('space-y-8 p-6', className)}>
+      {/* Section: Fleet Metrics */}
+      <div>
+        <div className="mb-4 flex items-center gap-3">
+          <h2 className="font-display text-lg font-bold text-af-text-primary tracking-tight">
+            Fleet Overview
+          </h2>
+          {!statsLoading && stats && (
+            <span className="text-2xs font-body text-af-text-tertiary tabular-nums">
+              {stats.workersOnline} worker{stats.workersOnline !== 1 ? 's' : ''} online
+            </span>
+          )}
+        </div>
+
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+          <StatCard
+            label="Workers"
+            value={stats?.workersOnline ?? 0}
+            icon={<Users className="h-3.5 w-3.5" />}
+            loading={statsLoading}
+          />
+          <StatCard
+            label="Active"
+            value={stats?.agentsWorking ?? 0}
+            icon={<Cpu className="h-3.5 w-3.5" />}
+            accent
+            loading={statsLoading}
+          />
+          <StatCard
+            label="Queued"
+            value={stats?.queueDepth ?? 0}
+            icon={<ListTodo className="h-3.5 w-3.5" />}
+            loading={statsLoading}
+          />
+          <StatCard
+            label="Completed"
+            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"
+            value={formatCost(stats?.totalCostToday)}
+            icon={<DollarSign className="h-3.5 w-3.5" />}
+            loading={statsLoading}
+          />
+        </div>
       </div>
 
-      {/* Agent cards */}
+      {/* Section: Active Sessions */}
       <div>
-        <h2 className="mb-3 text-sm font-medium text-af-text-secondary">Active Sessions</h2>
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <h2 className="font-display text-lg font-bold text-af-text-primary tracking-tight">
+              Sessions
+            </h2>
+            <span className="rounded-full bg-af-surface/60 px-2 py-0.5 text-2xs font-body font-medium tabular-nums text-af-text-secondary">
+              {sessions.length}
+            </span>
+          </div>
+          {activeSessions.length > 0 && (
+            <span className="text-2xs font-body text-af-teal">
+              {activeSessions.length} active
+            </span>
+          )}
+        </div>
+
         {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" />
+              <Skeleton key={i} className="h-[130px] rounded-xl" />
             ))}
           </div>
         ) : sessions.length === 0 ? (
@@ -78,8 +109,14 @@ export function FleetOverview({ className }: FleetOverviewProps) {
           />
         ) : (
           <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} />
+            {sessions.map((session, i) => (
+              <div
+                key={session.id}
+                className="animate-fade-in"
+                style={{ animationDelay: `${i * 50}ms` }}
+              >
+                <AgentCard session={session} onSelect={onSessionSelect} />
+              </div>
             ))}
           </div>
         )}

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

@@ -1,5 +1,4 @@
 import { cn } from '../../lib/utils'
-import { Card } from '../../components/ui/card'
 import { Skeleton } from '../../components/ui/skeleton'
 
 interface StatCardProps {
@@ -8,36 +7,56 @@ interface StatCardProps {
   detail?: string
   icon?: React.ReactNode
   trend?: 'up' | 'down' | 'neutral'
+  accent?: boolean
   loading?: boolean
   className?: string
 }
 
-export function StatCard({ label, value, detail, icon, loading, className }: StatCardProps) {
+export function StatCard({ label, value, detail, icon, accent, loading, className }: StatCardProps) {
   if (loading) {
     return (
-      <Card className={cn('p-4', className)}>
+      <div className={cn(
+        'rounded-xl border border-af-surface-border/50 bg-af-surface/50 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>
+        <Skeleton className="mt-3 h-8 w-16" />
+        <Skeleton className="mt-1.5 h-3 w-20" />
+      </div>
     )
   }
 
   return (
-    <Card className={cn('p-4', className)}>
+    <div className={cn(
+      'group rounded-xl border border-af-surface-border/50 bg-af-surface/40 p-4 transition-all duration-300 hover-glow',
+      accent && 'border-af-accent/15 bg-af-accent/[0.03]',
+      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>}
+        <span className="text-2xs font-body font-medium uppercase tracking-wider text-af-text-tertiary">
+          {label}
+        </span>
+        {icon && (
+          <span className={cn(
+            'text-af-text-tertiary transition-colors duration-300 group-hover:text-af-text-secondary',
+            accent && 'text-af-accent/40 group-hover:text-af-accent/70'
+          )}>
+            {icon}
+          </span>
+        )}
       </div>
-      <div className="mt-1.5 text-2xl font-bold tabular-nums text-af-text-primary">
+      <div className={cn(
+        'mt-2 font-display text-2xl font-bold tabular-nums tracking-tight',
+        accent ? 'text-af-accent' : 'text-af-text-primary'
+      )}>
         {value}
       </div>
       {detail && (
-        <p className="mt-0.5 text-xs text-af-text-secondary">{detail}</p>
+        <p className="mt-1 text-2xs font-body text-af-text-tertiary">{detail}</p>
       )}
-    </Card>
+    </div>
   )
 }

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

@@ -11,7 +11,8 @@ export function StatusDot({ status, className, showHeartbeat = false }: StatusDo
   const config = getStatusConfig(status)
 
   return (
-    <span className={cn('relative inline-flex h-2.5 w-2.5', className)}>
+    <span className={cn('relative inline-flex h-2 w-2', className)}>
+      {/* Outer glow ring for active states */}
       {config.animate && showHeartbeat && (
         <span
           className={cn(
@@ -20,11 +21,13 @@ export function StatusDot({ status, className, showHeartbeat = false }: StatusDo
           )}
         />
       )}
+      {/* Core dot */}
       <span
         className={cn(
-          'relative inline-flex h-2.5 w-2.5 rounded-full',
+          'relative inline-flex h-2 w-2 rounded-full',
           config.dotColor,
-          config.animate && 'animate-pulse-dot'
+          config.animate && 'animate-pulse-dot',
+          config.glowClass
         )}
       />
     </span>