@renseiai/agentfactory-dashboard 0.8.0

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

@@ -0,0 +1,77 @@
+import { cn } from '../../lib/utils'
+import { Skeleton } from '../../components/ui/skeleton'
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../components/ui/tooltip'
+
+interface StatCardProps {
+  label: string
+  value: string | number
+  detail?: string
+  icon?: React.ReactNode
+  trend?: 'up' | 'down' | 'neutral'
+  accent?: boolean
+  loading?: boolean
+  className?: string
+  tooltip?: React.ReactNode
+}
+
+export function StatCard({ label, value, detail, icon, accent, loading, className, tooltip }: StatCardProps) {
+  if (loading) {
+    return (
+      <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-3 h-8 w-16" />
+        <Skeleton className="mt-1.5 h-3 w-20" />
+      </div>
+    )
+  }
+
+  const card = (
+    <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-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={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-1 text-2xs font-body text-af-text-tertiary">{detail}</p>
+      )}
+    </div>
+  )
+
+  if (tooltip) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{card}</TooltipTrigger>
+        <TooltipContent side="bottom" className="max-w-xs">
+          {tooltip}
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  return card
+}

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

@@ -0,0 +1,35 @@
+import { cn } from '../../lib/utils'
+import { getStatusConfig, type SessionStatus } from '../../lib/status-config'
+
+interface StatusDotProps {
+  status: SessionStatus
+  className?: string
+  showHeartbeat?: boolean
+}
+
+export function StatusDot({ status, className, showHeartbeat = false }: StatusDotProps) {
+  const config = getStatusConfig(status)
+
+  return (
+    <span className={cn('relative inline-flex h-2 w-2', className)}>
+      {/* Outer glow ring for active states */}
+      {config.animate && showHeartbeat && (
+        <span
+          className={cn(
+            'absolute inset-0 rounded-full animate-heartbeat',
+            config.dotColor
+          )}
+        />
+      )}
+      {/* Core dot */}
+      <span
+        className={cn(
+          'relative inline-flex h-2 w-2 rounded-full',
+          config.dotColor,
+          config.animate && 'animate-pulse-dot',
+          config.glowClass
+        )}
+      />
+    </span>
+  )
+}

package/src/components/layout/bottom-bar.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { useStats } from '../../hooks/use-stats'
+import { formatCost } from '../../lib/format'
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../components/ui/tooltip'
+import { Zap } from 'lucide-react'
+
+interface BottomBarProps {
+  className?: string
+}
+
+export function BottomBar({ className }: BottomBarProps) {
+  const { data } = useStats()
+
+  return (
+    <footer
+      className={cn(
+        'flex h-8 items-center justify-between border-t border-af-surface-border/40 bg-af-bg-secondary/30 backdrop-blur-sm px-5',
+        className
+      )}
+    >
+      <div className="flex items-center gap-5 text-2xs font-body text-af-text-tertiary">
+        <span>
+          <span className="text-af-text-secondary tabular-nums">{data?.completedToday ?? 0}</span> completed
+        </span>
+        <span>
+          <span className="text-af-text-secondary tabular-nums">{data?.availableCapacity ?? 0}</span> capacity
+        </span>
+        {data?.totalCostToday != null && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="cursor-default">
+                <span className="text-af-accent font-mono tabular-nums">{formatCost(data.totalCostToday)}</span> today
+                {data.totalCostAllTime != null && data.totalCostAllTime !== data.totalCostToday && (
+                  <span className="text-af-text-tertiary"> · <span className="font-mono tabular-nums">{formatCost(data.totalCostAllTime)}</span> total</span>
+                )}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              Cost from {data.sessionCountToday ?? 0} session{(data.sessionCountToday ?? 0) !== 1 ? 's' : ''} updated today (UTC)
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+
+      <a
+        href="https://github.com/renseiai/agentfactory"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center gap-1 text-2xs font-body text-af-text-tertiary hover:text-af-text-secondary transition-colors"
+      >
+        <Zap className="h-2.5 w-2.5" />
+        AgentFactory
+      </a>
+    </footer>
+  )
+}

package/src/components/layout/shell.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { Sidebar } from './sidebar'
+import { TopBar } from './top-bar'
+import { BottomBar } from './bottom-bar'
+import { Sheet, SheetContent, SheetTrigger, SheetTitle } from '../../components/ui/sheet'
+import { Button } from '../../components/ui/button'
+import { TooltipProvider } from '../../components/ui/tooltip'
+import { Menu } from 'lucide-react'
+import { Logo } from '../../components/shared/logo'
+
+interface DashboardShellProps {
+  children: React.ReactNode
+  currentPath?: string
+  className?: string
+}
+
+export function DashboardShell({ children, currentPath = '/', className }: DashboardShellProps) {
+  return (
+    <TooltipProvider>
+      <div className={cn('flex h-screen bg-af-bg-primary overflow-hidden', className)}>
+        {/* Background effects layer */}
+        <div className="fixed inset-0 mesh-gradient pointer-events-none" />
+        <div className="fixed inset-0 grid-bg pointer-events-none opacity-40" />
+
+        {/* Desktop sidebar */}
+        <div className="hidden md:block relative z-10">
+          <Sidebar currentPath={currentPath} />
+        </div>
+
+        {/* Main content area */}
+        <div className="flex flex-1 flex-col overflow-hidden relative z-10">
+          {/* Mobile header with hamburger */}
+          <div className="flex items-center gap-3 border-b border-af-surface-border bg-af-bg-secondary/80 backdrop-blur-md px-4 py-2.5 md:hidden">
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8 text-af-text-secondary hover:text-af-text-primary">
+                  <Menu className="h-4 w-4" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="w-60 p-0 border-af-surface-border bg-af-bg-secondary">
+                <SheetTitle className="sr-only">Navigation</SheetTitle>
+                <Sidebar currentPath={currentPath} />
+              </SheetContent>
+            </Sheet>
+            <Logo size={20} />
+            <span className="text-sm font-display font-semibold text-af-text-primary tracking-tight">
+              AgentFactory
+            </span>
+          </div>
+
+          <TopBar className="hidden md:flex" />
+
+          <main className="flex-1 overflow-auto">
+            {children}
+          </main>
+
+          <BottomBar />
+        </div>
+      </div>
+    </TooltipProvider>
+  )
+}

package/src/components/layout/sidebar.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { Logo } from '../../components/shared/logo'
+import { Separator } from '../../components/ui/separator'
+import { LayoutDashboard, Columns3, Activity, Settings, ExternalLink } from 'lucide-react'
+
+export interface NavItem {
+  label: string
+  href: string
+  icon: React.ReactNode
+}
+
+const defaultNavItems: NavItem[] = [
+  { label: 'Fleet', href: '/', icon: <LayoutDashboard className="h-4 w-4" /> },
+  { label: 'Pipeline', href: '/pipeline', icon: <Columns3 className="h-4 w-4" /> },
+  { label: 'Sessions', href: '/sessions', icon: <Activity className="h-4 w-4" /> },
+  { label: 'Settings', href: '/settings', icon: <Settings className="h-4 w-4" /> },
+]
+
+interface SidebarProps {
+  currentPath?: string
+  navItems?: NavItem[]
+  className?: string
+}
+
+export function Sidebar({ currentPath = '/', navItems = defaultNavItems, className }: SidebarProps) {
+  const isActive = (href: string) => {
+    if (href === '/') return currentPath === '/'
+    return currentPath.startsWith(href)
+  }
+
+  return (
+    <aside
+      className={cn(
+        'flex h-full w-[220px] flex-col border-r border-af-surface-border/60 bg-af-bg-secondary/60 backdrop-blur-xl',
+        className
+      )}
+    >
+      {/* Logo area */}
+      <div className="flex items-center gap-2.5 px-5 py-4">
+        <Logo size={22} />
+        <span className="font-display text-sm font-bold text-af-text-primary tracking-tight">
+          AgentFactory
+        </span>
+      </div>
+
+      <div className="px-5">
+        <Separator className="bg-af-surface-border/60" />
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 space-y-0.5 px-3 py-4">
+        {navItems.map((item) => {
+          const active = isActive(item.href)
+          return (
+            <a
+              key={item.href}
+              href={item.href}
+              className={cn(
+                'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-body transition-all duration-200',
+                active
+                  ? 'nav-active-indicator bg-af-surface/80 text-af-text-primary font-medium'
+                  : 'text-af-text-secondary hover:bg-af-surface/40 hover:text-af-text-primary'
+              )}
+            >
+              <span className={cn(
+                'transition-colors duration-200',
+                active ? 'text-af-accent' : ''
+              )}>
+                {item.icon}
+              </span>
+              {item.label}
+            </a>
+          )
+        })}
+      </nav>
+
+      <div className="px-5">
+        <Separator className="bg-af-surface-border/60" />
+      </div>
+
+      {/* Footer */}
+      <div className="px-5 py-3">
+        <a
+          href="https://github.com/renseiai/agentfactory"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group flex items-center gap-1.5 text-2xs font-body text-af-text-tertiary hover:text-af-text-secondary transition-colors"
+        >
+          AgentFactory
+          <ExternalLink className="h-2.5 w-2.5 opacity-0 group-hover:opacity-100 transition-opacity" />
+        </a>
+      </div>
+    </aside>
+  )
+}

package/src/components/layout/top-bar.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { StatusDot } from '../../components/fleet/status-dot'
+import { useStats } from '../../hooks/use-stats'
+import { Skeleton } from '../../components/ui/skeleton'
+import { Radio } from 'lucide-react'
+
+interface TopBarProps {
+  className?: string
+}
+
+export function TopBar({ className }: TopBarProps) {
+  const { data, isLoading } = useStats()
+
+  return (
+    <header
+      className={cn(
+        'flex h-11 items-center justify-between border-b border-af-surface-border/50 bg-af-bg-secondary/40 backdrop-blur-md px-5',
+        className
+      )}
+    >
+      <div className="flex items-center gap-5">
+        {isLoading ? (
+          <>
+            <Skeleton className="h-4 w-28" />
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-4 w-20" />
+          </>
+        ) : (
+          <>
+            <div className="flex items-center gap-2">
+              <StatusDot status={data?.workersOnline ? 'working' : 'stopped'} showHeartbeat />
+              <span className="text-xs font-body text-af-text-secondary">
+                <span className="font-semibold text-af-text-primary tabular-nums">{data?.workersOnline ?? 0}</span>{' '}
+                {data?.workersOnline === 1 ? 'worker' : 'workers'}
+              </span>
+            </div>
+
+            <div className="h-3 w-px bg-af-surface-border" />
+
+            <span className="text-xs font-body text-af-text-secondary">
+              <span className="font-semibold text-af-teal tabular-nums">{data?.agentsWorking ?? 0}</span> active
+            </span>
+
+            <span className="text-xs font-body text-af-text-secondary">
+              <span className="font-semibold text-af-text-primary tabular-nums">{data?.queueDepth ?? 0}</span> queued
+            </span>
+          </>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2 text-xs font-body text-af-text-tertiary">
+        {data?.timestamp && (
+          <>
+            <Radio className="h-3 w-3 text-af-teal animate-pulse-dot" />
+            <span>{new Date(data.timestamp).toLocaleTimeString()}</span>
+          </>
+        )}
+      </div>
+    </header>
+  )
+}

package/src/components/pipeline/pipeline-card.tsx

@@ -0,0 +1,65 @@
+import { cn } from '../../lib/utils'
+import { StatusDot } from '../../components/fleet/status-dot'
+import { Badge } from '../../components/ui/badge'
+import { formatDuration } from '../../lib/format'
+import { getWorkTypeConfig } from '../../lib/work-type-config'
+import type { PublicSessionResponse } from '../../types/api'
+import { Clock } from 'lucide-react'
+
+interface PipelineCardProps {
+  session: PublicSessionResponse
+  className?: string
+  onSelect?: (sessionId: string) => void
+}
+
+export function PipelineCard({ session, className, onSelect }: PipelineCardProps) {
+  const workTypeConfig = getWorkTypeConfig(session.workType)
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border border-af-surface-border/40 bg-af-surface/50 p-3 transition-all duration-200 hover-glow',
+        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-center gap-2">
+        <StatusDot status={session.status} />
+        <span className={cn(
+          'text-xs font-mono font-medium truncate',
+          onSelect
+            ? 'text-af-teal hover:underline underline-offset-2'
+            : 'text-af-text-primary'
+        )}>
+          {session.identifier}
+        </span>
+      </div>
+      <div className="mt-2.5 flex items-center justify-between">
+        <Badge
+          variant="outline"
+          className={cn(
+            'text-2xs border',
+            workTypeConfig.bgColor, workTypeConfig.color, workTypeConfig.borderColor
+          )}
+        >
+          {workTypeConfig.label}
+        </Badge>
+        <span className="flex items-center gap-1 text-2xs font-body text-af-text-tertiary tabular-nums">
+          <Clock className="h-2.5 w-2.5" />
+          {formatDuration(session.duration)}
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/components/pipeline/pipeline-column.tsx

@@ -0,0 +1,44 @@
+import { cn } from '../../lib/utils'
+import { ScrollArea } from '../../components/ui/scroll-area'
+import { PipelineCard } from './pipeline-card'
+import type { PublicSessionResponse } from '../../types/api'
+
+interface PipelineColumnProps {
+  title: string
+  sessions: PublicSessionResponse[]
+  count: number
+  accentClass?: string
+  className?: string
+  onSessionSelect?: (sessionId: string) => void
+}
+
+export function PipelineColumn({ title, sessions, count, accentClass, className, onSessionSelect }: PipelineColumnProps) {
+  return (
+    <div
+      className={cn(
+        'flex w-72 shrink-0 flex-col rounded-xl border border-af-surface-border/40 bg-af-bg-secondary/50 backdrop-blur-sm',
+        accentClass,
+        className
+      )}
+    >
+      {/* Column header */}
+      <div className="flex items-center justify-between px-3.5 py-3">
+        <span className="text-xs font-display font-semibold text-af-text-primary tracking-tight">
+          {title}
+        </span>
+        <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-af-surface/60 px-1.5 text-2xs font-body font-medium tabular-nums text-af-text-secondary">
+          {count}
+        </span>
+      </div>
+
+      {/* Card list */}
+      <ScrollArea className="flex-1 px-2 pb-2">
+        <div className="space-y-2">
+          {sessions.map((session) => (
+            <PipelineCard key={session.id} session={session} onSelect={onSessionSelect} />
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}

package/src/components/pipeline/pipeline-view.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { useSessions } from '../../hooks/use-sessions'
+import { PipelineColumn } from './pipeline-column'
+import { EmptyState } from '../../components/shared/empty-state'
+import { Skeleton } from '../../components/ui/skeleton'
+import type { PublicSessionResponse, SessionStatus } from '../../types/api'
+
+interface ColumnDef {
+  title: string
+  statuses: SessionStatus[]
+  accentClass: string
+}
+
+const columns: ColumnDef[] = [
+  { title: 'Backlog', statuses: ['queued', 'parked'], accentClass: 'column-accent column-accent-gray' },
+  { title: 'Started', statuses: ['working'], accentClass: 'column-accent column-accent-green' },
+  { title: 'Finished', statuses: ['completed'], accentClass: 'column-accent column-accent-blue' },
+  { title: 'Failed', statuses: ['failed'], accentClass: 'column-accent column-accent-red' },
+  { title: 'Stopped', statuses: ['stopped'], accentClass: 'column-accent column-accent-yellow' },
+]
+
+function groupByColumn(sessions: PublicSessionResponse[]) {
+  return columns.map((col) => ({
+    ...col,
+    sessions: sessions.filter((s) => col.statuses.includes(s.status)),
+  }))
+}
+
+interface PipelineViewProps {
+  className?: string
+  onSessionSelect?: (sessionId: string) => void
+}
+
+export function PipelineView({ className, onSessionSelect }: PipelineViewProps) {
+  const { data, isLoading } = useSessions()
+  const sessions = data?.sessions ?? []
+
+  return (
+    <div className={cn('p-6', className)}>
+      <div className="mb-5 flex items-center gap-3">
+        <h2 className="font-display text-lg font-bold text-af-text-primary tracking-tight">
+          Pipeline
+        </h2>
+        {!isLoading && (
+          <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>
+
+      {isLoading ? (
+        <div className="flex gap-3 overflow-x-auto pb-2">
+          {columns.map((col) => (
+            <Skeleton key={col.title} className="h-96 w-72 shrink-0 rounded-xl" />
+          ))}
+        </div>
+      ) : sessions.length === 0 ? (
+        <EmptyState
+          title="No pipeline data"
+          description="Sessions will populate the pipeline as agents work on issues."
+        />
+      ) : (
+        <div className="flex gap-3 overflow-x-auto pb-2">
+          {groupByColumn(sessions).map((col, i) => (
+            <div
+              key={col.title}
+              className="animate-fade-in"
+              style={{ animationDelay: `${i * 60}ms` }}
+            >
+              <PipelineColumn
+                title={col.title}
+                sessions={col.sessions}
+                count={col.sessions.length}
+                accentClass={col.accentClass}
+                onSessionSelect={onSessionSelect}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}