feat: portal redesign, pricing catalog, partner-staff invites

- portal: new admin/ and partner/ surfaces with full component library
  (AppLauncher, Avatar, Badge, Card, Modal, Tabs, etc.), composables,
  layouts, partner-routing middleware, and supporting server APIs
- pricing: Price schema/module with operator CRUD, pricing.vue catalog UI,
  Subscription extended with cycle/currency/perSeatAmount/seats snapshots
  for stable MRR aggregation
- partner staff: User.partnerId, invite-partner-user DTO and flow,
  /partners/:slug/users endpoints, InvitePartnerUserModal, shared
  dezky-partner-staff Authentik group
- /me: partner-aware endpoint returning user + partner context so portal
  can route between end-user and partner-admin surfaces
- tenant: seats field for portfolio displays and future MRR calculations
- operator: pricing page, signed-out page, useMe/useToast composables,
  ToastStack

apps/portal/components/CustomerModeBanner.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+// Banner shown at top of viewport when a partner admin is acting inside a
+// specific customer org. Distinct color (indigo — partner mode is normal
+// operating mode, not danger). Persistent until partner exits.
+
+import { customers } from '~/data/customers'
+
+const partnerMode = usePartnerMode()
+const router = useRouter()
+
+const activeCustomer = computed(() =>
+  customers.find((c) => c.id === partnerMode.activeCustomerId.value) || null,
+)
+
+onMounted(() => partnerMode.hydrate())
+
+function exit() {
+  partnerMode.exit()
+  router.push('/partner/customers')
+}
+</script>
+
+<template>
+  <div v-if="partnerMode.isActive.value && activeCustomer" class="banner">
+    <span class="dot" />
+    <div class="meta">
+      <Mono>Partner view</Mono>
+      <span class="text">managing <strong>{{ activeCustomer.name }}</strong> · actions are attributed to NordicMSP in the customer's audit log</span>
+    </div>
+    <button class="exit" @click="exit">
+      <UiIcon name="logout" :size="12" />
+      <span>Exit partner view</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: linear-gradient(to right, rgba(63, 107, 255, 0.18), rgba(63, 107, 255, 0.08));
+  border-bottom: 1px solid rgba(63, 107, 255, 0.36);
+  padding: 8px 16px;
+  font-size: 12.5px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #4D8BE8;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 4px rgba(77, 139, 232, 0.18);
+}
+
+.meta { flex: 1; display: flex; align-items: center; gap: 12px; color: var(--text); min-width: 0; }
+.text { color: var(--text-dim); }
+.text strong { color: var(--text); font-weight: 600; }
+
+.exit {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  cursor: pointer;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.exit:hover { background: var(--surface); }
+</style>