File size: 1,690 Bytes
d47b053 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | import type { StudioTask, StudioWork, StudioWorkResult } from '../protocol/studio-agent-types'
import { studioPanelClass } from '../theme'
import { StudioWorkCard } from './StudioWorkCard'
interface StudioWorkPanelProps {
works: StudioWork[]
selectedWorkId: string | null
tasksById: Record<string, StudioTask>
resultsById: Record<string, StudioWorkResult>
onSelectWork: (workId: string) => void
}
export function StudioWorkPanel({
works,
selectedWorkId,
tasksById,
resultsById,
onSelectWork,
}: StudioWorkPanelProps) {
return (
<section className={studioPanelClass('flex h-full flex-col p-4')}>
<div className="flex items-center justify-between gap-3">
<div>
<div className="text-xs uppercase tracking-[0.28em] text-text-secondary">Works</div>
<h2 className="mt-2 text-xl font-semibold text-text-primary">Work-centric view</h2>
</div>
<div className="rounded-full bg-black/5 px-3 py-1 text-sm text-text-secondary dark:bg-white/10">{works.length} items</div>
</div>
<div className="mt-4 min-h-0 flex-1 space-y-3 overflow-auto pr-1">
{works.map((work) => (
<StudioWorkCard
key={work.id}
work={work}
latestTask={work.latestTaskId ? tasksById[work.latestTaskId] ?? null : null}
result={work.currentResultId ? resultsById[work.currentResultId] ?? null : null}
selected={selectedWorkId === work.id}
onSelect={onSelectWork}
/>
))}
{works.length === 0 && <div className="text-sm text-text-secondary">No works yet. Start a run from the command panel.</div>}
</div>
</section>
)
}
|