@renseiai/agentfactory-dashboard 0.8.8 → 0.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@renseiai/agentfactory-dashboard",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "Premium dashboard UI components for AgentFactory",
   "author": "Rensei AI (https://rensei.ai)",
   "license": "MIT",

package/src/components/fleet/routing-metrics.tsx

@@ -0,0 +1,233 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { useRoutingMetrics } from '../../hooks/use-routing-metrics'
+import { EmptyState } from '../../components/shared/empty-state'
+import { Skeleton } from '../../components/ui/skeleton'
+import { formatCost } from '../../lib/format'
+import { Router, Activity, TrendingUp, CheckCircle2, XCircle, HelpCircle } from 'lucide-react'
+
+interface RoutingMetricsProps {
+  className?: string
+}
+
+function confidenceColor(confidence: number): string {
+  if (confidence > 0.7) return 'text-emerald-400'
+  if (confidence >= 0.3) return 'text-amber-400'
+  return 'text-red-400'
+}
+
+function confidenceBg(confidence: number): string {
+  if (confidence > 0.7) return 'bg-emerald-500/10 border-emerald-500/20'
+  if (confidence >= 0.3) return 'bg-amber-500/10 border-amber-500/20'
+  return 'bg-red-500/10 border-red-500/20'
+}
+
+export function RoutingMetrics({ className }: RoutingMetricsProps) {
+  const { data, isLoading } = useRoutingMetrics()
+
+  const routingDisabled = !isLoading && (!data || !data.summary.routingEnabled)
+
+  if (routingDisabled) {
+    return (
+      <div className={cn('p-6', className)}>
+        <EmptyState
+          title="Routing not enabled"
+          description="Multi-armed bandit routing will appear here once providers begin receiving observations."
+          icon={<Router className="h-8 w-8" />}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('space-y-8 p-6', className)}>
+      {/* Section: Summary */}
+      <div>
+        <div className="mb-4 flex items-center gap-3">
+          <h2 className="font-display text-lg font-bold text-af-text-primary tracking-tight">
+            Routing Analytics
+          </h2>
+          {!isLoading && data && (
+            <span className="text-2xs font-body text-af-text-tertiary tabular-nums">
+              {data.summary.totalObservations} observation{data.summary.totalObservations !== 1 ? 's' : ''} total
+            </span>
+          )}
+        </div>
+
+        {isLoading ? (
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Skeleton key={i} className="h-[72px] rounded-xl" />
+            ))}
+          </div>
+        ) : data ? (
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <div className="rounded-xl border border-af-surface-border/50 bg-af-surface/40 p-4">
+              <p className="text-2xs font-body text-af-text-tertiary">Total Observations</p>
+              <p className="mt-1 font-display text-xl font-bold text-af-text-primary tabular-nums">
+                {data.summary.totalObservations}
+              </p>
+            </div>
+            <div className="rounded-xl border border-af-surface-border/50 bg-af-surface/40 p-4">
+              <p className="text-2xs font-body text-af-text-tertiary">Avg Confidence</p>
+              <p className={cn('mt-1 font-display text-xl font-bold tabular-nums', confidenceColor(data.summary.avgConfidence))}>
+                {(data.summary.avgConfidence * 100).toFixed(1)}%
+              </p>
+            </div>
+            <div className="rounded-xl border border-af-surface-border/50 bg-af-surface/40 p-4">
+              <p className="text-2xs font-body text-af-text-tertiary">Exploration Rate</p>
+              <p className="mt-1 font-display text-xl font-bold text-af-text-primary tabular-nums">
+                {(data.summary.explorationRate * 100).toFixed(0)}%
+              </p>
+            </div>
+            <div className="rounded-xl border border-af-surface-border/50 bg-af-surface/40 p-4">
+              <p className="text-2xs font-body text-af-text-tertiary">Providers Tracked</p>
+              <p className="mt-1 font-display text-xl font-bold text-af-text-primary tabular-nums">
+                {data.posteriors.length}
+              </p>
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      {/* Section: Provider Performance Matrix */}
+      <div>
+        <div className="mb-4 flex items-center gap-3">
+          <TrendingUp className="h-4 w-4 text-af-text-tertiary" />
+          <h2 className="font-display text-lg font-bold text-af-text-primary tracking-tight">
+            Provider Performance
+          </h2>
+        </div>
+
+        {isLoading ? (
+          <Skeleton className="h-[200px] rounded-xl" />
+        ) : data && data.posteriors.length > 0 ? (
+          <div className="overflow-x-auto rounded-xl border border-af-surface-border/50 bg-af-surface/40">
+            <table className="w-full text-left">
+              <thead>
+                <tr className="border-b border-af-surface-border/50">
+                  <th className="px-4 py-3 text-2xs font-body font-medium text-af-text-tertiary">Provider</th>
+                  <th className="px-4 py-3 text-2xs font-body font-medium text-af-text-tertiary">Work Type</th>
+                  <th className="px-4 py-3 text-2xs font-body font-medium text-af-text-tertiary text-right">Expected Reward</th>
+                  <th className="px-4 py-3 text-2xs font-body font-medium text-af-text-tertiary text-right">Confidence</th>
+                  <th className="px-4 py-3 text-2xs font-body font-medium text-af-text-tertiary text-right">Observations</th>
+                  <th className="px-4 py-3 text-2xs font-body font-medium text-af-text-tertiary text-right">Avg Cost</th>
+                  <th className="px-4 py-3 text-2xs font-body font-medium text-af-text-tertiary text-right">Alpha / Beta</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.posteriors.map((p) => (
+                  <tr
+                    key={`${p.provider}-${p.workType}`}
+                    className="border-b border-af-surface-border/30 last:border-b-0 hover:bg-af-surface/60 transition-colors"
+                  >
+                    <td className="px-4 py-3 text-xs font-body font-medium text-af-text-primary">{p.provider}</td>
+                    <td className="px-4 py-3 text-xs font-body text-af-text-secondary">{p.workType}</td>
+                    <td className="px-4 py-3 text-xs font-body text-af-text-primary text-right tabular-nums">
+                      {(p.expectedReward * 100).toFixed(1)}%
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      <span
+                        className={cn(
+                          'inline-block rounded-md border px-2 py-0.5 text-xs font-body tabular-nums',
+                          confidenceBg(p.confidence),
+                          confidenceColor(p.confidence),
+                        )}
+                      >
+                        {(p.confidence * 100).toFixed(1)}%
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-xs font-body text-af-text-secondary text-right tabular-nums">
+                      {p.totalObservations}
+                    </td>
+                    <td className="px-4 py-3 text-xs font-body text-af-text-secondary text-right tabular-nums">
+                      {formatCost(p.avgCostUsd)}
+                    </td>
+                    <td className="px-4 py-3 text-xs font-body text-af-text-tertiary text-right tabular-nums">
+                      {p.alpha.toFixed(1)} / {p.beta.toFixed(1)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <EmptyState
+            title="No provider data"
+            description="Posterior distributions will appear once routing observations are recorded."
+          />
+        )}
+      </div>
+
+      {/* Section: Recent Routing Decisions */}
+      <div>
+        <div className="mb-4 flex items-center gap-3">
+          <Activity className="h-4 w-4 text-af-text-tertiary" />
+          <h2 className="font-display text-lg font-bold text-af-text-primary tracking-tight">
+            Recent Decisions
+          </h2>
+          {!isLoading && data && (
+            <span className="text-2xs font-body text-af-text-tertiary tabular-nums">
+              last {data.recentDecisions.length}
+            </span>
+          )}
+        </div>
+
+        {isLoading ? (
+          <div className="space-y-2">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <Skeleton key={i} className="h-[52px] rounded-xl" />
+            ))}
+          </div>
+        ) : data && data.recentDecisions.length > 0 ? (
+          <div className="space-y-2">
+            {data.recentDecisions.map((d, i) => (
+              <div
+                key={`${d.timestamp}-${i}`}
+                className="flex items-center gap-4 rounded-xl border border-af-surface-border/50 bg-af-surface/40 px-4 py-3"
+              >
+                <div className="flex-shrink-0">
+                  {d.taskCompleted ? (
+                    <CheckCircle2 className="h-4 w-4 text-emerald-400" />
+                  ) : d.reward > 0 ? (
+                    <HelpCircle className="h-4 w-4 text-amber-400" />
+                  ) : (
+                    <XCircle className="h-4 w-4 text-red-400" />
+                  )}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-body font-medium text-af-text-primary">{d.provider}</span>
+                    <span className="text-2xs font-body text-af-text-tertiary">{d.workType}</span>
+                    {d.explorationReason && (
+                      <span className="rounded-full bg-af-surface/60 px-1.5 py-0.5 text-2xs font-body text-af-text-tertiary">
+                        {d.explorationReason}
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center gap-4 flex-shrink-0">
+                  <span className={cn('text-xs font-body tabular-nums', confidenceColor(d.confidence))}>
+                    {(d.confidence * 100).toFixed(0)}%
+                  </span>
+                  <span className="text-xs font-body text-af-text-secondary tabular-nums">
+                    reward {d.reward.toFixed(2)}
+                  </span>
+                  <span className="text-2xs font-body text-af-text-tertiary tabular-nums">
+                    {new Date(d.timestamp).toLocaleTimeString()}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <EmptyState
+            title="No recent decisions"
+            description="Routing decisions will appear here as agents complete tasks."
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/src/hooks/use-routing-metrics.ts

@@ -0,0 +1,13 @@
+'use client'
+
+import useSWR from 'swr'
+import type { PublicRoutingMetricsResponse } from '../types/api'
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json())
+
+export function useRoutingMetrics(refreshInterval = 10000) {
+  return useSWR<PublicRoutingMetricsResponse>('/api/public/routing-metrics', fetcher, {
+    refreshInterval,
+    dedupingInterval: 5000,
+  })
+}

package/src/index.ts

@@ -12,6 +12,7 @@ export { SettingsPage } from './pages/settings-page'
 
 // Fleet components
 export { FleetOverview } from './components/fleet/fleet-overview'
+export { RoutingMetrics } from './components/fleet/routing-metrics'
 export { AgentCard } from './components/fleet/agent-card'
 export { StatCard } from './components/fleet/stat-card'
 export { StatusDot } from './components/fleet/status-dot'
@@ -59,6 +60,7 @@ export {
 export { useStats } from './hooks/use-stats'
 export { useSessions } from './hooks/use-sessions'
 export { useWorkers } from './hooks/use-workers'
+export { useRoutingMetrics } from './hooks/use-routing-metrics'
 
 // Utilities
 export { cn } from './lib/utils'
@@ -75,6 +77,10 @@ export type {
   WorkerResponse,
   WorkersListResponse,
   PipelineStatus,
+  PublicRoutingMetricsResponse,
+  RoutingPosteriorResponse,
+  RoutingDecisionResponse,
+  RoutingSummaryResponse,
 } from './types/api'
 export type { WorkTypeConfig } from './lib/work-type-config'
 export type { StatusConfig } from './lib/status-config'

package/src/types/api.ts

@@ -46,3 +46,38 @@ export interface WorkersListResponse {
 }
 
 export type PipelineStatus = 'backlog' | 'started' | 'finished' | 'delivered' | 'accepted'
+
+export interface RoutingPosteriorResponse {
+  provider: string
+  workType: string
+  alpha: number
+  beta: number
+  expectedReward: number
+  confidence: number
+  totalObservations: number
+  avgCostUsd: number
+}
+
+export interface RoutingDecisionResponse {
+  timestamp: number
+  provider: string
+  workType: string
+  reward: number
+  taskCompleted: boolean
+  confidence: number
+  explorationReason?: string
+}
+
+export interface RoutingSummaryResponse {
+  totalObservations: number
+  routingEnabled: boolean
+  explorationRate: number
+  avgConfidence: number
+}
+
+export interface PublicRoutingMetricsResponse {
+  posteriors: RoutingPosteriorResponse[]
+  recentDecisions: RoutingDecisionResponse[]
+  summary: RoutingSummaryResponse
+  timestamp: string
+}