@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

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:

// next.config.ts
const nextConfig: NextConfig = {
  transpilePackages: ['@supaku/agentfactory-dashboard'],
}

Tailwind v3

Import the globals CSS and use the tailwind preset:

/* globals.css */
@import '@supaku/agentfactory-dashboard/styles';

// 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:

@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:

: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:

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:

// 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>
  )
}

// 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

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

import { FleetOverview, AgentCard, StatCard, StatusDot, ProviderIcon } from '@supaku/agentfactory-dashboard'

Pipeline Components

import { PipelineView, PipelineColumn, PipelineCard } from '@supaku/agentfactory-dashboard'

Session Components

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:

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

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:

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