Session 6.3

src/app/[locale]/dashboard/page.tsx

@@ -2,9 +2,11 @@ import { getSessionUser } from "@/lib/session";
 import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { listTenants } from "@/lib/k8s";
+import { getTenantRequestByOrgId } from "@/lib/db";
 import { Card, CardHeader } from "@/components/ui/card";
 import { StatusBadge } from "@/components/ui/status-badge";
 import { UsageDisplay } from "@/components/dashboard/usage-display";
+import { OnboardingFlow } from "@/components/onboarding/onboarding-flow";
 import Link from "next/link";
 
 export default async function DashboardPage() {
@@ -136,17 +138,13 @@ export default async function DashboardPage() {
     (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
   );
 
+  // No tenant → check for existing request, show onboarding flow
   if (!myTenant) {
+    const existingRequest = await getTenantRequestByOrgId(user.orgId);
+    const initialState = existingRequest?.status ?? "no_request";
+
     return (
       <div>
-        <details className="mt-12 text-xs text-text-muted">
-  <summary className="cursor-pointer hover:text-text-secondary transition-colors">
-    Session Debug
-  </summary>
-  <pre className="mt-3 bg-surface-2 border border-border rounded-lg p-4 overflow-auto font-mono text-[11px] text-text-secondary">
-    {JSON.stringify(user, null, 2)}
-  </pre>
-</details>
         <div className="mb-8 animate-in">
           <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
             {t("title")}
@@ -156,16 +154,11 @@ export default async function DashboardPage() {
           </p>
         </div>
 
-        <div className="flex flex-col items-center justify-center py-16 text-center animate-in animate-in-delay-1">
-          <div className="h-14 w-14 rounded-xl bg-accent/15 flex items-center justify-center mb-4">
-            <div className="h-8 w-8 rounded-lg bg-accent/40" />
-          </div>
-          <h2 className="font-display text-lg font-semibold text-text-primary mb-1">
-            {t("noInstance")}
-          </h2>
-          <p className="text-sm text-text-secondary mb-6 max-w-sm">
-            {t("noInstanceDescription")}
-          </p>
+        <div className="animate-in animate-in-delay-1">
+          <OnboardingFlow
+            orgName={user.orgName}
+            initialState={initialState as any}
+          />
         </div>
       </div>
     );
@@ -227,14 +220,6 @@ export default async function DashboardPage() {
       >
         <span>→</span> {t("manage")}
       </Link>
-      <details className="mt-12 text-xs text-text-muted">
-  <summary className="cursor-pointer hover:text-text-secondary transition-colors">
-    Session Debug
-  </summary>
-  <pre className="mt-3 bg-surface-2 border border-border rounded-lg p-4 overflow-auto font-mono text-[11px] text-text-secondary">
-    {JSON.stringify(user, null, 2)}
-  </pre>
-</details>
     </div>
   );
 }

src/app/[locale]/login/page.tsx

@@ -2,6 +2,7 @@
 
 import { signIn } from "next-auth/react";
 import { useTranslations } from "next-intl";
+import Link from "next/link";
 
 export default function LoginPage() {
   const t = useTranslations("login");
@@ -49,6 +50,16 @@ export default function LoginPage() {
           >
             {t("button")}
           </button>
+
+          <p className="text-xs text-text-muted text-center mt-5">
+            {t("noAccount")}{" "}
+            <Link
+              href="/register"
+              className="text-accent hover:text-accent-dim transition-colors"
+            >
+              {t("register")}
+            </Link>
+          </p>
         </div>
 
         <p className="text-center text-text-muted text-[11px] mt-6 tracking-wide uppercase">

src/app/[locale]/register/page.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { Card } from "@/components/ui/card";
+
+type FormState = "idle" | "submitting" | "success" | "error";
+
+export default function RegisterPage() {
+  const t = useTranslations("register");
+  const tCommon = useTranslations("common");
+  const router = useRouter();
+
+  const [form, setForm] = useState({
+    companyName: "",
+    givenName: "",
+    familyName: "",
+    email: "",
+  });
+  const [state, setState] = useState<FormState>("idle");
+  const [error, setError] = useState("");
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setState("submitting");
+
+    try {
+      const res = await fetch("/api/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          companyName: form.companyName,
+          givenName: form.givenName,
+          familyName: form.familyName,
+          email: form.email,
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "Registration failed");
+      }
+
+      setState("success");
+    } catch (err: any) {
+      setError(err.message);
+      setState("error");
+    }
+  };
+
+  if (state === "success") {
+    return (
+      <div className="min-h-screen flex items-center justify-center p-4">
+        <Card className="max-w-md w-full text-center p-8">
+          <div className="h-14 w-14 rounded-xl bg-emerald-500/15 flex items-center justify-center mx-auto mb-4">
+            <svg
+              className="h-7 w-7 text-emerald-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h2 className="font-display text-lg font-semibold text-text-primary mb-2">
+            {t("successTitle")}
+          </h2>
+          <p className="text-sm text-text-secondary mb-6">
+            {t("successDescription")}
+          </p>
+          <button
+            onClick={() => router.push("/login")}
+            className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
+          >
+            {t("goToLogin")}
+          </button>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="max-w-md w-full">
+        <div className="text-center mb-8 animate-in">
+          <h1 className="font-display text-2xl font-semibold text-text-primary mb-1">
+            {t("title")}
+          </h1>
+          <p className="text-sm text-text-secondary">{t("subtitle")}</p>
+        </div>
+
+        <Card className="animate-in animate-in-delay-1">
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {/* Company name */}
+            <div>
+              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                {t("companyName")}
+              </label>
+              <input
+                name="companyName"
+                type="text"
+                required
+                value={form.companyName}
+                onChange={handleChange}
+                placeholder={t("companyNamePlaceholder")}
+                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+              />
+            </div>
+
+            {/* Name row */}
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                  {t("givenName")}
+                </label>
+                <input
+                  name="givenName"
+                  type="text"
+                  required
+                  value={form.givenName}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                  {t("familyName")}
+                </label>
+                <input
+                  name="familyName"
+                  type="text"
+                  required
+                  value={form.familyName}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                />
+              </div>
+            </div>
+
+            {/* Email */}
+            <div>
+              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                {t("email")}
+              </label>
+              <input
+                name="email"
+                type="email"
+                required
+                value={form.email}
+                onChange={handleChange}
+                placeholder="you@company.ch"
+                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+              />
+            </div>
+
+            {error && (
+              <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
+                {error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={state === "submitting"}
+              className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {state === "submitting" ? tCommon("loading") : t("submit")}
+            </button>
+          </form>
+
+          <p className="text-xs text-text-muted text-center mt-4">
+            {t("hasAccount")}{" "}
+            <a
+              href="/login"
+              className="text-accent hover:text-accent-dim transition-colors"
+            >
+              {tCommon("login")}
+            </a>
+          </p>
+        </Card>
+
+        <p className="text-xs text-text-muted text-center mt-6 animate-in animate-in-delay-2">
+          {t("footer")}
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/api/admin/requests/[id]/approve/route.ts

@@ -0,0 +1,81 @@
+import { NextResponse } from "next/server";
+import { requirePlatformRole } from "@/lib/session";
+import { getTenantRequestById, updateTenantRequestStatus } from "@/lib/db";
+import { createTenant } from "@/lib/k8s";
+
+/**
+ * POST /api/admin/requests/[id]/approve
+ * Approve a tenant request: create the PiecedTenant CR and update status.
+ */
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    await requirePlatformRole();
+  } catch {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const { id } = await params;
+  const body = await request.json().catch(() => ({}));
+  const adminNotes = body.adminNotes as string | undefined;
+
+  const tenantRequest = await getTenantRequestById(id);
+  if (!tenantRequest) {
+    return NextResponse.json(
+      { error: "Request not found" },
+      { status: 404 }
+    );
+  }
+
+  if (tenantRequest.status !== "pending") {
+    return NextResponse.json(
+      { error: `Request is already ${tenantRequest.status}` },
+      { status: 400 }
+    );
+  }
+
+  // Derive tenant name from company name: lowercase, alphanumeric + hyphens
+  const tenantName = tenantRequest.companyName
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+    .slice(0, 63) || `tenant-${tenantRequest.id.slice(0, 8)}`;
+
+  try {
+    // Create the PiecedTenant CR
+    await createTenant(
+      tenantName,
+      {
+        displayName: tenantRequest.companyName,
+        agentName: tenantRequest.agentName,
+        packages: tenantRequest.packages,
+        workspaceFiles: tenantRequest.soulMd
+          ? { "SOUL.md": tenantRequest.soulMd }
+          : undefined,
+      },
+      {
+        "pieced.ch/zitadel-org-id": tenantRequest.zitadelOrgId,
+      }
+    );
+
+    // Update request status
+    const updated = await updateTenantRequestStatus(id, "provisioning", {
+      adminNotes,
+      tenantName,
+    });
+
+    return NextResponse.json({
+      message: "Tenant approved and provisioning started.",
+      request: updated,
+      tenantName,
+    });
+  } catch (e: any) {
+    console.error("Failed to create tenant:", e);
+    return NextResponse.json(
+      { error: `Failed to create tenant: ${e.message}` },
+      { status: 500 }
+    );
+  }
+}

src/app/api/admin/requests/[id]/reject/route.ts

@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+import { requirePlatformRole } from "@/lib/session";
+import { getTenantRequestById, updateTenantRequestStatus } from "@/lib/db";
+
+/**
+ * POST /api/admin/requests/[id]/reject
+ * Reject a tenant request.
+ */
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    await requirePlatformRole();
+  } catch {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const { id } = await params;
+  const body = await request.json().catch(() => ({}));
+  const adminNotes = body.adminNotes as string | undefined;
+
+  const tenantRequest = await getTenantRequestById(id);
+  if (!tenantRequest) {
+    return NextResponse.json({ error: "Request not found" }, { status: 404 });
+  }
+
+  if (tenantRequest.status !== "pending") {
+    return NextResponse.json(
+      { error: `Request is already ${tenantRequest.status}` },
+      { status: 400 }
+    );
+  }
+
+  const updated = await updateTenantRequestStatus(id, "rejected", {
+    adminNotes,
+  });
+
+  return NextResponse.json({
+    message: "Request rejected.",
+    request: updated,
+  });
+}

src/app/api/admin/requests/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from "next/server";
+import { requirePlatformRole } from "@/lib/session";
+import { listTenantRequests } from "@/lib/db";
+
+/**
+ * GET /api/admin/requests
+ * List all tenant requests. Optionally filter by ?status=pending
+ */
+export async function GET(request: Request) {
+  try {
+    await requirePlatformRole();
+  } catch {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const { searchParams } = new URL(request.url);
+  const status = searchParams.get("status") as any;
+
+  const requests = await listTenantRequests(status || undefined);
+  return NextResponse.json(requests);
+}

src/app/api/onboarding/route.ts

@@ -0,0 +1,145 @@
+import { NextResponse } from "next/server";
+import { getSessionUser } from "@/lib/session";
+import {
+  createTenantRequest,
+  getTenantRequestByOrgId,
+} from "@/lib/db";
+import { getTenant, listTenants } from "@/lib/k8s";
+import type { OnboardingInput } from "@/types";
+import { z } from "zod";
+
+const onboardingSchema = z.object({
+  agentName: z.string().min(1).max(50),
+  soulMd: z.string().max(10_000).optional(),
+  packages: z.array(z.string()).optional(),
+  billingAddress: z.object({
+    company: z.string().optional(),
+    street: z.string().optional(),
+    city: z.string().optional(),
+    postalCode: z.string().optional(),
+    country: z.string().optional(),
+  }),
+  billingNotes: z.string().max(2000).optional(),
+});
+
+/**
+ * GET /api/onboarding
+ * Returns the current onboarding status for the logged-in user's org.
+ * Used by the wizard/provisioning UI to poll state.
+ */
+export async function GET() {
+  const user = await getSessionUser();
+  if (!user)
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  // Check if tenant already exists
+  const allTenants = await listTenants();
+  const myTenant = allTenants.find(
+    (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
+  );
+
+  if (myTenant) {
+    return NextResponse.json({
+      state: "provisioned",
+      tenant: {
+        name: myTenant.metadata.name,
+        phase: myTenant.status?.phase ?? "Pending",
+        message: myTenant.status?.message,
+        conditions: myTenant.status?.conditions,
+      },
+    });
+  }
+
+  // Check if there's a pending request
+  const request = await getTenantRequestByOrgId(user.orgId);
+
+  if (!request) {
+    return NextResponse.json({ state: "no_request" });
+  }
+
+  // If approved and tenant_name set, check provisioning status
+  if (
+    request.status === "provisioning" &&
+    request.tenantName
+  ) {
+    const tenant = await getTenant(request.tenantName);
+    if (tenant) {
+      return NextResponse.json({
+        state: "provisioning",
+        request,
+        tenant: {
+          name: tenant.metadata.name,
+          phase: tenant.status?.phase ?? "Pending",
+          message: tenant.status?.message,
+          conditions: tenant.status?.conditions,
+        },
+      });
+    }
+  }
+
+  return NextResponse.json({
+    state: request.status,
+    request,
+  });
+}
+
+/**
+ * POST /api/onboarding
+ * Submit the onboarding wizard. Creates a tenant_request with status "pending".
+ * The actual PiecedTenant CR is NOT created yet — admin approval required.
+ */
+export async function POST(request: Request) {
+  const user = await getSessionUser();
+  if (!user)
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  // Check for existing request
+  const existing = await getTenantRequestByOrgId(user.orgId);
+  if (existing) {
+    return NextResponse.json(
+      { error: "Onboarding request already submitted.", request: existing },
+      { status: 409 }
+    );
+  }
+
+  // Check for existing tenant
+  const allTenants = await listTenants();
+  const myTenant = allTenants.find(
+    (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
+  );
+  if (myTenant) {
+    return NextResponse.json(
+      { error: "Tenant already exists." },
+      { status: 409 }
+    );
+  }
+
+  const body = await request.json();
+  const parsed = onboardingSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Validation failed", details: parsed.error.flatten() },
+      { status: 400 }
+    );
+  }
+
+  const input: OnboardingInput = parsed.data;
+
+  const tenantRequest = await createTenantRequest({
+    zitadelOrgId: user.orgId,
+    zitadelUserId: user.id,
+    companyName: user.orgName,
+    contactName: user.name || user.email,
+    contactEmail: user.email,
+    agentName: input.agentName,
+    soulMd: input.soulMd,
+    packages: input.packages ?? [],
+    billingAddress: input.billingAddress,
+    billingNotes: input.billingNotes,
+  });
+
+  return NextResponse.json(
+    { message: "Onboarding request submitted.", request: tenantRequest },
+    { status: 201 }
+  );
+}

src/app/api/register/route.ts

@@ -0,0 +1,70 @@
+import { NextResponse } from "next/server";
+import { registerCustomer } from "@/lib/zitadel";
+import type { RegistrationInput } from "@/types";
+import { z } from "zod";
+
+const registrationSchema = z.object({
+  companyName: z.string().min(2).max(100),
+  givenName: z.string().min(1).max(100),
+  familyName: z.string().min(1).max(100),
+  email: z.string().email(),
+  preferredLanguage: z.enum(["en", "de", "fr", "it"]).optional(),
+});
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const parsed = registrationSchema.safeParse(body);
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        { error: "Validation failed", details: parsed.error.flatten() },
+        { status: 400 }
+      );
+    }
+
+    const input: RegistrationInput = parsed.data;
+
+    const result = await registerCustomer({
+      companyName: input.companyName,
+      email: input.email,
+      givenName: input.givenName,
+      familyName: input.familyName,
+      preferredLanguage: input.preferredLanguage,
+    });
+
+    return NextResponse.json(
+      {
+        orgId: result.orgId,
+        userId: result.userId,
+        message: "Registration successful. You will receive an invitation email to set your password.",
+      },
+      { status: 201 }
+    );
+  } catch (e: any) {
+    console.error("Registration failed:", e);
+
+    const zitadelMessage = extractZitadelMessage(e.message);
+
+    return NextResponse.json(
+      { error: zitadelMessage || "Registration failed. Please try again." },
+      { status: e.statusCode || 500 }
+    );
+  }
+}
+
+/**
+ * ZITADEL errors come as:
+ *   "ZITADEL POST /path: 400 {"code":3, "message":"..."}"
+ * Extract the human-readable "message" field.
+ */
+function extractZitadelMessage(errorMsg: string): string | null {
+  try {
+    const jsonStart = errorMsg.indexOf("{");
+    if (jsonStart === -1) return null;
+    const json = JSON.parse(errorMsg.slice(jsonStart));
+    return json.message || null;
+  } catch {
+    return null;
+  }
+}