Group C fixes

scripts/zitadel-roles.mjs

@@ -0,0 +1,506 @@
+#!/usr/bin/env node
+/**
+ * zitadel-roles.mjs — diagnose and repair the OpenClaw Platform project's
+ * role keys + customer authorizations. Group A of the bug triage.
+ *
+ * Subcommands
+ * -----------
+ *   diagnose             Print the project's current roles and a raw dump
+ *                        of all authorizations granted on the project.
+ *                        Read-only. Safe to run any time.
+ *
+ *   apply                Idempotently create the four canonical role keys
+ *                        (owner, user, platform_admin, platform_operator)
+ *                        if they are missing. Existing roles are left as
+ *                        they are; legacy keys (e.g. "customer") are NOT
+ *                        deleted by this command — see `migrate-auth`.
+ *
+ *   migrate-auth <user>  Drop every authorization the given user holds
+ *                        on the project and replace with a single
+ *                        authorization carrying ["owner"]. Use after
+ *                        `apply` to promote a legacy customer to the
+ *                        new role keys. Idempotent.
+ *
+ *   migrate-grants       Ensure every existing project grant on the
+ *                        OpenClaw Platform project includes both
+ *                        `owner` and `user` role keys. Without `user`
+ *                        in the grant, `CreateAuthorization` for an
+ *                        invited member returns Errors.Project.Role.NotFound
+ *                        (Bug 21). Idempotent: grants already containing
+ *                        both keys are skipped.
+ *
+ * Env vars (loaded from .env if you run with `node --env-file=.env`):
+ *   ZITADEL_ISSUER       e.g. https://auth.pieced.ch
+ *   ZITADEL_SA_PAT       PAT for pieced-sa (IAM_OWNER)
+ *   ZITADEL_PROJECT_ID   e.g. 367435120493199793
+ *
+ * Examples
+ * --------
+ *   node --env-file=.env scripts/zitadel-roles.mjs diagnose
+ *   node --env-file=.env scripts/zitadel-roles.mjs apply
+ *   node --env-file=.env scripts/zitadel-roles.mjs migrate-auth 12345...
+ *
+ * The script does not import from src/ on purpose — it must be runnable
+ * even when the portal can't start (which is the failure mode we're
+ * here to repair).
+ */
+
+const ISSUER = process.env.ZITADEL_ISSUER;
+const PAT = process.env.ZITADEL_SA_PAT;
+const PROJECT_ID = process.env.ZITADEL_PROJECT_ID;
+
+if (!ISSUER || !PAT || !PROJECT_ID) {
+  console.error(
+    "Missing env. Need ZITADEL_ISSUER, ZITADEL_SA_PAT, ZITADEL_PROJECT_ID."
+  );
+  console.error("Run with: node --env-file=.env scripts/zitadel-roles.mjs ...");
+  process.exit(2);
+}
+
+// Canonical role set — must match types/index.ts (CustomerRole + PlatformRole).
+const CANONICAL = [
+  { key: "owner", displayName: "Customer Owner", group: "Customer" },
+  { key: "user", displayName: "Customer User", group: "Customer" },
+  { key: "platform_admin", displayName: "Platform Admin", group: "Platform" },
+  {
+    key: "platform_operator",
+    displayName: "Platform Operator",
+    group: "Platform",
+  },
+];
+
+// ---------------------------------------------------------------------------
+// HTTP plumbing — Connect RPC against ZITADEL v2 services.
+// ---------------------------------------------------------------------------
+
+async function rpc(service, method, body) {
+  const url = `${ISSUER}/${service}/${method}`;
+  const res = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      Authorization: `Bearer ${PAT}`,
+      "Connect-Protocol-Version": "1",
+    },
+    body: JSON.stringify(body),
+  });
+  const text = await res.text();
+  if (!res.ok) {
+    const err = new Error(`${service}/${method} -> ${res.status}: ${text}`);
+    err.status = res.status;
+    err.body = text;
+    throw err;
+  }
+  return text ? JSON.parse(text) : {};
+}
+
+const projectSvc = "zitadel.project.v2.ProjectService";
+const authSvc = "zitadel.authorization.v2.AuthorizationService";
+
+async function listProjectRoles() {
+  const data = await rpc(projectSvc, "ListProjectRoles", {
+    projectId: PROJECT_ID,
+  });
+  return Array.isArray(data?.projectRoles) ? data.projectRoles : [];
+}
+
+async function addProjectRole(roleKey, displayName, group) {
+  return rpc(projectSvc, "AddProjectRole", {
+    projectId: PROJECT_ID,
+    roleKey,
+    displayName,
+    ...(group ? { group } : {}),
+  });
+}
+
+/**
+ * The Connect RPC filter shape for ListAuthorizations is a oneof variant
+ * map — each filter has a discriminator key matching one of the variants
+ * documented as `authorization_ids|in_user_ids|organization_id|project_id|
+ * role_key|...`. Different ZITADEL services and versions differ on the
+ * exact wrapper naming (e.g. `projectId` vs `projectIdFilter`) and on
+ * whether ID values are bare strings or wrapped in `{ id: "..." }`.
+ *
+ * Rather than guess, we probe candidate shapes until ZITADEL accepts one.
+ * The winner tells us exactly what to bake into `lib/zitadel.ts`. Each
+ * candidate is labelled so the diagnostic output makes the right choice
+ * obvious.
+ */
+const FILTER_CANDIDATES = [
+  // No filter at all — ZITADEL returns whatever the SA can see. Slowest
+  // but always works; useful as a control.
+  {
+    label: "no-filter",
+    build: () => ({}),
+  },
+  // Pattern from discussion #8831 (roleKey -> key+method). Plausible
+  // generalisation: project_id -> projectId.id
+  {
+    label: "projectId.id",
+    build: (projectId) => ({ filters: [{ projectId: { id: projectId } }] }),
+  },
+  // Pattern from ProjectService.ListProjects (organizationIdFilter -> organizationId).
+  {
+    label: "projectIdFilter.id",
+    build: (projectId) => ({
+      filters: [{ projectIdFilter: { id: projectId } }],
+    }),
+  },
+  // Same family but with the value field named after the filter, like the
+  // user search API uses (`organizationIdQuery: { organizationId: "..." }`).
+  {
+    label: "projectIdFilter.projectId",
+    build: (projectId) => ({
+      filters: [{ projectIdFilter: { projectId } }],
+    }),
+  },
+  // Bare-string variant — just in case.
+  {
+    label: "projectId (bare string)",
+    build: (projectId) => ({ filters: [{ projectId }] }),
+  },
+];
+
+const USER_FILTER_CANDIDATES = [
+  { label: "userId.id", key: "userId", build: (id) => ({ id }) },
+  { label: "userIdFilter.id", key: "userIdFilter", build: (id) => ({ id }) },
+  { label: "userIdFilter.userId", key: "userIdFilter", build: (id) => ({ userId: id }) },
+];
+
+/**
+ * Try every candidate; return on the first one that returns 200. Logs each
+ * attempt so a reader can see which shape won.
+ */
+async function probeListAuthorizations(extraFilters = []) {
+  for (const c of FILTER_CANDIDATES) {
+    const body = c.build(PROJECT_ID);
+    if (extraFilters.length > 0) {
+      body.filters = (body.filters || []).concat(extraFilters);
+    }
+    body.pagination = { limit: 500 };
+    try {
+      const data = await rpc(authSvc, "ListAuthorizations", body);
+      const count = Array.isArray(data?.authorizations)
+        ? data.authorizations.length
+        : 0;
+      console.log(`  OK   ${c.label.padEnd(28)} -> ${count} authorization(s)`);
+      return { label: c.label, body, data };
+    } catch (err) {
+      const oneLine = String(err.body || err.message)
+        .replace(/\s+/g, " ")
+        .slice(0, 110);
+      console.log(`  FAIL ${c.label.padEnd(28)} -> ${oneLine}`);
+    }
+  }
+  return null;
+}
+
+async function listUserAuthorizations(userId) {
+  // Use the same project-filter shape that won the probe, plus a user-id
+  // filter probed independently.
+  const probed = await probeListAuthorizations();
+  if (!probed) throw new Error("No filter shape accepted by ZITADEL");
+
+  for (const u of USER_FILTER_CANDIDATES) {
+    const body = JSON.parse(JSON.stringify(probed.body));
+    body.filters = (body.filters || []).concat([
+      { [u.key]: u.build(userId) },
+    ]);
+    try {
+      const data = await rpc(authSvc, "ListAuthorizations", body);
+      console.log(`  user filter ${u.label} accepted.`);
+      return data;
+    } catch (err) {
+      // Try next.
+    }
+  }
+  // Fallback: return all and filter client-side from the user dump.
+  return probed.data;
+}
+
+async function deleteAuthorization(authorizationId) {
+  return rpc(authSvc, "DeleteAuthorization", { id: authorizationId });
+}
+
+async function createAuthorization(userId, organizationId, roleKeys) {
+  return rpc(authSvc, "CreateAuthorization", {
+    userId,
+    projectId: PROJECT_ID,
+    organizationId,
+    roleKeys,
+  });
+}
+
+async function listProjectGrants() {
+  // Same approach as authorizations: skip server-side filters, narrow
+  // client-side by projectId. Pilot scale; cheap.
+  const data = await rpc(projectSvc, "ListProjectGrants", {
+    pagination: { limit: 500 },
+  });
+  const all = Array.isArray(data?.projectGrants) ? data.projectGrants : [];
+  return all.filter((g) => g?.projectId === PROJECT_ID);
+}
+
+async function updateProjectGrant(grantedOrganizationId, roleKeys) {
+  return rpc(projectSvc, "UpdateProjectGrant", {
+    projectId: PROJECT_ID,
+    grantedOrganizationId,
+    roleKeys,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Subcommands
+// ---------------------------------------------------------------------------
+
+async function diagnose() {
+  console.log(`Project: ${PROJECT_ID}`);
+  console.log(`Issuer:  ${ISSUER}\n`);
+
+  console.log("--- Project roles ---");
+  const roles = await listProjectRoles();
+  if (roles.length === 0) {
+    console.log("  (none)");
+  } else {
+    for (const r of roles) {
+      console.log(`  key=${r.key.padEnd(20)} displayName=${r.displayName ?? ""}  group=${r.group ?? ""}`);
+    }
+  }
+
+  const present = new Set(roles.map((r) => r.key));
+  const missing = CANONICAL.filter((c) => !present.has(c.key));
+  const legacy = roles.filter((r) => !CANONICAL.some((c) => c.key === r.key));
+
+  console.log("\n--- Canonical key check ---");
+  for (const c of CANONICAL) {
+    console.log(`  ${present.has(c.key) ? "OK  " : "MISS"} ${c.key}`);
+  }
+  if (legacy.length > 0) {
+    console.log("\n  Non-canonical keys still on the project:");
+    for (const r of legacy) console.log(`    ${r.key}`);
+    console.log("  (consider migrating any authorizations off these.)");
+  }
+
+  console.log("\n--- Authorizations on project (probing filter shape) ---");
+  const probed = await probeListAuthorizations();
+  if (!probed) {
+    console.log(
+      "\nNo filter shape was accepted. Cannot enumerate authorizations."
+    );
+    process.exitCode = 1;
+    return;
+  }
+  console.log(`\nWinning filter shape: ${probed.label}`);
+  console.log("Raw response (first 2 entries):");
+  const trimmed = {
+    ...probed.data,
+    authorizations: (probed.data.authorizations || []).slice(0, 2),
+  };
+  console.log(JSON.stringify(trimmed, null, 2));
+
+  // Parsed view — what `lib/zitadel.ts::listOrgAuthorizations` SHOULD return
+  // once the parser is fixed. Useful for confirming the response field
+  // names without wading through the raw blob.
+  const auths = probed.data.authorizations || [];
+  console.log(`\nParsed (${auths.length} authorization(s)):`);
+  for (const a of auths) {
+    const userId = a.user?.id ?? "?";
+    const userName = a.user?.displayName ?? a.user?.preferredLoginName ?? "";
+    const orgId = a.organization?.id ?? "?";
+    const orgName = a.organization?.name ?? "";
+    const roleKeys = Array.isArray(a.roles)
+      ? a.roles.map((r) => r.key).join(",")
+      : "(none)";
+    console.log(
+      `  ${a.id?.slice(0, 12) ?? "?"}…  user=${userName} (${userId.slice(0, 10)}…)  org=${orgName}  roles=[${roleKeys}]`
+    );
+  }
+
+  if (missing.length > 0) {
+    console.log(
+      `\nNext step: run \`apply\` to create ${missing.length} missing role(s).`
+    );
+    process.exitCode = 1;
+  } else {
+    console.log("\nAll canonical roles present.");
+  }
+}
+
+async function apply() {
+  const existing = await listProjectRoles();
+  const present = new Set(existing.map((r) => r.key));
+
+  let created = 0;
+  for (const c of CANONICAL) {
+    if (present.has(c.key)) {
+      console.log(`SKIP  ${c.key} (already exists)`);
+      continue;
+    }
+    try {
+      await addProjectRole(c.key, c.displayName, c.group);
+      console.log(`ADD   ${c.key}`);
+      created++;
+    } catch (err) {
+      // ZITADEL returns AlreadyExists if a role with the same key was
+      // created in a race; treat as success so the script stays idempotent.
+      if (
+        err.body &&
+        /already.*exist/i.test(err.body)
+      ) {
+        console.log(`SKIP  ${c.key} (already exists, race)`);
+        continue;
+      }
+      console.error(`FAIL  ${c.key}: ${err.message}`);
+      throw err;
+    }
+  }
+
+  console.log(`\nDone. ${created} role(s) created.`);
+}
+
+async function migrateAuth(userId) {
+  if (!userId) {
+    console.error("Usage: migrate-auth <userId>");
+    process.exit(2);
+  }
+
+  // Verify owner role exists before we touch anything; otherwise we'd
+  // delete authorizations and fail to recreate them.
+  const roles = await listProjectRoles();
+  if (!roles.some((r) => r.key === "owner")) {
+    console.error("Project has no `owner` role. Run `apply` first.");
+    process.exit(1);
+  }
+
+  console.log(`Listing authorizations for user ${userId} on project ${PROJECT_ID}...`);
+  const auths = await listUserAuthorizations(userId);
+  const list = Array.isArray(auths?.authorizations) ? auths.authorizations : [];
+  // Filter client-side to the requested user, in case the user filter probe
+  // didn't narrow things down.
+  const userAuths = list.filter((a) => a.user?.id === userId);
+
+  if (userAuths.length === 0) {
+    console.log("No existing authorizations found. Cannot infer organizationId.");
+    console.log("Pass it explicitly via the env: ORG_ID=... or use the portal flow.");
+    process.exit(1);
+  }
+
+  // Pick the organizationId from any of the existing authorizations — it
+  // should be the same across all of them for a single user/project pair.
+  const orgIds = [...new Set(userAuths.map((a) => a.organization?.id).filter(Boolean))];
+  if (orgIds.length !== 1) {
+    console.error(`Expected exactly 1 organizationId, got ${orgIds.length}: ${orgIds.join(", ")}`);
+    process.exit(1);
+  }
+  const orgId = orgIds[0];
+
+  console.log(`Found ${userAuths.length} authorization(s) in org ${orgId}:`);
+  for (const a of userAuths) {
+    const id = a.id ?? "?";
+    const keys = Array.isArray(a.roles) ? a.roles.map((r) => r.key).join(",") : "(none)";
+    console.log(`  ${id}  roles=[${keys}]`);
+  }
+
+  // Already correct?
+  if (
+    userAuths.length === 1 &&
+    Array.isArray(userAuths[0].roles) &&
+    userAuths[0].roles.length === 1 &&
+    userAuths[0].roles[0].key === "owner"
+  ) {
+    console.log("Already correct — no changes needed.");
+    return;
+  }
+
+  console.log("\nDeleting existing authorizations...");
+  for (const a of userAuths) {
+    if (!a.id) continue;
+    await deleteAuthorization(a.id);
+    console.log(`  deleted ${a.id}`);
+  }
+
+  console.log("Creating fresh owner authorization...");
+  const created = await createAuthorization(userId, orgId, ["owner"]);
+  console.log(`  created ${JSON.stringify(created)}`);
+  console.log("Done.");
+}
+
+async function migrateGrants() {
+  // Ensure every existing project grant for the OpenClaw Platform project
+  // includes the `user` role alongside `owner`. Without `user` in the
+  // grant, the granted org cannot invite members in `user` role —
+  // `CreateAuthorization` returns `Errors.Project.Role.NotFound`.
+  //
+  // Idempotent: grants already containing both keys are skipped.
+  // Per UpdateProjectGrant docs, `roleKeys` is REPLACE not MERGE — we
+  // re-send the full desired set every time.
+  const desired = ["owner", "user"];
+  const grants = await listProjectGrants();
+
+  if (grants.length === 0) {
+    console.log("No project grants found on this project.");
+    return;
+  }
+
+  console.log(`Found ${grants.length} grant(s) on project ${PROJECT_ID}:`);
+  for (const g of grants) {
+    const current = Array.isArray(g.grantedRoleKeys)
+      ? g.grantedRoleKeys
+      : [];
+    const hasAll = desired.every((k) => current.includes(k));
+    const action = hasAll ? "SKIP" : "FIX ";
+    console.log(
+      `  ${action} ${g.grantedOrganizationName.padEnd(30)} current=[${current.join(",")}]`
+    );
+  }
+
+  let fixed = 0;
+  for (const g of grants) {
+    const current = Array.isArray(g.grantedRoleKeys)
+      ? g.grantedRoleKeys
+      : [];
+    if (desired.every((k) => current.includes(k))) continue;
+    // Preserve any extra roles the grant already has on top of the
+    // desired set (e.g. someone manually added `viewer` for a special
+    // case). Set semantics: union.
+    const merged = [...new Set([...current, ...desired])];
+    try {
+      await updateProjectGrant(g.grantedOrganizationId, merged);
+      console.log(
+        `  updated ${g.grantedOrganizationName} -> [${merged.join(",")}]`
+      );
+      fixed++;
+    } catch (err) {
+      console.error(
+        `  FAIL  ${g.grantedOrganizationName}: ${err.message}`
+      );
+      throw err;
+    }
+  }
+
+  console.log(`\nDone. ${fixed} grant(s) updated.`);
+}
+
+const [, , cmd, ...rest] = process.argv;
+
+const commands = {
+  diagnose,
+  apply,
+  "migrate-auth": () => migrateAuth(rest[0]),
+  "migrate-grants": migrateGrants,
+};
+
+const fn = commands[cmd];
+if (!fn) {
+  console.error(
+    "Usage: zitadel-roles.mjs <diagnose|apply|migrate-auth <userId>|migrate-grants>"
+  );
+  process.exit(2);
+}
+
+fn().catch((err) => {
+  console.error(err.message ?? err);
+  if (err.body) console.error("body:", err.body);
+  process.exit(1);
+});

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

@@ -2,7 +2,10 @@ import { getSessionUser, canMutate } from "@/lib/session";
 import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { OnboardingFlow } from "@/components/onboarding/onboarding-flow";
-import Link from "next/link";
+import { BackLink } from "@/components/ui/back-link";
+import { listTenants } from "@/lib/k8s";
+import { listActiveTenantRequestsByOrgId } from "@/lib/db";
+import { personalAccountAtCapacity } from "@/lib/personal-org";
 
 /**
  * /dashboard/new — wizard for creating an additional instance for an
@@ -21,6 +24,10 @@ import Link from "next/link";
  * may create new instances. The server-side POST handler enforces the
  * same; this redirect is purely UX so /user-role members don't land on
  * a wizard that will 403 on submit.
+ *
+ * Bug 5: personal accounts that already hold a tenant or have one
+ * in-flight are sent back to the dashboard with the same UX rationale.
+ * Matching API guard lives in `/api/onboarding`.
  */
 export default async function NewInstancePage() {
   const user = await getSessionUser();
@@ -28,17 +35,31 @@ export default async function NewInstancePage() {
   if (user.isPlatform) redirect("/dashboard");
   if (!canMutate(user)) redirect("/dashboard");
 
+  if (user.isPersonal) {
+    const [allTenants, activeRequests] = await Promise.all([
+      listTenants(),
+      listActiveTenantRequestsByOrgId(user.orgId),
+    ]);
+    const ownTenants = allTenants.filter(
+      (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
+    );
+    if (
+      personalAccountAtCapacity(
+        user.isPersonal,
+        ownTenants.length,
+        activeRequests.length
+      )
+    ) {
+      redirect("/dashboard");
+    }
+  }
+
   const t = await getTranslations("dashboard");
 
   return (
     <div>
       <div className="mb-8 animate-in">
-        <Link
+        <BackLink href="/dashboard" label={t("title")} />
-          href="/dashboard"
-          className="inline-flex items-center gap-1.5 mb-4 text-xs font-medium text-text-muted hover:text-text-primary transition-colors"
-        >
-          <span>←</span> {t("title")}
-        </Link>
         <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
           {t("createInstance")}
         </h1>
@@ -48,7 +69,11 @@ export default async function NewInstancePage() {
       </div>
 
       <div className="animate-in animate-in-delay-1">
-        <OnboardingFlow orgName={user.orgName} />
+        <OnboardingFlow
+          orgName={user.orgName}
+          userName={user.name}
+          userEmail={user.email}
+        />
       </div>
     </div>
   );

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

@@ -8,6 +8,7 @@ import {
   canSeeInflightRequests,
   isUserScoped,
 } from "@/lib/visibility";
+import { personalAccountAtCapacity } from "@/lib/personal-org";
 import { Card, CardHeader } from "@/components/ui/card";
 import { StatusBadge } from "@/components/ui/status-badge";
 import { OnboardingFlow } from "@/components/onboarding/onboarding-flow";
@@ -179,7 +180,17 @@ export default async function DashboardPage() {
   // the admin panel anyway) see the "Create new instance" link. A
   // `user`-role member sees the dashboard but not the create flow —
   // they need to ask an owner.
-  const canCreate = canMutate(user);
+  //
+  // Bug 5: personal accounts are 1-instance by design. Once a personal
+  // account has either an active tenant OR an in-flight request, the
+  // create button must disappear. The matching server-side guard is
+  // in `/api/onboarding` so direct POSTs are also rejected.
+  const personalAtCapacity = personalAccountAtCapacity(
+    user.isPersonal,
+    orgScopedTenants.length,
+    inflightRequests.length
+  );
+  const canCreate = canMutate(user) && !personalAtCapacity;
 
   // First-time / no-visibility branch.
   //
@@ -262,7 +273,11 @@ export default async function DashboardPage() {
         </div>
 
         <div className="animate-in animate-in-delay-1">
-          <OnboardingFlow orgName={user.orgName} />
+          <OnboardingFlow
+            orgName={user.orgName}
+            userName={user.name}
+            userEmail={user.email}
+          />
         </div>
       </div>
     );

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

@@ -6,42 +6,66 @@ import { useRouter } from "next/navigation";
 import { Card } from "@/components/ui/card";
 
 type FormState = "idle" | "submitting" | "success" | "error";
+type AccountType = "personal" | "company";
 
 /**
- * Slice 4: a "Register as individual" toggle distinguishes personal
+ * Registration entry — Bug 1 redesign.
- * accounts from company registrations. When the toggle is on:
+ *
- *   - the company name field is hidden (and not sent)
+ * Previously a hidden checkbox ("Register as an individual") sat on top
- *   - the server skips the duplicate-domain check
+ * of the company-flavoured form, which buried personal accounts under a
- *   - the ZITADEL org is named "{givenName} {familyName} (Personal)"
+ * single click that most users miss. The new layout puts a primary
+ * account-type chooser at the top: two large cards, one for Personal,
+ * one for Company. Selection is required before the form below
+ * appears, so the rest of the layout adapts cleanly without a
+ * collapsing-checkbox feel.
+ *
+ * Bug 12: per-field validation runs on submit. The native HTML required
+ * attribute already blocks empty submits at the browser level; the
+ * server-side Zod schema in `/api/register` is the authoritative
+ * second line of defence.
+ *
+ * Behaviour:
+ *   - "Personal account": company-name field is hidden; on submit, the
+ *     server generates an opaque `personal-{8hex}` org name (Bug 9).
+ *   - "Company account": company-name field is required; the server
+ *     additionally runs the duplicate-domain check.
+ *   - Returning users (those who arrive here by accident) can switch
+ *     types after picking — the choice cards stay clickable above the
+ *     form. Field state is preserved across switches so they don't
+ *     have to re-type their name.
  */
 export default function RegisterPage() {
   const t = useTranslations("register");
   const tCommon = useTranslations("common");
   const router = useRouter();
 
+  const [accountType, setAccountType] = useState<AccountType | null>(null);
+
   const [form, setForm] = useState({
     companyName: "",
     givenName: "",
     familyName: "",
     email: "",
   });
-  const [isPersonal, setIsPersonal] = useState(false);
   const [state, setState] = useState<FormState>("idle");
   const [error, setError] = useState("");
 
+  const isPersonal = accountType === "personal";
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (!accountType) return; // Should be impossible — submit button is gated
     setError("");
     setState("submitting");
 
     try {
       // Build the request body explicitly. For personals we omit
-      // companyName so the server knows to derive the org name from
+      // companyName so the server generates an opaque ZITADEL org name
-      // the user's full name. The Zod schema accepts the omission.
+      // (`personal-{8hex}`); the Zod schema accepts the omission.
       const body: Record<string, unknown> = {
         givenName: form.givenName,
         familyName: form.familyName,
@@ -60,9 +84,6 @@ export default function RegisterPage() {
 
       if (!res.ok) {
         const data = await res.json();
-        // Localize known structured codes; fall back to server-supplied
-        // English message for everything else (validation, ZITADEL errors,
-        // generic 500s).
         if (data.code === "duplicate_domain" && data.domain) {
           throw new Error(t("duplicateDomain", { domain: data.domain }));
         }
@@ -118,27 +139,65 @@ export default function RegisterPage() {
           <p className="text-sm text-text-secondary">{t("subtitle")}</p>
         </div>
 
-        <Card className="animate-in animate-in-delay-1">
+        {/* Account type chooser — required first step */}
-          <form onSubmit={handleSubmit} className="space-y-4">
+        <div
-            {/* Personal-account toggle */}
+          role="radiogroup"
-            <label className="flex items-start gap-3 cursor-pointer select-none p-3 rounded-lg border border-border bg-surface-2 hover:border-accent/40 transition-colors">
+          aria-label={t("accountTypeLabel")}
-              <input
+          className="grid grid-cols-2 gap-3 mb-6 animate-in animate-in-delay-1"
-                type="checkbox"
+        >
-                checked={isPersonal}
+          <AccountTypeCard
-                onChange={(e) => setIsPersonal(e.target.checked)}
+            selected={accountType === "personal"}
-                className="mt-0.5 h-4 w-4 rounded border-border bg-surface-1 text-accent focus:ring-1 focus:ring-accent focus:ring-offset-0"
+            onClick={() => setAccountType("personal")}
+            label={t("personalCardTitle")}
+            description={t("personalCardDescription")}
+            icon={
+              <svg
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={1.5}
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                />
+              </svg>
+            }
+          />
+          <AccountTypeCard
+            selected={accountType === "company"}
+            onClick={() => setAccountType("company")}
+            label={t("companyCardTitle")}
+            description={t("companyCardDescription")}
+            icon={
+              <svg
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={1.5}
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M3 21V7l9-4 9 4v14M9 21V11h6v10M5 21h14"
+                />
+              </svg>
+            }
           />
-              <div className="flex-1 min-w-0">
-                <div className="text-sm font-medium text-text-primary">
-                  {t("individualToggle")}
         </div>
-                <div className="text-xs text-text-muted mt-0.5">
-                  {t("individualHint")}
-                </div>
-              </div>
-            </label>
 
-            {/* Company name — hidden for personal */}
+        {/* Form — only shown after a choice is made. Animation
+            delay-2 lines up with the cards animating in first, so
+            the form feels like it appears in response to selection. */}
+        {accountType && (
+          <Card className="animate-in animate-in-delay-2">
+            <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+              {/* Company name — only for company accounts (Bug 2 mirror) */}
               {!isPersonal && (
                 <div>
                   <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
@@ -227,11 +286,65 @@ export default function RegisterPage() {
               </a>
             </p>
           </Card>
+        )}
 
-        <p className="text-xs text-text-muted text-center mt-6 animate-in animate-in-delay-2">
+        <p className="text-xs text-text-muted text-center mt-6 animate-in animate-in-delay-3">
           {t("footer")}
         </p>
       </div>
     </div>
   );
 }
+
+/**
+ * Account-type radio card. Visually a card, semantically a radio: arrow
+ * keys move between cards, Space/Enter selects.
+ *
+ * Selected state is rendered with the accent ring + tinted background;
+ * unselected is the standard surface-2 with hover affordance. The icon
+ * and text colours intensify when selected to give a clear "this one
+ * is on" signal beyond just the border colour.
+ */
+function AccountTypeCard({
+  selected,
+  onClick,
+  label,
+  description,
+  icon,
+}: {
+  selected: boolean;
+  onClick: () => void;
+  label: string;
+  description: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      role="radio"
+      aria-checked={selected}
+      onClick={onClick}
+      className={`text-left rounded-xl border p-4 transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-accent/40 ${
+        selected
+          ? "border-accent bg-accent/10"
+          : "border-border bg-surface-2 hover:border-accent/40 hover:bg-surface-3/30"
+      }`}
+    >
+      <div
+        className={`mb-2 ${
+          selected ? "text-accent" : "text-text-muted"
+        }`}
+      >
+        {icon}
+      </div>
+      <div
+        className={`text-sm font-semibold mb-0.5 ${
+          selected ? "text-text-primary" : "text-text-primary"
+        }`}
+      >
+        {label}
+      </div>
+      <div className="text-xs text-text-muted leading-snug">{description}</div>
+    </button>
+  );
+}

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

@@ -1,11 +1,11 @@
-import { getSessionUser, canMutate } from "@/lib/session";
+import { getSessionUser, canMutate, isCustomerOwner } from "@/lib/session";
 import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { getOrgMembers } from "@/lib/team";
 import { Card } from "@/components/ui/card";
+import { BackLink } from "@/components/ui/back-link";
 import { TeamList } from "@/components/team/team-list";
 import { InviteForm } from "@/components/team/invite-form";
-import Link from "next/link";
 
 /**
  * /team — manage org members.
@@ -21,6 +21,12 @@ export default async function TeamPage() {
   const user = await getSessionUser();
   if (!user) redirect("/login");
   if (!canMutate(user)) redirect("/dashboard");
+  // Bug 8: personal accounts have no team to manage. The page is
+  // structurally meaningless and the invite form would create extra
+  // ZITADEL users in a single-user org. Redirect cleanly. The matching
+  // API guards in `/api/team` and `/api/team/invite` enforce the same
+  // rule on direct calls.
+  if (user.isPersonal) redirect("/dashboard");
 
   const t = await getTranslations("team");
   const tDashboard = await getTranslations("dashboard");
@@ -30,12 +36,7 @@ export default async function TeamPage() {
   return (
     <div>
       <div className="mb-8 animate-in">
-        <Link
+        <BackLink href="/dashboard" label={tDashboard("title")} />
-          href="/dashboard"
-          className="inline-flex items-center gap-1.5 mb-4 text-xs font-medium text-text-muted hover:text-text-primary transition-colors"
-        >
-          <span>←</span> {tDashboard("title")}
-        </Link>
         <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
           {t("title")}
         </h1>
@@ -58,7 +59,11 @@ export default async function TeamPage() {
             ({members.length})
           </span>
         </h2>
-        <TeamList initialMembers={members} currentUserId={user.id} />
+        <TeamList
+          initialMembers={members}
+          currentUserId={user.id}
+          canEditRoles={isCustomerOwner(user)}
+        />
       </section>
     </div>
   );

src/app/[locale]/tenants/[name]/page.tsx

@@ -40,6 +40,19 @@ export default async function TenantDetailPage({
   // the same page but with edit controls hidden / fields read-only.
   const canEdit = canMutate(user);
 
+  // Bug 7: assigned-users panel is meaningless for personal tenants
+  // (sole-owner by definition; the only "assignee" is the owner
+  // themselves). We hide the panel when EITHER the CR carries the
+  // `pieced.ch/personal=true` label (set at approve time for new
+  // personal tenants) OR the viewer is on a personal account (covers
+  // legacy tenants approved before the label was added; the customer
+  // sees their own personal tenant). Platform admins viewing a legacy
+  // unlabeled personal tenant are the only case where this falls
+  // through to "show panel" — operators can `kubectl label` to fix.
+  const isPersonalTenant =
+    tenant.metadata.labels?.["pieced.ch/personal"] === "true" ||
+    user.isPersonal;
+
   const enabledPackages = tenant.spec.packages || [];
   const workspaceFiles = tenant.spec.workspaceFiles || {};
   const enabledChannels = enabledPackages.filter((pkg) =>
@@ -132,13 +145,16 @@ export default async function TenantDetailPage({
 
       {/* Slice 7: Assigned users — visible to anyone who can see the
           tenant, editable only by owners/platform users. The component
-          fetches its own data so the page doesn't need to await. */}
+          fetches its own data so the page doesn't need to await.
+          Bug 7: hidden entirely for personal tenants. */}
+      {!isPersonalTenant && (
         <section className="mt-8 animate-in animate-in-delay-4">
           <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
             {t("assignedUsers")}
           </h2>
           <AssignedUsersPanel tenantName={name} canEdit={canEdit} />
         </section>
+      )}
     </div>
   );
 }

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

@@ -123,6 +123,15 @@ export async function POST(
       },
       {
         "pieced.ch/zitadel-org-id": tenantRequest.zitadelOrgId,
+        // Bug 7: stamp the personal flag on the CR so callers (notably
+        // the tenant detail page) can hide assignment-related UI
+        // without an extra DB join. Slice 4 already tracks this on the
+        // request row; the CR label is the same fact at the K8s layer.
+        // Legacy tenants approved before this change won't carry the
+        // label — operators can backfill with `kubectl label`.
+        ...(tenantRequest.isPersonal
+          ? { "pieced.ch/personal": "true" }
+          : {}),
       }
     );
 

src/app/api/onboarding/route.ts

@@ -16,34 +16,10 @@ import {
 import { sendAdminNotificationEmail } from "@/lib/email";
 import { encryptSecrets } from "@/lib/crypto";
 import { isPersonalOrgName } from "@/lib/personal-org";
+import { onboardingSchema } from "@/lib/validation";
 import type { OnboardingInput, PiecedTenant, TenantRequest } from "@/types";
 import { z } from "zod";
 
-const onboardingSchema = z.object({
-  instanceName: z
-    .string()
-    .trim()
-    .max(80)
-    .optional()
-    // Empty string from a form input → drop to undefined so the DB stores NULL
-    .transform((v) => (v && v.length > 0 ? v : undefined)),
-  agentName: z.string().min(1).max(50),
-  soulMd: z.string().max(10_000).optional(),
-  agentsMd: z.string().max(10_000).optional(),
-  packages: z.array(z.string()).optional(),
-  packageSecrets: z
-    .record(z.string(), z.record(z.string(), 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(2_000).optional(),
-});
-
 /**
  * Helper: shape a TenantRequest row for client consumption.
  * Hides server-only fields (encryptedSecrets, internal db ids).
@@ -217,6 +193,31 @@ export async function POST(request: Request) {
   // the org-name check should agree.)
   const isPersonal = prior?.isPersonal ?? isPersonalOrgName(user.orgName);
 
+  // Bug 5: personal accounts are 1-instance by design. If there's
+  // already an active tenant or an in-flight request for this user's
+  // org, reject the submission outright. Server-side only check;
+  // matching UI guards live on /dashboard (button hidden) and
+  // /dashboard/new (server-redirect to /dashboard).
+  if (isPersonal) {
+    const [allTenants, activeRequests] = await Promise.all([
+      listTenants(),
+      listActiveTenantRequestsByOrgId(user.orgId),
+    ]);
+    const ownTenants = allTenants.filter(
+      (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
+    );
+    if (ownTenants.length > 0 || activeRequests.length > 0) {
+      return NextResponse.json(
+        {
+          error:
+            "Personal accounts are limited to one instance. Cancel your existing request or contact support to change plan.",
+          code: "personal_account_at_capacity",
+        },
+        { status: 403 }
+      );
+    }
+  }
+
   // Encrypt package secrets if provided
   let encryptedSecrets: Buffer | undefined;
   if (input.packageSecrets && Object.keys(input.packageSecrets).length > 0) {

src/app/api/register/route.ts

@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { registerCustomer } from "@/lib/zitadel";
 import { rateLimit } from "@/lib/rate-limit";
 import { checkDuplicateDomain } from "@/lib/db";
+import { generatePersonalOrgName } from "@/lib/personal-org";
 import type { RegistrationInput } from "@/types";
 import { z } from "zod";
 
@@ -13,11 +14,10 @@ import { z } from "zod";
  * - `companyName` is no longer always required. It's required when
  *   `isPersonal` is false/absent, ignored when `isPersonal` is true.
  * - `isPersonal` flag distinguishes personal accounts. The server
- *   derives the ZITADEL org name from `${givenName} ${familyName}
+ *   derives the ZITADEL org name from a generated opaque ID
- *   (Personal)` for personals — the suffix is the canonical marker
+ *   (`personal-{8hex}`) — see `lib/personal-org.ts` for the format
- *   that downstream code (onboarding POST, admin views) uses to
+ *   spec. Customers cannot rename their own org, so the marker is
- *   distinguish personal orgs from companies. Customers cannot rename
+ *   stable.
- *   their own org, so the suffix is stable.
  * - Personal accounts skip the duplicate-domain check entirely. Their
  *   row is also excluded from future domain checks (see
  *   `lib/domain-check.ts::findDuplicateInDb`).
@@ -44,15 +44,6 @@ const registrationSchema = z
 const RATE_LIMIT = 3;
 const RATE_WINDOW_MS = 3_600_000; // 1 hour
 
-/**
- * Suffix appended to personal-account ZITADEL org names. Used here to
- * build the org name and elsewhere (session.orgName check) to detect
- * whether the current user is on a personal org.
- *
- * Keep this in sync with `isPersonalOrgName()` in `lib/personal-org.ts`.
- */
-const PERSONAL_ORG_SUFFIX = " (Personal)";
-
 export async function POST(request: NextRequest) {
   // --- Rate limiting ---
   const ip =
@@ -116,14 +107,13 @@ export async function POST(request: NextRequest) {
     //
     // For company: use the customer-supplied companyName (already
     //   validated to be present + ≥2 chars by the schema refinement).
-    // For personal: synthesise from full name + " (Personal)" suffix.
+    // For personal: a fresh opaque ID like "personal-3f2a8b1c". The
-    //   The suffix is the canonical marker for personal orgs.
+    //   user's actual display name is per-user (`session.user.name`),
-    //
+    //   so the GUI shows that instead — see `displayOrgNameFor()`.
-    // ZITADEL does NOT enforce org-name uniqueness, so two "Hans Müller
+    //   This keeps personal orgs collision-free (Bug 9: two people
-    // (Personal)" orgs can coexist; the org id is what matters for our
+    //   named "Eva Müller" both being able to register).
-    // labelling and lookups, the name is human-readable only.
     const orgName = isPersonal
-      ? `${input.givenName.trim()} ${input.familyName.trim()}${PERSONAL_ORG_SUFFIX}`
+      ? generatePersonalOrgName()
       : input.companyName!.trim();
 
     const result = await registerCustomer({

src/app/api/team/[userId]/role/route.ts

@@ -0,0 +1,154 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { getSessionUser, isCustomerOwner } from "@/lib/session";
+import { getOrgMembers, isValidInviteRole } from "@/lib/team";
+import { updateAuthorizationRoles } from "@/lib/zitadel";
+import { safeError } from "@/lib/errors";
+
+const patchSchema = z.object({
+  role: z.enum(["owner", "user"]),
+});
+
+/**
+ * PATCH /api/team/[userId]/role
+ *
+ * Change the role of an existing member of the caller's org.
+ *
+ * Body: { role: "owner" | "user" }
+ *
+ * Authorization
+ * -------------
+ * Customer-side: only an `owner` of the caller's org may change roles.
+ * `isCustomerOwner` is the right gate — `canMutate` would also accept
+ * platform users, but cross-org role mutation by platform staff
+ * belongs in ZITADEL Console with audited admin tooling, not here.
+ *
+ * Safety guards
+ * -------------
+ *   1. Self-demotion is blocked. An owner demoting themself to `user`
+ *      could lose access to /team and never come back. If the user
+ *      genuinely wants to step down they should promote a colleague to
+ *      `owner` first, then ask that colleague to demote them.
+ *   2. Last-owner demotion is blocked. Demoting the org's only owner
+ *      to `user` would lock the org out of all future role changes,
+ *      invites, and tenant requests. We count owners across the whole
+ *      member list and refuse if this change would leave zero.
+ *   3. The target must already have an authorization on the project.
+ *      A member without one — orphan, mid-invite race — has nothing
+ *      for `UpdateAuthorization` to update; we return a clear 409.
+ *
+ * The mutation itself is replace-not-merge: see
+ * `lib/zitadel.ts::updateAuthorizationRoles`. Passing `[role]` revokes
+ * any other roles the member happened to hold.
+ */
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ userId: string }> }
+) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  // Only customer owners — platform staff use Console.
+  if (!isCustomerOwner(user)) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+  if (user.isPersonal) {
+    return NextResponse.json(
+      { error: "Personal accounts have no team roles to change." },
+      { status: 403 }
+    );
+  }
+
+  const { userId } = await params;
+
+  if (userId === user.id) {
+    return NextResponse.json(
+      {
+        error:
+          "You cannot change your own role. Ask another owner, or promote a colleague to owner first.",
+        code: "self_change_blocked",
+      },
+      { status: 403 }
+    );
+  }
+
+  const body = await req.json().catch(() => null);
+  const parsed = patchSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid input", details: parsed.error.flatten() },
+      { status: 400 }
+    );
+  }
+  const { role } = parsed.data;
+  // Defensive — the Zod enum already enforces this.
+  if (!isValidInviteRole(role)) {
+    return NextResponse.json(
+      { error: "Role must be 'owner' or 'user'." },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const members = await getOrgMembers(user.orgId);
+    const target = members.find((m) => m.userId === userId);
+    if (!target) {
+      return NextResponse.json(
+        { error: "Target user is not a member of this organization." },
+        { status: 404 }
+      );
+    }
+    if (!target.authorizationId) {
+      // Should be very rare — implies the row was created out-of-band
+      // (e.g. directly in Console) without an authorization. Surface a
+      // clear message rather than a confusing 500 from ZITADEL.
+      return NextResponse.json(
+        {
+          error:
+            "Member has no authorization record on the project. Re-invite them or contact support.",
+          code: "no_authorization",
+        },
+        { status: 409 }
+      );
+    }
+
+    // Last-owner protection: this matters when the target is currently
+    // an owner AND the new role is something other than owner. We could
+    // narrow the count to "before this change" but the simpler form is
+    // equivalent: if there's only one owner and that owner is the
+    // target, refuse.
+    const currentlyOwner = target.roles.includes("owner");
+    if (currentlyOwner && role !== "owner") {
+      const ownerCount = members.filter((m) => m.roles.includes("owner")).length;
+      if (ownerCount <= 1) {
+        return NextResponse.json(
+          {
+            error:
+              "This is the only owner. Promote another member to owner before demoting this one.",
+            code: "last_owner",
+          },
+          { status: 409 }
+        );
+      }
+    }
+
+    // No-op: target already has the requested role and ONLY that role.
+    if (target.roles.length === 1 && target.roles[0] === role) {
+      return NextResponse.json({ message: "No change.", role }, { status: 200 });
+    }
+
+    await updateAuthorizationRoles(target.authorizationId, [role]);
+
+    return NextResponse.json(
+      { message: "Role updated.", userId, role },
+      { status: 200 }
+    );
+  } catch (e: any) {
+    console.error("Role update failed:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to update role") },
+      { status: e.statusCode || 500 }
+    );
+  }
+}

src/app/api/team/invite/route.ts

@@ -35,6 +35,16 @@ export async function POST(req: Request) {
   if (!canMutate(user)) {
     return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   }
+  if (user.isPersonal) {
+    return NextResponse.json(
+      {
+        error:
+          "Personal accounts cannot invite additional members. Upgrade to a company account to add a team.",
+        code: "personal_account",
+      },
+      { status: 403 }
+    );
+  }
 
   const body = await req.json().catch(() => null);
   const parsed = inviteSchema.safeParse(body);

src/app/api/team/route.ts

@@ -24,6 +24,12 @@ export async function GET() {
   if (!canMutate(user)) {
     return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   }
+  if (user.isPersonal) {
+    return NextResponse.json(
+      { error: "Personal accounts do not have a team." },
+      { status: 403 }
+    );
+  }
 
   try {
     const members = await getOrgMembers(user.orgId);

src/app/api/tenants/[name]/assignments/route.ts

@@ -128,6 +128,23 @@ export async function POST(
       { status: 500 }
     );
   }
+  // Bug 7 server-side counterpart: personal tenants are sole-owner
+  // by definition. Reject any assignment attempt — this matches the
+  // hidden panel on the detail page and stops a determined client
+  // (or platform user with a legacy unlabeled personal tenant) from
+  // creating spurious rows.
+  if (
+    tenant.metadata.labels?.["pieced.ch/personal"] === "true" ||
+    (!user.isPlatform && user.isPersonal)
+  ) {
+    return NextResponse.json(
+      {
+        error: "Personal tenants do not support additional assignments.",
+        code: "personal_tenant",
+      },
+      { status: 403 }
+    );
+  }
 
   const body = await req.json().catch(() => null);
   const parsed = assignSchema.safeParse(body);

src/components/layout/nav-shell.tsx

@@ -40,11 +40,14 @@ function NavBar() {
             <NavLink href="/dashboard" active={pathname === "/dashboard"}>
               {t("dashboard")}
             </NavLink>
-            {/* Slice 7: /team is owner+platform only. Match server-side
+            {/* Slice 7: /team is owner+platform only AND personal
-                gate (canMutate). The roles array carries either "owner"
+                accounts are excluded — they have no team to manage
-                or "user" for customer sessions; isPlatform covers the
+                (Bug 8). Match server-side gates (`canMutate`,
-                platform side. */}
+                `user.isPersonal === false`). The roles array carries
+                either "owner" or "user" for customer sessions;
+                isPlatform covers the platform side. */}
             {user &&
+              !user.isPersonal &&
               (user.isPlatform ||
                 (Array.isArray(user.roles) && user.roles.includes("owner"))) && (
                 <NavLink href="/team" active={pathname === "/team"}>
@@ -62,8 +65,17 @@ function NavBar() {
         {/* Right side */}
         <div className="flex items-center gap-4">
           {user && (
+            // For personal accounts the orgName is opaque
+            // ("personal-3f2a8b1c") or a synthetic legacy
+            // "Name (Personal)" — neither is what we want in the nav.
+            // Show the user's display name instead. The detection logic
+            // and fallback chain live in `lib/personal-org.ts`; keeping
+            // a thin inline branch here avoids importing a server-only
+            // helper into a client component.
             <span className="hidden md:inline text-xs text-text-secondary font-mono">
-              {user.orgName}
+              {user.isPersonal
+                ? user.name || (user.email ? user.email.split("@")[0] : user.orgName)
+                : user.orgName}
             </span>
           )}
           <LanguageSwitcher />

src/components/onboarding/onboarding-flow.tsx

@@ -5,6 +5,13 @@ import { OnboardingWizard } from "./wizard";
 
 interface OnboardingFlowProps {
   orgName: string;
+  /**
+   * The user's display name. Forwarded to the wizard so personal
+   * accounts can show the user's own name where they would otherwise
+   * see an opaque org name. Ignored for company accounts.
+   */
+  userName?: string;
+  userEmail?: string;
 }
 
 /**
@@ -18,12 +25,18 @@ interface OnboardingFlowProps {
  * level (which renders one `<ProvisioningStatus>` per pending request),
  * so this wrapper does just one thing: show the wizard, then navigate.
  */
-export function OnboardingFlow({ orgName }: OnboardingFlowProps) {
+export function OnboardingFlow({
+  orgName,
+  userName,
+  userEmail,
+}: OnboardingFlowProps) {
   const router = useRouter();
 
   return (
     <OnboardingWizard
       orgName={orgName}
+      userName={userName}
+      userEmail={userEmail}
       onComplete={() => {
         // Navigate back to /dashboard and re-fetch on the server. The
         // parent server component will see the new `pending` row and

src/components/onboarding/wizard.tsx

@@ -4,7 +4,15 @@ import { useState, useCallback, useEffect, useRef } from "react";
 import { useTranslations } from "next-intl";
 import { Card } from "@/components/ui/card";
 import { PACKAGE_CATALOG, type PackageDef } from "@/lib/packages";
-import { isPersonalOrgName, PERSONAL_ORG_SUFFIX } from "@/lib/personal-org";
+import { isPersonalOrgName, displayOrgNameFor } from "@/lib/personal-org";
+import {
+  configureStepSchema,
+  billingStepSchema,
+  onboardingSchema,
+  fieldErrors,
+  SUPPORTED_COUNTRIES,
+  type SupportedCountry,
+} from "@/lib/validation";
 
 type Step = "welcome" | "configure" | "billing" | "confirm";
 
@@ -48,23 +56,41 @@ const CATEGORIES = [
 
 interface WizardProps {
   orgName: string;
+  /**
+   * The user's display name. Used as the visible label for personal
+   * accounts (where `orgName` is an opaque ID like "personal-3f2a8b1c"
+   * or a synthetic legacy "{name} (Personal)" string). Ignored for
+   * company accounts.
+   */
+  userName?: string;
+  userEmail?: string;
   onComplete: () => void;
 }
 
-export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
+export function OnboardingWizard({
+  orgName,
+  userName,
+  userEmail,
+  onComplete,
+}: WizardProps) {
   const t = useTranslations("onboarding");
   const tPkg = useTranslations("packages");
   const tCommon = useTranslations("common");
+  const tCountries = useTranslations("countries");
 
-  // Slice 4: personal accounts have an org name of the form
+  // Personal accounts have an org name that is either the legacy
-  // "{givenName} {familyName} (Personal)". For SOUL.md and the billing
+  // "{givenName} {familyName} (Personal)" or the current opaque
-  // company line, strip the suffix so the visible string is the user's
+  // "personal-{8hex}" form. Either way, the customer-facing display
-  // actual name (no stray "(Personal)" leaking onto invoices or into
+  // should be the user's own name — never the org name. SOUL.md
-  // the assistant's prompt).
+  // interpolation and the billing form follow the same rule so
+  // invoices and prompts don't leak "(Personal)" or "personal-3f2a..".
   const isPersonal = isPersonalOrgName(orgName);
-  const displayOrgName = isPersonal
+  const displayOrgName = displayOrgNameFor({
-    ? orgName.slice(0, -PERSONAL_ORG_SUFFIX.length).trim()
+    name: userName,
-    : orgName;
+    email: userEmail,
+    orgName,
+    isPersonal,
+  });
 
   const [step, setStep] = useState<Step>("welcome");
   const [submitting, setSubmitting] = useState(false);
@@ -142,11 +168,70 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
 
   const stepIndex = STEPS.indexOf(step);
 
+  // Bug 12 — per-step validation. `errors` holds field-path → message
+  // for the inline labels under each input. We only populate it on
+  // attempted advancement; touching a field clears its own error so
+  // valid input doesn't keep showing stale messages.
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const clearError = useCallback((path: string) => {
+    setErrors((prev) => {
+      if (!prev[path]) return prev;
+      const next = { ...prev };
+      delete next[path];
+      return next;
+    });
+  }, []);
+
+  /**
+   * Validate the current step against its schema. On success: clear
+   * errors and return true. On failure: populate errors and return
+   * false so the caller can refuse to advance.
+   *
+   * Welcome and configure-step have no schema interaction with billing
+   * fields — keeping the schemas narrow means we don't surface a
+   * billing error when the user is still typing on the configure step.
+   */
+  const validateStep = (s: Step): boolean => {
+    if (s === "welcome") return true;
+    if (s === "configure") {
+      const r = configureStepSchema.safeParse({ agentName: config.agentName });
+      if (r.success) {
+        setErrors({});
+        return true;
+      }
+      setErrors(fieldErrors(r.error));
+      return false;
+    }
+    if (s === "billing") {
+      const r = billingStepSchema.safeParse({
+        billingAddress: config.billingAddress,
+      });
+      if (r.success) {
+        setErrors({});
+        return true;
+      }
+      setErrors(fieldErrors(r.error));
+      return false;
+    }
+    // confirm: validate the union (defence in depth — submit handler
+    // also runs onboardingSchema before POST).
+    const r = onboardingSchema.safeParse(config);
+    if (r.success) {
+      setErrors({});
+      return true;
+    }
+    setErrors(fieldErrors(r.error));
+    return false;
+  };
+
   const goNext = () => {
+    if (!validateStep(step)) return;
     if (stepIndex < STEPS.length - 1) setStep(STEPS[stepIndex + 1]);
   };
 
   const goBack = () => {
+    // Going back never re-validates; the user's existing errors stay
+    // pinned to fields so they can fix them after navigating back.
     if (stepIndex > 0) setStep(STEPS[stepIndex - 1]);
   };
 
@@ -199,6 +284,17 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
   };
 
   const handleSubmit = async () => {
+    // Defence in depth: re-run the full schema before sending. The
+    // server schema is the authoritative gate but we save a round trip
+    // by catching any client-side gaps here. In practice this should
+    // never fail at this point — the per-step validators have already
+    // caught everything — but a future regression in the per-step
+    // schemas would otherwise let the bad payload through.
+    if (!validateStep("confirm")) {
+      setError(t("validationError"));
+      return;
+    }
+
     setSubmitting(true);
     setError("");
 
@@ -339,19 +435,21 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
               </p>
             </div>
 
-            <div>
+            <FieldWithError error={errors.agentName}>
               <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                {t("agentName")}
+                {t("agentName")} <RequiredMark />
               </label>
               <input
                 type="text"
+                required
                 value={config.agentName}
-                onChange={(e) =>
+                onChange={(e) => {
-                  setConfig((prev) => ({ ...prev, agentName: e.target.value }))
+                  clearError("agentName");
-                }
+                  setConfig((prev) => ({ ...prev, agentName: e.target.value }));
-                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                }}
+                className={inputClass(errors.agentName)}
               />
-            </div>
+            </FieldWithError>
 
             <div>
               <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
@@ -618,6 +716,11 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
           </p>
 
           <div className="space-y-4">
+            {/* Bug 2: company line is meaningless for personal accounts.
+                Hide entirely rather than render an empty disabled field
+                — the latter would just suggest the customer should
+                fill it in. */}
+            {!isPersonal && (
               <div>
                 <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                   {t("billingCompany")}
@@ -625,99 +728,119 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
                 <input
                   type="text"
                   value={config.billingAddress.company}
-                onChange={(e) =>
+                  onChange={(e) => {
+                    clearError("billingAddress.company");
                     setConfig((prev) => ({
                       ...prev,
                       billingAddress: {
                         ...prev.billingAddress,
                         company: e.target.value,
                       },
-                  }))
+                    }));
-                }
+                  }}
                   className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
                 />
               </div>
+            )}
 
-            <div>
+            <FieldWithError error={errors["billingAddress.street"]}>
               <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                {t("billingStreet")}
+                {t("billingStreet")} <RequiredMark />
               </label>
               <input
                 type="text"
+                required
                 value={config.billingAddress.street}
-                onChange={(e) =>
+                onChange={(e) => {
+                  clearError("billingAddress.street");
                   setConfig((prev) => ({
                     ...prev,
                     billingAddress: {
                       ...prev.billingAddress,
                       street: e.target.value,
                     },
-                  }))
+                  }));
-                }
+                }}
-                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                className={inputClass(errors["billingAddress.street"])}
               />
-            </div>
+            </FieldWithError>
 
             <div className="grid grid-cols-3 gap-3">
-              <div>
+              <FieldWithError error={errors["billingAddress.postalCode"]}>
                 <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                  {t("billingPostalCode")}
+                  {t("billingPostalCode")} <RequiredMark />
                 </label>
                 <input
                   type="text"
+                  required
                   value={config.billingAddress.postalCode}
-                  onChange={(e) =>
+                  onChange={(e) => {
+                    clearError("billingAddress.postalCode");
                     setConfig((prev) => ({
                       ...prev,
                       billingAddress: {
                         ...prev.billingAddress,
                         postalCode: e.target.value,
                       },
-                    }))
+                    }));
-                  }
+                  }}
-                  className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                  className={inputClass(errors["billingAddress.postalCode"])}
                 />
-              </div>
+              </FieldWithError>
               <div className="col-span-2">
+                <FieldWithError error={errors["billingAddress.city"]}>
                   <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                  {t("billingCity")}
+                    {t("billingCity")} <RequiredMark />
                   </label>
                   <input
                     type="text"
+                    required
                     value={config.billingAddress.city}
-                  onChange={(e) =>
+                    onChange={(e) => {
+                      clearError("billingAddress.city");
                       setConfig((prev) => ({
                         ...prev,
                         billingAddress: {
                           ...prev.billingAddress,
                           city: e.target.value,
                         },
-                    }))
+                      }));
-                  }
+                    }}
-                  className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                    className={inputClass(errors["billingAddress.city"])}
                   />
+                </FieldWithError>
               </div>
             </div>
 
-            <div>
+            {/* Bug 3: country was a free-text field — typos broke
+                invoicing. Now a fixed list of DACH+ neighbours. Add
+                more codes to SUPPORTED_COUNTRIES in lib/validation.ts
+                when expanding markets. */}
+            <FieldWithError error={errors["billingAddress.country"]}>
               <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                {t("billingCountry")}
+                {t("billingCountry")} <RequiredMark />
               </label>
-              <input
+              <select
-                type="text"
                 value={config.billingAddress.country}
-                onChange={(e) =>
+                onChange={(e) => {
+                  clearError("billingAddress.country");
                   setConfig((prev) => ({
                     ...prev,
                     billingAddress: {
                       ...prev.billingAddress,
-                      country: e.target.value,
+                      country: e.target.value as SupportedCountry,
                     },
-                  }))
+                  }));
-                }
+                }}
-                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                className={inputClass(errors["billingAddress.country"])}
-              />
+              >
-            </div>
+                {SUPPORTED_COUNTRIES.map((code) => (
+                  <option key={code} value={code}>
+                    {tCountries(code)}
+                  </option>
+                ))}
+              </select>
+            </FieldWithError>
 
             <div>
               <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
@@ -765,25 +888,39 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
             {t("confirmDescription")}
           </p>
 
+          {/* Bug 4 redesign: previously this step only showed agentName
+              and city — useless for actually reviewing what's about to
+              be submitted. Now it shows the real config: instance
+              name, agent name, packages, billing one-liner, contact
+              email, and notes. Each row uses two columns rather than
+              flex-justify-between so long values wrap underneath the
+              label rather than being squashed onto one line. */}
           <div className="space-y-4">
-            <div className="bg-surface-2 border border-border rounded-lg p-4 space-y-3">
+            <div className="bg-surface-2 border border-border rounded-lg p-4 divide-y divide-border">
-              {config.instanceName.trim() && (
+              <ReviewRow
-                <div className="flex justify-between text-sm">
+                label={t("instanceName")}
-                  <span className="text-text-muted">{t("instanceName")}</span>
+                value={
-                  <span className="text-text-primary font-mono">
+                  config.instanceName.trim() || (
-                    {config.instanceName.trim()}
+                    <span className="text-text-muted italic">
+                      {t("reviewInstanceDefault")}
                     </span>
-                </div>
+                  )
-              )}
+                }
-              <div className="flex justify-between text-sm">
+                mono
-                <span className="text-text-muted">{t("agentName")}</span>
+              />
-                <span className="text-text-primary font-mono">
+              <ReviewRow
-                  {config.agentName}
+                label={t("agentName")}
+                value={config.agentName}
+                mono
+              />
+              <ReviewRow
+                label={t("packages")}
+                value={
+                  config.packages.length === 0 ? (
+                    <span className="text-text-muted italic">
+                      {t("reviewNoPackages")}
                     </span>
-              </div>
+                  ) : (
-              {config.packages.length > 0 && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-text-muted">{t("packages")}</span>
                     <div className="flex flex-wrap gap-1 justify-end">
                       {config.packages.map((pkg) => (
                         <span
@@ -794,38 +931,49 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
                         </span>
                       ))}
                     </div>
-                </div>
+                  )
+                }
+              />
+              <ReviewRow
+                label={t("reviewBillingTo")}
+                value={
+                  <div className="text-text-primary text-right">
+                    {/* For personal: skip the company line so the
+                        invoice rendering matches what the user actually
+                        entered. For company: include it as the first
+                        line. */}
+                    {!isPersonal &&
+                      config.billingAddress.company &&
+                      config.billingAddress.company.trim().length > 0 && (
+                        <div>{config.billingAddress.company}</div>
                       )}
-              {config.packages.some((id) =>
+                    <div>{config.billingAddress.street}</div>
-                PACKAGE_CATALOG.find((p) => p.id === id)?.requiresSecrets
+                    <div>
-              ) && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-text-muted">
-                    {t("credentialsProvided")}
-                  </span>
-                  <span className="text-emerald-400 text-xs font-medium">
-                    ✓
-                  </span>
-                </div>
-              )}
-              {config.billingAddress.company && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-text-muted">
-                    {t("billingCompany")}
-                  </span>
-                  <span className="text-text-primary">
-                    {config.billingAddress.company}
-                  </span>
-                </div>
-              )}
-              {config.billingAddress.city && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-text-muted">{t("billingCity")}</span>
-                  <span className="text-text-primary">
                       {config.billingAddress.postalCode}{" "}
                       {config.billingAddress.city}
-                  </span>
                     </div>
+                    <div className="text-text-muted">
+                      {tCountries(
+                        config.billingAddress.country as SupportedCountry
+                      )}
+                    </div>
+                  </div>
+                }
+              />
+              <ReviewRow
+                label={t("reviewContactEmail")}
+                value={userEmail || ""}
+                mono
+              />
+              {config.billingNotes.trim().length > 0 && (
+                <ReviewRow
+                  label={t("billingNotes")}
+                  value={
+                    <span className="text-text-primary whitespace-pre-wrap text-right">
+                      {config.billingNotes}
+                    </span>
+                  }
+                />
               )}
             </div>
 
@@ -838,6 +986,25 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
             </div>
           )}
 
+          {/* Aggregate validation errors — if any per-step schema check
+              missed something (it shouldn't, but defence in depth),
+              the user sees a consolidated list here rather than a
+              silent submit failure. */}
+          {Object.keys(errors).length > 0 && (
+            <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mt-4">
+              <div className="font-semibold mb-1">
+                {t("validationErrorsTitle")}
+              </div>
+              <ul className="list-disc list-inside space-y-0.5">
+                {Object.entries(errors).map(([path, msg]) => (
+                  <li key={path}>
+                    <span className="font-mono">{path}</span>: {msg}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
           <div className="flex justify-between mt-6">
             <button
               onClick={goBack}
@@ -858,3 +1025,74 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
     </div>
   );
 }
+
+/**
+ * Two-column review row used by the confirm step. Right-aligned value
+ * with the label as a muted prefix on the left.
+ */
+function ReviewRow({
+  label,
+  value,
+  mono,
+}: {
+  label: string;
+  value: React.ReactNode;
+  mono?: boolean;
+}) {
+  return (
+    <div className="flex justify-between gap-4 text-sm py-2 first:pt-0 last:pb-0">
+      <span className="text-text-muted shrink-0">{label}</span>
+      <span
+        className={`text-text-primary text-right min-w-0 break-words ${
+          mono ? "font-mono" : ""
+        }`}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Renders children + an inline error message if present. Children
+ * supply the label and input; this wrapper just appends the message.
+ */
+function FieldWithError({
+  error,
+  children,
+}: {
+  error?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      {children}
+      {error && (
+        <p className="text-xs text-red-400 mt-1" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function RequiredMark() {
+  return (
+    <span aria-hidden="true" className="text-accent">
+      *
+    </span>
+  );
+}
+
+/**
+ * Tailwind class for input/select with optional error-state ring.
+ * Centralised here to keep the wizard's many fields visually
+ * consistent without repeating the long class string.
+ */
+function inputClass(error?: string): string {
+  return `w-full px-3 py-2 bg-surface-2 border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 transition-colors ${
+    error
+      ? "border-red-400/60 focus:ring-red-400 focus:border-red-400"
+      : "border-border focus:ring-accent focus:border-accent"
+  }`;
+}

src/components/team/team-list.tsx

@@ -10,23 +10,56 @@ interface OrgMember {
   givenName: string;
   familyName: string;
   roles: string[];
+  authorizationId: string;
 }
 
 interface Props {
   initialMembers: OrgMember[];
   currentUserId: string;
+  /**
+   * Whether the viewing user can change other members' roles. True only
+   * for customer owners. Server enforces this independently — this prop
+   * is purely UX (don't render the control if the action would 403).
+   */
+  canEditRoles: boolean;
 }
 
+type RoleOption = "owner" | "user";
+
 /**
  * TeamList — renders the org's members. Refreshes after invites by
  * polling the API; the InviteForm broadcasts a `team:refresh` window
  * event after a successful invite so the list updates immediately
  * rather than waiting for the next reload.
+ *
+ * Slice 7 + Bug 25: owners can change other members' roles inline.
+ * Clicking the "Change role" button on a row swaps the badge for a
+ * dropdown + Save/Cancel pair. We deliberately don't use a modal —
+ * the change is a single-field edit and the user already sees the row
+ * context, so inline is faster.
+ *
+ * Self-row never shows the editor (server enforces too). Last-owner
+ * demotion is enforced server-side; we surface the resulting 409 as a
+ * row-local error rather than pre-validating client-side, because the
+ * client doesn't know the org's full owner count without an extra
+ * round trip.
  */
-export function TeamList({ initialMembers, currentUserId }: Props) {
+export function TeamList({
+  initialMembers,
+  currentUserId,
+  canEditRoles,
+}: Props) {
   const t = useTranslations("team");
   const [members, setMembers] = useState<OrgMember[]>(initialMembers);
 
+  // Per-row editor state. `editingId` is the userId currently being
+  // edited (only one at a time). `pendingRole` is the dropdown value.
+  // `rowError` carries server-rejection messages keyed by userId.
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [pendingRole, setPendingRole] = useState<RoleOption>("user");
+  const [submitting, setSubmitting] = useState(false);
+  const [rowError, setRowError] = useState<Record<string, string>>({});
+
   useEffect(() => {
     function refresh() {
       fetch("/api/team")
@@ -40,6 +73,50 @@ export function TeamList({ initialMembers, currentUserId }: Props) {
     return () => window.removeEventListener("team:refresh", refresh);
   }, []);
 
+  function startEdit(m: OrgMember) {
+    const current = (m.roles[0] === "owner" ? "owner" : "user") as RoleOption;
+    setEditingId(m.userId);
+    setPendingRole(current);
+    setRowError((e) => ({ ...e, [m.userId]: "" }));
+  }
+
+  function cancelEdit() {
+    setEditingId(null);
+    setSubmitting(false);
+  }
+
+  async function saveEdit(m: OrgMember) {
+    setSubmitting(true);
+    setRowError((e) => ({ ...e, [m.userId]: "" }));
+    try {
+      const res = await fetch(
+        `/api/team/${encodeURIComponent(m.userId)}/role`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ role: pendingRole }),
+        }
+      );
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("roleUpdateFailed"));
+      }
+      // Optimistic update — replace the row's roles locally rather than
+      // re-fetching the whole list. The list will eventually re-fetch
+      // on the next `team:refresh` event anyway.
+      setMembers((prev) =>
+        prev.map((x) =>
+          x.userId === m.userId ? { ...x, roles: [pendingRole] } : x
+        )
+      );
+      setEditingId(null);
+    } catch (err: any) {
+      setRowError((e) => ({ ...e, [m.userId]: err.message }));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
   if (members.length === 0) {
     return (
       <div className="text-sm text-text-secondary text-center py-6 border border-border rounded-xl bg-surface-1">
@@ -51,7 +128,16 @@ export function TeamList({ initialMembers, currentUserId }: Props) {
   return (
     <div className="bg-surface-1 border border-border rounded-xl overflow-hidden">
       <ul className="divide-y divide-border">
-        {members.map((m) => (
+        {members.map((m) => {
+          const isSelf = m.userId === currentUserId;
+          const isEditing = editingId === m.userId;
+          // Hide editor for self even when the viewer is an owner —
+          // self-demotion is server-blocked and offering it as a UI
+          // affordance would just produce errors.
+          const showEditor = canEditRoles && !isSelf;
+          const err = rowError[m.userId];
+
+          return (
             <li
               key={m.userId}
               className="px-5 py-3 flex items-center justify-between gap-4"
@@ -61,7 +147,7 @@ export function TeamList({ initialMembers, currentUserId }: Props) {
                   <span className="text-sm font-medium text-text-primary truncate">
                     {m.displayName || m.email}
                   </span>
-                {m.userId === currentUserId && (
+                  {isSelf && (
                     <span className="text-[10px] uppercase tracking-wider text-accent">
                       {t("you")}
                     </span>
@@ -70,7 +156,44 @@ export function TeamList({ initialMembers, currentUserId }: Props) {
                 <div className="text-xs text-text-muted truncate font-mono">
                   {m.email}
                 </div>
+                {err && (
+                  <div className="text-xs text-red-400 mt-1">{err}</div>
+                )}
               </div>
+
+              <div className="flex items-center gap-2 shrink-0">
+                {isEditing ? (
+                  <>
+                    <select
+                      value={pendingRole}
+                      onChange={(e) =>
+                        setPendingRole(e.target.value as RoleOption)
+                      }
+                      disabled={submitting}
+                      className="text-xs bg-surface-2 border border-border rounded-md px-2 py-1 text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent"
+                    >
+                      <option value="user">{t("roleUser")}</option>
+                      <option value="owner">{t("roleOwner")}</option>
+                    </select>
+                    <button
+                      type="button"
+                      onClick={() => saveEdit(m)}
+                      disabled={submitting || !m.authorizationId}
+                      className="text-xs px-2.5 py-1 rounded-md bg-accent text-white hover:bg-accent-dim transition-colors disabled:opacity-50"
+                    >
+                      {t("save")}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={cancelEdit}
+                      disabled={submitting}
+                      className="text-xs px-2.5 py-1 rounded-md border border-border text-text-secondary hover:text-text-primary transition-colors"
+                    >
+                      {t("cancel")}
+                    </button>
+                  </>
+                ) : (
+                  <>
                     <div className="flex flex-wrap gap-1.5 justify-end">
                       {m.roles.length === 0 && (
                         <span className="text-[10px] uppercase tracking-wider text-text-muted bg-surface-3 px-2 py-0.5 rounded-full">
@@ -90,8 +213,22 @@ export function TeamList({ initialMembers, currentUserId }: Props) {
                         </span>
                       ))}
                     </div>
+                    {showEditor && (
+                      <button
+                        type="button"
+                        onClick={() => startEdit(m)}
+                        title={t("changeRole")}
+                        className="text-xs text-text-muted hover:text-text-primary px-2 py-1 rounded-md transition-colors"
+                      >
+                        {t("changeRole")}
+                      </button>
+                    )}
+                  </>
+                )}
+              </div>
             </li>
-        ))}
+          );
+        })}
       </ul>
     </div>
   );

src/components/ui/back-link.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+
+/**
+ * BackLink — small "← Page" navigation cue that sits above a page's
+ * `<h1 className="accent-rule">` heading.
+ *
+ * Why this exists
+ * ---------------
+ * The pattern was originally written inline on /team and /dashboard/new
+ * as `<Link className="inline-flex …"><span>←</span> Title</Link>`.
+ * That's wrong because `.accent-rule` (defined in globals.css) sets
+ * `display: inline-block` on the H1 — so an inline-flex link followed by
+ * an inline-block H1 are both inline-level, and end up on the same
+ * baseline whenever there's horizontal room for them. The `mb-4` on the
+ * link does nothing because vertical margin between inline boxes
+ * doesn't push siblings to a new line.
+ *
+ * Solving it: this component renders the link as a block-level flex
+ * container with `w-fit` so it shrinks to its content (and its hover
+ * area doesn't span the gutter). The trailing block element below sits
+ * cleanly on its own line.
+ *
+ * Use it whenever a page has a back-link above an `accent-rule` H1.
+ * The two prior callsites (/team and /dashboard/new) have been
+ * migrated; new pages should just use this directly.
+ */
+export function BackLink({
+  href,
+  label,
+}: {
+  href: string;
+  label: string;
+}) {
+  return (
+    <Link
+      href={href}
+      className="flex w-fit items-center gap-1.5 mb-4 text-xs font-medium text-text-muted hover:text-text-primary transition-colors"
+    >
+      <span aria-hidden="true">←</span>
+      <span>{label}</span>
+    </Link>
+  );
+}

src/instrumentation.ts

@@ -0,0 +1,54 @@
+/**
+ * Next.js instrumentation hook — runs once when the server boots.
+ *
+ * Scope is intentionally narrow: warn early about ZITADEL misconfigurations
+ * that would otherwise cause silent feature failures (Bugs 20, 21, 23, 24
+ * from the test triage). The check is fire-and-forget — it must NEVER
+ * crash the server, even if ZITADEL is briefly unreachable at boot.
+ *
+ * Add new self-checks here only if they meet the same bar: cheap, side-effect
+ * free, and useful at the precise moment a misconfiguration would otherwise
+ * go unnoticed.
+ *
+ * Docs: https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation
+ */
+
+const REQUIRED_ROLE_KEYS = [
+  "owner",
+  "user",
+  "platform_admin",
+  "platform_operator",
+] as const;
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME !== "nodejs") return;
+  // Skip during `next build` — there's no need to talk to ZITADEL just to
+  // produce a static build, and we don't want CI builds to depend on it.
+  if (process.env.NEXT_PHASE === "phase-production-build") return;
+
+  // Lazy import: the instrumentation file runs in a constrained context
+  // before app code; importing at top-level would pull NextAuth/etc.
+  const { listProjectRoles } = await import("@/lib/zitadel");
+
+  try {
+    const present = new Set(await listProjectRoles());
+    const missing = REQUIRED_ROLE_KEYS.filter((k) => !present.has(k));
+
+    if (missing.length === 0) {
+      console.log(
+        `[startup] ZITADEL project roles OK (${REQUIRED_ROLE_KEYS.length} canonical keys present).`
+      );
+      return;
+    }
+
+    console.warn(
+      `[startup] ZITADEL project ${process.env.ZITADEL_PROJECT_ID} is missing canonical role key(s): ${missing.join(", ")}. ` +
+        `Customer invites and team-page badges will not work. ` +
+        `Run \`node --env-file=.env scripts/zitadel-roles.mjs apply\` to repair.`
+    );
+  } catch (err) {
+    // Never block startup. The portal can still serve unauthenticated
+    // pages and the operator can investigate at leisure.
+    console.warn("[startup] ZITADEL self-check failed (continuing):", err);
+  }
+}

src/lib/auth.ts

@@ -1,6 +1,7 @@
 import NextAuth from "next-auth";
 import type { NextAuthConfig } from "next-auth";
 import type { PlatformRole, Role, SessionUser, ZitadelClaims } from "@/types";
+import { isPersonalOrgName } from "@/lib/personal-org";
 
 const PLATFORM_ROLES: PlatformRole[] = ["platform_admin", "platform_operator"];
 
@@ -57,21 +58,42 @@ export const authConfig: NextAuthConfig = {
           claims["urn:zitadel:iam:org:project:roles"]
         );
         token.accessToken = account.access_token;
+        // Pin token.sub to the OIDC subject. Auth.js v5 otherwise puts a
+        // freshly generated UUID in token.sub on initial sign-in,
+        // ignoring what profile() returns for `id`. That UUID then
+        // becomes session.user.id everywhere downstream — including
+        // `tenant_user_assignments.assigned_by` and (more importantly)
+        // the WHERE clause used to look up the invited user's
+        // assignments on the dashboard. With a UUID in the session and
+        // a ZITADEL snowflake in the DB, the lookup matches nothing
+        // and assigned tenants never appear (Bug 27).
+        //
+        // Reference: https://github.com/nextauthjs/next-auth/issues/11174
+        // Auth.js respects an explicit token.sub assignment; the
+        // override below is preserved across subsequent jwt() calls.
+        if (typeof profile.sub === "string") {
+          token.sub = profile.sub;
+        }
       }
       return token;
     },
     async session({ session, token }) {
       const roles = (token.roles as Role[]) ?? [];
+      const orgName = (token.orgName as string) ?? "";
       const sessionUser: SessionUser = {
         id: token.sub!,
         name: session.user?.name ?? "",
         email: session.user?.email ?? "",
         orgId: token.orgId as string,
-        orgName: token.orgName as string,
+        orgName,
         roles,
         isPlatform: roles.some((r) =>
           PLATFORM_ROLES.includes(r as PlatformRole)
         ),
+        // Derived from orgName — see lib/personal-org.ts. Recognises
+        // both legacy " (Personal)" suffix and current "personal-{8hex}"
+        // opaque names.
+        isPersonal: isPersonalOrgName(orgName),
       };
       (session as any).platformUser = sessionUser;
       return session;

src/lib/personal-org.ts

@@ -1,40 +1,147 @@
 /**
  * Personal-account helpers.
  *
- * Slice 4 establishes the convention that ZITADEL org names for personal
+ * Two ZITADEL org-name formats may identify a personal account:
- * accounts end with the literal " (Personal)" suffix. This file
- * centralises the suffix and the predicate so both registration (which
- * sets the suffix) and onboarding (which reads it from the session) use
- * the same canonical form.
  *
- * Why a name suffix and not ZITADEL org metadata?
+ * 1. Legacy (Slice 4 .. 7-pre-Bug9):
- * -----------------------------------------------
+ *      "{givenName} {familyName} (Personal)"
- * 1. The suffix is visible in ZITADEL Console, admin tools, JWT claims,
+ *    Embedded the user's name in the org name. Hit a uniqueness
- *    etc. — useful debugging signal at zero cost.
+ *    collision on common Swiss names (Bug 9: two people named "Eva
- * 2. Customers cannot rename their own org (requires IAM_OWNER, which
+ *    Müller" can't both register). Suffix is detected via
- *    only the SA holds), so the suffix is stable for the lifetime of
+ *    `PERSONAL_ORG_SUFFIX`.
- *    the org.
- * 3. No extra ZITADEL API calls at onboarding time to fetch metadata.
- * 4. No extra portal DB tables.
  *
- * The trade-off: an admin who manually renames a personal org via
+ * 2. Current (Slice 7+):
- * ZITADEL Console could remove the suffix, after which onboarding
+ *      "personal-{8 hex chars}"
- * would treat that org as a company. That's a deliberate destructive
+ *    Opaque, structurally collision-free, no PII. The user's display
- * action and the worst outcome is a misnamed K8s CR; nothing breaks.
+ *    name lives only in the per-user fields (`session.user.name`),
+ *    which is what the GUI shows wherever it would otherwise have
+ *    shown the org name. See `displayOrgNameFor()` below.
+ *
+ * Both formats are recognised as personal by `isPersonalOrgName()`.
+ * Existing legacy orgs continue to work; new orgs are created in the
+ * opaque format.
+ *
+ * Why a name pattern and not ZITADEL org metadata?
+ * ------------------------------------------------
+ * - Visible in ZITADEL Console, JWT claims, admin tools — useful debug
+ *   signal at zero cost.
+ * - Customers cannot rename their own org (requires IAM_OWNER, which
+ *   only the SA holds), so the marker is stable for the life of the
+ *   org.
+ * - No extra ZITADEL API calls at onboarding time.
+ * - No extra portal DB tables.
+ *
+ * Trade-off: an admin who manually renames a personal org via Console
+ * could remove the marker. That's a deliberate destructive action; the
+ * worst outcome is a misnamed K8s CR. Nothing breaks.
  */
 
+/** Suffix used by the legacy " (Personal)" naming scheme. */
 export const PERSONAL_ORG_SUFFIX = " (Personal)";
 
+/**
+ * Pattern for the current opaque-id naming scheme. The hex chunk is
+ * generated from `crypto.randomUUID()` — eight hex digits give 4 billion
+ * distinct values, far more than the pilot will ever need, while
+ * keeping the org name short and copy-pasteable.
+ */
+const PERSONAL_ORG_OPAQUE_RE = /^personal-[0-9a-f]{8}$/;
+
+/**
+ * Generate a fresh opaque org name for a personal account.
+ *
+ * The result is uniformly random in the form "personal-XXXXXXXX". Caller
+ * doesn't need a duplicate check — at 4e9 cardinality the birthday
+ * collision probability is negligible at pilot scale, and ZITADEL would
+ * reject a duplicate creation with a clean error which we let surface.
+ *
+ * `crypto.randomUUID()` is used because it's available natively in
+ * Node 20+ and edge runtimes. We slice the hex digits we need from
+ * the UUID rather than calling a separate randomBytes API; the result
+ * is the same.
+ */
+export function generatePersonalOrgName(): string {
+  const uuid = crypto.randomUUID(); // 8-4-4-4-12 hex digits
+  const hex = uuid.replace(/-/g, "").slice(0, 8);
+  return `personal-${hex}`;
+}
+
 /**
  * Returns true when the given ZITADEL org name marks a personal account.
  *
- * The check is exact-suffix match (after trimming). Whitespace inside
+ * Recognises both the legacy " (Personal)" suffix and the current
- * the suffix is significant — `" (personal)"` lowercase or `"(Personal)"`
+ * "personal-{8hex}" opaque form. Whitespace inside the legacy suffix is
- * without the leading space are not matches and not personal orgs.
+ * significant — `" (personal)"` lowercase or `"(Personal)"` without the
+ * leading space are NOT matches and are treated as company orgs.
  *
  * Pass `session.orgName` from the SessionUser at the call site.
  */
-export function isPersonalOrgName(orgName: string | null | undefined): boolean {
+export function isPersonalOrgName(
+  orgName: string | null | undefined
+): boolean {
   if (!orgName) return false;
-  return orgName.trimEnd().endsWith(PERSONAL_ORG_SUFFIX);
+  const trimmed = orgName.trimEnd();
+  if (PERSONAL_ORG_OPAQUE_RE.test(trimmed)) return true;
+  if (trimmed.endsWith(PERSONAL_ORG_SUFFIX)) return true;
+  return false;
+}
+
+/**
+ * The label to show wherever the GUI would otherwise show the user's
+ * org name. For company accounts this is the org name; for personal
+ * accounts the org name itself is opaque (or a synthetic legacy
+ * "Name (Personal)" string), so we substitute the user's display name.
+ *
+ * Use this anywhere a customer-facing string would render the
+ * organisation: nav header, billing forms, SOUL.md interpolation, etc.
+ */
+export function displayOrgNameFor(user: {
+  name?: string | null;
+  email?: string | null;
+  orgName?: string | null;
+  isPersonal?: boolean;
+}): string {
+  const orgName = user.orgName ?? "";
+  // Defensive: if `isPersonal` wasn't set on the session (older sessions
+  // pre-Slice-7-Bug-9), fall back to detecting from the name itself.
+  const personal = user.isPersonal ?? isPersonalOrgName(orgName);
+  if (!personal) return orgName;
+  // Legacy legacy "Name (Personal)" — strip the suffix and use what's
+  // left as a sensible display, since it's already the user's name.
+  if (orgName.trimEnd().endsWith(PERSONAL_ORG_SUFFIX)) {
+    return orgName.slice(0, -PERSONAL_ORG_SUFFIX.length).trim();
+  }
+  // New opaque form — show the user's display name. Fall back to email
+  // local-part if no display name is available, which is rare but
+  // possible during the brief window between user creation and the
+  // user setting their profile.
+  if (user.name && user.name.trim().length > 0) return user.name.trim();
+  if (user.email) return user.email.split("@")[0];
+  return orgName;
+}
+
+/**
+ * One-instance-per-account rule for personal accounts (Bug 5).
+ *
+ * Personal accounts are 1-instance by design: a single user, a single
+ * tenant. After the first tenant or in-flight request exists, the
+ * customer is over quota and any further onboarding submission must
+ * be blocked. Company accounts are unaffected.
+ *
+ * `tenantCount` and `requestCount` are measured against the customer's
+ * own org — caller is responsible for filtering before passing them
+ * in. Both values are non-negative integers; the predicate is true
+ * iff at least one of them is > 0.
+ *
+ * Used by the dashboard (hide the "+ Create new instance" button),
+ * /dashboard/new (server-redirect), and /api/onboarding (return 403).
+ * Keeping the rule in one place avoids three separate copies of the
+ * same boolean drifting apart.
+ */
+export function personalAccountAtCapacity(
+  isPersonal: boolean,
+  tenantCount: number,
+  requestCount: number
+): boolean {
+  return isPersonal && (tenantCount > 0 || requestCount > 0);
 }

src/lib/team.ts

@@ -45,6 +45,18 @@ export interface OrgMember {
    * yet — appears as "no role" in the UI.
    */
   roles: string[];
+  /**
+   * The ZITADEL authorization ID backing the role assignment, if any.
+   * Used by the team UI's role-change flow to call UpdateAuthorization.
+   * Empty string if the member has no authorization (orphan / pre-Slice-7
+   * legacy / mid-invite race).
+   *
+   * If a member somehow holds multiple authorization rows (not expected
+   * at our project-grant scope of [owner, user]), only the first is
+   * surfaced here. The team page joins per-user, so the UI sees one
+   * row per member; mutations target that authorization.
+   */
+  authorizationId: string;
 }
 
 /**
@@ -61,14 +73,22 @@ export async function getOrgMembers(orgId: string): Promise<OrgMember[]> {
     listOrgAuthorizations(orgId),
   ]);
 
-  // Group authorizations by userId — one user could in principle hold
+  // Group authorizations by userId. We track BOTH the union of role
-  // multiple authorization rows (one per role assigned at different
+  // keys (for display) and the first authorizationId we see (for the
-  // times). Flatten roleKeys.
+  // role-change flow). A user could in principle hold multiple
+  // authorization rows, but at our project-grant scope of [owner, user]
+  // each member ends up with exactly one. If a future config produces
+  // multi-row members the UI surfaces the first; cleanup belongs in
+  // ZITADEL Console.
   const rolesByUser = new Map<string, Set<string>>();
+  const authIdByUser = new Map<string, string>();
   for (const a of auths) {
     const set = rolesByUser.get(a.userId) ?? new Set<string>();
     for (const r of a.roleKeys) set.add(r);
     rolesByUser.set(a.userId, set);
+    if (!authIdByUser.has(a.userId) && a.authorizationId) {
+      authIdByUser.set(a.userId, a.authorizationId);
+    }
   }
 
   return users.map((u) => ({
@@ -78,6 +98,7 @@ export async function getOrgMembers(orgId: string): Promise<OrgMember[]> {
     givenName: u.givenName,
     familyName: u.familyName,
     roles: Array.from(rolesByUser.get(u.userId) ?? []),
+    authorizationId: authIdByUser.get(u.userId) ?? "",
   }));
 }
 

src/lib/validation.ts

@@ -0,0 +1,114 @@
+import { z } from "zod";
+
+/**
+ * Shared validation schemas for the onboarding wizard and the
+ * registration form. Both client and server import from here so the
+ * rules can't drift apart.
+ *
+ * Bug 12 motivation: until now, all wizard fields could be empty and
+ * still submit — the server schema in `/api/onboarding` had every
+ * billing field optional, and the client did no validation at all.
+ * Required fields are now declared once, here, and used in three
+ * places:
+ *   1. The wizard's per-step `validateStep()` to gate `goNext()`.
+ *   2. The wizard's submit handler to render inline errors.
+ *   3. The server route's `safeParse()` so the rules are also
+ *      enforced on direct API calls.
+ *
+ * Don't mix UX-only state (e.g. "did the user touch this field yet")
+ * into these schemas — that belongs in the wizard's render layer.
+ * These schemas describe what the data has to look like, not the
+ * progressive-disclosure rules.
+ */
+
+// ISO-3166-1 alpha-2 codes accepted in the country dropdown. DACH+
+// neighbours: Switzerland, Germany, Austria, France, Italy, plus
+// Liechtenstein (Swiss customers with LI billing addresses are common
+// enough to include without inflating the list). Add to this set when
+// expanding into new markets.
+export const SUPPORTED_COUNTRIES = ["CH", "DE", "AT", "FR", "IT", "LI"] as const;
+export type SupportedCountry = (typeof SUPPORTED_COUNTRIES)[number];
+
+/**
+ * Billing address — every field required at minimum non-empty length.
+ * Postal code rules vary too much across DACH+ to enforce a single
+ * regex usefully; we settle for "non-empty, ≤ 12 chars". Country is a
+ * fixed enum to prevent free-text typos that break invoicing.
+ */
+export const billingAddressSchema = z.object({
+  // Company line is structurally optional — personal accounts leave it
+  // empty by design (Bug 2). Server-side, the wizard's UI hides the
+  // field for personals; the schema just doesn't require it.
+  company: z.string().trim().max(100).optional().default(""),
+  street: z.string().trim().min(1, "required").max(200),
+  postalCode: z.string().trim().min(1, "required").max(12),
+  city: z.string().trim().min(1, "required").max(100),
+  country: z.enum(SUPPORTED_COUNTRIES, {
+    message: "Please choose a country from the list",
+  }),
+});
+
+export type BillingAddressInput = z.infer<typeof billingAddressSchema>;
+
+/**
+ * Per-step schemas for progressive validation. Each step validates only
+ * the fields visible up to that point, so the user gets feedback at the
+ * step they're on rather than at the end.
+ *
+ * The `welcome` step has nothing to validate.
+ * The `configure` step requires a non-empty agentName.
+ * The `billing` step requires a complete billing address (with the
+ *   optional company line).
+ * The `confirm` step is the final submission and validates the union.
+ */
+export const configureStepSchema = z.object({
+  agentName: z.string().trim().min(1, "required").max(50),
+});
+
+export const billingStepSchema = z.object({
+  billingAddress: billingAddressSchema,
+});
+
+/**
+ * Full onboarding payload. Used by the API route and by the wizard's
+ * submit handler. `packageSecrets` is a free-shape map that gets
+ * encrypted by the server before it touches the DB.
+ */
+export const onboardingSchema = z.object({
+  instanceName: z
+    .string()
+    .trim()
+    .max(80)
+    .optional()
+    // Empty string from a form input → undefined so the DB stores NULL.
+    .transform((v) => (v && v.length > 0 ? v : undefined)),
+  agentName: z.string().trim().min(1, "required").max(50),
+  soulMd: z.string().max(10_000).optional(),
+  agentsMd: z.string().max(10_000).optional(),
+  packages: z.array(z.string()).optional(),
+  packageSecrets: z
+    .record(z.string(), z.record(z.string(), z.string()))
+    .optional(),
+  billingAddress: billingAddressSchema,
+  billingNotes: z.string().max(2_000).optional(),
+});
+
+export type OnboardingPayload = z.infer<typeof onboardingSchema>;
+
+/**
+ * Helper: flatten a Zod error into a flat field-path → message map.
+ * The wizard uses this to look up errors per input by their path.
+ *
+ * Returns `{}` on success (i.e. caller shouldn't call this on a parsed
+ * value; only on `safeParse(...).error`). Kept here rather than inline
+ * so both the wizard and any future field-level form (e.g. settings
+ * page reusing billingAddressSchema) can share it.
+ */
+export function fieldErrors(err: z.ZodError): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const issue of err.issues) {
+    const key = issue.path.join(".");
+    if (!(key in out)) out[key] = issue.message;
+  }
+  return out;
+}

src/lib/zitadel.ts

@@ -156,6 +156,18 @@ export interface ProjectGrantResult {
 
 /**
  * Grant the "OpenClaw Platform" project to a customer organization.
+ *
+ * The grant's `roleKeys` whitelist what authorizations the customer org
+ * may self-manage: a grant containing only "owner" prevents the customer
+ * from inviting members in the `user` role, because ZITADEL rejects
+ * `CreateAuthorization` for any role outside the grant with
+ * `Errors.Project.Role.NotFound`.
+ *
+ * Default is therefore `["owner", "user"]` — the full set of customer
+ * roles defined in `types/index.ts::CustomerRole`. Platform roles are
+ * intentionally NOT granted; those are administered separately and
+ * should never be assignable from inside a customer org.
+ *
  * Connect RPC: zitadel.project.v2.ProjectService/CreateProjectGrant
  */
 export async function createProjectGrant(
@@ -168,11 +180,44 @@ export async function createProjectGrant(
     {
       projectId: ZITADEL_PROJECT_ID,
       grantedOrganizationId: grantedOrgId,
-      roleKeys: roleKeys || ["owner"],
+      roleKeys: roleKeys || ["owner", "user"],
     }
   );
 }
 
+/**
+ * List the role keys defined on the OpenClaw Platform project.
+ *
+ * Used by the instrumentation self-check on startup to warn loudly if
+ * the canonical role keys (owner / user / platform_admin / platform_operator)
+ * are missing — a misconfiguration that silently breaks team management
+ * and customer registration. See `scripts/zitadel-roles.mjs` for repair.
+ *
+ * Returns [] on any error (network, auth, shape drift) so callers can
+ * decide what to do without inheriting a thrown exception during boot.
+ *
+ * Connect RPC: zitadel.project.v2.ProjectService/ListProjectRoles
+ */
+export async function listProjectRoles(): Promise<string[]> {
+  try {
+    const data = await connectRpc<{ projectRoles?: any[] }>(
+      "zitadel.project.v2.ProjectService",
+      "ListProjectRoles",
+      { projectId: ZITADEL_PROJECT_ID }
+    );
+    if (!data?.projectRoles || !Array.isArray(data.projectRoles)) return [];
+    return data.projectRoles
+      .map((r: any) => (typeof r?.key === "string" ? r.key : ""))
+      .filter(Boolean);
+  } catch (err) {
+    console.warn(
+      `Failed to list project roles for ${ZITADEL_PROJECT_ID} (returning empty):`,
+      err
+    );
+    return [];
+  }
+}
+
 // ---------------------------------------------------------------------------
 // v2 Authorization API — Connect RPC
 // ---------------------------------------------------------------------------
@@ -205,6 +250,35 @@ export async function createAuthorization(params: {
   );
 }
 
+/**
+ * Replace the role keys on an existing authorization.
+ *
+ * Connect RPC: zitadel.authorization.v2.AuthorizationService/UpdateAuthorization
+ *
+ * Replace, not merge: any role keys previously held by this authorization
+ * that are NOT in the new list are revoked. Pass the complete desired
+ * role set every time. The authorization's user/org/project bindings
+ * are immutable — to move a user to a different org, delete and recreate.
+ *
+ * Used by the team UI's role change flow (Bug 25). For new role grants
+ * use {@link createAuthorization}; for revocations of an entire role
+ * assignment, delete the authorization (not yet exposed; not needed at
+ * the time of writing).
+ */
+export async function updateAuthorizationRoles(
+  authorizationId: string,
+  roleKeys: string[]
+): Promise<{ changeDate?: string }> {
+  return connectRpc<{ changeDate?: string }>(
+    "zitadel.authorization.v2.AuthorizationService",
+    "UpdateAuthorization",
+    {
+      id: authorizationId,
+      roleKeys,
+    }
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Delete Organization (for rollback on partial failure)
 // ---------------------------------------------------------------------------
@@ -305,6 +379,24 @@ export interface OrgAuthorization {
  *
  * Connect RPC: zitadel.authorization.v2.AuthorizationService/ListAuthorizations
  *
+ * Implementation note (filter shape & response parsing)
+ * -----------------------------------------------------
+ * The v2 AuthorizationService accepts a `filters` array of oneof variants
+ * (project_id, organization_id, role_key, …) but the JSON-over-Connect
+ * wrapper naming differs between ZITADEL versions and isn't well-documented
+ * for ID filters. Rather than chase a moving target, we fetch all
+ * authorizations the SA can see and narrow client-side by project+org.
+ * At pilot scale this is a single sub-100-row query — well within budget.
+ *
+ * Response shape (v2 stable, confirmed against ZITADEL v4.12):
+ *   authorizations: [{
+ *     id, state,
+ *     project:      { id, name, organizationId },
+ *     organization: { id, name },
+ *     user:         { id, displayName, preferredLoginName, … },
+ *     roles:        [{ key, displayName, group }],
+ *   }]
+ *
  * Returns [] on any error so the team page can render a degraded view
  * (members visible, roles blank) rather than blowing up entirely.
  */
@@ -315,32 +407,29 @@ export async function listOrgAuthorizations(
     const data = await connectRpc<{ authorizations?: any[] }>(
       "zitadel.authorization.v2.AuthorizationService",
       "ListAuthorizations",
-      {
+      { pagination: { limit: 1000 } }
-        filters: [
-          { organizationId: orgId },
-          { projectId: ZITADEL_PROJECT_ID },
-        ],
-        // Cap at 500 — far more than a pilot org should ever need
-        pagination: { limit: 500 },
-      }
     );
     if (!data?.authorizations || !Array.isArray(data.authorizations)) {
       return [];
     }
 
-    return data.authorizations.flatMap((row: any) => {
+    return data.authorizations
-      const userId = row?.userId ?? "";
+      .filter(
-      if (!userId) return [];
+        (row: any) =>
-      return [
+          row?.project?.id === ZITADEL_PROJECT_ID &&
-        {
+          row?.organization?.id === orgId
-          authorizationId: row.id ?? row.authorizationId ?? "",
+      )
-          userId,
+      .map((row: any) => ({
-          organizationId: row.organizationId ?? orgId,
+        authorizationId: row.id ?? "",
-          projectId: row.projectId ?? ZITADEL_PROJECT_ID,
+        userId: row.user?.id ?? "",
-          roleKeys: Array.isArray(row.roleKeys) ? row.roleKeys : [],
+        organizationId: row.organization?.id ?? orgId,
-        } as OrgAuthorization,
+        projectId: row.project?.id ?? ZITADEL_PROJECT_ID,
-      ];
+        roleKeys: Array.isArray(row.roles)
-    });
+          ? row.roles
+              .map((r: any) => (typeof r?.key === "string" ? r.key : ""))
+              .filter(Boolean)
+          : [],
+      }));
   } catch (err) {
     console.warn(
       `Failed to list authorizations for org ${orgId} (returning empty):`,
@@ -402,8 +491,12 @@ export async function registerCustomer(params: {
       );
     }
 
-    // 4. Grant project to org
+    // 4. Grant project to org with both customer roles so the org's
-    const grant = await createProjectGrant(org.organizationId, ["owner"]);
+    // owner can invite users in either `owner` or `user` role afterwards.
+    const grant = await createProjectGrant(org.organizationId, [
+      "owner",
+      "user",
+    ]);
 
     // 5. Assign "owner" role to user
     await createAuthorization({

src/messages/de.json

@@ -24,7 +24,7 @@
   },
   "register": {
     "title": "Konto erstellen",
-    "subtitle": "Registrieren Sie Ihre Firma für einen in der Schweiz gehosteten KI-Assistenten",
+    "subtitle": "Richten Sie Ihren Schweizer KI-Assistenten ein",
     "companyName": "Firmenname",
     "companyNamePlaceholder": "Muster GmbH",
     "givenName": "Vorname",
@@ -38,7 +38,12 @@
     "goToLogin": "Zur Anmeldung",
     "duplicateDomain": "Für die E-Mail-Domain {domain} ist bereits ein Konto registriert. Bitte wenden Sie sich an Ihren Firmenadministrator, um eingeladen zu werden, oder kontaktieren Sie den PieCed-IT-Support, falls dies ein Fehler ist.",
     "individualToggle": "Als Privatperson registrieren",
-    "individualHint": "Aktivieren Sie diese Option, wenn Sie sich nicht im Namen eines Unternehmens registrieren. Ihr Konto wird als persönlicher Arbeitsbereich eingerichtet."
+    "individualHint": "Aktivieren Sie diese Option, wenn Sie sich nicht im Namen eines Unternehmens registrieren. Ihr Konto wird als persönlicher Arbeitsbereich eingerichtet.",
+    "accountTypeLabel": "Kontotyp",
+    "personalCardTitle": "Privat",
+    "personalCardDescription": "Für Sie persönlich, ohne Firma.",
+    "companyCardTitle": "Unternehmen",
+    "companyCardDescription": "Für Ihr Unternehmen oder Team."
   },
   "onboarding": {
     "loading": "Status wird geladen…",
@@ -89,7 +94,13 @@
     "submittedAt": "Eingereicht",
     "instanceName": "Instanzname",
     "instanceNamePlaceholder": "z.B. Produktion, Dev, Vertrieb",
-    "instanceNameHint": "Optionaler lesbarer Name, um diese Instanz von anderen in Ihrem Dashboard zu unterscheiden. Leer lassen, um den Firmennamen zu verwenden."
+    "instanceNameHint": "Optionaler lesbarer Name, um diese Instanz von anderen in Ihrem Dashboard zu unterscheiden. Leer lassen, um den Firmennamen zu verwenden.",
+    "validationError": "Bitte korrigieren Sie die Fehler vor dem Absenden.",
+    "validationErrorsTitle": "Einige Pflichtfelder fehlen oder sind ungültig:",
+    "reviewInstanceDefault": "(Standard — verwendet Firmenname)",
+    "reviewNoPackages": "Keine ausgewählt",
+    "reviewBillingTo": "Rechnungsempfänger",
+    "reviewContactEmail": "Kontakt-E-Mail"
   },
   "dashboard": {
     "title": "Dashboard",
@@ -289,7 +300,13 @@
     "roleHint": "Eigentümer können Instanzen, Abrechnung und Teammitglieder verwalten. Benutzer können nur die ihnen zugewiesenen Instanzen anzeigen.",
     "inviteButton": "Einladung senden",
     "inviteSent": "Einladung gesendet. Der Benutzer erhält eine E-Mail mit einem Link zum Festlegen des Passworts.",
-    "inviteUserExists": "Ein Benutzer mit dieser E-Mail-Adresse ist bereits registriert."
+    "inviteUserExists": "Ein Benutzer mit dieser E-Mail-Adresse ist bereits registriert.",
+    "changeRole": "Rolle ändern",
+    "roleUpdated": "Rolle aktualisiert.",
+    "roleUpdateFailed": "Rolle konnte nicht aktualisiert werden.",
+    "cancel": "Abbrechen",
+    "save": "Speichern",
+    "selfChangeBlocked": "Sie können Ihre eigene Rolle nicht ändern."
   },
   "assignments": {
     "loading": "Zuweisungen werden geladen…",
@@ -298,5 +315,13 @@
     "pickUser": "Benutzer auswählen…",
     "assign": "Zuweisen",
     "revoke": "Entfernen"
+  },
+  "countries": {
+    "CH": "Schweiz",
+    "DE": "Deutschland",
+    "AT": "Österreich",
+    "FR": "Frankreich",
+    "IT": "Italien",
+    "LI": "Liechtenstein"
   }
 }

src/messages/en.json

@@ -24,7 +24,7 @@
   },
   "register": {
     "title": "Create your account",
-    "subtitle": "Register your company for a Swiss-hosted AI assistant",
+    "subtitle": "Set up your Swiss-hosted AI assistant",
     "companyName": "Company Name",
     "companyNamePlaceholder": "Acme GmbH",
     "givenName": "First Name",
@@ -38,7 +38,12 @@
     "goToLogin": "Go to Sign In",
     "duplicateDomain": "An account for the email domain {domain} is already registered. Please contact your company administrator to be invited, or reach out to PieCed IT support if you believe this is in error.",
     "individualToggle": "Register as an individual",
-    "individualHint": "Tick this if you're not registering on behalf of a company. Your account will be set up as a personal workspace."
+    "individualHint": "Tick this if you're not registering on behalf of a company. Your account will be set up as a personal workspace.",
+    "accountTypeLabel": "Account type",
+    "personalCardTitle": "Personal",
+    "personalCardDescription": "For yourself, no company.",
+    "companyCardTitle": "Company",
+    "companyCardDescription": "For your business or team."
   },
   "onboarding": {
     "loading": "Loading status…",
@@ -89,7 +94,13 @@
     "submittedAt": "Submitted",
     "instanceName": "Instance name",
     "instanceNamePlaceholder": "e.g. Production, Dev, Sales",
-    "instanceNameHint": "Optional human-readable name to distinguish this instance from others on your dashboard. Leave blank to use your company name."
+    "instanceNameHint": "Optional human-readable name to distinguish this instance from others on your dashboard. Leave blank to use your company name.",
+    "validationError": "Please fix the errors before submitting.",
+    "validationErrorsTitle": "Some required fields are missing or invalid:",
+    "reviewInstanceDefault": "(default — uses company name)",
+    "reviewNoPackages": "None selected",
+    "reviewBillingTo": "Billing to",
+    "reviewContactEmail": "Contact email"
   },
   "dashboard": {
     "title": "Dashboard",
@@ -289,7 +300,13 @@
     "roleHint": "Owners can manage instances, billing, and team members. Users can only view instances they've been assigned to.",
     "inviteButton": "Send invitation",
     "inviteSent": "Invitation sent. The user will receive an email with a link to set their password.",
-    "inviteUserExists": "A user with this email is already registered."
+    "inviteUserExists": "A user with this email is already registered.",
+    "changeRole": "Change role",
+    "roleUpdated": "Role updated.",
+    "roleUpdateFailed": "Could not update role.",
+    "cancel": "Cancel",
+    "save": "Save",
+    "selfChangeBlocked": "You cannot change your own role."
   },
   "assignments": {
     "loading": "Loading assignments…",
@@ -298,5 +315,13 @@
     "pickUser": "Select a user…",
     "assign": "Assign",
     "revoke": "Remove"
+  },
+  "countries": {
+    "CH": "Switzerland",
+    "DE": "Germany",
+    "AT": "Austria",
+    "FR": "France",
+    "IT": "Italy",
+    "LI": "Liechtenstein"
   }
 }

src/messages/fr.json

@@ -24,7 +24,7 @@
   },
   "register": {
     "title": "Créer votre compte",
-    "subtitle": "Enregistrez votre entreprise pour un assistant IA hébergé en Suisse",
+    "subtitle": "Configurez votre assistant IA hébergé en Suisse",
     "companyName": "Nom de l'entreprise",
     "companyNamePlaceholder": "Exemple SA",
     "givenName": "Prénom",
@@ -38,7 +38,12 @@
     "goToLogin": "Aller à la connexion",
     "duplicateDomain": "Un compte pour le domaine de courriel {domain} est déjà enregistré. Veuillez contacter l'administrateur de votre entreprise pour être invité, ou contactez le support PieCed IT si vous pensez qu'il s'agit d'une erreur.",
     "individualToggle": "S'inscrire en tant que particulier",
-    "individualHint": "Cochez cette case si vous ne vous inscrivez pas au nom d'une entreprise. Votre compte sera configuré comme espace de travail personnel."
+    "individualHint": "Cochez cette case si vous ne vous inscrivez pas au nom d'une entreprise. Votre compte sera configuré comme espace de travail personnel.",
+    "accountTypeLabel": "Type de compte",
+    "personalCardTitle": "Particulier",
+    "personalCardDescription": "Pour vous, sans entreprise.",
+    "companyCardTitle": "Entreprise",
+    "companyCardDescription": "Pour votre entreprise ou équipe."
   },
   "onboarding": {
     "loading": "Chargement du statut…",
@@ -89,7 +94,13 @@
     "submittedAt": "Soumis",
     "instanceName": "Nom de l'instance",
     "instanceNamePlaceholder": "ex. Production, Dev, Ventes",
-    "instanceNameHint": "Nom lisible facultatif pour distinguer cette instance des autres sur votre tableau de bord. Laisser vide pour utiliser le nom de votre entreprise."
+    "instanceNameHint": "Nom lisible facultatif pour distinguer cette instance des autres sur votre tableau de bord. Laisser vide pour utiliser le nom de votre entreprise.",
+    "validationError": "Veuillez corriger les erreurs avant l'envoi.",
+    "validationErrorsTitle": "Certains champs obligatoires manquent ou sont invalides :",
+    "reviewInstanceDefault": "(par défaut — utilise le nom de l'entreprise)",
+    "reviewNoPackages": "Aucun sélectionné",
+    "reviewBillingTo": "Facturer à",
+    "reviewContactEmail": "E-mail de contact"
   },
   "dashboard": {
     "title": "Tableau de bord",
@@ -289,7 +300,13 @@
     "roleHint": "Les propriétaires peuvent gérer les instances, la facturation et les membres de l'équipe. Les utilisateurs ne peuvent voir que les instances qui leur sont attribuées.",
     "inviteButton": "Envoyer l'invitation",
     "inviteSent": "Invitation envoyée. L'utilisateur recevra un e-mail avec un lien pour définir son mot de passe.",
-    "inviteUserExists": "Un utilisateur avec cette adresse e-mail est déjà enregistré."
+    "inviteUserExists": "Un utilisateur avec cette adresse e-mail est déjà enregistré.",
+    "changeRole": "Modifier le rôle",
+    "roleUpdated": "Rôle mis à jour.",
+    "roleUpdateFailed": "Impossible de mettre à jour le rôle.",
+    "cancel": "Annuler",
+    "save": "Enregistrer",
+    "selfChangeBlocked": "Vous ne pouvez pas modifier votre propre rôle."
   },
   "assignments": {
     "loading": "Chargement des attributions…",
@@ -298,5 +315,13 @@
     "pickUser": "Sélectionner un utilisateur…",
     "assign": "Attribuer",
     "revoke": "Retirer"
+  },
+  "countries": {
+    "CH": "Suisse",
+    "DE": "Allemagne",
+    "AT": "Autriche",
+    "FR": "France",
+    "IT": "Italie",
+    "LI": "Liechtenstein"
   }
 }

src/messages/it.json

@@ -24,7 +24,7 @@
   },
   "register": {
     "title": "Crea il tuo account",
-    "subtitle": "Registra la tua azienda per un assistente IA ospitato in Svizzera",
+    "subtitle": "Configuri il suo assistente IA ospitato in Svizzera",
     "companyName": "Nome azienda",
     "companyNamePlaceholder": "Esempio SA",
     "givenName": "Nome",
@@ -38,7 +38,12 @@
     "goToLogin": "Vai all'accesso",
     "duplicateDomain": "Un account per il dominio e-mail {domain} è già registrato. Contatta l'amministratore della tua azienda per essere invitato, oppure contatta il supporto PieCed IT se ritieni che si tratti di un errore.",
     "individualToggle": "Registrati come privato",
-    "individualHint": "Seleziona questa opzione se non ti stai registrando per conto di un'azienda. Il tuo account sarà configurato come area di lavoro personale."
+    "individualHint": "Seleziona questa opzione se non ti stai registrando per conto di un'azienda. Il tuo account sarà configurato come area di lavoro personale.",
+    "accountTypeLabel": "Tipo di account",
+    "personalCardTitle": "Privato",
+    "personalCardDescription": "Per lei, senza azienda.",
+    "companyCardTitle": "Azienda",
+    "companyCardDescription": "Per la sua azienda o team."
   },
   "onboarding": {
     "loading": "Caricamento stato…",
@@ -89,7 +94,13 @@
     "submittedAt": "Inviato",
     "instanceName": "Nome istanza",
     "instanceNamePlaceholder": "es. Produzione, Dev, Vendite",
-    "instanceNameHint": "Nome leggibile facoltativo per distinguere questa istanza dalle altre nella dashboard. Lasciare vuoto per usare il nome dell'azienda."
+    "instanceNameHint": "Nome leggibile facoltativo per distinguere questa istanza dalle altre nella dashboard. Lasciare vuoto per usare il nome dell'azienda.",
+    "validationError": "Correggere gli errori prima di inviare.",
+    "validationErrorsTitle": "Alcuni campi obbligatori sono mancanti o non validi:",
+    "reviewInstanceDefault": "(predefinito — usa il nome dell'azienda)",
+    "reviewNoPackages": "Nessuno selezionato",
+    "reviewBillingTo": "Fatturare a",
+    "reviewContactEmail": "Email di contatto"
   },
   "dashboard": {
     "title": "Dashboard",
@@ -289,7 +300,13 @@
     "roleHint": "I proprietari possono gestire istanze, fatturazione e membri del team. Gli utenti possono solo visualizzare le istanze a loro assegnate.",
     "inviteButton": "Invia invito",
     "inviteSent": "Invito inviato. L'utente riceverà un'e-mail con un link per impostare la password.",
-    "inviteUserExists": "Un utente con questa e-mail è già registrato."
+    "inviteUserExists": "Un utente con questa e-mail è già registrato.",
+    "changeRole": "Modifica ruolo",
+    "roleUpdated": "Ruolo aggiornato.",
+    "roleUpdateFailed": "Impossibile aggiornare il ruolo.",
+    "cancel": "Annulla",
+    "save": "Salva",
+    "selfChangeBlocked": "Non puoi modificare il tuo ruolo."
   },
   "assignments": {
     "loading": "Caricamento assegnazioni…",
@@ -298,5 +315,13 @@
     "pickUser": "Seleziona un utente…",
     "assign": "Assegna",
     "revoke": "Rimuovi"
+  },
+  "countries": {
+    "CH": "Svizzera",
+    "DE": "Germania",
+    "AT": "Austria",
+    "FR": "Francia",
+    "IT": "Italia",
+    "LI": "Liechtenstein"
   }
 }

src/types/index.ts

@@ -47,6 +47,23 @@ export interface SessionUser {
   orgName: string;
   roles: Role[];
   isPlatform: boolean;
+  /**
+   * True when the user's ZITADEL org is a personal account — i.e. a
+   * single-user org provisioned by the registration flow with
+   * `isPersonal: true`. Derived from `orgName` in the session callback;
+   * see `lib/personal-org.ts::isPersonalOrgName` for the detection
+   * rules (recognises both the legacy " (Personal)" suffix and the
+   * current "personal-{8hex}" opaque form).
+   *
+   * Drives several customer-facing behaviours:
+   *   - /team page is hidden (Bug 8): there's no team to manage.
+   *   - "Create new instance" is gated to a single tenant + request
+   *     (Bug 5): personal accounts are 1-instance by design.
+   *   - The assigned-users panel on /tenants/[name] is hidden (Bug 7).
+   *   - Wherever the GUI would otherwise show `orgName`, it shows the
+   *     user's display name instead (Bug 9 — the org name is opaque).
+   */
+  isPersonal: boolean;
 }
 
 // PiecedTenant CR (pieced.ch/v1alpha1)
@@ -112,8 +129,8 @@ export interface UsageSummary {
 export interface RegistrationInput {
   /**
    * Required for company registrations. Ignored when `isPersonal` is true —
-   * the server then derives the ZITADEL org name from the user's full name
+   * the server then generates an opaque ZITADEL org name of the form
-   * with a "(Personal)" suffix.
+   * `personal-{8hex}` (see `lib/personal-org.ts::generatePersonalOrgName`).
    */
   companyName?: string;
   givenName: string;
@@ -121,10 +138,11 @@ export interface RegistrationInput {
   email: string;
   preferredLanguage?: string;
   /**
-   * Slice 4: when true, registration creates a personal account (one
+   * Slice 4 + Bug 9: when true, registration creates a personal account
-   * person, no company). Domain-uniqueness check is skipped, ZITADEL org
+   * (one person, no company). Domain-uniqueness check is skipped, the
-   * is named "{givenName} {familyName} (Personal)", subsequent tenants
+   * ZITADEL org is named `personal-{8hex}` (opaque, collision-free),
-   * are named with the `p-{requestId[:8]}` convention.
+   * the user's display name lives only on the user record, and
+   * subsequent tenants are named with the `p-{requestId[:8]}` convention.
    */
   isPersonal?: boolean;
 }