feat(#41): implement Widget/HUD system

- BaseWidget wrapper with loading/error states
- WidgetRegistry for central widget management
- WidgetGrid with react-grid-layout integration
- TasksWidget, CalendarWidget, QuickCaptureWidget
- useLayouts hooks for layout persistence
- Comprehensive test suite (TDD approach)

apps/web/src/components/widgets/WidgetRegistry.tsx

@@ -0,0 +1,95 @@
+/**
+ * Widget Registry - Central registry for all available widgets
+ */
+
+import type { ComponentType } from "react";
+import type { WidgetProps } from "@mosaic/shared";
+import { TasksWidget } from "./TasksWidget";
+import { CalendarWidget } from "./CalendarWidget";
+import { QuickCaptureWidget } from "./QuickCaptureWidget";
+import { AgentStatusWidget } from "./AgentStatusWidget";
+
+export interface WidgetDefinition {
+  name: string;
+  displayName: string;
+  description: string;
+  component: ComponentType<WidgetProps>;
+  defaultWidth: number;
+  defaultHeight: number;
+  minWidth: number;
+  minHeight: number;
+  maxWidth?: number;
+  maxHeight?: number;
+}
+
+/**
+ * Registry of all available widgets
+ */
+export const widgetRegistry: Record<string, WidgetDefinition> = {
+  TasksWidget: {
+    name: "TasksWidget",
+    displayName: "Tasks",
+    description: "View and manage your tasks",
+    component: TasksWidget,
+    defaultWidth: 2,
+    defaultHeight: 2,
+    minWidth: 1,
+    minHeight: 2,
+    maxWidth: 4,
+  },
+  CalendarWidget: {
+    name: "CalendarWidget",
+    displayName: "Calendar",
+    description: "View upcoming events and schedule",
+    component: CalendarWidget,
+    defaultWidth: 2,
+    defaultHeight: 2,
+    minWidth: 2,
+    minHeight: 2,
+    maxWidth: 4,
+  },
+  QuickCaptureWidget: {
+    name: "QuickCaptureWidget",
+    displayName: "Quick Capture",
+    description: "Quickly capture notes and tasks",
+    component: QuickCaptureWidget,
+    defaultWidth: 2,
+    defaultHeight: 1,
+    minWidth: 2,
+    minHeight: 1,
+    maxWidth: 4,
+    maxHeight: 2,
+  },
+  AgentStatusWidget: {
+    name: "AgentStatusWidget",
+    displayName: "Agent Status",
+    description: "Monitor agent activity and status",
+    component: AgentStatusWidget,
+    defaultWidth: 2,
+    defaultHeight: 2,
+    minWidth: 1,
+    minHeight: 2,
+    maxWidth: 3,
+  },
+};
+
+/**
+ * Get widget definition by name
+ */
+export function getWidgetByName(name: string): WidgetDefinition | undefined {
+  return widgetRegistry[name];
+}
+
+/**
+ * Get all available widgets as an array
+ */
+export function getAllWidgets(): WidgetDefinition[] {
+  return Object.values(widgetRegistry);
+}
+
+/**
+ * Check if a widget name is valid
+ */
+export function isValidWidget(name: string): boolean {
+  return name in widgetRegistry;
+}