Compare commits
1 Commits
ci/pnpm-ca
...
fix/ci-lin
| Author | SHA1 | Date | |
|---|---|---|---|
| 240566646f |
@@ -32,7 +32,6 @@ variables:
|
|||||||
- &node_image "node:24-alpine"
|
- &node_image "node:24-alpine"
|
||||||
- &install_deps |
|
- &install_deps |
|
||||||
corepack enable
|
corepack enable
|
||||||
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
|
||||||
|
|||||||
@@ -62,7 +62,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",
|
||||||
|
|||||||
@@ -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: {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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,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({
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 @@
|
|||||||
"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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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 */}
|
||||||
|
|||||||
@@ -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,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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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") {
|
||||||
|
|||||||
@@ -18,4 +18,3 @@ export * from "./projects";
|
|||||||
export * from "./workspaces";
|
export * from "./workspaces";
|
||||||
export * from "./admin";
|
export * from "./admin";
|
||||||
export * from "./fleet-settings";
|
export * from "./fleet-settings";
|
||||||
export * from "./activity";
|
|
||||||
|
|||||||
@@ -95,7 +95,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 +108,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>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
9
pnpm-lock.yaml
generated
9
pnpm-lock.yaml
generated
@@ -180,9 +180,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
|
||||||
@@ -5213,10 +5210,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'}
|
||||||
@@ -12822,8 +12815,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