@supaku/agentfactory-dashboard 0.5.0

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

@@ -0,0 +1,40 @@
+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
+  accentColor?: string
+  className?: string
+}
+
+export function PipelineColumn({ title, sessions, count, accentColor, className }: PipelineColumnProps) {
+  return (
+    <div
+      className={cn(
+        'flex w-72 shrink-0 flex-col rounded-lg border border-af-surface-border bg-af-bg-secondary',
+        className
+      )}
+    >
+      <div className="flex items-center justify-between px-3 py-2.5">
+        <div className="flex items-center gap-2">
+          {accentColor && (
+            <span className={cn('h-2 w-2 rounded-full', accentColor)} />
+          )}
+          <span className="text-xs font-medium text-af-text-primary">{title}</span>
+        </div>
+        <span className="text-xs tabular-nums text-af-text-secondary">{count}</span>
+      </div>
+      <ScrollArea className="flex-1 px-2 pb-2">
+        <div className="space-y-2">
+          {sessions.map((session) => (
+            <PipelineCard key={session.id} session={session} />
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}

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

@@ -0,0 +1,75 @@
+'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[]
+  accentColor: string
+}
+
+const columns: ColumnDef[] = [
+  { title: 'Backlog', statuses: ['queued', 'parked'], accentColor: 'bg-af-text-secondary' },
+  { title: 'Started', statuses: ['working'], accentColor: 'bg-af-status-success' },
+  { title: 'Finished', statuses: ['completed'], accentColor: 'bg-blue-400' },
+  { title: 'Failed', statuses: ['failed'], accentColor: 'bg-af-status-error' },
+  { title: 'Stopped', statuses: ['stopped'], accentColor: 'bg-af-status-warning' },
+]
+
+function groupByColumn(sessions: PublicSessionResponse[]) {
+  return columns.map((col) => ({
+    ...col,
+    sessions: sessions.filter((s) => col.statuses.includes(s.status)),
+  }))
+}
+
+interface PipelineViewProps {
+  className?: string
+}
+
+export function PipelineView({ className }: PipelineViewProps) {
+  const { data, isLoading } = useSessions()
+  const sessions = data?.sessions ?? []
+
+  if (isLoading) {
+    return (
+      <div className={cn('flex gap-4 overflow-x-auto p-5', className)}>
+        {columns.map((col) => (
+          <Skeleton key={col.title} className="h-96 w-72 shrink-0 rounded-lg" />
+        ))}
+      </div>
+    )
+  }
+
+  if (sessions.length === 0) {
+    return (
+      <div className="p-5">
+        <EmptyState
+          title="No pipeline data"
+          description="Sessions will populate the pipeline as agents work on issues."
+        />
+      </div>
+    )
+  }
+
+  const grouped = groupByColumn(sessions)
+
+  return (
+    <div className={cn('flex gap-4 overflow-x-auto p-5', className)}>
+      {grouped.map((col) => (
+        <PipelineColumn
+          key={col.title}
+          title={col.title}
+          sessions={col.sessions}
+          count={col.sessions.length}
+          accentColor={col.accentColor}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/sessions/session-detail.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card'
+import { Badge } from '../../components/ui/badge'
+import { StatusDot } from '../../components/fleet/status-dot'
+import { SessionTimeline, type TimelineEvent } from './session-timeline'
+import { TokenChart } from './token-chart'
+import { formatDuration, formatCost } from '../../lib/format'
+import { getStatusConfig } from '../../lib/status-config'
+import { getWorkTypeConfig } from '../../lib/work-type-config'
+import type { PublicSessionResponse } from '../../types/api'
+import { ArrowLeft } from 'lucide-react'
+import { Button } from '../../components/ui/button'
+
+interface SessionDetailProps {
+  session: PublicSessionResponse
+  onBack?: () => void
+  className?: string
+}
+
+export function SessionDetail({ session, onBack, className }: SessionDetailProps) {
+  const statusConfig = getStatusConfig(session.status)
+  const workTypeConfig = getWorkTypeConfig(session.workType)
+
+  // Synthesize timeline from available data
+  const events: TimelineEvent[] = [
+    {
+      id: 'started',
+      label: 'Session started',
+      timestamp: session.startedAt,
+      type: 'info',
+    },
+  ]
+
+  if (session.status === 'completed') {
+    const endTime = new Date(new Date(session.startedAt).getTime() + session.duration * 1000)
+    events.push({
+      id: 'completed',
+      label: 'Session completed',
+      timestamp: endTime.toISOString(),
+      type: 'success',
+    })
+  } else if (session.status === 'failed') {
+    const endTime = new Date(new Date(session.startedAt).getTime() + session.duration * 1000)
+    events.push({
+      id: 'failed',
+      label: 'Session failed',
+      timestamp: endTime.toISOString(),
+      type: 'error',
+    })
+  }
+
+  return (
+    <div className={cn('space-y-4 p-5', className)}>
+      {onBack && (
+        <Button variant="ghost" size="sm" onClick={onBack} className="gap-1.5 text-af-text-secondary">
+          <ArrowLeft className="h-3.5 w-3.5" />
+          Back
+        </Button>
+      )}
+
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <StatusDot status={session.status} showHeartbeat={session.status === 'working'} />
+        <h1 className="text-lg font-semibold font-mono text-af-text-primary">
+          {session.identifier}
+        </h1>
+        <Badge
+          variant="outline"
+          className={cn('text-xs', statusConfig.bgColor, statusConfig.textColor, 'border-transparent')}
+        >
+          {statusConfig.label}
+        </Badge>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        {/* Left: Details */}
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>Session Details</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <dl className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+              <div>
+                <dt className="text-af-text-secondary">Work Type</dt>
+                <dd className="mt-0.5">
+                  <Badge
+                    variant="outline"
+                    className={cn(workTypeConfig.bgColor, workTypeConfig.color, 'border-transparent')}
+                  >
+                    {workTypeConfig.label}
+                  </Badge>
+                </dd>
+              </div>
+              <div>
+                <dt className="text-af-text-secondary">Duration</dt>
+                <dd className="mt-0.5 tabular-nums text-af-text-primary">{formatDuration(session.duration)}</dd>
+              </div>
+              <div>
+                <dt className="text-af-text-secondary">Cost</dt>
+                <dd className="mt-0.5 tabular-nums font-mono text-af-text-primary">
+                  {formatCost(session.costUsd)}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-af-text-secondary">Started</dt>
+                <dd className="mt-0.5 text-af-text-primary">
+                  {new Date(session.startedAt).toLocaleString()}
+                </dd>
+              </div>
+            </dl>
+
+            <div className="mt-6">
+              <TokenChart />
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Right: Timeline */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Timeline</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <SessionTimeline events={events} />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/src/components/sessions/session-list.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { useSessions } from '../../hooks/use-sessions'
+import { StatusDot } from '../../components/fleet/status-dot'
+import { Badge } from '../../components/ui/badge'
+import { Skeleton } from '../../components/ui/skeleton'
+import { EmptyState } from '../../components/shared/empty-state'
+import { formatDuration, formatCost, formatRelativeTime } from '../../lib/format'
+import { getWorkTypeConfig } from '../../lib/work-type-config'
+import { getStatusConfig } from '../../lib/status-config'
+
+interface SessionListProps {
+  onSelect?: (sessionId: string) => void
+  className?: string
+}
+
+export function SessionList({ onSelect, className }: SessionListProps) {
+  const { data, isLoading } = useSessions()
+  const sessions = data?.sessions ?? []
+
+  if (isLoading) {
+    return (
+      <div className={cn('space-y-2 p-5', className)}>
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Skeleton key={i} className="h-14 rounded-lg" />
+        ))}
+      </div>
+    )
+  }
+
+  if (sessions.length === 0) {
+    return (
+      <div className="p-5">
+        <EmptyState
+          title="No sessions"
+          description="Agent sessions will appear here once they start."
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('p-5', className)}>
+      <div className="rounded-lg border border-af-surface-border overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-af-surface-border bg-af-bg-secondary">
+              <th className="px-4 py-2.5 text-left text-xs font-medium text-af-text-secondary">Issue</th>
+              <th className="px-4 py-2.5 text-left text-xs font-medium text-af-text-secondary">Status</th>
+              <th className="px-4 py-2.5 text-left text-xs font-medium text-af-text-secondary">Type</th>
+              <th className="px-4 py-2.5 text-left text-xs font-medium text-af-text-secondary">Duration</th>
+              <th className="px-4 py-2.5 text-left text-xs font-medium text-af-text-secondary">Cost</th>
+              <th className="px-4 py-2.5 text-left text-xs font-medium text-af-text-secondary">Started</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sessions.map((session) => {
+              const statusConfig = getStatusConfig(session.status)
+              const workTypeConfig = getWorkTypeConfig(session.workType)
+              return (
+                <tr
+                  key={session.id}
+                  className="border-b border-af-surface-border last:border-0 hover:bg-af-surface/50 cursor-pointer transition-colors"
+                  onClick={() => onSelect?.(session.id)}
+                >
+                  <td className="px-4 py-2.5">
+                    <span className="font-mono text-sm text-af-text-primary">{session.identifier}</span>
+                  </td>
+                  <td className="px-4 py-2.5">
+                    <div className="flex items-center gap-1.5">
+                      <StatusDot status={session.status} />
+                      <span className={cn('text-xs', statusConfig.textColor)}>
+                        {statusConfig.label}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-2.5">
+                    <Badge
+                      variant="outline"
+                      className={cn('text-xs', workTypeConfig.bgColor, workTypeConfig.color, 'border-transparent')}
+                    >
+                      {workTypeConfig.label}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-2.5">
+                    <span className="text-xs text-af-text-secondary tabular-nums">
+                      {formatDuration(session.duration)}
+                    </span>
+                  </td>
+                  <td className="px-4 py-2.5">
+                    <span className="text-xs text-af-text-secondary tabular-nums font-mono">
+                      {formatCost(session.costUsd)}
+                    </span>
+                  </td>
+                  <td className="px-4 py-2.5">
+                    <span className="text-xs text-af-text-secondary">
+                      {formatRelativeTime(session.startedAt)}
+                    </span>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

package/src/components/sessions/session-timeline.tsx

@@ -0,0 +1,54 @@
+import { cn } from '../../lib/utils'
+
+export interface TimelineEvent {
+  id: string
+  label: string
+  timestamp: string
+  detail?: string
+  type?: 'info' | 'success' | 'warning' | 'error'
+}
+
+interface SessionTimelineProps {
+  events: TimelineEvent[]
+  className?: string
+}
+
+const typeColors = {
+  info: 'bg-blue-400',
+  success: 'bg-af-status-success',
+  warning: 'bg-af-status-warning',
+  error: 'bg-af-status-error',
+}
+
+export function SessionTimeline({ events, className }: SessionTimelineProps) {
+  return (
+    <div className={cn('relative space-y-0', className)}>
+      {/* Vertical line */}
+      <div className="absolute left-[7px] top-2 bottom-2 w-px bg-af-surface-border" />
+
+      {events.map((event, i) => (
+        <div key={event.id} className="relative flex gap-3 py-2">
+          {/* Dot */}
+          <span
+            className={cn(
+              'relative z-10 mt-1 h-[14px] w-[14px] shrink-0 rounded-full border-2 border-af-bg-primary',
+              typeColors[event.type ?? 'info']
+            )}
+          />
+
+          <div className="flex-1 min-w-0">
+            <div className="flex items-baseline justify-between gap-2">
+              <span className="text-sm text-af-text-primary">{event.label}</span>
+              <span className="text-xs text-af-text-secondary whitespace-nowrap">
+                {new Date(event.timestamp).toLocaleTimeString()}
+              </span>
+            </div>
+            {event.detail && (
+              <p className="mt-0.5 text-xs text-af-text-secondary">{event.detail}</p>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/sessions/token-chart.tsx

@@ -0,0 +1,51 @@
+import { cn } from '../../lib/utils'
+import { formatTokens } from '../../lib/format'
+
+interface TokenChartProps {
+  inputTokens?: number
+  outputTokens?: number
+  className?: string
+}
+
+export function TokenChart({ inputTokens = 0, outputTokens = 0, className }: TokenChartProps) {
+  const total = inputTokens + outputTokens
+  if (total === 0) return null
+
+  const inputPct = (inputTokens / total) * 100
+  const outputPct = (outputTokens / total) * 100
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <div className="flex items-center justify-between text-xs text-af-text-secondary">
+        <span>Token Usage</span>
+        <span className="tabular-nums font-mono">{formatTokens(total)} total</span>
+      </div>
+
+      {/* Bar */}
+      <div className="flex h-3 w-full overflow-hidden rounded-full bg-af-bg-primary">
+        <div
+          className="bg-blue-400 transition-all"
+          style={{ width: `${inputPct}%` }}
+        />
+        <div
+          className="bg-af-accent transition-all"
+          style={{ width: `${outputPct}%` }}
+        />
+      </div>
+
+      {/* Legend */}
+      <div className="flex items-center gap-4 text-xs">
+        <div className="flex items-center gap-1.5">
+          <span className="h-2 w-2 rounded-full bg-blue-400" />
+          <span className="text-af-text-secondary">Input</span>
+          <span className="tabular-nums font-mono text-af-text-primary">{formatTokens(inputTokens)}</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <span className="h-2 w-2 rounded-full bg-af-accent" />
+          <span className="text-af-text-secondary">Output</span>
+          <span className="tabular-nums font-mono text-af-text-primary">{formatTokens(outputTokens)}</span>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,155 @@
+'use client'
+
+import { cn } from '../../lib/utils'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../../components/ui/card'
+import { Badge } from '../../components/ui/badge'
+import { Separator } from '../../components/ui/separator'
+import { useStats } from '../../hooks/use-stats'
+import { useWorkers } from '../../hooks/use-workers'
+import { ProviderIcon } from '../../components/fleet/provider-icon'
+import { StatusDot } from '../../components/fleet/status-dot'
+import { CheckCircle2, AlertCircle, Settings2 } from 'lucide-react'
+
+interface SettingsViewProps {
+  className?: string
+}
+
+export function SettingsView({ className }: SettingsViewProps) {
+  const { data: stats } = useStats()
+  const { data: workersData } = useWorkers()
+
+  const workers = workersData?.workers ?? []
+  const hasWorkerAuth = workersData !== null
+
+  return (
+    <div className={cn('space-y-6 p-5 max-w-3xl', className)}>
+      <div>
+        <h1 className="text-lg font-semibold text-af-text-primary">Settings</h1>
+        <p className="text-sm text-af-text-secondary">
+          Configuration and integration status for your AgentFactory instance.
+        </p>
+      </div>
+
+      {/* Integration Status */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Integration Status</CardTitle>
+          <CardDescription>Connected services and API endpoints</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <CheckCircle2 className="h-4 w-4 text-af-status-success" />
+              <div>
+                <p className="text-sm text-af-text-primary">Linear Webhook</p>
+                <p className="text-xs text-af-text-secondary font-mono">/webhook</p>
+              </div>
+            </div>
+            <Badge variant="success">Connected</Badge>
+          </div>
+
+          <Separator />
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <CheckCircle2 className="h-4 w-4 text-af-status-success" />
+              <div>
+                <p className="text-sm text-af-text-primary">Public API</p>
+                <p className="text-xs text-af-text-secondary font-mono">/api/public/stats</p>
+              </div>
+            </div>
+            <Badge variant="success">Active</Badge>
+          </div>
+
+          <Separator />
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              {hasWorkerAuth ? (
+                <CheckCircle2 className="h-4 w-4 text-af-status-success" />
+              ) : (
+                <AlertCircle className="h-4 w-4 text-af-text-secondary" />
+              )}
+              <div>
+                <p className="text-sm text-af-text-primary">Worker API</p>
+                <p className="text-xs text-af-text-secondary font-mono">/api/workers</p>
+              </div>
+            </div>
+            <Badge variant={hasWorkerAuth ? 'success' : 'secondary'}>
+              {hasWorkerAuth ? 'Authenticated' : 'No Auth Key'}
+            </Badge>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Workers */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Workers</CardTitle>
+          <CardDescription>
+            {workers.length > 0
+              ? `${workers.length} worker${workers.length !== 1 ? 's' : ''} registered`
+              : 'No workers connected'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {workers.length === 0 ? (
+            <p className="text-sm text-af-text-secondary">
+              Workers will appear here once they register with the server.
+            </p>
+          ) : (
+            <div className="space-y-3">
+              {workers.map((worker) => (
+                <div key={worker.id} className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <StatusDot status={worker.status === 'active' ? 'working' : 'stopped'} />
+                    <div>
+                      <p className="text-sm font-mono text-af-text-primary">
+                        {worker.hostname ?? worker.id.slice(0, 8)}
+                      </p>
+                      <p className="text-xs text-af-text-secondary">
+                        {worker.activeSessions}/{worker.capacity} slots
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <ProviderIcon provider={worker.provider} size={14} />
+                    <Badge variant={worker.status === 'active' ? 'success' : 'secondary'}>
+                      {worker.status}
+                    </Badge>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Fleet Stats */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Settings2 className="h-4 w-4" />
+            Fleet Configuration
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <dl className="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <dt className="text-af-text-secondary">Total Capacity</dt>
+              <dd className="mt-0.5 text-af-text-primary font-medium">
+                {stats?.availableCapacity ?? '—'}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-af-text-secondary">Workers Online</dt>
+              <dd className="mt-0.5 text-af-text-primary font-medium">
+                {stats?.workersOnline ?? '—'}
+              </dd>
+            </div>
+          </dl>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/src/components/shared/empty-state.tsx

@@ -0,0 +1,29 @@
+import { cn } from '../../lib/utils'
+import { Inbox } from 'lucide-react'
+
+interface EmptyStateProps {
+  title?: string
+  description?: string
+  icon?: React.ReactNode
+  className?: string
+  children?: React.ReactNode
+}
+
+export function EmptyState({
+  title = 'No data',
+  description = 'Nothing to show yet.',
+  icon,
+  className,
+  children,
+}: EmptyStateProps) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center py-12 text-center', className)}>
+      <div className="mb-4 text-af-text-secondary">
+        {icon ?? <Inbox className="h-10 w-10" />}
+      </div>
+      <h3 className="text-sm font-medium text-af-text-primary">{title}</h3>
+      <p className="mt-1 text-sm text-af-text-secondary">{description}</p>
+      {children && <div className="mt-4">{children}</div>}
+    </div>
+  )
+}