Compare commits
11 Commits
fix/ms22-a
...
fix/worksp
| Author | SHA1 | Date | |
|---|---|---|---|
| 4e0425177d | |||
| 2463b7b8ba | |||
| 5b235a668f | |||
| c5ab179071 | |||
| b4f4de6f7a | |||
| 2b6bed2480 | |||
| eba33fc93d | |||
| c23c33b0c5 | |||
| c5253e9d62 | |||
| e898551814 | |||
| 3607554902 |
@@ -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";
|
||||
|
||||
@@ -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 } {
|
||||
|
||||
@@ -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)}`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,6 +64,7 @@ describe("ChatProxyService", () => {
|
||||
expect.objectContaining({
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: "Bearer gateway-token",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
|
||||
@@ -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 },
|
||||
|
||||
@@ -111,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;
|
||||
}
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
})
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
})
|
||||
|
||||
@@ -4,7 +4,7 @@ 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";
|
||||
|
||||
/**
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 }}>
|
||||
|
||||
188
apps/web/src/app/(authenticated)/kanban/page.test.tsx
Normal file
188
apps/web/src/app/(authenticated)/kanban/page.test.tsx
Normal file
@@ -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();
|
||||
});
|
||||
});
|
||||
491
apps/web/src/app/(authenticated)/projects/[id]/page.tsx
Normal file
491
apps/web/src/app/(authenticated)/projects/[id]/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -85,12 +85,16 @@ const INITIAL_FORM: ProviderFormState = {
|
||||
isActive: true,
|
||||
};
|
||||
|
||||
function mapProviderTypeToApi(type: string): "ollama" | "openai" | "claude" {
|
||||
if (type === "ollama" || type === "claude") {
|
||||
return type;
|
||||
}
|
||||
function buildProviderName(displayName: string, type: string): string {
|
||||
const slug = displayName
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-+/, "")
|
||||
.replace(/-+$/, "");
|
||||
|
||||
return "openai";
|
||||
const candidate = `${type}-${slug.length > 0 ? slug : "provider"}`;
|
||||
return candidate.slice(0, 100);
|
||||
}
|
||||
|
||||
function getErrorMessage(error: unknown, fallback: string): string {
|
||||
@@ -299,27 +303,24 @@ export default function ProvidersSettingsPage(): ReactElement {
|
||||
await updateFleetProvider(editingProvider.id, updatePayload);
|
||||
setSuccessMessage(`Updated provider "${displayName}".`);
|
||||
} else {
|
||||
const config: CreateFleetProviderRequest["config"] = {};
|
||||
const createPayload: CreateFleetProviderRequest = {
|
||||
name: buildProviderName(displayName, form.type),
|
||||
displayName,
|
||||
type: form.type,
|
||||
};
|
||||
|
||||
if (baseUrl.length > 0) {
|
||||
config.endpoint = baseUrl;
|
||||
createPayload.baseUrl = baseUrl;
|
||||
}
|
||||
|
||||
if (apiKey.length > 0) {
|
||||
config.apiKey = apiKey;
|
||||
createPayload.apiKey = apiKey;
|
||||
}
|
||||
|
||||
if (models.length > 0) {
|
||||
config.models = models;
|
||||
if (providerModels.length > 0) {
|
||||
createPayload.models = providerModels;
|
||||
}
|
||||
|
||||
const createPayload: CreateFleetProviderRequest = {
|
||||
displayName,
|
||||
providerType: mapProviderTypeToApi(form.type),
|
||||
config,
|
||||
isEnabled: form.isActive,
|
||||
};
|
||||
|
||||
await createFleetProvider(createPayload);
|
||||
setSuccessMessage(`Added provider "${displayName}".`);
|
||||
}
|
||||
|
||||
@@ -34,25 +34,27 @@ describe("createFleetProvider", (): void => {
|
||||
vi.mocked(client.apiPost).mockResolvedValueOnce({ id: "provider-1" } as never);
|
||||
|
||||
await createFleetProvider({
|
||||
providerType: "openai",
|
||||
name: "openai-main",
|
||||
displayName: "OpenAI Main",
|
||||
config: {
|
||||
endpoint: "https://api.openai.com/v1",
|
||||
apiKey: "sk-test",
|
||||
models: ["gpt-4.1-mini", "gpt-4o-mini"],
|
||||
},
|
||||
isEnabled: true,
|
||||
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", {
|
||||
providerType: "openai",
|
||||
name: "openai-main",
|
||||
displayName: "OpenAI Main",
|
||||
config: {
|
||||
endpoint: "https://api.openai.com/v1",
|
||||
apiKey: "sk-test",
|
||||
models: ["gpt-4.1-mini", "gpt-4o-mini"],
|
||||
},
|
||||
isEnabled: true,
|
||||
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" },
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -16,16 +16,13 @@ export interface FleetProvider {
|
||||
}
|
||||
|
||||
export interface CreateFleetProviderRequest {
|
||||
providerType: "ollama" | "openai" | "claude";
|
||||
name: string;
|
||||
displayName: string;
|
||||
config: {
|
||||
endpoint?: string;
|
||||
apiKey?: string;
|
||||
models?: string[];
|
||||
timeout?: number;
|
||||
};
|
||||
isDefault?: boolean;
|
||||
isEnabled?: boolean;
|
||||
type: string;
|
||||
baseUrl?: string;
|
||||
apiKey?: string;
|
||||
apiType?: string;
|
||||
models?: FleetProviderModel[];
|
||||
}
|
||||
|
||||
export interface UpdateFleetProviderRequest {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -128,6 +128,8 @@ services:
|
||||
# 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:-}
|
||||
|
||||
157
docs/audits/ms22-phase1-audit.md
Normal file
157
docs/audits/ms22-phase1-audit.md
Normal file
@@ -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.)
|
||||
Reference in New Issue
Block a user