feat: setup and roles

app/pages/settings/profile.vue

@@ -6,9 +6,15 @@ const AVATAR_SIZE = 256;
 const MAX_SOURCE_SIZE = 10 * 1024 * 1024;
 const ACCEPTED_TYPES = ['image/png', 'image/jpeg', 'image/webp'];
 
-const { user, updateProfile } = useAuth();
+const { user, isAdmin, updateProfile } = useAuth();
 const { openDialog } = useDialog();
 
+// same tinted pill as the states that are on in Security
+const ACCENT_PILL_STYLE = {
+    backgroundColor: 'color-mix(in srgb, var(--color-accent) 20%, transparent)',
+    borderColor: 'color-mix(in srgb, var(--color-accent) 50%, transparent)',
+};
+
 const fileInput = ref<HTMLInputElement | null>(null);
 const avatarBusy = ref(false);
 const avatarError = ref('');
@@ -239,12 +245,24 @@ const memberSince = computed(() => {
                 </span>
             </div>
 
+            <div class="flex flex-row flex-wrap items-center justify-between gap-x-16 gap-y-2">
+                <span class="whitespace-nowrap">Role</span>
+                <div class="flex-1 min-w-60 max-w-120 flex items-center gap-2.5">
+                    <span v-if="isAdmin"
+                        class="text-[13px] font-medium px-2 py-0.5 rounded-md border text-[var(--text-primary)]"
+                        :style="ACCENT_PILL_STYLE">Admin</span>
+                    <span v-else
+                        class="text-[13px] font-medium px-2 py-0.5 rounded-md border border-[var(--color-border-active)] text-[var(--text-secondary)]">User</span>
+                </div>
+            </div>
+
             <section
                 class="flex flex-wrap items-center justify-between gap-3 mt-3 p-4 rounded-lg border border-red-400/35">
                 <div class="flex flex-col gap-0.5 flex-1 min-w-60">
                     <h2 class="text-[15px] font-semibold">Delete account</h2>
                     <p class="text-[13px] leading-snug text-[var(--text-secondary)]">
                         Permanently deletes your agents, topics, and api keys from this instance.
+                        <template v-if="isAdmin">The last remaining admin can't delete their account.</template>
                     </p>
                 </div>
                 <button type="button" @click="openDialog(DialogType.DeleteAccount)"