feat(web): port conversation sidebar with search, rename, delete actions

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

.env.example

@@ -62,9 +62,15 @@ OTEL_SERVICE_NAME=mosaic-gateway
 # Comma-separated list of Ollama model IDs to register (default: llama3.2,codellama,mistral)
 # OLLAMA_MODELS=llama3.2,codellama,mistral
 
-# OpenAI — required for embedding and log-summarization features
+# Anthropic (claude-sonnet-4-6, claude-opus-4-6, claude-haiku-4-5)
+# ANTHROPIC_API_KEY=sk-ant-...
+
+# OpenAI (gpt-4o, gpt-4o-mini, o3-mini)
 # OPENAI_API_KEY=sk-...
 
+# Z.ai / GLM (glm-4.5, glm-4.5-air, glm-4.5-flash)
+# ZAI_API_KEY=...
+
 # Custom providers — JSON array of provider configs
 # Format: [{"id":"<id>","baseUrl":"<url>","apiKey":"<key>","models":[{"id":"<model-id>","name":"<label>"}]}]
 # MOSAIC_CUSTOM_PROVIDERS=
@@ -123,7 +129,26 @@ OTEL_SERVICE_NAME=mosaic-gateway
 # TELEGRAM_GATEWAY_URL=http://localhost:4000
 
 
-# ─── Authentik SSO (optional — set AUTHENTIK_CLIENT_ID to enable) ────────────
+# ─── SSO Providers (add credentials to enable) ───────────────────────────────
+
+# --- Authentik (optional — set AUTHENTIK_CLIENT_ID to enable) ---
 # AUTHENTIK_ISSUER=https://auth.example.com/application/o/mosaic/
 # AUTHENTIK_CLIENT_ID=
 # AUTHENTIK_CLIENT_SECRET=
+
+# --- WorkOS (optional — set WORKOS_CLIENT_ID to enable) ---
+# WORKOS_ISSUER=https://your-company.authkit.app
+# WORKOS_CLIENT_ID=client_...
+# WORKOS_CLIENT_SECRET=sk_live_...
+
+# --- Keycloak (optional — set KEYCLOAK_CLIENT_ID to enable) ---
+# KEYCLOAK_ISSUER=https://auth.example.com/realms/master
+# Legacy alternative if you prefer to compose the issuer from separate vars:
+# KEYCLOAK_URL=https://auth.example.com
+# KEYCLOAK_REALM=master
+# KEYCLOAK_CLIENT_ID=mosaic
+# KEYCLOAK_CLIENT_SECRET=
+
+# Feature flags — set to true alongside provider credentials to show SSO buttons in the UI
+# NEXT_PUBLIC_WORKOS_ENABLED=true
+# NEXT_PUBLIC_KEYCLOAK_ENABLED=true

.woodpecker/ci.yml

@@ -5,9 +5,10 @@ variables:
 when:
   - event: [push, pull_request, manual]
 
-# Turbo remote cache is at turbo.mosaicstack.dev (ducktors/turborepo-remote-cache).
+# Turbo remote cache (turbo.mosaicstack.dev) is configured via Woodpecker
-# TURBO_TOKEN is a Woodpecker secret injected via from_secret into the environment.
+# repository-level environment variables (TURBO_API, TURBO_TEAM, TURBO_TOKEN).
-# Turbo picks up TURBO_API, TURBO_TOKEN, and TURBO_TEAM automatically.
+# This avoids from_secret which is blocked on pull_request events.
+# If the env vars aren't set, turbo falls back to local cache only.
 
 steps:
   install:
@@ -18,11 +19,6 @@ steps:
 
   typecheck:
     image: *node_image
-    environment:
-      TURBO_API: https://turbo.mosaicstack.dev
-      TURBO_TEAM: mosaic
-      TURBO_TOKEN:
-        from_secret: turbo_token
     commands:
       - *enable_pnpm
       - pnpm typecheck
@@ -32,11 +28,6 @@ steps:
   # lint, format, and test are independent — run in parallel after typecheck
   lint:
     image: *node_image
-    environment:
-      TURBO_API: https://turbo.mosaicstack.dev
-      TURBO_TEAM: mosaic
-      TURBO_TOKEN:
-        from_secret: turbo_token
     commands:
       - *enable_pnpm
       - pnpm lint
@@ -53,11 +44,6 @@ steps:
 
   test:
     image: *node_image
-    environment:
-      TURBO_API: https://turbo.mosaicstack.dev
-      TURBO_TEAM: mosaic
-      TURBO_TOKEN:
-        from_secret: turbo_token
     commands:
       - *enable_pnpm
       - pnpm test
@@ -66,11 +52,6 @@ steps:
 
   build:
     image: *node_image
-    environment:
-      TURBO_API: https://turbo.mosaicstack.dev
-      TURBO_TEAM: mosaic
-      TURBO_TOKEN:
-        from_secret: turbo_token
     commands:
       - *enable_pnpm
       - pnpm build

AGENTS.md

@@ -53,3 +53,28 @@ pnpm typecheck && pnpm lint && pnpm format:check  # Quality gates
 - ESM everywhere (`"type": "module"`, `.js` extensions in imports)
 - NodeNext module resolution in all tsconfigs
 - Scratchpads are mandatory for non-trivial tasks
+
+## docs/TASKS.md — Schema (CANONICAL)
+
+The `agent` column specifies the required model for each task. **This is set at task creation by the orchestrator and must not be changed by workers.**
+
+| Value    | When to use                                                 | Budget                     |
+| -------- | ----------------------------------------------------------- | -------------------------- |
+| `codex`  | All coding tasks (default for implementation)               | OpenAI credits — preferred |
+| `glm-5`  | Cost-sensitive coding where Codex is unavailable            | Z.ai credits               |
+| `haiku`  | Review gates, verify tasks, status checks, docs-only        | Cheapest Claude tier       |
+| `sonnet` | Complex planning, multi-file reasoning, architecture review | Claude quota               |
+| `opus`   | Major cross-cutting architecture decisions ONLY             | Most expensive — minimize  |
+| `—`      | No preference / auto-select cheapest capable                | Pipeline decides           |
+
+Pipeline crons read this column and spawn accordingly. Workers never modify `docs/TASKS.md` — only the orchestrator writes it.
+
+**Full schema:**
+
+```
+| id | status | description | issue | agent | repo | branch | depends_on | estimate | notes |
+```
+
+- `status`: `not-started` | `in-progress` | `done` | `failed` | `blocked` | `needs-qa`
+- `agent`: model value from table above (set before spawning)
+- `estimate`: token budget e.g. `8K`, `25K`

apps/gateway/src/__tests__/resource-ownership.test.ts

@@ -1,4 +1,4 @@
-import { ForbiddenException } from '@nestjs/common';
+import { ForbiddenException, NotFoundException } from '@nestjs/common';
 import { describe, expect, it, vi } from 'vitest';
 import { ConversationsController } from '../conversations/conversations.controller.js';
 import { MissionsController } from '../missions/missions.controller.js';
@@ -18,6 +18,7 @@ function createBrain() {
     },
     projects: {
       findAll: vi.fn(),
+      findAllForUser: vi.fn(),
       findById: vi.fn(),
       create: vi.fn(),
       update: vi.fn(),
@@ -25,12 +26,21 @@ function createBrain() {
     },
     missions: {
       findAll: vi.fn(),
+      findAllByUser: vi.fn(),
       findById: vi.fn(),
+      findByIdAndUser: vi.fn(),
       findByProject: vi.fn(),
       create: vi.fn(),
       update: vi.fn(),
       remove: vi.fn(),
     },
+    missionTasks: {
+      findByMissionAndUser: vi.fn(),
+      findByIdAndUser: vi.fn(),
+      create: vi.fn(),
+      update: vi.fn(),
+      remove: vi.fn(),
+    },
     tasks: {
       findAll: vi.fn(),
       findById: vi.fn(),
@@ -58,21 +68,22 @@ describe('Resource ownership checks', () => {
   it('forbids access to another user project', async () => {
     const brain = createBrain();
     brain.projects.findById.mockResolvedValue({ id: 'project-1', ownerId: 'user-2' });
-    const controller = new ProjectsController(brain as never);
+    const teamsService = { canAccessProject: vi.fn().mockResolvedValue(false) };
+    const controller = new ProjectsController(brain as never, teamsService as never);
 
     await expect(controller.findOne('project-1', { id: 'user-1' })).rejects.toBeInstanceOf(
       ForbiddenException,
     );
   });
 
-  it('forbids access to a mission owned by another project owner', async () => {
+  it('forbids access to a mission owned by another user', async () => {
     const brain = createBrain();
-    brain.missions.findById.mockResolvedValue({ id: 'mission-1', projectId: 'project-1' });
+    // findByIdAndUser returns undefined when the mission doesn't belong to the user
-    brain.projects.findById.mockResolvedValue({ id: 'project-1', ownerId: 'user-2' });
+    brain.missions.findByIdAndUser.mockResolvedValue(undefined);
     const controller = new MissionsController(brain as never);
 
     await expect(controller.findOne('mission-1', { id: 'user-1' })).rejects.toBeInstanceOf(
-      ForbiddenException,
+      NotFoundException,
     );
   });
 

apps/gateway/src/admin/admin.guard.ts

@@ -8,8 +8,11 @@ import {
 } from '@nestjs/common';
 import { fromNodeHeaders } from 'better-auth/node';
 import type { Auth } from '@mosaic/auth';
+import type { Db } from '@mosaic/db';
+import { eq, users as usersTable } from '@mosaic/db';
 import type { FastifyRequest } from 'fastify';
 import { AUTH } from '../auth/auth.tokens.js';
+import { DB } from '../database/database.module.js';
 
 interface UserWithRole {
   id: string;
@@ -18,7 +21,10 @@ interface UserWithRole {
 
 @Injectable()
 export class AdminGuard implements CanActivate {
-  constructor(@Inject(AUTH) private readonly auth: Auth) {}
+  constructor(
+    @Inject(AUTH) private readonly auth: Auth,
+    @Inject(DB) private readonly db: Db,
+  ) {}
 
   async canActivate(context: ExecutionContext): Promise<boolean> {
     const request = context.switchToHttp().getRequest<FastifyRequest>();
@@ -32,7 +38,21 @@ export class AdminGuard implements CanActivate {
 
     const user = result.user as UserWithRole;
 
-    if (user.role !== 'admin') {
+    // Ensure the role field is populated. better-auth should include additionalFields
+    // in the session, but as a fallback, fetch the role from the database if needed.
+    let userRole = user.role;
+    if (!userRole) {
+      const [dbUser] = await this.db
+        .select({ role: usersTable.role })
+        .from(usersTable)
+        .where(eq(usersTable.id, user.id))
+        .limit(1);
+      userRole = dbUser?.role ?? 'member';
+      // Update the session user object with the fetched role
+      (user as UserWithRole).role = userRole;
+    }
+
+    if (userRole !== 'admin') {
       throw new ForbiddenException('Admin access required');
     }
 

apps/gateway/src/agent/__tests__/provider.service.test.ts

@@ -0,0 +1,143 @@
+import { beforeEach, afterEach, describe, expect, it } from 'vitest';
+import { ProviderService } from '../provider.service.js';
+
+const ENV_KEYS = [
+  'ANTHROPIC_API_KEY',
+  'OPENAI_API_KEY',
+  'ZAI_API_KEY',
+  'OLLAMA_BASE_URL',
+  'OLLAMA_HOST',
+  'OLLAMA_MODELS',
+  'MOSAIC_CUSTOM_PROVIDERS',
+] as const;
+
+type EnvKey = (typeof ENV_KEYS)[number];
+
+describe('ProviderService', () => {
+  const savedEnv = new Map<EnvKey, string | undefined>();
+
+  beforeEach(() => {
+    for (const key of ENV_KEYS) {
+      savedEnv.set(key, process.env[key]);
+      delete process.env[key];
+    }
+  });
+
+  afterEach(() => {
+    for (const key of ENV_KEYS) {
+      const value = savedEnv.get(key);
+      if (value === undefined) {
+        delete process.env[key];
+      } else {
+        process.env[key] = value;
+      }
+    }
+  });
+
+  it('skips API-key providers when env vars are missing (no models become available)', () => {
+    const service = new ProviderService();
+    service.onModuleInit();
+
+    // Pi's built-in registry may include model definitions for all providers, but
+    // without API keys none of them should be available (usable).
+    const availableModels = service.listAvailableModels();
+    const availableProviderIds = new Set(availableModels.map((m) => m.provider));
+
+    expect(availableProviderIds).not.toContain('anthropic');
+    expect(availableProviderIds).not.toContain('openai');
+    expect(availableProviderIds).not.toContain('zai');
+
+    // Providers list may show built-in providers, but they should not be marked available
+    const providers = service.listProviders();
+    for (const p of providers.filter((p) => ['anthropic', 'openai', 'zai'].includes(p.id))) {
+      expect(p.available).toBe(false);
+    }
+  });
+
+  it('registers Anthropic provider with correct models when ANTHROPIC_API_KEY is set', () => {
+    process.env['ANTHROPIC_API_KEY'] = 'test-anthropic';
+
+    const service = new ProviderService();
+    service.onModuleInit();
+
+    const providers = service.listProviders();
+    const anthropic = providers.find((p) => p.id === 'anthropic');
+    expect(anthropic).toBeDefined();
+    expect(anthropic!.available).toBe(true);
+    expect(anthropic!.models.map((m) => m.id)).toEqual([
+      'claude-sonnet-4-6',
+      'claude-opus-4-6',
+      'claude-haiku-4-5',
+    ]);
+    // contextWindow override from Pi built-in (200000)
+    for (const m of anthropic!.models) {
+      expect(m.contextWindow).toBe(200000);
+      // maxTokens capped at 8192 per task spec
+      expect(m.maxTokens).toBe(8192);
+    }
+  });
+
+  it('registers OpenAI provider with correct models when OPENAI_API_KEY is set', () => {
+    process.env['OPENAI_API_KEY'] = 'test-openai';
+
+    const service = new ProviderService();
+    service.onModuleInit();
+
+    const providers = service.listProviders();
+    const openai = providers.find((p) => p.id === 'openai');
+    expect(openai).toBeDefined();
+    expect(openai!.available).toBe(true);
+    expect(openai!.models.map((m) => m.id)).toEqual(['gpt-4o', 'gpt-4o-mini', 'o3-mini']);
+  });
+
+  it('registers Z.ai provider with correct models when ZAI_API_KEY is set', () => {
+    process.env['ZAI_API_KEY'] = 'test-zai';
+
+    const service = new ProviderService();
+    service.onModuleInit();
+
+    const providers = service.listProviders();
+    const zai = providers.find((p) => p.id === 'zai');
+    expect(zai).toBeDefined();
+    expect(zai!.available).toBe(true);
+    expect(zai!.models.map((m) => m.id)).toEqual(['glm-4.5', 'glm-4.5-air', 'glm-4.5-flash']);
+  });
+
+  it('registers all three providers when all keys are set', () => {
+    process.env['ANTHROPIC_API_KEY'] = 'test-anthropic';
+    process.env['OPENAI_API_KEY'] = 'test-openai';
+    process.env['ZAI_API_KEY'] = 'test-zai';
+
+    const service = new ProviderService();
+    service.onModuleInit();
+
+    const providerIds = service.listProviders().map((p) => p.id);
+    expect(providerIds).toContain('anthropic');
+    expect(providerIds).toContain('openai');
+    expect(providerIds).toContain('zai');
+  });
+
+  it('can find registered Anthropic models by provider+id', () => {
+    process.env['ANTHROPIC_API_KEY'] = 'test-anthropic';
+
+    const service = new ProviderService();
+    service.onModuleInit();
+
+    const sonnet = service.findModel('anthropic', 'claude-sonnet-4-6');
+    expect(sonnet).toBeDefined();
+    expect(sonnet!.provider).toBe('anthropic');
+    expect(sonnet!.id).toBe('claude-sonnet-4-6');
+  });
+
+  it('can find registered Z.ai models by provider+id', () => {
+    process.env['ZAI_API_KEY'] = 'test-zai';
+
+    const service = new ProviderService();
+    service.onModuleInit();
+
+    const glm = service.findModel('zai', 'glm-4.5');
+    expect(glm).toBeDefined();
+    expect(glm!.provider).toBe('zai');
+    expect(glm!.id).toBe('glm-4.5');
+  });
+});

apps/gateway/src/agent/agent-config.dto.ts

@@ -0,0 +1,97 @@
+import {
+  IsArray,
+  IsBoolean,
+  IsIn,
+  IsObject,
+  IsOptional,
+  IsString,
+  IsUUID,
+  MaxLength,
+} from 'class-validator';
+
+const agentStatuses = ['idle', 'active', 'error', 'offline'] as const;
+
+export class CreateAgentConfigDto {
+  @IsString()
+  @MaxLength(255)
+  name!: string;
+
+  @IsString()
+  @MaxLength(255)
+  provider!: string;
+
+  @IsString()
+  @MaxLength(255)
+  model!: string;
+
+  @IsOptional()
+  @IsIn(agentStatuses)
+  status?: 'idle' | 'active' | 'error' | 'offline';
+
+  @IsOptional()
+  @IsUUID()
+  projectId?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(50_000)
+  systemPrompt?: string;
+
+  @IsOptional()
+  @IsArray()
+  allowedTools?: string[];
+
+  @IsOptional()
+  @IsArray()
+  skills?: string[];
+
+  @IsOptional()
+  @IsBoolean()
+  isSystem?: boolean;
+
+  @IsOptional()
+  @IsObject()
+  config?: Record<string, unknown>;
+}
+
+export class UpdateAgentConfigDto {
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  name?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  provider?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  model?: string;
+
+  @IsOptional()
+  @IsIn(agentStatuses)
+  status?: 'idle' | 'active' | 'error' | 'offline';
+
+  @IsOptional()
+  @IsUUID()
+  projectId?: string | null;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(50_000)
+  systemPrompt?: string | null;
+
+  @IsOptional()
+  @IsArray()
+  allowedTools?: string[] | null;
+
+  @IsOptional()
+  @IsArray()
+  skills?: string[] | null;
+
+  @IsOptional()
+  @IsObject()
+  config?: Record<string, unknown> | null;
+}

apps/gateway/src/agent/agent-configs.controller.ts

@@ -0,0 +1,84 @@
+import {
+  Body,
+  Controller,
+  Delete,
+  ForbiddenException,
+  Get,
+  HttpCode,
+  HttpStatus,
+  Inject,
+  NotFoundException,
+  Param,
+  Patch,
+  Post,
+  UseGuards,
+} from '@nestjs/common';
+import type { Brain } from '@mosaic/brain';
+import { BRAIN } from '../brain/brain.tokens.js';
+import { AuthGuard } from '../auth/auth.guard.js';
+import { CurrentUser } from '../auth/current-user.decorator.js';
+import { CreateAgentConfigDto, UpdateAgentConfigDto } from './agent-config.dto.js';
+
+@Controller('api/agents')
+@UseGuards(AuthGuard)
+export class AgentConfigsController {
+  constructor(@Inject(BRAIN) private readonly brain: Brain) {}
+
+  @Get()
+  async list(@CurrentUser() user: { id: string; role?: string }) {
+    return this.brain.agents.findAccessible(user.id);
+  }
+
+  @Get(':id')
+  async findOne(@Param('id') id: string, @CurrentUser() user: { id: string }) {
+    const agent = await this.brain.agents.findById(id);
+    if (!agent) throw new NotFoundException('Agent not found');
+    if (!agent.isSystem && agent.ownerId !== user.id) {
+      throw new ForbiddenException('Agent does not belong to the current user');
+    }
+    return agent;
+  }
+
+  @Post()
+  async create(@Body() dto: CreateAgentConfigDto, @CurrentUser() user: { id: string }) {
+    return this.brain.agents.create({
+      ...dto,
+      ownerId: user.id,
+      isSystem: false,
+    });
+  }
+
+  @Patch(':id')
+  async update(
+    @Param('id') id: string,
+    @Body() dto: UpdateAgentConfigDto,
+    @CurrentUser() user: { id: string; role?: string },
+  ) {
+    const agent = await this.brain.agents.findById(id);
+    if (!agent) throw new NotFoundException('Agent not found');
+    if (agent.isSystem && user.role !== 'admin') {
+      throw new ForbiddenException('Only admins can update system agents');
+    }
+    if (!agent.isSystem && agent.ownerId !== user.id) {
+      throw new ForbiddenException('Agent does not belong to the current user');
+    }
+    const updated = await this.brain.agents.update(id, dto);
+    if (!updated) throw new NotFoundException('Agent not found');
+    return updated;
+  }
+
+  @Delete(':id')
+  @HttpCode(HttpStatus.NO_CONTENT)
+  async remove(@Param('id') id: string, @CurrentUser() user: { id: string; role?: string }) {
+    const agent = await this.brain.agents.findById(id);
+    if (!agent) throw new NotFoundException('Agent not found');
+    if (agent.isSystem) {
+      throw new ForbiddenException('Cannot delete system agents');
+    }
+    if (agent.ownerId !== user.id) {
+      throw new ForbiddenException('Agent does not belong to the current user');
+    }
+    const deleted = await this.brain.agents.remove(id);
+    if (!deleted) throw new NotFoundException('Agent not found');
+  }
+}

apps/gateway/src/agent/agent.module.ts

@@ -5,15 +5,17 @@ import { RoutingService } from './routing.service.js';
 import { SkillLoaderService } from './skill-loader.service.js';
 import { ProvidersController } from './providers.controller.js';
 import { SessionsController } from './sessions.controller.js';
+import { AgentConfigsController } from './agent-configs.controller.js';
 import { CoordModule } from '../coord/coord.module.js';
 import { McpClientModule } from '../mcp-client/mcp-client.module.js';
 import { SkillsModule } from '../skills/skills.module.js';
+import { GCModule } from '../gc/gc.module.js';
 
 @Global()
 @Module({
-  imports: [CoordModule, McpClientModule, SkillsModule],
+  imports: [CoordModule, McpClientModule, SkillsModule, GCModule],
   providers: [ProviderService, RoutingService, SkillLoaderService, AgentService],
-  controllers: [ProvidersController, SessionsController],
+  controllers: [ProvidersController, SessionsController, AgentConfigsController],
   exports: [AgentService, ProviderService, RoutingService, SkillLoaderService],
 })
 export class AgentModule {}

apps/gateway/src/agent/agent.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable, Logger, type OnModuleDestroy } from '@nestjs/common';
+import { Inject, Injectable, Logger, Optional, type OnModuleDestroy } from '@nestjs/common';
 import {
   createAgentSession,
   DefaultResourceLoader,
@@ -24,6 +24,9 @@ import { createGitTools } from './tools/git-tools.js';
 import { createShellTools } from './tools/shell-tools.js';
 import { createWebTools } from './tools/web-tools.js';
 import type { SessionInfoDto } from './session.dto.js';
+import { SystemOverrideService } from '../preferences/system-override.service.js';
+import { PreferencesService } from '../preferences/preferences.service.js';
+import { SessionGCService } from '../gc/session-gc.service.js';
 
 export interface AgentSessionOptions {
   provider?: string;
@@ -49,6 +52,14 @@ export interface AgentSessionOptions {
   allowedTools?: string[];
   /** Whether the requesting user has admin privileges. Controls default tool access. */
   isAdmin?: boolean;
+  /**
+   * DB agent config ID. When provided, loads agent config from DB and merges
+   * provider, model, systemPrompt, and allowedTools. Explicit call-site options
+   * take precedence over config values.
+   */
+  agentConfigId?: string;
+  /** ID of the user who owns this session. Used for preferences and system override lookups. */
+  userId?: string;
 }
 
 export interface AgentSession {
@@ -67,6 +78,8 @@ export interface AgentSession {
   sandboxDir: string;
   /** Tool names available in this session, or null when all tools are available. */
   allowedTools: string[] | null;
+  /** User ID that owns this session, used for preference lookups. */
+  userId?: string;
 }
 
 @Injectable()
@@ -83,6 +96,13 @@ export class AgentService implements OnModuleDestroy {
     @Inject(CoordService) private readonly coordService: CoordService,
     @Inject(McpClientService) private readonly mcpClientService: McpClientService,
     @Inject(SkillLoaderService) private readonly skillLoaderService: SkillLoaderService,
+    @Optional()
+    @Inject(SystemOverrideService)
+    private readonly systemOverride: SystemOverrideService | null,
+    @Optional()
+    @Inject(PreferencesService)
+    private readonly preferencesService: PreferencesService | null,
+    @Inject(SessionGCService) private readonly gc: SessionGCService,
   ) {}
 
   /**
@@ -146,16 +166,39 @@ export class AgentService implements OnModuleDestroy {
     sessionId: string,
     options?: AgentSessionOptions,
   ): Promise<AgentSession> {
-    const model = this.resolveModel(options);
+    // Merge DB agent config when agentConfigId is provided
+    let mergedOptions = options;
+    if (options?.agentConfigId) {
+      const agentConfig = await this.brain.agents.findById(options.agentConfigId);
+      if (agentConfig) {
+        mergedOptions = {
+          provider: options.provider ?? agentConfig.provider,
+          modelId: options.modelId ?? agentConfig.model,
+          systemPrompt: options.systemPrompt ?? agentConfig.systemPrompt ?? undefined,
+          allowedTools: options.allowedTools ?? agentConfig.allowedTools ?? undefined,
+          sandboxDir: options.sandboxDir,
+          isAdmin: options.isAdmin,
+          agentConfigId: options.agentConfigId,
+        };
+        this.logger.log(
+          `Merged agent config "${agentConfig.name}" (${agentConfig.id}) into session ${sessionId}`,
+        );
+      }
+    }
+
+    const model = this.resolveModel(mergedOptions);
     const providerName = model?.provider ?? 'default';
     const modelId = model?.id ?? 'default';
 
     // Resolve sandbox directory: option > env var > process.cwd()
     const sandboxDir =
-      options?.sandboxDir ?? process.env['AGENT_FILE_SANDBOX_DIR'] ?? process.cwd();
+      mergedOptions?.sandboxDir ?? process.env['AGENT_FILE_SANDBOX_DIR'] ?? process.cwd();
 
     // Resolve allowed tool set
-    const allowedTools = this.resolveAllowedTools(options?.isAdmin ?? false, options?.allowedTools);
+    const allowedTools = this.resolveAllowedTools(
+      mergedOptions?.isAdmin ?? false,
+      mergedOptions?.allowedTools,
+    );
 
     this.logger.log(
       `Creating agent session: ${sessionId} (provider=${providerName}, model=${modelId}, sandbox=${sandboxDir}, tools=${allowedTools === null ? 'all' : allowedTools.join(',') || 'none'})`,
@@ -194,7 +237,8 @@ export class AgentService implements OnModuleDestroy {
     }
 
     // Build system prompt: platform prompt + skill additions appended
-    const platformPrompt = options?.systemPrompt ?? process.env['AGENT_SYSTEM_PROMPT'] ?? undefined;
+    const platformPrompt =
+      mergedOptions?.systemPrompt ?? process.env['AGENT_SYSTEM_PROMPT'] ?? undefined;
     const appendSystemPrompt =
       promptAdditions.length > 0 ? promptAdditions.join('\n\n') : undefined;
 
@@ -255,6 +299,7 @@ export class AgentService implements OnModuleDestroy {
       skillPromptAdditions: promptAdditions,
       sandboxDir,
       allowedTools,
+      userId: mergedOptions?.userId,
     };
 
     this.sessions.set(sessionId, session);
@@ -338,8 +383,20 @@ export class AgentService implements OnModuleDestroy {
       throw new Error(`No agent session found: ${sessionId}`);
     }
     session.promptCount += 1;
+
+    // Prepend session-scoped system override if present (renew TTL on each turn)
+    let effectiveMessage = message;
+    if (this.systemOverride) {
+      const override = await this.systemOverride.get(sessionId);
+      if (override) {
+        effectiveMessage = `[System Override]\n${override}\n\n${message}`;
+        await this.systemOverride.renew(sessionId);
+        this.logger.debug(`Applied system override for session ${sessionId}`);
+      }
+    }
+
     try {
-      await session.piSession.prompt(message);
+      await session.piSession.prompt(effectiveMessage);
     } catch (err) {
       this.logger.error(
         `Prompt failed for session=${sessionId}, messageLength=${message.length}`,
@@ -375,6 +432,14 @@ export class AgentService implements OnModuleDestroy {
     session.listeners.clear();
     session.channels.clear();
     this.sessions.delete(sessionId);
+
+    // Run GC cleanup for this session (fire and forget, errors are logged)
+    this.gc.collect(sessionId).catch((err: unknown) => {
+      this.logger.error(
+        `GC collect failed for session ${sessionId}`,
+        err instanceof Error ? err.stack : String(err),
+      );
+    });
   }
 
   async onModuleDestroy(): Promise<void> {

apps/gateway/src/agent/provider.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, Logger, type OnModuleInit } from '@nestjs/common';
 import { ModelRegistry, AuthStorage } from '@mariozechner/pi-coding-agent';
-import type { Model, Api } from '@mariozechner/pi-ai';
+import { getModel, type Model, type Api } from '@mariozechner/pi-ai';
 import type { ModelInfo, ProviderInfo, CustomProviderConfig } from '@mosaic/types';
 import type { TestConnectionResultDto } from './provider.dto.js';
 
@@ -14,6 +14,9 @@ export class ProviderService implements OnModuleInit {
     this.registry = new ModelRegistry(authStorage);
 
     this.registerOllamaProvider();
+    this.registerAnthropicProvider();
+    this.registerOpenAIProvider();
+    this.registerZaiProvider();
     this.registerCustomProviders();
 
     const available = this.registry.getAvailable();
@@ -140,6 +143,66 @@ export class ProviderService implements OnModuleInit {
     this.logger.log(`Registered custom provider: ${config.id} (${config.models.length} models)`);
   }
 
+  private registerAnthropicProvider(): void {
+    const apiKey = process.env['ANTHROPIC_API_KEY'];
+    if (!apiKey) {
+      this.logger.debug('Skipping Anthropic provider registration: ANTHROPIC_API_KEY not set');
+      return;
+    }
+
+    const models = ['claude-sonnet-4-6', 'claude-opus-4-6', 'claude-haiku-4-5'].map((id) =>
+      this.cloneBuiltInModel('anthropic', id, { maxTokens: 8192 }),
+    );
+
+    this.registry.registerProvider('anthropic', {
+      apiKey,
+      baseUrl: 'https://api.anthropic.com',
+      models,
+    });
+
+    this.logger.log('Anthropic provider registered with 3 models');
+  }
+
+  private registerOpenAIProvider(): void {
+    const apiKey = process.env['OPENAI_API_KEY'];
+    if (!apiKey) {
+      this.logger.debug('Skipping OpenAI provider registration: OPENAI_API_KEY not set');
+      return;
+    }
+
+    const models = ['gpt-4o', 'gpt-4o-mini', 'o3-mini'].map((id) =>
+      this.cloneBuiltInModel('openai', id),
+    );
+
+    this.registry.registerProvider('openai', {
+      apiKey,
+      baseUrl: 'https://api.openai.com/v1',
+      models,
+    });
+
+    this.logger.log('OpenAI provider registered with 3 models');
+  }
+
+  private registerZaiProvider(): void {
+    const apiKey = process.env['ZAI_API_KEY'];
+    if (!apiKey) {
+      this.logger.debug('Skipping Z.ai provider registration: ZAI_API_KEY not set');
+      return;
+    }
+
+    const models = ['glm-4.5', 'glm-4.5-air', 'glm-4.5-flash'].map((id) =>
+      this.cloneBuiltInModel('zai', id),
+    );
+
+    this.registry.registerProvider('zai', {
+      apiKey,
+      baseUrl: 'https://open.bigmodel.cn/api/paas/v4',
+      models,
+    });
+
+    this.logger.log('Z.ai provider registered with 3 models');
+  }
+
   private registerOllamaProvider(): void {
     const ollamaUrl = process.env['OLLAMA_BASE_URL'] ?? process.env['OLLAMA_HOST'];
     if (!ollamaUrl) return;
@@ -184,6 +247,19 @@ export class ProviderService implements OnModuleInit {
     }
   }
 
+  private cloneBuiltInModel(
+    provider: string,
+    modelId: string,
+    overrides: Partial<Model<Api>> = {},
+  ): Model<Api> {
+    const model = getModel(provider as never, modelId as never) as Model<Api> | undefined;
+    if (!model) {
+      throw new Error(`Built-in model not found: ${provider}:${modelId}`);
+    }
+
+    return { ...model, ...overrides };
+  }
+
   private toModelInfo(model: Model<Api>): ModelInfo {
     return {
       id: model.id,

apps/gateway/src/agent/tools/file-tools.ts

@@ -1,20 +1,7 @@
 import { Type } from '@sinclair/typebox';
 import type { ToolDefinition } from '@mariozechner/pi-coding-agent';
 import { readFile, writeFile, readdir, stat } from 'node:fs/promises';
-import { resolve, relative, join } from 'node:path';
+import { guardPath, guardPathUnsafe, SandboxEscapeError } from './path-guard.js';
-
-/**
- * Safety constraint: all file operations are restricted to a base directory.
- * Paths that escape the sandbox via ../ traversal are rejected.
- */
-function resolveSafe(baseDir: string, inputPath: string): string {
-  const resolved = resolve(baseDir, inputPath);
-  const rel = relative(baseDir, resolved);
-  if (rel.startsWith('..') || resolve(resolved) !== resolve(join(baseDir, rel))) {
-    throw new Error(`Path escape detected: "${inputPath}" resolves outside base directory`);
-  }
-  return resolved;
-}
 
 const MAX_READ_BYTES = 512 * 1024; // 512 KB read limit
 const MAX_WRITE_BYTES = 1024 * 1024; // 1 MB write limit
@@ -37,8 +24,14 @@ export function createFileTools(baseDir: string): ToolDefinition[] {
       const { path, encoding } = params as { path: string; encoding?: string };
       let safePath: string;
       try {
-        safePath = resolveSafe(baseDir, path);
+        safePath = guardPath(path, baseDir);
       } catch (err) {
+        if (err instanceof SandboxEscapeError) {
+          return {
+            content: [{ type: 'text' as const, text: `Error: ${err.message}` }],
+            details: undefined,
+          };
+        }
         return {
           content: [{ type: 'text' as const, text: `Error: ${String(err)}` }],
           details: undefined,
@@ -99,8 +92,14 @@ export function createFileTools(baseDir: string): ToolDefinition[] {
       };
       let safePath: string;
       try {
-        safePath = resolveSafe(baseDir, path);
+        safePath = guardPathUnsafe(path, baseDir);
       } catch (err) {
+        if (err instanceof SandboxEscapeError) {
+          return {
+            content: [{ type: 'text' as const, text: `Error: ${err.message}` }],
+            details: undefined,
+          };
+        }
         return {
           content: [{ type: 'text' as const, text: `Error: ${String(err)}` }],
           details: undefined,
@@ -151,8 +150,14 @@ export function createFileTools(baseDir: string): ToolDefinition[] {
       const target = path ?? '.';
       let safePath: string;
       try {
-        safePath = resolveSafe(baseDir, target);
+        safePath = guardPath(target, baseDir);
       } catch (err) {
+        if (err instanceof SandboxEscapeError) {
+          return {
+            content: [{ type: 'text' as const, text: `Error: ${err.message}` }],
+            details: undefined,
+          };
+        }
         return {
           content: [{ type: 'text' as const, text: `Error: ${String(err)}` }],
           details: undefined,

apps/gateway/src/agent/tools/git-tools.ts

@@ -2,29 +2,13 @@ import { Type } from '@sinclair/typebox';
 import type { ToolDefinition } from '@mariozechner/pi-coding-agent';
 import { exec } from 'node:child_process';
 import { promisify } from 'node:util';
-import { resolve, relative } from 'node:path';
+import { guardPath, guardPathUnsafe, SandboxEscapeError } from './path-guard.js';
 
 const execAsync = promisify(exec);
 
 const GIT_TIMEOUT_MS = 15_000;
 const MAX_OUTPUT_BYTES = 100 * 1024; // 100 KB
 
-/**
- * Clamp a user-supplied cwd to within the sandbox directory.
- * If the resolved path escapes the sandbox (via ../ or absolute path outside),
- * falls back to the sandbox directory itself.
- */
-function clampCwd(sandboxDir: string, requestedCwd?: string): string {
-  if (!requestedCwd) return sandboxDir;
-  const resolved = resolve(sandboxDir, requestedCwd);
-  const rel = relative(sandboxDir, resolved);
-  if (rel.startsWith('..') || rel.startsWith('/')) {
-    // Escape attempt — fall back to sandbox root
-    return sandboxDir;
-  }
-  return resolved;
-}
-
 async function runGit(
   args: string[],
   cwd?: string,
@@ -74,7 +58,21 @@ export function createGitTools(sandboxDir?: string): ToolDefinition[] {
     }),
     async execute(_toolCallId, params) {
       const { cwd } = params as { cwd?: string };
-      const safeCwd = clampCwd(defaultCwd, cwd);
+      let safeCwd: string;
+      try {
+        safeCwd = guardPath(cwd ?? '.', defaultCwd);
+      } catch (err) {
+        if (err instanceof SandboxEscapeError) {
+          return {
+            content: [{ type: 'text' as const, text: `Error: ${err.message}` }],
+            details: undefined,
+          };
+        }
+        return {
+          content: [{ type: 'text' as const, text: `Error: ${String(err)}` }],
+          details: undefined,
+        };
+      }
       const result = await runGit(['status', '--short', '--branch'], safeCwd);
       const text = result.error
         ? `Error: ${result.error}\n${result.stderr}`
@@ -107,7 +105,21 @@ export function createGitTools(sandboxDir?: string): ToolDefinition[] {
         oneline?: boolean;
         cwd?: string;
       };
-      const safeCwd = clampCwd(defaultCwd, cwd);
+      let safeCwd: string;
+      try {
+        safeCwd = guardPath(cwd ?? '.', defaultCwd);
+      } catch (err) {
+        if (err instanceof SandboxEscapeError) {
+          return {
+            content: [{ type: 'text' as const, text: `Error: ${err.message}` }],
+            details: undefined,
+          };
+        }
+        return {
+          content: [{ type: 'text' as const, text: `Error: ${String(err)}` }],
+          details: undefined,
+        };
+      }
       const args = ['log', `--max-count=${limit ?? 20}`];
       if (oneline !== false) args.push('--oneline');
       const result = await runGit(args, safeCwd);
@@ -148,12 +160,43 @@ export function createGitTools(sandboxDir?: string): ToolDefinition[] {
         path?: string;
         cwd?: string;
       };
-      const safeCwd = clampCwd(defaultCwd, cwd);
+      let safeCwd: string;
+      try {
+        safeCwd = guardPath(cwd ?? '.', defaultCwd);
+      } catch (err) {
+        if (err instanceof SandboxEscapeError) {
+          return {
+            content: [{ type: 'text' as const, text: `Error: ${err.message}` }],
+            details: undefined,
+          };
+        }
+        return {
+          content: [{ type: 'text' as const, text: `Error: ${String(err)}` }],
+          details: undefined,
+        };
+      }
+      let safePath: string | undefined;
+      if (path !== undefined) {
+        try {
+          safePath = guardPathUnsafe(path, defaultCwd);
+        } catch (err) {
+          if (err instanceof SandboxEscapeError) {
+            return {
+              content: [{ type: 'text' as const, text: `Error: ${err.message}` }],
+              details: undefined,
+            };
+          }
+          return {
+            content: [{ type: 'text' as const, text: `Error: ${String(err)}` }],
+            details: undefined,
+          };
+        }
+      }
       const args = ['diff'];
       if (staged) args.push('--cached');
       if (ref) args.push(ref);
       args.push('--');
-      if (path) args.push(path);
+      if (safePath !== undefined) args.push(safePath);
       const result = await runGit(args, safeCwd);
       const text = result.error
         ? `Error: ${result.error}\n${result.stderr}`

apps/gateway/src/agent/tools/path-guard.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest';
+import { guardPath, guardPathUnsafe, SandboxEscapeError } from './path-guard.js';
+import path from 'node:path';
+import os from 'node:os';
+import fs from 'node:fs';
+
+describe('guardPathUnsafe', () => {
+  const sandbox = '/tmp/test-sandbox';
+
+  it('allows paths inside sandbox', () => {
+    const result = guardPathUnsafe('foo/bar.txt', sandbox);
+    expect(result).toBe(path.resolve(sandbox, 'foo/bar.txt'));
+  });
+
+  it('allows sandbox root itself', () => {
+    const result = guardPathUnsafe('.', sandbox);
+    expect(result).toBe(path.resolve(sandbox));
+  });
+
+  it('rejects path traversal with ../', () => {
+    expect(() => guardPathUnsafe('../escape.txt', sandbox)).toThrow(SandboxEscapeError);
+  });
+
+  it('rejects absolute path outside sandbox', () => {
+    expect(() => guardPathUnsafe('/etc/passwd', sandbox)).toThrow(SandboxEscapeError);
+  });
+
+  it('rejects deeply nested traversal', () => {
+    expect(() => guardPathUnsafe('a/b/../../../../../../etc/passwd', sandbox)).toThrow(
+      SandboxEscapeError,
+    );
+  });
+
+  it('rejects path that starts with sandbox name but is sibling', () => {
+    expect(() => guardPathUnsafe('/tmp/test-sandbox-evil/file.txt', sandbox)).toThrow(
+      SandboxEscapeError,
+    );
+  });
+
+  it('returns the resolved absolute path for nested paths', () => {
+    const result = guardPathUnsafe('deep/nested/file.ts', sandbox);
+    expect(result).toBe('/tmp/test-sandbox/deep/nested/file.ts');
+  });
+
+  it('SandboxEscapeError includes the user path and sandbox in message', () => {
+    let caught: unknown;
+    try {
+      guardPathUnsafe('../escape.txt', sandbox);
+    } catch (err) {
+      caught = err;
+    }
+    expect(caught).toBeInstanceOf(SandboxEscapeError);
+    const e = caught as SandboxEscapeError;
+    expect(e.userPath).toBe('../escape.txt');
+    expect(e.sandboxDir).toBe(sandbox);
+    expect(e.message).toContain('Path escape attempt blocked');
+  });
+});
+
+describe('guardPath', () => {
+  let tmpDir: string;
+
+  it('allows an existing path inside a real temp sandbox', () => {
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'path-guard-test-'));
+    try {
+      const subdir = path.join(tmpDir, 'subdir');
+      fs.mkdirSync(subdir);
+      const result = guardPath('subdir', tmpDir);
+      expect(result).toBe(subdir);
+    } finally {
+      fs.rmSync(tmpDir, { recursive: true, force: true });
+    }
+  });
+
+  it('allows sandbox root itself', () => {
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'path-guard-test-'));
+    try {
+      const result = guardPath('.', tmpDir);
+      // realpathSync resolves the tmpdir symlinks (macOS /var -> /private/var)
+      const realTmp = fs.realpathSync.native(tmpDir);
+      expect(result).toBe(realTmp);
+    } finally {
+      fs.rmSync(tmpDir, { recursive: true, force: true });
+    }
+  });
+
+  it('rejects path traversal with ../ on existing sandbox', () => {
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'path-guard-test-'));
+    try {
+      expect(() => guardPath('../escape', tmpDir)).toThrow(SandboxEscapeError);
+    } finally {
+      fs.rmSync(tmpDir, { recursive: true, force: true });
+    }
+  });
+
+  it('rejects absolute path outside sandbox', () => {
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'path-guard-test-'));
+    try {
+      expect(() => guardPath('/etc/passwd', tmpDir)).toThrow(SandboxEscapeError);
+    } finally {
+      fs.rmSync(tmpDir, { recursive: true, force: true });
+    }
+  });
+});

apps/gateway/src/agent/tools/path-guard.ts

@@ -0,0 +1,58 @@
+import path from 'node:path';
+import fs from 'node:fs';
+
+/**
+ * Resolves a user-provided path and verifies it is inside the allowed sandbox directory.
+ * Throws SandboxEscapeError if the resolved path is outside the sandbox.
+ *
+ * Uses realpathSync to resolve symlinks in the sandbox root. The user-supplied path
+ * is checked for containment AFTER lexical resolution but BEFORE resolving any symlinks
+ * within the user path — so symlink escape attempts are caught too.
+ *
+ * @param userPath - The path provided by the agent (may be relative or absolute)
+ * @param sandboxDir - The allowed root directory (already validated on session creation)
+ * @returns The resolved absolute path, guaranteed to be within sandboxDir
+ */
+export function guardPath(userPath: string, sandboxDir: string): string {
+  const resolved = path.resolve(sandboxDir, userPath);
+  const sandboxResolved = fs.realpathSync.native(sandboxDir);
+
+  // Normalize both paths to resolve any symlinks in the sandbox root itself.
+  // For the user path, we check containment BEFORE resolving symlinks in the path
+  // (so we catch symlink escape attempts too — the resolved path must still be under sandbox)
+  if (!resolved.startsWith(sandboxResolved + path.sep) && resolved !== sandboxResolved) {
+    throw new SandboxEscapeError(userPath, sandboxDir, resolved);
+  }
+
+  return resolved;
+}
+
+/**
+ * Validates a path without resolving symlinks in the user-provided portion.
+ * Use for paths that may not exist yet (creates, writes).
+ *
+ * Performs a lexical containment check only using path.resolve.
+ */
+export function guardPathUnsafe(userPath: string, sandboxDir: string): string {
+  const resolved = path.resolve(sandboxDir, userPath);
+  const sandboxAbs = path.resolve(sandboxDir);
+
+  if (!resolved.startsWith(sandboxAbs + path.sep) && resolved !== sandboxAbs) {
+    throw new SandboxEscapeError(userPath, sandboxDir, resolved);
+  }
+
+  return resolved;
+}
+
+export class SandboxEscapeError extends Error {
+  constructor(
+    public readonly userPath: string,
+    public readonly sandboxDir: string,
+    public readonly resolvedPath: string,
+  ) {
+    super(
+      `Path escape attempt blocked: "${userPath}" resolves to "${resolvedPath}" which is outside sandbox "${sandboxDir}"`,
+    );
+    this.name = 'SandboxEscapeError';
+  }
+}

apps/gateway/src/agent/tools/shell-tools.ts

@@ -1,7 +1,7 @@
 import { Type } from '@sinclair/typebox';
 import type { ToolDefinition } from '@mariozechner/pi-coding-agent';
 import { spawn } from 'node:child_process';
-import { resolve, relative } from 'node:path';
+import { guardPath, SandboxEscapeError } from './path-guard.js';
 
 const DEFAULT_TIMEOUT_MS = 30_000;
 const MAX_OUTPUT_BYTES = 100 * 1024; // 100 KB
@@ -68,22 +68,6 @@ function extractBaseCommand(command: string): string {
   return firstToken.split('/').pop() ?? firstToken;
 }
 
-/**
- * Clamp a user-supplied cwd to within the sandbox directory.
- * If the resolved path escapes the sandbox (via ../ or absolute path outside),
- * falls back to the sandbox directory itself.
- */
-function clampCwd(sandboxDir: string, requestedCwd?: string): string {
-  if (!requestedCwd) return sandboxDir;
-  const resolved = resolve(sandboxDir, requestedCwd);
-  const rel = relative(sandboxDir, resolved);
-  if (rel.startsWith('..') || rel.startsWith('/')) {
-    // Escape attempt — fall back to sandbox root
-    return sandboxDir;
-  }
-  return resolved;
-}
-
 function runCommand(
   command: string,
   options: { timeoutMs: number; cwd?: string },
@@ -185,7 +169,21 @@ export function createShellTools(sandboxDir?: string): ToolDefinition[] {
       }
 
       const timeoutMs = Math.min(timeout ?? DEFAULT_TIMEOUT_MS, 60_000);
-      const safeCwd = clampCwd(defaultCwd, cwd);
+      let safeCwd: string;
+      try {
+        safeCwd = guardPath(cwd ?? '.', defaultCwd);
+      } catch (err) {
+        if (err instanceof SandboxEscapeError) {
+          return {
+            content: [{ type: 'text' as const, text: `Error: ${err.message}` }],
+            details: undefined,
+          };
+        }
+        return {
+          content: [{ type: 'text' as const, text: `Error: ${String(err)}` }],
+          details: undefined,
+        };
+      }
 
       const result = await runCommand(command, {
         timeoutMs,

apps/gateway/src/app.module.ts

@@ -17,6 +17,11 @@ import { SkillsModule } from './skills/skills.module.js';
 import { PluginModule } from './plugin/plugin.module.js';
 import { McpModule } from './mcp/mcp.module.js';
 import { AdminModule } from './admin/admin.module.js';
+import { CommandsModule } from './commands/commands.module.js';
+import { PreferencesModule } from './preferences/preferences.module.js';
+import { GCModule } from './gc/gc.module.js';
+import { ReloadModule } from './reload/reload.module.js';
+import { WorkspaceModule } from './workspace/workspace.module.js';
 import { ThrottlerGuard, ThrottlerModule } from '@nestjs/throttler';
 
 @Module({
@@ -38,6 +43,11 @@ import { ThrottlerGuard, ThrottlerModule } from '@nestjs/throttler';
     PluginModule,
     McpModule,
     AdminModule,
+    PreferencesModule,
+    CommandsModule,
+    GCModule,
+    ReloadModule,
+    WorkspaceModule,
   ],
   controllers: [HealthController],
   providers: [

apps/gateway/src/auth/auth.module.ts

@@ -3,9 +3,11 @@ import { createAuth, type Auth } from '@mosaic/auth';
 import type { Db } from '@mosaic/db';
 import { DB } from '../database/database.module.js';
 import { AUTH } from './auth.tokens.js';
+import { SsoController } from './sso.controller.js';
 
 @Global()
 @Module({
+  controllers: [SsoController],
   providers: [
     {
       provide: AUTH,

apps/gateway/src/auth/sso.controller.spec.ts

@@ -0,0 +1,40 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { SsoController } from './sso.controller.js';
+
+describe('SsoController', () => {
+  afterEach(() => {
+    vi.unstubAllEnvs();
+  });
+
+  it('lists configured OIDC providers', () => {
+    vi.stubEnv('WORKOS_CLIENT_ID', 'workos-client');
+    vi.stubEnv('WORKOS_CLIENT_SECRET', 'workos-secret');
+    vi.stubEnv('WORKOS_ISSUER', 'https://auth.workos.com/sso/client_123');
+
+    const controller = new SsoController();
+    const providers = controller.list();
+
+    expect(providers.find((provider) => provider.id === 'workos')).toMatchObject({
+      configured: true,
+      loginMode: 'oidc',
+      callbackPath: '/api/auth/oauth2/callback/workos',
+      teamSync: { enabled: true, claim: 'organization_id' },
+    });
+  });
+
+  it('prefers SAML fallback for Keycloak when only the SAML login URL is configured', () => {
+    vi.stubEnv('KEYCLOAK_SAML_LOGIN_URL', 'https://sso.example.com/realms/mosaic/protocol/saml');
+
+    const controller = new SsoController();
+    const providers = controller.list();
+
+    expect(providers.find((provider) => provider.id === 'keycloak')).toMatchObject({
+      configured: true,
+      loginMode: 'saml',
+      samlFallback: {
+        configured: true,
+        loginUrl: 'https://sso.example.com/realms/mosaic/protocol/saml',
+      },
+    });
+  });
+});

apps/gateway/src/auth/sso.controller.ts

@@ -0,0 +1,10 @@
+import { Controller, Get } from '@nestjs/common';
+import { buildSsoDiscovery, type SsoProviderDiscovery } from '@mosaic/auth';
+
+@Controller('api/sso/providers')
+export class SsoController {
+  @Get()
+  list(): SsoProviderDiscovery[] {
+    return buildSsoDiscovery();
+  }
+}

apps/gateway/src/chat/chat.dto.ts

@@ -28,4 +28,8 @@ export class ChatSocketMessageDto {
   @IsString()
   @MaxLength(255)
   modelId?: string;
+
+  @IsOptional()
+  @IsUUID()
+  agentId?: string;
 }

apps/gateway/src/chat/chat.gateway.ts

@@ -12,8 +12,11 @@ import {
 import { Server, Socket } from 'socket.io';
 import type { AgentSessionEvent } from '@mariozechner/pi-coding-agent';
 import type { Auth } from '@mosaic/auth';
+import type { SetThinkingPayload, SlashCommandPayload, SystemReloadPayload } from '@mosaic/types';
 import { AgentService } from '../agent/agent.service.js';
 import { AUTH } from '../auth/auth.tokens.js';
+import { CommandRegistryService } from '../commands/command-registry.service.js';
+import { CommandExecutorService } from '../commands/command-executor.service.js';
 import { v4 as uuid } from 'uuid';
 import { ChatSocketMessageDto } from './chat.dto.js';
 import { validateSocketSession } from './chat.gateway-auth.js';
@@ -37,6 +40,8 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
   constructor(
     @Inject(AgentService) private readonly agentService: AgentService,
     @Inject(AUTH) private readonly auth: Auth,
+    @Inject(CommandRegistryService) private readonly commandRegistry: CommandRegistryService,
+    @Inject(CommandExecutorService) private readonly commandExecutor: CommandExecutorService,
   ) {}
 
   afterInit(): void {
@@ -54,6 +59,9 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
     client.data.user = session.user;
     client.data.session = session.session;
     this.logger.log(`Client connected: ${client.id}`);
+
+    // Broadcast command manifest to the newly connected client
+    client.emit('commands:manifest', { manifest: this.commandRegistry.getManifest() });
   }
 
   handleDisconnect(client: Socket): void {
@@ -79,9 +87,12 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
     try {
       let agentSession = this.agentService.getSession(conversationId);
       if (!agentSession) {
+        const userId = (client.data.user as { id: string } | undefined)?.id;
         agentSession = await this.agentService.createSession(conversationId, {
           provider: data.provider,
           modelId: data.modelId,
+          agentConfigId: data.agentId,
+          userId,
         });
       }
     } catch (err) {
@@ -112,6 +123,21 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
     // Track channel connection
     this.agentService.addChannel(conversationId, `websocket:${client.id}`);
 
+    // Send session info so the client knows the model/provider
+    {
+      const agentSession = this.agentService.getSession(conversationId);
+      if (agentSession) {
+        const piSession = agentSession.piSession;
+        client.emit('session:info', {
+          conversationId,
+          provider: agentSession.provider,
+          modelId: agentSession.modelId,
+          thinkingLevel: piSession.thinkingLevel,
+          availableThinkingLevels: piSession.getAvailableThinkingLevels(),
+        });
+      }
+    }
+
     // Send acknowledgment
     client.emit('message:ack', { conversationId, messageId: uuid() });
 
@@ -130,6 +156,58 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
     }
   }
 
+  @SubscribeMessage('set:thinking')
+  handleSetThinking(
+    @ConnectedSocket() client: Socket,
+    @MessageBody() data: SetThinkingPayload,
+  ): void {
+    const session = this.agentService.getSession(data.conversationId);
+    if (!session) {
+      client.emit('error', {
+        conversationId: data.conversationId,
+        error: 'No active session for this conversation.',
+      });
+      return;
+    }
+
+    const validLevels = session.piSession.getAvailableThinkingLevels();
+    if (!validLevels.includes(data.level as never)) {
+      client.emit('error', {
+        conversationId: data.conversationId,
+        error: `Invalid thinking level "${data.level}". Available: ${validLevels.join(', ')}`,
+      });
+      return;
+    }
+
+    session.piSession.setThinkingLevel(data.level as never);
+    this.logger.log(
+      `Thinking level set to "${data.level}" for conversation ${data.conversationId}`,
+    );
+
+    client.emit('session:info', {
+      conversationId: data.conversationId,
+      provider: session.provider,
+      modelId: session.modelId,
+      thinkingLevel: session.piSession.thinkingLevel,
+      availableThinkingLevels: session.piSession.getAvailableThinkingLevels(),
+    });
+  }
+
+  @SubscribeMessage('command:execute')
+  async handleCommandExecute(
+    @ConnectedSocket() client: Socket,
+    @MessageBody() payload: SlashCommandPayload,
+  ): Promise<void> {
+    const userId = (client.data.user as { id: string } | undefined)?.id ?? 'unknown';
+    const result = await this.commandExecutor.execute(payload, userId);
+    client.emit('command:result', result);
+  }
+
+  broadcastReload(payload: SystemReloadPayload): void {
+    this.server.emit('system:reload', payload);
+    this.logger.log('Broadcasted system:reload to all connected clients');
+  }
+
   private relayEvent(client: Socket, conversationId: string, event: AgentSessionEvent): void {
     if (!client.connected) {
       this.logger.warn(
@@ -143,9 +221,31 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
         client.emit('agent:start', { conversationId });
         break;
 
-      case 'agent_end':
+      case 'agent_end': {
-        client.emit('agent:end', { conversationId });
+        // Gather usage stats from the Pi session
+        const agentSession = this.agentService.getSession(conversationId);
+        const piSession = agentSession?.piSession;
+        const stats = piSession?.getSessionStats();
+        const contextUsage = piSession?.getContextUsage();
+
+        client.emit('agent:end', {
+          conversationId,
+          usage: stats
+            ? {
+                provider: agentSession?.provider ?? 'unknown',
+                modelId: agentSession?.modelId ?? 'unknown',
+                thinkingLevel: piSession?.thinkingLevel ?? 'off',
+                tokens: stats.tokens,
+                cost: stats.cost,
+                context: {
+                  percent: contextUsage?.percent ?? null,
+                  window: contextUsage?.contextWindow ?? 0,
+                },
+              }
+            : undefined,
+        });
         break;
+      }
 
       case 'message_update': {
         const assistantEvent = event.assistantMessageEvent;

apps/gateway/src/chat/chat.module.ts

@@ -1,9 +1,12 @@
-import { Module } from '@nestjs/common';
+import { forwardRef, Module } from '@nestjs/common';
+import { CommandsModule } from '../commands/commands.module.js';
 import { ChatGateway } from './chat.gateway.js';
 import { ChatController } from './chat.controller.js';
 
 @Module({
+  imports: [forwardRef(() => CommandsModule)],
   controllers: [ChatController],
   providers: [ChatGateway],
+  exports: [ChatGateway],
 })
 export class ChatModule {}

apps/gateway/src/commands/command-executor-p8012.spec.ts

@@ -0,0 +1,213 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { CommandExecutorService } from './command-executor.service.js';
+import type { SlashCommandPayload } from '@mosaic/types';
+
+// Minimal mock implementations
+const mockRegistry = {
+  getManifest: vi.fn(() => ({
+    version: 1,
+    commands: [
+      { name: 'provider', aliases: [], scope: 'agent', execution: 'hybrid', available: true },
+      { name: 'mission', aliases: [], scope: 'agent', execution: 'socket', available: true },
+      { name: 'agent', aliases: ['a'], scope: 'agent', execution: 'socket', available: true },
+      { name: 'prdy', aliases: [], scope: 'agent', execution: 'socket', available: true },
+      { name: 'tools', aliases: [], scope: 'agent', execution: 'socket', available: true },
+    ],
+    skills: [],
+  })),
+};
+
+const mockAgentService = {
+  getSession: vi.fn(() => undefined),
+};
+
+const mockSystemOverride = {
+  set: vi.fn(),
+  get: vi.fn(),
+  clear: vi.fn(),
+  renew: vi.fn(),
+};
+
+const mockSessionGC = {
+  sweepOrphans: vi.fn(() => ({ orphanedSessions: 0, totalCleaned: [], duration: 0 })),
+};
+
+const mockRedis = {
+  set: vi.fn().mockResolvedValue('OK'),
+  get: vi.fn(),
+  del: vi.fn(),
+};
+
+function buildService(): CommandExecutorService {
+  return new CommandExecutorService(
+    mockRegistry as never,
+    mockAgentService as never,
+    mockSystemOverride as never,
+    mockSessionGC as never,
+    mockRedis as never,
+    null,
+    null,
+  );
+}
+
+describe('CommandExecutorService — P8-012 commands', () => {
+  let service: CommandExecutorService;
+  const userId = 'user-123';
+  const conversationId = 'conv-456';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    service = buildService();
+  });
+
+  // /provider login — missing provider name
+  it('/provider login with no provider name returns usage error', async () => {
+    const payload: SlashCommandPayload = { command: 'provider', args: 'login', conversationId };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(false);
+    expect(result.message).toContain('Usage: /provider login');
+    expect(result.command).toBe('provider');
+  });
+
+  // /provider login anthropic — success with URL containing poll token
+  it('/provider login <name> returns success with URL and poll token', async () => {
+    const payload: SlashCommandPayload = {
+      command: 'provider',
+      args: 'login anthropic',
+      conversationId,
+    };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.command).toBe('provider');
+    expect(result.message).toContain('anthropic');
+    expect(result.message).toContain('http');
+    // data should contain loginUrl and pollToken
+    expect(result.data).toBeDefined();
+    const data = result.data as Record<string, unknown>;
+    expect(typeof data['loginUrl']).toBe('string');
+    expect(typeof data['pollToken']).toBe('string');
+    expect(data['loginUrl'] as string).toContain('anthropic');
+    expect(data['loginUrl'] as string).toContain(data['pollToken'] as string);
+    // Verify Valkey was called
+    expect(mockRedis.set).toHaveBeenCalledOnce();
+    const [key, value, , ttl] = mockRedis.set.mock.calls[0] as [string, string, string, number];
+    expect(key).toContain('mosaic:auth:poll:');
+    const stored = JSON.parse(value) as { status: string; provider: string; userId: string };
+    expect(stored.status).toBe('pending');
+    expect(stored.provider).toBe('anthropic');
+    expect(stored.userId).toBe(userId);
+    expect(ttl).toBe(300);
+  });
+
+  // /provider with no args — returns usage
+  it('/provider with no args returns usage message', async () => {
+    const payload: SlashCommandPayload = { command: 'provider', conversationId };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.message).toContain('Usage: /provider');
+  });
+
+  // /provider list
+  it('/provider list returns success', async () => {
+    const payload: SlashCommandPayload = { command: 'provider', args: 'list', conversationId };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.command).toBe('provider');
+  });
+
+  // /provider logout with no name — usage error
+  it('/provider logout with no name returns error', async () => {
+    const payload: SlashCommandPayload = { command: 'provider', args: 'logout', conversationId };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(false);
+    expect(result.message).toContain('Usage: /provider logout');
+  });
+
+  // /provider unknown subcommand
+  it('/provider unknown subcommand returns error', async () => {
+    const payload: SlashCommandPayload = {
+      command: 'provider',
+      args: 'unknown',
+      conversationId,
+    };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(false);
+    expect(result.message).toContain('Unknown subcommand');
+  });
+
+  // /mission status
+  it('/mission status returns stub message', async () => {
+    const payload: SlashCommandPayload = { command: 'mission', args: 'status', conversationId };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.command).toBe('mission');
+    expect(result.message).toContain('Mission status');
+  });
+
+  // /mission with no args
+  it('/mission with no args returns status stub', async () => {
+    const payload: SlashCommandPayload = { command: 'mission', conversationId };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.message).toContain('Mission status');
+  });
+
+  // /mission set <id>
+  it('/mission set <id> returns confirmation', async () => {
+    const payload: SlashCommandPayload = {
+      command: 'mission',
+      args: 'set my-mission-123',
+      conversationId,
+    };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.message).toContain('my-mission-123');
+  });
+
+  // /agent list
+  it('/agent list returns stub message', async () => {
+    const payload: SlashCommandPayload = { command: 'agent', args: 'list', conversationId };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.command).toBe('agent');
+    expect(result.message).toContain('agent');
+  });
+
+  // /agent with no args
+  it('/agent with no args returns usage', async () => {
+    const payload: SlashCommandPayload = { command: 'agent', conversationId };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.message).toContain('Usage: /agent');
+  });
+
+  // /agent <id> — switch
+  it('/agent <id> returns switch confirmation', async () => {
+    const payload: SlashCommandPayload = {
+      command: 'agent',
+      args: 'my-agent-id',
+      conversationId,
+    };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.message).toContain('my-agent-id');
+  });
+
+  // /prdy
+  it('/prdy returns PRD wizard message', async () => {
+    const payload: SlashCommandPayload = { command: 'prdy', conversationId };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.command).toBe('prdy');
+    expect(result.message).toContain('mosaic prdy');
+  });
+
+  // /tools
+  it('/tools returns tools stub message', async () => {
+    const payload: SlashCommandPayload = { command: 'tools', conversationId };
+    const result = await service.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.command).toBe('tools');
+    expect(result.message).toContain('tools');
+  });
+});

apps/gateway/src/commands/command-executor.service.ts

@@ -0,0 +1,373 @@
+import { forwardRef, Inject, Injectable, Logger, Optional } from '@nestjs/common';
+import type { QueueHandle } from '@mosaic/queue';
+import type { SlashCommandPayload, SlashCommandResultPayload } from '@mosaic/types';
+import { AgentService } from '../agent/agent.service.js';
+import { ChatGateway } from '../chat/chat.gateway.js';
+import { SessionGCService } from '../gc/session-gc.service.js';
+import { SystemOverrideService } from '../preferences/system-override.service.js';
+import { ReloadService } from '../reload/reload.service.js';
+import { COMMANDS_REDIS } from './commands.tokens.js';
+import { CommandRegistryService } from './command-registry.service.js';
+
+@Injectable()
+export class CommandExecutorService {
+  private readonly logger = new Logger(CommandExecutorService.name);
+
+  constructor(
+    @Inject(CommandRegistryService) private readonly registry: CommandRegistryService,
+    @Inject(AgentService) private readonly agentService: AgentService,
+    @Inject(SystemOverrideService) private readonly systemOverride: SystemOverrideService,
+    @Inject(SessionGCService) private readonly sessionGC: SessionGCService,
+    @Inject(COMMANDS_REDIS) private readonly redis: QueueHandle['redis'],
+    @Optional()
+    @Inject(forwardRef(() => ReloadService))
+    private readonly reloadService: ReloadService | null,
+    @Optional()
+    @Inject(forwardRef(() => ChatGateway))
+    private readonly chatGateway: ChatGateway | null,
+  ) {}
+
+  async execute(payload: SlashCommandPayload, userId: string): Promise<SlashCommandResultPayload> {
+    const { command, args, conversationId } = payload;
+
+    const def = this.registry.getManifest().commands.find((c) => c.name === command);
+    if (!def) {
+      return {
+        command,
+        conversationId,
+        success: false,
+        message: `Unknown command: /${command}`,
+      };
+    }
+
+    try {
+      switch (command) {
+        case 'model':
+          return await this.handleModel(args ?? null, conversationId);
+        case 'thinking':
+          return await this.handleThinking(args ?? null, conversationId);
+        case 'system':
+          return await this.handleSystem(args ?? null, conversationId);
+        case 'new':
+          return {
+            command,
+            conversationId,
+            success: true,
+            message: 'Start a new conversation by selecting New Conversation.',
+          };
+        case 'clear':
+          return {
+            command,
+            conversationId,
+            success: true,
+            message: 'Conversation display cleared.',
+          };
+        case 'compact':
+          return {
+            command,
+            conversationId,
+            success: true,
+            message: 'Context compaction requested.',
+          };
+        case 'retry':
+          return {
+            command,
+            conversationId,
+            success: true,
+            message: 'Retry last message requested.',
+          };
+        case 'gc': {
+          // User-scoped sweep for non-admin; system-wide for admin
+          const result = await this.sessionGC.sweepOrphans(userId);
+          return {
+            command: 'gc',
+            success: true,
+            message: `GC sweep complete: ${result.orphanedSessions} orphaned sessions cleaned in ${result.duration}ms.`,
+            conversationId,
+          };
+        }
+        case 'agent':
+          return await this.handleAgent(args ?? null, conversationId);
+        case 'provider':
+          return await this.handleProvider(args ?? null, userId, conversationId);
+        case 'mission':
+          return await this.handleMission(args ?? null, conversationId, userId);
+        case 'prdy':
+          return {
+            command: 'prdy',
+            success: true,
+            message:
+              'PRD wizard: run `mosaic prdy` in your project workspace to create or update a PRD.',
+            conversationId,
+          };
+        case 'tools':
+          return await this.handleTools(conversationId, userId);
+        case 'reload': {
+          if (!this.reloadService) {
+            return {
+              command: 'reload',
+              conversationId,
+              success: false,
+              message: 'ReloadService is not available.',
+            };
+          }
+          const reloadResult = await this.reloadService.reload('command');
+          this.chatGateway?.broadcastReload(reloadResult);
+          return {
+            command: 'reload',
+            success: true,
+            message: reloadResult.message,
+            conversationId,
+          };
+        }
+        default:
+          return {
+            command,
+            conversationId,
+            success: false,
+            message: `Command /${command} is not yet implemented.`,
+          };
+      }
+    } catch (err) {
+      this.logger.error(`Command /${command} failed: ${err}`);
+      return { command, conversationId, success: false, message: String(err) };
+    }
+  }
+
+  private async handleModel(
+    args: string | null,
+    conversationId: string,
+  ): Promise<SlashCommandResultPayload> {
+    if (!args) {
+      return {
+        command: 'model',
+        conversationId,
+        success: true,
+        message: 'Usage: /model <model-name>',
+      };
+    }
+    // Update agent session model if session is active
+    // For now, acknowledge the request — full wiring done in P8-012
+    const session = this.agentService.getSession(conversationId);
+    if (!session) {
+      return {
+        command: 'model',
+        conversationId,
+        success: true,
+        message: `Model switch to "${args}" requested. No active session for this conversation.`,
+      };
+    }
+    return {
+      command: 'model',
+      conversationId,
+      success: true,
+      message: `Model switch to "${args}" requested.`,
+    };
+  }
+
+  private async handleThinking(
+    args: string | null,
+    conversationId: string,
+  ): Promise<SlashCommandResultPayload> {
+    const level = args?.toLowerCase();
+    if (!level || !['none', 'low', 'medium', 'high', 'auto'].includes(level)) {
+      return {
+        command: 'thinking',
+        conversationId,
+        success: true,
+        message: 'Usage: /thinking <none|low|medium|high|auto>',
+      };
+    }
+    return {
+      command: 'thinking',
+      conversationId,
+      success: true,
+      message: `Thinking level set to "${level}".`,
+    };
+  }
+
+  private async handleSystem(
+    args: string | null,
+    conversationId: string,
+  ): Promise<SlashCommandResultPayload> {
+    if (!args || args.trim().length === 0) {
+      // Clear the override when called with no args
+      await this.systemOverride.clear(conversationId);
+      return {
+        command: 'system',
+        conversationId,
+        success: true,
+        message: 'Session system prompt override cleared.',
+      };
+    }
+
+    await this.systemOverride.set(conversationId, args.trim());
+    return {
+      command: 'system',
+      conversationId,
+      success: true,
+      message: `Session system prompt override set (expires in 5 minutes of inactivity).`,
+    };
+  }
+
+  private async handleAgent(
+    args: string | null,
+    conversationId: string,
+  ): Promise<SlashCommandResultPayload> {
+    if (!args) {
+      return {
+        command: 'agent',
+        success: true,
+        message: 'Usage: /agent <agent-id> to switch, or /agent list to see available agents.',
+        conversationId,
+      };
+    }
+
+    if (args === 'list') {
+      return {
+        command: 'agent',
+        success: true,
+        message: 'Agent listing: use the web dashboard for full agent management.',
+        conversationId,
+      };
+    }
+
+    // Switch agent — stub for now (full implementation in P8-015)
+    return {
+      command: 'agent',
+      success: true,
+      message: `Agent switch to "${args}" requested. Restart conversation to apply.`,
+      conversationId,
+    };
+  }
+
+  private async handleProvider(
+    args: string | null,
+    userId: string,
+    conversationId: string,
+  ): Promise<SlashCommandResultPayload> {
+    if (!args) {
+      return {
+        command: 'provider',
+        success: true,
+        message: 'Usage: /provider list | /provider login <name> | /provider logout <name>',
+        conversationId,
+      };
+    }
+
+    const spaceIdx = args.indexOf(' ');
+    const subcommand = spaceIdx >= 0 ? args.slice(0, spaceIdx) : args;
+    const providerName = spaceIdx >= 0 ? args.slice(spaceIdx + 1).trim() : '';
+
+    switch (subcommand) {
+      case 'list':
+        return {
+          command: 'provider',
+          success: true,
+          message: 'Use the web dashboard to manage providers.',
+          conversationId,
+        };
+
+      case 'login': {
+        if (!providerName) {
+          return {
+            command: 'provider',
+            success: false,
+            message: 'Usage: /provider login <provider-name>',
+            conversationId,
+          };
+        }
+        const pollToken = crypto.randomUUID();
+        const key = `mosaic:auth:poll:${pollToken}`;
+        // Store pending state in Valkey (TTL 5 minutes)
+        await this.redis.set(
+          key,
+          JSON.stringify({ status: 'pending', provider: providerName, userId }),
+          'EX',
+          300,
+        );
+        // In production this would construct an OAuth URL
+        const loginUrl = `${process.env['MOSAIC_BASE_URL'] ?? 'http://localhost:3000'}/auth/provider/${providerName}?token=${pollToken}`;
+        return {
+          command: 'provider',
+          success: true,
+          message: `Open this URL to authenticate with ${providerName}:\n${loginUrl}`,
+          conversationId,
+          data: { loginUrl, pollToken, provider: providerName },
+        };
+      }
+
+      case 'logout': {
+        if (!providerName) {
+          return {
+            command: 'provider',
+            success: false,
+            message: 'Usage: /provider logout <provider-name>',
+            conversationId,
+          };
+        }
+        return {
+          command: 'provider',
+          success: true,
+          message: `Logout from ${providerName}: use the web dashboard to revoke provider tokens.`,
+          conversationId,
+        };
+      }
+
+      default:
+        return {
+          command: 'provider',
+          success: false,
+          message: `Unknown subcommand: ${subcommand}. Use list, login, or logout.`,
+          conversationId,
+        };
+    }
+  }
+
+  private async handleMission(
+    args: string | null,
+    conversationId: string,
+    _userId: string,
+  ): Promise<SlashCommandResultPayload> {
+    if (!args || args === 'status') {
+      // TODO: fetch active mission from DB when MissionsService is available
+      return {
+        command: 'mission',
+        success: true,
+        message: 'Mission status: use the web dashboard for full mission management.',
+        conversationId,
+      };
+    }
+
+    if (args.startsWith('set ')) {
+      const missionId = args.slice(4).trim();
+      return {
+        command: 'mission',
+        success: true,
+        message: `Mission set to ${missionId}. Session context updated.`,
+        conversationId,
+      };
+    }
+
+    return {
+      command: 'mission',
+      success: true,
+      message: 'Usage: /mission [status|set <id>|list|tasks]',
+      conversationId,
+    };
+  }
+
+  private async handleTools(
+    conversationId: string,
+    _userId: string,
+  ): Promise<SlashCommandResultPayload> {
+    // TODO: fetch tool list from active agent session
+    return {
+      command: 'tools',
+      success: true,
+      message:
+        'Available tools depend on the active agent configuration. Use the web dashboard to configure tool access.',
+      conversationId,
+    };
+  }
+}

apps/gateway/src/commands/command-registry.service.spec.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { CommandRegistryService } from './command-registry.service.js';
+import type { CommandDef } from '@mosaic/types';
+
+const mockCmd: CommandDef = {
+  name: 'test',
+  description: 'Test command',
+  aliases: ['t'],
+  scope: 'core',
+  execution: 'local',
+  available: true,
+};
+
+describe('CommandRegistryService', () => {
+  let service: CommandRegistryService;
+
+  beforeEach(() => {
+    service = new CommandRegistryService();
+  });
+
+  it('starts with empty manifest', () => {
+    expect(service.getManifest().commands).toHaveLength(0);
+  });
+
+  it('registers a command', () => {
+    service.registerCommand(mockCmd);
+    expect(service.getManifest().commands).toHaveLength(1);
+  });
+
+  it('updates existing command by name', () => {
+    service.registerCommand(mockCmd);
+    service.registerCommand({ ...mockCmd, description: 'Updated' });
+    expect(service.getManifest().commands).toHaveLength(1);
+    expect(service.getManifest().commands[0]?.description).toBe('Updated');
+  });
+
+  it('onModuleInit registers core commands', () => {
+    service.onModuleInit();
+    const manifest = service.getManifest();
+    expect(manifest.commands.length).toBeGreaterThan(5);
+    expect(manifest.commands.some((c) => c.name === 'model')).toBe(true);
+    expect(manifest.commands.some((c) => c.name === 'help')).toBe(true);
+  });
+
+  it('manifest includes skills array', () => {
+    const manifest = service.getManifest();
+    expect(Array.isArray(manifest.skills)).toBe(true);
+  });
+
+  it('manifest version is 1', () => {
+    expect(service.getManifest().version).toBe(1);
+  });
+});

apps/gateway/src/commands/command-registry.service.ts

@@ -0,0 +1,273 @@
+import { Injectable, type OnModuleInit } from '@nestjs/common';
+import type { CommandDef, CommandManifest } from '@mosaic/types';
+
+@Injectable()
+export class CommandRegistryService implements OnModuleInit {
+  private readonly commands: CommandDef[] = [];
+
+  registerCommand(def: CommandDef): void {
+    const existing = this.commands.findIndex((c) => c.name === def.name);
+    if (existing >= 0) {
+      this.commands[existing] = def;
+    } else {
+      this.commands.push(def);
+    }
+  }
+
+  registerCommands(defs: CommandDef[]): void {
+    for (const def of defs) {
+      this.registerCommand(def);
+    }
+  }
+
+  getManifest(): CommandManifest {
+    return {
+      version: 1,
+      commands: [...this.commands],
+      skills: [],
+    };
+  }
+
+  onModuleInit(): void {
+    this.registerCommands([
+      {
+        name: 'model',
+        description: 'Switch the active model',
+        aliases: ['m'],
+        args: [
+          {
+            name: 'model-name',
+            type: 'string',
+            optional: false,
+            description: 'Model name to switch to',
+          },
+        ],
+        scope: 'core',
+        execution: 'socket',
+        available: true,
+      },
+      {
+        name: 'thinking',
+        description: 'Set thinking level (none/low/medium/high/auto)',
+        aliases: ['t'],
+        args: [
+          {
+            name: 'level',
+            type: 'enum',
+            optional: false,
+            values: ['none', 'low', 'medium', 'high', 'auto'],
+            description: 'Thinking level',
+          },
+        ],
+        scope: 'core',
+        execution: 'socket',
+        available: true,
+      },
+      {
+        name: 'new',
+        description: 'Start a new conversation',
+        aliases: ['n'],
+        scope: 'core',
+        execution: 'socket',
+        available: true,
+      },
+      {
+        name: 'clear',
+        description: 'Clear conversation context and GC session artifacts',
+        aliases: [],
+        scope: 'core',
+        execution: 'socket',
+        available: true,
+      },
+      {
+        name: 'compact',
+        description: 'Request context compaction',
+        aliases: [],
+        scope: 'core',
+        execution: 'socket',
+        available: true,
+      },
+      {
+        name: 'retry',
+        description: 'Retry the last message',
+        aliases: [],
+        scope: 'core',
+        execution: 'socket',
+        available: true,
+      },
+      {
+        name: 'rename',
+        description: 'Rename current conversation',
+        aliases: [],
+        args: [
+          { name: 'name', type: 'string', optional: false, description: 'New conversation name' },
+        ],
+        scope: 'core',
+        execution: 'rest',
+        available: true,
+      },
+      {
+        name: 'history',
+        description: 'Show conversation history',
+        aliases: [],
+        args: [
+          {
+            name: 'limit',
+            type: 'string',
+            optional: true,
+            description: 'Number of messages to show',
+          },
+        ],
+        scope: 'core',
+        execution: 'rest',
+        available: true,
+      },
+      {
+        name: 'export',
+        description: 'Export conversation to markdown or JSON',
+        aliases: [],
+        args: [
+          {
+            name: 'format',
+            type: 'enum',
+            optional: true,
+            values: ['md', 'json'],
+            description: 'Export format',
+          },
+        ],
+        scope: 'core',
+        execution: 'rest',
+        available: true,
+      },
+      {
+        name: 'preferences',
+        description: 'View or set user preferences',
+        aliases: ['pref'],
+        args: [
+          {
+            name: 'action',
+            type: 'enum',
+            optional: true,
+            values: ['show', 'set', 'reset'],
+            description: 'Action to perform',
+          },
+        ],
+        scope: 'core',
+        execution: 'rest',
+        available: true,
+      },
+      {
+        name: 'system',
+        description: 'Set session-scoped system prompt override',
+        aliases: [],
+        args: [
+          {
+            name: 'override',
+            type: 'string',
+            optional: false,
+            description: 'System prompt text to inject for this session',
+          },
+        ],
+        scope: 'core',
+        execution: 'socket',
+        available: true,
+      },
+      {
+        name: 'status',
+        description: 'Show session and connection status',
+        aliases: ['s'],
+        scope: 'core',
+        execution: 'hybrid',
+        available: true,
+      },
+      {
+        name: 'help',
+        description: 'Show available commands',
+        aliases: ['h'],
+        scope: 'core',
+        execution: 'local',
+        available: true,
+      },
+      {
+        name: 'gc',
+        description: 'Trigger garbage collection sweep (user-scoped)',
+        aliases: [],
+        scope: 'core',
+        execution: 'socket',
+        available: true,
+      },
+      {
+        name: 'agent',
+        description: 'Switch or list available agents',
+        aliases: ['a'],
+        args: [
+          {
+            name: 'args',
+            type: 'string',
+            optional: true,
+            description: 'list or <agent-id>',
+          },
+        ],
+        scope: 'agent',
+        execution: 'socket',
+        available: true,
+      },
+      {
+        name: 'provider',
+        description: 'Manage LLM providers (list/login/logout)',
+        aliases: [],
+        args: [
+          {
+            name: 'args',
+            type: 'string',
+            optional: true,
+            description: 'list | login <name> | logout <name>',
+          },
+        ],
+        scope: 'agent',
+        execution: 'hybrid',
+        available: true,
+      },
+      {
+        name: 'mission',
+        description: 'View or set active mission',
+        aliases: [],
+        args: [
+          {
+            name: 'args',
+            type: 'string',
+            optional: true,
+            description: 'status | set <id> | list | tasks',
+          },
+        ],
+        scope: 'agent',
+        execution: 'socket',
+        available: true,
+      },
+      {
+        name: 'prdy',
+        description: 'Launch PRD wizard',
+        aliases: [],
+        scope: 'agent',
+        execution: 'socket',
+        available: true,
+      },
+      {
+        name: 'tools',
+        description: 'List available agent tools',
+        aliases: [],
+        scope: 'agent',
+        execution: 'socket',
+        available: true,
+      },
+      {
+        name: 'reload',
+        description: 'Soft-reload gateway plugins and command manifest (admin)',
+        aliases: [],
+        scope: 'admin',
+        execution: 'socket',
+        available: true,
+      },
+    ]);
+  }
+}

apps/gateway/src/commands/commands.integration.spec.ts

@@ -0,0 +1,253 @@
+/**
+ * Integration tests for the gateway command system (P8-019)
+ *
+ * Covers:
+ * - CommandRegistryService.getManifest() returns 12+ core commands
+ * - All core commands have correct execution types
+ * - Alias resolution works for all defined aliases
+ * - CommandExecutorService routes known/unknown commands correctly
+ * - /gc handler calls SessionGCService.sweepOrphans
+ * - /system handler calls SystemOverrideService.set
+ * - Unknown command returns descriptive error
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { CommandRegistryService } from './command-registry.service.js';
+import { CommandExecutorService } from './command-executor.service.js';
+import type { SlashCommandPayload } from '@mosaic/types';
+
+// ─── Mocks ───────────────────────────────────────────────────────────────────
+
+const mockAgentService = {
+  getSession: vi.fn(() => undefined),
+};
+
+const mockSystemOverride = {
+  set: vi.fn().mockResolvedValue(undefined),
+  get: vi.fn().mockResolvedValue(null),
+  clear: vi.fn().mockResolvedValue(undefined),
+  renew: vi.fn().mockResolvedValue(undefined),
+};
+
+const mockSessionGC = {
+  sweepOrphans: vi.fn().mockResolvedValue({ orphanedSessions: 3, totalCleaned: [], duration: 12 }),
+};
+
+const mockRedis = {
+  set: vi.fn().mockResolvedValue('OK'),
+  get: vi.fn().mockResolvedValue(null),
+  del: vi.fn().mockResolvedValue(0),
+  keys: vi.fn().mockResolvedValue([]),
+};
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function buildRegistry(): CommandRegistryService {
+  const svc = new CommandRegistryService();
+  svc.onModuleInit(); // seed core commands
+  return svc;
+}
+
+function buildExecutor(registry: CommandRegistryService): CommandExecutorService {
+  return new CommandExecutorService(
+    registry as never,
+    mockAgentService as never,
+    mockSystemOverride as never,
+    mockSessionGC as never,
+    mockRedis as never,
+    null, // reloadService (optional)
+    null, // chatGateway (optional)
+  );
+}
+
+// ─── Registry Tests ───────────────────────────────────────────────────────────
+
+describe('CommandRegistryService — integration', () => {
+  let registry: CommandRegistryService;
+
+  beforeEach(() => {
+    registry = buildRegistry();
+  });
+
+  it('getManifest() returns 12 or more core commands after onModuleInit', () => {
+    const manifest = registry.getManifest();
+    expect(manifest.commands.length).toBeGreaterThanOrEqual(12);
+  });
+
+  it('manifest version is 1', () => {
+    expect(registry.getManifest().version).toBe(1);
+  });
+
+  it('manifest.skills is an array', () => {
+    expect(Array.isArray(registry.getManifest().skills)).toBe(true);
+  });
+
+  it('all commands have required fields: name, description, execution, scope, available', () => {
+    for (const cmd of registry.getManifest().commands) {
+      expect(typeof cmd.name).toBe('string');
+      expect(typeof cmd.description).toBe('string');
+      expect(['local', 'socket', 'rest', 'hybrid']).toContain(cmd.execution);
+      expect(['core', 'agent', 'admin']).toContain(cmd.scope);
+      expect(typeof cmd.available).toBe('boolean');
+    }
+  });
+
+  // Execution type verification for core commands
+  const expectedExecutionTypes: Record<string, string> = {
+    model: 'socket',
+    thinking: 'socket',
+    new: 'socket',
+    clear: 'socket',
+    compact: 'socket',
+    retry: 'socket',
+    rename: 'rest',
+    history: 'rest',
+    export: 'rest',
+    preferences: 'rest',
+    system: 'socket',
+    help: 'local',
+    gc: 'socket',
+    agent: 'socket',
+    provider: 'hybrid',
+    mission: 'socket',
+    prdy: 'socket',
+    tools: 'socket',
+    reload: 'socket',
+  };
+
+  for (const [name, expectedExecution] of Object.entries(expectedExecutionTypes)) {
+    it(`command "${name}" has execution type "${expectedExecution}"`, () => {
+      const cmd = registry.getManifest().commands.find((c) => c.name === name);
+      expect(cmd, `command "${name}" not found`).toBeDefined();
+      expect(cmd!.execution).toBe(expectedExecution);
+    });
+  }
+
+  // Alias resolution checks
+  const expectedAliases: Array<[string, string]> = [
+    ['m', 'model'],
+    ['t', 'thinking'],
+    ['n', 'new'],
+    ['a', 'agent'],
+    ['s', 'status'],
+    ['h', 'help'],
+    ['pref', 'preferences'],
+  ];
+
+  for (const [alias, commandName] of expectedAliases) {
+    it(`alias "/${alias}" resolves to command "${commandName}" via aliases array`, () => {
+      const cmd = registry
+        .getManifest()
+        .commands.find((c) => c.name === commandName || c.aliases?.includes(alias));
+      expect(cmd, `command with alias "${alias}" not found`).toBeDefined();
+    });
+  }
+});
+
+// ─── Executor Tests ───────────────────────────────────────────────────────────
+
+describe('CommandExecutorService — integration', () => {
+  let registry: CommandRegistryService;
+  let executor: CommandExecutorService;
+  const userId = 'user-integ-001';
+  const conversationId = 'conv-integ-001';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    registry = buildRegistry();
+    executor = buildExecutor(registry);
+  });
+
+  // Unknown command returns error
+  it('unknown command returns success:false with descriptive message', async () => {
+    const payload: SlashCommandPayload = { command: 'nonexistent', conversationId };
+    const result = await executor.execute(payload, userId);
+    expect(result.success).toBe(false);
+    expect(result.message).toContain('nonexistent');
+    expect(result.command).toBe('nonexistent');
+  });
+
+  // /gc handler calls SessionGCService.sweepOrphans
+  it('/gc calls SessionGCService.sweepOrphans with userId', async () => {
+    const payload: SlashCommandPayload = { command: 'gc', conversationId };
+    const result = await executor.execute(payload, userId);
+    expect(mockSessionGC.sweepOrphans).toHaveBeenCalledWith(userId);
+    expect(result.success).toBe(true);
+    expect(result.message).toContain('GC sweep complete');
+    expect(result.message).toContain('3 orphaned sessions');
+  });
+
+  // /system with args calls SystemOverrideService.set
+  it('/system with text calls SystemOverrideService.set', async () => {
+    const override = 'You are a helpful assistant.';
+    const payload: SlashCommandPayload = { command: 'system', args: override, conversationId };
+    const result = await executor.execute(payload, userId);
+    expect(mockSystemOverride.set).toHaveBeenCalledWith(conversationId, override);
+    expect(result.success).toBe(true);
+    expect(result.message).toContain('override set');
+  });
+
+  // /system with no args clears the override
+  it('/system with no args calls SystemOverrideService.clear', async () => {
+    const payload: SlashCommandPayload = { command: 'system', conversationId };
+    const result = await executor.execute(payload, userId);
+    expect(mockSystemOverride.clear).toHaveBeenCalledWith(conversationId);
+    expect(result.success).toBe(true);
+    expect(result.message).toContain('cleared');
+  });
+
+  // /model with model name returns success
+  it('/model with a model name returns success', async () => {
+    const payload: SlashCommandPayload = {
+      command: 'model',
+      args: 'claude-3-opus',
+      conversationId,
+    };
+    const result = await executor.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.command).toBe('model');
+    expect(result.message).toContain('claude-3-opus');
+  });
+
+  // /thinking with valid level returns success
+  it('/thinking with valid level returns success', async () => {
+    const payload: SlashCommandPayload = { command: 'thinking', args: 'high', conversationId };
+    const result = await executor.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.message).toContain('high');
+  });
+
+  // /thinking with invalid level returns usage message
+  it('/thinking with invalid level returns usage message', async () => {
+    const payload: SlashCommandPayload = { command: 'thinking', args: 'invalid', conversationId };
+    const result = await executor.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.message).toContain('Usage:');
+  });
+
+  // /new command returns success
+  it('/new returns success', async () => {
+    const payload: SlashCommandPayload = { command: 'new', conversationId };
+    const result = await executor.execute(payload, userId);
+    expect(result.success).toBe(true);
+    expect(result.command).toBe('new');
+  });
+
+  // /reload without reloadService returns failure
+  it('/reload without ReloadService returns failure', async () => {
+    const payload: SlashCommandPayload = { command: 'reload', conversationId };
+    const result = await executor.execute(payload, userId);
+    expect(result.success).toBe(false);
+    expect(result.message).toContain('ReloadService');
+  });
+
+  // Commands not yet fully implemented return a fallback response
+  const stubCommands = ['clear', 'compact', 'retry'];
+  for (const cmd of stubCommands) {
+    it(`/${cmd} returns success (stub)`, async () => {
+      const payload: SlashCommandPayload = { command: cmd, conversationId };
+      const result = await executor.execute(payload, userId);
+      expect(result.success).toBe(true);
+      expect(result.command).toBe(cmd);
+    });
+  }
+});

apps/gateway/src/commands/commands.module.ts

@@ -0,0 +1,37 @@
+import { forwardRef, Inject, Module, type OnApplicationShutdown } from '@nestjs/common';
+import { createQueue, type QueueHandle } from '@mosaic/queue';
+import { ChatModule } from '../chat/chat.module.js';
+import { GCModule } from '../gc/gc.module.js';
+import { ReloadModule } from '../reload/reload.module.js';
+import { CommandExecutorService } from './command-executor.service.js';
+import { CommandRegistryService } from './command-registry.service.js';
+import { COMMANDS_REDIS } from './commands.tokens.js';
+
+const COMMANDS_QUEUE_HANDLE = 'COMMANDS_QUEUE_HANDLE';
+
+@Module({
+  imports: [GCModule, forwardRef(() => ReloadModule), forwardRef(() => ChatModule)],
+  providers: [
+    {
+      provide: COMMANDS_QUEUE_HANDLE,
+      useFactory: (): QueueHandle => {
+        return createQueue();
+      },
+    },
+    {
+      provide: COMMANDS_REDIS,
+      useFactory: (handle: QueueHandle) => handle.redis,
+      inject: [COMMANDS_QUEUE_HANDLE],
+    },
+    CommandRegistryService,
+    CommandExecutorService,
+  ],
+  exports: [CommandRegistryService, CommandExecutorService],
+})
+export class CommandsModule implements OnApplicationShutdown {
+  constructor(@Inject(COMMANDS_QUEUE_HANDLE) private readonly handle: QueueHandle) {}
+
+  async onApplicationShutdown(): Promise<void> {
+    await this.handle.close().catch(() => {});
+  }
+}

apps/gateway/src/commands/commands.tokens.ts

@@ -0,0 +1 @@
+export const COMMANDS_REDIS = 'COMMANDS_REDIS';

apps/gateway/src/coord/coord.controller.ts

@@ -1,30 +1,17 @@
 import {
   BadRequestException,
-  Body,
   Controller,
-  Delete,
   Get,
-  HttpCode,
-  HttpStatus,
   Inject,
   NotFoundException,
   Param,
-  Patch,
-  Post,
   Query,
   UseGuards,
 } from '@nestjs/common';
 import fs from 'node:fs';
 import path from 'node:path';
 import { AuthGuard } from '../auth/auth.guard.js';
-import { CurrentUser } from '../auth/current-user.decorator.js';
 import { CoordService } from './coord.service.js';
-import type {
-  CreateDbMissionDto,
-  UpdateDbMissionDto,
-  CreateMissionTaskDto,
-  UpdateMissionTaskDto,
-} from './coord.dto.js';
 
 /** Walk up from cwd to find the monorepo root (has pnpm-workspace.yaml). */
 function findMonorepoRoot(start: string): string {
@@ -57,13 +44,15 @@ function resolveAndValidatePath(raw: string | undefined): string {
   return resolved;
 }
 
+/**
+ * File-based coord endpoints for agent tool consumption.
+ * DB-backed mission CRUD has moved to MissionsController at /api/missions.
+ */
 @Controller('api/coord')
 @UseGuards(AuthGuard)
 export class CoordController {
   constructor(@Inject(CoordService) private readonly coordService: CoordService) {}
 
-  // ── File-based coord endpoints (legacy) ──
-
   @Get('status')
   async missionStatus(@Query('projectPath') projectPath?: string) {
     const resolvedPath = resolveAndValidatePath(projectPath);
@@ -85,121 +74,4 @@ export class CoordController {
     if (!detail) throw new NotFoundException(`Task ${taskId} not found in coord mission`);
     return detail;
   }
-
-  // ── DB-backed mission endpoints ──
-
-  @Get('missions')
-  async listDbMissions(@CurrentUser() user: { id: string }) {
-    return this.coordService.getMissionsByUser(user.id);
-  }
-
-  @Get('missions/:id')
-  async getDbMission(@Param('id') id: string, @CurrentUser() user: { id: string }) {
-    const mission = await this.coordService.getMissionByIdAndUser(id, user.id);
-    if (!mission) throw new NotFoundException('Mission not found');
-    return mission;
-  }
-
-  @Post('missions')
-  async createDbMission(@Body() dto: CreateDbMissionDto, @CurrentUser() user: { id: string }) {
-    return this.coordService.createDbMission({
-      name: dto.name,
-      description: dto.description,
-      projectId: dto.projectId,
-      userId: user.id,
-      phase: dto.phase,
-      milestones: dto.milestones,
-      config: dto.config,
-      status: dto.status,
-    });
-  }
-
-  @Patch('missions/:id')
-  async updateDbMission(
-    @Param('id') id: string,
-    @Body() dto: UpdateDbMissionDto,
-    @CurrentUser() user: { id: string },
-  ) {
-    const mission = await this.coordService.updateDbMission(id, user.id, dto);
-    if (!mission) throw new NotFoundException('Mission not found');
-    return mission;
-  }
-
-  @Delete('missions/:id')
-  @HttpCode(HttpStatus.NO_CONTENT)
-  async deleteDbMission(@Param('id') id: string, @CurrentUser() user: { id: string }) {
-    const deleted = await this.coordService.deleteDbMission(id, user.id);
-    if (!deleted) throw new NotFoundException('Mission not found');
-  }
-
-  // ── DB-backed mission task endpoints ──
-
-  @Get('missions/:missionId/mission-tasks')
-  async listMissionTasks(
-    @Param('missionId') missionId: string,
-    @CurrentUser() user: { id: string },
-  ) {
-    const mission = await this.coordService.getMissionByIdAndUser(missionId, user.id);
-    if (!mission) throw new NotFoundException('Mission not found');
-    return this.coordService.getMissionTasksByMissionAndUser(missionId, user.id);
-  }
-
-  @Get('missions/:missionId/mission-tasks/:taskId')
-  async getMissionTask(
-    @Param('missionId') missionId: string,
-    @Param('taskId') taskId: string,
-    @CurrentUser() user: { id: string },
-  ) {
-    const mission = await this.coordService.getMissionByIdAndUser(missionId, user.id);
-    if (!mission) throw new NotFoundException('Mission not found');
-    const task = await this.coordService.getMissionTaskByIdAndUser(taskId, user.id);
-    if (!task) throw new NotFoundException('Mission task not found');
-    return task;
-  }
-
-  @Post('missions/:missionId/mission-tasks')
-  async createMissionTask(
-    @Param('missionId') missionId: string,
-    @Body() dto: CreateMissionTaskDto,
-    @CurrentUser() user: { id: string },
-  ) {
-    const mission = await this.coordService.getMissionByIdAndUser(missionId, user.id);
-    if (!mission) throw new NotFoundException('Mission not found');
-    return this.coordService.createMissionTask({
-      missionId,
-      taskId: dto.taskId,
-      userId: user.id,
-      status: dto.status,
-      description: dto.description,
-      notes: dto.notes,
-      pr: dto.pr,
-    });
-  }
-
-  @Patch('missions/:missionId/mission-tasks/:taskId')
-  async updateMissionTask(
-    @Param('missionId') missionId: string,
-    @Param('taskId') taskId: string,
-    @Body() dto: UpdateMissionTaskDto,
-    @CurrentUser() user: { id: string },
-  ) {
-    const mission = await this.coordService.getMissionByIdAndUser(missionId, user.id);
-    if (!mission) throw new NotFoundException('Mission not found');
-    const updated = await this.coordService.updateMissionTask(taskId, user.id, dto);
-    if (!updated) throw new NotFoundException('Mission task not found');
-    return updated;
-  }
-
-  @Delete('missions/:missionId/mission-tasks/:taskId')
-  @HttpCode(HttpStatus.NO_CONTENT)
-  async deleteMissionTask(
-    @Param('missionId') missionId: string,
-    @Param('taskId') taskId: string,
-    @CurrentUser() user: { id: string },
-  ) {
-    const mission = await this.coordService.getMissionByIdAndUser(missionId, user.id);
-    if (!mission) throw new NotFoundException('Mission not found');
-    const deleted = await this.coordService.deleteMissionTask(taskId, user.id);
-    if (!deleted) throw new NotFoundException('Mission task not found');
-  }
 }

apps/gateway/src/coord/coord.service.ts

@@ -1,6 +1,4 @@
-import { Injectable, Logger, Inject } from '@nestjs/common';
+import { Injectable, Logger } from '@nestjs/common';
-import type { Brain } from '@mosaic/brain';
-import { BRAIN } from '../brain/brain.tokens.js';
 import {
   loadMission,
   getMissionStatus,
@@ -14,12 +12,14 @@ import {
 import { promises as fs } from 'node:fs';
 import path from 'node:path';
 
+/**
+ * File-based coord operations for agent tool consumption.
+ * DB-backed mission CRUD is handled directly by MissionsController via Brain repos.
+ */
 @Injectable()
 export class CoordService {
   private readonly logger = new Logger(CoordService.name);
 
-  constructor(@Inject(BRAIN) private readonly brain: Brain) {}
-
   async loadMission(projectPath: string): Promise<Mission | null> {
     try {
       return await loadMission(projectPath);
@@ -74,68 +74,4 @@ export class CoordService {
       return [];
     }
   }
-
-  // ── DB-backed methods for multi-tenant mission management ──
-
-  async getMissionsByUser(userId: string) {
-    return this.brain.missions.findAllByUser(userId);
-  }
-
-  async getMissionByIdAndUser(id: string, userId: string) {
-    return this.brain.missions.findByIdAndUser(id, userId);
-  }
-
-  async getMissionsByProjectAndUser(projectId: string, userId: string) {
-    return this.brain.missions.findByProjectAndUser(projectId, userId);
-  }
-
-  async createDbMission(data: Parameters<Brain['missions']['create']>[0]) {
-    return this.brain.missions.create(data);
-  }
-
-  async updateDbMission(
-    id: string,
-    userId: string,
-    data: Parameters<Brain['missions']['update']>[1],
-  ) {
-    const existing = await this.brain.missions.findByIdAndUser(id, userId);
-    if (!existing) return null;
-    return this.brain.missions.update(id, data);
-  }
-
-  async deleteDbMission(id: string, userId: string) {
-    const existing = await this.brain.missions.findByIdAndUser(id, userId);
-    if (!existing) return false;
-    return this.brain.missions.remove(id);
-  }
-
-  // ── DB-backed methods for mission tasks (coord tracking) ──
-
-  async getMissionTasksByMissionAndUser(missionId: string, userId: string) {
-    return this.brain.missionTasks.findByMissionAndUser(missionId, userId);
-  }
-
-  async getMissionTaskByIdAndUser(id: string, userId: string) {
-    return this.brain.missionTasks.findByIdAndUser(id, userId);
-  }
-
-  async createMissionTask(data: Parameters<Brain['missionTasks']['create']>[0]) {
-    return this.brain.missionTasks.create(data);
-  }
-
-  async updateMissionTask(
-    id: string,
-    userId: string,
-    data: Parameters<Brain['missionTasks']['update']>[1],
-  ) {
-    const existing = await this.brain.missionTasks.findByIdAndUser(id, userId);
-    if (!existing) return null;
-    return this.brain.missionTasks.update(id, data);
-  }
-
-  async deleteMissionTask(id: string, userId: string) {
-    const existing = await this.brain.missionTasks.findByIdAndUser(id, userId);
-    if (!existing) return false;
-    return this.brain.missionTasks.remove(id);
-  }
 }

apps/gateway/src/gc/gc.module.ts

@@ -0,0 +1,31 @@
+import { Module, type OnApplicationShutdown, Inject } from '@nestjs/common';
+import { createQueue, type QueueHandle } from '@mosaic/queue';
+import { SessionGCService } from './session-gc.service.js';
+import { REDIS } from './gc.tokens.js';
+
+const GC_QUEUE_HANDLE = 'GC_QUEUE_HANDLE';
+
+@Module({
+  providers: [
+    {
+      provide: GC_QUEUE_HANDLE,
+      useFactory: (): QueueHandle => {
+        return createQueue();
+      },
+    },
+    {
+      provide: REDIS,
+      useFactory: (handle: QueueHandle) => handle.redis,
+      inject: [GC_QUEUE_HANDLE],
+    },
+    SessionGCService,
+  ],
+  exports: [SessionGCService],
+})
+export class GCModule implements OnApplicationShutdown {
+  constructor(@Inject(GC_QUEUE_HANDLE) private readonly handle: QueueHandle) {}
+
+  async onApplicationShutdown(): Promise<void> {
+    await this.handle.close().catch(() => {});
+  }
+}

apps/gateway/src/gc/gc.tokens.ts

@@ -0,0 +1 @@
+export const REDIS = 'REDIS';

apps/gateway/src/gc/session-gc.service.spec.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { Logger } from '@nestjs/common';
+import type { QueueHandle } from '@mosaic/queue';
+import type { LogService } from '@mosaic/log';
+import { SessionGCService } from './session-gc.service.js';
+
+type MockRedis = {
+  keys: ReturnType<typeof vi.fn>;
+  del: ReturnType<typeof vi.fn>;
+};
+
+describe('SessionGCService', () => {
+  let service: SessionGCService;
+  let mockRedis: MockRedis;
+  let mockLogService: { logs: { promoteToWarm: ReturnType<typeof vi.fn> } };
+
+  beforeEach(() => {
+    mockRedis = {
+      keys: vi.fn().mockResolvedValue([]),
+      del: vi.fn().mockResolvedValue(0),
+    };
+
+    mockLogService = {
+      logs: {
+        promoteToWarm: vi.fn().mockResolvedValue(0),
+      },
+    };
+
+    // Suppress logger output in tests
+    vi.spyOn(Logger.prototype, 'log').mockImplementation(() => {});
+
+    service = new SessionGCService(
+      mockRedis as unknown as QueueHandle['redis'],
+      mockLogService as unknown as LogService,
+    );
+  });
+
+  it('collect() deletes Valkey keys for session', async () => {
+    mockRedis.keys.mockResolvedValue(['mosaic:session:abc:system', 'mosaic:session:abc:foo']);
+    const result = await service.collect('abc');
+    expect(mockRedis.del).toHaveBeenCalledWith(
+      'mosaic:session:abc:system',
+      'mosaic:session:abc:foo',
+    );
+    expect(result.cleaned.valkeyKeys).toBe(2);
+  });
+
+  it('collect() with no keys returns empty cleaned valkeyKeys', async () => {
+    mockRedis.keys.mockResolvedValue([]);
+    const result = await service.collect('abc');
+    expect(result.cleaned.valkeyKeys).toBeUndefined();
+  });
+
+  it('collect() returns sessionId in result', async () => {
+    const result = await service.collect('test-session-id');
+    expect(result.sessionId).toBe('test-session-id');
+  });
+
+  it('fullCollect() deletes all session keys', async () => {
+    mockRedis.keys.mockResolvedValue(['mosaic:session:abc:system', 'mosaic:session:xyz:foo']);
+    const result = await service.fullCollect();
+    expect(mockRedis.del).toHaveBeenCalled();
+    expect(result.valkeyKeys).toBe(2);
+  });
+
+  it('fullCollect() with no keys returns 0 valkeyKeys', async () => {
+    mockRedis.keys.mockResolvedValue([]);
+    const result = await service.fullCollect();
+    expect(result.valkeyKeys).toBe(0);
+    expect(mockRedis.del).not.toHaveBeenCalled();
+  });
+
+  it('fullCollect() returns duration', async () => {
+    const result = await service.fullCollect();
+    expect(result.duration).toBeGreaterThanOrEqual(0);
+  });
+
+  it('sweepOrphans() extracts unique session IDs and collects them', async () => {
+    mockRedis.keys.mockResolvedValue([
+      'mosaic:session:abc:system',
+      'mosaic:session:abc:messages',
+      'mosaic:session:xyz:system',
+    ]);
+    mockRedis.del.mockResolvedValue(1);
+
+    const result = await service.sweepOrphans();
+    expect(result.orphanedSessions).toBeGreaterThanOrEqual(0);
+    expect(result.duration).toBeGreaterThanOrEqual(0);
+  });
+
+  it('sweepOrphans() returns empty when no session keys', async () => {
+    mockRedis.keys.mockResolvedValue([]);
+    const result = await service.sweepOrphans();
+    expect(result.orphanedSessions).toBe(0);
+    expect(result.totalCleaned).toHaveLength(0);
+  });
+});

apps/gateway/src/gc/session-gc.service.ts

@@ -0,0 +1,147 @@
+import { Inject, Injectable, Logger, type OnModuleInit } from '@nestjs/common';
+import type { QueueHandle } from '@mosaic/queue';
+import type { LogService } from '@mosaic/log';
+import { LOG_SERVICE } from '../log/log.tokens.js';
+import { REDIS } from './gc.tokens.js';
+
+export interface GCResult {
+  sessionId: string;
+  cleaned: {
+    valkeyKeys?: number;
+    logsDemoted?: number;
+    tempFilesRemoved?: number;
+  };
+}
+
+export interface GCSweepResult {
+  orphanedSessions: number;
+  totalCleaned: GCResult[];
+  duration: number;
+}
+
+export interface FullGCResult {
+  valkeyKeys: number;
+  logsDemoted: number;
+  jobsPurged: number;
+  tempFilesRemoved: number;
+  duration: number;
+}
+
+@Injectable()
+export class SessionGCService implements OnModuleInit {
+  private readonly logger = new Logger(SessionGCService.name);
+
+  constructor(
+    @Inject(REDIS) private readonly redis: QueueHandle['redis'],
+    @Inject(LOG_SERVICE) private readonly logService: LogService,
+  ) {}
+
+  onModuleInit(): void {
+    // Fire-and-forget: run full GC asynchronously so it does not block the
+    // NestJS bootstrap chain.  Cold-start GC typically takes 100–500 ms
+    // depending on Valkey key count; deferring it removes that latency from
+    // the TTFB of the first HTTP request.
+    this.fullCollect()
+      .then((result) => {
+        this.logger.log(
+          `Full GC complete: ${result.valkeyKeys} Valkey keys, ` +
+            `${result.logsDemoted} logs demoted, ` +
+            `${result.jobsPurged} jobs purged, ` +
+            `${result.tempFilesRemoved} temp dirs removed ` +
+            `(${result.duration}ms)`,
+        );
+      })
+      .catch((err: unknown) => {
+        this.logger.error('Cold-start GC failed', err instanceof Error ? err.stack : String(err));
+      });
+  }
+
+  /**
+   * Immediate cleanup for a single session (call from destroySession).
+   */
+  async collect(sessionId: string): Promise<GCResult> {
+    const result: GCResult = { sessionId, cleaned: {} };
+
+    // 1. Valkey: delete all session-scoped keys
+    const pattern = `mosaic:session:${sessionId}:*`;
+    const valkeyKeys = await this.redis.keys(pattern);
+    if (valkeyKeys.length > 0) {
+      await this.redis.del(...valkeyKeys);
+      result.cleaned.valkeyKeys = valkeyKeys.length;
+    }
+
+    // 2. PG: demote hot-tier agent_logs for this session to warm
+    const cutoff = new Date(); // demote all hot logs for this session
+    const logsDemoted = await this.logService.logs.promoteToWarm(cutoff);
+    if (logsDemoted > 0) {
+      result.cleaned.logsDemoted = logsDemoted;
+    }
+
+    return result;
+  }
+
+  /**
+   * Sweep GC — find orphaned artifacts from dead sessions.
+   * User-scoped when userId provided; system-wide when null (admin).
+   */
+  async sweepOrphans(_userId?: string): Promise<GCSweepResult> {
+    const start = Date.now();
+    const cleaned: GCResult[] = [];
+
+    // 1. Find all session-scoped Valkey keys
+    const allSessionKeys = await this.redis.keys('mosaic:session:*');
+
+    // Extract unique session IDs from keys
+    const sessionIds = new Set<string>();
+    for (const key of allSessionKeys) {
+      const match = key.match(/^mosaic:session:([^:]+):/);
+      if (match) sessionIds.add(match[1]!);
+    }
+
+    // 2. For each session ID, collect stale keys
+    for (const sessionId of sessionIds) {
+      const gcResult = await this.collect(sessionId);
+      if (Object.keys(gcResult.cleaned).length > 0) {
+        cleaned.push(gcResult);
+      }
+    }
+
+    return {
+      orphanedSessions: cleaned.length,
+      totalCleaned: cleaned,
+      duration: Date.now() - start,
+    };
+  }
+
+  /**
+   * Full GC — aggressive collection for cold start.
+   * Assumes no sessions survived the restart.
+   */
+  async fullCollect(): Promise<FullGCResult> {
+    const start = Date.now();
+
+    // 1. Valkey: delete ALL session-scoped keys
+    const sessionKeys = await this.redis.keys('mosaic:session:*');
+    if (sessionKeys.length > 0) {
+      await this.redis.del(...sessionKeys);
+    }
+
+    // 2. NOTE: channel keys are NOT collected on cold start
+    //    (discord/telegram plugins may reconnect and resume)
+
+    // 3. PG: demote stale hot-tier logs older than 24h to warm
+    const hotCutoff = new Date(Date.now() - 24 * 60 * 60 * 1000);
+    const logsDemoted = await this.logService.logs.promoteToWarm(hotCutoff);
+
+    // 4. No summarization job purge API available yet
+    const jobsPurged = 0;
+
+    return {
+      valkeyKeys: sessionKeys.length,
+      logsDemoted,
+      jobsPurged,
+      tempFilesRemoved: 0,
+      duration: Date.now() - start,
+    };
+  }
+}

apps/gateway/src/log/cron.service.ts

@@ -7,17 +7,22 @@ import {
 } from '@nestjs/common';
 import cron from 'node-cron';
 import { SummarizationService } from './summarization.service.js';
+import { SessionGCService } from '../gc/session-gc.service.js';
 
 @Injectable()
 export class CronService implements OnModuleInit, OnModuleDestroy {
   private readonly logger = new Logger(CronService.name);
   private readonly tasks: cron.ScheduledTask[] = [];
 
-  constructor(@Inject(SummarizationService) private readonly summarization: SummarizationService) {}
+  constructor(
+    @Inject(SummarizationService) private readonly summarization: SummarizationService,
+    @Inject(SessionGCService) private readonly sessionGC: SessionGCService,
+  ) {}
 
   onModuleInit(): void {
     const summarizationSchedule = process.env['SUMMARIZATION_CRON'] ?? '0 */6 * * *'; // every 6 hours
     const tierManagementSchedule = process.env['TIER_MANAGEMENT_CRON'] ?? '0 3 * * *'; // daily at 3am
+    const gcSchedule = process.env['SESSION_GC_CRON'] ?? '0 4 * * *'; // daily at 4am
 
     this.tasks.push(
       cron.schedule(summarizationSchedule, () => {
@@ -35,8 +40,16 @@ export class CronService implements OnModuleInit, OnModuleDestroy {
       }),
     );
 
+    this.tasks.push(
+      cron.schedule(gcSchedule, () => {
+        this.sessionGC.sweepOrphans().catch((err) => {
+          this.logger.error(`Session GC sweep failed: ${err}`);
+        });
+      }),
+    );
+
     this.logger.log(
-      `Cron scheduled: summarization="${summarizationSchedule}", tier="${tierManagementSchedule}"`,
+      `Cron scheduled: summarization="${summarizationSchedule}", tier="${tierManagementSchedule}", gc="${gcSchedule}"`,
     );
   }
 

apps/gateway/src/log/log.module.ts

@@ -6,9 +6,11 @@ import { LOG_SERVICE } from './log.tokens.js';
 import { LogController } from './log.controller.js';
 import { SummarizationService } from './summarization.service.js';
 import { CronService } from './cron.service.js';
+import { GCModule } from '../gc/gc.module.js';
 
 @Global()
 @Module({
+  imports: [GCModule],
   providers: [
     {
       provide: LOG_SERVICE,

apps/gateway/src/main.ts

@@ -11,6 +11,7 @@ import { NestFactory } from '@nestjs/core';
 import { Logger, ValidationPipe } from '@nestjs/common';
 import { FastifyAdapter, type NestFastifyApplication } from '@nestjs/platform-fastify';
 import helmet from '@fastify/helmet';
+import { listSsoStartupWarnings } from '@mosaic/auth';
 import { AppModule } from './app.module.js';
 import { mountAuthHandler } from './auth/auth.controller.js';
 import { mountMcpHandler } from './mcp/mcp.controller.js';
@@ -23,13 +24,8 @@ async function bootstrap(): Promise<void> {
     throw new Error('BETTER_AUTH_SECRET is required');
   }
 
-  if (
+  for (const warning of listSsoStartupWarnings()) {
-    process.env['AUTHENTIK_CLIENT_ID'] &&
+    logger.warn(warning);
-    (!process.env['AUTHENTIK_CLIENT_SECRET'] || !process.env['AUTHENTIK_ISSUER'])
-  ) {
-    console.warn(
-      '[warn] AUTHENTIK_CLIENT_ID is set but AUTHENTIK_CLIENT_SECRET or AUTHENTIK_ISSUER is missing — Authentik SSO will not work',
-    );
   }
 
   const app = await NestFactory.create<NestFastifyApplication>(
@@ -40,6 +36,7 @@ async function bootstrap(): Promise<void> {
   app.enableCors({
     origin: process.env['GATEWAY_CORS_ORIGIN'] ?? 'http://localhost:3000',
     credentials: true,
+    methods: ['GET', 'HEAD', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
   });
 
   await app.register(helmet as never, { contentSecurityPolicy: false });

apps/gateway/src/missions/missions.controller.ts

@@ -2,7 +2,6 @@ import {
   Body,
   Controller,
   Delete,
-  ForbiddenException,
   Get,
   HttpCode,
   HttpStatus,
@@ -17,33 +16,42 @@ import type { Brain } from '@mosaic/brain';
 import { BRAIN } from '../brain/brain.tokens.js';
 import { AuthGuard } from '../auth/auth.guard.js';
 import { CurrentUser } from '../auth/current-user.decorator.js';
-import { assertOwner } from '../auth/resource-ownership.js';
+import {
-import { CreateMissionDto, UpdateMissionDto } from './missions.dto.js';
+  CreateMissionDto,
+  UpdateMissionDto,
+  CreateMissionTaskDto,
+  UpdateMissionTaskDto,
+} from './missions.dto.js';
 
 @Controller('api/missions')
 @UseGuards(AuthGuard)
 export class MissionsController {
   constructor(@Inject(BRAIN) private readonly brain: Brain) {}
 
+  // ── Missions CRUD (user-scoped) ──
+
   @Get()
-  async list() {
+  async list(@CurrentUser() user: { id: string }) {
-    return this.brain.missions.findAll();
+    return this.brain.missions.findAllByUser(user.id);
   }
 
   @Get(':id')
   async findOne(@Param('id') id: string, @CurrentUser() user: { id: string }) {
-    return this.getOwnedMission(id, user.id);
+    const mission = await this.brain.missions.findByIdAndUser(id, user.id);
+    if (!mission) throw new NotFoundException('Mission not found');
+    return mission;
   }
 
   @Post()
   async create(@Body() dto: CreateMissionDto, @CurrentUser() user: { id: string }) {
-    if (dto.projectId) {
-      await this.getOwnedProject(dto.projectId, user.id, 'Mission');
-    }
     return this.brain.missions.create({
       name: dto.name,
       description: dto.description,
       projectId: dto.projectId,
+      userId: user.id,
+      phase: dto.phase,
+      milestones: dto.milestones,
+      config: dto.config,
       status: dto.status,
     });
   }
@@ -54,10 +62,8 @@ export class MissionsController {
     @Body() dto: UpdateMissionDto,
     @CurrentUser() user: { id: string },
   ) {
-    await this.getOwnedMission(id, user.id);
+    const existing = await this.brain.missions.findByIdAndUser(id, user.id);
-    if (dto.projectId) {
+    if (!existing) throw new NotFoundException('Mission not found');
-      await this.getOwnedProject(dto.projectId, user.id, 'Mission');
-    }
     const mission = await this.brain.missions.update(id, dto);
     if (!mission) throw new NotFoundException('Mission not found');
     return mission;
@@ -66,33 +72,81 @@ export class MissionsController {
   @Delete(':id')
   @HttpCode(HttpStatus.NO_CONTENT)
   async remove(@Param('id') id: string, @CurrentUser() user: { id: string }) {
-    await this.getOwnedMission(id, user.id);
+    const existing = await this.brain.missions.findByIdAndUser(id, user.id);
+    if (!existing) throw new NotFoundException('Mission not found');
     const deleted = await this.brain.missions.remove(id);
     if (!deleted) throw new NotFoundException('Mission not found');
   }
 
-  private async getOwnedMission(id: string, userId: string) {
+  // ── Mission Tasks sub-routes ──
-    const mission = await this.brain.missions.findById(id);
+
+  @Get(':missionId/tasks')
+  async listTasks(@Param('missionId') missionId: string, @CurrentUser() user: { id: string }) {
+    const mission = await this.brain.missions.findByIdAndUser(missionId, user.id);
     if (!mission) throw new NotFoundException('Mission not found');
-    await this.getOwnedProject(mission.projectId, userId, 'Mission');
+    return this.brain.missionTasks.findByMissionAndUser(missionId, user.id);
-    return mission;
   }
 
-  private async getOwnedProject(
+  @Get(':missionId/tasks/:taskId')
-    projectId: string | null | undefined,
+  async getTask(
-    userId: string,
+    @Param('missionId') missionId: string,
-    resourceName: string,
+    @Param('taskId') taskId: string,
+    @CurrentUser() user: { id: string },
   ) {
-    if (!projectId) {
+    const mission = await this.brain.missions.findByIdAndUser(missionId, user.id);
-      throw new ForbiddenException(`${resourceName} does not belong to the current user`);
+    if (!mission) throw new NotFoundException('Mission not found');
-    }
+    const task = await this.brain.missionTasks.findByIdAndUser(taskId, user.id);
+    if (!task) throw new NotFoundException('Mission task not found');
+    return task;
+  }
 
-    const project = await this.brain.projects.findById(projectId);
+  @Post(':missionId/tasks')
-    if (!project) {
+  async createTask(
-      throw new ForbiddenException(`${resourceName} does not belong to the current user`);
+    @Param('missionId') missionId: string,
-    }
+    @Body() dto: CreateMissionTaskDto,
+    @CurrentUser() user: { id: string },
+  ) {
+    const mission = await this.brain.missions.findByIdAndUser(missionId, user.id);
+    if (!mission) throw new NotFoundException('Mission not found');
+    return this.brain.missionTasks.create({
+      missionId,
+      taskId: dto.taskId,
+      userId: user.id,
+      status: dto.status,
+      description: dto.description,
+      notes: dto.notes,
+      pr: dto.pr,
+    });
+  }
 
-    assertOwner(project.ownerId, userId, resourceName);
+  @Patch(':missionId/tasks/:taskId')
-    return project;
+  async updateTask(
+    @Param('missionId') missionId: string,
+    @Param('taskId') taskId: string,
+    @Body() dto: UpdateMissionTaskDto,
+    @CurrentUser() user: { id: string },
+  ) {
+    const mission = await this.brain.missions.findByIdAndUser(missionId, user.id);
+    if (!mission) throw new NotFoundException('Mission not found');
+    const existing = await this.brain.missionTasks.findByIdAndUser(taskId, user.id);
+    if (!existing) throw new NotFoundException('Mission task not found');
+    const updated = await this.brain.missionTasks.update(taskId, dto);
+    if (!updated) throw new NotFoundException('Mission task not found');
+    return updated;
+  }
+
+  @Delete(':missionId/tasks/:taskId')
+  @HttpCode(HttpStatus.NO_CONTENT)
+  async removeTask(
+    @Param('missionId') missionId: string,
+    @Param('taskId') taskId: string,
+    @CurrentUser() user: { id: string },
+  ) {
+    const mission = await this.brain.missions.findByIdAndUser(missionId, user.id);
+    if (!mission) throw new NotFoundException('Mission not found');
+    const existing = await this.brain.missionTasks.findByIdAndUser(taskId, user.id);
+    if (!existing) throw new NotFoundException('Mission task not found');
+    const deleted = await this.brain.missionTasks.remove(taskId);
+    if (!deleted) throw new NotFoundException('Mission task not found');
   }
 }

apps/gateway/src/missions/missions.dto.ts

@@ -1,6 +1,7 @@
-import { IsIn, IsObject, IsOptional, IsString, IsUUID, MaxLength } from 'class-validator';
+import { IsArray, IsIn, IsObject, IsOptional, IsString, IsUUID, MaxLength } from 'class-validator';
 
 const missionStatuses = ['planning', 'active', 'paused', 'completed', 'failed'] as const;
+const taskStatuses = ['not-started', 'in-progress', 'blocked', 'done', 'cancelled'] as const;
 
 export class CreateMissionDto {
   @IsString()
@@ -19,6 +20,19 @@ export class CreateMissionDto {
   @IsOptional()
   @IsIn(missionStatuses)
   status?: 'planning' | 'active' | 'paused' | 'completed' | 'failed';
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  phase?: string;
+
+  @IsOptional()
+  @IsArray()
+  milestones?: Record<string, unknown>[];
+
+  @IsOptional()
+  @IsObject()
+  config?: Record<string, unknown>;
 }
 
 export class UpdateMissionDto {
@@ -40,7 +54,70 @@ export class UpdateMissionDto {
   @IsIn(missionStatuses)
   status?: 'planning' | 'active' | 'paused' | 'completed' | 'failed';
 
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  phase?: string;
+
+  @IsOptional()
+  @IsArray()
+  milestones?: Record<string, unknown>[];
+
+  @IsOptional()
+  @IsObject()
+  config?: Record<string, unknown>;
+
   @IsOptional()
   @IsObject()
   metadata?: Record<string, unknown> | null;
 }
+
+export class CreateMissionTaskDto {
+  @IsOptional()
+  @IsUUID()
+  taskId?: string;
+
+  @IsOptional()
+  @IsIn(taskStatuses)
+  status?: 'not-started' | 'in-progress' | 'blocked' | 'done' | 'cancelled';
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(10_000)
+  description?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(10_000)
+  notes?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  pr?: string;
+}
+
+export class UpdateMissionTaskDto {
+  @IsOptional()
+  @IsUUID()
+  taskId?: string;
+
+  @IsOptional()
+  @IsIn(taskStatuses)
+  status?: 'not-started' | 'in-progress' | 'blocked' | 'done' | 'cancelled';
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(10_000)
+  description?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(10_000)
+  notes?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(255)
+  pr?: string;
+}

apps/gateway/src/plugin/plugin.interface.ts

@@ -2,4 +2,10 @@ export interface IChannelPlugin {
   readonly name: string;
   start(): Promise<void>;
   stop(): Promise<void>;
+  /** Called when a new project is bootstrapped. Return channelId if a channel was created. */
+  onProjectCreated?(project: {
+    id: string;
+    name: string;
+    description?: string;
+  }): Promise<{ channelId: string } | null>;
 }

apps/gateway/src/plugin/plugin.module.ts

@@ -24,6 +24,14 @@ class DiscordChannelPluginAdapter implements IChannelPlugin {
   async stop(): Promise<void> {
     await this.plugin.stop();
   }
+
+  async onProjectCreated(project: {
+    id: string;
+    name: string;
+    description?: string;
+  }): Promise<{ channelId: string } | null> {
+    return this.plugin.createProjectChannel(project);
+  }
 }
 
 class TelegramChannelPluginAdapter implements IChannelPlugin {

apps/gateway/src/preferences/preferences.controller.ts

@@ -0,0 +1,44 @@
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  HttpCode,
+  HttpStatus,
+  Inject,
+  Param,
+  Post,
+  UseGuards,
+} from '@nestjs/common';
+import { PreferencesService } from './preferences.service.js';
+import { AuthGuard } from '../auth/auth.guard.js';
+import { CurrentUser } from '../auth/current-user.decorator.js';
+
+@Controller('api/preferences')
+@UseGuards(AuthGuard)
+export class PreferencesController {
+  constructor(@Inject(PreferencesService) private readonly preferences: PreferencesService) {}
+
+  @Get()
+  async show(@CurrentUser() user: { id: string }): Promise<Record<string, unknown>> {
+    return this.preferences.getEffective(user.id);
+  }
+
+  @Post()
+  @HttpCode(HttpStatus.OK)
+  async set(
+    @CurrentUser() user: { id: string },
+    @Body() body: { key: string; value: unknown },
+  ): Promise<{ success: boolean; message: string }> {
+    return this.preferences.set(user.id, body.key, body.value);
+  }
+
+  @Delete(':key')
+  @HttpCode(HttpStatus.OK)
+  async reset(
+    @CurrentUser() user: { id: string },
+    @Param('key') key: string,
+  ): Promise<{ success: boolean; message: string }> {
+    return this.preferences.reset(user.id, key);
+  }
+}

apps/gateway/src/preferences/preferences.module.ts

@@ -0,0 +1,12 @@
+import { Global, Module } from '@nestjs/common';
+import { PreferencesService } from './preferences.service.js';
+import { PreferencesController } from './preferences.controller.js';
+import { SystemOverrideService } from './system-override.service.js';
+
+@Global()
+@Module({
+  controllers: [PreferencesController],
+  providers: [PreferencesService, SystemOverrideService],
+  exports: [PreferencesService, SystemOverrideService],
+})
+export class PreferencesModule {}

apps/gateway/src/preferences/preferences.service.spec.ts

@@ -0,0 +1,152 @@
+import { describe, it, expect, vi } from 'vitest';
+import { PreferencesService, PLATFORM_DEFAULTS, IMMUTABLE_KEYS } from './preferences.service.js';
+import type { Db } from '@mosaic/db';
+
+/**
+ * Build a mock Drizzle DB where the select chain supports:
+ *   db.select().from().where()            → resolves to `listRows`
+ *   db.insert().values().onConflictDoUpdate() → resolves to []
+ */
+function makeMockDb(listRows: Array<{ key: string; value: unknown }> = []): Db {
+  const chainWithLimit = {
+    limit: vi.fn().mockResolvedValue([]),
+    then: (resolve: (v: typeof listRows) => unknown) => Promise.resolve(listRows).then(resolve),
+  };
+  const selectFrom = {
+    from: vi.fn().mockReturnThis(),
+    where: vi.fn().mockReturnValue(chainWithLimit),
+  };
+  const deleteResult = {
+    where: vi.fn().mockResolvedValue([]),
+  };
+  // Single-round-trip upsert chain: insert().values().onConflictDoUpdate()
+  const insertResult = {
+    values: vi.fn().mockReturnThis(),
+    onConflictDoUpdate: vi.fn().mockResolvedValue([]),
+  };
+
+  return {
+    select: vi.fn().mockReturnValue(selectFrom),
+    delete: vi.fn().mockReturnValue(deleteResult),
+    insert: vi.fn().mockReturnValue(insertResult),
+  } as unknown as Db;
+}
+
+describe('PreferencesService', () => {
+  describe('getEffective', () => {
+    it('returns platform defaults when user has no overrides', async () => {
+      const db = makeMockDb([]);
+      const service = new PreferencesService(db);
+      const result = await service.getEffective('user-1');
+
+      expect(result['agent.thinkingLevel']).toBe('auto');
+      expect(result['agent.streamingEnabled']).toBe(true);
+      expect(result['session.autoCompactEnabled']).toBe(true);
+      expect(result['session.autoCompactThreshold']).toBe(0.8);
+    });
+
+    it('applies user overrides for mutable keys', async () => {
+      const db = makeMockDb([
+        { key: 'agent.thinkingLevel', value: 'high' },
+        { key: 'response.language', value: 'es' },
+      ]);
+
+      const service = new PreferencesService(db);
+      const result = await service.getEffective('user-1');
+
+      expect(result['agent.thinkingLevel']).toBe('high');
+      expect(result['response.language']).toBe('es');
+    });
+
+    it('ignores user overrides for immutable keys — enforcement always wins', async () => {
+      const db = makeMockDb([
+        { key: 'limits.maxThinkingLevel', value: 'high' },
+        { key: 'limits.rateLimit', value: 9999 },
+      ]);
+
+      const service = new PreferencesService(db);
+      const result = await service.getEffective('user-1');
+
+      // Should still be null (platform default), not the user-supplied values
+      expect(result['limits.maxThinkingLevel']).toBeNull();
+      expect(result['limits.rateLimit']).toBeNull();
+    });
+  });
+
+  describe('set', () => {
+    it('returns error when attempting to override an immutable key', async () => {
+      const db = makeMockDb();
+      const service = new PreferencesService(db);
+
+      const result = await service.set('user-1', 'limits.maxThinkingLevel', 'high');
+      expect(result.success).toBe(false);
+      expect(result.message).toContain('platform enforcement');
+    });
+
+    it('returns error when attempting to override limits.rateLimit', async () => {
+      const db = makeMockDb();
+      const service = new PreferencesService(db);
+
+      const result = await service.set('user-1', 'limits.rateLimit', 100);
+      expect(result.success).toBe(false);
+      expect(result.message).toContain('platform enforcement');
+    });
+
+    it('upserts a mutable preference and returns success', async () => {
+      // Single-round-trip INSERT … ON CONFLICT DO UPDATE path.
+      const db = makeMockDb([]);
+      const service = new PreferencesService(db);
+      const result = await service.set('user-1', 'agent.thinkingLevel', 'high');
+      expect(result.success).toBe(true);
+      expect(result.message).toContain('"agent.thinkingLevel"');
+    });
+  });
+
+  describe('reset', () => {
+    it('returns error when attempting to reset an immutable key', async () => {
+      const db = makeMockDb();
+      const service = new PreferencesService(db);
+
+      const result = await service.reset('user-1', 'limits.rateLimit');
+      expect(result.success).toBe(false);
+      expect(result.message).toContain('platform enforcement');
+    });
+
+    it('deletes user override and returns default value in message', async () => {
+      const db = makeMockDb();
+      const service = new PreferencesService(db);
+      const result = await service.reset('user-1', 'agent.thinkingLevel');
+
+      expect(result.success).toBe(true);
+      expect(result.message).toContain('"auto"'); // platform default for agent.thinkingLevel
+    });
+  });
+
+  describe('IMMUTABLE_KEYS', () => {
+    it('contains only the enforcement keys', () => {
+      expect(IMMUTABLE_KEYS.has('limits.maxThinkingLevel')).toBe(true);
+      expect(IMMUTABLE_KEYS.has('limits.rateLimit')).toBe(true);
+      expect(IMMUTABLE_KEYS.has('agent.thinkingLevel')).toBe(false);
+    });
+  });
+
+  describe('PLATFORM_DEFAULTS', () => {
+    it('has all expected keys', () => {
+      const expectedKeys = [
+        'agent.defaultModel',
+        'agent.thinkingLevel',
+        'agent.streamingEnabled',
+        'response.language',
+        'response.codeAnnotations',
+        'safety.confirmDestructiveTools',
+        'session.autoCompactThreshold',
+        'session.autoCompactEnabled',
+        'limits.maxThinkingLevel',
+        'limits.rateLimit',
+      ];
+      for (const key of expectedKeys) {
+        expect(Object.prototype.hasOwnProperty.call(PLATFORM_DEFAULTS, key)).toBe(true);
+      }
+    });
+  });
+});

apps/gateway/src/preferences/preferences.service.ts

@@ -0,0 +1,118 @@
+import { Inject, Injectable, Logger } from '@nestjs/common';
+import { eq, and, sql, type Db, preferences as preferencesTable } from '@mosaic/db';
+import { DB } from '../database/database.module.js';
+
+export const PLATFORM_DEFAULTS: Record<string, unknown> = {
+  'agent.defaultModel': null,
+  'agent.thinkingLevel': 'auto',
+  'agent.streamingEnabled': true,
+  'response.language': 'auto',
+  'response.codeAnnotations': true,
+  'safety.confirmDestructiveTools': true,
+  'session.autoCompactThreshold': 0.8,
+  'session.autoCompactEnabled': true,
+  'limits.maxThinkingLevel': null,
+  'limits.rateLimit': null,
+};
+
+export const IMMUTABLE_KEYS = new Set<string>(['limits.maxThinkingLevel', 'limits.rateLimit']);
+
+@Injectable()
+export class PreferencesService {
+  private readonly logger = new Logger(PreferencesService.name);
+
+  constructor(@Inject(DB) private readonly db: Db) {}
+
+  /**
+   * Returns the effective preference set for a user:
+   * Platform defaults → user overrides (mutable keys only) → enforcements re-applied last
+   */
+  async getEffective(userId: string): Promise<Record<string, unknown>> {
+    const userPrefs = await this.getUserPrefs(userId);
+    const result: Record<string, unknown> = { ...PLATFORM_DEFAULTS };
+
+    for (const [key, value] of Object.entries(userPrefs)) {
+      if (!IMMUTABLE_KEYS.has(key)) {
+        result[key] = value;
+      }
+    }
+
+    // Re-apply immutable keys (enforcements always win)
+    for (const key of IMMUTABLE_KEYS) {
+      result[key] = PLATFORM_DEFAULTS[key];
+    }
+
+    return result;
+  }
+
+  async set(
+    userId: string,
+    key: string,
+    value: unknown,
+  ): Promise<{ success: boolean; message: string }> {
+    if (IMMUTABLE_KEYS.has(key)) {
+      return {
+        success: false,
+        message: `Cannot override "${key}" — this is a platform enforcement. Contact your admin.`,
+      };
+    }
+
+    await this.upsertPref(userId, key, value);
+    return { success: true, message: `Preference "${key}" set to ${JSON.stringify(value)}.` };
+  }
+
+  async reset(userId: string, key: string): Promise<{ success: boolean; message: string }> {
+    if (IMMUTABLE_KEYS.has(key)) {
+      return { success: false, message: `Cannot reset "${key}" — it is a platform enforcement.` };
+    }
+
+    await this.deletePref(userId, key);
+    const defaultVal = PLATFORM_DEFAULTS[key];
+    return {
+      success: true,
+      message: `Preference "${key}" reset to default: ${JSON.stringify(defaultVal)}.`,
+    };
+  }
+
+  private async getUserPrefs(userId: string): Promise<Record<string, unknown>> {
+    const rows = await this.db
+      .select({ key: preferencesTable.key, value: preferencesTable.value })
+      .from(preferencesTable)
+      .where(eq(preferencesTable.userId, userId));
+
+    const result: Record<string, unknown> = {};
+    for (const row of rows) {
+      result[row.key] = row.value;
+    }
+    return result;
+  }
+
+  private async upsertPref(userId: string, key: string, value: unknown): Promise<void> {
+    // Single-round-trip upsert using INSERT … ON CONFLICT DO UPDATE.
+    // Previously this was two queries (SELECT + INSERT/UPDATE), which doubled
+    // the DB round-trips and introduced a TOCTOU window under concurrent writes.
+    await this.db
+      .insert(preferencesTable)
+      .values({
+        userId,
+        key,
+        value: value as never,
+        mutable: true,
+      })
+      .onConflictDoUpdate({
+        target: [preferencesTable.userId, preferencesTable.key],
+        set: {
+          value: sql`excluded.value`,
+          updatedAt: sql`now()`,
+        },
+      });
+    this.logger.debug(`Upserted preference "${key}" for user ${userId}`);
+  }
+
+  private async deletePref(userId: string, key: string): Promise<void> {
+    await this.db
+      .delete(preferencesTable)
+      .where(and(eq(preferencesTable.userId, userId), eq(preferencesTable.key, key)));
+    this.logger.debug(`Deleted preference "${key}" for user ${userId}`);
+  }
+}

apps/gateway/src/preferences/system-override.service.ts

@@ -0,0 +1,131 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { createQueue, type QueueHandle } from '@mosaic/queue';
+
+const SESSION_SYSTEM_KEY = (sessionId: string) => `mosaic:session:${sessionId}:system`;
+const SESSION_SYSTEM_FRAGMENTS_KEY = (sessionId: string) =>
+  `mosaic:session:${sessionId}:system:fragments`;
+const SYSTEM_OVERRIDE_TTL_SECONDS = 604800; // 7 days
+
+interface OverrideFragment {
+  text: string;
+  addedAt: number;
+}
+
+@Injectable()
+export class SystemOverrideService {
+  private readonly logger = new Logger(SystemOverrideService.name);
+  private readonly handle: QueueHandle;
+
+  constructor() {
+    this.handle = createQueue();
+  }
+
+  async set(sessionId: string, override: string): Promise<void> {
+    // Load existing fragments
+    const existing = await this.handle.redis.get(SESSION_SYSTEM_FRAGMENTS_KEY(sessionId));
+    const fragments: OverrideFragment[] = existing
+      ? (JSON.parse(existing) as OverrideFragment[])
+      : [];
+
+    // Append new fragment
+    fragments.push({ text: override, addedAt: Date.now() });
+
+    // Condense fragments into one coherent override
+    const texts = fragments.map((f) => f.text);
+    const condensed = await this.condenseOverrides(texts);
+
+    // Store both: fragments array and condensed result
+    const pipeline = this.handle.redis.pipeline();
+    pipeline.setex(
+      SESSION_SYSTEM_FRAGMENTS_KEY(sessionId),
+      SYSTEM_OVERRIDE_TTL_SECONDS,
+      JSON.stringify(fragments),
+    );
+    pipeline.setex(SESSION_SYSTEM_KEY(sessionId), SYSTEM_OVERRIDE_TTL_SECONDS, condensed);
+    await pipeline.exec();
+
+    this.logger.debug(
+      `Set system override for session ${sessionId} (${fragments.length} fragment(s), TTL=${SYSTEM_OVERRIDE_TTL_SECONDS}s)`,
+    );
+  }
+
+  async get(sessionId: string): Promise<string | null> {
+    return this.handle.redis.get(SESSION_SYSTEM_KEY(sessionId));
+  }
+
+  async renew(sessionId: string): Promise<void> {
+    const pipeline = this.handle.redis.pipeline();
+    pipeline.expire(SESSION_SYSTEM_KEY(sessionId), SYSTEM_OVERRIDE_TTL_SECONDS);
+    pipeline.expire(SESSION_SYSTEM_FRAGMENTS_KEY(sessionId), SYSTEM_OVERRIDE_TTL_SECONDS);
+    await pipeline.exec();
+  }
+
+  async clear(sessionId: string): Promise<void> {
+    await this.handle.redis.del(
+      SESSION_SYSTEM_KEY(sessionId),
+      SESSION_SYSTEM_FRAGMENTS_KEY(sessionId),
+    );
+    this.logger.debug(`Cleared system override for session ${sessionId}`);
+  }
+
+  /**
+   * Merge an array of override fragments into one coherent string.
+   * If only one fragment exists, returns it as-is.
+   * For multiple fragments, calls Haiku to produce a merged instruction.
+   * Falls back to newline concatenation if the LLM call fails.
+   */
+  async condenseOverrides(fragments: string[]): Promise<string> {
+    if (fragments.length === 0) return '';
+    if (fragments.length === 1) return fragments[0]!;
+
+    const numbered = fragments.map((f, i) => `${i + 1}. ${f}`).join('\n');
+    const prompt =
+      `Merge these system prompt instructions into one coherent paragraph. ` +
+      `If instructions conflict, favor the most recently added (last in the list). ` +
+      `Be concise — output only the merged instruction, nothing else.\n\n` +
+      `Instructions (oldest first):\n${numbered}`;
+
+    const apiKey = process.env['ANTHROPIC_API_KEY'];
+    if (!apiKey) {
+      this.logger.warn('ANTHROPIC_API_KEY not set — falling back to newline concatenation');
+      return fragments.join('\n');
+    }
+
+    try {
+      const response = await fetch('https://api.anthropic.com/v1/messages', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-api-key': apiKey,
+          'anthropic-version': '2023-06-01',
+        },
+        body: JSON.stringify({
+          model: 'claude-haiku-4-5-20251001',
+          max_tokens: 1024,
+          messages: [{ role: 'user', content: prompt }],
+        }),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Anthropic API error ${response.status}: ${errorText}`);
+      }
+
+      const data = (await response.json()) as {
+        content: Array<{ type: string; text: string }>;
+      };
+
+      const textBlock = data.content.find((c) => c.type === 'text');
+      if (!textBlock) {
+        throw new Error('No text block in Anthropic response');
+      }
+
+      return textBlock.text.trim();
+    } catch (err) {
+      this.logger.error(
+        `Condensation LLM call failed — falling back to newline concatenation: ${String(err)}`,
+      );
+      return fragments.join('\n');
+    }
+  }
+}

apps/gateway/src/projects/projects.controller.ts

@@ -2,6 +2,7 @@ import {
   Body,
   Controller,
   Delete,
+  ForbiddenException,
   Get,
   HttpCode,
   HttpStatus,
@@ -16,22 +17,25 @@ import type { Brain } from '@mosaic/brain';
 import { BRAIN } from '../brain/brain.tokens.js';
 import { AuthGuard } from '../auth/auth.guard.js';
 import { CurrentUser } from '../auth/current-user.decorator.js';
-import { assertOwner } from '../auth/resource-ownership.js';
+import { TeamsService } from '../workspace/teams.service.js';
 import { CreateProjectDto, UpdateProjectDto } from './projects.dto.js';
 
 @Controller('api/projects')
 @UseGuards(AuthGuard)
 export class ProjectsController {
-  constructor(@Inject(BRAIN) private readonly brain: Brain) {}
+  constructor(
+    @Inject(BRAIN) private readonly brain: Brain,
+    private readonly teamsService: TeamsService,
+  ) {}
 
   @Get()
-  async list() {
+  async list(@CurrentUser() user: { id: string }) {
-    return this.brain.projects.findAll();
+    return this.brain.projects.findAllForUser(user.id);
   }
 
   @Get(':id')
   async findOne(@Param('id') id: string, @CurrentUser() user: { id: string }) {
-    return this.getOwnedProject(id, user.id);
+    return this.getAccessibleProject(id, user.id);
   }
 
   @Post()
@@ -50,7 +54,7 @@ export class ProjectsController {
     @Body() dto: UpdateProjectDto,
     @CurrentUser() user: { id: string },
   ) {
-    await this.getOwnedProject(id, user.id);
+    await this.getAccessibleProject(id, user.id);
     const project = await this.brain.projects.update(id, dto);
     if (!project) throw new NotFoundException('Project not found');
     return project;
@@ -59,15 +63,21 @@ export class ProjectsController {
   @Delete(':id')
   @HttpCode(HttpStatus.NO_CONTENT)
   async remove(@Param('id') id: string, @CurrentUser() user: { id: string }) {
-    await this.getOwnedProject(id, user.id);
+    await this.getAccessibleProject(id, user.id);
     const deleted = await this.brain.projects.remove(id);
     if (!deleted) throw new NotFoundException('Project not found');
   }
 
-  private async getOwnedProject(id: string, userId: string) {
+  /**
+   * Verify the requesting user can access the project — either as the direct
+   * owner or as a member of the owning team.  Throws NotFoundException when the
+   * project does not exist and ForbiddenException when the user lacks access.
+   */
+  private async getAccessibleProject(id: string, userId: string) {
     const project = await this.brain.projects.findById(id);
     if (!project) throw new NotFoundException('Project not found');
-    assertOwner(project.ownerId, userId, 'Project');
+    const canAccess = await this.teamsService.canAccessProject(userId, id);
+    if (!canAccess) throw new ForbiddenException('Project does not belong to the current user');
     return project;
   }
 }

apps/gateway/src/projects/projects.module.ts

@@ -1,7 +1,9 @@
 import { Module } from '@nestjs/common';
 import { ProjectsController } from './projects.controller.js';
+import { WorkspaceModule } from '../workspace/workspace.module.js';
 
 @Module({
+  imports: [WorkspaceModule],
   controllers: [ProjectsController],
 })
 export class ProjectsModule {}

apps/gateway/src/reload/mosaic-plugin.interface.ts

@@ -0,0 +1,20 @@
+export interface MosaicPlugin {
+  /** Called when the plugin is loaded/reloaded */
+  onLoad(): Promise<void>;
+
+  /** Called before the plugin is unloaded during reload */
+  onUnload(): Promise<void>;
+
+  /** Plugin identifier for registry */
+  readonly pluginName: string;
+}
+
+export function isMosaicPlugin(obj: unknown): obj is MosaicPlugin {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    typeof (obj as MosaicPlugin).onLoad === 'function' &&
+    typeof (obj as MosaicPlugin).onUnload === 'function' &&
+    typeof (obj as MosaicPlugin).pluginName === 'string'
+  );
+}

apps/gateway/src/reload/reload.controller.ts

@@ -0,0 +1,22 @@
+import { Controller, HttpCode, HttpStatus, Inject, Post, UseGuards } from '@nestjs/common';
+import type { SystemReloadPayload } from '@mosaic/types';
+import { AdminGuard } from '../admin/admin.guard.js';
+import { ChatGateway } from '../chat/chat.gateway.js';
+import { ReloadService } from './reload.service.js';
+
+@Controller('api/admin')
+@UseGuards(AdminGuard)
+export class ReloadController {
+  constructor(
+    @Inject(ReloadService) private readonly reloadService: ReloadService,
+    @Inject(ChatGateway) private readonly chatGateway: ChatGateway,
+  ) {}
+
+  @Post('reload')
+  @HttpCode(HttpStatus.OK)
+  async triggerReload(): Promise<SystemReloadPayload> {
+    const result = await this.reloadService.reload('rest');
+    this.chatGateway.broadcastReload(result);
+    return result;
+  }
+}

apps/gateway/src/reload/reload.module.ts

@@ -0,0 +1,14 @@
+import { forwardRef, Module } from '@nestjs/common';
+import { AdminGuard } from '../admin/admin.guard.js';
+import { ChatModule } from '../chat/chat.module.js';
+import { CommandsModule } from '../commands/commands.module.js';
+import { ReloadController } from './reload.controller.js';
+import { ReloadService } from './reload.service.js';
+
+@Module({
+  imports: [forwardRef(() => CommandsModule), forwardRef(() => ChatModule)],
+  controllers: [ReloadController],
+  providers: [ReloadService, AdminGuard],
+  exports: [ReloadService],
+})
+export class ReloadModule {}

apps/gateway/src/reload/reload.service.spec.ts

@@ -0,0 +1,106 @@
+import { describe, expect, it, vi } from 'vitest';
+import { ReloadService } from './reload.service.js';
+
+function createMockCommandRegistry() {
+  return {
+    getManifest: vi.fn().mockReturnValue({
+      version: 1,
+      commands: [],
+      skills: [],
+    }),
+  };
+}
+
+function createService() {
+  const registry = createMockCommandRegistry();
+  const service = new ReloadService(registry as never);
+  return { service, registry };
+}
+
+describe('ReloadService', () => {
+  it('reload() calls onUnload then onLoad for registered MosaicPlugin', async () => {
+    const { service } = createService();
+
+    const callOrder: string[] = [];
+    const mockPlugin = {
+      pluginName: 'test-plugin',
+      onLoad: vi.fn().mockImplementation(() => {
+        callOrder.push('onLoad');
+        return Promise.resolve();
+      }),
+      onUnload: vi.fn().mockImplementation(() => {
+        callOrder.push('onUnload');
+        return Promise.resolve();
+      }),
+    };
+
+    service.registerPlugin('test-plugin', mockPlugin);
+    const result = await service.reload('command');
+
+    expect(mockPlugin.onUnload).toHaveBeenCalledOnce();
+    expect(mockPlugin.onLoad).toHaveBeenCalledOnce();
+    expect(callOrder).toEqual(['onUnload', 'onLoad']);
+    expect(result.message).toContain('test-plugin');
+  });
+
+  it('reload() continues if one plugin throws during onUnload', async () => {
+    const { service } = createService();
+
+    const badPlugin = {
+      pluginName: 'bad-plugin',
+      onLoad: vi.fn().mockResolvedValue(undefined),
+      onUnload: vi.fn().mockRejectedValue(new Error('unload failed')),
+    };
+
+    service.registerPlugin('bad-plugin', badPlugin);
+    const result = await service.reload('command');
+
+    expect(result.message).toContain('bad-plugin');
+    expect(result.message).toContain('unload failed');
+  });
+
+  it('reload() skips non-MosaicPlugin objects', async () => {
+    const { service } = createService();
+
+    const notAPlugin = { foo: 'bar' };
+    service.registerPlugin('not-a-plugin', notAPlugin);
+
+    // Should not throw
+    const result = await service.reload('command');
+    expect(result).toBeDefined();
+    expect(result.message).not.toContain('not-a-plugin');
+  });
+
+  it('reload() returns SystemReloadPayload with commands, skills, providers, message', async () => {
+    const { service, registry } = createService();
+    registry.getManifest.mockReturnValue({
+      version: 1,
+      commands: [
+        {
+          name: 'test',
+          description: 'test cmd',
+          aliases: [],
+          scope: 'core',
+          execution: 'socket',
+          available: true,
+        },
+      ],
+      skills: [],
+    });
+
+    const result = await service.reload('rest');
+
+    expect(result).toHaveProperty('commands');
+    expect(result).toHaveProperty('skills');
+    expect(result).toHaveProperty('providers');
+    expect(result).toHaveProperty('message');
+    expect(result.commands).toHaveLength(1);
+  });
+
+  it('registerPlugin() logs plugin registration', () => {
+    const { service } = createService();
+
+    // Should not throw and should register
+    expect(() => service.registerPlugin('my-plugin', {})).not.toThrow();
+  });
+});

apps/gateway/src/reload/reload.service.ts

@@ -0,0 +1,92 @@
+import {
+  Inject,
+  Injectable,
+  Logger,
+  type OnApplicationBootstrap,
+  type OnApplicationShutdown,
+} from '@nestjs/common';
+import type { SystemReloadPayload } from '@mosaic/types';
+import { CommandRegistryService } from '../commands/command-registry.service.js';
+import { isMosaicPlugin } from './mosaic-plugin.interface.js';
+
+@Injectable()
+export class ReloadService implements OnApplicationBootstrap, OnApplicationShutdown {
+  private readonly logger = new Logger(ReloadService.name);
+  private readonly plugins: Map<string, unknown> = new Map();
+  private shutdownHandlerAttached = false;
+
+  constructor(
+    @Inject(CommandRegistryService) private readonly commandRegistry: CommandRegistryService,
+  ) {}
+
+  onApplicationBootstrap(): void {
+    if (!this.shutdownHandlerAttached) {
+      process.on('SIGHUP', () => {
+        this.logger.log('SIGHUP received — triggering soft reload');
+        this.reload('sighup').catch((err: unknown) => {
+          this.logger.error(`SIGHUP reload failed: ${err}`);
+        });
+      });
+      this.shutdownHandlerAttached = true;
+    }
+  }
+
+  onApplicationShutdown(): void {
+    process.removeAllListeners('SIGHUP');
+  }
+
+  registerPlugin(name: string, plugin: unknown): void {
+    this.plugins.set(name, plugin);
+    this.logger.log(`Plugin registered: ${name}`);
+  }
+
+  /**
+   * Soft reload — unload plugins, reload plugins, broadcast.
+   * Does NOT restart the HTTP server or drop connections.
+   */
+  async reload(
+    trigger: 'command' | 'rest' | 'sighup' | 'file-watch',
+  ): Promise<SystemReloadPayload> {
+    this.logger.log(`Soft reload triggered by: ${trigger}`);
+    const reloaded: string[] = [];
+    const errors: string[] = [];
+
+    // 1. Unload all registered MosaicPlugin instances
+    for (const [name, plugin] of this.plugins) {
+      if (isMosaicPlugin(plugin)) {
+        try {
+          await plugin.onUnload();
+          reloaded.push(name);
+        } catch (err) {
+          errors.push(`${name}: unload failed — ${err}`);
+        }
+      }
+    }
+
+    // 2. Reload all MosaicPlugin instances
+    for (const [name, plugin] of this.plugins) {
+      if (isMosaicPlugin(plugin)) {
+        try {
+          await plugin.onLoad();
+        } catch (err) {
+          errors.push(`${name}: load failed — ${err}`);
+        }
+      }
+    }
+
+    const manifest = this.commandRegistry.getManifest();
+
+    const errorSuffix = errors.length > 0 ? ` Errors: ${errors.join(', ')}` : '';
+    const payload: SystemReloadPayload = {
+      commands: manifest.commands,
+      skills: manifest.skills,
+      providers: [],
+      message: `Reload complete (trigger=${trigger}). Plugins reloaded: [${reloaded.join(', ')}].${errorSuffix}`,
+    };
+
+    this.logger.log(
+      `Reload complete. Reloaded: [${reloaded.join(', ')}]. Errors: ${errors.length}`,
+    );
+    return payload;
+  }
+}

apps/gateway/src/workspace/project-bootstrap.service.ts

@@ -0,0 +1,98 @@
+import { Inject, Injectable, Logger } from '@nestjs/common';
+import type { Brain } from '@mosaic/brain';
+import { BRAIN } from '../brain/brain.tokens.js';
+import { PluginService } from '../plugin/plugin.service.js';
+import { WorkspaceService } from './workspace.service.js';
+
+export interface BootstrapProjectParams {
+  name: string;
+  description?: string;
+  userId: string;
+  teamId?: string;
+  repoUrl?: string;
+}
+
+export interface BootstrapProjectResult {
+  projectId: string;
+  workspacePath: string;
+}
+
+@Injectable()
+export class ProjectBootstrapService {
+  private readonly logger = new Logger(ProjectBootstrapService.name);
+
+  constructor(
+    @Inject(BRAIN) private readonly brain: Brain,
+    private readonly workspace: WorkspaceService,
+    private readonly pluginService: PluginService,
+  ) {}
+
+  /**
+   * Bootstrap a new project: create DB record + workspace directory.
+   * Returns the created project with its workspace path.
+   */
+  async bootstrap(params: BootstrapProjectParams): Promise<BootstrapProjectResult> {
+    const ownerType: 'user' | 'team' = params.teamId ? 'team' : 'user';
+
+    this.logger.log(
+      `Bootstrapping project "${params.name}" for ${ownerType} ${params.teamId ?? params.userId}`,
+    );
+
+    // 1. Create DB record
+    const project = await this.brain.projects.create({
+      name: params.name,
+      description: params.description,
+      ownerId: params.userId,
+      teamId: params.teamId ?? null,
+      ownerType,
+    });
+
+    // 2. Create workspace directory (includes docs structure)
+    const workspacePath = await this.workspace.create(
+      {
+        id: project.id,
+        ownerType,
+        userId: params.userId,
+        teamId: params.teamId ?? null,
+      },
+      params.repoUrl,
+    );
+
+    // 3. Create default agent config for the project
+    await this.brain.agents.create({
+      name: 'default',
+      provider: '',
+      model: '',
+      projectId: project.id,
+      ownerId: params.userId,
+      isSystem: false,
+      status: 'active',
+    });
+
+    // 4. Notify plugins so they can set up project-specific resources (e.g. Discord channel)
+    try {
+      for (const plugin of this.pluginService.getPlugins()) {
+        if (plugin.onProjectCreated) {
+          const result = await plugin.onProjectCreated({
+            id: project.id,
+            name: params.name,
+            description: params.description,
+          });
+          if (result?.channelId) {
+            await this.brain.projects.update(project.id, {
+              metadata: { discordChannelId: result.channelId },
+            });
+          }
+        }
+      }
+    } catch (err) {
+      this.logger.warn(
+        `Plugin project notification failed: ${err instanceof Error ? err.message : String(err)}`,
+      );
+    }
+
+    this.logger.log(`Project ${project.id} bootstrapped at ${workspacePath}`);
+
+    return { projectId: project.id, workspacePath };
+  }
+}

apps/gateway/src/workspace/teams.controller.ts

@@ -0,0 +1,30 @@
+import { Controller, Get, Param, UseGuards } from '@nestjs/common';
+import { AuthGuard } from '../auth/auth.guard.js';
+import { TeamsService } from './teams.service.js';
+
+@Controller('api/teams')
+@UseGuards(AuthGuard)
+export class TeamsController {
+  constructor(private readonly teams: TeamsService) {}
+
+  @Get()
+  async list() {
+    return this.teams.findAll();
+  }
+
+  @Get(':teamId')
+  async findOne(@Param('teamId') teamId: string) {
+    return this.teams.findById(teamId);
+  }
+
+  @Get(':teamId/members')
+  async listMembers(@Param('teamId') teamId: string) {
+    return this.teams.listMembers(teamId);
+  }
+
+  @Get(':teamId/members/:userId')
+  async checkMembership(@Param('teamId') teamId: string, @Param('userId') userId: string) {
+    const isMember = await this.teams.isMember(teamId, userId);
+    return { isMember };
+  }
+}

apps/gateway/src/workspace/teams.service.ts

@@ -0,0 +1,73 @@
+import { Inject, Injectable, Logger } from '@nestjs/common';
+import { eq, and, type Db, teams, teamMembers, projects } from '@mosaic/db';
+import { DB } from '../database/database.module.js';
+
+@Injectable()
+export class TeamsService {
+  private readonly logger = new Logger(TeamsService.name);
+
+  constructor(@Inject(DB) private readonly db: Db) {}
+
+  /**
+   * Check if a user is a member of a team.
+   */
+  async isMember(teamId: string, userId: string): Promise<boolean> {
+    const rows = await this.db
+      .select({ id: teamMembers.id })
+      .from(teamMembers)
+      .where(and(eq(teamMembers.teamId, teamId), eq(teamMembers.userId, userId)));
+    return rows.length > 0;
+  }
+
+  /**
+   * Check project access for a user.
+   * - ownerType === 'user': project.ownerId must equal userId
+   * - ownerType === 'team': userId must be a member of project.teamId
+   */
+  async canAccessProject(userId: string, projectId: string): Promise<boolean> {
+    const rows = await this.db
+      .select({
+        id: projects.id,
+        ownerType: projects.ownerType,
+        ownerId: projects.ownerId,
+        teamId: projects.teamId,
+      })
+      .from(projects)
+      .where(eq(projects.id, projectId));
+
+    const project = rows[0];
+    if (!project) return false;
+
+    if (project.ownerType === 'user') {
+      return project.ownerId === userId;
+    }
+
+    if (project.ownerType === 'team' && project.teamId) {
+      return this.isMember(project.teamId, userId);
+    }
+
+    return false;
+  }
+
+  /**
+   * List all teams (for admin/listing endpoints).
+   */
+  async findAll() {
+    return this.db.select().from(teams);
+  }
+
+  /**
+   * Find a team by ID.
+   */
+  async findById(id: string) {
+    const rows = await this.db.select().from(teams).where(eq(teams.id, id));
+    return rows[0];
+  }
+
+  /**
+   * List members of a team.
+   */
+  async listMembers(teamId: string) {
+    return this.db.select().from(teamMembers).where(eq(teamMembers.teamId, teamId));
+  }
+}

apps/gateway/src/workspace/workspace.controller.ts

@@ -0,0 +1,30 @@
+import { Body, Controller, Post, UseGuards } from '@nestjs/common';
+import { AuthGuard } from '../auth/auth.guard.js';
+import { CurrentUser } from '../auth/current-user.decorator.js';
+import { ProjectBootstrapService } from './project-bootstrap.service.js';
+
+@Controller('api/workspaces')
+@UseGuards(AuthGuard)
+export class WorkspaceController {
+  constructor(private readonly bootstrap: ProjectBootstrapService) {}
+
+  @Post()
+  async create(
+    @CurrentUser() user: { id: string },
+    @Body()
+    body: {
+      name: string;
+      description?: string;
+      teamId?: string;
+      repoUrl?: string;
+    },
+  ) {
+    return this.bootstrap.bootstrap({
+      name: body.name,
+      description: body.description,
+      userId: user.id,
+      teamId: body.teamId,
+      repoUrl: body.repoUrl,
+    });
+  }
+}

apps/gateway/src/workspace/workspace.module.ts

@@ -0,0 +1,13 @@
+import { Module } from '@nestjs/common';
+import { WorkspaceService } from './workspace.service.js';
+import { ProjectBootstrapService } from './project-bootstrap.service.js';
+import { TeamsService } from './teams.service.js';
+import { WorkspaceController } from './workspace.controller.js';
+import { TeamsController } from './teams.controller.js';
+
+@Module({
+  controllers: [WorkspaceController, TeamsController],
+  providers: [WorkspaceService, ProjectBootstrapService, TeamsService],
+  exports: [WorkspaceService, ProjectBootstrapService, TeamsService],
+})
+export class WorkspaceModule {}

apps/gateway/src/workspace/workspace.service.spec.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { WorkspaceService } from './workspace.service.js';
+import path from 'node:path';
+
+describe('WorkspaceService', () => {
+  let service: WorkspaceService;
+
+  beforeEach(() => {
+    service = new WorkspaceService();
+  });
+
+  describe('resolvePath', () => {
+    it('resolves user workspace path', () => {
+      const result = service.resolvePath({
+        id: 'proj1',
+        ownerType: 'user',
+        userId: 'user1',
+        teamId: null,
+      });
+      expect(result).toContain(path.join('users', 'user1', 'proj1'));
+    });
+
+    it('resolves team workspace path', () => {
+      const result = service.resolvePath({
+        id: 'proj1',
+        ownerType: 'team',
+        userId: 'user1',
+        teamId: 'team1',
+      });
+      expect(result).toContain(path.join('teams', 'team1', 'proj1'));
+    });
+
+    it('falls back to user path when ownerType is team but teamId is null', () => {
+      const result = service.resolvePath({
+        id: 'proj1',
+        ownerType: 'team',
+        userId: 'user1',
+        teamId: null,
+      });
+      expect(result).toContain(path.join('users', 'user1', 'proj1'));
+    });
+
+    it('uses MOSAIC_ROOT env var as the base path', () => {
+      const originalRoot = process.env['MOSAIC_ROOT'];
+      process.env['MOSAIC_ROOT'] = '/custom/root';
+      const customService = new WorkspaceService();
+      const result = customService.resolvePath({
+        id: 'proj1',
+        ownerType: 'user',
+        userId: 'user1',
+        teamId: null,
+      });
+      expect(result).toMatch(/^\/custom\/root/);
+      // Restore
+      if (originalRoot === undefined) {
+        delete process.env['MOSAIC_ROOT'];
+      } else {
+        process.env['MOSAIC_ROOT'] = originalRoot;
+      }
+    });
+
+    it('defaults to /opt/mosaic when MOSAIC_ROOT is unset', () => {
+      const originalRoot = process.env['MOSAIC_ROOT'];
+      delete process.env['MOSAIC_ROOT'];
+      const defaultService = new WorkspaceService();
+      const result = defaultService.resolvePath({
+        id: 'proj2',
+        ownerType: 'user',
+        userId: 'user2',
+        teamId: null,
+      });
+      expect(result).toMatch(/^\/opt\/mosaic/);
+      // Restore
+      if (originalRoot !== undefined) {
+        process.env['MOSAIC_ROOT'] = originalRoot;
+      }
+    });
+  });
+});

apps/gateway/src/workspace/workspace.service.ts

@@ -0,0 +1,116 @@
+import { Injectable, Logger } from '@nestjs/common';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { execFile } from 'node:child_process';
+import { promisify } from 'node:util';
+
+const execFileAsync = promisify(execFile);
+
+export interface WorkspaceProject {
+  id: string;
+  ownerType: 'user' | 'team';
+  userId: string;
+  teamId: string | null;
+}
+
+@Injectable()
+export class WorkspaceService {
+  private readonly logger = new Logger(WorkspaceService.name);
+  private readonly mosaicRoot: string;
+
+  constructor() {
+    this.mosaicRoot = process.env['MOSAIC_ROOT'] ?? '/opt/mosaic';
+  }
+
+  /**
+   * Resolve the workspace path for a project.
+   * Solo: $MOSAIC_ROOT/.workspaces/users/<userId>/<projectId>/
+   * Team: $MOSAIC_ROOT/.workspaces/teams/<teamId>/<projectId>/
+   */
+  resolvePath(project: WorkspaceProject): string {
+    if (project.ownerType === 'team' && project.teamId) {
+      return path.join(this.mosaicRoot, '.workspaces', 'teams', project.teamId, project.id);
+    }
+    return path.join(this.mosaicRoot, '.workspaces', 'users', project.userId, project.id);
+  }
+
+  /**
+   * Create a workspace directory and initialize it as a git repo.
+   * If repoUrl is provided, clone instead of init.
+   */
+  async create(project: WorkspaceProject, repoUrl?: string): Promise<string> {
+    const workspacePath = this.resolvePath(project);
+
+    // Create directory
+    await fs.mkdir(workspacePath, { recursive: true });
+
+    if (repoUrl) {
+      // Clone existing repo
+      await execFileAsync('git', ['clone', repoUrl, '.'], { cwd: workspacePath });
+      this.logger.log(`Cloned ${repoUrl} into workspace ${workspacePath}`);
+    } else {
+      // Init new git repo
+      await execFileAsync('git', ['init'], { cwd: workspacePath });
+      await execFileAsync('git', ['commit', '--allow-empty', '-m', 'Initial workspace commit'], {
+        cwd: workspacePath,
+        env: {
+          ...process.env,
+          GIT_AUTHOR_NAME: 'Mosaic',
+          GIT_AUTHOR_EMAIL: 'mosaic@localhost',
+          GIT_COMMITTER_NAME: 'Mosaic',
+          GIT_COMMITTER_EMAIL: 'mosaic@localhost',
+        },
+      });
+      this.logger.log(`Initialized git workspace at ${workspacePath}`);
+    }
+
+    // Create standard docs structure
+    await fs.mkdir(path.join(workspacePath, 'docs', 'plans'), { recursive: true });
+    await fs.mkdir(path.join(workspacePath, 'docs', 'reports'), { recursive: true });
+    this.logger.log(`Created docs structure at ${workspacePath}`);
+
+    return workspacePath;
+  }
+
+  /**
+   * Delete a workspace directory recursively.
+   */
+  async delete(project: WorkspaceProject): Promise<void> {
+    const workspacePath = this.resolvePath(project);
+    try {
+      await fs.rm(workspacePath, { recursive: true, force: true });
+      this.logger.log(`Deleted workspace at ${workspacePath}`);
+    } catch (err) {
+      this.logger.warn(`Failed to delete workspace at ${workspacePath}: ${err}`);
+    }
+  }
+
+  /**
+   * Check whether the workspace directory exists.
+   */
+  async exists(project: WorkspaceProject): Promise<boolean> {
+    const workspacePath = this.resolvePath(project);
+    try {
+      await fs.access(workspacePath);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Create the base user workspace directory (call on user registration).
+   */
+  async createUserRoot(userId: string): Promise<void> {
+    const userRoot = path.join(this.mosaicRoot, '.workspaces', 'users', userId);
+    await fs.mkdir(userRoot, { recursive: true });
+  }
+
+  /**
+   * Create the base team workspace directory (call on team creation).
+   */
+  async createTeamRoot(teamId: string): Promise<void> {
+    const teamRoot = path.join(this.mosaicRoot, '.workspaces', 'teams', teamId);
+    await fs.mkdir(teamRoot, { recursive: true });
+  }
+}

apps/web/next.config.ts

@@ -3,6 +3,30 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   output: 'standalone',
   transpilePackages: ['@mosaic/design-tokens'],
+
+  // Enable gzip/brotli compression for all responses.
+  compress: true,
+
+  // Reduce bundle size: disable source maps in production builds.
+  productionBrowserSourceMaps: false,
+
+  // Image optimisation: allow the gateway origin as an external image source.
+  images: {
+    formats: ['image/avif', 'image/webp'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
+  },
+
+  // Experimental: enable React compiler for automatic memoisation (Next 15+).
+  // Falls back gracefully if the compiler plugin is not installed.
+  experimental: {
+    // Turbopack is the default in dev for Next 15; keep it opt-in for now.
+    // turbo: {},
+  },
 };
 
 export default nextConfig;

apps/web/package.json

@@ -18,6 +18,7 @@
     "next": "^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
     "socket.io-client": "^4.8.0",
     "tailwind-merge": "^3.5.0"
   },
@@ -27,6 +28,7 @@
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^29.0.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.8.0",
     "vitest": "^2.0.0"

apps/web/src/app/(auth)/login/page.tsx

@@ -1,14 +1,27 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { signIn } from '@/lib/auth-client';
+import { api } from '@/lib/api';
+import { authClient, signIn } from '@/lib/auth-client';
+import type { SsoProviderDiscovery } from '@/lib/sso';
+import { SsoProviderButtons } from '@/components/auth/sso-provider-buttons';
 
 export default function LoginPage(): React.ReactElement {
   const router = useRouter();
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [ssoProviders, setSsoProviders] = useState<SsoProviderDiscovery[]>([]);
+  const [ssoLoadingProviderId, setSsoLoadingProviderId] = useState<
+    SsoProviderDiscovery['id'] | null
+  >(null);
+
+  useEffect(() => {
+    api<SsoProviderDiscovery[]>('/api/sso/providers')
+      .catch(() => [] as SsoProviderDiscovery[])
+      .then((providers) => setSsoProviders(providers.filter((provider) => provider.configured)));
+  }, []);
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>): Promise<void> {
     e.preventDefault();
@@ -30,6 +43,27 @@ export default function LoginPage(): React.ReactElement {
     router.push('/chat');
   }
 
+  async function handleSsoSignIn(providerId: SsoProviderDiscovery['id']): Promise<void> {
+    setError(null);
+    setSsoLoadingProviderId(providerId);
+
+    try {
+      const result = await authClient.signIn.oauth2({
+        providerId,
+        callbackURL: '/chat',
+        newUserCallbackURL: '/chat',
+      });
+
+      if (result.error) {
+        setError(result.error.message ?? `Sign in with ${providerId} failed`);
+        setSsoLoadingProviderId(null);
+      }
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : `Sign in with ${providerId} failed`);
+      setSsoLoadingProviderId(null);
+    }
+  }
+
   return (
     <div>
       <h1 className="text-2xl font-semibold">Sign in</h1>
@@ -86,6 +120,14 @@ export default function LoginPage(): React.ReactElement {
         </button>
       </form>
 
+      <SsoProviderButtons
+        providers={ssoProviders}
+        loadingProviderId={ssoLoadingProviderId}
+        onOidcSignIn={(providerId) => {
+          void handleSsoSignIn(providerId);
+        }}
+      />
+
       <p className="mt-4 text-center text-sm text-text-muted">
         Don&apos;t have an account?{' '}
         <Link href="/register" className="text-blue-400 hover:text-blue-300">

apps/web/src/app/(dashboard)/chat/page.tsx

@@ -4,18 +4,42 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { api } from '@/lib/api';
 import { destroySocket, getSocket } from '@/lib/socket';
 import type { Conversation, Message } from '@/lib/types';
-import { ConversationList } from '@/components/chat/conversation-list';
+import {
+  ConversationSidebar,
+  type ConversationSidebarRef,
+} from '@/components/chat/conversation-sidebar';
 import { MessageBubble } from '@/components/chat/message-bubble';
 import { ChatInput } from '@/components/chat/chat-input';
 import { StreamingMessage } from '@/components/chat/streaming-message';
 
+interface ModelInfo {
+  id: string;
+  provider: string;
+  name: string;
+  reasoning: boolean;
+  contextWindow: number;
+  maxTokens: number;
+  inputTypes: ('text' | 'image')[];
+  cost: { input: number; output: number; cacheRead: number; cacheWrite: number };
+}
+
+interface ProviderInfo {
+  id: string;
+  name: string;
+  available: boolean;
+  models: ModelInfo[];
+}
+
 export default function ChatPage(): React.ReactElement {
-  const [conversations, setConversations] = useState<Conversation[]>([]);
   const [activeId, setActiveId] = useState<string | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
   const [streamingText, setStreamingText] = useState('');
   const [isStreaming, setIsStreaming] = useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [models, setModels] = useState<ModelInfo[]>([]);
+  const [selectedModelId, setSelectedModelId] = useState('');
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const sidebarRef = useRef<ConversationSidebarRef>(null);
 
   // Track the active conversation ID in a ref so socket event handlers always
   // see the current value without needing to be re-registered.
@@ -26,11 +50,30 @@ export default function ChatPage(): React.ReactElement {
   // without stale-closure issues.
   const streamingTextRef = useRef('');
 
-  // Load conversations on mount
   useEffect(() => {
-    api<Conversation[]>('/api/conversations')
+    const savedState = window.localStorage.getItem('mosaic-sidebar-open');
-      .then(setConversations)
+    if (savedState !== null) {
-      .catch(() => {});
+      setIsSidebarOpen(savedState === 'true');
+    }
+  }, []);
+
+  useEffect(() => {
+    window.localStorage.setItem('mosaic-sidebar-open', String(isSidebarOpen));
+  }, [isSidebarOpen]);
+
+  useEffect(() => {
+    api<ProviderInfo[]>('/api/providers')
+      .then((providers) => {
+        const availableModels = providers
+          .filter((provider) => provider.available)
+          .flatMap((provider) => provider.models);
+        setModels(availableModels);
+        setSelectedModelId((current) => current || availableModels[0]?.id || '');
+      })
+      .catch(() => {
+        setModels([]);
+        setSelectedModelId('');
+      });
   }, []);
 
   // Load messages when active conversation changes
@@ -91,6 +134,7 @@ export default function ChatPage(): React.ReactElement {
             createdAt: new Date().toISOString(),
           },
         ]);
+        sidebarRef.current?.refresh();
       }
     }
 
@@ -131,54 +175,27 @@ export default function ChatPage(): React.ReactElement {
     };
   }, []);
 
-  const handleNewConversation = useCallback(async () => {
+  const handleNewConversation = useCallback(async (projectId?: string | null) => {
     const conv = await api<Conversation>('/api/conversations', {
       method: 'POST',
-      body: { title: 'New conversation' },
+      body: { title: 'New conversation', projectId: projectId ?? null },
     });
-    setConversations((prev) => [conv, ...prev]);
+
+    sidebarRef.current?.addConversation({
+      id: conv.id,
+      title: conv.title,
+      projectId: conv.projectId,
+      updatedAt: conv.updatedAt,
+      archived: conv.archived,
+    });
+
     setActiveId(conv.id);
     setMessages([]);
+    setIsSidebarOpen(true);
   }, []);
 
-  const handleRename = useCallback(async (id: string, title: string) => {
-    const updated = await api<Conversation>(`/api/conversations/${id}`, {
-      method: 'PATCH',
-      body: { title },
-    });
-    setConversations((prev) => prev.map((c) => (c.id === id ? updated : c)));
-  }, []);
-
-  const handleDelete = useCallback(
-    async (id: string) => {
-      await api<void>(`/api/conversations/${id}`, { method: 'DELETE' });
-      setConversations((prev) => prev.filter((c) => c.id !== id));
-      if (activeId === id) {
-        setActiveId(null);
-        setMessages([]);
-      }
-    },
-    [activeId],
-  );
-
-  const handleArchive = useCallback(
-    async (id: string, archived: boolean) => {
-      const updated = await api<Conversation>(`/api/conversations/${id}`, {
-        method: 'PATCH',
-        body: { archived },
-      });
-      setConversations((prev) => prev.map((c) => (c.id === id ? updated : c)));
-      // If archiving the active conversation, deselect it
-      if (archived && activeId === id) {
-        setActiveId(null);
-        setMessages([]);
-      }
-    },
-    [activeId],
-  );
-
   const handleSend = useCallback(
-    async (content: string) => {
+    async (content: string, options?: { modelId?: string }) => {
       let convId = activeId;
 
       // Auto-create conversation if none selected
@@ -188,25 +205,24 @@ export default function ChatPage(): React.ReactElement {
           method: 'POST',
           body: { title: autoTitle },
         });
-        setConversations((prev) => [conv, ...prev]);
+        sidebarRef.current?.addConversation({
+          id: conv.id,
+          title: conv.title,
+          projectId: conv.projectId,
+          updatedAt: conv.updatedAt,
+          archived: conv.archived,
+        });
         setActiveId(conv.id);
         convId = conv.id;
-      } else {
+      } else if (messages.length === 0) {
-        // Auto-title: if the active conversation still has the default "New
+        // Auto-title the initial placeholder conversation from the first user message.
-        // conversation" title and this is the first message, update the title
+        const autoTitle = content.slice(0, 60);
-        // from the message content.
+        api<Conversation>(`/api/conversations/${convId}`, {
-        const activeConv = conversations.find((c) => c.id === convId);
+          method: 'PATCH',
-        if (activeConv?.title === 'New conversation' && messages.length === 0) {
+          body: { title: autoTitle },
-          const autoTitle = content.slice(0, 60);
+        })
-          api<Conversation>(`/api/conversations/${convId}`, {
+          .then(() => sidebarRef.current?.refresh())
-            method: 'PATCH',
+          .catch(() => {});
-            body: { title: autoTitle },
-          })
-            .then((updated) => {
-              setConversations((prev) => prev.map((c) => (c.id === convId ? updated : c)));
-            })
-            .catch(() => {});
-        }
       }
 
       // Optimistic user message in local UI state
@@ -237,24 +253,67 @@ export default function ChatPage(): React.ReactElement {
       if (!socket.connected) {
         socket.connect();
       }
-      socket.emit('message', { conversationId: convId, content });
+      socket.emit('message', {
+        conversationId: convId,
+        content,
+        modelId: (options?.modelId ?? selectedModelId) || undefined,
+      });
     },
-    [activeId, conversations, messages],
+    [activeId, messages, selectedModelId],
   );
 
   return (
-    <div className="-m-6 flex h-[calc(100vh-3.5rem)]">
+    <div
-      <ConversationList
+      className="-m-6 flex h-[calc(100vh-3.5rem)] overflow-hidden"
-        conversations={conversations}
+      style={{ background: 'var(--bg-deep, var(--color-surface-bg, #0a0f1a))' }}
-        activeId={activeId}
+    >
-        onSelect={setActiveId}
+      <ConversationSidebar
-        onNew={handleNewConversation}
+        ref={sidebarRef}
-        onRename={handleRename}
+        isOpen={isSidebarOpen}
-        onDelete={handleDelete}
+        onClose={() => setIsSidebarOpen(false)}
-        onArchive={handleArchive}
+        currentConversationId={activeId}
+        onSelectConversation={(conversationId) => {
+          setActiveId(conversationId);
+          setMessages([]);
+          if (conversationId && window.innerWidth < 768) {
+            setIsSidebarOpen(false);
+          }
+        }}
+        onNewConversation={(projectId) => {
+          void handleNewConversation(projectId);
+        }}
       />
 
-      <div className="flex flex-1 flex-col">
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div
+          className="flex items-center gap-3 border-b px-4 py-3"
+          style={{ borderColor: 'var(--border)' }}
+        >
+          <button
+            type="button"
+            onClick={() => setIsSidebarOpen((open) => !open)}
+            className="rounded-lg border p-2 transition-colors"
+            style={{
+              borderColor: 'var(--border)',
+              background: 'var(--surface)',
+              color: 'var(--text)',
+            }}
+            aria-label={isSidebarOpen ? 'Close conversation sidebar' : 'Open conversation sidebar'}
+          >
+            <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor">
+              <path strokeWidth="2" strokeLinecap="round" d="M4 7h16M4 12h16M4 17h16" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-sm font-semibold" style={{ color: 'var(--text)' }}>
+              Mosaic Chat
+            </h1>
+            <p className="text-xs" style={{ color: 'var(--muted)' }}>
+              {activeId ? 'Active conversation selected' : 'Choose or start a conversation'}
+            </p>
+          </div>
+        </div>
+
         {activeId ? (
           <>
             <div className="flex-1 space-y-4 overflow-y-auto p-6">
@@ -264,19 +323,36 @@ export default function ChatPage(): React.ReactElement {
               {isStreaming && <StreamingMessage text={streamingText} />}
               <div ref={messagesEndRef} />
             </div>
-            <ChatInput onSend={handleSend} disabled={isStreaming} />
+            <ChatInput
+              onSend={handleSend}
+              isStreaming={isStreaming}
+              models={models}
+              selectedModelId={selectedModelId}
+              onModelChange={setSelectedModelId}
+            />
           </>
         ) : (
-          <div className="flex flex-1 items-center justify-center">
+          <div className="flex flex-1 items-center justify-center px-6">
-            <div className="text-center">
+            <div
-              <h2 className="text-lg font-medium text-text-secondary">Welcome to Mosaic Chat</h2>
+              className="max-w-md rounded-2xl border px-8 py-10 text-center"
-              <p className="mt-1 text-sm text-text-muted">
+              style={{
+                borderColor: 'var(--border)',
+                background: 'var(--surface)',
+              }}
+            >
+              <h2 className="text-lg font-medium" style={{ color: 'var(--text)' }}>
+                Welcome to Mosaic Chat
+              </h2>
+              <p className="mt-1 text-sm" style={{ color: 'var(--muted)' }}>
                 Select a conversation or start a new one
               </p>
               <button
                 type="button"
-                onClick={handleNewConversation}
+                onClick={() => {
-                className="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+                  void handleNewConversation();
+                }}
+                className="mt-4 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors"
+                style={{ background: 'var(--primary)' }}
               >
                 Start new conversation
               </button>

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

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { api } from '@/lib/api';
 import { authClient, useSession } from '@/lib/auth-client';
+import type { SsoProviderDiscovery } from '@/lib/sso';
+import { SsoProviderSection } from '@/components/settings/sso-provider-section';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -424,7 +426,9 @@ function NotificationsTab(): React.ReactElement {
 
 function ProvidersTab(): React.ReactElement {
   const [providers, setProviders] = useState<ProviderInfo[]>([]);
+  const [ssoProviders, setSsoProviders] = useState<SsoProviderDiscovery[]>([]);
   const [loading, setLoading] = useState(true);
+  const [ssoLoading, setSsoLoading] = useState(true);
   const [testStatuses, setTestStatuses] = useState<Record<string, ProviderTestStatus>>({});
 
   useEffect(() => {
@@ -434,6 +438,13 @@ function ProvidersTab(): React.ReactElement {
       .finally(() => setLoading(false));
   }, []);
 
+  useEffect(() => {
+    api<SsoProviderDiscovery[]>('/api/sso/providers')
+      .catch(() => [] as SsoProviderDiscovery[])
+      .then((providers) => setSsoProviders(providers))
+      .finally(() => setSsoLoading(false));
+  }, []);
+
   const testConnection = useCallback(async (providerId: string): Promise<void> => {
     setTestStatuses((prev) => ({
       ...prev,
@@ -464,35 +475,44 @@ function ProvidersTab(): React.ReactElement {
     .find((m) => providers.find((p) => p.id === m.provider)?.available);
 
   return (
-    <section className="space-y-4">
+    <section className="space-y-6">
-      <h2 className="text-lg font-medium text-text-secondary">LLM Providers</h2>
+      <div className="space-y-4">
-      {loading ? (
+        <h2 className="text-lg font-medium text-text-secondary">SSO Providers</h2>
-        <p className="text-sm text-text-muted">Loading providers...</p>
+        <SsoProviderSection providers={ssoProviders} loading={ssoLoading} />
-      ) : providers.length === 0 ? (
+      </div>
-        <div className="rounded-lg border border-surface-border bg-surface-card p-4">
+
-          <p className="text-sm text-text-muted">
+      <div className="space-y-4">
-            No providers configured. Set{' '}
+        <h2 className="text-lg font-medium text-text-secondary">LLM Providers</h2>
-            <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">OLLAMA_BASE_URL</code>{' '}
+        {loading ? (
-            or{' '}
+          <p className="text-sm text-text-muted">Loading providers...</p>
-            <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
+        ) : providers.length === 0 ? (
-              MOSAIC_CUSTOM_PROVIDERS
+          <div className="rounded-lg border border-surface-border bg-surface-card p-4">
-            </code>{' '}
+            <p className="text-sm text-text-muted">
-            to add providers.
+              No providers configured. Set{' '}
-          </p>
+              <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
-        </div>
+                OLLAMA_BASE_URL
-      ) : (
+              </code>{' '}
-        <div className="space-y-4">
+              or{' '}
-          {providers.map((provider) => (
+              <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
-            <ProviderCard
+                MOSAIC_CUSTOM_PROVIDERS
-              key={provider.id}
+              </code>{' '}
-              provider={provider}
+              to add providers.
-              defaultModel={defaultModel}
+            </p>
-              testStatus={testStatuses[provider.id] ?? { state: 'idle' }}
+          </div>
-              onTest={() => void testConnection(provider.id)}
+        ) : (
-            />
+          <div className="space-y-4">
-          ))}
+            {providers.map((provider) => (
-        </div>
+              <ProviderCard
-      )}
+                key={provider.id}
+                provider={provider}
+                defaultModel={defaultModel}
+                testStatus={testStatuses[provider.id] ?? { state: 'idle' }}
+                onTest={() => void testConnection(provider.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
     </section>
   );
 }

apps/web/src/app/auth/provider/[provider]/page.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useParams, useSearchParams } from 'next/navigation';
+import { signIn } from '@/lib/auth-client';
+import { getSsoProvider } from '@/lib/sso-providers';
+
+export default function AuthProviderRedirectPage(): React.ReactElement {
+  const params = useParams<{ provider: string }>();
+  const searchParams = useSearchParams();
+  const providerId = typeof params.provider === 'string' ? params.provider : '';
+  const provider = getSsoProvider(providerId);
+  const callbackURL = searchParams.get('callbackURL') ?? '/chat';
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const currentProvider = provider;
+
+    if (!currentProvider) {
+      setError('Unknown SSO provider.');
+      return;
+    }
+
+    if (!currentProvider.enabled) {
+      setError(`${currentProvider.buttonLabel} is not enabled in this deployment.`);
+      return;
+    }
+
+    const activeProvider = currentProvider;
+    let cancelled = false;
+
+    async function redirectToProvider(): Promise<void> {
+      const result = await signIn.oauth2({
+        providerId: activeProvider.id,
+        callbackURL,
+      });
+
+      if (!cancelled && result?.error) {
+        setError(result.error.message ?? `${activeProvider.buttonLabel} sign in failed.`);
+      }
+    }
+
+    void redirectToProvider();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [callbackURL, provider]);
+
+  return (
+    <div className="mx-auto flex min-h-[50vh] max-w-md flex-col justify-center">
+      <h1 className="text-2xl font-semibold text-text-primary">Single sign-on</h1>
+      <p className="mt-2 text-sm text-text-secondary">
+        {provider
+          ? `Redirecting you to ${provider.buttonLabel.replace('Continue with ', '')}...`
+          : 'Preparing your sign-in request...'}
+      </p>
+
+      {error ? (
+        <div className="mt-6 rounded-lg border border-error/30 bg-error/10 px-4 py-3 text-sm text-error">
+          <p>{error}</p>
+          <Link
+            href="/login"
+            className="mt-3 inline-block font-medium text-blue-400 hover:text-blue-300"
+          >
+            Return to login
+          </Link>
+        </div>
+      ) : (
+        <div className="mt-6 rounded-lg border border-surface-border bg-surface-elevated px-4 py-3 text-sm text-text-secondary">
+          If the redirect does not start automatically, return to the login page and try again.
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/app/globals.css

@@ -1,101 +1,186 @@
 @import 'tailwindcss';
 
-/*
+/* =============================================================================
- * Mosaic Stack design tokens mapped to Tailwind v4 theme.
+   MOSAIC DESIGN SYSTEM — Reference token system from dashboard design
- * Source: @mosaic/design-tokens (AD-13)
+   ============================================================================= */
- * Fonts: Outfit (sans), Fira Code (mono)
- * Palette: deep blue-grays + blue/purple/teal accents
- * Default: dark theme
- */
 
-@theme {
+/* -----------------------------------------------------------------------------
-  /* ─── Fonts ─── */
+   Primitive Tokens (Dark-first — dark is the default theme)
-  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
+   ----------------------------------------------------------------------------- */
-  --font-mono: 'Fira Code', ui-monospace, Menlo, monospace;
+:root {
+  /* Mosaic design tokens — dark palette (default) */
+  --ms-bg-950: #080b12;
+  --ms-bg-900: #0f141d;
+  --ms-bg-850: #151b26;
+  --ms-surface-800: #1b2331;
+  --ms-surface-750: #232d3f;
+  --ms-border-700: #2f3b52;
+  --ms-text-100: #eef3ff;
+  --ms-text-300: #c5d0e6;
+  --ms-text-500: #8f9db7;
+  --ms-blue-500: #2f80ff;
+  --ms-blue-400: #56a0ff;
+  --ms-red-500: #e5484d;
+  --ms-red-400: #f06a6f;
+  --ms-purple-500: #8b5cf6;
+  --ms-purple-400: #a78bfa;
+  --ms-teal-500: #14b8a6;
+  --ms-teal-400: #2dd4bf;
+  --ms-amber-500: #f59e0b;
+  --ms-amber-400: #fbbf24;
+  --ms-pink-500: #ec4899;
+  --ms-emerald-500: #10b981;
+  --ms-orange-500: #f97316;
+  --ms-cyan-500: #06b6d4;
+  --ms-indigo-500: #6366f1;
 
-  /* ─── Neutral blue-gray scale ─── */
+  /* Semantic aliases — dark theme is default */
-  --color-gray-50: #f0f2f5;
+  --bg: var(--ms-bg-900);
-  --color-gray-100: #dce0e8;
+  --bg-deep: var(--ms-bg-950);
-  --color-gray-200: #b8c0cc;
+  --bg-mid: var(--ms-bg-850);
-  --color-gray-300: #8e99a9;
+  --surface: var(--ms-surface-800);
-  --color-gray-400: #6b7a8d;
+  --surface-2: var(--ms-surface-750);
-  --color-gray-500: #4e5d70;
+  --border: var(--ms-border-700);
-  --color-gray-600: #3b4859;
+  --text: var(--ms-text-100);
-  --color-gray-700: #2a3544;
+  --text-2: var(--ms-text-300);
-  --color-gray-800: #1c2433;
+  --muted: var(--ms-text-500);
-  --color-gray-900: #111827;
+  --primary: var(--ms-blue-500);
-  --color-gray-950: #0a0f1a;
+  --primary-l: var(--ms-blue-400);
+  --danger: var(--ms-red-500);
+  --success: var(--ms-teal-500);
+  --warn: var(--ms-amber-500);
+  --purple: var(--ms-purple-500);
 
-  /* ─── Primary — blue ─── */
+  /* Typography */
-  --color-blue-50: #eff4ff;
+  --font: var(--font-outfit, 'Outfit'), system-ui, sans-serif;
-  --color-blue-100: #dae5ff;
+  --mono: var(--font-fira-code, 'Fira Code'), 'Cascadia Code', monospace;
-  --color-blue-200: #bdd1ff;
-  --color-blue-300: #8fb4ff;
-  --color-blue-400: #5b8bff;
-  --color-blue-500: #3b6cf7;
-  --color-blue-600: #2551e0;
-  --color-blue-700: #1d40c0;
-  --color-blue-800: #1e369c;
-  --color-blue-900: #1e317b;
-  --color-blue-950: #162050;
 
-  /* ─── Accent — purple ─── */
+  /* Radius scale */
-  --color-purple-50: #f3f0ff;
+  --r: 8px;
-  --color-purple-100: #e7dfff;
+  --r-sm: 5px;
-  --color-purple-200: #d2c3ff;
+  --r-lg: 12px;
-  --color-purple-300: #b49aff;
+  --r-xl: 16px;
-  --color-purple-400: #9466ff;
-  --color-purple-500: #7c3aed;
-  --color-purple-600: #6d28d9;
-  --color-purple-700: #5b21b6;
-  --color-purple-800: #4c1d95;
-  --color-purple-900: #3b1578;
-  --color-purple-950: #230d4d;
 
-  /* ─── Accent — teal ─── */
+  /* Layout dimensions */
-  --color-teal-50: #effcf9;
+  --sidebar-w: 260px;
-  --color-teal-100: #d0f7ef;
+  --topbar-h: 56px;
-  --color-teal-200: #a4eddf;
+  --terminal-h: 220px;
-  --color-teal-300: #6fddcb;
-  --color-teal-400: #3ec5b2;
-  --color-teal-500: #25aa99;
-  --color-teal-600: #1c897e;
-  --color-teal-700: #1b6e66;
-  --color-teal-800: #1a5853;
-  --color-teal-900: #194945;
-  --color-teal-950: #082d2b;
 
-  /* ─── Semantic surface tokens ─── */
+  /* Easing */
-  --color-surface-bg: #0a0f1a;
+  --ease: cubic-bezier(0.16, 1, 0.3, 1);
-  --color-surface-card: #111827;
-  --color-surface-elevated: #1c2433;
-  --color-surface-border: #2a3544;
 
-  /* ─── Semantic text tokens ─── */
+  /* Legacy shadow tokens (retained for component compat) */
-  --color-text-primary: #f0f2f5;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
-  --color-text-secondary: #8e99a9;
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
-  --color-text-muted: #6b7a8d;
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
-
-  /* ─── Status colors ─── */
-  --color-success: #22c55e;
-  --color-warning: #f59e0b;
-  --color-error: #ef4444;
-  --color-info: #3b82f6;
-
-  /* ─── Sidebar width ─── */
-  --spacing-sidebar: 16rem;
 }
 
-/* ─── Base styles ─── */
+[data-theme='light'] {
-body {
+  --ms-bg-950: #f8faff;
-  background-color: var(--color-surface-bg);
+  --ms-bg-900: #f0f4fc;
-  color: var(--color-text-primary);
+  --ms-bg-850: #e8edf8;
-  font-family: var(--font-sans);
+  --ms-surface-800: #dde4f2;
+  --ms-surface-750: #d0d9ec;
+  --ms-border-700: #b8c4de;
+  --ms-text-100: #0f141d;
+  --ms-text-300: #2f3b52;
+  --ms-text-500: #5a6a87;
+  --bg: var(--ms-bg-900);
+  --bg-deep: var(--ms-bg-950);
+  --bg-mid: var(--ms-bg-850);
+  --surface: var(--ms-surface-800);
+  --surface-2: var(--ms-surface-750);
+  --border: var(--ms-border-700);
+  --text: var(--ms-text-100);
+  --text-2: var(--ms-text-300);
+  --muted: var(--ms-text-500);
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.08);
+}
+
+@theme {
+  --font-sans: var(--font);
+  --font-mono: var(--mono);
+  --color-surface-bg: var(--bg);
+  --color-surface-card: var(--surface);
+  --color-surface-elevated: var(--surface-2);
+  --color-surface-border: var(--border);
+  --color-text-primary: var(--text);
+  --color-text-secondary: var(--text-2);
+  --color-text-muted: var(--muted);
+  --color-accent: var(--primary);
+  --color-success: var(--success);
+  --color-warning: var(--warn);
+  --color-error: var(--danger);
+  --color-info: var(--primary-l);
+  --spacing-sidebar: var(--sidebar-w);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 15px;
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* ─── Scrollbar styling ─── */
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: inherit;
+}
+
+input,
+select,
+textarea {
+  font-family: inherit;
+}
+
+ul {
+  list-style: none;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
+  opacity: 0.025;
+}
+
+@layer base {
+  :focus-visible {
+    outline: 2px solid var(--ms-blue-400);
+    outline-offset: 2px;
+  }
+
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -106,10 +191,96 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--color-gray-600);
+  background: var(--border);
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-gray-500);
+  background: var(--muted);
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: var(--sidebar-w) 1fr;
+  grid-template-rows: var(--topbar-h) 1fr;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.app-header {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  background: var(--bg-deep);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  gap: 12px;
+  z-index: 100;
+}
+
+.app-sidebar {
+  grid-column: 1;
+  grid-row: 2;
+  background: var(--bg-deep);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.app-main {
+  grid-column: 2;
+  grid-row: 2;
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+@media (max-width: 767px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .app-sidebar {
+    position: fixed;
+    left: 0;
+    top: var(--topbar-h);
+    bottom: 0;
+    width: 240px;
+    z-index: 150;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+  }
+
+  .app-sidebar[data-mobile-open='true'] {
+    transform: translateX(0);
+  }
+
+  .app-main,
+  .app-header {
+    grid-column: 1;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .app-shell[data-sidebar-hidden='true'] {
+    grid-template-columns: 1fr;
+  }
+
+  .app-shell[data-sidebar-hidden='true'] .app-sidebar {
+    display: none;
+  }
+
+  .app-shell[data-sidebar-hidden='true'] .app-main,
+  .app-shell[data-sidebar-hidden='true'] .app-header {
+    grid-column: 1;
+  }
 }

apps/web/src/app/layout.tsx

@@ -1,30 +1,41 @@
+import type { Metadata } from 'next';
 import type { ReactNode } from 'react';
-import { Outfit, Fira_Code } from 'next/font/google';
+import { ThemeProvider } from '@/providers/theme-provider';
 import './globals.css';
 
-const outfit = Outfit({
+export const metadata: Metadata = {
-  subsets: ['latin'],
-  variable: '--font-sans',
-  display: 'swap',
-  weight: ['300', '400', '500', '600', '700'],
-});
-
-const firaCode = Fira_Code({
-  subsets: ['latin'],
-  variable: '--font-mono',
-  display: 'swap',
-  weight: ['400', '500', '700'],
-});
-
-export const metadata = {
   title: 'Mosaic',
   description: 'Mosaic Stack Dashboard',
 };
 
+function themeScript(): string {
+  return `
+    (function () {
+      try {
+        var theme = window.localStorage.getItem('mosaic-theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', theme === 'light' ? 'light' : 'dark');
+      } catch (error) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+      }
+    })();
+  `;
+}
+
 export default function RootLayout({ children }: { children: ReactNode }): React.ReactElement {
   return (
-    <html lang="en" className={`dark ${outfit.variable} ${firaCode.variable}`}>
+    <html lang="en" suppressHydrationWarning>
-      <body>{children}</body>
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap"
+        />
+        <script dangerouslySetInnerHTML={{ __html: themeScript() }} />
+      </head>
+      <body>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
     </html>
   );
 }

apps/web/src/components/auth/sso-provider-buttons.spec.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { SsoProviderButtons } from './sso-provider-buttons.js';
+
+describe('SsoProviderButtons', () => {
+  it('renders OIDC sign-in buttons and SAML fallback links', () => {
+    const html = renderToStaticMarkup(
+      <SsoProviderButtons
+        providers={[
+          {
+            id: 'workos',
+            name: 'WorkOS',
+            protocols: ['oidc'],
+            configured: true,
+            loginMode: 'oidc',
+            callbackPath: '/api/auth/oauth2/callback/workos',
+            teamSync: { enabled: true, claim: 'organization_id' },
+            samlFallback: { configured: false, loginUrl: null },
+            warnings: [],
+          },
+          {
+            id: 'keycloak',
+            name: 'Keycloak',
+            protocols: ['oidc', 'saml'],
+            configured: true,
+            loginMode: 'saml',
+            callbackPath: null,
+            teamSync: { enabled: true, claim: 'groups' },
+            samlFallback: {
+              configured: true,
+              loginUrl: 'https://sso.example.com/realms/mosaic/protocol/saml',
+            },
+            warnings: [],
+          },
+        ]}
+        onOidcSignIn={vi.fn()}
+      />,
+    );
+
+    expect(html).toContain('Continue with WorkOS');
+    expect(html).toContain('Continue with Keycloak (SAML)');
+    expect(html).toContain('https://sso.example.com/realms/mosaic/protocol/saml');
+  });
+});

apps/web/src/components/auth/sso-provider-buttons.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { SsoProviderDiscovery } from '@/lib/sso';
+
+interface SsoProviderButtonsProps {
+  providers: SsoProviderDiscovery[];
+  loadingProviderId?: string | null;
+  onOidcSignIn: (providerId: SsoProviderDiscovery['id']) => void;
+}
+
+export function SsoProviderButtons({
+  providers,
+  loadingProviderId = null,
+  onOidcSignIn,
+}: SsoProviderButtonsProps): React.ReactElement | null {
+  const visibleProviders = providers.filter((provider) => provider.configured);
+
+  if (visibleProviders.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mt-6 space-y-3 border-t border-surface-border pt-6">
+      <p className="text-sm font-medium text-text-secondary">Single sign-on</p>
+      <div className="space-y-3">
+        {visibleProviders.map((provider) => {
+          if (provider.loginMode === 'saml' && provider.samlFallback.loginUrl) {
+            return (
+              <a
+                key={provider.id}
+                href={provider.samlFallback.loginUrl}
+                className="flex w-full items-center justify-center rounded-lg border border-surface-border bg-surface-elevated px-4 py-2.5 text-sm font-medium text-text-primary transition-colors hover:border-accent/50 hover:text-accent"
+              >
+                Continue with {provider.name} (SAML)
+              </a>
+            );
+          }
+
+          return (
+            <button
+              key={provider.id}
+              type="button"
+              disabled={loadingProviderId === provider.id}
+              onClick={() => onOidcSignIn(provider.id)}
+              className="flex w-full items-center justify-center rounded-lg border border-surface-border bg-surface-elevated px-4 py-2.5 text-sm font-medium text-text-primary transition-colors hover:border-accent/50 hover:text-accent disabled:opacity-50"
+            >
+              {loadingProviderId === provider.id
+                ? `Redirecting to ${provider.name}...`
+                : `Continue with ${provider.name}`}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/web/src/components/chat/chat-input.tsx

@@ -1,52 +1,192 @@
 'use client';
 
-import { useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { ModelInfo } from '@/lib/types';
 
 interface ChatInputProps {
-  onSend: (content: string) => void;
+  onSend: (content: string, options?: { modelId?: string }) => void;
-  disabled?: boolean;
+  onStop?: () => void;
+  isStreaming?: boolean;
+  models: ModelInfo[];
+  selectedModelId: string;
+  onModelChange: (modelId: string) => void;
+  onRequestEditLastMessage?: () => string | null;
 }
 
-export function ChatInput({ onSend, disabled }: ChatInputProps): React.ReactElement {
+const MAX_HEIGHT = 220;
+
+export function ChatInput({
+  onSend,
+  onStop,
+  isStreaming = false,
+  models,
+  selectedModelId,
+  onModelChange,
+  onRequestEditLastMessage,
+}: ChatInputProps): React.ReactElement {
   const [value, setValue] = useState('');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const selectedModel = useMemo(
+    () => models.find((model) => model.id === selectedModelId) ?? models[0],
+    [models, selectedModelId],
+  );
 
-  function handleSubmit(e: React.FormEvent): void {
+  useEffect(() => {
-    e.preventDefault();
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = 'auto';
+    textarea.style.height = `${Math.min(textarea.scrollHeight, MAX_HEIGHT)}px`;
+  }, [value]);
+
+  useEffect(() => {
+    function handleGlobalFocus(event: KeyboardEvent): void {
+      if (
+        (event.metaKey || event.ctrlKey) &&
+        (event.key === '/' || event.key.toLowerCase() === 'k')
+      ) {
+        const target = event.target as HTMLElement | null;
+        if (target?.closest('input, textarea, [contenteditable="true"]')) return;
+        event.preventDefault();
+        textareaRef.current?.focus();
+      }
+    }
+
+    document.addEventListener('keydown', handleGlobalFocus);
+    return () => document.removeEventListener('keydown', handleGlobalFocus);
+  }, []);
+
+  function handleSubmit(event: React.FormEvent): void {
+    event.preventDefault();
     const trimmed = value.trim();
-    if (!trimmed || disabled) return;
+    if (!trimmed || isStreaming) return;
-    onSend(trimmed);
+    onSend(trimmed, { modelId: selectedModel?.id });
     setValue('');
     textareaRef.current?.focus();
   }
 
-  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>): void {
+  function handleKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>): void {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
-      e.preventDefault();
+      event.preventDefault();
-      handleSubmit(e);
+      handleSubmit(event);
+      return;
+    }
+
+    if (event.key === 'ArrowUp' && value.length === 0 && onRequestEditLastMessage) {
+      const lastMessage = onRequestEditLastMessage();
+      if (lastMessage) {
+        event.preventDefault();
+        setValue(lastMessage);
+      }
     }
   }
 
+  const charCount = value.length;
+  const tokenEstimate = Math.ceil(charCount / 4);
+
   return (
-    <form onSubmit={handleSubmit} className="border-t border-surface-border bg-surface-card p-4">
+    <form
-      <div className="flex items-end gap-3">
+      onSubmit={handleSubmit}
-        <textarea
+      className="border-t px-4 py-4 backdrop-blur-xl md:px-6"
-          ref={textareaRef}
+      style={{
-          value={value}
+        backgroundColor: 'color-mix(in srgb, var(--color-surface) 88%, transparent)',
-          onChange={(e) => setValue(e.target.value)}
+        borderColor: 'var(--color-border)',
-          onKeyDown={handleKeyDown}
+      }}
-          disabled={disabled}
+    >
-          rows={1}
+      <div
-          placeholder="Type a message... (Enter to send, Shift+Enter for newline)"
+        className="rounded-[28px] border p-3 shadow-[var(--shadow-ms-lg)]"
-          className="max-h-32 min-h-[2.5rem] flex-1 resize-none rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50"
+        style={{
-        />
+          backgroundColor: 'var(--color-surface-2)',
-        <button
+          borderColor: 'var(--color-border)',
-          type="submit"
+        }}
-          disabled={disabled || !value.trim()}
+      >
-          className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+        <div className="mb-3 flex flex-wrap items-center gap-3">
-        >
+          <label className="flex min-w-0 items-center gap-2 text-xs text-[var(--color-muted)]">
-          Send
+            <span className="uppercase tracking-[0.18em]">Model</span>
-        </button>
+            <select
+              value={selectedModelId}
+              onChange={(event) => onModelChange(event.target.value)}
+              className="rounded-full border px-3 py-1.5 text-sm outline-none"
+              style={{
+                backgroundColor: 'var(--color-surface)',
+                borderColor: 'var(--color-border)',
+                color: 'var(--color-text)',
+              }}
+            >
+              {models.map((model) => (
+                <option key={`${model.provider}:${model.id}`} value={model.id}>
+                  {model.name} · {model.provider}
+                </option>
+              ))}
+            </select>
+          </label>
+          <div className="ml-auto hidden items-center gap-2 text-xs text-[var(--color-muted)] md:flex">
+            <span className="rounded-full border border-[var(--color-border)] px-2 py-1">
+              ⌘/ focus
+            </span>
+            <span className="rounded-full border border-[var(--color-border)] px-2 py-1">
+              ⌘K focus
+            </span>
+            <span className="rounded-full border border-[var(--color-border)] px-2 py-1">
+              ⌘↵ send
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-end gap-3">
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+            onKeyDown={handleKeyDown}
+            disabled={isStreaming}
+            rows={1}
+            placeholder="Ask Mosaic something..."
+            className="min-h-[3.25rem] flex-1 resize-none bg-transparent px-1 py-2 text-sm outline-none placeholder:text-[var(--color-muted)] disabled:opacity-60"
+            style={{
+              color: 'var(--color-text)',
+              maxHeight: `${MAX_HEIGHT}px`,
+            }}
+          />
+
+          {isStreaming ? (
+            <button
+              type="button"
+              onClick={onStop}
+              className="inline-flex h-11 items-center gap-2 rounded-full border px-4 text-sm font-medium transition-colors"
+              style={{
+                backgroundColor: 'var(--color-surface)',
+                borderColor: 'var(--color-border)',
+                color: 'var(--color-text)',
+              }}
+            >
+              <span className="inline-block h-2.5 w-2.5 rounded-sm bg-[var(--color-danger)]" />
+              Stop
+            </button>
+          ) : (
+            <button
+              type="submit"
+              disabled={!value.trim()}
+              className="inline-flex h-11 items-center gap-2 rounded-full px-4 text-sm font-semibold text-white transition-all disabled:cursor-not-allowed disabled:opacity-45"
+              style={{ backgroundColor: 'var(--color-ms-blue-500)' }}
+            >
+              <span>Send</span>
+              <span aria-hidden="true">↗</span>
+            </button>
+          )}
+        </div>
+
+        <div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-[var(--color-muted)]">
+          <span>{charCount.toLocaleString()} chars</span>
+          <span>·</span>
+          <span>~{tokenEstimate.toLocaleString()} tokens</span>
+          {selectedModel ? (
+            <>
+              <span>·</span>
+              <span>{selectedModel.reasoning ? 'Reasoning on' : 'Fast response'}</span>
+            </>
+          ) : null}
+          <span className="ml-auto">Shift+Enter newline · Arrow ↑ edit last</span>
+        </div>
       </div>
     </form>
   );

apps/web/src/components/chat/conversation-list.tsx

@@ -7,6 +7,8 @@ import type { Conversation } from '@/lib/types';
 interface ConversationListProps {
   conversations: Conversation[];
   activeId: string | null;
+  isOpen: boolean;
+  onClose: () => void;
   onSelect: (id: string) => void;
   onNew: () => void;
   onRename: (id: string, title: string) => void;
@@ -20,7 +22,6 @@ interface ContextMenuState {
   y: number;
 }
 
-/** Format a date as relative time (e.g. "2h ago", "Yesterday"). */
 function formatRelativeTime(dateStr: string): string {
   const date = new Date(dateStr);
   const now = new Date();
@@ -40,6 +41,8 @@ function formatRelativeTime(dateStr: string): string {
 export function ConversationList({
   conversations,
   activeId,
+  isOpen,
+  onClose,
   onSelect,
   onNew,
   onRename,
@@ -54,24 +57,24 @@ export function ConversationList({
   const [showArchived, setShowArchived] = useState(false);
   const renameInputRef = useRef<HTMLInputElement>(null);
 
-  const activeConversations = conversations.filter((c) => !c.archived);
+  const activeConversations = conversations.filter((conversation) => !conversation.archived);
-  const archivedConversations = conversations.filter((c) => c.archived);
+  const archivedConversations = conversations.filter((conversation) => conversation.archived);
 
   const filteredActive = searchQuery
-    ? activeConversations.filter((c) =>
+    ? activeConversations.filter((conversation) =>
-        (c.title ?? 'Untitled').toLowerCase().includes(searchQuery.toLowerCase()),
+        (conversation.title ?? 'Untitled').toLowerCase().includes(searchQuery.toLowerCase()),
       )
     : activeConversations;
 
   const filteredArchived = searchQuery
-    ? archivedConversations.filter((c) =>
+    ? archivedConversations.filter((conversation) =>
-        (c.title ?? 'Untitled').toLowerCase().includes(searchQuery.toLowerCase()),
+        (conversation.title ?? 'Untitled').toLowerCase().includes(searchQuery.toLowerCase()),
       )
     : archivedConversations;
 
-  const handleContextMenu = useCallback((e: React.MouseEvent, conversationId: string) => {
+  const handleContextMenu = useCallback((event: React.MouseEvent, conversationId: string) => {
-    e.preventDefault();
+    event.preventDefault();
-    setContextMenu({ conversationId, x: e.clientX, y: e.clientY });
+    setContextMenu({ conversationId, x: event.clientX, y: event.clientY });
     setDeleteConfirmId(null);
   }, []);
 
@@ -97,7 +100,7 @@ export function ConversationList({
     }
     setRenamingId(null);
     setRenameValue('');
-  }, [renamingId, renameValue, onRename]);
+  }, [onRename, renameValue, renamingId]);
 
   const cancelRename = useCallback(() => {
     setRenamingId(null);
@@ -105,24 +108,20 @@ export function ConversationList({
   }, []);
 
   const handleRenameKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') commitRename();
+      if (event.key === 'Enter') commitRename();
-      if (e.key === 'Escape') cancelRename();
+      if (event.key === 'Escape') cancelRename();
     },
-    [commitRename, cancelRename],
+    [cancelRename, commitRename],
   );
 
-  const handleDeleteClick = useCallback((id: string) => {
-    setDeleteConfirmId(id);
-  }, []);
-
   const confirmDelete = useCallback(
     (id: string) => {
       onDelete(id);
       setDeleteConfirmId(null);
       closeContextMenu();
     },
-    [onDelete, closeContextMenu],
+    [closeContextMenu, onDelete],
   );
 
   const handleArchiveToggle = useCallback(
@@ -130,47 +129,59 @@ export function ConversationList({
       onArchive(id, archived);
       closeContextMenu();
     },
-    [onArchive, closeContextMenu],
+    [closeContextMenu, onArchive],
   );
 
-  const contextConv = contextMenu
+  const contextConversation = contextMenu
-    ? conversations.find((c) => c.id === contextMenu.conversationId)
+    ? conversations.find((conversation) => conversation.id === contextMenu.conversationId)
     : null;
 
-  function renderConversationItem(conv: Conversation): React.ReactElement {
+  function renderConversationItem(conversation: Conversation): React.ReactElement {
-    const isActive = activeId === conv.id;
+    const isActive = activeId === conversation.id;
-    const isRenaming = renamingId === conv.id;
+    const isRenaming = renamingId === conversation.id;
 
     return (
-      <div key={conv.id} className="group relative">
+      <div key={conversation.id} className="group relative">
         {isRenaming ? (
           <div className="px-3 py-2">
             <input
               ref={renameInputRef}
               value={renameValue}
-              onChange={(e) => setRenameValue(e.target.value)}
+              onChange={(event) => setRenameValue(event.target.value)}
               onBlur={commitRename}
               onKeyDown={handleRenameKeyDown}
-              className="w-full rounded border border-blue-500 bg-surface-elevated px-2 py-0.5 text-sm text-text-primary outline-none"
+              className="w-full rounded-xl border px-3 py-2 text-sm outline-none"
+              style={{
+                borderColor: 'var(--color-ms-blue-500)',
+                backgroundColor: 'var(--color-surface-2)',
+                color: 'var(--color-text)',
+              }}
               maxLength={255}
             />
           </div>
         ) : (
           <button
             type="button"
-            onClick={() => onSelect(conv.id)}
+            onClick={() => {
-            onDoubleClick={() => startRename(conv.id, conv.title)}
+              onSelect(conversation.id);
-            onContextMenu={(e) => handleContextMenu(e, conv.id)}
+              if (window.innerWidth < 768) onClose();
+            }}
+            onDoubleClick={() => startRename(conversation.id, conversation.title)}
+            onContextMenu={(event) => handleContextMenu(event, conversation.id)}
             className={cn(
-              'w-full px-3 py-2 text-left text-sm transition-colors',
+              'w-full rounded-2xl px-3 py-2 text-left text-sm transition-colors',
-              isActive
+              isActive ? 'shadow-[var(--shadow-ms-sm)]' : 'hover:bg-white/5',
-                ? 'bg-blue-600/20 text-blue-400'
-                : 'text-text-secondary hover:bg-surface-elevated',
             )}
+            style={{
+              backgroundColor: isActive
+                ? 'color-mix(in srgb, var(--color-ms-blue-500) 22%, transparent)'
+                : 'transparent',
+              color: isActive ? 'var(--color-text)' : 'var(--color-text-2)',
+            }}
           >
-            <span className="block truncate">{conv.title ?? 'Untitled'}</span>
+            <span className="block truncate font-medium">{conversation.title ?? 'Untitled'}</span>
-            <span className="block text-xs text-text-muted">
+            <span className="block text-xs text-[var(--color-muted)]">
-              {formatRelativeTime(conv.updatedAt)}
+              {formatRelativeTime(conversation.updatedAt)}
             </span>
           </button>
         )}
@@ -180,127 +191,138 @@ export function ConversationList({
 
   return (
     <>
-      {/* Backdrop to close context menu */}
+      {isOpen ? (
-      {contextMenu && (
+        <button
-        <div className="fixed inset-0 z-10" onClick={closeContextMenu} aria-hidden="true" />
+          type="button"
-      )}
+          className="fixed inset-0 z-20 bg-black/45 md:hidden"
+          onClick={onClose}
+          aria-label="Close conversation sidebar"
+        />
+      ) : null}
 
-      <div className="flex h-full w-64 flex-col border-r border-surface-border bg-surface-card">
+      {contextMenu ? (
-        {/* Header */}
+        <div className="fixed inset-0 z-10" onClick={closeContextMenu} aria-hidden="true" />
-        <div className="flex items-center justify-between p-3">
+      ) : null}
-          <h2 className="text-sm font-medium text-text-secondary">Conversations</h2>
+
+      <div
+        className={cn(
+          'fixed inset-y-0 left-0 z-30 flex h-full w-[18.5rem] flex-col border-r px-3 py-3 transition-transform duration-200 md:static md:z-auto',
+          isOpen
+            ? 'translate-x-0'
+            : '-translate-x-full md:w-0 md:min-w-0 md:overflow-hidden md:border-r-0 md:px-0 md:py-0',
+        )}
+        style={{
+          backgroundColor: 'var(--color-surface)',
+          borderColor: 'var(--color-border)',
+        }}
+      >
+        <div className="flex items-center justify-between px-1 pb-3">
+          <h2 className="text-sm font-medium text-[var(--color-text-2)]">Conversations</h2>
           <button
             type="button"
             onClick={onNew}
-            className="rounded-md px-2 py-1 text-xs text-blue-400 transition-colors hover:bg-surface-elevated"
+            className="rounded-full px-3 py-1 text-xs transition-colors hover:bg-white/5"
+            style={{ color: 'var(--color-ms-blue-400)' }}
           >
             + New
           </button>
         </div>
 
-        {/* Search input */}
+        <div className="pb-3">
-        <div className="px-3 pb-2">
           <input
             type="search"
             value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
+            onChange={(event) => setSearchQuery(event.target.value)}
-            placeholder="Search conversations\u2026"
+            placeholder="Search conversations…"
-            className="w-full rounded-md border border-surface-border bg-surface-elevated px-3 py-1.5 text-xs text-text-primary placeholder:text-text-muted focus:border-blue-500 focus:outline-none"
+            className="w-full rounded-2xl border px-3 py-2 text-xs placeholder:text-[var(--color-muted)] focus:outline-none"
+            style={{
+              backgroundColor: 'var(--color-surface-2)',
+              borderColor: 'var(--color-border)',
+              color: 'var(--color-text)',
+            }}
           />
         </div>
 
-        {/* Conversation list */}
+        <div className="flex-1 overflow-y-auto space-y-1">
-        <div className="flex-1 overflow-y-auto">
+          {filteredActive.length === 0 && !searchQuery ? (
-          {filteredActive.length === 0 && !searchQuery && (
+            <p className="px-1 py-2 text-xs text-[var(--color-muted)]">No conversations yet</p>
-            <p className="px-3 py-2 text-xs text-text-muted">No conversations yet</p>
+          ) : null}
-          )}
+          {filteredActive.length === 0 && searchQuery ? (
-          {filteredActive.length === 0 && searchQuery && (
+            <p className="px-1 py-2 text-xs text-[var(--color-muted)]">
-            <p className="px-3 py-2 text-xs text-text-muted">
+              No results for “{searchQuery}”
-              No results for &ldquo;{searchQuery}&rdquo;
             </p>
-          )}
+          ) : null}
-          {filteredActive.map((conv) => renderConversationItem(conv))}
+          {filteredActive.map((conversation) => renderConversationItem(conversation))}
 
-          {/* Archived section */}
+          {archivedConversations.length > 0 ? (
-          {archivedConversations.length > 0 && (
+            <div className="pt-2">
-            <div className="mt-2">
               <button
                 type="button"
-                onClick={() => setShowArchived((v) => !v)}
+                onClick={() => setShowArchived((prev) => !prev)}
-                className="flex w-full items-center gap-1 px-3 py-1 text-xs text-text-muted transition-colors hover:text-text-secondary"
+                className="flex w-full items-center gap-2 px-1 py-1 text-xs text-[var(--color-muted)] transition-colors hover:text-[var(--color-text-2)]"
               >
                 <span
-                  className={cn(
+                  className={cn('inline-block transition-transform', showArchived && 'rotate-90')}
-                    'inline-block transition-transform',
-                    showArchived ? 'rotate-90' : '',
-                  )}
                 >
-                  &#9658;
+                  ▶
                 </span>
                 Archived ({archivedConversations.length})
               </button>
-              {showArchived && (
+              {showArchived ? (
-                <div className="opacity-60">
+                <div className="mt-1 space-y-1 opacity-70">
-                  {filteredArchived.map((conv) => renderConversationItem(conv))}
+                  {filteredArchived.map((conversation) => renderConversationItem(conversation))}
                 </div>
-              )}
+              ) : null}
             </div>
-          )}
+          ) : null}
         </div>
       </div>
 
-      {/* Context menu */}
+      {contextMenu && contextConversation ? (
-      {contextMenu && contextConv && (
         <div
-          className="fixed z-20 min-w-36 rounded-md border border-surface-border bg-surface-card py-1 shadow-lg"
+          className="fixed z-30 min-w-40 rounded-2xl border py-1 shadow-[var(--shadow-ms-lg)]"
-          style={{ top: contextMenu.y, left: contextMenu.x }}
+          style={{
+            top: contextMenu.y,
+            left: contextMenu.x,
+            backgroundColor: 'var(--color-surface)',
+            borderColor: 'var(--color-border)',
+          }}
         >
           <button
             type="button"
-            className="w-full px-3 py-1.5 text-left text-sm text-text-secondary hover:bg-surface-elevated"
+            className="w-full px-3 py-2 text-left text-sm text-[var(--color-text-2)] transition-colors hover:bg-white/5"
-            onClick={() => startRename(contextConv.id, contextConv.title)}
+            onClick={() => startRename(contextConversation.id, contextConversation.title)}
           >
             Rename
           </button>
           <button
             type="button"
-            className="w-full px-3 py-1.5 text-left text-sm text-text-secondary hover:bg-surface-elevated"
+            className="w-full px-3 py-2 text-left text-sm text-[var(--color-text-2)] transition-colors hover:bg-white/5"
-            onClick={() => handleArchiveToggle(contextConv.id, !contextConv.archived)}
+            onClick={() =>
+              handleArchiveToggle(contextConversation.id, !contextConversation.archived)
+            }
           >
-            {contextConv.archived ? 'Unarchive' : 'Archive'}
+            {contextConversation.archived ? 'Restore' : 'Archive'}
           </button>
-          <hr className="my-1 border-surface-border" />
+          {deleteConfirmId === contextConversation.id ? (
-          {deleteConfirmId === contextConv.id ? (
+            <button
-            <div className="px-3 py-1.5">
+              type="button"
-              <p className="mb-1.5 text-xs text-red-400">Delete this conversation?</p>
+              className="w-full px-3 py-2 text-left text-sm text-[var(--color-danger)] transition-colors hover:bg-white/5"
-              <div className="flex gap-2">
+              onClick={() => confirmDelete(contextConversation.id)}
-                <button
+            >
-                  type="button"
+              Confirm delete
-                  className="rounded bg-red-600 px-2 py-0.5 text-xs text-white hover:bg-red-700"
+            </button>
-                  onClick={() => confirmDelete(contextConv.id)}
-                >
-                  Delete
-                </button>
-                <button
-                  type="button"
-                  className="rounded px-2 py-0.5 text-xs text-text-muted hover:bg-surface-elevated"
-                  onClick={() => setDeleteConfirmId(null)}
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
           ) : (
             <button
               type="button"
-              className="w-full px-3 py-1.5 text-left text-sm text-red-400 hover:bg-surface-elevated"
+              className="w-full px-3 py-2 text-left text-sm text-[var(--color-danger)] transition-colors hover:bg-white/5"
-              onClick={() => handleDeleteClick(contextConv.id)}
+              onClick={() => setDeleteConfirmId(contextConversation.id)}
             >
-              Delete
+              Delete…
             </button>
           )}
         </div>
-      )}
+      ) : null}
     </>
   );
 }

apps/web/src/components/chat/conversation-sidebar.tsx

@@ -0,0 +1,576 @@
+'use client';
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { api } from '@/lib/api';
+import type { Conversation, Project } from '@/lib/types';
+
+export interface ConversationSummary {
+  id: string;
+  title: string | null;
+  projectId: string | null;
+  updatedAt: string;
+  archived?: boolean;
+}
+
+export interface ConversationSidebarRef {
+  refresh: () => void;
+  addConversation: (conversation: ConversationSummary) => void;
+}
+
+interface ConversationSidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  currentConversationId: string | null;
+  onSelectConversation: (conversationId: string | null) => void;
+  onNewConversation: (projectId?: string | null) => void;
+}
+
+interface GroupedConversations {
+  key: string;
+  label: string;
+  projectId: string | null;
+  conversations: ConversationSummary[];
+}
+
+function toSummary(conversation: Conversation): ConversationSummary {
+  return {
+    id: conversation.id,
+    title: conversation.title,
+    projectId: conversation.projectId,
+    updatedAt: conversation.updatedAt,
+    archived: conversation.archived,
+  };
+}
+
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMinutes = Math.floor(diffMs / 60_000);
+  const diffHours = Math.floor(diffMs / 3_600_000);
+  const diffDays = Math.floor(diffMs / 86_400_000);
+
+  if (diffMinutes < 1) return 'Just now';
+  if (diffMinutes < 60) return `${diffMinutes}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays === 1) return 'Yesterday';
+  if (diffDays < 7) return `${diffDays}d ago`;
+
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
+export const ConversationSidebar = forwardRef<ConversationSidebarRef, ConversationSidebarProps>(
+  function ConversationSidebar(
+    { isOpen, onClose, currentConversationId, onSelectConversation, onNewConversation },
+    ref,
+  ): React.ReactElement {
+    const [conversations, setConversations] = useState<ConversationSummary[]>([]);
+    const [projects, setProjects] = useState<Project[]>([]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [renamingId, setRenamingId] = useState<string | null>(null);
+    const [renameValue, setRenameValue] = useState('');
+    const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
+    const [hoveredId, setHoveredId] = useState<string | null>(null);
+    const renameInputRef = useRef<HTMLInputElement>(null);
+
+    const loadSidebarData = useCallback(async (): Promise<void> => {
+      try {
+        setIsLoading(true);
+        setError(null);
+
+        const [loadedConversations, loadedProjects] = await Promise.all([
+          api<Conversation[]>('/api/conversations'),
+          api<Project[]>('/api/projects').catch(() => [] as Project[]),
+        ]);
+
+        setConversations(
+          loadedConversations
+            .filter((conversation) => !conversation.archived)
+            .map(toSummary)
+            .sort((a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt)),
+        );
+        setProjects(loadedProjects);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load conversations');
+      } finally {
+        setIsLoading(false);
+      }
+    }, []);
+
+    useEffect(() => {
+      void loadSidebarData();
+    }, [loadSidebarData]);
+
+    useEffect(() => {
+      if (!renamingId) return;
+      const timer = window.setTimeout(() => renameInputRef.current?.focus(), 0);
+      return () => window.clearTimeout(timer);
+    }, [renamingId]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        refresh: () => {
+          void loadSidebarData();
+        },
+        addConversation: (conversation) => {
+          setConversations((prev) => {
+            const next = [conversation, ...prev.filter((item) => item.id !== conversation.id)];
+            return next.sort((a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt));
+          });
+        },
+      }),
+      [loadSidebarData],
+    );
+
+    const filteredConversations = useMemo(() => {
+      const query = searchQuery.trim().toLowerCase();
+      if (!query) return conversations;
+
+      return conversations.filter((conversation) =>
+        (conversation.title ?? 'Untitled conversation').toLowerCase().includes(query),
+      );
+    }, [conversations, searchQuery]);
+
+    const groupedConversations = useMemo<GroupedConversations[]>(() => {
+      if (projects.length === 0) {
+        return [
+          {
+            key: 'all',
+            label: 'All conversations',
+            projectId: null,
+            conversations: filteredConversations,
+          },
+        ];
+      }
+
+      const byProject = new Map<string | null, ConversationSummary[]>();
+      for (const conversation of filteredConversations) {
+        const key = conversation.projectId ?? null;
+        const items = byProject.get(key) ?? [];
+        items.push(conversation);
+        byProject.set(key, items);
+      }
+
+      const groups: GroupedConversations[] = [];
+
+      for (const project of projects) {
+        const projectConversations = byProject.get(project.id);
+        if (!projectConversations?.length) continue;
+
+        groups.push({
+          key: project.id,
+          label: project.name,
+          projectId: project.id,
+          conversations: projectConversations,
+        });
+      }
+
+      const ungrouped = byProject.get(null);
+      if (ungrouped?.length) {
+        groups.push({
+          key: 'general',
+          label: 'General',
+          projectId: null,
+          conversations: ungrouped,
+        });
+      }
+
+      if (groups.length === 0) {
+        groups.push({
+          key: 'all',
+          label: 'All conversations',
+          projectId: null,
+          conversations: filteredConversations,
+        });
+      }
+
+      return groups;
+    }, [filteredConversations, projects]);
+
+    const startRename = useCallback((conversation: ConversationSummary): void => {
+      setPendingDeleteId(null);
+      setRenamingId(conversation.id);
+      setRenameValue(conversation.title ?? '');
+    }, []);
+
+    const cancelRename = useCallback((): void => {
+      setRenamingId(null);
+      setRenameValue('');
+    }, []);
+
+    const commitRename = useCallback(async (): Promise<void> => {
+      if (!renamingId) return;
+
+      const title = renameValue.trim() || 'Untitled conversation';
+
+      try {
+        const updated = await api<Conversation>(`/api/conversations/${renamingId}`, {
+          method: 'PATCH',
+          body: { title },
+        });
+
+        const summary = toSummary(updated);
+        setConversations((prev) =>
+          prev
+            .map((conversation) => (conversation.id === renamingId ? summary : conversation))
+            .sort((a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt)),
+        );
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to rename conversation');
+      } finally {
+        setRenamingId(null);
+        setRenameValue('');
+      }
+    }, [renameValue, renamingId]);
+
+    const deleteConversation = useCallback(
+      async (conversationId: string): Promise<void> => {
+        try {
+          await api<void>(`/api/conversations/${conversationId}`, { method: 'DELETE' });
+          setConversations((prev) =>
+            prev.filter((conversation) => conversation.id !== conversationId),
+          );
+          if (currentConversationId === conversationId) {
+            onSelectConversation(null);
+          }
+        } catch (err) {
+          setError(err instanceof Error ? err.message : 'Failed to delete conversation');
+        } finally {
+          setPendingDeleteId(null);
+        }
+      },
+      [currentConversationId, onSelectConversation],
+    );
+
+    return (
+      <>
+        {isOpen ? (
+          <button
+            type="button"
+            aria-label="Close conversation sidebar"
+            className="fixed inset-0 z-30 bg-black/50 md:hidden"
+            onClick={onClose}
+          />
+        ) : null}
+
+        <aside
+          aria-label="Conversation sidebar"
+          className="fixed left-0 top-0 z-40 flex h-full flex-col border-r md:relative md:z-0"
+          style={{
+            width: 'var(--sidebar-w)',
+            background: 'var(--bg)',
+            borderColor: 'var(--border)',
+            transform: isOpen ? 'translateX(0)' : 'translateX(calc(-1 * var(--sidebar-w)))',
+            transition: 'transform 220ms var(--ease)',
+          }}
+        >
+          <div
+            className="flex items-center justify-between border-b px-4 py-3"
+            style={{ borderColor: 'var(--border)' }}
+          >
+            <div>
+              <p className="text-sm font-semibold" style={{ color: 'var(--text)' }}>
+                Conversations
+              </p>
+              <p className="text-xs" style={{ color: 'var(--muted)' }}>
+                Search, rename, and manage threads
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-md p-2 md:hidden"
+              style={{ color: 'var(--text-2)' }}
+            >
+              <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor">
+                <path strokeWidth="2" strokeLinecap="round" d="M6 6l12 12M18 6 6 18" />
+              </svg>
+            </button>
+          </div>
+
+          <div className="space-y-3 border-b p-3" style={{ borderColor: 'var(--border)' }}>
+            <button
+              type="button"
+              onClick={() => onNewConversation(null)}
+              className="flex w-full items-center justify-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-colors"
+              style={{
+                borderColor: 'var(--primary)',
+                background: 'color-mix(in srgb, var(--primary) 12%, transparent)',
+                color: 'var(--text)',
+              }}
+            >
+              <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor">
+                <path strokeWidth="2" strokeLinecap="round" d="M12 5v14M5 12h14" />
+              </svg>
+              New conversation
+            </button>
+
+            <div className="relative">
+              <svg
+                viewBox="0 0 24 24"
+                className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2"
+                fill="none"
+                stroke="currentColor"
+                style={{ color: 'var(--muted)' }}
+              >
+                <circle cx="11" cy="11" r="7" strokeWidth="2" />
+                <path d="m20 20-3.5-3.5" strokeWidth="2" strokeLinecap="round" />
+              </svg>
+              <input
+                type="search"
+                value={searchQuery}
+                onChange={(event) => setSearchQuery(event.target.value)}
+                placeholder="Search conversations"
+                className="w-full rounded-lg border px-9 py-2 text-sm outline-none"
+                style={{
+                  background: 'var(--surface)',
+                  borderColor: 'var(--border)',
+                  color: 'var(--text)',
+                }}
+              />
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-3">
+            {isLoading ? (
+              <div className="py-8 text-center text-sm" style={{ color: 'var(--muted)' }}>
+                Loading conversations...
+              </div>
+            ) : error ? (
+              <div
+                className="space-y-3 rounded-xl border p-4 text-sm"
+                style={{
+                  background: 'color-mix(in srgb, var(--danger) 10%, var(--surface))',
+                  borderColor: 'color-mix(in srgb, var(--danger) 35%, var(--border))',
+                  color: 'var(--text)',
+                }}
+              >
+                <p>{error}</p>
+                <button
+                  type="button"
+                  onClick={() => void loadSidebarData()}
+                  className="rounded-md px-3 py-1.5 text-xs font-medium"
+                  style={{ background: 'var(--danger)', color: 'white' }}
+                >
+                  Retry
+                </button>
+              </div>
+            ) : filteredConversations.length === 0 ? (
+              <div className="py-10 text-center">
+                <p className="text-sm" style={{ color: 'var(--text-2)' }}>
+                  {searchQuery ? 'No matching conversations' : 'No conversations yet'}
+                </p>
+                <p className="mt-1 text-xs" style={{ color: 'var(--muted)' }}>
+                  {searchQuery ? 'Try another title search.' : 'Start a new conversation to begin.'}
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {groupedConversations.map((group) => (
+                  <section key={group.key} className="space-y-2">
+                    {projects.length > 0 ? (
+                      <div className="flex items-center justify-between px-1">
+                        <h3
+                          className="text-[11px] font-semibold uppercase tracking-[0.16em]"
+                          style={{ color: 'var(--muted)' }}
+                        >
+                          {group.label}
+                        </h3>
+                        <button
+                          type="button"
+                          onClick={() => onNewConversation(group.projectId)}
+                          className="rounded-md px-2 py-1 text-[11px] font-medium"
+                          style={{ color: 'var(--ms-blue-500)' }}
+                        >
+                          New
+                        </button>
+                      </div>
+                    ) : null}
+
+                    <div className="space-y-1">
+                      {group.conversations.map((conversation) => {
+                        const isActive = currentConversationId === conversation.id;
+                        const isRenaming = renamingId === conversation.id;
+                        const showActions =
+                          hoveredId === conversation.id ||
+                          isRenaming ||
+                          pendingDeleteId === conversation.id;
+
+                        return (
+                          <div
+                            key={conversation.id}
+                            onMouseEnter={() => setHoveredId(conversation.id)}
+                            onMouseLeave={() =>
+                              setHoveredId((current) =>
+                                current === conversation.id ? null : current,
+                              )
+                            }
+                            className="rounded-xl border p-2 transition-colors"
+                            style={{
+                              borderColor: isActive
+                                ? 'color-mix(in srgb, var(--primary) 60%, var(--border))'
+                                : 'transparent',
+                              background: isActive ? 'var(--surface-2)' : 'transparent',
+                            }}
+                          >
+                            {isRenaming ? (
+                              <input
+                                ref={renameInputRef}
+                                value={renameValue}
+                                onChange={(event) => setRenameValue(event.target.value)}
+                                onBlur={() => void commitRename()}
+                                onKeyDown={(event) => {
+                                  if (event.key === 'Enter') {
+                                    event.preventDefault();
+                                    void commitRename();
+                                  }
+                                  if (event.key === 'Escape') {
+                                    event.preventDefault();
+                                    cancelRename();
+                                  }
+                                }}
+                                maxLength={255}
+                                className="w-full rounded-md border px-2 py-1.5 text-sm outline-none"
+                                style={{
+                                  background: 'var(--surface)',
+                                  borderColor: 'var(--ms-blue-500)',
+                                  color: 'var(--text)',
+                                }}
+                              />
+                            ) : (
+                              <button
+                                type="button"
+                                onClick={() => onSelectConversation(conversation.id)}
+                                className="block w-full text-left"
+                              >
+                                <div className="flex items-start gap-2">
+                                  <div className="min-w-0 flex-1">
+                                    <p
+                                      className="truncate text-sm font-medium"
+                                      style={{
+                                        color: isActive ? 'var(--text)' : 'var(--text-2)',
+                                      }}
+                                    >
+                                      {conversation.title ?? 'Untitled conversation'}
+                                    </p>
+                                    <p className="mt-1 text-xs" style={{ color: 'var(--muted)' }}>
+                                      {formatRelativeTime(conversation.updatedAt)}
+                                    </p>
+                                  </div>
+
+                                  {showActions ? (
+                                    <div className="flex items-center gap-1">
+                                      <button
+                                        type="button"
+                                        onClick={(event) => {
+                                          event.stopPropagation();
+                                          startRename(conversation);
+                                        }}
+                                        className="rounded-md p-1.5 transition-colors"
+                                        style={{ color: 'var(--text-2)' }}
+                                        aria-label={`Rename ${conversation.title ?? 'conversation'}`}
+                                      >
+                                        <svg
+                                          viewBox="0 0 24 24"
+                                          className="h-3.5 w-3.5"
+                                          fill="none"
+                                          stroke="currentColor"
+                                        >
+                                          <path
+                                            d="M4 20h4l10.5-10.5a1.4 1.4 0 0 0 0-2L16.5 5.5a1.4 1.4 0 0 0-2 0L4 16v4Z"
+                                            strokeWidth="1.8"
+                                            strokeLinejoin="round"
+                                          />
+                                        </svg>
+                                      </button>
+                                      <button
+                                        type="button"
+                                        onClick={(event) => {
+                                          event.stopPropagation();
+                                          setPendingDeleteId((current) =>
+                                            current === conversation.id ? null : conversation.id,
+                                          );
+                                          setRenamingId(null);
+                                        }}
+                                        className="rounded-md p-1.5 transition-colors"
+                                        style={{ color: 'var(--danger)' }}
+                                        aria-label={`Delete ${conversation.title ?? 'conversation'}`}
+                                      >
+                                        <svg
+                                          viewBox="0 0 24 24"
+                                          className="h-3.5 w-3.5"
+                                          fill="none"
+                                          stroke="currentColor"
+                                        >
+                                          <path
+                                            d="M4 7h16M10 11v6M14 11v6M6 7l1 12h10l1-12M9 7V4h6v3"
+                                            strokeWidth="1.8"
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </div>
+                                  ) : null}
+                                </div>
+                              </button>
+                            )}
+
+                            {pendingDeleteId === conversation.id ? (
+                              <div
+                                className="mt-2 flex items-center justify-between rounded-lg border px-2 py-2"
+                                style={{
+                                  borderColor:
+                                    'color-mix(in srgb, var(--danger) 45%, var(--border))',
+                                  background:
+                                    'color-mix(in srgb, var(--danger) 10%, var(--surface))',
+                                }}
+                              >
+                                <p className="text-xs" style={{ color: 'var(--text-2)' }}>
+                                  Delete this conversation?
+                                </p>
+                                <div className="flex items-center gap-2">
+                                  <button
+                                    type="button"
+                                    onClick={() => setPendingDeleteId(null)}
+                                    className="rounded-md px-2 py-1 text-xs"
+                                    style={{ color: 'var(--text-2)' }}
+                                  >
+                                    Cancel
+                                  </button>
+                                  <button
+                                    type="button"
+                                    onClick={() => void deleteConversation(conversation.id)}
+                                    className="rounded-md px-2 py-1 text-xs font-medium"
+                                    style={{ background: 'var(--danger)', color: 'white' }}
+                                  >
+                                    Delete
+                                  </button>
+                                </div>
+                              </div>
+                            ) : null}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </section>
+                ))}
+              </div>
+            )}
+          </div>
+        </aside>
+      </>
+    );
+  },
+);

apps/web/src/components/chat/message-bubble.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useCallback, useMemo, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { cn } from '@/lib/cn';
 import type { Message } from '@/lib/types';
 
@@ -9,27 +11,261 @@ interface MessageBubbleProps {
 
 export function MessageBubble({ message }: MessageBubbleProps): React.ReactElement {
   const isUser = message.role === 'user';
+  const isSystem = message.role === 'system';
+  const [copied, setCopied] = useState(false);
+  const [thinkingExpanded, setThinkingExpanded] = useState(false);
+  const { response, thinking } = useMemo(
+    () => parseThinking(message.content, message.thinking),
+    [message.content, message.thinking],
+  );
+
+  const handleCopy = useCallback(async (): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(response);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1800);
+    } catch (error) {
+      console.error('[MessageBubble] Failed to copy message:', error);
+    }
+  }, [response]);
+
+  if (isSystem) {
+    return (
+      <div className="flex justify-center">
+        <div
+          className="max-w-[42rem] rounded-full border px-3 py-1.5 text-xs backdrop-blur-sm"
+          style={{
+            borderColor: 'var(--color-border)',
+            backgroundColor: 'color-mix(in srgb, var(--color-surface) 70%, transparent)',
+            color: 'var(--color-muted)',
+          }}
+        >
+          <span>{response}</span>
+        </div>
+      </div>
+    );
+  }
 
   return (
-    <div className={cn('flex', isUser ? 'justify-end' : 'justify-start')}>
+    <div className={cn('group flex', isUser ? 'justify-end' : 'justify-start')}>
       <div
         className={cn(
-          'max-w-[75%] rounded-xl px-4 py-3 text-sm',
+          'flex max-w-[min(78ch,85%)] flex-col gap-2',
-          isUser
+          isUser ? 'items-end' : 'items-start',
-            ? 'bg-blue-600 text-white'
-            : 'border border-surface-border bg-surface-elevated text-text-primary',
         )}
       >
-        <div className="whitespace-pre-wrap break-words">{message.content}</div>
+        <div className={cn('flex items-center gap-2 text-[11px]', isUser && 'flex-row-reverse')}>
+          <span className="font-medium text-[var(--color-text-2)]">
+            {isUser ? 'You' : 'Assistant'}
+          </span>
+          {!isUser && message.model ? (
+            <span
+              className="rounded-full border px-2 py-0.5 font-medium text-[var(--color-text-2)]"
+              style={{
+                backgroundColor: 'color-mix(in srgb, var(--color-surface-2) 82%, transparent)',
+                borderColor: 'var(--color-border)',
+              }}
+              title={message.provider ? `Provider: ${message.provider}` : undefined}
+            >
+              {message.model}
+            </span>
+          ) : null}
+          {!isUser && typeof message.totalTokens === 'number' && message.totalTokens > 0 ? (
+            <span
+              className="rounded-full border px-2 py-0.5 text-[var(--color-muted)]"
+              style={{ borderColor: 'var(--color-border)' }}
+            >
+              {formatTokenCount(message.totalTokens)}
+            </span>
+          ) : null}
+          <span className="text-[var(--color-muted)]">{formatTimestamp(message.createdAt)}</span>
+        </div>
+
+        {thinking && !isUser ? (
+          <div
+            className="w-full overflow-hidden rounded-2xl border"
+            style={{
+              backgroundColor: 'color-mix(in srgb, var(--color-surface-2) 88%, transparent)',
+              borderColor: 'var(--color-border)',
+            }}
+          >
+            <button
+              type="button"
+              onClick={() => setThinkingExpanded((prev) => !prev)}
+              className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs font-medium text-[var(--color-text-2)] transition-colors hover:bg-black/5"
+              aria-expanded={thinkingExpanded}
+            >
+              <span
+                className={cn(
+                  'inline-block text-[10px] transition-transform',
+                  thinkingExpanded && 'rotate-90',
+                )}
+              >
+                ▶
+              </span>
+              <span>Chain of thought</span>
+              <span className="ml-auto text-[var(--color-muted)]">
+                {thinkingExpanded ? 'Hide' : 'Show'}
+              </span>
+            </button>
+            {thinkingExpanded ? (
+              <pre
+                className="overflow-x-auto border-t px-3 py-3 font-mono text-xs leading-6 whitespace-pre-wrap"
+                style={{
+                  borderColor: 'var(--color-border)',
+                  backgroundColor: 'var(--color-bg-deep)',
+                  color: 'var(--color-text-2)',
+                }}
+              >
+                {thinking}
+              </pre>
+            ) : null}
+          </div>
+        ) : null}
+
         <div
-          className={cn('mt-1 text-right text-xs', isUser ? 'text-blue-200' : 'text-text-muted')}
+          className={cn(
+            'relative w-full rounded-3xl px-4 py-3 text-sm shadow-[var(--shadow-ms-sm)]',
+            !isUser && 'border',
+          )}
+          style={{
+            backgroundColor: isUser ? 'var(--color-ms-blue-500)' : 'var(--color-surface)',
+            color: isUser ? '#fff' : 'var(--color-text)',
+            borderColor: isUser ? 'transparent' : 'var(--color-border)',
+          }}
         >
-          {new Date(message.createdAt).toLocaleTimeString([], {
+          <div className="max-w-none">
-            hour: '2-digit',
+            <ReactMarkdown
-            minute: '2-digit',
+              components={{
-          })}
+                p: ({ children }) => <p className="mb-3 leading-7 last:mb-0">{children}</p>,
+                ul: ({ children }) => <ul className="mb-3 list-disc pl-5 last:mb-0">{children}</ul>,
+                ol: ({ children }) => (
+                  <ol className="mb-3 list-decimal pl-5 last:mb-0">{children}</ol>
+                ),
+                li: ({ children }) => <li className="mb-1">{children}</li>,
+                a: ({ href, children }) => (
+                  <a
+                    href={href}
+                    className="font-medium underline underline-offset-4"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {children}
+                  </a>
+                ),
+                pre: ({ children }) => <div className="mb-3 last:mb-0">{children}</div>,
+                code: ({ className, children, ...props }) => {
+                  const language = className?.replace('language-', '');
+                  const content = String(children).replace(/\n$/, '');
+                  const isInline = !className;
+
+                  if (isInline) {
+                    return (
+                      <code
+                        className="rounded-md px-1.5 py-0.5 font-mono text-[0.9em]"
+                        style={{
+                          backgroundColor:
+                            'color-mix(in srgb, var(--color-bg-deep) 76%, transparent)',
+                        }}
+                        {...props}
+                      >
+                        {children}
+                      </code>
+                    );
+                  }
+
+                  return (
+                    <div
+                      className="overflow-hidden rounded-2xl border"
+                      style={{
+                        backgroundColor: 'var(--color-bg-deep)',
+                        borderColor: 'var(--color-border)',
+                      }}
+                    >
+                      <div
+                        className="border-b px-3 py-2 font-mono text-[11px] uppercase tracking-[0.18em] text-[var(--color-muted)]"
+                        style={{ borderColor: 'var(--color-border)' }}
+                      >
+                        {language || 'code'}
+                      </div>
+                      <pre className="overflow-x-auto p-3">
+                        <code
+                          className={cn('font-mono text-[13px] leading-6', className)}
+                          {...props}
+                        >
+                          {content}
+                        </code>
+                      </pre>
+                    </div>
+                  );
+                },
+                blockquote: ({ children }) => (
+                  <blockquote
+                    className="mb-3 border-l-2 pl-4 italic last:mb-0"
+                    style={{ borderColor: 'var(--color-ms-blue-500)' }}
+                  >
+                    {children}
+                  </blockquote>
+                ),
+              }}
+            >
+              {response}
+            </ReactMarkdown>
+          </div>
+
+          <button
+            type="button"
+            onClick={() => void handleCopy()}
+            className="absolute -right-2 -top-2 rounded-full border p-2 opacity-0 shadow-[var(--shadow-ms-md)] transition-all group-hover:opacity-100 focus:opacity-100"
+            style={{
+              backgroundColor: 'var(--color-surface)',
+              borderColor: 'var(--color-border)',
+              color: copied ? 'var(--color-success)' : 'var(--color-text-2)',
+            }}
+            aria-label={copied ? 'Copied' : 'Copy message'}
+            title={copied ? 'Copied' : 'Copy message'}
+          >
+            {copied ? '✓' : '⧉'}
+          </button>
         </div>
       </div>
     </div>
   );
 }
+
+function parseThinking(
+  content: string,
+  thinking?: string,
+): { response: string; thinking: string | null } {
+  if (thinking) {
+    return { response: content, thinking };
+  }
+
+  const regex = /<(?:thinking|think)>([\s\S]*?)<\/(?:thinking|think)>/gi;
+  const matches = [...content.matchAll(regex)];
+  if (matches.length === 0) {
+    return { response: content, thinking: null };
+  }
+
+  return {
+    response: content.replace(regex, '').trim(),
+    thinking:
+      matches
+        .map((match) => match[1]?.trim() ?? '')
+        .filter(Boolean)
+        .join('\n\n') || null,
+  };
+}
+
+function formatTimestamp(createdAt: string): string {
+  return new Date(createdAt).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function formatTokenCount(totalTokens: number): string {
+  if (totalTokens >= 1_000_000) return `${(totalTokens / 1_000_000).toFixed(1)}M tokens`;
+  if (totalTokens >= 1_000) return `${(totalTokens / 1_000).toFixed(1)}k tokens`;
+  return `${totalTokens} tokens`;
+}

apps/web/src/components/chat/streaming-message.tsx

@@ -1,26 +1,97 @@
 'use client';
 
-/** Renders an in-progress assistant message from streaming text. */
+import { useEffect, useMemo, useState } from 'react';
+
 interface StreamingMessageProps {
   text: string;
+  modelName?: string | null;
+  thinking?: string;
 }
 
-export function StreamingMessage({ text }: StreamingMessageProps): React.ReactElement {
+const WAITING_QUIPS = [
+  'The AI is warming up... give it a moment.',
+  'Brewing some thoughts...',
+  'Summoning intelligence from the void...',
+  'Consulting the silicon oracle...',
+  'Teaching electrons to think...',
+];
+
+const TIMEOUT_QUIPS = [
+  'The model wandered off. Let’s try to find it again.',
+  'Response is taking the scenic route.',
+  'That answer is clearly overthinking things.',
+  'Still working. Either brilliance or a detour.',
+];
+
+export function StreamingMessage({
+  text,
+  modelName,
+  thinking,
+}: StreamingMessageProps): React.ReactElement {
+  const [elapsedMs, setElapsedMs] = useState(0);
+
+  useEffect(() => {
+    setElapsedMs(0);
+    const startedAt = Date.now();
+    const timer = window.setInterval(() => {
+      setElapsedMs(Date.now() - startedAt);
+    }, 1000);
+    return () => window.clearInterval(timer);
+  }, [text, modelName, thinking]);
+
+  const quip = useMemo(() => {
+    if (elapsedMs >= 18_000) {
+      return TIMEOUT_QUIPS[Math.floor((elapsedMs / 1000) % TIMEOUT_QUIPS.length)];
+    }
+    if (elapsedMs >= 4_000) {
+      return WAITING_QUIPS[Math.floor((elapsedMs / 1000) % WAITING_QUIPS.length)];
+    }
+    return null;
+  }, [elapsedMs]);
+
   return (
     <div className="flex justify-start">
-      <div className="max-w-[75%] rounded-xl border border-surface-border bg-surface-elevated px-4 py-3 text-sm text-text-primary">
+      <div
+        className="max-w-[min(78ch,85%)] rounded-3xl border px-4 py-3 text-sm shadow-[var(--shadow-ms-sm)]"
+        style={{
+          backgroundColor: 'var(--color-surface)',
+          borderColor: 'var(--color-border)',
+          color: 'var(--color-text)',
+        }}
+      >
+        <div className="mb-2 flex items-center gap-2 text-[11px]">
+          <span className="font-medium text-[var(--color-text-2)]">Assistant</span>
+          {modelName ? (
+            <span className="rounded-full border border-[var(--color-border)] px-2 py-0.5 text-[var(--color-text-2)]">
+              {modelName}
+            </span>
+          ) : null}
+          <span className="text-[var(--color-muted)]">{text ? 'Responding…' : 'Thinking…'}</span>
+        </div>
         {text ? (
           <div className="whitespace-pre-wrap break-words">{text}</div>
         ) : (
-          <div className="flex items-center gap-2 text-text-muted">
+          <div className="flex items-center gap-2 text-[var(--color-muted)]">
-            <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500" />
+            <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-[var(--color-ms-blue-500)]" />
-            <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500 [animation-delay:0.2s]" />
+            <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-[var(--color-ms-blue-500)] [animation-delay:0.2s]" />
-            <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500 [animation-delay:0.4s]" />
+            <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-[var(--color-ms-blue-500)] [animation-delay:0.4s]" />
           </div>
         )}
-        <div className="mt-1 flex items-center gap-1 text-xs text-text-muted">
+        {thinking ? (
-          <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500" />
+          <div
-          {text ? 'Responding...' : 'Thinking...'}
+            className="mt-3 rounded-2xl border px-3 py-2 font-mono text-xs whitespace-pre-wrap"
+            style={{
+              backgroundColor: 'var(--color-bg-deep)',
+              borderColor: 'var(--color-border)',
+              color: 'var(--color-text-2)',
+            }}
+          >
+            {thinking}
+          </div>
+        ) : null}
+        <div className="mt-2 flex items-center gap-2 text-xs text-[var(--color-muted)]">
+          <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--color-ms-blue-500)]" />
+          <span>{quip ?? (text ? 'Responding…' : 'Thinking…')}</span>
         </div>
       </div>
     </div>

apps/web/src/components/layout/app-header.tsx

@@ -0,0 +1,239 @@
+'use client';
+
+import Link from 'next/link';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { signOut, useSession } from '@/lib/auth-client';
+
+interface AppHeaderProps {
+  conversationTitle?: string | null;
+  isSidebarOpen: boolean;
+  onToggleSidebar: () => void;
+}
+
+type ThemeMode = 'dark' | 'light';
+
+const THEME_STORAGE_KEY = 'mosaic-chat-theme';
+
+export function AppHeader({
+  conversationTitle,
+  isSidebarOpen,
+  onToggleSidebar,
+}: AppHeaderProps): React.ReactElement {
+  const { data: session } = useSession();
+  const [currentTime, setCurrentTime] = useState('');
+  const [version, setVersion] = useState<string | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [theme, setTheme] = useState<ThemeMode>('dark');
+
+  useEffect(() => {
+    function updateTime(): void {
+      setCurrentTime(
+        new Date().toLocaleTimeString([], {
+          hour: '2-digit',
+          minute: '2-digit',
+        }),
+      );
+    }
+
+    updateTime();
+    const interval = window.setInterval(updateTime, 60_000);
+    return () => window.clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    fetch('/version.json')
+      .then(async (res) => res.json() as Promise<{ version?: string; commit?: string }>)
+      .then((data) => {
+        if (data.version) {
+          setVersion(data.commit ? `${data.version}+${data.commit}` : data.version);
+        }
+      })
+      .catch(() => setVersion(null));
+  }, []);
+
+  useEffect(() => {
+    const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
+    const nextTheme = storedTheme === 'light' ? 'light' : 'dark';
+    applyTheme(nextTheme);
+    setTheme(nextTheme);
+  }, []);
+
+  const handleThemeToggle = useCallback(() => {
+    const nextTheme = theme === 'dark' ? 'light' : 'dark';
+    applyTheme(nextTheme);
+    window.localStorage.setItem(THEME_STORAGE_KEY, nextTheme);
+    setTheme(nextTheme);
+  }, [theme]);
+
+  const handleSignOut = useCallback(async (): Promise<void> => {
+    await signOut();
+    window.location.href = '/login';
+  }, []);
+
+  const userLabel = session?.user.name ?? session?.user.email ?? 'Mosaic User';
+  const initials = useMemo(() => getInitials(userLabel), [userLabel]);
+
+  return (
+    <header
+      className="sticky top-0 z-20 border-b backdrop-blur-xl"
+      style={{
+        backgroundColor: 'color-mix(in srgb, var(--color-surface) 82%, transparent)',
+        borderColor: 'var(--color-border)',
+      }}
+    >
+      <div className="flex items-center justify-between gap-3 px-4 py-3 md:px-6">
+        <div className="flex min-w-0 items-center gap-3">
+          <button
+            type="button"
+            onClick={onToggleSidebar}
+            className="inline-flex h-10 w-10 items-center justify-center rounded-2xl border transition-colors hover:bg-white/5"
+            style={{ borderColor: 'var(--color-border)', color: 'var(--color-text)' }}
+            aria-label="Toggle conversation sidebar"
+            aria-expanded={isSidebarOpen}
+          >
+            ☰
+          </button>
+
+          <Link href="/chat" className="flex min-w-0 items-center gap-3">
+            <div
+              className="flex h-10 w-10 items-center justify-center rounded-2xl text-sm font-semibold text-white shadow-[var(--shadow-ms-md)]"
+              style={{
+                background:
+                  'linear-gradient(135deg, var(--color-ms-blue-500), var(--color-ms-teal-500))',
+              }}
+            >
+              M
+            </div>
+            <div className="flex min-w-0 items-center gap-3">
+              <div className="text-sm font-semibold text-[var(--color-text)]">Mosaic</div>
+              <div className="hidden h-5 w-px bg-[var(--color-border)] md:block" />
+              <div className="hidden items-center gap-2 md:flex">
+                <span className="relative flex h-2.5 w-2.5">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--color-ms-teal-500)] opacity-60" />
+                  <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-[var(--color-ms-teal-500)]" />
+                </span>
+                <span className="text-xs uppercase tracking-[0.18em] text-[var(--color-muted)]">
+                  Online
+                </span>
+              </div>
+            </div>
+          </Link>
+        </div>
+
+        <div className="hidden min-w-0 items-center gap-3 md:flex">
+          <div className="rounded-full border border-[var(--color-border)] px-3 py-1.5 text-xs text-[var(--color-text-2)]">
+            {currentTime || '--:--'}
+          </div>
+          <div className="max-w-[24rem] truncate text-sm font-medium text-[var(--color-text)]">
+            {conversationTitle?.trim() || 'New Session'}
+          </div>
+          {version ? (
+            <div className="rounded-full border border-[var(--color-border)] px-3 py-1.5 text-xs text-[var(--color-muted)]">
+              v{version}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <div className="hidden items-center gap-2 lg:flex">
+            <ShortcutHint label="⌘/" text="focus" />
+            <ShortcutHint label="⌘K" text="focus" />
+          </div>
+
+          <button
+            type="button"
+            onClick={handleThemeToggle}
+            className="inline-flex h-10 items-center justify-center rounded-2xl border px-3 text-sm transition-colors hover:bg-white/5"
+            style={{ borderColor: 'var(--color-border)', color: 'var(--color-text)' }}
+            aria-label="Toggle theme"
+          >
+            {theme === 'dark' ? '☀︎' : '☾'}
+          </button>
+
+          <div className="relative">
+            <button
+              type="button"
+              onClick={() => setMenuOpen((prev) => !prev)}
+              className="inline-flex h-10 w-10 items-center justify-center rounded-full border text-sm font-semibold transition-colors hover:bg-white/5"
+              style={{
+                backgroundColor: 'var(--color-surface-2)',
+                borderColor: 'var(--color-border)',
+                color: 'var(--color-text)',
+              }}
+              aria-expanded={menuOpen}
+              aria-label="Open user menu"
+            >
+              {session?.user.image ? (
+                <img
+                  src={session.user.image}
+                  alt={userLabel}
+                  className="h-full w-full rounded-full object-cover"
+                />
+              ) : (
+                initials
+              )}
+            </button>
+            {menuOpen ? (
+              <div
+                className="absolute right-0 top-12 min-w-56 rounded-3xl border p-2 shadow-[var(--shadow-ms-lg)]"
+                style={{
+                  backgroundColor: 'var(--color-surface)',
+                  borderColor: 'var(--color-border)',
+                }}
+              >
+                <div className="border-b px-3 py-2" style={{ borderColor: 'var(--color-border)' }}>
+                  <div className="text-sm font-medium text-[var(--color-text)]">{userLabel}</div>
+                  {session?.user.email ? (
+                    <div className="text-xs text-[var(--color-muted)]">{session.user.email}</div>
+                  ) : null}
+                </div>
+                <div className="p-1">
+                  <Link
+                    href="/settings"
+                    className="flex rounded-2xl px-3 py-2 text-sm text-[var(--color-text-2)] transition-colors hover:bg-white/5"
+                    onClick={() => setMenuOpen(false)}
+                  >
+                    Settings
+                  </Link>
+                  <button
+                    type="button"
+                    onClick={() => void handleSignOut()}
+                    className="flex w-full rounded-2xl px-3 py-2 text-left text-sm text-[var(--color-text-2)] transition-colors hover:bg-white/5"
+                  >
+                    Sign out
+                  </button>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+function ShortcutHint({ label, text }: { label: string; text: string }): React.ReactElement {
+  return (
+    <span className="inline-flex items-center gap-2 rounded-full border border-[var(--color-border)] px-3 py-1.5 text-xs text-[var(--color-muted)]">
+      <span className="font-medium text-[var(--color-text-2)]">{label}</span>
+      <span>{text}</span>
+    </span>
+  );
+}
+
+function getInitials(label: string): string {
+  const words = label.split(/\s+/).filter(Boolean).slice(0, 2);
+  if (words.length === 0) return 'M';
+  return words.map((word) => word.charAt(0).toUpperCase()).join('');
+}
+
+function applyTheme(theme: ThemeMode): void {
+  const root = document.documentElement;
+  if (theme === 'light') {
+    root.setAttribute('data-theme', 'light');
+    root.classList.remove('dark');
+  } else {
+    root.removeAttribute('data-theme');
+    root.classList.add('dark');
+  }
+}

apps/web/src/components/layout/app-shell.tsx

@@ -1,4 +1,7 @@
+'use client';
+
 import type { ReactNode } from 'react';
+import { SidebarProvider, useSidebar } from './sidebar-context';
 import { Sidebar } from './sidebar';
 import { Topbar } from './topbar';
 
@@ -6,14 +9,24 @@ interface AppShellProps {
   children: ReactNode;
 }
 
-export function AppShell({ children }: AppShellProps): React.ReactElement {
+function AppShellFrame({ children }: AppShellProps): React.ReactElement {
+  const { collapsed, isMobile } = useSidebar();
+
   return (
-    <div className="min-h-screen">
+    <div className="app-shell" data-sidebar-hidden={!isMobile && collapsed ? 'true' : undefined}>
+      <Topbar />
       <Sidebar />
-      <div className="pl-sidebar">
+      <div className="app-main">
-        <Topbar />
+        <main className="h-full overflow-y-auto p-6">{children}</main>
-        <main className="p-6">{children}</main>
       </div>
     </div>
   );
 }
+
+export function AppShell({ children }: AppShellProps): React.ReactElement {
+  return (
+    <SidebarProvider>
+      <AppShellFrame>{children}</AppShellFrame>
+    </SidebarProvider>
+  );
+}

apps/web/src/components/layout/sidebar-context.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+
+interface SidebarContextValue {
+  collapsed: boolean;
+  toggleCollapsed: () => void;
+  mobileOpen: boolean;
+  setMobileOpen: (open: boolean) => void;
+  isMobile: boolean;
+}
+
+const MOBILE_MAX_WIDTH = 767;
+const SidebarContext = createContext<SidebarContextValue | undefined>(undefined);
+
+export function SidebarProvider({ children }: { children: ReactNode }): React.JSX.Element {
+  const [collapsed, setCollapsed] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(`(max-width: ${String(MOBILE_MAX_WIDTH)}px)`);
+
+    const syncState = (matches: boolean): void => {
+      setIsMobile(matches);
+      if (!matches) {
+        setMobileOpen(false);
+      }
+    };
+
+    syncState(mediaQuery.matches);
+
+    const handleChange = (event: MediaQueryListEvent): void => {
+      syncState(event.matches);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  return (
+    <SidebarContext.Provider
+      value={{
+        collapsed,
+        toggleCollapsed: () => setCollapsed((value) => !value),
+        mobileOpen,
+        setMobileOpen,
+        isMobile,
+      }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export function useSidebar(): SidebarContextValue {
+  const context = useContext(SidebarContext);
+
+  if (!context) {
+    throw new Error('useSidebar must be used within SidebarProvider');
+  }
+
+  return context;
+}

apps/web/src/components/layout/sidebar.tsx

@@ -3,58 +3,178 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { cn } from '@/lib/cn';
+import { MosaicLogo } from '@/components/ui/mosaic-logo';
+import { useSidebar } from './sidebar-context';
 
 interface NavItem {
   label: string;
   href: string;
-  icon: string;
+  icon: React.JSX.Element;
+}
+
+function IconChat(): React.JSX.Element {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <path d="M3 4.5A2.5 2.5 0 0 1 5.5 2h5A2.5 2.5 0 0 1 13 4.5v3A2.5 2.5 0 0 1 10.5 10H8l-3.5 3v-3H5.5A2.5 2.5 0 0 1 3 7.5z" />
+    </svg>
+  );
+}
+
+function IconTasks(): React.JSX.Element {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <path d="M6 3h7M6 8h7M6 13h7" />
+      <path d="M2.5 3.5 3.5 4.5 5 2.5M2.5 8.5 3.5 9.5 5 7.5M2.5 13.5 3.5 14.5 5 12.5" />
+    </svg>
+  );
+}
+
+function IconProjects(): React.JSX.Element {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <path d="M2 4.5A1.5 1.5 0 0 1 3.5 3h3l1.5 1.5h4A1.5 1.5 0 0 1 13.5 6v5.5A1.5 1.5 0 0 1 12 13H3.5A1.5 1.5 0 0 1 2 11.5z" />
+    </svg>
+  );
+}
+
+function IconSettings(): React.JSX.Element {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <circle cx="8" cy="8" r="2.25" />
+      <path d="M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2M3.05 3.05l1.4 1.4M11.55 11.55l1.4 1.4M3.05 12.95l1.4-1.4M11.55 4.45l1.4-1.4" />
+    </svg>
+  );
+}
+
+function IconAdmin(): React.JSX.Element {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <path d="M8 1.75 13 3.5v3.58c0 3.12-1.88 5.94-5 7.17-3.12-1.23-5-4.05-5-7.17V3.5z" />
+      <path d="M6.25 7.75 7.5 9l2.5-2.5" />
+    </svg>
+  );
 }
 
 const navItems: NavItem[] = [
-  { label: 'Chat', href: '/chat', icon: '💬' },
+  { label: 'Chat', href: '/chat', icon: <IconChat /> },
-  { label: 'Tasks', href: '/tasks', icon: '📋' },
+  { label: 'Tasks', href: '/tasks', icon: <IconTasks /> },
-  { label: 'Projects', href: '/projects', icon: '📁' },
+  { label: 'Projects', href: '/projects', icon: <IconProjects /> },
-  { label: 'Settings', href: '/settings', icon: '⚙️' },
+  { label: 'Settings', href: '/settings', icon: <IconSettings /> },
-  { label: 'Admin', href: '/admin', icon: '🛡️' },
+  { label: 'Admin', href: '/admin', icon: <IconAdmin /> },
 ];
 
 export function Sidebar(): React.ReactElement {
   const pathname = usePathname();
+  const { mobileOpen, setMobileOpen } = useSidebar();
 
   return (
-    <aside className="fixed left-0 top-0 z-30 flex h-screen w-sidebar flex-col border-r border-surface-border bg-surface-card">
+    <>
-      <div className="flex h-14 items-center px-4">
+      <aside
-        <Link href="/" className="text-lg font-semibold text-text-primary">
+        className="app-sidebar"
-          Mosaic
+        data-mobile-open={mobileOpen ? 'true' : undefined}
-        </Link>
+        style={{
-      </div>
+          width: 'var(--sidebar-w)',
+          background: 'var(--surface)',
+          borderRightColor: 'var(--border)',
+        }}
+      >
+        <div
+          className="flex h-16 items-center gap-3 border-b px-5"
+          style={{ borderColor: 'var(--border)' }}
+        >
+          <MosaicLogo size={32} />
+          <div className="flex min-w-0 flex-col">
+            <span className="text-sm font-semibold uppercase tracking-[0.12em] text-[var(--text)]">
+              Mosaic
+            </span>
+            <span className="text-xs text-[var(--muted)]">Mission Control</span>
+          </div>
+        </div>
 
-      <nav className="flex-1 space-y-1 px-2 py-2">
+        <nav className="flex-1 px-3 py-4">
-        {navItems.map((item) => {
+          <div className="mb-3 px-2 text-[11px] font-medium uppercase tracking-[0.18em] text-[var(--muted)]">
-          const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
+            Workspace
-          return (
+          </div>
-            <Link
+          <div className="space-y-1.5">
-              key={item.href}
+            {navItems.map((item) => {
-              href={item.href}
+              const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
-              className={cn(
-                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
-                isActive
-                  ? 'bg-blue-600/20 text-blue-400'
-                  : 'text-text-secondary hover:bg-surface-elevated hover:text-text-primary',
-              )}
-            >
-              <span className="text-base" aria-hidden="true">
-                {item.icon}
-              </span>
-              {item.label}
-            </Link>
-          );
-        })}
-      </nav>
 
-      <div className="border-t border-surface-border p-4">
+              return (
-        <p className="text-xs text-text-muted">Mosaic Stack v0.0.4</p>
+                <Link
-      </div>
+                  key={item.href}
-    </aside>
+                  href={item.href}
+                  onClick={() => setMobileOpen(false)}
+                  className={cn(
+                    'group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition-all duration-150',
+                    isActive ? 'font-medium' : 'hover:bg-white/4',
+                  )}
+                  style={
+                    isActive
+                      ? {
+                          background: 'color-mix(in srgb, var(--primary) 18%, transparent)',
+                          color: 'var(--primary)',
+                        }
+                      : { color: 'var(--text-2)' }
+                  }
+                >
+                  <span className="shrink-0" aria-hidden="true">
+                    {item.icon}
+                  </span>
+                  <span>{item.label}</span>
+                </Link>
+              );
+            })}
+          </div>
+        </nav>
+
+        <div className="border-t px-5 py-4" style={{ borderColor: 'var(--border)' }}>
+          <p className="text-xs text-[var(--muted)]">Mosaic Stack v0.0.4</p>
+        </div>
+      </aside>
+
+      {mobileOpen ? (
+        <button
+          type="button"
+          aria-label="Close sidebar"
+          className="fixed inset-0 z-40 bg-black/40 md:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      ) : null}
+    </>
   );
 }

apps/web/src/components/layout/theme-toggle.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useTheme } from '@/providers/theme-provider';
+
+interface ThemeToggleProps {
+  className?: string;
+}
+
+export function ThemeToggle({ className = '' }: ThemeToggleProps): React.JSX.Element {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      className={`btn-ghost rounded-md p-2 ${className}`}
+      title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+    >
+      {theme === 'dark' ? (
+        <svg
+          className="h-5 w-5"
+          style={{ color: 'var(--warn)' }}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={1.5}
+        >
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+        </svg>
+      ) : (
+        <svg
+          className="h-5 w-5"
+          style={{ color: 'var(--text-2)' }}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={1.5}
+        >
+          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+        </svg>
+      )}
+    </button>
+  );
+}

apps/web/src/components/layout/topbar.tsx

@@ -1,37 +1,87 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import { useSession, signOut } from '@/lib/auth-client';
+import { signOut, useSession } from '@/lib/auth-client';
+import { ThemeToggle } from './theme-toggle';
+import { useSidebar } from './sidebar-context';
+
+function MenuIcon(): React.JSX.Element {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <path d="M2 4h12M2 8h12M2 12h12" />
+    </svg>
+  );
+}
 
 export function Topbar(): React.ReactElement {
   const { data: session } = useSession();
   const router = useRouter();
+  const { isMobile, mobileOpen, setMobileOpen, toggleCollapsed } = useSidebar();
 
   async function handleSignOut(): Promise<void> {
     await signOut();
     router.replace('/login');
   }
 
-  return (
+  function handleSidebarToggle(): void {
-    <header className="sticky top-0 z-20 flex h-14 items-center justify-between border-b border-surface-border bg-surface-card/80 px-6 backdrop-blur-sm">
+    if (isMobile) {
-      <div />
+      setMobileOpen(!mobileOpen);
+      return;
+    }
 
-      <div className="flex items-center gap-4">
+    toggleCollapsed();
+  }
+
+  return (
+    <header
+      className="app-header justify-between border-b px-4 md:px-6"
+      style={{
+        height: 'var(--topbar-h)',
+        background: 'color-mix(in srgb, var(--surface) 88%, transparent)',
+        borderBottomColor: 'var(--border)',
+      }}
+    >
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={handleSidebarToggle}
+          className="btn-ghost rounded-lg border p-2"
+          style={{ borderColor: 'var(--border)', color: 'var(--text-2)' }}
+          aria-label="Toggle sidebar"
+        >
+          <MenuIcon />
+        </button>
+        <div className="hidden sm:block">
+          <div className="text-sm font-medium text-[var(--text)]">Workspace</div>
+          <div className="text-xs text-[var(--muted)]">Unified agent operations</div>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <ThemeToggle />
         {session?.user ? (
           <>
-            <span className="text-sm text-text-secondary">
+            <span className="hidden text-sm text-[var(--text-2)] sm:block">
               {session.user.name ?? session.user.email}
             </span>
             <button
               type="button"
               onClick={handleSignOut}
-              className="rounded-md px-3 py-1.5 text-sm text-text-muted transition-colors hover:bg-surface-elevated hover:text-text-primary"
+              className="rounded-md px-3 py-1.5 text-sm transition-colors"
+              style={{ color: 'var(--muted)' }}
             >
               Sign out
             </button>
           </>
         ) : (
-          <span className="text-sm text-text-muted">Not signed in</span>
+          <span className="text-sm text-[var(--muted)]">Not signed in</span>
         )}
       </div>
     </header>

apps/web/src/components/settings/sso-provider-section.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { SsoProviderSection } from './sso-provider-section.js';
+
+describe('SsoProviderSection', () => {
+  it('renders configured providers with callback, sync, and fallback details', () => {
+    const html = renderToStaticMarkup(
+      <SsoProviderSection
+        loading={false}
+        providers={[
+          {
+            id: 'workos',
+            name: 'WorkOS',
+            protocols: ['oidc'],
+            configured: true,
+            loginMode: 'oidc',
+            callbackPath: '/api/auth/oauth2/callback/workos',
+            teamSync: { enabled: true, claim: 'organization_id' },
+            samlFallback: { configured: false, loginUrl: null },
+            warnings: [],
+          },
+          {
+            id: 'keycloak',
+            name: 'Keycloak',
+            protocols: ['oidc', 'saml'],
+            configured: true,
+            loginMode: 'saml',
+            callbackPath: null,
+            teamSync: { enabled: true, claim: 'groups' },
+            samlFallback: {
+              configured: true,
+              loginUrl: 'https://sso.example.com/realms/mosaic/protocol/saml',
+            },
+            warnings: [],
+          },
+        ]}
+      />,
+    );
+
+    expect(html).toContain('WorkOS');
+    expect(html).toContain('/api/auth/oauth2/callback/workos');
+    expect(html).toContain('Team sync claim: organization_id');
+    expect(html).toContain('SAML fallback: https://sso.example.com/realms/mosaic/protocol/saml');
+  });
+});

apps/web/src/components/settings/sso-provider-section.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import type { SsoProviderDiscovery } from '@/lib/sso';
+
+interface SsoProviderSectionProps {
+  providers: SsoProviderDiscovery[];
+  loading: boolean;
+}
+
+export function SsoProviderSection({
+  providers,
+  loading,
+}: SsoProviderSectionProps): React.ReactElement {
+  if (loading) {
+    return <p className="text-sm text-text-muted">Loading SSO providers...</p>;
+  }
+
+  const configuredProviders = providers.filter((provider) => provider.configured);
+
+  if (providers.length === 0 || configuredProviders.length === 0) {
+    return (
+      <div className="rounded-lg border border-surface-border bg-surface-card p-4">
+        <p className="text-sm text-text-muted">
+          No SSO providers configured. Set WorkOS or Keycloak environment variables to enable SSO.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {configuredProviders.map((provider) => (
+        <div
+          key={provider.id}
+          className="rounded-lg border border-surface-border bg-surface-card p-4"
+        >
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <h3 className="text-sm font-medium text-text-primary">{provider.name}</h3>
+              <p className="text-xs text-text-muted">
+                {provider.protocols.join(' + ').toUpperCase()}
+                {provider.loginMode ? ` • primary ${provider.loginMode.toUpperCase()}` : ''}
+              </p>
+            </div>
+            <span className="rounded-full border border-accent/30 bg-accent/10 px-2 py-1 text-xs font-medium text-accent">
+              Enabled
+            </span>
+          </div>
+
+          <div className="mt-3 space-y-2 text-xs text-text-muted">
+            {provider.callbackPath && <p>Callback: {provider.callbackPath}</p>}
+            {provider.teamSync.enabled && provider.teamSync.claim && (
+              <p>Team sync claim: {provider.teamSync.claim}</p>
+            )}
+            {provider.samlFallback.configured && provider.samlFallback.loginUrl && (
+              <p>SAML fallback: {provider.samlFallback.loginUrl}</p>
+            )}
+            {provider.warnings.map((warning) => (
+              <p key={warning} className="text-warning">
+                {warning}
+              </p>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

apps/web/src/components/ui/mosaic-logo.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import type { CSSProperties } from 'react';
+
+export interface MosaicLogoProps {
+  size?: number;
+  spinning?: boolean;
+  spinDuration?: number;
+  className?: string;
+}
+
+export function MosaicLogo({
+  size = 36,
+  spinning = false,
+  spinDuration = 20,
+  className = '',
+}: MosaicLogoProps): React.JSX.Element {
+  const scale = size / 36;
+  const squareSize = Math.round(14 * scale);
+  const circleSize = Math.round(11 * scale);
+  const borderRadius = Math.round(3 * scale);
+
+  const animationValue = spinning
+    ? `mosaicLogoSpin ${String(spinDuration)}s linear infinite`
+    : undefined;
+
+  const containerStyle: CSSProperties = {
+    width: size,
+    height: size,
+    position: 'relative',
+    flexShrink: 0,
+    animation: animationValue,
+    transformOrigin: 'center',
+  };
+
+  const baseSquareStyle: CSSProperties = {
+    position: 'absolute',
+    width: squareSize,
+    height: squareSize,
+    borderRadius,
+  };
+
+  const circleStyle: CSSProperties = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: circleSize,
+    height: circleSize,
+    borderRadius: '50%',
+    background: 'var(--ms-pink-500)',
+  };
+
+  return (
+    <>
+      {spinning ? (
+        <style>{`
+          @keyframes mosaicLogoSpin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        `}</style>
+      ) : null}
+      <div style={containerStyle} className={className} role="img" aria-label="Mosaic logo">
+        <div style={{ ...baseSquareStyle, top: 0, left: 0, background: 'var(--ms-blue-500)' }} />
+        <div style={{ ...baseSquareStyle, top: 0, right: 0, background: 'var(--ms-purple-500)' }} />
+        <div
+          style={{
+            ...baseSquareStyle,
+            bottom: 0,
+            right: 0,
+            background: 'var(--ms-teal-500)',
+          }}
+        />
+        <div
+          style={{
+            ...baseSquareStyle,
+            bottom: 0,
+            left: 0,
+            background: 'var(--ms-amber-500)',
+          }}
+        />
+        <div style={circleStyle} />
+      </div>
+    </>
+  );
+}
+
+export default MosaicLogo;

apps/web/src/lib/auth-client.ts

@@ -1,9 +1,9 @@
 import { createAuthClient } from 'better-auth/react';
-import { adminClient } from 'better-auth/client/plugins';
+import { adminClient, genericOAuthClient } from 'better-auth/client/plugins';
 
 export const authClient = createAuthClient({
   baseURL: process.env['NEXT_PUBLIC_GATEWAY_URL'] ?? 'http://localhost:4000',
-  plugins: [adminClient()],
+  plugins: [adminClient(), genericOAuthClient()],
 });
 
 export const { useSession, signIn, signUp, signOut } = authClient;

apps/web/src/lib/sso-providers.test.ts

@@ -0,0 +1,48 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { getEnabledSsoProviders, getSsoProvider } from './sso-providers';
+
+describe('sso-providers', () => {
+  afterEach(() => {
+    vi.unstubAllEnvs();
+  });
+
+  it('returns the enabled providers in login button order', () => {
+    vi.stubEnv('NEXT_PUBLIC_WORKOS_ENABLED', 'true');
+    vi.stubEnv('NEXT_PUBLIC_KEYCLOAK_ENABLED', 'true');
+
+    expect(getEnabledSsoProviders()).toEqual([
+      {
+        id: 'workos',
+        buttonLabel: 'Continue with WorkOS',
+        description: 'Enterprise SSO via WorkOS',
+        enabled: true,
+        href: '/auth/provider/workos',
+      },
+      {
+        id: 'keycloak',
+        buttonLabel: 'Continue with Keycloak',
+        description: 'Enterprise SSO via Keycloak',
+        enabled: true,
+        href: '/auth/provider/keycloak',
+      },
+    ]);
+  });
+
+  it('marks disabled providers without exposing them in the enabled list', () => {
+    vi.stubEnv('NEXT_PUBLIC_WORKOS_ENABLED', 'true');
+    vi.stubEnv('NEXT_PUBLIC_KEYCLOAK_ENABLED', 'false');
+
+    expect(getEnabledSsoProviders().map((provider) => provider.id)).toEqual(['workos']);
+    expect(getSsoProvider('keycloak')).toEqual({
+      id: 'keycloak',
+      buttonLabel: 'Continue with Keycloak',
+      description: 'Enterprise SSO via Keycloak',
+      enabled: false,
+      href: '/auth/provider/keycloak',
+    });
+  });
+
+  it('returns null for unknown providers', () => {
+    expect(getSsoProvider('authentik')).toBeNull();
+  });
+});

apps/web/src/lib/sso-providers.ts

@@ -0,0 +1,53 @@
+export type SsoProviderId = 'workos' | 'keycloak';
+
+export interface SsoProvider {
+  id: SsoProviderId;
+  buttonLabel: string;
+  description: string;
+  enabled: boolean;
+  href: string;
+}
+
+const PROVIDER_METADATA: Record<SsoProviderId, Omit<SsoProvider, 'enabled' | 'href'>> = {
+  workos: {
+    id: 'workos',
+    buttonLabel: 'Continue with WorkOS',
+    description: 'Enterprise SSO via WorkOS',
+  },
+  keycloak: {
+    id: 'keycloak',
+    buttonLabel: 'Continue with Keycloak',
+    description: 'Enterprise SSO via Keycloak',
+  },
+};
+
+export function getEnabledSsoProviders(): SsoProvider[] {
+  return (Object.keys(PROVIDER_METADATA) as SsoProviderId[])
+    .map((providerId) => getSsoProvider(providerId))
+    .filter((provider): provider is SsoProvider => provider?.enabled === true);
+}
+
+export function getSsoProvider(providerId: string): SsoProvider | null {
+  if (!isSsoProviderId(providerId)) {
+    return null;
+  }
+
+  return {
+    ...PROVIDER_METADATA[providerId],
+    enabled: isSsoProviderEnabled(providerId),
+    href: `/auth/provider/${providerId}`,
+  };
+}
+
+function isSsoProviderId(value: string): value is SsoProviderId {
+  return value === 'workos' || value === 'keycloak';
+}
+
+function isSsoProviderEnabled(providerId: SsoProviderId): boolean {
+  switch (providerId) {
+    case 'workos':
+      return process.env['NEXT_PUBLIC_WORKOS_ENABLED'] === 'true';
+    case 'keycloak':
+      return process.env['NEXT_PUBLIC_KEYCLOAK_ENABLED'] === 'true';
+  }
+}

apps/web/src/lib/sso.ts

@@ -0,0 +1,20 @@
+export type SsoProtocol = 'oidc' | 'saml';
+export type SsoLoginMode = 'oidc' | 'saml' | null;
+
+export interface SsoProviderDiscovery {
+  id: 'authentik' | 'workos' | 'keycloak';
+  name: string;
+  protocols: SsoProtocol[];
+  configured: boolean;
+  loginMode: SsoLoginMode;
+  callbackPath: string | null;
+  teamSync: {
+    enabled: boolean;
+    claim: string | null;
+  };
+  samlFallback: {
+    configured: boolean;
+    loginUrl: string | null;
+  };
+  warnings: string[];
+}

apps/web/src/lib/types.ts

@@ -15,10 +15,41 @@ export interface Message {
   conversationId: string;
   role: 'user' | 'assistant' | 'system';
   content: string;
+  thinking?: string;
+  model?: string;
+  provider?: string;
+  promptTokens?: number;
+  completionTokens?: number;
+  totalTokens?: number;
   metadata?: Record<string, unknown>;
   createdAt: string;
 }
 
+/** Model definition returned by provider APIs. */
+export interface ModelInfo {
+  id: string;
+  provider: string;
+  name: string;
+  reasoning: boolean;
+  contextWindow: number;
+  maxTokens: number;
+  inputTypes: Array<'text' | 'image'>;
+  cost: {
+    input: number;
+    output: number;
+    cacheRead: number;
+    cacheWrite: number;
+  };
+}
+
+/** Provider with associated models. */
+export interface ProviderInfo {
+  id: string;
+  name: string;
+  available: boolean;
+  models: ModelInfo[];
+}
+
 /** Task statuses. */
 export type TaskStatus = 'not-started' | 'in-progress' | 'blocked' | 'done' | 'cancelled';
 

apps/web/src/providers/theme-provider.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+
+export type Theme = 'dark' | 'light';
+
+interface ThemeContextValue {
+  theme: Theme;
+  toggleTheme: () => void;
+  setTheme: (theme: Theme) => void;
+}
+
+const STORAGE_KEY = 'mosaic-theme';
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+function getInitialTheme(): Theme {
+  if (typeof document === 'undefined') {
+    return 'dark';
+  }
+
+  return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }): React.JSX.Element {
+  const [theme, setThemeState] = useState<Theme>(getInitialTheme);
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    window.localStorage.setItem(STORAGE_KEY, theme);
+  }, [theme]);
+
+  useEffect(() => {
+    const storedTheme = window.localStorage.getItem(STORAGE_KEY);
+    if (storedTheme === 'light' || storedTheme === 'dark') {
+      setThemeState(storedTheme);
+      return;
+    }
+
+    document.documentElement.setAttribute('data-theme', 'dark');
+  }, []);
+
+  const value = useMemo<ThemeContextValue>(
+    () => ({
+      theme,
+      toggleTheme: () => setThemeState((current) => (current === 'dark' ? 'light' : 'dark')),
+      setTheme: (nextTheme) => setThemeState(nextTheme),
+    }),
+    [theme],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+
+  return context;
+}

apps/web/vitest.config.ts

@@ -4,5 +4,6 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
+    exclude: ['e2e/**', 'node_modules/**'],
   },
 });

docs/MISSION-MANIFEST.md

@@ -7,39 +7,39 @@
 
 **ID:** mvp-20260312
 **Statement:** Build Mosaic Stack v0.1.0 — a self-hosted, multi-user AI agent platform with web dashboard, TUI, remote control, shared memory, mission orchestration, and extensible skill/plugin architecture. All TypeScript. Pi as agent harness. Brain as knowledge layer. Queue as coordination backbone.
-**Phase:** Execution
+**Phase:** Complete
-**Current Milestone:** Phase 8: Polish & Beta (v0.1.0)
+**Current Milestone:** Phase 8: Polish & Beta (v0.1.0) — DONE
-**Progress:** 8 / 9 milestones
+**Progress:** 9 / 9 milestones
-**Status:** active
+**Status:** complete
-**Last Updated:** 2026-03-15 UTC
+**Last Updated:** 2026-03-16 UTC
 
 ## Success Criteria
 
-- [ ] AC-1: Core chat flow — login, send message, streamed response, conversations persist
+- [x] AC-1: Core chat flow — login, send message, streamed response, conversations persist
-- [ ] AC-2: TUI integration — `mosaic tui` connects to gateway, same context as web
+- [x] AC-2: TUI integration — `mosaic tui` connects to gateway, same context as web
-- [ ] AC-3: Discord remote control — bot responds, routes through gateway, threads work
+- [x] AC-3: Discord remote control — bot responds, routes through gateway, threads work
-- [ ] AC-4: Gateway orchestration — multi-provider routing, fallback, concurrent sessions
+- [x] AC-4: Gateway orchestration — multi-provider routing, fallback, concurrent sessions
-- [ ] AC-5: Task & project management — CRUD, kanban, mission tracking, brain MCP tools
+- [x] AC-5: Task & project management — CRUD, kanban, mission tracking, brain MCP tools
-- [ ] AC-6: Memory system — auto-capture, semantic search, preferences, log summarization
+- [x] AC-6: Memory system — auto-capture, semantic search, preferences, log summarization
-- [ ] AC-7: Auth & RBAC — email/password, Authentik SSO, role enforcement
+- [x] AC-7: Auth & RBAC — email/password, Authentik SSO, role enforcement
-- [ ] AC-8: Multi-provider LLM — 3+ providers routing correctly
+- [x] AC-8: Multi-provider LLM — 3+ providers routing correctly
-- [ ] AC-9: MCP — gateway MCP endpoint, brain + queue tools via MCP
+- [x] AC-9: MCP — gateway MCP endpoint, brain + queue tools via MCP
-- [ ] AC-10: Deployment — `docker compose up` from clean state, CLI on bare metal
+- [x] AC-10: Deployment — `docker compose up` from clean state, CLI on bare metal
-- [ ] AC-11: @mosaic/\* packages — all 7 migrated packages build, test, integrate
+- [x] AC-11: @mosaic/\* packages — all 7 migrated packages build, test, integrate
 
 ## Milestones
 
-| #   | ID     | Name                                    | Status      | Branch | Issue | Started    | Completed  |
+| #   | ID     | Name                                    | Status | Branch | Issue | Started    | Completed  |
-| --- | ------ | --------------------------------------- | ----------- | ------ | ----- | ---------- | ---------- |
+| --- | ------ | --------------------------------------- | ------ | ------ | ----- | ---------- | ---------- |
-| 0   | ms-157 | Phase 0: Foundation (v0.0.1)            | done        | —      | —     | 2026-03-13 | 2026-03-13 |
+| 0   | ms-157 | Phase 0: Foundation (v0.0.1)            | done   | —      | —     | 2026-03-13 | 2026-03-13 |
-| 1   | ms-158 | Phase 1: Core API (v0.0.2)              | done        | —      | —     | 2026-03-13 | 2026-03-13 |
+| 1   | ms-158 | Phase 1: Core API (v0.0.2)              | done   | —      | —     | 2026-03-13 | 2026-03-13 |
-| 2   | ms-159 | Phase 2: Agent Layer (v0.0.3)           | done        | —      | —     | 2026-03-13 | 2026-03-12 |
+| 2   | ms-159 | Phase 2: Agent Layer (v0.0.3)           | done   | —      | —     | 2026-03-13 | 2026-03-12 |
-| 3   | ms-160 | Phase 3: Web Dashboard (v0.0.4)         | done        | —      | —     | 2026-03-12 | 2026-03-13 |
+| 3   | ms-160 | Phase 3: Web Dashboard (v0.0.4)         | done   | —      | —     | 2026-03-12 | 2026-03-13 |
-| 4   | ms-161 | Phase 4: Memory & Intelligence (v0.0.5) | done        | —      | —     | 2026-03-13 | 2026-03-13 |
+| 4   | ms-161 | Phase 4: Memory & Intelligence (v0.0.5) | done   | —      | —     | 2026-03-13 | 2026-03-13 |
-| 5   | ms-162 | Phase 5: Remote Control (v0.0.6)        | done        | —      | #99   | 2026-03-14 | 2026-03-14 |
+| 5   | ms-162 | Phase 5: Remote Control (v0.0.6)        | done   | —      | #99   | 2026-03-14 | 2026-03-14 |
-| 6   | ms-163 | Phase 6: CLI & Tools (v0.0.7)           | done        | —      | #104  | 2026-03-14 | 2026-03-14 |
+| 6   | ms-163 | Phase 6: CLI & Tools (v0.0.7)           | done   | —      | #104  | 2026-03-14 | 2026-03-14 |
-| 7   | ms-164 | Phase 7: Feature Completion (v0.0.8)    | done        | —      | —     | 2026-03-15 | 2026-03-15 |
+| 7   | ms-164 | Phase 7: Feature Completion (v0.0.8)    | done   | —      | —     | 2026-03-15 | 2026-03-15 |
-| 8   | ms-165 | Phase 8: Polish & Beta (v0.1.0)         | not-started | —      | —     | —          | —          |
+| 8   | ms-165 | Phase 8: Polish & Beta (v0.1.0)         | done   | —      | —     | 2026-03-15 | 2026-03-15 |
 
 ## Deployment
 
@@ -58,20 +58,21 @@
 
 ## Session History
 
-| Session | Runtime         | Started              | Duration | Ended Reason  | Last Task        |
+| Session | Runtime           | Started              | Duration | Ended Reason  | Last Task        |
-| ------- | --------------- | -------------------- | -------- | ------------- | ---------------- |
+| ------- | ----------------- | -------------------- | -------- | ------------- | ---------------- |
-| 1       | claude-opus-4-6 | 2026-03-13 01:00 UTC | —        | context limit | Planning gate    |
+| 1       | claude-opus-4-6   | 2026-03-13 01:00 UTC | —        | context limit | Planning gate    |
-| 2       | claude-opus-4-6 | 2026-03-13           | —        | context limit | P5-002, P6-005   |
+| 2       | claude-opus-4-6   | 2026-03-13           | —        | context limit | P5-002, P6-005   |
-| 3       | claude-opus-4-6 | 2026-03-13           | —        | context limit | P0-006           |
+| 3       | claude-opus-4-6   | 2026-03-13           | —        | context limit | P0-006           |
-| 4       | claude-opus-4-6 | 2026-03-12           | —        | context limit | Docker fix       |
+| 4       | claude-opus-4-6   | 2026-03-12           | —        | context limit | Docker fix       |
-| 5       | claude-opus-4-6 | 2026-03-12           | —        | context limit | P1-009           |
+| 5       | claude-opus-4-6   | 2026-03-12           | —        | context limit | P1-009           |
-| 6       | claude-opus-4-6 | 2026-03-12           | —        | context limit | P2-006, FIX-01   |
+| 6       | claude-opus-4-6   | 2026-03-12           | —        | context limit | P2-006, FIX-01   |
-| 7       | claude-opus-4-6 | 2026-03-12           | —        | context limit | P2-007           |
+| 7       | claude-opus-4-6   | 2026-03-12           | —        | context limit | P2-007           |
-| 8       | claude-opus-4-6 | 2026-03-12           | —        | context limit | Phase 2 complete |
+| 8       | claude-opus-4-6   | 2026-03-12           | —        | context limit | Phase 2 complete |
-| 9       | claude-opus-4-6 | 2026-03-12           | —        | context limit | P3-007           |
+| 9       | claude-opus-4-6   | 2026-03-12           | —        | context limit | P3-007           |
-| 10      | claude-opus-4-6 | 2026-03-13           | —        | context limit | P3-008           |
+| 10      | claude-opus-4-6   | 2026-03-13           | —        | context limit | P3-008           |
-| 11      | claude-opus-4-6 | 2026-03-14           | —        | context limit | P7 rescope       |
+| 11      | claude-opus-4-6   | 2026-03-14           | —        | context limit | P7 rescope       |
-| 12      | claude-opus-4-6 | 2026-03-15           | —        | active        | P7 planning      |
+| 12      | claude-opus-4-6   | 2026-03-15           | —        | context limit | P7 planning      |
+| 13      | claude-sonnet-4-6 | 2026-03-16           | —        | complete      | P8-019 verify    |
 
 ## Scratchpad
 

docs/PERFORMANCE.md

@@ -0,0 +1,164 @@
+# Performance Optimization — P8-003
+
+**Branch:** `feat/p8-003-performance`  
+**Target metrics:** <200 ms TTFB, <2 s page loads
+
+---
+
+## What Was Profiled
+
+The following areas were reviewed through static analysis and code-path tracing
+(no production traffic available; findings are based on measurable code-level patterns):
+
+| Area                               | Findings                                                                                                 |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `packages/db`                      | Connection pool unbounded (default 10, no idle/connect timeout)                                          |
+| `apps/gateway/src/preferences`     | N+1 round-trip on every pref upsert (SELECT + INSERT/UPDATE)                                             |
+| `packages/brain/src/conversations` | Unbounded list queries — no `LIMIT` or `ORDER BY`                                                        |
+| `packages/db/src/schema`           | Missing hot-path indexes: auth session lookup, OAuth callback, conversation list, agent-log tier queries |
+| `apps/gateway/src/gc`              | Cold-start GC blocked NestJS bootstrap (synchronous `await` in `onModuleInit`)                           |
+| `apps/web/next.config.ts`          | Missing `compress: true`, no `productionBrowserSourceMaps: false`, no image format config                |
+
+---
+
+## Changes Made
+
+### 1. DB Connection Pool — `packages/db/src/client.ts`
+
+**Problem:** `postgres()` was called with no pool config. The default max of 10 connections
+and no idle/connect timeouts meant the pool could hang indefinitely on a stale TCP connection.
+
+**Fix:**
+
+- `max`: 20 connections (configurable via `DB_POOL_MAX`)
+- `idle_timeout`: 30 s (configurable via `DB_IDLE_TIMEOUT`) — recycle stale connections
+- `connect_timeout`: 5 s (configurable via `DB_CONNECT_TIMEOUT`) — fail fast on unreachable DB
+
+**Expected impact:** Eliminates pool exhaustion under moderate concurrency; removes indefinite
+hangs when the DB is temporarily unreachable.
+
+---
+
+### 2. Preferences Upsert — `apps/gateway/src/preferences/preferences.service.ts`
+
+**Problem:** `upsertPref` executed two serial DB round-trips on every preference write:
+
+```
+1. SELECT id FROM preferences WHERE user_id = ? AND key = ?  (→ check exists)
+2a. UPDATE preferences SET value = ? …                        (→ if found)
+2b. INSERT INTO preferences …                                 (→ if not found)
+```
+
+Under concurrency this also had a TOCTOU race window.
+
+**Fix:** Replaced with single-statement `INSERT … ON CONFLICT DO UPDATE`:
+
+```sql
+INSERT INTO preferences (user_id, key, value, mutable)
+VALUES (?, ?, ?, true)
+ON CONFLICT (user_id, key) DO UPDATE SET value = excluded.value, updated_at = now();
+```
+
+This required promoting `preferences_user_key_idx` from a plain index to a `UNIQUE INDEX`
+(see migration `0003_p8003_perf_indexes.sql`).
+
+**Expected impact:** ~50% reduction in DB round-trips for preference writes; eliminates
+the race window.
+
+---
+
+### 3. Missing DB Indexes — `packages/db/src/schema.ts` + migration
+
+The following indexes were added or replaced to cover common query patterns:
+
+| Table           | Old indexes                                       | New / changed                                                                                       |
+| --------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `sessions`      | _(none)_                                          | `sessions_user_id_idx(user_id)`, `sessions_expires_at_idx(expires_at)`                              |
+| `accounts`      | _(none)_                                          | `accounts_provider_account_idx(provider_id, account_id)`, `accounts_user_id_idx(user_id)`           |
+| `conversations` | `(user_id)`, `(archived)` separate                | `conversations_user_archived_idx(user_id, archived)` compound                                       |
+| `agent_logs`    | `(session_id)`, `(tier)`, `(created_at)` separate | `agent_logs_session_tier_idx(session_id, tier)`, `agent_logs_tier_created_at_idx(tier, created_at)` |
+| `preferences`   | non-unique `(user_id, key)`                       | **unique** `(user_id, key)` — required for `ON CONFLICT`                                            |
+
+**Expected impact:**
+
+- Auth session validation (hot path on every request): from seq scan → index scan
+- OAuth callback account lookup: from seq scan → index scan
+- Conversation list (dashboard load): compound index covers `WHERE user_id = ? ORDER BY updated_at`
+- Log summarisation cron: `(tier, created_at)` index enables efficient hot→warm promotion query
+
+All changes are in `packages/db/drizzle/0003_p8003_perf_indexes.sql`.
+
+---
+
+### 4. Conversation Queries — `packages/brain/src/conversations.ts`
+
+**Problem:** `findAll(userId)` and `findMessages(conversationId)` were unbounded — no `LIMIT`
+and `findAll` had no `ORDER BY`, so the DB planner may not use the index efficiently.
+
+**Fix:**
+
+- `findAll`: `ORDER BY updated_at DESC LIMIT 200` — returns most-recent conversations first
+- `findMessages`: `ORDER BY created_at ASC LIMIT 500` — chronological message history
+
+**Expected impact:** Prevents accidental full-table scans on large datasets; ensures the
+frontend receives a usable, ordered result set regardless of table growth.
+
+---
+
+### 5. Cold-Start GC — `apps/gateway/src/gc/session-gc.service.ts`
+
+**Problem:** `onModuleInit()` was `async` and `await`-ed `fullCollect()`, which blocked the
+NestJS module initialization chain. Full GC — which calls `redis.keys('mosaic:session:*')` and
+a DB query — typically takes 100–500 ms. This directly added to startup TTFB.
+
+**Fix:** Made `onModuleInit()` synchronous and used `.then().catch()` to run GC in the
+background. The first HTTP request is no longer delayed by GC work.
+
+**Expected impact:** Removes 100–500 ms from cold-start TTFB.
+
+---
+
+### 6. Next.js Config — `apps/web/next.config.ts`
+
+**Problem:** `compress: true` was not set, so response payloads were uncompressed. No image
+format optimization or source-map suppression was configured.
+
+**Fix:**
+
+- `compress: true` — enables gzip/brotli for all Next.js responses
+- `productionBrowserSourceMaps: false` — reduces build output size
+- `images.formats: ['image/avif', 'image/webp']` — Next.js Image component will serve modern
+  formats to browsers that support them (typically 40–60% smaller than JPEG/PNG)
+
+**Expected impact:** Typical HTML/JSON gzip savings of 60–80%; image serving cost reduced
+for any `<Image>` components added in the future.
+
+---
+
+## What Was Not Changed (Intentionally)
+
+- **Caching layer (Valkey/Redis):** The `SystemOverrideService` and GC already use Redis
+  pipelines. `PreferencesService.getEffective()` reads all user prefs in one query — this
+  is appropriate for the data size and doesn't warrant an additional cache layer yet.
+- **WebSocket backpressure:** The `ChatGateway` already drops events for disconnected clients
+  (`client.connected` check) and cleans up listeners on disconnect. No memory leak was found.
+- **Plugin/skill loader startup:** `SkillLoaderService.loadForSession()` is called on first
+  session creation, not on startup. Already non-blocking.
+- **Frontend React memoization:** No specific hot components were identified as causing
+  excessive re-renders without profiling data. No speculative `memo()` calls added.
+
+---
+
+## How to Apply
+
+```bash
+# Run the DB migration (requires a live DB)
+pnpm --filter @mosaic/db exec drizzle-kit migrate
+
+# Or, in Docker/Swarm — migrations run automatically on gateway startup
+# via runMigrations() in packages/db/src/migrate.ts
+```
+
+---
+
+_Generated by P8-003 performance optimization task — 2026-03-18_

docs/PRD-TUI_Improvements.md

@@ -0,0 +1,70 @@
+# PRD: TUI Improvements — Phase 7
+
+**Branch:** `feat/p7-tui-improvements`
+**Package:** `packages/cli`
+**Status:** In Progress
+
+---
+
+## Problem Statement
+
+The current Mosaic CLI TUI (`packages/cli/src/tui/app.tsx`) is a minimal single-file Ink application with:
+
+- Flat message list with no visual hierarchy
+- No system context visibility (cwd, branch, model, tokens)
+- Noisy error messages when gateway is disconnected
+- No conversation management (list, switch, rename, delete)
+- No multi-panel layout or navigation
+- No tool call visibility during agent execution
+- No thinking/reasoning display
+
+The TUI should be the power-user interface to Mosaic — informative, responsive, and visually clean.
+
+---
+
+## Goals
+
+### Wave 1 — Status Bar & Polish (MVP)
+
+Provide essential context at a glance and reduce noise.
+
+1. **Top status bar** — shows: connection indicator (●/○), gateway URL, agent model name
+2. **Bottom status bar** — shows: cwd, git branch, token usage (input/output/total)
+3. **Better message formatting** — distinct visual treatment for user vs assistant messages, timestamps, word wrap
+4. **Quiet disconnect** — single-line indicator when gateway is offline instead of flooding error messages; auto-reconnect silently
+5. **Tool call display** — inline indicators when agent uses tools (spinner + tool name during execution, ✓/✗ on completion)
+6. **Thinking/reasoning display** — collapsible dimmed block for `agent:thinking` events
+
+### Wave 2 — Layout & Navigation
+
+Multi-panel layout with keyboard navigation.
+
+1. **Conversation sidebar** — list conversations, create new, switch between them
+2. **Keybinding system** — Ctrl+N (new conversation), Ctrl+L (conversation list toggle), Ctrl+K (command palette concept)
+3. **Scrollable message history** — viewport with PgUp/PgDn/arrow key scrolling
+4. **Message search** — find in current conversation
+
+### Wave 3 — Advanced Features
+
+1. **Project/mission views** — show active projects, missions, tasks
+2. **Agent status monitoring** — real-time agent state, queue depth
+3. **Settings/config screen** — view/edit connection settings, model preferences
+4. **Multiple agent sessions** — split view or tab-based multi-agent
+
+---
+
+## Technical Approach
+
+- **Ink 5** (React for CLI) — already in deps
+- **Component architecture** — break monolithic `app.tsx` into composable components
+- **Typed Socket.IO events** — leverage `@mosaic/types` `ServerToClientEvents` / `ClientToServerEvents`
+- **Local state only** (Wave 1) — cwd/branch read from `process.cwd()` and `git` at startup
+- **Gateway metadata** (future) — extend socket handshake or add REST endpoint for model info, token usage
+
+---
+
+## Non-Goals (for now)
+
+- Image rendering in terminal
+- File editor integration
+- SSH/remote gateway auto-discovery

docs/SSO-PROVIDERS.md

@@ -0,0 +1,111 @@
+# SSO Providers
+
+Mosaic Stack supports optional enterprise single sign-on through Better Auth's generic OAuth flow. The gateway mounts Better Auth under `/api/auth`, so every provider callback terminates at:
+
+```text
+{BETTER_AUTH_URL}/api/auth/oauth2/callback/{providerId}
+```
+
+For the providers in this document:
+
+- Authentik: `{BETTER_AUTH_URL}/api/auth/oauth2/callback/authentik`
+- WorkOS: `{BETTER_AUTH_URL}/api/auth/oauth2/callback/workos`
+- Keycloak: `{BETTER_AUTH_URL}/api/auth/oauth2/callback/keycloak`
+
+## Required environment variables
+
+### Authentik
+
+```bash
+AUTHENTIK_ISSUER=https://auth.example.com/application/o/mosaic
+AUTHENTIK_CLIENT_ID=...
+AUTHENTIK_CLIENT_SECRET=...
+```
+
+### WorkOS
+
+```bash
+WORKOS_ISSUER=https://your-company.authkit.app
+WORKOS_CLIENT_ID=client_...
+WORKOS_CLIENT_SECRET=...
+NEXT_PUBLIC_WORKOS_ENABLED=true
+```
+
+`WORKOS_ISSUER` should be the WorkOS AuthKit issuer or custom auth domain, not the raw REST API hostname. Mosaic derives the OIDC discovery URL from that issuer.
+
+### Keycloak
+
+```bash
+KEYCLOAK_ISSUER=https://auth.example.com/realms/master
+KEYCLOAK_CLIENT_ID=mosaic
+KEYCLOAK_CLIENT_SECRET=...
+NEXT_PUBLIC_KEYCLOAK_ENABLED=true
+```
+
+If you prefer, you can keep the issuer split as:
+
+```bash
+KEYCLOAK_URL=https://auth.example.com
+KEYCLOAK_REALM=master
+```
+
+The auth package will derive `KEYCLOAK_ISSUER` from those two values.
+
+## WorkOS setup
+
+1. In WorkOS, create or select the application that will back Mosaic login.
+2. Configure an AuthKit domain or custom authentication domain for the application.
+3. Add the redirect URI:
+
+```text
+{BETTER_AUTH_URL}/api/auth/oauth2/callback/workos
+```
+
+4. Copy the application's `client_id` and `client_secret` into `WORKOS_CLIENT_ID` and `WORKOS_CLIENT_SECRET`.
+5. Set `WORKOS_ISSUER` to the AuthKit domain from step 2.
+6. Create the WorkOS organization and attach the enterprise SSO connection you want Mosaic to use.
+7. Set `NEXT_PUBLIC_WORKOS_ENABLED=true` in the web deployment so the login button is rendered.
+
+## Keycloak setup
+
+1. Start from an existing Keycloak realm or create a dedicated realm for Mosaic.
+2. Create a confidential OIDC client named `mosaic` or your preferred client ID.
+3. Set the valid redirect URI to:
+
+```text
+{BETTER_AUTH_URL}/api/auth/oauth2/callback/keycloak
+```
+
+4. Set the web origin to the public Mosaic web URL.
+5. Copy the client secret into `KEYCLOAK_CLIENT_SECRET`.
+6. Set either `KEYCLOAK_ISSUER` directly or `KEYCLOAK_URL` + `KEYCLOAK_REALM`.
+7. Set `NEXT_PUBLIC_KEYCLOAK_ENABLED=true` in the web deployment so the login button is rendered.
+
+### Local Keycloak smoke test
+
+If you want to test locally with Docker:
+
+```bash
+docker run --rm --name mosaic-keycloak \
+  -p 8080:8080 \
+  -e KEYCLOAK_ADMIN=admin \
+  -e KEYCLOAK_ADMIN_PASSWORD=admin \
+  quay.io/keycloak/keycloak:26.1 start-dev
+```
+
+Then configure:
+
+```bash
+KEYCLOAK_ISSUER=http://localhost:8080/realms/master
+KEYCLOAK_CLIENT_ID=mosaic
+KEYCLOAK_CLIENT_SECRET=...
+NEXT_PUBLIC_KEYCLOAK_ENABLED=true
+```
+
+## Web flow
+
+The web login page renders provider buttons from `NEXT_PUBLIC_*_ENABLED` flags. Each button links to `/auth/provider/{providerId}`, and that page initiates Better Auth's `signIn.oauth2` flow before handing off to the provider.
+
+## Failure mode
+
+Provider config is optional, but partial config is rejected at startup. If any provider-specific env var is present without the full required set, `@mosaic/auth` throws a bootstrap error with the missing keys instead of silently registering a broken provider.

docs/TASKS-TUI_Improvements.md

@@ -0,0 +1,105 @@
+# Tasks: TUI Improvements
+
+**Branch:** `feat/p7-tui-improvements`
+**Worktree:** `/home/jwoltje/src/mosaic-mono-v1-worktrees/tui-improvements`
+**PRD:** [PRD-TUI_Improvements.md](./PRD-TUI_Improvements.md)
+
+---
+
+## Wave 1 — Status Bar & Polish ✅
+
+| ID       | Task                                                                                                  | Status  | Notes   |
+| -------- | ----------------------------------------------------------------------------------------------------- | ------- | ------- |
+| TUI-001  | Component architecture — split `app.tsx` into `TopBar`, `BottomBar`, `MessageList`, `InputBar`, hooks | ✅ done | 79ff308 |
+| TUI-002  | Top status bar — branded mosaic icon, version, model, connection indicator                            | ✅ done | 6c2b01e |
+| TUI-003  | Bottom status bar — cwd, git branch, token usage, session ID, gateway status                          | ✅ done | e8d7ab8 |
+| TUI-004  | Message formatting — timestamps, role colors (❯ you / ◆ assistant), word wrap                         | ✅ done | 79ff308 |
+| TUI-005  | Quiet disconnect — single indicator, auto-reconnect, no error flood                                   | ✅ done | 79ff308 |
+| TUI-006  | Tool call display — inline spinner + tool name during execution, ✓/✗ on completion                    | ✅ done | 79ff308 |
+| TUI-007  | Thinking/reasoning display — dimmed 💭 block for `agent:thinking` events                              | ✅ done | 79ff308 |
+| TUI-007b | Wire token usage, model info, thinking levels end-to-end (gateway → types → TUI)                      | ✅ done | a061a64 |
+| TUI-007c | Ctrl+T to cycle thinking levels via `set:thinking` socket event                                       | ✅ done | a061a64 |
+
+## Wave 2 — Layout & Navigation ✅
+
+| ID      | Task                                                      | Status  | Notes   |
+| ------- | --------------------------------------------------------- | ------- | ------- |
+| TUI-010 | Scrollable message history — viewport with PgUp/PgDn      | ✅ done | 4d4ad38 |
+| TUI-008 | Conversation sidebar — list, create, switch conversations | ✅ done | 9ef578c |
+| TUI-009 | Keybinding system — Ctrl+L, Ctrl+N, Ctrl+K, Escape        | ✅ done | 9f38f5a |
+| TUI-011 | Message search — find in current conversation             | ✅ done | 8627827 |
+
+## Wave 3 — Advanced Features
+
+| ID      | Task                    | Status      | Notes |
+| ------- | ----------------------- | ----------- | ----- |
+| TUI-012 | Project/mission views   | not-started |       |
+| TUI-013 | Agent status monitoring | not-started |       |
+| TUI-014 | Settings/config screen  | not-started |       |
+| TUI-015 | Multiple agent sessions | not-started |       |
+
+---
+
+## Handoff Notes
+
+### File Structure
+
+```
+packages/cli/src/tui/
+├── app.tsx                          ← Shell composing all components + global keybindings
+├── components/
+│   ├── top-bar.tsx                  ← Mosaic icon + version + model + connection
+│   ├── bottom-bar.tsx               ← Keybinding hints + 3-line footer: gateway, cwd, tokens
+│   ├── message-list.tsx             ← Messages, tool calls, thinking, streaming, search highlights
+│   ├── input-bar.tsx                ← Bordered prompt with context-aware placeholder
+│   ├── sidebar.tsx                  ← Conversation list with keyboard navigation
+│   └── search-bar.tsx               ← Message search input with match count + navigation
+└── hooks/
+    ├── use-socket.ts                ← Typed Socket.IO + switchConversation/clearMessages
+    ├── use-git-info.ts              ← Reads cwd + git branch at startup
+    ├── use-viewport.ts              ← Scrollable viewport with auto-follow + PgUp/PgDn
+    ├── use-app-mode.ts              ← Panel focus state machine (chat/sidebar/search)
+    ├── use-conversations.ts         ← REST client for conversation CRUD
+    └── use-search.ts                ← Message search with match cycling
+```
+
+### Cross-Package Changes
+
+- **`packages/types/src/chat/events.ts`** — Added `SessionUsagePayload`, `SessionInfoPayload`, `SetThinkingPayload`, `session:info` event, `set:thinking` event
+- **`apps/gateway/src/chat/chat.gateway.ts`** — Emits `session:info` on session creation, includes `usage` in `agent:end`, handles `set:thinking`
+
+### Key Design Decisions
+
+#### Wave 1
+
+- Footer is 3 lines: (1) gateway status right-aligned, (2) cwd+branch left / session right, (3) tokens left / provider+model+thinking right
+- Mosaic icon uses brand colors in windmill cross pattern with `GAP` const to prevent prettier collapsing spaces
+- `flexGrow={1}` on header text column prevents re-render artifacts
+- Token/model data comes from gateway via `agent:end` payload and `session:info` events
+- Thinking level cycling via Ctrl+T sends `set:thinking` to gateway, which validates and responds with `session:info`
+
+#### Wave 2
+
+- `useViewport` calculates scroll offset from terminal rows; auto-follow snaps to bottom on new messages
+- `useAppMode` state machine manages focus: only the active panel handles keyboard input via `useInput({ isActive })`
+- Sidebar fetches conversations via REST (`GET /api/conversations`), not socket events
+- `switchConversation` in `useSocket` clears all local state (messages, streaming, tool calls)
+- Search uses `useMemo` for reactive match computation; viewport auto-scrolls to current match
+- Keybinding hints shown in bottom bar: `^L sidebar · ^N new · ^K search · ^T thinking · PgUp/Dn scroll`
+
+### How to Run
+
+```bash
+cd /home/jwoltje/src/mosaic-mono-v1-worktrees/tui-improvements
+pnpm --filter @mosaic/cli exec tsx src/cli.ts tui
+# or after build:
+node packages/cli/dist/cli.js tui --gateway http://localhost:4000
+```
+
+### Quality Gates
+
+```bash
+pnpm --filter @mosaic/cli typecheck && pnpm --filter @mosaic/cli lint
+pnpm --filter @mosaic/gateway typecheck && pnpm --filter @mosaic/gateway lint
+pnpm --filter @mosaic/types typecheck
+```

docs/TASKS.md

@@ -1,81 +1,100 @@
 # Tasks — MVP
 
 > Single-writer: orchestrator only. Workers read but never modify.
+>
+> **`agent` column values:** `codex` | `sonnet` | `haiku` | `glm-5` | `opus` | `—` (auto/default)
+> Pipeline crons pick the cheapest capable model. Override with a specific value when a task genuinely needs it.
+> Examples: `opus` for major architecture decisions, `codex` for pure coding, `haiku` for review/verify gates, `glm-5` for cost-sensitive coding.
 
-| id     | status      | milestone | description                                                         | pr   | notes         |
+| id     | status      | agent   | milestone                                                                                          | description                                                  | pr            | notes |
-| ------ | ----------- | --------- | ------------------------------------------------------------------- | ---- | ------------- |
+| ------ | ----------- | ------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------------- | ----- |
-| P0-001 | done        | Phase 0   | Scaffold monorepo                                                   | #60  | #1            |
+| P0-001 | done        | Phase 0 | Scaffold monorepo                                                                                  | #60                                                          | #1            |
-| P0-002 | done        | Phase 0   | @mosaic/types — migrate and extend shared types                     | #65  | #2            |
+| P0-002 | done        | Phase 0 | @mosaic/types — migrate and extend shared types                                                    | #65                                                          | #2            |
-| P0-003 | done        | Phase 0   | @mosaic/db — Drizzle schema and PG connection                       | #67  | #3            |
+| P0-003 | done        | Phase 0 | @mosaic/db — Drizzle schema and PG connection                                                      | #67                                                          | #3            |
-| P0-004 | done        | Phase 0   | @mosaic/auth — BetterAuth email/password setup                      | #68  | #4            |
+| P0-004 | done        | Phase 0 | @mosaic/auth — BetterAuth email/password setup                                                     | #68                                                          | #4            |
-| P0-005 | done        | Phase 0   | Docker Compose — PG 17, Valkey 8, SigNoz                            | #65  | #5            |
+| P0-005 | done        | Phase 0 | Docker Compose — PG 17, Valkey 8, SigNoz                                                           | #65                                                          | #5            |
-| P0-006 | done        | Phase 0   | OTEL foundation — OpenTelemetry SDK setup                           | #65  | #6            |
+| P0-006 | done        | Phase 0 | OTEL foundation — OpenTelemetry SDK setup                                                          | #65                                                          | #6            |
-| P0-007 | done        | Phase 0   | CI pipeline — Woodpecker config                                     | #69  | #7            |
+| P0-007 | done        | Phase 0 | CI pipeline — Woodpecker config                                                                    | #69                                                          | #7            |
-| P0-008 | done        | Phase 0   | Project docs — AGENTS.md, CLAUDE.md, README                         | #69  | #8            |
+| P0-008 | done        | Phase 0 | Project docs — AGENTS.md, CLAUDE.md, README                                                        | #69                                                          | #8            |
-| P0-009 | done        | Phase 0   | Verify Phase 0 — CI green, all packages build                       | #70  | #9            |
+| P0-009 | done        | Phase 0 | Verify Phase 0 — CI green, all packages build                                                      | #70                                                          | #9            |
-| P1-001 | done        | Phase 1   | apps/gateway scaffold — NestJS + Fastify adapter                    | #61  | #10           |
+| P1-001 | done        | Phase 1 | apps/gateway scaffold — NestJS + Fastify adapter                                                   | #61                                                          | #10           |
-| P1-002 | done        | Phase 1   | Auth middleware — BetterAuth session validation                     | #71  | #11           |
+| P1-002 | done        | Phase 1 | Auth middleware — BetterAuth session validation                                                    | #71                                                          | #11           |
-| P1-003 | done        | Phase 1   | @mosaic/brain — migrate from v0, PG backend                         | #71  | #12           |
+| P1-003 | done        | Phase 1 | @mosaic/brain — migrate from v0, PG backend                                                        | #71                                                          | #12           |
-| P1-004 | done        | Phase 1   | @mosaic/queue — migrate from v0                                     | #71  | #13           |
+| P1-004 | done        | Phase 1 | @mosaic/queue — migrate from v0                                                                    | #71                                                          | #13           |
-| P1-005 | done        | Phase 1   | Gateway routes — conversations CRUD + messages                      | #72  | #14           |
+| P1-005 | done        | Phase 1 | Gateway routes — conversations CRUD + messages                                                     | #72                                                          | #14           |
-| P1-006 | done        | Phase 1   | Gateway routes — tasks, projects, missions CRUD                     | #72  | #15           |
+| P1-006 | done        | Phase 1 | Gateway routes — tasks, projects, missions CRUD                                                    | #72                                                          | #15           |
-| P1-007 | done        | Phase 1   | WebSocket server — chat streaming                                   | #61  | #16           |
+| P1-007 | done        | Phase 1 | WebSocket server — chat streaming                                                                  | #61                                                          | #16           |
-| P1-008 | done        | Phase 1   | Basic agent dispatch — single provider                              | #61  | #17           |
+| P1-008 | done        | Phase 1 | Basic agent dispatch — single provider                                                             | #61                                                          | #17           |
-| P1-009 | done        | Phase 1   | Verify Phase 1 — gateway functional, API tested                     | #73  | #18           |
+| P1-009 | done        | Phase 1 | Verify Phase 1 — gateway functional, API tested                                                    | #73                                                          | #18           |
-| P2-001 | done        | Phase 2   | @mosaic/agent — Pi SDK integration + agent pool                     | #61  | #19           |
+| P2-001 | done        | Phase 2 | @mosaic/agent — Pi SDK integration + agent pool                                                    | #61                                                          | #19           |
-| P2-002 | done        | Phase 2   | Multi-provider support — Anthropic + Ollama                         | #74  | #20           |
+| P2-002 | done        | Phase 2 | Multi-provider support — Anthropic + Ollama                                                        | #74                                                          | #20           |
-| P2-003 | done        | Phase 2   | Agent routing engine — cost/capability matrix                       | #75  | #21           |
+| P2-003 | done        | Phase 2 | Agent routing engine — cost/capability matrix                                                      | #75                                                          | #21           |
-| P2-004 | done        | Phase 2   | Tool registration — brain, queue, memory tools                      | #76  | #22           |
+| P2-004 | done        | Phase 2 | Tool registration — brain, queue, memory tools                                                     | #76                                                          | #22           |
-| P2-005 | done        | Phase 2   | @mosaic/coord — migrate from v0, gateway integration                | #77  | #23           |
+| P2-005 | done        | Phase 2 | @mosaic/coord — migrate from v0, gateway integration                                               | #77                                                          | #23           |
-| P2-006 | done        | Phase 2   | Agent session management — tmux + monitoring                        | #78  | #24           |
+| P2-006 | done        | Phase 2 | Agent session management — tmux + monitoring                                                       | #78                                                          | #24           |
-| P2-007 | done        | Phase 2   | Verify Phase 2 — multi-provider routing works                       | #79  | #25           |
+| P2-007 | done        | Phase 2 | Verify Phase 2 — multi-provider routing works                                                      | #79                                                          | #25           |
-| P3-001 | done        | Phase 3   | apps/web scaffold — Next.js 16 + BetterAuth + Tailwind              | #82  | #26           |
+| P3-001 | done        | Phase 3 | apps/web scaffold — Next.js 16 + BetterAuth + Tailwind                                             | #82                                                          | #26           |
-| P3-002 | done        | Phase 3   | Auth pages — login, registration, SSO redirect                      | #83  | #27           |
+| P3-002 | done        | Phase 3 | Auth pages — login, registration, SSO redirect                                                     | #83                                                          | #27           |
-| P3-003 | done        | Phase 3   | Chat UI — conversations, messages, streaming                        | #84  | #28           |
+| P3-003 | done        | Phase 3 | Chat UI — conversations, messages, streaming                                                       | #84                                                          | #28           |
-| P3-004 | done        | Phase 3   | Task management — list view + kanban board                          | #86  | #29           |
+| P3-004 | done        | Phase 3 | Task management — list view + kanban board                                                         | #86                                                          | #29           |
-| P3-005 | done        | Phase 3   | Project & mission views — dashboard + PRD viewer                    | #87  | #30           |
+| P3-005 | done        | Phase 3 | Project & mission views — dashboard + PRD viewer                                                   | #87                                                          | #30           |
-| P3-006 | done        | Phase 3   | Settings — provider config, profile, integrations                   | #88  | #31           |
+| P3-006 | done        | Phase 3 | Settings — provider config, profile, integrations                                                  | #88                                                          | #31           |
-| P3-007 | done        | Phase 3   | Admin panel — user management, RBAC                                 | #89  | #32           |
+| P3-007 | done        | Phase 3 | Admin panel — user management, RBAC                                                                | #89                                                          | #32           |
-| P3-008 | done        | Phase 3   | Verify Phase 3 — web dashboard functional E2E                       | —    | #33           |
+| P3-008 | done        | Phase 3 | Verify Phase 3 — web dashboard functional E2E                                                      | —                                                            | #33           |
-| P4-001 | done        | Phase 4   | @mosaic/memory — preference + insight stores                        | —    | #34           |
+| P4-001 | done        | Phase 4 | @mosaic/memory — preference + insight stores                                                       | —                                                            | #34           |
-| P4-002 | done        | Phase 4   | Semantic search — pgvector embeddings + search API                  | —    | #35           |
+| P4-002 | done        | Phase 4 | Semantic search — pgvector embeddings + search API                                                 | —                                                            | #35           |
-| P4-003 | done        | Phase 4   | @mosaic/log — log ingest, parsing, tiered storage                   | —    | #36           |
+| P4-003 | done        | Phase 4 | @mosaic/log — log ingest, parsing, tiered storage                                                  | —                                                            | #36           |
-| P4-004 | done        | Phase 4   | Summarization pipeline — Haiku-tier LLM + cron                      | —    | #37           |
+| P4-004 | done        | Phase 4 | Summarization pipeline — Haiku-tier LLM + cron                                                     | —                                                            | #37           |
-| P4-005 | done        | Phase 4   | Memory integration — inject into agent sessions                     | —    | #38           |
+| P4-005 | done        | Phase 4 | Memory integration — inject into agent sessions                                                    | —                                                            | #38           |
-| P4-006 | done        | Phase 4   | Skill management — catalog, install, config                         | —    | #39           |
+| P4-006 | done        | Phase 4 | Skill management — catalog, install, config                                                        | —                                                            | #39           |
-| P4-007 | done        | Phase 4   | Verify Phase 4 — memory + log pipeline working                      | —    | #40           |
+| P4-007 | done        | Phase 4 | Verify Phase 4 — memory + log pipeline working                                                     | —                                                            | #40           |
-| P5-001 | done        | Phase 5   | Plugin host — gateway plugin loading + channel interface            | —    | #41           |
+| P5-001 | done        | Phase 5 | Plugin host — gateway plugin loading + channel interface                                           | —                                                            | #41           |
-| P5-002 | done        | Phase 5   | @mosaic/discord-plugin — Discord bot + channel plugin               | #61  | #42           |
+| P5-002 | done        | Phase 5 | @mosaic/discord-plugin — Discord bot + channel plugin                                              | #61                                                          | #42           |
-| P5-003 | done        | Phase 5   | @mosaic/telegram-plugin — Telegraf bot + channel plugin             | —    | #43           |
+| P5-003 | done        | Phase 5 | @mosaic/telegram-plugin — Telegraf bot + channel plugin                                            | —                                                            | #43           |
-| P5-004 | done        | Phase 5   | SSO — Authentik OIDC adapter end-to-end                             | —    | #44           |
+| P5-004 | done        | Phase 5 | SSO — Authentik OIDC adapter end-to-end                                                            | —                                                            | #44           |
-| P5-005 | done        | Phase 5   | Verify Phase 5 — Discord + Telegram + SSO working                   | #99  | #45           |
+| P5-005 | done        | Phase 5 | Verify Phase 5 — Discord + Telegram + SSO working                                                  | #99                                                          | #45           |
-| P6-001 | done        | Phase 6   | @mosaic/cli — unified CLI binary + subcommands                      | #104 | #46           |
+| P6-001 | done        | Phase 6 | @mosaic/cli — unified CLI binary + subcommands                                                     | #104                                                         | #46           |
-| P6-002 | done        | Phase 6   | @mosaic/prdy — migrate PRD wizard from v0                           | #101 | #47           |
+| P6-002 | done        | Phase 6 | @mosaic/prdy — migrate PRD wizard from v0                                                          | #101                                                         | #47           |
-| P6-003 | done        | Phase 6   | @mosaic/quality-rails — migrate scaffolder from v0                  | #100 | #48           |
+| P6-003 | done        | Phase 6 | @mosaic/quality-rails — migrate scaffolder from v0                                                 | #100                                                         | #48           |
-| P6-004 | done        | Phase 6   | @mosaic/mosaic — install wizard for v1                              | #103 | #49           |
+| P6-004 | done        | Phase 6 | @mosaic/mosaic — install wizard for v1                                                             | #103                                                         | #49           |
-| P6-005 | done        | Phase 6   | Pi TUI integration — mosaic tui                                     | #61  | #50           |
+| P6-005 | done        | Phase 6 | Pi TUI integration — mosaic tui                                                                    | #61                                                          | #50           |
-| P6-006 | done        | Phase 6   | Verify Phase 6 — CLI functional, all subcommands                    | —    | #51           |
+| P6-006 | done        | Phase 6 | Verify Phase 6 — CLI functional, all subcommands                                                   | —                                                            | #51           |
-| P7-009 | done        | Phase 7   | Web chat — WebSocket integration, streaming, conversation switching | #136 | #120 W1 done  |
+| P7-009 | done        | Phase 7 | Web chat — WebSocket integration, streaming, conversation switching                                | #136                                                         | #120 W1 done  |
-| P7-001 | done        | Phase 7   | MCP endpoint hardening — streamable HTTP transport                  | #137 | #52 W1 done   |
+| P7-001 | done        | Phase 7 | MCP endpoint hardening — streamable HTTP transport                                                 | #137                                                         | #52 W1 done   |
-| P7-010 | done        | Phase 7   | Web conversation management — list, search, rename, delete, archive | #139 | #121 W2 done  |
+| P7-010 | done        | Phase 7 | Web conversation management — list, search, rename, delete, archive                                | #139                                                         | #121 W2 done  |
-| P7-015 | done        | Phase 7   | Agent tool expansion — file ops, git, shell exec, web fetch         | #138 | #126 W2 done  |
+| P7-015 | done        | Phase 7 | Agent tool expansion — file ops, git, shell exec, web fetch                                        | #138                                                         | #126 W2 done  |
-| P7-011 | done        | Phase 7   | Web project detail views — missions, tasks, PRDs, dashboards        | #140 | #122 W3 done  |
+| P7-011 | done        | Phase 7 | Web project detail views — missions, tasks, PRDs, dashboards                                       | #140                                                         | #122 W3 done  |
-| P7-016 | done        | Phase 7   | MCP client — gateway connects to external MCP servers as tools      | #141 | #127 W3 done  |
+| P7-016 | done        | Phase 7 | MCP client — gateway connects to external MCP servers as tools                                     | #141                                                         | #127 W3 done  |
-| P7-012 | done        | Phase 7   | Web provider management UI — add, configure, test LLM providers     | #142 | #123 W4 done  |
+| P7-012 | done        | Phase 7 | Web provider management UI — add, configure, test LLM providers                                    | #142                                                         | #123 W4 done  |
-| P7-017 | done        | Phase 7   | Agent skill invocation — load and execute skills from catalog       | #143 | #128 W4 done  |
+| P7-017 | done        | Phase 7 | Agent skill invocation — load and execute skills from catalog                                      | #143                                                         | #128 W4 done  |
-| P7-013 | done        | Phase 7   | Web settings persistence — profile, preferences save to DB          | #145 | #124 W5 done  |
+| P7-013 | done        | Phase 7 | Web settings persistence — profile, preferences save to DB                                         | #145                                                         | #124 W5 done  |
-| P7-018 | done        | Phase 7   | CLI model/provider switching — --model, --provider, /model in TUI   | #144 | #129 W5 done  |
+| P7-018 | done        | Phase 7 | CLI model/provider switching — --model, --provider, /model in TUI                                  | #144                                                         | #129 W5 done  |
-| P7-014 | done        | Phase 7   | Web admin panel — user CRUD, role assignment, system health         | #150 | #125 W6 done  |
+| P7-014 | done        | Phase 7 | Web admin panel — user CRUD, role assignment, system health                                        | #150                                                         | #125 W6 done  |
-| P7-019 | done        | Phase 7   | CLI session management — list, resume, destroy sessions             | #146 | #130 W6 done  |
+| P7-019 | done        | Phase 7 | CLI session management — list, resume, destroy sessions                                            | #146                                                         | #130 W6 done  |
-| P7-020 | done        | Phase 7   | Coord DB migration — project-scoped missions, multi-tenant RBAC     | #149 | #131 W7 done  |
+| P7-020 | done        | Phase 7 | Coord DB migration — project-scoped missions, multi-tenant RBAC                                    | #149                                                         | #131 W7 done  |
-| FIX-02 | done        | Backlog   | TUI agent:end — fix React state updater side-effect                 | #147 | #133 W8 done  |
+| FIX-02 | done        | Backlog | TUI agent:end — fix React state updater side-effect                                                | #147                                                         | #133 W8 done  |
-| FIX-03 | done        | Backlog   | Agent session — cwd sandbox, system prompt, tool restrictions       | #148 | #134 W8 done  |
+| FIX-03 | done        | Backlog | Agent session — cwd sandbox, system prompt, tool restrictions                                      | #148                                                         | #134 W8 done  |
-| P7-004 | done        | Phase 7   | E2E test suite — Playwright critical paths                          | #152 | #55 W9 done   |
+| P7-004 | done        | Phase 7 | E2E test suite — Playwright critical paths                                                         | #152                                                         | #55 W9 done   |
-| P7-006 | done        | Phase 7   | Documentation — user guide, admin guide, dev guide                  | #151 | #57 W9 done   |
+| P7-006 | done        | Phase 7 | Documentation — user guide, admin guide, dev guide                                                 | #151                                                         | #57 W9 done   |
-| P7-007 | done        | Phase 7   | Bare-metal deployment docs + .env.example                           | #153 | #58 W9 done   |
+| P7-007 | done        | Phase 7 | Bare-metal deployment docs + .env.example                                                          | #153                                                         | #58 W9 done   |
-| P7-021 | done        | Phase 7   | Verify Phase 7 — feature-complete platform E2E                      | —    | #132 W10 done |
+| P7-021 | done        | Phase 7 | Verify Phase 7 — feature-complete platform E2E                                                     | —                                                            | #132 W10 done |
-| P8-001 | not-started | Phase 8   | Additional SSO providers — WorkOS + Keycloak                        | —    | #53           |
+| P8-005 | done        | Phase 8 | CLI command architecture — DB schema + brain repo + gateway endpoints                              | #158                                                         |               |
-| P8-002 | not-started | Phase 8   | Additional LLM providers — Codex, Z.ai, LM Studio, llama.cpp        | —    | #54           |
+| P8-006 | done        | Phase 8 | CLI command architecture — agent, mission, prdy commands + TUI mods                                | #158                                                         |               |
-| P8-003 | not-started | Phase 8   | Performance optimization                                            | —    | #56           |
+| P8-007 | done        | Phase 8 | DB migrations — preferences.mutable + teams + team_members + projects.teamId                       | #175                                                         | #160          |
-| P8-004 | not-started | Phase 8   | Beta release gate — v0.1.0 tag                                      | —    | #59           |
+| P8-008 | done        | Phase 8 | @mosaic/types — CommandDef, CommandManifest, new socket events                                     | #174                                                         | #161          |
-| FIX-01 | done        | Backlog   | Call piSession.dispose() in AgentService.destroySession             | #78  | #62           |
+| P8-009 | done        | Phase 8 | TUI Phase 1 — slash command parsing, local commands, system message rendering, InputBar wiring     | #176                                                         | #162          |
+| P8-010 | done        | Phase 8 | Gateway Phase 2 — CommandRegistryService, CommandExecutorService, socket + REST commands           | #178                                                         | #163          |
+| P8-011 | done        | Phase 8 | Gateway Phase 3 — PreferencesService, /preferences REST, /system Valkey override, prompt injection | #180                                                         | #164          |
+| P8-012 | done        | Phase 8 | Gateway Phase 4 — /agent, /provider (URL+clipboard), /mission, /prdy, /tools commands              | #181                                                         | #165          |
+| P8-013 | done        | Phase 8 | Gateway Phase 5 — MosaicPlugin lifecycle, ReloadService, hot reload, system:reload TUI             | #182                                                         | #166          |
+| P8-014 | done        | Phase 8 | Gateway Phase 6 — SessionGCService (all tiers), /gc command, cron integration                      | #179                                                         | #167          |
+| P8-015 | done        | Phase 8 | Gateway Phase 7 — WorkspaceService, ProjectBootstrapService, teams project ownership               | #183                                                         | #168          |
+| P8-016 | done        | Phase 8 | Security — file/git/shell tool strict path hardening, sandbox escape prevention                    | #177                                                         | #169          |
+| P8-017 | done        | Phase 8 | TUI Phase 8 — autocomplete sidebar, fuzzy match, arg hints, up-arrow history                       | #184                                                         | #170          |
+| P8-018 | done        | Phase 8 | Spin-off plan stubs — Gatekeeper, Task Queue Unification, Chroot Sandboxing                        | —                                                            | #171          |
+| P8-019 | done        | Phase 8 | Verify Platform Architecture — integration + E2E verification                                      | #185                                                         | #172          |
+| P8-001 | in-progress | codex   | Phase 8                                                                                            | Additional SSO providers — WorkOS + Keycloak                 | #210          | #53   |
+| P8-002 | in-progress | codex   | Phase 8                                                                                            | Additional LLM providers — Codex, Z.ai, LM Studio, llama.cpp | —             | #54   |
+| P8-003 | in-progress | codex   | Phase 8                                                                                            | Performance optimization                                     | —             | #56   |
+| P8-004 | done        | haiku   | Phase 8                                                                                            | Beta release gate — v0.1.0 tag                               | —             | #59   |
+| FIX-01 | done        | Backlog | Call piSession.dispose() in AgentService.destroySession                                            | #78                                                          | #62           |

docs/guides/admin-guide.md

@@ -237,14 +237,23 @@ external clients. Authentication requires a valid BetterAuth session (cookie or
 
 ### SSO (Optional)
 
-| Variable                  | Description                    |
+| Variable                    | Description                                                                  |
-| ------------------------- | ------------------------------ |
+| --------------------------- | ---------------------------------------------------------------------------- |
-| `AUTHENTIK_CLIENT_ID`     | Authentik OAuth2 client ID     |
+| `AUTHENTIK_CLIENT_ID`       | Authentik OAuth2 client ID                                                   |
-| `AUTHENTIK_CLIENT_SECRET` | Authentik OAuth2 client secret |
+| `AUTHENTIK_CLIENT_SECRET`   | Authentik OAuth2 client secret                                               |
-| `AUTHENTIK_ISSUER`        | Authentik OIDC issuer URL      |
+| `AUTHENTIK_ISSUER`          | Authentik OIDC issuer URL                                                    |
+| `AUTHENTIK_TEAM_SYNC_CLAIM` | Optional claim used to derive team sync data (defaults to `groups`)          |
+| `WORKOS_CLIENT_ID`          | WorkOS OAuth client ID                                                       |
+| `WORKOS_CLIENT_SECRET`      | WorkOS OAuth client secret                                                   |
+| `WORKOS_ISSUER`             | WorkOS OIDC issuer URL                                                       |
+| `WORKOS_TEAM_SYNC_CLAIM`    | Optional claim used to derive team sync data (defaults to `organization_id`) |
+| `KEYCLOAK_CLIENT_ID`        | Keycloak OAuth client ID                                                     |
+| `KEYCLOAK_CLIENT_SECRET`    | Keycloak OAuth client secret                                                 |
+| `KEYCLOAK_ISSUER`           | Keycloak realm issuer URL                                                    |
+| `KEYCLOAK_TEAM_SYNC_CLAIM`  | Optional claim used to derive team sync data (defaults to `groups`)          |
+| `KEYCLOAK_SAML_LOGIN_URL`   | Optional SAML login URL used when OIDC is unavailable                        |
 
-All three Authentik variables must be set together. If only `AUTHENTIK_CLIENT_ID`
+Each OIDC provider requires its client ID, client secret, and issuer URL together. If only part of a provider configuration is set, gateway startup logs a warning and that provider is skipped. Keycloak can fall back to SAML when `KEYCLOAK_SAML_LOGIN_URL` is configured.
-is set, a warning is logged and SSO is disabled.
 
 ### Agent