feat(gui): rebuild homepage shell and blocked page

commit: 89a747840b80b468d552ae83f917cadc728d51ca
author: bnema · 10mo ago · 2025-12-06 14:14 UTC
parent: 0530f34
signature: unsigned

41 files · +8349 -2179

M assets/logo.svg +34 -16

@@ -1,30 +1,48 @@
1	1		<?xml version="1.0" encoding="UTF-8"?>
2	2		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
3	3		<defs>
	4	+	<!-- Background gradient - deeper dark -->
4	5		<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
5		-	<stop offset="0%" stop-color="#111827"/>
6		-	<stop offset="100%" stop-color="#1f2937"/>
	6	+	<stop offset="0%" stop-color="#0a0a0b"/>
	7	+	<stop offset="100%" stop-color="#18181b"/>
7	8		</linearGradient>
	9	+	<!-- Green accent gradient for bolt -->
	10	+	<linearGradient id="bolt" x1="0" y1="0" x2="0" y2="1">
	11	+	<stop offset="0%" stop-color="#4ade80"/>
	12	+	<stop offset="100%" stop-color="#22c55e"/>
	13	+	</linearGradient>
	14	+	<!-- Subtle inset shadow -->
8	15		<filter id="inset" x="-20%" y="-20%" width="140%" height="140%">
9	16		<feOffset dx="0" dy="1"/>
10		-	<feGaussianBlur stdDeviation="0.6" result="blur"/>
	17	+	<feGaussianBlur stdDeviation="0.8" result="blur"/>
11	18		<feComposite in2="SourceAlpha" operator="out"/>
12		-	<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
	19	+	<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
13	20		<feBlend in="SourceGraphic" mode="normal"/>
14	21		</filter>
	22	+	<!-- Glow for bolt -->
	23	+	<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
	24	+	<feGaussianBlur stdDeviation="2" result="blur"/>
	25	+	<feMerge>
	26	+	<feMergeNode in="blur"/>
	27	+	<feMergeNode in="SourceGraphic"/>
	28	+	</feMerge>
	29	+	</filter>
15	30		</defs>
	31	+
	32	+	<!-- Background square -->
16	33		<rect x="4" y="4" width="56" height="56" rx="0" ry="0" fill="url(#bg)" filter="url(#inset)"/>
17		-	<rect x="4.5" y="4.5" width="55" height="55" rx="0" ry="0" fill="none" stroke="#374151" stroke-width="1"/>
18		-	<!-- D glyph (slightly larger and wider) -->
19		-	<path d="M20 16 L20 48 M20 16 H34 q12 0 12 16 t-12 16 H20"
	34	+	<rect x="4.5" y="4.5" width="55" height="55" rx="0" ry="0" fill="none" stroke="#3f3f46" stroke-width="1"/>
	35	+
	36	+	<!-- D letterform - refined, sharper -->
	37	+	<path d="M18 14 L18 50 M18 14 H35 C48 14 48 32 48 32 C48 50 35 50 35 50 H18"
20	38		fill="none"
21		-	stroke="#f3f4f6"
22		-	stroke-width="4.5"
23		-	stroke-linecap="round"
24		-	stroke-linejoin="round"
25		-	transform="translate(33,32) scale(1.12,1.10) translate(-33,-32)"/>
26		-	<!-- Speed bolt accent (significantly larger, centered) -->
27		-	<path d="M36 22 L32 34 h6 l-8 16 4-12 h-6 z"
28		-	fill="#60a5fa" opacity="0.95"
29		-	transform="translate(33,32) scale(1.8) translate(-33,-32) translate(0,-3)"/>
	39	+	stroke="#fafafa"
	40	+	stroke-width="5"
	41	+	stroke-linecap="square"
	42	+	stroke-linejoin="miter"/>
	43	+
	44	+	<!-- Speed bolt - vibrant green, centered and prominent -->
	45	+	<path d="M38 20 L33 33 h7 l-10 18 5-14 h-7 z"
	46	+	fill="url(#bolt)"
	47	+	filter="url(#glow)"/>
30	48		</svg>

M gui/package-lock.json +253 -204 generated file: collapsed

load diff

M gui/package.json +6 -1


@@ -4,13 +4,15 @@
4	4		"private": true,
5	5		"type": "module",
6	6		"scripts": {
7		-	"build": "npm run build:color-scheme && npm run build:gui && npm run build:homepage && npm run build:main-world",
	7	+	"build": "npm run build:color-scheme && npm run build:gui && npm run build:homepage && npm run build:blocked && npm run build:main-world",
8	8		"build:gui": "vite build --config vite.config.gui.ts",
9	9		"build:homepage": "vite build --config vite.config.homepage.ts",
	10	+	"build:blocked": "vite build --config vite.config.blocked.ts",
10	11		"build:color-scheme": "vite build --config vite.config.color-scheme.ts",
11	12		"build:main-world": "vite build --config vite.config.main-world.ts",
12	13		"dev": "npm run build:gui -- --watch",
13	14		"dev:homepage": "npm run build:homepage -- --watch",
	15	+	"dev:blocked": "npm run build:blocked -- --watch",
14	16		"dev:color-scheme": "npm run build:color-scheme -- --watch",
15	17		"dev:main-world": "npm run build:main-world -- --watch",
16	18		"check": "svelte-check",

@@ -34,5 +36,8 @@
34	36		"typescript": "^5.3.0",
35	37		"typescript-eslint": "^8.43.0",
36	38		"vite": "^5.0.0"
	39	+	},
	40	+	"dependencies": {
	41	+	"@lucide/svelte": "^0.556.0"
37	42		}
38	43		}

M gui/src/components/omnibox/OmniboxInput.svelte +3 -7


@@ -100,11 +100,7 @@
100	100		let basePaddingSegments = $state<[string, string, string, string]>(DEFAULT_PADDING);
101	101		let inputPadding = $state(DEFAULT_PADDING.join(' '));
102	102		let baseLeftPadding = $state(DEFAULT_PADDING[3]);
103		-	let inputFontSize = $state(responsiveStyles?.fontSize \|\| '16px');
104		-
105		-	$effect(() => {
106		-	inputFontSize = responsiveStyles?.fontSize \|\| '16px';
107		-	});
	103	+	let inputFontSize = $derived(responsiveStyles?.fontSize \|\| '16px');
108	104
109	105		$effect(() => {
110	106		basePaddingSegments = normalizePadding(responsiveStyles?.inputPadding);

@@ -367,9 +363,9 @@
367	363
368	364		if (!item \|\| !item.url) return;
369	365
370		-	// Extract title and favicon
	366	+	// Extract title and favicon with proper type narrowing
371	367		const title = 'title' in item ? item.title : '';
372		-	const faviconURL = item.favicon_url \|\| item.favicon \|\| '';
	368	+	const faviconURL = 'favicon_url' in item ? item.favicon_url : ('favicon' in item ? item.favicon : '') ?? '';
373	369
374	370		// Toggle the favorite status
375	371		omniboxBridge.toggleFavorite(item.url, title, faviconURL);

M gui/src/components/omnibox/OmniboxSuggestions.svelte +4 -4


@@ -27,9 +27,9 @@
27	27		// In favorites view with input, filter locally
28	28		if (viewMode === 'favorites' && inputValue && inputValue.trim()) {
29	29		const query = inputValue.toLowerCase().trim();
30		-	return list.filter(fav =>
31		-	fav.url.toLowerCase().includes(query) \|\|
32		-	(fav.title && fav.title.toLowerCase().includes(query))
	30	+	return list.filter(item =>
	31	+	item.url.toLowerCase().includes(query) \|\|
	32	+	('title' in item && item.title && item.title.toLowerCase().includes(query))
33	33		);
34	34		}
35	35

@@ -150,7 +150,7 @@
150	150		{#each currentList as item, index (item.url)}
151	151		{@const { domain, path } = parseUrl(item.url)}
152	152		{@const isSelected = index === selectedIndex}
153		-	{@const favicon = item.favicon \|\| item.favicon_url \|\| ''}
	153	+	{@const favicon = ('favicon' in item ? item.favicon : '') \|\| ('favicon_url' in item ? item.favicon_url : '') \|\| ''}
154	154		{@const isFav = viewMode === 'history' && isFavorited(item.url)}
155	155		{@const shortcutNumber = index < 9 ? index + 1 : index === 9 ? 0 : null}
156	156

M gui/src/components/omnibox/messaging.ts +6 -0


@@ -183,6 +183,12 @@ export class OmniboxBridge implements OmniboxMessageBridge {
183	183		toggleFavorite(url: string, title: string, faviconURL: string): void {
184	184		console.log("⭐ [DEBUG] Toggling favorite:", { url, title, faviconURL });
185	185		this.postMessage({ type: "toggle_favorite", url, title, faviconURL });
	186	+
	187	+	// Notify other parts of the app that favorites changed
	188	+	// Homepage will listen for this and refresh its favorites list
	189	+	setTimeout(() => {
	190	+	document.dispatchEvent(new CustomEvent("dumber:favorites-changed"));
	191	+	}, 100); // Small delay to let backend complete
186	192		}
187	193
188	194		/**

M gui/src/components/omnibox/types.ts +2 -1


@@ -23,12 +23,13 @@ export interface SearchShortcut {
23	23		}
24	24
25	25		export interface OmniboxMessage {
26		-	type: "navigate" \| "query" \| "omnibox_initial_history" \| "get_search_shortcuts" \| "get_favorites" \| "toggle_favorite" \| "is_favorite" \| "prefix_query";
	26	+	type: "navigate" \| "query" \| "omnibox_initial_history" \| "get_search_shortcuts" \| "get_favorites" \| "toggle_favorite" \| "is_favorite" \| "prefix_query" \| "keyboard_blocking";
27	27		url?: string;
28	28		q?: string;
29	29		limit?: number;
30	30		title?: string;
31	31		faviconURL?: string;
	32	+	action?: "enable" \| "disable";
32	33		}
33	34
34	35		export interface FindMatch {

M gui/src/components/toast/ToastContainer.svelte +2 -0


@@ -49,6 +49,8 @@
49	49		zoomDebounceTimer = undefined;
50	50		}
51	51		}
	52	+	// Export for external use
	53	+	window.__dumber_clearToasts = clearAllToasts;
52	54
53	55		function showZoomToast(zoomLevel: number) {
54	56		console.log('[dumber] showZoomToast called with level:', zoomLevel);

M gui/src/injected/bootstrap.ts +3 -2


@@ -16,7 +16,7 @@ import type { Suggestion } from "../components/omnibox/types";
16	16		declare global {
17	17		interface Window {
18	18		__dumber_gui?: DumberGUI;
19		-	__dumber_gui_ready?: boo
	19	+	__dumber_gui_ready?: boolean;
20	20		__dumber_gui_ready_for?: Document \| null;
21	21		__dumber_showToast?: (
22	22		message: string,

@@ -61,13 +61,14 @@ function whenDOMReady(callback: () => void) {
61	61		}
62	62		}
63	63
64		-	function whenPageLoaded(callback: () => void) {
	64	+	function _whenPageLoaded(callback: () => void) {
65	65		if (document.readyState === "complete") {
66	66		callback();
67	67		} else {
68	68		window.addEventListener("load", callback, { once: true });
69	69		}
70	70		}
	71	+	void _whenPageLoaded; // Reserved for future use
71	72
72	73		function normalizeWebviewId(value: unknown): number \| null {
73	74		if (typeof value === "number" && Number.isFinite(value)) {

A gui/src/pages/BlockedPage.svelte +330 -0

@@ -0,0 +1,330 @@
	1	+	<script lang="ts">
	2	+	import { onMount } from 'svelte';
	3	+
	4	+	let blockedUrl = $state('');
	5	+	let blockedDomain = $state('');
	6	+	let reason = $state('Content blocked by filter');
	7	+	let isLoading = $state(false);
	8	+	let error = $state('');
	9	+
	10	+	onMount(() => {
	11	+	// Parse URL parameters
	12	+	const params = new URLSearchParams(window.location.search);
	13	+	blockedUrl = params.get('url') \|\| '';
	14	+	reason = params.get('reason') \|\| 'Content blocked by filter';
	15	+
	16	+	// Extract domain from URL
	17	+	try {
	18	+	if (blockedUrl) {
	19	+	const url = new URL(blockedUrl);
	20	+	blockedDomain = url.hostname;
	21	+	}
	22	+	} catch {
	23	+	blockedDomain = blockedUrl;
	24	+	}
	25	+	});
	26	+
	27	+	function sendMessage(type: string, payload: Record<string, unknown>): Promise<unknown> {
	28	+	return new Promise((resolve, reject) => {
	29	+	const requestId = `blocked_${Date.now()}_${Math.random().toString(36).slice(2)}`;
	30	+
	31	+	const handler = (event: MessageEvent) => {
	32	+	if (event.data?.requestId === requestId) {
	33	+	window.removeEventListener('message', handler);
	34	+	if (event.data.success) {
	35	+	resolve(event.data.data);
	36	+	} else {
	37	+	reject(new Error(event.data.error \|\| 'Unknown error'));
	38	+	}
	39	+	}
	40	+	};
	41	+
	42	+	window.addEventListener('message', handler);
	43	+
	44	+	// Send to WebKit message handler
	45	+	if (window.webkit?.messageHandlers?.dumber) {
	46	+	window.webkit.messageHandlers.dumber.postMessage(
	47	+	JSON.stringify({ type, requestId, payload })
	48	+	);
	49	+	} else {
	50	+	reject(new Error('WebKit message handler not available'));
	51	+	}
	52	+
	53	+	// Timeout after 10 seconds
	54	+	setTimeout(() => {
	55	+	window.removeEventListener('message', handler);
	56	+	reject(new Error('Request timeout'));
	57	+	}, 10000);
	58	+	});
	59	+	}
	60	+
	61	+	async function addToWhitelist() {
	62	+	if (!blockedDomain) return;
	63	+
	64	+	isLoading = true;
	65	+	error = '';
	66	+
	67	+	try {
	68	+	await sendMessage('addToWhitelist', { domain: blockedDomain });
	69	+	// Reload the original URL after whitelisting
	70	+	window.location.href = blockedUrl;
	71	+	} catch (e) {
	72	+	error = e instanceof Error ? e.message : 'Failed to add to whitelist';
	73	+	isLoading = false;
	74	+	}
	75	+	}
	76	+
	77	+	async function bypassOnce() {
	78	+	if (!blockedUrl) return;
	79	+
	80	+	isLoading = true;
	81	+	error = '';
	82	+
	83	+	try {
	84	+	await sendMessage('bypassOnce', { url: blockedUrl });
	85	+	// Reload the original URL after bypass
	86	+	window.location.href = blockedUrl;
	87	+	} catch (e) {
	88	+	error = e instanceof Error ? e.message : 'Failed to bypass';
	89	+	isLoading = false;
	90	+	}
	91	+	}
	92	+
	93	+	function goBack() {
	94	+	window.history.back();
	95	+	}
	96	+	</script>
	97	+
	98	+	<svelte:head>
	99	+	<title>Page Blocked</title>
	100	+	{@html `<style>
	101	+	html, body {
	102	+	background: var(--dynamic-bg, #0a0a0a);
	103	+	margin: 0;
	104	+	padding: 0;
	105	+	min-height: 100vh;
	106	+	}
	107	+	</style>`}
	108	+	</svelte:head>
	109	+
	110	+	<div class="blocked-container">
	111	+	<div class="blocked-card">
	112	+	<div class="icon-container">
	113	+	<svg class="shield-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
	114	+	<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
	115	+	<path d="M9 12l2 2 4-4"/>
	116	+	</svg>
	117	+	</div>
	118	+
	119	+	<h1 class="title">Page Blocked</h1>
	120	+
	121	+	<p class="reason">{reason}</p>
	122	+
	123	+	{#if blockedUrl}
	124	+	<div class="url-display">
	125	+	<span class="url-label">Blocked URL:</span>
	126	+	<code class="url-value">{blockedUrl}</code>
	127	+	</div>
	128	+	{/if}
	129	+
	130	+	{#if error}
	131	+	<div class="error-message">{error}</div>
	132	+	{/if}
	133	+
	134	+	<div class="actions">
	135	+	<button
	136	+	class="btn btn-primary"
	137	+	onclick={addToWhitelist}
	138	+	disabled={isLoading \|\| !blockedDomain}
	139	+	>
	140	+	{#if isLoading}
	141	+	<span class="loading-spinner"></span>
	142	+	{:else}
	143	+	Add to Whitelist
	144	+	{/if}
	145	+	</button>
	146	+
	147	+	<button
	148	+	class="btn btn-secondary"
	149	+	onclick={bypassOnce}
	150	+	disabled={isLoading \|\| !blockedUrl}
	151	+	>
	152	+	Go Anyway (Once)
	153	+	</button>
	154	+
	155	+	<button
	156	+	class="btn btn-ghost"
	157	+	onclick={goBack}
	158	+	disabled={isLoading}
	159	+	>
	160	+	Go Back
	161	+	</button>
	162	+	</div>
	163	+
	164	+	{#if blockedDomain}
	165	+	<p class="domain-note">
	166	+	Adding <strong>{blockedDomain}</strong> to whitelist will disable content filtering for this site.
	167	+	</p>
	168	+	{/if}
	169	+	</div>
	170	+	</div>
	171	+
	172	+	<style>
	173	+	.blocked-container {
	174	+	min-height: 100vh;
	175	+	display: flex;
	176	+	align-items: center;
	177	+	justify-content: center;
	178	+	padding: 2rem;
	179	+	background: var(--dynamic-bg, #0a0a0a);
	180	+	color: var(--dynamic-text, #e5e5e5);
	181	+	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	182	+	}
	183	+
	184	+	.blocked-card {
	185	+	max-width: 480px;
	186	+	width: 100%;
	187	+	padding: 2.5rem 2rem;
	188	+	background: var(--dynamic-surface, #141414);
	189	+	border: 1px solid var(--dynamic-border, #262626);
	190	+	text-align: center;
	191	+	}
	192	+
	193	+	.icon-container {
	194	+	margin-bottom: 1.5rem;
	195	+	}
	196	+
	197	+	.shield-icon {
	198	+	width: 64px;
	199	+	height: 64px;
	200	+	color: var(--dynamic-accent, #3b82f6);
	201	+	opacity: 0.9;
	202	+	}
	203	+
	204	+	.title {
	205	+	font-size: 1.5rem;
	206	+	font-weight: 600;
	207	+	margin: 0 0 0.75rem 0;
	208	+	color: var(--dynamic-text, #e5e5e5);
	209	+	}
	210	+
	211	+	.reason {
	212	+	font-size: 0.9375rem;
	213	+	color: var(--dynamic-muted, #737373);
	214	+	margin: 0 0 1.5rem 0;
	215	+	}
	216	+
	217	+	.url-display {
	218	+	background: var(--dynamic-bg, #0a0a0a);
	219	+	border: 1px solid var(--dynamic-border, #262626);
	220	+	padding: 0.75rem 1rem;
	221	+	margin-bottom: 1.5rem;
	222	+	text-align: left;
	223	+	}
	224	+
	225	+	.url-label {
	226	+	display: block;
	227	+	font-size: 0.75rem;
	228	+	color: var(--dynamic-muted, #737373);
	229	+	margin-bottom: 0.25rem;
	230	+	text-transform: uppercase;
	231	+	letter-spacing: 0.05em;
	232	+	}
	233	+
	234	+	.url-value {
	235	+	font-family: 'JetBrains Mono NF', monospace;
	236	+	font-size: 0.8125rem;
	237	+	color: var(--dynamic-text, #e5e5e5);
	238	+	word-break: break-all;
	239	+	display: block;
	240	+	}
	241	+
	242	+	.error-message {
	243	+	background: rgba(239, 68, 68, 0.1);
	244	+	border: 1px solid rgba(239, 68, 68, 0.3);
	245	+	color: #ef4444;
	246	+	padding: 0.75rem 1rem;
	247	+	margin-bottom: 1.5rem;
	248	+	font-size: 0.875rem;
	249	+	}
	250	+
	251	+	.actions {
	252	+	display: flex;
	253	+	flex-direction: column;
	254	+	gap: 0.75rem;
	255	+	margin-bottom: 1.5rem;
	256	+	}
	257	+
	258	+	.btn {
	259	+	padding: 0.75rem 1.5rem;
	260	+	font-size: 0.875rem;
	261	+	font-weight: 500;
	262	+	border: 1px solid transparent;
	263	+	cursor: pointer;
	264	+	transition: all 150ms ease;
	265	+	display: inline-flex;
	266	+	align-items: center;
	267	+	justify-content: center;
	268	+	gap: 0.5rem;
	269	+	}
	270	+
	271	+	.btn:disabled {
	272	+	opacity: 0.5;
	273	+	cursor: not-allowed;
	274	+	}
	275	+
	276	+	.btn-primary {
	277	+	background: var(--dynamic-accent, #3b82f6);
	278	+	color: white;
	279	+	border-color: var(--dynamic-accent, #3b82f6);
	280	+	}
	281	+
	282	+	.btn-primary:hover:not(:disabled) {
	283	+	filter: brightness(1.1);
	284	+	}
	285	+
	286	+	.btn-secondary {
	287	+	background: transparent;
	288	+	color: var(--dynamic-text, #e5e5e5);
	289	+	border-color: var(--dynamic-border, #262626);
	290	+	}
	291	+
	292	+	.btn-secondary:hover:not(:disabled) {
	293	+	background: var(--dynamic-surface-variant, #1a1a1a);
	294	+	border-color: var(--dynamic-muted, #737373);
	295	+	}
	296	+
	297	+	.btn-ghost {
	298	+	background: transparent;
	299	+	color: var(--dynamic-muted, #737373);
	300	+	border-color: transparent;
	301	+	}
	302	+
	303	+	.btn-ghost:hover:not(:disabled) {
	304	+	color: var(--dynamic-text, #e5e5e5);
	305	+	}
	306	+
	307	+	.loading-spinner {
	308	+	width: 1rem;
	309	+	height: 1rem;
	310	+	border: 2px solid transparent;
	311	+	border-top-color: currentColor;
	312	+	border-radius: 50%;
	313	+	animation: spin 0.6s linear infinite;
	314	+	}
	315	+
	316	+	@keyframes spin {
	317	+	to { transform: rotate(360deg); }
	318	+	}
	319	+
	320	+	.domain-note {
	321	+	font-size: 0.75rem;
	322	+	color: var(--dynamic-muted, #737373);
	323	+	margin: 0;
	324	+	}
	325	+
	326	+	.domain-note strong {
	327	+	color: var(--dynamic-text, #e5e5e5);
	328	+	font-weight: 500;
	329	+	}
	330	+	</style>

M gui/src/pages/Homepage.svelte +12 -1936

@@ -1,1939 +1,15 @@
1	1		<script lang="ts">
2		-	import { onMount } from 'svelte';
3		-	import Footer from '$components/Footer.svelte';
4		-	// Icons disabled for investigation: removed @lucide/svelte imports
5		-
6		-	interface HistoryItem {
7		-	id: number;
8		-	url: string;
9		-	title: string;
10		-	favicon_url?: string;
11		-	visit_count: number;
12		-	last_visited: string;
13		-	created_at: string;
14		-	}
15		-
16		-	interface Shortcut {
17		-	key: string;
18		-	description: string;
19		-	}
20		-
21		-	interface HistoryStats {
22		-	total_entries: number;
23		-	recent_count: number;
24		-	oldest_entry?: string;
25		-	newest_entry?: string;
26		-	}
27		-
28		-	interface SearchShortcut {
29		-	url: string;
30		-	description: string;
31		-	}
32		-
33		-	let historyItems = $state<HistoryItem[]>([]);
34		-	let topVisited = $state<HistoryItem[]>([]);
35		-	let shortcuts = $state<Shortcut[]>([]);
36		-	let stats = $state<HistoryStats \| null>(null);
37		-	let historyLoading = $state(true);
38		-	let topVisitedLoading = $state(true);
39		-	let shortcutsLoading = $state(true);
40		-	let statsLoading = $state(true);
41		-	let searchShortcuts = $state<Record<string, SearchShortcut>>({});
42		-	let searchShortcutsLoading = $state(true);
43		-	let deletingIds = $state<number[]>([]);
44		-	let historyOffset = $state(0);
45		-	let hasMoreHistory = $state(true);
46		-	let loadingMoreHistory = $state(false);
47		-	const MIN_VISIT_COUNT_FOR_QUICK_ACCESS = 2;
48		-	type ThemeMode = "light" \| "dark";
49		-	const THEME_STORAGE_KEY = "dumber.theme";
50		-	let themeMode = $state<ThemeMode>("dark");
51		-	let themeObserver: MutationObserver \| null = null;
52		-	const INITIAL_HISTORY_DISPLAY = 15;
53		-	let showAllHistory = $state(false);
54		-	const PINNED_SITES_STORAGE_KEY = "dumber.pinnedSites";
55		-	let pinnedSites = $state<Set<string>>(new Set());
56		-	let displayedHistoryItems = $derived(
57		-	showAllHistory ? historyItems : historyItems.slice(0, INITIAL_HISTORY_DISPLAY)
58		-	);
59		-
60		-	// Function for checking if an item is being deleted
61		-	const isDeleting = (id: number) => deletingIds.includes(id);
62		-
63		-	// Pinned sites management
64		-	const loadPinnedSites = () => {
65		-	try {
66		-	const stored = localStorage.getItem(PINNED_SITES_STORAGE_KEY);
67		-	if (stored) {
68		-	const urls = JSON.parse(stored) as string[];
69		-	pinnedSites = new Set(urls);
70		-	}
71		-	} catch (error) {
72		-	console.warn("[homepage] Failed to load pinned sites", error);
73		-	pinnedSites = new Set();
74		-	}
75		-	};
76		-
77		-	const savePinnedSites = () => {
78		-	try {
79		-	const urls = Array.from(pinnedSites);
80		-	localStorage.setItem(PINNED_SITES_STORAGE_KEY, JSON.stringify(urls));
81		-	} catch (error) {
82		-	console.warn("[homepage] Failed to save pinned sites", error);
83		-	}
84		-	};
85		-
86		-	const isPinned = (url: string): boolean => pinnedSites.has(url);
87		-
88		-	const togglePin = (url: string) => {
89		-	if (pinnedSites.has(url)) {
90		-	pinnedSites.delete(url);
91		-	} else {
92		-	pinnedSites.add(url);
93		-	}
94		-	pinnedSites = new Set(pinnedSites); // Trigger reactivity
95		-	savePinnedSites();
96		-	};
97		-
98		-	// Initialize shortcuts (these are browser shortcuts, not dynamic from API)
99		-	const initializeShortcuts = () => {
100		-	shortcuts = [
101		-	// Browser shortcuts
102		-	{
103		-	key: 'Ctrl+L',
104		-	description: 'Focus address bar'
105		-	},
106		-	{
107		-	key: 'Ctrl+F',
108		-	description: 'Find in page'
109		-	},
110		-	{
111		-	key: 'Ctrl+Shift+C',
112		-	description: 'Copy URL'
113		-	},
114		-	{
115		-	key: 'Ctrl+R / F5',
116		-	description: 'Reload page'
117		-	},
118		-	{
119		-	key: 'Ctrl+Shift+R',
120		-	description: 'Hard reload'
121		-	},
122		-	{
123		-	key: 'F12',
124		-	description: 'DevTools'
125		-	},
126		-	{
127		-	key: 'Ctrl+← / Ctrl+→',
128		-	description: 'Navigate back/forward'
129		-	},
130		-	{
131		-	key: 'Ctrl+0',
132		-	description: 'Reset zoom'
133		-	},
134		-	{
135		-	key: 'Ctrl++ / Ctrl+-',
136		-	description: 'Zoom in/out'
137		-	},
138		-	// Workspace pane mode
139		-	{
140		-	key: 'Ctrl+P',
141		-	description: 'Enter pane mode'
142		-	},
143		-	{
144		-	key: '→ / R (pane mode)',
145		-	description: 'Split pane right'
146		-	},
147		-	{
148		-	key: '← / L (pane mode)',
149		-	description: 'Split pane left'
150		-	},
151		-	{
152		-	key: '↑ / U (pane mode)',
153		-	description: 'Split pane up'
154		-	},
155		-	{
156		-	key: '↓ / D (pane mode)',
157		-	description: 'Split pane down'
158		-	},
159		-	{
160		-	key: 'X (pane mode)',
161		-	description: 'Close current pane'
162		-	},
163		-	{
164		-	key: 'Enter (pane mode)',
165		-	description: 'Confirm action'
166		-	},
167		-	{
168		-	key: 'Escape (pane mode)',
169		-	description: 'Exit pane mode'
170		-	},
171		-	// Workspace navigation
172		-	{
173		-	key: 'Alt+Arrow Keys',
174		-	description: 'Navigate between panes'
175		-	}
176		-	];
177		-	shortcutsLoading = false;
178		-	};
179		-
180		-	// Setup message bridge callbacks (once)
181		-	let callbacksInitialized = false;
182		-	const pendingRequests = new Map();
183		-
184		-	const initializeCallbacks = () => {
185		-	if (callbacksInitialized) return;
186		-
187		-	(window as any).__dumber_history_recent = (data: any[], requestId?: string) => {
188		-	const request = pendingRequests.get(requestId \|\| 'default');
189		-	if (request) {
190		-	request.resolve(data);
191		-	pendingRequests.delete(requestId \|\| 'default');
192		-	}
193		-	};
194		-
195		-	(window as any).__dumber_history_error = (error: string, requestId?: string) => {
196		-	const request = pendingRequests.get(requestId \|\| 'default');
197		-	if (request) {
198		-	request.reject(new Error(error));
199		-	pendingRequests.delete(requestId \|\| 'default');
200		-	}
201		-	};
202		-
203		-	// Omnibox suggestions callback - forward to injected script via DOM event bridge
204		-	let _pendingSuggestions: any[] \| null = null;
205		-	(window as any).__dumber_omnibox_suggestions = (suggestions: any[]) => {
206		-	try {
207		-	console.log('🎯 [HOMEPAGE] Received omnibox suggestions:', suggestions?.length \|\| 0, 'items');
208		-	// Dispatch an event that injected-world listener can consume
209		-	const evt = new CustomEvent('dumber:omnibox-suggestions', {
210		-	detail: { suggestions }
211		-	});
212		-	document.dispatchEvent(evt);
213		-	_pendingSuggestions = null; // clear cache on successful dispatch
214		-	} catch (err) {
215		-	console.warn('⚠️ [HOMEPAGE] Failed to dispatch suggestions event, caching:', err);
216		-	_pendingSuggestions = suggestions;
217		-	}
218		-	};
219		-
220		-	// If omnibox gets ready later, re-send any pending suggestions
221		-	document.addEventListener('dumber:omnibox-ready', () => {
222		-	if (_pendingSuggestions && Array.isArray(_pendingSuggestions)) {
223		-	try {
224		-	const evt = new CustomEvent('dumber:omnibox-suggestions', {
225		-	detail: { suggestions: _pendingSuggestions }
226		-	});
227		-	document.dispatchEvent(evt);
228		-	_pendingSuggestions = null;
229		-	console.log('🔄 [HOMEPAGE] Re-dispatched pending suggestions after omnibox-ready');
230		-	} catch (e) {
231		-	console.warn('⚠️ [HOMEPAGE] Failed to re-dispatch pending suggestions:', e);
232		-	}
233		-	}
234		-	});
235		-
236		-	callbacksInitialized = true;
237		-	};
238		-
239		-	const sendHistoryRequest = (type: string, params: any): Promise<any[]> => {
240		-	initializeCallbacks();
241		-
242		-	const requestId = `${type}_${Date.now()}_${Math.random()}`;
243		-
244		-	return new Promise((resolve, reject) => {
245		-	pendingRequests.set(requestId, { resolve, reject });
246		-
247		-	// Timeout after 10 seconds
248		-	setTimeout(() => {
249		-	if (pendingRequests.has(requestId)) {
250		-	pendingRequests.delete(requestId);
251		-	reject(new Error('Request timeout'));
252		-	}
253		-	}, 10000);
254		-
255		-	try {
256		-	const bridge = (window as any).webkit?.messageHandlers?.dumber;
257		-	if (bridge && typeof bridge.postMessage === 'function') {
258		-	bridge.postMessage(JSON.stringify({
259		-	...params,
260		-	type,
261		-	requestId
262		-	}));
263		-	} else {
264		-	reject(new Error('WebKit message handler not available'));
265		-	}
266		-	} catch (error) {
267		-	pendingRequests.delete(requestId);
268		-	reject(error);
269		-	}
270		-	});
271		-	};
272		-
273		-	// Fetch recent history via message bridge
274		-	const fetchHistory = async () => {
275		-	try {
276		-	const data = await sendHistoryRequest('history_recent', {
277		-	limit: 20,
278		-	offset: 0
279		-	});
280		-
281		-	historyItems = Array.isArray(data) ? data : [];
282		-	historyOffset = historyItems.length;
283		-	hasMoreHistory = data.length === 20;
284		-	} catch (error) {
285		-	console.error('Error fetching history:', error);
286		-	historyItems = [];
287		-	hasMoreHistory = false;
288		-	} finally {
289		-	historyLoading = false;
290		-	}
291		-	};
292		-
293		-	// Load more history items for infinite scroll
294		-	const loadMoreHistory = async () => {
295		-	if (loadingMoreHistory \|\| !hasMoreHistory) return;
296		-
297		-	loadingMoreHistory = true;
298		-	try {
299		-	const data = await sendHistoryRequest('history_recent', {
300		-	limit: 20,
301		-	offset: historyOffset
302		-	});
303		-
304		-	if (Array.isArray(data) && data.length > 0) {
305		-	historyItems = [...historyItems, ...data];
306		-	historyOffset += data.length;
307		-	hasMoreHistory = data.length === 20; // If we got full batch, there might be more
308		-	} else {
309		-	hasMoreHistory = false;
310		-	}
311		-	} catch (error) {
312		-	console.error('Error fetching more history:', error);
313		-	hasMoreHistory = false;
314		-	} finally {
315		-	loadingMoreHistory = false;
316		-	}
317		-	};
318		-
319		-	// Navigate to a URL when history item is clicked
320		-	const navigateTo = (url: string) => {
321		-	window.location.href = url;
322		-	};
323		-
324		-	// Delete a history entry
325		-	const deleteHistoryEntry = async (id: number, event: Event) => {
326		-	event.stopPropagation(); // Prevent navigation
327		-
328		-	// Add to deleting array for animation
329		-	if (!deletingIds.includes(id)) {
330		-	deletingIds = [...deletingIds, id];
331		-	}
332		-
333		-	try {
334		-	// Set up response handlers
335		-	(window as any).__dumber_history_deleted = async () => {
336		-	// Wait a bit for the fade animation to complete
337		-	await new Promise(resolve => setTimeout(resolve, 200));
338		-
339		-	// Reset pagination and refresh history after successful deletion
340		-	historyOffset = 0;
341		-	hasMoreHistory = true;
342		-	await fetchHistory();
343		-	await fetchStats();
344		-	await fetchTopVisited();
345		-
346		-	// Remove from deleting array after refresh
347		-	deletingIds = deletingIds.filter(i => i !== id);
348		-	};
349		-
350		-	(window as any).__dumber_history_error = (error: string) => {
351		-	console.error('Error deleting history entry:', error);
352		-	// Remove from deleting array if failed
353		-	deletingIds = deletingIds.filter(i => i !== id);
354		-	};
355		-
356		-	// Send message to Go backend
357		-	const bridge = (window as any).webkit?.messageHandlers?.dumber;
358		-	if (bridge && typeof bridge.postMessage === 'function') {
359		-	bridge.postMessage(JSON.stringify({
360		-	type: 'history_delete',
361		-	historyId: id.toString()
362		-	}));
363		-	} else {
364		-	throw new Error('WebKit message handler not available');
365		-	}
366		-	} catch (error) {
367		-	console.error('Error sending delete request:', error);
368		-	// Remove from deleting array if failed
369		-	deletingIds = deletingIds.filter(i => i !== id);
370		-	}
371		-	};
372		-
373		-	// Get domain from URL
374		-	const getDomain = (url: string): string => {
375		-	try {
376		-	return new URL(url).hostname;
377		-	} catch {
378		-	return url;
379		-	}
380		-	};
381		-
382		-	const getDisplayTitle = (item: HistoryItem): string => {
383		-	if (!item) return '';
384		-	const trimmed = item.title?.trim();
385		-	if (trimmed) return trimmed;
386		-	const domain = getDomain(item.url);
387		-	return domain \|\| item.url;
388		-	};
389		-
390		-	const highlightDomainInUrl = (url: string): string => {
391		-	try {
392		-	const urlObj = new URL(url);
393		-	const domain = urlObj.hostname;
394		-	const domainStart = url.indexOf(domain);
395		-
396		-	if (domainStart === -1) return url;
397		-
398		-	const beforeDomain = url.slice(0, domainStart);
399		-	const afterDomain = url.slice(domainStart + domain.length);
400		-
401		-	return `${beforeDomain}<span class="history-url-domain">${domain}</span>${afterDomain}`;
402		-	} catch {
403		-	return url;
404		-	}
405		-	};
406		-
407		-	// Format relative time
408		-	const formatTime = (timestamp: string): string => {
409		-	try {
410		-	const date = new Date(timestamp);
411		-	const now = new Date();
412		-	const diff = now.getTime() - date.getTime();
413		-
414		-	const minutes = Math.floor(diff / (1000 * 60));
415		-	const hours = Math.floor(diff / (1000 * 60 * 60));
416		-	const days = Math.floor(diff / (1000 * 60 * 60 * 24));
417		-
418		-	if (minutes < 1) return 'Just now';
419		-	if (minutes < 60) return `${minutes}m ago`;
420		-	if (hours < 24) return `${hours}h ago`;
421		-	if (days < 7) return `${days}d ago`;
422		-
423		-	return date.toLocaleDateString();
424		-	} catch {
425		-	return '';
426		-	}
427		-	};
428		-
429		-	const formatCalendarDate = (timestamp?: string): string => {
430		-	if (!timestamp) return '—';
431		-	try {
432		-	const date = new Date(timestamp);
433		-	return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
434		-	} catch {
435		-	return '—';
436		-	}
437		-	};
438		-
439		-	const formatVisitLabel = (count: number): string => {
440		-	if (!count \|\| count <= 0) return 'Open';
441		-	if (count >= 1000) {
442		-	const value = count / 1000;
443		-	const formatted = value >= 10 ? Math.round(value).toString() : value.toFixed(1).replace(/\.0$/, '');
444		-	return `${formatted}k visits`;
445		-	}
446		-	return `${count} ${count === 1 ? 'visit' : 'visits'}`;
447		-	};
448		-
449		-	const buildQuickAccess = (): HistoryItem[] => {
450		-	const picks: HistoryItem[] = [];
451		-	const seen = new Set<string>();
452		-
453		-	const pushItem = (item: HistoryItem \| null \| undefined) => {
454		-	if (!item) return;
455		-	if (seen.has(item.url)) return;
456		-	seen.add(item.url);
457		-	picks.push(item);
458		-	};
459		-
460		-	// First, add pinned sites (no visit count requirement for pinned)
461		-	for (const item of topVisited ?? []) {
462		-	if (pinnedSites.has(item.url)) {
463		-	pushItem(item);
464		-	}
465		-	}
466		-
467		-	for (const item of historyItems ?? []) {
468		-	if (pinnedSites.has(item.url)) {
469		-	pushItem(item);
470		-	}
471		-	}
472		-
473		-	// Then add most visited sites (non-pinned, with minimum visit count)
474		-	for (const item of topVisited ?? []) {
475		-	if (!pinnedSites.has(item.url) && item.visit_count >= MIN_VISIT_COUNT_FOR_QUICK_ACCESS) {
476		-	pushItem(item);
477		-	}
478		-	}
479		-
480		-	// Finally add recent history (non-pinned, with minimum visit count)
481		-	for (const item of historyItems ?? []) {
482		-	if (!pinnedSites.has(item.url) && item.visit_count >= MIN_VISIT_COUNT_FOR_QUICK_ACCESS) {
483		-	pushItem(item);
484		-	}
485		-	}
486		-
487		-	return picks;
488		-	};
489		-
490		-	let quickAccess = $derived<HistoryItem[]>((pinnedSites.size, buildQuickAccess()));
491		-	let quickAccessLoading = $derived(topVisitedLoading \|\| historyLoading);
492		-	interface LatestVisitMeta {
493		-	entry: HistoryItem;
494		-	relative: string;
495		-	absolute: string;
496		-	domain: string;
497		-	title: string;
498		-	}
499		-
500		-	const latestVisitInfo = $derived<LatestVisitMeta \| null>((() => {
501		-	if (!historyItems.length) return null;
502		-
503		-	let latest: HistoryItem \| null = null;
504		-	let latestEpoch = Number.NEGATIVE_INFINITY;
505		-
506		-	for (const entry of historyItems) {
507		-	const epoch = Number(new Date(entry.last_visited));
508		-	if (!Number.isFinite(epoch)) continue;
509		-	if (epoch > latestEpoch) {
510		-	latest = entry;
511		-	latestEpoch = epoch;
512		-	}
513		-	}
514		-
515		-	if (!latest) return null;
516		-
517		-	return {
518		-	entry: latest,
519		-	relative: formatTime(latest.last_visited),
520		-	absolute: formatCalendarDate(latest.last_visited),
521		-	domain: getDomain(latest.url),
522		-	title: getDisplayTitle(latest)
523		-	};
524		-	})());
525		-
526		-	const persistTheme = (mode: ThemeMode) => {
527		-	try {
528		-	localStorage.setItem(THEME_STORAGE_KEY, mode);
529		-	} catch (error) {
530		-	console.warn("[homepage] Failed to persist theme preference", error);
531		-	}
532		-	};
533		-
534		-	const applyTheme = (mode: ThemeMode) => {
535		-	themeMode = mode;
536		-
537		-	const manager = (window as any).__dumber_color_scheme_manager as
538		-	\| { setUserPreference?: (theme: ThemeMode) => void }
539		-	\| undefined;
540		-
541		-	if (manager?.setUserPreference) {
542		-	manager.setUserPreference(mode);
543		-	return;
544		-	}
545		-
546		-	if (window.__dumber_setTheme) {
547		-	window.__dumber_setTheme(mode);
548		-	persistTheme(mode);
549		-	return;
550		-	}
551		-
552		-	switch (mode) {
553		-	case "light":
554		-	document.documentElement.classList.add("light");
555		-	document.documentElement.classList.remove("dark");
556		-	break;
557		-	case "dark":
558		-	document.documentElement.classList.remove("light");
559		-	document.documentElement.classList.add("dark");
560		-	break;
561		-	}
562		-	persistTheme(mode);
563		-	};
564		-
565		-	const toggleTheme = () => {
566		-	const nextMode = themeMode === "dark" ? "light" : "dark";
567		-	applyTheme(nextMode);
568		-	};
569		-
570		-	// Fetch history stats via message bridge
571		-	const fetchStats = async () => {
572		-	try {
573		-	// Set up response handler
574		-	(window as any).__dumber_history_stats = (data: any) => {
575		-	stats = data;
576		-	statsLoading = false;
577		-	};
578		-
579		-	(window as any).__dumber_history_error = (error: string) => {
580		-	console.error('Error fetching stats:', error);
581		-	stats = null;
582		-	statsLoading = false;
583		-	};
584		-
585		-	// Send message to Go backend
586		-	const bridge = (window as any).webkit?.messageHandlers?.dumber;
587		-	if (bridge && typeof bridge.postMessage === 'function') {
588		-	bridge.postMessage(JSON.stringify({
589		-	type: 'history_stats'
590		-	}));
591		-	} else {
592		-	throw new Error('WebKit message handler not available');
593		-	}
594		-	} catch (error) {
595		-	console.error('Error sending stats request:', error);
596		-	stats = null;
597		-	statsLoading = false;
598		-	}
599		-	};
600		-
601		-	// Fetch top visited sites via message bridge
602		-	const fetchTopVisited = async () => {
603		-	try {
604		-	// Set up response handler
605		-	(window as any).__dumber_history_search = (data: any[]) => {
606		-	// Sort by visit_count in descending order and take top 5
607		-	const sortedData = Array.isArray(data) ?
608		-	data.sort((a, b) => (b.visit_count \|\| 0) - (a.visit_count \|\| 0)).slice(0, 5) : [];
609		-	topVisited = sortedData;
610		-	topVisitedLoading = false;
611		-	};
612		-
613		-	(window as any).__dumber_history_error = (error: string) => {
614		-	console.error('Error fetching top visited:', error);
615		-	topVisited = [];
616		-	topVisitedLoading = false;
617		-	};
618		-
619		-	// Send message to Go backend
620		-	const bridge = (window as any).webkit?.messageHandlers?.dumber;
621		-	if (bridge && typeof bridge.postMessage === 'function') {
622		-	bridge.postMessage(JSON.stringify({
623		-	type: 'history_search',
624		-	q: '',
625		-	limit: 50 // Get more results to sort properly
626		-	}));
627		-	} else {
628		-	throw new Error('WebKit message handler not available');
629		-	}
630		-	} catch (error) {
631		-	console.error('Error sending top visited request:', error);
632		-	topVisited = [];
633		-	topVisitedLoading = false;
634		-	}
635		-	};
636		-
637		-	// Fetch search shortcuts via message bridge
638		-	const fetchSearchShortcuts = async () => {
639		-	try {
640		-	// Set up response handler
641		-	(window as any).__dumber_search_shortcuts = (data: unknown) => {
642		-	try {
643		-	if (typeof data !== 'object' \|\| data === null) {
644		-	throw new Error('Invalid shortcuts data');
645		-	}
646		-	const dataObj = data as Record<string, unknown>;
647		-	const normalized: Record<string, SearchShortcut> = {};
648		-	for (const [key, value] of Object.entries(dataObj)) {
649		-	const v = value as Record<string, unknown>;
650		-	normalized[key] = {
651		-	url: (v.url ?? v.URL ?? '') as string,
652		-	description: (v.description ?? v.Description ?? '') as string,
653		-	};
654		-	}
655		-	searchShortcuts = normalized;
656		-	searchShortcutsLoading = false;
657		-	} catch (error) {
658		-	console.error('Failed to process search shortcuts:', error);
659		-	searchShortcuts = {};
660		-	searchShortcutsLoading = false;
661		-	}
662		-	};
663		-
664		-	// Send message to Go backend
665		-	const bridge = (window as any).webkit?.messageHandlers?.dumber;
666		-	if (bridge && typeof bridge.postMessage === 'function') {
667		-	bridge.postMessage(JSON.stringify({
668		-	type: 'get_search_shortcuts'
669		-	}));
670		-	} else {
671		-	throw new Error('WebKit message handler not available');
672		-	}
673		-	} catch (error) {
674		-	console.error('Error fetching search shortcuts:', error);
675		-	searchShortcuts = {};
676		-	searchShortcutsLoading = false;
677		-	}
678		-	};
679		-
680		-	// Intersection Observer for infinite scroll
681		-	let historyScrollSentinel = $state<HTMLElement \| null>(null);
682		-
683		-	const setupInfiniteScroll = () => {
684		-	if (!historyScrollSentinel) return;
685		-
686		-	const observer = new IntersectionObserver(
687		-	(entries) => {
688		-	const entry = entries[0];
689		-	if (entry && entry.isIntersecting && hasMoreHistory && !loadingMoreHistory) {
690		-	loadMoreHistory();
691		-	}
692		-	},
693		-	{
694		-	threshold: 0.1,
695		-	rootMargin: '50px'
696		-	}
697		-	);
698		-
699		-	observer.observe(historyScrollSentinel);
700		-
701		-	return () => observer.disconnect();
702		-	};
703		-
704		-	// Helper to check if text overflows and apply truncation class
705		-	const checkOverflow = (node: HTMLElement) => {
706		-	const check = () => {
707		-	// Add 1px tolerance for sub-pixel rendering differences
708		-	// This prevents false positives from rounding errors
709		-	const isOverflowing = node.scrollWidth > (node.clientWidth + 1);
710		-
711		-	if (isOverflowing) {
712		-	node.classList.add('truncated');
713		-	} else {
714		-	node.classList.remove('truncated');
715		-	}
716		-	};
717		-
718		-	// Delay initial check to ensure layout is complete
719		-	requestAnimationFrame(() => {
720		-	requestAnimationFrame(check);
721		-	});
722		-
723		-	const resizeObserver = new ResizeObserver(() => {
724		-	requestAnimationFrame(check);
725		-	});
726		-
727		-	resizeObserver.observe(node);
728		-
729		-	return {
730		-	destroy() {
731		-	resizeObserver.disconnect();
732		-	}
733		-	};
734		-	};
735		-
736		-	onMount(() => {
737		-	loadPinnedSites();
738		-	initializeShortcuts();
739		-	fetchHistory().then(() => {
740		-	// Setup infinite scroll after initial history is loaded
741		-	setTimeout(setupInfiniteScroll, 100);
742		-	});
743		-	fetchStats();
744		-	fetchTopVisited();
745		-	fetchSearchShortcuts();
746		-
747		-	// Theme synchronization
748		-	const syncThemeState = () => {
749		-	themeMode = document.documentElement.classList.contains("dark")
750		-	? "dark"
751		-	: "light";
752		-	};
753		-	syncThemeState();
754		-	themeObserver = new MutationObserver(syncThemeState);
755		-	themeObserver.observe(document.documentElement, {
756		-	attributes: true,
757		-	attributeFilter: ["class"],
758		-	});
759		-
760		-	return () => {
761		-	themeObserver?.disconnect();
762		-	themeObserver = null;
763		-	};
764		-	});
765		-
766		-
	2	+	import { HomepageShell } from './homepage/shell';
	3	+	import { HistoryPanel, FavoritesPanel, AnalyticsPanel } from './homepage/panels';
	4	+	import { homepageState } from './homepage/state.svelte';
767	5		</script>
768	6
769		-	<svelte:head>
770		-	<title>Dumber Browser - Homepage</title>
771		-	<meta name="description" content="Fast Wayland Browser - Your browsing patterns at a glance" />
772		-
773		-	{@html `<style>
774		-	html { background: var(--dynamic-bg, #0a0a0a); }
775		-	body { background: var(--dynamic-bg, #0a0a0a); color: var(--dynamic-text, #e5e5e5); }
776		-	</style>`}
777		-
778		-	{@html `<script>
779		-	(function() {
780		-	const theme = localStorage.getItem('dumber.theme');
781		-	const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
782		-	const shouldBeLight = theme === 'light' \|\| (theme !== 'dark' && !prefersDark);
783		-	if (shouldBeLight) {
784		-	document.documentElement.classList.add('light');
785		-	}
786		-	})();
787		-	</script>`}
788		-	</svelte:head>
789		-
790		-	<div class="homepage-shell">
791		-	<div class="terminal-frame">
792		-	<header class="terminal-header">
793		-	<div class="terminal-heading">
794		-	<span class="terminal-path">dumb://home</span>
795		-	<span class="terminal-meta">
796		-	{statsLoading ? 'syncing…' : `${stats?.recent_count ?? 0} recent`}
797		-	· {historyItems.length} entries
798		-	· {pinnedSites.size} pinned
799		-	</span>
800		-	</div>
801		-	<button
802		-	class="theme-toggle-button"
803		-	type="button"
804		-	aria-pressed={themeMode === "dark"}
805		-	title={themeMode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
806		-	onclick={toggleTheme}
807		-	>
808		-	<span class="sr-only">
809		-	{themeMode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
810		-	</span>
811		-	{#if themeMode === "dark"}
812		-	<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
813		-	<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
814		-	</svg>
815		-	{:else}
816		-	<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
817		-	<circle cx="12" cy="12" r="5" fill="currentColor" />
818		-	<g stroke="currentColor" stroke-width="2" stroke-linecap="round">
819		-	<line x1="12" y1="1" x2="12" y2="4" />
820		-	<line x1="12" y1="20" x2="12" y2="23" />
821		-	<line x1="4.22" y1="4.22" x2="6.34" y2="6.34" />
822		-	<line x1="17.66" y1="17.66" x2="19.78" y2="19.78" />
823		-	<line x1="1" y1="12" x2="4" y2="12" />
824		-	<line x1="20" y1="12" x2="23" y2="12" />
825		-	<line x1="4.22" y1="19.78" x2="6.34" y2="17.66" />
826		-	<line x1="17.66" y1="6.34" x2="19.78" y2="4.22" />
827		-	</g>
828		-	</svg>
829		-	{/if}
830		-	</button>
831		-	</header>
832		-
833		-	<div class="terminal-body">
834		-	<div class="terminal-status-row">
835		-	<div class="status-chip">
836		-	<span class="chip-label">history</span>
837		-	<span class="chip-value">{historyItems.length}</span>
838		-	</div>
839		-	<div class="status-chip">
840		-	<span class="chip-label">pinned</span>
841		-	<span class="chip-value">{pinnedSites.size}</span>
842		-	</div>
843		-	<div class="status-chip">
844		-	<span class="chip-label">quick-links</span>
845		-	<span class="chip-value">{quickAccess.length}</span>
846		-	</div>
847		-	{#if stats && stats.total_entries}
848		-	<div class="status-chip">
849		-	<span class="chip-label">stored</span>
850		-	<span class="chip-value">{stats.total_entries}</span>
851		-	</div>
852		-	{/if}
853		-	</div>
854		-
855		-	<div
856		-	class="last-visit-banner"
857		-	role="button"
858		-	tabindex={latestVisitInfo ? 0 : -1}
859		-	onclick={() => latestVisitInfo && navigateTo(latestVisitInfo.entry.url)}
860		-	onkeydown={(event) => {
861		-	if (event.key === 'Enter' && latestVisitInfo) {
862		-	navigateTo(latestVisitInfo.entry.url);
863		-	}
864		-	}}
865		-	aria-label={latestVisitInfo ? `Open ${latestVisitInfo.title}` : 'No recorded visits'}
866		-	>
867		-	<span class="banner-label">last-visit</span>
868		-	{#if latestVisitInfo}
869		-	<span class="banner-title" use:checkOverflow>
870		-	{latestVisitInfo.title}
871		-	</span>
872		-	<span class="banner-domain">{latestVisitInfo.domain}</span>
873		-	<span class="banner-time">{latestVisitInfo.relative}</span>
874		-	<span class="banner-absolute">{latestVisitInfo.absolute}</span>
875		-	{:else}
876		-	<span class="banner-empty">none recorded yet</span>
877		-	{/if}
878		-	</div>
879		-
880		-	<div class="terminal-grid main-panels">
881		-	<section class="history-panel terminal-pane">
882		-	<div class="panel-header">
883		-	<h2 class="panel-title">Recent History</h2>
884		-	<p class="panel-subtitle">Scroll to revisit anything from your latest sessions.</p>
885		-	</div>
886		-	<div class="panel-body history-body">
887		-	{#if historyLoading}
888		-	<div class="loading">Loading history...</div>
889		-	{:else if historyItems.length === 0}
890		-	<div class="empty-state">
891		-	<h3>No history yet</h3>
892		-	<p>Start browsing to see your recent history here.</p>
893		-	</div>
894		-	{:else}
895		-	<div class="history-list">
896		-	{#each displayedHistoryItems as item (item.id)}
897		-	<div
898		-	class="history-item"
899		-	class:deleting={isDeleting(item.id)}
900		-	role="button"
901		-	tabindex="0"
902		-	onclick={() => navigateTo(item.url)}
903		-	onkeydown={(e) => e.key === 'Enter' && navigateTo(item.url)}
904		-	>
905		-	<div class="history-item-leading">
906		-	{#if item.favicon_url}
907		-	<img
908		-	src={item.favicon_url}
909		-	alt=""
910		-	class="history-favicon-img"
911		-	onerror={(e) => {
912		-	const target = e.target as HTMLImageElement;
913		-	if (target) {
914		-	target.style.display = 'none';
915		-	const fallback = target.nextElementSibling as HTMLElement;
916		-	if (fallback) fallback.style.display = 'flex';
917		-	}
918		-	}}
919		-	onload={(e) => {
920		-	const target = e.target as HTMLImageElement;
921		-	if (target) {
922		-	const fallback = target.nextElementSibling as HTMLElement;
923		-	if (fallback) fallback.style.display = 'none';
924		-	}
925		-	}}
926		-	/>
927		-	<div class="history-favicon-fallback" style="display: none;">
928		-	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
929		-	<circle cx="12" cy="12" r="10" />
930		-	<path d="M2 12h20" />
931		-	</svg>
932		-	</div>
933		-	{:else}
934		-	<div class="history-favicon-fallback">
935		-	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
936		-	<circle cx="12" cy="12" r="10" />
937		-	<path d="M2 12h20" />
938		-	</svg>
939		-	</div>
940		-	{/if}
941		-	</div>
942		-	<div class="history-item-content">
943		-	<div class="history-item-main">
944		-	<div class="history-title" use:checkOverflow>
945		-	{getDisplayTitle(item)}
946		-	</div>
947		-	<div class="history-time">{formatTime(item.last_visited)}</div>
948		-	</div>
949		-	<div class="history-url" use:checkOverflow>
950		-	{@html highlightDomainInUrl(item.url)}
951		-	</div>
952		-	</div>
953		-	<div class="history-actions">
954		-	<div
955		-	class="history-pin"
956		-	role="button"
957		-	tabindex="0"
958		-	onclick={(e) => { e.stopPropagation(); togglePin(item.url); }}
959		-	onkeydown={(e) => { if (e.key === 'Enter') { e.stopPropagation(); togglePin(item.url); } }}
960		-	title={isPinned(item.url) ? "Unpin from favorites" : "Pin to favorites"}
961		-	>
962		-	{#if isPinned(item.url)}
963		-	<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
964		-	<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
965		-	</svg>
966		-	{:else}
967		-	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" stroke-linecap="round" aria-hidden="true">
968		-	<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
969		-	</svg>
970		-	{/if}
971		-	</div>
972		-	<div
973		-	class="history-delete"
974		-	role="button"
975		-	tabindex="0"
976		-	onclick={(e) => deleteHistoryEntry(item.id, e)}
977		-	onkeydown={(e) => e.key === 'Enter' && deleteHistoryEntry(item.id, e)}
978		-	title="Delete this entry"
979		-	>
980		-	<span aria-hidden="true">×</span>
981		-	</div>
982		-	</div>
983		-	</div>
984		-	{/each}
985		-
986		-	{#if !showAllHistory && historyItems.length > INITIAL_HISTORY_DISPLAY}
987		-	<button
988		-	class="show-more-button"
989		-	onclick={() => showAllHistory = true}
990		-	type="button"
991		-	>
992		-	Show {historyItems.length - INITIAL_HISTORY_DISPLAY} more items
993		-	</button>
994		-	{:else if showAllHistory && hasMoreHistory}
995		-	<div bind:this={historyScrollSentinel} class="scroll-sentinel"></div>
996		-	{#if loadingMoreHistory}
997		-	<div class="loading-more">Loading more history...</div>
998		-	{/if}
999		-	{/if}
1000		-	</div>
1001		-	{/if}
1002		-	</div>
1003		-	</section>
1004		-
1005		-	<section class="quick-access-panel terminal-pane">
1006		-	<div class="panel-header">
1007		-	<h2 class="panel-title">Jump back in</h2>
1008		-	<p class="panel-subtitle">Direct access to the sites you like the most.</p>
1009		-	</div>
1010		-	<div class="panel-body quick-access-body">
1011		-	{#if quickAccessLoading}
1012		-	<div class="loading">Preparing your shortcuts...</div>
1013		-	{:else if quickAccess.length === 0}
1014		-	<div class="empty-state compact">
1015		-	<h3>No quick links yet</h3>
1016		-	<p>Browse a few sites and we'll surface your frequent destinations here.</p>
1017		-	</div>
1018		-	{:else}
1019		-	<div class="quick-access-grid-compact">
1020		-	{#each quickAccess as item (item.id)}
1021		-	<div
1022		-	class="quick-access-item-compact"
1023		-	role="button"
1024		-	tabindex="0"
1025		-	onclick={() => navigateTo(item.url)}
1026		-	onkeydown={(e) => e.key === 'Enter' && navigateTo(item.url)}
1027		-	>
1028		-	<div class="quick-access-favicon-compact">
1029		-	{#if item.favicon_url}
1030		-	<img
1031		-	src={item.favicon_url}
1032		-	alt=""
1033		-	class="quick-access-favicon-img-compact"
1034		-	onerror={(e) => {
1035		-	const target = e.target as HTMLImageElement;
1036		-	if (target) {
1037		-	target.style.display = 'none';
1038		-	const fallback = target.nextElementSibling as HTMLElement;
1039		-	if (fallback) fallback.style.display = 'flex';
1040		-	}
1041		-	}}
1042		-	onload={(e) => {
1043		-	const target = e.target as HTMLImageElement;
1044		-	if (target) {
1045		-	const fallback = target.nextElementSibling as HTMLElement;
1046		-	if (fallback) fallback.style.display = 'none';
1047		-	}
1048		-	}}
1049		-	/>
1050		-	<div class="quick-access-fallback-compact" style="display: none;">
1051		-	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
1052		-	<circle cx="12" cy="12" r="10" />
1053		-	<path d="M2 12h20" />
1054		-	</svg>
1055		-	</div>
1056		-	{:else}
1057		-	<div class="quick-access-fallback-compact">
1058		-	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
1059		-	<circle cx="12" cy="12" r="10" />
1060		-	<path d="M2 12h20" />
1061		-	</svg>
1062		-	</div>
1063		-	{/if}
1064		-	</div>
1065		-	<div class="quick-access-meta-compact">
1066		-	<div class="quick-access-title-compact" use:checkOverflow>
1067		-	{getDisplayTitle(item)}
1068		-	</div>
1069		-	<div class="quick-access-domain-compact">{getDomain(item.url)}</div>
1070		-	</div>
1071		-	<div class="quick-access-actions-compact">
1072		-	<div
1073		-	class="quick-access-pin-compact"
1074		-	role="button"
1075		-	tabindex="0"
1076		-	onclick={(e) => { e.stopPropagation(); togglePin(item.url); }}
1077		-	onkeydown={(e) => { if (e.key === 'Enter') { e.stopPropagation(); togglePin(item.url); } }}
1078		-	title={isPinned(item.url) ? "Unpin from favorites" : "Pin to favorites"}
1079		-	>
1080		-	{#if isPinned(item.url)}
1081		-	<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
1082		-	<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
1083		-	</svg>
1084		-	{:else}
1085		-	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" stroke-linecap="round" aria-hidden="true">
1086		-	<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
1087		-	</svg>
1088		-	{/if}
1089		-	</div>
1090		-	<div class="quick-access-visits-compact">{formatVisitLabel(item.visit_count)}</div>
1091		-	</div>
1092		-	</div>
1093		-	{/each}
1094		-	</div>
1095		-	{/if}
1096		-	</div>
1097		-	</section>
1098		-	</div>
1099		-
1100		-	<section class="search-shortcuts-panel terminal-pane full-width">
1101		-	<div class="panel-header">
1102		-	<h2 class="panel-title">Search Shortcuts</h2>
1103		-	<p class="panel-subtitle">Quick search prefixes for faster browsing.</p>
1104		-	</div>
1105		-	<div class="panel-body">
1106		-	{#if searchShortcutsLoading}
1107		-	<div class="loading">Loading search shortcuts...</div>
1108		-	{:else if Object.keys(searchShortcuts).length === 0}
1109		-	<div class="empty-state compact">
1110		-	<h3>No shortcuts configured</h3>
1111		-	<p>Add search shortcuts to your config file.</p>
1112		-	</div>
1113		-	{:else}
1114		-	<div class="shortcuts-list">
1115		-	{#each Object.entries(searchShortcuts) as [key, shortcut] (key)}
1116		-	<div class="shortcut-item">
1117		-	<div class="shortcut-key-badge">{key}:</div>
1118		-	<div class="shortcut-desc">{shortcut.description.toLowerCase()}</div>
1119		-	</div>
1120		-	{/each}
1121		-	</div>
1122		-	{/if}
1123		-	</div>
1124		-	</section>
1125		-
1126		-	<section class="shortcuts-panel terminal-pane full-width">
1127		-	<div class="panel-header">
1128		-	<h2 class="panel-title">Keyboard Shortcuts</h2>
1129		-	<p class="panel-subtitle">Stay quick with the essentials.</p>
1130		-	</div>
1131		-	<div class="panel-body">
1132		-	{#if shortcutsLoading}
1133		-	<div class="loading">Loading shortcuts...</div>
1134		-	{:else}
1135		-	<div class="shortcuts-list">
1136		-	{#each shortcuts as shortcut (shortcut.key)}
1137		-	<div class="shortcut-item">
1138		-	<div class="shortcut-key-badge">{shortcut.key}</div>
1139		-	<div class="shortcut-desc">{shortcut.description}</div>
1140		-	</div>
1141		-	{/each}
1142		-	</div>
1143		-	{/if}
1144		-	</div>
1145		-	</section>
1146		-
1147		-	<section class="stats-panel terminal-pane full-width">
1148		-	<div class="panel-header">
1149		-	<h2 class="panel-title">Usage Stats</h2>
1150		-	<p class="panel-subtitle">Your browsing activity at a glance.</p>
1151		-	</div>
1152		-	<div class="panel-body">
1153		-	{#if statsLoading}
1154		-	<div class="loading">Loading stats...</div>
1155		-	{:else if stats}
1156		-	<div class="stats-grid-horizontal">
1157		-	<div class="stat-item-horizontal">
1158		-	<div class="stat-value">{stats.total_entries}</div>
1159		-	<div class="stat-label">Entries Stored</div>
1160		-	</div>
1161		-	<div class="stat-item-horizontal">
1162		-	<div class="stat-value">{stats.recent_count}</div>
1163		-	<div class="stat-label">Recent Window</div>
1164		-	</div>
1165		-	{#if stats.newest_entry}
1166		-	<div class="stat-item-horizontal">
1167		-	<div class="stat-value">{formatTime(stats.newest_entry)}</div>
1168		-	<div class="stat-label">Newest Visit</div>
1169		-	</div>
1170		-	{/if}
1171		-	{#if stats.oldest_entry}
1172		-	<div class="stat-item-horizontal">
1173		-	<div class="stat-value">{formatCalendarDate(stats.oldest_entry)}</div>
1174		-	<div class="stat-label">Oldest Entry</div>
1175		-	</div>
1176		-	{/if}
1177		-	</div>
1178		-	{:else}
1179		-	<div class="empty-state compact">
1180		-	<p>No statistics available</p>
1181		-	</div>
1182		-	{/if}
1183		-	</div>
1184		-	</section>
1185		-	</div>
1186		-	</div>
1187		-
1188		-	<Footer />
1189		-	</div>
1190		-
1191		-	<style>
1192		-	.homepage-shell {
1193		-	min-height: 100vh;
1194		-	color: var(--dynamic-text);
1195		-	display: flex;
1196		-	flex-direction: column;
1197		-	padding: clamp(1.5rem, 4vw, 2.5rem);
1198		-	font-family:
1199		-	"JetBrains Mono",
1200		-	"Fira Code",
1201		-	"SFMono-Regular",
1202		-	Menlo,
1203		-	monospace;
1204		-	line-height: 1.45;
1205		-	}
1206		-
1207		-	.homepage-shell * {
1208		-	box-sizing: border-box;
1209		-	}
1210		-
1211		-	.terminal-frame {
1212		-	flex: 1;
1213		-	width: 100%;
1214		-	max-width: 1160px;
1215		-	margin: 0 auto;
1216		-	display: flex;
1217		-	flex-direction: column;
1218		-	border: 1px solid var(--dynamic-border);
1219		-	background: color-mix(in srgb, var(--dynamic-surface) 80%, var(--dynamic-bg) 20%);
1220		-	box-shadow:
1221		-	inset 0 0 0 1px color-mix(in srgb, var(--dynamic-border) 30%, transparent),
1222		-	0 16px 28px -24px rgb(0 0 0 / 0.6);
1223		-	}
1224		-
1225		-	.terminal-header {
1226		-	display: flex;
1227		-	align-items: center;
1228		-	justify-content: space-between;
1229		-	gap: 1rem;
1230		-	padding: 0.85rem 1.1rem;
1231		-	border-bottom: 1px solid var(--dynamic-border);
1232		-	background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
1233		-	text-transform: uppercase;
1234		-	letter-spacing: 0.08em;
1235		-	font-size: 0.78rem;
1236		-	}
1237		-
1238		-	.terminal-heading {
1239		-	display: flex;
1240		-	flex-direction: column;
1241		-	gap: 0.35rem;
1242		-	}
1243		-
1244		-	.terminal-path {
1245		-	font-weight: 600;
1246		-	color: var(--dynamic-text);
1247		-	}
1248		-
1249		-	.terminal-meta {
1250		-	color: var(--dynamic-muted);
1251		-	font-size: 0.72rem;
1252		-	letter-spacing: 0.12em;
1253		-	}
1254		-
1255		-	.theme-toggle-button {
1256		-	width: 2.5rem;
1257		-	height: 2.5rem;
1258		-	display: inline-flex;
1259		-	align-items: center;
1260		-	justify-content: center;
1261		-	border: 1px solid var(--dynamic-border);
1262		-	background-color: var(--dynamic-bg);
1263		-	color: var(--dynamic-muted);
1264		-	transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
1265		-	border-radius: 0;
1266		-	cursor: pointer;
1267		-	}
1268		-
1269		-	.theme-toggle-button:hover,
1270		-	.theme-toggle-button:focus-visible {
1271		-	border-color: color-mix(in srgb, var(--dynamic-border) 45%, var(--dynamic-text) 55%);
1272		-	color: var(--dynamic-text);
1273		-	background-color: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);
1274		-	outline: none;
1275		-	}
1276		-
1277		-	.theme-toggle-button svg {
1278		-	width: 1.3rem;
1279		-	height: 1.3rem;
1280		-	}
1281		-
1282		-	.sr-only {
1283		-	position: absolute;
1284		-	width: 1px;
1285		-	height: 1px;
1286		-	padding: 0;
1287		-	margin: -1px;
1288		-	overflow: hidden;
1289		-	clip: rect(0, 0, 0, 0);
1290		-	white-space: nowrap;
1291		-	border: 0;
1292		-	}
1293		-
1294		-	.terminal-body {
1295		-	display: flex;
1296		-	flex-direction: column;
1297		-	gap: 1.25rem;
1298		-	padding: 1.25rem 1.5rem 1.5rem;
1299		-	background: var(--dynamic-bg);
1300		-	}
1301		-
1302		-	.terminal-status-row {
1303		-	display: flex;
1304		-	flex-wrap: wrap;
1305		-	gap: 0.75rem;
1306		-	}
1307		-
1308		-	.status-chip {
1309		-	display: inline-flex;
1310		-	align-items: center;
1311		-	gap: 0.5rem;
1312		-	padding: 0.45rem 0.8rem;
1313		-	border: 1px solid var(--dynamic-border);
1314		-	background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
1315		-	font-size: 0.68rem;
1316		-	letter-spacing: 0.1em;
1317		-	text-transform: uppercase;
1318		-	color: var(--dynamic-muted);
1319		-	}
1320		-
1321		-	.status-chip .chip-value {
1322		-	color: var(--dynamic-text);
1323		-	font-weight: 600;
1324		-	}
1325		-
1326		-	.last-visit-banner {
1327		-	margin-top: 0.9rem;
1328		-	display: grid;
1329		-	grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(120px, auto) minmax(120px, auto) minmax(120px, auto);
1330		-	gap: 0.75rem;
1331		-	align-items: center;
1332		-	padding: 0.75rem 1rem;
1333		-	border: 1px solid var(--dynamic-border);
1334		-	background: color-mix(in srgb, var(--dynamic-bg) 90%, var(--dynamic-surface) 10%);
1335		-	color: var(--dynamic-text);
1336		-	text-transform: uppercase;
1337		-	letter-spacing: 0.08em;
1338		-	transition: background-color 150ms ease, border-color 150ms ease;
1339		-	cursor: pointer;
1340		-	}
1341		-
1342		-	.last-visit-banner:hover,
1343		-	.last-visit-banner:focus-visible {
1344		-	background: color-mix(in srgb, var(--dynamic-bg) 72%, var(--dynamic-surface) 28%);
1345		-	border-color: color-mix(in srgb, var(--dynamic-border) 45%, var(--dynamic-text) 55%);
1346		-	outline: none;
1347		-	}
1348		-
1349		-	.last-visit-banner[tabindex="-1"],
1350		-	.last-visit-banner[tabindex="-1"]:hover {
1351		-	cursor: default;
1352		-	background: color-mix(in srgb, var(--dynamic-bg) 95%, var(--dynamic-surface) 5%);
1353		-	}
1354		-
1355		-	.banner-label {
1356		-	color: var(--dynamic-muted);
1357		-	font-size: 0.68rem;
1358		-	}
1359		-
1360		-	.banner-title {
1361		-	font-weight: 600;
1362		-	white-space: nowrap;
1363		-	overflow: hidden;
1364		-	letter-spacing: 0.06em;
1365		-	}
1366		-
1367		-	:global(.banner-title.truncated) {
1368		-	mask-image: linear-gradient(to right, black 85%, transparent 100%);
1369		-	-webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
1370		-	}
1371		-
1372		-	.banner-domain {
1373		-	color: var(--dynamic-muted);
1374		-	font-size: 0.68rem;
1375		-	letter-spacing: 0.1em;
1376		-	}
1377		-
1378		-	.banner-time {
1379		-	font-size: 0.72rem;
1380		-	color: var(--dynamic-text);
1381		-	white-space: nowrap;
1382		-	}
1383		-
1384		-	.banner-absolute {
1385		-	font-size: 0.68rem;
1386		-	color: var(--dynamic-muted);
1387		-	white-space: nowrap;
1388		-	}
1389		-
1390		-	.banner-empty {
1391		-	grid-column: 2 / -1;
1392		-	color: var(--dynamic-muted);
1393		-	font-size: 0.72rem;
1394		-	letter-spacing: 0.1em;
1395		-	}
1396		-
1397		-	.terminal-grid {
1398		-	display: grid;
1399		-	gap: 1rem;
1400		-	}
1401		-
1402		-	.main-panels {
1403		-	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
1404		-	}
1405		-
1406		-	.terminal-pane {
1407		-	border: 1px solid var(--dynamic-border);
1408		-	background: color-mix(in srgb, var(--dynamic-bg) 88%, var(--dynamic-surface) 12%);
1409		-	display: flex;
1410		-	flex-direction: column;
1411		-	min-height: 0;
1412		-	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dynamic-border) 18%, transparent);
1413		-	}
1414		-
1415		-	.terminal-pane.full-width {
1416		-	width: 100%;
1417		-	grid-column: 1 / -1;
1418		-	}
1419		-
1420		-	.panel-header {
1421		-	display: flex;
1422		-	flex-direction: column;
1423		-	gap: 0.3rem;
1424		-	padding: 1rem 1.1rem;
1425		-	border-bottom: 1px solid var(--dynamic-border);
1426		-	background: color-mix(in srgb, var(--dynamic-bg) 75%, transparent);
1427		-	}
1428		-
1429		-	.panel-title {
1430		-	margin: 0;
1431		-	font-size: 0.95rem;
1432		-	text-transform: uppercase;
1433		-	letter-spacing: 0.08em;
1434		-	color: var(--dynamic-text);
1435		-	}
1436		-
1437		-	.panel-subtitle {
1438		-	margin: 0;
1439		-	font-size: 0.72rem;
1440		-	color: var(--dynamic-muted);
1441		-	letter-spacing: 0.1em;
1442		-	text-transform: uppercase;
1443		-	}
1444		-
1445		-	.panel-body {
1446		-	padding: 1.1rem 1.1rem 1.25rem;
1447		-	display: flex;
1448		-	flex-direction: column;
1449		-	gap: 1.1rem;
1450		-	min-height: 0;
1451		-	overflow: hidden;
1452		-	}
1453		-
1454		-	.loading {
1455		-	padding: 0.9rem;
1456		-	text-align: center;
1457		-	color: var(--dynamic-muted);
1458		-	border: 1px dashed var(--dynamic-border);
1459		-	background-color: color-mix(in srgb, var(--dynamic-bg) 85%, var(--dynamic-surface) 15%);
1460		-	text-transform: uppercase;
1461		-	letter-spacing: 0.08em;
1462		-	font-size: 0.7rem;
1463		-	}
1464		-
1465		-	.empty-state {
1466		-	border: 1px dashed var(--dynamic-border);
1467		-	padding: 1.4rem;
1468		-	display: flex;
1469		-	flex-direction: column;
1470		-	gap: 0.5rem;
1471		-	align-items: center;
1472		-	text-align: center;
1473		-	color: var(--dynamic-muted);
1474		-	background-color: color-mix(in srgb, var(--dynamic-bg) 90%, var(--dynamic-surface) 10%);
1475		-	letter-spacing: 0.06em;
1476		-	}
1477		-
1478		-	.empty-state h3 {
1479		-	margin: 0;
1480		-	color: var(--dynamic-text);
1481		-	font-size: 0.9rem;
1482		-	text-transform: uppercase;
1483		-	}
1484		-
1485		-	.empty-state p {
1486		-	margin: 0;
1487		-	font-size: 0.72rem;
1488		-	}
1489		-
1490		-	.empty-state.compact {
1491		-	padding: 1rem;
1492		-	}
1493		-
1494		-	.history-body {
1495		-	gap: 0.75rem;
1496		-	display: flex;
1497		-	flex-direction: column;
1498		-	min-height: 0;
1499		-	overflow: hidden;
1500		-	}
1501		-
1502		-	.history-list {
1503		-	display: flex;
1504		-	flex-direction: column;
1505		-	flex: 1;
1506		-	min-height: 0;
1507		-	overflow-y: auto;
1508		-	border: 1px solid var(--dynamic-border);
1509		-	background: color-mix(in srgb, var(--dynamic-bg) 95%, var(--dynamic-surface) 5%);
1510		-	}
1511		-
1512		-	.history-item {
1513		-	display: grid;
1514		-	grid-template-columns: auto 1fr auto;
1515		-	align-items: center;
1516		-	gap: 0.75rem;
1517		-	padding: 0.6rem 0.9rem;
1518		-	border-bottom: 1px dashed var(--dynamic-border);
1519		-	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
1520		-	}
1521		-
1522		-	.history-item:last-child {
1523		-	border-bottom: none;
1524		-	}
1525		-
1526		-	.history-item:hover,
1527		-	.history-item:focus-visible {
1528		-	background: color-mix(in srgb, var(--dynamic-bg) 65%, var(--dynamic-surface) 35%);
1529		-	outline: none;
1530		-	}
1531		-
1532		-	.history-item.deleting {
1533		-	opacity: 0.35;
1534		-	pointer-events: none;
1535		-	transform: translateX(4px);
1536		-	}
1537		-
1538		-	.history-item-leading {
1539		-	width: 38px;
1540		-	height: 38px;
1541		-	border: 1px solid var(--dynamic-border);
1542		-	background-color: var(--dynamic-bg);
1543		-	display: flex;
1544		-	align-items: center;
1545		-	justify-content: center;
1546		-	flex-shrink: 0;
1547		-	}
1548		-
1549		-	.history-favicon-img {
1550		-	width: 60%;
1551		-	height: 60%;
1552		-	object-fit: contain;
1553		-	}
1554		-
1555		-	.history-favicon-fallback {
1556		-	display: flex;
1557		-	align-items: center;
1558		-	justify-content: center;
1559		-	width: 100%;
1560		-	height: 100%;
1561		-	color: var(--dynamic-muted);
1562		-	}
1563		-
1564		-	.history-favicon-fallback svg {
1565		-	opacity: 0.55;
1566		-	}
1567		-
1568		-	.history-item-content {
1569		-	display: flex;
1570		-	flex-direction: column;
1571		-	gap: 0.2rem;
1572		-	min-width: 0;
1573		-	}
1574		-
1575		-	.history-item-main {
1576		-	display: flex;
1577		-	align-items: center;
1578		-	justify-content: space-between;
1579		-	gap: 0.75rem;
1580		-	}
1581		-
1582		-	.history-title {
1583		-	font-weight: 600;
1584		-	color: var(--dynamic-text);
1585		-	white-space: nowrap;
1586		-	overflow: hidden;
1587		-	}
1588		-
1589		-	:global(.history-title.truncated) {
1590		-	mask-image: linear-gradient(to right, black 85%, transparent 100%);
1591		-	-webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
1592		-	}
1593		-
1594		-	.history-title:hover {
1595		-	cursor: pointer;
1596		-	}
1597		-
1598		-	.history-time {
1599		-	font-size: 0.72rem;
1600		-	color: var(--dynamic-muted);
1601		-	text-transform: uppercase;
1602		-	letter-spacing: 0.08em;
1603		-	white-space: nowrap;
1604		-	}
1605		-
1606		-	.history-url {
1607		-	font-size: 0.72rem;
1608		-	color: var(--dynamic-muted);
1609		-	white-space: nowrap;
1610		-	overflow: hidden;
1611		-	}
1612		-
1613		-	:global(.history-url.truncated) {
1614		-	mask-image: linear-gradient(to right, black 85%, transparent 100%);
1615		-	-webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
1616		-	}
1617		-
1618		-	.history-url :global(.history-url-domain) {
1619		-	color: var(--dynamic-text) !important;
1620		-	font-weight: 600;
1621		-	}
1622		-
1623		-	.history-actions {
1624		-	display: flex;
1625		-	gap: 0.35rem;
1626		-	}
1627		-
1628		-	.history-pin,
1629		-	.history-delete {
1630		-	display: inline-flex;
1631		-	align-items: center;
1632		-	justify-content: center;
1633		-	width: 28px;
1634		-	height: 28px;
1635		-	border: 1px solid var(--dynamic-border);
1636		-	color: var(--dynamic-muted);
1637		-	background: transparent;
1638		-	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
1639		-	}
1640		-
1641		-	.history-pin:hover,
1642		-	.history-pin:focus-visible,
1643		-	.history-delete:hover,
1644		-	.history-delete:focus-visible {
1645		-	color: var(--dynamic-text);
1646		-	border-color: color-mix(in srgb, var(--dynamic-border) 45%, var(--dynamic-text) 55%);
1647		-	background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);
1648		-	outline: none;
1649		-	}
1650		-
1651		-	.scroll-sentinel {
1652		-	height: 1px;
1653		-	}
1654		-
1655		-	.loading-more {
1656		-	padding: 0.75rem;
1657		-	font-size: 0.7rem;
1658		-	text-align: center;
1659		-	color: var(--dynamic-muted);
1660		-	letter-spacing: 0.08em;
1661		-	text-transform: uppercase;
1662		-	}
1663		-
1664		-	.quick-access-body {
1665		-	gap: 0.9rem;
1666		-	}
1667		-
1668		-	.quick-access-grid-compact {
1669		-	display: flex;
1670		-	flex-direction: column;
1671		-	gap: 0.75rem;
1672		-	}
1673		-
1674		-	.quick-access-item-compact {
1675		-	border: 1px solid var(--dynamic-border);
1676		-	background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
1677		-	padding: 0.75rem 0.9rem;
1678		-	display: grid;
1679		-	grid-template-columns: auto 1fr auto;
1680		-	gap: 0.75rem;
1681		-	align-items: center;
1682		-	transition: background-color 150ms ease, border-color 150ms ease;
1683		-	cursor: pointer;
1684		-	}
1685		-
1686		-	.quick-access-item-compact:hover,
1687		-	.quick-access-item-compact:focus-visible {
1688		-	border-color: color-mix(in srgb, var(--dynamic-border) 45%, var(--dynamic-text) 55%);
1689		-	background: color-mix(in srgb, var(--dynamic-bg) 70%, var(--dynamic-surface) 30%);
1690		-	outline: none;
1691		-	}
1692		-
1693		-	.quick-access-favicon-compact {
1694		-	width: 36px;
1695		-	height: 36px;
1696		-	border: 1px solid var(--dynamic-border);
1697		-	display: flex;
1698		-	align-items: center;
1699		-	justify-content: center;
1700		-	background: var(--dynamic-bg);
1701		-	}
1702		-
1703		-	.quick-access-favicon-img-compact {
1704		-	width: 60%;
1705		-	height: 60%;
1706		-	object-fit: contain;
1707		-	}
1708		-
1709		-	.quick-access-fallback-compact {
1710		-	display: flex;
1711		-	align-items: center;
1712		-	justify-content: center;
1713		-	width: 100%;
1714		-	height: 100%;
1715		-	color: var(--dynamic-muted);
1716		-	}
1717		-
1718		-	.quick-access-fallback-compact svg {
1719		-	opacity: 0.55;
1720		-	}
1721		-
1722		-	.quick-access-meta-compact {
1723		-	display: flex;
1724		-	flex-direction: column;
1725		-	gap: 0.2rem;
1726		-	min-width: 0;
1727		-	}
1728		-
1729		-	.quick-access-title-compact {
1730		-	color: var(--dynamic-text);
1731		-	font-weight: 600;
1732		-	white-space: nowrap;
1733		-	overflow: hidden;
1734		-	}
1735		-
1736		-	:global(.quick-access-title-compact.truncated) {
1737		-	mask-image: linear-gradient(to right, black 85%, transparent 100%);
1738		-	-webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
1739		-	}
1740		-
1741		-	.quick-access-title-compact:hover {
1742		-	cursor: pointer;
1743		-	}
1744		-
1745		-	.quick-access-domain-compact {
1746		-	color: var(--dynamic-muted);
1747		-	font-size: 0.72rem;
1748		-	text-transform: uppercase;
1749		-	letter-spacing: 0.08em;
1750		-	}
1751		-
1752		-	.quick-access-actions-compact {
1753		-	display: flex;
1754		-	flex-direction: column;
1755		-	gap: 0.3rem;
1756		-	align-items: flex-end;
1757		-	justify-content: center;
1758		-	}
1759		-
1760		-	.quick-access-pin-compact {
1761		-	display: inline-flex;
1762		-	align-items: center;
1763		-	justify-content: center;
1764		-	width: 26px;
1765		-	height: 26px;
1766		-	border: 1px solid var(--dynamic-border);
1767		-	color: var(--dynamic-muted);
1768		-	background: transparent;
1769		-	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
1770		-	cursor: pointer;
1771		-	}
1772		-
1773		-	.quick-access-pin-compact:hover,
1774		-	.quick-access-pin-compact:focus-visible {
1775		-	color: var(--dynamic-text);
1776		-	border-color: color-mix(in srgb, var(--dynamic-border) 45%, var(--dynamic-text) 55%);
1777		-	background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);
1778		-	outline: none;
1779		-	}
1780		-
1781		-	.quick-access-pin-compact svg {
1782		-	width: 14px;
1783		-	height: 14px;
1784		-	}
1785		-
1786		-	.quick-access-visits-compact {
1787		-	font-size: 0.7rem;
1788		-	color: var(--dynamic-muted);
1789		-	text-transform: uppercase;
1790		-	letter-spacing: 0.08em;
1791		-	}
1792		-
1793		-	.show-more-button {
1794		-	width: 100%;
1795		-	padding: 0.65rem 0.75rem;
1796		-	border: 1px solid var(--dynamic-border);
1797		-	background: transparent;
1798		-	color: var(--dynamic-muted);
1799		-	font-size: 0.72rem;
1800		-	text-transform: uppercase;
1801		-	letter-spacing: 0.08em;
1802		-	cursor: pointer;
1803		-	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
1804		-	border-radius: 0;
1805		-	}
1806		-
1807		-	.show-more-button:hover,
1808		-	.show-more-button:focus-visible {
1809		-	background: color-mix(in srgb, var(--dynamic-bg) 75%, var(--dynamic-surface) 25%);
1810		-	color: var(--dynamic-text);
1811		-	border-color: color-mix(in srgb, var(--dynamic-border) 45%, var(--dynamic-text) 55%);
1812		-	outline: none;
1813		-	}
1814		-
1815		-	.stats-grid-horizontal {
1816		-	display: grid;
1817		-	gap: 0.85rem;
1818		-	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
1819		-	}
1820		-
1821		-	.stat-item-horizontal {
1822		-	border: 1px solid var(--dynamic-border);
1823		-	padding: 0.85rem;
1824		-	display: flex;
1825		-	flex-direction: column;
1826		-	gap: 0.4rem;
1827		-	background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
1828		-	text-transform: uppercase;
1829		-	letter-spacing: 0.08em;
1830		-	}
1831		-
1832		-	.stat-value {
1833		-	font-size: 0.95rem;
1834		-	color: var(--dynamic-text);
1835		-	font-weight: 600;
1836		-	}
1837		-
1838		-	.stat-label {
1839		-	font-size: 0.68rem;
1840		-	color: var(--dynamic-muted);
1841		-	}
1842		-
1843		-	.shortcuts-list {
1844		-	display: grid;
1845		-	grid-template-columns: repeat(2, 1fr);
1846		-	gap: 0.6rem;
1847		-	}
1848		-
1849		-	.shortcut-item {
1850		-	display: grid;
1851		-	grid-template-columns: auto 1fr;
1852		-	gap: 0.6rem;
1853		-	align-items: center;
1854		-	border: 1px solid var(--dynamic-border);
1855		-	padding: 0.6rem 0.75rem;
1856		-	background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
1857		-	}
1858		-
1859		-	.shortcut-key-badge {
1860		-	font-size: 0.72rem;
1861		-	text-transform: uppercase;
1862		-	letter-spacing: 0.08em;
1863		-	padding: 0.25rem 0.6rem;
1864		-	border: 1px solid var(--dynamic-border);
1865		-	color: var(--dynamic-text);
1866		-	background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);
1867		-	}
1868		-
1869		-	.shortcut-desc {
1870		-	font-size: 0.72rem;
1871		-	color: var(--dynamic-muted);
1872		-	letter-spacing: 0.06em;
1873		-	}
1874		-
1875		-	@media (max-width: 960px) {
1876		-	.terminal-body {
1877		-	padding: 1.1rem;
1878		-	}
1879		-
1880		-	.terminal-grid {
1881		-	gap: 0.75rem;
1882		-	}
1883		-
1884		-	.main-panels {
1885		-	grid-template-columns: 1fr;
1886		-	}
1887		-
1888		-	.last-visit-banner {
1889		-	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
1890		-	grid-template-rows: repeat(3, auto);
1891		-	gap: 0.5rem 0.75rem;
1892		-	}
1893		-
1894		-	.banner-time,
1895		-	.banner-absolute {
1896		-	justify-self: flex-start;
1897		-	}
1898		-	}
1899		-
1900		-	@media (max-width: 640px) {
1901		-	.homepage-shell {
1902		-	padding: 1.25rem;
1903		-	}
1904		-
1905		-	.terminal-header {
1906		-	flex-direction: column;
1907		-	align-items: flex-start;
1908		-	}
1909		-
1910		-	.theme-toggle-button {
1911		-	align-self: flex-end;
1912		-	}
1913		-
1914		-	.terminal-status-row {
1915		-	gap: 0.5rem;
1916		-	}
1917		-
1918		-	.status-chip {
1919		-	padding: 0.35rem 0.65rem;
1920		-	}
1921		-
1922		-	.last-visit-banner {
1923		-	grid-template-columns: minmax(0, 1fr);
1924		-	grid-template-rows: repeat(4, auto);
1925		-	}
1926		-
1927		-	.banner-label,
1928		-	.banner-title,
1929		-	.banner-domain,
1930		-	.banner-time,
1931		-	.banner-absolute {
1932		-	justify-self: flex-start;
1933		-	}
1934		-
1935		-	.shortcuts-list {
1936		-	grid-template-columns: 1fr;
1937		-	}
1938		-	}
1939		-	</style>
	7	+	<HomepageShell>
	8	+	{#if homepageState.activePanel === 'history'}
	9	+	<HistoryPanel />
	10	+	{:else if homepageState.activePanel === 'favorites'}
	11	+	<FavoritesPanel />
	12	+	{:else if homepageState.activePanel === 'analytics'}
	13	+	<AnalyticsPanel />
	14	+	{/if}
	15	+	</HomepageShell>

A gui/src/pages/blocked.ts +15 -0

@@ -0,0 +1,15 @@
	1	+	import { mount } from "svelte";
	2	+	import "../styles/tailwind.css";
	3	+	import BlockedPage from "./BlockedPage.svelte";
	4	+	import { bootstrapGUI } from "../injected/bootstrap";
	5	+
	6	+	bootstrapGUI();
	7	+
	8	+	// Mount the BlockedPage component to the DOM
	9	+	console.log("[dumber] Mounting BlockedPage component to document.body");
	10	+	try {
	11	+	const app = mount(BlockedPage, { target: document.body });
	12	+	console.log("[dumber] BlockedPage component mounted successfully", app);
	13	+	} catch (error) {
	14	+	console.error("[dumber] Failed to mount BlockedPage component:", error);
	15	+	}

A gui/src/pages/homepage/favorites/FavoriteCard.svelte +260 -0

@@ -0,0 +1,260 @@
	1	+	<script lang="ts">
	2	+	import type { Favorite } from '../types';
	3	+
	4	+	interface Props {
	5	+	favorite: Favorite;
	6	+	focused?: boolean;
	7	+	onSelect?: (fav: Favorite) => void;
	8	+	onEdit?: (fav: Favorite) => void;
	9	+	}
	10	+
	11	+	let { favorite, focused = false, onSelect, onEdit }: Props = $props();
	12	+
	13	+	const getDomain = (url: string): string => {
	14	+	try {
	15	+	return new URL(url).hostname.replace('www.', '');
	16	+	} catch {
	17	+	return url;
	18	+	}
	19	+	};
	20	+
	21	+	const getDisplayTitle = (fav: Favorite): string => {
	22	+	const trimmed = fav.title?.trim();
	23	+	if (trimmed) return trimmed;
	24	+	return getDomain(fav.url) \|\| fav.url;
	25	+	};
	26	+
	27	+	const handleSelect = () => {
	28	+	onSelect?.(favorite);
	29	+	};
	30	+
	31	+	const handleEdit = (e: Event) => {
	32	+	e.stopPropagation();
	33	+	onEdit?.(favorite);
	34	+	};
	35	+
	36	+	const handleKeyDown = (e: KeyboardEvent) => {
	37	+	switch (e.key) {
	38	+	case 'Enter':
	39	+	handleSelect();
	40	+	break;
	41	+	case 'e':
	42	+	onEdit?.(favorite);
	43	+	break;
	44	+	}
	45	+	};
	46	+	</script>
	47	+
	48	+	<div
	49	+	class="favorite-card"
	50	+	class:focused
	51	+	role="button"
	52	+	tabindex="0"
	53	+	data-favorite-id={favorite.id}
	54	+	onclick={handleSelect}
	55	+	onkeydown={handleKeyDown}
	56	+	>
	57	+	<div class="card-favicon">
	58	+	{#if favorite.favicon_url}
	59	+	<img
	60	+	src={favorite.favicon_url}
	61	+	alt=""
	62	+	class="favicon-img"
	63	+	onerror={(e) => {
	64	+	const target = e.target as HTMLImageElement;
	65	+	target.style.display = 'none';
	66	+	const fallback = target.nextElementSibling as HTMLElement;
	67	+	if (fallback) fallback.style.display = 'flex';
	68	+	}}
	69	+	/>
	70	+	<div class="favicon-fallback" style="display: none;"></div>
	71	+	{:else}
	72	+	<div class="favicon-fallback"></div>
	73	+	{/if}
	74	+	{#if favorite.shortcut_key}
	75	+	<div class="shortcut-badge">{favorite.shortcut_key}</div>
	76	+	{/if}
	77	+	</div>
	78	+
	79	+	<div class="card-content">
	80	+	<span class="card-title">{getDisplayTitle(favorite)}</span>
	81	+	<span class="card-domain">{getDomain(favorite.url)}</span>
	82	+	</div>
	83	+
	84	+	{#if favorite.tags && favorite.tags.length > 0}
	85	+	<div class="card-tags">
	86	+	{#each favorite.tags.slice(0, 2) as tag (tag.id)}
	87	+	<span class="tag-chip" style="--tag-color: {tag.color}">
	88	+	{tag.name}
	89	+	</span>
	90	+	{/each}
	91	+	{#if favorite.tags.length > 2}
	92	+	<span class="tag-more">+{favorite.tags.length - 2}</span>
	93	+	{/if}
	94	+	</div>
	95	+	{/if}
	96	+
	97	+	<div class="card-actions">
	98	+	<button
	99	+	class="action-btn"
	100	+	type="button"
	101	+	onclick={handleEdit}
	102	+	title="Edit (e)"
	103	+	>
	104	+
	105	+	</button>
	106	+	</div>
	107	+	</div>
	108	+
	109	+	<style>
	110	+	.favorite-card {
	111	+	display: grid;
	112	+	grid-template-columns: auto 1fr auto auto;
	113	+	align-items: center;
	114	+	gap: 0.75rem;
	115	+	padding: 0.65rem 0.85rem;
	116	+	border: 1px solid var(--dynamic-border);
	117	+	background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
	118	+	transition: all 100ms ease;
	119	+	cursor: pointer;
	120	+	}
	121	+
	122	+	.favorite-card:hover,
	123	+	.favorite-card.focused {
	124	+	background: color-mix(in srgb, var(--dynamic-surface) 40%, var(--dynamic-bg) 60%);
	125	+	border-color: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);
	126	+	}
	127	+
	128	+	.favorite-card.focused {
	129	+	outline: 1px solid var(--dynamic-accent, #4ade80);
	130	+	outline-offset: -1px;
	131	+	}
	132	+
	133	+	.card-favicon {
	134	+	position: relative;
	135	+	width: 32px;
	136	+	height: 32px;
	137	+	border: 1px solid var(--dynamic-border);
	138	+	background: var(--dynamic-bg);
	139	+	display: flex;
	140	+	align-items: center;
	141	+	justify-content: center;
	142	+	flex-shrink: 0;
	143	+	}
	144	+
	145	+	.favicon-img {
	146	+	width: 18px;
	147	+	height: 18px;
	148	+	object-fit: contain;
	149	+	}
	150	+
	151	+	.favicon-fallback {
	152	+	width: 18px;
	153	+	height: 18px;
	154	+	display: flex;
	155	+	align-items: center;
	156	+	justify-content: center;
	157	+	color: var(--dynamic-muted);
	158	+	}
	159	+
	160	+	.favicon-fallback::before {
	161	+	content: '';
	162	+	font-size: 0.9rem;
	163	+	}
	164	+
	165	+	.shortcut-badge {
	166	+	position: absolute;
	167	+	bottom: -4px;
	168	+	right: -4px;
	169	+	width: 14px;
	170	+	height: 14px;
	171	+	display: flex;
	172	+	align-items: center;
	173	+	justify-content: center;
	174	+	font-size: 0.55rem;
	175	+	font-weight: 700;
	176	+	color: var(--dynamic-bg);
	177	+	background: var(--dynamic-accent, #4ade80);
	178	+	border: 1px solid var(--dynamic-bg);
	179	+	}
	180	+
	181	+	.card-content {
	182	+	display: flex;
	183	+	flex-direction: column;
	184	+	gap: 0.15rem;
	185	+	min-width: 0;
	186	+	}
	187	+
	188	+	.card-title {
	189	+	font-size: 0.8rem;
	190	+	font-weight: 500;
	191	+	color: var(--dynamic-text);
	192	+	white-space: nowrap;
	193	+	overflow: hidden;
	194	+	text-overflow: ellipsis;
	195	+	}
	196	+
	197	+	.card-domain {
	198	+	font-size: 0.65rem;
	199	+	color: var(--dynamic-muted);
	200	+	letter-spacing: 0.06em;
	201	+	white-space: nowrap;
	202	+	overflow: hidden;
	203	+	text-overflow: ellipsis;
	204	+	}
	205	+
	206	+	.card-tags {
	207	+	display: flex;
	208	+	align-items: center;
	209	+	gap: 0.3rem;
	210	+	}
	211	+
	212	+	.tag-chip {
	213	+	font-size: 0.55rem;
	214	+	font-weight: 500;
	215	+	padding: 0.15rem 0.4rem;
	216	+	background: color-mix(in srgb, var(--tag-color) 20%, transparent);
	217	+	border: 1px solid var(--tag-color);
	218	+	color: var(--tag-color);
	219	+	letter-spacing: 0.05em;
	220	+	}
	221	+
	222	+	.tag-more {
	223	+	font-size: 0.55rem;
	224	+	color: var(--dynamic-muted);
	225	+	padding: 0.15rem 0.3rem;
	226	+	border: 1px solid var(--dynamic-border);
	227	+	}
	228	+
	229	+	.card-actions {
	230	+	display: flex;
	231	+	gap: 0.3rem;
	232	+	opacity: 0;
	233	+	transition: opacity 100ms ease;
	234	+	}
	235	+
	236	+	.favorite-card:hover .card-actions,
	237	+	.favorite-card.focused .card-actions {
	238	+	opacity: 1;
	239	+	}
	240	+
	241	+	.action-btn {
	242	+	width: 24px;
	243	+	height: 24px;
	244	+	display: flex;
	245	+	align-items: center;
	246	+	justify-content: center;
	247	+	font-size: 0.8rem;
	248	+	border: 1px solid var(--dynamic-border);
	249	+	background: transparent;
	250	+	color: var(--dynamic-muted);
	251	+	cursor: pointer;
	252	+	transition: all 100ms ease;
	253	+	}
	254	+
	255	+	.action-btn:hover {
	256	+	color: var(--dynamic-text);
	257	+	border-color: var(--dynamic-text);
	258	+	background: color-mix(in srgb, var(--dynamic-surface) 50%, transparent);
	259	+	}
	260	+	</style>

A gui/src/pages/homepage/favorites/FavoriteEditor.svelte +479 -0

@@ -0,0 +1,479 @@
	1	+	<script lang="ts">
	2	+	import type { Favorite, Folder, Tag } from '../types';
	3	+
	4	+	interface Props {
	5	+	favorite: Favorite;
	6	+	folders: Folder[];
	7	+	tags: Tag[];
	8	+	onSave: (updates: Partial<Favorite>) => void;
	9	+	onDelete: (id: number) => void;
	10	+	onClose: () => void;
	11	+	onAssignTag: (favoriteId: number, tagId: number) => void;
	12	+	onRemoveTag: (favoriteId: number, tagId: number) => void;
	13	+	}
	14	+
	15	+	let {
	16	+	favorite,
	17	+	folders,
	18	+	tags,
	19	+	onSave,
	20	+	onDelete,
	21	+	onClose,
	22	+	onAssignTag,
	23	+	onRemoveTag
	24	+	}: Props = $props();
	25	+
	26	+	// Form state
	27	+	let title = $state(favorite.title \|\| '');
	28	+	let folderId = $state<number \| null>(favorite.folder_id);
	29	+	let shortcutKey = $state<number \| null>(favorite.shortcut_key);
	30	+	let confirmDelete = $state(false);
	31	+
	32	+	// Get favorite's current tags
	33	+	const favoriteTags = $derived(favorite.tags \|\| []);
	34	+	const hasTag = (tagId: number) => favoriteTags.some(t => t.id === tagId);
	35	+
	36	+	const handleSave = () => {
	37	+	onSave({
	38	+	id: favorite.id,
	39	+	title: title.trim() \|\| null,
	40	+	folder_id: folderId,
	41	+	shortcut_key: shortcutKey,
	42	+	});
	43	+	onClose();
	44	+	};
	45	+
	46	+	const handleDelete = () => {
	47	+	if (!confirmDelete) {
	48	+	confirmDelete = true;
	49	+	return;
	50	+	}
	51	+	onDelete(favorite.id);
	52	+	onClose();
	53	+	};
	54	+
	55	+	const handleTagClick = (tagId: number) => {
	56	+	if (hasTag(tagId)) {
	57	+	onRemoveTag(favorite.id, tagId);
	58	+	} else {
	59	+	onAssignTag(favorite.id, tagId);
	60	+	}
	61	+	};
	62	+
	63	+	const handleKeyDown = (e: KeyboardEvent) => {
	64	+	switch (e.key) {
	65	+	case 'Escape':
	66	+	e.preventDefault();
	67	+	if (confirmDelete) {
	68	+	confirmDelete = false;
	69	+	} else {
	70	+	onClose();
	71	+	}
	72	+	break;
	73	+	case 'Enter':
	74	+	if (e.ctrlKey \|\| e.metaKey) {
	75	+	e.preventDefault();
	76	+	handleSave();
	77	+	}
	78	+	break;
	79	+	}
	80	+	};
	81	+
	82	+	const handleOverlayClick = (e: Event) => {
	83	+	if (e.target === e.currentTarget) {
	84	+	onClose();
	85	+	}
	86	+	};
	87	+	</script>
	88	+
	89	+	<svelte:window onkeydown={handleKeyDown} />
	90	+
	91	+	<div class="editor-overlay" onclick={handleOverlayClick}>
	92	+	<div class="editor-modal">
	93	+	<div class="modal-header">
	94	+	<span class="modal-icon"></span>
	95	+	<span class="modal-title">EDIT FAVORITE</span>
	96	+	<button class="close-btn" type="button" onclick={onClose}>
	97	+	<kbd>Esc</kbd>
	98	+	</button>
	99	+	</div>
	100	+
	101	+	<div class="modal-body">
	102	+	<!-- URL (readonly) -->
	103	+	<div class="form-group">
	104	+	<label class="form-label">URL</label>
	105	+	<div class="url-display">{favorite.url}</div>
	106	+	</div>
	107	+
	108	+	<!-- Title -->
	109	+	<div class="form-group">
	110	+	<label class="form-label" for="fav-title">TITLE</label>
	111	+	<input
	112	+	id="fav-title"
	113	+	type="text"
	114	+	class="form-input"
	115	+	bind:value={title}
	116	+	placeholder="Custom title (optional)"
	117	+	/>
	118	+	</div>
	119	+
	120	+	<!-- Folder -->
	121	+	<div class="form-group">
	122	+	<label class="form-label" for="fav-folder">FOLDER</label>
	123	+	<select id="fav-folder" class="form-select" bind:value={folderId}>
	124	+	<option value={null}>— No folder —</option>
	125	+	{#each folders as folder (folder.id)}
	126	+	<option value={folder.id}>
	127	+	{folder.icon \|\| ''} {folder.name}
	128	+	</option>
	129	+	{/each}
	130	+	</select>
	131	+	</div>
	132	+
	133	+	<!-- Shortcut Key -->
	134	+	<div class="form-group">
	135	+	<label class="form-label" for="fav-shortcut">QUICK ACCESS KEY</label>
	136	+	<select id="fav-shortcut" class="form-select" bind:value={shortcutKey}>
	137	+	<option value={null}>— None —</option>
	138	+	{#each [1, 2, 3, 4, 5, 6, 7, 8, 9] as key}
	139	+	<option value={key}>{key}</option>
	140	+	{/each}
	141	+	</select>
	142	+	<span class="form-hint">Press 1-9 on homepage to open directly</span>
	143	+	</div>
	144	+
	145	+	<!-- Tags -->
	146	+	<div class="form-group">
	147	+	<label class="form-label">TAGS</label>
	148	+	<div class="tag-selector">
	149	+	{#if tags.length === 0}
	150	+	<span class="no-tags">No tags available</span>
	151	+	{:else}
	152	+	{#each tags as tag (tag.id)}
	153	+	<button
	154	+	class="tag-chip"
	155	+	class:selected={hasTag(tag.id)}
	156	+	type="button"
	157	+	onclick={() => handleTagClick(tag.id)}
	158	+	style="--tag-color: {tag.color}"
	159	+	>
	160	+	<span class="tag-dot"></span>
	161	+	<span class="tag-name">{tag.name}</span>
	162	+	</button>
	163	+	{/each}
	164	+	{/if}
	165	+	</div>
	166	+	</div>
	167	+	</div>
	168	+
	169	+	<div class="modal-footer">
	170	+	{#if confirmDelete}
	171	+	<div class="confirm-delete">
	172	+	<span class="confirm-text">Delete this favorite?</span>
	173	+	<button class="btn btn-cancel" type="button" onclick={() => confirmDelete = false}>
	174	+	CANCEL
	175	+	</button>
	176	+	<button class="btn btn-danger" type="button" onclick={handleDelete}>
	177	+	DELETE
	178	+	</button>
	179	+	</div>
	180	+	{:else}
	181	+	<button class="btn btn-danger-outline" type="button" onclick={handleDelete}>
	182	+	DELETE
	183	+	</button>
	184	+	<div class="footer-right">
	185	+	<button class="btn btn-secondary" type="button" onclick={onClose}>
	186	+	CANCEL
	187	+	</button>
	188	+	<button class="btn btn-primary" type="button" onclick={handleSave}>
	189	+	SAVE
	190	+	<kbd>Ctrl+Enter</kbd>
	191	+	</button>
	192	+	</div>
	193	+	{/if}
	194	+	</div>
	195	+	</div>
	196	+	</div>
	197	+
	198	+	<style>
	199	+	.editor-overlay {
	200	+	position: fixed;
	201	+	inset: 0;
	202	+	z-index: 100;
	203	+	display: flex;
	204	+	align-items: center;
	205	+	justify-content: center;
	206	+	background: rgb(0 0 0 / 0.75);
	207	+	backdrop-filter: blur(4px);
	208	+	animation: fade-in 150ms ease;
	209	+	}
	210	+
	211	+	@keyframes fade-in {
	212	+	from { opacity: 0; }
	213	+	}
	214	+
	215	+	.editor-modal {
	216	+	width: 100%;
	217	+	max-width: 480px;
	218	+	margin: 1rem;
	219	+	background: var(--dynamic-surface);
	220	+	border: 1px solid var(--dynamic-border);
	221	+	box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
	222	+	animation: modal-in 150ms ease;
	223	+	}
	224	+
	225	+	@keyframes modal-in {
	226	+	from {
	227	+	opacity: 0;
	228	+	transform: scale(0.96) translateY(-8px);
	229	+	}
	230	+	}
	231	+
	232	+	.modal-header {
	233	+	display: flex;
	234	+	align-items: center;
	235	+	gap: 0.6rem;
	236	+	padding: 0.75rem 1rem;
	237	+	border-bottom: 1px solid var(--dynamic-border);
	238	+	background: color-mix(in srgb, var(--dynamic-bg) 80%, transparent);
	239	+	}
	240	+
	241	+	.modal-icon::before {
	242	+	content: '';
	243	+	font-size: 0.9rem;
	244	+	color: var(--dynamic-accent, #4ade80);
	245	+	}
	246	+
	247	+	.modal-title {
	248	+	flex: 1;
	249	+	font-size: 0.72rem;
	250	+	font-weight: 600;
	251	+	letter-spacing: 0.1em;
	252	+	color: var(--dynamic-text);
	253	+	}
	254	+
	255	+	.close-btn {
	256	+	padding: 0.25rem 0.5rem;
	257	+	background: transparent;
	258	+	border: 1px solid var(--dynamic-border);
	259	+	cursor: pointer;
	260	+	}
	261	+
	262	+	.close-btn kbd {
	263	+	font-size: 0.6rem;
	264	+	color: var(--dynamic-muted);
	265	+	}
	266	+
	267	+	.close-btn:hover {
	268	+	border-color: var(--dynamic-text);
	269	+	}
	270	+
	271	+	.close-btn:hover kbd {
	272	+	color: var(--dynamic-text);
	273	+	}
	274	+
	275	+	.modal-body {
	276	+	padding: 1rem;
	277	+	display: flex;
	278	+	flex-direction: column;
	279	+	gap: 1rem;
	280	+	}
	281	+
	282	+	.form-group {
	283	+	display: flex;
	284	+	flex-direction: column;
	285	+	gap: 0.35rem;
	286	+	}
	287	+
	288	+	.form-label {
	289	+	font-size: 0.6rem;
	290	+	font-weight: 600;
	291	+	letter-spacing: 0.12em;
	292	+	color: var(--dynamic-muted);
	293	+	}
	294	+
	295	+	.url-display {
	296	+	font-size: 0.72rem;
	297	+	color: var(--dynamic-text);
	298	+	padding: 0.5rem 0.65rem;
	299	+	border: 1px solid var(--dynamic-border);
	300	+	background: var(--dynamic-bg);
	301	+	white-space: nowrap;
	302	+	overflow: hidden;
	303	+	text-overflow: ellipsis;
	304	+	}
	305	+
	306	+	.form-input,
	307	+	.form-select {
	308	+	font-family: inherit;
	309	+	font-size: 0.75rem;
	310	+	padding: 0.5rem 0.65rem;
	311	+	border: 1px solid var(--dynamic-border);
	312	+	background: var(--dynamic-bg);
	313	+	color: var(--dynamic-text);
	314	+	outline: none;
	315	+	transition: border-color 100ms ease;
	316	+	}
	317	+
	318	+	.form-input:focus,
	319	+	.form-select:focus {
	320	+	border-color: var(--dynamic-accent, #4ade80);
	321	+	}
	322	+
	323	+	.form-input::placeholder {
	324	+	color: var(--dynamic-muted);
	325	+	}
	326	+
	327	+	.form-hint {
	328	+	font-size: 0.6rem;
	329	+	color: var(--dynamic-muted);
	330	+	letter-spacing: 0.05em;
	331	+	}
	332	+
	333	+	.tag-selector {
	334	+	display: flex;
	335	+	flex-wrap: wrap;
	336	+	gap: 0.35rem;
	337	+	}
	338	+
	339	+	.no-tags {
	340	+	font-size: 0.65rem;
	341	+	color: var(--dynamic-muted);
	342	+	font-style: italic;
	343	+	}
	344	+
	345	+	.tag-chip {
	346	+	display: inline-flex;
	347	+	align-items: center;
	348	+	gap: 0.35rem;
	349	+	padding: 0.25rem 0.5rem;
	350	+	font-size: 0.62rem;
	351	+	font-weight: 500;
	352	+	letter-spacing: 0.05em;
	353	+	border: 1px solid var(--tag-color);
	354	+	background: transparent;
	355	+	color: var(--dynamic-text);
	356	+	cursor: pointer;
	357	+	transition: all 100ms ease;
	358	+	}
	359	+
	360	+	.tag-chip:hover {
	361	+	background: color-mix(in srgb, var(--tag-color) 15%, transparent);
	362	+	}
	363	+
	364	+	.tag-chip.selected {
	365	+	background: color-mix(in srgb, var(--tag-color) 25%, transparent);
	366	+	border-width: 2px;
	367	+	padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
	368	+	}
	369	+
	370	+	.tag-dot {
	371	+	width: 6px;
	372	+	height: 6px;
	373	+	background: var(--tag-color);
	374	+	border-radius: 50%;
	375	+	}
	376	+
	377	+	.tag-name {
	378	+	text-transform: lowercase;
	379	+	}
	380	+
	381	+	.modal-footer {
	382	+	display: flex;
	383	+	align-items: center;
	384	+	justify-content: space-between;
	385	+	gap: 0.5rem;
	386	+	padding: 0.75rem 1rem;
	387	+	border-top: 1px solid var(--dynamic-border);
	388	+	background: color-mix(in srgb, var(--dynamic-bg) 60%, transparent);
	389	+	}
	390	+
	391	+	.footer-right {
	392	+	display: flex;
	393	+	gap: 0.5rem;
	394	+	}
	395	+
	396	+	.btn {
	397	+	display: inline-flex;
	398	+	align-items: center;
	399	+	gap: 0.5rem;
	400	+	padding: 0.5rem 0.85rem;
	401	+	font-size: 0.68rem;
	402	+	font-weight: 500;
	403	+	letter-spacing: 0.08em;
	404	+	border: 1px solid var(--dynamic-border);
	405	+	cursor: pointer;
	406	+	transition: all 100ms ease;
	407	+	}
	408	+
	409	+	.btn kbd {
	410	+	font-size: 0.55rem;
	411	+	padding: 0.1rem 0.3rem;
	412	+	border: 1px solid;
	413	+	opacity: 0.6;
	414	+	}
	415	+
	416	+	.btn-secondary {
	417	+	background: transparent;
	418	+	color: var(--dynamic-muted);
	419	+	}
	420	+
	421	+	.btn-secondary:hover {
	422	+	color: var(--dynamic-text);
	423	+	border-color: var(--dynamic-text);
	424	+	}
	425	+
	426	+	.btn-primary {
	427	+	background: var(--dynamic-accent, #4ade80);
	428	+	color: var(--dynamic-bg);
	429	+	border-color: var(--dynamic-accent, #4ade80);
	430	+	}
	431	+
	432	+	.btn-primary:hover {
	433	+	filter: brightness(1.1);
	434	+	}
	435	+
	436	+	.btn-danger-outline {
	437	+	background: transparent;
	438	+	color: var(--dynamic-muted);
	439	+	}
	440	+
	441	+	.btn-danger-outline:hover {
	442	+	color: #ef4444;
	443	+	border-color: #ef4444;
	444	+	}
	445	+
	446	+	.btn-danger {
	447	+	background: #b91c1c;
	448	+	color: #fef2f2;
	449	+	border-color: #991b1b;
	450	+	}
	451	+
	452	+	.btn-danger:hover {
	453	+	background: #dc2626;
	454	+	}
	455	+
	456	+	.btn-cancel {
	457	+	background: transparent;
	458	+	color: var(--dynamic-muted);
	459	+	}
	460	+
	461	+	.btn-cancel:hover {
	462	+	color: var(--dynamic-text);
	463	+	border-color: var(--dynamic-text);
	464	+	}
	465	+
	466	+	.confirm-delete {
	467	+	display: flex;
	468	+	align-items: center;
	469	+	gap: 0.75rem;
	470	+	width: 100%;
	471	+	}
	472	+
	473	+	.confirm-text {
	474	+	flex: 1;
	475	+	font-size: 0.72rem;
	476	+	color: #ef4444;
	477	+	font-weight: 500;
	478	+	}
	479	+	</style>

A gui/src/pages/homepage/favorites/FavoriteGrid.svelte +111 -0

@@ -0,0 +1,111 @@
	1	+	<script lang="ts">
	2	+	import type { Favorite } from '../types';
	3	+	import { homepageState } from '../state.svelte';
	4	+	import FavoriteCard from './FavoriteCard.svelte';
	5	+
	6	+	interface Props {
	7	+	favorites: Favorite[];
	8	+	onSelectFavorite?: (fav: Favorite) => void;
	9	+	onEditFavorite?: (fav: Favorite) => void;
	10	+	}
	11	+
	12	+	let { favorites, onSelectFavorite, onEditFavorite }: Props = $props();
	13	+
	14	+	let containerRef = $state<HTMLElement \| null>(null);
	15	+
	16	+	const getFocusedFavorite = () => {
	17	+	return favorites[homepageState.focusedIndex] ?? null;
	18	+	};
	19	+
	20	+	// Track previous focused index to only scroll on actual navigation
	21	+	let prevFocusedIndex = $state(-1);
	22	+
	23	+	// Scroll focused item into view when focusedIndex changes via keyboard navigation
	24	+	$effect(() => {
	25	+	// Skip if panel not active or command palette is open
	26	+	if (!containerRef \|\| homepageState.activePanel !== 'favorites') return;
	27	+	if (homepageState.commandPaletteOpen) return;
	28	+
	29	+	const currentIndex = homepageState.focusedIndex;
	30	+
	31	+	// Only scroll if index actually changed (not on initial render or modal close)
	32	+	if (prevFocusedIndex === currentIndex) return;
	33	+	if (prevFocusedIndex === -1) {
	34	+	// First render - just track, don't scroll
	35	+	prevFocusedIndex = currentIndex;
	36	+	return;
	37	+	}
	38	+
	39	+	prevFocusedIndex = currentIndex;
	40	+
	41	+	const focusedFav = getFocusedFavorite();
	42	+	if (!focusedFav) return;
	43	+
	44	+	// Find the focused element by favorite ID
	45	+	const el = containerRef.querySelector(`[data-favorite-id="${focusedFav.id}"]`);
	46	+	if (el) {
	47	+	el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
	48	+	}
	49	+	});
	50	+	</script>
	51	+
	52	+	<div class="favorite-grid" bind:this={containerRef}>
	53	+	{#if favorites.length === 0}
	54	+	<div class="empty-state">
	55	+	<span class="empty-icon"></span>
	56	+	<span class="empty-text">NO FAVORITES</span>
	57	+	<span class="empty-hint">Pin sites from history to add them here</span>
	58	+	</div>
	59	+	{:else}
	60	+	{#each favorites as favorite (favorite.id)}
	61	+	<FavoriteCard
	62	+	{favorite}
	63	+	focused={getFocusedFavorite()?.id === favorite.id}
	64	+	onSelect={onSelectFavorite}
	65	+	onEdit={onEditFavorite}
	66	+	/>
	67	+	{/each}
	68	+	{/if}
	69	+	</div>
	70	+
	71	+	<style>
	72	+	.favorite-grid {
	73	+	display: flex;
	74	+	flex-direction: column;
	75	+	gap: 0.5rem;
	76	+	flex: 1;
	77	+	min-height: 0;
	78	+	overflow-y: auto;
	79	+	}
	80	+
	81	+	.empty-state {
	82	+	flex: 1;
	83	+	display: flex;
	84	+	flex-direction: column;
	85	+	align-items: center;
	86	+	justify-content: center;
	87	+	gap: 0.5rem;
	88	+	padding: 2rem;
	89	+	color: var(--dynamic-muted);
	90	+	text-align: center;
	91	+	border: 1px dashed var(--dynamic-border);
	92	+	background: color-mix(in srgb, var(--dynamic-bg) 95%, var(--dynamic-surface) 5%);
	93	+	}
	94	+
	95	+	.empty-icon {
	96	+	font-size: 1.5rem;
	97	+	opacity: 0.5;
	98	+	}
	99	+
	100	+	.empty-text {
	101	+	font-size: 0.75rem;
	102	+	font-weight: 600;
	103	+	letter-spacing: 0.12em;
	104	+	}
	105	+
	106	+	.empty-hint {
	107	+	font-size: 0.68rem;
	108	+	letter-spacing: 0.06em;
	109	+	opacity: 0.7;
	110	+	}
	111	+	</style>

A gui/src/pages/homepage/favorites/FolderList.svelte +304 -0

@@ -0,0 +1,304 @@
	1	+	<script lang="ts">
	2	+	import type { Folder, Favorite } from '../types';
	3	+
	4	+	interface Props {
	5	+	folders: Folder[];
	6	+	favorites: Favorite[];
	7	+	selectedFolderId?: number \| null;
	8	+	onSelectFolder?: (id: number \| null) => void;
	9	+	onCreateFolder?: (name: string) => Promise<void>;
	10	+	}
	11	+
	12	+	let {
	13	+	folders,
	14	+	favorites,
	15	+	selectedFolderId = null,
	16	+	onSelectFolder,
	17	+	onCreateFolder
	18	+	}: Props = $props();
	19	+
	20	+	// Inline creation state
	21	+	let isCreating = $state(false);
	22	+	let newFolderName = $state('');
	23	+	let inputRef = $state<HTMLInputElement \| null>(null);
	24	+
	25	+	const startCreating = () => {
	26	+	isCreating = true;
	27	+	newFolderName = '';
	28	+	// Focus input after it renders
	29	+	setTimeout(() => inputRef?.focus(), 0);
	30	+	};
	31	+
	32	+	const cancelCreating = () => {
	33	+	isCreating = false;
	34	+	newFolderName = '';
	35	+	};
	36	+
	37	+	const submitCreate = async () => {
	38	+	const name = newFolderName.trim();
	39	+	if (!name \|\| !onCreateFolder) {
	40	+	cancelCreating();
	41	+	return;
	42	+	}
	43	+	try {
	44	+	await onCreateFolder(name);
	45	+	cancelCreating();
	46	+	} catch (e) {
	47	+	console.error('Failed to create folder:', e);
	48	+	}
	49	+	};
	50	+
	51	+	const handleKeydown = (e: KeyboardEvent) => {
	52	+	if (e.key === 'Enter') {
	53	+	e.preventDefault();
	54	+	submitCreate();
	55	+	} else if (e.key === 'Escape') {
	56	+	cancelCreating();
	57	+	}
	58	+	};
	59	+
	60	+	// Count favorites per folder
	61	+	const getFolderCount = (folderId: number \| null): number => {
	62	+	if (folderId === null) {
	63	+	return favorites.length;
	64	+	}
	65	+	return favorites.filter(f => f.folder_id === folderId).length;
	66	+	};
	67	+
	68	+	// Count unfiled favorites
	69	+	const unfiledCount = $derived(favorites.filter(f => f.folder_id === null).length);
	70	+	</script>
	71	+
	72	+	<div class="folder-list">
	73	+	<div class="folder-header">
	74	+	<span class="header-label">FOLDERS</span>
	75	+	{#if isCreating}
	76	+	<button
	77	+	class="add-folder-btn cancel"
	78	+	type="button"
	79	+	onclick={cancelCreating}
	80	+	title="Cancel"
	81	+	>
	82	+	×
	83	+	</button>
	84	+	{:else}
	85	+	<button
	86	+	class="add-folder-btn"
	87	+	type="button"
	88	+	onclick={startCreating}
	89	+	title="Create folder"
	90	+	>
	91	+	+
	92	+	</button>
	93	+	{/if}
	94	+	</div>
	95	+
	96	+	{#if isCreating}
	97	+	<div class="create-input-row">
	98	+	<input
	99	+	bind:this={inputRef}
	100	+	bind:value={newFolderName}
	101	+	onkeydown={handleKeydown}
	102	+	onblur={cancelCreating}
	103	+	class="create-input"
	104	+	type="text"
	105	+	placeholder="Folder name..."
	106	+	maxlength="50"
	107	+	/>
	108	+	</div>
	109	+	{/if}
	110	+
	111	+	<div class="folder-items">
	112	+	<!-- All favorites -->
	113	+	<button
	114	+	class="folder-item"
	115	+	class:active={selectedFolderId === null}
	116	+	type="button"
	117	+	onclick={() => onSelectFolder?.(null)}
	118	+	>
	119	+	<span class="folder-icon"></span>
	120	+	<span class="folder-name">All</span>
	121	+	<span class="folder-count">{favorites.length}</span>
	122	+	</button>
	123	+
	124	+	<!-- User folders -->
	125	+	{#each folders as folder (folder.id)}
	126	+	<button
	127	+	class="folder-item"
	128	+	class:active={selectedFolderId === folder.id}
	129	+	type="button"
	130	+	onclick={() => onSelectFolder?.(folder.id)}
	131	+	>
	132	+	<span class="folder-icon">{folder.icon \|\| ''}</span>
	133	+	<span class="folder-name">{folder.name}</span>
	134	+	<span class="folder-count">{getFolderCount(folder.id)}</span>
	135	+	</button>
	136	+	{/each}
	137	+
	138	+	<!-- Unfiled -->
	139	+	{#if unfiledCount > 0 && folders.length > 0}
	140	+	<button
	141	+	class="folder-item unfiled"
	142	+	class:active={selectedFolderId === -1}
	143	+	type="button"
	144	+	onclick={() => onSelectFolder?.(-1)}
	145	+	>
	146	+	<span class="folder-icon"></span>
	147	+	<span class="folder-name">Unfiled</span>
	148	+	<span class="folder-count">{unfiledCount}</span>
	149	+	</button>
	150	+	{/if}
	151	+	</div>
	152	+	</div>
	153	+
	154	+	<style>
	155	+	.folder-list {
	156	+	display: flex;
	157	+	flex-direction: column;
	158	+	border: 1px solid var(--dynamic-border);
	159	+	background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
	160	+	}
	161	+
	162	+	.folder-header {
	163	+	display: flex;
	164	+	align-items: center;
	165	+	justify-content: space-between;
	166	+	padding: 0.5rem 0.75rem;
	167	+	border-bottom: 1px solid var(--dynamic-border);
	168	+	background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);
	169	+	}
	170	+
	171	+	.header-label {
	172	+	font-size: 0.6rem;
	173	+	font-weight: 600;
	174	+	color: var(--dynamic-muted);
	175	+	letter-spacing: 0.12em;
	176	+	}
	177	+
	178	+	.add-folder-btn {
	179	+	width: 20px;
	180	+	height: 20px;
	181	+	display: flex;
	182	+	align-items: center;
	183	+	justify-content: center;
	184	+	font-size: 0.9rem;
	185	+	font-weight: 500;
	186	+	border: 1px solid var(--dynamic-border);
	187	+	background: transparent;
	188	+	color: var(--dynamic-muted);
	189	+	cursor: pointer;
	190	+	transition: all 100ms ease;
	191	+	}
	192	+
	193	+	.add-folder-btn:hover {
	194	+	color: var(--dynamic-text);
	195	+	border-color: var(--dynamic-text);
	196	+	}
	197	+
	198	+	.add-folder-btn.cancel {
	199	+	color: var(--dynamic-muted);
	200	+	}
	201	+
	202	+	.add-folder-btn.cancel:hover {
	203	+	color: #ef4444;
	204	+	border-color: #ef4444;
	205	+	}
	206	+
	207	+	.create-input-row {
	208	+	padding: 0.4rem 0.5rem;
	209	+	border-bottom: 1px solid var(--dynamic-border);
	210	+	background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 8%, var(--dynamic-bg) 92%);
	211	+	}
	212	+
	213	+	.create-input {
	214	+	width: 100%;
	215	+	padding: 0.35rem 0.5rem;
	216	+	font-size: 0.7rem;
	217	+	font-family: inherit;
	218	+	color: var(--dynamic-text);
	219	+	background: var(--dynamic-bg);
	220	+	border: 1px solid var(--dynamic-accent, #4ade80);
	221	+	outline: none;
	222	+	}
	223	+
	224	+	.create-input::placeholder {
	225	+	color: var(--dynamic-muted);
	226	+	}
	227	+
	228	+	.folder-items {
	229	+	display: flex;
	230	+	flex-direction: column;
	231	+	}
	232	+
	233	+	.folder-item {
	234	+	display: flex;
	235	+	align-items: center;
	236	+	gap: 0.5rem;
	237	+	padding: 0.5rem 0.75rem;
	238	+	text-align: left;
	239	+	background: transparent;
	240	+	border: none;
	241	+	border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 40%, transparent);
	242	+	cursor: pointer;
	243	+	transition: background-color 100ms ease;
	244	+	}
	245	+
	246	+	.folder-item:last-child {
	247	+	border-bottom: none;
	248	+	}
	249	+
	250	+	.folder-item:hover {
	251	+	background: color-mix(in srgb, var(--dynamic-surface) 30%, transparent);
	252	+	}
	253	+
	254	+	.folder-item.active {
	255	+	background: color-mix(in srgb, var(--dynamic-surface) 50%, transparent);
	256	+	}
	257	+
	258	+	.folder-item.active::before {
	259	+	content: '';
	260	+	position: absolute;
	261	+	left: 0;
	262	+	top: 0;
	263	+	bottom: 0;
	264	+	width: 2px;
	265	+	background: var(--dynamic-accent, #4ade80);
	266	+	}
	267	+
	268	+	.folder-item {
	269	+	position: relative;
	270	+	}
	271	+
	272	+	.folder-icon {
	273	+	font-size: 0.8rem;
	274	+	width: 1.2rem;
	275	+	text-align: center;
	276	+	color: var(--dynamic-muted);
	277	+	}
	278	+
	279	+	.folder-item.active .folder-icon {
	280	+	color: var(--dynamic-text);
	281	+	}
	282	+
	283	+	.folder-name {
	284	+	flex: 1;
	285	+	font-size: 0.72rem;
	286	+	color: var(--dynamic-text);
	287	+	white-space: nowrap;
	288	+	overflow: hidden;
	289	+	text-overflow: ellipsis;
	290	+	}
	291	+
	292	+	.folder-item.unfiled .folder-name {
	293	+	font-style: italic;
	294	+	color: var(--dynamic-muted);
	295	+	}
	296	+
	297	+	.folder-count {
	298	+	font-size: 0.6rem;
	299	+	padding: 0.1rem 0.35rem;
	300	+	border: 1px solid var(--dynamic-border);
	301	+	background: var(--dynamic-bg);
	302	+	color: var(--dynamic-muted);
	303	+	}
	304	+	</style>

A gui/src/pages/homepage/favorites/TagCloud.svelte +282 -0

@@ -0,0 +1,282 @@
	1	+	<script lang="ts">
	2	+	import type { Tag } from '../types';
	3	+
	4	+	interface Props {
	5	+	tags: Tag[];
	6	+	selectedTagIds?: number[];
	7	+	onToggleTag?: (id: number) => void;
	8	+	onCreateTag?: (name: string, color: string) => Promise<void>;
	9	+	onClearSelection?: () => void;
	10	+	}
	11	+
	12	+	let {
	13	+	tags,
	14	+	selectedTagIds = [],
	15	+	onToggleTag,
	16	+	onCreateTag,
	17	+	onClearSelection
	18	+	}: Props = $props();
	19	+
	20	+	// Inline creation state
	21	+	let isCreating = $state(false);
	22	+	let newTagName = $state('');
	23	+	let inputRef = $state<HTMLInputElement \| null>(null);
	24	+
	25	+	// Predefined tag colors
	26	+	const tagColors = [
	27	+	'#6b7280', '#ef4444', '#f59e0b', '#22c55e',
	28	+	'#3b82f6', '#8b5cf6', '#ec4899', '#14b8a6'
	29	+	];
	30	+
	31	+	const getRandomColor = () => tagColors[Math.floor(Math.random() * tagColors.length)] ?? '#6b7280';
	32	+
	33	+	const startCreating = () => {
	34	+	isCreating = true;
	35	+	newTagName = '';
	36	+	setTimeout(() => inputRef?.focus(), 0);
	37	+	};
	38	+
	39	+	const cancelCreating = () => {
	40	+	isCreating = false;
	41	+	newTagName = '';
	42	+	};
	43	+
	44	+	const submitCreate = async () => {
	45	+	const name = newTagName.trim();
	46	+	if (!name \|\| !onCreateTag) {
	47	+	cancelCreating();
	48	+	return;
	49	+	}
	50	+	try {
	51	+	await onCreateTag(name, getRandomColor());
	52	+	cancelCreating();
	53	+	} catch (e) {
	54	+	console.error('Failed to create tag:', e);
	55	+	}
	56	+	};
	57	+
	58	+	const handleKeydown = (e: KeyboardEvent) => {
	59	+	if (e.key === 'Enter') {
	60	+	e.preventDefault();
	61	+	submitCreate();
	62	+	} else if (e.key === 'Escape') {
	63	+	cancelCreating();
	64	+	}
	65	+	};
	66	+
	67	+	const isSelected = (id: number) => selectedTagIds.includes(id);
	68	+	</script>
	69	+
	70	+	<div class="tag-cloud">
	71	+	<div class="tag-header">
	72	+	<span class="header-label">TAGS</span>
	73	+	<div class="header-actions">
	74	+	{#if selectedTagIds.length > 0}
	75	+	<button
	76	+	class="clear-btn"
	77	+	type="button"
	78	+	onclick={() => onClearSelection?.()}
	79	+	title="Clear selection"
	80	+	>
	81	+	CLEAR
	82	+	</button>
	83	+	{/if}
	84	+	{#if isCreating}
	85	+	<button
	86	+	class="add-tag-btn cancel"
	87	+	type="button"
	88	+	onclick={cancelCreating}
	89	+	title="Cancel"
	90	+	>
	91	+	×
	92	+	</button>
	93	+	{:else}
	94	+	<button
	95	+	class="add-tag-btn"
	96	+	type="button"
	97	+	onclick={startCreating}
	98	+	title="Create tag"
	99	+	>
	100	+	+
	101	+	</button>
	102	+	{/if}
	103	+	</div>
	104	+	</div>
	105	+
	106	+	{#if isCreating}
	107	+	<div class="create-input-row">
	108	+	<input
	109	+	bind:this={inputRef}
	110	+	bind:value={newTagName}
	111	+	onkeydown={handleKeydown}
	112	+	onblur={cancelCreating}
	113	+	class="create-input"
	114	+	type="text"
	115	+	placeholder="Tag name..."
	116	+	maxlength="30"
	117	+	/>
	118	+	</div>
	119	+	{/if}
	120	+
	121	+	<div class="tag-chips">
	122	+	{#if tags.length === 0}
	123	+	<span class="no-tags">No tags yet</span>
	124	+	{:else}
	125	+	{#each tags as tag (tag.id)}
	126	+	<button
	127	+	class="tag-chip"
	128	+	class:selected={isSelected(tag.id)}
	129	+	type="button"
	130	+	onclick={() => onToggleTag?.(tag.id)}
	131	+	style="--tag-color: {tag.color}"
	132	+	>
	133	+	<span class="tag-dot"></span>
	134	+	<span class="tag-name">{tag.name}</span>
	135	+	</button>
	136	+	{/each}
	137	+	{/if}
	138	+	</div>
	139	+	</div>
	140	+
	141	+	<style>
	142	+	.tag-cloud {
	143	+	display: flex;
	144	+	flex-direction: column;
	145	+	gap: 0.5rem;
	146	+	padding: 0.6rem 0.75rem;
	147	+	border: 1px solid var(--dynamic-border);
	148	+	background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
	149	+	}
	150	+
	151	+	.tag-header {
	152	+	display: flex;
	153	+	align-items: center;
	154	+	justify-content: space-between;
	155	+	}
	156	+
	157	+	.header-label {
	158	+	font-size: 0.6rem;
	159	+	font-weight: 600;
	160	+	color: var(--dynamic-muted);
	161	+	letter-spacing: 0.12em;
	162	+	}
	163	+
	164	+	.header-actions {
	165	+	display: flex;
	166	+	gap: 0.35rem;
	167	+	}
	168	+
	169	+	.clear-btn {
	170	+	padding: 0.2rem 0.4rem;
	171	+	font-size: 0.55rem;
	172	+	font-weight: 500;
	173	+	letter-spacing: 0.08em;
	174	+	border: 1px solid var(--dynamic-border);
	175	+	background: transparent;
	176	+	color: var(--dynamic-muted);
	177	+	cursor: pointer;
	178	+	transition: all 100ms ease;
	179	+	}
	180	+
	181	+	.clear-btn:hover {
	182	+	color: var(--dynamic-text);
	183	+	border-color: var(--dynamic-text);
	184	+	}
	185	+
	186	+	.add-tag-btn {
	187	+	width: 20px;
	188	+	height: 20px;
	189	+	display: flex;
	190	+	align-items: center;
	191	+	justify-content: center;
	192	+	font-size: 0.9rem;
	193	+	font-weight: 500;
	194	+	border: 1px solid var(--dynamic-border);
	195	+	background: transparent;
	196	+	color: var(--dynamic-muted);
	197	+	cursor: pointer;
	198	+	transition: all 100ms ease;
	199	+	}
	200	+
	201	+	.add-tag-btn:hover {
	202	+	color: var(--dynamic-text);
	203	+	border-color: var(--dynamic-text);
	204	+	}
	205	+
	206	+	.add-tag-btn.cancel {
	207	+	color: var(--dynamic-muted);
	208	+	}
	209	+
	210	+	.add-tag-btn.cancel:hover {
	211	+	color: #ef4444;
	212	+	border-color: #ef4444;
	213	+	}
	214	+
	215	+	.create-input-row {
	216	+	margin-bottom: 0.35rem;
	217	+	}
	218	+
	219	+	.create-input {
	220	+	width: 100%;
	221	+	padding: 0.35rem 0.5rem;
	222	+	font-size: 0.68rem;
	223	+	font-family: inherit;
	224	+	color: var(--dynamic-text);
	225	+	background: var(--dynamic-bg);
	226	+	border: 1px solid var(--dynamic-accent, #4ade80);
	227	+	outline: none;
	228	+	}
	229	+
	230	+	.create-input::placeholder {
	231	+	color: var(--dynamic-muted);
	232	+	}
	233	+
	234	+	.tag-chips {
	235	+	display: flex;
	236	+	flex-wrap: wrap;
	237	+	gap: 0.35rem;
	238	+	}
	239	+
	240	+	.no-tags {
	241	+	font-size: 0.65rem;
	242	+	color: var(--dynamic-muted);
	243	+	font-style: italic;
	244	+	padding: 0.25rem 0;
	245	+	}
	246	+
	247	+	.tag-chip {
	248	+	display: inline-flex;
	249	+	align-items: center;
	250	+	gap: 0.35rem;
	251	+	padding: 0.25rem 0.5rem;
	252	+	font-size: 0.62rem;
	253	+	font-weight: 500;
	254	+	letter-spacing: 0.05em;
	255	+	border: 1px solid var(--tag-color);
	256	+	background: transparent;
	257	+	color: var(--dynamic-text);
	258	+	cursor: pointer;
	259	+	transition: all 100ms ease;
	260	+	}
	261	+
	262	+	.tag-chip:hover {
	263	+	background: color-mix(in srgb, var(--tag-color) 15%, transparent);
	264	+	}
	265	+
	266	+	.tag-chip.selected {
	267	+	background: color-mix(in srgb, var(--tag-color) 25%, transparent);
	268	+	border-width: 2px;
	269	+	padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
	270	+	}
	271	+
	272	+	.tag-dot {
	273	+	width: 6px;
	274	+	height: 6px;
	275	+	background: var(--tag-color);
	276	+	border-radius: 50%;
	277	+	}
	278	+
	279	+	.tag-name {
	280	+	text-transform: lowercase;
	281	+	}
	282	+	</style>

A gui/src/pages/homepage/favorites/index.ts +6 -0

@@ -0,0 +1,6 @@
	1	+	// Favorites Components - Folders, Tags, Grid, Cards, Editor
	2	+	export { default as FavoriteCard } from './FavoriteCard.svelte';
	3	+	export { default as FavoriteGrid } from './FavoriteGrid.svelte';
	4	+	export { default as FolderList } from './FolderList.svelte';
	5	+	export { default as TagCloud } from './TagCloud.svelte';
	6	+	export { default as FavoriteEditor } from './FavoriteEditor.svelte';

A gui/src/pages/homepage/history/HistoryCleanup.svelte +379 -0

@@ -0,0 +1,379 @@
	1	+	<script lang="ts">
	2	+	import type { HistoryCleanupRange } from '../types';
	3	+
	4	+	interface Props {
	5	+	onCleanup: (range: HistoryCleanupRange) => void;
	6	+	onClose: () => void;
	7	+	}
	8	+
	9	+	let { onCleanup, onClose }: Props = $props();
	10	+
	11	+	type CleanupOption = {
	12	+	range: HistoryCleanupRange;
	13	+	label: string;
	14	+	shortcut: string;
	15	+	description: string;
	16	+	destructive?: boolean;
	17	+	};
	18	+
	19	+	const options: CleanupOption[] = [
	20	+	{ range: 'hour', label: 'LAST HOUR', shortcut: 'D h', description: 'Delete entries from the past 60 minutes' },
	21	+	{ range: 'day', label: 'LAST DAY', shortcut: 'D d', description: 'Delete entries from the past 24 hours' },
	22	+	{ range: 'week', label: 'LAST WEEK', shortcut: 'D w', description: 'Delete entries from the past 7 days' },
	23	+	{ range: 'month', label: 'LAST MONTH', shortcut: 'D m', description: 'Delete entries from the past 30 days' },
	24	+	{ range: 'all', label: 'CLEAR ALL', shortcut: 'D D', description: 'Permanently delete all browsing history', destructive: true },
	25	+	];
	26	+
	27	+	let selectedIndex = $state(0);
	28	+	let confirming = $state(false);
	29	+
	30	+	const handleKeyDown = (e: KeyboardEvent) => {
	31	+	switch (e.key) {
	32	+	case 'Escape':
	33	+	e.preventDefault();
	34	+	if (confirming) {
	35	+	confirming = false;
	36	+	} else {
	37	+	onClose();
	38	+	}
	39	+	break;
	40	+	case 'ArrowDown':
	41	+	case 'j':
	42	+	e.preventDefault();
	43	+	selectedIndex = Math.min(selectedIndex + 1, options.length - 1);
	44	+	break;
	45	+	case 'ArrowUp':
	46	+	case 'k':
	47	+	e.preventDefault();
	48	+	selectedIndex = Math.max(selectedIndex - 1, 0);
	49	+	break;
	50	+	case 'Enter':
	51	+	e.preventDefault();
	52	+	handleSelect(options[selectedIndex]!);
	53	+	break;
	54	+	}
	55	+	};
	56	+
	57	+	const handleSelect = (option: CleanupOption) => {
	58	+	if (option.destructive && !confirming) {
	59	+	confirming = true;
	60	+	return;
	61	+	}
	62	+	onCleanup(option.range);
	63	+	onClose();
	64	+	};
	65	+
	66	+	const handleOverlayClick = (e: Event) => {
	67	+	if (e.target === e.currentTarget) {
	68	+	onClose();
	69	+	}
	70	+	};
	71	+	</script>
	72	+
	73	+	<svelte:window onkeydown={handleKeyDown} />
	74	+
	75	+	<div class="cleanup-overlay" onclick={handleOverlayClick}>
	76	+	<div class="cleanup-modal">
	77	+	<div class="modal-header">
	78	+	<span class="modal-icon"></span>
	79	+	<span class="modal-title">CLEAR HISTORY</span>
	80	+	<button class="close-btn" type="button" onclick={onClose}>
	81	+	<kbd>Esc</kbd>
	82	+	</button>
	83	+	</div>
	84	+
	85	+	{#if confirming}
	86	+	<div class="confirm-panel">
	87	+	<div class="confirm-icon"></div>
	88	+	<p class="confirm-message">
	89	+	This will permanently delete <strong>ALL</strong> browsing history.
	90	+	This action cannot be undone.
	91	+	</p>
	92	+	<div class="confirm-actions">
	93	+	<button
	94	+	class="confirm-btn cancel"
	95	+	type="button"
	96	+	onclick={() => confirming = false}
	97	+	>
	98	+	CANCEL
	99	+	<kbd>Esc</kbd>
	100	+	</button>
	101	+	<button
	102	+	class="confirm-btn destructive"
	103	+	type="button"
	104	+	onclick={() => { onCleanup('all'); onClose(); }}
	105	+	>
	106	+	DELETE ALL
	107	+	<kbd>Enter</kbd>
	108	+	</button>
	109	+	</div>
	110	+	</div>
	111	+	{:else}
	112	+	<div class="cleanup-options">
	113	+	{#each options as option, i (option.range)}
	114	+	<button
	115	+	class="cleanup-option"
	116	+	class:selected={selectedIndex === i}
	117	+	class:destructive={option.destructive}
	118	+	type="button"
	119	+	onclick={() => handleSelect(option)}
	120	+	onmouseenter={() => selectedIndex = i}
	121	+	>
	122	+	<div class="option-main">
	123	+	<span class="option-label">{option.label}</span>
	124	+	<span class="option-desc">{option.description}</span>
	125	+	</div>
	126	+	<kbd class="option-shortcut">{option.shortcut}</kbd>
	127	+	</button>
	128	+	{/each}
	129	+	</div>
	130	+	{/if}
	131	+
	132	+	<div class="modal-footer">
	133	+	<span class="hint"><kbd>j</kbd><kbd>k</kbd> navigate</span>
	134	+	<span class="hint"><kbd>Enter</kbd> select</span>
	135	+	</div>
	136	+	</div>
	137	+	</div>
	138	+
	139	+	<style>
	140	+	.cleanup-overlay {
	141	+	position: fixed;
	142	+	inset: 0;
	143	+	z-index: 100;
	144	+	display: flex;
	145	+	align-items: center;
	146	+	justify-content: center;
	147	+	background: rgb(0 0 0 / 0.75);
	148	+	backdrop-filter: blur(4px);
	149	+	animation: fade-in 150ms ease;
	150	+	}
	151	+
	152	+	@keyframes fade-in {
	153	+	from { opacity: 0; }
	154	+	}
	155	+
	156	+	.cleanup-modal {
	157	+	width: 100%;
	158	+	max-width: 420px;
	159	+	margin: 1rem;
	160	+	background: var(--dynamic-surface);
	161	+	border: 1px solid var(--dynamic-border);
	162	+	box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
	163	+	animation: modal-in 150ms ease;
	164	+	}
	165	+
	166	+	@keyframes modal-in {
	167	+	from {
	168	+	opacity: 0;
	169	+	transform: scale(0.96) translateY(-8px);
	170	+	}
	171	+	}
	172	+
	173	+	.modal-header {
	174	+	display: flex;
	175	+	align-items: center;
	176	+	gap: 0.6rem;
	177	+	padding: 0.75rem 1rem;
	178	+	border-bottom: 1px solid var(--dynamic-border);
	179	+	background: color-mix(in srgb, var(--dynamic-bg) 80%, transparent);
	180	+	}
	181	+
	182	+	.modal-icon::before {
	183	+	content: '';
	184	+	font-size: 0.9rem;
	185	+	color: #fbbf24;
	186	+	}
	187	+
	188	+	.modal-title {
	189	+	flex: 1;
	190	+	font-size: 0.72rem;
	191	+	font-weight: 600;
	192	+	letter-spacing: 0.1em;
	193	+	color: var(--dynamic-text);
	194	+	}
	195	+
	196	+	.close-btn {
	197	+	padding: 0.25rem 0.5rem;
	198	+	background: transparent;
	199	+	border: 1px solid var(--dynamic-border);
	200	+	cursor: pointer;
	201	+	}
	202	+
	203	+	.close-btn kbd {
	204	+	font-size: 0.6rem;
	205	+	color: var(--dynamic-muted);
	206	+	}
	207	+
	208	+	.close-btn:hover {
	209	+	border-color: var(--dynamic-text);
	210	+	}
	211	+
	212	+	.close-btn:hover kbd {
	213	+	color: var(--dynamic-text);
	214	+	}
	215	+
	216	+	.cleanup-options {
	217	+	display: flex;
	218	+	flex-direction: column;
	219	+	}
	220	+
	221	+	.cleanup-option {
	222	+	display: flex;
	223	+	align-items: center;
	224	+	justify-content: space-between;
	225	+	gap: 1rem;
	226	+	padding: 0.85rem 1rem;
	227	+	text-align: left;
	228	+	background: transparent;
	229	+	border: none;
	230	+	border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);
	231	+	cursor: pointer;
	232	+	transition: background-color 100ms ease;
	233	+	}
	234	+
	235	+	.cleanup-option:last-child {
	236	+	border-bottom: none;
	237	+	}
	238	+
	239	+	.cleanup-option:hover,
	240	+	.cleanup-option.selected {
	241	+	background: color-mix(in srgb, var(--dynamic-surface) 80%, var(--dynamic-bg) 20%);
	242	+	}
	243	+
	244	+	.cleanup-option.selected {
	245	+	outline: 1px solid var(--dynamic-accent, #4ade80);
	246	+	outline-offset: -1px;
	247	+	}
	248	+
	249	+	.cleanup-option.destructive .option-label {
	250	+	color: #ef4444;
	251	+	}
	252	+
	253	+	.option-main {
	254	+	display: flex;
	255	+	flex-direction: column;
	256	+	gap: 0.2rem;
	257	+	}
	258	+
	259	+	.option-label {
	260	+	font-size: 0.75rem;
	261	+	font-weight: 600;
	262	+	letter-spacing: 0.08em;
	263	+	color: var(--dynamic-text);
	264	+	}
	265	+
	266	+	.option-desc {
	267	+	font-size: 0.68rem;
	268	+	color: var(--dynamic-muted);
	269	+	letter-spacing: 0.04em;
	270	+	}
	271	+
	272	+	.option-shortcut {
	273	+	padding: 0.2rem 0.45rem;
	274	+	font-size: 0.58rem;
	275	+	letter-spacing: 0.05em;
	276	+	border: 1px solid var(--dynamic-border);
	277	+	background: var(--dynamic-bg);
	278	+	color: var(--dynamic-muted);
	279	+	}
	280	+
	281	+	.confirm-panel {
	282	+	padding: 1.5rem 1rem;
	283	+	display: flex;
	284	+	flex-direction: column;
	285	+	align-items: center;
	286	+	gap: 1rem;
	287	+	text-align: center;
	288	+	}
	289	+
	290	+	.confirm-icon::before {
	291	+	content: '';
	292	+	font-size: 2rem;
	293	+	color: #ef4444;
	294	+	}
	295	+
	296	+	.confirm-message {
	297	+	margin: 0;
	298	+	font-size: 0.8rem;
	299	+	line-height: 1.5;
	300	+	color: var(--dynamic-text);
	301	+	}
	302	+
	303	+	.confirm-message strong {
	304	+	color: #ef4444;
	305	+	}
	306	+
	307	+	.confirm-actions {
	308	+	display: flex;
	309	+	gap: 0.5rem;
	310	+	width: 100%;
	311	+	margin-top: 0.5rem;
	312	+	}
	313	+
	314	+	.confirm-btn {
	315	+	flex: 1;
	316	+	display: flex;
	317	+	align-items: center;
	318	+	justify-content: center;
	319	+	gap: 0.5rem;
	320	+	padding: 0.6rem 1rem;
	321	+	font-size: 0.7rem;
	322	+	font-weight: 500;
	323	+	letter-spacing: 0.08em;
	324	+	border: 1px solid var(--dynamic-border);
	325	+	cursor: pointer;
	326	+	transition: all 100ms ease;
	327	+	}
	328	+
	329	+	.confirm-btn kbd {
	330	+	font-size: 0.55rem;
	331	+	padding: 0.1rem 0.3rem;
	332	+	border: 1px solid;
	333	+	opacity: 0.7;
	334	+	}
	335	+
	336	+	.confirm-btn.cancel {
	337	+	background: transparent;
	338	+	color: var(--dynamic-muted);
	339	+	}
	340	+
	341	+	.confirm-btn.cancel:hover {
	342	+	color: var(--dynamic-text);
	343	+	border-color: var(--dynamic-text);
	344	+	}
	345	+
	346	+	.confirm-btn.destructive {
	347	+	background: #b91c1c;
	348	+	color: #fef2f2;
	349	+	border-color: #991b1b;
	350	+	}
	351	+
	352	+	.confirm-btn.destructive:hover {
	353	+	background: #dc2626;
	354	+	}
	355	+
	356	+	.modal-footer {
	357	+	display: flex;
	358	+	align-items: center;
	359	+	justify-content: center;
	360	+	gap: 1rem;
	361	+	padding: 0.6rem 1rem;
	362	+	border-top: 1px solid var(--dynamic-border);
	363	+	background: color-mix(in srgb, var(--dynamic-bg) 60%, transparent);
	364	+	}
	365	+
	366	+	.hint {
	367	+	font-size: 0.6rem;
	368	+	color: var(--dynamic-muted);
	369	+	letter-spacing: 0.05em;
	370	+	}
	371	+
	372	+	.hint kbd {
	373	+	font-size: 0.55rem;
	374	+	padding: 0.1rem 0.25rem;
	375	+	margin-right: 0.25rem;
	376	+	border: 1px solid var(--dynamic-border);
	377	+	background: var(--dynamic-bg);
	378	+	}
	379	+	</style>

A gui/src/pages/homepage/history/HistoryFilters.svelte +151 -0

@@ -0,0 +1,151 @@
	1	+	<script lang="ts">
	2	+	import type { DomainStat } from '../types';
	3	+
	4	+	interface Props {
	5	+	domains?: DomainStat[];
	6	+	selectedDomain?: string \| null;
	7	+	onSelectDomain?: (domain: string \| null) => void;
	8	+	onOpenCleanup?: () => void;
	9	+	}
	10	+
	11	+	let {
	12	+	domains = [],
	13	+	selectedDomain = null,
	14	+	onSelectDomain,
	15	+	onOpenCleanup
	16	+	}: Props = $props();
	17	+
	18	+	const topDomains = $derived(domains.slice(0, 5));
	19	+	</script>
	20	+
	21	+	<div class="history-filters">
	22	+	<div class="filter-section">
	23	+	<span class="filter-label">FILTER</span>
	24	+	<div class="filter-chips">
	25	+	<button
	26	+	class="filter-chip"
	27	+	class:active={selectedDomain === null}
	28	+	type="button"
	29	+	onclick={() => onSelectDomain?.(null)}
	30	+	>
	31	+	ALL
	32	+	</button>
	33	+	{#each topDomains as domain (domain.domain)}
	34	+	<button
	35	+	class="filter-chip"
	36	+	class:active={selectedDomain === domain.domain}
	37	+	type="button"
	38	+	onclick={() => onSelectDomain?.(domain.domain)}
	39	+	title="{domain.page_count} pages, {domain.total_visits} visits"
	40	+	>
	41	+	{domain.domain.replace('www.', '').slice(0, 12)}
	42	+	</button>
	43	+	{/each}
	44	+	</div>
	45	+	</div>
	46	+
	47	+	<div class="filter-actions">
	48	+	<button
	49	+	class="cleanup-btn"
	50	+	type="button"
	51	+	onclick={() => onOpenCleanup?.()}
	52	+	title="Clear history (D)"
	53	+	>
	54	+	<span class="cleanup-icon"></span>
	55	+	<span>CLEAR</span>
	56	+	</button>
	57	+	</div>
	58	+	</div>
	59	+
	60	+	<style>
	61	+	.history-filters {
	62	+	display: flex;
	63	+	align-items: center;
	64	+	justify-content: space-between;
	65	+	gap: 1rem;
	66	+	padding: 0.5rem 1rem;
	67	+	}
	68	+
	69	+	.filter-section {
	70	+	display: flex;
	71	+	align-items: center;
	72	+	gap: 0.6rem;
	73	+	flex: 1;
	74	+	min-width: 0;
	75	+	}
	76	+
	77	+	.filter-label {
	78	+	font-size: 0.6rem;
	79	+	font-weight: 600;
	80	+	color: var(--dynamic-muted);
	81	+	letter-spacing: 0.12em;
	82	+	flex-shrink: 0;
	83	+	}
	84	+
	85	+	.filter-chips {
	86	+	display: flex;
	87	+	gap: 0.35rem;
	88	+	overflow-x: auto;
	89	+	scrollbar-width: none;
	90	+	}
	91	+
	92	+	.filter-chips::-webkit-scrollbar {
	93	+	display: none;
	94	+	}
	95	+
	96	+	.filter-chip {
	97	+	padding: 0.3rem 0.55rem;
	98	+	font-size: 0.6rem;
	99	+	font-weight: 500;
	100	+	letter-spacing: 0.08em;
	101	+	color: var(--dynamic-muted);
	102	+	background: transparent;
	103	+	border: 1px solid var(--dynamic-border);
	104	+	cursor: pointer;
	105	+	transition: all 100ms ease;
	106	+	white-space: nowrap;
	107	+	flex-shrink: 0;
	108	+	}
	109	+
	110	+	.filter-chip:hover {
	111	+	color: var(--dynamic-text);
	112	+	border-color: var(--dynamic-text);
	113	+	}
	114	+
	115	+	.filter-chip.active {
	116	+	color: var(--dynamic-primary-foreground, var(--dynamic-bg));
	117	+	background: var(--dynamic-accent);
	118	+	border-color: var(--dynamic-accent);
	119	+	}
	120	+
	121	+	.filter-actions {
	122	+	display: flex;
	123	+	gap: 0.35rem;
	124	+	flex-shrink: 0;
	125	+	}
	126	+
	127	+	.cleanup-btn {
	128	+	display: flex;
	129	+	align-items: center;
	130	+	gap: 0.4rem;
	131	+	padding: 0.35rem 0.6rem;
	132	+	font-size: 0.6rem;
	133	+	font-weight: 500;
	134	+	letter-spacing: 0.08em;
	135	+	color: var(--dynamic-muted);
	136	+	background: transparent;
	137	+	border: 1px solid var(--dynamic-border);
	138	+	cursor: pointer;
	139	+	transition: all 100ms ease;
	140	+	}
	141	+
	142	+	.cleanup-btn:hover {
	143	+	color: #ef4444;
	144	+	border-color: #ef4444;
	145	+	}
	146	+
	147	+	.cleanup-icon::before {
	148	+	content: '';
	149	+	font-size: 0.75rem;
	150	+	}
	151	+	</style>

A gui/src/pages/homepage/history/HistoryItem.svelte +264 -0

@@ -0,0 +1,264 @@
	1	+	<script lang="ts">
	2	+	import type { HistoryEntry } from '../types';
	3	+
	4	+	interface Props {
	5	+	entry: HistoryEntry;
	6	+	focused?: boolean;
	7	+	onSelect?: (entry: HistoryEntry) => void;
	8	+	onDelete?: (entry: HistoryEntry) => void;
	9	+	}
	10	+
	11	+	let { entry, focused = false, onSelect, onDelete }: Props = $props();
	12	+
	13	+	let deleting = $state(false);
	14	+
	15	+	const getDomain = (url: string): string => {
	16	+	try {
	17	+	return new URL(url).hostname;
	18	+	} catch {
	19	+	return url;
	20	+	}
	21	+	};
	22	+
	23	+	const getDisplayTitle = (item: HistoryEntry): string => {
	24	+	const trimmed = item.title?.trim();
	25	+	if (trimmed) return trimmed;
	26	+	return getDomain(item.url) \|\| item.url;
	27	+	};
	28	+
	29	+	const formatTime = (timestamp: string): string => {
	30	+	try {
	31	+	const date = new Date(timestamp);
	32	+	const now = new Date();
	33	+	const diff = now.getTime() - date.getTime();
	34	+
	35	+	const minutes = Math.floor(diff / (1000 * 60));
	36	+	const hours = Math.floor(diff / (1000 * 60 * 60));
	37	+
	38	+	if (minutes < 1) return 'now';
	39	+	if (minutes < 60) return `${minutes}m`;
	40	+	if (hours < 24) return `${hours}h`;
	41	+
	42	+	return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
	43	+	} catch {
	44	+	return '';
	45	+	}
	46	+	};
	47	+
	48	+	const handleSelect = () => {
	49	+	onSelect?.(entry);
	50	+	};
	51	+
	52	+	const handleDelete = (e: Event) => {
	53	+	e.stopPropagation();
	54	+	deleting = true;
	55	+	onDelete?.(entry);
	56	+	};
	57	+
	58	+	const handleKeyDown = (e: KeyboardEvent) => {
	59	+	if (e.key === 'Enter') {
	60	+	handleSelect();
	61	+	} else if (e.key === 'd' \|\| e.key === 'x') {
	62	+	handleDelete(e);
	63	+	}
	64	+	};
	65	+	</script>
	66	+
	67	+	<div
	68	+	class="history-item"
	69	+	class:focused
	70	+	class:deleting
	71	+	role="button"
	72	+	tabindex="0"
	73	+	data-entry-id={entry.id}
	74	+	onclick={handleSelect}
	75	+	onkeydown={handleKeyDown}
	76	+	>
	77	+	<div class="item-favicon">
	78	+	{#if entry.favicon_url}
	79	+	<img
	80	+	src={entry.favicon_url}
	81	+	alt=""
	82	+	class="favicon-img"
	83	+	onerror={(e) => {
	84	+	const target = e.target as HTMLImageElement;
	85	+	target.style.display = 'none';
	86	+	const fallback = target.nextElementSibling as HTMLElement;
	87	+	if (fallback) fallback.style.display = 'flex';
	88	+	}}
	89	+	/>
	90	+	<div class="favicon-fallback" style="display: none;"></div>
	91	+	{:else}
	92	+	<div class="favicon-fallback"></div>
	93	+	{/if}
	94	+	</div>
	95	+
	96	+	<div class="item-content">
	97	+	<div class="item-row">
	98	+	<span class="item-title">{getDisplayTitle(entry)}</span>
	99	+	<span class="item-time">{formatTime(entry.last_visited)}</span>
	100	+	</div>
	101	+	<div class="item-url">{entry.url}</div>
	102	+	</div>
	103	+
	104	+	<div class="item-actions">
	105	+	{#if entry.visit_count > 1}
	106	+	<span class="visit-count">{entry.visit_count}x</span>
	107	+	{/if}
	108	+	<button
	109	+	class="action-btn delete-btn"
	110	+	type="button"
	111	+	onclick={handleDelete}
	112	+	title="Delete entry (d)"
	113	+	>
	114	+	<span aria-hidden="true">×</span>
	115	+	</button>
	116	+	</div>
	117	+	</div>
	118	+
	119	+	<style>
	120	+	.history-item {
	121	+	display: grid;
	122	+	grid-template-columns: auto 1fr auto;
	123	+	align-items: center;
	124	+	gap: 0.75rem;
	125	+	padding: 0.55rem 0.85rem;
	126	+	border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);
	127	+	transition: background-color 100ms ease;
	128	+	cursor: pointer;
	129	+	}
	130	+
	131	+	.history-item:last-child {
	132	+	border-bottom: none;
	133	+	}
	134	+
	135	+	.history-item:hover,
	136	+	.history-item.focused {
	137	+	background: color-mix(in srgb, var(--dynamic-surface) 40%, transparent);
	138	+	}
	139	+
	140	+	.history-item.focused {
	141	+	outline: 1px solid var(--dynamic-accent, #4ade80);
	142	+	outline-offset: -1px;
	143	+	}
	144	+
	145	+	.history-item.deleting {
	146	+	opacity: 0.3;
	147	+	pointer-events: none;
	148	+	}
	149	+
	150	+	.item-favicon {
	151	+	width: 28px;
	152	+	height: 28px;
	153	+	border: 1px solid var(--dynamic-border);
	154	+	background: var(--dynamic-bg);
	155	+	display: flex;
	156	+	align-items: center;
	157	+	justify-content: center;
	158	+	flex-shrink: 0;
	159	+	}
	160	+
	161	+	.favicon-img {
	162	+	width: 16px;
	163	+	height: 16px;
	164	+	object-fit: contain;
	165	+	}
	166	+
	167	+	.favicon-fallback {
	168	+	width: 16px;
	169	+	height: 16px;
	170	+	display: flex;
	171	+	align-items: center;
	172	+	justify-content: center;
	173	+	color: var(--dynamic-muted);
	174	+	}
	175	+
	176	+	.favicon-fallback::before {
	177	+	content: '';
	178	+	font-size: 0.75rem;
	179	+	}
	180	+
	181	+	.item-content {
	182	+	display: flex;
	183	+	flex-direction: column;
	184	+	gap: 0.15rem;
	185	+	min-width: 0;
	186	+	}
	187	+
	188	+	.item-row {
	189	+	display: flex;
	190	+	align-items: center;
	191	+	justify-content: space-between;
	192	+	gap: 0.75rem;
	193	+	}
	194	+
	195	+	.item-title {
	196	+	font-size: 0.8rem;
	197	+	font-weight: 500;
	198	+	color: var(--dynamic-text);
	199	+	white-space: nowrap;
	200	+	overflow: hidden;
	201	+	text-overflow: ellipsis;
	202	+	}
	203	+
	204	+	.item-time {
	205	+	font-size: 0.65rem;
	206	+	color: var(--dynamic-muted);
	207	+	text-transform: uppercase;
	208	+	letter-spacing: 0.08em;
	209	+	white-space: nowrap;
	210	+	flex-shrink: 0;
	211	+	}
	212	+
	213	+	.item-url {
	214	+	font-size: 0.68rem;
	215	+	color: var(--dynamic-muted);
	216	+	white-space: nowrap;
	217	+	overflow: hidden;
	218	+	text-overflow: ellipsis;
	219	+	}
	220	+
	221	+	.item-actions {
	222	+	display: flex;
	223	+	align-items: center;
	224	+	gap: 0.5rem;
	225	+	}
	226	+
	227	+	.visit-count {
	228	+	font-size: 0.6rem;
	229	+	color: var(--dynamic-muted);
	230	+	padding: 0.15rem 0.35rem;
	231	+	border: 1px solid var(--dynamic-border);
	232	+	background: var(--dynamic-bg);
	233	+	}
	234	+
	235	+	.action-btn {
	236	+	width: 24px;
	237	+	height: 24px;
	238	+	display: flex;
	239	+	align-items: center;
	240	+	justify-content: center;
	241	+	border: 1px solid var(--dynamic-border);
	242	+	background: transparent;
	243	+	color: var(--dynamic-muted);
	244	+	cursor: pointer;
	245	+	transition: all 100ms ease;
	246	+	opacity: 0;
	247	+	}
	248	+
	249	+	.history-item:hover .action-btn,
	250	+	.history-item.focused .action-btn {
	251	+	opacity: 1;
	252	+	}
	253	+
	254	+	.action-btn:hover {
	255	+	color: var(--dynamic-text);
	256	+	border-color: var(--dynamic-text);
	257	+	background: color-mix(in srgb, var(--dynamic-surface) 50%, transparent);
	258	+	}
	259	+
	260	+	.delete-btn:hover {
	261	+	color: #ef4444;
	262	+	border-color: #ef4444;
	263	+	}
	264	+	</style>

A gui/src/pages/homepage/history/HistorySearch.svelte +171 -0

@@ -0,0 +1,171 @@
	1	+	<script lang="ts">
	2	+	import { onMount } from 'svelte';
	3	+	import { homepageState } from '../state.svelte';
	4	+	import { handleSearchInput } from '../keyboard';
	5	+
	6	+	interface Props {
	7	+	placeholder?: string;
	8	+	autofocus?: boolean;
	9	+	}
	10	+
	11	+	let { placeholder = 'Search history...', autofocus = false }: Props = $props();
	12	+
	13	+	let inputRef = $state<HTMLInputElement \| null>(null);
	14	+
	15	+	// Auto-focus on mount if requested
	16	+	onMount(() => {
	17	+	if (autofocus && inputRef) {
	18	+	inputRef.focus();
	19	+	}
	20	+	});
	21	+
	22	+	const handleInput = (e: Event) => {
	23	+	const target = e.target as HTMLInputElement;
	24	+	handleSearchInput(target.value);
	25	+	};
	26	+
	27	+	const handleKeyDown = (e: KeyboardEvent) => {
	28	+	switch (e.key) {
	29	+	case 'Escape':
	30	+	e.preventDefault();
	31	+	e.stopPropagation();
	32	+	if (homepageState.historySearchQuery) {
	33	+	// First Esc: clear search
	34	+	homepageState.setHistorySearchQuery('');
	35	+	} else {
	36	+	// Second Esc (or if no query): blur input
	37	+	inputRef?.blur();
	38	+	}
	39	+	break;
	40	+	case 'ArrowDown':
	41	+	case 'j':
	42	+	if (e.key === 'j' && !e.ctrlKey) break; // Only Ctrl+j or ArrowDown
	43	+	e.preventDefault();
	44	+	homepageState.focusNext();
	45	+	inputRef?.blur();
	46	+	break;
	47	+	case 'ArrowUp':
	48	+	case 'k':
	49	+	if (e.key === 'k' && !e.ctrlKey) break; // Only Ctrl+k or ArrowUp
	50	+	e.preventDefault();
	51	+	// Don't move focus - already at top
	52	+	break;
	53	+	}
	54	+	};
	55	+
	56	+	// Focus input when focusedIndex becomes -1 (user pressed up from first item)
	57	+	$effect(() => {
	58	+	if (homepageState.focusedIndex === -1 && homepageState.activePanel === 'history') {
	59	+	inputRef?.focus();
	60	+	}
	61	+	});
	62	+
	63	+	const clearSearch = () => {
	64	+	homepageState.setHistorySearchQuery('');
	65	+	inputRef?.focus();
	66	+	};
	67	+	</script>
	68	+
	69	+	<div class="history-search">
	70	+	<div class="search-icon"></div>
	71	+	<input
	72	+	bind:this={inputRef}
	73	+	type="text"
	74	+	class="search-input"
	75	+	{placeholder}
	76	+	value={homepageState.historySearchQuery}
	77	+	oninput={handleInput}
	78	+	onkeydown={handleKeyDown}
	79	+	/>
	80	+	{#if homepageState.historySearching}
	81	+	<div class="search-spinner"></div>
	82	+	{:else if homepageState.historySearchQuery}
	83	+	<button
	84	+	class="clear-btn"
	85	+	type="button"
	86	+	onclick={clearSearch}
	87	+	title="Clear search (Esc)"
	88	+	>
	89	+	×
	90	+	</button>
	91	+	{:else}
	92	+	<kbd class="search-hint">/</kbd>
	93	+	{/if}
	94	+	</div>
	95	+
	96	+	<style>
	97	+	.history-search {
	98	+	display: flex;
	99	+	align-items: center;
	100	+	gap: 0.6rem;
	101	+	padding: 0.5rem 0.75rem;
	102	+	border: 1px solid var(--dynamic-border);
	103	+	background: var(--dynamic-bg);
	104	+	transition: border-color 150ms ease;
	105	+	}
	106	+
	107	+	.history-search:focus-within {
	108	+	border-color: var(--dynamic-accent, #4ade80);
	109	+	}
	110	+
	111	+	.search-icon::before {
	112	+	content: '';
	113	+	font-size: 0.85rem;
	114	+	color: var(--dynamic-muted);
	115	+	}
	116	+
	117	+	.search-input {
	118	+	flex: 1;
	119	+	border: none;
	120	+	background: transparent;
	121	+	color: var(--dynamic-text);
	122	+	font-family: inherit;
	123	+	font-size: 0.8rem;
	124	+	outline: none;
	125	+	}
	126	+
	127	+	.search-input::placeholder {
	128	+	color: var(--dynamic-muted);
	129	+	letter-spacing: 0.05em;
	130	+	}
	131	+
	132	+	.search-spinner {
	133	+	width: 14px;
	134	+	height: 14px;
	135	+	border: 2px solid var(--dynamic-border);
	136	+	border-top-color: var(--dynamic-accent, #4ade80);
	137	+	border-radius: 50%;
	138	+	animation: spin 0.8s linear infinite;
	139	+	}
	140	+
	141	+	@keyframes spin {
	142	+	to { transform: rotate(360deg); }
	143	+	}
	144	+
	145	+	.clear-btn {
	146	+	width: 20px;
	147	+	height: 20px;
	148	+	display: flex;
	149	+	align-items: center;
	150	+	justify-content: center;
	151	+	border: 1px solid var(--dynamic-border);
	152	+	background: transparent;
	153	+	color: var(--dynamic-muted);
	154	+	font-size: 0.9rem;
	155	+	cursor: pointer;
	156	+	transition: all 100ms ease;
	157	+	}
	158	+
	159	+	.clear-btn:hover {
	160	+	color: var(--dynamic-text);
	161	+	border-color: var(--dynamic-text);
	162	+	}
	163	+
	164	+	.search-hint {
	165	+	font-size: 0.6rem;
	166	+	padding: 0.15rem 0.35rem;
	167	+	border: 1px solid var(--dynamic-border);
	168	+	background: color-mix(in srgb, var(--dynamic-surface) 30%, transparent);
	169	+	color: var(--dynamic-muted);
	170	+	}
	171	+	</style>

A gui/src/pages/homepage/history/HistoryTimeline.svelte +220 -0

@@ -0,0 +1,220 @@
	1	+	<script lang="ts">
	2	+	import type { TimelineGroup, HistoryEntry } from '../types';
	3	+	import { homepageState } from '../state.svelte';
	4	+	import HistoryItem from './HistoryItem.svelte';
	5	+
	6	+	interface Props {
	7	+	groups: TimelineGroup[];
	8	+	onSelectEntry?: (entry: HistoryEntry) => void;
	9	+	onDeleteEntry?: (entry: HistoryEntry) => void;
	10	+	onLoadMore?: () => void;
	11	+	}
	12	+
	13	+	let { groups, onSelectEntry, onDeleteEntry, onLoadMore }: Props = $props();
	14	+
	15	+	let containerRef = $state<HTMLElement \| null>(null);
	16	+	let sentinelRef = $state<HTMLElement \| null>(null);
	17	+
	18	+	// Flatten groups to get global index for keyboard navigation
	19	+	const flatEntries = $derived(() => {
	20	+	const entries: HistoryEntry[] = [];
	21	+	for (const group of groups) {
	22	+	entries.push(...group.entries);
	23	+	}
	24	+	return entries;
	25	+	});
	26	+
	27	+	// Track which entry is focused based on global focusedIndex
	28	+	const getFocusedEntry = () => {
	29	+	const entries = flatEntries();
	30	+	return entries[homepageState.focusedIndex] ?? null;
	31	+	};
	32	+
	33	+	// Track previous focused index to only scroll on actual navigation
	34	+	let prevFocusedIndex = $state(-1);
	35	+
	36	+	// Scroll focused item into view when focusedIndex changes via keyboard navigation
	37	+	$effect(() => {
	38	+	// Skip if panel not active or command palette is open
	39	+	if (!containerRef \|\| homepageState.activePanel !== 'history') return;
	40	+	if (homepageState.commandPaletteOpen) return;
	41	+
	42	+	const currentIndex = homepageState.focusedIndex;
	43	+
	44	+	// Only scroll if index actually changed (not on initial render or modal close)
	45	+	if (prevFocusedIndex === currentIndex) return;
	46	+	if (prevFocusedIndex === -1) {
	47	+	// First render - just track, don't scroll
	48	+	prevFocusedIndex = currentIndex;
	49	+	return;
	50	+	}
	51	+
	52	+	prevFocusedIndex = currentIndex;
	53	+
	54	+	const focusedEntry = getFocusedEntry();
	55	+	if (!focusedEntry) return;
	56	+
	57	+	// Find the focused element by entry ID
	58	+	const el = containerRef.querySelector(`[data-entry-id="${focusedEntry.id}"]`);
	59	+	if (el) {
	60	+	el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
	61	+	}
	62	+	});
	63	+
	64	+	// Setup infinite scroll observer
	65	+	$effect(() => {
	66	+	if (!sentinelRef \|\| !onLoadMore) return;
	67	+
	68	+	const observer = new IntersectionObserver(
	69	+	(entries) => {
	70	+	const entry = entries[0];
	71	+	if (entry?.isIntersecting && homepageState.hasMoreHistory && !homepageState.historyLoading) {
	72	+	onLoadMore();
	73	+	}
	74	+	},
	75	+	{ threshold: 0.1, rootMargin: '100px' }
	76	+	);
	77	+
	78	+	observer.observe(sentinelRef);
	79	+
	80	+	return () => observer.disconnect();
	81	+	});
	82	+	</script>
	83	+
	84	+	<div class="history-timeline" bind:this={containerRef}>
	85	+	{#if groups.length === 0}
	86	+	<div class="empty-state">
	87	+	<span class="empty-icon"></span>
	88	+	<span class="empty-text">NO HISTORY RECORDED</span>
	89	+	<span class="empty-hint">Start browsing to see your history here</span>
	90	+	</div>
	91	+	{:else}
	92	+	{#each groups as group (group.date)}
	93	+	<div class="timeline-group">
	94	+	<div class="group-header">
	95	+	<span class="group-label">{group.label}</span>
	96	+	<span class="group-count">{group.entries.length}</span>
	97	+	</div>
	98	+	<div class="group-entries">
	99	+	{#each group.entries as entry (entry.id)}
	100	+	<HistoryItem
	101	+	{entry}
	102	+	focused={getFocusedEntry()?.id === entry.id}
	103	+	onSelect={onSelectEntry}
	104	+	onDelete={onDeleteEntry}
	105	+	/>
	106	+	{/each}
	107	+	</div>
	108	+	</div>
	109	+	{/each}
	110	+
	111	+	{#if homepageState.hasMoreHistory}
	112	+	<div class="load-more-sentinel" bind:this={sentinelRef}>
	113	+	{#if homepageState.historyLoading}
	114	+	<span class="loading-text">LOADING...</span>
	115	+	{/if}
	116	+	</div>
	117	+	{/if}
	118	+	{/if}
	119	+	</div>
	120	+
	121	+	<style>
	122	+	.history-timeline {
	123	+	display: flex;
	124	+	flex-direction: column;
	125	+	flex: 1;
	126	+	min-height: 0;
	127	+	overflow-y: auto;
	128	+	}
	129	+
	130	+	.empty-state {
	131	+	flex: 1;
	132	+	display: flex;
	133	+	flex-direction: column;
	134	+	align-items: center;
	135	+	justify-content: center;
	136	+	gap: 0.5rem;
	137	+	padding: 2rem;
	138	+	color: var(--dynamic-muted);
	139	+	text-align: center;
	140	+	}
	141	+
	142	+	.empty-icon {
	143	+	font-size: 1.5rem;
	144	+	opacity: 0.5;
	145	+	}
	146	+
	147	+	.empty-text {
	148	+	font-size: 0.75rem;
	149	+	font-weight: 600;
	150	+	letter-spacing: 0.12em;
	151	+	}
	152	+
	153	+	.empty-hint {
	154	+	font-size: 0.7rem;
	155	+	letter-spacing: 0.08em;
	156	+	opacity: 0.7;
	157	+	}
	158	+
	159	+	.timeline-group {
	160	+	border-bottom: 1px solid var(--dynamic-border);
	161	+	}
	162	+
	163	+	.timeline-group:last-child {
	164	+	border-bottom: none;
	165	+	}
	166	+
	167	+	.group-header {
	168	+	display: flex;
	169	+	align-items: center;
	170	+	justify-content: space-between;
	171	+	gap: 0.75rem;
	172	+	padding: 0.5rem 0.85rem;
	173	+	background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);
	174	+	border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);
	175	+	position: sticky;
	176	+	top: 0;
	177	+	z-index: 1;
	178	+	}
	179	+
	180	+	.group-label {
	181	+	font-size: 0.68rem;
	182	+	font-weight: 600;
	183	+	text-transform: uppercase;
	184	+	letter-spacing: 0.12em;
	185	+	color: var(--dynamic-text);
	186	+	}
	187	+
	188	+	.group-count {
	189	+	font-size: 0.6rem;
	190	+	padding: 0.15rem 0.4rem;
	191	+	border: 1px solid var(--dynamic-border);
	192	+	background: var(--dynamic-bg);
	193	+	color: var(--dynamic-muted);
	194	+	}
	195	+
	196	+	.group-entries {
	197	+	display: flex;
	198	+	flex-direction: column;
	199	+	}
	200	+
	201	+	.load-more-sentinel {
	202	+	padding: 0.75rem;
	203	+	display: flex;
	204	+	align-items: center;
	205	+	justify-content: center;
	206	+	min-height: 40px;
	207	+	}
	208	+
	209	+	.loading-text {
	210	+	font-size: 0.65rem;
	211	+	color: var(--dynamic-muted);
	212	+	letter-spacing: 0.12em;
	213	+	animation: pulse 1.5s ease-in-out infinite;
	214	+	}
	215	+
	216	+	@keyframes pulse {
	217	+	0%, 100% { opacity: 0.4; }
	218	+	50% { opacity: 1; }
	219	+	}
	220	+	</style>

A gui/src/pages/homepage/history/index.ts +6 -0

@@ -0,0 +1,6 @@
	1	+	// History Components - Timeline, Search, Filters, Cleanup
	2	+	export { default as HistoryItem } from './HistoryItem.svelte';
	3	+	export { default as HistoryTimeline } from './HistoryTimeline.svelte';
	4	+	export { default as HistorySearch } from './HistorySearch.svelte';
	5	+	export { default as HistoryFilters } from './HistoryFilters.svelte';
	6	+	export { default as HistoryCleanup } from './HistoryCleanup.svelte';

A gui/src/pages/homepage/keyboard.ts +744 -0

@@ -0,0 +1,744 @@
	1	+	// ═══════════════════════════════════════════════════════════════════════════════
	2	+	// Homepage Keyboard Navigation (Telescope-style)
	3	+	// Vim-inspired navigation with fuzzy filtering and quick shortcuts
	4	+	// ═══════════════════════════════════════════════════════════════════════════════
	5	+
	6	+	import { homepageState } from './state.svelte';
	7	+	import {
	8	+	navigateTo,
	9	+	deleteHistoryEntry,
	10	+	deleteHistoryByRange,
	11	+	clearAllHistory,
	12	+	deleteHistoryByDomain,
	13	+	getFavoriteByShortcut,
	14	+	searchHistoryFTS,
	15	+	} from './messaging';
	16	+	import type { HistoryEntry, Favorite, HistoryCleanupRange } from './types';
	17	+
	18	+	// ═══════════════════════════════════════════════════════════════════════════════
	19	+	// TYPES
	20	+	// ═══════════════════════════════════════════════════════════════════════════════
	21	+
	22	+	interface KeyBinding {
	23	+	key: string;
	24	+	ctrl?: boolean;
	25	+	shift?: boolean;
	26	+	alt?: boolean;
	27	+	meta?: boolean;
	28	+	description: string;
	29	+	action: () => void \| Promise<void>;
	30	+	context?: 'global' \| 'history' \| 'favorites' \| 'command-palette' \| 'cleanup';
	31	+	}
	32	+
	33	+	// ═══════════════════════════════════════════════════════════════════════════════
	34	+	// STATE
	35	+	// ═══════════════════════════════════════════════════════════════════════════════
	36	+
	37	+	let pendingPrefix: string \| null = null;
	38	+	let prefixTimeout: ReturnType<typeof setTimeout> \| null = null;
	39	+	const PREFIX_TIMEOUT_MS = 1000;
	40	+
	41	+	// ═══════════════════════════════════════════════════════════════════════════════
	42	+	// HELPER FUNCTIONS
	43	+	// ═══════════════════════════════════════════════════════════════════════════════
	44	+
	45	+	function getDomain(url: string): string {
	46	+	try {
	47	+	return new URL(url).hostname;
	48	+	} catch {
	49	+	return url;
	50	+	}
	51	+	}
	52	+
	53	+	function getCurrentItem(): HistoryEntry \| Favorite \| null {
	54	+	const list = homepageState.currentList;
	55	+	const idx = homepageState.focusedIndex;
	56	+	return list[idx] ?? null;
	57	+	}
	58	+
	59	+	function clearPendingPrefix(): void {
	60	+	pendingPrefix = null;
	61	+	homepageState.setPendingKeyPrefix(null);
	62	+	if (prefixTimeout) {
	63	+	clearTimeout(prefixTimeout);
	64	+	prefixTimeout = null;
	65	+	}
	66	+	}
	67	+
	68	+	function setPendingPrefix(prefix: string): void {
	69	+	pendingPrefix = prefix;
	70	+	homepageState.setPendingKeyPrefix(prefix);
	71	+	if (prefixTimeout) {
	72	+	clearTimeout(prefixTimeout);
	73	+	}
	74	+	prefixTimeout = setTimeout(clearPendingPrefix, PREFIX_TIMEOUT_MS);
	75	+	}
	76	+
	77	+	// ═══════════════════════════════════════════════════════════════════════════════
	78	+	// ACTIONS
	79	+	// ═══════════════════════════════════════════════════════════════════════════════
	80	+
	81	+	async function openCurrentItem(): Promise<void> {
	82	+	const item = getCurrentItem();
	83	+	if (item && 'url' in item) {
	84	+	navigateTo(item.url);
	85	+	}
	86	+	}
	87	+
	88	+	async function deleteCurrentHistoryEntry(): Promise<void> {
	89	+	if (homepageState.activePanel !== 'history') return;
	90	+
	91	+	const item = getCurrentItem() as HistoryEntry \| null;
	92	+	if (!item) return;
	93	+
	94	+	await deleteHistoryEntry(item.id);
	95	+
	96	+	// Adjust focus if needed
	97	+	const newLength = homepageState.currentListLength;
	98	+	if (homepageState.focusedIndex >= newLength) {
	99	+	homepageState.setFocusedIndex(Math.max(0, newLength - 1));
	100	+	}
	101	+	}
	102	+
	103	+	async function handleCleanupShortcut(range: HistoryCleanupRange): Promise<void> {
	104	+	if (homepageState.activePanel !== 'history') return;
	105	+
	106	+	const messages: Record<HistoryCleanupRange, string> = {
	107	+	hour: 'Clear history from the last hour?',
	108	+	day: 'Clear history from the last day?',
	109	+	week: 'Clear history from the last week?',
	110	+	month: 'Clear history from the last month?',
	111	+	all: 'Clear ALL history? This cannot be undone.',
	112	+	};
	113	+
	114	+	homepageState.showConfirm(messages[range], async () => {
	115	+	if (range === 'all') {
	116	+	await clearAllHistory();
	117	+	} else {
	118	+	await deleteHistoryByRange(range);
	119	+	}
	120	+	});
	121	+	}
	122	+
	123	+	async function clearCurrentDomain(): Promise<void> {
	124	+	if (homepageState.activePanel !== 'history') return;
	125	+
	126	+	const item = getCurrentItem() as HistoryEntry \| null;
	127	+	if (!item) return;
	128	+
	129	+	const domain = getDomain(item.url);
	130	+	homepageState.showConfirm(
	131	+	`Clear all history for ${domain}?`,
	132	+	async () => {
	133	+	await deleteHistoryByDomain(domain);
	134	+	}
	135	+	);
	136	+	}
	137	+
	138	+	async function handleQuickShortcut(key: number): Promise<void> {
	139	+	const favorite = await getFavoriteByShortcut(key);
	140	+	if (favorite) {
	141	+	navigateTo(favorite.url);
	142	+	}
	143	+	}
	144	+
	145	+	// ═══════════════════════════════════════════════════════════════════════════════
	146	+	// KEY BINDINGS
	147	+	// ═══════════════════════════════════════════════════════════════════════════════
	148	+
	149	+	const globalBindings: KeyBinding[] = [
	150	+	// Command palette
	151	+	{
	152	+	key: 'p',
	153	+	ctrl: true,
	154	+	description: 'Open command palette',
	155	+	action: () => homepageState.openCommandPalette(),
	156	+	},
	157	+	// Note: "/" may require Shift on some keyboard layouts (e.g., AZERTY)
	158	+	// We handle it specially in handleKeyDown to ignore Shift state
	159	+	{
	160	+	key: '/',
	161	+	description: 'Open command palette / search',
	162	+	action: () => homepageState.openCommandPalette(),
	163	+	},
	164	+
	165	+	// Quick navigation (1-9)
	166	+	...Array.from({ length: 9 }, (_, i) => ({
	167	+	key: String(i + 1),
	168	+	description: `Navigate to favorite shortcut ${i + 1}`,
	169	+	action: () => handleQuickShortcut(i + 1),
	170	+	})),
	171	+
	172	+	// Panel navigation (g prefix)
	173	+	{
	174	+	key: 'h',
	175	+	description: 'Go to History panel',
	176	+	action: () => {
	177	+	if (pendingPrefix === 'g') {
	178	+	homepageState.setActivePanel('history');
	179	+	clearPendingPrefix();
	180	+	}
	181	+	},
	182	+	context: 'global',
	183	+	},
	184	+	{
	185	+	key: 'f',
	186	+	description: 'Go to Favorites panel',
	187	+	action: () => {
	188	+	if (pendingPrefix === 'g') {
	189	+	homepageState.setActivePanel('favorites');
	190	+	clearPendingPrefix();
	191	+	}
	192	+	},
	193	+	context: 'global',
	194	+	},
	195	+	{
	196	+	key: 'a',
	197	+	description: 'Go to Analytics panel',
	198	+	action: () => {
	199	+	if (pendingPrefix === 'g') {
	200	+	homepageState.setActivePanel('analytics');
	201	+	clearPendingPrefix();
	202	+	}
	203	+	},
	204	+	context: 'global',
	205	+	},
	206	+
	207	+	// Escape
	208	+	{
	209	+	key: 'Escape',
	210	+	description: 'Close modals / clear search',
	211	+	action: () => {
	212	+	clearPendingPrefix();
	213	+	if (homepageState.commandPaletteOpen) {
	214	+	homepageState.closeCommandPalette();
	215	+	} else if (homepageState.confirmModalOpen) {
	216	+	homepageState.cancelConfirm();
	217	+	} else if (homepageState.cleanupModalOpen) {
	218	+	homepageState.closeCleanupModal();
	219	+	} else if (homepageState.historySearchQuery) {
	220	+	homepageState.setHistorySearchQuery('');
	221	+	}
	222	+	},
	223	+	},
	224	+
	225	+	// Tab - cycle through panels
	226	+	{
	227	+	key: 'Tab',
	228	+	description: 'Next panel',
	229	+	action: () => {
	230	+	const panels = ['history', 'favorites', 'analytics'] as const;
	231	+	const currentIdx = panels.indexOf(homepageState.activePanel);
	232	+	const nextIdx = (currentIdx + 1) % panels.length;
	233	+	const nextPanel = panels[nextIdx];
	234	+	if (nextPanel) {
	235	+	homepageState.setActivePanel(nextPanel);
	236	+	}
	237	+	},
	238	+	},
	239	+	{
	240	+	key: 'Tab',
	241	+	shift: true,
	242	+	description: 'Previous panel',
	243	+	action: () => {
	244	+	const panels = ['history', 'favorites', 'analytics'] as const;
	245	+	const currentIdx = panels.indexOf(homepageState.activePanel);
	246	+	const prevIdx = (currentIdx - 1 + panels.length) % panels.length;
	247	+	const prevPanel = panels[prevIdx];
	248	+	if (prevPanel) {
	249	+	homepageState.setActivePanel(prevPanel);
	250	+	}
	251	+	},
	252	+	},
	253	+	];
	254	+
	255	+	const listBindings: KeyBinding[] = [
	256	+	// Navigation
	257	+	{
	258	+	key: 'j',
	259	+	description: 'Move down',
	260	+	action: () => homepageState.focusNext(),
	261	+	},
	262	+	{
	263	+	key: 'ArrowDown',
	264	+	description: 'Move down',
	265	+	action: () => homepageState.focusNext(),
	266	+	},
	267	+	{
	268	+	key: 'k',
	269	+	description: 'Move up',
	270	+	action: () => homepageState.focusPrev(),
	271	+	},
	272	+	{
	273	+	key: 'ArrowUp',
	274	+	description: 'Move up',
	275	+	action: () => homepageState.focusPrev(),
	276	+	},
	277	+	{
	278	+	key: 'n',
	279	+	ctrl: true,
	280	+	description: 'Move down',
	281	+	action: () => homepageState.focusNext(),
	282	+	},
	283	+	{
	284	+	key: 'p',
	285	+	ctrl: true,
	286	+	description: 'Move up',
	287	+	action: () => homepageState.focusPrev(),
	288	+	},
	289	+	{
	290	+	key: 'g',
	291	+	description: 'Go to first / prefix for panel nav',
	292	+	action: () => {
	293	+	if (pendingPrefix === 'g') {
	294	+	homepageState.focusFirst();
	295	+	clearPendingPrefix();
	296	+	} else {
	297	+	setPendingPrefix('g');
	298	+	}
	299	+	},
	300	+	},
	301	+	{
	302	+	key: 'G',
	303	+	shift: true,
	304	+	description: 'Go to last',
	305	+	action: () => homepageState.focusLast(),
	306	+	},
	307	+
	308	+	// Selection
	309	+	{
	310	+	key: 'Enter',
	311	+	description: 'Open selected item',
	312	+	action: openCurrentItem,
	313	+	},
	314	+	{
	315	+	key: 'o',
	316	+	description: 'Open selected item',
	317	+	action: openCurrentItem,
	318	+	},
	319	+	];
	320	+
	321	+	const historyBindings: KeyBinding[] = [
	322	+	// Delete
	323	+	{
	324	+	key: 'd',
	325	+	description: 'Delete entry / prefix for cleanup',
	326	+	action: () => {
	327	+	if (pendingPrefix === 'D') {
	328	+	// D d - clear last day
	329	+	handleCleanupShortcut('day');
	330	+	clearPendingPrefix();
	331	+	} else {
	332	+	deleteCurrentHistoryEntry();
	333	+	}
	334	+	},
	335	+	context: 'history',
	336	+	},
	337	+	{
	338	+	key: 'x',
	339	+	description: 'Delete entry',
	340	+	action: deleteCurrentHistoryEntry,
	341	+	context: 'history',
	342	+	},
	343	+
	344	+	// Cleanup shortcuts (D prefix)
	345	+	{
	346	+	key: 'D',
	347	+	shift: true,
	348	+	description: 'Cleanup prefix / Clear ALL',
	349	+	action: () => {
	350	+	if (pendingPrefix === 'D') {
	351	+	// D D - clear all
	352	+	handleCleanupShortcut('all');
	353	+	clearPendingPrefix();
	354	+	} else {
	355	+	setPendingPrefix('D');
	356	+	}
	357	+	},
	358	+	context: 'history',
	359	+	},
	360	+	{
	361	+	key: 'h',
	362	+	description: 'Clear last hour',
	363	+	action: () => {
	364	+	if (pendingPrefix === 'D') {
	365	+	handleCleanupShortcut('hour');
	366	+	clearPendingPrefix();
	367	+	}
	368	+	},
	369	+	context: 'history',
	370	+	},
	371	+	{
	372	+	key: 'w',
	373	+	description: 'Clear last week',
	374	+	action: () => {
	375	+	if (pendingPrefix === 'D') {
	376	+	handleCleanupShortcut('week');
	377	+	clearPendingPrefix();
	378	+	}
	379	+	},
	380	+	context: 'history',
	381	+	},
	382	+	{
	383	+	key: 'm',
	384	+	description: 'Clear last month',
	385	+	action: () => {
	386	+	if (pendingPrefix === 'D') {
	387	+	handleCleanupShortcut('month');
	388	+	clearPendingPrefix();
	389	+	}
	390	+	},
	391	+	context: 'history',
	392	+	},
	393	+	{
	394	+	key: '@',
	395	+	shift: true,
	396	+	description: 'Clear current domain',
	397	+	action: () => {
	398	+	if (pendingPrefix === 'D') {
	399	+	clearCurrentDomain();
	400	+	clearPendingPrefix();
	401	+	}
	402	+	},
	403	+	context: 'history',
	404	+	},
	405	+	];
	406	+
	407	+	const commandPaletteBindings: KeyBinding[] = [
	408	+	{
	409	+	key: 'j',
	410	+	ctrl: true,
	411	+	description: 'Move down',
	412	+	action: () => homepageState.focusNext(),
	413	+	context: 'command-palette',
	414	+	},
	415	+	{
	416	+	key: 'n',
	417	+	ctrl: true,
	418	+	description: 'Move down',
	419	+	action: () => homepageState.focusNext(),
	420	+	context: 'command-palette',
	421	+	},
	422	+	{
	423	+	key: 'ArrowDown',
	424	+	description: 'Move down',
	425	+	action: () => homepageState.focusNext(),
	426	+	context: 'command-palette',
	427	+	},
	428	+	{
	429	+	key: 'k',
	430	+	ctrl: true,
	431	+	description: 'Move up',
	432	+	action: () => homepageState.focusPrev(),
	433	+	context: 'command-palette',
	434	+	},
	435	+	{
	436	+	key: 'p',
	437	+	ctrl: true,
	438	+	description: 'Move up',
	439	+	action: () => homepageState.focusPrev(),
	440	+	context: 'command-palette',
	441	+	},
	442	+	{
	443	+	key: 'ArrowUp',
	444	+	description: 'Move up',
	445	+	action: () => homepageState.focusPrev(),
	446	+	context: 'command-palette',
	447	+	},
	448	+	{
	449	+	key: 'Enter',
	450	+	description: 'Execute selected command',
	451	+	action: () => {
	452	+	// This will be handled by the command palette component
	453	+	},
	454	+	context: 'command-palette',
	455	+	},
	456	+	];
	457	+
	458	+	// ═══════════════════════════════════════════════════════════════════════════════
	459	+	// KEY HANDLER
	460	+	// ═══════════════════════════════════════════════════════════════════════════════
	461	+
	462	+	function matchBinding(e: KeyboardEvent, binding: KeyBinding): boolean {
	463	+	if (binding.key !== e.key) return false;
	464	+	if (!!binding.ctrl !== e.ctrlKey) return false;
	465	+	if (!!binding.shift !== e.shiftKey) return false;
	466	+	if (!!binding.alt !== e.altKey) return false;
	467	+	if (!!binding.meta !== e.metaKey) return false;
	468	+	return true;
	469	+	}
	470	+
	471	+	function getActiveBindings(): KeyBinding[] {
	472	+	const bindings: KeyBinding[] = [...globalBindings];
	473	+
	474	+	if (homepageState.commandPaletteOpen) {
	475	+	bindings.push(...commandPaletteBindings);
	476	+	} else {
	477	+	bindings.push(...listBindings);
	478	+
	479	+	switch (homepageState.activePanel) {
	480	+	case 'history':
	481	+	bindings.push(...historyBindings);
	482	+	break;
	483	+	case 'favorites':
	484	+	// Add favorites-specific bindings here
	485	+	break;
	486	+	}
	487	+	}
	488	+
	489	+	return bindings;
	490	+	}
	491	+
	492	+	export function handleKeyDown(e: KeyboardEvent): void {
	493	+	// Skip if focused on input/textarea (except for navigation keys)
	494	+	const target = e.target as HTMLElement;
	495	+	const isInput = target.tagName === 'INPUT' \|\| target.tagName === 'TEXTAREA';
	496	+
	497	+	// Special handling for "/" - opens command palette from anywhere
	498	+	// Ignore modifier keys since "/" may require Shift on some layouts (AZERTY)
	499	+	if (e.key === '/') {
	500	+	e.preventDefault();
	501	+	e.stopPropagation();
	502	+	if (isInput) {
	503	+	(target as HTMLInputElement).blur();
	504	+	}
	505	+	homepageState.openCommandPalette();
	506	+	return;
	507	+	}
	508	+
	509	+	if (isInput) {
	510	+	// Allow specific keys when in input
	511	+	const allowedInInput = ['Escape', 'ArrowUp', 'ArrowDown', 'Enter'];
	512	+	const ctrlAllowed = ['j', 'k', 'n', 'p'];
	513	+
	514	+	if (!allowedInInput.includes(e.key) && !(e.ctrlKey && ctrlAllowed.includes(e.key))) {
	515	+	return;
	516	+	}
	517	+	}
	518	+
	519	+	const bindings = getActiveBindings();
	520	+
	521	+	for (const binding of bindings) {
	522	+	if (matchBinding(e, binding)) {
	523	+	// Check context
	524	+	if (binding.context) {
	525	+	switch (binding.context) {
	526	+	case 'history':
	527	+	if (homepageState.activePanel !== 'history') continue;
	528	+	break;
	529	+	case 'favorites':
	530	+	if (homepageState.activePanel !== 'favorites') continue;
	531	+	break;
	532	+	case 'command-palette':
	533	+	if (!homepageState.commandPaletteOpen) continue;
	534	+	break;
	535	+	}
	536	+	}
	537	+
	538	+	e.preventDefault();
	539	+	e.stopPropagation();
	540	+	binding.action();
	541	+	return;
	542	+	}
	543	+	}
	544	+
	545	+	// Handle 'g' prefix standalone
	546	+	if (e.key === 'g' && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && !isInput) {
	547	+	if (!pendingPrefix) {
	548	+	e.preventDefault();
	549	+	setPendingPrefix('g');
	550	+	}
	551	+	}
	552	+	}
	553	+
	554	+	// ═══════════════════════════════════════════════════════════════════════════════
	555	+	// TIERED SEARCH (Client-side first, then FTS)
	556	+	// ═══════════════════════════════════════════════════════════════════════════════
	557	+
	558	+	let searchDebounceTimer: ReturnType<typeof setTimeout> \| null = null;
	559	+	const SEARCH_DEBOUNCE_MS = 400;
	560	+	const MIN_FTS_QUERY_LENGTH = 3;
	561	+
	562	+	/**
	563	+	* Fuzzy match score calculator.
	564	+	* Supports words in any order (fzf-style).
	565	+	* Returns score > 0 if match, 0 if no match. Higher = better.
	566	+	*/
	567	+	function fuzzyScore(text: string, query: string): number {
	568	+	const lowerText = text.toLowerCase();
	569	+	const lowerQuery = query.toLowerCase();
	570	+
	571	+	// Split query into words for "any order" matching
	572	+	const queryWords = lowerQuery.split(/\s+/).filter(w => w.length > 0);
	573	+	if (queryWords.length === 0) return 0;
	574	+
	575	+	let totalScore = 0;
	576	+
	577	+	for (const word of queryWords) {
	578	+	// Exact substring match (highest score)
	579	+	const exactIdx = lowerText.indexOf(word);
	580	+	if (exactIdx !== -1) {
	581	+	// Bonus for word boundary match (start of text or after space/punctuation)
	582	+	const atBoundary = exactIdx === 0 \|\| /[\s\-_./]/.test(lowerText[exactIdx - 1] \|\| '');
	583	+	totalScore += 100 + (atBoundary ? 50 : 0) + (word.length * 10);
	584	+	continue;
	585	+	}
	586	+
	587	+	// Fuzzy: chars in sequence (lower score)
	588	+	let qi = 0;
	589	+	let lastMatchIdx = -1;
	590	+	let consecutiveBonus = 0;
	591	+
	592	+	for (let i = 0; i < lowerText.length && qi < word.length; i++) {
	593	+	if (lowerText[i] === word[qi]) {
	594	+	// Bonus for consecutive matches
	595	+	if (lastMatchIdx === i - 1) consecutiveBonus += 5;
	596	+	lastMatchIdx = i;
	597	+	qi++;
	598	+	}
	599	+	}
	600	+
	601	+	if (qi === word.length) {
	602	+	// All chars found in order
	603	+	totalScore += 30 + consecutiveBonus;
	604	+	} else {
	605	+	// This query word not found - no match
	606	+	return 0;
	607	+	}
	608	+	}
	609	+
	610	+	return totalScore;
	611	+	}
	612	+
	613	+	interface ScoredEntry {
	614	+	entry: HistoryEntry;
	615	+	score: number;
	616	+	}
	617	+
	618	+	/**
	619	+	* Filter history entries client-side using fuzzy matching.
	620	+	* Combines title + URL so words can match across both fields.
	621	+	* E.g. "google search" matches title "Google" + URL containing "search"
	622	+	*/
	623	+	function filterHistoryLocal(query: string): HistoryEntry[] {
	624	+	const q = query.trim();
	625	+	if (!q) return [];
	626	+
	627	+	const scored: ScoredEntry[] = [];
	628	+
	629	+	for (const entry of homepageState.history) {
	630	+	const title = entry.title \|\| '';
	631	+	const url = entry.url;
	632	+
	633	+	// Combine title and URL for cross-field word matching
	634	+	// Title gets priority (appears first), URL stripped of protocol
	635	+	const urlClean = url.replace(/^https?:\/\//, '').replace(/\/$/, '');
	636	+	const combined = `${title} ${urlClean}`;
	637	+
	638	+	const score = fuzzyScore(combined, q);
	639	+
	640	+	// Boost score if title matches directly (more relevant)
	641	+	const titleBonus = fuzzyScore(title, q) > 0 ? 50 : 0;
	642	+
	643	+	if (score > 0) {
	644	+	scored.push({ entry, score: score + titleBonus });
	645	+	}
	646	+	}
	647	+
	648	+	// Sort by score descending, limit results
	649	+	scored.sort((a, b) => b.score - a.score);
	650	+	return scored.slice(0, 50).map(s => s.entry);
	651	+	}
	652	+
	653	+	export function handleSearchInput(query: string): void {
	654	+	homepageState.setHistorySearchQuery(query);
	655	+
	656	+	if (searchDebounceTimer) {
	657	+	clearTimeout(searchDebounceTimer);
	658	+	searchDebounceTimer = null;
	659	+	}
	660	+
	661	+	const trimmed = query.trim();
	662	+	if (!trimmed) {
	663	+	homepageState.setHistorySearchResults([]);
	664	+	return;
	665	+	}
	666	+
	667	+	// Tier 1: Instant client-side fuzzy filter on cached history
	668	+	const localResults = filterHistoryLocal(trimmed);
	669	+	homepageState.setHistorySearchResults(localResults);
	670	+
	671	+	// Tier 2: If local returns 0 results AND query is long enough, try FTS
	672	+	// Also try FTS after debounce if query is substantial (deeper search)
	673	+	if (trimmed.length >= MIN_FTS_QUERY_LENGTH) {
	674	+	searchDebounceTimer = setTimeout(() => {
	675	+	// Only call FTS if local results are sparse
	676	+	if (localResults.length < 5) {
	677	+	searchHistoryFTS(trimmed);
	678	+	}
	679	+	}, SEARCH_DEBOUNCE_MS);
	680	+	}
	681	+	}
	682	+
	683	+	// ═══════════════════════════════════════════════════════════════════════════════
	684	+	// KEYBOARD HINTS FOR UI
	685	+	// ═══════════════════════════════════════════════════════════════════════════════
	686	+
	687	+	export interface KeyboardHint {
	688	+	keys: string[];
	689	+	description: string;
	690	+	}
	691	+
	692	+	export function getContextualHints(): KeyboardHint[] {
	693	+	const hints: KeyboardHint[] = [];
	694	+
	695	+	if (homepageState.commandPaletteOpen) {
	696	+	hints.push(
	697	+	{ keys: ['Ctrl+j', '↓'], description: 'Move down' },
	698	+	{ keys: ['Ctrl+k', '↑'], description: 'Move up' },
	699	+	{ keys: ['Enter'], description: 'Execute' },
	700	+	{ keys: ['Escape'], description: 'Close' }
	701	+	);
	702	+	} else {
	703	+	hints.push(
	704	+	{ keys: ['j', '↓'], description: 'Move down' },
	705	+	{ keys: ['k', '↑'], description: 'Move up' },
	706	+	{ keys: ['Enter', 'o'], description: 'Open' },
	707	+	{ keys: ['/'], description: 'Search' }
	708	+	);
	709	+
	710	+	if (homepageState.activePanel === 'history') {
	711	+	hints.push(
	712	+	{ keys: ['d', 'x'], description: 'Delete' },
	713	+	{ keys: ['D h'], description: 'Clear hour' },
	714	+	{ keys: ['D d'], description: 'Clear day' },
	715	+	{ keys: ['D D'], description: 'Clear all' }
	716	+	);
	717	+	}
	718	+
	719	+	hints.push(
	720	+	{ keys: ['g h'], description: 'History' },
	721	+	{ keys: ['g f'], description: 'Favorites' },
	722	+	{ keys: ['g a'], description: 'Analytics' },
	723	+	{ keys: ['1-9'], description: 'Quick nav' }
	724	+	);
	725	+	}
	726	+
	727	+	return hints;
	728	+	}
	729	+
	730	+	// ═══════════════════════════════════════════════════════════════════════════════
	731	+	// INITIALIZATION
	732	+	// ═══════════════════════════════════════════════════════════════════════════════
	733	+
	734	+	export function initializeKeyboard(): () => void {
	735	+	document.addEventListener('keydown', handleKeyDown);
	736	+
	737	+	return () => {
	738	+	document.removeEventListener('keydown', handleKeyDown);
	739	+	clearPendingPrefix();
	740	+	if (searchDebounceTimer) {
	741	+	clearTimeout(searchDebounceTimer);
	742	+	}
	743	+	};
	744	+	}

A gui/src/pages/homepage/messaging.ts +515 -0

@@ -0,0 +1,515 @@
	1	+	// ═══════════════════════════════════════════════════════════════════════════════
	2	+	// Homepage WebKit Bridge
	3	+	// Communication layer between frontend and Go backend via WebKit message handlers
	4	+	// ═══════════════════════════════════════════════════════════════════════════════
	5	+
	6	+	import type {
	7	+	MessageType,
	8	+	HistoryEntry,
	9	+	Folder,
	10	+	Tag,
	11	+	Favorite,
	12	+	DomainStat,
	13	+	Analytics,
	14	+	HistoryCleanupRange,
	15	+	FolderCreateRequest,
	16	+	FolderUpdateRequest,
	17	+	TagCreateRequest,
	18	+	TagUpdateRequest,
	19	+	} from './types';
	20	+	import { homepageState } from './state.svelte';
	21	+
	22	+	// ═══════════════════════════════════════════════════════════════════════════════
	23	+	// REQUEST TRACKING
	24	+	// ═══════════════════════════════════════════════════════════════════════════════
	25	+
	26	+	interface PendingRequest<T = unknown> {
	27	+	resolve: (value: T) => void;
	28	+	reject: (error: Error) => void;
	29	+	timeout: ReturnType<typeof setTimeout>;
	30	+	}
	31	+
	32	+	const pendingRequests = new Map<string, PendingRequest>();
	33	+	const REQUEST_TIMEOUT_MS = 10_000;
	34	+
	35	+	let callbacksInitialized = false;
	36	+
	37	+	// ═══════════════════════════════════════════════════════════════════════════════
	38	+	// WEBKIT BRIDGE UTILITIES
	39	+	// ═══════════════════════════════════════════════════════════════════════════════
	40	+
	41	+	function getWebKitBridge(): { postMessage: (msg: string) => void } \| null {
	42	+	const bridge = (window as any).webkit?.messageHandlers?.dumber;
	43	+	if (bridge && typeof bridge.postMessage === 'function') {
	44	+	return bridge;
	45	+	}
	46	+	return null;
	47	+	}
	48	+
	49	+	function generateRequestId(type: string): string {
	50	+	return `${type}_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
	51	+	}
	52	+
	53	+	// ═══════════════════════════════════════════════════════════════════════════════
	54	+	// CALLBACK INITIALIZATION
	55	+	// ═══════════════════════════════════════════════════════════════════════════════
	56	+
	57	+	function initializeCallbacks(): void {
	58	+	if (callbacksInitialized) return;
	59	+
	60	+	// Generic response handler
	61	+	(window as any).__dumber_homepage_response = (
	62	+	requestId: string,
	63	+	success: boolean,
	64	+	data: unknown,
	65	+	error?: string
	66	+	) => {
	67	+	const request = pendingRequests.get(requestId);
	68	+	if (!request) return;
	69	+
	70	+	clearTimeout(request.timeout);
	71	+	pendingRequests.delete(requestId);
	72	+
	73	+	if (success) {
	74	+	request.resolve(data);
	75	+	} else {
	76	+	request.reject(new Error(error \|\| 'Unknown error'));
	77	+	}
	78	+	};
	79	+
	80	+	// Legacy callbacks for backward compatibility
	81	+	(window as any).__dumber_history_timeline = (data: unknown[], requestId?: string) => {
	82	+	handleLegacyCallback(requestId, data);
	83	+	};
	84	+
	85	+	(window as any).__dumber_folders = (data: unknown[], requestId?: string) => {
	86	+	handleLegacyCallback(requestId, data);
	87	+	};
	88	+
	89	+	(window as any).__dumber_tags = (data: unknown[], requestId?: string) => {
	90	+	handleLegacyCallback(requestId, data);
	91	+	};
	92	+
	93	+	(window as any).__dumber_favorites = (data: unknown[], requestId?: string) => {
	94	+	handleLegacyCallback(requestId, data);
	95	+	};
	96	+
	97	+	(window as any).__dumber_analytics = (data: unknown, requestId?: string) => {
	98	+	handleLegacyCallback(requestId, data);
	99	+	};
	100	+
	101	+	(window as any).__dumber_domain_stats = (data: unknown[], requestId?: string) => {
	102	+	handleLegacyCallback(requestId, data);
	103	+	};
	104	+
	105	+	(window as any).__dumber_history_search_results = (data: unknown[], requestId?: string) => {
	106	+	handleLegacyCallback(requestId, data);
	107	+	};
	108	+
	109	+	(window as any).__dumber_history_deleted = (requestId?: string) => {
	110	+	handleLegacyCallback(requestId, { success: true });
	111	+	};
	112	+
	113	+	(window as any).__dumber_history_cleared = (requestId?: string) => {
	114	+	handleLegacyCallback(requestId, { success: true });
	115	+	};
	116	+
	117	+	(window as any).__dumber_error = (error: string, requestId?: string) => {
	118	+	const request = pendingRequests.get(requestId \|\| 'default');
	119	+	if (request) {
	120	+	clearTimeout(request.timeout);
	121	+	pendingRequests.delete(requestId \|\| 'default');
	122	+	request.reject(new Error(error));
	123	+	}
	124	+	};
	125	+
	126	+	// Listen for favorites changes from omnibox (e.g., when user toggles favorite)
	127	+	document.addEventListener('dumber:favorites-changed', () => {
	128	+	console.log('[homepage] Favorites changed event received, refreshing...');
	129	+	fetchFavorites();
	130	+	});
	131	+
	132	+	callbacksInitialized = true;
	133	+	}
	134	+
	135	+	function handleLegacyCallback(requestId: string \| undefined, data: unknown): void {
	136	+	const request = pendingRequests.get(requestId \|\| 'default');
	137	+	if (request) {
	138	+	clearTimeout(request.timeout);
	139	+	pendingRequests.delete(requestId \|\| 'default');
	140	+	request.resolve(data);
	141	+	}
	142	+	}
	143	+
	144	+	// ═══════════════════════════════════════════════════════════════════════════════
	145	+	// CORE SEND FUNCTION
	146	+	// ═══════════════════════════════════════════════════════════════════════════════
	147	+
	148	+	async function sendMessage<T = unknown>(
	149	+	type: MessageType,
	150	+	payload?: Record<string, unknown>
	151	+	): Promise<T> {
	152	+	initializeCallbacks();
	153	+
	154	+	const bridge = getWebKitBridge();
	155	+	if (!bridge) {
	156	+	throw new Error('WebKit message handler not available');
	157	+	}
	158	+
	159	+	const requestId = generateRequestId(type);
	160	+
	161	+	return new Promise<T>((resolve, reject) => {
	162	+	const timeout = setTimeout(() => {
	163	+	pendingRequests.delete(requestId);
	164	+	reject(new Error(`Request timeout: ${type}`));
	165	+	}, REQUEST_TIMEOUT_MS);
	166	+
	167	+	pendingRequests.set(requestId, { resolve: resolve as any, reject, timeout });
	168	+
	169	+	try {
	170	+	bridge.postMessage(JSON.stringify({
	171	+	type,
	172	+	requestId,
	173	+	...payload,
	174	+	}));
	175	+	} catch (error) {
	176	+	clearTimeout(timeout);
	177	+	pendingRequests.delete(requestId);
	178	+	reject(error);
	179	+	}
	180	+	});
	181	+	}
	182	+
	183	+	// ═══════════════════════════════════════════════════════════════════════════════
	184	+	// HISTORY API
	185	+	// ═══════════════════════════════════════════════════════════════════════════════
	186	+
	187	+	export async function fetchHistoryTimeline(
	188	+	limit: number = 50,
	189	+	offset: number = 0
	190	+	): Promise<HistoryEntry[]> {
	191	+	homepageState.setHistoryLoading(true);
	192	+	try {
	193	+	const data = await sendMessage<HistoryEntry[]>('history_timeline', {
	194	+	limit,
	195	+	offset,
	196	+	});
	197	+	const entries = Array.isArray(data) ? data : [];
	198	+
	199	+	if (offset === 0) {
	200	+	homepageState.setHistory(entries);
	201	+	} else {
	202	+	homepageState.appendHistory(entries);
	203	+	}
	204	+
	205	+	homepageState.setHistoryOffset(offset + entries.length);
	206	+	homepageState.setHasMoreHistory(entries.length === limit);
	207	+
	208	+	return entries;
	209	+	} catch (error) {
	210	+	console.error('[messaging] fetchHistoryTimeline error:', error);
	211	+	if (offset === 0) {
	212	+	homepageState.setHistory([]);
	213	+	}
	214	+	homepageState.setHasMoreHistory(false);
	215	+	return [];
	216	+	} finally {
	217	+	homepageState.setHistoryLoading(false);
	218	+	}
	219	+	}
	220	+
	221	+	export async function searchHistoryFTS(query: string): Promise<HistoryEntry[]> {
	222	+	if (!query.trim()) {
	223	+	homepageState.setHistorySearchResults([]);
	224	+	return [];
	225	+	}
	226	+
	227	+	homepageState.setHistorySearching(true);
	228	+	try {
	229	+	const data = await sendMessage<HistoryEntry[]>('history_search_fts', {
	230	+	query,
	231	+	limit: 100,
	232	+	});
	233	+	const results = Array.isArray(data) ? data : [];
	234	+	homepageState.setHistorySearchResults(results);
	235	+	return results;
	236	+	} catch (error) {
	237	+	console.error('[messaging] searchHistoryFTS error:', error);
	238	+	homepageState.setHistorySearchResults([]);
	239	+	return [];
	240	+	} finally {
	241	+	homepageState.setHistorySearching(false);
	242	+	}
	243	+	}
	244	+
	245	+	export async function deleteHistoryEntry(id: number): Promise<void> {
	246	+	try {
	247	+	await sendMessage('history_delete_entry', { id });
	248	+	homepageState.deleteHistoryEntry(id);
	249	+	} catch (error) {
	250	+	console.error('[messaging] deleteHistoryEntry error:', error);
	251	+	throw error;
	252	+	}
	253	+	}
	254	+
	255	+	export async function deleteHistoryByRange(range: HistoryCleanupRange): Promise<void> {
	256	+	try {
	257	+	await sendMessage('history_delete_range', { range });
	258	+	// Refresh history after deletion
	259	+	await fetchHistoryTimeline();
	260	+	} catch (error) {
	261	+	console.error('[messaging] deleteHistoryByRange error:', error);
	262	+	throw error;
	263	+	}
	264	+	}
	265	+
	266	+	export async function clearAllHistory(): Promise<void> {
	267	+	try {
	268	+	await sendMessage('history_clear_all');
	269	+	homepageState.clearHistory();
	270	+	} catch (error) {
	271	+	console.error('[messaging] clearAllHistory error:', error);
	272	+	throw error;
	273	+	}
	274	+	}
	275	+
	276	+	export async function deleteHistoryByDomain(domain: string): Promise<void> {
	277	+	try {
	278	+	await sendMessage('history_delete_domain', { domain });
	279	+	// Refresh history after deletion
	280	+	await fetchHistoryTimeline();
	281	+	} catch (error) {
	282	+	console.error('[messaging] deleteHistoryByDomain error:', error);
	283	+	throw error;
	284	+	}
	285	+	}
	286	+
	287	+	// ═══════════════════════════════════════════════════════════════════════════════
	288	+	// FOLDERS API
	289	+	// ═══════════════════════════════════════════════════════════════════════════════
	290	+
	291	+	export async function fetchFolders(): Promise<Folder[]> {
	292	+	try {
	293	+	const data = await sendMessage<Folder[]>('folder_list');
	294	+	const folders = Array.isArray(data) ? data : [];
	295	+	homepageState.setFolders(folders);
	296	+	return folders;
	297	+	} catch (error) {
	298	+	console.error('[messaging] fetchFolders error:', error);
	299	+	homepageState.setFolders([]);
	300	+	return [];
	301	+	}
	302	+	}
	303	+
	304	+	export async function createFolder(req: FolderCreateRequest): Promise<Folder> {
	305	+	const folder = await sendMessage<Folder>('folder_create', { ...req });
	306	+	homepageState.addFolder(folder);
	307	+	return folder;
	308	+	}
	309	+
	310	+	export async function updateFolder(req: FolderUpdateRequest): Promise<void> {
	311	+	await sendMessage('folder_update', { ...req });
	312	+	homepageState.updateFolder({
	313	+	...homepageState.folders.find(f => f.id === req.id)!,
	314	+	name: req.name,
	315	+	icon: req.icon ?? null,
	316	+	});
	317	+	}
	318	+
	319	+	export async function deleteFolder(id: number): Promise<void> {
	320	+	await sendMessage('folder_delete', { id });
	321	+	homepageState.deleteFolder(id);
	322	+	}
	323	+
	324	+	// ═══════════════════════════════════════════════════════════════════════════════
	325	+	// TAGS API
	326	+	// ═══════════════════════════════════════════════════════════════════════════════
	327	+
	328	+	export async function fetchTags(): Promise<Tag[]> {
	329	+	try {
	330	+	const data = await sendMessage<Tag[]>('tag_list');
	331	+	const tags = Array.isArray(data) ? data : [];
	332	+	homepageState.setTags(tags);
	333	+	return tags;
	334	+	} catch (error) {
	335	+	console.error('[messaging] fetchTags error:', error);
	336	+	homepageState.setTags([]);
	337	+	return [];
	338	+	}
	339	+	}
	340	+
	341	+	export async function createTag(req: TagCreateRequest): Promise<Tag> {
	342	+	const tag = await sendMessage<Tag>('tag_create', { ...req });
	343	+	homepageState.addTag(tag);
	344	+	return tag;
	345	+	}
	346	+
	347	+	export async function updateTag(req: TagUpdateRequest): Promise<void> {
	348	+	await sendMessage('tag_update', { ...req });
	349	+	const existing = homepageState.tags.find(t => t.id === req.id);
	350	+	if (existing) {
	351	+	homepageState.updateTag({
	352	+	...existing,
	353	+	name: req.name ?? existing.name,
	354	+	color: req.color ?? existing.color,
	355	+	});
	356	+	}
	357	+	}
	358	+
	359	+	export async function deleteTag(id: number): Promise<void> {
	360	+	await sendMessage('tag_delete', { id });
	361	+	homepageState.deleteTag(id);
	362	+	}
	363	+
	364	+	export async function assignTag(favoriteId: number, tagId: number): Promise<void> {
	365	+	await sendMessage('tag_assign', { favorite_id: favoriteId, tag_id: tagId });
	366	+	// Update local state
	367	+	const favorite = homepageState.favorites.find(f => f.id === favoriteId);
	368	+	const tag = homepageState.tags.find(t => t.id === tagId);
	369	+	if (favorite && tag) {
	370	+	homepageState.updateFavorite({
	371	+	...favorite,
	372	+	tags: [...(favorite.tags \|\| []), tag],
	373	+	});
	374	+	}
	375	+	}
	376	+
	377	+	export async function removeTag(favoriteId: number, tagId: number): Promise<void> {
	378	+	await sendMessage('tag_remove', { favorite_id: favoriteId, tag_id: tagId });
	379	+	// Update local state
	380	+	const favorite = homepageState.favorites.find(f => f.id === favoriteId);
	381	+	if (favorite) {
	382	+	homepageState.updateFavorite({
	383	+	...favorite,
	384	+	tags: favorite.tags?.filter(t => t.id !== tagId),
	385	+	});
	386	+	}
	387	+	}
	388	+
	389	+	// ═══════════════════════════════════════════════════════════════════════════════
	390	+	// FAVORITES API
	391	+	// ═══════════════════════════════════════════════════════════════════════════════
	392	+
	393	+	export async function fetchFavorites(): Promise<Favorite[]> {
	394	+	homepageState.setFavoritesLoading(true);
	395	+	try {
	396	+	const data = await sendMessage<Favorite[]>('favorite_list');
	397	+	const favorites = Array.isArray(data) ? data : [];
	398	+	homepageState.setFavorites(favorites);
	399	+	return favorites;
	400	+	} catch (error) {
	401	+	console.error('[messaging] fetchFavorites error:', error);
	402	+	homepageState.setFavorites([]);
	403	+	return [];
	404	+	} finally {
	405	+	homepageState.setFavoritesLoading(false);
	406	+	}
	407	+	}
	408	+
	409	+	export async function setFavoriteShortcut(
	410	+	favoriteId: number,
	411	+	shortcutKey: number \| null
	412	+	): Promise<void> {
	413	+	await sendMessage('favorite_set_shortcut', {
	414	+	favorite_id: favoriteId,
	415	+	shortcut_key: shortcutKey,
	416	+	});
	417	+	// Update local state
	418	+	const favorite = homepageState.favorites.find(f => f.id === favoriteId);
	419	+	if (favorite) {
	420	+	// Clear shortcut from any other favorite that had this key
	421	+	if (shortcutKey !== null) {
	422	+	for (const f of homepageState.favorites) {
	423	+	if (f.shortcut_key === shortcutKey && f.id !== favoriteId) {
	424	+	homepageState.updateFavorite({ ...f, shortcut_key: null });
	425	+	}
	426	+	}
	427	+	}
	428	+	homepageState.updateFavorite({ ...favorite, shortcut_key: shortcutKey });
	429	+	}
	430	+	}
	431	+
	432	+	export async function getFavoriteByShortcut(shortcutKey: number): Promise<Favorite \| null> {
	433	+	try {
	434	+	const data = await sendMessage<Favorite \| null>('favorite_get_by_shortcut', {
	435	+	shortcut_key: shortcutKey,
	436	+	});
	437	+	return data;
	438	+	} catch (error) {
	439	+	console.error('[messaging] getFavoriteByShortcut error:', error);
	440	+	return null;
	441	+	}
	442	+	}
	443	+
	444	+	export async function setFavoriteFolder(
	445	+	favoriteId: number,
	446	+	folderId: number \| null
	447	+	): Promise<void> {
	448	+	await sendMessage('favorite_set_folder', {
	449	+	favorite_id: favoriteId,
	450	+	folder_id: folderId,
	451	+	});
	452	+	// Update local state
	453	+	const favorite = homepageState.favorites.find(f => f.id === favoriteId);
	454	+	if (favorite) {
	455	+	homepageState.updateFavorite({ ...favorite, folder_id: folderId });
	456	+	}
	457	+	}
	458	+
	459	+	// ═══════════════════════════════════════════════════════════════════════════════
	460	+	// ANALYTICS API
	461	+	// ═══════════════════════════════════════════════════════════════════════════════
	462	+
	463	+	export async function fetchAnalytics(): Promise<Analytics \| null> {
	464	+	homepageState.setAnalyticsLoading(true);
	465	+	try {
	466	+	const data = await sendMessage<Analytics>('history_analytics');
	467	+	homepageState.setAnalytics(data);
	468	+	return data;
	469	+	} catch (error) {
	470	+	console.error('[messaging] fetchAnalytics error:', error);
	471	+	homepageState.setAnalytics(null);
	472	+	return null;
	473	+	} finally {
	474	+	homepageState.setAnalyticsLoading(false);
	475	+	}
	476	+	}
	477	+
	478	+	export async function fetchDomainStats(limit: number = 20): Promise<DomainStat[]> {
	479	+	try {
	480	+	const data = await sendMessage<DomainStat[]>('history_domain_stats', { limit });
	481	+	const stats = Array.isArray(data) ? data : [];
	482	+	homepageState.setDomainStats(stats);
	483	+	return stats;
	484	+	} catch (error) {
	485	+	console.error('[messaging] fetchDomainStats error:', error);
	486	+	homepageState.setDomainStats([]);
	487	+	return [];
	488	+	}
	489	+	}
	490	+
	491	+	// ═══════════════════════════════════════════════════════════════════════════════
	492	+	// INITIALIZATION
	493	+	// ═══════════════════════════════════════════════════════════════════════════════
	494	+
	495	+	export async function initializeHomepage(): Promise<void> {
	496	+	// Initialize callbacks first
	497	+	initializeCallbacks();
	498	+
	499	+	// Fetch all initial data in parallel
	500	+	await Promise.all([
	501	+	fetchHistoryTimeline(),
	502	+	fetchFolders(),
	503	+	fetchTags(),
	504	+	fetchFavorites(),
	505	+	fetchAnalytics(),
	506	+	]);
	507	+	}
	508	+
	509	+	// ═══════════════════════════════════════════════════════════════════════════════
	510	+	// NAVIGATION
	511	+	// ═══════════════════════════════════════════════════════════════════════════════
	512	+
	513	+	export function navigateTo(url: string): void {
	514	+	window.location.href = url;
	515	+	}

A gui/src/pages/homepage/panels/AnalyticsPanel.svelte +266 -0

@@ -0,0 +1,266 @@
	1	+	<script lang="ts">
	2	+	import { homepageState } from '../state.svelte';
	3	+	import { fetchAnalytics } from '../messaging';
	4	+
	5	+	// Fetch analytics on mount
	6	+	$effect(() => {
	7	+	if (!homepageState.analytics) {
	8	+	fetchAnalytics();
	9	+	}
	10	+	});
	11	+
	12	+	const formatNumber = (n: number): string => {
	13	+	if (n >= 1000) {
	14	+	return `${(n / 1000).toFixed(1)}k`;
	15	+	}
	16	+	return n.toString();
	17	+	};
	18	+	</script>
	19	+
	20	+	<div class="analytics-panel">
	21	+	{#if homepageState.analyticsLoading}
	22	+	<div class="loading-state">
	23	+	<span class="loading-spinner"></span>
	24	+	<span class="loading-text">LOADING ANALYTICS...</span>
	25	+	</div>
	26	+	{:else if homepageState.analytics}
	27	+	<div class="stats-grid">
	28	+	<div class="stat-card">
	29	+	<span class="stat-value">{formatNumber(homepageState.analytics.stats.total_entries)}</span>
	30	+	<span class="stat-label">TOTAL ENTRIES</span>
	31	+	</div>
	32	+	<div class="stat-card">
	33	+	<span class="stat-value">{formatNumber(homepageState.analytics.stats.total_visits)}</span>
	34	+	<span class="stat-label">TOTAL VISITS</span>
	35	+	</div>
	36	+	<div class="stat-card">
	37	+	<span class="stat-value">{homepageState.analytics.stats.unique_days}</span>
	38	+	<span class="stat-label">DAYS ACTIVE</span>
	39	+	</div>
	40	+	<div class="stat-card">
	41	+	<span class="stat-value">{homepageState.domainStats.length}</span>
	42	+	<span class="stat-label">UNIQUE DOMAINS</span>
	43	+	</div>
	44	+	</div>
	45	+
	46	+	<div class="section">
	47	+	<div class="section-header">
	48	+	<span class="section-title">TOP DOMAINS</span>
	49	+	</div>
	50	+	<div class="domain-list">
	51	+	{#each homepageState.domainStats.slice(0, 10) as domain, i (domain.domain)}
	52	+	<div class="domain-item">
	53	+	<span class="domain-rank">{i + 1}</span>
	54	+	<span class="domain-name">{domain.domain}</span>
	55	+	<span class="domain-stats">
	56	+	<span class="domain-pages">{domain.page_count} pages</span>
	57	+	<span class="domain-visits">{domain.total_visits} visits</span>
	58	+	</span>
	59	+	</div>
	60	+	{/each}
	61	+	</div>
	62	+	</div>
	63	+
	64	+	{#if homepageState.analytics.hourly_distribution.length > 0}
	65	+	<div class="section">
	66	+	<div class="section-header">
	67	+	<span class="section-title">ACTIVITY BY HOUR</span>
	68	+	</div>
	69	+	<div class="hourly-chart">
	70	+	{#each homepageState.analytics.hourly_distribution as hour (hour.hour)}
	71	+	{@const maxVisits = Math.max(...homepageState.analytics.hourly_distribution.map(h => h.visit_count))}
	72	+	{@const heightPercent = maxVisits > 0 ? (hour.visit_count / maxVisits) * 100 : 0}
	73	+	<div class="hour-bar" title="{hour.hour}:00 - {hour.visit_count} visits">
	74	+	<div class="bar-fill" style="height: {heightPercent}%"></div>
	75	+	<span class="hour-label">{hour.hour}</span>
	76	+	</div>
	77	+	{/each}
	78	+	</div>
	79	+	</div>
	80	+	{/if}
	81	+	{:else}
	82	+	<div class="empty-state">
	83	+	<span class="empty-icon"></span>
	84	+	<span class="empty-text">NO ANALYTICS DATA</span>
	85	+	<span class="empty-hint">Browse some sites to generate analytics</span>
	86	+	</div>
	87	+	{/if}
	88	+	</div>
	89	+
	90	+	<style>
	91	+	.analytics-panel {
	92	+	display: flex;
	93	+	flex-direction: column;
	94	+	gap: 1rem;
	95	+	flex: 1;
	96	+	min-height: 0;
	97	+	overflow-y: auto;
	98	+	padding: 0.5rem 1rem;
	99	+	}
	100	+
	101	+	.loading-state,
	102	+	.empty-state {
	103	+	flex: 1;
	104	+	display: flex;
	105	+	flex-direction: column;
	106	+	align-items: center;
	107	+	justify-content: center;
	108	+	gap: 0.5rem;
	109	+	padding: 2rem;
	110	+	color: var(--dynamic-muted);
	111	+	text-align: center;
	112	+	}
	113	+
	114	+	.loading-spinner {
	115	+	width: 24px;
	116	+	height: 24px;
	117	+	border: 2px solid var(--dynamic-border);
	118	+	border-top-color: var(--dynamic-accent, #4ade80);
	119	+	border-radius: 50%;
	120	+	animation: spin 0.8s linear infinite;
	121	+	}
	122	+
	123	+	@keyframes spin {
	124	+	to { transform: rotate(360deg); }
	125	+	}
	126	+
	127	+	.loading-text,
	128	+	.empty-text {
	129	+	font-size: 0.68rem;
	130	+	font-weight: 600;
	131	+	letter-spacing: 0.12em;
	132	+	}
	133	+
	134	+	.empty-icon {
	135	+	font-size: 1.5rem;
	136	+	opacity: 0.5;
	137	+	}
	138	+
	139	+	.empty-hint {
	140	+	font-size: 0.65rem;
	141	+	letter-spacing: 0.06em;
	142	+	opacity: 0.7;
	143	+	}
	144	+
	145	+	.stats-grid {
	146	+	display: grid;
	147	+	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	148	+	gap: 0.5rem;
	149	+	}
	150	+
	151	+	.stat-card {
	152	+	display: flex;
	153	+	flex-direction: column;
	154	+	gap: 0.3rem;
	155	+	padding: 0.85rem;
	156	+	border: 1px solid var(--dynamic-border);
	157	+	background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
	158	+	}
	159	+
	160	+	.stat-value {
	161	+	font-size: 1.5rem;
	162	+	font-weight: 700;
	163	+	color: var(--dynamic-text);
	164	+	letter-spacing: -0.02em;
	165	+	}
	166	+
	167	+	.stat-label {
	168	+	font-size: 0.6rem;
	169	+	font-weight: 600;
	170	+	color: var(--dynamic-muted);
	171	+	letter-spacing: 0.12em;
	172	+	}
	173	+
	174	+	.section {
	175	+	border: 1px solid var(--dynamic-border);
	176	+	background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
	177	+	}
	178	+
	179	+	.section-header {
	180	+	padding: 0.5rem 0.75rem;
	181	+	border-bottom: 1px solid var(--dynamic-border);
	182	+	background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);
	183	+	}
	184	+
	185	+	.section-title {
	186	+	font-size: 0.6rem;
	187	+	font-weight: 600;
	188	+	color: var(--dynamic-muted);
	189	+	letter-spacing: 0.12em;
	190	+	}
	191	+
	192	+	.domain-list {
	193	+	display: flex;
	194	+	flex-direction: column;
	195	+	}
	196	+
	197	+	.domain-item {
	198	+	display: grid;
	199	+	grid-template-columns: auto 1fr auto;
	200	+	align-items: center;
	201	+	gap: 0.75rem;
	202	+	padding: 0.5rem 0.75rem;
	203	+	border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 40%, transparent);
	204	+	}
	205	+
	206	+	.domain-item:last-child {
	207	+	border-bottom: none;
	208	+	}
	209	+
	210	+	.domain-rank {
	211	+	width: 1.5rem;
	212	+	font-size: 0.65rem;
	213	+	font-weight: 600;
	214	+	color: var(--dynamic-muted);
	215	+	text-align: center;
	216	+	}
	217	+
	218	+	.domain-name {
	219	+	font-size: 0.75rem;
	220	+	color: var(--dynamic-text);
	221	+	white-space: nowrap;
	222	+	overflow: hidden;
	223	+	text-overflow: ellipsis;
	224	+	}
	225	+
	226	+	.domain-stats {
	227	+	display: flex;
	228	+	gap: 0.75rem;
	229	+	font-size: 0.6rem;
	230	+	color: var(--dynamic-muted);
	231	+	}
	232	+
	233	+	.hourly-chart {
	234	+	display: flex;
	235	+	align-items: flex-end;
	236	+	gap: 2px;
	237	+	height: 80px;
	238	+	padding: 0.75rem;
	239	+	}
	240	+
	241	+	.hour-bar {
	242	+	flex: 1;
	243	+	display: flex;
	244	+	flex-direction: column;
	245	+	align-items: center;
	246	+	height: 100%;
	247	+	}
	248	+
	249	+	.bar-fill {
	250	+	width: 100%;
	251	+	background: var(--dynamic-accent, #4ade80);
	252	+	margin-top: auto;
	253	+	min-height: 2px;
	254	+	transition: height 300ms ease;
	255	+	}
	256	+
	257	+	.hour-label {
	258	+	font-size: 0.5rem;
	259	+	color: var(--dynamic-muted);
	260	+	margin-top: 0.25rem;
	261	+	}
	262	+
	263	+	.hour-bar:nth-child(odd) .hour-label {
	264	+	visibility: hidden;
	265	+	}
	266	+	</style>

A gui/src/pages/homepage/panels/FavoritesPanel.svelte +287 -0

@@ -0,0 +1,287 @@
	1	+	<script lang="ts">
	2	+	import { homepageState } from '../state.svelte';
	3	+	import {
	4	+	navigateTo,
	5	+	setFavoriteShortcut,
	6	+	setFavoriteFolder,
	7	+	assignTag,
	8	+	removeTag,
	9	+	createFolder,
	10	+	createTag
	11	+	} from '../messaging';
	12	+	import type { Favorite } from '../types';
	13	+
	14	+	import { FolderList, TagCloud, FavoriteGrid, FavoriteEditor } from '../favorites';
	15	+
	16	+	let editorOpen = $state(false);
	17	+	let editingFavorite = $state<Favorite \| null>(null);
	18	+
	19	+	// Get filtered favorites based on folder and tag selection
	20	+	const displayedFavorites = $derived(() => {
	21	+	let result = homepageState.favorites;
	22	+
	23	+	// Filter by folder
	24	+	const folderId = homepageState.selectedFolderId;
	25	+	if (folderId !== null) {
	26	+	if (folderId === -1) {
	27	+	// Show unfiled
	28	+	result = result.filter(f => f.folder_id === null);
	29	+	} else {
	30	+	result = result.filter(f => f.folder_id === folderId);
	31	+	}
	32	+	}
	33	+
	34	+	// Filter by tags
	35	+	const tagIds = homepageState.selectedTagIds;
	36	+	if (tagIds.length > 0) {
	37	+	result = result.filter(f =>
	38	+	f.tags?.some(t => tagIds.includes(t.id))
	39	+	);
	40	+	}
	41	+
	42	+	return result;
	43	+	});
	44	+
	45	+	const handleSelectFavorite = (fav: Favorite) => {
	46	+	navigateTo(fav.url);
	47	+	};
	48	+
	49	+	const handleEditFavorite = (fav: Favorite) => {
	50	+	editingFavorite = fav;
	51	+	editorOpen = true;
	52	+	};
	53	+
	54	+	const handleSaveFavorite = async (updates: Partial<Favorite>) => {
	55	+	if (!updates.id) return;
	56	+
	57	+	// Update shortcut key
	58	+	if (updates.shortcut_key !== undefined) {
	59	+	await setFavoriteShortcut(updates.id, updates.shortcut_key);
	60	+	}
	61	+
	62	+	// Update folder
	63	+	if (updates.folder_id !== undefined) {
	64	+	await setFavoriteFolder(updates.id, updates.folder_id);
	65	+	}
	66	+
	67	+	// Title update would need a separate handler - for now just update local state
	68	+	if (updates.title !== undefined && editingFavorite) {
	69	+	homepageState.updateFavorite({
	70	+	...editingFavorite,
	71	+	...updates
	72	+	});
	73	+	}
	74	+	};
	75	+
	76	+	const handleDeleteFavorite = (id: number) => {
	77	+	// This would call a delete API - for now just update local state
	78	+	homepageState.deleteFavorite(id);
	79	+	};
	80	+
	81	+	const handleAssignTag = async (favoriteId: number, tagId: number) => {
	82	+	await assignTag(favoriteId, tagId);
	83	+	};
	84	+
	85	+	const handleRemoveTag = async (favoriteId: number, tagId: number) => {
	86	+	await removeTag(favoriteId, tagId);
	87	+	};
	88	+
	89	+	const handleSelectFolder = (id: number \| null) => {
	90	+	homepageState.selectFolder(id);
	91	+	};
	92	+
	93	+	const handleToggleTag = (id: number) => {
	94	+	homepageState.toggleTag(id);
	95	+	};
	96	+
	97	+	const handleClearTagSelection = () => {
	98	+	homepageState.clearTagSelection();
	99	+	};
	100	+
	101	+	const handleCreateFolder = async (name: string) => {
	102	+	await createFolder({ name });
	103	+	};
	104	+
	105	+	const handleCreateTag = async (name: string, color: string) => {
	106	+	await createTag({ name, color });
	107	+	};
	108	+
	109	+	const closeEditor = () => {
	110	+	editorOpen = false;
	111	+	editingFavorite = null;
	112	+	};
	113	+	</script>
	114	+
	115	+	<div class="favorites-panel">
	116	+	<div class="panel-sidebar">
	117	+	<FolderList
	118	+	folders={homepageState.folders}
	119	+	favorites={homepageState.favorites}
	120	+	selectedFolderId={homepageState.selectedFolderId}
	121	+	onSelectFolder={handleSelectFolder}
	122	+	onCreateFolder={handleCreateFolder}
	123	+	/>
	124	+
	125	+	<TagCloud
	126	+	tags={homepageState.tags}
	127	+	selectedTagIds={homepageState.selectedTagIds}
	128	+	onToggleTag={handleToggleTag}
	129	+	onClearSelection={handleClearTagSelection}
	130	+	onCreateTag={handleCreateTag}
	131	+	/>
	132	+	</div>
	133	+
	134	+	<div class="panel-main">
	135	+	<div class="panel-header">
	136	+	<span class="header-title">
	137	+	{#if homepageState.selectedFolderId === null}
	138	+	ALL FAVORITES
	139	+	{:else if homepageState.selectedFolderId === -1}
	140	+	UNFILED
	141	+	{:else}
	142	+	{homepageState.folders.find(f => f.id === homepageState.selectedFolderId)?.name ?? 'FOLDER'}
	143	+	{/if}
	144	+	</span>
	145	+	<span class="header-count">{displayedFavorites().length}</span>
	146	+	</div>
	147	+
	148	+	<div class="panel-content">
	149	+	{#if homepageState.favoritesLoading}
	150	+	<div class="loading-state">
	151	+	<span class="loading-spinner"></span>
	152	+	<span class="loading-text">LOADING FAVORITES...</span>
	153	+	</div>
	154	+	{:else}
	155	+	<FavoriteGrid
	156	+	favorites={displayedFavorites()}
	157	+	onSelectFavorite={handleSelectFavorite}
	158	+	onEditFavorite={handleEditFavorite}
	159	+	/>
	160	+	{/if}
	161	+	</div>
	162	+	</div>
	163	+
	164	+	{#if editorOpen && editingFavorite}
	165	+	<FavoriteEditor
	166	+	favorite={editingFavorite}
	167	+	folders={homepageState.folders}
	168	+	tags={homepageState.tags}
	169	+	onSave={handleSaveFavorite}
	170	+	onDelete={handleDeleteFavorite}
	171	+	onClose={closeEditor}
	172	+	onAssignTag={handleAssignTag}
	173	+	onRemoveTag={handleRemoveTag}
	174	+	/>
	175	+	{/if}
	176	+	</div>
	177	+
	178	+	<style>
	179	+	.favorites-panel {
	180	+	display: grid;
	181	+	grid-template-columns: 200px 1fr;
	182	+	gap: 0.75rem;
	183	+	flex: 1;
	184	+	min-height: 0;
	185	+	padding: 0.5rem 1rem;
	186	+	}
	187	+
	188	+	.panel-sidebar {
	189	+	display: flex;
	190	+	flex-direction: column;
	191	+	gap: 0.5rem;
	192	+	overflow-y: auto;
	193	+	}
	194	+
	195	+	.panel-main {
	196	+	display: flex;
	197	+	flex-direction: column;
	198	+	min-height: 0;
	199	+	border: 1px solid var(--dynamic-border);
	200	+	background: color-mix(in srgb, var(--dynamic-bg) 95%, var(--dynamic-surface) 5%);
	201	+	}
	202	+
	203	+	.panel-header {
	204	+	display: flex;
	205	+	align-items: center;
	206	+	justify-content: space-between;
	207	+	padding: 0.6rem 0.85rem;
	208	+	border-bottom: 1px solid var(--dynamic-border);
	209	+	background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);
	210	+	}
	211	+
	212	+	.header-title {
	213	+	font-size: 0.68rem;
	214	+	font-weight: 600;
	215	+	letter-spacing: 0.12em;
	216	+	color: var(--dynamic-text);
	217	+	}
	218	+
	219	+	.header-count {
	220	+	font-size: 0.6rem;
	221	+	padding: 0.15rem 0.4rem;
	222	+	border: 1px solid var(--dynamic-border);
	223	+	background: var(--dynamic-bg);
	224	+	color: var(--dynamic-muted);
	225	+	}
	226	+
	227	+	.panel-content {
	228	+	flex: 1;
	229	+	min-height: 0;
	230	+	padding: 0.75rem;
	231	+	overflow-y: auto;
	232	+	}
	233	+
	234	+	.loading-state {
	235	+	flex: 1;
	236	+	display: flex;
	237	+	flex-direction: column;
	238	+	align-items: center;
	239	+	justify-content: center;
	240	+	gap: 0.75rem;
	241	+	padding: 2rem;
	242	+	color: var(--dynamic-muted);
	243	+	}
	244	+
	245	+	.loading-spinner {
	246	+	width: 24px;
	247	+	height: 24px;
	248	+	border: 2px solid var(--dynamic-border);
	249	+	border-top-color: var(--dynamic-accent, #4ade80);
	250	+	border-radius: 50%;
	251	+	animation: spin 0.8s linear infinite;
	252	+	}
	253	+
	254	+	@keyframes spin {
	255	+	to { transform: rotate(360deg); }
	256	+	}
	257	+
	258	+	.loading-text {
	259	+	font-size: 0.68rem;
	260	+	letter-spacing: 0.12em;
	261	+	animation: pulse 1.5s ease-in-out infinite;
	262	+	}
	263	+
	264	+	@keyframes pulse {
	265	+	0%, 100% { opacity: 0.5; }
	266	+	50% { opacity: 1; }
	267	+	}
	268	+
	269	+	/* Responsive: stack on smaller screens */
	270	+	@media (max-width: 768px) {
	271	+	.favorites-panel {
	272	+	grid-template-columns: 1fr;
	273	+	grid-template-rows: auto 1fr;
	274	+	}
	275	+
	276	+	.panel-sidebar {
	277	+	flex-direction: row;
	278	+	gap: 0.5rem;
	279	+	overflow-x: auto;
	280	+	}
	281	+
	282	+	.panel-sidebar > :global(*) {
	283	+	flex-shrink: 0;
	284	+	min-width: 180px;
	285	+	}
	286	+	}
	287	+	</style>

A gui/src/pages/homepage/panels/HistoryPanel.svelte +209 -0

@@ -0,0 +1,209 @@
	1	+	<script lang="ts">
	2	+	import { homepageState } from '../state.svelte';
	3	+	import {
	4	+	fetchHistoryTimeline,
	5	+	deleteHistoryEntry,
	6	+	deleteHistoryByRange,
	7	+	clearAllHistory,
	8	+	fetchDomainStats,
	9	+	navigateTo
	10	+	} from '../messaging';
	11	+	import type { HistoryEntry, HistoryCleanupRange } from '../types';
	12	+
	13	+	import { HistoryTimeline, HistorySearch, HistoryFilters, HistoryCleanup } from '../history';
	14	+
	15	+	let cleanupOpen = $state(false);
	16	+	let selectedDomain = $state<string \| null>(null);
	17	+
	18	+	// Filter entries by domain if selected
	19	+	const displayedEntries = $derived(() => {
	20	+	if (!selectedDomain) {
	21	+	return homepageState.historySearchQuery
	22	+	? homepageState.historySearchResults
	23	+	: homepageState.history;
	24	+	}
	25	+
	26	+	const entries = homepageState.historySearchQuery
	27	+	? homepageState.historySearchResults
	28	+	: homepageState.history;
	29	+
	30	+	return entries.filter(entry => {
	31	+	try {
	32	+	return new URL(entry.url).hostname === selectedDomain;
	33	+	} catch {
	34	+	return false;
	35	+	}
	36	+	});
	37	+	});
	38	+
	39	+	// Recompute timeline from filtered entries
	40	+	const displayedTimeline = $derived(() => {
	41	+	const entries = displayedEntries();
	42	+	if (entries.length === 0) return [];
	43	+
	44	+	const groups = new Map<string, HistoryEntry[]>();
	45	+	const today = new Date();
	46	+	today.setHours(0, 0, 0, 0);
	47	+	const yesterday = new Date(today);
	48	+	yesterday.setDate(yesterday.getDate() - 1);
	49	+
	50	+	for (const entry of entries) {
	51	+	const date = new Date(entry.last_visited);
	52	+	const dateKey = date.toISOString().split('T')[0] ?? '';
	53	+	if (!groups.has(dateKey)) {
	54	+	groups.set(dateKey, []);
	55	+	}
	56	+	groups.get(dateKey)!.push(entry);
	57	+	}
	58	+
	59	+	const result: { date: string; label: string; entries: HistoryEntry[] }[] = [];
	60	+	for (const [dateKey, items] of groups) {
	61	+	const date = new Date(dateKey);
	62	+	let label: string;
	63	+
	64	+	if (date >= today) {
	65	+	label = 'Today';
	66	+	} else if (date >= yesterday) {
	67	+	label = 'Yesterday';
	68	+	} else {
	69	+	label = date.toLocaleDateString(undefined, {
	70	+	weekday: 'short',
	71	+	month: 'short',
	72	+	day: 'numeric',
	73	+	});
	74	+	}
	75	+
	76	+	result.push({ date: dateKey, label, entries: items });
	77	+	}
	78	+
	79	+	return result.sort((a, b) => b.date.localeCompare(a.date));
	80	+	});
	81	+
	82	+	const handleSelectEntry = (entry: HistoryEntry) => {
	83	+	navigateTo(entry.url);
	84	+	};
	85	+
	86	+	const handleDeleteEntry = async (entry: HistoryEntry) => {
	87	+	await deleteHistoryEntry(entry.id);
	88	+	};
	89	+
	90	+	const handleLoadMore = async () => {
	91	+	if (homepageState.hasMoreHistory && !homepageState.historyLoading) {
	92	+	await fetchHistoryTimeline(50, homepageState.historyOffset);
	93	+	}
	94	+	};
	95	+
	96	+	const handleCleanup = async (range: HistoryCleanupRange) => {
	97	+	if (range === 'all') {
	98	+	await clearAllHistory();
	99	+	} else {
	100	+	await deleteHistoryByRange(range);
	101	+	}
	102	+	cleanupOpen = false;
	103	+	};
	104	+
	105	+	const handleSelectDomain = (domain: string \| null) => {
	106	+	selectedDomain = domain;
	107	+	homepageState.setFocusedIndex(0);
	108	+	};
	109	+
	110	+	// Fetch domain stats on mount
	111	+	$effect(() => {
	112	+	fetchDomainStats(10);
	113	+	});
	114	+	</script>
	115	+
	116	+	<div class="history-panel">
	117	+	<div class="panel-toolbar">
	118	+	<HistorySearch placeholder="Search history (FTS)..." autofocus={true} />
	119	+	</div>
	120	+
	121	+	<HistoryFilters
	122	+	domains={homepageState.domainStats}
	123	+	selectedDomain={selectedDomain}
	124	+	onSelectDomain={handleSelectDomain}
	125	+	onOpenCleanup={() => cleanupOpen = true}
	126	+	/>
	127	+
	128	+	<div class="panel-content">
	129	+	{#if homepageState.historyLoading && homepageState.history.length === 0}
	130	+	<div class="loading-state">
	131	+	<span class="loading-spinner"></span>
	132	+	<span class="loading-text">LOADING HISTORY...</span>
	133	+	</div>
	134	+	{:else}
	135	+	<HistoryTimeline
	136	+	groups={displayedTimeline()}
	137	+	onSelectEntry={handleSelectEntry}
	138	+	onDeleteEntry={handleDeleteEntry}
	139	+	onLoadMore={handleLoadMore}
	140	+	/>
	141	+	{/if}
	142	+	</div>
	143	+
	144	+	{#if cleanupOpen}
	145	+	<HistoryCleanup
	146	+	onCleanup={handleCleanup}
	147	+	onClose={() => cleanupOpen = false}
	148	+	/>
	149	+	{/if}
	150	+	</div>
	151	+
	152	+	<style>
	153	+	.history-panel {
	154	+	display: flex;
	155	+	flex-direction: column;
	156	+	flex: 1;
	157	+	min-height: 0;
	158	+	gap: 0.5rem;
	159	+	padding: 0.5rem 1rem;
	160	+	}
	161	+
	162	+	.panel-toolbar {
	163	+	flex-shrink: 0;
	164	+	}
	165	+
	166	+	.panel-content {
	167	+	flex: 1;
	168	+	min-height: 0;
	169	+	display: flex;
	170	+	flex-direction: column;
	171	+	border: 1px solid var(--dynamic-border);
	172	+	background: color-mix(in srgb, var(--dynamic-bg) 95%, var(--dynamic-surface) 5%);
	173	+	overflow-y: auto;
	174	+	}
	175	+
	176	+	.loading-state {
	177	+	flex: 1;
	178	+	display: flex;
	179	+	flex-direction: column;
	180	+	align-items: center;
	181	+	justify-content: center;
	182	+	gap: 0.75rem;
	183	+	color: var(--dynamic-muted);
	184	+	}
	185	+
	186	+	.loading-spinner {
	187	+	width: 24px;
	188	+	height: 24px;
	189	+	border: 2px solid var(--dynamic-border);
	190	+	border-top-color: var(--dynamic-accent, #4ade80);
	191	+	border-radius: 50%;
	192	+	animation: spin 0.8s linear infinite;
	193	+	}
	194	+
	195	+	@keyframes spin {
	196	+	to { transform: rotate(360deg); }
	197	+	}
	198	+
	199	+	.loading-text {
	200	+	font-size: 0.68rem;
	201	+	letter-spacing: 0.12em;
	202	+	animation: pulse 1.5s ease-in-out infinite;
	203	+	}
	204	+
	205	+	@keyframes pulse {
	206	+	0%, 100% { opacity: 0.5; }
	207	+	50% { opacity: 1; }
	208	+	}
	209	+	</style>

A gui/src/pages/homepage/panels/index.ts +4 -0

@@ -0,0 +1,4 @@
	1	+	// Panel Components - Main content panels for homepage
	2	+	export { default as HistoryPanel } from './HistoryPanel.svelte';
	3	+	export { default as FavoritesPanel } from './FavoritesPanel.svelte';
	4	+	export { default as AnalyticsPanel } from './AnalyticsPanel.svelte';

A gui/src/pages/homepage/shell/CommandPalette.svelte +580 -0

@@ -0,0 +1,580 @@
	1	+	<script lang="ts">
	2	+	import { onMount, tick } from 'svelte';
	3	+	import { homepageState } from '../state.svelte';
	4	+	import { navigateTo } from '../messaging';
	5	+	import type { CommandPaletteItem } from '../types';
	6	+	import { Search, SearchX, History, Star, BarChart3, Trash2, Globe } from '@lucide/svelte';
	7	+
	8	+	// Input element reference
	9	+	let inputRef: HTMLInputElement \| null = $state(null);
	10	+	let listRef: HTMLDivElement \| null = $state(null);
	11	+
	12	+	// Local state for command palette
	13	+	let query = $state('');
	14	+	let selectedIndex = $state(0);
	15	+
	16	+	// Build command items from available actions
	17	+	const staticCommands: CommandPaletteItem[] = [
	18	+	{
	19	+	id: 'nav:history',
	20	+	label: 'Go to History',
	21	+	description: 'View browsing history timeline',
	22	+	icon: History,
	23	+	shortcut: 'g h',
	24	+	action: () => {
	25	+	homepageState.setActivePanel('history');
	26	+	homepageState.closeCommandPalette();
	27	+	},
	28	+	},
	29	+	{
	30	+	id: 'nav:favorites',
	31	+	label: 'Go to Favorites',
	32	+	description: 'View bookmarks and folders',
	33	+	icon: Star,
	34	+	shortcut: 'g f',
	35	+	action: () => {
	36	+	homepageState.setActivePanel('favorites');
	37	+	homepageState.closeCommandPalette();
	38	+	},
	39	+	},
	40	+	{
	41	+	id: 'nav:analytics',
	42	+	label: 'Go to Analytics',
	43	+	description: 'View browsing statistics',
	44	+	icon: BarChart3,
	45	+	shortcut: 'g a',
	46	+	action: () => {
	47	+	homepageState.setActivePanel('analytics');
	48	+	homepageState.closeCommandPalette();
	49	+	},
	50	+	},
	51	+	{
	52	+	id: 'action:cleanup',
	53	+	label: 'Clean History',
	54	+	description: 'Remove history entries by time range',
	55	+	icon: Trash2,
	56	+	action: () => {
	57	+	homepageState.closeCommandPalette();
	58	+	homepageState.openCleanupModal();
	59	+	},
	60	+	},
	61	+	];
	62	+
	63	+	// Fuzzy match function
	64	+	function fuzzyMatch(text: string, pattern: string): { match: boolean; score: number } {
	65	+	if (!pattern) return { match: true, score: 0 };
	66	+
	67	+	const lower = text.toLowerCase();
	68	+	const pLower = pattern.toLowerCase();
	69	+
	70	+	// Exact substring match scores highest
	71	+	if (lower.includes(pLower)) {
	72	+	return { match: true, score: 100 - lower.indexOf(pLower) };
	73	+	}
	74	+
	75	+	// Fuzzy character matching
	76	+	let pIdx = 0;
	77	+	let score = 0;
	78	+	let consecutive = 0;
	79	+
	80	+	for (let i = 0; i < lower.length && pIdx < pLower.length; i++) {
	81	+	if (lower[i] === pLower[pIdx]) {
	82	+	pIdx++;
	83	+	consecutive++;
	84	+	score += consecutive * 2;
	85	+	} else {
	86	+	consecutive = 0;
	87	+	}
	88	+	}
	89	+
	90	+	return { match: pIdx === pLower.length, score };
	91	+	}
	92	+
	93	+	// Build filtered items based on query
	94	+	const filteredItems = $derived.by(() => {
	95	+	const results: Array<{ item: CommandPaletteItem; score: number }> = [];
	96	+
	97	+	// Add static commands
	98	+	for (const cmd of staticCommands) {
	99	+	const labelMatch = fuzzyMatch(cmd.label, query);
	100	+	const descMatch = cmd.description ? fuzzyMatch(cmd.description, query) : { match: false, score: 0 };
	101	+
	102	+	if (labelMatch.match \|\| descMatch.match) {
	103	+	results.push({
	104	+	item: cmd,
	105	+	score: Math.max(labelMatch.score, descMatch.score * 0.8),
	106	+	});
	107	+	}
	108	+	}
	109	+
	110	+	// Add history items as navigable commands
	111	+	for (const entry of homepageState.history.slice(0, 50)) {
	112	+	const titleMatch = fuzzyMatch(entry.title \|\| '', query);
	113	+	const urlMatch = fuzzyMatch(entry.url, query);
	114	+
	115	+	if (titleMatch.match \|\| urlMatch.match) {
	116	+	results.push({
	117	+	item: {
	118	+	id: `history:${entry.id}`,
	119	+	label: entry.title \|\| getDomain(entry.url),
	120	+	description: entry.url,
	121	+	icon: Globe,
	122	+	action: () => {
	123	+	navigateTo(entry.url);
	124	+	},
	125	+	},
	126	+	score: Math.max(titleMatch.score, urlMatch.score * 0.7),
	127	+	});
	128	+	}
	129	+	}
	130	+
	131	+	// Add favorites as navigable commands
	132	+	for (const fav of homepageState.favorites) {
	133	+	const titleMatch = fuzzyMatch(fav.title \|\| '', query);
	134	+	const urlMatch = fuzzyMatch(fav.url, query);
	135	+
	136	+	if (titleMatch.match \|\| urlMatch.match) {
	137	+	results.push({
	138	+	item: {
	139	+	id: `fav:${fav.id}`,
	140	+	label: fav.title \|\| getDomain(fav.url),
	141	+	description: fav.url,
	142	+	icon: Star,
	143	+	shortcut: fav.shortcut_key ? `${fav.shortcut_key}` : undefined,
	144	+	action: () => {
	145	+	navigateTo(fav.url);
	146	+	},
	147	+	},
	148	+	score: Math.max(titleMatch.score, urlMatch.score * 0.7) + 10, // Boost favorites
	149	+	});
	150	+	}
	151	+	}
	152	+
	153	+	// Sort by score and return items
	154	+	results.sort((a, b) => b.score - a.score);
	155	+	return results.map(r => r.item).slice(0, 20);
	156	+	});
	157	+
	158	+	function getDomain(url: string): string {
	159	+	try {
	160	+	return new URL(url).hostname;
	161	+	} catch {
	162	+	return url;
	163	+	}
	164	+	}
	165	+
	166	+	// Reset selection when query changes
	167	+	$effect(() => {
	168	+	query; // Track query
	169	+	selectedIndex = 0;
	170	+	});
	171	+
	172	+	// Scroll selected item into view
	173	+	$effect(() => {
	174	+	if (listRef) {
	175	+	const selected = listRef.querySelector(`[data-index="${selectedIndex}"]`);
	176	+	selected?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
	177	+	}
	178	+	});
	179	+
	180	+	function handleKeydown(e: KeyboardEvent) {
	181	+	switch (e.key) {
	182	+	case 'ArrowDown':
	183	+	case 'j':
	184	+	if (e.key === 'j' && !e.ctrlKey) break;
	185	+	e.preventDefault();
	186	+	selectedIndex = Math.min(selectedIndex + 1, filteredItems.length - 1);
	187	+	break;
	188	+
	189	+	case 'ArrowUp':
	190	+	case 'k':
	191	+	if (e.key === 'k' && !e.ctrlKey) break;
	192	+	e.preventDefault();
	193	+	selectedIndex = Math.max(selectedIndex - 1, 0);
	194	+	break;
	195	+
	196	+	case 'n':
	197	+	if (e.ctrlKey) {
	198	+	e.preventDefault();
	199	+	selectedIndex = Math.min(selectedIndex + 1, filteredItems.length - 1);
	200	+	}
	201	+	break;
	202	+
	203	+	case 'p':
	204	+	if (e.ctrlKey) {
	205	+	e.preventDefault();
	206	+	selectedIndex = Math.max(selectedIndex - 1, 0);
	207	+	}
	208	+	break;
	209	+
	210	+	case 'Enter':
	211	+	e.preventDefault();
	212	+	executeSelected();
	213	+	break;
	214	+
	215	+	case 'Escape':
	216	+	e.preventDefault();
	217	+	homepageState.closeCommandPalette();
	218	+	break;
	219	+	}
	220	+	}
	221	+
	222	+	function executeSelected() {
	223	+	const item = filteredItems[selectedIndex];
	224	+	if (item) {
	225	+	item.action();
	226	+	}
	227	+	}
	228	+
	229	+	function handleItemClick(index: number) {
	230	+	selectedIndex = index;
	231	+	executeSelected();
	232	+	}
	233	+
	234	+	onMount(async () => {
	235	+	await tick();
	236	+	inputRef?.focus();
	237	+	});
	238	+	</script>
	239	+
	240	+	<div class="palette-overlay" onclick={() => homepageState.closeCommandPalette()}>
	241	+	<div class="palette-container" onclick={(e) => e.stopPropagation()}>
	242	+	<!-- Search Header -->
	243	+	<div class="palette-header">
	244	+	<div class="search-row">
	245	+	<Search size={16} strokeWidth={2} class="search-icon" />
	246	+	<input
	247	+	bind:this={inputRef}
	248	+	bind:value={query}
	249	+	type="text"
	250	+	class="search-input"
	251	+	placeholder="Search commands, history, favorites..."
	252	+	spellcheck="false"
	253	+	autocomplete="off"
	254	+	onkeydown={handleKeydown}
	255	+	/>
	256	+	<div class="search-meta">
	257	+	<span class="result-count">{filteredItems.length}</span>
	258	+	<kbd class="esc-hint">esc</kbd>
	259	+	</div>
	260	+	</div>
	261	+	</div>
	262	+
	263	+	<!-- Results List -->
	264	+	<div class="palette-results" bind:this={listRef}>
	265	+	{#if filteredItems.length === 0}
	266	+	<div class="empty-results">
	267	+	<SearchX size={24} strokeWidth={1.5} class="empty-icon" />
	268	+	<span class="empty-text">No matches found</span>
	269	+	</div>
	270	+	{:else}
	271	+	{#each filteredItems as item, index (item.id)}
	272	+	<button
	273	+	class="result-item"
	274	+	class:selected={index === selectedIndex}
	275	+	data-index={index}
	276	+	type="button"
	277	+	onclick={() => handleItemClick(index)}
	278	+	onmouseenter={() => selectedIndex = index}
	279	+	>
	280	+	<span class="item-icon">
	281	+	{#if typeof item.icon === 'function'}
	282	+	<svelte:component this={item.icon} size={16} strokeWidth={2} />
	283	+	{:else if item.icon}
	284	+	{item.icon}
	285	+	{/if}
	286	+	</span>
	287	+	<div class="item-content">
	288	+	<span class="item-label">{item.label}</span>
	289	+	{#if item.description}
	290	+	<span class="item-description">{item.description}</span>
	291	+	{/if}
	292	+	</div>
	293	+	{#if item.shortcut}
	294	+	<kbd class="item-shortcut">{item.shortcut}</kbd>
	295	+	{/if}
	296	+	</button>
	297	+	{/each}
	298	+	{/if}
	299	+	</div>
	300	+
	301	+	<!-- Footer Hints -->
	302	+	<div class="palette-footer">
	303	+	<div class="hint-group">
	304	+	<kbd></kbd><kbd></kbd>
	305	+	<span>navigate</span>
	306	+	</div>
	307	+	<div class="hint-group">
	308	+	<kbd></kbd>
	309	+	<span>select</span>
	310	+	</div>
	311	+	<div class="hint-group">
	312	+	<kbd>esc</kbd>
	313	+	<span>close</span>
	314	+	</div>
	315	+	</div>
	316	+	</div>
	317	+	</div>
	318	+
	319	+	<style>
	320	+	.palette-overlay {
	321	+	position: fixed;
	322	+	inset: 0;
	323	+	z-index: 200;
	324	+	display: flex;
	325	+	align-items: flex-start;
	326	+	justify-content: center;
	327	+	padding-top: 12vh;
	328	+	background: rgb(0 0 0 / 0.65);
	329	+	backdrop-filter: blur(8px);
	330	+	animation: overlay-in 150ms ease;
	331	+	}
	332	+
	333	+	@keyframes overlay-in {
	334	+	from {
	335	+	opacity: 0;
	336	+	backdrop-filter: blur(0);
	337	+	}
	338	+	}
	339	+
	340	+	.palette-container {
	341	+	width: 100%;
	342	+	max-width: 580px;
	343	+	margin: 0 1rem;
	344	+	display: flex;
	345	+	flex-direction: column;
	346	+	background: var(--dynamic-surface);
	347	+	border: 1px solid var(--dynamic-border);
	348	+	box-shadow:
	349	+	0 0 0 1px color-mix(in srgb, var(--dynamic-border) 30%, transparent),
	350	+	0 32px 64px -16px rgb(0 0 0 / 0.7);
	351	+	animation: palette-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
	352	+	}
	353	+
	354	+	@keyframes palette-in {
	355	+	from {
	356	+	opacity: 0;
	357	+	transform: scale(0.96) translateY(-12px);
	358	+	}
	359	+	}
	360	+
	361	+	/* Header */
	362	+	.palette-header {
	363	+	padding: 0;
	364	+	border-bottom: 1px solid var(--dynamic-border);
	365	+	background: color-mix(in srgb, var(--dynamic-bg) 70%, transparent);
	366	+	}
	367	+
	368	+	.search-row {
	369	+	display: flex;
	370	+	align-items: center;
	371	+	gap: 0.75rem;
	372	+	padding: 0.85rem 1rem;
	373	+	}
	374	+
	375	+	.search-icon {
	376	+	font-size: 1rem;
	377	+	color: var(--dynamic-accent, #4ade80);
	378	+	flex-shrink: 0;
	379	+	}
	380	+
	381	+	.search-input {
	382	+	flex: 1;
	383	+	background: transparent;
	384	+	border: none;
	385	+	outline: none;
	386	+	font-size: 0.95rem;
	387	+	font-family: inherit;
	388	+	color: var(--dynamic-text);
	389	+	caret-color: var(--dynamic-accent, #4ade80);
	390	+	}
	391	+
	392	+	.search-input::placeholder {
	393	+	color: var(--dynamic-muted);
	394	+	opacity: 0.7;
	395	+	}
	396	+
	397	+	.search-meta {
	398	+	display: flex;
	399	+	align-items: center;
	400	+	gap: 0.5rem;
	401	+	flex-shrink: 0;
	402	+	}
	403	+
	404	+	.result-count {
	405	+	font-size: 0.7rem;
	406	+	color: var(--dynamic-muted);
	407	+	letter-spacing: 0.05em;
	408	+	}
	409	+
	410	+	.esc-hint {
	411	+	padding: 0.2rem 0.4rem;
	412	+	font-size: 0.65rem;
	413	+	color: var(--dynamic-muted);
	414	+	background: var(--dynamic-bg);
	415	+	border: 1px solid var(--dynamic-border);
	416	+	}
	417	+
	418	+	/* Results */
	419	+	.palette-results {
	420	+	max-height: 360px;
	421	+	overflow-y: auto;
	422	+	overscroll-behavior: contain;
	423	+	}
	424	+
	425	+	.empty-results {
	426	+	display: flex;
	427	+	flex-direction: column;
	428	+	align-items: center;
	429	+	justify-content: center;
	430	+	gap: 0.5rem;
	431	+	padding: 2.5rem 1rem;
	432	+	color: var(--dynamic-muted);
	433	+	}
	434	+
	435	+	.empty-icon {
	436	+	font-size: 1.5rem;
	437	+	opacity: 0.5;
	438	+	}
	439	+
	440	+	.empty-text {
	441	+	font-size: 0.8rem;
	442	+	letter-spacing: 0.05em;
	443	+	}
	444	+
	445	+	.result-item {
	446	+	width: 100%;
	447	+	display: flex;
	448	+	align-items: center;
	449	+	gap: 0.75rem;
	450	+	padding: 0.7rem 1rem;
	451	+	background: transparent;
	452	+	border: none;
	453	+	border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 40%, transparent);
	454	+	cursor: pointer;
	455	+	text-align: left;
	456	+	transition: background 80ms ease;
	457	+	}
	458	+
	459	+	.result-item:last-child {
	460	+	border-bottom: none;
	461	+	}
	462	+
	463	+	.result-item:hover {
	464	+	background: color-mix(in srgb, var(--dynamic-surface) 80%, var(--dynamic-bg) 20%);
	465	+	}
	466	+
	467	+	.result-item.selected {
	468	+	background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 12%, transparent);
	469	+	box-shadow: inset 2px 0 0 var(--dynamic-accent, #4ade80);
	470	+	}
	471	+
	472	+	.item-icon {
	473	+	font-size: 1rem;
	474	+	color: var(--dynamic-muted);
	475	+	flex-shrink: 0;
	476	+	width: 1.5rem;
	477	+	text-align: center;
	478	+	}
	479	+
	480	+	.result-item.selected .item-icon {
	481	+	color: var(--dynamic-accent, #4ade80);
	482	+	}
	483	+
	484	+	.item-content {
	485	+	flex: 1;
	486	+	min-width: 0;
	487	+	display: flex;
	488	+	flex-direction: column;
	489	+	gap: 0.15rem;
	490	+	}
	491	+
	492	+	.item-label {
	493	+	font-size: 0.85rem;
	494	+	color: var(--dynamic-text);
	495	+	white-space: nowrap;
	496	+	overflow: hidden;
	497	+	text-overflow: ellipsis;
	498	+	}
	499	+
	500	+	.item-description {
	501	+	font-size: 0.72rem;
	502	+	color: var(--dynamic-muted);
	503	+	white-space: nowrap;
	504	+	overflow: hidden;
	505	+	text-overflow: ellipsis;
	506	+	}
	507	+
	508	+	.item-shortcut {
	509	+	padding: 0.2rem 0.45rem;
	510	+	font-size: 0.65rem;
	511	+	color: var(--dynamic-muted);
	512	+	background: var(--dynamic-bg);
	513	+	border: 1px solid var(--dynamic-border);
	514	+	flex-shrink: 0;
	515	+	}
	516	+
	517	+	.result-item.selected .item-shortcut {
	518	+	border-color: color-mix(in srgb, var(--dynamic-accent, #4ade80) 40%, var(--dynamic-border) 60%);
	519	+	color: var(--dynamic-text);
	520	+	}
	521	+
	522	+	/* Footer */
	523	+	.palette-footer {
	524	+	display: flex;
	525	+	align-items: center;
	526	+	justify-content: center;
	527	+	gap: 1.5rem;
	528	+	padding: 0.65rem 1rem;
	529	+	border-top: 1px solid var(--dynamic-border);
	530	+	background: color-mix(in srgb, var(--dynamic-bg) 70%, transparent);
	531	+	}
	532	+
	533	+	.hint-group {
	534	+	display: flex;
	535	+	align-items: center;
	536	+	gap: 0.35rem;
	537	+	font-size: 0.68rem;
	538	+	color: var(--dynamic-muted);
	539	+	}
	540	+
	541	+	.hint-group kbd {
	542	+	padding: 0.15rem 0.35rem;
	543	+	font-size: 0.62rem;
	544	+	background: var(--dynamic-bg);
	545	+	border: 1px solid var(--dynamic-border);
	546	+	}
	547	+
	548	+	/* Scrollbar */
	549	+	.palette-results::-webkit-scrollbar {
	550	+	width: 6px;
	551	+	}
	552	+
	553	+	.palette-results::-webkit-scrollbar-track {
	554	+	background: transparent;
	555	+	}
	556	+
	557	+	.palette-results::-webkit-scrollbar-thumb {
	558	+	background: var(--dynamic-border);
	559	+	}
	560	+
	561	+	.palette-results::-webkit-scrollbar-thumb:hover {
	562	+	background: var(--dynamic-muted);
	563	+	}
	564	+
	565	+	@media (max-width: 480px) {
	566	+	.palette-overlay {
	567	+	padding-top: 2rem;
	568	+	align-items: flex-start;
	569	+	}
	570	+
	571	+	.palette-container {
	572	+	max-height: calc(100vh - 4rem);
	573	+	}
	574	+
	575	+	.palette-footer {
	576	+	flex-wrap: wrap;
	577	+	gap: 0.75rem;
	578	+	}
	579	+	}
	580	+	</style>

A gui/src/pages/homepage/shell/HomepageShell.svelte +570 -0

@@ -0,0 +1,570 @@
	1	+	<script lang="ts">
	2	+	import { onMount, onDestroy } from 'svelte';
	3	+	import { homepageState } from '../state.svelte';
	4	+	import { initializeHomepage } from '../messaging';
	5	+	import { initializeKeyboard } from '../keyboard';
	6	+	import CommandPalette from './CommandPalette.svelte';
	7	+	import StatusBar from './StatusBar.svelte';
	8	+	import KeyboardHints from './KeyboardHints.svelte';
	9	+	import { History, Star, BarChart3, Search, Moon, Sun } from '@lucide/svelte';
	10	+
	11	+	// Props for slot content
	12	+	interface Props {
	13	+	children?: import('svelte').Snippet;
	14	+	}
	15	+	let { children }: Props = $props();
	16	+
	17	+	// Theme state
	18	+	type ThemeMode = 'light' \| 'dark';
	19	+	let themeMode = $state<ThemeMode>('dark');
	20	+	let themeObserver: MutationObserver \| null = null;
	21	+
	22	+	// Keyboard cleanup
	23	+	let cleanupKeyboard: (() => void) \| null = null;
	24	+
	25	+	// Panel tabs config
	26	+	const panelTabs = [
	27	+	{ id: 'history' as const, label: 'HIST', icon: History },
	28	+	{ id: 'favorites' as const, label: 'FAV', icon: Star },
	29	+	{ id: 'analytics' as const, label: 'STAT', icon: BarChart3 },
	30	+	];
	31	+
	32	+	// Theme management
	33	+	const syncThemeState = () => {
	34	+	themeMode = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
	35	+	};
	36	+
	37	+	const toggleTheme = () => {
	38	+	const nextMode = themeMode === 'dark' ? 'light' : 'dark';
	39	+	const manager = (window as any).__dumber_color_scheme_manager as
	40	+	\| { setUserPreference?: (theme: ThemeMode) => void }
	41	+	\| undefined;
	42	+
	43	+	if (manager?.setUserPreference) {
	44	+	manager.setUserPreference(nextMode);
	45	+	return;
	46	+	}
	47	+
	48	+	if ((window as any).__dumber_setTheme) {
	49	+	(window as any).__dumber_setTheme(nextMode);
	50	+	localStorage.setItem('dumber.theme', nextMode);
	51	+	return;
	52	+	}
	53	+
	54	+	switch (nextMode) {
	55	+	case 'light':
	56	+	document.documentElement.classList.add('light');
	57	+	document.documentElement.classList.remove('dark');
	58	+	break;
	59	+	case 'dark':
	60	+	document.documentElement.classList.remove('light');
	61	+	document.documentElement.classList.add('dark');
	62	+	break;
	63	+	}
	64	+	localStorage.setItem('dumber.theme', nextMode);
	65	+	themeMode = nextMode;
	66	+	};
	67	+
	68	+	onMount(async () => {
	69	+	// Initialize keyboard navigation
	70	+	cleanupKeyboard = initializeKeyboard();
	71	+
	72	+	// Initialize data fetching
	73	+	await initializeHomepage();
	74	+
	75	+	// Theme synchronization
	76	+	syncThemeState();
	77	+	themeObserver = new MutationObserver(syncThemeState);
	78	+	themeObserver.observe(document.documentElement, {
	79	+	attributes: true,
	80	+	attributeFilter: ['class'],
	81	+	});
	82	+	});
	83	+
	84	+	onDestroy(() => {
	85	+	cleanupKeyboard?.();
	86	+	themeObserver?.disconnect();
	87	+	themeObserver = null;
	88	+	homepageState.reset();
	89	+	});
	90	+	</script>
	91	+
	92	+	<svelte:head>
	93	+	<title>dumb://home</title>
	94	+	<meta name="description" content="Dumber Browser - Homepage" />
	95	+	{@html `<style>
	96	+	html { background: var(--dynamic-bg, #0a0a0a); }
	97	+	body { background: var(--dynamic-bg, #0a0a0a); color: var(--dynamic-text, #e5e5e5); }
	98	+	/* Disable GTK/WebKit default focus rings - we handle focus styling ourselves */
	99	+	*:focus { outline: none !important; }
	100	+	*:focus-visible { outline: none !important; }
	101	+	button:focus, input:focus, a:focus { outline: none !important; box-shadow: none !important; }
	102	+	</style>`}
	103	+	</svelte:head>
	104	+
	105	+	<div class="homepage-shell">
	106	+	<!-- Terminal Frame -->
	107	+	<div class="terminal-frame">
	108	+	<!-- Header -->
	109	+	<header class="terminal-header">
	110	+	<div class="header-left">
	111	+	<span class="terminal-path">dumb://home</span>
	112	+	<div class="header-tabs" role="tablist" aria-label="Homepage panels">
	113	+	{#each panelTabs as tab, index (tab.id)}
	114	+	<button
	115	+	class="tab-button"
	116	+	class:active={homepageState.activePanel === tab.id}
	117	+	onclick={() => homepageState.setActivePanel(tab.id)}
	118	+	onkeydown={(e) => {
	119	+	switch (e.key) {
	120	+	case 'Enter':
	121	+	case ' ':
	122	+	e.preventDefault();
	123	+	homepageState.setActivePanel(tab.id);
	124	+	break;
	125	+	case 'ArrowLeft':
	126	+	case 'ArrowUp':
	127	+	e.preventDefault();
	128	+	{
	129	+	const prevIndex = index === 0 ? panelTabs.length - 1 : index - 1;
	130	+	const prevTab = panelTabs[prevIndex];
	131	+	if (prevTab) {
	132	+	homepageState.setActivePanel(prevTab.id);
	133	+	(e.currentTarget.parentElement?.children[prevIndex] as HTMLElement)?.focus();
	134	+	}
	135	+	}
	136	+	break;
	137	+	case 'ArrowRight':
	138	+	case 'ArrowDown':
	139	+	e.preventDefault();
	140	+	{
	141	+	const nextIndex = index === panelTabs.length - 1 ? 0 : index + 1;
	142	+	const nextTab = panelTabs[nextIndex];
	143	+	if (nextTab) {
	144	+	homepageState.setActivePanel(nextTab.id);
	145	+	(e.currentTarget.parentElement?.children[nextIndex] as HTMLElement)?.focus();
	146	+	}
	147	+	}
	148	+	break;
	149	+	}
	150	+	}}
	151	+	type="button"
	152	+	role="tab"
	153	+	aria-selected={homepageState.activePanel === tab.id}
	154	+	tabindex={homepageState.activePanel === tab.id ? 0 : -1}
	155	+	>
	156	+	<tab.icon size={14} strokeWidth={2} class="tab-icon" />
	157	+	<span class="tab-label">{tab.label}</span>
	158	+	</button>
	159	+	{/each}
	160	+	</div>
	161	+	</div>
	162	+	<div class="header-right">
	163	+	<button
	164	+	class="action-button"
	165	+	type="button"
	166	+	onclick={() => homepageState.openCommandPalette()}
	167	+	title="Command Palette (Ctrl+P or /)"
	168	+	>
	169	+	<Search size={14} strokeWidth={2} />
	170	+	<span class="button-text">CMD</span>
	171	+	<kbd class="kbd-hint">/</kbd>
	172	+	</button>
	173	+	<button
	174	+	class="theme-toggle"
	175	+	type="button"
	176	+	onclick={toggleTheme}
	177	+	title={themeMode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
	178	+	aria-pressed={themeMode === 'dark'}
	179	+	>
	180	+	{#if themeMode === 'dark'}
	181	+	<Moon size={18} strokeWidth={2} />
	182	+	{:else}
	183	+	<Sun size={18} strokeWidth={2} />
	184	+	{/if}
	185	+	</button>
	186	+	</div>
	187	+	</header>
	188	+
	189	+	<!-- Main Content Area -->
	190	+	<main class="terminal-body">
	191	+	{#if children}
	192	+	{@render children()}
	193	+	{:else}
	194	+	<div class="empty-shell">
	195	+	<span class="shell-prompt">$</span>
	196	+	<span class="shell-cursor">_</span>
	197	+	</div>
	198	+	{/if}
	199	+	</main>
	200	+
	201	+	<!-- Status Bar -->
	202	+	<StatusBar />
	203	+	</div>
	204	+
	205	+	<!-- Keyboard Hints Overlay -->
	206	+	<KeyboardHints />
	207	+
	208	+	<!-- Command Palette Modal -->
	209	+	{#if homepageState.commandPaletteOpen}
	210	+	<CommandPalette />
	211	+	{/if}
	212	+
	213	+	<!-- Confirmation Modal -->
	214	+	{#if homepageState.confirmModalOpen}
	215	+	<div class="modal-overlay" onclick={() => homepageState.cancelConfirm()}>
	216	+	<div class="confirm-modal" onclick={(e) => e.stopPropagation()}>
	217	+	<div class="modal-header">
	218	+	<span class="modal-icon"></span>
	219	+	<span class="modal-title">CONFIRM</span>
	220	+	</div>
	221	+	<p class="modal-message">{homepageState.confirmModalMessage}</p>
	222	+	<div class="modal-actions">
	223	+	<button
	224	+	class="modal-btn modal-btn-cancel"
	225	+	type="button"
	226	+	onclick={() => homepageState.cancelConfirm()}
	227	+	>
	228	+	CANCEL
	229	+	<kbd>Esc</kbd>
	230	+	</button>
	231	+	<button
	232	+	class="modal-btn modal-btn-confirm"
	233	+	type="button"
	234	+	onclick={() => homepageState.confirmAction()}
	235	+	>
	236	+	CONFIRM
	237	+	<kbd>Enter</kbd>
	238	+	</button>
	239	+	</div>
	240	+	</div>
	241	+	</div>
	242	+	{/if}
	243	+	</div>
	244	+
	245	+	<style>
	246	+	.homepage-shell {
	247	+	height: 100vh;
	248	+	display: flex;
	249	+	flex-direction: column;
	250	+	font-family: 'JetBrains Mono NF', ui-monospace, monospace;
	251	+	line-height: 1.5;
	252	+	color: var(--dynamic-text);
	253	+	background: var(--dynamic-bg);
	254	+	overflow: hidden;
	255	+	}
	256	+
	257	+	.terminal-frame {
	258	+	flex: 1;
	259	+	display: flex;
	260	+	flex-direction: column;
	261	+	width: 100%;
	262	+	background: color-mix(in srgb, var(--dynamic-surface) 60%, var(--dynamic-bg) 40%);
	263	+	}
	264	+
	265	+	/* Dark mode: subtle shadow */
	266	+	:global(.dark) .terminal-frame {
	267	+	box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.5);
	268	+	}
	269	+
	270	+	/* Header */
	271	+	.terminal-header {
	272	+	display: flex;
	273	+	align-items: center;
	274	+	justify-content: space-between;
	275	+	gap: 1rem;
	276	+	padding: 0.75rem 1rem;
	277	+	border-bottom: 1px solid var(--dynamic-border);
	278	+	background: color-mix(in srgb, var(--dynamic-bg) 90%, var(--dynamic-surface) 10%);
	279	+	}
	280	+
	281	+	.header-left {
	282	+	display: flex;
	283	+	align-items: center;
	284	+	gap: 1.5rem;
	285	+	}
	286	+
	287	+	.terminal-path {
	288	+	font-size: 0.8rem;
	289	+	font-weight: 600;
	290	+	color: var(--dynamic-accent, #4ade80);
	291	+	letter-spacing: 0.05em;
	292	+	}
	293	+
	294	+	.header-tabs {
	295	+	display: flex;
	296	+	gap: 0.25rem;
	297	+	}
	298	+
	299	+	.tab-button {
	300	+	display: flex;
	301	+	align-items: center;
	302	+	gap: 0.4rem;
	303	+	padding: 0.4rem 0.75rem;
	304	+	font-size: 0.7rem;
	305	+	font-weight: 500;
	306	+	letter-spacing: 0.1em;
	307	+	color: var(--dynamic-muted);
	308	+	background: transparent;
	309	+	border: 1px solid transparent;
	310	+	cursor: pointer;
	311	+	transition: all 120ms ease;
	312	+	}
	313	+
	314	+	.tab-button:hover {
	315	+	color: var(--dynamic-text);
	316	+	background: color-mix(in srgb, var(--dynamic-surface) 50%, transparent);
	317	+	}
	318	+
	319	+	.tab-button:focus-visible {
	320	+	color: var(--dynamic-text);
	321	+	border-color: var(--dynamic-accent, #4ade80);
	322	+	background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 15%, transparent);
	323	+	}
	324	+
	325	+	.tab-button.active {
	326	+	color: var(--dynamic-text);
	327	+	background: var(--dynamic-surface);
	328	+	border-color: var(--dynamic-border);
	329	+	}
	330	+
	331	+	.tab-icon,
	332	+	:global(.tab-icon) {
	333	+	flex-shrink: 0;
	334	+	}
	335	+
	336	+	.header-right {
	337	+	display: flex;
	338	+	align-items: center;
	339	+	gap: 0.5rem;
	340	+	}
	341	+
	342	+	.action-button {
	343	+	display: flex;
	344	+	align-items: center;
	345	+	gap: 0.5rem;
	346	+	padding: 0.4rem 0.75rem;
	347	+	font-size: 0.7rem;
	348	+	font-weight: 500;
	349	+	letter-spacing: 0.08em;
	350	+	color: var(--dynamic-muted);
	351	+	background: transparent;
	352	+	border: 1px solid var(--dynamic-border);
	353	+	cursor: pointer;
	354	+	transition: all 120ms ease;
	355	+	}
	356	+
	357	+	.action-button:hover,
	358	+	.action-button:focus-visible {
	359	+	color: var(--dynamic-text);
	360	+	border-color: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);
	361	+	background: color-mix(in srgb, var(--dynamic-surface) 30%, transparent);
	362	+	outline: none;
	363	+	}
	364	+
	365	+	.kbd-hint {
	366	+	padding: 0.15rem 0.35rem;
	367	+	font-size: 0.65rem;
	368	+	color: var(--dynamic-muted);
	369	+	background: var(--dynamic-bg);
	370	+	border: 1px solid var(--dynamic-border);
	371	+	margin-left: 0.25rem;
	372	+	}
	373	+
	374	+	.theme-toggle {
	375	+	display: flex;
	376	+	align-items: center;
	377	+	justify-content: center;
	378	+	width: 2.25rem;
	379	+	height: 2.25rem;
	380	+	color: var(--dynamic-muted);
	381	+	background: transparent;
	382	+	border: 1px solid var(--dynamic-border);
	383	+	cursor: pointer;
	384	+	transition: all 120ms ease;
	385	+	}
	386	+
	387	+	.theme-toggle:hover,
	388	+	.theme-toggle:focus-visible {
	389	+	color: var(--dynamic-text);
	390	+	border-color: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);
	391	+	outline: none;
	392	+	}
	393	+
	394	+	.theme-toggle :global(svg) {
	395	+	flex-shrink: 0;
	396	+	}
	397	+
	398	+	/* Main Content */
	399	+	.terminal-body {
	400	+	flex: 1;
	401	+	display: flex;
	402	+	flex-direction: column;
	403	+	min-height: 0;
	404	+	overflow: hidden;
	405	+	background: var(--dynamic-bg);
	406	+	}
	407	+
	408	+	.empty-shell {
	409	+	flex: 1;
	410	+	display: flex;
	411	+	align-items: center;
	412	+	justify-content: center;
	413	+	gap: 0.5rem;
	414	+	color: var(--dynamic-muted);
	415	+	font-size: 1.25rem;
	416	+	}
	417	+
	418	+	.shell-prompt {
	419	+	color: var(--dynamic-accent, #4ade80);
	420	+	}
	421	+
	422	+	.shell-cursor {
	423	+	animation: blink 1s step-end infinite;
	424	+	}
	425	+
	426	+	@keyframes blink {
	427	+	50% { opacity: 0; }
	428	+	}
	429	+
	430	+	/* Modal Overlay */
	431	+	.modal-overlay {
	432	+	position: fixed;
	433	+	inset: 0;
	434	+	z-index: 100;
	435	+	display: flex;
	436	+	align-items: center;
	437	+	justify-content: center;
	438	+	background: rgb(0 0 0 / 0.7);
	439	+	backdrop-filter: blur(4px);
	440	+	animation: fade-in 150ms ease;
	441	+	}
	442	+
	443	+	@keyframes fade-in {
	444	+	from { opacity: 0; }
	445	+	}
	446	+
	447	+	.confirm-modal {
	448	+	width: 100%;
	449	+	max-width: 420px;
	450	+	margin: 1rem;
	451	+	background: var(--dynamic-surface);
	452	+	border: 1px solid var(--dynamic-border);
	453	+	box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
	454	+	animation: modal-in 200ms ease;
	455	+	}
	456	+
	457	+	@keyframes modal-in {
	458	+	from {
	459	+	opacity: 0;
	460	+	transform: scale(0.95) translateY(-8px);
	461	+	}
	462	+	}
	463	+
	464	+	.modal-header {
	465	+	display: flex;
	466	+	align-items: center;
	467	+	gap: 0.6rem;
	468	+	padding: 0.85rem 1rem;
	469	+	border-bottom: 1px solid var(--dynamic-border);
	470	+	background: color-mix(in srgb, var(--dynamic-bg) 80%, transparent);
	471	+	}
	472	+
	473	+	.modal-icon {
	474	+	font-size: 1rem;
	475	+	color: #fbbf24;
	476	+	}
	477	+
	478	+	.modal-title {
	479	+	font-size: 0.75rem;
	480	+	font-weight: 600;
	481	+	letter-spacing: 0.1em;
	482	+	color: var(--dynamic-text);
	483	+	}
	484	+
	485	+	.modal-message {
	486	+	margin: 0;
	487	+	padding: 1.25rem 1rem;
	488	+	font-size: 0.85rem;
	489	+	color: var(--dynamic-text);
	490	+	line-height: 1.6;
	491	+	}
	492	+
	493	+	.modal-actions {
	494	+	display: flex;
	495	+	gap: 0.5rem;
	496	+	padding: 0.85rem 1rem;
	497	+	border-top: 1px solid var(--dynamic-border);
	498	+	background: color-mix(in srgb, var(--dynamic-bg) 50%, transparent);
	499	+	}
	500	+
	501	+	.modal-btn {
	502	+	flex: 1;
	503	+	display: flex;
	504	+	align-items: center;
	505	+	justify-content: center;
	506	+	gap: 0.6rem;
	507	+	padding: 0.6rem 1rem;
	508	+	font-size: 0.72rem;
	509	+	font-weight: 500;
	510	+	letter-spacing: 0.08em;
	511	+	border: 1px solid var(--dynamic-border);
	512	+	cursor: pointer;
	513	+	transition: all 120ms ease;
	514	+	}
	515	+
	516	+	.modal-btn kbd {
	517	+	padding: 0.1rem 0.3rem;
	518	+	font-size: 0.6rem;
	519	+	background: var(--dynamic-bg);
	520	+	border: 1px solid var(--dynamic-border);
	521	+	opacity: 0.7;
	522	+	}
	523	+
	524	+	.modal-btn-cancel {
	525	+	color: var(--dynamic-muted);
	526	+	background: transparent;
	527	+	}
	528	+
	529	+	.modal-btn-cancel:hover {
	530	+	color: var(--dynamic-text);
	531	+	background: color-mix(in srgb, var(--dynamic-surface) 40%, transparent);
	532	+	}
	533	+
	534	+	.modal-btn-confirm {
	535	+	color: #fef2f2;
	536	+	background: #b91c1c;
	537	+	border-color: #991b1b;
	538	+	}
	539	+
	540	+	.modal-btn-confirm:hover {
	541	+	background: #dc2626;
	542	+	}
	543	+
	544	+	/* Responsive */
	545	+	@media (max-width: 768px) {
	546	+	.terminal-header {
	547	+	flex-wrap: wrap;
	548	+	gap: 0.75rem;
	549	+	}
	550	+
	551	+	.header-left {
	552	+	flex-wrap: wrap;
	553	+	gap: 0.75rem;
	554	+	}
	555	+
	556	+	.header-tabs {
	557	+	order: 10;
	558	+	width: 100%;
	559	+	}
	560	+
	561	+	.tab-button {
	562	+	flex: 1;
	563	+	justify-content: center;
	564	+	}
	565	+
	566	+	.action-button .button-text {
	567	+	display: none;
	568	+	}
	569	+	}
	570	+	</style>

A gui/src/pages/homepage/shell/KeyboardHints.svelte +437 -0

@@ -0,0 +1,437 @@
	1	+	<script lang="ts">
	2	+	import { homepageState } from '../state.svelte';
	3	+	import type { KeyboardHint } from '../keyboard';
	4	+
	5	+	// Toggle visibility with ?
	6	+	let showHints = $state(false);
	7	+	let hintTimeout: ReturnType<typeof setTimeout> \| null = null;
	8	+
	9	+	// Panel-specific hints
	10	+	const panelHints = $derived.by((): KeyboardHint[] => {
	11	+	switch (homepageState.activePanel) {
	12	+	case 'history':
	13	+	return [
	14	+	{ keys: ['d', 'x'], description: 'Delete entry' },
	15	+	{ keys: ['D h'], description: 'Clear last hour' },
	16	+	{ keys: ['D d'], description: 'Clear last day' },
	17	+	{ keys: ['D w'], description: 'Clear last week' },
	18	+	{ keys: ['D D'], description: 'Clear all history' },
	19	+	{ keys: ['D @'], description: 'Clear domain' },
	20	+	{ keys: ['p'], description: 'Pin to favorites' },
	21	+	];
	22	+	case 'favorites':
	23	+	return [
	24	+	{ keys: ['e'], description: 'Edit favorite' },
	25	+	{ keys: ['t'], description: 'Manage tags' },
	26	+	{ keys: ['m'], description: 'Move to folder' },
	27	+	{ keys: ['1-9'], description: 'Set shortcut key' },
	28	+	{ keys: ['d'], description: 'Delete favorite' },
	29	+	];
	30	+	case 'analytics':
	31	+	return [
	32	+	{ keys: ['r'], description: 'Refresh stats' },
	33	+	{ keys: ['D @'], description: 'Clear domain' },
	34	+	];
	35	+	default:
	36	+	return [];
	37	+	}
	38	+	});
	39	+
	40	+	// Navigation hints (always shown)
	41	+	const navHints: KeyboardHint[] = [
	42	+	{ keys: ['j', '↓'], description: 'Move down' },
	43	+	{ keys: ['k', '↑'], description: 'Move up' },
	44	+	{ keys: ['g g'], description: 'Go to first' },
	45	+	{ keys: ['G'], description: 'Go to last' },
	46	+	{ keys: ['Enter', 'o'], description: 'Open item' },
	47	+	{ keys: ['/'], description: 'Search / Command' },
	48	+	{ keys: ['Esc'], description: 'Close / Cancel' },
	49	+	];
	50	+
	51	+	// Panel switch hints
	52	+	const panelSwitchHints: KeyboardHint[] = [
	53	+	{ keys: ['g h'], description: 'History panel' },
	54	+	{ keys: ['g f'], description: 'Favorites panel' },
	55	+	{ keys: ['g a'], description: 'Analytics panel' },
	56	+	];
	57	+
	58	+	// Quick access hints
	59	+	const quickAccessHints: KeyboardHint[] = [
	60	+	{ keys: ['1-9'], description: 'Quick navigate to shortcut' },
	61	+	];
	62	+
	63	+	// Handle keyboard toggle
	64	+	function handleKeydown(e: KeyboardEvent) {
	65	+	if (e.key === '?' && !e.ctrlKey && !e.altKey && !e.metaKey) {
	66	+	// Don't trigger if in input
	67	+	if ((e.target as HTMLElement).tagName === 'INPUT') return;
	68	+	// Don't trigger if command palette is open
	69	+	if (homepageState.commandPaletteOpen) return;
	70	+
	71	+	e.preventDefault();
	72	+	toggleHints();
	73	+	}
	74	+	}
	75	+
	76	+	function toggleHints() {
	77	+	showHints = !showHints;
	78	+
	79	+	// Auto-hide after 10 seconds
	80	+	if (showHints) {
	81	+	if (hintTimeout) clearTimeout(hintTimeout);
	82	+	hintTimeout = setTimeout(() => {
	83	+	showHints = false;
	84	+	}, 10000);
	85	+	} else {
	86	+	if (hintTimeout) {
	87	+	clearTimeout(hintTimeout);
	88	+	hintTimeout = null;
	89	+	}
	90	+	}
	91	+	}
	92	+
	93	+	function closeHints() {
	94	+	showHints = false;
	95	+	if (hintTimeout) {
	96	+	clearTimeout(hintTimeout);
	97	+	hintTimeout = null;
	98	+	}
	99	+	}
	100	+
	101	+	// Cleanup on destroy
	102	+	import { onDestroy } from 'svelte';
	103	+	onDestroy(() => {
	104	+	if (hintTimeout) clearTimeout(hintTimeout);
	105	+	});
	106	+	</script>
	107	+
	108	+	<svelte:document onkeydown={handleKeydown} />
	109	+
	110	+	{#if showHints}
	111	+	<div class="hints-overlay" onclick={closeHints}>
	112	+	<div class="hints-panel" onclick={(e) => e.stopPropagation()}>
	113	+	<div class="hints-header">
	114	+	<span class="hints-icon"></span>
	115	+	<span class="hints-title">KEYBOARD SHORTCUTS</span>
	116	+	<button class="hints-close" onclick={closeHints} type="button">
	117	+	<span>×</span>
	118	+	</button>
	119	+	</div>
	120	+
	121	+	<div class="hints-body">
	122	+	<!-- Navigation Section -->
	123	+	<section class="hints-section">
	124	+	<h3 class="section-title">
	125	+	<span class="section-icon"></span>
	126	+	Navigation
	127	+	</h3>
	128	+	<div class="hints-grid">
	129	+	{#each navHints as hint (hint.description)}
	130	+	<div class="hint-row">
	131	+	<div class="hint-keys">
	132	+	{#each hint.keys as key, i}
	133	+	{#if i > 0}<span class="key-sep">/</span>{/if}
	134	+	<kbd>{key}</kbd>
	135	+	{/each}
	136	+	</div>
	137	+	<span class="hint-desc">{hint.description}</span>
	138	+	</div>
	139	+	{/each}
	140	+	</div>
	141	+	</section>
	142	+
	143	+	<!-- Panel Switch Section -->
	144	+	<section class="hints-section">
	145	+	<h3 class="section-title">
	146	+	<span class="section-icon"></span>
	147	+	Panels
	148	+	</h3>
	149	+	<div class="hints-grid">
	150	+	{#each panelSwitchHints as hint (hint.description)}
	151	+	<div class="hint-row">
	152	+	<div class="hint-keys">
	153	+	{#each hint.keys as key, i}
	154	+	{#if i > 0}<span class="key-sep">/</span>{/if}
	155	+	<kbd>{key}</kbd>
	156	+	{/each}
	157	+	</div>
	158	+	<span class="hint-desc">{hint.description}</span>
	159	+	</div>
	160	+	{/each}
	161	+	</div>
	162	+	</section>
	163	+
	164	+	<!-- Current Panel Section -->
	165	+	{#if panelHints.length > 0}
	166	+	<section class="hints-section panel-specific">
	167	+	<h3 class="section-title">
	168	+	<span class="section-icon">
	169	+	{#if homepageState.activePanel === 'history'}
	170	+	{:else if homepageState.activePanel === 'favorites'}
	171	+	{:else}
	172	+	{/if}
	173	+	</span>
	174	+	{homepageState.activePanel.charAt(0).toUpperCase() + homepageState.activePanel.slice(1)} Actions
	175	+	</h3>
	176	+	<div class="hints-grid">
	177	+	{#each panelHints as hint (hint.description)}
	178	+	<div class="hint-row">
	179	+	<div class="hint-keys">
	180	+	{#each hint.keys as key, i}
	181	+	{#if i > 0}<span class="key-sep">/</span>{/if}
	182	+	<kbd>{key}</kbd>
	183	+	{/each}
	184	+	</div>
	185	+	<span class="hint-desc">{hint.description}</span>
	186	+	</div>
	187	+	{/each}
	188	+	</div>
	189	+	</section>
	190	+	{/if}
	191	+
	192	+	<!-- Quick Access Section -->
	193	+	<section class="hints-section">
	194	+	<h3 class="section-title">
	195	+	<span class="section-icon"></span>
	196	+	Quick Access
	197	+	</h3>
	198	+	<div class="hints-grid">
	199	+	{#each quickAccessHints as hint (hint.description)}
	200	+	<div class="hint-row">
	201	+	<div class="hint-keys">
	202	+	{#each hint.keys as key, i}
	203	+	{#if i > 0}<span class="key-sep">/</span>{/if}
	204	+	<kbd>{key}</kbd>
	205	+	{/each}
	206	+	</div>
	207	+	<span class="hint-desc">{hint.description}</span>
	208	+	</div>
	209	+	{/each}
	210	+	</div>
	211	+	</section>
	212	+	</div>
	213	+
	214	+	<div class="hints-footer">
	215	+	<span class="footer-hint">Press <kbd>?</kbd> to toggle hints</span>
	216	+	</div>
	217	+	</div>
	218	+	</div>
	219	+	{/if}
	220	+
	221	+	<style>
	222	+	.hints-overlay {
	223	+	position: fixed;
	224	+	inset: 0;
	225	+	z-index: 150;
	226	+	display: flex;
	227	+	align-items: center;
	228	+	justify-content: center;
	229	+	background: rgb(0 0 0 / 0.6);
	230	+	backdrop-filter: blur(4px);
	231	+	animation: fade-in 150ms ease;
	232	+	}
	233	+
	234	+	@keyframes fade-in {
	235	+	from { opacity: 0; }
	236	+	}
	237	+
	238	+	.hints-panel {
	239	+	width: 100%;
	240	+	max-width: 540px;
	241	+	max-height: 85vh;
	242	+	margin: 1rem;
	243	+	display: flex;
	244	+	flex-direction: column;
	245	+	background: var(--dynamic-surface);
	246	+	border: 1px solid var(--dynamic-border);
	247	+	box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
	248	+	animation: panel-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
	249	+	overflow: hidden;
	250	+	}
	251	+
	252	+	@keyframes panel-in {
	253	+	from {
	254	+	opacity: 0;
	255	+	transform: scale(0.95);
	256	+	}
	257	+	}
	258	+
	259	+	/* Header */
	260	+	.hints-header {
	261	+	display: flex;
	262	+	align-items: center;
	263	+	gap: 0.6rem;
	264	+	padding: 0.85rem 1rem;
	265	+	border-bottom: 1px solid var(--dynamic-border);
	266	+	background: color-mix(in srgb, var(--dynamic-bg) 80%, transparent);
	267	+	}
	268	+
	269	+	.hints-icon {
	270	+	font-size: 1rem;
	271	+	color: var(--dynamic-accent, #4ade80);
	272	+	}
	273	+
	274	+	.hints-title {
	275	+	flex: 1;
	276	+	font-size: 0.75rem;
	277	+	font-weight: 600;
	278	+	letter-spacing: 0.1em;
	279	+	color: var(--dynamic-text);
	280	+	}
	281	+
	282	+	.hints-close {
	283	+	display: flex;
	284	+	align-items: center;
	285	+	justify-content: center;
	286	+	width: 1.75rem;
	287	+	height: 1.75rem;
	288	+	font-size: 1.25rem;
	289	+	color: var(--dynamic-muted);
	290	+	background: transparent;
	291	+	border: 1px solid var(--dynamic-border);
	292	+	cursor: pointer;
	293	+	transition: all 120ms ease;
	294	+	}
	295	+
	296	+	.hints-close:hover {
	297	+	color: var(--dynamic-text);
	298	+	border-color: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);
	299	+	}
	300	+
	301	+	/* Body */
	302	+	.hints-body {
	303	+	flex: 1;
	304	+	overflow-y: auto;
	305	+	padding: 1rem;
	306	+	display: flex;
	307	+	flex-direction: column;
	308	+	gap: 1.25rem;
	309	+	}
	310	+
	311	+	.hints-section {
	312	+	display: flex;
	313	+	flex-direction: column;
	314	+	gap: 0.6rem;
	315	+	}
	316	+
	317	+	.hints-section.panel-specific {
	318	+	padding: 0.75rem;
	319	+	background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 8%, transparent);
	320	+	border: 1px solid color-mix(in srgb, var(--dynamic-accent, #4ade80) 25%, var(--dynamic-border) 75%);
	321	+	}
	322	+
	323	+	.section-title {
	324	+	display: flex;
	325	+	align-items: center;
	326	+	gap: 0.5rem;
	327	+	margin: 0;
	328	+	font-size: 0.72rem;
	329	+	font-weight: 600;
	330	+	text-transform: uppercase;
	331	+	letter-spacing: 0.1em;
	332	+	color: var(--dynamic-text);
	333	+	}
	334	+
	335	+	.section-icon {
	336	+	font-size: 0.85rem;
	337	+	color: var(--dynamic-muted);
	338	+	}
	339	+
	340	+	.panel-specific .section-icon {
	341	+	color: var(--dynamic-accent, #4ade80);
	342	+	}
	343	+
	344	+	.hints-grid {
	345	+	display: grid;
	346	+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	347	+	gap: 0.4rem;
	348	+	}
	349	+
	350	+	.hint-row {
	351	+	display: flex;
	352	+	align-items: center;
	353	+	gap: 0.6rem;
	354	+	padding: 0.4rem 0.6rem;
	355	+	background: color-mix(in srgb, var(--dynamic-bg) 60%, transparent);
	356	+	border: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);
	357	+	}
	358	+
	359	+	.hint-keys {
	360	+	display: flex;
	361	+	align-items: center;
	362	+	gap: 0.2rem;
	363	+	flex-shrink: 0;
	364	+	}
	365	+
	366	+	.hint-keys kbd {
	367	+	padding: 0.2rem 0.4rem;
	368	+	font-size: 0.68rem;
	369	+	font-family: inherit;
	370	+	color: var(--dynamic-text);
	371	+	background: var(--dynamic-bg);
	372	+	border: 1px solid var(--dynamic-border);
	373	+	min-width: 1.4rem;
	374	+	text-align: center;
	375	+	}
	376	+
	377	+	.key-sep {
	378	+	font-size: 0.6rem;
	379	+	color: var(--dynamic-muted);
	380	+	opacity: 0.6;
	381	+	}
	382	+
	383	+	.hint-desc {
	384	+	font-size: 0.72rem;
	385	+	color: var(--dynamic-muted);
	386	+	white-space: nowrap;
	387	+	overflow: hidden;
	388	+	text-overflow: ellipsis;
	389	+	}
	390	+
	391	+	/* Footer */
	392	+	.hints-footer {
	393	+	display: flex;
	394	+	justify-content: center;
	395	+	padding: 0.65rem 1rem;
	396	+	border-top: 1px solid var(--dynamic-border);
	397	+	background: color-mix(in srgb, var(--dynamic-bg) 70%, transparent);
	398	+	}
	399	+
	400	+	.footer-hint {
	401	+	font-size: 0.68rem;
	402	+	color: var(--dynamic-muted);
	403	+	letter-spacing: 0.05em;
	404	+	}
	405	+
	406	+	.footer-hint kbd {
	407	+	padding: 0.15rem 0.35rem;
	408	+	font-size: 0.62rem;
	409	+	background: var(--dynamic-bg);
	410	+	border: 1px solid var(--dynamic-border);
	411	+	margin: 0 0.25rem;
	412	+	}
	413	+
	414	+	/* Scrollbar */
	415	+	.hints-body::-webkit-scrollbar {
	416	+	width: 6px;
	417	+	}
	418	+
	419	+	.hints-body::-webkit-scrollbar-track {
	420	+	background: transparent;
	421	+	}
	422	+
	423	+	.hints-body::-webkit-scrollbar-thumb {
	424	+	background: var(--dynamic-border);
	425	+	}
	426	+
	427	+	/* Responsive */
	428	+	@media (max-width: 480px) {
	429	+	.hints-grid {
	430	+	grid-template-columns: 1fr;
	431	+	}
	432	+
	433	+	.hints-panel {
	434	+	max-height: 90vh;
	435	+	}
	436	+	}
	437	+	</style>

A gui/src/pages/homepage/shell/StatusBar.svelte +407 -0

@@ -0,0 +1,407 @@
	1	+	<script lang="ts">
	2	+	import { homepageState } from '../state.svelte';
	3	+	import { History, Star, BarChart3, Terminal, Search, Folder, Tags, Command } from '@lucide/svelte';
	4	+
	5	+	// Derived status indicators
	6	+	const panelLabel = $derived({
	7	+	history: 'HISTORY',
	8	+	favorites: 'FAVORITES',
	9	+	analytics: 'ANALYTICS',
	10	+	}[homepageState.activePanel]);
	11	+
	12	+	const panelIcon = $derived({
	13	+	history: History,
	14	+	favorites: Star,
	15	+	analytics: BarChart3,
	16	+	}[homepageState.activePanel]);
	17	+
	18	+	// Loading states
	19	+	const isLoading = $derived(
	20	+	homepageState.historyLoading \|\|
	21	+	homepageState.favoritesLoading \|\|
	22	+	homepageState.analyticsLoading
	23	+	);
	24	+
	25	+	// Current list stats
	26	+	const listStats = $derived.by(() => {
	27	+	switch (homepageState.activePanel) {
	28	+	case 'history':
	29	+	if (homepageState.historySearchQuery) {
	30	+	return {
	31	+	count: homepageState.historySearchResults.length,
	32	+	label: 'results',
	33	+	filtered: true,
	34	+	};
	35	+	}
	36	+	return {
	37	+	count: homepageState.history.length,
	38	+	label: 'entries',
	39	+	filtered: false,
	40	+	};
	41	+	case 'favorites':
	42	+	const filtered = homepageState.filteredFavorites;
	43	+	const total = homepageState.favorites.length;
	44	+	return {
	45	+	count: filtered.length,
	46	+	label: filtered.length === total ? 'items' : `of ${total}`,
	47	+	filtered: filtered.length !== total,
	48	+	};
	49	+	case 'analytics':
	50	+	return {
	51	+	count: homepageState.domainStats.length,
	52	+	label: 'domains',
	53	+	filtered: false,
	54	+	};
	55	+	default:
	56	+	return { count: 0, label: 'items', filtered: false };
	57	+	}
	58	+	});
	59	+
	60	+	// Position in list
	61	+	const positionInfo = $derived.by(() => {
	62	+	const length = homepageState.currentListLength;
	63	+	if (length === 0) return null;
	64	+
	65	+	const pos = homepageState.focusedIndex + 1;
	66	+	return { current: pos, total: length };
	67	+	});
	68	+
	69	+	// Mode indicator
	70	+	const modeIndicator = $derived.by(() => {
	71	+	if (homepageState.commandPaletteOpen) {
	72	+	return { icon: Terminal, label: 'COMMAND', color: 'accent' };
	73	+	}
	74	+	if (homepageState.historySearchQuery) {
	75	+	return { icon: Search, label: 'SEARCH', color: 'warning' };
	76	+	}
	77	+	if (homepageState.selectedFolderId !== null) {
	78	+	const folder = homepageState.folders.find(f => f.id === homepageState.selectedFolderId);
	79	+	return { icon: Folder, label: folder?.name \|\| 'FOLDER', color: 'info' };
	80	+	}
	81	+	if (homepageState.selectedTagIds.length > 0) {
	82	+	return { icon: Tags, label: `${homepageState.selectedTagIds.length} TAGS`, color: 'info' };
	83	+	}
	84	+	return null;
	85	+	});
	86	+	</script>
	87	+
	88	+	<footer class="status-bar">
	89	+	<!-- Left Section: Mode & Panel -->
	90	+	<div class="status-left">
	91	+	<!-- Pending Key Prefix Indicator -->
	92	+	{#if homepageState.pendingKeyPrefix}
	93	+	<div class="status-chip prefix-chip" data-color="warning">
	94	+	<span class="chip-icon">
	95	+	<Command size={12} strokeWidth={2} />
	96	+	</span>
	97	+	<kbd class="prefix-key">{homepageState.pendingKeyPrefix}</kbd>
	98	+	<span class="prefix-waiting">...</span>
	99	+	</div>
	100	+	{/if}
	101	+
	102	+	<!-- Mode Indicator -->
	103	+	{#if modeIndicator}
	104	+	<div class="status-chip mode-chip" data-color={modeIndicator.color}>
	105	+	<span class="chip-icon">
	106	+	<svelte:component this={modeIndicator.icon} size={12} strokeWidth={2} />
	107	+	</span>
	108	+	<span class="chip-text">{modeIndicator.label}</span>
	109	+	</div>
	110	+	{/if}
	111	+
	112	+	<!-- Panel Indicator -->
	113	+	<div class="status-chip panel-chip">
	114	+	<span class="chip-icon">
	115	+	{#if panelIcon}
	116	+	<svelte:component this={panelIcon} size={12} strokeWidth={2} />
	117	+	{/if}
	118	+	</span>
	119	+	<span class="chip-text">{panelLabel}</span>
	120	+	</div>
	121	+
	122	+	<!-- Loading Indicator -->
	123	+	{#if isLoading}
	124	+	<div class="status-chip loading-chip">
	125	+	<span class="loading-spinner"></span>
	126	+	<span class="chip-text">SYNC</span>
	127	+	</div>
	128	+	{/if}
	129	+	</div>
	130	+
	131	+	<!-- Center Section: Stats -->
	132	+	<div class="status-center">
	133	+	<div class="stats-group">
	134	+	<span class="stats-count" class:filtered={listStats.filtered}>
	135	+	{listStats.count}
	136	+	</span>
	137	+	<span class="stats-label">{listStats.label}</span>
	138	+	</div>
	139	+
	140	+	{#if positionInfo}
	141	+	<div class="position-group">
	142	+	<span class="position-current">{positionInfo.current}</span>
	143	+	<span class="position-sep">/</span>
	144	+	<span class="position-total">{positionInfo.total}</span>
	145	+	</div>
	146	+	{/if}
	147	+	</div>
	148	+
	149	+	<!-- Right Section: Quick Hints -->
	150	+	<div class="status-right">
	151	+	<div class="hint-item">
	152	+	<kbd>/</kbd>
	153	+	<span>cmd</span>
	154	+	</div>
	155	+	<div class="hint-item">
	156	+	<kbd>j</kbd><kbd>k</kbd>
	157	+	<span>nav</span>
	158	+	</div>
	159	+	<div class="hint-item">
	160	+	<kbd>?</kbd>
	161	+	<span>help</span>
	162	+	</div>
	163	+	</div>
	164	+	</footer>
	165	+
	166	+	<style>
	167	+	.status-bar {
	168	+	display: flex;
	169	+	align-items: center;
	170	+	justify-content: space-between;
	171	+	gap: 1rem;
	172	+	padding: 0.5rem 0.85rem;
	173	+	font-size: 0.68rem;
	174	+	font-family: 'JetBrains Mono NF', ui-monospace, monospace;
	175	+	letter-spacing: 0.05em;
	176	+	border-top: 1px solid var(--dynamic-border);
	177	+	background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
	178	+	color: var(--dynamic-muted);
	179	+	}
	180	+
	181	+	/* Sections */
	182	+	.status-left,
	183	+	.status-center,
	184	+	.status-right {
	185	+	display: flex;
	186	+	align-items: center;
	187	+	gap: 0.6rem;
	188	+	}
	189	+
	190	+	.status-left {
	191	+	flex: 1;
	192	+	justify-content: flex-start;
	193	+	}
	194	+
	195	+	.status-center {
	196	+	flex: 0 0 auto;
	197	+	gap: 1rem;
	198	+	}
	199	+
	200	+	.status-right {
	201	+	flex: 1;
	202	+	justify-content: flex-end;
	203	+	gap: 0.85rem;
	204	+	}
	205	+
	206	+	/* Status Chips */
	207	+	.status-chip {
	208	+	display: inline-flex;
	209	+	align-items: center;
	210	+	gap: 0.35rem;
	211	+	padding: 0.25rem 0.5rem;
	212	+	background: color-mix(in srgb, var(--dynamic-surface) 60%, transparent);
	213	+	border: 1px solid var(--dynamic-border);
	214	+	}
	215	+
	216	+	.chip-icon {
	217	+	display: flex;
	218	+	align-items: center;
	219	+	}
	220	+
	221	+	.chip-text {
	222	+	font-weight: 500;
	223	+	text-transform: uppercase;
	224	+	}
	225	+
	226	+	/* Mode chip colors */
	227	+	.mode-chip[data-color="accent"] {
	228	+	background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 15%, transparent);
	229	+	border-color: color-mix(in srgb, var(--dynamic-accent, #4ade80) 40%, var(--dynamic-border) 60%);
	230	+	color: var(--dynamic-accent, #4ade80);
	231	+	}
	232	+
	233	+	.mode-chip[data-color="warning"] {
	234	+	background: color-mix(in srgb, #fbbf24 15%, transparent);
	235	+	border-color: color-mix(in srgb, #fbbf24 40%, var(--dynamic-border) 60%);
	236	+	color: #fbbf24;
	237	+	}
	238	+
	239	+	.mode-chip[data-color="info"] {
	240	+	background: color-mix(in srgb, #60a5fa 15%, transparent);
	241	+	border-color: color-mix(in srgb, #60a5fa 40%, var(--dynamic-border) 60%);
	242	+	color: #60a5fa;
	243	+	}
	244	+
	245	+	/* Pending prefix indicator */
	246	+	.prefix-chip {
	247	+	animation: pulse-border 1s ease-in-out infinite;
	248	+	}
	249	+
	250	+	.prefix-chip[data-color="warning"] {
	251	+	background: color-mix(in srgb, #fbbf24 15%, transparent);
	252	+	border-color: color-mix(in srgb, #fbbf24 50%, var(--dynamic-border) 50%);
	253	+	color: #fbbf24;
	254	+	}
	255	+
	256	+	.prefix-key {
	257	+	font-size: 0.7rem;
	258	+	font-weight: 700;
	259	+	padding: 0.1rem 0.25rem;
	260	+	background: color-mix(in srgb, #fbbf24 25%, transparent);
	261	+	border: 1px solid color-mix(in srgb, #fbbf24 40%, var(--dynamic-border) 60%);
	262	+	font-family: 'JetBrains Mono NF', ui-monospace, monospace;
	263	+	}
	264	+
	265	+	.prefix-waiting {
	266	+	font-size: 0.65rem;
	267	+	opacity: 0.8;
	268	+	animation: blink 0.6s ease-in-out infinite;
	269	+	}
	270	+
	271	+	@keyframes pulse-border {
	272	+	0%, 100% { border-color: color-mix(in srgb, #fbbf24 50%, var(--dynamic-border) 50%); }
	273	+	50% { border-color: #fbbf24; }
	274	+	}
	275	+
	276	+	@keyframes blink {
	277	+	0%, 100% { opacity: 0.4; }
	278	+	50% { opacity: 1; }
	279	+	}
	280	+
	281	+	.panel-chip {
	282	+	color: var(--dynamic-text);
	283	+	}
	284	+
	285	+	.panel-chip .chip-icon {
	286	+	color: var(--dynamic-accent, #4ade80);
	287	+	}
	288	+
	289	+	/* Loading */
	290	+	.loading-chip {
	291	+	color: var(--dynamic-muted);
	292	+	}
	293	+
	294	+	.loading-spinner {
	295	+	width: 0.7rem;
	296	+	height: 0.7rem;
	297	+	border: 1.5px solid var(--dynamic-border);
	298	+	border-top-color: var(--dynamic-accent, #4ade80);
	299	+	border-radius: 50%;
	300	+	animation: spin 0.8s linear infinite;
	301	+	}
	302	+
	303	+	@keyframes spin {
	304	+	to { transform: rotate(360deg); }
	305	+	}
	306	+
	307	+	/* Stats */
	308	+	.stats-group {
	309	+	display: flex;
	310	+	align-items: baseline;
	311	+	gap: 0.35rem;
	312	+	}
	313	+
	314	+	.stats-count {
	315	+	font-weight: 600;
	316	+	color: var(--dynamic-text);
	317	+	font-variant-numeric: tabular-nums;
	318	+	}
	319	+
	320	+	.stats-count.filtered {
	321	+	color: var(--dynamic-accent, #4ade80);
	322	+	}
	323	+
	324	+	.stats-label {
	325	+	color: var(--dynamic-muted);
	326	+	}
	327	+
	328	+	.position-group {
	329	+	display: flex;
	330	+	align-items: center;
	331	+	gap: 0.15rem;
	332	+	padding: 0.2rem 0.45rem;
	333	+	background: var(--dynamic-bg);
	334	+	border: 1px solid var(--dynamic-border);
	335	+	font-variant-numeric: tabular-nums;
	336	+	}
	337	+
	338	+	.position-current {
	339	+	font-weight: 600;
	340	+	color: var(--dynamic-text);
	341	+	}
	342	+
	343	+	.position-sep {
	344	+	color: var(--dynamic-border);
	345	+	}
	346	+
	347	+	.position-total {
	348	+	color: var(--dynamic-muted);
	349	+	}
	350	+
	351	+	/* Hints */
	352	+	.hint-item {
	353	+	display: flex;
	354	+	align-items: center;
	355	+	gap: 0.25rem;
	356	+	color: var(--dynamic-muted);
	357	+	}
	358	+
	359	+	.hint-item kbd {
	360	+	padding: 0.1rem 0.3rem;
	361	+	font-size: 0.6rem;
	362	+	background: var(--dynamic-bg);
	363	+	border: 1px solid var(--dynamic-border);
	364	+	color: var(--dynamic-text);
	365	+	}
	366	+
	367	+	.hint-item span {
	368	+	font-size: 0.62rem;
	369	+	text-transform: uppercase;
	370	+	letter-spacing: 0.08em;
	371	+	}
	372	+
	373	+	/* Responsive */
	374	+	@media (max-width: 640px) {
	375	+	.status-bar {
	376	+	flex-wrap: wrap;
	377	+	gap: 0.5rem;
	378	+	}
	379	+
	380	+	.status-left,
	381	+	.status-right {
	382	+	flex: 0 0 auto;
	383	+	}
	384	+
	385	+	.status-center {
	386	+	order: -1;
	387	+	width: 100%;
	388	+	justify-content: center;
	389	+	padding-bottom: 0.35rem;
	390	+	border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);
	391	+	}
	392	+
	393	+	.hint-item span {
	394	+	display: none;
	395	+	}
	396	+	}
	397	+
	398	+	@media (max-width: 480px) {
	399	+	.status-right {
	400	+	display: none;
	401	+	}
	402	+
	403	+	.status-left {
	404	+	flex: 1;
	405	+	}
	406	+	}
	407	+	</style>

A gui/src/pages/homepage/shell/index.ts +5 -0

@@ -0,0 +1,5 @@
	1	+	// Shell Components - Industrial Terminal Layout
	2	+	export { default as HomepageShell } from './HomepageShell.svelte';
	3	+	export { default as CommandPalette } from './CommandPalette.svelte';
	4	+	export { default as StatusBar } from './StatusBar.svelte';
	5	+	export { default as KeyboardHints } from './KeyboardHints.svelte';

A gui/src/pages/homepage/state.svelte.ts +502 -0

@@ -0,0 +1,502 @@
	1	+	// ═══════════════════════════════════════════════════════════════════════════════
	2	+	// Homepage Global State (Svelte 5 Runes)
	3	+	// Single module-level $state with exported store object
	4	+	// ═══════════════════════════════════════════════════════════════════════════════
	5	+
	6	+	import type {
	7	+	HistoryEntry,
	8	+	TimelineGroup,
	9	+	DomainStat,
	10	+	DailyVisitCount,
	11	+	HourlyDistribution,
	12	+	Favorite,
	13	+	Folder,
	14	+	Tag,
	15	+	Analytics,
	16	+	PanelType,
	17	+	HistoryCleanupRange,
	18	+	} from './types';
	19	+
	20	+	// ═══════════════════════════════════════════════════════════════════════════════
	21	+	// HISTORY STATE
	22	+	// ═══════════════════════════════════════════════════════════════════════════════
	23	+
	24	+	let history = $state<HistoryEntry[]>([]);
	25	+	let timeline = $state<TimelineGroup[]>([]);
	26	+	let historyLoading = $state(true);
	27	+	let historyOffset = $state(0);
	28	+	let hasMoreHistory = $state(true);
	29	+	let historySearchQuery = $state('');
	30	+	let historySearchResults = $state<HistoryEntry[]>([]);
	31	+	let historySearching = $state(false);
	32	+
	33	+	// ═══════════════════════════════════════════════════════════════════════════════
	34	+	// FAVORITES STATE
	35	+	// ═══════════════════════════════════════════════════════════════════════════════
	36	+
	37	+	let favorites = $state<Favorite[]>([]);
	38	+	let folders = $state<Folder[]>([]);
	39	+	let tags = $state<Tag[]>([]);
	40	+	let favoritesLoading = $state(true);
	41	+	let selectedFolderId = $state<number \| null>(null);
	42	+	let selectedTagIds = $state<number[]>([]);
	43	+	let editingFavorite = $state<Favorite \| null>(null);
	44	+
	45	+	// ═══════════════════════════════════════════════════════════════════════════════
	46	+	// ANALYTICS STATE
	47	+	// ═══════════════════════════════════════════════════════════════════════════════
	48	+
	49	+	let analytics = $state<Analytics \| null>(null);
	50	+	let analyticsLoading = $state(true);
	51	+	let domainStats = $state<DomainStat[]>([]);
	52	+	let dailyVisits = $state<DailyVisitCount[]>([]);
	53	+	let hourlyDistribution = $state<HourlyDistribution[]>([]);
	54	+
	55	+	// ═══════════════════════════════════════════════════════════════════════════════
	56	+	// UI STATE
	57	+	// ═══════════════════════════════════════════════════════════════════════════════
	58	+
	59	+	let activePanel = $state<PanelType>('history');
	60	+	let commandPaletteOpen = $state(false);
	61	+	let commandPaletteQuery = $state('');
	62	+	let focusedIndex = $state(-1); // -1 means no item focused (focus on search input)
	63	+	let confirmModalOpen = $state(false);
	64	+	let confirmModalMessage = $state('');
	65	+	let confirmModalAction = $state<(() => void) \| null>(null);
	66	+	let cleanupModalOpen = $state(false);
	67	+	let cleanupRange = $state<HistoryCleanupRange>('hour');
	68	+	let pendingKeyPrefix = $state<string \| null>(null);
	69	+
	70	+	// ═══════════════════════════════════════════════════════════════════════════════
	71	+	// HELPER FUNCTIONS
	72	+	// ═══════════════════════════════════════════════════════════════════════════════
	73	+
	74	+	function groupHistoryByDate(entries: HistoryEntry[]): TimelineGroup[] {
	75	+	const groups = new Map<string, HistoryEntry[]>();
	76	+	const today = new Date();
	77	+	today.setHours(0, 0, 0, 0);
	78	+	const yesterday = new Date(today);
	79	+	yesterday.setDate(yesterday.getDate() - 1);
	80	+
	81	+	for (const entry of entries) {
	82	+	const date = new Date(entry.last_visited);
	83	+	const dateKey = date.toISOString().split('T')[0] ?? '';
	84	+	if (!groups.has(dateKey)) {
	85	+	groups.set(dateKey, []);
	86	+	}
	87	+	groups.get(dateKey)!.push(entry);
	88	+	}
	89	+
	90	+	const result: TimelineGroup[] = [];
	91	+	for (const [dateKey, items] of groups) {
	92	+	const date = new Date(dateKey);
	93	+	let label: string;
	94	+
	95	+	if (date >= today) {
	96	+	label = 'Today';
	97	+	} else if (date >= yesterday) {
	98	+	label = 'Yesterday';
	99	+	} else {
	100	+	label = date.toLocaleDateString(undefined, {
	101	+	weekday: 'short',
	102	+	month: 'short',
	103	+	day: 'numeric',
	104	+	});
	105	+	}
	106	+
	107	+	result.push({ date: dateKey, label, entries: items });
	108	+	}
	109	+
	110	+	return result.sort((a, b) => b.date.localeCompare(a.date));
	111	+	}
	112	+
	113	+	// ═══════════════════════════════════════════════════════════════════════════════
	114	+	// EXPORTED STORE
	115	+	// ═══════════════════════════════════════════════════════════════════════════════
	116	+
	117	+	export const homepageState = {
	118	+	// ─────────────────────────────────────────────────────────────────────────────
	119	+	// History Getters
	120	+	// ─────────────────────────────────────────────────────────────────────────────
	121	+	get history() { return history; },
	122	+	get timeline() { return timeline; },
	123	+	get historyLoading() { return historyLoading; },
	124	+	get historyOffset() { return historyOffset; },
	125	+	get hasMoreHistory() { return hasMoreHistory; },
	126	+	get historySearchQuery() { return historySearchQuery; },
	127	+	get historySearchResults() { return historySearchResults; },
	128	+	get historySearching() { return historySearching; },
	129	+
	130	+	// ─────────────────────────────────────────────────────────────────────────────
	131	+	// Favorites Getters
	132	+	// ─────────────────────────────────────────────────────────────────────────────
	133	+	get favorites() { return favorites; },
	134	+	get folders() { return folders; },
	135	+	get tags() { return tags; },
	136	+	get favoritesLoading() { return favoritesLoading; },
	137	+	get selectedFolderId() { return selectedFolderId; },
	138	+	get selectedTagIds() { return selectedTagIds; },
	139	+	get editingFavorite() { return editingFavorite; },
	140	+
	141	+	// ─────────────────────────────────────────────────────────────────────────────
	142	+	// Analytics Getters
	143	+	// ─────────────────────────────────────────────────────────────────────────────
	144	+	get analytics() { return analytics; },
	145	+	get analyticsLoading() { return analyticsLoading; },
	146	+	get domainStats() { return domainStats; },
	147	+	get dailyVisits() { return dailyVisits; },
	148	+	get hourlyDistribution() { return hourlyDistribution; },
	149	+
	150	+	// ─────────────────────────────────────────────────────────────────────────────
	151	+	// UI Getters
	152	+	// ─────────────────────────────────────────────────────────────────────────────
	153	+	get activePanel() { return activePanel; },
	154	+	get commandPaletteOpen() { return commandPaletteOpen; },
	155	+	get commandPaletteQuery() { return commandPaletteQuery; },
	156	+	get focusedIndex() { return focusedIndex; },
	157	+	get confirmModalOpen() { return confirmModalOpen; },
	158	+	get confirmModalMessage() { return confirmModalMessage; },
	159	+	get cleanupModalOpen() { return cleanupModalOpen; },
	160	+	get cleanupRange() { return cleanupRange; },
	161	+	get pendingKeyPrefix() { return pendingKeyPrefix; },
	162	+
	163	+	// ─────────────────────────────────────────────────────────────────────────────
	164	+	// Computed Properties
	165	+	// ─────────────────────────────────────────────────────────────────────────────
	166	+	get filteredFavorites(): Favorite[] {
	167	+	let result = favorites;
	168	+
	169	+	// Filter by folder
	170	+	if (selectedFolderId !== null) {
	171	+	result = result.filter(f => f.folder_id === selectedFolderId);
	172	+	}
	173	+
	174	+	// Filter by tags
	175	+	if (selectedTagIds.length > 0) {
	176	+	result = result.filter(f =>
	177	+	f.tags?.some(t => selectedTagIds.includes(t.id))
	178	+	);
	179	+	}
	180	+
	181	+	return result;
	182	+	},
	183	+
	184	+	get currentList(): HistoryEntry[] \| Favorite[] {
	185	+	switch (activePanel) {
	186	+	case 'history':
	187	+	return historySearchQuery ? historySearchResults : history;
	188	+	case 'favorites':
	189	+	return this.filteredFavorites;
	190	+	default:
	191	+	return [];
	192	+	}
	193	+	},
	194	+
	195	+	get currentListLength(): number {
	196	+	return this.currentList.length;
	197	+	},
	198	+
	199	+	// ─────────────────────────────────────────────────────────────────────────────
	200	+	// History Actions
	201	+	// ─────────────────────────────────────────────────────────────────────────────
	202	+	setHistory(items: HistoryEntry[]) {
	203	+	history = items;
	204	+	timeline = groupHistoryByDate(items);
	205	+	},
	206	+
	207	+	appendHistory(items: HistoryEntry[]) {
	208	+	history = [...history, ...items];
	209	+	timeline = groupHistoryByDate(history);
	210	+	},
	211	+
	212	+	setHistoryLoading(loading: boolean) {
	213	+	historyLoading = loading;
	214	+	},
	215	+
	216	+	setHistoryOffset(offset: number) {
	217	+	historyOffset = offset;
	218	+	},
	219	+
	220	+	setHasMoreHistory(hasMore: boolean) {
	221	+	hasMoreHistory = hasMore;
	222	+	},
	223	+
	224	+	deleteHistoryEntry(id: number) {
	225	+	history = history.filter(h => h.id !== id);
	226	+	timeline = groupHistoryByDate(history);
	227	+	historySearchResults = historySearchResults.filter(h => h.id !== id);
	228	+	},
	229	+
	230	+	clearHistory() {
	231	+	history = [];
	232	+	timeline = [];
	233	+	historySearchResults = [];
	234	+	historyOffset = 0;
	235	+	hasMoreHistory = true;
	236	+	},
	237	+
	238	+	setHistorySearchQuery(q: string) {
	239	+	historySearchQuery = q;
	240	+	if (!q) {
	241	+	historySearchResults = [];
	242	+	}
	243	+	},
	244	+
	245	+	setHistorySearchResults(results: HistoryEntry[]) {
	246	+	historySearchResults = results;
	247	+	},
	248	+
	249	+	setHistorySearching(searching: boolean) {
	250	+	historySearching = searching;
	251	+	},
	252	+
	253	+	// ─────────────────────────────────────────────────────────────────────────────
	254	+	// Favorites Actions
	255	+	// ─────────────────────────────────────────────────────────────────────────────
	256	+	setFavorites(items: Favorite[]) {
	257	+	favorites = items;
	258	+	},
	259	+
	260	+	setFolders(items: Folder[]) {
	261	+	folders = items;
	262	+	},
	263	+
	264	+	setTags(items: Tag[]) {
	265	+	tags = items;
	266	+	},
	267	+
	268	+	setFavoritesLoading(loading: boolean) {
	269	+	favoritesLoading = loading;
	270	+	},
	271	+
	272	+	selectFolder(id: number \| null) {
	273	+	selectedFolderId = id;
	274	+	focusedIndex = 0;
	275	+	},
	276	+
	277	+	toggleTag(id: number) {
	278	+	if (selectedTagIds.includes(id)) {
	279	+	selectedTagIds = selectedTagIds.filter(t => t !== id);
	280	+	} else {
	281	+	selectedTagIds = [...selectedTagIds, id];
	282	+	}
	283	+	focusedIndex = 0;
	284	+	},
	285	+
	286	+	clearTagSelection() {
	287	+	selectedTagIds = [];
	288	+	focusedIndex = 0;
	289	+	},
	290	+
	291	+	setEditingFavorite(fav: Favorite \| null) {
	292	+	editingFavorite = fav;
	293	+	},
	294	+
	295	+	updateFavorite(updated: Favorite) {
	296	+	favorites = favorites.map(f => f.id === updated.id ? updated : f);
	297	+	},
	298	+
	299	+	deleteFavorite(id: number) {
	300	+	favorites = favorites.filter(f => f.id !== id);
	301	+	},
	302	+
	303	+	addFolder(folder: Folder) {
	304	+	folders = [...folders, folder];
	305	+	},
	306	+
	307	+	updateFolder(updated: Folder) {
	308	+	folders = folders.map(f => f.id === updated.id ? updated : f);
	309	+	},
	310	+
	311	+	deleteFolder(id: number) {
	312	+	folders = folders.filter(f => f.id !== id);
	313	+	// Clear folder selection if deleted folder was selected
	314	+	if (selectedFolderId === id) {
	315	+	selectedFolderId = null;
	316	+	}
	317	+	// Update favorites that were in this folder
	318	+	favorites = favorites.map(f =>
	319	+	f.folder_id === id ? { ...f, folder_id: null } : f
	320	+	);
	321	+	},
	322	+
	323	+	addTag(tag: Tag) {
	324	+	tags = [...tags, tag];
	325	+	},
	326	+
	327	+	updateTag(updated: Tag) {
	328	+	tags = tags.map(t => t.id === updated.id ? updated : t);
	329	+	},
	330	+
	331	+	deleteTag(id: number) {
	332	+	tags = tags.filter(t => t.id !== id);
	333	+	selectedTagIds = selectedTagIds.filter(t => t !== id);
	334	+	// Remove tag from all favorites
	335	+	favorites = favorites.map(f => ({
	336	+	...f,
	337	+	tags: f.tags?.filter(t => t.id !== id),
	338	+	}));
	339	+	},
	340	+
	341	+	// ─────────────────────────────────────────────────────────────────────────────
	342	+	// Analytics Actions
	343	+	// ─────────────────────────────────────────────────────────────────────────────
	344	+	setAnalytics(data: Analytics \| null) {
	345	+	analytics = data;
	346	+	if (data) {
	347	+	domainStats = data.domain_stats;
	348	+	dailyVisits = data.daily_visits;
	349	+	hourlyDistribution = data.hourly_distribution;
	350	+	}
	351	+	},
	352	+
	353	+	setAnalyticsLoading(loading: boolean) {
	354	+	analyticsLoading = loading;
	355	+	},
	356	+
	357	+	setDomainStats(stats: DomainStat[]) {
	358	+	domainStats = stats;
	359	+	},
	360	+
	361	+	// ─────────────────────────────────────────────────────────────────────────────
	362	+	// UI Actions
	363	+	// ─────────────────────────────────────────────────────────────────────────────
	364	+	setActivePanel(panel: PanelType) {
	365	+	activePanel = panel;
	366	+	focusedIndex = -1; // Clear focus, let search input be focused
	367	+	// Clear search when switching panels
	368	+	historySearchQuery = '';
	369	+	historySearchResults = [];
	370	+	},
	371	+
	372	+	openCommandPalette() {
	373	+	commandPaletteOpen = true;
	374	+	commandPaletteQuery = '';
	375	+	},
	376	+
	377	+	closeCommandPalette() {
	378	+	commandPaletteOpen = false;
	379	+	commandPaletteQuery = '';
	380	+	},
	381	+
	382	+	setCommandPaletteQuery(q: string) {
	383	+	commandPaletteQuery = q;
	384	+	},
	385	+
	386	+	setFocusedIndex(i: number) {
	387	+	focusedIndex = Math.max(-1, i);
	388	+	},
	389	+
	390	+	focusNext() {
	391	+	const maxIndex = this.currentListLength - 1;
	392	+	if (maxIndex < 0) return;
	393	+	// If unfocused (-1), go to first item
	394	+	if (focusedIndex === -1) {
	395	+	focusedIndex = 0;
	396	+	} else {
	397	+	focusedIndex = Math.min(focusedIndex + 1, maxIndex);
	398	+	}
	399	+	},
	400	+
	401	+	focusPrev() {
	402	+	// If at first item or unfocused, stay at -1 (return to search)
	403	+	if (focusedIndex <= 0) {
	404	+	focusedIndex = -1;
	405	+	} else {
	406	+	focusedIndex = focusedIndex - 1;
	407	+	}
	408	+	},
	409	+
	410	+	focusFirst() {
	411	+	focusedIndex = 0;
	412	+	},
	413	+
	414	+	focusLast() {
	415	+	focusedIndex = Math.max(0, this.currentListLength - 1);
	416	+	},
	417	+
	418	+	clearFocus() {
	419	+	focusedIndex = -1;
	420	+	},
	421	+
	422	+	// Confirmation modal
	423	+	showConfirm(message: string, action: () => void) {
	424	+	confirmModalMessage = message;
	425	+	confirmModalAction = action;
	426	+	confirmModalOpen = true;
	427	+	},
	428	+
	429	+	confirmAction() {
	430	+	confirmModalAction?.();
	431	+	confirmModalOpen = false;
	432	+	confirmModalAction = null;
	433	+	confirmModalMessage = '';
	434	+	},
	435	+
	436	+	cancelConfirm() {
	437	+	confirmModalOpen = false;
	438	+	confirmModalAction = null;
	439	+	confirmModalMessage = '';
	440	+	},
	441	+
	442	+	// Cleanup modal
	443	+	openCleanupModal() {
	444	+	cleanupModalOpen = true;
	445	+	cleanupRange = 'hour';
	446	+	},
	447	+
	448	+	closeCleanupModal() {
	449	+	cleanupModalOpen = false;
	450	+	},
	451	+
	452	+	setCleanupRange(range: HistoryCleanupRange) {
	453	+	cleanupRange = range;
	454	+	},
	455	+
	456	+	// Keyboard prefix state (for 'g' and 'D' prefix indicators)
	457	+	setPendingKeyPrefix(prefix: string \| null) {
	458	+	pendingKeyPrefix = prefix;
	459	+	},
	460	+
	461	+	// ─────────────────────────────────────────────────────────────────────────────
	462	+	// Reset
	463	+	// ─────────────────────────────────────────────────────────────────────────────
	464	+	reset() {
	465	+	// History
	466	+	history = [];
	467	+	timeline = [];
	468	+	historyLoading = true;
	469	+	historyOffset = 0;
	470	+	hasMoreHistory = true;
	471	+	historySearchQuery = '';
	472	+	historySearchResults = [];
	473	+	historySearching = false;
	474	+
	475	+	// Favorites
	476	+	favorites = [];
	477	+	folders = [];
	478	+	tags = [];
	479	+	favoritesLoading = true;
	480	+	selectedFolderId = null;
	481	+	selectedTagIds = [];
	482	+	editingFavorite = null;
	483	+
	484	+	// Analytics
	485	+	analytics = null;
	486	+	analyticsLoading = true;
	487	+	domainStats = [];
	488	+	dailyVisits = [];
	489	+	hourlyDistribution = [];
	490	+
	491	+	// UI
	492	+	activePanel = 'history';
	493	+	commandPaletteOpen = false;
	494	+	commandPaletteQuery = '';
	495	+	focusedIndex = -1;
	496	+	confirmModalOpen = false;
	497	+	confirmModalMessage = '';
	498	+	confirmModalAction = null;
	499	+	cleanupModalOpen = false;
	500	+	cleanupRange = 'hour';
	501	+	},
	502	+	};

A gui/src/pages/homepage/types.ts +227 -0

@@ -0,0 +1,227 @@
	1	+	// ═══════════════════════════════════════════════════════════════════════════════
	2	+	// Homepage TypeScript Types
	3	+	// Mirrors Go models from internal/db/models.go and related query files
	4	+	// ═══════════════════════════════════════════════════════════════════════════════
	5	+
	6	+	// ─────────────────────────────────────────────────────────────────────────────
	7	+	// History Types
	8	+	// ─────────────────────────────────────────────────────────────────────────────
	9	+
	10	+	export interface HistoryEntry {
	11	+	id: number;
	12	+	url: string;
	13	+	title: string \| null;
	14	+	favicon_url: string \| null;
	15	+	visit_count: number;
	16	+	last_visited: string;
	17	+	created_at: string;
	18	+	}
	19	+
	20	+	export interface TimelineGroup {
	21	+	date: string; // YYYY-MM-DD
	22	+	label: string; // "Today", "Yesterday", "Dec 5", etc.
	23	+	entries: HistoryEntry[];
	24	+	}
	25	+
	26	+	export interface HistoryStats {
	27	+	total_entries: number;
	28	+	total_visits: number;
	29	+	unique_days: number;
	30	+	}
	31	+
	32	+	export interface DomainStat {
	33	+	domain: string;
	34	+	page_count: number;
	35	+	total_visits: number;
	36	+	last_visit: string;
	37	+	}
	38	+
	39	+	export interface DailyVisitCount {
	40	+	day: string;
	41	+	entries: number;
	42	+	visits: number;
	43	+	}
	44	+
	45	+	export interface HourlyDistribution {
	46	+	hour: number;
	47	+	visit_count: number;
	48	+	}
	49	+
	50	+	// ─────────────────────────────────────────────────────────────────────────────
	51	+	// Favorites Types
	52	+	// ─────────────────────────────────────────────────────────────────────────────
	53	+
	54	+	export interface Favorite {
	55	+	id: number;
	56	+	url: string;
	57	+	title: string \| null;
	58	+	favicon_url: string \| null;
	59	+	position: number;
	60	+	created_at: string;
	61	+	updated_at: string;
	62	+	folder_id: number \| null;
	63	+	shortcut_key: number \| null; // 1-9
	64	+	tags?: Tag[]; // Populated via join
	65	+	}
	66	+
	67	+	export interface Folder {
	68	+	id: number;
	69	+	name: string;
	70	+	icon: string \| null;
	71	+	position: number;
	72	+	created_at: string;
	73	+	}
	74	+
	75	+	export interface Tag {
	76	+	id: number;
	77	+	name: string;
	78	+	color: string; // Hex color like #6b7280
	79	+	created_at: string;
	80	+	}
	81	+
	82	+	export interface TagAssignment {
	83	+	favorite_id: number;
	84	+	tag_id: number;
	85	+	}
	86	+
	87	+	// ─────────────────────────────────────────────────────────────────────────────
	88	+	// Analytics Types
	89	+	// ─────────────────────────────────────────────────────────────────────────────
	90	+
	91	+	export interface Analytics {
	92	+	stats: HistoryStats;
	93	+	domain_stats: DomainStat[];
	94	+	daily_visits: DailyVisitCount[];
	95	+	hourly_distribution: HourlyDistribution[];
	96	+	}
	97	+
	98	+	// ─────────────────────────────────────────────────────────────────────────────
	99	+	// UI State Types
	100	+	// ─────────────────────────────────────────────────────────────────────────────
	101	+
	102	+	export type PanelType = 'history' \| 'favorites' \| 'analytics';
	103	+
	104	+	export type HistoryCleanupRange = 'hour' \| 'day' \| 'week' \| 'month' \| 'all';
	105	+
	106	+	export interface CommandPaletteItem {
	107	+	id: string;
	108	+	label: string;
	109	+	description?: string;
	110	+	icon?: import('svelte').Component \| string;
	111	+	action: () => void;
	112	+	shortcut?: string;
	113	+	}
	114	+
	115	+	export interface KeyboardShortcut {
	116	+	key: string;
	117	+	description: string;
	118	+	action: () => void;
	119	+	context?: 'global' \| 'history' \| 'favorites' \| 'command-palette';
	120	+	}
	121	+
	122	+	// ─────────────────────────────────────────────────────────────────────────────
	123	+	// Message Types (WebKit Bridge)
	124	+	// ─────────────────────────────────────────────────────────────────────────────
	125	+
	126	+	export type MessageType =
	127	+	// Folders
	128	+	\| 'folder_list'
	129	+	\| 'folder_create'
	130	+	\| 'folder_update'
	131	+	\| 'folder_delete'
	132	+	// Tags
	133	+	\| 'tag_list'
	134	+	\| 'tag_create'
	135	+	\| 'tag_update'
	136	+	\| 'tag_delete'
	137	+	\| 'tag_assign'
	138	+	\| 'tag_remove'
	139	+	// History
	140	+	\| 'history_timeline'
	141	+	\| 'history_search_fts'
	142	+	\| 'history_analytics'
	143	+	\| 'history_domain_stats'
	144	+	\| 'history_delete_entry'
	145	+	\| 'history_delete_range'
	146	+	\| 'history_clear_all'
	147	+	\| 'history_delete_domain'
	148	+	// Favorites
	149	+	\| 'favorite_list'
	150	+	\| 'favorite_set_shortcut'
	151	+	\| 'favorite_get_by_shortcut'
	152	+	\| 'favorite_set_folder';
	153	+
	154	+	export interface Message<T = unknown> {
	155	+	type: MessageType;
	156	+	requestId?: string;
	157	+	payload?: T;
	158	+	}
	159	+
	160	+	export interface MessageResponse<T = unknown> {
	161	+	success: boolean;
	162	+	data?: T;
	163	+	error?: string;
	164	+	}
	165	+
	166	+	// ─────────────────────────────────────────────────────────────────────────────
	167	+	// Request/Response Payloads
	168	+	// ─────────────────────────────────────────────────────────────────────────────
	169	+
	170	+	// History
	171	+	export interface HistoryTimelineRequest {
	172	+	limit?: number;
	173	+	offset?: number;
	174	+	}
	175	+
	176	+	export interface HistorySearchRequest {
	177	+	query: string;
	178	+	limit?: number;
	179	+	}
	180	+
	181	+	export interface HistoryDeleteRangeRequest {
	182	+	range: HistoryCleanupRange;
	183	+	}
	184	+
	185	+	export interface HistoryDeleteDomainRequest {
	186	+	domain: string;
	187	+	}
	188	+
	189	+	// Folders
	190	+	export interface FolderCreateRequest {
	191	+	name: string;
	192	+	icon?: string;
	193	+	}
	194	+
	195	+	export interface FolderUpdateRequest {
	196	+	id: number;
	197	+	name: string;
	198	+	icon?: string;
	199	+	}
	200	+
	201	+	// Tags
	202	+	export interface TagCreateRequest {
	203	+	name: string;
	204	+	color?: string;
	205	+	}
	206	+
	207	+	export interface TagUpdateRequest {
	208	+	id: number;
	209	+	name?: string;
	210	+	color?: string;
	211	+	}
	212	+
	213	+	export interface TagAssignRequest {
	214	+	favorite_id: number;
	215	+	tag_id: number;
	216	+	}
	217	+
	218	+	// Favorites
	219	+	export interface FavoriteShortcutRequest {
	220	+	favorite_id: number;
	221	+	shortcut_key: number; // 1-9
	222	+	}
	223	+
	224	+	export interface FavoriteFolderRequest {
	225	+	favorite_id: number;
	226	+	folder_id: number \| null;
	227	+	}

A gui/src/styles/design-tokens.css +170 -0

@@ -0,0 +1,170 @@
	1	+	/*
	2	+	* Design Tokens - shadcn-svelte inspired
	3	+	*
	4	+	* Uses OKLCH color space for perceptually uniform colors.
	5	+	* These tokens define the visual language of the browser UI.
	6	+	*
	7	+	* Aesthetic: Industrial Terminal / Brutalist Minimal
	8	+	* - Sharp corners (--radius: 0)
	9	+	* - High contrast
	10	+	* - Vibrant green primary accent
	11	+	* - Cyan secondary accent
	12	+	*/
	13	+
	14	+	:root {
	15	+	/* Radius - sharp terminal aesthetic */
	16	+	--radius: 0;
	17	+	--radius-sm: 0;
	18	+	--radius-md: 0;
	19	+	--radius-lg: 0;
	20	+	--radius-xl: 0;
	21	+
	22	+	/* ═══════════════════════════════════════════════════════════════
	23	+	* LIGHT THEME
	24	+	* ═══════════════════════════════════════════════════════════════ */
	25	+
	26	+	/* Core surfaces */
	27	+	--background: oklch(0.985 0.002 260);
	28	+	--foreground: oklch(0.145 0.02 260);
	29	+
	30	+	/* Card/Panel surfaces */
	31	+	--card: oklch(0.965 0.004 260);
	32	+	--card-foreground: oklch(0.145 0.02 260);
	33	+
	34	+	/* Popover/Dropdown */
	35	+	--popover: oklch(0.985 0.002 260);
	36	+	--popover-foreground: oklch(0.145 0.02 260);
	37	+
	38	+	/* Primary - Vibrant Green */
	39	+	--primary: oklch(0.55 0.20 145);
	40	+	--primary-foreground: oklch(0.985 0 0);
	41	+
	42	+	/* Secondary - Muted surfaces */
	43	+	--secondary: oklch(0.94 0.008 260);
	44	+	--secondary-foreground: oklch(0.20 0.02 260);
	45	+
	46	+	/* Muted - Subdued content */
	47	+	--muted: oklch(0.94 0.008 260);
	48	+	--muted-foreground: oklch(0.48 0.02 260);
	49	+
	50	+	/* Accent - Cyan for info/highlights */
	51	+	--accent: oklch(0.58 0.14 200);
	52	+	--accent-foreground: oklch(0.145 0.02 260);
	53	+
	54	+	/* Destructive - Red for danger */
	55	+	--destructive: oklch(0.55 0.22 25);
	56	+	--destructive-foreground: oklch(0.985 0 0);
	57	+
	58	+	/* Borders & Inputs */
	59	+	--border: oklch(0.88 0.008 260);
	60	+	--input: oklch(0.88 0.008 260);
	61	+	--ring: oklch(0.55 0.20 145);
	62	+
	63	+	/* Chart colors for analytics */
	64	+	--chart-1: oklch(0.58 0.18 145); /* Green */
	65	+	--chart-2: oklch(0.56 0.14 200); /* Cyan */
	66	+	--chart-3: oklch(0.66 0.15 70); /* Amber */
	67	+	--chart-4: oklch(0.58 0.18 300); /* Purple */
	68	+	--chart-5: oklch(0.60 0.18 25); /* Red-orange */
	69	+
	70	+	/* Sidebar (if used) */
	71	+	--sidebar: oklch(0.975 0.002 260);
	72	+	--sidebar-foreground: oklch(0.145 0.02 260);
	73	+	--sidebar-primary: oklch(0.55 0.20 145);
	74	+	--sidebar-primary-foreground: oklch(0.985 0 0);
	75	+	--sidebar-accent: oklch(0.94 0.008 260);
	76	+	--sidebar-accent-foreground: oklch(0.20 0.02 260);
	77	+	--sidebar-border: oklch(0.88 0.008 260);
	78	+	--sidebar-ring: oklch(0.55 0.20 145);
	79	+	}
	80	+
	81	+	.dark {
	82	+	/* ═══════════════════════════════════════════════════════════════
	83	+	* DARK THEME - High Contrast
	84	+	* ═══════════════════════════════════════════════════════════════ */
	85	+
	86	+	/* Core surfaces - true black for maximum contrast */
	87	+	--background: oklch(0.09 0.005 260);
	88	+	--foreground: oklch(0.97 0 0);
	89	+
	90	+	/* Card/Panel surfaces - slightly elevated */
	91	+	--card: oklch(0.14 0.008 260);
	92	+	--card-foreground: oklch(0.97 0 0);
	93	+
	94	+	/* Popover/Dropdown */
	95	+	--popover: oklch(0.16 0.008 260);
	96	+	--popover-foreground: oklch(0.97 0 0);
	97	+
	98	+	/* Primary - Bright Green */
	99	+	--primary: oklch(0.75 0.19 145);
	100	+	--primary-foreground: oklch(0.12 0.02 145);
	101	+
	102	+	/* Secondary - Elevated surfaces */
	103	+	--secondary: oklch(0.20 0.008 260);
	104	+	--secondary-foreground: oklch(0.97 0 0);
	105	+
	106	+	/* Muted - More visible subdued content */
	107	+	--muted: oklch(0.22 0.008 260);
	108	+	--muted-foreground: oklch(0.70 0.01 260);
	109	+
	110	+	/* Accent - Cyan for info/highlights */
	111	+	--accent: oklch(0.68 0.14 200);
	112	+	--accent-foreground: oklch(0.97 0 0);
	113	+
	114	+	/* Destructive - Red for danger */
	115	+	--destructive: oklch(0.65 0.20 25);
	116	+	--destructive-foreground: oklch(0.97 0 0);
	117	+
	118	+	/* Borders & Inputs - more visible */
	119	+	--border: oklch(0.35 0.01 260);
	120	+	--input: oklch(0.35 0.01 260);
	121	+	--ring: oklch(0.75 0.19 145);
	122	+
	123	+	/* Chart colors for analytics - brighter for dark bg */
	124	+	--chart-1: oklch(0.72 0.18 145); /* Green */
	125	+	--chart-2: oklch(0.68 0.14 200); /* Cyan */
	126	+	--chart-3: oklch(0.76 0.16 70); /* Amber */
	127	+	--chart-4: oklch(0.66 0.18 300); /* Purple */
	128	+	--chart-5: oklch(0.68 0.18 25); /* Red-orange */
	129	+
	130	+	/* Sidebar (if used) */
	131	+	--sidebar: oklch(0.12 0.008 260);
	132	+	--sidebar-foreground: oklch(0.97 0 0);
	133	+	--sidebar-primary: oklch(0.75 0.19 145);
	134	+	--sidebar-primary-foreground: oklch(0.12 0.02 145);
	135	+	--sidebar-accent: oklch(0.20 0.008 260);
	136	+	--sidebar-accent-foreground: oklch(0.97 0 0);
	137	+	--sidebar-border: oklch(0.35 0.01 260);
	138	+	--sidebar-ring: oklch(0.75 0.19 145);
	139	+	}
	140	+
	141	+	/* ═══════════════════════════════════════════════════════════════
	142	+	* TAILWIND THEME BRIDGE
	143	+	* Maps design tokens to Tailwind's color system
	144	+	* ═══════════════════════════════════════════════════════════════ */
	145	+	@theme inline {
	146	+	--color-background: var(--background);
	147	+	--color-foreground: var(--foreground);
	148	+	--color-card: var(--card);
	149	+	--color-card-foreground: var(--card-foreground);
	150	+	--color-popover: var(--popover);
	151	+	--color-popover-foreground: var(--popover-foreground);
	152	+	--color-primary: var(--primary);
	153	+	--color-primary-foreground: var(--primary-foreground);
	154	+	--color-secondary: var(--secondary);
	155	+	--color-secondary-foreground: var(--secondary-foreground);
	156	+	--color-muted: var(--muted);
	157	+	--color-muted-foreground: var(--muted-foreground);
	158	+	--color-accent: var(--accent);
	159	+	--color-accent-foreground: var(--accent-foreground);
	160	+	--color-destructive: var(--destructive);
	161	+	--color-destructive-foreground: var(--destructive-foreground);
	162	+	--color-border: var(--border);
	163	+	--color-input: var(--input);
	164	+	--color-ring: var(--ring);
	165	+	--color-chart-1: var(--chart-1);
	166	+	--color-chart-2: var(--chart-2);
	167	+	--color-chart-3: var(--chart-3);
	168	+	--color-chart-4: var(--chart-4);
	169	+	--color-chart-5: var(--chart-5);
	170	+	}

M gui/src/styles/tailwind.css +72 -8

@@ -1,14 +1,78 @@
	1	+	@import "./design-tokens.css";
1	2		@import "tailwindcss";
2	3
3		-	/* Dynamic theme switching via CSS variables */
	4	+	/* Inter - Sans-serif for UI text */
	5	+	@font-face {
	6	+	font-family: "Inter";
	7	+	src: url("dumb://app/fonts/Inter-Regular.woff2") format("woff2");
	8	+	font-weight: 400;
	9	+	font-style: normal;
	10	+	font-display: swap;
	11	+	}
	12	+
	13	+	@font-face {
	14	+	font-family: "Inter";
	15	+	src: url("dumb://app/fonts/Inter-Medium.woff2") format("woff2");
	16	+	font-weight: 500;
	17	+	font-style: normal;
	18	+	font-display: swap;
	19	+	}
	20	+
	21	+	@font-face {
	22	+	font-family: "Inter";
	23	+	src: url("dumb://app/fonts/Inter-Bold.woff2") format("woff2");
	24	+	font-weight: 700;
	25	+	font-style: normal;
	26	+	font-display: swap;
	27	+	}
	28	+
	29	+	/* JetBrains Mono Nerd Font - Industrial Terminal aesthetic */
	30	+	@font-face {
	31	+	font-family: "JetBrains Mono NF";
	32	+	src: url("dumb://app/fonts/JetBrainsMonoNerdFont-Regular.woff2") format("woff2");
	33	+	font-weight: 400;
	34	+	font-style: normal;
	35	+	font-display: swap;
	36	+	}
	37	+
	38	+	@font-face {
	39	+	font-family: "JetBrains Mono NF";
	40	+	src: url("dumb://app/fonts/JetBrainsMonoNerdFont-Bold.woff2") format("woff2");
	41	+	font-weight: 700;
	42	+	font-style: normal;
	43	+	font-display: swap;
	44	+	}
	45	+
	46	+	@font-face {
	47	+	font-family: "JetBrains Mono NF";
	48	+	src: url("dumb://app/fonts/JetBrainsMonoNerdFont-Italic.woff2") format("woff2");
	49	+	font-weight: 400;
	50	+	font-style: italic;
	51	+	font-display: swap;
	52	+	}
	53	+
	54	+	/* Dynamic theme switching via CSS variables
	55	+	* These bridge between:
	56	+	* 1. Backend palette (--color-browser-*) injected at runtime
	57	+	* 2. Design tokens (--background, --primary, etc.) for static fallbacks
	58	+	* 3. Component usage (--dynamic-*) for actual styling
	59	+	*/
4	60		:root {
5		-	--dynamic-bg: var(--color-browser-bg);
6		-	--dynamic-surface-variant: var(--color-browser-surface-variant);
7		-	--dynamic-surface: var(--color-browser-surface);
8		-	--dynamic-text: var(--color-browser-text);
9		-	--dynamic-muted: var(--color-browser-muted);
10		-	--dynamic-accent: var(--color-browser-accent);
11		-	--dynamic-border: var(--color-browser-border);
	61	+	/* Primary bridge - uses backend palette when available, falls back to tokens */
	62	+	--dynamic-bg: var(--color-browser-bg, var(--background));
	63	+	--dynamic-surface: var(--color-browser-surface, var(--card));
	64	+	--dynamic-surface-variant: var(--color-browser-surface-variant, var(--secondary));
	65	+	--dynamic-text: var(--color-browser-text, var(--foreground));
	66	+	--dynamic-muted: var(--color-browser-muted, var(--muted-foreground));
	67	+	--dynamic-accent: var(--color-browser-accent, var(--primary));
	68	+	--dynamic-border: var(--color-browser-border, var(--border));
	69	+
	70	+	/* Extended semantic colors from design tokens */
	71	+	--dynamic-primary: var(--primary);
	72	+	--dynamic-primary-foreground: var(--primary-foreground);
	73	+	--dynamic-secondary: var(--secondary);
	74	+	--dynamic-destructive: var(--destructive);
	75	+	--dynamic-ring: var(--ring);
12	76		}
13	77
14	78		/* Base styles for browser UI components */

M gui/tailwind.config.js +5 -0


@@ -3,6 +3,11 @@ export default {
3	3		content: ["./src/*/.{html,js,ts,svelte}"],
4	4		theme: {
5	5		extend: {
	6	+	// Font families for Industrial Terminal aesthetic
	7	+	fontFamily: {
	8	+	mono: ['"JetBrains Mono NF"', "ui-monospace", "SFMono-Regular", "monospace"],
	9	+	sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
	10	+	},
6	11		// Custom design system colors
7	12		colors: {
8	13		// Browser-specific colors that work well in both themes

A gui/vite.config.blocked.ts +46 -0

@@ -0,0 +1,46 @@
	1	+	import { defineConfig } from "vite";
	2	+	import { svelte } from "@sveltejs/vite-plugin-svelte";
	3	+	import { resolve } from "path";
	4	+	import { pageGenerator } from "./vite-plugin-pages";
	5	+
	6	+	export default defineConfig({
	7	+	plugins: [
	8	+	svelte({
	9	+	emitCss: false, // Inline component CSS for shadow DOM compatibility
	10	+	}),
	11	+	pageGenerator([
	12	+	{
	13	+	name: "blocked",
	14	+	title: "Page Blocked",
	15	+	script: "blocked.min.js",
	16	+	filename: "blocked.html",
	17	+	},
	18	+	]),
	19	+	],
	20	+	build: {
	21	+	rollupOptions: {
	22	+	input: resolve(__dirname, "src/pages/blocked.ts"),
	23	+	output: {
	24	+	dir: "../assets/gui",
	25	+	entryFileNames: "blocked.min.js",
	26	+	chunkFileNames: "[name].js",
	27	+	assetFileNames: "[name].[ext]",
	28	+	manualChunks: undefined,
	29	+	format: "iife",
	30	+	name: "DumberBlocked",
	31	+	},
	32	+	},
	33	+	emptyOutDir: false,
	34	+	target: ["es2020", "chrome91", "firefox90"],
	35	+	minify: true,
	36	+	sourcemap: false,
	37	+	cssCodeSplit: false,
	38	+	assetsInlineLimit: 4096,
	39	+	},
	40	+	resolve: {
	41	+	alias: {
	42	+	$lib: resolve(__dirname, "src/lib"),
	43	+	$components: resolve(__dirname, "src/components"),
	44	+	},
	45	+	},
	46	+	});