Simon
4f80ec1459
- Upgrade eslint and @eslint/js to v10 - Replace eslint-plugin-react-x + eslint-plugin-react-dom + eslint-plugin-react-hooks with unified @eslint-react/eslint-plugin - Raise dev Node.js requirement to ^22.13.0 || >=24 (runtime packages unaffected) - Add .npmrc with engine-strict=true - Move all @eslint-react rule overrides to eslint.config.js, eliminating plugin-specific inline eslint-disable comments - Fix real issues caught by new rules: useless assignments, leaked setTimeout, ref naming, useState setter naming
80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import { ArrowLeft, RotateCcw, Trash2 } from 'lucide-react'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import { type SessionRecord, deleteSession, getSession } from '@/lib/db'
|
|
|
|
import { EventCard } from './cards'
|
|
|
|
export function HistoryDetail({
|
|
sessionId,
|
|
onBack,
|
|
onRerun,
|
|
}: {
|
|
sessionId: string
|
|
onBack: () => void
|
|
onRerun: (task: string) => void
|
|
}) {
|
|
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 flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => onRerun(session.task)}
|
|
className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<RotateCcw className="size-3" />
|
|
Run again
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={async () => {
|
|
await deleteSession(sessionId)
|
|
onBack()
|
|
}}
|
|
className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-destructive transition-colors cursor-pointer"
|
|
>
|
|
<Trash2 className="size-3" />
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Events (read-only) */}
|
|
<div className="flex-1 overflow-y-auto p-3 space-y-2">
|
|
{session.history.map((event, index) => (
|
|
<EventCard key={index} event={event} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|