style: ui refinement, clean stylesheet structure, and visual polish

src/webview/components/ClusterCard.tsx

@@ -113,6 +113,20 @@ export const ClusterCard: React.FC<ClusterCardProps> = ({ title, noteIndices, no
 					if (!note) return null;
 					return (
 						<div key={note.noteId} className="note-item" onClick={() => handleNoteClick(note.noteId)}>
+							<svg
+								width="13"
+								height="13"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								style={{ opacity: 0.6, flexShrink: 0 }}
+							>
+								<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+								<polyline points="14 2 14 8 20 8" />
+							</svg>
 							<span className="note-title">{note.title || 'Untitled'}</span>
 						</div>
 					);

src/webview/components/EmptyState.tsx

@@ -3,6 +3,20 @@ import * as React from 'react';
 export const EmptyState: React.FC = () => {
 	return (
 		<div className="empty-state">
+			<svg
+				className="empty-illustration"
+				width="48"
+				height="48"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				strokeWidth="1.2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			>
+				<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+				<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+			</svg>
 			<div className="empty-title">No categories yet</div>
 			<div className="empty-subtitle">Click Run to categorize your notes using on-device AI.</div>
 		</div>

src/webview/components/Header.tsx

@@ -8,9 +8,36 @@ interface HeaderProps {
 export const Header: React.FC<HeaderProps> = ({ isRunning, onRun }) => {
 	return (
 		<div className="panel-header">
-			<div className="panel-header-title">Note Categorizer</div>
+			<div className="panel-header-title">
+				<svg
+					width="14"
+					height="14"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				>
+					<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
+					<line x1="7" y1="7" x2="7.01" y2="7" strokeWidth="2.5" />
+				</svg>
+				Note Categorizer
+			</div>
 			<button id="btn-run" className="btn-run" onClick={onRun} disabled={isRunning}>
-				Run
+				<svg
+					width="11"
+					height="11"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				>
+					<polygon points="5 3 19 12 5 21 5 3" />
+				</svg>
+				{isRunning ? 'Running...' : 'Run'}
 			</button>
 		</div>
 	);

src/webview/pages/HistoryPage.tsx

@@ -26,9 +26,7 @@ export const HistoryPage: React.FC = () => {
 	}
 
 	return (
-		<div className="empty-state">
-			<div className="empty-title">Change Log / History</div>
-
+		<div className="page-history">
 			{hasChangeLog && logDetails ? (
 				<div className="undo-history-card">
 					<div className="undo-history-title">Active Categorization State</div>
@@ -37,7 +35,12 @@ export const HistoryPage: React.FC = () => {
 							<strong>Applied At:</strong> {new Date(logDetails.timestamp).toLocaleString()}
 						</div>
 						<div>
-							<strong>Method Used:</strong> {logDetails.method}
+							<strong>Method Used:</strong>{' '}
+							{logDetails.method === 'both'
+								? 'Notebooks & Tags'
+								: logDetails.method === 'notebooks'
+									? 'Notebooks Only'
+									: 'Tags Only'}
 						</div>
 						<div>
 							<strong>Modified Items:</strong> {logDetails.notes?.length || 0} notes
@@ -82,22 +85,43 @@ export const HistoryPage: React.FC = () => {
 					{cleanupError && <div className="status-banner-apply error">Error: {cleanupError}</div>}
 				</div>
 			) : (
-				<>
+				<div className="empty-state">
+					<svg
+						className="empty-illustration"
+						width="64"
+						height="64"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="1.5"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="12" cy="12" r="10" />
+						<polyline points="12 6 12 12 16 14" />
+					</svg>
+					<div className="empty-title">No history found</div>
 					<div className="empty-subtitle">
 						No active categorization state in the change log. Run the categorization pipeline and apply
 						changes to see history here.
 					</div>
 					{undoSuccess && (
-						<div className="status-banner-apply success" style={{ marginTop: '16px' }}>
+						<div
+							className="status-banner-apply success"
+							style={{ marginTop: '16px', width: '100%', maxWidth: '320px' }}
+						>
 							Reverted changes successfully!
 						</div>
 					)}
 					{cleanupSuccess && (
-						<div className="status-banner-apply success" style={{ marginTop: '16px' }}>
+						<div
+							className="status-banner-apply success"
+							style={{ marginTop: '16px', width: '100%', maxWidth: '320px' }}
+						>
 							{cleanupSuccess}
 						</div>
 					)}
-				</>
+				</div>
 			)}
 		</div>
 	);