feat: self-service sign-up with email verification and onboarding

Complete sign-up pipeline: email registration via Logto Experience API,
SMTP email verification, and self-service trial tenant creation.

Layer 1 — Logto config:
- Bootstrap Phase 8b: SMTP email connector with branded HTML templates
- Bootstrap Phase 8c: enable SignInAndRegister (email+password sign-up)
- Dockerfile installs official Logto connectors (ensures SMTP available)
- SMTP env vars in docker-compose, installer templates, .env.example

Layer 2 — Experience API (ui/sign-in/experience-api.ts):
- Registration flow: initRegistration → sendVerificationCode → verifyCode
  → addProfile (password) → identifyUser → submit
- Sign-in auto-detects email vs username identifier

Layer 3 — Custom sign-in UI (ui/sign-in/SignInPage.tsx):
- Three-mode state machine: signIn / register / verifyCode
- Reads first_screen=register from URL query params
- Toggle links between sign-in and register views

Layer 4 — Post-registration onboarding:
- OnboardingService: reuses VendorTenantService.createAndProvision(),
  adds calling user to Logto org as owner, enforces one trial per user
- OnboardingController: POST /api/onboarding/tenant (authenticated only)
- OnboardingPage.tsx: org name + auto-slug form
- LandingRedirect: detects zero orgs → redirects to /onboarding
- RegisterPage.tsx: /platform/register initiates OIDC with firstScreen

Installers (install.sh + install.ps1):
- Both prompt for SMTP config in SaaS mode
- CLI args, env var capture, cameleer.conf persistence

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/auth/RegisterPage.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+import { useLogto } from '@logto/react';
+import { useNavigate } from 'react-router';
+import { Spinner } from '@cameleer/design-system';
+
+export function RegisterPage() {
+  const { signIn, isAuthenticated, isLoading } = useLogto();
+  const navigate = useNavigate();
+  const redirected = useRef(false);
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate('/', { replace: true });
+    }
+  }, [isAuthenticated, navigate]);
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated && !redirected.current) {
+      redirected.current = true;
+      signIn({
+        redirectUri: `${window.location.origin}/platform/callback`,
+        firstScreen: 'register',
+      });
+    }
+  }, [isLoading, isAuthenticated, signIn]);
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
+      <Spinner />
+    </div>
+  );
+}

ui/src/pages/OnboardingPage.module.css

@@ -0,0 +1,59 @@
+.page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: var(--bg-base);
+}
+
+.wrapper {
+  width: 100%;
+  max-width: 480px;
+  padding: 16px;
+}
+
+.inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: var(--font-body);
+  width: 100%;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.logoImg {
+  width: 36px;
+  height: 36px;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: var(--text-muted);
+  margin: 0 0 24px;
+  text-align: center;
+}
+
+.error {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+.submit {
+  width: 100%;
+}

ui/src/pages/OnboardingPage.tsx

@@ -0,0 +1,103 @@
+import { useState, useEffect } from 'react';
+import { Card, Input, Button, FormField, Alert } from '@cameleer/design-system';
+import cameleerLogo from '@cameleer/design-system/assets/cameleer-logo.svg';
+import { api } from '../api/client';
+import { toSlug } from '../utils/slug';
+import styles from './OnboardingPage.module.css';
+
+interface TenantResponse {
+  id: string;
+  name: string;
+  slug: string;
+  status: string;
+}
+
+export function OnboardingPage() {
+  const [name, setName] = useState('');
+  const [slug, setSlug] = useState('');
+  const [slugTouched, setSlugTouched] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!slugTouched) {
+      setSlug(toSlug(name));
+    }
+  }, [name, slugTouched]);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      await api.post<TenantResponse>('/onboarding/tenant', { name, slug });
+      // Tenant created — force a full page reload so the Logto SDK
+      // picks up the new org membership and scopes on the next token refresh.
+      window.location.href = '/platform/';
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create tenant');
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.wrapper}>
+        <Card>
+          <div className={styles.inner}>
+            <div className={styles.logo}>
+              <img src={cameleerLogo} alt="" className={styles.logoImg} />
+              Welcome to Cameleer
+            </div>
+            <p className={styles.subtitle}>
+              Set up your workspace to start monitoring your Camel routes.
+            </p>
+
+            {error && (
+              <div className={styles.error}>
+                <Alert variant="error">{error}</Alert>
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className={styles.form}>
+              <FormField label="Organization name" htmlFor="onboard-name" required>
+                <Input
+                  id="onboard-name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Acme Corp"
+                  autoFocus
+                  disabled={loading}
+                  required
+                />
+              </FormField>
+
+              <FormField label="URL slug" htmlFor="onboard-slug" required
+                hint="Auto-generated from name. Appears in your dashboard URL."
+              >
+                <Input
+                  id="onboard-slug"
+                  value={slug}
+                  onChange={(e) => { setSlugTouched(true); setSlug(e.target.value); }}
+                  placeholder="acme-corp"
+                  disabled={loading}
+                  required
+                />
+              </FormField>
+
+              <Button
+                variant="primary"
+                type="submit"
+                loading={loading}
+                disabled={loading || !name || !slug}
+                className={styles.submit}
+              >
+                {loading ? 'Creating...' : 'Create workspace'}
+              </Button>
+            </form>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

ui/src/router.tsx

@@ -1,5 +1,6 @@
 import { Routes, Route, Navigate } from 'react-router';
 import { LoginPage } from './auth/LoginPage';
+import { RegisterPage } from './auth/RegisterPage';
 import { CallbackPage } from './auth/CallbackPage';
 import { ProtectedRoute } from './auth/ProtectedRoute';
 import { OrgResolver } from './auth/OrgResolver';
@@ -21,6 +22,7 @@ import { SsoPage } from './pages/tenant/SsoPage';
 import { TeamPage } from './pages/tenant/TeamPage';
 import { SettingsPage } from './pages/tenant/SettingsPage';
 import { TenantAuditPage } from './pages/tenant/TenantAuditPage';
+import { OnboardingPage } from './pages/OnboardingPage';
 
 function LandingRedirect() {
   const scopes = useScopes();
@@ -45,7 +47,11 @@ function LandingRedirect() {
     window.location.href = `/t/${currentOrg.slug}/`;
     return null;
   }
-  // No org resolved yet — stay on tenant portal
+  // No org membership at all → onboarding (self-service tenant creation)
+  if (organizations.length === 0) {
+    return <Navigate to="/onboarding" replace />;
+  }
+  // Has org but no scopes resolved yet — stay on tenant portal
   return <Navigate to="/tenant" replace />;
 }
 
@@ -53,9 +59,12 @@ export function AppRouter() {
   return (
     <Routes>
       <Route path="/login" element={<LoginPage />} />
+      <Route path="/register" element={<RegisterPage />} />
       <Route path="/callback" element={<CallbackPage />} />
       <Route element={<ProtectedRoute />}>
         <Route element={<OrgResolver />}>
+          {/* Onboarding — outside Layout, shown to users with no tenants */}
+          <Route path="/onboarding" element={<OnboardingPage />} />
           <Route element={<Layout />}>
             {/* Vendor console */}
             <Route path="/vendor/tenants" element={