@renseiai/agentfactory-dashboard 0.8.0

package/src/lib/status-config.ts

@@ -0,0 +1,72 @@
+export type SessionStatus = 'queued' | 'parked' | 'working' | 'completed' | 'failed' | 'stopped'
+
+export interface StatusConfig {
+  label: string
+  dotColor: string
+  textColor: string
+  bgColor: string
+  borderColor: string
+  glowClass: 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',
+    borderColor: 'border-af-status-success/20',
+    glowClass: 'glow-dot-green',
+    animate: true,
+  },
+  queued: {
+    label: 'Queued',
+    dotColor: 'bg-af-status-warning',
+    textColor: 'text-af-status-warning',
+    bgColor: 'bg-af-status-warning/10',
+    borderColor: 'border-af-status-warning/20',
+    glowClass: 'glow-dot-yellow',
+    animate: true,
+  },
+  parked: {
+    label: 'Parked',
+    dotColor: 'bg-af-text-tertiary',
+    textColor: 'text-af-text-secondary',
+    bgColor: 'bg-af-text-secondary/8',
+    borderColor: 'border-af-text-secondary/10',
+    glowClass: '',
+    animate: false,
+  },
+  completed: {
+    label: 'Completed',
+    dotColor: 'bg-af-status-success',
+    textColor: 'text-af-status-success',
+    bgColor: 'bg-af-status-success/10',
+    borderColor: 'border-af-status-success/15',
+    glowClass: '',
+    animate: false,
+  },
+  failed: {
+    label: 'Failed',
+    dotColor: 'bg-af-status-error',
+    textColor: 'text-af-status-error',
+    bgColor: 'bg-af-status-error/10',
+    borderColor: 'border-af-status-error/20',
+    glowClass: 'glow-dot-red',
+    animate: false,
+  },
+  stopped: {
+    label: 'Stopped',
+    dotColor: 'bg-af-text-tertiary',
+    textColor: 'text-af-text-secondary',
+    bgColor: 'bg-af-text-secondary/8',
+    borderColor: 'border-af-text-secondary/10',
+    glowClass: '',
+    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,116 @@
+export interface WorkTypeConfig {
+  label: string
+  color: string
+  bgColor: string
+  borderColor: string
+}
+
+const workTypes: Record<string, WorkTypeConfig> = {
+  development: {
+    label: 'Development',
+    color: 'text-blue-400',
+    bgColor: 'bg-blue-400/10',
+    borderColor: 'border-blue-400/15',
+  },
+  bugfix: {
+    label: 'Bug Fix',
+    color: 'text-red-400',
+    bgColor: 'bg-red-400/10',
+    borderColor: 'border-red-400/15',
+  },
+  feature: {
+    label: 'Feature',
+    color: 'text-emerald-400',
+    bgColor: 'bg-emerald-400/10',
+    borderColor: 'border-emerald-400/15',
+  },
+  qa: {
+    label: 'QA',
+    color: 'text-purple-400',
+    bgColor: 'bg-purple-400/10',
+    borderColor: 'border-purple-400/15',
+  },
+  'qa-coordination': {
+    label: 'QA Coord',
+    color: 'text-purple-300',
+    bgColor: 'bg-purple-300/10',
+    borderColor: 'border-purple-300/15',
+  },
+  acceptance: {
+    label: 'Acceptance',
+    color: 'text-pink-400',
+    bgColor: 'bg-pink-400/10',
+    borderColor: 'border-pink-400/15',
+  },
+  'acceptance-coordination': {
+    label: 'Accept Coord',
+    color: 'text-pink-300',
+    bgColor: 'bg-pink-300/10',
+    borderColor: 'border-pink-300/15',
+  },
+  coordination: {
+    label: 'Coordination',
+    color: 'text-orange-400',
+    bgColor: 'bg-orange-400/10',
+    borderColor: 'border-orange-400/15',
+  },
+  research: {
+    label: 'Research',
+    color: 'text-teal-400',
+    bgColor: 'bg-teal-400/10',
+    borderColor: 'border-teal-400/15',
+  },
+  'backlog-creation': {
+    label: 'Backlog',
+    color: 'text-slate-400',
+    bgColor: 'bg-slate-400/10',
+    borderColor: 'border-slate-400/15',
+  },
+  inflight: {
+    label: 'Inflight',
+    color: 'text-yellow-400',
+    bgColor: 'bg-yellow-400/10',
+    borderColor: 'border-yellow-400/15',
+  },
+  refinement: {
+    label: 'Refinement',
+    color: 'text-lime-400',
+    bgColor: 'bg-lime-400/10',
+    borderColor: 'border-lime-400/15',
+  },
+  'refinement-coordination': {
+    label: 'Refine Coord',
+    color: 'text-lime-300',
+    bgColor: 'bg-lime-300/10',
+    borderColor: 'border-lime-300/15',
+  },
+  refactor: {
+    label: 'Refactor',
+    color: 'text-amber-400',
+    bgColor: 'bg-amber-400/10',
+    borderColor: 'border-amber-400/15',
+  },
+  review: {
+    label: 'Review',
+    color: 'text-cyan-400',
+    bgColor: 'bg-cyan-400/10',
+    borderColor: 'border-cyan-400/15',
+  },
+  docs: {
+    label: 'Docs',
+    color: 'text-indigo-400',
+    bgColor: 'bg-indigo-400/10',
+    borderColor: 'border-indigo-400/15',
+  },
+}
+
+const defaultWorkType: WorkTypeConfig = {
+  label: 'Unknown',
+  color: 'text-af-text-secondary',
+  bgColor: 'bg-af-text-secondary/8',
+  borderColor: 'border-af-text-secondary/10',
+}
+
+export function getWorkTypeConfig(workType: string): WorkTypeConfig {
+  return workTypes[workType.toLowerCase()] ?? defaultWorkType
+}

package/src/pages/dashboard-page.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { FleetOverview } from '../components/fleet/fleet-overview'
+
+interface DashboardPageProps {
+  onSessionSelect?: (sessionId: string) => void
+}
+
+export function DashboardPage({ onSessionSelect }: DashboardPageProps) {
+  return <FleetOverview onSessionSelect={onSessionSelect} />
+}

package/src/pages/pipeline-page.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { PipelineView } from '../components/pipeline/pipeline-view'
+
+interface PipelinePageProps {
+  onSessionSelect?: (sessionId: string) => void
+}
+
+export function PipelinePage({ onSessionSelect }: PipelinePageProps) {
+  return <PipelineView onSessionSelect={onSessionSelect} />
+}

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,218 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 222 55% 5%;
+    --foreground: 210 40% 98%;
+    --card: 222 40% 8%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222 40% 8%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 19 100% 60%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 222 35% 12%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 222 25% 16%;
+    --muted-foreground: 215 16% 54%;
+    --accent: 222 35% 12%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 222 25% 14%;
+    --input: 222 25% 14%;
+    --ring: 19 100% 60%;
+    --radius: 0.625rem;
+
+    /* Extended palette */
+    --glow-orange: 19 100% 60%;
+    --glow-teal: 164 100% 42%;
+    --glow-blue: 217 91% 60%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@layer utilities {
+  /* Glass surface effect */
+  .glass {
+    background: linear-gradient(
+      135deg,
+      hsl(222 40% 8% / 0.8) 0%,
+      hsl(222 40% 6% / 0.6) 100%
+    );
+    backdrop-filter: blur(16px) saturate(1.2);
+    -webkit-backdrop-filter: blur(16px) saturate(1.2);
+  }
+
+  .glass-subtle {
+    background: linear-gradient(
+      135deg,
+      hsl(222 40% 10% / 0.5) 0%,
+      hsl(222 40% 7% / 0.4) 100%
+    );
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+
+  /* Glow effects */
+  .glow-orange {
+    box-shadow:
+      0 0 0 1px hsl(var(--glow-orange) / 0.15),
+      0 0 20px -4px hsl(var(--glow-orange) / 0.2),
+      0 0 40px -8px hsl(var(--glow-orange) / 0.1);
+  }
+
+  .glow-teal {
+    box-shadow:
+      0 0 0 1px hsl(var(--glow-teal) / 0.15),
+      0 0 20px -4px hsl(var(--glow-teal) / 0.2),
+      0 0 40px -8px hsl(var(--glow-teal) / 0.1);
+  }
+
+  .glow-soft {
+    box-shadow:
+      0 0 0 1px hsl(222 25% 18% / 0.6),
+      0 4px 24px -4px hsl(222 50% 4% / 0.5);
+  }
+
+  .glow-dot-green {
+    box-shadow: 0 0 8px 2px hsl(142 71% 45% / 0.4);
+  }
+
+  .glow-dot-orange {
+    box-shadow: 0 0 8px 2px hsl(var(--glow-orange) / 0.4);
+  }
+
+  .glow-dot-red {
+    box-shadow: 0 0 8px 2px hsl(0 84% 60% / 0.4);
+  }
+
+  .glow-dot-yellow {
+    box-shadow: 0 0 8px 2px hsl(38 92% 50% / 0.35);
+  }
+
+  /* Grid background */
+  .grid-bg {
+    background-image:
+      linear-gradient(hsl(222 30% 15% / 0.3) 1px, transparent 1px),
+      linear-gradient(90deg, hsl(222 30% 15% / 0.3) 1px, transparent 1px);
+    background-size: 40px 40px;
+  }
+
+  .grid-bg-fine {
+    background-image:
+      linear-gradient(hsl(222 30% 15% / 0.15) 1px, transparent 1px),
+      linear-gradient(90deg, hsl(222 30% 15% / 0.15) 1px, transparent 1px);
+    background-size: 20px 20px;
+  }
+
+  /* Noise texture */
+  .noise {
+    position: relative;
+  }
+  .noise::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
+    pointer-events: none;
+    z-index: 0;
+    opacity: 0.4;
+    mix-blend-mode: overlay;
+  }
+
+  /* Gradient mesh background */
+  .mesh-gradient {
+    background:
+      radial-gradient(ellipse 600px 400px at 15% 20%, hsl(var(--glow-orange) / 0.06) 0%, transparent 70%),
+      radial-gradient(ellipse 500px 500px at 85% 80%, hsl(var(--glow-teal) / 0.04) 0%, transparent 70%),
+      radial-gradient(ellipse 800px 300px at 50% 50%, hsl(var(--glow-blue) / 0.03) 0%, transparent 70%);
+  }
+
+  /* Tabular nums utility */
+  .nums {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Border glow on hover */
+  .hover-glow {
+    transition: box-shadow 0.3s ease, border-color 0.3s ease;
+  }
+  .hover-glow:hover {
+    border-color: hsl(var(--glow-orange) / 0.25);
+    box-shadow:
+      0 0 0 1px hsl(var(--glow-orange) / 0.1),
+      0 0 20px -8px hsl(var(--glow-orange) / 0.15);
+  }
+
+  /* Staggered animation delays */
+  .stagger-1 { animation-delay: 50ms; }
+  .stagger-2 { animation-delay: 100ms; }
+  .stagger-3 { animation-delay: 150ms; }
+  .stagger-4 { animation-delay: 200ms; }
+  .stagger-5 { animation-delay: 250ms; }
+  .stagger-6 { animation-delay: 300ms; }
+}
+
+@layer components {
+  /* Accent line for active sidebar items */
+  .nav-active-indicator {
+    position: relative;
+  }
+  .nav-active-indicator::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 25%;
+    bottom: 25%;
+    width: 2px;
+    border-radius: 1px;
+    background: hsl(var(--glow-orange));
+    box-shadow: 0 0 8px 1px hsl(var(--glow-orange) / 0.5);
+  }
+
+  /* Column accent strip */
+  .column-accent {
+    position: relative;
+  }
+  .column-accent::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 12px;
+    right: 12px;
+    height: 1px;
+    border-radius: 0 0 2px 2px;
+  }
+  .column-accent-green::before {
+    background: linear-gradient(90deg, transparent, hsl(142 71% 45% / 0.6), transparent);
+    box-shadow: 0 0 12px 2px hsl(142 71% 45% / 0.2);
+  }
+  .column-accent-gray::before {
+    background: linear-gradient(90deg, transparent, hsl(215 16% 47% / 0.4), transparent);
+  }
+  .column-accent-blue::before {
+    background: linear-gradient(90deg, transparent, hsl(217 91% 60% / 0.6), transparent);
+    box-shadow: 0 0 12px 2px hsl(217 91% 60% / 0.15);
+  }
+  .column-accent-red::before {
+    background: linear-gradient(90deg, transparent, hsl(0 84% 60% / 0.6), transparent);
+    box-shadow: 0 0 12px 2px hsl(0 84% 60% / 0.15);
+  }
+  .column-accent-yellow::before {
+    background: linear-gradient(90deg, transparent, hsl(38 92% 50% / 0.5), transparent);
+    box-shadow: 0 0 12px 2px hsl(38 92% 50% / 0.12);
+  }
+}

package/src/types/api.ts

@@ -0,0 +1,48 @@
+export interface PublicStatsResponse {
+  workersOnline: number
+  agentsWorking: number
+  queueDepth: number
+  completedToday: number
+  availableCapacity: number
+  totalCostToday?: number
+  totalCostAllTime?: number
+  sessionCountToday?: 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
+  provider?: string
+}
+
+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,139 @@
+import type { Config } from 'tailwindcss'
+
+const dashboardPreset: Config = {
+  content: [],
+  theme: {
+    extend: {
+      colors: {
+        // Void backgrounds - deeper, richer
+        'af-bg-primary': '#080C16',
+        'af-bg-secondary': '#0D1220',
+        'af-bg-tertiary': '#111828',
+
+        // Glass surfaces
+        'af-surface': '#141B2D',
+        'af-surface-raised': '#1A2236',
+        'af-surface-border': '#1E2740',
+        'af-surface-border-bright': '#283350',
+
+        // Accent palette
+        'af-accent': '#FF6B35',
+        'af-accent-dim': '#CC5529',
+        'af-teal': '#00D4AA',
+        'af-teal-dim': '#00A886',
+        'af-blue': '#4B8BF5',
+
+        // Status
+        'af-status-success': '#22C55E',
+        'af-status-warning': '#F59E0B',
+        'af-status-error': '#EF4444',
+
+        // Text hierarchy
+        'af-text-primary': '#F1F5F9',
+        'af-text-secondary': '#7C8DB5',
+        'af-text-tertiary': '#4B5B80',
+        'af-code': '#A5B4FC',
+
+        // shadcn tokens
+        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: ['Syne', 'DM Sans', 'system-ui', 'sans-serif'],
+        body: ['DM Sans', 'system-ui', 'sans-serif'],
+        mono: ['Fira Code', 'JetBrains Mono', 'ui-monospace', 'monospace'],
+        display: ['Syne', 'system-ui', 'sans-serif'],
+      },
+      fontSize: {
+        '2xs': ['0.625rem', { lineHeight: '0.875rem' }],
+        xs: ['0.6875rem', { lineHeight: '1rem' }],
+        sm: ['0.8125rem', { lineHeight: '1.25rem' }],
+        base: ['0.875rem', { lineHeight: '1.5rem' }],
+        lg: ['1rem', { lineHeight: '1.5rem' }],
+        xl: ['1.25rem', { lineHeight: '1.75rem' }],
+        '2xl': ['1.75rem', { lineHeight: '2rem' }],
+        '3xl': ['2.25rem', { lineHeight: '2.5rem' }],
+        '4xl': ['3rem', { lineHeight: '3.25rem' }],
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'pulse-dot': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.35' },
+        },
+        heartbeat: {
+          '0%': { transform: 'scale(1)', opacity: '0.5' },
+          '50%': { transform: 'scale(2.2)', opacity: '0' },
+          '100%': { transform: 'scale(1)', opacity: '0' },
+        },
+        'fade-in': {
+          '0%': { opacity: '0', transform: 'translateY(8px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'fade-in-scale': {
+          '0%': { opacity: '0', transform: 'scale(0.95)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
+        },
+        'glow-breathe': {
+          '0%, 100%': { opacity: '0.6' },
+          '50%': { opacity: '1' },
+        },
+        'slide-in-left': {
+          '0%': { opacity: '0', transform: 'translateX(-12px)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
+      },
+      animation: {
+        'pulse-dot': 'pulse-dot 2s ease-in-out infinite',
+        heartbeat: 'heartbeat 2s ease-out infinite',
+        'fade-in': 'fade-in 0.4s ease-out both',
+        'fade-in-scale': 'fade-in-scale 0.3s ease-out both',
+        shimmer: 'shimmer 2s linear infinite',
+        'glow-breathe': 'glow-breathe 3s ease-in-out infinite',
+        'slide-in-left': 'slide-in-left 0.3s ease-out both',
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default dashboardPreset