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)

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