From 90e1c297f4f0829b9c6078ae64bddbca1c5be217 Mon Sep 17 00:00:00 2001
From: akinshaywai <akinshaywai@users.noreply.github.com>
Date: Thu, 16 Apr 2026 00:21:04 +0100
Subject: [PATCH 1/2] style(ui): improve HistoryList loading/empty states and
 add button tooltips

- Replace plain 'Loading...' text in HistoryList with animated skeleton
  placeholder rows that match the shape of real history items
- Replace plain 'No history yet' text with a centred History icon +
  label for a more polished empty state
- Add aria-label and title to the Back button in HistoryList header
- Add aria-label and title to History and Settings buttons in main header
- Add aria-label and title to Send and Stop task buttons in footer
---
 .../extension/src/components/HistoryList.tsx  | 21 +++++++++++++------
 .../src/entrypoints/sidepanel/App.tsx         |  8 +++++++
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/extension/src/components/HistoryList.tsx b/packages/extension/src/components/HistoryList.tsx
index 597e2cc..84d9507 100644
--- a/packages/extension/src/components/HistoryList.tsx
+++ b/packages/extension/src/components/HistoryList.tsx
@@ -1,4 +1,4 @@
-import { ArrowDownToLine, ArrowLeft, CheckCircle, RotateCcw, Trash2, XCircle } from 'lucide-react'
+import { ArrowDownToLine, ArrowLeft, CheckCircle, History, RotateCcw, Trash2, XCircle } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
@@ -57,7 +57,7 @@ export function HistoryList({
 		<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">
+				<Button variant="ghost" size="icon-sm" onClick={onBack} className="cursor-pointer" aria-label="Back" title="Back">
 					<ArrowLeft className="size-3.5" />
 				</Button>
 				<span className="text-sm font-medium flex-1">History</span>
@@ -80,14 +80,23 @@ export function HistoryList({
 			{/* List */}
 			<div className="flex-1 overflow-y-auto">
 				{loading && (
-					<div className="flex items-center justify-center h-32 text-xs text-muted-foreground">
-						Loading...
+					<div className="flex flex-col" aria-label="Loading history" aria-busy="true">
+						{[...Array(4)].map((_, i) => (
+							<div key={i} className="flex items-start gap-2 px-3 py-2.5 border-b">
+								<div className="size-3.5 mt-0.5 rounded-full bg-muted animate-pulse shrink-0" />
+								<div className="flex-1 space-y-1.5">
+									<div className="h-2.5 bg-muted animate-pulse rounded w-3/4" />
+									<div className="h-2 bg-muted animate-pulse rounded w-1/3" />
+								</div>
+							</div>
+						))}
 					</div>
 				)}
 
 				{!loading && sessions.length === 0 && (
-					<div className="flex items-center justify-center h-32 text-xs text-muted-foreground">
-						No history yet
+					<div className="flex flex-col items-center justify-center h-40 gap-2 text-muted-foreground">
+						<History className="size-8 opacity-30" />
+						<p className="text-xs">No history yet</p>
 					</div>
 				)}
 
diff --git a/packages/extension/src/entrypoints/sidepanel/App.tsx b/packages/extension/src/entrypoints/sidepanel/App.tsx
index 02af824..8fe5c17 100644
--- a/packages/extension/src/entrypoints/sidepanel/App.tsx
+++ b/packages/extension/src/entrypoints/sidepanel/App.tsx
@@ -147,6 +147,8 @@ export default function App() {
 						size="icon-sm"
 						onClick={() => setView({ name: 'history' })}
 						className="cursor-pointer"
+						aria-label="History"
+						title="History"
 					>
 						<History className="size-3.5" />
 					</Button>
@@ -155,6 +157,8 @@ export default function App() {
 						size="icon-sm"
 						onClick={() => setView({ name: 'config' })}
 						className="cursor-pointer"
+						aria-label="Settings"
+						title="Settings"
 					>
 						<Settings className="size-3.5" />
 					</Button>
@@ -205,6 +209,8 @@ export default function App() {
 								variant="destructive"
 								onClick={handleStop}
 								className="size-7"
+								aria-label="Stop task"
+								title="Stop task"
 							>
 								<Square className="size-3" />
 							</InputGroupButton>
@@ -215,6 +221,8 @@ export default function App() {
 								onClick={() => handleSubmit()}
 								disabled={!inputValue.trim()}
 								className="size-7 cursor-pointer"
+								aria-label="Send"
+								title="Send"
 							>
 								<Send className="size-3" />
 							</InputGroupButton>

From 284098ff0d7a019c5f145fa5dee46ea2eb350f13 Mon Sep 17 00:00:00 2001
From: Simon <10131203+gaomeng1900@users.noreply.github.com>
Date: Thu, 16 Apr 2026 15:57:04 +0800
Subject: [PATCH 2/2] chore: catch session loading errors

---
 .../extension/src/components/HistoryList.tsx  | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/extension/src/components/HistoryList.tsx b/packages/extension/src/components/HistoryList.tsx
index 84d9507..e582364 100644
--- a/packages/extension/src/components/HistoryList.tsx
+++ b/packages/extension/src/components/HistoryList.tsx
@@ -1,4 +1,12 @@
-import { ArrowDownToLine, ArrowLeft, CheckCircle, History, RotateCcw, Trash2, XCircle } from 'lucide-react'
+import {
+	ArrowDownToLine,
+	ArrowLeft,
+	CheckCircle,
+	History,
+	RotateCcw,
+	Trash2,
+	XCircle,
+} from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
@@ -29,8 +37,13 @@ export function HistoryList({
 	const [loading, setLoading] = useState(true)
 
 	const load = useCallback(async () => {
-		setSessions(await listSessions())
-		setLoading(false)
+		try {
+			setSessions(await listSessions())
+		} catch (err) {
+			console.error('[HistoryList] Failed to load sessions:', err)
+		} finally {
+			setLoading(false)
+		}
 	}, [])
 
 	useEffect(() => {
@@ -57,7 +70,14 @@ export function HistoryList({
 		<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" aria-label="Back" title="Back">
+				<Button
+					variant="ghost"
+					size="icon-sm"
+					onClick={onBack}
+					className="cursor-pointer"
+					aria-label="Back"
+					title="Back"
+				>
 					<ArrowLeft className="size-3.5" />
 				</Button>
 				<span className="text-sm font-medium flex-1">History</span>