fix(ci): use node:24-slim (glibc) instead of Alpine (musl)

Native modules like @matrix-org/matrix-sdk-crypto-nodejs detect the
libc type at install time and download the appropriate binary.

Previously, CI used node:24-alpine (musl), so native modules downloaded
musl binaries. But production runs on Debian (glibc), causing runtime
crashes when the glibc binary is expected but not found.

This fix:
- Changes CI to node:24-slim (Debian/glibc)
- Adds python3/make/g++ for native module compilation

Fixes: matrix-sdk-crypto-nodejs-linux-x64-gnu MODULE_NOT_FOUND

.npmrc

@@ -1 +1,3 @@
 @mosaicstack:registry=https://git.mosaicstack.dev/api/packages/mosaic/npm/
+supportedArchitectures[libc][]=glibc
+supportedArchitectures[cpu][]=x64

.woodpecker/base-image.yml

@@ -0,0 +1,27 @@
+when:
+  - event: manual
+  - event: cron
+    cron: weekly-base-image
+
+variables:
+  - &kaniko_setup |
+    mkdir -p /kaniko/.docker
+    echo "{\"auths\":{\"git.mosaicstack.dev\":{\"username\":\"$GITEA_USER\",\"password\":\"$GITEA_TOKEN\"}}}" > /kaniko/.docker/config.json
+
+steps:
+  build-base:
+    image: gcr.io/kaniko-project/executor:debug
+    environment:
+      GITEA_USER:
+        from_secret: gitea_username
+      GITEA_TOKEN:
+        from_secret: gitea_token
+    commands:
+      - *kaniko_setup
+      - /kaniko/executor
+          --context .
+          --dockerfile docker/base.Dockerfile
+          --destination git.mosaicstack.dev/mosaic/node-base:24-slim
+          --destination git.mosaicstack.dev/mosaic/node-base:latest
+          --cache=true
+          --cache-repo git.mosaicstack.dev/mosaic/node-base/cache

.woodpecker/ci.yml

@@ -29,9 +29,11 @@ when:
         - ".trivyignore"
 
 variables:
-  - &node_image "node:24-alpine"
+  - &node_image "node:24-slim"
   - &install_deps |
     corepack enable
+    apt-get update && apt-get install -y --no-install-recommends python3 make g++
+    pnpm config set store-dir /root/.local/share/pnpm/store
     pnpm install --frozen-lockfile
   - &use_deps |
     corepack enable
@@ -168,7 +170,7 @@ steps:
         elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
           DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-api:latest"
         fi
-        /kaniko/executor --context . --dockerfile apps/api/Dockerfile --snapshot-mode=redo $DESTINATIONS
+        /kaniko/executor --context . --dockerfile apps/api/Dockerfile --snapshot-mode=redo --cache=true --cache-repo git.mosaicstack.dev/mosaic/stack-api/cache $DESTINATIONS
     when:
       - branch: [main]
         event: [push, manual, tag]
@@ -193,7 +195,7 @@ steps:
         elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
           DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-orchestrator:latest"
         fi
-        /kaniko/executor --context . --dockerfile apps/orchestrator/Dockerfile --snapshot-mode=redo $DESTINATIONS
+        /kaniko/executor --context . --dockerfile apps/orchestrator/Dockerfile --snapshot-mode=redo --cache=true --cache-repo git.mosaicstack.dev/mosaic/stack-orchestrator/cache $DESTINATIONS
     when:
       - branch: [main]
         event: [push, manual, tag]
@@ -218,7 +220,7 @@ steps:
         elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
           DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-web:latest"
         fi
-        /kaniko/executor --context . --dockerfile apps/web/Dockerfile --snapshot-mode=redo --build-arg NEXT_PUBLIC_API_URL=https://api.mosaicstack.dev $DESTINATIONS
+        /kaniko/executor --context . --dockerfile apps/web/Dockerfile --snapshot-mode=redo --cache=true --cache-repo git.mosaicstack.dev/mosaic/stack-web/cache --build-arg NEXT_PUBLIC_API_URL=https://api.mosaicstack.dev $DESTINATIONS
     when:
       - branch: [main]
         event: [push, manual, tag]

apps/api/Dockerfile

@@ -1,7 +1,7 @@
 # Base image for all stages
 # Uses Debian slim (glibc) instead of Alpine (musl) because native Node.js addons
 # (matrix-sdk-crypto-nodejs, Prisma engines) require glibc-compatible binaries.
-FROM node:24-slim AS base
+FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS base
 
 # Install pnpm globally
 RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
@@ -19,9 +19,9 @@ COPY turbo.json ./
 FROM base AS deps
 
 # Install build tools for native addons (node-pty requires node-gyp compilation)
-# and OpenSSL for Prisma engine detection
+# Note: openssl and ca-certificates pre-installed in base image
 RUN apt-get update && apt-get install -y --no-install-recommends \
-    python3 make g++ openssl \
+    python3 make g++ \
     && rm -rf /var/lib/apt/lists/*
 
 # Copy all package.json files for workspace resolution
@@ -30,6 +30,9 @@ COPY packages/ui/package.json ./packages/ui/
 COPY packages/config/package.json ./packages/config/
 COPY apps/api/package.json ./apps/api/
 
+# Copy npm configuration for native binary architecture hints
+COPY .npmrc ./
+
 # Install dependencies (no cache mount — Kaniko builds are ephemeral in CI)
 # Then explicitly rebuild node-pty from source since pnpm may skip postinstall
 # scripts or fail to find prebuilt binaries for this Node.js version
@@ -61,19 +64,14 @@ RUN pnpm turbo build --filter=@mosaic/api --force
 # ======================
 # Production stage
 # ======================
-FROM node:24-slim AS production
+FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS production
 
-# 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
+# dumb-init, openssl, ca-certificates pre-installed in base image
 
 # Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
-# - openssl: Prisma engine detection requires libssl
-# - No build tools needed here — native addons are compiled in the deps stage
-RUN apt-get update && apt-get install -y --no-install-recommends openssl \
-    && rm -rf /var/lib/apt/lists/* \
-    && rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
-    && chmod 755 /usr/local/bin/dumb-init \
+# - Remove npm/npx to reduce image size (not used in production)
+# - Create non-root user
+RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
     && groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nestjs
 
 WORKDIR /app

apps/api/package.json

@@ -62,6 +62,7 @@
     "discord.js": "^14.25.1",
     "dockerode": "^4.0.9",
     "gray-matter": "^4.0.3",
+    "helmet": "^8.1.0",
     "highlight.js": "^11.11.1",
     "ioredis": "^5.9.2",
     "jose": "^6.1.3",

apps/api/src/activity/activity.controller.ts

@@ -1,7 +1,7 @@
 import { Controller, Get, Query, Param, UseGuards } from "@nestjs/common";
 import { ActivityService } from "./activity.service";
 import { EntityType } from "@prisma/client";
-import type { QueryActivityLogDto } from "./dto";
+import { QueryActivityLogDto } from "./dto";
 import { AuthGuard } from "../auth/guards/auth.guard";
 import { WorkspaceGuard, PermissionGuard } from "../common/guards";
 import { Workspace, Permission, RequirePermission } from "../common/decorators";

apps/api/src/activity/activity.service.ts

@@ -117,12 +117,13 @@ export class ActivityService {
   /**
    * Get a single activity log by ID
    */
-  async findOne(id: string, workspaceId: string): Promise<ActivityLogResult | null> {
+  async findOne(id: string, workspaceId?: string): Promise<ActivityLogResult | null> {
+    const where: Prisma.ActivityLogWhereUniqueInput = { id };
+    if (workspaceId) {
+      where.workspaceId = workspaceId;
+    }
     return await this.prisma.activityLog.findUnique({
-      where: {
-        id,
-        workspaceId,
-      },
+      where,
       include: {
         user: {
           select: {

apps/api/src/activity/interceptors/activity-logging.interceptor.spec.ts

@@ -384,10 +384,18 @@ describe("ActivityLoggingInterceptor", () => {
       const context = createMockExecutionContext("POST", {}, body, user);
       const next = createMockCallHandler(result);
 
+      mockActivityService.logActivity.mockResolvedValue({
+        id: "activity-123",
+      });
+
       await new Promise<void>((resolve) => {
         interceptor.intercept(context, next).subscribe(() => {
-          // Should not call logActivity when workspaceId is missing
-          expect(mockActivityService.logActivity).not.toHaveBeenCalled();
+          // workspaceId is now optional, so logActivity should be called without it
+          expect(mockActivityService.logActivity).toHaveBeenCalled();
+          const callArgs = mockActivityService.logActivity.mock.calls[0][0];
+          expect(callArgs.userId).toBe("user-123");
+          expect(callArgs.entityId).toBe("task-123");
+          expect(callArgs.workspaceId).toBeUndefined();
           resolve();
         });
       });
@@ -412,10 +420,18 @@ describe("ActivityLoggingInterceptor", () => {
       const context = createMockExecutionContext("POST", {}, body, user);
       const next = createMockCallHandler(result);
 
+      mockActivityService.logActivity.mockResolvedValue({
+        id: "activity-123",
+      });
+
       await new Promise<void>((resolve) => {
         interceptor.intercept(context, next).subscribe(() => {
-          // Should not call logActivity when workspaceId is missing
-          expect(mockActivityService.logActivity).not.toHaveBeenCalled();
+          // workspaceId is now optional, so logActivity should be called without it
+          expect(mockActivityService.logActivity).toHaveBeenCalled();
+          const callArgs = mockActivityService.logActivity.mock.calls[0][0];
+          expect(callArgs.userId).toBe("user-123");
+          expect(callArgs.entityId).toBe("task-123");
+          expect(callArgs.workspaceId).toBeUndefined();
           resolve();
         });
       });

apps/api/src/activity/interceptors/activity-logging.interceptor.ts

@@ -4,6 +4,7 @@ import { tap } from "rxjs/operators";
 import { ActivityService } from "../activity.service";
 import { ActivityAction, EntityType } from "@prisma/client";
 import type { Prisma } from "@prisma/client";
+import type { CreateActivityLogInput } from "../interfaces/activity.interface";
 import type { AuthenticatedRequest } from "../../common/types/user.types";
 
 /**
@@ -61,10 +62,13 @@ export class ActivityLoggingInterceptor implements NestInterceptor {
       // Extract entity information
       const resultObj = result as Record<string, unknown> | undefined;
       const entityId = params.id ?? (resultObj?.id as string | undefined);
+
+      // workspaceId is now optional - log events even when missing
       const workspaceId = user.workspaceId ?? (body.workspaceId as string | undefined);
 
-      if (!entityId || !workspaceId) {
-        this.logger.warn("Cannot log activity: missing entityId or workspaceId");
+      // Log with warning if entityId is missing, but still proceed with logging if workspaceId exists
+      if (!entityId) {
+        this.logger.warn("Cannot log activity: missing entityId");
         return;
       }
 
@@ -92,9 +96,8 @@ export class ActivityLoggingInterceptor implements NestInterceptor {
       const userAgent =
         typeof userAgentHeader === "string" ? userAgentHeader : userAgentHeader?.[0];
 
-      // Log the activity
-      await this.activityService.logActivity({
-        workspaceId,
+      // Log the activity — workspaceId is optional
+      const activityInput: CreateActivityLogInput = {
         userId: user.id,
         action,
         entityType,
@@ -102,7 +105,11 @@ export class ActivityLoggingInterceptor implements NestInterceptor {
         details,
         ipAddress: ip ?? undefined,
         userAgent: userAgent ?? undefined,
-      });
+      };
+      if (workspaceId) {
+        activityInput.workspaceId = workspaceId;
+      }
+      await this.activityService.logActivity(activityInput);
     } catch (error) {
       // Don't fail the request if activity logging fails
       this.logger.error(

apps/api/src/activity/interfaces/activity.interface.ts

@@ -2,9 +2,10 @@ import type { ActivityAction, EntityType, Prisma } from "@prisma/client";
 
 /**
  * Interface for creating a new activity log entry
+ * workspaceId is optional - allows logging events without workspace context
  */
 export interface CreateActivityLogInput {
-  workspaceId: string;
+  workspaceId?: string | null;
   userId: string;
   action: ActivityAction;
   entityType: EntityType;

apps/api/src/agent-config/agent-config.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, NotFoundException } from "@nestjs/common";
 import type { LlmProvider } from "@prisma/client";
-import { timingSafeEqual } from "node:crypto";
+import { createHash, timingSafeEqual } from "node:crypto";
 import { PrismaService } from "../prisma/prisma.service";
 import { CryptoService } from "../crypto/crypto.service";
 
@@ -143,21 +143,23 @@ export class AgentConfigService {
       }),
     ]);
 
+    let match: ContainerTokenValidation | null = null;
+
     for (const container of userContainers) {
       const storedToken = this.decryptContainerToken(container.gatewayToken);
-      if (storedToken && this.tokensEqual(storedToken, token)) {
-        return { type: "user", id: container.id };
+      if (!match && storedToken && this.tokensEqual(storedToken, token)) {
+        match = { type: "user", id: container.id };
       }
     }
 
     for (const container of systemContainers) {
       const storedToken = this.decryptContainerToken(container.gatewayToken);
-      if (storedToken && this.tokensEqual(storedToken, token)) {
-        return { type: "system", id: container.id };
+      if (!match && storedToken && this.tokensEqual(storedToken, token)) {
+        match = { type: "system", id: container.id };
       }
     }
 
-    return null;
+    return match;
   }
 
   private buildOpenClawConfig(
@@ -268,14 +270,9 @@ export class AgentConfigService {
   }
 
   private tokensEqual(left: string, right: string): boolean {
-    const leftBuffer = Buffer.from(left, "utf8");
-    const rightBuffer = Buffer.from(right, "utf8");
-
-    if (leftBuffer.length !== rightBuffer.length) {
-      return false;
-    }
-
-    return timingSafeEqual(leftBuffer, rightBuffer);
+    const leftDigest = createHash("sha256").update(left, "utf8").digest();
+    const rightDigest = createHash("sha256").update(right, "utf8").digest();
+    return timingSafeEqual(leftDigest, rightDigest);
   }
 
   private hasModelId(modelEntry: unknown): modelEntry is { id: string } {

apps/api/src/app.module.ts

@@ -57,6 +57,8 @@ import { ContainerLifecycleModule } from "./container-lifecycle/container-lifecy
 import { ContainerReaperModule } from "./container-reaper/container-reaper.module";
 import { FleetSettingsModule } from "./fleet-settings/fleet-settings.module";
 import { OnboardingModule } from "./onboarding/onboarding.module";
+import { ChatProxyModule } from "./chat-proxy/chat-proxy.module";
+import { OrchestratorModule } from "./orchestrator/orchestrator.module";
 
 @Module({
   imports: [
@@ -135,6 +137,8 @@ import { OnboardingModule } from "./onboarding/onboarding.module";
     ContainerReaperModule,
     FleetSettingsModule,
     OnboardingModule,
+    ChatProxyModule,
+    OrchestratorModule,
   ],
   controllers: [AppController, CsrfController],
   providers: [

apps/api/src/auth/auth.controller.ts

@@ -106,7 +106,7 @@ export class AuthController {
   // @SkipCsrf avoids double-protection conflicts.
   // See: https://www.better-auth.com/docs/reference/security
   @SkipCsrf()
-  @Throttle({ strict: { limit: 10, ttl: 60000 } })
+  @Throttle({ default: { ttl: 60_000, limit: 5 } })
   async handleAuth(@Req() req: ExpressRequest, @Res() res: ExpressResponse): Promise<void> {
     // Extract client IP for logging
     const clientIp = this.getClientIp(req);

apps/api/src/chat-proxy/chat-proxy.controller.ts

@@ -0,0 +1,102 @@
+import {
+  Body,
+  Controller,
+  HttpException,
+  Logger,
+  Post,
+  Req,
+  Res,
+  UnauthorizedException,
+  UseGuards,
+} from "@nestjs/common";
+import type { Response } from "express";
+import { AuthGuard } from "../auth/guards/auth.guard";
+import type { MaybeAuthenticatedRequest } from "../auth/types/better-auth-request.interface";
+import { ChatStreamDto } from "./chat-proxy.dto";
+import { ChatProxyService } from "./chat-proxy.service";
+
+@Controller("chat")
+@UseGuards(AuthGuard)
+export class ChatProxyController {
+  private readonly logger = new Logger(ChatProxyController.name);
+
+  constructor(private readonly chatProxyService: ChatProxyService) {}
+
+  // POST /api/chat/stream
+  // Request: { messages: Array<{role, content}> }
+  // Response: SSE stream of chat completion events
+  @Post("stream")
+  async streamChat(
+    @Body() body: ChatStreamDto,
+    @Req() req: MaybeAuthenticatedRequest,
+    @Res() res: Response
+  ): Promise<void> {
+    const userId = req.user?.id;
+    if (!userId) {
+      throw new UnauthorizedException("No authenticated user found on request");
+    }
+
+    const abortController = new AbortController();
+    req.once("close", () => {
+      abortController.abort();
+    });
+
+    res.setHeader("Content-Type", "text/event-stream");
+    res.setHeader("Cache-Control", "no-cache");
+    res.setHeader("Connection", "keep-alive");
+    res.setHeader("X-Accel-Buffering", "no");
+
+    try {
+      const upstreamResponse = await this.chatProxyService.proxyChat(
+        userId,
+        body.messages,
+        abortController.signal
+      );
+
+      const upstreamContentType = upstreamResponse.headers.get("content-type");
+      if (upstreamContentType) {
+        res.setHeader("Content-Type", upstreamContentType);
+      }
+
+      if (!upstreamResponse.body) {
+        throw new Error("OpenClaw response did not include a stream body");
+      }
+
+      for await (const chunk of upstreamResponse.body as unknown as AsyncIterable<Uint8Array>) {
+        if (res.writableEnded || res.destroyed) {
+          break;
+        }
+
+        res.write(Buffer.from(chunk));
+      }
+    } catch (error: unknown) {
+      this.logStreamError(error);
+
+      if (!res.writableEnded && !res.destroyed) {
+        res.write("event: error\n");
+        res.write(`data: ${JSON.stringify({ error: this.toSafeClientMessage(error) })}\n\n`);
+      }
+    } finally {
+      if (!res.writableEnded && !res.destroyed) {
+        res.end();
+      }
+    }
+  }
+
+  private toSafeClientMessage(error: unknown): string {
+    if (error instanceof HttpException && error.getStatus() < 500) {
+      return "Chat request was rejected";
+    }
+
+    return "Chat stream failed";
+  }
+
+  private logStreamError(error: unknown): void {
+    if (error instanceof Error) {
+      this.logger.warn(`Chat stream failed: ${error.message}`);
+      return;
+    }
+
+    this.logger.warn(`Chat stream failed: ${String(error)}`);
+  }
+}

apps/api/src/chat-proxy/chat-proxy.dto.ts

@@ -0,0 +1,25 @@
+import { Type } from "class-transformer";
+import { ArrayMinSize, IsArray, IsNotEmpty, IsString, ValidateNested } from "class-validator";
+
+export interface ChatMessage {
+  role: string;
+  content: string;
+}
+
+export class ChatMessageDto implements ChatMessage {
+  @IsString({ message: "role must be a string" })
+  @IsNotEmpty({ message: "role is required" })
+  role!: string;
+
+  @IsString({ message: "content must be a string" })
+  @IsNotEmpty({ message: "content is required" })
+  content!: string;
+}
+
+export class ChatStreamDto {
+  @IsArray({ message: "messages must be an array" })
+  @ArrayMinSize(1, { message: "messages must contain at least one message" })
+  @ValidateNested({ each: true })
+  @Type(() => ChatMessageDto)
+  messages!: ChatMessageDto[];
+}

apps/api/src/chat-proxy/chat-proxy.module.ts

@@ -0,0 +1,15 @@
+import { Module } from "@nestjs/common";
+import { AuthModule } from "../auth/auth.module";
+import { AgentConfigModule } from "../agent-config/agent-config.module";
+import { ContainerLifecycleModule } from "../container-lifecycle/container-lifecycle.module";
+import { PrismaModule } from "../prisma/prisma.module";
+import { ChatProxyController } from "./chat-proxy.controller";
+import { ChatProxyService } from "./chat-proxy.service";
+
+@Module({
+  imports: [AuthModule, PrismaModule, ContainerLifecycleModule, AgentConfigModule],
+  controllers: [ChatProxyController],
+  providers: [ChatProxyService],
+  exports: [ChatProxyService],
+})
+export class ChatProxyModule {}

apps/api/src/chat-proxy/chat-proxy.service.spec.ts

@@ -0,0 +1,108 @@
+import { ServiceUnavailableException } from "@nestjs/common";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ChatProxyService } from "./chat-proxy.service";
+
+describe("ChatProxyService", () => {
+  const userId = "user-123";
+
+  const prisma = {
+    userAgentConfig: {
+      findUnique: vi.fn(),
+    },
+  };
+
+  const containerLifecycle = {
+    ensureRunning: vi.fn(),
+    touch: vi.fn(),
+  };
+
+  let service: ChatProxyService;
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    fetchMock = vi.fn();
+    vi.stubGlobal("fetch", fetchMock);
+    service = new ChatProxyService(prisma as never, containerLifecycle as never);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  describe("getContainerUrl", () => {
+    it("calls ensureRunning and touch for the user", async () => {
+      containerLifecycle.ensureRunning.mockResolvedValue({
+        url: "http://mosaic-user-user-123:19000",
+        token: "gateway-token",
+      });
+      containerLifecycle.touch.mockResolvedValue(undefined);
+
+      const url = await service.getContainerUrl(userId);
+
+      expect(url).toBe("http://mosaic-user-user-123:19000");
+      expect(containerLifecycle.ensureRunning).toHaveBeenCalledWith(userId);
+      expect(containerLifecycle.touch).toHaveBeenCalledWith(userId);
+    });
+  });
+
+  describe("proxyChat", () => {
+    it("forwards the request to the user's OpenClaw container", async () => {
+      containerLifecycle.ensureRunning.mockResolvedValue({
+        url: "http://mosaic-user-user-123:19000",
+        token: "gateway-token",
+      });
+      containerLifecycle.touch.mockResolvedValue(undefined);
+      fetchMock.mockResolvedValue(new Response("event: token\ndata: hello\n\n"));
+
+      const messages = [{ role: "user", content: "Hello from Mosaic" }];
+      const response = await service.proxyChat(userId, messages);
+
+      expect(response).toBeInstanceOf(Response);
+      expect(fetchMock).toHaveBeenCalledWith(
+        "http://mosaic-user-user-123:19000/v1/chat/completions",
+        expect.objectContaining({
+          method: "POST",
+          headers: {
+            Authorization: "Bearer gateway-token",
+            "Content-Type": "application/json",
+          },
+        })
+      );
+
+      const [, request] = fetchMock.mock.calls[0] as [string, RequestInit];
+      const parsedBody = JSON.parse(String(request.body));
+      expect(parsedBody).toEqual({
+        messages,
+        model: "openclaw:default",
+        stream: true,
+      });
+    });
+
+    it("throws ServiceUnavailableException on connection refused errors", async () => {
+      containerLifecycle.ensureRunning.mockResolvedValue({
+        url: "http://mosaic-user-user-123:19000",
+        token: "gateway-token",
+      });
+      containerLifecycle.touch.mockResolvedValue(undefined);
+      fetchMock.mockRejectedValue(new Error("connect ECONNREFUSED 127.0.0.1:19000"));
+
+      await expect(service.proxyChat(userId, [])).rejects.toBeInstanceOf(
+        ServiceUnavailableException
+      );
+    });
+
+    it("throws ServiceUnavailableException on timeout errors", async () => {
+      containerLifecycle.ensureRunning.mockResolvedValue({
+        url: "http://mosaic-user-user-123:19000",
+        token: "gateway-token",
+      });
+      containerLifecycle.touch.mockResolvedValue(undefined);
+      fetchMock.mockRejectedValue(new Error("The operation was aborted due to timeout"));
+
+      await expect(service.proxyChat(userId, [])).rejects.toBeInstanceOf(
+        ServiceUnavailableException
+      );
+    });
+  });
+});

apps/api/src/chat-proxy/chat-proxy.service.ts

@@ -0,0 +1,110 @@
+import {
+  BadGatewayException,
+  Injectable,
+  Logger,
+  ServiceUnavailableException,
+} from "@nestjs/common";
+import { ContainerLifecycleService } from "../container-lifecycle/container-lifecycle.service";
+import { PrismaService } from "../prisma/prisma.service";
+import type { ChatMessage } from "./chat-proxy.dto";
+
+const DEFAULT_OPENCLAW_MODEL = "openclaw:default";
+
+interface ContainerConnection {
+  url: string;
+  token: string;
+}
+
+@Injectable()
+export class ChatProxyService {
+  private readonly logger = new Logger(ChatProxyService.name);
+
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly containerLifecycle: ContainerLifecycleService
+  ) {}
+
+  // Get the user's OpenClaw container URL and mark it active.
+  async getContainerUrl(userId: string): Promise<string> {
+    const { url } = await this.getContainerConnection(userId);
+    return url;
+  }
+
+  // Proxy chat request to OpenClaw.
+  async proxyChat(
+    userId: string,
+    messages: ChatMessage[],
+    signal?: AbortSignal
+  ): Promise<Response> {
+    const { url: containerUrl, token: gatewayToken } = await this.getContainerConnection(userId);
+    const model = await this.getPreferredModel(userId);
+    const requestInit: RequestInit = {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${gatewayToken}`,
+      },
+      body: JSON.stringify({
+        messages,
+        model,
+        stream: true,
+      }),
+    };
+
+    if (signal) {
+      requestInit.signal = signal;
+    }
+
+    try {
+      const response = await fetch(`${containerUrl}/v1/chat/completions`, requestInit);
+
+      if (!response.ok) {
+        const detail = await this.readResponseText(response);
+        const status = `${String(response.status)} ${response.statusText}`.trim();
+        this.logger.warn(
+          detail ? `OpenClaw returned ${status}: ${detail}` : `OpenClaw returned ${status}`
+        );
+        throw new BadGatewayException(`OpenClaw returned ${status}`);
+      }
+
+      return response;
+    } catch (error: unknown) {
+      if (error instanceof BadGatewayException) {
+        throw error;
+      }
+
+      const message = error instanceof Error ? error.message : String(error);
+      this.logger.warn(`Failed to proxy chat request: ${message}`);
+      throw new ServiceUnavailableException("Failed to proxy chat to OpenClaw");
+    }
+  }
+
+  private async getContainerConnection(userId: string): Promise<ContainerConnection> {
+    const connection = await this.containerLifecycle.ensureRunning(userId);
+    await this.containerLifecycle.touch(userId);
+    return connection;
+  }
+
+  private async getPreferredModel(userId: string): Promise<string> {
+    const config = await this.prisma.userAgentConfig.findUnique({
+      where: { userId },
+      select: { primaryModel: true },
+    });
+
+    const primaryModel = config?.primaryModel?.trim();
+    if (!primaryModel) {
+      return DEFAULT_OPENCLAW_MODEL;
+    }
+
+    return primaryModel;
+  }
+
+  private async readResponseText(response: Response): Promise<string | null> {
+    try {
+      const text = (await response.text()).trim();
+      return text.length > 0 ? text : null;
+    } catch {
+      return null;
+    }
+  }
+}

apps/api/src/common/guards/csrf.guard.spec.ts

@@ -87,6 +87,17 @@ describe("CsrfGuard", () => {
   });
 
   describe("State-changing methods requiring CSRF", () => {
+    it("should allow POST with Bearer auth without CSRF token", () => {
+      const context = createContext(
+        "POST",
+        {},
+        { authorization: "Bearer api-token" },
+        false,
+        "user-123"
+      );
+      expect(guard.canActivate(context)).toBe(true);
+    });
+
     it("should reject POST without CSRF token", () => {
       const context = createContext("POST", {}, {}, false, "user-123");
       expect(() => guard.canActivate(context)).toThrow(ForbiddenException);

apps/api/src/common/guards/csrf.guard.ts

@@ -57,6 +57,11 @@ export class CsrfGuard implements CanActivate {
       return true;
     }
 
+    const authHeader = request.headers.authorization;
+    if (typeof authHeader === "string" && authHeader.startsWith("Bearer ")) {
+      return true;
+    }
+
     // Get CSRF token from cookie and header
     const cookies = request.cookies as Record<string, string> | undefined;
     const cookieToken = cookies?.["csrf-token"];
@@ -106,14 +111,9 @@ export class CsrfGuard implements CanActivate {
 
         throw new ForbiddenException("CSRF token not bound to session");
       }
-    } else {
-      this.logger.debug({
-        event: "CSRF_SKIP_SESSION_BINDING",
-        method: request.method,
-        path: request.path,
-        reason: "User context not yet available (global guard runs before AuthGuard)",
-      });
     }
+    // Note: when userId is absent, the double-submit cookie check above is
+    // sufficient CSRF protection. AuthGuard populates request.user afterward.
 
     return true;
   }

apps/api/src/container-lifecycle/container-lifecycle.module.ts

@@ -1,10 +1,11 @@
 import { Module } from "@nestjs/common";
+import { ConfigModule } from "@nestjs/config";
 import { PrismaModule } from "../prisma/prisma.module";
 import { CryptoModule } from "../crypto/crypto.module";
 import { ContainerLifecycleService } from "./container-lifecycle.service";
 
 @Module({
-  imports: [PrismaModule, CryptoModule],
+  imports: [ConfigModule, PrismaModule, CryptoModule],
   providers: [ContainerLifecycleService],
   exports: [ContainerLifecycleService],
 })

apps/api/src/dashboard/dashboard.controller.ts

@@ -3,7 +3,7 @@ import { DashboardService } from "./dashboard.service";
 import { AuthGuard } from "../auth/guards/auth.guard";
 import { WorkspaceGuard, PermissionGuard } from "../common/guards";
 import { Workspace, Permission, RequirePermission } from "../common/decorators";
-import type { DashboardSummaryDto } from "./dto";
+import { DashboardSummaryDto } from "./dto";
 
 /**
  * Controller for dashboard endpoints.

apps/api/src/fleet-settings/fleet-settings.controller.ts

@@ -15,7 +15,7 @@ import type { AuthUser } from "@mosaic/shared";
 import { CurrentUser } from "../auth/decorators/current-user.decorator";
 import { AdminGuard } from "../auth/guards/admin.guard";
 import { AuthGuard } from "../auth/guards/auth.guard";
-import type {
+import {
   CreateProviderDto,
   ResetPasswordDto,
   UpdateAgentConfigDto,

apps/api/src/fleet-settings/fleet-settings.module.ts

@@ -1,11 +1,12 @@
 import { Module } from "@nestjs/common";
+import { AuthModule } from "../auth/auth.module";
 import { PrismaModule } from "../prisma/prisma.module";
 import { CryptoModule } from "../crypto/crypto.module";
 import { FleetSettingsController } from "./fleet-settings.controller";
 import { FleetSettingsService } from "./fleet-settings.service";
 
 @Module({
-  imports: [PrismaModule, CryptoModule],
+  imports: [AuthModule, PrismaModule, CryptoModule],
   controllers: [FleetSettingsController],
   providers: [FleetSettingsService],
   exports: [FleetSettingsService],

apps/api/src/llm-usage/llm-usage.controller.ts

@@ -1,7 +1,7 @@
 import { Controller, Get, Param, Query } from "@nestjs/common";
 import type { LlmUsageLog } from "@prisma/client";
 import { LlmUsageService } from "./llm-usage.service";
-import type { UsageAnalyticsQueryDto, UsageAnalyticsResponseDto } from "./dto";
+import { UsageAnalyticsQueryDto, UsageAnalyticsResponseDto } from "./dto";
 
 /**
  * LLM Usage Controller

apps/api/src/main.ts

@@ -1,6 +1,7 @@
 import { NestFactory } from "@nestjs/core";
 import { RequestMethod, ValidationPipe } from "@nestjs/common";
 import cookieParser from "cookie-parser";
+import helmet from "helmet";
 import { AppModule } from "./app.module";
 import { getTrustedOrigins } from "./auth/auth.config";
 import { GlobalExceptionFilter } from "./filters/global-exception.filter";
@@ -33,6 +34,14 @@ async function bootstrap() {
   // Enable cookie parser for session handling
   app.use(cookieParser());
 
+  // Enable helmet security headers
+  app.use(
+    helmet({
+      contentSecurityPolicy: false, // Let Next.js handle CSP
+      crossOriginEmbedderPolicy: false,
+    })
+  );
+
   // Enable global validation pipe with transformation
   app.useGlobalPipes(
     new ValidationPipe({

apps/api/src/orchestrator/orchestrator.controller.spec.ts

@@ -0,0 +1,194 @@
+import { beforeEach, describe, expect, it, vi, afterEach } from "vitest";
+import type { Response } from "express";
+import { AgentStatus } from "@prisma/client";
+import { OrchestratorController } from "./orchestrator.controller";
+import { PrismaService } from "../prisma/prisma.service";
+import { AuthGuard } from "../auth/guards/auth.guard";
+
+describe("OrchestratorController", () => {
+  const mockPrismaService = {
+    agent: {
+      findMany: vi.fn(),
+    },
+  };
+
+  let controller: OrchestratorController;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    controller = new OrchestratorController(mockPrismaService as unknown as PrismaService);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe("getAgents", () => {
+    it("returns active agents with API widget shape", async () => {
+      mockPrismaService.agent.findMany.mockResolvedValue([
+        {
+          id: "agent-1",
+          name: "Planner",
+          status: AgentStatus.WORKING,
+          role: "planner",
+          createdAt: new Date("2026-02-28T10:00:00.000Z"),
+        },
+      ]);
+
+      const result = await controller.getAgents();
+
+      expect(result).toEqual([
+        {
+          id: "agent-1",
+          name: "Planner",
+          status: AgentStatus.WORKING,
+          type: "planner",
+          createdAt: new Date("2026-02-28T10:00:00.000Z"),
+        },
+      ]);
+
+      expect(mockPrismaService.agent.findMany).toHaveBeenCalledWith({
+        where: {
+          status: {
+            not: AgentStatus.TERMINATED,
+          },
+        },
+        orderBy: {
+          createdAt: "desc",
+        },
+        select: {
+          id: true,
+          name: true,
+          status: true,
+          role: true,
+          createdAt: true,
+        },
+      });
+    });
+
+    it("falls back to type=agent when role is missing", async () => {
+      mockPrismaService.agent.findMany.mockResolvedValue([
+        {
+          id: "agent-2",
+          name: null,
+          status: AgentStatus.IDLE,
+          role: null,
+          createdAt: new Date("2026-02-28T11:00:00.000Z"),
+        },
+      ]);
+
+      const result = await controller.getAgents();
+
+      expect(result[0]).toMatchObject({
+        id: "agent-2",
+        type: "agent",
+      });
+    });
+  });
+
+  describe("streamEvents", () => {
+    it("sets SSE headers and writes initial data payload", async () => {
+      const onHandlers: Record<string, (() => void) | undefined> = {};
+      const mockRes = {
+        setHeader: vi.fn(),
+        write: vi.fn(),
+        end: vi.fn(),
+        on: vi.fn((event: string, handler: () => void) => {
+          onHandlers[event] = handler;
+          return mockRes;
+        }),
+      } as unknown as Response;
+
+      mockPrismaService.agent.findMany.mockResolvedValue([
+        {
+          id: "agent-1",
+          name: "Worker",
+          status: AgentStatus.WORKING,
+          role: "worker",
+          createdAt: new Date("2026-02-28T12:00:00.000Z"),
+        },
+      ]);
+
+      await controller.streamEvents(mockRes);
+
+      expect(mockRes.setHeader).toHaveBeenCalledWith("Content-Type", "text/event-stream");
+      expect(mockRes.setHeader).toHaveBeenCalledWith("Cache-Control", "no-cache");
+      expect(mockRes.setHeader).toHaveBeenCalledWith("Connection", "keep-alive");
+      expect(mockRes.setHeader).toHaveBeenCalledWith("X-Accel-Buffering", "no");
+
+      expect(mockRes.write).toHaveBeenCalledWith(
+        expect.stringContaining('"type":"agents:updated"')
+      );
+      expect(typeof onHandlers.close).toBe("function");
+    });
+
+    it("polls every 5 seconds and only emits when payload changes", async () => {
+      vi.useFakeTimers();
+
+      const onHandlers: Record<string, (() => void) | undefined> = {};
+      const mockRes = {
+        setHeader: vi.fn(),
+        write: vi.fn(),
+        end: vi.fn(),
+        on: vi.fn((event: string, handler: () => void) => {
+          onHandlers[event] = handler;
+          return mockRes;
+        }),
+      } as unknown as Response;
+
+      const firstPayload = [
+        {
+          id: "agent-1",
+          name: "Worker",
+          status: AgentStatus.WORKING,
+          role: "worker",
+          createdAt: new Date("2026-02-28T12:00:00.000Z"),
+        },
+      ];
+      const secondPayload = [
+        {
+          id: "agent-1",
+          name: "Worker",
+          status: AgentStatus.WAITING,
+          role: "worker",
+          createdAt: new Date("2026-02-28T12:00:00.000Z"),
+        },
+      ];
+
+      mockPrismaService.agent.findMany
+        .mockResolvedValueOnce(firstPayload)
+        .mockResolvedValueOnce(firstPayload)
+        .mockResolvedValueOnce(secondPayload);
+
+      await controller.streamEvents(mockRes);
+
+      // 1 initial data event
+      const getDataEventCalls = () =>
+        mockRes.write.mock.calls.filter(
+          (call) => typeof call[0] === "string" && call[0].startsWith("data: ")
+        );
+
+      expect(getDataEventCalls()).toHaveLength(1);
+
+      // No change after first poll => no new data event
+      await vi.advanceTimersByTimeAsync(5000);
+      expect(getDataEventCalls()).toHaveLength(1);
+
+      // Status changed on second poll => emits new data event
+      await vi.advanceTimersByTimeAsync(5000);
+      expect(getDataEventCalls()).toHaveLength(2);
+
+      onHandlers.close?.();
+      expect(mockRes.end).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("security", () => {
+    it("uses AuthGuard at the controller level", () => {
+      const guards = Reflect.getMetadata("__guards__", OrchestratorController) as unknown[];
+      const guardClasses = guards.map((guard) => guard);
+
+      expect(guardClasses).toContain(AuthGuard);
+    });
+  });
+});

apps/api/src/orchestrator/orchestrator.controller.ts

@@ -0,0 +1,115 @@
+import { Controller, Get, Res, UseGuards } from "@nestjs/common";
+import { AgentStatus } from "@prisma/client";
+import type { Response } from "express";
+import { AuthGuard } from "../auth/guards/auth.guard";
+import { PrismaService } from "../prisma/prisma.service";
+
+const AGENT_POLL_INTERVAL_MS = 5_000;
+const SSE_HEARTBEAT_MS = 15_000;
+
+interface OrchestratorAgentDto {
+  id: string;
+  name: string | null;
+  status: AgentStatus;
+  type: string;
+  createdAt: Date;
+}
+
+@Controller("orchestrator")
+@UseGuards(AuthGuard)
+export class OrchestratorController {
+  constructor(private readonly prisma: PrismaService) {}
+
+  @Get("agents")
+  async getAgents(): Promise<OrchestratorAgentDto[]> {
+    return this.fetchActiveAgents();
+  }
+
+  @Get("events")
+  async streamEvents(@Res() res: Response): Promise<void> {
+    res.setHeader("Content-Type", "text/event-stream");
+    res.setHeader("Cache-Control", "no-cache");
+    res.setHeader("Connection", "keep-alive");
+    res.setHeader("X-Accel-Buffering", "no");
+
+    if (typeof res.flushHeaders === "function") {
+      res.flushHeaders();
+    }
+
+    let isClosed = false;
+    let previousSnapshot = "";
+
+    const emitSnapshotIfChanged = async (): Promise<void> => {
+      if (isClosed) {
+        return;
+      }
+
+      try {
+        const agents = await this.fetchActiveAgents();
+        const snapshot = JSON.stringify(agents);
+
+        if (snapshot !== previousSnapshot) {
+          previousSnapshot = snapshot;
+          res.write(
+            `data: ${JSON.stringify({
+              type: "agents:updated",
+              agents,
+              timestamp: new Date().toISOString(),
+            })}\n\n`
+          );
+        }
+      } catch (error: unknown) {
+        const message = error instanceof Error ? error.message : String(error);
+        res.write(`event: error\n`);
+        res.write(`data: ${JSON.stringify({ error: message })}\n\n`);
+      }
+    };
+
+    await emitSnapshotIfChanged();
+
+    const pollInterval = setInterval(() => {
+      void emitSnapshotIfChanged();
+    }, AGENT_POLL_INTERVAL_MS);
+
+    const heartbeatInterval = setInterval(() => {
+      if (!isClosed) {
+        res.write(": keepalive\n\n");
+      }
+    }, SSE_HEARTBEAT_MS);
+
+    res.on("close", () => {
+      isClosed = true;
+      clearInterval(pollInterval);
+      clearInterval(heartbeatInterval);
+      res.end();
+    });
+  }
+
+  private async fetchActiveAgents(): Promise<OrchestratorAgentDto[]> {
+    const agents = await this.prisma.agent.findMany({
+      where: {
+        status: {
+          not: AgentStatus.TERMINATED,
+        },
+      },
+      orderBy: {
+        createdAt: "desc",
+      },
+      select: {
+        id: true,
+        name: true,
+        status: true,
+        role: true,
+        createdAt: true,
+      },
+    });
+
+    return agents.map((agent) => ({
+      id: agent.id,
+      name: agent.name,
+      status: agent.status,
+      type: agent.role ?? "agent",
+      createdAt: agent.createdAt,
+    }));
+  }
+}

apps/api/src/orchestrator/orchestrator.module.ts

@@ -0,0 +1,10 @@
+import { Module } from "@nestjs/common";
+import { AuthModule } from "../auth/auth.module";
+import { PrismaModule } from "../prisma/prisma.module";
+import { OrchestratorController } from "./orchestrator.controller";
+
+@Module({
+  imports: [AuthModule, PrismaModule],
+  controllers: [OrchestratorController],
+})
+export class OrchestratorModule {}

apps/api/src/projects/dto/create-project.dto.ts

@@ -8,6 +8,7 @@ import {
   MinLength,
   MaxLength,
   Matches,
+  IsUUID,
 } from "class-validator";
 
 /**
@@ -43,6 +44,10 @@ export class CreateProjectDto {
   })
   color?: string;
 
+  @IsOptional()
+  @IsUUID("4", { message: "domainId must be a valid UUID" })
+  domainId?: string;
+
   @IsOptional()
   @IsObject({ message: "metadata must be an object" })
   metadata?: Record<string, unknown>;

apps/api/src/projects/dto/update-project.dto.ts

@@ -8,6 +8,7 @@ import {
   MinLength,
   MaxLength,
   Matches,
+  IsUUID,
 } from "class-validator";
 
 /**
@@ -45,6 +46,10 @@ export class UpdateProjectDto {
   })
   color?: string | null;
 
+  @IsOptional()
+  @IsUUID("4", { message: "domainId must be a valid UUID" })
+  domainId?: string | null;
+
   @IsOptional()
   @IsObject({ message: "metadata must be an object" })
   metadata?: Record<string, unknown>;

apps/api/src/projects/projects.service.ts

@@ -47,6 +47,9 @@ export class ProjectsService {
     createProjectDto: CreateProjectDto
   ): Promise<ProjectWithRelations> {
     const data: Prisma.ProjectCreateInput = {
+      ...(createProjectDto.domainId
+        ? { domain: { connect: { id: createProjectDto.domainId } } }
+        : {}),
       name: createProjectDto.name,
       description: createProjectDto.description ?? null,
       color: createProjectDto.color ?? null,
@@ -221,6 +224,18 @@ export class ProjectsService {
     if (updateProjectDto.startDate !== undefined) updateData.startDate = updateProjectDto.startDate;
     if (updateProjectDto.endDate !== undefined) updateData.endDate = updateProjectDto.endDate;
     if (updateProjectDto.color !== undefined) updateData.color = updateProjectDto.color;
+    if (updateProjectDto.domainId !== undefined)
+      updateData.domain = updateProjectDto.domainId
+        ? { connect: { id: updateProjectDto.domainId } }
+        : { disconnect: true };
+    if (updateProjectDto.domainId !== undefined)
+      updateData.domain = updateProjectDto.domainId
+        ? {
+            connect: {
+              id: updateProjectDto.domainId,
+            },
+          }
+        : { disconnect: true };
     if (updateProjectDto.metadata !== undefined) {
       updateData.metadata = updateProjectDto.metadata as unknown as Prisma.InputJsonValue;
     }

apps/api/src/speech/speech.gateway.ts

@@ -66,7 +66,9 @@ interface StartTranscriptionPayload {
 @WSGateway({
   namespace: "/speech",
   cors: {
-    origin: process.env.WEB_URL ?? "http://localhost:3000",
+    origin: (process.env.TRUSTED_ORIGINS ?? process.env.WEB_URL ?? "http://localhost:3000")
+      .split(",")
+      .map((s) => s.trim()),
     credentials: true,
   },
 })

apps/api/src/terminal/terminal.gateway.ts

@@ -63,7 +63,9 @@ interface AuthenticatedSocket extends Socket {
 @WSGateway({
   namespace: "/terminal",
   cors: {
-    origin: process.env.WEB_URL ?? "http://localhost:3000",
+    origin: (process.env.TRUSTED_ORIGINS ?? process.env.WEB_URL ?? "http://localhost:3000")
+      .split(",")
+      .map((s) => s.trim()),
     credentials: true,
   },
 })

apps/api/src/widgets/widgets.controller.throttler.spec.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { WidgetsController } from "./widgets.controller";
+
+const THROTTLER_SKIP_DEFAULT_KEY = "THROTTLER:SKIPdefault";
+
+describe("WidgetsController throttler metadata", () => {
+  it("marks widget data polling endpoints to skip throttling", () => {
+    const pollingHandlers = [
+      WidgetsController.prototype.getStatCardData,
+      WidgetsController.prototype.getChartData,
+      WidgetsController.prototype.getListData,
+      WidgetsController.prototype.getCalendarPreviewData,
+      WidgetsController.prototype.getActiveProjectsData,
+      WidgetsController.prototype.getAgentChainsData,
+    ];
+
+    for (const handler of pollingHandlers) {
+      expect(Reflect.getMetadata(THROTTLER_SKIP_DEFAULT_KEY, handler)).toBe(true);
+    }
+  });
+
+  it("does not skip throttling for non-polling widget routes", () => {
+    expect(
+      Reflect.getMetadata(THROTTLER_SKIP_DEFAULT_KEY, WidgetsController.prototype.findAll)
+    ).toBe(undefined);
+
+    expect(
+      Reflect.getMetadata(THROTTLER_SKIP_DEFAULT_KEY, WidgetsController.prototype.findByName)
+    ).toBe(undefined);
+  });
+});

apps/api/src/widgets/widgets.controller.ts

@@ -1,9 +1,10 @@
 import { Controller, Get, Post, Body, Param, UseGuards, Request } from "@nestjs/common";
+import { SkipThrottle as SkipThrottler } from "@nestjs/throttler";
 import { WidgetsService } from "./widgets.service";
 import { WidgetDataService } from "./widget-data.service";
 import { AuthGuard } from "../auth/guards/auth.guard";
 import { WorkspaceGuard } from "../common/guards/workspace.guard";
-import type { StatCardQueryDto, ChartQueryDto, ListQueryDto, CalendarPreviewQueryDto } from "./dto";
+import { StatCardQueryDto, ChartQueryDto, ListQueryDto, CalendarPreviewQueryDto } from "./dto";
 import type { RequestWithWorkspace } from "../common/types/user.types";
 
 /**
@@ -43,6 +44,7 @@ export class WidgetsController {
    * Get stat card widget data
    */
   @Post("data/stat-card")
+  @SkipThrottler()
   @UseGuards(WorkspaceGuard)
   async getStatCardData(@Request() req: RequestWithWorkspace, @Body() query: StatCardQueryDto) {
     return this.widgetDataService.getStatCardData(req.workspace.id, query);
@@ -53,6 +55,7 @@ export class WidgetsController {
    * Get chart widget data
    */
   @Post("data/chart")
+  @SkipThrottler()
   @UseGuards(WorkspaceGuard)
   async getChartData(@Request() req: RequestWithWorkspace, @Body() query: ChartQueryDto) {
     return this.widgetDataService.getChartData(req.workspace.id, query);
@@ -63,6 +66,7 @@ export class WidgetsController {
    * Get list widget data
    */
   @Post("data/list")
+  @SkipThrottler()
   @UseGuards(WorkspaceGuard)
   async getListData(@Request() req: RequestWithWorkspace, @Body() query: ListQueryDto) {
     return this.widgetDataService.getListData(req.workspace.id, query);
@@ -73,6 +77,7 @@ export class WidgetsController {
    * Get calendar preview widget data
    */
   @Post("data/calendar-preview")
+  @SkipThrottler()
   @UseGuards(WorkspaceGuard)
   async getCalendarPreviewData(
     @Request() req: RequestWithWorkspace,
@@ -86,6 +91,7 @@ export class WidgetsController {
    * Get active projects widget data
    */
   @Post("data/active-projects")
+  @SkipThrottler()
   @UseGuards(WorkspaceGuard)
   async getActiveProjectsData(@Request() req: RequestWithWorkspace) {
     return this.widgetDataService.getActiveProjectsData(req.workspace.id);
@@ -96,6 +102,7 @@ export class WidgetsController {
    * Get agent chains widget data (active agent sessions)
    */
   @Post("data/agent-chains")
+  @SkipThrottler()
   @UseGuards(WorkspaceGuard)
   async getAgentChainsData(@Request() req: RequestWithWorkspace) {
     return this.widgetDataService.getAgentChainsData(req.workspace.id);

apps/api/src/workspaces/workspaces.controller.ts

@@ -6,7 +6,7 @@ import { WorkspaceGuard, PermissionGuard } from "../common/guards";
 import { Permission, RequirePermission } from "../common/decorators";
 import type { WorkspaceMember } from "@prisma/client";
 import type { AuthenticatedUser } from "../common/types/user.types";
-import type { AddMemberDto, UpdateMemberRoleDto, WorkspaceResponseDto } from "./dto";
+import { AddMemberDto, UpdateMemberRoleDto, WorkspaceResponseDto } from "./dto";
 
 /**
  * User-scoped workspace operations.
@@ -29,6 +29,25 @@ export class WorkspacesController {
     return this.workspacesService.getUserWorkspaces(user.id);
   }
 
+  /**
+   * GET /api/workspaces/:workspaceId/stats
+   * Returns member, project, and domain counts for a workspace.
+   */
+  @Get(":workspaceId/stats")
+  async getStats(@Param("workspaceId") workspaceId: string) {
+    return this.workspacesService.getStats(workspaceId);
+  }
+
+  /**
+   * GET /api/workspaces/:workspaceId/members
+   * Returns the list of members for a workspace.
+   */
+  @Get(":workspaceId/members")
+  @UseGuards(WorkspaceGuard)
+  async getMembers(@Param("workspaceId") workspaceId: string) {
+    return this.workspacesService.getMembers(workspaceId);
+  }
+
   /**
    * POST /api/workspaces/:workspaceId/members
    * Add a member to a workspace with the specified role.

apps/api/src/workspaces/workspaces.service.ts

@@ -321,6 +321,18 @@ export class WorkspacesService {
     });
   }
 
+  /**
+   * Get members of a workspace.
+   */
+  async getMembers(workspaceId: string) {
+    return this.prisma.workspaceMember.findMany({
+      where: { workspaceId },
+      include: {
+        user: { select: { id: true, name: true, email: true, createdAt: true } },
+      },
+      orderBy: { joinedAt: "asc" },
+    });
+  }
   private assertCanAssignRole(
     actorRole: WorkspaceMemberRole,
     requestedRole: WorkspaceMemberRole
@@ -342,4 +354,15 @@ export class WorkspacesService {
   private isUniqueConstraintError(error: unknown): error is Prisma.PrismaClientKnownRequestError {
     return error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2002";
   }
+
+  async getStats(
+    workspaceId: string
+  ): Promise<{ memberCount: number; projectCount: number; domainCount: number }> {
+    const [memberCount, projectCount, domainCount] = await Promise.all([
+      this.prisma.workspaceMember.count({ where: { workspaceId } }),
+      this.prisma.project.count({ where: { workspaceId } }),
+      this.prisma.domain.count({ where: { workspaceId } }),
+    ]);
+    return { memberCount, projectCount, domainCount };
+  }
 }

apps/orchestrator/Dockerfile

@@ -1,6 +1,6 @@
 # Base image for all stages
 # Uses Debian slim (glibc) instead of Alpine (musl) for native addon compatibility.
-FROM node:24-slim AS base
+FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS base
 
 # Install pnpm globally
 RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
@@ -22,6 +22,9 @@ COPY packages/shared/package.json ./packages/shared/
 COPY packages/config/package.json ./packages/config/
 COPY apps/orchestrator/package.json ./apps/orchestrator/
 
+# Copy npm configuration for native binary architecture hints
+COPY .npmrc ./
+
 # Install ALL dependencies (not just production)
 # No cache mount — Kaniko builds are ephemeral in CI
 RUN pnpm install --frozen-lockfile
@@ -54,7 +57,7 @@ RUN find ./apps/orchestrator/dist \( -name '*.spec.js' -o -name '*.spec.js.map'
 # ======================
 # Production stage
 # ======================
-FROM node:24-slim AS production
+FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS production
 
 # Add metadata labels
 LABEL maintainer="mosaic-team@mosaicstack.dev"
@@ -65,13 +68,12 @@ LABEL org.opencontainers.image.vendor="Mosaic Stack"
 LABEL org.opencontainers.image.title="Mosaic Orchestrator"
 LABEL org.opencontainers.image.description="Agent orchestration service for Mosaic Stack"
 
-# 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
+# dumb-init, ca-certificates pre-installed in base image
 
 # Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
+# - Remove npm/npx to reduce image size (not used in production)
+# - Create non-root user
 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 nestjs
 
 WORKDIR /app

apps/web/Dockerfile

@@ -1,7 +1,7 @@
 # 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.
-FROM node:24-slim AS base
+FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS base
 
 # Install pnpm globally
 RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
@@ -24,6 +24,9 @@ COPY packages/ui/package.json ./packages/ui/
 COPY packages/config/package.json ./packages/config/
 COPY apps/web/package.json ./apps/web/
 
+# Copy npm configuration for native binary architecture hints
+COPY .npmrc ./
+
 # Install dependencies (no cache mount — Kaniko builds are ephemeral in CI)
 RUN pnpm install --frozen-lockfile
 
@@ -38,6 +41,9 @@ COPY packages/ui/package.json ./packages/ui/
 COPY packages/config/package.json ./packages/config/
 COPY apps/web/package.json ./apps/web/
 
+# Copy npm configuration for native binary architecture hints
+COPY .npmrc ./
+
 # Install production dependencies only
 RUN pnpm install --frozen-lockfile --prod
 
@@ -87,15 +93,14 @@ RUN mkdir -p ./apps/web/public
 # ======================
 # Production stage
 # ======================
-FROM node:24-slim AS production
+FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS production
 
-# 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
+# dumb-init, ca-certificates pre-installed in base image
 
 # Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
+# - Remove npm/npx to reduce image size (not used in production)
+# - Create non-root user
 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

apps/web/src/app/(authenticated)/files/page.tsx

@@ -13,7 +13,7 @@ import {
   ChevronUp,
   ChevronDown,
 } from "lucide-react";
-import type { KnowledgeEntryWithTags } from "@mosaic/shared";
+import type { KnowledgeEntryWithTags, KnowledgeTag } from "@mosaic/shared";
 import { EntryStatus, Visibility } from "@mosaic/shared";
 
 import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
@@ -25,7 +25,7 @@ import {
   DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
-import { fetchEntries, createEntry, deleteEntry } from "@/lib/api/knowledge";
+import { fetchEntries, createEntry, deleteEntry, fetchTags } from "@/lib/api/knowledge";
 import type { EntriesResponse, CreateEntryData, EntryFilters } from "@/lib/api/knowledge";
 
 /* ---------------------------------------------------------------------------
@@ -421,6 +421,26 @@ function CreateEntryDialog({
   const [visibility, setVisibility] = useState<Visibility>(Visibility.PRIVATE);
   const [formError, setFormError] = useState<string | null>(null);
 
+  // Tag state
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [tagInput, setTagInput] = useState("");
+  const [availableTags, setAvailableTags] = useState<KnowledgeTag[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const tagInputRef = useRef<HTMLInputElement>(null);
+
+  // Load available tags when dialog opens
+  useEffect(() => {
+    if (open) {
+      fetchTags()
+        .then((tags) => {
+          setAvailableTags(tags);
+        })
+        .catch((err: unknown) => {
+          console.error("Failed to load tags:", err);
+        });
+    }
+  }, [open]);
+
   function resetForm(): void {
     setTitle("");
     setContent("");
@@ -428,6 +448,9 @@ function CreateEntryDialog({
     setStatus(EntryStatus.DRAFT);
     setVisibility(Visibility.PRIVATE);
     setFormError(null);
+    setSelectedTags([]);
+    setTagInput("");
+    setShowSuggestions(false);
   }
 
   async function handleSubmit(e: SyntheticEvent): Promise<void> {
@@ -452,6 +475,7 @@ function CreateEntryDialog({
         content: trimmedContent,
         status,
         visibility,
+        tags: selectedTags,
       };
       const trimmedSummary = summary.trim();
       if (trimmedSummary) {
@@ -610,6 +634,212 @@ function CreateEntryDialog({
               />
             </div>
 
+            {/* Tags */}
+            <div style={{ marginBottom: 16 }}>
+              <label
+                htmlFor="entry-tags"
+                style={{
+                  display: "block",
+                  marginBottom: 6,
+                  fontSize: "0.85rem",
+                  fontWeight: 500,
+                  color: "var(--text-2)",
+                }}
+              >
+                Tags
+              </label>
+              <div
+                style={{
+                  width: "100%",
+                  minHeight: 38,
+                  padding: "6px 8px",
+                  background: "var(--bg)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "var(--r)",
+                  boxSizing: "border-box",
+                  display: "flex",
+                  flexWrap: "wrap",
+                  gap: 4,
+                  alignItems: "center",
+                  position: "relative",
+                }}
+              >
+                {/* Selected tag chips */}
+                {selectedTags.map((tag) => (
+                  <span
+                    key={tag}
+                    style={{
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 4,
+                      padding: "2px 8px",
+                      background: "var(--surface-2)",
+                      border: "1px solid var(--border)",
+                      borderRadius: "var(--r-sm)",
+                      fontSize: "0.75rem",
+                      color: "var(--text)",
+                    }}
+                  >
+                    {tag}
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setSelectedTags((prev) => prev.filter((t) => t !== tag));
+                      }}
+                      style={{
+                        background: "transparent",
+                        border: "none",
+                        padding: 0,
+                        cursor: "pointer",
+                        color: "var(--muted)",
+                        display: "flex",
+                        alignItems: "center",
+                        lineHeight: 1,
+                      }}
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+                {/* Tag text input */}
+                <input
+                  ref={tagInputRef}
+                  id="entry-tags"
+                  type="text"
+                  value={tagInput}
+                  onChange={(e) => {
+                    setTagInput(e.target.value);
+                    setShowSuggestions(e.target.value.length > 0);
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === ",") {
+                      e.preventDefault();
+                      const trimmed = tagInput.trim();
+                      if (trimmed && !selectedTags.includes(trimmed)) {
+                        setSelectedTags((prev) => [...prev, trimmed]);
+                        setTagInput("");
+                      }
+                    }
+                    if (e.key === "Backspace" && tagInput === "" && selectedTags.length > 0) {
+                      setSelectedTags((prev) => prev.slice(0, -1));
+                    }
+                  }}
+                  onBlur={() => {
+                    // Delay to allow click on suggestion
+                    setTimeout(() => {
+                      setShowSuggestions(false);
+                    }, 150);
+                  }}
+                  onFocus={() => {
+                    if (tagInput.length > 0) setShowSuggestions(true);
+                  }}
+                  placeholder={selectedTags.length === 0 ? "Add tags..." : ""}
+                  style={{
+                    flex: 1,
+                    minWidth: 80,
+                    border: "none",
+                    background: "transparent",
+                    color: "var(--text)",
+                    fontSize: "0.85rem",
+                    outline: "none",
+                    padding: "2px 0",
+                  }}
+                />
+                {/* Autocomplete suggestions */}
+                {showSuggestions && (
+                  <div
+                    style={{
+                      position: "absolute",
+                      top: "100%",
+                      left: 0,
+                      right: 0,
+                      marginTop: 4,
+                      background: "var(--surface)",
+                      border: "1px solid var(--border)",
+                      borderRadius: "var(--r)",
+                      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                      maxHeight: 150,
+                      overflowY: "auto",
+                      zIndex: 10,
+                    }}
+                  >
+                    {availableTags
+                      .filter(
+                        (t) =>
+                          t.name.toLowerCase().includes(tagInput.toLowerCase()) &&
+                          !selectedTags.includes(t.name)
+                      )
+                      .slice(0, 5)
+                      .map((tag) => (
+                        <button
+                          key={tag.id}
+                          type="button"
+                          onClick={() => {
+                            if (!selectedTags.includes(tag.name)) {
+                              setSelectedTags((prev) => [...prev, tag.name]);
+                            }
+                            setTagInput("");
+                            setShowSuggestions(false);
+                            tagInputRef.current?.focus();
+                          }}
+                          style={{
+                            width: "100%",
+                            padding: "8px 12px",
+                            background: "transparent",
+                            border: "none",
+                            textAlign: "left",
+                            cursor: "pointer",
+                            color: "var(--text)",
+                            fontSize: "0.85rem",
+                          }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.background = "var(--surface-2)";
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.background = "transparent";
+                          }}
+                        >
+                          {tag.name}
+                        </button>
+                      ))}
+                    {availableTags.filter(
+                      (t) =>
+                        t.name.toLowerCase().includes(tagInput.toLowerCase()) &&
+                        !selectedTags.includes(t.name)
+                    ).length === 0 &&
+                      tagInput.trim() &&
+                      !selectedTags.includes(tagInput.trim()) && (
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const trimmed = tagInput.trim();
+                            if (trimmed && !selectedTags.includes(trimmed)) {
+                              setSelectedTags((prev) => [...prev, trimmed]);
+                            }
+                            setTagInput("");
+                            setShowSuggestions(false);
+                            tagInputRef.current?.focus();
+                          }}
+                          style={{
+                            width: "100%",
+                            padding: "8px 12px",
+                            background: "transparent",
+                            border: "none",
+                            textAlign: "left",
+                            cursor: "pointer",
+                            color: "var(--muted)",
+                            fontSize: "0.85rem",
+                            fontStyle: "italic",
+                          }}
+                        >
+                          Create "{tagInput.trim()}"
+                        </button>
+                      )}
+                  </div>
+                )}
+              </div>
+            </div>
+
             {/* Status + Visibility row */}
             <div style={{ display: "flex", gap: 16, marginBottom: 16 }}>
               <div style={{ flex: 1 }}>

apps/web/src/app/(authenticated)/kanban/page.test.tsx

@@ -0,0 +1,188 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { Task } from "@mosaic/shared";
+import { TaskPriority, TaskStatus } from "@mosaic/shared";
+import KanbanPage from "./page";
+
+const mockReplace = vi.fn();
+let mockSearchParams = new URLSearchParams();
+
+vi.mock("next/navigation", () => ({
+  useRouter: (): { replace: typeof mockReplace } => ({ replace: mockReplace }),
+  useSearchParams: (): URLSearchParams => mockSearchParams,
+}));
+
+vi.mock("@hello-pangea/dnd", () => ({
+  DragDropContext: ({ children }: { children: React.ReactNode }): React.JSX.Element => (
+    <div data-testid="mock-dnd-context">{children}</div>
+  ),
+  Droppable: ({
+    children,
+    droppableId,
+  }: {
+    children: (provided: {
+      innerRef: (el: HTMLElement | null) => void;
+      droppableProps: Record<string, never>;
+      placeholder: React.ReactNode;
+    }) => React.ReactNode;
+    droppableId: string;
+  }): React.JSX.Element => (
+    <div data-testid={`mock-droppable-${droppableId}`}>
+      {children({
+        innerRef: () => {
+          /* noop */
+        },
+        droppableProps: {},
+        placeholder: null,
+      })}
+    </div>
+  ),
+  Draggable: ({
+    children,
+    draggableId,
+  }: {
+    children: (
+      provided: {
+        innerRef: (el: HTMLElement | null) => void;
+        draggableProps: { style: Record<string, string> };
+        dragHandleProps: Record<string, string>;
+      },
+      snapshot: { isDragging: boolean }
+    ) => React.ReactNode;
+    draggableId: string;
+    index: number;
+  }): React.JSX.Element => (
+    <div data-testid={`mock-draggable-${draggableId}`}>
+      {children(
+        {
+          innerRef: () => {
+            /* noop */
+          },
+          draggableProps: { style: {} },
+          dragHandleProps: {},
+        },
+        { isDragging: false }
+      )}
+    </div>
+  ),
+}));
+
+vi.mock("@/components/ui/MosaicSpinner", () => ({
+  MosaicSpinner: ({ label }: { label?: string }): React.JSX.Element => (
+    <div data-testid="mosaic-spinner">{label ?? "Loading..."}</div>
+  ),
+}));
+
+const mockUseWorkspaceId = vi.fn<() => string | null>();
+vi.mock("@/lib/hooks", () => ({
+  useWorkspaceId: (): string | null => mockUseWorkspaceId(),
+}));
+
+const mockFetchTasks = vi.fn<() => Promise<Task[]>>();
+const mockUpdateTask = vi.fn<() => Promise<unknown>>();
+const mockCreateTask = vi.fn<() => Promise<Task>>();
+vi.mock("@/lib/api/tasks", () => ({
+  fetchTasks: (...args: unknown[]): Promise<Task[]> => mockFetchTasks(...(args as [])),
+  updateTask: (...args: unknown[]): Promise<unknown> => mockUpdateTask(...(args as [])),
+  createTask: (...args: unknown[]): Promise<Task> => mockCreateTask(...(args as [])),
+}));
+
+const mockFetchProjects = vi.fn<() => Promise<unknown[]>>();
+vi.mock("@/lib/api/projects", () => ({
+  fetchProjects: (...args: unknown[]): Promise<unknown[]> => mockFetchProjects(...(args as [])),
+}));
+
+const createdTask: Task = {
+  id: "task-new-1",
+  title: "Ship Kanban add task flow",
+  description: null,
+  status: TaskStatus.NOT_STARTED,
+  priority: TaskPriority.MEDIUM,
+  dueDate: null,
+  creatorId: "user-1",
+  assigneeId: null,
+  workspaceId: "ws-1",
+  projectId: "project-42",
+  parentId: null,
+  sortOrder: 0,
+  metadata: {},
+  completedAt: null,
+  createdAt: new Date("2026-03-01"),
+  updatedAt: new Date("2026-03-01"),
+};
+
+describe("KanbanPage add task flow", (): void => {
+  beforeEach((): void => {
+    vi.clearAllMocks();
+    mockSearchParams = new URLSearchParams("project=project-42");
+    mockUseWorkspaceId.mockReturnValue("ws-1");
+    mockFetchTasks.mockResolvedValue([]);
+    mockFetchProjects.mockResolvedValue([]);
+    mockCreateTask.mockResolvedValue(createdTask);
+  });
+
+  it("opens add-task form in a column and creates a task via API", async (): Promise<void> => {
+    const user = userEvent.setup();
+
+    render(<KanbanPage />);
+
+    await waitFor((): void => {
+      expect(screen.getByText("Kanban Board")).toBeInTheDocument();
+    });
+
+    // Click the "+ Add task" button in the To Do column
+    const addTaskButtons = screen.getAllByRole("button", { name: /\+ Add task/i });
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    await user.click(addTaskButtons[0]!); // First column is "To Do"
+
+    // Type in the title input
+    const titleInput = screen.getByPlaceholderText("Task title...");
+    await user.type(titleInput, createdTask.title);
+
+    // Click the Add button
+    await user.click(screen.getByRole("button", { name: /✓ Add/i }));
+
+    await waitFor((): void => {
+      expect(mockCreateTask).toHaveBeenCalledWith(
+        expect.objectContaining({
+          title: createdTask.title,
+          status: TaskStatus.NOT_STARTED,
+          projectId: "project-42",
+        }),
+        "ws-1"
+      );
+    });
+  });
+
+  it("cancels add-task form when pressing Escape", async (): Promise<void> => {
+    const user = userEvent.setup();
+
+    render(<KanbanPage />);
+
+    await waitFor((): void => {
+      expect(screen.getByText("Kanban Board")).toBeInTheDocument();
+    });
+
+    // Click the "+ Add task" button
+    const addTaskButtons = screen.getAllByRole("button", { name: /\+ Add task/i });
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    await user.click(addTaskButtons[0]!);
+
+    // Type in the title input
+    const titleInput = screen.getByPlaceholderText("Task title...");
+    await user.type(titleInput, "Test task");
+
+    // Press Escape to cancel
+    await user.keyboard("{Escape}");
+
+    // Form should be closed, back to "+ Add task" button
+    await waitFor((): void => {
+      const buttons = screen.getAllByRole("button", { name: /\+ Add task/i });
+      expect(buttons.length).toBe(5); // One per column
+    });
+
+    // Should not have called createTask
+    expect(mockCreateTask).not.toHaveBeenCalled();
+  });
+});

apps/web/src/app/(authenticated)/kanban/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback, useMemo } from "react";
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import type { ReactElement } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
@@ -12,7 +12,7 @@ import type {
 } from "@hello-pangea/dnd";
 
 import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
-import { fetchTasks, updateTask, type TaskFilters } from "@/lib/api/tasks";
+import { fetchTasks, updateTask, createTask, type TaskFilters } from "@/lib/api/tasks";
 import { fetchProjects, type Project } from "@/lib/api/projects";
 import { useWorkspaceId } from "@/lib/hooks";
 import type { Task } from "@mosaic/shared";
@@ -184,9 +184,48 @@ function TaskCard({ task, provided, snapshot, columnAccent }: TaskCardProps): Re
 interface KanbanColumnProps {
   config: ColumnConfig;
   tasks: Task[];
+  onAddTask: (status: TaskStatus, title: string, projectId?: string) => Promise<void>;
+  projectId?: string;
 }
 
-function KanbanColumn({ config, tasks }: KanbanColumnProps): ReactElement {
+function KanbanColumn({ config, tasks, onAddTask, projectId }: KanbanColumnProps): ReactElement {
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Focus input when form is shown
+  useEffect(() => {
+    if (showAddForm && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [showAddForm]);
+
+  const handleSubmit = async (e: React.SyntheticEvent): Promise<void> => {
+    e.preventDefault();
+    if (!inputValue.trim() || isSubmitting) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      await onAddTask(config.status, inputValue.trim(), projectId);
+      setInputValue("");
+      setShowAddForm(false);
+    } catch (err) {
+      console.error("[KanbanColumn] Failed to add task:", err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === "Escape") {
+      setShowAddForm(false);
+      setInputValue("");
+    }
+  };
+
   return (
     <div
       style={{
@@ -268,6 +307,128 @@ function KanbanColumn({ config, tasks }: KanbanColumnProps): ReactElement {
           </div>
         )}
       </Droppable>
+
+      {/* Add Task Form */}
+      {!showAddForm ? (
+        <button
+          type="button"
+          onClick={() => {
+            setShowAddForm(true);
+          }}
+          style={{
+            padding: "10px 16px",
+            border: "none",
+            background: "transparent",
+            color: "var(--muted)",
+            fontSize: "0.8rem",
+            cursor: "pointer",
+            textAlign: "left",
+            transition: "color 0.15s",
+            width: "100%",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = "var(--text)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = "var(--muted)";
+          }}
+        >
+          + Add task
+        </button>
+      ) : (
+        <form
+          onSubmit={handleSubmit}
+          style={{ padding: "8px 12px 12px", borderTop: "1px solid var(--border)" }}
+        >
+          <input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={(e) => {
+              setInputValue(e.target.value);
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder="Task title..."
+            disabled={isSubmitting}
+            style={{
+              width: "100%",
+              padding: "8px 10px",
+              borderRadius: "var(--r)",
+              border: `1px solid ${inputValue ? "var(--primary)" : "var(--border)"}`,
+              background: "var(--surface)",
+              color: "var(--text)",
+              fontSize: "0.85rem",
+              outline: "none",
+              opacity: isSubmitting ? 0.6 : 1,
+            }}
+            autoFocus
+          />
+          <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
+            <button
+              type="submit"
+              disabled={isSubmitting || !inputValue.trim()}
+              style={{
+                padding: "6px 12px",
+                borderRadius: "var(--r)",
+                border: "1px solid var(--primary)",
+                background: "var(--primary)",
+                color: "#fff",
+                fontSize: "0.8rem",
+                fontWeight: 500,
+                cursor: isSubmitting || !inputValue.trim() ? "not-allowed" : "pointer",
+                opacity: isSubmitting || !inputValue.trim() ? 0.5 : 1,
+              }}
+            >
+              ✓ Add
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setShowAddForm(false);
+                setInputValue("");
+              }}
+              disabled={isSubmitting}
+              style={{
+                padding: "6px 12px",
+                borderRadius: "var(--r)",
+                border: "1px solid var(--border)",
+                background: "transparent",
+                color: "var(--muted)",
+                fontSize: "0.8rem",
+                cursor: isSubmitting ? "not-allowed" : "pointer",
+                opacity: isSubmitting ? 0.5 : 1,
+              }}
+            >
+              Cancel
+            </button>
+          </div>
+          <div style={{ marginTop: 6, fontSize: "0.75rem", color: "var(--muted)" }}>
+            Press{" "}
+            <kbd
+              style={{
+                padding: "2px 4px",
+                background: "var(--bg-mid)",
+                borderRadius: "2px",
+                fontFamily: "var(--mono)",
+              }}
+            >
+              Enter
+            </kbd>{" "}
+            to save,{" "}
+            <kbd
+              style={{
+                padding: "2px 4px",
+                background: "var(--bg-mid)",
+                borderRadius: "2px",
+                fontFamily: "var(--mono)",
+              }}
+            >
+              Escape
+            </kbd>{" "}
+            to cancel
+          </div>
+        </form>
+      )}
     </div>
   );
 }
@@ -621,6 +782,31 @@ export default function KanbanPage(): ReactElement {
     void loadTasks(workspaceId);
   }
 
+  /* --- add task handler --- */
+
+  const handleAddTask = useCallback(
+    async (status: TaskStatus, title: string, projectId?: string) => {
+      try {
+        const wsId = workspaceId ?? undefined;
+        const taskData: { title: string; status: TaskStatus; projectId?: string } = {
+          title,
+          status,
+        };
+        if (projectId) {
+          taskData.projectId = projectId;
+        }
+        const newTask = await createTask(taskData, wsId);
+        // Optimistically add to local state
+        setTasks((prev) => [...prev, newTask]);
+      } catch (err: unknown) {
+        console.error("[Kanban] Failed to create task:", err);
+        // Re-fetch on error to get consistent state
+        void loadTasks(workspaceId);
+      }
+    },
+    [workspaceId, loadTasks]
+  );
+
   /* --- render --- */
 
   return (
@@ -727,23 +913,8 @@ export default function KanbanPage(): ReactElement {
             Clear filters
           </button>
         </div>
-      ) : tasks.length === 0 ? (
-        /* Empty state */
-        <div
-          style={{
-            background: "var(--surface)",
-            border: "1px solid var(--border)",
-            borderRadius: "var(--r-lg)",
-            padding: 48,
-            textAlign: "center",
-          }}
-        >
-          <p style={{ color: "var(--muted)", margin: 0, fontSize: "0.9rem" }}>
-            No tasks yet. Create some tasks to see them here.
-          </p>
-        </div>
       ) : (
-        /* Board */
+        /* Board (always render columns to allow adding first task) */
         <DragDropContext onDragEnd={handleDragEnd}>
           <div
             style={{
@@ -755,7 +926,13 @@ export default function KanbanPage(): ReactElement {
             }}
           >
             {COLUMNS.map((col) => (
-              <KanbanColumn key={col.status} config={col} tasks={grouped[col.status]} />
+              <KanbanColumn
+                key={col.status}
+                config={col}
+                tasks={grouped[col.status]}
+                onAddTask={handleAddTask}
+                projectId={filterProject}
+              />
             ))}
           </div>
         </DragDropContext>

apps/web/src/app/(authenticated)/logs/page.tsx

@@ -4,21 +4,39 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import type { ReactElement } from "react";
 
 import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
-import { fetchRunnerJobs, fetchJobSteps, RunnerJobStatus } from "@/lib/api/runner-jobs";
-import type { RunnerJob, JobStep } from "@/lib/api/runner-jobs";
+import {
+  fetchActivityLogs,
+  ActivityAction,
+  EntityType,
+  type ActivityLog,
+  type ActivityLogFilters,
+} from "@/lib/api/activity";
 import { useWorkspaceId } from "@/lib/hooks";
 
 // ─── Constants ────────────────────────────────────────────────────────
 
-type StatusFilter = "all" | "running" | "completed" | "failed" | "queued";
+type ActionFilter = "all" | ActivityAction;
+type EntityFilter = "all" | EntityType;
 type DateRange = "24h" | "7d" | "30d" | "all";
 
-const STATUS_OPTIONS: { value: StatusFilter; label: string }[] = [
-  { value: "all", label: "All statuses" },
-  { value: "running", label: "Running" },
-  { value: "completed", label: "Completed" },
-  { value: "failed", label: "Failed" },
-  { value: "queued", label: "Queued" },
+const ACTION_OPTIONS: { value: ActionFilter; label: string }[] = [
+  { value: "all", label: "All actions" },
+  { value: ActivityAction.CREATED, label: "Created" },
+  { value: ActivityAction.UPDATED, label: "Updated" },
+  { value: ActivityAction.DELETED, label: "Deleted" },
+  { value: ActivityAction.COMPLETED, label: "Completed" },
+  { value: ActivityAction.ASSIGNED, label: "Assigned" },
+];
+
+const ENTITY_OPTIONS: { value: EntityFilter; label: string }[] = [
+  { value: "all", label: "All entities" },
+  { value: EntityType.TASK, label: "Tasks" },
+  { value: EntityType.EVENT, label: "Events" },
+  { value: EntityType.PROJECT, label: "Projects" },
+  { value: EntityType.WORKSPACE, label: "Workspaces" },
+  { value: EntityType.USER, label: "Users" },
+  { value: EntityType.DOMAIN, label: "Domains" },
+  { value: EntityType.IDEA, label: "Ideas" },
 ];
 
 const DATE_RANGES: { value: DateRange; label: string }[] = [
@@ -28,37 +46,37 @@ const DATE_RANGES: { value: DateRange; label: string }[] = [
   { value: "all", label: "All" },
 ];
 
-const STATUS_FILTER_TO_ENUM: Record<StatusFilter, RunnerJobStatus[] | undefined> = {
-  all: undefined,
-  running: [RunnerJobStatus.RUNNING],
-  completed: [RunnerJobStatus.COMPLETED],
-  failed: [RunnerJobStatus.FAILED],
-  queued: [RunnerJobStatus.QUEUED, RunnerJobStatus.PENDING],
-};
-
 const POLL_INTERVAL_MS = 5_000;
 
 // ─── Helpers ──────────────────────────────────────────────────────────
 
-function getStatusColor(status: string): string {
-  switch (status) {
-    case "RUNNING":
-      return "var(--ms-amber-400)";
-    case "COMPLETED":
-      return "var(--ms-teal-400)";
-    case "FAILED":
-    case "CANCELLED":
-      return "var(--danger)";
-    case "QUEUED":
-    case "PENDING":
-      return "var(--ms-blue-400)";
-    default:
-      return "var(--muted)";
-  }
+const ACTION_COLORS: Record<string, string> = {
+  [ActivityAction.CREATED]: "var(--ms-teal-400)",
+  [ActivityAction.UPDATED]: "var(--ms-blue-400)",
+  [ActivityAction.DELETED]: "var(--danger)",
+  [ActivityAction.COMPLETED]: "var(--ms-emerald-400)",
+  [ActivityAction.ASSIGNED]: "var(--ms-amber-400)",
+};
+
+function getActionColor(action: string): string {
+  return ACTION_COLORS[action] ?? "var(--muted)";
 }
 
-function formatRelativeTime(dateStr: string | null): string {
-  if (!dateStr) return "\u2014";
+const ENTITY_LABELS: Record<string, string> = {
+  [EntityType.TASK]: "Task",
+  [EntityType.EVENT]: "Event",
+  [EntityType.PROJECT]: "Project",
+  [EntityType.WORKSPACE]: "Workspace",
+  [EntityType.USER]: "User",
+  [EntityType.DOMAIN]: "Domain",
+  [EntityType.IDEA]: "Idea",
+};
+
+function getEntityTypeLabel(entityType: string): string {
+  return ENTITY_LABELS[entityType] ?? entityType;
+}
+
+function formatRelativeTime(dateStr: string): string {
   const date = new Date(dateStr);
   const now = Date.now();
   const diffMs = now - date.getTime();
@@ -74,29 +92,6 @@ function formatRelativeTime(dateStr: string | null): string {
   return date.toLocaleDateString();
 }
 
-function formatDuration(startedAt: string | null, completedAt: string | null): string {
-  if (!startedAt) return "\u2014";
-  const start = new Date(startedAt).getTime();
-  const end = completedAt ? new Date(completedAt).getTime() : Date.now();
-  const ms = end - start;
-  if (ms < 1_000) return `${String(ms)}ms`;
-  const sec = Math.floor(ms / 1_000);
-  if (sec < 60) return `${String(sec)}s`;
-  const min = Math.floor(sec / 60);
-  const remainSec = sec % 60;
-  return `${String(min)}m ${String(remainSec)}s`;
-}
-
-function formatStepDuration(durationMs: number | null): string {
-  if (durationMs === null) return "\u2014";
-  if (durationMs < 1_000) return `${String(durationMs)}ms`;
-  const sec = Math.floor(durationMs / 1_000);
-  if (sec < 60) return `${String(sec)}s`;
-  const min = Math.floor(sec / 60);
-  const remainSec = sec % 60;
-  return `${String(min)}m ${String(remainSec)}s`;
-}
-
 function isWithinDateRange(dateStr: string, range: DateRange): boolean {
   if (range === "all") return true;
   const date = new Date(dateStr);
@@ -105,18 +100,16 @@ function isWithinDateRange(dateStr: string, range: DateRange): boolean {
   return now - date.getTime() < hours * 60 * 60 * 1_000;
 }
 
-// ─── Status Badge ─────────────────────────────────────────────────────
+// ─── Action Badge ─────────────────────────────────────────────────────
 
-function StatusBadge({ status }: { status: string }): ReactElement {
-  const color = getStatusColor(status);
-  const isRunning = status === "RUNNING";
+function ActionBadge({ action }: { action: string }): ReactElement {
+  const color = getActionColor(action);
 
   return (
     <span
       style={{
         display: "inline-flex",
         alignItems: "center",
-        gap: 6,
         padding: "2px 10px",
         borderRadius: 9999,
         fontSize: "0.75rem",
@@ -127,18 +120,7 @@ function StatusBadge({ status }: { status: string }): ReactElement {
         textTransform: "capitalize",
       }}
     >
-      {isRunning && (
-        <span
-          style={{
-            width: 6,
-            height: 6,
-            borderRadius: "50%",
-            background: color,
-            animation: "pulse 1.5s ease-in-out infinite",
-          }}
-        />
-      )}
-      {status.toLowerCase()}
+      {action.toLowerCase()}
     </span>
   );
 }
@@ -149,59 +131,55 @@ export default function LogsPage(): ReactElement {
   const workspaceId = useWorkspaceId();
 
   // Data state
-  const [jobs, setJobs] = useState<RunnerJob[]>([]);
+  const [activities, setActivities] = useState<ActivityLog[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // Expanded job and steps
-  const [expandedJobId, setExpandedJobId] = useState<string | null>(null);
-  const [jobStepsMap, setJobStepsMap] = useState<Record<string, JobStep[]>>({});
-  const [stepsLoading, setStepsLoading] = useState<Set<string>>(new Set());
-
   // Filters
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+  const [actionFilter, setActionFilter] = useState<ActionFilter>("all");
+  const [entityFilter, setEntityFilter] = useState<EntityFilter>("all");
   const [dateRange, setDateRange] = useState<DateRange>("7d");
   const [searchQuery, setSearchQuery] = useState("");
 
   // Auto-refresh
-  const [autoRefresh, setAutoRefresh] = useState(false);
+  const [autoRefresh, setAutoRefresh] = useState(true);
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-  // Hover state
-  const [hoveredRowId, setHoveredRowId] = useState<string | null>(null);
-
   // ─── Data Loading ─────────────────────────────────────────────────
 
-  const loadJobs = useCallback(async (): Promise<void> => {
+  const loadActivities = useCallback(async (): Promise<void> => {
     try {
-      const statusEnums = STATUS_FILTER_TO_ENUM[statusFilter];
-      const filters: Parameters<typeof fetchRunnerJobs>[0] = {};
+      const filters: ActivityLogFilters = {};
       if (workspaceId) {
         filters.workspaceId = workspaceId;
       }
-      if (statusEnums) {
-        filters.status = statusEnums;
+      if (actionFilter !== "all") {
+        filters.action = actionFilter;
+      }
+      if (entityFilter !== "all") {
+        filters.entityType = entityFilter;
       }
 
-      const data = await fetchRunnerJobs(filters);
-      setJobs(data);
+      const response: Awaited<ReturnType<typeof fetchActivityLogs>> =
+        await fetchActivityLogs(filters);
+      setActivities(response);
       setError(null);
     } catch (err: unknown) {
-      console.error("[Logs] Failed to fetch runner jobs:", err);
+      console.error("[Logs] Failed to fetch activity logs:", err);
       setError(
         err instanceof Error
           ? err.message
-          : "We had trouble loading jobs. Please try again when you're ready."
+          : "We had trouble loading activity logs. Please try again when you're ready."
       );
     }
-  }, [workspaceId, statusFilter]);
+  }, [workspaceId, actionFilter, entityFilter]);
 
   // Initial load
   useEffect(() => {
     let cancelled = false;
     setIsLoading(true);
 
-    loadJobs()
+    loadActivities()
       .then(() => {
         if (!cancelled) {
           setIsLoading(false);
@@ -216,13 +194,13 @@ export default function LogsPage(): ReactElement {
     return (): void => {
       cancelled = true;
     };
-  }, [loadJobs]);
+  }, [loadActivities]);
 
   // Auto-refresh polling
   useEffect(() => {
     if (autoRefresh) {
       intervalRef.current = setInterval(() => {
-        void loadJobs();
+        void loadActivities();
       }, POLL_INTERVAL_MS);
     } else if (intervalRef.current) {
       clearInterval(intervalRef.current);
@@ -235,55 +213,22 @@ export default function LogsPage(): ReactElement {
         intervalRef.current = null;
       }
     };
-  }, [autoRefresh, loadJobs]);
-
-  // ─── Steps Loading ────────────────────────────────────────────────
-
-  const toggleExpand = useCallback(
-    (jobId: string) => {
-      if (expandedJobId === jobId) {
-        setExpandedJobId(null);
-        return;
-      }
-
-      setExpandedJobId(jobId);
-
-      // Load steps if not already loaded
-      if (!jobStepsMap[jobId] && !stepsLoading.has(jobId)) {
-        setStepsLoading((prev) => new Set(prev).add(jobId));
-
-        fetchJobSteps(jobId, workspaceId ?? undefined)
-          .then((steps) => {
-            setJobStepsMap((prev) => ({ ...prev, [jobId]: steps }));
-          })
-          .catch((err: unknown) => {
-            console.error("[Logs] Failed to fetch steps for job:", jobId, err);
-            setJobStepsMap((prev) => ({ ...prev, [jobId]: [] }));
-          })
-          .finally(() => {
-            setStepsLoading((prev) => {
-              const next = new Set(prev);
-              next.delete(jobId);
-              return next;
-            });
-          });
-      }
-    },
-    [expandedJobId, jobStepsMap, stepsLoading, workspaceId]
-  );
+  }, [autoRefresh, loadActivities]);
 
   // ─── Filtering ────────────────────────────────────────────────────
 
-  const filteredJobs = jobs.filter((job) => {
+  const filteredActivities = activities.filter((activity) => {
     // Date range filter
-    if (!isWithinDateRange(job.createdAt, dateRange)) return false;
+    if (!isWithinDateRange(activity.createdAt, dateRange)) return false;
 
     // Search filter
     if (searchQuery.trim()) {
       const q = searchQuery.toLowerCase();
-      const matchesType = job.type.toLowerCase().includes(q);
-      const matchesId = job.id.toLowerCase().includes(q);
-      if (!matchesType && !matchesId) return false;
+      const matchesEntity = getEntityTypeLabel(activity.entityType).toLowerCase().includes(q);
+      const matchesId = activity.entityId.toLowerCase().includes(q);
+      const matchesUser = activity.user?.name?.toLowerCase().includes(q);
+      const matchesEmail = activity.user?.email.toLowerCase().includes(q);
+      if (!matchesEntity && !matchesId && !matchesUser && !matchesEmail) return false;
     }
 
     return true;
@@ -293,7 +238,7 @@ export default function LogsPage(): ReactElement {
 
   const handleManualRefresh = (): void => {
     setIsLoading(true);
-    void loadJobs().finally(() => {
+    void loadActivities().finally(() => {
       setIsLoading(false);
     });
   };
@@ -307,16 +252,12 @@ export default function LogsPage(): ReactElement {
 
   return (
     <main className="container mx-auto px-4 py-8">
-      {/* Pulse animation for running status */}
+      {/* Pulse animation for auto-refresh */}
       <style>{`
         @keyframes pulse {
           0%, 100% { opacity: 1; }
           50% { opacity: 0.4; }
         }
-        @keyframes auto-refresh-spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
       `}</style>
 
       {/* ─── Header ─────────────────────────────────────────────── */}
@@ -332,10 +273,10 @@ export default function LogsPage(): ReactElement {
       >
         <div>
           <h1 className="text-3xl font-bold" style={{ color: "var(--text)" }}>
-            Logs &amp; Telemetry
+            Activity Logs
           </h1>
           <p className="mt-1" style={{ color: "var(--text-muted)" }}>
-            Runner job history and step-level detail
+            Audit trail and activity history
           </p>
         </div>
 
@@ -408,11 +349,11 @@ export default function LogsPage(): ReactElement {
           marginBottom: 24,
         }}
       >
-        {/* Status filter */}
+        {/* Action filter */}
         <select
-          value={statusFilter}
+          value={actionFilter}
           onChange={(e) => {
-            setStatusFilter(e.target.value as StatusFilter);
+            setActionFilter(e.target.value as ActionFilter);
           }}
           style={{
             padding: "8px 12px",
@@ -425,7 +366,31 @@ export default function LogsPage(): ReactElement {
             minWidth: 140,
           }}
         >
-          {STATUS_OPTIONS.map((opt) => (
+          {ACTION_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+
+        {/* Entity filter */}
+        <select
+          value={entityFilter}
+          onChange={(e) => {
+            setEntityFilter(e.target.value as EntityFilter);
+          }}
+          style={{
+            padding: "8px 12px",
+            borderRadius: 8,
+            fontSize: "0.82rem",
+            border: "1px solid var(--border)",
+            background: "var(--surface)",
+            color: "var(--text)",
+            cursor: "pointer",
+            minWidth: 140,
+          }}
+        >
+          {ENTITY_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>
               {opt.label}
             </option>
@@ -467,7 +432,7 @@ export default function LogsPage(): ReactElement {
         {/* Search input */}
         <input
           type="text"
-          placeholder="Search by job type..."
+          placeholder="Search by entity or user..."
           value={searchQuery}
           onChange={(e) => {
             setSearchQuery(e.target.value);
@@ -487,9 +452,9 @@ export default function LogsPage(): ReactElement {
       </div>
 
       {/* ─── Content ────────────────────────────────────────────── */}
-      {isLoading && jobs.length === 0 ? (
+      {isLoading && activities.length === 0 ? (
         <div className="flex justify-center py-16">
-          <MosaicSpinner label="Loading jobs..." />
+          <MosaicSpinner label="Loading activity logs..." />
         </div>
       ) : error !== null ? (
         <div
@@ -508,7 +473,7 @@ export default function LogsPage(): ReactElement {
             Try again
           </button>
         </div>
-      ) : filteredJobs.length === 0 ? (
+      ) : filteredActivities.length === 0 ? (
         <div
           className="rounded-lg p-8 text-center"
           style={{
@@ -516,10 +481,10 @@ export default function LogsPage(): ReactElement {
             border: "1px solid var(--border)",
           }}
         >
-          <p style={{ color: "var(--text-muted)" }}>No jobs found</p>
+          <p style={{ color: "var(--text-muted)" }}>No activity logs found</p>
         </div>
       ) : (
-        /* ─── Job Table ──────────────────────────────────────────── */
+        /* ─── Activity Table ──────────────────────────────────────── */
         <div
           style={{
             borderRadius: 12,
@@ -535,7 +500,7 @@ export default function LogsPage(): ReactElement {
                     background: "var(--bg-mid)",
                   }}
                 >
-                  {["Job Type", "Status", "Started", "Duration", "Steps"].map((header) => (
+                  {["Action", "Entity", "User", "Details", "Time"].map((header) => (
                     <th
                       key={header}
                       style={{
@@ -556,32 +521,9 @@ export default function LogsPage(): ReactElement {
                 </tr>
               </thead>
               <tbody>
-                {filteredJobs.map((job) => {
-                  const isExpanded = expandedJobId === job.id;
-                  const isHovered = hoveredRowId === job.id;
-                  const steps = jobStepsMap[job.id];
-                  const isStepsLoading = stepsLoading.has(job.id);
-
-                  return (
-                    <JobRow
-                      key={job.id}
-                      job={job}
-                      isExpanded={isExpanded}
-                      isHovered={isHovered}
-                      steps={steps}
-                      isStepsLoading={isStepsLoading}
-                      onToggle={() => {
-                        toggleExpand(job.id);
-                      }}
-                      onMouseEnter={() => {
-                        setHoveredRowId(job.id);
-                      }}
-                      onMouseLeave={() => {
-                        setHoveredRowId(null);
-                      }}
-                    />
-                  );
-                })}
+                {filteredActivities.map((activity) => (
+                  <ActivityRow key={activity.id} activity={activity} />
+                ))}
               </tbody>
             </table>
           </div>
@@ -591,260 +533,91 @@ export default function LogsPage(): ReactElement {
   );
 }
 
-// ─── Job Row Component ────────────────────────────────────────────────
-
-function JobRow({
-  job,
-  isExpanded,
-  isHovered,
-  steps,
-  isStepsLoading,
-  onToggle,
-  onMouseEnter,
-  onMouseLeave,
-}: {
-  job: RunnerJob;
-  isExpanded: boolean;
-  isHovered: boolean;
-  steps: JobStep[] | undefined;
-  isStepsLoading: boolean;
-  onToggle: () => void;
-  onMouseEnter: () => void;
-  onMouseLeave: () => void;
-}): ReactElement {
-  return (
-    <>
-      <tr
-        onClick={onToggle}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        style={{
-          background: isExpanded
-            ? "var(--surface-2)"
-            : isHovered
-              ? "var(--surface-2)"
-              : "var(--surface)",
-          cursor: "pointer",
-          borderBottom: isExpanded ? "none" : "1px solid var(--border)",
-          transition: "background 100ms ease",
-        }}
-      >
-        <td
-          style={{
-            padding: "12px 16px",
-            fontSize: "0.85rem",
-            fontWeight: 500,
-            color: "var(--text)",
-            whiteSpace: "nowrap",
-          }}
-        >
-          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
-            <span
-              style={{
-                display: "inline-block",
-                width: 16,
-                textAlign: "center",
-                fontSize: "0.7rem",
-                color: "var(--muted)",
-                transition: "transform 150ms ease",
-                transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
-              }}
-            >
-              &#9654;
-            </span>
-            {job.type}
-          </span>
-        </td>
-        <td style={{ padding: "12px 16px" }}>
-          <StatusBadge status={job.status} />
-        </td>
-        <td
-          style={{
-            padding: "12px 16px",
-            fontSize: "0.82rem",
-            fontFamily: "var(--mono)",
-            color: "var(--text-muted)",
-            whiteSpace: "nowrap",
-          }}
-        >
-          {formatRelativeTime(job.startedAt ?? job.createdAt)}
-        </td>
-        <td
-          style={{
-            padding: "12px 16px",
-            fontSize: "0.82rem",
-            fontFamily: "var(--mono)",
-            color: "var(--text-muted)",
-            whiteSpace: "nowrap",
-          }}
-        >
-          {formatDuration(job.startedAt, job.completedAt)}
-        </td>
-        <td
-          style={{
-            padding: "12px 16px",
-            fontSize: "0.82rem",
-            fontFamily: "var(--mono)",
-            color: "var(--text-muted)",
-          }}
-        >
-          {steps ? String(steps.length) : "\u2014"}
-        </td>
-      </tr>
-
-      {/* Expanded Steps Section */}
-      {isExpanded && (
-        <tr>
-          <td
-            colSpan={5}
-            style={{
-              padding: 0,
-              borderBottom: "1px solid var(--border)",
-            }}
-          >
-            <div
-              style={{
-                background: "var(--bg-mid)",
-                padding: "12px 16px 12px 48px",
-              }}
-            >
-              {isStepsLoading ? (
-                <div style={{ display: "flex", justifyContent: "center", padding: 16 }}>
-                  <MosaicSpinner size={24} label="Loading steps..." />
-                </div>
-              ) : !steps || steps.length === 0 ? (
-                <p
-                  style={{
-                    fontSize: "0.82rem",
-                    color: "var(--text-muted)",
-                    padding: "8px 0",
-                  }}
-                >
-                  No steps recorded for this job
-                </p>
-              ) : (
-                <table style={{ width: "100%", borderCollapse: "collapse" }}>
-                  <thead>
-                    <tr>
-                      {["#", "Name", "Phase", "Status", "Duration"].map((header) => (
-                        <th
-                          key={header}
-                          style={{
-                            padding: "6px 12px",
-                            textAlign: "left",
-                            fontSize: "0.7rem",
-                            fontWeight: 600,
-                            textTransform: "uppercase",
-                            letterSpacing: "0.05em",
-                            color: "var(--muted)",
-                            fontFamily: "var(--mono)",
-                            borderBottom: "1px solid var(--border)",
-                            whiteSpace: "nowrap",
-                          }}
-                        >
-                          {header}
-                        </th>
-                      ))}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {steps
-                      .sort((a, b) => a.ordinal - b.ordinal)
-                      .map((step) => (
-                        <StepRow key={step.id} step={step} />
-                      ))}
-                  </tbody>
-                </table>
-              )}
-
-              {/* Job error message if failed */}
-              {job.error && (
-                <div
-                  style={{
-                    marginTop: 12,
-                    padding: "8px 12px",
-                    borderRadius: 6,
-                    fontSize: "0.78rem",
-                    fontFamily: "var(--mono)",
-                    color: "var(--danger)",
-                    background: "color-mix(in srgb, var(--danger) 8%, transparent)",
-                    border: "1px solid color-mix(in srgb, var(--danger) 20%, transparent)",
-                    wordBreak: "break-all",
-                  }}
-                >
-                  {job.error}
-                </div>
-              )}
-            </div>
-          </td>
-        </tr>
-      )}
-    </>
-  );
-}
-
-// ─── Step Row Component ───────────────────────────────────────────────
-
-function StepRow({ step }: { step: JobStep }): ReactElement {
-  const [hovered, setHovered] = useState(false);
+// ─── Activity Row Component ───────────────────────────────────────────
 
+function ActivityRow({ activity }: { activity: ActivityLog }): ReactElement {
   return (
     <tr
-      onMouseEnter={() => {
-        setHovered(true);
-      }}
-      onMouseLeave={() => {
-        setHovered(false);
-      }}
       style={{
-        background: hovered ? "color-mix(in srgb, var(--surface) 50%, transparent)" : "transparent",
-        borderBottom: "1px solid color-mix(in srgb, var(--border) 50%, transparent)",
+        background: "var(--surface)",
+        borderBottom: "1px solid var(--border)",
         transition: "background 100ms ease",
       }}
     >
-      <td
-        style={{
-          padding: "6px 12px",
-          fontSize: "0.78rem",
-          fontFamily: "var(--mono)",
-          color: "var(--muted)",
-        }}
-      >
-        {String(step.ordinal)}
+      <td style={{ padding: "12px 16px" }}>
+        <ActionBadge action={activity.action} />
       </td>
       <td
         style={{
-          padding: "6px 12px",
-          fontSize: "0.8rem",
+          padding: "12px 16px",
+          fontSize: "0.85rem",
+          fontWeight: 500,
           color: "var(--text)",
         }}
       >
-        {step.name}
+        <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+          <span>{getEntityTypeLabel(activity.entityType)}</span>
+          <span
+            style={{
+              fontSize: "0.75rem",
+              color: "var(--muted)",
+              fontFamily: "var(--mono)",
+            }}
+          >
+            {activity.entityId}
+          </span>
+        </div>
       </td>
       <td
         style={{
-          padding: "6px 12px",
-          fontSize: "0.75rem",
-          fontFamily: "var(--mono)",
-          color: "var(--text-muted)",
-          textTransform: "lowercase",
+          padding: "12px 16px",
+          fontSize: "0.82rem",
+          color: "var(--text)",
         }}
       >
-        {step.phase}
-      </td>
-      <td style={{ padding: "6px 12px" }}>
-        <StatusBadge status={step.status} />
+        {activity.user ? (
+          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+            <span>{activity.user.name ?? activity.user.email}</span>
+            {activity.user.name && (
+              <span
+                style={{
+                  fontSize: "0.75rem",
+                  color: "var(--muted)",
+                }}
+              >
+                {activity.user.email}
+              </span>
+            )}
+          </div>
+        ) : (
+          <span style={{ color: "var(--muted)" }}>—</span>
+        )}
       </td>
       <td
         style={{
-          padding: "6px 12px",
+          padding: "12px 16px",
           fontSize: "0.78rem",
+          color: "var(--text-muted)",
+          fontFamily: "var(--mono)",
+          maxWidth: 300,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+        title={activity.details ? JSON.stringify(activity.details) : undefined}
+      >
+        {activity.details ? JSON.stringify(activity.details) : "—"}
+      </td>
+      <td
+        style={{
+          padding: "12px 16px",
+          fontSize: "0.82rem",
           fontFamily: "var(--mono)",
           color: "var(--text-muted)",
           whiteSpace: "nowrap",
         }}
       >
-        {formatStepDuration(step.durationMs)}
+        {formatRelativeTime(activity.createdAt)}
       </td>
     </tr>
   );

apps/web/src/app/(authenticated)/projects/[id]/page.tsx

@@ -0,0 +1,491 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import type { ReactElement } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { ArrowLeft } from "lucide-react";
+
+import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
+import { fetchProject, type ProjectDetail } from "@/lib/api/projects";
+import { useWorkspaceId } from "@/lib/hooks";
+
+interface BadgeStyle {
+  label: string;
+  bg: string;
+  color: string;
+}
+
+interface StatusBadgeProps {
+  style: BadgeStyle;
+}
+
+interface MetaItemProps {
+  label: string;
+  value: string;
+}
+
+function getProjectStatusStyle(status: string): BadgeStyle {
+  switch (status) {
+    case "PLANNING":
+      return { label: "Planning", bg: "rgba(47,128,255,0.15)", color: "var(--primary)" };
+    case "ACTIVE":
+      return { label: "Active", bg: "rgba(20,184,166,0.15)", color: "var(--success)" };
+    case "PAUSED":
+      return { label: "Paused", bg: "rgba(245,158,11,0.15)", color: "var(--warn)" };
+    case "COMPLETED":
+      return { label: "Completed", bg: "rgba(139,92,246,0.15)", color: "var(--purple)" };
+    case "ARCHIVED":
+      return { label: "Archived", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+    default:
+      return { label: status, bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+  }
+}
+
+function getPriorityStyle(priority: string | null | undefined): BadgeStyle {
+  switch (priority) {
+    case "HIGH":
+      return { label: "High", bg: "rgba(229,72,77,0.15)", color: "var(--danger)" };
+    case "MEDIUM":
+      return { label: "Medium", bg: "rgba(245,158,11,0.15)", color: "var(--warn)" };
+    case "LOW":
+      return { label: "Low", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+    default:
+      return { label: "Unspecified", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+  }
+}
+
+function getTaskStatusStyle(status: string): BadgeStyle {
+  switch (status) {
+    case "NOT_STARTED":
+      return { label: "Not Started", bg: "rgba(47,128,255,0.15)", color: "var(--primary)" };
+    case "IN_PROGRESS":
+      return { label: "In Progress", bg: "rgba(245,158,11,0.15)", color: "var(--warn)" };
+    case "PAUSED":
+      return { label: "Paused", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+    case "COMPLETED":
+      return { label: "Completed", bg: "rgba(20,184,166,0.15)", color: "var(--success)" };
+    case "ARCHIVED":
+      return { label: "Archived", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+    default:
+      return { label: status, bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+  }
+}
+
+function formatDate(iso: string | null | undefined): string {
+  if (!iso) return "Not set";
+
+  try {
+    return new Date(iso).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function formatDateTime(iso: string | null | undefined): string {
+  if (!iso) return "Not set";
+
+  try {
+    return new Date(iso).toLocaleString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function toFriendlyErrorMessage(error: unknown): string {
+  const fallback = "We had trouble loading this project. Please try again when you're ready.";
+
+  if (!(error instanceof Error)) {
+    return fallback;
+  }
+
+  const message = error.message.trim();
+  if (message.toLowerCase().includes("not found")) {
+    return "Project not found. It may have been deleted or you may not have access to it.";
+  }
+
+  return message || fallback;
+}
+
+function StatusBadge({ style: statusStyle }: StatusBadgeProps): ReactElement {
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "2px 10px",
+        borderRadius: "var(--r)",
+        background: statusStyle.bg,
+        color: statusStyle.color,
+        fontSize: "0.75rem",
+        fontWeight: 500,
+      }}
+    >
+      {statusStyle.label}
+    </span>
+  );
+}
+
+function MetaItem({ label, value }: MetaItemProps): ReactElement {
+  return (
+    <div
+      style={{
+        background: "var(--bg)",
+        border: "1px solid var(--border)",
+        borderRadius: "var(--r)",
+        padding: "10px 12px",
+      }}
+    >
+      <p style={{ margin: "0 0 4px", fontSize: "0.75rem", color: "var(--muted)" }}>{label}</p>
+      <p style={{ margin: 0, fontSize: "0.85rem", color: "var(--text)" }}>{value}</p>
+    </div>
+  );
+}
+
+export default function ProjectDetailPage(): ReactElement {
+  const router = useRouter();
+  const params = useParams<{ id: string | string[] }>();
+  const workspaceId = useWorkspaceId();
+  const rawProjectId = params.id;
+  const projectId = Array.isArray(rawProjectId) ? (rawProjectId[0] ?? null) : rawProjectId;
+
+  const [project, setProject] = useState<ProjectDetail | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadProject = useCallback(async (id: string, wsId: string): Promise<void> => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const data = await fetchProject(id, wsId);
+      setProject(data);
+    } catch (err: unknown) {
+      console.error("[ProjectDetail] Failed to fetch project:", err);
+      setProject(null);
+      setError(toFriendlyErrorMessage(err));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!projectId) {
+      setProject(null);
+      setError("The project link is invalid. Please return to the projects page.");
+      setIsLoading(false);
+      return;
+    }
+
+    if (!workspaceId) {
+      setProject(null);
+      setError("Select a workspace to view this project.");
+      setIsLoading(false);
+      return;
+    }
+
+    const id = projectId;
+    const wsId = workspaceId;
+    let cancelled = false;
+
+    async function load(): Promise<void> {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const data = await fetchProject(id, wsId);
+        if (!cancelled) {
+          setProject(data);
+        }
+      } catch (err: unknown) {
+        console.error("[ProjectDetail] Failed to fetch project:", err);
+        if (!cancelled) {
+          setProject(null);
+          setError(toFriendlyErrorMessage(err));
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    }
+
+    void load();
+
+    return (): void => {
+      cancelled = true;
+    };
+  }, [projectId, workspaceId]);
+
+  function handleRetry(): void {
+    if (!projectId || !workspaceId) return;
+    void loadProject(projectId, workspaceId);
+  }
+
+  function handleBack(): void {
+    router.push("/projects");
+  }
+
+  const projectStatus = project ? getProjectStatusStyle(project.status) : null;
+  const projectPriority = project ? getPriorityStyle(project.priority) : null;
+  const dueDate = project?.dueDate ?? project?.endDate;
+  const creator =
+    project?.creator.name && project.creator.name.trim().length > 0
+      ? `${project.creator.name} (${project.creator.email})`
+      : (project?.creator.email ?? "Unknown");
+
+  return (
+    <main className="container mx-auto px-4 py-8" style={{ maxWidth: 960 }}>
+      <button
+        onClick={handleBack}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          marginBottom: 20,
+          padding: "8px 12px",
+          borderRadius: "var(--r)",
+          border: "1px solid var(--border)",
+          background: "var(--surface)",
+          color: "var(--text-2)",
+          fontSize: "0.85rem",
+          fontWeight: 500,
+          cursor: "pointer",
+        }}
+      >
+        <ArrowLeft size={16} />
+        Back to projects
+      </button>
+
+      {isLoading ? (
+        <div className="flex justify-center py-16">
+          <MosaicSpinner label="Loading project..." />
+        </div>
+      ) : error !== null ? (
+        <div
+          style={{
+            background: "var(--surface)",
+            border: "1px solid var(--border)",
+            borderRadius: "var(--r-lg)",
+            padding: 32,
+            textAlign: "center",
+          }}
+        >
+          <p style={{ color: "var(--danger)", margin: "0 0 20px" }}>{error}</p>
+          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
+            <button
+              onClick={handleBack}
+              style={{
+                padding: "8px 16px",
+                background: "transparent",
+                border: "1px solid var(--border)",
+                borderRadius: "var(--r)",
+                color: "var(--text-2)",
+                fontSize: "0.85rem",
+                cursor: "pointer",
+              }}
+            >
+              Back to projects
+            </button>
+            <button
+              onClick={handleRetry}
+              style={{
+                padding: "8px 16px",
+                background: "var(--danger)",
+                border: "none",
+                borderRadius: "var(--r)",
+                color: "#fff",
+                fontSize: "0.85rem",
+                fontWeight: 500,
+                cursor: "pointer",
+              }}
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      ) : project === null ? (
+        <div
+          style={{
+            background: "var(--surface)",
+            border: "1px solid var(--border)",
+            borderRadius: "var(--r-lg)",
+            padding: 32,
+            textAlign: "center",
+          }}
+        >
+          <p style={{ color: "var(--muted)", margin: 0 }}>Project details are not available.</p>
+        </div>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          <section
+            style={{
+              background: "var(--surface)",
+              border: "1px solid var(--border)",
+              borderRadius: "var(--r-lg)",
+              padding: 24,
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "flex-start",
+                gap: 12,
+                flexWrap: "wrap",
+              }}
+            >
+              <div style={{ minWidth: 0 }}>
+                <h1
+                  style={{ margin: 0, fontSize: "1.875rem", fontWeight: 700, color: "var(--text)" }}
+                >
+                  {project.name}
+                </h1>
+              </div>
+              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+                {projectStatus && <StatusBadge style={projectStatus} />}
+                {projectPriority && <StatusBadge style={projectPriority} />}
+              </div>
+            </div>
+
+            {project.description ? (
+              <p
+                style={{
+                  margin: "14px 0 0",
+                  color: "var(--muted)",
+                  fontSize: "0.9rem",
+                  lineHeight: 1.6,
+                }}
+              >
+                {project.description}
+              </p>
+            ) : (
+              <p
+                style={{
+                  margin: "14px 0 0",
+                  color: "var(--muted)",
+                  fontSize: "0.9rem",
+                  lineHeight: 1.6,
+                  fontStyle: "italic",
+                }}
+              >
+                No description provided.
+              </p>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3" style={{ marginTop: 18 }}>
+              <MetaItem label="Start date" value={formatDate(project.startDate)} />
+              <MetaItem label="Due date" value={formatDate(dueDate)} />
+              <MetaItem label="Created" value={formatDateTime(project.createdAt)} />
+              <MetaItem label="Updated" value={formatDateTime(project.updatedAt)} />
+              <MetaItem label="Creator" value={creator} />
+              <MetaItem
+                label="Work items"
+                value={`${String(project._count.tasks)} tasks · ${String(project._count.events)} events`}
+              />
+            </div>
+          </section>
+
+          <section
+            style={{
+              background: "var(--surface)",
+              border: "1px solid var(--border)",
+              borderRadius: "var(--r-lg)",
+              padding: 24,
+            }}
+          >
+            <h2 style={{ margin: "0 0 12px", fontSize: "1.1rem", color: "var(--text)" }}>
+              Tasks ({String(project._count.tasks)})
+            </h2>
+
+            {project.tasks.length === 0 ? (
+              <p style={{ margin: 0, color: "var(--muted)", fontSize: "0.9rem" }}>
+                No tasks yet for this project.
+              </p>
+            ) : (
+              <div>
+                {project.tasks.map((task, index) => (
+                  <div
+                    key={task.id}
+                    style={{
+                      padding: "12px 0",
+                      borderTop: index === 0 ? "none" : "1px solid var(--border)",
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "flex-start",
+                        justifyContent: "space-between",
+                        gap: 12,
+                        flexWrap: "wrap",
+                      }}
+                    >
+                      <div style={{ minWidth: 0 }}>
+                        <p style={{ margin: 0, color: "var(--text)", fontWeight: 500 }}>
+                          {task.title}
+                        </p>
+                        <p style={{ margin: "4px 0 0", color: "var(--muted)", fontSize: "0.8rem" }}>
+                          Due: {formatDate(task.dueDate)}
+                        </p>
+                      </div>
+                      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+                        <StatusBadge style={getTaskStatusStyle(task.status)} />
+                        <StatusBadge style={getPriorityStyle(task.priority)} />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+
+          <section
+            style={{
+              background: "var(--surface)",
+              border: "1px solid var(--border)",
+              borderRadius: "var(--r-lg)",
+              padding: 24,
+            }}
+          >
+            <h2 style={{ margin: "0 0 12px", fontSize: "1.1rem", color: "var(--text)" }}>
+              Events ({String(project._count.events)})
+            </h2>
+
+            {project.events.length === 0 ? (
+              <p style={{ margin: 0, color: "var(--muted)", fontSize: "0.9rem" }}>
+                No events scheduled for this project.
+              </p>
+            ) : (
+              <div>
+                {project.events.map((event, index) => (
+                  <div
+                    key={event.id}
+                    style={{
+                      padding: "12px 0",
+                      borderTop: index === 0 ? "none" : "1px solid var(--border)",
+                    }}
+                  >
+                    <p style={{ margin: 0, color: "var(--text)", fontWeight: 500 }}>
+                      {event.title}
+                    </p>
+                    <p style={{ margin: "4px 0 0", color: "var(--muted)", fontSize: "0.8rem" }}>
+                      {formatDateTime(event.startTime)} - {formatDateTime(event.endTime)}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+        </div>
+      )}
+    </main>
+  );
+}

apps/web/src/app/(authenticated)/projects/page.tsx

@@ -17,6 +17,8 @@ import {
 import { fetchProjects, createProject, deleteProject, ProjectStatus } from "@/lib/api/projects";
 import type { Project, CreateProjectDto } from "@/lib/api/projects";
 import { useWorkspaceId } from "@/lib/hooks";
+import { fetchDomains } from "@/lib/api/domains";
+import type { Domain } from "@mosaic/shared";
 
 /* ---------------------------------------------------------------------------
    Status badge helpers
@@ -65,11 +67,14 @@ interface ProjectCardProps {
   project: Project;
   onDelete: (id: string) => void;
   onClick: (id: string) => void;
+  domains: Domain[];
 }
 
-function ProjectCard({ project, onDelete, onClick }: ProjectCardProps): ReactElement {
+function ProjectCard({ project, onDelete, onClick, domains }: ProjectCardProps): ReactElement {
   const [hovered, setHovered] = useState(false);
   const status = getStatusStyle(project.status);
+  // Find domain if project has a domainId
+  const domain = project.domainId ? domains.find((d) => d.id === project.domainId) : undefined;
 
   return (
     <div
@@ -204,6 +209,22 @@ function ProjectCard({ project, onDelete, onClick }: ProjectCardProps): ReactEle
         >
           {status.label}
         </span>
+        {domain && (
+          <span
+            style={{
+              display: "inline-block",
+              padding: "2px 10px",
+              borderRadius: "var(--r)",
+              background: "rgba(139,92,246,0.15)",
+              color: "var(--purple)",
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              marginLeft: 8,
+            }}
+          >
+            {domain.name}
+          </span>
+        )}
 
         {/* Timestamps */}
         <span
@@ -229,6 +250,7 @@ interface CreateDialogProps {
   onOpenChange: (open: boolean) => void;
   onSubmit: (data: CreateProjectDto) => Promise<void>;
   isSubmitting: boolean;
+  domains: Domain[];
 }
 
 function CreateProjectDialog({
@@ -236,20 +258,24 @@ function CreateProjectDialog({
   onOpenChange,
   onSubmit,
   isSubmitting,
+  domains,
 }: CreateDialogProps): ReactElement {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [formError, setFormError] = useState<string | null>(null);
+  const [domainId, setDomainId] = useState("");
 
   function resetForm(): void {
     setName("");
     setDescription("");
     setFormError(null);
+    setDomainId("");
   }
 
   async function handleSubmit(e: SyntheticEvent): Promise<void> {
     e.preventDefault();
     setFormError(null);
+    setDomainId("");
 
     const trimmedName = name.trim();
     if (!trimmedName) {
@@ -263,6 +289,9 @@ function CreateProjectDialog({
       if (trimmedDesc) {
         payload.description = trimmedDesc;
       }
+      if (domainId) {
+        payload.domainId = domainId;
+      }
       await onSubmit(payload);
       resetForm();
     } catch (err: unknown) {
@@ -382,6 +411,47 @@ function CreateProjectDialog({
               />
             </div>
 
+            {/* Domain */}
+            <div style={{ marginBottom: 16 }}>
+              <label
+                htmlFor="project-domain"
+                style={{
+                  display: "block",
+                  marginBottom: 6,
+                  fontSize: "0.85rem",
+                  fontWeight: 500,
+                  color: "var(--text-2)",
+                }}
+              >
+                Domain (optional)
+              </label>
+              <select
+                id="project-domain"
+                value={domainId}
+                onChange={(e) => {
+                  setDomainId(e.target.value);
+                }}
+                style={{
+                  width: "100%",
+                  padding: "8px 12px",
+                  background: "var(--bg)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "var(--r)",
+                  color: "var(--text)",
+                  fontSize: "0.9rem",
+                  outline: "none",
+                  boxSizing: "border-box",
+                }}
+              >
+                <option value="">None</option>
+                {domains.map((d) => (
+                  <option key={d.id} value={d.id}>
+                    {d.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
             {/* Form error */}
             {formError !== null && (
               <p style={{ color: "var(--danger)", fontSize: "0.85rem", margin: "0 0 12px" }}>
@@ -532,6 +602,7 @@ export default function ProjectsPage(): ReactElement {
   const workspaceId = useWorkspaceId();
 
   const [projects, setProjects] = useState<Project[]>([]);
+  const [domains, setDomains] = useState<Domain[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -601,6 +672,33 @@ export default function ProjectsPage(): ReactElement {
     };
   }, [workspaceId]);
 
+  // Load domains
+  useEffect(() => {
+    if (!workspaceId) {
+      return;
+    }
+
+    let cancelled = false;
+    const wsId = workspaceId;
+
+    async function loadDomains(): Promise<void> {
+      try {
+        const response = await fetchDomains(undefined, wsId);
+        if (!cancelled) {
+          setDomains(response.data);
+        }
+      } catch (err: unknown) {
+        console.error("[Projects] Failed to fetch domains:", err);
+      }
+    }
+
+    void loadDomains();
+
+    return (): void => {
+      cancelled = true;
+    };
+  }, [workspaceId]);
+
   function handleRetry(): void {
     void loadProjects(workspaceId);
   }
@@ -779,6 +877,7 @@ export default function ProjectsPage(): ReactElement {
               project={project}
               onDelete={handleDeleteRequest}
               onClick={handleCardClick}
+              domains={domains}
             />
           ))}
         </div>
@@ -790,6 +889,7 @@ export default function ProjectsPage(): ReactElement {
         onOpenChange={setCreateOpen}
         onSubmit={handleCreate}
         isSubmitting={isCreating}
+        domains={domains}
       />
 
       {/* Delete Confirmation Dialog */}

apps/web/src/app/(authenticated)/settings/agent-config/page.tsx

@@ -0,0 +1,356 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ChangeEvent,
+  type ReactElement,
+  type SyntheticEvent,
+} from "react";
+import { FleetSettingsNav } from "@/components/settings/FleetSettingsNav";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  fetchFleetAgentConfig,
+  fetchFleetProviders,
+  updateFleetAgentConfig,
+  type FleetProvider,
+  type FleetProviderModel,
+  type UpdateFleetAgentConfigRequest,
+} from "@/lib/api/fleet-settings";
+
+function getErrorMessage(error: unknown, fallback: string): string {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+
+  return fallback;
+}
+
+function normalizeProviderModels(models: unknown): FleetProviderModel[] {
+  if (!Array.isArray(models)) {
+    return [];
+  }
+
+  const parsed: FleetProviderModel[] = [];
+
+  models.forEach((entry) => {
+    if (typeof entry === "string" && entry.trim().length > 0) {
+      parsed.push({ id: entry.trim(), name: entry.trim() });
+      return;
+    }
+
+    if (entry && typeof entry === "object") {
+      const record = entry as Record<string, unknown>;
+      const id =
+        typeof record.id === "string"
+          ? record.id.trim()
+          : typeof record.name === "string"
+            ? record.name.trim()
+            : "";
+
+      if (id.length > 0) {
+        parsed.push({ id, name: id });
+      }
+    }
+  });
+
+  const seen = new Set<string>();
+  return parsed.filter((model) => {
+    if (seen.has(model.id)) {
+      return false;
+    }
+
+    seen.add(model.id);
+    return true;
+  });
+}
+
+function parseModelList(value: string): string[] {
+  const seen = new Set<string>();
+
+  return value
+    .split(/\n|,/g)
+    .map((segment) => segment.trim())
+    .filter((segment) => segment.length > 0)
+    .filter((segment) => {
+      if (seen.has(segment)) {
+        return false;
+      }
+
+      seen.add(segment);
+      return true;
+    });
+}
+
+function deriveAvailableModels(providers: FleetProvider[]): string[] {
+  const seen = new Set<string>();
+  const models: string[] = [];
+
+  providers.forEach((provider) => {
+    normalizeProviderModels(provider.models).forEach((model) => {
+      if (seen.has(model.id)) {
+        return;
+      }
+
+      seen.add(model.id);
+      models.push(model.id);
+    });
+  });
+
+  return models.sort((left, right) => left.localeCompare(right));
+}
+
+export default function AgentConfigSettingsPage(): ReactElement {
+  const [providers, setProviders] = useState<FleetProvider[]>([]);
+  const [primaryModel, setPrimaryModel] = useState<string>("");
+  const [fallbackModelsText, setFallbackModelsText] = useState<string>("");
+  const [personality, setPersonality] = useState<string>("");
+
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isSaving, setIsSaving] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  const availableModels = useMemo(() => deriveAvailableModels(providers), [providers]);
+  const fallbackModels = useMemo(() => parseModelList(fallbackModelsText), [fallbackModelsText]);
+
+  const modelSelectOptions = useMemo(() => {
+    if (primaryModel.length > 0 && !availableModels.includes(primaryModel)) {
+      return [primaryModel, ...availableModels];
+    }
+
+    return availableModels;
+  }, [availableModels, primaryModel]);
+
+  const loadSettings = useCallback(async (): Promise<void> => {
+    setIsLoading(true);
+
+    try {
+      const [providerData, agentConfig] = await Promise.all([
+        fetchFleetProviders(),
+        fetchFleetAgentConfig(),
+      ]);
+      setProviders(providerData);
+      setPrimaryModel(agentConfig.primaryModel ?? "");
+      setFallbackModelsText(agentConfig.fallbackModels.join("\n"));
+      setPersonality(agentConfig.personality ?? "");
+      setError(null);
+    } catch (loadError: unknown) {
+      setError(getErrorMessage(loadError, "Failed to load agent configuration."));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadSettings();
+  }, [loadSettings]);
+
+  function appendFallbackModel(model: string): void {
+    const current = parseModelList(fallbackModelsText);
+    if (current.includes(model)) {
+      return;
+    }
+
+    const next = [...current, model];
+    setFallbackModelsText(next.join("\n"));
+  }
+
+  async function handleSave(event: SyntheticEvent): Promise<void> {
+    event.preventDefault();
+    setError(null);
+    setSuccessMessage(null);
+
+    const updatePayload: UpdateFleetAgentConfigRequest = {
+      personality: personality.trim(),
+    };
+
+    if (primaryModel.trim().length > 0) {
+      updatePayload.primaryModel = primaryModel.trim();
+    }
+
+    const parsedFallbacks = parseModelList(fallbackModelsText).filter(
+      (model) => model !== primaryModel.trim()
+    );
+    if (parsedFallbacks.length > 0) {
+      updatePayload.fallbackModels = parsedFallbacks;
+    }
+
+    try {
+      setIsSaving(true);
+      await updateFleetAgentConfig(updatePayload);
+      setSuccessMessage("Agent configuration saved.");
+      await loadSettings();
+    } catch (saveError: unknown) {
+      setError(getErrorMessage(saveError, "Failed to save agent configuration."));
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto p-6 space-y-6">
+      <div className="space-y-4">
+        <div>
+          <h1 className="text-3xl font-bold">Agent Configuration</h1>
+          <p className="text-muted-foreground mt-1">
+            Assign primary and fallback models for your agent runtime behavior.
+          </p>
+        </div>
+        <FleetSettingsNav />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Current Assignment</CardTitle>
+          <CardDescription>
+            Snapshot of your currently saved model routing configuration.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {isLoading ? (
+            <p className="text-sm text-muted-foreground">Loading configuration...</p>
+          ) : (
+            <>
+              <div>
+                <p className="text-sm font-medium">Primary Model</p>
+                <p className="text-sm text-muted-foreground">
+                  {primaryModel.length > 0 ? primaryModel : "No primary model configured"}
+                </p>
+              </div>
+
+              <div>
+                <p className="text-sm font-medium">Fallback Models</p>
+                {fallbackModels.length === 0 ? (
+                  <p className="text-sm text-muted-foreground">No fallback models configured</p>
+                ) : (
+                  <div className="flex flex-wrap gap-2 mt-2">
+                    {fallbackModels.map((model) => (
+                      <Badge key={`current-${model}`} variant="outline">
+                        {model}
+                      </Badge>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Update Agent Config</CardTitle>
+          <CardDescription>
+            Select a primary model and define fallback ordering. Models come from your provider
+            settings.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={(event) => void handleSave(event)} className="space-y-5">
+            <div className="space-y-2">
+              <Label htmlFor="primary-model">Primary Model</Label>
+              <Select
+                value={primaryModel.length > 0 ? primaryModel : "__none__"}
+                onValueChange={(value) => {
+                  setPrimaryModel(value === "__none__" ? "" : value);
+                }}
+                disabled={isLoading || isSaving}
+              >
+                <SelectTrigger id="primary-model">
+                  <SelectValue placeholder="Select a primary model" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">No primary model selected</SelectItem>
+                  {modelSelectOptions.map((model) => (
+                    <SelectItem key={model} value={model}>
+                      {model}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {availableModels.length === 0 ? (
+                <p className="text-xs text-muted-foreground">
+                  No models available yet. Add provider models first in Providers settings.
+                </p>
+              ) : null}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="fallback-models">Fallback Models</Label>
+              <Textarea
+                id="fallback-models"
+                value={fallbackModelsText}
+                onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+                  setFallbackModelsText(event.target.value);
+                }}
+                rows={4}
+                placeholder={"One model per line\nExample: gpt-4.1-mini"}
+                disabled={isLoading || isSaving}
+              />
+              {availableModels.length > 0 ? (
+                <div className="flex flex-wrap gap-2">
+                  {availableModels
+                    .filter((model) => model !== primaryModel)
+                    .map((model) => (
+                      <Button
+                        key={`suggest-${model}`}
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          appendFallbackModel(model);
+                        }}
+                        disabled={fallbackModels.includes(model) || isSaving}
+                      >
+                        {fallbackModels.includes(model) ? `Added: ${model}` : `Add ${model}`}
+                      </Button>
+                    ))}
+                </div>
+              ) : null}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="agent-personality">Personality / SOUL</Label>
+              <Textarea
+                id="agent-personality"
+                value={personality}
+                onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+                  setPersonality(event.target.value);
+                }}
+                rows={8}
+                placeholder="Optional system personality instructions..."
+                disabled={isLoading || isSaving}
+              />
+            </div>
+
+            {error ? (
+              <p className="text-sm text-destructive" role="alert">
+                {error}
+              </p>
+            ) : null}
+
+            {successMessage ? <p className="text-sm text-emerald-600">{successMessage}</p> : null}
+
+            <Button type="submit" disabled={isLoading || isSaving}>
+              {isSaving ? "Saving..." : "Save Agent Config"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/web/src/app/(authenticated)/settings/auth/page.tsx

@@ -0,0 +1,492 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type ChangeEvent,
+  type ReactElement,
+  type SyntheticEvent,
+} from "react";
+import { FleetSettingsNav } from "@/components/settings/FleetSettingsNav";
+import { SettingsAccessDenied } from "@/components/settings/SettingsAccessDenied";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  deleteFleetOidcConfig,
+  fetchFleetOidcConfig,
+  resetBreakglassAdminPassword,
+  updateFleetOidcConfig,
+  type FleetOidcConfig,
+} from "@/lib/api/fleet-settings";
+import { fetchOnboardingStatus } from "@/lib/api/onboarding";
+
+interface OidcFormState {
+  issuerUrl: string;
+  clientId: string;
+  clientSecret: string;
+}
+
+interface BreakglassFormState {
+  username: string;
+  currentPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+const INITIAL_OIDC_FORM: OidcFormState = {
+  issuerUrl: "",
+  clientId: "",
+  clientSecret: "",
+};
+
+const INITIAL_BREAKGLASS_FORM: BreakglassFormState = {
+  username: "",
+  currentPassword: "",
+  newPassword: "",
+  confirmPassword: "",
+};
+
+function getErrorMessage(error: unknown, fallback: string): string {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+
+  return fallback;
+}
+
+function isAdminGuardError(error: unknown): boolean {
+  if (!(error instanceof Error)) {
+    return false;
+  }
+
+  const normalized = error.message.toLowerCase();
+  return (
+    normalized.includes("requires system administrator") ||
+    normalized.includes("forbidden") ||
+    normalized.includes("403")
+  );
+}
+
+export default function AuthSettingsPage(): ReactElement {
+  const [oidcConfig, setOidcConfig] = useState<FleetOidcConfig | null>(null);
+  const [oidcForm, setOidcForm] = useState<OidcFormState>(INITIAL_OIDC_FORM);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isSavingOidc, setIsSavingOidc] = useState<boolean>(false);
+  const [isDeletingOidc, setIsDeletingOidc] = useState<boolean>(false);
+  const [oidcError, setOidcError] = useState<string | null>(null);
+  const [oidcSuccessMessage, setOidcSuccessMessage] = useState<string | null>(null);
+  const [showRemoveOidcDialog, setShowRemoveOidcDialog] = useState<boolean>(false);
+
+  const [breakglassForm, setBreakglassForm] =
+    useState<BreakglassFormState>(INITIAL_BREAKGLASS_FORM);
+  const [breakglassStatus, setBreakglassStatus] = useState<"active" | "inactive">("inactive");
+  const [isResettingPassword, setIsResettingPassword] = useState<boolean>(false);
+  const [breakglassError, setBreakglassError] = useState<string | null>(null);
+  const [breakglassSuccessMessage, setBreakglassSuccessMessage] = useState<string | null>(null);
+
+  const [isAccessDenied, setIsAccessDenied] = useState<boolean>(false);
+
+  const loadAuthSettings = useCallback(async (): Promise<void> => {
+    setIsLoading(true);
+
+    try {
+      const [oidcResponse, onboardingStatus] = await Promise.all([
+        fetchFleetOidcConfig(),
+        fetchOnboardingStatus().catch(() => ({ completed: false })),
+      ]);
+
+      setOidcConfig(oidcResponse);
+      setOidcForm({
+        issuerUrl: oidcResponse.issuerUrl ?? "",
+        clientId: oidcResponse.clientId ?? "",
+        clientSecret: "",
+      });
+      setBreakglassStatus(onboardingStatus.completed ? "active" : "inactive");
+      setIsAccessDenied(false);
+      setOidcError(null);
+    } catch (loadError: unknown) {
+      if (isAdminGuardError(loadError)) {
+        setIsAccessDenied(true);
+        return;
+      }
+
+      setOidcError(getErrorMessage(loadError, "Failed to load authentication settings."));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadAuthSettings();
+  }, [loadAuthSettings]);
+
+  async function handleSaveOidc(event: SyntheticEvent): Promise<void> {
+    event.preventDefault();
+    setOidcError(null);
+    setOidcSuccessMessage(null);
+
+    const issuerUrl = oidcForm.issuerUrl.trim();
+    const clientId = oidcForm.clientId.trim();
+    const clientSecret = oidcForm.clientSecret.trim();
+
+    if (issuerUrl.length === 0 || clientId.length === 0 || clientSecret.length === 0) {
+      setOidcError("Issuer URL, client ID, and client secret are required.");
+      return;
+    }
+
+    try {
+      setIsSavingOidc(true);
+      await updateFleetOidcConfig({
+        issuerUrl,
+        clientId,
+        clientSecret,
+      });
+      setOidcSuccessMessage("OIDC configuration updated.");
+      await loadAuthSettings();
+    } catch (saveError: unknown) {
+      setOidcError(getErrorMessage(saveError, "Failed to update OIDC configuration."));
+    } finally {
+      setIsSavingOidc(false);
+    }
+  }
+
+  async function handleRemoveOidc(): Promise<void> {
+    try {
+      setIsDeletingOidc(true);
+      await deleteFleetOidcConfig();
+      setOidcSuccessMessage("OIDC configuration removed.");
+      setShowRemoveOidcDialog(false);
+      await loadAuthSettings();
+    } catch (deleteError: unknown) {
+      setOidcError(getErrorMessage(deleteError, "Failed to remove OIDC configuration."));
+    } finally {
+      setIsDeletingOidc(false);
+    }
+  }
+
+  async function handleResetBreakglassPassword(event: SyntheticEvent): Promise<void> {
+    event.preventDefault();
+    setBreakglassError(null);
+    setBreakglassSuccessMessage(null);
+
+    const username = breakglassForm.username.trim();
+    const newPassword = breakglassForm.newPassword;
+    const confirmPassword = breakglassForm.confirmPassword;
+
+    if (username.length === 0) {
+      setBreakglassError("Username is required.");
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      setBreakglassError("New password must be at least 8 characters.");
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setBreakglassError("Password confirmation does not match.");
+      return;
+    }
+
+    try {
+      setIsResettingPassword(true);
+      await resetBreakglassAdminPassword({
+        username,
+        newPassword,
+      });
+      setBreakglassSuccessMessage(`Password reset for "${username}".`);
+      setBreakglassStatus("active");
+      setBreakglassForm((previous) => ({
+        ...previous,
+        currentPassword: "",
+        newPassword: "",
+        confirmPassword: "",
+      }));
+    } catch (resetError: unknown) {
+      setBreakglassError(getErrorMessage(resetError, "Failed to reset breakglass password."));
+    } finally {
+      setIsResettingPassword(false);
+    }
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto p-6 space-y-6">
+      <div className="space-y-4">
+        <div>
+          <h1 className="text-3xl font-bold">Authentication Settings</h1>
+          <p className="text-muted-foreground mt-1">
+            Configure OIDC and breakglass admin recovery credentials.
+          </p>
+        </div>
+        <FleetSettingsNav />
+      </div>
+
+      {isLoading ? (
+        <Card>
+          <CardContent className="py-8 text-sm text-muted-foreground">
+            Loading authentication settings...
+          </CardContent>
+        </Card>
+      ) : null}
+
+      {!isLoading && isAccessDenied ? (
+        <SettingsAccessDenied message="Authentication settings require system administrator privileges." />
+      ) : null}
+
+      {!isLoading && !isAccessDenied ? (
+        <>
+          <Card>
+            <CardHeader>
+              <CardTitle>OIDC Provider</CardTitle>
+              <CardDescription>
+                Manage your OpenID Connect issuer and OAuth client credentials.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-5">
+              <div className="rounded-lg border p-4 space-y-2">
+                <div className="flex items-center gap-2">
+                  <p className="font-medium">Configured</p>
+                  <Badge variant={oidcConfig?.configured ? "default" : "secondary"}>
+                    {oidcConfig?.configured ? "Yes" : "No"}
+                  </Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  Issuer URL: {oidcConfig?.issuerUrl ?? "Not configured"}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Client ID: {oidcConfig?.clientId ?? "Not configured"}
+                </p>
+                <p className="text-sm text-muted-foreground">Client secret: hidden</p>
+              </div>
+
+              <form onSubmit={(event) => void handleSaveOidc(event)} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="oidc-issuer-url">Issuer URL</Label>
+                  <Input
+                    id="oidc-issuer-url"
+                    value={oidcForm.issuerUrl}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                      setOidcForm((previous) => ({ ...previous, issuerUrl: event.target.value }));
+                    }}
+                    placeholder="https://issuer.example.com"
+                    disabled={isSavingOidc}
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="oidc-client-id">Client ID</Label>
+                  <Input
+                    id="oidc-client-id"
+                    value={oidcForm.clientId}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                      setOidcForm((previous) => ({ ...previous, clientId: event.target.value }));
+                    }}
+                    placeholder="mosaic-web"
+                    disabled={isSavingOidc}
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="oidc-client-secret">Client Secret</Label>
+                  <Input
+                    id="oidc-client-secret"
+                    type="password"
+                    value={oidcForm.clientSecret}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                      setOidcForm((previous) => ({
+                        ...previous,
+                        clientSecret: event.target.value,
+                      }));
+                    }}
+                    placeholder="Enter new secret"
+                    autoComplete="new-password"
+                    disabled={isSavingOidc}
+                    required
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    The secret is encrypted on save and never returned to the UI.
+                  </p>
+                </div>
+
+                {oidcError ? (
+                  <p className="text-sm text-destructive" role="alert">
+                    {oidcError}
+                  </p>
+                ) : null}
+
+                {oidcSuccessMessage ? (
+                  <p className="text-sm text-emerald-600">{oidcSuccessMessage}</p>
+                ) : null}
+
+                <div className="flex items-center gap-2">
+                  <Button type="submit" disabled={isSavingOidc}>
+                    {isSavingOidc ? "Saving..." : "Save OIDC"}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    onClick={() => {
+                      setShowRemoveOidcDialog(true);
+                    }}
+                    disabled={isDeletingOidc || !oidcConfig?.configured}
+                  >
+                    Remove OIDC
+                  </Button>
+                </div>
+              </form>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Breakglass Admin</CardTitle>
+              <CardDescription>
+                Reset breakglass credentials for emergency local access.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-5">
+              <div className="flex items-center gap-2">
+                <p className="font-medium">Status</p>
+                <Badge variant={breakglassStatus === "active" ? "default" : "secondary"}>
+                  {breakglassStatus}
+                </Badge>
+              </div>
+
+              <form
+                onSubmit={(event) => void handleResetBreakglassPassword(event)}
+                className="space-y-4"
+              >
+                <div className="space-y-2">
+                  <Label htmlFor="breakglass-username">Username</Label>
+                  <Input
+                    id="breakglass-username"
+                    value={breakglassForm.username}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                      setBreakglassForm((previous) => ({
+                        ...previous,
+                        username: event.target.value,
+                      }));
+                    }}
+                    placeholder="admin"
+                    disabled={isResettingPassword}
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="breakglass-current-password">Current Password (optional)</Label>
+                  <Input
+                    id="breakglass-current-password"
+                    type="password"
+                    value={breakglassForm.currentPassword}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                      setBreakglassForm((previous) => ({
+                        ...previous,
+                        currentPassword: event.target.value,
+                      }));
+                    }}
+                    placeholder="Optional operator confirmation"
+                    autoComplete="current-password"
+                    disabled={isResettingPassword}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="breakglass-new-password">New Password</Label>
+                  <Input
+                    id="breakglass-new-password"
+                    type="password"
+                    value={breakglassForm.newPassword}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                      setBreakglassForm((previous) => ({
+                        ...previous,
+                        newPassword: event.target.value,
+                      }));
+                    }}
+                    placeholder="At least 8 characters"
+                    autoComplete="new-password"
+                    disabled={isResettingPassword}
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="breakglass-confirm-password">Confirm Password</Label>
+                  <Input
+                    id="breakglass-confirm-password"
+                    type="password"
+                    value={breakglassForm.confirmPassword}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                      setBreakglassForm((previous) => ({
+                        ...previous,
+                        confirmPassword: event.target.value,
+                      }));
+                    }}
+                    placeholder="Re-enter password"
+                    autoComplete="new-password"
+                    disabled={isResettingPassword}
+                    required
+                  />
+                </div>
+
+                {breakglassError ? (
+                  <p className="text-sm text-destructive" role="alert">
+                    {breakglassError}
+                  </p>
+                ) : null}
+
+                {breakglassSuccessMessage ? (
+                  <p className="text-sm text-emerald-600">{breakglassSuccessMessage}</p>
+                ) : null}
+
+                <Button type="submit" disabled={isResettingPassword}>
+                  {isResettingPassword ? "Resetting..." : "Reset Password"}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+        </>
+      ) : null}
+
+      <AlertDialog
+        open={showRemoveOidcDialog}
+        onOpenChange={(open) => {
+          if (!open && !isDeletingOidc) {
+            setShowRemoveOidcDialog(false);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove OIDC Configuration</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will remove issuer URL, client ID, and client secret from system configuration.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeletingOidc}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleRemoveOidc} disabled={isDeletingOidc}>
+              {isDeletingOidc ? "Removing..." : "Remove OIDC"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

apps/web/src/app/(authenticated)/settings/page.tsx

@@ -200,6 +200,82 @@ const categories: CategoryConfig[] = [
       </svg>
     ),
   },
+  {
+    title: "LLM Providers",
+    description:
+      "Add and manage LLM providers, encrypted API keys, base URLs, and model inventories.",
+    href: "/settings/providers",
+    accent: "var(--ms-blue-400)",
+    iconBg: "rgba(47, 128, 255, 0.12)",
+    icon: (
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <rect x="2.5" y="4" width="15" height="12" rx="2" />
+        <path d="M2.5 8h15" />
+        <circle cx="6" cy="12" r="1" />
+        <circle cx="10" cy="12" r="1" />
+        <circle cx="14" cy="12" r="1" />
+      </svg>
+    ),
+  },
+  {
+    title: "Agent Config",
+    description: "Choose primary and fallback models, plus optional personality/SOUL instructions.",
+    href: "/settings/agent-config",
+    accent: "var(--ms-teal-400)",
+    iconBg: "rgba(20, 184, 166, 0.12)",
+    icon: (
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M4 5h12" />
+        <path d="M4 10h12" />
+        <path d="M4 15h7" />
+        <circle cx="14.5" cy="15" r="1.5" />
+      </svg>
+    ),
+  },
+  {
+    title: "Authentication",
+    description: "Manage OIDC provider settings and breakglass admin password recovery.",
+    href: "/settings/auth",
+    accent: "var(--ms-amber-400)",
+    iconBg: "rgba(245, 158, 11, 0.12)",
+    icon: (
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <rect x="5" y="8" width="10" height="8" rx="1.5" />
+        <path d="M7 8V6a3 3 0 0 1 6 0v2" />
+        <circle cx="10" cy="12" r="1" />
+      </svg>
+    ),
+  },
   {
     title: "Users",
     description: "Invite, manage roles, and deactivate users across your workspaces.",

apps/web/src/app/(authenticated)/settings/providers/page.tsx

@@ -0,0 +1,634 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ChangeEvent,
+  type ReactElement,
+  type SyntheticEvent,
+} from "react";
+import { Settings, Trash2 } from "lucide-react";
+import { FleetSettingsNav } from "@/components/settings/FleetSettingsNav";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  createFleetProvider,
+  deleteFleetProvider,
+  fetchFleetProviders,
+  updateFleetProvider,
+  type CreateFleetProviderRequest,
+  type FleetProvider,
+  type FleetProviderModel,
+  type UpdateFleetProviderRequest,
+} from "@/lib/api/fleet-settings";
+
+interface ProviderTypeOption {
+  value: string;
+  label: string;
+}
+
+interface ProviderFormState {
+  type: string;
+  displayName: string;
+  apiKey: string;
+  baseUrl: string;
+  modelsText: string;
+  isActive: boolean;
+}
+
+const PROVIDER_TYPE_OPTIONS: ProviderTypeOption[] = [
+  { value: "openai", label: "OpenAI Compatible" },
+  { value: "claude", label: "Claude / Anthropic" },
+  { value: "ollama", label: "Ollama" },
+  { value: "zai", label: "Z.ai" },
+  { value: "custom", label: "Custom" },
+];
+
+const INITIAL_FORM: ProviderFormState = {
+  type: "openai",
+  displayName: "",
+  apiKey: "",
+  baseUrl: "",
+  modelsText: "",
+  isActive: true,
+};
+
+function buildProviderName(displayName: string, type: string): string {
+  const slug = displayName
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+/, "")
+    .replace(/-+$/, "");
+
+  const candidate = `${type}-${slug.length > 0 ? slug : "provider"}`;
+  return candidate.slice(0, 100);
+}
+
+function getErrorMessage(error: unknown, fallback: string): string {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+
+  return fallback;
+}
+
+function normalizeProviderModels(models: unknown): FleetProviderModel[] {
+  if (!Array.isArray(models)) {
+    return [];
+  }
+
+  const normalized: FleetProviderModel[] = [];
+
+  models.forEach((entry) => {
+    if (typeof entry === "string" && entry.trim().length > 0) {
+      normalized.push({ id: entry.trim(), name: entry.trim() });
+      return;
+    }
+
+    if (entry && typeof entry === "object") {
+      const record = entry as Record<string, unknown>;
+      const id =
+        typeof record.id === "string"
+          ? record.id.trim()
+          : typeof record.name === "string"
+            ? record.name.trim()
+            : "";
+
+      if (id.length > 0) {
+        const name =
+          typeof record.name === "string" && record.name.trim().length > 0
+            ? record.name.trim()
+            : id;
+        normalized.push({ id, name });
+      }
+    }
+  });
+
+  const seen = new Set<string>();
+  return normalized.filter((model) => {
+    if (seen.has(model.id)) {
+      return false;
+    }
+    seen.add(model.id);
+    return true;
+  });
+}
+
+function modelsToEditorText(models: unknown): string {
+  return normalizeProviderModels(models)
+    .map((model) => model.id)
+    .join("\n");
+}
+
+function parseModelsText(value: string): string[] {
+  const seen = new Set<string>();
+
+  return value
+    .split(/\r?\n/g)
+    .map((segment) => segment.trim())
+    .filter((segment) => segment.length > 0)
+    .filter((segment) => {
+      if (seen.has(segment)) {
+        return false;
+      }
+      seen.add(segment);
+      return true;
+    });
+}
+
+function maskApiKey(value: string): string {
+  if (value.length === 0) {
+    return "Not set";
+  }
+
+  if (value.length <= 7) {
+    return "*".repeat(Math.max(4, value.length));
+  }
+
+  return `${value.slice(0, 3)}****...${value.slice(-4)}`;
+}
+
+export default function ProvidersSettingsPage(): ReactElement {
+  const [providers, setProviders] = useState<FleetProvider[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+  const [editingProvider, setEditingProvider] = useState<FleetProvider | null>(null);
+  const [form, setForm] = useState<ProviderFormState>(INITIAL_FORM);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState<boolean>(false);
+
+  const [deleteTarget, setDeleteTarget] = useState<FleetProvider | null>(null);
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
+
+  const loadProviders = useCallback(async (showLoadingState: boolean): Promise<void> => {
+    if (showLoadingState) {
+      setIsLoading(true);
+    } else {
+      setIsRefreshing(true);
+    }
+
+    try {
+      const data = await fetchFleetProviders();
+      setProviders(data);
+      setError(null);
+    } catch (loadError: unknown) {
+      setError(getErrorMessage(loadError, "Failed to load providers."));
+    } finally {
+      setIsLoading(false);
+      setIsRefreshing(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProviders(true);
+  }, [loadProviders]);
+
+  const apiKeyHint = useMemo(() => {
+    const enteredKey = form.apiKey.trim();
+
+    if (enteredKey.length > 0) {
+      return `Masked preview: ${maskApiKey(enteredKey)}`;
+    }
+
+    if (editingProvider) {
+      return "Stored API key remains encrypted and hidden. Enter a new key only when rotating.";
+    }
+
+    return "API keys are never shown decrypted. Only masked previews are displayed while typing.";
+  }, [editingProvider, form.apiKey]);
+
+  function openCreateDialog(): void {
+    setEditingProvider(null);
+    setForm(INITIAL_FORM);
+    setFormError(null);
+    setIsDialogOpen(true);
+  }
+
+  function openEditDialog(provider: FleetProvider): void {
+    setEditingProvider(provider);
+    setForm({
+      type: provider.type,
+      displayName: provider.displayName,
+      apiKey: "",
+      baseUrl: provider.baseUrl ?? "",
+      modelsText: modelsToEditorText(provider.models),
+      isActive: provider.isActive,
+    });
+    setFormError(null);
+    setIsDialogOpen(true);
+  }
+
+  function closeDialog(): void {
+    if (isSaving) {
+      return;
+    }
+
+    setIsDialogOpen(false);
+    setEditingProvider(null);
+    setForm(INITIAL_FORM);
+    setFormError(null);
+  }
+
+  async function handleSubmit(event: SyntheticEvent): Promise<void> {
+    event.preventDefault();
+    setFormError(null);
+    setSuccessMessage(null);
+
+    const displayName = form.displayName.trim();
+    if (displayName.length === 0) {
+      setFormError("Display name is required.");
+      return;
+    }
+
+    const models = parseModelsText(form.modelsText);
+    const providerModels = models.map((id) => ({ id, name: id }));
+    const baseUrl = form.baseUrl.trim();
+    const apiKey = form.apiKey.trim();
+
+    try {
+      setIsSaving(true);
+
+      if (editingProvider) {
+        const updatePayload: UpdateFleetProviderRequest = {
+          displayName,
+          isActive: form.isActive,
+          models: providerModels,
+        };
+
+        if (baseUrl.length > 0) {
+          updatePayload.baseUrl = baseUrl;
+        }
+
+        if (apiKey.length > 0) {
+          updatePayload.apiKey = apiKey;
+        }
+
+        await updateFleetProvider(editingProvider.id, updatePayload);
+        setSuccessMessage(`Updated provider "${displayName}".`);
+      } else {
+        const createPayload: CreateFleetProviderRequest = {
+          name: buildProviderName(displayName, form.type),
+          displayName,
+          type: form.type,
+        };
+
+        if (baseUrl.length > 0) {
+          createPayload.baseUrl = baseUrl;
+        }
+
+        if (apiKey.length > 0) {
+          createPayload.apiKey = apiKey;
+        }
+
+        if (providerModels.length > 0) {
+          createPayload.models = providerModels;
+        }
+
+        await createFleetProvider(createPayload);
+        setSuccessMessage(`Added provider "${displayName}".`);
+      }
+
+      setIsDialogOpen(false);
+      setEditingProvider(null);
+      setForm(INITIAL_FORM);
+      await loadProviders(false);
+    } catch (saveError: unknown) {
+      setFormError(getErrorMessage(saveError, "Unable to save provider."));
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  async function handleDeleteProvider(): Promise<void> {
+    if (!deleteTarget) {
+      return;
+    }
+
+    try {
+      setIsDeleting(true);
+      await deleteFleetProvider(deleteTarget.id);
+      setSuccessMessage(`Deleted provider "${deleteTarget.displayName}".`);
+      setDeleteTarget(null);
+      await loadProviders(false);
+    } catch (deleteError: unknown) {
+      setError(getErrorMessage(deleteError, "Failed to delete provider."));
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto p-6 space-y-6">
+      <div className="space-y-4">
+        <div>
+          <h1 className="text-3xl font-bold">LLM Providers</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage provider endpoints, model inventories, and encrypted API credentials.
+          </p>
+        </div>
+        <FleetSettingsNav />
+      </div>
+
+      <Card>
+        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <CardTitle>Provider Directory</CardTitle>
+            <CardDescription>
+              API keys are always encrypted in storage and never displayed in plaintext.
+            </CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              onClick={() => {
+                void loadProviders(false);
+              }}
+              disabled={isLoading || isRefreshing}
+            >
+              {isRefreshing ? "Refreshing..." : "Refresh"}
+            </Button>
+            <Button onClick={openCreateDialog}>Add Provider</Button>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {error ? (
+            <p className="text-sm text-destructive" role="alert">
+              {error}
+            </p>
+          ) : null}
+
+          {successMessage ? <p className="text-sm text-emerald-600">{successMessage}</p> : null}
+
+          {isLoading ? (
+            <p className="text-sm text-muted-foreground">Loading providers...</p>
+          ) : providers.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              No providers configured yet. Add one to make models available for agent assignment.
+            </p>
+          ) : (
+            providers.map((provider) => {
+              const providerModels = normalizeProviderModels(provider.models);
+
+              return (
+                <div
+                  key={provider.id}
+                  className="rounded-lg border p-4 flex flex-col gap-4 md:flex-row md:items-start md:justify-between"
+                >
+                  <div className="space-y-2 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <p className="font-semibold truncate">{provider.displayName}</p>
+                      <Badge variant={provider.isActive ? "default" : "secondary"}>
+                        {provider.isActive ? "Active" : "Inactive"}
+                      </Badge>
+                      <Badge variant="outline">{provider.type}</Badge>
+                    </div>
+                    <p className="text-sm text-muted-foreground">Name: {provider.name}</p>
+                    <p className="text-sm text-muted-foreground">
+                      Base URL: {provider.baseUrl ?? "Provider default"}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      API Key: encrypted and hidden (never returned decrypted)
+                    </p>
+                    <div className="flex flex-wrap gap-2">
+                      {providerModels.length === 0 ? (
+                        <Badge variant="secondary">No models configured</Badge>
+                      ) : (
+                        providerModels.map((model) => (
+                          <Badge key={`${provider.id}-${model.id}`} variant="outline">
+                            {model.id}
+                          </Badge>
+                        ))
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        openEditDialog(provider);
+                      }}
+                    >
+                      <Settings className="h-4 w-4 mr-2" />
+                      Edit
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={() => {
+                        setDeleteTarget(provider);
+                      }}
+                    >
+                      <Trash2 className="h-4 w-4 mr-2" />
+                      Delete
+                    </Button>
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </CardContent>
+      </Card>
+
+      <Dialog
+        open={isDialogOpen}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) {
+            closeDialog();
+            return;
+          }
+
+          setIsDialogOpen(true);
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{editingProvider ? "Edit Provider" : "Add Provider"}</DialogTitle>
+            <DialogDescription>
+              Configure connection details and model IDs. API keys are masked in the UI.
+            </DialogDescription>
+          </DialogHeader>
+
+          <form onSubmit={(event) => void handleSubmit(event)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="provider-type">Type</Label>
+              <Select
+                value={form.type}
+                onValueChange={(value) => {
+                  setForm((previous) => ({ ...previous, type: value }));
+                }}
+                disabled={Boolean(editingProvider)}
+              >
+                <SelectTrigger id="provider-type">
+                  <SelectValue placeholder="Select provider type" />
+                </SelectTrigger>
+                <SelectContent>
+                  {PROVIDER_TYPE_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="provider-display-name">Display Name</Label>
+              <Input
+                id="provider-display-name"
+                value={form.displayName}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setForm((previous) => ({ ...previous, displayName: event.target.value }));
+                }}
+                placeholder="OpenAI Primary"
+                maxLength={255}
+                disabled={isSaving}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="provider-api-key">API Key</Label>
+              <Input
+                id="provider-api-key"
+                type="password"
+                value={form.apiKey}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setForm((previous) => ({ ...previous, apiKey: event.target.value }));
+                }}
+                placeholder={editingProvider ? "Enter new key to rotate" : "sk-..."}
+                autoComplete="new-password"
+                disabled={isSaving}
+              />
+              <p className="text-xs text-muted-foreground">{apiKeyHint}</p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="provider-base-url">Base URL</Label>
+              <Input
+                id="provider-base-url"
+                value={form.baseUrl}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setForm((previous) => ({ ...previous, baseUrl: event.target.value }));
+                }}
+                placeholder="https://api.provider.com/v1"
+                disabled={isSaving}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="provider-models">Models</Label>
+              <Textarea
+                id="provider-models"
+                value={form.modelsText}
+                onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+                  setForm((previous) => ({ ...previous, modelsText: event.target.value }));
+                }}
+                placeholder={"One model ID per line\nExample: gpt-4.1-mini"}
+                rows={5}
+                disabled={isSaving}
+              />
+            </div>
+
+            {editingProvider ? (
+              <div className="flex items-center justify-between rounded-md border px-3 py-2">
+                <div>
+                  <Label htmlFor="provider-active">Provider Status</Label>
+                  <p className="text-xs text-muted-foreground">
+                    Disable to keep configuration without using this provider.
+                  </p>
+                </div>
+                <Switch
+                  id="provider-active"
+                  checked={form.isActive}
+                  onCheckedChange={(checked) => {
+                    setForm((previous) => ({ ...previous, isActive: checked }));
+                  }}
+                  disabled={isSaving}
+                />
+              </div>
+            ) : null}
+
+            {formError ? (
+              <p className="text-sm text-destructive" role="alert">
+                {formError}
+              </p>
+            ) : null}
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={closeDialog} disabled={isSaving}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSaving}>
+                {isSaving ? "Saving..." : editingProvider ? "Save Changes" : "Create Provider"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open && !isDeleting) {
+            setDeleteTarget(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Provider</AlertDialogTitle>
+            <AlertDialogDescription>
+              Delete provider "{deleteTarget?.displayName}"? This removes its configuration and
+              model mappings.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteProvider} disabled={isDeleting}>
+              {isDeleting ? "Deleting..." : "Delete Provider"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

apps/web/src/app/onboarding/layout.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export default function OnboardingLayout({ children }: { children: ReactNode }): React.JSX.Element {
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-gradient-to-b from-slate-50 to-white p-4 sm:p-6">
+      <div className="w-full max-w-3xl">{children}</div>
+    </main>
+  );
+}

apps/web/src/app/onboarding/page.tsx

@@ -0,0 +1,36 @@
+import { redirect } from "next/navigation";
+import { OnboardingWizard } from "@/components/onboarding/OnboardingWizard";
+import { API_BASE_URL } from "@/lib/config";
+
+export const dynamic = "force-dynamic";
+
+interface OnboardingStatusResponse {
+  completed: boolean;
+}
+
+async function getOnboardingStatus(): Promise<OnboardingStatusResponse> {
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/onboarding/status`, {
+      method: "GET",
+      cache: "no-store",
+    });
+
+    if (!response.ok) {
+      return { completed: false };
+    }
+
+    return (await response.json()) as OnboardingStatusResponse;
+  } catch {
+    return { completed: false };
+  }
+}
+
+export default async function OnboardingPage(): Promise<React.JSX.Element> {
+  const status = await getOnboardingStatus();
+
+  if (status.completed) {
+    redirect("/");
+  }
+
+  return <OnboardingWizard />;
+}

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

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useAuth } from "@/lib/auth/auth-context";
 import { ThemeToggle } from "./ThemeToggle";
+import { UsageWidget } from "@/components/ui/UsageWidget";
 import { useSidebar } from "./SidebarContext";
 
 /**
@@ -350,6 +351,9 @@ export function AppHeader(): React.JSX.Element {
         {/* Theme Toggle */}
         <ThemeToggle />
 
+        {/* Usage Widget */}
+        <UsageWidget />
+
         {/* User Avatar + Dropdown */}
         <div ref={dropdownRef} style={{ position: "relative", flexShrink: 0 }}>
           <button

apps/web/src/components/onboarding/OnboardingWizard.test.tsx

@@ -0,0 +1,106 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { OnboardingWizard } from "./OnboardingWizard";
+
+const mockPush = vi.fn();
+const mockGetStatus = vi.fn();
+const mockCreateBreakglass = vi.fn();
+const mockConfigureOidc = vi.fn();
+const mockTestProvider = vi.fn();
+const mockAddProvider = vi.fn();
+const mockCompleteOnboarding = vi.fn();
+
+vi.mock("next/navigation", () => ({
+  useRouter: (): { push: typeof mockPush } => ({
+    push: mockPush,
+  }),
+}));
+
+vi.mock("@/lib/api/onboarding", () => ({
+  fetchOnboardingStatus: (): ReturnType<typeof mockGetStatus> => mockGetStatus(),
+  createBreakglassAdmin: (...args: unknown[]): ReturnType<typeof mockCreateBreakglass> =>
+    mockCreateBreakglass(...args),
+  configureOidcProvider: (...args: unknown[]): ReturnType<typeof mockConfigureOidc> =>
+    mockConfigureOidc(...args),
+  testOnboardingProvider: (...args: unknown[]): ReturnType<typeof mockTestProvider> =>
+    mockTestProvider(...args),
+  addOnboardingProvider: (...args: unknown[]): ReturnType<typeof mockAddProvider> =>
+    mockAddProvider(...args),
+  completeOnboarding: (): ReturnType<typeof mockCompleteOnboarding> => mockCompleteOnboarding(),
+}));
+
+describe("OnboardingWizard", () => {
+  beforeEach(() => {
+    mockPush.mockReset();
+    mockGetStatus.mockReset();
+    mockCreateBreakglass.mockReset();
+    mockConfigureOidc.mockReset();
+    mockTestProvider.mockReset();
+    mockAddProvider.mockReset();
+    mockCompleteOnboarding.mockReset();
+
+    mockGetStatus.mockResolvedValue({ completed: false });
+    mockCreateBreakglass.mockResolvedValue({ id: "bg-1", username: "admin" });
+    mockConfigureOidc.mockResolvedValue(undefined);
+    mockTestProvider.mockResolvedValue({ success: true });
+    mockAddProvider.mockResolvedValue({ id: "provider-1" });
+    mockCompleteOnboarding.mockResolvedValue(undefined);
+  });
+
+  it("renders the first step with admin setup fields", async () => {
+    render(<OnboardingWizard />);
+
+    expect(
+      await screen.findByText("Welcome to Mosaic Stack. Let's get you set up.")
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText("Username")).toBeInTheDocument();
+    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+    expect(screen.getByLabelText("Confirm Password")).toBeInTheDocument();
+    expect(screen.getByText("1. Admin")).toBeInTheDocument();
+  });
+
+  it("validates admin form fields before submit", async () => {
+    const user = userEvent.setup();
+    render(<OnboardingWizard />);
+
+    await screen.findByText("Welcome to Mosaic Stack. Let's get you set up.");
+    await user.click(screen.getByRole("button", { name: "Create Admin" }));
+
+    expect(screen.getByText("Username must be at least 3 characters.")).toBeInTheDocument();
+    expect(mockCreateBreakglass).not.toHaveBeenCalled();
+  });
+
+  it("supports happy path with OIDC skipped", async () => {
+    const user = userEvent.setup();
+    render(<OnboardingWizard />);
+
+    await screen.findByText("Welcome to Mosaic Stack. Let's get you set up.");
+
+    await user.type(screen.getByLabelText("Username"), "admin");
+    await user.type(screen.getByLabelText("Password"), "verysecurepassword");
+    await user.type(screen.getByLabelText("Confirm Password"), "verysecurepassword");
+    await user.click(screen.getByRole("button", { name: "Create Admin" }));
+
+    await screen.findByText("Configure OIDC Provider (Optional)");
+    await user.click(screen.getByRole("button", { name: "Skip" }));
+
+    await screen.findByText("Add Your First LLM Provider");
+    await user.type(screen.getByLabelText("Display Name"), "My OpenAI");
+    await user.type(screen.getByLabelText("API Key"), "sk-test-key");
+
+    await user.click(screen.getByRole("button", { name: "Test Connection" }));
+    await screen.findByText("Connection successful.");
+
+    const addProviderButton = screen.getByRole("button", { name: "Add Provider" });
+    expect(addProviderButton).toBeEnabled();
+    await user.click(addProviderButton);
+
+    await screen.findByText("You're all set");
+    await user.click(screen.getByRole("button", { name: "Launch Mosaic Stack" }));
+
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith("/");
+    });
+  });
+});

apps/web/src/components/onboarding/OnboardingWizard.tsx

@@ -0,0 +1,791 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Check, Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  addOnboardingProvider,
+  completeOnboarding,
+  configureOidcProvider,
+  createBreakglassAdmin,
+  fetchOnboardingStatus,
+  testOnboardingProvider,
+} from "@/lib/api/onboarding";
+
+type WizardStep = 1 | 2 | 3 | 4;
+type ProviderType = "openai" | "anthropic" | "zai" | "ollama" | "custom";
+
+interface StepDefinition {
+  id: WizardStep;
+  label: string;
+}
+
+interface ProviderOption {
+  value: ProviderType;
+  label: string;
+}
+
+const STEPS: StepDefinition[] = [
+  { id: 1, label: "1. Admin" },
+  { id: 2, label: "2. Auth" },
+  { id: 3, label: "3. Provider" },
+  { id: 4, label: "4. Launch" },
+];
+
+const PROVIDER_OPTIONS: ProviderOption[] = [
+  { value: "openai", label: "OpenAI" },
+  { value: "anthropic", label: "Anthropic" },
+  { value: "zai", label: "Z.ai" },
+  { value: "ollama", label: "Ollama" },
+  { value: "custom", label: "Custom" },
+];
+
+const CLOUD_PROVIDER_TYPES = new Set<ProviderType>(["openai", "anthropic", "zai"]);
+const BASE_URL_PROVIDER_TYPES = new Set<ProviderType>(["ollama", "custom"]);
+
+function getErrorMessage(error: unknown, fallback: string): string {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+
+  return fallback;
+}
+
+function isValidHttpUrl(value: string): boolean {
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+function mapProviderTypeToApi(type: ProviderType): string {
+  switch (type) {
+    case "anthropic":
+      return "claude";
+    case "zai":
+      return "openai";
+    case "custom":
+      return "openai";
+    default:
+      return type;
+  }
+}
+
+function getProviderDefaultBaseUrl(type: ProviderType): string | undefined {
+  switch (type) {
+    case "ollama":
+      return "http://localhost:11434";
+    case "anthropic":
+      return "https://api.anthropic.com/v1";
+    case "zai":
+      return "https://api.z.ai/v1";
+    default:
+      return undefined;
+  }
+}
+
+function buildProviderName(displayName: string, type: ProviderType): string {
+  const slug = displayName
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+/, "")
+    .replace(/-+$/, "");
+
+  if (slug.length > 0) {
+    return slug;
+  }
+
+  return `${type}-provider`;
+}
+
+function constantTimeEquals(left: string, right: string): boolean {
+  if (left.length !== right.length) {
+    return false;
+  }
+
+  let mismatch = 0;
+  for (let index = 0; index < left.length; index += 1) {
+    mismatch |= left.charCodeAt(index) ^ right.charCodeAt(index);
+  }
+
+  return mismatch === 0;
+}
+
+export function OnboardingWizard(): React.JSX.Element {
+  const router = useRouter();
+
+  const [currentStep, setCurrentStep] = useState<WizardStep>(1);
+  const [isCheckingStatus, setIsCheckingStatus] = useState(true);
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isCreatingAdmin, setIsCreatingAdmin] = useState(false);
+  const [configuredUsername, setConfiguredUsername] = useState<string | null>(null);
+
+  const [issuerUrl, setIssuerUrl] = useState("");
+  const [clientId, setClientId] = useState("");
+  const [clientSecret, setClientSecret] = useState("");
+  const [isConfiguringOidc, setIsConfiguringOidc] = useState(false);
+  const [oidcConfigured, setOidcConfigured] = useState(false);
+
+  const [providerType, setProviderType] = useState<ProviderType>("openai");
+  const [displayName, setDisplayName] = useState("");
+  const [providerApiKey, setProviderApiKey] = useState("");
+  const [providerBaseUrl, setProviderBaseUrl] = useState("");
+  const [isTestingProvider, setIsTestingProvider] = useState(false);
+  const [isAddingProvider, setIsAddingProvider] = useState(false);
+  const [providerConfigured, setProviderConfigured] = useState<{
+    displayName: string;
+    type: ProviderType;
+  } | null>(null);
+  const [providerTestMessage, setProviderTestMessage] = useState<string | null>(null);
+  const [providerTestSucceeded, setProviderTestSucceeded] = useState(false);
+  const [testedProviderSignature, setTestedProviderSignature] = useState<string | null>(null);
+
+  const [isCompleting, setIsCompleting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const requiresApiKey = CLOUD_PROVIDER_TYPES.has(providerType);
+  const requiresBaseUrl = BASE_URL_PROVIDER_TYPES.has(providerType);
+  const apiProviderType = mapProviderTypeToApi(providerType);
+  const resolvedProviderBaseUrl =
+    requiresBaseUrl && providerBaseUrl.trim().length > 0
+      ? providerBaseUrl.trim()
+      : getProviderDefaultBaseUrl(providerType);
+
+  const providerTestPayload = useMemo(() => {
+    const payload: { type: string; baseUrl?: string; apiKey?: string } = {
+      type: apiProviderType,
+    };
+
+    if (resolvedProviderBaseUrl !== undefined && resolvedProviderBaseUrl.length > 0) {
+      payload.baseUrl = resolvedProviderBaseUrl;
+    }
+
+    const trimmedApiKey = providerApiKey.trim();
+    if (requiresApiKey && trimmedApiKey.length > 0) {
+      payload.apiKey = trimmedApiKey;
+    }
+
+    return payload;
+  }, [apiProviderType, providerApiKey, requiresApiKey, resolvedProviderBaseUrl]);
+
+  const providerPayloadSignature = useMemo(
+    () => JSON.stringify(providerTestPayload),
+    [providerTestPayload]
+  );
+
+  const canAddProvider =
+    providerTestSucceeded &&
+    testedProviderSignature === providerPayloadSignature &&
+    !isTestingProvider &&
+    !isAddingProvider;
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadStatus(): Promise<void> {
+      try {
+        const status = await fetchOnboardingStatus();
+        if (!cancelled && status.completed) {
+          router.push("/");
+          return;
+        }
+      } catch {
+        // Status check failure should not block setup UI.
+      } finally {
+        if (!cancelled) {
+          setIsCheckingStatus(false);
+        }
+      }
+    }
+
+    void loadStatus();
+
+    return (): void => {
+      cancelled = true;
+    };
+  }, [router]);
+
+  const resetProviderVerification = (): void => {
+    setProviderTestSucceeded(false);
+    setTestedProviderSignature(null);
+    setProviderTestMessage(null);
+  };
+
+  const validateAdminStep = (): boolean => {
+    if (username.trim().length < 3) {
+      setErrorMessage("Username must be at least 3 characters.");
+      return false;
+    }
+
+    if (password.length < 8) {
+      setErrorMessage("Password must be at least 8 characters.");
+      return false;
+    }
+
+    if (!constantTimeEquals(password, confirmPassword)) {
+      setErrorMessage("Passwords do not match.");
+      return false;
+    }
+
+    return true;
+  };
+
+  const validateOidcStep = (): boolean => {
+    if (issuerUrl.trim().length === 0 || !isValidHttpUrl(issuerUrl.trim())) {
+      setErrorMessage("Issuer URL must be a valid URL.");
+      return false;
+    }
+
+    if (clientId.trim().length === 0) {
+      setErrorMessage("Client ID is required.");
+      return false;
+    }
+
+    if (clientSecret.trim().length === 0) {
+      setErrorMessage("Client secret is required.");
+      return false;
+    }
+
+    return true;
+  };
+
+  const validateProviderStep = (): boolean => {
+    if (displayName.trim().length === 0) {
+      setErrorMessage("Display name is required.");
+      return false;
+    }
+
+    if (requiresApiKey && providerApiKey.trim().length === 0) {
+      setErrorMessage("API key is required for this provider.");
+      return false;
+    }
+
+    if (requiresBaseUrl && providerBaseUrl.trim().length === 0) {
+      setErrorMessage("Base URL is required for this provider.");
+      return false;
+    }
+
+    if (requiresBaseUrl && !isValidHttpUrl(providerBaseUrl.trim())) {
+      setErrorMessage("Base URL must be a valid URL.");
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleCreateAdmin = async (event: React.SyntheticEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault();
+
+    setErrorMessage(null);
+    if (!validateAdminStep()) {
+      return;
+    }
+
+    setIsCreatingAdmin(true);
+    try {
+      const result = await createBreakglassAdmin({
+        username: username.trim(),
+        password,
+      });
+      setConfiguredUsername(result.username);
+      setCurrentStep(2);
+    } catch (error) {
+      setErrorMessage(getErrorMessage(error, "Failed to create admin account."));
+    } finally {
+      setIsCreatingAdmin(false);
+    }
+  };
+
+  const handleConfigureOidc = async (
+    event: React.SyntheticEvent<HTMLFormElement>
+  ): Promise<void> => {
+    event.preventDefault();
+
+    setErrorMessage(null);
+    if (!validateOidcStep()) {
+      return;
+    }
+
+    setIsConfiguringOidc(true);
+    try {
+      await configureOidcProvider({
+        issuerUrl: issuerUrl.trim(),
+        clientId: clientId.trim(),
+        clientSecret: clientSecret.trim(),
+      });
+      setOidcConfigured(true);
+      setCurrentStep(3);
+    } catch (error) {
+      setErrorMessage(getErrorMessage(error, "Failed to configure OIDC provider."));
+    } finally {
+      setIsConfiguringOidc(false);
+    }
+  };
+
+  const handleSkipOidc = (): void => {
+    setErrorMessage(null);
+    setOidcConfigured(false);
+    setCurrentStep(3);
+  };
+
+  const handleTestProvider = async (): Promise<void> => {
+    setErrorMessage(null);
+    setProviderTestMessage(null);
+    if (!validateProviderStep()) {
+      return;
+    }
+
+    setIsTestingProvider(true);
+    try {
+      const response = await testOnboardingProvider(providerTestPayload);
+      if (!response.success) {
+        setProviderTestSucceeded(false);
+        setTestedProviderSignature(null);
+        setErrorMessage(response.error ?? "Connection test failed.");
+        return;
+      }
+
+      setProviderTestSucceeded(true);
+      setTestedProviderSignature(providerPayloadSignature);
+      setProviderTestMessage("Connection successful.");
+    } catch (error) {
+      setProviderTestSucceeded(false);
+      setTestedProviderSignature(null);
+      setErrorMessage(getErrorMessage(error, "Connection test failed."));
+    } finally {
+      setIsTestingProvider(false);
+    }
+  };
+
+  const handleAddProvider = async (): Promise<void> => {
+    setErrorMessage(null);
+    if (!validateProviderStep()) {
+      return;
+    }
+
+    if (!canAddProvider) {
+      setErrorMessage("Test connection successfully before adding the provider.");
+      return;
+    }
+
+    setIsAddingProvider(true);
+    try {
+      const trimmedDisplayName = displayName.trim();
+      const payload: {
+        name: string;
+        displayName: string;
+        type: string;
+        baseUrl?: string;
+        apiKey?: string;
+      } = {
+        name: buildProviderName(trimmedDisplayName, providerType),
+        displayName: trimmedDisplayName,
+        type: apiProviderType,
+      };
+
+      if (resolvedProviderBaseUrl !== undefined && resolvedProviderBaseUrl.length > 0) {
+        payload.baseUrl = resolvedProviderBaseUrl;
+      }
+
+      const trimmedApiKey = providerApiKey.trim();
+      if (requiresApiKey && trimmedApiKey.length > 0) {
+        payload.apiKey = trimmedApiKey;
+      }
+
+      await addOnboardingProvider(payload);
+
+      setProviderConfigured({ displayName: trimmedDisplayName, type: providerType });
+      setCurrentStep(4);
+    } catch (error) {
+      setErrorMessage(getErrorMessage(error, "Failed to add provider."));
+    } finally {
+      setIsAddingProvider(false);
+    }
+  };
+
+  const handleCompleteOnboarding = async (): Promise<void> => {
+    setErrorMessage(null);
+    setIsCompleting(true);
+    try {
+      await completeOnboarding();
+      router.push("/");
+    } catch (error) {
+      setErrorMessage(getErrorMessage(error, "Failed to complete onboarding."));
+    } finally {
+      setIsCompleting(false);
+    }
+  };
+
+  const providerLabel =
+    PROVIDER_OPTIONS.find((option) => option.value === providerConfigured?.type)?.label ??
+    providerConfigured?.type ??
+    "Unknown";
+
+  return (
+    <Card className="mx-auto w-full max-w-2xl shadow-sm">
+      <CardHeader>
+        <CardTitle>First-boot onboarding</CardTitle>
+        <CardDescription>Set up your admin access, auth, and first provider.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+          {STEPS.map((step) => {
+            const isActive = currentStep === step.id;
+            const isComplete = currentStep > step.id;
+            const badgeClass = isComplete
+              ? "bg-emerald-100 text-emerald-700 border-emerald-200"
+              : isActive
+                ? "bg-blue-100 text-blue-700 border-blue-200"
+                : "bg-gray-100 text-gray-500 border-gray-200";
+
+            return (
+              <div
+                key={step.id}
+                className={`rounded-md border px-3 py-2 text-sm ${badgeClass}`}
+                aria-current={isActive ? "step" : undefined}
+              >
+                <div className="flex items-center gap-2 font-medium">
+                  <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-current text-xs">
+                    {isComplete ? <Check className="h-3.5 w-3.5" aria-hidden="true" /> : step.id}
+                  </span>
+                  <span>{step.label}</span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {isCheckingStatus ? (
+          <div className="flex items-center gap-2 text-sm text-gray-600">
+            <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+            <span>Checking onboarding status...</span>
+          </div>
+        ) : (
+          <>
+            {currentStep === 1 && (
+              <form onSubmit={handleCreateAdmin} className="space-y-4" noValidate>
+                <div className="space-y-1">
+                  <h2 className="text-xl font-semibold">
+                    Welcome to Mosaic Stack. Let's get you set up.
+                  </h2>
+                  <p className="text-sm text-gray-600">
+                    Create a breakglass admin account for emergency access.
+                  </p>
+                </div>
+
+                <div className="grid gap-2">
+                  <Label htmlFor="onboarding-username">Username</Label>
+                  <Input
+                    id="onboarding-username"
+                    value={username}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                      setUsername(event.target.value);
+                    }}
+                    disabled={isCreatingAdmin}
+                    autoComplete="username"
+                  />
+                </div>
+
+                <div className="grid gap-2">
+                  <Label htmlFor="onboarding-password">Password</Label>
+                  <Input
+                    id="onboarding-password"
+                    type="password"
+                    value={password}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                      setPassword(event.target.value);
+                    }}
+                    disabled={isCreatingAdmin}
+                    autoComplete="new-password"
+                  />
+                </div>
+
+                <div className="grid gap-2">
+                  <Label htmlFor="onboarding-confirm-password">Confirm Password</Label>
+                  <Input
+                    id="onboarding-confirm-password"
+                    type="password"
+                    value={confirmPassword}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                      setConfirmPassword(event.target.value);
+                    }}
+                    disabled={isCreatingAdmin}
+                    autoComplete="new-password"
+                  />
+                </div>
+
+                <Button type="submit" disabled={isCreatingAdmin}>
+                  {isCreatingAdmin && (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+                  )}
+                  <span>Create Admin</span>
+                </Button>
+              </form>
+            )}
+
+            {currentStep === 2 && (
+              <form onSubmit={handleConfigureOidc} className="space-y-4" noValidate>
+                <div className="space-y-1">
+                  <h2 className="text-xl font-semibold">Configure OIDC Provider (Optional)</h2>
+                  <p className="text-sm text-gray-600">
+                    You can skip this for now and continue with breakglass-only authentication.
+                  </p>
+                </div>
+
+                <div className="grid gap-2">
+                  <Label htmlFor="onboarding-issuer-url">OIDC Issuer URL</Label>
+                  <Input
+                    id="onboarding-issuer-url"
+                    value={issuerUrl}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                      setIssuerUrl(event.target.value);
+                    }}
+                    disabled={isConfiguringOidc}
+                    placeholder="https://auth.example.com/application/o/mosaic/"
+                    autoComplete="url"
+                  />
+                </div>
+
+                <div className="grid gap-2">
+                  <Label htmlFor="onboarding-client-id">Client ID</Label>
+                  <Input
+                    id="onboarding-client-id"
+                    value={clientId}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                      setClientId(event.target.value);
+                    }}
+                    disabled={isConfiguringOidc}
+                  />
+                </div>
+
+                <div className="grid gap-2">
+                  <Label htmlFor="onboarding-client-secret">Client Secret</Label>
+                  <Input
+                    id="onboarding-client-secret"
+                    type="password"
+                    value={clientSecret}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                      setClientSecret(event.target.value);
+                    }}
+                    disabled={isConfiguringOidc}
+                    autoComplete="off"
+                  />
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                  <Button type="submit" disabled={isConfiguringOidc}>
+                    {isConfiguringOidc && (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+                    )}
+                    <span>Configure OIDC</span>
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleSkipOidc}
+                    disabled={isConfiguringOidc}
+                  >
+                    Skip
+                  </Button>
+                </div>
+              </form>
+            )}
+
+            {currentStep === 3 && (
+              <div className="space-y-4">
+                <div className="space-y-1">
+                  <h2 className="text-xl font-semibold">Add Your First LLM Provider</h2>
+                  <p className="text-sm text-gray-600">
+                    Test the connection before adding your provider.
+                  </p>
+                </div>
+
+                <div className="grid gap-2">
+                  <Label htmlFor="onboarding-provider-type">Provider Type</Label>
+                  <Select
+                    value={providerType}
+                    onValueChange={(value) => {
+                      const nextType = value as ProviderType;
+                      setProviderType(nextType);
+                      setProviderApiKey("");
+                      setProviderBaseUrl(
+                        BASE_URL_PROVIDER_TYPES.has(nextType)
+                          ? (getProviderDefaultBaseUrl(nextType) ?? "")
+                          : ""
+                      );
+                      resetProviderVerification();
+                      setErrorMessage(null);
+                    }}
+                    disabled={isTestingProvider || isAddingProvider}
+                  >
+                    <SelectTrigger id="onboarding-provider-type">
+                      <SelectValue placeholder="Select provider type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {PROVIDER_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="grid gap-2">
+                  <Label htmlFor="onboarding-provider-display-name">Display Name</Label>
+                  <Input
+                    id="onboarding-provider-display-name"
+                    value={displayName}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                      setDisplayName(event.target.value);
+                      resetProviderVerification();
+                      setErrorMessage(null);
+                    }}
+                    disabled={isTestingProvider || isAddingProvider}
+                    placeholder="My OpenAI Provider"
+                  />
+                </div>
+
+                {requiresApiKey && (
+                  <div className="grid gap-2">
+                    <Label htmlFor="onboarding-provider-api-key">API Key</Label>
+                    <Input
+                      id="onboarding-provider-api-key"
+                      type="password"
+                      value={providerApiKey}
+                      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                        setProviderApiKey(event.target.value);
+                        resetProviderVerification();
+                        setErrorMessage(null);
+                      }}
+                      disabled={isTestingProvider || isAddingProvider}
+                      autoComplete="off"
+                    />
+                  </div>
+                )}
+
+                {requiresBaseUrl && (
+                  <div className="grid gap-2">
+                    <Label htmlFor="onboarding-provider-base-url">Base URL</Label>
+                    <Input
+                      id="onboarding-provider-base-url"
+                      value={providerBaseUrl}
+                      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                        setProviderBaseUrl(event.target.value);
+                        resetProviderVerification();
+                        setErrorMessage(null);
+                      }}
+                      disabled={isTestingProvider || isAddingProvider}
+                      placeholder="http://localhost:11434"
+                      autoComplete="url"
+                    />
+                  </div>
+                )}
+
+                {providerTestMessage && (
+                  <p className="text-sm text-emerald-700" role="status">
+                    {providerTestMessage}
+                  </p>
+                )}
+
+                <div className="flex flex-wrap gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      void handleTestProvider();
+                    }}
+                    disabled={isTestingProvider || isAddingProvider}
+                  >
+                    {isTestingProvider && (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+                    )}
+                    <span>Test Connection</span>
+                  </Button>
+                  <Button
+                    type="button"
+                    onClick={() => {
+                      void handleAddProvider();
+                    }}
+                    disabled={!canAddProvider}
+                  >
+                    {isAddingProvider && (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+                    )}
+                    <span>Add Provider</span>
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {currentStep === 4 && (
+              <div className="space-y-4">
+                <div className="space-y-1">
+                  <h2 className="text-xl font-semibold">You're all set</h2>
+                  <p className="text-sm text-gray-600">
+                    Review the setup summary and launch Mosaic Stack.
+                  </p>
+                </div>
+
+                <div className="rounded-md border bg-gray-50 p-4">
+                  <ul className="space-y-2 text-sm">
+                    <li>
+                      <span className="font-medium">Admin:</span>{" "}
+                      {configuredUsername ? `${configuredUsername} configured` : "Not configured"}
+                    </li>
+                    <li>
+                      <span className="font-medium">OIDC:</span>{" "}
+                      {oidcConfigured ? "Configured" : "Skipped for now"}
+                    </li>
+                    <li>
+                      <span className="font-medium">LLM Provider:</span>{" "}
+                      {providerConfigured
+                        ? `${providerConfigured.displayName} (${providerLabel})`
+                        : "Not configured"}
+                    </li>
+                  </ul>
+                </div>
+
+                <Button
+                  type="button"
+                  onClick={() => void handleCompleteOnboarding()}
+                  disabled={isCompleting}
+                >
+                  {isCompleting && (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+                  )}
+                  <span>Launch Mosaic Stack</span>
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+
+        {errorMessage && (
+          <p className="text-sm text-red-600" role="alert">
+            {errorMessage}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default OnboardingWizard;

apps/web/src/components/settings/FleetSettingsNav.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface FleetSettingsLink {
+  href: string;
+  label: string;
+}
+
+const FLEET_SETTINGS_LINKS: FleetSettingsLink[] = [
+  { href: "/settings/providers", label: "Providers" },
+  { href: "/settings/agent-config", label: "Agent Config" },
+  { href: "/settings/auth", label: "Authentication" },
+];
+
+export function FleetSettingsNav(): React.JSX.Element {
+  const pathname = usePathname();
+
+  return (
+    <Card>
+      <CardContent className="px-4 py-3 flex flex-wrap items-center gap-2">
+        <Link
+          href="/settings"
+          className="inline-flex h-9 items-center rounded-md px-3 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+        >
+          All Settings
+        </Link>
+
+        {FLEET_SETTINGS_LINKS.map((link) => {
+          const isActive = pathname === link.href;
+
+          return (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={`inline-flex h-9 items-center rounded-md px-3 text-sm font-medium transition-colors ${
+                isActive
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted"
+              }`}
+            >
+              {link.label}
+            </Link>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/components/ui/UsageWidget.tsx

@@ -0,0 +1,337 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { fetchUsageSummary, type UsageSummary } from "@/lib/api/telemetry";
+
+// ─── Types ───────────────────────────────────────────────────────────
+
+interface UsageTier {
+  name: string;
+  tokens: number;
+  limit: number;
+  percentage: number;
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────
+
+function getUsageColor(percentage: number): string {
+  if (percentage < 60) return "var(--success)";
+  if (percentage < 80) return "var(--warn)";
+  return "var(--danger)";
+}
+
+function formatTokens(value: number): string {
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
+  return value.toFixed(0);
+}
+
+// ─── Component ───────────────────────────────────────────────────────
+
+export function UsageWidget(): React.JSX.Element {
+  const [summary, setSummary] = useState<UsageSummary | null>(null);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const tiers: UsageTier[] = summary
+    ? [
+        {
+          name: "Session",
+          tokens: summary.totalTokens,
+          limit: 100_000,
+          percentage: (summary.totalTokens / 100_000) * 100,
+        },
+        {
+          name: "Daily",
+          tokens: summary.totalTokens,
+          limit: 500_000,
+          percentage: (summary.totalTokens / 500_000) * 100,
+        },
+        {
+          name: "Monthly",
+          tokens: summary.totalTokens,
+          limit: 2_000_000,
+          percentage: (summary.totalTokens / 2_000_000) * 100,
+        },
+      ]
+    : [];
+
+  const currentTier = tiers[0];
+  const usageColor = currentTier ? getUsageColor(currentTier.percentage) : "var(--muted)";
+
+  const loadSummary = useCallback(async () => {
+    try {
+      const data = await fetchUsageSummary("30d");
+      setSummary(data);
+    } catch (err) {
+      console.error("Failed to load usage summary:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadSummary();
+  }, [loadSummary]);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent): void {
+      if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
+        setPopoverOpen(false);
+      }
+    }
+
+    if (!popoverOpen) {
+      return;
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return (): void => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [popoverOpen]);
+
+  const pct = currentTier ? Math.min(currentTier.percentage, 100) : 0;
+
+  return (
+    <div ref={popoverRef} style={{ position: "relative" }}>
+      <button
+        onClick={(): void => {
+          setPopoverOpen((prev) => !prev);
+        }}
+        aria-label="Usage widget"
+        aria-expanded={popoverOpen}
+        aria-haspopup="true"
+        className="hidden lg:flex items-center"
+        style={{
+          gap: 6,
+          padding: "5px 10px",
+          borderRadius: 6,
+          background: "var(--surface)",
+          border: `1px solid ${popoverOpen ? usageColor : "var(--border)"}`,
+          fontSize: "0.75rem",
+          fontFamily: "var(--mono)",
+          color: "var(--text-2)",
+          cursor: "pointer",
+          transition: "border-color 0.15s, color 0.15s",
+          flexShrink: 0,
+        }}
+        onMouseEnter={(e): void => {
+          (e.currentTarget as HTMLButtonElement).style.borderColor = usageColor;
+          (e.currentTarget as HTMLButtonElement).style.color = "var(--text)";
+        }}
+        onMouseLeave={(e): void => {
+          if (!popoverOpen) {
+            (e.currentTarget as HTMLButtonElement).style.borderColor = "var(--border)";
+            (e.currentTarget as HTMLButtonElement).style.color = "var(--text-2)";
+          }
+        }}
+      >
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ color: usageColor, flexShrink: 0 }}
+          aria-hidden="true"
+        >
+          <path d="M9 1L3 9h5l-1 6 6-8H8l1-6z" />
+        </svg>
+        <span style={{ fontWeight: 500, color: "var(--text-2)" }}>
+          {isLoading ? "..." : summary ? formatTokens(summary.totalTokens) : "0"}
+        </span>
+        {!isLoading && currentTier && (
+          <div
+            style={{
+              width: 24,
+              height: 4,
+              borderRadius: 2,
+              background: "var(--bg-mid)",
+              overflow: "hidden",
+              flexShrink: 0,
+            }}
+            aria-hidden="true"
+          >
+            <div
+              style={{
+                width: `${String(pct)}%`,
+                height: "100%",
+                background: usageColor,
+                borderRadius: 2,
+                transition: "width 0.3s ease-out",
+              }}
+            />
+          </div>
+        )}
+        {!isLoading && currentTier && (
+          <span style={{ fontWeight: 600, color: usageColor, minWidth: 32, textAlign: "right" }}>
+            {Math.round(currentTier.percentage)}%
+          </span>
+        )}
+      </button>
+
+      {popoverOpen && (
+        <div
+          role="dialog"
+          aria-label="Usage details"
+          style={{
+            position: "absolute",
+            top: "calc(100% + 8px)",
+            right: 0,
+            width: 280,
+            background: "var(--surface)",
+            border: "1px solid var(--border)",
+            borderRadius: 8,
+            padding: 12,
+            boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
+            zIndex: 200,
+          }}
+        >
+          <div
+            style={{
+              fontSize: "0.83rem",
+              fontWeight: 600,
+              color: "var(--text)",
+              marginBottom: 12,
+              paddingBottom: 8,
+              borderBottom: "1px solid var(--border)",
+            }}
+          >
+            Token Usage
+          </div>
+
+          {isLoading ? (
+            <div
+              style={{
+                textAlign: "center",
+                padding: "20px 0",
+                color: "var(--muted)",
+                fontSize: "0.75rem",
+              }}
+            >
+              Loading usage data…
+            </div>
+          ) : summary ? (
+            <>
+              <div style={{ marginBottom: 12, display: "flex", flexDirection: "column", gap: 8 }}>
+                <div
+                  style={{ display: "flex", justifyContent: "space-between", fontSize: "0.75rem" }}
+                >
+                  <span style={{ color: "var(--muted)" }}>Total Tokens</span>
+                  <span style={{ color: "var(--text)", fontFamily: "var(--mono)" }}>
+                    {formatTokens(summary.totalTokens)}
+                  </span>
+                </div>
+                <div
+                  style={{ display: "flex", justifyContent: "space-between", fontSize: "0.75rem" }}
+                >
+                  <span style={{ color: "var(--muted)" }}>Estimated Cost</span>
+                  <span style={{ color: "var(--text)", fontFamily: "var(--mono)" }}>
+                    ${summary.totalCost.toFixed(2)}
+                  </span>
+                </div>
+                <div
+                  style={{ display: "flex", justifyContent: "space-between", fontSize: "0.75rem" }}
+                >
+                  <span style={{ color: "var(--muted)" }}>Tasks</span>
+                  <span style={{ color: "var(--text)", fontFamily: "var(--mono)" }}>
+                    {summary.taskCount}
+                  </span>
+                </div>
+              </div>
+
+              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+                {tiers.map((tier) => {
+                  const tierPct = Math.min(tier.percentage, 100);
+                  return (
+                    <div key={tier.name}>
+                      <div
+                        style={{
+                          display: "flex",
+                          justifyContent: "space-between",
+                          fontSize: "0.75rem",
+                          marginBottom: 4,
+                        }}
+                      >
+                        <span style={{ color: "var(--text-2)" }}>{tier.name}</span>
+                        <span
+                          style={{
+                            color: getUsageColor(tier.percentage),
+                            fontFamily: "var(--mono)",
+                            fontWeight: 500,
+                          }}
+                        >
+                          {formatTokens(tier.tokens)} / {formatTokens(tier.limit)}
+                        </span>
+                      </div>
+                      <div
+                        style={{
+                          width: "100%",
+                          height: 6,
+                          borderRadius: 3,
+                          background: "var(--bg-mid)",
+                          overflow: "hidden",
+                        }}
+                      >
+                        <div
+                          style={{
+                            width: `${String(tierPct)}%`,
+                            height: "100%",
+                            background: getUsageColor(tier.percentage),
+                            borderRadius: 3,
+                            transition: "width 0.3s ease-out",
+                          }}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+
+              <a
+                href="/usage"
+                onClick={(): void => {
+                  setPopoverOpen(false);
+                }}
+                style={{
+                  display: "block",
+                  marginTop: 12,
+                  paddingTop: 8,
+                  borderTop: "1px solid var(--border)",
+                  fontSize: "0.75rem",
+                  color: "var(--primary)",
+                  textDecoration: "none",
+                  textAlign: "center",
+                }}
+                onMouseEnter={(e): void => {
+                  (e.currentTarget as HTMLAnchorElement).style.textDecoration = "underline";
+                }}
+                onMouseLeave={(e): void => {
+                  (e.currentTarget as HTMLAnchorElement).style.textDecoration = "none";
+                }}
+              >
+                View detailed usage →
+              </a>
+            </>
+          ) : (
+            <div
+              style={{
+                textAlign: "center",
+                padding: "20px 0",
+                color: "var(--muted)",
+                fontSize: "0.75rem",
+              }}
+            >
+              No usage data available
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/lib/api/activity.ts

@@ -0,0 +1,139 @@
+/**
+ * Activity API Client
+ * Handles activity-log-related API requests
+ */
+
+import { apiGet, type ApiResponse } from "./client";
+
+/**
+ * Activity action enum (matches backend ActivityAction)
+ */
+export enum ActivityAction {
+  CREATED = "CREATED",
+  UPDATED = "UPDATED",
+  DELETED = "DELETED",
+  COMPLETED = "COMPLETED",
+  ASSIGNED = "ASSIGNED",
+}
+
+/**
+ * Entity type enum (matches backend EntityType)
+ */
+export enum EntityType {
+  TASK = "TASK",
+  EVENT = "EVENT",
+  PROJECT = "PROJECT",
+  WORKSPACE = "WORKSPACE",
+  USER = "USER",
+  DOMAIN = "DOMAIN",
+  IDEA = "IDEA",
+}
+
+/**
+ * Activity log response interface (matches Prisma ActivityLog model)
+ */
+export interface ActivityLog {
+  id: string;
+  workspaceId: string;
+  userId: string;
+  action: ActivityAction;
+  entityType: EntityType;
+  entityId: string;
+  details: Record<string, unknown> | null;
+  ipAddress: string | null;
+  userAgent: string | null;
+  createdAt: string;
+  user?: {
+    id: string;
+    name: string | null;
+    email: string;
+  };
+}
+
+/**
+ * Filters for querying activity logs
+ */
+export interface ActivityLogFilters {
+  workspaceId?: string;
+  userId?: string;
+  action?: ActivityAction;
+  entityType?: EntityType;
+  entityId?: string;
+  startDate?: string;
+  endDate?: string;
+  page?: number;
+  limit?: number;
+}
+
+/**
+ * Paginated activity logs response
+ */
+export interface PaginatedActivityLogs {
+  data: ActivityLog[];
+  meta: {
+    total: number;
+    page: number;
+    limit: number;
+    totalPages: number;
+  };
+}
+
+/**
+ * Fetch activity logs with optional filters
+ */
+export async function fetchActivityLogs(filters?: ActivityLogFilters): Promise<ActivityLog[]> {
+  const params = new URLSearchParams();
+
+  if (filters?.userId) {
+    params.append("userId", filters.userId);
+  }
+  if (filters?.action) {
+    params.append("action", filters.action);
+  }
+  if (filters?.entityType) {
+    params.append("entityType", filters.entityType);
+  }
+  if (filters?.entityId) {
+    params.append("entityId", filters.entityId);
+  }
+  if (filters?.startDate) {
+    params.append("startDate", filters.startDate);
+  }
+  if (filters?.endDate) {
+    params.append("endDate", filters.endDate);
+  }
+  if (filters?.page !== undefined) {
+    params.append("page", String(filters.page));
+  }
+  if (filters?.limit !== undefined) {
+    params.append("limit", String(filters.limit));
+  }
+
+  const queryString = params.toString();
+  const endpoint = queryString ? `/api/activity?${queryString}` : "/api/activity";
+
+  const response = await apiGet<PaginatedActivityLogs>(endpoint, filters?.workspaceId);
+  return response.data;
+}
+
+/**
+ * Fetch a single activity log by ID
+ */
+export async function fetchActivityLog(id: string, workspaceId?: string): Promise<ActivityLog> {
+  return apiGet<ActivityLog>(`/api/activity/${id}`, workspaceId);
+}
+
+/**
+ * Fetch audit trail for a specific entity
+ */
+export async function fetchAuditTrail(
+  entityType: EntityType,
+  entityId: string,
+  workspaceId?: string
+): Promise<ActivityLog[]> {
+  const response = await apiGet<ApiResponse<ActivityLog[]>>(
+    `/api/activity/audit/${entityType}/${entityId}`,
+    workspaceId
+  );
+  return response.data;
+}

apps/web/src/lib/api/chat.ts

@@ -1,6 +1,6 @@
 /**
  * Chat API client
- * Handles LLM chat interactions via /api/llm/chat
+ * Handles LLM chat interactions via /api/chat/stream (streaming) and /api/llm/chat (fallback)
  */
 
 import { apiPost, fetchCsrfToken, getCsrfToken } from "./client";
@@ -33,9 +33,28 @@ export interface ChatResponse {
 }
 
 /**
- * Parsed SSE data chunk from the LLM stream
+ * Parsed SSE data chunk from OpenAI-compatible stream
  */
-interface SseChunk {
+interface OpenAiSseChunk {
+  id?: string;
+  object?: string;
+  created?: number;
+  model?: string;
+  choices?: {
+    index: number;
+    delta?: {
+      role?: string;
+      content?: string;
+    };
+    finish_reason?: string | null;
+  }[];
+  error?: string;
+}
+
+/**
+ * Parsed SSE data chunk from legacy /api/llm/chat stream
+ */
+interface LegacySseChunk {
   error?: string;
   message?: {
     role: string;
@@ -46,7 +65,17 @@ interface SseChunk {
 }
 
 /**
- * Send a chat message to the LLM
+ * Parsed SSE data chunk with simple token format
+ */
+interface SimpleTokenChunk {
+  token?: string;
+  done?: boolean;
+  error?: string;
+}
+
+/**
+ * Send a chat message to the LLM (non-streaming fallback)
+ * Uses /api/llm/chat endpoint which supports both streaming and non-streaming
  */
 export async function sendChatMessage(request: ChatRequest): Promise<ChatResponse> {
   return apiPost<ChatResponse>("/api/llm/chat", request);
@@ -66,11 +95,20 @@ async function ensureCsrfTokenForStream(): Promise<string> {
 /**
  * Stream a chat message from the LLM using SSE over fetch.
  *
- * The backend accepts stream: true in the request body and responds with
- * Server-Sent Events:
- *   data: {"message":{"content":"token"},...}\n\n  for each token
- *   data: [DONE]\n\n  when the stream is complete
- *   data: {"error":"message"}\n\n  on error
+ * Uses /api/chat/stream endpoint which proxies to OpenClaw.
+ * The backend responds with Server-Sent Events in one of these formats:
+ *
+ * OpenAI-compatible format:
+ *   data: {"choices":[{"delta":{"content":"token"}}],...}\n\n
+ *   data: [DONE]\n\n
+ *
+ * Legacy format (from /api/llm/chat):
+ *   data: {"message":{"content":"token"},...}\n\n
+ *   data: [DONE]\n\n
+ *
+ * Simple token format:
+ *   data: {"token":"..."}\n\n
+ *   data: {"done":true}\n\n
  *
  * @param request - Chat request (stream field will be forced to true)
  * @param onChunk - Called with each token string as it arrives
@@ -89,14 +127,14 @@ export function streamChatMessage(
     try {
       const csrfToken = await ensureCsrfTokenForStream();
 
-      const response = await fetch(`${API_BASE_URL}/api/llm/chat`, {
+      const response = await fetch(`${API_BASE_URL}/api/chat/stream`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
           "X-CSRF-Token": csrfToken,
         },
         credentials: "include",
-        body: JSON.stringify({ ...request, stream: true }),
+        body: JSON.stringify({ messages: request.messages, stream: true }),
         signal: signal ?? null,
       });
 
@@ -132,6 +170,25 @@ export function streamChatMessage(
           const trimmed = part.trim();
           if (!trimmed) continue;
 
+          // Handle event: error format
+          const eventMatch = /^event:\s*(\S+)\n/i.exec(trimmed);
+          const dataMatch = /^data:\s*(.+)$/im.exec(trimmed);
+
+          if (eventMatch?.[1] === "error" && dataMatch?.[1]) {
+            try {
+              const errorData = JSON.parse(dataMatch[1].trim()) as {
+                error?: string;
+              };
+              throw new Error(errorData.error ?? "Stream error occurred");
+            } catch (parseErr) {
+              if (parseErr instanceof SyntaxError) {
+                throw new Error("Stream error occurred");
+              }
+              throw parseErr;
+            }
+          }
+
+          // Standard SSE format: data: {...}
           for (const line of trimmed.split("\n")) {
             if (!line.startsWith("data: ")) continue;
 
@@ -143,14 +200,39 @@ export function streamChatMessage(
             }
 
             try {
-              const parsed = JSON.parse(data) as SseChunk;
+              const parsed: unknown = JSON.parse(data);
 
-              if (parsed.error) {
-                throw new Error(parsed.error);
+              // Handle OpenAI format (from /api/chat/stream via OpenClaw)
+              const openAiChunk = parsed as OpenAiSseChunk;
+              if (openAiChunk.choices?.[0]?.delta?.content) {
+                onChunk(openAiChunk.choices[0].delta.content);
+                continue;
               }
 
-              if (parsed.message?.content) {
-                onChunk(parsed.message.content);
+              // Handle legacy format (from /api/llm/chat)
+              const legacyChunk = parsed as LegacySseChunk;
+              if (legacyChunk.message?.content) {
+                onChunk(legacyChunk.message.content);
+                continue;
+              }
+
+              // Handle simple token format
+              const simpleChunk = parsed as SimpleTokenChunk;
+              if (simpleChunk.token) {
+                onChunk(simpleChunk.token);
+                continue;
+              }
+
+              // Handle done flag in simple format
+              if (simpleChunk.done === true) {
+                onComplete();
+                return;
+              }
+
+              // Handle error in any format
+              const error = openAiChunk.error ?? legacyChunk.error ?? simpleChunk.error;
+              if (error) {
+                throw new Error(error);
               }
             } catch (parseErr) {
               if (parseErr instanceof SyntaxError) {
@@ -162,7 +244,7 @@ export function streamChatMessage(
         }
       }
 
-      // Natural end of stream without [DONE]
+      // Natural end of stream without [DONE] or done flag
       onComplete();
     } catch (err: unknown) {
       if (err instanceof DOMException && err.name === "AbortError") {

apps/web/src/lib/api/fleet-settings.test.ts

@@ -0,0 +1,172 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import * as client from "./client";
+import {
+  createFleetProvider,
+  deleteFleetOidcConfig,
+  deleteFleetProvider,
+  fetchFleetAgentConfig,
+  fetchFleetOidcConfig,
+  fetchFleetProviders,
+  resetBreakglassAdminPassword,
+  updateFleetAgentConfig,
+  updateFleetOidcConfig,
+  updateFleetProvider,
+} from "./fleet-settings";
+
+vi.mock("./client");
+
+beforeEach((): void => {
+  vi.clearAllMocks();
+});
+
+describe("fetchFleetProviders", (): void => {
+  it("calls providers list endpoint", async (): Promise<void> => {
+    vi.mocked(client.apiGet).mockResolvedValueOnce([] as never);
+
+    await fetchFleetProviders();
+
+    expect(client.apiGet).toHaveBeenCalledWith("/api/fleet-settings/providers");
+  });
+});
+
+describe("createFleetProvider", (): void => {
+  it("posts provider payload", async (): Promise<void> => {
+    vi.mocked(client.apiPost).mockResolvedValueOnce({ id: "provider-1" } as never);
+
+    await createFleetProvider({
+      name: "openai-main",
+      displayName: "OpenAI Main",
+      type: "openai",
+      baseUrl: "https://api.openai.com/v1",
+      apiKey: "sk-test",
+      models: [
+        { id: "gpt-4.1-mini", name: "gpt-4.1-mini" },
+        { id: "gpt-4o-mini", name: "gpt-4o-mini" },
+      ],
+    });
+
+    expect(client.apiPost).toHaveBeenCalledWith("/api/fleet-settings/providers", {
+      name: "openai-main",
+      displayName: "OpenAI Main",
+      type: "openai",
+      baseUrl: "https://api.openai.com/v1",
+      apiKey: "sk-test",
+      models: [
+        { id: "gpt-4.1-mini", name: "gpt-4.1-mini" },
+        { id: "gpt-4o-mini", name: "gpt-4o-mini" },
+      ],
+    });
+  });
+});
+
+describe("updateFleetProvider", (): void => {
+  it("patches provider endpoint with updates", async (): Promise<void> => {
+    vi.mocked(client.apiPatch).mockResolvedValueOnce(undefined as never);
+
+    await updateFleetProvider("provider-1", { displayName: "OpenAI Updated", isActive: true });
+
+    expect(client.apiPatch).toHaveBeenCalledWith("/api/fleet-settings/providers/provider-1", {
+      displayName: "OpenAI Updated",
+      isActive: true,
+    });
+  });
+});
+
+describe("deleteFleetProvider", (): void => {
+  it("deletes provider endpoint", async (): Promise<void> => {
+    vi.mocked(client.apiDelete).mockResolvedValueOnce(undefined as never);
+
+    await deleteFleetProvider("provider-1");
+
+    expect(client.apiDelete).toHaveBeenCalledWith("/api/fleet-settings/providers/provider-1");
+  });
+});
+
+describe("fetchFleetAgentConfig", (): void => {
+  it("calls agent config endpoint", async (): Promise<void> => {
+    vi.mocked(client.apiGet).mockResolvedValueOnce({
+      primaryModel: null,
+      fallbackModels: [],
+      personality: null,
+    } as never);
+
+    await fetchFleetAgentConfig();
+
+    expect(client.apiGet).toHaveBeenCalledWith("/api/fleet-settings/agent-config");
+  });
+});
+
+describe("updateFleetAgentConfig", (): void => {
+  it("patches agent config", async (): Promise<void> => {
+    vi.mocked(client.apiPatch).mockResolvedValueOnce(undefined as never);
+
+    await updateFleetAgentConfig({
+      primaryModel: "openai:gpt-4o-mini",
+      fallbackModels: ["openai:gpt-4.1-mini"],
+      personality: "System behavior",
+    });
+
+    expect(client.apiPatch).toHaveBeenCalledWith("/api/fleet-settings/agent-config", {
+      primaryModel: "openai:gpt-4o-mini",
+      fallbackModels: ["openai:gpt-4.1-mini"],
+      personality: "System behavior",
+    });
+  });
+});
+
+describe("fetchFleetOidcConfig", (): void => {
+  it("calls oidc endpoint", async (): Promise<void> => {
+    vi.mocked(client.apiGet).mockResolvedValueOnce({ configured: false } as never);
+
+    await fetchFleetOidcConfig();
+
+    expect(client.apiGet).toHaveBeenCalledWith("/api/fleet-settings/oidc");
+  });
+});
+
+describe("updateFleetOidcConfig", (): void => {
+  it("issues a PUT request with payload", async (): Promise<void> => {
+    vi.mocked(client.apiRequest).mockResolvedValueOnce(undefined as never);
+
+    await updateFleetOidcConfig({
+      issuerUrl: "https://issuer.example.com",
+      clientId: "mosaic-client",
+      clientSecret: "top-secret",
+    });
+
+    expect(client.apiRequest).toHaveBeenCalledWith("/api/fleet-settings/oidc", {
+      method: "PUT",
+      body: JSON.stringify({
+        issuerUrl: "https://issuer.example.com",
+        clientId: "mosaic-client",
+        clientSecret: "top-secret",
+      }),
+    });
+  });
+});
+
+describe("deleteFleetOidcConfig", (): void => {
+  it("deletes oidc endpoint", async (): Promise<void> => {
+    vi.mocked(client.apiDelete).mockResolvedValueOnce(undefined as never);
+
+    await deleteFleetOidcConfig();
+
+    expect(client.apiDelete).toHaveBeenCalledWith("/api/fleet-settings/oidc");
+  });
+});
+
+describe("resetBreakglassAdminPassword", (): void => {
+  it("posts breakglass reset payload", async (): Promise<void> => {
+    vi.mocked(client.apiPost).mockResolvedValueOnce(undefined as never);
+
+    await resetBreakglassAdminPassword({
+      username: "admin",
+      newPassword: "new-password-123",
+    });
+
+    expect(client.apiPost).toHaveBeenCalledWith("/api/fleet-settings/breakglass/reset-password", {
+      username: "admin",
+      newPassword: "new-password-123",
+    });
+  });
+});

apps/web/src/lib/api/fleet-settings.ts

@@ -0,0 +1,129 @@
+import { apiDelete, apiGet, apiPatch, apiPost, apiRequest } from "./client";
+
+export interface FleetProviderModel {
+  id: string;
+  name?: string;
+}
+
+export interface FleetProvider {
+  id: string;
+  name: string;
+  displayName: string;
+  type: string;
+  baseUrl: string | null;
+  isActive: boolean;
+  models: unknown;
+}
+
+export interface CreateFleetProviderRequest {
+  name: string;
+  displayName: string;
+  type: string;
+  baseUrl?: string;
+  apiKey?: string;
+  apiType?: string;
+  models?: FleetProviderModel[];
+}
+
+export interface UpdateFleetProviderRequest {
+  displayName?: string;
+  baseUrl?: string;
+  apiKey?: string;
+  isActive?: boolean;
+  models?: FleetProviderModel[];
+}
+
+export interface FleetAgentConfig {
+  primaryModel: string | null;
+  fallbackModels: string[];
+  personality: string | null;
+}
+
+interface FleetAgentConfigResponse {
+  primaryModel: string | null;
+  fallbackModels: unknown[];
+  personality: string | null;
+}
+
+export interface UpdateFleetAgentConfigRequest {
+  primaryModel?: string;
+  fallbackModels?: string[];
+  personality?: string;
+}
+
+export interface FleetOidcConfig {
+  issuerUrl?: string;
+  clientId?: string;
+  configured: boolean;
+}
+
+export interface UpdateFleetOidcConfigRequest {
+  issuerUrl: string;
+  clientId: string;
+  clientSecret: string;
+}
+
+export interface ResetBreakglassAdminPasswordRequest {
+  username: string;
+  newPassword: string;
+}
+
+function normalizeStringArray(value: unknown[]): string[] {
+  return value.filter((item): item is string => typeof item === "string");
+}
+
+export async function fetchFleetProviders(): Promise<FleetProvider[]> {
+  return apiGet<FleetProvider[]>("/api/fleet-settings/providers");
+}
+
+export async function createFleetProvider(
+  data: CreateFleetProviderRequest
+): Promise<{ id: string }> {
+  return apiPost<{ id: string }>("/api/fleet-settings/providers", data);
+}
+
+export async function updateFleetProvider(
+  providerId: string,
+  data: UpdateFleetProviderRequest
+): Promise<void> {
+  await apiPatch<unknown>(`/api/fleet-settings/providers/${providerId}`, data);
+}
+
+export async function deleteFleetProvider(providerId: string): Promise<void> {
+  await apiDelete<unknown>(`/api/fleet-settings/providers/${providerId}`);
+}
+
+export async function fetchFleetAgentConfig(): Promise<FleetAgentConfig> {
+  const response = await apiGet<FleetAgentConfigResponse>("/api/fleet-settings/agent-config");
+
+  return {
+    primaryModel: response.primaryModel,
+    fallbackModels: normalizeStringArray(response.fallbackModels),
+    personality: response.personality,
+  };
+}
+
+export async function updateFleetAgentConfig(data: UpdateFleetAgentConfigRequest): Promise<void> {
+  await apiPatch<unknown>("/api/fleet-settings/agent-config", data);
+}
+
+export async function fetchFleetOidcConfig(): Promise<FleetOidcConfig> {
+  return apiGet<FleetOidcConfig>("/api/fleet-settings/oidc");
+}
+
+export async function updateFleetOidcConfig(data: UpdateFleetOidcConfigRequest): Promise<void> {
+  await apiRequest<unknown>("/api/fleet-settings/oidc", {
+    method: "PUT",
+    body: JSON.stringify(data),
+  });
+}
+
+export async function deleteFleetOidcConfig(): Promise<void> {
+  await apiDelete<unknown>("/api/fleet-settings/oidc");
+}
+
+export async function resetBreakglassAdminPassword(
+  data: ResetBreakglassAdminPasswordRequest
+): Promise<void> {
+  await apiPost<unknown>("/api/fleet-settings/breakglass/reset-password", data);
+}

apps/web/src/lib/api/index.ts

@@ -17,3 +17,5 @@ export * from "./dashboard";
 export * from "./projects";
 export * from "./workspaces";
 export * from "./admin";
+export * from "./fleet-settings";
+export * from "./activity";

apps/web/src/lib/api/onboarding.ts

@@ -0,0 +1,80 @@
+import { apiGet, apiPost } from "./client";
+
+export interface OnboardingStatus {
+  completed: boolean;
+}
+
+export interface BreakglassAdminRequest {
+  username: string;
+  password: string;
+}
+
+export interface BreakglassAdminResponse {
+  id: string;
+  username: string;
+}
+
+export interface ConfigureOidcRequest {
+  issuerUrl: string;
+  clientId: string;
+  clientSecret: string;
+}
+
+export interface ProviderModel {
+  id: string;
+  name?: string;
+}
+
+export interface AddOnboardingProviderRequest {
+  name: string;
+  displayName: string;
+  type: string;
+  baseUrl?: string;
+  apiKey?: string;
+  models?: ProviderModel[];
+}
+
+export interface AddOnboardingProviderResponse {
+  id: string;
+}
+
+export interface TestOnboardingProviderRequest {
+  type: string;
+  baseUrl?: string;
+  apiKey?: string;
+}
+
+export interface TestOnboardingProviderResponse {
+  success: boolean;
+  error?: string;
+}
+
+export async function fetchOnboardingStatus(): Promise<OnboardingStatus> {
+  return apiGet<OnboardingStatus>("/api/onboarding/status");
+}
+
+export async function createBreakglassAdmin(
+  request: BreakglassAdminRequest
+): Promise<BreakglassAdminResponse> {
+  return apiPost<BreakglassAdminResponse>("/api/onboarding/breakglass", request);
+}
+
+export async function configureOidcProvider(request: ConfigureOidcRequest): Promise<void> {
+  await apiPost<unknown>("/api/onboarding/oidc", request);
+}
+
+export async function addOnboardingProvider(
+  request: AddOnboardingProviderRequest
+): Promise<AddOnboardingProviderResponse> {
+  return apiPost<AddOnboardingProviderResponse>("/api/onboarding/provider", request);
+}
+
+export async function testOnboardingProvider(
+  request: TestOnboardingProviderRequest
+): Promise<TestOnboardingProviderResponse> {
+  return apiPost<TestOnboardingProviderResponse>("/api/onboarding/provider/test", request);
+}
+
+export async function completeOnboarding(): Promise<void> {
+  await apiPost<unknown>("/api/onboarding/complete");
+}

apps/web/src/lib/api/projects.ts

@@ -25,7 +25,9 @@ export interface Project {
   name: string;
   description: string | null;
   status: ProjectStatus;
+  priority?: string | null;
   startDate: string | null;
+  dueDate?: string | null;
   endDate: string | null;
   creatorId: string;
   domainId: string | null;
@@ -35,6 +37,54 @@ export interface Project {
   updatedAt: string;
 }
 
+/**
+ * Minimal creator details included on project detail response
+ */
+export interface ProjectCreator {
+  id: string;
+  name: string | null;
+  email: string;
+}
+
+/**
+ * Task row included on project detail response
+ */
+export interface ProjectTaskSummary {
+  id: string;
+  title: string;
+  status: string;
+  priority: string;
+  dueDate: string | null;
+}
+
+/**
+ * Event row included on project detail response
+ */
+export interface ProjectEventSummary {
+  id: string;
+  title: string;
+  startTime: string;
+  endTime: string | null;
+}
+
+/**
+ * Counts included on project detail response
+ */
+export interface ProjectDetailCounts {
+  tasks: number;
+  events: number;
+}
+
+/**
+ * Single-project response with related details
+ */
+export interface ProjectDetail extends Project {
+  creator: ProjectCreator;
+  tasks: ProjectTaskSummary[];
+  events: ProjectEventSummary[];
+  _count: ProjectDetailCounts;
+}
+
 /**
  * DTO for creating a new project
  */
@@ -45,6 +95,7 @@ export interface CreateProjectDto {
   startDate?: string;
   endDate?: string;
   color?: string;
+  domainId?: string;
   metadata?: Record<string, unknown>;
 }
 
@@ -58,6 +109,7 @@ export interface UpdateProjectDto {
   startDate?: string | null;
   endDate?: string | null;
   color?: string | null;
+  domainId?: string | null;
   metadata?: Record<string, unknown>;
 }
 
@@ -72,8 +124,8 @@ export async function fetchProjects(workspaceId?: string): Promise<Project[]> {
 /**
  * Fetch a single project by ID
  */
-export async function fetchProject(id: string, workspaceId?: string): Promise<Project> {
-  return apiGet<Project>(`/api/projects/${id}`, workspaceId);
+export async function fetchProject(id: string, workspaceId?: string): Promise<ProjectDetail> {
+  return apiGet<ProjectDetail>(`/api/projects/${id}`, workspaceId);
 }
 
 /**

apps/web/src/lib/api/tasks.ts

@@ -46,3 +46,21 @@ export async function updateTask(
   const res = await apiPatch<ApiResponse<Task>>(`/api/tasks/${id}`, data, workspaceId);
   return res.data;
 }
+
+export interface CreateTaskInput {
+  title: string;
+  description?: string;
+  status?: TaskStatus;
+  priority?: TaskPriority;
+  dueDate?: string;
+  projectId?: string;
+}
+
+/**
+ * Create a new task
+ */
+export async function createTask(data: CreateTaskInput, workspaceId?: string): Promise<Task> {
+  const { apiPost } = await import("./client");
+  const res = await apiPost<ApiResponse<Task>>("/api/tasks", data, workspaceId);
+  return res.data;
+}

docker-compose.swarm.portainer.yml

@@ -121,9 +121,15 @@ services:
       OLLAMA_ENDPOINT: ${OLLAMA_ENDPOINT}
       OPENBAO_ADDR: ${OPENBAO_ADDR}
       ENCRYPTION_KEY: ${ENCRYPTION_KEY}
+      # MS22: fleet encryption key (AES-256-GCM for provider API keys, agent tokens)
+      MOSAIC_SECRET_KEY: ${MOSAIC_SECRET_KEY}
+      # MS22: Docker socket for per-user container lifecycle (optional: set DOCKER_HOST for TCP)
+      DOCKER_HOST: ${DOCKER_HOST:-}
       # Matrix bridge (optional — configure after Synapse is running)
       MATRIX_HOMESERVER_URL: ${MATRIX_HOMESERVER_URL:-http://synapse:8008}
       MATRIX_ACCESS_TOKEN: ${MATRIX_ACCESS_TOKEN:-}
+      # System admin IDs (comma-separated user UUIDs) for auth settings access
+      SYSTEM_ADMIN_IDS: ${SYSTEM_ADMIN_IDS:-}
       MATRIX_BOT_USER_ID: ${MATRIX_BOT_USER_ID:-}
       MATRIX_CONTROL_ROOM_ID: ${MATRIX_CONTROL_ROOM_ID:-}
       MATRIX_WORKSPACE_ID: ${MATRIX_WORKSPACE_ID:-}
@@ -142,6 +148,8 @@ services:
       NEXT_PUBLIC_APP_URL: ${NEXT_PUBLIC_APP_URL}
       NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
       TRUSTED_ORIGINS: ${TRUSTED_ORIGINS:-}
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
     healthcheck:
       test:
         [

docker/base.Dockerfile

@@ -0,0 +1,16 @@
+FROM node:24-slim AS base
+
+# Pre-bake OS updates and common packages shared across all apps.
+# Rebuild this image weekly or when base packages change.
+# Push to: git.mosaicstack.dev/mosaic/node-base:24-slim
+RUN apt-get update && apt-get upgrade -y --no-install-recommends \
+    && apt-get install -y --no-install-recommends \
+        openssl \
+        ca-certificates \
+        curl \
+        dumb-init \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+# Enable corepack for pnpm
+RUN corepack enable

docs/TASKS.md

@@ -76,16 +76,16 @@ Remaining estimate: ~143K tokens (Codex budget).
 
 Design doc: `docs/design/MS22-DB-CENTRIC-ARCHITECTURE.md`
 
-| Task ID  | Status      | Phase    | Description                                                                                                           | Issue | Scope   | Branch                       | Depends On | Blocks          | Assigned Worker | Started | Completed | Est Tokens | Act Tokens | Notes |
-| -------- | ----------- | -------- | --------------------------------------------------------------------------------------------------------------------- | ----- | ------- | ---------------------------- | ---------- | --------------- | --------------- | ------- | --------- | ---------- | ---------- | ----- |
-| MS22-P1a | done        | phase-1a | Prisma schema: SystemConfig, BreakglassUser, LlmProvider, UserContainer, SystemContainer, UserAgentConfig + migration | —     | api     | feat/ms22-p1a-schema         | —          | P1b,P1c,P1d,P1e | —               | —       | —         | 20K        | —          |       |
-| MS22-P1b | done        | phase-1b | Encryption service (AES-256-GCM) for API keys and tokens                                                              | —     | api     | feat/ms22-p1b-crypto         | —          | P1c,P1e,P1g     | —               | —       | —         | 15K        | —          |       |
-| MS22-P1c | not-started | phase-1c | Internal config endpoint: assemble openclaw.json from DB                                                              | —     | api     | feat/ms22-p1c-config-api     | P1a,P1b    | P1i,P1j         | —               | —       | —         | 20K        | —          |       |
-| MS22-P1d | not-started | phase-1d | ContainerLifecycleService: Docker API (dockerode) start/stop/health/reap                                              | —     | api     | feat/ms22-p1d-container-mgr  | P1a        | P1i,P1k         | —               | —       | —         | 25K        | —          |       |
-| MS22-P1e | not-started | phase-1e | Onboarding API: breakglass, OIDC, provider, agents, complete                                                          | —     | api     | feat/ms22-p1e-onboarding-api | P1a,P1b    | P1f             | —               | —       | —         | 20K        | —          |       |
-| MS22-P1f | not-started | phase-1f | Onboarding wizard WebUI (multi-step form)                                                                             | —     | web     | feat/ms22-p1f-onboarding-ui  | P1e        | —               | —               | —       | —         | 25K        | —          |       |
-| MS22-P1g | not-started | phase-1g | Settings API: CRUD providers, agent config, OIDC, breakglass                                                          | —     | api     | feat/ms22-p1g-settings-api   | P1a,P1b    | P1h             | —               | —       | —         | 20K        | —          |       |
-| MS22-P1h | not-started | phase-1h | Settings UI: Providers, Agent Config, Auth pages                                                                      | —     | web     | feat/ms22-p1h-settings-ui    | P1g        | —               | —               | —       | —         | 25K        | —          |       |
-| MS22-P1i | not-started | phase-1i | Chat proxy: route WebUI chat to user's OpenClaw container (SSE)                                                       | —     | api+web | feat/ms22-p1i-chat-proxy     | P1c,P1d    | —               | —               | —       | —         | 20K        | —          |       |
-| MS22-P1j | not-started | phase-1j | Docker entrypoint + health checks + core compose                                                                      | —     | docker  | feat/ms22-p1j-docker         | P1c        | —               | —               | —       | —         | 10K        | —          |       |
-| MS22-P1k | not-started | phase-1k | Idle reaper cron: stop inactive user containers                                                                       | —     | api     | feat/ms22-p1k-idle-reaper    | P1d        | —               | —               | —       | —         | 10K        | —          |       |
+| Task ID  | Status | Phase    | Description                                                                                                           | Issue | Scope   | Branch                       | Depends On | Blocks          | Assigned Worker | Started | Completed | Est Tokens | Act Tokens | Notes |
+| -------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------- | ----- | ------- | ---------------------------- | ---------- | --------------- | --------------- | ------- | --------- | ---------- | ---------- | ----- |
+| MS22-P1a | done   | phase-1a | Prisma schema: SystemConfig, BreakglassUser, LlmProvider, UserContainer, SystemContainer, UserAgentConfig + migration | —     | api     | feat/ms22-p1a-schema         | —          | P1b,P1c,P1d,P1e | —               | —       | —         | 20K        | —          |       |
+| MS22-P1b | done   | phase-1b | Encryption service (AES-256-GCM) for API keys and tokens                                                              | —     | api     | feat/ms22-p1b-crypto         | —          | P1c,P1e,P1g     | —               | —       | —         | 15K        | —          |       |
+| MS22-P1c | done   | phase-1c | Internal config endpoint: assemble openclaw.json from DB                                                              | —     | api     | feat/ms22-p1c-config-api     | P1a,P1b    | P1i,P1j         | —               | —       | —         | 20K        | —          |       |
+| MS22-P1d | done   | phase-1d | ContainerLifecycleService: Docker API (dockerode) start/stop/health/reap                                              | —     | api     | feat/ms22-p1d-container-mgr  | P1a        | P1i,P1k         | —               | —       | —         | 25K        | —          |       |
+| MS22-P1e | done   | phase-1e | Onboarding API: breakglass, OIDC, provider, agents, complete                                                          | —     | api     | feat/ms22-p1e-onboarding-api | P1a,P1b    | P1f             | —               | —       | —         | 20K        | —          |       |
+| MS22-P1f | done   | phase-1f | Onboarding wizard WebUI (multi-step form)                                                                             | —     | web     | feat/ms22-p1f-onboarding-ui  | P1e        | —               | —               | —       | —         | 25K        | —          |       |
+| MS22-P1g | done   | phase-1g | Settings API: CRUD providers, agent config, OIDC, breakglass                                                          | —     | api     | feat/ms22-p1g-settings-api   | P1a,P1b    | P1h             | —               | —       | —         | 20K        | —          |       |
+| MS22-P1h | done   | phase-1h | Settings UI: Providers, Agent Config, Auth pages                                                                      | —     | web     | feat/ms22-p1h-settings-ui    | P1g        | —               | —               | —       | —         | 25K        | —          |       |
+| MS22-P1i | done   | phase-1i | Chat proxy: route WebUI chat to user's OpenClaw container (SSE)                                                       | —     | api+web | feat/ms22-p1i-chat-proxy     | P1c,P1d    | —               | —               | —       | —         | 20K        | —          |       |
+| MS22-P1j | done   | phase-1j | Docker entrypoint + health checks + core compose                                                                      | —     | docker  | feat/ms22-p1j-docker         | P1c        | —               | —               | —       | —         | 10K        | —          |       |
+| MS22-P1k | done   | phase-1k | Idle reaper cron: stop inactive user containers                                                                       | —     | api     | feat/ms22-p1k-idle-reaper    | P1d        | —               | —               | —       | —         | 10K        | —          |       |

docs/audits/ms22-phase1-audit.md

@@ -0,0 +1,157 @@
+# MS22 Phase 1 Module Audit
+
+Date: 2026-03-01
+Branch: `fix/ms22-audit`
+Scope:
+
+- `apps/api/src/container-lifecycle/`
+- `apps/api/src/crypto/`
+- `apps/api/src/agent-config/`
+- `apps/api/src/onboarding/`
+- `apps/api/src/fleet-settings/`
+- `apps/api/src/chat-proxy/`
+
+## Summary
+
+Audit completed for module wiring, security controls, input validation, and error handling.
+
+Findings:
+
+1. `chat-proxy`: raw internal/upstream error messages were returned to clients over SSE (fixed).
+2. `chat-proxy`: proxy requests to OpenClaw did not forward the container bearer token returned by lifecycle startup (fixed).
+3. `agent-config`: token validation returned early and used length-gated compare logic, creating avoidable timing side-channel behavior (hardened).
+
+## Module Review Results
+
+### 1) `container-lifecycle`
+
+- NestJS module dependency audit:
+  - `ContainerLifecycleModule` imports `ConfigModule`, `PrismaModule`, and `CryptoModule` required by `ContainerLifecycleService`.
+  - Providers/exports are correct (`ContainerLifecycleService` provided and exported).
+- Security review:
+  - Container operations are user-scoped by `userId` and do not expose cross-user selectors in this module.
+  - AES token generation/decryption delegated to `CryptoService`.
+- Input validation:
+  - No controller endpoints in this module; no direct request DTO surface here.
+- Error handling:
+  - No direct HTTP layer here; errors flow to callers/global filter.
+- Finding status: **No issues found in this module**.
+
+### 2) `crypto`
+
+- NestJS module dependency audit:
+  - `CryptoModule` correctly imports `ConfigModule` for `ConfigService`.
+  - `CryptoService` is correctly provided/exported.
+- Security review:
+  - AES-256-GCM is implemented correctly.
+  - 96-bit IV generated via `randomBytes(12)` per encryption.
+  - Auth tag captured and verified on decrypt (`setAuthTag` + `decipher.final()`).
+  - HKDF derives a fixed 32-byte key from `MOSAIC_SECRET_KEY`.
+- Input validation:
+  - No DTO/request surface in this module.
+- Error handling:
+  - Decrypt failures are normalized to `Failed to decrypt value`.
+- Finding status: **No issues found in this module**.
+
+### 3) `agent-config`
+
+- NestJS module dependency audit:
+  - `AgentConfigModule` imports `PrismaModule` + `CryptoModule`; `AgentConfigService` and `AgentConfigGuard` are provided.
+  - Controller/guard/service wiring is correct.
+- Security review:
+  - Bearer token comparisons used `timingSafeEqual`, but returned early on first match and performed length-gated comparison.
+  - Internal route (`/api/internal/agent-config/:id`) is access-controlled by bearer token guard and container-id match (`containerAuth.id === :id`).
+- Input validation:
+  - Header token extraction and route param are manually handled (no DTO for `:id`, acceptable for current use but should remain constrained).
+- Error handling:
+  - Service throws typed Nest exceptions for not-found paths.
+- Finding status: **Issue found and fixed**.
+
+### 4) `onboarding`
+
+- NestJS module dependency audit:
+  - `OnboardingModule` imports required dependencies (`PrismaModule`, `CryptoModule`; `ConfigModule` currently unused but harmless).
+  - Providers/controllers are correctly declared.
+- Security review:
+  - `OnboardingGuard` blocks all mutating onboarding routes once `onboarding.completed=true`.
+  - Onboarding cannot be re-run via guarded endpoints after completion.
+- Input validation:
+  - DTOs use `class-validator` decorators for all request bodies.
+- Error handling:
+  - Uses typed Nest exceptions (`ConflictException`, `BadRequestException`).
+- Finding status: **No issues found in this module**.
+
+### 5) `fleet-settings`
+
+- NestJS module dependency audit:
+  - `FleetSettingsModule` imports `AuthModule`, `PrismaModule`, `CryptoModule` required by its controller/service.
+  - Provider/export wiring is correct for `FleetSettingsService`.
+- Security review:
+  - Class-level `AuthGuard` protects all routes.
+  - Admin-only routes additionally use `AdminGuard` (`oidc` and `breakglass/reset-password`).
+  - Provider list/get responses do not expose `apiKey`.
+  - OIDC read response intentionally omits `clientSecret`.
+- Input validation:
+  - DTOs are decorated with `class-validator`.
+- Error handling:
+  - Ownership/not-found conditions use typed exceptions.
+- Finding status: **No issues found in this module**.
+
+### 6) `chat-proxy`
+
+- NestJS module dependency audit:
+  - `ChatProxyModule` imports `AuthModule`, `PrismaModule`, `ContainerLifecycleModule` needed by controller/service.
+  - Provider/controller wiring is correct.
+- Security review:
+  - User identity comes from `AuthGuard`; no user-provided container selector, so no cross-user container proxy path found.
+  - **Issue fixed:** gateway bearer token was not forwarded on proxied requests.
+  - **Issue fixed:** SSE error events exposed raw internal exception messages.
+- Input validation:
+  - `ChatStreamDto` + nested `ChatMessageDto` use `class-validator` decorators.
+- Error handling:
+  - **Issue fixed:** controller now emits safe client error messages and logs details server-side.
+- Finding status: **Issues found and fixed**.
+
+## Security Checklist Outcomes
+
+- `fleet-settings`: admin-only routes are guarded; non-admin users cannot access OIDC or breakglass reset routes. Provider secrets are not returned in provider read endpoints.
+- `agent-config`: token comparison hardened; route remains gated by bearer token + container id binding.
+- `onboarding`: guarded mutating endpoints cannot run after completion.
+- `crypto`: AES-256-GCM usage is correct (random IV, auth-tag verification, fixed 32-byte key derivation).
+- `chat-proxy`: user cannot target another user’s container; proxy now authenticates to OpenClaw using per-container bearer token.
+
+## Input Validation
+
+- DTO coverage is present in onboarding, fleet-settings, and chat-proxy request bodies.
+- No critical unvalidated body inputs found in scoped modules.
+
+## Error Handling
+
+- Global API layer has a sanitizing `GlobalExceptionFilter`.
+- `chat-proxy` used manual response handling (`@Res`) and bypassed global filter; this was corrected by sending safe generic SSE errors.
+- No additional critical sensitive-data leaks found in reviewed scope.
+
+## Changes Made
+
+1. Hardened token comparison behavior in:
+   - `apps/api/src/agent-config/agent-config.service.ts`
+   - Changes:
+     - Compare SHA-256 digests with `timingSafeEqual`.
+     - Avoid early return during scan to reduce timing signal differences.
+
+2. Fixed OpenClaw auth forwarding and error leak risk in:
+   - `apps/api/src/chat-proxy/chat-proxy.service.ts`
+   - `apps/api/src/chat-proxy/chat-proxy.controller.ts`
+   - `apps/api/src/chat-proxy/chat-proxy.service.spec.ts`
+   - Changes:
+     - Forward `Authorization: Bearer <gatewayToken>` when proxying chat requests.
+     - Stop returning raw internal/upstream error text to clients over SSE.
+     - Log details server-side and return safe client-facing messages.
+
+## Validation Commands
+
+Required quality gate command run:
+
+- `pnpm turbo lint typecheck --filter=@mosaic/api`
+
+(Results captured in session logs.)

pnpm-lock.yaml

@@ -180,6 +180,9 @@ importers:
       gray-matter:
         specifier: ^4.0.3
         version: 4.0.3
+      helmet:
+        specifier: ^8.1.0
+        version: 8.1.0
       highlight.js:
         specifier: ^11.11.1
         version: 11.11.1
@@ -5210,6 +5213,10 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  helmet@8.1.0:
+    resolution: {integrity: sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==}
+    engines: {node: '>=18.0.0'}
+
   highlight.js@11.11.1:
     resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
     engines: {node: '>=12.0.0'}
@@ -12815,6 +12822,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  helmet@8.1.0: {}
+
   highlight.js@11.11.1: {}
 
   html-encoding-sniffer@4.0.0: