Merge develop into main

Consolidate all feature and fix branches into main: - feat: orchestrator observability + mosaic rails integration (#422) - fix: post-422 CI and compose env follow-up (#423) - fix: orchestrator startup provider-key requirements (#425) - fix: BetterAuth OAuth2 flow and compose wiring (#426) - fix: BetterAuth UUID ID generation (#427) - test: web vitest localStorage/file warnings (#428) - fix: auth frontend remediation + review hardening (#421) - Plus numerous Docker, deploy, and auth fixes from develop Lockfile conflict resolved by regenerating from merged package.json. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-21 14:40:55 -06:00
parent d66451cf48 eae55bc4a3
commit bc4c1f9c70
142 changed files with 5418 additions and 3594 deletions
--- a/apps/web/Dockerfile
+++ b/apps/web/Dockerfile
@@ -1,6 +1,3 @@
-# syntax=docker/dockerfile:1
-# Enable BuildKit features for cache mounts
-
 # Base image for all stages
 # Uses Debian slim (glibc) for consistency with API/orchestrator and to prevent
 # future native addon compatibility issues with Alpine's musl libc.
@@ -27,9 +24,22 @@ COPY packages/ui/package.json ./packages/ui/
 COPY packages/config/package.json ./packages/config/
 COPY apps/web/package.json ./apps/web/

-# Install dependencies with pnpm store cache
-RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store \
-    pnpm install --frozen-lockfile
+# Install dependencies (no cache mount — Kaniko builds are ephemeral in CI)
+RUN pnpm install --frozen-lockfile
+
+# ======================
+# Production dependencies stage
+# ======================
+FROM base AS prod-deps
+
+# Copy all package.json files for workspace resolution
+COPY packages/shared/package.json ./packages/shared/
+COPY packages/ui/package.json ./packages/ui/
+COPY packages/config/package.json ./packages/config/
+COPY apps/web/package.json ./apps/web/
+
+# Install production dependencies only
+RUN pnpm install --frozen-lockfile --prod

 # ======================
 # Builder stage
@@ -79,23 +89,19 @@ RUN mkdir -p ./apps/web/public
 # ======================
 FROM node:24-slim AS production

-# Remove npm (unused in production — we use pnpm) to reduce attack surface
-RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx
+# Install dumb-init for proper signal handling (static binary from GitHub,
+# avoids apt-get which fails under Kaniko with bookworm GPG signature errors)
+ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.5/dumb-init_1.2.5_x86_64 /usr/local/bin/dumb-init

-# Install pnpm (needed for pnpm start command)
-RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
-
-# Install dumb-init for proper signal handling
-RUN apt-get update && apt-get install -y --no-install-recommends dumb-init \
-    && rm -rf /var/lib/apt/lists/*
-
-# Create non-root user
-RUN groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nextjs
+# Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
+RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
+    && chmod 755 /usr/local/bin/dumb-init \
+    && groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nextjs

 WORKDIR /app

 # Copy node_modules from builder (includes all dependencies in pnpm store)
-COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
+COPY --from=prod-deps --chown=nextjs:nodejs /app/node_modules ./node_modules

 # Copy built packages (includes dist/ directories)
 COPY --from=builder --chown=nextjs:nodejs /app/packages ./packages
@@ -106,7 +112,7 @@ COPY --from=builder --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/next.config.ts ./apps/web/
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/package.json ./apps/web/
 # Copy app's node_modules which contains symlinks to root node_modules
-COPY --from=builder --chown=nextjs:nodejs /app/apps/web/node_modules ./apps/web/node_modules
+COPY --from=prod-deps --chown=nextjs:nodejs /app/apps/web/node_modules ./apps/web/node_modules

 # Set working directory to web app
 WORKDIR /app/apps/web
@@ -120,6 +126,7 @@ EXPOSE ${PORT:-3000}
 # Environment variables
 ENV NODE_ENV=production
 ENV HOSTNAME="0.0.0.0"
+ENV PATH="/app/apps/web/node_modules/.bin:${PATH}"

 # Health check uses PORT env var (set by docker-compose or defaults to 3000)
 HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
@@ -129,4 +136,4 @@ HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
 ENTRYPOINT ["dumb-init", "--"]

 # Start the application
-CMD ["pnpm", "start"]
+CMD ["next", "start"]
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/apps/web/next.config.ts
+++ b/apps/web/next.config.ts
@@ -1,5 +1,16 @@
 import type { NextConfig } from "next";

+const defaultAuthMode = process.env.NODE_ENV === "development" ? "mock" : "real";
+const authMode = (process.env.NEXT_PUBLIC_AUTH_MODE ?? defaultAuthMode).toLowerCase();
+
+if (!["real", "mock"].includes(authMode)) {
+  throw new Error(`Invalid NEXT_PUBLIC_AUTH_MODE "${authMode}". Expected one of: real, mock.`);
+}
+
+if (authMode === "mock" && process.env.NODE_ENV !== "development") {
+  throw new Error("NEXT_PUBLIC_AUTH_MODE=mock is only allowed for local development.");
+}
+
 const nextConfig: NextConfig = {
  transpilePackages: ["@mosaic/ui", "@mosaic/shared"],
 };
--- a/apps/web/src/app/(auth)/login/page.mock-mode.test.tsx
+++ b/apps/web/src/app/(auth)/login/page.mock-mode.test.tsx
@@ -0,0 +1,87 @@
+import { describe, it, expect, vi, beforeEach, type Mock } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import LoginPage from "./page";
+
+const { mockPush, mockReplace, mockSearchParams, authState } = vi.hoisted(() => ({
+  mockPush: vi.fn(),
+  mockReplace: vi.fn(),
+  mockSearchParams: new URLSearchParams(),
+  authState: {
+    isAuthenticated: false,
+    refreshSession: vi.fn(),
+  },
+}));
+
+const { mockFetchWithRetry } = vi.hoisted(() => ({
+  mockFetchWithRetry: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: (): { push: Mock; replace: Mock } => ({
+    push: mockPush,
+    replace: mockReplace,
+  }),
+  useSearchParams: (): URLSearchParams => mockSearchParams,
+}));
+
+vi.mock("@/lib/config", () => ({
+  API_BASE_URL: "http://localhost:3001",
+  IS_MOCK_AUTH_MODE: true,
+}));
+
+vi.mock("@/lib/auth-client", () => ({
+  signIn: {
+    oauth2: vi.fn(),
+    email: vi.fn(),
+  },
+}));
+
+vi.mock("@/lib/auth/auth-context", () => ({
+  useAuth: (): { isAuthenticated: boolean; refreshSession: Mock } => ({
+    isAuthenticated: authState.isAuthenticated,
+    refreshSession: authState.refreshSession,
+  }),
+}));
+
+vi.mock("@/lib/auth/fetch-with-retry", () => ({
+  fetchWithRetry: mockFetchWithRetry,
+}));
+
+describe("LoginPage (mock auth mode)", (): void => {
+  beforeEach((): void => {
+    vi.clearAllMocks();
+    mockSearchParams.delete("error");
+    authState.isAuthenticated = false;
+    authState.refreshSession.mockResolvedValue(undefined);
+  });
+
+  it("should render mock auth controls", (): void => {
+    render(<LoginPage />);
+
+    expect(screen.getByText(/local mock auth mode is active/i)).toBeInTheDocument();
+    expect(screen.getByTestId("mock-auth-login")).toBeInTheDocument();
+    expect(mockFetchWithRetry).not.toHaveBeenCalled();
+  });
+
+  it("should continue with mock session and navigate to tasks", async (): Promise<void> => {
+    const user = userEvent.setup();
+    render(<LoginPage />);
+
+    await user.click(screen.getByTestId("mock-auth-login"));
+
+    await waitFor(() => {
+      expect(authState.refreshSession).toHaveBeenCalledTimes(1);
+      expect(mockPush).toHaveBeenCalledWith("/tasks");
+    });
+  });
+
+  it("should auto-redirect authenticated mock users to tasks", async (): Promise<void> => {
+    authState.isAuthenticated = true;
+    render(<LoginPage />);
+
+    await waitFor(() => {
+      expect(mockReplace).toHaveBeenCalledWith("/tasks");
+    });
+  });
+});
--- a/apps/web/src/app/(auth)/login/page.test.tsx
+++ b/apps/web/src/app/(auth)/login/page.test.tsx
@@ -16,6 +16,11 @@ const { mockOAuth2, mockSignInEmail, mockPush, mockReplace, mockSearchParams } =
  mockSearchParams: new URLSearchParams(),
 }));

+const { mockRefreshSession, mockIsAuthenticated } = vi.hoisted(() => ({
+  mockRefreshSession: vi.fn(),
+  mockIsAuthenticated: false,
+}));
+
 vi.mock("next/navigation", () => ({
  useRouter: (): { push: Mock; replace: Mock } => ({
    push: mockPush,
@@ -33,6 +38,14 @@ vi.mock("@/lib/auth-client", () => ({

 vi.mock("@/lib/config", () => ({
  API_BASE_URL: "http://localhost:3001",
+  IS_MOCK_AUTH_MODE: false,
+}));
+
+vi.mock("@/lib/auth/auth-context", () => ({
+  useAuth: (): { isAuthenticated: boolean; refreshSession: Mock } => ({
+    isAuthenticated: mockIsAuthenticated,
+    refreshSession: mockRefreshSession,
+  }),
 }));

 // Mock fetchWithRetry to behave like fetch for test purposes
@@ -91,6 +104,7 @@ describe("LoginPage", (): void => {
    mockSearchParams.delete("error");
    // Default: OAuth2 returns a resolved promise (fire-and-forget redirect)
    mockOAuth2.mockResolvedValue(undefined);
+    mockRefreshSession.mockResolvedValue(undefined);
  });

  it("renders loading state initially", (): void => {
@@ -104,19 +118,28 @@ describe("LoginPage", (): void => {
    expect(screen.getByText("Loading authentication options")).toBeInTheDocument();
  });

-  it("renders the page heading and description", (): void => {
+  it("renders the page heading and description", async (): Promise<void> => {
    mockFetchConfig(EMAIL_ONLY_CONFIG);

    render(<LoginPage />);

+    await waitFor((): void => {
+      expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    });
+
    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Welcome to Mosaic Stack");
    expect(screen.getByText(/Your personal assistant platform/i)).toBeInTheDocument();
  });

-  it("has proper layout styling", (): void => {
+  it("has proper layout styling", async (): Promise<void> => {
    mockFetchConfig(EMAIL_ONLY_CONFIG);

    const { container } = render(<LoginPage />);
+
+    await waitFor((): void => {
+      expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    });
+
    const main = container.querySelector("main");
    expect(main).toHaveClass("flex", "min-h-screen");
  });
@@ -267,7 +290,7 @@ describe("LoginPage", (): void => {

    expect(mockOAuth2).toHaveBeenCalledWith({
      providerId: "authentik",
-      callbackURL: "/",
+      callbackURL: "http://localhost:3000/",
    });
  });

@@ -430,37 +453,56 @@ describe("LoginPage", (): void => {
  /* ------------------------------------------------------------------ */

  describe("responsive layout", (): void => {
-    it("applies mobile-first padding to main element", (): void => {
+    it("applies mobile-first padding to main element", async (): Promise<void> => {
      mockFetchConfig(EMAIL_ONLY_CONFIG);

      const { container } = render(<LoginPage />);
+
+      await waitFor((): void => {
+        expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+      });
+
      const main = container.querySelector("main");

      expect(main).toHaveClass("p-4", "sm:p-8");
    });

-    it("applies responsive text size to heading", (): void => {
+    it("applies responsive text size to heading", async (): Promise<void> => {
      mockFetchConfig(EMAIL_ONLY_CONFIG);

      render(<LoginPage />);

+      await waitFor((): void => {
+        expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+      });
+
      const heading = screen.getByRole("heading", { level: 1 });
      expect(heading).toHaveClass("text-2xl", "sm:text-4xl");
    });

-    it("applies responsive padding to card container", (): void => {
+    it("applies responsive padding to card container", async (): Promise<void> => {
      mockFetchConfig(EMAIL_ONLY_CONFIG);

      const { container } = render(<LoginPage />);
+
+      await waitFor((): void => {
+        expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+      });
+
      const card = container.querySelector(".bg-white");

      expect(card).toHaveClass("p-4", "sm:p-8");
    });

-    it("card container has full width with max-width constraint", (): void => {
+    it("card container has full width with max-width constraint", async (): Promise<void> => {
      mockFetchConfig(EMAIL_ONLY_CONFIG);

      const { container } = render(<LoginPage />);
+
+      await waitFor((): void => {
+        expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+      });
+
      const wrapper = container.querySelector(".max-w-md");

      expect(wrapper).toHaveClass("w-full", "max-w-md");
@@ -539,7 +581,9 @@ describe("LoginPage", (): void => {
      });

      // LoginForm auto-focuses the email input on mount
-      expect(screen.getByLabelText(/email/i)).toHaveFocus();
+      await waitFor((): void => {
+        expect(screen.getByLabelText(/email/i)).toHaveFocus();
+      });

      // Tab forward through form: email -> password -> submit
      await user.tab();
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ b/apps/web/src/app/(auth)/login/page.tsx
@@ -5,10 +5,11 @@ import type { ReactElement } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Loader2 } from "lucide-react";
 import type { AuthConfigResponse, AuthProviderConfig } from "@mosaic/shared";
-import { API_BASE_URL } from "@/lib/config";
+import { API_BASE_URL, IS_MOCK_AUTH_MODE } from "@/lib/config";
 import { signIn } from "@/lib/auth-client";
 import { fetchWithRetry } from "@/lib/auth/fetch-with-retry";
 import { parseAuthError } from "@/lib/auth/auth-errors";
+import { useAuth } from "@/lib/auth/auth-context";
 import { OAuthButton } from "@/components/auth/OAuthButton";
 import { LoginForm } from "@/components/auth/LoginForm";
 import { AuthDivider } from "@/components/auth/AuthDivider";
@@ -45,6 +46,7 @@ export default function LoginPage(): ReactElement {
 function LoginPageContent(): ReactElement {
  const router = useRouter();
  const searchParams = useSearchParams();
+  const { isAuthenticated, refreshSession } = useAuth();
  const [config, setConfig] = useState<AuthConfigResponse | null | undefined>(undefined);
  const [loadingConfig, setLoadingConfig] = useState(true);
  const [retryCount, setRetryCount] = useState(0);
@@ -68,6 +70,18 @@ function LoginPageContent(): ReactElement {
  }, [searchParams, router]);

  useEffect(() => {
+    if (IS_MOCK_AUTH_MODE && isAuthenticated) {
+      router.replace("/tasks");
+    }
+  }, [isAuthenticated, router]);
+
+  useEffect(() => {
+    if (IS_MOCK_AUTH_MODE) {
+      setConfig({ providers: [] });
+      setLoadingConfig(false);
+      return;
+    }
+
    let cancelled = false;

    async function fetchConfig(): Promise<void> {
@@ -113,7 +127,9 @@ function LoginPageContent(): ReactElement {
  const handleOAuthLogin = useCallback((providerId: string): void => {
    setOauthLoading(providerId);
    setError(null);
-    signIn.oauth2({ providerId, callbackURL: "/" }).catch((err: unknown) => {
+    const callbackURL =
+      typeof window !== "undefined" ? new URL("/", window.location.origin).toString() : "/";
+    signIn.oauth2({ providerId, callbackURL }).catch((err: unknown) => {
      const message = err instanceof Error ? err.message : String(err);
      console.error(`[Auth] OAuth sign-in initiation failed for ${providerId}:`, message);
      setError("Unable to connect to the sign-in provider. Please try again in a moment.");
@@ -156,6 +172,48 @@ function LoginPageContent(): ReactElement {
    setRetryCount((c) => c + 1);
  }, []);

+  const handleMockLogin = useCallback(async (): Promise<void> => {
+    setError(null);
+    try {
+      await refreshSession();
+      router.push("/tasks");
+    } catch (err: unknown) {
+      const parsed = parseAuthError(err);
+      setError(parsed.message);
+    }
+  }, [refreshSession, router]);
+
+  if (IS_MOCK_AUTH_MODE) {
+    return (
+      <main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-8 bg-gray-50">
+        <div className="w-full max-w-md space-y-8">
+          <div className="text-center">
+            <h1 className="text-2xl sm:text-4xl font-bold mb-4">Welcome to Mosaic Stack</h1>
+            <p className="text-base sm:text-lg text-gray-600">
+              Local mock auth mode is active. Real sign-in is bypassed for frontend development.
+            </p>
+          </div>
+          <div className="bg-white p-4 sm:p-8 rounded-lg shadow-md space-y-4">
+            <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900">
+              Mock auth mode is local-only and blocked outside development.
+            </div>
+            {error && <AuthErrorBanner message={error} />}
+            <button
+              type="button"
+              onClick={() => {
+                void handleMockLogin();
+              }}
+              className="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
+              data-testid="mock-auth-login"
+            >
+              Continue with Mock Session
+            </button>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-8 bg-gray-50">
      <div className="w-full max-w-md space-y-8">
--- a/apps/web/src/app/(authenticated)/layout.tsx
+++ b/apps/web/src/app/(authenticated)/layout.tsx
@@ -3,6 +3,7 @@
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth/auth-context";
+import { IS_MOCK_AUTH_MODE } from "@/lib/config";
 import { Navigation } from "@/components/layout/Navigation";
 import { ChatOverlay } from "@/components/chat";
 import type { ReactNode } from "react";
@@ -36,8 +37,18 @@ export default function AuthenticatedLayout({
  return (
    <div className="min-h-screen bg-gray-50">
      <Navigation />
-      <div className="pt-16">{children}</div>
-      <ChatOverlay />
+      <div className="pt-16">
+        {IS_MOCK_AUTH_MODE && (
+          <div
+            className="border-b border-amber-300 bg-amber-50 px-4 py-2 text-sm text-amber-900"
+            data-testid="mock-auth-banner"
+          >
+            Mock Auth Mode (Local Only): Real authentication is bypassed for frontend development.
+          </div>
+        )}
+        {children}
+      </div>
+      {!IS_MOCK_AUTH_MODE && <ChatOverlay />}
    </div>
  );
 }
--- a/apps/web/src/app/(authenticated)/usage/page.test.tsx
+++ b/apps/web/src/app/(authenticated)/usage/page.test.tsx
@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import UsagePage from "./page";

@@ -113,6 +114,15 @@ function setupMocks(overrides?: { empty?: boolean; error?: boolean }): void {
  vi.mocked(fetchTaskOutcomes).mockResolvedValue(mockTaskOutcomes);
 }

+function setupPendingMocks(): void {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function -- intentionally unresolved for loading-state test
+  const pending = new Promise<never>(() => {});
+  vi.mocked(fetchUsageSummary).mockReturnValue(pending);
+  vi.mocked(fetchTokenUsage).mockReturnValue(pending);
+  vi.mocked(fetchCostBreakdown).mockReturnValue(pending);
+  vi.mocked(fetchTaskOutcomes).mockReturnValue(pending);
+}
+
 // ─── Tests ───────────────────────────────────────────────────────────

 describe("UsagePage", (): void => {
@@ -120,23 +130,32 @@ describe("UsagePage", (): void => {
    vi.clearAllMocks();
  });

-  it("should render the page title and subtitle", (): void => {
+  it("should render the page title and subtitle", async (): Promise<void> => {
    setupMocks();
    render(<UsagePage />);

+    await waitFor((): void => {
+      expect(screen.getByTestId("summary-cards")).toBeInTheDocument();
+    });
+
    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Usage");
    expect(screen.getByText("Token usage and cost overview")).toBeInTheDocument();
  });

-  it("should have proper layout structure", (): void => {
+  it("should have proper layout structure", async (): Promise<void> => {
    setupMocks();
    const { container } = render(<UsagePage />);
+
+    await waitFor((): void => {
+      expect(screen.getByTestId("summary-cards")).toBeInTheDocument();
+    });
+
    const main = container.querySelector("main");
    expect(main).toBeInTheDocument();
  });

  it("should show loading skeleton initially", (): void => {
-    setupMocks();
+    setupPendingMocks();
    render(<UsagePage />);
    expect(screen.getByTestId("loading-skeleton")).toBeInTheDocument();
  });
@@ -171,25 +190,34 @@ describe("UsagePage", (): void => {
    });
  });

-  it("should render the time range selector with three options", (): void => {
+  it("should render the time range selector with three options", async (): Promise<void> => {
    setupMocks();
    render(<UsagePage />);

+    await waitFor((): void => {
+      expect(screen.getByTestId("summary-cards")).toBeInTheDocument();
+    });
+
    expect(screen.getByText("7 Days")).toBeInTheDocument();
    expect(screen.getByText("30 Days")).toBeInTheDocument();
    expect(screen.getByText("90 Days")).toBeInTheDocument();
  });

-  it("should have 30 Days selected by default", (): void => {
+  it("should have 30 Days selected by default", async (): Promise<void> => {
    setupMocks();
    render(<UsagePage />);

+    await waitFor((): void => {
+      expect(screen.getByTestId("summary-cards")).toBeInTheDocument();
+    });
+
    const button30d = screen.getByText("30 Days");
    expect(button30d).toHaveAttribute("aria-pressed", "true");
  });

  it("should change time range when a different option is clicked", async (): Promise<void> => {
    setupMocks();
+    const user = userEvent.setup();
    render(<UsagePage />);

    // Wait for initial load
@@ -199,7 +227,11 @@ describe("UsagePage", (): void => {

    // Click 7 Days
    const button7d = screen.getByText("7 Days");
-    fireEvent.click(button7d);
+    await user.click(button7d);
+
+    await waitFor((): void => {
+      expect(fetchUsageSummary).toHaveBeenCalledWith("7d");
+    });

    expect(button7d).toHaveAttribute("aria-pressed", "true");
    expect(screen.getByText("30 Days")).toHaveAttribute("aria-pressed", "false");
--- a/apps/web/src/app/api/orchestrator/agents/route.ts
+++ b/apps/web/src/app/api/orchestrator/agents/route.ts
@@ -0,0 +1,59 @@
+import { NextResponse } from "next/server";
+
+const DEFAULT_ORCHESTRATOR_URL = "http://localhost:3001";
+
+function getOrchestratorUrl(): string {
+  return (
+    process.env.ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_API_URL ??
+    DEFAULT_ORCHESTRATOR_URL
+  );
+}
+
+/**
+ * Server-side proxy for orchestrator agent status.
+ * Keeps ORCHESTRATOR_API_KEY out of browser code.
+ */
+export async function GET(): Promise<NextResponse> {
+  const orchestratorApiKey = process.env.ORCHESTRATOR_API_KEY;
+  if (!orchestratorApiKey) {
+    return NextResponse.json(
+      { error: "ORCHESTRATOR_API_KEY is not configured on the web server." },
+      { status: 503 }
+    );
+  }
+
+  const controller = new AbortController();
+  const timeout = setTimeout(() => {
+    controller.abort();
+  }, 10_000);
+
+  try {
+    const response = await fetch(`${getOrchestratorUrl()}/agents`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": orchestratorApiKey,
+      },
+      cache: "no-store",
+      signal: controller.signal,
+    });
+
+    const text = await response.text();
+    return new NextResponse(text, {
+      status: response.status,
+      headers: {
+        "Content-Type": response.headers.get("Content-Type") ?? "application/json",
+      },
+    });
+  } catch (error) {
+    const message =
+      error instanceof Error && error.name === "AbortError"
+        ? "Orchestrator request timed out."
+        : "Unable to reach orchestrator.";
+    return NextResponse.json({ error: message }, { status: 502 });
+  } finally {
+    clearTimeout(timeout);
+  }
+}
--- a/apps/web/src/app/api/orchestrator/events/recent/route.ts
+++ b/apps/web/src/app/api/orchestrator/events/recent/route.ts
@@ -0,0 +1,47 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+const DEFAULT_ORCHESTRATOR_URL = "http://localhost:3001";
+
+function getOrchestratorUrl(): string {
+  return (
+    process.env.ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_API_URL ??
+    DEFAULT_ORCHESTRATOR_URL
+  );
+}
+
+export async function GET(request: NextRequest): Promise<NextResponse> {
+  const orchestratorApiKey = process.env.ORCHESTRATOR_API_KEY;
+  if (!orchestratorApiKey) {
+    return NextResponse.json(
+      { error: "ORCHESTRATOR_API_KEY is not configured on the web server." },
+      { status: 503 }
+    );
+  }
+
+  const limit = request.nextUrl.searchParams.get("limit");
+  const query = limit ? `?limit=${encodeURIComponent(limit)}` : "";
+
+  try {
+    const response = await fetch(`${getOrchestratorUrl()}/agents/events/recent${query}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": orchestratorApiKey,
+      },
+      cache: "no-store",
+    });
+
+    const text = await response.text();
+    return new NextResponse(text, {
+      status: response.status,
+      headers: {
+        "Content-Type": response.headers.get("Content-Type") ?? "application/json",
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: "Unable to reach orchestrator." }, { status: 502 });
+  }
+}
--- a/apps/web/src/app/api/orchestrator/events/route.ts
+++ b/apps/web/src/app/api/orchestrator/events/route.ts
@@ -0,0 +1,50 @@
+import { NextResponse } from "next/server";
+
+const DEFAULT_ORCHESTRATOR_URL = "http://localhost:3001";
+
+function getOrchestratorUrl(): string {
+  return (
+    process.env.ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_API_URL ??
+    DEFAULT_ORCHESTRATOR_URL
+  );
+}
+
+export async function GET(): Promise<Response> {
+  const orchestratorApiKey = process.env.ORCHESTRATOR_API_KEY;
+  if (!orchestratorApiKey) {
+    return NextResponse.json(
+      { error: "ORCHESTRATOR_API_KEY is not configured on the web server." },
+      { status: 503 }
+    );
+  }
+
+  try {
+    const upstream = await fetch(`${getOrchestratorUrl()}/agents/events`, {
+      method: "GET",
+      headers: {
+        "X-API-Key": orchestratorApiKey,
+      },
+      cache: "no-store",
+    });
+
+    if (!upstream.ok || !upstream.body) {
+      const text = await upstream.text();
+      return new NextResponse(text || "Failed to connect to orchestrator events stream", {
+        status: upstream.status || 502,
+      });
+    }
+
+    return new Response(upstream.body, {
+      status: 200,
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache, no-transform",
+        Connection: "keep-alive",
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: "Unable to reach orchestrator." }, { status: 502 });
+  }
+}
--- a/apps/web/src/app/api/orchestrator/health/route.ts
+++ b/apps/web/src/app/api/orchestrator/health/route.ts
@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+
+const DEFAULT_ORCHESTRATOR_URL = "http://localhost:3001";
+
+function getOrchestratorUrl(): string {
+  return (
+    process.env.ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_API_URL ??
+    DEFAULT_ORCHESTRATOR_URL
+  );
+}
+
+export async function GET(): Promise<NextResponse> {
+  const orchestratorApiKey = process.env.ORCHESTRATOR_API_KEY;
+  if (!orchestratorApiKey) {
+    return NextResponse.json(
+      { error: "ORCHESTRATOR_API_KEY is not configured on the web server." },
+      { status: 503 }
+    );
+  }
+
+  try {
+    const response = await fetch(`${getOrchestratorUrl()}/health/ready`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": orchestratorApiKey,
+      },
+      cache: "no-store",
+    });
+
+    const text = await response.text();
+    return new NextResponse(text, {
+      status: response.status,
+      headers: {
+        "Content-Type": response.headers.get("Content-Type") ?? "application/json",
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: "Unable to reach orchestrator." }, { status: 502 });
+  }
+}
--- a/apps/web/src/app/api/orchestrator/queue/pause/route.ts
+++ b/apps/web/src/app/api/orchestrator/queue/pause/route.ts
@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+
+const DEFAULT_ORCHESTRATOR_URL = "http://localhost:3001";
+
+function getOrchestratorUrl(): string {
+  return (
+    process.env.ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_API_URL ??
+    DEFAULT_ORCHESTRATOR_URL
+  );
+}
+
+export async function POST(): Promise<NextResponse> {
+  const orchestratorApiKey = process.env.ORCHESTRATOR_API_KEY;
+  if (!orchestratorApiKey) {
+    return NextResponse.json(
+      { error: "ORCHESTRATOR_API_KEY is not configured on the web server." },
+      { status: 503 }
+    );
+  }
+
+  try {
+    const response = await fetch(`${getOrchestratorUrl()}/queue/pause`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": orchestratorApiKey,
+      },
+      cache: "no-store",
+    });
+
+    const text = await response.text();
+    return new NextResponse(text, {
+      status: response.status,
+      headers: {
+        "Content-Type": response.headers.get("Content-Type") ?? "application/json",
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: "Unable to reach orchestrator." }, { status: 502 });
+  }
+}
--- a/apps/web/src/app/api/orchestrator/queue/resume/route.ts
+++ b/apps/web/src/app/api/orchestrator/queue/resume/route.ts
@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+
+const DEFAULT_ORCHESTRATOR_URL = "http://localhost:3001";
+
+function getOrchestratorUrl(): string {
+  return (
+    process.env.ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_API_URL ??
+    DEFAULT_ORCHESTRATOR_URL
+  );
+}
+
+export async function POST(): Promise<NextResponse> {
+  const orchestratorApiKey = process.env.ORCHESTRATOR_API_KEY;
+  if (!orchestratorApiKey) {
+    return NextResponse.json(
+      { error: "ORCHESTRATOR_API_KEY is not configured on the web server." },
+      { status: 503 }
+    );
+  }
+
+  try {
+    const response = await fetch(`${getOrchestratorUrl()}/queue/resume`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": orchestratorApiKey,
+      },
+      cache: "no-store",
+    });
+
+    const text = await response.text();
+    return new NextResponse(text, {
+      status: response.status,
+      headers: {
+        "Content-Type": response.headers.get("Content-Type") ?? "application/json",
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: "Unable to reach orchestrator." }, { status: 502 });
+  }
+}
--- a/apps/web/src/app/api/orchestrator/queue/stats/route.ts
+++ b/apps/web/src/app/api/orchestrator/queue/stats/route.ts
@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+
+const DEFAULT_ORCHESTRATOR_URL = "http://localhost:3001";
+
+function getOrchestratorUrl(): string {
+  return (
+    process.env.ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_ORCHESTRATOR_URL ??
+    process.env.NEXT_PUBLIC_API_URL ??
+    DEFAULT_ORCHESTRATOR_URL
+  );
+}
+
+export async function GET(): Promise<NextResponse> {
+  const orchestratorApiKey = process.env.ORCHESTRATOR_API_KEY;
+  if (!orchestratorApiKey) {
+    return NextResponse.json(
+      { error: "ORCHESTRATOR_API_KEY is not configured on the web server." },
+      { status: 503 }
+    );
+  }
+
+  try {
+    const response = await fetch(`${getOrchestratorUrl()}/queue/stats`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": orchestratorApiKey,
+      },
+      cache: "no-store",
+    });
+
+    const text = await response.text();
+    return new NextResponse(text, {
+      status: response.status,
+      headers: {
+        "Content-Type": response.headers.get("Content-Type") ?? "application/json",
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: "Unable to reach orchestrator." }, { status: 502 });
+  }
+}
--- a/apps/web/src/components/hud/HUD.tsx
+++ b/apps/web/src/components/hud/HUD.tsx
@@ -55,6 +55,15 @@ const WIDGET_REGISTRY = {
    minWidth: 1,
    minHeight: 1,
  },
+  OrchestratorEventsWidget: {
+    name: "orchestrator-events",
+    displayName: "Orchestrator Events",
+    description: "Recent events and stream health for orchestration",
+    defaultWidth: 2,
+    defaultHeight: 2,
+    minWidth: 1,
+    minHeight: 1,
+  },
 } as const;

 type WidgetRegistryKey = keyof typeof WIDGET_REGISTRY;
@@ -73,7 +82,7 @@ export function HUD({ className = "" }: HUDProps): React.JSX.Element {

  const handleAddWidget = (widgetType: WidgetRegistryKey): void => {
    const widgetConfig = WIDGET_REGISTRY[widgetType];
-    const widgetId = `${widgetType.toLowerCase()}-${String(Date.now())}`;
+    const widgetId = `${widgetConfig.name}-${String(Date.now())}`;

    // Find the next available position
    const maxY = currentLayout?.layout.reduce((max, w): number => Math.max(max, w.y + w.h), 0) ?? 0;
--- a/apps/web/src/components/hud/WidgetRenderer.test.tsx
+++ b/apps/web/src/components/hud/WidgetRenderer.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { WidgetRenderer } from "./WidgetRenderer";
+import type { WidgetPlacement } from "@mosaic/shared";
+
+vi.mock("@/components/widgets", () => ({
+  TasksWidget: ({ id }: { id: string }): React.JSX.Element => <div>Tasks Widget {id}</div>,
+  CalendarWidget: ({ id }: { id: string }): React.JSX.Element => <div>Calendar Widget {id}</div>,
+  QuickCaptureWidget: ({ id }: { id: string }): React.JSX.Element => (
+    <div>Quick Capture Widget {id}</div>
+  ),
+  AgentStatusWidget: ({ id }: { id: string }): React.JSX.Element => (
+    <div>Agent Status Widget {id}</div>
+  ),
+  OrchestratorEventsWidget: ({ id }: { id: string }): React.JSX.Element => (
+    <div>Orchestrator Events Widget {id}</div>
+  ),
+}));
+
+function createWidgetPlacement(id: string): WidgetPlacement {
+  return {
+    i: id,
+    x: 0,
+    y: 0,
+    w: 2,
+    h: 2,
+  };
+}
+
+describe("WidgetRenderer", () => {
+  it("renders hyphenated quick-capture widget IDs correctly", () => {
+    render(<WidgetRenderer widget={createWidgetPlacement("quick-capture-123")} />);
+    expect(screen.getByText("Quick Capture Widget quick-capture-123")).toBeInTheDocument();
+  });
+
+  it("renders hyphenated agent-status widget IDs correctly", () => {
+    render(<WidgetRenderer widget={createWidgetPlacement("agent-status-123")} />);
+    expect(screen.getByText("Agent Status Widget agent-status-123")).toBeInTheDocument();
+  });
+
+  it("renders hyphenated orchestrator-events widget IDs correctly", () => {
+    render(<WidgetRenderer widget={createWidgetPlacement("orchestrator-events-123")} />);
+    expect(
+      screen.getByText("Orchestrator Events Widget orchestrator-events-123")
+    ).toBeInTheDocument();
+  });
+});
--- a/apps/web/src/components/hud/WidgetRenderer.tsx
+++ b/apps/web/src/components/hud/WidgetRenderer.tsx
@@ -10,6 +10,7 @@ import {
  CalendarWidget,
  QuickCaptureWidget,
  AgentStatusWidget,
+  OrchestratorEventsWidget,
 } from "@/components/widgets";
 import type { WidgetPlacement } from "@mosaic/shared";

@@ -24,6 +25,7 @@ const WIDGET_COMPONENTS = {
  calendar: CalendarWidget,
  "quick-capture": QuickCaptureWidget,
  "agent-status": AgentStatusWidget,
+  "orchestrator-events": OrchestratorEventsWidget,
 };

 const WIDGET_CONFIG = {
@@ -43,6 +45,10 @@ const WIDGET_CONFIG = {
    displayName: "Agent Status",
    description: "View running agent sessions",
  },
+  "orchestrator-events": {
+    displayName: "Orchestrator Events",
+    description: "Recent orchestration events and stream health",
+  },
 };

 export function WidgetRenderer({
@@ -50,8 +56,12 @@ export function WidgetRenderer({
  isEditing = false,
  onRemove,
 }: WidgetRendererProps): React.JSX.Element {
-  // Extract widget type from ID (e.g., "tasks-123" -> "tasks")
-  const widgetType = widget.i.split("-")[0] as keyof typeof WIDGET_COMPONENTS;
+  // Extract widget type from ID by removing the trailing unique suffix
+  // (e.g., "agent-status-123" -> "agent-status").
+  const separatorIndex = widget.i.lastIndexOf("-");
+  const widgetType = (
+    separatorIndex > 0 ? widget.i.substring(0, separatorIndex) : widget.i
+  ) as keyof typeof WIDGET_COMPONENTS;
  const WidgetComponent = WIDGET_COMPONENTS[widgetType];
  const config = WIDGET_CONFIG[widgetType] || { displayName: "Widget", description: "" };

--- a/apps/web/src/components/knowledge/LinkAutocomplete.tsx
+++ b/apps/web/src/components/knowledge/LinkAutocomplete.tsx
@@ -56,6 +56,15 @@ export function LinkAutocomplete({
  const mirrorRef = useRef<HTMLDivElement | null>(null);
  const cursorSpanRef = useRef<HTMLSpanElement | null>(null);

+  // Refs for event handler to avoid stale closures when effects re-attach listeners
+  const stateRef = useRef(state);
+  const resultsRef = useRef(results);
+  const selectedIndexRef = useRef(selectedIndex);
+  const insertLinkRef = useRef<((result: SearchResult) => void) | null>(null);
+  stateRef.current = state;
+  resultsRef.current = results;
+  selectedIndexRef.current = selectedIndex;
+
  /**
   * Search for knowledge entries matching the query.
   * Accepts an AbortSignal to allow cancellation of in-flight requests,
@@ -254,47 +263,48 @@ export function LinkAutocomplete({
  }, [textareaRef, state.isOpen, calculateDropdownPosition, debouncedSearch]);

  /**
-   * Handle keyboard navigation in the dropdown
+   * Handle keyboard navigation in the dropdown.
+   * Reads from refs to avoid stale closures when the effect
+   * that attaches this listener hasn't re-run yet.
   */
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent): void => {
-      if (!state.isOpen) return;
+  const handleKeyDown = useCallback((e: KeyboardEvent): void => {
+    if (!stateRef.current.isOpen) return;

-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault();
-          setSelectedIndex((prev) => (prev + 1) % results.length);
-          break;
+    const currentResults = resultsRef.current;

-        case "ArrowUp":
-          e.preventDefault();
-          setSelectedIndex((prev) => (prev - 1 + results.length) % results.length);
-          break;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev + 1) % currentResults.length);
+        break;

-        case "Enter":
-          e.preventDefault();
-          if (results.length > 0 && selectedIndex >= 0) {
-            const selected = results[selectedIndex];
-            if (selected) {
-              insertLink(selected);
-            }
+      case "ArrowUp":
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + currentResults.length) % currentResults.length);
+        break;
+
+      case "Enter":
+        e.preventDefault();
+        if (currentResults.length > 0 && selectedIndexRef.current >= 0) {
+          const selected = currentResults[selectedIndexRef.current];
+          if (selected) {
+            insertLinkRef.current?.(selected);
          }
-          break;
+        }
+        break;

-        case "Escape":
-          e.preventDefault();
-          setState({
-            isOpen: false,
-            query: "",
-            position: { top: 0, left: 0 },
-            triggerIndex: -1,
-          });
-          setResults([]);
-          break;
-      }
-    },
-    [state.isOpen, results, selectedIndex]
-  );
+      case "Escape":
+        e.preventDefault();
+        setState({
+          isOpen: false,
+          query: "",
+          position: { top: 0, left: 0 },
+          triggerIndex: -1,
+        });
+        setResults([]);
+        break;
+    }
+  }, []);

  /**
   * Insert the selected link into the textarea
@@ -330,6 +340,7 @@ export function LinkAutocomplete({
    },
    [textareaRef, state.triggerIndex, onInsert]
  );
+  insertLinkRef.current = insertLink;

  /**
   * Handle click on a result
--- a/apps/web/src/components/knowledge/tests/LinkAutocomplete.test.tsx
+++ b/apps/web/src/components/knowledge/tests/LinkAutocomplete.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React from "react";
 import { render, screen, waitFor, fireEvent, act } from "@testing-library/react";
@@ -352,10 +351,7 @@ describe("LinkAutocomplete", (): void => {
    vi.useRealTimers();
  });

-  // TODO: Fix async/timer interaction - component works but test has timing issues with fake timers
-  it.skip("should perform debounced search when typing query", async (): Promise<void> => {
-    vi.useFakeTimers();
-
+  it("should perform debounced search when typing query", async (): Promise<void> => {
    const mockResults = {
      data: [
        {
@@ -395,11 +391,6 @@ describe("LinkAutocomplete", (): void => {
    // Should not call API immediately
    expect(mockApiRequest).not.toHaveBeenCalled();

-    // Fast-forward 300ms and let promises resolve
-    await act(async () => {
-      await vi.runAllTimersAsync();
-    });
-
    await waitFor(() => {
      expect(mockApiRequest).toHaveBeenCalledWith(
        "/api/knowledge/search?q=test&limit=10",
@@ -411,14 +402,9 @@ describe("LinkAutocomplete", (): void => {
    await waitFor(() => {
      expect(screen.getByText("Test Entry")).toBeInTheDocument();
    });
-
-    vi.useRealTimers();
  });

-  // TODO: Fix async/timer interaction - component works but test has timing issues with fake timers
-  it.skip("should navigate results with arrow keys", async (): Promise<void> => {
-    vi.useFakeTimers();
-
+  it("should navigate results with arrow keys", async (): Promise<void> => {
    const mockResults = {
      data: [
        {
@@ -471,10 +457,6 @@ describe("LinkAutocomplete", (): void => {
      fireEvent.input(textarea);
    });

-    await act(async () => {
-      await vi.runAllTimersAsync();
-    });
-
    await waitFor(() => {
      expect(screen.getByText("Entry One")).toBeInTheDocument();
    });
@@ -484,7 +466,9 @@ describe("LinkAutocomplete", (): void => {
    expect(firstItem).toHaveClass("bg-blue-50");

    // Press ArrowDown
-    fireEvent.keyDown(textarea, { key: "ArrowDown" });
+    act(() => {
+      fireEvent.keyDown(textarea, { key: "ArrowDown" });
+    });

    // Second item should now be selected
    await waitFor(() => {
@@ -493,21 +477,18 @@ describe("LinkAutocomplete", (): void => {
    });

    // Press ArrowUp
-    fireEvent.keyDown(textarea, { key: "ArrowUp" });
+    act(() => {
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+    });

    // First item should be selected again
    await waitFor(() => {
      const firstItem = screen.getByText("Entry One").closest("li");
      expect(firstItem).toHaveClass("bg-blue-50");
    });
-
-    vi.useRealTimers();
  });

-  // TODO: Fix async/timer interaction - component works but test has timing issues with fake timers
-  it.skip("should insert link on Enter key", async (): Promise<void> => {
-    vi.useFakeTimers();
-
+  it("should insert link on Enter key", async (): Promise<void> => {
    const mockResults = {
      data: [
        {
@@ -544,10 +525,6 @@ describe("LinkAutocomplete", (): void => {
      fireEvent.input(textarea);
    });

-    await act(async () => {
-      await vi.runAllTimersAsync();
-    });
-
    await waitFor(() => {
      expect(screen.getByText("Test Entry")).toBeInTheDocument();
    });
@@ -558,14 +535,9 @@ describe("LinkAutocomplete", (): void => {
    await waitFor(() => {
      expect(onInsertMock).toHaveBeenCalledWith("[[test-entry|Test Entry]]");
    });
-
-    vi.useRealTimers();
  });

-  // TODO: Fix async/timer interaction - component works but test has timing issues with fake timers
-  it.skip("should insert link on click", async (): Promise<void> => {
-    vi.useFakeTimers();
-
+  it("should insert link on click", async (): Promise<void> => {
    const mockResults = {
      data: [
        {
@@ -602,10 +574,6 @@ describe("LinkAutocomplete", (): void => {
      fireEvent.input(textarea);
    });

-    await act(async () => {
-      await vi.runAllTimersAsync();
-    });
-
    await waitFor(() => {
      expect(screen.getByText("Test Entry")).toBeInTheDocument();
    });
@@ -616,14 +584,9 @@ describe("LinkAutocomplete", (): void => {
    await waitFor(() => {
      expect(onInsertMock).toHaveBeenCalledWith("[[test-entry|Test Entry]]");
    });
-
-    vi.useRealTimers();
  });

-  // TODO: Fix async/timer interaction - component works but test has timing issues with fake timers
-  it.skip("should close dropdown on Escape key", async (): Promise<void> => {
-    vi.useFakeTimers();
-
+  it("should close dropdown on Escape key", async (): Promise<void> => {
    render(<LinkAutocomplete textareaRef={textareaRef} onInsert={onInsertMock} />);

    const textarea = textareaRef.current;
@@ -636,28 +599,19 @@ describe("LinkAutocomplete", (): void => {
      fireEvent.input(textarea);
    });

-    await act(async () => {
-      await vi.runAllTimersAsync();
-    });
-
    await waitFor(() => {
-      expect(screen.getByText(/Start typing to search/)).toBeInTheDocument();
+      expect(screen.getByText("↑↓ Navigate • Enter Select • Esc Cancel")).toBeInTheDocument();
    });

    // Press Escape
    fireEvent.keyDown(textarea, { key: "Escape" });

    await waitFor(() => {
-      expect(screen.queryByText(/Start typing to search/)).not.toBeInTheDocument();
+      expect(screen.queryByText("↑↓ Navigate • Enter Select • Esc Cancel")).not.toBeInTheDocument();
    });
-
-    vi.useRealTimers();
  });

-  // TODO: Fix async/timer interaction - component works but test has timing issues with fake timers
-  it.skip("should close dropdown when closing brackets are typed", async (): Promise<void> => {
-    vi.useFakeTimers();
-
+  it("should close dropdown when closing brackets are typed", async (): Promise<void> => {
    render(<LinkAutocomplete textareaRef={textareaRef} onInsert={onInsertMock} />);

    const textarea = textareaRef.current;
@@ -670,12 +624,8 @@ describe("LinkAutocomplete", (): void => {
      fireEvent.input(textarea);
    });

-    await act(async () => {
-      await vi.runAllTimersAsync();
-    });
-
    await waitFor(() => {
-      expect(screen.getByText(/Start typing to search/)).toBeInTheDocument();
+      expect(screen.getByText("↑↓ Navigate • Enter Select • Esc Cancel")).toBeInTheDocument();
    });

    // Type closing brackets
@@ -686,16 +636,11 @@ describe("LinkAutocomplete", (): void => {
    });

    await waitFor(() => {
-      expect(screen.queryByText(/Start typing to search/)).not.toBeInTheDocument();
+      expect(screen.queryByText("↑↓ Navigate • Enter Select • Esc Cancel")).not.toBeInTheDocument();
    });
-
-    vi.useRealTimers();
  });

-  // TODO: Fix async/timer interaction - component works but test has timing issues with fake timers
-  it.skip("should show 'No entries found' when search returns no results", async (): Promise<void> => {
-    vi.useFakeTimers();
-
+  it("should show 'No entries found' when search returns no results", async (): Promise<void> => {
    mockApiRequest.mockResolvedValue({
      data: [],
      meta: { total: 0, page: 1, limit: 10, totalPages: 0 },
@@ -713,32 +658,24 @@ describe("LinkAutocomplete", (): void => {
      fireEvent.input(textarea);
    });

-    await act(async () => {
-      await vi.runAllTimersAsync();
-    });
-
    await waitFor(() => {
      expect(screen.getByText("No entries found")).toBeInTheDocument();
    });
-
-    vi.useRealTimers();
  });

-  // TODO: Fix async/timer interaction - component works but test has timing issues with fake timers
-  it.skip("should show loading state while searching", async (): Promise<void> => {
-    vi.useFakeTimers();
-
+  it("should show loading state while searching", async (): Promise<void> => {
    // Mock a slow API response
-    let resolveSearch: (value: unknown) => void;
-    const searchPromise = new Promise((resolve) => {
+    let resolveSearch: (value: {
+      data: unknown[];
+      meta: { total: number; page: number; limit: number; totalPages: number };
+    }) => void = () => undefined;
+    const searchPromise = new Promise<{
+      data: unknown[];
+      meta: { total: number; page: number; limit: number; totalPages: number };
+    }>((resolve) => {
      resolveSearch = resolve;
    });
-    mockApiRequest.mockReturnValue(
-      searchPromise as Promise<{
-        data: unknown[];
-        meta: { total: number; page: number; limit: number; totalPages: number };
-      }>
-    );
+    mockApiRequest.mockReturnValue(searchPromise);

    render(<LinkAutocomplete textareaRef={textareaRef} onInsert={onInsertMock} />);

@@ -752,16 +689,12 @@ describe("LinkAutocomplete", (): void => {
      fireEvent.input(textarea);
    });

-    await act(async () => {
-      await vi.runAllTimersAsync();
-    });
-
    await waitFor(() => {
      expect(screen.getByText("Searching...")).toBeInTheDocument();
    });

    // Resolve the search
-    resolveSearch!({
+    resolveSearch({
      data: [],
      meta: { total: 0, page: 1, limit: 10, totalPages: 0 },
    });
@@ -769,14 +702,9 @@ describe("LinkAutocomplete", (): void => {
    await waitFor(() => {
      expect(screen.queryByText("Searching...")).not.toBeInTheDocument();
    });
-
-    vi.useRealTimers();
  });

-  // TODO: Fix async/timer interaction - component works but test has timing issues with fake timers
-  it.skip("should display summary preview for entries", async (): Promise<void> => {
-    vi.useFakeTimers();
-
+  it("should display summary preview for entries", async (): Promise<void> => {
    const mockResults = {
      data: [
        {
@@ -813,14 +741,8 @@ describe("LinkAutocomplete", (): void => {
      fireEvent.input(textarea);
    });

-    await act(async () => {
-      await vi.runAllTimersAsync();
-    });
-
    await waitFor(() => {
      expect(screen.getByText("This is a helpful summary")).toBeInTheDocument();
    });
-
-    vi.useRealTimers();
  });
 });
--- a/apps/web/src/components/widgets/AgentStatusWidget.tsx
+++ b/apps/web/src/components/widgets/AgentStatusWidget.tsx
@@ -2,10 +2,9 @@
 * Agent Status Widget - shows running agents
 */

-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Bot, Activity, AlertCircle, CheckCircle, Clock } from "lucide-react";
 import type { WidgetProps } from "@mosaic/shared";
-import { ORCHESTRATOR_URL } from "@/lib/config";

 interface Agent {
  agentId: string;
@@ -22,46 +21,57 @@ export function AgentStatusWidget({ id: _id, config: _config }: WidgetProps): Re
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

+  const fetchAgents = useCallback(async (): Promise<void> => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch("/api/orchestrator/agents", {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch agents: ${response.statusText}`);
+      }
+
+      const data = (await response.json()) as Agent[];
+      setAgents(data);
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Unknown error";
+      console.error("Failed to fetch agents:", errorMessage);
+      setError(errorMessage);
+      setAgents([]); // Clear agents on error
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
  // Fetch agents from orchestrator API
  useEffect(() => {
-    const fetchAgents = async (): Promise<void> => {
-      setIsLoading(true);
-      setError(null);
-
-      try {
-        const response = await fetch(`${ORCHESTRATOR_URL}/agents`, {
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-
-        if (!response.ok) {
-          throw new Error(`Failed to fetch agents: ${response.statusText}`);
-        }
-
-        const data = (await response.json()) as Agent[];
-        setAgents(data);
-      } catch (err: unknown) {
-        const errorMessage = err instanceof Error ? err.message : "Unknown error";
-        console.error("Failed to fetch agents:", errorMessage);
-        setError(errorMessage);
-        setAgents([]); // Clear agents on error
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
    void fetchAgents();

    // Refresh every 30 seconds
    const interval = setInterval(() => {
      void fetchAgents();
-    }, 30000);
+    }, 20000);
+
+    const eventSource =
+      typeof EventSource !== "undefined" ? new EventSource("/api/orchestrator/events") : null;
+    if (eventSource) {
+      eventSource.onmessage = (): void => {
+        void fetchAgents();
+      };
+      eventSource.onerror = (): void => {
+        // polling remains fallback
+      };
+    }

    return (): void => {
      clearInterval(interval);
+      eventSource?.close();
    };
-  }, []);
+  }, [fetchAgents]);

  const getStatusIcon = (status: string): React.JSX.Element => {
    const statusLower = status.toLowerCase();
--- a/apps/web/src/components/widgets/OrchestratorEventsWidget.tsx
+++ b/apps/web/src/components/widgets/OrchestratorEventsWidget.tsx
@@ -0,0 +1,190 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Activity, DatabaseZap, Loader2, Wifi, WifiOff } from "lucide-react";
+import type { WidgetProps } from "@mosaic/shared";
+
+interface OrchestratorEvent {
+  type: string;
+  timestamp: string;
+  agentId?: string;
+  taskId?: string;
+  data?: Record<string, unknown>;
+}
+
+interface RecentEventsResponse {
+  events: OrchestratorEvent[];
+}
+
+function isMatrixSignal(event: OrchestratorEvent): boolean {
+  const text = JSON.stringify(event).toLowerCase();
+  return (
+    text.includes("matrix") ||
+    text.includes("room") ||
+    text.includes("channel") ||
+    text.includes("thread")
+  );
+}
+
+export function OrchestratorEventsWidget({
+  id: _id,
+  config: _config,
+}: WidgetProps): React.JSX.Element {
+  const [events, setEvents] = useState<OrchestratorEvent[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [streamConnected, setStreamConnected] = useState(false);
+  const [backendReady, setBackendReady] = useState<boolean | null>(null);
+
+  const loadRecentEvents = useCallback(async (): Promise<void> => {
+    try {
+      const response = await fetch("/api/orchestrator/events/recent?limit=25");
+      if (!response.ok) {
+        throw new Error(`Unable to load events: HTTP ${String(response.status)}`);
+      }
+      const payload = (await response.json()) as unknown;
+      const events =
+        payload &&
+        typeof payload === "object" &&
+        "events" in payload &&
+        Array.isArray(payload.events)
+          ? (payload.events as RecentEventsResponse["events"])
+          : [];
+      setEvents(events);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unable to load events.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const loadHealth = useCallback(async (): Promise<void> => {
+    try {
+      const response = await fetch("/api/orchestrator/health");
+      setBackendReady(response.ok);
+    } catch {
+      setBackendReady(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadRecentEvents();
+    void loadHealth();
+
+    const eventSource =
+      typeof EventSource !== "undefined" ? new EventSource("/api/orchestrator/events") : null;
+    if (eventSource) {
+      eventSource.onopen = (): void => {
+        setStreamConnected(true);
+      };
+      eventSource.onmessage = (): void => {
+        void loadRecentEvents();
+        void loadHealth();
+      };
+      eventSource.onerror = (): void => {
+        setStreamConnected(false);
+      };
+    }
+
+    const interval = setInterval(() => {
+      void loadRecentEvents();
+      void loadHealth();
+    }, 15000);
+
+    return (): void => {
+      clearInterval(interval);
+      eventSource?.close();
+    };
+  }, [loadHealth, loadRecentEvents]);
+
+  const matrixSignals = useMemo(
+    () => events.filter((event) => isMatrixSignal(event)).length,
+    [events]
+  );
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="w-5 h-5 text-gray-400 animate-spin" />
+        <span className="ml-2 text-gray-500 text-sm">Loading orchestrator events...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-center">
+        <WifiOff className="w-5 h-5 text-amber-500 mb-2" />
+        <span className="text-sm text-amber-600">{error}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full space-y-3">
+      <div className="flex items-center justify-between text-xs">
+        <div className="flex items-center gap-2 text-gray-600 dark:text-gray-300">
+          {streamConnected ? (
+            <Wifi className="w-3 h-3 text-green-500" />
+          ) : (
+            <WifiOff className="w-3 h-3 text-gray-400" />
+          )}
+          <span>{streamConnected ? "Live stream connected" : "Polling mode"}</span>
+          <span
+            className={`rounded px-1.5 py-0.5 ${
+              backendReady === true
+                ? "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300"
+                : backendReady === false
+                  ? "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300"
+                  : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300"
+            }`}
+          >
+            {backendReady === true ? "ready" : backendReady === false ? "degraded" : "unknown"}
+          </span>
+        </div>
+        <div className="flex items-center gap-1 rounded bg-blue-50 dark:bg-blue-950 px-2 py-1 text-blue-700 dark:text-blue-300">
+          <DatabaseZap className="w-3 h-3" />
+          <span>Matrix signals: {matrixSignals}</span>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto space-y-2">
+        {events.length === 0 ? (
+          <div className="text-center text-sm text-gray-500 py-4">
+            No recent orchestration events.
+          </div>
+        ) : (
+          events
+            .slice()
+            .reverse()
+            .map((event, index) => (
+              <div
+                key={`${event.timestamp}-${event.type}-${String(index)}`}
+                className="rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-2 py-2"
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <Activity className="w-3 h-3 text-blue-500 shrink-0" />
+                    <span className="text-xs font-medium text-gray-900 dark:text-gray-100 truncate">
+                      {event.type}
+                    </span>
+                    {isMatrixSignal(event) && (
+                      <span className="text-[10px] rounded bg-indigo-100 dark:bg-indigo-950 text-indigo-700 dark:text-indigo-300 px-1.5 py-0.5">
+                        matrix
+                      </span>
+                    )}
+                  </div>
+                  <span className="text-[10px] text-gray-500">
+                    {new Date(event.timestamp).toLocaleTimeString()}
+                  </span>
+                </div>
+                <div className="mt-1 text-[11px] text-gray-600 dark:text-gray-300">
+                  {event.taskId ? `Task ${event.taskId}` : "Task n/a"}
+                  {event.agentId ? ` · Agent ${event.agentId.slice(0, 8)}` : ""}
+                </div>
+              </div>
+            ))
+        )}
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/components/widgets/TaskProgressWidget.tsx
+++ b/apps/web/src/components/widgets/TaskProgressWidget.tsx
@@ -5,10 +5,9 @@
 * including status, elapsed time, and work item details.
 */

-import { useState, useEffect } from "react";
-import { Activity, CheckCircle, XCircle, Clock, Loader2 } from "lucide-react";
+import { useState, useEffect, useCallback } from "react";
+import { Activity, CheckCircle, XCircle, Clock, Loader2, Pause, Play } from "lucide-react";
 import type { WidgetProps } from "@mosaic/shared";
-import { ORCHESTRATOR_URL } from "@/lib/config";

 interface AgentTask {
  agentId: string;
@@ -20,6 +19,21 @@ interface AgentTask {
  error?: string;
 }

+interface QueueStats {
+  pending: number;
+  active: number;
+  completed: number;
+  failed: number;
+  delayed: number;
+}
+
+interface RecentOrchestratorEvent {
+  type: string;
+  timestamp: string;
+  taskId?: string;
+  agentId?: string;
+}
+
 function getElapsedTime(spawnedAt: string, completedAt?: string): string {
  const start = new Date(spawnedAt).getTime();
  const end = completedAt ? new Date(completedAt).getTime() : Date.now();
@@ -95,34 +109,108 @@ function getAgentTypeLabel(agentType: string): string {

 export function TaskProgressWidget({ id: _id, config: _config }: WidgetProps): React.JSX.Element {
  const [tasks, setTasks] = useState<AgentTask[]>([]);
+  const [queueStats, setQueueStats] = useState<QueueStats | null>(null);
+  const [recentEvents, setRecentEvents] = useState<RecentOrchestratorEvent[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
+  const [isQueuePaused, setIsQueuePaused] = useState(false);
+  const [isActionPending, setIsActionPending] = useState(false);
+
+  const fetchTasks = useCallback(async (): Promise<void> => {
+    try {
+      const res = await fetch("/api/orchestrator/agents");
+      if (!res.ok) throw new Error(`HTTP ${String(res.status)}`);
+      const data = (await res.json()) as AgentTask[];
+      setTasks(data);
+      setError(null);
+      setIsLoading(false);
+    } catch {
+      setError("Unable to reach orchestrator");
+      setIsLoading(false);
+    }
+  }, []);
+
+  const fetchQueueStats = useCallback(async (): Promise<void> => {
+    try {
+      const res = await fetch("/api/orchestrator/queue/stats");
+      if (!res.ok) throw new Error(`HTTP ${String(res.status)}`);
+      const data = (await res.json()) as QueueStats;
+      setQueueStats(data);
+      // Heuristic: active=0 with pending>0 for sustained windows usually means paused.
+      setIsQueuePaused(data.active === 0 && data.pending > 0);
+    } catch {
+      // Keep widget functional even if queue controls are temporarily unavailable.
+    }
+  }, []);
+
+  const fetchRecentEvents = useCallback(async (): Promise<void> => {
+    try {
+      const res = await fetch("/api/orchestrator/events/recent?limit=5");
+      if (!res.ok) throw new Error(`HTTP ${String(res.status)}`);
+      const payload = (await res.json()) as unknown;
+      const events =
+        payload &&
+        typeof payload === "object" &&
+        "events" in payload &&
+        Array.isArray(payload.events)
+          ? (payload.events as RecentOrchestratorEvent[])
+          : [];
+      setRecentEvents(events);
+    } catch {
+      // Optional enhancement path; do not fail widget if recent-events endpoint is unavailable.
+    }
+  }, []);
+
+  const setQueueState = useCallback(
+    async (action: "pause" | "resume"): Promise<void> => {
+      setIsActionPending(true);
+      try {
+        const res = await fetch(`/api/orchestrator/queue/${action}`, {
+          method: "POST",
+        });
+        if (!res.ok) throw new Error(`HTTP ${String(res.status)}`);
+        setIsQueuePaused(action === "pause");
+        await fetchQueueStats();
+      } catch {
+        setError("Unable to control queue state");
+      } finally {
+        setIsActionPending(false);
+      }
+    },
+    [fetchQueueStats]
+  );

  useEffect(() => {
-    const fetchTasks = (): void => {
-      fetch(`${ORCHESTRATOR_URL}/agents`)
-        .then((res) => {
-          if (!res.ok) throw new Error(`HTTP ${String(res.status)}`);
-          return res.json() as Promise<AgentTask[]>;
-        })
-        .then((data) => {
-          setTasks(data);
-          setError(null);
-          setIsLoading(false);
-        })
-        .catch(() => {
-          setError("Unable to reach orchestrator");
-          setIsLoading(false);
-        });
-    };
+    void fetchTasks();
+    void fetchQueueStats();
+    void fetchRecentEvents();

-    fetchTasks();
-    const interval = setInterval(fetchTasks, 15000);
+    const interval = setInterval(() => {
+      void fetchTasks();
+      void fetchQueueStats();
+      void fetchRecentEvents();
+    }, 15000);
+
+    const eventSource =
+      typeof EventSource !== "undefined" ? new EventSource("/api/orchestrator/events") : null;
+    if (eventSource) {
+      eventSource.onmessage = (): void => {
+        void fetchTasks();
+        void fetchQueueStats();
+        void fetchRecentEvents();
+      };
+      eventSource.onerror = (): void => {
+        // Polling remains the resilience path.
+      };
+    }

    return (): void => {
      clearInterval(interval);
+      eventSource?.close();
    };
-  }, []);
+  }, [fetchTasks, fetchQueueStats, fetchRecentEvents]);
+
+  const latestEvent = recentEvents.length > 0 ? recentEvents[recentEvents.length - 1] : null;

  const stats = {
    total: tasks.length,
@@ -152,6 +240,30 @@ export function TaskProgressWidget({ id: _id, config: _config }: WidgetProps): R

  return (
    <div className="flex flex-col h-full space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="text-xs text-gray-500 dark:text-gray-400">
+          Queue: {isQueuePaused ? "Paused" : "Running"}
+        </div>
+        <button
+          type="button"
+          onClick={(): void => {
+            void setQueueState(isQueuePaused ? "resume" : "pause");
+          }}
+          disabled={isActionPending}
+          className="inline-flex items-center gap-1 rounded border border-gray-300 dark:border-gray-700 px-2 py-1 text-xs hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-50"
+        >
+          {isQueuePaused ? <Play className="w-3 h-3" /> : <Pause className="w-3 h-3" />}
+          {isQueuePaused ? "Resume" : "Pause"}
+        </button>
+      </div>
+
+      {latestEvent && (
+        <div className="rounded bg-gray-50 dark:bg-gray-800 px-2 py-1 text-xs text-gray-600 dark:text-gray-300">
+          Latest: {latestEvent.type}
+          {latestEvent.taskId ? ` · ${latestEvent.taskId}` : ""}
+        </div>
+      )}
+
      {/* Summary stats */}
      <div className="grid grid-cols-4 gap-1 text-center text-xs">
        <div className="bg-gray-50 dark:bg-gray-800 rounded p-2">
@@ -174,6 +286,29 @@ export function TaskProgressWidget({ id: _id, config: _config }: WidgetProps): R
        </div>
      </div>

+      {queueStats && (
+        <div className="grid grid-cols-3 gap-1 text-center text-xs">
+          <div className="bg-gray-50 dark:bg-gray-800 rounded p-1">
+            <div className="font-semibold text-gray-700 dark:text-gray-200">
+              {queueStats.pending}
+            </div>
+            <div className="text-gray-500">Queued</div>
+          </div>
+          <div className="bg-gray-50 dark:bg-gray-800 rounded p-1">
+            <div className="font-semibold text-gray-700 dark:text-gray-200">
+              {queueStats.active}
+            </div>
+            <div className="text-gray-500">Workers</div>
+          </div>
+          <div className="bg-gray-50 dark:bg-gray-800 rounded p-1">
+            <div className="font-semibold text-gray-700 dark:text-gray-200">
+              {queueStats.failed}
+            </div>
+            <div className="text-gray-500">Failed</div>
+          </div>
+        </div>
+      )}
+
      {/* Task list */}
      <div className="flex-1 overflow-auto space-y-2">
        {tasks.length === 0 ? (
--- a/apps/web/src/components/widgets/WidgetRegistry.tsx
+++ b/apps/web/src/components/widgets/WidgetRegistry.tsx
@@ -10,6 +10,7 @@ import { QuickCaptureWidget } from "./QuickCaptureWidget";
 import { AgentStatusWidget } from "./AgentStatusWidget";
 import { ActiveProjectsWidget } from "./ActiveProjectsWidget";
 import { TaskProgressWidget } from "./TaskProgressWidget";
+import { OrchestratorEventsWidget } from "./OrchestratorEventsWidget";

 export interface WidgetDefinition {
  name: string;
@@ -95,6 +96,17 @@ export const widgetRegistry: Record<string, WidgetDefinition> = {
    minHeight: 2,
    maxWidth: 3,
  },
+  OrchestratorEventsWidget: {
+    name: "OrchestratorEventsWidget",
+    displayName: "Orchestrator Events",
+    description: "Recent orchestration events with stream/Matrix visibility",
+    component: OrchestratorEventsWidget,
+    defaultWidth: 2,
+    defaultHeight: 2,
+    minWidth: 1,
+    minHeight: 2,
+    maxWidth: 4,
+  },
 };

 /**
--- a/apps/web/src/components/widgets/tests/CalendarWidget.test.tsx
+++ b/apps/web/src/components/widgets/tests/CalendarWidget.test.tsx
@@ -1,126 +1,55 @@
-/**
- * CalendarWidget Component Tests
- * Following TDD principles
- */
-
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { act, render, screen } from "@testing-library/react";
 import { CalendarWidget } from "../CalendarWidget";

-global.fetch = vi.fn() as typeof global.fetch;
+async function finishWidgetLoad(): Promise<void> {
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(500);
+  });
+}

 describe("CalendarWidget", (): void => {
  beforeEach((): void => {
-    vi.clearAllMocks();
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-02-01T08:00:00Z"));
  });

-  it("should render loading state initially", (): void => {
-    vi.mocked(global.fetch).mockImplementation(
-      () =>
-        new Promise(() => {
-          // Intentionally never resolves to keep loading state
-        })
-    );
-
-    render(<CalendarWidget id="calendar-1" />);
-
-    expect(screen.getByText(/loading/i)).toBeInTheDocument();
+  afterEach((): void => {
+    vi.useRealTimers();
  });

-  // TODO: Re-enable when CalendarWidget uses fetch API instead of setTimeout mock data
-  it.skip("should render upcoming events", async (): Promise<void> => {
-    const mockEvents = [
-      {
-        id: "1",
-        title: "Team Meeting",
-        startTime: new Date(Date.now() + 3600000).toISOString(),
-        endTime: new Date(Date.now() + 7200000).toISOString(),
-      },
-      {
-        id: "2",
-        title: "Project Review",
-        startTime: new Date(Date.now() + 86400000).toISOString(),
-        endTime: new Date(Date.now() + 90000000).toISOString(),
-      },
-    ];
-
-    vi.mocked(global.fetch).mockResolvedValueOnce({
-      ok: true,
-      json: () => Promise.resolve(mockEvents),
-    } as unknown as Response);
-
+  it("renders loading state initially", (): void => {
    render(<CalendarWidget id="calendar-1" />);

-    await waitFor(() => {
-      expect(screen.getByText("Team Meeting")).toBeInTheDocument();
-      expect(screen.getByText("Project Review")).toBeInTheDocument();
-    });
+    expect(screen.getByText("Loading events...")).toBeInTheDocument();
  });

-  // TODO: Re-enable when CalendarWidget uses fetch API instead of setTimeout mock data
-  it.skip("should handle empty event list", async (): Promise<void> => {
-    vi.mocked(global.fetch).mockResolvedValueOnce({
-      ok: true,
-      json: () => Promise.resolve([]),
-    } as unknown as Response);
-
+  it("renders upcoming events after loading", async (): Promise<void> => {
    render(<CalendarWidget id="calendar-1" />);

-    await waitFor(() => {
-      expect(screen.getByText(/no upcoming events/i)).toBeInTheDocument();
-    });
+    await finishWidgetLoad();
+
+    expect(screen.getByText("Upcoming Events")).toBeInTheDocument();
+    expect(screen.getByText("Team Standup")).toBeInTheDocument();
+    expect(screen.getByText("Project Review")).toBeInTheDocument();
+    expect(screen.getByText("Sprint Planning")).toBeInTheDocument();
  });

-  // TODO: Re-enable when CalendarWidget uses fetch API instead of setTimeout mock data
-  it.skip("should handle API errors gracefully", async (): Promise<void> => {
-    vi.mocked(global.fetch).mockRejectedValueOnce(new Error("API Error"));
-
+  it("shows relative day labels", async (): Promise<void> => {
    render(<CalendarWidget id="calendar-1" />);

-    await waitFor(() => {
-      expect(screen.getByText(/error/i)).toBeInTheDocument();
-    });
+    await finishWidgetLoad();
+
+    expect(screen.getAllByText("Today").length).toBeGreaterThan(0);
+    expect(screen.getByText("Tomorrow")).toBeInTheDocument();
  });

-  // TODO: Re-enable when CalendarWidget uses fetch API instead of setTimeout mock data
-  it.skip("should format event times correctly", async (): Promise<void> => {
-    const now = new Date();
-    const startTime = new Date(now.getTime() + 3600000); // 1 hour from now
-
-    const mockEvents = [
-      {
-        id: "1",
-        title: "Meeting",
-        startTime: startTime.toISOString(),
-        endTime: new Date(startTime.getTime() + 3600000).toISOString(),
-      },
-    ];
-
-    vi.mocked(global.fetch).mockResolvedValueOnce({
-      ok: true,
-      json: () => Promise.resolve(mockEvents),
-    } as unknown as Response);
-
+  it("shows event locations when present", async (): Promise<void> => {
    render(<CalendarWidget id="calendar-1" />);

-    await waitFor(() => {
-      expect(screen.getByText("Meeting")).toBeInTheDocument();
-      // Should show time in readable format
-    });
-  });
+    await finishWidgetLoad();

-  // TODO: Re-enable when CalendarWidget uses fetch API and adds calendar-header test id
-  it.skip("should display current date", async (): Promise<void> => {
-    vi.mocked(global.fetch).mockResolvedValueOnce({
-      ok: true,
-      json: () => Promise.resolve([]),
-    } as unknown as Response);
-
-    render(<CalendarWidget id="calendar-1" />);
-
-    await waitFor(() => {
-      // Widget should display current date or month
-      expect(screen.getByTestId("calendar-header")).toBeInTheDocument();
-    });
+    expect(screen.getByText("Zoom")).toBeInTheDocument();
+    expect(screen.getByText("Conference Room A")).toBeInTheDocument();
  });
 });
--- a/apps/web/src/components/widgets/tests/OrchestratorEventsWidget.test.tsx
+++ b/apps/web/src/components/widgets/tests/OrchestratorEventsWidget.test.tsx
@@ -0,0 +1,82 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { OrchestratorEventsWidget } from "../OrchestratorEventsWidget";
+
+describe("OrchestratorEventsWidget", () => {
+  const mockFetch = vi.fn();
+
+  beforeEach(() => {
+    global.fetch = mockFetch as unknown as typeof fetch;
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders loading state initially", () => {
+    mockFetch.mockImplementation(
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      () => new Promise(() => {})
+    );
+
+    render(<OrchestratorEventsWidget id="orchestrator-events-1" config={{}} />);
+    expect(screen.getByText("Loading orchestrator events...")).toBeInTheDocument();
+  });
+
+  it("renders events and matrix signal count", async () => {
+    mockFetch.mockImplementation((input: RequestInfo | URL) => {
+      const url =
+        typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+
+      if (url.includes("/api/orchestrator/health")) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({ status: "ok" }),
+        } as unknown as Response);
+      }
+
+      return Promise.resolve({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            events: [
+              {
+                type: "task.completed",
+                timestamp: "2026-02-17T16:40:00.000Z",
+                taskId: "TASK-1",
+                data: { channelId: "room-123" },
+              },
+              {
+                type: "agent.running",
+                timestamp: "2026-02-17T16:41:00.000Z",
+                taskId: "TASK-2",
+                agentId: "agent-abc12345",
+              },
+            ],
+          }),
+      } as unknown as Response);
+    });
+
+    render(<OrchestratorEventsWidget id="orchestrator-events-1" config={{}} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("task.completed")).toBeInTheDocument();
+      expect(screen.getByText("agent.running")).toBeInTheDocument();
+      expect(screen.getByText(/Matrix signals: 1/)).toBeInTheDocument();
+      expect(screen.getByText("ready")).toBeInTheDocument();
+    });
+  });
+
+  it("renders error state when API fails", async () => {
+    mockFetch.mockResolvedValue({
+      ok: false,
+      status: 503,
+    });
+
+    render(<OrchestratorEventsWidget id="orchestrator-events-1" config={{}} />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Unable to load events: HTTP 503/)).toBeInTheDocument();
+    });
+  });
+});
--- a/apps/web/src/components/widgets/tests/TaskProgressWidget.test.tsx
+++ b/apps/web/src/components/widgets/tests/TaskProgressWidget.test.tsx
@@ -242,4 +242,58 @@ describe("TaskProgressWidget", (): void => {
      expect(taskElements[1]?.textContent).toBe("COMPLETED-TASK");
    });
  });
+
+  it("should display latest orchestrator event when available", async (): Promise<void> => {
+    mockFetch.mockImplementation((input: RequestInfo | URL) => {
+      let url = "";
+      if (typeof input === "string") {
+        url = input;
+      } else if (input instanceof URL) {
+        url = input.toString();
+      } else {
+        url = input.url;
+      }
+      if (url.includes("/api/orchestrator/agents")) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve([]),
+        } as unknown as Response);
+      }
+      if (url.includes("/api/orchestrator/queue/stats")) {
+        return Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              pending: 0,
+              active: 0,
+              completed: 0,
+              failed: 0,
+              delayed: 0,
+            }),
+        } as unknown as Response);
+      }
+      if (url.includes("/api/orchestrator/events/recent")) {
+        return Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              events: [
+                {
+                  type: "task.executing",
+                  timestamp: new Date().toISOString(),
+                  taskId: "TASK-123",
+                },
+              ],
+            }),
+        } as unknown as Response);
+      }
+      return Promise.reject(new Error("Unknown endpoint"));
+    });
+
+    render(<TaskProgressWidget id="task-progress-1" />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Latest: task.executing · TASK-123/i)).toBeInTheDocument();
+    });
+  });
 });
--- a/apps/web/src/components/widgets/tests/TasksWidget.test.tsx
+++ b/apps/web/src/components/widgets/tests/TasksWidget.test.tsx
@@ -1,138 +1,54 @@
-/**
- * TasksWidget Component Tests
- * Following TDD principles
- */
-
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { act, render, screen } from "@testing-library/react";
 import { TasksWidget } from "../TasksWidget";

-// Mock fetch for API calls
-global.fetch = vi.fn() as typeof global.fetch;
+async function finishWidgetLoad(): Promise<void> {
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(500);
+  });
+}

 describe("TasksWidget", (): void => {
  beforeEach((): void => {
-    vi.clearAllMocks();
+    vi.useFakeTimers();
  });

-  it("should render loading state initially", (): void => {
-    vi.mocked(global.fetch).mockImplementation(
-      () =>
-        new Promise(() => {
-          // Intentionally empty - creates a never-resolving promise for loading state
-        })
-    );
-
-    render(<TasksWidget id="tasks-1" />);
-
-    expect(screen.getByText(/loading/i)).toBeInTheDocument();
+  afterEach((): void => {
+    vi.useRealTimers();
  });

-  // TODO: Re-enable when TasksWidget uses fetch API instead of setTimeout mock data
-  it.skip("should render task statistics", async (): Promise<void> => {
-    const mockTasks = [
-      { id: "1", title: "Task 1", status: "IN_PROGRESS", priority: "HIGH" },
-      { id: "2", title: "Task 2", status: "COMPLETED", priority: "MEDIUM" },
-      { id: "3", title: "Task 3", status: "NOT_STARTED", priority: "LOW" },
-    ];
-
-    vi.mocked(global.fetch).mockResolvedValueOnce({
-      ok: true,
-      json: () => Promise.resolve(mockTasks),
-    } as unknown as Response);
-
+  it("renders loading state initially", (): void => {
    render(<TasksWidget id="tasks-1" />);

-    await waitFor(() => {
-      expect(screen.getByText("3")).toBeInTheDocument(); // Total
-      expect(screen.getByText("1")).toBeInTheDocument(); // In Progress
-      expect(screen.getByText("1")).toBeInTheDocument(); // Completed
-    });
+    expect(screen.getByText("Loading tasks...")).toBeInTheDocument();
  });

-  // TODO: Re-enable when TasksWidget uses fetch API instead of setTimeout mock data
-  it.skip("should render task list", async (): Promise<void> => {
-    const mockTasks = [
-      { id: "1", title: "Complete documentation", status: "IN_PROGRESS", priority: "HIGH" },
-      { id: "2", title: "Review PRs", status: "NOT_STARTED", priority: "MEDIUM" },
-    ];
-
-    vi.mocked(global.fetch).mockResolvedValueOnce({
-      ok: true,
-      json: () => Promise.resolve(mockTasks),
-    } as unknown as Response);
-
+  it("renders default summary stats", async (): Promise<void> => {
    render(<TasksWidget id="tasks-1" />);

-    await waitFor(() => {
-      expect(screen.getByText("Complete documentation")).toBeInTheDocument();
-      expect(screen.getByText("Review PRs")).toBeInTheDocument();
-    });
+    await finishWidgetLoad();
+
+    expect(screen.getByText("Total")).toBeInTheDocument();
+    expect(screen.getByText("In Progress")).toBeInTheDocument();
+    expect(screen.getByText("Done")).toBeInTheDocument();
+    expect(screen.getByText("3")).toBeInTheDocument();
  });

-  // TODO: Re-enable when TasksWidget uses fetch API instead of setTimeout mock data
-  it.skip("should handle empty task list", async (): Promise<void> => {
-    vi.mocked(global.fetch).mockResolvedValueOnce({
-      ok: true,
-      json: () => Promise.resolve([]),
-    } as unknown as Response);
-
+  it("renders default task rows", async (): Promise<void> => {
    render(<TasksWidget id="tasks-1" />);

-    await waitFor(() => {
-      expect(screen.getByText(/no tasks/i)).toBeInTheDocument();
-    });
+    await finishWidgetLoad();
+
+    expect(screen.getByText("Complete project documentation")).toBeInTheDocument();
+    expect(screen.getByText("Review pull requests")).toBeInTheDocument();
+    expect(screen.getByText("Update dependencies")).toBeInTheDocument();
  });

-  // TODO: Re-enable when TasksWidget uses fetch API instead of setTimeout mock data
-  it.skip("should handle API errors gracefully", async (): Promise<void> => {
-    vi.mocked(global.fetch).mockRejectedValueOnce(new Error("API Error"));
-
+  it("shows due date labels for each task", async (): Promise<void> => {
    render(<TasksWidget id="tasks-1" />);

-    await waitFor(() => {
-      expect(screen.getByText(/error/i)).toBeInTheDocument();
-    });
-  });
+    await finishWidgetLoad();

-  // TODO: Re-enable when TasksWidget uses fetch API instead of setTimeout mock data
-  it.skip("should display priority indicators", async (): Promise<void> => {
-    const mockTasks = [
-      { id: "1", title: "High priority task", status: "IN_PROGRESS", priority: "HIGH" },
-    ];
-
-    vi.mocked(global.fetch).mockResolvedValueOnce({
-      ok: true,
-      json: () => Promise.resolve(mockTasks),
-    } as unknown as Response);
-
-    render(<TasksWidget id="tasks-1" />);
-
-    await waitFor(() => {
-      expect(screen.getByText("High priority task")).toBeInTheDocument();
-      // Priority icon should be rendered (high priority = red)
-    });
-  });
-
-  // TODO: Re-enable when TasksWidget uses fetch API instead of setTimeout mock data
-  it.skip("should limit displayed tasks to 5", async (): Promise<void> => {
-    const mockTasks = Array.from({ length: 10 }, (_, i) => ({
-      id: String(i + 1),
-      title: `Task ${String(i + 1)}`,
-      status: "NOT_STARTED",
-      priority: "MEDIUM",
-    }));
-
-    vi.mocked(global.fetch).mockResolvedValueOnce({
-      ok: true,
-      json: () => Promise.resolve(mockTasks),
-    } as unknown as Response);
-
-    render(<TasksWidget id="tasks-1" />);
-
-    await waitFor(() => {
-      const taskElements = screen.getAllByText(/Task \d+/);
-      expect(taskElements.length).toBeLessThanOrEqual(5);
-    });
+    expect(screen.getAllByText(/Due:/).length).toBe(3);
  });
 });
--- a/apps/web/src/components/widgets/tests/WidgetRegistry.test.tsx
+++ b/apps/web/src/components/widgets/tests/WidgetRegistry.test.tsx
@@ -10,6 +10,7 @@ import { widgetRegistry } from "../WidgetRegistry";
 import { TasksWidget } from "../TasksWidget";
 import { CalendarWidget } from "../CalendarWidget";
 import { QuickCaptureWidget } from "../QuickCaptureWidget";
+import { OrchestratorEventsWidget } from "../OrchestratorEventsWidget";

 describe("WidgetRegistry", (): void => {
  it("should have a registry of widgets", (): void => {
@@ -32,6 +33,11 @@ describe("WidgetRegistry", (): void => {
    expect(widgetRegistry.QuickCaptureWidget!.component).toBe(QuickCaptureWidget);
  });

+  it("should include OrchestratorEventsWidget in registry", (): void => {
+    expect(widgetRegistry.OrchestratorEventsWidget).toBeDefined();
+    expect(widgetRegistry.OrchestratorEventsWidget!.component).toBe(OrchestratorEventsWidget);
+  });
+
  it("should have correct metadata for TasksWidget", (): void => {
    const tasksWidget = widgetRegistry.TasksWidget!;
    expect(tasksWidget.name).toBe("TasksWidget");
--- a/apps/web/src/components/widgets/index.ts
+++ b/apps/web/src/components/widgets/index.ts
@@ -6,3 +6,4 @@ export { TasksWidget } from "./TasksWidget";
 export { CalendarWidget } from "./CalendarWidget";
 export { QuickCaptureWidget } from "./QuickCaptureWidget";
 export { AgentStatusWidget } from "./AgentStatusWidget";
+export { OrchestratorEventsWidget } from "./OrchestratorEventsWidget";
--- a/apps/web/src/lib/api/client.mock-mode.test.ts
+++ b/apps/web/src/lib/api/client.mock-mode.test.ts
@@ -0,0 +1,55 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+const originalEnv = { ...process.env };
+const mockFetch = vi.fn();
+
+describe("API Client (mock auth mode)", (): void => {
+  beforeEach((): void => {
+    process.env = {
+      ...originalEnv,
+      NODE_ENV: "development",
+      NEXT_PUBLIC_AUTH_MODE: "mock",
+    };
+    vi.resetModules();
+    mockFetch.mockReset();
+    global.fetch = mockFetch;
+  });
+
+  afterEach((): void => {
+    process.env = originalEnv;
+    vi.restoreAllMocks();
+  });
+
+  it("should return local mock data for active projects widget without network calls", async (): Promise<void> => {
+    const { apiPost } = await import("./client");
+    interface ProjectResponse {
+      id: string;
+      status: string;
+    }
+
+    const response = await apiPost<ProjectResponse[]>("/api/widgets/data/active-projects");
+
+    expect(response.length).toBeGreaterThan(0);
+    const firstProject = response[0];
+    expect(firstProject).toBeDefined();
+    if (firstProject) {
+      expect(typeof firstProject.id).toBe("string");
+      expect(typeof firstProject.status).toBe("string");
+    }
+    expect(mockFetch).not.toHaveBeenCalled();
+  });
+
+  it("should return local mock data for agent chains widget without network calls", async (): Promise<void> => {
+    const { apiPost } = await import("./client");
+    interface AgentChainResponse {
+      id: string;
+      status: string;
+    }
+
+    const response = await apiPost<AgentChainResponse[]>("/api/widgets/data/agent-chains");
+
+    expect(response.length).toBeGreaterThan(0);
+    expect(response.some((session) => session.status === "active")).toBe(true);
+    expect(mockFetch).not.toHaveBeenCalled();
+  });
+});
--- a/apps/web/src/lib/api/client.ts
+++ b/apps/web/src/lib/api/client.ts
@@ -5,7 +5,7 @@

 /* eslint-disable @typescript-eslint/no-unsafe-assignment */

-import { API_BASE_URL } from "../config";
+import { API_BASE_URL, IS_MOCK_AUTH_MODE } from "../config";

 /**
 * In-memory CSRF token storage
@@ -41,6 +41,74 @@ export interface ApiRequestOptions extends RequestInit {
  _isRetry?: boolean; // Internal flag to prevent infinite retry loops
 }

+const MOCK_ACTIVE_PROJECTS_RESPONSE = [
+  {
+    id: "project-dev-1",
+    name: "Mosaic Stack FE Go-Live",
+    status: "active",
+    lastActivity: new Date().toISOString(),
+    taskCount: 7,
+    eventCount: 2,
+    color: "#3B82F6",
+  },
+  {
+    id: "project-dev-2",
+    name: "Auth Flow Remediation",
+    status: "in-progress",
+    lastActivity: new Date(Date.now() - 12 * 60_000).toISOString(),
+    taskCount: 4,
+    eventCount: 0,
+    color: "#F59E0B",
+  },
+] as const;
+
+const MOCK_AGENT_CHAINS_RESPONSE = [
+  {
+    id: "agent-session-dev-1",
+    sessionKey: "dev-session-1",
+    label: "UI Validator Agent",
+    channel: "codex",
+    agentName: "jarvis-agent",
+    agentStatus: "WORKING",
+    status: "active",
+    startedAt: new Date(Date.now() - 42 * 60_000).toISOString(),
+    lastMessageAt: new Date(Date.now() - 20_000).toISOString(),
+    runtimeMs: 42 * 60_000,
+    messageCount: 27,
+    contextSummary: "Validating dashboard, tasks, and auth-bypass UX for local development flow.",
+  },
+  {
+    id: "agent-session-dev-2",
+    sessionKey: "dev-session-2",
+    label: "Telemetry Stub Agent",
+    channel: "codex",
+    agentName: "jarvis-agent",
+    agentStatus: "TERMINATED",
+    status: "ended",
+    startedAt: new Date(Date.now() - 3 * 60 * 60_000).toISOString(),
+    lastMessageAt: new Date(Date.now() - 2 * 60 * 60_000).toISOString(),
+    runtimeMs: 63 * 60_000,
+    messageCount: 41,
+    contextSummary: "Generated telemetry mock payloads for usage and widget rendering.",
+  },
+] as const;
+
+function getMockApiResponse(endpoint: string, method: string): unknown {
+  if (!IS_MOCK_AUTH_MODE || process.env.NODE_ENV !== "development") {
+    return undefined;
+  }
+
+  if (method === "POST" && endpoint === "/api/widgets/data/active-projects") {
+    return [...MOCK_ACTIVE_PROJECTS_RESPONSE];
+  }
+
+  if (method === "POST" && endpoint === "/api/widgets/data/agent-chains") {
+    return [...MOCK_AGENT_CHAINS_RESPONSE];
+  }
+
+  return undefined;
+}
+
 /**
 * Fetch CSRF token from the API
 * Token is stored in an httpOnly cookie and returned in response body
@@ -100,6 +168,12 @@ async function ensureCsrfToken(): Promise<string> {
 export async function apiRequest<T>(endpoint: string, options: ApiRequestOptions = {}): Promise<T> {
  const url = `${API_BASE_URL}${endpoint}`;
  const { workspaceId, timeoutMs, _isRetry, ...fetchOptions } = options;
+  const method = (fetchOptions.method ?? "GET").toUpperCase();
+
+  const mockResponse = getMockApiResponse(endpoint, method);
+  if (mockResponse !== undefined) {
+    return mockResponse as T;
+  }

  // Set up abort controller for timeout
  const timeout = timeoutMs ?? DEFAULT_API_TIMEOUT_MS;
@@ -134,7 +208,6 @@ export async function apiRequest<T>(endpoint: string, options: ApiRequestOptions
    }

    // Add CSRF token for state-changing requests (POST, PUT, PATCH, DELETE)
-    const method = (fetchOptions.method ?? "GET").toUpperCase();
    const isStateChanging = ["POST", "PUT", "PATCH", "DELETE"].includes(method);

    if (isStateChanging) {
--- a/apps/web/src/lib/auth/auth-context.tsx
+++ b/apps/web/src/lib/auth/auth-context.tsx
@@ -11,6 +11,7 @@ import {
 } from "react";
 import type { AuthUser, AuthSession } from "@mosaic/shared";
 import { apiGet, apiPost } from "../api/client";
+import { IS_MOCK_AUTH_MODE } from "../config";
 import { parseAuthError } from "./auth-errors";

 /**
@@ -23,6 +24,11 @@ const SESSION_EXPIRY_WARNING_MINUTES = 5;

 /** Interval in milliseconds to check session expiry */
 const SESSION_CHECK_INTERVAL_MS = 60_000;
+const MOCK_AUTH_USER: AuthUser = {
+  id: "dev-user-local",
+  email: "dev@localhost",
+  name: "Local Dev User",
+};

 interface AuthContextValue {
  user: AuthUser | null;
@@ -70,6 +76,14 @@ function logAuthError(message: string, error: unknown): void {
 }

 export function AuthProvider({ children }: { children: ReactNode }): React.JSX.Element {
+  if (IS_MOCK_AUTH_MODE) {
+    return <MockAuthProvider>{children}</MockAuthProvider>;
+  }
+
+  return <RealAuthProvider>{children}</RealAuthProvider>;
+}
+
+function RealAuthProvider({ children }: { children: ReactNode }): React.JSX.Element {
  const [user, setUser] = useState<AuthUser | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [authError, setAuthError] = useState<AuthErrorType>(null);
@@ -176,6 +190,33 @@ export function AuthProvider({ children }: { children: ReactNode }): React.JSX.E
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }

+function MockAuthProvider({ children }: { children: ReactNode }): React.JSX.Element {
+  const [user, setUser] = useState<AuthUser | null>(MOCK_AUTH_USER);
+
+  const signOut = useCallback((): Promise<void> => {
+    setUser(null);
+    return Promise.resolve();
+  }, []);
+
+  const refreshSession = useCallback((): Promise<void> => {
+    setUser(MOCK_AUTH_USER);
+    return Promise.resolve();
+  }, []);
+
+  const value: AuthContextValue = {
+    user,
+    isLoading: false,
+    isAuthenticated: user !== null,
+    authError: null,
+    sessionExpiring: false,
+    sessionMinutesRemaining: 0,
+    signOut,
+    refreshSession,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
 export function useAuth(): AuthContextValue {
  const context = useContext(AuthContext);
  if (context === undefined) {
--- a/apps/web/src/lib/config.test.ts
+++ b/apps/web/src/lib/config.test.ts
@@ -22,11 +22,16 @@ describe("API Configuration", () => {
    it("should use default API URL when NEXT_PUBLIC_API_URL is not set", async () => {
      delete process.env.NEXT_PUBLIC_API_URL;
      delete process.env.NEXT_PUBLIC_ORCHESTRATOR_URL;
+      delete process.env.NEXT_PUBLIC_AUTH_MODE;
+      process.env = { ...process.env, NODE_ENV: "development" };

-      const { API_BASE_URL, ORCHESTRATOR_URL } = await import("./config");
+      const { API_BASE_URL, ORCHESTRATOR_URL, AUTH_MODE, IS_MOCK_AUTH_MODE } =
+        await import("./config");

      expect(API_BASE_URL).toBe("http://localhost:3001");
      expect(ORCHESTRATOR_URL).toBe("http://localhost:3001");
+      expect(AUTH_MODE).toBe("mock");
+      expect(IS_MOCK_AUTH_MODE).toBe(true);
    });
  });

@@ -34,17 +39,22 @@ describe("API Configuration", () => {
    it("should use NEXT_PUBLIC_API_URL when set", async () => {
      process.env.NEXT_PUBLIC_API_URL = "https://api.example.com";
      delete process.env.NEXT_PUBLIC_ORCHESTRATOR_URL;
+      delete process.env.NEXT_PUBLIC_AUTH_MODE;
+      process.env = { ...process.env, NODE_ENV: "development" };

-      const { API_BASE_URL, ORCHESTRATOR_URL } = await import("./config");
+      const { API_BASE_URL, ORCHESTRATOR_URL, AUTH_MODE } = await import("./config");

      expect(API_BASE_URL).toBe("https://api.example.com");
      // ORCHESTRATOR_URL should fall back to API_BASE_URL
      expect(ORCHESTRATOR_URL).toBe("https://api.example.com");
+      expect(AUTH_MODE).toBe("mock");
    });

    it("should use separate NEXT_PUBLIC_ORCHESTRATOR_URL when set", async () => {
      process.env.NEXT_PUBLIC_API_URL = "https://api.example.com";
      process.env.NEXT_PUBLIC_ORCHESTRATOR_URL = "https://orchestrator.example.com";
+      process.env = { ...process.env, NODE_ENV: "development" };
+      delete process.env.NEXT_PUBLIC_AUTH_MODE;

      const { API_BASE_URL, ORCHESTRATOR_URL } = await import("./config");

@@ -57,6 +67,8 @@ describe("API Configuration", () => {
    it("should build API URLs correctly", async () => {
      process.env.NEXT_PUBLIC_API_URL = "https://api.example.com";
      delete process.env.NEXT_PUBLIC_ORCHESTRATOR_URL;
+      process.env = { ...process.env, NODE_ENV: "development" };
+      delete process.env.NEXT_PUBLIC_AUTH_MODE;

      const { buildApiUrl } = await import("./config");

@@ -67,6 +79,8 @@ describe("API Configuration", () => {
    it("should build orchestrator URLs correctly", async () => {
      process.env.NEXT_PUBLIC_API_URL = "https://api.example.com";
      process.env.NEXT_PUBLIC_ORCHESTRATOR_URL = "https://orch.example.com";
+      process.env = { ...process.env, NODE_ENV: "development" };
+      delete process.env.NEXT_PUBLIC_AUTH_MODE;

      const { buildOrchestratorUrl } = await import("./config");

@@ -79,13 +93,44 @@ describe("API Configuration", () => {
    it("should expose all configuration through apiConfig", async () => {
      process.env.NEXT_PUBLIC_API_URL = "https://api.example.com";
      process.env.NEXT_PUBLIC_ORCHESTRATOR_URL = "https://orch.example.com";
+      process.env = { ...process.env, NODE_ENV: "development" };
+      process.env.NEXT_PUBLIC_AUTH_MODE = "real";

      const { apiConfig } = await import("./config");

      expect(apiConfig.baseUrl).toBe("https://api.example.com");
      expect(apiConfig.orchestratorUrl).toBe("https://orch.example.com");
+      expect(apiConfig.authMode).toBe("real");
      expect(apiConfig.buildUrl("/test")).toBe("https://api.example.com/test");
      expect(apiConfig.buildOrchestratorUrl("/test")).toBe("https://orch.example.com/test");
    });
  });
+
+  describe("auth mode", () => {
+    it("should enable mock mode only in development", async () => {
+      process.env = { ...process.env, NODE_ENV: "development" };
+      process.env.NEXT_PUBLIC_AUTH_MODE = "mock";
+
+      const { AUTH_MODE, IS_MOCK_AUTH_MODE } = await import("./config");
+
+      expect(AUTH_MODE).toBe("mock");
+      expect(IS_MOCK_AUTH_MODE).toBe(true);
+    });
+
+    it("should throw on invalid auth mode", async () => {
+      process.env = { ...process.env, NODE_ENV: "development" };
+      process.env.NEXT_PUBLIC_AUTH_MODE = "invalid";
+
+      await expect(import("./config")).rejects.toThrow("Invalid NEXT_PUBLIC_AUTH_MODE");
+    });
+
+    it("should throw when mock mode is set outside development", async () => {
+      process.env = { ...process.env, NODE_ENV: "production" };
+      process.env.NEXT_PUBLIC_AUTH_MODE = "mock";
+
+      await expect(import("./config")).rejects.toThrow(
+        "NEXT_PUBLIC_AUTH_MODE=mock is only allowed when NODE_ENV=development."
+      );
+    });
+  });
 });
--- a/apps/web/src/lib/config.ts
+++ b/apps/web/src/lib/config.ts
@@ -7,12 +7,19 @@
 * Environment Variables:
 * - NEXT_PUBLIC_API_URL: The main API server URL (default: http://localhost:3001)
 * - NEXT_PUBLIC_ORCHESTRATOR_URL: The orchestrator service URL (default: same as API URL)
+ * - NEXT_PUBLIC_AUTH_MODE: Auth mode for web app (`real` or `mock`)
+ *   - If unset: development defaults to `mock`, production defaults to `real`
 */

 /**
 * Default API server URL for local development
 */
 const DEFAULT_API_URL = "http://localhost:3001";
+const DEFAULT_AUTH_MODE = process.env.NODE_ENV === "development" ? "mock" : "real";
+
+const VALID_AUTH_MODES = ["real", "mock"] as const;
+
+export type AuthMode = (typeof VALID_AUTH_MODES)[number];

 /**
 * Main API server URL
@@ -20,6 +27,34 @@ const DEFAULT_API_URL = "http://localhost:3001";
 */
 export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL ?? DEFAULT_API_URL;

+function resolveAuthMode(): AuthMode {
+  const rawMode = (process.env.NEXT_PUBLIC_AUTH_MODE ?? DEFAULT_AUTH_MODE).toLowerCase();
+
+  if (!VALID_AUTH_MODES.includes(rawMode as AuthMode)) {
+    throw new Error(
+      `Invalid NEXT_PUBLIC_AUTH_MODE "${rawMode}". Expected one of: ${VALID_AUTH_MODES.join(", ")}.`
+    );
+  }
+
+  if (rawMode === "mock" && process.env.NODE_ENV !== "development") {
+    throw new Error("NEXT_PUBLIC_AUTH_MODE=mock is only allowed when NODE_ENV=development.");
+  }
+
+  return rawMode as AuthMode;
+}
+
+/**
+ * Authentication mode for frontend runtime.
+ * - real: uses normal BetterAuth/Backend session flow
+ * - mock: local-only seeded mock user for FE development
+ */
+export const AUTH_MODE: AuthMode = resolveAuthMode();
+
+/**
+ * Whether local mock auth mode is enabled.
+ */
+export const IS_MOCK_AUTH_MODE = AUTH_MODE === "mock";
+
 /**
 * Orchestrator service URL
 * Used for agent management, task progress, and orchestration features
@@ -53,6 +88,8 @@ export const apiConfig = {
  baseUrl: API_BASE_URL,
  /** Orchestrator service URL */
  orchestratorUrl: ORCHESTRATOR_URL,
+  /** Authentication mode (`real` or `mock`) */
+  authMode: AUTH_MODE,
  /** Build full API URL for an endpoint */
  buildUrl: buildApiUrl,
  /** Build full orchestrator URL for an endpoint */
--- a/apps/web/src/lib/hooks/useLayout.ts
+++ b/apps/web/src/lib/hooks/useLayout.ts
@@ -14,6 +14,70 @@ const DEFAULT_LAYOUT_NAME = "default";
 */
 const WORKSPACE_KEY = "mosaic-workspace-id";

+function createDefaultLayout(): LayoutConfig {
+  return {
+    id: DEFAULT_LAYOUT_NAME,
+    name: "Default Layout",
+    layout: [
+      {
+        i: "tasks-1",
+        x: 0,
+        y: 0,
+        w: 2,
+        h: 3,
+        minW: 1,
+        minH: 2,
+        isDraggable: true,
+        isResizable: true,
+      },
+      {
+        i: "calendar-1",
+        x: 2,
+        y: 0,
+        w: 2,
+        h: 2,
+        minW: 1,
+        minH: 2,
+        isDraggable: true,
+        isResizable: true,
+      },
+      {
+        i: "agent-status-1",
+        x: 2,
+        y: 2,
+        w: 2,
+        h: 2,
+        minW: 1,
+        minH: 1,
+        isDraggable: true,
+        isResizable: true,
+      },
+      {
+        i: "orchestrator-events-1",
+        x: 0,
+        y: 3,
+        w: 2,
+        h: 2,
+        minW: 1,
+        minH: 1,
+        isDraggable: true,
+        isResizable: true,
+      },
+      {
+        i: "quick-capture-1",
+        x: 2,
+        y: 4,
+        w: 2,
+        h: 1,
+        minW: 1,
+        minH: 1,
+        isDraggable: true,
+        isResizable: true,
+      },
+    ],
+  };
+}
+
 interface UseLayoutReturn {
  layouts: Record<string, LayoutConfig>;
  currentLayout: LayoutConfig | undefined;
@@ -45,7 +109,18 @@ export function useLayout(): UseLayoutReturn {
      if (stored) {
        const emptyFallback: Record<string, LayoutConfig> = {};
        const parsed = safeJsonParse(stored, isLayoutConfigRecord, emptyFallback);
-        setLayouts(parsed as Record<string, LayoutConfig>);
+        const parsedLayouts = parsed as Record<string, LayoutConfig>;
+        if (Object.keys(parsedLayouts).length > 0) {
+          setLayouts(parsedLayouts);
+        } else {
+          setLayouts({
+            [DEFAULT_LAYOUT_NAME]: createDefaultLayout(),
+          });
+        }
+      } else {
+        setLayouts({
+          [DEFAULT_LAYOUT_NAME]: createDefaultLayout(),
+        });
      }

      // Load current layout ID preference
@@ -195,11 +270,7 @@ export function useLayout(): UseLayoutReturn {

  const resetLayout = useCallback(() => {
    setLayouts({
-      [DEFAULT_LAYOUT_NAME]: {
-        id: DEFAULT_LAYOUT_NAME,
-        name: "Default Layout",
-        layout: [],
-      },
+      [DEFAULT_LAYOUT_NAME]: createDefaultLayout(),
    });
    setCurrentLayoutId(DEFAULT_LAYOUT_NAME);
  }, []);