@supaku/agentfactory-dashboard 0.5.0

package/src/lib/format.ts

@@ -0,0 +1,36 @@
+export function formatDuration(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`
+  if (seconds < 3600) {
+    const m = Math.floor(seconds / 60)
+    const s = seconds % 60
+    return s > 0 ? `${m}m ${s}s` : `${m}m`
+  }
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  return m > 0 ? `${h}h ${m}m` : `${h}h`
+}
+
+export function formatCost(usd: number | undefined | null): string {
+  if (usd == null || usd === 0) return '$0.00'
+  if (usd < 0.01) return `$${usd.toFixed(4)}`
+  return `$${usd.toFixed(2)}`
+}
+
+export function formatTokens(count: number | undefined | null): string {
+  if (count == null || count === 0) return '0'
+  if (count < 1_000) return count.toString()
+  if (count < 1_000_000) return `${(count / 1_000).toFixed(1)}k`
+  return `${(count / 1_000_000).toFixed(2)}M`
+}
+
+export function formatRelativeTime(isoString: string): string {
+  const diff = Date.now() - new Date(isoString).getTime()
+  const seconds = Math.floor(diff / 1000)
+  if (seconds < 60) return 'just now'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  return `${days}d ago`
+}

package/src/lib/status-config.ts

@@ -0,0 +1,58 @@
+export type SessionStatus = 'queued' | 'parked' | 'working' | 'completed' | 'failed' | 'stopped'
+
+export interface StatusConfig {
+  label: string
+  dotColor: string
+  textColor: string
+  bgColor: string
+  animate: boolean
+}
+
+const statuses: Record<SessionStatus, StatusConfig> = {
+  working: {
+    label: 'Working',
+    dotColor: 'bg-af-status-success',
+    textColor: 'text-af-status-success',
+    bgColor: 'bg-af-status-success/10',
+    animate: true,
+  },
+  queued: {
+    label: 'Queued',
+    dotColor: 'bg-af-status-warning',
+    textColor: 'text-af-status-warning',
+    bgColor: 'bg-af-status-warning/10',
+    animate: true,
+  },
+  parked: {
+    label: 'Parked',
+    dotColor: 'bg-af-text-secondary',
+    textColor: 'text-af-text-secondary',
+    bgColor: 'bg-af-text-secondary/10',
+    animate: false,
+  },
+  completed: {
+    label: 'Completed',
+    dotColor: 'bg-af-status-success',
+    textColor: 'text-af-status-success',
+    bgColor: 'bg-af-status-success/10',
+    animate: false,
+  },
+  failed: {
+    label: 'Failed',
+    dotColor: 'bg-af-status-error',
+    textColor: 'text-af-status-error',
+    bgColor: 'bg-af-status-error/10',
+    animate: false,
+  },
+  stopped: {
+    label: 'Stopped',
+    dotColor: 'bg-af-text-secondary',
+    textColor: 'text-af-text-secondary',
+    bgColor: 'bg-af-text-secondary/10',
+    animate: false,
+  },
+}
+
+export function getStatusConfig(status: SessionStatus): StatusConfig {
+  return statuses[status] ?? statuses.queued
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/lib/work-type-config.ts

@@ -0,0 +1,53 @@
+export interface WorkTypeConfig {
+  label: string
+  color: string
+  bgColor: string
+}
+
+const workTypes: Record<string, WorkTypeConfig> = {
+  development: {
+    label: 'Development',
+    color: 'text-blue-400',
+    bgColor: 'bg-blue-400/10',
+  },
+  bugfix: {
+    label: 'Bug Fix',
+    color: 'text-red-400',
+    bgColor: 'bg-red-400/10',
+  },
+  feature: {
+    label: 'Feature',
+    color: 'text-emerald-400',
+    bgColor: 'bg-emerald-400/10',
+  },
+  qa: {
+    label: 'QA',
+    color: 'text-purple-400',
+    bgColor: 'bg-purple-400/10',
+  },
+  refactor: {
+    label: 'Refactor',
+    color: 'text-amber-400',
+    bgColor: 'bg-amber-400/10',
+  },
+  review: {
+    label: 'Review',
+    color: 'text-cyan-400',
+    bgColor: 'bg-cyan-400/10',
+  },
+  docs: {
+    label: 'Docs',
+    color: 'text-indigo-400',
+    bgColor: 'bg-indigo-400/10',
+  },
+}
+
+const defaultWorkType: WorkTypeConfig = {
+  label: 'Development',
+  color: 'text-af-text-secondary',
+  bgColor: 'bg-af-text-secondary/10',
+}
+
+export function getWorkTypeConfig(workType: string): WorkTypeConfig {
+  return workTypes[workType.toLowerCase()] ?? defaultWorkType
+}

package/src/pages/dashboard-page.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { FleetOverview } from '../components/fleet/fleet-overview'
+
+export function DashboardPage() {
+  return <FleetOverview />
+}

package/src/pages/pipeline-page.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { PipelineView } from '../components/pipeline/pipeline-view'
+
+export function PipelinePage() {
+  return <PipelineView />
+}

package/src/pages/session-page.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useState } from 'react'
+import { useSessions } from '../hooks/use-sessions'
+import { SessionList } from '../components/sessions/session-list'
+import { SessionDetail } from '../components/sessions/session-detail'
+
+interface SessionPageProps {
+  sessionId?: string
+}
+
+export function SessionPage({ sessionId: initialId }: SessionPageProps) {
+  const [selectedId, setSelectedId] = useState<string | undefined>(initialId)
+  const { data } = useSessions()
+  const sessions = data?.sessions ?? []
+
+  const selected = selectedId ? sessions.find((s) => s.id === selectedId) : undefined
+
+  if (selected) {
+    return (
+      <SessionDetail
+        session={selected}
+        onBack={() => setSelectedId(undefined)}
+      />
+    )
+  }
+
+  return <SessionList onSelect={setSelectedId} />
+}

package/src/pages/settings-page.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { SettingsView } from '../components/settings/settings-view'
+
+export function SettingsPage() {
+  return <SettingsView />
+}

package/src/styles/globals.css

@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 222 47% 7%;
+    --foreground: 210 40% 98%;
+    --card: 222 30% 14%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222 30% 14%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 19 100% 60%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 222 30% 18%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 222 20% 22%;
+    --muted-foreground: 215 16% 62%;
+    --accent: 222 30% 18%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 222 20% 22%;
+    --input: 222 20% 22%;
+    --ring: 19 100% 60%;
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}

package/src/types/api.ts

@@ -0,0 +1,45 @@
+export interface PublicStatsResponse {
+  workersOnline: number
+  agentsWorking: number
+  queueDepth: number
+  completedToday: number
+  availableCapacity: number
+  totalCostToday?: number
+  timestamp: string
+}
+
+export type SessionStatus = 'queued' | 'parked' | 'working' | 'completed' | 'failed' | 'stopped'
+
+export interface PublicSessionResponse {
+  id: string
+  identifier: string
+  status: SessionStatus
+  workType: string
+  startedAt: string
+  duration: number
+  costUsd?: number
+}
+
+export interface PublicSessionsListResponse {
+  sessions: PublicSessionResponse[]
+  count: number
+  timestamp: string
+}
+
+export interface WorkerResponse {
+  id: string
+  status: 'active' | 'draining' | 'offline'
+  capacity: number
+  activeSessions: number
+  lastHeartbeat: string
+  provider?: string
+  hostname?: string
+}
+
+export interface WorkersListResponse {
+  workers: WorkerResponse[]
+  count: number
+  timestamp: string
+}
+
+export type PipelineStatus = 'backlog' | 'started' | 'finished' | 'delivered' | 'accepted'

package/tailwind.config.ts

@@ -0,0 +1,88 @@
+import type { Config } from 'tailwindcss'
+
+const dashboardPreset: Config = {
+  content: [],
+  theme: {
+    extend: {
+      colors: {
+        'af-bg-primary': '#0A0E1A',
+        'af-bg-secondary': '#111827',
+        'af-surface': '#1A1F2E',
+        'af-surface-border': '#2A3040',
+        'af-accent': '#FF6B35',
+        'af-status-success': '#22C55E',
+        'af-status-warning': '#F59E0B',
+        'af-status-error': '#EF4444',
+        'af-text-primary': '#F9FAFB',
+        'af-text-secondary': '#9CA3AF',
+        'af-code': '#A5B4FC',
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'Geist Sans', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Geist Mono', 'ui-monospace', 'monospace'],
+      },
+      fontSize: {
+        xs: ['0.6875rem', { lineHeight: '1rem' }],
+        sm: ['0.8125rem', { lineHeight: '1.25rem' }],
+        base: ['0.875rem', { lineHeight: '1.5rem' }],
+        lg: ['1rem', { lineHeight: '1.75rem' }],
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'pulse-dot': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.4' },
+        },
+        heartbeat: {
+          '0%': { transform: 'scale(1)', opacity: '0.6' },
+          '50%': { transform: 'scale(1.8)', opacity: '0' },
+          '100%': { transform: 'scale(1)', opacity: '0' },
+        },
+      },
+      animation: {
+        'pulse-dot': 'pulse-dot 2s ease-in-out infinite',
+        heartbeat: 'heartbeat 2s ease-out infinite',
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default dashboardPreset