feat(ext): rerun tasks from history

packages/extension/src/components/HistoryDetail.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeft } from 'lucide-react'
+import { ArrowLeft, RotateCcw } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
@@ -6,7 +6,17 @@ import { type SessionRecord, getSession } from '@/lib/db'
 
 import { EventCard } from './cards'
 
-export function HistoryDetail({ sessionId, onBack }: { sessionId: string; onBack: () => void }) {
+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(() => {
@@ -37,6 +47,19 @@ export function HistoryDetail({ sessionId, onBack }: { sessionId: string; onBack
 				<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) */}

packages/extension/src/components/HistoryList.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeft, CheckCircle, Trash2, XCircle } from 'lucide-react'
+import { ArrowLeft, CheckCircle, RotateCcw, Trash2, XCircle } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
@@ -18,9 +18,13 @@ function timeAgo(ts: number): string {
 export function HistoryList({
 	onSelect,
 	onBack,
+	onRerun,
+	rerunDisabled = false,
 }: {
 	onSelect: (id: string) => void
 	onBack: () => void
+	onRerun: (task: string) => void
+	rerunDisabled?: boolean
 }) {
 	const [sessions, setSessions] = useState<SessionRecord[]>([])
 	const [loading, setLoading] = useState(true)
@@ -41,6 +45,11 @@ export function HistoryList({
 		setSessions((prev) => prev.filter((s) => s.id !== id))
 	}
 
+	const handleRerun = (e: React.MouseEvent, task: string) => {
+		e.stopPropagation()
+		onRerun(task)
+	}
+
 	return (
 		<div className="flex flex-col h-screen bg-background">
 			{/* Header */}
@@ -85,7 +94,12 @@ export function HistoryList({
 						role="button"
 						tabIndex={0}
 						onClick={() => onSelect(session.id)}
-						onKeyDown={(e) => e.key === 'Enter' && onSelect(session.id)}
+						onKeyDown={(e) => {
+							if (e.target !== e.currentTarget) return
+							if (e.key !== 'Enter' && e.key !== ' ') return
+							e.preventDefault()
+							onSelect(session.id)
+						}}
 						className="w-full text-left px-3 py-2.5 border-b hover:bg-muted/50 transition-colors cursor-pointer flex items-start gap-2 group"
 					>
 						{/* Status icon */}
@@ -103,15 +117,28 @@ export function HistoryList({
 							</p>
 						</div>
 
-						{/* Delete */}
+						<div className="flex items-center gap-1 shrink-0">
+							<button
+								type="button"
+								onClick={(e) => handleRerun(e, session.task)}
+								disabled={rerunDisabled}
+								className="p-1 text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+								title="Run task again"
+								aria-label={`Run history task again: ${session.task}`}
+							>
+								<RotateCcw className="size-3" />
+							</button>
 							<button
 								type="button"
 								onClick={(e) => handleDelete(e, session.id)}
 								className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:text-destructive cursor-pointer shrink-0"
+								title="Delete history"
+								aria-label={`Delete history for ${session.task}`}
 							>
 								<Trash2 className="size-3" />
 							</button>
 						</div>
+					</div>
 				))}
 			</div>
 		</div>

packages/extension/src/entrypoints/sidepanel/App.tsx

@@ -56,19 +56,27 @@ export default function App() {
 		}
 	}, [history, activity])
 
-	const handleSubmit = useCallback(
-		(e?: React.SyntheticEvent) => {
-			e?.preventDefault()
-			if (!inputValue.trim() || status === 'running') return
+	const runTask = useCallback(
+		(task: string) => {
+			const normalizedTask = task.trim()
+			if (!normalizedTask || status === 'running') return
 
-			const taskToExecute = inputValue.trim()
 			setInputValue('')
+			setView({ name: 'chat' })
 
-			execute(taskToExecute).catch((error) => {
+			execute(normalizedTask).catch((error) => {
 				console.error('[SidePanel] Failed to execute task:', error)
 			})
 		},
-		[inputValue, status, execute]
+		[execute, status]
+	)
+
+	const handleSubmit = useCallback(
+		(e?: React.SyntheticEvent) => {
+			e?.preventDefault()
+			runTask(inputValue)
+		},
+		[inputValue, runTask]
 	)
 
 	const handleStop = useCallback(() => {
@@ -103,12 +111,21 @@ export default function App() {
 			<HistoryList
 				onSelect={(id) => setView({ name: 'history-detail', sessionId: id })}
 				onBack={() => setView({ name: 'chat' })}
+				onRerun={runTask}
+				rerunDisabled={status === 'running'}
 			/>
 		)
 	}
 
 	if (view.name === 'history-detail') {
-		return <HistoryDetail sessionId={view.sessionId} onBack={() => setView({ name: 'history' })} />
+		return (
+			<HistoryDetail
+				sessionId={view.sessionId}
+				onBack={() => setView({ name: 'history' })}
+				onRerun={runTask}
+				rerunDisabled={status === 'running'}
+			/>
+		)
 	}
 
 	// --- Chat view ---