botmux 2.85.1 → 2.86.0

package/dist/dashboard/web/roles.js

@@ -1,23 +1,48 @@
-// Roles page: hierarchical group → bot role editor.
-// Displays groups as collapsible sections with bots nested inside.
-// Each bot has its own per-group role definition selectable for editing.
+// Roles page: group role editor + reusable role profile management.
 import { botAvatarHtml, escapeHtml, loadNameMaps, loadingHtml, t } from './ui.js';
+import { hasExplicitChatRole, summarizeGroupProfileMatches, } from './role-profile-match.js';
 const MAX_ROLE_BYTES = 4096;
+const PROFILE_ID_RE = /^[A-Za-z0-9._-]{1,64}$/;
 let cache = [];
+let allBots = [];
+let profiles = [];
+let profileEntries = [];
+let groupProfileEntriesById = new Map();
+let groupEffectiveRolesByBot = new Map();
+let groupProfileContextLoaded = false;
+let activeTab = 'groups';
 let selectedGroupId = null;
 let selectedBotId = null;
 let editingContent = '';
 let expandedGroups = new Set();
-function pageHtml() {
+let selectedProfileId = null;
+let selectedProfileBotId = null;
+let profileEditingContent = '';
+let selectedApplyGroupId = null;
+function isValidProfileId(profileId) {
+    return PROFILE_ID_RE.test(profileId) && profileId !== '.' && profileId !== '..';
+}
+function hashChatId() {
+    const [, query = ''] = location.hash.split('?');
+    const chatId = new URLSearchParams(query).get('chatId')?.trim();
+    return chatId || null;
+}
+function pageHtml(tab) {
+    const isProfiles = tab === 'profiles';
     return `<section class="page roles-page">
-<div class="page-heading">
+<div class="page-heading roles-heading">
   <div>
     <p class="eyebrow">${t('nav.roles')}</p>
     <h1>${t('roles.title')}</h1>
     <p>${t('roles.subtitle')}</p>
   </div>
 </div>
-<div class="roles-layout">
+<nav class="wf-subnav roles-subnav">
+  <a href="#/roles" ${isProfiles ? '' : 'class="active"'}>${t('roles.tabGroups')}</a>
+  <a href="#/roles/profile" ${isProfiles ? 'class="active"' : ''}>${t('roles.tabProfiles')}</a>
+</nav>
+
+<div id="roles-by-group-view" class="roles-layout" ${isProfiles ? 'hidden' : ''}>
   <div class="roles-tree-panel">
     <div class="roles-tree-header">
       <input type="search" id="roles-search" placeholder="${t('roles.search')}" />
@@ -48,11 +73,34 @@ function pageHtml() {
     </div>
   </div>
 </div>
+
+<div id="roles-profiles-view" class="roles-layout roles-profiles-layout" ${isProfiles ? '' : 'hidden'}>
+  <div class="roles-tree-panel">
+    <div class="roles-tree-header roles-profile-create">
+      <input type="text" id="roles-profile-id" placeholder="${t('roles.profileIdPlaceholder')}" maxlength="64" />
+      <button type="button" id="roles-profile-select">${t('roles.openProfile')}</button>
+    </div>
+    <div class="roles-tree-header">
+      <input type="search" id="roles-profile-search" placeholder="${t('roles.profileSearch')}" />
+      <button type="button" id="roles-profile-refresh">${t('roles.refresh')}</button>
+    </div>
+    <div id="roles-profile-list" class="roles-tree"></div>
+  </div>
+  <div class="roles-editor-panel">
+    <div id="roles-profile-empty" class="roles-editor-empty">${t('roles.profileSelectHint')}</div>
+    <div id="roles-profile-detail" class="roles-editor-form roles-profile-detail" style="display:none"></div>
+  </div>
+</div>
 </section>`;
 }
 async function loadGroups() {
     const r = await fetch('/api/groups');
     const data = await r.json();
+    allBots = (data.bots ?? []).map((b) => ({
+        larkAppId: b.larkAppId,
+        botName: b.botName ?? b.larkAppId,
+        botAvatarUrl: b.botAvatarUrl,
+    }));
     cache = (data.chats ?? []).map((c) => ({
         chatId: c.chatId,
         name: c.name ?? c.chatId,
@@ -65,10 +113,72 @@ async function loadGroups() {
         })),
     }));
 }
+async function loadProfiles() {
+    const r = await fetch('/api/role-profiles');
+    const data = await r.json();
+    profiles = data.profiles ?? [];
+}
+async function loadProfileEntries(profileId) {
+    const r = await fetch(`/api/role-profiles/${encodeURIComponent(profileId)}`);
+    const data = await r.json();
+    profileEntries = data.entries ?? [];
+}
 async function loadRole(larkAppId, chatId) {
     const r = await fetch(`/api/roles/${encodeURIComponent(larkAppId)}/${encodeURIComponent(chatId)}`);
     return r.json();
 }
+function roleKey(larkAppId, chatId) {
+    return `${larkAppId}\u0000${chatId}`;
+}
+async function loadGroupProfileContext() {
+    const detailPairs = await Promise.all(profiles.map(async (profile) => {
+        try {
+            const r = await fetch(`/api/role-profiles/${encodeURIComponent(profile.profileId)}`);
+            const body = await r.json().catch(() => ({}));
+            return [profile.profileId, Array.isArray(body.entries) ? body.entries : []];
+        }
+        catch {
+            return [profile.profileId, []];
+        }
+    }));
+    const nextEffectiveRoles = new Map();
+    const seen = new Set();
+    await Promise.all(cache.flatMap(group => group.memberBots
+        .filter(bot => bot.inChat)
+        .map(async (bot) => {
+        const key = roleKey(bot.larkAppId, group.chatId);
+        if (seen.has(key))
+            return;
+        seen.add(key);
+        try {
+            const role = await loadRole(bot.larkAppId, group.chatId);
+            const hasEffectiveRole = role.hasEffectiveRole ?? role.hasRole;
+            const effectiveContent = 'effectiveContent' in role ? role.effectiveContent : role.content;
+            nextEffectiveRoles.set(key, {
+                content: hasEffectiveRole ? String(effectiveContent ?? '') : null,
+                source: role.effectiveSource ?? (role.hasRole ? 'chat' : 'none'),
+            });
+        }
+        catch {
+            nextEffectiveRoles.set(key, null);
+        }
+    })));
+    groupProfileEntriesById = new Map(detailPairs);
+    groupEffectiveRolesByBot = nextEffectiveRoles;
+}
+async function refreshGroupProfileContext() {
+    try {
+        await loadGroupProfileContext();
+    }
+    catch {
+        groupProfileEntriesById = new Map();
+        groupEffectiveRolesByBot = new Map();
+    }
+    finally {
+        groupProfileContextLoaded = true;
+        renderTree(document.getElementById('roles-search')?.value ?? '');
+    }
+}
 async function saveRole(larkAppId, chatId, content) {
     const r = await fetch(`/api/roles/${encodeURIComponent(larkAppId)}/${encodeURIComponent(chatId)}`, {
         method: 'PUT',
@@ -81,12 +191,66 @@ async function deleteRole(larkAppId, chatId) {
     const r = await fetch(`/api/roles/${encodeURIComponent(larkAppId)}/${encodeURIComponent(chatId)}`, { method: 'DELETE' });
     return r.ok;
 }
+async function loadProfileEntry(profileId, larkAppId) {
+    const r = await fetch(`/api/role-profiles/${encodeURIComponent(profileId)}/${encodeURIComponent(larkAppId)}`);
+    return r.json();
+}
+async function saveProfileEntry(profileId, larkAppId, content) {
+    const r = await fetch(`/api/role-profiles/${encodeURIComponent(profileId)}/${encodeURIComponent(larkAppId)}`, {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ content, allowEmpty: true }),
+    });
+    return r.ok;
+}
+async function deleteProfileEntry(profileId, larkAppId) {
+    const r = await fetch(`/api/role-profiles/${encodeURIComponent(profileId)}/${encodeURIComponent(larkAppId)}`, { method: 'DELETE' });
+    return r.ok;
+}
+function byteLength(s) {
+    return new TextEncoder().encode(s).length;
+}
 function botRoleCount(group) {
     return group.memberBots.filter(b => b.inChat && b.hasRole).length;
 }
 function botInChatCount(group) {
     return group.memberBots.filter(b => b.inChat).length;
 }
+function profileHasEntry(profile, larkAppId) {
+    return (profile.botEntries ?? []).some(entry => entry.larkAppId === larkAppId && entry.hasEntry);
+}
+function entryForBot(larkAppId) {
+    return profileEntries.find(entry => entry.larkAppId === larkAppId);
+}
+function switchTab(tab) {
+    activeTab = tab;
+    document.getElementById('roles-by-group-view')?.toggleAttribute('hidden', tab !== 'groups');
+    document.getElementById('roles-profiles-view')?.toggleAttribute('hidden', tab !== 'profiles');
+}
+function renderRolesGroupProfileStatus(group) {
+    if (!profiles.length || !groupProfileContextLoaded)
+        return '';
+    const rolesByBot = new Map();
+    for (const bot of group.memberBots) {
+        if (!bot.inChat)
+            continue;
+        rolesByBot.set(bot.larkAppId, groupEffectiveRolesByBot.get(roleKey(bot.larkAppId, group.chatId)) ?? null);
+    }
+    if (!hasExplicitChatRole(rolesByBot))
+        return '';
+    const best = summarizeGroupProfileMatches(group.memberBots, profiles, groupProfileEntriesById, rolesByBot)[0];
+    if (!best)
+        return `<div class="roles-profile-match muted">${t('groups.profileStatusUnmatched')}</div>`;
+    const key = best.kind === 'full' ? 'groups.profileStatusFullChat' : 'groups.profileStatusPartial';
+    return `<div class="roles-profile-match ${best.kind}">
+    ${escapeHtml(t(key, {
+        name: best.profileId,
+        matched: best.matched,
+        total: best.total,
+        chat: best.chatMatched,
+    }))}
+  </div>`;
+}
 function renderTree(filter = '') {
     const tree = document.getElementById('roles-tree');
     if (!tree)
@@ -139,28 +303,25 @@ function renderTree(filter = '') {
             <div class="roles-group-meta">
               ${roleCount}/${totalInChat} ${t('roles.botsWithRoles')}
             </div>
+            ${renderRolesGroupProfileStatus(g)}
           </div>
           <span class="roles-group-chevron"></span>
         </div>
         <div class="roles-bot-list">${botRows}</div>
       </div>`;
     }).join('');
-    // Group row click → toggle expand
     tree.querySelectorAll('.roles-group-row').forEach(row => {
         row.addEventListener('click', () => {
             const gid = row.dataset.groupId;
             if (!gid)
                 return;
-            if (expandedGroups.has(gid)) {
+            if (expandedGroups.has(gid))
                 expandedGroups.delete(gid);
-            }
-            else {
+            else
                 expandedGroups.add(gid);
-            }
             renderTree(document.getElementById('roles-search')?.value ?? '');
         });
     });
-    // Bot row click → select for editing
     tree.querySelectorAll('.roles-bot-row').forEach(row => {
         row.addEventListener('click', (e) => {
             e.stopPropagation();
@@ -209,7 +370,7 @@ function updateByteCount() {
     const el = document.getElementById('roles-editor-bytecount');
     if (!el)
         return;
-    const len = new TextEncoder().encode(editingContent).length;
+    const len = byteLength(editingContent);
     el.textContent = `${len} / ${MAX_ROLE_BYTES} bytes`;
     el.className = `roles-bytecount ${len > 3800 ? 'warn' : ''} ${len > MAX_ROLE_BYTES ? 'over' : ''}`;
     updateSaveButton(len);
@@ -218,7 +379,7 @@ function updateSaveButton(byteLen) {
     const btn = document.getElementById('roles-save');
     if (!btn)
         return;
-    const len = byteLen ?? new TextEncoder().encode(editingContent).length;
+    const len = byteLen ?? byteLength(editingContent);
     btn.disabled = len > MAX_ROLE_BYTES || editingContent.trim().length === 0;
 }
 function updatePreview() {
@@ -249,31 +410,326 @@ function resetEditor() {
     if (delBtn)
         delBtn.style.display = 'none';
 }
-export async function renderRolesPage(root) {
-    root.innerHTML = pageHtml();
+function renderProfileList(filter = '') {
+    const list = document.getElementById('roles-profile-list');
+    if (!list)
+        return;
+    const q = filter.toLowerCase();
+    const filtered = profiles.filter(p => !q || p.profileId.toLowerCase().includes(q));
+    if (filtered.length === 0) {
+        list.innerHTML = `<div class="roles-empty">${t('roles.profileEmpty')}</div>`;
+        return;
+    }
+    list.innerHTML = filtered.map(p => {
+        const selected = selectedProfileId === p.profileId;
+        const hasAnyLocal = (p.botEntries ?? []).some(entry => entry.hasEntry);
+        return `
+      <div class="roles-profile-row ${selected ? 'selected' : ''}" data-profile-id="${escapeHtml(p.profileId)}">
+        <div class="roles-profile-row-main">
+          <div class="roles-profile-name">${escapeHtml(p.profileId)}</div>
+          <div class="roles-group-meta">${p.entryCount} ${t('roles.profileEntries')}</div>
+        </div>
+        <span class="roles-badge ${hasAnyLocal ? 'has-role' : 'no-role'}">${hasAnyLocal ? t('roles.configured') : t('roles.profileMissing')}</span>
+      </div>`;
+    }).join('');
+    list.querySelectorAll('.roles-profile-row').forEach(row => {
+        row.addEventListener('click', () => {
+            const profileId = row.dataset.profileId;
+            if (profileId)
+                void selectProfile(profileId);
+        });
+    });
+}
+async function selectProfile(profileId) {
+    if (!isValidProfileId(profileId.trim()))
+        return;
+    selectedProfileId = profileId.trim();
+    selectedProfileBotId = null;
+    profileEditingContent = '';
+    selectedApplyGroupId = selectedApplyGroupId ?? cache[0]?.chatId ?? null;
+    await loadProfileEntries(selectedProfileId);
+    renderProfileList(document.getElementById('roles-profile-search')?.value ?? '');
+    renderProfileDetail();
+}
+function renderProfileDetail() {
+    const empty = document.getElementById('roles-profile-empty');
+    const detail = document.getElementById('roles-profile-detail');
+    if (!empty || !detail)
+        return;
+    if (!selectedProfileId) {
+        empty.style.display = '';
+        detail.style.display = 'none';
+        detail.innerHTML = '';
+        return;
+    }
+    empty.style.display = 'none';
+    detail.style.display = '';
+    const selectedBot = allBots.find(b => b.larkAppId === selectedProfileBotId);
+    const entry = selectedProfileBotId ? entryForBot(selectedProfileBotId) : undefined;
+    detail.innerHTML = `
+    <div class="roles-profile-title">
+      <div>
+        <div class="roles-editor-breadcrumb">
+          <span>${escapeHtml(selectedProfileId)}</span>
+          ${selectedBot ? `<span class="roles-breadcrumb-sep">›</span><span>${escapeHtml(selectedBot.botName ?? selectedBot.larkAppId)}</span>` : ''}
+        </div>
+        <div class="roles-editor-meta-line">${t('roles.profileRuntimeHint')}</div>
+      </div>
+    </div>
+    <div class="roles-profile-grid">
+      <div class="roles-profile-bots">
+        <div class="roles-profile-section-title">${t('roles.profileBots')}</div>
+        <div class="roles-profile-bot-list">
+          ${allBots.map(bot => {
+        const hasEntry = !!entryForBot(bot.larkAppId);
+        const selected = selectedProfileBotId === bot.larkAppId;
+        return `
+              <div class="roles-bot-row roles-profile-bot-row ${selected ? 'selected' : ''}" data-profile-bot-id="${escapeHtml(bot.larkAppId)}">
+                ${botAvatarHtml({ name: bot.botName, larkAppId: bot.larkAppId, size: 'sm' })}
+                <div class="roles-bot-info">
+                  <div class="roles-bot-name">${escapeHtml(bot.botName ?? bot.larkAppId)}</div>
+                  <div class="roles-bot-id">${escapeHtml(bot.larkAppId)}</div>
+                </div>
+                <span class="roles-badge ${hasEntry ? 'has-role' : 'no-role'}">${hasEntry ? t('roles.configured') : t('roles.unconfigured')}</span>
+              </div>`;
+    }).join('')}
+        </div>
+      </div>
+      <div class="roles-profile-editor">
+        ${selectedProfileBotId ? `
+          <textarea id="roles-profile-textarea" placeholder="${t('roles.profileEditorPlaceholder')}" rows="12">${escapeHtml(profileEditingContent || entry?.content || '')}</textarea>
+          <div class="roles-editor-footer">
+            <span id="roles-profile-bytecount" class="roles-bytecount"></span>
+            <div class="roles-editor-actions">
+              <button type="button" id="roles-profile-delete" class="danger" ${entry ? '' : 'style="display:none"'}>${t('roles.delete')}</button>
+              <button type="button" id="roles-profile-save" class="primary">${t('roles.saveEntry')}</button>
+            </div>
+          </div>
+          <div id="roles-profile-preview" class="roles-preview"></div>
+        ` : `<div class="roles-editor-empty roles-profile-inline-empty">${t('roles.profileBotSelectHint')}</div>`}
+      </div>
+    </div>
+    <div class="roles-profile-apply">
+      <div class="roles-profile-section-title">${t('roles.applyToGroup')}</div>
+      <div class="roles-profile-apply-controls">
+        <select id="roles-profile-apply-group">
+          ${cache.map(g => `<option value="${escapeHtml(g.chatId)}" ${selectedApplyGroupId === g.chatId ? 'selected' : ''}>${escapeHtml(g.name ?? g.chatId)}</option>`).join('')}
+        </select>
+        <label class="roles-profile-force"><input type="checkbox" id="roles-profile-apply-force"> ${t('roles.applyForce')}</label>
+      </div>
+      <div id="roles-profile-apply-bots"></div>
+      <div class="roles-editor-actions">
+        <button type="button" id="roles-profile-preview-apply">${t('roles.previewApply')}</button>
+        <button type="button" id="roles-profile-apply" class="primary">${t('roles.applyProfile')}</button>
+      </div>
+      <div id="roles-profile-apply-status" class="roles-profile-status"></div>
+    </div>
+  `;
+    detail.querySelectorAll('.roles-profile-bot-row').forEach(row => {
+        row.addEventListener('click', () => {
+            const botId = row.dataset.profileBotId;
+            if (botId)
+                void selectProfileBot(botId);
+        });
+    });
+    renderProfileApplyBots();
+    bindProfileEditor();
+}
+async function selectProfileBot(botId) {
+    if (!selectedProfileId)
+        return;
+    selectedProfileBotId = botId;
+    const entry = await loadProfileEntry(selectedProfileId, botId);
+    profileEditingContent = entry.content ?? '';
+    await loadProfileEntries(selectedProfileId);
+    renderProfileDetail();
+}
+function bindProfileEditor() {
+    const textarea = document.getElementById('roles-profile-textarea');
+    if (textarea) {
+        profileEditingContent = textarea.value;
+        updateProfileByteCount();
+        updateProfilePreview();
+        textarea.addEventListener('input', (e) => {
+            profileEditingContent = e.target.value;
+            updateProfileByteCount();
+            updateProfilePreview();
+        });
+    }
+    document.getElementById('roles-profile-save')?.addEventListener('click', async function () {
+        if (!selectedProfileId || !selectedProfileBotId)
+            return;
+        this.disabled = true;
+        this.textContent = '...';
+        try {
+            const ok = await saveProfileEntry(selectedProfileId, selectedProfileBotId, profileEditingContent);
+            await loadProfiles();
+            await loadProfileEntries(selectedProfileId);
+            renderProfileList(document.getElementById('roles-profile-search')?.value ?? '');
+            void refreshGroupProfileContext();
+            renderProfileDetail();
+            flashProfileStatus(ok ? t('roles.saved') : t('roles.saveFailed'), !ok);
+        }
+        finally {
+            this.disabled = false;
+            this.textContent = t('roles.saveEntry');
+        }
+    });
+    document.getElementById('roles-profile-delete')?.addEventListener('click', async function () {
+        if (!selectedProfileId || !selectedProfileBotId)
+            return;
+        if (!confirm(t('roles.confirmDeleteProfileEntry')))
+            return;
+        this.disabled = true;
+        try {
+            await deleteProfileEntry(selectedProfileId, selectedProfileBotId);
+            profileEditingContent = '';
+            await loadProfiles();
+            await loadProfileEntries(selectedProfileId);
+            renderProfileList(document.getElementById('roles-profile-search')?.value ?? '');
+            void refreshGroupProfileContext();
+            renderProfileDetail();
+        }
+        finally {
+            this.disabled = false;
+        }
+    });
+    document.getElementById('roles-profile-apply-group')?.addEventListener('change', (e) => {
+        selectedApplyGroupId = e.target.value;
+        renderProfileApplyBots();
+    });
+    document.getElementById('roles-profile-preview-apply')?.addEventListener('click', () => runProfileApply(true));
+    document.getElementById('roles-profile-apply')?.addEventListener('click', () => runProfileApply(false));
+}
+function updateProfileByteCount() {
+    const el = document.getElementById('roles-profile-bytecount');
+    const btn = document.getElementById('roles-profile-save');
+    if (!el)
+        return;
+    const len = byteLength(profileEditingContent);
+    el.textContent = `${len} / ${MAX_ROLE_BYTES} bytes`;
+    el.className = `roles-bytecount ${len > 3800 ? 'warn' : ''} ${len > MAX_ROLE_BYTES ? 'over' : ''}`;
+    if (btn)
+        btn.disabled = len > MAX_ROLE_BYTES || profileEditingContent.trim().length === 0;
+}
+function updateProfilePreview() {
+    const preview = document.getElementById('roles-profile-preview');
+    if (!preview)
+        return;
+    preview.innerHTML = profileEditingContent.trim()
+        ? `<strong>${t('roles.preview')}</strong><pre>${escapeHtml(profileEditingContent)}</pre>`
+        : `<small>${t('roles.previewEmpty')}</small>`;
+}
+function renderProfileApplyBots() {
+    const wrap = document.getElementById('roles-profile-apply-bots');
+    if (!wrap)
+        return;
+    const groupId = selectedApplyGroupId ?? cache[0]?.chatId ?? '';
+    const group = cache.find(g => g.chatId === groupId);
+    const bots = group?.memberBots.filter(b => b.inChat) ?? [];
+    if (!group || bots.length === 0) {
+        wrap.innerHTML = `<div class="roles-empty">${t('roles.noChats')}</div>`;
+        return;
+    }
+    wrap.innerHTML = bots.map(bot => {
+        const hasEntry = !!entryForBot(bot.larkAppId);
+        return `
+      <label class="checkbox-row roles-profile-apply-bot">
+        <input type="checkbox" name="profile-apply-bot" value="${escapeHtml(bot.larkAppId)}" ${hasEntry ? 'checked' : ''}>
+        <span>${escapeHtml(bot.botName ?? bot.larkAppId)}</span>
+        <small>${hasEntry ? t('roles.configured') : t('roles.profileMissing')}</small>
+      </label>`;
+    }).join('');
+}
+async function runProfileApply(preview) {
+    const profileId = selectedProfileId;
+    if (!profileId)
+        return;
+    const groupId = selectedApplyGroupId ?? cache[0]?.chatId;
+    if (!groupId)
+        return;
+    const force = document.getElementById('roles-profile-apply-force')?.checked === true;
+    const selected = [...document.querySelectorAll('input[name=profile-apply-bot]:checked')].map(i => i.value);
+    const status = document.getElementById('roles-profile-apply-status');
+    if (selected.length === 0) {
+        if (status)
+            status.textContent = t('roles.applyPickBots');
+        return;
+    }
+    if (status)
+        status.textContent = '...';
+    const results = await Promise.all(selected.map(async (larkAppId) => {
+        const r = await fetch(`/api/role-profiles/${encodeURIComponent(profileId)}/apply`, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ chatId: groupId, larkAppId, force, preview }),
+        });
+        const body = await r.json().catch(() => ({}));
+        return { larkAppId, ok: r.ok && body.ok !== false, status: r.status, error: body.error, wouldRefuse: body.wouldRefuse };
+    }));
+    if (status) {
+        status.innerHTML = results.map(r => {
+            const bot = allBots.find(b => b.larkAppId === r.larkAppId);
+            const label = escapeHtml(bot?.botName ?? r.larkAppId);
+            const outcome = r.ok
+                ? (preview ? (r.wouldRefuse ? t('roles.applyWouldRefuse') : t('roles.applyPreviewOk')) : t('roles.applyOk'))
+                : `${t('roles.applyFailed')}: ${escapeHtml(r.error ?? `HTTP ${r.status}`)}`;
+            return `<div>${label}: ${outcome}</div>`;
+        }).join('');
+    }
+    if (!preview) {
+        await loadGroups();
+        renderTree(document.getElementById('roles-search')?.value ?? '');
+        void refreshGroupProfileContext();
+    }
+}
+function flashProfileStatus(text, isError = false) {
+    const footer = document.querySelector('#roles-profile-detail .roles-editor-footer');
+    if (!footer)
+        return;
+    const statusEl = document.createElement('span');
+    statusEl.className = `roles-saved-flash ${isError ? 'roles-save-error' : ''}`;
+    statusEl.textContent = ` ${text}`;
+    footer.appendChild(statusEl);
+    setTimeout(() => statusEl.remove(), isError ? 3000 : 2000);
+}
+async function renderRolesSurface(root, tab) {
+    activeTab = tab;
+    root.innerHTML = pageHtml(tab);
     expandedGroups.clear();
     resetEditor();
-    // /api/groups 慢——树区域先亮 loading，避免左栏长时间空白像挂了。
+    switchTab(activeTab);
     const treeEl = document.getElementById('roles-tree');
+    const profileListEl = document.getElementById('roles-profile-list');
     if (treeEl)
         treeEl.innerHTML = loadingHtml();
+    if (profileListEl)
+        profileListEl.innerHTML = loadingHtml();
     await loadGroups();
-    await loadNameMaps(); // 预热共享头像表，让角色树首屏就能出真实头像
-    // Auto-expand groups that have at least one bot with a role
+    await loadProfiles();
+    await loadNameMaps();
+    if (tab === 'profiles') {
+        const requestedChatId = hashChatId();
+        if (requestedChatId && cache.some(g => g.chatId === requestedChatId)) {
+            selectedApplyGroupId = requestedChatId;
+        }
+    }
     for (const g of cache) {
         if (botRoleCount(g) > 0)
             expandedGroups.add(g.chatId);
     }
     renderTree();
-    // Search
+    renderProfileList();
+    if (selectedProfileId)
+        await selectProfile(selectedProfileId);
+    void refreshGroupProfileContext();
     document.getElementById('roles-search')?.addEventListener('input', (e) => {
         renderTree(e.target.value);
     });
-    // Refresh
     document.getElementById('roles-refresh')?.addEventListener('click', async () => {
         await loadGroups();
         renderTree(document.getElementById('roles-search')?.value ?? '');
-        // Re-fetch current selection if any
+        void refreshGroupProfileContext();
         if (selectedGroupId && selectedBotId) {
             const role = await loadRole(selectedBotId, selectedGroupId);
             const textarea = document.getElementById('roles-editor-textarea');
@@ -287,7 +743,6 @@ export async function renderRolesPage(root) {
                 delBtn.style.display = role.hasRole ? '' : 'none';
         }
     });
-    // Save
     document.getElementById('roles-save')?.addEventListener('click', async function () {
         if (!selectedGroupId || !selectedBotId)
             return;
@@ -298,10 +753,10 @@ export async function renderRolesPage(root) {
             if (ok) {
                 await loadGroups();
                 renderTree(document.getElementById('roles-search')?.value ?? '');
+                void refreshGroupProfileContext();
                 const delBtn = document.getElementById('roles-delete');
                 if (delBtn)
                     delBtn.style.display = '';
-                // Brief saved indicator
                 const statusEl = document.createElement('span');
                 statusEl.className = 'roles-saved-flash';
                 statusEl.textContent = ` ${t('roles.saved')}`;
@@ -310,7 +765,6 @@ export async function renderRolesPage(root) {
                 setTimeout(() => statusEl.remove(), 2000);
             }
             else {
-                // Show error feedback
                 const statusEl = document.createElement('span');
                 statusEl.className = 'roles-saved-flash roles-save-error';
                 statusEl.textContent = editingContent.trim().length === 0
@@ -326,7 +780,6 @@ export async function renderRolesPage(root) {
             this.textContent = t('roles.save');
         }
     });
-    // Delete
     document.getElementById('roles-delete')?.addEventListener('click', async function () {
         if (!selectedGroupId || !selectedBotId)
             return;
@@ -340,6 +793,7 @@ export async function renderRolesPage(root) {
                 await loadGroups();
                 resetEditor();
                 renderTree(document.getElementById('roles-search')?.value ?? '');
+                void refreshGroupProfileContext();
             }
         }
         finally {
@@ -347,11 +801,50 @@ export async function renderRolesPage(root) {
             this.textContent = t('roles.delete');
         }
     });
-    // Live edit
     document.getElementById('roles-editor-textarea')?.addEventListener('input', (e) => {
         editingContent = e.target.value;
         updateByteCount();
         updatePreview();
     });
+    document.getElementById('roles-profile-search')?.addEventListener('input', (e) => {
+        renderProfileList(e.target.value);
+    });
+    document.getElementById('roles-profile-refresh')?.addEventListener('click', async () => {
+        await loadGroups();
+        await loadProfiles();
+        void refreshGroupProfileContext();
+        if (selectedProfileId)
+            await loadProfileEntries(selectedProfileId);
+        renderProfileList(document.getElementById('roles-profile-search')?.value ?? '');
+        renderProfileDetail();
+    });
+    document.getElementById('roles-profile-select')?.addEventListener('click', async () => {
+        const input = document.getElementById('roles-profile-id');
+        const profileId = input?.value.trim();
+        if (!profileId)
+            return;
+        if (!isValidProfileId(profileId)) {
+            input?.setCustomValidity(t('roles.profileIdInvalid'));
+            input?.reportValidity();
+            return;
+        }
+        input?.setCustomValidity('');
+        await selectProfile(profileId);
+        if (!location.hash.startsWith('#/roles/profile')) {
+            location.hash = '#/roles/profile';
+        }
+        else {
+            switchTab('profiles');
+        }
+    });
+    document.getElementById('roles-profile-id')?.addEventListener('input', (e) => {
+        e.target.setCustomValidity('');
+    });
+}
+export async function renderRolesPage(root) {
+    await renderRolesSurface(root, 'groups');
+}
+export async function renderRoleProfilesPage(root) {
+    await renderRolesSurface(root, 'profiles');
 }
 //# sourceMappingURL=roles.js.map