botmux 2.107.0 → 2.108.0

package/dist/dashboard/web/groups-page.js

@@ -1,24 +1,755 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { loadingHtml } from './ui.js';
-import { useT } from './react-hooks.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { mountReactPage } from './react-mount.js';
-import { wireGroupsPage } from './groups.js';
-function Html(props) {
-    return _jsx("span", { style: { display: 'contents' }, dangerouslySetInnerHTML: { __html: props.html } });
+import { useT } from './react-hooks.js';
+import { botOrbStyle, chatAvatarUrlFor } from './ui.js';
+import { CreateActionButton, DropdownMenu, LoadingState, OverviewList, OverviewListItem, OverviewListMain, OverviewListTail, RefreshIconButton, } from './dashboard-components.js';
+import { hasExplicitChatRole, summarizeGroupProfileMatches, } from './role-profile-match.js';
+import { allExpectedInChat, availableBotsForPicker, collectGroupProfileEntries, emptyGroupsSnapshot, fetchGroupsSnapshot, fetchRoleProfileSummaries, filterGroupChats, injectOptimisticChat, isValidProfileId, loadGroupRoleProfileContext, paginateGroupRows, roleKey, roleProfileBootstrapStatus, summarizeAddBotsResult, suggestRoleProfileIdFromChat, } from './groups.js';
+function emptyRoleContext() {
+    return {
+        profiles: [],
+        entriesById: new Map(),
+        groupRoleContentByBot: new Map(),
+        loaded: false,
+    };
+}
+function orbVars(name) {
+    const style = {};
+    for (const part of botOrbStyle(name).split(';')) {
+        if (!part)
+            continue;
+        const i = part.indexOf(':');
+        if (i <= 0)
+            continue;
+        style[part.slice(0, i)] = part.slice(i + 1);
+    }
+    return style;
+}
+function ChatAvatar(props) {
+    const chat = props.chat;
+    const url = chat.avatar ?? chatAvatarUrlFor(chat.chatId);
+    const [broken, setBroken] = useState(false);
+    useEffect(() => { setBroken(false); }, [url]);
+    const name = chat.name ?? chat.chatId;
+    const hasImage = !!url && !broken;
+    return (_jsx("span", { className: `orb-avatar orb-square orb-avatar-sm${hasImage ? ' orb-has-img' : ''}`, style: orbVars(name), "aria-hidden": "true", children: hasImage ? (_jsx("img", { className: "orb-img", src: url, alt: "", decoding: "async", referrerPolicy: "no-referrer", onError: () => setBroken(true) })) : null }));
+}
+function DialogError(props) {
+    return (_jsxs("p", { className: "hint-warn", children: [_jsx("strong", { children: props.title }), _jsx("br", {}), _jsx("small", { children: String(props.reason ?? 'unknown') })] }));
+}
+function BotCheckboxes(props) {
+    return (_jsx(_Fragment, { children: availableBotsForPicker(props.bots, props.excludeIds).map(bot => (_jsxs("label", { className: "checkbox-row", children: [_jsx("input", { type: "checkbox", name: "bot", value: bot.larkAppId }), _jsxs("span", { className: "checkbox-row-main", children: [_jsx("strong", { children: bot.botName ?? bot.larkAppId }), _jsxs("small", { children: ["(", bot.larkAppId, ")"] })] })] }, bot.larkAppId))) }));
+}
+function AddBotsResult(props) {
+    const summary = props.summary;
+    if (!summary.rows.length) {
+        return _jsx("p", { className: "hint-warn", children: "\u6CA1\u6709\u8FD4\u56DE\u6DFB\u52A0\u7ED3\u679C\u3002" });
+    }
+    return (_jsxs("div", { className: summary.failed ? 'hint-warn' : 'hint-ok', children: [_jsxs("strong", { children: ["\u6DFB\u52A0\u7ED3\u679C\uFF1A\u6210\u529F ", summary.okCount, "/", summary.rows.length, summary.failed ? `，失败 ${summary.failed}` : ''] }), _jsx("ul", { children: summary.rows.map((row, index) => {
+                    const id = String(row?.id ?? '?');
+                    return (_jsxs("li", { children: [_jsx("code", { children: id }), ": ", row?.ok ? 'OK' : `failed (${String(row?.error ?? 'unknown')})`] }, `${id}-${index}`));
+                }) })] }));
+}
+function GroupProfileStatus(props) {
+    const { chat, context, tr } = props;
+    if (!context.profiles.length || !context.loaded)
+        return null;
+    const rolesByBot = new Map();
+    for (const bot of chat.memberBots ?? []) {
+        if (!bot?.inChat)
+            continue;
+        rolesByBot.set(bot.larkAppId, context.groupRoleContentByBot.get(roleKey(bot.larkAppId, chat.chatId)) ?? null);
+    }
+    if (!hasExplicitChatRole(rolesByBot))
+        return null;
+    const matches = summarizeGroupProfileMatches(chat.memberBots ?? [], context.profiles, context.entriesById, rolesByBot);
+    const best = matches[0];
+    if (!best) {
+        return _jsx("div", { className: "g-profile-status muted", children: tr('groups.profileStatusUnmatched') });
+    }
+    const key = best.kind === 'full' ? 'groups.profileStatusFullChat' : 'groups.profileStatusPartial';
+    return (_jsx("div", { className: `g-profile-status ${best.kind}`, children: tr(key, {
+            name: best.profileId,
+            matched: best.matched,
+            total: best.total,
+            chat: best.chatMatched,
+        }) }));
+}
+function groupBotStatus(member) {
+    if (!member)
+        return 'unknown';
+    if (member.error)
+        return 'error';
+    return member.inChat ? 'in' : 'out';
+}
+function groupBotStatusLabel(status, tr) {
+    switch (status) {
+        case 'in': return tr('groups.botStatusIn');
+        case 'out': return tr('groups.botStatusOut');
+        case 'error': return tr('groups.botStatusError');
+        case 'unknown':
+        default:
+            return tr('groups.botStatusUnknown');
+    }
+}
+function GroupBotCoverage(props) {
+    const members = new Map((props.chat.memberBots ?? []).map(member => [member.larkAppId, member]));
+    return (_jsx("div", { className: "groups-bot-strip", "aria-label": props.tr('groups.botCoverage'), children: props.bots.map(bot => {
+            const member = members.get(bot.larkAppId);
+            const status = groupBotStatus(member);
+            const label = groupBotStatusLabel(status, props.tr);
+            const name = bot.botName ?? bot.larkAppId;
+            return (_jsxs("span", { className: `groups-bot-pill groups-bot-${status}`, title: `${name}: ${label}${member?.error ? ` (${String(member.error)})` : ''}`, children: [_jsx("i", { "aria-hidden": "true" }), _jsx("span", { className: "groups-bot-name", children: name }), _jsx("span", { className: "groups-bot-state", children: label })] }, bot.larkAppId));
+        }) }));
+}
+const GroupListRow = memo(function GroupListRow(props) {
+    const { chat, tr } = props;
+    const members = chat.memberBots ?? [];
+    const inCount = members.filter(member => member.inChat).length;
+    return (_jsxs(OverviewListItem, { kind: "group", className: "groups-list-row", "data-chat": chat.chatId, children: [_jsx(ChatAvatar, { chat: chat }), _jsxs(OverviewListMain, { children: [_jsxs("div", { className: "groups-row-head", children: [_jsx("b", { children: chat.name ?? chat.chatId }), _jsxs("span", { className: "groups-row-meta", children: [_jsx("span", { className: "groups-row-tag", children: _jsx("code", { children: chat.chatId }) }), chat.ownerId ? (_jsxs("span", { className: "groups-row-tag groups-row-owner-tag", children: [_jsx("span", { children: tr('groups.owner') }), _jsx("code", { children: chat.ownerId })] })) : null] })] }), _jsx(GroupProfileStatus, { chat: chat, context: props.roleContext, tr: tr })] }), _jsx("span", { className: "groups-row-count", children: tr('groups.memberSummary', { count: inCount, total: props.bots.length }) }), _jsxs("div", { className: "groups-row-lower", children: [_jsx(GroupBotCoverage, { chat: chat, bots: props.bots, tr: tr }), _jsxs(OverviewListTail, { children: [_jsx(CreateActionButton, { className: "add-bots", onClick: () => props.onAddBots(chat), children: tr('groups.addBots') }), _jsx("button", { className: "save-profile", type: "button", onClick: () => props.onSaveProfile(chat), children: tr('groups.saveAsProfile') }), _jsx("button", { className: "manage-chat", type: "button", onClick: () => props.onManage(chat), children: tr('groups.manage') })] })] })] }));
+});
+function CreateDialog(props) {
+    const { tr } = props;
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const [success, setSuccess] = useState(null);
+    const [copied, setCopied] = useState(false);
+    const [roleProfileId, setRoleProfileId] = useState('');
+    async function submit(ev) {
+        ev.preventDefault();
+        const fd = new FormData(ev.currentTarget);
+        const name = String(fd.get('name') ?? '').trim();
+        const bindWorkingDir = String(fd.get('bindWorkingDir') ?? '').trim();
+        const roleProfileId = String(fd.get('roleProfileId') ?? '').trim();
+        const ids = fd.getAll('bot');
+        if (ids.length === 0) {
+            setError({ title: '请选择 bot', reason: '至少选择一个 bot 后再创建群聊。' });
+            return;
+        }
+        setSubmitting(true);
+        setError(null);
+        try {
+            const r = await fetch('/api/groups/create', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                    name: name || undefined,
+                    larkAppIds: ids,
+                    bindWorkingDir: bindWorkingDir || undefined,
+                    roleProfileId: roleProfileId || undefined,
+                }),
+            });
+            const respBody = await r.json().catch(() => ({ ok: false, error: `HTTP ${r.status}` }));
+            if (respBody.ok && respBody.chatId) {
+                setSuccess(respBody);
+                props.onCreated(respBody, ids, name);
+            }
+            else {
+                setError({ title: '创建失败', reason: respBody.error ?? `HTTP ${r.status}` });
+                setSubmitting(false);
+            }
+        }
+        catch (err) {
+            setError({ title: '网络错误', reason: err });
+            setSubmitting(false);
+        }
+    }
+    if (success) {
+        const chatId = String(success.chatId);
+        const appLink = typeof success.shareLink === 'string' && success.shareLink
+            ? success.shareLink
+            : `https://applink.feishu.cn/client/chat/open?openChatId=${encodeURIComponent(chatId)}`;
+        const invalidBots = (success.invalidBotIds ?? []);
+        const invalidUsers = (success.invalidUserIds ?? []);
+        const binds = Array.isArray(success.oncallBindings) ? success.oncallBindings : [];
+        const bindOk = binds.filter(b => b?.ok).length;
+        const bindFailed = binds.filter(b => !b?.ok);
+        const profileStatus = roleProfileBootstrapStatus(typeof success.roleProfileId === 'string' ? success.roleProfileId : '', success.roleProfileBootstrapMessageId, success.roleProfileBootstrapError);
+        return (_jsxs("article", { className: "g-create-dialog g-create-success", children: [_jsx("header", { children: _jsx("h3", { children: tr('groups.successTitle') }) }), _jsxs("p", { children: [_jsx("b", { children: "chatId:" }), " ", _jsx("code", { children: chatId }), ' ', _jsx("button", { type: "button", "data-copy": chatId, onClick: () => {
+                                void navigator.clipboard.writeText(chatId);
+                                setCopied(true);
+                                props.setTimer(() => setCopied(false), 800);
+                            }, children: copied ? tr('sessions.copied') : tr('sessions.copy') })] }), _jsxs("p", { children: [_jsx("b", { children: "\u521B\u5EFA\u8005:" }), " ", _jsx("code", { children: String(success.creator ?? '?') })] }), _jsx(CreateInviteNote, { resp: success }), binds.length > 0 ? (bindFailed.length === 0 ? (_jsxs("p", { className: "hint-ok", children: ["\u5DF2\u7ED1\u5B9A\u76EE\u5F55\uFF1A", _jsx("code", { children: String(success.bindResolvedPath ?? '') }), "\uFF08", bindOk, "/", binds.length, " bots\uFF09"] })) : (_jsxs("p", { className: "hint-warn", children: ["\u76EE\u5F55\u7ED1\u5B9A\u90E8\u5206\u5931\u8D25\uFF1A\u6210\u529F ", bindOk, "/", binds.length, "\u3002", bindFailed.map((b, index) => (_jsxs("span", { children: [_jsx("br", {}), _jsx("code", { children: String(b?.larkAppId ?? '?') }), ": ", String(b?.error ?? 'unknown')] }, `${b?.larkAppId ?? '?'}-${index}`)))] }))) : null, profileStatus ? _jsx("p", { className: profileStatus.kind === 'ok' ? 'hint-ok' : 'hint-warn', children: profileStatus.text }) : null, invalidBots.length || invalidUsers.length ? (_jsxs("ul", { children: [invalidBots.length ? _jsxs("li", { children: ["\u65E0\u6548 bot id: ", _jsx("code", { children: invalidBots.join(', ') })] }) : null, invalidUsers.length ? _jsxs("li", { children: ["\u65E0\u6548\u7528\u6237 open_id: ", _jsx("code", { children: invalidUsers.join(', ') })] }) : null] })) : null, _jsxs("div", { className: "actions", children: [_jsx("button", { type: "button", id: "g-create-close", onClick: props.onClose, children: tr('sessions.dismiss') }), _jsx("a", { className: "btn-link primary", href: appLink, target: "_blank", rel: "noopener", children: tr('groups.openGroup') })] })] }));
+    }
+    return (_jsxs("article", { className: "g-create-dialog", children: [_jsxs("header", { className: "g-create-head", children: [_jsx("h3", { children: tr('groups.createTitle') }), _jsx("p", { children: tr('groups.createHelp') })] }), _jsxs("form", { id: "g-createform", className: "g-create-form", onSubmit: ev => void submit(ev), children: [_jsxs("fieldset", { className: "g-modal-field g-create-bots", children: [_jsx("legend", { children: tr('groups.botPicker') }), _jsx("div", { className: "g-bot-picker", children: _jsx(BotCheckboxes, { bots: props.bots }) })] }), _jsxs("div", { className: "g-create-fields", children: [_jsxs("fieldset", { className: "g-modal-field", children: [_jsx("legend", { children: tr('groups.name') }), _jsx("input", { type: "text", name: "name", placeholder: tr('groups.namePlaceholder'), maxLength: 60 })] }), _jsxs("fieldset", { className: "g-modal-field", children: [_jsx("legend", { children: tr('groups.bindDir') }), _jsx("input", { type: "text", name: "bindWorkingDir", placeholder: "e.g. ~/projects/botmux" }), _jsx("small", { children: tr('groups.bindDirHelp') })] }), _jsxs("fieldset", { className: "g-modal-field g-profile-field", children: [_jsx("legend", { children: tr('groups.roleProfile') }), _jsx("input", { type: "hidden", name: "roleProfileId", value: roleProfileId }), _jsx(DropdownMenu, { className: "g-profile-menu", ariaLabel: tr('groups.roleProfile'), label: roleProfileId || tr('groups.roleProfileNone'), value: roleProfileId, options: [
+                                            { value: '', label: tr('groups.roleProfileNone') },
+                                            ...props.roleProfiles.map(profile => ({ value: profile.profileId, label: profile.profileId })),
+                                        ], onChange: setRoleProfileId }), _jsx("small", { children: tr('groups.roleProfileHelp') })] })] }), _jsx("div", { className: "g-create-status", "data-create-status": true, "aria-live": "polite", children: error ? _jsx(DialogError, { ...error }) : null }), _jsxs("div", { className: "actions g-create-actions", children: [_jsx("button", { type: "button", id: "g-create-cancel", onClick: props.onClose, children: tr('groups.cancel') }), _jsx("button", { type: "submit", className: "primary", disabled: submitting, children: submitting ? _jsxs(_Fragment, { children: [_jsx("i", { className: "button-spinner", "aria-hidden": "true" }), tr('groups.createSubmitting')] }) : tr('groups.createSubmit') })] })] })] }));
+}
+function CreateInviteNote(props) {
+    const resp = props.resp;
+    const auto = resp.autoInvitedOpenId;
+    const rejected = !!resp.autoInviteRejected;
+    const ownerTo = resp.ownerTransferredTo;
+    const transferErr = resp.transferError;
+    const notifyMsgId = resp.notifyMessageId;
+    const notifyErr = resp.notifyError;
+    if (auto) {
+        return (_jsxs("p", { className: "hint-ok", children: ["\u5DF2\u81EA\u52A8\u9080\u8BF7\u4F60\uFF08", _jsx("code", { children: auto }), "\uFF09\u4F5C\u4E3A\u6210\u5458\u3002", ownerTo ? _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("small", { children: "\u7FA4\u4E3B\u5DF2\u4ECE\u673A\u5668\u4EBA\u8F6C\u8BA9\u7ED9\u4F60\u3002" })] }) : null, transferErr ? _jsxs(_Fragment, { children: [_jsx("br", {}), _jsxs("small", { className: "hint-warn-inline", children: ["\u26A0 \u81EA\u52A8\u8F6C\u8BA9\u7FA4\u4E3B\u5931\u8D25\uFF08", transferErr, "\uFF09\uFF0C\u4F60\u73B0\u5728\u662F\u6210\u5458\u4F46\u7FA4\u4E3B\u4ECD\u662F\u673A\u5668\u4EBA\u3002"] })] }) : null, notifyMsgId ? _jsxs(_Fragment, { children: [_jsx("br", {}), _jsxs("small", { children: ["\u673A\u5668\u4EBA\u5DF2\u5728\u7FA4\u91CC @ \u4E86\u4F60\uFF08\u6D88\u606F id ", _jsx("code", { children: notifyMsgId }), "\uFF09\uFF0C\u770B\u98DE\u4E66\u901A\u77E5\u5C31\u80FD\u8FDB\u7FA4\u3002"] })] }) : null, notifyErr ? _jsxs(_Fragment, { children: [_jsx("br", {}), _jsxs("small", { className: "hint-warn-inline", children: ["\u26A0 \u81EA\u52A8 @ \u901A\u77E5\u5931\u8D25\uFF08", notifyErr, "\uFF09\uFF0C\u65B0\u7FA4\u53EF\u80FD\u4E0D\u4F1A\u4E3B\u52A8\u51FA\u73B0\u5728\u4F60\u4FA7\u8FB9\u680F\uFF0C\u5EFA\u8BAE\u4ECE\u4E0B\u9762\u6309\u94AE\u8DF3\u8FDB\u53BB\u3002"] })] }) : null] }));
+    }
+    if (rejected) {
+        return (_jsxs("p", { className: "hint-warn", children: ["\u98DE\u4E66\u62D2\u7EDD\u4E86\u81EA\u52A8\u9080\u8BF7\uFF08\u4F60\u7684 open_id \u5728\u521B\u5EFA\u8005 bot \u7684 scope \u4E0B\u4E0D\u53EF\u7528\uFF09\u3002", _jsx("strong", { children: "\u4F60\u76EE\u524D\u4E0D\u662F\u65B0\u7FA4\u6210\u5458" }), "\uFF0C\u9700\u8981\u8BA9\u7FA4\u91CC\u7684\u67D0\u4E2A\u673A\u5668\u4EBA\u624B\u52A8\u628A\u4F60\u52A0\u8FDB\u6765\u3002"] }));
+    }
+    return (_jsxs("p", { className: "hint-warn", children: ["\u6CA1\u5728 dashboard \u7F13\u5B58\u91CC\u627E\u5230 ownerOpenId\uFF0C", _jsx("strong", { children: "\u6CA1\u6709\u81EA\u52A8\u9080\u8BF7\u4F60" }), "\u3002\u70B9\u5F00\u4E0B\u9762\u94FE\u63A5\u524D\uFF0C\u5148\u8BA9\u7FA4\u91CC\u4EFB\u4E00\u673A\u5668\u4EBA\u624B\u52A8\u628A\u4F60\u52A0\u8FDB\u53BB\u3002"] }));
+}
+function AddBotsDialog(props) {
+    const { chat, tr } = props;
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const [summary, setSummary] = useState(null);
+    const inChatSet = useMemo(() => new Set((chat.memberBots ?? []).filter(member => member.inChat).map(member => member.larkAppId)), [chat]);
+    async function submit(ev) {
+        ev.preventDefault();
+        const fd = new FormData(ev.currentTarget);
+        const ids = fd.getAll('bot');
+        if (ids.length === 0) {
+            setError({ title: '请选择 bot', reason: '至少选择一个 bot 后再添加。' });
+            setSummary(null);
+            return;
+        }
+        setSubmitting(true);
+        setError(null);
+        setSummary(null);
+        try {
+            const r = await fetch(`/api/groups/${encodeURIComponent(chat.chatId)}/add-bots`, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ larkAppIds: ids }),
+            });
+            const respBody = await r.json();
+            if (respBody.error === 'no_proxy_bot') {
+                setError({
+                    title: '无法添加 bot',
+                    reason: '当前群里没有可代理操作的 bot。请先在飞书里手动拉入一个 bot，然后重试。',
+                });
+            }
+            else if (respBody.result) {
+                const result = summarizeAddBotsResult(respBody.result);
+                try {
+                    await props.onReloadGroups({ force: true });
+                    setSummary({ result });
+                }
+                catch (err) {
+                    setSummary({ result, refreshError: `添加结果已返回，但刷新群组列表失败：${err}` });
+                }
+            }
+            else {
+                setError({ title: '响应异常', reason: JSON.stringify(respBody) });
+            }
+        }
+        catch (err) {
+            setError({ title: '网络错误', reason: err });
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }
+    return (_jsxs("article", { className: "g-add-bots-dialog", children: [_jsx("header", { children: _jsxs("h3", { children: [tr('groups.addBots'), " \u00B7 ", chat.name ?? chat.chatId] }) }), _jsx("p", { children: tr('groups.createHelp') }), _jsxs("form", { id: "g-addform", onSubmit: ev => void submit(ev), children: [_jsx(BotCheckboxes, { bots: props.bots, excludeIds: inChatSet }), _jsxs("div", { "data-add-status": true, "aria-live": "polite", children: [error ? _jsx(DialogError, { ...error }) : null, summary ? (_jsxs(_Fragment, { children: [_jsx(AddBotsResult, { summary: summary.result }), summary.refreshError ? _jsx(DialogError, { title: "\u5237\u65B0\u5931\u8D25", reason: summary.refreshError }) : null] })) : null] }), _jsxs("div", { className: "actions", children: [_jsx("button", { type: "button", id: "g-cancel", onClick: props.onClose, children: tr('groups.cancel') }), _jsx("button", { type: "submit", className: "primary", disabled: submitting, children: submitting ? 'Adding...' : tr('groups.addBots') })] })] })] }));
+}
+function SaveProfileDialog(props) {
+    const { tr } = props;
+    const [entries, setEntries] = useState([]);
+    const [profiles, setProfiles] = useState([]);
+    const [loadingSnapshot, setLoadingSnapshot] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const sortedProfiles = useMemo(() => [...profiles].sort((a, b) => a.profileId.localeCompare(b.profileId)), [profiles]);
+    const hasExistingProfiles = sortedProfiles.length > 0;
+    const emptyCount = entries.filter(entry => entry.status === 'empty').length;
+    const failedCount = entries.filter(entry => entry.status === 'error').length;
+    const canSubmitSnapshot = !loadingSnapshot && !loadError && entries.length > 0 && failedCount === 0;
+    const [selectedMode, setSelectedMode] = useState('new');
+    const [profileId, setProfileId] = useState(props.suggestedProfileId);
+    const [selectedExistingProfileId, setSelectedExistingProfileId] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const [status, setStatus] = useState(null);
+    const currentProfileId = selectedMode === 'overwrite' ? selectedExistingProfileId : profileId.trim();
+    const submitText = selectedMode === 'overwrite'
+        ? tr('groups.saveProfileOverwriteSubmit')
+        : tr('groups.saveProfileSubmit');
+    const snapshotSummary = loadError
+        ? loadError
+        : loadingSnapshot
+            ? tr('groups.saveProfilePreparing')
+            : failedCount
+                ? tr('groups.saveProfileFailedLoadSummary', { count: failedCount })
+                : entries.length
+                    ? emptyCount
+                        ? tr('groups.saveProfileEntrySummaryWithEmpty', { count: entries.length, emptyCount })
+                        : tr('groups.saveProfileEntrySummary', { count: entries.length })
+                    : tr('groups.saveProfileNoRoles');
+    useEffect(() => {
+        let alive = true;
+        setLoadingSnapshot(true);
+        setLoadError(null);
+        setStatus(null);
+        void (async () => {
+            try {
+                const [nextEntries, nextProfiles] = await Promise.all([
+                    collectGroupProfileEntries(props.chat),
+                    fetchRoleProfileSummaries().catch(() => []),
+                ]);
+                if (!alive)
+                    return;
+                const sortedNextProfiles = [...nextProfiles].sort((a, b) => a.profileId.localeCompare(b.profileId));
+                setEntries(nextEntries);
+                setProfiles(nextProfiles);
+                setSelectedExistingProfileId(cur => sortedNextProfiles.some(profile => profile.profileId === cur)
+                    ? cur
+                    : sortedNextProfiles[0]?.profileId ?? '');
+            }
+            catch (err) {
+                if (!alive)
+                    return;
+                setEntries([]);
+                setProfiles([]);
+                setSelectedExistingProfileId('');
+                setLoadError(err instanceof Error ? err.message : String(err));
+            }
+            finally {
+                if (alive)
+                    setLoadingSnapshot(false);
+            }
+        })();
+        return () => { alive = false; };
+    }, [props.chat]);
+    async function submit(ev) {
+        ev.preventDefault();
+        if (!canSubmitSnapshot)
+            return;
+        if (!isValidProfileId(currentProfileId)) {
+            setStatus({ text: tr('groups.saveProfileInvalid'), className: 'error' });
+            return;
+        }
+        setSubmitting(true);
+        setStatus({ text: tr('groups.saveProfileSaving') });
+        try {
+            const results = await Promise.all(entries.map(async (entry) => {
+                const r = await fetch(`/api/role-profiles/${encodeURIComponent(currentProfileId)}/${encodeURIComponent(entry.larkAppId)}`, {
+                    method: 'PUT',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({ content: entry.content, allowEmpty: true }),
+                });
+                return r.ok;
+            }));
+            const saved = results.filter(Boolean).length;
+            if (saved !== entries.length) {
+                setStatus({
+                    text: tr('groups.saveProfileFailed', { saved, total: entries.length }),
+                    className: 'error',
+                });
+                setSubmitting(false);
+                return;
+            }
+            setStatus({
+                text: tr('groups.saveProfileDone', { name: currentProfileId, count: saved }),
+                className: 'ok',
+            });
+            await props.onRefreshRoleContext();
+            props.setTimer(props.onClose, 700);
+        }
+        catch (err) {
+            setStatus({ text: String(err), className: 'error' });
+            setSubmitting(false);
+        }
+    }
+    function pickMode(mode) {
+        if (mode === 'overwrite' && !hasExistingProfiles)
+            return;
+        setSelectedMode(mode);
+        setStatus(null);
+    }
+    return (_jsxs("article", { className: "g-save-profile-dialog", children: [_jsxs("header", { children: [_jsx("h3", { children: tr('groups.saveProfileTitle') }), _jsx("p", { children: tr('groups.saveProfileIntro', {
+                            name: props.chat.name ?? props.chat.chatId,
+                            count: loadingSnapshot ? '-' : entries.length,
+                        }) })] }), _jsxs("form", { id: "g-save-profile-form", onSubmit: ev => void submit(ev), children: [_jsxs("section", { className: "g-save-profile-panel", children: [_jsxs("div", { className: "g-save-profile-section-head", children: [_jsx("span", { children: tr('groups.saveProfileScope') }), _jsx("small", { children: tr('groups.saveProfileScopeHelp') })] }), _jsxs("div", { className: "g-save-profile-stats", children: [_jsxs("span", { children: [tr('groups.saveProfileBotCount'), " ", _jsx("strong", { children: loadingSnapshot ? '-' : entries.length })] }), failedCount ? _jsxs("span", { className: "warn", children: [tr('groups.saveProfileLoadFailed'), " ", _jsx("strong", { children: failedCount })] }) : null] }), _jsx("div", { className: "g-save-profile-entry-list", children: loadingSnapshot ? (_jsx("div", { className: "g-save-profile-loading", children: _jsx(LoadingState, { label: tr('common.loading') }) })) : loadError ? (_jsx("div", { className: "g-save-profile-empty", children: loadError })) : entries.length ? entries.map(entry => (_jsxs("div", { className: `g-save-profile-entry ${entry.status === 'error' ? 'error' : ''}`, children: [_jsxs("div", { children: [_jsx("strong", { children: entry.botName ?? entry.larkAppId }), _jsx("code", { children: entry.larkAppId })] }), _jsx("span", { className: `g-save-profile-entry-status ${entry.status === 'error' ? 'error' : 'ok'}`, children: tr(entry.status === 'error' ? 'groups.saveProfileStatus.error' : 'groups.saveProfileStatus.entry') })] }, entry.larkAppId))) : _jsx("div", { className: "g-save-profile-empty", children: tr('groups.saveProfileNoRoles') }) })] }), _jsxs("div", { className: "form-row", children: [_jsx("span", { children: tr('groups.saveProfileMode') }), _jsxs("div", { className: "g-save-profile-switch", role: "tablist", "aria-label": tr('groups.saveProfileMode'), children: [_jsx("button", { type: "button", className: selectedMode === 'new' ? 'active' : '', "data-save-profile-mode": "new", "aria-pressed": selectedMode === 'new', onClick: () => pickMode('new'), children: tr('groups.saveProfileNew') }), _jsx("button", { type: "button", className: selectedMode === 'overwrite' ? 'active' : '', "data-save-profile-mode": "overwrite", "aria-pressed": selectedMode === 'overwrite', disabled: !hasExistingProfiles, onClick: () => pickMode('overwrite'), children: tr('groups.saveProfileOverwrite') })] })] }), _jsxs("label", { className: "form-row", "data-profile-mode-row": "new", hidden: selectedMode !== 'new', children: [_jsx("span", { children: tr('groups.saveProfileIdLabel') }), _jsx("input", { type: "text", name: "profileId", value: profileId, maxLength: 64, autoComplete: "off", onChange: ev => {
+                                    setProfileId(ev.currentTarget.value);
+                                    setStatus(null);
+                                } }), _jsx("small", { children: tr('groups.saveProfileInvalid') })] }), _jsxs("div", { className: "form-row", "data-profile-mode-row": "overwrite", hidden: selectedMode !== 'overwrite', children: [_jsx("span", { children: tr('groups.saveProfileExistingLabel') }), hasExistingProfiles ? (_jsx("div", { className: "g-save-profile-picker", children: sortedProfiles.map(profile => (_jsxs("button", { type: "button", className: `g-save-profile-pick ${profile.profileId === selectedExistingProfileId ? 'selected' : ''}`, "data-profile-id": profile.profileId, "aria-pressed": profile.profileId === selectedExistingProfileId, onClick: () => {
+                                        setSelectedExistingProfileId(profile.profileId);
+                                        setSelectedMode('overwrite');
+                                        setStatus(null);
+                                    }, children: [_jsx("span", { children: profile.profileId }), _jsx("small", { children: tr('groups.saveProfileExistingMeta', { count: profile.entryCount ?? 0 }) })] }, profile.profileId))) })) : _jsx("div", { className: "g-save-profile-summary warn", children: tr('groups.saveProfileExistingEmpty') }), _jsx("small", { children: tr('groups.saveProfileOverwriteHelp') })] }), _jsxs("div", { className: "g-save-profile-target", children: [_jsx("span", { children: tr('groups.saveProfileTarget') }), _jsx("code", { "data-save-profile-target": true, children: currentProfileId || '-' }), _jsx("small", { "data-save-profile-target-mode": true, children: selectedMode === 'overwrite' ? tr('groups.saveProfileTargetOverwrite') : tr('groups.saveProfileTargetNew') })] }), _jsx("div", { className: `g-save-profile-summary ${canSubmitSnapshot ? '' : 'warn'}`, children: snapshotSummary }), _jsx("div", { className: `g-save-profile-status ${status?.className ?? ''}`, "data-save-profile-status": true, children: status?.text ?? '' }), _jsxs("div", { className: "actions", children: [_jsx("button", { type: "button", id: "g-save-profile-cancel", onClick: props.onClose, children: tr('groups.cancel') }), _jsx("button", { type: "submit", className: "primary", disabled: !canSubmitSnapshot || submitting || (selectedMode === 'overwrite' && !selectedExistingProfileId), children: submitting ? tr('groups.saveProfileSaving') : submitText })] })] })] }));
+}
+function OncallRow(props) {
+    const { member, tr } = props;
+    const inputRef = useRef(null);
+    const [enabled, setEnabled] = useState(!!member.oncallChat);
+    const [workingDir, setWorkingDir] = useState(member.oncallChat?.workingDir ?? '');
+    const [saving, setSaving] = useState(false);
+    const [status, setStatus] = useState(null);
+    async function save() {
+        setStatus(null);
+        const wd = workingDir.trim();
+        if (enabled && !wd) {
+            setStatus({ text: tr('groups.needWorkingDir'), className: 'hint-warn-inline' });
+            return;
+        }
+        setSaving(true);
+        try {
+            const url = `/api/groups/${encodeURIComponent(props.chat.chatId)}/oncall/${encodeURIComponent(member.larkAppId)}`;
+            const r = enabled
+                ? await fetch(url, {
+                    method: 'PUT',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({ workingDir: wd }),
+                })
+                : await fetch(url, { method: 'DELETE' });
+            const body = await r.json().catch(() => ({}));
+            if (r.ok && body.ok) {
+                setStatus({
+                    text: enabled ? `✓ 已绑定 → ${body.resolvedPath ?? wd}` : '✓ 已解绑',
+                    className: 'hint-ok',
+                });
+                try {
+                    await props.onSaved();
+                }
+                catch { /* tolerate */ }
+            }
+            else {
+                setStatus({ text: `✗ ${body.error ?? r.status}`, className: 'hint-warn-inline' });
+            }
+        }
+        catch (err) {
+            setStatus({ text: `✗ ${err?.message ?? err}`, className: 'hint-warn-inline' });
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs("div", { className: "oncall-row", "data-bot": member.larkAppId, children: [_jsxs("label", { className: "checkbox-row", children: [_jsx("input", { type: "checkbox", "data-action": "toggle", checked: enabled, onChange: ev => {
+                            setEnabled(ev.currentTarget.checked);
+                            if (ev.currentTarget.checked)
+                                window.setTimeout(() => inputRef.current?.focus(), 0);
+                        } }), _jsx("strong", { children: member.botName ?? member.larkAppId }), _jsxs("small", { children: ["(", member.larkAppId, ")"] })] }), _jsxs("div", { className: "oncall-row-body", children: [_jsx("input", { ref: inputRef, type: "text", "data-input": "workingDir", placeholder: "e.g. /root/iserver/botmux", value: workingDir, disabled: !enabled, onChange: ev => setWorkingDir(ev.currentTarget.value) }), _jsx("button", { type: "button", "data-action": "save", disabled: saving, onClick: () => void save(), children: tr('groups.save') }), _jsx("span", { className: `oncall-status ${status?.className ?? ''}`, "data-status": true, children: status?.text ?? '' })] })] }));
+}
+function ManageDialog(props) {
+    const { chat, tr } = props;
+    const inChat = (chat.memberBots ?? []).filter(member => member.inChat);
+    const ownerAppId = typeof chat.ownerId === 'string' ? chat.ownerId : '';
+    const [leaveSelection, setLeaveSelection] = useState(() => new Set());
+    function toggleLeave(appId, checked) {
+        setLeaveSelection(cur => {
+            const next = new Set(cur);
+            if (checked)
+                next.add(appId);
+            else
+                next.delete(appId);
+            return next;
+        });
+    }
+    async function leaveSelected() {
+        const checked = [...leaveSelection];
+        if (checked.length === 0) {
+            alert('至少选一个机器人');
+            return;
+        }
+        if (!confirm(`确定让 ${checked.length} 个机器人退出群聊？该 bot 在此群的会话会一并关闭。`))
+            return;
+        try {
+            const r = await fetch(`/api/groups/${encodeURIComponent(chat.chatId)}/leave`, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ larkAppIds: checked }),
+            });
+            const respBody = await r.json();
+            const lines = (respBody.result ?? []).map((x) => {
+                if (!x.ok)
+                    return `${x.larkAppId}: 失败 (${x.error ?? 'unknown'})`;
+                const closed = (x.closedSessions ?? []);
+                const failed = closed.filter(c => !c.ok).length;
+                const ok = closed.length - failed;
+                const note = closed.length === 0
+                    ? ''
+                    : failed === 0 ? `（关闭 ${ok} 个会话）` : `（关闭 ${ok} 个，${failed} 个失败）`;
+                return `${x.larkAppId}: OK${note}`;
+            }).join('\n');
+            alert(lines || `Unexpected: ${JSON.stringify(respBody)}`);
+            await props.onReloadGroups({ force: true });
+        }
+        catch (err) {
+            alert('Network error: ' + err);
+        }
+        finally {
+            props.onClose();
+        }
+    }
+    async function disband() {
+        if (inChat.length === 0)
+            return;
+        if (!confirm(`确定解散群聊「${chat.name ?? chat.chatId}」？此操作不可恢复，本群所有机器人会话也会一并关闭。`))
+            return;
+        const ordered = [...inChat].sort((a, b) => (b.larkAppId === ownerAppId ? 1 : 0) - (a.larkAppId === ownerAppId ? 1 : 0));
+        const errs = [];
+        for (const member of ordered) {
+            try {
+                const r = await fetch(`/api/groups/${encodeURIComponent(chat.chatId)}/disband`, {
+                    method: 'POST',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({ larkAppId: member.larkAppId }),
+                });
+                const respBody = await r.json();
+                if (respBody.ok) {
+                    const closed = (respBody.closedSessions ?? []);
+                    const failed = closed.filter(c => !c.ok).length;
+                    const ok = closed.length - failed;
+                    const closedNote = closed.length === 0
+                        ? ''
+                        : failed === 0 ? `\n关闭了 ${ok} 个会话。` : `\n关闭了 ${ok} 个会话，${failed} 个会话关闭失败。`;
+                    alert(`已解散（由 ${member.botName ?? member.larkAppId} 执行）${closedNote}`);
+                    await props.onReloadGroups({ force: true });
+                    props.onClose();
+                    return;
+                }
+                errs.push(`${member.botName ?? member.larkAppId}: ${respBody.error ?? r.status}`);
+            }
+            catch (err) {
+                errs.push(`${member.botName ?? member.larkAppId}: ${err}`);
+            }
+        }
+        alert(`所有在群机器人均无法解散：\n${errs.join('\n')}\n\n建议改用「退出群聊」。`);
+    }
+    return (_jsxs("article", { className: "g-manage-dialog", children: [_jsx("header", { children: _jsx("h3", { children: tr('groups.manageTitle', { name: chat.name ?? chat.chatId }) }) }), _jsxs("div", { className: "g-manage-meta", children: [_jsxs("span", { children: [_jsx("b", { children: "chatId" }), _jsx("code", { children: chat.chatId })] }), _jsxs("span", { children: [_jsx("b", { children: tr('groups.owner') }), _jsx("code", { children: chat.ownerId ?? tr('common.unknown') })] })] }), _jsxs("fieldset", { children: [_jsx("legend", { children: tr('groups.oncall') }), _jsx("p", { children: _jsx("small", { children: tr('groups.oncallHelp') }) }), inChat.length === 0 ? (_jsx("p", { className: "empty", children: "\u6CA1\u6709\u673A\u5668\u4EBA\u5728\u7FA4\u91CC" })) : inChat.map(member => (_jsx(OncallRow, { chat: chat, member: member, tr: tr, onSaved: async () => { await props.onReloadGroups({ force: true }); } }, member.larkAppId)))] }), _jsxs("fieldset", { children: [_jsx("legend", { children: tr('groups.leaveTitle') }), inChat.length === 0 ? (_jsx("p", { className: "empty", children: "\u6CA1\u6709\u673A\u5668\u4EBA\u5728\u7FA4\u91CC" })) : (_jsx("div", { className: "g-leave-picker", children: inChat.map(member => (_jsxs("label", { className: "checkbox-row", children: [_jsx("input", { type: "checkbox", name: "leave-bot", value: member.larkAppId, checked: leaveSelection.has(member.larkAppId), onChange: ev => toggleLeave(member.larkAppId, ev.currentTarget.checked) }), _jsxs("span", { className: "checkbox-row-main", children: [_jsx("strong", { children: member.botName ?? member.larkAppId }), member.larkAppId === ownerAppId ? _jsx("small", { children: "\u00B7 \u7FA4\u4E3B" }) : null] })] }, member.larkAppId))) }))] }), _jsx("p", { className: "g-manage-danger-hint", children: tr('groups.dangerHint') }), _jsxs("div", { className: "actions", children: [_jsx("button", { type: "button", onClick: props.onClose, children: tr('sessions.dismiss') }), _jsx("button", { id: "g-leave-btn", type: "button", disabled: inChat.length === 0, onClick: () => void leaveSelected(), children: tr('groups.leaveSelected') }), _jsx("button", { id: "g-disband-btn", type: "button", className: "contrast", disabled: inChat.length === 0, onClick: () => void disband(), children: tr('groups.disband') })] })] }));
+}
+function DialogHost(props) {
+    const dialogRef = useRef(null);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return undefined;
+        const onClose = () => props.onClose();
+        dialog.addEventListener('close', onClose);
+        return () => dialog.removeEventListener('close', onClose);
+    }, [props.onClose]);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (props.dialog && !dialog.open)
+            dialog.showModal();
+        if (!props.dialog && dialog.open)
+            dialog.close();
+    }, [props.dialog]);
+    let content = null;
+    if (props.dialog?.type === 'create') {
+        content = (_jsx(CreateDialog, { bots: props.snapshot.bots, roleProfiles: props.dialog.roleProfiles, tr: props.tr, onClose: props.onClose, onCreated: props.onCreated, setTimer: props.setTimer }));
+    }
+    else if (props.dialog?.type === 'add-bots') {
+        content = (_jsx(AddBotsDialog, { chat: props.dialog.chat, bots: props.snapshot.bots, tr: props.tr, onClose: props.onClose, onReloadGroups: props.onReloadGroups }));
+    }
+    else if (props.dialog?.type === 'save-profile') {
+        content = (_jsx(SaveProfileDialog, { chat: props.dialog.chat, suggestedProfileId: props.dialog.suggestedProfileId, tr: props.tr, onClose: props.onClose, onRefreshRoleContext: props.onRefreshRoleContext, setTimer: props.setTimer }));
+    }
+    else if (props.dialog?.type === 'manage') {
+        content = (_jsx(ManageDialog, { chat: props.dialog.chat, tr: props.tr, onClose: props.onClose, onReloadGroups: props.onReloadGroups }));
+    }
+    const className = props.dialog?.type === 'create' ? 'groups-create-modal' : undefined;
+    return (_jsx("dialog", { id: "g-drawer", className: className, ref: dialogRef, onMouseDown: event => {
+            if (event.target === event.currentTarget)
+                event.currentTarget.close();
+        }, children: content }));
 }
-// Render-once scaffold: React owns the translated route shell, while
-// wireGroupsPage owns the matrix and dialog flows until those controllers are
-// split into reactive components. Keep ui-change rerenders as full remounts.
 function GroupsPage() {
     const tr = useT();
-    const rootRef = useRef(null);
+    const mountedRef = useRef(false);
+    const snapshotRef = useRef(emptyGroupsSnapshot);
+    const timersRef = useRef(new Set());
+    const delayResolversRef = useRef(new Map());
+    const roleContextRunRef = useRef(0);
+    const [snapshot, setSnapshotState] = useState(emptyGroupsSnapshot);
+    const [roleContext, setRoleContext] = useState(() => emptyRoleContext());
+    const [filters, setFilters] = useState({ q: '', missingOnly: false });
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const [refreshing, setRefreshing] = useState(false);
+    const [dialog, setDialog] = useState(null);
+    const [page, setPage] = useState(1);
+    const setSnapshot = useCallback((next) => {
+        setSnapshotState(cur => {
+            const resolved = typeof next === 'function' ? next(cur) : next;
+            snapshotRef.current = resolved;
+            return resolved;
+        });
+    }, []);
+    const setTimer = useCallback((fn, ms) => {
+        const id = window.setTimeout(() => {
+            timersRef.current.delete(id);
+            if (mountedRef.current)
+                fn();
+        }, ms);
+        timersRef.current.add(id);
+        return id;
+    }, []);
+    const delay = useCallback((ms) => new Promise(resolve => {
+        const id = window.setTimeout(() => {
+            timersRef.current.delete(id);
+            delayResolversRef.current.delete(id);
+            resolve();
+        }, ms);
+        timersRef.current.add(id);
+        delayResolversRef.current.set(id, resolve);
+    }), []);
+    const refreshRoleProfileContext = useCallback(async (source) => {
+        const runId = ++roleContextRunRef.current;
+        try {
+            const context = await loadGroupRoleProfileContext(source ?? snapshotRef.current);
+            if (mountedRef.current && runId === roleContextRunRef.current)
+                setRoleContext(context);
+        }
+        catch {
+            if (mountedRef.current && runId === roleContextRunRef.current) {
+                setRoleContext({ ...emptyRoleContext(), loaded: true });
+            }
+        }
+    }, []);
+    const reloadGroups = useCallback(async (options) => {
+        const next = await fetchGroupsSnapshot({ force: options?.force });
+        if (!mountedRef.current)
+            return next;
+        setSnapshot(next);
+        setLoadError(null);
+        void refreshRoleProfileContext(next);
+        return next;
+    }, [refreshRoleProfileContext, setSnapshot]);
+    const refreshUntilSeen = useCallback(async (chatId, expectedBotIds) => {
+        const delays = [600, 1200, 1200, 1200, 1200, 1200];
+        for (const ms of delays) {
+            await delay(ms);
+            if (!mountedRef.current)
+                return;
+            let next;
+            try {
+                next = await fetchGroupsSnapshot({ force: true });
+            }
+            catch {
+                continue;
+            }
+            if (!mountedRef.current)
+                return;
+            const row = (next.chats ?? []).find(chat => chat.chatId === chatId);
+            if (row && allExpectedInChat(row, expectedBotIds)) {
+                setSnapshot(next);
+                void refreshRoleProfileContext(next);
+                return;
+            }
+        }
+    }, [delay, refreshRoleProfileContext, setSnapshot]);
     useEffect(() => {
-        if (!rootRef.current)
-            return undefined;
-        return wireGroupsPage(rootRef.current);
+        mountedRef.current = true;
+        void (async () => {
+            setLoading(true);
+            try {
+                await reloadGroups();
+            }
+            catch (err) {
+                if (mountedRef.current) {
+                    setSnapshot(emptyGroupsSnapshot);
+                    setLoadError(err instanceof Error ? err.message : String(err));
+                    void refreshRoleProfileContext(emptyGroupsSnapshot);
+                }
+            }
+            finally {
+                if (mountedRef.current)
+                    setLoading(false);
+            }
+        })();
+        return () => {
+            mountedRef.current = false;
+            roleContextRunRef.current += 1;
+            for (const id of timersRef.current)
+                window.clearTimeout(id);
+            timersRef.current.clear();
+            for (const resolve of delayResolversRef.current.values())
+                resolve();
+            delayResolversRef.current.clear();
+        };
+    }, [reloadGroups]);
+    const rows = useMemo(() => filterGroupChats(snapshot.chats, filters), [snapshot.chats, filters]);
+    const pageWindow = useMemo(() => paginateGroupRows(rows, page), [rows, page]);
+    useEffect(() => {
+        if (page !== pageWindow.page)
+            setPage(pageWindow.page);
+    }, [page, pageWindow.page]);
+    async function refresh() {
+        setRefreshing(true);
+        try {
+            await reloadGroups({ force: true });
+        }
+        catch (err) {
+            setLoadError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            if (mountedRef.current)
+                setRefreshing(false);
+        }
+    }
+    async function openCreateDialog() {
+        if (snapshotRef.current.bots.length === 0) {
+            alert(tr('groups.noBotsOnline'));
+            return;
+        }
+        let roleProfiles = [];
+        try {
+            roleProfiles = await fetchRoleProfileSummaries();
+        }
+        catch { /* profile selector is optional */ }
+        if (mountedRef.current)
+            setDialog({ type: 'create', roleProfiles });
+    }
+    function handleCreated(resp, selectedIds, name) {
+        const chatId = String(resp.chatId);
+        const invalidBotIds = Array.isArray(resp.invalidBotIds) ? resp.invalidBotIds : [];
+        const validIds = selectedIds.filter(id => !invalidBotIds.includes(id));
+        const expectedBotIds = new Set(validIds);
+        if (typeof resp.creator === 'string' && resp.creator)
+            expectedBotIds.add(resp.creator);
+        // Compute the optimistic snapshot from committed state (setSnapshot keeps snapshotRef in
+        // sync) so the profile-context refresh always sees it — not a null from a deferred updater.
+        const optimistic = injectOptimisticChat(snapshotRef.current, chatId, name || chatId, validIds, resp.creator);
+        setSnapshot(optimistic);
+        void refreshRoleProfileContext(optimistic);
+        void refreshUntilSeen(chatId, expectedBotIds).catch(() => { });
+    }
+    const openAddBotsDialog = useCallback((chat) => {
+        const inChatSet = new Set((chat.memberBots ?? []).filter(member => member.inChat).map(member => member.larkAppId));
+        const missing = snapshotRef.current.bots.filter(bot => !inChatSet.has(bot.larkAppId));
+        if (!missing.length) {
+            alert('All configured bots are already in this chat.');
+            return;
+        }
+        setDialog({ type: 'add-bots', chat });
+    }, []);
+    const openSaveProfileDialog = useCallback((chat) => {
+        const suggestedByName = suggestRoleProfileIdFromChat(chat.name ?? '');
+        const suggestedProfileId = suggestedByName === 'profile'
+            ? suggestRoleProfileIdFromChat(chat.chatId)
+            : suggestedByName;
+        setDialog({ type: 'save-profile', chat, suggestedProfileId });
+    }, []);
+    const openManageDialog = useCallback((chat) => {
+        setDialog({ type: 'manage', chat });
     }, []);
-    return (_jsxs("section", { className: "page", ref: rootRef, children: [_jsx("div", { className: "page-heading", children: _jsxs("div", { children: [_jsx("p", { className: "eyebrow", children: tr('nav.groups') }), _jsx("h1", { children: tr('groups.title') }), _jsx("p", { children: tr('groups.subtitle') })] }) }), _jsxs("form", { id: "g-filters", className: "filters", children: [_jsx("input", { type: "search", name: "q", placeholder: tr('groups.search') }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", name: "missing" }), " ", tr('groups.missingOnly')] }), _jsx("button", { type: "button", id: "g-refresh", children: tr('groups.refresh') }), _jsx("button", { type: "button", id: "g-create", className: "primary", children: tr('groups.create') })] }), _jsx("div", { id: "g-loading", children: _jsx(Html, { html: loadingHtml() }) }), _jsx("div", { className: "table-scroll matrix-scroll", id: "g-table-wrap", hidden: true, children: _jsxs("table", { children: [_jsx("thead", { id: "g-head" }), _jsx("tbody", { id: "g-body" })] }) }), _jsx("dialog", { id: "g-drawer" })] }));
+    function goToPage(nextPage) {
+        const list = document.getElementById('g-body');
+        if (list)
+            list.scrollTop = 0;
+        setPage(nextPage);
+    }
+    return (_jsxs("section", { className: "page groups-page", children: [_jsxs("div", { className: "page-heading", children: [_jsxs("div", { children: [_jsx("p", { className: "eyebrow", children: tr('nav.groups') }), _jsx("h1", { children: tr('groups.title') })] }), _jsx("div", { className: "page-heading-actions", children: _jsx(CreateActionButton, { id: "g-create", className: "page-primary-action", onClick: () => void openCreateDialog(), children: tr('groups.create') }) })] }), _jsxs("form", { id: "g-filters", className: "filters dashboard-toolbar groups-toolbar", onSubmit: ev => ev.preventDefault(), children: [_jsx("input", { type: "search", name: "q", placeholder: tr('groups.search'), value: filters.q, onChange: ev => {
+                            const q = ev.currentTarget.value;
+                            setPage(1);
+                            setFilters(cur => ({ ...cur, q }));
+                        } }), _jsxs("label", { className: "filter-toggle", children: [_jsx("input", { type: "checkbox", name: "missing", checked: filters.missingOnly, onChange: ev => {
+                                    const missingOnly = ev.currentTarget.checked;
+                                    setPage(1);
+                                    setFilters(cur => ({ ...cur, missingOnly }));
+                                } }), _jsx("span", { className: "filter-toggle-label", children: tr('groups.missingOnly') }), _jsx("span", { className: "filter-toggle-switch", "aria-hidden": "true" })] }), _jsx("span", { className: "groups-toolbar-spacer", "aria-hidden": "true" }), _jsxs("span", { className: "groups-toolbar-count", children: [tr('groups.matrixTitle'), " ", loading ? '-/-' : `${rows.length}/${snapshot.chats.length}`] }), _jsx(RefreshIconButton, { id: "g-refresh", label: tr('groups.refresh'), busy: refreshing, disabled: refreshing, onClick: () => void refresh() })] }), loadError ? _jsxs("p", { className: "hint-warn", children: ["\u52A0\u8F7D\u7FA4\u7EC4\u5931\u8D25\uFF1A", loadError] }) : null, _jsx("section", { className: "overview-block groups-matrix-section", children: loading ? (_jsx("div", { id: "g-loading", children: _jsx(LoadingState, { label: tr('common.loading') }) })) : (_jsxs("div", { className: "groups-list-wrap", id: "g-table-wrap", children: [rows.length === 0 ? (_jsx("div", { className: "empty groups-list-empty", id: "g-body", children: tr('groups.empty') })) : (_jsx(OverviewList, { id: "g-body", className: "groups-list", children: pageWindow.rows.map(chat => (_jsx(GroupListRow, { chat: chat, bots: snapshot.bots, roleContext: roleContext, tr: tr, onAddBots: openAddBotsDialog, onSaveProfile: openSaveProfileDialog, onManage: openManageDialog }, chat.chatId))) })), rows.length > 0 && pageWindow.totalPages > 1 ? (_jsxs("nav", { className: "groups-pagination", "aria-label": tr('groups.paginationLabel'), children: [_jsx("span", { className: "groups-pagination-status", "aria-live": "polite", children: tr('groups.pageStatus', {
+                                        page: pageWindow.page,
+                                        pages: pageWindow.totalPages,
+                                        from: pageWindow.from,
+                                        to: pageWindow.to,
+                                        total: pageWindow.total,
+                                    }) }), _jsxs("div", { className: "groups-pagination-actions", children: [_jsx("button", { type: "button", disabled: pageWindow.page <= 1, onClick: () => goToPage(pageWindow.page - 1), children: tr('groups.prevPage') }), _jsx("button", { type: "button", disabled: pageWindow.page >= pageWindow.totalPages, onClick: () => goToPage(pageWindow.page + 1), children: tr('groups.nextPage') })] })] })) : null] })) }), _jsx(DialogHost, { dialog: dialog, snapshot: snapshot, tr: tr, onClose: () => setDialog(null), onCreated: handleCreated, onReloadGroups: reloadGroups, onRefreshRoleContext: () => refreshRoleProfileContext(), setTimer: setTimer })] }));
 }
 export function renderGroupsPage(root) {
     return mountReactPage(root, _jsx(GroupsPage, {}));