diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
deleted file mode 100644
index 9edff1c7..00000000
--- a/apps/web/next-env.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
deleted file mode 100644
index 58479dea..00000000
--- a/apps/web/next.config.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { NextConfig } from 'next';
-
-const nextConfig: NextConfig = {
-  output: 'standalone',
-  transpilePackages: ['@mosaicstack/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;
diff --git a/apps/web/package.json b/apps/web/package.json
index 93ab92a1..8b6b6e57 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -3,22 +3,19 @@
   "version": "0.0.2",
   "private": true,
   "scripts": {
-    "build": "node ../../scripts/build-web.mjs",
-    "build:vite": "vite build",
-    "dev": "next dev -p 3101",
-    "dev:vite": "vite",
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview",
     "lint": "eslint src",
     "typecheck": "tsc --noEmit",
     "test": "vitest run --passWithNoTests",
-    "test:e2e": "playwright test",
-    "start": "next start -p 3101"
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@mosaicstack/design-tokens": "workspace:^",
     "@mosaicstack/types": "workspace:^",
     "better-auth": "^1.5.5",
     "clsx": "^2.1.0",
-    "next": "^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
diff --git a/apps/web/src/app/(auth)/layout.tsx b/apps/web/src/app/(auth)/layout.tsx
deleted file mode 100644
index 8ff3499f..00000000
--- a/apps/web/src/app/(auth)/layout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { ReactNode } from 'react';
-import { GuestGuard } from '@/components/guest-guard';
-
-export default function AuthLayout({ children }: { children: ReactNode }): React.ReactElement {
-  return (
-    <GuestGuard>
-      <div className="flex min-h-screen items-center justify-center bg-surface-bg">
-        <div className="w-full max-w-md rounded-xl border border-surface-border bg-surface-card p-8 shadow-lg">
-          {children}
-        </div>
-      </div>
-    </GuestGuard>
-  );
-}
diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx
deleted file mode 100644
index a1a1c327..00000000
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-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();
-    setError(null);
-    setLoading(true);
-
-    const form = new FormData(e.currentTarget);
-    const email = form.get('email') as string;
-    const password = form.get('password') as string;
-
-    const result = await signIn.email({ email, password });
-
-    if (result.error) {
-      setError(result.error.message ?? 'Sign in failed');
-      setLoading(false);
-      return;
-    }
-
-    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>
-      <p className="mt-1 text-sm text-text-secondary">Sign in to your Mosaic account</p>
-
-      {error && (
-        <div
-          role="alert"
-          className="mt-4 rounded-lg border border-error/30 bg-error/10 px-4 py-3 text-sm text-error"
-        >
-          {error}
-        </div>
-      )}
-
-      <form className="mt-6 space-y-4" onSubmit={handleSubmit}>
-        <div>
-          <label htmlFor="email" className="block text-sm font-medium text-text-secondary">
-            Email
-          </label>
-          <input
-            id="email"
-            name="email"
-            type="email"
-            autoComplete="email"
-            required
-            disabled={loading}
-            className="mt-1 block w-full 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"
-            placeholder="you@example.com"
-          />
-        </div>
-
-        <div>
-          <label htmlFor="password" className="block text-sm font-medium text-text-secondary">
-            Password
-          </label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            autoComplete="current-password"
-            required
-            disabled={loading}
-            className="mt-1 block w-full 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"
-            placeholder="••••••••"
-          />
-        </div>
-
-        <button
-          type="submit"
-          disabled={loading}
-          className="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-surface-card disabled:opacity-50"
-        >
-          {loading ? 'Signing in...' : 'Sign in'}
-        </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">
-          Sign up
-        </Link>
-      </p>
-    </div>
-  );
-}
diff --git a/apps/web/src/app/(auth)/register/page.tsx b/apps/web/src/app/(auth)/register/page.tsx
deleted file mode 100644
index a17228c1..00000000
--- a/apps/web/src/app/(auth)/register/page.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import { signUp } from '@/lib/auth-client';
-
-export default function RegisterPage(): React.ReactElement {
-  const router = useRouter();
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  async function handleSubmit(e: React.FormEvent<HTMLFormElement>): Promise<void> {
-    e.preventDefault();
-    setError(null);
-    setLoading(true);
-
-    const form = new FormData(e.currentTarget);
-    const name = form.get('name') as string;
-    const email = form.get('email') as string;
-    const password = form.get('password') as string;
-
-    const result = await signUp.email({ name, email, password });
-
-    if (result.error) {
-      setError(result.error.message ?? 'Registration failed');
-      setLoading(false);
-      return;
-    }
-
-    router.push('/chat');
-  }
-
-  return (
-    <div>
-      <h1 className="text-2xl font-semibold">Create account</h1>
-      <p className="mt-1 text-sm text-text-secondary">Get started with Mosaic</p>
-
-      {error && (
-        <div
-          role="alert"
-          className="mt-4 rounded-lg border border-error/30 bg-error/10 px-4 py-3 text-sm text-error"
-        >
-          {error}
-        </div>
-      )}
-
-      <form className="mt-6 space-y-4" onSubmit={handleSubmit}>
-        <div>
-          <label htmlFor="name" className="block text-sm font-medium text-text-secondary">
-            Name
-          </label>
-          <input
-            id="name"
-            name="name"
-            type="text"
-            autoComplete="name"
-            required
-            disabled={loading}
-            className="mt-1 block w-full 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"
-            placeholder="Your name"
-          />
-        </div>
-
-        <div>
-          <label htmlFor="email" className="block text-sm font-medium text-text-secondary">
-            Email
-          </label>
-          <input
-            id="email"
-            name="email"
-            type="email"
-            autoComplete="email"
-            required
-            disabled={loading}
-            className="mt-1 block w-full 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"
-            placeholder="you@example.com"
-          />
-        </div>
-
-        <div>
-          <label htmlFor="password" className="block text-sm font-medium text-text-secondary">
-            Password
-          </label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            autoComplete="new-password"
-            required
-            disabled={loading}
-            className="mt-1 block w-full 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"
-            placeholder="••••••••"
-          />
-        </div>
-
-        <button
-          type="submit"
-          disabled={loading}
-          className="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-surface-card disabled:opacity-50"
-        >
-          {loading ? 'Creating account...' : 'Create account'}
-        </button>
-      </form>
-
-      <p className="mt-4 text-center text-sm text-text-muted">
-        Already have an account?{' '}
-        <Link href="/login" className="text-blue-400 hover:text-blue-300">
-          Sign in
-        </Link>
-      </p>
-    </div>
-  );
-}
diff --git a/apps/web/src/app/(dashboard)/admin/page.tsx b/apps/web/src/app/(dashboard)/admin/page.tsx
deleted file mode 100644
index 4fc235cf..00000000
--- a/apps/web/src/app/(dashboard)/admin/page.tsx
+++ /dev/null
@@ -1,531 +0,0 @@
-'use client';
-
-import { useEffect, useState, useCallback } from 'react';
-import { AdminRoleGuard } from '@/components/admin-role-guard';
-import { api } from '@/lib/api';
-import { cn } from '@/lib/cn';
-
-// ── Types ──────────────────────────────────────────────────────────────────────
-
-interface UserDto {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  banned: boolean;
-  banReason: string | null;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface UserListDto {
-  users: UserDto[];
-  total: number;
-}
-
-interface ServiceStatusDto {
-  status: 'ok' | 'error';
-  latencyMs?: number;
-  error?: string;
-}
-
-interface ProviderStatusDto {
-  id: string;
-  name: string;
-  available: boolean;
-  modelCount: number;
-}
-
-interface HealthStatusDto {
-  status: 'ok' | 'degraded' | 'error';
-  database: ServiceStatusDto;
-  cache: ServiceStatusDto;
-  agentPool: { activeSessions: number };
-  providers: ProviderStatusDto[];
-  checkedAt: string;
-}
-
-// ── Admin Page ─────────────────────────────────────────────────────────────────
-
-export default function AdminPage(): React.ReactElement {
-  return (
-    <AdminRoleGuard>
-      <AdminContent />
-    </AdminRoleGuard>
-  );
-}
-
-function AdminContent(): React.ReactElement {
-  const [activeTab, setActiveTab] = useState<'users' | 'health'>('users');
-
-  return (
-    <div className="mx-auto max-w-5xl space-y-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold text-text-primary">Admin Panel</h1>
-      </div>
-
-      <div className="flex gap-1 border-b border-surface-border">
-        {(['users', 'health'] as const).map((tab) => (
-          <button
-            key={tab}
-            type="button"
-            onClick={() => setActiveTab(tab)}
-            className={cn(
-              'px-4 py-2 text-sm font-medium capitalize transition-colors',
-              activeTab === tab
-                ? 'border-b-2 border-blue-500 text-blue-400'
-                : 'text-text-secondary hover:text-text-primary',
-            )}
-          >
-            {tab === 'users' ? 'User Management' : 'System Health'}
-          </button>
-        ))}
-      </div>
-
-      {activeTab === 'users' ? <UsersTab /> : <HealthTab />}
-    </div>
-  );
-}
-
-// ── Users Tab ──────────────────────────────────────────────────────────────────
-
-function UsersTab(): React.ReactElement {
-  const [users, setUsers] = useState<UserDto[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [showCreate, setShowCreate] = useState(false);
-
-  const loadUsers = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const data = await api<UserListDto>('/api/admin/users');
-      setUsers(data.users);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load users');
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    void loadUsers();
-  }, [loadUsers]);
-
-  async function handleRoleToggle(user: UserDto): Promise<void> {
-    const newRole = user.role === 'admin' ? 'member' : 'admin';
-    try {
-      await api(`/api/admin/users/${user.id}/role`, {
-        method: 'PATCH',
-        body: { role: newRole },
-      });
-      await loadUsers();
-    } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to update role');
-    }
-  }
-
-  async function handleBanToggle(user: UserDto): Promise<void> {
-    const endpoint = user.banned ? 'unban' : 'ban';
-    try {
-      await api(`/api/admin/users/${user.id}/${endpoint}`, { method: 'POST' });
-      await loadUsers();
-    } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to update ban status');
-    }
-  }
-
-  async function handleDelete(user: UserDto): Promise<void> {
-    if (!confirm(`Delete user ${user.email}? This cannot be undone.`)) return;
-    try {
-      await api(`/api/admin/users/${user.id}`, { method: 'DELETE' });
-      await loadUsers();
-    } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to delete user');
-    }
-  }
-
-  if (loading) {
-    return <p className="text-sm text-text-muted">Loading users...</p>;
-  }
-
-  if (error) {
-    return (
-      <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-4">
-        <p className="text-sm text-red-400">{error}</p>
-        <button
-          type="button"
-          onClick={() => void loadUsers()}
-          className="mt-2 text-xs text-red-300 underline hover:no-underline"
-        >
-          Retry
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <p className="text-sm text-text-muted">{users.length} user(s)</p>
-        <button
-          type="button"
-          onClick={() => setShowCreate(true)}
-          className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-blue-700"
-        >
-          + New User
-        </button>
-      </div>
-
-      {showCreate && (
-        <CreateUserForm
-          onCancel={() => setShowCreate(false)}
-          onCreated={() => {
-            setShowCreate(false);
-            void loadUsers();
-          }}
-        />
-      )}
-
-      {users.length === 0 ? (
-        <div className="rounded-lg border border-surface-border bg-surface-card p-6 text-center">
-          <p className="text-sm text-text-muted">No users found</p>
-        </div>
-      ) : (
-        <div className="overflow-hidden rounded-lg border border-surface-border">
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-surface-border bg-surface-elevated text-left text-xs text-text-muted">
-                <th className="px-4 py-2 font-medium">Name / Email</th>
-                <th className="px-4 py-2 font-medium">Role</th>
-                <th className="hidden px-4 py-2 font-medium md:table-cell">Status</th>
-                <th className="hidden px-4 py-2 font-medium md:table-cell">Created</th>
-                <th className="px-4 py-2 font-medium">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {users.map((user) => (
-                <tr key={user.id} className="border-b border-surface-border last:border-b-0">
-                  <td className="px-4 py-3">
-                    <div className="text-sm font-medium text-text-primary">{user.name}</div>
-                    <div className="text-xs text-text-muted">{user.email}</div>
-                  </td>
-                  <td className="px-4 py-3">
-                    <span
-                      className={cn(
-                        'inline-flex rounded-full px-2 py-0.5 text-xs font-medium',
-                        user.role === 'admin'
-                          ? 'bg-purple-500/20 text-purple-400'
-                          : 'bg-surface-elevated text-text-secondary',
-                      )}
-                    >
-                      {user.role}
-                    </span>
-                  </td>
-                  <td className="hidden px-4 py-3 md:table-cell">
-                    {user.banned ? (
-                      <span className="inline-flex rounded-full bg-red-500/20 px-2 py-0.5 text-xs font-medium text-red-400">
-                        Banned
-                      </span>
-                    ) : (
-                      <span className="inline-flex rounded-full bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-400">
-                        Active
-                      </span>
-                    )}
-                  </td>
-                  <td className="hidden px-4 py-3 text-xs text-text-muted md:table-cell">
-                    {new Date(user.createdAt).toLocaleDateString()}
-                  </td>
-                  <td className="px-4 py-3">
-                    <div className="flex items-center gap-2">
-                      <button
-                        type="button"
-                        onClick={() => void handleRoleToggle(user)}
-                        className="text-xs text-blue-400 hover:text-blue-300"
-                        title={user.role === 'admin' ? 'Demote to member' : 'Promote to admin'}
-                      >
-                        {user.role === 'admin' ? 'Demote' : 'Promote'}
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => void handleBanToggle(user)}
-                        className={cn(
-                          'text-xs',
-                          user.banned
-                            ? 'text-green-400 hover:text-green-300'
-                            : 'text-yellow-400 hover:text-yellow-300',
-                        )}
-                      >
-                        {user.banned ? 'Unban' : 'Ban'}
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => void handleDelete(user)}
-                        className="text-xs text-red-400 hover:text-red-300"
-                      >
-                        Delete
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── Create User Form ──────────────────────────────────────────────────────────
-
-interface CreateUserFormProps {
-  onCancel: () => void;
-  onCreated: () => void;
-}
-
-function CreateUserForm({ onCancel, onCreated }: CreateUserFormProps): React.ReactElement {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [role, setRole] = useState('member');
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleSubmit(e: React.FormEvent): Promise<void> {
-    e.preventDefault();
-    setSubmitting(true);
-    setError(null);
-    try {
-      await api('/api/admin/users', {
-        method: 'POST',
-        body: { name, email, password, role },
-      });
-      onCreated();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to create user');
-    } finally {
-      setSubmitting(false);
-    }
-  }
-
-  return (
-    <div className="rounded-lg border border-surface-border bg-surface-card p-4">
-      <h3 className="mb-3 text-sm font-medium text-text-primary">Create New User</h3>
-      <form onSubmit={(e) => void handleSubmit(e)} className="space-y-3">
-        {error && <p className="text-xs text-red-400">{error}</p>}
-        <div className="grid grid-cols-2 gap-3">
-          <div>
-            <label className="mb-1 block text-xs text-text-muted">Name</label>
-            <input
-              type="text"
-              required
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="w-full rounded-md border border-surface-border bg-surface-elevated px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-blue-500"
-            />
-          </div>
-          <div>
-            <label className="mb-1 block text-xs text-text-muted">Email</label>
-            <input
-              type="email"
-              required
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="w-full rounded-md border border-surface-border bg-surface-elevated px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-blue-500"
-            />
-          </div>
-          <div>
-            <label className="mb-1 block text-xs text-text-muted">Password</label>
-            <input
-              type="password"
-              required
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full rounded-md border border-surface-border bg-surface-elevated px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-blue-500"
-            />
-          </div>
-          <div>
-            <label className="mb-1 block text-xs text-text-muted">Role</label>
-            <select
-              value={role}
-              onChange={(e) => setRole(e.target.value)}
-              className="w-full rounded-md border border-surface-border bg-surface-elevated px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-blue-500"
-            >
-              <option value="member">member</option>
-              <option value="admin">admin</option>
-            </select>
-          </div>
-        </div>
-        <div className="flex justify-end gap-2">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="rounded-md px-3 py-1.5 text-sm text-text-muted hover:text-text-primary"
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            disabled={submitting}
-            className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
-          >
-            {submitting ? 'Creating...' : 'Create'}
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-}
-
-// ── Health Tab ────────────────────────────────────────────────────────────────
-
-function HealthTab(): React.ReactElement {
-  const [health, setHealth] = useState<HealthStatusDto | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const loadHealth = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const data = await api<HealthStatusDto>('/api/admin/health');
-      setHealth(data);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load health');
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    void loadHealth();
-  }, [loadHealth]);
-
-  if (loading) {
-    return <p className="text-sm text-text-muted">Loading health status...</p>;
-  }
-
-  if (error) {
-    return (
-      <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-4">
-        <p className="text-sm text-red-400">{error}</p>
-        <button
-          type="button"
-          onClick={() => void loadHealth()}
-          className="mt-2 text-xs text-red-300 underline hover:no-underline"
-        >
-          Retry
-        </button>
-      </div>
-    );
-  }
-
-  if (!health) return <></>;
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <StatusBadge status={health.status} />
-          <span className="text-sm text-text-muted">
-            Last checked: {new Date(health.checkedAt).toLocaleTimeString()}
-          </span>
-        </div>
-        <button
-          type="button"
-          onClick={() => void loadHealth()}
-          className="text-xs text-blue-400 hover:text-blue-300"
-        >
-          Refresh
-        </button>
-      </div>
-
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {/* Database */}
-        <HealthCard title="Database (PostgreSQL)" status={health.database.status}>
-          {health.database.latencyMs !== undefined && (
-            <p className="text-xs text-text-muted">Latency: {health.database.latencyMs}ms</p>
-          )}
-          {health.database.error && <p className="text-xs text-red-400">{health.database.error}</p>}
-        </HealthCard>
-
-        {/* Cache */}
-        <HealthCard title="Cache (Valkey)" status={health.cache.status}>
-          {health.cache.latencyMs !== undefined && (
-            <p className="text-xs text-text-muted">Latency: {health.cache.latencyMs}ms</p>
-          )}
-          {health.cache.error && <p className="text-xs text-red-400">{health.cache.error}</p>}
-        </HealthCard>
-
-        {/* Agent Pool */}
-        <HealthCard title="Agent Pool" status="ok">
-          <p className="text-xs text-text-muted">
-            Active sessions: {health.agentPool.activeSessions}
-          </p>
-        </HealthCard>
-
-        {/* Providers */}
-        <HealthCard
-          title="LLM Providers"
-          status={health.providers.some((p) => p.available) ? 'ok' : 'error'}
-        >
-          {health.providers.length === 0 ? (
-            <p className="text-xs text-text-muted">No providers configured</p>
-          ) : (
-            <ul className="space-y-1">
-              {health.providers.map((p) => (
-                <li key={p.id} className="flex items-center justify-between text-xs">
-                  <span className="text-text-secondary">{p.name}</span>
-                  <span
-                    className={cn(
-                      'rounded-full px-1.5 py-0.5',
-                      p.available ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400',
-                    )}
-                  >
-                    {p.available ? `${p.modelCount} models` : 'unavailable'}
-                  </span>
-                </li>
-              ))}
-            </ul>
-          )}
-        </HealthCard>
-      </div>
-    </div>
-  );
-}
-
-// ── Helper Components ─────────────────────────────────────────────────────────
-
-function StatusBadge({ status }: { status: 'ok' | 'degraded' | 'error' }): React.ReactElement {
-  const map = {
-    ok: 'bg-green-500/20 text-green-400',
-    degraded: 'bg-yellow-500/20 text-yellow-400',
-    error: 'bg-red-500/20 text-red-400',
-  };
-  return (
-    <span className={cn('rounded-full px-2 py-0.5 text-xs font-medium capitalize', map[status])}>
-      {status}
-    </span>
-  );
-}
-
-interface HealthCardProps {
-  title: string;
-  status: 'ok' | 'error';
-  children?: React.ReactNode;
-}
-
-function HealthCard({ title, status, children }: HealthCardProps): React.ReactElement {
-  return (
-    <div className="rounded-lg border border-surface-border bg-surface-card p-4">
-      <div className="mb-2 flex items-center justify-between">
-        <h3 className="text-sm font-medium text-text-primary">{title}</h3>
-        <span
-          className={cn('h-2 w-2 rounded-full', status === 'ok' ? 'bg-green-400' : 'bg-red-400')}
-        />
-      </div>
-      {children}
-    </div>
-  );
-}
diff --git a/apps/web/src/app/(dashboard)/chat/page.tsx b/apps/web/src/app/(dashboard)/chat/page.tsx
deleted file mode 100644
index 8a0760b3..00000000
--- a/apps/web/src/app/(dashboard)/chat/page.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-'use client';
-
-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 {
-  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 [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.
-  const activeIdRef = useRef<string | null>(null);
-  activeIdRef.current = activeId;
-
-  // Accumulate streamed text in a ref so agent:end can read the full content
-  // without stale-closure issues.
-  const streamingTextRef = useRef('');
-
-  useEffect(() => {
-    const savedState = window.localStorage.getItem('mosaic-sidebar-open');
-    if (savedState !== null) {
-      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
-  useEffect(() => {
-    if (!activeId) {
-      setMessages([]);
-      return;
-    }
-    // Clear streaming state when switching conversations
-    setIsStreaming(false);
-    setStreamingText('');
-    streamingTextRef.current = '';
-    api<Message[]>(`/api/conversations/${activeId}/messages`)
-      .then(setMessages)
-      .catch(() => {});
-  }, [activeId]);
-
-  // Auto-scroll to bottom
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages, streamingText]);
-
-  // Socket.io setup — connect once for the page lifetime
-  useEffect(() => {
-    const socket = getSocket();
-
-    function onAgentStart(data: { conversationId: string }): void {
-      // Only update state if the event belongs to the currently viewed conversation
-      if (activeIdRef.current !== data.conversationId) return;
-      setIsStreaming(true);
-      setStreamingText('');
-      streamingTextRef.current = '';
-    }
-
-    function onAgentText(data: { conversationId: string; text: string }): void {
-      if (activeIdRef.current !== data.conversationId) return;
-      streamingTextRef.current += data.text;
-      setStreamingText((prev) => prev + data.text);
-    }
-
-    function onAgentEnd(data: { conversationId: string }): void {
-      if (activeIdRef.current !== data.conversationId) return;
-      const finalText = streamingTextRef.current;
-      setIsStreaming(false);
-      setStreamingText('');
-      streamingTextRef.current = '';
-      // Append the completed assistant message to the local message list.
-      // The Pi agent session is in-memory so the assistant response is not
-      // persisted to the DB — we build the local UI state instead.
-      if (finalText) {
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: `assistant-${Date.now()}`,
-            conversationId: data.conversationId,
-            role: 'assistant' as const,
-            content: finalText,
-            createdAt: new Date().toISOString(),
-          },
-        ]);
-        sidebarRef.current?.refresh();
-      }
-    }
-
-    function onError(data: { error: string; conversationId?: string }): void {
-      setIsStreaming(false);
-      setStreamingText('');
-      streamingTextRef.current = '';
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: `error-${Date.now()}`,
-          conversationId: data.conversationId ?? '',
-          role: 'system' as const,
-          content: `Error: ${data.error}`,
-          createdAt: new Date().toISOString(),
-        },
-      ]);
-    }
-
-    socket.on('agent:start', onAgentStart);
-    socket.on('agent:text', onAgentText);
-    socket.on('agent:end', onAgentEnd);
-    socket.on('error', onError);
-
-    // Connect if not already connected
-    if (!socket.connected) {
-      socket.connect();
-    }
-
-    return () => {
-      socket.off('agent:start', onAgentStart);
-      socket.off('agent:text', onAgentText);
-      socket.off('agent:end', onAgentEnd);
-      socket.off('error', onError);
-      // Fully tear down the socket when the chat page unmounts so we get a
-      // fresh authenticated connection next time the page is visited.
-      destroySocket();
-    };
-  }, []);
-
-  const handleNewConversation = useCallback(async (projectId?: string | null) => {
-    const conv = await api<Conversation>('/api/conversations', {
-      method: 'POST',
-      body: { title: 'New conversation', projectId: projectId ?? null },
-    });
-
-    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 handleSend = useCallback(
-    async (content: string, options?: { modelId?: string }) => {
-      let convId = activeId;
-
-      // Auto-create conversation if none selected
-      if (!convId) {
-        const autoTitle = content.slice(0, 60);
-        const conv = await api<Conversation>('/api/conversations', {
-          method: 'POST',
-          body: { title: autoTitle },
-        });
-        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 if (messages.length === 0) {
-        // Auto-title the initial placeholder conversation from the first user message.
-        const autoTitle = content.slice(0, 60);
-        api<Conversation>(`/api/conversations/${convId}`, {
-          method: 'PATCH',
-          body: { title: autoTitle },
-        })
-          .then(() => sidebarRef.current?.refresh())
-          .catch(() => {});
-      }
-
-      // Optimistic user message in local UI state
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: `user-${Date.now()}`,
-          conversationId: convId,
-          role: 'user' as const,
-          content,
-          createdAt: new Date().toISOString(),
-        },
-      ]);
-
-      // Persist the user message to the DB so conversation history is
-      // available when the page is reloaded or a new session starts.
-      api<Message>(`/api/conversations/${convId}/messages`, {
-        method: 'POST',
-        body: { role: 'user', content },
-      }).catch(() => {
-        // Non-fatal: the agent can still process the message even if
-        // REST persistence fails.
-      });
-
-      // Send to WebSocket — gateway creates/resumes the agent session and
-      // streams the response back via agent:start / agent:text / agent:end.
-      const socket = getSocket();
-      if (!socket.connected) {
-        socket.connect();
-      }
-      socket.emit('message', {
-        conversationId: convId,
-        content,
-        modelId: (options?.modelId ?? selectedModelId) || undefined,
-      });
-    },
-    [activeId, messages, selectedModelId],
-  );
-
-  return (
-    <div
-      className="-m-6 flex h-[calc(100vh-3.5rem)] overflow-hidden"
-      style={{ background: 'var(--bg-deep, var(--color-surface-bg, #0a0f1a))' }}
-    >
-      <ConversationSidebar
-        ref={sidebarRef}
-        isOpen={isSidebarOpen}
-        onClose={() => setIsSidebarOpen(false)}
-        currentConversationId={activeId}
-        onSelectConversation={(conversationId) => {
-          setActiveId(conversationId);
-          setMessages([]);
-          if (conversationId && window.innerWidth < 768) {
-            setIsSidebarOpen(false);
-          }
-        }}
-        onNewConversation={(projectId) => {
-          void handleNewConversation(projectId);
-        }}
-      />
-
-      <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">
-              {messages.map((msg) => (
-                <MessageBubble key={msg.id} message={msg} />
-              ))}
-              {isStreaming && <StreamingMessage text={streamingText} />}
-              <div ref={messagesEndRef} />
-            </div>
-            <ChatInput
-              onSend={handleSend}
-              isStreaming={isStreaming}
-              models={models}
-              selectedModelId={selectedModelId}
-              onModelChange={setSelectedModelId}
-            />
-          </>
-        ) : (
-          <div className="flex flex-1 items-center justify-center px-6">
-            <div
-              className="max-w-md rounded-2xl border px-8 py-10 text-center"
-              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={() => {
-                  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>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/app/(dashboard)/layout.tsx b/apps/web/src/app/(dashboard)/layout.tsx
deleted file mode 100644
index 9edd3627..00000000
--- a/apps/web/src/app/(dashboard)/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ReactNode } from 'react';
-import { AppShell } from '@/components/layout/app-shell';
-import { AuthGuard } from '@/components/auth-guard';
-
-export default function DashboardLayout({ children }: { children: ReactNode }): React.ReactElement {
-  return (
-    <AuthGuard>
-      <AppShell>{children}</AppShell>
-    </AuthGuard>
-  );
-}
diff --git a/apps/web/src/app/(dashboard)/projects/[id]/page.tsx b/apps/web/src/app/(dashboard)/projects/[id]/page.tsx
deleted file mode 100644
index 7db4bb96..00000000
--- a/apps/web/src/app/(dashboard)/projects/[id]/page.tsx
+++ /dev/null
@@ -1,338 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { api } from '@/lib/api';
-import { cn } from '@/lib/cn';
-import type { Mission, Project, Task, TaskStatus } from '@/lib/types';
-import { MissionTimeline } from '@/components/projects/mission-timeline';
-import { PrdViewer } from '@/components/projects/prd-viewer';
-import { TaskDetailModal } from '@/components/tasks/task-detail-modal';
-import { TaskListView } from '@/components/tasks/task-list-view';
-import { TaskStatusSummary } from '@/components/tasks/task-status-summary';
-
-type Tab = 'overview' | 'tasks' | 'missions' | 'prd';
-
-const statusColors: Record<string, string> = {
-  active: 'bg-success/20 text-success',
-  paused: 'bg-warning/20 text-warning',
-  completed: 'bg-blue-600/20 text-blue-400',
-  archived: 'bg-gray-600/20 text-gray-400',
-};
-
-interface TabButtonProps {
-  id: Tab;
-  label: string;
-  activeTab: Tab;
-  onClick: (tab: Tab) => void;
-}
-
-function TabButton({ id, label, activeTab, onClick }: TabButtonProps): React.ReactElement {
-  return (
-    <button
-      type="button"
-      onClick={() => onClick(id)}
-      className={cn(
-        'border-b-2 px-4 py-2 text-sm transition-colors',
-        activeTab === id
-          ? 'border-text-primary text-text-primary'
-          : 'border-transparent text-text-muted hover:text-text-secondary',
-      )}
-    >
-      {label}
-    </button>
-  );
-}
-
-export default function ProjectDetailPage(): React.ReactElement {
-  const params = useParams();
-  const router = useRouter();
-  const id = typeof params['id'] === 'string' ? params['id'] : '';
-
-  const [project, setProject] = useState<Project | null>(null);
-  const [missions, setMissions] = useState<Mission[]>([]);
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const [activeTab, setActiveTab] = useState<Tab>('overview');
-  const [taskFilter, setTaskFilter] = useState<TaskStatus | 'all'>('all');
-  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
-
-  useEffect(() => {
-    if (!id) return;
-
-    setLoading(true);
-    setError(null);
-
-    Promise.all([
-      api<Project>(`/api/projects/${id}`),
-      api<Mission[]>('/api/missions').catch(() => [] as Mission[]),
-      api<Task[]>(`/api/tasks?projectId=${id}`).catch(() => [] as Task[]),
-    ])
-      .then(([proj, allMissions, tks]) => {
-        setProject(proj);
-        setMissions(allMissions.filter((m) => m.projectId === id));
-        setTasks(tks);
-      })
-      .catch((err: Error) => {
-        setError(err.message ?? 'Failed to load project');
-      })
-      .finally(() => setLoading(false));
-  }, [id]);
-
-  const handleTaskClick = useCallback((task: Task) => {
-    setSelectedTask(task);
-  }, []);
-
-  const handleCloseTaskModal = useCallback(() => {
-    setSelectedTask(null);
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="py-16 text-center">
-        <p className="text-sm text-text-muted">Loading project...</p>
-      </div>
-    );
-  }
-
-  if (error || !project) {
-    return (
-      <div className="py-16 text-center">
-        <p className="text-sm text-error">{error ?? 'Project not found'}</p>
-        <button
-          type="button"
-          onClick={() => router.push('/projects')}
-          className="mt-4 text-sm text-text-muted underline hover:text-text-secondary"
-        >
-          Back to projects
-        </button>
-      </div>
-    );
-  }
-
-  const filteredTasks = taskFilter === 'all' ? tasks : tasks.filter((t) => t.status === taskFilter);
-
-  const prdContent = getPrdContent(project);
-  const hasPrd = Boolean(prdContent);
-
-  const tabs: { id: Tab; label: string }[] = [
-    { id: 'overview', label: 'Overview' },
-    { id: 'tasks', label: `Tasks (${tasks.length})` },
-    { id: 'missions', label: `Missions (${missions.length})` },
-    ...(hasPrd ? [{ id: 'prd' as Tab, label: 'PRD' }] : []),
-  ];
-
-  return (
-    <div>
-      {/* Breadcrumb */}
-      <nav className="mb-4 flex items-center gap-2 text-sm text-text-muted">
-        <button
-          type="button"
-          onClick={() => router.push('/projects')}
-          className="hover:text-text-secondary"
-        >
-          Projects
-        </button>
-        <span>/</span>
-        <span className="text-text-primary">{project.name}</span>
-      </nav>
-
-      {/* Project header */}
-      <div className="mb-6 flex items-start justify-between gap-4">
-        <div>
-          <div className="flex items-center gap-3">
-            <h1 className="text-2xl font-semibold text-text-primary">{project.name}</h1>
-            <span
-              className={cn(
-                'rounded-full px-2 py-0.5 text-xs',
-                statusColors[project.status] ?? 'bg-gray-600/20 text-gray-400',
-              )}
-            >
-              {project.status}
-            </span>
-          </div>
-          {project.description && (
-            <p className="mt-1 text-sm text-text-muted">{project.description}</p>
-          )}
-          <p className="mt-2 text-xs text-text-muted">
-            Created {new Date(project.createdAt).toLocaleDateString()} · Updated{' '}
-            {new Date(project.updatedAt).toLocaleDateString()}
-          </p>
-        </div>
-      </div>
-
-      {/* Stats bar */}
-      <div className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
-        <StatCard label="Tasks" value={String(tasks.length)} />
-        <StatCard
-          label="Done"
-          value={String(tasks.filter((t) => t.status === 'done').length)}
-          valueClass="text-success"
-        />
-        <StatCard
-          label="In Progress"
-          value={String(tasks.filter((t) => t.status === 'in-progress').length)}
-          valueClass="text-blue-400"
-        />
-        <StatCard
-          label="Blocked"
-          value={String(tasks.filter((t) => t.status === 'blocked').length)}
-          valueClass={tasks.some((t) => t.status === 'blocked') ? 'text-error' : undefined}
-        />
-      </div>
-
-      {/* Tabs */}
-      <div className="mb-6 flex gap-0 border-b border-surface-border">
-        {tabs.map((tab) => (
-          <TabButton
-            key={tab.id}
-            id={tab.id}
-            label={tab.label}
-            activeTab={activeTab}
-            onClick={setActiveTab}
-          />
-        ))}
-      </div>
-
-      {/* Tab content */}
-      {activeTab === 'overview' && (
-        <OverviewTab project={project} missions={missions} tasks={tasks} />
-      )}
-
-      {activeTab === 'tasks' && (
-        <div>
-          <div className="mb-4">
-            <TaskStatusSummary
-              tasks={tasks}
-              activeFilter={taskFilter}
-              onFilterChange={setTaskFilter}
-            />
-          </div>
-          <TaskListView tasks={filteredTasks} onTaskClick={handleTaskClick} />
-        </div>
-      )}
-
-      {activeTab === 'missions' && <MissionTimeline missions={missions} />}
-
-      {activeTab === 'prd' && prdContent && (
-        <div className="rounded-lg border border-surface-border bg-surface-card p-6">
-          <PrdViewer content={prdContent} />
-        </div>
-      )}
-
-      {/* Task detail modal */}
-      {selectedTask && <TaskDetailModal task={selectedTask} onClose={handleCloseTaskModal} />}
-    </div>
-  );
-}
-
-interface OverviewTabProps {
-  project: Project;
-  missions: Mission[];
-  tasks: Task[];
-}
-
-function OverviewTab({ project, missions, tasks }: OverviewTabProps): React.ReactElement {
-  const recentTasks = [...tasks]
-    .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
-    .slice(0, 5);
-
-  return (
-    <div className="grid gap-6 lg:grid-cols-2">
-      {/* Recent tasks */}
-      <section>
-        <h2 className="mb-3 text-sm font-semibold text-text-secondary">Recent Tasks</h2>
-        {recentTasks.length === 0 ? (
-          <div className="rounded-lg border border-surface-border bg-surface-card p-4 text-center">
-            <p className="text-sm text-text-muted">No tasks yet</p>
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {recentTasks.map((task) => (
-              <TaskSummaryRow key={task.id} task={task} />
-            ))}
-          </div>
-        )}
-      </section>
-
-      {/* Mission summary */}
-      <section>
-        <h2 className="mb-3 text-sm font-semibold text-text-secondary">Missions</h2>
-        {missions.length === 0 ? (
-          <div className="rounded-lg border border-surface-border bg-surface-card p-4 text-center">
-            <p className="text-sm text-text-muted">No missions yet</p>
-          </div>
-        ) : (
-          <MissionTimeline missions={missions.slice(0, 4)} />
-        )}
-      </section>
-
-      {/* Metadata */}
-      {project.metadata && Object.keys(project.metadata).length > 0 && (
-        <section className="lg:col-span-2">
-          <h2 className="mb-3 text-sm font-semibold text-text-secondary">Project Metadata</h2>
-          <div className="rounded-lg border border-surface-border bg-surface-card p-4">
-            <pre className="overflow-x-auto text-xs text-text-muted">
-              {JSON.stringify(project.metadata, null, 2)}
-            </pre>
-          </div>
-        </section>
-      )}
-    </div>
-  );
-}
-
-const taskStatusColors: Record<string, string> = {
-  'not-started': 'bg-gray-600/20 text-gray-300',
-  'in-progress': 'bg-blue-600/20 text-blue-400',
-  blocked: 'bg-error/20 text-error',
-  done: 'bg-success/20 text-success',
-  cancelled: 'bg-gray-600/20 text-gray-500',
-};
-
-function TaskSummaryRow({ task }: { task: Task }): React.ReactElement {
-  return (
-    <div className="flex items-center justify-between gap-2 rounded-lg border border-surface-border bg-surface-card px-3 py-2">
-      <span className="truncate text-sm text-text-primary">{task.title}</span>
-      <span
-        className={cn(
-          'shrink-0 rounded-full px-2 py-0.5 text-xs',
-          taskStatusColors[task.status] ?? 'bg-gray-600/20 text-gray-400',
-        )}
-      >
-        {task.status}
-      </span>
-    </div>
-  );
-}
-
-function StatCard({
-  label,
-  value,
-  valueClass,
-}: {
-  label: string;
-  value: string;
-  valueClass?: string;
-}): React.ReactElement {
-  return (
-    <div className="rounded-lg border border-surface-border bg-surface-card p-3">
-      <p className="text-xs text-text-muted">{label}</p>
-      <p className={cn('mt-1 text-lg font-semibold', valueClass ?? 'text-text-primary')}>{value}</p>
-    </div>
-  );
-}
-
-function getPrdContent(project: Project): string | null {
-  if (!project.metadata) return null;
-
-  const prd = project.metadata['prd'];
-  if (typeof prd === 'string' && prd.trim().length > 0) return prd;
-
-  const prdContent = project.metadata['prdContent'];
-  if (typeof prdContent === 'string' && prdContent.trim().length > 0) return prdContent;
-
-  return null;
-}
diff --git a/apps/web/src/app/(dashboard)/projects/page.tsx b/apps/web/src/app/(dashboard)/projects/page.tsx
deleted file mode 100644
index bd0d662d..00000000
--- a/apps/web/src/app/(dashboard)/projects/page.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { api } from '@/lib/api';
-import type { Project } from '@/lib/types';
-import { ProjectCard } from '@/components/projects/project-card';
-
-export default function ProjectsPage(): React.ReactElement {
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [loading, setLoading] = useState(true);
-  const router = useRouter();
-
-  useEffect(() => {
-    api<Project[]>('/api/projects')
-      .then(setProjects)
-      .catch(() => {})
-      .finally(() => setLoading(false));
-  }, []);
-
-  const handleProjectClick = useCallback(
-    (project: Project) => {
-      router.push(`/projects/${project.id}`);
-    },
-    [router],
-  );
-
-  return (
-    <div>
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-semibold">Projects</h1>
-      </div>
-
-      {loading ? (
-        <p className="py-8 text-center text-sm text-text-muted">Loading projects...</p>
-      ) : projects.length === 0 ? (
-        <div className="py-12 text-center">
-          <h2 className="text-lg font-medium text-text-secondary">No projects yet</h2>
-          <p className="mt-1 text-sm text-text-muted">
-            Projects will appear here when created via the gateway API
-          </p>
-        </div>
-      ) : (
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {projects.map((project) => (
-            <ProjectCard key={project.id} project={project} onClick={handleProjectClick} />
-          ))}
-        </div>
-      )}
-
-      {/* Mission status section */}
-      <MissionStatus />
-    </div>
-  );
-}
-
-function MissionStatus(): React.ReactElement {
-  const [mission, setMission] = useState<Record<string, unknown> | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    api<Record<string, unknown>>('/api/coord/status')
-      .then(setMission)
-      .catch(() => setMission(null))
-      .finally(() => setLoading(false));
-  }, []);
-
-  return (
-    <section className="mt-8">
-      <h2 className="mb-4 text-lg font-semibold">Active Mission</h2>
-      {loading ? (
-        <p className="text-sm text-text-muted">Loading mission status...</p>
-      ) : !mission ? (
-        <div className="rounded-lg border border-surface-border bg-surface-card p-6 text-center">
-          <p className="text-sm text-text-muted">No active mission detected</p>
-        </div>
-      ) : (
-        <div className="rounded-lg border border-surface-border bg-surface-card p-4">
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-            <StatCard label="Mission" value={String(mission['missionId'] ?? 'Unknown')} />
-            <StatCard label="Phase" value={String(mission['currentPhase'] ?? '—')} />
-            <StatCard
-              label="Tasks"
-              value={`${mission['completedTasks'] ?? 0} / ${mission['totalTasks'] ?? 0}`}
-            />
-            <StatCard label="Status" value={String(mission['status'] ?? '—')} />
-          </div>
-        </div>
-      )}
-    </section>
-  );
-}
-
-function StatCard({ label, value }: { label: string; value: string }): React.ReactElement {
-  return (
-    <div className="rounded-lg bg-surface-elevated p-3">
-      <p className="text-xs text-text-muted">{label}</p>
-      <p className="mt-1 text-sm font-medium text-text-primary">{value}</p>
-    </div>
-  );
-}
diff --git a/apps/web/src/app/(dashboard)/settings/page.tsx b/apps/web/src/app/(dashboard)/settings/page.tsx
deleted file mode 100644
index da134278..00000000
--- a/apps/web/src/app/(dashboard)/settings/page.tsx
+++ /dev/null
@@ -1,828 +0,0 @@
-'use client';
-
-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 ────────────────────────────────────────────────────────────────────
-
-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[];
-}
-
-interface TestConnectionResult {
-  providerId: string;
-  reachable: boolean;
-  latencyMs?: number;
-  error?: string;
-  discoveredModels?: string[];
-}
-
-type TestState = 'idle' | 'testing' | 'success' | 'error';
-
-interface ProviderTestStatus {
-  state: TestState;
-  result?: TestConnectionResult;
-}
-
-interface Preference {
-  key: string;
-  value: unknown;
-  category: string;
-}
-
-type Theme = 'light' | 'dark' | 'system';
-type SaveState = 'idle' | 'saving' | 'saved' | 'error';
-type Tab = 'profile' | 'appearance' | 'notifications' | 'providers';
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-function prefValue<T>(prefs: Preference[], key: string, fallback: T): T {
-  const p = prefs.find((x) => x.key === key);
-  if (p === undefined) return fallback;
-  return p.value as T;
-}
-
-// ─── Main Page ────────────────────────────────────────────────────────────────
-
-export default function SettingsPage(): React.ReactElement {
-  const { data: session } = useSession();
-  const [activeTab, setActiveTab] = useState<Tab>('profile');
-
-  const tabs: { id: Tab; label: string }[] = [
-    { id: 'profile', label: 'Profile' },
-    { id: 'appearance', label: 'Appearance' },
-    { id: 'notifications', label: 'Notifications' },
-    { id: 'providers', label: 'Providers' },
-  ];
-
-  return (
-    <div className="mx-auto max-w-3xl space-y-6">
-      <h1 className="text-2xl font-semibold">Settings</h1>
-
-      {/* Tab bar */}
-      <div className="flex gap-1 border-b border-surface-border">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            type="button"
-            onClick={() => setActiveTab(tab.id)}
-            className={`px-4 py-2 text-sm font-medium transition-colors ${
-              activeTab === tab.id
-                ? 'border-b-2 border-accent text-accent'
-                : 'text-text-secondary hover:text-text-primary'
-            }`}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
-      {activeTab === 'profile' && <ProfileTab session={session} />}
-      {activeTab === 'appearance' && <AppearanceTab />}
-      {activeTab === 'notifications' && <NotificationsTab />}
-      {activeTab === 'providers' && <ProvidersTab />}
-    </div>
-  );
-}
-
-// ─── Profile Tab ──────────────────────────────────────────────────────────────
-
-function ProfileTab({
-  session,
-}: {
-  session: { user: { id: string; name: string; email: string; image?: string | null } } | null;
-}): React.ReactElement {
-  const [name, setName] = useState(session?.user.name ?? '');
-  const [image, setImage] = useState(session?.user.image ?? '');
-  const [saveState, setSaveState] = useState<SaveState>('idle');
-  const [errorMsg, setErrorMsg] = useState('');
-
-  // Sync from session when it loads
-  useEffect(() => {
-    if (session?.user) {
-      setName(session.user.name ?? '');
-      setImage(session.user.image ?? '');
-    }
-  }, [session]);
-
-  const handleSave = async (): Promise<void> => {
-    setSaveState('saving');
-    setErrorMsg('');
-    try {
-      const result = await authClient.updateUser({ name, image: image || null });
-      if (result.error) {
-        setErrorMsg(result.error.message ?? 'Failed to update profile');
-        setSaveState('error');
-        return;
-      }
-      setSaveState('saved');
-      setTimeout(() => setSaveState('idle'), 2000);
-    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Failed to update profile';
-      setErrorMsg(message);
-      setSaveState('error');
-    }
-  };
-
-  return (
-    <section className="space-y-4">
-      <h2 className="text-lg font-medium text-text-secondary">Profile</h2>
-      <div className="rounded-lg border border-surface-border bg-surface-card p-6 space-y-4">
-        <FormField label="Display Name" id="profile-name">
-          <input
-            id="profile-name"
-            type="text"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            placeholder="Your name"
-            className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
-          />
-        </FormField>
-
-        <FormField label="Email" id="profile-email">
-          <input
-            id="profile-email"
-            type="email"
-            value={session?.user.email ?? ''}
-            disabled
-            className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-muted opacity-60 cursor-not-allowed"
-          />
-          <p className="mt-1 text-xs text-text-muted">Email cannot be changed here.</p>
-        </FormField>
-
-        <FormField label="Avatar URL" id="profile-image">
-          <input
-            id="profile-image"
-            type="url"
-            value={image}
-            onChange={(e) => setImage(e.target.value)}
-            placeholder="https://example.com/avatar.png"
-            className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
-          />
-        </FormField>
-
-        <div className="flex items-center gap-3 pt-2">
-          <SaveButton state={saveState} onClick={handleSave} />
-          {saveState === 'error' && errorMsg && <p className="text-sm text-error">{errorMsg}</p>}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ─── Appearance Tab ───────────────────────────────────────────────────────────
-
-function AppearanceTab(): React.ReactElement {
-  const [loading, setLoading] = useState(true);
-  const [theme, setTheme] = useState<Theme>('system');
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  const [defaultModel, setDefaultModel] = useState('');
-  const [saveState, setSaveState] = useState<SaveState>('idle');
-  const [errorMsg, setErrorMsg] = useState('');
-
-  useEffect(() => {
-    api<Preference[]>('/api/memory/preferences?category=appearance')
-      .catch(() => [] as Preference[])
-      .then((p) => {
-        setTheme(prefValue<Theme>(p, 'ui.theme', 'system'));
-        setSidebarCollapsed(prefValue<boolean>(p, 'ui.sidebar_collapsed', false));
-        setDefaultModel(prefValue<string>(p, 'ui.default_model', ''));
-      })
-      .finally(() => setLoading(false));
-  }, []);
-
-  const handleSave = async (): Promise<void> => {
-    setSaveState('saving');
-    setErrorMsg('');
-    try {
-      await Promise.all([
-        api('/api/memory/preferences', {
-          method: 'POST',
-          body: { key: 'ui.theme', value: theme, category: 'appearance', source: 'user' },
-        }),
-        api('/api/memory/preferences', {
-          method: 'POST',
-          body: {
-            key: 'ui.sidebar_collapsed',
-            value: sidebarCollapsed,
-            category: 'appearance',
-            source: 'user',
-          },
-        }),
-        ...(defaultModel
-          ? [
-              api('/api/memory/preferences', {
-                method: 'POST',
-                body: {
-                  key: 'ui.default_model',
-                  value: defaultModel,
-                  category: 'appearance',
-                  source: 'user',
-                },
-              }),
-            ]
-          : []),
-      ]);
-      setSaveState('saved');
-      setTimeout(() => setSaveState('idle'), 2000);
-    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Failed to save preferences';
-      setErrorMsg(message);
-      setSaveState('error');
-    }
-  };
-
-  if (loading) {
-    return (
-      <section>
-        <h2 className="mb-4 text-lg font-medium text-text-secondary">Appearance</h2>
-        <p className="text-sm text-text-muted">Loading preferences...</p>
-      </section>
-    );
-  }
-
-  return (
-    <section className="space-y-4">
-      <h2 className="text-lg font-medium text-text-secondary">Appearance</h2>
-      <div className="rounded-lg border border-surface-border bg-surface-card p-6 space-y-6">
-        {/* Theme */}
-        <div>
-          <label className="block text-sm font-medium text-text-primary mb-2">Theme</label>
-          <div className="flex gap-3">
-            {(['system', 'light', 'dark'] as Theme[]).map((t) => (
-              <button
-                key={t}
-                type="button"
-                onClick={() => setTheme(t)}
-                className={`rounded-lg border px-4 py-2 text-sm capitalize transition-colors ${
-                  theme === t
-                    ? 'border-accent bg-accent/10 text-accent'
-                    : 'border-surface-border bg-surface-elevated text-text-secondary hover:border-accent/50'
-                }`}
-              >
-                {t}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Sidebar collapsed default */}
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-sm font-medium text-text-primary">Collapse sidebar by default</p>
-            <p className="text-xs text-text-muted">Start with sidebar collapsed on page load</p>
-          </div>
-          <Toggle checked={sidebarCollapsed} onChange={setSidebarCollapsed} />
-        </div>
-
-        {/* Default model */}
-        <FormField label="Default Model" id="default-model">
-          <input
-            id="default-model"
-            type="text"
-            value={defaultModel}
-            onChange={(e) => setDefaultModel(e.target.value)}
-            placeholder="e.g. ollama/llama3.2"
-            className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
-          />
-          <p className="mt-1 text-xs text-text-muted">
-            Model ID to pre-select for new conversations.
-          </p>
-        </FormField>
-
-        <div className="flex items-center gap-3 pt-2">
-          <SaveButton state={saveState} onClick={handleSave} />
-          {saveState === 'error' && errorMsg && <p className="text-sm text-error">{errorMsg}</p>}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ─── Notifications Tab ────────────────────────────────────────────────────────
-
-function NotificationsTab(): React.ReactElement {
-  const [loading, setLoading] = useState(true);
-  const [emailAgentComplete, setEmailAgentComplete] = useState(false);
-  const [emailMentions, setEmailMentions] = useState(true);
-  const [emailDigest, setEmailDigest] = useState(false);
-  const [saveState, setSaveState] = useState<SaveState>('idle');
-  const [errorMsg, setErrorMsg] = useState('');
-
-  useEffect(() => {
-    api<Preference[]>('/api/memory/preferences?category=communication')
-      .catch(() => [] as Preference[])
-      .then((p) => {
-        setEmailAgentComplete(prefValue<boolean>(p, 'notify.email_agent_complete', false));
-        setEmailMentions(prefValue<boolean>(p, 'notify.email_mentions', true));
-        setEmailDigest(prefValue<boolean>(p, 'notify.email_digest', false));
-      })
-      .finally(() => setLoading(false));
-  }, []);
-
-  const handleSave = async (): Promise<void> => {
-    setSaveState('saving');
-    setErrorMsg('');
-    try {
-      await Promise.all([
-        api('/api/memory/preferences', {
-          method: 'POST',
-          body: {
-            key: 'notify.email_agent_complete',
-            value: emailAgentComplete,
-            category: 'communication',
-            source: 'user',
-          },
-        }),
-        api('/api/memory/preferences', {
-          method: 'POST',
-          body: {
-            key: 'notify.email_mentions',
-            value: emailMentions,
-            category: 'communication',
-            source: 'user',
-          },
-        }),
-        api('/api/memory/preferences', {
-          method: 'POST',
-          body: {
-            key: 'notify.email_digest',
-            value: emailDigest,
-            category: 'communication',
-            source: 'user',
-          },
-        }),
-      ]);
-      setSaveState('saved');
-      setTimeout(() => setSaveState('idle'), 2000);
-    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Failed to save preferences';
-      setErrorMsg(message);
-      setSaveState('error');
-    }
-  };
-
-  if (loading) {
-    return (
-      <section>
-        <h2 className="mb-4 text-lg font-medium text-text-secondary">Notifications</h2>
-        <p className="text-sm text-text-muted">Loading preferences...</p>
-      </section>
-    );
-  }
-
-  return (
-    <section className="space-y-4">
-      <h2 className="text-lg font-medium text-text-secondary">Notifications</h2>
-      <div className="rounded-lg border border-surface-border bg-surface-card p-6 space-y-6">
-        <p className="text-xs text-text-muted">Configure when you receive email notifications.</p>
-
-        <NotifyRow
-          label="Agent task completed"
-          description="Email when an agent finishes a task"
-          checked={emailAgentComplete}
-          onChange={setEmailAgentComplete}
-        />
-        <NotifyRow
-          label="Mentions"
-          description="Email when you are mentioned in a conversation"
-          checked={emailMentions}
-          onChange={setEmailMentions}
-        />
-        <NotifyRow
-          label="Weekly digest"
-          description="Weekly summary of activity"
-          checked={emailDigest}
-          onChange={setEmailDigest}
-        />
-
-        <div className="flex items-center gap-3 pt-2">
-          <SaveButton state={saveState} onClick={handleSave} />
-          {saveState === 'error' && errorMsg && <p className="text-sm text-error">{errorMsg}</p>}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ─── Providers Tab ────────────────────────────────────────────────────────────
-
-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(() => {
-    api<ProviderInfo[]>('/api/providers')
-      .catch(() => [] as ProviderInfo[])
-      .then((p) => setProviders(p))
-      .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,
-      [providerId]: { state: 'testing' },
-    }));
-    try {
-      const result = await api<TestConnectionResult>('/api/providers/test', {
-        method: 'POST',
-        body: { providerId },
-      });
-      setTestStatuses((prev) => ({
-        ...prev,
-        [providerId]: { state: result.reachable ? 'success' : 'error', result },
-      }));
-    } catch {
-      setTestStatuses((prev) => ({
-        ...prev,
-        [providerId]: {
-          state: 'error',
-          result: { providerId, reachable: false, error: 'Request failed' },
-        },
-      }));
-    }
-  }, []);
-
-  const defaultModel: ModelInfo | undefined = providers
-    .flatMap((p) => p.models)
-    .find((m) => providers.find((p) => p.id === m.provider)?.available);
-
-  return (
-    <section className="space-y-6">
-      <div className="space-y-4">
-        <h2 className="text-lg font-medium text-text-secondary">SSO Providers</h2>
-        <SsoProviderSection providers={ssoProviders} loading={ssoLoading} />
-      </div>
-
-      <div className="space-y-4">
-        <h2 className="text-lg font-medium text-text-secondary">LLM Providers</h2>
-        {loading ? (
-          <p className="text-sm text-text-muted">Loading providers...</p>
-        ) : providers.length === 0 ? (
-          <div className="rounded-lg border border-surface-border bg-surface-card p-4">
-            <p className="text-sm text-text-muted">
-              No providers configured. Set{' '}
-              <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
-                OLLAMA_BASE_URL
-              </code>{' '}
-              or{' '}
-              <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
-                MOSAIC_CUSTOM_PROVIDERS
-              </code>{' '}
-              to add providers.
-            </p>
-          </div>
-        ) : (
-          <div className="space-y-4">
-            {providers.map((provider) => (
-              <ProviderCard
-                key={provider.id}
-                provider={provider}
-                defaultModel={defaultModel}
-                testStatus={testStatuses[provider.id] ?? { state: 'idle' }}
-                onTest={() => void testConnection(provider.id)}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}
-
-// ─── Shared UI Components ─────────────────────────────────────────────────────
-
-function FormField({
-  label,
-  id,
-  children,
-}: {
-  label: string;
-  id: string;
-  children: React.ReactNode;
-}): React.ReactElement {
-  return (
-    <div>
-      <label htmlFor={id} className="block text-sm font-medium text-text-primary">
-        {label}
-      </label>
-      {children}
-    </div>
-  );
-}
-
-function Toggle({
-  checked,
-  onChange,
-}: {
-  checked: boolean;
-  onChange: (v: boolean) => void;
-}): React.ReactElement {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      onClick={() => onChange(!checked)}
-      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-surface-card ${
-        checked ? 'bg-accent' : 'bg-surface-border'
-      }`}
-    >
-      <span
-        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-          checked ? 'translate-x-6' : 'translate-x-1'
-        }`}
-      />
-    </button>
-  );
-}
-
-function NotifyRow({
-  label,
-  description,
-  checked,
-  onChange,
-}: {
-  label: string;
-  description: string;
-  checked: boolean;
-  onChange: (v: boolean) => void;
-}): React.ReactElement {
-  return (
-    <div className="flex items-center justify-between">
-      <div>
-        <p className="text-sm font-medium text-text-primary">{label}</p>
-        <p className="text-xs text-text-muted">{description}</p>
-      </div>
-      <Toggle checked={checked} onChange={onChange} />
-    </div>
-  );
-}
-
-function SaveButton({
-  state,
-  onClick,
-}: {
-  state: SaveState;
-  onClick: () => void;
-}): React.ReactElement {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={state === 'saving'}
-      className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent/90 disabled:cursor-not-allowed disabled:opacity-50"
-    >
-      {state === 'saving' ? 'Saving...' : state === 'saved' ? 'Saved!' : 'Save changes'}
-    </button>
-  );
-}
-
-// ─── Provider Card (from original page) ──────────────────────────────────────
-
-interface ProviderCardProps {
-  provider: ProviderInfo;
-  defaultModel: ModelInfo | undefined;
-  testStatus: ProviderTestStatus;
-  onTest: () => void;
-}
-
-function ProviderCard({
-  provider,
-  defaultModel,
-  testStatus,
-  onTest,
-}: ProviderCardProps): React.ReactElement {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <div className="rounded-lg border border-surface-border bg-surface-card">
-      {/* Header row */}
-      <div className="flex items-center justify-between px-4 py-3">
-        <div className="flex items-center gap-3">
-          <ProviderAvatar id={provider.id} />
-          <div>
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-medium text-text-primary">{provider.name}</span>
-              <ProviderStatusBadge available={provider.available} />
-            </div>
-            <p className="text-xs text-text-muted">
-              {provider.models.length} model{provider.models.length !== 1 ? 's' : ''}
-            </p>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2">
-          <TestConnectionButton status={testStatus} onTest={onTest} />
-          <button
-            type="button"
-            onClick={() => setExpanded((v) => !v)}
-            className="rounded px-2 py-1 text-xs text-text-muted transition-colors hover:bg-surface-elevated hover:text-text-primary"
-            aria-expanded={expanded}
-            aria-label={expanded ? 'Collapse models' : 'Expand models'}
-          >
-            {expanded ? '▲ Hide' : '▼ Models'}
-          </button>
-        </div>
-      </div>
-
-      {/* Test result banner */}
-      {testStatus.state !== 'idle' && testStatus.state !== 'testing' && testStatus.result && (
-        <TestResultBanner result={testStatus.result} />
-      )}
-
-      {/* Model list */}
-      {expanded && (
-        <div className="border-t border-surface-border">
-          <table className="w-full">
-            <thead>
-              <tr className="bg-surface-elevated text-left text-xs text-text-muted">
-                <th className="px-4 py-2 font-medium">Model</th>
-                <th className="hidden px-4 py-2 font-medium md:table-cell">Capabilities</th>
-                <th className="hidden px-4 py-2 font-medium md:table-cell">Context</th>
-                <th className="hidden px-4 py-2 font-medium md:table-cell">Cost (in/out)</th>
-                <th className="px-4 py-2 font-medium">Default</th>
-              </tr>
-            </thead>
-            <tbody>
-              {provider.models.map((model) => (
-                <ModelRow
-                  key={model.id}
-                  model={model}
-                  isDefault={
-                    defaultModel?.id === model.id && defaultModel?.provider === model.provider
-                  }
-                />
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface ModelRowProps {
-  model: ModelInfo;
-  isDefault: boolean;
-}
-
-function ModelRow({ model, isDefault }: ModelRowProps): React.ReactElement {
-  return (
-    <tr className="border-t border-surface-border">
-      <td className="px-4 py-2">
-        <span className="text-sm text-text-primary">{model.name}</span>
-      </td>
-      <td className="hidden px-4 py-2 md:table-cell">
-        <div className="flex flex-wrap gap-1">
-          <CapabilityBadge label="chat" />
-          {model.reasoning && <CapabilityBadge label="reasoning" color="purple" />}
-          {model.inputTypes.includes('image') && <CapabilityBadge label="vision" color="blue" />}
-        </div>
-      </td>
-      <td className="hidden px-4 py-2 text-xs text-text-muted md:table-cell">
-        {formatContext(model.contextWindow)}
-      </td>
-      <td className="hidden px-4 py-2 text-xs text-text-muted md:table-cell">
-        {model.cost.input === 0 && model.cost.output === 0
-          ? 'free'
-          : `$${model.cost.input} / $${model.cost.output}`}
-      </td>
-      <td className="px-4 py-2 text-center">
-        {isDefault && (
-          <span
-            className="inline-block rounded-full bg-accent/20 px-2 py-0.5 text-xs font-medium text-accent"
-            title="Default model used for new sessions"
-          >
-            default
-          </span>
-        )}
-      </td>
-    </tr>
-  );
-}
-
-function ProviderAvatar({ id }: { id: string }): React.ReactElement {
-  const letter = id.charAt(0).toUpperCase();
-  return (
-    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-surface-elevated text-sm font-semibold text-text-secondary">
-      {letter}
-    </div>
-  );
-}
-
-function ProviderStatusBadge({ available }: { available: boolean }): React.ReactElement {
-  return (
-    <span
-      className={`rounded-full px-2 py-0.5 text-xs font-medium ${
-        available ? 'bg-success/20 text-success' : 'bg-surface-elevated text-text-muted'
-      }`}
-    >
-      {available ? 'Active' : 'Inactive'}
-    </span>
-  );
-}
-
-interface TestConnectionButtonProps {
-  status: ProviderTestStatus;
-  onTest: () => void;
-}
-
-function TestConnectionButton({ status, onTest }: TestConnectionButtonProps): React.ReactElement {
-  const isTesting = status.state === 'testing';
-  return (
-    <button
-      type="button"
-      onClick={onTest}
-      disabled={isTesting}
-      className="rounded px-2 py-1 text-xs transition-colors hover:bg-surface-elevated disabled:cursor-not-allowed disabled:opacity-50"
-      title="Test connection"
-    >
-      {isTesting ? (
-        <span className="text-text-muted">Testing…</span>
-      ) : status.state === 'success' ? (
-        <span className="text-success">✓ Reachable</span>
-      ) : status.state === 'error' ? (
-        <span className="text-error">✗ Unreachable</span>
-      ) : (
-        <span className="text-text-muted">Test</span>
-      )}
-    </button>
-  );
-}
-
-function TestResultBanner({ result }: { result: TestConnectionResult }): React.ReactElement {
-  return (
-    <div
-      className={`px-4 py-2 text-xs ${
-        result.reachable ? 'bg-success/10 text-success' : 'bg-error/10 text-error'
-      }`}
-    >
-      {result.reachable ? (
-        <>
-          Connected
-          {result.latencyMs !== undefined && (
-            <span className="ml-1 opacity-70">({result.latencyMs}ms)</span>
-          )}
-          {result.discoveredModels && result.discoveredModels.length > 0 && (
-            <span className="ml-2 opacity-70">
-              — {result.discoveredModels.length} model
-              {result.discoveredModels.length !== 1 ? 's' : ''} discovered
-            </span>
-          )}
-        </>
-      ) : (
-        <>Connection failed{result.error ? `: ${result.error}` : ''}</>
-      )}
-    </div>
-  );
-}
-
-function CapabilityBadge({
-  label,
-  color = 'default',
-}: {
-  label: string;
-  color?: 'default' | 'purple' | 'blue';
-}): React.ReactElement {
-  const colorClass =
-    color === 'purple'
-      ? 'bg-purple-500/20 text-purple-400'
-      : color === 'blue'
-        ? 'bg-blue-500/20 text-blue-400'
-        : 'bg-surface-elevated text-text-muted';
-  return <span className={`rounded px-1.5 py-0.5 text-xs ${colorClass}`}>{label}</span>;
-}
-
-function formatContext(tokens: number): string {
-  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`;
-  if (tokens >= 1_000) return `${Math.round(tokens / 1_000)}k`;
-  return String(tokens);
-}
diff --git a/apps/web/src/app/(dashboard)/tasks/page.tsx b/apps/web/src/app/(dashboard)/tasks/page.tsx
deleted file mode 100644
index 36ee9d4b..00000000
--- a/apps/web/src/app/(dashboard)/tasks/page.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useState } from 'react';
-import { api } from '@/lib/api';
-import { cn } from '@/lib/cn';
-import type { Task } from '@/lib/types';
-import { KanbanBoard } from '@/components/tasks/kanban-board';
-import { TaskListView } from '@/components/tasks/task-list-view';
-
-type ViewMode = 'list' | 'kanban';
-
-export default function TasksPage(): React.ReactElement {
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [view, setView] = useState<ViewMode>('kanban');
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    api<Task[]>('/api/tasks')
-      .then(setTasks)
-      .catch(() => {})
-      .finally(() => setLoading(false));
-  }, []);
-
-  const handleTaskClick = useCallback((task: Task) => {
-    // Task detail view will be added in future iteration
-    console.log('Task clicked:', task.id);
-  }, []);
-
-  return (
-    <div>
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-semibold">Tasks</h1>
-        <div className="flex items-center gap-2">
-          <div className="flex rounded-lg border border-surface-border">
-            <button
-              type="button"
-              onClick={() => setView('list')}
-              className={cn(
-                'px-3 py-1.5 text-xs transition-colors',
-                view === 'list'
-                  ? 'bg-surface-elevated text-text-primary'
-                  : 'text-text-muted hover:text-text-secondary',
-              )}
-            >
-              List
-            </button>
-            <button
-              type="button"
-              onClick={() => setView('kanban')}
-              className={cn(
-                'px-3 py-1.5 text-xs transition-colors',
-                view === 'kanban'
-                  ? 'bg-surface-elevated text-text-primary'
-                  : 'text-text-muted hover:text-text-secondary',
-              )}
-            >
-              Kanban
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {loading ? (
-        <p className="py-8 text-center text-sm text-text-muted">Loading tasks...</p>
-      ) : view === 'kanban' ? (
-        <KanbanBoard tasks={tasks} onTaskClick={handleTaskClick} />
-      ) : (
-        <TaskListView tasks={tasks} onTaskClick={handleTaskClick} />
-      )}
-    </div>
-  );
-}
diff --git a/apps/web/src/app/auth/provider/[provider]/page.tsx b/apps/web/src/app/auth/provider/[provider]/page.tsx
deleted file mode 100644
index d2771843..00000000
--- a/apps/web/src/app/auth/provider/[provider]/page.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { useParams, useSearchParams } from 'next/navigation';
-import { api } from '@/lib/api';
-import { resolveAuthCallbackURL } from '@/lib/auth-redirect';
-import { signIn } from '@/lib/auth-client';
-import type { SsoProviderDiscovery } from '@/lib/sso';
-
-export default function AuthProviderRedirectPage(): React.ReactElement {
-  const params = useParams<{ provider: string }>();
-  const searchParams = useSearchParams();
-  const providerId = typeof params.provider === 'string' ? params.provider : '';
-  const requestedCallbackURL = searchParams.get('callbackURL');
-  const [providerName, setProviderName] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function redirectToProvider(): Promise<void> {
-      try {
-        const callbackURL = resolveAuthCallbackURL(requestedCallbackURL, window.location.origin);
-        const providers = await api<SsoProviderDiscovery[]>('/api/sso/providers');
-        if (cancelled) return;
-
-        const provider = providers.find((candidate) => candidate.id === providerId);
-        if (!provider) {
-          setError('Unknown SSO provider.');
-          return;
-        }
-
-        setProviderName(provider.name);
-        if (!provider.configured) {
-          setError(`${provider.name} is not enabled in this deployment.`);
-          return;
-        }
-        if (provider.loginMode !== 'oidc') {
-          setError(`${provider.name} is not available for OIDC sign in.`);
-          return;
-        }
-
-        const result = await signIn.oauth2({
-          providerId: provider.id,
-          callbackURL,
-        });
-
-        if (!cancelled && result?.error) {
-          setError(result.error.message ?? `${provider.name} sign in failed.`);
-        }
-      } catch (caught: unknown) {
-        if (!cancelled) {
-          setError(caught instanceof Error ? caught.message : 'Unable to start single sign-on.');
-        }
-      }
-    }
-
-    void redirectToProvider();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [providerId, requestedCallbackURL]);
-
-  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">
-        {providerName
-          ? `Redirecting you to ${providerName}...`
-          : 'Preparing your sign-in request...'}
-      </p>
-
-      {error ? (
-        <div
-          role="alert"
-          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>
-  );
-}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
deleted file mode 100644
index 6b176e9a..00000000
--- a/apps/web/src/app/layout.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { Metadata } from 'next';
-import type { ReactNode } from 'react';
-import { ThemeProvider } from '@/providers/theme-provider';
-import './globals.css';
-
-export const metadata: 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" suppressHydrationWarning>
-      <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>
-  );
-}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
deleted file mode 100644
index 919618ae..00000000
--- a/apps/web/src/app/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { redirect } from 'next/navigation';
-
-export default function HomePage(): never {
-  redirect('/chat');
-}
diff --git a/apps/web/src/components/admin-role-guard.tsx b/apps/web/src/components/admin-role-guard.tsx
deleted file mode 100644
index bd147972..00000000
--- a/apps/web/src/components/admin-role-guard.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-import { useSession } from '@/lib/auth-client';
-
-interface AdminRoleGuardProps {
-  children: React.ReactNode;
-}
-
-export function AdminRoleGuard({ children }: AdminRoleGuardProps): React.ReactElement | null {
-  const { data: session, isPending } = useSession();
-  const router = useRouter();
-
-  const user = session?.user as
-    | (NonNullable<typeof session>['user'] & { role?: string })
-    | undefined;
-
-  useEffect(() => {
-    if (!isPending && !session) {
-      router.replace('/login');
-    } else if (!isPending && session && user?.role !== 'admin') {
-      router.replace('/');
-    }
-  }, [isPending, session, user?.role, router]);
-
-  if (isPending) {
-    return (
-      <div className="flex min-h-screen items-center justify-center">
-        <div className="text-sm text-text-muted">Loading...</div>
-      </div>
-    );
-  }
-
-  if (!session || user?.role !== 'admin') {
-    return null;
-  }
-
-  return <>{children}</>;
-}
diff --git a/apps/web/src/components/auth-guard.tsx b/apps/web/src/components/auth-guard.tsx
deleted file mode 100644
index 3de8aeff..00000000
--- a/apps/web/src/components/auth-guard.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-import { useSession } from '@/lib/auth-client';
-
-interface AuthGuardProps {
-  children: React.ReactNode;
-}
-
-export function AuthGuard({ children }: AuthGuardProps): React.ReactElement | null {
-  const { data: session, isPending } = useSession();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!isPending && !session) {
-      router.replace('/login');
-    }
-  }, [isPending, session, router]);
-
-  if (isPending) {
-    return (
-      <div className="flex min-h-screen items-center justify-center">
-        <div className="text-sm text-text-muted">Loading...</div>
-      </div>
-    );
-  }
-
-  if (!session) {
-    return null;
-  }
-
-  return <>{children}</>;
-}
diff --git a/apps/web/src/components/chat/chat-input.tsx b/apps/web/src/components/chat/chat-input.tsx
index 4223fa4f..c8eaa3d9 100644
--- a/apps/web/src/components/chat/chat-input.tsx
+++ b/apps/web/src/components/chat/chat-input.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { ModelInfo } from '@/lib/types';
 
diff --git a/apps/web/src/components/chat/conversation-list.tsx b/apps/web/src/components/chat/conversation-list.tsx
index 15143ef0..40997063 100644
--- a/apps/web/src/components/chat/conversation-list.tsx
+++ b/apps/web/src/components/chat/conversation-list.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useCallback, useRef, useState } from 'react';
 import { cn } from '@/lib/cn';
 import type { Conversation } from '@/lib/types';
diff --git a/apps/web/src/components/chat/conversation-sidebar.tsx b/apps/web/src/components/chat/conversation-sidebar.tsx
index 8572461f..adb594df 100644
--- a/apps/web/src/components/chat/conversation-sidebar.tsx
+++ b/apps/web/src/components/chat/conversation-sidebar.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import {
   forwardRef,
   useCallback,
diff --git a/apps/web/src/components/chat/message-bubble.tsx b/apps/web/src/components/chat/message-bubble.tsx
index 8fea264d..981a6129 100644
--- a/apps/web/src/components/chat/message-bubble.tsx
+++ b/apps/web/src/components/chat/message-bubble.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useCallback, useMemo, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { cn } from '@/lib/cn';
diff --git a/apps/web/src/components/chat/streaming-message.tsx b/apps/web/src/components/chat/streaming-message.tsx
index c2ff9267..bf526c40 100644
--- a/apps/web/src/components/chat/streaming-message.tsx
+++ b/apps/web/src/components/chat/streaming-message.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useMemo, useState } from 'react';
 
 interface StreamingMessageProps {
diff --git a/apps/web/src/components/freshness/freshness-notices.tsx b/apps/web/src/components/freshness/freshness-notices.tsx
index eac24868..50d6e7e8 100644
--- a/apps/web/src/components/freshness/freshness-notices.tsx
+++ b/apps/web/src/components/freshness/freshness-notices.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import type { ReactElement } from 'react';
 import { formatAge, type FreshnessLabel } from '@/lib/freshness/model';
 
diff --git a/apps/web/src/components/guest-guard.tsx b/apps/web/src/components/guest-guard.tsx
deleted file mode 100644
index d71e2100..00000000
--- a/apps/web/src/components/guest-guard.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-import { useSession } from '@/lib/auth-client';
-
-interface GuestGuardProps {
-  children: React.ReactNode;
-}
-
-/** Redirects authenticated users away from auth pages. */
-export function GuestGuard({ children }: GuestGuardProps): React.ReactElement | null {
-  const { data: session, isPending } = useSession();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!isPending && session) {
-      router.replace('/chat');
-    }
-  }, [isPending, session, router]);
-
-  if (isPending) {
-    return (
-      <div className="flex min-h-screen items-center justify-center">
-        <div className="text-sm text-text-muted">Loading...</div>
-      </div>
-    );
-  }
-
-  if (session) {
-    return null;
-  }
-
-  return <>{children}</>;
-}
diff --git a/apps/web/src/components/layout/app-header.tsx b/apps/web/src/components/layout/app-header.tsx
deleted file mode 100644
index fbe2dac9..00000000
--- a/apps/web/src/components/layout/app-header.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-'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');
-  }
-}
diff --git a/apps/web/src/components/layout/app-shell.tsx b/apps/web/src/components/layout/app-shell.tsx
index 16fea611..75d230c6 100644
--- a/apps/web/src/components/layout/app-shell.tsx
+++ b/apps/web/src/components/layout/app-shell.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import type { ReactNode } from 'react';
 import { SidebarProvider, useSidebar } from './sidebar-context';
 import { Sidebar } from './sidebar';
diff --git a/apps/web/src/components/layout/sidebar-context.tsx b/apps/web/src/components/layout/sidebar-context.tsx
index 449db843..76d47657 100644
--- a/apps/web/src/components/layout/sidebar-context.tsx
+++ b/apps/web/src/components/layout/sidebar-context.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
 
 interface SidebarContextValue {
diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx
index 445aa63f..2ad6efa5 100644
--- a/apps/web/src/components/layout/sidebar.tsx
+++ b/apps/web/src/components/layout/sidebar.tsx
@@ -1,7 +1,4 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { Link, useLocation } from 'react-router-dom';
 import { cn } from '@/lib/cn';
 import { MosaicLogo } from '@/components/ui/mosaic-logo';
 import { useSidebar } from './sidebar-context';
@@ -99,7 +96,7 @@ const navItems: NavItem[] = [
 ];
 
 export function Sidebar(): React.ReactElement {
-  const pathname = usePathname();
+  const { pathname } = useLocation();
   const { mobileOpen, setMobileOpen } = useSidebar();
 
   return (
@@ -137,7 +134,7 @@ export function Sidebar(): React.ReactElement {
               return (
                 <Link
                   key={item.href}
-                  href={item.href}
+                  to={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',
diff --git a/apps/web/src/components/layout/theme-toggle.tsx b/apps/web/src/components/layout/theme-toggle.tsx
index fb18dc82..48ab295c 100644
--- a/apps/web/src/components/layout/theme-toggle.tsx
+++ b/apps/web/src/components/layout/theme-toggle.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useTheme } from '@/providers/theme-provider';
 
 interface ThemeToggleProps {
diff --git a/apps/web/src/components/layout/topbar.tsx b/apps/web/src/components/layout/topbar.tsx
index 6ff38594..8577848c 100644
--- a/apps/web/src/components/layout/topbar.tsx
+++ b/apps/web/src/components/layout/topbar.tsx
@@ -1,6 +1,4 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { signOut, useSession } from '@/lib/auth-client';
 import { ThemeToggle } from './theme-toggle';
 import { useSidebar } from './sidebar-context';
@@ -22,12 +20,12 @@ function MenuIcon(): React.JSX.Element {
 
 export function Topbar(): React.ReactElement {
   const { data: session } = useSession();
-  const router = useRouter();
+  const navigate = useNavigate();
   const { isMobile, mobileOpen, setMobileOpen, toggleCollapsed } = useSidebar();
 
   async function handleSignOut(): Promise<void> {
     await signOut();
-    router.replace('/login');
+    navigate('/login', { replace: true });
   }
 
   function handleSidebarToggle(): void {
diff --git a/apps/web/src/components/projects/mission-timeline.tsx b/apps/web/src/components/projects/mission-timeline.tsx
index e844fdb7..f717e3f7 100644
--- a/apps/web/src/components/projects/mission-timeline.tsx
+++ b/apps/web/src/components/projects/mission-timeline.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { cn } from '@/lib/cn';
 import type { Mission, MissionStatus } from '@/lib/types';
 
diff --git a/apps/web/src/components/projects/prd-viewer.tsx b/apps/web/src/components/projects/prd-viewer.tsx
index 46c49bf7..929e5398 100644
--- a/apps/web/src/components/projects/prd-viewer.tsx
+++ b/apps/web/src/components/projects/prd-viewer.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 interface PrdViewerProps {
   content: string;
 }
diff --git a/apps/web/src/components/projects/project-card.tsx b/apps/web/src/components/projects/project-card.tsx
index 8e740a24..c2fb5533 100644
--- a/apps/web/src/components/projects/project-card.tsx
+++ b/apps/web/src/components/projects/project-card.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { cn } from '@/lib/cn';
 import type { Project } from '@/lib/types';
 
diff --git a/apps/web/src/components/tasks/kanban-board.tsx b/apps/web/src/components/tasks/kanban-board.tsx
index 56ec8f82..73235098 100644
--- a/apps/web/src/components/tasks/kanban-board.tsx
+++ b/apps/web/src/components/tasks/kanban-board.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import type { Task, TaskStatus } from '@/lib/types';
 import { TaskCard } from './task-card';
 
diff --git a/apps/web/src/components/tasks/task-card.tsx b/apps/web/src/components/tasks/task-card.tsx
index 2b711d44..bd5d7ef3 100644
--- a/apps/web/src/components/tasks/task-card.tsx
+++ b/apps/web/src/components/tasks/task-card.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { cn } from '@/lib/cn';
 import type { Task } from '@/lib/types';
 
diff --git a/apps/web/src/components/tasks/task-detail-modal.tsx b/apps/web/src/components/tasks/task-detail-modal.tsx
index 52fa661d..ce3dcc19 100644
--- a/apps/web/src/components/tasks/task-detail-modal.tsx
+++ b/apps/web/src/components/tasks/task-detail-modal.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useRef } from 'react';
 import type { ReactNode } from 'react';
 import { cn } from '@/lib/cn';
diff --git a/apps/web/src/components/tasks/task-list-view.tsx b/apps/web/src/components/tasks/task-list-view.tsx
index d29d72eb..ab3af7e4 100644
--- a/apps/web/src/components/tasks/task-list-view.tsx
+++ b/apps/web/src/components/tasks/task-list-view.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { cn } from '@/lib/cn';
 import type { Task } from '@/lib/types';
 
diff --git a/apps/web/src/components/tasks/task-status-summary.tsx b/apps/web/src/components/tasks/task-status-summary.tsx
index 92621732..d6f8a321 100644
--- a/apps/web/src/components/tasks/task-status-summary.tsx
+++ b/apps/web/src/components/tasks/task-status-summary.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { cn } from '@/lib/cn';
 import type { Task, TaskStatus } from '@/lib/types';
 
diff --git a/apps/web/src/components/ui/mosaic-logo.tsx b/apps/web/src/components/ui/mosaic-logo.tsx
index 341d9162..4a7b8d6e 100644
--- a/apps/web/src/components/ui/mosaic-logo.tsx
+++ b/apps/web/src/components/ui/mosaic-logo.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import type { CSSProperties } from 'react';
 
 export interface MosaicLogoProps {
diff --git a/apps/web/src/app/globals.css b/apps/web/src/globals.css
similarity index 100%
rename from apps/web/src/app/globals.css
rename to apps/web/src/globals.css
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 8fdcf7b3..cd0e09ea 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { ThemeProvider } from '@/providers/theme-provider';
 import { createAppRouter } from '@/routes';
-import '@/app/globals.css';
+import '@/globals.css';
 
 const container = document.getElementById('root');
 if (!container) {
diff --git a/apps/web/src/providers/theme-provider.tsx b/apps/web/src/providers/theme-provider.tsx
index 3b2b5019..3a60b951 100644
--- a/apps/web/src/providers/theme-provider.tsx
+++ b/apps/web/src/providers/theme-provider.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
 
 export type Theme = 'dark' | 'light';
diff --git a/apps/web/src/routes.tsx b/apps/web/src/routes.tsx
index 699d0466..9657ef60 100644
--- a/apps/web/src/routes.tsx
+++ b/apps/web/src/routes.tsx
@@ -16,6 +16,15 @@ import { TasksPage } from '@/spa/pages/tasks';
 import { SettingsPage } from '@/spa/pages/settings';
 import { AdminPage } from '@/spa/pages/admin';
 import { AdminGuard, AuthGuard, GuestGuard } from '@/spa/guards';
+import { AppShell } from '@/components/layout/app-shell';
+
+function DashboardLayout(): ReactElement {
+  return (
+    <AppShell>
+      <Outlet />
+    </AppShell>
+  );
+}
 
 function GuestLayout(): ReactElement {
   return (
@@ -44,23 +53,28 @@ export const routes: RouteObject[] = [
   {
     element: <AuthGuard />,
     children: [
-      { path: '/', element: <Navigate to="/chat" replace /> },
-      { path: '/chat', element: <ChatPage />, errorElement: <ChatRouteErrorBoundary /> },
       {
-        path: '/projects',
-        element: <ProjectsPage />,
-        errorElement: <ProjectsRouteErrorBoundary />,
-      },
-      {
-        path: '/projects/:id',
-        element: <ProjectDetailPage />,
-        errorElement: <ProjectDetailRouteErrorBoundary />,
-      },
-      { path: '/tasks', element: <TasksPage />, errorElement: <TasksRouteErrorBoundary /> },
-      { path: '/settings', element: <SettingsPage /> },
-      {
-        element: <AdminGuard />,
-        children: [{ path: '/admin', element: <AdminPage /> }],
+        element: <DashboardLayout />,
+        children: [
+          { path: '/', element: <Navigate to="/chat" replace /> },
+          { path: '/chat', element: <ChatPage />, errorElement: <ChatRouteErrorBoundary /> },
+          {
+            path: '/projects',
+            element: <ProjectsPage />,
+            errorElement: <ProjectsRouteErrorBoundary />,
+          },
+          {
+            path: '/projects/:id',
+            element: <ProjectDetailPage />,
+            errorElement: <ProjectDetailRouteErrorBoundary />,
+          },
+          { path: '/tasks', element: <TasksPage />, errorElement: <TasksRouteErrorBoundary /> },
+          { path: '/settings', element: <SettingsPage /> },
+          {
+            element: <AdminGuard />,
+            children: [{ path: '/admin', element: <AdminPage /> }],
+          },
+        ],
       },
     ],
   },
diff --git a/apps/web/src/spa/pages/chat-error-boundary.spec.tsx b/apps/web/src/spa/pages/chat-error-boundary.spec.tsx
index 1b627491..2d276565 100644
--- a/apps/web/src/spa/pages/chat-error-boundary.spec.tsx
+++ b/apps/web/src/spa/pages/chat-error-boundary.spec.tsx
@@ -11,6 +11,7 @@ vi.mock('@/lib/auth-client', () => ({
   useSession: useSessionMock,
 }));
 
+import { ThemeProvider } from '@/providers/theme-provider';
 import { routes } from '@/routes';
 
 beforeAll(() => {
@@ -73,7 +74,11 @@ describe('ChatRouteErrorBoundary', () => {
     const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
     try {
       await act(async () => {
-        root?.render(<RouterProvider router={router} />);
+        root?.render(
+          <ThemeProvider>
+            <RouterProvider router={router} />
+          </ThemeProvider>,
+        );
       });
 
       expect(consoleErrorSpy).toHaveBeenCalled();
diff --git a/apps/web/src/spa/pages/resource-route-boundaries.spec.tsx b/apps/web/src/spa/pages/resource-route-boundaries.spec.tsx
index 912a2b6f..1502c4f5 100644
--- a/apps/web/src/spa/pages/resource-route-boundaries.spec.tsx
+++ b/apps/web/src/spa/pages/resource-route-boundaries.spec.tsx
@@ -11,6 +11,7 @@ vi.mock('@/lib/auth-client', () => ({
   useSession: useSessionMock,
 }));
 
+import { ThemeProvider } from '@/providers/theme-provider';
 import { routes } from '@/routes';
 
 function Boom(): never {
@@ -71,7 +72,11 @@ describe('resource route error boundaries', () => {
       const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
       try {
         await act(async () => {
-          root?.render(<RouterProvider router={router} />);
+          root?.render(
+            <ThemeProvider>
+              <RouterProvider router={router} />
+            </ThemeProvider>,
+          );
         });
 
         expect(consoleErrorSpy).toHaveBeenCalled();
diff --git a/apps/web/src/test/setup.ts b/apps/web/src/test/setup.ts
index 751a20d7..0e62a238 100644
--- a/apps/web/src/test/setup.ts
+++ b/apps/web/src/test/setup.ts
@@ -21,3 +21,23 @@ for (const target of [globalThis, window]) {
     },
   });
 }
+
+// jsdom (v29) does not implement window.matchMedia; the sidebar layout uses it
+// for its mobile breakpoint. Minimal always-desktop stub.
+if (typeof window.matchMedia !== 'function') {
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    writable: true,
+    value: (query: string): MediaQueryList =>
+      ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: () => undefined,
+        removeEventListener: () => undefined,
+        addListener: () => undefined,
+        removeListener: () => undefined,
+        dispatchEvent: () => false,
+      }) as unknown as MediaQueryList,
+  });
+}
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 2c3de2b0..5e29e176 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,16 +1,16 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "ES2022",
     "lib": ["dom", "dom.iterable", "ES2022"],
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "jsx": "preserve",
-    "plugins": [{ "name": "next" }],
+    "jsx": "react-jsx",
+    "types": ["vite/client"],
     "paths": {
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["src", "vite.config.ts", "vitest.config.ts"],
   "exclude": ["node_modules", "e2e", "playwright.config.ts"]
 }
diff --git a/apps/web/vitest.config.ts b/apps/web/vitest.config.ts
index effe0be1..6ac05169 100644
--- a/apps/web/vitest.config.ts
+++ b/apps/web/vitest.config.ts
@@ -7,10 +7,6 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
-  // tsconfig uses "jsx": "preserve" for Next; tests need esbuild to compile it
-  esbuild: {
-    jsx: 'automatic',
-  },
   test: {
     globals: true,
     environment: 'jsdom',