fixing small issues in the project

AGENTS.md

@@ -97,8 +97,8 @@ A "feature" in this project typically means: a new widget, a new settings option
 - **Runtime note:** Preact is the actual runtime (`@preact/preset-vite`), but types and imports use `react`/`@types/react`. Do not introduce React-only APIs without verifying Preact compatibility.
 - **Path alias:** `@/*` maps to the project root (see `tsconfig.json` `paths`). Source files currently use relative imports (`./`, `../`) — match the surrounding file.
 - **No comments** in committed code unless explicitly requested.
-- **Build vs. dev:** Prefer verifying with `npm run build` rather than `npm run dev`. The only npm scripts are `dev`, `build`, `preview`.
-- **No lint/typecheck script is configured.** Verify TS correctness manually (e.g. `npx tsc --noEmit`), and confirm `npm run build` succeeds before considering a task complete.
+- **Build vs. dev:** Prefer verifying with `npm run build` rather than `npm run dev`. npm scripts: `dev`, `build`, `preview`, `typecheck`, `test`, `capture:screenshots`.
+- **Verification:** run `npm run typecheck` and `npm run build`, then `npm test` (Playwright regression suite; needs `npx playwright install chromium`) before considering a task complete. CI runs the type check on PRs and pushes to `main`.
 - **Don't touch `public/icon-metadata.json`** — it's gitignored and fetched at release-build time by `scripts/prepare_release.sh`. Don't commit a local copy.
 - **Don't reintroduce dead code:** `components/EditModal.tsx` imports `lucide-react` and `./IconPicker`, neither of which is a dependency. It is not wired into the app. Use `WebsiteEditModal.tsx` / `CategoryEditModal.tsx` instead, and add the icon picker inline (as in `WebsiteEditModal.tsx`) rather than reviving `IconPicker`.
 - **External asset URLs:** any new icons/css/JS pulled from CDNs (e.g. `cdn.jsdelivr.net`) must work offline-or-not without crashing — always provide a fallback (see how `iconService.ts` falls back to Google's S2 favicon service).

App.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
+import { useState, useEffect, useCallback, useRef, lazy, Suspense } from 'react';
 import ServerWidget from './components/ServerWidget';
 import { Category, Website, Config } from './types';
 import Header from './components/layout/Header';
@@ -11,6 +11,7 @@ import { getAlignmentClass } from './components/utils/styleUtils';
 import { getRandomWallpaperIndex, loadWallpaperState, saveWallpaperState } from './components/utils/wallpaperUtils';
 import { PlusIcon } from './components/icons';
 import { createId } from './components/utils/idUtils';
+import { pruneCachedIconsFromChromeStorageLocal } from './components/utils/StorageLocalManager';
 
 const ConfigurationModal = lazy(() => import('./components/ConfigurationModal'));
 const WebsiteEditModal = lazy(() => import('./components/WebsiteEditModal'));
@@ -26,6 +27,16 @@ const App: React.FC = () => {
   const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
   const [config, setConfig] = useState<Config>(() => ConfigurationService.loadConfig());
   const [wallpaperVersion, setWallpaperVersion] = useState(0);
+  const categoriesRef = useRef(categories);
+  categoriesRef.current = categories;
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const icons = categoriesRef.current.flatMap(category => category.websites.map(website => website.icon));
+      void pruneCachedIconsFromChromeStorageLocal(icons);
+    }, 5000);
+    return () => clearTimeout(timer);
+  }, []);
 
   useEffect(() => {
     ConfigurationService.saveConfig(config);
@@ -117,6 +128,8 @@ const App: React.FC = () => {
 
   const handleDeleteCategory = useCallback(() => {
     if (!editingCategory) return;
+    const websiteCount = editingCategory.websites.length;
+    if (websiteCount > 0 && !confirm(`Delete "${editingCategory.name}" and its ${websiteCount} ${websiteCount === 1 ? 'website' : 'websites'}?`)) return;
 
     setCategories(previous => previous.filter(c => c.id !== editingCategory.id));
     setEditingCategory(null);

components/CategoryEditModal.tsx

@@ -18,7 +18,8 @@ const CategoryEditModal: React.FC<CategoryEditModalProps> = ({ category, edit, o
       title={edit ? 'Edit Category' : 'Add Category'}
       edit={edit}
       onClose={onClose}
-      onSave={() => onSave(name)}
+      onSave={() => onSave(name.trim())}
+      canSave={name.trim() !== ''}
       onDelete={edit ? onDelete : undefined}
     >
       <input

components/ConfigurationModal.tsx

@@ -63,6 +63,17 @@ const ConfigurationModal: React.FC<ConfigurationModalProps> = ({
     closeTimer.current = setTimeout(onClose, 250);
   };
 
+  const handleCloseRef = useRef(handleClose);
+  handleCloseRef.current = handleClose;
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') handleCloseRef.current();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
   const handleConfigChange = (updates: Partial<Config>) => {
     setConfig((prev) => ({ ...prev, ...updates }));
   };
@@ -139,7 +150,7 @@ const ConfigurationModal: React.FC<ConfigurationModalProps> = ({
   ];
 
   return (
-    <div className="fixed inset-0 z-50" role="dialog" aria-modal="true">
+    <div className="fixed inset-0 z-50" role="dialog" aria-modal="true" aria-labelledby="configuration-title">
       <div
         className={`liquid-modal-backdrop fixed inset-0 transition-opacity duration-200 ease-ios ${
           isVisible ? 'opacity-100' : 'opacity-0'
@@ -153,7 +164,7 @@ const ConfigurationModal: React.FC<ConfigurationModalProps> = ({
         }`}
       >
         <div className="p-6 sm:p-8 flex-grow overflow-y-auto">
-          <h2 className="liquid-title-text text-3xl font-extrabold mb-6">Configuration</h2>
+          <h2 id="configuration-title" className="liquid-title-text text-3xl font-extrabold mb-6">Configuration</h2>
 
           <div className="liquid-surface grid grid-cols-2 sm:grid-cols-4 gap-1 rounded-2xl p-1 mb-7">
             {tabs.map((tab) => (

components/ModalShell.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useId, useRef } from 'react';
 
 interface ModalShellProps {
   title: string;
@@ -6,10 +6,23 @@ interface ModalShellProps {
   onClose: () => void;
   onSave: () => void;
   onDelete?: () => void;
+  canSave?: boolean;
   children: React.ReactNode;
 }
 
-const ModalShell: React.FC<ModalShellProps> = ({ title, edit, onClose, onSave, onDelete, children }) => {
+const ModalShell: React.FC<ModalShellProps> = ({ title, edit, onClose, onSave, onDelete, canSave = true, children }) => {
+  const titleId = useId();
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCloseRef.current();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
   const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget) {
       onClose();
@@ -18,8 +31,8 @@ const ModalShell: React.FC<ModalShellProps> = ({ title, edit, onClose, onSave, o
 
   return (
     <div className="liquid-modal-backdrop fixed inset-0 flex items-center justify-center z-50 p-4" onClick={handleOverlayClick}>
-      <div className="liquid-panel liquid-modal-card rounded-3xl p-6 sm:p-8 w-full max-w-lg text-white">
-        <h2 className="liquid-title-text text-3xl font-extrabold mb-6">{title}</h2>
+      <div className="liquid-panel liquid-modal-card rounded-3xl p-6 sm:p-8 w-full max-w-lg text-white" role="dialog" aria-modal="true" aria-labelledby={titleId}>
+        <h2 id={titleId} className="liquid-title-text text-3xl font-extrabold mb-6">{title}</h2>
         <div className="flex flex-col gap-4">{children}</div>
         <div className="flex justify-between items-center mt-8">
           <div>
@@ -30,7 +43,11 @@ const ModalShell: React.FC<ModalShellProps> = ({ title, edit, onClose, onSave, o
             )}
           </div>
           <div className="flex justify-end gap-3">
-            <button onClick={onSave} className="liquid-button liquid-button-success liquid-focus py-2.5 px-5">
+            <button
+              onClick={onSave}
+              disabled={!canSave}
+              className="liquid-button liquid-button-success liquid-focus py-2.5 px-5 disabled:opacity-40 disabled:cursor-not-allowed"
+            >
               Save
             </button>
             <button onClick={onClose} className="liquid-button liquid-button-secondary liquid-focus py-2.5 px-5">
@@ -43,4 +60,4 @@ const ModalShell: React.FC<ModalShellProps> = ({ title, edit, onClose, onSave, o
   );
 };
 
-export default ModalShell;
+export default ModalShell;

components/Wallpaper.tsx

@@ -144,7 +144,7 @@ const Wallpaper: React.FC<WallpaperProps> = ({ wallpaperNames, blur, brightness,
       <div
         className="wallpaper-layer wallpaper-transition"
         style={{
-          backgroundImage: `url(${imageUrl})`,
+          backgroundImage: `url(${JSON.stringify(imageUrl)})`,
           filter: `blur(${blur}px) brightness(${brightness / 100})`,
           opacity: opacity / 100,
         }}

components/WebsiteEditModal.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { Website } from '../types';
 import { getWebsiteIcon } from './utils/iconService';
+import { normalizeWebsiteUrl } from './utils/urlUtils';
 import ModalShell from './ModalShell';
 
 interface WebsiteEditModalProps {
@@ -98,6 +99,15 @@ const WebsiteEditModal: React.FC<WebsiteEditModalProps> = ({ website, edit, onCl
     }
   }, [iconQuery, iconMetadata]);
 
+  const handleSave = () => {
+    const normalizedUrl = normalizeWebsiteUrl(url);
+    if (!normalizedUrl) {
+      alert('Please enter a valid website URL (http, https, ftp, or mailto).');
+      return;
+    }
+    onSave({ id: website?.id, name: name.trim(), url: normalizedUrl, icon });
+  };
+
   const fetchIcon = async () => {
     if (url) {
       const fetchedIcon = await getWebsiteIcon(url);
@@ -110,7 +120,8 @@ const WebsiteEditModal: React.FC<WebsiteEditModalProps> = ({ website, edit, onCl
       title={edit ? 'Edit Website' : 'Add Website'}
       edit={edit}
       onClose={onClose}
-      onSave={() => onSave({ id: website?.id, name, url, icon })}
+      onSave={handleSave}
+      canSave={name.trim() !== '' && url.trim() !== ''}
       onDelete={edit ? onDelete : undefined}
     >
       <div className="flex justify-center mb-4">

components/configuration/ClockTab.tsx

@@ -40,7 +40,6 @@ const ClockTab: React.FC<ClockTabProps> = ({ config, onChange }) => {
           onChange={(e) => updateClock({ font: e.target.value as string })}
           options={[
             { value: 'Helvetica', label: 'Helvetica' },
-            { value: `'Orbitron', sans-serif`, label: 'Orbitron' },
             { value: 'monospace', label: 'Monospace' },
             { value: 'cursive', label: 'Cursive' },
           ]}

components/configuration/ServerWidgetTab.tsx

@@ -5,6 +5,7 @@ import { Config, Server } from '../../types';
 import RangeSlider from './RangeSlider';
 import { TrashIcon } from '../icons';
 import { createId } from '../utils/idUtils';
+import { parseServerAddress } from '../utils/urlUtils';
 
 interface ServerWidgetTabProps {
   config: Config;
@@ -21,6 +22,12 @@ const ServerWidgetTab: React.FC<ServerWidgetTabProps> = ({ config, onChange }) =
 
   const handleAddServer = () => {
     if (newServerName.trim() === '' || newServerAddress.trim() === '') return;
+    try {
+      parseServerAddress(newServerAddress);
+    } catch (error) {
+      alert(error instanceof Error && error.message.startsWith('Server') ? error.message : 'Please enter a valid server address, e.g. 192.168.1.10:8080 or https://example.com.');
+      return;
+    }
     const newServer: Server = {
       id: createId(),
       name: newServerName.trim(),

components/configuration/ThemeTab.tsx

@@ -121,7 +121,10 @@ const ThemeTab: React.FC<ThemeTabProps> = ({
             >
               <span className="truncate">{wallpaper.name}</span>
               <button
-                onClick={() => onDeleteWallpaper(wallpaper)}
+                onClick={() => {
+                  if (!wallpaper.url && !confirm(`Delete "${wallpaper.name}"? Uploaded wallpapers are not included in exports and cannot be recovered.`)) return;
+                  void onDeleteWallpaper(wallpaper);
+                }}
                 className="liquid-edit-action liquid-focus text-red-300 hover:text-red-100"
                 aria-label={`Delete ${wallpaper.name}`}
               >

components/services/ConfigurationService.ts

@@ -6,7 +6,10 @@ import {
   checkChromeStorageLocalAvailable,
   removeWallpaperFromChromeStorageLocal,
 } from '../utils/StorageLocalManager';
-import { getFileNameFromUrl } from '../utils/urlUtils';
+import { getFileNameFromUrl, normalizeWebsiteUrl } from '../utils/urlUtils';
+import { getWallpaperFrequencyHours } from '../utils/wallpaperUtils';
+
+export const CLOCK_FONTS = ['Helvetica', 'monospace', 'cursive'];
 
 const REQUIRED_LOCAL_STORAGE_KEYS = ['config', 'categories', 'userWallpapers', 'wallpaperState'] as const;
 type RequiredLocalStorageKey = typeof REQUIRED_LOCAL_STORAGE_KEYS[number];
@@ -14,7 +17,7 @@ type RequiredLocalStorageKey = typeof REQUIRED_LOCAL_STORAGE_KEYS[number];
 export const DEFAULT_CONFIG: Config = {
   title: 'Vision Start',
   currentWallpapers: ['Beach'],
-  wallpaperFrequency: '1d',
+  wallpaperFrequency: '24h',
   wallpaperBlur: 0,
   wallpaperBrightness: 108,
   wallpaperOpacity: 96,
@@ -78,6 +81,7 @@ const hasStrings = (value: unknown, keys: string[]): value is Record<string, str
 export const normalizeConfig = (stored: unknown): Config => {
   const config = deepMerge(DEFAULT_CONFIG, stored);
   config.currentWallpapers = [...new Set(config.currentWallpapers.filter(name => typeof name === 'string' && name.length > 0))];
+  config.wallpaperFrequency = `${getWallpaperFrequencyHours(config.wallpaperFrequency)}h`;
   config.wallpaperBlur = boundedNumber(config.wallpaperBlur, DEFAULT_CONFIG.wallpaperBlur, 0, 50);
   config.wallpaperBrightness = boundedNumber(config.wallpaperBrightness, DEFAULT_CONFIG.wallpaperBrightness, 0, 200);
   config.wallpaperOpacity = boundedNumber(config.wallpaperOpacity, DEFAULT_CONFIG.wallpaperOpacity, 1, 100);
@@ -86,6 +90,7 @@ export const normalizeConfig = (stored: unknown): Config => {
   config.alignment = choice(config.alignment, ['top', 'middle', 'bottom'], DEFAULT_CONFIG.alignment);
   config.horizontalAlignment = choice(config.horizontalAlignment, ['left', 'middle', 'right'], DEFAULT_CONFIG.horizontalAlignment);
   config.clock.size = choice(config.clock.size, ['tiny', 'small', 'medium', 'large'], DEFAULT_CONFIG.clock.size);
+  config.clock.font = choice(config.clock.font, CLOCK_FONTS, DEFAULT_CONFIG.clock.font);
   config.clock.format = choice(config.clock.format, ['HH:mm', 'h:mm A'], DEFAULT_CONFIG.clock.format);
   config.serverWidget.pingFrequency = boundedNumber(config.serverWidget.pingFrequency, DEFAULT_CONFIG.serverWidget.pingFrequency, 5, 60);
   const serverIds = new Set<string>();
@@ -110,8 +115,10 @@ export const normalizeCategories = (stored: unknown): Category[] => {
       name: category.name,
       websites: websites.flatMap(website => {
         if (!hasStrings(website, ['id', 'name', 'url']) || !website.id || websiteIds.has(website.id)) return [];
+        const url = normalizeWebsiteUrl(website.url);
+        if (!url) return [];
         websiteIds.add(website.id);
-        return [{ id: website.id, name: website.name, url: website.url, icon: typeof website.icon === 'string' ? website.icon : '', categoryId: category.id }];
+        return [{ id: website.id, name: website.name, url, icon: typeof website.icon === 'string' ? website.icon : '', categoryId: category.id }];
       }),
     }];
   });

components/utils/StorageLocalManager.ts

@@ -7,7 +7,7 @@ declare global {
       storage?: {
         local?: {
           set: (items: object, callback?: () => void) => void;
-          get: (keys: string[] | string, callback: (items: { [key: string]: string }) => void) => void;
+          get: (keys: string[] | string | null, callback: (items: { [key: string]: string }) => void) => void;
           remove: (keys: string | string[], callback?: () => void) => void;
         };
       };
@@ -94,6 +94,24 @@ export async function removeCachedIconFromChromeStorageLocal(sourceUrl: string):
   }
 }
 
+export async function pruneCachedIconsFromChromeStorageLocal(keepSourceUrls: string[]): Promise<number> {
+  if (!checkChromeStorageLocalAvailable()) return 0;
+  try {
+    const keep = new Set(keepSourceUrls.map(getIconCacheKey));
+    const items = await chromeLocalCall<StorageResult>((cb) =>
+      window.chrome?.storage?.local?.get(null, cb),
+    );
+    const stale = Object.keys(items).filter(key => key.startsWith(ICON_CACHE_KEY_PREFIX) && !keep.has(key));
+    if (stale.length === 0) return 0;
+    await chromeLocalCall<void>((cb) =>
+      window.chrome?.storage?.local?.remove(stale, cb),
+    );
+    return stale.length;
+  } catch {
+    return 0;
+  }
+}
+
 /**
  * Adds a new wallpaper to chrome.storage.local.
  * File uploads are stored as base64 while remote wallpapers remain URLs.
@@ -123,9 +141,16 @@ export async function addWallpaperToChromeStorageLocal(name: string, url: string
     finalName = finalName || getFileNameFromUrl(parsedUrl);
   }
 
-  await chromeLocalCall<void>((cb) =>
-    window.chrome?.storage?.local?.set({ [finalName]: url }, cb),
-  );
+  try {
+    await chromeLocalCall<void>((cb) =>
+      window.chrome?.storage?.local?.set({ [finalName]: url }, cb),
+    );
+  } catch (error) {
+    if (error instanceof Error && /quota/i.test(error.message)) {
+      throw new Error('Not enough extension storage for this wallpaper. Delete an uploaded wallpaper and try again.');
+    }
+    throw error;
+  }
   return finalName;
 }
 

components/utils/jsping.ts

@@ -1,9 +1,7 @@
+import { parseServerAddress } from './urlUtils';
+
 async function ping(url: string, multiplier = 1, signal?: AbortSignal): Promise<number> {
-    const address = url.trim();
-    const target = new URL(/^[a-z][a-z\d+.-]*:\/\//i.test(address) ? address : `http://${address}`);
-    if (target.protocol !== 'http:' && target.protocol !== 'https:') {
-        throw new Error('Server addresses must use HTTP or HTTPS.');
-    }
+    const target = parseServerAddress(url);
 
     const controller = new AbortController();
     const abort = () => controller.abort();

components/utils/urlUtils.ts

@@ -6,4 +6,29 @@ export const getFileNameFromUrl = (url: URL): string => {
   } catch {
     return pathName;
   }
-};
+};
+
+const SCHEME_PATTERN = /^[a-z][a-z\d+.-]*:/i;
+const AUTHORITY_SCHEME_PATTERN = /^[a-z][a-z\d+.-]*:\/\//i;
+const ALLOWED_WEBSITE_PROTOCOLS = new Set(['http:', 'https:', 'ftp:', 'mailto:']);
+
+export const normalizeWebsiteUrl = (raw: string): string | null => {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  const hasScheme = AUTHORITY_SCHEME_PATTERN.test(trimmed) || (SCHEME_PATTERN.test(trimmed) && !/^[^:/]+:\d/.test(trimmed));
+  try {
+    const url = new URL(hasScheme ? trimmed : `https://${trimmed}`);
+    return ALLOWED_WEBSITE_PROTOCOLS.has(url.protocol) ? url.href : null;
+  } catch {
+    return null;
+  }
+};
+
+export const parseServerAddress = (address: string): URL => {
+  const trimmed = address.trim();
+  const target = new URL(AUTHORITY_SCHEME_PATTERN.test(trimmed) ? trimmed : `http://${trimmed}`);
+  if (target.protocol !== 'http:' && target.protocol !== 'https:') {
+    throw new Error('Server addresses must use HTTP or HTTPS.');
+  }
+  return target;
+};

index.html

@@ -4,10 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vision Start</title>
-    
-    
-<link rel="stylesheet" href="/index.css">
-</head>
+  </head>
   <body class="bg-slate-950">
     <div id="root"></div>
   <script type="module" src="/index.tsx"></script>

package.json

@@ -7,6 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "test": "node scripts/check_regressions.mjs",
     "capture:screenshots": "node scripts/capture_screenshots.mjs"
   },
   "dependencies": {

project-context.md

@@ -1,9 +1,3 @@
----
-project_name: Vision Start
-date: 2026-10-09
-type: general_overview
----
-
 # Vision Start — Project Context
 
 A general, non-normative overview of the **Vision Start** project: what it is, how it's structured, what features it offers, and which files do what. This document is intended as a map for humans and AI agents to orient themselves in the codebase. It deliberately avoids coding-style prescriptive rules.
@@ -52,7 +46,7 @@ The startpage is composed of widgets and a configuration panel:
 
 - **Website Tiles** — Bookmarks organized into categories. Each tile shows an icon + name and opens the configured URL. Tiles can be added, edited, deleted, and moved left/right within their own category (reordering) while in edit mode.
 - **Categories** — Groupings of website tiles (e.g. "Search"). Add/edit/delete/name.
-- **Clock** — Optional header clock with selectable size, font, and 12h/24h format.
+- **Clock** — Optional header clock with selectable size, font (Helvetica, Monospace, Cursive — system fonts only, nothing is downloaded), and 12h/24h format.
 - **Title** — Optional big header title (text + size configurable).
 - **Server Status Widget** — Bottom-center glass pill that periodically "pings" configured server addresses and shows online/offline indicators. Probes use cancellable, credential-free HTTP HEAD requests with a 5s timeout. Online means the browser received a response; cross-origin HTTP status codes are opaque, so this is reachability rather than an HTTP health check. Network failures, timeouts, and browser-blocked requests appear offline.
 - **Wallpaper background** — Fullscreen background image with adjustable blur, brightness, and opacity, rendered behind a soft readability layer for the liquid-glass UI. Randomly rotates through multiple wallpapers at an hourly cadence selected by slider (`1h`–`48h`).
@@ -60,7 +54,7 @@ The startpage is composed of widgets and a configuration panel:
   - User wallpapers: upload from a file (≤4MB, ≤4.5MB base64) or add by URL. Remote URLs remain lightweight entries in the `userWallpapers` index; uploaded image data is stored in `chrome.storage.local` when available.
 - **Icon library, auto-fetch & cache** — Website icons can be picked from the [Dashboard Icons](https://dashboardicons.com/) library (metadata pre-downloaded to `public/icon-metadata.json`) or auto-fetched for trusted public TLDs as a Google S2 favicon URL derived from the site's hostname (no HTML fetching — the S2 URL is used purely as an `<img>` source). Non-trusted TLDs (e.g. local TLDs, IP addresses) fetch `${origin}/favicon.ico` directly. Tiles opportunistically cache CORS-readable icon responses as data URLs in `chrome.storage.local` and retain the original URL when caching is unavailable. Cache population fetches trusted TLDs through a CORS-open favicon service (`icon.horse`) because Google's S2 endpoint 301-redirects without `Access-Control-Allow-Origin`, which would block cross-origin `fetch`.
 - **Configuration panel** — Slide-in right-side modal with four tabs: General, Theme, Clock, Server Widget. Includes **Export** (downloads a JSON bundle of selected `localStorage` keys) and **Import** (restores from JSON and reloads the page).
-- **Edit mode** — Toggle via the top-left pencil button; reveals per-tile glass action toolbars, per-category edit buttons, and ghost glass "add" tiles.
+- **Edit mode** — Toggle via the top-left pencil button; reveals per-tile glass action toolbars, per-category edit buttons, and ghost glass "add" tiles. Add/edit modals disable Save until required fields are filled, and website URLs without a scheme get `https://` (only `http`, `https`, `ftp`, `mailto` are accepted). Deleting a category that has websites, or an uploaded wallpaper, asks for confirmation first. All modals close with Escape.
 - **Liquid glass design language** — Soft translucent surfaces, restrained edge highlights, moderate backdrop blur, soft shadows, cyan focus states, and iOS-like easing tokens (`ease-ios`, `ease-spring`, `ease-liquid`) defined in `index.css`.
 
 Performance notes:
@@ -68,7 +62,7 @@ Performance notes:
 - Modals (`ConfigurationModal`, `WebsiteEditModal`, `CategoryEditModal`) are code-split via `React.lazy` + `Suspense` and only loaded when opened. `ServerWidgetTab` is independently lazy-loaded, so its `@hello-pangea/dnd` dependency is loaded only when the Server Widget settings tab is selected. `WebsiteEditModal` and `CategoryEditModal` share a common `ModalShell` component.
 - `WebsiteTile` and `CategoryGroup` are wrapped in `React.memo`; `App.tsx` handlers are `useCallback`-stabilized and pure alignment helpers are hoisted to module scope, so opening a modal / toggling edit no longer re-renders every tile.
 - `Clock` schedules one timeout for the next minute boundary, pauses while hidden, and refreshes immediately on focus or visibility return.
-- `jsping` uses HTTP HEAD without downloading or decoding probe images, propagates failures, and cleans up its timeout and abort listener.
+- `jsping` parses addresses with the shared `parseServerAddress` (also used to validate new servers in the settings tab), uses HTTP HEAD without downloading or decoding probe images, propagates failures, and cleans up its timeout and abort listener.
 - `ServerWidget` runs at most four probes concurrently, batches completed results into one state update, avoids overlapping polling cycles, cancels work when hidden or unmounted, and depends on a stable ids/addresses signature. Hidden tabs stop polling and refresh on visibility return; removed servers leave no retained status entries.
 - Icon metadata (`/icon-metadata.json`) is fetched lazily on first focus of the icon field with `cache: 'force-cache'`, filter debounced ~150ms, and color variants are expanded lazily during filtering rather than upfront. Only names, file formats, and color variants are retained in component state; requests are aborted on close, failed loads can retry, and metadata URLs resolve relative to the page so subdirectory deployments work (the browser HTTP cache makes reopening cheap), and the dashboard-icon URL for a picker entry is derived from one shared helper.
 - `Wallpaper` resolves remote wallpaper URLs through a module-level `Map` bounded to the last 3 entries. Uploaded data URLs are excluded from that cache, and the cache clears on unmount; its image transition and readability overlay classes live in `index.css`. Wallpaper rotation and frequency parsing (`h`/`d` → hours/ms) share helpers with the Theme tab via `components/utils/wallpaperUtils.ts`.
@@ -132,7 +126,7 @@ vision-start/
 │       ├── idUtils.ts               # Shared UUID generation with an ordinary-HTTP fallback
 │       ├── styleUtils.ts            # Shared tile/clock/title size classes, icon pixel sizes, alignment classes, size presets
 │       ├── wallpaperUtils.ts        # Wallpaper frequency parsing (h/d → hours/ms) and random-index helpers
-│       └── urlUtils.ts              # URL → filename extraction (shared by wallpaper storage paths)
+│       └── urlUtils.ts              # URL → filename extraction, website URL normalization (scheme allow-list), server address parsing
 │
 ├── public/
 │   ├── favicon.ico
@@ -143,7 +137,7 @@ vision-start/
 │   ├── check_regressions.mjs    # Persistence/network regressions, browser memory checks, unpacked-extension smoke test
 │   ├── capture_screenshots.mjs  # Loads demoData, captures home/edit/configuration with Playwright, and can target a deployed URL
 │   ├── demoData.json            # Base64-encoded localStorage fixture used for release screenshots
-│   ├── prepare_release.sh        # Downloads icon-metadata.json from homarr-labs/dashboard-icons
+│   ├── prepare_release.sh        # Downloads icon-metadata.json from homarr-labs/dashboard-icons (fails the build on download errors)
 │   └── check_virustotal.sh       # Uploads the release zip to VirusTotal, waits for & reports the verdict
 │
 ├── .gitea/workflows/
@@ -159,7 +153,7 @@ vision-start/
 ├── tailwind.config.js            # Content globs + legacy pixel-size safelist
 ├── tsconfig.json                 # Strict TS, bundler resolution, `@/*` path alias to project root
 ├── vite.config.ts                # preact + tailwindcss plugins; single-bundle output; base './'
-├── package.json                  # Scripts: dev, build, preview
+├── package.json                  # Scripts: dev, build, preview, typecheck, test, capture:screenshots
 ├── README.md                     # Public-facing readme + feature list + roadmap
 └── .env.local                    # Local env (not tracked in context here)
 ```
@@ -178,7 +172,7 @@ The shape of all persisted data lives in `types.ts`:
 - **`Wallpaper`** — `name`, optional `url` or `base64`
 - **`Config`** — Everything else: title, wallpaper list + hourly frequency/blur/brightness/opacity, titleSize, vertical & horizontal alignment, tileSize, `clock {enabled, size, font, format}`, `serverWidget {enabled, pingFrequency, servers}`
 
-`ConfigurationService` (`components/services/ConfigurationService.ts`) is the source of truth for default config and persistence helpers. Config loaded from `localStorage` (and imported from export files) is run through `normalizeConfig()`, a schema-driven deep merge against `DEFAULT_CONFIG`: nested blocks (`clock`, `serverWidget`) inherit new sub-fields added to defaults, stored values with the wrong type fall back to defaults, and keys absent from the default schema are pruned. Nested defaults are cloned, option values and numeric ranges are validated, and malformed wallpaper/server entries are filtered. Categories and the user wallpaper index are normalized before rendering; website category IDs are repaired to match their containing category. The merge is self-healing — `App.tsx`'s persist-`useEffect` writes the normalized shape back to `localStorage` on first run.
+`ConfigurationService` (`components/services/ConfigurationService.ts`) is the source of truth for default config and persistence helpers. Config loaded from `localStorage` (and imported from export files) is run through `normalizeConfig()`, a schema-driven deep merge against `DEFAULT_CONFIG`: nested blocks (`clock`, `serverWidget`) inherit new sub-fields added to defaults, stored values with the wrong type fall back to defaults, and keys absent from the default schema are pruned. Nested defaults are cloned, option values (including `clock.font`) and numeric ranges are validated, `wallpaperFrequency` is rewritten to the canonical `<hours>h` form (default `24h`; legacy `1d`/`2d` convert), and malformed wallpaper/server entries are filtered. Categories and the user wallpaper index are normalized before rendering; website URLs go through `normalizeWebsiteUrl` (bare hosts get `https://`, disallowed schemes such as `javascript:` drop the website), and website category IDs are repaired to match their containing category. The merge is self-healing — `App.tsx`'s persist-`useEffect` writes the normalized shape back to `localStorage` on first run.
 
 Storage layout (browser-side):
 
@@ -189,7 +183,7 @@ Storage layout (browser-side):
 | `userWallpapers` | `localStorage` | `Wallpaper[]` index (names plus URLs for remote wallpapers) |
 | `wallpaperState` | `localStorage` | `{ lastWallpaperChange, currentIndex, currentName? }` for rotation (legacy index-only state remains supported) |
 | `<wallpaperName>` | `chrome.storage.local` (when available) | Base64 image data for uploaded wallpaper files and legacy URL wallpapers |
-| `vision-start:icon:<encoded-source-url>` | `chrome.storage.local` (when available) | CORS-readable website icon data URL, capped at 256KiB |
+| `vision-start:icon:<encoded-source-url>` | `chrome.storage.local` (when available) | CORS-readable website icon data URL, capped at 256KiB; entries no tile references are pruned ~5s after startup |
 
 Export/import bundles keys: `config`, `categories`, `userWallpapers`, `wallpaperState`. Remote wallpaper URLs are included through `userWallpapers`; uploaded image data and rebuildable icon cache entries are not included.
 
@@ -217,16 +211,16 @@ Export/import bundles keys: `config`, `categories`, `userWallpapers`, `wallpaper
 ### Local development / preview
 ```bash
 npm install
-npm run dev       # Vite dev server (note: PROJECT.md says prefer `npm run build` for real testing)
+npm run dev       # Vite dev server (note: AGENTS.md says prefer `npm run build` for real testing)
 npm run build     # Production build → dist/
 npm run preview   # Serve built dist/
-npx tsc --noEmit  # Strict TypeScript check
+npm run typecheck # Strict TypeScript check (tsc --noEmit)
 npx playwright install chromium
-node scripts/check_regressions.mjs # Run after building; isolated fixtures and temporary extension profile
+npm test          # scripts/check_regressions.mjs; run after building; isolated fixtures and temporary extension profile
 npm audit         # Audit the locked dependency tree
 ```
 
-The regression script covers malformed persisted data, partial/legacy imports and quota rollback, wallpaper validation, server probe failure/timeout/cancellation, icon request concurrency/stream limits/cache eviction, hidden-tab clock and polling behavior, modal request cancellation and retained JS heap after repeated picker cycles, lazy settings chunks, and loading an unpacked Manifest V3 extension in an isolated Chromium profile. It uses existing Vite/Playwright dependencies and does not modify the normal browser profile or shipped metadata.
+The regression script covers malformed persisted data, website URL/clock font/wallpaper frequency normalization, icon cache pruning, partial/legacy imports and quota rollback, wallpaper validation, server probe failure/timeout/cancellation, icon request concurrency/stream limits/cache eviction, hidden-tab clock and polling behavior, modal request cancellation and retained JS heap after repeated picker cycles, lazy settings chunks, and loading an unpacked Manifest V3 extension in an isolated Chromium profile. It uses existing Vite/Playwright dependencies and does not modify the normal browser profile or shipped metadata.
 
 ### Chrome extension install (manual)
 Build, then combine `dist/` + `manifest.json` into a folder and "Load unpacked" from `chrome://extensions`. The release workflow automates this zip.
@@ -238,7 +232,7 @@ Build, then combine `dist/` + `manifest.json` into a folder and "Load unpacked"
 - `release.yaml` validates each `vX.Y.Z` tag and stamps the version into `manifest.json` (`"version": "0.0.0"` → the tag) in each build checkout before producing the extension archive and production image. The release ZIP contains the contents of `dist/` at its root alongside `manifest.json` and `extension/icons/`, so the manifest's `index.html` new-tab path resolves directly. Before upload, the workflow tests ZIP integrity, extracts it, and validates the manifest version (no leading zeros, components at most 65535, not all zero), metadata, new-tab page, and icon paths. This is the Chrome Web Store upload ZIP; screenshots remain separate release assets.
 - **`pull-request.yaml`** — Triggers on pull request open, reopen, and synchronization. It builds and uploads a PR extension archive with `dist/` contents, `manifest.json`, and `extension/` at its root, then unpacks that archive into `dist/` in a separate Playwright job to generate the three demo screenshots, and uploads both artifacts (screenshots are retained for 30 days). For same-repository PRs, it maintains one Gitea PR comment with inline image attachments; fork PRs retain artifacts but skip the comment because their workflow token is read-only.
 - After `deploy_vision_start` succeeds, `release.yaml` uses Playwright Chromium against the deployed production page and seeds each browser context from `scripts/demoData.json`. It regenerates `home.png`, `editing.png`, and `configuration.png` at exactly 1280×800, uploads them as artifacts (retained for 30 days), and attaches them as individual Gitea release assets.
-- **`main.yaml`** — Triggers on push to `main` (and `workflow_dispatch`). Builds, pushes a `staging` multi-arch (amd64/arm64) image to `git.ivanch.me/ivanch/vision-start:staging`, then SSH-deploys on the staging host via `docker compose up -d --force-recreate`.
+- **`main.yaml`** — Triggers on push to `main` (and `workflow_dispatch`). Type-checks (`npm run typecheck`, also run by `pull-request.yaml`), builds, pushes a `staging` multi-arch (amd64/arm64) image to `git.ivanch.me/ivanch/vision-start:staging`, then SSH-deploys on the staging host via `docker compose up -d --force-recreate`.
 - **`release.yaml`** — Triggers on `v*` tags. Builds, zips `dist/` + `manifest.json` as `vision-start-<tag>.zip`, runs `scripts/check_virustotal.sh` against it (publishes analysis URL + detection ratio on the release body), creates a Gitea release, pushes a `latest` multi-arch image, and SSH-deploys to production.
 
 Required CI secrets (referenced by the workflows): `REGISTRY_PASSWORD`, `HOST`, `USERNAME`, `KEY`, `PORT`, `STAGING_DIR`, `PROD_DIR`, `VIRUSTOTAL_APIKEY`.
@@ -254,13 +248,13 @@ External assets fetched at build time by `scripts/prepare_release.sh`:
 - **`@hello-pangea/dnd`** is used only in `ServerWidgetTab.tsx` (server reorder), which is independently lazy-loaded by `ConfigurationModal`, so opening General/Theme/Clock settings does not load the drag-and-drop chunk. `WebsiteTile` moves tiles within their own category via simple left/right buttons (no cross-category movement), not drag-and-drop.
 - **Import validation** accepts both export bundles and legacy objects containing serialized storage values. Files larger than 10MB are rejected before reading. Required keys are normalized and validated before writes; storage failures clear affected keys before restoring previous values so rollback also works near the quota limit. Omitted keys retain their existing settings. Importing marks the settings drawer as saved, preventing its cancel cleanup from restoring pre-import wallpapers.
 - **Wallpaper mutations** reject duplicate/built-in/reserved names and non-image file uploads. The settings drawer serializes wallpaper mutations and reads the latest persisted index, only updates its list after persistence succeeds, and cancel does not reselect deleted wallpapers.
-- **Chrome storage is optional.** `StorageLocalManager` checks availability once (`checkChromeStorageLocalAvailable`) and caches it. Remote wallpaper URLs work without it because their URLs live in `userWallpapers`; file upload is gated off when unavailable, and `addWallpaperToChromeStorageLocal` throws if called without it.
+- **Chrome storage is optional.** `StorageLocalManager` checks availability once (`checkChromeStorageLocalAvailable`) and caches it. Remote wallpaper URLs work without it because their URLs live in `userWallpapers`; file upload is gated off when unavailable, and `addWallpaperToChromeStorageLocal` throws if called without it. The extension uses the default ~10MB `chrome.storage.local` quota (no `unlimitedStorage`); quota failures on upload show a friendly "not enough extension storage" message.
 - **Wallpaper rotation** uses a timeout scheduled from the persisted last-change timestamp, with checks on mount, focus, and return to a visible tab. Overdue backgrounds rotate once and start a new interval; frequency changes use elapsed time rather than restarting the countdown. Frequency is clamped to 1–48 hours and legacy `1d`/`2d` values remain supported. Invalid or future timestamps recover to the current time. State tracks the wallpaper name as well as its legacy index so reordering or shrinking the selection preserves the current wallpaper when possible. Missing data is skipped and an empty selection hides the background. Manual random changes exclude the current wallpaper and restart the interval. Opening settings does not reset rotation. Wallpaper state writes skip identical serialized values, and empty selections preserve the saved timestamp during refreshes to prevent repeated cross-tab updates. Storage events synchronize wallpaper changes across tabs; outdated asynchronous resolutions are discarded. URL caches are cleared when wallpaper inputs or stored wallpaper data change.
 - **Icon picker** in `WebsiteEditModal` loads page-relative `icon-metadata.json` on focus, validates the response, and lazily expands color variants into up to 50 searchable results. Closing it cancels metadata fetching and filtering timers.
 - **Website icon cache** is persistent only in `chrome.storage.local`; it is rebuilt from website icon URLs after configuration import. Only `image/*` responses no larger than 256KiB are cached. Trusted public TLDs use Google S2 and the CORS-open `icon.horse` service for favicon caching, while non-trusted TLDs (local TLDs, IP addresses, custom domains) fetch `${origin}/favicon.ico` directly. No site HTML is ever fetched for icon discovery.
 - **`tsconfig.json` does not emit JS** (`noEmit: true`, bundler resolution); Vite handles all transpilation.
 - **Tile/icon sizing** uses static tile classes and numeric inline icon dimensions. The legacy pixel-size safelist remains in `tailwind.config.js`, but tile icons no longer depend on it.
-- **Project guidance note** in `PROJECT.md`: do not use `npm run dev` for real verification — use `npm run build`.
+- **Project guidance note** in `AGENTS.md`: do not use `npm run dev` for real verification — use `npm run build`.
 - **`.claude/` and `.env.local`** are local-only / gitignored; not part of shipped artifacts.
 
 ---
@@ -282,10 +276,11 @@ External assets fetched at build time by `scripts/prepare_release.sh`:
 | Website icon cache | `components/utils/iconService.ts`, `components/WebsiteTile.tsx`, `components/utils/StorageLocalManager.ts` |
 | Regression and memory checks | `scripts/check_regressions.mjs` (run after `npm run build`) |
 | Shared IDs | `components/utils/idUtils.ts` |
+| URL validation (websites, server addresses) | `components/utils/urlUtils.ts` (`normalizeWebsiteUrl`, `parseServerAddress`) |
 | Export/import config | `components/services/ConfigurationService.ts` (`exportConfig`, `importConfig`) |
 | Build/release/PR pipelines | `scripts/prepare_release.sh`, `scripts/capture_screenshots.mjs`, `scripts/check_virustotal.sh`, `.gitea/workflows/pull-request.yaml`, `.gitea/workflows/release.yaml` |
 | Docker build | `Dockerfile` |
 
 ---
 
-_Last updated: 2026-10-09. Generated as a general project overview; not a coding-style guide._
+_Last updated: 2026-10-10. Generated as a general project overview; not a coding-style guide._