feat(web): add project detail page (/projects/[id])

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

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/chat-proxy/chat-proxy.controller.ts

@@ -1,4 +1,14 @@
-import { Body, Controller, Post, Req, Res, UnauthorizedException, UseGuards } from "@nestjs/common";
+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";
@@ -8,6 +18,8 @@ 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
@@ -58,10 +70,11 @@ export class ChatProxyController {
         res.write(Buffer.from(chunk));
       }
     } catch (error: unknown) {
+      this.logStreamError(error);
+
       if (!res.writableEnded && !res.destroyed) {
-        const message = error instanceof Error ? error.message : String(error);
         res.write("event: error\n");
-        res.write(`data: ${JSON.stringify({ error: message })}\n\n`);
+        res.write(`data: ${JSON.stringify({ error: this.toSafeClientMessage(error) })}\n\n`);
       }
     } finally {
       if (!res.writableEnded && !res.destroyed) {
@@ -69,4 +82,21 @@ export class ChatProxyController {
       }
     }
   }
+
+  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.service.spec.ts

@@ -64,6 +64,7 @@ describe("ChatProxyService", () => {
         expect.objectContaining({
           method: "POST",
           headers: {
+            Authorization: "Bearer gateway-token",
             "Content-Type": "application/json",
           },
         })

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

@@ -1,12 +1,24 @@
-import { BadGatewayException, Injectable, ServiceUnavailableException } from "@nestjs/common";
+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
@@ -14,8 +26,7 @@ export class ChatProxyService {
 
   // Get the user's OpenClaw container URL and mark it active.
   async getContainerUrl(userId: string): Promise<string> {
-    const { url } = await this.containerLifecycle.ensureRunning(userId);
-    await this.containerLifecycle.touch(userId);
+    const { url } = await this.getContainerConnection(userId);
     return url;
   }
 
@@ -25,11 +36,14 @@ export class ChatProxyService {
     messages: ChatMessage[],
     signal?: AbortSignal
   ): Promise<Response> {
-    const containerUrl = await this.getContainerUrl(userId);
+    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" },
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${gatewayToken}`,
+      },
       body: JSON.stringify({
         messages,
         model,
@@ -47,10 +61,10 @@ export class ChatProxyService {
       if (!response.ok) {
         const detail = await this.readResponseText(response);
         const status = `${String(response.status)} ${response.statusText}`.trim();
-        const message = detail
-          ? `OpenClaw returned ${status}: ${detail}`
-          : `OpenClaw returned ${status}`;
-        throw new BadGatewayException(message);
+        this.logger.warn(
+          detail ? `OpenClaw returned ${status}: ${detail}` : `OpenClaw returned ${status}`
+        );
+        throw new BadGatewayException(`OpenClaw returned ${status}`);
       }
 
       return response;
@@ -60,10 +74,17 @@ export class ChatProxyService {
       }
 
       const message = error instanceof Error ? error.message : String(error);
-      throw new ServiceUnavailableException(`Failed to proxy chat to OpenClaw: ${message}`);
+      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 },

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)/settings/providers/page.tsx

@@ -85,14 +85,6 @@ const INITIAL_FORM: ProviderFormState = {
   isActive: true,
 };
 
-function getErrorMessage(error: unknown, fallback: string): string {
-  if (error instanceof Error && error.message.trim().length > 0) {
-    return error.message;
-  }
-
-  return fallback;
-}
-
 function buildProviderName(displayName: string, type: string): string {
   const slug = displayName
     .trim()
@@ -105,6 +97,14 @@ function buildProviderName(displayName: string, type: string): string {
   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 [];
@@ -153,11 +153,11 @@ function modelsToEditorText(models: unknown): string {
     .join("\n");
 }
 
-function parseModelsText(value: string): FleetProviderModel[] {
+function parseModelsText(value: string): string[] {
   const seen = new Set<string>();
 
   return value
-    .split(/\n|,/g)
+    .split(/\r?\n/g)
     .map((segment) => segment.trim())
     .filter((segment) => segment.length > 0)
     .filter((segment) => {
@@ -166,8 +166,7 @@ function parseModelsText(value: string): FleetProviderModel[] {
       }
       seen.add(segment);
       return true;
-    })
-    .map((id) => ({ id, name: id }));
+    });
 }
 
 function maskApiKey(value: string): string {
@@ -279,6 +278,7 @@ export default function ProvidersSettingsPage(): ReactElement {
     }
 
     const models = parseModelsText(form.modelsText);
+    const providerModels = models.map((id) => ({ id, name: id }));
     const baseUrl = form.baseUrl.trim();
     const apiKey = form.apiKey.trim();
 
@@ -289,7 +289,7 @@ export default function ProvidersSettingsPage(): ReactElement {
         const updatePayload: UpdateFleetProviderRequest = {
           displayName,
           isActive: form.isActive,
-          models,
+          models: providerModels,
         };
 
         if (baseUrl.length > 0) {
@@ -307,7 +307,6 @@ export default function ProvidersSettingsPage(): ReactElement {
           name: buildProviderName(displayName, form.type),
           displayName,
           type: form.type,
-          models,
         };
 
         if (baseUrl.length > 0) {
@@ -318,6 +317,10 @@ export default function ProvidersSettingsPage(): ReactElement {
           createPayload.apiKey = apiKey;
         }
 
+        if (providerModels.length > 0) {
+          createPayload.models = providerModels;
+        }
+
         await createFleetProvider(createPayload);
         setSuccessMessage(`Added provider "${displayName}".`);
       }

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

@@ -37,14 +37,24 @@ describe("createFleetProvider", (): void => {
       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" },
+      ],
     });
   });
 });

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
  */
@@ -72,8 +122,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);
 }
 
 /**

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.)