Add hover-reveal edit button to widget cards + auto-open edit mode

Each widget card now shows a settings icon in the top-right corner on
hover (desktop) or always-visible (mobile via mobile-touch-target).
Clicking it opens the WidgetConfigDialog directly in edit mode for that
widget (via a new editWidgetId prop on WidgetConfigDialog that
auto-enters the draft-edit path via useEffect).

Wired across all three widget surfaces:
- Dashboard (both mobile section + desktop grid)
- Service OverviewTab
- NamedDashboardPage

128 tests pass; build/lint green.

frontend/src/components/WidgetInstance.tsx

@@ -1,4 +1,6 @@
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Settings2 } from "lucide-react";
 import { useServiceInstances } from "../hooks/useServices";
 import { resolveWidget } from "../integrations/registry";
 import type { WidgetInstance } from "../types";
@@ -6,9 +8,11 @@ import { SectionCard } from "./SectionCard";
 
 interface Props {
 	widget: WidgetInstance;
+	/** When provided, a hover-reveal edit button appears in the top-right corner. */
+	onEdit?: (widgetId: string) => void;
 }
 
-export function WidgetInstanceCard({ widget }: Props) {
+export function WidgetInstanceCard({ widget, onEdit }: Props) {
 	const { data: services = [] } = useServiceInstances();
 	const resolved = resolveWidget(widget, services);
 
@@ -17,20 +21,46 @@ export function WidgetInstanceCard({ widget }: Props) {
 			? `Unknown widget: ${widget.widget_kind} (service-bound)`
 			: `Unknown widget: ${widget.widget_kind} (built-in)`;
 		return (
-			<SectionCard title={widget.title}>
-				<Alert>
-					<AlertDescription>{label}</AlertDescription>
-				</Alert>
-			</SectionCard>
+			<div className="group relative">
+				{onEdit ? (
+					<Button
+						variant="ghost"
+						size="icon-sm"
+						className="absolute right-2 top-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 mobile-touch-target"
+						onClick={() => onEdit(widget.id)}
+						aria-label="Edit widget"
+					>
+						<Settings2 className="h-4 w-4" />
+					</Button>
+				) : null}
+				<SectionCard title={widget.title}>
+					<Alert>
+						<AlertDescription>{label}</AlertDescription>
+					</Alert>
+				</SectionCard>
+			</div>
 		);
 	}
 
 	const Component = resolved.component;
 	return (
-		<Component
-			widget={widget}
-			refreshIntervalMs={resolved.refreshIntervalMs}
-			description={resolved.description}
-		/>
+		<div className="group relative">
+			{onEdit ? (
+				<Button
+					variant="ghost"
+					size="icon-sm"
+					className="absolute right-2 top-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 mobile-touch-target"
+					onClick={() => onEdit(widget.id)}
+					aria-label="Edit widget"
+				>
+					<Settings2 className="h-4 w-4" />
+				</Button>
+			) : null}
+			<Component
+				widget={widget}
+				refreshIntervalMs={resolved.refreshIntervalMs}
+				description={resolved.description}
+			/>
+		</div>
 	);
 }