@renseiai/agentfactory-dashboard 0.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Rensei AI
+
+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/README.md

@@ -0,0 +1,259 @@
+# @renseiai/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.
+
+## Deploy
+
+Want to run the dashboard without building from source? Use the one-click deploy template:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Frenseiai%2Fagentfactory%2Ftree%2Fmain%2Ftemplates%2Fdashboard&project-name=agentfactory-dashboard&env=LINEAR_ACCESS_TOKEN,LINEAR_WEBHOOK_SECRET,REDIS_URL&envDescription=Environment%20variables%20needed%20for%20AgentFactory%20Dashboard&envLink=https%3A%2F%2Fgithub.com%2Frenseiai%2Fagentfactory%2Ftree%2Fmain%2Ftemplates%2Fdashboard%23environment-variables)
+[![Deploy on Railway](https://railway.com/button.svg)](https://railway.com/deploy/A7hIuF?referralCode=MwgIWL)
+
+> Railway includes Redis automatically. Vercel requires adding [Vercel KV](https://vercel.com/docs/storage/vercel-kv) or [Upstash Redis](https://upstash.com/) after deployment.
+
+See the [dashboard template](https://github.com/renseiai/agentfactory/tree/main/templates/dashboard) for full setup instructions.
+
+## Installation
+
+```bash
+npm install @renseiai/agentfactory-dashboard
+# or
+pnpm add @renseiai/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: ['@renseiai/agentfactory-dashboard'],
+}
+```
+
+### Tailwind v3
+
+Import the globals CSS and use the tailwind preset:
+
+```css
+/* globals.css */
+@import '@renseiai/agentfactory-dashboard/styles';
+```
+
+```typescript
+// tailwind.config.ts
+import dashboardPreset from '@renseiai/agentfactory-dashboard/tailwind-preset'
+
+export default {
+  presets: [dashboardPreset],
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/@renseiai/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/@renseiai/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 '@renseiai/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 '@renseiai/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 '@renseiai/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 '@renseiai/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 '@renseiai/agentfactory-dashboard'
+```
+
+## Pipeline Components
+
+```tsx
+import { PipelineView, PipelineColumn, PipelineCard } from '@renseiai/agentfactory-dashboard'
+```
+
+## Session Components
+
+```tsx
+import { SessionList, SessionDetail, SessionTimeline, TokenChart } from '@renseiai/agentfactory-dashboard'
+```
+
+## Data Hooks
+
+SWR-based hooks that fetch from AgentFactory API routes with automatic 5-second refresh:
+
+```tsx
+import { useStats, useSessions, useWorkers } from '@renseiai/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 '@renseiai/agentfactory-dashboard'
+import { getWorkTypeConfig, getStatusConfig } from '@renseiai/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 '@renseiai/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/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,78 @@
+{
+  "name": "@renseiai/agentfactory-dashboard",
+  "version": "0.8.0",
+  "description": "Premium dashboard UI components for AgentFactory",
+  "author": "Rensei AI (https://rensei.ai)",
+  "license": "MIT",
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/renseiai/agentfactory",
+    "directory": "packages/dashboard"
+  },
+  "homepage": "https://github.com/renseiai/agentfactory/tree/main/packages/dashboard",
+  "bugs": {
+    "url": "https://github.com/renseiai/agentfactory/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "dashboard",
+    "agentfactory",
+    "fleet-management",
+    "react",
+    "ui-components",
+    "tailwindcss"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles": "./src/styles/globals.css",
+    "./tailwind-preset": "./tailwind.config.ts"
+  },
+  "files": [
+    "src",
+    "tailwind.config.ts",
+    "components.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "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/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

@@ -0,0 +1,97 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+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'
+import { Clock, Coins } from 'lucide-react'
+
+interface AgentCardProps {
+  session: PublicSessionResponse
+  className?: string
+  onSelect?: (sessionId: string) => void
+}
+
+export function AgentCard({ session, className, onSelect }: AgentCardProps) {
+  const statusConfig = getStatusConfig(session.status)
+  const workTypeConfig = getWorkTypeConfig(session.workType)
+
+  return (
+    <div
+      className={cn(
+        '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)
+          }
+        },
+      })}
+    >
+      {/* 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={cn(
+            'text-sm font-mono font-medium truncate',
+            onSelect
+              ? 'text-af-teal hover:underline underline-offset-2'
+              : 'text-af-text-primary'
+          )}>
+            {session.identifier}
+          </span>
+        </div>
+        <ProviderIcon provider={session.provider} size={14} className="shrink-0 opacity-40 group-hover:opacity-70 transition-opacity" />
+      </div>
+
+      {/* Badges */}
+      <div className="mt-3 flex items-center gap-1.5">
+        <Badge
+          variant="outline"
+          className={cn(
+            'text-2xs border',
+            workTypeConfig.bgColor, workTypeConfig.color, workTypeConfig.borderColor
+          )}
+        >
+          {workTypeConfig.label}
+        </Badge>
+        <Badge
+          variant="outline"
+          className={cn(
+            'text-2xs border',
+            statusConfig.bgColor, statusConfig.textColor, statusConfig.borderColor
+          )}
+        >
+          {statusConfig.label}
+        </Badge>
+      </div>
+
+      {/* 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="flex items-center gap-1 tabular-nums font-mono text-af-text-secondary">
+            <Coins className="h-3 w-3" />
+            {formatCost(session.costUsd)}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,139 @@
+'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
+  onSessionSelect?: (sessionId: string) => void
+}
+
+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-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 Today"
+            value={formatCost(stats?.totalCostToday)}
+            icon={<DollarSign className="h-3.5 w-3.5" />}
+            loading={statsLoading}
+            tooltip={
+              <div className="space-y-1.5 py-1">
+                <p className="font-medium text-af-text-primary">Cost Today (UTC)</p>
+                <p className="text-af-text-secondary">
+                  Sum of {stats?.sessionCountToday ?? 0} session{(stats?.sessionCountToday ?? 0) !== 1 ? 's' : ''} active or completed today.
+                </p>
+                {stats?.totalCostAllTime != null && stats.totalCostAllTime !== stats.totalCostToday && (
+                  <p className="text-af-text-tertiary border-t border-af-surface-border/50 pt-1.5">
+                    All-time total: <span className="font-mono tabular-nums text-af-text-secondary">{formatCost(stats.totalCostAllTime)}</span>
+                  </p>
+                )}
+              </div>
+            }
+          />
+        </div>
+      </div>
+
+      {/* Section: Active Sessions */}
+      <div>
+        <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-[130px] rounded-xl" />
+            ))}
+          </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, i) => (
+              <div
+                key={session.id}
+                className="animate-fade-in"
+                style={{ animationDelay: `${i * 50}ms` }}
+              >
+                <AgentCard session={session} onSelect={onSessionSelect} />
+              </div>
+            ))}
+          </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>
+  )
+}