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/__tests__/QuickCaptureWidget.test.tsx

@@ -0,0 +1,148 @@
+/**
+ * QuickCaptureWidget Component Tests
+ * Following TDD principles
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { QuickCaptureWidget } from "../QuickCaptureWidget";
+
+global.fetch = vi.fn();
+
+describe("QuickCaptureWidget", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render input field", () => {
+    render(<QuickCaptureWidget id="quick-capture-1" />);
+
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("should render submit button", () => {
+    render(<QuickCaptureWidget id="quick-capture-1" />);
+
+    expect(screen.getByRole("button", { name: /add|capture|submit/i })).toBeInTheDocument();
+  });
+
+  it("should allow text input", async () => {
+    const user = userEvent.setup();
+    render(<QuickCaptureWidget id="quick-capture-1" />);
+
+    const input = screen.getByRole("textbox");
+    await user.type(input, "Quick note for later");
+
+    expect(input).toHaveValue("Quick note for later");
+  });
+
+  it("should submit note when button clicked", async () => {
+    const user = userEvent.setup();
+    (global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ success: true }),
+    });
+
+    render(<QuickCaptureWidget id="quick-capture-1" />);
+
+    const input = screen.getByRole("textbox");
+    const button = screen.getByRole("button", { name: /add|capture|submit/i });
+
+    await user.type(input, "New quick note");
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.stringContaining("/api"),
+        expect.objectContaining({
+          method: "POST",
+        })
+      );
+    });
+  });
+
+  it("should clear input after successful submission", async () => {
+    const user = userEvent.setup();
+    (global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ success: true }),
+    });
+
+    render(<QuickCaptureWidget id="quick-capture-1" />);
+
+    const input = screen.getByRole("textbox");
+    const button = screen.getByRole("button", { name: /add|capture|submit/i });
+
+    await user.type(input, "Test note");
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(input).toHaveValue("");
+    });
+  });
+
+  it("should handle submission errors", async () => {
+    const user = userEvent.setup();
+    (global.fetch as any).mockRejectedValueOnce(new Error("API Error"));
+
+    render(<QuickCaptureWidget id="quick-capture-1" />);
+
+    const input = screen.getByRole("textbox");
+    const button = screen.getByRole("button", { name: /add|capture|submit/i });
+
+    await user.type(input, "Test note");
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByText(/error|failed/i)).toBeInTheDocument();
+    });
+  });
+
+  it("should not submit empty notes", async () => {
+    const user = userEvent.setup();
+    render(<QuickCaptureWidget id="quick-capture-1" />);
+
+    const button = screen.getByRole("button", { name: /add|capture|submit/i });
+    await user.click(button);
+
+    expect(global.fetch).not.toHaveBeenCalled();
+  });
+
+  it("should support keyboard shortcut (Enter)", async () => {
+    const user = userEvent.setup();
+    (global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ success: true }),
+    });
+
+    render(<QuickCaptureWidget id="quick-capture-1" />);
+
+    const input = screen.getByRole("textbox");
+    await user.type(input, "Quick note{Enter}");
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalled();
+    });
+  });
+
+  it("should show success feedback after submission", async () => {
+    const user = userEvent.setup();
+    (global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ success: true }),
+    });
+
+    render(<QuickCaptureWidget id="quick-capture-1" />);
+
+    const input = screen.getByRole("textbox");
+    const button = screen.getByRole("button", { name: /add|capture|submit/i });
+
+    await user.type(input, "Test note");
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByText(/success|saved|captured/i)).toBeInTheDocument();
+    });
+  });
+});