Compare commits
1 Commits
main
...
feat/ms22-
| Author | SHA1 | Date | |
|---|---|---|---|
| cbb0dc8aff |
2
.npmrc
2
.npmrc
@@ -1,3 +1 @@
|
|||||||
@mosaicstack:registry=https://git.mosaicstack.dev/api/packages/mosaic/npm/
|
@mosaicstack:registry=https://git.mosaicstack.dev/api/packages/mosaic/npm/
|
||||||
supportedArchitectures[libc][]=glibc
|
|
||||||
supportedArchitectures[cpu][]=x64
|
|
||||||
|
|||||||
@@ -1,27 +0,0 @@
|
|||||||
when:
|
|
||||||
- event: manual
|
|
||||||
- event: cron
|
|
||||||
cron: weekly-base-image
|
|
||||||
|
|
||||||
variables:
|
|
||||||
- &kaniko_setup |
|
|
||||||
mkdir -p /kaniko/.docker
|
|
||||||
echo "{\"auths\":{\"git.mosaicstack.dev\":{\"username\":\"$GITEA_USER\",\"password\":\"$GITEA_TOKEN\"}}}" > /kaniko/.docker/config.json
|
|
||||||
|
|
||||||
steps:
|
|
||||||
build-base:
|
|
||||||
image: gcr.io/kaniko-project/executor:debug
|
|
||||||
environment:
|
|
||||||
GITEA_USER:
|
|
||||||
from_secret: gitea_username
|
|
||||||
GITEA_TOKEN:
|
|
||||||
from_secret: gitea_token
|
|
||||||
commands:
|
|
||||||
- *kaniko_setup
|
|
||||||
- /kaniko/executor
|
|
||||||
--context .
|
|
||||||
--dockerfile docker/base.Dockerfile
|
|
||||||
--destination git.mosaicstack.dev/mosaic/node-base:24-slim
|
|
||||||
--destination git.mosaicstack.dev/mosaic/node-base:latest
|
|
||||||
--cache=true
|
|
||||||
--cache-repo git.mosaicstack.dev/mosaic/node-base/cache
|
|
||||||
@@ -29,11 +29,9 @@ when:
|
|||||||
- ".trivyignore"
|
- ".trivyignore"
|
||||||
|
|
||||||
variables:
|
variables:
|
||||||
- &node_image "node:24-slim"
|
- &node_image "node:24-alpine"
|
||||||
- &install_deps |
|
- &install_deps |
|
||||||
corepack enable
|
corepack enable
|
||||||
apt-get update && apt-get install -y --no-install-recommends python3 make g++
|
|
||||||
pnpm config set store-dir /root/.local/share/pnpm/store
|
|
||||||
pnpm install --frozen-lockfile
|
pnpm install --frozen-lockfile
|
||||||
- &use_deps |
|
- &use_deps |
|
||||||
corepack enable
|
corepack enable
|
||||||
@@ -170,7 +168,7 @@ steps:
|
|||||||
elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
|
elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
|
||||||
DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-api:latest"
|
DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-api:latest"
|
||||||
fi
|
fi
|
||||||
/kaniko/executor --context . --dockerfile apps/api/Dockerfile --snapshot-mode=redo --cache=true --cache-repo git.mosaicstack.dev/mosaic/stack-api/cache $DESTINATIONS
|
/kaniko/executor --context . --dockerfile apps/api/Dockerfile --snapshot-mode=redo $DESTINATIONS
|
||||||
when:
|
when:
|
||||||
- branch: [main]
|
- branch: [main]
|
||||||
event: [push, manual, tag]
|
event: [push, manual, tag]
|
||||||
@@ -195,7 +193,7 @@ steps:
|
|||||||
elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
|
elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
|
||||||
DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-orchestrator:latest"
|
DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-orchestrator:latest"
|
||||||
fi
|
fi
|
||||||
/kaniko/executor --context . --dockerfile apps/orchestrator/Dockerfile --snapshot-mode=redo --cache=true --cache-repo git.mosaicstack.dev/mosaic/stack-orchestrator/cache $DESTINATIONS
|
/kaniko/executor --context . --dockerfile apps/orchestrator/Dockerfile --snapshot-mode=redo $DESTINATIONS
|
||||||
when:
|
when:
|
||||||
- branch: [main]
|
- branch: [main]
|
||||||
event: [push, manual, tag]
|
event: [push, manual, tag]
|
||||||
@@ -220,7 +218,7 @@ steps:
|
|||||||
elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
|
elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
|
||||||
DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-web:latest"
|
DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-web:latest"
|
||||||
fi
|
fi
|
||||||
/kaniko/executor --context . --dockerfile apps/web/Dockerfile --snapshot-mode=redo --cache=true --cache-repo git.mosaicstack.dev/mosaic/stack-web/cache --build-arg NEXT_PUBLIC_API_URL=https://api.mosaicstack.dev $DESTINATIONS
|
/kaniko/executor --context . --dockerfile apps/web/Dockerfile --snapshot-mode=redo --build-arg NEXT_PUBLIC_API_URL=https://api.mosaicstack.dev $DESTINATIONS
|
||||||
when:
|
when:
|
||||||
- branch: [main]
|
- branch: [main]
|
||||||
event: [push, manual, tag]
|
event: [push, manual, tag]
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
# Base image for all stages
|
# Base image for all stages
|
||||||
# Uses Debian slim (glibc) instead of Alpine (musl) because native Node.js addons
|
# Uses Debian slim (glibc) instead of Alpine (musl) because native Node.js addons
|
||||||
# (matrix-sdk-crypto-nodejs, Prisma engines) require glibc-compatible binaries.
|
# (matrix-sdk-crypto-nodejs, Prisma engines) require glibc-compatible binaries.
|
||||||
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS base
|
FROM node:24-slim AS base
|
||||||
|
|
||||||
# Install pnpm globally
|
# Install pnpm globally
|
||||||
RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
|
RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
|
||||||
@@ -19,9 +19,9 @@ COPY turbo.json ./
|
|||||||
FROM base AS deps
|
FROM base AS deps
|
||||||
|
|
||||||
# Install build tools for native addons (node-pty requires node-gyp compilation)
|
# Install build tools for native addons (node-pty requires node-gyp compilation)
|
||||||
# Note: openssl and ca-certificates pre-installed in base image
|
# and OpenSSL for Prisma engine detection
|
||||||
RUN apt-get update && apt-get install -y --no-install-recommends \
|
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||||
python3 make g++ \
|
python3 make g++ openssl \
|
||||||
&& rm -rf /var/lib/apt/lists/*
|
&& rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
# Copy all package.json files for workspace resolution
|
# Copy all package.json files for workspace resolution
|
||||||
@@ -30,9 +30,6 @@ COPY packages/ui/package.json ./packages/ui/
|
|||||||
COPY packages/config/package.json ./packages/config/
|
COPY packages/config/package.json ./packages/config/
|
||||||
COPY apps/api/package.json ./apps/api/
|
COPY apps/api/package.json ./apps/api/
|
||||||
|
|
||||||
# Copy npm configuration for native binary architecture hints
|
|
||||||
COPY .npmrc ./
|
|
||||||
|
|
||||||
# Install dependencies (no cache mount — Kaniko builds are ephemeral in CI)
|
# Install dependencies (no cache mount — Kaniko builds are ephemeral in CI)
|
||||||
# Then explicitly rebuild node-pty from source since pnpm may skip postinstall
|
# Then explicitly rebuild node-pty from source since pnpm may skip postinstall
|
||||||
# scripts or fail to find prebuilt binaries for this Node.js version
|
# scripts or fail to find prebuilt binaries for this Node.js version
|
||||||
@@ -64,14 +61,19 @@ RUN pnpm turbo build --filter=@mosaic/api --force
|
|||||||
# ======================
|
# ======================
|
||||||
# Production stage
|
# Production stage
|
||||||
# ======================
|
# ======================
|
||||||
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS production
|
FROM node:24-slim AS production
|
||||||
|
|
||||||
# dumb-init, openssl, ca-certificates pre-installed in base image
|
# Install dumb-init for proper signal handling (static binary from GitHub,
|
||||||
|
# avoids apt-get which fails under Kaniko with bookworm GPG signature errors)
|
||||||
|
ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.5/dumb-init_1.2.5_x86_64 /usr/local/bin/dumb-init
|
||||||
|
|
||||||
# Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
|
# Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
|
||||||
# - Remove npm/npx to reduce image size (not used in production)
|
# - openssl: Prisma engine detection requires libssl
|
||||||
# - Create non-root user
|
# - No build tools needed here — native addons are compiled in the deps stage
|
||||||
RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
|
RUN apt-get update && apt-get install -y --no-install-recommends openssl \
|
||||||
|
&& rm -rf /var/lib/apt/lists/* \
|
||||||
|
&& rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
|
||||||
|
&& chmod 755 /usr/local/bin/dumb-init \
|
||||||
&& groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nestjs
|
&& groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nestjs
|
||||||
|
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|||||||
@@ -36,7 +36,6 @@
|
|||||||
"@nestjs/mapped-types": "^2.1.0",
|
"@nestjs/mapped-types": "^2.1.0",
|
||||||
"@nestjs/platform-express": "^11.1.12",
|
"@nestjs/platform-express": "^11.1.12",
|
||||||
"@nestjs/platform-socket.io": "^11.1.12",
|
"@nestjs/platform-socket.io": "^11.1.12",
|
||||||
"@nestjs/schedule": "^6.1.1",
|
|
||||||
"@nestjs/throttler": "^6.5.0",
|
"@nestjs/throttler": "^6.5.0",
|
||||||
"@nestjs/websockets": "^11.1.12",
|
"@nestjs/websockets": "^11.1.12",
|
||||||
"@opentelemetry/api": "^1.9.0",
|
"@opentelemetry/api": "^1.9.0",
|
||||||
@@ -62,7 +61,6 @@
|
|||||||
"discord.js": "^14.25.1",
|
"discord.js": "^14.25.1",
|
||||||
"dockerode": "^4.0.9",
|
"dockerode": "^4.0.9",
|
||||||
"gray-matter": "^4.0.3",
|
"gray-matter": "^4.0.3",
|
||||||
"helmet": "^8.1.0",
|
|
||||||
"highlight.js": "^11.11.1",
|
"highlight.js": "^11.11.1",
|
||||||
"ioredis": "^5.9.2",
|
"ioredis": "^5.9.2",
|
||||||
"jose": "^6.1.3",
|
"jose": "^6.1.3",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { Controller, Get, Query, Param, UseGuards } from "@nestjs/common";
|
import { Controller, Get, Query, Param, UseGuards } from "@nestjs/common";
|
||||||
import { ActivityService } from "./activity.service";
|
import { ActivityService } from "./activity.service";
|
||||||
import { EntityType } from "@prisma/client";
|
import { EntityType } from "@prisma/client";
|
||||||
import { QueryActivityLogDto } from "./dto";
|
import type { QueryActivityLogDto } from "./dto";
|
||||||
import { AuthGuard } from "../auth/guards/auth.guard";
|
import { AuthGuard } from "../auth/guards/auth.guard";
|
||||||
import { WorkspaceGuard, PermissionGuard } from "../common/guards";
|
import { WorkspaceGuard, PermissionGuard } from "../common/guards";
|
||||||
import { Workspace, Permission, RequirePermission } from "../common/decorators";
|
import { Workspace, Permission, RequirePermission } from "../common/decorators";
|
||||||
|
|||||||
@@ -117,13 +117,12 @@ export class ActivityService {
|
|||||||
/**
|
/**
|
||||||
* Get a single activity log by ID
|
* Get a single activity log by ID
|
||||||
*/
|
*/
|
||||||
async findOne(id: string, workspaceId?: string): Promise<ActivityLogResult | null> {
|
async findOne(id: string, workspaceId: string): Promise<ActivityLogResult | null> {
|
||||||
const where: Prisma.ActivityLogWhereUniqueInput = { id };
|
|
||||||
if (workspaceId) {
|
|
||||||
where.workspaceId = workspaceId;
|
|
||||||
}
|
|
||||||
return await this.prisma.activityLog.findUnique({
|
return await this.prisma.activityLog.findUnique({
|
||||||
where,
|
where: {
|
||||||
|
id,
|
||||||
|
workspaceId,
|
||||||
|
},
|
||||||
include: {
|
include: {
|
||||||
user: {
|
user: {
|
||||||
select: {
|
select: {
|
||||||
|
|||||||
@@ -384,18 +384,10 @@ describe("ActivityLoggingInterceptor", () => {
|
|||||||
const context = createMockExecutionContext("POST", {}, body, user);
|
const context = createMockExecutionContext("POST", {}, body, user);
|
||||||
const next = createMockCallHandler(result);
|
const next = createMockCallHandler(result);
|
||||||
|
|
||||||
mockActivityService.logActivity.mockResolvedValue({
|
|
||||||
id: "activity-123",
|
|
||||||
});
|
|
||||||
|
|
||||||
await new Promise<void>((resolve) => {
|
await new Promise<void>((resolve) => {
|
||||||
interceptor.intercept(context, next).subscribe(() => {
|
interceptor.intercept(context, next).subscribe(() => {
|
||||||
// workspaceId is now optional, so logActivity should be called without it
|
// Should not call logActivity when workspaceId is missing
|
||||||
expect(mockActivityService.logActivity).toHaveBeenCalled();
|
expect(mockActivityService.logActivity).not.toHaveBeenCalled();
|
||||||
const callArgs = mockActivityService.logActivity.mock.calls[0][0];
|
|
||||||
expect(callArgs.userId).toBe("user-123");
|
|
||||||
expect(callArgs.entityId).toBe("task-123");
|
|
||||||
expect(callArgs.workspaceId).toBeUndefined();
|
|
||||||
resolve();
|
resolve();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -420,18 +412,10 @@ describe("ActivityLoggingInterceptor", () => {
|
|||||||
const context = createMockExecutionContext("POST", {}, body, user);
|
const context = createMockExecutionContext("POST", {}, body, user);
|
||||||
const next = createMockCallHandler(result);
|
const next = createMockCallHandler(result);
|
||||||
|
|
||||||
mockActivityService.logActivity.mockResolvedValue({
|
|
||||||
id: "activity-123",
|
|
||||||
});
|
|
||||||
|
|
||||||
await new Promise<void>((resolve) => {
|
await new Promise<void>((resolve) => {
|
||||||
interceptor.intercept(context, next).subscribe(() => {
|
interceptor.intercept(context, next).subscribe(() => {
|
||||||
// workspaceId is now optional, so logActivity should be called without it
|
// Should not call logActivity when workspaceId is missing
|
||||||
expect(mockActivityService.logActivity).toHaveBeenCalled();
|
expect(mockActivityService.logActivity).not.toHaveBeenCalled();
|
||||||
const callArgs = mockActivityService.logActivity.mock.calls[0][0];
|
|
||||||
expect(callArgs.userId).toBe("user-123");
|
|
||||||
expect(callArgs.entityId).toBe("task-123");
|
|
||||||
expect(callArgs.workspaceId).toBeUndefined();
|
|
||||||
resolve();
|
resolve();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import { tap } from "rxjs/operators";
|
|||||||
import { ActivityService } from "../activity.service";
|
import { ActivityService } from "../activity.service";
|
||||||
import { ActivityAction, EntityType } from "@prisma/client";
|
import { ActivityAction, EntityType } from "@prisma/client";
|
||||||
import type { Prisma } from "@prisma/client";
|
import type { Prisma } from "@prisma/client";
|
||||||
import type { CreateActivityLogInput } from "../interfaces/activity.interface";
|
|
||||||
import type { AuthenticatedRequest } from "../../common/types/user.types";
|
import type { AuthenticatedRequest } from "../../common/types/user.types";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -62,13 +61,10 @@ export class ActivityLoggingInterceptor implements NestInterceptor {
|
|||||||
// Extract entity information
|
// Extract entity information
|
||||||
const resultObj = result as Record<string, unknown> | undefined;
|
const resultObj = result as Record<string, unknown> | undefined;
|
||||||
const entityId = params.id ?? (resultObj?.id as string | undefined);
|
const entityId = params.id ?? (resultObj?.id as string | undefined);
|
||||||
|
|
||||||
// workspaceId is now optional - log events even when missing
|
|
||||||
const workspaceId = user.workspaceId ?? (body.workspaceId as string | undefined);
|
const workspaceId = user.workspaceId ?? (body.workspaceId as string | undefined);
|
||||||
|
|
||||||
// Log with warning if entityId is missing, but still proceed with logging if workspaceId exists
|
if (!entityId || !workspaceId) {
|
||||||
if (!entityId) {
|
this.logger.warn("Cannot log activity: missing entityId or workspaceId");
|
||||||
this.logger.warn("Cannot log activity: missing entityId");
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -96,8 +92,9 @@ export class ActivityLoggingInterceptor implements NestInterceptor {
|
|||||||
const userAgent =
|
const userAgent =
|
||||||
typeof userAgentHeader === "string" ? userAgentHeader : userAgentHeader?.[0];
|
typeof userAgentHeader === "string" ? userAgentHeader : userAgentHeader?.[0];
|
||||||
|
|
||||||
// Log the activity — workspaceId is optional
|
// Log the activity
|
||||||
const activityInput: CreateActivityLogInput = {
|
await this.activityService.logActivity({
|
||||||
|
workspaceId,
|
||||||
userId: user.id,
|
userId: user.id,
|
||||||
action,
|
action,
|
||||||
entityType,
|
entityType,
|
||||||
@@ -105,11 +102,7 @@ export class ActivityLoggingInterceptor implements NestInterceptor {
|
|||||||
details,
|
details,
|
||||||
ipAddress: ip ?? undefined,
|
ipAddress: ip ?? undefined,
|
||||||
userAgent: userAgent ?? undefined,
|
userAgent: userAgent ?? undefined,
|
||||||
};
|
});
|
||||||
if (workspaceId) {
|
|
||||||
activityInput.workspaceId = workspaceId;
|
|
||||||
}
|
|
||||||
await this.activityService.logActivity(activityInput);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// Don't fail the request if activity logging fails
|
// Don't fail the request if activity logging fails
|
||||||
this.logger.error(
|
this.logger.error(
|
||||||
|
|||||||
@@ -2,10 +2,9 @@ import type { ActivityAction, EntityType, Prisma } from "@prisma/client";
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Interface for creating a new activity log entry
|
* Interface for creating a new activity log entry
|
||||||
* workspaceId is optional - allows logging events without workspace context
|
|
||||||
*/
|
*/
|
||||||
export interface CreateActivityLogInput {
|
export interface CreateActivityLogInput {
|
||||||
workspaceId?: string | null;
|
workspaceId: string;
|
||||||
userId: string;
|
userId: string;
|
||||||
action: ActivityAction;
|
action: ActivityAction;
|
||||||
entityType: EntityType;
|
entityType: EntityType;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { Injectable, NotFoundException } from "@nestjs/common";
|
import { Injectable, NotFoundException } from "@nestjs/common";
|
||||||
import type { LlmProvider } from "@prisma/client";
|
import type { LlmProvider } from "@prisma/client";
|
||||||
import { createHash, timingSafeEqual } from "node:crypto";
|
import { timingSafeEqual } from "node:crypto";
|
||||||
import { PrismaService } from "../prisma/prisma.service";
|
import { PrismaService } from "../prisma/prisma.service";
|
||||||
import { CryptoService } from "../crypto/crypto.service";
|
import { CryptoService } from "../crypto/crypto.service";
|
||||||
|
|
||||||
@@ -143,23 +143,21 @@ export class AgentConfigService {
|
|||||||
}),
|
}),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
let match: ContainerTokenValidation | null = null;
|
|
||||||
|
|
||||||
for (const container of userContainers) {
|
for (const container of userContainers) {
|
||||||
const storedToken = this.decryptContainerToken(container.gatewayToken);
|
const storedToken = this.decryptContainerToken(container.gatewayToken);
|
||||||
if (!match && storedToken && this.tokensEqual(storedToken, token)) {
|
if (storedToken && this.tokensEqual(storedToken, token)) {
|
||||||
match = { type: "user", id: container.id };
|
return { type: "user", id: container.id };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const container of systemContainers) {
|
for (const container of systemContainers) {
|
||||||
const storedToken = this.decryptContainerToken(container.gatewayToken);
|
const storedToken = this.decryptContainerToken(container.gatewayToken);
|
||||||
if (!match && storedToken && this.tokensEqual(storedToken, token)) {
|
if (storedToken && this.tokensEqual(storedToken, token)) {
|
||||||
match = { type: "system", id: container.id };
|
return { type: "system", id: container.id };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return match;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
private buildOpenClawConfig(
|
private buildOpenClawConfig(
|
||||||
@@ -270,9 +268,14 @@ export class AgentConfigService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private tokensEqual(left: string, right: string): boolean {
|
private tokensEqual(left: string, right: string): boolean {
|
||||||
const leftDigest = createHash("sha256").update(left, "utf8").digest();
|
const leftBuffer = Buffer.from(left, "utf8");
|
||||||
const rightDigest = createHash("sha256").update(right, "utf8").digest();
|
const rightBuffer = Buffer.from(right, "utf8");
|
||||||
return timingSafeEqual(leftDigest, rightDigest);
|
|
||||||
|
if (leftBuffer.length !== rightBuffer.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return timingSafeEqual(leftBuffer, rightBuffer);
|
||||||
}
|
}
|
||||||
|
|
||||||
private hasModelId(modelEntry: unknown): modelEntry is { id: string } {
|
private hasModelId(modelEntry: unknown): modelEntry is { id: string } {
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import { Module } from "@nestjs/common";
|
|||||||
import { APP_INTERCEPTOR, APP_GUARD } from "@nestjs/core";
|
import { APP_INTERCEPTOR, APP_GUARD } from "@nestjs/core";
|
||||||
import { ThrottlerModule } from "@nestjs/throttler";
|
import { ThrottlerModule } from "@nestjs/throttler";
|
||||||
import { BullModule } from "@nestjs/bullmq";
|
import { BullModule } from "@nestjs/bullmq";
|
||||||
import { ScheduleModule } from "@nestjs/schedule";
|
|
||||||
import { ThrottlerValkeyStorageService, ThrottlerApiKeyGuard } from "./common/throttler";
|
import { ThrottlerValkeyStorageService, ThrottlerApiKeyGuard } from "./common/throttler";
|
||||||
import { CsrfGuard } from "./common/guards/csrf.guard";
|
import { CsrfGuard } from "./common/guards/csrf.guard";
|
||||||
import { CsrfService } from "./common/services/csrf.service";
|
import { CsrfService } from "./common/services/csrf.service";
|
||||||
@@ -54,11 +53,7 @@ import { ConversationArchiveModule } from "./conversation-archive/conversation-a
|
|||||||
import { RlsContextInterceptor } from "./common/interceptors/rls-context.interceptor";
|
import { RlsContextInterceptor } from "./common/interceptors/rls-context.interceptor";
|
||||||
import { AgentConfigModule } from "./agent-config/agent-config.module";
|
import { AgentConfigModule } from "./agent-config/agent-config.module";
|
||||||
import { ContainerLifecycleModule } from "./container-lifecycle/container-lifecycle.module";
|
import { ContainerLifecycleModule } from "./container-lifecycle/container-lifecycle.module";
|
||||||
import { ContainerReaperModule } from "./container-reaper/container-reaper.module";
|
|
||||||
import { FleetSettingsModule } from "./fleet-settings/fleet-settings.module";
|
import { FleetSettingsModule } from "./fleet-settings/fleet-settings.module";
|
||||||
import { OnboardingModule } from "./onboarding/onboarding.module";
|
|
||||||
import { ChatProxyModule } from "./chat-proxy/chat-proxy.module";
|
|
||||||
import { OrchestratorModule } from "./orchestrator/orchestrator.module";
|
|
||||||
|
|
||||||
@Module({
|
@Module({
|
||||||
imports: [
|
imports: [
|
||||||
@@ -89,7 +84,6 @@ import { OrchestratorModule } from "./orchestrator/orchestrator.module";
|
|||||||
};
|
};
|
||||||
})(),
|
})(),
|
||||||
}),
|
}),
|
||||||
ScheduleModule.forRoot(),
|
|
||||||
TelemetryModule,
|
TelemetryModule,
|
||||||
PrismaModule,
|
PrismaModule,
|
||||||
DatabaseModule,
|
DatabaseModule,
|
||||||
@@ -134,11 +128,7 @@ import { OrchestratorModule } from "./orchestrator/orchestrator.module";
|
|||||||
ConversationArchiveModule,
|
ConversationArchiveModule,
|
||||||
AgentConfigModule,
|
AgentConfigModule,
|
||||||
ContainerLifecycleModule,
|
ContainerLifecycleModule,
|
||||||
ContainerReaperModule,
|
|
||||||
FleetSettingsModule,
|
FleetSettingsModule,
|
||||||
OnboardingModule,
|
|
||||||
ChatProxyModule,
|
|
||||||
OrchestratorModule,
|
|
||||||
],
|
],
|
||||||
controllers: [AppController, CsrfController],
|
controllers: [AppController, CsrfController],
|
||||||
providers: [
|
providers: [
|
||||||
|
|||||||
@@ -106,7 +106,7 @@ export class AuthController {
|
|||||||
// @SkipCsrf avoids double-protection conflicts.
|
// @SkipCsrf avoids double-protection conflicts.
|
||||||
// See: https://www.better-auth.com/docs/reference/security
|
// See: https://www.better-auth.com/docs/reference/security
|
||||||
@SkipCsrf()
|
@SkipCsrf()
|
||||||
@Throttle({ default: { ttl: 60_000, limit: 5 } })
|
@Throttle({ strict: { limit: 10, ttl: 60000 } })
|
||||||
async handleAuth(@Req() req: ExpressRequest, @Res() res: ExpressResponse): Promise<void> {
|
async handleAuth(@Req() req: ExpressRequest, @Res() res: ExpressResponse): Promise<void> {
|
||||||
// Extract client IP for logging
|
// Extract client IP for logging
|
||||||
const clientIp = this.getClientIp(req);
|
const clientIp = this.getClientIp(req);
|
||||||
|
|||||||
@@ -1,102 +0,0 @@
|
|||||||
import {
|
|
||||||
Body,
|
|
||||||
Controller,
|
|
||||||
HttpException,
|
|
||||||
Logger,
|
|
||||||
Post,
|
|
||||||
Req,
|
|
||||||
Res,
|
|
||||||
UnauthorizedException,
|
|
||||||
UseGuards,
|
|
||||||
} from "@nestjs/common";
|
|
||||||
import type { Response } from "express";
|
|
||||||
import { AuthGuard } from "../auth/guards/auth.guard";
|
|
||||||
import type { MaybeAuthenticatedRequest } from "../auth/types/better-auth-request.interface";
|
|
||||||
import { ChatStreamDto } from "./chat-proxy.dto";
|
|
||||||
import { ChatProxyService } from "./chat-proxy.service";
|
|
||||||
|
|
||||||
@Controller("chat")
|
|
||||||
@UseGuards(AuthGuard)
|
|
||||||
export class ChatProxyController {
|
|
||||||
private readonly logger = new Logger(ChatProxyController.name);
|
|
||||||
|
|
||||||
constructor(private readonly chatProxyService: ChatProxyService) {}
|
|
||||||
|
|
||||||
// POST /api/chat/stream
|
|
||||||
// Request: { messages: Array<{role, content}> }
|
|
||||||
// Response: SSE stream of chat completion events
|
|
||||||
@Post("stream")
|
|
||||||
async streamChat(
|
|
||||||
@Body() body: ChatStreamDto,
|
|
||||||
@Req() req: MaybeAuthenticatedRequest,
|
|
||||||
@Res() res: Response
|
|
||||||
): Promise<void> {
|
|
||||||
const userId = req.user?.id;
|
|
||||||
if (!userId) {
|
|
||||||
throw new UnauthorizedException("No authenticated user found on request");
|
|
||||||
}
|
|
||||||
|
|
||||||
const abortController = new AbortController();
|
|
||||||
req.once("close", () => {
|
|
||||||
abortController.abort();
|
|
||||||
});
|
|
||||||
|
|
||||||
res.setHeader("Content-Type", "text/event-stream");
|
|
||||||
res.setHeader("Cache-Control", "no-cache");
|
|
||||||
res.setHeader("Connection", "keep-alive");
|
|
||||||
res.setHeader("X-Accel-Buffering", "no");
|
|
||||||
|
|
||||||
try {
|
|
||||||
const upstreamResponse = await this.chatProxyService.proxyChat(
|
|
||||||
userId,
|
|
||||||
body.messages,
|
|
||||||
abortController.signal
|
|
||||||
);
|
|
||||||
|
|
||||||
const upstreamContentType = upstreamResponse.headers.get("content-type");
|
|
||||||
if (upstreamContentType) {
|
|
||||||
res.setHeader("Content-Type", upstreamContentType);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!upstreamResponse.body) {
|
|
||||||
throw new Error("OpenClaw response did not include a stream body");
|
|
||||||
}
|
|
||||||
|
|
||||||
for await (const chunk of upstreamResponse.body as unknown as AsyncIterable<Uint8Array>) {
|
|
||||||
if (res.writableEnded || res.destroyed) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
res.write(Buffer.from(chunk));
|
|
||||||
}
|
|
||||||
} catch (error: unknown) {
|
|
||||||
this.logStreamError(error);
|
|
||||||
|
|
||||||
if (!res.writableEnded && !res.destroyed) {
|
|
||||||
res.write("event: error\n");
|
|
||||||
res.write(`data: ${JSON.stringify({ error: this.toSafeClientMessage(error) })}\n\n`);
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
if (!res.writableEnded && !res.destroyed) {
|
|
||||||
res.end();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private toSafeClientMessage(error: unknown): string {
|
|
||||||
if (error instanceof HttpException && error.getStatus() < 500) {
|
|
||||||
return "Chat request was rejected";
|
|
||||||
}
|
|
||||||
|
|
||||||
return "Chat stream failed";
|
|
||||||
}
|
|
||||||
|
|
||||||
private logStreamError(error: unknown): void {
|
|
||||||
if (error instanceof Error) {
|
|
||||||
this.logger.warn(`Chat stream failed: ${error.message}`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.logger.warn(`Chat stream failed: ${String(error)}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { Type } from "class-transformer";
|
|
||||||
import { ArrayMinSize, IsArray, IsNotEmpty, IsString, ValidateNested } from "class-validator";
|
|
||||||
|
|
||||||
export interface ChatMessage {
|
|
||||||
role: string;
|
|
||||||
content: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class ChatMessageDto implements ChatMessage {
|
|
||||||
@IsString({ message: "role must be a string" })
|
|
||||||
@IsNotEmpty({ message: "role is required" })
|
|
||||||
role!: string;
|
|
||||||
|
|
||||||
@IsString({ message: "content must be a string" })
|
|
||||||
@IsNotEmpty({ message: "content is required" })
|
|
||||||
content!: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class ChatStreamDto {
|
|
||||||
@IsArray({ message: "messages must be an array" })
|
|
||||||
@ArrayMinSize(1, { message: "messages must contain at least one message" })
|
|
||||||
@ValidateNested({ each: true })
|
|
||||||
@Type(() => ChatMessageDto)
|
|
||||||
messages!: ChatMessageDto[];
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import { Module } from "@nestjs/common";
|
|
||||||
import { AuthModule } from "../auth/auth.module";
|
|
||||||
import { AgentConfigModule } from "../agent-config/agent-config.module";
|
|
||||||
import { ContainerLifecycleModule } from "../container-lifecycle/container-lifecycle.module";
|
|
||||||
import { PrismaModule } from "../prisma/prisma.module";
|
|
||||||
import { ChatProxyController } from "./chat-proxy.controller";
|
|
||||||
import { ChatProxyService } from "./chat-proxy.service";
|
|
||||||
|
|
||||||
@Module({
|
|
||||||
imports: [AuthModule, PrismaModule, ContainerLifecycleModule, AgentConfigModule],
|
|
||||||
controllers: [ChatProxyController],
|
|
||||||
providers: [ChatProxyService],
|
|
||||||
exports: [ChatProxyService],
|
|
||||||
})
|
|
||||||
export class ChatProxyModule {}
|
|
||||||
@@ -1,108 +0,0 @@
|
|||||||
import { ServiceUnavailableException } from "@nestjs/common";
|
|
||||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
||||||
import { ChatProxyService } from "./chat-proxy.service";
|
|
||||||
|
|
||||||
describe("ChatProxyService", () => {
|
|
||||||
const userId = "user-123";
|
|
||||||
|
|
||||||
const prisma = {
|
|
||||||
userAgentConfig: {
|
|
||||||
findUnique: vi.fn(),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const containerLifecycle = {
|
|
||||||
ensureRunning: vi.fn(),
|
|
||||||
touch: vi.fn(),
|
|
||||||
};
|
|
||||||
|
|
||||||
let service: ChatProxyService;
|
|
||||||
let fetchMock: ReturnType<typeof vi.fn>;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fetchMock = vi.fn();
|
|
||||||
vi.stubGlobal("fetch", fetchMock);
|
|
||||||
service = new ChatProxyService(prisma as never, containerLifecycle as never);
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
vi.unstubAllGlobals();
|
|
||||||
vi.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("getContainerUrl", () => {
|
|
||||||
it("calls ensureRunning and touch for the user", async () => {
|
|
||||||
containerLifecycle.ensureRunning.mockResolvedValue({
|
|
||||||
url: "http://mosaic-user-user-123:19000",
|
|
||||||
token: "gateway-token",
|
|
||||||
});
|
|
||||||
containerLifecycle.touch.mockResolvedValue(undefined);
|
|
||||||
|
|
||||||
const url = await service.getContainerUrl(userId);
|
|
||||||
|
|
||||||
expect(url).toBe("http://mosaic-user-user-123:19000");
|
|
||||||
expect(containerLifecycle.ensureRunning).toHaveBeenCalledWith(userId);
|
|
||||||
expect(containerLifecycle.touch).toHaveBeenCalledWith(userId);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("proxyChat", () => {
|
|
||||||
it("forwards the request to the user's OpenClaw container", async () => {
|
|
||||||
containerLifecycle.ensureRunning.mockResolvedValue({
|
|
||||||
url: "http://mosaic-user-user-123:19000",
|
|
||||||
token: "gateway-token",
|
|
||||||
});
|
|
||||||
containerLifecycle.touch.mockResolvedValue(undefined);
|
|
||||||
fetchMock.mockResolvedValue(new Response("event: token\ndata: hello\n\n"));
|
|
||||||
|
|
||||||
const messages = [{ role: "user", content: "Hello from Mosaic" }];
|
|
||||||
const response = await service.proxyChat(userId, messages);
|
|
||||||
|
|
||||||
expect(response).toBeInstanceOf(Response);
|
|
||||||
expect(fetchMock).toHaveBeenCalledWith(
|
|
||||||
"http://mosaic-user-user-123:19000/v1/chat/completions",
|
|
||||||
expect.objectContaining({
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
Authorization: "Bearer gateway-token",
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
const [, request] = fetchMock.mock.calls[0] as [string, RequestInit];
|
|
||||||
const parsedBody = JSON.parse(String(request.body));
|
|
||||||
expect(parsedBody).toEqual({
|
|
||||||
messages,
|
|
||||||
model: "openclaw:default",
|
|
||||||
stream: true,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("throws ServiceUnavailableException on connection refused errors", async () => {
|
|
||||||
containerLifecycle.ensureRunning.mockResolvedValue({
|
|
||||||
url: "http://mosaic-user-user-123:19000",
|
|
||||||
token: "gateway-token",
|
|
||||||
});
|
|
||||||
containerLifecycle.touch.mockResolvedValue(undefined);
|
|
||||||
fetchMock.mockRejectedValue(new Error("connect ECONNREFUSED 127.0.0.1:19000"));
|
|
||||||
|
|
||||||
await expect(service.proxyChat(userId, [])).rejects.toBeInstanceOf(
|
|
||||||
ServiceUnavailableException
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("throws ServiceUnavailableException on timeout errors", async () => {
|
|
||||||
containerLifecycle.ensureRunning.mockResolvedValue({
|
|
||||||
url: "http://mosaic-user-user-123:19000",
|
|
||||||
token: "gateway-token",
|
|
||||||
});
|
|
||||||
containerLifecycle.touch.mockResolvedValue(undefined);
|
|
||||||
fetchMock.mockRejectedValue(new Error("The operation was aborted due to timeout"));
|
|
||||||
|
|
||||||
await expect(service.proxyChat(userId, [])).rejects.toBeInstanceOf(
|
|
||||||
ServiceUnavailableException
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
import {
|
|
||||||
BadGatewayException,
|
|
||||||
Injectable,
|
|
||||||
Logger,
|
|
||||||
ServiceUnavailableException,
|
|
||||||
} from "@nestjs/common";
|
|
||||||
import { ContainerLifecycleService } from "../container-lifecycle/container-lifecycle.service";
|
|
||||||
import { PrismaService } from "../prisma/prisma.service";
|
|
||||||
import type { ChatMessage } from "./chat-proxy.dto";
|
|
||||||
|
|
||||||
const DEFAULT_OPENCLAW_MODEL = "openclaw:default";
|
|
||||||
|
|
||||||
interface ContainerConnection {
|
|
||||||
url: string;
|
|
||||||
token: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class ChatProxyService {
|
|
||||||
private readonly logger = new Logger(ChatProxyService.name);
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private readonly prisma: PrismaService,
|
|
||||||
private readonly containerLifecycle: ContainerLifecycleService
|
|
||||||
) {}
|
|
||||||
|
|
||||||
// Get the user's OpenClaw container URL and mark it active.
|
|
||||||
async getContainerUrl(userId: string): Promise<string> {
|
|
||||||
const { url } = await this.getContainerConnection(userId);
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Proxy chat request to OpenClaw.
|
|
||||||
async proxyChat(
|
|
||||||
userId: string,
|
|
||||||
messages: ChatMessage[],
|
|
||||||
signal?: AbortSignal
|
|
||||||
): Promise<Response> {
|
|
||||||
const { url: containerUrl, token: gatewayToken } = await this.getContainerConnection(userId);
|
|
||||||
const model = await this.getPreferredModel(userId);
|
|
||||||
const requestInit: RequestInit = {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
Authorization: `Bearer ${gatewayToken}`,
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
messages,
|
|
||||||
model,
|
|
||||||
stream: true,
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
|
|
||||||
if (signal) {
|
|
||||||
requestInit.signal = signal;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${containerUrl}/v1/chat/completions`, requestInit);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const detail = await this.readResponseText(response);
|
|
||||||
const status = `${String(response.status)} ${response.statusText}`.trim();
|
|
||||||
this.logger.warn(
|
|
||||||
detail ? `OpenClaw returned ${status}: ${detail}` : `OpenClaw returned ${status}`
|
|
||||||
);
|
|
||||||
throw new BadGatewayException(`OpenClaw returned ${status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return response;
|
|
||||||
} catch (error: unknown) {
|
|
||||||
if (error instanceof BadGatewayException) {
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
|
|
||||||
const message = error instanceof Error ? error.message : String(error);
|
|
||||||
this.logger.warn(`Failed to proxy chat request: ${message}`);
|
|
||||||
throw new ServiceUnavailableException("Failed to proxy chat to OpenClaw");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async getContainerConnection(userId: string): Promise<ContainerConnection> {
|
|
||||||
const connection = await this.containerLifecycle.ensureRunning(userId);
|
|
||||||
await this.containerLifecycle.touch(userId);
|
|
||||||
return connection;
|
|
||||||
}
|
|
||||||
|
|
||||||
private async getPreferredModel(userId: string): Promise<string> {
|
|
||||||
const config = await this.prisma.userAgentConfig.findUnique({
|
|
||||||
where: { userId },
|
|
||||||
select: { primaryModel: true },
|
|
||||||
});
|
|
||||||
|
|
||||||
const primaryModel = config?.primaryModel?.trim();
|
|
||||||
if (!primaryModel) {
|
|
||||||
return DEFAULT_OPENCLAW_MODEL;
|
|
||||||
}
|
|
||||||
|
|
||||||
return primaryModel;
|
|
||||||
}
|
|
||||||
|
|
||||||
private async readResponseText(response: Response): Promise<string | null> {
|
|
||||||
try {
|
|
||||||
const text = (await response.text()).trim();
|
|
||||||
return text.length > 0 ? text : null;
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -87,17 +87,6 @@ describe("CsrfGuard", () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe("State-changing methods requiring CSRF", () => {
|
describe("State-changing methods requiring CSRF", () => {
|
||||||
it("should allow POST with Bearer auth without CSRF token", () => {
|
|
||||||
const context = createContext(
|
|
||||||
"POST",
|
|
||||||
{},
|
|
||||||
{ authorization: "Bearer api-token" },
|
|
||||||
false,
|
|
||||||
"user-123"
|
|
||||||
);
|
|
||||||
expect(guard.canActivate(context)).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should reject POST without CSRF token", () => {
|
it("should reject POST without CSRF token", () => {
|
||||||
const context = createContext("POST", {}, {}, false, "user-123");
|
const context = createContext("POST", {}, {}, false, "user-123");
|
||||||
expect(() => guard.canActivate(context)).toThrow(ForbiddenException);
|
expect(() => guard.canActivate(context)).toThrow(ForbiddenException);
|
||||||
|
|||||||
@@ -57,11 +57,6 @@ export class CsrfGuard implements CanActivate {
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
const authHeader = request.headers.authorization;
|
|
||||||
if (typeof authHeader === "string" && authHeader.startsWith("Bearer ")) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get CSRF token from cookie and header
|
// Get CSRF token from cookie and header
|
||||||
const cookies = request.cookies as Record<string, string> | undefined;
|
const cookies = request.cookies as Record<string, string> | undefined;
|
||||||
const cookieToken = cookies?.["csrf-token"];
|
const cookieToken = cookies?.["csrf-token"];
|
||||||
@@ -111,9 +106,14 @@ export class CsrfGuard implements CanActivate {
|
|||||||
|
|
||||||
throw new ForbiddenException("CSRF token not bound to session");
|
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;
|
return true;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,10 @@
|
|||||||
import { Module } from "@nestjs/common";
|
import { Module } from "@nestjs/common";
|
||||||
import { ConfigModule } from "@nestjs/config";
|
|
||||||
import { PrismaModule } from "../prisma/prisma.module";
|
import { PrismaModule } from "../prisma/prisma.module";
|
||||||
import { CryptoModule } from "../crypto/crypto.module";
|
import { CryptoModule } from "../crypto/crypto.module";
|
||||||
import { ContainerLifecycleService } from "./container-lifecycle.service";
|
import { ContainerLifecycleService } from "./container-lifecycle.service";
|
||||||
|
|
||||||
@Module({
|
@Module({
|
||||||
imports: [ConfigModule, PrismaModule, CryptoModule],
|
imports: [PrismaModule, CryptoModule],
|
||||||
providers: [ContainerLifecycleService],
|
providers: [ContainerLifecycleService],
|
||||||
exports: [ContainerLifecycleService],
|
exports: [ContainerLifecycleService],
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,10 +0,0 @@
|
|||||||
import { Module } from "@nestjs/common";
|
|
||||||
import { ScheduleModule } from "@nestjs/schedule";
|
|
||||||
import { ContainerLifecycleModule } from "../container-lifecycle/container-lifecycle.module";
|
|
||||||
import { ContainerReaperService } from "./container-reaper.service";
|
|
||||||
|
|
||||||
@Module({
|
|
||||||
imports: [ScheduleModule, ContainerLifecycleModule],
|
|
||||||
providers: [ContainerReaperService],
|
|
||||||
})
|
|
||||||
export class ContainerReaperModule {}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
||||||
import type { ContainerLifecycleService } from "../container-lifecycle/container-lifecycle.service";
|
|
||||||
import { ContainerReaperService } from "./container-reaper.service";
|
|
||||||
|
|
||||||
describe("ContainerReaperService", () => {
|
|
||||||
let service: ContainerReaperService;
|
|
||||||
let containerLifecycle: Pick<ContainerLifecycleService, "reapIdle">;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
containerLifecycle = {
|
|
||||||
reapIdle: vi.fn(),
|
|
||||||
};
|
|
||||||
service = new ContainerReaperService(containerLifecycle as ContainerLifecycleService);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("reapIdleContainers calls containerLifecycle.reapIdle()", async () => {
|
|
||||||
vi.mocked(containerLifecycle.reapIdle).mockResolvedValue({ stopped: [] });
|
|
||||||
|
|
||||||
await service.reapIdleContainers();
|
|
||||||
|
|
||||||
expect(containerLifecycle.reapIdle).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("reapIdleContainers handles errors gracefully", async () => {
|
|
||||||
const error = new Error("reap failure");
|
|
||||||
vi.mocked(containerLifecycle.reapIdle).mockRejectedValue(error);
|
|
||||||
const loggerError = vi.spyOn(service["logger"], "error").mockImplementation(() => {});
|
|
||||||
|
|
||||||
await expect(service.reapIdleContainers()).resolves.toBeUndefined();
|
|
||||||
|
|
||||||
expect(loggerError).toHaveBeenCalledWith(
|
|
||||||
"Failed to reap idle containers",
|
|
||||||
expect.stringContaining("reap failure")
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("reapIdleContainers logs stopped container count", async () => {
|
|
||||||
vi.mocked(containerLifecycle.reapIdle).mockResolvedValue({ stopped: ["user-1", "user-2"] });
|
|
||||||
const loggerLog = vi.spyOn(service["logger"], "log").mockImplementation(() => {});
|
|
||||||
|
|
||||||
await service.reapIdleContainers();
|
|
||||||
|
|
||||||
expect(loggerLog).toHaveBeenCalledWith("Stopped 2 idle containers: user-1, user-2");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
import { Injectable, Logger } from "@nestjs/common";
|
|
||||||
import { Cron, CronExpression } from "@nestjs/schedule";
|
|
||||||
import { ContainerLifecycleService } from "../container-lifecycle/container-lifecycle.service";
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class ContainerReaperService {
|
|
||||||
private readonly logger = new Logger(ContainerReaperService.name);
|
|
||||||
|
|
||||||
constructor(private readonly containerLifecycle: ContainerLifecycleService) {}
|
|
||||||
|
|
||||||
@Cron(CronExpression.EVERY_5_MINUTES)
|
|
||||||
async reapIdleContainers(): Promise<void> {
|
|
||||||
this.logger.log("Running idle container reap cycle...");
|
|
||||||
try {
|
|
||||||
const result = await this.containerLifecycle.reapIdle();
|
|
||||||
if (result.stopped.length > 0) {
|
|
||||||
this.logger.log(
|
|
||||||
`Stopped ${String(result.stopped.length)} idle containers: ${result.stopped.join(", ")}`
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
this.logger.debug("No idle containers to stop");
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
this.logger.error(
|
|
||||||
"Failed to reap idle containers",
|
|
||||||
error instanceof Error ? error.stack : String(error)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -3,7 +3,7 @@ import { DashboardService } from "./dashboard.service";
|
|||||||
import { AuthGuard } from "../auth/guards/auth.guard";
|
import { AuthGuard } from "../auth/guards/auth.guard";
|
||||||
import { WorkspaceGuard, PermissionGuard } from "../common/guards";
|
import { WorkspaceGuard, PermissionGuard } from "../common/guards";
|
||||||
import { Workspace, Permission, RequirePermission } from "../common/decorators";
|
import { Workspace, Permission, RequirePermission } from "../common/decorators";
|
||||||
import { DashboardSummaryDto } from "./dto";
|
import type { DashboardSummaryDto } from "./dto";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Controller for dashboard endpoints.
|
* Controller for dashboard endpoints.
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ import type { AuthUser } from "@mosaic/shared";
|
|||||||
import { CurrentUser } from "../auth/decorators/current-user.decorator";
|
import { CurrentUser } from "../auth/decorators/current-user.decorator";
|
||||||
import { AdminGuard } from "../auth/guards/admin.guard";
|
import { AdminGuard } from "../auth/guards/admin.guard";
|
||||||
import { AuthGuard } from "../auth/guards/auth.guard";
|
import { AuthGuard } from "../auth/guards/auth.guard";
|
||||||
import {
|
import type {
|
||||||
CreateProviderDto,
|
CreateProviderDto,
|
||||||
ResetPasswordDto,
|
ResetPasswordDto,
|
||||||
UpdateAgentConfigDto,
|
UpdateAgentConfigDto,
|
||||||
|
|||||||
@@ -1,12 +1,11 @@
|
|||||||
import { Module } from "@nestjs/common";
|
import { Module } from "@nestjs/common";
|
||||||
import { AuthModule } from "../auth/auth.module";
|
|
||||||
import { PrismaModule } from "../prisma/prisma.module";
|
import { PrismaModule } from "../prisma/prisma.module";
|
||||||
import { CryptoModule } from "../crypto/crypto.module";
|
import { CryptoModule } from "../crypto/crypto.module";
|
||||||
import { FleetSettingsController } from "./fleet-settings.controller";
|
import { FleetSettingsController } from "./fleet-settings.controller";
|
||||||
import { FleetSettingsService } from "./fleet-settings.service";
|
import { FleetSettingsService } from "./fleet-settings.service";
|
||||||
|
|
||||||
@Module({
|
@Module({
|
||||||
imports: [AuthModule, PrismaModule, CryptoModule],
|
imports: [PrismaModule, CryptoModule],
|
||||||
controllers: [FleetSettingsController],
|
controllers: [FleetSettingsController],
|
||||||
providers: [FleetSettingsService],
|
providers: [FleetSettingsService],
|
||||||
exports: [FleetSettingsService],
|
exports: [FleetSettingsService],
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { Controller, Get, Param, Query } from "@nestjs/common";
|
import { Controller, Get, Param, Query } from "@nestjs/common";
|
||||||
import type { LlmUsageLog } from "@prisma/client";
|
import type { LlmUsageLog } from "@prisma/client";
|
||||||
import { LlmUsageService } from "./llm-usage.service";
|
import { LlmUsageService } from "./llm-usage.service";
|
||||||
import { UsageAnalyticsQueryDto, UsageAnalyticsResponseDto } from "./dto";
|
import type { UsageAnalyticsQueryDto, UsageAnalyticsResponseDto } from "./dto";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* LLM Usage Controller
|
* LLM Usage Controller
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { NestFactory } from "@nestjs/core";
|
import { NestFactory } from "@nestjs/core";
|
||||||
import { RequestMethod, ValidationPipe } from "@nestjs/common";
|
import { RequestMethod, ValidationPipe } from "@nestjs/common";
|
||||||
import cookieParser from "cookie-parser";
|
import cookieParser from "cookie-parser";
|
||||||
import helmet from "helmet";
|
|
||||||
import { AppModule } from "./app.module";
|
import { AppModule } from "./app.module";
|
||||||
import { getTrustedOrigins } from "./auth/auth.config";
|
import { getTrustedOrigins } from "./auth/auth.config";
|
||||||
import { GlobalExceptionFilter } from "./filters/global-exception.filter";
|
import { GlobalExceptionFilter } from "./filters/global-exception.filter";
|
||||||
@@ -34,14 +33,6 @@ async function bootstrap() {
|
|||||||
// Enable cookie parser for session handling
|
// Enable cookie parser for session handling
|
||||||
app.use(cookieParser());
|
app.use(cookieParser());
|
||||||
|
|
||||||
// Enable helmet security headers
|
|
||||||
app.use(
|
|
||||||
helmet({
|
|
||||||
contentSecurityPolicy: false, // Let Next.js handle CSP
|
|
||||||
crossOriginEmbedderPolicy: false,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// Enable global validation pipe with transformation
|
// Enable global validation pipe with transformation
|
||||||
app.useGlobalPipes(
|
app.useGlobalPipes(
|
||||||
new ValidationPipe({
|
new ValidationPipe({
|
||||||
|
|||||||
@@ -1,63 +0,0 @@
|
|||||||
import { Body, Controller, Get, HttpCode, HttpStatus, Post, UseGuards } from "@nestjs/common";
|
|
||||||
import {
|
|
||||||
AddProviderDto,
|
|
||||||
ConfigureOidcDto,
|
|
||||||
CreateBreakglassDto,
|
|
||||||
TestProviderDto,
|
|
||||||
} from "./onboarding.dto";
|
|
||||||
import { OnboardingGuard } from "./onboarding.guard";
|
|
||||||
import { OnboardingService } from "./onboarding.service";
|
|
||||||
|
|
||||||
@Controller("onboarding")
|
|
||||||
export class OnboardingController {
|
|
||||||
constructor(private readonly onboardingService: OnboardingService) {}
|
|
||||||
|
|
||||||
// GET /api/onboarding/status — returns { completed: boolean }
|
|
||||||
@Get("status")
|
|
||||||
async status(): Promise<{ completed: boolean }> {
|
|
||||||
return {
|
|
||||||
completed: await this.onboardingService.isCompleted(),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// POST /api/onboarding/breakglass — body: { username, password } → create admin
|
|
||||||
@Post("breakglass")
|
|
||||||
@UseGuards(OnboardingGuard)
|
|
||||||
async createBreakglass(
|
|
||||||
@Body() body: CreateBreakglassDto
|
|
||||||
): Promise<{ id: string; username: string }> {
|
|
||||||
return this.onboardingService.createBreakglassUser(body.username, body.password);
|
|
||||||
}
|
|
||||||
|
|
||||||
// POST /api/onboarding/oidc — body: { issuerUrl, clientId, clientSecret } → save OIDC
|
|
||||||
@Post("oidc")
|
|
||||||
@UseGuards(OnboardingGuard)
|
|
||||||
@HttpCode(HttpStatus.NO_CONTENT)
|
|
||||||
async configureOidc(@Body() body: ConfigureOidcDto): Promise<void> {
|
|
||||||
await this.onboardingService.configureOidc(body.issuerUrl, body.clientId, body.clientSecret);
|
|
||||||
}
|
|
||||||
|
|
||||||
// POST /api/onboarding/provider — body: { name, displayName, type, baseUrl?, apiKey?, models? } → add provider
|
|
||||||
@Post("provider")
|
|
||||||
@UseGuards(OnboardingGuard)
|
|
||||||
async addProvider(@Body() body: AddProviderDto): Promise<{ id: string }> {
|
|
||||||
const userId = await this.onboardingService.getBreakglassUserId();
|
|
||||||
|
|
||||||
return this.onboardingService.addProvider(userId, body);
|
|
||||||
}
|
|
||||||
|
|
||||||
// POST /api/onboarding/provider/test — body: { type, baseUrl?, apiKey? } → test connection
|
|
||||||
@Post("provider/test")
|
|
||||||
@UseGuards(OnboardingGuard)
|
|
||||||
async testProvider(@Body() body: TestProviderDto): Promise<{ success: boolean; error?: string }> {
|
|
||||||
return this.onboardingService.testProvider(body.type, body.baseUrl, body.apiKey);
|
|
||||||
}
|
|
||||||
|
|
||||||
// POST /api/onboarding/complete — mark done
|
|
||||||
@Post("complete")
|
|
||||||
@UseGuards(OnboardingGuard)
|
|
||||||
@HttpCode(HttpStatus.NO_CONTENT)
|
|
||||||
async complete(): Promise<void> {
|
|
||||||
await this.onboardingService.complete();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
import { Type } from "class-transformer";
|
|
||||||
import { IsArray, IsOptional, IsString, IsUrl, MinLength, ValidateNested } from "class-validator";
|
|
||||||
|
|
||||||
export class CreateBreakglassDto {
|
|
||||||
@IsString()
|
|
||||||
@MinLength(3)
|
|
||||||
username!: string;
|
|
||||||
|
|
||||||
@IsString()
|
|
||||||
@MinLength(8)
|
|
||||||
password!: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class ConfigureOidcDto {
|
|
||||||
@IsString()
|
|
||||||
@IsUrl({ require_tld: false })
|
|
||||||
issuerUrl!: string;
|
|
||||||
|
|
||||||
@IsString()
|
|
||||||
clientId!: string;
|
|
||||||
|
|
||||||
@IsString()
|
|
||||||
clientSecret!: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class ProviderModelDto {
|
|
||||||
@IsString()
|
|
||||||
id!: string;
|
|
||||||
|
|
||||||
@IsOptional()
|
|
||||||
@IsString()
|
|
||||||
name?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class AddProviderDto {
|
|
||||||
@IsString()
|
|
||||||
name!: string;
|
|
||||||
|
|
||||||
@IsString()
|
|
||||||
displayName!: string;
|
|
||||||
|
|
||||||
@IsString()
|
|
||||||
type!: string;
|
|
||||||
|
|
||||||
@IsOptional()
|
|
||||||
@IsString()
|
|
||||||
baseUrl?: string;
|
|
||||||
|
|
||||||
@IsOptional()
|
|
||||||
@IsString()
|
|
||||||
apiKey?: string;
|
|
||||||
|
|
||||||
@IsOptional()
|
|
||||||
@IsArray()
|
|
||||||
@ValidateNested({ each: true })
|
|
||||||
@Type(() => ProviderModelDto)
|
|
||||||
models?: ProviderModelDto[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export class TestProviderDto {
|
|
||||||
@IsString()
|
|
||||||
type!: string;
|
|
||||||
|
|
||||||
@IsOptional()
|
|
||||||
@IsString()
|
|
||||||
baseUrl?: string;
|
|
||||||
|
|
||||||
@IsOptional()
|
|
||||||
@IsString()
|
|
||||||
apiKey?: string;
|
|
||||||
}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
import { CanActivate, ExecutionContext, ForbiddenException, Injectable } from "@nestjs/common";
|
|
||||||
import { OnboardingService } from "./onboarding.service";
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class OnboardingGuard implements CanActivate {
|
|
||||||
constructor(private readonly onboardingService: OnboardingService) {}
|
|
||||||
|
|
||||||
async canActivate(_context: ExecutionContext): Promise<boolean> {
|
|
||||||
const completed = await this.onboardingService.isCompleted();
|
|
||||||
|
|
||||||
if (completed) {
|
|
||||||
throw new ForbiddenException("Onboarding already completed");
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import { Module } from "@nestjs/common";
|
|
||||||
import { ConfigModule } from "@nestjs/config";
|
|
||||||
import { PrismaModule } from "../prisma/prisma.module";
|
|
||||||
import { CryptoModule } from "../crypto/crypto.module";
|
|
||||||
import { OnboardingController } from "./onboarding.controller";
|
|
||||||
import { OnboardingService } from "./onboarding.service";
|
|
||||||
import { OnboardingGuard } from "./onboarding.guard";
|
|
||||||
|
|
||||||
@Module({
|
|
||||||
imports: [PrismaModule, CryptoModule, ConfigModule],
|
|
||||||
controllers: [OnboardingController],
|
|
||||||
providers: [OnboardingService, OnboardingGuard],
|
|
||||||
exports: [OnboardingService],
|
|
||||||
})
|
|
||||||
export class OnboardingModule {}
|
|
||||||
@@ -1,206 +0,0 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
||||||
import { hash } from "bcryptjs";
|
|
||||||
import { OnboardingService } from "./onboarding.service";
|
|
||||||
import { PrismaService } from "../prisma/prisma.service";
|
|
||||||
import { CryptoService } from "../crypto/crypto.service";
|
|
||||||
|
|
||||||
vi.mock("bcryptjs", () => ({
|
|
||||||
hash: vi.fn(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe("OnboardingService", () => {
|
|
||||||
let service: OnboardingService;
|
|
||||||
|
|
||||||
const mockPrismaService = {
|
|
||||||
systemConfig: {
|
|
||||||
findUnique: vi.fn(),
|
|
||||||
upsert: vi.fn(),
|
|
||||||
},
|
|
||||||
breakglassUser: {
|
|
||||||
count: vi.fn(),
|
|
||||||
create: vi.fn(),
|
|
||||||
findFirst: vi.fn(),
|
|
||||||
},
|
|
||||||
llmProvider: {
|
|
||||||
create: vi.fn(),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const mockCryptoService = {
|
|
||||||
encrypt: vi.fn(),
|
|
||||||
};
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
|
|
||||||
service = new OnboardingService(
|
|
||||||
mockPrismaService as unknown as PrismaService,
|
|
||||||
mockCryptoService as unknown as CryptoService
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("isCompleted returns false when no config exists", async () => {
|
|
||||||
mockPrismaService.systemConfig.findUnique.mockResolvedValue(null);
|
|
||||||
|
|
||||||
await expect(service.isCompleted()).resolves.toBe(false);
|
|
||||||
expect(mockPrismaService.systemConfig.findUnique).toHaveBeenCalledWith({
|
|
||||||
where: { key: "onboarding.completed" },
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("isCompleted returns true when completed", async () => {
|
|
||||||
mockPrismaService.systemConfig.findUnique.mockResolvedValue({
|
|
||||||
id: "cfg-1",
|
|
||||||
key: "onboarding.completed",
|
|
||||||
value: "true",
|
|
||||||
encrypted: false,
|
|
||||||
updatedAt: new Date(),
|
|
||||||
});
|
|
||||||
|
|
||||||
await expect(service.isCompleted()).resolves.toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("createBreakglassUser hashes password and creates record", async () => {
|
|
||||||
const mockedHash = vi.mocked(hash);
|
|
||||||
mockedHash.mockResolvedValue("hashed-password");
|
|
||||||
|
|
||||||
mockPrismaService.breakglassUser.count.mockResolvedValue(0);
|
|
||||||
mockPrismaService.breakglassUser.create.mockResolvedValue({
|
|
||||||
id: "breakglass-1",
|
|
||||||
username: "admin",
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await service.createBreakglassUser("admin", "supersecret123");
|
|
||||||
|
|
||||||
expect(mockedHash).toHaveBeenCalledWith("supersecret123", 12);
|
|
||||||
expect(mockPrismaService.breakglassUser.create).toHaveBeenCalledWith({
|
|
||||||
data: {
|
|
||||||
username: "admin",
|
|
||||||
passwordHash: "hashed-password",
|
|
||||||
},
|
|
||||||
select: {
|
|
||||||
id: true,
|
|
||||||
username: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(result).toEqual({ id: "breakglass-1", username: "admin" });
|
|
||||||
});
|
|
||||||
|
|
||||||
it("createBreakglassUser rejects if user already exists", async () => {
|
|
||||||
mockPrismaService.breakglassUser.count.mockResolvedValue(1);
|
|
||||||
|
|
||||||
await expect(service.createBreakglassUser("admin", "supersecret123")).rejects.toThrow(
|
|
||||||
"Breakglass user already exists"
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("configureOidc encrypts secret and saves to SystemConfig", async () => {
|
|
||||||
mockCryptoService.encrypt.mockReturnValue("enc:oidc-secret");
|
|
||||||
mockPrismaService.systemConfig.upsert.mockResolvedValue({
|
|
||||||
id: "cfg",
|
|
||||||
key: "oidc.clientSecret",
|
|
||||||
value: "enc:oidc-secret",
|
|
||||||
encrypted: true,
|
|
||||||
updatedAt: new Date(),
|
|
||||||
});
|
|
||||||
|
|
||||||
await service.configureOidc("https://auth.example.com", "client-id", "client-secret");
|
|
||||||
|
|
||||||
expect(mockCryptoService.encrypt).toHaveBeenCalledWith("client-secret");
|
|
||||||
expect(mockPrismaService.systemConfig.upsert).toHaveBeenCalledTimes(3);
|
|
||||||
expect(mockPrismaService.systemConfig.upsert).toHaveBeenCalledWith({
|
|
||||||
where: { key: "oidc.issuerUrl" },
|
|
||||||
create: {
|
|
||||||
key: "oidc.issuerUrl",
|
|
||||||
value: "https://auth.example.com",
|
|
||||||
encrypted: false,
|
|
||||||
},
|
|
||||||
update: {
|
|
||||||
value: "https://auth.example.com",
|
|
||||||
encrypted: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(mockPrismaService.systemConfig.upsert).toHaveBeenCalledWith({
|
|
||||||
where: { key: "oidc.clientId" },
|
|
||||||
create: {
|
|
||||||
key: "oidc.clientId",
|
|
||||||
value: "client-id",
|
|
||||||
encrypted: false,
|
|
||||||
},
|
|
||||||
update: {
|
|
||||||
value: "client-id",
|
|
||||||
encrypted: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(mockPrismaService.systemConfig.upsert).toHaveBeenCalledWith({
|
|
||||||
where: { key: "oidc.clientSecret" },
|
|
||||||
create: {
|
|
||||||
key: "oidc.clientSecret",
|
|
||||||
value: "enc:oidc-secret",
|
|
||||||
encrypted: true,
|
|
||||||
},
|
|
||||||
update: {
|
|
||||||
value: "enc:oidc-secret",
|
|
||||||
encrypted: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("addProvider encrypts apiKey and creates LlmProvider", async () => {
|
|
||||||
mockCryptoService.encrypt.mockReturnValue("enc:api-key");
|
|
||||||
mockPrismaService.llmProvider.create.mockResolvedValue({
|
|
||||||
id: "provider-1",
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await service.addProvider("breakglass-1", {
|
|
||||||
name: "my-openai",
|
|
||||||
displayName: "OpenAI",
|
|
||||||
type: "openai",
|
|
||||||
baseUrl: "https://api.openai.com/v1",
|
|
||||||
apiKey: "sk-test",
|
|
||||||
models: [{ id: "gpt-4o-mini", name: "GPT-4o Mini" }],
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(mockCryptoService.encrypt).toHaveBeenCalledWith("sk-test");
|
|
||||||
expect(mockPrismaService.llmProvider.create).toHaveBeenCalledWith({
|
|
||||||
data: {
|
|
||||||
userId: "breakglass-1",
|
|
||||||
name: "my-openai",
|
|
||||||
displayName: "OpenAI",
|
|
||||||
type: "openai",
|
|
||||||
baseUrl: "https://api.openai.com/v1",
|
|
||||||
apiKey: "enc:api-key",
|
|
||||||
models: [{ id: "gpt-4o-mini", name: "GPT-4o Mini" }],
|
|
||||||
},
|
|
||||||
select: {
|
|
||||||
id: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(result).toEqual({ id: "provider-1" });
|
|
||||||
});
|
|
||||||
|
|
||||||
it("complete sets SystemConfig flag", async () => {
|
|
||||||
mockPrismaService.systemConfig.upsert.mockResolvedValue({
|
|
||||||
id: "cfg-1",
|
|
||||||
key: "onboarding.completed",
|
|
||||||
value: "true",
|
|
||||||
encrypted: false,
|
|
||||||
updatedAt: new Date(),
|
|
||||||
});
|
|
||||||
|
|
||||||
await service.complete();
|
|
||||||
|
|
||||||
expect(mockPrismaService.systemConfig.upsert).toHaveBeenCalledWith({
|
|
||||||
where: { key: "onboarding.completed" },
|
|
||||||
create: {
|
|
||||||
key: "onboarding.completed",
|
|
||||||
value: "true",
|
|
||||||
encrypted: false,
|
|
||||||
},
|
|
||||||
update: {
|
|
||||||
value: "true",
|
|
||||||
encrypted: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,191 +0,0 @@
|
|||||||
import { BadRequestException, ConflictException, Injectable } from "@nestjs/common";
|
|
||||||
import type { InputJsonValue } from "@prisma/client/runtime/library";
|
|
||||||
import { hash } from "bcryptjs";
|
|
||||||
import { PrismaService } from "../prisma/prisma.service";
|
|
||||||
import { CryptoService } from "../crypto/crypto.service";
|
|
||||||
|
|
||||||
const BCRYPT_ROUNDS = 12;
|
|
||||||
const TEST_PROVIDER_TIMEOUT_MS = 8000;
|
|
||||||
|
|
||||||
const ONBOARDING_COMPLETED_KEY = "onboarding.completed";
|
|
||||||
const OIDC_ISSUER_URL_KEY = "oidc.issuerUrl";
|
|
||||||
const OIDC_CLIENT_ID_KEY = "oidc.clientId";
|
|
||||||
const OIDC_CLIENT_SECRET_KEY = "oidc.clientSecret";
|
|
||||||
|
|
||||||
interface ProviderModelInput {
|
|
||||||
id: string;
|
|
||||||
name?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface AddProviderInput {
|
|
||||||
name: string;
|
|
||||||
displayName: string;
|
|
||||||
type: string;
|
|
||||||
baseUrl?: string;
|
|
||||||
apiKey?: string;
|
|
||||||
models?: ProviderModelInput[];
|
|
||||||
}
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class OnboardingService {
|
|
||||||
constructor(
|
|
||||||
private readonly prisma: PrismaService,
|
|
||||||
private readonly crypto: CryptoService
|
|
||||||
) {}
|
|
||||||
|
|
||||||
// Check if onboarding is completed
|
|
||||||
async isCompleted(): Promise<boolean> {
|
|
||||||
const completedFlag = await this.prisma.systemConfig.findUnique({
|
|
||||||
where: { key: ONBOARDING_COMPLETED_KEY },
|
|
||||||
});
|
|
||||||
|
|
||||||
return completedFlag?.value === "true";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 1: Create breakglass admin user
|
|
||||||
async createBreakglassUser(
|
|
||||||
username: string,
|
|
||||||
password: string
|
|
||||||
): Promise<{ id: string; username: string }> {
|
|
||||||
const breakglassCount = await this.prisma.breakglassUser.count();
|
|
||||||
if (breakglassCount > 0) {
|
|
||||||
throw new ConflictException("Breakglass user already exists");
|
|
||||||
}
|
|
||||||
|
|
||||||
const passwordHash = await hash(password, BCRYPT_ROUNDS);
|
|
||||||
|
|
||||||
return this.prisma.breakglassUser.create({
|
|
||||||
data: {
|
|
||||||
username,
|
|
||||||
passwordHash,
|
|
||||||
},
|
|
||||||
select: {
|
|
||||||
id: true,
|
|
||||||
username: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 2: Configure OIDC provider (optional)
|
|
||||||
async configureOidc(issuerUrl: string, clientId: string, clientSecret: string): Promise<void> {
|
|
||||||
const encryptedSecret = this.crypto.encrypt(clientSecret);
|
|
||||||
|
|
||||||
await Promise.all([
|
|
||||||
this.upsertSystemConfig(OIDC_ISSUER_URL_KEY, issuerUrl, false),
|
|
||||||
this.upsertSystemConfig(OIDC_CLIENT_ID_KEY, clientId, false),
|
|
||||||
this.upsertSystemConfig(OIDC_CLIENT_SECRET_KEY, encryptedSecret, true),
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 3: Add first LLM provider
|
|
||||||
async addProvider(userId: string, data: AddProviderInput): Promise<{ id: string }> {
|
|
||||||
const encryptedApiKey = data.apiKey ? this.crypto.encrypt(data.apiKey) : undefined;
|
|
||||||
|
|
||||||
return this.prisma.llmProvider.create({
|
|
||||||
data: {
|
|
||||||
userId,
|
|
||||||
name: data.name,
|
|
||||||
displayName: data.displayName,
|
|
||||||
type: data.type,
|
|
||||||
baseUrl: data.baseUrl ?? null,
|
|
||||||
apiKey: encryptedApiKey ?? null,
|
|
||||||
models: (data.models ?? []) as unknown as InputJsonValue,
|
|
||||||
},
|
|
||||||
select: {
|
|
||||||
id: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 3b: Test LLM provider connection
|
|
||||||
async testProvider(
|
|
||||||
type: string,
|
|
||||||
baseUrl?: string,
|
|
||||||
apiKey?: string
|
|
||||||
): Promise<{ success: boolean; error?: string }> {
|
|
||||||
const normalizedType = type.trim().toLowerCase();
|
|
||||||
if (!normalizedType) {
|
|
||||||
return { success: false, error: "Provider type is required" };
|
|
||||||
}
|
|
||||||
|
|
||||||
let probeUrl: string;
|
|
||||||
try {
|
|
||||||
probeUrl = this.buildProbeUrl(normalizedType, baseUrl);
|
|
||||||
} catch (error: unknown) {
|
|
||||||
const message = error instanceof Error ? error.message : String(error);
|
|
||||||
return { success: false, error: message };
|
|
||||||
}
|
|
||||||
|
|
||||||
const headers: Record<string, string> = {
|
|
||||||
Accept: "application/json",
|
|
||||||
};
|
|
||||||
if (apiKey) {
|
|
||||||
headers.Authorization = `Bearer ${apiKey}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(probeUrl, {
|
|
||||||
method: "GET",
|
|
||||||
headers,
|
|
||||||
signal: AbortSignal.timeout(TEST_PROVIDER_TIMEOUT_MS),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
return {
|
|
||||||
success: false,
|
|
||||||
error: `Provider returned ${String(response.status)} ${response.statusText}`.trim(),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return { success: true };
|
|
||||||
} catch (error: unknown) {
|
|
||||||
const message = error instanceof Error ? error.message : String(error);
|
|
||||||
return { success: false, error: message };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 4: Mark onboarding complete
|
|
||||||
async complete(): Promise<void> {
|
|
||||||
await this.upsertSystemConfig(ONBOARDING_COMPLETED_KEY, "true", false);
|
|
||||||
}
|
|
||||||
|
|
||||||
async getBreakglassUserId(): Promise<string> {
|
|
||||||
const user = await this.prisma.breakglassUser.findFirst({
|
|
||||||
where: { isActive: true },
|
|
||||||
orderBy: { createdAt: "asc" },
|
|
||||||
select: { id: true },
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
throw new BadRequestException("Create a breakglass user before adding a provider");
|
|
||||||
}
|
|
||||||
|
|
||||||
return user.id;
|
|
||||||
}
|
|
||||||
|
|
||||||
private async upsertSystemConfig(key: string, value: string, encrypted: boolean): Promise<void> {
|
|
||||||
await this.prisma.systemConfig.upsert({
|
|
||||||
where: { key },
|
|
||||||
create: { key, value, encrypted },
|
|
||||||
update: { value, encrypted },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private buildProbeUrl(type: string, baseUrl?: string): string {
|
|
||||||
const resolvedBaseUrl = baseUrl ?? this.getDefaultProviderBaseUrl(type);
|
|
||||||
const normalizedBaseUrl = resolvedBaseUrl.endsWith("/")
|
|
||||||
? resolvedBaseUrl
|
|
||||||
: `${resolvedBaseUrl}/`;
|
|
||||||
const endpointPath = type === "ollama" ? "api/tags" : "models";
|
|
||||||
|
|
||||||
return new URL(endpointPath, normalizedBaseUrl).toString();
|
|
||||||
}
|
|
||||||
|
|
||||||
private getDefaultProviderBaseUrl(type: string): string {
|
|
||||||
if (type === "ollama") {
|
|
||||||
return "http://localhost:11434";
|
|
||||||
}
|
|
||||||
|
|
||||||
return "https://api.openai.com/v1";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,194 +0,0 @@
|
|||||||
import { beforeEach, describe, expect, it, vi, afterEach } from "vitest";
|
|
||||||
import type { Response } from "express";
|
|
||||||
import { AgentStatus } from "@prisma/client";
|
|
||||||
import { OrchestratorController } from "./orchestrator.controller";
|
|
||||||
import { PrismaService } from "../prisma/prisma.service";
|
|
||||||
import { AuthGuard } from "../auth/guards/auth.guard";
|
|
||||||
|
|
||||||
describe("OrchestratorController", () => {
|
|
||||||
const mockPrismaService = {
|
|
||||||
agent: {
|
|
||||||
findMany: vi.fn(),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
let controller: OrchestratorController;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
controller = new OrchestratorController(mockPrismaService as unknown as PrismaService);
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
vi.useRealTimers();
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("getAgents", () => {
|
|
||||||
it("returns active agents with API widget shape", async () => {
|
|
||||||
mockPrismaService.agent.findMany.mockResolvedValue([
|
|
||||||
{
|
|
||||||
id: "agent-1",
|
|
||||||
name: "Planner",
|
|
||||||
status: AgentStatus.WORKING,
|
|
||||||
role: "planner",
|
|
||||||
createdAt: new Date("2026-02-28T10:00:00.000Z"),
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const result = await controller.getAgents();
|
|
||||||
|
|
||||||
expect(result).toEqual([
|
|
||||||
{
|
|
||||||
id: "agent-1",
|
|
||||||
name: "Planner",
|
|
||||||
status: AgentStatus.WORKING,
|
|
||||||
type: "planner",
|
|
||||||
createdAt: new Date("2026-02-28T10:00:00.000Z"),
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
expect(mockPrismaService.agent.findMany).toHaveBeenCalledWith({
|
|
||||||
where: {
|
|
||||||
status: {
|
|
||||||
not: AgentStatus.TERMINATED,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
orderBy: {
|
|
||||||
createdAt: "desc",
|
|
||||||
},
|
|
||||||
select: {
|
|
||||||
id: true,
|
|
||||||
name: true,
|
|
||||||
status: true,
|
|
||||||
role: true,
|
|
||||||
createdAt: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it("falls back to type=agent when role is missing", async () => {
|
|
||||||
mockPrismaService.agent.findMany.mockResolvedValue([
|
|
||||||
{
|
|
||||||
id: "agent-2",
|
|
||||||
name: null,
|
|
||||||
status: AgentStatus.IDLE,
|
|
||||||
role: null,
|
|
||||||
createdAt: new Date("2026-02-28T11:00:00.000Z"),
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const result = await controller.getAgents();
|
|
||||||
|
|
||||||
expect(result[0]).toMatchObject({
|
|
||||||
id: "agent-2",
|
|
||||||
type: "agent",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("streamEvents", () => {
|
|
||||||
it("sets SSE headers and writes initial data payload", async () => {
|
|
||||||
const onHandlers: Record<string, (() => void) | undefined> = {};
|
|
||||||
const mockRes = {
|
|
||||||
setHeader: vi.fn(),
|
|
||||||
write: vi.fn(),
|
|
||||||
end: vi.fn(),
|
|
||||||
on: vi.fn((event: string, handler: () => void) => {
|
|
||||||
onHandlers[event] = handler;
|
|
||||||
return mockRes;
|
|
||||||
}),
|
|
||||||
} as unknown as Response;
|
|
||||||
|
|
||||||
mockPrismaService.agent.findMany.mockResolvedValue([
|
|
||||||
{
|
|
||||||
id: "agent-1",
|
|
||||||
name: "Worker",
|
|
||||||
status: AgentStatus.WORKING,
|
|
||||||
role: "worker",
|
|
||||||
createdAt: new Date("2026-02-28T12:00:00.000Z"),
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
await controller.streamEvents(mockRes);
|
|
||||||
|
|
||||||
expect(mockRes.setHeader).toHaveBeenCalledWith("Content-Type", "text/event-stream");
|
|
||||||
expect(mockRes.setHeader).toHaveBeenCalledWith("Cache-Control", "no-cache");
|
|
||||||
expect(mockRes.setHeader).toHaveBeenCalledWith("Connection", "keep-alive");
|
|
||||||
expect(mockRes.setHeader).toHaveBeenCalledWith("X-Accel-Buffering", "no");
|
|
||||||
|
|
||||||
expect(mockRes.write).toHaveBeenCalledWith(
|
|
||||||
expect.stringContaining('"type":"agents:updated"')
|
|
||||||
);
|
|
||||||
expect(typeof onHandlers.close).toBe("function");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("polls every 5 seconds and only emits when payload changes", async () => {
|
|
||||||
vi.useFakeTimers();
|
|
||||||
|
|
||||||
const onHandlers: Record<string, (() => void) | undefined> = {};
|
|
||||||
const mockRes = {
|
|
||||||
setHeader: vi.fn(),
|
|
||||||
write: vi.fn(),
|
|
||||||
end: vi.fn(),
|
|
||||||
on: vi.fn((event: string, handler: () => void) => {
|
|
||||||
onHandlers[event] = handler;
|
|
||||||
return mockRes;
|
|
||||||
}),
|
|
||||||
} as unknown as Response;
|
|
||||||
|
|
||||||
const firstPayload = [
|
|
||||||
{
|
|
||||||
id: "agent-1",
|
|
||||||
name: "Worker",
|
|
||||||
status: AgentStatus.WORKING,
|
|
||||||
role: "worker",
|
|
||||||
createdAt: new Date("2026-02-28T12:00:00.000Z"),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const secondPayload = [
|
|
||||||
{
|
|
||||||
id: "agent-1",
|
|
||||||
name: "Worker",
|
|
||||||
status: AgentStatus.WAITING,
|
|
||||||
role: "worker",
|
|
||||||
createdAt: new Date("2026-02-28T12:00:00.000Z"),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
mockPrismaService.agent.findMany
|
|
||||||
.mockResolvedValueOnce(firstPayload)
|
|
||||||
.mockResolvedValueOnce(firstPayload)
|
|
||||||
.mockResolvedValueOnce(secondPayload);
|
|
||||||
|
|
||||||
await controller.streamEvents(mockRes);
|
|
||||||
|
|
||||||
// 1 initial data event
|
|
||||||
const getDataEventCalls = () =>
|
|
||||||
mockRes.write.mock.calls.filter(
|
|
||||||
(call) => typeof call[0] === "string" && call[0].startsWith("data: ")
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(getDataEventCalls()).toHaveLength(1);
|
|
||||||
|
|
||||||
// No change after first poll => no new data event
|
|
||||||
await vi.advanceTimersByTimeAsync(5000);
|
|
||||||
expect(getDataEventCalls()).toHaveLength(1);
|
|
||||||
|
|
||||||
// Status changed on second poll => emits new data event
|
|
||||||
await vi.advanceTimersByTimeAsync(5000);
|
|
||||||
expect(getDataEventCalls()).toHaveLength(2);
|
|
||||||
|
|
||||||
onHandlers.close?.();
|
|
||||||
expect(mockRes.end).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("security", () => {
|
|
||||||
it("uses AuthGuard at the controller level", () => {
|
|
||||||
const guards = Reflect.getMetadata("__guards__", OrchestratorController) as unknown[];
|
|
||||||
const guardClasses = guards.map((guard) => guard);
|
|
||||||
|
|
||||||
expect(guardClasses).toContain(AuthGuard);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,115 +0,0 @@
|
|||||||
import { Controller, Get, Res, UseGuards } from "@nestjs/common";
|
|
||||||
import { AgentStatus } from "@prisma/client";
|
|
||||||
import type { Response } from "express";
|
|
||||||
import { AuthGuard } from "../auth/guards/auth.guard";
|
|
||||||
import { PrismaService } from "../prisma/prisma.service";
|
|
||||||
|
|
||||||
const AGENT_POLL_INTERVAL_MS = 5_000;
|
|
||||||
const SSE_HEARTBEAT_MS = 15_000;
|
|
||||||
|
|
||||||
interface OrchestratorAgentDto {
|
|
||||||
id: string;
|
|
||||||
name: string | null;
|
|
||||||
status: AgentStatus;
|
|
||||||
type: string;
|
|
||||||
createdAt: Date;
|
|
||||||
}
|
|
||||||
|
|
||||||
@Controller("orchestrator")
|
|
||||||
@UseGuards(AuthGuard)
|
|
||||||
export class OrchestratorController {
|
|
||||||
constructor(private readonly prisma: PrismaService) {}
|
|
||||||
|
|
||||||
@Get("agents")
|
|
||||||
async getAgents(): Promise<OrchestratorAgentDto[]> {
|
|
||||||
return this.fetchActiveAgents();
|
|
||||||
}
|
|
||||||
|
|
||||||
@Get("events")
|
|
||||||
async streamEvents(@Res() res: Response): Promise<void> {
|
|
||||||
res.setHeader("Content-Type", "text/event-stream");
|
|
||||||
res.setHeader("Cache-Control", "no-cache");
|
|
||||||
res.setHeader("Connection", "keep-alive");
|
|
||||||
res.setHeader("X-Accel-Buffering", "no");
|
|
||||||
|
|
||||||
if (typeof res.flushHeaders === "function") {
|
|
||||||
res.flushHeaders();
|
|
||||||
}
|
|
||||||
|
|
||||||
let isClosed = false;
|
|
||||||
let previousSnapshot = "";
|
|
||||||
|
|
||||||
const emitSnapshotIfChanged = async (): Promise<void> => {
|
|
||||||
if (isClosed) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const agents = await this.fetchActiveAgents();
|
|
||||||
const snapshot = JSON.stringify(agents);
|
|
||||||
|
|
||||||
if (snapshot !== previousSnapshot) {
|
|
||||||
previousSnapshot = snapshot;
|
|
||||||
res.write(
|
|
||||||
`data: ${JSON.stringify({
|
|
||||||
type: "agents:updated",
|
|
||||||
agents,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
})}\n\n`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (error: unknown) {
|
|
||||||
const message = error instanceof Error ? error.message : String(error);
|
|
||||||
res.write(`event: error\n`);
|
|
||||||
res.write(`data: ${JSON.stringify({ error: message })}\n\n`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
await emitSnapshotIfChanged();
|
|
||||||
|
|
||||||
const pollInterval = setInterval(() => {
|
|
||||||
void emitSnapshotIfChanged();
|
|
||||||
}, AGENT_POLL_INTERVAL_MS);
|
|
||||||
|
|
||||||
const heartbeatInterval = setInterval(() => {
|
|
||||||
if (!isClosed) {
|
|
||||||
res.write(": keepalive\n\n");
|
|
||||||
}
|
|
||||||
}, SSE_HEARTBEAT_MS);
|
|
||||||
|
|
||||||
res.on("close", () => {
|
|
||||||
isClosed = true;
|
|
||||||
clearInterval(pollInterval);
|
|
||||||
clearInterval(heartbeatInterval);
|
|
||||||
res.end();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private async fetchActiveAgents(): Promise<OrchestratorAgentDto[]> {
|
|
||||||
const agents = await this.prisma.agent.findMany({
|
|
||||||
where: {
|
|
||||||
status: {
|
|
||||||
not: AgentStatus.TERMINATED,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
orderBy: {
|
|
||||||
createdAt: "desc",
|
|
||||||
},
|
|
||||||
select: {
|
|
||||||
id: true,
|
|
||||||
name: true,
|
|
||||||
status: true,
|
|
||||||
role: true,
|
|
||||||
createdAt: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return agents.map((agent) => ({
|
|
||||||
id: agent.id,
|
|
||||||
name: agent.name,
|
|
||||||
status: agent.status,
|
|
||||||
type: agent.role ?? "agent",
|
|
||||||
createdAt: agent.createdAt,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { Module } from "@nestjs/common";
|
|
||||||
import { AuthModule } from "../auth/auth.module";
|
|
||||||
import { PrismaModule } from "../prisma/prisma.module";
|
|
||||||
import { OrchestratorController } from "./orchestrator.controller";
|
|
||||||
|
|
||||||
@Module({
|
|
||||||
imports: [AuthModule, PrismaModule],
|
|
||||||
controllers: [OrchestratorController],
|
|
||||||
})
|
|
||||||
export class OrchestratorModule {}
|
|
||||||
@@ -8,7 +8,6 @@ import {
|
|||||||
MinLength,
|
MinLength,
|
||||||
MaxLength,
|
MaxLength,
|
||||||
Matches,
|
Matches,
|
||||||
IsUUID,
|
|
||||||
} from "class-validator";
|
} from "class-validator";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -44,10 +43,6 @@ export class CreateProjectDto {
|
|||||||
})
|
})
|
||||||
color?: string;
|
color?: string;
|
||||||
|
|
||||||
@IsOptional()
|
|
||||||
@IsUUID("4", { message: "domainId must be a valid UUID" })
|
|
||||||
domainId?: string;
|
|
||||||
|
|
||||||
@IsOptional()
|
@IsOptional()
|
||||||
@IsObject({ message: "metadata must be an object" })
|
@IsObject({ message: "metadata must be an object" })
|
||||||
metadata?: Record<string, unknown>;
|
metadata?: Record<string, unknown>;
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ import {
|
|||||||
MinLength,
|
MinLength,
|
||||||
MaxLength,
|
MaxLength,
|
||||||
Matches,
|
Matches,
|
||||||
IsUUID,
|
|
||||||
} from "class-validator";
|
} from "class-validator";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -46,10 +45,6 @@ export class UpdateProjectDto {
|
|||||||
})
|
})
|
||||||
color?: string | null;
|
color?: string | null;
|
||||||
|
|
||||||
@IsOptional()
|
|
||||||
@IsUUID("4", { message: "domainId must be a valid UUID" })
|
|
||||||
domainId?: string | null;
|
|
||||||
|
|
||||||
@IsOptional()
|
@IsOptional()
|
||||||
@IsObject({ message: "metadata must be an object" })
|
@IsObject({ message: "metadata must be an object" })
|
||||||
metadata?: Record<string, unknown>;
|
metadata?: Record<string, unknown>;
|
||||||
|
|||||||
@@ -47,9 +47,6 @@ export class ProjectsService {
|
|||||||
createProjectDto: CreateProjectDto
|
createProjectDto: CreateProjectDto
|
||||||
): Promise<ProjectWithRelations> {
|
): Promise<ProjectWithRelations> {
|
||||||
const data: Prisma.ProjectCreateInput = {
|
const data: Prisma.ProjectCreateInput = {
|
||||||
...(createProjectDto.domainId
|
|
||||||
? { domain: { connect: { id: createProjectDto.domainId } } }
|
|
||||||
: {}),
|
|
||||||
name: createProjectDto.name,
|
name: createProjectDto.name,
|
||||||
description: createProjectDto.description ?? null,
|
description: createProjectDto.description ?? null,
|
||||||
color: createProjectDto.color ?? null,
|
color: createProjectDto.color ?? null,
|
||||||
@@ -224,18 +221,6 @@ export class ProjectsService {
|
|||||||
if (updateProjectDto.startDate !== undefined) updateData.startDate = updateProjectDto.startDate;
|
if (updateProjectDto.startDate !== undefined) updateData.startDate = updateProjectDto.startDate;
|
||||||
if (updateProjectDto.endDate !== undefined) updateData.endDate = updateProjectDto.endDate;
|
if (updateProjectDto.endDate !== undefined) updateData.endDate = updateProjectDto.endDate;
|
||||||
if (updateProjectDto.color !== undefined) updateData.color = updateProjectDto.color;
|
if (updateProjectDto.color !== undefined) updateData.color = updateProjectDto.color;
|
||||||
if (updateProjectDto.domainId !== undefined)
|
|
||||||
updateData.domain = updateProjectDto.domainId
|
|
||||||
? { connect: { id: updateProjectDto.domainId } }
|
|
||||||
: { disconnect: true };
|
|
||||||
if (updateProjectDto.domainId !== undefined)
|
|
||||||
updateData.domain = updateProjectDto.domainId
|
|
||||||
? {
|
|
||||||
connect: {
|
|
||||||
id: updateProjectDto.domainId,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
: { disconnect: true };
|
|
||||||
if (updateProjectDto.metadata !== undefined) {
|
if (updateProjectDto.metadata !== undefined) {
|
||||||
updateData.metadata = updateProjectDto.metadata as unknown as Prisma.InputJsonValue;
|
updateData.metadata = updateProjectDto.metadata as unknown as Prisma.InputJsonValue;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -66,9 +66,7 @@ interface StartTranscriptionPayload {
|
|||||||
@WSGateway({
|
@WSGateway({
|
||||||
namespace: "/speech",
|
namespace: "/speech",
|
||||||
cors: {
|
cors: {
|
||||||
origin: (process.env.TRUSTED_ORIGINS ?? process.env.WEB_URL ?? "http://localhost:3000")
|
origin: process.env.WEB_URL ?? "http://localhost:3000",
|
||||||
.split(",")
|
|
||||||
.map((s) => s.trim()),
|
|
||||||
credentials: true,
|
credentials: true,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -63,9 +63,7 @@ interface AuthenticatedSocket extends Socket {
|
|||||||
@WSGateway({
|
@WSGateway({
|
||||||
namespace: "/terminal",
|
namespace: "/terminal",
|
||||||
cors: {
|
cors: {
|
||||||
origin: (process.env.TRUSTED_ORIGINS ?? process.env.WEB_URL ?? "http://localhost:3000")
|
origin: process.env.WEB_URL ?? "http://localhost:3000",
|
||||||
.split(",")
|
|
||||||
.map((s) => s.trim()),
|
|
||||||
credentials: true,
|
credentials: true,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,31 +0,0 @@
|
|||||||
import { describe, expect, it } from "vitest";
|
|
||||||
import { WidgetsController } from "./widgets.controller";
|
|
||||||
|
|
||||||
const THROTTLER_SKIP_DEFAULT_KEY = "THROTTLER:SKIPdefault";
|
|
||||||
|
|
||||||
describe("WidgetsController throttler metadata", () => {
|
|
||||||
it("marks widget data polling endpoints to skip throttling", () => {
|
|
||||||
const pollingHandlers = [
|
|
||||||
WidgetsController.prototype.getStatCardData,
|
|
||||||
WidgetsController.prototype.getChartData,
|
|
||||||
WidgetsController.prototype.getListData,
|
|
||||||
WidgetsController.prototype.getCalendarPreviewData,
|
|
||||||
WidgetsController.prototype.getActiveProjectsData,
|
|
||||||
WidgetsController.prototype.getAgentChainsData,
|
|
||||||
];
|
|
||||||
|
|
||||||
for (const handler of pollingHandlers) {
|
|
||||||
expect(Reflect.getMetadata(THROTTLER_SKIP_DEFAULT_KEY, handler)).toBe(true);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
it("does not skip throttling for non-polling widget routes", () => {
|
|
||||||
expect(
|
|
||||||
Reflect.getMetadata(THROTTLER_SKIP_DEFAULT_KEY, WidgetsController.prototype.findAll)
|
|
||||||
).toBe(undefined);
|
|
||||||
|
|
||||||
expect(
|
|
||||||
Reflect.getMetadata(THROTTLER_SKIP_DEFAULT_KEY, WidgetsController.prototype.findByName)
|
|
||||||
).toBe(undefined);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,10 +1,9 @@
|
|||||||
import { Controller, Get, Post, Body, Param, UseGuards, Request } from "@nestjs/common";
|
import { Controller, Get, Post, Body, Param, UseGuards, Request } from "@nestjs/common";
|
||||||
import { SkipThrottle as SkipThrottler } from "@nestjs/throttler";
|
|
||||||
import { WidgetsService } from "./widgets.service";
|
import { WidgetsService } from "./widgets.service";
|
||||||
import { WidgetDataService } from "./widget-data.service";
|
import { WidgetDataService } from "./widget-data.service";
|
||||||
import { AuthGuard } from "../auth/guards/auth.guard";
|
import { AuthGuard } from "../auth/guards/auth.guard";
|
||||||
import { WorkspaceGuard } from "../common/guards/workspace.guard";
|
import { WorkspaceGuard } from "../common/guards/workspace.guard";
|
||||||
import { StatCardQueryDto, ChartQueryDto, ListQueryDto, CalendarPreviewQueryDto } from "./dto";
|
import type { StatCardQueryDto, ChartQueryDto, ListQueryDto, CalendarPreviewQueryDto } from "./dto";
|
||||||
import type { RequestWithWorkspace } from "../common/types/user.types";
|
import type { RequestWithWorkspace } from "../common/types/user.types";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -44,7 +43,6 @@ export class WidgetsController {
|
|||||||
* Get stat card widget data
|
* Get stat card widget data
|
||||||
*/
|
*/
|
||||||
@Post("data/stat-card")
|
@Post("data/stat-card")
|
||||||
@SkipThrottler()
|
|
||||||
@UseGuards(WorkspaceGuard)
|
@UseGuards(WorkspaceGuard)
|
||||||
async getStatCardData(@Request() req: RequestWithWorkspace, @Body() query: StatCardQueryDto) {
|
async getStatCardData(@Request() req: RequestWithWorkspace, @Body() query: StatCardQueryDto) {
|
||||||
return this.widgetDataService.getStatCardData(req.workspace.id, query);
|
return this.widgetDataService.getStatCardData(req.workspace.id, query);
|
||||||
@@ -55,7 +53,6 @@ export class WidgetsController {
|
|||||||
* Get chart widget data
|
* Get chart widget data
|
||||||
*/
|
*/
|
||||||
@Post("data/chart")
|
@Post("data/chart")
|
||||||
@SkipThrottler()
|
|
||||||
@UseGuards(WorkspaceGuard)
|
@UseGuards(WorkspaceGuard)
|
||||||
async getChartData(@Request() req: RequestWithWorkspace, @Body() query: ChartQueryDto) {
|
async getChartData(@Request() req: RequestWithWorkspace, @Body() query: ChartQueryDto) {
|
||||||
return this.widgetDataService.getChartData(req.workspace.id, query);
|
return this.widgetDataService.getChartData(req.workspace.id, query);
|
||||||
@@ -66,7 +63,6 @@ export class WidgetsController {
|
|||||||
* Get list widget data
|
* Get list widget data
|
||||||
*/
|
*/
|
||||||
@Post("data/list")
|
@Post("data/list")
|
||||||
@SkipThrottler()
|
|
||||||
@UseGuards(WorkspaceGuard)
|
@UseGuards(WorkspaceGuard)
|
||||||
async getListData(@Request() req: RequestWithWorkspace, @Body() query: ListQueryDto) {
|
async getListData(@Request() req: RequestWithWorkspace, @Body() query: ListQueryDto) {
|
||||||
return this.widgetDataService.getListData(req.workspace.id, query);
|
return this.widgetDataService.getListData(req.workspace.id, query);
|
||||||
@@ -77,7 +73,6 @@ export class WidgetsController {
|
|||||||
* Get calendar preview widget data
|
* Get calendar preview widget data
|
||||||
*/
|
*/
|
||||||
@Post("data/calendar-preview")
|
@Post("data/calendar-preview")
|
||||||
@SkipThrottler()
|
|
||||||
@UseGuards(WorkspaceGuard)
|
@UseGuards(WorkspaceGuard)
|
||||||
async getCalendarPreviewData(
|
async getCalendarPreviewData(
|
||||||
@Request() req: RequestWithWorkspace,
|
@Request() req: RequestWithWorkspace,
|
||||||
@@ -91,7 +86,6 @@ export class WidgetsController {
|
|||||||
* Get active projects widget data
|
* Get active projects widget data
|
||||||
*/
|
*/
|
||||||
@Post("data/active-projects")
|
@Post("data/active-projects")
|
||||||
@SkipThrottler()
|
|
||||||
@UseGuards(WorkspaceGuard)
|
@UseGuards(WorkspaceGuard)
|
||||||
async getActiveProjectsData(@Request() req: RequestWithWorkspace) {
|
async getActiveProjectsData(@Request() req: RequestWithWorkspace) {
|
||||||
return this.widgetDataService.getActiveProjectsData(req.workspace.id);
|
return this.widgetDataService.getActiveProjectsData(req.workspace.id);
|
||||||
@@ -102,7 +96,6 @@ export class WidgetsController {
|
|||||||
* Get agent chains widget data (active agent sessions)
|
* Get agent chains widget data (active agent sessions)
|
||||||
*/
|
*/
|
||||||
@Post("data/agent-chains")
|
@Post("data/agent-chains")
|
||||||
@SkipThrottler()
|
|
||||||
@UseGuards(WorkspaceGuard)
|
@UseGuards(WorkspaceGuard)
|
||||||
async getAgentChainsData(@Request() req: RequestWithWorkspace) {
|
async getAgentChainsData(@Request() req: RequestWithWorkspace) {
|
||||||
return this.widgetDataService.getAgentChainsData(req.workspace.id);
|
return this.widgetDataService.getAgentChainsData(req.workspace.id);
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import { WorkspaceGuard, PermissionGuard } from "../common/guards";
|
|||||||
import { Permission, RequirePermission } from "../common/decorators";
|
import { Permission, RequirePermission } from "../common/decorators";
|
||||||
import type { WorkspaceMember } from "@prisma/client";
|
import type { WorkspaceMember } from "@prisma/client";
|
||||||
import type { AuthenticatedUser } from "../common/types/user.types";
|
import type { AuthenticatedUser } from "../common/types/user.types";
|
||||||
import { AddMemberDto, UpdateMemberRoleDto, WorkspaceResponseDto } from "./dto";
|
import type { AddMemberDto, UpdateMemberRoleDto, WorkspaceResponseDto } from "./dto";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* User-scoped workspace operations.
|
* User-scoped workspace operations.
|
||||||
@@ -29,25 +29,6 @@ export class WorkspacesController {
|
|||||||
return this.workspacesService.getUserWorkspaces(user.id);
|
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
|
* POST /api/workspaces/:workspaceId/members
|
||||||
* Add a member to a workspace with the specified role.
|
* Add a member to a workspace with the specified role.
|
||||||
|
|||||||
@@ -321,18 +321,6 @@ 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(
|
private assertCanAssignRole(
|
||||||
actorRole: WorkspaceMemberRole,
|
actorRole: WorkspaceMemberRole,
|
||||||
requestedRole: WorkspaceMemberRole
|
requestedRole: WorkspaceMemberRole
|
||||||
@@ -354,15 +342,4 @@ export class WorkspacesService {
|
|||||||
private isUniqueConstraintError(error: unknown): error is Prisma.PrismaClientKnownRequestError {
|
private isUniqueConstraintError(error: unknown): error is Prisma.PrismaClientKnownRequestError {
|
||||||
return error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2002";
|
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 };
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
# Base image for all stages
|
# Base image for all stages
|
||||||
# Uses Debian slim (glibc) instead of Alpine (musl) for native addon compatibility.
|
# Uses Debian slim (glibc) instead of Alpine (musl) for native addon compatibility.
|
||||||
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS base
|
FROM node:24-slim AS base
|
||||||
|
|
||||||
# Install pnpm globally
|
# Install pnpm globally
|
||||||
RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
|
RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
|
||||||
@@ -22,9 +22,6 @@ COPY packages/shared/package.json ./packages/shared/
|
|||||||
COPY packages/config/package.json ./packages/config/
|
COPY packages/config/package.json ./packages/config/
|
||||||
COPY apps/orchestrator/package.json ./apps/orchestrator/
|
COPY apps/orchestrator/package.json ./apps/orchestrator/
|
||||||
|
|
||||||
# Copy npm configuration for native binary architecture hints
|
|
||||||
COPY .npmrc ./
|
|
||||||
|
|
||||||
# Install ALL dependencies (not just production)
|
# Install ALL dependencies (not just production)
|
||||||
# No cache mount — Kaniko builds are ephemeral in CI
|
# No cache mount — Kaniko builds are ephemeral in CI
|
||||||
RUN pnpm install --frozen-lockfile
|
RUN pnpm install --frozen-lockfile
|
||||||
@@ -57,7 +54,7 @@ RUN find ./apps/orchestrator/dist \( -name '*.spec.js' -o -name '*.spec.js.map'
|
|||||||
# ======================
|
# ======================
|
||||||
# Production stage
|
# Production stage
|
||||||
# ======================
|
# ======================
|
||||||
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS production
|
FROM node:24-slim AS production
|
||||||
|
|
||||||
# Add metadata labels
|
# Add metadata labels
|
||||||
LABEL maintainer="mosaic-team@mosaicstack.dev"
|
LABEL maintainer="mosaic-team@mosaicstack.dev"
|
||||||
@@ -68,12 +65,13 @@ LABEL org.opencontainers.image.vendor="Mosaic Stack"
|
|||||||
LABEL org.opencontainers.image.title="Mosaic Orchestrator"
|
LABEL org.opencontainers.image.title="Mosaic Orchestrator"
|
||||||
LABEL org.opencontainers.image.description="Agent orchestration service for Mosaic Stack"
|
LABEL org.opencontainers.image.description="Agent orchestration service for Mosaic Stack"
|
||||||
|
|
||||||
# dumb-init, ca-certificates pre-installed in base image
|
# Install dumb-init for proper signal handling (static binary from GitHub,
|
||||||
|
# avoids apt-get which fails under Kaniko with bookworm GPG signature errors)
|
||||||
|
ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.5/dumb-init_1.2.5_x86_64 /usr/local/bin/dumb-init
|
||||||
|
|
||||||
# Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
|
# Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
|
||||||
# - Remove npm/npx to reduce image size (not used in production)
|
|
||||||
# - Create non-root user
|
|
||||||
RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
|
RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
|
||||||
|
&& chmod 755 /usr/local/bin/dumb-init \
|
||||||
&& groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nestjs
|
&& groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nestjs
|
||||||
|
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
# Base image for all stages
|
# Base image for all stages
|
||||||
# Uses Debian slim (glibc) for consistency with API/orchestrator and to prevent
|
# Uses Debian slim (glibc) for consistency with API/orchestrator and to prevent
|
||||||
# future native addon compatibility issues with Alpine's musl libc.
|
# future native addon compatibility issues with Alpine's musl libc.
|
||||||
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS base
|
FROM node:24-slim AS base
|
||||||
|
|
||||||
# Install pnpm globally
|
# Install pnpm globally
|
||||||
RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
|
RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
|
||||||
@@ -24,9 +24,6 @@ COPY packages/ui/package.json ./packages/ui/
|
|||||||
COPY packages/config/package.json ./packages/config/
|
COPY packages/config/package.json ./packages/config/
|
||||||
COPY apps/web/package.json ./apps/web/
|
COPY apps/web/package.json ./apps/web/
|
||||||
|
|
||||||
# Copy npm configuration for native binary architecture hints
|
|
||||||
COPY .npmrc ./
|
|
||||||
|
|
||||||
# Install dependencies (no cache mount — Kaniko builds are ephemeral in CI)
|
# Install dependencies (no cache mount — Kaniko builds are ephemeral in CI)
|
||||||
RUN pnpm install --frozen-lockfile
|
RUN pnpm install --frozen-lockfile
|
||||||
|
|
||||||
@@ -41,9 +38,6 @@ COPY packages/ui/package.json ./packages/ui/
|
|||||||
COPY packages/config/package.json ./packages/config/
|
COPY packages/config/package.json ./packages/config/
|
||||||
COPY apps/web/package.json ./apps/web/
|
COPY apps/web/package.json ./apps/web/
|
||||||
|
|
||||||
# Copy npm configuration for native binary architecture hints
|
|
||||||
COPY .npmrc ./
|
|
||||||
|
|
||||||
# Install production dependencies only
|
# Install production dependencies only
|
||||||
RUN pnpm install --frozen-lockfile --prod
|
RUN pnpm install --frozen-lockfile --prod
|
||||||
|
|
||||||
@@ -93,14 +87,15 @@ RUN mkdir -p ./apps/web/public
|
|||||||
# ======================
|
# ======================
|
||||||
# Production stage
|
# Production stage
|
||||||
# ======================
|
# ======================
|
||||||
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS production
|
FROM node:24-slim AS production
|
||||||
|
|
||||||
# dumb-init, ca-certificates pre-installed in base image
|
# Install dumb-init for proper signal handling (static binary from GitHub,
|
||||||
|
# avoids apt-get which fails under Kaniko with bookworm GPG signature errors)
|
||||||
|
ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.5/dumb-init_1.2.5_x86_64 /usr/local/bin/dumb-init
|
||||||
|
|
||||||
# Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
|
# Single RUN to minimize Kaniko filesystem snapshots (each RUN = full snapshot)
|
||||||
# - Remove npm/npx to reduce image size (not used in production)
|
|
||||||
# - Create non-root user
|
|
||||||
RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
|
RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
|
||||||
|
&& chmod 755 /usr/local/bin/dumb-init \
|
||||||
&& groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nextjs
|
&& groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nextjs
|
||||||
|
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ import {
|
|||||||
ChevronUp,
|
ChevronUp,
|
||||||
ChevronDown,
|
ChevronDown,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import type { KnowledgeEntryWithTags, KnowledgeTag } from "@mosaic/shared";
|
import type { KnowledgeEntryWithTags } from "@mosaic/shared";
|
||||||
import { EntryStatus, Visibility } from "@mosaic/shared";
|
import { EntryStatus, Visibility } from "@mosaic/shared";
|
||||||
|
|
||||||
import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
|
import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
|
||||||
@@ -25,7 +25,7 @@ import {
|
|||||||
DialogDescription,
|
DialogDescription,
|
||||||
DialogFooter,
|
DialogFooter,
|
||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import { fetchEntries, createEntry, deleteEntry, fetchTags } from "@/lib/api/knowledge";
|
import { fetchEntries, createEntry, deleteEntry } from "@/lib/api/knowledge";
|
||||||
import type { EntriesResponse, CreateEntryData, EntryFilters } from "@/lib/api/knowledge";
|
import type { EntriesResponse, CreateEntryData, EntryFilters } from "@/lib/api/knowledge";
|
||||||
|
|
||||||
/* ---------------------------------------------------------------------------
|
/* ---------------------------------------------------------------------------
|
||||||
@@ -421,26 +421,6 @@ function CreateEntryDialog({
|
|||||||
const [visibility, setVisibility] = useState<Visibility>(Visibility.PRIVATE);
|
const [visibility, setVisibility] = useState<Visibility>(Visibility.PRIVATE);
|
||||||
const [formError, setFormError] = useState<string | null>(null);
|
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 {
|
function resetForm(): void {
|
||||||
setTitle("");
|
setTitle("");
|
||||||
setContent("");
|
setContent("");
|
||||||
@@ -448,9 +428,6 @@ function CreateEntryDialog({
|
|||||||
setStatus(EntryStatus.DRAFT);
|
setStatus(EntryStatus.DRAFT);
|
||||||
setVisibility(Visibility.PRIVATE);
|
setVisibility(Visibility.PRIVATE);
|
||||||
setFormError(null);
|
setFormError(null);
|
||||||
setSelectedTags([]);
|
|
||||||
setTagInput("");
|
|
||||||
setShowSuggestions(false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleSubmit(e: SyntheticEvent): Promise<void> {
|
async function handleSubmit(e: SyntheticEvent): Promise<void> {
|
||||||
@@ -475,7 +452,6 @@ function CreateEntryDialog({
|
|||||||
content: trimmedContent,
|
content: trimmedContent,
|
||||||
status,
|
status,
|
||||||
visibility,
|
visibility,
|
||||||
tags: selectedTags,
|
|
||||||
};
|
};
|
||||||
const trimmedSummary = summary.trim();
|
const trimmedSummary = summary.trim();
|
||||||
if (trimmedSummary) {
|
if (trimmedSummary) {
|
||||||
@@ -634,212 +610,6 @@ function CreateEntryDialog({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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 */}
|
{/* Status + Visibility row */}
|
||||||
<div style={{ display: "flex", gap: 16, marginBottom: 16 }}>
|
<div style={{ display: "flex", gap: 16, marginBottom: 16 }}>
|
||||||
<div style={{ flex: 1 }}>
|
<div style={{ flex: 1 }}>
|
||||||
|
|||||||
@@ -1,188 +0,0 @@
|
|||||||
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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useEffect, useCallback, useMemo, useRef } from "react";
|
import { useState, useEffect, useCallback, useMemo } from "react";
|
||||||
import type { ReactElement } from "react";
|
import type { ReactElement } from "react";
|
||||||
import { useSearchParams, useRouter } from "next/navigation";
|
import { useSearchParams, useRouter } from "next/navigation";
|
||||||
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
||||||
@@ -12,7 +12,7 @@ import type {
|
|||||||
} from "@hello-pangea/dnd";
|
} from "@hello-pangea/dnd";
|
||||||
|
|
||||||
import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
|
import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
|
||||||
import { fetchTasks, updateTask, createTask, type TaskFilters } from "@/lib/api/tasks";
|
import { fetchTasks, updateTask, type TaskFilters } from "@/lib/api/tasks";
|
||||||
import { fetchProjects, type Project } from "@/lib/api/projects";
|
import { fetchProjects, type Project } from "@/lib/api/projects";
|
||||||
import { useWorkspaceId } from "@/lib/hooks";
|
import { useWorkspaceId } from "@/lib/hooks";
|
||||||
import type { Task } from "@mosaic/shared";
|
import type { Task } from "@mosaic/shared";
|
||||||
@@ -184,48 +184,9 @@ function TaskCard({ task, provided, snapshot, columnAccent }: TaskCardProps): Re
|
|||||||
interface KanbanColumnProps {
|
interface KanbanColumnProps {
|
||||||
config: ColumnConfig;
|
config: ColumnConfig;
|
||||||
tasks: Task[];
|
tasks: Task[];
|
||||||
onAddTask: (status: TaskStatus, title: string, projectId?: string) => Promise<void>;
|
|
||||||
projectId?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function KanbanColumn({ config, tasks, onAddTask, projectId }: KanbanColumnProps): ReactElement {
|
function KanbanColumn({ config, tasks }: KanbanColumnProps): ReactElement {
|
||||||
const [showAddForm, setShowAddForm] = useState(false);
|
|
||||||
const [inputValue, setInputValue] = useState("");
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
// Focus input when form is shown
|
|
||||||
useEffect(() => {
|
|
||||||
if (showAddForm && inputRef.current) {
|
|
||||||
inputRef.current.focus();
|
|
||||||
}
|
|
||||||
}, [showAddForm]);
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.SyntheticEvent): Promise<void> => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!inputValue.trim() || isSubmitting) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsSubmitting(true);
|
|
||||||
try {
|
|
||||||
await onAddTask(config.status, inputValue.trim(), projectId);
|
|
||||||
setInputValue("");
|
|
||||||
setShowAddForm(false);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("[KanbanColumn] Failed to add task:", err);
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
|
|
||||||
if (e.key === "Escape") {
|
|
||||||
setShowAddForm(false);
|
|
||||||
setInputValue("");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -307,128 +268,6 @@ function KanbanColumn({ config, tasks, onAddTask, projectId }: KanbanColumnProps
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Droppable>
|
</Droppable>
|
||||||
|
|
||||||
{/* Add Task Form */}
|
|
||||||
{!showAddForm ? (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setShowAddForm(true);
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
padding: "10px 16px",
|
|
||||||
border: "none",
|
|
||||||
background: "transparent",
|
|
||||||
color: "var(--muted)",
|
|
||||||
fontSize: "0.8rem",
|
|
||||||
cursor: "pointer",
|
|
||||||
textAlign: "left",
|
|
||||||
transition: "color 0.15s",
|
|
||||||
width: "100%",
|
|
||||||
}}
|
|
||||||
onMouseEnter={(e) => {
|
|
||||||
e.currentTarget.style.color = "var(--text)";
|
|
||||||
}}
|
|
||||||
onMouseLeave={(e) => {
|
|
||||||
e.currentTarget.style.color = "var(--muted)";
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
+ Add task
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
style={{ padding: "8px 12px 12px", borderTop: "1px solid var(--border)" }}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
ref={inputRef}
|
|
||||||
type="text"
|
|
||||||
value={inputValue}
|
|
||||||
onChange={(e) => {
|
|
||||||
setInputValue(e.target.value);
|
|
||||||
}}
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
placeholder="Task title..."
|
|
||||||
disabled={isSubmitting}
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
padding: "8px 10px",
|
|
||||||
borderRadius: "var(--r)",
|
|
||||||
border: `1px solid ${inputValue ? "var(--primary)" : "var(--border)"}`,
|
|
||||||
background: "var(--surface)",
|
|
||||||
color: "var(--text)",
|
|
||||||
fontSize: "0.85rem",
|
|
||||||
outline: "none",
|
|
||||||
opacity: isSubmitting ? 0.6 : 1,
|
|
||||||
}}
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
<div style={{ display: "flex", gap: 6, marginTop: 6 }}>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={isSubmitting || !inputValue.trim()}
|
|
||||||
style={{
|
|
||||||
padding: "6px 12px",
|
|
||||||
borderRadius: "var(--r)",
|
|
||||||
border: "1px solid var(--primary)",
|
|
||||||
background: "var(--primary)",
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: "0.8rem",
|
|
||||||
fontWeight: 500,
|
|
||||||
cursor: isSubmitting || !inputValue.trim() ? "not-allowed" : "pointer",
|
|
||||||
opacity: isSubmitting || !inputValue.trim() ? 0.5 : 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
✓ Add
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setShowAddForm(false);
|
|
||||||
setInputValue("");
|
|
||||||
}}
|
|
||||||
disabled={isSubmitting}
|
|
||||||
style={{
|
|
||||||
padding: "6px 12px",
|
|
||||||
borderRadius: "var(--r)",
|
|
||||||
border: "1px solid var(--border)",
|
|
||||||
background: "transparent",
|
|
||||||
color: "var(--muted)",
|
|
||||||
fontSize: "0.8rem",
|
|
||||||
cursor: isSubmitting ? "not-allowed" : "pointer",
|
|
||||||
opacity: isSubmitting ? 0.5 : 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div style={{ marginTop: 6, fontSize: "0.75rem", color: "var(--muted)" }}>
|
|
||||||
Press{" "}
|
|
||||||
<kbd
|
|
||||||
style={{
|
|
||||||
padding: "2px 4px",
|
|
||||||
background: "var(--bg-mid)",
|
|
||||||
borderRadius: "2px",
|
|
||||||
fontFamily: "var(--mono)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Enter
|
|
||||||
</kbd>{" "}
|
|
||||||
to save,{" "}
|
|
||||||
<kbd
|
|
||||||
style={{
|
|
||||||
padding: "2px 4px",
|
|
||||||
background: "var(--bg-mid)",
|
|
||||||
borderRadius: "2px",
|
|
||||||
fontFamily: "var(--mono)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Escape
|
|
||||||
</kbd>{" "}
|
|
||||||
to cancel
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -782,31 +621,6 @@ export default function KanbanPage(): ReactElement {
|
|||||||
void loadTasks(workspaceId);
|
void loadTasks(workspaceId);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- add task handler --- */
|
|
||||||
|
|
||||||
const handleAddTask = useCallback(
|
|
||||||
async (status: TaskStatus, title: string, projectId?: string) => {
|
|
||||||
try {
|
|
||||||
const wsId = workspaceId ?? undefined;
|
|
||||||
const taskData: { title: string; status: TaskStatus; projectId?: string } = {
|
|
||||||
title,
|
|
||||||
status,
|
|
||||||
};
|
|
||||||
if (projectId) {
|
|
||||||
taskData.projectId = projectId;
|
|
||||||
}
|
|
||||||
const newTask = await createTask(taskData, wsId);
|
|
||||||
// Optimistically add to local state
|
|
||||||
setTasks((prev) => [...prev, newTask]);
|
|
||||||
} catch (err: unknown) {
|
|
||||||
console.error("[Kanban] Failed to create task:", err);
|
|
||||||
// Re-fetch on error to get consistent state
|
|
||||||
void loadTasks(workspaceId);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[workspaceId, loadTasks]
|
|
||||||
);
|
|
||||||
|
|
||||||
/* --- render --- */
|
/* --- render --- */
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -913,8 +727,23 @@ export default function KanbanPage(): ReactElement {
|
|||||||
Clear filters
|
Clear filters
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
) : tasks.length === 0 ? (
|
||||||
|
/* Empty state */
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background: "var(--surface)",
|
||||||
|
border: "1px solid var(--border)",
|
||||||
|
borderRadius: "var(--r-lg)",
|
||||||
|
padding: 48,
|
||||||
|
textAlign: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p style={{ color: "var(--muted)", margin: 0, fontSize: "0.9rem" }}>
|
||||||
|
No tasks yet. Create some tasks to see them here.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
/* Board (always render columns to allow adding first task) */
|
/* Board */
|
||||||
<DragDropContext onDragEnd={handleDragEnd}>
|
<DragDropContext onDragEnd={handleDragEnd}>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -926,13 +755,7 @@ export default function KanbanPage(): ReactElement {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{COLUMNS.map((col) => (
|
{COLUMNS.map((col) => (
|
||||||
<KanbanColumn
|
<KanbanColumn key={col.status} config={col} tasks={grouped[col.status]} />
|
||||||
key={col.status}
|
|
||||||
config={col}
|
|
||||||
tasks={grouped[col.status]}
|
|
||||||
onAddTask={handleAddTask}
|
|
||||||
projectId={filterProject}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</DragDropContext>
|
</DragDropContext>
|
||||||
|
|||||||
@@ -4,39 +4,21 @@ import { useState, useEffect, useCallback, useRef } from "react";
|
|||||||
import type { ReactElement } from "react";
|
import type { ReactElement } from "react";
|
||||||
|
|
||||||
import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
|
import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
|
||||||
import {
|
import { fetchRunnerJobs, fetchJobSteps, RunnerJobStatus } from "@/lib/api/runner-jobs";
|
||||||
fetchActivityLogs,
|
import type { RunnerJob, JobStep } from "@/lib/api/runner-jobs";
|
||||||
ActivityAction,
|
|
||||||
EntityType,
|
|
||||||
type ActivityLog,
|
|
||||||
type ActivityLogFilters,
|
|
||||||
} from "@/lib/api/activity";
|
|
||||||
import { useWorkspaceId } from "@/lib/hooks";
|
import { useWorkspaceId } from "@/lib/hooks";
|
||||||
|
|
||||||
// ─── Constants ────────────────────────────────────────────────────────
|
// ─── Constants ────────────────────────────────────────────────────────
|
||||||
|
|
||||||
type ActionFilter = "all" | ActivityAction;
|
type StatusFilter = "all" | "running" | "completed" | "failed" | "queued";
|
||||||
type EntityFilter = "all" | EntityType;
|
|
||||||
type DateRange = "24h" | "7d" | "30d" | "all";
|
type DateRange = "24h" | "7d" | "30d" | "all";
|
||||||
|
|
||||||
const ACTION_OPTIONS: { value: ActionFilter; label: string }[] = [
|
const STATUS_OPTIONS: { value: StatusFilter; label: string }[] = [
|
||||||
{ value: "all", label: "All actions" },
|
{ value: "all", label: "All statuses" },
|
||||||
{ value: ActivityAction.CREATED, label: "Created" },
|
{ value: "running", label: "Running" },
|
||||||
{ value: ActivityAction.UPDATED, label: "Updated" },
|
{ value: "completed", label: "Completed" },
|
||||||
{ value: ActivityAction.DELETED, label: "Deleted" },
|
{ value: "failed", label: "Failed" },
|
||||||
{ value: ActivityAction.COMPLETED, label: "Completed" },
|
{ value: "queued", label: "Queued" },
|
||||||
{ value: ActivityAction.ASSIGNED, label: "Assigned" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const ENTITY_OPTIONS: { value: EntityFilter; label: string }[] = [
|
|
||||||
{ value: "all", label: "All entities" },
|
|
||||||
{ value: EntityType.TASK, label: "Tasks" },
|
|
||||||
{ value: EntityType.EVENT, label: "Events" },
|
|
||||||
{ value: EntityType.PROJECT, label: "Projects" },
|
|
||||||
{ value: EntityType.WORKSPACE, label: "Workspaces" },
|
|
||||||
{ value: EntityType.USER, label: "Users" },
|
|
||||||
{ value: EntityType.DOMAIN, label: "Domains" },
|
|
||||||
{ value: EntityType.IDEA, label: "Ideas" },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const DATE_RANGES: { value: DateRange; label: string }[] = [
|
const DATE_RANGES: { value: DateRange; label: string }[] = [
|
||||||
@@ -46,37 +28,37 @@ const DATE_RANGES: { value: DateRange; label: string }[] = [
|
|||||||
{ value: "all", label: "All" },
|
{ value: "all", label: "All" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const STATUS_FILTER_TO_ENUM: Record<StatusFilter, RunnerJobStatus[] | undefined> = {
|
||||||
|
all: undefined,
|
||||||
|
running: [RunnerJobStatus.RUNNING],
|
||||||
|
completed: [RunnerJobStatus.COMPLETED],
|
||||||
|
failed: [RunnerJobStatus.FAILED],
|
||||||
|
queued: [RunnerJobStatus.QUEUED, RunnerJobStatus.PENDING],
|
||||||
|
};
|
||||||
|
|
||||||
const POLL_INTERVAL_MS = 5_000;
|
const POLL_INTERVAL_MS = 5_000;
|
||||||
|
|
||||||
// ─── Helpers ──────────────────────────────────────────────────────────
|
// ─── Helpers ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
const ACTION_COLORS: Record<string, string> = {
|
function getStatusColor(status: string): string {
|
||||||
[ActivityAction.CREATED]: "var(--ms-teal-400)",
|
switch (status) {
|
||||||
[ActivityAction.UPDATED]: "var(--ms-blue-400)",
|
case "RUNNING":
|
||||||
[ActivityAction.DELETED]: "var(--danger)",
|
return "var(--ms-amber-400)";
|
||||||
[ActivityAction.COMPLETED]: "var(--ms-emerald-400)",
|
case "COMPLETED":
|
||||||
[ActivityAction.ASSIGNED]: "var(--ms-amber-400)",
|
return "var(--ms-teal-400)";
|
||||||
};
|
case "FAILED":
|
||||||
|
case "CANCELLED":
|
||||||
function getActionColor(action: string): string {
|
return "var(--danger)";
|
||||||
return ACTION_COLORS[action] ?? "var(--muted)";
|
case "QUEUED":
|
||||||
|
case "PENDING":
|
||||||
|
return "var(--ms-blue-400)";
|
||||||
|
default:
|
||||||
|
return "var(--muted)";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const ENTITY_LABELS: Record<string, string> = {
|
function formatRelativeTime(dateStr: string | null): string {
|
||||||
[EntityType.TASK]: "Task",
|
if (!dateStr) return "\u2014";
|
||||||
[EntityType.EVENT]: "Event",
|
|
||||||
[EntityType.PROJECT]: "Project",
|
|
||||||
[EntityType.WORKSPACE]: "Workspace",
|
|
||||||
[EntityType.USER]: "User",
|
|
||||||
[EntityType.DOMAIN]: "Domain",
|
|
||||||
[EntityType.IDEA]: "Idea",
|
|
||||||
};
|
|
||||||
|
|
||||||
function getEntityTypeLabel(entityType: string): string {
|
|
||||||
return ENTITY_LABELS[entityType] ?? entityType;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatRelativeTime(dateStr: string): string {
|
|
||||||
const date = new Date(dateStr);
|
const date = new Date(dateStr);
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
const diffMs = now - date.getTime();
|
const diffMs = now - date.getTime();
|
||||||
@@ -92,6 +74,29 @@ function formatRelativeTime(dateStr: string): string {
|
|||||||
return date.toLocaleDateString();
|
return date.toLocaleDateString();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function formatDuration(startedAt: string | null, completedAt: string | null): string {
|
||||||
|
if (!startedAt) return "\u2014";
|
||||||
|
const start = new Date(startedAt).getTime();
|
||||||
|
const end = completedAt ? new Date(completedAt).getTime() : Date.now();
|
||||||
|
const ms = end - start;
|
||||||
|
if (ms < 1_000) return `${String(ms)}ms`;
|
||||||
|
const sec = Math.floor(ms / 1_000);
|
||||||
|
if (sec < 60) return `${String(sec)}s`;
|
||||||
|
const min = Math.floor(sec / 60);
|
||||||
|
const remainSec = sec % 60;
|
||||||
|
return `${String(min)}m ${String(remainSec)}s`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatStepDuration(durationMs: number | null): string {
|
||||||
|
if (durationMs === null) return "\u2014";
|
||||||
|
if (durationMs < 1_000) return `${String(durationMs)}ms`;
|
||||||
|
const sec = Math.floor(durationMs / 1_000);
|
||||||
|
if (sec < 60) return `${String(sec)}s`;
|
||||||
|
const min = Math.floor(sec / 60);
|
||||||
|
const remainSec = sec % 60;
|
||||||
|
return `${String(min)}m ${String(remainSec)}s`;
|
||||||
|
}
|
||||||
|
|
||||||
function isWithinDateRange(dateStr: string, range: DateRange): boolean {
|
function isWithinDateRange(dateStr: string, range: DateRange): boolean {
|
||||||
if (range === "all") return true;
|
if (range === "all") return true;
|
||||||
const date = new Date(dateStr);
|
const date = new Date(dateStr);
|
||||||
@@ -100,16 +105,18 @@ function isWithinDateRange(dateStr: string, range: DateRange): boolean {
|
|||||||
return now - date.getTime() < hours * 60 * 60 * 1_000;
|
return now - date.getTime() < hours * 60 * 60 * 1_000;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── Action Badge ─────────────────────────────────────────────────────
|
// ─── Status Badge ─────────────────────────────────────────────────────
|
||||||
|
|
||||||
function ActionBadge({ action }: { action: string }): ReactElement {
|
function StatusBadge({ status }: { status: string }): ReactElement {
|
||||||
const color = getActionColor(action);
|
const color = getStatusColor(status);
|
||||||
|
const isRunning = status === "RUNNING";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
style={{
|
style={{
|
||||||
display: "inline-flex",
|
display: "inline-flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
|
gap: 6,
|
||||||
padding: "2px 10px",
|
padding: "2px 10px",
|
||||||
borderRadius: 9999,
|
borderRadius: 9999,
|
||||||
fontSize: "0.75rem",
|
fontSize: "0.75rem",
|
||||||
@@ -120,7 +127,18 @@ function ActionBadge({ action }: { action: string }): ReactElement {
|
|||||||
textTransform: "capitalize",
|
textTransform: "capitalize",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{action.toLowerCase()}
|
{isRunning && (
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
width: 6,
|
||||||
|
height: 6,
|
||||||
|
borderRadius: "50%",
|
||||||
|
background: color,
|
||||||
|
animation: "pulse 1.5s ease-in-out infinite",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{status.toLowerCase()}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -131,55 +149,59 @@ export default function LogsPage(): ReactElement {
|
|||||||
const workspaceId = useWorkspaceId();
|
const workspaceId = useWorkspaceId();
|
||||||
|
|
||||||
// Data state
|
// Data state
|
||||||
const [activities, setActivities] = useState<ActivityLog[]>([]);
|
const [jobs, setJobs] = useState<RunnerJob[]>([]);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Expanded job and steps
|
||||||
|
const [expandedJobId, setExpandedJobId] = useState<string | null>(null);
|
||||||
|
const [jobStepsMap, setJobStepsMap] = useState<Record<string, JobStep[]>>({});
|
||||||
|
const [stepsLoading, setStepsLoading] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
// Filters
|
// Filters
|
||||||
const [actionFilter, setActionFilter] = useState<ActionFilter>("all");
|
const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
|
||||||
const [entityFilter, setEntityFilter] = useState<EntityFilter>("all");
|
|
||||||
const [dateRange, setDateRange] = useState<DateRange>("7d");
|
const [dateRange, setDateRange] = useState<DateRange>("7d");
|
||||||
const [searchQuery, setSearchQuery] = useState("");
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
|
||||||
// Auto-refresh
|
// Auto-refresh
|
||||||
const [autoRefresh, setAutoRefresh] = useState(true);
|
const [autoRefresh, setAutoRefresh] = useState(false);
|
||||||
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||||
|
|
||||||
|
// Hover state
|
||||||
|
const [hoveredRowId, setHoveredRowId] = useState<string | null>(null);
|
||||||
|
|
||||||
// ─── Data Loading ─────────────────────────────────────────────────
|
// ─── Data Loading ─────────────────────────────────────────────────
|
||||||
|
|
||||||
const loadActivities = useCallback(async (): Promise<void> => {
|
const loadJobs = useCallback(async (): Promise<void> => {
|
||||||
try {
|
try {
|
||||||
const filters: ActivityLogFilters = {};
|
const statusEnums = STATUS_FILTER_TO_ENUM[statusFilter];
|
||||||
|
const filters: Parameters<typeof fetchRunnerJobs>[0] = {};
|
||||||
if (workspaceId) {
|
if (workspaceId) {
|
||||||
filters.workspaceId = workspaceId;
|
filters.workspaceId = workspaceId;
|
||||||
}
|
}
|
||||||
if (actionFilter !== "all") {
|
if (statusEnums) {
|
||||||
filters.action = actionFilter;
|
filters.status = statusEnums;
|
||||||
}
|
|
||||||
if (entityFilter !== "all") {
|
|
||||||
filters.entityType = entityFilter;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const response: Awaited<ReturnType<typeof fetchActivityLogs>> =
|
const data = await fetchRunnerJobs(filters);
|
||||||
await fetchActivityLogs(filters);
|
setJobs(data);
|
||||||
setActivities(response);
|
|
||||||
setError(null);
|
setError(null);
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
console.error("[Logs] Failed to fetch activity logs:", err);
|
console.error("[Logs] Failed to fetch runner jobs:", err);
|
||||||
setError(
|
setError(
|
||||||
err instanceof Error
|
err instanceof Error
|
||||||
? err.message
|
? err.message
|
||||||
: "We had trouble loading activity logs. Please try again when you're ready."
|
: "We had trouble loading jobs. Please try again when you're ready."
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}, [workspaceId, actionFilter, entityFilter]);
|
}, [workspaceId, statusFilter]);
|
||||||
|
|
||||||
// Initial load
|
// Initial load
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
|
|
||||||
loadActivities()
|
loadJobs()
|
||||||
.then(() => {
|
.then(() => {
|
||||||
if (!cancelled) {
|
if (!cancelled) {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
@@ -194,13 +216,13 @@ export default function LogsPage(): ReactElement {
|
|||||||
return (): void => {
|
return (): void => {
|
||||||
cancelled = true;
|
cancelled = true;
|
||||||
};
|
};
|
||||||
}, [loadActivities]);
|
}, [loadJobs]);
|
||||||
|
|
||||||
// Auto-refresh polling
|
// Auto-refresh polling
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (autoRefresh) {
|
if (autoRefresh) {
|
||||||
intervalRef.current = setInterval(() => {
|
intervalRef.current = setInterval(() => {
|
||||||
void loadActivities();
|
void loadJobs();
|
||||||
}, POLL_INTERVAL_MS);
|
}, POLL_INTERVAL_MS);
|
||||||
} else if (intervalRef.current) {
|
} else if (intervalRef.current) {
|
||||||
clearInterval(intervalRef.current);
|
clearInterval(intervalRef.current);
|
||||||
@@ -213,22 +235,55 @@ export default function LogsPage(): ReactElement {
|
|||||||
intervalRef.current = null;
|
intervalRef.current = null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, [autoRefresh, loadActivities]);
|
}, [autoRefresh, loadJobs]);
|
||||||
|
|
||||||
|
// ─── Steps Loading ────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const toggleExpand = useCallback(
|
||||||
|
(jobId: string) => {
|
||||||
|
if (expandedJobId === jobId) {
|
||||||
|
setExpandedJobId(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setExpandedJobId(jobId);
|
||||||
|
|
||||||
|
// Load steps if not already loaded
|
||||||
|
if (!jobStepsMap[jobId] && !stepsLoading.has(jobId)) {
|
||||||
|
setStepsLoading((prev) => new Set(prev).add(jobId));
|
||||||
|
|
||||||
|
fetchJobSteps(jobId, workspaceId ?? undefined)
|
||||||
|
.then((steps) => {
|
||||||
|
setJobStepsMap((prev) => ({ ...prev, [jobId]: steps }));
|
||||||
|
})
|
||||||
|
.catch((err: unknown) => {
|
||||||
|
console.error("[Logs] Failed to fetch steps for job:", jobId, err);
|
||||||
|
setJobStepsMap((prev) => ({ ...prev, [jobId]: [] }));
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setStepsLoading((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
next.delete(jobId);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[expandedJobId, jobStepsMap, stepsLoading, workspaceId]
|
||||||
|
);
|
||||||
|
|
||||||
// ─── Filtering ────────────────────────────────────────────────────
|
// ─── Filtering ────────────────────────────────────────────────────
|
||||||
|
|
||||||
const filteredActivities = activities.filter((activity) => {
|
const filteredJobs = jobs.filter((job) => {
|
||||||
// Date range filter
|
// Date range filter
|
||||||
if (!isWithinDateRange(activity.createdAt, dateRange)) return false;
|
if (!isWithinDateRange(job.createdAt, dateRange)) return false;
|
||||||
|
|
||||||
// Search filter
|
// Search filter
|
||||||
if (searchQuery.trim()) {
|
if (searchQuery.trim()) {
|
||||||
const q = searchQuery.toLowerCase();
|
const q = searchQuery.toLowerCase();
|
||||||
const matchesEntity = getEntityTypeLabel(activity.entityType).toLowerCase().includes(q);
|
const matchesType = job.type.toLowerCase().includes(q);
|
||||||
const matchesId = activity.entityId.toLowerCase().includes(q);
|
const matchesId = job.id.toLowerCase().includes(q);
|
||||||
const matchesUser = activity.user?.name?.toLowerCase().includes(q);
|
if (!matchesType && !matchesId) return false;
|
||||||
const matchesEmail = activity.user?.email.toLowerCase().includes(q);
|
|
||||||
if (!matchesEntity && !matchesId && !matchesUser && !matchesEmail) return false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
@@ -238,7 +293,7 @@ export default function LogsPage(): ReactElement {
|
|||||||
|
|
||||||
const handleManualRefresh = (): void => {
|
const handleManualRefresh = (): void => {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
void loadActivities().finally(() => {
|
void loadJobs().finally(() => {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@@ -252,12 +307,16 @@ export default function LogsPage(): ReactElement {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="container mx-auto px-4 py-8">
|
<main className="container mx-auto px-4 py-8">
|
||||||
{/* Pulse animation for auto-refresh */}
|
{/* Pulse animation for running status */}
|
||||||
<style>{`
|
<style>{`
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0%, 100% { opacity: 1; }
|
0%, 100% { opacity: 1; }
|
||||||
50% { opacity: 0.4; }
|
50% { opacity: 0.4; }
|
||||||
}
|
}
|
||||||
|
@keyframes auto-refresh-spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
|
|
||||||
{/* ─── Header ─────────────────────────────────────────────── */}
|
{/* ─── Header ─────────────────────────────────────────────── */}
|
||||||
@@ -273,10 +332,10 @@ export default function LogsPage(): ReactElement {
|
|||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-3xl font-bold" style={{ color: "var(--text)" }}>
|
<h1 className="text-3xl font-bold" style={{ color: "var(--text)" }}>
|
||||||
Activity Logs
|
Logs & Telemetry
|
||||||
</h1>
|
</h1>
|
||||||
<p className="mt-1" style={{ color: "var(--text-muted)" }}>
|
<p className="mt-1" style={{ color: "var(--text-muted)" }}>
|
||||||
Audit trail and activity history
|
Runner job history and step-level detail
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -349,11 +408,11 @@ export default function LogsPage(): ReactElement {
|
|||||||
marginBottom: 24,
|
marginBottom: 24,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Action filter */}
|
{/* Status filter */}
|
||||||
<select
|
<select
|
||||||
value={actionFilter}
|
value={statusFilter}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setActionFilter(e.target.value as ActionFilter);
|
setStatusFilter(e.target.value as StatusFilter);
|
||||||
}}
|
}}
|
||||||
style={{
|
style={{
|
||||||
padding: "8px 12px",
|
padding: "8px 12px",
|
||||||
@@ -366,31 +425,7 @@ export default function LogsPage(): ReactElement {
|
|||||||
minWidth: 140,
|
minWidth: 140,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{ACTION_OPTIONS.map((opt) => (
|
{STATUS_OPTIONS.map((opt) => (
|
||||||
<option key={opt.value} value={opt.value}>
|
|
||||||
{opt.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
{/* Entity filter */}
|
|
||||||
<select
|
|
||||||
value={entityFilter}
|
|
||||||
onChange={(e) => {
|
|
||||||
setEntityFilter(e.target.value as EntityFilter);
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
padding: "8px 12px",
|
|
||||||
borderRadius: 8,
|
|
||||||
fontSize: "0.82rem",
|
|
||||||
border: "1px solid var(--border)",
|
|
||||||
background: "var(--surface)",
|
|
||||||
color: "var(--text)",
|
|
||||||
cursor: "pointer",
|
|
||||||
minWidth: 140,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{ENTITY_OPTIONS.map((opt) => (
|
|
||||||
<option key={opt.value} value={opt.value}>
|
<option key={opt.value} value={opt.value}>
|
||||||
{opt.label}
|
{opt.label}
|
||||||
</option>
|
</option>
|
||||||
@@ -432,7 +467,7 @@ export default function LogsPage(): ReactElement {
|
|||||||
{/* Search input */}
|
{/* Search input */}
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Search by entity or user..."
|
placeholder="Search by job type..."
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setSearchQuery(e.target.value);
|
setSearchQuery(e.target.value);
|
||||||
@@ -452,9 +487,9 @@ export default function LogsPage(): ReactElement {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ─── Content ────────────────────────────────────────────── */}
|
{/* ─── Content ────────────────────────────────────────────── */}
|
||||||
{isLoading && activities.length === 0 ? (
|
{isLoading && jobs.length === 0 ? (
|
||||||
<div className="flex justify-center py-16">
|
<div className="flex justify-center py-16">
|
||||||
<MosaicSpinner label="Loading activity logs..." />
|
<MosaicSpinner label="Loading jobs..." />
|
||||||
</div>
|
</div>
|
||||||
) : error !== null ? (
|
) : error !== null ? (
|
||||||
<div
|
<div
|
||||||
@@ -473,7 +508,7 @@ export default function LogsPage(): ReactElement {
|
|||||||
Try again
|
Try again
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
) : filteredActivities.length === 0 ? (
|
) : filteredJobs.length === 0 ? (
|
||||||
<div
|
<div
|
||||||
className="rounded-lg p-8 text-center"
|
className="rounded-lg p-8 text-center"
|
||||||
style={{
|
style={{
|
||||||
@@ -481,10 +516,10 @@ export default function LogsPage(): ReactElement {
|
|||||||
border: "1px solid var(--border)",
|
border: "1px solid var(--border)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p style={{ color: "var(--text-muted)" }}>No activity logs found</p>
|
<p style={{ color: "var(--text-muted)" }}>No jobs found</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
/* ─── Activity Table ──────────────────────────────────────── */
|
/* ─── Job Table ──────────────────────────────────────────── */
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
@@ -500,7 +535,7 @@ export default function LogsPage(): ReactElement {
|
|||||||
background: "var(--bg-mid)",
|
background: "var(--bg-mid)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{["Action", "Entity", "User", "Details", "Time"].map((header) => (
|
{["Job Type", "Status", "Started", "Duration", "Steps"].map((header) => (
|
||||||
<th
|
<th
|
||||||
key={header}
|
key={header}
|
||||||
style={{
|
style={{
|
||||||
@@ -521,9 +556,32 @@ export default function LogsPage(): ReactElement {
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{filteredActivities.map((activity) => (
|
{filteredJobs.map((job) => {
|
||||||
<ActivityRow key={activity.id} activity={activity} />
|
const isExpanded = expandedJobId === job.id;
|
||||||
))}
|
const isHovered = hoveredRowId === job.id;
|
||||||
|
const steps = jobStepsMap[job.id];
|
||||||
|
const isStepsLoading = stepsLoading.has(job.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<JobRow
|
||||||
|
key={job.id}
|
||||||
|
job={job}
|
||||||
|
isExpanded={isExpanded}
|
||||||
|
isHovered={isHovered}
|
||||||
|
steps={steps}
|
||||||
|
isStepsLoading={isStepsLoading}
|
||||||
|
onToggle={() => {
|
||||||
|
toggleExpand(job.id);
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
setHoveredRowId(job.id);
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
setHoveredRowId(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
@@ -533,91 +591,260 @@ export default function LogsPage(): ReactElement {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── Activity Row Component ───────────────────────────────────────────
|
// ─── Job Row Component ────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function JobRow({
|
||||||
|
job,
|
||||||
|
isExpanded,
|
||||||
|
isHovered,
|
||||||
|
steps,
|
||||||
|
isStepsLoading,
|
||||||
|
onToggle,
|
||||||
|
onMouseEnter,
|
||||||
|
onMouseLeave,
|
||||||
|
}: {
|
||||||
|
job: RunnerJob;
|
||||||
|
isExpanded: boolean;
|
||||||
|
isHovered: boolean;
|
||||||
|
steps: JobStep[] | undefined;
|
||||||
|
isStepsLoading: boolean;
|
||||||
|
onToggle: () => void;
|
||||||
|
onMouseEnter: () => void;
|
||||||
|
onMouseLeave: () => void;
|
||||||
|
}): ReactElement {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<tr
|
||||||
|
onClick={onToggle}
|
||||||
|
onMouseEnter={onMouseEnter}
|
||||||
|
onMouseLeave={onMouseLeave}
|
||||||
|
style={{
|
||||||
|
background: isExpanded
|
||||||
|
? "var(--surface-2)"
|
||||||
|
: isHovered
|
||||||
|
? "var(--surface-2)"
|
||||||
|
: "var(--surface)",
|
||||||
|
cursor: "pointer",
|
||||||
|
borderBottom: isExpanded ? "none" : "1px solid var(--border)",
|
||||||
|
transition: "background 100ms ease",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
style={{
|
||||||
|
padding: "12px 16px",
|
||||||
|
fontSize: "0.85rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
color: "var(--text)",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
display: "inline-block",
|
||||||
|
width: 16,
|
||||||
|
textAlign: "center",
|
||||||
|
fontSize: "0.7rem",
|
||||||
|
color: "var(--muted)",
|
||||||
|
transition: "transform 150ms ease",
|
||||||
|
transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
▶
|
||||||
|
</span>
|
||||||
|
{job.type}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td style={{ padding: "12px 16px" }}>
|
||||||
|
<StatusBadge status={job.status} />
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
style={{
|
||||||
|
padding: "12px 16px",
|
||||||
|
fontSize: "0.82rem",
|
||||||
|
fontFamily: "var(--mono)",
|
||||||
|
color: "var(--text-muted)",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{formatRelativeTime(job.startedAt ?? job.createdAt)}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
style={{
|
||||||
|
padding: "12px 16px",
|
||||||
|
fontSize: "0.82rem",
|
||||||
|
fontFamily: "var(--mono)",
|
||||||
|
color: "var(--text-muted)",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{formatDuration(job.startedAt, job.completedAt)}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
style={{
|
||||||
|
padding: "12px 16px",
|
||||||
|
fontSize: "0.82rem",
|
||||||
|
fontFamily: "var(--mono)",
|
||||||
|
color: "var(--text-muted)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{steps ? String(steps.length) : "\u2014"}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
{/* Expanded Steps Section */}
|
||||||
|
{isExpanded && (
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
colSpan={5}
|
||||||
|
style={{
|
||||||
|
padding: 0,
|
||||||
|
borderBottom: "1px solid var(--border)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background: "var(--bg-mid)",
|
||||||
|
padding: "12px 16px 12px 48px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isStepsLoading ? (
|
||||||
|
<div style={{ display: "flex", justifyContent: "center", padding: 16 }}>
|
||||||
|
<MosaicSpinner size={24} label="Loading steps..." />
|
||||||
|
</div>
|
||||||
|
) : !steps || steps.length === 0 ? (
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
fontSize: "0.82rem",
|
||||||
|
color: "var(--text-muted)",
|
||||||
|
padding: "8px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
No steps recorded for this job
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<table style={{ width: "100%", borderCollapse: "collapse" }}>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{["#", "Name", "Phase", "Status", "Duration"].map((header) => (
|
||||||
|
<th
|
||||||
|
key={header}
|
||||||
|
style={{
|
||||||
|
padding: "6px 12px",
|
||||||
|
textAlign: "left",
|
||||||
|
fontSize: "0.7rem",
|
||||||
|
fontWeight: 600,
|
||||||
|
textTransform: "uppercase",
|
||||||
|
letterSpacing: "0.05em",
|
||||||
|
color: "var(--muted)",
|
||||||
|
fontFamily: "var(--mono)",
|
||||||
|
borderBottom: "1px solid var(--border)",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{header}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{steps
|
||||||
|
.sort((a, b) => a.ordinal - b.ordinal)
|
||||||
|
.map((step) => (
|
||||||
|
<StepRow key={step.id} step={step} />
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Job error message if failed */}
|
||||||
|
{job.error && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginTop: 12,
|
||||||
|
padding: "8px 12px",
|
||||||
|
borderRadius: 6,
|
||||||
|
fontSize: "0.78rem",
|
||||||
|
fontFamily: "var(--mono)",
|
||||||
|
color: "var(--danger)",
|
||||||
|
background: "color-mix(in srgb, var(--danger) 8%, transparent)",
|
||||||
|
border: "1px solid color-mix(in srgb, var(--danger) 20%, transparent)",
|
||||||
|
wordBreak: "break-all",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{job.error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Step Row Component ───────────────────────────────────────────────
|
||||||
|
|
||||||
|
function StepRow({ step }: { step: JobStep }): ReactElement {
|
||||||
|
const [hovered, setHovered] = useState(false);
|
||||||
|
|
||||||
function ActivityRow({ activity }: { activity: ActivityLog }): ReactElement {
|
|
||||||
return (
|
return (
|
||||||
<tr
|
<tr
|
||||||
|
onMouseEnter={() => {
|
||||||
|
setHovered(true);
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
setHovered(false);
|
||||||
|
}}
|
||||||
style={{
|
style={{
|
||||||
background: "var(--surface)",
|
background: hovered ? "color-mix(in srgb, var(--surface) 50%, transparent)" : "transparent",
|
||||||
borderBottom: "1px solid var(--border)",
|
borderBottom: "1px solid color-mix(in srgb, var(--border) 50%, transparent)",
|
||||||
transition: "background 100ms ease",
|
transition: "background 100ms ease",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<td style={{ padding: "12px 16px" }}>
|
|
||||||
<ActionBadge action={activity.action} />
|
|
||||||
</td>
|
|
||||||
<td
|
<td
|
||||||
style={{
|
style={{
|
||||||
padding: "12px 16px",
|
padding: "6px 12px",
|
||||||
fontSize: "0.85rem",
|
|
||||||
fontWeight: 500,
|
|
||||||
color: "var(--text)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
|
||||||
<span>{getEntityTypeLabel(activity.entityType)}</span>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: "0.75rem",
|
|
||||||
color: "var(--muted)",
|
|
||||||
fontFamily: "var(--mono)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{activity.entityId}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
style={{
|
|
||||||
padding: "12px 16px",
|
|
||||||
fontSize: "0.82rem",
|
|
||||||
color: "var(--text)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{activity.user ? (
|
|
||||||
<div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
|
||||||
<span>{activity.user.name ?? activity.user.email}</span>
|
|
||||||
{activity.user.name && (
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: "0.75rem",
|
|
||||||
color: "var(--muted)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{activity.user.email}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<span style={{ color: "var(--muted)" }}>—</span>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
style={{
|
|
||||||
padding: "12px 16px",
|
|
||||||
fontSize: "0.78rem",
|
fontSize: "0.78rem",
|
||||||
color: "var(--text-muted)",
|
|
||||||
fontFamily: "var(--mono)",
|
fontFamily: "var(--mono)",
|
||||||
maxWidth: 300,
|
color: "var(--muted)",
|
||||||
overflow: "hidden",
|
|
||||||
textOverflow: "ellipsis",
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
}}
|
}}
|
||||||
title={activity.details ? JSON.stringify(activity.details) : undefined}
|
|
||||||
>
|
>
|
||||||
{activity.details ? JSON.stringify(activity.details) : "—"}
|
{String(step.ordinal)}
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
style={{
|
style={{
|
||||||
padding: "12px 16px",
|
padding: "6px 12px",
|
||||||
fontSize: "0.82rem",
|
fontSize: "0.8rem",
|
||||||
|
color: "var(--text)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{step.name}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
style={{
|
||||||
|
padding: "6px 12px",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
fontFamily: "var(--mono)",
|
||||||
|
color: "var(--text-muted)",
|
||||||
|
textTransform: "lowercase",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{step.phase}
|
||||||
|
</td>
|
||||||
|
<td style={{ padding: "6px 12px" }}>
|
||||||
|
<StatusBadge status={step.status} />
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
style={{
|
||||||
|
padding: "6px 12px",
|
||||||
|
fontSize: "0.78rem",
|
||||||
fontFamily: "var(--mono)",
|
fontFamily: "var(--mono)",
|
||||||
color: "var(--text-muted)",
|
color: "var(--text-muted)",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{formatRelativeTime(activity.createdAt)}
|
{formatStepDuration(step.durationMs)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,491 +0,0 @@
|
|||||||
"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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -17,8 +17,6 @@ import {
|
|||||||
import { fetchProjects, createProject, deleteProject, ProjectStatus } from "@/lib/api/projects";
|
import { fetchProjects, createProject, deleteProject, ProjectStatus } from "@/lib/api/projects";
|
||||||
import type { Project, CreateProjectDto } from "@/lib/api/projects";
|
import type { Project, CreateProjectDto } from "@/lib/api/projects";
|
||||||
import { useWorkspaceId } from "@/lib/hooks";
|
import { useWorkspaceId } from "@/lib/hooks";
|
||||||
import { fetchDomains } from "@/lib/api/domains";
|
|
||||||
import type { Domain } from "@mosaic/shared";
|
|
||||||
|
|
||||||
/* ---------------------------------------------------------------------------
|
/* ---------------------------------------------------------------------------
|
||||||
Status badge helpers
|
Status badge helpers
|
||||||
@@ -67,14 +65,11 @@ interface ProjectCardProps {
|
|||||||
project: Project;
|
project: Project;
|
||||||
onDelete: (id: string) => void;
|
onDelete: (id: string) => void;
|
||||||
onClick: (id: string) => void;
|
onClick: (id: string) => void;
|
||||||
domains: Domain[];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function ProjectCard({ project, onDelete, onClick, domains }: ProjectCardProps): ReactElement {
|
function ProjectCard({ project, onDelete, onClick }: ProjectCardProps): ReactElement {
|
||||||
const [hovered, setHovered] = useState(false);
|
const [hovered, setHovered] = useState(false);
|
||||||
const status = getStatusStyle(project.status);
|
const status = getStatusStyle(project.status);
|
||||||
// Find domain if project has a domainId
|
|
||||||
const domain = project.domainId ? domains.find((d) => d.id === project.domainId) : undefined;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -209,22 +204,6 @@ function ProjectCard({ project, onDelete, onClick, domains }: ProjectCardProps):
|
|||||||
>
|
>
|
||||||
{status.label}
|
{status.label}
|
||||||
</span>
|
</span>
|
||||||
{domain && (
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
display: "inline-block",
|
|
||||||
padding: "2px 10px",
|
|
||||||
borderRadius: "var(--r)",
|
|
||||||
background: "rgba(139,92,246,0.15)",
|
|
||||||
color: "var(--purple)",
|
|
||||||
fontSize: "0.75rem",
|
|
||||||
fontWeight: 500,
|
|
||||||
marginLeft: 8,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{domain.name}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Timestamps */}
|
{/* Timestamps */}
|
||||||
<span
|
<span
|
||||||
@@ -250,7 +229,6 @@ interface CreateDialogProps {
|
|||||||
onOpenChange: (open: boolean) => void;
|
onOpenChange: (open: boolean) => void;
|
||||||
onSubmit: (data: CreateProjectDto) => Promise<void>;
|
onSubmit: (data: CreateProjectDto) => Promise<void>;
|
||||||
isSubmitting: boolean;
|
isSubmitting: boolean;
|
||||||
domains: Domain[];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function CreateProjectDialog({
|
function CreateProjectDialog({
|
||||||
@@ -258,24 +236,20 @@ function CreateProjectDialog({
|
|||||||
onOpenChange,
|
onOpenChange,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
isSubmitting,
|
isSubmitting,
|
||||||
domains,
|
|
||||||
}: CreateDialogProps): ReactElement {
|
}: CreateDialogProps): ReactElement {
|
||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
const [description, setDescription] = useState("");
|
const [description, setDescription] = useState("");
|
||||||
const [formError, setFormError] = useState<string | null>(null);
|
const [formError, setFormError] = useState<string | null>(null);
|
||||||
const [domainId, setDomainId] = useState("");
|
|
||||||
|
|
||||||
function resetForm(): void {
|
function resetForm(): void {
|
||||||
setName("");
|
setName("");
|
||||||
setDescription("");
|
setDescription("");
|
||||||
setFormError(null);
|
setFormError(null);
|
||||||
setDomainId("");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleSubmit(e: SyntheticEvent): Promise<void> {
|
async function handleSubmit(e: SyntheticEvent): Promise<void> {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setFormError(null);
|
setFormError(null);
|
||||||
setDomainId("");
|
|
||||||
|
|
||||||
const trimmedName = name.trim();
|
const trimmedName = name.trim();
|
||||||
if (!trimmedName) {
|
if (!trimmedName) {
|
||||||
@@ -289,9 +263,6 @@ function CreateProjectDialog({
|
|||||||
if (trimmedDesc) {
|
if (trimmedDesc) {
|
||||||
payload.description = trimmedDesc;
|
payload.description = trimmedDesc;
|
||||||
}
|
}
|
||||||
if (domainId) {
|
|
||||||
payload.domainId = domainId;
|
|
||||||
}
|
|
||||||
await onSubmit(payload);
|
await onSubmit(payload);
|
||||||
resetForm();
|
resetForm();
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
@@ -411,47 +382,6 @@ function CreateProjectDialog({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Domain */}
|
|
||||||
<div style={{ marginBottom: 16 }}>
|
|
||||||
<label
|
|
||||||
htmlFor="project-domain"
|
|
||||||
style={{
|
|
||||||
display: "block",
|
|
||||||
marginBottom: 6,
|
|
||||||
fontSize: "0.85rem",
|
|
||||||
fontWeight: 500,
|
|
||||||
color: "var(--text-2)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Domain (optional)
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
id="project-domain"
|
|
||||||
value={domainId}
|
|
||||||
onChange={(e) => {
|
|
||||||
setDomainId(e.target.value);
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
padding: "8px 12px",
|
|
||||||
background: "var(--bg)",
|
|
||||||
border: "1px solid var(--border)",
|
|
||||||
borderRadius: "var(--r)",
|
|
||||||
color: "var(--text)",
|
|
||||||
fontSize: "0.9rem",
|
|
||||||
outline: "none",
|
|
||||||
boxSizing: "border-box",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="">None</option>
|
|
||||||
{domains.map((d) => (
|
|
||||||
<option key={d.id} value={d.id}>
|
|
||||||
{d.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Form error */}
|
{/* Form error */}
|
||||||
{formError !== null && (
|
{formError !== null && (
|
||||||
<p style={{ color: "var(--danger)", fontSize: "0.85rem", margin: "0 0 12px" }}>
|
<p style={{ color: "var(--danger)", fontSize: "0.85rem", margin: "0 0 12px" }}>
|
||||||
@@ -602,7 +532,6 @@ export default function ProjectsPage(): ReactElement {
|
|||||||
const workspaceId = useWorkspaceId();
|
const workspaceId = useWorkspaceId();
|
||||||
|
|
||||||
const [projects, setProjects] = useState<Project[]>([]);
|
const [projects, setProjects] = useState<Project[]>([]);
|
||||||
const [domains, setDomains] = useState<Domain[]>([]);
|
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
@@ -672,33 +601,6 @@ export default function ProjectsPage(): ReactElement {
|
|||||||
};
|
};
|
||||||
}, [workspaceId]);
|
}, [workspaceId]);
|
||||||
|
|
||||||
// Load domains
|
|
||||||
useEffect(() => {
|
|
||||||
if (!workspaceId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let cancelled = false;
|
|
||||||
const wsId = workspaceId;
|
|
||||||
|
|
||||||
async function loadDomains(): Promise<void> {
|
|
||||||
try {
|
|
||||||
const response = await fetchDomains(undefined, wsId);
|
|
||||||
if (!cancelled) {
|
|
||||||
setDomains(response.data);
|
|
||||||
}
|
|
||||||
} catch (err: unknown) {
|
|
||||||
console.error("[Projects] Failed to fetch domains:", err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
void loadDomains();
|
|
||||||
|
|
||||||
return (): void => {
|
|
||||||
cancelled = true;
|
|
||||||
};
|
|
||||||
}, [workspaceId]);
|
|
||||||
|
|
||||||
function handleRetry(): void {
|
function handleRetry(): void {
|
||||||
void loadProjects(workspaceId);
|
void loadProjects(workspaceId);
|
||||||
}
|
}
|
||||||
@@ -877,7 +779,6 @@ export default function ProjectsPage(): ReactElement {
|
|||||||
project={project}
|
project={project}
|
||||||
onDelete={handleDeleteRequest}
|
onDelete={handleDeleteRequest}
|
||||||
onClick={handleCardClick}
|
onClick={handleCardClick}
|
||||||
domains={domains}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -889,7 +790,6 @@ export default function ProjectsPage(): ReactElement {
|
|||||||
onOpenChange={setCreateOpen}
|
onOpenChange={setCreateOpen}
|
||||||
onSubmit={handleCreate}
|
onSubmit={handleCreate}
|
||||||
isSubmitting={isCreating}
|
isSubmitting={isCreating}
|
||||||
domains={domains}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Delete Confirmation Dialog */}
|
{/* Delete Confirmation Dialog */}
|
||||||
|
|||||||
@@ -1,356 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import {
|
|
||||||
useCallback,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useState,
|
|
||||||
type ChangeEvent,
|
|
||||||
type ReactElement,
|
|
||||||
type SyntheticEvent,
|
|
||||||
} from "react";
|
|
||||||
import { FleetSettingsNav } from "@/components/settings/FleetSettingsNav";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import {
|
|
||||||
fetchFleetAgentConfig,
|
|
||||||
fetchFleetProviders,
|
|
||||||
updateFleetAgentConfig,
|
|
||||||
type FleetProvider,
|
|
||||||
type FleetProviderModel,
|
|
||||||
type UpdateFleetAgentConfigRequest,
|
|
||||||
} from "@/lib/api/fleet-settings";
|
|
||||||
|
|
||||||
function getErrorMessage(error: unknown, fallback: string): string {
|
|
||||||
if (error instanceof Error && error.message.trim().length > 0) {
|
|
||||||
return error.message;
|
|
||||||
}
|
|
||||||
|
|
||||||
return fallback;
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeProviderModels(models: unknown): FleetProviderModel[] {
|
|
||||||
if (!Array.isArray(models)) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const parsed: FleetProviderModel[] = [];
|
|
||||||
|
|
||||||
models.forEach((entry) => {
|
|
||||||
if (typeof entry === "string" && entry.trim().length > 0) {
|
|
||||||
parsed.push({ id: entry.trim(), name: entry.trim() });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (entry && typeof entry === "object") {
|
|
||||||
const record = entry as Record<string, unknown>;
|
|
||||||
const id =
|
|
||||||
typeof record.id === "string"
|
|
||||||
? record.id.trim()
|
|
||||||
: typeof record.name === "string"
|
|
||||||
? record.name.trim()
|
|
||||||
: "";
|
|
||||||
|
|
||||||
if (id.length > 0) {
|
|
||||||
parsed.push({ id, name: id });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const seen = new Set<string>();
|
|
||||||
return parsed.filter((model) => {
|
|
||||||
if (seen.has(model.id)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
seen.add(model.id);
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseModelList(value: string): string[] {
|
|
||||||
const seen = new Set<string>();
|
|
||||||
|
|
||||||
return value
|
|
||||||
.split(/\n|,/g)
|
|
||||||
.map((segment) => segment.trim())
|
|
||||||
.filter((segment) => segment.length > 0)
|
|
||||||
.filter((segment) => {
|
|
||||||
if (seen.has(segment)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
seen.add(segment);
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function deriveAvailableModels(providers: FleetProvider[]): string[] {
|
|
||||||
const seen = new Set<string>();
|
|
||||||
const models: string[] = [];
|
|
||||||
|
|
||||||
providers.forEach((provider) => {
|
|
||||||
normalizeProviderModels(provider.models).forEach((model) => {
|
|
||||||
if (seen.has(model.id)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
seen.add(model.id);
|
|
||||||
models.push(model.id);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return models.sort((left, right) => left.localeCompare(right));
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function AgentConfigSettingsPage(): ReactElement {
|
|
||||||
const [providers, setProviders] = useState<FleetProvider[]>([]);
|
|
||||||
const [primaryModel, setPrimaryModel] = useState<string>("");
|
|
||||||
const [fallbackModelsText, setFallbackModelsText] = useState<string>("");
|
|
||||||
const [personality, setPersonality] = useState<string>("");
|
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
|
||||||
const [isSaving, setIsSaving] = useState<boolean>(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const availableModels = useMemo(() => deriveAvailableModels(providers), [providers]);
|
|
||||||
const fallbackModels = useMemo(() => parseModelList(fallbackModelsText), [fallbackModelsText]);
|
|
||||||
|
|
||||||
const modelSelectOptions = useMemo(() => {
|
|
||||||
if (primaryModel.length > 0 && !availableModels.includes(primaryModel)) {
|
|
||||||
return [primaryModel, ...availableModels];
|
|
||||||
}
|
|
||||||
|
|
||||||
return availableModels;
|
|
||||||
}, [availableModels, primaryModel]);
|
|
||||||
|
|
||||||
const loadSettings = useCallback(async (): Promise<void> => {
|
|
||||||
setIsLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const [providerData, agentConfig] = await Promise.all([
|
|
||||||
fetchFleetProviders(),
|
|
||||||
fetchFleetAgentConfig(),
|
|
||||||
]);
|
|
||||||
setProviders(providerData);
|
|
||||||
setPrimaryModel(agentConfig.primaryModel ?? "");
|
|
||||||
setFallbackModelsText(agentConfig.fallbackModels.join("\n"));
|
|
||||||
setPersonality(agentConfig.personality ?? "");
|
|
||||||
setError(null);
|
|
||||||
} catch (loadError: unknown) {
|
|
||||||
setError(getErrorMessage(loadError, "Failed to load agent configuration."));
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
void loadSettings();
|
|
||||||
}, [loadSettings]);
|
|
||||||
|
|
||||||
function appendFallbackModel(model: string): void {
|
|
||||||
const current = parseModelList(fallbackModelsText);
|
|
||||||
if (current.includes(model)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const next = [...current, model];
|
|
||||||
setFallbackModelsText(next.join("\n"));
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSave(event: SyntheticEvent): Promise<void> {
|
|
||||||
event.preventDefault();
|
|
||||||
setError(null);
|
|
||||||
setSuccessMessage(null);
|
|
||||||
|
|
||||||
const updatePayload: UpdateFleetAgentConfigRequest = {
|
|
||||||
personality: personality.trim(),
|
|
||||||
};
|
|
||||||
|
|
||||||
if (primaryModel.trim().length > 0) {
|
|
||||||
updatePayload.primaryModel = primaryModel.trim();
|
|
||||||
}
|
|
||||||
|
|
||||||
const parsedFallbacks = parseModelList(fallbackModelsText).filter(
|
|
||||||
(model) => model !== primaryModel.trim()
|
|
||||||
);
|
|
||||||
if (parsedFallbacks.length > 0) {
|
|
||||||
updatePayload.fallbackModels = parsedFallbacks;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
setIsSaving(true);
|
|
||||||
await updateFleetAgentConfig(updatePayload);
|
|
||||||
setSuccessMessage("Agent configuration saved.");
|
|
||||||
await loadSettings();
|
|
||||||
} catch (saveError: unknown) {
|
|
||||||
setError(getErrorMessage(saveError, "Failed to save agent configuration."));
|
|
||||||
} finally {
|
|
||||||
setIsSaving(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="max-w-6xl mx-auto p-6 space-y-6">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold">Agent Configuration</h1>
|
|
||||||
<p className="text-muted-foreground mt-1">
|
|
||||||
Assign primary and fallback models for your agent runtime behavior.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<FleetSettingsNav />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Current Assignment</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Snapshot of your currently saved model routing configuration.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
{isLoading ? (
|
|
||||||
<p className="text-sm text-muted-foreground">Loading configuration...</p>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium">Primary Model</p>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
{primaryModel.length > 0 ? primaryModel : "No primary model configured"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium">Fallback Models</p>
|
|
||||||
{fallbackModels.length === 0 ? (
|
|
||||||
<p className="text-sm text-muted-foreground">No fallback models configured</p>
|
|
||||||
) : (
|
|
||||||
<div className="flex flex-wrap gap-2 mt-2">
|
|
||||||
{fallbackModels.map((model) => (
|
|
||||||
<Badge key={`current-${model}`} variant="outline">
|
|
||||||
{model}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Update Agent Config</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Select a primary model and define fallback ordering. Models come from your provider
|
|
||||||
settings.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<form onSubmit={(event) => void handleSave(event)} className="space-y-5">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="primary-model">Primary Model</Label>
|
|
||||||
<Select
|
|
||||||
value={primaryModel.length > 0 ? primaryModel : "__none__"}
|
|
||||||
onValueChange={(value) => {
|
|
||||||
setPrimaryModel(value === "__none__" ? "" : value);
|
|
||||||
}}
|
|
||||||
disabled={isLoading || isSaving}
|
|
||||||
>
|
|
||||||
<SelectTrigger id="primary-model">
|
|
||||||
<SelectValue placeholder="Select a primary model" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="__none__">No primary model selected</SelectItem>
|
|
||||||
{modelSelectOptions.map((model) => (
|
|
||||||
<SelectItem key={model} value={model}>
|
|
||||||
{model}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
{availableModels.length === 0 ? (
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
No models available yet. Add provider models first in Providers settings.
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="fallback-models">Fallback Models</Label>
|
|
||||||
<Textarea
|
|
||||||
id="fallback-models"
|
|
||||||
value={fallbackModelsText}
|
|
||||||
onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
|
|
||||||
setFallbackModelsText(event.target.value);
|
|
||||||
}}
|
|
||||||
rows={4}
|
|
||||||
placeholder={"One model per line\nExample: gpt-4.1-mini"}
|
|
||||||
disabled={isLoading || isSaving}
|
|
||||||
/>
|
|
||||||
{availableModels.length > 0 ? (
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{availableModels
|
|
||||||
.filter((model) => model !== primaryModel)
|
|
||||||
.map((model) => (
|
|
||||||
<Button
|
|
||||||
key={`suggest-${model}`}
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
appendFallbackModel(model);
|
|
||||||
}}
|
|
||||||
disabled={fallbackModels.includes(model) || isSaving}
|
|
||||||
>
|
|
||||||
{fallbackModels.includes(model) ? `Added: ${model}` : `Add ${model}`}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="agent-personality">Personality / SOUL</Label>
|
|
||||||
<Textarea
|
|
||||||
id="agent-personality"
|
|
||||||
value={personality}
|
|
||||||
onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
|
|
||||||
setPersonality(event.target.value);
|
|
||||||
}}
|
|
||||||
rows={8}
|
|
||||||
placeholder="Optional system personality instructions..."
|
|
||||||
disabled={isLoading || isSaving}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error ? (
|
|
||||||
<p className="text-sm text-destructive" role="alert">
|
|
||||||
{error}
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{successMessage ? <p className="text-sm text-emerald-600">{successMessage}</p> : null}
|
|
||||||
|
|
||||||
<Button type="submit" disabled={isLoading || isSaving}>
|
|
||||||
{isSaving ? "Saving..." : "Save Agent Config"}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,492 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import {
|
|
||||||
useCallback,
|
|
||||||
useEffect,
|
|
||||||
useState,
|
|
||||||
type ChangeEvent,
|
|
||||||
type ReactElement,
|
|
||||||
type SyntheticEvent,
|
|
||||||
} from "react";
|
|
||||||
import { FleetSettingsNav } from "@/components/settings/FleetSettingsNav";
|
|
||||||
import { SettingsAccessDenied } from "@/components/settings/SettingsAccessDenied";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
import {
|
|
||||||
AlertDialog,
|
|
||||||
AlertDialogAction,
|
|
||||||
AlertDialogCancel,
|
|
||||||
AlertDialogContent,
|
|
||||||
AlertDialogDescription,
|
|
||||||
AlertDialogFooter,
|
|
||||||
AlertDialogHeader,
|
|
||||||
AlertDialogTitle,
|
|
||||||
} from "@/components/ui/alert-dialog";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import {
|
|
||||||
deleteFleetOidcConfig,
|
|
||||||
fetchFleetOidcConfig,
|
|
||||||
resetBreakglassAdminPassword,
|
|
||||||
updateFleetOidcConfig,
|
|
||||||
type FleetOidcConfig,
|
|
||||||
} from "@/lib/api/fleet-settings";
|
|
||||||
import { fetchOnboardingStatus } from "@/lib/api/onboarding";
|
|
||||||
|
|
||||||
interface OidcFormState {
|
|
||||||
issuerUrl: string;
|
|
||||||
clientId: string;
|
|
||||||
clientSecret: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface BreakglassFormState {
|
|
||||||
username: string;
|
|
||||||
currentPassword: string;
|
|
||||||
newPassword: string;
|
|
||||||
confirmPassword: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const INITIAL_OIDC_FORM: OidcFormState = {
|
|
||||||
issuerUrl: "",
|
|
||||||
clientId: "",
|
|
||||||
clientSecret: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
const INITIAL_BREAKGLASS_FORM: BreakglassFormState = {
|
|
||||||
username: "",
|
|
||||||
currentPassword: "",
|
|
||||||
newPassword: "",
|
|
||||||
confirmPassword: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
function getErrorMessage(error: unknown, fallback: string): string {
|
|
||||||
if (error instanceof Error && error.message.trim().length > 0) {
|
|
||||||
return error.message;
|
|
||||||
}
|
|
||||||
|
|
||||||
return fallback;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isAdminGuardError(error: unknown): boolean {
|
|
||||||
if (!(error instanceof Error)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const normalized = error.message.toLowerCase();
|
|
||||||
return (
|
|
||||||
normalized.includes("requires system administrator") ||
|
|
||||||
normalized.includes("forbidden") ||
|
|
||||||
normalized.includes("403")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function AuthSettingsPage(): ReactElement {
|
|
||||||
const [oidcConfig, setOidcConfig] = useState<FleetOidcConfig | null>(null);
|
|
||||||
const [oidcForm, setOidcForm] = useState<OidcFormState>(INITIAL_OIDC_FORM);
|
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
|
||||||
const [isSavingOidc, setIsSavingOidc] = useState<boolean>(false);
|
|
||||||
const [isDeletingOidc, setIsDeletingOidc] = useState<boolean>(false);
|
|
||||||
const [oidcError, setOidcError] = useState<string | null>(null);
|
|
||||||
const [oidcSuccessMessage, setOidcSuccessMessage] = useState<string | null>(null);
|
|
||||||
const [showRemoveOidcDialog, setShowRemoveOidcDialog] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const [breakglassForm, setBreakglassForm] =
|
|
||||||
useState<BreakglassFormState>(INITIAL_BREAKGLASS_FORM);
|
|
||||||
const [breakglassStatus, setBreakglassStatus] = useState<"active" | "inactive">("inactive");
|
|
||||||
const [isResettingPassword, setIsResettingPassword] = useState<boolean>(false);
|
|
||||||
const [breakglassError, setBreakglassError] = useState<string | null>(null);
|
|
||||||
const [breakglassSuccessMessage, setBreakglassSuccessMessage] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const [isAccessDenied, setIsAccessDenied] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const loadAuthSettings = useCallback(async (): Promise<void> => {
|
|
||||||
setIsLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const [oidcResponse, onboardingStatus] = await Promise.all([
|
|
||||||
fetchFleetOidcConfig(),
|
|
||||||
fetchOnboardingStatus().catch(() => ({ completed: false })),
|
|
||||||
]);
|
|
||||||
|
|
||||||
setOidcConfig(oidcResponse);
|
|
||||||
setOidcForm({
|
|
||||||
issuerUrl: oidcResponse.issuerUrl ?? "",
|
|
||||||
clientId: oidcResponse.clientId ?? "",
|
|
||||||
clientSecret: "",
|
|
||||||
});
|
|
||||||
setBreakglassStatus(onboardingStatus.completed ? "active" : "inactive");
|
|
||||||
setIsAccessDenied(false);
|
|
||||||
setOidcError(null);
|
|
||||||
} catch (loadError: unknown) {
|
|
||||||
if (isAdminGuardError(loadError)) {
|
|
||||||
setIsAccessDenied(true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setOidcError(getErrorMessage(loadError, "Failed to load authentication settings."));
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
void loadAuthSettings();
|
|
||||||
}, [loadAuthSettings]);
|
|
||||||
|
|
||||||
async function handleSaveOidc(event: SyntheticEvent): Promise<void> {
|
|
||||||
event.preventDefault();
|
|
||||||
setOidcError(null);
|
|
||||||
setOidcSuccessMessage(null);
|
|
||||||
|
|
||||||
const issuerUrl = oidcForm.issuerUrl.trim();
|
|
||||||
const clientId = oidcForm.clientId.trim();
|
|
||||||
const clientSecret = oidcForm.clientSecret.trim();
|
|
||||||
|
|
||||||
if (issuerUrl.length === 0 || clientId.length === 0 || clientSecret.length === 0) {
|
|
||||||
setOidcError("Issuer URL, client ID, and client secret are required.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
setIsSavingOidc(true);
|
|
||||||
await updateFleetOidcConfig({
|
|
||||||
issuerUrl,
|
|
||||||
clientId,
|
|
||||||
clientSecret,
|
|
||||||
});
|
|
||||||
setOidcSuccessMessage("OIDC configuration updated.");
|
|
||||||
await loadAuthSettings();
|
|
||||||
} catch (saveError: unknown) {
|
|
||||||
setOidcError(getErrorMessage(saveError, "Failed to update OIDC configuration."));
|
|
||||||
} finally {
|
|
||||||
setIsSavingOidc(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleRemoveOidc(): Promise<void> {
|
|
||||||
try {
|
|
||||||
setIsDeletingOidc(true);
|
|
||||||
await deleteFleetOidcConfig();
|
|
||||||
setOidcSuccessMessage("OIDC configuration removed.");
|
|
||||||
setShowRemoveOidcDialog(false);
|
|
||||||
await loadAuthSettings();
|
|
||||||
} catch (deleteError: unknown) {
|
|
||||||
setOidcError(getErrorMessage(deleteError, "Failed to remove OIDC configuration."));
|
|
||||||
} finally {
|
|
||||||
setIsDeletingOidc(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleResetBreakglassPassword(event: SyntheticEvent): Promise<void> {
|
|
||||||
event.preventDefault();
|
|
||||||
setBreakglassError(null);
|
|
||||||
setBreakglassSuccessMessage(null);
|
|
||||||
|
|
||||||
const username = breakglassForm.username.trim();
|
|
||||||
const newPassword = breakglassForm.newPassword;
|
|
||||||
const confirmPassword = breakglassForm.confirmPassword;
|
|
||||||
|
|
||||||
if (username.length === 0) {
|
|
||||||
setBreakglassError("Username is required.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newPassword.length < 8) {
|
|
||||||
setBreakglassError("New password must be at least 8 characters.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newPassword !== confirmPassword) {
|
|
||||||
setBreakglassError("Password confirmation does not match.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
setIsResettingPassword(true);
|
|
||||||
await resetBreakglassAdminPassword({
|
|
||||||
username,
|
|
||||||
newPassword,
|
|
||||||
});
|
|
||||||
setBreakglassSuccessMessage(`Password reset for "${username}".`);
|
|
||||||
setBreakglassStatus("active");
|
|
||||||
setBreakglassForm((previous) => ({
|
|
||||||
...previous,
|
|
||||||
currentPassword: "",
|
|
||||||
newPassword: "",
|
|
||||||
confirmPassword: "",
|
|
||||||
}));
|
|
||||||
} catch (resetError: unknown) {
|
|
||||||
setBreakglassError(getErrorMessage(resetError, "Failed to reset breakglass password."));
|
|
||||||
} finally {
|
|
||||||
setIsResettingPassword(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="max-w-6xl mx-auto p-6 space-y-6">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold">Authentication Settings</h1>
|
|
||||||
<p className="text-muted-foreground mt-1">
|
|
||||||
Configure OIDC and breakglass admin recovery credentials.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<FleetSettingsNav />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isLoading ? (
|
|
||||||
<Card>
|
|
||||||
<CardContent className="py-8 text-sm text-muted-foreground">
|
|
||||||
Loading authentication settings...
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{!isLoading && isAccessDenied ? (
|
|
||||||
<SettingsAccessDenied message="Authentication settings require system administrator privileges." />
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{!isLoading && !isAccessDenied ? (
|
|
||||||
<>
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>OIDC Provider</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Manage your OpenID Connect issuer and OAuth client credentials.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-5">
|
|
||||||
<div className="rounded-lg border p-4 space-y-2">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<p className="font-medium">Configured</p>
|
|
||||||
<Badge variant={oidcConfig?.configured ? "default" : "secondary"}>
|
|
||||||
{oidcConfig?.configured ? "Yes" : "No"}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Issuer URL: {oidcConfig?.issuerUrl ?? "Not configured"}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Client ID: {oidcConfig?.clientId ?? "Not configured"}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-muted-foreground">Client secret: hidden</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form onSubmit={(event) => void handleSaveOidc(event)} className="space-y-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="oidc-issuer-url">Issuer URL</Label>
|
|
||||||
<Input
|
|
||||||
id="oidc-issuer-url"
|
|
||||||
value={oidcForm.issuerUrl}
|
|
||||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setOidcForm((previous) => ({ ...previous, issuerUrl: event.target.value }));
|
|
||||||
}}
|
|
||||||
placeholder="https://issuer.example.com"
|
|
||||||
disabled={isSavingOidc}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="oidc-client-id">Client ID</Label>
|
|
||||||
<Input
|
|
||||||
id="oidc-client-id"
|
|
||||||
value={oidcForm.clientId}
|
|
||||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setOidcForm((previous) => ({ ...previous, clientId: event.target.value }));
|
|
||||||
}}
|
|
||||||
placeholder="mosaic-web"
|
|
||||||
disabled={isSavingOidc}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="oidc-client-secret">Client Secret</Label>
|
|
||||||
<Input
|
|
||||||
id="oidc-client-secret"
|
|
||||||
type="password"
|
|
||||||
value={oidcForm.clientSecret}
|
|
||||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setOidcForm((previous) => ({
|
|
||||||
...previous,
|
|
||||||
clientSecret: event.target.value,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
placeholder="Enter new secret"
|
|
||||||
autoComplete="new-password"
|
|
||||||
disabled={isSavingOidc}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
The secret is encrypted on save and never returned to the UI.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{oidcError ? (
|
|
||||||
<p className="text-sm text-destructive" role="alert">
|
|
||||||
{oidcError}
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{oidcSuccessMessage ? (
|
|
||||||
<p className="text-sm text-emerald-600">{oidcSuccessMessage}</p>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button type="submit" disabled={isSavingOidc}>
|
|
||||||
{isSavingOidc ? "Saving..." : "Save OIDC"}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="destructive"
|
|
||||||
onClick={() => {
|
|
||||||
setShowRemoveOidcDialog(true);
|
|
||||||
}}
|
|
||||||
disabled={isDeletingOidc || !oidcConfig?.configured}
|
|
||||||
>
|
|
||||||
Remove OIDC
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Breakglass Admin</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Reset breakglass credentials for emergency local access.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-5">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<p className="font-medium">Status</p>
|
|
||||||
<Badge variant={breakglassStatus === "active" ? "default" : "secondary"}>
|
|
||||||
{breakglassStatus}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form
|
|
||||||
onSubmit={(event) => void handleResetBreakglassPassword(event)}
|
|
||||||
className="space-y-4"
|
|
||||||
>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="breakglass-username">Username</Label>
|
|
||||||
<Input
|
|
||||||
id="breakglass-username"
|
|
||||||
value={breakglassForm.username}
|
|
||||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setBreakglassForm((previous) => ({
|
|
||||||
...previous,
|
|
||||||
username: event.target.value,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
placeholder="admin"
|
|
||||||
disabled={isResettingPassword}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="breakglass-current-password">Current Password (optional)</Label>
|
|
||||||
<Input
|
|
||||||
id="breakglass-current-password"
|
|
||||||
type="password"
|
|
||||||
value={breakglassForm.currentPassword}
|
|
||||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setBreakglassForm((previous) => ({
|
|
||||||
...previous,
|
|
||||||
currentPassword: event.target.value,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
placeholder="Optional operator confirmation"
|
|
||||||
autoComplete="current-password"
|
|
||||||
disabled={isResettingPassword}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="breakglass-new-password">New Password</Label>
|
|
||||||
<Input
|
|
||||||
id="breakglass-new-password"
|
|
||||||
type="password"
|
|
||||||
value={breakglassForm.newPassword}
|
|
||||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setBreakglassForm((previous) => ({
|
|
||||||
...previous,
|
|
||||||
newPassword: event.target.value,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
placeholder="At least 8 characters"
|
|
||||||
autoComplete="new-password"
|
|
||||||
disabled={isResettingPassword}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="breakglass-confirm-password">Confirm Password</Label>
|
|
||||||
<Input
|
|
||||||
id="breakglass-confirm-password"
|
|
||||||
type="password"
|
|
||||||
value={breakglassForm.confirmPassword}
|
|
||||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setBreakglassForm((previous) => ({
|
|
||||||
...previous,
|
|
||||||
confirmPassword: event.target.value,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
placeholder="Re-enter password"
|
|
||||||
autoComplete="new-password"
|
|
||||||
disabled={isResettingPassword}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{breakglassError ? (
|
|
||||||
<p className="text-sm text-destructive" role="alert">
|
|
||||||
{breakglassError}
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{breakglassSuccessMessage ? (
|
|
||||||
<p className="text-sm text-emerald-600">{breakglassSuccessMessage}</p>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<Button type="submit" disabled={isResettingPassword}>
|
|
||||||
{isResettingPassword ? "Resetting..." : "Reset Password"}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<AlertDialog
|
|
||||||
open={showRemoveOidcDialog}
|
|
||||||
onOpenChange={(open) => {
|
|
||||||
if (!open && !isDeletingOidc) {
|
|
||||||
setShowRemoveOidcDialog(false);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AlertDialogContent>
|
|
||||||
<AlertDialogHeader>
|
|
||||||
<AlertDialogTitle>Remove OIDC Configuration</AlertDialogTitle>
|
|
||||||
<AlertDialogDescription>
|
|
||||||
This will remove issuer URL, client ID, and client secret from system configuration.
|
|
||||||
</AlertDialogDescription>
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel disabled={isDeletingOidc}>Cancel</AlertDialogCancel>
|
|
||||||
<AlertDialogAction onClick={handleRemoveOidc} disabled={isDeletingOidc}>
|
|
||||||
{isDeletingOidc ? "Removing..." : "Remove OIDC"}
|
|
||||||
</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -200,82 +200,6 @@ const categories: CategoryConfig[] = [
|
|||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "LLM Providers",
|
|
||||||
description:
|
|
||||||
"Add and manage LLM providers, encrypted API keys, base URLs, and model inventories.",
|
|
||||||
href: "/settings/providers",
|
|
||||||
accent: "var(--ms-blue-400)",
|
|
||||||
iconBg: "rgba(47, 128, 255, 0.12)",
|
|
||||||
icon: (
|
|
||||||
<svg
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<rect x="2.5" y="4" width="15" height="12" rx="2" />
|
|
||||||
<path d="M2.5 8h15" />
|
|
||||||
<circle cx="6" cy="12" r="1" />
|
|
||||||
<circle cx="10" cy="12" r="1" />
|
|
||||||
<circle cx="14" cy="12" r="1" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Agent Config",
|
|
||||||
description: "Choose primary and fallback models, plus optional personality/SOUL instructions.",
|
|
||||||
href: "/settings/agent-config",
|
|
||||||
accent: "var(--ms-teal-400)",
|
|
||||||
iconBg: "rgba(20, 184, 166, 0.12)",
|
|
||||||
icon: (
|
|
||||||
<svg
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path d="M4 5h12" />
|
|
||||||
<path d="M4 10h12" />
|
|
||||||
<path d="M4 15h7" />
|
|
||||||
<circle cx="14.5" cy="15" r="1.5" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Authentication",
|
|
||||||
description: "Manage OIDC provider settings and breakglass admin password recovery.",
|
|
||||||
href: "/settings/auth",
|
|
||||||
accent: "var(--ms-amber-400)",
|
|
||||||
iconBg: "rgba(245, 158, 11, 0.12)",
|
|
||||||
icon: (
|
|
||||||
<svg
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<rect x="5" y="8" width="10" height="8" rx="1.5" />
|
|
||||||
<path d="M7 8V6a3 3 0 0 1 6 0v2" />
|
|
||||||
<circle cx="10" cy="12" r="1" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "Users",
|
title: "Users",
|
||||||
description: "Invite, manage roles, and deactivate users across your workspaces.",
|
description: "Invite, manage roles, and deactivate users across your workspaces.",
|
||||||
|
|||||||
@@ -1,634 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import {
|
|
||||||
useCallback,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useState,
|
|
||||||
type ChangeEvent,
|
|
||||||
type ReactElement,
|
|
||||||
type SyntheticEvent,
|
|
||||||
} from "react";
|
|
||||||
import { Settings, Trash2 } from "lucide-react";
|
|
||||||
import { FleetSettingsNav } from "@/components/settings/FleetSettingsNav";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
import {
|
|
||||||
AlertDialog,
|
|
||||||
AlertDialogAction,
|
|
||||||
AlertDialogCancel,
|
|
||||||
AlertDialogContent,
|
|
||||||
AlertDialogDescription,
|
|
||||||
AlertDialogFooter,
|
|
||||||
AlertDialogHeader,
|
|
||||||
AlertDialogTitle,
|
|
||||||
} from "@/components/ui/alert-dialog";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/components/ui/dialog";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import { Switch } from "@/components/ui/switch";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import {
|
|
||||||
createFleetProvider,
|
|
||||||
deleteFleetProvider,
|
|
||||||
fetchFleetProviders,
|
|
||||||
updateFleetProvider,
|
|
||||||
type CreateFleetProviderRequest,
|
|
||||||
type FleetProvider,
|
|
||||||
type FleetProviderModel,
|
|
||||||
type UpdateFleetProviderRequest,
|
|
||||||
} from "@/lib/api/fleet-settings";
|
|
||||||
|
|
||||||
interface ProviderTypeOption {
|
|
||||||
value: string;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ProviderFormState {
|
|
||||||
type: string;
|
|
||||||
displayName: string;
|
|
||||||
apiKey: string;
|
|
||||||
baseUrl: string;
|
|
||||||
modelsText: string;
|
|
||||||
isActive: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const PROVIDER_TYPE_OPTIONS: ProviderTypeOption[] = [
|
|
||||||
{ value: "openai", label: "OpenAI Compatible" },
|
|
||||||
{ value: "claude", label: "Claude / Anthropic" },
|
|
||||||
{ value: "ollama", label: "Ollama" },
|
|
||||||
{ value: "zai", label: "Z.ai" },
|
|
||||||
{ value: "custom", label: "Custom" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const INITIAL_FORM: ProviderFormState = {
|
|
||||||
type: "openai",
|
|
||||||
displayName: "",
|
|
||||||
apiKey: "",
|
|
||||||
baseUrl: "",
|
|
||||||
modelsText: "",
|
|
||||||
isActive: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
function buildProviderName(displayName: string, type: string): string {
|
|
||||||
const slug = displayName
|
|
||||||
.trim()
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/[^a-z0-9]+/g, "-")
|
|
||||||
.replace(/^-+/, "")
|
|
||||||
.replace(/-+$/, "");
|
|
||||||
|
|
||||||
const candidate = `${type}-${slug.length > 0 ? slug : "provider"}`;
|
|
||||||
return candidate.slice(0, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getErrorMessage(error: unknown, fallback: string): string {
|
|
||||||
if (error instanceof Error && error.message.trim().length > 0) {
|
|
||||||
return error.message;
|
|
||||||
}
|
|
||||||
|
|
||||||
return fallback;
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeProviderModels(models: unknown): FleetProviderModel[] {
|
|
||||||
if (!Array.isArray(models)) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const normalized: FleetProviderModel[] = [];
|
|
||||||
|
|
||||||
models.forEach((entry) => {
|
|
||||||
if (typeof entry === "string" && entry.trim().length > 0) {
|
|
||||||
normalized.push({ id: entry.trim(), name: entry.trim() });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (entry && typeof entry === "object") {
|
|
||||||
const record = entry as Record<string, unknown>;
|
|
||||||
const id =
|
|
||||||
typeof record.id === "string"
|
|
||||||
? record.id.trim()
|
|
||||||
: typeof record.name === "string"
|
|
||||||
? record.name.trim()
|
|
||||||
: "";
|
|
||||||
|
|
||||||
if (id.length > 0) {
|
|
||||||
const name =
|
|
||||||
typeof record.name === "string" && record.name.trim().length > 0
|
|
||||||
? record.name.trim()
|
|
||||||
: id;
|
|
||||||
normalized.push({ id, name });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const seen = new Set<string>();
|
|
||||||
return normalized.filter((model) => {
|
|
||||||
if (seen.has(model.id)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
seen.add(model.id);
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function modelsToEditorText(models: unknown): string {
|
|
||||||
return normalizeProviderModels(models)
|
|
||||||
.map((model) => model.id)
|
|
||||||
.join("\n");
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseModelsText(value: string): string[] {
|
|
||||||
const seen = new Set<string>();
|
|
||||||
|
|
||||||
return value
|
|
||||||
.split(/\r?\n/g)
|
|
||||||
.map((segment) => segment.trim())
|
|
||||||
.filter((segment) => segment.length > 0)
|
|
||||||
.filter((segment) => {
|
|
||||||
if (seen.has(segment)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
seen.add(segment);
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function maskApiKey(value: string): string {
|
|
||||||
if (value.length === 0) {
|
|
||||||
return "Not set";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (value.length <= 7) {
|
|
||||||
return "*".repeat(Math.max(4, value.length));
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${value.slice(0, 3)}****...${value.slice(-4)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ProvidersSettingsPage(): ReactElement {
|
|
||||||
const [providers, setProviders] = useState<FleetProvider[]>([]);
|
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
|
||||||
const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
|
|
||||||
const [editingProvider, setEditingProvider] = useState<FleetProvider | null>(null);
|
|
||||||
const [form, setForm] = useState<ProviderFormState>(INITIAL_FORM);
|
|
||||||
const [formError, setFormError] = useState<string | null>(null);
|
|
||||||
const [isSaving, setIsSaving] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const [deleteTarget, setDeleteTarget] = useState<FleetProvider | null>(null);
|
|
||||||
const [isDeleting, setIsDeleting] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const loadProviders = useCallback(async (showLoadingState: boolean): Promise<void> => {
|
|
||||||
if (showLoadingState) {
|
|
||||||
setIsLoading(true);
|
|
||||||
} else {
|
|
||||||
setIsRefreshing(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const data = await fetchFleetProviders();
|
|
||||||
setProviders(data);
|
|
||||||
setError(null);
|
|
||||||
} catch (loadError: unknown) {
|
|
||||||
setError(getErrorMessage(loadError, "Failed to load providers."));
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
setIsRefreshing(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
void loadProviders(true);
|
|
||||||
}, [loadProviders]);
|
|
||||||
|
|
||||||
const apiKeyHint = useMemo(() => {
|
|
||||||
const enteredKey = form.apiKey.trim();
|
|
||||||
|
|
||||||
if (enteredKey.length > 0) {
|
|
||||||
return `Masked preview: ${maskApiKey(enteredKey)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (editingProvider) {
|
|
||||||
return "Stored API key remains encrypted and hidden. Enter a new key only when rotating.";
|
|
||||||
}
|
|
||||||
|
|
||||||
return "API keys are never shown decrypted. Only masked previews are displayed while typing.";
|
|
||||||
}, [editingProvider, form.apiKey]);
|
|
||||||
|
|
||||||
function openCreateDialog(): void {
|
|
||||||
setEditingProvider(null);
|
|
||||||
setForm(INITIAL_FORM);
|
|
||||||
setFormError(null);
|
|
||||||
setIsDialogOpen(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
function openEditDialog(provider: FleetProvider): void {
|
|
||||||
setEditingProvider(provider);
|
|
||||||
setForm({
|
|
||||||
type: provider.type,
|
|
||||||
displayName: provider.displayName,
|
|
||||||
apiKey: "",
|
|
||||||
baseUrl: provider.baseUrl ?? "",
|
|
||||||
modelsText: modelsToEditorText(provider.models),
|
|
||||||
isActive: provider.isActive,
|
|
||||||
});
|
|
||||||
setFormError(null);
|
|
||||||
setIsDialogOpen(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDialog(): void {
|
|
||||||
if (isSaving) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsDialogOpen(false);
|
|
||||||
setEditingProvider(null);
|
|
||||||
setForm(INITIAL_FORM);
|
|
||||||
setFormError(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSubmit(event: SyntheticEvent): Promise<void> {
|
|
||||||
event.preventDefault();
|
|
||||||
setFormError(null);
|
|
||||||
setSuccessMessage(null);
|
|
||||||
|
|
||||||
const displayName = form.displayName.trim();
|
|
||||||
if (displayName.length === 0) {
|
|
||||||
setFormError("Display name is required.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const models = parseModelsText(form.modelsText);
|
|
||||||
const providerModels = models.map((id) => ({ id, name: id }));
|
|
||||||
const baseUrl = form.baseUrl.trim();
|
|
||||||
const apiKey = form.apiKey.trim();
|
|
||||||
|
|
||||||
try {
|
|
||||||
setIsSaving(true);
|
|
||||||
|
|
||||||
if (editingProvider) {
|
|
||||||
const updatePayload: UpdateFleetProviderRequest = {
|
|
||||||
displayName,
|
|
||||||
isActive: form.isActive,
|
|
||||||
models: providerModels,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (baseUrl.length > 0) {
|
|
||||||
updatePayload.baseUrl = baseUrl;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (apiKey.length > 0) {
|
|
||||||
updatePayload.apiKey = apiKey;
|
|
||||||
}
|
|
||||||
|
|
||||||
await updateFleetProvider(editingProvider.id, updatePayload);
|
|
||||||
setSuccessMessage(`Updated provider "${displayName}".`);
|
|
||||||
} else {
|
|
||||||
const createPayload: CreateFleetProviderRequest = {
|
|
||||||
name: buildProviderName(displayName, form.type),
|
|
||||||
displayName,
|
|
||||||
type: form.type,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (baseUrl.length > 0) {
|
|
||||||
createPayload.baseUrl = baseUrl;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (apiKey.length > 0) {
|
|
||||||
createPayload.apiKey = apiKey;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (providerModels.length > 0) {
|
|
||||||
createPayload.models = providerModels;
|
|
||||||
}
|
|
||||||
|
|
||||||
await createFleetProvider(createPayload);
|
|
||||||
setSuccessMessage(`Added provider "${displayName}".`);
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsDialogOpen(false);
|
|
||||||
setEditingProvider(null);
|
|
||||||
setForm(INITIAL_FORM);
|
|
||||||
await loadProviders(false);
|
|
||||||
} catch (saveError: unknown) {
|
|
||||||
setFormError(getErrorMessage(saveError, "Unable to save provider."));
|
|
||||||
} finally {
|
|
||||||
setIsSaving(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleDeleteProvider(): Promise<void> {
|
|
||||||
if (!deleteTarget) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
setIsDeleting(true);
|
|
||||||
await deleteFleetProvider(deleteTarget.id);
|
|
||||||
setSuccessMessage(`Deleted provider "${deleteTarget.displayName}".`);
|
|
||||||
setDeleteTarget(null);
|
|
||||||
await loadProviders(false);
|
|
||||||
} catch (deleteError: unknown) {
|
|
||||||
setError(getErrorMessage(deleteError, "Failed to delete provider."));
|
|
||||||
} finally {
|
|
||||||
setIsDeleting(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="max-w-6xl mx-auto p-6 space-y-6">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold">LLM Providers</h1>
|
|
||||||
<p className="text-muted-foreground mt-1">
|
|
||||||
Manage provider endpoints, model inventories, and encrypted API credentials.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<FleetSettingsNav />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
||||||
<div>
|
|
||||||
<CardTitle>Provider Directory</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
API keys are always encrypted in storage and never displayed in plaintext.
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
void loadProviders(false);
|
|
||||||
}}
|
|
||||||
disabled={isLoading || isRefreshing}
|
|
||||||
>
|
|
||||||
{isRefreshing ? "Refreshing..." : "Refresh"}
|
|
||||||
</Button>
|
|
||||||
<Button onClick={openCreateDialog}>Add Provider</Button>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-3">
|
|
||||||
{error ? (
|
|
||||||
<p className="text-sm text-destructive" role="alert">
|
|
||||||
{error}
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{successMessage ? <p className="text-sm text-emerald-600">{successMessage}</p> : null}
|
|
||||||
|
|
||||||
{isLoading ? (
|
|
||||||
<p className="text-sm text-muted-foreground">Loading providers...</p>
|
|
||||||
) : providers.length === 0 ? (
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
No providers configured yet. Add one to make models available for agent assignment.
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
providers.map((provider) => {
|
|
||||||
const providerModels = normalizeProviderModels(provider.models);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={provider.id}
|
|
||||||
className="rounded-lg border p-4 flex flex-col gap-4 md:flex-row md:items-start md:justify-between"
|
|
||||||
>
|
|
||||||
<div className="space-y-2 min-w-0">
|
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
|
||||||
<p className="font-semibold truncate">{provider.displayName}</p>
|
|
||||||
<Badge variant={provider.isActive ? "default" : "secondary"}>
|
|
||||||
{provider.isActive ? "Active" : "Inactive"}
|
|
||||||
</Badge>
|
|
||||||
<Badge variant="outline">{provider.type}</Badge>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-muted-foreground">Name: {provider.name}</p>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Base URL: {provider.baseUrl ?? "Provider default"}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
API Key: encrypted and hidden (never returned decrypted)
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{providerModels.length === 0 ? (
|
|
||||||
<Badge variant="secondary">No models configured</Badge>
|
|
||||||
) : (
|
|
||||||
providerModels.map((model) => (
|
|
||||||
<Badge key={`${provider.id}-${model.id}`} variant="outline">
|
|
||||||
{model.id}
|
|
||||||
</Badge>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
openEditDialog(provider);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Settings className="h-4 w-4 mr-2" />
|
|
||||||
Edit
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="destructive"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setDeleteTarget(provider);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4 mr-2" />
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Dialog
|
|
||||||
open={isDialogOpen}
|
|
||||||
onOpenChange={(nextOpen) => {
|
|
||||||
if (!nextOpen) {
|
|
||||||
closeDialog();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsDialogOpen(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>{editingProvider ? "Edit Provider" : "Add Provider"}</DialogTitle>
|
|
||||||
<DialogDescription>
|
|
||||||
Configure connection details and model IDs. API keys are masked in the UI.
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<form onSubmit={(event) => void handleSubmit(event)} className="space-y-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="provider-type">Type</Label>
|
|
||||||
<Select
|
|
||||||
value={form.type}
|
|
||||||
onValueChange={(value) => {
|
|
||||||
setForm((previous) => ({ ...previous, type: value }));
|
|
||||||
}}
|
|
||||||
disabled={Boolean(editingProvider)}
|
|
||||||
>
|
|
||||||
<SelectTrigger id="provider-type">
|
|
||||||
<SelectValue placeholder="Select provider type" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{PROVIDER_TYPE_OPTIONS.map((option) => (
|
|
||||||
<SelectItem key={option.value} value={option.value}>
|
|
||||||
{option.label}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="provider-display-name">Display Name</Label>
|
|
||||||
<Input
|
|
||||||
id="provider-display-name"
|
|
||||||
value={form.displayName}
|
|
||||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setForm((previous) => ({ ...previous, displayName: event.target.value }));
|
|
||||||
}}
|
|
||||||
placeholder="OpenAI Primary"
|
|
||||||
maxLength={255}
|
|
||||||
disabled={isSaving}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="provider-api-key">API Key</Label>
|
|
||||||
<Input
|
|
||||||
id="provider-api-key"
|
|
||||||
type="password"
|
|
||||||
value={form.apiKey}
|
|
||||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setForm((previous) => ({ ...previous, apiKey: event.target.value }));
|
|
||||||
}}
|
|
||||||
placeholder={editingProvider ? "Enter new key to rotate" : "sk-..."}
|
|
||||||
autoComplete="new-password"
|
|
||||||
disabled={isSaving}
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-muted-foreground">{apiKeyHint}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="provider-base-url">Base URL</Label>
|
|
||||||
<Input
|
|
||||||
id="provider-base-url"
|
|
||||||
value={form.baseUrl}
|
|
||||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setForm((previous) => ({ ...previous, baseUrl: event.target.value }));
|
|
||||||
}}
|
|
||||||
placeholder="https://api.provider.com/v1"
|
|
||||||
disabled={isSaving}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="provider-models">Models</Label>
|
|
||||||
<Textarea
|
|
||||||
id="provider-models"
|
|
||||||
value={form.modelsText}
|
|
||||||
onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
|
|
||||||
setForm((previous) => ({ ...previous, modelsText: event.target.value }));
|
|
||||||
}}
|
|
||||||
placeholder={"One model ID per line\nExample: gpt-4.1-mini"}
|
|
||||||
rows={5}
|
|
||||||
disabled={isSaving}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{editingProvider ? (
|
|
||||||
<div className="flex items-center justify-between rounded-md border px-3 py-2">
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="provider-active">Provider Status</Label>
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
Disable to keep configuration without using this provider.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Switch
|
|
||||||
id="provider-active"
|
|
||||||
checked={form.isActive}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
setForm((previous) => ({ ...previous, isActive: checked }));
|
|
||||||
}}
|
|
||||||
disabled={isSaving}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{formError ? (
|
|
||||||
<p className="text-sm text-destructive" role="alert">
|
|
||||||
{formError}
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<DialogFooter>
|
|
||||||
<Button type="button" variant="outline" onClick={closeDialog} disabled={isSaving}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button type="submit" disabled={isSaving}>
|
|
||||||
{isSaving ? "Saving..." : editingProvider ? "Save Changes" : "Create Provider"}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</form>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
<AlertDialog
|
|
||||||
open={deleteTarget !== null}
|
|
||||||
onOpenChange={(open) => {
|
|
||||||
if (!open && !isDeleting) {
|
|
||||||
setDeleteTarget(null);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AlertDialogContent>
|
|
||||||
<AlertDialogHeader>
|
|
||||||
<AlertDialogTitle>Delete Provider</AlertDialogTitle>
|
|
||||||
<AlertDialogDescription>
|
|
||||||
Delete provider "{deleteTarget?.displayName}"? This removes its configuration and
|
|
||||||
model mappings.
|
|
||||||
</AlertDialogDescription>
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
|
|
||||||
<AlertDialogAction onClick={handleDeleteProvider} disabled={isDeleting}>
|
|
||||||
{isDeleting ? "Deleting..." : "Delete Provider"}
|
|
||||||
</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import type { ReactNode } from "react";
|
|
||||||
|
|
||||||
export default function OnboardingLayout({ children }: { children: ReactNode }): React.JSX.Element {
|
|
||||||
return (
|
|
||||||
<main className="flex min-h-screen items-center justify-center bg-gradient-to-b from-slate-50 to-white p-4 sm:p-6">
|
|
||||||
<div className="w-full max-w-3xl">{children}</div>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
import { redirect } from "next/navigation";
|
|
||||||
import { OnboardingWizard } from "@/components/onboarding/OnboardingWizard";
|
|
||||||
import { API_BASE_URL } from "@/lib/config";
|
|
||||||
|
|
||||||
export const dynamic = "force-dynamic";
|
|
||||||
|
|
||||||
interface OnboardingStatusResponse {
|
|
||||||
completed: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getOnboardingStatus(): Promise<OnboardingStatusResponse> {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE_URL}/api/onboarding/status`, {
|
|
||||||
method: "GET",
|
|
||||||
cache: "no-store",
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
return { completed: false };
|
|
||||||
}
|
|
||||||
|
|
||||||
return (await response.json()) as OnboardingStatusResponse;
|
|
||||||
} catch {
|
|
||||||
return { completed: false };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default async function OnboardingPage(): Promise<React.JSX.Element> {
|
|
||||||
const status = await getOnboardingStatus();
|
|
||||||
|
|
||||||
if (status.completed) {
|
|
||||||
redirect("/");
|
|
||||||
}
|
|
||||||
|
|
||||||
return <OnboardingWizard />;
|
|
||||||
}
|
|
||||||
@@ -5,7 +5,6 @@ import Link from "next/link";
|
|||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import { useAuth } from "@/lib/auth/auth-context";
|
import { useAuth } from "@/lib/auth/auth-context";
|
||||||
import { ThemeToggle } from "./ThemeToggle";
|
import { ThemeToggle } from "./ThemeToggle";
|
||||||
import { UsageWidget } from "@/components/ui/UsageWidget";
|
|
||||||
import { useSidebar } from "./SidebarContext";
|
import { useSidebar } from "./SidebarContext";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -351,9 +350,6 @@ export function AppHeader(): React.JSX.Element {
|
|||||||
{/* Theme Toggle */}
|
{/* Theme Toggle */}
|
||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
|
|
||||||
{/* Usage Widget */}
|
|
||||||
<UsageWidget />
|
|
||||||
|
|
||||||
{/* User Avatar + Dropdown */}
|
{/* User Avatar + Dropdown */}
|
||||||
<div ref={dropdownRef} style={{ position: "relative", flexShrink: 0 }}>
|
<div ref={dropdownRef} style={{ position: "relative", flexShrink: 0 }}>
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -1,106 +0,0 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
||||||
import { render, screen, waitFor } from "@testing-library/react";
|
|
||||||
import userEvent from "@testing-library/user-event";
|
|
||||||
import { OnboardingWizard } from "./OnboardingWizard";
|
|
||||||
|
|
||||||
const mockPush = vi.fn();
|
|
||||||
const mockGetStatus = vi.fn();
|
|
||||||
const mockCreateBreakglass = vi.fn();
|
|
||||||
const mockConfigureOidc = vi.fn();
|
|
||||||
const mockTestProvider = vi.fn();
|
|
||||||
const mockAddProvider = vi.fn();
|
|
||||||
const mockCompleteOnboarding = vi.fn();
|
|
||||||
|
|
||||||
vi.mock("next/navigation", () => ({
|
|
||||||
useRouter: (): { push: typeof mockPush } => ({
|
|
||||||
push: mockPush,
|
|
||||||
}),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("@/lib/api/onboarding", () => ({
|
|
||||||
fetchOnboardingStatus: (): ReturnType<typeof mockGetStatus> => mockGetStatus(),
|
|
||||||
createBreakglassAdmin: (...args: unknown[]): ReturnType<typeof mockCreateBreakglass> =>
|
|
||||||
mockCreateBreakglass(...args),
|
|
||||||
configureOidcProvider: (...args: unknown[]): ReturnType<typeof mockConfigureOidc> =>
|
|
||||||
mockConfigureOidc(...args),
|
|
||||||
testOnboardingProvider: (...args: unknown[]): ReturnType<typeof mockTestProvider> =>
|
|
||||||
mockTestProvider(...args),
|
|
||||||
addOnboardingProvider: (...args: unknown[]): ReturnType<typeof mockAddProvider> =>
|
|
||||||
mockAddProvider(...args),
|
|
||||||
completeOnboarding: (): ReturnType<typeof mockCompleteOnboarding> => mockCompleteOnboarding(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe("OnboardingWizard", () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
mockPush.mockReset();
|
|
||||||
mockGetStatus.mockReset();
|
|
||||||
mockCreateBreakglass.mockReset();
|
|
||||||
mockConfigureOidc.mockReset();
|
|
||||||
mockTestProvider.mockReset();
|
|
||||||
mockAddProvider.mockReset();
|
|
||||||
mockCompleteOnboarding.mockReset();
|
|
||||||
|
|
||||||
mockGetStatus.mockResolvedValue({ completed: false });
|
|
||||||
mockCreateBreakglass.mockResolvedValue({ id: "bg-1", username: "admin" });
|
|
||||||
mockConfigureOidc.mockResolvedValue(undefined);
|
|
||||||
mockTestProvider.mockResolvedValue({ success: true });
|
|
||||||
mockAddProvider.mockResolvedValue({ id: "provider-1" });
|
|
||||||
mockCompleteOnboarding.mockResolvedValue(undefined);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders the first step with admin setup fields", async () => {
|
|
||||||
render(<OnboardingWizard />);
|
|
||||||
|
|
||||||
expect(
|
|
||||||
await screen.findByText("Welcome to Mosaic Stack. Let's get you set up.")
|
|
||||||
).toBeInTheDocument();
|
|
||||||
expect(screen.getByLabelText("Username")).toBeInTheDocument();
|
|
||||||
expect(screen.getByLabelText("Password")).toBeInTheDocument();
|
|
||||||
expect(screen.getByLabelText("Confirm Password")).toBeInTheDocument();
|
|
||||||
expect(screen.getByText("1. Admin")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("validates admin form fields before submit", async () => {
|
|
||||||
const user = userEvent.setup();
|
|
||||||
render(<OnboardingWizard />);
|
|
||||||
|
|
||||||
await screen.findByText("Welcome to Mosaic Stack. Let's get you set up.");
|
|
||||||
await user.click(screen.getByRole("button", { name: "Create Admin" }));
|
|
||||||
|
|
||||||
expect(screen.getByText("Username must be at least 3 characters.")).toBeInTheDocument();
|
|
||||||
expect(mockCreateBreakglass).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("supports happy path with OIDC skipped", async () => {
|
|
||||||
const user = userEvent.setup();
|
|
||||||
render(<OnboardingWizard />);
|
|
||||||
|
|
||||||
await screen.findByText("Welcome to Mosaic Stack. Let's get you set up.");
|
|
||||||
|
|
||||||
await user.type(screen.getByLabelText("Username"), "admin");
|
|
||||||
await user.type(screen.getByLabelText("Password"), "verysecurepassword");
|
|
||||||
await user.type(screen.getByLabelText("Confirm Password"), "verysecurepassword");
|
|
||||||
await user.click(screen.getByRole("button", { name: "Create Admin" }));
|
|
||||||
|
|
||||||
await screen.findByText("Configure OIDC Provider (Optional)");
|
|
||||||
await user.click(screen.getByRole("button", { name: "Skip" }));
|
|
||||||
|
|
||||||
await screen.findByText("Add Your First LLM Provider");
|
|
||||||
await user.type(screen.getByLabelText("Display Name"), "My OpenAI");
|
|
||||||
await user.type(screen.getByLabelText("API Key"), "sk-test-key");
|
|
||||||
|
|
||||||
await user.click(screen.getByRole("button", { name: "Test Connection" }));
|
|
||||||
await screen.findByText("Connection successful.");
|
|
||||||
|
|
||||||
const addProviderButton = screen.getByRole("button", { name: "Add Provider" });
|
|
||||||
expect(addProviderButton).toBeEnabled();
|
|
||||||
await user.click(addProviderButton);
|
|
||||||
|
|
||||||
await screen.findByText("You're all set");
|
|
||||||
await user.click(screen.getByRole("button", { name: "Launch Mosaic Stack" }));
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(mockPush).toHaveBeenCalledWith("/");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,791 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useEffect, useMemo, useState } from "react";
|
|
||||||
import { Check, Loader2 } from "lucide-react";
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import {
|
|
||||||
addOnboardingProvider,
|
|
||||||
completeOnboarding,
|
|
||||||
configureOidcProvider,
|
|
||||||
createBreakglassAdmin,
|
|
||||||
fetchOnboardingStatus,
|
|
||||||
testOnboardingProvider,
|
|
||||||
} from "@/lib/api/onboarding";
|
|
||||||
|
|
||||||
type WizardStep = 1 | 2 | 3 | 4;
|
|
||||||
type ProviderType = "openai" | "anthropic" | "zai" | "ollama" | "custom";
|
|
||||||
|
|
||||||
interface StepDefinition {
|
|
||||||
id: WizardStep;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ProviderOption {
|
|
||||||
value: ProviderType;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const STEPS: StepDefinition[] = [
|
|
||||||
{ id: 1, label: "1. Admin" },
|
|
||||||
{ id: 2, label: "2. Auth" },
|
|
||||||
{ id: 3, label: "3. Provider" },
|
|
||||||
{ id: 4, label: "4. Launch" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const PROVIDER_OPTIONS: ProviderOption[] = [
|
|
||||||
{ value: "openai", label: "OpenAI" },
|
|
||||||
{ value: "anthropic", label: "Anthropic" },
|
|
||||||
{ value: "zai", label: "Z.ai" },
|
|
||||||
{ value: "ollama", label: "Ollama" },
|
|
||||||
{ value: "custom", label: "Custom" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const CLOUD_PROVIDER_TYPES = new Set<ProviderType>(["openai", "anthropic", "zai"]);
|
|
||||||
const BASE_URL_PROVIDER_TYPES = new Set<ProviderType>(["ollama", "custom"]);
|
|
||||||
|
|
||||||
function getErrorMessage(error: unknown, fallback: string): string {
|
|
||||||
if (error instanceof Error && error.message.trim().length > 0) {
|
|
||||||
return error.message;
|
|
||||||
}
|
|
||||||
|
|
||||||
return fallback;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isValidHttpUrl(value: string): boolean {
|
|
||||||
try {
|
|
||||||
const parsed = new URL(value);
|
|
||||||
return parsed.protocol === "http:" || parsed.protocol === "https:";
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapProviderTypeToApi(type: ProviderType): string {
|
|
||||||
switch (type) {
|
|
||||||
case "anthropic":
|
|
||||||
return "claude";
|
|
||||||
case "zai":
|
|
||||||
return "openai";
|
|
||||||
case "custom":
|
|
||||||
return "openai";
|
|
||||||
default:
|
|
||||||
return type;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getProviderDefaultBaseUrl(type: ProviderType): string | undefined {
|
|
||||||
switch (type) {
|
|
||||||
case "ollama":
|
|
||||||
return "http://localhost:11434";
|
|
||||||
case "anthropic":
|
|
||||||
return "https://api.anthropic.com/v1";
|
|
||||||
case "zai":
|
|
||||||
return "https://api.z.ai/v1";
|
|
||||||
default:
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildProviderName(displayName: string, type: ProviderType): string {
|
|
||||||
const slug = displayName
|
|
||||||
.trim()
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/[^a-z0-9]+/g, "-")
|
|
||||||
.replace(/^-+/, "")
|
|
||||||
.replace(/-+$/, "");
|
|
||||||
|
|
||||||
if (slug.length > 0) {
|
|
||||||
return slug;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${type}-provider`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function constantTimeEquals(left: string, right: string): boolean {
|
|
||||||
if (left.length !== right.length) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
let mismatch = 0;
|
|
||||||
for (let index = 0; index < left.length; index += 1) {
|
|
||||||
mismatch |= left.charCodeAt(index) ^ right.charCodeAt(index);
|
|
||||||
}
|
|
||||||
|
|
||||||
return mismatch === 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function OnboardingWizard(): React.JSX.Element {
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const [currentStep, setCurrentStep] = useState<WizardStep>(1);
|
|
||||||
const [isCheckingStatus, setIsCheckingStatus] = useState(true);
|
|
||||||
|
|
||||||
const [username, setUsername] = useState("");
|
|
||||||
const [password, setPassword] = useState("");
|
|
||||||
const [confirmPassword, setConfirmPassword] = useState("");
|
|
||||||
const [isCreatingAdmin, setIsCreatingAdmin] = useState(false);
|
|
||||||
const [configuredUsername, setConfiguredUsername] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const [issuerUrl, setIssuerUrl] = useState("");
|
|
||||||
const [clientId, setClientId] = useState("");
|
|
||||||
const [clientSecret, setClientSecret] = useState("");
|
|
||||||
const [isConfiguringOidc, setIsConfiguringOidc] = useState(false);
|
|
||||||
const [oidcConfigured, setOidcConfigured] = useState(false);
|
|
||||||
|
|
||||||
const [providerType, setProviderType] = useState<ProviderType>("openai");
|
|
||||||
const [displayName, setDisplayName] = useState("");
|
|
||||||
const [providerApiKey, setProviderApiKey] = useState("");
|
|
||||||
const [providerBaseUrl, setProviderBaseUrl] = useState("");
|
|
||||||
const [isTestingProvider, setIsTestingProvider] = useState(false);
|
|
||||||
const [isAddingProvider, setIsAddingProvider] = useState(false);
|
|
||||||
const [providerConfigured, setProviderConfigured] = useState<{
|
|
||||||
displayName: string;
|
|
||||||
type: ProviderType;
|
|
||||||
} | null>(null);
|
|
||||||
const [providerTestMessage, setProviderTestMessage] = useState<string | null>(null);
|
|
||||||
const [providerTestSucceeded, setProviderTestSucceeded] = useState(false);
|
|
||||||
const [testedProviderSignature, setTestedProviderSignature] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const [isCompleting, setIsCompleting] = useState(false);
|
|
||||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const requiresApiKey = CLOUD_PROVIDER_TYPES.has(providerType);
|
|
||||||
const requiresBaseUrl = BASE_URL_PROVIDER_TYPES.has(providerType);
|
|
||||||
const apiProviderType = mapProviderTypeToApi(providerType);
|
|
||||||
const resolvedProviderBaseUrl =
|
|
||||||
requiresBaseUrl && providerBaseUrl.trim().length > 0
|
|
||||||
? providerBaseUrl.trim()
|
|
||||||
: getProviderDefaultBaseUrl(providerType);
|
|
||||||
|
|
||||||
const providerTestPayload = useMemo(() => {
|
|
||||||
const payload: { type: string; baseUrl?: string; apiKey?: string } = {
|
|
||||||
type: apiProviderType,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (resolvedProviderBaseUrl !== undefined && resolvedProviderBaseUrl.length > 0) {
|
|
||||||
payload.baseUrl = resolvedProviderBaseUrl;
|
|
||||||
}
|
|
||||||
|
|
||||||
const trimmedApiKey = providerApiKey.trim();
|
|
||||||
if (requiresApiKey && trimmedApiKey.length > 0) {
|
|
||||||
payload.apiKey = trimmedApiKey;
|
|
||||||
}
|
|
||||||
|
|
||||||
return payload;
|
|
||||||
}, [apiProviderType, providerApiKey, requiresApiKey, resolvedProviderBaseUrl]);
|
|
||||||
|
|
||||||
const providerPayloadSignature = useMemo(
|
|
||||||
() => JSON.stringify(providerTestPayload),
|
|
||||||
[providerTestPayload]
|
|
||||||
);
|
|
||||||
|
|
||||||
const canAddProvider =
|
|
||||||
providerTestSucceeded &&
|
|
||||||
testedProviderSignature === providerPayloadSignature &&
|
|
||||||
!isTestingProvider &&
|
|
||||||
!isAddingProvider;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cancelled = false;
|
|
||||||
|
|
||||||
async function loadStatus(): Promise<void> {
|
|
||||||
try {
|
|
||||||
const status = await fetchOnboardingStatus();
|
|
||||||
if (!cancelled && status.completed) {
|
|
||||||
router.push("/");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// Status check failure should not block setup UI.
|
|
||||||
} finally {
|
|
||||||
if (!cancelled) {
|
|
||||||
setIsCheckingStatus(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
void loadStatus();
|
|
||||||
|
|
||||||
return (): void => {
|
|
||||||
cancelled = true;
|
|
||||||
};
|
|
||||||
}, [router]);
|
|
||||||
|
|
||||||
const resetProviderVerification = (): void => {
|
|
||||||
setProviderTestSucceeded(false);
|
|
||||||
setTestedProviderSignature(null);
|
|
||||||
setProviderTestMessage(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateAdminStep = (): boolean => {
|
|
||||||
if (username.trim().length < 3) {
|
|
||||||
setErrorMessage("Username must be at least 3 characters.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (password.length < 8) {
|
|
||||||
setErrorMessage("Password must be at least 8 characters.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!constantTimeEquals(password, confirmPassword)) {
|
|
||||||
setErrorMessage("Passwords do not match.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateOidcStep = (): boolean => {
|
|
||||||
if (issuerUrl.trim().length === 0 || !isValidHttpUrl(issuerUrl.trim())) {
|
|
||||||
setErrorMessage("Issuer URL must be a valid URL.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (clientId.trim().length === 0) {
|
|
||||||
setErrorMessage("Client ID is required.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (clientSecret.trim().length === 0) {
|
|
||||||
setErrorMessage("Client secret is required.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateProviderStep = (): boolean => {
|
|
||||||
if (displayName.trim().length === 0) {
|
|
||||||
setErrorMessage("Display name is required.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (requiresApiKey && providerApiKey.trim().length === 0) {
|
|
||||||
setErrorMessage("API key is required for this provider.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (requiresBaseUrl && providerBaseUrl.trim().length === 0) {
|
|
||||||
setErrorMessage("Base URL is required for this provider.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (requiresBaseUrl && !isValidHttpUrl(providerBaseUrl.trim())) {
|
|
||||||
setErrorMessage("Base URL must be a valid URL.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreateAdmin = async (event: React.SyntheticEvent<HTMLFormElement>): Promise<void> => {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
setErrorMessage(null);
|
|
||||||
if (!validateAdminStep()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsCreatingAdmin(true);
|
|
||||||
try {
|
|
||||||
const result = await createBreakglassAdmin({
|
|
||||||
username: username.trim(),
|
|
||||||
password,
|
|
||||||
});
|
|
||||||
setConfiguredUsername(result.username);
|
|
||||||
setCurrentStep(2);
|
|
||||||
} catch (error) {
|
|
||||||
setErrorMessage(getErrorMessage(error, "Failed to create admin account."));
|
|
||||||
} finally {
|
|
||||||
setIsCreatingAdmin(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleConfigureOidc = async (
|
|
||||||
event: React.SyntheticEvent<HTMLFormElement>
|
|
||||||
): Promise<void> => {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
setErrorMessage(null);
|
|
||||||
if (!validateOidcStep()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsConfiguringOidc(true);
|
|
||||||
try {
|
|
||||||
await configureOidcProvider({
|
|
||||||
issuerUrl: issuerUrl.trim(),
|
|
||||||
clientId: clientId.trim(),
|
|
||||||
clientSecret: clientSecret.trim(),
|
|
||||||
});
|
|
||||||
setOidcConfigured(true);
|
|
||||||
setCurrentStep(3);
|
|
||||||
} catch (error) {
|
|
||||||
setErrorMessage(getErrorMessage(error, "Failed to configure OIDC provider."));
|
|
||||||
} finally {
|
|
||||||
setIsConfiguringOidc(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSkipOidc = (): void => {
|
|
||||||
setErrorMessage(null);
|
|
||||||
setOidcConfigured(false);
|
|
||||||
setCurrentStep(3);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTestProvider = async (): Promise<void> => {
|
|
||||||
setErrorMessage(null);
|
|
||||||
setProviderTestMessage(null);
|
|
||||||
if (!validateProviderStep()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsTestingProvider(true);
|
|
||||||
try {
|
|
||||||
const response = await testOnboardingProvider(providerTestPayload);
|
|
||||||
if (!response.success) {
|
|
||||||
setProviderTestSucceeded(false);
|
|
||||||
setTestedProviderSignature(null);
|
|
||||||
setErrorMessage(response.error ?? "Connection test failed.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setProviderTestSucceeded(true);
|
|
||||||
setTestedProviderSignature(providerPayloadSignature);
|
|
||||||
setProviderTestMessage("Connection successful.");
|
|
||||||
} catch (error) {
|
|
||||||
setProviderTestSucceeded(false);
|
|
||||||
setTestedProviderSignature(null);
|
|
||||||
setErrorMessage(getErrorMessage(error, "Connection test failed."));
|
|
||||||
} finally {
|
|
||||||
setIsTestingProvider(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAddProvider = async (): Promise<void> => {
|
|
||||||
setErrorMessage(null);
|
|
||||||
if (!validateProviderStep()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!canAddProvider) {
|
|
||||||
setErrorMessage("Test connection successfully before adding the provider.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsAddingProvider(true);
|
|
||||||
try {
|
|
||||||
const trimmedDisplayName = displayName.trim();
|
|
||||||
const payload: {
|
|
||||||
name: string;
|
|
||||||
displayName: string;
|
|
||||||
type: string;
|
|
||||||
baseUrl?: string;
|
|
||||||
apiKey?: string;
|
|
||||||
} = {
|
|
||||||
name: buildProviderName(trimmedDisplayName, providerType),
|
|
||||||
displayName: trimmedDisplayName,
|
|
||||||
type: apiProviderType,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (resolvedProviderBaseUrl !== undefined && resolvedProviderBaseUrl.length > 0) {
|
|
||||||
payload.baseUrl = resolvedProviderBaseUrl;
|
|
||||||
}
|
|
||||||
|
|
||||||
const trimmedApiKey = providerApiKey.trim();
|
|
||||||
if (requiresApiKey && trimmedApiKey.length > 0) {
|
|
||||||
payload.apiKey = trimmedApiKey;
|
|
||||||
}
|
|
||||||
|
|
||||||
await addOnboardingProvider(payload);
|
|
||||||
|
|
||||||
setProviderConfigured({ displayName: trimmedDisplayName, type: providerType });
|
|
||||||
setCurrentStep(4);
|
|
||||||
} catch (error) {
|
|
||||||
setErrorMessage(getErrorMessage(error, "Failed to add provider."));
|
|
||||||
} finally {
|
|
||||||
setIsAddingProvider(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCompleteOnboarding = async (): Promise<void> => {
|
|
||||||
setErrorMessage(null);
|
|
||||||
setIsCompleting(true);
|
|
||||||
try {
|
|
||||||
await completeOnboarding();
|
|
||||||
router.push("/");
|
|
||||||
} catch (error) {
|
|
||||||
setErrorMessage(getErrorMessage(error, "Failed to complete onboarding."));
|
|
||||||
} finally {
|
|
||||||
setIsCompleting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const providerLabel =
|
|
||||||
PROVIDER_OPTIONS.find((option) => option.value === providerConfigured?.type)?.label ??
|
|
||||||
providerConfigured?.type ??
|
|
||||||
"Unknown";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="mx-auto w-full max-w-2xl shadow-sm">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>First-boot onboarding</CardTitle>
|
|
||||||
<CardDescription>Set up your admin access, auth, and first provider.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-6">
|
|
||||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
|
||||||
{STEPS.map((step) => {
|
|
||||||
const isActive = currentStep === step.id;
|
|
||||||
const isComplete = currentStep > step.id;
|
|
||||||
const badgeClass = isComplete
|
|
||||||
? "bg-emerald-100 text-emerald-700 border-emerald-200"
|
|
||||||
: isActive
|
|
||||||
? "bg-blue-100 text-blue-700 border-blue-200"
|
|
||||||
: "bg-gray-100 text-gray-500 border-gray-200";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={step.id}
|
|
||||||
className={`rounded-md border px-3 py-2 text-sm ${badgeClass}`}
|
|
||||||
aria-current={isActive ? "step" : undefined}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2 font-medium">
|
|
||||||
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-current text-xs">
|
|
||||||
{isComplete ? <Check className="h-3.5 w-3.5" aria-hidden="true" /> : step.id}
|
|
||||||
</span>
|
|
||||||
<span>{step.label}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isCheckingStatus ? (
|
|
||||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
||||||
<Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
|
|
||||||
<span>Checking onboarding status...</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{currentStep === 1 && (
|
|
||||||
<form onSubmit={handleCreateAdmin} className="space-y-4" noValidate>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<h2 className="text-xl font-semibold">
|
|
||||||
Welcome to Mosaic Stack. Let's get you set up.
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
Create a breakglass admin account for emergency access.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="onboarding-username">Username</Label>
|
|
||||||
<Input
|
|
||||||
id="onboarding-username"
|
|
||||||
value={username}
|
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setUsername(event.target.value);
|
|
||||||
}}
|
|
||||||
disabled={isCreatingAdmin}
|
|
||||||
autoComplete="username"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="onboarding-password">Password</Label>
|
|
||||||
<Input
|
|
||||||
id="onboarding-password"
|
|
||||||
type="password"
|
|
||||||
value={password}
|
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setPassword(event.target.value);
|
|
||||||
}}
|
|
||||||
disabled={isCreatingAdmin}
|
|
||||||
autoComplete="new-password"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="onboarding-confirm-password">Confirm Password</Label>
|
|
||||||
<Input
|
|
||||||
id="onboarding-confirm-password"
|
|
||||||
type="password"
|
|
||||||
value={confirmPassword}
|
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setConfirmPassword(event.target.value);
|
|
||||||
}}
|
|
||||||
disabled={isCreatingAdmin}
|
|
||||||
autoComplete="new-password"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button type="submit" disabled={isCreatingAdmin}>
|
|
||||||
{isCreatingAdmin && (
|
|
||||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
|
||||||
)}
|
|
||||||
<span>Create Admin</span>
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{currentStep === 2 && (
|
|
||||||
<form onSubmit={handleConfigureOidc} className="space-y-4" noValidate>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<h2 className="text-xl font-semibold">Configure OIDC Provider (Optional)</h2>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
You can skip this for now and continue with breakglass-only authentication.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="onboarding-issuer-url">OIDC Issuer URL</Label>
|
|
||||||
<Input
|
|
||||||
id="onboarding-issuer-url"
|
|
||||||
value={issuerUrl}
|
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setIssuerUrl(event.target.value);
|
|
||||||
}}
|
|
||||||
disabled={isConfiguringOidc}
|
|
||||||
placeholder="https://auth.example.com/application/o/mosaic/"
|
|
||||||
autoComplete="url"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="onboarding-client-id">Client ID</Label>
|
|
||||||
<Input
|
|
||||||
id="onboarding-client-id"
|
|
||||||
value={clientId}
|
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setClientId(event.target.value);
|
|
||||||
}}
|
|
||||||
disabled={isConfiguringOidc}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="onboarding-client-secret">Client Secret</Label>
|
|
||||||
<Input
|
|
||||||
id="onboarding-client-secret"
|
|
||||||
type="password"
|
|
||||||
value={clientSecret}
|
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setClientSecret(event.target.value);
|
|
||||||
}}
|
|
||||||
disabled={isConfiguringOidc}
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button type="submit" disabled={isConfiguringOidc}>
|
|
||||||
{isConfiguringOidc && (
|
|
||||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
|
||||||
)}
|
|
||||||
<span>Configure OIDC</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
onClick={handleSkipOidc}
|
|
||||||
disabled={isConfiguringOidc}
|
|
||||||
>
|
|
||||||
Skip
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{currentStep === 3 && (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<h2 className="text-xl font-semibold">Add Your First LLM Provider</h2>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
Test the connection before adding your provider.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="onboarding-provider-type">Provider Type</Label>
|
|
||||||
<Select
|
|
||||||
value={providerType}
|
|
||||||
onValueChange={(value) => {
|
|
||||||
const nextType = value as ProviderType;
|
|
||||||
setProviderType(nextType);
|
|
||||||
setProviderApiKey("");
|
|
||||||
setProviderBaseUrl(
|
|
||||||
BASE_URL_PROVIDER_TYPES.has(nextType)
|
|
||||||
? (getProviderDefaultBaseUrl(nextType) ?? "")
|
|
||||||
: ""
|
|
||||||
);
|
|
||||||
resetProviderVerification();
|
|
||||||
setErrorMessage(null);
|
|
||||||
}}
|
|
||||||
disabled={isTestingProvider || isAddingProvider}
|
|
||||||
>
|
|
||||||
<SelectTrigger id="onboarding-provider-type">
|
|
||||||
<SelectValue placeholder="Select provider type" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{PROVIDER_OPTIONS.map((option) => (
|
|
||||||
<SelectItem key={option.value} value={option.value}>
|
|
||||||
{option.label}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="onboarding-provider-display-name">Display Name</Label>
|
|
||||||
<Input
|
|
||||||
id="onboarding-provider-display-name"
|
|
||||||
value={displayName}
|
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setDisplayName(event.target.value);
|
|
||||||
resetProviderVerification();
|
|
||||||
setErrorMessage(null);
|
|
||||||
}}
|
|
||||||
disabled={isTestingProvider || isAddingProvider}
|
|
||||||
placeholder="My OpenAI Provider"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{requiresApiKey && (
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="onboarding-provider-api-key">API Key</Label>
|
|
||||||
<Input
|
|
||||||
id="onboarding-provider-api-key"
|
|
||||||
type="password"
|
|
||||||
value={providerApiKey}
|
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setProviderApiKey(event.target.value);
|
|
||||||
resetProviderVerification();
|
|
||||||
setErrorMessage(null);
|
|
||||||
}}
|
|
||||||
disabled={isTestingProvider || isAddingProvider}
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{requiresBaseUrl && (
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="onboarding-provider-base-url">Base URL</Label>
|
|
||||||
<Input
|
|
||||||
id="onboarding-provider-base-url"
|
|
||||||
value={providerBaseUrl}
|
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
setProviderBaseUrl(event.target.value);
|
|
||||||
resetProviderVerification();
|
|
||||||
setErrorMessage(null);
|
|
||||||
}}
|
|
||||||
disabled={isTestingProvider || isAddingProvider}
|
|
||||||
placeholder="http://localhost:11434"
|
|
||||||
autoComplete="url"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{providerTestMessage && (
|
|
||||||
<p className="text-sm text-emerald-700" role="status">
|
|
||||||
{providerTestMessage}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
void handleTestProvider();
|
|
||||||
}}
|
|
||||||
disabled={isTestingProvider || isAddingProvider}
|
|
||||||
>
|
|
||||||
{isTestingProvider && (
|
|
||||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
|
||||||
)}
|
|
||||||
<span>Test Connection</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
void handleAddProvider();
|
|
||||||
}}
|
|
||||||
disabled={!canAddProvider}
|
|
||||||
>
|
|
||||||
{isAddingProvider && (
|
|
||||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
|
||||||
)}
|
|
||||||
<span>Add Provider</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{currentStep === 4 && (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<h2 className="text-xl font-semibold">You're all set</h2>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
Review the setup summary and launch Mosaic Stack.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="rounded-md border bg-gray-50 p-4">
|
|
||||||
<ul className="space-y-2 text-sm">
|
|
||||||
<li>
|
|
||||||
<span className="font-medium">Admin:</span>{" "}
|
|
||||||
{configuredUsername ? `${configuredUsername} configured` : "Not configured"}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span className="font-medium">OIDC:</span>{" "}
|
|
||||||
{oidcConfigured ? "Configured" : "Skipped for now"}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span className="font-medium">LLM Provider:</span>{" "}
|
|
||||||
{providerConfigured
|
|
||||||
? `${providerConfigured.displayName} (${providerLabel})`
|
|
||||||
: "Not configured"}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
onClick={() => void handleCompleteOnboarding()}
|
|
||||||
disabled={isCompleting}
|
|
||||||
>
|
|
||||||
{isCompleting && (
|
|
||||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
|
||||||
)}
|
|
||||||
<span>Launch Mosaic Stack</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{errorMessage && (
|
|
||||||
<p className="text-sm text-red-600" role="alert">
|
|
||||||
{errorMessage}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default OnboardingWizard;
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import Link from "next/link";
|
|
||||||
import { usePathname } from "next/navigation";
|
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
|
||||||
|
|
||||||
interface FleetSettingsLink {
|
|
||||||
href: string;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const FLEET_SETTINGS_LINKS: FleetSettingsLink[] = [
|
|
||||||
{ href: "/settings/providers", label: "Providers" },
|
|
||||||
{ href: "/settings/agent-config", label: "Agent Config" },
|
|
||||||
{ href: "/settings/auth", label: "Authentication" },
|
|
||||||
];
|
|
||||||
|
|
||||||
export function FleetSettingsNav(): React.JSX.Element {
|
|
||||||
const pathname = usePathname();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardContent className="px-4 py-3 flex flex-wrap items-center gap-2">
|
|
||||||
<Link
|
|
||||||
href="/settings"
|
|
||||||
className="inline-flex h-9 items-center rounded-md px-3 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
|
||||||
>
|
|
||||||
All Settings
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{FLEET_SETTINGS_LINKS.map((link) => {
|
|
||||||
const isActive = pathname === link.href;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={link.href}
|
|
||||||
href={link.href}
|
|
||||||
className={`inline-flex h-9 items-center rounded-md px-3 text-sm font-medium transition-colors ${
|
|
||||||
isActive
|
|
||||||
? "bg-primary text-primary-foreground"
|
|
||||||
: "text-muted-foreground hover:text-foreground hover:bg-muted"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{link.label}
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,337 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState, useEffect, useRef, useCallback } from "react";
|
|
||||||
import { fetchUsageSummary, type UsageSummary } from "@/lib/api/telemetry";
|
|
||||||
|
|
||||||
// ─── Types ───────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
interface UsageTier {
|
|
||||||
name: string;
|
|
||||||
tokens: number;
|
|
||||||
limit: number;
|
|
||||||
percentage: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Helpers ─────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
function getUsageColor(percentage: number): string {
|
|
||||||
if (percentage < 60) return "var(--success)";
|
|
||||||
if (percentage < 80) return "var(--warn)";
|
|
||||||
return "var(--danger)";
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatTokens(value: number): string {
|
|
||||||
if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
|
|
||||||
if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
|
|
||||||
return value.toFixed(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Component ───────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
export function UsageWidget(): React.JSX.Element {
|
|
||||||
const [summary, setSummary] = useState<UsageSummary | null>(null);
|
|
||||||
const [popoverOpen, setPopoverOpen] = useState(false);
|
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
const popoverRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
const tiers: UsageTier[] = summary
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
name: "Session",
|
|
||||||
tokens: summary.totalTokens,
|
|
||||||
limit: 100_000,
|
|
||||||
percentage: (summary.totalTokens / 100_000) * 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Daily",
|
|
||||||
tokens: summary.totalTokens,
|
|
||||||
limit: 500_000,
|
|
||||||
percentage: (summary.totalTokens / 500_000) * 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Monthly",
|
|
||||||
tokens: summary.totalTokens,
|
|
||||||
limit: 2_000_000,
|
|
||||||
percentage: (summary.totalTokens / 2_000_000) * 100,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
: [];
|
|
||||||
|
|
||||||
const currentTier = tiers[0];
|
|
||||||
const usageColor = currentTier ? getUsageColor(currentTier.percentage) : "var(--muted)";
|
|
||||||
|
|
||||||
const loadSummary = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
const data = await fetchUsageSummary("30d");
|
|
||||||
setSummary(data);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to load usage summary:", err);
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
void loadSummary();
|
|
||||||
}, [loadSummary]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
function handleClickOutside(event: MouseEvent): void {
|
|
||||||
if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
|
|
||||||
setPopoverOpen(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!popoverOpen) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("mousedown", handleClickOutside);
|
|
||||||
return (): void => {
|
|
||||||
document.removeEventListener("mousedown", handleClickOutside);
|
|
||||||
};
|
|
||||||
}, [popoverOpen]);
|
|
||||||
|
|
||||||
const pct = currentTier ? Math.min(currentTier.percentage, 100) : 0;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div ref={popoverRef} style={{ position: "relative" }}>
|
|
||||||
<button
|
|
||||||
onClick={(): void => {
|
|
||||||
setPopoverOpen((prev) => !prev);
|
|
||||||
}}
|
|
||||||
aria-label="Usage widget"
|
|
||||||
aria-expanded={popoverOpen}
|
|
||||||
aria-haspopup="true"
|
|
||||||
className="hidden lg:flex items-center"
|
|
||||||
style={{
|
|
||||||
gap: 6,
|
|
||||||
padding: "5px 10px",
|
|
||||||
borderRadius: 6,
|
|
||||||
background: "var(--surface)",
|
|
||||||
border: `1px solid ${popoverOpen ? usageColor : "var(--border)"}`,
|
|
||||||
fontSize: "0.75rem",
|
|
||||||
fontFamily: "var(--mono)",
|
|
||||||
color: "var(--text-2)",
|
|
||||||
cursor: "pointer",
|
|
||||||
transition: "border-color 0.15s, color 0.15s",
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
onMouseEnter={(e): void => {
|
|
||||||
(e.currentTarget as HTMLButtonElement).style.borderColor = usageColor;
|
|
||||||
(e.currentTarget as HTMLButtonElement).style.color = "var(--text)";
|
|
||||||
}}
|
|
||||||
onMouseLeave={(e): void => {
|
|
||||||
if (!popoverOpen) {
|
|
||||||
(e.currentTarget as HTMLButtonElement).style.borderColor = "var(--border)";
|
|
||||||
(e.currentTarget as HTMLButtonElement).style.color = "var(--text-2)";
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
width="12"
|
|
||||||
height="12"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
style={{ color: usageColor, flexShrink: 0 }}
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path d="M9 1L3 9h5l-1 6 6-8H8l1-6z" />
|
|
||||||
</svg>
|
|
||||||
<span style={{ fontWeight: 500, color: "var(--text-2)" }}>
|
|
||||||
{isLoading ? "..." : summary ? formatTokens(summary.totalTokens) : "0"}
|
|
||||||
</span>
|
|
||||||
{!isLoading && currentTier && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: 24,
|
|
||||||
height: 4,
|
|
||||||
borderRadius: 2,
|
|
||||||
background: "var(--bg-mid)",
|
|
||||||
overflow: "hidden",
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: `${String(pct)}%`,
|
|
||||||
height: "100%",
|
|
||||||
background: usageColor,
|
|
||||||
borderRadius: 2,
|
|
||||||
transition: "width 0.3s ease-out",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!isLoading && currentTier && (
|
|
||||||
<span style={{ fontWeight: 600, color: usageColor, minWidth: 32, textAlign: "right" }}>
|
|
||||||
{Math.round(currentTier.percentage)}%
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{popoverOpen && (
|
|
||||||
<div
|
|
||||||
role="dialog"
|
|
||||||
aria-label="Usage details"
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
top: "calc(100% + 8px)",
|
|
||||||
right: 0,
|
|
||||||
width: 280,
|
|
||||||
background: "var(--surface)",
|
|
||||||
border: "1px solid var(--border)",
|
|
||||||
borderRadius: 8,
|
|
||||||
padding: 12,
|
|
||||||
boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
|
|
||||||
zIndex: 200,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: "0.83rem",
|
|
||||||
fontWeight: 600,
|
|
||||||
color: "var(--text)",
|
|
||||||
marginBottom: 12,
|
|
||||||
paddingBottom: 8,
|
|
||||||
borderBottom: "1px solid var(--border)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Token Usage
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isLoading ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
textAlign: "center",
|
|
||||||
padding: "20px 0",
|
|
||||||
color: "var(--muted)",
|
|
||||||
fontSize: "0.75rem",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Loading usage data…
|
|
||||||
</div>
|
|
||||||
) : summary ? (
|
|
||||||
<>
|
|
||||||
<div style={{ marginBottom: 12, display: "flex", flexDirection: "column", gap: 8 }}>
|
|
||||||
<div
|
|
||||||
style={{ display: "flex", justifyContent: "space-between", fontSize: "0.75rem" }}
|
|
||||||
>
|
|
||||||
<span style={{ color: "var(--muted)" }}>Total Tokens</span>
|
|
||||||
<span style={{ color: "var(--text)", fontFamily: "var(--mono)" }}>
|
|
||||||
{formatTokens(summary.totalTokens)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{ display: "flex", justifyContent: "space-between", fontSize: "0.75rem" }}
|
|
||||||
>
|
|
||||||
<span style={{ color: "var(--muted)" }}>Estimated Cost</span>
|
|
||||||
<span style={{ color: "var(--text)", fontFamily: "var(--mono)" }}>
|
|
||||||
${summary.totalCost.toFixed(2)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{ display: "flex", justifyContent: "space-between", fontSize: "0.75rem" }}
|
|
||||||
>
|
|
||||||
<span style={{ color: "var(--muted)" }}>Tasks</span>
|
|
||||||
<span style={{ color: "var(--text)", fontFamily: "var(--mono)" }}>
|
|
||||||
{summary.taskCount}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
|
|
||||||
{tiers.map((tier) => {
|
|
||||||
const tierPct = Math.min(tier.percentage, 100);
|
|
||||||
return (
|
|
||||||
<div key={tier.name}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
fontSize: "0.75rem",
|
|
||||||
marginBottom: 4,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span style={{ color: "var(--text-2)" }}>{tier.name}</span>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
color: getUsageColor(tier.percentage),
|
|
||||||
fontFamily: "var(--mono)",
|
|
||||||
fontWeight: 500,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{formatTokens(tier.tokens)} / {formatTokens(tier.limit)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
height: 6,
|
|
||||||
borderRadius: 3,
|
|
||||||
background: "var(--bg-mid)",
|
|
||||||
overflow: "hidden",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: `${String(tierPct)}%`,
|
|
||||||
height: "100%",
|
|
||||||
background: getUsageColor(tier.percentage),
|
|
||||||
borderRadius: 3,
|
|
||||||
transition: "width 0.3s ease-out",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="/usage"
|
|
||||||
onClick={(): void => {
|
|
||||||
setPopoverOpen(false);
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
display: "block",
|
|
||||||
marginTop: 12,
|
|
||||||
paddingTop: 8,
|
|
||||||
borderTop: "1px solid var(--border)",
|
|
||||||
fontSize: "0.75rem",
|
|
||||||
color: "var(--primary)",
|
|
||||||
textDecoration: "none",
|
|
||||||
textAlign: "center",
|
|
||||||
}}
|
|
||||||
onMouseEnter={(e): void => {
|
|
||||||
(e.currentTarget as HTMLAnchorElement).style.textDecoration = "underline";
|
|
||||||
}}
|
|
||||||
onMouseLeave={(e): void => {
|
|
||||||
(e.currentTarget as HTMLAnchorElement).style.textDecoration = "none";
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
View detailed usage →
|
|
||||||
</a>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
textAlign: "center",
|
|
||||||
padding: "20px 0",
|
|
||||||
color: "var(--muted)",
|
|
||||||
fontSize: "0.75rem",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
No usage data available
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -4,43 +4,61 @@
|
|||||||
|
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { Calendar as CalendarIcon, Clock, MapPin } from "lucide-react";
|
import { Calendar as CalendarIcon, Clock, MapPin } from "lucide-react";
|
||||||
import type { WidgetProps, Event } from "@mosaic/shared";
|
import type { WidgetProps } from "@mosaic/shared";
|
||||||
import { fetchEvents } from "@/lib/api/events";
|
|
||||||
|
interface Event {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
startTime: string;
|
||||||
|
endTime?: string;
|
||||||
|
location?: string;
|
||||||
|
allDay: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
export function CalendarWidget({ id: _id, config: _config }: WidgetProps): React.JSX.Element {
|
export function CalendarWidget({ id: _id, config: _config }: WidgetProps): React.JSX.Element {
|
||||||
const [events, setEvents] = useState<Event[]>([]);
|
const [events, setEvents] = useState<Event[]>([]);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
// Mock data for now - will fetch from API later
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let isMounted = true;
|
setIsLoading(true);
|
||||||
|
const now = new Date();
|
||||||
|
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||||
|
const tomorrow = new Date(today);
|
||||||
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||||
|
|
||||||
const loadEvents = async (): Promise<void> => {
|
setTimeout(() => {
|
||||||
setIsLoading(true);
|
setEvents([
|
||||||
try {
|
{
|
||||||
const data = await fetchEvents();
|
id: "1",
|
||||||
if (isMounted) {
|
title: "Team Standup",
|
||||||
setEvents(data);
|
startTime: new Date(today.setHours(9, 0, 0, 0)).toISOString(),
|
||||||
}
|
endTime: new Date(today.setHours(9, 30, 0, 0)).toISOString(),
|
||||||
} catch {
|
location: "Zoom",
|
||||||
if (isMounted) {
|
allDay: false,
|
||||||
setEvents([]);
|
},
|
||||||
}
|
{
|
||||||
} finally {
|
id: "2",
|
||||||
if (isMounted) {
|
title: "Project Review",
|
||||||
setIsLoading(false);
|
startTime: new Date(today.setHours(14, 0, 0, 0)).toISOString(),
|
||||||
}
|
endTime: new Date(today.setHours(15, 0, 0, 0)).toISOString(),
|
||||||
}
|
location: "Conference Room A",
|
||||||
};
|
allDay: false,
|
||||||
|
},
|
||||||
void loadEvents();
|
{
|
||||||
|
id: "3",
|
||||||
return (): void => {
|
title: "Sprint Planning",
|
||||||
isMounted = false;
|
startTime: new Date(tomorrow.setHours(10, 0, 0, 0)).toISOString(),
|
||||||
};
|
endTime: new Date(tomorrow.setHours(12, 0, 0, 0)).toISOString(),
|
||||||
|
allDay: false,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setIsLoading(false);
|
||||||
|
}, 500);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const formatTime = (dateValue: Date | string): string => {
|
const formatTime = (dateString: string): string => {
|
||||||
const date = new Date(dateValue);
|
const date = new Date(dateString);
|
||||||
return date.toLocaleTimeString("en-US", {
|
return date.toLocaleTimeString("en-US", {
|
||||||
hour: "numeric",
|
hour: "numeric",
|
||||||
minute: "2-digit",
|
minute: "2-digit",
|
||||||
@@ -48,8 +66,8 @@ export function CalendarWidget({ id: _id, config: _config }: WidgetProps): React
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatDay = (dateValue: Date | string): string => {
|
const formatDay = (dateString: string): string => {
|
||||||
const date = new Date(dateValue);
|
const date = new Date(dateString);
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
const tomorrow = new Date(today);
|
const tomorrow = new Date(today);
|
||||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||||
|
|||||||
@@ -4,56 +4,68 @@
|
|||||||
|
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { CheckCircle, Circle, Clock, AlertCircle } from "lucide-react";
|
import { CheckCircle, Circle, Clock, AlertCircle } from "lucide-react";
|
||||||
import { TaskPriority, TaskStatus, type WidgetProps, type Task } from "@mosaic/shared";
|
import type { WidgetProps } from "@mosaic/shared";
|
||||||
import { fetchTasks } from "@/lib/api/tasks";
|
|
||||||
|
|
||||||
export function TasksWidget({ id: _id, config: _config }: WidgetProps): React.JSX.Element {
|
interface Task {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
status: string;
|
||||||
|
priority: string;
|
||||||
|
dueDate?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-empty-pattern
|
||||||
|
export function TasksWidget({}: WidgetProps): React.JSX.Element {
|
||||||
const [tasks, setTasks] = useState<Task[]>([]);
|
const [tasks, setTasks] = useState<Task[]>([]);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
// Mock data for now - will fetch from API later
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let isMounted = true;
|
setIsLoading(true);
|
||||||
|
// Simulate API call
|
||||||
const loadTasks = async (): Promise<void> => {
|
setTimeout(() => {
|
||||||
setIsLoading(true);
|
setTasks([
|
||||||
try {
|
{
|
||||||
const data = await fetchTasks();
|
id: "1",
|
||||||
if (isMounted) {
|
title: "Complete project documentation",
|
||||||
setTasks(data);
|
status: "IN_PROGRESS",
|
||||||
}
|
priority: "HIGH",
|
||||||
} catch {
|
dueDate: "2024-02-01",
|
||||||
if (isMounted) {
|
},
|
||||||
setTasks([]);
|
{
|
||||||
}
|
id: "2",
|
||||||
} finally {
|
title: "Review pull requests",
|
||||||
if (isMounted) {
|
status: "NOT_STARTED",
|
||||||
setIsLoading(false);
|
priority: "MEDIUM",
|
||||||
}
|
dueDate: "2024-02-02",
|
||||||
}
|
},
|
||||||
};
|
{
|
||||||
|
id: "3",
|
||||||
void loadTasks();
|
title: "Update dependencies",
|
||||||
|
status: "COMPLETED",
|
||||||
return (): void => {
|
priority: "LOW",
|
||||||
isMounted = false;
|
dueDate: "2024-01-30",
|
||||||
};
|
},
|
||||||
|
]);
|
||||||
|
setIsLoading(false);
|
||||||
|
}, 500);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const getPriorityIcon = (priority: TaskPriority): React.JSX.Element => {
|
const getPriorityIcon = (priority: string): React.JSX.Element => {
|
||||||
switch (priority) {
|
switch (priority) {
|
||||||
case TaskPriority.HIGH:
|
case "HIGH":
|
||||||
return <AlertCircle className="w-4 h-4 text-red-500" />;
|
return <AlertCircle className="w-4 h-4 text-red-500" />;
|
||||||
case TaskPriority.MEDIUM:
|
case "MEDIUM":
|
||||||
return <Clock className="w-4 h-4 text-yellow-500" />;
|
return <Clock className="w-4 h-4 text-yellow-500" />;
|
||||||
case TaskPriority.LOW:
|
case "LOW":
|
||||||
return <Circle className="w-4 h-4 text-gray-400" />;
|
return <Circle className="w-4 h-4 text-gray-400" />;
|
||||||
default:
|
default:
|
||||||
return <Circle className="w-4 h-4 text-gray-400" />;
|
return <Circle className="w-4 h-4 text-gray-400" />;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getStatusIcon = (status: TaskStatus): React.JSX.Element => {
|
const getStatusIcon = (status: string): React.JSX.Element => {
|
||||||
return status === TaskStatus.COMPLETED ? (
|
return status === "COMPLETED" ? (
|
||||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||||
) : (
|
) : (
|
||||||
<Circle className="w-4 h-4 text-gray-400" />
|
<Circle className="w-4 h-4 text-gray-400" />
|
||||||
@@ -62,8 +74,8 @@ export function TasksWidget({ id: _id, config: _config }: WidgetProps): React.JS
|
|||||||
|
|
||||||
const stats = {
|
const stats = {
|
||||||
total: tasks.length,
|
total: tasks.length,
|
||||||
inProgress: tasks.filter((t) => t.status === TaskStatus.IN_PROGRESS).length,
|
inProgress: tasks.filter((t) => t.status === "IN_PROGRESS").length,
|
||||||
completed: tasks.filter((t) => t.status === TaskStatus.COMPLETED).length,
|
completed: tasks.filter((t) => t.status === "COMPLETED").length,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
|
|||||||
@@ -1,58 +1,16 @@
|
|||||||
import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
|
import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
|
||||||
import { render, screen, waitFor } from "@testing-library/react";
|
import { act, render, screen } from "@testing-library/react";
|
||||||
import type { Event } from "@mosaic/shared";
|
|
||||||
import { CalendarWidget } from "../CalendarWidget";
|
import { CalendarWidget } from "../CalendarWidget";
|
||||||
import { fetchEvents } from "@/lib/api/events";
|
|
||||||
|
|
||||||
vi.mock("@/lib/api/events", () => ({
|
|
||||||
fetchEvents: vi.fn(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
const mockEvents: Event[] = [
|
|
||||||
{
|
|
||||||
id: "event-1",
|
|
||||||
title: "API Planning",
|
|
||||||
description: null,
|
|
||||||
startTime: new Date("2026-02-01T09:00:00Z"),
|
|
||||||
endTime: new Date("2026-02-01T09:30:00Z"),
|
|
||||||
allDay: false,
|
|
||||||
location: "Zoom",
|
|
||||||
recurrence: null,
|
|
||||||
creatorId: "user-1",
|
|
||||||
workspaceId: "workspace-1",
|
|
||||||
projectId: null,
|
|
||||||
metadata: {},
|
|
||||||
createdAt: new Date("2026-01-30T09:00:00Z"),
|
|
||||||
updatedAt: new Date("2026-01-30T09:00:00Z"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "event-2",
|
|
||||||
title: "API Review",
|
|
||||||
description: null,
|
|
||||||
startTime: new Date("2026-02-02T10:00:00Z"),
|
|
||||||
endTime: new Date("2026-02-02T11:00:00Z"),
|
|
||||||
allDay: false,
|
|
||||||
location: "Room 1",
|
|
||||||
recurrence: null,
|
|
||||||
creatorId: "user-1",
|
|
||||||
workspaceId: "workspace-1",
|
|
||||||
projectId: null,
|
|
||||||
metadata: {},
|
|
||||||
createdAt: new Date("2026-01-30T09:00:00Z"),
|
|
||||||
updatedAt: new Date("2026-01-30T09:00:00Z"),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
async function finishWidgetLoad(): Promise<void> {
|
async function finishWidgetLoad(): Promise<void> {
|
||||||
await waitFor(() => {
|
await act(async () => {
|
||||||
expect(screen.queryByText("Loading events...")).not.toBeInTheDocument();
|
await vi.advanceTimersByTimeAsync(500);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
describe("CalendarWidget", (): void => {
|
describe("CalendarWidget", (): void => {
|
||||||
beforeEach((): void => {
|
beforeEach((): void => {
|
||||||
vi.clearAllMocks();
|
vi.useFakeTimers();
|
||||||
vi.mocked(fetchEvents).mockResolvedValue(mockEvents);
|
|
||||||
vi.setSystemTime(new Date("2026-02-01T08:00:00Z"));
|
vi.setSystemTime(new Date("2026-02-01T08:00:00Z"));
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -66,15 +24,15 @@ describe("CalendarWidget", (): void => {
|
|||||||
expect(screen.getByText("Loading events...")).toBeInTheDocument();
|
expect(screen.getByText("Loading events...")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("fetches and renders upcoming events after loading", async (): Promise<void> => {
|
it("renders upcoming events after loading", async (): Promise<void> => {
|
||||||
render(<CalendarWidget id="calendar-1" />);
|
render(<CalendarWidget id="calendar-1" />);
|
||||||
|
|
||||||
await finishWidgetLoad();
|
await finishWidgetLoad();
|
||||||
|
|
||||||
expect(fetchEvents).toHaveBeenCalledTimes(1);
|
|
||||||
expect(screen.getByText("Upcoming Events")).toBeInTheDocument();
|
expect(screen.getByText("Upcoming Events")).toBeInTheDocument();
|
||||||
expect(screen.getByText("API Planning")).toBeInTheDocument();
|
expect(screen.getByText("Team Standup")).toBeInTheDocument();
|
||||||
expect(screen.getByText("API Review")).toBeInTheDocument();
|
expect(screen.getByText("Project Review")).toBeInTheDocument();
|
||||||
|
expect(screen.getByText("Sprint Planning")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("shows relative day labels", async (): Promise<void> => {
|
it("shows relative day labels", async (): Promise<void> => {
|
||||||
@@ -92,15 +50,6 @@ describe("CalendarWidget", (): void => {
|
|||||||
await finishWidgetLoad();
|
await finishWidgetLoad();
|
||||||
|
|
||||||
expect(screen.getByText("Zoom")).toBeInTheDocument();
|
expect(screen.getByText("Zoom")).toBeInTheDocument();
|
||||||
expect(screen.getByText("Room 1")).toBeInTheDocument();
|
expect(screen.getByText("Conference Room A")).toBeInTheDocument();
|
||||||
});
|
|
||||||
|
|
||||||
it("shows empty state when no events are returned", async (): Promise<void> => {
|
|
||||||
vi.mocked(fetchEvents).mockResolvedValueOnce([]);
|
|
||||||
|
|
||||||
render(<CalendarWidget id="calendar-1" />);
|
|
||||||
await finishWidgetLoad();
|
|
||||||
|
|
||||||
expect(screen.getByText("No upcoming events")).toBeInTheDocument();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,80 +1,20 @@
|
|||||||
import { describe, it, expect, beforeEach, vi } from "vitest";
|
import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
|
||||||
import { render, screen, waitFor } from "@testing-library/react";
|
import { act, render, screen } from "@testing-library/react";
|
||||||
import { TaskStatus, TaskPriority, type Task } from "@mosaic/shared";
|
|
||||||
import { TasksWidget } from "../TasksWidget";
|
import { TasksWidget } from "../TasksWidget";
|
||||||
import { fetchTasks } from "@/lib/api/tasks";
|
|
||||||
|
|
||||||
vi.mock("@/lib/api/tasks", () => ({
|
|
||||||
fetchTasks: vi.fn(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
const mockTasks: Task[] = [
|
|
||||||
{
|
|
||||||
id: "task-1",
|
|
||||||
title: "API task one",
|
|
||||||
description: null,
|
|
||||||
status: TaskStatus.IN_PROGRESS,
|
|
||||||
priority: TaskPriority.HIGH,
|
|
||||||
dueDate: new Date("2026-02-03T09:00:00Z"),
|
|
||||||
creatorId: "user-1",
|
|
||||||
assigneeId: "user-1",
|
|
||||||
workspaceId: "workspace-1",
|
|
||||||
projectId: null,
|
|
||||||
parentId: null,
|
|
||||||
sortOrder: 0,
|
|
||||||
metadata: {},
|
|
||||||
completedAt: null,
|
|
||||||
createdAt: new Date("2026-02-01T09:00:00Z"),
|
|
||||||
updatedAt: new Date("2026-02-01T09:00:00Z"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "task-2",
|
|
||||||
title: "API task two",
|
|
||||||
description: null,
|
|
||||||
status: TaskStatus.NOT_STARTED,
|
|
||||||
priority: TaskPriority.MEDIUM,
|
|
||||||
dueDate: new Date("2026-02-04T09:00:00Z"),
|
|
||||||
creatorId: "user-1",
|
|
||||||
assigneeId: "user-1",
|
|
||||||
workspaceId: "workspace-1",
|
|
||||||
projectId: null,
|
|
||||||
parentId: null,
|
|
||||||
sortOrder: 1,
|
|
||||||
metadata: {},
|
|
||||||
completedAt: null,
|
|
||||||
createdAt: new Date("2026-02-01T09:00:00Z"),
|
|
||||||
updatedAt: new Date("2026-02-01T09:00:00Z"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "task-3",
|
|
||||||
title: "API task three",
|
|
||||||
description: null,
|
|
||||||
status: TaskStatus.COMPLETED,
|
|
||||||
priority: TaskPriority.LOW,
|
|
||||||
dueDate: new Date("2026-02-05T09:00:00Z"),
|
|
||||||
creatorId: "user-1",
|
|
||||||
assigneeId: "user-1",
|
|
||||||
workspaceId: "workspace-1",
|
|
||||||
projectId: null,
|
|
||||||
parentId: null,
|
|
||||||
sortOrder: 2,
|
|
||||||
metadata: {},
|
|
||||||
completedAt: new Date("2026-02-02T09:00:00Z"),
|
|
||||||
createdAt: new Date("2026-02-01T09:00:00Z"),
|
|
||||||
updatedAt: new Date("2026-02-02T09:00:00Z"),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
async function finishWidgetLoad(): Promise<void> {
|
async function finishWidgetLoad(): Promise<void> {
|
||||||
await waitFor(() => {
|
await act(async () => {
|
||||||
expect(screen.queryByText("Loading tasks...")).not.toBeInTheDocument();
|
await vi.advanceTimersByTimeAsync(500);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
describe("TasksWidget", (): void => {
|
describe("TasksWidget", (): void => {
|
||||||
beforeEach((): void => {
|
beforeEach((): void => {
|
||||||
vi.clearAllMocks();
|
vi.useFakeTimers();
|
||||||
vi.mocked(fetchTasks).mockResolvedValue(mockTasks);
|
});
|
||||||
|
|
||||||
|
afterEach((): void => {
|
||||||
|
vi.useRealTimers();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("renders loading state initially", (): void => {
|
it("renders loading state initially", (): void => {
|
||||||
@@ -83,26 +23,25 @@ describe("TasksWidget", (): void => {
|
|||||||
expect(screen.getByText("Loading tasks...")).toBeInTheDocument();
|
expect(screen.getByText("Loading tasks...")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("fetches tasks and renders summary stats", async (): Promise<void> => {
|
it("renders default summary stats", async (): Promise<void> => {
|
||||||
render(<TasksWidget id="tasks-1" />);
|
render(<TasksWidget id="tasks-1" />);
|
||||||
|
|
||||||
await finishWidgetLoad();
|
await finishWidgetLoad();
|
||||||
|
|
||||||
expect(fetchTasks).toHaveBeenCalledTimes(1);
|
|
||||||
expect(screen.getByText("Total")).toBeInTheDocument();
|
expect(screen.getByText("Total")).toBeInTheDocument();
|
||||||
expect(screen.getByText("In Progress")).toBeInTheDocument();
|
expect(screen.getByText("In Progress")).toBeInTheDocument();
|
||||||
expect(screen.getByText("Done")).toBeInTheDocument();
|
expect(screen.getByText("Done")).toBeInTheDocument();
|
||||||
expect(screen.getByText("3")).toBeInTheDocument();
|
expect(screen.getByText("3")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("renders task rows from API response", async (): Promise<void> => {
|
it("renders default task rows", async (): Promise<void> => {
|
||||||
render(<TasksWidget id="tasks-1" />);
|
render(<TasksWidget id="tasks-1" />);
|
||||||
|
|
||||||
await finishWidgetLoad();
|
await finishWidgetLoad();
|
||||||
|
|
||||||
expect(screen.getByText("API task one")).toBeInTheDocument();
|
expect(screen.getByText("Complete project documentation")).toBeInTheDocument();
|
||||||
expect(screen.getByText("API task two")).toBeInTheDocument();
|
expect(screen.getByText("Review pull requests")).toBeInTheDocument();
|
||||||
expect(screen.getByText("API task three")).toBeInTheDocument();
|
expect(screen.getByText("Update dependencies")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("shows due date labels for each task", async (): Promise<void> => {
|
it("shows due date labels for each task", async (): Promise<void> => {
|
||||||
@@ -112,13 +51,4 @@ describe("TasksWidget", (): void => {
|
|||||||
|
|
||||||
expect(screen.getAllByText(/Due:/).length).toBe(3);
|
expect(screen.getAllByText(/Due:/).length).toBe(3);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("shows empty state when API returns no tasks", async (): Promise<void> => {
|
|
||||||
vi.mocked(fetchTasks).mockResolvedValueOnce([]);
|
|
||||||
|
|
||||||
render(<TasksWidget id="tasks-1" />);
|
|
||||||
await finishWidgetLoad();
|
|
||||||
|
|
||||||
expect(screen.getByText("No tasks yet")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,139 +0,0 @@
|
|||||||
/**
|
|
||||||
* Activity API Client
|
|
||||||
* Handles activity-log-related API requests
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { apiGet, type ApiResponse } from "./client";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Activity action enum (matches backend ActivityAction)
|
|
||||||
*/
|
|
||||||
export enum ActivityAction {
|
|
||||||
CREATED = "CREATED",
|
|
||||||
UPDATED = "UPDATED",
|
|
||||||
DELETED = "DELETED",
|
|
||||||
COMPLETED = "COMPLETED",
|
|
||||||
ASSIGNED = "ASSIGNED",
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Entity type enum (matches backend EntityType)
|
|
||||||
*/
|
|
||||||
export enum EntityType {
|
|
||||||
TASK = "TASK",
|
|
||||||
EVENT = "EVENT",
|
|
||||||
PROJECT = "PROJECT",
|
|
||||||
WORKSPACE = "WORKSPACE",
|
|
||||||
USER = "USER",
|
|
||||||
DOMAIN = "DOMAIN",
|
|
||||||
IDEA = "IDEA",
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Activity log response interface (matches Prisma ActivityLog model)
|
|
||||||
*/
|
|
||||||
export interface ActivityLog {
|
|
||||||
id: string;
|
|
||||||
workspaceId: string;
|
|
||||||
userId: string;
|
|
||||||
action: ActivityAction;
|
|
||||||
entityType: EntityType;
|
|
||||||
entityId: string;
|
|
||||||
details: Record<string, unknown> | null;
|
|
||||||
ipAddress: string | null;
|
|
||||||
userAgent: string | null;
|
|
||||||
createdAt: string;
|
|
||||||
user?: {
|
|
||||||
id: string;
|
|
||||||
name: string | null;
|
|
||||||
email: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Filters for querying activity logs
|
|
||||||
*/
|
|
||||||
export interface ActivityLogFilters {
|
|
||||||
workspaceId?: string;
|
|
||||||
userId?: string;
|
|
||||||
action?: ActivityAction;
|
|
||||||
entityType?: EntityType;
|
|
||||||
entityId?: string;
|
|
||||||
startDate?: string;
|
|
||||||
endDate?: string;
|
|
||||||
page?: number;
|
|
||||||
limit?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Paginated activity logs response
|
|
||||||
*/
|
|
||||||
export interface PaginatedActivityLogs {
|
|
||||||
data: ActivityLog[];
|
|
||||||
meta: {
|
|
||||||
total: number;
|
|
||||||
page: number;
|
|
||||||
limit: number;
|
|
||||||
totalPages: number;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetch activity logs with optional filters
|
|
||||||
*/
|
|
||||||
export async function fetchActivityLogs(filters?: ActivityLogFilters): Promise<ActivityLog[]> {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
|
|
||||||
if (filters?.userId) {
|
|
||||||
params.append("userId", filters.userId);
|
|
||||||
}
|
|
||||||
if (filters?.action) {
|
|
||||||
params.append("action", filters.action);
|
|
||||||
}
|
|
||||||
if (filters?.entityType) {
|
|
||||||
params.append("entityType", filters.entityType);
|
|
||||||
}
|
|
||||||
if (filters?.entityId) {
|
|
||||||
params.append("entityId", filters.entityId);
|
|
||||||
}
|
|
||||||
if (filters?.startDate) {
|
|
||||||
params.append("startDate", filters.startDate);
|
|
||||||
}
|
|
||||||
if (filters?.endDate) {
|
|
||||||
params.append("endDate", filters.endDate);
|
|
||||||
}
|
|
||||||
if (filters?.page !== undefined) {
|
|
||||||
params.append("page", String(filters.page));
|
|
||||||
}
|
|
||||||
if (filters?.limit !== undefined) {
|
|
||||||
params.append("limit", String(filters.limit));
|
|
||||||
}
|
|
||||||
|
|
||||||
const queryString = params.toString();
|
|
||||||
const endpoint = queryString ? `/api/activity?${queryString}` : "/api/activity";
|
|
||||||
|
|
||||||
const response = await apiGet<PaginatedActivityLogs>(endpoint, filters?.workspaceId);
|
|
||||||
return response.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetch a single activity log by ID
|
|
||||||
*/
|
|
||||||
export async function fetchActivityLog(id: string, workspaceId?: string): Promise<ActivityLog> {
|
|
||||||
return apiGet<ActivityLog>(`/api/activity/${id}`, workspaceId);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetch audit trail for a specific entity
|
|
||||||
*/
|
|
||||||
export async function fetchAuditTrail(
|
|
||||||
entityType: EntityType,
|
|
||||||
entityId: string,
|
|
||||||
workspaceId?: string
|
|
||||||
): Promise<ActivityLog[]> {
|
|
||||||
const response = await apiGet<ApiResponse<ActivityLog[]>>(
|
|
||||||
`/api/activity/audit/${entityType}/${entityId}`,
|
|
||||||
workspaceId
|
|
||||||
);
|
|
||||||
return response.data;
|
|
||||||
}
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
/**
|
/**
|
||||||
* Chat API client
|
* Chat API client
|
||||||
* Handles LLM chat interactions via /api/chat/stream (streaming) and /api/llm/chat (fallback)
|
* Handles LLM chat interactions via /api/llm/chat
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { apiPost, fetchCsrfToken, getCsrfToken } from "./client";
|
import { apiPost, fetchCsrfToken, getCsrfToken } from "./client";
|
||||||
@@ -33,28 +33,9 @@ export interface ChatResponse {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Parsed SSE data chunk from OpenAI-compatible stream
|
* Parsed SSE data chunk from the LLM stream
|
||||||
*/
|
*/
|
||||||
interface OpenAiSseChunk {
|
interface SseChunk {
|
||||||
id?: string;
|
|
||||||
object?: string;
|
|
||||||
created?: number;
|
|
||||||
model?: string;
|
|
||||||
choices?: {
|
|
||||||
index: number;
|
|
||||||
delta?: {
|
|
||||||
role?: string;
|
|
||||||
content?: string;
|
|
||||||
};
|
|
||||||
finish_reason?: string | null;
|
|
||||||
}[];
|
|
||||||
error?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Parsed SSE data chunk from legacy /api/llm/chat stream
|
|
||||||
*/
|
|
||||||
interface LegacySseChunk {
|
|
||||||
error?: string;
|
error?: string;
|
||||||
message?: {
|
message?: {
|
||||||
role: string;
|
role: string;
|
||||||
@@ -65,17 +46,7 @@ interface LegacySseChunk {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Parsed SSE data chunk with simple token format
|
* Send a chat message to the LLM
|
||||||
*/
|
|
||||||
interface SimpleTokenChunk {
|
|
||||||
token?: string;
|
|
||||||
done?: boolean;
|
|
||||||
error?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Send a chat message to the LLM (non-streaming fallback)
|
|
||||||
* Uses /api/llm/chat endpoint which supports both streaming and non-streaming
|
|
||||||
*/
|
*/
|
||||||
export async function sendChatMessage(request: ChatRequest): Promise<ChatResponse> {
|
export async function sendChatMessage(request: ChatRequest): Promise<ChatResponse> {
|
||||||
return apiPost<ChatResponse>("/api/llm/chat", request);
|
return apiPost<ChatResponse>("/api/llm/chat", request);
|
||||||
@@ -95,20 +66,11 @@ async function ensureCsrfTokenForStream(): Promise<string> {
|
|||||||
/**
|
/**
|
||||||
* Stream a chat message from the LLM using SSE over fetch.
|
* Stream a chat message from the LLM using SSE over fetch.
|
||||||
*
|
*
|
||||||
* Uses /api/chat/stream endpoint which proxies to OpenClaw.
|
* The backend accepts stream: true in the request body and responds with
|
||||||
* The backend responds with Server-Sent Events in one of these formats:
|
* Server-Sent Events:
|
||||||
*
|
* data: {"message":{"content":"token"},...}\n\n for each token
|
||||||
* OpenAI-compatible format:
|
* data: [DONE]\n\n when the stream is complete
|
||||||
* data: {"choices":[{"delta":{"content":"token"}}],...}\n\n
|
* data: {"error":"message"}\n\n on error
|
||||||
* data: [DONE]\n\n
|
|
||||||
*
|
|
||||||
* Legacy format (from /api/llm/chat):
|
|
||||||
* data: {"message":{"content":"token"},...}\n\n
|
|
||||||
* data: [DONE]\n\n
|
|
||||||
*
|
|
||||||
* Simple token format:
|
|
||||||
* data: {"token":"..."}\n\n
|
|
||||||
* data: {"done":true}\n\n
|
|
||||||
*
|
*
|
||||||
* @param request - Chat request (stream field will be forced to true)
|
* @param request - Chat request (stream field will be forced to true)
|
||||||
* @param onChunk - Called with each token string as it arrives
|
* @param onChunk - Called with each token string as it arrives
|
||||||
@@ -127,14 +89,14 @@ export function streamChatMessage(
|
|||||||
try {
|
try {
|
||||||
const csrfToken = await ensureCsrfTokenForStream();
|
const csrfToken = await ensureCsrfTokenForStream();
|
||||||
|
|
||||||
const response = await fetch(`${API_BASE_URL}/api/chat/stream`, {
|
const response = await fetch(`${API_BASE_URL}/api/llm/chat`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
"X-CSRF-Token": csrfToken,
|
"X-CSRF-Token": csrfToken,
|
||||||
},
|
},
|
||||||
credentials: "include",
|
credentials: "include",
|
||||||
body: JSON.stringify({ messages: request.messages, stream: true }),
|
body: JSON.stringify({ ...request, stream: true }),
|
||||||
signal: signal ?? null,
|
signal: signal ?? null,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -170,25 +132,6 @@ export function streamChatMessage(
|
|||||||
const trimmed = part.trim();
|
const trimmed = part.trim();
|
||||||
if (!trimmed) continue;
|
if (!trimmed) continue;
|
||||||
|
|
||||||
// Handle event: error format
|
|
||||||
const eventMatch = /^event:\s*(\S+)\n/i.exec(trimmed);
|
|
||||||
const dataMatch = /^data:\s*(.+)$/im.exec(trimmed);
|
|
||||||
|
|
||||||
if (eventMatch?.[1] === "error" && dataMatch?.[1]) {
|
|
||||||
try {
|
|
||||||
const errorData = JSON.parse(dataMatch[1].trim()) as {
|
|
||||||
error?: string;
|
|
||||||
};
|
|
||||||
throw new Error(errorData.error ?? "Stream error occurred");
|
|
||||||
} catch (parseErr) {
|
|
||||||
if (parseErr instanceof SyntaxError) {
|
|
||||||
throw new Error("Stream error occurred");
|
|
||||||
}
|
|
||||||
throw parseErr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Standard SSE format: data: {...}
|
|
||||||
for (const line of trimmed.split("\n")) {
|
for (const line of trimmed.split("\n")) {
|
||||||
if (!line.startsWith("data: ")) continue;
|
if (!line.startsWith("data: ")) continue;
|
||||||
|
|
||||||
@@ -200,39 +143,14 @@ export function streamChatMessage(
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const parsed: unknown = JSON.parse(data);
|
const parsed = JSON.parse(data) as SseChunk;
|
||||||
|
|
||||||
// Handle OpenAI format (from /api/chat/stream via OpenClaw)
|
if (parsed.error) {
|
||||||
const openAiChunk = parsed as OpenAiSseChunk;
|
throw new Error(parsed.error);
|
||||||
if (openAiChunk.choices?.[0]?.delta?.content) {
|
|
||||||
onChunk(openAiChunk.choices[0].delta.content);
|
|
||||||
continue;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle legacy format (from /api/llm/chat)
|
if (parsed.message?.content) {
|
||||||
const legacyChunk = parsed as LegacySseChunk;
|
onChunk(parsed.message.content);
|
||||||
if (legacyChunk.message?.content) {
|
|
||||||
onChunk(legacyChunk.message.content);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle simple token format
|
|
||||||
const simpleChunk = parsed as SimpleTokenChunk;
|
|
||||||
if (simpleChunk.token) {
|
|
||||||
onChunk(simpleChunk.token);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle done flag in simple format
|
|
||||||
if (simpleChunk.done === true) {
|
|
||||||
onComplete();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle error in any format
|
|
||||||
const error = openAiChunk.error ?? legacyChunk.error ?? simpleChunk.error;
|
|
||||||
if (error) {
|
|
||||||
throw new Error(error);
|
|
||||||
}
|
}
|
||||||
} catch (parseErr) {
|
} catch (parseErr) {
|
||||||
if (parseErr instanceof SyntaxError) {
|
if (parseErr instanceof SyntaxError) {
|
||||||
@@ -244,7 +162,7 @@ export function streamChatMessage(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Natural end of stream without [DONE] or done flag
|
// Natural end of stream without [DONE]
|
||||||
onComplete();
|
onComplete();
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
if (err instanceof DOMException && err.name === "AbortError") {
|
if (err instanceof DOMException && err.name === "AbortError") {
|
||||||
|
|||||||
@@ -1,172 +0,0 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
||||||
import * as client from "./client";
|
|
||||||
import {
|
|
||||||
createFleetProvider,
|
|
||||||
deleteFleetOidcConfig,
|
|
||||||
deleteFleetProvider,
|
|
||||||
fetchFleetAgentConfig,
|
|
||||||
fetchFleetOidcConfig,
|
|
||||||
fetchFleetProviders,
|
|
||||||
resetBreakglassAdminPassword,
|
|
||||||
updateFleetAgentConfig,
|
|
||||||
updateFleetOidcConfig,
|
|
||||||
updateFleetProvider,
|
|
||||||
} from "./fleet-settings";
|
|
||||||
|
|
||||||
vi.mock("./client");
|
|
||||||
|
|
||||||
beforeEach((): void => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("fetchFleetProviders", (): void => {
|
|
||||||
it("calls providers list endpoint", async (): Promise<void> => {
|
|
||||||
vi.mocked(client.apiGet).mockResolvedValueOnce([] as never);
|
|
||||||
|
|
||||||
await fetchFleetProviders();
|
|
||||||
|
|
||||||
expect(client.apiGet).toHaveBeenCalledWith("/api/fleet-settings/providers");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("createFleetProvider", (): void => {
|
|
||||||
it("posts provider payload", async (): Promise<void> => {
|
|
||||||
vi.mocked(client.apiPost).mockResolvedValueOnce({ id: "provider-1" } as never);
|
|
||||||
|
|
||||||
await createFleetProvider({
|
|
||||||
name: "openai-main",
|
|
||||||
displayName: "OpenAI Main",
|
|
||||||
type: "openai",
|
|
||||||
baseUrl: "https://api.openai.com/v1",
|
|
||||||
apiKey: "sk-test",
|
|
||||||
models: [
|
|
||||||
{ id: "gpt-4.1-mini", name: "gpt-4.1-mini" },
|
|
||||||
{ id: "gpt-4o-mini", name: "gpt-4o-mini" },
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(client.apiPost).toHaveBeenCalledWith("/api/fleet-settings/providers", {
|
|
||||||
name: "openai-main",
|
|
||||||
displayName: "OpenAI Main",
|
|
||||||
type: "openai",
|
|
||||||
baseUrl: "https://api.openai.com/v1",
|
|
||||||
apiKey: "sk-test",
|
|
||||||
models: [
|
|
||||||
{ id: "gpt-4.1-mini", name: "gpt-4.1-mini" },
|
|
||||||
{ id: "gpt-4o-mini", name: "gpt-4o-mini" },
|
|
||||||
],
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("updateFleetProvider", (): void => {
|
|
||||||
it("patches provider endpoint with updates", async (): Promise<void> => {
|
|
||||||
vi.mocked(client.apiPatch).mockResolvedValueOnce(undefined as never);
|
|
||||||
|
|
||||||
await updateFleetProvider("provider-1", { displayName: "OpenAI Updated", isActive: true });
|
|
||||||
|
|
||||||
expect(client.apiPatch).toHaveBeenCalledWith("/api/fleet-settings/providers/provider-1", {
|
|
||||||
displayName: "OpenAI Updated",
|
|
||||||
isActive: true,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("deleteFleetProvider", (): void => {
|
|
||||||
it("deletes provider endpoint", async (): Promise<void> => {
|
|
||||||
vi.mocked(client.apiDelete).mockResolvedValueOnce(undefined as never);
|
|
||||||
|
|
||||||
await deleteFleetProvider("provider-1");
|
|
||||||
|
|
||||||
expect(client.apiDelete).toHaveBeenCalledWith("/api/fleet-settings/providers/provider-1");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("fetchFleetAgentConfig", (): void => {
|
|
||||||
it("calls agent config endpoint", async (): Promise<void> => {
|
|
||||||
vi.mocked(client.apiGet).mockResolvedValueOnce({
|
|
||||||
primaryModel: null,
|
|
||||||
fallbackModels: [],
|
|
||||||
personality: null,
|
|
||||||
} as never);
|
|
||||||
|
|
||||||
await fetchFleetAgentConfig();
|
|
||||||
|
|
||||||
expect(client.apiGet).toHaveBeenCalledWith("/api/fleet-settings/agent-config");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("updateFleetAgentConfig", (): void => {
|
|
||||||
it("patches agent config", async (): Promise<void> => {
|
|
||||||
vi.mocked(client.apiPatch).mockResolvedValueOnce(undefined as never);
|
|
||||||
|
|
||||||
await updateFleetAgentConfig({
|
|
||||||
primaryModel: "openai:gpt-4o-mini",
|
|
||||||
fallbackModels: ["openai:gpt-4.1-mini"],
|
|
||||||
personality: "System behavior",
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(client.apiPatch).toHaveBeenCalledWith("/api/fleet-settings/agent-config", {
|
|
||||||
primaryModel: "openai:gpt-4o-mini",
|
|
||||||
fallbackModels: ["openai:gpt-4.1-mini"],
|
|
||||||
personality: "System behavior",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("fetchFleetOidcConfig", (): void => {
|
|
||||||
it("calls oidc endpoint", async (): Promise<void> => {
|
|
||||||
vi.mocked(client.apiGet).mockResolvedValueOnce({ configured: false } as never);
|
|
||||||
|
|
||||||
await fetchFleetOidcConfig();
|
|
||||||
|
|
||||||
expect(client.apiGet).toHaveBeenCalledWith("/api/fleet-settings/oidc");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("updateFleetOidcConfig", (): void => {
|
|
||||||
it("issues a PUT request with payload", async (): Promise<void> => {
|
|
||||||
vi.mocked(client.apiRequest).mockResolvedValueOnce(undefined as never);
|
|
||||||
|
|
||||||
await updateFleetOidcConfig({
|
|
||||||
issuerUrl: "https://issuer.example.com",
|
|
||||||
clientId: "mosaic-client",
|
|
||||||
clientSecret: "top-secret",
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(client.apiRequest).toHaveBeenCalledWith("/api/fleet-settings/oidc", {
|
|
||||||
method: "PUT",
|
|
||||||
body: JSON.stringify({
|
|
||||||
issuerUrl: "https://issuer.example.com",
|
|
||||||
clientId: "mosaic-client",
|
|
||||||
clientSecret: "top-secret",
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("deleteFleetOidcConfig", (): void => {
|
|
||||||
it("deletes oidc endpoint", async (): Promise<void> => {
|
|
||||||
vi.mocked(client.apiDelete).mockResolvedValueOnce(undefined as never);
|
|
||||||
|
|
||||||
await deleteFleetOidcConfig();
|
|
||||||
|
|
||||||
expect(client.apiDelete).toHaveBeenCalledWith("/api/fleet-settings/oidc");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("resetBreakglassAdminPassword", (): void => {
|
|
||||||
it("posts breakglass reset payload", async (): Promise<void> => {
|
|
||||||
vi.mocked(client.apiPost).mockResolvedValueOnce(undefined as never);
|
|
||||||
|
|
||||||
await resetBreakglassAdminPassword({
|
|
||||||
username: "admin",
|
|
||||||
newPassword: "new-password-123",
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(client.apiPost).toHaveBeenCalledWith("/api/fleet-settings/breakglass/reset-password", {
|
|
||||||
username: "admin",
|
|
||||||
newPassword: "new-password-123",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
import { apiDelete, apiGet, apiPatch, apiPost, apiRequest } from "./client";
|
|
||||||
|
|
||||||
export interface FleetProviderModel {
|
|
||||||
id: string;
|
|
||||||
name?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FleetProvider {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
displayName: string;
|
|
||||||
type: string;
|
|
||||||
baseUrl: string | null;
|
|
||||||
isActive: boolean;
|
|
||||||
models: unknown;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface CreateFleetProviderRequest {
|
|
||||||
name: string;
|
|
||||||
displayName: string;
|
|
||||||
type: string;
|
|
||||||
baseUrl?: string;
|
|
||||||
apiKey?: string;
|
|
||||||
apiType?: string;
|
|
||||||
models?: FleetProviderModel[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UpdateFleetProviderRequest {
|
|
||||||
displayName?: string;
|
|
||||||
baseUrl?: string;
|
|
||||||
apiKey?: string;
|
|
||||||
isActive?: boolean;
|
|
||||||
models?: FleetProviderModel[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FleetAgentConfig {
|
|
||||||
primaryModel: string | null;
|
|
||||||
fallbackModels: string[];
|
|
||||||
personality: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface FleetAgentConfigResponse {
|
|
||||||
primaryModel: string | null;
|
|
||||||
fallbackModels: unknown[];
|
|
||||||
personality: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UpdateFleetAgentConfigRequest {
|
|
||||||
primaryModel?: string;
|
|
||||||
fallbackModels?: string[];
|
|
||||||
personality?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FleetOidcConfig {
|
|
||||||
issuerUrl?: string;
|
|
||||||
clientId?: string;
|
|
||||||
configured: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UpdateFleetOidcConfigRequest {
|
|
||||||
issuerUrl: string;
|
|
||||||
clientId: string;
|
|
||||||
clientSecret: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ResetBreakglassAdminPasswordRequest {
|
|
||||||
username: string;
|
|
||||||
newPassword: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeStringArray(value: unknown[]): string[] {
|
|
||||||
return value.filter((item): item is string => typeof item === "string");
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchFleetProviders(): Promise<FleetProvider[]> {
|
|
||||||
return apiGet<FleetProvider[]>("/api/fleet-settings/providers");
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createFleetProvider(
|
|
||||||
data: CreateFleetProviderRequest
|
|
||||||
): Promise<{ id: string }> {
|
|
||||||
return apiPost<{ id: string }>("/api/fleet-settings/providers", data);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateFleetProvider(
|
|
||||||
providerId: string,
|
|
||||||
data: UpdateFleetProviderRequest
|
|
||||||
): Promise<void> {
|
|
||||||
await apiPatch<unknown>(`/api/fleet-settings/providers/${providerId}`, data);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteFleetProvider(providerId: string): Promise<void> {
|
|
||||||
await apiDelete<unknown>(`/api/fleet-settings/providers/${providerId}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchFleetAgentConfig(): Promise<FleetAgentConfig> {
|
|
||||||
const response = await apiGet<FleetAgentConfigResponse>("/api/fleet-settings/agent-config");
|
|
||||||
|
|
||||||
return {
|
|
||||||
primaryModel: response.primaryModel,
|
|
||||||
fallbackModels: normalizeStringArray(response.fallbackModels),
|
|
||||||
personality: response.personality,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateFleetAgentConfig(data: UpdateFleetAgentConfigRequest): Promise<void> {
|
|
||||||
await apiPatch<unknown>("/api/fleet-settings/agent-config", data);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchFleetOidcConfig(): Promise<FleetOidcConfig> {
|
|
||||||
return apiGet<FleetOidcConfig>("/api/fleet-settings/oidc");
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateFleetOidcConfig(data: UpdateFleetOidcConfigRequest): Promise<void> {
|
|
||||||
await apiRequest<unknown>("/api/fleet-settings/oidc", {
|
|
||||||
method: "PUT",
|
|
||||||
body: JSON.stringify(data),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteFleetOidcConfig(): Promise<void> {
|
|
||||||
await apiDelete<unknown>("/api/fleet-settings/oidc");
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function resetBreakglassAdminPassword(
|
|
||||||
data: ResetBreakglassAdminPasswordRequest
|
|
||||||
): Promise<void> {
|
|
||||||
await apiPost<unknown>("/api/fleet-settings/breakglass/reset-password", data);
|
|
||||||
}
|
|
||||||
@@ -17,5 +17,3 @@ export * from "./dashboard";
|
|||||||
export * from "./projects";
|
export * from "./projects";
|
||||||
export * from "./workspaces";
|
export * from "./workspaces";
|
||||||
export * from "./admin";
|
export * from "./admin";
|
||||||
export * from "./fleet-settings";
|
|
||||||
export * from "./activity";
|
|
||||||
|
|||||||
@@ -1,80 +0,0 @@
|
|||||||
import { apiGet, apiPost } from "./client";
|
|
||||||
|
|
||||||
export interface OnboardingStatus {
|
|
||||||
completed: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BreakglassAdminRequest {
|
|
||||||
username: string;
|
|
||||||
password: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BreakglassAdminResponse {
|
|
||||||
id: string;
|
|
||||||
username: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ConfigureOidcRequest {
|
|
||||||
issuerUrl: string;
|
|
||||||
clientId: string;
|
|
||||||
clientSecret: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ProviderModel {
|
|
||||||
id: string;
|
|
||||||
name?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AddOnboardingProviderRequest {
|
|
||||||
name: string;
|
|
||||||
displayName: string;
|
|
||||||
type: string;
|
|
||||||
baseUrl?: string;
|
|
||||||
apiKey?: string;
|
|
||||||
models?: ProviderModel[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AddOnboardingProviderResponse {
|
|
||||||
id: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TestOnboardingProviderRequest {
|
|
||||||
type: string;
|
|
||||||
baseUrl?: string;
|
|
||||||
apiKey?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TestOnboardingProviderResponse {
|
|
||||||
success: boolean;
|
|
||||||
error?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchOnboardingStatus(): Promise<OnboardingStatus> {
|
|
||||||
return apiGet<OnboardingStatus>("/api/onboarding/status");
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createBreakglassAdmin(
|
|
||||||
request: BreakglassAdminRequest
|
|
||||||
): Promise<BreakglassAdminResponse> {
|
|
||||||
return apiPost<BreakglassAdminResponse>("/api/onboarding/breakglass", request);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function configureOidcProvider(request: ConfigureOidcRequest): Promise<void> {
|
|
||||||
await apiPost<unknown>("/api/onboarding/oidc", request);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function addOnboardingProvider(
|
|
||||||
request: AddOnboardingProviderRequest
|
|
||||||
): Promise<AddOnboardingProviderResponse> {
|
|
||||||
return apiPost<AddOnboardingProviderResponse>("/api/onboarding/provider", request);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function testOnboardingProvider(
|
|
||||||
request: TestOnboardingProviderRequest
|
|
||||||
): Promise<TestOnboardingProviderResponse> {
|
|
||||||
return apiPost<TestOnboardingProviderResponse>("/api/onboarding/provider/test", request);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function completeOnboarding(): Promise<void> {
|
|
||||||
await apiPost<unknown>("/api/onboarding/complete");
|
|
||||||
}
|
|
||||||
@@ -25,9 +25,7 @@ export interface Project {
|
|||||||
name: string;
|
name: string;
|
||||||
description: string | null;
|
description: string | null;
|
||||||
status: ProjectStatus;
|
status: ProjectStatus;
|
||||||
priority?: string | null;
|
|
||||||
startDate: string | null;
|
startDate: string | null;
|
||||||
dueDate?: string | null;
|
|
||||||
endDate: string | null;
|
endDate: string | null;
|
||||||
creatorId: string;
|
creatorId: string;
|
||||||
domainId: string | null;
|
domainId: string | null;
|
||||||
@@ -37,54 +35,6 @@ export interface Project {
|
|||||||
updatedAt: string;
|
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
|
* DTO for creating a new project
|
||||||
*/
|
*/
|
||||||
@@ -95,7 +45,6 @@ export interface CreateProjectDto {
|
|||||||
startDate?: string;
|
startDate?: string;
|
||||||
endDate?: string;
|
endDate?: string;
|
||||||
color?: string;
|
color?: string;
|
||||||
domainId?: string;
|
|
||||||
metadata?: Record<string, unknown>;
|
metadata?: Record<string, unknown>;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -109,7 +58,6 @@ export interface UpdateProjectDto {
|
|||||||
startDate?: string | null;
|
startDate?: string | null;
|
||||||
endDate?: string | null;
|
endDate?: string | null;
|
||||||
color?: string | null;
|
color?: string | null;
|
||||||
domainId?: string | null;
|
|
||||||
metadata?: Record<string, unknown>;
|
metadata?: Record<string, unknown>;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -124,8 +72,8 @@ export async function fetchProjects(workspaceId?: string): Promise<Project[]> {
|
|||||||
/**
|
/**
|
||||||
* Fetch a single project by ID
|
* Fetch a single project by ID
|
||||||
*/
|
*/
|
||||||
export async function fetchProject(id: string, workspaceId?: string): Promise<ProjectDetail> {
|
export async function fetchProject(id: string, workspaceId?: string): Promise<Project> {
|
||||||
return apiGet<ProjectDetail>(`/api/projects/${id}`, workspaceId);
|
return apiGet<Project>(`/api/projects/${id}`, workspaceId);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -46,21 +46,3 @@ export async function updateTask(
|
|||||||
const res = await apiPatch<ApiResponse<Task>>(`/api/tasks/${id}`, data, workspaceId);
|
const res = await apiPatch<ApiResponse<Task>>(`/api/tasks/${id}`, data, workspaceId);
|
||||||
return res.data;
|
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;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,53 +0,0 @@
|
|||||||
import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
|
|
||||||
import { fetchUsageSummary } from "./telemetry";
|
|
||||||
|
|
||||||
vi.mock("./client", () => ({
|
|
||||||
apiGet: vi.fn(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
const { apiGet } = await import("./client");
|
|
||||||
|
|
||||||
describe("Telemetry API Client", (): void => {
|
|
||||||
beforeEach((): void => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
vi.useFakeTimers();
|
|
||||||
vi.setSystemTime(new Date("2026-03-02T12:00:00Z"));
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach((): void => {
|
|
||||||
vi.useRealTimers();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("fetches usage summary from llm usage analytics endpoint", async (): Promise<void> => {
|
|
||||||
vi.mocked(apiGet).mockResolvedValueOnce({
|
|
||||||
data: {
|
|
||||||
totalCalls: 47,
|
|
||||||
totalPromptTokens: 120000,
|
|
||||||
totalCompletionTokens: 125800,
|
|
||||||
totalTokens: 245800,
|
|
||||||
totalCostCents: 342,
|
|
||||||
averageDurationMs: 3200,
|
|
||||||
byProvider: [],
|
|
||||||
byModel: [],
|
|
||||||
byTaskType: [],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await fetchUsageSummary("30d");
|
|
||||||
|
|
||||||
const calledEndpoint = vi.mocked(apiGet).mock.calls[0]?.[0];
|
|
||||||
expect(calledEndpoint).toMatch(/^\/api\/llm-usage\/analytics\?/);
|
|
||||||
|
|
||||||
const queryString = calledEndpoint?.split("?")[1] ?? "";
|
|
||||||
const params = new URLSearchParams(queryString);
|
|
||||||
expect(params.get("startDate")).toBeTruthy();
|
|
||||||
expect(params.get("endDate")).toBeTruthy();
|
|
||||||
|
|
||||||
expect(result).toEqual({
|
|
||||||
totalTokens: 245800,
|
|
||||||
totalCost: 3.42,
|
|
||||||
taskCount: 47,
|
|
||||||
avgQualityGatePassRate: 0,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,6 +1,10 @@
|
|||||||
/**
|
/**
|
||||||
* Telemetry API Client
|
* Telemetry API Client
|
||||||
* Handles telemetry data fetching for the usage dashboard.
|
* Handles telemetry data fetching for the usage dashboard.
|
||||||
|
*
|
||||||
|
* NOTE: Currently returns mock/placeholder data since the telemetry API
|
||||||
|
* aggregation endpoints don't exist yet. The important thing is the UI structure.
|
||||||
|
* When the backend endpoints are ready, replace mock calls with real apiGet() calls.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { apiGet, type ApiResponse } from "./client";
|
import { apiGet, type ApiResponse } from "./client";
|
||||||
@@ -56,84 +60,65 @@ export interface EstimateResponse {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ProviderUsageAnalyticsItem {
|
// ─── Mock Data Generators ────────────────────────────────────────────
|
||||||
provider: string;
|
|
||||||
calls: number;
|
|
||||||
promptTokens: number;
|
|
||||||
completionTokens: number;
|
|
||||||
totalTokens: number;
|
|
||||||
costCents: number;
|
|
||||||
averageDurationMs: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ModelUsageAnalyticsItem {
|
function generateDateRange(range: TimeRange): string[] {
|
||||||
model: string;
|
const days = range === "7d" ? 7 : range === "30d" ? 30 : 90;
|
||||||
calls: number;
|
const dates: string[] = [];
|
||||||
promptTokens: number;
|
const now = new Date();
|
||||||
completionTokens: number;
|
|
||||||
totalTokens: number;
|
|
||||||
costCents: number;
|
|
||||||
averageDurationMs: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TaskTypeUsageAnalyticsItem {
|
for (let i = days - 1; i >= 0; i--) {
|
||||||
taskType: string;
|
const d = new Date(now);
|
||||||
calls: number;
|
d.setDate(d.getDate() - i);
|
||||||
promptTokens: number;
|
dates.push(d.toISOString().split("T")[0] ?? "");
|
||||||
completionTokens: number;
|
|
||||||
totalTokens: number;
|
|
||||||
costCents: number;
|
|
||||||
averageDurationMs: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface UsageAnalyticsResponse {
|
|
||||||
totalCalls: number;
|
|
||||||
totalPromptTokens: number;
|
|
||||||
totalCompletionTokens: number;
|
|
||||||
totalTokens: number;
|
|
||||||
totalCostCents: number;
|
|
||||||
averageDurationMs: number;
|
|
||||||
byProvider: ProviderUsageAnalyticsItem[];
|
|
||||||
byModel: ModelUsageAnalyticsItem[];
|
|
||||||
byTaskType: TaskTypeUsageAnalyticsItem[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const TASK_OUTCOME_COLORS = ["#6EBF8B", "#F5C862", "#94A3B8", "#C4A5DE", "#7AA2F7"];
|
|
||||||
const DAYS_BY_RANGE: Record<TimeRange, number> = {
|
|
||||||
"7d": 7,
|
|
||||||
"30d": 30,
|
|
||||||
"90d": 90,
|
|
||||||
};
|
|
||||||
const analyticsRequestCache = new Map<TimeRange, Promise<UsageAnalyticsResponse>>();
|
|
||||||
|
|
||||||
function buildAnalyticsEndpoint(timeRange: TimeRange): string {
|
|
||||||
const endDate = new Date();
|
|
||||||
const startDate = new Date(endDate);
|
|
||||||
startDate.setDate(startDate.getDate() - (DAYS_BY_RANGE[timeRange] - 1));
|
|
||||||
startDate.setHours(0, 0, 0, 0);
|
|
||||||
|
|
||||||
const query = new URLSearchParams({
|
|
||||||
startDate: startDate.toISOString(),
|
|
||||||
endDate: endDate.toISOString(),
|
|
||||||
}).toString();
|
|
||||||
|
|
||||||
return `/api/llm-usage/analytics?${query}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchUsageAnalytics(timeRange: TimeRange): Promise<UsageAnalyticsResponse> {
|
|
||||||
const cachedRequest = analyticsRequestCache.get(timeRange);
|
|
||||||
if (cachedRequest) {
|
|
||||||
return cachedRequest;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const request = apiGet<ApiResponse<UsageAnalyticsResponse>>(buildAnalyticsEndpoint(timeRange))
|
return dates;
|
||||||
.then((response) => response.data)
|
}
|
||||||
.finally(() => {
|
|
||||||
analyticsRequestCache.delete(timeRange);
|
|
||||||
});
|
|
||||||
|
|
||||||
analyticsRequestCache.set(timeRange, request);
|
function generateMockTokenUsage(range: TimeRange): TokenUsagePoint[] {
|
||||||
return request;
|
const dates = generateDateRange(range);
|
||||||
|
|
||||||
|
return dates.map((date) => {
|
||||||
|
const baseInput = 8000 + Math.floor(Math.random() * 12000);
|
||||||
|
const baseOutput = 3000 + Math.floor(Math.random() * 7000);
|
||||||
|
return {
|
||||||
|
date,
|
||||||
|
inputTokens: baseInput,
|
||||||
|
outputTokens: baseOutput,
|
||||||
|
totalTokens: baseInput + baseOutput,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateMockSummary(range: TimeRange): UsageSummary {
|
||||||
|
const multiplier = range === "7d" ? 1 : range === "30d" ? 4 : 12;
|
||||||
|
return {
|
||||||
|
totalTokens: 245_800 * multiplier,
|
||||||
|
totalCost: 3.42 * multiplier,
|
||||||
|
taskCount: 47 * multiplier,
|
||||||
|
avgQualityGatePassRate: 0.87,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateMockCostBreakdown(): CostBreakdownItem[] {
|
||||||
|
return [
|
||||||
|
{ model: "claude-sonnet-4-5", provider: "anthropic", cost: 18.5, taskCount: 124 },
|
||||||
|
{ model: "gpt-4o", provider: "openai", cost: 12.3, taskCount: 89 },
|
||||||
|
{ model: "claude-haiku-3.5", provider: "anthropic", cost: 4.2, taskCount: 156 },
|
||||||
|
{ model: "llama-3.3-70b", provider: "ollama", cost: 0, taskCount: 67 },
|
||||||
|
{ model: "gemini-2.0-flash", provider: "google", cost: 2.8, taskCount: 42 },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
// PDA-friendly colors: calm, no aggressive reds
|
||||||
|
function generateMockTaskOutcomes(): TaskOutcomeItem[] {
|
||||||
|
return [
|
||||||
|
{ outcome: "Success", count: 312, color: "#6EBF8B" },
|
||||||
|
{ outcome: "Partial", count: 48, color: "#F5C862" },
|
||||||
|
{ outcome: "Timeout", count: 18, color: "#94A3B8" },
|
||||||
|
{ outcome: "Incomplete", count: 22, color: "#C4A5DE" },
|
||||||
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── API Functions ───────────────────────────────────────────────────
|
// ─── API Functions ───────────────────────────────────────────────────
|
||||||
@@ -142,54 +127,47 @@ async function fetchUsageAnalytics(timeRange: TimeRange): Promise<UsageAnalytics
|
|||||||
* Fetch usage summary data (total tokens, cost, task count, quality rate)
|
* Fetch usage summary data (total tokens, cost, task count, quality rate)
|
||||||
*/
|
*/
|
||||||
export async function fetchUsageSummary(timeRange: TimeRange): Promise<UsageSummary> {
|
export async function fetchUsageSummary(timeRange: TimeRange): Promise<UsageSummary> {
|
||||||
const analytics = await fetchUsageAnalytics(timeRange);
|
// TODO: Replace with real API call when backend aggregation endpoints are ready
|
||||||
|
// const response = await apiGet<ApiResponse<UsageSummary>>(`/api/telemetry/summary?range=${timeRange}`);
|
||||||
return {
|
// return response.data;
|
||||||
totalTokens: analytics.totalTokens,
|
void apiGet; // suppress unused import warning in the meantime
|
||||||
totalCost: analytics.totalCostCents / 100,
|
await new Promise((resolve) => setTimeout(resolve, 200));
|
||||||
taskCount: analytics.totalCalls,
|
return generateMockSummary(timeRange);
|
||||||
avgQualityGatePassRate: 0,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Fetch token usage time series for charts
|
* Fetch token usage time series for charts
|
||||||
*/
|
*/
|
||||||
export function fetchTokenUsage(timeRange: TimeRange): Promise<TokenUsagePoint[]> {
|
export async function fetchTokenUsage(timeRange: TimeRange): Promise<TokenUsagePoint[]> {
|
||||||
void timeRange;
|
// TODO: Replace with real API call
|
||||||
return Promise.resolve([]);
|
// const response = await apiGet<ApiResponse<TokenUsagePoint[]>>(`/api/telemetry/tokens?range=${timeRange}`);
|
||||||
|
// return response.data;
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 250));
|
||||||
|
return generateMockTokenUsage(timeRange);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Fetch cost breakdown by model
|
* Fetch cost breakdown by model
|
||||||
*/
|
*/
|
||||||
export async function fetchCostBreakdown(timeRange: TimeRange): Promise<CostBreakdownItem[]> {
|
export async function fetchCostBreakdown(timeRange: TimeRange): Promise<CostBreakdownItem[]> {
|
||||||
const analytics = await fetchUsageAnalytics(timeRange);
|
// TODO: Replace with real API call
|
||||||
|
// const response = await apiGet<ApiResponse<CostBreakdownItem[]>>(`/api/telemetry/costs?range=${timeRange}`);
|
||||||
return analytics.byModel
|
// return response.data;
|
||||||
.filter((item) => item.calls > 0)
|
await new Promise((resolve) => setTimeout(resolve, 200));
|
||||||
.sort((a, b) => b.costCents - a.costCents)
|
void timeRange;
|
||||||
.map((item) => ({
|
return generateMockCostBreakdown();
|
||||||
model: item.model,
|
|
||||||
provider: "unknown",
|
|
||||||
cost: item.costCents / 100,
|
|
||||||
taskCount: item.calls,
|
|
||||||
}));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Fetch task outcome distribution
|
* Fetch task outcome distribution
|
||||||
*/
|
*/
|
||||||
export async function fetchTaskOutcomes(timeRange: TimeRange): Promise<TaskOutcomeItem[]> {
|
export async function fetchTaskOutcomes(timeRange: TimeRange): Promise<TaskOutcomeItem[]> {
|
||||||
const analytics = await fetchUsageAnalytics(timeRange);
|
// TODO: Replace with real API call
|
||||||
|
// const response = await apiGet<ApiResponse<TaskOutcomeItem[]>>(`/api/telemetry/outcomes?range=${timeRange}`);
|
||||||
return analytics.byTaskType
|
// return response.data;
|
||||||
.filter((item) => item.calls > 0)
|
await new Promise((resolve) => setTimeout(resolve, 150));
|
||||||
.map((item, index) => ({
|
void timeRange;
|
||||||
outcome: item.taskType,
|
return generateMockTaskOutcomes();
|
||||||
count: item.calls,
|
|
||||||
color: TASK_OUTCOME_COLORS[index % TASK_OUTCOME_COLORS.length] ?? "#94A3B8",
|
|
||||||
}));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -121,15 +121,9 @@ services:
|
|||||||
OLLAMA_ENDPOINT: ${OLLAMA_ENDPOINT}
|
OLLAMA_ENDPOINT: ${OLLAMA_ENDPOINT}
|
||||||
OPENBAO_ADDR: ${OPENBAO_ADDR}
|
OPENBAO_ADDR: ${OPENBAO_ADDR}
|
||||||
ENCRYPTION_KEY: ${ENCRYPTION_KEY}
|
ENCRYPTION_KEY: ${ENCRYPTION_KEY}
|
||||||
# MS22: fleet encryption key (AES-256-GCM for provider API keys, agent tokens)
|
|
||||||
MOSAIC_SECRET_KEY: ${MOSAIC_SECRET_KEY}
|
|
||||||
# MS22: Docker socket for per-user container lifecycle (optional: set DOCKER_HOST for TCP)
|
|
||||||
DOCKER_HOST: ${DOCKER_HOST:-}
|
|
||||||
# Matrix bridge (optional — configure after Synapse is running)
|
# Matrix bridge (optional — configure after Synapse is running)
|
||||||
MATRIX_HOMESERVER_URL: ${MATRIX_HOMESERVER_URL:-http://synapse:8008}
|
MATRIX_HOMESERVER_URL: ${MATRIX_HOMESERVER_URL:-http://synapse:8008}
|
||||||
MATRIX_ACCESS_TOKEN: ${MATRIX_ACCESS_TOKEN:-}
|
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_BOT_USER_ID: ${MATRIX_BOT_USER_ID:-}
|
||||||
MATRIX_CONTROL_ROOM_ID: ${MATRIX_CONTROL_ROOM_ID:-}
|
MATRIX_CONTROL_ROOM_ID: ${MATRIX_CONTROL_ROOM_ID:-}
|
||||||
MATRIX_WORKSPACE_ID: ${MATRIX_WORKSPACE_ID:-}
|
MATRIX_WORKSPACE_ID: ${MATRIX_WORKSPACE_ID:-}
|
||||||
@@ -148,8 +142,6 @@ services:
|
|||||||
NEXT_PUBLIC_APP_URL: ${NEXT_PUBLIC_APP_URL}
|
NEXT_PUBLIC_APP_URL: ${NEXT_PUBLIC_APP_URL}
|
||||||
NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
|
NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
|
||||||
TRUSTED_ORIGINS: ${TRUSTED_ORIGINS:-}
|
TRUSTED_ORIGINS: ${TRUSTED_ORIGINS:-}
|
||||||
volumes:
|
|
||||||
- /var/run/docker.sock:/var/run/docker.sock:ro
|
|
||||||
healthcheck:
|
healthcheck:
|
||||||
test:
|
test:
|
||||||
[
|
[
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
DATABASE_URL=postgresql://mosaic:changeme@postgres:5432/mosaic
|
|
||||||
DATABASE_PASSWORD=changeme
|
|
||||||
MOSAIC_SECRET_KEY=your-secret-key-at-least-32-characters-long
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
# Mosaic Docker (Core Services)
|
|
||||||
|
|
||||||
This folder includes the Compose stack for **core Mosaic services only**:
|
|
||||||
|
|
||||||
- `mosaic-api`
|
|
||||||
- `mosaic-web`
|
|
||||||
- `postgres`
|
|
||||||
|
|
||||||
User OpenClaw containers are **not** defined in Compose. They are created and managed dynamically by the API's `ContainerLifecycleService` through Docker socket access.
|
|
||||||
|
|
||||||
## Start the stack
|
|
||||||
|
|
||||||
```bash
|
|
||||||
docker compose -f docker/mosaic-compose.yml up -d
|
|
||||||
```
|
|
||||||
|
|
||||||
## Required environment variables
|
|
||||||
|
|
||||||
- `DATABASE_URL`
|
|
||||||
- `MOSAIC_SECRET_KEY`
|
|
||||||
- `DATABASE_PASSWORD`
|
|
||||||
|
|
||||||
Use [`docker/.env.example`](./.env.example) as a starting point.
|
|
||||||
|
|
||||||
## Architecture overview
|
|
||||||
|
|
||||||
See the design doc: [`docs/design/MS22-DB-CENTRIC-ARCHITECTURE.md`](../docs/design/MS22-DB-CENTRIC-ARCHITECTURE.md)
|
|
||||||
|
|
||||||
`mosaic-agents` is an internal-only bridge network reserved for dynamically created user containers.
|
|
||||||
|
|
||||||
## OpenClaw entrypoint behavior
|
|
||||||
|
|
||||||
`docker/openclaw-entrypoint.sh` is intended for dynamically created user OpenClaw containers:
|
|
||||||
|
|
||||||
1. Validates required env vars (`MOSAIC_API_URL`, `AGENT_TOKEN`, `AGENT_ID`).
|
|
||||||
2. Fetches agent-specific OpenClaw config from Mosaic API internal endpoint.
|
|
||||||
3. Writes the config to `/tmp/openclaw.json`.
|
|
||||||
4. Starts OpenClaw gateway with `OPENCLAW_CONFIG_PATH=/tmp/openclaw.json`.
|
|
||||||
|
|
||||||
`docker/openclaw-healthcheck.sh` probes `http://localhost:18789/health` for container health.
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
FROM node:24-slim AS base
|
|
||||||
|
|
||||||
# Pre-bake OS updates and common packages shared across all apps.
|
|
||||||
# Rebuild this image weekly or when base packages change.
|
|
||||||
# Push to: git.mosaicstack.dev/mosaic/node-base:24-slim
|
|
||||||
RUN apt-get update && apt-get upgrade -y --no-install-recommends \
|
|
||||||
&& apt-get install -y --no-install-recommends \
|
|
||||||
openssl \
|
|
||||||
ca-certificates \
|
|
||||||
curl \
|
|
||||||
dumb-init \
|
|
||||||
&& apt-get clean \
|
|
||||||
&& rm -rf /var/lib/apt/lists/*
|
|
||||||
|
|
||||||
# Enable corepack for pnpm
|
|
||||||
RUN corepack enable
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
services:
|
|
||||||
mosaic-api:
|
|
||||||
image: mosaic/api:latest
|
|
||||||
environment:
|
|
||||||
DATABASE_URL: ${DATABASE_URL}
|
|
||||||
MOSAIC_SECRET_KEY: ${MOSAIC_SECRET_KEY}
|
|
||||||
volumes:
|
|
||||||
- /var/run/docker.sock:/var/run/docker.sock
|
|
||||||
networks:
|
|
||||||
- internal
|
|
||||||
healthcheck:
|
|
||||||
test: ["CMD", "curl", "-f", "http://localhost:4000/api/health"]
|
|
||||||
interval: 30s
|
|
||||||
timeout: 10s
|
|
||||||
retries: 3
|
|
||||||
|
|
||||||
mosaic-web:
|
|
||||||
image: mosaic/web:latest
|
|
||||||
environment:
|
|
||||||
NEXT_PUBLIC_API_URL: http://mosaic-api:4000
|
|
||||||
ports:
|
|
||||||
- "3000:3000"
|
|
||||||
networks:
|
|
||||||
- internal
|
|
||||||
depends_on:
|
|
||||||
mosaic-api:
|
|
||||||
condition: service_healthy
|
|
||||||
|
|
||||||
postgres:
|
|
||||||
image: postgres:17-alpine
|
|
||||||
environment:
|
|
||||||
POSTGRES_DB: mosaic
|
|
||||||
POSTGRES_USER: mosaic
|
|
||||||
POSTGRES_PASSWORD: ${DATABASE_PASSWORD}
|
|
||||||
volumes:
|
|
||||||
- postgres-data:/var/lib/postgresql/data
|
|
||||||
networks:
|
|
||||||
- internal
|
|
||||||
healthcheck:
|
|
||||||
test: ["CMD-SHELL", "pg_isready -U mosaic"]
|
|
||||||
interval: 10s
|
|
||||||
timeout: 5s
|
|
||||||
retries: 5
|
|
||||||
|
|
||||||
networks:
|
|
||||||
internal:
|
|
||||||
driver: bridge
|
|
||||||
mosaic-agents:
|
|
||||||
driver: bridge
|
|
||||||
internal: true
|
|
||||||
|
|
||||||
volumes:
|
|
||||||
postgres-data:
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
#!/bin/sh
|
|
||||||
set -e
|
|
||||||
: "${MOSAIC_API_URL:?MOSAIC_API_URL is required}"
|
|
||||||
: "${AGENT_TOKEN:?AGENT_TOKEN is required}"
|
|
||||||
: "${AGENT_ID:?AGENT_ID is required}"
|
|
||||||
|
|
||||||
echo "[entrypoint] Fetching config for agent ${AGENT_ID}..."
|
|
||||||
HTTP_CODE=$(curl -sf -w "%{http_code}" \
|
|
||||||
"${MOSAIC_API_URL}/api/internal/agent-config/${AGENT_ID}" \
|
|
||||||
-H "Authorization: Bearer ${AGENT_TOKEN}" \
|
|
||||||
-o /tmp/openclaw.json)
|
|
||||||
|
|
||||||
if [ "$HTTP_CODE" != "200" ]; then
|
|
||||||
echo "[entrypoint] ERROR: Config fetch failed with HTTP ${HTTP_CODE}"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo "[entrypoint] Config loaded. Starting OpenClaw gateway..."
|
|
||||||
export OPENCLAW_CONFIG_PATH=/tmp/openclaw.json
|
|
||||||
exec openclaw gateway run --bind lan --auth token
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
#!/bin/sh
|
|
||||||
curl -sf http://localhost:18789/health || exit 1
|
|
||||||
@@ -76,16 +76,16 @@ Remaining estimate: ~143K tokens (Codex budget).
|
|||||||
|
|
||||||
Design doc: `docs/design/MS22-DB-CENTRIC-ARCHITECTURE.md`
|
Design doc: `docs/design/MS22-DB-CENTRIC-ARCHITECTURE.md`
|
||||||
|
|
||||||
| Task ID | Status | Phase | Description | Issue | Scope | Branch | Depends On | Blocks | Assigned Worker | Started | Completed | Est Tokens | Act Tokens | Notes |
|
| Task ID | Status | Phase | Description | Issue | Scope | Branch | Depends On | Blocks | Assigned Worker | Started | Completed | Est Tokens | Act Tokens | Notes |
|
||||||
| -------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------- | ----- | ------- | ---------------------------- | ---------- | --------------- | --------------- | ------- | --------- | ---------- | ---------- | ----- |
|
| -------- | ----------- | -------- | --------------------------------------------------------------------------------------------------------------------- | ----- | ------- | ---------------------------- | ---------- | --------------- | --------------- | ------- | --------- | ---------- | ---------- | ----- |
|
||||||
| MS22-P1a | done | phase-1a | Prisma schema: SystemConfig, BreakglassUser, LlmProvider, UserContainer, SystemContainer, UserAgentConfig + migration | — | api | feat/ms22-p1a-schema | — | P1b,P1c,P1d,P1e | — | — | — | 20K | — | |
|
| MS22-P1a | done | phase-1a | Prisma schema: SystemConfig, BreakglassUser, LlmProvider, UserContainer, SystemContainer, UserAgentConfig + migration | — | api | feat/ms22-p1a-schema | — | P1b,P1c,P1d,P1e | — | — | — | 20K | — | |
|
||||||
| MS22-P1b | done | phase-1b | Encryption service (AES-256-GCM) for API keys and tokens | — | api | feat/ms22-p1b-crypto | — | P1c,P1e,P1g | — | — | — | 15K | — | |
|
| MS22-P1b | done | phase-1b | Encryption service (AES-256-GCM) for API keys and tokens | — | api | feat/ms22-p1b-crypto | — | P1c,P1e,P1g | — | — | — | 15K | — | |
|
||||||
| MS22-P1c | done | phase-1c | Internal config endpoint: assemble openclaw.json from DB | — | api | feat/ms22-p1c-config-api | P1a,P1b | P1i,P1j | — | — | — | 20K | — | |
|
| MS22-P1c | not-started | phase-1c | Internal config endpoint: assemble openclaw.json from DB | — | api | feat/ms22-p1c-config-api | P1a,P1b | P1i,P1j | — | — | — | 20K | — | |
|
||||||
| MS22-P1d | done | phase-1d | ContainerLifecycleService: Docker API (dockerode) start/stop/health/reap | — | api | feat/ms22-p1d-container-mgr | P1a | P1i,P1k | — | — | — | 25K | — | |
|
| MS22-P1d | not-started | phase-1d | ContainerLifecycleService: Docker API (dockerode) start/stop/health/reap | — | api | feat/ms22-p1d-container-mgr | P1a | P1i,P1k | — | — | — | 25K | — | |
|
||||||
| MS22-P1e | done | phase-1e | Onboarding API: breakglass, OIDC, provider, agents, complete | — | api | feat/ms22-p1e-onboarding-api | P1a,P1b | P1f | — | — | — | 20K | — | |
|
| MS22-P1e | not-started | phase-1e | Onboarding API: breakglass, OIDC, provider, agents, complete | — | api | feat/ms22-p1e-onboarding-api | P1a,P1b | P1f | — | — | — | 20K | — | |
|
||||||
| MS22-P1f | done | phase-1f | Onboarding wizard WebUI (multi-step form) | — | web | feat/ms22-p1f-onboarding-ui | P1e | — | — | — | — | 25K | — | |
|
| MS22-P1f | not-started | phase-1f | Onboarding wizard WebUI (multi-step form) | — | web | feat/ms22-p1f-onboarding-ui | P1e | — | — | — | — | 25K | — | |
|
||||||
| MS22-P1g | done | phase-1g | Settings API: CRUD providers, agent config, OIDC, breakglass | — | api | feat/ms22-p1g-settings-api | P1a,P1b | P1h | — | — | — | 20K | — | |
|
| MS22-P1g | not-started | phase-1g | Settings API: CRUD providers, agent config, OIDC, breakglass | — | api | feat/ms22-p1g-settings-api | P1a,P1b | P1h | — | — | — | 20K | — | |
|
||||||
| MS22-P1h | done | phase-1h | Settings UI: Providers, Agent Config, Auth pages | — | web | feat/ms22-p1h-settings-ui | P1g | — | — | — | — | 25K | — | |
|
| MS22-P1h | not-started | phase-1h | Settings UI: Providers, Agent Config, Auth pages | — | web | feat/ms22-p1h-settings-ui | P1g | — | — | — | — | 25K | — | |
|
||||||
| MS22-P1i | done | phase-1i | Chat proxy: route WebUI chat to user's OpenClaw container (SSE) | — | api+web | feat/ms22-p1i-chat-proxy | P1c,P1d | — | — | — | — | 20K | — | |
|
| MS22-P1i | not-started | phase-1i | Chat proxy: route WebUI chat to user's OpenClaw container (SSE) | — | api+web | feat/ms22-p1i-chat-proxy | P1c,P1d | — | — | — | — | 20K | — | |
|
||||||
| MS22-P1j | done | phase-1j | Docker entrypoint + health checks + core compose | — | docker | feat/ms22-p1j-docker | P1c | — | — | — | — | 10K | — | |
|
| MS22-P1j | not-started | phase-1j | Docker entrypoint + health checks + core compose | — | docker | feat/ms22-p1j-docker | P1c | — | — | — | — | 10K | — | |
|
||||||
| MS22-P1k | done | phase-1k | Idle reaper cron: stop inactive user containers | — | api | feat/ms22-p1k-idle-reaper | P1d | — | — | — | — | 10K | — | |
|
| MS22-P1k | not-started | phase-1k | Idle reaper cron: stop inactive user containers | — | api | feat/ms22-p1k-idle-reaper | P1d | — | — | — | — | 10K | — | |
|
||||||
|
|||||||
@@ -1,157 +0,0 @@
|
|||||||
# 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.)
|
|
||||||
38
pnpm-lock.yaml
generated
38
pnpm-lock.yaml
generated
@@ -102,9 +102,6 @@ importers:
|
|||||||
'@nestjs/platform-socket.io':
|
'@nestjs/platform-socket.io':
|
||||||
specifier: ^11.1.12
|
specifier: ^11.1.12
|
||||||
version: 11.1.12(@nestjs/common@11.1.12(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/websockets@11.1.12)(rxjs@7.8.2)
|
version: 11.1.12(@nestjs/common@11.1.12(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/websockets@11.1.12)(rxjs@7.8.2)
|
||||||
'@nestjs/schedule':
|
|
||||||
specifier: ^6.1.1
|
|
||||||
version: 6.1.1(@nestjs/common@11.1.12(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.12)
|
|
||||||
'@nestjs/throttler':
|
'@nestjs/throttler':
|
||||||
specifier: ^6.5.0
|
specifier: ^6.5.0
|
||||||
version: 6.5.0(@nestjs/common@11.1.12(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.12)(reflect-metadata@0.2.2)
|
version: 6.5.0(@nestjs/common@11.1.12(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.12)(reflect-metadata@0.2.2)
|
||||||
@@ -180,9 +177,6 @@ importers:
|
|||||||
gray-matter:
|
gray-matter:
|
||||||
specifier: ^4.0.3
|
specifier: ^4.0.3
|
||||||
version: 4.0.3
|
version: 4.0.3
|
||||||
helmet:
|
|
||||||
specifier: ^8.1.0
|
|
||||||
version: 8.1.0
|
|
||||||
highlight.js:
|
highlight.js:
|
||||||
specifier: ^11.11.1
|
specifier: ^11.11.1
|
||||||
version: 11.11.1
|
version: 11.11.1
|
||||||
@@ -1747,12 +1741,6 @@ packages:
|
|||||||
'@nestjs/websockets': ^11.0.0
|
'@nestjs/websockets': ^11.0.0
|
||||||
rxjs: ^7.1.0
|
rxjs: ^7.1.0
|
||||||
|
|
||||||
'@nestjs/schedule@6.1.1':
|
|
||||||
resolution: {integrity: sha512-kQl1RRgi02GJ0uaUGCrXHCcwISsCsJDciCKe38ykJZgnAeeoeVWs8luWtBo4AqAAXm4nS5K8RlV0smHUJ4+2FA==}
|
|
||||||
peerDependencies:
|
|
||||||
'@nestjs/common': ^10.0.0 || ^11.0.0
|
|
||||||
'@nestjs/core': ^10.0.0 || ^11.0.0
|
|
||||||
|
|
||||||
'@nestjs/schematics@11.0.9':
|
'@nestjs/schematics@11.0.9':
|
||||||
resolution: {integrity: sha512-0NfPbPlEaGwIT8/TCThxLzrlz3yzDNkfRNpbL7FiplKq3w4qXpJg0JYwqgMEJnLQZm3L/L/5XjoyfJHUO3qX9g==}
|
resolution: {integrity: sha512-0NfPbPlEaGwIT8/TCThxLzrlz3yzDNkfRNpbL7FiplKq3w4qXpJg0JYwqgMEJnLQZm3L/L/5XjoyfJHUO3qX9g==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@@ -3253,9 +3241,6 @@ packages:
|
|||||||
'@types/linkify-it@5.0.0':
|
'@types/linkify-it@5.0.0':
|
||||||
resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
|
resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
|
||||||
|
|
||||||
'@types/luxon@3.7.1':
|
|
||||||
resolution: {integrity: sha512-H3iskjFIAn5SlJU7OuxUmTEpebK6TKB8rxZShDslBMZJ5u9S//KM1sbdAisiSrqwLQncVjnpi2OK2J51h+4lsg==}
|
|
||||||
|
|
||||||
'@types/markdown-it@13.0.9':
|
'@types/markdown-it@13.0.9':
|
||||||
resolution: {integrity: sha512-1XPwR0+MgXLWfTn9gCsZ55AHOKW1WN+P9vr0PaQh5aerR9LLQXUbjfEAFhjmEmyoYFWAyuN2Mqkn40MZ4ukjBw==}
|
resolution: {integrity: sha512-1XPwR0+MgXLWfTn9gCsZ55AHOKW1WN+P9vr0PaQh5aerR9LLQXUbjfEAFhjmEmyoYFWAyuN2Mqkn40MZ4ukjBw==}
|
||||||
|
|
||||||
@@ -4266,10 +4251,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==}
|
resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==}
|
||||||
engines: {node: '>=12.0.0'}
|
engines: {node: '>=12.0.0'}
|
||||||
|
|
||||||
cron@4.4.0:
|
|
||||||
resolution: {integrity: sha512-fkdfq+b+AHI4cKdhZlppHveI/mgz2qpiYxcm+t5E5TsxX7QrLS1VE0+7GENEk9z0EeGPcpSciGv6ez24duWhwQ==}
|
|
||||||
engines: {node: '>=18.x'}
|
|
||||||
|
|
||||||
cross-spawn@7.0.6:
|
cross-spawn@7.0.6:
|
||||||
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
|
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
|
||||||
engines: {node: '>= 8'}
|
engines: {node: '>= 8'}
|
||||||
@@ -5213,10 +5194,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
|
resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
|
||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
|
|
||||||
helmet@8.1.0:
|
|
||||||
resolution: {integrity: sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==}
|
|
||||||
engines: {node: '>=18.0.0'}
|
|
||||||
|
|
||||||
highlight.js@11.11.1:
|
highlight.js@11.11.1:
|
||||||
resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
|
resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
|
||||||
engines: {node: '>=12.0.0'}
|
engines: {node: '>=12.0.0'}
|
||||||
@@ -8886,12 +8863,6 @@ snapshots:
|
|||||||
- supports-color
|
- supports-color
|
||||||
- utf-8-validate
|
- utf-8-validate
|
||||||
|
|
||||||
'@nestjs/schedule@6.1.1(@nestjs/common@11.1.12(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.12)':
|
|
||||||
dependencies:
|
|
||||||
'@nestjs/common': 11.1.12(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2)
|
|
||||||
'@nestjs/core': 11.1.12(@nestjs/common@11.1.12(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/platform-express@11.1.12)(@nestjs/websockets@11.1.12)(reflect-metadata@0.2.2)(rxjs@7.8.2)
|
|
||||||
cron: 4.4.0
|
|
||||||
|
|
||||||
'@nestjs/schematics@11.0.9(chokidar@4.0.3)(typescript@5.9.3)':
|
'@nestjs/schematics@11.0.9(chokidar@4.0.3)(typescript@5.9.3)':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@angular-devkit/core': 19.2.17(chokidar@4.0.3)
|
'@angular-devkit/core': 19.2.17(chokidar@4.0.3)
|
||||||
@@ -10622,8 +10593,6 @@ snapshots:
|
|||||||
|
|
||||||
'@types/linkify-it@5.0.0': {}
|
'@types/linkify-it@5.0.0': {}
|
||||||
|
|
||||||
'@types/luxon@3.7.1': {}
|
|
||||||
|
|
||||||
'@types/markdown-it@13.0.9':
|
'@types/markdown-it@13.0.9':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/linkify-it': 3.0.5
|
'@types/linkify-it': 3.0.5
|
||||||
@@ -11818,11 +11787,6 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
luxon: 3.7.2
|
luxon: 3.7.2
|
||||||
|
|
||||||
cron@4.4.0:
|
|
||||||
dependencies:
|
|
||||||
'@types/luxon': 3.7.1
|
|
||||||
luxon: 3.7.2
|
|
||||||
|
|
||||||
cross-spawn@7.0.6:
|
cross-spawn@7.0.6:
|
||||||
dependencies:
|
dependencies:
|
||||||
path-key: 3.1.1
|
path-key: 3.1.1
|
||||||
@@ -12822,8 +12786,6 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
function-bind: 1.1.2
|
function-bind: 1.1.2
|
||||||
|
|
||||||
helmet@8.1.0: {}
|
|
||||||
|
|
||||||
highlight.js@11.11.1: {}
|
highlight.js@11.11.1: {}
|
||||||
|
|
||||||
html-encoding-sniffer@4.0.0:
|
html-encoding-sniffer@4.0.0:
|
||||||
|
|||||||
Reference in New Issue
Block a user