@renseiai/agentfactory-dashboard 0.8.17 → 0.8.19

package/package.json

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

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

@@ -1,16 +1,40 @@
 'use client'
 
+import { useState, useCallback } from 'react'
 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 { Button } from '../../components/ui/button'
 import { formatCost } from '../../lib/format'
-import { Router, Activity, TrendingUp, CheckCircle2, XCircle, HelpCircle } from 'lucide-react'
+import { Router, Activity, TrendingUp, CheckCircle2, XCircle, HelpCircle, ChevronLeft, ChevronRight } from 'lucide-react'
 
 interface RoutingMetricsProps {
   className?: string
 }
 
+const TIME_RANGES = [
+  { label: 'All', value: '' },
+  { label: '1h', value: '1h' },
+  { label: '6h', value: '6h' },
+  { label: '24h', value: '24h' },
+  { label: '7d', value: '7d' },
+] as const
+
+type TimeRangeValue = (typeof TIME_RANGES)[number]['value']
+
+function getTimeRangeFrom(value: TimeRangeValue): string | undefined {
+  if (!value) return undefined
+  const now = Date.now()
+  const ms: Record<string, number> = {
+    '1h': 60 * 60 * 1000,
+    '6h': 6 * 60 * 60 * 1000,
+    '24h': 24 * 60 * 60 * 1000,
+    '7d': 7 * 24 * 60 * 60 * 1000,
+  }
+  return new Date(now - ms[value]!).toISOString()
+}
+
 function confidenceColor(confidence: number): string {
   if (confidence > 0.7) return 'text-emerald-400'
   if (confidence >= 0.3) return 'text-amber-400'
@@ -24,7 +48,34 @@ function confidenceBg(confidence: number): string {
 }
 
 export function RoutingMetrics({ className }: RoutingMetricsProps) {
-  const { data, isLoading } = useRoutingMetrics()
+  const [timeRange, setTimeRange] = useState<TimeRangeValue>('')
+  const [cursor, setCursor] = useState<string | undefined>(undefined)
+  const [cursorStack, setCursorStack] = useState<string[]>([])
+
+  const from = getTimeRangeFrom(timeRange)
+  const { data, isLoading } = useRoutingMetrics({ from, cursor })
+
+  const handleTimeRangeChange = useCallback((value: TimeRangeValue) => {
+    setTimeRange(value)
+    setCursor(undefined)
+    setCursorStack([])
+  }, [])
+
+  const handleNextPage = useCallback(() => {
+    if (data?.nextCursor) {
+      setCursorStack((prev) => [...prev, cursor ?? ''])
+      setCursor(data.nextCursor)
+    }
+  }, [data?.nextCursor, cursor])
+
+  const handlePrevPage = useCallback(() => {
+    setCursorStack((prev) => {
+      const next = [...prev]
+      const prevCursor = next.pop()
+      setCursor(prevCursor || undefined)
+      return next
+    })
+  }, [])
 
   const routingDisabled = !isLoading && (!data || !data.summary.routingEnabled)
 
@@ -162,16 +213,58 @@ export function RoutingMetrics({ className }: RoutingMetricsProps) {
 
       {/* 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 className="mb-4 flex items-center justify-between gap-3">
+          <div className="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">
+                showing {data.recentDecisions.length}{timeRange ? ` from last ${timeRange}` : ''}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            {/* Time-range selector */}
+            <div className="flex items-center rounded-lg border border-af-surface-border/50 bg-af-surface/20 p-0.5">
+              {TIME_RANGES.map((range) => (
+                <button
+                  key={range.value}
+                  onClick={() => handleTimeRangeChange(range.value)}
+                  className={cn(
+                    'rounded-md px-2.5 py-1 text-2xs font-body transition-colors',
+                    timeRange === range.value
+                      ? 'bg-af-surface/60 text-af-text-primary font-medium'
+                      : 'text-af-text-tertiary hover:text-af-text-secondary',
+                  )}
+                >
+                  {range.label}
+                </button>
+              ))}
+            </div>
+            {/* Pagination controls */}
+            <div className="flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={handlePrevPage}
+                disabled={cursorStack.length === 0}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={handleNextPage}
+                disabled={!data?.nextCursor}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
         </div>
 
         {isLoading ? (

package/src/components/pipeline/deprecation-banner.tsx

@@ -0,0 +1,57 @@
+import { cn } from '../../lib/utils'
+
+interface DeprecationBannerProps {
+  message?: string
+  ctaHref?: string
+  onDismiss?: () => void
+  className?: string
+}
+
+export function DeprecationBanner({
+  message = 'This pipeline view is deprecated and will be removed in a future version.',
+  ctaHref,
+  onDismiss,
+  className,
+}: DeprecationBannerProps) {
+  return (
+    <div
+      role="alert"
+      className={cn(
+        'flex items-center justify-between gap-3 rounded-lg border border-yellow-500/30 bg-yellow-500/10 px-4 py-3 text-sm text-yellow-200',
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <svg
+          className="h-4 w-4 shrink-0 text-yellow-400"
+          viewBox="0 0 16 16"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path d="M8 1a7 7 0 100 14A7 7 0 008 1zm-.75 3.75a.75.75 0 011.5 0v3.5a.75.75 0 01-1.5 0v-3.5zM8 11a1 1 0 100 2 1 1 0 000-2z" />
+        </svg>
+        <span>{message}</span>
+        {ctaHref && (
+          <a
+            href={ctaHref}
+            className="font-medium text-yellow-300 underline underline-offset-2 hover:text-yellow-100"
+          >
+            Learn more
+          </a>
+        )}
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="shrink-0 rounded p-1 text-yellow-400 hover:bg-yellow-500/20 hover:text-yellow-200"
+          aria-label="Dismiss deprecation notice"
+        >
+          <svg className="h-4 w-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z" />
+          </svg>
+        </button>
+      )}
+    </div>
+  )
+}

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

@@ -10,19 +10,23 @@ interface PipelineCardProps {
   session: PublicSessionResponse
   className?: string
   onSelect?: (sessionId: string) => void
+  readOnly?: boolean
 }
 
-export function PipelineCard({ session, className, onSelect }: PipelineCardProps) {
+export function PipelineCard({ session, className, onSelect, readOnly }: PipelineCardProps) {
   const workTypeConfig = getWorkTypeConfig(session.workType)
+  const isInteractive = onSelect && !readOnly
 
   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',
+        'rounded-lg border border-af-surface-border/40 bg-af-surface/50 p-3 transition-all duration-200',
+        !readOnly && 'hover-glow',
+        isInteractive && 'cursor-pointer',
+        readOnly && 'pointer-events-none',
         className
       )}
-      {...(onSelect && {
+      {...(isInteractive && {
         role: 'button',
         tabIndex: 0,
         onClick: () => onSelect(session.id),

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

@@ -10,9 +10,10 @@ interface PipelineColumnProps {
   accentClass?: string
   className?: string
   onSessionSelect?: (sessionId: string) => void
+  readOnly?: boolean
 }
 
-export function PipelineColumn({ title, sessions, count, accentClass, className, onSessionSelect }: PipelineColumnProps) {
+export function PipelineColumn({ title, sessions, count, accentClass, className, onSessionSelect, readOnly }: PipelineColumnProps) {
   return (
     <div
       className={cn(
@@ -35,7 +36,7 @@ export function PipelineColumn({ title, sessions, count, accentClass, className,
       <ScrollArea className="flex-1 px-2 pb-2">
         <div className="space-y-2">
           {sessions.map((session) => (
-            <PipelineCard key={session.id} session={session} onSelect={onSessionSelect} />
+            <PipelineCard key={session.id} session={session} onSelect={onSessionSelect} readOnly={readOnly} />
           ))}
         </div>
       </ScrollArea>

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

@@ -31,9 +31,11 @@ function groupByColumn(sessions: PublicSessionResponse[]) {
 interface PipelineViewProps {
   className?: string
   onSessionSelect?: (sessionId: string) => void
+  /** When true, renders pipeline in a muted, non-interactive state */
+  readOnly?: boolean
 }
 
-export function PipelineView({ className, onSessionSelect }: PipelineViewProps) {
+export function PipelineView({ className, onSessionSelect, readOnly }: PipelineViewProps) {
   const { data, isLoading } = useSessions()
   const sessions = data?.sessions ?? []
 
@@ -62,7 +64,7 @@ export function PipelineView({ className, onSessionSelect }: PipelineViewProps)
           description="Sessions will populate the pipeline as agents work on issues."
         />
       ) : (
-        <div className="flex gap-3 overflow-x-auto pb-2">
+        <div className={cn('flex gap-3 overflow-x-auto pb-2', readOnly && 'opacity-60')}>
           {groupByColumn(sessions).map((col, i) => (
             <div
               key={col.title}
@@ -74,7 +76,8 @@ export function PipelineView({ className, onSessionSelect }: PipelineViewProps)
                 sessions={col.sessions}
                 count={col.sessions.length}
                 accentClass={col.accentClass}
-                onSessionSelect={onSessionSelect}
+                onSessionSelect={readOnly ? undefined : onSessionSelect}
+                readOnly={readOnly}
               />
             </div>
           ))}

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

@@ -5,8 +5,29 @@ 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, {
+export interface UseRoutingMetricsOptions {
+  from?: string
+  to?: string
+  limit?: number
+  cursor?: string
+  refreshInterval?: number
+}
+
+function buildUrl(opts: UseRoutingMetricsOptions): string {
+  const params = new URLSearchParams()
+  if (opts.from) params.set('from', opts.from)
+  if (opts.to) params.set('to', opts.to)
+  if (opts.limit) params.set('limit', String(opts.limit))
+  if (opts.cursor) params.set('cursor', opts.cursor)
+  const qs = params.toString()
+  return qs ? `/api/public/routing-metrics?${qs}` : '/api/public/routing-metrics'
+}
+
+export function useRoutingMetrics(opts: UseRoutingMetricsOptions = {}) {
+  const { refreshInterval = 10000, ...queryOpts } = opts
+  const url = buildUrl(queryOpts)
+
+  return useSWR<PublicRoutingMetricsResponse>(url, fetcher, {
     refreshInterval,
     dedupingInterval: 5000,
   })

package/src/index.ts

@@ -7,6 +7,7 @@ export { BottomBar } from './components/layout/bottom-bar'
 // Pages
 export { DashboardPage } from './pages/dashboard-page'
 export { PipelinePage } from './pages/pipeline-page'
+export type { PipelinePageProps } from './pages/pipeline-page'
 export { SessionPage } from './pages/session-page'
 export { SettingsPage } from './pages/settings-page'
 
@@ -22,6 +23,7 @@ export { ProviderIcon } from './components/fleet/provider-icon'
 export { PipelineView } from './components/pipeline/pipeline-view'
 export { PipelineColumn } from './components/pipeline/pipeline-column'
 export { PipelineCard } from './components/pipeline/pipeline-card'
+export { DeprecationBanner } from './components/pipeline/deprecation-banner'
 
 // Session components
 export { SessionList } from './components/sessions/session-list'

package/src/pages/pipeline-page.tsx

@@ -1,11 +1,43 @@
 'use client'
 
+import { useState } from 'react'
 import { PipelineView } from '../components/pipeline/pipeline-view'
+import { DeprecationBanner } from '../components/pipeline/deprecation-banner'
 
-interface PipelinePageProps {
+export interface PipelinePageProps {
   onSessionSelect?: (sessionId: string) => void
+  /** When true, disables all interactive elements (drag, edit, status changes) */
+  readOnly?: boolean
+  /** When true, shows a deprecation banner */
+  deprecated?: boolean
+  /** Custom deprecation message */
+  deprecationMessage?: string
+  /** CTA link in the deprecation banner */
+  deprecationCtaHref?: string
 }
 
-export function PipelinePage({ onSessionSelect }: PipelinePageProps) {
-  return <PipelineView onSessionSelect={onSessionSelect} />
+export function PipelinePage({
+  onSessionSelect,
+  readOnly,
+  deprecated,
+  deprecationMessage,
+  deprecationCtaHref,
+}: PipelinePageProps) {
+  const [bannerDismissed, setBannerDismissed] = useState(false)
+
+  return (
+    <div>
+      {deprecated && !bannerDismissed && (
+        <DeprecationBanner
+          message={deprecationMessage}
+          ctaHref={deprecationCtaHref}
+          onDismiss={() => setBannerDismissed(true)}
+        />
+      )}
+      <PipelineView
+        onSessionSelect={readOnly ? undefined : onSessionSelect}
+        readOnly={readOnly}
+      />
+    </div>
+  )
 }

package/src/types/api.ts

@@ -78,6 +78,26 @@ export interface RoutingSummaryResponse {
 export interface PublicRoutingMetricsResponse {
   posteriors: RoutingPosteriorResponse[]
   recentDecisions: RoutingDecisionResponse[]
+  nextCursor?: string
   summary: RoutingSummaryResponse
   timestamp: string
 }
+
+export type WorkflowPhase = 'development' | 'qa' | 'refinement' | 'acceptance'
+export type EscalationStrategy = 'normal' | 'context-enriched' | 'decompose' | 'escalate-human'
+
+export interface PhaseMetricsDetail {
+  avgCycleTimeMs: number
+  avgCostUsd: number
+  avgAttempts: number
+  totalRecords: number
+}
+
+export interface PhaseMetricsResponse {
+  timeRange: '7d' | '30d' | '90d'
+  phases: Record<WorkflowPhase, PhaseMetricsDetail>
+  reworkRate: number
+  escalationDistribution: Record<EscalationStrategy, number>
+  issueCount: number
+  timestamp: string
+}