@supaku/agentfactory-dashboard 0.6.1 → 0.6.3

package/package.json

@@ -1,16 +1,32 @@
 {
   "name": "@supaku/agentfactory-dashboard",
-  "version": "0.6.1",
-  "publishConfig": {
-    "access": "public"
-  },
+  "version": "0.6.3",
   "description": "Premium dashboard UI components for AgentFactory",
+  "author": "Supaku (https://supaku.com)",
+  "license": "MIT",
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/supaku/agentfactory",
     "directory": "packages/dashboard"
   },
-  "license": "MIT",
+  "homepage": "https://github.com/supaku/agentfactory/tree/main/packages/dashboard",
+  "bugs": {
+    "url": "https://github.com/supaku/agentfactory/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "dashboard",
+    "agentfactory",
+    "fleet-management",
+    "react",
+    "ui-components",
+    "tailwindcss"
+  ],
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
@@ -20,7 +36,9 @@
   "files": [
     "src",
     "tailwind.config.ts",
-    "components.json"
+    "components.json",
+    "README.md",
+    "LICENSE"
   ],
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.0",

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

@@ -13,9 +13,10 @@ import { Clock, Coins } from 'lucide-react'
 interface AgentCardProps {
   session: PublicSessionResponse
   className?: string
+  onSelect?: (sessionId: string) => void
 }
 
-export function AgentCard({ session, className }: AgentCardProps) {
+export function AgentCard({ session, className, onSelect }: AgentCardProps) {
   const statusConfig = getStatusConfig(session.status)
   const workTypeConfig = getWorkTypeConfig(session.workType)
 
@@ -25,8 +26,20 @@ export function AgentCard({ session, className }: AgentCardProps) {
         'group relative rounded-xl border border-af-surface-border/50 bg-af-surface/40 p-4 transition-all duration-300 hover-glow',
         session.status === 'working' && 'border-af-status-success/10',
         session.status === 'failed' && 'border-af-status-error/10',
+        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)
+          }
+        },
+      })}
     >
       {/* Top row: identifier + provider */}
       <div className="flex items-start justify-between gap-2">

package/src/components/fleet/fleet-overview.tsx

@@ -12,9 +12,10 @@ import { Users, Cpu, ListTodo, CheckCircle2, Gauge, DollarSign } from 'lucide-re
 
 interface FleetOverviewProps {
   className?: string
+  onSessionSelect?: (sessionId: string) => void
 }
 
-export function FleetOverview({ className }: FleetOverviewProps) {
+export function FleetOverview({ className, onSessionSelect }: FleetOverviewProps) {
   const { data: stats, isLoading: statsLoading } = useStats()
   const { data: sessionsData, isLoading: sessionsLoading } = useSessions()
 
@@ -114,7 +115,7 @@ export function FleetOverview({ className }: FleetOverviewProps) {
                 className="animate-fade-in"
                 style={{ animationDelay: `${i * 50}ms` }}
               >
-                <AgentCard session={session} />
+                <AgentCard session={session} onSelect={onSessionSelect} />
               </div>
             ))}
           </div>

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

@@ -9,17 +9,30 @@ import { Clock } from 'lucide-react'
 interface PipelineCardProps {
   session: PublicSessionResponse
   className?: string
+  onSelect?: (sessionId: string) => void
 }
 
-export function PipelineCard({ session, className }: PipelineCardProps) {
+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} />

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

@@ -9,9 +9,10 @@ interface PipelineColumnProps {
   count: number
   accentClass?: string
   className?: string
+  onSessionSelect?: (sessionId: string) => void
 }
 
-export function PipelineColumn({ title, sessions, count, accentClass, className }: PipelineColumnProps) {
+export function PipelineColumn({ title, sessions, count, accentClass, className, onSessionSelect }: PipelineColumnProps) {
   return (
     <div
       className={cn(
@@ -34,7 +35,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} />
+            <PipelineCard key={session.id} session={session} onSelect={onSessionSelect} />
           ))}
         </div>
       </ScrollArea>

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

@@ -30,9 +30,10 @@ function groupByColumn(sessions: PublicSessionResponse[]) {
 
 interface PipelineViewProps {
   className?: string
+  onSessionSelect?: (sessionId: string) => void
 }
 
-export function PipelineView({ className }: PipelineViewProps) {
+export function PipelineView({ className, onSessionSelect }: PipelineViewProps) {
   const { data, isLoading } = useSessions()
   const sessions = data?.sessions ?? []
 
@@ -73,6 +74,7 @@ export function PipelineView({ className }: PipelineViewProps) {
                 sessions={col.sessions}
                 count={col.sessions.length}
                 accentClass={col.accentClass}
+                onSessionSelect={onSessionSelect}
               />
             </div>
           ))}

package/src/lib/work-type-config.ts

@@ -30,6 +30,54 @@ const workTypes: Record<string, WorkTypeConfig> = {
     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',
+  },
   refactor: {
     label: 'Refactor',
     color: 'text-amber-400',
@@ -51,7 +99,7 @@ const workTypes: Record<string, WorkTypeConfig> = {
 }
 
 const defaultWorkType: WorkTypeConfig = {
-  label: 'Development',
+  label: 'Unknown',
   color: 'text-af-text-secondary',
   bgColor: 'bg-af-text-secondary/8',
   borderColor: 'border-af-text-secondary/10',

package/src/pages/dashboard-page.tsx

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

package/src/pages/pipeline-page.tsx

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