feat(web): add workspace management UI (M2 #12)

- Create workspace listing page at /settings/workspaces - List all user workspaces with role badges - Create new workspace functionality - Display member count per workspace - Create workspace detail page at /settings/workspaces/[id] - Workspace settings (name, ID, created date) - Member management with role editing - Invite member functionality - Delete workspace (owner only) - Add workspace components: - WorkspaceCard: Display workspace info with role badge - WorkspaceSettings: Edit workspace settings and delete - MemberList: Display and manage workspace members - InviteMember: Send invitations with role selection - Add WorkspaceMemberWithUser type to shared package - Follow existing app patterns for styling and structure - Use mock data (ready for API integration)
2026-01-29 16:59:26 -06:00
parent 287a0e2556
commit 5291fece26
43 changed files with 4152 additions and 99 deletions
--- a/apps/api/prisma/migrations/20260129225813_add_user_preferences/migration.sql
+++ b/apps/api/prisma/migrations/20260129225813_add_user_preferences/migration.sql
@@ -0,0 +1,18 @@
+-- CreateTable
+CREATE TABLE "user_preferences" (
+    "id" UUID NOT NULL,
+    "user_id" UUID NOT NULL,
+    "theme" TEXT NOT NULL DEFAULT 'system',
+    "locale" TEXT NOT NULL DEFAULT 'en',
+    "timezone" TEXT,
+    "settings" JSONB NOT NULL DEFAULT '{}',
+    "updated_at" TIMESTAMPTZ NOT NULL,
+
+    CONSTRAINT "user_preferences_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "user_preferences_user_id_key" ON "user_preferences"("user_id");
+
+-- AddForeignKey
+ALTER TABLE "user_preferences" ADD CONSTRAINT "user_preferences_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
--- a/apps/api/prisma/schema.prisma
+++ b/apps/api/prisma/schema.prisma
@@ -144,10 +144,24 @@ model User {
  relationships        Relationship[]    @relation("RelationshipCreator")
  agentSessions        AgentSession[]
  userLayouts          UserLayout[]
+  userPreference       UserPreference?

  @@map("users")
 }

+model UserPreference {
+  id        String   @id @default(uuid()) @db.Uuid
+  userId    String   @unique @map("user_id") @db.Uuid
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  theme     String   @default("system")
+  locale    String   @default("en")
+  timezone  String?
+  settings  Json     @default("{}")
+  updatedAt DateTime @updatedAt @map("updated_at") @db.Timestamptz
+
+  @@map("user_preferences")
+}
+
 model Workspace {
  id        String   @id @default(uuid()) @db.Uuid
  name      String
--- a/apps/api/src/app.module.ts
+++ b/apps/api/src/app.module.ts
@@ -13,6 +13,7 @@ import { IdeasModule } from "./ideas/ideas.module";
 import { WidgetsModule } from "./widgets/widgets.module";
 import { LayoutsModule } from "./layouts/layouts.module";
 import { KnowledgeModule } from "./knowledge/knowledge.module";
+import { UsersModule } from "./users/users.module";

@Module({
  imports: [
@@ -28,6 +29,7 @@ import { KnowledgeModule } from "./knowledge/knowledge.module";
    WidgetsModule,
    LayoutsModule,
    KnowledgeModule,
+    UsersModule,
  ],
  controllers: [AppController],
  providers: [AppService],
--- a/apps/api/src/common/README.md
+++ b/apps/api/src/common/README.md
@@ -0,0 +1,314 @@
+# Common Guards and Decorators
+
+This directory contains shared guards and decorators for workspace-based permission management in the Mosaic Stack API.
+
+## Overview
+
+The permission system provides:
+- **Workspace isolation** via Row-Level Security (RLS)
+- **Role-based access control** (RBAC) using workspace member roles
+- **Declarative permission requirements** using decorators
+
+## Guards
+
+### AuthGuard
+
+Located in `../auth/guards/auth.guard.ts`
+
+Verifies user authentication and attaches user data to the request.
+
+**Sets on request:**
+- `request.user` - Authenticated user object
+- `request.session` - User session data
+
+### WorkspaceGuard
+
+Validates workspace access and sets up RLS context.
+
+**Responsibilities:**
+1. Extracts workspace ID from request (header, param, or body)
+2. Verifies user is a member of the workspace
+3. Sets the current user context for RLS policies
+4. Attaches workspace context to the request
+
+**Sets on request:**
+- `request.workspace.id` - Validated workspace ID
+- `request.user.workspaceId` - Workspace ID (for backward compatibility)
+
+**Workspace ID Sources (in priority order):**
+1. `X-Workspace-Id` header
+2. `:workspaceId` URL parameter
+3. `workspaceId` in request body
+
+**Example:**
+```typescript
+@Controller('tasks')
+@UseGuards(AuthGuard, WorkspaceGuard)
+export class TasksController {
+  @Get()
+  async getTasks(@Workspace() workspaceId: string) {
+    // workspaceId is validated and RLS context is set
+  }
+}
+```
+
+### PermissionGuard
+
+Enforces role-based access control using workspace member roles.
+
+**Responsibilities:**
+1. Reads required permission from `@RequirePermission()` decorator
+2. Fetches user's role in the workspace
+3. Checks if role satisfies the required permission
+4. Attaches role to request for convenience
+
+**Sets on request:**
+- `request.user.workspaceRole` - User's role in the workspace
+
+**Must be used after AuthGuard and WorkspaceGuard.**
+
+**Example:**
+```typescript
+@Controller('admin')
+@UseGuards(AuthGuard, WorkspaceGuard, PermissionGuard)
+export class AdminController {
+  @RequirePermission(Permission.WORKSPACE_ADMIN)
+  @Delete('data')
+  async deleteData() {
+    // Only ADMIN or OWNER can execute
+  }
+}
+```
+
+## Decorators
+
+### @RequirePermission(permission: Permission)
+
+Specifies the minimum permission level required for a route.
+
+**Permission Levels:**
+
+| Permission | Allowed Roles | Use Case |
+|------------|--------------|----------|
+| `WORKSPACE_OWNER` | OWNER | Critical operations (delete workspace, transfer ownership) |
+| `WORKSPACE_ADMIN` | OWNER, ADMIN | Administrative functions (manage members, settings) |
+| `WORKSPACE_MEMBER` | OWNER, ADMIN, MEMBER | Standard operations (create/edit content) |
+| `WORKSPACE_ANY` | All roles including GUEST | Read-only or basic access |
+
+**Example:**
+```typescript
+@RequirePermission(Permission.WORKSPACE_ADMIN)
+@Post('invite')
+async inviteMember(@Body() inviteDto: InviteDto) {
+  // Only admins can invite members
+}
+```
+
+### @Workspace()
+
+Parameter decorator to extract the validated workspace ID.
+
+**Example:**
+```typescript
+@Get()
+async getTasks(@Workspace() workspaceId: string) {
+  // workspaceId is guaranteed to be valid
+}
+```
+
+### @WorkspaceContext()
+
+Parameter decorator to extract the full workspace context.
+
+**Example:**
+```typescript
+@Get()
+async getTasks(@WorkspaceContext() workspace: { id: string }) {
+  console.log(workspace.id);
+}
+```
+
+### @CurrentUser()
+
+Located in `../auth/decorators/current-user.decorator.ts`
+
+Extracts the authenticated user from the request.
+
+**Example:**
+```typescript
+@Post()
+async create(@CurrentUser() user: any, @Body() dto: CreateDto) {
+  // user contains authenticated user data
+}
+```
+
+## Usage Patterns
+
+### Basic Controller Setup
+
+```typescript
+import { Controller, Get, Post, UseGuards } from "@nestjs/common";
+import { AuthGuard } from "../auth/guards/auth.guard";
+import { WorkspaceGuard, PermissionGuard } from "../common/guards";
+import { Workspace, Permission, RequirePermission } from "../common/decorators";
+import { CurrentUser } from "../auth/decorators/current-user.decorator";
+
+@Controller('resources')
+@UseGuards(AuthGuard, WorkspaceGuard, PermissionGuard)
+export class ResourcesController {
+  @Get()
+  @RequirePermission(Permission.WORKSPACE_ANY)
+  async list(@Workspace() workspaceId: string) {
+    // All members can list
+  }
+
+  @Post()
+  @RequirePermission(Permission.WORKSPACE_MEMBER)
+  async create(
+    @Workspace() workspaceId: string,
+    @CurrentUser() user: any,
+    @Body() dto: CreateDto
+  ) {
+    // Members and above can create
+  }
+
+  @Delete(':id')
+  @RequirePermission(Permission.WORKSPACE_ADMIN)
+  async delete(@Param('id') id: string) {
+    // Only admins can delete
+  }
+}
+```
+
+### Mixed Permissions
+
+Different endpoints can have different permission requirements:
+
+```typescript
+@Controller('projects')
+@UseGuards(AuthGuard, WorkspaceGuard, PermissionGuard)
+export class ProjectsController {
+  @Get()
+  @RequirePermission(Permission.WORKSPACE_ANY)
+  async list() { /* Anyone can view */ }
+
+  @Post()
+  @RequirePermission(Permission.WORKSPACE_MEMBER)
+  async create() { /* Members can create */ }
+
+  @Patch('settings')
+  @RequirePermission(Permission.WORKSPACE_ADMIN)
+  async updateSettings() { /* Only admins */ }
+
+  @Delete()
+  @RequirePermission(Permission.WORKSPACE_OWNER)
+  async deleteProject() { /* Only owner */ }
+}
+```
+
+### Workspace ID in Request
+
+The workspace ID can be provided in multiple ways:
+
+**Via Header (Recommended for SPAs):**
+```typescript
+// Frontend
+fetch('/api/tasks', {
+  headers: {
+    'Authorization': 'Bearer <token>',
+    'X-Workspace-Id': 'workspace-uuid',
+  }
+})
+```
+
+**Via URL Parameter:**
+```typescript
+@Get(':workspaceId/tasks')
+async getTasks(@Param('workspaceId') workspaceId: string) {
+  // workspaceId extracted from URL
+}
+```
+
+**Via Request Body:**
+```typescript
+@Post()
+async create(@Body() dto: { workspaceId: string; name: string }) {
+  // workspaceId extracted from body
+}
+```
+
+## Row-Level Security (RLS)
+
+When `WorkspaceGuard` is applied, it automatically:
+1. Calls `setCurrentUser(userId)` to set the RLS context
+2. All subsequent database queries are automatically filtered by RLS policies
+3. Users can only access data in workspaces they're members of
+
+**See:** `docs/design/multi-tenant-rls.md` for full RLS documentation.
+
+## Testing
+
+Tests are provided for both guards:
+- `workspace.guard.spec.ts` - WorkspaceGuard tests
+- `permission.guard.spec.ts` - PermissionGuard tests
+
+**Run tests:**
+```bash
+npm test -- workspace.guard.spec
+npm test -- permission.guard.spec
+```
+
+## Error Handling
+
+### WorkspaceGuard Errors
+
+- `ForbiddenException("User not authenticated")` - No authenticated user
+- `BadRequestException("Workspace ID is required...")` - No workspace ID provided
+- `ForbiddenException("You do not have access to this workspace")` - User is not a workspace member
+
+### PermissionGuard Errors
+
+- `ForbiddenException("Authentication and workspace context required")` - Missing user or workspace context
+- `ForbiddenException("You are not a member of this workspace")` - User not found in workspace
+- `ForbiddenException("Insufficient permissions. Required: ...")` - User role doesn't meet requirements
+
+## Migration Guide
+
+### Before (Manual Checks):
+
+```typescript
+@Get()
+async getTasks(@Request() req: any) {
+  const workspaceId = req.user?.workspaceId;
+  if (!workspaceId) {
+    throw new UnauthorizedException("Authentication required");
+  }
+  return this.tasksService.findAll(workspaceId);
+}
+```
+
+### After (Guard-Based):
+
+```typescript
+@Get()
+@UseGuards(AuthGuard, WorkspaceGuard, PermissionGuard)
+@RequirePermission(Permission.WORKSPACE_ANY)
+async getTasks(@Workspace() workspaceId: string) {
+  return this.tasksService.findAll(workspaceId);
+}
+```
+
+## Benefits
+
+✅ **Declarative** - Permission requirements are clear from decorators
+✅ **DRY** - No repetitive auth/workspace checks in every handler
+✅ **Type-safe** - Workspace ID is guaranteed to exist when using `@Workspace()`
+✅ **Secure** - RLS context automatically set, defense in depth
+✅ **Testable** - Guards are independently testable
+✅ **Maintainable** - Permission changes in one place
+
+## Related Files
+
+- `apps/api/src/lib/db-context.ts` - RLS utility functions
+- `docs/design/multi-tenant-rls.md` - RLS architecture documentation
+- `apps/api/prisma/schema.prisma` - Database schema with role definitions
--- a/apps/api/src/common/decorators/index.ts
+++ b/apps/api/src/common/decorators/index.ts
@@ -0,0 +1,2 @@
+export * from "./permissions.decorator";
+export * from "./workspace.decorator";
--- a/apps/api/src/common/decorators/permissions.decorator.ts
+++ b/apps/api/src/common/decorators/permissions.decorator.ts
@@ -0,0 +1,48 @@
+import { SetMetadata } from "@nestjs/common";
+
+/**
+ * Permission levels for workspace access control.
+ * These map to WorkspaceMemberRole from the database schema.
+ */
+export enum Permission {
+  /** Requires OWNER role - full control over workspace */
+  WORKSPACE_OWNER = "workspace:owner",
+  
+  /** Requires ADMIN or OWNER role - administrative functions */
+  WORKSPACE_ADMIN = "workspace:admin",
+  
+  /** Requires MEMBER, ADMIN, or OWNER role - standard access */
+  WORKSPACE_MEMBER = "workspace:member",
+  
+  /** Any authenticated workspace member including GUEST */
+  WORKSPACE_ANY = "workspace:any",
+}
+
+export const PERMISSION_KEY = "permission";
+
+/**
+ * Decorator to specify required permission level for a route.
+ * Use with PermissionGuard to enforce role-based access control.
+ * 
+ * @param permission - The minimum permission level required
+ * 
+ * @example
+ * ```typescript
+ * @RequirePermission(Permission.WORKSPACE_ADMIN)
+ * @Delete(':id')
+ * async deleteWorkspace(@Param('id') id: string) {
+ *   // Only ADMIN or OWNER can execute this
+ * }
+ * ```
+ * 
+ * @example
+ * ```typescript
+ * @RequirePermission(Permission.WORKSPACE_MEMBER)
+ * @Get()
+ * async getTasks() {
+ *   // Any workspace member can execute this
+ * }
+ * ```
+ */
+export const RequirePermission = (permission: Permission) =>
+  SetMetadata(PERMISSION_KEY, permission);
--- a/apps/api/src/common/decorators/workspace.decorator.ts
+++ b/apps/api/src/common/decorators/workspace.decorator.ts
@@ -0,0 +1,40 @@
+import { createParamDecorator, ExecutionContext } from "@nestjs/common";
+
+/**
+ * Decorator to extract workspace ID from the request.
+ * Must be used with WorkspaceGuard which validates and attaches the workspace.
+ * 
+ * @example
+ * ```typescript
+ * @Get()
+ * @UseGuards(AuthGuard, WorkspaceGuard)
+ * async getTasks(@Workspace() workspaceId: string) {
+ *   // workspaceId is validated and ready to use
+ * }
+ * ```
+ */
+export const Workspace = createParamDecorator(
+  (_data: unknown, ctx: ExecutionContext): string => {
+    const request = ctx.switchToHttp().getRequest();
+    return request.workspace?.id;
+  }
+);
+
+/**
+ * Decorator to extract full workspace context from the request.
+ * 
+ * @example
+ * ```typescript
+ * @Get()
+ * @UseGuards(AuthGuard, WorkspaceGuard)
+ * async getTasks(@WorkspaceContext() workspace: { id: string }) {
+ *   console.log(workspace.id);
+ * }
+ * ```
+ */
+export const WorkspaceContext = createParamDecorator(
+  (_data: unknown, ctx: ExecutionContext) => {
+    const request = ctx.switchToHttp().getRequest();
+    return request.workspace;
+  }
+);
--- a/apps/api/src/common/guards/index.ts
+++ b/apps/api/src/common/guards/index.ts
@@ -0,0 +1,2 @@
+export * from "./workspace.guard";
+export * from "./permission.guard";
--- a/apps/api/src/common/guards/permission.guard.spec.ts
+++ b/apps/api/src/common/guards/permission.guard.spec.ts
@@ -0,0 +1,278 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { Test, TestingModule } from "@nestjs/testing";
+import { ExecutionContext, ForbiddenException } from "@nestjs/common";
+import { Reflector } from "@nestjs/core";
+import { PermissionGuard } from "./permission.guard";
+import { PrismaService } from "../../prisma/prisma.service";
+import { Permission } from "../decorators/permissions.decorator";
+import { WorkspaceMemberRole } from "@prisma/client";
+
+describe("PermissionGuard", () => {
+  let guard: PermissionGuard;
+  let reflector: Reflector;
+  let prismaService: PrismaService;
+
+  const mockReflector = {
+    getAllAndOverride: vi.fn(),
+  };
+
+  const mockPrismaService = {
+    workspaceMember: {
+      findUnique: vi.fn(),
+    },
+  };
+
+  beforeEach(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [
+        PermissionGuard,
+        {
+          provide: Reflector,
+          useValue: mockReflector,
+        },
+        {
+          provide: PrismaService,
+          useValue: mockPrismaService,
+        },
+      ],
+    }).compile();
+
+    guard = module.get<PermissionGuard>(PermissionGuard);
+    reflector = module.get<Reflector>(Reflector);
+    prismaService = module.get<PrismaService>(PrismaService);
+
+    vi.clearAllMocks();
+  });
+
+  const createMockExecutionContext = (
+    user: any,
+    workspace: any
+  ): ExecutionContext => {
+    const mockRequest = {
+      user,
+      workspace,
+    };
+
+    return {
+      switchToHttp: () => ({
+        getRequest: () => mockRequest,
+      }),
+      getHandler: vi.fn(),
+      getClass: vi.fn(),
+    } as any;
+  };
+
+  describe("canActivate", () => {
+    const userId = "user-123";
+    const workspaceId = "workspace-456";
+
+    it("should allow access when no permission is required", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+
+      mockReflector.getAllAndOverride.mockReturnValue(undefined);
+
+      const result = await guard.canActivate(context);
+
+      expect(result).toBe(true);
+    });
+
+    it("should allow OWNER to access WORKSPACE_OWNER permission", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+
+      mockReflector.getAllAndOverride.mockReturnValue(Permission.WORKSPACE_OWNER);
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        role: WorkspaceMemberRole.OWNER,
+      });
+
+      const result = await guard.canActivate(context);
+
+      expect(result).toBe(true);
+      expect(context.switchToHttp().getRequest().user.workspaceRole).toBe(
+        WorkspaceMemberRole.OWNER
+      );
+    });
+
+    it("should deny ADMIN access to WORKSPACE_OWNER permission", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+
+      mockReflector.getAllAndOverride.mockReturnValue(Permission.WORKSPACE_OWNER);
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        role: WorkspaceMemberRole.ADMIN,
+      });
+
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        ForbiddenException
+      );
+    });
+
+    it("should allow OWNER and ADMIN to access WORKSPACE_ADMIN permission", async () => {
+      const context1 = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+      const context2 = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+
+      mockReflector.getAllAndOverride.mockReturnValue(Permission.WORKSPACE_ADMIN);
+
+      // Test OWNER
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        role: WorkspaceMemberRole.OWNER,
+      });
+      expect(await guard.canActivate(context1)).toBe(true);
+
+      // Test ADMIN
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        role: WorkspaceMemberRole.ADMIN,
+      });
+      expect(await guard.canActivate(context2)).toBe(true);
+    });
+
+    it("should deny MEMBER access to WORKSPACE_ADMIN permission", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+
+      mockReflector.getAllAndOverride.mockReturnValue(Permission.WORKSPACE_ADMIN);
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        role: WorkspaceMemberRole.MEMBER,
+      });
+
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        ForbiddenException
+      );
+    });
+
+    it("should allow OWNER, ADMIN, and MEMBER to access WORKSPACE_MEMBER permission", async () => {
+      const context1 = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+      const context2 = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+      const context3 = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+
+      mockReflector.getAllAndOverride.mockReturnValue(Permission.WORKSPACE_MEMBER);
+
+      // Test OWNER
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        role: WorkspaceMemberRole.OWNER,
+      });
+      expect(await guard.canActivate(context1)).toBe(true);
+
+      // Test ADMIN
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        role: WorkspaceMemberRole.ADMIN,
+      });
+      expect(await guard.canActivate(context2)).toBe(true);
+
+      // Test MEMBER
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        role: WorkspaceMemberRole.MEMBER,
+      });
+      expect(await guard.canActivate(context3)).toBe(true);
+    });
+
+    it("should deny GUEST access to WORKSPACE_MEMBER permission", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+
+      mockReflector.getAllAndOverride.mockReturnValue(Permission.WORKSPACE_MEMBER);
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        role: WorkspaceMemberRole.GUEST,
+      });
+
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        ForbiddenException
+      );
+    });
+
+    it("should allow any role (including GUEST) to access WORKSPACE_ANY permission", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+
+      mockReflector.getAllAndOverride.mockReturnValue(Permission.WORKSPACE_ANY);
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        role: WorkspaceMemberRole.GUEST,
+      });
+
+      const result = await guard.canActivate(context);
+
+      expect(result).toBe(true);
+    });
+
+    it("should throw ForbiddenException when user context is missing", async () => {
+      const context = createMockExecutionContext(null, { id: workspaceId });
+
+      mockReflector.getAllAndOverride.mockReturnValue(Permission.WORKSPACE_MEMBER);
+
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        ForbiddenException
+      );
+    });
+
+    it("should throw ForbiddenException when workspace context is missing", async () => {
+      const context = createMockExecutionContext({ id: userId }, null);
+
+      mockReflector.getAllAndOverride.mockReturnValue(Permission.WORKSPACE_MEMBER);
+
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        ForbiddenException
+      );
+    });
+
+    it("should throw ForbiddenException when user is not a workspace member", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+
+      mockReflector.getAllAndOverride.mockReturnValue(Permission.WORKSPACE_MEMBER);
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue(null);
+
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        ForbiddenException
+      );
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        "You are not a member of this workspace"
+      );
+    });
+
+    it("should handle database errors gracefully", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        { id: workspaceId }
+      );
+
+      mockReflector.getAllAndOverride.mockReturnValue(Permission.WORKSPACE_MEMBER);
+      mockPrismaService.workspaceMember.findUnique.mockRejectedValue(
+        new Error("Database error")
+      );
+
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        ForbiddenException
+      );
+    });
+  });
+});
--- a/apps/api/src/common/guards/permission.guard.ts
+++ b/apps/api/src/common/guards/permission.guard.ts
@@ -0,0 +1,165 @@
+import {
+  Injectable,
+  CanActivate,
+  ExecutionContext,
+  ForbiddenException,
+  Logger,
+} from "@nestjs/common";
+import { Reflector } from "@nestjs/core";
+import { PrismaService } from "../../prisma/prisma.service";
+import { PERMISSION_KEY, Permission } from "../decorators/permissions.decorator";
+import { WorkspaceMemberRole } from "@prisma/client";
+
+/**
+ * PermissionGuard enforces role-based access control for workspace operations.
+ * 
+ * This guard must be used after AuthGuard and WorkspaceGuard, as it depends on:
+ * - request.user.id (set by AuthGuard)
+ * - request.workspace.id (set by WorkspaceGuard)
+ * 
+ * @example
+ * ```typescript
+ * @Controller('workspaces')
+ * @UseGuards(AuthGuard, WorkspaceGuard, PermissionGuard)
+ * export class WorkspacesController {
+ *   @RequirePermission(Permission.WORKSPACE_ADMIN)
+ *   @Delete(':id')
+ *   async deleteWorkspace() {
+ *     // Only ADMIN or OWNER can execute this
+ *   }
+ * 
+ *   @RequirePermission(Permission.WORKSPACE_MEMBER)
+ *   @Get('tasks')
+ *   async getTasks() {
+ *     // Any workspace member can execute this
+ *   }
+ * }
+ * ```
+ */
+@Injectable()
+export class PermissionGuard implements CanActivate {
+  private readonly logger = new Logger(PermissionGuard.name);
+
+  constructor(
+    private readonly reflector: Reflector,
+    private readonly prisma: PrismaService
+  ) {}
+
+  async canActivate(context: ExecutionContext): Promise<boolean> {
+    // Get required permission from decorator
+    const requiredPermission = this.reflector.getAllAndOverride<Permission>(
+      PERMISSION_KEY,
+      [context.getHandler(), context.getClass()]
+    );
+
+    // If no permission is specified, allow access
+    if (!requiredPermission) {
+      return true;
+    }
+
+    const request = context.switchToHttp().getRequest();
+    const userId = request.user?.id;
+    const workspaceId = request.workspace?.id;
+
+    if (!userId || !workspaceId) {
+      this.logger.error(
+        "PermissionGuard: Missing user or workspace context. Ensure AuthGuard and WorkspaceGuard are applied first."
+      );
+      throw new ForbiddenException(
+        "Authentication and workspace context required"
+      );
+    }
+
+    // Get user's role in the workspace
+    const userRole = await this.getUserWorkspaceRole(userId, workspaceId);
+
+    if (!userRole) {
+      throw new ForbiddenException("You are not a member of this workspace");
+    }
+
+    // Check if user's role meets the required permission
+    const hasPermission = this.checkPermission(userRole, requiredPermission);
+
+    if (!hasPermission) {
+      this.logger.warn(
+        `Permission denied: User ${userId} with role ${userRole} attempted to access ${requiredPermission} in workspace ${workspaceId}`
+      );
+      throw new ForbiddenException(
+        `Insufficient permissions. Required: ${requiredPermission}`
+      );
+    }
+
+    // Attach role to request for convenience
+    request.user.workspaceRole = userRole;
+
+    this.logger.debug(
+      `Permission granted: User ${userId} (${userRole}) → ${requiredPermission}`
+    );
+
+    return true;
+  }
+
+  /**
+   * Fetches the user's role in a workspace
+   */
+  private async getUserWorkspaceRole(
+    userId: string,
+    workspaceId: string
+  ): Promise<WorkspaceMemberRole | null> {
+    try {
+      const member = await this.prisma.workspaceMember.findUnique({
+        where: {
+          workspaceId_userId: {
+            workspaceId,
+            userId,
+          },
+        },
+        select: {
+          role: true,
+        },
+      });
+
+      return member?.role ?? null;
+    } catch (error) {
+      this.logger.error(
+        `Failed to fetch user role: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        error instanceof Error ? error.stack : undefined
+      );
+      return null;
+    }
+  }
+
+  /**
+   * Checks if a user's role satisfies the required permission level
+   */
+  private checkPermission(
+    userRole: WorkspaceMemberRole,
+    requiredPermission: Permission
+  ): boolean {
+    switch (requiredPermission) {
+      case Permission.WORKSPACE_OWNER:
+        return userRole === WorkspaceMemberRole.OWNER;
+
+      case Permission.WORKSPACE_ADMIN:
+        return (
+          userRole === WorkspaceMemberRole.OWNER ||
+          userRole === WorkspaceMemberRole.ADMIN
+        );
+
+      case Permission.WORKSPACE_MEMBER:
+        return (
+          userRole === WorkspaceMemberRole.OWNER ||
+          userRole === WorkspaceMemberRole.ADMIN ||
+          userRole === WorkspaceMemberRole.MEMBER
+        );
+
+      case Permission.WORKSPACE_ANY:
+        // Any role including GUEST
+        return true;
+
+      default:
+        this.logger.error(`Unknown permission: ${requiredPermission}`);
+        return false;
+    }
+  }
+}
--- a/apps/api/src/common/guards/workspace.guard.spec.ts
+++ b/apps/api/src/common/guards/workspace.guard.spec.ts
@@ -0,0 +1,219 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { Test, TestingModule } from "@nestjs/testing";
+import { ExecutionContext, ForbiddenException, BadRequestException } from "@nestjs/common";
+import { WorkspaceGuard } from "./workspace.guard";
+import { PrismaService } from "../../prisma/prisma.service";
+import * as dbContext from "../../lib/db-context";
+
+// Mock the db-context module
+vi.mock("../../lib/db-context", () => ({
+  setCurrentUser: vi.fn(),
+}));
+
+describe("WorkspaceGuard", () => {
+  let guard: WorkspaceGuard;
+  let prismaService: PrismaService;
+
+  const mockPrismaService = {
+    workspaceMember: {
+      findUnique: vi.fn(),
+    },
+    $executeRaw: vi.fn(),
+  };
+
+  beforeEach(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [
+        WorkspaceGuard,
+        {
+          provide: PrismaService,
+          useValue: mockPrismaService,
+        },
+      ],
+    }).compile();
+
+    guard = module.get<WorkspaceGuard>(WorkspaceGuard);
+    prismaService = module.get<PrismaService>(PrismaService);
+
+    // Clear all mocks
+    vi.clearAllMocks();
+  });
+
+  const createMockExecutionContext = (
+    user: any,
+    headers: Record<string, string> = {},
+    params: Record<string, string> = {},
+    body: Record<string, any> = {}
+  ): ExecutionContext => {
+    const mockRequest = {
+      user,
+      headers,
+      params,
+      body,
+    };
+
+    return {
+      switchToHttp: () => ({
+        getRequest: () => mockRequest,
+      }),
+    } as ExecutionContext;
+  };
+
+  describe("canActivate", () => {
+    const userId = "user-123";
+    const workspaceId = "workspace-456";
+
+    it("should allow access when user is a workspace member (via header)", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        { "x-workspace-id": workspaceId }
+      );
+
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        workspaceId,
+        userId,
+        role: "MEMBER",
+      });
+
+      const result = await guard.canActivate(context);
+
+      expect(result).toBe(true);
+      expect(mockPrismaService.workspaceMember.findUnique).toHaveBeenCalledWith({
+        where: {
+          workspaceId_userId: {
+            workspaceId,
+            userId,
+          },
+        },
+      });
+      expect(dbContext.setCurrentUser).toHaveBeenCalledWith(userId, prismaService);
+
+      const request = context.switchToHttp().getRequest();
+      expect(request.workspace).toEqual({ id: workspaceId });
+      expect(request.user.workspaceId).toBe(workspaceId);
+    });
+
+    it("should allow access when user is a workspace member (via URL param)", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        {},
+        { workspaceId }
+      );
+
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        workspaceId,
+        userId,
+        role: "ADMIN",
+      });
+
+      const result = await guard.canActivate(context);
+
+      expect(result).toBe(true);
+    });
+
+    it("should allow access when user is a workspace member (via body)", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        {},
+        {},
+        { workspaceId }
+      );
+
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        workspaceId,
+        userId,
+        role: "OWNER",
+      });
+
+      const result = await guard.canActivate(context);
+
+      expect(result).toBe(true);
+    });
+
+    it("should prioritize header over param and body", async () => {
+      const headerWorkspaceId = "workspace-header";
+      const paramWorkspaceId = "workspace-param";
+      const bodyWorkspaceId = "workspace-body";
+
+      const context = createMockExecutionContext(
+        { id: userId },
+        { "x-workspace-id": headerWorkspaceId },
+        { workspaceId: paramWorkspaceId },
+        { workspaceId: bodyWorkspaceId }
+      );
+
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue({
+        workspaceId: headerWorkspaceId,
+        userId,
+        role: "MEMBER",
+      });
+
+      await guard.canActivate(context);
+
+      expect(mockPrismaService.workspaceMember.findUnique).toHaveBeenCalledWith({
+        where: {
+          workspaceId_userId: {
+            workspaceId: headerWorkspaceId,
+            userId,
+          },
+        },
+      });
+    });
+
+    it("should throw ForbiddenException when user is not authenticated", async () => {
+      const context = createMockExecutionContext(
+        null,
+        { "x-workspace-id": workspaceId }
+      );
+
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        ForbiddenException
+      );
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        "User not authenticated"
+      );
+    });
+
+    it("should throw BadRequestException when workspace ID is missing", async () => {
+      const context = createMockExecutionContext({ id: userId });
+
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        BadRequestException
+      );
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        "Workspace ID is required"
+      );
+    });
+
+    it("should throw ForbiddenException when user is not a workspace member", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        { "x-workspace-id": workspaceId }
+      );
+
+      mockPrismaService.workspaceMember.findUnique.mockResolvedValue(null);
+
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        ForbiddenException
+      );
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        "You do not have access to this workspace"
+      );
+    });
+
+    it("should handle database errors gracefully", async () => {
+      const context = createMockExecutionContext(
+        { id: userId },
+        { "x-workspace-id": workspaceId }
+      );
+
+      mockPrismaService.workspaceMember.findUnique.mockRejectedValue(
+        new Error("Database connection failed")
+      );
+
+      await expect(guard.canActivate(context)).rejects.toThrow(
+        ForbiddenException
+      );
+    });
+  });
+});
--- a/apps/api/src/common/guards/workspace.guard.ts
+++ b/apps/api/src/common/guards/workspace.guard.ts
@@ -0,0 +1,150 @@
+import {
+  Injectable,
+  CanActivate,
+  ExecutionContext,
+  ForbiddenException,
+  BadRequestException,
+  Logger,
+} from "@nestjs/common";
+import { PrismaService } from "../../prisma/prisma.service";
+import { setCurrentUser } from "../../lib/db-context";
+
+/**
+ * WorkspaceGuard ensures that:
+ * 1. A workspace is specified in the request (header, param, or body)
+ * 2. The authenticated user is a member of that workspace
+ * 3. The user context is set for Row-Level Security (RLS)
+ * 
+ * This guard should be used in combination with AuthGuard:
+ * 
+ * @example
+ * ```typescript
+ * @Controller('tasks')
+ * @UseGuards(AuthGuard, WorkspaceGuard)
+ * export class TasksController {
+ *   @Get()
+ *   async getTasks(@Workspace() workspaceId: string) {
+ *     // workspaceId is verified and available
+ *     // RLS context is automatically set
+ *   }
+ * }
+ * ```
+ * 
+ * The workspace ID can be provided via:
+ * - Header: `X-Workspace-Id`
+ * - URL parameter: `:workspaceId`
+ * - Request body: `workspaceId` field
+ * 
+ * Priority: Header > Param > Body
+ */
+@Injectable()
+export class WorkspaceGuard implements CanActivate {
+  private readonly logger = new Logger(WorkspaceGuard.name);
+
+  constructor(private readonly prisma: PrismaService) {}
+
+  async canActivate(context: ExecutionContext): Promise<boolean> {
+    const request = context.switchToHttp().getRequest();
+    const user = request.user;
+
+    if (!user || !user.id) {
+      throw new ForbiddenException("User not authenticated");
+    }
+
+    // Extract workspace ID from request
+    const workspaceId = this.extractWorkspaceId(request);
+
+    if (!workspaceId) {
+      throw new BadRequestException(
+        "Workspace ID is required (via header X-Workspace-Id, URL parameter, or request body)"
+      );
+    }
+
+    // Verify user is a member of the workspace
+    const isMember = await this.verifyWorkspaceMembership(
+      user.id,
+      workspaceId
+    );
+
+    if (!isMember) {
+      this.logger.warn(
+        `Access denied: User ${user.id} is not a member of workspace ${workspaceId}`
+      );
+      throw new ForbiddenException(
+        "You do not have access to this workspace"
+      );
+    }
+
+    // Set RLS context for this request
+    await setCurrentUser(user.id, this.prisma);
+
+    // Attach workspace info to request for convenience
+    request.workspace = {
+      id: workspaceId,
+    };
+
+    // Also attach workspaceId to user object for backward compatibility
+    request.user.workspaceId = workspaceId;
+
+    this.logger.debug(
+      `Workspace access granted: User ${user.id} → Workspace ${workspaceId}`
+    );
+
+    return true;
+  }
+
+  /**
+   * Extracts workspace ID from request in order of priority:
+   * 1. X-Workspace-Id header
+   * 2. :workspaceId URL parameter
+   * 3. workspaceId in request body
+   */
+  private extractWorkspaceId(request: any): string | undefined {
+    // 1. Check header
+    const headerWorkspaceId = request.headers["x-workspace-id"];
+    if (headerWorkspaceId) {
+      return headerWorkspaceId;
+    }
+
+    // 2. Check URL params
+    const paramWorkspaceId = request.params?.workspaceId;
+    if (paramWorkspaceId) {
+      return paramWorkspaceId;
+    }
+
+    // 3. Check request body
+    const bodyWorkspaceId = request.body?.workspaceId;
+    if (bodyWorkspaceId) {
+      return bodyWorkspaceId;
+    }
+
+    return undefined;
+  }
+
+  /**
+   * Verifies that a user is a member of the specified workspace
+   */
+  private async verifyWorkspaceMembership(
+    userId: string,
+    workspaceId: string
+  ): Promise<boolean> {
+    try {
+      const member = await this.prisma.workspaceMember.findUnique({
+        where: {
+          workspaceId_userId: {
+            workspaceId,
+            userId,
+          },
+        },
+      });
+
+      return member !== null;
+    } catch (error) {
+      this.logger.error(
+        `Failed to verify workspace membership: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        error instanceof Error ? error.stack : undefined
+      );
+      return false;
+    }
+  }
+}
--- a/apps/api/src/common/index.ts
+++ b/apps/api/src/common/index.ts
@@ -0,0 +1,2 @@
+export * from "./decorators";
+export * from "./guards";
--- a/apps/api/src/knowledge/knowledge.controller.ts
+++ b/apps/api/src/knowledge/knowledge.controller.ts
@@ -8,114 +8,96 @@ import {
  Param,
  Query,
  UseGuards,
-  Request,
-  UnauthorizedException,
 } from "@nestjs/common";
 import { KnowledgeService } from "./knowledge.service";
 import { CreateEntryDto, UpdateEntryDto, EntryQueryDto } from "./dto";
 import { AuthGuard } from "../auth/guards/auth.guard";
+import { WorkspaceGuard, PermissionGuard } from "../common/guards";
+import { Workspace, Permission, RequirePermission } from "../common/decorators";
+import { CurrentUser } from "../auth/decorators/current-user.decorator";

 /**
 * Controller for knowledge entry endpoints
- * All endpoints require authentication and enforce workspace isolation
+ * All endpoints require authentication and workspace context
+ * Uses the new guard-based permission system
 */
@Controller("knowledge/entries")
-@UseGuards(AuthGuard)
+@UseGuards(AuthGuard, WorkspaceGuard, PermissionGuard)
 export class KnowledgeController {
  constructor(private readonly knowledgeService: KnowledgeService) {}

  /**
   * GET /api/knowledge/entries
   * List all entries in the workspace with pagination and filtering
+   * Requires: Any workspace member
   */
  @Get()
+  @RequirePermission(Permission.WORKSPACE_ANY)
  async findAll(
-    @Request() req: any,
+    @Workspace() workspaceId: string,
    @Query() query: EntryQueryDto
  ) {
-    const workspaceId = req.user?.workspaceId;
-
-    if (!workspaceId) {
-      throw new UnauthorizedException("Workspace context required");
-    }
-
    return this.knowledgeService.findAll(workspaceId, query);
  }

  /**
   * GET /api/knowledge/entries/:slug
   * Get a single entry by slug
+   * Requires: Any workspace member
   */
  @Get(":slug")
+  @RequirePermission(Permission.WORKSPACE_ANY)
  async findOne(
-    @Request() req: any,
+    @Workspace() workspaceId: string,
    @Param("slug") slug: string
  ) {
-    const workspaceId = req.user?.workspaceId;
-
-    if (!workspaceId) {
-      throw new UnauthorizedException("Workspace context required");
-    }
-
    return this.knowledgeService.findOne(workspaceId, slug);
  }

  /**
   * POST /api/knowledge/entries
   * Create a new knowledge entry
+   * Requires: MEMBER role or higher
   */
  @Post()
+  @RequirePermission(Permission.WORKSPACE_MEMBER)
  async create(
-    @Request() req: any,
+    @Workspace() workspaceId: string,
+    @CurrentUser() user: any,
    @Body() createDto: CreateEntryDto
  ) {
-    const workspaceId = req.user?.workspaceId;
-    const userId = req.user?.id;
-
-    if (!workspaceId || !userId) {
-      throw new UnauthorizedException("Authentication required");
-    }
-
-    return this.knowledgeService.create(workspaceId, userId, createDto);
+    return this.knowledgeService.create(workspaceId, user.id, createDto);
  }

  /**
   * PUT /api/knowledge/entries/:slug
   * Update an existing entry
+   * Requires: MEMBER role or higher
   */
  @Put(":slug")
+  @RequirePermission(Permission.WORKSPACE_MEMBER)
  async update(
-    @Request() req: any,
+    @Workspace() workspaceId: string,
    @Param("slug") slug: string,
+    @CurrentUser() user: any,
    @Body() updateDto: UpdateEntryDto
  ) {
-    const workspaceId = req.user?.workspaceId;
-    const userId = req.user?.id;
-
-    if (!workspaceId || !userId) {
-      throw new UnauthorizedException("Authentication required");
-    }
-
-    return this.knowledgeService.update(workspaceId, slug, userId, updateDto);
+    return this.knowledgeService.update(workspaceId, slug, user.id, updateDto);
  }

  /**
   * DELETE /api/knowledge/entries/:slug
   * Soft delete an entry (sets status to ARCHIVED)
+   * Requires: ADMIN role or higher
   */
  @Delete(":slug")
+  @RequirePermission(Permission.WORKSPACE_ADMIN)
  async remove(
-    @Request() req: any,
-    @Param("slug") slug: string
+    @Workspace() workspaceId: string,
+    @Param("slug") slug: string,
+    @CurrentUser() user: any
  ) {
-    const workspaceId = req.user?.workspaceId;
-    const userId = req.user?.id;
-
-    if (!workspaceId || !userId) {
-      throw new UnauthorizedException("Authentication required");
-    }
-
-    await this.knowledgeService.remove(workspaceId, slug, userId);
+    await this.knowledgeService.remove(workspaceId, slug, user.id);
    return { message: "Entry archived successfully" };
  }
 }
--- a/apps/api/src/lib/db-context.ts
+++ b/apps/api/src/lib/db-context.ts
@@ -8,8 +8,18 @@
 * @see docs/design/multi-tenant-rls.md for full documentation
 */

-import { prisma } from '@mosaic/database';
-import type { PrismaClient } from '@prisma/client';
+import { PrismaClient } from '@prisma/client';
+
+// Global prisma instance for standalone usage
+// Note: In NestJS controllers/services, inject PrismaService instead
+let prisma: PrismaClient | null = null;
+
+function getPrismaInstance(): PrismaClient {
+  if (!prisma) {
+    prisma = new PrismaClient();
+  }
+  return prisma;
+}

 /**
 * Sets the current user ID for RLS policies.
@@ -26,9 +36,10 @@ import type { PrismaClient } from '@prisma/client';
 */
 export async function setCurrentUser(
  userId: string,
-  client: PrismaClient = prisma
+  client?: PrismaClient
 ): Promise<void> {
-  await client.$executeRaw`SET LOCAL app.current_user_id = ${userId}`;
+  const prismaClient = client || getPrismaInstance();
+  await prismaClient.$executeRaw`SET LOCAL app.current_user_id = ${userId}`;
 }

 /**
@@ -38,9 +49,10 @@ export async function setCurrentUser(
 * @param client - Optional Prisma client (defaults to global prisma)
 */
 export async function clearCurrentUser(
-  client: PrismaClient = prisma
+  client?: PrismaClient
 ): Promise<void> {
-  await client.$executeRaw`SET LOCAL app.current_user_id = NULL`;
+  const prismaClient = client || getPrismaInstance();
+  await prismaClient.$executeRaw`SET LOCAL app.current_user_id = NULL`;
 }

 /**
@@ -103,10 +115,11 @@ export async function withUserContext<T>(
 */
 export async function withUserTransaction<T>(
  userId: string,
-  fn: (tx: PrismaClient) => Promise<T>
+  fn: (tx: any) => Promise<T>
 ): Promise<T> {
-  return prisma.$transaction(async (tx) => {
-    await setCurrentUser(userId, tx);
+  const prismaClient = getPrismaInstance();
+  return prismaClient.$transaction(async (tx) => {
+    await setCurrentUser(userId, tx as PrismaClient);
    return fn(tx);
  });
 }
@@ -155,8 +168,9 @@ export async function verifyWorkspaceAccess(
  userId: string,
  workspaceId: string
 ): Promise<boolean> {
+  const prismaClient = getPrismaInstance();
  return withUserContext(userId, async () => {
-    const member = await prisma.workspaceMember.findUnique({
+    const member = await prismaClient.workspaceMember.findUnique({
      where: {
        workspaceId_userId: {
          workspaceId,
@@ -181,8 +195,9 @@ export async function verifyWorkspaceAccess(
 * ```
 */
 export async function getUserWorkspaces(userId: string) {
+  const prismaClient = getPrismaInstance();
  return withUserContext(userId, async () => {
-    return prisma.workspace.findMany({
+    return prismaClient.workspace.findMany({
      include: {
        members: {
          where: { userId },
@@ -204,8 +219,9 @@ export async function isWorkspaceAdmin(
  userId: string,
  workspaceId: string
 ): Promise<boolean> {
+  const prismaClient = getPrismaInstance();
  return withUserContext(userId, async () => {
-    const member = await prisma.workspaceMember.findUnique({
+    const member = await prismaClient.workspaceMember.findUnique({
      where: {
        workspaceId_userId: {
          workspaceId,
--- a/apps/api/src/tasks/tasks.controller.ts
+++ b/apps/api/src/tasks/tasks.controller.ts
@@ -8,97 +8,96 @@ import {
  Param,
  Query,
  UseGuards,
-  Request,
-  UnauthorizedException,
 } from "@nestjs/common";
 import { TasksService } from "./tasks.service";
 import { CreateTaskDto, UpdateTaskDto, QueryTasksDto } from "./dto";
 import { AuthGuard } from "../auth/guards/auth.guard";
+import { WorkspaceGuard, PermissionGuard } from "../common/guards";
+import { Workspace, Permission, RequirePermission } from "../common/decorators";
+import { CurrentUser } from "../auth/decorators/current-user.decorator";

 /**
 * Controller for task endpoints
- * All endpoints require authentication
+ * All endpoints require authentication and workspace context
+ * 
+ * Guards are applied in order:
+ * 1. AuthGuard - Verifies user authentication
+ * 2. WorkspaceGuard - Validates workspace access and sets RLS context
+ * 3. PermissionGuard - Checks role-based permissions
 */
@Controller("tasks")
-@UseGuards(AuthGuard)
+@UseGuards(AuthGuard, WorkspaceGuard, PermissionGuard)
 export class TasksController {
  constructor(private readonly tasksService: TasksService) {}

  /**
   * POST /api/tasks
   * Create a new task
+   * Requires: MEMBER role or higher
   */
  @Post()
-  async create(@Body() createTaskDto: CreateTaskDto, @Request() req: any) {
-    const workspaceId = req.user?.workspaceId;
-    const userId = req.user?.id;
-
-    if (!workspaceId || !userId) {
-      throw new UnauthorizedException("Authentication required");
-    }
-
-    return this.tasksService.create(workspaceId, userId, createTaskDto);
+  @RequirePermission(Permission.WORKSPACE_MEMBER)
+  async create(
+    @Body() createTaskDto: CreateTaskDto,
+    @Workspace() workspaceId: string,
+    @CurrentUser() user: any
+  ) {
+    return this.tasksService.create(workspaceId, user.id, createTaskDto);
  }

  /**
   * GET /api/tasks
   * Get paginated tasks with optional filters
+   * Requires: Any workspace member (including GUEST)
   */
  @Get()
-  async findAll(@Query() query: QueryTasksDto, @Request() req: any) {
-    const workspaceId = req.user?.workspaceId;
-    if (!workspaceId) {
-      throw new UnauthorizedException("Authentication required");
-    }
+  @RequirePermission(Permission.WORKSPACE_ANY)
+  async findAll(
+    @Query() query: QueryTasksDto,
+    @Workspace() workspaceId: string
+  ) {
    return this.tasksService.findAll({ ...query, workspaceId });
  }

  /**
   * GET /api/tasks/:id
   * Get a single task by ID
+   * Requires: Any workspace member
   */
  @Get(":id")
-  async findOne(@Param("id") id: string, @Request() req: any) {
-    const workspaceId = req.user?.workspaceId;
-    if (!workspaceId) {
-      throw new UnauthorizedException("Authentication required");
-    }
+  @RequirePermission(Permission.WORKSPACE_ANY)
+  async findOne(@Param("id") id: string, @Workspace() workspaceId: string) {
    return this.tasksService.findOne(id, workspaceId);
  }

  /**
   * PATCH /api/tasks/:id
   * Update a task
+   * Requires: MEMBER role or higher
   */
  @Patch(":id")
+  @RequirePermission(Permission.WORKSPACE_MEMBER)
  async update(
    @Param("id") id: string,
    @Body() updateTaskDto: UpdateTaskDto,
-    @Request() req: any
+    @Workspace() workspaceId: string,
+    @CurrentUser() user: any
  ) {
-    const workspaceId = req.user?.workspaceId;
-    const userId = req.user?.id;
-
-    if (!workspaceId || !userId) {
-      throw new UnauthorizedException("Authentication required");
-    }
-
-    return this.tasksService.update(id, workspaceId, userId, updateTaskDto);
+    return this.tasksService.update(id, workspaceId, user.id, updateTaskDto);
  }

  /**
   * DELETE /api/tasks/:id
   * Delete a task
+   * Requires: ADMIN role or higher
   */
  @Delete(":id")
-  async remove(@Param("id") id: string, @Request() req: any) {
-    const workspaceId = req.user?.workspaceId;
-    const userId = req.user?.id;
-
-    if (!workspaceId || !userId) {
-      throw new UnauthorizedException("Authentication required");
-    }
-
-    return this.tasksService.remove(id, workspaceId, userId);
+  @RequirePermission(Permission.WORKSPACE_ADMIN)
+  async remove(
+    @Param("id") id: string,
+    @Workspace() workspaceId: string,
+    @CurrentUser() user: any
+  ) {
+    return this.tasksService.remove(id, workspaceId, user.id);
  }
 }
--- a/apps/api/src/users/dto/index.ts
+++ b/apps/api/src/users/dto/index.ts
@@ -0,0 +1,2 @@
+export * from "./update-preferences.dto";
+export * from "./preferences-response.dto";
--- a/apps/api/src/users/dto/preferences-response.dto.ts
+++ b/apps/api/src/users/dto/preferences-response.dto.ts
@@ -0,0 +1,12 @@
+/**
+ * Response DTO for user preferences
+ */
+export interface PreferencesResponseDto {
+  id: string;
+  userId: string;
+  theme: string;
+  locale: string;
+  timezone: string | null;
+  settings: Record<string, unknown>;
+  updatedAt: Date;
+}
--- a/apps/api/src/users/dto/update-preferences.dto.ts
+++ b/apps/api/src/users/dto/update-preferences.dto.ts
@@ -0,0 +1,25 @@
+import { IsString, IsOptional, IsObject, IsIn } from "class-validator";
+
+/**
+ * DTO for updating user preferences
+ */
+export class UpdatePreferencesDto {
+  @IsOptional()
+  @IsString({ message: "theme must be a string" })
+  @IsIn(["light", "dark", "system"], {
+    message: "theme must be one of: light, dark, system",
+  })
+  theme?: string;
+
+  @IsOptional()
+  @IsString({ message: "locale must be a string" })
+  locale?: string;
+
+  @IsOptional()
+  @IsString({ message: "timezone must be a string" })
+  timezone?: string;
+
+  @IsOptional()
+  @IsObject({ message: "settings must be an object" })
+  settings?: Record<string, unknown>;
+}
--- a/apps/api/src/users/preferences.controller.ts
+++ b/apps/api/src/users/preferences.controller.ts
@@ -0,0 +1,55 @@
+import {
+  Controller,
+  Get,
+  Put,
+  Body,
+  UseGuards,
+  Request,
+  UnauthorizedException,
+} from "@nestjs/common";
+import { PreferencesService } from "./preferences.service";
+import { UpdatePreferencesDto } from "./dto";
+import { AuthGuard } from "../auth/guards/auth.guard";
+
+/**
+ * Controller for user preferences endpoints
+ * All endpoints require authentication
+ */
+@Controller("users/me/preferences")
+@UseGuards(AuthGuard)
+export class PreferencesController {
+  constructor(private readonly preferencesService: PreferencesService) {}
+
+  /**
+   * GET /api/users/me/preferences
+   * Get current user's preferences
+   */
+  @Get()
+  async getPreferences(@Request() req: any) {
+    const userId = req.user?.id;
+
+    if (!userId) {
+      throw new UnauthorizedException("Authentication required");
+    }
+
+    return this.preferencesService.getPreferences(userId);
+  }
+
+  /**
+   * PUT /api/users/me/preferences
+   * Update current user's preferences
+   */
+  @Put()
+  async updatePreferences(
+    @Body() updatePreferencesDto: UpdatePreferencesDto,
+    @Request() req: any
+  ) {
+    const userId = req.user?.id;
+
+    if (!userId) {
+      throw new UnauthorizedException("Authentication required");
+    }
+
+    return this.preferencesService.updatePreferences(userId, updatePreferencesDto);
+  }
+}
--- a/apps/api/src/users/preferences.service.ts
+++ b/apps/api/src/users/preferences.service.ts
@@ -0,0 +1,104 @@
+import { Injectable } from "@nestjs/common";
+import { Prisma } from "@prisma/client";
+import { PrismaService } from "../prisma/prisma.service";
+import type {
+  UpdatePreferencesDto,
+  PreferencesResponseDto,
+} from "./dto";
+
+/**
+ * Service for managing user preferences
+ */
+@Injectable()
+export class PreferencesService {
+  constructor(private readonly prisma: PrismaService) {}
+
+  /**
+   * Get user preferences (create with defaults if not exists)
+   */
+  async getPreferences(userId: string): Promise<PreferencesResponseDto> {
+    let preferences = await this.prisma.userPreference.findUnique({
+      where: { userId },
+    });
+
+    // Create default preferences if they don't exist
+    if (!preferences) {
+      preferences = await this.prisma.userPreference.create({
+        data: {
+          userId,
+          theme: "system",
+          locale: "en",
+          settings: {} as unknown as Prisma.InputJsonValue,
+        },
+      });
+    }
+
+    return {
+      id: preferences.id,
+      userId: preferences.userId,
+      theme: preferences.theme,
+      locale: preferences.locale,
+      timezone: preferences.timezone,
+      settings: preferences.settings as Record<string, unknown>,
+      updatedAt: preferences.updatedAt,
+    };
+  }
+
+  /**
+   * Update user preferences
+   */
+  async updatePreferences(
+    userId: string,
+    updateDto: UpdatePreferencesDto
+  ): Promise<PreferencesResponseDto> {
+    // Check if preferences exist
+    const existing = await this.prisma.userPreference.findUnique({
+      where: { userId },
+    });
+
+    let preferences;
+
+    if (existing) {
+      // Update existing preferences
+      preferences = await this.prisma.userPreference.update({
+        where: { userId },
+        data: {
+          ...(updateDto.theme && { theme: updateDto.theme }),
+          ...(updateDto.locale && { locale: updateDto.locale }),
+          ...(updateDto.timezone !== undefined && {
+            timezone: updateDto.timezone,
+          }),
+          ...(updateDto.settings && {
+            settings: updateDto.settings as unknown as Prisma.InputJsonValue,
+          }),
+        },
+      });
+    } else {
+      // Create new preferences
+      const createData: Prisma.UserPreferenceUncheckedCreateInput = {
+        userId,
+        theme: updateDto.theme || "system",
+        locale: updateDto.locale || "en",
+        settings: (updateDto.settings || {}) as unknown as Prisma.InputJsonValue,
+      };
+      
+      if (updateDto.timezone !== undefined) {
+        createData.timezone = updateDto.timezone;
+      }
+      
+      preferences = await this.prisma.userPreference.create({
+        data: createData,
+      });
+    }
+
+    return {
+      id: preferences.id,
+      userId: preferences.userId,
+      theme: preferences.theme,
+      locale: preferences.locale,
+      timezone: preferences.timezone,
+      settings: preferences.settings as Record<string, unknown>,
+      updatedAt: preferences.updatedAt,
+    };
+  }
+}
--- a/apps/api/src/users/users.module.ts
+++ b/apps/api/src/users/users.module.ts
@@ -0,0 +1,16 @@
+import { Module } from "@nestjs/common";
+import { PreferencesController } from "./preferences.controller";
+import { PreferencesService } from "./preferences.service";
+import { PrismaModule } from "../prisma/prisma.module";
+import { AuthModule } from "../auth/auth.module";
+
+/**
+ * Module for user-related endpoints (preferences, etc.)
+ */
+@Module({
+  imports: [PrismaModule, AuthModule],
+  controllers: [PreferencesController],
+  providers: [PreferencesService],
+  exports: [PreferencesService],
+})
+export class UsersModule {}
--- a/apps/web/src/app/(authenticated)/knowledge/new/page.tsx
+++ b/apps/web/src/app/(authenticated)/knowledge/new/page.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { EntryStatus, Visibility, type KnowledgeTag } from "@mosaic/shared";
+import { EntryEditor } from "@/components/knowledge/EntryEditor";
+import { EntryMetadata } from "@/components/knowledge/EntryMetadata";
+import { createEntry, fetchTags } from "@/lib/api/knowledge";
+
+/**
+ * New Knowledge Entry Page
+ * Form for creating a new knowledge entry
+ */
+export default function NewEntryPage(): JSX.Element {
+  const router = useRouter();
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [status, setStatus] = useState<EntryStatus>(EntryStatus.DRAFT);
+  const [visibility, setVisibility] = useState<Visibility>(Visibility.WORKSPACE);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [availableTags, setAvailableTags] = useState<KnowledgeTag[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  // Load available tags
+  useEffect(() => {
+    async function loadTags(): Promise<void> {
+      try {
+        const tags = await fetchTags();
+        setAvailableTags(tags);
+      } catch (err) {
+        console.error("Failed to load tags:", err);
+      }
+    }
+    void loadTags();
+  }, []);
+
+  // Track unsaved changes
+  useEffect(() => {
+    setHasUnsavedChanges(title.length > 0 || content.length > 0);
+  }, [title, content]);
+
+  // Warn before leaving with unsaved changes
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent): string => {
+      if (hasUnsavedChanges) {
+        e.preventDefault();
+        return "You have unsaved changes. Are you sure you want to leave?";
+      }
+      return "";
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [hasUnsavedChanges]);
+
+  // Cmd+S / Ctrl+S to save
+  const handleSave = useCallback(async (): Promise<void> => {
+    if (isSubmitting || !title.trim() || !content.trim()) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      const entry = await createEntry({
+        title: title.trim(),
+        content: content.trim(),
+        status,
+        visibility,
+        tags: selectedTags,
+      });
+
+      setHasUnsavedChanges(false);
+      router.push(`/knowledge/${entry.slug}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create entry");
+      setIsSubmitting(false);
+    }
+  }, [title, content, status, visibility, selectedTags, isSubmitting, router]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent): void => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        void handleSave();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleSave]);
+
+  const handleCancel = (): void => {
+    if (
+      !hasUnsavedChanges ||
+      confirm("You have unsaved changes. Are you sure you want to cancel?")
+    ) {
+      router.push("/knowledge");
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent): void => {
+    e.preventDefault();
+    void handleSave();
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6">
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
+          New Knowledge Entry
+        </h1>
+        <p className="mt-2 text-gray-600 dark:text-gray-400">
+          Create a new entry in your knowledge base
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
+          <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <EntryMetadata
+          title={title}
+          status={status}
+          visibility={visibility}
+          selectedTags={selectedTags}
+          availableTags={availableTags}
+          onTitleChange={setTitle}
+          onStatusChange={setStatus}
+          onVisibilityChange={setVisibility}
+          onTagsChange={setSelectedTags}
+        />
+
+        <EntryEditor content={content} onChange={setContent} />
+
+        <div className="flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+          <button
+            type="button"
+            onClick={handleCancel}
+            disabled={isSubmitting}
+            className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={isSubmitting || !title.trim() || !content.trim()}
+            className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50"
+          >
+            {isSubmitting ? "Creating..." : "Create Entry"}
+          </button>
+        </div>
+
+        <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
+          Press <kbd className="px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded">Cmd+S</kbd>{" "}
+          or <kbd className="px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded">Ctrl+S</kbd> to
+          save
+        </p>
+      </form>
+    </div>
+  );
+}
--- a/apps/web/src/app/(authenticated)/settings/workspaces/[id]/page.tsx
+++ b/apps/web/src/app/(authenticated)/settings/workspaces/[id]/page.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { WorkspaceSettings } from "@/components/workspace/WorkspaceSettings";
+import { MemberList } from "@/components/workspace/MemberList";
+import { InviteMember } from "@/components/workspace/InviteMember";
+import { WorkspaceMemberRole } from "@mosaic/shared";
+import type { Workspace, WorkspaceMemberWithUser } from "@mosaic/shared";
+import Link from "next/link";
+
+interface WorkspaceDetailPageProps {
+  params: {
+    id: string;
+  };
+}
+
+// Mock data - TODO: Replace with real API calls
+const mockWorkspace: Workspace = {
+  id: "ws-1",
+  name: "Personal Workspace",
+  ownerId: "user-1",
+  settings: {},
+  createdAt: new Date("2024-01-15"),
+  updatedAt: new Date("2024-01-15"),
+};
+
+const mockMembers: WorkspaceMemberWithUser[] = [
+  {
+    workspaceId: "ws-1",
+    userId: "user-1",
+    role: WorkspaceMemberRole.OWNER,
+    joinedAt: new Date("2024-01-15"),
+    user: {
+      id: "user-1",
+      email: "owner@example.com",
+      name: "John Doe",
+      emailVerified: true,
+      image: null,
+      authProviderId: null,
+      preferences: {},
+      createdAt: new Date("2024-01-15"),
+      updatedAt: new Date("2024-01-15"),
+    },
+  },
+  {
+    workspaceId: "ws-1",
+    userId: "user-2",
+    role: WorkspaceMemberRole.ADMIN,
+    joinedAt: new Date("2024-01-16"),
+    user: {
+      id: "user-2",
+      email: "admin@example.com",
+      name: "Jane Smith",
+      emailVerified: true,
+      image: null,
+      authProviderId: null,
+      preferences: {},
+      createdAt: new Date("2024-01-16"),
+      updatedAt: new Date("2024-01-16"),
+    },
+  },
+  {
+    workspaceId: "ws-1",
+    userId: "user-3",
+    role: WorkspaceMemberRole.MEMBER,
+    joinedAt: new Date("2024-01-17"),
+    user: {
+      id: "user-3",
+      email: "member@example.com",
+      name: "Bob Johnson",
+      emailVerified: true,
+      image: null,
+      authProviderId: null,
+      preferences: {},
+      createdAt: new Date("2024-01-17"),
+      updatedAt: new Date("2024-01-17"),
+    },
+  },
+];
+
+export default function WorkspaceDetailPage({ params }: WorkspaceDetailPageProps) {
+  const router = useRouter();
+  const [workspace, setWorkspace] = useState<Workspace>(mockWorkspace);
+  const [members, setMembers] = useState<WorkspaceMemberWithUser[]>(mockMembers);
+  const currentUserId = "user-1"; // TODO: Get from auth context
+  const currentUserRole = WorkspaceMemberRole.OWNER; // TODO: Get from API
+
+  const canInvite =
+    currentUserRole === WorkspaceMemberRole.OWNER ||
+    currentUserRole === WorkspaceMemberRole.ADMIN;
+
+  const handleUpdateWorkspace = async (name: string) => {
+    // TODO: Replace with real API call
+    console.log("Updating workspace:", { id: params.id, name });
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setWorkspace({ ...workspace, name, updatedAt: new Date() });
+  };
+
+  const handleDeleteWorkspace = async () => {
+    // TODO: Replace with real API call
+    console.log("Deleting workspace:", params.id);
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    router.push("/settings/workspaces");
+  };
+
+  const handleRoleChange = async (userId: string, newRole: WorkspaceMemberRole) => {
+    // TODO: Replace with real API call
+    console.log("Changing role:", { userId, newRole });
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setMembers(
+      members.map((member) =>
+        member.userId === userId ? { ...member, role: newRole } : member
+      )
+    );
+  };
+
+  const handleRemoveMember = async (userId: string) => {
+    // TODO: Replace with real API call
+    console.log("Removing member:", userId);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setMembers(members.filter((member) => member.userId !== userId));
+  };
+
+  const handleInviteMember = async (email: string, role: WorkspaceMemberRole) => {
+    // TODO: Replace with real API call
+    console.log("Inviting member:", { email, role, workspaceId: params.id });
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    // In real implementation, this would send an invitation email
+  };
+
+  return (
+    <main className="container mx-auto px-4 py-8 max-w-5xl">
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-2">
+          <h1 className="text-3xl font-bold text-gray-900">{workspace.name}</h1>
+          <Link
+            href="/settings/workspaces"
+            className="text-sm text-blue-600 hover:text-blue-700"
+          >
+            ← Back to Workspaces
+          </Link>
+        </div>
+        <p className="text-gray-600">
+          Manage workspace settings and team members
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        {/* Workspace Settings */}
+        <WorkspaceSettings
+          workspace={workspace}
+          userRole={currentUserRole}
+          onUpdate={handleUpdateWorkspace}
+          onDelete={handleDeleteWorkspace}
+        />
+
+        {/* Members Section */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div className="lg:col-span-2">
+            <MemberList
+              members={members}
+              currentUserId={currentUserId}
+              currentUserRole={currentUserRole}
+              workspaceOwnerId={workspace.ownerId}
+              onRoleChange={handleRoleChange}
+              onRemove={handleRemoveMember}
+            />
+          </div>
+
+          {/* Invite Member */}
+          {canInvite && (
+            <div className="lg:col-span-2">
+              <InviteMember onInvite={handleInviteMember} />
+            </div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}
--- a/apps/web/src/app/(authenticated)/settings/workspaces/page.tsx
+++ b/apps/web/src/app/(authenticated)/settings/workspaces/page.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { useState } from "react";
+import { WorkspaceCard } from "@/components/workspace/WorkspaceCard";
+import { WorkspaceMemberRole } from "@mosaic/shared";
+import Link from "next/link";
+
+// Mock data - TODO: Replace with real API calls
+const mockWorkspaces = [
+  {
+    id: "ws-1",
+    name: "Personal Workspace",
+    ownerId: "user-1",
+    settings: {},
+    createdAt: new Date("2024-01-15"),
+    updatedAt: new Date("2024-01-15"),
+  },
+  {
+    id: "ws-2",
+    name: "Team Alpha",
+    ownerId: "user-2",
+    settings: {},
+    createdAt: new Date("2024-01-20"),
+    updatedAt: new Date("2024-01-20"),
+  },
+];
+
+const mockMemberships = [
+  { workspaceId: "ws-1", role: WorkspaceMemberRole.OWNER, memberCount: 1 },
+  { workspaceId: "ws-2", role: WorkspaceMemberRole.MEMBER, memberCount: 5 },
+];
+
+export default function WorkspacesPage() {
+  const [isCreating, setIsCreating] = useState(false);
+  const [newWorkspaceName, setNewWorkspaceName] = useState("");
+
+  // TODO: Replace with real API call
+  const workspacesWithRoles = mockWorkspaces.map((workspace) => {
+    const membership = mockMemberships.find((m) => m.workspaceId === workspace.id);
+    return {
+      ...workspace,
+      userRole: membership?.role || WorkspaceMemberRole.GUEST,
+      memberCount: membership?.memberCount || 0,
+    };
+  });
+
+  const handleCreateWorkspace = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newWorkspaceName.trim()) return;
+
+    setIsCreating(true);
+    try {
+      // TODO: Replace with real API call
+      console.log("Creating workspace:", newWorkspaceName);
+      await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate API call
+      alert(`Workspace "${newWorkspaceName}" created successfully!`);
+      setNewWorkspaceName("");
+    } catch (error) {
+      console.error("Failed to create workspace:", error);
+      alert("Failed to create workspace");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <main className="container mx-auto px-4 py-8 max-w-5xl">
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-2">
+          <h1 className="text-3xl font-bold text-gray-900">Workspaces</h1>
+          <Link
+            href="/settings"
+            className="text-sm text-blue-600 hover:text-blue-700"
+          >
+            ← Back to Settings
+          </Link>
+        </div>
+        <p className="text-gray-600">
+          Manage your workspaces and collaborate with your team
+        </p>
+      </div>
+
+      {/* Create New Workspace */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
+        <h2 className="text-lg font-semibold text-gray-900 mb-4">
+          Create New Workspace
+        </h2>
+        <form onSubmit={handleCreateWorkspace} className="flex gap-3">
+          <input
+            type="text"
+            value={newWorkspaceName}
+            onChange={(e) => setNewWorkspaceName(e.target.value)}
+            placeholder="Enter workspace name..."
+            disabled={isCreating}
+            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"
+          />
+          <button
+            type="submit"
+            disabled={isCreating || !newWorkspaceName.trim()}
+            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+          >
+            {isCreating ? "Creating..." : "Create Workspace"}
+          </button>
+        </form>
+      </div>
+
+      {/* Workspace List */}
+      <div className="space-y-4">
+        <h2 className="text-xl font-semibold text-gray-900">
+          Your Workspaces ({workspacesWithRoles.length})
+        </h2>
+        {workspacesWithRoles.length === 0 ? (
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
+            <svg
+              className="mx-auto h-12 w-12 text-gray-400 mb-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+              />
+            </svg>
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
+              No workspaces yet
+            </h3>
+            <p className="text-gray-600">
+              Create your first workspace to get started
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {workspacesWithRoles.map((workspace) => (
+              <WorkspaceCard
+                key={workspace.id}
+                workspace={workspace}
+                userRole={workspace.userRole}
+                memberCount={workspace.memberCount}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}
--- a/apps/web/src/components/knowledge/EntryCard.tsx
+++ b/apps/web/src/components/knowledge/EntryCard.tsx
@@ -0,0 +1,106 @@
+import type { KnowledgeEntryWithTags } from "@mosaic/shared";
+import { EntryStatus } from "@mosaic/shared";
+import Link from "next/link";
+import { FileText, Eye, Users, Lock } from "lucide-react";
+
+interface EntryCardProps {
+  entry: KnowledgeEntryWithTags;
+}
+
+const statusConfig = {
+  [EntryStatus.DRAFT]: {
+    label: "Draft",
+    className: "bg-gray-100 text-gray-700",
+    icon: "📝",
+  },
+  [EntryStatus.PUBLISHED]: {
+    label: "Published",
+    className: "bg-green-100 text-green-700",
+    icon: "✅",
+  },
+  [EntryStatus.ARCHIVED]: {
+    label: "Archived",
+    className: "bg-amber-100 text-amber-700",
+    icon: "📦",
+  },
+};
+
+const visibilityIcons = {
+  PRIVATE: <Lock className="w-3 h-3" />,
+  WORKSPACE: <Users className="w-3 h-3" />,
+  PUBLIC: <Eye className="w-3 h-3" />,
+};
+
+export function EntryCard({ entry }: EntryCardProps) {
+  const statusInfo = statusConfig[entry.status];
+  const visibilityIcon = visibilityIcons[entry.visibility];
+
+  return (
+    <Link
+      href={`/knowledge/${entry.slug}`}
+      className="block bg-white p-5 rounded-lg shadow-sm border border-gray-200 hover:shadow-md hover:border-blue-300 transition-all"
+    >
+      <div className="flex items-start gap-4">
+        <div className="flex-shrink-0 mt-1">
+          <FileText className="w-5 h-5 text-gray-400" />
+        </div>
+
+        <div className="flex-1 min-w-0">
+          {/* Title */}
+          <h3 className="font-semibold text-gray-900 mb-2 text-lg hover:text-blue-600 transition-colors">
+            {entry.title}
+          </h3>
+
+          {/* Summary */}
+          {entry.summary && (
+            <p className="text-sm text-gray-600 mb-3 line-clamp-2">
+              {entry.summary}
+            </p>
+          )}
+
+          {/* Tags */}
+          {entry.tags && entry.tags.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mb-3">
+              {entry.tags.map((tag) => (
+                <span
+                  key={tag.id}
+                  className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
+                  style={{
+                    backgroundColor: tag.color ? `${tag.color}20` : "#E5E7EB",
+                    color: tag.color || "#6B7280",
+                  }}
+                >
+                  {tag.name}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {/* Metadata row */}
+          <div className="flex flex-wrap items-center gap-3 text-xs text-gray-500">
+            {/* Status */}
+            <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full ${statusInfo.className}`}>
+              <span>{statusInfo.icon}</span>
+              <span>{statusInfo.label}</span>
+            </span>
+
+            {/* Visibility */}
+            <span className="inline-flex items-center gap-1">
+              {visibilityIcon}
+              <span className="capitalize">{entry.visibility.toLowerCase()}</span>
+            </span>
+
+            {/* Updated date */}
+            <span>
+              Updated {new Date(entry.updatedAt).toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+              })}
+            </span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
--- a/apps/web/src/components/knowledge/EntryEditor.tsx
+++ b/apps/web/src/components/knowledge/EntryEditor.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import React, { useState } from "react";
+
+interface EntryEditorProps {
+  content: string;
+  onChange: (content: string) => void;
+}
+
+/**
+ * EntryEditor - Markdown editor with live preview
+ */
+export function EntryEditor({ content, onChange }: EntryEditorProps): JSX.Element {
+  const [showPreview, setShowPreview] = useState(false);
+
+  return (
+    <div className="entry-editor">
+      <div className="flex justify-between items-center mb-2">
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+          Content (Markdown)
+        </label>
+        <button
+          type="button"
+          onClick={() => setShowPreview(!showPreview)}
+          className="text-sm text-blue-600 dark:text-blue-400 hover:underline"
+        >
+          {showPreview ? "Edit" : "Preview"}
+        </button>
+      </div>
+
+      {showPreview ? (
+        <div className="prose prose-sm max-w-none dark:prose-invert p-4 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 min-h-[300px]">
+          <div className="whitespace-pre-wrap">{content}</div>
+        </div>
+      ) : (
+        <textarea
+          value={content}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full min-h-[300px] p-4 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          placeholder="Write your content here... (Markdown supported)"
+        />
+      )}
+
+      <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+        Supports Markdown formatting. Use the Preview button to see how it will look.
+      </p>
+    </div>
+  );
+}
--- a/apps/web/src/components/knowledge/EntryFilters.tsx
+++ b/apps/web/src/components/knowledge/EntryFilters.tsx
@@ -0,0 +1,125 @@
+import { EntryStatus } from "@mosaic/shared";
+import type { KnowledgeTag } from "@mosaic/shared";
+import { Search, Filter } from "lucide-react";
+
+interface EntryFiltersProps {
+  selectedStatus: EntryStatus | "all";
+  selectedTag: string | "all";
+  searchQuery: string;
+  sortBy: "updatedAt" | "createdAt" | "title";
+  sortOrder: "asc" | "desc";
+  tags: KnowledgeTag[];
+  onStatusChange: (status: EntryStatus | "all") => void;
+  onTagChange: (tag: string | "all") => void;
+  onSearchChange: (query: string) => void;
+  onSortChange: (sortBy: "updatedAt" | "createdAt" | "title", sortOrder: "asc" | "desc") => void;
+}
+
+export function EntryFilters({
+  selectedStatus,
+  selectedTag,
+  searchQuery,
+  sortBy,
+  sortOrder,
+  tags,
+  onStatusChange,
+  onTagChange,
+  onSearchChange,
+  onSortChange,
+}: EntryFiltersProps) {
+  const statusOptions: Array<{ value: EntryStatus | "all"; label: string }> = [
+    { value: "all", label: "All Status" },
+    { value: EntryStatus.DRAFT, label: "Draft" },
+    { value: EntryStatus.PUBLISHED, label: "Published" },
+    { value: EntryStatus.ARCHIVED, label: "Archived" },
+  ];
+
+  const sortOptions: Array<{
+    value: "updatedAt" | "createdAt" | "title";
+    label: string;
+  }> = [
+    { value: "updatedAt", label: "Last Updated" },
+    { value: "createdAt", label: "Created Date" },
+    { value: "title", label: "Title" },
+  ];
+
+  return (
+    <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-6 space-y-4">
+      {/* Search */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+        <input
+          type="text"
+          placeholder="Search entries..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        />
+      </div>
+
+      {/* Filters row */}
+      <div className="flex flex-wrap gap-3">
+        {/* Status filter */}
+        <div className="flex items-center gap-2">
+          <Filter className="w-4 h-4 text-gray-500" />
+          <select
+            value={selectedStatus}
+            onChange={(e) => onStatusChange(e.target.value as EntryStatus | "all")}
+            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            {statusOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Tag filter */}
+        <div>
+          <select
+            value={selectedTag}
+            onChange={(e) => onTagChange(e.target.value)}
+            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            <option value="all">All Tags</option>
+            {tags.map((tag) => (
+              <option key={tag.id} value={tag.slug}>
+                {tag.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Sort controls */}
+        <div className="flex items-center gap-2 ml-auto">
+          <span className="text-sm text-gray-600">Sort by:</span>
+          <select
+            value={sortBy}
+            onChange={(e) =>
+              onSortChange(
+                e.target.value as "updatedAt" | "createdAt" | "title",
+                sortOrder
+              )
+            }
+            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            {sortOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+
+          <button
+            onClick={() => onSortChange(sortBy, sortOrder === "asc" ? "desc" : "asc")}
+            className="px-3 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition-colors"
+            title={sortOrder === "asc" ? "Sort descending" : "Sort ascending"}
+          >
+            {sortOrder === "asc" ? "↑" : "↓"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/components/knowledge/EntryList.tsx
+++ b/apps/web/src/components/knowledge/EntryList.tsx
@@ -0,0 +1,117 @@
+import type { KnowledgeEntryWithTags } from "@mosaic/shared";
+import { EntryCard } from "./EntryCard";
+import { BookOpen } from "lucide-react";
+
+interface EntryListProps {
+  entries: KnowledgeEntryWithTags[];
+  isLoading: boolean;
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export function EntryList({
+  entries,
+  isLoading,
+  currentPage,
+  totalPages,
+  onPageChange,
+}: EntryListProps) {
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center p-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+        <span className="ml-3 text-gray-600">Loading entries...</span>
+      </div>
+    );
+  }
+
+  if (!entries || entries.length === 0) {
+    return (
+      <div className="text-center p-12 bg-white rounded-lg shadow-sm border border-gray-200">
+        <BookOpen className="w-12 h-12 text-gray-400 mx-auto mb-3" />
+        <p className="text-lg text-gray-700 font-medium">No entries found</p>
+        <p className="text-sm text-gray-500 mt-2">
+          Try adjusting your filters or create a new entry
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Entry cards */}
+      <div className="space-y-4">
+        {entries.map((entry) => (
+          <EntryCard key={entry.id} entry={entry} />
+        ))}
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2 pt-6">
+          <button
+            onClick={() => onPageChange(currentPage - 1)}
+            disabled={currentPage === 1}
+            className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Previous
+          </button>
+
+          <div className="flex items-center gap-1">
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {
+              // Show first, last, current, and pages around current
+              const shouldShow =
+                page === 1 ||
+                page === totalPages ||
+                Math.abs(page - currentPage) <= 1;
+
+              // Show ellipsis
+              const showEllipsisBefore = page === currentPage - 2 && currentPage > 3;
+              const showEllipsisAfter = page === currentPage + 2 && currentPage < totalPages - 2;
+
+              if (!shouldShow && !showEllipsisBefore && !showEllipsisAfter) {
+                return null;
+              }
+
+              if (showEllipsisBefore || showEllipsisAfter) {
+                return (
+                  <span key={`ellipsis-${page}`} className="px-2 text-gray-500">
+                    ...
+                  </span>
+                );
+              }
+
+              return (
+                <button
+                  key={page}
+                  onClick={() => onPageChange(page)}
+                  className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+                    page === currentPage
+                      ? "bg-blue-600 text-white"
+                      : "text-gray-700 hover:bg-gray-100"
+                  }`}
+                >
+                  {page}
+                </button>
+              );
+            })}
+          </div>
+
+          <button
+            onClick={() => onPageChange(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Next
+          </button>
+        </div>
+      )}
+
+      {/* Results info */}
+      <div className="text-center text-sm text-gray-500">
+        Page {currentPage} of {totalPages} ({entries.length} entries)
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/components/knowledge/EntryMetadata.tsx
+++ b/apps/web/src/components/knowledge/EntryMetadata.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import React from "react";
+import type { KnowledgeTag } from "@mosaic/shared";
+import { EntryStatus, Visibility } from "@mosaic/shared";
+
+interface EntryMetadataProps {
+  title: string;
+  status: EntryStatus;
+  visibility: Visibility;
+  selectedTags: string[];
+  availableTags: KnowledgeTag[];
+  onTitleChange: (title: string) => void;
+  onStatusChange: (status: EntryStatus) => void;
+  onVisibilityChange: (visibility: Visibility) => void;
+  onTagsChange: (tags: string[]) => void;
+}
+
+/**
+ * EntryMetadata - Title, tags, status, and visibility controls
+ */
+export function EntryMetadata({
+  title,
+  status,
+  visibility,
+  selectedTags,
+  availableTags,
+  onTitleChange,
+  onStatusChange,
+  onVisibilityChange,
+  onTagsChange,
+}: EntryMetadataProps): JSX.Element {
+  const handleTagToggle = (tagId: string): void => {
+    if (selectedTags.includes(tagId)) {
+      onTagsChange(selectedTags.filter((id) => id !== tagId));
+    } else {
+      onTagsChange([...selectedTags, tagId]);
+    }
+  };
+
+  return (
+    <div className="entry-metadata space-y-4">
+      {/* Title */}
+      <div>
+        <label
+          htmlFor="entry-title"
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+        >
+          Title
+        </label>
+        <input
+          id="entry-title"
+          type="text"
+          value={title}
+          onChange={(e) => onTitleChange(e.target.value)}
+          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          placeholder="Entry title..."
+          required
+        />
+      </div>
+
+      {/* Status and Visibility Row */}
+      <div className="grid grid-cols-2 gap-4">
+        {/* Status */}
+        <div>
+          <label
+            htmlFor="entry-status"
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+          >
+            Status
+          </label>
+          <select
+            id="entry-status"
+            value={status}
+            onChange={(e) => onStatusChange(e.target.value as EntryStatus)}
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            <option value={EntryStatus.DRAFT}>Draft</option>
+            <option value={EntryStatus.PUBLISHED}>Published</option>
+            <option value={EntryStatus.ARCHIVED}>Archived</option>
+          </select>
+        </div>
+
+        {/* Visibility */}
+        <div>
+          <label
+            htmlFor="entry-visibility"
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+          >
+            Visibility
+          </label>
+          <select
+            id="entry-visibility"
+            value={visibility}
+            onChange={(e) => onVisibilityChange(e.target.value as Visibility)}
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            <option value={Visibility.PRIVATE}>Private</option>
+            <option value={Visibility.WORKSPACE}>Workspace</option>
+            <option value={Visibility.PUBLIC}>Public</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Tags */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+          Tags
+        </label>
+        <div className="flex flex-wrap gap-2">
+          {availableTags.length > 0 ? (
+            availableTags.map((tag) => {
+              const isSelected = selectedTags.includes(tag.id);
+              return (
+                <button
+                  key={tag.id}
+                  type="button"
+                  onClick={() => handleTagToggle(tag.id)}
+                  className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
+                    isSelected
+                      ? "bg-blue-600 text-white"
+                      : "bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600"
+                  }`}
+                  style={
+                    isSelected && tag.color
+                      ? { backgroundColor: tag.color }
+                      : undefined
+                  }
+                >
+                  {tag.name}
+                </button>
+              );
+            })
+          ) : (
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              No tags available. Create tags first.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/components/knowledge/EntryViewer.tsx
+++ b/apps/web/src/components/knowledge/EntryViewer.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import React from "react";
+import type { KnowledgeEntryWithTags } from "@mosaic/shared";
+
+interface EntryViewerProps {
+  entry: KnowledgeEntryWithTags;
+}
+
+/**
+ * EntryViewer - Displays rendered markdown content
+ */
+export function EntryViewer({ entry }: EntryViewerProps): JSX.Element {
+  return (
+    <div className="entry-viewer">
+      <div className="entry-content">
+        {entry.contentHtml ? (
+          <div
+            className="prose prose-sm max-w-none dark:prose-invert"
+            dangerouslySetInnerHTML={{ __html: entry.contentHtml }}
+          />
+        ) : (
+          <div className="whitespace-pre-wrap text-gray-700 dark:text-gray-300">
+            {entry.content}
+          </div>
+        )}
+      </div>
+
+      {entry.summary && (
+        <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+            Summary
+          </h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400">{entry.summary}</p>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/apps/web/src/components/team/TeamCard.tsx
+++ b/apps/web/src/components/team/TeamCard.tsx
@@ -0,0 +1,32 @@
+import type { Team } from "@mosaic/shared";
+import { Card, CardHeader, CardContent } from "@mosaic/ui";
+import Link from "next/link";
+
+interface TeamCardProps {
+  team: Team;
+  workspaceId: string;
+}
+
+export function TeamCard({ team, workspaceId }: TeamCardProps) {
+  return (
+    <Link href={`/settings/workspaces/${workspaceId}/teams/${team.id}`}>
+      <Card className="hover:shadow-lg transition-shadow cursor-pointer">
+        <CardHeader>
+          <h3 className="text-lg font-semibold text-gray-900">{team.name}</h3>
+        </CardHeader>
+        <CardContent>
+          {team.description ? (
+            <p className="text-sm text-gray-600">{team.description}</p>
+          ) : (
+            <p className="text-sm text-gray-400 italic">No description</p>
+          )}
+          <div className="mt-3 flex items-center gap-2 text-xs text-gray-500">
+            <span>
+              Created {new Date(team.createdAt).toLocaleDateString()}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
--- a/apps/web/src/components/team/TeamSettings.tsx
+++ b/apps/web/src/components/team/TeamSettings.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { useState } from "react";
+import type { Team } from "@mosaic/shared";
+import { Card, CardHeader, CardContent, CardFooter, Button, Input, Textarea } from "@mosaic/ui";
+
+interface TeamSettingsProps {
+  team: Team;
+  workspaceId: string;
+  onUpdate: (data: { name?: string; description?: string }) => Promise<void>;
+  onDelete: () => Promise<void>;
+}
+
+export function TeamSettings({ team, workspaceId, onUpdate, onDelete }: TeamSettingsProps) {
+  const [name, setName] = useState(team.name);
+  const [description, setDescription] = useState(team.description || "");
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  const hasChanges = name !== team.name || description !== (team.description || "");
+
+  const handleSave = async () => {
+    if (!hasChanges) return;
+
+    setIsSaving(true);
+    try {
+      await onUpdate({
+        name: name !== team.name ? name : undefined,
+        description: description !== (team.description || "") ? description : undefined,
+      });
+      setIsEditing(false);
+    } catch (error) {
+      console.error("Failed to update team:", error);
+      alert("Failed to update team. Please try again.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setName(team.name);
+    setDescription(team.description || "");
+    setIsEditing(false);
+  };
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await onDelete();
+    } catch (error) {
+      console.error("Failed to delete team:", error);
+      alert("Failed to delete team. Please try again.");
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <h2 className="text-xl font-semibold text-gray-900">Team Settings</h2>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          <Input
+            label="Team Name"
+            value={name}
+            onChange={(e) => {
+              setName(e.target.value);
+              setIsEditing(true);
+            }}
+            placeholder="Enter team name"
+            fullWidth
+            disabled={isSaving}
+          />
+          <Textarea
+            label="Description"
+            value={description}
+            onChange={(e) => {
+              setDescription(e.target.value);
+              setIsEditing(true);
+            }}
+            placeholder="Enter team description (optional)"
+            fullWidth
+            disabled={isSaving}
+          />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <div className="flex items-center justify-between w-full">
+          <div className="flex gap-2">
+            {isEditing && (
+              <>
+                <Button
+                  variant="primary"
+                  onClick={handleSave}
+                  disabled={!hasChanges || isSaving || !name.trim()}
+                >
+                  {isSaving ? "Saving..." : "Save Changes"}
+                </Button>
+                <Button variant="ghost" onClick={handleCancel} disabled={isSaving}>
+                  Cancel
+                </Button>
+              </>
+            )}
+          </div>
+          <div>
+            {!showDeleteConfirm ? (
+              <Button
+                variant="danger"
+                onClick={() => setShowDeleteConfirm(true)}
+                disabled={isSaving}
+              >
+                Delete Team
+              </Button>
+            ) : (
+              <div className="flex gap-2">
+                <span className="text-sm text-gray-600 self-center">
+                  Are you sure?
+                </span>
+                <Button variant="danger" onClick={handleDelete} disabled={isDeleting}>
+                  {isDeleting ? "Deleting..." : "Confirm Delete"}
+                </Button>
+                <Button
+                  variant="ghost"
+                  onClick={() => setShowDeleteConfirm(false)}
+                  disabled={isDeleting}
+                >
+                  Cancel
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}
--- a/apps/web/src/components/workspace/InviteMember.tsx
+++ b/apps/web/src/components/workspace/InviteMember.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import { WorkspaceMemberRole } from "@mosaic/shared";
+
+interface InviteMemberProps {
+  onInvite: (email: string, role: WorkspaceMemberRole) => Promise<void>;
+}
+
+export function InviteMember({ onInvite }: InviteMemberProps) {
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState<WorkspaceMemberRole>(WorkspaceMemberRole.MEMBER);
+  const [isInviting, setIsInviting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!email.trim()) {
+      setError("Email is required");
+      return;
+    }
+
+    if (!email.includes("@")) {
+      setError("Please enter a valid email address");
+      return;
+    }
+
+    setIsInviting(true);
+    try {
+      await onInvite(email.trim(), role);
+      setEmail("");
+      setRole(WorkspaceMemberRole.MEMBER);
+      alert("Invitation sent successfully!");
+    } catch (error) {
+      console.error("Failed to invite member:", error);
+      setError(
+        error instanceof Error
+          ? error.message
+          : "Failed to send invitation. Please try again."
+      );
+    } finally {
+      setIsInviting(false);
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <h2 className="text-lg font-semibold text-gray-900 mb-4">
+        Invite Member
+      </h2>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label
+            htmlFor="email"
+            className="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Email Address
+          </label>
+          <input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="colleague@example.com"
+            disabled={isInviting}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="role"
+            className="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Role
+          </label>
+          <select
+            id="role"
+            value={role}
+            onChange={(e) => setRole(e.target.value as WorkspaceMemberRole)}
+            disabled={isInviting}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"
+          >
+            <option value={WorkspaceMemberRole.ADMIN}>
+              Admin - Can manage workspace and members
+            </option>
+            <option value={WorkspaceMemberRole.MEMBER}>
+              Member - Can create and edit content
+            </option>
+            <option value={WorkspaceMemberRole.GUEST}>
+              Guest - View-only access
+            </option>
+          </select>
+        </div>
+
+        {error && (
+          <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+            <p className="text-sm text-red-700">{error}</p>
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={isInviting}
+          className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isInviting ? "Sending Invitation..." : "Send Invitation"}
+        </button>
+      </form>
+
+      <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+        <p className="text-sm text-blue-800">
+          💡 The invited user will receive an email with instructions to join
+          this workspace.
+        </p>
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/components/workspace/MemberList.tsx
+++ b/apps/web/src/components/workspace/MemberList.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import type { User, WorkspaceMember } from "@mosaic/shared";
+import { WorkspaceMemberRole } from "@mosaic/shared";
+
+export interface WorkspaceMemberWithUser extends WorkspaceMember {
+  user: User;
+}
+
+interface MemberListProps {
+  members: WorkspaceMemberWithUser[];
+  currentUserId: string;
+  currentUserRole: WorkspaceMemberRole;
+  workspaceOwnerId: string;
+  onRoleChange: (userId: string, newRole: WorkspaceMemberRole) => Promise<void>;
+  onRemove: (userId: string) => Promise<void>;
+}
+
+const roleColors: Record<WorkspaceMemberRole, string> = {
+  [WorkspaceMemberRole.OWNER]: "bg-purple-100 text-purple-700",
+  [WorkspaceMemberRole.ADMIN]: "bg-blue-100 text-blue-700",
+  [WorkspaceMemberRole.MEMBER]: "bg-green-100 text-green-700",
+  [WorkspaceMemberRole.GUEST]: "bg-gray-100 text-gray-700",
+};
+
+export function MemberList({
+  members,
+  currentUserId,
+  currentUserRole,
+  workspaceOwnerId,
+  onRoleChange,
+  onRemove,
+}: MemberListProps) {
+  const canManageMembers =
+    currentUserRole === WorkspaceMemberRole.OWNER ||
+    currentUserRole === WorkspaceMemberRole.ADMIN;
+
+  const handleRoleChange = async (userId: string, newRole: WorkspaceMemberRole) => {
+    try {
+      await onRoleChange(userId, newRole);
+    } catch (error) {
+      console.error("Failed to change role:", error);
+      alert("Failed to change member role");
+    }
+  };
+
+  const handleRemove = async (userId: string) => {
+    if (!confirm("Are you sure you want to remove this member?")) {
+      return;
+    }
+
+    try {
+      await onRemove(userId);
+    } catch (error) {
+      console.error("Failed to remove member:", error);
+      alert("Failed to remove member");
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <h2 className="text-lg font-semibold text-gray-900 mb-4">
+        Members ({members.length})
+      </h2>
+      <ul className="divide-y divide-gray-200">
+        {members.map((member) => {
+          const isCurrentUser = member.userId === currentUserId;
+          const isOwner = member.userId === workspaceOwnerId;
+          const canModify = canManageMembers && !isOwner && !isCurrentUser;
+
+          return (
+            <li key={member.userId} className="py-4 first:pt-0 last:pb-0">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3 flex-1">
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold">
+                    {member.user.name.charAt(0).toUpperCase()}
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <p className="font-medium text-gray-900">
+                        {member.user.name}
+                      </p>
+                      {isCurrentUser && (
+                        <span className="text-xs text-gray-500">(you)</span>
+                      )}
+                    </div>
+                    <p className="text-sm text-gray-600">{member.user.email}</p>
+                    <p className="text-xs text-gray-500 mt-1">
+                      Joined {new Date(member.joinedAt).toLocaleDateString()}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  {canModify ? (
+                    <select
+                      value={member.role}
+                      onChange={(e) =>
+                        handleRoleChange(
+                          member.userId,
+                          e.target.value as WorkspaceMemberRole
+                        )
+                      }
+                      className="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    >
+                      <option value={WorkspaceMemberRole.ADMIN}>Admin</option>
+                      <option value={WorkspaceMemberRole.MEMBER}>Member</option>
+                      <option value={WorkspaceMemberRole.GUEST}>Guest</option>
+                    </select>
+                  ) : (
+                    <span
+                      className={`px-3 py-1 rounded-full text-xs font-medium ${roleColors[member.role]}`}
+                    >
+                      {member.role}
+                    </span>
+                  )}
+                  {canModify && (
+                    <button
+                      onClick={() => handleRemove(member.userId)}
+                      className="text-red-600 hover:text-red-700 text-sm"
+                      aria-label="Remove member"
+                    >
+                      <svg
+                        className="w-5 h-5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                        />
+                      </svg>
+                    </button>
+                  )}
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
--- a/apps/web/src/components/workspace/WorkspaceCard.tsx
+++ b/apps/web/src/components/workspace/WorkspaceCard.tsx
@@ -0,0 +1,66 @@
+import type { Workspace } from "@mosaic/shared";
+import { WorkspaceMemberRole } from "@mosaic/shared";
+import Link from "next/link";
+
+interface WorkspaceCardProps {
+  workspace: Workspace;
+  userRole: WorkspaceMemberRole;
+  memberCount: number;
+}
+
+const roleColors: Record<WorkspaceMemberRole, string> = {
+  [WorkspaceMemberRole.OWNER]: "bg-purple-100 text-purple-700",
+  [WorkspaceMemberRole.ADMIN]: "bg-blue-100 text-blue-700",
+  [WorkspaceMemberRole.MEMBER]: "bg-green-100 text-green-700",
+  [WorkspaceMemberRole.GUEST]: "bg-gray-100 text-gray-700",
+};
+
+const roleLabels: Record<WorkspaceMemberRole, string> = {
+  [WorkspaceMemberRole.OWNER]: "Owner",
+  [WorkspaceMemberRole.ADMIN]: "Admin",
+  [WorkspaceMemberRole.MEMBER]: "Member",
+  [WorkspaceMemberRole.GUEST]: "Guest",
+};
+
+export function WorkspaceCard({ workspace, userRole, memberCount }: WorkspaceCardProps) {
+  return (
+    <Link
+      href={`/settings/workspaces/${workspace.id}`}
+      className="block bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow"
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            {workspace.name}
+          </h3>
+          <div className="flex items-center gap-3 text-sm text-gray-600">
+            <span className="flex items-center gap-1">
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+                />
+              </svg>
+              {memberCount} {memberCount === 1 ? "member" : "members"}
+            </span>
+          </div>
+        </div>
+        <span
+          className={`px-3 py-1 rounded-full text-xs font-medium ${roleColors[userRole]}`}
+        >
+          {roleLabels[userRole]}
+        </span>
+      </div>
+      <div className="mt-4 text-sm text-gray-500">
+        Created {new Date(workspace.createdAt).toLocaleDateString()}
+      </div>
+    </Link>
+  );
+}
--- a/apps/web/src/components/workspace/WorkspaceSettings.tsx
+++ b/apps/web/src/components/workspace/WorkspaceSettings.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import { useState } from "react";
+import type { Workspace } from "@mosaic/shared";
+import { WorkspaceMemberRole } from "@mosaic/shared";
+
+interface WorkspaceSettingsProps {
+  workspace: Workspace;
+  userRole: WorkspaceMemberRole;
+  onUpdate: (name: string) => Promise<void>;
+  onDelete: () => Promise<void>;
+}
+
+export function WorkspaceSettings({
+  workspace,
+  userRole,
+  onUpdate,
+  onDelete,
+}: WorkspaceSettingsProps) {
+  const [name, setName] = useState(workspace.name);
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  const canEdit = userRole === WorkspaceMemberRole.OWNER || userRole === WorkspaceMemberRole.ADMIN;
+  const canDelete = userRole === WorkspaceMemberRole.OWNER;
+
+  const handleSave = async () => {
+    if (name.trim() === "" || name === workspace.name) {
+      setIsEditing(false);
+      setName(workspace.name);
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      await onUpdate(name);
+      setIsEditing(false);
+    } catch (error) {
+      console.error("Failed to update workspace:", error);
+      alert("Failed to update workspace");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await onDelete();
+    } catch (error) {
+      console.error("Failed to delete workspace:", error);
+      alert("Failed to delete workspace");
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <h2 className="text-lg font-semibold text-gray-900 mb-6">
+        Workspace Settings
+      </h2>
+
+      <div className="space-y-6">
+        {/* Workspace Name */}
+        <div>
+          <label
+            htmlFor="workspace-name"
+            className="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Workspace Name
+          </label>
+          {isEditing ? (
+            <div className="flex gap-2">
+              <input
+                id="workspace-name"
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                disabled={isSaving}
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"
+              />
+              <button
+                onClick={handleSave}
+                disabled={isSaving}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+              >
+                {isSaving ? "Saving..." : "Save"}
+              </button>
+              <button
+                onClick={() => {
+                  setIsEditing(false);
+                  setName(workspace.name);
+                }}
+                disabled={isSaving}
+                className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50"
+              >
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between">
+              <p className="text-gray-900">{workspace.name}</p>
+              {canEdit && (
+                <button
+                  onClick={() => setIsEditing(true)}
+                  className="px-3 py-1 text-sm text-blue-600 hover:text-blue-700"
+                >
+                  Edit
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Workspace ID */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Workspace ID
+          </label>
+          <code className="block px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-600">
+            {workspace.id}
+          </code>
+        </div>
+
+        {/* Created Date */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Created
+          </label>
+          <p className="text-gray-600">
+            {new Date(workspace.createdAt).toLocaleString()}
+          </p>
+        </div>
+
+        {/* Delete Workspace */}
+        {canDelete && (
+          <div className="pt-6 border-t border-gray-200">
+            <h3 className="text-sm font-medium text-red-700 mb-2">
+              Danger Zone
+            </h3>
+            <p className="text-sm text-gray-600 mb-4">
+              Deleting this workspace will permanently remove all associated
+              data, including tasks, events, and projects. This action cannot
+              be undone.
+            </p>
+            {showDeleteConfirm ? (
+              <div className="space-y-3">
+                <p className="text-sm font-medium text-gray-900">
+                  Are you sure you want to delete this workspace?
+                </p>
+                <div className="flex gap-2">
+                  <button
+                    onClick={handleDelete}
+                    disabled={isDeleting}
+                    className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
+                  >
+                    {isDeleting ? "Deleting..." : "Yes, Delete Workspace"}
+                  </button>
+                  <button
+                    onClick={() => setShowDeleteConfirm(false)}
+                    disabled={isDeleting}
+                    className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <button
+                onClick={() => setShowDeleteConfirm(true)}
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
+              >
+                Delete Workspace
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/lib/api/knowledge.ts
+++ b/apps/web/src/lib/api/knowledge.ts
@@ -0,0 +1,171 @@
+/**
+ * Knowledge API Client
+ * Handles knowledge entry-related API requests
+ */
+
+import type { KnowledgeEntryWithTags, KnowledgeTag } from "@mosaic/shared";
+import { EntryStatus } from "@mosaic/shared";
+import { apiGet, type ApiResponse } from "./client";
+
+export interface EntryFilters {
+  status?: EntryStatus;
+  tag?: string;
+  page?: number;
+  limit?: number;
+  search?: string;
+  sortBy?: "updatedAt" | "createdAt" | "title";
+  sortOrder?: "asc" | "desc";
+}
+
+export interface EntriesResponse {
+  data: KnowledgeEntryWithTags[];
+  meta?: {
+    total?: number;
+    page?: number;
+    limit?: number;
+  };
+}
+
+/**
+ * Fetch knowledge entries with optional filters
+ */
+export async function fetchEntries(filters?: EntryFilters): Promise<EntriesResponse> {
+  const params = new URLSearchParams();
+
+  if (filters?.status) {
+    params.append("status", filters.status);
+  }
+  if (filters?.tag) {
+    params.append("tag", filters.tag);
+  }
+  if (filters?.page) {
+    params.append("page", filters.page.toString());
+  }
+  if (filters?.limit) {
+    params.append("limit", filters.limit.toString());
+  }
+
+  const queryString = params.toString();
+  const endpoint = queryString ? `/api/knowledge/entries?${queryString}` : "/api/knowledge/entries";
+
+  const response = await apiGet<EntriesResponse>(endpoint);
+  return response;
+}
+
+/**
+ * Fetch all knowledge tags
+ */
+export async function fetchTags(): Promise<KnowledgeTag[]> {
+  const response = await apiGet<ApiResponse<KnowledgeTag[]>>("/api/knowledge/tags");
+  return response.data;
+}
+
+/**
+ * Mock entries for development (until backend endpoints are ready)
+ */
+export const mockEntries: KnowledgeEntryWithTags[] = [
+  {
+    id: "entry-1",
+    workspaceId: "workspace-1",
+    slug: "getting-started",
+    title: "Getting Started with Mosaic Stack",
+    content: "# Getting Started\n\nWelcome to Mosaic Stack...",
+    contentHtml: "<h1>Getting Started</h1><p>Welcome to Mosaic Stack...</p>",
+    summary: "A comprehensive guide to getting started with the Mosaic Stack platform.",
+    status: EntryStatus.PUBLISHED,
+    visibility: "PUBLIC" as const,
+    createdBy: "user-1",
+    updatedBy: "user-1",
+    createdAt: new Date("2026-01-20"),
+    updatedAt: new Date("2026-01-28"),
+    tags: [
+      { id: "tag-1", workspaceId: "workspace-1", name: "Tutorial", slug: "tutorial", color: "#3B82F6", createdAt: new Date(), updatedAt: new Date() },
+      { id: "tag-2", workspaceId: "workspace-1", name: "Onboarding", slug: "onboarding", color: "#10B981", createdAt: new Date(), updatedAt: new Date() },
+    ],
+  },
+  {
+    id: "entry-2",
+    workspaceId: "workspace-1",
+    slug: "architecture-overview",
+    title: "Architecture Overview",
+    content: "# Architecture\n\nThe Mosaic Stack architecture...",
+    contentHtml: "<h1>Architecture</h1><p>The Mosaic Stack architecture...</p>",
+    summary: "Overview of the system architecture and design patterns used in Mosaic Stack.",
+    status: EntryStatus.PUBLISHED,
+    visibility: "WORKSPACE" as const,
+    createdBy: "user-1",
+    updatedBy: "user-1",
+    createdAt: new Date("2026-01-15"),
+    updatedAt: new Date("2026-01-27"),
+    tags: [
+      { id: "tag-3", workspaceId: "workspace-1", name: "Architecture", slug: "architecture", color: "#8B5CF6", createdAt: new Date(), updatedAt: new Date() },
+      { id: "tag-4", workspaceId: "workspace-1", name: "Technical", slug: "technical", color: "#F59E0B", createdAt: new Date(), updatedAt: new Date() },
+    ],
+  },
+  {
+    id: "entry-3",
+    workspaceId: "workspace-1",
+    slug: "api-documentation-draft",
+    title: "API Documentation (Draft)",
+    content: "# API Docs\n\nWork in progress...",
+    contentHtml: "<h1>API Docs</h1><p>Work in progress...</p>",
+    summary: "Comprehensive API documentation for developers.",
+    status: EntryStatus.DRAFT,
+    visibility: "PRIVATE" as const,
+    createdBy: "user-1",
+    updatedBy: "user-1",
+    createdAt: new Date("2026-01-29"),
+    updatedAt: new Date("2026-01-29"),
+    tags: [
+      { id: "tag-4", workspaceId: "workspace-1", name: "Technical", slug: "technical", color: "#F59E0B", createdAt: new Date(), updatedAt: new Date() },
+      { id: "tag-5", workspaceId: "workspace-1", name: "API", slug: "api", color: "#EF4444", createdAt: new Date(), updatedAt: new Date() },
+    ],
+  },
+  {
+    id: "entry-4",
+    workspaceId: "workspace-1",
+    slug: "deployment-guide",
+    title: "Deployment Guide",
+    content: "# Deployment\n\nHow to deploy Mosaic Stack...",
+    contentHtml: "<h1>Deployment</h1><p>How to deploy Mosaic Stack...</p>",
+    summary: "Step-by-step guide for deploying Mosaic Stack to production.",
+    status: EntryStatus.PUBLISHED,
+    visibility: "WORKSPACE" as const,
+    createdBy: "user-1",
+    updatedBy: "user-1",
+    createdAt: new Date("2026-01-18"),
+    updatedAt: new Date("2026-01-25"),
+    tags: [
+      { id: "tag-6", workspaceId: "workspace-1", name: "DevOps", slug: "devops", color: "#14B8A6", createdAt: new Date(), updatedAt: new Date() },
+      { id: "tag-1", workspaceId: "workspace-1", name: "Tutorial", slug: "tutorial", color: "#3B82F6", createdAt: new Date(), updatedAt: new Date() },
+    ],
+  },
+  {
+    id: "entry-5",
+    workspaceId: "workspace-1",
+    slug: "old-meeting-notes",
+    title: "Q4 2025 Meeting Notes",
+    content: "# Meeting Notes\n\nOld archived notes...",
+    contentHtml: "<h1>Meeting Notes</h1><p>Old archived notes...</p>",
+    summary: "Meeting notes from Q4 2025 - archived for reference.",
+    status: EntryStatus.ARCHIVED,
+    visibility: "PRIVATE" as const,
+    createdBy: "user-1",
+    updatedBy: "user-1",
+    createdAt: new Date("2025-12-15"),
+    updatedAt: new Date("2026-01-05"),
+    tags: [
+      { id: "tag-7", workspaceId: "workspace-1", name: "Meetings", slug: "meetings", color: "#6B7280", createdAt: new Date(), updatedAt: new Date() },
+    ],
+  },
+];
+
+export const mockTags: KnowledgeTag[] = [
+  { id: "tag-1", workspaceId: "workspace-1", name: "Tutorial", slug: "tutorial", color: "#3B82F6", createdAt: new Date(), updatedAt: new Date() },
+  { id: "tag-2", workspaceId: "workspace-1", name: "Onboarding", slug: "onboarding", color: "#10B981", createdAt: new Date(), updatedAt: new Date() },
+  { id: "tag-3", workspaceId: "workspace-1", name: "Architecture", slug: "architecture", color: "#8B5CF6", createdAt: new Date(), updatedAt: new Date() },
+  { id: "tag-4", workspaceId: "workspace-1", name: "Technical", slug: "technical", color: "#F59E0B", createdAt: new Date(), updatedAt: new Date() },
+  { id: "tag-5", workspaceId: "workspace-1", name: "API", slug: "api", color: "#EF4444", createdAt: new Date(), updatedAt: new Date() },
+  { id: "tag-6", workspaceId: "workspace-1", name: "DevOps", slug: "devops", color: "#14B8A6", createdAt: new Date(), updatedAt: new Date() },
+  { id: "tag-7", workspaceId: "workspace-1", name: "Meetings", slug: "meetings", color: "#6B7280", createdAt: new Date(), updatedAt: new Date() },
+];
--- a/apps/web/src/lib/api/teams.ts
+++ b/apps/web/src/lib/api/teams.ts
@@ -0,0 +1,196 @@
+/**
+ * Teams API Client
+ * Handles team-related API requests
+ */
+
+import type { Team, TeamMember, User } from "@mosaic/shared";
+import { TeamMemberRole } from "@mosaic/shared";
+import { apiGet, apiPost, apiPatch, apiDelete, type ApiResponse } from "./client";
+
+export interface TeamWithMembers extends Team {
+  members: (TeamMember & { user: User })[];
+}
+
+export interface CreateTeamDto {
+  name: string;
+  description?: string;
+}
+
+export interface UpdateTeamDto {
+  name?: string;
+  description?: string;
+}
+
+export interface AddTeamMemberDto {
+  userId: string;
+  role?: TeamMemberRole;
+}
+
+/**
+ * Fetch all teams for a workspace
+ */
+export async function fetchTeams(workspaceId: string): Promise<Team[]> {
+  const response = await apiGet<ApiResponse<Team[]>>(`/api/workspaces/${workspaceId}/teams`);
+  return response.data;
+}
+
+/**
+ * Fetch a single team with members
+ */
+export async function fetchTeam(workspaceId: string, teamId: string): Promise<TeamWithMembers> {
+  const response = await apiGet<ApiResponse<TeamWithMembers>>(
+    `/api/workspaces/${workspaceId}/teams/${teamId}`
+  );
+  return response.data;
+}
+
+/**
+ * Create a new team
+ */
+export async function createTeam(workspaceId: string, data: CreateTeamDto): Promise<Team> {
+  const response = await apiPost<ApiResponse<Team>>(
+    `/api/workspaces/${workspaceId}/teams`,
+    data
+  );
+  return response.data;
+}
+
+/**
+ * Update a team
+ */
+export async function updateTeam(
+  workspaceId: string,
+  teamId: string,
+  data: UpdateTeamDto
+): Promise<Team> {
+  const response = await apiPatch<ApiResponse<Team>>(
+    `/api/workspaces/${workspaceId}/teams/${teamId}`,
+    data
+  );
+  return response.data;
+}
+
+/**
+ * Delete a team
+ */
+export async function deleteTeam(workspaceId: string, teamId: string): Promise<void> {
+  await apiDelete(`/api/workspaces/${workspaceId}/teams/${teamId}`);
+}
+
+/**
+ * Add a member to a team
+ */
+export async function addTeamMember(
+  workspaceId: string,
+  teamId: string,
+  data: AddTeamMemberDto
+): Promise<TeamMember> {
+  const response = await apiPost<ApiResponse<TeamMember>>(
+    `/api/workspaces/${workspaceId}/teams/${teamId}/members`,
+    data
+  );
+  return response.data;
+}
+
+/**
+ * Remove a member from a team
+ */
+export async function removeTeamMember(
+  workspaceId: string,
+  teamId: string,
+  userId: string
+): Promise<void> {
+  await apiDelete(`/api/workspaces/${workspaceId}/teams/${teamId}/members/${userId}`);
+}
+
+/**
+ * Update a team member's role
+ */
+export async function updateTeamMemberRole(
+  workspaceId: string,
+  teamId: string,
+  userId: string,
+  role: TeamMemberRole
+): Promise<TeamMember> {
+  const response = await apiPatch<ApiResponse<TeamMember>>(
+    `/api/workspaces/${workspaceId}/teams/${teamId}/members/${userId}`,
+    { role }
+  );
+  return response.data;
+}
+
+/**
+ * Mock teams for development (until backend endpoints are ready)
+ */
+export const mockTeams: Team[] = [
+  {
+    id: "team-1",
+    workspaceId: "workspace-1",
+    name: "Engineering",
+    description: "Product development team",
+    metadata: {},
+    createdAt: new Date("2026-01-20"),
+    updatedAt: new Date("2026-01-20"),
+  },
+  {
+    id: "team-2",
+    workspaceId: "workspace-1",
+    name: "Design",
+    description: "UI/UX design team",
+    metadata: {},
+    createdAt: new Date("2026-01-22"),
+    updatedAt: new Date("2026-01-22"),
+  },
+  {
+    id: "team-3",
+    workspaceId: "workspace-1",
+    name: "Marketing",
+    description: null,
+    metadata: {},
+    createdAt: new Date("2026-01-25"),
+    updatedAt: new Date("2026-01-25"),
+  },
+];
+
+/**
+ * Mock team with members for development
+ */
+export const mockTeamWithMembers: TeamWithMembers = {
+  ...mockTeams[0],
+  members: [
+    {
+      teamId: "team-1",
+      userId: "user-1",
+      role: TeamMemberRole.OWNER,
+      joinedAt: new Date("2026-01-20"),
+      user: {
+        id: "user-1",
+        email: "john@example.com",
+        name: "John Doe",
+        emailVerified: true,
+        image: null,
+        authProviderId: null,
+        preferences: {},
+        createdAt: new Date("2026-01-15"),
+        updatedAt: new Date("2026-01-15"),
+      },
+    },
+    {
+      teamId: "team-1",
+      userId: "user-2",
+      role: TeamMemberRole.MEMBER,
+      joinedAt: new Date("2026-01-21"),
+      user: {
+        id: "user-2",
+        email: "jane@example.com",
+        name: "Jane Smith",
+        emailVerified: true,
+        image: null,
+        authProviderId: null,
+        preferences: {},
+        createdAt: new Date("2026-01-16"),
+        updatedAt: new Date("2026-01-16"),
+      },
+    },
+  ],
+};