75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import { ArrowLeft, RotateCcw } from 'lucide-react'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import { type SessionRecord, getSession } from '@/lib/db'
|
|
|
|
import { EventCard } from './cards'
|
|
|
|
export function HistoryDetail({
|
|
sessionId,
|
|
onBack,
|
|
onRerun,
|
|
rerunDisabled = false,
|
|
}: {
|
|
sessionId: string
|
|
onBack: () => void
|
|
onRerun: (task: string) => void
|
|
rerunDisabled?: boolean
|
|
}) {
|
|
const [session, setSession] = useState<SessionRecord | null>(null)
|
|
|
|
useEffect(() => {
|
|
getSession(sessionId).then((s) => setSession(s ?? null))
|
|
}, [sessionId])
|
|
|
|
if (!session) {
|
|
return (
|
|
<div className="flex items-center justify-center h-screen text-xs text-muted-foreground">
|
|
Loading...
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-screen bg-background">
|
|
{/* Header */}
|
|
<header className="flex items-center gap-2 border-b px-3 py-2">
|
|
<Button variant="ghost" size="icon-sm" onClick={onBack} className="cursor-pointer">
|
|
<ArrowLeft className="size-3.5" />
|
|
</Button>
|
|
<span className="text-sm font-medium truncate">History</span>
|
|
</header>
|
|
|
|
{/* Task */}
|
|
<div className="border-b px-3 py-2 bg-muted/30">
|
|
<div className="text-[10px] text-muted-foreground uppercase tracking-wide">Task</div>
|
|
<div className="text-xs font-medium" title={session.task}>
|
|
{session.task}
|
|
</div>
|
|
<div className="mt-2">
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => onRerun(session.task)}
|
|
disabled={rerunDisabled}
|
|
className="h-7 cursor-pointer text-[10px]"
|
|
>
|
|
<RotateCcw className="size-3" />
|
|
Run again
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Events (read-only) */}
|
|
<div className="flex-1 overflow-y-auto p-3 space-y-2">
|
|
{session.history.map((event, index) => (
|
|
// eslint-disable-next-line react-x/no-array-index-key
|
|
<EventCard key={index} event={event} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|