chore(tasks): mark MS24 tasks done

apps/api/src/app.module.ts

@@ -60,6 +60,7 @@ import { ContainerReaperModule } from "./container-reaper/container-reaper.modul
 import { FleetSettingsModule } from "./fleet-settings/fleet-settings.module";
 import { OnboardingModule } from "./onboarding/onboarding.module";
 import { ChatProxyModule } from "./chat-proxy/chat-proxy.module";
+import { MissionControlProxyModule } from "./mission-control-proxy/mission-control-proxy.module";
 import { OrchestratorModule } from "./orchestrator/orchestrator.module";
 import { QueueNotificationsModule } from "./queue-notifications/queue-notifications.module";
 
@@ -143,6 +144,7 @@ import { QueueNotificationsModule } from "./queue-notifications/queue-notificati
     FleetSettingsModule,
     OnboardingModule,
     ChatProxyModule,
+    MissionControlProxyModule,
     OrchestratorModule,
     QueueNotificationsModule,
   ],

apps/api/src/mission-control-proxy/mission-control-proxy.controller.ts

@@ -0,0 +1,286 @@
+import {
+  Body,
+  Controller,
+  Get,
+  Logger,
+  Param,
+  Post,
+  Req,
+  Res,
+  ServiceUnavailableException,
+  UseGuards,
+} from "@nestjs/common";
+import type { Request, Response } from "express";
+import { AuthGuard } from "../auth/guards/auth.guard";
+
+const ORCHESTRATOR_URL_KEY = "ORCHESTRATOR_URL";
+const ORCHESTRATOR_API_KEY = "ORCHESTRATOR_API_KEY";
+
+@Controller("mission-control")
+@UseGuards(AuthGuard)
+export class MissionControlProxyController {
+  private readonly logger = new Logger(MissionControlProxyController.name);
+  private readonly orchestratorUrl: string;
+  private readonly orchestratorApiKey: string;
+
+  constructor() {
+    this.orchestratorUrl = this.requireEnv(ORCHESTRATOR_URL_KEY);
+    this.orchestratorApiKey = this.requireEnv(ORCHESTRATOR_API_KEY);
+  }
+
+  @Get("sessions")
+  proxySessions(@Req() req: Request, @Res() res: Response): Promise<void> {
+    return this.proxyRequest("GET", "sessions", req, res);
+  }
+
+  @Get("sessions/:sessionId")
+  proxySession(
+    @Param("sessionId") sessionId: string,
+    @Req() req: Request,
+    @Res() res: Response
+  ): Promise<void> {
+    return this.proxyRequest("GET", `sessions/${sessionId}`, req, res);
+  }
+
+  @Get("sessions/:sessionId/messages")
+  proxyMessages(
+    @Param("sessionId") sessionId: string,
+    @Req() req: Request,
+    @Res() res: Response
+  ): Promise<void> {
+    return this.proxyRequest("GET", `sessions/${sessionId}/messages`, req, res);
+  }
+
+  @Get("audit-log")
+  proxyAuditLog(@Req() req: Request, @Res() res: Response): Promise<void> {
+    return this.proxyRequest("GET", "audit-log", req, res);
+  }
+
+  @Post("sessions/:sessionId/inject")
+  proxyInject(
+    @Param("sessionId") sessionId: string,
+    @Body() body: unknown,
+    @Req() req: Request,
+    @Res() res: Response
+  ): Promise<void> {
+    return this.proxyRequest("POST", `sessions/${sessionId}/inject`, req, res, body);
+  }
+
+  @Post("sessions/:sessionId/pause")
+  proxyPause(
+    @Param("sessionId") sessionId: string,
+    @Req() req: Request,
+    @Res() res: Response
+  ): Promise<void> {
+    return this.proxyRequest("POST", `sessions/${sessionId}/pause`, req, res);
+  }
+
+  @Post("sessions/:sessionId/resume")
+  proxyResume(
+    @Param("sessionId") sessionId: string,
+    @Req() req: Request,
+    @Res() res: Response
+  ): Promise<void> {
+    return this.proxyRequest("POST", `sessions/${sessionId}/resume`, req, res);
+  }
+
+  @Post("sessions/:sessionId/kill")
+  proxyKill(
+    @Param("sessionId") sessionId: string,
+    @Body() body: unknown,
+    @Req() req: Request,
+    @Res() res: Response
+  ): Promise<void> {
+    return this.proxyRequest("POST", `sessions/${sessionId}/kill`, req, res, body);
+  }
+
+  @Get("sessions/:sessionId/stream")
+  async proxySessionStream(
+    @Param("sessionId") sessionId: string,
+    @Req() req: Request,
+    @Res() res: Response
+  ): Promise<void> {
+    const abortController = new AbortController();
+    req.once("close", () => {
+      abortController.abort();
+    });
+
+    try {
+      const upstream = await this.fetchUpstream(
+        "GET",
+        `sessions/${sessionId}/stream`,
+        req.query,
+        undefined,
+        abortController.signal
+      );
+
+      if (!upstream.ok || !upstream.body) {
+        await this.sendStandardResponse(upstream, res);
+        return;
+      }
+
+      res.status(upstream.status);
+      this.copyHeaderIfPresent(upstream, res, "content-type");
+      this.copyHeaderIfPresent(upstream, res, "cache-control");
+      this.copyHeaderIfPresent(upstream, res, "connection");
+      res.setHeader("X-Accel-Buffering", "no");
+
+      if (typeof res.flushHeaders === "function") {
+        res.flushHeaders();
+      }
+
+      for await (const chunk of upstream.body as unknown as AsyncIterable<Uint8Array>) {
+        if (res.writableEnded || res.destroyed) {
+          break;
+        }
+
+        res.write(Buffer.from(chunk));
+      }
+
+      if (!res.writableEnded && !res.destroyed) {
+        res.end();
+      }
+    } catch (error: unknown) {
+      if (this.isAbortError(error)) {
+        return;
+      }
+
+      const message = error instanceof Error ? error.message : String(error);
+      this.logger.warn(`Mission Control stream proxy request failed: ${message}`);
+
+      if (!res.headersSent) {
+        res.status(503).json({ message: "Failed to proxy Mission Control request" });
+      } else if (!res.writableEnded && !res.destroyed) {
+        res.end();
+      }
+    }
+  }
+
+  private async proxyRequest(
+    method: "GET" | "POST",
+    path: string,
+    req: Request,
+    res: Response,
+    body?: unknown
+  ): Promise<void> {
+    const abortController = new AbortController();
+    req.once("close", () => {
+      abortController.abort();
+    });
+
+    try {
+      const upstream = await this.fetchUpstream(
+        method,
+        path,
+        req.query,
+        body,
+        abortController.signal
+      );
+      await this.sendStandardResponse(upstream, res);
+    } catch (error: unknown) {
+      if (this.isAbortError(error)) {
+        return;
+      }
+
+      this.handleProxyError(error);
+    }
+  }
+
+  private async fetchUpstream(
+    method: "GET" | "POST",
+    path: string,
+    query: Request["query"],
+    body: unknown,
+    signal: AbortSignal
+  ): Promise<globalThis.Response> {
+    const url = new URL(`/api/mission-control/${path}`, this.orchestratorUrl);
+    this.appendQueryParams(url.searchParams, query);
+
+    const headers: Record<string, string> = {
+      "X-API-Key": this.orchestratorApiKey,
+    };
+
+    const requestInit: RequestInit = {
+      method,
+      headers,
+      signal,
+    };
+
+    if (method === "POST" && body !== undefined) {
+      headers["Content-Type"] = "application/json";
+      requestInit.body = JSON.stringify(body);
+    }
+
+    return fetch(url.toString(), requestInit);
+  }
+
+  private appendQueryParams(searchParams: URLSearchParams, query: Request["query"]): void {
+    for (const [key, value] of Object.entries(query)) {
+      this.appendQueryValue(searchParams, key, value);
+    }
+  }
+
+  private appendQueryValue(searchParams: URLSearchParams, key: string, value: unknown): void {
+    if (value === undefined || value === null) {
+      return;
+    }
+
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        this.appendQueryValue(searchParams, key, item);
+      }
+      return;
+    }
+
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      searchParams.append(key, String(value));
+    }
+  }
+
+  private async sendStandardResponse(upstream: globalThis.Response, res: Response): Promise<void> {
+    res.status(upstream.status);
+    this.copyHeaderIfPresent(upstream, res, "content-type");
+    this.copyHeaderIfPresent(upstream, res, "cache-control");
+    this.copyHeaderIfPresent(upstream, res, "location");
+
+    const responseText = await upstream.text();
+
+    if (responseText.length === 0) {
+      res.end();
+      return;
+    }
+
+    res.send(responseText);
+  }
+
+  private copyHeaderIfPresent(
+    upstream: globalThis.Response,
+    res: Response,
+    headerName: string
+  ): void {
+    const value = upstream.headers.get(headerName);
+    if (value) {
+      res.setHeader(headerName, value);
+    }
+  }
+
+  private handleProxyError(error: unknown): never {
+    const message = error instanceof Error ? error.message : String(error);
+    this.logger.warn(`Mission Control proxy request failed: ${message}`);
+    throw new ServiceUnavailableException("Failed to proxy Mission Control request");
+  }
+
+  private isAbortError(error: unknown): boolean {
+    return error instanceof Error && error.name === "AbortError";
+  }
+
+  private requireEnv(key: string): string {
+    const value = process.env[key];
+
+    if (typeof value !== "string" || value.trim().length === 0) {
+      throw new Error(`@mosaic/api: ${key} is required. Set it in your config or via ${key}.`);
+    }
+
+    return value;
+  }
+}

apps/api/src/mission-control-proxy/mission-control-proxy.module.ts

@@ -0,0 +1,9 @@
+import { Module } from "@nestjs/common";
+import { AuthModule } from "../auth/auth.module";
+import { MissionControlProxyController } from "./mission-control-proxy.controller";
+
+@Module({
+  imports: [AuthModule],
+  controllers: [MissionControlProxyController],
+})
+export class MissionControlProxyModule {}

apps/web/src/app/api/orchestrator/queue/notifications/stream/route.ts

@@ -0,0 +1,57 @@
+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 const dynamic = "force-dynamic";
+
+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 upstream = await fetch(`${getOrchestratorUrl()}/api/queue/notifications/stream`, {
+      method: "GET",
+      headers: {
+        "X-API-Key": orchestratorApiKey,
+        Accept: "text/event-stream",
+      },
+      cache: "no-store",
+    });
+
+    if (!upstream.ok || upstream.body === null) {
+      const message = await upstream.text();
+      return new NextResponse(message || "Failed to connect to queue notifications stream", {
+        status: upstream.status || 502,
+        headers: {
+          "Content-Type": upstream.headers.get("Content-Type") ?? "text/plain; charset=utf-8",
+        },
+      });
+    }
+
+    return new NextResponse(upstream.body, {
+      status: upstream.status,
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache, no-transform",
+        Connection: "keep-alive",
+        "X-Accel-Buffering": "no",
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: "Unable to reach orchestrator." }, { status: 502 });
+  }
+}

apps/web/src/components/layout/AppSidebar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import Image from "next/image";
@@ -29,6 +29,10 @@ interface NavGroup {
   items: NavItemConfig[];
 }
 
+interface QueueNotification {
+  id: string;
+}
+
 // ---------------------------------------------------------------------------
 // SVG Icons (16x16 viewBox, stroke="currentColor", strokeWidth="1.5")
 // ---------------------------------------------------------------------------
@@ -685,6 +689,72 @@ function CollapseToggle({ collapsed, onToggle }: CollapseToggleProps): React.JSX
 export function AppSidebar(): React.JSX.Element {
   const pathname = usePathname();
   const { collapsed, toggleCollapsed, mobileOpen, setMobileOpen, isMobile } = useSidebar();
+  const [missionControlBadgeCount, setMissionControlBadgeCount] = useState<number>(0);
+
+  useEffect(() => {
+    let isActive = true;
+
+    const loadNotificationCount = async (): Promise<void> => {
+      try {
+        const response = await fetch("/api/orchestrator/api/queue/notifications", {
+          method: "GET",
+        });
+
+        if (!response.ok) {
+          return;
+        }
+
+        const payload = (await response.json()) as QueueNotification[];
+        if (isActive) {
+          setMissionControlBadgeCount(Array.isArray(payload) ? payload.length : 0);
+        }
+      } catch {
+        // Ignore badge failures in the nav.
+      }
+    };
+
+    void loadNotificationCount();
+
+    if (typeof EventSource === "undefined") {
+      return (): void => {
+        isActive = false;
+      };
+    }
+
+    const source = new EventSource("/api/orchestrator/queue/notifications/stream");
+
+    source.onmessage = (event: MessageEvent<string>): void => {
+      try {
+        const payload = JSON.parse(event.data) as QueueNotification[];
+        if (isActive) {
+          setMissionControlBadgeCount(Array.isArray(payload) ? payload.length : 0);
+        }
+      } catch {
+        // Ignore malformed badge updates.
+      }
+    };
+
+    return (): void => {
+      isActive = false;
+      source.close();
+    };
+  }, []);
+
+  const navGroups = useMemo(
+    () =>
+      NAV_GROUPS.map((group) => ({
+        ...group,
+        items: group.items.map((item) =>
+          item.href === "/mission-control" && missionControlBadgeCount > 0
+            ? {
+                ...item,
+                badge: { label: String(missionControlBadgeCount) },
+              }
+            : item
+        ),
+      })),
+    [missionControlBadgeCount]
+  );
 
   return (
     <>
@@ -722,7 +792,7 @@ export function AppSidebar(): React.JSX.Element {
           }}
           aria-label="Main navigation"
         >
-          {NAV_GROUPS.map((group) => (
+          {navGroups.map((group) => (
             <div key={group.label} style={{ marginBottom: "18px" }}>
               {/* Group label — hidden when collapsed */}
               {!collapsed && (

apps/web/src/components/mission-control/MissionControlLayout.test.tsx

@@ -8,6 +8,7 @@ interface MockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 const mockGlobalAgentRoster = vi.fn();
 const mockMissionControlPanel = vi.fn();
+const mockQueueNotificationFeed = vi.fn();
 
 vi.mock("@/components/mission-control/AuditLogDrawer", () => ({
   AuditLogDrawer: ({ trigger }: { trigger: ReactNode }): React.JSX.Element => (
@@ -31,6 +32,13 @@ vi.mock("@/components/mission-control/MissionControlPanel", () => ({
   MIN_PANEL_COUNT: 1,
 }));
 
+vi.mock("@/components/mission-control/QueueNotificationFeed", () => ({
+  QueueNotificationFeed: (props: unknown): React.JSX.Element => {
+    mockQueueNotificationFeed(props);
+    return <div data-testid="queue-notification-feed" />;
+  },
+}));
+
 vi.mock("@/components/ui/button", () => ({
   Button: ({ children, ...props }: MockButtonProps): React.JSX.Element => (
     <button {...props}>{children}</button>
@@ -66,5 +74,6 @@ describe("MissionControlLayout", (): void => {
     expect(region.querySelector("main")).toBeInTheDocument();
     expect(screen.getByTestId("global-agent-roster")).toBeInTheDocument();
     expect(screen.getByTestId("mission-control-panel")).toBeInTheDocument();
+    expect(screen.getByTestId("queue-notification-feed")).toBeInTheDocument();
   });
 });

apps/web/src/components/mission-control/MissionControlLayout.tsx

@@ -9,6 +9,7 @@ import {
   MissionControlPanel,
   type PanelConfig,
 } from "@/components/mission-control/MissionControlPanel";
+import { QueueNotificationFeed } from "@/components/mission-control/QueueNotificationFeed";
 import { Button } from "@/components/ui/button";
 
 const INITIAL_PANELS: PanelConfig[] = [{}];
@@ -94,7 +95,7 @@ export function MissionControlLayout(): React.JSX.Element {
         />
       </header>
 
-      <div className="grid min-h-0 flex-1 gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
+      <div className="grid min-h-0 flex-1 gap-4 xl:grid-cols-[280px_minmax(0,1fr)_320px]">
         <aside className="h-full min-h-0">
           <GlobalAgentRoster
             onSelectSession={handleSelectSession}
@@ -109,6 +110,9 @@ export function MissionControlLayout(): React.JSX.Element {
             onExpandPanel={handleExpandPanel}
           />
         </main>
+        <aside className="h-full min-h-0">
+          <QueueNotificationFeed />
+        </aside>
       </div>
     </section>
   );

apps/web/src/components/mission-control/QueueNotificationFeed.test.tsx

@@ -0,0 +1,225 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+
+vi.mock("date-fns", () => ({
+  formatDistanceToNow: (): string => "5 minutes ago",
+}));
+
+interface MockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+interface MockContainerProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+}
+
+interface MockEventSourceInstance {
+  url: string;
+  onerror: ((event: Event) => void) | null;
+  onmessage: ((event: MessageEvent<string>) => void) | null;
+  close: ReturnType<typeof vi.fn>;
+  emitMessage: (payload: unknown) => void;
+}
+
+interface QueueNotification {
+  id: string;
+  agent: string;
+  filename: string;
+  payload: unknown;
+  createdAt: string;
+}
+
+const mockApiGet = vi.fn<(endpoint: string) => Promise<QueueNotification[]>>();
+const mockApiPost = vi.fn<(endpoint: string) => Promise<{ success: true; id: string }>>();
+const mockShowToast = vi.fn<(message: string, variant?: string) => void>();
+
+let mockEventSourceInstances: MockEventSourceInstance[] = [];
+
+const MockEventSource = vi.fn(function (this: MockEventSourceInstance, url: string): void {
+  this.url = url;
+  this.onerror = null;
+  this.onmessage = null;
+  this.close = vi.fn();
+  this.emitMessage = (payload: unknown): void => {
+    this.onmessage?.(new MessageEvent("message", { data: JSON.stringify(payload) }));
+  };
+
+  mockEventSourceInstances.push(this);
+});
+
+vi.mock("@/lib/api/client", () => ({
+  apiGet: (endpoint: string): Promise<QueueNotification[]> => mockApiGet(endpoint),
+  apiPost: (endpoint: string): Promise<{ success: true; id: string }> => mockApiPost(endpoint),
+}));
+
+vi.mock("@mosaic/ui", () => ({
+  useToast: (): { showToast: typeof mockShowToast; removeToast: ReturnType<typeof vi.fn> } => ({
+    showToast: mockShowToast,
+    removeToast: vi.fn(),
+  }),
+}));
+
+vi.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...props }: MockButtonProps): React.JSX.Element => (
+    <button {...props}>{children}</button>
+  ),
+}));
+
+vi.mock("@/components/ui/badge", () => ({
+  Badge: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <span {...props}>{children}</span>
+  ),
+}));
+
+vi.mock("@/components/ui/card", () => ({
+  Card: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <section {...props}>{children}</section>
+  ),
+  CardHeader: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <header {...props}>{children}</header>
+  ),
+  CardContent: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <div {...props}>{children}</div>
+  ),
+  CardTitle: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <h2 {...props}>{children}</h2>
+  ),
+}));
+
+vi.mock("@/components/ui/collapsible", () => ({
+  Collapsible: ({ children }: MockContainerProps): React.JSX.Element => <div>{children}</div>,
+}));
+
+vi.mock("@/components/ui/scroll-area", () => ({
+  ScrollArea: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <div {...props}>{children}</div>
+  ),
+}));
+
+vi.mock("@/components/ui/skeleton", () => ({
+  Skeleton: (props: HTMLAttributes<HTMLDivElement>): React.JSX.Element => <div {...props} />,
+}));
+
+import { QueueNotificationFeed } from "./QueueNotificationFeed";
+
+function latestEventSource(): MockEventSourceInstance {
+  const instance = mockEventSourceInstances[mockEventSourceInstances.length - 1];
+  if (!instance) {
+    throw new Error("Expected an EventSource instance");
+  }
+  return instance;
+}
+
+function makeNotification(overrides: Partial<QueueNotification>): QueueNotification {
+  return {
+    id: "notif-1",
+    agent: "mosaic",
+    filename: "notif-1.json",
+    payload: {
+      taskId: "MS24-WEB-001",
+      eventType: "task.ready",
+    },
+    createdAt: "2026-03-08T23:00:00.000Z",
+    ...overrides,
+  };
+}
+
+describe("QueueNotificationFeed", (): void => {
+  beforeEach((): void => {
+    vi.clearAllMocks();
+    vi.stubGlobal("EventSource", MockEventSource);
+    vi.stubGlobal("fetch", vi.fn());
+    mockEventSourceInstances = [];
+    mockApiGet.mockResolvedValue([]);
+    mockApiPost.mockResolvedValue({ success: true, id: "notif-1" });
+  });
+
+  afterEach((): void => {
+    vi.unstubAllGlobals();
+  });
+
+  it("loads and renders notifications grouped by agent", async (): Promise<void> => {
+    mockApiGet.mockResolvedValue([
+      makeNotification({ id: "notif-1", agent: "mosaic" }),
+      makeNotification({
+        id: "notif-2",
+        agent: "dyor",
+        payload: { taskId: "MS24-WEB-002", eventType: "task.blocked" },
+      }),
+    ]);
+
+    render(<QueueNotificationFeed />);
+
+    await waitFor((): void => {
+      expect(mockApiGet).toHaveBeenCalledWith("/api/orchestrator/api/queue/notifications");
+    });
+
+    expect(screen.getByText("mosaic")).toBeInTheDocument();
+    expect(screen.getByText("dyor")).toBeInTheDocument();
+    expect(screen.getByText("MS24-WEB-001")).toBeInTheDocument();
+    expect(screen.getByText("task.ready")).toBeInTheDocument();
+    expect(screen.getAllByText("5 minutes ago")).toHaveLength(2);
+    expect(MockEventSource).toHaveBeenCalledWith("/api/orchestrator/queue/notifications/stream");
+  });
+
+  it("acknowledges a notification and removes it from the list", async (): Promise<void> => {
+    const user = userEvent.setup();
+    mockApiGet.mockResolvedValue([makeNotification({ id: "notif-ack" })]);
+
+    render(<QueueNotificationFeed />);
+
+    await waitFor((): void => {
+      expect(screen.getByText("MS24-WEB-001")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole("button", { name: "ACK notification MS24-WEB-001" }));
+
+    await waitFor((): void => {
+      expect(mockApiPost).toHaveBeenCalledWith(
+        "/api/orchestrator/api/queue/notifications/notif-ack/ack"
+      );
+    });
+
+    await waitFor((): void => {
+      expect(screen.getByText("No pending notifications")).toBeInTheDocument();
+    });
+  });
+
+  it("renders the empty state when there are no notifications", async (): Promise<void> => {
+    mockApiGet.mockResolvedValue([]);
+
+    render(<QueueNotificationFeed />);
+
+    await waitFor((): void => {
+      expect(screen.getByText("No pending notifications")).toBeInTheDocument();
+    });
+  });
+
+  it("refreshes the list when an SSE message arrives", async (): Promise<void> => {
+    mockApiGet.mockResolvedValue([makeNotification({ id: "notif-before" })]);
+
+    render(<QueueNotificationFeed />);
+
+    await waitFor((): void => {
+      expect(screen.getByText("MS24-WEB-001")).toBeInTheDocument();
+    });
+
+    act(() => {
+      latestEventSource().emitMessage([
+        makeNotification({
+          id: "notif-after",
+          agent: "sage",
+          payload: { taskId: "MS24-WEB-003", eventType: "task.failed" },
+        }),
+      ]);
+    });
+
+    await waitFor((): void => {
+      expect(screen.getByText("sage")).toBeInTheDocument();
+      expect(screen.getByText("MS24-WEB-003")).toBeInTheDocument();
+      expect(screen.getByText("task.failed")).toBeInTheDocument();
+    });
+  });
+});

apps/web/src/components/mission-control/QueueNotificationFeed.tsx

@@ -0,0 +1,332 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { formatDistanceToNow } from "date-fns";
+import { BellOff, ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+import { useToast } from "@mosaic/ui";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Collapsible } from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
+import { apiGet, apiPost } from "@/lib/api/client";
+
+export interface QueueNotificationFeedProps {
+  className?: string;
+}
+
+interface QueueNotification {
+  id: string;
+  agent: string;
+  filename: string;
+  payload: unknown;
+  createdAt: string;
+}
+
+interface QueuePayloadRecord {
+  taskId?: unknown;
+  type?: unknown;
+  eventType?: unknown;
+  event?: unknown;
+}
+
+interface NotificationGroup {
+  agent: string;
+  notifications: QueueNotification[];
+}
+
+const NOTIFICATIONS_ENDPOINT = "/api/orchestrator/api/queue/notifications";
+const NOTIFICATIONS_STREAM_ENDPOINT = "/api/orchestrator/queue/notifications/stream";
+
+function joinClasses(...classes: (string | undefined)[]): string {
+  return classes.filter((value) => typeof value === "string" && value.length > 0).join(" ");
+}
+
+function asPayloadRecord(payload: unknown): QueuePayloadRecord | null {
+  if (payload === null || typeof payload !== "object" || Array.isArray(payload)) {
+    return null;
+  }
+
+  return payload as QueuePayloadRecord;
+}
+
+function getNotificationTaskId(notification: QueueNotification): string {
+  const payload = asPayloadRecord(notification.payload);
+  return typeof payload?.taskId === "string" && payload.taskId.trim().length > 0
+    ? payload.taskId
+    : notification.id;
+}
+
+function getNotificationEventType(notification: QueueNotification): string {
+  const payload = asPayloadRecord(notification.payload);
+  const candidates = [payload?.eventType, payload?.type, payload?.event];
+
+  for (const candidate of candidates) {
+    if (typeof candidate === "string" && candidate.trim().length > 0) {
+      return candidate;
+    }
+  }
+
+  return "notification";
+}
+
+function formatNotificationAge(createdAt: string): string {
+  const parsedDate = new Date(createdAt);
+  if (Number.isNaN(parsedDate.getTime())) {
+    return "just now";
+  }
+
+  return formatDistanceToNow(parsedDate, { addSuffix: true });
+}
+
+function groupNotificationsByAgent(notifications: QueueNotification[]): NotificationGroup[] {
+  const grouped = new Map<string, QueueNotification[]>();
+
+  for (const notification of notifications) {
+    const current = grouped.get(notification.agent) ?? [];
+    current.push(notification);
+    grouped.set(notification.agent, current);
+  }
+
+  return Array.from(grouped.entries())
+    .sort(([leftAgent], [rightAgent]) => leftAgent.localeCompare(rightAgent))
+    .map(([agent, items]) => ({
+      agent,
+      notifications: [...items].sort(
+        (left, right) => new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime()
+      ),
+    }));
+}
+
+export function QueueNotificationFeed({
+  className,
+}: QueueNotificationFeedProps): React.JSX.Element {
+  const { showToast } = useToast();
+  const [notifications, setNotifications] = useState<QueueNotification[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [acknowledgingIds, setAcknowledgingIds] = useState<Record<string, boolean>>({});
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [now, setNow] = useState(Date.now());
+
+  const refreshNotifications = useCallback(async (): Promise<void> => {
+    try {
+      const payload = await apiGet<QueueNotification[]>(NOTIFICATIONS_ENDPOINT);
+      setNotifications(payload);
+      setErrorMessage(null);
+    } catch (error) {
+      const message =
+        error instanceof Error && error.message.trim().length > 0
+          ? error.message
+          : "Failed to load queue notifications.";
+      setErrorMessage(message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshNotifications();
+  }, [refreshNotifications]);
+
+  useEffect(() => {
+    if (typeof EventSource === "undefined") {
+      return undefined;
+    }
+
+    const source = new EventSource(NOTIFICATIONS_STREAM_ENDPOINT);
+
+    source.onmessage = (event: MessageEvent<string>): void => {
+      try {
+        const payload = JSON.parse(event.data) as QueueNotification[];
+        setNotifications(payload);
+        setErrorMessage(null);
+        setIsLoading(false);
+      } catch {
+        setErrorMessage("Received an invalid notification stream payload.");
+      }
+    };
+
+    source.onerror = (): void => {
+      setErrorMessage((current) => current ?? "Queue notification stream disconnected.");
+    };
+
+    return (): void => {
+      source.close();
+    };
+  }, []);
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => {
+      setNow(Date.now());
+    }, 60_000);
+
+    return (): void => {
+      window.clearInterval(intervalId);
+    };
+  }, []);
+
+  const groupedNotifications = useMemo(
+    () => groupNotificationsByAgent(notifications),
+    [notifications]
+  );
+
+  const pendingCount = notifications.length;
+
+  const handleAck = useCallback(
+    async (notificationId: string): Promise<void> => {
+      setAcknowledgingIds((current) => ({
+        ...current,
+        [notificationId]: true,
+      }));
+
+      try {
+        await apiPost<{ success: true; id: string }>(
+          `/api/orchestrator/api/queue/notifications/${encodeURIComponent(notificationId)}/ack`
+        );
+        setNotifications((current) => current.filter((item) => item.id !== notificationId));
+      } catch (error) {
+        const message =
+          error instanceof Error && error.message.trim().length > 0
+            ? error.message
+            : "Failed to acknowledge notification.";
+        showToast(message, "error");
+      } finally {
+        setAcknowledgingIds((current) => {
+          const { [notificationId]: _omitted, ...remaining } = current;
+          return remaining;
+        });
+      }
+    },
+    [showToast]
+  );
+
+  return (
+    <Card className={joinClasses("flex h-full min-h-0 flex-col", className)}>
+      <CardHeader className="pb-2">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex min-w-0 items-center gap-2">
+            <CardTitle className="text-base">Queue Notifications</CardTitle>
+            <Badge variant={pendingCount > 0 ? "status-info" : "secondary"}>{pendingCount}</Badge>
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={() => {
+              setIsCollapsed((current) => !current);
+            }}
+            aria-label={isCollapsed ? "Expand queue notifications" : "Collapse queue notifications"}
+            title={isCollapsed ? "Expand queue notifications" : "Collapse queue notifications"}
+          >
+            {isCollapsed ? (
+              <ChevronLeft className="h-4 w-4" aria-hidden="true" />
+            ) : (
+              <ChevronRight className="h-4 w-4" aria-hidden="true" />
+            )}
+          </Button>
+        </div>
+      </CardHeader>
+      <Collapsible open={!isCollapsed} className="min-h-0 flex-1">
+        {!isCollapsed ? (
+          <CardContent className="min-h-0 flex-1 px-3 pb-3">
+            {isLoading ? (
+              <ScrollArea className="h-full">
+                <div className="space-y-2 pr-1">
+                  {Array.from({ length: 6 }).map((_, index) => (
+                    <Skeleton
+                      key={`queue-notification-skeleton-${String(index)}`}
+                      className="h-14 w-full"
+                    />
+                  ))}
+                </div>
+              </ScrollArea>
+            ) : errorMessage && notifications.length === 0 ? (
+              <div className="flex h-full items-center justify-center px-4 text-center text-sm text-red-500">
+                {errorMessage}
+              </div>
+            ) : groupedNotifications.length === 0 ? (
+              <div className="flex h-full flex-col items-center justify-center gap-2 text-center text-sm text-muted-foreground">
+                <BellOff className="h-5 w-5" aria-hidden="true" />
+                <span>No pending notifications</span>
+              </div>
+            ) : (
+              <ScrollArea className="h-full">
+                <div className="space-y-4 pr-1">
+                  {groupedNotifications.map((group) => (
+                    <section key={group.agent} className="space-y-2">
+                      <div className="flex items-center justify-between gap-2">
+                        <h3 className="text-sm font-semibold text-foreground">{group.agent}</h3>
+                        <span className="text-xs text-muted-foreground">
+                          {group.notifications.length}
+                        </span>
+                      </div>
+                      <div className="space-y-2">
+                        {group.notifications.map((notification) => {
+                          const taskId = getNotificationTaskId(notification);
+                          const eventType = getNotificationEventType(notification);
+                          const isAcknowledging = acknowledgingIds[notification.id] ?? false;
+
+                          return (
+                            <article
+                              key={notification.id}
+                              className="rounded-lg border border-border/70 bg-card px-3 py-2"
+                            >
+                              <div className="flex items-start justify-between gap-3">
+                                <div className="min-w-0 space-y-1">
+                                  <div className="flex flex-wrap items-center gap-2">
+                                    <span className="font-mono text-xs text-foreground">
+                                      {taskId}
+                                    </span>
+                                    <Badge variant="secondary">{eventType}</Badge>
+                                  </div>
+                                  <time
+                                    className="block text-xs text-muted-foreground"
+                                    dateTime={notification.createdAt}
+                                  >
+                                    {formatNotificationAge(notification.createdAt)}
+                                  </time>
+                                </div>
+                                <Button
+                                  type="button"
+                                  variant="outline"
+                                  size="sm"
+                                  disabled={isAcknowledging}
+                                  onClick={() => {
+                                    void handleAck(notification.id);
+                                  }}
+                                  aria-label={`ACK notification ${taskId}`}
+                                >
+                                  {isAcknowledging ? (
+                                    <span className="flex items-center gap-2">
+                                      <Loader2
+                                        className="h-4 w-4 animate-spin"
+                                        aria-hidden="true"
+                                      />
+                                      ACK
+                                    </span>
+                                  ) : (
+                                    "ACK"
+                                  )}
+                                </Button>
+                              </div>
+                            </article>
+                          );
+                        })}
+                      </div>
+                    </section>
+                  ))}
+                </div>
+              </ScrollArea>
+            )}
+          </CardContent>
+        ) : null}
+      </Collapsible>
+      <span className="sr-only" aria-live="polite">
+        {pendingCount} pending notifications, refreshed at {new Date(now).toISOString()}
+      </span>
+    </Card>
+  );
+}

docs/TASKS.md

@@ -119,14 +119,14 @@ Target version: `v0.0.23`
 
 ### Phase 0 — Backend Core (Foundation)
 
-| id          | status      | milestone     | description                                                                                      | issue | repo         | branch                 | depends_on                                      | blocks                                                      | agent | started_at | completed_at | estimate | used | notes                                         |
+| id          | status | milestone     | description                                                                                      | issue | repo         | branch                 | depends_on                                      | blocks                                                      | agent | started_at | completed_at | estimate | used | notes                                         |
-| ----------- | ----------- | ------------- | ------------------------------------------------------------------------------------------------ | ----- | ------------ | ---------------------- | ----------------------------------------------- | ----------------------------------------------------------- | ----- | ---------- | ------------ | -------- | ---- | --------------------------------------------- |
+| ----------- | ------ | ------------- | ------------------------------------------------------------------------------------------------ | ----- | ------------ | ---------------------- | ----------------------------------------------- | ----------------------------------------------------------- | ----- | ---------- | ------------ | -------- | ---- | --------------------------------------------- |
-| MS23-P0-001 | done        | p0-foundation | Prisma schema: AgentConversationMessage, AgentSessionTree, AgentProviderConfig, OperatorAuditLog | #693  | api          | feat/ms23-p0-schema    | —                                               | MS23-P0-002,MS23-P0-003,MS23-P0-004,MS23-P0-005,MS23-P1-001 | codex | 2026-03-06 | 2026-03-06   | 15K      | —    | taskSource field per mosaic-queue note in PRD |
+| MS23-P0-001 | done   | p0-foundation | Prisma schema: AgentConversationMessage, AgentSessionTree, AgentProviderConfig, OperatorAuditLog | #693  | api          | feat/ms23-p0-schema    | —                                               | MS23-P0-002,MS23-P0-003,MS23-P0-004,MS23-P0-005,MS23-P1-001 | codex | 2026-03-06 | 2026-03-06   | 15K      | —    | taskSource field per mosaic-queue note in PRD |
-| MS23-P0-002 | done        | p0-foundation | Agent message ingestion: wire spawner/lifecycle to write messages to DB                          | #693  | orchestrator | feat/ms23-p0-ingestion | MS23-P0-001                                     | MS23-P0-006                                                 | codex | 2026-03-06 | 2026-03-07      | 20K      | —    |                                               |
+| MS23-P0-002 | done   | p0-foundation | Agent message ingestion: wire spawner/lifecycle to write messages to DB                          | #693  | orchestrator | feat/ms23-p0-ingestion | MS23-P0-001                                     | MS23-P0-006                                                 | codex | 2026-03-06 | 2026-03-07   | 20K      | —    |                                               |
-| MS23-P0-003 | done        | p0-foundation | Orchestrator API: GET /agents/:id/messages + SSE stream endpoint                                 | #693  | orchestrator | feat/ms23-p0-stream    | MS23-P0-001                                     | MS23-P0-006                                                 | codex | 2026-03-06 | 2026-03-07      | 20K      | —    |                                               |
+| MS23-P0-003 | done   | p0-foundation | Orchestrator API: GET /agents/:id/messages + SSE stream endpoint                                 | #693  | orchestrator | feat/ms23-p0-stream    | MS23-P0-001                                     | MS23-P0-006                                                 | codex | 2026-03-06 | 2026-03-07   | 20K      | —    |                                               |
-| MS23-P0-004 | done        | p0-foundation | Orchestrator API: POST /agents/:id/inject + pause/resume endpoints                               | #693  | orchestrator | feat/ms23-p0-controls  | MS23-P0-001                                     | MS23-P0-006                                                 | codex | 2026-03-07 | 2026-03-07 | 15K      | —    |                                               |
+| MS23-P0-004 | done   | p0-foundation | Orchestrator API: POST /agents/:id/inject + pause/resume endpoints                               | #693  | orchestrator | feat/ms23-p0-controls  | MS23-P0-001                                     | MS23-P0-006                                                 | codex | 2026-03-07 | 2026-03-07   | 15K      | —    |                                               |
-| MS23-P0-005 | done        | p0-foundation | Subagent tree: parentAgentId on spawn registration + GET /agents/tree                            | #693  | orchestrator | feat/ms23-p0-tree      | MS23-P0-001                                     | MS23-P0-006                                                 | —     | —          | —            | 15K      | —    |                                               |
+| MS23-P0-005 | done   | p0-foundation | Subagent tree: parentAgentId on spawn registration + GET /agents/tree                            | #693  | orchestrator | feat/ms23-p0-tree      | MS23-P0-001                                     | MS23-P0-006                                                 | —     | —          | —            | 15K      | —    |                                               |
-| MS23-P0-006 | done        | p0-foundation | Unit + integration tests for all P0 orchestrator endpoints                                       | #693  | orchestrator | test/ms23-p0           | MS23-P0-002,MS23-P0-003,MS23-P0-004,MS23-P0-005 | MS23-P1-001                                                 | codex | 2026-03-07 | 2026-03-07 | 20K      | —    | Phase 0 gate: SSE stream verified via curl    |
+| MS23-P0-006 | done   | p0-foundation | Unit + integration tests for all P0 orchestrator endpoints                                       | #693  | orchestrator | test/ms23-p0           | MS23-P0-002,MS23-P0-003,MS23-P0-004,MS23-P0-005 | MS23-P1-001                                                 | codex | 2026-03-07 | 2026-03-07   | 20K      | —    | Phase 0 gate: SSE stream verified via curl    |
 
 ### Phase 1 — Provider Interface (Plugin Architecture)
 
@@ -183,3 +183,28 @@ Target version: `v0.0.23`
 | **Total**                    | **29** | **~478K** |
 
 Recommended dispatch: Codex for Phase 2 UI + routine API tasks; Sonnet for complex streaming logic (P0-003, P1-005, P3-002).
+
+---
+
+## MS24 — Queue Integration in Mission Control
+
+PRD: Issue #749
+Milestone: `0.0.24`
+Target version: `v0.0.24`
+
+> Single-writer: orchestrator (Jarvis/OpenClaw) only. Workers read but never modify.
+
+| id           | status | milestone | description                                                                                                                                                     | issue | repo  | branch              | depends_on   | blocks       | agent | started_at | completed_at | estimate | used | notes                                                                                                                                                      |
+| ------------ | ------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- | ----- | ------------------- | ------------ | ------------ | ----- | ---------- | ------------ | -------- | ---- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| MS24-API-001 | done   | p0-api    | QueueNotificationsModule: GET /notifications, GET /notifications/stream (SSE), POST /notifications/:id/ack, GET /tasks. Auth: ApiKeyGuard. Unit tests included. | #749  | api   | feat/ms24-queue-api | —            | MS24-WEB-001 | —     | —          | —            | 25K      | —    | Guard: ApiKeyGuard from src/common/guards/api-key.guard.ts (COORDINATOR_API_KEY). SSE via raw express Response + chokidar. Fail-soft if inbox dir missing. |
+| MS24-WEB-001 | done   | p0-ui     | QueueNotificationFeed component + MissionControlLayout wiring (right sidebar panel, badge count)                                                                | #749  | web   | feat/ms24-queue-ui  | MS24-API-001 | MS24-VER-001 | —     | —          | —            | 20K      | —    | SSE to /api/queue/notifications/stream. ACK button. Collapsible panel in MissionControlLayout.tsx.                                                         |
+| MS24-VER-001 | done   | p0-verify | CI green, no regressions, deploy to prod, tag v0.0.24                                                                                                           | #749  | stack | —                   | MS24-WEB-001 | —            | —     | —          | —            | 5K       | —    |                                                                                                                                                            |
+
+### MS24 Budget Summary
+
+| Phase     | Tasks | Estimate |
+| --------- | ----- | -------- |
+| API       | 1     | ~25K     |
+| UI        | 1     | ~20K     |
+| Verify    | 1     | ~5K      |
+| **Total** | **3** | **~50K** |