.env.example

@@ -40,9 +40,12 @@ BETTER_AUTH_SECRET=change-me-to-a-random-32-char-string
 BETTER_AUTH_URL=http://localhost:14242
 
 
-# ─── Web App (Next.js) ───────────────────────────────────────────────────────
+# ─── Web App (SPA) ───────────────────────────────────────────────────────────
-# Public gateway URL — accessible from the browser, not just the server.
+# Directory holding the built SPA bundle (vite build output). When set, the
-NEXT_PUBLIC_GATEWAY_URL=http://localhost:14242
+# gateway serves the SPA same-origin; when unset (dev), run the Vite dev
+# server (pnpm --filter @mosaicstack/web dev), which proxies to the gateway.
+# safe-default: unset in dev — SPA serving is an opt-in production concern
+#WEB_DIST_DIR=apps/web/dist
 
 
 # ─── OpenTelemetry ───────────────────────────────────────────────────────────

.woodpecker/publish.yml

@@ -510,47 +510,3 @@ steps:
       # ERR_PNPM_OUTDATED_LOCKFILE despite a clean restore. This edge is the
       # serialization invariant; add it to every new workspace consumer.
       - publish-next-npm
-
-  build-web:
-    image: gcr.io/kaniko-project/executor:debug
-    when: *image_build_when
-    environment:
-      REGISTRY_USER:
-        from_secret: REGISTRY_USERNAME
-      REGISTRY_PASS:
-        from_secret: REGISTRY_PASSWORD
-      CI_COMMIT_BRANCH: ${CI_COMMIT_BRANCH}
-      CI_COMMIT_TAG: ${CI_COMMIT_TAG}
-      CI_COMMIT_SHA: ${CI_COMMIT_SHA}
-    commands:
-      - mkdir -p /kaniko/.docker
-      - echo "{\"auths\":{\"git.mosaicstack.dev\":{\"username\":\"$REGISTRY_USER\",\"password\":\"$REGISTRY_PASS\"}}}" > /kaniko/.docker/config.json
-      - |
-        DESTINATIONS="--destination git.mosaicstack.dev/mosaicstack/stack/web:sha-${CI_COMMIT_SHA:0:7}"
-        if [ "$CI_COMMIT_BRANCH" = "next" ]; then
-          if [ -n "$CI_COMMIT_TAG" ]; then
-            echo "[publish] FATAL: next web publish must be sha-only; refusing tag '$CI_COMMIT_TAG'" >&2
-            exit 1
-          fi
-          echo "[publish] next web publish is sha-only"
-        elif [ "$CI_COMMIT_BRANCH" = "main" ]; then
-          DESTINATIONS="$DESTINATIONS --destination git.mosaicstack.dev/mosaicstack/stack/web:latest"
-        elif [ -z "$CI_COMMIT_TAG" ]; then
-          echo "[publish] FATAL: web image publish may only run for main, next, or tag events" >&2
-          exit 1
-        fi
-        if [ -n "$CI_COMMIT_TAG" ]; then
-          DESTINATIONS="$DESTINATIONS --destination git.mosaicstack.dev/mosaicstack/stack/web:$CI_COMMIT_TAG"
-        fi
-        /kaniko/executor --context . --dockerfile docker/web.Dockerfile $DESTINATIONS
-    depends_on:
-      - build
-      - verify
-      # #1411: publish-next-npm mutates workspace manifests in place during
-      # its transform window and restores them at step end. Any step that
-      # reads the pipeline workspace (kaniko COPY of manifests, later
-      # installs) must run AFTER publish-next-npm, never concurrently —
-      # pipeline 2648 raced a COPY inside the window and failed
-      # ERR_PNPM_OUTDATED_LOCKFILE despite a clean restore. This edge is the
-      # serialization invariant; add it to every new workspace consumer.
-      - publish-next-npm

apps/gateway/package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@anthropic-ai/sdk": "^0.80.0",
     "@fastify/helmet": "^13.0.2",
+    "@fastify/static": "^8.3.0",
     "@mariozechner/pi-ai": "^0.65.0",
     "@mariozechner/pi-coding-agent": "^0.65.0",
     "@modelcontextprotocol/sdk": "^1.27.1",

apps/gateway/src/main.ts

@@ -12,6 +12,7 @@ import { AppModule } from './app.module.js';
 import { mountAuthHandler } from './auth/auth.controller.js';
 import { mountMcpHandler } from './mcp/mcp.controller.js';
 import { McpService } from './mcp/mcp.service.js';
+import { mountSpaStatic } from './spa/serve-spa.js';
 import { detectAndAssertTier, TierDetectionError } from '@mosaicstack/storage';
 import { resolveGatewayConfigPath } from './env.js';
 import { assertValidationPipeSeesDtoDecorators } from './validation-pipe-check.js';
@@ -68,6 +69,7 @@ async function bootstrap(): Promise<void> {
 
   mountAuthHandler(app);
   mountMcpHandler(app, app.get(McpService));
+  await mountSpaStatic(app);
 
   const port = Number(process.env['GATEWAY_PORT'] ?? 14242);
   await app.listen(port, '0.0.0.0');

apps/gateway/src/spa/serve-spa.ts

@@ -0,0 +1,75 @@
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+import { Logger } from '@nestjs/common';
+import fastifyStatic from '@fastify/static';
+import type { NestFastifyApplication } from '@nestjs/platform-fastify';
+
+/** Request paths that belong to the backend, never to the SPA fallback. */
+const BACKEND_PREFIXES = ['/api', '/mcp', '/socket.io'] as const;
+
+function isBackendPath(url: string): boolean {
+  return BACKEND_PREFIXES.some((prefix) => url === prefix || url.startsWith(`${prefix}/`));
+}
+
+/**
+ * Serve the built web SPA bundle (Phase P5 cutover, #1444).
+ *
+ * WEB_DIST_DIR unset: SPA serving is disabled — dev runs the Vite dev server,
+ * which proxies /api and /socket.io here. WEB_DIST_DIR set but not holding a
+ * built bundle: fail at boot, because a gateway configured to serve the UI
+ * silently serving 404s is an outage, not a degraded mode.
+ *
+ * Static files get exact routes (wildcard: false, so nothing shadows the API
+ * routes); every other GET/HEAD outside the backend prefixes falls back to
+ * index.html so client-side routes deep-link correctly.
+ */
+export async function mountSpaStatic(app: NestFastifyApplication): Promise<void> {
+  const logger = new Logger('SpaStatic');
+  const distDir = process.env['WEB_DIST_DIR'];
+  if (!distDir) {
+    logger.log('WEB_DIST_DIR not set; SPA serving disabled (dev mode uses the Vite dev server)');
+    return;
+  }
+
+  const root = path.resolve(distDir);
+  const indexFile = path.join(root, 'index.html');
+  if (!existsSync(indexFile)) {
+    throw new Error(`WEB_DIST_DIR is '${distDir}' but '${indexFile}' does not exist`);
+  }
+
+  // Default cache semantics: public, max-age=0 with ETag/Last-Modified, so
+  // every response revalidates (304 when unchanged). Always correct, including
+  // for index.html after a deploy; immutable caching for hashed /assets/ files
+  // is a P6 optimization.
+  await app.register(
+    fastifyStatic as never,
+    {
+      root,
+      wildcard: false,
+      index: false,
+    } as never,
+  );
+
+  // A wildcard route, not setNotFoundHandler: Nest installs its own not-found
+  // handler during init and Fastify allows only one. find-my-way matches
+  // most-specific-first, so every declared route (API, static files) wins over
+  // this catch-all; non-GET unmatched requests keep Fastify's stock 404.
+  const fastify = app.getHttpAdapter().getInstance();
+  fastify.get('/*', (req, reply) => {
+    const url = req.raw.url ?? '';
+    if (isBackendPath(url)) {
+      // An unknown backend path is an API 404, never the SPA page.
+      void reply.code(404).send({
+        message: `Route ${req.raw.method ?? 'GET'}:${url} not found`,
+        error: 'Not Found',
+        statusCode: 404,
+      });
+      return;
+    }
+    // sendFile is decorated by @fastify/static; its type augmentation targets
+    // a different fastify copy in the pnpm tree than the Nest adapter's.
+    (reply as unknown as { sendFile: (file: string) => unknown }).sendFile('index.html');
+  });
+
+  logger.log(`Serving SPA bundle from ${root}`);
+}

apps/web/next-env.d.ts

@@ -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.

apps/web/next.config.ts

@@ -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;

apps/web/package.json

@@ -3,22 +3,19 @@
   "version": "0.0.2",
   "private": true,
   "scripts": {
-    "build": "node ../../scripts/build-web.mjs",
+    "build": "vite build",
-    "build:vite": "vite build",
+    "dev": "vite",
-    "dev": "next dev -p 3101",
+    "preview": "vite preview",
-    "dev:vite": "vite",
     "lint": "eslint src",
     "typecheck": "tsc --noEmit",
     "test": "vitest run --passWithNoTests",
-    "test:e2e": "playwright test",
+    "test:e2e": "playwright test"
-    "start": "next start -p 3101"
   },
   "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",

apps/web/src/app/(auth)/layout.tsx

@@ -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>
-  );
-}

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

@@ -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="[email protected]"
-          />
-        </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>
-  );
-}

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

@@ -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="[email protected]"
-          />
-        </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>
-  );
-}

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

@@ -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>
-  );
-}

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

@@ -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>
-  );
-}

apps/web/src/app/(dashboard)/layout.tsx

@@ -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>
-  );
-}

apps/web/src/app/(dashboard)/projects/[id]/page.tsx

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

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

@@ -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>
-  );
-}

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

@@ -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);
-}

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

@@ -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>
-  );
-}

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

@@ -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>
-  );
-}

apps/web/src/app/layout.tsx

@@ -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>
-  );
-}

apps/web/src/app/page.tsx

@@ -1,5 +0,0 @@
-import { redirect } from 'next/navigation';
-
-export default function HomePage(): never {
-  redirect('/chat');
-}

apps/web/src/components/admin-role-guard.tsx

@@ -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}</>;
-}

apps/web/src/components/auth-guard.tsx

@@ -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}</>;
-}

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';
 

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';

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

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   forwardRef,
   useCallback,

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';

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

@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useMemo, useState } from 'react';
 
 interface StreamingMessageProps {

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';
 

apps/web/src/components/guest-guard.tsx

@@ -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}</>;
-}

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

@@ -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');
-  }
-}

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';

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 {

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

@@ -1,7 +1,4 @@
-'use client';
+import { Link, useLocation } from 'react-router-dom';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
 import { cn } from '@/lib/cn';
 import { MosaicLogo } from '@/components/ui/mosaic-logo';
 import { useSidebar } from './sidebar-context';
@@ -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',

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

@@ -1,5 +1,3 @@
-'use client';
-
 import { useTheme } from '@/providers/theme-provider';
 
 interface ThemeToggleProps {

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

@@ -1,6 +1,4 @@
-'use client';
+import { useNavigate } from 'react-router-dom';
-
-import { useRouter } from 'next/navigation';
 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 {

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';
 

apps/web/src/components/projects/prd-viewer.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 interface PrdViewerProps {
   content: string;
 }

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';
 

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';
 

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';
 

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';

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';
 

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';
 

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

@@ -1,5 +1,3 @@
-'use client';
-
 import type { CSSProperties } from 'react';
 
 export interface MosaicLogoProps {

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) {

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';

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 (
@@ -43,6 +52,9 @@ export const routes: RouteObject[] = [
   },
   {
     element: <AuthGuard />,
+    children: [
+      {
+        element: <DashboardLayout />,
         children: [
           { path: '/', element: <Navigate to="/chat" replace /> },
           { path: '/chat', element: <ChatPage />, errorElement: <ChatRouteErrorBoundary /> },
@@ -64,6 +76,8 @@ export const routes: RouteObject[] = [
           },
         ],
       },
+    ],
+  },
 ];
 
 export function createAppRouter(): ReturnType<typeof createBrowserRouter> {

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();

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();

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

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",
+    "jsx": "react-jsx",
-    "plugins": [{ "name": "next" }],
+    "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"]
 }

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',

docker/gateway.Dockerfile

@@ -8,14 +8,16 @@ WORKDIR /app
 # Copy workspace manifests first for layer-cached install
 COPY pnpm-workspace.yaml pnpm-lock.yaml package.json ./
 COPY apps/gateway/package.json ./apps/gateway/
+COPY apps/web/package.json ./apps/web/
 COPY packages/ ./packages/
 COPY plugins/ ./plugins/
 # the root prepare script runs scripts/install-hooks.mjs on install
 COPY scripts/ ./scripts/
 RUN pnpm install --frozen-lockfile
 COPY . .
-# Build gateway and all of its workspace dependencies via turbo dependency graph
+# Build gateway, the web SPA bundle it serves (#1444), and all of their
-RUN pnpm turbo run build --filter @mosaicstack/gateway...
+# workspace dependencies via the turbo dependency graph
+RUN pnpm turbo run build --filter @mosaicstack/gateway... --filter @mosaicstack/web...
 # Produce a self-contained deploy artifact: flat node_modules, no pnpm symlinks
 # --legacy is required for pnpm v10 when inject-workspace-packages is not set
 RUN pnpm --filter @mosaicstack/gateway --prod deploy --legacy /deploy
@@ -38,6 +40,9 @@ COPY --chown=node:node --from=builder /deploy/package.json ./package.json
 # dist is declared in package.json "files" so pnpm deploy copies it into /deploy;
 # copy from builder explicitly as belt-and-suspenders
 COPY --chown=node:node --from=builder /app/apps/gateway/dist ./dist
+# The built web SPA bundle; served by the gateway (apps/gateway/src/spa/serve-spa.ts)
+COPY --chown=node:node --from=builder /app/apps/web/dist ./web-dist
+ENV WEB_DIST_DIR=/app/web-dist
 # gateway defaults to port 14242 (apps/gateway/src/main.ts)
 EXPOSE 14242
 USER node

docker/web.Dockerfile

@@ -1,24 +0,0 @@
-FROM node:22-alpine AS base
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
-
-FROM base AS builder
-WORKDIR /app
-COPY pnpm-workspace.yaml pnpm-lock.yaml package.json ./
-COPY apps/web/package.json ./apps/web/
-COPY packages/ ./packages/
-# the root prepare script runs scripts/install-hooks.mjs on install
-COPY scripts/ ./scripts/
-RUN pnpm install --frozen-lockfile
-COPY . .
-RUN pnpm --filter @mosaicstack/web build
-
-FROM base AS runner
-WORKDIR /app
-ENV NODE_ENV=production
-COPY --from=builder /app/apps/web/.next/standalone ./
-COPY --from=builder /app/apps/web/.next/static ./apps/web/.next/static
-COPY --from=builder /app/apps/web/public ./apps/web/public
-EXPOSE 3000
-CMD ["node", "apps/web/server.js"]

package.json

@@ -7,7 +7,6 @@
     "dev": "turbo run dev",
     "lint": "turbo run lint",
     "preflight": "node scripts/preflight.mjs",
-    "clean:generated": "node scripts/clean-generated.mjs",
     "typecheck": "pnpm preflight && turbo run typecheck",
     "verify:release": "node scripts/verify-release.mjs",
     "test:checkout": "node --test scripts/*.test.mjs",

pnpm-lock.yaml

@@ -66,6 +66,9 @@ importers:
       '@fastify/helmet':
         specifier: ^13.0.2
         version: 13.0.2
+      '@fastify/static':
+        specifier: ^8.3.0
+        version: 8.3.0
       '@mariozechner/pi-ai':
         specifier: ^0.65.0
         version: 0.65.0(@modelcontextprotocol/[email protected]([email protected]))([email protected])([email protected])
@@ -122,7 +125,7 @@ importers:
         version: 11.1.16(@nestjs/[email protected]([email protected])([email protected])([email protected])([email protected]))(@nestjs/[email protected])([email protected])([email protected])
       '@nestjs/platform-fastify':
         specifier: ^11.0.0
-        version: 11.1.16(@nestjs/[email protected]([email protected])([email protected])([email protected])([email protected]))(@nestjs/[email protected])
+        version: 11.1.16(@fastify/[email protected])(@nestjs/[email protected]([email protected])([email protected])([email protected])([email protected]))(@nestjs/[email protected])
       '@nestjs/platform-socket.io':
         specifier: ^11.0.0
         version: 11.1.16(@nestjs/[email protected]([email protected])([email protected])([email protected])([email protected]))(@nestjs/[email protected])([email protected])
@@ -262,9 +265,6 @@ importers:
       clsx:
         specifier: ^2.1.0
         version: 2.1.1
-      next:
-        specifier: ^16.0.0
-        version: 16.1.6(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
       react:
         specifier: ^19.0.0
         version: 19.2.4
@@ -789,10 +789,10 @@ importers:
     dependencies:
       '@mariozechner/pi-agent-core':
         specifier: ^0.63.1
-        version: 0.63.2(@modelcontextprotocol/[email protected]([email protected]))([email protected])(zod@3.25.76)
+        version: 0.63.2(@modelcontextprotocol/[email protected]([email protected]))([email protected])(zod@4.3.6)
       '@mariozechner/pi-ai':
         specifier: ^0.63.1
-        version: 0.63.2(@modelcontextprotocol/[email protected]([email protected]))([email protected])(zod@3.25.76)
+        version: 0.63.2(@modelcontextprotocol/[email protected]([email protected]))([email protected])(zod@4.3.6)
       '@sinclair/typebox':
         specifier: ^0.34.41
         version: 0.34.48
@@ -1862,6 +1862,9 @@ packages:
       '@noble/hashes':
         optional: true
 
+  '@fastify/[email protected]':
+    resolution: {integrity: sha512-F3EVbzWt+xcnVaOHmWyIlpuFtbxOln7HDZQsh09MtMmMm/CipMayNt8hnIL8VQi54u2ZociDbf+iluGYkf7B1A==}
+
   '@fastify/[email protected]':
     resolution: {integrity: sha512-KoWKW+MhvfTRWL4qrhUwAAZoaChluo0m0vbiJlGMt2GXvL4LVPQEjt8kSpHI3IBq5Rez8fg+XeH3cneztq+C7A==}
 
@@ -1889,6 +1892,12 @@ packages:
   '@fastify/[email protected]':
     resolution: {integrity: sha512-INS+6gh91cLUjB+PVHfu1UqcB76Sqtpyp7bnL+FYojhjygvOPA9ctiD/JDKsyD9Xgu4hUhCSJBPig/w7duNajw==}
 
+  '@fastify/[email protected]':
+    resolution: {integrity: sha512-BYo+EiaKwlxH+WetGk6hAs1d39iP0y1gqB8lGF/qwkJ9ZZ/cBY1vx5NvExb9Sc3yRMFjD5X4Eyh4e4+TzRkzdw==}
+
+  '@fastify/[email protected]':
+    resolution: {integrity: sha512-yKxviR5PH1OKNnisIzZKmgZSus0r2OZb8qCSbqmw34aolT4g3UlzYfeBRym+HJ1J471CR8e2ldNub4PubD1coA==}
+
   '@google/[email protected]':
     resolution: {integrity: sha512-+sNRWhKiRibVgc4OKi7aBJJ0A7RcoVD8tGG+eFkqxAWRjASDW+ktS9lLwTDnAxZICzCVoeAdu8dYLJVTX60N9w==}
     engines: {node: '>=20.0.0'}
@@ -2080,6 +2089,10 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@isaacs/[email protected]':
+    resolution: {integrity: sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==}
+    engines: {node: '>=18'}
+
   '@isaacs/[email protected]':
     resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
     engines: {node: '>=18.0.0'}
@@ -2115,6 +2128,10 @@ packages:
     resolution: {integrity: sha512-Z7C/xXCiGWsg0KuKsHTKJxbWhpI3Vs5GwLfOean7MGyVFGqdRgBbAjOCh6u4bbjPc/8MJ2pZmK/0DLdCbivLDA==}
     engines: {node: '>=8'}
 
+  '@lukeed/[email protected]':
+    resolution: {integrity: sha512-9I2Zn6+NJLfaGoz9jN3lpwDgAYvfGeNYdbAIjJOqzs4Tpc+VU3Jqq4IofSUBKajiDS8k9fZIg18/z13mpk1bsA==}
+    engines: {node: '>=8'}
+
   '@lydell/[email protected]':
     resolution: {integrity: sha512-owcv+e1/OSu3bf9ZBdUQqJsQF888KyuSIiPYFNn0fLhgkhm9F3Pvha76Kj5mCPnodf7hh3suDe7upw7GPRXftQ==}
     cpu: [arm64]
@@ -4601,6 +4618,10 @@ packages:
     resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
+  [email protected]:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+
   [email protected]:
     resolution: {integrity: sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==}
     engines: {node: '>=18'}
@@ -5320,6 +5341,12 @@ packages:
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting [email protected]
     hasBin: true
 
+  [email protected]:
+    resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
+    engines: {node: 20 || >=22}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting [email protected]
+    hasBin: true
+
   [email protected]:
     resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
     engines: {node: 18 || 20 || >=22}
@@ -5615,6 +5642,10 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
+  [email protected]:
+    resolution: {integrity: sha512-ykkVRwrYvFm1nb2AJfKKYPr0emF6IiXDYUaFx4Zn9ZuIH7MrzEZ3sD5RlqGXNRpHtvUHJyOnCEFxOlNDtGo7wg==}
+    engines: {node: 20 || >=22}
+
   [email protected]:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
@@ -6113,6 +6144,11 @@ packages:
     engines: {node: '>=4.0.0'}
     hasBin: true
 
+  [email protected]:
+    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+
   [email protected]:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -7777,12 +7813,6 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
 
-  '@anthropic-ai/[email protected]([email protected])':
-    dependencies:
-      json-schema-to-ts: 3.1.1
-    optionalDependencies:
-      zod: 3.25.76
-
   '@anthropic-ai/[email protected]([email protected])':
     dependencies:
       json-schema-to-ts: 3.1.1
@@ -8786,6 +8816,8 @@ snapshots:
     optionalDependencies:
       '@noble/hashes': 2.0.1
 
+  '@fastify/[email protected]': {}
+
   '@fastify/[email protected]':
     dependencies:
       ajv: 8.18.0
@@ -8824,6 +8856,23 @@ snapshots:
       '@fastify/forwarded': 3.0.1
       ipaddr.js: 2.3.0
 
+  '@fastify/[email protected]':
+    dependencies:
+      '@lukeed/ms': 2.0.2
+      escape-html: 1.0.3
+      fast-decode-uri-component: 1.0.1
+      http-errors: 2.0.1
+      mime: 3.0.0
+
+  '@fastify/[email protected]':
+    dependencies:
+      '@fastify/accept-negotiator': 2.1.0
+      '@fastify/send': 4.1.1
+      content-disposition: 0.5.4
+      fastify-plugin: 5.1.0
+      fastq: 1.20.1
+      glob: 11.1.0
+
   '@google/[email protected](@modelcontextprotocol/[email protected]([email protected]))':
     dependencies:
       google-auth-library: 10.6.1
@@ -8999,6 +9048,8 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: [email protected]
 
+  '@isaacs/[email protected]': {}
+
   '@isaacs/[email protected]':
     dependencies:
       minipass: 7.1.3
@@ -9036,6 +9087,8 @@ snapshots:
 
   '@lukeed/[email protected]': {}
 
+  '@lukeed/[email protected]': {}
+
   '@lydell/[email protected]':
     optional: true
 
@@ -9124,18 +9177,6 @@ snapshots:
       - ws
       - zod
 
-  '@mariozechner/[email protected](@modelcontextprotocol/[email protected]([email protected]))([email protected])([email protected])':
-    dependencies:
-      '@mariozechner/pi-ai': 0.63.2(@modelcontextprotocol/[email protected]([email protected]))([email protected])([email protected])
-    transitivePeerDependencies:
-      - '@modelcontextprotocol/sdk'
-      - aws-crt
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-      - ws
-      - zod
-
   '@mariozechner/[email protected](@modelcontextprotocol/[email protected]([email protected]))([email protected])([email protected])':
     dependencies:
       '@mariozechner/pi-ai': 0.63.2(@modelcontextprotocol/[email protected]([email protected]))([email protected])([email protected])
@@ -9184,30 +9225,6 @@ snapshots:
       - ws
       - zod
 
-  '@mariozechner/[email protected](@modelcontextprotocol/[email protected]([email protected]))([email protected])([email protected])':
-    dependencies:
-      '@anthropic-ai/sdk': 0.73.0([email protected])
-      '@aws-sdk/client-bedrock-runtime': 3.1008.0
-      '@google/genai': 1.45.0(@modelcontextprotocol/[email protected]([email protected]))
-      '@mistralai/mistralai': 1.14.1
-      '@sinclair/typebox': 0.34.48
-      ajv: 8.18.0
-      ajv-formats: 3.0.1([email protected])
-      chalk: 5.6.2
-      openai: 6.26.0([email protected])([email protected])
-      partial-json: 0.1.7
-      proxy-agent: 6.5.0
-      undici: 7.24.6
-      zod-to-json-schema: 3.25.1([email protected])
-    transitivePeerDependencies:
-      - '@modelcontextprotocol/sdk'
-      - aws-crt
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-      - ws
-      - zod
-
   '@mariozechner/[email protected](@modelcontextprotocol/[email protected]([email protected]))([email protected])([email protected])':
     dependencies:
       '@anthropic-ai/sdk': 0.73.0([email protected])
@@ -9505,7 +9522,7 @@ snapshots:
     optionalDependencies:
       '@nestjs/websockets': 11.1.16(@nestjs/[email protected]([email protected])([email protected])([email protected])([email protected]))(@nestjs/[email protected])(@nestjs/[email protected])([email protected])([email protected])
 
-  '@nestjs/[email protected](@nestjs/[email protected]([email protected])([email protected])([email protected])([email protected]))(@nestjs/[email protected])':
+  '@nestjs/[email protected](@fastify/[email protected])(@nestjs/[email protected]([email protected])([email protected])([email protected])([email protected]))(@nestjs/[email protected])':
     dependencies:
       '@fastify/cors': 11.2.0
       '@fastify/formbody': 8.0.2
@@ -9519,6 +9536,8 @@ snapshots:
       path-to-regexp: 8.3.0
       reusify: 1.1.0
       tslib: 2.8.1
+    optionalDependencies:
+      '@fastify/static': 8.3.0
 
   '@nestjs/[email protected](@nestjs/[email protected]([email protected])([email protected])([email protected])([email protected]))(@nestjs/[email protected])([email protected])':
     dependencies:
@@ -9556,7 +9575,8 @@ snapshots:
     optionalDependencies:
       '@nestjs/platform-socket.io': 11.1.16(@nestjs/[email protected]([email protected])([email protected])([email protected])([email protected]))(@nestjs/[email protected])([email protected])
 
-  '@next/[email protected]': {}
+  '@next/[email protected]':
+    optional: true
 
   '@next/[email protected]':
     optional: true
@@ -11136,6 +11156,7 @@ snapshots:
   '@swc/[email protected]':
     dependencies:
       tslib: 2.8.1
+    optional: true
 
   '@swc/[email protected]':
     dependencies:
@@ -11522,6 +11543,14 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
+  '@vitest/[email protected]([email protected](@types/[email protected])([email protected]))':
+    dependencies:
+      '@vitest/spy': 2.1.9
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 5.4.21(@types/[email protected])([email protected])
+
   '@vitest/[email protected]([email protected](@types/[email protected])([email protected]))':
     dependencies:
       '@vitest/spy': 2.1.9
@@ -11703,7 +11732,8 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]: {}
+  [email protected]:
+    optional: true
 
   [email protected]: {}
 
@@ -11892,7 +11922,8 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]: {}
+  [email protected]:
+    optional: true
 
   [email protected]: {}
 
@@ -11966,7 +11997,8 @@ snapshots:
       slice-ansi: 5.0.0
       string-width: 7.2.0
 
-  [email protected]: {}
+  [email protected]:
+    optional: true
 
   [email protected]:
     dependencies:
@@ -12012,6 +12044,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      safe-buffer: 5.2.1
+
   [email protected]: {}
 
   [email protected]: {}
@@ -12863,6 +12899,15 @@ snapshots:
       package-json-from-dist: 1.0.1
       path-scurry: 1.11.1
 
+  [email protected]:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 4.2.3
+      minimatch: 10.2.4
+      minipass: 7.1.3
+      package-json-from-dist: 1.0.1
+      path-scurry: 2.0.2
+
   [email protected]:
     dependencies:
       minimatch: 10.2.4
@@ -13192,6 +13237,10 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  [email protected]:
+    dependencies:
+      '@isaacs/cliui': 9.0.0
+
   [email protected]: {}
 
   [email protected]: {}
@@ -13795,6 +13844,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -13911,6 +13962,7 @@ snapshots:
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
+    optional: true
 
   [email protected]:
     dependencies:
@@ -13994,11 +14046,6 @@ snapshots:
     dependencies:
       mimic-function: 5.0.1
 
-  [email protected]([email protected])([email protected]):
-    optionalDependencies:
-      ws: 8.20.0
-      zod: 3.25.76
-
   [email protected]([email protected])([email protected]):
     optionalDependencies:
       ws: 8.20.0
@@ -14252,9 +14299,10 @@ snapshots:
 
   [email protected]:
     dependencies:
-      nanoid: 3.3.11
+      nanoid: 3.3.18
       picocolors: 1.1.1
       source-map-js: 1.2.1
+    optional: true
 
   [email protected]:
     dependencies:
@@ -14935,6 +14983,7 @@ snapshots:
     dependencies:
       client-only: 0.0.1
       react: 19.2.4
+    optional: true
 
   [email protected]:
     dependencies:
@@ -15360,7 +15409,7 @@ snapshots:
   [email protected](@types/[email protected])([email protected](@noble/[email protected]))([email protected]):
     dependencies:
       '@vitest/expect': 2.1.9
-      '@vitest/mocker': 2.1.9([email protected](@types/node@24.12.0)([email protected]))
+      '@vitest/mocker': 2.1.9([email protected](@types/node@22.19.15)([email protected]))
       '@vitest/pretty-format': 2.1.9
       '@vitest/runner': 2.1.9
       '@vitest/snapshot': 2.1.9

scripts/build-web.mjs

@@ -1,146 +0,0 @@
-#!/usr/bin/env node
-
-import { spawn } from 'node:child_process';
-import { createHash, randomUUID } from 'node:crypto';
-import { lstat, mkdir, readFile, rename, rm, writeFile } from 'node:fs/promises';
-import { fileURLToPath } from 'node:url';
-import path from 'node:path';
-
-import { generatedSymlinkManifest, sourceFingerprint } from './preflight.mjs';
-
-const scriptRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
-
-function run(command, args, options) {
-  return new Promise((resolve, reject) => {
-    const child = spawn(command, args, options);
-    child.once('error', reject);
-    child.once('exit', (code, signal) => {
-      if (code === 0) resolve();
-      else
-        reject(
-          new Error(signal ? `next build terminated by ${signal}` : `next build exited ${code}`),
-        );
-    });
-  });
-}
-
-const delay = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
-
-async function requireRealDirectory(target, { allowMissing = false } = {}) {
-  try {
-    const stats = await lstat(target);
-    if (!stats.isDirectory() || stats.isSymbolicLink()) {
-      throw new Error(`${target} must be a real directory, not a symbolic link.`);
-    }
-  } catch (error) {
-    if (allowMissing && error.code === 'ENOENT') return;
-    throw error;
-  }
-}
-
-async function acquireBuildLock(root) {
-  const workRoot = path.join(root, '.mosaic-test-work');
-  const lock = path.join(workRoot, 'web-build.lock');
-  const nonce = randomUUID();
-  const owner = JSON.stringify({ pid: process.pid, nonce });
-  const deadline = Date.now() + 120_000;
-  await mkdir(workRoot, { recursive: true });
-
-  while (Date.now() < deadline) {
-    try {
-      await mkdir(lock);
-      await writeFile(path.join(lock, 'owner.json'), owner, { mode: 0o600 });
-      return async () => {
-        const current = await readFile(path.join(lock, 'owner.json'), 'utf8');
-        if (current !== owner) throw new Error('Web build lock ownership changed before release.');
-        const released = `${lock}.released-${nonce}`;
-        await rename(lock, released);
-        await rm(released, { recursive: true, force: true });
-      };
-    } catch (error) {
-      if (error.code !== 'EEXIST') throw error;
-      let lockOwner;
-      try {
-        lockOwner = JSON.parse(await readFile(path.join(lock, 'owner.json'), 'utf8'));
-      } catch (ownerError) {
-        if (ownerError.code === 'ENOENT') {
-          await delay(25);
-          continue;
-        }
-        throw new Error(`Web build lock is unreadable at ${lock}.`, { cause: ownerError });
-      }
-      try {
-        process.kill(lockOwner.pid, 0);
-      } catch (processError) {
-        if (processError.code !== 'ESRCH') throw processError;
-        const stale = `${lock}.stale-${nonce}`;
-        try {
-          await rename(lock, stale);
-          await rm(stale, { recursive: true, force: true });
-        } catch (renameError) {
-          if (renameError.code !== 'ENOENT') throw renameError;
-        }
-        continue;
-      }
-      await delay(25);
-    }
-  }
-  throw new Error(`Timed out waiting for the web build lock at ${lock}.`);
-}
-
-export async function buildWeb({
-  root = scriptRoot,
-  fingerprint = sourceFingerprint,
-  runBuild = async (webDir) =>
-    run(path.join(webDir, 'node_modules', '.bin', 'next'), ['build'], {
-      cwd: webDir,
-      stdio: 'inherit',
-    }),
-} = {}) {
-  const releaseLock = await acquireBuildLock(root);
-  try {
-    const webDir = path.join(root, 'apps', 'web');
-    const nextDir = path.join(webDir, '.next');
-    const certificationMarker = path.join(nextDir, '.mosaic-source-hash');
-    const symlinkManifest = path.join(nextDir, '.mosaic-symlink-manifest');
-    const certificationTemporary = `${certificationMarker}.${randomUUID()}.tmp`;
-    const manifestTemporary = `${symlinkManifest}.${randomUUID()}.tmp`;
-    const before = await fingerprint(root);
-
-    await requireRealDirectory(nextDir, { allowMissing: true });
-    await Promise.all([
-      rm(certificationMarker, { force: true }),
-      rm(symlinkManifest, { force: true }),
-    ]);
-    await runBuild(webDir);
-    await requireRealDirectory(nextDir);
-
-    const after = await fingerprint(root);
-    if (after !== before) {
-      throw new Error(
-        'Web build inputs changed during next build; generated output was not certified.',
-      );
-    }
-
-    const manifestContents = await generatedSymlinkManifest(nextDir);
-    const certificationContents = `${JSON.stringify({
-      version: 1,
-      sourceFingerprint: before,
-      symlinkManifestHash: createHash('sha256').update(manifestContents).digest('hex'),
-    })}\n`;
-    await Promise.all([
-      writeFile(certificationTemporary, certificationContents, { mode: 0o600 }),
-      writeFile(manifestTemporary, manifestContents, { mode: 0o600 }),
-    ]);
-    // The certification marker is the commit point. Publishing the manifest first
-    // leaves interrupted builds untrusted because the marker remains absent.
-    await rename(manifestTemporary, symlinkManifest);
-    await rename(certificationTemporary, certificationMarker);
-  } finally {
-    await releaseLock();
-  }
-}
-
-if (process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
-  await buildWeb();
-}

scripts/build-web.test.mjs

@@ -1,149 +0,0 @@
-import assert from 'node:assert/strict';
-import { access, mkdir, readFile, rm, symlink, writeFile } from 'node:fs/promises';
-import path from 'node:path';
-import test from 'node:test';
-
-import { buildWeb } from './build-web.mjs';
-
-const fixtureRoot = path.join(process.cwd(), '.mosaic-test-work', `build-web-${process.pid}`);
-
-async function fixture(name) {
-  const root = path.join(fixtureRoot, name);
-  await mkdir(path.join(root, 'apps', 'web', '.next'), { recursive: true });
-  return root;
-}
-
-async function exists(target) {
-  try {
-    await access(target);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-test.after(async () => {
-  await rm(fixtureRoot, { recursive: true, force: true });
-});
-
-test('a successful web build atomically publishes its source and symlink certification', async () => {
-  const root = await fixture('success');
-  const marker = path.join(root, 'apps', 'web', '.next', '.mosaic-source-hash');
-  const manifest = path.join(root, 'apps', 'web', '.next', '.mosaic-symlink-manifest');
-
-  await buildWeb({ root, fingerprint: async () => 'certified', runBuild: async () => {} });
-
-  assert.deepEqual(JSON.parse(await readFile(marker, 'utf8')), {
-    version: 1,
-    sourceFingerprint: 'certified',
-    symlinkManifestHash: '8a5a375cea6a55d24bd5f875856da63feba33adbefb15a92a0007719b84bcf11',
-  });
-  assert.equal(await readFile(manifest, 'utf8'), '{"version":1,"links":[]}\n');
-});
-
-test('a failed web build leaves no certification marker', async () => {
-  const root = await fixture('failure');
-  const marker = path.join(root, 'apps', 'web', '.next', '.mosaic-source-hash');
-  const manifest = path.join(root, 'apps', 'web', '.next', '.mosaic-symlink-manifest');
-  await writeFile(marker, 'stale\n');
-  await writeFile(manifest, 'stale\n');
-
-  await assert.rejects(
-    buildWeb({
-      root,
-      fingerprint: async () => 'before',
-      runBuild: async () => {
-        throw new Error('build failed');
-      },
-    }),
-    /build failed/,
-  );
-
-  assert.equal(await exists(marker), false);
-  assert.equal(await exists(manifest), false);
-});
-
-test('overlapping web builds are serialized while the marker remains absent', async () => {
-  const root = await fixture('overlap');
-  const marker = path.join(root, 'apps', 'web', '.next', '.mosaic-source-hash');
-  const manifest = path.join(root, 'apps', 'web', '.next', '.mosaic-symlink-manifest');
-  await writeFile(marker, 'stale\n');
-  await writeFile(manifest, 'stale\n');
-  let releaseFirst;
-  let secondEntered = false;
-  const firstEntered = new Promise((resolve) => {
-    releaseFirst = resolve;
-  });
-  let markFirstEntered;
-  const firstStarted = new Promise((resolve) => {
-    markFirstEntered = resolve;
-  });
-
-  const first = buildWeb({
-    root,
-    fingerprint: async () => 'certified',
-    runBuild: async () => {
-      markFirstEntered();
-      await firstEntered;
-    },
-  });
-  await firstStarted;
-  const second = buildWeb({
-    root,
-    fingerprint: async () => 'certified',
-    runBuild: async () => {
-      secondEntered = true;
-    },
-  });
-  await new Promise((resolve) => setTimeout(resolve, 75));
-  assert.equal(secondEntered, false);
-  assert.equal(await exists(marker), false);
-  assert.equal(await exists(manifest), false);
-
-  releaseFirst();
-  await Promise.all([first, second]);
-  assert.equal(secondEntered, true);
-  assert.equal(JSON.parse(await readFile(marker, 'utf8')).sourceFingerprint, 'certified');
-  assert.equal(await readFile(manifest, 'utf8'), '{"version":1,"links":[]}\n');
-});
-
-test('a build that replaces .next with a symbolic link cannot publish outside the checkout', async () => {
-  const root = await fixture('symbolic-next');
-  const nextDir = path.join(root, 'apps', 'web', '.next');
-  const outside = path.join(root, 'outside-generated');
-  await mkdir(outside);
-
-  await assert.rejects(
-    buildWeb({
-      root,
-      fingerprint: async () => 'certified',
-      runBuild: async () => {
-        await rm(nextDir, { recursive: true });
-        await symlink(outside, nextDir);
-      },
-    }),
-    /must be a real directory/,
-  );
-
-  assert.equal(await exists(path.join(outside, '.mosaic-source-hash')), false);
-  assert.equal(await exists(path.join(outside, '.mosaic-symlink-manifest')), false);
-});
-
-test('inputs changed during a web build are not certified', async () => {
-  const root = await fixture('changed-inputs');
-  const marker = path.join(root, 'apps', 'web', '.next', '.mosaic-source-hash');
-  const manifest = path.join(root, 'apps', 'web', '.next', '.mosaic-symlink-manifest');
-  const fingerprints = ['before', 'after'];
-
-  await assert.rejects(
-    buildWeb({
-      root,
-      fingerprint: async () => fingerprints.shift(),
-      runBuild: async () => {},
-    }),
-    /inputs changed during next build/,
-  );
-
-  assert.equal(await exists(marker), false);
-  assert.equal(await exists(manifest), false);
-});

scripts/clean-generated.mjs

@@ -1,34 +0,0 @@
-#!/usr/bin/env node
-
-import { access, mkdir, rename, rm } from 'node:fs/promises';
-import path from 'node:path';
-
-const root = process.cwd();
-const generated = path.join(root, 'apps', 'web', '.next');
-const quarantineRoot = path.join(root, '.mosaic-test-work', 'generated-quarantine');
-
-try {
-  await access(generated);
-} catch (error) {
-  if (error.code === 'ENOENT') process.exit(0);
-  throw error;
-}
-
-await mkdir(quarantineRoot, { recursive: true });
-const quarantine = path.join(quarantineRoot, `web-next-${Date.now()}-${process.pid}`);
-try {
-  await rename(generated, quarantine);
-} catch (error) {
-  console.error(
-    `MOSAIC_GENERATED_CLEAN_FAILED: could not quarantine apps/web/.next. Fix: sudo rm -rf '${generated}', then rerun pnpm preflight`,
-  );
-  throw error;
-}
-
-try {
-  await rm(quarantine, { recursive: true, force: true });
-} catch {
-  console.warn(
-    `Generated state was deactivated but could not be deleted; quarantined at ${quarantine}`,
-  );
-}

scripts/preflight.mjs

@@ -1,137 +1,18 @@
 #!/usr/bin/env node
 
 import { constants } from 'node:fs';
-import { access, lstat, readFile, readdir, readlink } from 'node:fs/promises';
+import { access } from 'node:fs/promises';
-import { createHash } from 'node:crypto';
-import { createRequire } from 'node:module';
 import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 
 export const MISSING_DEPS_EXIT = 42;
-export const GENERATED_STATE_EXIT = 43;
 
-const scriptRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+// The generated-state certification that used to live here (fingerprinting the
+// web source tree and certifying apps/web/.next) retired with the Next.js build
+// in Phase P5 (#1444): the Vite SPA has no generated tree that later gates
+// consume, so there is no stale-output class left to defend against.
 
-async function entries(root) {
+export async function runPreflight({ root = process.cwd() } = {}) {
-  const result = [];
-  async function walk(current) {
-    let children;
-    try {
-      children = await readdir(current, { withFileTypes: true });
-    } catch (error) {
-      if (error.code === 'ENOENT') return;
-      throw error;
-    }
-    for (const child of children) {
-      const target = path.join(current, child.name);
-      result.push(target);
-      if (child.isDirectory() && !child.isSymbolicLink()) await walk(target);
-    }
-  }
-  await walk(root);
-  return result;
-}
-
-export async function generatedSymlinkManifest(nextDir) {
-  const links = [];
-  for (const target of (await entries(nextDir)).sort()) {
-    const stats = await lstat(target);
-    if (!stats.isSymbolicLink()) continue;
-    links.push({
-      path: path.relative(nextDir, target).split(path.sep).join('/'),
-      target: await readlink(target),
-    });
-  }
-  return `${JSON.stringify({ version: 1, links })}\n`;
-}
-
-const webSourceRoots = (root) => [
-  path.join(root, 'apps', 'web', 'src'),
-  path.join(root, 'apps', 'web', 'public'),
-  path.join(root, 'apps', 'web', 'next-env.d.ts'),
-  path.join(root, 'apps', 'web', 'next.config.ts'),
-  path.join(root, 'apps', 'web', 'postcss.config.mjs'),
-  path.join(root, 'apps', 'web', 'package.json'),
-  path.join(root, 'apps', 'web', 'tsconfig.json'),
-  path.join(root, 'packages', 'design-tokens', 'src'),
-  path.join(root, 'packages', 'design-tokens', 'package.json'),
-  path.join(root, 'packages', 'design-tokens', 'tsconfig.json'),
-  path.join(root, 'package.json'),
-  path.join(root, 'tsconfig.base.json'),
-  path.join(root, 'pnpm-lock.yaml'),
-  path.join(root, 'pnpm-workspace.yaml'),
-  path.join(root, 'turbo.json'),
-];
-
-// next.config.ts currently reads no server-only environment. Add any future
-// server-side build inputs here; all resolved NEXT_PUBLIC_* inputs are automatic.
-const serverBuildEnvironmentKeys = [];
-
-function publicBuildEnvironment(root) {
-  const webDir = path.join(root, 'apps', 'web');
-  const requireFromWeb = createRequire(path.join(scriptRoot, 'apps', 'web', 'package.json'));
-  const requireFromNext = createRequire(requireFromWeb.resolve('next/package.json'));
-  const { loadEnvConfig, resetEnv, updateInitialEnv } = requireFromNext('@next/env');
-  const originalEnvironment = { ...process.env };
-  updateInitialEnv(originalEnvironment);
-  try {
-    const { combinedEnv } = loadEnvConfig(webDir, false, { info() {}, error() {} }, true);
-    return Object.fromEntries(
-      Object.entries(combinedEnv).filter(
-        ([key, value]) =>
-          value !== undefined &&
-          (key.startsWith('NEXT_PUBLIC_') || serverBuildEnvironmentKeys.includes(key)),
-      ),
-    );
-  } finally {
-    resetEnv();
-  }
-}
-
-export async function sourceFingerprint(root = process.cwd()) {
-  const files = [];
-  for (const sourceRoot of webSourceRoots(root)) {
-    try {
-      const stats = await lstat(sourceRoot);
-      if (stats.isSymbolicLink()) {
-        throw new Error(
-          `Web build input must not be a symbolic link: ${path.relative(root, sourceRoot)}`,
-        );
-      }
-      if (stats.isFile()) files.push(sourceRoot);
-      if (stats.isDirectory()) {
-        for (const target of await entries(sourceRoot)) {
-          const targetStats = await lstat(target);
-          if (targetStats.isSymbolicLink()) {
-            throw new Error(
-              `Web build input must not be a symbolic link: ${path.relative(root, target)}`,
-            );
-          }
-          if (targetStats.isFile()) files.push(target);
-        }
-      }
-    } catch (error) {
-      if (error.code !== 'ENOENT') throw error;
-    }
-  }
-
-  const digest = createHash('sha256');
-  for (const [key, value] of Object.entries(publicBuildEnvironment(root)).sort()) {
-    digest.update(`env:${key}\0${value.length}\0${value}\0`);
-  }
-  for (const target of files.sort()) {
-    const contents = await readFile(target);
-    digest.update(path.relative(root, target).split(path.sep).join('/'));
-    digest.update('\0');
-    digest.update(String(contents.length));
-    digest.update('\0');
-    digest.update(contents);
-    digest.update('\0');
-  }
-  return digest.digest('hex');
-}
-
-export async function runPreflight({ root = process.cwd(), uid = process.getuid?.() } = {}) {
   const binDir = path.join(root, 'node_modules', '.bin');
   const requiredBinaries = ['eslint', 'husky', 'prettier', 'tsc', 'turbo', 'vitest'];
   const missingBinaries = [];
@@ -149,96 +30,6 @@ export async function runPreflight({ root = process.cwd(), uid = process.getuid?
     };
   }
 
-  const buildLock = path.join(root, '.mosaic-test-work', 'web-build.lock');
-  try {
-    await lstat(buildLock);
-    return {
-      code: GENERATED_STATE_EXIT,
-      message: `MOSAIC_PREFLIGHT_GENERATED_STATE: web build is in progress or interrupted at ${buildLock}; wait for it to finish or rerun pnpm build to recover the stale lock`,
-    };
-  } catch (error) {
-    if (error.code !== 'ENOENT') throw error;
-  }
-
-  const nextDir = path.join(root, 'apps', 'web', '.next');
-  let generated = [];
-  try {
-    const nextStats = await lstat(nextDir);
-    if (!nextStats.isDirectory() || nextStats.isSymbolicLink()) {
-      return {
-        code: GENERATED_STATE_EXIT,
-        message:
-          'MOSAIC_PREFLIGHT_GENERATED_STATE: apps/web/.next must be a real directory, not a symbolic link, and is not trustworthy; run pnpm clean:generated, then rerun the gate',
-      };
-    }
-    generated = [nextDir, ...(await entries(nextDir))];
-  } catch (error) {
-    if (error.code !== 'ENOENT') throw error;
-  }
-
-  if (generated.length > 0) {
-    const foreign = [];
-    for (const target of generated) {
-      const stats = await lstat(target);
-      if (uid !== undefined && stats.uid !== uid) foreign.push(path.relative(root, target));
-    }
-
-    // Detects accidental, independent, stale, and foreign-residue mutation of
-    // generated state: the class this check was born from was a five-month-stale
-    // .next whose validator referenced deleted pages and produced 19 phantom TS2307
-    // errors indistinguishable from real type errors.
-    //
-    // Does NOT defend against an actor with same-UID write access to the generated
-    // tree, which can regenerate both the manifest and marker consistently
-    // (CWE-345). No local construction can, absent a trust anchor outside that
-    // actor's authority. RM-59 tracks executor/spine-side attestation.
-    let certification = null;
-    let certifiedManifest = null;
-    try {
-      const [certificationContents, manifestContents] = await Promise.all([
-        readFile(path.join(nextDir, '.mosaic-source-hash'), 'utf8'),
-        readFile(path.join(nextDir, '.mosaic-symlink-manifest'), 'utf8'),
-      ]);
-      try {
-        const parsed = JSON.parse(certificationContents);
-        if (
-          parsed.version === 1 &&
-          typeof parsed.sourceFingerprint === 'string' &&
-          typeof parsed.symlinkManifestHash === 'string'
-        ) {
-          certification = parsed;
-          certifiedManifest = manifestContents;
-        }
-      } catch {
-        // Invalid certification is handled as untrusted generated state below.
-      }
-    } catch (error) {
-      if (error.code !== 'ENOENT') throw error;
-    }
-    const stale = certification?.sourceFingerprint !== (await sourceFingerprint(root));
-    const actualManifest = await generatedSymlinkManifest(nextDir);
-    const certifiedManifestHash =
-      certifiedManifest === null
-        ? null
-        : createHash('sha256').update(certifiedManifest).digest('hex');
-    const changedSymlinks =
-      certification?.symlinkManifestHash !== certifiedManifestHash ||
-      certifiedManifest !== actualManifest;
-    if (foreign.length > 0 || stale || changedSymlinks) {
-      const reasons = [
-        foreign.length > 0 ? `foreign-owned paths: ${foreign.slice(0, 3).join(', ')}` : '',
-        stale ? 'generated source fingerprint does not match web source/configuration' : '',
-        changedSymlinks
-          ? 'generated symbolic-link manifest does not match the certified build'
-          : '',
-      ].filter(Boolean);
-      return {
-        code: GENERATED_STATE_EXIT,
-        message: `MOSAIC_PREFLIGHT_GENERATED_STATE: apps/web/.next is not trustworthy (${reasons.join('; ')}); run pnpm clean:generated, then rerun the gate`,
-      };
-    }
-  }
-
   return { code: 0, message: 'checkout preflight passed' };
 }
 

scripts/preflight.test.mjs

@@ -1,10 +1,9 @@
 import assert from 'node:assert/strict';
-import { createHash } from 'node:crypto';
+import { chmod, mkdir, rm, symlink, writeFile } from 'node:fs/promises';
-import { chmod, mkdir, rm, symlink, utimes, writeFile } from 'node:fs/promises';
 import path from 'node:path';
 import test from 'node:test';
 
-import { runPreflight, sourceFingerprint } from './preflight.mjs';
+import { runPreflight } from './preflight.mjs';
 
 const fixtureRoot = path.join(process.cwd(), '.mosaic-test-work', `preflight-${process.pid}`);
 
@@ -12,8 +11,8 @@ const requiredBins = ['eslint', 'husky', 'prettier', 'tsc', 'turbo', 'vitest'];
 
 async function fixture(name) {
   const root = path.join(fixtureRoot, name);
-  await mkdir(path.join(root, 'apps', 'web', 'src', 'app'), { recursive: true });
+  await mkdir(path.join(root, 'apps', 'web', 'src'), { recursive: true });
-  await writeFile(path.join(root, 'apps', 'web', 'src', 'app', 'page.tsx'), 'export default 1;\n');
+  await writeFile(path.join(root, 'apps', 'web', 'src', 'main.tsx'), 'export default 1;\n');
   return root;
 }
 
@@ -29,22 +28,6 @@ async function installRequiredBins(root) {
   );
 }
 
-async function certifyGeneratedState(root, links = []) {
-  const nextDir = path.join(root, 'apps', 'web', '.next');
-  await mkdir(nextDir, { recursive: true });
-  const manifest = `${JSON.stringify({ version: 1, links })}\n`;
-  const manifestHash = createHash('sha256').update(manifest).digest('hex');
-  await writeFile(path.join(nextDir, '.mosaic-symlink-manifest'), manifest);
-  await writeFile(
-    path.join(nextDir, '.mosaic-source-hash'),
-    `${JSON.stringify({
-      version: 1,
-      sourceFingerprint: await sourceFingerprint(root),
-      symlinkManifestHash: manifestHash,
-    })}\n`,
-  );
-}
-
 test.after(async () => {
   await rm(fixtureRoot, { recursive: true, force: true });
 });
@@ -80,195 +63,9 @@ test('a dangling required dependency shim keeps the dedicated missing-deps resul
   assert.match(result.message, /turbo/);
 });
 
-test('installed dependencies pass when generated state is absent', async () => {
+test('installed dependencies pass', async () => {
   const root = await fixture('clean');
   await installRequiredBins(root);
 
   assert.deepEqual(await runPreflight({ root }), { code: 0, message: 'checkout preflight passed' });
 });
-
-test('foreign-owned generated Next state is identified separately from source errors', async () => {
-  const root = await fixture('foreign-next');
-  await installRequiredBins(root);
-  const generated = path.join(root, 'apps', 'web', '.next', 'types', 'validator.ts');
-  await mkdir(path.dirname(generated), { recursive: true });
-  await writeFile(generated, 'generated output');
-
-  const result = await runPreflight({ root, uid: (process.getuid?.() ?? 0) + 1 });
-  assert.equal(result.code, 43);
-  assert.match(result.message, /MOSAIC_PREFLIGHT_GENERATED_STATE/);
-  assert.match(result.message, /foreign-owned/);
-});
-
-test('a generated marker mismatch is identified separately from source errors', async () => {
-  const root = await fixture('stale-next');
-  await installRequiredBins(root);
-  const generated = path.join(root, 'apps', 'web', '.next', 'types', 'validator.ts');
-  await mkdir(path.dirname(generated), { recursive: true });
-  await writeFile(generated, 'stale generated output');
-  await writeFile(path.join(root, 'apps', 'web', '.next', '.mosaic-source-hash'), 'old-source');
-
-  const result = await runPreflight({ root });
-  assert.equal(result.code, 43);
-  assert.match(result.message, /MOSAIC_PREFLIGHT_GENERATED_STATE/);
-  assert.match(result.message, /apps\/web\/\.next/);
-  assert.match(result.message, /pnpm clean:generated/);
-});
-
-test('generated-state symbolic links are accepted only when exactly build-certified', async (t) => {
-  await t.test('apps/web/.next itself is rejected when it is a symbolic link', async () => {
-    const root = await fixture('symbolic-next-root');
-    await installRequiredBins(root);
-    await writeFile(path.join(root, 'outside-generated'), 'not a Next build\n');
-    await symlink(path.join(root, 'outside-generated'), path.join(root, 'apps', 'web', '.next'));
-
-    const result = await runPreflight({ root });
-    assert.equal(result.code, 43);
-    assert.match(result.message, /MOSAIC_PREFLIGHT_GENERATED_STATE/);
-    assert.match(result.message, /symbolic link/);
-  });
-
-  await t.test('apps/web/.next is rejected when it is not a directory', async () => {
-    const root = await fixture('non-directory-next-root');
-    await installRequiredBins(root);
-    await writeFile(path.join(root, 'apps', 'web', '.next'), 'not a Next build\n');
-
-    const result = await runPreflight({ root });
-    assert.equal(result.code, 43);
-    assert.match(result.message, /MOSAIC_PREFLIGHT_GENERATED_STATE/);
-    assert.match(result.message, /real directory/);
-  });
-
-  await t.test('an added descendant symlink is rejected', async () => {
-    const root = await fixture('symbolic-next-added');
-    await installRequiredBins(root);
-    await certifyGeneratedState(root);
-    await symlink('/etc/hosts', path.join(root, 'apps', 'web', '.next', 'reviewer-symlink'));
-
-    const result = await runPreflight({ root });
-    assert.equal(result.code, 43);
-    assert.match(result.message, /symbolic-link manifest/);
-  });
-
-  await t.test('a removed certified descendant symlink is rejected', async () => {
-    const root = await fixture('symbolic-next-removed');
-    await installRequiredBins(root);
-    const link = path.join(root, 'apps', 'web', '.next', 'dependency-link');
-    await mkdir(path.dirname(link), { recursive: true });
-    await symlink('../dependency-one', link);
-    await certifyGeneratedState(root, [{ path: 'dependency-link', target: '../dependency-one' }]);
-    await rm(link);
-
-    const result = await runPreflight({ root });
-    assert.equal(result.code, 43);
-    assert.match(result.message, /symbolic-link manifest/);
-  });
-
-  await t.test('a retargeted certified descendant symlink is rejected', async () => {
-    const root = await fixture('symbolic-next-retargeted');
-    await installRequiredBins(root);
-    const link = path.join(root, 'apps', 'web', '.next', 'dependency-link');
-    await mkdir(path.dirname(link), { recursive: true });
-    await symlink('../dependency-one', link);
-    await certifyGeneratedState(root, [{ path: 'dependency-link', target: '../dependency-one' }]);
-    await rm(link);
-    await symlink('../dependency-two', link);
-
-    const result = await runPreflight({ root });
-    assert.equal(result.code, 43);
-    assert.match(result.message, /symbolic-link manifest/);
-  });
-
-  await t.test('a manifest edited to whitelist a rogue symlink is rejected', async () => {
-    const root = await fixture('symbolic-next-tampered-manifest');
-    await installRequiredBins(root);
-    await certifyGeneratedState(root);
-    const nextDir = path.join(root, 'apps', 'web', '.next');
-    await symlink('/etc/hosts', path.join(nextDir, 'reviewer-symlink'));
-    await writeFile(
-      path.join(nextDir, '.mosaic-symlink-manifest'),
-      `${JSON.stringify({
-        version: 1,
-        links: [{ path: 'reviewer-symlink', target: '/etc/hosts' }],
-      })}\n`,
-    );
-
-    const result = await runPreflight({ root });
-    assert.equal(result.code, 43);
-    assert.match(result.message, /symbolic-link manifest/);
-  });
-
-  await t.test('unchanged canonical-style descendant symlinks are accepted', async () => {
-    const root = await fixture('symbolic-next-certified');
-    await installRequiredBins(root);
-    const link = path.join(
-      root,
-      'apps',
-      'web',
-      '.next',
-      'standalone',
-      'node_modules',
-      'dependency',
-    );
-    await mkdir(path.dirname(link), { recursive: true });
-    await symlink('../.pnpm/dependency', link);
-    await certifyGeneratedState(root, [
-      { path: 'standalone/node_modules/dependency', target: '../.pnpm/dependency' },
-    ]);
-
-    assert.deepEqual(await runPreflight({ root }), {
-      code: 0,
-      message: 'checkout preflight passed',
-    });
-  });
-});
-
-test('the source fingerprint includes inherited TypeScript configuration', async () => {
-  const root = await fixture('inherited-typescript-config');
-  const config = path.join(root, 'tsconfig.base.json');
-  await writeFile(config, '{"compilerOptions":{"strict":true}}\n');
-  const first = await sourceFingerprint(root);
-  await writeFile(config, '{"compilerOptions":{"strict":false}}\n');
-  const second = await sourceFingerprint(root);
-
-  assert.notEqual(first, second);
-});
-
-test('the source fingerprint rejects symbolic-link build inputs', async () => {
-  const root = await fixture('symbolic-source');
-  await writeFile(path.join(root, 'outside.ts'), 'export default 1;\n');
-  await symlink(path.join(root, 'outside.ts'), path.join(root, 'apps', 'web', 'src', 'linked.ts'));
-
-  await assert.rejects(sourceFingerprint(root), /must not be a symbolic link/);
-});
-
-test('the source fingerprint includes expanded public web build environment', async () => {
-  const root = await fixture('public-build-environment');
-  const envFile = path.join(root, 'apps', 'web', '.env.production');
-  await writeFile(
-    envFile,
-    'RM01_GATEWAY_URL=https://one.example\nNEXT_PUBLIC_RM01_URL=$RM01_GATEWAY_URL\n',
-  );
-  const first = await sourceFingerprint(root);
-  await writeFile(
-    envFile,
-    'RM01_GATEWAY_URL=https://two.example\nNEXT_PUBLIC_RM01_URL=$RM01_GATEWAY_URL\n',
-  );
-  const second = await sourceFingerprint(root);
-
-  assert.notEqual(first, second);
-});
-
-test('a matching generation marker accepts incremental output with mixed mtimes', async () => {
-  const root = await fixture('incremental-next');
-  await installRequiredBins(root);
-  const generated = path.join(root, 'apps', 'web', '.next', 'types', 'validator.ts');
-  await mkdir(path.dirname(generated), { recursive: true });
-  await writeFile(generated, 'unchanged generated output');
-  await utimes(generated, new Date('2020-01-01T00:00:00Z'), new Date('2020-01-01T00:00:00Z'));
-  const fresh = path.join(root, 'apps', 'web', '.next', 'types', 'routes.ts');
-  await writeFile(fresh, 'fresh generated output');
-  await certifyGeneratedState(root);
-
-  assert.deepEqual(await runPreflight({ root }), { code: 0, message: 'checkout preflight passed' });
-});

scripts/publish-gate-structure.test.mjs

@@ -199,7 +199,6 @@ test('the real publish pipeline: a failed verify provably blocks every publish e
   assert.deepEqual(effects.sort(), [
     'build-appservice',
     'build-gateway',
-    'build-web',
     'publish-next-npm',
     'publish-npm',
   ]);

scripts/verify-release.test.mjs

@@ -112,7 +112,6 @@ test('the publish pipeline gates every publish effect behind exact-commit verifi
   assert.deepEqual(effects.sort(), [
     'build-appservice',
     'build-gateway',
-    'build-web',
     'publish-next-npm',
     'publish-npm',
   ]);