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