feat(ext): style adjust; rm rerunDisabled

packages/extension/src/components/HistoryDetail.tsx

@@ -1,8 +1,8 @@
-import { ArrowLeft, RotateCcw } from 'lucide-react'
+import { ArrowLeft, RotateCcw, Trash2 } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
-import { type SessionRecord, getSession } from '@/lib/db'
+import { type SessionRecord, deleteSession, getSession } from '@/lib/db'
 
 import { EventCard } from './cards'
 
@@ -10,12 +10,10 @@ 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)
 
@@ -47,18 +45,26 @@ export function HistoryDetail({
 				<div className="text-xs font-medium" title={session.task}>
 					{session.task}
 				</div>
-				<div className="mt-2">
+				<div className="mt-2 flex items-center gap-2">
-					<Button
+					<button
 						type="button"
-						variant="secondary"
-						size="sm"
 						onClick={() => onRerun(session.task)}
-						disabled={rerunDisabled}
+						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"
-						className="h-7 cursor-pointer text-[10px]"
 					>
 						<RotateCcw className="size-3" />
 						Run again
-					</Button>
+					</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>
 

packages/extension/src/components/HistoryList.tsx

@@ -19,12 +19,10 @@ 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)
@@ -112,31 +110,31 @@ export function HistoryList({
 						{/* Content */}
 						<div className="flex-1 min-w-0">
 							<p className="text-xs font-medium truncate">{session.task}</p>
-							<p className="text-[10px] text-muted-foreground mt-0.5">
+							<div className="flex items-center mt-0.5">
-								{timeAgo(session.createdAt)} · {session.history.length} steps
+								<p className="text-[10px] text-muted-foreground">
-							</p>
+									{timeAgo(session.createdAt)} · {session.history.length} steps
-						</div>
+								</p>
-
+								<div className="flex items-center gap-0.5 ml-auto opacity-0 group-hover:opacity-100 transition-opacity">
-						<div className="flex items-center gap-1 shrink-0">
+									<button
-							<button
+										type="button"
-								type="button"
+										onClick={(e) => handleRerun(e, session.task)}
-								onClick={(e) => handleRerun(e, session.task)}
+										className="p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
-								disabled={rerunDisabled}
+										title="Run task again"
-								className="p-1 text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+										aria-label={`Run history task again: ${session.task}`}
-								title="Run task again"
+									>
-								aria-label={`Run history task again: ${session.task}`}
+										<RotateCcw className="size-3" />
-							>
+									</button>
-								<RotateCcw className="size-3" />
+									<button
-							</button>
+										type="button"
-							<button
+										onClick={(e) => handleDelete(e, session.id)}
-								type="button"
+										className="p-0.5 text-muted-foreground hover:text-destructive transition-colors cursor-pointer"
-								onClick={(e) => handleDelete(e, session.id)}
+										title="Delete history"
-								className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:text-destructive cursor-pointer shrink-0"
+										aria-label={`Delete history for ${session.task}`}
-								title="Delete history"
+									>
-								aria-label={`Delete history for ${session.task}`}
+										<Trash2 className="size-3" />
-							>
+									</button>
-								<Trash2 className="size-3" />
+								</div>
-							</button>
+							</div>
 						</div>
 					</div>
 				))}

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

@@ -112,7 +112,6 @@ export default function App() {
 				onSelect={(id) => setView({ name: 'history-detail', sessionId: id })}
 				onBack={() => setView({ name: 'chat' })}
 				onRerun={runTask}
-				rerunDisabled={status === 'running'}
 			/>
 		)
 	}
@@ -123,7 +122,6 @@ export default function App() {
 				sessionId={view.sessionId}
 				onBack={() => setView({ name: 'history' })}
 				onRerun={runTask}
-				rerunDisabled={status === 'running'}
 			/>
 		)
 	}