Compare commits

..

1 Commits

Author SHA1 Message Date
ffe428a9e9 fix: add tag input to file manager create entry form
Some checks failed
ci/woodpecker/push/ci Pipeline failed
2026-03-01 15:25:44 -06:00
31 changed files with 507 additions and 1458 deletions

2
.npmrc
View File

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

View File

@@ -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

View File

@@ -32,7 +32,6 @@ variables:
- &node_image "node:24-alpine"
- &install_deps |
corepack enable
pnpm config set store-dir /root/.local/share/pnpm/store
pnpm install --frozen-lockfile
- &use_deps |
corepack enable
@@ -169,7 +168,7 @@ steps:
elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-api:latest"
fi
/kaniko/executor --context . --dockerfile apps/api/Dockerfile --snapshot-mode=redo --cache=true --cache-repo git.mosaicstack.dev/mosaic/stack-api/cache $DESTINATIONS
/kaniko/executor --context . --dockerfile apps/api/Dockerfile --snapshot-mode=redo $DESTINATIONS
when:
- branch: [main]
event: [push, manual, tag]
@@ -194,7 +193,7 @@ steps:
elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-orchestrator:latest"
fi
/kaniko/executor --context . --dockerfile apps/orchestrator/Dockerfile --snapshot-mode=redo --cache=true --cache-repo git.mosaicstack.dev/mosaic/stack-orchestrator/cache $DESTINATIONS
/kaniko/executor --context . --dockerfile apps/orchestrator/Dockerfile --snapshot-mode=redo $DESTINATIONS
when:
- branch: [main]
event: [push, manual, tag]
@@ -219,7 +218,7 @@ steps:
elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
DESTINATIONS="--destination git.mosaicstack.dev/mosaic/stack-web:latest"
fi
/kaniko/executor --context . --dockerfile apps/web/Dockerfile --snapshot-mode=redo --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:
- branch: [main]
event: [push, manual, tag]

View File

@@ -1,7 +1,7 @@
# Base image for all stages
# Uses Debian slim (glibc) instead of Alpine (musl) because native Node.js addons
# (matrix-sdk-crypto-nodejs, Prisma engines) require glibc-compatible binaries.
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS base
FROM node:24-slim AS base
# Install pnpm globally
RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
@@ -19,9 +19,9 @@ COPY turbo.json ./
FROM base AS deps
# Install build tools for native addons (node-pty requires node-gyp compilation)
# 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 \
python3 make g++ \
python3 make g++ openssl \
&& rm -rf /var/lib/apt/lists/*
# Copy all package.json files for workspace resolution
@@ -61,14 +61,19 @@ RUN pnpm turbo build --filter=@mosaic/api --force
# ======================
# 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)
# - 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 \
# - openssl: Prisma engine detection requires libssl
# - No build tools needed here — native addons are compiled in the deps stage
RUN apt-get update && apt-get install -y --no-install-recommends openssl \
&& rm -rf /var/lib/apt/lists/* \
&& rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
&& chmod 755 /usr/local/bin/dumb-init \
&& groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nestjs
WORKDIR /app

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -29,25 +29,6 @@ export class WorkspacesController {
return this.workspacesService.getUserWorkspaces(user.id);
}
/**
* GET /api/workspaces/:workspaceId/stats
* Returns member, project, and domain counts for a workspace.
*/
@Get(":workspaceId/stats")
async getStats(@Param("workspaceId") workspaceId: string) {
return this.workspacesService.getStats(workspaceId);
}
/**
* GET /api/workspaces/:workspaceId/members
* Returns the list of members for a workspace.
*/
@Get(":workspaceId/members")
@UseGuards(WorkspaceGuard)
async getMembers(@Param("workspaceId") workspaceId: string) {
return this.workspacesService.getMembers(workspaceId);
}
/**
* POST /api/workspaces/:workspaceId/members
* Add a member to a workspace with the specified role.

View File

@@ -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(
actorRole: WorkspaceMemberRole,
requestedRole: WorkspaceMemberRole
@@ -354,15 +342,4 @@ export class WorkspacesService {
private isUniqueConstraintError(error: unknown): error is Prisma.PrismaClientKnownRequestError {
return error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2002";
}
async getStats(
workspaceId: string
): Promise<{ memberCount: number; projectCount: number; domainCount: number }> {
const [memberCount, projectCount, domainCount] = await Promise.all([
this.prisma.workspaceMember.count({ where: { workspaceId } }),
this.prisma.project.count({ where: { workspaceId } }),
this.prisma.domain.count({ where: { workspaceId } }),
]);
return { memberCount, projectCount, domainCount };
}
}

View File

@@ -1,6 +1,6 @@
# Base image for all stages
# 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
RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
@@ -54,7 +54,7 @@ RUN find ./apps/orchestrator/dist \( -name '*.spec.js' -o -name '*.spec.js.map'
# ======================
# Production stage
# ======================
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS production
FROM node:24-slim AS production
# Add metadata labels
LABEL maintainer="mosaic-team@mosaicstack.dev"
@@ -65,12 +65,13 @@ LABEL org.opencontainers.image.vendor="Mosaic Stack"
LABEL org.opencontainers.image.title="Mosaic Orchestrator"
LABEL org.opencontainers.image.description="Agent orchestration service for Mosaic Stack"
# 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)
# - Remove npm/npx to reduce image size (not used in production)
# - Create non-root user
RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
&& chmod 755 /usr/local/bin/dumb-init \
&& groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nestjs
WORKDIR /app

View File

@@ -1,7 +1,7 @@
# Base image for all stages
# Uses Debian slim (glibc) for consistency with API/orchestrator and to prevent
# future native addon compatibility issues with Alpine's musl libc.
FROM git.mosaicstack.dev/mosaic/node-base:24-slim AS base
FROM node:24-slim AS base
# Install pnpm globally
RUN corepack enable && corepack prepare pnpm@10.27.0 --activate
@@ -87,14 +87,15 @@ RUN mkdir -p ./apps/web/public
# ======================
# 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)
# - Remove npm/npx to reduce image size (not used in production)
# - Create non-root user
RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx \
&& chmod 755 /usr/local/bin/dumb-init \
&& groupadd -g 1001 nodejs && useradd -m -u 1001 -g nodejs nextjs
WORKDIR /app

View File

@@ -26,7 +26,11 @@ import {
DialogFooter,
} from "@/components/ui/dialog";
import { fetchEntries, createEntry, deleteEntry, fetchTags } from "@/lib/api/knowledge";
import type { EntriesResponse, CreateEntryData, EntryFilters } from "@/lib/api/knowledge";
import type {
EntriesResponse,
CreateEntryData,
EntryFilters,
} from "@/lib/api/knowledge";
/* ---------------------------------------------------------------------------
Helpers
@@ -435,7 +439,7 @@ function CreateEntryDialog({
.then((tags) => {
setAvailableTags(tags);
})
.catch((err: unknown) => {
.catch((err) => {
console.error("Failed to load tags:", err);
});
}
@@ -726,9 +730,7 @@ function CreateEntryDialog({
}}
onBlur={() => {
// Delay to allow click on suggestion
setTimeout(() => {
setShowSuggestions(false);
}, 150);
setTimeout(() => setShowSuggestions(false), 150);
}}
onFocus={() => {
if (tagInput.length > 0) setShowSuggestions(true);

View File

@@ -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();
});
});

View File

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

View File

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

View File

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

View File

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

View File

@@ -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>
);
}

View File

@@ -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;
}

View File

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

View File

@@ -18,4 +18,3 @@ export * from "./projects";
export * from "./workspaces";
export * from "./admin";
export * from "./fleet-settings";
export * from "./activity";

View File

@@ -95,7 +95,6 @@ export interface CreateProjectDto {
startDate?: string;
endDate?: string;
color?: string;
domainId?: string;
metadata?: Record<string, unknown>;
}
@@ -109,7 +108,6 @@ export interface UpdateProjectDto {
startDate?: string | null;
endDate?: string | null;
color?: string | null;
domainId?: string | null;
metadata?: Record<string, unknown>;
}

View File

@@ -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

9
pnpm-lock.yaml generated
View File

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