feat: inline add-task form in Kanban columns

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

apps/api/src/activity/activity.controller.ts

@@ -1,7 +1,7 @@
 import { Controller, Get, Query, Param, UseGuards } from "@nestjs/common";
 import { ActivityService } from "./activity.service";
 import { EntityType } from "@prisma/client";
-import type { QueryActivityLogDto } from "./dto";
+import { QueryActivityLogDto } from "./dto";
 import { AuthGuard } from "../auth/guards/auth.guard";
 import { WorkspaceGuard, PermissionGuard } from "../common/guards";
 import { Workspace, Permission, RequirePermission } from "../common/decorators";

apps/api/src/activity/activity.service.ts

@@ -117,12 +117,13 @@ export class ActivityService {
   /**
    * 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({
-      where: {
+      where,
-        id,
-        workspaceId,
-      },
       include: {
         user: {
           select: {

apps/api/src/activity/interceptors/activity-logging.interceptor.ts

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

apps/api/src/activity/interfaces/activity.interface.ts

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

apps/api/src/common/guards/csrf.guard.ts

@@ -111,14 +111,9 @@ export class CsrfGuard implements CanActivate {
 
         throw new ForbiddenException("CSRF token not bound to session");
       }
-    } else {
-      this.logger.debug({
-        event: "CSRF_SKIP_SESSION_BINDING",
-        method: request.method,
-        path: request.path,
-        reason: "User context not yet available (global guard runs before AuthGuard)",
-      });
     }
+    // Note: when userId is absent, the double-submit cookie check above is
+    // sufficient CSRF protection. AuthGuard populates request.user afterward.
 
     return true;
   }

apps/api/src/dashboard/dashboard.controller.ts

@@ -3,7 +3,7 @@ import { DashboardService } from "./dashboard.service";
 import { AuthGuard } from "../auth/guards/auth.guard";
 import { WorkspaceGuard, PermissionGuard } from "../common/guards";
 import { Workspace, Permission, RequirePermission } from "../common/decorators";
-import type { DashboardSummaryDto } from "./dto";
+import { DashboardSummaryDto } from "./dto";
 
 /**
  * Controller for dashboard endpoints.

apps/api/src/fleet-settings/fleet-settings.controller.ts

@@ -15,7 +15,7 @@ import type { AuthUser } from "@mosaic/shared";
 import { CurrentUser } from "../auth/decorators/current-user.decorator";
 import { AdminGuard } from "../auth/guards/admin.guard";
 import { AuthGuard } from "../auth/guards/auth.guard";
-import type {
+import {
   CreateProviderDto,
   ResetPasswordDto,
   UpdateAgentConfigDto,

apps/api/src/llm-usage/llm-usage.controller.ts

@@ -1,7 +1,7 @@
 import { Controller, Get, Param, Query } from "@nestjs/common";
 import type { LlmUsageLog } from "@prisma/client";
 import { LlmUsageService } from "./llm-usage.service";
-import type { UsageAnalyticsQueryDto, UsageAnalyticsResponseDto } from "./dto";
+import { UsageAnalyticsQueryDto, UsageAnalyticsResponseDto } from "./dto";
 
 /**
  * LLM Usage Controller

apps/api/src/speech/speech.gateway.ts

@@ -66,7 +66,9 @@ interface StartTranscriptionPayload {
 @WSGateway({
   namespace: "/speech",
   cors: {
-    origin: process.env.WEB_URL ?? "http://localhost:3000",
+    origin: (process.env.TRUSTED_ORIGINS ?? process.env.WEB_URL ?? "http://localhost:3000")
+      .split(",")
+      .map((s) => s.trim()),
     credentials: true,
   },
 })

apps/api/src/terminal/terminal.gateway.ts

@@ -63,7 +63,9 @@ interface AuthenticatedSocket extends Socket {
 @WSGateway({
   namespace: "/terminal",
   cors: {
-    origin: process.env.WEB_URL ?? "http://localhost:3000",
+    origin: (process.env.TRUSTED_ORIGINS ?? process.env.WEB_URL ?? "http://localhost:3000")
+      .split(",")
+      .map((s) => s.trim()),
     credentials: true,
   },
 })

apps/api/src/widgets/widgets.controller.ts

@@ -4,7 +4,7 @@ import { WidgetsService } from "./widgets.service";
 import { WidgetDataService } from "./widget-data.service";
 import { AuthGuard } from "../auth/guards/auth.guard";
 import { WorkspaceGuard } from "../common/guards/workspace.guard";
-import type { StatCardQueryDto, ChartQueryDto, ListQueryDto, CalendarPreviewQueryDto } from "./dto";
+import { StatCardQueryDto, ChartQueryDto, ListQueryDto, CalendarPreviewQueryDto } from "./dto";
 import type { RequestWithWorkspace } from "../common/types/user.types";
 
 /**

apps/api/src/workspaces/workspaces.controller.ts

@@ -6,7 +6,7 @@ import { WorkspaceGuard, PermissionGuard } from "../common/guards";
 import { Permission, RequirePermission } from "../common/decorators";
 import type { WorkspaceMember } from "@prisma/client";
 import type { AuthenticatedUser } from "../common/types/user.types";
-import type { AddMemberDto, UpdateMemberRoleDto, WorkspaceResponseDto } from "./dto";
+import { AddMemberDto, UpdateMemberRoleDto, WorkspaceResponseDto } from "./dto";
 
 /**
  * User-scoped workspace operations.
@@ -29,6 +29,25 @@ export class WorkspacesController {
     return this.workspacesService.getUserWorkspaces(user.id);
   }
 
+  /**
+   * GET /api/workspaces/:workspaceId/stats
+   * Returns member, project, and domain counts for a workspace.
+   */
+  @Get(":workspaceId/stats")
+  async getStats(@Param("workspaceId") workspaceId: string) {
+    return this.workspacesService.getStats(workspaceId);
+  }
+
+  /**
+   * GET /api/workspaces/:workspaceId/members
+   * Returns the list of members for a workspace.
+   */
+  @Get(":workspaceId/members")
+  @UseGuards(WorkspaceGuard)
+  async getMembers(@Param("workspaceId") workspaceId: string) {
+    return this.workspacesService.getMembers(workspaceId);
+  }
+
   /**
    * POST /api/workspaces/:workspaceId/members
    * Add a member to a workspace with the specified role.

apps/api/src/workspaces/workspaces.service.ts

@@ -321,6 +321,18 @@ export class WorkspacesService {
     });
   }
 
+  /**
+   * Get members of a workspace.
+   */
+  async getMembers(workspaceId: string) {
+    return this.prisma.workspaceMember.findMany({
+      where: { workspaceId },
+      include: {
+        user: { select: { id: true, name: true, email: true, createdAt: true } },
+      },
+      orderBy: { joinedAt: "asc" },
+    });
+  }
   private assertCanAssignRole(
     actorRole: WorkspaceMemberRole,
     requestedRole: WorkspaceMemberRole
@@ -342,4 +354,15 @@ export class WorkspacesService {
   private isUniqueConstraintError(error: unknown): error is Prisma.PrismaClientKnownRequestError {
     return error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2002";
   }
+
+  async getStats(
+    workspaceId: string
+  ): Promise<{ memberCount: number; projectCount: number; domainCount: number }> {
+    const [memberCount, projectCount, domainCount] = await Promise.all([
+      this.prisma.workspaceMember.count({ where: { workspaceId } }),
+      this.prisma.project.count({ where: { workspaceId } }),
+      this.prisma.domain.count({ where: { workspaceId } }),
+    ]);
+    return { memberCount, projectCount, domainCount };
+  }
 }

apps/web/src/app/(authenticated)/files/page.tsx

@@ -13,7 +13,7 @@ import {
   ChevronUp,
   ChevronDown,
 } from "lucide-react";
-import type { KnowledgeEntryWithTags } from "@mosaic/shared";
+import type { KnowledgeEntryWithTags, KnowledgeTag } from "@mosaic/shared";
 import { EntryStatus, Visibility } from "@mosaic/shared";
 
 import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
@@ -25,7 +25,7 @@ import {
   DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
-import { fetchEntries, createEntry, deleteEntry } from "@/lib/api/knowledge";
+import { fetchEntries, createEntry, deleteEntry, fetchTags } from "@/lib/api/knowledge";
 import type { EntriesResponse, CreateEntryData, EntryFilters } from "@/lib/api/knowledge";
 
 /* ---------------------------------------------------------------------------
@@ -421,6 +421,26 @@ function CreateEntryDialog({
   const [visibility, setVisibility] = useState<Visibility>(Visibility.PRIVATE);
   const [formError, setFormError] = useState<string | null>(null);
 
+  // Tag state
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [tagInput, setTagInput] = useState("");
+  const [availableTags, setAvailableTags] = useState<KnowledgeTag[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const tagInputRef = useRef<HTMLInputElement>(null);
+
+  // Load available tags when dialog opens
+  useEffect(() => {
+    if (open) {
+      fetchTags()
+        .then((tags) => {
+          setAvailableTags(tags);
+        })
+        .catch((err: unknown) => {
+          console.error("Failed to load tags:", err);
+        });
+    }
+  }, [open]);
+
   function resetForm(): void {
     setTitle("");
     setContent("");
@@ -428,6 +448,9 @@ function CreateEntryDialog({
     setStatus(EntryStatus.DRAFT);
     setVisibility(Visibility.PRIVATE);
     setFormError(null);
+    setSelectedTags([]);
+    setTagInput("");
+    setShowSuggestions(false);
   }
 
   async function handleSubmit(e: SyntheticEvent): Promise<void> {
@@ -452,6 +475,7 @@ function CreateEntryDialog({
         content: trimmedContent,
         status,
         visibility,
+        tags: selectedTags,
       };
       const trimmedSummary = summary.trim();
       if (trimmedSummary) {
@@ -610,6 +634,212 @@ function CreateEntryDialog({
               />
             </div>
 
+            {/* Tags */}
+            <div style={{ marginBottom: 16 }}>
+              <label
+                htmlFor="entry-tags"
+                style={{
+                  display: "block",
+                  marginBottom: 6,
+                  fontSize: "0.85rem",
+                  fontWeight: 500,
+                  color: "var(--text-2)",
+                }}
+              >
+                Tags
+              </label>
+              <div
+                style={{
+                  width: "100%",
+                  minHeight: 38,
+                  padding: "6px 8px",
+                  background: "var(--bg)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "var(--r)",
+                  boxSizing: "border-box",
+                  display: "flex",
+                  flexWrap: "wrap",
+                  gap: 4,
+                  alignItems: "center",
+                  position: "relative",
+                }}
+              >
+                {/* Selected tag chips */}
+                {selectedTags.map((tag) => (
+                  <span
+                    key={tag}
+                    style={{
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 4,
+                      padding: "2px 8px",
+                      background: "var(--surface-2)",
+                      border: "1px solid var(--border)",
+                      borderRadius: "var(--r-sm)",
+                      fontSize: "0.75rem",
+                      color: "var(--text)",
+                    }}
+                  >
+                    {tag}
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setSelectedTags((prev) => prev.filter((t) => t !== tag));
+                      }}
+                      style={{
+                        background: "transparent",
+                        border: "none",
+                        padding: 0,
+                        cursor: "pointer",
+                        color: "var(--muted)",
+                        display: "flex",
+                        alignItems: "center",
+                        lineHeight: 1,
+                      }}
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+                {/* Tag text input */}
+                <input
+                  ref={tagInputRef}
+                  id="entry-tags"
+                  type="text"
+                  value={tagInput}
+                  onChange={(e) => {
+                    setTagInput(e.target.value);
+                    setShowSuggestions(e.target.value.length > 0);
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === ",") {
+                      e.preventDefault();
+                      const trimmed = tagInput.trim();
+                      if (trimmed && !selectedTags.includes(trimmed)) {
+                        setSelectedTags((prev) => [...prev, trimmed]);
+                        setTagInput("");
+                      }
+                    }
+                    if (e.key === "Backspace" && tagInput === "" && selectedTags.length > 0) {
+                      setSelectedTags((prev) => prev.slice(0, -1));
+                    }
+                  }}
+                  onBlur={() => {
+                    // Delay to allow click on suggestion
+                    setTimeout(() => {
+                      setShowSuggestions(false);
+                    }, 150);
+                  }}
+                  onFocus={() => {
+                    if (tagInput.length > 0) setShowSuggestions(true);
+                  }}
+                  placeholder={selectedTags.length === 0 ? "Add tags..." : ""}
+                  style={{
+                    flex: 1,
+                    minWidth: 80,
+                    border: "none",
+                    background: "transparent",
+                    color: "var(--text)",
+                    fontSize: "0.85rem",
+                    outline: "none",
+                    padding: "2px 0",
+                  }}
+                />
+                {/* Autocomplete suggestions */}
+                {showSuggestions && (
+                  <div
+                    style={{
+                      position: "absolute",
+                      top: "100%",
+                      left: 0,
+                      right: 0,
+                      marginTop: 4,
+                      background: "var(--surface)",
+                      border: "1px solid var(--border)",
+                      borderRadius: "var(--r)",
+                      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                      maxHeight: 150,
+                      overflowY: "auto",
+                      zIndex: 10,
+                    }}
+                  >
+                    {availableTags
+                      .filter(
+                        (t) =>
+                          t.name.toLowerCase().includes(tagInput.toLowerCase()) &&
+                          !selectedTags.includes(t.name)
+                      )
+                      .slice(0, 5)
+                      .map((tag) => (
+                        <button
+                          key={tag.id}
+                          type="button"
+                          onClick={() => {
+                            if (!selectedTags.includes(tag.name)) {
+                              setSelectedTags((prev) => [...prev, tag.name]);
+                            }
+                            setTagInput("");
+                            setShowSuggestions(false);
+                            tagInputRef.current?.focus();
+                          }}
+                          style={{
+                            width: "100%",
+                            padding: "8px 12px",
+                            background: "transparent",
+                            border: "none",
+                            textAlign: "left",
+                            cursor: "pointer",
+                            color: "var(--text)",
+                            fontSize: "0.85rem",
+                          }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.background = "var(--surface-2)";
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.background = "transparent";
+                          }}
+                        >
+                          {tag.name}
+                        </button>
+                      ))}
+                    {availableTags.filter(
+                      (t) =>
+                        t.name.toLowerCase().includes(tagInput.toLowerCase()) &&
+                        !selectedTags.includes(t.name)
+                    ).length === 0 &&
+                      tagInput.trim() &&
+                      !selectedTags.includes(tagInput.trim()) && (
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const trimmed = tagInput.trim();
+                            if (trimmed && !selectedTags.includes(trimmed)) {
+                              setSelectedTags((prev) => [...prev, trimmed]);
+                            }
+                            setTagInput("");
+                            setShowSuggestions(false);
+                            tagInputRef.current?.focus();
+                          }}
+                          style={{
+                            width: "100%",
+                            padding: "8px 12px",
+                            background: "transparent",
+                            border: "none",
+                            textAlign: "left",
+                            cursor: "pointer",
+                            color: "var(--muted)",
+                            fontSize: "0.85rem",
+                            fontStyle: "italic",
+                          }}
+                        >
+                          Create "{tagInput.trim()}"
+                        </button>
+                      )}
+                  </div>
+                )}
+              </div>
+            </div>
+
             {/* Status + Visibility row */}
             <div style={{ display: "flex", gap: 16, marginBottom: 16 }}>
               <div style={{ flex: 1 }}>

apps/web/src/app/(authenticated)/kanban/page.test.tsx

@@ -0,0 +1,188 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { Task } from "@mosaic/shared";
+import { TaskPriority, TaskStatus } from "@mosaic/shared";
+import KanbanPage from "./page";
+
+const mockReplace = vi.fn();
+let mockSearchParams = new URLSearchParams();
+
+vi.mock("next/navigation", () => ({
+  useRouter: (): { replace: typeof mockReplace } => ({ replace: mockReplace }),
+  useSearchParams: (): URLSearchParams => mockSearchParams,
+}));
+
+vi.mock("@hello-pangea/dnd", () => ({
+  DragDropContext: ({ children }: { children: React.ReactNode }): React.JSX.Element => (
+    <div data-testid="mock-dnd-context">{children}</div>
+  ),
+  Droppable: ({
+    children,
+    droppableId,
+  }: {
+    children: (provided: {
+      innerRef: (el: HTMLElement | null) => void;
+      droppableProps: Record<string, never>;
+      placeholder: React.ReactNode;
+    }) => React.ReactNode;
+    droppableId: string;
+  }): React.JSX.Element => (
+    <div data-testid={`mock-droppable-${droppableId}`}>
+      {children({
+        innerRef: () => {
+          /* noop */
+        },
+        droppableProps: {},
+        placeholder: null,
+      })}
+    </div>
+  ),
+  Draggable: ({
+    children,
+    draggableId,
+  }: {
+    children: (
+      provided: {
+        innerRef: (el: HTMLElement | null) => void;
+        draggableProps: { style: Record<string, string> };
+        dragHandleProps: Record<string, string>;
+      },
+      snapshot: { isDragging: boolean }
+    ) => React.ReactNode;
+    draggableId: string;
+    index: number;
+  }): React.JSX.Element => (
+    <div data-testid={`mock-draggable-${draggableId}`}>
+      {children(
+        {
+          innerRef: () => {
+            /* noop */
+          },
+          draggableProps: { style: {} },
+          dragHandleProps: {},
+        },
+        { isDragging: false }
+      )}
+    </div>
+  ),
+}));
+
+vi.mock("@/components/ui/MosaicSpinner", () => ({
+  MosaicSpinner: ({ label }: { label?: string }): React.JSX.Element => (
+    <div data-testid="mosaic-spinner">{label ?? "Loading..."}</div>
+  ),
+}));
+
+const mockUseWorkspaceId = vi.fn<() => string | null>();
+vi.mock("@/lib/hooks", () => ({
+  useWorkspaceId: (): string | null => mockUseWorkspaceId(),
+}));
+
+const mockFetchTasks = vi.fn<() => Promise<Task[]>>();
+const mockUpdateTask = vi.fn<() => Promise<unknown>>();
+const mockCreateTask = vi.fn<() => Promise<Task>>();
+vi.mock("@/lib/api/tasks", () => ({
+  fetchTasks: (...args: unknown[]): Promise<Task[]> => mockFetchTasks(...(args as [])),
+  updateTask: (...args: unknown[]): Promise<unknown> => mockUpdateTask(...(args as [])),
+  createTask: (...args: unknown[]): Promise<Task> => mockCreateTask(...(args as [])),
+}));
+
+const mockFetchProjects = vi.fn<() => Promise<unknown[]>>();
+vi.mock("@/lib/api/projects", () => ({
+  fetchProjects: (...args: unknown[]): Promise<unknown[]> => mockFetchProjects(...(args as [])),
+}));
+
+const createdTask: Task = {
+  id: "task-new-1",
+  title: "Ship Kanban add task flow",
+  description: null,
+  status: TaskStatus.NOT_STARTED,
+  priority: TaskPriority.MEDIUM,
+  dueDate: null,
+  creatorId: "user-1",
+  assigneeId: null,
+  workspaceId: "ws-1",
+  projectId: "project-42",
+  parentId: null,
+  sortOrder: 0,
+  metadata: {},
+  completedAt: null,
+  createdAt: new Date("2026-03-01"),
+  updatedAt: new Date("2026-03-01"),
+};
+
+describe("KanbanPage add task flow", (): void => {
+  beforeEach((): void => {
+    vi.clearAllMocks();
+    mockSearchParams = new URLSearchParams("project=project-42");
+    mockUseWorkspaceId.mockReturnValue("ws-1");
+    mockFetchTasks.mockResolvedValue([]);
+    mockFetchProjects.mockResolvedValue([]);
+    mockCreateTask.mockResolvedValue(createdTask);
+  });
+
+  it("opens add-task form in a column and creates a task via API", async (): Promise<void> => {
+    const user = userEvent.setup();
+
+    render(<KanbanPage />);
+
+    await waitFor((): void => {
+      expect(screen.getByText("Kanban Board")).toBeInTheDocument();
+    });
+
+    // Click the "+ Add task" button in the To Do column
+    const addTaskButtons = screen.getAllByRole("button", { name: /\+ Add task/i });
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    await user.click(addTaskButtons[0]!); // First column is "To Do"
+
+    // Type in the title input
+    const titleInput = screen.getByPlaceholderText("Task title...");
+    await user.type(titleInput, createdTask.title);
+
+    // Click the Add button
+    await user.click(screen.getByRole("button", { name: /✓ Add/i }));
+
+    await waitFor((): void => {
+      expect(mockCreateTask).toHaveBeenCalledWith(
+        expect.objectContaining({
+          title: createdTask.title,
+          status: TaskStatus.NOT_STARTED,
+          projectId: "project-42",
+        }),
+        "ws-1"
+      );
+    });
+  });
+
+  it("cancels add-task form when pressing Escape", async (): Promise<void> => {
+    const user = userEvent.setup();
+
+    render(<KanbanPage />);
+
+    await waitFor((): void => {
+      expect(screen.getByText("Kanban Board")).toBeInTheDocument();
+    });
+
+    // Click the "+ Add task" button
+    const addTaskButtons = screen.getAllByRole("button", { name: /\+ Add task/i });
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    await user.click(addTaskButtons[0]!);
+
+    // Type in the title input
+    const titleInput = screen.getByPlaceholderText("Task title...");
+    await user.type(titleInput, "Test task");
+
+    // Press Escape to cancel
+    await user.keyboard("{Escape}");
+
+    // Form should be closed, back to "+ Add task" button
+    await waitFor((): void => {
+      const buttons = screen.getAllByRole("button", { name: /\+ Add task/i });
+      expect(buttons.length).toBe(5); // One per column
+    });
+
+    // Should not have called createTask
+    expect(mockCreateTask).not.toHaveBeenCalled();
+  });
+});

apps/web/src/app/(authenticated)/kanban/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback, useMemo } from "react";
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import type { ReactElement } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
@@ -12,7 +12,7 @@ import type {
 } from "@hello-pangea/dnd";
 
 import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
-import { fetchTasks, updateTask, type TaskFilters } from "@/lib/api/tasks";
+import { fetchTasks, updateTask, createTask, type TaskFilters } from "@/lib/api/tasks";
 import { fetchProjects, type Project } from "@/lib/api/projects";
 import { useWorkspaceId } from "@/lib/hooks";
 import type { Task } from "@mosaic/shared";
@@ -184,9 +184,47 @@ function TaskCard({ task, provided, snapshot, columnAccent }: TaskCardProps): Re
 interface KanbanColumnProps {
   config: ColumnConfig;
   tasks: Task[];
+  onAddTask: (status: TaskStatus, title: string) => Promise<void>;
 }
 
-function KanbanColumn({ config, tasks }: KanbanColumnProps): ReactElement {
+function KanbanColumn({ config, tasks, onAddTask }: 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());
+      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 (
     <div
       style={{
@@ -268,6 +306,89 @@ function KanbanColumn({ config, tasks }: KanbanColumnProps): ReactElement {
           </div>
         )}
       </Droppable>
+
+      {/* Add Task Form */}
+      {!showAddForm ? (
+        <button
+          type="button"
+          onClick={() => {
+            setShowAddForm(true);
+          }}
+          style={{
+            padding: "10px 16px",
+            border: "none",
+            background: "transparent",
+            color: "var(--muted)",
+            fontSize: "0.8rem",
+            cursor: "pointer",
+            textAlign: "left",
+            transition: "color 0.15s",
+            width: "100%",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = "var(--text)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = "var(--muted)";
+          }}
+        >
+          + Add task
+        </button>
+      ) : (
+        <form
+          onSubmit={handleSubmit}
+          style={{ padding: "8px 12px 12px", borderTop: "1px solid var(--border)" }}
+        >
+          <input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={(e) => {
+              setInputValue(e.target.value);
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder="Task title..."
+            disabled={isSubmitting}
+            style={{
+              width: "100%",
+              padding: "8px 10px",
+              borderRadius: "var(--r)",
+              border: `1px solid ${inputValue ? "var(--primary)" : "var(--border)"}`,
+              background: "var(--surface)",
+              color: "var(--text)",
+              fontSize: "0.85rem",
+              outline: "none",
+              opacity: isSubmitting ? 0.6 : 1,
+            }}
+            autoFocus
+          />
+          <div style={{ 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>
   );
 }
@@ -621,6 +742,24 @@ export default function KanbanPage(): ReactElement {
     void loadTasks(workspaceId);
   }
 
+  /* --- add task handler --- */
+
+  const handleAddTask = useCallback(
+    async (status: TaskStatus, title: string) => {
+      try {
+        const wsId = workspaceId ?? undefined;
+        const newTask = await createTask({ title, status }, wsId);
+        // Optimistically add to local state
+        setTasks((prev) => [...prev, newTask]);
+      } catch (err: unknown) {
+        console.error("[Kanban] Failed to create task:", err);
+        // Re-fetch on error to get consistent state
+        void loadTasks(workspaceId);
+      }
+    },
+    [workspaceId, loadTasks]
+  );
+
   /* --- render --- */
 
   return (
@@ -755,7 +894,12 @@ export default function KanbanPage(): ReactElement {
             }}
           >
             {COLUMNS.map((col) => (
-              <KanbanColumn key={col.status} config={col} tasks={grouped[col.status]} />
+              <KanbanColumn
+                key={col.status}
+                config={col}
+                tasks={grouped[col.status]}
+                onAddTask={handleAddTask}
+              />
             ))}
           </div>
         </DragDropContext>

apps/web/src/app/(authenticated)/logs/page.tsx

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

apps/web/src/app/(authenticated)/projects/[id]/page.tsx

@@ -0,0 +1,491 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import type { ReactElement } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { ArrowLeft } from "lucide-react";
+
+import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
+import { fetchProject, type ProjectDetail } from "@/lib/api/projects";
+import { useWorkspaceId } from "@/lib/hooks";
+
+interface BadgeStyle {
+  label: string;
+  bg: string;
+  color: string;
+}
+
+interface StatusBadgeProps {
+  style: BadgeStyle;
+}
+
+interface MetaItemProps {
+  label: string;
+  value: string;
+}
+
+function getProjectStatusStyle(status: string): BadgeStyle {
+  switch (status) {
+    case "PLANNING":
+      return { label: "Planning", bg: "rgba(47,128,255,0.15)", color: "var(--primary)" };
+    case "ACTIVE":
+      return { label: "Active", bg: "rgba(20,184,166,0.15)", color: "var(--success)" };
+    case "PAUSED":
+      return { label: "Paused", bg: "rgba(245,158,11,0.15)", color: "var(--warn)" };
+    case "COMPLETED":
+      return { label: "Completed", bg: "rgba(139,92,246,0.15)", color: "var(--purple)" };
+    case "ARCHIVED":
+      return { label: "Archived", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+    default:
+      return { label: status, bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+  }
+}
+
+function getPriorityStyle(priority: string | null | undefined): BadgeStyle {
+  switch (priority) {
+    case "HIGH":
+      return { label: "High", bg: "rgba(229,72,77,0.15)", color: "var(--danger)" };
+    case "MEDIUM":
+      return { label: "Medium", bg: "rgba(245,158,11,0.15)", color: "var(--warn)" };
+    case "LOW":
+      return { label: "Low", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+    default:
+      return { label: "Unspecified", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+  }
+}
+
+function getTaskStatusStyle(status: string): BadgeStyle {
+  switch (status) {
+    case "NOT_STARTED":
+      return { label: "Not Started", bg: "rgba(47,128,255,0.15)", color: "var(--primary)" };
+    case "IN_PROGRESS":
+      return { label: "In Progress", bg: "rgba(245,158,11,0.15)", color: "var(--warn)" };
+    case "PAUSED":
+      return { label: "Paused", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+    case "COMPLETED":
+      return { label: "Completed", bg: "rgba(20,184,166,0.15)", color: "var(--success)" };
+    case "ARCHIVED":
+      return { label: "Archived", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+    default:
+      return { label: status, bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
+  }
+}
+
+function formatDate(iso: string | null | undefined): string {
+  if (!iso) return "Not set";
+
+  try {
+    return new Date(iso).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function formatDateTime(iso: string | null | undefined): string {
+  if (!iso) return "Not set";
+
+  try {
+    return new Date(iso).toLocaleString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function toFriendlyErrorMessage(error: unknown): string {
+  const fallback = "We had trouble loading this project. Please try again when you're ready.";
+
+  if (!(error instanceof Error)) {
+    return fallback;
+  }
+
+  const message = error.message.trim();
+  if (message.toLowerCase().includes("not found")) {
+    return "Project not found. It may have been deleted or you may not have access to it.";
+  }
+
+  return message || fallback;
+}
+
+function StatusBadge({ style: statusStyle }: StatusBadgeProps): ReactElement {
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "2px 10px",
+        borderRadius: "var(--r)",
+        background: statusStyle.bg,
+        color: statusStyle.color,
+        fontSize: "0.75rem",
+        fontWeight: 500,
+      }}
+    >
+      {statusStyle.label}
+    </span>
+  );
+}
+
+function MetaItem({ label, value }: MetaItemProps): ReactElement {
+  return (
+    <div
+      style={{
+        background: "var(--bg)",
+        border: "1px solid var(--border)",
+        borderRadius: "var(--r)",
+        padding: "10px 12px",
+      }}
+    >
+      <p style={{ margin: "0 0 4px", fontSize: "0.75rem", color: "var(--muted)" }}>{label}</p>
+      <p style={{ margin: 0, fontSize: "0.85rem", color: "var(--text)" }}>{value}</p>
+    </div>
+  );
+}
+
+export default function ProjectDetailPage(): ReactElement {
+  const router = useRouter();
+  const params = useParams<{ id: string | string[] }>();
+  const workspaceId = useWorkspaceId();
+  const rawProjectId = params.id;
+  const projectId = Array.isArray(rawProjectId) ? (rawProjectId[0] ?? null) : rawProjectId;
+
+  const [project, setProject] = useState<ProjectDetail | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadProject = useCallback(async (id: string, wsId: string): Promise<void> => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const data = await fetchProject(id, wsId);
+      setProject(data);
+    } catch (err: unknown) {
+      console.error("[ProjectDetail] Failed to fetch project:", err);
+      setProject(null);
+      setError(toFriendlyErrorMessage(err));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!projectId) {
+      setProject(null);
+      setError("The project link is invalid. Please return to the projects page.");
+      setIsLoading(false);
+      return;
+    }
+
+    if (!workspaceId) {
+      setProject(null);
+      setError("Select a workspace to view this project.");
+      setIsLoading(false);
+      return;
+    }
+
+    const id = projectId;
+    const wsId = workspaceId;
+    let cancelled = false;
+
+    async function load(): Promise<void> {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const data = await fetchProject(id, wsId);
+        if (!cancelled) {
+          setProject(data);
+        }
+      } catch (err: unknown) {
+        console.error("[ProjectDetail] Failed to fetch project:", err);
+        if (!cancelled) {
+          setProject(null);
+          setError(toFriendlyErrorMessage(err));
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    }
+
+    void load();
+
+    return (): void => {
+      cancelled = true;
+    };
+  }, [projectId, workspaceId]);
+
+  function handleRetry(): void {
+    if (!projectId || !workspaceId) return;
+    void loadProject(projectId, workspaceId);
+  }
+
+  function handleBack(): void {
+    router.push("/projects");
+  }
+
+  const projectStatus = project ? getProjectStatusStyle(project.status) : null;
+  const projectPriority = project ? getPriorityStyle(project.priority) : null;
+  const dueDate = project?.dueDate ?? project?.endDate;
+  const creator =
+    project?.creator.name && project.creator.name.trim().length > 0
+      ? `${project.creator.name} (${project.creator.email})`
+      : (project?.creator.email ?? "Unknown");
+
+  return (
+    <main className="container mx-auto px-4 py-8" style={{ maxWidth: 960 }}>
+      <button
+        onClick={handleBack}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          marginBottom: 20,
+          padding: "8px 12px",
+          borderRadius: "var(--r)",
+          border: "1px solid var(--border)",
+          background: "var(--surface)",
+          color: "var(--text-2)",
+          fontSize: "0.85rem",
+          fontWeight: 500,
+          cursor: "pointer",
+        }}
+      >
+        <ArrowLeft size={16} />
+        Back to projects
+      </button>
+
+      {isLoading ? (
+        <div className="flex justify-center py-16">
+          <MosaicSpinner label="Loading project..." />
+        </div>
+      ) : error !== null ? (
+        <div
+          style={{
+            background: "var(--surface)",
+            border: "1px solid var(--border)",
+            borderRadius: "var(--r-lg)",
+            padding: 32,
+            textAlign: "center",
+          }}
+        >
+          <p style={{ color: "var(--danger)", margin: "0 0 20px" }}>{error}</p>
+          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
+            <button
+              onClick={handleBack}
+              style={{
+                padding: "8px 16px",
+                background: "transparent",
+                border: "1px solid var(--border)",
+                borderRadius: "var(--r)",
+                color: "var(--text-2)",
+                fontSize: "0.85rem",
+                cursor: "pointer",
+              }}
+            >
+              Back to projects
+            </button>
+            <button
+              onClick={handleRetry}
+              style={{
+                padding: "8px 16px",
+                background: "var(--danger)",
+                border: "none",
+                borderRadius: "var(--r)",
+                color: "#fff",
+                fontSize: "0.85rem",
+                fontWeight: 500,
+                cursor: "pointer",
+              }}
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      ) : project === null ? (
+        <div
+          style={{
+            background: "var(--surface)",
+            border: "1px solid var(--border)",
+            borderRadius: "var(--r-lg)",
+            padding: 32,
+            textAlign: "center",
+          }}
+        >
+          <p style={{ color: "var(--muted)", margin: 0 }}>Project details are not available.</p>
+        </div>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          <section
+            style={{
+              background: "var(--surface)",
+              border: "1px solid var(--border)",
+              borderRadius: "var(--r-lg)",
+              padding: 24,
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "flex-start",
+                gap: 12,
+                flexWrap: "wrap",
+              }}
+            >
+              <div style={{ minWidth: 0 }}>
+                <h1
+                  style={{ margin: 0, fontSize: "1.875rem", fontWeight: 700, color: "var(--text)" }}
+                >
+                  {project.name}
+                </h1>
+              </div>
+              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+                {projectStatus && <StatusBadge style={projectStatus} />}
+                {projectPriority && <StatusBadge style={projectPriority} />}
+              </div>
+            </div>
+
+            {project.description ? (
+              <p
+                style={{
+                  margin: "14px 0 0",
+                  color: "var(--muted)",
+                  fontSize: "0.9rem",
+                  lineHeight: 1.6,
+                }}
+              >
+                {project.description}
+              </p>
+            ) : (
+              <p
+                style={{
+                  margin: "14px 0 0",
+                  color: "var(--muted)",
+                  fontSize: "0.9rem",
+                  lineHeight: 1.6,
+                  fontStyle: "italic",
+                }}
+              >
+                No description provided.
+              </p>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3" style={{ marginTop: 18 }}>
+              <MetaItem label="Start date" value={formatDate(project.startDate)} />
+              <MetaItem label="Due date" value={formatDate(dueDate)} />
+              <MetaItem label="Created" value={formatDateTime(project.createdAt)} />
+              <MetaItem label="Updated" value={formatDateTime(project.updatedAt)} />
+              <MetaItem label="Creator" value={creator} />
+              <MetaItem
+                label="Work items"
+                value={`${String(project._count.tasks)} tasks · ${String(project._count.events)} events`}
+              />
+            </div>
+          </section>
+
+          <section
+            style={{
+              background: "var(--surface)",
+              border: "1px solid var(--border)",
+              borderRadius: "var(--r-lg)",
+              padding: 24,
+            }}
+          >
+            <h2 style={{ margin: "0 0 12px", fontSize: "1.1rem", color: "var(--text)" }}>
+              Tasks ({String(project._count.tasks)})
+            </h2>
+
+            {project.tasks.length === 0 ? (
+              <p style={{ margin: 0, color: "var(--muted)", fontSize: "0.9rem" }}>
+                No tasks yet for this project.
+              </p>
+            ) : (
+              <div>
+                {project.tasks.map((task, index) => (
+                  <div
+                    key={task.id}
+                    style={{
+                      padding: "12px 0",
+                      borderTop: index === 0 ? "none" : "1px solid var(--border)",
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "flex-start",
+                        justifyContent: "space-between",
+                        gap: 12,
+                        flexWrap: "wrap",
+                      }}
+                    >
+                      <div style={{ minWidth: 0 }}>
+                        <p style={{ margin: 0, color: "var(--text)", fontWeight: 500 }}>
+                          {task.title}
+                        </p>
+                        <p style={{ margin: "4px 0 0", color: "var(--muted)", fontSize: "0.8rem" }}>
+                          Due: {formatDate(task.dueDate)}
+                        </p>
+                      </div>
+                      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+                        <StatusBadge style={getTaskStatusStyle(task.status)} />
+                        <StatusBadge style={getPriorityStyle(task.priority)} />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+
+          <section
+            style={{
+              background: "var(--surface)",
+              border: "1px solid var(--border)",
+              borderRadius: "var(--r-lg)",
+              padding: 24,
+            }}
+          >
+            <h2 style={{ margin: "0 0 12px", fontSize: "1.1rem", color: "var(--text)" }}>
+              Events ({String(project._count.events)})
+            </h2>
+
+            {project.events.length === 0 ? (
+              <p style={{ margin: 0, color: "var(--muted)", fontSize: "0.9rem" }}>
+                No events scheduled for this project.
+              </p>
+            ) : (
+              <div>
+                {project.events.map((event, index) => (
+                  <div
+                    key={event.id}
+                    style={{
+                      padding: "12px 0",
+                      borderTop: index === 0 ? "none" : "1px solid var(--border)",
+                    }}
+                  >
+                    <p style={{ margin: 0, color: "var(--text)", fontWeight: 500 }}>
+                      {event.title}
+                    </p>
+                    <p style={{ margin: "4px 0 0", color: "var(--muted)", fontSize: "0.8rem" }}>
+                      {formatDateTime(event.startTime)} - {formatDateTime(event.endTime)}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+        </div>
+      )}
+    </main>
+  );
+}

apps/web/src/lib/api/activity.ts

@@ -0,0 +1,139 @@
+/**
+ * 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;
+}

apps/web/src/lib/api/index.ts

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

apps/web/src/lib/api/projects.ts

@@ -25,7 +25,9 @@ export interface Project {
   name: string;
   description: string | null;
   status: ProjectStatus;
+  priority?: string | null;
   startDate: string | null;
+  dueDate?: string | null;
   endDate: string | null;
   creatorId: string;
   domainId: string | null;
@@ -35,6 +37,54 @@ export interface Project {
   updatedAt: string;
 }
 
+/**
+ * Minimal creator details included on project detail response
+ */
+export interface ProjectCreator {
+  id: string;
+  name: string | null;
+  email: string;
+}
+
+/**
+ * Task row included on project detail response
+ */
+export interface ProjectTaskSummary {
+  id: string;
+  title: string;
+  status: string;
+  priority: string;
+  dueDate: string | null;
+}
+
+/**
+ * Event row included on project detail response
+ */
+export interface ProjectEventSummary {
+  id: string;
+  title: string;
+  startTime: string;
+  endTime: string | null;
+}
+
+/**
+ * Counts included on project detail response
+ */
+export interface ProjectDetailCounts {
+  tasks: number;
+  events: number;
+}
+
+/**
+ * Single-project response with related details
+ */
+export interface ProjectDetail extends Project {
+  creator: ProjectCreator;
+  tasks: ProjectTaskSummary[];
+  events: ProjectEventSummary[];
+  _count: ProjectDetailCounts;
+}
+
 /**
  * DTO for creating a new project
  */
@@ -72,8 +122,8 @@ export async function fetchProjects(workspaceId?: string): Promise<Project[]> {
 /**
  * Fetch a single project by ID
  */
-export async function fetchProject(id: string, workspaceId?: string): Promise<Project> {
+export async function fetchProject(id: string, workspaceId?: string): Promise<ProjectDetail> {
-  return apiGet<Project>(`/api/projects/${id}`, workspaceId);
+  return apiGet<ProjectDetail>(`/api/projects/${id}`, workspaceId);
 }
 
 /**

apps/web/src/lib/api/tasks.ts

@@ -46,3 +46,21 @@ export async function updateTask(
   const res = await apiPatch<ApiResponse<Task>>(`/api/tasks/${id}`, data, workspaceId);
   return res.data;
 }
+
+export interface CreateTaskInput {
+  title: string;
+  description?: string;
+  status?: TaskStatus;
+  priority?: TaskPriority;
+  dueDate?: string;
+  projectId?: string;
+}
+
+/**
+ * Create a new task
+ */
+export async function createTask(data: CreateTaskInput, workspaceId?: string): Promise<Task> {
+  const { apiPost } = await import("./client");
+  const res = await apiPost<ApiResponse<Task>>("/api/tasks", data, workspaceId);
+  return res.data;
+}

docker-compose.swarm.portainer.yml

@@ -128,6 +128,8 @@ services:
       # Matrix bridge (optional — configure after Synapse is running)
       MATRIX_HOMESERVER_URL: ${MATRIX_HOMESERVER_URL:-http://synapse:8008}
       MATRIX_ACCESS_TOKEN: ${MATRIX_ACCESS_TOKEN:-}
+      # System admin IDs (comma-separated user UUIDs) for auth settings access
+      SYSTEM_ADMIN_IDS: ${SYSTEM_ADMIN_IDS:-}
       MATRIX_BOT_USER_ID: ${MATRIX_BOT_USER_ID:-}
       MATRIX_CONTROL_ROOM_ID: ${MATRIX_CONTROL_ROOM_ID:-}
       MATRIX_WORKSPACE_ID: ${MATRIX_WORKSPACE_ID:-}