feat(web): add teams page and RBAC navigation/route gating (MS21-UI-005, RBAC-001, RBAC-002)

apps/api/src/agent-memory/agent-memory.integration.spec.ts

@@ -0,0 +1,198 @@
+import { beforeAll, beforeEach, describe, expect, it, afterAll } from "vitest";
+import { randomUUID as uuid } from "crypto";
+import { Test, TestingModule } from "@nestjs/testing";
+import { NotFoundException } from "@nestjs/common";
+import { PrismaClient } from "@prisma/client";
+import { AgentMemoryService } from "./agent-memory.service";
+import { PrismaService } from "../prisma/prisma.service";
+
+const shouldRunDbIntegrationTests =
+  process.env.RUN_DB_TESTS === "true" && Boolean(process.env.DATABASE_URL);
+const describeFn = shouldRunDbIntegrationTests ? describe : describe.skip;
+
+async function createWorkspace(
+  prisma: PrismaClient,
+  label: string
+): Promise<{ workspaceId: string; ownerId: string }> {
+  const workspace = await prisma.workspace.create({
+    data: {
+      name: `${label} ${Date.now()}`,
+      owner: {
+        create: {
+          email: `${label.toLowerCase().replace(/\s+/g, "-")}-${Date.now()}@example.com`,
+          name: `${label} Owner`,
+        },
+      },
+    },
+  });
+
+  return {
+    workspaceId: workspace.id,
+    ownerId: workspace.ownerId,
+  };
+}
+
+describeFn("AgentMemoryService Integration", () => {
+  let moduleRef: TestingModule;
+  let prisma: PrismaClient;
+  let service: AgentMemoryService;
+  let setupComplete = false;
+
+  let workspaceAId: string;
+  let workspaceAOwnerId: string;
+  let workspaceBId: string;
+  let workspaceBOwnerId: string;
+
+  beforeAll(async () => {
+    prisma = new PrismaClient();
+    await prisma.$connect();
+
+    const workspaceA = await createWorkspace(prisma, "Agent Memory Integration A");
+    workspaceAId = workspaceA.workspaceId;
+    workspaceAOwnerId = workspaceA.ownerId;
+
+    const workspaceB = await createWorkspace(prisma, "Agent Memory Integration B");
+    workspaceBId = workspaceB.workspaceId;
+    workspaceBOwnerId = workspaceB.ownerId;
+
+    moduleRef = await Test.createTestingModule({
+      providers: [
+        AgentMemoryService,
+        {
+          provide: PrismaService,
+          useValue: prisma,
+        },
+      ],
+    }).compile();
+
+    service = moduleRef.get<AgentMemoryService>(AgentMemoryService);
+    setupComplete = true;
+  });
+
+  beforeEach(async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    await prisma.agentMemory.deleteMany({
+      where: {
+        workspaceId: {
+          in: [workspaceAId, workspaceBId],
+        },
+      },
+    });
+  });
+
+  afterAll(async () => {
+    if (!prisma) {
+      return;
+    }
+
+    const workspaceIds = [workspaceAId, workspaceBId].filter(
+      (id): id is string => typeof id === "string"
+    );
+    const ownerIds = [workspaceAOwnerId, workspaceBOwnerId].filter(
+      (id): id is string => typeof id === "string"
+    );
+
+    if (workspaceIds.length > 0) {
+      await prisma.agentMemory.deleteMany({
+        where: {
+          workspaceId: {
+            in: workspaceIds,
+          },
+        },
+      });
+      await prisma.workspace.deleteMany({ where: { id: { in: workspaceIds } } });
+    }
+
+    if (ownerIds.length > 0) {
+      await prisma.user.deleteMany({ where: { id: { in: ownerIds } } });
+    }
+
+    if (moduleRef) {
+      await moduleRef.close();
+    }
+    await prisma.$disconnect();
+  });
+
+  it("upserts and lists memory entries", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    const agentId = `agent-${uuid()}`;
+
+    const entry = await service.upsert(workspaceAId, agentId, "session-context", {
+      value: { intent: "create-tests", depth: "integration" },
+    });
+
+    expect(entry.workspaceId).toBe(workspaceAId);
+    expect(entry.agentId).toBe(agentId);
+    expect(entry.key).toBe("session-context");
+
+    const listed = await service.findAll(workspaceAId, agentId);
+
+    expect(listed).toHaveLength(1);
+    expect(listed[0]?.id).toBe(entry.id);
+    expect(listed[0]?.value).toMatchObject({ intent: "create-tests" });
+  });
+
+  it("updates existing key via upsert without creating duplicates", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    const agentId = `agent-${uuid()}`;
+
+    const first = await service.upsert(workspaceAId, agentId, "preferences", {
+      value: { model: "fast" },
+    });
+
+    const second = await service.upsert(workspaceAId, agentId, "preferences", {
+      value: { model: "accurate" },
+    });
+
+    expect(second.id).toBe(first.id);
+    expect(second.value).toMatchObject({ model: "accurate" });
+
+    const rowCount = await prisma.agentMemory.count({
+      where: {
+        workspaceId: workspaceAId,
+        agentId,
+        key: "preferences",
+      },
+    });
+
+    expect(rowCount).toBe(1);
+  });
+
+  it("lists keys in sorted order and isolates by workspace", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    const agentId = `agent-${uuid()}`;
+
+    await service.upsert(workspaceAId, agentId, "beta", { value: { v: 2 } });
+    await service.upsert(workspaceAId, agentId, "alpha", { value: { v: 1 } });
+    await service.upsert(workspaceBId, agentId, "alpha", { value: { v: 99 } });
+
+    const workspaceAEntries = await service.findAll(workspaceAId, agentId);
+    const workspaceBEntries = await service.findAll(workspaceBId, agentId);
+
+    expect(workspaceAEntries.map((row) => row.key)).toEqual(["alpha", "beta"]);
+    expect(workspaceBEntries).toHaveLength(1);
+    expect(workspaceBEntries[0]?.value).toMatchObject({ v: 99 });
+  });
+
+  it("throws NotFoundException when requesting unknown key", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    await expect(service.findOne(workspaceAId, `agent-${uuid()}`, "missing")).rejects.toThrow(
+      NotFoundException
+    );
+  });
+});

apps/api/src/conversation-archive/conversation-archive.integration.spec.ts

@@ -0,0 +1,239 @@
+import { beforeAll, beforeEach, describe, expect, it, afterAll, vi } from "vitest";
+import { randomUUID as uuid } from "crypto";
+import { Test, TestingModule } from "@nestjs/testing";
+import { ConflictException } from "@nestjs/common";
+import { PrismaClient, Prisma } from "@prisma/client";
+import { EMBEDDING_DIMENSION } from "@mosaic/shared";
+import { ConversationArchiveService } from "./conversation-archive.service";
+import { PrismaService } from "../prisma/prisma.service";
+import { EmbeddingService } from "../knowledge/services/embedding.service";
+
+const shouldRunDbIntegrationTests =
+  process.env.RUN_DB_TESTS === "true" && Boolean(process.env.DATABASE_URL);
+const describeFn = shouldRunDbIntegrationTests ? describe : describe.skip;
+
+function vector(value: number): number[] {
+  return Array.from({ length: EMBEDDING_DIMENSION }, () => value);
+}
+
+function toVectorLiteral(input: number[]): string {
+  return `[${input.join(",")}]`;
+}
+
+describeFn("ConversationArchiveService Integration", () => {
+  let moduleRef: TestingModule;
+  let prisma: PrismaClient;
+  let service: ConversationArchiveService;
+  let workspaceId: string;
+  let ownerId: string;
+  let setupComplete = false;
+
+  const embeddingServiceMock = {
+    isConfigured: vi.fn(),
+    generateEmbedding: vi.fn(),
+  };
+
+  beforeAll(async () => {
+    prisma = new PrismaClient();
+    await prisma.$connect();
+
+    const workspace = await prisma.workspace.create({
+      data: {
+        name: `Conversation Archive Integration ${Date.now()}`,
+        owner: {
+          create: {
+            email: `conversation-archive-integration-${Date.now()}@example.com`,
+            name: "Conversation Archive Integration Owner",
+          },
+        },
+      },
+    });
+
+    workspaceId = workspace.id;
+    ownerId = workspace.ownerId;
+
+    moduleRef = await Test.createTestingModule({
+      providers: [
+        ConversationArchiveService,
+        {
+          provide: PrismaService,
+          useValue: prisma,
+        },
+        {
+          provide: EmbeddingService,
+          useValue: embeddingServiceMock,
+        },
+      ],
+    }).compile();
+
+    service = moduleRef.get<ConversationArchiveService>(ConversationArchiveService);
+    setupComplete = true;
+  });
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    embeddingServiceMock.isConfigured.mockReturnValue(false);
+
+    if (!setupComplete) {
+      return;
+    }
+
+    await prisma.conversationArchive.deleteMany({ where: { workspaceId } });
+  });
+
+  afterAll(async () => {
+    if (!prisma) {
+      return;
+    }
+
+    if (workspaceId) {
+      await prisma.conversationArchive.deleteMany({ where: { workspaceId } });
+      await prisma.workspace.deleteMany({ where: { id: workspaceId } });
+    }
+    if (ownerId) {
+      await prisma.user.deleteMany({ where: { id: ownerId } });
+    }
+
+    if (moduleRef) {
+      await moduleRef.close();
+    }
+    await prisma.$disconnect();
+  });
+
+  it("ingests a conversation log", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    const sessionId = `session-${uuid()}`;
+
+    const result = await service.ingest(workspaceId, {
+      sessionId,
+      agentId: "agent-conversation-ingest",
+      messages: [
+        { role: "user", content: "Can you summarize deployment issues?" },
+        { role: "assistant", content: "Yes, three retries timed out in staging." },
+      ],
+      summary: "Deployment retry failures discussed",
+      startedAt: "2026-02-28T21:00:00.000Z",
+      endedAt: "2026-02-28T21:05:00.000Z",
+      metadata: { source: "integration-test" },
+    });
+
+    expect(result.id).toBeDefined();
+
+    const stored = await prisma.conversationArchive.findUnique({
+      where: {
+        id: result.id,
+      },
+    });
+
+    expect(stored).toBeTruthy();
+    expect(stored?.workspaceId).toBe(workspaceId);
+    expect(stored?.sessionId).toBe(sessionId);
+    expect(stored?.messageCount).toBe(2);
+    expect(stored?.summary).toBe("Deployment retry failures discussed");
+  });
+
+  it("rejects duplicate session ingest per workspace", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    const sessionId = `session-${uuid()}`;
+    const dto = {
+      sessionId,
+      agentId: "agent-conversation-duplicate",
+      messages: [{ role: "user", content: "hello" }],
+      summary: "simple conversation",
+      startedAt: "2026-02-28T22:00:00.000Z",
+    };
+
+    await service.ingest(workspaceId, dto);
+
+    await expect(service.ingest(workspaceId, dto)).rejects.toThrow(ConflictException);
+  });
+
+  it("rejects semantic search when embeddings are disabled", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    embeddingServiceMock.isConfigured.mockReturnValue(false);
+
+    await expect(
+      service.search(workspaceId, {
+        query: "deployment retries",
+      })
+    ).rejects.toThrow(ConflictException);
+  });
+
+  it("searches archived conversations by vector similarity", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    const near = vector(0.02);
+    const far = vector(0.85);
+
+    const matching = await prisma.conversationArchive.create({
+      data: {
+        workspaceId,
+        sessionId: `session-search-${uuid()}`,
+        agentId: "agent-conversation-search-a",
+        messages: [
+          { role: "user", content: "What caused deployment retries?" },
+          { role: "assistant", content: "A connection pool timeout." },
+        ] as unknown as Prisma.InputJsonValue,
+        messageCount: 2,
+        summary: "Deployment retries caused by connection pool timeout",
+        startedAt: new Date("2026-02-28T23:00:00.000Z"),
+        metadata: { channel: "cli" } as Prisma.InputJsonValue,
+      },
+    });
+
+    const nonMatching = await prisma.conversationArchive.create({
+      data: {
+        workspaceId,
+        sessionId: `session-search-${uuid()}`,
+        agentId: "agent-conversation-search-b",
+        messages: [
+          { role: "user", content: "How is billing configured?" },
+        ] as unknown as Prisma.InputJsonValue,
+        messageCount: 1,
+        summary: "Billing and quotas conversation",
+        startedAt: new Date("2026-02-28T23:10:00.000Z"),
+        metadata: { channel: "cli" } as Prisma.InputJsonValue,
+      },
+    });
+
+    await prisma.$executeRaw`
+      UPDATE conversation_archives
+      SET embedding = ${toVectorLiteral(near)}::vector(${EMBEDDING_DIMENSION})
+      WHERE id = ${matching.id}::uuid
+    `;
+    await prisma.$executeRaw`
+      UPDATE conversation_archives
+      SET embedding = ${toVectorLiteral(far)}::vector(${EMBEDDING_DIMENSION})
+      WHERE id = ${nonMatching.id}::uuid
+    `;
+
+    embeddingServiceMock.isConfigured.mockReturnValue(true);
+    embeddingServiceMock.generateEmbedding.mockResolvedValue(near);
+
+    const result = await service.search(workspaceId, {
+      query: "deployment retries timeout",
+      agentId: "agent-conversation-search-a",
+      similarityThreshold: 0,
+      limit: 10,
+    });
+
+    const rows = result.data as Array<{ id: string; agent_id: string; similarity: number }>;
+
+    expect(result.pagination.total).toBe(1);
+    expect(rows).toHaveLength(1);
+    expect(rows[0]?.id).toBe(matching.id);
+    expect(rows[0]?.agent_id).toBe("agent-conversation-search-a");
+    expect(rows[0]?.similarity).toBeGreaterThan(0);
+  });
+});

apps/api/src/findings/findings.integration.spec.ts

@@ -0,0 +1,226 @@
+import { beforeAll, beforeEach, describe, expect, it, afterAll, vi } from "vitest";
+import { randomUUID as uuid } from "crypto";
+import { Test, TestingModule } from "@nestjs/testing";
+import { BadRequestException, NotFoundException } from "@nestjs/common";
+import { PrismaClient, Prisma } from "@prisma/client";
+import { FindingsService } from "./findings.service";
+import { PrismaService } from "../prisma/prisma.service";
+import { EmbeddingService } from "../knowledge/services/embedding.service";
+
+const shouldRunDbIntegrationTests =
+  process.env.RUN_DB_TESTS === "true" && Boolean(process.env.DATABASE_URL);
+const describeFn = shouldRunDbIntegrationTests ? describe : describe.skip;
+
+const EMBEDDING_DIMENSION = 1536;
+
+function vector(value: number): number[] {
+  return Array.from({ length: EMBEDDING_DIMENSION }, () => value);
+}
+
+function toVectorLiteral(input: number[]): string {
+  return `[${input.join(",")}]`;
+}
+
+describeFn("FindingsService Integration", () => {
+  let moduleRef: TestingModule;
+  let prisma: PrismaClient;
+  let service: FindingsService;
+  let workspaceId: string;
+  let ownerId: string;
+  let setupComplete = false;
+
+  const embeddingServiceMock = {
+    isConfigured: vi.fn(),
+    generateEmbedding: vi.fn(),
+  };
+
+  beforeAll(async () => {
+    prisma = new PrismaClient();
+    await prisma.$connect();
+
+    const workspace = await prisma.workspace.create({
+      data: {
+        name: `Findings Integration ${Date.now()}`,
+        owner: {
+          create: {
+            email: `findings-integration-${Date.now()}@example.com`,
+            name: "Findings Integration Owner",
+          },
+        },
+      },
+    });
+
+    workspaceId = workspace.id;
+    ownerId = workspace.ownerId;
+
+    moduleRef = await Test.createTestingModule({
+      providers: [
+        FindingsService,
+        {
+          provide: PrismaService,
+          useValue: prisma,
+        },
+        {
+          provide: EmbeddingService,
+          useValue: embeddingServiceMock,
+        },
+      ],
+    }).compile();
+
+    service = moduleRef.get<FindingsService>(FindingsService);
+    setupComplete = true;
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    embeddingServiceMock.isConfigured.mockReturnValue(false);
+  });
+
+  afterAll(async () => {
+    if (!prisma) {
+      return;
+    }
+
+    if (workspaceId) {
+      await prisma.finding.deleteMany({ where: { workspaceId } });
+      await prisma.workspace.deleteMany({ where: { id: workspaceId } });
+    }
+    if (ownerId) {
+      await prisma.user.deleteMany({ where: { id: ownerId } });
+    }
+
+    if (moduleRef) {
+      await moduleRef.close();
+    }
+    await prisma.$disconnect();
+  });
+
+  it("creates, lists, fetches, and deletes findings", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    const created = await service.create(workspaceId, {
+      agentId: "agent-findings-crud",
+      type: "security",
+      title: "Unescaped SQL fragment",
+      data: { severity: "high" },
+      summary: "Potential injection risk in dynamic query path.",
+    });
+
+    expect(created.id).toBeDefined();
+    expect(created.workspaceId).toBe(workspaceId);
+    expect(created.taskId).toBeNull();
+
+    const listed = await service.findAll(workspaceId, {
+      page: 1,
+      limit: 10,
+      agentId: "agent-findings-crud",
+    });
+
+    expect(listed.meta.total).toBeGreaterThanOrEqual(1);
+    expect(listed.data.some((row) => row.id === created.id)).toBe(true);
+
+    const found = await service.findOne(created.id, workspaceId);
+    expect(found.id).toBe(created.id);
+    expect(found.title).toBe("Unescaped SQL fragment");
+
+    await expect(service.findOne(created.id, uuid())).rejects.toThrow(NotFoundException);
+
+    await expect(service.remove(created.id, workspaceId)).resolves.toEqual({
+      message: "Finding deleted successfully",
+    });
+
+    await expect(service.findOne(created.id, workspaceId)).rejects.toThrow(NotFoundException);
+  });
+
+  it("rejects create when taskId does not exist in workspace", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    await expect(
+      service.create(workspaceId, {
+        taskId: uuid(),
+        agentId: "agent-findings-missing-task",
+        type: "bug",
+        title: "Invalid task id",
+        data: { source: "integration-test" },
+        summary: "Should fail when task relation is not found.",
+      })
+    ).rejects.toThrow(NotFoundException);
+  });
+
+  it("rejects vector search when embeddings are disabled", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    embeddingServiceMock.isConfigured.mockReturnValue(false);
+
+    await expect(
+      service.search(workspaceId, {
+        query: "security issue",
+      })
+    ).rejects.toThrow(BadRequestException);
+  });
+
+  it("searches findings by vector similarity with filters", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    const near = vector(0.01);
+    const far = vector(0.9);
+
+    const matchedFinding = await prisma.finding.create({
+      data: {
+        workspaceId,
+        agentId: "agent-findings-search-a",
+        type: "incident",
+        title: "Authentication bypass",
+        data: { score: 0.9 } as Prisma.InputJsonValue,
+        summary: "Bypass risk found in login checks.",
+      },
+    });
+
+    const otherFinding = await prisma.finding.create({
+      data: {
+        workspaceId,
+        agentId: "agent-findings-search-b",
+        type: "incident",
+        title: "Retry timeout",
+        data: { score: 0.2 } as Prisma.InputJsonValue,
+        summary: "Timeout issue in downstream retries.",
+      },
+    });
+
+    await prisma.$executeRaw`
+      UPDATE findings
+      SET embedding = ${toVectorLiteral(near)}::vector(1536)
+      WHERE id = ${matchedFinding.id}::uuid
+    `;
+    await prisma.$executeRaw`
+      UPDATE findings
+      SET embedding = ${toVectorLiteral(far)}::vector(1536)
+      WHERE id = ${otherFinding.id}::uuid
+    `;
+
+    embeddingServiceMock.isConfigured.mockReturnValue(true);
+    embeddingServiceMock.generateEmbedding.mockResolvedValue(near);
+
+    const result = await service.search(workspaceId, {
+      query: "authentication bypass risk",
+      agentId: "agent-findings-search-a",
+      limit: 10,
+      similarityThreshold: 0,
+    });
+
+    expect(result.query).toBe("authentication bypass risk");
+    expect(result.meta.total).toBe(1);
+    expect(result.data).toHaveLength(1);
+    expect(result.data[0]?.id).toBe(matchedFinding.id);
+    expect(result.data[0]?.agentId).toBe("agent-findings-search-a");
+    expect(result.data.find((row) => row.id === otherFinding.id)).toBeUndefined();
+  });
+});

apps/api/src/tasks/tasks.assigned-agent.integration.spec.ts

@@ -0,0 +1,162 @@
+import { beforeAll, beforeEach, describe, expect, it, afterAll, vi } from "vitest";
+import { randomUUID as uuid } from "crypto";
+import { Test, TestingModule } from "@nestjs/testing";
+import { PrismaClient } from "@prisma/client";
+import { TasksService } from "./tasks.service";
+import { PrismaService } from "../prisma/prisma.service";
+import { ActivityService } from "../activity/activity.service";
+
+const shouldRunDbIntegrationTests =
+  process.env.RUN_DB_TESTS === "true" && Boolean(process.env.DATABASE_URL);
+const describeFn = shouldRunDbIntegrationTests ? describe : describe.skip;
+
+describeFn("TasksService assignedAgent Integration", () => {
+  let moduleRef: TestingModule;
+  let prisma: PrismaClient;
+  let service: TasksService;
+  let workspaceId: string;
+  let ownerId: string;
+  let setupComplete = false;
+
+  const activityServiceMock = {
+    logTaskCreated: vi.fn().mockResolvedValue(undefined),
+    logTaskUpdated: vi.fn().mockResolvedValue(undefined),
+    logTaskDeleted: vi.fn().mockResolvedValue(undefined),
+    logTaskCompleted: vi.fn().mockResolvedValue(undefined),
+    logTaskAssigned: vi.fn().mockResolvedValue(undefined),
+  };
+
+  beforeAll(async () => {
+    prisma = new PrismaClient();
+    await prisma.$connect();
+
+    const workspace = await prisma.workspace.create({
+      data: {
+        name: `Tasks Assigned Agent Integration ${Date.now()}`,
+        owner: {
+          create: {
+            email: `tasks-assigned-agent-integration-${Date.now()}@example.com`,
+            name: "Tasks Assigned Agent Integration Owner",
+          },
+        },
+      },
+    });
+
+    workspaceId = workspace.id;
+    ownerId = workspace.ownerId;
+
+    moduleRef = await Test.createTestingModule({
+      providers: [
+        TasksService,
+        {
+          provide: PrismaService,
+          useValue: prisma,
+        },
+        {
+          provide: ActivityService,
+          useValue: activityServiceMock,
+        },
+      ],
+    }).compile();
+
+    service = moduleRef.get<TasksService>(TasksService);
+    setupComplete = true;
+  });
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+
+    if (!setupComplete) {
+      return;
+    }
+
+    await prisma.task.deleteMany({ where: { workspaceId } });
+  });
+
+  afterAll(async () => {
+    if (!prisma) {
+      return;
+    }
+
+    if (workspaceId) {
+      await prisma.task.deleteMany({ where: { workspaceId } });
+      await prisma.workspace.deleteMany({ where: { id: workspaceId } });
+    }
+    if (ownerId) {
+      await prisma.user.deleteMany({ where: { id: ownerId } });
+    }
+
+    if (moduleRef) {
+      await moduleRef.close();
+    }
+    await prisma.$disconnect();
+  });
+
+  it("persists assignedAgent on create", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    const task = await service.create(workspaceId, ownerId, {
+      title: `Assigned agent create ${uuid()}`,
+      assignedAgent: "fleet-worker-1",
+    });
+
+    expect(task.assignedAgent).toBe("fleet-worker-1");
+
+    const stored = await prisma.task.findUnique({
+      where: {
+        id: task.id,
+      },
+      select: {
+        id: true,
+        assignedAgent: true,
+      },
+    });
+
+    expect(stored).toMatchObject({
+      id: task.id,
+      assignedAgent: "fleet-worker-1",
+    });
+
+    const listed = await service.findAll({ workspaceId, page: 1, limit: 10 }, ownerId);
+    const listedTask = listed.data.find((row) => row.id === task.id);
+
+    expect(listedTask?.assignedAgent).toBe("fleet-worker-1");
+  });
+
+  it("updates and clears assignedAgent", async () => {
+    if (!setupComplete) {
+      return;
+    }
+
+    const created = await service.create(workspaceId, ownerId, {
+      title: `Assigned agent update ${uuid()}`,
+    });
+
+    expect(created.assignedAgent).toBeNull();
+
+    const updated = await service.update(created.id, workspaceId, ownerId, {
+      assignedAgent: "fleet-worker-2",
+    });
+
+    expect(updated.assignedAgent).toBe("fleet-worker-2");
+
+    const cleared = await service.update(created.id, workspaceId, ownerId, {
+      assignedAgent: null,
+    });
+
+    expect(cleared.assignedAgent).toBeNull();
+
+    const stored = await prisma.task.findUnique({
+      where: {
+        id: created.id,
+      },
+      select: {
+        assignedAgent: true,
+      },
+    });
+
+    expect(stored?.assignedAgent).toBeNull();
+  });
+});

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

@@ -230,6 +230,7 @@ const categories: CategoryConfig[] = [
     title: "Teams",
     description: "Create and manage teams within your active workspace.",
     href: "/settings/teams",
+    adminOnly: true,
     accent: "var(--ms-blue-400)",
     iconBg: "rgba(47, 128, 255, 0.12)",
     icon: (

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

@@ -1,9 +1,12 @@
 import type { ReactElement, ReactNode } from "react";
 import type { TeamRecord } from "@/lib/api/teams";
 
-import { render, screen } from "@testing-library/react";
+import { WorkspaceMemberRole } from "@mosaic/shared";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { fetchTeams } from "@/lib/api/teams";
+import { createTeam, deleteTeam, fetchTeams, updateTeam } from "@/lib/api/teams";
+import { fetchUserWorkspaces } from "@/lib/api/workspaces";
 
 import TeamsSettingsPage from "./page";
 
@@ -22,9 +25,19 @@ vi.mock("next/link", () => ({
 vi.mock("@/lib/api/teams", () => ({
   fetchTeams: vi.fn(),
   createTeam: vi.fn(),
+  updateTeam: vi.fn(),
+  deleteTeam: vi.fn(),
+}));
+
+vi.mock("@/lib/api/workspaces", () => ({
+  fetchUserWorkspaces: vi.fn(),
 }));
 
 const fetchTeamsMock = vi.mocked(fetchTeams);
+const createTeamMock = vi.mocked(createTeam);
+const updateTeamMock = vi.mocked(updateTeam);
+const deleteTeamMock = vi.mocked(deleteTeam);
+const fetchUserWorkspacesMock = vi.mocked(fetchUserWorkspaces);
 
 const baseTeam: TeamRecord = {
   id: "team-1",
@@ -42,6 +55,33 @@ const baseTeam: TeamRecord = {
 describe("TeamsSettingsPage", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    fetchTeamsMock.mockResolvedValue([]);
+    fetchUserWorkspacesMock.mockResolvedValue([
+      {
+        id: "workspace-1",
+        name: "Personal Workspace",
+        ownerId: "owner-1",
+        role: WorkspaceMemberRole.OWNER,
+        createdAt: "2026-01-01T00:00:00.000Z",
+      },
+    ]);
+  });
+
+  it("shows access denied to non-admin users", async () => {
+    fetchUserWorkspacesMock.mockResolvedValueOnce([
+      {
+        id: "workspace-1",
+        name: "Personal Workspace",
+        ownerId: "owner-1",
+        role: WorkspaceMemberRole.MEMBER,
+        createdAt: "2026-01-01T00:00:00.000Z",
+      },
+    ]);
+
+    render(<TeamsSettingsPage />);
+
+    expect(await screen.findByText("Access Denied")).toBeInTheDocument();
+    expect(fetchTeamsMock).not.toHaveBeenCalled();
   });
 
   it("loads and renders teams from the API", async () => {
@@ -49,9 +89,7 @@ describe("TeamsSettingsPage", () => {
 
     render(<TeamsSettingsPage />);
 
-    expect(screen.getByText("Loading teams...")).toBeInTheDocument();
-
-    expect(await screen.findByText("Your Teams (1)")).toBeInTheDocument();
+    expect(await screen.findByText("Team Directory")).toBeInTheDocument();
     expect(screen.getByText("Platform Team")).toBeInTheDocument();
     expect(fetchTeamsMock).toHaveBeenCalledTimes(1);
   });
@@ -61,8 +99,8 @@ describe("TeamsSettingsPage", () => {
 
     render(<TeamsSettingsPage />);
 
-    expect(await screen.findByText("Your Teams (0)")).toBeInTheDocument();
-    expect(screen.getByText("No teams yet")).toBeInTheDocument();
+    expect(await screen.findByText("No Teams Yet")).toBeInTheDocument();
+    expect(screen.getByText("Create the first team to get started.")).toBeInTheDocument();
   });
 
   it("shows error state and does not show empty state", async () => {
@@ -71,6 +109,82 @@ describe("TeamsSettingsPage", () => {
     render(<TeamsSettingsPage />);
 
     expect(await screen.findByText("Unable to load teams")).toBeInTheDocument();
-    expect(screen.queryByText("No teams yet")).not.toBeInTheDocument();
+  });
+
+  it("creates a team from the create dialog", async () => {
+    const user = userEvent.setup();
+    fetchTeamsMock.mockResolvedValue([baseTeam]);
+    createTeamMock.mockResolvedValue({
+      ...baseTeam,
+      id: "team-2",
+      name: "Design Team",
+      description: "Owns design quality",
+    });
+
+    render(<TeamsSettingsPage />);
+
+    expect(await screen.findByText("Platform Team")).toBeInTheDocument();
+
+    const triggerButton = screen.getByRole("button", { name: "Create Team" });
+    await user.click(triggerButton);
+
+    await user.type(screen.getByLabelText("Name"), "Design Team");
+    await user.type(screen.getByLabelText("Description"), "Owns design quality");
+
+    const submitButton = screen.getAllByRole("button", { name: "Create Team" })[1];
+    if (!submitButton) {
+      throw new Error("Expected create-team submit button to be rendered");
+    }
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(createTeamMock).toHaveBeenCalledWith({
+        name: "Design Team",
+        description: "Owns design quality",
+      });
+    });
+  });
+
+  it("opens team details and updates name", async () => {
+    const user = userEvent.setup();
+    fetchTeamsMock.mockResolvedValue([baseTeam]);
+    updateTeamMock.mockResolvedValue({
+      ...baseTeam,
+      name: "Platform Engineering",
+    });
+
+    render(<TeamsSettingsPage />);
+
+    expect(await screen.findByText("Platform Team")).toBeInTheDocument();
+
+    await user.click(screen.getByText("Platform Team"));
+
+    const nameInput = await screen.findByLabelText("Name");
+    await user.clear(nameInput);
+    await user.type(nameInput, "Platform Engineering");
+    await user.click(screen.getByRole("button", { name: "Save Changes" }));
+
+    await waitFor(() => {
+      expect(updateTeamMock).toHaveBeenCalledWith("team-1", {
+        name: "Platform Engineering",
+      });
+    });
+  });
+
+  it("deletes a team from the confirmation dialog", async () => {
+    const user = userEvent.setup();
+    fetchTeamsMock.mockResolvedValue([baseTeam]);
+    deleteTeamMock.mockResolvedValue();
+
+    render(<TeamsSettingsPage />);
+
+    expect(await screen.findByText("Platform Team")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Delete" }));
+    await user.click(screen.getByRole("button", { name: "Delete Team" }));
+
+    await waitFor(() => {
+      expect(deleteTeamMock).toHaveBeenCalledWith("team-1");
+    });
   });
 });

apps/web/src/app/(authenticated)/settings/teams/page.tsx

@@ -1,244 +1,582 @@
 "use client";
 
-import type { ReactElement, SyntheticEvent } from "react";
-
-import { useCallback, useEffect, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type ChangeEvent,
+  type KeyboardEvent,
+  type ReactElement,
+  type SyntheticEvent,
+} from "react";
 import Link from "next/link";
-import { createTeam, fetchTeams, type CreateTeamDto, type TeamRecord } from "@/lib/api/teams";
+import { Plus, Trash2, Users } from "lucide-react";
+import { WorkspaceMemberRole } from "@mosaic/shared";
+import { SettingsAccessDenied } from "@/components/settings/SettingsAccessDenied";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  createTeam,
+  deleteTeam,
+  fetchTeams,
+  updateTeam,
+  type CreateTeamDto,
+  type TeamRecord,
+  type UpdateTeamDto,
+} from "@/lib/api/teams";
+import { fetchUserWorkspaces } from "@/lib/api/workspaces";
 
-function getErrorMessage(error: unknown, fallback: string): string {
-  if (error instanceof Error) {
-    return error.message;
-  }
+const INITIAL_CREATE_FORM = {
+  name: "",
+  description: "",
+};
 
-  return fallback;
+const INITIAL_DETAIL_FORM = {
+  name: "",
+  description: "",
+};
+
+interface DetailInitialState {
+  name: string;
+  description: string;
+}
+
+function toMemberLabel(count: number): string {
+  return `${String(count)} member${count === 1 ? "" : "s"}`;
 }
 
 export default function TeamsSettingsPage(): ReactElement {
   const [teams, setTeams] = useState<TeamRecord[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-  const [isCreating, setIsCreating] = useState(false);
-  const [newTeamName, setNewTeamName] = useState("");
-  const [newTeamDescription, setNewTeamDescription] = useState("");
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isAdmin, setIsAdmin] = useState<boolean | null>(null);
+
+  const [isCreateOpen, setIsCreateOpen] = useState<boolean>(false);
+  const [createForm, setCreateForm] = useState(INITIAL_CREATE_FORM);
   const [createError, setCreateError] = useState<string | null>(null);
+  const [isCreating, setIsCreating] = useState<boolean>(false);
 
-  const loadTeams = useCallback(async (): Promise<void> => {
-    setIsLoading(true);
+  const [detailTarget, setDetailTarget] = useState<TeamRecord | null>(null);
+  const [detailForm, setDetailForm] = useState(INITIAL_DETAIL_FORM);
+  const [detailInitial, setDetailInitial] = useState<DetailInitialState | null>(null);
+  const [detailError, setDetailError] = useState<string | null>(null);
+  const [isSavingDetails, setIsSavingDetails] = useState<boolean>(false);
 
+  const [deleteTarget, setDeleteTarget] = useState<TeamRecord | null>(null);
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
+
+  const loadTeams = useCallback(async (showLoadingState: boolean): Promise<void> => {
     try {
+      if (showLoadingState) {
+        setIsLoading(true);
+      } else {
+        setIsRefreshing(true);
+      }
+
       const data = await fetchTeams();
       setTeams(data);
-      setLoadError(null);
-    } catch (error) {
-      setLoadError(getErrorMessage(error, "Failed to load teams"));
+      setError(null);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to load teams");
     } finally {
       setIsLoading(false);
+      setIsRefreshing(false);
     }
   }, []);
 
   useEffect(() => {
-    void loadTeams();
-  }, [loadTeams]);
+    fetchUserWorkspaces()
+      .then((workspaces) => {
+        const adminRoles: WorkspaceMemberRole[] = [
+          WorkspaceMemberRole.OWNER,
+          WorkspaceMemberRole.ADMIN,
+        ];
 
-  const handleCreateTeam = async (e: SyntheticEvent<HTMLFormElement>): Promise<void> => {
-    e.preventDefault();
+        setIsAdmin(workspaces.some((workspace) => adminRoles.includes(workspace.role)));
+      })
+      .catch(() => {
+        setIsAdmin(true); // fail open
+      });
+  }, []);
 
-    const teamName = newTeamName.trim();
-    if (!teamName) return;
+  useEffect(() => {
+    if (isAdmin !== true) {
+      return;
+    }
 
-    setIsCreating(true);
+    void loadTeams(true);
+  }, [isAdmin, loadTeams]);
+
+  function resetCreateForm(): void {
+    setCreateForm(INITIAL_CREATE_FORM);
+    setCreateError(null);
+  }
+
+  function openTeamDetails(team: TeamRecord): void {
+    const nextDetailForm = {
+      name: team.name,
+      description: team.description ?? "",
+    };
+
+    setDetailTarget(team);
+    setDetailForm(nextDetailForm);
+    setDetailInitial({
+      name: nextDetailForm.name,
+      description: nextDetailForm.description,
+    });
+    setDetailError(null);
+  }
+
+  function resetTeamDetails(): void {
+    setDetailTarget(null);
+    setDetailForm(INITIAL_DETAIL_FORM);
+    setDetailInitial(null);
+    setDetailError(null);
+  }
+
+  function handleTeamRowKeyDown(event: KeyboardEvent<HTMLDivElement>, team: TeamRecord): void {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openTeamDetails(team);
+    }
+  }
+
+  async function handleCreateSubmit(event: SyntheticEvent): Promise<void> {
+    event.preventDefault();
     setCreateError(null);
 
-    try {
-      const description = newTeamDescription.trim();
-      const dto: CreateTeamDto = { name: teamName };
-      if (description.length > 0) {
-        dto.description = description;
-      }
+    const name = createForm.name.trim();
+    if (!name) {
+      setCreateError("Name is required.");
+      return;
+    }
 
+    const description = createForm.description.trim();
+    const dto: CreateTeamDto = { name };
+    if (description) {
+      dto.description = description;
+    }
+
+    try {
+      setIsCreating(true);
       await createTeam(dto);
-      setNewTeamName("");
-      setNewTeamDescription("");
-      setIsCreateDialogOpen(false);
-      await loadTeams();
-    } catch (error) {
-      setCreateError(getErrorMessage(error, "Failed to create team"));
+      setIsCreateOpen(false);
+      resetCreateForm();
+      await loadTeams(false);
+    } catch (err: unknown) {
+      setCreateError(err instanceof Error ? err.message : "Failed to create team");
     } finally {
       setIsCreating(false);
     }
-  };
+  }
+
+  async function handleDetailSubmit(event: SyntheticEvent): Promise<void> {
+    event.preventDefault();
+
+    if (detailTarget === null || detailInitial === null) {
+      return;
+    }
+
+    const name = detailForm.name.trim();
+    if (!name) {
+      setDetailError("Name is required.");
+      return;
+    }
+
+    const nextDescription = detailForm.description.trim();
+    const normalizedNextDescription = nextDescription.length > 0 ? nextDescription : null;
+    const normalizedInitialDescription =
+      detailInitial.description.trim().length > 0 ? detailInitial.description.trim() : null;
+
+    const dto: UpdateTeamDto = {};
+
+    if (name !== detailInitial.name) {
+      dto.name = name;
+    }
+
+    if (normalizedNextDescription !== normalizedInitialDescription) {
+      dto.description = normalizedNextDescription;
+    }
+
+    if (Object.keys(dto).length === 0) {
+      resetTeamDetails();
+      return;
+    }
+
+    try {
+      setIsSavingDetails(true);
+      setDetailError(null);
+      await updateTeam(detailTarget.id, dto);
+      resetTeamDetails();
+      await loadTeams(false);
+    } catch (err: unknown) {
+      setDetailError(err instanceof Error ? err.message : "Failed to update team");
+    } finally {
+      setIsSavingDetails(false);
+    }
+  }
+
+  async function confirmDelete(): Promise<void> {
+    if (!deleteTarget) {
+      return;
+    }
+
+    try {
+      setIsDeleting(true);
+      await deleteTeam(deleteTarget.id);
+      setDeleteTarget(null);
+      await loadTeams(false);
+      setError(null);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to delete team");
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+
+  if (isAdmin === null) {
+    return (
+      <Card className="max-w-2xl mx-auto mt-8">
+        <CardContent className="py-12 text-center text-muted-foreground">
+          Checking permissions...
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!isAdmin) {
+    return <SettingsAccessDenied message="You need Admin or Owner role to manage teams." />;
+  }
 
   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">Teams</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 teams in your active workspace</p>
-      </div>
-
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
-        <div className="flex items-center justify-between gap-4">
-          <div>
-            <h2 className="text-lg font-semibold text-gray-900">Create New Team</h2>
-            <p className="text-sm text-gray-600 mt-1">
-              Add a team to organize members and permissions.
-            </p>
+    <div className="max-w-6xl mx-auto p-6 space-y-6">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-3">
+            <h1 className="text-3xl font-bold">Teams</h1>
+            <Badge variant="outline">{teams.length} total</Badge>
           </div>
-          <button
-            type="button"
+          <p className="text-muted-foreground mt-1">Create and manage workspace teams</p>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
             onClick={() => {
-              setCreateError(null);
-              setIsCreateDialogOpen(true);
+              void loadTeams(false);
             }}
-            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium"
+            disabled={isLoading || isRefreshing}
           >
-            Create Team
-          </button>
+            {isRefreshing ? "Refreshing..." : "Refresh"}
+          </Button>
+
+          <Dialog
+            open={isCreateOpen}
+            onOpenChange={(open) => {
+              if (!open && !isCreating) {
+                resetCreateForm();
+              }
+              setIsCreateOpen(open);
+            }}
+          >
+            <DialogTrigger asChild>
+              <Button>
+                <Plus className="h-4 w-4 mr-2" />
+                Create Team
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Create Team</DialogTitle>
+                <DialogDescription>
+                  Create a team in the active workspace to organize members and permissions.
+                </DialogDescription>
+              </DialogHeader>
+
+              <form
+                onSubmit={(event) => {
+                  void handleCreateSubmit(event);
+                }}
+                className="space-y-4"
+              >
+                <div className="space-y-2">
+                  <Label htmlFor="create-name">Name</Label>
+                  <Input
+                    id="create-name"
+                    value={createForm.name}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                      setCreateForm((prev) => ({ ...prev, name: event.target.value }));
+                    }}
+                    placeholder="Platform Team"
+                    maxLength={100}
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="create-description">Description</Label>
+                  <Textarea
+                    id="create-description"
+                    value={createForm.description}
+                    onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+                      setCreateForm((prev) => ({ ...prev, description: event.target.value }));
+                    }}
+                    placeholder="Owns platform services and infrastructure"
+                    maxLength={500}
+                    rows={4}
+                  />
+                </div>
+
+                {createError ? (
+                  <p className="text-sm text-destructive" role="alert">
+                    {createError}
+                  </p>
+                ) : null}
+
+                <DialogFooter>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      if (!isCreating) {
+                        setIsCreateOpen(false);
+                        resetCreateForm();
+                      }
+                    }}
+                    disabled={isCreating}
+                  >
+                    Cancel
+                  </Button>
+                  <Button type="submit" disabled={isCreating}>
+                    {isCreating ? "Creating..." : "Create Team"}
+                  </Button>
+                </DialogFooter>
+              </form>
+            </DialogContent>
+          </Dialog>
         </div>
       </div>
 
-      {isCreateDialogOpen && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4"
-          role="dialog"
-        >
-          <div className="w-full max-w-lg rounded-lg border border-gray-200 bg-white p-6 shadow-xl">
-            <h3 className="text-lg font-semibold text-gray-900">Create New Team</h3>
-            <p className="mt-1 text-sm text-gray-600">
-              Enter a team name and optional description.
+      <div>
+        <Link href="/settings" className="text-sm text-blue-600 hover:text-blue-700">
+          ← Back to Settings
+        </Link>
+      </div>
+
+      {error ? (
+        <Card>
+          <CardContent className="py-4">
+            <p className="text-sm text-destructive" role="alert">
+              {error}
             </p>
+          </CardContent>
+        </Card>
+      ) : null}
 
-            <form onSubmit={handleCreateTeam} className="mt-4 space-y-4">
-              <div>
-                <label htmlFor="team-name" className="mb-1 block text-sm font-medium text-gray-700">
-                  Team Name
-                </label>
-                <input
-                  id="team-name"
-                  type="text"
-                  value={newTeamName}
-                  onChange={(e) => {
-                    setNewTeamName(e.target.value);
-                  }}
-                  placeholder="Enter team name..."
-                  disabled={isCreating}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
-                  autoFocus
-                />
-              </div>
+      {isLoading ? (
+        <Card>
+          <CardContent className="py-12 text-center text-muted-foreground">
+            Loading teams...
+          </CardContent>
+        </Card>
+      ) : teams.length === 0 ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>No Teams Yet</CardTitle>
+            <CardDescription>Create the first team to get started.</CardDescription>
+          </CardHeader>
+        </Card>
+      ) : (
+        <Card>
+          <CardHeader>
+            <CardTitle>Team Directory</CardTitle>
+            <CardDescription>
+              Click a team to view details or edit name and description.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {teams.map((team) => {
+              const memberCount = team._count?.members ?? 0;
+              const description = team.description?.trim();
 
-              <div>
-                <label
-                  htmlFor="team-description"
-                  className="mb-1 block text-sm font-medium text-gray-700"
-                >
-                  Description (optional)
-                </label>
-                <textarea
-                  id="team-description"
-                  value={newTeamDescription}
-                  onChange={(e) => {
-                    setNewTeamDescription(e.target.value);
-                  }}
-                  placeholder="Describe this team's purpose..."
-                  disabled={isCreating}
-                  rows={3}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
-                />
-              </div>
-
-              {createError !== null && (
-                <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-                  {createError}
-                </div>
-              )}
-
-              <div className="flex justify-end gap-3">
-                <button
-                  type="button"
+              return (
+                <div
+                  key={team.id}
+                  className="rounded-md border p-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between cursor-pointer hover:bg-muted/30"
+                  role="button"
+                  tabIndex={0}
                   onClick={() => {
-                    if (!isCreating) {
-                      setIsCreateDialogOpen(false);
-                    }
+                    openTeamDetails(team);
+                  }}
+                  onKeyDown={(event) => {
+                    handleTeamRowKeyDown(event, team);
                   }}
-                  disabled={isCreating}
-                  className="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed"
                 >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  disabled={isCreating || !newTeamName.trim()}
-                  className="px-5 py-2 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
-                >
-                  {isCreating ? "Creating..." : "Create Team"}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
+                  <div className="space-y-1 min-w-0">
+                    <p className="font-semibold truncate">{team.name}</p>
+                    <p className="text-sm text-muted-foreground truncate">
+                      {description && description.length > 0 ? description : "No description"}
+                    </p>
+                  </div>
+
+                  <div className="flex items-center gap-2 flex-wrap md:justify-end">
+                    <Badge variant="outline">
+                      <Users className="h-3.5 w-3.5 mr-1" />
+                      {toMemberLabel(memberCount)}
+                    </Badge>
+                    <Badge variant="secondary">
+                      Created {new Date(team.createdAt).toLocaleDateString()}
+                    </Badge>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        setDeleteTarget(team);
+                      }}
+                    >
+                      <Trash2 className="h-4 w-4 mr-2" />
+                      Delete
+                    </Button>
+                  </div>
+                </div>
+              );
+            })}
+          </CardContent>
+        </Card>
       )}
 
-      <div className="space-y-4">
-        <h2 className="text-xl font-semibold text-gray-900">
-          Your Teams ({isLoading ? "..." : teams.length})
-        </h2>
-        {loadError !== null ? (
-          <div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-red-700">
-            {loadError}
-          </div>
-        ) : isLoading ? (
-          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center text-gray-600">
-            Loading teams...
-          </div>
-        ) : teams.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="M17 20h5V8H2v12h5m10 0v-4a3 3 0 10-6 0v4m6 0H7"
+      <Dialog
+        open={detailTarget !== null}
+        onOpenChange={(open) => {
+          if (!open && !isSavingDetails) {
+            resetTeamDetails();
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Team Details</DialogTitle>
+            <DialogDescription>
+              Edit team details for {detailTarget?.name ?? "selected team"}.
+            </DialogDescription>
+          </DialogHeader>
+
+          <form
+            onSubmit={(event) => {
+              void handleDetailSubmit(event);
+            }}
+            className="space-y-4"
+          >
+            <div className="space-y-2">
+              <Label htmlFor="detail-name">Name</Label>
+              <Input
+                id="detail-name"
+                value={detailForm.name}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setDetailForm((prev) => ({ ...prev, name: event.target.value }));
+                }}
+                placeholder="Team name"
+                maxLength={100}
+                disabled={isSavingDetails}
+                required
               />
-            </svg>
-            <h3 className="text-lg font-medium text-gray-900 mb-2">No teams yet</h3>
-            <p className="text-gray-600">Create your first team to get started</p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {teams.map((team) => (
-              <article
-                key={team.id}
-                className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm"
-                data-testid="team-card"
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="detail-description">Description</Label>
+              <Textarea
+                id="detail-description"
+                value={detailForm.description}
+                onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+                  setDetailForm((prev) => ({ ...prev, description: event.target.value }));
+                }}
+                placeholder="Describe this team"
+                maxLength={500}
+                rows={4}
+                disabled={isSavingDetails}
+              />
+            </div>
+
+            {detailError !== null ? (
+              <p className="text-sm text-destructive" role="alert">
+                {detailError}
+              </p>
+            ) : null}
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  if (!isSavingDetails) {
+                    resetTeamDetails();
+                  }
+                }}
+                disabled={isSavingDetails}
               >
-                <h3 className="text-lg font-semibold text-gray-900">{team.name}</h3>
-                {team.description ? (
-                  <p className="mt-1 text-sm text-gray-600">{team.description}</p>
-                ) : (
-                  <p className="mt-1 text-sm text-gray-400 italic">No description</p>
-                )}
-                <div className="mt-4 flex items-center gap-3 text-xs text-gray-500">
-                  <span>{team._count?.members ?? 0} members</span>
-                  <span>|</span>
-                  <span>Created {new Date(team.createdAt).toLocaleDateString()}</span>
-                </div>
-              </article>
-            ))}
-          </div>
-        )}
-      </div>
-    </main>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSavingDetails}>
+                {isSavingDetails ? "Saving..." : "Save Changes"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open && !isDeleting) {
+            setDeleteTarget(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Team</AlertDialogTitle>
+            <AlertDialogDescription>
+              Delete {deleteTarget?.name}? Team members will be removed from this team assignment.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              disabled={isDeleting}
+              onClick={() => {
+                void confirmDelete();
+              }}
+            >
+              {isDeleting ? "Deleting..." : "Delete Team"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
   );
 }

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

@@ -118,6 +118,23 @@ describe("UsersSettingsPage", () => {
     });
   });
 
+  it("shows access denied to non-admin users", async () => {
+    fetchUserWorkspacesMock.mockResolvedValueOnce([
+      {
+        id: "workspace-1",
+        name: "Personal Workspace",
+        ownerId: "owner-1",
+        role: WorkspaceMemberRole.MEMBER,
+        createdAt: "2026-01-01T00:00:00.000Z",
+      },
+    ]);
+
+    render(<UsersSettingsPage />);
+
+    expect(await screen.findByText("Access Denied")).toBeInTheDocument();
+    expect(fetchAdminUsersMock).not.toHaveBeenCalled();
+  });
+
   it("invites a user with email and role from the dialog", async () => {
     const user = userEvent.setup();
     render(<UsersSettingsPage />);

apps/web/src/app/(authenticated)/settings/users/page.tsx

@@ -56,6 +56,7 @@ import {
   type UpdateUserDto,
 } from "@/lib/api/admin";
 import { fetchUserWorkspaces, updateWorkspaceMemberRole } from "@/lib/api/workspaces";
+import { SettingsAccessDenied } from "@/components/settings/SettingsAccessDenied";
 
 const ROLE_PRIORITY: Record<WorkspaceMemberRole, number> = {
   [WorkspaceMemberRole.OWNER]: 4,
@@ -146,10 +147,6 @@ export default function UsersSettingsPage(): ReactElement {
     }
   }, []);
 
-  useEffect(() => {
-    void loadUsers(true);
-  }, [loadUsers]);
-
   useEffect(() => {
     fetchUserWorkspaces()
       .then((workspaces) => {
@@ -167,6 +164,14 @@ export default function UsersSettingsPage(): ReactElement {
       });
   }, []);
 
+  useEffect(() => {
+    if (isAdmin !== true) {
+      return;
+    }
+
+    void loadUsers(true);
+  }, [isAdmin, loadUsers]);
+
   function resetInviteForm(): void {
     setInviteForm(INITIAL_INVITE_FORM);
     setInviteError(null);
@@ -332,17 +337,20 @@ export default function UsersSettingsPage(): ReactElement {
     }
   }
 
-  if (isAdmin === false) {
+  if (isAdmin === null) {
     return (
-      <div className="p-8 max-w-2xl">
-        <div className="rounded-lg border border-red-200 bg-red-50 p-6 text-center">
-          <p className="text-lg font-semibold text-red-700">Access Denied</p>
-          <p className="mt-2 text-sm text-red-600">You need Admin or Owner role to manage users.</p>
-        </div>
-      </div>
+      <Card className="max-w-2xl mx-auto mt-8">
+        <CardContent className="py-12 text-center text-muted-foreground">
+          Checking permissions...
+        </CardContent>
+      </Card>
     );
   }
 
+  if (!isAdmin) {
+    return <SettingsAccessDenied message="You need Admin or Owner role to manage users." />;
+  }
+
   return (
     <div className="max-w-6xl mx-auto p-6 space-y-6">
       <div className="flex items-start justify-between gap-4">

apps/web/src/components/settings/SettingsAccessDenied.tsx

@@ -0,0 +1,16 @@
+import type { ReactElement } from "react";
+
+interface SettingsAccessDeniedProps {
+  message: string;
+}
+
+export function SettingsAccessDenied({ message }: SettingsAccessDeniedProps): ReactElement {
+  return (
+    <div className="p-8 max-w-2xl">
+      <div className="rounded-lg border border-red-200 bg-red-50 p-6 text-center">
+        <p className="text-lg font-semibold text-red-700">Access Denied</p>
+        <p className="mt-2 text-sm text-red-600">{message}</p>
+      </div>
+    </div>
+  );
+}

apps/web/src/lib/api/teams.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import * as client from "./client";
-import { fetchTeams, createTeam, fetchTeamMembers } from "./teams";
+import { fetchTeams, createTeam, fetchTeamMembers, updateTeam, deleteTeam } from "./teams";
 
 vi.mock("./client");
 
@@ -44,6 +44,18 @@ describe("createTeam", (): void => {
   });
 });
 
+describe("updateTeam", (): void => {
+  it("patches team endpoint", async (): Promise<void> => {
+    vi.mocked(client.apiPatch).mockResolvedValueOnce({ id: "t1", name: "Platform" } as never);
+    await updateTeam("t1", { name: "Platform" });
+    expect(client.apiPatch).toHaveBeenCalledWith(
+      "/api/workspaces/ws-1/teams/t1",
+      expect.objectContaining({ name: "Platform" }),
+      "ws-1"
+    );
+  });
+});
+
 describe("fetchTeamMembers", (): void => {
   it("calls members endpoint for team", async (): Promise<void> => {
     vi.mocked(client.apiGet).mockResolvedValueOnce([] as never);
@@ -51,3 +63,11 @@ describe("fetchTeamMembers", (): void => {
     expect(client.apiGet).toHaveBeenCalledWith("/api/workspaces/ws-1/teams/t-1/members", "ws-1");
   });
 });
+
+describe("deleteTeam", (): void => {
+  it("deletes team endpoint", async (): Promise<void> => {
+    vi.mocked(client.apiDelete).mockResolvedValueOnce(undefined as never);
+    await deleteTeam("t1");
+    expect(client.apiDelete).toHaveBeenCalledWith("/api/workspaces/ws-1/teams/t1", "ws-1");
+  });
+});

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

@@ -4,7 +4,7 @@
  */
 
 import type { TeamMemberRole } from "@mosaic/shared";
-import { apiDelete, apiGet, apiPost } from "./client";
+import { apiDelete, apiGet, apiPatch, apiPost } from "./client";
 
 const WORKSPACE_STORAGE_KEY = "mosaic-workspace-id";
 
@@ -55,6 +55,11 @@ export interface CreateTeamDto {
   description?: string;
 }
 
+export interface UpdateTeamDto {
+  name?: string;
+  description?: string | null;
+}
+
 export interface AddTeamMemberDto {
   userId: string;
   role?: TeamMemberRole;
@@ -80,6 +85,22 @@ export async function createTeam(dto: CreateTeamDto, workspaceId?: string): Prom
   );
 }
 
+/**
+ * Update a team in the active workspace.
+ */
+export async function updateTeam(
+  teamId: string,
+  dto: UpdateTeamDto,
+  workspaceId?: string
+): Promise<TeamRecord> {
+  const resolvedWorkspaceId = resolveWorkspaceId(workspaceId);
+  return apiPatch<TeamRecord>(
+    `/api/workspaces/${resolvedWorkspaceId}/teams/${teamId}`,
+    dto,
+    resolvedWorkspaceId
+  );
+}
+
 /**
  * Fetch team members for a team in the active workspace.
  * The current backend route shape is workspace-scoped team membership.

docs/TASKS.md

@@ -69,5 +69,5 @@ Remaining estimate: ~143K tokens (Codex budget).
 | MS22-API-003    | not-started | p0-knowledge | Task API: expose assigned_agent in CRUD                      | TASKS:P0 | api   | feat/ms22-task-agent           | MS22-DB-003                                               | MS22-TEST-001 | —            | —          | —            | 8K       | —    | Extend existing TaskModule                    |
 | MS22-TEST-001   | not-started | p0-knowledge | Integration tests: Findings + AgentMemory + ConvArchive      | TASKS:P0 | api   | test/ms22-integration          | MS22-API-001,MS22-API-002,MS22-API-004                    | MS22-VER-P0   | —            | —          | —            | 20K      | —    | E2E with live postgres                        |
 | MS22-SKILL-001  | not-started | p0-knowledge | OpenClaw mosaic skill (agents read/write findings/memory)    | TASKS:P0 | stack | feat/ms22-openclaw-skill       | MS22-API-001,MS22-API-002                                 | MS22-VER-P0   | —            | —          | —            | 15K      | —    | Skill in ~/.agents/skills/mosaic/             |
-| MS22-INGEST-001 | not-started | p0-knowledge | Session log ingestion pipeline (OpenClaw logs → ConvArchive) | TASKS:P0 | stack | feat/ms22-ingest               | MS22-API-004                                              | MS22-VER-P0   | —            | —          | —            | 20K      | —    | Script to batch-ingest existing logs          |
+| MS22-INGEST-001 | done        | p0-knowledge | Session log ingestion pipeline (OpenClaw logs → ConvArchive) | TASKS:P0 | stack | feat/ms22-ingest               | MS22-API-004                                              | MS22-VER-P0   | —            | —          | —            | 20K      | —    | Script to batch-ingest existing logs          |
 | MS22-VER-P0     | not-started | p0-knowledge | Phase 0 verification: all modules deployed + smoke tested    | TASKS:P0 | stack | —                              | MS22-TEST-001,MS22-SKILL-001,MS22-INGEST-001,MS22-API-003 | —             | —            | —          | —            | 5K       | —    |                                               |