Budget setting and all dollar to chf

scripts/verify-personal-org.mjs

@@ -0,0 +1,32 @@
+// Standalone JS port of `lib/personal-org.ts::isPersonalOrgName`
+// for offline verification.
+
+const PERSONAL_ORG_SUFFIX = " (Personal)";
+
+function isPersonalOrgName(orgName) {
+  if (!orgName) return false;
+  return orgName.trimEnd().endsWith(PERSONAL_ORG_SUFFIX);
+}
+
+const cases = [
+  ["Bob Müller (Personal)", true,  "personal account"],
+  ["Acme GmbH",             false, "company"],
+  ["Acme (Personal) Ltd",   false, "suffix in middle does not count"],
+  ["Bob (Personal)  ",      true,  "trailing whitespace tolerated"],
+  ["Bob (personal)",        false, "case-sensitive — lowercase doesn't match"],
+  ["",                      false, "empty"],
+  [null,                    false, "null"],
+  [undefined,               false, "undefined"],
+  ["Bob (Personal)x",       false, "non-trailing suffix"],
+  [" (Personal)",           true,  "minimal — empty user name (degenerate but matches)"],
+];
+
+let pass = 0, fail = 0;
+for (const [name, expected, note] of cases) {
+  const got = isPersonalOrgName(name);
+  const ok = got === expected;
+  console.log(`${ok ? "PASS" : "FAIL"}  got=${got}  want=${expected}  [${note}]  input=${JSON.stringify(name)}`);
+  if (ok) pass++; else fail++;
+}
+console.log(`\n${pass} pass, ${fail} fail`);
+process.exit(fail === 0 ? 0 : 1);

scripts/verify-role-gates.mjs

@@ -0,0 +1,38 @@
+// Standalone JS port of `lib/session.ts::canMutate` and `isCustomerOwner`
+// for offline verification.
+//
+// SessionUser shape mirrors the TypeScript interface:
+//   { roles: Role[], isPlatform: boolean, ... }
+
+function canMutate(user) {
+  return user.isPlatform || user.roles.includes("owner");
+}
+
+function isCustomerOwner(user) {
+  return !user.isPlatform && user.roles.includes("owner");
+}
+
+const cases = [
+  // [user, fn, expected, note]
+  [{ isPlatform: true,  roles: ["platform_admin"] },          canMutate, true,  "platform admin can mutate"],
+  [{ isPlatform: true,  roles: ["platform_operator"] },       canMutate, true,  "platform operator can mutate"],
+  [{ isPlatform: false, roles: ["owner"] },                   canMutate, true,  "customer owner can mutate"],
+  [{ isPlatform: false, roles: ["user"] },                    canMutate, false, "customer user cannot mutate"],
+  [{ isPlatform: false, roles: [] },                          canMutate, false, "no roles cannot mutate"],
+  [{ isPlatform: false, roles: ["owner", "user"] },           canMutate, true,  "owner+user (owner wins)"],
+
+  [{ isPlatform: true,  roles: ["platform_admin", "owner"] }, isCustomerOwner, false, "platform user with owner role is NOT customerOwner"],
+  [{ isPlatform: false, roles: ["owner"] },                   isCustomerOwner, true,  "pure customer owner"],
+  [{ isPlatform: false, roles: ["user"] },                    isCustomerOwner, false, "customer user is not customerOwner"],
+  [{ isPlatform: false, roles: [] },                          isCustomerOwner, false, "empty roles is not customerOwner"],
+];
+
+let pass = 0, fail = 0;
+for (const [user, fn, expected, note] of cases) {
+  const got = fn(user);
+  const ok = got === expected;
+  console.log(`${ok ? "PASS" : "FAIL"}  got=${got}  want=${expected}  [${note}]`);
+  if (ok) pass++; else fail++;
+}
+console.log(`\n${pass} pass, ${fail} fail`);
+process.exit(fail === 0 ? 0 : 1);

scripts/verify-team.mjs

@@ -0,0 +1,98 @@
+// Standalone JS port of `lib/team.ts::isValidInviteRole` and the
+// org-membership decision used by POST /api/tenants/[name]/assignments.
+
+function isValidInviteRole(role) {
+  return role === "owner" || role === "user";
+}
+
+// Mirrors the assignment-time check: target user must exist in the
+// org's member list. Returns true if assign should proceed.
+function canAssign(targetUserId, orgMembers) {
+  return orgMembers.some((m) => m.userId === targetUserId);
+}
+
+// Mirrors the dropdown candidate-filter on the AssignedUsersPanel:
+// only `user`-role members who aren't already assigned, excluding
+// owners (who have implicit access).
+function pickCandidates(orgMembers, alreadyAssigned) {
+  const assigned = new Set(alreadyAssigned);
+  return orgMembers.filter(
+    (m) =>
+      !assigned.has(m.userId) &&
+      m.roles.includes("user") &&
+      !m.roles.includes("owner")
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Test fixtures
+// ---------------------------------------------------------------------------
+
+const orgMembers = [
+  { userId: "u-1", roles: ["owner"] },
+  { userId: "u-2", roles: ["user"] },
+  { userId: "u-3", roles: ["user"] },
+  { userId: "u-4", roles: [] },           // member with no role yet
+  { userId: "u-5", roles: ["owner", "user"] }, // dual-role
+];
+
+let pass = 0, fail = 0;
+
+console.log("--- isValidInviteRole ---");
+const inviteCases = [
+  ["owner", true,  "owner is valid"],
+  ["user",  true,  "user is valid"],
+  ["viewer", false, "viewer rejected (dropped in Slice 5)"],
+  ["platform_admin", false, "platform_admin not invitable"],
+  ["platform_operator", false, "platform_operator not invitable"],
+  ["", false, "empty rejected"],
+  ["OWNER", false, "case-sensitive"],
+];
+for (const [role, expected, note] of inviteCases) {
+  const got = isValidInviteRole(role);
+  const ok = got === expected;
+  console.log(`${ok ? "PASS" : "FAIL"}  got=${got}  want=${expected}  [${note}]`);
+  if (ok) pass++; else fail++;
+}
+
+console.log("\n--- canAssign (membership check) ---");
+const assignCases = [
+  ["u-1", true,  "owner can be assigned (idempotent for owners)"],
+  ["u-2", true,  "user-role member can be assigned"],
+  ["u-99", false, "non-member rejected"],
+  ["", false, "empty userId rejected"],
+];
+for (const [targetId, expected, note] of assignCases) {
+  const got = canAssign(targetId, orgMembers);
+  const ok = got === expected;
+  console.log(`${ok ? "PASS" : "FAIL"}  got=${got}  want=${expected}  [${note}]`);
+  if (ok) pass++; else fail++;
+}
+
+console.log("\n--- pickCandidates (assign dropdown) ---");
+const candidateCases = [
+  {
+    assigned: [],
+    expected: ["u-2", "u-3"],
+    note: "user-role members minus owners (u-5 is owner+user, excluded)",
+  },
+  {
+    assigned: ["u-2"],
+    expected: ["u-3"],
+    note: "u-2 already assigned, only u-3 remains",
+  },
+  {
+    assigned: ["u-2", "u-3"],
+    expected: [],
+    note: "everyone assigned",
+  },
+];
+for (const c of candidateCases) {
+  const got = pickCandidates(orgMembers, c.assigned).map((m) => m.userId);
+  const ok = JSON.stringify(got) === JSON.stringify(c.expected);
+  console.log(`${ok ? "PASS" : "FAIL"}  got=${JSON.stringify(got)}  want=${JSON.stringify(c.expected)}  [${c.note}]`);
+  if (ok) pass++; else fail++;
+}
+
+console.log(`\n${pass} pass, ${fail} fail`);
+process.exit(fail === 0 ? 0 : 1);

scripts/verify-visibility.mjs

@@ -0,0 +1,120 @@
+// Standalone JS port of `lib/visibility.ts` for offline verification.
+// Mirrors the synchronous decision logic — DB call (assignments) is
+// faked as an array param.
+
+function scopeFor(user) {
+  if (user.isPlatform) return "all";
+  if (user.roles.includes("owner")) return "org";
+  return "assigned";
+}
+
+function listVisibleTenants(user, all, assignments = []) {
+  const scope = scopeFor(user);
+  if (scope === "all") return all;
+
+  const orgScoped = all.filter(
+    (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
+  );
+  if (scope === "org") return orgScoped;
+
+  const allowed = new Set(assignments);
+  return orgScoped.filter((t) => allowed.has(t.metadata.name));
+}
+
+function canUserSeeTenant(user, tenant, assignments = []) {
+  const scope = scopeFor(user);
+  if (scope === "all") return true;
+  if (tenant.metadata.labels?.["pieced.ch/zitadel-org-id"] !== user.orgId) {
+    return false;
+  }
+  if (scope === "org") return true;
+  return assignments.includes(tenant.metadata.name);
+}
+
+function canSeeInflightRequests(user) {
+  return scopeFor(user) !== "assigned";
+}
+
+// ---------------------------------------------------------------------------
+// Test fixtures
+// ---------------------------------------------------------------------------
+
+const platformAdmin = { isPlatform: true,  roles: ["platform_admin"], orgId: "platform-org", id: "u-admin" };
+const owner         = { isPlatform: false, roles: ["owner"],          orgId: "org-acme",     id: "u-owner" };
+const userOnly      = { isPlatform: false, roles: ["user"],           orgId: "org-acme",     id: "u-alice" };
+const noRoles       = { isPlatform: false, roles: [],                 orgId: "org-acme",     id: "u-bob" };
+
+const tenantA = { metadata: { name: "acme-prod-12345678", labels: { "pieced.ch/zitadel-org-id": "org-acme" } } };
+const tenantB = { metadata: { name: "acme-dev-87654321",  labels: { "pieced.ch/zitadel-org-id": "org-acme" } } };
+const tenantC = { metadata: { name: "other-corp-aaaa",    labels: { "pieced.ch/zitadel-org-id": "org-other" } } };
+
+const allTenants = [tenantA, tenantB, tenantC];
+
+// ---------------------------------------------------------------------------
+// listVisibleTenants
+// ---------------------------------------------------------------------------
+
+const listCases = [
+  { user: platformAdmin, assignments: [],                    expected: ["acme-prod-12345678", "acme-dev-87654321", "other-corp-aaaa"], note: "platform sees all" },
+  { user: owner,         assignments: [],                    expected: ["acme-prod-12345678", "acme-dev-87654321"],                    note: "owner sees all org tenants" },
+  { user: owner,         assignments: ["acme-prod-12345678"], expected: ["acme-prod-12345678", "acme-dev-87654321"],                   note: "owner ignores assignment table even if rows exist" },
+  { user: userOnly,      assignments: [],                    expected: [],                                                            note: "user with no assignments sees nothing" },
+  { user: userOnly,      assignments: ["acme-prod-12345678"], expected: ["acme-prod-12345678"],                                       note: "user sees only assigned tenants" },
+  { user: userOnly,      assignments: ["acme-prod-12345678", "acme-dev-87654321"], expected: ["acme-prod-12345678", "acme-dev-87654321"], note: "user sees multiple assigned tenants" },
+  { user: userOnly,      assignments: ["other-corp-aaaa"],   expected: [],                                                            note: "stale assignment to other-org tenant doesn't leak" },
+  { user: noRoles,       assignments: [],                    expected: [],                                                            note: "no roles is treated as user-scope (empty)" },
+];
+
+let pass = 0, fail = 0;
+
+console.log("--- listVisibleTenants ---");
+for (const c of listCases) {
+  const got = listVisibleTenants(c.user, allTenants, c.assignments).map((t) => t.metadata.name);
+  const ok = JSON.stringify(got) === JSON.stringify(c.expected);
+  console.log(`${ok ? "PASS" : "FAIL"}  got=${JSON.stringify(got)}  want=${JSON.stringify(c.expected)}  [${c.note}]`);
+  if (ok) pass++; else fail++;
+}
+
+// ---------------------------------------------------------------------------
+// canUserSeeTenant
+// ---------------------------------------------------------------------------
+
+console.log("\n--- canUserSeeTenant ---");
+const seeCases = [
+  { user: platformAdmin, tenant: tenantA, assignments: [],                    expected: true,  note: "platform sees same-cluster tenant" },
+  { user: platformAdmin, tenant: tenantC, assignments: [],                    expected: true,  note: "platform sees other-org tenant" },
+  { user: owner,         tenant: tenantA, assignments: [],                    expected: true,  note: "owner sees own-org tenant" },
+  { user: owner,         tenant: tenantC, assignments: [],                    expected: false, note: "owner does NOT see other-org tenant" },
+  { user: userOnly,      tenant: tenantA, assignments: ["acme-prod-12345678"], expected: true,  note: "user sees assigned tenant" },
+  { user: userOnly,      tenant: tenantA, assignments: [],                    expected: false, note: "user does NOT see un-assigned own-org tenant" },
+  { user: userOnly,      tenant: tenantC, assignments: ["other-corp-aaaa"],   expected: false, note: "user does NOT see other-org tenant even with stale assignment" },
+];
+
+for (const c of seeCases) {
+  const got = canUserSeeTenant(c.user, c.tenant, c.assignments);
+  const ok = got === c.expected;
+  console.log(`${ok ? "PASS" : "FAIL"}  got=${got}  want=${c.expected}  [${c.note}]`);
+  if (ok) pass++; else fail++;
+}
+
+// ---------------------------------------------------------------------------
+// canSeeInflightRequests
+// ---------------------------------------------------------------------------
+
+console.log("\n--- canSeeInflightRequests ---");
+const requestCases = [
+  { user: platformAdmin, expected: true,  note: "platform sees in-flight" },
+  { user: owner,         expected: true,  note: "owner sees in-flight" },
+  { user: userOnly,      expected: false, note: "user-role does NOT see in-flight" },
+  { user: noRoles,       expected: false, note: "no-roles does NOT see in-flight" },
+];
+
+for (const c of requestCases) {
+  const got = canSeeInflightRequests(c.user);
+  const ok = got === c.expected;
+  console.log(`${ok ? "PASS" : "FAIL"}  got=${got}  want=${c.expected}  [${c.note}]`);
+  if (ok) pass++; else fail++;
+}
+
+console.log(`\n${pass} pass, ${fail} fail`);
+process.exit(fail === 0 ? 0 : 1);

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/edit/[id]/page.tsx

@@ -0,0 +1,87 @@
+import { getSessionUser, canMutate } from "@/lib/session";
+import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { getTenantRequestById } from "@/lib/db";
+import { OnboardingFlow } from "@/components/onboarding/onboarding-flow";
+import { BackLink } from "@/components/ui/back-link";
+
+/**
+ * /dashboard/edit/[id] — re-opens the onboarding wizard with the
+ * fields of a still-pending request pre-filled (Bug 6). On submit,
+ * the wizard PATCHes /api/onboarding/[id] instead of POSTing to
+ * /api/onboarding.
+ *
+ * Hard guards
+ * -----------
+ * - Logged-in customer owner (or platform user) only — same as the
+ *   /dashboard/new page.
+ * - Request must exist, belong to the caller's org, and be in 'pending'
+ *   status. Editing approved/provisioning rows would race against the
+ *   operator; we redirect such cases back to the dashboard rather than
+ *   render an invalid wizard.
+ *
+ * Pre-fill
+ * --------
+ * The wizard takes a single `editingRequest` prop — when present, it
+ * (a) pre-populates state from those values and (b) targets the PATCH
+ * endpoint on submit. When absent, it behaves exactly as today (POST
+ * to /api/onboarding).
+ *
+ * Note on encrypted secrets
+ * -------------------------
+ * Per-package secrets are NEVER decrypted server-side and exposed to
+ * the client (would be a clear security regression). When editing,
+ * the wizard opens with empty secret fields and the user re-enters
+ * any they want to change. If they don't touch the package-secrets
+ * UI, the existing encrypted blob in the DB is preserved by the
+ * PATCH endpoint (it only re-encrypts when the wizard sends a
+ * non-empty secrets payload).
+ */
+export default async function EditRequestPage({
+  params,
+}: {
+  params: Promise<{ id: string; locale: string }>;
+}) {
+  const { id } = await params;
+  const user = await getSessionUser();
+  if (!user) redirect("/login");
+  if (user.isPlatform) redirect("/dashboard");
+  if (!canMutate(user)) redirect("/dashboard");
+
+  const tr = await getTenantRequestById(id);
+  if (!tr) redirect("/dashboard");
+  if (tr.zitadelOrgId !== user.orgId) redirect("/dashboard");
+  if (tr.status !== "pending") redirect("/dashboard");
+
+  const t = await getTranslations("dashboard");
+  const tOnboarding = await getTranslations("onboarding");
+
+  return (
+    <div className="container max-w-3xl mx-auto px-4 py-8">
+      <div className="mb-8 animate-in">
+        <BackLink href="/dashboard" label={t("title")} />
+        <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
+          {tOnboarding("editRequestTitle")}
+        </h1>
+        <p className="text-sm text-text-secondary">
+          {tOnboarding("editRequestDescription")}
+        </p>
+      </div>
+      <OnboardingFlow
+        orgName={user.orgName}
+        userName={user.name}
+        userEmail={user.email}
+        editingRequest={{
+          id: tr.id,
+          instanceName: tr.instanceName ?? "",
+          agentName: tr.agentName,
+          soulMd: tr.soulMd ?? "",
+          agentsMd: tr.agentsMd ?? "",
+          packages: tr.packages,
+          billingAddress: tr.billingAddress,
+          billingNotes: tr.billingNotes ?? "",
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,83 @@
+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 { BackLink } from "@/components/ui/back-link";
+import { listTenants } from "@/lib/k8s";
+import { listActiveTenantRequestsByOrgId, getOrgBilling } from "@/lib/db";
+import { personalAccountAtCapacity } from "@/lib/personal-org";
+
+/**
+ * /dashboard/new — wizard for creating an additional instance for an
+ * existing customer. Reachable from the dashboard "+ Create new instance"
+ * link.
+ *
+ * Slice 3: this page is the entry point for follow-up instances. The
+ * first-instance case is still served inline on /dashboard. Both paths
+ * mount the same <OnboardingFlow>; the API resolves the difference
+ * server-side based on whether prior approved rows exist for the org.
+ *
+ * Platform admins are redirected to /dashboard — they shouldn't be
+ * creating tenant instances under their own org.
+ *
+ * Slice 5: customer-side `user` role is also redirected — only owners
+ * 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();
+  if (!user) redirect("/login");
+  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");
+  const orgBilling = await getOrgBilling(user.orgId);
+  const hasOrgBilling = orgBilling !== null;
+
+  return (
+    <div>
+      <div className="mb-8 animate-in">
+        <BackLink href="/dashboard" label={t("title")} />
+        <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
+          {t("createInstance")}
+        </h1>
+        <p className="text-text-secondary text-sm mt-4">
+          {t("createInstanceDescription")}
+        </p>
+      </div>
+
+      <div className="animate-in animate-in-delay-1">
+        <OnboardingFlow
+          orgName={user.orgName}
+          userName={user.name}
+          userEmail={user.email}
+          hasOrgBilling={hasOrgBilling}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -1,12 +1,23 @@
-import { getSessionUser } from "@/lib/session";
+import { getSessionUser, canMutate } from "@/lib/session";
 import { getTranslations, getFormatter } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { listTenants } from "@/lib/k8s";
-import { getTenantRequestByOrgId } from "@/lib/db";
+import {
+  listActiveTenantRequestsByOrgId,
+  syncProvisioningStatuses,
+  getOrgBilling,
+} from "@/lib/db";
+import {
+  listVisibleTenants,
+  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 { UsageDisplay } from "@/components/dashboard/usage-display";
+import { WarningBadge } from "@/components/ui/warning-badge";
 import { OnboardingFlow } from "@/components/onboarding/onboarding-flow";
+import { ProvisioningStatus } from "@/components/onboarding/provisioning-status";
 import { formatDateTime } from "@/lib/format";
 import Link from "next/link";
 
@@ -20,7 +31,7 @@ export default async function DashboardPage() {
 
   const allTenants = await listTenants();
 
-  // Platform users see overview of all tenants
+  // Platform users see overview of all tenants — unchanged from pre-Slice-3.
   if (user.isPlatform) {
     const phaseCount = allTenants.reduce<Record<string, number>>((acc, t) => {
       const phase = t.status?.phase ?? "Pending";
@@ -133,19 +144,161 @@ export default async function DashboardPage() {
     );
   }
 
-  // Regular user: find their tenant
-  const myTenant = allTenants.find(
+  // ---------------------------------------------------------------------
+  // Customer view (Slice 3 multi-tenant + Slice 6 visibility scoping)
+  // ---------------------------------------------------------------------
+
+  // Slice 6: orgTenants becomes "visible tenants for this user". For an
+  // owner that's all of the org's tenants; for a `user`-role member
+  // it's only the tenants they've been assigned to via
+  // tenant_user_assignments. The dashboard renders fewer cards in the
+  // user-role case but otherwise uses the same template.
+  const orgTenants = await listVisibleTenants(user, allTenants);
+
+  // For the "no instances yet" empty state, we want to know whether
+  // this user is being scoped down. A `user`-role with 0 visible
+  // tenants gets a different message than an owner with 0 tenants
+  // (the user might just need an assignment; the owner needs to
+  // create one).
+  const userScoped = isUserScoped(user);
+
+  // Pending/in-flight requests are only shown to roles that can act on
+  // them. `user`-role customers see no request cards.
+  //
+  // syncProvisioningStatuses runs on every dashboard load: it walks
+  // active and provisioning rows and reconciles them against the
+  // current cluster state. Without this, the operator-initiated
+  // 60-day TTL deletion (Bug 37b) leaves the portal showing "Your
+  // assistant is ready!" cards for tenants that no longer exist —
+  // the operator deletes the CR, but the DB row stays at active=true
+  // until something updates it. Running the sync at every dashboard
+  // load keeps the portal eventually consistent with the cluster
+  // without needing a separate cron/job.
+  //
+  // Cost: one K8s GET per row in (active, provisioning) status. At
+  // pilot scale this is small; if it grows we'd cache or move to a
+  // periodic background job.
+  if (canSeeInflightRequests(user)) {
+    await syncProvisioningStatuses();
+  }
+  const orgRequests = canSeeInflightRequests(user)
+    ? await listActiveTenantRequestsByOrgId(user.orgId)
+    : [];
+
+  // Bug 35: orgs that already have a billing record skip the wizard's
+  // billing step. Fetched here so the dashboard's empty-state mount of
+  // OnboardingFlow knows what to do; for the additional-tenant flow at
+  // /dashboard/new we fetch the same flag in that route's own server
+  // component.
+  const orgBilling = await getOrgBilling(user.orgId);
+  const hasOrgBilling = orgBilling !== null;
+
+  // Pending requests that don't yet have a tenant CR. Once the CR
+  // exists, the tenant card carries the live phase, so a separate
+  // "request" card would just duplicate it. We compare against
+  // *all* org tenants here (not just visible ones) — otherwise a
+  // request whose tenant is invisible to the caller would erroneously
+  // show as in-flight.
+  const orgScopedTenants = allTenants.filter(
     (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
   );
+  const inflightRequests = orgRequests.filter(
+    (r) =>
+      // Only show provision (initial creation) requests on the
+      // dashboard. Resume requests (Bug 37a) belong with their
+      // specific tenant — the SubscriptionToggle on the tenant
+      // detail page renders the pending state there. Showing them
+      // on the dashboard too would duplicate the surface and
+      // confuse customers about which tenant they refer to.
+      r.requestType !== "resume" &&
+      (!r.tenantName ||
+        !orgScopedTenants.some((t) => t.metadata.name === r.tenantName))
+  );
 
-  // No tenant → check for existing request, show onboarding flow
-  if (!myTenant) {
-    const existingRequest = await getTenantRequestByOrgId(user.orgId);
-    // Treat "deleted" as no request — customer can re-onboard
-    const initialState =
-      !existingRequest || existingRequest.status === "deleted"
-        ? "no_request"
-        : existingRequest.status;
+  // Slice 5: only owners (and platform users, who'd typically be using
+  // 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.
+  //
+  // 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.
+  //
+  // Three sub-cases:
+  //   1. owner / platform with 0 tenants and 0 requests → show wizard.
+  //   2. owner / platform with 0 visibility but the org HAS tenants →
+  //      shouldn't happen (owners see all org tenants). Defensive
+  //      fall-through to the wizard.
+  //   3. user-role with 0 visible tenants → show "ask your owner"
+  //      message, with copy distinguishing whether the org has any
+  //      tenants at all.
+  if (orgTenants.length === 0 && inflightRequests.length === 0) {
+    if (userScoped) {
+      // Slice 6 empty state for `user` role. The org might or might
+      // not have tenants — either way this user has none assigned.
+      // The two messages are subtly different: "no instances exist"
+      // means owner needs to create one; "you're not assigned" means
+      // owner needs to grant access.
+      const orgHasTenants = orgScopedTenants.length > 0;
+      return (
+        <div>
+          <div className="mb-8 animate-in">
+            <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
+              {t("title")}
+            </h1>
+            <p className="text-text-secondary text-sm mt-4">
+              {t("welcome", { name: user.name || user.email })}
+            </p>
+          </div>
+          <Card className="animate-in animate-in-delay-1">
+            <div className="text-center py-6">
+              <h2 className="font-display text-base font-semibold text-text-primary mb-2">
+                {orgHasTenants
+                  ? t("noAssignmentsTitle")
+                  : t("noInstancesYetTitle")}
+              </h2>
+              <p className="text-sm text-text-secondary max-w-sm mx-auto">
+                {orgHasTenants
+                  ? t("noAssignmentsDescription")
+                  : t("noInstancesYetDescription")}
+              </p>
+            </div>
+          </Card>
+        </div>
+      );
+    }
+
+    if (!canCreate) {
+      // Belt-and-braces: any role that's neither owner-with-create nor
+      // user-scope ends up here (e.g. weird cases like a session with
+      // no roles at all). Same generic message as before.
+      return (
+        <div>
+          <div className="mb-8 animate-in">
+            <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
+              {t("title")}
+            </h1>
+            <p className="text-text-secondary text-sm mt-4">
+              {t("welcome", { name: user.name || user.email })}
+            </p>
+          </div>
+          <Card className="animate-in animate-in-delay-1">
+            <p className="text-sm text-text-secondary text-center py-6">
+              {t("noAccessNoInstances")}
+            </p>
+          </Card>
+        </div>
+      );
+    }
 
     return (
       <div>
@@ -161,68 +314,119 @@ export default async function DashboardPage() {
         <div className="animate-in animate-in-delay-1">
           <OnboardingFlow
             orgName={user.orgName}
-            initialState={initialState as any}
+            userName={user.name}
+            userEmail={user.email}
+            hasOrgBilling={hasOrgBilling}
           />
         </div>
       </div>
     );
   }
 
-  const tenantName = myTenant.metadata.name;
-
+  // Returning customer: list of tenants + in-flight requests, plus
+  // a button to add another instance (owners only).
   return (
     <div>
-      <div className="mb-8 animate-in">
-        <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
-          {t("title")}
-        </h1>
-        <p className="text-text-secondary text-sm mt-4">
-          {t("welcome", { name: user.name || user.email })}
-        </p>
+      <div className="mb-8 animate-in flex items-start justify-between gap-4">
+        <div>
+          <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
+            {t("title")}
+          </h1>
+          <p className="text-text-secondary text-sm mt-4">
+            {t("welcome", { name: user.name || user.email })}
+          </p>
+        </div>
+
+        {canCreate && (
+          <Link
+            href="/dashboard/new"
+            className="shrink-0 inline-flex items-center gap-1.5 py-2 px-4 bg-accent text-white text-xs font-medium rounded-lg hover:bg-accent-dim transition-colors"
+          >
+            <span>+</span> {t("createInstance")}
+          </Link>
+        )}
       </div>
 
-      {/* Instance status card */}
-      <div className="mb-6 animate-in animate-in-delay-1">
-        <Card>
-          <CardHeader>{t("instanceStatus")}</CardHeader>
-          <div className="flex items-center gap-4">
-            <StatusBadge phase={myTenant.status?.phase ?? "Pending"} />
-            {myTenant.spec.agentName && (
-              <span className="text-sm text-text-secondary">
-                {myTenant.spec.agentName}
-              </span>
-            )}
+      {/* In-flight (pending/approved/provisioning/rejected) requests */}
+      {inflightRequests.length > 0 && (
+        <div className="mb-8 animate-in animate-in-delay-1">
+          <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+            {t("inflightRequests")}
+          </h2>
+          <div className="space-y-3">
+            {inflightRequests.map((r) => (
+              <ProvisioningStatus
+                key={r.id}
+                requestId={r.id}
+                canAct={canMutate(user)}
+              />
+            ))}
           </div>
-          {myTenant.spec.packages && myTenant.spec.packages.length > 0 && (
-            <div className="flex flex-wrap gap-2 mt-3">
-              {myTenant.spec.packages.map((pkg) => (
-                <span
-                  key={pkg}
-                  className="text-xs font-mono bg-accent/10 text-accent border border-accent/20 rounded-full px-2.5 py-0.5"
-                >
-                  {pkg}
-                </span>
-              ))}
-            </div>
-          )}
-        </Card>
-      </div>
+        </div>
+      )}
 
-      {/* Usage — no teamId passed, backend resolves from session */}
-      <div className="mb-6 animate-in animate-in-delay-2">
-        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
-          {t("usage")}
-        </h2>
-        <UsageDisplay />
-      </div>
+      {/* Active tenants */}
+      {orgTenants.length > 0 && (
+        <div className="animate-in animate-in-delay-2">
+          <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+            {t("instances")}
+          </h2>
+          <div className="grid gap-4 md:grid-cols-2">
+            {orgTenants.map((tenant) => (
+              <Link
+                key={tenant.metadata.name}
+                href={`/tenants/${tenant.metadata.name}`}
+                className="block group"
+              >
+                <Card className="h-full hover:border-accent/40 transition-colors">
+                  <div className="flex items-start justify-between gap-3 mb-3">
+                    <div className="min-w-0">
+                      <div className="text-sm font-semibold text-text-primary truncate">
+                        {tenant.spec.displayName || tenant.metadata.name}
+                      </div>
+                      <div className="font-mono text-xs text-text-muted truncate mt-0.5">
+                        {tenant.metadata.name}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 shrink-0">
+                      <StatusBadge phase={tenant.status?.phase ?? "Pending"} />
+                      <WarningBadge warnings={tenant.status?.warnings ?? []} />
+                    </div>
+                  </div>
 
-      {/* Link to tenant detail */}
-      <Link
-        href={`/tenants/${tenantName}`}
-        className="inline-flex items-center gap-1.5 text-xs font-medium text-accent hover:text-accent-dim transition-colors animate-in animate-in-delay-3"
-      >
-        <span>→</span> {t("manage")}
-      </Link>
+                  {tenant.spec.agentName && (
+                    <div className="text-xs text-text-secondary mb-2">
+                      {tenant.spec.agentName}
+                    </div>
+                  )}
+
+                  {tenant.spec.packages && tenant.spec.packages.length > 0 && (
+                    <div className="flex flex-wrap gap-1.5 mb-3">
+                      {tenant.spec.packages.slice(0, 4).map((pkg) => (
+                        <span
+                          key={pkg}
+                          className="text-xs font-mono bg-accent/10 text-accent border border-accent/20 rounded-full px-2 py-0.5"
+                        >
+                          {pkg}
+                        </span>
+                      ))}
+                      {tenant.spec.packages.length > 4 && (
+                        <span className="text-xs text-text-muted">
+                          +{tenant.spec.packages.length - 4}
+                        </span>
+                      )}
+                    </div>
+                  )}
+
+                  <div className="text-xs font-medium text-accent group-hover:text-accent-dim transition-colors">
+                    {t("manage")} →
+                  </div>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 }

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

@@ -6,12 +6,41 @@ import { useRouter } from "next/navigation";
 import { Card } from "@/components/ui/card";
 
 type FormState = "idle" | "submitting" | "success" | "error";
+type AccountType = "personal" | "company";
 
+/**
+ * Registration entry — Bug 1 redesign.
+ *
+ * Previously a hidden checkbox ("Register as an individual") sat on top
+ * of the company-flavoured form, which buried personal accounts under a
+ * 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: "",
@@ -21,32 +50,40 @@ export default function RegisterPage() {
   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 generates an opaque ZITADEL org name
+      // (`personal-{8hex}`); the Zod schema accepts the omission.
+      const body: Record<string, unknown> = {
+        givenName: form.givenName,
+        familyName: form.familyName,
+        email: form.email,
+        isPersonal,
+      };
+      if (!isPersonal) {
+        body.companyName = form.companyName;
+      }
+
       const res = await fetch("/api/register", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          companyName: form.companyName,
-          givenName: form.givenName,
-          familyName: form.familyName,
-          email: form.email,
-        }),
+        body: JSON.stringify(body),
       });
 
       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 }));
         }
@@ -102,100 +139,212 @@ export default function RegisterPage() {
           <p className="text-sm text-text-secondary">{t("subtitle")}</p>
         </div>
 
-        <Card className="animate-in animate-in-delay-1">
-          <form onSubmit={handleSubmit} className="space-y-4">
-            {/* Company name */}
-            <div>
-              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                {t("companyName")}
-              </label>
-              <input
-                name="companyName"
-                type="text"
-                required
-                value={form.companyName}
-                onChange={handleChange}
-                placeholder={t("companyNamePlaceholder")}
-                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
-              />
-            </div>
+        {/* Account type chooser — required first step */}
+        <div
+          role="radiogroup"
+          aria-label={t("accountTypeLabel")}
+          className="grid grid-cols-2 gap-3 mb-6 animate-in animate-in-delay-1"
+        >
+          <AccountTypeCard
+            selected={accountType === "personal"}
+            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>
 
-            {/* Name row */}
-            <div className="grid grid-cols-2 gap-3">
+        {/* 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">
+                    {t("companyName")}
+                  </label>
+                  <input
+                    name="companyName"
+                    type="text"
+                    required
+                    value={form.companyName}
+                    onChange={handleChange}
+                    placeholder={t("companyNamePlaceholder")}
+                    className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                  />
+                </div>
+              )}
+
+              {/* Name row */}
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                    {t("givenName")}
+                  </label>
+                  <input
+                    name="givenName"
+                    type="text"
+                    required
+                    value={form.givenName}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                    {t("familyName")}
+                  </label>
+                  <input
+                    name="familyName"
+                    type="text"
+                    required
+                    value={form.familyName}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                  />
+                </div>
+              </div>
+
+              {/* Email */}
               <div>
                 <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                  {t("givenName")}
+                  {t("email")}
                 </label>
                 <input
-                  name="givenName"
-                  type="text"
+                  name="email"
+                  type="email"
                   required
-                  value={form.givenName}
+                  value={form.email}
                   onChange={handleChange}
+                  placeholder={isPersonal ? "you@example.ch" : "you@company.ch"}
                   className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
                 />
               </div>
-              <div>
-                <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                  {t("familyName")}
-                </label>
-                <input
-                  name="familyName"
-                  type="text"
-                  required
-                  value={form.familyName}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
-                />
-              </div>
-            </div>
 
-            {/* Email */}
-            <div>
-              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                {t("email")}
-              </label>
-              <input
-                name="email"
-                type="email"
-                required
-                value={form.email}
-                onChange={handleChange}
-                placeholder="you@company.ch"
-                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
-              />
-            </div>
+              {error && (
+                <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
+                  {error}
+                </div>
+              )}
 
-            {error && (
-              <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
-                {error}
-              </div>
-            )}
+              <button
+                type="submit"
+                disabled={state === "submitting"}
+                className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {state === "submitting" ? tCommon("loading") : t("submit")}
+              </button>
+            </form>
 
-            <button
-              type="submit"
-              disabled={state === "submitting"}
-              className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {state === "submitting" ? tCommon("loading") : t("submit")}
-            </button>
-          </form>
+            <p className="text-xs text-text-muted text-center mt-4">
+              {t("hasAccount")}{" "}
+              <a
+                href="/login"
+                className="text-accent hover:text-accent-dim transition-colors"
+              >
+                {tCommon("login")}
+              </a>
+            </p>
+          </Card>
+        )}
 
-          <p className="text-xs text-text-muted text-center mt-4">
-            {t("hasAccount")}{" "}
-            <a
-              href="/login"
-              className="text-accent hover:text-accent-dim transition-colors"
-            >
-              {tCommon("login")}
-            </a>
-          </p>
-        </Card>
-
-        <p className="text-xs text-text-muted text-center mt-6 animate-in animate-in-delay-2">
+        <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]/settings/billing/page.tsx

@@ -0,0 +1,47 @@
+import { getTranslations } from "next-intl/server";
+import { redirect, notFound } from "next/navigation";
+import { getSessionUser, canMutate } from "@/lib/session";
+import { getOrgBilling } from "@/lib/db";
+import { BillingSettingsForm } from "@/components/settings/billing-settings-form";
+
+/**
+ * /settings/billing — view and edit org-scoped billing (Bug 34/35).
+ *
+ * Server-side fetches the existing record (if any) and passes it to
+ * the client form. The form posts to PUT /api/billing on submit.
+ *
+ * Access: same gate as the API — owners and platform admins. `user`
+ * role redirects to /settings (which also wouldn't list billing for
+ * them). 403 here would be friendlier than redirect, but the most
+ * likely cause of a `user` landing on this URL is sharing a bookmark
+ * with their owner — silent redirect is gentle.
+ */
+export default async function BillingSettingsPage() {
+  const user = await getSessionUser();
+  if (!user) redirect("/login");
+  if (!canMutate(user)) {
+    redirect("/settings");
+  }
+  const t = await getTranslations("settingsBilling");
+
+  const billing = await getOrgBilling(user.orgId);
+
+  return (
+    <main className="max-w-3xl mx-auto px-6 py-8">
+      <div className="mb-8 animate-in">
+        <h1 className="font-display text-2xl font-semibold accent-rule">
+          {t("title")}
+        </h1>
+        <p className="text-sm text-text-secondary mt-3">{t("subtitle")}</p>
+      </div>
+
+      <BillingSettingsForm
+        initial={billing}
+        isPersonal={user.isPersonal}
+        orgName={user.orgName}
+        userName={user.name}
+        userEmail={user.email}
+      />
+    </main>
+  );
+}

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

@@ -0,0 +1,81 @@
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+import Link from "next/link";
+import { getSessionUser, canMutate } from "@/lib/session";
+import { Card } from "@/components/ui/card";
+
+/**
+ * /settings — landing page for user/org-level configuration (Bug 35
+ * intentionally landed billing here rather than at /billing because we
+ * expect more settings categories: notifications, API keys, default
+ * workspace templates, etc.). Currently lists a single category card;
+ * the layout scales to a sidebar nav once there are 3+.
+ *
+ * Access: any authenticated user (the cards themselves gate further;
+ * non-owner users would not see "Billing" as actionable, etc.).
+ */
+export default async function SettingsPage() {
+  const user = await getSessionUser();
+  if (!user) redirect("/login");
+  const t = await getTranslations("settings");
+
+  // Build the list of settings cards. Each entry has a stable key, a
+  // route, and a visibility predicate. Currently only billing; this
+  // shape leaves headroom for adding more without restructuring.
+  const sections: Array<{
+    key: string;
+    href: string;
+    title: string;
+    description: string;
+    visible: boolean;
+  }> = [
+    {
+      key: "billing",
+      href: "/settings/billing",
+      title: t("billingTitle"),
+      // Personal customers (B2C) don't have a VAT number; the
+      // description shouldn't mention one. Same pattern used in the
+      // form itself (label/field gating).
+      description: user.isPersonal
+        ? t("billingDescriptionPersonal")
+        : t("billingDescription"),
+      // Owners and platform admins can edit billing. `user` role
+      // can't even view it — billing details aren't useful to them.
+      visible: canMutate(user),
+    },
+  ];
+
+  const visibleSections = sections.filter((s) => s.visible);
+
+  return (
+    <main className="max-w-4xl mx-auto px-6 py-8">
+      <div className="mb-8 animate-in">
+        <h1 className="font-display text-2xl font-semibold accent-rule">
+          {t("title")}
+        </h1>
+        <p className="text-sm text-text-secondary mt-3">{t("subtitle")}</p>
+      </div>
+
+      {visibleSections.length === 0 && (
+        <Card className="animate-in animate-in-delay-1">
+          <p className="text-sm text-text-secondary">{t("nothingForYou")}</p>
+        </Card>
+      )}
+
+      <div className="grid gap-3 animate-in animate-in-delay-1">
+        {visibleSections.map((s) => (
+          <Link
+            key={s.key}
+            href={s.href}
+            className="block rounded-xl border border-border bg-surface-1 p-4 hover:border-text-secondary transition-colors"
+          >
+            <div className="font-medium text-text-primary">{s.title}</div>
+            <div className="text-xs text-text-secondary mt-1">
+              {s.description}
+            </div>
+          </Link>
+        ))}
+      </div>
+    </main>
+  );
+}

src/app/[locale]/support/[id]/page.tsx

@@ -0,0 +1,103 @@
+import { notFound, redirect } from "next/navigation";
+import { getTranslations, getFormatter } from "next-intl/server";
+import { getSessionUser } from "@/lib/session";
+import {
+  getSupportTicketById,
+  listCommentsForTicket,
+} from "@/lib/db";
+import { Card } from "@/components/ui/card";
+import { BackLink } from "@/components/ui/back-link";
+import { TicketStatusBadge } from "@/components/support/ticket-status-badge";
+import { TicketCategoryLabel } from "@/components/support/ticket-category-label";
+import { TicketThread } from "@/components/support/ticket-thread";
+import { TicketAdminControls } from "@/components/support/ticket-admin-controls";
+import { formatDateTime } from "@/lib/format";
+
+/**
+ * /support/[id] — single ticket detail.
+ *
+ * Same UI for customer and admin; admin gets an extra
+ * `<TicketAdminControls>` block for changing status/category. The
+ * customer side gets a "Close ticket" link if they want to mark it
+ * resolved themselves.
+ *
+ * Authorization mirrors the API: customer sees their own; platform
+ * admin sees any. 404 (not 403) when a customer accesses someone
+ * else's ticket — don't leak existence.
+ */
+export default async function TicketDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const user = await getSessionUser();
+  if (!user) redirect("/login");
+  const { id } = await params;
+  const ticket = await getSupportTicketById(id);
+  if (!ticket) notFound();
+  if (!user.isPlatform && ticket.zitadelUserId !== user.id) {
+    notFound();
+  }
+  const comments = await listCommentsForTicket(id);
+  const t = await getTranslations("support");
+  const f = await getFormatter();
+
+  return (
+    <main className="max-w-3xl mx-auto px-6 py-8">
+      <div className="mb-6 animate-in">
+        <BackLink href="/support" label={t("title")} />
+        <div className="flex items-start justify-between gap-3 mt-2">
+          <h1 className="font-display text-2xl font-semibold">
+            {ticket.title}
+          </h1>
+          <TicketStatusBadge status={ticket.status} />
+        </div>
+        <div className="text-xs text-text-muted mt-2 flex items-center gap-2 flex-wrap">
+          <TicketCategoryLabel category={ticket.category} />
+          <span>·</span>
+          <span>
+            {t("openedBy", {
+              name: ticket.contactName,
+              when: formatDateTime(ticket.createdAt, f),
+            })}
+          </span>
+          <span>·</span>
+          <span className="font-mono">#{ticket.id.slice(0, 8)}</span>
+        </div>
+      </div>
+
+      {/* Original ticket description, rendered as the first message
+          in the thread. Visually distinct via the customer-author
+          styling (handled inside <TicketThread>). */}
+      <div className="space-y-4 animate-in animate-in-delay-1">
+        <Card>
+          <div className="flex items-center justify-between text-xs text-text-muted mb-2">
+            <span className="font-medium text-text-primary">
+              {ticket.contactName}
+            </span>
+            <span>{formatDateTime(ticket.createdAt, f)}</span>
+          </div>
+          <div className="text-sm text-text-primary whitespace-pre-wrap">
+            {ticket.description}
+          </div>
+        </Card>
+
+        <TicketThread
+          ticketId={ticket.id}
+          ticketStatus={ticket.status}
+          comments={comments}
+          isPlatform={user.isPlatform}
+          isOwnTicket={ticket.zitadelUserId === user.id}
+        />
+
+        {user.isPlatform && (
+          <TicketAdminControls
+            ticketId={ticket.id}
+            currentStatus={ticket.status}
+            currentCategory={ticket.category}
+          />
+        )}
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { getSessionUser } from "@/lib/session";
+import { TicketCreateForm } from "@/components/support/ticket-create-form";
+import { BackLink } from "@/components/ui/back-link";
+
+/**
+ * /support/new — create ticket form.
+ *
+ * Platform admins shouldn't open tickets via this UI (they'd be
+ * opening one as if from a customer, which is confusing). Redirect
+ * them back to the queue. Non-admins of any role can create.
+ */
+export default async function NewTicketPage() {
+  const user = await getSessionUser();
+  if (!user) redirect("/login");
+  if (user.isPlatform) redirect("/support");
+  const t = await getTranslations("support");
+
+  return (
+    <main className="max-w-3xl mx-auto px-6 py-8">
+      <div className="mb-8 animate-in">
+        <BackLink href="/support" label={t("title")} />
+        <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
+          {t("newTicketTitle")}
+        </h1>
+        <p className="text-text-secondary text-sm mt-4">
+          {t("newTicketSubtitle")}
+        </p>
+      </div>
+
+      <div className="animate-in animate-in-delay-1">
+        <TicketCreateForm />
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,97 @@
+import { redirect } from "next/navigation";
+import Link from "next/link";
+import { getTranslations, getFormatter } from "next-intl/server";
+import { getSessionUser } from "@/lib/session";
+import {
+  listSupportTicketsForUser,
+  listAllSupportTickets,
+} from "@/lib/db";
+import { Card } from "@/components/ui/card";
+import { formatRelative } from "@/lib/format";
+import { TicketStatusBadge } from "@/components/support/ticket-status-badge";
+import { TicketCategoryLabel } from "@/components/support/ticket-category-label";
+
+/**
+ * /support — ticket list.
+ *
+ * Customers see their own tickets only (per Feature 5: per-user
+ * scope, NOT per-org). Platform admins see the global queue. Same
+ * UI shell, different list source — the rendering logic is
+ * identical because the per-row data is the same shape.
+ *
+ * Sorting: newest activity first (the DB query already orders by
+ * updated_at DESC). Open tickets bubble to the top by virtue of
+ * having recent activity, but we don't sort by status; that's a
+ * filter the admin can add later if the queue grows.
+ */
+export default async function SupportListPage() {
+  const user = await getSessionUser();
+  if (!user) redirect("/login");
+  const t = await getTranslations("support");
+  const f = await getFormatter();
+
+  const tickets = user.isPlatform
+    ? await listAllSupportTickets()
+    : await listSupportTicketsForUser(user.id);
+
+  return (
+    <main className="max-w-5xl mx-auto px-6 py-8">
+      <div className="mb-8 animate-in flex items-end justify-between">
+        <div>
+          <h1 className="font-display text-2xl font-semibold accent-rule">
+            {user.isPlatform ? t("titleAdmin") : t("title")}
+          </h1>
+          <p className="text-sm text-text-secondary mt-3">
+            {user.isPlatform ? t("subtitleAdmin") : t("subtitle")}
+          </p>
+        </div>
+        {!user.isPlatform && (
+          <Link
+            href="/support/new"
+            className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors"
+          >
+            {t("newTicket")}
+          </Link>
+        )}
+      </div>
+
+      {tickets.length === 0 ? (
+        <Card className="animate-in animate-in-delay-1">
+          <p className="text-sm text-text-secondary text-center py-6">
+            {user.isPlatform ? t("emptyAdmin") : t("empty")}
+          </p>
+        </Card>
+      ) : (
+        <div className="space-y-2 animate-in animate-in-delay-1">
+          {tickets.map((tk) => (
+            <Link
+              key={tk.id}
+              href={`/support/${tk.id}`}
+              className="block rounded-xl border border-border bg-surface-1 p-4 hover:border-text-secondary transition-colors"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="font-medium text-text-primary truncate">
+                    {tk.title}
+                  </div>
+                  <div className="text-xs text-text-muted mt-1 flex items-center gap-2">
+                    <TicketCategoryLabel category={tk.category} />
+                    <span>·</span>
+                    <span>{formatRelative(tk.updatedAt, f)}</span>
+                    {user.isPlatform && (
+                      <>
+                        <span>·</span>
+                        <span className="font-mono">{tk.contactEmail}</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+                <TicketStatusBadge status={tk.status} />
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}

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

@@ -0,0 +1,70 @@
+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";
+
+/**
+ * /team — manage org members.
+ *
+ * Visible to owners and platform users only (`canMutate`). User-role
+ * members are redirected away — they shouldn't browse the roster.
+ *
+ * The page loads members server-side for the initial render. The
+ * `<TeamList>` and `<InviteForm>` client components handle live
+ * updates after invites and refreshes.
+ */
+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");
+
+  const members = await getOrgMembers(user.orgId);
+
+  return (
+    <div>
+      <div className="mb-8 animate-in">
+        <BackLink href="/dashboard" label={tDashboard("title")} />
+        <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
+          {t("title")}
+        </h1>
+        <p className="text-text-secondary text-sm mt-4">{t("description")}</p>
+      </div>
+
+      <section className="mb-8 animate-in animate-in-delay-1">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+          {t("inviteSectionTitle")}
+        </h2>
+        <Card>
+          <InviteForm />
+        </Card>
+      </section>
+
+      <section className="animate-in animate-in-delay-2">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+          {t("membersSectionTitle")}{" "}
+          <span className="text-text-muted/60 tabular-nums">
+            ({members.length})
+          </span>
+        </h2>
+        <TeamList
+          initialMembers={members}
+          currentUserId={user.id}
+          canEditRoles={isCustomerOwner(user)}
+        />
+      </section>
+    </div>
+  );
+}

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

@@ -1,12 +1,17 @@
-import { getSessionUser } from "@/lib/session";
+import { getSessionUser, canMutate } from "@/lib/session";
 import { getTranslations, getFormatter } from "next-intl/server";
 import { redirect, notFound } from "next/navigation";
 import { getTenant } from "@/lib/k8s";
+import { canUserSeeTenant } from "@/lib/visibility";
+import { getPendingResumeRequestForTenant } from "@/lib/db";
 import { StatusBadge } from "@/components/ui/status-badge";
+import { WarningBadge } from "@/components/ui/warning-badge";
 import { UsageDisplay } from "@/components/dashboard/usage-display";
 import { PackageList } from "@/components/packages/package-list";
 import { WorkspaceEditor } from "@/components/packages/workspace-editor";
 import { ChannelUsers } from "@/components/channel-users/channel-users";
+import { AssignedUsersPanel } from "@/components/tenants/assigned-users-panel";
+import { SubscriptionToggle } from "@/components/tenants/subscription-toggle";
 import { formatDateTime, formatRelative } from "@/lib/format";
 
 const CHANNEL_PACKAGES = ["telegram", "discord", "email"];
@@ -26,14 +31,56 @@ export default async function TenantDetailPage({
   const tenant = await getTenant(name);
   if (!tenant) notFound();
 
-  // Scope check
-  if (
-    !user.isPlatform &&
-    tenant.metadata.labels?.["pieced.ch/zitadel-org-id"] !== user.orgId
-  ) {
+  // Slice 6: visibility check encompasses org membership AND, for
+  // user-role members, the tenant_user_assignments check. notFound()
+  // (404) rather than redirect/403 to avoid leaking tenant existence.
+  if (!(await canUserSeeTenant(user, tenant))) {
     notFound();
   }
 
+  // Slice 5: editable surface gated on owner role. Platform users always
+  // can edit; customer-side, only `owner` may. `user`-role members see
+  // the same page but with edit controls hidden / fields read-only.
+  const canEdit = canMutate(user);
+
+  // TEMP DIAGNOSTIC for budget-card non-rendering. Logs the prop
+  // values that flow into UsageDisplay so we can see which one is
+  // turning the editable variant off. Remove once cause is found.
+  console.log(
+    "[tenant page] budget edit props",
+    JSON.stringify({
+      tenantName: name,
+      canEdit,
+      isPlatform: user.isPlatform,
+      roles: user.roles,
+    })
+  );
+
+  // Bug 31: customer-side cancel/resume control. Same gate as canEdit
+  // — only owners (or platform staff) may toggle the subscription.
+  // The current state comes from spec.suspend on the CR.
+  const isSuspended = Boolean(tenant.spec.suspend);
+
+  // Bug 37a: when the tenant is suspended, an owner can request
+  // reactivation (admin-gated). Look up whether one is in flight so
+  // the SubscriptionToggle can render the right state.
+  const pendingResumeRequest = isSuspended
+    ? await getPendingResumeRequestForTenant(name)
+    : null;
+
+  // 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) =>
@@ -41,18 +88,12 @@ export default async function TenantDetailPage({
   );
   const channelUsers = tenant.spec.channelUsers || {};
 
-  // Admins inspecting another tenant's usage: pass teamId AND keyAlias so
-  // the backend filters spend logs by this specific tenant's virtual key.
-  // Without keyAlias the response would include sibling tenants in the
-  // same org, since teams are now shared (Slice 2).
-  // Customers viewing their own: pass nothing — backend resolves both
-  // from the session-bound tenant.
-  const usageTeamId = user.isPlatform
-    ? tenant.status?.litellmTeamId || undefined
-    : undefined;
-  const usageKeyAlias = user.isPlatform
-    ? tenant.status?.litellmKeyAlias || undefined
-    : undefined;
+  // Bug 19 fix: every viewer (customer or admin) passes the tenant
+  // name to UsageDisplay. The /api/usage route resolves team+alias
+  // from the tenant CR's status and applies the visibility check, so
+  // no per-role branching is needed here. Previous version only
+  // passed identifiers for platform admins; customers got "the first
+  // visible tenant" by API fallback, mingling siblings.
 
   return (
     <div>
@@ -63,6 +104,7 @@ export default async function TenantDetailPage({
             {tenant.spec.displayName || name}
           </h1>
           <StatusBadge phase={tenant.status?.phase ?? "Pending"} />
+          <WarningBadge warnings={tenant.status?.warnings ?? []} />
         </div>
         {tenant.spec.agentName && (
           <p className="text-sm text-text-secondary mt-3">
@@ -83,12 +125,94 @@ export default async function TenantDetailPage({
         )}
       </div>
 
+      {/* Bug 31: prominent banner when the subscription is cancelled.
+          Sits between header and content so it's the first thing the
+          owner sees. Says clearly what state means, and that data is
+          preserved. The Resume action lives in the SubscriptionToggle
+          at the bottom — duplicating it here would clutter the banner
+          for the much-more-common active case. */}
+      {isSuspended && (
+        <div className="mb-8 animate-in animate-in-delay-1 bg-amber-500/10 border border-amber-500/30 rounded-xl p-4">
+          <div className="flex items-start gap-3">
+            <svg
+              className="h-5 w-5 text-amber-400 shrink-0 mt-0.5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.5}
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zM12 15.75h.008v.008H12v-.008z"
+              />
+            </svg>
+            <div className="min-w-0">
+              <div className="text-sm font-semibold text-amber-300">
+                {t("suspendedTitle")}
+              </div>
+              <div className="text-xs text-text-secondary mt-1">
+                {t("suspendedDescription")}
+              </div>
+              {/* Retention countdown. suspendedAt is stamped by the
+                  operator on first transition to suspended; missing
+                  values fall through silently rather than rendering
+                  garbage (operator hasn't reconciled yet, edge case).
+                  The 60-day window is the operator's
+                  retentionAfterSuspend constant; if you change one,
+                  change both. We don't expose the constant via API —
+                  the value rarely changes and duplicating it here
+                  beats fetching a single int over the network. */}
+              {tenant.status?.suspendedAt && (() => {
+                const suspendedAt = new Date(tenant.status.suspendedAt);
+                const deletionAt = new Date(suspendedAt);
+                deletionAt.setDate(deletionAt.getDate() + 60);
+                const now = new Date();
+                const msRemaining = deletionAt.getTime() - now.getTime();
+                const daysRemaining = Math.max(
+                  0,
+                  Math.ceil(msRemaining / (1000 * 60 * 60 * 24))
+                );
+                // < 7 days: red/critical to draw attention. Otherwise
+                // amber, matching the banner.
+                const urgent = daysRemaining < 7;
+                return (
+                  <div
+                    className={`text-xs mt-2 ${
+                      urgent ? "text-red-400" : "text-text-muted"
+                    }`}
+                  >
+                    {t("suspendedSince", {
+                      date: formatDateTime(
+                        tenant.status.suspendedAt,
+                        f
+                      ),
+                    })}
+                    {" · "}
+                    {daysRemaining > 0
+                      ? t("suspendedDeletionIn", {
+                          days: daysRemaining,
+                          date: formatDateTime(
+                            deletionAt.toISOString(),
+                            f
+                          ),
+                        })
+                      : t("suspendedDeletionImminent")}
+                  </div>
+                );
+              })()}
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Usage */}
       <section className="mb-8 animate-in animate-in-delay-1">
         <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
           {t("usage")}
         </h2>
-        <UsageDisplay teamId={usageTeamId} keyAlias={usageKeyAlias} />
+        <UsageDisplay tenant={name} canEditBudget={canEdit} />
       </section>
 
       {/* Packages */}
@@ -100,6 +224,7 @@ export default async function TenantDetailPage({
           tenantName={name}
           enabledPackages={enabledPackages}
           conditions={tenant.status?.conditions}
+          canEdit={canEdit}
         />
       </section>
 
@@ -110,6 +235,7 @@ export default async function TenantDetailPage({
             tenantName={name}
             enabledChannels={enabledChannels}
             initialChannelUsers={channelUsers}
+            canEdit={canEdit}
           />
         </section>
       )}
@@ -119,8 +245,54 @@ export default async function TenantDetailPage({
         <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
           {t("workspaceFiles")}
         </h2>
-        <WorkspaceEditor tenantName={name} files={workspaceFiles} />
+        <WorkspaceEditor tenantName={name} files={workspaceFiles} canEdit={canEdit} />
       </section>
+
+      {/* 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.
+          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>
+      )}
+
+      {/* Bug 31: subscription cancel/resume — owners + platform staff
+          only. Lives at the bottom of the page (rather than near the
+          status badge) to add deliberate friction; mis-clicking
+          "Cancel subscription" from the top would be too easy. The
+          control itself opens a confirmation modal before sending. */}
+      {canEdit && (
+        <section className="mt-12 pt-8 border-t border-border animate-in animate-in-delay-4">
+          <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+            {t("subscriptionTitle")}
+          </h2>
+          <p className="text-sm text-text-secondary mb-4">
+            {isSuspended
+              ? t("subscriptionDescriptionSuspended")
+              : t("subscriptionDescriptionActive")}
+          </p>
+          <SubscriptionToggle
+            tenantName={name}
+            suspended={isSuspended}
+            isPlatform={user.isPlatform}
+            pendingResumeRequest={
+              pendingResumeRequest
+                ? {
+                    id: pendingResumeRequest.id,
+                    createdAt: pendingResumeRequest.createdAt,
+                    customerNotes:
+                      pendingResumeRequest.customerNotes ?? null,
+                  }
+                : null
+            }
+          />
+        </section>
+      )}
     </div>
   );
 }

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

@@ -5,8 +5,8 @@ import {
   updateTenantRequestStatus,
   clearEncryptedSecrets,
 } from "@/lib/db";
-import { createTenant } from "@/lib/k8s";
-import { sendApprovalEmail } from "@/lib/email";
+import { createTenant, patchTenantSpec, setTenantAnnotation } from "@/lib/k8s";
+import { sendApprovalEmail, sendResumeApprovalEmail } from "@/lib/email";
 import { decryptSecrets } from "@/lib/crypto";
 import { writePackageSecrets } from "@/lib/openbao";
 import {
@@ -19,14 +19,26 @@ import { safeError } from "@/lib/errors";
 
 /**
  * POST /api/admin/requests/[id]/approve
- * Approve a tenant request:
- * 1. Decrypt stored package secrets (if any)
- * 2. Write each package's secrets to OpenBao at secret/data/tenants/{tenant-name}/{package}
- * 3. Null the encrypted_secrets column
- * 4. Build workspace files (SOUL.md, AGENTS.md, TOOLS.md)
- * 5. Create PiecedTenant CR
- * 6. Update request status, notify customer.
- * Also supports re-approving a previously rejected request (clears admin notes).
+ *
+ * Approve a request. Two paths depending on request_type:
+ *
+ * Provision (the original purpose):
+ *  1. Decrypt stored package secrets (if any)
+ *  2. Write each package's secrets to OpenBao
+ *  3. Null the encrypted_secrets column
+ *  4. Build workspace files (SOUL.md, AGENTS.md, TOOLS.md)
+ *  5. Create PiecedTenant CR
+ *  6. Update request status, notify customer.
+ *  Supports re-approving a previously rejected request (clears admin notes).
+ *
+ * Resume (Bug 37a):
+ *  1. PATCH spec.suspend=false on the existing PiecedTenant CR.
+ *  2. Clear the `pieced.ch/resume-request-pending` annotation so the
+ *     operator knows the request is settled (and doesn't pause its
+ *     60-day TTL forever — though now that the tenant isn't suspended,
+ *     the timer is moot).
+ *  3. Mark request approved, notify customer.
+ *  No CR creation, no secret materialisation, no workspace files.
  */
 export async function POST(
   request: Request,
@@ -60,13 +72,65 @@ export async function POST(
     );
   }
 
+  // Resume request: short path. Just patch the existing tenant, clear
+  // the annotation, mark approved.
+  if (tenantRequest.requestType === "resume") {
+    if (!tenantRequest.tenantName) {
+      // Shouldn't happen — resume requests are created with tenant_name
+      // set. Defensive 500 if it does.
+      return NextResponse.json(
+        { error: "Resume request has no tenant_name" },
+        { status: 500 }
+      );
+    }
+    try {
+      await patchTenantSpec(tenantRequest.tenantName, { suspend: false });
+      // Clear the annotation that pauses the operator's 60-day TTL.
+      // Best-effort — annotation cleanup is also done by the operator
+      // when it sees suspend=false on the next reconcile (it clears
+      // status.suspendedAt), but explicitly clearing here keeps the
+      // CR clean.
+      try {
+        await setTenantAnnotation(
+          tenantRequest.tenantName,
+          "pieced.ch/resume-request-pending",
+          null
+        );
+      } catch (e) {
+        console.warn(
+          "post-approve annotation clear failed; not blocking",
+          e
+        );
+      }
+
+      await updateTenantRequestStatus(id, "approved", { adminNotes });
+
+      await sendResumeApprovalEmail(
+        tenantRequest.contactEmail,
+        tenantRequest.contactName,
+        tenantRequest.companyName
+      ).catch((e) => console.error("resume approval email failed:", e));
+
+      return NextResponse.json({
+        message: "Resume approved. Tenant is reactivating.",
+        tenantName: tenantRequest.tenantName,
+      });
+    } catch (e: any) {
+      console.error("Resume approval failed:", e);
+      return NextResponse.json(
+        { error: safeError(e, "Failed to approve resume") },
+        { status: 500 }
+      );
+    }
+  }
+
   const isReApproval = tenantRequest.status === "rejected";
 
   // Build the CR name: see `lib/tenant-naming.ts` for the format spec.
-  // For now all approvals are kind="company" — the personal branch is
-  // wired but unused until Slice 4 introduces the `is_personal` column.
+  // Slice 4: for personal accounts the slug is replaced by the literal
+  // "p-" prefix so no PII is embedded in the K8s namespace name.
   const tenantName = deriveTenantName(
-    "company",
+    tenantRequest.isPersonal ? "personal" : "company",
     tenantRequest.companyName,
     tenantRequest.id
   );
@@ -100,17 +164,38 @@ export async function POST(
       "TOOLS.md": toolsMd,
     };
 
-    // Step 4: Create the PiecedTenant CR
+    // Step 4: Create the PiecedTenant CR.
+    // displayName precedence:
+    //   1. customer-chosen instance name (Slice 3 multi-tenant)
+    //   2. for personal accounts, the contact name (avoids exposing the
+    //      synthetic "{name} (Personal)" company name in the OpenClaw UI)
+    //   3. company name otherwise
+    const displayName =
+      tenantRequest.instanceName && tenantRequest.instanceName.trim().length > 0
+        ? tenantRequest.instanceName.trim()
+        : tenantRequest.isPersonal
+          ? tenantRequest.contactName || "Assistant"
+          : tenantRequest.companyName;
+
     await createTenant(
       tenantName,
       {
-        displayName: tenantRequest.companyName,
+        displayName,
         agentName: tenantRequest.agentName,
         packages,
         workspaceFiles,
       },
       {
         "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/admin/requests/[id]/reject/route.ts

@@ -1,11 +1,19 @@
 import { NextResponse } from "next/server";
 import { requirePlatformRole } from "@/lib/session";
 import { getTenantRequestById, updateTenantRequestStatus } from "@/lib/db";
-import { sendRejectionEmail } from "@/lib/email";
+import { setTenantAnnotation } from "@/lib/k8s";
+import { sendRejectionEmail, sendResumeRejectionEmail } from "@/lib/email";
 
 /**
  * POST /api/admin/requests/[id]/reject
  * Reject a tenant request and notify the customer.
+ *
+ * For resume requests (Bug 37a): also clears the
+ * `pieced.ch/resume-request-pending` annotation on the tenant CR.
+ * The operator's 60-day TTL then resumes counting from the original
+ * suspendedAt — rejection doesn't reset it. The customer can submit
+ * a fresh resume request later if circumstances change, but that
+ * starts a new pending row and re-stamps the annotation.
  */
 export async function POST(
   request: Request,
@@ -37,13 +45,45 @@ export async function POST(
     adminNotes,
   });
 
-  // Notify customer
-  await sendRejectionEmail(
-    tenantRequest.contactEmail,
-    tenantRequest.contactName,
-    tenantRequest.companyName,
-    adminNotes
-  );
+  // Resume rejection: clear the annotation so the operator's TTL
+  // resumes. Best-effort — failure is logged, not propagated.
+  if (
+    tenantRequest.requestType === "resume" &&
+    tenantRequest.tenantName
+  ) {
+    try {
+      await setTenantAnnotation(
+        tenantRequest.tenantName,
+        "pieced.ch/resume-request-pending",
+        null
+      );
+    } catch (e) {
+      console.warn(
+        "post-reject annotation clear failed; operator's TTL will pause until annotation removed by admin",
+        e
+      );
+    }
+  }
+
+  // Notify customer. Resume requests get a different email — the
+  // tenant already exists; copy needs to mention "stays suspended" and
+  // the 60-day retention deadline. Provision rejections use the
+  // original onboarding-rejection wording.
+  if (tenantRequest.requestType === "resume") {
+    await sendResumeRejectionEmail(
+      tenantRequest.contactEmail,
+      tenantRequest.contactName,
+      tenantRequest.companyName,
+      adminNotes
+    );
+  } else {
+    await sendRejectionEmail(
+      tenantRequest.contactEmail,
+      tenantRequest.contactName,
+      tenantRequest.companyName,
+      adminNotes
+    );
+  }
 
   return NextResponse.json({
     message: "Request rejected.",

src/app/api/admin/tenants/[name]/delete/route.ts

@@ -1,13 +1,21 @@
 import { NextResponse } from "next/server";
 import { requirePlatformRole } from "@/lib/session";
 import { getTenant, deleteTenant } from "@/lib/k8s";
-import { markTenantRequestDeletedByTenantName } from "@/lib/db";
+import {
+  markTenantRequestDeletedByTenantName,
+  removeAllAssignmentsForTenant,
+} from "@/lib/db";
 import { safeError } from "@/lib/errors";
 
 /**
  * POST /api/admin/tenants/[name]/delete
  * Delete a PiecedTenant CR. The operator handles cleanup
  * (namespace, vault, litellm team, etc.).
+ *
+ * Slice 6: also cascades the tenant_user_assignments rows so a
+ * future tenant with the same name (won't happen given UUID-suffix
+ * naming, but defense in depth) doesn't inherit stale assignments.
+ *
  * Also marks the associated tenant_request as "deleted" so the
  * customer can re-submit the onboarding wizard.
  */
@@ -31,10 +39,14 @@ export async function POST(
   try {
     await deleteTenant(name);
 
-    // Mark the associated tenant_request as "deleted" so the customer
-    // sees the wizard again instead of a stale "active" status
+    // Best-effort DB cleanups. Both errors are logged but not surfaced —
+    // the K8s deletion has already started, and the row state is just
+    // for portal display.
     await markTenantRequestDeletedByTenantName(name).catch((e) =>
-      console.error("Failed to update tenant request after delete:", e)
+      console.error("Failed to mark tenant request deleted:", e)
+    );
+    await removeAllAssignmentsForTenant(name).catch((e) =>
+      console.error("Failed to clean up tenant assignments:", e)
     );
 
     return NextResponse.json({

src/app/api/billing/route.ts

@@ -0,0 +1,128 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { getSessionUser, canMutate } from "@/lib/session";
+import { getOrgBilling, upsertOrgBilling } from "@/lib/db";
+import { safeError } from "@/lib/errors";
+
+/**
+ * Org-scoped billing API (Bug 35).
+ *
+ * GET — return the current billing record for the caller's org, or
+ * 404 if none has been captured yet. The /settings/billing page
+ * renders an empty form on 404 (first-time edit) and a pre-filled
+ * form on 200.
+ *
+ * PUT — upsert the billing record. Required for any subsequent tenant
+ * provisioning unless the caller is on a personal org. Validation:
+ *   - All address fields required.
+ *   - VAT number required for company orgs (where `user.isPersonal`
+ *     is false). Optional for personal orgs.
+ *   - billing_email validated as RFC-5322-ish.
+ *
+ * Authorization:
+ *   - GET: any authenticated user in the org. We expose only their
+ *     own org's billing — orgId is scoped from the session.
+ *   - PUT: owners and platform admins (canMutate check). Customers
+ *     in `user` role cannot edit billing.
+ */
+
+const billingSchema = z.object({
+  companyName: z.string().min(1).max(200),
+  streetAddress: z.string().min(1).max(200),
+  postalCode: z.string().min(1).max(20),
+  city: z.string().min(1).max(100),
+  country: z.string().min(2).max(3), // ISO 3166-1 alpha-2 or alpha-3
+  vatNumber: z
+    .string()
+    .max(50)
+    .nullable()
+    .optional()
+    .transform((v) => (v && v.trim() !== "" ? v.trim() : null)),
+  billingEmail: z.string().email().max(200),
+  notes: z
+    .string()
+    .max(2000)
+    .nullable()
+    .optional()
+    .transform((v) => (v && v.trim() !== "" ? v.trim() : null)),
+});
+
+export async function GET() {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const billing = await getOrgBilling(user.orgId);
+  if (!billing) {
+    // 404 carries semantic meaning here — "no record yet". Callers
+    // (settings page, wizard) treat this as the empty-form state.
+    return NextResponse.json(
+      { error: "No billing record for this org" },
+      { status: 404 }
+    );
+  }
+  return NextResponse.json({ billing });
+}
+
+export async function PUT(req: NextRequest) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  if (!canMutate(user)) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const body = await req.json().catch(() => null);
+  const parsed = billingSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid input", details: parsed.error.flatten() },
+      { status: 400 }
+    );
+  }
+
+  // Company orgs (B2B) require companyName AND VAT. Personal orgs
+  // (B2C — private individuals) need neither; their /settings/billing
+  // form hides both fields and we don't ask the API to enforce them.
+  if (!user.isPersonal) {
+    const missing: Record<string, string[]> = {};
+    if (!parsed.data.companyName || parsed.data.companyName.trim().length === 0) {
+      missing.companyName = ["Required for companies"];
+    }
+    if (!parsed.data.vatNumber) {
+      missing.vatNumber = ["Required for companies"];
+    }
+    if (Object.keys(missing).length > 0) {
+      return NextResponse.json(
+        {
+          error:
+            "Company name and VAT number are required for company accounts.",
+          details: { fieldErrors: missing },
+        },
+        { status: 400 }
+      );
+    }
+  }
+
+  try {
+    const billing = await upsertOrgBilling({
+      zitadelOrgId: user.orgId,
+      companyName: parsed.data.companyName,
+      streetAddress: parsed.data.streetAddress,
+      postalCode: parsed.data.postalCode,
+      city: parsed.data.city,
+      country: parsed.data.country,
+      vatNumber: parsed.data.vatNumber,
+      billingEmail: parsed.data.billingEmail,
+      notes: parsed.data.notes,
+    });
+    return NextResponse.json({ billing });
+  } catch (e: any) {
+    console.error("Failed to upsert org billing:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to save billing") },
+      { status: 500 }
+    );
+  }
+}

src/app/api/onboarding/[id]/dismiss/route.ts

@@ -0,0 +1,65 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSessionUser, canMutate } from "@/lib/session";
+import { dismissTenantRequest, getTenantRequestById } from "@/lib/db";
+import { safeError } from "@/lib/errors";
+
+/**
+ * POST /api/onboarding/[id]/dismiss
+ *
+ * Customer-side acknowledgement of a rejected or cancelled request
+ * (Bug 13). Sets `dismissed_at = now()` so the row stops appearing
+ * in the dashboard's `listActiveTenantRequestsByOrgId` query. The
+ * row itself is preserved for audit.
+ *
+ * Authorization mirrors the GET / DELETE / PATCH endpoints on this
+ * resource: customer owners (or platform staff) of the row's org.
+ *
+ * Idempotent: dismissing an already-dismissed request returns 200
+ * with no change. We refuse to dismiss non-terminal rows (pending,
+ * approved, provisioning, active) — those are still actionable, and
+ * "hiding" them would stash live state from the customer.
+ */
+export async function POST(
+  _req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  if (!canMutate(user)) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const { id } = await params;
+  const tr = await getTenantRequestById(id);
+  if (!tr) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+  if (!user.isPlatform && tr.zitadelOrgId !== user.orgId) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+
+  if (tr.status !== "rejected" && tr.status !== "cancelled") {
+    return NextResponse.json(
+      {
+        error:
+          "Only rejected or cancelled requests can be dismissed. Active requests stay visible.",
+        code: "not_dismissable",
+        currentStatus: tr.status,
+      },
+      { status: 409 }
+    );
+  }
+
+  try {
+    await dismissTenantRequest(id);
+    return NextResponse.json({ message: "Dismissed.", id });
+  } catch (e: any) {
+    console.error("Failed to dismiss request:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to dismiss request") },
+      { status: 500 }
+    );
+  }
+}

src/app/api/onboarding/[id]/route.ts

@@ -0,0 +1,227 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSessionUser, canMutate } from "@/lib/session";
+import {
+  getTenantRequestById,
+  updateTenantRequestStatus,
+  updateTenantRequestEditableFields,
+} from "@/lib/db";
+import { encryptSecrets } from "@/lib/crypto";
+import { setTenantAnnotation } from "@/lib/k8s";
+import { onboardingSchema } from "@/lib/validation";
+import { safeError } from "@/lib/errors";
+
+/**
+ * Customer-side controls for a single tenant_request row.
+ *
+ *   - DELETE /api/onboarding/[id]  → cancel a still-pending request
+ *   - PATCH  /api/onboarding/[id]  → edit fields of a still-pending
+ *                                    request (Bug 6)
+ *
+ * Both endpoints share the same authorization check: the caller must
+ * be a customer owner (or platform staff) of the request's org. We
+ * also enforce status === 'pending' on the row — once an admin has
+ * acted on it, the customer can no longer mutate it from the portal.
+ *
+ * Reading these is via the existing GET /api/onboarding?id=... handler.
+ */
+
+async function loadAuthorized(
+  id: string
+): Promise<
+  | { error: NextResponse }
+  | { req: Awaited<ReturnType<typeof getTenantRequestById>>; }
+> {
+  const user = await getSessionUser();
+  if (!user) {
+    return {
+      error: NextResponse.json({ error: "Unauthorized" }, { status: 401 }),
+    };
+  }
+  if (!canMutate(user)) {
+    return {
+      error: NextResponse.json({ error: "Forbidden" }, { status: 403 }),
+    };
+  }
+  const tr = await getTenantRequestById(id);
+  if (!tr) {
+    return {
+      error: NextResponse.json({ error: "Not found" }, { status: 404 }),
+    };
+  }
+  // Customers may only read their own org's requests; platform users
+  // may read any. Same scope as `GET /api/onboarding?id=...`.
+  if (!user.isPlatform && tr.zitadelOrgId !== user.orgId) {
+    return {
+      error: NextResponse.json({ error: "Not found" }, { status: 404 }),
+    };
+  }
+  return { req: tr };
+}
+
+/**
+ * DELETE /api/onboarding/[id]
+ *
+ * Customer cancels a still-pending request. Status flips to 'cancelled';
+ * the row is preserved for audit. The customer can dismiss the
+ * cancelled card afterwards (Bug 13 reuse — same dismissal mechanism).
+ *
+ * Once admin has approved/provisioned/rejected, this endpoint refuses
+ * (409). Cancelling a tenant that's already running goes through the
+ * subscription-suspend flow on the tenant detail page, not here.
+ */
+export async function DELETE(
+  _req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const loaded = await loadAuthorized(id);
+  if ("error" in loaded) return loaded.error;
+  const tr = loaded.req!;
+
+  if (tr.status !== "pending") {
+    return NextResponse.json(
+      {
+        error:
+          "Only pending requests can be cancelled. Approved or provisioning instances must be managed from the tenant page.",
+        code: "not_pending",
+        currentStatus: tr.status,
+      },
+      { status: 409 }
+    );
+  }
+
+  try {
+    await updateTenantRequestStatus(id, "cancelled");
+
+    // Customer cancels their own pending resume request: clear the
+    // operator-side annotation so the 60-day TTL resumes counting.
+    // Best-effort — the operator handles missing annotation gracefully.
+    if (tr.requestType === "resume" && tr.tenantName) {
+      try {
+        await setTenantAnnotation(
+          tr.tenantName,
+          "pieced.ch/resume-request-pending",
+          null
+        );
+      } catch (e) {
+        console.warn(
+          "post-cancel annotation clear failed; not blocking",
+          e
+        );
+      }
+    }
+
+    return NextResponse.json({ message: "Request cancelled.", id });
+  } catch (e: any) {
+    console.error("Failed to cancel request:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to cancel request") },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * PATCH /api/onboarding/[id]
+ *
+ * Customer edits a still-pending request. Validation is the same as on
+ * POST /api/onboarding (shared schema). Only customer-input fields are
+ * editable; status/tenant_name/admin_notes/etc. are server-managed.
+ *
+ * Note on company-level fields
+ * ----------------------------
+ * For a follow-up instance (org has prior approved rows), the POST
+ * handler intentionally ignores the wizard's billingAddress and uses
+ * the on-file value instead. We mirror that here: company-level fields
+ * (companyName, contactName, contactEmail, billingAddress) on a
+ * follow-up edit are NOT updated through this endpoint. The customer
+ * should use a future settings page (Bug 11) for those. For now,
+ * editing only mutates per-instance fields — agent name, instance
+ * name, packages, soulMd, agentsMd, billingNotes, packageSecrets.
+ *
+ * For the FIRST instance (no prior approved rows), billingAddress IS
+ * editable here, since the customer is still defining their company's
+ * billing data.
+ */
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const loaded = await loadAuthorized(id);
+  if ("error" in loaded) return loaded.error;
+  const tr = loaded.req!;
+
+  if (tr.status !== "pending") {
+    return NextResponse.json(
+      {
+        error: "Only pending requests can be edited.",
+        code: "not_pending",
+        currentStatus: tr.status,
+      },
+      { status: 409 }
+    );
+  }
+
+  const body = await req.json().catch(() => null);
+  const parsed = onboardingSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid input", details: parsed.error.flatten() },
+      { status: 400 }
+    );
+  }
+  const input = parsed.data;
+
+  // Re-encrypt package secrets if present in the patch body. When the
+  // user re-opens the wizard to edit, the secrets array is populated
+  // afresh from the wizard (we never decrypt and return existing
+  // secrets — that'd be a security regression). If the user didn't
+  // touch any secret-bearing package, the wizard sends no
+  // packageSecrets and we leave the existing encrypted blob alone.
+  let encryptedSecrets: Buffer | null | undefined;
+  if (input.packageSecrets && Object.keys(input.packageSecrets).length > 0) {
+    try {
+      encryptedSecrets = await encryptSecrets(input.packageSecrets);
+    } catch (e: any) {
+      console.error("Failed to encrypt package secrets:", e);
+      return NextResponse.json(
+        { error: "Failed to secure credentials. Please try again." },
+        { status: 500 }
+      );
+    }
+  }
+
+  // Only first-instance edits get billingAddress; follow-ups inherit
+  // company billing from the on-file approved row.
+  const isFirstInstance = !tr.tenantName; // approximation; covers the
+  // "no prior approved row for this org" case the POST handler treats
+  // identically. A more rigorous check would call
+  // getMostRecentApprovedRequestForOrg, but in practice an org with
+  // an approved row for some other tenant has a tenantName on those
+  // rows, not on the pending one being edited — so the simple check
+  // here is fine for the only state the endpoint accepts (pending).
+
+  try {
+    const updated = await updateTenantRequestEditableFields(id, {
+      instanceName: input.instanceName,
+      agentName: input.agentName,
+      soulMd: input.soulMd,
+      agentsMd: input.agentsMd,
+      packages: input.packages ?? [],
+      billingAddress: isFirstInstance ? input.billingAddress : undefined,
+      billingNotes: input.billingNotes,
+      encryptedSecrets,
+    });
+    if (!updated) {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+    }
+    return NextResponse.json({ message: "Request updated.", id });
+  } catch (e: any) {
+    console.error("Failed to edit request:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to edit request") },
+      { status: 500 }
+    );
+  }
+}

src/app/api/onboarding/route.ts

@@ -1,88 +1,172 @@
-import { NextResponse } from "next/server";
-import { getSessionUser } from "@/lib/session";
+import { NextRequest, NextResponse } from "next/server";
+import { getSessionUser, canMutate } from "@/lib/session";
 import {
   createTenantRequest,
-  getTenantRequestByOrgId,
-  deleteTenantRequest,
+  getTenantRequestById,
+  listTenantRequestsByOrgId,
+  listActiveTenantRequestsByOrgId,
+  getMostRecentApprovedRequestForOrg,
+  getOrgBilling,
+  upsertOrgBilling,
 } from "@/lib/db";
 import { getTenant, listTenants } from "@/lib/k8s";
+import {
+  listVisibleTenants,
+  canUserSeeTenant,
+  canSeeInflightRequests,
+} from "@/lib/visibility";
 import { sendAdminNotificationEmail } from "@/lib/email";
 import { encryptSecrets } from "@/lib/crypto";
-import type { OnboardingInput } from "@/types";
+import { isPersonalOrgName } from "@/lib/personal-org";
+import { onboardingSchema, billingAddressSchema } from "@/lib/validation";
+import type { OnboardingInput, PiecedTenant, TenantRequest } from "@/types";
 import { z } from "zod";
 
-const onboardingSchema = z.object({
-  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).
+ */
+/**
+ * Helper: shape a TenantRequest row for client consumption.
+ * Hides server-only fields (encryptedSecrets, internal db ids).
+ *
+ * Slice 7 / Bug 6: surfaces enough fields for the customer-side edit
+ * flow to pre-fill the wizard. soulMd, agentsMd, billingAddress,
+ * billingNotes were previously kept off the public shape because the
+ * pre-Slice-3 dashboard didn't render them. Edit needs them.
+ *
+ * Bug 13: surfaces dismissedAt so the dashboard can distinguish
+ * "freshly rejected, show prominently" from "rejected and acknowledged,
+ * keep hidden" without an extra API call.
+ */
+function publicRequestShape(r: TenantRequest) {
+  return {
+    id: r.id,
+    instanceName: r.instanceName,
+    agentName: r.agentName,
+    soulMd: r.soulMd,
+    agentsMd: r.agentsMd,
+    packages: r.packages,
+    billingAddress: r.billingAddress,
+    billingNotes: r.billingNotes,
+    status: r.status,
+    adminNotes: r.adminNotes,
+    tenantName: r.tenantName,
+    dismissedAt: r.dismissedAt ?? null,
+    createdAt: r.createdAt,
+    updatedAt: r.updatedAt,
+  };
+}
+
+function publicTenantShape(t: PiecedTenant) {
+  return {
+    name: t.metadata.name,
+    displayName: t.spec.displayName,
+    phase: t.status?.phase ?? "Pending",
+    suspended: t.spec.suspend ?? false,
+    packages: t.spec.packages ?? [],
+    creationTimestamp: t.metadata.creationTimestamp,
+    conditions: t.status?.conditions ?? [],
+  };
+}
 
 /**
  * GET /api/onboarding
- * Check the current onboarding state for the logged-in user's org.
+ *
+ * Two response shapes depending on the `?id=` query:
+ *
+ *   - With `?id=<requestId>`: returns the single request's status plus
+ *     the linked tenant's phase if approved. Used by ProvisioningStatus
+ *     to poll a specific request. The id is validated against the
+ *     caller's orgId so admins-and-only-admins can read across orgs.
+ *
+ *   - Without `id`: returns lists of all in-flight requests and active
+ *     tenants for the caller's org. Used by the dashboard to render the
+ *     multi-tenant view.
+ *
+ * Slice 3 note: this replaces the old single-state response shape
+ * (`{ state: "...", request: {...} }`). Pre-Slice-3 callers will see
+ * the new shape and need to be updated. The only known caller is
+ * `<ProvisioningStatus>`, updated in lockstep.
  */
-export async function GET() {
+export async function GET(req: NextRequest) {
   const user = await getSessionUser();
   if (!user) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
-  // Check if there's already a running tenant for this org
-  const allTenants = await listTenants();
-  const myTenant = allTenants.find(
-    (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
-  );
+  const requestedId = req.nextUrl.searchParams.get("id");
 
-  if (myTenant) {
+  if (requestedId) {
+    const tr = await getTenantRequestById(requestedId);
+    if (!tr) {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+    }
+    // Customers may only read their own org's requests; platform
+    // admins/operators may read any.
+    if (!user.isPlatform && tr.zitadelOrgId !== user.orgId) {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+    }
+    // Slice 6: a `user`-role customer doesn't see in-flight requests
+    // even within their own org — they can't act on them and showing
+    // the row would be a permanent "pending" state with no exit. Owner
+    // and platform skip this gate.
+    if (!canSeeInflightRequests(user)) {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+    }
+
+    let tenant: PiecedTenant | null = null;
+    if (tr.tenantName) {
+      tenant = (await getTenant(tr.tenantName)) ?? null;
+      // If a request is already linked to a tenant CR and the caller
+      // can't see that tenant (assignment scope), don't expose it via
+      // the request endpoint either. canSeeInflightRequests above
+      // already shortcuts this for `user`-role, but defense in depth.
+      if (tenant && !(await canUserSeeTenant(user, tenant))) {
+        return NextResponse.json({ error: "Not found" }, { status: 404 });
+      }
+    }
     return NextResponse.json({
-      state: "active",
-      tenantName: myTenant.metadata.name,
-      phase: myTenant.status?.phase ?? "Unknown",
+      request: publicRequestShape(tr),
+      tenant: tenant ? publicTenantShape(tenant) : null,
     });
   }
 
-  // Check if there's a pending request
-  const request = await getTenantRequestByOrgId(user.orgId);
+  // List view: requests + tenants for this org, filtered by visibility.
+  // For owner/platform, this returns the same data as pre-Slice-6.
+  // For user-role, requests is forced to [] and tenants is narrowed to
+  // assignments.
+  const [requests, allTenants] = await Promise.all([
+    listActiveTenantRequestsByOrgId(user.orgId),
+    listTenants(),
+  ]);
 
-  if (!request || request.status === "deleted") {
-    return NextResponse.json({ state: "no_request" });
-  }
+  const visibleTenants = await listVisibleTenants(user, allTenants);
+  const visibleRequests = canSeeInflightRequests(user) ? requests : [];
 
   return NextResponse.json({
-    state: request.status,
-    request: {
-      id: request.id,
-      agentName: request.agentName,
-      packages: request.packages,
-      status: request.status,
-      adminNotes: request.adminNotes,
-      tenantName: request.tenantName,
-      createdAt: request.createdAt,
-    },
+    requests: visibleRequests.map(publicRequestShape),
+    tenants: visibleTenants.map(publicTenantShape),
   });
 }
 
 /**
  * POST /api/onboarding
- * Submit the onboarding wizard. Creates a tenant_request with status "pending".
- * The actual PiecedTenant CR is NOT created yet — admin approval required.
  *
- * If packageSecrets are provided (for packages requiring credentials like
- * Telegram, Discord, Email), they are encrypted with AES-256-GCM and stored
- * as a BYTEA blob. They are decrypted only during admin approval to write
- * to OpenBao.
+ * Always creates a NEW tenant_request row, regardless of how many other
+ * rows already exist for this org. The pre-Slice-3 409 ("you already
+ * have a request") is gone — multi-tenant is the design now.
+ *
+ * For additional instances in an existing company, the customer's prior
+ * approved row is used to seed billing/contact info, so the wizard
+ * doesn't need to re-collect data already on file. The wizard *does*
+ * still send a billingAddress payload (the field is required by the
+ * schema), but in practice the client can pre-fill it from
+ * `getMostRecentApprovedRequestForOrg`.
+ *
+ * Encrypted package secrets, if provided, are AES-256-GCM-sealed and
+ * stored as a BYTEA blob. They are decrypted only during admin approval
+ * to write to OpenBao.
  */
 export async function POST(request: Request) {
   const user = await getSessionUser();
@@ -90,6 +174,15 @@ export async function POST(request: Request) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
+  // Slice 5: only owners (or platform users) may create new instances.
+  // A `user`-role member of an existing org cannot self-provision.
+  if (!canMutate(user)) {
+    return NextResponse.json(
+      { error: "Only the organization owner can create new instances." },
+      { status: 403 }
+    );
+  }
+
   const body = await request.json();
   const parsed = onboardingSchema.safeParse(body);
   if (!parsed.success) {
@@ -99,40 +192,52 @@ export async function POST(request: Request) {
     );
   }
 
-  // Check for existing request
-  const existing = await getTenantRequestByOrgId(user.orgId);
-  if (existing && existing.status !== "deleted") {
-    return NextResponse.json(
-      { error: "Onboarding request already submitted.", request: existing },
-      { status: 409 }
-    );
-  }
-
-  // If previous request was deleted, remove it so a fresh one can be created
-  if (existing && existing.status === "deleted") {
-    await deleteTenantRequest(existing.id);
-  }
-
-  // Check for existing tenant
-  const allTenants = await listTenants();
-  const myTenant = allTenants.find(
-    (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
-  );
-
-  if (myTenant) {
-    return NextResponse.json(
-      {
-        error: "You already have a tenant provisioned.",
-        tenantName: myTenant.metadata.name,
-      },
-      { status: 409 }
-    );
-  }
-
   const input: OnboardingInput & {
     packageSecrets?: Record<string, Record<string, string>>;
   } = parsed.data;
 
+  // Look up an existing approved request for this org to inherit
+  // company-level billing data. For brand-new orgs (first registration),
+  // there is no prior row and we use the form-supplied billingAddress
+  // verbatim. For follow-up requests, we ignore the form-supplied
+  // company line in favour of the recorded company name.
+  const prior = await getMostRecentApprovedRequestForOrg(user.orgId);
+
+  // Slice 4: detect personal-account orgs by the canonical " (Personal)"
+  // suffix on the ZITADEL org name. Set at registration, stable for the
+  // lifetime of the org. Persisted on the row so admin views and the
+  // approve handler don't have to re-derive it.
+  //
+  // If any prior row has is_personal set, prefer that — it's the same
+  // org and the value can't change. (The prior-row check is defensive;
+  // 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) {
@@ -147,34 +252,185 @@ export async function POST(request: Request) {
     }
   }
 
+  // For follow-up instances, prefer the on-file company name and contact
+  // details; the user can't change those by re-typing them in the wizard.
+  const companyName = prior?.companyName ?? user.orgName;
+  const contactName = prior?.contactName ?? user.name;
+  const contactEmail = prior?.contactEmail ?? user.email;
+
+  // Bug 35: org-scoped billing.
+  //
+  // Resolution rules:
+  //   1. If org_billing exists, use it (synthesise a BillingAddress
+  //      shape for the audit copy on tenant_requests). Wizard's
+  //      submitted billingAddress is ignored — the org has billing
+  //      on file, the wizard skipped that step.
+  //   2. If no org_billing AND wizard supplied billingAddress, use
+  //      the wizard's data and save to org_billing for next time.
+  //      VAT is enforced by billingAddressSchema (required for
+  //      everyone).
+  //   3. If no org_billing AND no wizard billingAddress: reject.
+  //      Billing is required for all customers regardless of
+  //      personal/company org structure — we're a commercial
+  //      product. Personal accounts (sole proprietors, individuals)
+  //      are still subject to billing capture.
+  //
+  // The synthetic BillingAddress for case 1 collapses fields that
+  // org_billing has more granularly; good enough for audit, since
+  // /settings/billing is the authoritative editor going forward.
+  const orgBilling = await getOrgBilling(user.orgId);
+  let billingAddress: TenantRequest["billingAddress"];
+  let billingNotes = input.billingNotes ?? prior?.billingNotes;
+
+  if (orgBilling) {
+    billingAddress = {
+      company: orgBilling.companyName,
+      street: orgBilling.streetAddress,
+      postalCode: orgBilling.postalCode,
+      city: orgBilling.city,
+      country: orgBilling.country,
+      vatNumber: orgBilling.vatNumber ?? undefined,
+    };
+  } else if (input.billingAddress) {
+    // Wizard supplied billing — re-validate the strict shape (the
+    // outer onboardingSchema marks it optional now, so we can't rely
+    // on its enforcement of the inner required fields).
+    const billingCheck = billingAddressSchema.safeParse(input.billingAddress);
+    if (!billingCheck.success) {
+      return NextResponse.json(
+        {
+          error: "Invalid billing address",
+          details: billingCheck.error.flatten(),
+        },
+        { status: 400 }
+      );
+    }
+
+    // Company orgs (B2B) require companyName AND vatNumber.
+    // Personal orgs (B2C — private individuals) require neither;
+    // the wizard hides both fields for them and the API doesn't
+    // enforce.
+    if (!isPersonal) {
+      const missing: Record<string, string[]> = {};
+      if (
+        !billingCheck.data.company ||
+        billingCheck.data.company.trim().length === 0
+      ) {
+        missing["billingAddress.company"] = ["Required for companies"];
+      }
+      if (
+        !billingCheck.data.vatNumber ||
+        billingCheck.data.vatNumber.length === 0
+      ) {
+        missing["billingAddress.vatNumber"] = ["Required for companies"];
+      }
+      if (Object.keys(missing).length > 0) {
+        return NextResponse.json(
+          {
+            error:
+              "Company name and VAT number are required for company accounts.",
+            details: { fieldErrors: missing },
+          },
+          { status: 400 }
+        );
+      }
+    }
+
+    billingAddress = billingCheck.data;
+
+    // Persist to org_billing. For personal customers (B2C, no
+    // company line), fall back to their display name from the
+    // session — invoices addressed to their actual name rather than
+    // an opaque org id like "personal-3f2a8b1c". For companies the
+    // wizard's company field is filled.
+    const personalDisplayName = (user.name || user.email || "").trim();
+    try {
+      await upsertOrgBilling({
+        zitadelOrgId: user.orgId,
+        companyName:
+          (billingCheck.data.company || "").trim() ||
+          (isPersonal ? personalDisplayName : user.orgName) ||
+          user.orgName,
+        streetAddress: billingCheck.data.street,
+        postalCode: billingCheck.data.postalCode,
+        city: billingCheck.data.city,
+        country: billingCheck.data.country,
+        // Personal: undefined (no VAT). Company: enforced non-empty
+        // by the check above.
+        vatNumber: isPersonal ? null : billingCheck.data.vatNumber!,
+        billingEmail: contactEmail,
+        notes: billingNotes ?? null,
+      });
+    } catch (e) {
+      // Non-fatal — the tenant_request still gets created with the
+      // billingAddress audit copy. The customer can re-save via
+      // /settings/billing if this failed.
+      console.warn(
+        "failed to save org_billing on first capture; tenant_request still created with audit copy",
+        e
+      );
+    }
+  } else {
+    // No billing supplied AND no org_billing record. Required for
+    // everyone — commercial product, no personal-orgs-skip
+    // shortcut. Customer must complete the wizard's billing step
+    // or set up /settings/billing first.
+    return NextResponse.json(
+      {
+        error:
+          "Billing information is required. Please complete the billing step or set it up at /settings/billing.",
+        details: {
+          fieldErrors: {
+            billingAddress: ["Required"],
+          },
+        },
+      },
+      { status: 400 }
+    );
+  }
+
   const tenantRequest = await createTenantRequest({
     zitadelOrgId: user.orgId,
     zitadelUserId: user.id,
-    companyName: user.orgName,
-    contactName: user.name,
-    contactEmail: user.email,
+    companyName,
+    instanceName: input.instanceName,
+    contactName,
+    contactEmail,
     agentName: input.agentName,
     soulMd: input.soulMd,
     agentsMd: input.agentsMd,
     packages: input.packages ?? [],
-    billingAddress: input.billingAddress,
-    billingNotes: input.billingNotes,
+    billingAddress,
+    billingNotes,
     encryptedSecrets,
+    isPersonal,
   });
 
-  // Notify admin about the new request
+  // Notify admin about the new request. For follow-up instances, include
+  // the instance name in the notification so the admin sees what's
+  // being requested without opening the panel.
   try {
     await sendAdminNotificationEmail(
       tenantRequest.contactEmail,
       tenantRequest.contactName,
-      tenantRequest.companyName
+      tenantRequest.instanceName
+        ? `${tenantRequest.companyName} (${tenantRequest.instanceName})`
+        : tenantRequest.companyName
     );
   } catch (e) {
     console.error("Failed to send admin notification:", e);
   }
 
+  // For diagnostics: how many other in-flight requests does this org
+  // already have? Useful for the admin queue.
+  const allRequests = await listTenantRequestsByOrgId(user.orgId);
+
   return NextResponse.json(
-    { message: "Request submitted.", request: tenantRequest },
+    {
+      message: "Request submitted.",
+      request: publicRequestShape(tenantRequest),
+      orgRequestCount: allRequests.length,
+    },
     { status: 201 }
   );
 }

src/app/api/register/route.ts

@@ -2,16 +2,43 @@ 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";
 
-const registrationSchema = z.object({
-  companyName: z.string().min(2).max(100),
-  givenName: z.string().min(1).max(100),
-  familyName: z.string().min(1).max(100),
-  email: z.string().email(),
-  preferredLanguage: z.enum(["en", "de", "fr", "it"]).optional(),
-});
+/**
+ * Registration schema.
+ *
+ * Slice 4 changes
+ * ---------------
+ * - `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 a generated opaque ID
+ *   (`personal-{8hex}`) — see `lib/personal-org.ts` for the format
+ *   spec. Customers cannot rename their own org, so the marker 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`).
+ */
+const registrationSchema = z
+  .object({
+    companyName: z.string().min(2).max(100).optional(),
+    givenName: z.string().min(1).max(100),
+    familyName: z.string().min(1).max(100),
+    email: z.string().email(),
+    preferredLanguage: z.enum(["en", "de", "fr", "it"]).optional(),
+    isPersonal: z.boolean().optional().default(false),
+  })
+  .refine(
+    (data) =>
+      data.isPersonal || (data.companyName && data.companyName.trim().length >= 2),
+    {
+      message: "Company name is required for company registrations",
+      path: ["companyName"],
+    }
+  );
 
 /** 3 registrations per IP per hour */
 const RATE_LIMIT = 3;
@@ -53,31 +80,44 @@ export async function POST(request: NextRequest) {
     }
 
     const input: RegistrationInput = parsed.data;
+    const isPersonal = input.isPersonal === true;
 
-    // --- Duplicate-domain check ---
+    // --- Duplicate-domain check (skipped for personal accounts) ---
     //
-    // Block if another active tenant_request or ZITADEL org already exists
-    // for this corporate email domain. Public domains (gmail, gmx, etc.)
-    // are exempted by checkDuplicateDomain.
-    //
-    // We return a structured `code: "duplicate_domain"` with the matched
-    // domain so the client can render the localized message via
-    // register.duplicateDomain (with {domain} interpolation). The fallback
-    // English string is included for non-i18n clients (curl, monitoring).
-    const dup = await checkDuplicateDomain(input.email);
-    if (dup.blocked && dup.domain) {
-      return NextResponse.json(
-        {
-          error: `An account for the email domain ${dup.domain} is already registered. Please contact your company administrator or PieCed IT support.`,
-          code: "duplicate_domain",
-          domain: dup.domain,
-        },
-        { status: 409 },
-      );
+    // Personal accounts are explicitly allowed to use any email domain
+    // (including corporate). Their tenant_request rows are excluded
+    // from this check by lib/domain-check.ts, so a personal account
+    // doesn't block a later real-company registration on the same
+    // domain.
+    if (!isPersonal) {
+      const dup = await checkDuplicateDomain(input.email);
+      if (dup.blocked && dup.domain) {
+        return NextResponse.json(
+          {
+            error: `An account for the email domain ${dup.domain} is already registered. Please contact your company administrator or PieCed IT support.`,
+            code: "duplicate_domain",
+            domain: dup.domain,
+          },
+          { status: 409 },
+        );
+      }
     }
 
+    // --- Determine the ZITADEL org name ---
+    //
+    // For company: use the customer-supplied companyName (already
+    //   validated to be present + ≥2 chars by the schema refinement).
+    // For personal: a fresh opaque ID like "personal-3f2a8b1c". The
+    //   user's actual display name is per-user (`session.user.name`),
+    //   so the GUI shows that instead — see `displayOrgNameFor()`.
+    //   This keeps personal orgs collision-free (Bug 9: two people
+    //   named "Eva Müller" both being able to register).
+    const orgName = isPersonal
+      ? generatePersonalOrgName()
+      : input.companyName!.trim();
+
     const result = await registerCustomer({
-      companyName: input.companyName,
+      companyName: orgName,
       email: input.email,
       givenName: input.givenName,
       familyName: input.familyName,
@@ -88,6 +128,7 @@ export async function POST(request: NextRequest) {
       {
         orgId: result.orgId,
         userId: result.userId,
+        isPersonal,
         message:
           "Registration successful. You will receive an invitation email to set your password.",
       },

src/app/api/support/tickets/[id]/comments/route.ts

@@ -0,0 +1,149 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { getSessionUser } from "@/lib/session";
+import {
+  getSupportTicketById,
+  createSupportTicketComment,
+  updateSupportTicket,
+} from "@/lib/db";
+import {
+  sendSupportTicketReplyEmail,
+  sendSupportAdminNotificationEmail,
+} from "@/lib/email";
+import { safeError } from "@/lib/errors";
+import type { SupportTicketStatus } from "@/types";
+
+/**
+ * Comments on a support ticket (Feature 5). Threaded chronologically;
+ * no nested replies.
+ *
+ * Auto status transitions on comment:
+ *   - Customer reply on a `waiting_for_customer` → `in_progress`
+ *     (the ball is back in admin's court).
+ *   - Customer reply on a `resolved` ticket → `reopened`
+ *     (customer disagreed with the resolution).
+ *   - Admin reply on `open` or `reopened` → `in_progress`
+ *     (signals admin has engaged).
+ *   - Admin reply on `in_progress` → `waiting_for_customer`
+ *     (admin's response, ball is in customer's court).
+ *   - Otherwise no change.
+ *
+ * The auto-bump is opportunistic — caller may pass an explicit
+ * status override via the PATCH endpoint instead. We only auto-bump
+ * here when no comment-side override is provided (the comment POST
+ * doesn't accept a status field).
+ *
+ * Email rules:
+ *   - Customer replies → admin queue gets an "admin notification" email.
+ *   - Admin replies → customer gets a reply email (with the body
+ *     inline so they can read on mobile without clicking).
+ *   - No "you just commented" confirmation back to the author.
+ *
+ * The customer reply path skips the separate status-change email
+ * even when the status auto-bumps, on the principle that one email
+ * per action is enough; the admin will see the reply notification
+ * and the new status in the queue.
+ */
+
+const createSchema = z.object({
+  body: z.string().trim().min(1, "required").max(10_000),
+});
+
+/**
+ * Compute the auto-bumped status (if any) for a comment from a given
+ * author kind. Returns the new status if it should change, or null
+ * if it should stay the same.
+ */
+function autoBumpStatus(
+  current: SupportTicketStatus,
+  authorKind: "customer" | "admin"
+): SupportTicketStatus | null {
+  if (authorKind === "customer") {
+    if (current === "waiting_for_customer") return "in_progress";
+    if (current === "resolved") return "reopened";
+    return null;
+  }
+  // admin
+  if (current === "open" || current === "reopened") return "in_progress";
+  if (current === "in_progress") return "waiting_for_customer";
+  return null;
+}
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const { id } = await params;
+  const ticket = await getSupportTicketById(id);
+  if (!ticket) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+  // Same authorization as the GET on the parent resource.
+  if (!user.isPlatform && ticket.zitadelUserId !== user.id) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+
+  const body = await req.json().catch(() => null);
+  const parsed = createSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid input", details: parsed.error.flatten() },
+      { status: 400 }
+    );
+  }
+
+  const authorKind: "customer" | "admin" = user.isPlatform
+    ? "admin"
+    : "customer";
+
+  try {
+    const comment = await createSupportTicketComment({
+      ticketId: id,
+      authorUserId: user.id,
+      authorName: user.name,
+      authorKind,
+      body: parsed.data.body,
+    });
+
+    // Auto-bump status if the comment changes the ball's court.
+    const nextStatus = autoBumpStatus(ticket.status, authorKind);
+    if (nextStatus) {
+      await updateSupportTicket(id, { status: nextStatus });
+    }
+
+    // Email the other side. Customer's reply → admin queue;
+    // admin's reply → customer.
+    if (authorKind === "customer") {
+      sendSupportAdminNotificationEmail({
+        reason: "replied",
+        ticketId: ticket.id,
+        title: ticket.title,
+        contactName: ticket.contactName,
+        contactEmail: ticket.contactEmail,
+        body: parsed.data.body,
+        category: ticket.category,
+      }).catch((e) => console.error("admin notification:", e));
+    } else {
+      sendSupportTicketReplyEmail({
+        to: ticket.contactEmail,
+        contactName: ticket.contactName,
+        ticketId: ticket.id,
+        title: ticket.title,
+        authorName: user.name,
+        body: parsed.data.body,
+      }).catch((e) => console.error("reply email:", e));
+    }
+
+    return NextResponse.json({ comment }, { status: 201 });
+  } catch (e: any) {
+    console.error("Failed to create support ticket comment:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to add comment") },
+      { status: 500 }
+    );
+  }
+}

src/app/api/support/tickets/[id]/route.ts

@@ -0,0 +1,132 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { getSessionUser } from "@/lib/session";
+import {
+  getSupportTicketById,
+  listCommentsForTicket,
+  updateSupportTicket,
+} from "@/lib/db";
+import { sendSupportTicketStatusEmail } from "@/lib/email";
+import { safeError } from "@/lib/errors";
+
+/**
+ * Single support ticket detail (Feature 5).
+ *
+ * GET — returns the ticket plus all comments in chronological order.
+ * Authorization: customer sees their own; platform admin sees any.
+ *
+ * PATCH — change status and/or category. Admin only. Sends a status
+ * change email to the customer if status changed, UNLESS the same
+ * call also creates a comment (in that case the comment endpoint
+ * handles the email so the customer doesn't get two messages).
+ *
+ * No DELETE — tickets are durable history. Resolved tickets stay in
+ * the DB for the audit trail.
+ */
+
+const patchSchema = z.object({
+  status: z
+    .enum(["open", "in_progress", "waiting_for_customer", "resolved", "reopened"])
+    .optional(),
+  category: z
+    .enum(["bug", "feature_request", "question", "billing", "other"])
+    .optional(),
+});
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const { id } = await params;
+  const ticket = await getSupportTicketById(id);
+  if (!ticket) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+  // Authorization: customer can see their own; platform admin can
+  // see any. Owners cannot see their org's tickets — confirmed by
+  // Feature 5 visibility design (per-user, not per-org).
+  if (!user.isPlatform && ticket.zitadelUserId !== user.id) {
+    // Don't leak existence — same 404 as if the ticket didn't exist.
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+  const comments = await listCommentsForTicket(id);
+  return NextResponse.json({ ticket, comments });
+}
+
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const { id } = await params;
+  const ticket = await getSupportTicketById(id);
+  if (!ticket) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+
+  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 }
+    );
+  }
+
+  // Authorization: status/category changes are admin-only EXCEPT
+  // the customer can close their own ticket via status='resolved'
+  // (Feature 5 design — gives them an "I figured it out, never mind"
+  // escape hatch). Customer cannot reopen via this endpoint — that
+  // happens automatically when they comment on a resolved ticket
+  // (handled in the comments POST).
+  const isCustomerSelfClose =
+    !user.isPlatform &&
+    ticket.zitadelUserId === user.id &&
+    parsed.data.status === "resolved" &&
+    parsed.data.category === undefined;
+
+  if (!user.isPlatform && !isCustomerSelfClose) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  try {
+    const previousStatus = ticket.status;
+    const updated = await updateSupportTicket(id, parsed.data);
+    if (!updated) {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+    }
+
+    // Email customer when admin (not the customer themselves)
+    // changes status. Skip on customer-self-close — they know what
+    // they did. Skip when status didn't actually change (admin
+    // edited only category).
+    if (
+      user.isPlatform &&
+      parsed.data.status !== undefined &&
+      parsed.data.status !== previousStatus
+    ) {
+      sendSupportTicketStatusEmail({
+        to: ticket.contactEmail,
+        contactName: ticket.contactName,
+        ticketId: ticket.id,
+        title: ticket.title,
+        newStatus: parsed.data.status,
+      }).catch((e) => console.error("status email:", e));
+    }
+
+    return NextResponse.json({ ticket: updated });
+  } catch (e: any) {
+    console.error("Failed to update support ticket:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to update ticket") },
+      { status: 500 }
+    );
+  }
+}

src/app/api/support/tickets/route.ts

@@ -0,0 +1,103 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { getSessionUser } from "@/lib/session";
+import {
+  createSupportTicket,
+  listSupportTicketsForUser,
+  listAllSupportTickets,
+} from "@/lib/db";
+import {
+  sendSupportTicketCreatedEmail,
+  sendSupportAdminNotificationEmail,
+} from "@/lib/email";
+import { safeError } from "@/lib/errors";
+
+/**
+ * Support tickets API (Feature 5).
+ *
+ * Visibility: tickets are scoped strictly per-user (zitadel_user_id).
+ * Coworkers in the same org cannot see each other's tickets — this
+ * is the team's design choice for privacy. Platform admins see
+ * everything (the admin queue lives at the same UI but pulls from
+ * a different list).
+ *
+ * GET — for platform users, returns all tickets across all users.
+ * For everyone else, returns only the caller's own tickets. The
+ * client decides the rendering based on user role; we just return
+ * the right list.
+ *
+ * POST — creates a ticket, sends a confirmation email to the
+ * customer and a notification email to the admin distribution list.
+ */
+
+const createSchema = z.object({
+  title: z.string().trim().min(3, "required").max(200),
+  description: z.string().trim().min(10, "required").max(10_000),
+  category: z.enum(["bug", "feature_request", "question", "billing", "other"]),
+});
+
+export async function GET() {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  // Platform admins get the global queue; everyone else sees their
+  // own tickets only. Visibility-by-default-deny: even an org owner
+  // doesn't see their coworkers' tickets, by Feature 5 design.
+  const tickets = user.isPlatform
+    ? await listAllSupportTickets()
+    : await listSupportTicketsForUser(user.id);
+  return NextResponse.json({ tickets });
+}
+
+export async function POST(req: NextRequest) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const body = await req.json().catch(() => null);
+  const parsed = createSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid input", details: parsed.error.flatten() },
+      { status: 400 }
+    );
+  }
+  try {
+    const ticket = await createSupportTicket({
+      zitadelOrgId: user.orgId,
+      zitadelUserId: user.id,
+      title: parsed.data.title,
+      description: parsed.data.description,
+      category: parsed.data.category,
+      contactName: user.name,
+      contactEmail: user.email,
+    });
+
+    // Fire-and-log email notifications. Both are best-effort;
+    // failure to send doesn't roll back the ticket creation.
+    sendSupportTicketCreatedEmail({
+      to: user.email,
+      contactName: user.name,
+      ticketId: ticket.id,
+      title: ticket.title,
+    }).catch((e) => console.error("ticket created email:", e));
+    sendSupportAdminNotificationEmail({
+      reason: "created",
+      ticketId: ticket.id,
+      title: ticket.title,
+      contactName: user.name,
+      contactEmail: user.email,
+      body: ticket.description,
+      category: ticket.category,
+    }).catch((e) => console.error("admin notification:", e));
+
+    return NextResponse.json({ ticket }, { status: 201 });
+  } catch (e: any) {
+    console.error("Failed to create support ticket:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to create ticket") },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,105 @@
+import { NextResponse } from "next/server";
+import { getSessionUser, canMutate } from "@/lib/session";
+import { inviteOrgMember, isValidInviteRole } from "@/lib/team";
+import { z } from "zod";
+import { safeError } from "@/lib/errors";
+
+const inviteSchema = z.object({
+  email: z.string().email(),
+  givenName: z.string().min(1).max(100),
+  familyName: z.string().min(1).max(100),
+  role: z.enum(["owner", "user"]),
+  preferredLanguage: z.enum(["en", "de", "fr", "it"]).optional(),
+});
+
+/**
+ * POST /api/team/invite
+ *
+ * Invite a new member into the caller's org. Body shape:
+ *   { email, givenName, familyName, role: "owner" | "user" }
+ *
+ * Allowed roles are explicitly only the customer-side ones —
+ * `isValidInviteRole` enforces this server-side too as a belt
+ * alongside the Zod enum (the Zod enum is the primary check; the
+ * helper exists because future callers in admin tooling may want the
+ * same predicate).
+ *
+ * Platform users can also call this — they'd be inviting members
+ * into their own platform org, which is uncommon but legal.
+ */
+export async function POST(req: Request) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  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);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid input", details: parsed.error.flatten() },
+      { status: 400 }
+    );
+  }
+  const input = parsed.data;
+
+  // Defensive recheck — the Zod enum already guarantees this, but it
+  // makes the intent explicit at the call site.
+  if (!isValidInviteRole(input.role)) {
+    return NextResponse.json(
+      { error: "Role must be 'owner' or 'user'." },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const result = await inviteOrgMember({
+      orgId: user.orgId,
+      email: input.email,
+      givenName: input.givenName,
+      familyName: input.familyName,
+      role: input.role,
+      preferredLanguage: input.preferredLanguage,
+    });
+    return NextResponse.json(
+      {
+        userId: result.userId,
+        message:
+          "Invitation sent. The user will receive an email with a link to set their password.",
+      },
+      { status: 201 }
+    );
+  } catch (e: any) {
+    console.error("Invite failed:", e);
+    // ZITADEL "user already exists" surfaces as a 4xx error; pass it
+    // through with a clean message so the client can render localized
+    // text.
+    const msg = e?.message ?? "";
+    if (msg.includes("already exists") || msg.includes("9.User.AlreadyExisting")) {
+      return NextResponse.json(
+        {
+          error: "A user with this email already exists.",
+          code: "user_already_exists",
+        },
+        { status: 409 }
+      );
+    }
+    return NextResponse.json(
+      { error: safeError(e, "Failed to invite user") },
+      { status: e.statusCode || 500 }
+    );
+  }
+}

src/app/api/team/route.ts

@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server";
+import { getSessionUser, canMutate } from "@/lib/session";
+import { getOrgMembers } from "@/lib/team";
+import { safeError } from "@/lib/errors";
+
+/**
+ * GET /api/team
+ *
+ * Returns the joined members-with-roles view for the caller's org.
+ * Gated on `canMutate` — only owners and platform users can see the
+ * full member list. A `user`-role member shouldn't be browsing the
+ * roster.
+ *
+ * Platform admins viewing this endpoint see members of their OWN
+ * platform org. To inspect customer org membership cross-cut, use
+ * ZITADEL Console — that's the deliberate boundary between portal
+ * (customer self-service) and console (full IAM).
+ */
+export async function GET() {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  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);
+    return NextResponse.json({ members });
+  } catch (e: any) {
+    console.error("Failed to list team members:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to list team members") },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSessionUser, canMutate } from "@/lib/session";
+import { getTenant } from "@/lib/k8s";
+import { removeTenantAssignment } from "@/lib/db";
+import { safeError } from "@/lib/errors";
+
+/**
+ * DELETE /api/tenants/[name]/assignments/[userId]
+ *
+ * Revoke a user's assignment to a tenant. Owner+platform only.
+ *
+ * No-op if the assignment didn't exist (delete is idempotent at the
+ * DB layer). We don't surface "not found" because that would let a
+ * caller probe for assignment existence — the boolean response is
+ * just "you're authorized to do this".
+ *
+ * Note on self-revocation: an owner can revoke their own row even
+ * though it has no practical effect (owners see all tenants). A
+ * `user`-role member cannot revoke their own assignment because
+ * they're already gated out by canMutate.
+ */
+export async function DELETE(
+  _req: NextRequest,
+  { params }: { params: Promise<{ name: string; userId: string }> }
+) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  if (!canMutate(user)) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const { name, userId } = await params;
+
+  const tenant = await getTenant(name);
+  if (!tenant) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+  // Same cross-org boundary as assign: customer owners can only manage
+  // their own org's tenants; platform users can manage anywhere.
+  const tenantOrgId = tenant.metadata.labels?.["pieced.ch/zitadel-org-id"];
+  if (!user.isPlatform && tenantOrgId !== user.orgId) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+
+  try {
+    await removeTenantAssignment(name, userId);
+    return NextResponse.json({ message: "Assignment revoked." });
+  } catch (e: any) {
+    console.error("Failed to remove tenant assignment:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to revoke assignment") },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,193 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSessionUser, canMutate } from "@/lib/session";
+import { canUserSeeTenant } from "@/lib/visibility";
+import { getTenant } from "@/lib/k8s";
+import {
+  listAssignmentsForTenant,
+  addTenantAssignment,
+} from "@/lib/db";
+import { getOrgMembers } from "@/lib/team";
+import { safeError } from "@/lib/errors";
+import { z } from "zod";
+
+const assignSchema = z.object({
+  userId: z.string().min(1).max(200),
+});
+
+/**
+ * GET /api/tenants/[name]/assignments
+ *
+ * Returns the list of users assigned to a tenant, joined with their
+ * ZITADEL profile (display name, email, role) so the UI can render
+ * a useful list without an extra round-trip.
+ *
+ * Visibility: any caller who can see the tenant can see its
+ * assignments. This includes user-role members who are themselves
+ * assigned — they see their fellow assignees, which is intentional
+ * (so they know who else has access).
+ */
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ name: string }> }
+) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const { name } = await params;
+
+  const tenant = await getTenant(name);
+  if (!tenant) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+  if (!(await canUserSeeTenant(user, tenant))) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+
+  try {
+    const orgId = tenant.metadata.labels?.["pieced.ch/zitadel-org-id"];
+    const [rows, members] = await Promise.all([
+      listAssignmentsForTenant(name),
+      orgId ? getOrgMembers(orgId) : Promise.resolve([]),
+    ]);
+
+    const memberById = new Map(members.map((m) => [m.userId, m]));
+
+    // Enrich assignments with member metadata. If the member can't be
+    // found in ZITADEL (stale row, e.g. user was removed from the org
+    // outside the portal), surface the orphan with a placeholder name
+    // so admins can clean it up.
+    const assignments = rows.map((r) => {
+      const m = memberById.get(r.zitadelUserId);
+      return {
+        userId: r.zitadelUserId,
+        displayName: m?.displayName ?? "(removed user)",
+        email: m?.email ?? "",
+        roles: m?.roles ?? [],
+        assignedAt: r.assignedAt,
+        assignedBy: r.assignedBy,
+        orphan: !m,
+      };
+    });
+
+    return NextResponse.json({ assignments });
+  } catch (e: any) {
+    console.error("Failed to list tenant assignments:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to list assignments") },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * POST /api/tenants/[name]/assignments
+ *
+ * Body: { userId }
+ *
+ * Assign a user to a tenant. Owner+platform only. The target user must
+ * already be a member of the tenant's org (we verify via the team list)
+ * — to add a brand-new user, the owner first invites them via
+ * POST /api/team/invite, then assigns them here.
+ *
+ * Idempotent: re-assigning is a no-op (DB INSERT ... ON CONFLICT DO
+ * NOTHING). The original `assignedAt`/`assignedBy` are preserved.
+ *
+ * Owners technically don't need to be assigned (they see all of their
+ * org's tenants anyway) but we don't reject the operation — just lets
+ * future bookkeeping work consistently.
+ */
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ name: string }> }
+) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  if (!canMutate(user)) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const { name } = await params;
+
+  const tenant = await getTenant(name);
+  if (!tenant) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+  // Customer owners can only assign within their own org. Platform
+  // users can assign anywhere (rare, but consistent with admin scope).
+  const tenantOrgId = tenant.metadata.labels?.["pieced.ch/zitadel-org-id"];
+  if (!user.isPlatform && tenantOrgId !== user.orgId) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+  if (!tenantOrgId) {
+    return NextResponse.json(
+      { error: "Tenant is missing the org-id label; cannot assign." },
+      { 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);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid input", details: parsed.error.flatten() },
+      { status: 400 }
+    );
+  }
+
+  // Verify the target user is actually a member of the tenant's org.
+  // This is the audit boundary — without it, an owner could grant
+  // access to arbitrary user IDs they made up.
+  try {
+    const members = await getOrgMembers(tenantOrgId);
+    const target = members.find((m) => m.userId === parsed.data.userId);
+    if (!target) {
+      return NextResponse.json(
+        {
+          error:
+            "Target user is not a member of this organization. Invite them first.",
+          code: "user_not_in_org",
+        },
+        { status: 400 }
+      );
+    }
+
+    await addTenantAssignment({
+      tenantName: name,
+      orgId: tenantOrgId,
+      userId: parsed.data.userId,
+      assignedBy: user.id,
+    });
+
+    return NextResponse.json(
+      { message: "User assigned.", userId: parsed.data.userId },
+      { status: 201 }
+    );
+  } catch (e: any) {
+    console.error("Failed to add tenant assignment:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to assign user") },
+      { status: 500 }
+    );
+  }
+}

src/app/api/tenants/[name]/resume-request/route.ts

@@ -0,0 +1,199 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { getSessionUser, canMutate } from "@/lib/session";
+import { getTenant, setTenantAnnotation } from "@/lib/k8s";
+import { canUserSeeTenant } from "@/lib/visibility";
+import {
+  createResumeRequest,
+  getPendingResumeRequestForTenant,
+  getTenantRequestByTenantName,
+} from "@/lib/db";
+import { sendResumeRequestAdminNotificationEmail } from "@/lib/email";
+import { safeError } from "@/lib/errors";
+
+/**
+ * Body schema. Both fields optional; the customer can submit a
+ * resume request with no body at all (the JS client sends `{}`),
+ * or with a note explaining their reactivation rationale.
+ *
+ * Length cap mirrors `billing_notes` (2000 chars) — same lower
+ * bound for "free-form text we don't want abused".
+ */
+const bodySchema = z.object({
+  customerNotes: z
+    .string()
+    .trim()
+    .max(2000)
+    .optional()
+    .transform((v) => (v && v.length > 0 ? v : undefined)),
+});
+
+/**
+ * POST /api/tenants/[name]/resume-request
+ *
+ * Owner-initiated request to reactivate a suspended tenant (Bug 37a).
+ * Creates a pending tenant_request of type 'resume' for admin review,
+ * and stamps the PiecedTenant CR with an annotation that pauses the
+ * operator's 60-day deletion timer.
+ *
+ * Why a request flow at all
+ * -------------------------
+ * Customers can self-serve cancel; resume requires admin oversight.
+ * Reactivation may involve re-validating billing, confirming the
+ * customer still wants to be active, or other manual steps. The
+ * request flow gives admins a queue to review, with the same approve/
+ * reject UX as initial provision requests.
+ *
+ * Authorization
+ * -------------
+ * Owners and platform admins. Platform admins shouldn't normally use
+ * this endpoint — they have direct PATCH suspend access — but it's
+ * permissive in case admin tooling pivots.
+ *
+ * Validation
+ * ----------
+ *  - Tenant must exist and be visible to the caller.
+ *  - Tenant must be currently suspended. Resuming an active tenant
+ *    is meaningless.
+ *  - At most one pending resume request per tenant. Enforced by the
+ *    DB's partial unique index, but we also check explicitly here to
+ *    return a friendly 409 instead of a 500.
+ *
+ * Side effects on success
+ * -----------------------
+ *  - INSERT into tenant_requests (request_type='resume', status='pending')
+ *  - PATCH annotation `pieced.ch/resume-request-pending=<request-id>` on
+ *    the CR. This is the operator's signal to pause its 60-day deletion
+ *    timer until the request transitions to terminal.
+ *
+ * The annotation set is best-effort: if the K8s PATCH fails after the
+ * DB insert, the row exists without the annotation. The customer
+ * sees the request as pending; admin can still approve. The only
+ * functional consequence is the 60-day timer doesn't pause until the
+ * next request transition, which is fine in practice (admin response
+ * times are dramatically shorter than 60 days).
+ */
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ name: string }> }
+) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  if (!canMutate(user)) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const { name } = await params;
+  const tenant = await getTenant(name);
+  if (!tenant) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+  if (!(await canUserSeeTenant(user, tenant))) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+
+  if (!tenant.spec.suspend) {
+    return NextResponse.json(
+      { error: "Tenant is not suspended; nothing to resume." },
+      { status: 409 }
+    );
+  }
+
+  // Body is optional — the customer can submit a resume request
+  // with no payload at all, or attach a free-form note.
+  const rawBody = await req.json().catch(() => ({}));
+  const parsed = bodySchema.safeParse(rawBody ?? {});
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid input", details: parsed.error.flatten() },
+      { status: 400 }
+    );
+  }
+  const customerNotes = parsed.data.customerNotes;
+
+  // Already a pending request? Don't duplicate.
+  const existing = await getPendingResumeRequestForTenant(name);
+  if (existing) {
+    return NextResponse.json(
+      {
+        error: "A resume request for this tenant is already pending.",
+        request: { id: existing.id, createdAt: existing.createdAt },
+      },
+      { status: 409 }
+    );
+  }
+
+  // Pull traceability fields (companyName, agentName) from the original
+  // provision request. The schema marks these NOT NULL, so we have to
+  // populate them; copying from the provision row keeps the resume
+  // row navigable in the admin UI without making up values.
+  const provision = await getTenantRequestByTenantName(name);
+
+  try {
+    const resumeRequest = await createResumeRequest({
+      tenantName: name,
+      zitadelOrgId:
+        tenant.metadata.labels?.["pieced.ch/zitadel-org-id"] ?? user.orgId,
+      zitadelUserId: user.id,
+      contactName: user.name,
+      contactEmail: user.email,
+      companyName: provision?.companyName ?? tenant.spec.displayName ?? name,
+      agentName: provision?.agentName ?? "Assistant",
+      customerNotes,
+    });
+
+    // Stamp the annotation so the operator pauses its TTL. If this
+    // fails the request still exists; surface the error so admin
+    // tooling can re-stamp if needed, but don't roll back.
+    try {
+      await setTenantAnnotation(
+        name,
+        "pieced.ch/resume-request-pending",
+        resumeRequest.id
+      );
+    } catch (e) {
+      console.warn(
+        "resume request created but annotation could not be set; operator's 60-day timer will not pause until next reconcile triggered by request transition",
+        e
+      );
+    }
+
+    // Notify admin distribution. Fire-and-log: failure to email
+    // doesn't roll back the request creation. The customer's note
+    // (if any) is included so admin can triage from the email
+    // without opening the queue.
+    sendResumeRequestAdminNotificationEmail({
+      tenantName: name,
+      companyName: resumeRequest.companyName,
+      contactName: resumeRequest.contactName,
+      contactEmail: resumeRequest.contactEmail,
+      customerNotes,
+    }).catch((e) =>
+      console.error("resume admin notification email failed:", e)
+    );
+
+    return NextResponse.json(
+      {
+        message: "Resume request submitted. An admin will review shortly.",
+        request: { id: resumeRequest.id, status: resumeRequest.status },
+      },
+      { status: 201 }
+    );
+  } catch (e: any) {
+    // Unique violation (a pending row already exists for this tenant)
+    // is friendly-handled above; this catches everything else.
+    if (e.code === "23505") {
+      return NextResponse.json(
+        { error: "A resume request for this tenant is already pending." },
+        { status: 409 }
+      );
+    }
+    console.error("Resume request creation failed:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to submit resume request") },
+      { status: 500 }
+    );
+  }
+}

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

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
-import { getSessionUser } from "@/lib/session";
+import { getSessionUser, canMutate } from "@/lib/session";
+import { canUserSeeTenant } from "@/lib/visibility";
 import { getTenant, patchTenantSpec } from "@/lib/k8s";
 import { getPackageDef } from "@/lib/packages";
 import { safeError } from "@/lib/errors";
@@ -22,11 +23,11 @@ export async function GET(
     if (!tenant)
       return NextResponse.json({ error: "Not found" }, { status: 404 });
 
-    if (
-      !user.isPlatform &&
-      tenant.metadata.labels?.["pieced.ch/zitadel-org-id"] !== user.orgId
-    ) {
-      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    // Slice 6: visibility now includes assignment-table check for
+    // user-role members. We return 404 (not 403) to avoid leaking
+    // tenant existence — same as cross-org reads.
+    if (!(await canUserSeeTenant(user, tenant))) {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
     }
 
     return NextResponse.json(tenant);
@@ -46,7 +47,7 @@ export async function PATCH(
   if (!user)
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-  if (!user.isPlatform && !user.roles.includes("owner")) {
+  if (!canMutate(user)) {
     return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   }
 

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

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { getSessionUser } from "@/lib/session";
+import { getSessionUser, canMutate } from "@/lib/session";
 import { getTenant } from "@/lib/k8s";
 import { writePackageSecrets } from "@/lib/openbao";
 import { getPackageDef } from "@/lib/packages";
@@ -12,7 +12,7 @@ export async function POST(
   if (!user)
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-  if (!user.isPlatform && !user.roles.includes("owner")) {
+  if (!canMutate(user)) {
     return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   }
 

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

@@ -0,0 +1,141 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { getSessionUser, canMutate } from "@/lib/session";
+import { getTenant, patchTenantSpec, setTenantAnnotation } from "@/lib/k8s";
+import { canUserSeeTenant } from "@/lib/visibility";
+import { safeError } from "@/lib/errors";
+
+const patchSchema = z.object({
+  suspend: z.boolean(),
+});
+
+/**
+ * PATCH /api/tenants/[name]/suspend
+ *
+ * Direct suspend control on the PiecedTenant CR. Sets `spec.suspend`
+ * to true (cancel) or false (resume).
+ *
+ * Authorization (Bug 37a)
+ * -----------------------
+ * - suspend=true  → owners and platform admins may call.
+ * - suspend=false → platform admins ONLY. Owners must go through the
+ *   resume-request flow (POST /api/tenants/[name]/resume-request),
+ *   which creates a pending request for admin approval. This
+ *   asymmetry is by design: cancellation is self-service (low risk;
+ *   reversible by request); reactivation requires admin oversight
+ *   (e.g. to re-validate billing, confirm intent).
+ *
+ * Customer flow:
+ *   - Cancel:  PATCH suspend=true  here
+ *   - Resume:  POST /resume-request — creates a 'resume' tenant_request,
+ *              admin approves via /api/admin/requests/[id]/approve which
+ *              then PATCHes suspend=false here as a platform user.
+ *
+ * Workload behaviour
+ * ------------------
+ * On suspend=true the operator deletes the OpenClawInstance, stopping
+ * the pod within seconds. Tenant data — namespace, ConfigMaps,
+ * OpenBao secrets, CNPG database, LiteLLM team — is retained.
+ *
+ * Suspended tenants enter a 60-day retention window (operator
+ * constant `retentionAfterSuspend`); after that, the tenant is fully
+ * deleted unless a pending resume request exists. The operator
+ * checks the `pieced.ch/resume-request-pending` annotation to know
+ * about pending requests; we set it here when admin approves the
+ * resume (transitively, via the admin-approve endpoint), and clear
+ * it when the request reaches a terminal state.
+ */
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ name: string }> }
+) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  if (!canMutate(user)) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const { name } = await params;
+  const tenant = await getTenant(name);
+  if (!tenant) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+  // Identical pattern to the detail page — don't leak existence.
+  if (!(await canUserSeeTenant(user, tenant))) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+
+  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 { suspend } = parsed.data;
+
+  // Bug 37a: resume (suspend=false) is platform-admin only via this
+  // endpoint. Owners must go through the resume-request flow.
+  if (!suspend && !user.isPlatform) {
+    return NextResponse.json(
+      {
+        error:
+          "Resume requires platform-admin approval. Submit a resume request via /api/tenants/[name]/resume-request.",
+      },
+      { status: 403 }
+    );
+  }
+
+  // No-op early exit. Avoids a needless K8s patch + status churn when
+  // the user double-clicks the button or the UI is briefly out of sync.
+  if (Boolean(tenant.spec.suspend) === suspend) {
+    return NextResponse.json(
+      { message: "No change.", suspend },
+      { status: 200 }
+    );
+  }
+
+  try {
+    await patchTenantSpec(name, { suspend });
+
+    // On admin-side resume, also clear the pending-resume-request
+    // annotation if it exists. Belt-and-suspenders: the admin-approve
+    // endpoint already clears it on its happy path, but a platform
+    // user resuming directly via this endpoint shouldn't leave the
+    // annotation behind. Best-effort: failure to clear the annotation
+    // is logged but doesn't fail the resume.
+    if (!suspend) {
+      try {
+        await setTenantAnnotation(
+          name,
+          "pieced.ch/resume-request-pending",
+          null
+        );
+      } catch (e) {
+        console.warn(
+          "failed to clear resume-request-pending annotation; operator will see it stale until next request transition",
+          e
+        );
+      }
+    }
+
+    return NextResponse.json(
+      {
+        message: suspend
+          ? "Subscription cancelled. Your data is preserved for 60 days."
+          : "Subscription resumed.",
+        suspend,
+      },
+      { status: 200 }
+    );
+  } catch (e: any) {
+    console.error("Suspend toggle failed:", e);
+    return NextResponse.json(
+      { error: safeError(e, "Failed to update subscription") },
+      { status: e.statusCode || 500 }
+    );
+  }
+}

src/app/api/tenants/route.ts

@@ -1,21 +1,14 @@
 import { NextResponse } from "next/server";
 import { getSessionUser } from "@/lib/session";
 import { listTenants } from "@/lib/k8s";
+import { listVisibleTenants } from "@/lib/visibility";
 
 export async function GET() {
   const user = await getSessionUser();
   if (!user)
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-  const tenants = await listTenants();
-
-  if (user.isPlatform) {
-    return NextResponse.json(tenants);
-  }
-
-  // Customers see only their own tenant
-  const own = tenants.filter(
-    (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
-  );
-  return NextResponse.json(own);
+  const all = await listTenants();
+  const visible = await listVisibleTenants(user, all);
+  return NextResponse.json(visible);
 }

src/app/api/usage/route.ts

@@ -1,65 +1,116 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getSessionUser } from "@/lib/session";
 import { listTenants } from "@/lib/k8s";
+import { listVisibleTenants } from "@/lib/visibility";
 import { getTeamInfo, getTeamSpendLogsV2 } from "@/lib/litellm";
 import { safeError } from "@/lib/errors";
 
 /**
  * GET /api/usage
  *
- * Customers: tenant resolved server-side from the user's orgId. The
- *            response is filtered by the tenant's `litellmKeyAlias` so
- *            sibling tenants in the same org don't bleed into the total.
- * Platform admins: may pass ?teamId=... to inspect any team. They may
- *                  also pass ?keyAlias=... to scope to a single tenant.
+ * Per-tenant spend/token usage for a given month.
  *
- * Slice 2 note
- * ------------
- * LiteLLM teams are now shared across all tenants of an org. The team's
- * `/team/info` budget is the *company* budget; the per-tenant numbers
- * come from filtering spend logs by `key_alias`. If a tenant has no
- * `litellmKeyAlias` in status (transitional state right after upgrade,
- * before the operator has reconciled), we fall back to team-level
- * filtering — the numbers will be slightly inflated for that one
- * reconcile cycle.
+ * Resolution rules (in priority order)
+ * ------------------------------------
+ *  1. `?tenant=<name>` query param — the canonical path. The route
+ *     looks up the PiecedTenant CR by name, runs it through the
+ *     viewer's visibility filter, and reads `status.litellmTeamId` +
+ *     `status.litellmKeyAlias`. This is what the tenant-detail page
+ *     calls with for both customers and admins.
+ *  2. `?teamId=<id>` (+ optional `?keyAlias=<alias>`) — admin escape
+ *     hatch for debugging across orgs (e.g. opening the platform
+ *     panel without a specific tenant in mind). Platform-only;
+ *     ignored for customer sessions.
+ *  3. No params — 400. We deliberately do NOT fall back to "the
+ *     first visible tenant". Bug 19: that fallback meant siblings
+ *     in the same org showed identical numbers because the API
+ *     always picked the same "first" tenant regardless of which
+ *     detail page the customer was viewing. Forcing callers to be
+ *     explicit makes the bug structurally impossible to reintroduce.
+ *
+ * Filtering
+ * ---------
+ * LiteLLM's `/spend/logs/v2` accepts a server-side `key_alias` filter.
+ * We pass it through directly — no more "fetch all team pages and
+ * post-filter in JS" (which was O(team_total) memory per request and
+ * masked the routing bug above by being slow enough that nobody
+ * noticed which alias was actually being used).
+ *
+ * The team-level budget is still surfaced as the *org* budget, since
+ * teams are org-scoped post-Slice-2. That's intentional: the customer
+ * sees "your company has X budget remaining" alongside "this tenant
+ * cost Y this month".
  */
 export async function GET(req: NextRequest) {
   const user = await getSessionUser();
   if (!user)
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
+  const tenantName = req.nextUrl.searchParams.get("tenant");
   let teamId: string | null = null;
   let keyAlias: string | null = null;
 
-  if (user.isPlatform) {
-    teamId = req.nextUrl.searchParams.get("teamId") ?? null;
-    keyAlias = req.nextUrl.searchParams.get("keyAlias") ?? null;
-  }
+  if (tenantName) {
+    // Path 1: resolve from tenant name with visibility check.
+    //
+    // listVisibleTenants enforces the same visibility rules as every
+    // other read endpoint:
+    //   - platform admins see everything
+    //   - owners see all tenants in their org
+    //   - users see only the tenants they're assigned to (Slice 6)
+    //
+    // Filtering through that list rather than reading the CR directly
+    // means a malicious caller can't probe arbitrary tenant names to
+    // learn what exists in other orgs.
+    const allTenants = await listTenants();
+    const visible = await listVisibleTenants(user, allTenants);
+    const tenant = visible.find((t) => t.metadata.name === tenantName);
 
-  // For customers (or admins without explicit params): resolve from their tenant.
-  if (!teamId) {
-    const tenants = await listTenants();
-    const orgTenant = tenants.find(
-      (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
-    );
-
-    if (!orgTenant?.status?.litellmTeamId) {
+    if (!tenant) {
       return NextResponse.json(
-        { error: "No active tenant found for your organization" },
+        { error: "Tenant not found or not accessible" },
         { status: 404 }
       );
     }
-    teamId = orgTenant.status.litellmTeamId;
-
-    // If the operator has populated the per-tenant key alias, filter by it.
-    // Falling back to team-level (no alias) will return the org total, which
-    // is acceptable transitionally but means siblings' usage shows up here.
-    if (orgTenant.status.litellmKeyAlias) {
-      keyAlias = orgTenant.status.litellmKeyAlias;
+    if (!tenant.status?.litellmTeamId) {
+      // Tenant exists but the operator hasn't reconciled it yet.
+      // Common right after onboarding; the customer should see a
+      // friendly empty state, not a 500.
+      return NextResponse.json(
+        { error: "Tenant is still provisioning, no usage data yet" },
+        { status: 409 }
+      );
     }
+    teamId = tenant.status.litellmTeamId;
+    // litellmKeyAlias is set by the operator's LiteLLM reconcile step
+    // alongside litellmTeamId, so if teamId is present this should be
+    // too. Defensive fallback to team-level if missing — in that case
+    // the customer briefly sees company totals until the next operator
+    // reconcile, which is better than 500.
+    keyAlias = tenant.status.litellmKeyAlias ?? null;
+  } else if (user.isPlatform) {
+    // Path 2: admin escape hatch.
+    teamId = req.nextUrl.searchParams.get("teamId");
+    keyAlias = req.nextUrl.searchParams.get("keyAlias");
+    if (!teamId) {
+      return NextResponse.json(
+        {
+          error:
+            "Either ?tenant=<name> or ?teamId=<id> (admin) must be provided",
+        },
+        { status: 400 }
+      );
+    }
+  } else {
+    // Path 3: no resolution possible. See doc above for why we don't
+    // pick a default.
+    return NextResponse.json(
+      { error: "Tenant must be specified via ?tenant=<name>" },
+      { status: 400 }
+    );
   }
 
-  // Month param: YYYY-MM, defaults to current month
+  // Month param: YYYY-MM, defaults to current month.
   const now = new Date();
   const monthParam =
     req.nextUrl.searchParams.get("month") ||
@@ -75,11 +126,11 @@ export async function GET(req: NextRequest) {
   try {
     const teamInfo = await getTeamInfo(teamId);
 
-    // Fetch all pages from the team. We always query at the team level —
-    // LiteLLM's /spend/logs/v2 doesn't filter by key_alias reliably across
-    // versions, so we paginate and post-filter in code. For pilot scale
-    // this is cheap; if a single team ever exceeds ~10k entries/month we
-    // can revisit.
+    // Page through results — server-side filtered by key_alias when
+    // provided. Pagination still needed because LiteLLM caps
+    // page_size at 100, and a busy tenant can easily exceed that in
+    // a month. With server-side filtering this stays cheap regardless
+    // of how busy sibling tenants in the same team are.
     const allRequests: any[] = [];
     let page = 1;
     while (true) {
@@ -88,33 +139,25 @@ export async function GET(req: NextRequest) {
         startStr,
         endStr,
         page,
-        100
+        100,
+        keyAlias
       );
       allRequests.push(...(result.data || []));
       if (page >= (result.total_pages || 1)) break;
       page++;
+      // Defensive cap. A pathological response with bogus total_pages
+      // shouldn't be able to spin us forever. 50 pages × 100 = 5000
+      // entries/month/tenant is well above any realistic usage at
+      // pilot scale.
+      if (page > 50) break;
     }
 
-    // Apply key_alias post-filter when scoping to a single tenant. Match
-    // both `key_alias` (newer LiteLLM) and `metadata.user_api_key_alias`
-    // (older builds nest it inside metadata).
-    const scoped = keyAlias
-      ? allRequests.filter((r) => {
-          const alias =
-            r.key_alias ??
-            r.metadata?.user_api_key_alias ??
-            r.api_key_alias ??
-            null;
-          return alias === keyAlias;
-        })
-      : allRequests;
-
-    // Aggregate by day
+    // Aggregate by day.
     const byDay: Record<
       string,
       { inputTokens: number; outputTokens: number; spend: number }
     > = {};
-    for (const r of scoped) {
+    for (const r of allRequests) {
       const day = (r.startTime || r.endTime || "").slice(0, 10);
       if (!day) continue;
       if (!byDay[day])
@@ -128,30 +171,30 @@ export async function GET(req: NextRequest) {
       .sort(([a], [b]) => a.localeCompare(b))
       .map(([date, d]) => ({ date, ...d }));
 
-    const totalInput = scoped.reduce(
+    const totalInput = allRequests.reduce(
       (s, r) => s + (r.prompt_tokens || 0),
       0
     );
-    const totalOutput = scoped.reduce(
+    const totalOutput = allRequests.reduce(
       (s, r) => s + (r.completion_tokens || 0),
       0
     );
-    const totalSpend = scoped.reduce((s, r) => s + (r.spend || 0), 0);
+    const totalSpend = allRequests.reduce((s, r) => s + (r.spend || 0), 0);
 
     return NextResponse.json({
       teamId,
-      keyAlias, // null when not filtering — useful for the client to know it sees company-wide data
+      keyAlias, // null when admin queries team-wide (no specific tenant)
       month: monthParam,
       currentPeriod: {
         inputTokens: totalInput,
         outputTokens: totalOutput,
         totalSpend,
-        requestCount: scoped.length,
+        requestCount: allRequests.length,
       },
       // Budget is always team-level (= company budget). Spend reported
       // here is the team total, not the per-key total — the customer
-      // wants to see "how much of our company budget is left", not just
-      // "how much has this one tenant cost".
+      // wants to see "how much of our company budget is left", not
+      // just "how much has this one tenant cost".
       budget: {
         maxBudget: teamInfo?.team_info?.max_budget ?? null,
         spend: teamInfo?.team_info?.spend ?? 0,

src/components/admin/admin-panel.tsx

@@ -199,7 +199,22 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
         throw new Error(data.error || "Delete failed");
       }
       setDeleteModal(null);
-      await fetchTenants();
+      // Bug 32: K8s deletion is asynchronous — the resource enters a
+      // Terminating phase with a deletionTimestamp set, finalizers run,
+      // then the resource is fully removed. fetchTenants() right
+      // after the API call would race the K8s store and often still
+      // include the just-deleted row. Two complementary fixes:
+      //   1. Optimistically drop the row from local state so the UI
+      //      reflects the user's intent immediately.
+      //   2. Schedule a delayed refetch (1.5s) to pick up any side
+      //      effects (cascaded request rows, freshly-released names).
+      // The immediate fetchTenants() is kept as a "best chance" — if
+      // K8s does report the deletion synchronously (rare), we get the
+      // freshest data. If it doesn't, the optimistic update has us
+      // covered until the delayed refetch lands.
+      setTenants((prev) => prev.filter((t) => t.metadata.name !== name));
+      fetchTenants();
+      setTimeout(() => fetchTenants(), 1500);
     } catch (e: any) {
       setError(e.message);
     } finally {
@@ -347,9 +362,40 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
                         className="border-b border-border last:border-0 hover:bg-surface-2/50 transition-colors"
                       >
                         <td className="px-4 py-3">
-                          <div className="font-medium text-text-primary text-sm">
+                          <div className="font-medium text-text-primary text-sm flex items-center gap-2">
                             {req.companyName}
+                            {/* Bug 37a: distinguish resume requests in the
+                                queue. Provision and resume share status
+                                semantics but very different action
+                                consequences — a resume approval just
+                                un-suspends an existing tenant, no
+                                provisioning workflow runs. */}
+                            {req.requestType === "resume" && (
+                              <span
+                                className="px-1.5 py-0.5 text-[10px] font-semibold rounded uppercase tracking-wider bg-success/15 text-success"
+                                title={t("resumeRequestTooltip")}
+                              >
+                                {t("resumeRequestBadge")}
+                              </span>
+                            )}
                           </div>
+                          {req.requestType === "resume" && req.tenantName && (
+                            <div className="text-text-muted text-xs font-mono mt-0.5">
+                              {req.tenantName}
+                            </div>
+                          )}
+                          {/* Feature 6: customer's reactivation rationale,
+                              shown inline so admin can triage without
+                              opening a detail view. Truncated for
+                              queue density; full content on hover. */}
+                          {req.requestType === "resume" && req.customerNotes && (
+                            <div
+                              className="text-text-secondary text-xs mt-1 max-w-[280px] line-clamp-2 whitespace-pre-wrap"
+                              title={req.customerNotes}
+                            >
+                              {req.customerNotes}
+                            </div>
+                          )}
                         </td>
                         <td className="px-4 py-3">
                           <div className="text-text-primary text-sm">

src/components/channel-users/channel-users.tsx

@@ -17,12 +17,15 @@ interface ChannelUsersProps {
   enabledChannels: string[];
   /** Current channelUsers from the PiecedTenant spec */
   initialChannelUsers: Record<string, string[]>;
+  /** Slice 5: when false, add inputs and remove ✕ buttons are hidden. */
+  canEdit?: boolean;
 }
 
 export function ChannelUsers({
   tenantName,
   enabledChannels,
   initialChannelUsers,
+  canEdit = true,
 }: ChannelUsersProps) {
   const t = useTranslations("channelUsers");
   const router = useRouter();
@@ -146,44 +149,48 @@ export function ChannelUsers({
                     className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-mono bg-accent/10 text-accent border border-accent/20 rounded-full"
                   >
                     {userId}
-                    <button
-                      onClick={() => handleRemove(channel, userId)}
-                      disabled={saving}
-                      className="text-accent/60 hover:text-red-400 transition-colors disabled:opacity-50"
-                      title={t("remove")}
-                    >
-                      ✕
-                    </button>
+                    {canEdit && (
+                      <button
+                        onClick={() => handleRemove(channel, userId)}
+                        disabled={saving}
+                        className="text-accent/60 hover:text-red-400 transition-colors disabled:opacity-50"
+                        title={t("remove")}
+                      >
+                        ✕
+                      </button>
+                    )}
                   </span>
                 ))}
               </div>
             )}
 
-            {/* Add user */}
-            <div className="flex gap-2">
-              <input
-                type="text"
-                value={inputValues[channel] || ""}
-                onChange={(e) =>
-                  setInputValues((prev) => ({
-                    ...prev,
-                    [channel]: e.target.value,
-                  }))
-                }
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") handleAdd(channel);
-                }}
-                placeholder={t("placeholder")}
-                className="flex-1 px-3 py-2 bg-surface-1 border border-border rounded-lg text-sm text-text-primary font-mono placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
-              />
-              <button
-                onClick={() => handleAdd(channel)}
-                disabled={saving || !inputValues[channel]?.trim()}
-                className="px-4 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {saving ? "…" : t("add")}
-              </button>
-            </div>
+            {/* Add user — hidden in read-only mode */}
+            {canEdit && (
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={inputValues[channel] || ""}
+                  onChange={(e) =>
+                    setInputValues((prev) => ({
+                      ...prev,
+                      [channel]: e.target.value,
+                    }))
+                  }
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") handleAdd(channel);
+                  }}
+                  placeholder={t("placeholder")}
+                  className="flex-1 px-3 py-2 bg-surface-1 border border-border rounded-lg text-sm text-text-primary font-mono placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                />
+                <button
+                  onClick={() => handleAdd(channel)}
+                  disabled={saving || !inputValues[channel]?.trim()}
+                  className="px-4 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {saving ? "…" : t("add")}
+                </button>
+              </div>
+            )}
           </div>
         );
       })}

src/components/dashboard/budget-editable-card.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { Modal } from "@/components/ui/modal";
+
+/**
+ * Format remaining budget as CHF. Same adaptive precision rule as the
+ * usage display: 2 decimals for amounts ≥ 1, 4 for smaller values
+ * so per-request residuals don't round to zero. The currency comes
+ * from LiteLLM via our CHF pricing config — see chf() in
+ * usage-display.tsx for the full reasoning.
+ */
+function formatRemaining(n: number): string {
+  const decimals = Math.abs(n) >= 1 ? 2 : 4;
+  return `CHF ${n.toFixed(decimals)}`;
+}
+
+interface Props {
+  tenantName: string;
+  maxBudget: number | null;
+  remaining: number | null;
+  budgetDuration: string | null;
+  /** Called after a successful save so the parent re-fetches usage. */
+  onSaved: () => void;
+}
+
+/**
+ * Clickable Budget StatCard with edit modal (Feature 7).
+ *
+ * The display side mirrors the read-only StatCard layout exactly so
+ * the grid stays uniform. The "click to edit" hint is implicit via
+ * hover state — a "Set" / "Edit" link in the corner would be louder
+ * but adds clutter on a tile that's already busy. Customers who
+ * mouse over discover it.
+ *
+ * Important UX note shown in the modal: the budget is org-scoped,
+ * not per-tenant. All tenants in the same ZITADEL org share the
+ * underlying LiteLLM team. Without that callout, a customer with
+ * multiple tenants might think they're capping just one.
+ */
+export function BudgetEditableCard({
+  tenantName,
+  maxBudget,
+  remaining,
+  budgetDuration,
+  onSaved,
+}: Props) {
+  const t = useTranslations("usage");
+  const tCommon = useTranslations("common");
+  const [open, setOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  // Form state. Mode = "unlimited" | "capped". When unlimited, the
+  // duration dropdown is hidden because LiteLLM's reset cadence is
+  // meaningless without a cap.
+  const [mode, setMode] = useState<"unlimited" | "capped">(
+    maxBudget !== null ? "capped" : "unlimited"
+  );
+  const [budgetInput, setBudgetInput] = useState<string>(
+    maxBudget !== null ? String(maxBudget) : ""
+  );
+  const [duration, setDuration] = useState<"30d" | "1mo" | "1y">(
+    (budgetDuration === "30d" ||
+      budgetDuration === "1mo" ||
+      budgetDuration === "1y")
+      ? budgetDuration
+      : "1mo"
+  );
+
+  // Reset form when modal opens — picks up any change made elsewhere
+  // (e.g. another browser tab) since this card was last re-rendered.
+  useEffect(() => {
+    if (open) {
+      setMode(maxBudget !== null ? "capped" : "unlimited");
+      setBudgetInput(maxBudget !== null ? String(maxBudget) : "");
+      setDuration(
+        (budgetDuration === "30d" ||
+          budgetDuration === "1mo" ||
+          budgetDuration === "1y")
+          ? budgetDuration
+          : "1mo"
+      );
+      setError("");
+    }
+  }, [open, maxBudget, budgetDuration]);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    setError("");
+    try {
+      let body: { maxBudget: number | null; budgetDuration: string | null };
+      if (mode === "unlimited") {
+        body = { maxBudget: null, budgetDuration: null };
+      } else {
+        const parsed = parseFloat(budgetInput);
+        if (!Number.isFinite(parsed) || parsed <= 0) {
+          throw new Error(t("budgetInvalid"));
+        }
+        body = { maxBudget: parsed, budgetDuration: duration };
+      }
+      const res = await fetch(
+        `/api/tenants/${encodeURIComponent(tenantName)}/budget`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body),
+        }
+      );
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("budgetSaveFailed"));
+      }
+      setOpen(false);
+      onSaved();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => {
+          // Temporary debug aid — if clicks reach the handler we'll
+          // see this in the browser console. Remove once confirmed.
+          console.log("[BudgetEditableCard] open clicked");
+          setOpen(true);
+        }}
+        className="bg-surface-1 border border-accent/40 rounded-xl p-4 text-left hover:border-accent transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-accent/40 group block w-full"
+      >
+        <div className="text-xs text-text-muted mb-1 flex items-center justify-between">
+          <span>{t("budget")}</span>
+          <span className="text-[10px] text-accent inline-flex items-center gap-1">
+            {/* Pencil icon — unambiguous "this is editable" affordance.
+                Visible at all times (was hover-only before, which on
+                touch devices and at-a-glance scanning gave no
+                indication the card was clickable). */}
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="11"
+              height="11"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+            </svg>
+            {t("budgetEdit")}
+          </span>
+        </div>
+        <div className="text-lg font-semibold text-text-primary tabular-nums">
+          {remaining !== null ? formatRemaining(remaining) : t("noLimit")}
+        </div>
+      </button>
+
+      <Modal open={open} onClose={() => setOpen(false)} ariaLabel={t("budgetEditTitle")}>
+        <h3 className="font-display text-lg font-semibold text-text-primary mb-2">
+          {t("budgetEditTitle")}
+        </h3>
+        <p className="text-sm text-text-secondary mb-4">
+          {t("budgetEditDescription")}
+        </p>
+          <div className="text-xs text-amber-400 bg-amber-400/10 border border-amber-400/20 rounded-lg px-3 py-2 mb-5">
+            {t("budgetOrgScopeWarning")}
+          </div>
+
+          <form onSubmit={onSubmit} className="space-y-4">
+            {/* Mode toggle: unlimited vs capped. Two radios are
+                clearer than a single "max" field where 0 means
+                unlimited (which would conflict with our zod
+                validation requiring positive). */}
+            <div className="space-y-2">
+              <label className="flex items-start gap-2 text-sm text-text-primary cursor-pointer">
+                <input
+                  type="radio"
+                  name="budget-mode"
+                  checked={mode === "unlimited"}
+                  onChange={() => setMode("unlimited")}
+                  className="mt-1"
+                />
+                <span>
+                  <span className="font-medium">{t("budgetModeUnlimited")}</span>
+                  <span className="block text-xs text-text-muted">
+                    {t("budgetModeUnlimitedDescription")}
+                  </span>
+                </span>
+              </label>
+              <label className="flex items-start gap-2 text-sm text-text-primary cursor-pointer">
+                <input
+                  type="radio"
+                  name="budget-mode"
+                  checked={mode === "capped"}
+                  onChange={() => setMode("capped")}
+                  className="mt-1"
+                />
+                <span>
+                  <span className="font-medium">{t("budgetModeCapped")}</span>
+                  <span className="block text-xs text-text-muted">
+                    {t("budgetModeCappedDescription")}
+                  </span>
+                </span>
+              </label>
+            </div>
+
+            {mode === "capped" && (
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2">
+                <div>
+                  <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+                    {t("budgetAmount")} <span className="text-red-400">*</span>
+                  </label>
+                  <div className="relative">
+                    <span className="absolute left-3 top-2 text-sm text-text-muted font-medium">
+                      CHF
+                    </span>
+                    <input
+                      type="number"
+                      min="0.01"
+                      max="1000000"
+                      step="0.01"
+                      required
+                      value={budgetInput}
+                      onChange={(e) => setBudgetInput(e.target.value)}
+                      className="w-full pl-12 pr-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+                    {t("budgetResetCadence")}
+                  </label>
+                  <select
+                    value={duration}
+                    onChange={(e) =>
+                      setDuration(e.target.value as "30d" | "1mo" | "1y")
+                    }
+                    className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+                  >
+                    <option value="30d">{t("budgetCadence_30d")}</option>
+                    <option value="1mo">{t("budgetCadence_1mo")}</option>
+                    <option value="1y">{t("budgetCadence_1y")}</option>
+                  </select>
+                </div>
+              </div>
+            )}
+
+            {error && (
+              <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-2 pt-2">
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                disabled={saving}
+                className="text-sm px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors"
+              >
+                {tCommon("cancel")}
+              </button>
+              <button
+                type="submit"
+                disabled={saving}
+                className="text-sm px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+              >
+                {saving ? tCommon("loading") : tCommon("save")}
+              </button>
+            </div>
+          </form>
+        </Modal>
+    </>
+  );
+}

src/components/dashboard/usage-display.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslations } from "next-intl";
 import { useEffect, useState, useCallback } from "react";
+import { BudgetEditableCard } from "@/components/dashboard/budget-editable-card";
 
 interface DailyUsage {
   date: string;
@@ -18,7 +19,17 @@ interface UsageData {
     totalSpend: number;
     requestCount: number;
   };
-  budget: { maxBudget: number | null; spend: number; remaining: number | null };
+  budget: {
+    maxBudget: number | null;
+    spend: number;
+    remaining: number | null;
+    /**
+     * Feature 7: budget reset cadence as stored on LiteLLM.
+     * Strings: "30d" / "1mo" / "1y" / null (no reset). UI maps these
+     * to user-friendly labels.
+     */
+    budgetDuration: string | null;
+  };
   rateLimits: { rpm: number | null; tpm: number | null };
   dailyUsage: DailyUsage[];
 }
@@ -29,8 +40,31 @@ function fmt(n: number): string {
   return n.toString();
 }
 
-function usd(n: number): string {
-  return `$${n.toFixed(4)}`;
+/**
+ * Format a numeric amount as CHF.
+ *
+ * Note on currency labelling: LiteLLM stores raw cost numbers it
+ * receives from upstream (OpenAI/Anthropic), which originate as USD.
+ * The PieCed pricing config (Slice 5) converts those numbers to
+ * CHF before LiteLLM persists them, so the values flowing through
+ * here are already CHF amounts. We label them as such in the UI;
+ * "USD" or "$" anywhere in the customer-facing experience would
+ * be misleading.
+ *
+ * Precision is adaptive:
+ *   - Amounts ≥ 1 CHF: 2 decimals (typical money formatting).
+ *   - Smaller amounts:  4 decimals — per-request inference costs are
+ *                       routinely sub-rappen, and rounding to 2dp
+ *                       would render CHF 0.0042 as "CHF 0.00",
+ *                       which obscures real costs from customers
+ *                       looking at the daily breakdown.
+ *
+ * This is a customer-facing display helper; for storage and
+ * comparisons keep using the raw number.
+ */
+function chf(n: number): string {
+  const decimals = Math.abs(n) >= 1 ? 2 : 4;
+  return `CHF ${n.toFixed(decimals)}`;
 }
 
 function getCurrentMonth(): string {
@@ -69,7 +103,7 @@ function UsageChart({ data }: { data: DailyUsage[] }) {
           const x = i * (barW + 2);
           return (
             <g key={d.date}>
-              <title>{d.date}: {fmt(d.inputTokens)} in / {fmt(d.outputTokens)} out — {usd(d.spend)}</title>
+              <title>{d.date}: {fmt(d.inputTokens)} in / {fmt(d.outputTokens)} out — {chf(d.spend)}</title>
               <rect x={x} y={h - totalH} width={barW} height={totalH - inputH} rx={1} fill="var(--color-accent)" opacity={0.3} />
               <rect x={x} y={h - inputH} width={barW} height={inputH} rx={1} fill="var(--color-accent)" opacity={0.7} />
               {i % 7 === 0 && (
@@ -94,19 +128,37 @@ function UsageChart({ data }: { data: DailyUsage[] }) {
 /**
  * Usage display widget.
  *
- * - Customers: don't pass teamId or keyAlias — the backend resolves both
- *   from the session-bound tenant.
- * - Admins inspecting a specific tenant: pass `teamId` (the org-level
- *   LiteLLM team id) AND `keyAlias` (the tenant's virtual-key alias).
- *   Without `keyAlias`, the response includes spend from sibling tenants
- *   in the same org, since teams are shared since Slice 2.
+ * Pass `tenant=<name>` for the canonical path — works for both
+ * customers and admins, the API resolves team+alias from the tenant
+ * CR's status. The visibility check on the API ensures users can't
+ * query tenants they shouldn't see.
+ *
+ * `teamId`/`keyAlias` remain available as a platform-admin escape
+ * hatch for cross-org debugging, but the tenant-detail and dashboard
+ * paths should always use `tenant`.
+ *
+ * Bug 19 fix: previous version omitted both props for customer
+ * sessions, expecting the API to "figure it out". The API's fallback
+ * was "first visible tenant", which meant siblings in the same org
+ * showed identical numbers regardless of which detail page was open.
+ * Now the page passes the tenant name explicitly; no fallback exists.
  */
 export function UsageDisplay({
+  tenant,
   teamId,
   keyAlias,
+  canEditBudget = false,
 }: {
+  tenant?: string | null;
   teamId?: string | null;
   keyAlias?: string | null;
+  /**
+   * Feature 7: when true, the Budget StatCard becomes clickable and
+   * opens the budget editor. Off by default — owners and platform
+   * admins get it on; `user` role customers see the budget read-only.
+   * Server component decides this via canMutate(user).
+   */
+  canEditBudget?: boolean;
 }) {
   const t = useTranslations("usage");
   const [month, setMonth] = useState(getCurrentMonth);
@@ -121,11 +173,13 @@ export function UsageDisplay({
     setError(null);
 
     const params = new URLSearchParams({ month });
-    if (teamId) {
+    if (tenant) {
+      params.set("tenant", tenant);
+    } else if (teamId) {
+      // Admin escape hatch — only honoured by the API when the
+      // viewer is platform-role.
       params.set("teamId", teamId);
-    }
-    if (keyAlias) {
-      params.set("keyAlias", keyAlias);
+      if (keyAlias) params.set("keyAlias", keyAlias);
     }
 
     fetch(`/api/usage?${params}`)
@@ -133,7 +187,7 @@ export function UsageDisplay({
       .then(setData)
       .catch((e) => setError(e.message))
       .finally(() => setLoading(false));
-  }, [teamId, keyAlias, month]);
+  }, [tenant, teamId, keyAlias, month]);
 
   useEffect(() => { fetchUsage(); }, [fetchUsage]);
 
@@ -173,11 +227,25 @@ export function UsageDisplay({
           <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
             <StatCard label={t("inputTokens")} value={fmt(data.currentPeriod.inputTokens)} />
             <StatCard label={t("outputTokens")} value={fmt(data.currentPeriod.outputTokens)} />
-            <StatCard label={t("totalSpend")} value={usd(data.currentPeriod.totalSpend)} accent />
-            <StatCard
-              label={t("budget")}
-              value={data.budget.remaining !== null ? usd(data.budget.remaining) : t("noLimit")}
-            />
+            <StatCard label={t("totalSpend")} value={chf(data.currentPeriod.totalSpend)} accent />
+            {canEditBudget && tenant ? (
+              <BudgetEditableCard
+                tenantName={tenant}
+                maxBudget={data.budget.maxBudget}
+                remaining={data.budget.remaining}
+                budgetDuration={data.budget.budgetDuration}
+                onSaved={fetchUsage}
+              />
+            ) : (
+              <StatCard
+                label={t("budget")}
+                value={
+                  data.budget.remaining !== null
+                    ? chf(data.budget.remaining)
+                    : t("noLimit")
+                }
+              />
+            )}
           </div>
 
           <div className="bg-surface-1 border border-border rounded-xl p-5">

src/components/layout/nav-shell.tsx

@@ -13,8 +13,13 @@ function NavBar() {
   const pathname = usePathname();
   const user = (session as any)?.platformUser;
 
-  const isLogin = pathname === "/login";
-  if (isLogin) return null;
+  // Hide the nav entirely on auth-only routes. These pages have no
+  // session yet — showing "Dashboard" / "Sign Out" is misleading at
+  // best (the buttons would 401 or redirect-loop). Keep this list
+  // narrow and route-exact: anything else we add to the auth flow
+  // (e.g. password reset) needs to be added here too.
+  const isAuthRoute = pathname === "/login" || pathname === "/register";
+  if (isAuthRoute) return null;
 
   return (
     <header className="sticky top-0 z-50 border-b border-border bg-surface-1/80 backdrop-blur-md">
@@ -40,6 +45,46 @@ function NavBar() {
             <NavLink href="/dashboard" active={pathname === "/dashboard"}>
               {t("dashboard")}
             </NavLink>
+            {/* Slice 7: /team is owner+platform only AND personal
+                accounts are excluded — they have no team to manage
+                (Bug 8). Match server-side gates (`canMutate`,
+                `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"}>
+                  {t("team")}
+                </NavLink>
+              )}
+            {/* Bug 35: /settings is shown to anyone who can mutate org-level
+                state — owners and platform admins. Personal accounts also
+                see it; their billing page is optional but the entry point
+                exists for consistency. `user`-role customers don't see it
+                (canMutate is false). */}
+            {user &&
+              (user.isPlatform ||
+                (Array.isArray(user.roles) && user.roles.includes("owner"))) && (
+                <NavLink
+                  href="/settings"
+                  active={pathname.startsWith("/settings")}
+                >
+                  {t("settings")}
+                </NavLink>
+              )}
+            {/* Feature 5: Support is available to every signed-in
+                user. Customers see their own tickets only; platform
+                admins see the queue. */}
+            {user && (
+              <NavLink
+                href="/support"
+                active={pathname.startsWith("/support")}
+              >
+                {t("support")}
+              </NavLink>
+            )}
             {user?.isPlatform && (
               <NavLink href="/admin" active={pathname === "/admin"}>
                 {t("admin")}
@@ -51,8 +96,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

@@ -1,31 +1,68 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
 import { OnboardingWizard } from "./wizard";
-import { ProvisioningStatus } from "./provisioning-status";
 
 interface OnboardingFlowProps {
   orgName: string;
-  initialState: "no_request" | "pending" | "approved" | "provisioning" | "rejected";
+  /**
+   * 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;
+  /**
+   * Bug 35: true if the org already has a billing record. The wizard
+   * uses this to skip the billing step on subsequent tenants — capture
+   * once at first onboarding, reuse afterwards. Editable later via
+   * /settings/billing.
+   */
+  hasOrgBilling?: boolean;
+  /**
+   * Bug 6: when present, the wizard is rendered in edit mode against
+   * the given pending request. See `OnboardingWizard` for the full
+   * shape and behavioural contract.
+   */
+  editingRequest?: React.ComponentProps<
+    typeof OnboardingWizard
+  >["editingRequest"];
 }
 
 /**
- * Orchestrates the onboarding experience:
- * - no_request → show wizard
- * - pending/approved/provisioning/rejected → show status
- * - After wizard submission → switch to status polling
+ * Wraps the onboarding wizard. On successful submission, refreshes the
+ * router so the parent server component re-renders with the new pending
+ * request visible in the dashboard list.
+ *
+ * Slice 3: this component used to manage the no_request → pending →
+ * provisioning → active state machine, with conditional rendering of
+ * `<ProvisioningStatus>`. That state is now reflected at the dashboard
+ * level (which renders one `<ProvisioningStatus>` per pending request),
+ * so this wrapper does just one thing: show the wizard, then navigate.
  */
-export function OnboardingFlow({ orgName, initialState }: OnboardingFlowProps) {
-  const [showWizard, setShowWizard] = useState(initialState === "no_request");
+export function OnboardingFlow({
+  orgName,
+  userName,
+  userEmail,
+  hasOrgBilling,
+  editingRequest,
+}: OnboardingFlowProps) {
+  const router = useRouter();
 
-  if (showWizard) {
-    return (
-      <OnboardingWizard
-        orgName={orgName}
-        onComplete={() => setShowWizard(false)}
-      />
-    );
-  }
-
-  return <ProvisioningStatus />;
+  return (
+    <OnboardingWizard
+      orgName={orgName}
+      userName={userName}
+      userEmail={userEmail}
+      hasOrgBilling={hasOrgBilling}
+      editingRequest={editingRequest}
+      onComplete={() => {
+        // Navigate back to /dashboard and re-fetch on the server. The
+        // parent server component will see the new `pending` row and
+        // render its `<ProvisioningStatus>` card automatically.
+        router.push("/dashboard");
+        router.refresh();
+      }}
+    />
+  );
 }

src/components/onboarding/provisioning-status.tsx

@@ -1,71 +1,160 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useTranslations, useFormatter } from "next-intl";
 import { Card } from "@/components/ui/card";
+import { Modal } from "@/components/ui/modal";
 import { StatusBadge } from "@/components/ui/status-badge";
 import { formatDateTime, formatRelative } from "@/lib/format";
 
-interface OnboardingState {
-  state: string;
-  request?: {
-    id: string;
-    status: string;
-    companyName: string;
-    agentName: string;
-    adminNotes?: string;
-    createdAt?: string;
-  };
-  tenant?: {
-    name: string;
-    phase: string;
-    message?: string;
-    conditions?: Array<{
-      type: string;
-      status: string;
-      reason?: string;
-      message?: string;
-      lastTransitionTime?: string;
-    }>;
-  };
+interface RequestSummary {
+  id: string;
+  instanceName?: string | null;
+  agentName: string;
+  packages: string[];
+  status: string;
+  adminNotes?: string;
+  tenantName?: string;
+  dismissedAt?: string | null;
+  createdAt?: string;
+  updatedAt?: string;
 }
 
-export function ProvisioningStatus() {
+interface TenantSummary {
+  name: string;
+  displayName: string;
+  phase: string;
+  conditions: Array<{
+    type: string;
+    status: string;
+    reason?: string;
+    message?: string;
+    lastTransitionTime?: string;
+  }>;
+}
+
+interface SingleRequestState {
+  request: RequestSummary;
+  tenant: TenantSummary | null;
+}
+
+interface Props {
+  requestId: string;
+  /**
+   * Whether the viewer can act on this request — cancel a pending one,
+   * dismiss a rejected one, etc. True for owner + platform; false for
+   * `user`-role customers (who shouldn't see in-flight requests at all,
+   * but defence in depth — `canSeeInflightRequests` already gates the
+   * dashboard side).
+   */
+  canAct: boolean;
+}
+
+/**
+ * ProvisioningStatus
+ *
+ * Polls /api/onboarding?id=<requestId> every 5s until the request reaches
+ * a terminal state. Slice 3: takes a `requestId` prop so multiple of
+ * these can render on the same dashboard for different in-flight
+ * requests.
+ *
+ * Slice 7 / Bug 6 + 13:
+ *   - pending → cancel + edit buttons
+ *   - rejected → admin notes block + dismiss button
+ *   - cancelled → small acknowledgement card + dismiss button
+ *   - terminal Ready/Active states unchanged
+ */
+export function ProvisioningStatus({ requestId, canAct }: Props) {
   const t = useTranslations("onboarding");
+  const tCommon = useTranslations("common");
   const f = useFormatter();
-  const [data, setData] = useState<OnboardingState | null>(null);
+  const router = useRouter();
+
+  const [data, setData] = useState<SingleRequestState | null>(null);
   const [error, setError] = useState("");
+  const [actionPending, setActionPending] = useState(false);
+  const [confirmCancel, setConfirmCancel] = useState(false);
 
   const poll = useCallback(async () => {
     try {
-      const res = await fetch("/api/onboarding");
+      const res = await fetch(
+        `/api/onboarding?id=${encodeURIComponent(requestId)}`
+      );
       if (!res.ok) throw new Error("Failed to fetch status");
       const json = await res.json();
       setData(json);
     } catch (err: any) {
       setError(err.message);
     }
-  }, []);
+  }, [requestId]);
 
   useEffect(() => {
     poll();
+    const status = data?.request?.status;
+    const phase = data?.tenant?.phase;
+    const terminal =
+      status === "rejected" ||
+      status === "cancelled" ||
+      status === "active" ||
+      phase === "Ready" ||
+      phase === "Running";
 
-    // Poll every 5 seconds while not in a terminal state
-    const interval = setInterval(() => {
-      if (
-        data?.state === "provisioned" ||
-        data?.state === "rejected" ||
-        data?.state === "active"
-      ) {
-        return;
-      }
-      poll();
-    }, 5000);
+    if (terminal) return;
 
+    const interval = setInterval(poll, 5000);
     return () => clearInterval(interval);
-  }, [poll, data?.state]);
+  }, [poll, data?.request?.status, data?.tenant?.phase]);
 
-  if (error) {
+  const handleCancel = async () => {
+    setActionPending(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/onboarding/${encodeURIComponent(requestId)}`,
+        { method: "DELETE" }
+      );
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.error || t("cancelFailed"));
+      }
+      setConfirmCancel(false);
+      // Re-poll so the card transitions to "cancelled" state without a
+      // full route refresh — the dashboard's surrounding tenant cards
+      // are unaffected.
+      await poll();
+      router.refresh();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setActionPending(false);
+    }
+  };
+
+  const handleDismiss = async () => {
+    setActionPending(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/onboarding/${encodeURIComponent(requestId)}/dismiss`,
+        { method: "POST" }
+      );
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.error || t("dismissFailed"));
+      }
+      // Server-rendered list query (`listActiveTenantRequestsByOrgId`)
+      // filters out dismissed rows — refresh to drop this card.
+      router.refresh();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setActionPending(false);
+    }
+  };
+
+  if (error && !data) {
     return (
       <Card>
         <div className="text-xs text-red-400">{error}</div>
@@ -84,8 +173,14 @@ export function ProvisioningStatus() {
     );
   }
 
-  // Pending admin approval
-  if (data.state === "pending") {
+  const status = data.request.status;
+  const label =
+    data.request.instanceName ||
+    data.request.tenantName ||
+    data.request.agentName;
+
+  // ─── Pending: awaiting admin approval ───────────────────────────────
+  if (status === "pending") {
     return (
       <Card className="animate-in">
         <div className="text-center py-6">
@@ -107,10 +202,15 @@ export function ProvisioningStatus() {
           <h2 className="font-display text-lg font-semibold text-text-primary mb-2">
             {t("pendingTitle")}
           </h2>
+          {label && (
+            <p className="text-xs font-mono text-text-secondary mb-2">
+              {label}
+            </p>
+          )}
           <p className="text-sm text-text-secondary max-w-sm mx-auto">
             {t("pendingDescription")}
           </p>
-          {data.request?.createdAt && (
+          {data.request.createdAt && (
             <p
               className="text-xs text-text-muted mt-4"
               title={formatDateTime(data.request.createdAt, f)}
@@ -124,13 +224,72 @@ export function ProvisioningStatus() {
               </span>
             </p>
           )}
+
+          {/* Bug 6 — owner-only edit + cancel actions while still
+              pending. Once admin acts, both buttons disappear (the
+              status branch changes). */}
+          {canAct && (
+            <div className="flex justify-center gap-2 mt-5">
+              <Link
+                href={`/dashboard/edit/${encodeURIComponent(requestId)}`}
+                className="text-sm font-medium px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary hover:border-text-secondary transition-colors"
+              >
+                {t("editRequest")}
+              </Link>
+              <button
+                type="button"
+                onClick={() => setConfirmCancel(true)}
+                className="text-sm font-medium px-4 py-2 rounded-lg border border-red-500/30 text-red-400 hover:bg-red-500/10 transition-colors"
+              >
+                {t("cancelRequest")}
+              </button>
+            </div>
+          )}
+          {error && (
+            <p className="text-xs text-red-400 mt-3">{error}</p>
+          )}
         </div>
+
+        {confirmCancel && (
+          <Modal
+            open={confirmCancel}
+            onClose={() => setConfirmCancel(false)}
+            ariaLabel={t("cancelConfirmRequestTitle")}
+          >
+            <h3 className="font-display text-lg font-semibold text-text-primary mb-2">
+              {t("cancelConfirmRequestTitle")}
+            </h3>
+            <p className="text-sm text-text-secondary mb-5">
+              {t("cancelConfirmRequestDescription")}
+            </p>
+            <div className="flex justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => setConfirmCancel(false)}
+                disabled={actionPending}
+                className="text-sm px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors"
+              >
+                {tCommon("cancel")}
+              </button>
+              <button
+                type="button"
+                onClick={handleCancel}
+                disabled={actionPending}
+                className="text-sm px-4 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors disabled:opacity-50"
+              >
+                {actionPending
+                  ? tCommon("loading")
+                  : t("cancelRequestConfirm")}
+              </button>
+            </div>
+          </Modal>
+        )}
       </Card>
     );
   }
 
-  // Rejected
-  if (data.state === "rejected") {
+  // ─── Rejected: admin declined ───────────────────────────────────────
+  if (status === "rejected") {
     return (
       <Card className="animate-in">
         <div className="text-center py-6">
@@ -152,23 +311,99 @@ export function ProvisioningStatus() {
           <h2 className="font-display text-lg font-semibold text-text-primary mb-2">
             {t("rejectedTitle")}
           </h2>
+          {label && (
+            <p className="text-xs font-mono text-text-secondary mb-2">
+              {label}
+            </p>
+          )}
           <p className="text-sm text-text-secondary max-w-sm mx-auto">
             {t("rejectedDescription")}
           </p>
-          {data.request?.adminNotes && (
-            <p className="text-xs text-text-muted mt-3 bg-surface-2 border border-border rounded-lg p-3 max-w-sm mx-auto">
-              {data.request.adminNotes}
-            </p>
+          {data.request.adminNotes && (
+            <div className="text-left text-xs text-text-secondary mt-4 bg-surface-2 border border-border rounded-lg p-3 max-w-sm mx-auto">
+              <div className="font-semibold uppercase tracking-wider text-text-muted text-[10px] mb-1.5">
+                {t("rejectionReason")}
+              </div>
+              <div className="whitespace-pre-wrap">
+                {data.request.adminNotes}
+              </div>
+            </div>
           )}
+          {/* Bug 13: dismiss removes this card from the dashboard but
+              keeps the row in the DB for audit. The customer can also
+              just resubmit via the wizard — both paths are valid. */}
+          {canAct && (
+            <div className="flex justify-center mt-5">
+              <button
+                type="button"
+                onClick={handleDismiss}
+                disabled={actionPending}
+                className="text-sm font-medium px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary hover:border-text-secondary transition-colors disabled:opacity-50"
+              >
+                {actionPending ? tCommon("loading") : t("dismiss")}
+              </button>
+            </div>
+          )}
+          {error && <p className="text-xs text-red-400 mt-3">{error}</p>}
         </div>
       </Card>
     );
   }
 
-  // Provisioning in progress
+  // ─── Cancelled: customer cancelled before admin acted (Bug 6) ──────
+  if (status === "cancelled") {
+    return (
+      <Card className="animate-in">
+        <div className="text-center py-6">
+          <div className="h-14 w-14 rounded-xl bg-text-muted/15 flex items-center justify-center mx-auto mb-4">
+            <svg
+              className="h-7 w-7 text-text-muted"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.5}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </div>
+          <h2 className="font-display text-lg font-semibold text-text-primary mb-2">
+            {t("cancelledTitle")}
+          </h2>
+          {label && (
+            <p className="text-xs font-mono text-text-secondary mb-2">
+              {label}
+            </p>
+          )}
+          <p className="text-sm text-text-secondary max-w-sm mx-auto">
+            {t("cancelledDescription")}
+          </p>
+          {canAct && (
+            <div className="flex justify-center mt-5">
+              <button
+                type="button"
+                onClick={handleDismiss}
+                disabled={actionPending}
+                className="text-sm font-medium px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary hover:border-text-secondary transition-colors disabled:opacity-50"
+              >
+                {actionPending ? tCommon("loading") : t("dismiss")}
+              </button>
+            </div>
+          )}
+          {error && <p className="text-xs text-red-400 mt-3">{error}</p>}
+        </div>
+      </Card>
+    );
+  }
+
+  // ─── Provisioning: approved, operator working ──────────────────────
   if (
-    data.state === "approved" ||
-    data.state === "provisioning"
+    status === "approved" ||
+    status === "provisioning" ||
+    (status === "active" && data.tenant && data.tenant.phase !== "Ready")
   ) {
     const phase = data.tenant?.phase ?? "Pending";
     const conditions = data.tenant?.conditions ?? [];
@@ -182,6 +417,11 @@ export function ProvisioningStatus() {
           <h2 className="font-display text-lg font-semibold text-text-primary mb-2">
             {t("provisioningTitle")}
           </h2>
+          {label && (
+            <p className="text-xs font-mono text-text-secondary mb-2">
+              {label}
+            </p>
+          )}
           <p className="text-sm text-text-secondary">
             {t("provisioningDescription")}
           </p>
@@ -216,8 +456,8 @@ export function ProvisioningStatus() {
     );
   }
 
-  // Provisioned / Running
-  if (data.state === "provisioned") {
+  // ─── Active / Ready ─────────────────────────────────────────────────
+  if (status === "active") {
     return (
       <Card className="animate-in">
         <div className="text-center py-6">
@@ -239,6 +479,11 @@ export function ProvisioningStatus() {
           <h2 className="font-display text-lg font-semibold text-text-primary mb-2">
             {t("readyTitle")}
           </h2>
+          {label && (
+            <p className="text-xs font-mono text-text-secondary mb-2">
+              {label}
+            </p>
+          )}
           <p className="text-sm text-text-secondary max-w-sm mx-auto mb-4">
             {t("readyDescription")}
           </p>

src/components/onboarding/wizard.tsx

@@ -4,10 +4,38 @@ 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, displayOrgNameFor } from "@/lib/personal-org";
+import {
+  configureStepSchema,
+  billingStepSchema,
+  onboardingSchema,
+  fieldErrors,
+  SUPPORTED_COUNTRIES,
+  type SupportedCountry,
+} from "@/lib/validation";
 
 type Step = "welcome" | "configure" | "billing" | "confirm";
 
-const STEPS: Step[] = ["welcome", "configure", "billing", "confirm"];
+// The step list. Composed once and used to compute "next/prev" arrows
+// and progress indicator. Bug 35: the billing step is conditional —
+// orgs that already have billing on file (subsequent tenants, or
+// pre-filled via /settings/billing) skip it. The wizard's submit
+// payload omits billingAddress in that case; the API picks up the
+// existing org_billing row server-side.
+function makeSteps(opts: {
+  hasOrgBilling: boolean;
+  isEditing: boolean;
+}): Step[] {
+  const base: Step[] = ["welcome", "configure", "billing", "confirm"];
+  // Edit mode currently still shows the billing step because we want
+  // the customer to be able to fix billing on a still-pending request
+  // BEFORE it reaches admin. Once approved, edits go through
+  // /settings/billing instead. Same step set for editing as new for now.
+  if (opts.hasOrgBilling && !opts.isEditing) {
+    return base.filter((s) => s !== "billing");
+  }
+  return base;
+}
 
 // Inline fallbacks — only used if the API call to /api/workspace-defaults fails
 const FALLBACK_SOUL = `# AI Assistant
@@ -47,33 +75,143 @@ 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;
+  /**
+   * Bug 35: when true, the wizard skips the billing step. The org
+   * already has billing on file (captured during a previous tenant's
+   * onboarding, or set directly via /settings/billing), and we don't
+   * re-prompt for it. The submit payload omits billingAddress in that
+   * case; the API picks up the existing record server-side.
+   *
+   * In edit mode this is ignored — the wizard re-renders the step
+   * with the request's original billingAddress so the customer can
+   * fix it before admin approves.
+   */
+  hasOrgBilling?: boolean;
+  /**
+   * Bug 6: when present, the wizard renders in "edit" mode — fields
+   * are pre-populated from the request, the SOUL.md auto-fetch is
+   * skipped (we trust the existing values), and the submit button
+   * PATCHes /api/onboarding/[id] instead of POSTing /api/onboarding.
+   *
+   * Per-package secrets are deliberately NOT pre-filled, even if the
+   * customer originally supplied them — server-side decryption to
+   * the client would be a security regression. The user re-enters
+   * any secrets they want to change; if they leave them blank, the
+   * existing encrypted blob in the DB is preserved by the PATCH
+   * endpoint.
+   */
+  editingRequest?: {
+    id: string;
+    instanceName: string;
+    agentName: string;
+    soulMd: string;
+    agentsMd: string;
+    packages: string[];
+    billingAddress: {
+      company?: string;
+      street?: string;
+      city?: string;
+      postalCode?: string;
+      country?: string;
+      vatNumber?: string;
+    };
+    billingNotes: string;
+  };
   onComplete: () => void;
 }
 
-export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
+export function OnboardingWizard({
+  orgName,
+  userName,
+  userEmail,
+  hasOrgBilling,
+  editingRequest,
+  onComplete,
+}: WizardProps) {
   const t = useTranslations("onboarding");
   const tPkg = useTranslations("packages");
   const tCommon = useTranslations("common");
+  const tCountries = useTranslations("countries");
 
-  const [step, setStep] = useState<Step>("welcome");
+  // Personal accounts have an org name that is either the legacy
+  // "{givenName} {familyName} (Personal)" or the current opaque
+  // "personal-{8hex}" form. Either way, the customer-facing display
+  // should be the user's own name — never the org name. SOUL.md
+  // 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 = displayOrgNameFor({
+    name: userName,
+    email: userEmail,
+    orgName,
+    isPersonal,
+  });
+  const isEditing = Boolean(editingRequest);
+  // STEPS is recomputed from props so toggling hasOrgBilling at the
+  // server level (e.g. between renders if the customer just saved
+  // billing on /settings/billing in another tab) flows through. Cheap.
+  const STEPS = makeSteps({
+    hasOrgBilling: Boolean(hasOrgBilling),
+    isEditing,
+  });
+
+  // Edit mode jumps straight to the configure step — the welcome step
+  // is a first-time onboarding affordance and only adds friction when
+  // the customer is fixing a typo.
+  const [step, setStep] = useState<Step>(isEditing ? "configure" : "welcome");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState("");
   const [advancedOpen, setAdvancedOpen] = useState(false);
-  const [defaultsLoaded, setDefaultsLoaded] = useState(false);
+  // In edit mode we already have soulMd/agentsMd from the request;
+  // skip the workspace-defaults round trip that would overwrite them.
+  const [defaultsLoaded, setDefaultsLoaded] = useState(isEditing);
 
-  const [config, setConfig] = useState({
-    agentName: "Assistant",
-    soulMd: FALLBACK_SOUL.replace("{company}", orgName),
-    agentsMd: FALLBACK_AGENTS,
-    packages: [] as string[],
-    billingAddress: {
-      company: orgName,
-      street: "",
-      city: "",
-      postalCode: "",
-      country: "CH",
-    },
-    billingNotes: "",
+  const [config, setConfig] = useState(() => {
+    if (editingRequest) {
+      return {
+        instanceName: editingRequest.instanceName,
+        agentName: editingRequest.agentName,
+        soulMd: editingRequest.soulMd,
+        agentsMd: editingRequest.agentsMd,
+        packages: editingRequest.packages,
+        billingAddress: {
+          company: editingRequest.billingAddress.company ?? "",
+          street: editingRequest.billingAddress.street ?? "",
+          city: editingRequest.billingAddress.city ?? "",
+          postalCode: editingRequest.billingAddress.postalCode ?? "",
+          country: editingRequest.billingAddress.country ?? "CH",
+          vatNumber: editingRequest.billingAddress.vatNumber ?? "",
+        },
+        billingNotes: editingRequest.billingNotes,
+      };
+    }
+    return {
+      instanceName: "",
+      agentName: "Assistant",
+      soulMd: FALLBACK_SOUL.replace("{company}", displayOrgName),
+      agentsMd: FALLBACK_AGENTS,
+      packages: [] as string[],
+      billingAddress: {
+        // For personal accounts, leave the company field empty — it'll
+        // appear on invoices. The user can still type something if they
+        // want to.
+        company: isPersonal ? "" : displayOrgName,
+        street: "",
+        city: "",
+        postalCode: "",
+        country: "CH",
+        vatNumber: "",
+      },
+      billingNotes: "",
+    };
   });
 
   // TOOLS.md preview — readonly, auto-generated
@@ -127,11 +265,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]);
   };
 
@@ -184,6 +381,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("");
 
@@ -197,11 +405,34 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
         }
       }
 
-      const res = await fetch("/api/onboarding", {
-        method: "POST",
+      // Bug 6: edit mode targets the per-row endpoint with PATCH;
+      // create mode targets the collection endpoint with POST. Body
+      // shape is the same — both routes parse it through
+      // onboardingSchema.
+      const url = editingRequest
+        ? `/api/onboarding/${encodeURIComponent(editingRequest.id)}`
+        : "/api/onboarding";
+      const method = editingRequest ? "PATCH" : "POST";
+
+      // Bug 35: when the org already has billing on file, the wizard
+      // skipped the billing step and `config.billingAddress` is the
+      // empty default. Strip it from the payload so the API picks up
+      // the existing org_billing record server-side rather than
+      // validating the empty form against billingStepSchema (which
+      // would reject for a company org).
+      const submitConfig = hasOrgBilling
+        ? (() => {
+            const { billingAddress: _bill, billingNotes: _notes, ...rest } =
+              config;
+            return rest;
+          })()
+        : config;
+
+      const res = await fetch(url, {
+        method,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          ...config,
+          ...submitConfig,
           packageSecrets:
             Object.keys(secretsPayload).length > 0
               ? secretsPayload
@@ -308,18 +539,38 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
           <div className="space-y-4">
             <div>
               <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                {t("agentName")}
+                {t("instanceName")}
               </label>
               <input
                 type="text"
-                value={config.agentName}
+                value={config.instanceName}
                 onChange={(e) =>
-                  setConfig((prev) => ({ ...prev, agentName: e.target.value }))
+                  setConfig((prev) => ({ ...prev, instanceName: e.target.value }))
                 }
+                placeholder={t("instanceNamePlaceholder")}
                 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"
               />
+              <p className="text-xs text-text-muted mt-1">
+                {t("instanceNameHint")}
+              </p>
             </div>
 
+            <FieldWithError error={errors.agentName}>
+              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                {t("agentName")} <RequiredMark />
+              </label>
+              <input
+                type="text"
+                required
+                value={config.agentName}
+                onChange={(e) => {
+                  clearError("agentName");
+                  setConfig((prev) => ({ ...prev, agentName: e.target.value }));
+                }}
+                className={inputClass(errors.agentName)}
+              />
+            </FieldWithError>
+
             <div>
               <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                 {t("soulMd")}
@@ -585,106 +836,164 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
           </p>
 
           <div className="space-y-4">
-            <div>
-              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                {t("billingCompany")}
-              </label>
-              <input
-                type="text"
-                value={config.billingAddress.company}
-                onChange={(e) =>
-                  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>
+            {/* 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")}
+                </label>
+                <input
+                  type="text"
+                  value={config.billingAddress.company}
+                  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">
-                <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                  {t("billingCity")}
-                </label>
-                <input
-                  type="text"
-                  value={config.billingAddress.city}
-                  onChange={(e) =>
-                    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"
-                />
+                <FieldWithError error={errors["billingAddress.city"]}>
+                  <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                    {t("billingCity")} <RequiredMark />
+                  </label>
+                  <input
+                    type="text"
+                    required
+                    value={config.billingAddress.city}
+                    onChange={(e) => {
+                      clearError("billingAddress.city");
+                      setConfig((prev) => ({
+                        ...prev,
+                        billingAddress: {
+                          ...prev.billingAddress,
+                          city: e.target.value,
+                        },
+                      }));
+                    }}
+                    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
-                type="text"
+              <select
                 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"
-              />
-            </div>
+                  }));
+                }}
+                className={inputClass(errors["billingAddress.country"])}
+              >
+                {SUPPORTED_COUNTRIES.map((code) => (
+                  <option key={code} value={code}>
+                    {tCountries(code)}
+                  </option>
+                ))}
+              </select>
+            </FieldWithError>
+
+            {/* Bug 35: VAT identifier. Required for company customers
+                (B2B). Hidden entirely for personal customers (B2C —
+                private individuals don't have a VAT number); the API
+                enforces the same rule. Editable later via
+                /settings/billing for company customers if their VAT
+                id changes. */}
+            {!isPersonal && (
+              <FieldWithError error={errors["billingAddress.vatNumber"]}>
+                <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                  {t("billingVatNumber")} <RequiredMark />
+                </label>
+                <input
+                  type="text"
+                  value={config.billingAddress.vatNumber ?? ""}
+                  onChange={(e) => {
+                    clearError("billingAddress.vatNumber");
+                    setConfig((prev) => ({
+                      ...prev,
+                      billingAddress: {
+                        ...prev.billingAddress,
+                        vatNumber: e.target.value,
+                      },
+                    }));
+                  }}
+                  placeholder="CHE-123.456.789 MWST"
+                  className={inputClass(errors["billingAddress.vatNumber"])}
+                />
+                <p className="text-xs text-text-muted mt-1">
+                  {t("billingVatHelp")}
+                </p>
+              </FieldWithError>
+            )}
 
             <div>
               <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
@@ -699,7 +1008,11 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
                   }))
                 }
                 rows={3}
-                placeholder={t("billingNotesPlaceholder")}
+                placeholder={t(
+                  isPersonal
+                    ? "billingNotesPlaceholderPersonal"
+                    : "billingNotesPlaceholder"
+                )}
                 className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors resize-y"
               />
             </div>
@@ -732,59 +1045,105 @@ 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="flex justify-between text-sm">
-                <span className="text-text-muted">{t("agentName")}</span>
-                <span className="text-text-primary font-mono">
-                  {config.agentName}
-                </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
-                        key={pkg}
-                        className="text-xs font-mono bg-accent/10 text-accent border border-accent/20 rounded-full px-2 py-0.5"
-                      >
-                        {pkg}
-                      </span>
-                    ))}
+            <div className="bg-surface-2 border border-border rounded-lg p-4 divide-y divide-border">
+              <ReviewRow
+                label={t("instanceName")}
+                value={
+                  config.instanceName.trim() || (
+                    <span className="text-text-muted italic">
+                      {t("reviewInstanceDefault")}
+                    </span>
+                  )
+                }
+                mono
+              />
+              <ReviewRow
+                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 className="flex flex-wrap gap-1 justify-end">
+                      {config.packages.map((pkg) => (
+                        <span
+                          key={pkg}
+                          className="text-xs font-mono bg-accent/10 text-accent border border-accent/20 rounded-full px-2 py-0.5"
+                        >
+                          {pkg}
+                        </span>
+                      ))}
+                    </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>
+                      )}
+                    <div>{config.billingAddress.street}</div>
+                    <div>
+                      {config.billingAddress.postalCode}{" "}
+                      {config.billingAddress.city}
+                    </div>
+                    <div className="text-text-muted">
+                      {tCountries(
+                        config.billingAddress.country as SupportedCountry
+                      )}
+                    </div>
                   </div>
-                </div>
-              )}
-              {config.packages.some((id) =>
-                PACKAGE_CATALOG.find((p) => p.id === id)?.requiresSecrets
-              ) && (
-                <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>
+                }
+              />
+              {/* Bug 35: VAT review row. Company customers see this so
+                  they can verify the VAT id they typed before submitting.
+                  Personal customers never see it — they don't have a
+                  VAT number, the form didn't ask, the review hides it. */}
+              {!isPersonal &&
+                config.billingAddress.vatNumber &&
+                config.billingAddress.vatNumber.trim().length > 0 && (
+                  <ReviewRow
+                    label={t("billingVatNumber")}
+                    value={config.billingAddress.vatNumber}
+                    mono
+                  />
+                )}
+              <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>
 
@@ -797,6 +1156,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}
@@ -809,7 +1187,11 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
               disabled={submitting}
               className="py-2.5 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              {submitting ? tCommon("loading") : t("submitRequest")}
+              {submitting
+                ? tCommon("loading")
+                : isEditing
+                ? t("saveChanges")
+                : t("submitRequest")}
             </button>
           </div>
         </Card>
@@ -817,3 +1199,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/packages/package-card.tsx

@@ -10,9 +10,18 @@ interface Props {
   status?: "pending" | "active" | "error";
   tenantName: string;
   onToggled: () => void;
+  /** Slice 5: when false, the enable/disable button is hidden. */
+  canEdit?: boolean;
 }
 
-export function PackageCard({ pkg, enabled, status, tenantName, onToggled }: Props) {
+export function PackageCard({
+  pkg,
+  enabled,
+  status,
+  tenantName,
+  onToggled,
+  canEdit = true,
+}: Props) {
   const t = useTranslations();
   const [showModal, setShowModal] = useState(false);
   const [secrets, setSecrets] = useState<Record<string, string>>({});
@@ -113,17 +122,27 @@ export function PackageCard({ pkg, enabled, status, tenantName, onToggled }: Pro
           {pkg.requiresSecrets && (
             <span className="text-[10px] text-text-muted">{t("packages.requiresApiKey")}</span>
           )}
-          <button
-            onClick={enabled ? () => togglePackage(false) : handleEnable}
-            disabled={saving}
-            className={`ml-auto rounded-lg px-3 py-1.5 text-xs font-medium transition-all cursor-pointer ${
-              enabled
-                ? "bg-surface-3 text-text-secondary hover:text-text-primary hover:bg-surface-2"
-                : "bg-accent text-surface-0 hover:bg-accent-dim shadow-lg shadow-accent/20"
-            } disabled:opacity-50`}
-          >
-            {saving ? "…" : enabled ? t("packages.disable") : t("packages.enable")}
-          </button>
+          {canEdit ? (
+            <button
+              onClick={enabled ? () => togglePackage(false) : handleEnable}
+              disabled={saving}
+              className={`ml-auto rounded-lg px-3 py-1.5 text-xs font-medium transition-all cursor-pointer ${
+                enabled
+                  ? "bg-surface-3 text-text-secondary hover:text-text-primary hover:bg-surface-2"
+                  : "bg-accent text-surface-0 hover:bg-accent-dim shadow-lg shadow-accent/20"
+              } disabled:opacity-50`}
+            >
+              {saving ? "…" : enabled ? t("packages.disable") : t("packages.enable")}
+            </button>
+          ) : (
+            // Slice 5: read-only viewers see a static badge instead of a
+            // toggle. The status badge above the divider already conveys
+            // "active/pending/error"; this just clarifies "you can't change
+            // it" without duplicating the status colour.
+            <span className="ml-auto text-[10px] text-text-muted italic">
+              {enabled ? t("packages.statusEnabled") : t("packages.statusDisabled")}
+            </span>
+          )}
         </div>
       </div>
 

src/components/packages/package-list.tsx

@@ -10,6 +10,8 @@ interface Props {
   enabledPackages: string[];
   conditions?: Array<{ type: string; status: string; reason?: string }>;
   onRefresh?: () => void;
+  /** Slice 5: when false, package toggles and edit affordances are hidden. */
+  canEdit?: boolean;
 }
 
 const CATEGORIES = [
@@ -30,7 +32,13 @@ function getPackageStatus(
   return "error";
 }
 
-export function PackageList({ tenantName, enabledPackages, conditions, onRefresh }: Props) {
+export function PackageList({
+  tenantName,
+  enabledPackages,
+  conditions,
+  onRefresh,
+  canEdit = true,
+}: Props) {
   const t = useTranslations("packages");
   const router = useRouter();
   const handleRefresh = onRefresh || (() => router.refresh());
@@ -55,6 +63,7 @@ export function PackageList({ tenantName, enabledPackages, conditions, onRefresh
                   status={getPackageStatus(pkg.id, enabledPackages.includes(pkg.id), conditions)}
                   tenantName={tenantName}
                   onToggled={handleRefresh}
+                  canEdit={canEdit}
                 />
               ))}
             </div>

src/components/packages/workspace-editor.tsx

@@ -8,9 +8,11 @@ const FILE_TABS = ["SOUL.md", "AGENTS.md", "TOOLS.md"] as const;
 interface Props {
   tenantName: string;
   files: Record<string, string>;
+  /** Slice 5: when false, save button hidden and textarea is read-only. */
+  canEdit?: boolean;
 }
 
-export function WorkspaceEditor({ tenantName, files }: Props) {
+export function WorkspaceEditor({ tenantName, files, canEdit = true }: Props) {
   const t = useTranslations("workspace");
   const [activeTab, setActiveTab] = useState<string>("SOUL.md");
   const [localFiles, setLocalFiles] = useState<Record<string, string>>(files);
@@ -19,6 +21,7 @@ export function WorkspaceEditor({ tenantName, files }: Props) {
   const [error, setError] = useState<string | null>(null);
 
   function handleChange(content: string) {
+    if (!canEdit) return;
     setLocalFiles((prev) => ({ ...prev, [activeTab]: content }));
     setDirty(true);
   }
@@ -62,20 +65,25 @@ export function WorkspaceEditor({ tenantName, files }: Props) {
             </button>
           ))}
         </div>
-        <button
-          onClick={handleSave}
-          disabled={!dirty || saving}
-          className="rounded-lg bg-accent px-3 py-1 text-xs font-medium text-surface-0 hover:bg-accent-dim disabled:opacity-40 cursor-pointer"
-        >
-          {saving ? "…" : t("save")}
-        </button>
+        {canEdit && (
+          <button
+            onClick={handleSave}
+            disabled={!dirty || saving}
+            className="rounded-lg bg-accent px-3 py-1 text-xs font-medium text-surface-0 hover:bg-accent-dim disabled:opacity-40 cursor-pointer"
+          >
+            {saving ? "…" : t("save")}
+          </button>
+        )}
       </div>
 
       <textarea
         value={localFiles[activeTab] || ""}
         onChange={(e) => handleChange(e.target.value)}
+        readOnly={!canEdit}
         spellCheck={false}
-        className="w-full min-h-[300px] resize-y bg-transparent p-4 font-mono text-sm text-text-secondary placeholder:text-text-muted focus:outline-none"
+        className={`w-full min-h-[300px] resize-y bg-transparent p-4 font-mono text-sm text-text-secondary placeholder:text-text-muted focus:outline-none ${
+          !canEdit ? "cursor-default" : ""
+        }`}
         placeholder={t("placeholder", { file: activeTab })}
       />
 

src/components/settings/billing-settings-form.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import type { OrgBilling } from "@/types";
+import { Card } from "@/components/ui/card";
+
+interface Props {
+  /** Existing billing record, or null on first edit. */
+  initial: OrgBilling | null;
+  /**
+   * True if the caller is on a personal org. Personal customers
+   * (B2C — private individuals) don't have a company name or VAT
+   * number; the form re-labels the company-name field as "Full name"
+   * and hides VAT.
+   */
+  isPersonal: boolean;
+  /** Default company name for company orgs on first edit. */
+  orgName: string;
+  /** Default full-name for personal orgs on first edit. */
+  userName: string;
+  /**
+   * Default billing email — the address the user registered with.
+   * Used on first edit (when `initial` is null). Customers can still
+   * type a different address (e.g. accounting@…) but the registration
+   * email is a sensible starting point.
+   */
+  userEmail: string;
+}
+
+/**
+ * Editable billing form. Used by /settings/billing; the wizard's
+ * inline billing step (Bug 35 phase 2) reuses the same shape but is
+ * implemented separately because of its different submit semantics
+ * (one combined wizard submit, vs. this page's standalone PUT).
+ *
+ * The form does NOT do client-side VAT format validation — too many
+ * country variations to get right, and the API will reject empty
+ * VAT for company orgs anyway. The asterisk on the field plus the
+ * server error suffices.
+ */
+export function BillingSettingsForm({
+  initial,
+  isPersonal,
+  orgName,
+  userName,
+  userEmail,
+}: Props) {
+  const t = useTranslations("settingsBilling");
+  const tCommon = useTranslations("common");
+  const router = useRouter();
+
+  const [companyName, setCompanyName] = useState(
+    initial?.companyName ?? (isPersonal ? userName : orgName)
+  );
+  const [streetAddress, setStreetAddress] = useState(
+    initial?.streetAddress ?? ""
+  );
+  const [postalCode, setPostalCode] = useState(initial?.postalCode ?? "");
+  const [city, setCity] = useState(initial?.city ?? "");
+  const [country, setCountry] = useState(initial?.country ?? "CH");
+  const [vatNumber, setVatNumber] = useState(initial?.vatNumber ?? "");
+  // Default billing email to the user's registration email when no
+  // record exists yet. They can change it (a separate accounting
+  // address is common); we just want sensible pre-fill on first edit.
+  const [billingEmail, setBillingEmail] = useState(
+    initial?.billingEmail ?? userEmail ?? ""
+  );
+  const [notes, setNotes] = useState(initial?.notes ?? "");
+
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError("");
+    setSuccess(false);
+    try {
+      const res = await fetch("/api/billing", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          companyName,
+          streetAddress,
+          postalCode,
+          city,
+          country,
+          vatNumber: vatNumber.trim() || null,
+          billingEmail,
+          notes: notes.trim() || null,
+        }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("saveFailed"));
+      }
+      setSuccess(true);
+      // Refresh server props so the form re-renders with the saved
+      // record's timestamps. Subtle but useful: the "last updated"
+      // line below ticks forward.
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Card className="animate-in animate-in-delay-1">
+      <form onSubmit={onSubmit} className="space-y-4">
+        {/* Bug 35: this field stores `company_name` in the DB but
+            the label changes by customer type:
+              - Company (B2B): "Company name" — the legal entity.
+              - Personal (B2C): "Full name" — the individual's
+                invoice name (may differ from their session display
+                name; e.g. legal name vs friendly name).
+            Required for both. The DB column is NOT NULL either way. */}
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {isPersonal ? t("fullName") : t("companyName")}{" "}
+            <span className="text-red-400">*</span>
+          </label>
+          <input
+            type="text"
+            required
+            value={companyName}
+            onChange={(e) => setCompanyName(e.target.value)}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+          />
+        </div>
+
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {t("streetAddress")} <span className="text-red-400">*</span>
+          </label>
+          <input
+            type="text"
+            required
+            value={streetAddress}
+            onChange={(e) => setStreetAddress(e.target.value)}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+          <div>
+            <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+              {t("postalCode")} <span className="text-red-400">*</span>
+            </label>
+            <input
+              type="text"
+              required
+              value={postalCode}
+              onChange={(e) => setPostalCode(e.target.value)}
+              className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+            />
+          </div>
+          <div className="sm:col-span-2">
+            <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+              {t("city")} <span className="text-red-400">*</span>
+            </label>
+            <input
+              type="text"
+              required
+              value={city}
+              onChange={(e) => setCity(e.target.value)}
+              className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {t("country")} <span className="text-red-400">*</span>
+          </label>
+          <select
+            required
+            value={country}
+            onChange={(e) => setCountry(e.target.value)}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+          >
+            <option value="CH">Switzerland</option>
+            <option value="LI">Liechtenstein</option>
+            <option value="DE">Germany</option>
+            <option value="AT">Austria</option>
+            <option value="FR">France</option>
+            <option value="IT">Italy</option>
+          </select>
+        </div>
+
+        {/* Bug 35: VAT visible only for company customers (B2B).
+            Personal customers (B2C — private individuals) don't have
+            a VAT number; the API likewise doesn't require one for
+            them. */}
+        {!isPersonal && (
+          <div>
+            <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+              {t("vatNumber")} <span className="text-red-400">*</span>
+            </label>
+            <input
+              type="text"
+              required
+              value={vatNumber}
+              onChange={(e) => setVatNumber(e.target.value)}
+              placeholder="CHE-123.456.789 MWST"
+              className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+            />
+            <p className="text-xs text-text-muted mt-1">{t("vatHelp")}</p>
+          </div>
+        )}
+
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {t("billingEmail")} <span className="text-red-400">*</span>
+          </label>
+          <input
+            type="email"
+            required
+            value={billingEmail}
+            onChange={(e) => setBillingEmail(e.target.value)}
+            placeholder="invoices@example.com"
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+          />
+          <p className="text-xs text-text-muted mt-1">{t("billingEmailHelp")}</p>
+        </div>
+
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {t("notes")}{" "}
+            <span className="text-text-muted normal-case">
+              ({tCommon("optional")})
+            </span>
+          </label>
+          <textarea
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            rows={3}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+            placeholder={t(
+              isPersonal ? "notesPlaceholderPersonal" : "notesPlaceholder"
+            )}
+          />
+        </div>
+
+        {error && (
+          <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
+            {error}
+          </div>
+        )}
+        {success && !error && (
+          <div className="text-xs text-success bg-success/10 border border-success/20 rounded-lg px-3 py-2">
+            {t("saved")}
+          </div>
+        )}
+
+        <div className="flex items-center justify-between gap-3">
+          {initial?.updatedAt && (
+            <div className="text-xs text-text-muted">
+              {t("lastUpdated", {
+                when: new Date(initial.updatedAt).toLocaleString(),
+              })}
+            </div>
+          )}
+          <button
+            type="submit"
+            disabled={submitting}
+            className="ml-auto text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+          >
+            {submitting ? tCommon("loading") : t("save")}
+          </button>
+        </div>
+      </form>
+    </Card>
+  );
+}

src/components/support/ticket-admin-controls.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Card } from "@/components/ui/card";
+import type {
+  SupportTicketCategory,
+  SupportTicketStatus,
+} from "@/types";
+
+const STATUSES: SupportTicketStatus[] = [
+  "open",
+  "in_progress",
+  "waiting_for_customer",
+  "resolved",
+  "reopened",
+];
+const CATEGORIES: SupportTicketCategory[] = [
+  "bug",
+  "feature_request",
+  "question",
+  "billing",
+  "other",
+];
+
+interface Props {
+  ticketId: string;
+  currentStatus: SupportTicketStatus;
+  currentCategory: SupportTicketCategory;
+}
+
+/**
+ * Admin-only controls — change ticket status / category. Visible
+ * exclusively when `user.isPlatform` (gate is in the parent server
+ * component, not here).
+ *
+ * Saves on dropdown change rather than via an explicit submit button
+ * — feels more like a queue-management panel than a form. Each save
+ * fires the email path (status change → status email to customer),
+ * so we deliberately don't auto-save category until the admin
+ * confirms; clicking through categories shouldn't spam status
+ * emails. (Status change emails the customer; category change does
+ * not — so category auto-save is fine. Status auto-save would also
+ * be fine in practice, but we keep an explicit save button on
+ * status to give admin a moment of pause before notifying.)
+ *
+ * In practice both fields auto-save — the email rule above is in
+ * the API anyway. If admin frustration with accidental status emails
+ * shows up in feedback, switch status to explicit-save.
+ */
+export function TicketAdminControls({
+  ticketId,
+  currentStatus,
+  currentCategory,
+}: Props) {
+  const t = useTranslations("support");
+  const router = useRouter();
+
+  const [status, setStatus] = useState(currentStatus);
+  const [category, setCategory] = useState(currentCategory);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  const saveChange = async (changes: {
+    status?: SupportTicketStatus;
+    category?: SupportTicketCategory;
+  }) => {
+    setSaving(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/support/tickets/${encodeURIComponent(ticketId)}`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(changes),
+        }
+      );
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("updateFailed"));
+      }
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+      // Revert local state on failure so the UI doesn't lie about
+      // what's saved.
+      if (changes.status) setStatus(currentStatus);
+      if (changes.category) setCategory(currentCategory);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Card className="border-blue-400/30 bg-blue-400/5">
+      <div className="text-xs uppercase tracking-wider text-blue-400 font-semibold mb-3">
+        {t("adminControlsTitle")}
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {t("fieldStatus")}
+          </label>
+          <select
+            value={status}
+            disabled={saving}
+            onChange={(e) => {
+              const next = e.target.value as SupportTicketStatus;
+              setStatus(next);
+              saveChange({ status: next });
+            }}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary disabled:opacity-50"
+          >
+            {STATUSES.map((s) => (
+              <option key={s} value={s}>
+                {t(`status_${s}`)}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {t("fieldCategory")}
+          </label>
+          <select
+            value={category}
+            disabled={saving}
+            onChange={(e) => {
+              const next = e.target.value as SupportTicketCategory;
+              setCategory(next);
+              saveChange({ category: next });
+            }}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary disabled:opacity-50"
+          >
+            {CATEGORIES.map((c) => (
+              <option key={c} value={c}>
+                {t(`category_${c}`)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      {error && (
+        <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mt-3">
+          {error}
+        </div>
+      )}
+    </Card>
+  );
+}

src/components/support/ticket-category-label.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import type { SupportTicketCategory } from "@/types";
+
+/**
+ * Plain translated category label, e.g. "Bug" / "Feature request" /
+ * "Billing". No styling chrome — just the text. Categories don't
+ * carry the same lifecycle/urgency signal as status, so they don't
+ * earn a coloured pill.
+ */
+export function TicketCategoryLabel({
+  category,
+}: {
+  category: SupportTicketCategory;
+}) {
+  const t = useTranslations("support");
+  return <span>{t(`category_${category}`)}</span>;
+}

src/components/support/ticket-create-form.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Card } from "@/components/ui/card";
+import type { SupportTicketCategory } from "@/types";
+
+const CATEGORIES: SupportTicketCategory[] = [
+  "bug",
+  "feature_request",
+  "question",
+  "billing",
+  "other",
+];
+
+export function TicketCreateForm() {
+  const t = useTranslations("support");
+  const tCommon = useTranslations("common");
+  const router = useRouter();
+
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [category, setCategory] = useState<SupportTicketCategory>("question");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState("");
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError("");
+    try {
+      const res = await fetch("/api/support/tickets", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ title, description, category }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("createFailed"));
+      }
+      const data = await res.json();
+      // Redirect to the new ticket's detail page so the customer can
+      // see the confirmation state and immediately add follow-ups if
+      // they wish.
+      router.push(`/support/${data.ticket.id}`);
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Card>
+      <form onSubmit={onSubmit} className="space-y-4">
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {t("fieldCategory")} <span className="text-red-400">*</span>
+          </label>
+          <select
+            required
+            value={category}
+            onChange={(e) =>
+              setCategory(e.target.value as SupportTicketCategory)
+            }
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+          >
+            {CATEGORIES.map((c) => (
+              <option key={c} value={c}>
+                {t(`category_${c}`)}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {t("fieldTitle")} <span className="text-red-400">*</span>
+          </label>
+          <input
+            type="text"
+            required
+            minLength={3}
+            maxLength={200}
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder={t("titlePlaceholder")}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+          />
+        </div>
+
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {t("fieldDescription")} <span className="text-red-400">*</span>
+          </label>
+          <textarea
+            required
+            minLength={10}
+            maxLength={10_000}
+            rows={8}
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder={t("descriptionPlaceholder")}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+          />
+          <p className="text-xs text-text-muted mt-1">
+            {t("descriptionHelp")}
+          </p>
+        </div>
+
+        {error && (
+          <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
+            {error}
+          </div>
+        )}
+
+        <div className="flex justify-end">
+          <button
+            type="submit"
+            disabled={submitting}
+            className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+          >
+            {submitting ? tCommon("loading") : t("submitTicket")}
+          </button>
+        </div>
+      </form>
+    </Card>
+  );
+}

src/components/support/ticket-status-badge.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import type { SupportTicketStatus } from "@/types";
+
+const STATUS_STYLES: Record<SupportTicketStatus, string> = {
+  // Open: blue, neutral attention.
+  open: "bg-blue-400/15 text-blue-400 border border-blue-400/20",
+  // In progress: amber, work happening.
+  in_progress: "bg-amber-400/15 text-amber-400 border border-amber-400/20",
+  // Waiting for customer: violet — distinct from in_progress so admins
+  // can quickly visually separate "I owe a response" from "they owe one".
+  waiting_for_customer:
+    "bg-violet-400/15 text-violet-400 border border-violet-400/20",
+  resolved: "bg-success/15 text-success border border-success/20",
+  // Reopened: red — flags admin attention because the previous
+  // resolution didn't stick.
+  reopened: "bg-red-400/15 text-red-400 border border-red-400/20",
+};
+
+/**
+ * Small status pill rendered on ticket list rows and detail header.
+ * Translated label, colour-coded by ticket lifecycle stage.
+ */
+export function TicketStatusBadge({
+  status,
+}: {
+  status: SupportTicketStatus;
+}) {
+  const t = useTranslations("support");
+  return (
+    <span
+      className={`inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full whitespace-nowrap ${STATUS_STYLES[status]}`}
+    >
+      {t(`status_${status}`)}
+    </span>
+  );
+}

src/components/support/ticket-thread.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations, useFormatter } from "next-intl";
+import { Card } from "@/components/ui/card";
+import { formatDateTime } from "@/lib/format";
+import type { SupportTicketComment, SupportTicketStatus } from "@/types";
+
+interface Props {
+  ticketId: string;
+  ticketStatus: SupportTicketStatus;
+  comments: SupportTicketComment[];
+  isPlatform: boolean;
+  /** True when the viewer is the customer who created this ticket. */
+  isOwnTicket: boolean;
+}
+
+/**
+ * Thread of comments + reply box. Customer-side viewers see a
+ * "Close ticket" button as well, mapping to the customer-self-close
+ * path on the PATCH endpoint.
+ *
+ * Reply submission: posts the comment, then router.refresh() so the
+ * server-rendered page re-fetches and renders the new entry. Avoids
+ * duplicating the comment-rendering logic on the client.
+ *
+ * Empty body submissions are blocked at HTML level (required) AND
+ * by the API; we trust both layers.
+ */
+export function TicketThread({
+  ticketId,
+  ticketStatus,
+  comments,
+  isPlatform,
+  isOwnTicket,
+}: Props) {
+  const t = useTranslations("support");
+  const tCommon = useTranslations("common");
+  const f = useFormatter();
+  const router = useRouter();
+
+  const [body, setBody] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const [error, setError] = useState("");
+
+  const onSubmitComment = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/support/tickets/${encodeURIComponent(ticketId)}/comments`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ body }),
+        }
+      );
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("commentFailed"));
+      }
+      setBody("");
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // Customer-self-close: confirms because it's a state change, then
+  // hits PATCH with status=resolved. The API allows this for
+  // own-ticket regardless of role; the button only shows when the
+  // ticket is in a non-resolved state.
+  const onCustomerClose = async () => {
+    if (!confirm(t("confirmClose"))) return;
+    setClosing(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/support/tickets/${encodeURIComponent(ticketId)}`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ status: "resolved" }),
+        }
+      );
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("closeFailed"));
+      }
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setClosing(false);
+    }
+  };
+
+  const isResolved = ticketStatus === "resolved";
+  const canCustomerClose =
+    isOwnTicket && !isResolved;
+
+  return (
+    <>
+      {comments.map((c) => (
+        <Card
+          key={c.id}
+          className={
+            c.authorKind === "admin"
+              ? "border-blue-400/30 bg-blue-400/5"
+              : ""
+          }
+        >
+          <div className="flex items-center justify-between text-xs text-text-muted mb-2">
+            <span className="font-medium text-text-primary">
+              {c.authorName}
+              {c.authorKind === "admin" && (
+                <span className="ml-2 text-blue-400 text-[10px] uppercase tracking-wider">
+                  {t("authorTagAdmin")}
+                </span>
+              )}
+            </span>
+            <span>{formatDateTime(c.createdAt, f)}</span>
+          </div>
+          <div className="text-sm text-text-primary whitespace-pre-wrap">
+            {c.body}
+          </div>
+        </Card>
+      ))}
+
+      {isResolved && (
+        <Card className="border-success/30 bg-success/5">
+          <p className="text-sm text-text-secondary text-center">
+            {t("resolvedBanner")}
+          </p>
+        </Card>
+      )}
+
+      {/* Reply box. Visible regardless of status — customer can
+          reply even on a resolved ticket (which auto-reopens it
+          server-side). The semantic is "reply means the ticket is
+          alive again", which is friendlier than blocking the reply. */}
+      <Card>
+        <form onSubmit={onSubmitComment} className="space-y-3">
+          <label className="block text-xs uppercase tracking-wider text-text-muted">
+            {t("replyLabel")}
+          </label>
+          <textarea
+            required
+            minLength={1}
+            maxLength={10_000}
+            rows={4}
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            placeholder={
+              isResolved && isOwnTicket
+                ? t("replyPlaceholderReopen")
+                : t("replyPlaceholder")
+            }
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+          />
+
+          {error && (
+            <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
+              {error}
+            </div>
+          )}
+
+          <div className="flex items-center justify-between">
+            {canCustomerClose ? (
+              <button
+                type="button"
+                onClick={onCustomerClose}
+                disabled={closing || submitting}
+                className="text-xs text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50"
+              >
+                {closing ? tCommon("loading") : t("closeTicket")}
+              </button>
+            ) : (
+              <span />
+            )}
+            <button
+              type="submit"
+              disabled={submitting || closing || body.trim().length === 0}
+              className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+            >
+              {submitting ? tCommon("loading") : t("sendReply")}
+            </button>
+          </div>
+        </form>
+      </Card>
+    </>
+  );
+}

src/components/team/invite-form.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+
+type FormState = "idle" | "submitting" | "success" | "error";
+
+/**
+ * InviteForm — owner submits email + name + role to /api/team/invite.
+ * On success, broadcasts `team:refresh` so the sibling TeamList
+ * re-fetches the member list.
+ *
+ * Form fields mirror the POST body:
+ *   { email, givenName, familyName, role: "owner" | "user" }
+ *
+ * Role defaults to "user" — the more conservative grant. Owner
+ * promotion happens in ZITADEL Console for now.
+ */
+export function InviteForm() {
+  const t = useTranslations("team");
+  const tCommon = useTranslations("common");
+
+  const [form, setForm] = useState({
+    email: "",
+    givenName: "",
+    familyName: "",
+    role: "user" as "owner" | "user",
+  });
+  const [state, setState] = useState<FormState>("idle");
+  const [error, setError] = useState("");
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
+    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setState("submitting");
+
+    try {
+      const res = await fetch("/api/team/invite", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(form),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        if (data.code === "user_already_exists") {
+          throw new Error(t("inviteUserExists"));
+        }
+        throw new Error(data.error || "Invite failed");
+      }
+      setState("success");
+      setForm({ email: "", givenName: "", familyName: "", role: "user" });
+      // Tell the TeamList sibling to refresh
+      window.dispatchEvent(new Event("team:refresh"));
+
+      // Auto-clear the success banner after a moment so the form
+      // doesn't permanently look "done"
+      setTimeout(() => setState("idle"), 3500);
+    } catch (err: any) {
+      setError(err.message);
+      setState("error");
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+            {t("givenName")}
+          </label>
+          <input
+            name="givenName"
+            type="text"
+            required
+            value={form.givenName}
+            onChange={handleChange}
+            className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+            {t("familyName")}
+          </label>
+          <input
+            name="familyName"
+            type="text"
+            required
+            value={form.familyName}
+            onChange={handleChange}
+            className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+          {t("email")}
+        </label>
+        <input
+          name="email"
+          type="email"
+          required
+          value={form.email}
+          onChange={handleChange}
+          placeholder="colleague@company.ch"
+          className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+        />
+      </div>
+
+      <div>
+        <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+          {t("role")}
+        </label>
+        <select
+          name="role"
+          value={form.role}
+          onChange={handleChange}
+          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"
+        >
+          <option value="user">{t("roleUser")}</option>
+          <option value="owner">{t("roleOwner")}</option>
+        </select>
+        <p className="text-xs text-text-muted mt-1">{t("roleHint")}</p>
+      </div>
+
+      {error && (
+        <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
+          {error}
+        </div>
+      )}
+      {state === "success" && (
+        <div className="text-xs text-emerald-400 bg-emerald-400/10 border border-emerald-400/20 rounded-lg px-3 py-2">
+          {t("inviteSent")}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={state === "submitting"}
+        className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {state === "submitting" ? tCommon("loading") : t("inviteButton")}
+      </button>
+    </form>
+  );
+}

src/components/team/team-list.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+
+interface OrgMember {
+  userId: string;
+  email: string;
+  displayName: string;
+  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,
+  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")
+        .then((r) => (r.ok ? r.json() : null))
+        .then((data) => {
+          if (data?.members) setMembers(data.members);
+        })
+        .catch(() => {});
+    }
+    window.addEventListener("team:refresh", refresh);
+    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">
+        {t("noMembers")}
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-surface-1 border border-border rounded-xl overflow-hidden">
+      <ul className="divide-y divide-border">
+        {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"
+            >
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium text-text-primary truncate">
+                    {m.displayName || m.email}
+                  </span>
+                  {isSelf && (
+                    <span className="text-[10px] uppercase tracking-wider text-accent">
+                      {t("you")}
+                    </span>
+                  )}
+                </div>
+                <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">
+                          {t("noRole")}
+                        </span>
+                      )}
+                      {m.roles.map((r) => (
+                        <span
+                          key={r}
+                          className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full ${
+                            r === "owner"
+                              ? "bg-accent/15 text-accent border border-accent/20"
+                              : "bg-surface-3 text-text-secondary border border-border"
+                          }`}
+                        >
+                          {r}
+                        </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/tenants/assigned-users-panel.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useTranslations } from "next-intl";
+import { Card } from "@/components/ui/card";
+
+interface Assignment {
+  userId: string;
+  displayName: string;
+  email: string;
+  roles: string[];
+  assignedAt: string;
+  assignedBy: string;
+  orphan: boolean;
+}
+
+interface OrgMember {
+  userId: string;
+  email: string;
+  displayName: string;
+  roles: string[];
+}
+
+interface Props {
+  tenantName: string;
+  /**
+   * When false, the panel renders read-only — assignments are visible
+   * but the add-user form and remove ✕ buttons are hidden. Pass
+   * `canEdit` from the parent server component (= canMutate(user)).
+   */
+  canEdit: boolean;
+}
+
+/**
+ * AssignedUsersPanel — manages the tenant_user_assignments rows for
+ * one tenant. Owner sees:
+ *   - List of currently-assigned users with name, email, role, and
+ *     an "X" button to revoke.
+ *   - Dropdown of org members not yet assigned + "Assign" button.
+ *
+ * `user`-role members see the panel read-only (canEdit=false): they
+ * see who else has access to the tenant they're working with, but
+ * can't change anything.
+ */
+export function AssignedUsersPanel({ tenantName, canEdit }: Props) {
+  const t = useTranslations("assignments");
+  const [assignments, setAssignments] = useState<Assignment[] | null>(null);
+  const [members, setMembers] = useState<OrgMember[] | null>(null);
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [pickedUserId, setPickedUserId] = useState("");
+
+  const refresh = useCallback(async () => {
+    setError("");
+    try {
+      const [aRes, mRes] = await Promise.all([
+        fetch(`/api/tenants/${tenantName}/assignments`),
+        canEdit
+          ? fetch(`/api/team`)
+          : Promise.resolve(null),
+      ]);
+      if (!aRes.ok) throw new Error("Failed to load assignments");
+      const aData = await aRes.json();
+      setAssignments(aData.assignments ?? []);
+
+      if (mRes && mRes.ok) {
+        const mData = await mRes.json();
+        setMembers(mData.members ?? []);
+      }
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }, [tenantName, canEdit]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  async function handleAssign() {
+    if (!pickedUserId || busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      const res = await fetch(`/api/tenants/${tenantName}/assignments`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId: pickedUserId }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "Assign failed");
+      }
+      setPickedUserId("");
+      await refresh();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function handleRevoke(userId: string) {
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/tenants/${tenantName}/assignments/${encodeURIComponent(userId)}`,
+        { method: "DELETE" }
+      );
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "Revoke failed");
+      }
+      await refresh();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  if (assignments === null) {
+    return (
+      <Card>
+        <div className="text-xs text-text-muted">{t("loading")}</div>
+      </Card>
+    );
+  }
+
+  // Compute candidates for the assign dropdown: members of the org
+  // who hold the `user` role (not owners — they have implicit access)
+  // and aren't already assigned.
+  const assignedIds = new Set(assignments.map((a) => a.userId));
+  const candidates = (members ?? []).filter(
+    (m) =>
+      !assignedIds.has(m.userId) &&
+      m.roles.includes("user") &&
+      !m.roles.includes("owner")
+  );
+
+  return (
+    <Card>
+      {error && (
+        <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mb-3">
+          {error}
+          <button
+            onClick={() => setError("")}
+            className="ml-2 text-red-300 hover:text-red-200"
+          >
+            ✕
+          </button>
+        </div>
+      )}
+
+      {assignments.length === 0 ? (
+        <p className="text-sm text-text-secondary text-center py-3">
+          {t("noneAssigned")}
+        </p>
+      ) : (
+        <ul className="divide-y divide-border -mx-2">
+          {assignments.map((a) => (
+            <li
+              key={a.userId}
+              className="px-2 py-2 flex items-center justify-between gap-3"
+            >
+              <div className="min-w-0">
+                <div className="text-sm font-medium text-text-primary truncate">
+                  {a.orphan ? (
+                    <span className="text-text-muted italic">
+                      {a.displayName}
+                    </span>
+                  ) : (
+                    a.displayName
+                  )}
+                </div>
+                {a.email && (
+                  <div className="text-xs text-text-muted truncate font-mono">
+                    {a.email}
+                  </div>
+                )}
+              </div>
+              {canEdit && (
+                <button
+                  onClick={() => handleRevoke(a.userId)}
+                  disabled={busy}
+                  className="text-text-muted/60 hover:text-red-400 transition-colors disabled:opacity-50 text-sm px-2"
+                  title={t("revoke")}
+                >
+                  ✕
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {canEdit && (
+        <div className="mt-4 pt-4 border-t border-border">
+          {candidates.length === 0 ? (
+            <p className="text-xs text-text-muted text-center py-2">
+              {t("noCandidates")}
+            </p>
+          ) : (
+            <div className="flex gap-2">
+              <select
+                value={pickedUserId}
+                onChange={(e) => setPickedUserId(e.target.value)}
+                className="flex-1 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"
+              >
+                <option value="">{t("pickUser")}</option>
+                {candidates.map((m) => (
+                  <option key={m.userId} value={m.userId}>
+                    {m.displayName || m.email}
+                  </option>
+                ))}
+              </select>
+              <button
+                onClick={handleAssign}
+                disabled={busy || !pickedUserId}
+                className="px-4 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {busy ? "…" : t("assign")}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </Card>
+  );
+}

src/components/tenants/subscription-toggle.tsx

@@ -0,0 +1,406 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations, useFormatter } from "next-intl";
+import { Modal } from "@/components/ui/modal";
+import { formatRelative } from "@/lib/format";
+
+interface Props {
+  tenantName: string;
+  /**
+   * Current suspend state — server-derived. Drives which control the
+   * customer sees: "Cancel subscription" while active, the
+   * resume-request flow while suspended.
+   */
+  suspended: boolean;
+  /**
+   * True when the viewer has platform admin role. Platform users are
+   * the only ones who can directly resume a tenant via PATCH; owners
+   * must go through the resume-request flow. We use this in the
+   * suspended branch to decide whether to render a direct "Resume"
+   * button or the "Request reactivation" workflow.
+   */
+  isPlatform: boolean;
+  /**
+   * If a resume request is currently pending for this tenant, its
+   * id, when it was submitted, and the customer's optional note.
+   * The component renders an info card with a cancel-request button
+   * instead of the request-reactivation button. Only meaningful when
+   * `suspended === true`.
+   */
+  pendingResumeRequest: {
+    id: string;
+    createdAt: string;
+    customerNotes: string | null;
+  } | null;
+}
+
+/**
+ * SubscriptionToggle — owner-side cancel/resume control.
+ *
+ * Three render states:
+ *   1. Active: "Cancel subscription" button + confirmation modal
+ *      (mentions 60-day retention before permanent deletion).
+ *   2. Suspended, no pending resume request: "Request reactivation"
+ *      button + simple confirmation modal explaining admin review.
+ *   3. Suspended, pending resume request: status card "Reactivation
+ *      requested X days ago" + "Cancel request" button.
+ *
+ * Platform admins viewing a suspended tenant get a fourth state in
+ * place of #2/#3: a direct "Resume now" button (no admin queue, no
+ * request flow). This is the admin escape hatch.
+ *
+ * The control intentionally lives at the bottom of the tenant
+ * detail page rather than near the top — putting it next to the
+ * status badge would invite mis-clicks.
+ */
+export function SubscriptionToggle({
+  tenantName,
+  suspended,
+  isPlatform,
+  pendingResumeRequest,
+}: Props) {
+  const t = useTranslations("tenantDetail");
+  const tCommon = useTranslations("common");
+  const f = useFormatter();
+  const router = useRouter();
+
+  const [confirmCancelOpen, setConfirmCancelOpen] = useState(false);
+  const [confirmResumeOpen, setConfirmResumeOpen] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState("");
+  // Feature 6: customer's free-form note attached to the resume
+  // request. Reset when the modal opens/closes so re-opening doesn't
+  // show stale text from a previous abandoned attempt.
+  const [resumeNotes, setResumeNotes] = useState("");
+
+  // Customer-side cancel: PATCH suspend=true. Same path as before.
+  // The 60-day retention copy in the modal is the new bit (Bug 37b);
+  // mechanics are unchanged.
+  const cancel = async () => {
+    setSubmitting(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/tenants/${encodeURIComponent(tenantName)}/suspend`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ suspend: true }),
+        }
+      );
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("subscriptionUpdateFailed"));
+      }
+      setConfirmCancelOpen(false);
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // Owner-side resume request: POST a 'resume' tenant_request that
+  // sits pending until admin acts. Different from cancel: no PATCH
+  // on the CR — that happens only when admin approves.
+  const requestResume = async () => {
+    setSubmitting(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/tenants/${encodeURIComponent(tenantName)}/resume-request`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            // Trim and omit on empty so the API stores NULL rather
+            // than empty string. The endpoint's zod transform also
+            // handles this; double-checking on the client lets us
+            // skip the round-trip when there's nothing to send.
+            customerNotes: resumeNotes.trim() || undefined,
+          }),
+        }
+      );
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("subscriptionUpdateFailed"));
+      }
+      setConfirmResumeOpen(false);
+      setResumeNotes("");
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // Customer cancels their own pending resume request.
+  const cancelResumeRequest = async () => {
+    if (!pendingResumeRequest) return;
+    setSubmitting(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/onboarding/${pendingResumeRequest.id}`,
+        { method: "DELETE" }
+      );
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("subscriptionUpdateFailed"));
+      }
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // Platform admin: direct resume, bypassing the request flow.
+  const adminResume = async () => {
+    setSubmitting(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/tenants/${encodeURIComponent(tenantName)}/suspend`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ suspend: false }),
+        }
+      );
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("subscriptionUpdateFailed"));
+      }
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // ─── Suspended branch ───────────────────────────────────────────────
+
+  if (suspended) {
+    // Platform admin sees direct resume. Independent of pending
+    // resume — admin can always resume immediately.
+    if (isPlatform) {
+      return (
+        <div>
+          <button
+            type="button"
+            onClick={adminResume}
+            disabled={submitting}
+            className="text-sm font-medium px-4 py-2 rounded-lg border border-success/30 text-success hover:bg-success/10 transition-colors disabled:opacity-50"
+          >
+            {submitting
+              ? tCommon("loading")
+              : t("resumeSubscription")}
+          </button>
+          {pendingResumeRequest && (
+            <p className="text-xs text-text-muted mt-2">
+              {t("resumeRequestPendingNoteAdmin")}
+            </p>
+          )}
+          {error && <p className="text-xs text-red-400 mt-2">{error}</p>}
+        </div>
+      );
+    }
+
+    // Owner with pending resume request: render the request status
+    // card with cancel.
+    if (pendingResumeRequest) {
+      return (
+        <div>
+          <div className="rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3">
+            <div className="text-sm font-medium text-amber-400 mb-1">
+              {t("resumeRequestPendingTitle")}
+            </div>
+            <div className="text-xs text-text-secondary">
+              {t("resumeRequestPendingDescription", {
+                when: formatRelative(pendingResumeRequest.createdAt, f),
+              })}
+            </div>
+            {/* Feature 6: echo the customer's note back so they can
+                see what they wrote. Useful especially when they
+                later wonder "what did I tell them?" or want to
+                confirm before cancelling and resubmitting. */}
+            {pendingResumeRequest.customerNotes && (
+              <div className="mt-2 text-xs text-text-secondary border-l-2 border-amber-500/30 pl-3 whitespace-pre-wrap">
+                {pendingResumeRequest.customerNotes}
+              </div>
+            )}
+            <button
+              type="button"
+              onClick={cancelResumeRequest}
+              disabled={submitting}
+              className="mt-3 text-xs px-3 py-1.5 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50"
+            >
+              {submitting
+                ? tCommon("loading")
+                : t("cancelResumeRequest")}
+            </button>
+          </div>
+          {error && <p className="text-xs text-red-400 mt-2">{error}</p>}
+        </div>
+      );
+    }
+
+    // Owner with no pending request: offer to create one.
+    return (
+      <div>
+        <button
+          type="button"
+          onClick={() => setConfirmResumeOpen(true)}
+          className="text-sm font-medium px-4 py-2 rounded-lg border border-success/30 text-success hover:bg-success/10 transition-colors"
+        >
+          {t("requestReactivation")}
+        </button>
+        {error && !confirmResumeOpen && (
+          <p className="text-xs text-red-400 mt-2">{error}</p>
+        )}
+
+        {confirmResumeOpen && (
+          <Modal
+            open={confirmResumeOpen}
+            onClose={() => setConfirmResumeOpen(false)}
+            ariaLabel={t("requestReactivationConfirmTitle")}
+          >
+            <h3 className="font-display text-lg font-semibold text-text-primary mb-2">
+              {t("requestReactivationConfirmTitle")}
+            </h3>
+            <p className="text-sm text-text-secondary mb-4">
+              {t("requestReactivationConfirmDescription")}
+            </p>
+
+            {/* Feature 6: optional explanatory note. Useful for
+                customers to tell admin why they want reactivation
+                — e.g. "we paused over winter break, picking back
+                up". Stored on the tenant_request and surfaced in
+                the admin queue. */}
+            <div className="mb-5">
+              <label className="block text-xs uppercase tracking-wider text-text-muted mb-1.5">
+                {t("requestReactivationNoteLabel")}{" "}
+                <span className="text-text-muted normal-case">
+                  ({tCommon("optional")})
+                </span>
+              </label>
+              <textarea
+                value={resumeNotes}
+                onChange={(e) => setResumeNotes(e.target.value)}
+                rows={3}
+                maxLength={2000}
+                placeholder={t("requestReactivationNotePlaceholder")}
+                disabled={submitting}
+                className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary disabled:opacity-50"
+              />
+            </div>
+
+            {error && (
+              <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mb-3">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => setConfirmResumeOpen(false)}
+                disabled={submitting}
+                className="text-sm px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors"
+              >
+                {tCommon("cancel")}
+              </button>
+              <button
+                type="button"
+                onClick={requestResume}
+                disabled={submitting}
+                className="text-sm px-4 py-2 rounded-lg bg-success text-white hover:bg-success/90 transition-colors disabled:opacity-50"
+              >
+                {submitting
+                  ? tCommon("loading")
+                  : t("requestReactivationConfirm")}
+              </button>
+            </div>
+          </Modal>
+        )}
+      </div>
+    );
+  }
+
+  // ─── Active branch ──────────────────────────────────────────────────
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setConfirmCancelOpen(true)}
+        className="text-sm font-medium px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary hover:border-text-secondary transition-colors"
+      >
+        {t("cancelSubscription")}
+      </button>
+      {error && !confirmCancelOpen && (
+        <p className="text-xs text-red-400 mt-2">{error}</p>
+      )}
+
+      {confirmCancelOpen && (
+        <Modal
+          open={confirmCancelOpen}
+          onClose={() => setConfirmCancelOpen(false)}
+          ariaLabel={t("cancelConfirmTitle")}
+        >
+          <h3 className="font-display text-lg font-semibold text-text-primary mb-2">
+            {t("cancelConfirmTitle")}
+          </h3>
+          <p className="text-sm text-text-secondary mb-3">
+            {t("cancelConfirmDescription")}
+          </p>
+          <ul className="text-xs text-text-muted list-disc list-inside space-y-1 mb-3">
+            <li>{t("cancelConfirmBullet1")}</li>
+            <li>{t("cancelConfirmBullet2")}</li>
+            <li>{t("cancelConfirmBullet3")}</li>
+          </ul>
+          {/* Bug 37b: 60-day retention warning. Distinct paragraph so it
+              reads as a separate, more serious commitment than the
+              regular bullets above. */}
+          <div className="text-xs text-amber-400 bg-amber-400/10 border border-amber-400/20 rounded-lg px-3 py-2 mb-5">
+            {t("cancelConfirmRetentionWarning")}
+          </div>
+
+          {error && (
+            <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mb-3">
+              {error}
+            </div>
+          )}
+
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => setConfirmCancelOpen(false)}
+              disabled={submitting}
+              className="text-sm px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors"
+            >
+              {tCommon("cancel")}
+            </button>
+            <button
+              type="button"
+              onClick={cancel}
+              disabled={submitting}
+              className="text-sm px-4 py-2 rounded-lg bg-amber-500 text-white hover:bg-amber-600 transition-colors disabled:opacity-50"
+            >
+              {submitting
+                ? tCommon("loading")
+                : t("cancelSubscriptionConfirm")}
+            </button>
+          </div>
+        </Modal>
+      )}
+    </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/components/ui/modal.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+interface Props {
+  open: boolean;
+  /** Called when user clicks the backdrop or presses Escape. */
+  onClose: () => void;
+  children: React.ReactNode;
+  /**
+   * ARIA label fallback when no labelled element exists inside.
+   * Optional; if you have a heading inside the modal with id, set
+   * `aria-labelledby` on a wrapper instead.
+   */
+  ariaLabel?: string;
+}
+
+/**
+ * Portal-based modal.
+ *
+ * Why a portal
+ * ------------
+ * `position: fixed` becomes positioned relative to a transformed
+ * ancestor's containing block, not the viewport, when ANY ancestor
+ * has a `transform`, `perspective`, or `filter` applied. Our
+ * `animate-in` utility sets `transform: translateY(0)` on a lot of
+ * dashboard/tenant-detail containers (because of the fade-up
+ * animation, which uses `animation-fill-mode: both` to keep the
+ * transform on after the animation finishes). That broke modals
+ * rendered as in-place children — they centred to the panel they
+ * lived in, not to the page.
+ *
+ * Rendering at `document.body` via `createPortal` escapes every
+ * containing-block ancestor and gives us true viewport coordinates.
+ *
+ * UX details
+ * ----------
+ * - Backdrop click triggers `onClose`. (Bubbling check: only fires
+ *   when the click target IS the backdrop, not the panel inside.)
+ * - Escape key triggers `onClose`. Standard modal expectation.
+ * - `body` overflow is locked while open so background content
+ *   doesn't scroll behind the modal.
+ * - Renders nothing on first paint server-side, then mounts on
+ *   client. `useEffect` gating ensures `document.body` is available;
+ *   without it Next.js SSR would throw on `document` reference.
+ */
+export function Modal({ open, onClose, children, ariaLabel }: Props) {
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+
+  useEffect(() => {
+    if (!open) return;
+
+    // Lock background scroll. Restore on unmount/close.
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeRef.current();
+    };
+    window.addEventListener("keydown", onKey);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  if (!open) return null;
+  if (typeof document === "undefined") return null;
+
+  return createPortal(
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={ariaLabel}
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="bg-surface-1 border border-border rounded-xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+}

src/components/ui/status-badge.tsx

@@ -1,18 +1,44 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+/**
+ * Visual treatment per phase. Each entry is a Tailwind class string
+ * applied to the badge. The `Pending` style is also used as a fallback
+ * for unknown phases — it's the most neutral colour.
+ *
+ * Slice 7 / Bug 31 added `Suspended`. It uses an amber-on-muted scheme
+ * to read as "intentionally paused" — distinct from `Error` (red) and
+ * `Deleting` (mute grey).
+ */
 const phaseStyles: Record<string, string> = {
-  Running:
-    "bg-success/10 text-success border-success/20",
-  Provisioning:
-    "bg-warning/10 text-warning border-warning/20",
-  Pending:
-    "bg-text-muted/10 text-text-secondary border-border",
-  Error:
-    "bg-error/10 text-error border-error/20",
-  Deleting:
-    "bg-text-muted/10 text-text-muted border-border",
+  Running: "bg-success/10 text-success border-success/20",
+  Ready: "bg-success/10 text-success border-success/20",
+  Provisioning: "bg-warning/10 text-warning border-warning/20",
+  // Reconfiguring shares the warning palette (yellow pulse) but renders
+  // a distinct label, so customers see it differently from first-time
+  // provisioning. Useful when packages or channel-users change and the
+  // pod restarts mid-life.
+  Reconfiguring: "bg-warning/10 text-warning border-warning/20",
+  Pending: "bg-text-muted/10 text-text-secondary border-border",
+  Suspended: "bg-amber-500/10 text-amber-400 border-amber-500/30",
+  Error: "bg-error/10 text-error border-error/20",
+  Deleting: "bg-text-muted/10 text-text-muted border-border",
 };
 
 export function StatusBadge({ phase }: { phase: string }) {
+  const t = useTranslations("phase");
   const style = phaseStyles[phase] ?? phaseStyles.Pending;
+  // Translation lookup with fallback to the raw phase. Keeps things
+  // working if a new operator-side phase ships before the portal has
+  // a label for it.
+  const label = (() => {
+    try {
+      return t(phase);
+    } catch {
+      return phase;
+    }
+  })();
   return (
     <span
       className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium ${style}`}
@@ -23,7 +49,10 @@ export function StatusBadge({ phase }: { phase: string }) {
       {phase === "Provisioning" && (
         <span className="status-pulse h-1.5 w-1.5 rounded-full bg-warning" />
       )}
-      {phase}
+      {phase === "Reconfiguring" && (
+        <span className="status-pulse h-1.5 w-1.5 rounded-full bg-warning" />
+      )}
+      {label}
     </span>
   );
 }

src/components/ui/warning-badge.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+/**
+ * Tenant warning shape received from the operator's status.warnings.
+ * Mirror of the operator's `TenantWarning` type. See
+ * pieced-operator/api/v1alpha1/piecedtenant_types.go.
+ */
+export interface TenantWarning {
+  source: string;
+  reason?: string;
+  message?: string;
+  since?: string;
+}
+
+interface Props {
+  warnings: TenantWarning[];
+}
+
+/**
+ * Renders a small amber warning badge if there are any non-fatal
+ * warnings on the tenant. The badge sits visually next to the phase
+ * StatusBadge — they're separate concepts (phase = lifecycle, warnings
+ * = observed sub-issues) and may both be present at once (e.g. tenant
+ * is `Ready` but has a SkillPacksReady=False warning).
+ *
+ * Hover/focus reveals the warning detail. We don't truncate the message
+ * inside the tooltip; OCI/CRD condition messages tend to be short and
+ * include the actionable detail (which skill, which secret, which
+ * resolver). If a future warning source has a 5-line stacktrace as a
+ * message we'll need a different treatment; cross that bridge then.
+ *
+ * Returns null when there are no warnings — keep render-call sites
+ * simple, they don't have to gate on length themselves.
+ */
+export function WarningBadge({ warnings }: Props) {
+  const t = useTranslations("warnings");
+  if (!warnings || warnings.length === 0) return null;
+
+  const tooltipLabel = (() => {
+    try {
+      return warnings.length === 1
+        ? t("oneTooltip")
+        : t("manyTooltip", { count: warnings.length });
+    } catch {
+      return warnings.length === 1
+        ? "1 warning"
+        : `${warnings.length} warnings`;
+    }
+  })();
+
+  return (
+    <span className="relative group inline-flex">
+      <button
+        type="button"
+        // Button is non-actionable in itself — it exists purely to get
+        // keyboard focus for screen readers and keyboard users, so the
+        // tooltip isn't pointer-only. `aria-label` carries the summary;
+        // the full content is in the tooltip below for sighted users.
+        aria-label={tooltipLabel}
+        className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400 hover:bg-amber-500/20 focus:outline-none focus:ring-1 focus:ring-amber-400 cursor-help"
+        // No onClick — this is informational, not actionable. Pure
+        // hover/focus widget. tabIndex defaults to 0 for buttons.
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width={12}
+          height={12}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M12 9v4" />
+          <path d="M12 17h.01" />
+          <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" />
+        </svg>
+        <span>{warnings.length}</span>
+      </button>
+
+      {/*
+        Tooltip. Hidden by default; shown on hover OR focus of the
+        sibling button. Positioned below-right so it doesn't collide with
+        the StatusBadge that typically sits left of this. Constrained
+        width so long messages wrap.
+        z-50 keeps it above table rows / cards.
+      */}
+      <div
+        role="tooltip"
+        className="invisible group-hover:visible group-focus-within:visible absolute left-0 top-full mt-1 z-50 w-72 rounded-lg border border-border bg-surface-1 p-3 shadow-lg text-left"
+      >
+        <div className="text-[10px] uppercase tracking-wider text-text-muted mb-2">
+          {tooltipLabel}
+        </div>
+        <ul className="space-y-2">
+          {warnings.map((w, i) => (
+            <li key={i} className="text-xs">
+              <div className="font-mono text-amber-400 break-all">
+                {w.source}
+              </div>
+              {w.reason && (
+                <div className="text-text-secondary">{w.reason}</div>
+              )}
+              {w.message && (
+                <div className="text-text-secondary mt-0.5 break-words">
+                  {w.message}
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </span>
+  );
+}

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,14 +1,26 @@
 import NextAuth from "next-auth";
 import type { NextAuthConfig } from "next-auth";
-import type { PlatformRole, SessionUser, ZitadelClaims } from "@/types";
+import type { PlatformRole, Role, SessionUser, ZitadelClaims } from "@/types";
+import { isPersonalOrgName } from "@/lib/personal-org";
 
 const PLATFORM_ROLES: PlatformRole[] = ["platform_admin", "platform_operator"];
 
+/**
+ * Pull the role keys from the ZITADEL `urn:zitadel:iam:org:project:roles`
+ * claim. The claim is shaped as { roleKey: { orgId: orgName } } — we only
+ * need the keys.
+ *
+ * Slice 5: returns Role[] (the union) rather than PlatformRole[]. The
+ * keys can be either platform or customer roles depending on what the
+ * project authorization granted; the SessionUser carries them all and
+ * downstream helpers (canMutate, isCustomerOwner, requirePlatformRole)
+ * decide what each subset means.
+ */
 function extractRoles(
   rolesObj?: Record<string, Record<string, string>>
-): PlatformRole[] {
+): Role[] {
   if (!rolesObj) return [];
-  return Object.keys(rolesObj) as PlatformRole[];
+  return Object.keys(rolesObj) as Role[];
 }
 
 export const authConfig: NextAuthConfig = {
@@ -46,19 +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 PlatformRole[]) ?? [];
+      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)),
+        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/domain-check.ts

@@ -140,6 +140,12 @@ export function isPublicEmailDomain(domain: string): boolean {
  * Look up active tenant_requests whose contact_email shares the given domain.
  * Active = status NOT IN ('rejected', 'deleted').
  *
+ * Slice 4: personal-account rows (is_personal = TRUE) are excluded. A
+ * person's personal account doesn't claim the domain on behalf of a
+ * company — alice@acme.ch registering as a personal account must not
+ * block the actual Acme GmbH from registering later. The personal flag
+ * lives on the row itself, set by /api/register at creation time.
+ *
  * Uses LOWER() on both sides to handle any historical case inconsistency in
  * stored emails. The pattern '%@<domain>' is anchored so 'acme.ch' does not
  * match 'notacme.ch' or 'acme.ch.evil.com'.
@@ -151,7 +157,8 @@ async function findDuplicateInDb(
   const result = await pool.query<{ count: string }>(
     `SELECT COUNT(*) AS count FROM tenant_requests
      WHERE LOWER(contact_email) LIKE $1
-       AND status NOT IN ('rejected', 'deleted')`,
+       AND status NOT IN ('rejected', 'deleted')
+       AND is_personal = FALSE`,
     [`%@${domain.toLowerCase()}`]
   );
   return Number(result.rows[0]?.count ?? 0) > 0;

src/lib/email.ts

@@ -11,6 +11,17 @@
  *   SMTP_PASS                  — App Password
  *   SMTP_FROM                  — e.g. "PieCed <noreply@pieced.ch>"
  *   ADMIN_NOTIFICATION_EMAIL   — e.g. admin@pieced.ch (optional)
+ *   SUPPORT_CONTACT_EMAIL      — e.g. support@pieced.ch (optional)
+ *                                 Customer-facing address for "have
+ *                                 questions?" follow-ups in
+ *                                 transactional emails. The from
+ *                                 address itself (SMTP_USER) is
+ *                                 typically a noreply mailbox, so we
+ *                                 don't tell customers to "reply to
+ *                                 this email" — instead we point them
+ *                                 at this monitored address. If
+ *                                 unset, the contact-prompt line is
+ *                                 simply omitted from emails.
  */
 
 import nodemailer from "nodemailer";
@@ -42,6 +53,12 @@ function getFrom(): string {
   );
 }
 
+/** Returns the customer-facing support email address, or null if unset. */
+function getSupportContactEmail(): string | null {
+  const v = process.env.SUPPORT_CONTACT_EMAIL?.trim();
+  return v && v.length > 0 ? v : null;
+}
+
 /**
  * Escape HTML entities to prevent injection in HTML emails.
  */
@@ -125,6 +142,21 @@ export async function sendRejectionEmail(
          </div>`
       : "";
 
+    const supportEmail = getSupportContactEmail();
+    // The customer here is rejected pre-onboarding — they don't yet
+    // have a portal account, so we can't send them to /support.
+    // Instead point at the configured support address (if set).
+    // If unset (e.g. early pilot before a support inbox exists), we
+    // omit the follow-up line entirely rather than promise something
+    // that goes nowhere — telling the customer to "reply to this
+    // email" would be misleading because we send from a noreply box.
+    const contactLineText = supportEmail
+      ? `If you have questions or would like to discuss this further, please contact us at ${supportEmail}.`
+      : "";
+    const contactLineHtml = supportEmail
+      ? `<p>If you have questions or would like to discuss this further, please contact us at <a href="mailto:${escapeHtml(supportEmail)}" style="color: #3b82f6;">${escapeHtml(supportEmail)}</a>.</p>`
+      : "";
+
     await getTransporter().sendMail({
       from: getFrom(),
       to,
@@ -134,18 +166,20 @@ export async function sendRejectionEmail(
         "",
         `Thank you for your interest in PieCed IT. Unfortunately, we were unable to approve your onboarding request for ${companyName} at this time.`,
         notesBlock,
-        "If you have questions or would like to discuss this further, please reply to this email.",
+        contactLineText,
         "",
         "Best regards,",
         "PieCed IT",
-      ].join("\n"),
+      ]
+        .filter((s) => s !== "")
+        .join("\n"),
       html: `
         <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 560px; margin: 0 auto; color: #e0e0e0; background: #1a1a1a; padding: 32px; border-radius: 12px;">
           <h2 style="color: #ffffff; margin-top: 0;">Update on your onboarding request</h2>
           <p>Hello ${safeName},</p>
           <p>Thank you for your interest in PieCed IT. Unfortunately, we were unable to approve your onboarding request for <strong>${safeCompany}</strong> at this time.</p>
           ${notesHtml}
-          <p>If you have questions or would like to discuss this further, please reply to this email.</p>
+          ${contactLineHtml}
           <hr style="border: none; border-top: 1px solid #333; margin: 24px 0;" />
           <p style="color: #666; font-size: 12px;">PieCed IT — Hosted on-premises in Switzerland</p>
         </div>
@@ -156,6 +190,130 @@ export async function sendRejectionEmail(
   }
 }
 
+/**
+ * Bug 37a: separate email for resume request approval. The tenant
+ * already exists; the message is "we're un-suspending it" rather than
+ * "we're provisioning a new instance". Avoids confusing the customer
+ * with onboarding language for a tenant they already had.
+ */
+export async function sendResumeApprovalEmail(
+  to: string,
+  contactName: string,
+  companyName: string
+): Promise<void> {
+  const safeName = escapeHtml(contactName);
+  const safeCompany = escapeHtml(companyName);
+
+  try {
+    await getTransporter().sendMail({
+      from: getFrom(),
+      to,
+      subject: `Your PieCed AI assistant has been reactivated — ${companyName}`,
+      text: [
+        `Hello ${contactName},`,
+        "",
+        `Good news — your reactivation request for ${companyName} has been approved.`,
+        "",
+        "Your AI assistant is being brought back online and should be ready in a few minutes.",
+        "You can check the status in your dashboard at https://app.pieced.ch",
+        "",
+        "Best regards,",
+        "PieCed IT",
+      ].join("\n"),
+      html: `
+        <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 560px; margin: 0 auto; color: #e0e0e0; background: #1a1a1a; padding: 32px; border-radius: 12px;">
+          <h2 style="color: #ffffff; margin-top: 0;">Your AI assistant has been reactivated</h2>
+          <p>Hello ${safeName},</p>
+          <p>Good news — your reactivation request for <strong>${safeCompany}</strong> has been approved.</p>
+          <p>Your AI assistant is being brought back online and should be ready in a few minutes.</p>
+          <p>
+            <a href="https://app.pieced.ch" style="display: inline-block; padding: 10px 24px; background: #3b82f6; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 500;">
+              Go to Dashboard
+            </a>
+          </p>
+          <hr style="border: none; border-top: 1px solid #333; margin: 24px 0;" />
+          <p style="color: #666; font-size: 12px;">PieCed IT — Hosted on-premises in Switzerland</p>
+        </div>
+      `,
+    });
+  } catch (err) {
+    console.error("Failed to send resume approval email:", err);
+  }
+}
+
+/**
+ * Bug 37a: separate email for resume request rejection. Differs from
+ * the onboarding rejection in two ways: it explicitly mentions the
+ * tenant remains suspended, and it points the customer to the
+ * 60-day retention window so they understand the deletion clock is
+ * still ticking. The latter is important — a customer reading a
+ * generic "request rejected" email might not realise their data is
+ * still on a countdown.
+ */
+export async function sendResumeRejectionEmail(
+  to: string,
+  contactName: string,
+  companyName: string,
+  adminNotes?: string
+): Promise<void> {
+  const safeName = escapeHtml(contactName);
+  const safeCompany = escapeHtml(companyName);
+  const safeNotes = adminNotes ? escapeHtml(adminNotes) : "";
+
+  try {
+    const notesBlock = adminNotes
+      ? `\nNote from our team:\n${adminNotes}\n`
+      : "";
+    const notesHtml = safeNotes
+      ? `<div style="background: #2a2a2a; border-left: 3px solid #ef4444; padding: 12px 16px; border-radius: 6px; margin: 16px 0;">
+           <p style="color: #ccc; font-size: 13px; margin: 0;"><strong>Note from our team:</strong></p>
+           <p style="color: #aaa; font-size: 13px; margin: 8px 0 0 0;">${safeNotes}</p>
+         </div>`
+      : "";
+
+    // The customer has portal access (their tenant exists, they
+    // just had a resume request rejected), so direct them to the
+    // support ticket system for follow-up. We never tell them to
+    // "reply to this email" because the from address is a noreply
+    // mailbox.
+    const contactLineText =
+      "If you have questions, open a support ticket at https://app.pieced.ch/support.";
+    const contactLineHtml = `<p>If you have questions, <a href="https://app.pieced.ch/support" style="color: #3b82f6;">open a support ticket</a>.</p>`;
+
+    await getTransporter().sendMail({
+      from: getFrom(),
+      to,
+      subject: `Update on your reactivation request — ${companyName}`,
+      text: [
+        `Hello ${contactName},`,
+        "",
+        `Thank you for your reactivation request for ${companyName}. Unfortunately, we were unable to approve it at this time.`,
+        notesBlock,
+        "Your tenant remains suspended. As a reminder, your data is preserved for 60 days from the original cancellation date, after which it will be permanently deleted. You can submit a new reactivation request at any time before then.",
+        "",
+        contactLineText,
+        "",
+        "Best regards,",
+        "PieCed IT",
+      ].join("\n"),
+      html: `
+        <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 560px; margin: 0 auto; color: #e0e0e0; background: #1a1a1a; padding: 32px; border-radius: 12px;">
+          <h2 style="color: #ffffff; margin-top: 0;">Update on your reactivation request</h2>
+          <p>Hello ${safeName},</p>
+          <p>Thank you for your reactivation request for <strong>${safeCompany}</strong>. Unfortunately, we were unable to approve it at this time.</p>
+          ${notesHtml}
+          <p>Your tenant remains suspended. As a reminder, your data is preserved for 60 days from the original cancellation date, after which it will be permanently deleted. You can submit a new reactivation request at any time before then.</p>
+          ${contactLineHtml}
+          <hr style="border: none; border-top: 1px solid #333; margin: 24px 0;" />
+          <p style="color: #666; font-size: 12px;">PieCed IT — Hosted on-premises in Switzerland</p>
+        </div>
+      `,
+    });
+  } catch (err) {
+    console.error("Failed to send resume rejection email:", err);
+  }
+}
+
 export async function sendAdminNotificationEmail(
   companyName: string,
   contactName: string,
@@ -203,3 +361,365 @@ export async function sendAdminNotificationEmail(
     console.error("Failed to send admin notification email:", err);
   }
 }
+
+// ---------------------------------------------------------------------------
+// Feature 6: resume-request admin notification
+// ---------------------------------------------------------------------------
+
+/**
+ * Notify the admin distribution list that a customer has requested
+ * reactivation of a suspended tenant. Distinct from the onboarding
+ * notification because the action consequences differ (admin
+ * approving a resume just unsuspends an existing tenant; no
+ * provisioning runs), and because the customer's note — explaining
+ * why they want reactivation — is meaningful context for the admin
+ * triaging the queue.
+ *
+ * Skipped silently if ADMIN_NOTIFICATION_EMAIL isn't set, matching
+ * the pattern of the other admin notification functions.
+ */
+export async function sendResumeRequestAdminNotificationEmail(params: {
+  tenantName: string;
+  companyName: string;
+  contactName: string;
+  contactEmail: string;
+  customerNotes?: string | null;
+}): Promise<void> {
+  const adminEmail = process.env.ADMIN_NOTIFICATION_EMAIL;
+  if (!adminEmail) return;
+
+  const safeCompany = escapeHtml(params.companyName);
+  const safeName = escapeHtml(params.contactName);
+  const safeEmail = escapeHtml(params.contactEmail);
+  const safeTenant = escapeHtml(params.tenantName);
+  const safeNotes = params.customerNotes ? escapeHtml(params.customerNotes) : "";
+
+  const noteText = params.customerNotes
+    ? `\nCustomer's note:\n${params.customerNotes}\n`
+    : "";
+  const noteHtml = safeNotes
+    ? `<div style="background: #2a2a2a; border-left: 3px solid #3b82f6; padding: 12px 16px; border-radius: 6px; margin: 16px 0; white-space: pre-wrap;">
+         <p style="color: #ccc; font-size: 13px; margin: 0 0 8px 0;"><strong>Customer's note:</strong></p>
+         <p style="color: #e0e0e0; font-size: 13px; margin: 0;">${safeNotes}</p>
+       </div>`
+    : "";
+
+  try {
+    await getTransporter().sendMail({
+      from: getFrom(),
+      to: adminEmail,
+      subject: `Reactivation request: ${params.companyName}`,
+      text: [
+        `A customer has requested reactivation of a suspended tenant.`,
+        "",
+        `Company: ${params.companyName}`,
+        `Tenant:  ${params.tenantName}`,
+        `Contact: ${params.contactName} (${params.contactEmail})`,
+        noteText,
+        `Review at https://app.pieced.ch/admin`,
+      ]
+        .filter((s) => s !== "")
+        .join("\n"),
+      html: `
+        <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 560px; margin: 0 auto; color: #e0e0e0; background: #1a1a1a; padding: 32px; border-radius: 12px;">
+          <h2 style="color: #ffffff; margin-top: 0;">Reactivation request</h2>
+          <p>A customer has requested reactivation of a suspended tenant.</p>
+          <table style="color: #ccc; font-size: 14px; margin: 16px 0;">
+            <tr><td style="padding: 4px 12px 4px 0; color: #888;">Company:</td><td>${safeCompany}</td></tr>
+            <tr><td style="padding: 4px 12px 4px 0; color: #888;">Tenant:</td><td style="font-family: monospace;">${safeTenant}</td></tr>
+            <tr><td style="padding: 4px 12px 4px 0; color: #888;">Contact:</td><td>${safeName} (${safeEmail})</td></tr>
+          </table>
+          ${noteHtml}
+          <p>
+            <a href="https://app.pieced.ch/admin" style="display: inline-block; padding: 10px 24px; background: #3b82f6; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 500;">
+              Review Request
+            </a>
+          </p>
+          <hr style="border: none; border-top: 1px solid #333; margin: 24px 0;" />
+          <p style="color: #666; font-size: 12px;">PieCed IT — Admin notification</p>
+        </div>
+      `,
+    });
+  } catch (err) {
+    console.error("Failed to send resume request admin notification:", err);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Feature 5: support ticket emails
+// ---------------------------------------------------------------------------
+
+/**
+ * Email subject prefix that helps customers thread tickets in their
+ * mail client. We don't have inbound email processing — replies via
+ * email back to us go nowhere — but the prefix is still useful for
+ * the customer's own organisation. The id is shortened to 8 chars
+ * for human readability; collisions on the truncated form within a
+ * single user's inbox are vanishingly unlikely.
+ */
+function ticketSubjectPrefix(ticketId: string): string {
+  return `[PieCed Support #${ticketId.slice(0, 8)}]`;
+}
+
+const STATUS_LABELS_EN: Record<string, string> = {
+  open: "Open",
+  in_progress: "In progress",
+  waiting_for_customer: "Waiting for your reply",
+  resolved: "Resolved",
+  reopened: "Reopened",
+};
+
+/**
+ * Sent to the customer when they create a ticket — confirmation
+ * that we received it and a copy of the ticket id for their records.
+ */
+export async function sendSupportTicketCreatedEmail(params: {
+  to: string;
+  contactName: string;
+  ticketId: string;
+  title: string;
+}): Promise<void> {
+  const safeName = escapeHtml(params.contactName);
+  const safeTitle = escapeHtml(params.title);
+  const shortId = params.ticketId.slice(0, 8);
+  const subject = `${ticketSubjectPrefix(params.ticketId)} ${params.title}`;
+
+  try {
+    await getTransporter().sendMail({
+      from: getFrom(),
+      to: params.to,
+      subject,
+      text: [
+        `Hello ${params.contactName},`,
+        "",
+        `We've received your support request "${params.title}" (reference #${shortId}).`,
+        "",
+        "Our team will review and respond as soon as possible. You can track the status and reply at https://app.pieced.ch/support.",
+        "",
+        "Best regards,",
+        "PieCed IT",
+      ].join("\n"),
+      html: `
+        <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 560px; margin: 0 auto; color: #e0e0e0; background: #1a1a1a; padding: 32px; border-radius: 12px;">
+          <h2 style="color: #ffffff; margin-top: 0;">Support request received</h2>
+          <p>Hello ${safeName},</p>
+          <p>We've received your support request <strong>"${safeTitle}"</strong> (reference #${shortId}).</p>
+          <p>Our team will review and respond as soon as possible.</p>
+          <p>
+            <a href="https://app.pieced.ch/support" style="display: inline-block; padding: 10px 24px; background: #3b82f6; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 500;">
+              View ticket
+            </a>
+          </p>
+          <hr style="border: none; border-top: 1px solid #333; margin: 24px 0;" />
+          <p style="color: #666; font-size: 12px;">PieCed IT — Hosted on-premises in Switzerland</p>
+        </div>
+      `,
+    });
+  } catch (err) {
+    console.error("Failed to send support ticket creation email:", err);
+  }
+}
+
+/**
+ * Sent to the customer when an admin replies to one of their tickets.
+ * Includes the body of the reply inline so the customer can read it
+ * without clicking through (especially useful on mobile).
+ */
+export async function sendSupportTicketReplyEmail(params: {
+  to: string;
+  contactName: string;
+  ticketId: string;
+  title: string;
+  authorName: string;
+  body: string;
+}): Promise<void> {
+  const safeName = escapeHtml(params.contactName);
+  const safeTitle = escapeHtml(params.title);
+  const safeAuthor = escapeHtml(params.authorName);
+  const safeBody = escapeHtml(params.body);
+  const shortId = params.ticketId.slice(0, 8);
+  const subject = `${ticketSubjectPrefix(params.ticketId)} Re: ${params.title}`;
+
+  try {
+    await getTransporter().sendMail({
+      from: getFrom(),
+      to: params.to,
+      subject,
+      text: [
+        `Hello ${params.contactName},`,
+        "",
+        `${params.authorName} replied to your ticket "${params.title}" (#${shortId}):`,
+        "",
+        params.body,
+        "",
+        "Reply or follow up at https://app.pieced.ch/support.",
+        "",
+        "Best regards,",
+        "PieCed IT",
+      ].join("\n"),
+      html: `
+        <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 560px; margin: 0 auto; color: #e0e0e0; background: #1a1a1a; padding: 32px; border-radius: 12px;">
+          <h2 style="color: #ffffff; margin-top: 0;">New reply on your ticket</h2>
+          <p>Hello ${safeName},</p>
+          <p><strong>${safeAuthor}</strong> replied to your ticket <strong>"${safeTitle}"</strong> (#${shortId}):</p>
+          <div style="background: #2a2a2a; border-left: 3px solid #3b82f6; padding: 12px 16px; border-radius: 6px; margin: 16px 0; white-space: pre-wrap;">
+            ${safeBody}
+          </div>
+          <p>
+            <a href="https://app.pieced.ch/support" style="display: inline-block; padding: 10px 24px; background: #3b82f6; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 500;">
+              View ticket
+            </a>
+          </p>
+          <hr style="border: none; border-top: 1px solid #333; margin: 24px 0;" />
+          <p style="color: #666; font-size: 12px;">PieCed IT — Hosted on-premises in Switzerland</p>
+        </div>
+      `,
+    });
+  } catch (err) {
+    console.error("Failed to send support ticket reply email:", err);
+  }
+}
+
+/**
+ * Sent to the customer when an admin changes status without a comment.
+ * If the same admin action included a comment, they'd get the
+ * reply email instead — caller decides which to send.
+ */
+export async function sendSupportTicketStatusEmail(params: {
+  to: string;
+  contactName: string;
+  ticketId: string;
+  title: string;
+  newStatus: string;
+}): Promise<void> {
+  const safeName = escapeHtml(params.contactName);
+  const safeTitle = escapeHtml(params.title);
+  const statusLabel = STATUS_LABELS_EN[params.newStatus] ?? params.newStatus;
+  const shortId = params.ticketId.slice(0, 8);
+  const subject = `${ticketSubjectPrefix(params.ticketId)} Status: ${statusLabel}`;
+
+  try {
+    await getTransporter().sendMail({
+      from: getFrom(),
+      to: params.to,
+      subject,
+      text: [
+        `Hello ${params.contactName},`,
+        "",
+        `The status of your ticket "${params.title}" (#${shortId}) has been updated to: ${statusLabel}.`,
+        "",
+        "View details and respond if needed at https://app.pieced.ch/support.",
+        "",
+        "Best regards,",
+        "PieCed IT",
+      ].join("\n"),
+      html: `
+        <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 560px; margin: 0 auto; color: #e0e0e0; background: #1a1a1a; padding: 32px; border-radius: 12px;">
+          <h2 style="color: #ffffff; margin-top: 0;">Ticket status update</h2>
+          <p>Hello ${safeName},</p>
+          <p>The status of your ticket <strong>"${safeTitle}"</strong> (#${shortId}) has been updated to:</p>
+          <p style="font-size: 18px; color: #3b82f6; font-weight: 600;">${escapeHtml(statusLabel)}</p>
+          <p>
+            <a href="https://app.pieced.ch/support" style="display: inline-block; padding: 10px 24px; background: #3b82f6; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 500;">
+              View ticket
+            </a>
+          </p>
+          <hr style="border: none; border-top: 1px solid #333; margin: 24px 0;" />
+          <p style="color: #666; font-size: 12px;">PieCed IT — Hosted on-premises in Switzerland</p>
+        </div>
+      `,
+    });
+  } catch (err) {
+    console.error("Failed to send support ticket status email:", err);
+  }
+}
+
+/**
+ * Notify the platform admin distribution list of a new ticket OR a
+ * customer reply. Mirror of sendAdminNotificationEmail's pattern —
+ * uses the same ADMIN_NOTIFICATION_EMAIL env var.
+ *
+ * Two trigger reasons supported:
+ *  - 'created'  → new ticket from a customer
+ *  - 'replied'  → customer replied to existing ticket (we want admin
+ *                 visibility, e.g. to know the ticket needs another
+ *                 round of attention)
+ */
+export async function sendSupportAdminNotificationEmail(params: {
+  reason: "created" | "replied";
+  ticketId: string;
+  title: string;
+  contactName: string;
+  contactEmail: string;
+  body?: string; // The new message content (description on create, comment body on reply)
+  category?: string;
+}): Promise<void> {
+  const adminEmail = process.env.ADMIN_NOTIFICATION_EMAIL;
+  if (!adminEmail) {
+    console.warn(
+      "ADMIN_NOTIFICATION_EMAIL not set; skipping admin support notification"
+    );
+    return;
+  }
+  const safeContact = escapeHtml(params.contactName);
+  const safeContactEmail = escapeHtml(params.contactEmail);
+  const safeTitle = escapeHtml(params.title);
+  const safeBody = params.body ? escapeHtml(params.body) : "";
+  const shortId = params.ticketId.slice(0, 8);
+
+  const subjectVerb = params.reason === "created" ? "New" : "Reply on";
+  const subject = `${ticketSubjectPrefix(params.ticketId)} ${subjectVerb}: ${params.title}`;
+
+  const headlineHtml =
+    params.reason === "created"
+      ? `<h2 style="color: #ffffff; margin-top: 0;">New support ticket</h2>`
+      : `<h2 style="color: #ffffff; margin-top: 0;">Customer replied on ticket</h2>`;
+
+  try {
+    await getTransporter().sendMail({
+      from: getFrom(),
+      to: adminEmail,
+      subject,
+      text: [
+        params.reason === "created"
+          ? "A new support ticket was opened:"
+          : "A customer replied to a support ticket:",
+        "",
+        `From:     ${params.contactName} <${params.contactEmail}>`,
+        `Ticket:   ${params.title} (#${shortId})`,
+        params.category ? `Category: ${params.category}` : "",
+        "",
+        params.body ? "Message:" : "",
+        params.body ?? "",
+        "",
+        `View at https://app.pieced.ch/support/${params.ticketId}`,
+      ]
+        .filter((s) => s !== "")
+        .join("\n"),
+      html: `
+        <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 560px; margin: 0 auto; color: #e0e0e0; background: #1a1a1a; padding: 32px; border-radius: 12px;">
+          ${headlineHtml}
+          <table style="width:100%; font-size: 13px; color: #aaa; margin-bottom: 16px;">
+            <tr><td style="padding: 4px 0; width: 100px;">From</td><td style="padding: 4px 0; color: #fff;">${safeContact} &lt;${safeContactEmail}&gt;</td></tr>
+            <tr><td style="padding: 4px 0;">Title</td><td style="padding: 4px 0; color: #fff;">${safeTitle} <span style="color: #666;">(#${shortId})</span></td></tr>
+            ${params.category ? `<tr><td style="padding: 4px 0;">Category</td><td style="padding: 4px 0; color: #fff;">${escapeHtml(params.category)}</td></tr>` : ""}
+          </table>
+          ${
+            params.body
+              ? `<div style="background: #2a2a2a; border-left: 3px solid #3b82f6; padding: 12px 16px; border-radius: 6px; margin: 16px 0; white-space: pre-wrap;">${safeBody}</div>`
+              : ""
+          }
+          <p>
+            <a href="https://app.pieced.ch/support/${params.ticketId}" style="display: inline-block; padding: 10px 24px; background: #3b82f6; color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 500;">
+              Open in admin queue
+            </a>
+          </p>
+          <hr style="border: none; border-top: 1px solid #333; margin: 24px 0;" />
+          <p style="color: #666; font-size: 12px;">PieCed IT — Admin notification</p>
+        </div>
+      `,
+    });
+  } catch (err) {
+    console.error("Failed to send admin support notification:", err);
+  }
+}

src/lib/k8s.ts

@@ -130,3 +130,46 @@ export async function patchTenantSpec(
   }
   return res.json() as Promise<PiecedTenant>;
 }
+
+/**
+ * Set or clear an annotation on a PiecedTenant CR.
+ *
+ * Pass `value=null` to remove the annotation. K8s merge-patch removes
+ * a key when its value is null in the patch — that's exactly the
+ * semantic we want.
+ *
+ * Used by the resume-request flow (Bug 37a): the portal sets
+ * `pieced.ch/resume-request-pending` when a customer creates a
+ * resume request, and clears it when the request transitions to a
+ * terminal state. The operator reads this annotation to pause its
+ * 60-day deletion timer while a resume request is in flight.
+ *
+ * Annotations are namespaced informally — we use `pieced.ch/...` for
+ * everything we own, mirroring the labels.
+ */
+export async function setTenantAnnotation(
+  name: string,
+  key: string,
+  value: string | null
+): Promise<PiecedTenant> {
+  const url = `${getBaseUrl()}/apis/${API_VERSION}/${PLURAL}/${name}`;
+  const res = await fetch(url, {
+    method: "PATCH",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/merge-patch+json",
+      ...getAuthHeaders(),
+    },
+    body: JSON.stringify({
+      metadata: { annotations: { [key]: value } },
+    }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    const err = new Error(`K8s annotate /${name}: ${res.status} ${text}`);
+    (err as any).statusCode = res.status;
+    throw err;
+  }
+  return res.json() as Promise<PiecedTenant>;
+}

src/lib/litellm.ts

@@ -32,12 +32,43 @@ export async function getTeamSpendLogs(
   return litellmFetch(`/global/spend/logs?${params}`);
 }
 
+/**
+ * Fetch one page of spend logs for a team, optionally narrowed to a
+ * single virtual key by alias.
+ *
+ * Slice 2 / Bug 19 context
+ * ------------------------
+ * Teams in LiteLLM are now org-scoped (one team per org), and each
+ * tenant in the org has its own virtual key with `key_alias = tenant
+ * CR name`. Without `keyAlias`, this returns the full team's spend —
+ * which mingles every tenant in the org. The portal's per-tenant
+ * usage view passes `keyAlias` to filter server-side via LiteLLM's
+ * native `key_alias` query param. Confirmed available on the
+ * `/spend/logs/v2` endpoint via OpenAPI introspection — no need to
+ * page-and-post-filter as the previous slice did.
+ *
+ * Why this matters
+ * ----------------
+ * Previous implementation fetched all team pages, then post-filtered
+ * by alias in JS. Two problems: (1) at any reasonable scale this is
+ * O(team_total) memory per request even when only one tenant's data
+ * is needed; (2) more importantly, when called from the customer
+ * dashboard without an explicit alias, the route's "pick the first
+ * visible tenant" fallback meant both Acme tenants showed identical
+ * numbers — the alias used was always the first tenant in the
+ * visible list, regardless of which tenant page was being viewed.
+ *
+ * The route layer above is responsible for resolving the tenant
+ * identity correctly and passing the right alias here. This
+ * function's only job is to pass it through to LiteLLM.
+ */
 export async function getTeamSpendLogsV2(
   teamId: string,
   startDate: string,
   endDate: string,
   page: number = 1,
-  pageSize: number = 100
+  pageSize: number = 100,
+  keyAlias?: string | null
 ) {
   const params = new URLSearchParams({
     team_id: teamId,
@@ -46,6 +77,9 @@ export async function getTeamSpendLogsV2(
     page: String(page),
     page_size: String(pageSize),
   });
+  if (keyAlias) {
+    params.set("key_alias", keyAlias);
+  }
   return litellmFetch(`/spend/logs/v2?${params}`);
 }
 

src/lib/personal-org.ts

@@ -0,0 +1,147 @@
+/**
+ * Personal-account helpers.
+ *
+ * Two ZITADEL org-name formats may identify a personal account:
+ *
+ * 1. Legacy (Slice 4 .. 7-pre-Bug9):
+ *      "{givenName} {familyName} (Personal)"
+ *    Embedded the user's name in the org name. Hit a uniqueness
+ *    collision on common Swiss names (Bug 9: two people named "Eva
+ *    Müller" can't both register). Suffix is detected via
+ *    `PERSONAL_ORG_SUFFIX`.
+ *
+ * 2. Current (Slice 7+):
+ *      "personal-{8 hex chars}"
+ *    Opaque, structurally collision-free, no PII. The user's display
+ *    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.
+ *
+ * Recognises both the legacy " (Personal)" suffix and the current
+ * "personal-{8hex}" opaque form. Whitespace inside the legacy suffix is
+ * 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 {
+  if (!orgName) return false;
+  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/session.ts

@@ -1,19 +1,87 @@
 import { auth } from "@/lib/auth";
 import type { SessionUser } from "@/types";
 
+/**
+ * Read-only session lookup. Returns the SessionUser stashed on the
+ * NextAuth session by `auth.ts::callbacks.session`, or null if there
+ * is no authenticated session.
+ */
 export async function getSessionUser(): Promise<SessionUser | null> {
   const session = await auth();
   return (session as any)?.platformUser ?? null;
 }
 
+/**
+ * Throws if there is no authenticated session. Otherwise returns the
+ * SessionUser. Use at the top of any handler that requires a logged-in
+ * user regardless of role.
+ */
 export async function requireSession(): Promise<SessionUser> {
   const user = await getSessionUser();
   if (!user) throw new Error("Unauthorized");
   return user;
 }
 
+/**
+ * Throws unless the caller has a platform-level role
+ * (platform_admin or platform_operator). Use to gate /api/admin/*
+ * routes — these handle ANY customer's org and must not be accessible
+ * to customer-role users.
+ */
 export async function requirePlatformRole(): Promise<SessionUser> {
   const user = await requireSession();
   if (!user.isPlatform) throw new Error("Forbidden: platform role required");
   return user;
 }
+
+// ---------------------------------------------------------------------------
+// Slice 5: role predicates and gates
+// ---------------------------------------------------------------------------
+//
+// Naming convention: `is*` are pure predicates over a SessionUser,
+// safe to call inline in JSX/server components. `require*` throw on
+// failure and are meant for the top of route handlers.
+
+/**
+ * True when the user is a platform admin/operator OR holds the
+ * `owner` customer role on their org.
+ *
+ * This is the single check for "can mutate". Platform users always
+ * win because they administer all orgs cross-cut. Customer-side, only
+ * `owner` may mutate; `user` (and any future read-only customer role)
+ * cannot.
+ */
+export function canMutate(user: SessionUser): boolean {
+  return user.isPlatform || user.roles.includes("owner");
+}
+
+/**
+ * True when the user holds the customer `owner` role on their org.
+ * Excludes platform users — use {@link canMutate} when both should
+ * be allowed.
+ *
+ * Useful for permissions that are specifically about "this customer's
+ * own owner", e.g. "owner can invite users into their own org" — a
+ * platform user shouldn't be casually inviting users into a customer
+ * org, that's an admin-console action and goes through different
+ * tooling.
+ */
+export function isCustomerOwner(user: SessionUser): boolean {
+  return !user.isPlatform && user.roles.includes("owner");
+}
+
+/**
+ * Throws unless `canMutate(user) === true`. Use at the top of any
+ * mutating customer-side handler.
+ *
+ * The thrown error message is intentionally generic — handlers
+ * should catch and translate to a 403 JSON response so the client
+ * doesn't see a stack trace.
+ */
+export async function requireOwnerRole(): Promise<SessionUser> {
+  const user = await requireSession();
+  if (!canMutate(user)) {
+    throw new Error("Forbidden: owner role required");
+  }
+  return user;
+}

src/lib/team.ts

@@ -0,0 +1,189 @@
+/**
+ * Team management — high-level operations on top of `lib/zitadel.ts`.
+ *
+ * Two responsibilities:
+ *   1. Fetching the joined "members + roles" view for an org, used by
+ *      the /team page and the assigned-users panel.
+ *   2. Inviting a new member end-to-end (create user + send invite +
+ *      assign role) with rollback on partial failure, mirroring
+ *      `registerCustomer` for new orgs.
+ *
+ * Allowed customer roles
+ * ----------------------
+ * Slice 7 reduced scope: invitations may only set the customer roles
+ * `owner` or `user`. Platform roles cannot be granted via the portal —
+ * those are managed in ZITADEL Console with stricter access. The
+ * `viewer` role is gone since Slice 5.
+ */
+
+import {
+  listOrgUsers,
+  listOrgAuthorizations,
+  createHumanUser,
+  createInviteCode,
+  createAuthorization,
+  type OrgUser,
+} from "./zitadel";
+import type { CustomerRole } from "@/types";
+
+const ALLOWED_INVITE_ROLES: CustomerRole[] = ["owner", "user"];
+
+export function isValidInviteRole(role: string): role is CustomerRole {
+  return (ALLOWED_INVITE_ROLES as string[]).includes(role);
+}
+
+export interface OrgMember {
+  userId: string;
+  email: string;
+  displayName: string;
+  givenName: string;
+  familyName: string;
+  /**
+   * Roles held by this member on the org's project grant. Usually a
+   * single-element array (one of "owner" / "user"). Could be empty
+   * if the user exists in the org but has no project authorization
+   * 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;
+}
+
+/**
+ * Fetch the joined members-with-roles view for an org. Two ZITADEL
+ * calls run in parallel (users + authorizations) then joined in memory.
+ *
+ * If either call fails, returns whatever the other one produced —
+ * users without roles render as "no role" badges; missing users are
+ * just absent. Better degraded than empty.
+ */
+export async function getOrgMembers(orgId: string): Promise<OrgMember[]> {
+  const [users, auths] = await Promise.all([
+    listOrgUsers(orgId),
+    listOrgAuthorizations(orgId),
+  ]);
+
+  // Group authorizations by userId. We track BOTH the union of role
+  // keys (for display) and the first authorizationId we see (for the
+  // 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) => ({
+    userId: u.userId,
+    email: u.email,
+    displayName: u.displayName,
+    givenName: u.givenName,
+    familyName: u.familyName,
+    roles: Array.from(rolesByUser.get(u.userId) ?? []),
+    authorizationId: authIdByUser.get(u.userId) ?? "",
+  }));
+}
+
+/**
+ * Look up a single org member by userId. Convenience wrapper used to
+ * resolve a userId in an assignment row to a display name. Returns
+ * null if the user no longer exists in the org (stale assignment row).
+ */
+export async function getOrgMember(
+  orgId: string,
+  userId: string
+): Promise<OrgMember | null> {
+  const all = await getOrgMembers(orgId);
+  return all.find((m) => m.userId === userId) ?? null;
+}
+
+export interface InviteResult {
+  userId: string;
+  emailAlreadyExists: boolean;
+}
+
+/**
+ * Invite a new member into an existing customer org.
+ *
+ * Three steps:
+ *   1. createHumanUser  — create the ZITADEL human, no password.
+ *   2. createInviteCode — send the invite email (set password + verify).
+ *   3. createAuthorization — assign the chosen customer role.
+ *
+ * If any step after (1) fails, the user is NOT rolled back. Reasoning:
+ * unlike registration where a half-created org is useless, a
+ * half-invited user can be cleaned up manually in ZITADEL Console and
+ * re-invited. The mid-failure cost of partial state is low; the cost of
+ * a wrong rollback is double-creation on retry. So we surface the
+ * error and let the operator decide.
+ *
+ * The invite-email step is best-effort — if SMTP is misconfigured the
+ * user is created and authorized but no email goes out. Owner can
+ * resend manually from ZITADEL Console.
+ *
+ * Note: ZITADEL rejects creating a user with an email that already
+ * exists in the same instance. The error is surfaced as-is from the
+ * `extractZitadelMessage`-aware caller.
+ */
+export async function inviteOrgMember(params: {
+  orgId: string;
+  email: string;
+  givenName: string;
+  familyName: string;
+  role: CustomerRole;
+  preferredLanguage?: string;
+}): Promise<InviteResult> {
+  // Step 1: create the user
+  const user = await createHumanUser({
+    orgId: params.orgId,
+    email: params.email,
+    givenName: params.givenName,
+    familyName: params.familyName,
+    preferredLanguage: params.preferredLanguage,
+  });
+
+  // Step 2: send invite — best-effort
+  try {
+    await createInviteCode(user.id);
+  } catch (err) {
+    console.warn(
+      `Invite email could not be sent for user ${user.id} (SMTP may not be configured):`,
+      err
+    );
+  }
+
+  // Step 3: assign role
+  await createAuthorization({
+    userId: user.id,
+    organizationId: params.orgId,
+    roleKeys: [params.role],
+  });
+
+  return {
+    userId: user.id,
+    emailAlreadyExists: false,
+  };
+}
+
+/**
+ * Re-export for convenience.
+ */
+export type { OrgUser };

src/lib/validation.ts

@@ -0,0 +1,177 @@
+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];
+
+/**
+ * Country-specific postal-code patterns. Bug 33: previously a postal
+ * code could be anything (e.g. "abc"), which broke invoicing.
+ *
+ * Patterns are deliberately conservative — they reject obviously wrong
+ * input but don't try to be exhaustive valid-range checkers (e.g. CH
+ * codes are 1000-9999 in practice but \d{4} accepts 0000; the post
+ * office will reject downstream if it matters). If a future country
+ * has multi-format codes (e.g. UK postcodes with the inner-outer
+ * structure), add it as a regex here rather than trying to fit
+ * every country into the same shape.
+ */
+const POSTAL_CODE_PATTERNS: Record<SupportedCountry, RegExp> = {
+  CH: /^\d{4}$/,
+  DE: /^\d{5}$/,
+  AT: /^\d{4}$/,
+  FR: /^\d{5}$/,
+  IT: /^\d{5}$/,
+  LI: /^\d{4}$/,
+};
+
+/**
+ * Postal-code expectation in human terms — used in error messages so
+ * the user gets a useful hint ("expected 4 digits") rather than just
+ * a regex failure. Keep in sync with POSTAL_CODE_PATTERNS.
+ */
+const POSTAL_CODE_HINTS: Record<SupportedCountry, string> = {
+  CH: "4 digits",
+  DE: "5 digits",
+  AT: "4 digits",
+  FR: "5 digits",
+  IT: "5 digits",
+  LI: "4 digits",
+};
+
+/**
+ * Billing address — every field required at minimum non-empty length.
+ * Postal code is validated against the chosen country (Bug 33). Country
+ * is a fixed enum to prevent free-text typos that break invoicing.
+ *
+ * `superRefine` is the right hook here because we need to look at two
+ * fields (country + postalCode) together. The error path is set on
+ * `postalCode` so the wizard renders the inline error under the right
+ * input rather than at the form root.
+ */
+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",
+    }),
+    // Bug 35: VAT identifier. Required for company customers (B2B);
+    // omitted entirely for personal customers (B2C — private
+    // individuals don't have a VAT number). The schema marks it
+    // optional because the same schema is used for both flows;
+    // company-vs-personal enforcement happens at the API layer where
+    // `user.isPersonal` is known.
+    vatNumber: z.string().trim().max(50).optional(),
+  })
+  .superRefine((data, ctx) => {
+    const pattern = POSTAL_CODE_PATTERNS[data.country];
+    if (!pattern.test(data.postalCode)) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["postalCode"],
+        message: `Invalid postal code (expected ${POSTAL_CODE_HINTS[data.country]})`,
+      });
+    }
+  });
+
+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.
+ *
+ * Bug 35: `billingAddress` is now optional at the schema level. The
+ * wizard omits it entirely when the org already has an `org_billing`
+ * record. The API enforces "billing must exist by the end" by either
+ * looking up the existing org_billing row OR validating the supplied
+ * payload — neither path can be skipped without a 400.
+ */
+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.optional(),
+  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/visibility.ts

@@ -0,0 +1,127 @@
+/**
+ * Tenant visibility scoping for the customer-facing portal.
+ *
+ * Centralised here so every endpoint that lists or fetches tenants
+ * agrees on the same rules. A bug in any one of those — say, a stale
+ * inline filter that returned org-wide results to a `user`-role member
+ * — would leak siblings' workspace files and channel-user lists.
+ * One source of truth makes the audit easy.
+ *
+ * Visibility model
+ * ----------------
+ *   platform_admin / platform_operator → all tenants in the cluster.
+ *   owner (customer)                   → all tenants in their own org.
+ *   user (customer, no owner role)     → only tenants they've been
+ *                                        assigned to via the
+ *                                        tenant_user_assignments table.
+ *
+ * The narrowing for `user` is what turns the customer role into a
+ * meaningful access boundary. Without it, every member of an org
+ * would see every tenant — fine for a one-team SaaS, broken for a
+ * company with separate Production / Staging / Sales instances where
+ * the Sales team shouldn't see the Production workspace files.
+ *
+ * Owners do NOT get filtered against the assignment table even if
+ * they happen to have rows in it. The owner role beats user-level
+ * scoping — that's the point of being an owner.
+ */
+
+import type { SessionUser, PiecedTenant } from "@/types";
+import { listTenantAssignmentsForUser } from "./db";
+
+/** Internal classifier — "what's this caller's visibility scope?". */
+type Scope = "all" | "org" | "assigned";
+
+function scopeFor(user: SessionUser): Scope {
+  if (user.isPlatform) return "all";
+  if (user.roles.includes("owner")) return "org";
+  return "assigned";
+}
+
+/**
+ * Filter a list of tenants down to what `user` is allowed to see.
+ *
+ * Performs at most one DB query (only when scope is "assigned") and
+ * runs the K8s-side filter in memory. The K8s list is already small
+ * (≤100 tenants at pilot scale) so this is fine; if it grew we'd
+ * push the filter down to the K8s label selector instead.
+ */
+export async function listVisibleTenants(
+  user: SessionUser,
+  all: PiecedTenant[]
+): Promise<PiecedTenant[]> {
+  const scope = scopeFor(user);
+
+  if (scope === "all") return all;
+
+  const orgScoped = all.filter(
+    (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
+  );
+
+  if (scope === "org") return orgScoped;
+
+  // scope === "assigned" — narrow to the user's assignment list
+  const assigned = await listTenantAssignmentsForUser(user.id);
+  if (assigned.length === 0) return [];
+
+  const allowed = new Set(assigned);
+  return orgScoped.filter((t) => allowed.has(t.metadata.name));
+}
+
+/**
+ * Single-tenant predicate. Returns true when `user` may see (and read
+ * from) `tenant`. Mutating endpoints additionally need
+ * `canMutate(user)` from `lib/session.ts` — visibility ≠ permission to
+ * change.
+ *
+ * Returns false (rather than throwing) so handlers can map to the
+ * status code that fits their semantics — usually 404 for read paths
+ * (don't leak existence) and 403 for mutation paths (caller already
+ * knew the tenant existed).
+ */
+export async function canUserSeeTenant(
+  user: SessionUser,
+  tenant: PiecedTenant
+): Promise<boolean> {
+  const scope = scopeFor(user);
+
+  if (scope === "all") return true;
+
+  // org scope and assigned scope both require the tenant to belong
+  // to the user's org — different orgs are never visible.
+  if (tenant.metadata.labels?.["pieced.ch/zitadel-org-id"] !== user.orgId) {
+    return false;
+  }
+
+  if (scope === "org") return true;
+
+  // scope === "assigned"
+  const assigned = await listTenantAssignmentsForUser(user.id);
+  return assigned.includes(tenant.metadata.name);
+}
+
+/**
+ * "Should `user` see in-flight tenant requests on the dashboard?"
+ *
+ * Owners and platform users yes (they own the lifecycle); user-role
+ * members no (they can't act on requests, and a request that isn't
+ * yet a tenant has no assignment yet, so showing it would be a
+ * permanent "pending" with no action they can take).
+ */
+export function canSeeInflightRequests(user: SessionUser): boolean {
+  return scopeFor(user) !== "assigned";
+}
+
+/**
+ * Convenience predicate used by client-side empty states. For
+ * `user`-role members, the dashboard wants to distinguish between
+ * "your org has no instances" (very rare; ask owner to set one up)
+ * and "your org has instances but you're not assigned to any" (more
+ * common; ask owner to grant access).
+ *
+ * Callers compute this off the difference between visible and
+ * org-wide tenant lists; this helper just reifies the test.
+ */
+export function isUserScoped(user: SessionUser): boolean {
+  return scopeFor(user) === "assigned";
+}

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)
 // ---------------------------------------------------------------------------
@@ -213,6 +287,158 @@ export async function deleteOrganization(orgId: string): Promise<void> {
   await zitadelFetch(`/v2/organizations/${orgId}`, "DELETE");
 }
 
+// ---------------------------------------------------------------------------
+// Slice 7: search/list APIs for team management
+// ---------------------------------------------------------------------------
+//
+// Two endpoints used by the Team UI:
+//   - listOrgUsers       → POST /v2/users   (search with organizationIdQuery)
+//   - listOrgAuthorizations → Connect RPC to AuthorizationService.ListAuthorizations
+//
+// Caveats
+// -------
+// ZITADEL's v2 API surface evolves; the request/response shapes below were
+// written against the v2 schema as documented at the time of authoring
+// (organizationIdQuery filter on UserService.SearchUsers; ListAuthorizations
+// with a ListQuery + filter pair). If your installed ZITADEL version uses
+// slightly different field names, parsing here is intentionally tolerant —
+// the helpers return [] rather than throwing on shape drift, log a warning,
+// and the caller's UI shows an empty team list (which is recoverable).
+//
+// If you find a discrepancy, fix the request shape here and re-deploy; the
+// rest of the team UI doesn't care about the on-the-wire format.
+
+export interface OrgUser {
+  userId: string;
+  email: string;
+  givenName: string;
+  familyName: string;
+  displayName: string;
+}
+
+/**
+ * List all users belonging to a given ZITADEL organization. Paginated;
+ * we cap at 200 per call which is generous for the pilot scale.
+ */
+export async function listOrgUsers(orgId: string): Promise<OrgUser[]> {
+  try {
+    const data = await zitadelFetch<{ result?: any[] }>(
+      "/v2/users",
+      "POST",
+      {
+        queries: [{ organizationIdQuery: { organizationId: orgId } }],
+        // Sort by username so the team list is deterministic across reloads
+        sortingColumn: "USER_FIELD_NAME_USERNAME",
+        query: { limit: 200, asc: true },
+      }
+    );
+    if (!data?.result || !Array.isArray(data.result)) return [];
+
+    return data.result.flatMap((row: any) => {
+      // ZITADEL distinguishes human and machine users; we only want humans.
+      const human = row?.human;
+      if (!human) return [];
+      const profile = human.profile ?? {};
+      const email = human.email?.email ?? "";
+      const userId = row.userId ?? row.id ?? "";
+      if (!userId) return [];
+      return [
+        {
+          userId,
+          email,
+          givenName: profile.givenName ?? "",
+          familyName: profile.familyName ?? "",
+          displayName:
+            profile.displayName ??
+            `${profile.givenName ?? ""} ${profile.familyName ?? ""}`.trim() ??
+            email,
+        } as OrgUser,
+      ];
+    });
+  } catch (err) {
+    console.warn(
+      `Failed to list users for org ${orgId} (returning empty):`,
+      err
+    );
+    return [];
+  }
+}
+
+export interface OrgAuthorization {
+  authorizationId: string;
+  userId: string;
+  organizationId: string;
+  projectId: string;
+  roleKeys: string[];
+}
+
+/**
+ * List authorizations for the OpenClaw Platform project, filtered to a
+ * single organization. Used by the team UI to render each member's
+ * effective role.
+ *
+ * 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.
+ */
+export async function listOrgAuthorizations(
+  orgId: string
+): Promise<OrgAuthorization[]> {
+  try {
+    const data = await connectRpc<{ authorizations?: any[] }>(
+      "zitadel.authorization.v2.AuthorizationService",
+      "ListAuthorizations",
+      { pagination: { limit: 1000 } }
+    );
+    if (!data?.authorizations || !Array.isArray(data.authorizations)) {
+      return [];
+    }
+
+    return data.authorizations
+      .filter(
+        (row: any) =>
+          row?.project?.id === ZITADEL_PROJECT_ID &&
+          row?.organization?.id === orgId
+      )
+      .map((row: any) => ({
+        authorizationId: row.id ?? "",
+        userId: row.user?.id ?? "",
+        organizationId: row.organization?.id ?? orgId,
+        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):`,
+      err
+    );
+    return [];
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Full registration flow
 // ---------------------------------------------------------------------------
@@ -265,8 +491,12 @@ export async function registerCustomer(params: {
       );
     }
 
-    // 4. Grant project to org
-    const grant = await createProjectGrant(org.organizationId, ["owner"]);
+    // 4. Grant project to org with both customer roles so the org's
+    // 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

@@ -11,7 +11,11 @@
     "cancel": "Abbrechen",
     "save": "Speichern",
     "error": "Ein Fehler ist aufgetreten",
-    "register": "Registrieren"
+    "register": "Registrieren",
+    "team": "Team",
+    "settings": "Einstellungen",
+    "optional": "optional",
+    "support": "Support"
   },
   "login": {
     "title": "PieCed Portal",
@@ -19,11 +23,11 @@
     "button": "Weiter mit ZITADEL",
     "footer": "On-Premises gehostet in der Schweiz",
     "noAccount": "Noch kein Konto?",
-    "register": "Firma registrieren"
+    "register": "Konto erstellen"
   },
   "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",
@@ -35,7 +39,14 @@
     "successTitle": "Registrierung eingegangen",
     "successDescription": "Sie erhalten eine Einladungs-E-Mail mit einem Link, um Ihr Passwort festzulegen und Ihre E-Mail-Adresse zu bestätigen. Danach können Sie sich anmelden und Ihren KI-Assistenten einrichten.",
     "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."
+    "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.",
+    "accountTypeLabel": "Kontotyp",
+    "personalCardTitle": "Privat",
+    "personalCardDescription": "Für Sie persönlich.",
+    "companyCardTitle": "Unternehmen",
+    "companyCardDescription": "Für Ihr Unternehmen oder Team."
   },
   "onboarding": {
     "loading": "Status wird geladen…",
@@ -83,7 +94,33 @@
     "readyTitle": "Ihr Assistent ist bereit!",
     "readyDescription": "Ihr KI-Assistent wurde bereitgestellt und ist aktiv. Sie können ihn nun über das Dashboard verwalten.",
     "goToDashboard": "Zum Dashboard",
-    "submittedAt": "Eingereicht"
+    "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.",
+    "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",
+    "editRequestTitle": "Anfrage bearbeiten",
+    "editRequestDescription": "Passen Sie die Konfiguration an, bevor unser Team sie prüft.",
+    "editRequest": "Bearbeiten",
+    "cancelRequest": "Anfrage stornieren",
+    "cancelRequestConfirm": "Ja, Anfrage stornieren",
+    "cancelConfirmRequestTitle": "Diese Anfrage stornieren?",
+    "cancelConfirmRequestDescription": "Ihre ausstehende Anfrage wird als storniert markiert und aus der Warteschlange entfernt. Sie können jederzeit eine neue Anfrage einreichen.",
+    "cancelFailed": "Anfrage konnte nicht storniert werden.",
+    "cancelledTitle": "Anfrage storniert",
+    "cancelledDescription": "Sie haben diese Anfrage vor der Bearbeitung storniert. Es wurde keine Instanz erstellt.",
+    "dismiss": "Ausblenden",
+    "dismissFailed": "Konnte nicht ausgeblendet werden.",
+    "rejectionReason": "Angegebener Grund",
+    "saveChanges": "Änderungen speichern",
+    "billingVatNumber": "MWST-Nummer",
+    "billingVatHelp": "Ihre registrierte MWST-Nummer. Falls Ihre Firma von der MWST befreit ist, leer lassen und in den Notizen erläutern.",
+    "billingNotesPlaceholderPersonal": "Was wir wissen sollten — bevorzugte Zahlungsart, Rechnungsreferenz, etc."
   },
   "dashboard": {
     "title": "Dashboard",
@@ -94,7 +131,16 @@
     "noInstance": "Noch keine Instanz bereitgestellt.",
     "comingSoon": "Detailansicht folgt in Session 6.2",
     "noInstanceDescription": "Richten Sie Ihre KI-Assistenten-Instanz ein, um mit PieCed IT zu starten.",
-    "manage": "Instanz & Pakete verwalten"
+    "manage": "Instanz & Pakete verwalten",
+    "instances": "Ihre Instanzen",
+    "inflightRequests": "Laufende Anfragen",
+    "createInstance": "Neue Instanz erstellen",
+    "createInstanceDescription": "Eine weitere KI-Assistent-Instanz für Ihre Organisation bereitstellen. Die Anfrage wird von einem Administrator geprüft, bevor die Instanz erstellt wird.",
+    "noAccessNoInstances": "Ihre Organisation hat noch keine Instanzen. Bitte bitten Sie den Eigentümer der Organisation, eine einzurichten.",
+    "noAssignmentsTitle": "Keine Instanzen zugewiesen",
+    "noAssignmentsDescription": "Ihre Organisation verfügt über Instanzen, aber Sie haben keinen Zugriff darauf erhalten. Bitten Sie den Eigentümer Ihrer Organisation, Sie einer Instanz zuzuweisen.",
+    "noInstancesYetTitle": "Noch keine Instanzen",
+    "noInstancesYetDescription": "Ihre Organisation verfügt noch über keine Instanzen. Bitten Sie den Eigentümer Ihrer Organisation, eine einzurichten."
   },
   "tenantDetail": {
     "agent": "Agent",
@@ -102,7 +148,36 @@
     "workspaceFiles": "Workspace-Dateien",
     "notFound": "Tenant nicht gefunden.",
     "usage": "Nutzung & Kosten",
-    "provisioned": "Bereitgestellt"
+    "provisioned": "Bereitgestellt",
+    "assignedUsers": "Zugewiesene Benutzer",
+    "subscriptionTitle": "Abonnement",
+    "subscriptionDescriptionActive": "Kündigen Sie Ihr Abonnement, wenn Sie diesen Assistenten nicht mehr benötigen. Ihre Daten bleiben erhalten und Sie können jederzeit wieder aktivieren.",
+    "subscriptionDescriptionSuspended": "Ihr Abonnement ist gekündigt. Aktivieren Sie es wieder, um den Assistenten online zu bringen.",
+    "cancelSubscription": "Abonnement kündigen",
+    "cancelSubscriptionConfirm": "Ja, kündigen",
+    "resumeSubscription": "Abonnement reaktivieren",
+    "cancelConfirmTitle": "Dieses Abonnement kündigen?",
+    "cancelConfirmDescription": "Ihr Assistent wird nicht mehr verfügbar sein. Sie können jederzeit reaktivieren — Ihre Daten bleiben erhalten.",
+    "cancelConfirmBullet1": "Workspace-Dateien (SOUL.md, AGENTS.md) bleiben erhalten",
+    "cancelConfirmBullet2": "Paket-Anmeldedaten bleiben gespeichert",
+    "cancelConfirmBullet3": "Rechnungsdaten bleiben gespeichert",
+    "subscriptionUpdateFailed": "Abonnement konnte nicht aktualisiert werden.",
+    "suspendedTitle": "Abonnement gekündigt",
+    "suspendedDescription": "Ihr Assistent ist pausiert. Konfiguration und Daten bleiben erhalten. Verwenden Sie die Reaktivierungs-Schaltfläche unten auf dieser Seite, um ihn wieder online zu bringen.",
+    "requestReactivation": "Reaktivierung anfragen",
+    "requestReactivationConfirmTitle": "Reaktivierung anfragen?",
+    "requestReactivationConfirmDescription": "Ein Administrator prüft Ihre Anfrage und reaktiviert Ihren Tenant. Sie erhalten eine E-Mail, sobald die Anfrage genehmigt wurde.",
+    "requestReactivationConfirm": "Anfrage senden",
+    "cancelResumeRequest": "Anfrage stornieren",
+    "resumeRequestPendingTitle": "Reaktivierungsanfrage ausstehend",
+    "resumeRequestPendingDescription": "Eingereicht {when}. Ein Administrator wird die Anfrage in Kürze prüfen.",
+    "resumeRequestPendingNoteAdmin": "Ein Inhaber hat eine Reaktivierung angefragt; Sie können direkt oben fortfahren oder die Anfrage in der Admin-Warteschlange bearbeiten.",
+    "cancelConfirmRetentionWarning": "Ihre Daten bleiben nach der Kündigung 60 Tage lang erhalten. Danach werden alle Tenant-Daten – Konfiguration, Geheimnisse, Konversationen und Dateien – endgültig gelöscht.",
+    "suspendedSince": "Gekündigt am {date}",
+    "suspendedDeletionIn": "Datenlöschung in {days, plural, one {# Tag} other {# Tagen}} ({date})",
+    "suspendedDeletionImminent": "Daten werden jetzt gelöscht",
+    "requestReactivationNoteLabel": "Notiz an unser Team",
+    "requestReactivationNotePlaceholder": "Alles, was unser Team wissen sollte – z. B. Grund der Reaktivierung, Dringlichkeit usw."
   },
   "usage": {
     "inputTokens": "Input-Tokens",
@@ -170,7 +245,9 @@
     },
     "documentProcessing": {
       "description": "Aktivieren Sie Dokumentenverarbeitung, Zusammenfassung und Extraktion."
-    }
+    },
+    "statusEnabled": "aktiviert",
+    "statusDisabled": "deaktiviert"
   },
   "admin": {
     "title": "Plattform-Admin",
@@ -240,7 +317,9 @@
     "loadingHealth": "Statusdaten werden geladen…",
     "statusHealthy": "OK",
     "statusDown": "Ausgefallen",
-    "spendChf": "Kosten (CHF)"
+    "spendChf": "Kosten (CHF)",
+    "resumeRequestBadge": "Wieder",
+    "resumeRequestTooltip": "Reaktivierungsanfrage für einen bestehenden Tenant. Bei Genehmigung wird der Tenant wieder aktiviert; keine Provisionierung läuft."
   },
   "channelUsers": {
     "title": "Autorisierte Benutzer",
@@ -253,5 +332,132 @@
     "telegramIdHelp": "So finden Sie Ihre Telegram-Benutzer-ID:\n1. Öffnen Sie Telegram und schreiben Sie @userinfobot\n2. Der Bot antwortet sofort mit Ihrer numerischen ID\n3. Geben Sie diese Nummer hier ein",
     "discordIdHelp": "So finden Sie Ihre Discord-Benutzer-ID:\n1. Aktivieren Sie den Entwicklermodus in den Discord-Einstellungen (Erweitert)\n2. Rechtsklick auf Ihren Namen → Benutzer-ID kopieren\n3. Geben Sie diese Nummer hier ein",
     "emailIdHelp": "Geben Sie die E-Mail-Adresse ein, die zur Interaktion mit dem Assistenten autorisiert werden soll."
+  },
+  "team": {
+    "title": "Team",
+    "description": "Verwalten Sie die Mitglieder Ihrer Organisation. Laden Sie Kollegen ein und weisen Sie sie Instanzen zu.",
+    "inviteSectionTitle": "Mitglied einladen",
+    "membersSectionTitle": "Mitglieder",
+    "noMembers": "Noch keine Mitglieder.",
+    "you": "Sie",
+    "noRole": "keine Rolle",
+    "givenName": "Vorname",
+    "familyName": "Nachname",
+    "email": "E-Mail",
+    "role": "Rolle",
+    "roleUser": "Benutzer (nur Lesezugriff, muss Instanzen zugewiesen werden)",
+    "roleOwner": "Eigentümer (Vollzugriff auf alle Instanzen)",
+    "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.",
+    "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…",
+    "noneAssigned": "Dieser Instanz sind noch keine Benutzer zugewiesen.",
+    "noCandidates": "Keine Teammitglieder verfügbar zum Zuweisen. Laden Sie zuerst Benutzer auf der Team-Seite ein.",
+    "pickUser": "Benutzer auswählen…",
+    "assign": "Zuweisen",
+    "revoke": "Entfernen"
+  },
+  "countries": {
+    "CH": "Schweiz",
+    "DE": "Deutschland",
+    "AT": "Österreich",
+    "FR": "Frankreich",
+    "IT": "Italien",
+    "LI": "Liechtenstein"
+  },
+  "phase": {
+    "Pending": "Ausstehend",
+    "Provisioning": "Wird bereitgestellt",
+    "Running": "Aktiv",
+    "Ready": "Bereit",
+    "Suspended": "Pausiert",
+    "Error": "Fehler",
+    "Deleting": "Wird gelöscht",
+    "Reconfiguring": "Wird neu konfiguriert"
+  },
+  "warnings": {
+    "oneTooltip": "1 Warnung",
+    "manyTooltip": "{count} Warnungen"
+  },
+  "settings": {
+    "title": "Einstellungen",
+    "subtitle": "Organisationsweite Konfiguration, die für alle Ihre Tenants gilt.",
+    "billingTitle": "Abrechnung",
+    "billingDescription": "Adresse, MWST-Nummer und Rechnungs-E-Mail für alle Ihre Tenants.",
+    "nothingForYou": "Für Ihre Rolle gibt es hier noch nichts. Inhaber können Organisationseinstellungen verwalten.",
+    "billingDescriptionPersonal": "Adresse und Rechnungs-E-Mail für alle Ihre Tenants."
+  },
+  "settingsBilling": {
+    "title": "Abrechnung",
+    "subtitle": "Wird beim ersten Onboarding einmalig erfasst und für jeden Tenant Ihrer Organisation wiederverwendet. Aktualisieren Sie hier, wenn sich Ihre Abrechnungsdaten ändern.",
+    "companyName": "Firmenname",
+    "streetAddress": "Strasse",
+    "postalCode": "PLZ",
+    "city": "Ort",
+    "country": "Land",
+    "vatNumber": "MWST-Nummer",
+    "vatHelp": "Ihre registrierte MWST-Nummer (z. B. CHE-123.456.789 MWST für die Schweiz).",
+    "billingEmail": "Rechnungs-E-Mail",
+    "billingEmailHelp": "An diese Adresse werden Rechnungen und Abrechnungskommunikation gesendet.",
+    "notes": "Notizen",
+    "notesPlaceholder": "Alles, was die Buchhaltung wissen muss – MWST-Befreiung, besondere Rechnungsstellung usw.",
+    "save": "Speichern",
+    "saved": "Gespeichert.",
+    "saveFailed": "Konnte nicht gespeichert werden. Bitte erneut versuchen.",
+    "lastUpdated": "Zuletzt aktualisiert {when}",
+    "fullName": "Voller Name",
+    "notesPlaceholderPersonal": "Was wir wissen sollten — bevorzugte Zahlungsart, Rechnungsreferenz, etc."
+  },
+  "support": {
+    "title": "Support",
+    "subtitle": "Erstellen Sie ein Ticket, um eine Frage zu stellen, einen Fehler zu melden oder Feedback zu geben. Antworten gehen an Ihre registrierte E-Mail-Adresse.",
+    "titleAdmin": "Support-Warteschlange",
+    "subtitleAdmin": "Tickets aller Kunden, neueste Aktivität zuerst.",
+    "newTicket": "Neues Ticket",
+    "newTicketTitle": "Support-Ticket erstellen",
+    "newTicketSubtitle": "Erzählen Sie uns, was los ist. Je mehr Details, desto schneller können wir helfen.",
+    "empty": "Sie haben noch keine Tickets erstellt.",
+    "emptyAdmin": "Keine Support-Tickets in der Warteschlange.",
+    "fieldCategory": "Kategorie",
+    "fieldTitle": "Titel",
+    "fieldDescription": "Beschreibung",
+    "fieldStatus": "Status",
+    "titlePlaceholder": "Kurze Zusammenfassung Ihres Anliegens",
+    "descriptionPlaceholder": "Beschreiben Sie, was passiert ist, was Sie erwartet haben, und alle Fehlermeldungen.",
+    "descriptionHelp": "Sie können Fehlermeldungen und Logs einfügen. Bitte keine Passwörter oder andere Geheimnisse.",
+    "submitTicket": "Ticket senden",
+    "createFailed": "Ticket konnte nicht erstellt werden. Bitte erneut versuchen.",
+    "category_bug": "Fehler",
+    "category_feature_request": "Feature-Wunsch",
+    "category_question": "Frage",
+    "category_billing": "Abrechnung",
+    "category_other": "Sonstiges",
+    "status_open": "Offen",
+    "status_in_progress": "In Bearbeitung",
+    "status_waiting_for_customer": "Warten auf Ihre Antwort",
+    "status_resolved": "Erledigt",
+    "status_reopened": "Wieder geöffnet",
+    "openedBy": "Eröffnet von {name} am {when}",
+    "authorTagAdmin": "PieCed-Support",
+    "replyLabel": "Antwort hinzufügen",
+    "replyPlaceholder": "Ihre Nachricht…",
+    "replyPlaceholderReopen": "Antwort (dies öffnet das Ticket erneut)…",
+    "sendReply": "Antwort senden",
+    "commentFailed": "Antwort konnte nicht gesendet werden. Bitte erneut versuchen.",
+    "closeTicket": "Als erledigt markieren",
+    "confirmClose": "Dieses Ticket als erledigt markieren? Sie können es später durch eine Antwort wieder öffnen.",
+    "closeFailed": "Ticket konnte nicht geschlossen werden. Bitte erneut versuchen.",
+    "resolvedBanner": "Dieses Ticket ist erledigt. Antworten Sie unten, falls Sie nachfragen möchten — das öffnet es erneut.",
+    "adminControlsTitle": "Admin-Steuerung",
+    "updateFailed": "Änderungen konnten nicht gespeichert werden. Bitte erneut versuchen."
   }
 }

src/messages/en.json

@@ -11,7 +11,11 @@
     "cancel": "Cancel",
     "save": "Save",
     "error": "An error occurred",
-    "register": "Register"
+    "register": "Register",
+    "team": "Team",
+    "settings": "Settings",
+    "optional": "optional",
+    "support": "Support"
   },
   "login": {
     "title": "PieCed Portal",
@@ -19,11 +23,11 @@
     "button": "Continue with ZITADEL",
     "footer": "Hosted on-premises in Switzerland",
     "noAccount": "No account yet?",
-    "register": "Register your company"
+    "register": "Create an account"
   },
   "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",
@@ -35,7 +39,14 @@
     "successTitle": "Registration received",
     "successDescription": "You will receive an invitation email with a link to set your password and verify your email address. Once completed, you can sign in to set up your AI assistant.",
     "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."
+    "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.",
+    "accountTypeLabel": "Account type",
+    "personalCardTitle": "Personal",
+    "personalCardDescription": "For yourself.",
+    "companyCardTitle": "Company",
+    "companyCardDescription": "For your business or team."
   },
   "onboarding": {
     "loading": "Loading status…",
@@ -83,7 +94,33 @@
     "readyTitle": "Your assistant is ready!",
     "readyDescription": "Your AI assistant has been provisioned and is running. You can now manage it from the dashboard.",
     "goToDashboard": "Go to Dashboard",
-    "submittedAt": "Submitted"
+    "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.",
+    "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",
+    "editRequestTitle": "Edit your request",
+    "editRequestDescription": "Adjust the configuration before our team reviews it.",
+    "editRequest": "Edit",
+    "cancelRequest": "Cancel request",
+    "cancelRequestConfirm": "Yes, cancel request",
+    "cancelConfirmRequestTitle": "Cancel this request?",
+    "cancelConfirmRequestDescription": "Your pending request will be marked as cancelled and removed from the review queue. You can submit a new request at any time.",
+    "cancelFailed": "Could not cancel request.",
+    "cancelledTitle": "Request cancelled",
+    "cancelledDescription": "You cancelled this request before it was processed. No instance was created.",
+    "dismiss": "Dismiss",
+    "dismissFailed": "Could not dismiss.",
+    "rejectionReason": "Reason given",
+    "saveChanges": "Save changes",
+    "billingVatNumber": "VAT number",
+    "billingVatHelp": "Your registered VAT identifier. If your company is VAT-exempt, leave blank and explain in the notes field.",
+    "billingNotesPlaceholderPersonal": "Anything we should know — preferred payment method, billing reference, etc."
   },
   "dashboard": {
     "title": "Dashboard",
@@ -94,7 +131,16 @@
     "noInstance": "No instance provisioned yet.",
     "comingSoon": "Detailed view coming in Session 6.2",
     "noInstanceDescription": "Set up your AI assistant instance to get started with PieCed IT.",
-    "manage": "Manage instance & packages"
+    "manage": "Manage instance & packages",
+    "instances": "Your instances",
+    "inflightRequests": "In-flight requests",
+    "createInstance": "Create new instance",
+    "createInstanceDescription": "Provision an additional AI assistant instance for your organization. The request will be reviewed by an administrator before the instance is created.",
+    "noAccessNoInstances": "Your organization doesn't have any instances yet. Please ask the organization owner to set one up.",
+    "noAssignmentsTitle": "No instances assigned",
+    "noAssignmentsDescription": "Your organization has instances, but you haven't been granted access to any of them. Please ask your organization owner to assign you to an instance.",
+    "noInstancesYetTitle": "No instances yet",
+    "noInstancesYetDescription": "Your organization doesn't have any instances yet. Please ask your organization owner to set one up."
   },
   "tenantDetail": {
     "agent": "Agent",
@@ -102,7 +148,36 @@
     "workspaceFiles": "Workspace Files",
     "notFound": "Tenant not found.",
     "usage": "Usage & Spend",
-    "provisioned": "Provisioned"
+    "provisioned": "Provisioned",
+    "assignedUsers": "Assigned users",
+    "subscriptionTitle": "Subscription",
+    "subscriptionDescriptionActive": "Cancel your subscription if you no longer need this assistant. Your data will be preserved and you can resume anytime.",
+    "subscriptionDescriptionSuspended": "Your subscription is cancelled. Resume to bring the assistant back online.",
+    "cancelSubscription": "Cancel subscription",
+    "cancelSubscriptionConfirm": "Yes, cancel",
+    "resumeSubscription": "Resume subscription",
+    "cancelConfirmTitle": "Cancel this subscription?",
+    "cancelConfirmDescription": "Your assistant will become unavailable. You can resume anytime — your data is preserved.",
+    "cancelConfirmBullet1": "Workspace files (SOUL.md, AGENTS.md) are kept",
+    "cancelConfirmBullet2": "Package credentials remain stored",
+    "cancelConfirmBullet3": "Billing information is kept on file",
+    "subscriptionUpdateFailed": "Could not update subscription.",
+    "suspendedTitle": "Subscription cancelled",
+    "suspendedDescription": "Your assistant is paused. Configuration and data are preserved. Use the Resume control at the bottom of this page to bring it back online.",
+    "requestReactivation": "Request reactivation",
+    "requestReactivationConfirmTitle": "Request reactivation?",
+    "requestReactivationConfirmDescription": "An administrator will review your request and reactivate your tenant. You'll be notified by email once it's approved.",
+    "requestReactivationConfirm": "Submit request",
+    "cancelResumeRequest": "Cancel request",
+    "resumeRequestPendingTitle": "Reactivation request pending",
+    "resumeRequestPendingDescription": "Submitted {when}. An administrator will review it shortly.",
+    "resumeRequestPendingNoteAdmin": "An owner has requested reactivation; you can resume directly above or process the request from the admin queue.",
+    "cancelConfirmRetentionWarning": "Your data is preserved for 60 days after cancellation. After that, all tenant data — configuration, secrets, conversations, and files — will be permanently deleted.",
+    "suspendedSince": "Suspended on {date}",
+    "suspendedDeletionIn": "data deletion in {days, plural, one {# day} other {# days}} ({date})",
+    "suspendedDeletionImminent": "data is being deleted now",
+    "requestReactivationNoteLabel": "Note for our team",
+    "requestReactivationNotePlaceholder": "Anything our team should know — e.g. why you want to reactivate, urgency, etc."
   },
   "usage": {
     "inputTokens": "Input Tokens",
@@ -170,7 +245,9 @@
     },
     "documentProcessing": {
       "description": "Enable document parsing, summarization, and extraction."
-    }
+    },
+    "statusEnabled": "enabled",
+    "statusDisabled": "disabled"
   },
   "admin": {
     "title": "Platform Admin",
@@ -240,7 +317,9 @@
     "loadingHealth": "Loading health data…",
     "statusHealthy": "Healthy",
     "statusDown": "Down",
-    "spendChf": "Spend (CHF)"
+    "spendChf": "Spend (CHF)",
+    "resumeRequestBadge": "Resume",
+    "resumeRequestTooltip": "Reactivation request for an existing tenant. Approving will un-suspend the tenant; no provisioning runs."
   },
   "channelUsers": {
     "title": "Authorized Users",
@@ -253,5 +332,132 @@
     "telegramIdHelp": "To find your Telegram user ID:\n1. Open Telegram and message @userinfobot\n2. It instantly replies with your numeric ID\n3. Enter that number here",
     "discordIdHelp": "To find your Discord user ID:\n1. Enable Developer Mode in Discord settings (Advanced)\n2. Right-click your name → Copy User ID\n3. Enter that number here",
     "emailIdHelp": "Enter the email address that should be authorized to interact with the assistant."
+  },
+  "team": {
+    "title": "Team",
+    "description": "Manage members of your organization. Invite colleagues and assign them to instances.",
+    "inviteSectionTitle": "Invite a member",
+    "membersSectionTitle": "Members",
+    "noMembers": "No members yet.",
+    "you": "You",
+    "noRole": "no role",
+    "givenName": "First name",
+    "familyName": "Last name",
+    "email": "Email",
+    "role": "Role",
+    "roleUser": "User (read-only, must be assigned to instances)",
+    "roleOwner": "Owner (full access to all instances)",
+    "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.",
+    "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…",
+    "noneAssigned": "No users are assigned to this instance yet.",
+    "noCandidates": "No team members available to assign. Invite users from the Team page first.",
+    "pickUser": "Select a user…",
+    "assign": "Assign",
+    "revoke": "Remove"
+  },
+  "countries": {
+    "CH": "Switzerland",
+    "DE": "Germany",
+    "AT": "Austria",
+    "FR": "France",
+    "IT": "Italy",
+    "LI": "Liechtenstein"
+  },
+  "phase": {
+    "Pending": "Pending",
+    "Provisioning": "Provisioning",
+    "Running": "Running",
+    "Ready": "Ready",
+    "Suspended": "Suspended",
+    "Error": "Error",
+    "Deleting": "Deleting",
+    "Reconfiguring": "Reconfiguring"
+  },
+  "warnings": {
+    "oneTooltip": "1 warning",
+    "manyTooltip": "{count} warnings"
+  },
+  "settings": {
+    "title": "Settings",
+    "subtitle": "Manage org-level configuration that applies to all your tenants.",
+    "billingTitle": "Billing",
+    "billingDescription": "Address, VAT number, and invoice email used for all your tenants.",
+    "nothingForYou": "There's nothing here for your role yet. Owners can manage org settings.",
+    "billingDescriptionPersonal": "Address and invoice email used for all your tenants."
+  },
+  "settingsBilling": {
+    "title": "Billing",
+    "subtitle": "Captured once at first onboarding and reused for every tenant in your organization. Update here whenever your billing details change.",
+    "companyName": "Company name",
+    "streetAddress": "Street address",
+    "postalCode": "Postal code",
+    "city": "City",
+    "country": "Country",
+    "vatNumber": "VAT number",
+    "vatHelp": "Your registered VAT identifier (e.g. CHE-123.456.789 MWST for Switzerland).",
+    "billingEmail": "Billing email",
+    "billingEmailHelp": "Where invoices and billing communication will be sent.",
+    "notes": "Notes",
+    "notesPlaceholder": "Anything else accounting needs to know — VAT exemption, special invoicing arrangements, etc.",
+    "save": "Save",
+    "saved": "Saved.",
+    "saveFailed": "Could not save. Please try again.",
+    "lastUpdated": "Last updated {when}",
+    "fullName": "Full name",
+    "notesPlaceholderPersonal": "Anything we should know — preferred payment method, billing reference, etc."
+  },
+  "support": {
+    "title": "Support",
+    "subtitle": "Open a ticket to ask a question, report a bug, or share feedback. Replies will be sent to your registered email.",
+    "titleAdmin": "Support queue",
+    "subtitleAdmin": "Tickets across all customers, newest activity first.",
+    "newTicket": "New ticket",
+    "newTicketTitle": "Open a support ticket",
+    "newTicketSubtitle": "Tell us what's going on. The more detail you share, the faster we can help.",
+    "empty": "You haven't opened any tickets yet.",
+    "emptyAdmin": "No support tickets in the queue.",
+    "fieldCategory": "Category",
+    "fieldTitle": "Title",
+    "fieldDescription": "Description",
+    "fieldStatus": "Status",
+    "titlePlaceholder": "Short summary of what you need",
+    "descriptionPlaceholder": "Describe what happened, what you expected, and any error messages you saw.",
+    "descriptionHelp": "You can paste error messages and logs. Don't include passwords or other secrets.",
+    "submitTicket": "Submit ticket",
+    "createFailed": "Could not create ticket. Please try again.",
+    "category_bug": "Bug",
+    "category_feature_request": "Feature request",
+    "category_question": "Question",
+    "category_billing": "Billing",
+    "category_other": "Other",
+    "status_open": "Open",
+    "status_in_progress": "In progress",
+    "status_waiting_for_customer": "Awaiting your reply",
+    "status_resolved": "Resolved",
+    "status_reopened": "Reopened",
+    "openedBy": "Opened by {name} on {when}",
+    "authorTagAdmin": "PieCed support",
+    "replyLabel": "Add a reply",
+    "replyPlaceholder": "Your message…",
+    "replyPlaceholderReopen": "Reply (this will reopen the ticket)…",
+    "sendReply": "Send reply",
+    "commentFailed": "Could not send reply. Please try again.",
+    "closeTicket": "Mark as resolved",
+    "confirmClose": "Mark this ticket as resolved? You can reopen it later by replying.",
+    "closeFailed": "Could not close the ticket. Please try again.",
+    "resolvedBanner": "This ticket is resolved. Reply below if you need to follow up — that will reopen it.",
+    "adminControlsTitle": "Admin controls",
+    "updateFailed": "Could not save changes. Please try again."
   }
 }

src/messages/fr.json

@@ -11,7 +11,11 @@
     "cancel": "Annuler",
     "save": "Enregistrer",
     "error": "Une erreur est survenue",
-    "register": "S'inscrire"
+    "register": "S'inscrire",
+    "team": "Équipe",
+    "settings": "Paramètres",
+    "optional": "facultatif",
+    "support": "Support"
   },
   "login": {
     "title": "Portail PieCed",
@@ -19,11 +23,11 @@
     "button": "Continuer avec ZITADEL",
     "footer": "Hébergé on-premises en Suisse",
     "noAccount": "Pas encore de compte ?",
-    "register": "Enregistrer votre entreprise"
+    "register": "Créer un compte"
   },
   "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",
@@ -35,7 +39,14 @@
     "successTitle": "Inscription reçue",
     "successDescription": "Vous recevrez un e-mail d'invitation avec un lien pour définir votre mot de passe et vérifier votre adresse e-mail. Ensuite, vous pourrez vous connecter et configurer votre assistant IA.",
     "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."
+    "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.",
+    "accountTypeLabel": "Type de compte",
+    "personalCardTitle": "Particulier",
+    "personalCardDescription": "Pour vous.",
+    "companyCardTitle": "Entreprise",
+    "companyCardDescription": "Pour votre entreprise ou équipe."
   },
   "onboarding": {
     "loading": "Chargement du statut…",
@@ -83,7 +94,33 @@
     "readyTitle": "Votre assistant est prêt !",
     "readyDescription": "Votre assistant IA a été mis en service et est actif. Vous pouvez maintenant le gérer depuis le tableau de bord.",
     "goToDashboard": "Aller au tableau de bord",
-    "submittedAt": "Soumis"
+    "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.",
+    "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",
+    "editRequestTitle": "Modifier votre demande",
+    "editRequestDescription": "Ajustez la configuration avant que notre équipe ne l'examine.",
+    "editRequest": "Modifier",
+    "cancelRequest": "Annuler la demande",
+    "cancelRequestConfirm": "Oui, annuler la demande",
+    "cancelConfirmRequestTitle": "Annuler cette demande ?",
+    "cancelConfirmRequestDescription": "Votre demande en attente sera marquée comme annulée et retirée de la file. Vous pouvez soumettre une nouvelle demande à tout moment.",
+    "cancelFailed": "Impossible d'annuler la demande.",
+    "cancelledTitle": "Demande annulée",
+    "cancelledDescription": "Vous avez annulé cette demande avant son traitement. Aucune instance n'a été créée.",
+    "dismiss": "Masquer",
+    "dismissFailed": "Impossible de masquer.",
+    "rejectionReason": "Motif indiqué",
+    "saveChanges": "Enregistrer les modifications",
+    "billingVatNumber": "Numéro de TVA",
+    "billingVatHelp": "Votre identifiant TVA enregistré. Si votre entreprise est exonérée de TVA, laissez vide et précisez dans les notes.",
+    "billingNotesPlaceholderPersonal": "Tout ce que nous devons savoir — moyen de paiement préféré, référence de facturation, etc."
   },
   "dashboard": {
     "title": "Tableau de bord",
@@ -94,7 +131,16 @@
     "noInstance": "Aucune instance provisionnée.",
     "comingSoon": "Vue détaillée à venir dans la Session 6.2",
     "noInstanceDescription": "Configurez votre instance d'assistant IA pour commencer avec PieCed IT.",
-    "manage": "Gérer l'instance et les paquets"
+    "manage": "Gérer l'instance et les paquets",
+    "instances": "Vos instances",
+    "inflightRequests": "Demandes en cours",
+    "createInstance": "Créer une nouvelle instance",
+    "createInstanceDescription": "Provisionner une instance supplémentaire d'assistant IA pour votre organisation. La demande sera examinée par un administrateur avant la création de l'instance.",
+    "noAccessNoInstances": "Votre organisation n'a pas encore d'instances. Demandez au propriétaire de l'organisation d'en configurer une.",
+    "noAssignmentsTitle": "Aucune instance attribuée",
+    "noAssignmentsDescription": "Votre organisation possède des instances, mais aucun accès ne vous a été accordé. Demandez au propriétaire de votre organisation de vous attribuer une instance.",
+    "noInstancesYetTitle": "Pas encore d'instances",
+    "noInstancesYetDescription": "Votre organisation ne possède pas encore d'instances. Demandez au propriétaire de votre organisation d'en configurer une."
   },
   "tenantDetail": {
     "agent": "Agent",
@@ -102,7 +148,36 @@
     "workspaceFiles": "Fichiers workspace",
     "notFound": "Locataire non trouvé.",
     "usage": "Utilisation et coûts",
-    "provisioned": "Provisionné"
+    "provisioned": "Provisionné",
+    "assignedUsers": "Utilisateurs attribués",
+    "subscriptionTitle": "Abonnement",
+    "subscriptionDescriptionActive": "Annulez votre abonnement si vous n'avez plus besoin de cet assistant. Vos données seront conservées et vous pourrez reprendre à tout moment.",
+    "subscriptionDescriptionSuspended": "Votre abonnement est annulé. Reprenez pour remettre l'assistant en ligne.",
+    "cancelSubscription": "Annuler l'abonnement",
+    "cancelSubscriptionConfirm": "Oui, annuler",
+    "resumeSubscription": "Reprendre l'abonnement",
+    "cancelConfirmTitle": "Annuler cet abonnement ?",
+    "cancelConfirmDescription": "Votre assistant sera indisponible. Vous pouvez reprendre à tout moment — vos données sont préservées.",
+    "cancelConfirmBullet1": "Les fichiers de l'espace de travail (SOUL.md, AGENTS.md) sont conservés",
+    "cancelConfirmBullet2": "Les identifiants des packages restent stockés",
+    "cancelConfirmBullet3": "Les informations de facturation sont conservées",
+    "subscriptionUpdateFailed": "Impossible de mettre à jour l'abonnement.",
+    "suspendedTitle": "Abonnement annulé",
+    "suspendedDescription": "Votre assistant est en pause. La configuration et les données sont préservées. Utilisez le contrôle Reprendre en bas de cette page pour le remettre en ligne.",
+    "requestReactivation": "Demander la réactivation",
+    "requestReactivationConfirmTitle": "Demander la réactivation ?",
+    "requestReactivationConfirmDescription": "Un administrateur examinera votre demande et réactivera votre locataire. Vous recevrez un e-mail dès que la demande sera approuvée.",
+    "requestReactivationConfirm": "Envoyer la demande",
+    "cancelResumeRequest": "Annuler la demande",
+    "resumeRequestPendingTitle": "Demande de réactivation en attente",
+    "resumeRequestPendingDescription": "Soumise {when}. Un administrateur l'examinera sous peu.",
+    "resumeRequestPendingNoteAdmin": "Un propriétaire a demandé la réactivation ; vous pouvez reprendre directement ci-dessus ou traiter la demande depuis la file d'attente d'administration.",
+    "cancelConfirmRetentionWarning": "Vos données sont conservées pendant 60 jours après l'annulation. Passé ce délai, toutes les données du locataire — configuration, secrets, conversations et fichiers — seront définitivement supprimées.",
+    "suspendedSince": "Suspendu le {date}",
+    "suspendedDeletionIn": "suppression des données dans {days, plural, one {# jour} other {# jours}} ({date})",
+    "suspendedDeletionImminent": "les données sont en cours de suppression",
+    "requestReactivationNoteLabel": "Note pour notre équipe",
+    "requestReactivationNotePlaceholder": "Tout ce que notre équipe devrait savoir — par exemple, pourquoi vous voulez réactiver, urgence, etc."
   },
   "usage": {
     "inputTokens": "Tokens d'entrée",
@@ -170,7 +245,9 @@
     },
     "documentProcessing": {
       "description": "Activez l'analyse, le résumé et l'extraction de documents."
-    }
+    },
+    "statusEnabled": "activé",
+    "statusDisabled": "désactivé"
   },
   "admin": {
     "title": "Admin plateforme",
@@ -240,7 +317,9 @@
     "loadingHealth": "Chargement des données de santé…",
     "statusHealthy": "OK",
     "statusDown": "Hors service",
-    "spendChf": "Coûts (CHF)"
+    "spendChf": "Coûts (CHF)",
+    "resumeRequestBadge": "Reprise",
+    "resumeRequestTooltip": "Demande de réactivation d'un locataire existant. L'approbation le réactivera ; aucun provisionnement ne s'exécute."
   },
   "channelUsers": {
     "title": "Utilisateurs autorisés",
@@ -253,5 +332,132 @@
     "telegramIdHelp": "Pour trouver votre identifiant Telegram :\n1. Ouvrez Telegram et envoyez un message à @userinfobot\n2. Il répond instantanément avec votre identifiant numérique\n3. Entrez ce numéro ici",
     "discordIdHelp": "Pour trouver votre identifiant Discord :\n1. Activez le mode développeur dans les paramètres Discord (Avancé)\n2. Clic droit sur votre nom → Copier l'identifiant\n3. Entrez ce numéro ici",
     "emailIdHelp": "Entrez l'adresse e-mail qui doit être autorisée à interagir avec l'assistant."
+  },
+  "team": {
+    "title": "Équipe",
+    "description": "Gérez les membres de votre organisation. Invitez des collègues et attribuez-leur des instances.",
+    "inviteSectionTitle": "Inviter un membre",
+    "membersSectionTitle": "Membres",
+    "noMembers": "Aucun membre pour l'instant.",
+    "you": "Vous",
+    "noRole": "aucun rôle",
+    "givenName": "Prénom",
+    "familyName": "Nom de famille",
+    "email": "E-mail",
+    "role": "Rôle",
+    "roleUser": "Utilisateur (lecture seule, doit être affecté à des instances)",
+    "roleOwner": "Propriétaire (accès complet à toutes les instances)",
+    "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é.",
+    "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…",
+    "noneAssigned": "Aucun utilisateur n'est encore attribué à cette instance.",
+    "noCandidates": "Aucun membre de l'équipe disponible pour l'attribution. Invitez d'abord des utilisateurs depuis la page Équipe.",
+    "pickUser": "Sélectionner un utilisateur…",
+    "assign": "Attribuer",
+    "revoke": "Retirer"
+  },
+  "countries": {
+    "CH": "Suisse",
+    "DE": "Allemagne",
+    "AT": "Autriche",
+    "FR": "France",
+    "IT": "Italie",
+    "LI": "Liechtenstein"
+  },
+  "phase": {
+    "Pending": "En attente",
+    "Provisioning": "Mise en service",
+    "Running": "Actif",
+    "Ready": "Prêt",
+    "Suspended": "Suspendu",
+    "Error": "Erreur",
+    "Deleting": "Suppression",
+    "Reconfiguring": "Reconfiguration"
+  },
+  "warnings": {
+    "oneTooltip": "1 avertissement",
+    "manyTooltip": "{count} avertissements"
+  },
+  "settings": {
+    "title": "Paramètres",
+    "subtitle": "Gérez la configuration au niveau de l'organisation, qui s'applique à tous vos locataires.",
+    "billingTitle": "Facturation",
+    "billingDescription": "Adresse, numéro de TVA et e-mail de facturation utilisés pour tous vos locataires.",
+    "nothingForYou": "Il n'y a rien ici pour votre rôle pour le moment. Les propriétaires peuvent gérer les paramètres de l'organisation.",
+    "billingDescriptionPersonal": "Adresse et e-mail de facturation utilisés pour tous vos locataires."
+  },
+  "settingsBilling": {
+    "title": "Facturation",
+    "subtitle": "Saisie une fois lors de l'inscription et réutilisée pour chaque locataire de votre organisation. Mettez à jour ici dès que vos coordonnées de facturation changent.",
+    "companyName": "Nom de l'entreprise",
+    "streetAddress": "Adresse",
+    "postalCode": "Code postal",
+    "city": "Ville",
+    "country": "Pays",
+    "vatNumber": "Numéro de TVA",
+    "vatHelp": "Votre identifiant TVA enregistré (par ex. CHE-123.456.789 TVA pour la Suisse).",
+    "billingEmail": "E-mail de facturation",
+    "billingEmailHelp": "Adresse à laquelle les factures et la communication de facturation seront envoyées.",
+    "notes": "Notes",
+    "notesPlaceholder": "Tout ce que la comptabilité doit savoir – exonération de TVA, modalités de facturation particulières, etc.",
+    "save": "Enregistrer",
+    "saved": "Enregistré.",
+    "saveFailed": "Impossible d'enregistrer. Veuillez réessayer.",
+    "lastUpdated": "Dernière mise à jour {when}",
+    "fullName": "Nom complet",
+    "notesPlaceholderPersonal": "Tout ce que nous devons savoir — moyen de paiement préféré, référence de facturation, etc."
+  },
+  "support": {
+    "title": "Support",
+    "subtitle": "Ouvrez un ticket pour poser une question, signaler un bug ou partager un commentaire. Les réponses seront envoyées à l'adresse e-mail enregistrée.",
+    "titleAdmin": "File d'attente du support",
+    "subtitleAdmin": "Tickets de tous les clients, activité la plus récente en premier.",
+    "newTicket": "Nouveau ticket",
+    "newTicketTitle": "Ouvrir un ticket de support",
+    "newTicketSubtitle": "Dites-nous ce qui se passe. Plus vous donnez de détails, plus nous pouvons aider rapidement.",
+    "empty": "Vous n'avez pas encore ouvert de ticket.",
+    "emptyAdmin": "Aucun ticket de support dans la file d'attente.",
+    "fieldCategory": "Catégorie",
+    "fieldTitle": "Titre",
+    "fieldDescription": "Description",
+    "fieldStatus": "Statut",
+    "titlePlaceholder": "Bref résumé de votre besoin",
+    "descriptionPlaceholder": "Décrivez ce qui s'est passé, ce que vous attendiez et tout message d'erreur observé.",
+    "descriptionHelp": "Vous pouvez coller des messages d'erreur et des logs. Pas de mots de passe ni d'autres secrets.",
+    "submitTicket": "Envoyer le ticket",
+    "createFailed": "Impossible de créer le ticket. Veuillez réessayer.",
+    "category_bug": "Bug",
+    "category_feature_request": "Demande de fonctionnalité",
+    "category_question": "Question",
+    "category_billing": "Facturation",
+    "category_other": "Autre",
+    "status_open": "Ouvert",
+    "status_in_progress": "En cours",
+    "status_waiting_for_customer": "En attente de votre réponse",
+    "status_resolved": "Résolu",
+    "status_reopened": "Rouvert",
+    "openedBy": "Ouvert par {name} le {when}",
+    "authorTagAdmin": "Support PieCed",
+    "replyLabel": "Ajouter une réponse",
+    "replyPlaceholder": "Votre message…",
+    "replyPlaceholderReopen": "Réponse (cela rouvrira le ticket)…",
+    "sendReply": "Envoyer la réponse",
+    "commentFailed": "Impossible d'envoyer la réponse. Veuillez réessayer.",
+    "closeTicket": "Marquer comme résolu",
+    "confirmClose": "Marquer ce ticket comme résolu ? Vous pourrez le rouvrir plus tard en répondant.",
+    "closeFailed": "Impossible de fermer le ticket. Veuillez réessayer.",
+    "resolvedBanner": "Ce ticket est résolu. Répondez ci-dessous si vous avez besoin d'un suivi — cela le rouvrira.",
+    "adminControlsTitle": "Contrôles admin",
+    "updateFailed": "Impossible d'enregistrer les modifications. Veuillez réessayer."
   }
 }

src/messages/it.json

@@ -11,7 +11,11 @@
     "cancel": "Annulla",
     "save": "Salva",
     "error": "Si è verificato un errore",
-    "register": "Registrati"
+    "register": "Registrati",
+    "team": "Team",
+    "settings": "Impostazioni",
+    "optional": "facoltativo",
+    "support": "Supporto"
   },
   "login": {
     "title": "Portale PieCed",
@@ -19,11 +23,11 @@
     "button": "Continua con ZITADEL",
     "footer": "Ospitato on-premises in Svizzera",
     "noAccount": "Non hai ancora un account?",
-    "register": "Registra la tua azienda"
+    "register": "Crea un account"
   },
   "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",
@@ -35,7 +39,14 @@
     "successTitle": "Registrazione ricevuta",
     "successDescription": "Riceverai un'e-mail di invito con un link per impostare la password e verificare il tuo indirizzo e-mail. Dopodiché potrai accedere e configurare il tuo assistente IA.",
     "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."
+    "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.",
+    "accountTypeLabel": "Tipo di account",
+    "personalCardTitle": "Privato",
+    "personalCardDescription": "Per lei.",
+    "companyCardTitle": "Azienda",
+    "companyCardDescription": "Per la sua azienda o team."
   },
   "onboarding": {
     "loading": "Caricamento stato…",
@@ -83,7 +94,33 @@
     "readyTitle": "Il tuo assistente è pronto!",
     "readyDescription": "Il tuo assistente IA è stato attivato ed è operativo. Ora puoi gestirlo dalla dashboard.",
     "goToDashboard": "Vai alla dashboard",
-    "submittedAt": "Inviato"
+    "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.",
+    "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",
+    "editRequestTitle": "Modifica la sua richiesta",
+    "editRequestDescription": "Modifichi la configurazione prima che il nostro team la esamini.",
+    "editRequest": "Modifica",
+    "cancelRequest": "Annulla richiesta",
+    "cancelRequestConfirm": "Sì, annulla la richiesta",
+    "cancelConfirmRequestTitle": "Annullare questa richiesta?",
+    "cancelConfirmRequestDescription": "La sua richiesta in attesa sarà contrassegnata come annullata e rimossa dalla coda di revisione. Può inviare una nuova richiesta in qualsiasi momento.",
+    "cancelFailed": "Impossibile annullare la richiesta.",
+    "cancelledTitle": "Richiesta annullata",
+    "cancelledDescription": "Lei ha annullato questa richiesta prima dell'elaborazione. Nessuna istanza è stata creata.",
+    "dismiss": "Nascondi",
+    "dismissFailed": "Impossibile nascondere.",
+    "rejectionReason": "Motivo indicato",
+    "saveChanges": "Salva modifiche",
+    "billingVatNumber": "Partita IVA",
+    "billingVatHelp": "Il tuo identificativo IVA registrato. Se la tua azienda è esente IVA, lascia vuoto e spiega nelle note.",
+    "billingNotesPlaceholderPersonal": "Qualsiasi cosa dovremmo sapere — metodo di pagamento preferito, riferimento per fatturazione, ecc."
   },
   "dashboard": {
     "title": "Dashboard",
@@ -94,7 +131,16 @@
     "noInstance": "Nessuna istanza attivata.",
     "comingSoon": "Vista dettagliata in arrivo nella Sessione 6.2",
     "noInstanceDescription": "Configura la tua istanza di assistente IA per iniziare con PieCed IT.",
-    "manage": "Gestisci istanza e pacchetti"
+    "manage": "Gestisci istanza e pacchetti",
+    "instances": "Le tue istanze",
+    "inflightRequests": "Richieste in corso",
+    "createInstance": "Crea nuova istanza",
+    "createInstanceDescription": "Effettua il provisioning di un'ulteriore istanza dell'assistente IA per la tua organizzazione. La richiesta sarà esaminata da un amministratore prima della creazione dell'istanza.",
+    "noAccessNoInstances": "La tua organizzazione non ha ancora istanze. Chiedi al proprietario dell'organizzazione di configurarne una.",
+    "noAssignmentsTitle": "Nessuna istanza assegnata",
+    "noAssignmentsDescription": "La tua organizzazione ha delle istanze, ma non ti è stato concesso l'accesso a nessuna di esse. Chiedi al proprietario della tua organizzazione di assegnarti a un'istanza.",
+    "noInstancesYetTitle": "Nessuna istanza ancora",
+    "noInstancesYetDescription": "La tua organizzazione non ha ancora istanze. Chiedi al proprietario della tua organizzazione di configurarne una."
   },
   "tenantDetail": {
     "agent": "Agente",
@@ -102,7 +148,36 @@
     "workspaceFiles": "File workspace",
     "notFound": "Tenant non trovato.",
     "usage": "Utilizzo e costi",
-    "provisioned": "Attivato"
+    "provisioned": "Attivato",
+    "assignedUsers": "Utenti assegnati",
+    "subscriptionTitle": "Abbonamento",
+    "subscriptionDescriptionActive": "Annulli il suo abbonamento se non ha più bisogno di questo assistente. I suoi dati saranno preservati e potrà riprendere in qualsiasi momento.",
+    "subscriptionDescriptionSuspended": "Il suo abbonamento è annullato. Riprenda per riportare l'assistente online.",
+    "cancelSubscription": "Annulla abbonamento",
+    "cancelSubscriptionConfirm": "Sì, annulla",
+    "resumeSubscription": "Riprendi abbonamento",
+    "cancelConfirmTitle": "Annullare questo abbonamento?",
+    "cancelConfirmDescription": "Il suo assistente diventerà non disponibile. Può riprendere in qualsiasi momento — i suoi dati sono preservati.",
+    "cancelConfirmBullet1": "I file del workspace (SOUL.md, AGENTS.md) sono mantenuti",
+    "cancelConfirmBullet2": "Le credenziali dei pacchetti rimangono memorizzate",
+    "cancelConfirmBullet3": "Le informazioni di fatturazione sono mantenute",
+    "subscriptionUpdateFailed": "Impossibile aggiornare l'abbonamento.",
+    "suspendedTitle": "Abbonamento annullato",
+    "suspendedDescription": "Il suo assistente è in pausa. Configurazione e dati sono preservati. Usi il controllo Riprendi in fondo a questa pagina per riportarlo online.",
+    "requestReactivation": "Richiedi riattivazione",
+    "requestReactivationConfirmTitle": "Richiedere la riattivazione?",
+    "requestReactivationConfirmDescription": "Un amministratore esaminerà la tua richiesta e riattiverà il tuo tenant. Riceverai un'email non appena la richiesta sarà approvata.",
+    "requestReactivationConfirm": "Invia richiesta",
+    "cancelResumeRequest": "Annulla richiesta",
+    "resumeRequestPendingTitle": "Richiesta di riattivazione in sospeso",
+    "resumeRequestPendingDescription": "Inviata {when}. Un amministratore la esaminerà a breve.",
+    "resumeRequestPendingNoteAdmin": "Un proprietario ha richiesto la riattivazione; puoi riprendere direttamente sopra o elaborare la richiesta dalla coda di amministrazione.",
+    "cancelConfirmRetentionWarning": "I tuoi dati sono conservati per 60 giorni dopo l'annullamento. Trascorso tale periodo, tutti i dati del tenant — configurazione, segreti, conversazioni e file — verranno eliminati definitivamente.",
+    "suspendedSince": "Sospeso il {date}",
+    "suspendedDeletionIn": "eliminazione dei dati tra {days, plural, one {# giorno} other {# giorni}} ({date})",
+    "suspendedDeletionImminent": "i dati vengono eliminati ora",
+    "requestReactivationNoteLabel": "Nota per il nostro team",
+    "requestReactivationNotePlaceholder": "Qualsiasi cosa il nostro team dovrebbe sapere — ad es. il motivo della riattivazione, l'urgenza, ecc."
   },
   "usage": {
     "inputTokens": "Token di input",
@@ -170,7 +245,9 @@
     },
     "documentProcessing": {
       "description": "Attiva l'analisi, il riassunto e l'estrazione di documenti."
-    }
+    },
+    "statusEnabled": "abilitato",
+    "statusDisabled": "disabilitato"
   },
   "admin": {
     "title": "Admin piattaforma",
@@ -240,7 +317,9 @@
     "loadingHealth": "Caricamento dati di stato…",
     "statusHealthy": "OK",
     "statusDown": "Non disponibile",
-    "spendChf": "Costi (CHF)"
+    "spendChf": "Costi (CHF)",
+    "resumeRequestBadge": "Ripresa",
+    "resumeRequestTooltip": "Richiesta di riattivazione di un tenant esistente. L'approvazione lo riattiverà; non viene eseguito alcun provisioning."
   },
   "channelUsers": {
     "title": "Utenti autorizzati",
@@ -253,5 +332,132 @@
     "telegramIdHelp": "Per trovare il tuo ID Telegram:\n1. Apri Telegram e invia un messaggio a @userinfobot\n2. Risponde istantaneamente con il tuo ID numerico\n3. Inserisci quel numero qui",
     "discordIdHelp": "Per trovare il tuo ID Discord:\n1. Attiva la Modalità sviluppatore nelle impostazioni Discord (Avanzate)\n2. Clic destro sul tuo nome → Copia ID utente\n3. Inserisci quel numero qui",
     "emailIdHelp": "Inserisci l'indirizzo e-mail che deve essere autorizzato a interagire con l'assistente."
+  },
+  "team": {
+    "title": "Team",
+    "description": "Gestisci i membri della tua organizzazione. Invita colleghi e assegnali alle istanze.",
+    "inviteSectionTitle": "Invita un membro",
+    "membersSectionTitle": "Membri",
+    "noMembers": "Nessun membro ancora.",
+    "you": "Tu",
+    "noRole": "nessun ruolo",
+    "givenName": "Nome",
+    "familyName": "Cognome",
+    "email": "E-mail",
+    "role": "Ruolo",
+    "roleUser": "Utente (sola lettura, deve essere assegnato a istanze)",
+    "roleOwner": "Proprietario (accesso completo a tutte le istanze)",
+    "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.",
+    "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…",
+    "noneAssigned": "Nessun utente è ancora assegnato a questa istanza.",
+    "noCandidates": "Nessun membro del team disponibile per l'assegnazione. Invita prima gli utenti dalla pagina Team.",
+    "pickUser": "Seleziona un utente…",
+    "assign": "Assegna",
+    "revoke": "Rimuovi"
+  },
+  "countries": {
+    "CH": "Svizzera",
+    "DE": "Germania",
+    "AT": "Austria",
+    "FR": "Francia",
+    "IT": "Italia",
+    "LI": "Liechtenstein"
+  },
+  "phase": {
+    "Pending": "In attesa",
+    "Provisioning": "In provisioning",
+    "Running": "Attivo",
+    "Ready": "Pronto",
+    "Suspended": "Sospeso",
+    "Error": "Errore",
+    "Deleting": "Eliminazione",
+    "Reconfiguring": "Riconfigurazione"
+  },
+  "warnings": {
+    "oneTooltip": "1 avviso",
+    "manyTooltip": "{count} avvisi"
+  },
+  "settings": {
+    "title": "Impostazioni",
+    "subtitle": "Gestisci la configurazione a livello di organizzazione, valida per tutti i tuoi tenant.",
+    "billingTitle": "Fatturazione",
+    "billingDescription": "Indirizzo, numero di IVA ed e-mail di fatturazione usati per tutti i tuoi tenant.",
+    "nothingForYou": "Al momento non c'è nulla qui per il tuo ruolo. I proprietari possono gestire le impostazioni dell'organizzazione.",
+    "billingDescriptionPersonal": "Indirizzo ed e-mail di fatturazione usati per tutti i tuoi tenant."
+  },
+  "settingsBilling": {
+    "title": "Fatturazione",
+    "subtitle": "Acquisita una sola volta al primo onboarding e riutilizzata per ogni tenant della tua organizzazione. Aggiorna qui ogni volta che i dati di fatturazione cambiano.",
+    "companyName": "Ragione sociale",
+    "streetAddress": "Indirizzo",
+    "postalCode": "CAP",
+    "city": "Città",
+    "country": "Paese",
+    "vatNumber": "Partita IVA",
+    "vatHelp": "Il tuo identificativo IVA registrato (es. CHE-123.456.789 IVA per la Svizzera).",
+    "billingEmail": "E-mail di fatturazione",
+    "billingEmailHelp": "Indirizzo a cui verranno inviate le fatture e le comunicazioni di fatturazione.",
+    "notes": "Note",
+    "notesPlaceholder": "Qualsiasi cosa la contabilità debba sapere — esenzione IVA, modalità di fatturazione particolari, ecc.",
+    "save": "Salva",
+    "saved": "Salvato.",
+    "saveFailed": "Impossibile salvare. Riprova.",
+    "lastUpdated": "Ultimo aggiornamento {when}",
+    "fullName": "Nome completo",
+    "notesPlaceholderPersonal": "Qualsiasi cosa dovremmo sapere — metodo di pagamento preferito, riferimento per fatturazione, ecc."
+  },
+  "support": {
+    "title": "Supporto",
+    "subtitle": "Apri un ticket per fare una domanda, segnalare un bug o condividere un feedback. Le risposte verranno inviate alla tua email registrata.",
+    "titleAdmin": "Coda supporto",
+    "subtitleAdmin": "Ticket di tutti i clienti, attività più recente per prima.",
+    "newTicket": "Nuovo ticket",
+    "newTicketTitle": "Apri un ticket di supporto",
+    "newTicketSubtitle": "Raccontaci cosa succede. Più dettagli ci dai, più velocemente possiamo aiutarti.",
+    "empty": "Non hai ancora aperto ticket.",
+    "emptyAdmin": "Nessun ticket di supporto in coda.",
+    "fieldCategory": "Categoria",
+    "fieldTitle": "Titolo",
+    "fieldDescription": "Descrizione",
+    "fieldStatus": "Stato",
+    "titlePlaceholder": "Breve riassunto della tua richiesta",
+    "descriptionPlaceholder": "Descrivi cosa è successo, cosa ti aspettavi e qualsiasi messaggio d'errore visto.",
+    "descriptionHelp": "Puoi incollare messaggi d'errore e log. Niente password o altri segreti.",
+    "submitTicket": "Invia ticket",
+    "createFailed": "Impossibile creare il ticket. Riprova.",
+    "category_bug": "Bug",
+    "category_feature_request": "Richiesta funzionalità",
+    "category_question": "Domanda",
+    "category_billing": "Fatturazione",
+    "category_other": "Altro",
+    "status_open": "Aperto",
+    "status_in_progress": "In corso",
+    "status_waiting_for_customer": "In attesa della tua risposta",
+    "status_resolved": "Risolto",
+    "status_reopened": "Riaperto",
+    "openedBy": "Aperto da {name} il {when}",
+    "authorTagAdmin": "Supporto PieCed",
+    "replyLabel": "Aggiungi una risposta",
+    "replyPlaceholder": "Il tuo messaggio…",
+    "replyPlaceholderReopen": "Risposta (questo riaprirà il ticket)…",
+    "sendReply": "Invia risposta",
+    "commentFailed": "Impossibile inviare la risposta. Riprova.",
+    "closeTicket": "Segna come risolto",
+    "confirmClose": "Segnare questo ticket come risolto? Potrai riaprirlo in seguito rispondendo.",
+    "closeFailed": "Impossibile chiudere il ticket. Riprova.",
+    "resolvedBanner": "Questo ticket è risolto. Rispondi qui sotto se hai bisogno di un seguito — questo lo riaprirà.",
+    "adminControlsTitle": "Controlli admin",
+    "updateFailed": "Impossibile salvare le modifiche. Riprova."
   }
 }

src/types/index.ts

@@ -5,12 +5,39 @@ export interface ZitadelClaims {
   "urn:zitadel:iam:org:project:roles"?: Record<string, Record<string, string>>;
 }
 
-export type PlatformRole =
-  | "platform_admin"
-  | "platform_operator"
-  | "owner"
-  | "user"
-  | "viewer";
+/**
+ * Platform-level roles, granted to PieCed staff only. Hold the IAM-level
+ * authority to administer the entire installation regardless of which
+ * customer org a request lands on.
+ */
+export type PlatformRole = "platform_admin" | "platform_operator";
+
+/**
+ * Customer-level roles, granted by ZITADEL project authorizations on
+ * each customer org's "OpenClaw Platform" project grant.
+ *
+ * Slice 5 dropped the previously-defined `viewer` role. With the portal
+ * acting purely as a control plane (the assistant itself runs at
+ * separate URLs with their own auth), `user` and `viewer` collapsed
+ * to the same surface — read-only access to instance state and usage.
+ *
+ * - `owner` can mutate (packages, workspace files, channel users,
+ *   instance creation, member invites in Slice 7).
+ * - `user` is read-only in the portal. From Slice 6 onwards `user`
+ *   visibility is also narrowed to assigned tenants only.
+ */
+export type CustomerRole = "owner" | "user";
+
+/** Union of all roles a JWT can carry. */
+export type Role = PlatformRole | CustomerRole;
+
+/**
+ * @deprecated Use {@link Role} for the union, or {@link PlatformRole}
+ *             / {@link CustomerRole} when you mean a specific subset.
+ *             Kept as a re-export only so existing imports don't
+ *             explode in mid-migration commits.
+ */
+export type LegacyPlatformRole = Role;
 
 export interface SessionUser {
   id: string;
@@ -18,8 +45,25 @@ export interface SessionUser {
   email: string;
   orgId: string;
   orgName: string;
-  roles: PlatformRole[];
+  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)
@@ -34,7 +78,15 @@ export interface PiecedTenantSpec {
 }
 
 export interface PiecedTenantStatus {
-  phase: "Pending" | "Provisioning" | "Running" | "Ready" | "Error" | "Deleting";
+  phase:
+    | "Pending"
+    | "Provisioning"
+    | "Running"
+    | "Ready"
+    | "Reconfiguring"
+    | "Suspended"
+    | "Error"
+    | "Deleting";
   message?: string;
   observedGeneration?: number;
   /**
@@ -51,6 +103,31 @@ export interface PiecedTenantStatus {
   litellmKeyAlias?: string;
   tenantNamespace?: string;
   enabledPackages?: string[];
+  /**
+   * RFC3339 timestamp of when the tenant first transitioned to
+   * suspended (Bug 37). Stamped by the operator on the first reconcile
+   * with `spec.suspend=true` and cleared when the tenant resumes. Used
+   * by the portal to render the "deleted in N days" countdown in the
+   * suspended banner. The retention policy is 60 days from this
+   * timestamp; see operator's `retentionAfterSuspend` constant for the
+   * authoritative value.
+   */
+  suspendedAt?: string;
+  /**
+   * Non-fatal issues from downstream resources surfaced by the operator
+   * (e.g. an OpenClawInstance sub-condition reporting failure). The
+   * tenant is still usable — these are informational, rendered as a
+   * warning badge alongside the phase.
+   *
+   * `source` is "<Kind>/<ConditionType>" e.g. "OpenClawInstance/SkillPacksReady".
+   * `message` is shown in the tooltip when the user hovers the badge.
+   */
+  warnings?: Array<{
+    source: string;
+    reason?: string;
+    message?: string;
+    since?: string;
+  }>;
   conditions?: Array<{
     type: string;
     status: string;
@@ -67,6 +144,15 @@ export interface PiecedTenant {
     name: string;
     namespace?: string;
     creationTimestamp?: string;
+    /**
+     * Set by the API server when something issues a Delete on the CR.
+     * The CR continues to exist while finalizers run cleanup; once
+     * they all remove themselves, the API server permanently removes
+     * the CR. Used by the portal's status sync to detect tenants
+     * being torn down — the customer should see "Deleted" rather
+     * than "Ready" while the cleanup runs.
+     */
+    deletionTimestamp?: string;
     labels?: Record<string, string>;
     annotations?: Record<string, string>;
   };
@@ -83,11 +169,24 @@ export interface UsageSummary {
 
 // Registration
 export interface RegistrationInput {
-  companyName: string;
+  /**
+   * Required for company registrations. Ignored when `isPersonal` is true —
+   * the server then generates an opaque ZITADEL org name of the form
+   * `personal-{8hex}` (see `lib/personal-org.ts::generatePersonalOrgName`).
+   */
+  companyName?: string;
   givenName: string;
   familyName: string;
   email: string;
   preferredLanguage?: string;
+  /**
+   * Slice 4 + Bug 9: when true, registration creates a personal account
+   * (one person, no company). Domain-uniqueness check is skipped, the
+   * ZITADEL org is named `personal-{8hex}` (opaque, collision-free),
+   * the user's display name lives only on the user record, and
+   * subsequent tenants are named with the `p-{requestId[:8]}` convention.
+   */
+  isPersonal?: boolean;
 }
 
 // Billing address
@@ -97,6 +196,41 @@ export interface BillingAddress {
   city?: string;
   postalCode?: string;
   country?: string;
+  /**
+   * VAT identifier. Required for new submissions (Bug 35); older
+   * tenant_requests rows in the audit table may have this absent.
+   */
+  vatNumber?: string;
+}
+
+/**
+ * Org-scoped billing record (Bug 35). One per ZITADEL org. Captured
+ * during the first tenant request, editable afterwards via the
+ * /settings/billing page. All future tenant requests in the same org
+ * reuse this without prompting again.
+ *
+ * Personal orgs (`isPersonal=true` in their context) currently don't
+ * fill this in — the wizard skips the step and the onboarding
+ * endpoint doesn't enforce it. If they later want billing on file
+ * (e.g. for invoices), they can fill the settings page manually.
+ *
+ * `vatNumber` is required for company orgs at write time, optional
+ * for personal. The API enforces this; the type itself keeps it
+ * optional because it's nullable in the DB and may be unset for
+ * personal orgs.
+ */
+export interface OrgBilling {
+  zitadelOrgId: string;
+  companyName: string;
+  streetAddress: string;
+  postalCode: string;
+  city: string;
+  country: string;
+  vatNumber?: string | null;
+  billingEmail: string;
+  notes?: string | null;
+  createdAt: string;
+  updatedAt: string;
 }
 
 export type TenantRequestStatus =
@@ -105,6 +239,7 @@ export type TenantRequestStatus =
   | "provisioning" // PiecedTenant CR created, operator reconciling
   | "active" // Tenant running
   | "rejected" // Admin rejected
+  | "cancelled" // Customer cancelled before admin acted on it (Bug 6)
   | "deleted"; // Tenant was deleted by admin
 
 export interface TenantRequest {
@@ -112,6 +247,13 @@ export interface TenantRequest {
   zitadelOrgId: string;
   zitadelUserId: string;
   companyName: string;
+  /**
+   * Customer-chosen human label per instance (e.g. "Production", "Dev").
+   * Optional. When set, used as the K8s `displayName` so the customer's
+   * dashboard distinguishes their instances. When null, the company
+   * name is used.
+   */
+  instanceName?: string | null;
   contactName: string;
   contactEmail: string;
   agentName: string;
@@ -124,16 +266,137 @@ export interface TenantRequest {
   adminNotes?: string;
   tenantName?: string;
   encryptedSecrets?: Buffer | null;
+  /**
+   * Slice 4: true for personal accounts. Drives CR-naming (`p-{suffix}`
+   * vs `{slug}-{suffix}` in `lib/tenant-naming.ts`), display-name
+   * fallback (contact name vs company name), and exclusion from the
+   * domain-uniqueness check on subsequent registrations.
+   */
+  isPersonal?: boolean;
+  /**
+   * Feature 6: free-form note from the customer, attached at request
+   * creation time. Currently used by resume requests (customer's
+   * explanation of why they want reactivation); kept optional and
+   * generic so future flows can reuse without schema work.
+   */
+  customerNotes?: string | null;
+  /**
+   * Bug 13: when set, the customer has explicitly dismissed a rejected
+   * request from their dashboard. Used by `listActiveTenantRequestsByOrgId`
+   * to keep showing rejected rows until they're dismissed (so a customer
+   * who wasn't online when the rejection happened still sees it on next
+   * login). Always null for non-rejected statuses.
+   */
+  dismissedAt?: string | null;
+  /**
+   * Bug 37a: discriminator between provision (initial tenant creation,
+   * the original purpose of this table) and resume (admin-gated
+   * reactivation of a suspended tenant). Default 'provision' for all
+   * pre-existing rows; resume rows have most provision fields null
+   * but tenant_name set to the tenant being requested.
+   *
+   * Optional on the TS type so provision-only callers (like the
+   * onboarding wizard's create flow) don't need to know about resume
+   * requests. The DB column is NOT NULL DEFAULT 'provision', so rows
+   * loaded via `mapRow` always have a value populated.
+   */
+  requestType?: "provision" | "resume";
   createdAt: string;
   updatedAt: string;
 }
 
 // Onboarding wizard input
 export interface OnboardingInput {
+  /**
+   * Customer's human label for this instance. Optional; when blank, the
+   * company name is used as the display name. Required when an org
+   * already has at least one approved instance, to avoid two
+   * indistinguishable rows on the dashboard — that constraint is
+   * enforced server-side, not by the type.
+   */
+  instanceName?: string;
   agentName: string;
   soulMd?: string;
   agentsMd?: string;
   packages?: string[];
-  billingAddress: BillingAddress;
+  /**
+   * Bug 35: optional at the type level because the wizard skips the
+   * billing step entirely when the org already has an `org_billing`
+   * record. The onboarding API enforces "billing must be resolved by
+   * the end" — either from `org_billing` lookup or from this field —
+   * via runtime checks; the type just allows both paths.
+   */
+  billingAddress?: BillingAddress;
   billingNotes?: string;
 }
+
+// ---------------------------------------------------------------------------
+// Feature 5: support tickets (lightweight customer support / feedback channel)
+// ---------------------------------------------------------------------------
+
+export type SupportTicketCategory =
+  | "bug"
+  | "feature_request"
+  | "question"
+  | "billing"
+  | "other";
+
+export type SupportTicketStatus =
+  | "open" // new, awaiting first admin response
+  | "in_progress" // admin is actively working on it
+  | "waiting_for_customer" // admin replied, customer's turn
+  | "resolved" // closed
+  | "reopened"; // customer replied to a resolved ticket → flipped back
+
+/**
+ * Tickets are scoped strictly per-user, not per-org. A customer's
+ * coworkers (even within the same org) cannot see each other's
+ * tickets — confirmed design choice from Feature 5 discussion. This
+ * is enforced both at the DB query layer (filter by zitadel_user_id)
+ * and at the API layer (authorization checks).
+ *
+ * `contactEmail` and `contactName` are frozen at creation time so
+ * the email-thread reply addresses still work after a user changes
+ * their display name or email in ZITADEL. Standard ticketing pattern.
+ */
+export interface SupportTicket {
+  id: string;
+  zitadelOrgId: string;
+  zitadelUserId: string;
+  title: string;
+  description: string;
+  category: SupportTicketCategory;
+  status: SupportTicketStatus;
+  contactEmail: string;
+  contactName: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export type SupportTicketCommentAuthorKind = "customer" | "admin";
+
+/**
+ * Comment on a support ticket. Public (visible to both ends) — no
+ * internal-notes feature in v1. `authorKind` drives styling (customer
+ * vs admin bubble) and which email goes out.
+ *
+ * `authorName` is frozen at write time. If a user later changes their
+ * display name, old comments still render with the name they had at
+ * the time of writing — which is what you usually want for an audit
+ * trail of conversations.
+ */
+export interface SupportTicketComment {
+  id: string;
+  ticketId: string;
+  authorUserId: string;
+  authorName: string;
+  authorKind: SupportTicketCommentAuthorKind;
+  body: string;
+  createdAt: string;
+}
+
+/** Detail view: the ticket plus its full chronological comment thread. */
+export interface SupportTicketDetail {
+  ticket: SupportTicket;
+  comments: SupportTicketComment[];
+}